@charset "utf-8";
/* CSS Document */

@media screen and (max-width: 768px) {
	body {
		font-size:1.6em;
	}
	#wrap{
		margin:0;
		padding:0;
	}
	.img-100{
		width:100%;
		height:auto;
	}
	.sp-none{
		display:none;
	}
	.flex-bt, .flex-center, .flex-stand{
		display: block;
	}
	.sp-flex{ display: flex; }
	
	/*font*/
	.f-center-sp{text-align:center !important;}
	.f-line-sp{line-height:1.4;}
	.f-left-sp{text-align:left !important;}
	.f-center-sp{text-align: center !important;}
	
	/*font*/
	.fs-14{font-size: 1.2rem;}
	.fs-24{font-size: 2rem;}
	.fs-36{font-size: 2.6rem;}
	.fs-48{font-size: 3.2rem;}

	/*margin*/
	.mb20{margin: 0 0 1rem 0;}
	.mb40{margin: 0 0 2rem 0;}
	.mb60{margin: 0 0 3rem 0;}
	
	/*padding*/
	.pd40{padding: 2rem;}/*40px*/
	.ptb120{padding: 6rem 0;}/*120px*/
	.pt120{padding: 6rem 0 0 0;}

	.sp-block{display:block;}

	/*====================================
	 midashi
	====================================*/	
	/*H2*/
	h2{
		margin: 0 0 3rem 0;
		font-size:3.4rem; 
	}
	h2::after{
        font-size: 5rem;
    }
	h3{
        font-size: 2.4rem;
    }
    .f-en{
        font-size: 1.4rem;
    }
	/*====================================
	 header
	====================================*/
	header{
		height: 50px;
	}
	header h1 img{
		width: auto;
		height: 40px;
	}
	.flex-bt-nav{
		width: calc(100% - 50px); /*50pxはバーガーメニュー部分*/
		margin: 1rem 0 0 1rem;
	}
	.flex-bt-nav nav{
		display: none;
	}
	.navToggle {
		display: block;
		position: absolute;    /*fixed bodyに対しての絶対位置指定 */
		right:0;
		top:50%;
		transform: translateY(-50%);
		width: 50px;
		height: 50px;
		cursor: pointer;
		z-index: 150;
		background: rgba(255,255,255,0);
		text-align: center;
	}
	.navToggle.active {
		background: rgba(255,255,255,0);
	}
	.navToggle span {
		display: block;
		position: absolute;    /* .navToggleに対して */
		width:26px;
		border-bottom: solid 2px #fff;
		-webkit-transition: .35s ease-in-out;
		-moz-transition: .35s ease-in-out;
		transition: .35s ease-in-out;
		left: 50%;
		transform: translateX(-50%);
	}
	.navToggle span:nth-child(1) {
		top: 14px;
	}
	 
	.navToggle span:nth-child(2) {
		top: 23px;
	}
	 
	.navToggle span:nth-child(3) {
		top: 32px;
	}
	 
	/* 最初のspanをマイナス45度に */
	.navToggle.active span:nth-child(1) {
		top: 24px;
		left: 12px;
		border-bottom: 2px solid #000;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	 
	/* 2番目と3番目のspanを45度に */
	.navToggle.active span:nth-child(2){
		top: 24px;
		left: 12px;
		border-bottom: 2px solid #000;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.navToggle.active span:nth-child(3){
		display: none;
	}
	#nav{
		padding: 50px 20px;
		margin: 0 0 0 30%;
		width: 80%;
		display:none;
		position: absolute;
		top:0px; /*headerの高さと統一*/
		right: 0;
		z-index: 100;
		box-sizing: border-box;
		background:rgba(255,255,255,0.9);
		box-shadow: 0 15px 30px -5px rgb(0 0 0 / 50%);
	}
	#gnav ul{
		max-width: 100%;
		display:block;
	}
	#gnav ul li{
		width: 100%;
		border-left: none;
		border-bottom: 1px solid rgba(0,0,0,0.2);
	}
	#gnav ul li:last-child{
		border-bottom: none;
	}
	#gnav a{
		position: relative;
		display: block;
		padding: 10px;
		font-size: 100%;
		text-align:left;
		font-weight: 700;
		color: #000;
	}
	#gnav .contact-btn a{
		padding: 1.5rem;
		color: #fff;
	}

	/*====================================
	 contents
	====================================*/
	.contents{
		width:94%; /*コンテンツの幅指定*/
		margin:0 3%;
		padding: 6rem 0;
	}
	
	.btn01 {
		font-size: 1.8rem;
		width:100%;
	}
    
    /*main*/

    .main{
		text-align: center;
    }
	.main .contents{
		margin: 0 auto;
		padding: 10rem 2% 6rem;
		height: calc(100% - 10rem);
		width: 96%;
	}
	.main .contents::after{
		content: none;
	}
    .main h2{
        margin: 0 0 1rem 0;
        font-size: 4rem;
		text-align: center;
    }
    .main h2 div{
        margin: 0.5rem 0;
        padding: 0 1rem;
    }
    .main .sub{
        margin: 0 0 1rem 0;
		font-size: 2rem;
    }
    .main .sub p{
        padding: 0.5rem;
        line-height: 1.4;
        font-size: 2rem;
    }
    .main .copy{
        font-size: 1.6rem;
    }
    .main ul{
        margin: 3rem 0 0 0;
    }
    .main ul li .fs-48{
        font-size: 2.5rem;
    }
	.main ul li .fs-36{
		font-size: 1.85rem;
		letter-spacing: -0.08em;
		font-feature-settings: "palt" ;
	}
    .main ul li{
        margin: 0 0.5rem;
        padding: 1rem 0;
        font-size: 1.5rem;
		width: 30%;
		height: 100%;
		background:url("../images/badge_sp.png") no-repeat center bottom;
		background-size: 95% auto;
    }
    .main ul li::before{
        width: 20px;
        height: 20px;
        background-size: 20px auto;
        top: -5px;
    }

	/*cv*/
    .cv, .cv2{
        padding: 4rem 0;
        overflow: hidden;
    }
    .cv::after,
	.cv2::after{
        width: 365px;
        height: 118px;
        background-size: 365px auto;
        right:-5%;
        bottom: -10%;
    }
    .cv li{
        width: 100%;
        font-size: 2rem;
    }
    .cv li:nth-child(1){
        font-size: 1.8rem;
        padding: 0 0 1rem;
        text-align: center;
    }
    .cv li:nth-child(1)::before{
        width: 20px;
        height: 20px;
        background-size: 20px auto;
        left: 50%;
        top: -25px;
        transform: translateX(-50%);
    }
    .cv li:nth-child(2){
        width: 90%;
        margin: 0 auto;
    }
    .cv li a,
	.cv2 li a{
        padding: 1rem;
        background:#fcee21 url("../images/arrow_b.png") right 20px center no-repeat;
        background-size: 14px auto;
    }
	.cv2 li{
        width: 90%;
        font-size: 2rem;
		margin: 0 auto;
    }
	.cv2 h2{
		padding: 1rem 1rem;
		font-size: 2rem;
	}
	.cv2 h2::before{
		width: 18px;
		height: 10px;
		bottom: -10px;
	}
	.cv2 h3{
		font-size: 1.6rem;
	}
	
	/*btm-bnr*/
	.btm-bnr {
		position: fixed;
		bottom:0;
		width: 100%;
		z-index: 100;
	}
	.btm-bnr div{
		padding:1.5rem;
		width: calc(100% - 3rem);
		background: linear-gradient(to right, #00adec 0%, #136bb2 100%);
		margin: 0;
	}
	.btm-bnr p a {
	  padding: 1rem;
	  font-weight: 900;
	  display: block;
	  text-align: center;
	  color: #131559;
	  position: relative;
	  cursor: pointer;
	  background: #fcee21 url("../images/arrow_b.png") right 20px center no-repeat;
	  background-size: 14px auto;
	  box-shadow: 10px 10px 20px rgba(0,0,0,0.2);
	}
	
	/*rogos*/
	.rogos{
		padding: 5rem 0;
	}
	.rogos h2{
		padding: 0 3%;
		font-size: 3rem;
	}
	.marquee__content li img{
		height:50px;
	}	

	/*lineup*/
    .lineup{
        background: url("../images/lineup_bg.jpg") no-repeat left 20% bottom 5%, linear-gradient(#dbecf1, 5%, #fff);
    }
    .lineup .box{
        margin: 0 auto 1.5rem auto;
        width: 94%;
    }
	.lineup .box p{
		font-size: 1.4rem;
		padding: 0 1rem 1.5rem;
	}
	.lineup .box dl{
        margin: -2rem 0 0 0;
    }
    .lineup .box dt{
        font-size: 1.8rem;
        padding: 0 1rem;
        margin: 0 0 1rem 0;
    }
    .lineup .box dd{
        margin: 0 1rem 1rem 1rem;
        font-size: 2.2rem;
    }
    .lineup .box dd::after{
        width: 14px;
        height: 4px;
        background-size: 14px auto;
        bottom: 36%;
    }
	.lineup ul{
		padding: 2rem 5%;
	}
	.lineup li {
		margin: 0 auto 1rem;
		padding: 1rem 0 1.5rem 0;
		width: 90%;
		font-size: 2.2rem;
		line-height: 1.1;
	}
	.lineup li::after{
		background-size: 14px auto;
	}
	.lineup li span{
		padding: 0.25rem;
		font-size: 1.1rem;
	}
	
	/*choice*/
	.choice dt{
		width: 90%;
		margin: 0 auto -2rem;
		font-size: 2.2rem;
	}
	.choice dt div:first-child{
		font-size:1.8rem;
	}
	.choice dd{
		padding: 3rem 1.5rem 1.5rem;
		text-align: left;
	}
	.choice .box-white{
		padding: 2rem;
	}

	/*solution*/
	.solution h2{
		font-size: 2.2rem;
	}
	.solution .youtube{
		margin: 0 auto 20px;
	}
	
	/*results*/
	.results-list {
		margin:2rem 0;
		width:100%;
	}
	.results-list .mask{
		padding: 1rem 5%;
		width: 90%;
	}
	.results-list img{
		height: 230px;
	}
	.results-list h5{
		margin: 0.5rem 0;
		padding: 0 0 0.5rem;
		font-size: 1.8rem;
	}
	.results-list p{
		font-size: 1.1rem;
	}
	.results-list li{
		font-size: 1.1rem;
		padding: 0.5rem;
	}
	
	/*voice*/
	.voice dl{
		padding: 2rem;
	}
	.voice h3{
		padding: 0.75rem;
	}
	.voice dt p{
		margin: 1rem 0 2rem;
		padding: 0.75rem;
		font-size: 1.6rem;
		line-height: 1.6;
	}
	
    /*comparison*/
    table{
        font-size: 1.3rem;
    }
    table th, table td{
        padding: 0.5rem;
    }
    table th{
        font-size: 1.8rem;
    }
    table tr th:nth-of-type(1){
        border-left: 3px solid #1d2088;
        border-right: 3px solid #1d2088;
    }
    table tr td:nth-of-type(1){
        font-size: 1.5rem;
    }
    table tr td:nth-of-type(2){
        border-left: 3px solid #1d2088;
        border-right: 3px solid #1d2088;
    }
    table tr .border-last{
        border-bottom: 3px solid #1d2088;
    }
    .comparison .en1{
        font-size: 2.6rem;
    }
    .comparison .en2{
        font-size: 2.6rem;
    }
	.comparison h2{
		font-size: 3rem;
	}
	.comparison h2 span{
		font-size: 3.6rem;
	}
	
    /*reason*/
    .reason{
        margin: 6rem 0;
    }
    .reason02 .contents, .reason03 .contents{
        padding: 4rem 0;
    }
	.reason h4{
		font-size:2.4rem;
	}
	.reason01-box{
		width:100%;
		margin: 0 0 3rem;
	}
	.reason .reason01 .reason01-box dl{
		width: calc(100% - 4rem);
		padding: 2rem;
	}
	.reason .reason01-box dl dt{
		margin: 0 0 1rem;
		font-size: 2.6rem;
	}
    /*reason01*/
    .reason01, .reason03{
        background: #eff8ff;
    }
    .reason li{
        margin: 3rem 0;
    }
    .reason figure{
        max-width: 90%;
        margin: 0 auto;
    }
    .reason li dl{
        width:calc(100% - 4rem);
        top: 0;
    }
    .reason li:nth-child(odd) dl, 
    .reason li:nth-child(even) dl{
        right: 0;
        left: 0;
        margin: -2rem auto 0 auto;
        padding: 2rem;
    }
    .reason01 dl dt, .reason03 dl dt{
        padding: 1rem 0 0 3rem;
        font-size: 2.6rem;
    }
    .reason dl dt::before{
        width: 16px;
    }
    .reason dl dt span{
        font-size: 2rem;
    }
    .reason h3::before{
        font-size: 2.4rem;
    }


    /*seisaku*/
    .seisaku-ph{
        height: 200px;
    }
    .seisaku h2{
        font-size: 2.8rem;
        margin: 0 0 2rem 0;
    }
    .seisaku .contents{
        padding: 4rem 0 6rem 0;
    }
    .seisaku dl{
        padding:0;
    }
    .seisaku dt span{
        padding: 0.5rem 2rem;
        text-align: center;
        font-size: 2rem;
        display: block;
    }
    .seisaku dd{
        width: 100%;
        padding: 1rem 0;
        margin: 0 auto;
    }
	
	/*signage*/
	.signage h2{
		margin: 0 0 2rem;
		font-size: 3rem;
	}
	.signage p{
		font-size: 1.6rem;
	}
    
    /*flow*/
    .flow ul li{
        flex-direction: column;
        margin: 0 0 4rem 0;
    }
    .flow ul li::after{
        width:7px;
        height: 20px;
        background-size: 7px auto;
        left: 50%;
        transform: translateX(-50%);
        bottom: -3rem;
    }
    .flow .num{
        width: 100%;
        font-size: 2.8rem;
    }
    .flow .box{
        padding: 2rem;
        width: calc(100% - 4rem);
    }
    .flow .box figure{
        width: 100%;
        text-align: center;
    }
    .flow .box dl{
        width: 100%;
    }
    .flow .box dt{
        padding: 0 0 0 2.4rem;
        font-size: 2.4rem;
    }
    .flow .box dt::before{
        width: 16px;
    }
    
    /*faq*/
    .faq .Label {	
        padding:1rem;
    }
    .faq .Label span{
        padding: 0 2.5rem 0 4rem;
        font-size: 1.9rem;
        line-height: 1.6;
        display: block;
    }
    .faq .Label span::before, .faq .faqtxt p::before{
        font-size: 2rem;
        width: 30px;
        height:30px;
        line-height: 30px;
    }
    .faq .faqtxt p{
        padding: 0 0 0 4rem;
    }
    
    /*showroom*/
    .showroom{
        margin: 0 0 -14rem 0;
    }
    .showroom ul li{
        width: 100%;
    }
    .showroom ul li h3{
        padding: 2rem;
        font-size: 2.4rem;
    }
    .showroom ul li dl{
        margin: 0 2rem;
        padding: 1rem 0;
    }
    .showroom ul li dt{
        width: 100%;
    }
    .showroom ul li dd{
        width: 100%;
    }
    .showroom ul li .gmap{
        margin: 2rem;
    }
    
    /*contact*/
    .contact .contents{
        padding: 12rem 0 6rem 0;
    }
	#wrap .satori__custom_form{
		width: calc(100% - 2rem);
		padding: 1rem;
	}
	.contact .mktoForm .mktoLabel{
		font-size: 1.4rem;
	}
	input#Company, input#Department, input#Department, input#LastName, input#LAST_Furigana, input#Email, input#Phone, select#State, input#City{
		font-size: 1.4rem;
	}
	.mktoButtonRow span{
		margin: 0 !important;
	}
	.contact .mktoButton{
		margin: 0 auto !important;
	}


	/*btm-bnr*/
	.btm-bnr2 {
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 10;
	}
	.btm-bnr2 li{
		width: 50%;
		text-align: center;
		font-weight: 700;
	}
	.btm-bnr2 li a{
		font-size: 1.8rem;
		padding: 1rem 1rem 1rem calc(1rem + 20px);
		display: block;
		color: #fff;
	}
	.btm-bnr2 li:first-child a{
		background: url("../images/icon_tel.png") no-repeat left 20px  center #f5612a;
		background-size: 20px auto;
	}
	.btm-bnr2 li:last-child a{
		background: url("../images/icon_mail.png") no-repeat left 20px  center #ee275f;
		background-size: 20px auto;
	}

	/*pagescroll*/
	#scrollUp {
		bottom:70px;
		right: -7%;
		opacity:0.8;
	}
	#scrollUp img{
		width: 70%;
	}
	/*====================================
	 FOOTER
	====================================*/
	footer {
		padding: 1rem 0 9rem 0;
	}

	footer .copy{
		font-size: 1.2rem;
	}
}