@charset "utf-8";

@media screen and (max-width: 760px) {
	.panKuzu_wrap {
		display:none;
	}
	article section + section{
		margin-top: 0;
	}
	.content{
		padding-left: 4.28%;
		padding-right: 4.28%;
	}

	/*-----
		/why-lava/index.html
	-----*/
	#first-header{
		background-image: url(/why-lava/images/visual_first.jpg);
	}
	#first-contents{
		margin-bottom: 0;
	}
	#first-point > section{
		position: relative;
		padding: 50px 0;
	}
	#first-point > section#first-lead{
		padding: 0 4.28% 50px;
	}
	#first01, #first03, #first-movie{
		background: #f3f3f3;
	}
	#first01::before,
	#first02::before,
	#first03::before,
	#first04::before,
	#first-movie::before{
		content: "";
		position: absolute;
		left: 50%;
		top: 0;
		width: 0;
		height: 0;
		margin-left: -12px;
		border-style: solid;
		border-width: 24px 12px 0 12px;
		border-color: #007bff transparent transparent transparent;
	}
	#first01::before,
	#first03::before,
	#first-movie::before{
		border-color: #fff transparent transparent transparent;
	}
	#first02::before,
	#first04::before{
		border-color: #f3f3f3 transparent transparent transparent;
	}
	
	.point-content{
		width: 100%;
		padding: 0 4.28%;
		font-size: 14px;
	}
	.point-content h3{
		margin-bottom: 30px;
		font-size: 18px;
		font-weight: 500;
	}
	.point-content h3 span.point-balloon{
		position: relative;
		display: inline-block;
		width: 70px;
		height: 70px;
		padding-top: 12px;
		margin-right: 10px;
		background: rgb(220, 88, 13);
		border-radius: 35px;
		color: #fff;
		font-size: 10px;
		text-align: center;
		vertical-align: middle;
	}
	.point-content h3 span.point-balloon:after {
		content: " ";
		position: absolute;
		top: 65px;
		left: 50%;
		height: 0;
		width: 0;
		margin-left: -6px;
		border-style: solid;
		border-width: 16px 6px 0 6px;
		border-color: #dc580d transparent transparent transparent;
		pointer-events: none;
	}
	.point-content h3 span.point-balloon span.point-num{
		display: block;
		font-size: 28px;
		line-height: 1;
		text-align: center;
	}
	.point-content h3 span.f-small{
		display: inline-block;
		margin-left: 2em;
		font-size: .43em;
		font-weight: normal;
	}
	.point-content h3 span.inlineblock{
		display: inline-block;
		vertical-align: middle;
	}
	.point-content h4{
		margin-bottom: 30px;
		font-size: 16px;
		font-weight: 500;
	}
	.point-content .notes{
		font-size: 12px;
	}
	.point-content .notes li{
		padding-left: 1em;
		text-indent: -1em;
	}
	
	/*
		#first-lead
	*/
	#first-lead{
		margin-bottom: 0;
		padding: 0 4.28%;
		text-align: center;
		font-size: 14px;
	}
	#first-lead h3.h-style03{
		margin-bottom: 0;
	}
	#first-lead p{
		text-align: left;
	}
	
	/*
		#first01
	*/
	#first01 figure{
		position: relative;
		width: 100%;
		margin: 0 auto 40px;
	}
	#first01 figure img{
		width: 100%;
		height: auto;
	}
	#first01 figure .first1-badge{
		position: absolute;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 142px;
		height: 142px;
		background-color: #F5B000;
		border-radius: 71px;
		color: #fff;
		text-align: center;
		font-size: 12px;
		font-weight: bold;
	}
	#first01 figure .first1-badge p{
		margin-bottom: 0;
	}
	#first01 figure .first1-badge span {
		display: block;
		font-size: 42px;
		line-height: 1;
	}
	#first01 figure .first1-badge strong{
		font-size: 1.25em;
	}
	#first01 .notes li{
		padding-left: 2.5em;
		text-indent: -2.5em;
	}
	#first01 .notes li span{
		display: inline-block;
		width: 2.5em;
		text-indent: 0;
	}
	
	/*
		#first02
	*/
	#first02 figure{
		position: relative;
		margin-bottom: 40px;
	}
	#first02 figure .first2-badge{
		position: absolute;
		right: 5px;
		top: 5px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 70px;
		height: 70px;
		background-color: #F5B000;
		border-radius: 35px;
		color: #fff;
		text-align: center;
		font-size: 11px;
		line-height: normal;
		font-weight: normal;
	}
	#first02 figure .first2-badge p{
		margin: 0;
	}
	#first02 figure .first2-badge p span{
		display: block;
		font-size: 20px;
		line-height: 1.2;
		font-weight: bold;
	}
	#first02 figure .first2-badge strong{
		font-size: 1.25em;
	}
	
	/*
		#first03
	*/
	#first03 figure{
		margin-bottom: 40px;
	}
	
	/*
		#first04
	*/
	#first04 h4{
		margin-bottom: 0;
	}
	#first04 .starterset{
		overflow: hidden;
		display: flex;
		margin-bottom: 20px;
		flex-wrap: wrap;
		align-items: flex-end;
		justify-content: space-between;
	}
	#first04 .starterset p{
		width: 48%;
		text-align: center;
		font-size: 12px;
		line-height: 2;
	}
	#first04 .starterset p:nth-child(3n+1){
		clear: left;
	}
	#first04 .starterset p img{
		display: block;
		width: 100%;
		height: auto;
	}
	#first04 .starterset p strong{
		font-size: 14px;
		font-weight: 500;
	}
	
	/*
		#first-movie
	*/
	#first-movie h3{
		text-align: center;
	}
	#first-movie .movie{
		position: relative;
		width: 100%;
		margin: 0 auto;
		padding-top: 56.25%;
	}
	#first-movie .movie .cri-liveact-player{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
	/*
		#first-experience
	*/
	#first-experience{
		padding: 45px 0;
		background: url(/common/images/com_cta_bg.jpg) no-repeat center center /cover;
		color: #fff;
		font-size: 14px;
		text-align: center;
	}
	#first-experience h2{
		margin-bottom: 52px;
		font-size: 24px;
	}
	#first-experience p{
		margin: 0;
		text-align: center;
	}
	
	/*
		#first-flow
	*/
	#first-flow{
		padding: 50px 0;
		font-size: 14px;
	}
	#first-flow .content{
		margin: 0 auto;
		padding: 0 4.28%;
	}
	#first-flow h2{
		margin-bottom: 40px;
	}
	#first-flow h2 span{
		display: block;
		margin-bottom: 1em;
		font-size: .75em;
		font-weight: normal;
	}
	#first-flow .flow-fig{
		text-align: center;
	}
	#first-flow .flow-fig ul{
		display: inline-block;
	}
	#first-flow .flow-fig ul li{
		text-align: left;
	}
	#first-flow .flow-fig ul li:nth-child(n+2){
		padding-top: 55px;
		background: url(/why-lava/images/flow_arrow.svg) no-repeat center 20px /20px 16px;
	}
	#first-flow .flow-fig ul li span{
		display: inline-block;
		width: 2em;
		height: 2em;
		margin-right: .25em;
		border: 1px solid #DE580D;
		border-radius: 1em;
		color: #DE580D;
		line-height: 1.75em;
		text-align: center;
		font-weight: 500;
	}
	
	/*
		#first-faq
	*/
	#first-faq{
		padding: 50px 0;
	}
	#first-faq .content{
		margin: 0 auto;
		padding: 0 4.28%;
	}
	#first-faq h2{
		margin-bottom: 60px;
	}
	#first-faq .qaAccordion dt{
		background-color: #E9E9E9;
	}
	#first-faq .qaAccordion dd{
		background-color: #fff;
	}


/*-----
	/why-lava/flow/index.html
-----*/
	.flow-anchor{
		margin: 35px 0;
		padding-right: 20px;
		overflow: hidden;
	}
	.flow-anchor li{
		float: left;
	}
	.flow-anchor li:nth-child(2n-1){
		width: 47%;
	}
	.flow-anchor li:nth-child(2n){
		width: 53%;
	}
	.flow-anchor li:nth-child(n+3){
		border-top: 1px solid #D7D7D7;
	}
	.flow-anchor a{
		position: relative;
		display: block;
		background-color: #F7F7F7;
		text-align: left;
		font-size: 13px;
		line-height: 50px;
	}
	.flow-anchor li:nth-child(2n-1) a{
		padding-left: 12px;
	}
	.flow-anchor li:nth-child(2n) a{
		padding-left: 20px;
	}
	.flow-anchor a span{
		display: inline-block;
		width: 1.8em;
		height: 1.8em;
		line-height: 1.8;
		border: 1px solid #DE580D;
		border-radius: .9em;
		color: #DE580D;
		font-size: .9em;
		font-weight: 500;
		text-align: center;
	}
	.flow-anchor a:hover{
		background-color: #DE580D;
		color: #fff;
		opacity: 1;
	}
	.flow-anchor a:hover span{
		border-color: #fff;
		color: #fff;
	}
	.flow-anchor a:hover::before{
		border-color: transparent transparent transparent #DE580D;
	}
	.flow-anchor a::before{
		content: "";
		position: absolute;
		right: -14px;
		top: 0;
		display: block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 25px 0 25px 15px;
		border-color: transparent transparent transparent #F7F7F7;
		z-index: 11;
	}
	.flow-anchor a::after{
		content: "";
		position: absolute;
		right: -15px;
		top: 0;
		display: block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 25px 0 25px 15px;
		border-color: transparent transparent transparent #D7D7D7;
		z-index: 10;
	}
	#step1, #step2, #step3, #step4{
		position: relative;
	}
	#step1, #step3{
		background: #f3f3f3;
	}
	#step1::before,
	#step2::before,
	#step3::before,
	#step4::before{
		content: "";
		position: absolute;
		left: 50%;
		top: 0;
		width: 0;
		height: 0;
		margin-left: -12px;
		border-style: solid;
		border-width: 24px 12px 0 12px;
		border-color: #007bff transparent transparent transparent;
	}
	#step1::before,
	#step3::before{
		border-color: #fff transparent transparent transparent;
	}
	#step2::before,
	#step4::before{
		border-color: #f3f3f3 transparent transparent transparent;
	}
	.flow-content{
		width: 100%;
		margin: 0 auto;
		padding: 50px 4.28%;
		font-size: 14px;
		overflow: hidden;
	}
	.flow-content .col-wrap{
		display: block;
		width: 100%;
	}
	.flow-content .col-l,
	.flow-content .col-r{
		display: block;
		vertical-align: top;
		position: relative;
	}
	.flow-content .col-l{
		width: 100%;
		padding-right: 0;
	}
	.flow-content .col-r{
		width: 100%;
	}
	.flow-content h3 {
		margin-bottom: 40px;
		font-size: 18px;
	}
	.flow-content h3 span.balloon{
		position: relative;
		display: inline-block;
		width: 70px;
		height: 70px;
		margin-right: 10px;
		background: rgb(220, 88, 13);
		border-radius: 35px;
		color: #fff;
		font-size: 32px;
		line-height: 70px;
		text-align: center;
		vertical-align: middle;
	}
	.flow-content h3 span.balloon:after{
		content: "";
		position: absolute;
		top: 65px;
		left: 50%;
		height: 0;
		width: 0;
		margin-left: -8px;
		border-style: solid;
		border-width: 16px 8px 0 8px;
		border-color: #dc580d transparent transparent transparent;
		pointer-events: none;
	}
	.flow-content h4{
		margin-bottom: 20px;
		color: #DE580D;
		font-size: 14px;
		font-weight: 500;
	}
	.flow-content .notes{
		font-size: 12px;
	}
	.flow-content .notes li{
		padding-left: 1em;
		text-indent: -1em;
	}
	.flow-content h4:nth-child(n+2){
		margin-top: 35px;
	}
	.step1-list{
		margin-bottom: 35px;
		font-size: 14px;
		font-weight: 500;
	}
	.step1-list li:nth-child(n+2){
		margin-top: 1em;
	}
	.step1-entry{
		text-align: center;
	}
	.step2-list{
		margin-bottom: 20px;
	}
	.step2-list li{
		padding-left: 1.5em;
		text-indent: -1.5em;
	}
	.step2-list li::before{
		content: "○";
		display: inline-block;
		width: 1.5em;
		text-align: left;
		text-indent: 0;
	}
	#step2 .notes{
		max-width: inherit;
	}
	#step2 ul + .notes{
		margin-top: 20px;
	}
	.step3-img{
		position: static;
		margin-bottom: 2%;
		display: block;
		overflow: hidden;
		width: 100%;
	}
	.step3-img img{
		float: left;
		width: 49%;
		height: auto;
	}
		.step3-img img:nth-child(n+2){ margin-left: 2%; }
	.step4-img img{
		width: 100%;
		height: auto;
	}
	.step4-img img:nth-child(n+2){ margin-top: 2%; }
	#flow-guidance{
		font-size: 14px;
	}
	#flow-guidance .content{
		margin: 0;
		padding: 50px 4.28%;
	}
	#flow-guidance .flow-guidance-list{
		margin-bottom: 20px;
	}
	#flow-guidance .flow-guidance-list li{
		padding-left: 1.5em;
		text-indent: -1.5em;
	}
	#flow-guidance .flow-guidance-list li::before{
		content: "○";
		display: inline-block;
		width: 1.5em;
		text-align: left;
		text-indent: 0;
	}
	#flow-guidance .content .notes{
		margin-bottom: 20px;
		font-size: 12px;
	}
	
	#flow-faq  .content{
		margin: 0;
		padding: 0 4.28% 50px;
	}

	/*-----
		/why-lava/voice/index.html
	-----*/
	#voice-header{
		background-image: url("/why-lava/voice/images/voice_visual.jpg");
	}
	#voice-contents{
		width: 100%;
		margin-bottom: 50px;
		padding: 0 4.28%;
		font-size: 14px;
	}
	#voice-contents .lead{
		margin: 36px 10px;
		font-size: 14px;
		line-height: 23px;
	}
	#voice-contents .colWrap {
		margin-bottom: 20px;
	}
	#voice-contents .colWrap .col {
		float: none;
		width: 100%;
	}
	#voice-contents .colWrap .colLeft {
		width: 100%;
		margin-bottom: 10px;
	}
	#voice-contents .colWrap .colLeft img {
		width: 100%;
		height: auto;
	}
	#voice-contents .colWrap .colText > p {
		margin-top: 1.0em;
	}
	#voice-contents h2.headline01 {
		min-height: 19px;
		margin-bottom: 10px;
		font-size: 14px;
		color: #DE580D;
		line-height: 19px;
		font-weight: bold;
	}
		#voice-contents .commentBox.even h2.headline01{
			color: #F08C00;
		}
		#voice-contents .col-l{
			margin-bottom: 40px;
		}
	#voice-contents .commentBox {
		position: relative;
		margin-bottom: 40px;
		padding: 20px;
		border: 1px solid #D6D7D7;
	}
		#voice-contents .commentBox p:last-child{
			margin-bottom: 0;
		}
	#voice-contents .commentBox::before{
		content: "Voice";
		position: absolute;
		right: 10px;
		top: -20px;
		display: block;
		width: 52px;
		height: 52px;
		color: #fff;
		background: #DE580D;
		border-radius: 26px;
		line-height: 52px;
		text-align: center;
	}
	#voice-contents .commentBox::after{
		content: "";
		position: absolute;
		top: 16px;
		right: 50px;
		height: 0;
		width: 0;
		border-style: solid;
		border-width: 16px 6px 0 6px;
		border-color: #DE580D transparent transparent transparent;
		pointer-events: none;
		transform: rotate(45deg);
	}
	#voice-contents .commentBox::before{
		background: #DE580D;
	}
	#voice-contents .commentBox.even::before{
		background: #F08C00;
	}
	#voice-contents .commentBox::after{
		border-color: #DE580D transparent transparent transparent;
	}
	#voice-contents .commentBox.even::after{
		border-color: #F08C00 transparent transparent transparent;
	}
	#voice-contents .notes{
		text-align: left;
		font-size: 13px;
	}

/* END MEDIA QUERY >760 */
}