/*【全体レイアウト】*/
/*【ヘッダー】*/
header,
header nav{
	height:119px;
}
@media screen and (max-width:768px){
	header,
	header nav{
		height:90px;
	}
}
header{
	background:#ffffff;
	position:relative;
}
header nav{
	position:absolute;
	right:0px;
	bottom:0px;
	text-align:right;
}
header nav a{
	display:inline-block;
	height:100%;
}
header nav a img{
	display:block;
	height:100%;
}
header .flex{
	display:-webkit-box;/*--- Android旧ブラウザ用 ---*/
	display:-ms-flexbox;/*--- IE10 ---*/
	display: -webkit-flex;/*--- safari（PC）用 ---*/
	display:flex;
	align-content: flex-start;
	width:100%;
}

header .header__logo{
	height:50%;
	position:absolute;
	left:16px;
	top:50%;
	transform:translateY(-50%);
	padding-bottom:4px;
}
header .header__logo img{
	height:100%;
	display:block;
}

.fv{
	position:relative;
}

.fv__img{
	width:calc(100vw - 415px);
	height:518px;
	background:url(./img/header_fv.jpg) top 144px center/cover no-repeat;
	margin:0 0 0 auto;
}
@media screen and (max-width:1088px){
	.fv__img{
		width:100vw;
    height: calc(100vw / 375 * 320);
	}
}

.fv__h1-after{
	background:#186DBB;
	color:#ffffff;
	font-size:7.2rem;
	padding-top:24px;
	padding-bottom:24px;
	letter-spacing:0.1em;
	display:inline-block;
	padding-left:calc((100vw - 1366px ) / 2);
	padding-right:64px;
	position:absolute;
	left:0px;
	top:40px;
	line-height:1.2;
	max-width:90%;
}
@media screen and (max-width:1398px){
	.fv__h1-after{
		padding-left:16px;
	}
	h1{
		padding-left:16px;
	}
}

.fv__img2{
	width:100%;
	max-width:752px;
	margin:0 auto;
	padding-left:16px;
	padding-right:16px;
}
.fv__img2 img{
	max-width:100%;
	margin-top:-160px;
}


.fv__text{
	font-size:3.2rem;
	color:#186DBB;
	font-weight:bold;
	text-align:center;
	margin-top:40px;
	margin-bottom:56px;
	padding:16px;
}
@media screen and (max-width:768px){
	h1{
		top:0px;
		max-width:80%;
	}
	.fv__h1-after{
		top:16px;
		display:block;
		font-size:calc(100vw / 375 * 40);
		padding:24px calc(100vw / 768 * 16);
	}
	.fv__text{
		font-size:2.4rem;
		margin-top:24px;
		margin-bottom:32px;
	}
	.fv__img2 img{
		margin-top:-40px;
	}
}
@media screen and (max-width:547px){
	h1{
		top:-18px;
	}
	.fv__h1-after{
		top:24px;
	}
}

/*【cta】*/
.cta{
	background:#38BBE8;
	margin:0;
}
.cta a{
	background:#F9AB00;
	display:block;
	border:2px solid #ffffff;
	padding:16px;
	font-size:4.0rem;
	text-align:center;
	color:#ffffff;
	font-weight:bold;
	border-radius:1000px;
	max-width:640px;
	margin:0 auto;
}
@media screen and (max-width:768px){
	.cta a{
		font-size:3.2rem;
	}
}
@media screen and (max-width:425px){
	.cta a{
		font-size:2.4rem;
	}
}

/*【お悩み】*/
.worry{
	padding-bottom:88px;
	background:#F1F8FC;
	position:relative;
}
.worry__contents{
	padding:40px;
	border:1px solid #186DBB;
}
.worry .flex{
	display:-webkit-box;/*--- Android旧ブラウザ用 ---*/
	display:-ms-flexbox;/*--- IE10 ---*/
	display: -webkit-flex;/*--- safari（PC）用 ---*/
	display:flex;
	align-content: flex-start;
}
.worry .flex__item{
	margin:32px;
	-webkit-flex:1 1 calc(100% / 3);/*--- safari（PC）用 ---*/
	-ms-flex:1 1  calc(100% / 3);/*--- IE10用 ---*/
	flex : 1 1  calc(100% / 3);	
}
.worry .flex__img{
	width:100%;
}
.worry .flex__text{
	padding:8px;
	text-align:center;
	color:#186DBB;
	font-weight:bold;
	background:#ffffff;
	margin-top:24px;
}
.worry .flex__text.one-line{
	line-height:3;
}
.worry:after{
	width:200px;
	height:200px;
	content:"";
	border-bottom:5px solid #186DBB;
	border-left:5px solid #186DBB;
	position:absolute;
	bottom:0px;
	left:50%;
	transform:translate(-50%,25%) rotate(-45deg) skew( calc((90deg - 60deg) / 2),calc((90deg - 60deg) / 2));
}

@media screen and (max-width:1088px){
	.worry{
		padding-bottom:calc(100vw / 1088 * 88);
	}
	.worry .flex__item{
		margin:calc(100vw / 1088 * 8);
	}
	.worry__contents{
		padding:calc(100vw / 1088 * 40);
	}
	.worry:after{
		width:calc(100vw / 1088 * 200);
		height:calc(100vw / 1088 * 200);
	}
}
@media screen and (max-width:768px){
	.worry .flex__text{
		font-size:calc(100vw / 768 * 16);
		padding:calc(100vw / 768 * 8);
	}
}

/*【強み】*/
.strengths__lead{
	display:block;
	margin:24px auto;
	max-width:940px;
	width:100%;
}
h2.label{
	background:#186DBB;
	color:#ffffff;
	font-size:5.6rem;
	margin:24px 0 32px calc((100vw - 1088px) / -2);
	display:block;
	letter-spacing:2px;
	padding-left:calc((100vw - 1088px) / 2);
	padding-top:8px;  
	padding-bottom:8px; 
	padding-right:0;
	text-align:left; 
}
@media screen and (max-width:1124px){
	h2.label{
		margin-left:-16px;
		padding-left:16px;
		font-size:4.0rem;
	}
}
@media screen and (max-width:768px){
	h2.label{
		font-size:3.2rem;
	}
}
.strengths h3{
	margin-top:0px;
}
.strengths h3 img{
	vertical-align:middle;
	height:1.5em;
	display:inline-block;
	margin-right:0.5em;
}

.strengths .flex{
	display:-webkit-box;/*--- Android旧ブラウザ用 ---*/
	display:-ms-flexbox;/*--- IE10 ---*/
	display: -webkit-flex;/*--- safari（PC）用 ---*/
	display:flex;
	align-content: flex-start;
}
.strengths .flex__text{
	margin:40px 32px 40px 0;
}
.strengths .flex__img{
	margin:40px 0px 40px 32px;
}
.strengths .flex:nth-of-type(2n) .flex__text{
	order:2;
	margin:40px 0px 40px 32px;
}
.strengths .flex:nth-of-type(2n) .flex__img{
	order:1;
	margin:40px 32px 40px 0px;
}
.strengths .flex__item{
	-webkit-flex:1 1 50%;/*--- safari（PC）用 ---*/
	-ms-flex:1 1 50%;/*--- IE10用 ---*/
	flex : 1 1 50%;
}
.strengths .flex__img img{
	max-width:100%;
}

@media screen and (max-width:768px){
	.strengths .flex{
		display:block;
	}
	.strengths .flex__text{
		margin:40px 0px 40px 0;
	}
	.strengths .flex__img{
		margin:40px 0px 40px 0px;
	}
	.strengths .flex:nth-of-type(2n) .flex__text{
		order:2;
		margin:40px 0px 40px 0px;
	}
	.strengths .flex:nth-of-type(2n) .flex__img{
		order:1;
		margin:40px 0px 40px 0px;
	}
}

/*【リボン】*/
.ribbon1 {
  display: block;
  position: relative;
  height: 50px;/*リボンの高さ*/
  line-height: 50px;/*リボンの高さ*/
  text-align: center;
  padding: 0 64px;/*横の大きさ*/
  background: #186DBB;/*塗りつぶし色*/
  color: #FFF;/*文字色*/
  box-sizing: border-box;
  font-weight:bold;
  margin:24px auto;
  max-width:400px;
}

.ribbon1:before, .ribbon1:after {
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  z-index: 1;
}

.ribbon1:before {
  top: 0;
  left: 0;
  border-width: 25px 0px 25px 15px;
  border-color: transparent transparent transparent #F1F8FC;
  border-style: solid;
}

.ribbon1:after {
  top: 0;
  right: 0;
  border-width: 25px 15px 25px 0px;
  border-color: transparent #F1F8FC transparent transparent;
  border-style: solid;
}
/*【なぜ】*/
.why{
	background:#F1F8FC;
}
.why .h2-after{
	text-align:center;
}
.why .flex{
	display:-webkit-box;/*--- Android旧ブラウザ用 ---*/
	display:-ms-flexbox;/*--- IE10 ---*/
	display: -webkit-flex;/*--- safari（PC）用 ---*/
	display:flex;
	align-content: flex-start;
	margin-top:80px;
}
.why .flex__item{
	-webkit-flex:1 1 calc(100% / 3);/*--- safari（PC）用 ---*/
	-ms-flex:1 1 calc(100% / 3);/*--- IE10用 ---*/
	flex : 1 1 calc(100% / 3);
	background:#ffffff;
	padding:40px;
	margin:8px;
	position:relative;
	padding-top:64px;
}
@media screen and (max-width:768px){
	.why .h2-after{
		text-align:left;
	}
	.why .flex{
		display:block;
		max-width:560px;
	}
	.why .flex__item{
		margin-bottom:80px;
	}
}

.why .flex__item .img{
	max-width:100%;
	display:block;
	margin:0 auto;
}
.why .flex__item .icon{
	max-width:102px;
	display:block;
	position:absolute;
	left:50%;
	top:0px;
	transform:translate(-50%, -50%);
}
.why .flex__item .name{
	 color:#186DBB;
	 font-weight:bold;
	 padding:4px;
	 border:2px solid ;
	 text-align:center;
	 border-radius:1000px;
	margin:16px auto;	 
}
.why h4{
	color:#186DBB;
	margin:8px auto;
}

/*【媒体】*/
.media .flex{
	font-size:3.2rem;
	border-bottom:5px solid #DEDADA;
	display:-webkit-box;/*--- Android旧ブラウザ用 ---*/
	display:-ms-flexbox;/*--- IE10 ---*/
	display: -webkit-flex;/*--- safari（PC）用 ---*/
	display:flex;
	align-content: flex-start;
	color:#186DBB;
	font-weight:bold;
	margin:24px auto;
}
.media .flex__item{
	flex-grow:1;
	padding:8px;
}
.media .text{
	line-height:100px;
	border-left:15px solid #186DBB;
	padding-left:24px;
}
@media screen and (max-width:560px){
	.media .flex{
		display:block;
	}
	.media .flex__item{
		border-left:15px solid #186DBB;
	}
}
.media .text.one-line{
	line-height:50px;
}
.media .img{
	text-align:right;
}
.media .img img{
	width:100px;
	display:inline-block;
	margin-left:4px;
	vertical-align:middle;
}
@media screen and (max-width:768px){
	.media .flex{
		font-size:2.4rem;
	}	
	.media .text{
		line-height:50px;
	}
	.media .text.one-line{
		line-height:25px;
	}
	.media .img img{
		width:50px;
	}
}
@media screen and (max-width:768px){
	.media .flex{
		font-size:2.0rem;
	}	
}
/*【料金】*/
.fee{
	background:#F1F8FC;
}
.fee h3{
	margin-top:0px;
}
.fee h3 img{
	vertical-align:middle;
	height:1.5em;
	display:inline-block;
	margin-right:0.5em;
}

.fee .flex{
	display:-webkit-box;/*--- Android旧ブラウザ用 ---*/
	display:-ms-flexbox;/*--- IE10 ---*/
	display: -webkit-flex;/*--- safari（PC）用 ---*/
	display:flex;
	align-content: flex-start;
}

.fee .flex__text{
	margin:40px 32px 40px 0;
	-webkit-flex:1 1 60%;/*--- safari（PC）用 ---*/
	-ms-flex:1 1 60%;/*--- IE10用 ---*/
	flex : 1 1 60%;
}
.fee .flex__img{
	margin:40px 0px 40px 32px;
	-webkit-flex:1 1 40%;/*--- safari（PC）用 ---*/
	-ms-flex:1 1 40%;/*--- IE10用 ---*/
	flex : 1 1 40%;
	display:flex;
	margin-top:auto;
}
.fee .flex__img img{
  margin: 0 0 0 auto;
	max-width: 80%;
	width:100%;
}

.fee h3{
	font-size:5.6rem;
	margin-bottom:0px;
	padding-botttom:0px;
}
.fee h3 big{
	color:#222222;
	font-size:3em;
}
.fee h3 small{
	font-size:0.6em;
}
.fee .example{
	color:#186DBB;
	font-weight:bold;
	font-size:2.4rem;
	margin-bottom:24px;
}
@media screen and (max-width:768px){
	.fee .flex{
		display:block;
	}	
	.fee .flex__img{
		display:block;
	}
	.fee .flex__img img{
	  margin: 0 auto;
	  max-width:320px;
	  width:50%;
	  display:block;
	 }
	.fee h3{
		font-size:3.2rem;
	}
}
@media screen and (max-width:480px){
	.fee h3{
		font-size:calc(100vw / 480 * 32);
	}
}
/*【実績】*/
.experience {
	padding-right:56px;
	padding-left:56px;
}
.experience .container{
		position:relative;
}
.swiper-button-prev{
	left:-40px;
}
.swiper-button-next{
	right:-40px;
}

.experience .swiper-slide img{
	max-width:100%;
}
.experience .experience__comment{
	margin:40px;
	font-size:3.2rem;
	background:#F1F8FC;
	border:1px solid #186DBB;
	text-align:center;
	padding:24px;
	border-radius:8px;
	color:#186DBB;
	font-weight:bold;
}

@media screen and (max-width:768px){
	.experience .experience__comment{
		font-size:2.0rem;
		margin:24px auto;
		text-align:left;
		padding:16px;
	}
}


/*【フッター】*/
footer{
	font-size:4.0rem;
	background:#186DBB;
	color:#FFF100;
	font-weight:bold;
	text-align:center;
	padding:40px;
}
@media screen and (max-width:768px){
	footer{
		padding:24px;
		font-size:3.2rem;
	}
}
.copy{
	background:#000000;
	color:#ffffff;
	text-align:center;
}
.copy__logo{
	max-width:168px;
	display:block;
	margin:24px auto;
}
.copy__logo img{
	width:100%;
}