@charset "utf-8";

@media screen and (min-width: 761px), print {
	article section + section{
		margin-top: 0;
	}
	/*-----
		/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: 120px 0;
	}
	#first-point > section#first-lead{
		padding: 0;
	}
	#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: 700px;
		margin: 0 auto;
		font-size: 16px;
	}
	.point-content h3{
		margin-bottom: 50px;
		font-size: 30px;
		font-weight: 500;
	}
	.point-content h3 span.point-balloon{
		position: relative;
		display: inline-block;
		width: 100px;
		height: 100px;
		padding-top: 16px;
		margin-right: 16px;
		background: rgb(220, 88, 13);
		border-radius: 50px;
		color: #fff;
		font-size: 13px;
		text-align: center;
		vertical-align: middle;
	}
	.point-content h3 span.point-balloon:after {
		content: " ";
		position: absolute;
		top: 95px;
		left: 50%;
		height: 0;
		width: 0;
		margin-left: -8px;
		border-style: solid;
		border-width: 20px 8px 0 8px;
		border-color: #dc580d transparent transparent transparent;
		pointer-events: none;
	}
	.point-content h3 span.point-balloon span.point-num{
		display: block;
		font-size: 40px;
		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 h4{
		margin-bottom: 50px;
		font-size: 20px;
		font-weight: 500;
	}
	.point-content .notes{
		font-size: 13px;
	}
	
	/*
		#first-lead
	*/
	#first-lead{
		width: 1024px;
		margin: 0 auto;
		text-align: center;
		font-size: 18px;
	}
	
	/*
		#first01
	*/
	#first01 figure{
		position: relative;
		width: 584px;
		margin: 0 auto 40px;
	}
	#first01 figure .first1-badge{
		position: absolute;
		right: 0;
		bottom: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 234px;
		height: 234px;
		background-color: #F5B000;
		border-radius: 117px;
		color: #fff;
		text-align: center;
		font-size: 18px;
		font-weight: bold;
	}
	#first01 figure .first1-badge span {
		display: block;
		font-size: 60px;
		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: 20px;
		top: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 94px;
		height: 94px;
		background-color: #F5B000;
		border-radius: 57px;
		color: #fff;
		text-align: center;
		font-size: 12px;
		line-height: normal;
		font-weight: normal;
	}
	#first02 figure .first2-badge p{
		margin: 0;
	}
	#first02 figure .first2-badge p span{
		display: block;
		font-size: 24px;
		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: 70px;
		flex-wrap: wrap;
		align-items: flex-end;
		justify-content: space-between;
	}
	#first04 .starterset p{
		width: 30%;
		text-align: center;
		font-size: 14px;
		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: 18px;
		font-weight: 500;
	}
	
	/*
		#first-movie
	*/
	#first-movie h3{
		text-align: center;
	}
	#first-movie .movie{
		position: relative;
		width: 700px;
		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: 110px 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: 120px 0;
		font-size: 16px;
	}
	#first-flow .content{
		margin: 0 auto;
	}
	#first-flow h2{
		margin-bottom: 60px;
	}
	#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: 80px;
		background: url(/why-lava/images/flow_arrow.svg) no-repeat center 21px /40px 32px;
	}
	#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: 120px 0;
	}
	#first-faq .content{
		margin: 0 auto;
	}
	#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: 110px auto;
		padding-right: 20px;
		overflow: hidden;
	}
	.flow-anchor li{
		float: left;
		width: 25%;
	}
	.flow-anchor li:nth-child(n+2){
	}
	.flow-anchor a{
		position: relative;
		display: block;
		background-color: #F7F7F7;
		text-align: center;
		font-size: 16px;
		line-height: 80px;
	}
	.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: -19px;
		top: 0;
		display: block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 40px 0 40px 20px;
		border-color: transparent transparent transparent #F7F7F7;
		z-index: 11;
	}
	.flow-anchor a::after{
		content: "";
		position: absolute;
		right: -20px;
		top: 0;
		display: block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 40px 0 40px 20px;
		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: 1000px;
		margin: 0 auto;
		padding: 120px 0;
		font-size: 16px;
		overflow: hidden;
	}
	.flow-content .col-wrap{
		display: table;
		width: 100%;
	}
	.flow-content .col-l,
	.flow-content .col-r{
		display: table-cell;
		vertical-align: top;
		position: relative;
	}
	.flow-content .col-l{
		width: 540px;
		padding-right: 20px;
	}
	.flow-content .col-r{
		width: 460px;
	}
	.flow-content h3 {
		margin-bottom: 60px;
		font-size: 30px;
	}
	.flow-content h3 span.balloon{
		position: relative;
		display: inline-block;
		width: 80px;
		height: 80px;
		margin-right: 16px;
		background: rgb(220, 88, 13);
		border-radius: 40px;
		color: #fff;
		font-size: 32px;
		line-height: 80px;
		text-align: center;
		vertical-align: middle;
	}
	.flow-content h3 span.balloon:after{
		content: "";
		position: absolute;
		top: 75px;
		left: 50%;
		height: 0;
		width: 0;
		margin-left: -8px;
		border-style: solid;
		border-width: 20px 8px 0 8px;
		border-color: #dc580d transparent transparent transparent;
		pointer-events: none;
	}
	.flow-content h4{
		margin-bottom: 24px;
		color: #DE580D;
		font-size: 18px;
		font-weight: 500;
	}
	.flow-content .notes{
		font-size: 13px;
	}
	.flow-content .notes li{
		padding-left: 1em;
		text-indent: -1em;
	}
	.flow-content h4:nth-child(n+2){
		margin-top: 74px;
	}
	.step1-list{
		margin-bottom: 60px;
		font-size: 18px;
		font-weight: 500;
	}
	.step1-list li:nth-child(n+2){
		margin-top: 1em;
	}
	#step2 .notes{
		max-width: 400px;
	}
	#step2 ul + .notes{
		margin-top: 20px;
	}
	.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;
	}
	.step3-img{
		position: absolute;
		left: 0;
		bottom: 0;
		width: 470px;
		overflow: hidden;
	}
	.step3-img img{
		float: left;
		width: 230px;
		height: auto;
	}
	.step3-img img:nth-child(n+2){
		margin-left: 10px;
	}
	.step4-img{
		display: flex;
		justify-content: space-between;
	}
	.step4-img img{
		width: 33%;
		height: auto;
	}
	#flow-guidance{
		font-size: 16px;
	}
	#flow-guidance .inner-wrap{
		width: 800px;
		margin: 0 auto;
	}
	#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;
	}

	/*-----
		/why-lava/voice/index.html
	-----*/
	#voice-header{
		background-image: url("/why-lava/voice/images/voice_visual.jpg");
	}
	#voice-contents{
		width: 1024px;
		margin: 0 auto;
	}
	#voice-contents .lead{
		margin: 93px auto;
		font-size: 18px;
		line-height: 25px;
		text-align: center;
	}
	#voice-contents .colWrap {
		overflow: hidden;
		padding-top: 30px;
		margin-bottom: 30px;
	}
	#voice-contents .colWrap.colTwo{
		width: 1024px;
	}
	#voice-contents .colWrap .col {
		float: left;
	}
	#voice-contents .colWrap .colLeft {
		float: left;
		margin-right: 20px;
	}
	#voice-contents .colWrap .colText {
		overflow: hidden;
		zoom: 1;
	}
	#voice-contents .colWrap .colText > p {
		margin-top: 20px;
	}
	#voice-contents .colWrap .colText > *:first-child {
		margin-top: 0 !important;
	}
	#voice-contents .colWrap.size1of2 {
		margin-right: -20px;
	}
	#voice-contents .colWrap.size1of2 .col {
		width: 490px;
		margin: 0 20px 20px 0;
	}
	#voice-contents .colWrap:after {
		clear: both;
		display: block;
		content: "";
	}
	#voice-contents .headline01 {
		min-height: 26px;
		margin-bottom: 10px;
		line-height: 38px;
		background-position: 0 0;
		background-repeat: no-repeat;
		color: #533c36;
		font-size: 16px;
		font-weight: bold;
	}
	#voice-contents .commentBox {
		position: relative;
		margin-bottom: 50px;
		padding: 20px 30px 24px;
		border: 1px solid #D6D7D7;
	}
	#voice-contents .commentBox p:last-child{
		margin-bottom: 0;
	}
	#voice-contents .col-l, #voice-contents .col-r{
		width: 490px;
	}
	#voice-contents .col-l{
		margin-right: 44px;
	}
	#voice-contents .col-l .commentBox, #voice-contents .col-r .commentBox{
		width: 100%;
	}
	#voice-contents .col-l .commentBox h2{
		color: #DE580D;
	}
	#voice-contents .col-r .commentBox h2{
		color: #F08C00;
	}
	#voice-contents .commentBox::before{
		content: "Voice";
		position: absolute;
		right: 20px;
		top: -30px;
		display: block;
		width: 80px;
		height: 80px;
		color: #fff;
		background: #DE580D;
		border-radius: 40px;
		line-height: 80px;
		text-align: center;
	}
	#voice-contents .commentBox::after{
		content: "";
		position: absolute;
		top: 30px;
		right: 85px;
		height: 0;
		width: 0;
		border-style: solid;
		border-width: 20px 8px 0 8px;
		border-color: #DE580D transparent transparent transparent;
		pointer-events: none;
		transform: rotate(45deg);
	}
	#voice-contents .col-l .commentBox::before{
		background: #DE580D;
	}
	#voice-contents .col-r .commentBox::before{
		background: #F08C00;
	}
	#voice-contents .col-l .commentBox::after{
		border-color: #DE580D transparent transparent transparent;
	}
	#voice-contents .col-r .commentBox::after{
		border-color: #F08C00 transparent transparent transparent;
	}
	#voice-contents .notes{
		text-align: right;
	}

}