@charset "utf-8";

@media screen and (max-width : 768px) {

    /*------------------------------------------------------------------------------------------
    *
    *
        Responsive / SP
    *
    *
    ------------------------------------------------------------------------------------------ */

    /* ------------------------------------------------------------
    *
        #main_visual
    *
    ------------------------------------------------------------ */
	@-webkit-keyframes fade {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	@keyframes fade {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}
	
    .main-visual {
        position: relative;
        padding-top: 56px;
        height: 100vh;
        overflow: hidden;
		opacity: 0;
		-webkit-animation: fade 1.5s ease-in-out 0s forwards;
		animation: fade 1s ease-in-out 0s forwards;
		-webkit-animation-delay: 0.1s;
			  animation-delay: 0.1s;
    }
	
	.main-visual .section_inner {
		position: relative;
	}
	
	.main-visual .pic {
		padding: 15px 15px 0;
	}
	
	.main-visual .pic img {
		height: 345px;
		-o-object-fit: cover;
		object-fit: cover;
		vertical-align: middle;
	}

    .main-visual .visual_copy {
        position: absolute;
		box-sizing: border-box;
		width: 291px;
		bottom: -18%;
		z-index: 3;
		left: 0;
    }
	
	.main-visual .visual_txt {
		position: absolute;
		bottom: -30%;
		left: 8%;
		color: #1e1e1e;
		font-size: 10px;
		line-height: 1.5;
	}

    .main-visual .main-visual__scroll {
        position: fixed;
        bottom: 10%;
        right: 20px;
        font-size: 16px;
        color: #646464 !important;
        text-decoration: none;
        transform: translate(-50%, 0);
        opacity: 1;
        transition: opacity 1s ease;
		writing-mode: vertical-lr;
    }

    .main-visual .main-visual__scroll span {
        position: absolute;
        top: 60px;
        left: 50%;
        width: 1px;
        height: 50px;
        background-color: #646464;
        animation: scroll 1.5s infinite;
    }

    @keyframes scroll {
        0% {
            transform: translate(0, 0);
            opacity: 0;
        }

        50% {
            opacity: 1;
        }

        100% {
            transform: translate(0, 15px);
            opacity: 0;
        }
    }
	
    .main-visual.is-show .main-visual__scroll {
        opacity: 0;
    }
	
	.main-visual .visual_cap {
		position: absolute;
		right: 5px;
		bottom: 3px;
		color: #b4b4b4;
		font-size: 8px;
	}
	
	.slick-dots {
		display: none !important;
	}   


    /* ------------------------------------------------------------
    *
        .section
    *
    ------------------------------------------------------------ */


    img {
        max-width: 100%;
    	height: auto;
    }


    /* ------------------------------------------------------------
    *
        .section
    *
    ------------------------------------------------------------ */

    .section {
        position: relative;
		margin: 0;
        width: 100%;
        background-color: #fff;
    }

    .section .pic_full {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        background: center/cover no-repeat;

    }
	
	.scroll_anim .fade {
        opacity: 0;
	}
    
	
    .section .copy_wrap {
        display: block;
        position: relative;
        padding: 25px 30px 0;
		font-size: 72%;
        box-sizing: border-box;
    }
    
    .section .sp_up {
        overflow: hidden;
    }
    .section .sp_up img {
        max-width: 140%;
        width: 140%;
    }
	
    
	/* ------------------------------------------------------------
    *
        #advanced
    *
    ------------------------------------------------------------ */
	
	#advanced {
		padding: 15px 0; 
	}
	
	#advanced .section-inner {
		padding-bottom: 40px; 
	} 

	#advanced .section-inner .sec_item_wrap .sec-item p {
		font-size: 15px;
		margin-top: 0;
		width: 100%;
		text-align: center;
	}
	
	#advanced .section-inner .sec_item_wrap .sec-item {
        opacity: 1;
    }

	#advanced .section-inner .sec_item_wrap .sec-item .desc {
		top: 5%;
		left: 8.5%;
		padding: 0 4px;
		width: 84px;
		font-size: 13px; 
		font-family: var(--font-light);
	}
	#advanced .section-inner .sec_item_wrap .sec-item p img {
		max-width: 80%; 
	}
	
	#advanced .section-inner .sec_item_wrap .sec-item.fig-item {
		opacity: 1;
		margin: 0 auto;
		padding-bottom: 34px;
		width: 80vw; 
	} 

	#advanced .section-inner .sec_item_wrap .sec-item.fig-item .slick-wrap .slick-wrap-container .slick-prev {
		bottom: -72px;
		right: 88%; 
	} 

	#advanced .section-inner .sec_item_wrap .sec-item.fig-item .slick-wrap .slick-wrap-container .slick-next {
		bottom: -72px;
		left: 88%; 
	} 

	#advanced .section-inner .sec_item_wrap .sec-item.fig-item .slick-wrap .slick-wrap-container .slick-item .slick-num {
		bottom: 110px;
		font-size: 40px; 
	} 
	
	#advanced .section-inner .sec_item_wrap .sec-item.fig-item .slick-wrap .slick-wrap-container .slick-item .img-wrap {
		width: 75vw;
		height: 75vw;
	}

	.section .section-inner .sec_item_wrap .sec-item.fig-item .slick-wrap .slick-wrap-container .slick-item .img-wrap {
		margin: 0 auto; 
	} 

	#advanced .sec-item {
		order: 1; 
	}

	#advanced .sec-item.fig-item {
		order: 2; 
	} 
	

	/* ------------------------------------------------------------
    *
        #professional
    *
    ------------------------------------------------------------ */
	
	#professional {
		height: 525px;
	}
	
    #professional .pic_profession {
        background-image: url(../../top/image/professional_img_sp.jpg);
    }
	
	#professional .copy_wrap {
		padding-top: 50px;
		opacity: 1;
	}
	
    #professional.anim_end .copy_wrap {
        opacity: 1;
    }

    #professional .copy_wrap .tit {
        margin-bottom: 40px;
        font-size: 16px;
        line-height: 1.5;
    }

    #professional .copy_wrap .copy {
        line-height: 1.7;
    }
	
	/* ------------------------------------------------------------
    *
        #maintain
    *
    ------------------------------------------------------------ */
	
	#maintain .copy_wrap .maintain_copy {
		padding: 37px 0 48px;
		opacity: 1;
	}

	#maintain.anim_end .copy_wrap .maintain_copy {
        opacity: 1;
    }

	#maintain .copy_wrap .maintain_copy .tit {
		margin-bottom: 30px;
		text-align: center;
	}

	#maintain .copy_wrap .maintain_copy .tit img {
		max-width: 91%;	
	}

	#maintain .copy_wrap .maintain_copy .copy{
		padding-left: 14px;
		line-height: 1.9;
	}
	
	#maintain .desc_wrap {
		display: inline-block;
		margin: 0 -15px 55px;
		opacity: 1;
	}

	#maintain.anim_end .desc_wrap {
        opacity: 1;
    }
	
	#maintain .desc_block {
		float: left;
		margin: 25px 0 0;
		width: 100%;
		box-sizing: border-box;
	}
	
	#maintain .desc_block .pic {
		float: left;
		padding-right: 10px;
		width: 40%;
	}
	
	#maintain .desc_detail {
		float: left;
		padding-top: 5px;
		width: 55%;
		color: #595757;
		line-height: 1.5;
	}
	
	#maintain .desc_detail .desc_tit {
		position: relative;
		margin-bottom: 12px;
		padding: 0 0 8px 8px;
		border-bottom: 1px solid #969696;
	}
	
	#maintain .desc_detail .desc_tit:before {
		content: '';
		display: block;
		position: absolute;
		left: -45px;
		bottom: -15px;
		margin: auto;
		width: 50px;
		height: 0;
		border-top: 1px solid #969696;
		transform: rotate(-35deg);
        z-index: -1;
	}
	
	#maintain .desc_detail .desc_copy {
		padding-left: 7px;
		font-size: 91%;
	}
	
	/* ------------------------------------------------------------
    *
        #deliver
    *
    ------------------------------------------------------------ */
	
	#deliver {
		background-color: #5a5a5a;
	}
	
	#deliver .copy_wrap {
		color: #dcdddd;
	}
	
	#deliver .copy_wrap .maintain_copy {
		padding: 40px 0 50px;
		opacity: 1;
	}

	#deliver.anim_end .copy_wrap .maintain_copy {
        opacity: 1;
    }

	#deliver .copy_wrap .maintain_copy .tit {
		margin-bottom: 40px;
		text-align: center;
	}

	#deliver .copy_wrap .maintain_copy .tit img {
		max-width: 92%;	
	}
	
	#deliver .copy_wrap .maintain_copy .copy{
		padding-left: 14px;
		line-height: 1.9;
	}
	
	#deliver .desc_wrap {
		display: inline-block;
		margin-left: 3px;
		width: 100%;
		opacity: 1;
	}

	#deliver.anim_end .desc_wrap {
        opacity: 1;
    }
	
	#deliver .desc_block .pic {
		margin: 0 -15px 0 -22px;
	}
	
	#deliver .desc_detail {
		padding: 0 15px 40px;
		line-height: 1.5;
	}
	
	#deliver .desc_detail .desc_tit {
		margin: 18px 0 14px;
		font-size: 13px;
		font-family: var(--font-light);
	}
	
	
	/* ------------------------------------------------------------
    *
        #search
    *
    ------------------------------------------------------------ */
    
    #search {
        padding: 25px 0;
        font-size: 14px;
        text-align: center;
		background-color: #EFEFEF;
        line-height: 1.6;
    }

    .search_img img {
        position: relative;
        top: 8px;
        max-width: 54%;
        vertical-align: bottom;
    }

    .search_btn {
        margin: 5px 0 0;
    }

    .search_btn img {
        position: relative;
        z-index: 1;
        max-width: 80%;
    }
	

    /* ------------------------------
        #section_caution
    ------------------------------ */
    #section_caution {
        margin-top: -20px;
        padding: 0;
        margin-bottom: 0;
    }
	
	/* ------------------------------
        #nav_right
    ------------------------------ */
	#nav_right {
    	display: none;
	}

}

@media screen and (max-width : 320px) {
	
	.section .copy_wrap {
		font-size: 60%;
	}
	
	#professional .copy_wrap {
		padding-top: 35px;
	}
	
	#professional .copy_wrap .tit,
	#maintain .copy_wrap .maintain_copy .tit,
	#deliver .copy_wrap .maintain_copy .tit {
		margin-bottom: 20px;
	}
	
	#maintain .copy_wrap .maintain_copy {
		padding: 30px 0 20px;
	}
	
	#maintain .copy_wrap .maintain_copy .copy {
		padding: 0 10px;
	}
	
	#maintain .desc_wrap {
		margin-bottom: 40px;
	}
	
	#maintain .desc_detail {
		width: 56%;
	}
	
	#maintain .desc_detail .desc_tit {
		font-size: 9px;
	}
	
	#maintain .desc_detail .desc_copy {
		line-height: 1.6;
	}
	
	#deliver .copy_wrap .maintain_copy {
		padding: 30px 0 30px;
	}
	
	#deliver .copy_wrap .maintain_copy .copy {		
		padding: 0 15px;
	}
	
	#deliver .desc_detail .desc_tit {
		font-size: 12px;
		font-family: var(--font-light);
	}
	
	#deliver .desc_detail {
		padding: 0 15px 25px;
	}
	
	#search {
		font-size: 11px;
		font-family: var(--font-light);
	}

}