@charset "UTF-8";
@font-face {
	font-display: swap;
	font-family: "Lato-Italic";
	src: url("/fonts/Lato-Italic.ttf") format("truetype");
}

header nav#mainnav ul li a{
  color:#0e0e0e;
}
header nav#mainnav ul li{
  background-image: url(/img/common/nav-divline-g.png);
}

#mv{
  background-image: url(/img/casestudy/mv-sp.jpg);
}
#mv h2{
	text-shadow: 0 0 20px #fff, 0 0 20px #fff, 0 0 20px #fff, 0 0 20px #fff, 0 0 20px #fff, 0 0 20px #fff, 0 0 40px #fff, 0 0 40px #fff, 0 0 40px #fff;
}
main article#mv h2 img.subtitle {
	display: block;
	margin: -6px auto 0;
	height: 30px;
}
main article#qa h2 img.subtitle {
	display: block;
	margin: 4px auto 0;
	height: 13px;
}
main h2 img.subtitle.small {
	display: block;
	margin: 4px auto 0;
	height: 9px;
}

main #cheader{
  padding-top: 0;
  padding-bottom: 0;
}
main #cheader h2{
  position: relative;
  display: inline-block;
  margin: 96px 12px 20px;
  font-size: 18px;
}

main #cheader section{
  padding: 0;
}

main #cheader section div{
  padding: 60.94% 12px 20px;
  color: #024975;
  background: #f9f9f9 url(/img/casestudy/catch1.jpg) center top no-repeat;
  background-size: contain;
}
main #cheader section div:nth-of-type(2n){
  color: #fff;
  background-color:#444343;
}
main #cheader section div:nth-of-type(2){
  background-image: url(/img/casestudy/catch2.jpg);
}
main #cheader section div:nth-of-type(3){
  background-image: url(/img/casestudy/catch3.jpg);
  background-color:#dfe0e1;
}
main #cheader section div:nth-of-type(4){
  background-image: url(/img/casestudy/catch4.jpg);
  background-color:#81887b;
}
main #cheader section div:nth-of-type(5){
  background: #fff url(/img/casestudy/catch5.jpg) center bottom no-repeat;
  background-size: contain;
}


main #cheader h2 img{
  display: inline-block;
  width: 93px;
  position: absolute;
  left: 0;
  top: -56px;
}
main #cheader div h3{
  text-align: left;
  font-size: 17px;
  margin: 16px 0 8px;
}
main #cheader div p{
  font-size: 12px;
  line-height: 1.8;
  margin-bottom: 0;
  text-align: left;
}
main #cheader div:last-of-type{
  padding: 30px 0 56% 0;
}
main #cheader div:last-of-type p{
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  text-indent: 0;
  line-height: 24px;
}
main #cheader div:last-of-type p span{
  font-weight: bold;
  font-size: 16px;
  color: #0c8cd7;
}


#case{
}
#case section{
}
#case .btn {
	min-width: auto;
}
#case h2{
  position: relative;
  display: inline-block;
  margin-top: 44px;
  font-size: 18px;
}

#case h2 img {
  display: inline-block;
  width: 93px;
  position: absolute;
  left: -32;
  top: -63px;
}

#case>section>p:first-of-type{
}

#case h4 {
	max-width: 370px;
	margin: 0 auto 12px;
}
#case h4 span{
}
#case p{
	margin-bottom: 20px;
  text-align: left;
}
#case section section div{
	display: inline-block;
}
#case section section div>img{
	max-width: 370px;
	width: 100%;
}
#case #trip,
#case #biz{
	padding: 0;
	text-align: center;
}

#case #biz{
	margin-top: 40px;
	border-top: 1px solid #fff;
	padding-top: 40px;
}




#voice{
	position: relative;
	padding-top: 24px;
}
#voice h2{
	position: absolute;
	z-index: 10;
	top: 0;
	left: 15%;
	width: 39.22%;
	padding-top: 18.9%;
}
#voice section> p {
	position: absolute;
	top: 0;
	z-index: 1;
	width: 40%;
	left: 40%;
}
#voice>section{
	position: relative;
	padding-top: 24.5%;
}
#voice div.vwrapper {
	overflow: hidden;
	z-index: 5;
	position: relative;
	padding: 5% 0;
	width: 120%;
  max-width: 120%;
	left: -10%;
}
#voice div.vinner {
	content: '';
	display: block;
	position: relative;
	-webkit-transform: rotate(5deg);
	-moz-transform: rotate(5deg);
	-ms-transform: rotate(5deg);
	-o-transform: rotate(5deg);
	transform: rotate(5deg);
	overflow: hidden;
	width: 150%;
  max-width: 150%;
	margin-left: -25%;
	padding-bottom: 9%;
}
#voice div.vinner::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	background: url(/img/about/voice-bg.png);
	background-size: 210px;
	-webkit-transform: rotate(-20deg);
	-moz-transform: rotate(-20deg);
	-ms-transform: rotate(-20deg);
	-o-transform: rotate(-20deg);
	transform: rotate(-20deg);
	padding: 20%;
	margin: -20%;
	width: 140%;
	max-width: 140%;
}
#voice ul {
	-webkit-transform: rotate(-5deg);
	-moz-transform: rotate(-5deg);
	-ms-transform: rotate(-5deg);
	-o-transform: rotate(-5deg);
	transform: rotate(-5deg);
	margin: 50px auto 30px;
	width: 304px;
	position: relative;
	z-index: 20;
}
#voice li {
	text-indent: 0;
	margin: 0 0 0.5em;
	display: block;
}
#voice li div, #voice li p, #voice li {
	text-align: left;
	z-index: 3;
	position: relative;
}
#voice li div {
	color: #fff;
	padding-left: 11px;
	font-size: 11px;
	margin-bottom: 8px;
}
#voice li p {
	margin-left: 11px;
	display: inline-block;
	padding: 12px 16px;
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	font-size: 15px;
	line-height: 21px;
	position: relative;
	-webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.3);
	-ms-box-shadow: 0px 2px 4px rgba(0,0,0,0.3);
	box-shadow: 0px 2px 4px rgba(0,0,0,0.3);
}
#voice li.green p {
	background: #64dd17;
}
#voice li.white p {
	background: #fff;
}
#voice li p:before {
	content: " ";
	display: inline-block;
	width: 20px;
	height: 20px;
	background-size: contain;
	vertical-align: middle;
	position: absolute;
	top: 0;
	left: -11px;
	z-index: 2;
}
#voice li.white p:before {
	background: url(/img/about/voice-white.png);
}
#voice li.green p:before {
	background: url(/img/about/voice-green.png);
}


#casestudy{
  margin-top: -20%;
  position: relative;
  z-index: 5;
  padding-top: 0;
}
#casestudy>section{
  padding-top: 36px;
  padding-bottom: 68%;
  background: #160d03 url(/img/casestudy/comparison-sp.jpg) center bottom no-repeat;
  background-size: contain;
  color: #fff;
  text-align: center;
}
#casestudy>section>p{
  display: inline-block;
  margin-bottom: 20px;
  font-weight: bold;
  line-height: 1.8;
  text-align: left;
}
#casestudy h2{
  display: inline-block;
  font-size: 14px;
  position: relative;
  margin-bottom: 10px;
  color:#f1bb0b;
}
#casestudy h3{
  font-size: 21px;
  line-height: 1.5;
  margin-bottom: 20px;
}
#casestudy .categorylink{
  padding-top: 16px;
}
#casestudy .categorylink ul{
  margin: 0 8px;
  text-align: left;
}
#casestudy .categorylink ul li{
  width: 100%;
  margin:0 auto 8px;
  font-size: 0;
}
#casestudy .categorylink ul li a{
  text-decoration: none;
  color: #0e0e0e;
  background-color: #f0f5f9;
  overflow: hidden;
  display: inline-block;
  width: 100%;
}
#casestudy .categorylink h3{
  display: none;
}
#casestudy .categorylink ul li h4{
  color: #038de1;
  font-size:14px;
  line-height: 1;
  margin: 16px 16px 0 136px;
  margin-bottom: 12px;
  text-align: left;
}
#casestudy .categorylink ul li p{
  font-size: 12px;
  line-height: 1.6;
  margin: 0 16px 16px 136px;
}
#casestudy .categorylink ul li img{
  float: left;
}


@media screen and (max-width: 479px) {
	#voice> section {
		padding-top: 37.4%;
	}
	#voice h2 {
		width: 61.45%;
		padding-top: 27%;
		left: 12px;
	}
	#voice section> p {
		right: 12px;
		left: auto;
		width: 57%;
	}
	#voice div.vwrapper {
		top: -18.3%;
	}
	#voice div.vinner {
		padding-bottom: 7.2%;
	}
}

/* img to text */
.com-subtitle.is-en{
  display: block;
  font-family: Lato-Italic;
}
.mv-head .is-en {
  font-size: 14px;
  letter-spacing: 0.2em;
  margin: -1px auto 0;
}
.mv-head .is-adjust_position {
  font-size: 30px;
  margin: 0 -0.4em;
  vertical-align: middle;
}
.com-section-head .is-en {
  color: #038de1;
	font-size: 12px;
	letter-spacing: 0.25em;
	margin: 3px auto 0;
}