@charset "utf-8";


/* ==================================================================

	■TOP
	
=================================================================== */
body{
    width: auto !important;
}
/* ==================================================================

	■共通項目
	
=================================================================== */
header {
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 1;
	left: 0;
	right: 0;
	background: #fff;
}
header section {
	width:1200px;
	overflow: hidden;
	margin: 0 auto;
	padding: 15px 0;
}
header section p.sitelogo {
	float: left;
	margin-top: 10px;
}
header section ul {
	float: right;
}
header section ul li {
	display: inline-block;
}
header section ul li:first-child {
	margin-right: 10px;
}
.main {
	margin-top: 120px;
}
.itemList li a{
    text-decoration: none;
}

.chapter{
	background-image:url(../../../images/cp/landing/img_01.jpg);
	background-position: left 95%;
}

.container{
	width:80%;
	margin:0 auto;
}

.chapter{
	width:1200px;
	margin:0 auto;
}

.title{
	position:relative;
}

h1{
	margin-bottom:40px;
	clear:both;
}

h1 br{
	display:none;
}

h1 span{
	display:block;
	background-color:#229df9;
	color:#ffffff;
	padding:20px 0;
	width:960px;
	border-radius:5px;
	font-size:133%;
}
h1 strong{
	color:#ffef00;
}

h1:after{
	content:"";
	position:absolute;
	border-style:solid;
	border-color:#229dfa transparent transparent transparent;
	border-width:20px 20px 0 20px;
	left:49%;
}

p.button{
	margin:30px 0;
	text-align:center;
}

p.sub{
	position:absolute;
	color:#2982d6;
	font-size:125%;
	font-weight:700;
	top:-50%;
	left:0;
	right:0;
	text-align:center;
}

p.sub span{
	position:relative;
	display:inline-block;
	padding:0 35px;
}

p.sub span br{
	display:none;
}

p.sub span:before{
	content: '';
	position: absolute;
	top: 50%;
	display: inline-block;
	width: 40px;
	height: 2px;
	background-color: black;
	transform: rotate(60deg);
	left:0;
}
p.sub span:after{
	content: '';
	position: absolute;
	top: 50%;
	display: inline-block;
	width: 40px;
	height: 2px;
	background-color: black;
	transform: rotate(-60deg);
	right:0;
}

span.axis{
	position:relative;
}

p.button{
	margin-bottom:70px;
}
p.button img{
	filter: drop-shadow(2px 2px 4px gray);
}

/* ==================================================================

	■
	
=================================================================== */


.MV{
	position:relative;
	overflow:hidden;
}

.MV img.cloud{
	position:absolute;
	left:-15%;
	bottom:15%;
}

.MV img.balloon{
	position:absolute;
	right:0;
	bottom:20%;
}

.cartoon{
	width:80%;
	margin:0 auto 30px auto ;
}

.cartoon p{
	margin-bottom:20px;
}
.cartoon p.right{
	font-size:62%;
	color:#000;
}

.cartoon img.graph{
	margin-top:18px;
}

.graph{
	position:relative;
}

.graph img{
	margin-bottom:50px;
}

.graph p.right{
	display:block;
	position:absolute;
	font-size:75%;
	right:0;
	bottom:0;
}

.list{
	margin-bottom:90px;
}

.list ul{
	margin-bottom:20px;
}

.list ul li{
	display:inline-block;
	width:28%;
	border-radius:5px;
	border:solid 5px #c3e5ff;
	margin-right:2%;
	background-color:#ffffff;
	vertical-align:middle;
	padding:0 10px;
}

.list ul li:last-child{
	margin-right:0;
}

.list ul li img{
	margin:15px auto;
}

.list ul li p{
	font-size:82%;
	width:95%;
	margin:0 auto;
	height:80px;
}

.privilege{
	border-radius:10px;
	border:solid 5px #c3e5ff;
	background-color:#ffffff;
}

.privilege ul{
	margin:5px;
	overflow:hidden;
	display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}

.privilege ul li{
	width:27%;
	display:inline-block;
	padding:20px 3%;
	border-right:dotted 2px #c3e5ff;
	vertical-align: middle;
	border-bottom:dotted 2px #c3e5ff;
	float:left;
}

.privilege ul li:nth-child(3n){
	border-right:none;
}

.privilege ul li:nth-child(4){
	border-bottom:none;
}

.privilege ul li:nth-child(5){
	border-bottom:none;
}

.privilege ul li:nth-child(6){
	border-bottom:none;
}

.privilege ul li img{
	width:30%;
	padding-bottom:15px;
}

.privilege ul li dl dt{
	font-size:90%;
	font-weight:700;
	color:#fc7315;
	margin-bottom:15px;
}
.privilege ul li dl dd{
	font-size:82%;
	text-align:left;
}

.howto{
	filter: drop-shadow(2px 2px 4px gray);
}

.howto ul.howTo{
	clear:both;
	margin-bottom:90px;
}

.howto ul.howTo li dl{
	display:block;
	padding:4%;
	background-color:#d0ebff;
	float:left;
	position:relative;
}

.howto ul.howTo li:nth-child(odd) dl{
	background-color:#ffffff;
}

.howto ul.howTo li dl img.HowTo{
	position:absolute;
	right:-19px;
	margin:0;
	z-index:10;
	bottom:10px;
}

.howto{
	overflow:hidden;
	margin-bottom:120px;
}

.howto ul.howTo dl dt{
	margin-bottom:25px;
}

.howto ul.howTo dl dt span{
	color:#1e82e4;
	font-weight:700;
	background-color:#ffffff;
	border-radius:20px;
	padding:5px 25px;
}
.howto ul.howTo dl dd{
	color:#1e82e4;
	font-weight:700;
}

.howto ul.howTo dl dd img{
	margin-bottom:25px;
}

.itemList{
	border:5px solid #c3e5ff;
	border-radius:10px;
	margin-bottom:35px;
	overflow:hidden;
	background-color:#ffffff;
}
.itemList ul{
	padding:20px;
}

.itemList li{
	width:14%;
	text-align:center;
	display:inline-block;
	height:250px;
	margin-right:3%;
	float:left;
}

.itemList li:nth-child(6n){
	margin-right:0;
}

.itemList li img{
	width:100%;
}

.itemList li img.thumbnail{
	border:solid 2px #f1f1f1;
}
.itemList li dl dt{
	margin:15px 0;
	font-size:87%;
	height:30px;
}

.contact p.buttonStyle02{
	text-align:center;
	margin-bottom:35px;
}

.contact p.buttonStyle02 img{
	filter: drop-shadow(2px 2px 4px gray);
}

.contact{
	margin-bottom:100px;
}

.title img.megaphone{
	position:absolute;
	bottom:0;
	left:5%;
}

.interviewList{
	border:5px solid #c3e5ff;
	border-radius:10px;
	background-color:#ffffff;
}
.interviewList ul{
	margin-top:25px;
}

.interviewList li{
	display:inline-block;
	width:200px;
	height:340px;
	margin-top:30px;
	padding-right:25px;
}
.interviewList li:nth-child(4n){
	padding-right:0;
}
.interviewList li img{
	margin-bottom:20px;
	filter: drop-shadow(2px 2px 4px gray);
}

.interviewList li dl{
	position:relative;
}

.interviewList li dl dt{
	color:#0e9ce4;
	font-size:87%;
	font-weight:700;
	margin-bottom:20px;
}

.interviewList li dl dt img{
	display:block;
}

.interviewList li dl dt img.balloon{
	margin-bottom:0px;
	position:absolute;
	top:-13%;
	right:20px;
	filter: drop-shadow(2px 2px 4px gray);
}

.interviewList li dl dd{
	font-size:75%;
}

.interviewList p.buttonStyle3{
	text-align:center;
	width: auto;
	margin: 15px 30px 30px;
}
.interviewList p.buttonStyle3 a {
	color: #fff;
	font-weight: bold;
	padding: 15px 0;
	width: 100%;
	background-color: #0082cc;
	display: block;
	border-radius: 5px;
}
.interviewList p.buttonStyle3 a:hover {
	text-decoration: none;
	background-color: #006097;
}

footer{
	background-color:#0090d5;
	margin-top: 5%;
}

footer p{
	font-size:62%;
	color:#ffffff;
	text-align:center;
}
footer p.logo{
	padding-top:50px;
	padding-bottom:40px;
}
footer p.copy{
	padding-bottom:40px;
	margin-bottom: 0;
}



@media only screen and
(max-width : 767px) {
	
	header {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 1;
		left: 0;
		right: 0;
		background: #fff;
	}
	header section {
		width:auto;
		overflow: hidden;
		margin: 0 auto;
		padding: 15px;
	}
	header section p.sitelogo {
		float: left;
		margin-top: 0;
		width: 50%;
		margin-bottom: 0;
	}
	header section ul {
		float: right;
		width: 50%;
		text-align: right;
	}
	header section ul li {
		display: inline-block;
	}
	header section ul li:first-child {
		display: none;
	}
	header section ul li:last-child {
		width: 63%;
	}
	.main {
		margin-top: 74px;
	}

	img{
		width:100%;
	}

	p.button{
		margin-bottom:10%;
	}
	
	.chapter{
		background-image:url(../../images/lp/pc/background/img_01.jpg);
		background-position:bottom;
		width:100%;
		margin:0 auto;
	}

	.container{
		width:92%;
		margin:0 auto;
	}
	
	h1:after{
		left:45%;
	}
	
	h1 span{
		width:100%;
		font-size:83%;
	}
	p.sub{
		font-size:90%;
		top:-50%;
	}
	
	h1 br{
		display:block;
	}
	
	p.sub span br{
	display:block;
}
	
	/* ==================================================================
	
		■
		
	=================================================================== */
	
	
	.MV p.button img{
		width:92%;
	}
	
	.MV img.cloud{
		display: none;
	}
	
	.MV img.balloon{
		width:30%;
		bottom:27%;
	}
	
	
	.cartoon{
		width:100%;
	}
	
	.graph p.right{
		bottom:-2%;

	}
	
	.list ul li{
		width:40%;
		margin-right:2%;
		float:left;
		margin-bottom:5px;
	}
	
	.list ul li p{
		font-size:75%;
		width:90%;
		height:100px;
	}
	.list ul li p br{
		display:none;
	}
	
	.list ul.first li:nth-child(2){
		margin-right:0;
	}
	
	.list ul.first li:nth-child(3){
		margin-right:2%;
	}
	
	.list ul.last li:nth-child(1){
		margin-right:0;
	}
	
	.list ul.last li:last-child{
		width:91%;
	}
	
	.list ul.last li:last-child img{
		display:inline-block;
		width:48%;
		vertical-align:middle;
	}
	
	.list ul.last li:last-child p{
		display:inline-block;
		width:48%;
	}
	
	.privilege ul{
		border-bottom:none;

	}
	
	.privilege ul li{
		width:43%;
		border-right:dotted 2px #c3e5ff;
		border-bottom:dotted 2px #c3e5ff;
	}
	
	.privilege ul li img{
		width:50%;
	}
	
	.privilege ul li dl dt{
		font-size:75%;
	}
	
	.privilege ul br{
		display:none;
	}
	
	.privilege ul li:nth-child(3n){
		border-right:dotted 2px #c3e5ff;
	}
	
	.privilege ul li:nth-child(2n){
		border-right:none;
	}
	
	.privilege ul li:nth-child(4){
		border-bottom:dotted 2px #c3e5ff;
	}
	
	.privilege ul li dl dd{
		font-size:75%;
		text-align:left;
	}
	
	.howto{
		overflow:hidden;
		margin-bottom:15%;
	}
	
	.howto ul.howTo li dl{
		position:relative;
		width:100%;
		padding:25px 0;;
	}
	
	.howto ul.howTo li dl img.HowTo{
		width:5%;
		right:0;
		left:0;
		bottom:-70px;
		margin:0 auto;
		transform:rotate(90deg);
	}
	
	.howto ul.howTo dl dt{
		margin-bottom:10px;
		text-align:left;
		padding-left:50%;
	}
	
	.howto ul.howTo dl dt span{
		color:#1e82e4;
		font-weight:700;
		background-color:#ffffff;
		border-radius:20px;
		padding:5px 25px;
	}
	
	.howto ul.howTo li:nth-child(odd) dl dt span{
		background-color:#E2F4FE;
	}
	
	.howto ul.howTo dl dd{
		color:#1e82e4;
		font-weight:700;
		padding-left:50%;
		text-align:left;
	}
	
	.howto ul.howTo dl dd img{
		position:absolute;
		width:30%;
		left:10%;
		bottom:0;
		top:0;
		margin:auto 0;
	}

	section#trouble,
	section#flow {
		margin-top: 21%;
	}
	section#reason {
		margin-top: 10%;
	}
	
	/*----------------------
	itemList
	----------------------*/
	.itemList{
		border:5px solid #c3e5ff;
		border-radius:5px;
		margin-bottom:5%;
		overflow:hidden;
		background-color:#ffffff;
		padding: 4%;
		box-sizing: border-box;
	}
	.itemList ul{
		padding:0;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: stretch;
	}
	
	.itemList li{
		box-sizing: border-box;
		width:23.5%;
		text-align:center;
		display:inline-block;
		margin-right:2%;
		float:none;
		height: auto;
		margin-bottom: 15px;
	}
	
	.itemList li:nth-child(6n){
		margin-right:2%;
	}
	.itemList li:nth-child(4n){
		margin-right:0;
	}
	
	.itemList li img.thumbnail{
		border:solid 1px #f1f1f1;
	}
	.itemList li dl dt{
		height: auto;
		text-align: left;
		margin: 10px 0 0;
		font-size: 83%;
	}
	.itemList li dl dd{
		display: none;
	}
	
	/*----------------------
	contact
	----------------------*/
	.contact p.buttonStyle02{
		text-align:center;
		margin-bottom:5%;
	}
	
	.contact p.buttonStyle02 img{
		filter: drop-shadow(2px 2px 4px gray);
	}
	
	.contact{
		margin-bottom:10%;
	}
	
	.title img.megaphone{
		position:absolute;
		bottom:0;
		left:5%;
	}
	
	/*----------------------
	interviewList
	----------------------*/
	section#interview .title img{
		display: none;
	}
	.interviewList{
		border:5px solid #c3e5ff;
		border-radius:5px;
		background-color:#ffffff;
		padding: 5%;
	}
	.interviewList ul{
		margin-top: 0;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: stretch;
	}
	
	.interviewList li{
		display:inline-block;
		width:48%;
		height:auto;
		margin-top:0;
		padding-right:0;
		margin-right: 4%;
		box-sizing: border-box;
		margin-bottom: 10%;
	}
	.interviewList li:nth-child(4n){
		padding-right:0;
	}
	.interviewList li:nth-child(2n){
		margin-right:0;
	}
	.interviewList li img{
		margin-bottom:15px;
		filter: drop-shadow(2px 2px 4px gray);
		box-sizing: border-box;
	}
	
	.interviewList li dl{
		position:relative;
	}
	
	.interviewList li dl dt{
		margin-bottom:10px;
		text-align: left;
	}
	.interviewList li dl dt br{
		display: none;
	}
	
	.interviewList li dl dt img{
		display:block;
	}
	
	.interviewList li dl dt img.balloon{
		width: 40%;
		top:-6%;
		right:auto;
		left: 6px;
	}
	
	.interviewList li dl dd{
		font-size:60%;
		text-align: left;
	}
	
	.interviewList p.buttonStyle3{
		text-align:center;
		width: 100%;
		margin: 0;
	}
	.interviewList p.buttonStyle3 a {
		color: #fff;
		font-weight: bold;
		padding: 15px 0;
		width: 100%;
		background-color: #0082cc;
		display: block;
		border-radius: 5px;
	}
	
	/*----------------------
	interviewList
	----------------------*/
	footer{
		background-color:#0090d5;
		margin-top: 10%;
	}
	
	footer p{
		font-size:62%;
		color:#ffffff;
		text-align:center;
	}
	footer p.logo{
		padding-top:50px;
		padding-bottom:40px;
	}
	footer p.logo img{
		width: auto;
	}
	footer p.copy{
		padding-bottom:40px;
		margin-bottom: 0;
	}


}