@charset "UTF-8";
/* CSS Document */


/* anchorNavi
-----------------------------------------------*/
#anchorNavi{
	max-width:860px;
	margin:30px auto 0 auto;
	padding:0 40px;
}
#anchorNavi ul{
	width:100%;
	display:table;
	font-size:0;
	border-right:2px solid #0074A6;
}
#anchorNavi ul li{
	display:table-cell;
	vertical-align:middle;
	width:20%;
	text-align:center;
	border-left:2px solid #0074A6;
}
#anchorNavi ul li a{
	display:block;
	font-size:14px;
	font-weight:bold;
	padding:4px 0;
	line-height:1.2;
}
#anchorNavi ul li a:hover{
	color:#0074A6;
}
#anchorNavi ul li a br{
	display:none;
}
@media screen and (max-width: 750px) {
#anchorNavi{
	padding:0 20px;
}
#anchorNavi ul li a{
	font-size:12px;
}
#anchorNavi ul li a br{
	display:block;
}
}


/* subTtl
-----------------------------------------------*/
.section .subTtl{
	text-align:center;
	padding:130px 0 0 0;
}
.section .subTtl h2{
	display:inline-block;
	font-size:58px;
	font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
	font-feature-settings:"palt";
	font-weight:normal;
	border-bottom:6px solid #0074A6;
}
@media screen and (max-width: 750px) {
.section .subTtl{
	padding:60px 0 0 0;
}
.section .subTtl h2{
	font-size:30px;
	border-bottom:4px solid #0074A6;
}
}


/* featur
-----------------------------------------------*/
#featur .inner{
	font-size:0;
	max-width:1220px;
	margin:0 auto;
	padding:0 40px;
	text-align:center;
}
#featur .col3{
	font-size:0;
	margin-top:70px;
}
#featur .col3 .col{
	display:inline-block;
	vertical-align:top;
	width:350px;
	font-size:13px;
	margin:40px 85px 0 0;
}
#featur .col3 .col:nth-child(3n){
	margin-right:0;
}
#featur .col3 .col h3{
	color:#0074A6;
	font-size:30px;
	margin-top:15px;
}
#featur .col3 .col p{
	font-size:14px;
	font-weight:bold;
	line-height:2;
	margin-top:5px;
}
/* fade */
.section .col{
	position:relative;
	top:40px;
	opacity:0;
}
.section .col.fade{
	top:0;
	opacity:1;
}
@media screen and (max-width: 1300px) {
#featur .col3 .col{
	width:30%;
	margin:40px 5% 0 0;
}
}
@media screen and (max-width: 950px) {
#featur .col3 .col,
#featur .col3 .col:nth-child(3n){
	width:47.5%;
	margin:5% 5% 0 0;
}
#featur .col3 .col:nth-child(2n){
	margin-right:0;
}
}
@media screen and (max-width: 750px) {
#featur .inner{
	padding:0 20px;
}
#featur .col3{
	margin-top:40px;
}
#featur .col3 .col h3{
	font-size:22px;
}
#featur .col3 .col p{
	font-size:13px;
	margin-top:5px;
}
}
@media screen and (max-width: 550px) {
#featur .col3 .col,
#featur .col3 .col:nth-child(3n){
	width:100%;
	margin:20px 0 0 0;
}
#featur .col3 .col:nth-child(1){
	margin-top:0;
}
}


/* type
-----------------------------------------------*/
#type .inner{
	padding:0 40px;
}
@media screen and (max-width: 750px) {
#type .inner{
	padding:0 20px;
}
}


/* principle
-----------------------------------------------*/
#principle .inner{
	padding:0 40px;
}
@media screen and (max-width: 750px) {
#principle .inner{
	padding:0 20px;
}
}


/* case
-----------------------------------------------*/
#case{
	background:#0074A6;
	margin-top:110px;
	padding-bottom:100px;
}
#case .inner{
	font-size:0;
	max-width:1220px;
	margin:0 auto 0 auto;
	padding:0 40px;
	text-align:center;
}
#case .subTtl h2{
	color:#fff;
	border-bottom:6px solid #fff;
}
#case .col{
	display:inline-block;
	vertical-align:top;
	width:46.722%;
	font-size:13px;
	margin:6.556% 6.556% 0 0;
	background-color:#fff;
	box-shadow:0px 10px 40px 0px rgba(0,0,0,0.4);
}
#case .col:nth-child(2n){
	margin-right:0;
}
#case .col a{
	display:block;
}
#case .col .img{
	overflow:hidden;
	position:relative;
}
#case .col .img img{
	width:100%;
	height:auto;
}
#case .col .img img{
	opacity:1;
}
#case .col:hover .img img{
	transform:scale(1.05);
	-webkit-transform:scale(1.05);
}
#case .col.noHover:hover .img img{
	transform:scale(1);
	-webkit-transform:scale(1);
}
#case .col .img .off{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	opacity:0;
}
#case .col:hover .img .off{
	opacity:1;
}
#case .col .txt{
	position:relative;
	padding:40px 30px 30px 30px;
	text-align:left;
}
#case .col .txt .number{
	position:absolute;
	left:50%;
	top:-30px;
	margin-left:-30px;
	border-radius:50%;
	background:#0074A6;
	color:#fff;
	text-align:center;
	width:60px;
	height:48px;
	padding-top:12px;
	font-family:'Oswald', sans-serif;
	font-size:24px;
}
#case .col .txt h2{
	font-size:24px;
	color:#0074A6;
}
#case .col .txt p{
	font-size:13px;
	line-height:2;
	margin-top:5px;
}


#case .col .txt .btn{
	position:relative;
	display:block;
	border:2px solid #0074A6;
	padding:10px 0 10px 20px;
	border-radius:8px;
	font-size:14px;
	font-weight:bold;
	color:#0074A6;
	background:transparent;
	width:150px;
	margin-top:10px;
}
#case .col .txt .btn::before{
	content:"";
	position:absolute;
	top:13px;
	right:20px;
	width:12px;
	height:12px;
	border-top:4px solid #0074A6;
	border-right:4px solid #0074A6;
	-webkit-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	transform:rotate(45deg);
}
#case .col a:hover .txt .btn{
	color:#fff;
	background:#0074A6;
}
#case .col a:hover .txt .btn::before{
	border-top:4px solid #fff;
	border-right:4px solid #fff;
}
@media screen and (max-width: 750px) {
#case{
	margin-top:40px;
	padding-bottom:40px;
}
#case .subTtl{
	padding-top:40px;
}
#case .inner{
	padding:0 20px;
}
#case .subTtl h2{
	border-bottom:4px solid #fff;
}
#case .col .txt{
	padding:30px 20px 20px 20px;
}
#case .col .txt h2{
	font-size:16px;
}
#case .col .txt p{
	font-size:12px;
	margin-top:2px;
	line-height:1.8;
}
#case .col .txt .btn{
	padding:8px 0 8px 20px;
	font-size:13px;
	width:140px;
	margin:8px auto 0 auto;
}
#case .col .txt .btn::before{
	top:10px;
	right:20px;
	width:12px;
	height:12px;
}
}
@media screen and (max-width: 550px) {
#case .col,
#case .col:nth-child(2n){
	width:100%;
	margin:20px 0 0 0;
}
}


/* movie
-----------------------------------------------*/
#movie .inner{
	font-size:0;
	max-width:1220px;
	margin:0 auto;
	padding:0 40px;
	text-align:center;
}
#movie .col3{
	font-size:0;
	margin-top:70px;
}
#movie .col3 .col{
	display:inline-block;
	vertical-align:top;
	width:28.689%;
	font-size:13px;
	margin:0 6.9665% 0 0;
}
#movie .col3 .col:nth-child(3n){
	margin-right:0;
}
#movie .col3 .col .iframe{
  position:relative;
  padding-top:56.25%;
}
#movie .col3 .col .iframe iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}
#movie .col3 .col p{
	text-align:left;
	font-weight:bold;
	font-size:20px;
	margin-top:8px;
}
@media screen and (max-width: 950px) {
#movie .col3 .col,
#movie .col3 .col:nth-child(3n){
	width:47.5%;
	margin:5% 5% 0 0;
}
#movie .col3 .col:nth-child(2n){
	margin-right:0;
}
}
@media screen and (max-width: 750px) {
#movie .inner{
	padding:0 20px;
}
#movie .col3{
	margin-top:40px;
}
#movie .col3 .col p{
	text-align:center;
	font-size:14px;
}
}
@media screen and (max-width: 550px) {
#movie .col3 .col,
#movie .col3 .col:nth-child(3n){
	width:100%;
	margin:20px 0 0 0;
}
#movie .col3 .col:nth-child(1){
	margin-top:0;
}
}


/* step
-----------------------------------------------*/
#step .box{
	margin-top:70px;
	position:relative;
	width:100%;
}
#step .box .bg1,
#step .box .bg2{
	width:50%;
	height:100%;
	position:absolute;
}
#step .box .bg1{
	left:0;
	background:#0074A6;
}
#step .box .bg2{
	right:0;
	background:#008BB6;
}
#step ul{
	max-width:1220px;
	margin:0 auto;
	font-size:0;
	padding:0 40px;
}
#step ul li{
	position:relative;
	display:inline-block;
	vertical-align:top;
	width:12.5%;
	height:205px;
	padding-top:65px;
	text-align:center;
	background-image:url(/img/whats/bgi-step_01.png);
	background-size:auto 100%;
	background-position:right center;
	background-repeat:no-repeat;
	background-color:#0074A6;
	color:#fff;
}
#step ul li:nth-child(1)::before{
	content:"";
	position:absolute;
	left:-15%;
	top:0;
	height:100%;
	width:100%;
	background-image:url(/img/whats/bgi-step_01.png);
	background-size:auto 100%;
	background-position:left center;
	background-repeat:no-repeat;
}
#step ul li:nth-child(2n+1){
	background-color:#008BB6;
	background-image:url(/img/whats/bgi-step_02.png);
}
#step ul li strong{
	font-family:'Oswald', sans-serif;
	font-size:50px;
	line-height:1;
}
#step ul li strong span{
	display:block;
	font-size:22px;
}
#step ul li h3{
	font-size:18px;
	margin-top:10px;
}
@media screen and (max-width: 1300px) {
#step ul li h3{
	font-size:16px;
}
}
@media screen and (max-width: 950px) {
#step .box .bg1,
#step .box .bg2{
	display:none;
}
#step ul{
	max-width:500px;
	padding:0 20px;
}
#step ul li{
	display:block;
	width:100%;
	height:auto;
	background-image:none !important;
	padding:15px 0 25px 0;
}
#step ul li:nth-child(1)::before{
	display:none;
}
#step ul li::after{
	position:absolute;
	left:0;
	bottom:0;
	height:20px;
	width:100%;
	content:"";
	background-image:url(/img/whats/bgi-step_01_sp.png);
	background-size:100% 100%;
	background-position:left center;
	background-repeat:no-repeat;
}
#step ul li:nth-child(2n+1)::after{
	background-image:url(/img/whats/bgi-step_02_sp.png);
}
#step ul li:last-child::after{
	display:none;
}
#step ul li strong{
	font-size:40px;
	display:inline-block;
	vertical-align:middle;
	margin-right:15px;
}
#step ul li strong span{
	font-size:18px;
}
#step ul li h3{
	display:inline-block;
	vertical-align:middle;
	font-size:18px;
	width:130px;
	text-align:left;
}
}
@media screen and (max-width: 750px) {
#step .box{
	margin-top:40px;
}
#step ul{
	max-width:100%;
}
}


/* col2
-----------------------------------------------*/
.section .col2{
	max-width:1140px;
	margin:160px auto 0 auto;
	font-size:0;
}
.section .col2 .col{
	position:relative;
	display:inline-block;
	width:46.316%;
	margin-right:7.368%;
}
.section .col2 .col:nth-child(2n){
	margin-right:0;
}
.section .col2 .col img{
	width:100%;
	height:auto;
}
.section .col2 .col .txt{
	position:absolute;
	z-index:1;
	left:50%;
	margin-left:-86px;
	bottom:85%;
	background:#0074A6;
	width:172px;
	height:172px;
	border-radius:50%;
	text-align:center;
}
.section .col2 .col .txt h3{
	position:absolute;
	top:50%;
	width:100%;
	transform:translate(0,-50%);
	font-size:22px;
	color:#fff;
}
@media screen and (max-width: 750px) {
.section .col2{
	max-width:300px;
	margin:40px auto 0 auto;
	padding-left:50px;
}
.section .col2 .col{
	width:100%;
	margin:20px 0 0 0;
}
.section .col2 .col:nth-child(1){
	margin-top:0;
}
.section .col2 .col .txt{
	bottom:65%;
	left:15%;
	width:100px;
	height:100px;
}
.section .col2 .col .txt h3{
	font-size:14px;
}
}

.section .col{
	-webkit-transition:opacity 0.8s ease,top 0.8s ease;
	-moz-transition:opacity 0.8s ease,top 0.8s ease;
	-o-transition:opacity 0.8s ease,top 0.8s ease;
	-ms-transition:opacity 0.8s ease,top 0.8s ease;
	transition:opacity 0.8s ease,top 0.8s ease;
}
#anchorNavi ul li a,
.section .col .img img,
#case .col a .txt .btn,
#case .col .txt .btn::before{
	-webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
	-ms-transition:all 0.3s ease;
	transition:all 0.3s ease;
}