@charset "utf-8";

@media screen and (max-width: 768px) {
	body {
		font-size:1.4em !important;
	}
	
	.img-100{width: 100%; height: auto;}

	.sp-none{display:none;}
	.ib{ display:inline-block;}
	.f-left-sp{text-align: left !important;}
	.f-center-sp{text-align: center !important;}
	
	/*font*/
	.fs-32{font-size: 3.2rem;}
	
	/*margin*/
	.sp-mb20{margin:0 0 10px 0;}
	.mb20{margin:0 0 10px 0;}
	.mb40{margin:0 0 20px 0;}
	.mb60{margin:0 0 30px 0;}
	.mb80{margin:0 0 40px 0;}
	.ml40{margin:20px  0;}

	/*padding*/
	.pd2{padding: 1rem;}
	.pd4{padding: 2rem;}
	.pt40{ padding: 2rem 0 0 0;}
	.pd60{padding:30px 5%;}
	.ptb40{padding: 2rem 0;}
	.ptb120{padding:6rem 0;}

	/*====================================
	 default 
	====================================*/
	/*#wrap section*/
	#wrap{
		padding: 0 0 10rem;
	}
	.contents{
		width:94%;
		margin:0 3%;
	}
	.container{
		padding:60px 0;
	}
	.flex-bt, .flex-center{
		display: block;
	}
	/*====================================
	 HEADER
	====================================*/
	header{
		padding: 3%;
	}
	header img{
		height: 40px;
	}
	header h1{
		font-size: 100%;
		margin: 0 0 0 1rem;
	}
	.quocard{
		padding: 0.75rem 0;
	}
	.quocard figure{
		width: 45%;
		margin: 0 1rem 0 0;
	}
	.quocard p{
		font-size: 1.5rem;
	}

	/*====================================
	 MAIN
	====================================*/
	.main{
		padding:8% 2%;
	}
	.main h2{
		width: 100%;
		margin: 0;
	}
	.main .btn{
		width: 85%;
	}
	
	/*====================================
	 contents
	====================================*/
	h2{
		font-size: 3.2rem;
		margin: 0 0 2rem;
	}
	h2 .f-en{
		font-size: 1.6rem;
	}
	h3{
		font-size: 2.3rem;
	}
	
	/*cta*/
	.cta{
		padding: 2.5rem 5%;
	}
	.cta li:first-child, .cta li:last-child{
		width: 100%;
	}
	.cta .card{
		margin: 0 0 1rem 0;
	}
	.cta .card figure{
		width: 30%;
	}
	.cta .card p{
		margin: 0 0 0 1rem ;
		font-size: 1.4rem;
	}
	.cta .card .fs-24{
		font-size: 1.8rem;
	}
	
	/*feature*/
	.feature{
		padding: 6rem 0 6rem;
	}
	.feature-img{
		width: 100%;
		margin: 0 0 2rem;
		padding: 3rem 0 0 0;
	}
	.feature-img .number{
		font-size: 1.2rem;
		padding: 1.5rem;
		border-radius: 7rem 7rem 0rem 7rem;
	}
	.feature li:nth-of-type(even) .feature-img .number{
		right: 0;
		border-radius: 7rem 7rem 7rem 0rem;
	}
	.feature-img .number span{
		font-size: 4rem;
	}
	.feature-img figure{
		width: 60%;
		margin: 0 auto;
	}
	.feature li:nth-child(1) .feature-img figure{
			width: 45%;
		margin: 0 auto;
	}
	.feature li:nth-child(2) .feature-img figure{
		margin-left: 15%;
	}
	.feature li:nth-child(3) .feature-img figure{
		width: 80%;
		margin-right: 5%;
	}
	.feature li:nth-child(4) .feature-img figure{
		margin-left: 15%;
	}
	.feature li:nth-child(5) .feature-img figure{
		width: 60%;
		margin-right: 10%;
	}
	.feature li:nth-child(6) .feature-img figure{
		width: 80%;
		margin-right: 5%;
	}
	.feature li{
		padding: 0 0 2rem;
	}
	.feature-txt{
		width: 100%;
	}

	/*company*/
	.company li{
		width: 31%;
		margin: 0 1% 1rem 1%;
	}
	/*adviser*/
	.adviser-box{
		margin: 4rem 0 0;
		padding: 2rem;
		width: calc(100% - 4rem);
	}
	.adviser-box .subttl{
		top: -1.5rem;
	}
	.adviser-box .subttl span{
		font-size: 1.4rem;
	}
	.adviser-box h3{
		font-size: 2rem;
		margin: 1rem 0;
	}
	.adviser-box h3 span{
		font-size: 2.8rem;
	}
	/*flow*/
	.flow ul{
		width:100%;
	}
	.flow li{
		margin: 5rem 0 0;
		padding: 2rem;
	}
	.flow li::before{
		width: 112px;
		height:24px;
		top: -2.4rem;
		left: 2rem;
	}
	.flow li:nth-of-type(1)::before{
		background: url("../images/feature-01.png") no-repeat left 0 / auto 24px;
	}
	.flow li:nth-of-type(2)::before{
		background: url("../images/feature-02.png") no-repeat left 0 / auto 24px;
	}
	.flow li:nth-of-type(3)::before{
		background: url("../images/feature-03.png") no-repeat left 0 / auto 24px;
	}
	.flow li:nth-of-type(4)::before{
		background: url("../images/feature-04.png") no-repeat left 0 / auto 24px;
	}
	.flow li:nth-of-type(5)::before{
		background: url("../images/feature-05.png") no-repeat left 0 / auto 24px;
	}
	.flow li::after{
		width: 24px;
		height: 13px;
		background: url("../images/arrow-down.png") no-repeat 0 0 / 24px 13px;
		bottom: -2rem;
	}
	.flow li figure{
		width: 15%;
	}
	.flow li dl{
		width: 80%;
	}
	.flow li dt{
		font-size: 2rem;
	}
	
	/*voice*/
	.tab-area {
		padding: 1.25rem;
	}
	.tab-area li::after{
		width: 12px;
		height: 7px;
		background: url("../images/arrow-down-k.png") no-repeat right 0 / 12px auto;
		right: 1rem;
	}
	.tab-area li {
		padding: 0.5rem 3rem 0.5rem 1rem;
		margin: 0 0 1rem;
		width: calc((100% / 2) -4rem);
	}
	.tab-area li:nth-of-type(odd){
		margin: 0 1rem 1rem 0;
	}
	.panel {
		width: calc(100% - 4rem);
		margin: 6rem 0 0;
		padding:2rem;
	}
	.panel h3 {
		font-size: 2rem;
		padding: 1.5rem;
		width: calc(90% - 3rem);
		top: -4rem;
	}
	.voice .profile{
		margin:4rem 0 2rem;
	}
	.voice .profile figure{
		width: 30%;
		margin: 0 2rem 0 0;
	}
	.voice h4{
		font-size: 2rem;
	}
	.voice .san{
		font-size: 1.4rem;
		margin: 0 1rem 0 0;
	}
	.voice .category{
		padding: 0.25rem 0.5rem;
		font-size: 1.2rem;
	}
	.voice .about{
		margin: 2rem 0 0;
		padding: 1.5rem;
	}
	.voice .about dt{
		width: 30%;
	}
	
	/*faq*/
	.faq dl{
		padding: 1.5rem;
	}
	.faq dt{
		font-size: 2rem;
		padding: 0 2rem 0 6rem;
	}
	.faq dl .btn_toggle::before{
		width: 45px;
		height: 45px;
		background: url("../images/q-icon.png") no-repeat left 0 / 45px auto;
	}
	.faq dl .btn_toggle::after{
		font-size: 2rem;
	}
	.faq dd {
		margin: 1rem 0 0;
		padding: 1rem 0 0;
	}
	
	/*chance*/
	.chance .graph{
		width: calc(100% - 4rem);
		padding:4rem 2rem 2rem 2rem;
	}
	.chance h4{
		font-size: 1.7rem;
		padding: 1rem 1.5rem;
		top: -4rem;
		left: 2rem;
	}
	.chance h4 span{
		font-size: 2.4rem;
	}
	.chance figure{
		width: 70%;
	}
	.chance .graph figure{
		width: 100%;
	}

	/*footer*/
	footer{
		padding: 2rem 0;
		font-size: 1.2rem;
	}
	footer .contents{
		width:94%;
	}
	footer figure{
		width: 70%;
		margin: 2rem auto;
	}
	footer .copy{
		font-size: 1.1rem;
	}
	#scrollUp {
		bottom:11rem;
		right: 0;
	}
	#scrollUp img{
		width:50px;
	}

	/*btm-bnr*/
	.btm-bnr {
		padding: 0;
		background:none;
	}
	.btm-bnr .contents{
		width: 96%;
		margin: 0 2%;
		padding: 4% 0 2% 0;
	}
	.btm-bnr p{
		width: 88%;
		margin: 0 auto -0.5rem;
	}
	.btm-bnr figure{
		width: 92%;
		margin: 0 auto;
		border-radius: 1rem;
	}
	.intro-list{
		margin: 2rem 0 0 0;
		padding:2rem;
		width: calc(100% - 4rem);
	}
	.intro-list dl:first-child{
		padding: 0 0 1rem 0;
		margin: 0 0 1rem 0;
	}
	.intro-list dt{
		font-size:1.6rem;
	}
	.intro-list dd{
		margin: 0 0 0 1rem;
	}
	.fs-36{ font-size:2.6rem;}
	.sp_br {
	display: block;
}
	.ptb60{padding:30px 0;}
	.webmendan figure{
		width: 70%;
		margin: -2rem auto -3rem auto;
	}
	.webmendan dl{
		padding: 3rem;
	}
	.webmendan dt{
		margin:  1rem 0;
		line-height: 1.5;
	}
	.webmendan_title {
				font-size:2rem;
		margin: 0 0 2rem 0;
}
	.fs-24{ font-size:2rem;}
}