@charset "utf-8";
/*-------------------------------------
  2014/09/01
  ooe kentarou
---------------------------------------*/
/*HEADER リセット
==========================*/
html, body { height: 100%;}
*, a{outline:none;}
#tebraHead{ width:100%; position:absolute; left:0; top:0; z-index:5; opacity:0.9; filter: alpha(opacity=95);}
.en{font-family: 'Cinzel', serif;}
p, dt, dd, li, span { color:#666;}
@media screen and (min-width: 681px) and (max-width: 959px) {
#nav ul.gnav { margin-top:0px;}
}
@media screen and (max-width: 680px) {
#foot { border-top: solid 1px #999;}
}
/*==========================
 MAIN IMAGE
==========================*/
#main1{ width:100%; min-height:600px; display:block; height:90%; float:left; position:relative;}
#main1 #PW {font-family: 'Fredericka the Great', cursive; width:100%; height:120px; position:absolute; left:0; bottom:15%; font-style:italic; color:#fff; font-size:70px; text-align:center; line-height:60px; z-index:100; *display:none;}
#main1 #PW br{ display:none;}
/* FONT */
#main1 .titleBox{ width:600px; height:360px; position:absolute; left:50%; top:50%; margin:-100px 0 0 -300px; z-index:2; background:url("../img/index/back.png") 50% 50% no-repeat; display:block;}
#main1 .titleBox h1, 
#main1 .titleBox p { width:100%; float:left; text-align:center; position:relative; z-index:2; color:#222; font-weight:bold; text-shadow:1px 2px 15px #fff;}
#main1 .titleBox h1 {}
#main1 .titleBox h1, #main1 h1 strong{font-size:40px; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; color:#222;}
#main1 .titleBox h1 .en { color:#0085B2; font-size:25px; display:block; line-height:50px; font-weight:800; letter-spacing:3px; text-shadow:1px 2px 15px #fff; font-family: 'Cinzel', serif;}
#main1 .titleBox p { margin-top:20px; font-size:16px; letter-spacing:9px; line-height:1.5em;}
#main1 .titleBox p img { margin-top:25px;}
/*_ Nav _*/
#main1 .Nav {width:100%; height:80px; position:absolute; left:0; bottom:0; z-index:2; background:rgba(255,255,255,0.6); *background:#fff; background:#fff\9; box-shadow:0 2px 2px #999;}
#main1 .Nav ul {}
#main1 .Nav ul li { width:14.2%; display:inline; float:left; text-align:center; text-align:center;}
#main1 .Nav ul li a { display:block; padding:20px 0; height:40px; background:rgba(255,255,255,0.5); font-size:10px; line-height:20px; color:#888; background:rgba(255,255,255,0.2);}
#main1 .Nav ul li a .en { display:block; font-size:13px; line-height:20px; color:#444; letter-spacing:3px;}
#main1 .Nav ul li a:hover {
background: #ffffff;
background: -moz-linear-gradient(top,  #ffffff 0%, #eae7da 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#eae7da));
background: -webkit-linear-gradient(top,  #ffffff 0%,#eae7da 100%);
background: -o-linear-gradient(top,  #ffffff 0%,#eae7da 100%);
background: -ms-linear-gradient(top,  #ffffff 0%,#eae7da 100%);
background: linear-gradient(to bottom,  #ffffff 0%,#eae7da 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eae7da',GradientType=0 );
color:#00B5EC;
}
/*_ IMAGE _*/
#main1 .photoIMG, 
#main1 .photoIMG .bxslider, 
#main1 .photoIMG .slide span { width:100%; height:100%; position:absolute; left:0; top:0px; z-index:1;}
#main1 .photoIMG .slide, 
#main1 .photoIMG .bx-wrapper, 
#main1 .photoIMG .bx-wrapper.bx-viewport { width:100%; height:100%; float:left; display:block; position:relative;}
@media screen and (max-width: 900px) {
html, body { height: auto;}
#main1{min-height:1px; height:700px;}
#main1 #PW {font-size:52px;}

#main1 .photoIMG, 
#main1 .photoIMG .bxslider, 
#main1 .photoIMG .slide span { width:100%; height:100%; position:static; float:left;}

/* FONT */
#main1 .titleBox{top:20%; margin:0 0 0 -300px; }
#main1 .titleBox h1, 
#main1 .titleBox p {text-shadow:none;}
#main1 .titleBox h1 {}
#main1 .titleBox h1, #main1 h1 strong{font-size:28px;}
#main1 .titleBox h1 .en { color:#008AF9; text-shadow:none; font-size:20px; line-height:36px;}
#main1 .titleBox p { }
#main1 .titleBox p img { margin-top:20px;}
/*_ Nav _*/
#main1 .Nav ul li a { font-size:9px;}
#main1 .Nav ul li a .en { font-size:12px;}
}
@media screen and (max-width: 680px) {
#main1{min-height:1px; height:500px;}
#main1 #PW {font-size:46px; line-height:1.2em;}
#main1 #PW br { display:block;}
/* FONT */
#main1 .titleBox{ width:100%; height:auto; top:28%; left:0; margin:0; background-size:auto 100%;}
#main1 .titleBox h1, #main1 h1 strong{font-size:36px; letter-spacing:4px; line-height:2em;}
#main1 .titleBox h1 .en { color:#57CDFF; font-size:16px; line-height:20px;}
#main1 .titleBox p { font-size:16px; letter-spacing:1px; margin-top:10px;}
#main1 .titleBox p img { width:220px; height:auto; margin-top:15px;}
/*_ Nav _*/
#main1 .Nav{ display:none;}
}
@media screen and (max-width: 520px) {
#main1{ height:450px;}
}
@media screen and (max-width: 380px) {
#main1{min-height:1px; height:360px;}
#main1 #PW {font-size:37px; line-height:1.2em;}
/* FONT */
#main1 .titleBox{ top:20%;}
#main1 .titleBox h1, #main1 h1 strong{font-size:24px; letter-spacing:4px;}
#main1 .titleBox h1 .en { color:#57CDFF; font-size:16px; line-height:20px;}
#main1 .titleBox p { font-size:13px; margin-top:5px;}
#main1 .titleBox p img { width:170px; height:auto; margin-top:8px;}
/*_ Nav _*/
#main1 .Nav{ display:none;}
}
/*////////// SLIDER //////////////////////////////////////*/
#main1 .photoIMG { width:100%; overflow:hidden;}
#main1 .photoIMG span { width:100%; height:100%; display:block;}
/*============================================================
* BxSlider v4.1.2 - Fully loaded, responsive content slider
* http://bxslider.com Written by: Steven Wanderski, 2014
* http://stevenwanderski.com
* (while drinking Belgian ales and listening to jazz)
* CEO and founder of bxCreative, LTD http://bxcreative.com
============================================================*/
/* RESET --------------------------------*/
.bx-wrapper {	position: relative;	margin:0;	padding: 0;	*zoom: 1;}
/* CONTENTS --------------------------------*/
.bx-wrapper .bx-viewport { height:100%; left:0px;}
/* LOADER --------------------------------*/
.bx-wrapper .bx-loading {	min-height:100px;	background: url("../img/load.gif") center center no-repeat #fff;	height: 100%;	width: 100%;	position: absolute;	top: 0;	left: 0;	z-index:5000;}
/* pager --------------------------------*/
.bx-controls { width:100%; height:100%; position:absolute; left:0; top:0; right:0; bottom:0; z-index:1;}
.bx-wrapper .bx-pager { width:90%; height:30px; padding:0 5%; position:absolute; left:0%; bottom:80px; text-align:right; z-index:-9999;}
.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {	display: inline-block;	*zoom: 1;	*display: inline;}
.bx-wrapper .bx-pager.bx-default-pager a {	background: #ccc;	text-indent: -9999px;	display: block;	width: 8px;	height: 30px;	margin: 0 5px;	outline: 0;}
.bx-wrapper .bx-pager.bx-default-pager a:hover{	-moz-border-radius: 10px;	-webkit-border-radius: 10px;	border-radius: 10px;}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {	background: #008BCE;}
/* NEXT / PREV --------------------------------*/
.bx-wrapper .bx-prev {left:0px; background:url("../img/index/slide/l_btn.png") left top no-repeat;}
.bx-wrapper .bx-next {right:0px; background:url("../img/index/slide/r_btn.png") left top no-repeat;}
.bx-wrapper .bx-controls-direction a {	position: absolute;	top: 50%;	margin-top: -15px;	outline: 0;	width: 30px;	height: 30px;	z-index: 9999; display:block;}
/* START / STOP --------------------------------*/
.bx-wrapper .bx-controls-auto {display: none;}
/*////////// SLIDER END //////////////////////////////////////*/
/*==========================
 PLAN MENU
==========================*/
#plan .box a h2
#plan .box a h2 span, 
#plan .box a dl dt img{-webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out; -o-transition: 1s ease-in-out; transition: 1s ease-in-out;}
/*---------*/
#plan{
background: #eee;
padding-bottom:2px;
background: -moz-linear-gradient(top,  #ffffff 0%, #cccccc 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#cccccc));
background: -webkit-linear-gradient(top,  #ffffff 0%,#cccccc 100%);
background: -o-linear-gradient(top,  #ffffff 0%,#cccccc 100%);
background: -ms-linear-gradient(top,  #ffffff 0%,#cccccc 100%);
background: linear-gradient(to bottom,  #ffffff 0%,#cccccc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cccccc',GradientType=0 );
}
#plan .box{width:49.7%; height:660px; float:left; margin:0 0.1%; display:inline; position:relative;}
#plan .box a{ height:100%; display:block; background:#fff;}
#plan .box a:hover{ opacity:1; filter: alpha(opacity=100);}
/* TITLE */
#plan .box a > * { width:90%; float:left; margin:auto 5%;}
#plan .box a h2 { text-align:center; padding:40px 0px; background:url("../img/index/plan_bk.png") 50% 80% no-repeat;}
#plan .box a h2, #plan .box a h2 span{ font-size:16px; letter-spacing:4px; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; color:#008AF9;}
#plan .box a h2 .en { display:block; color:#008AF9; line-height:1.4em;}
#plan .box a h2 .sp{ display:none;}
/* Text / Image */
#plan .box a dl {}
#plan .box a dl dt { width:100%; float:left;}
#plan .box a dl dt img { width:100%; height:auto; margin:0; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; opacity: 1; filter: alpha(opacity=100);}
#plan .box a dl dd { width:90%; float:right; line-height:1.8em; padding:20px 5% 0; font-size:14px; letter-spacing:0;}
#plan .box a dl dd .info { color:#B3A58D; display:block;}
#plan .box a dl .more{ width:250px; height:30px; position:absolute; bottom:20px; left:10%; padding:0; text-align:center; background:#B3A58D; color:#fff;}
#plan .box a dl .more span { color:#fff;}
#plan .box a:hover dl * { -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;}
#plan .box a:hover dl .more { background:#39D7FF;}
/* planSP */
#plan .box.planSP a .spBnr { display:none;}
#plan .box.planSP a h2{ background:url("../img/index/plan_bk2.png") 50% 80% no-repeat;}
#plan .box.planSP a h2, #plan .box.planSP a h2 span{ color:#B28500;}
#plan .box.planSP a dl dd .info{ background:#FFFFE8; color:#B28500;}
/* Ready -----------------*/
@media screen and (max-width: 960px) {
#plan .box{ height:600px;}
#plan .box a dl .more{ display:block;}
}
@media screen and (max-width: 900px) {
#plan .box a > * { width:90%; margin:auto 5%;}
#plan .box a h2{ font-size:15px;}
#plan .box a h2 span{ font-size:12px; letter-spacing:2px; color:#7FC4FB;}
}
@media screen and (max-width: 680px) {
#plan{background: url("../img/common/back2.gif") bottom center no-repeat #fff; padding-bottom:30px; background-size:auto 30px;}
#plan .cntMin3 {width: 100%; margin:0; border-top: solid 1px #aaa;}
#plan .box.plan3{}
#plan .box a{ float:left; background:#fff;}
#plan .box{width:50%; height:auto; margin:0;}
#plan .box.plan1{ margin-right:-1px; border-left:solid 1px #E5E8EF;}
#plan .box.plan1, 
#plan .box.plan2{ border-bottom: solid 1px #E5E8EF; padding-bottom:10px;}
#plan .box a > * { width:100%; float:left; margin:auto 0;}
/* TITLE */
#plan .box a h2 { font-size:13px; line-height:1.2em; padding:0px 0 10px;/* margin-bottom:10px; background:url("../img/index/plan_bk.png") center bottom no-repeat;*/ background:none; background-size:auto 5px;}
#plan .box.plan2 a h2 { letter-spacing:2px;}
#plan .box a h2 span{ font-size:10px; letter-spacing:2px; color:#008AF9;}
#plan .box a h2 .en{ line-height:2em;}
#plan .box a h2 .sp{ display:block; width:100%; height:auto; margin-bottom:10px;}
/* Text / Image */
#plan .box a dl dt { display:none;}
#plan .box a dl dd { width:84%; font-size:10px; line-height:1.4em; padding:5px 8%; display:none;}
#plan .box a dl dd .info { display:none;}
#plan .box a dl .more { width:80%; height:20px; margin:0 10%; font-size:11px; position:static; display:block; line-height:20px; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px;}
#plan .box a dl .more span{ font-size:11px;}
/* planSP */
#plan .box.planSP{ width:100%;}
#plan .box.planSP h2, 
#plan .box.planSP dl{ display:none;}
/* planSP */
#plan .box.planSP a .spBnr { display:none;}
#plan .box.planSP a .spBnr { width:100%; float:left; display:block;}
#plan .box.planSP a .spBnr img{ width:100%; height:auto;}
}
/*==========================
 menu
==========================*/
#menu, 
#menu .box a h3, 
#menu .box a h3 img {-webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out; -o-transition: 1s ease-in-out; transition: 1s ease-in-out;}
/*-----*/
#menu{ background:#fff; padding:80px 0 60px;}
#menu h2{ padding:0px 0 50px; text-align:center; font-size:20px; font-weight:bold; color:#444; letter-spacing:8px; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
#menu h2 .en{ display:block; font-size:12px; background:url("../img/index/menu.gif") 50% 50%  no-repeat;}
/*Clumn*/
#menu .box { width:25%; height:450px; float:left; display:inline; background:url("../img/index/line1.gif") 100% 50% no-repeat;}
#menu .box.menu4{ background:none;}
#menu .box a { width:80%; padding:0 10%; display:block; text-align:center;}
#menu .box a:hover, #menu .box a:hover h3 .icon img { opacity:1; filter: alpha(opacity=100);}
/*Image*/
#menu .box a h3 { width:100%; float:left; margin:0;}
#menu .box a h3 img { max-width:100%; height:auto; width:100%\9; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px;}
#menu .box h3 .icon{ width:50px; height:50px; display:block; margin:10px auto; border-radius:100%; -webkit-border-radius:100%; -moz-border-radius:100%;}
#menu .box a h3 .icon{ -webkit-transition: 2s ease-in-out; -moz-transition: 2s ease-in-out; -o-transition: 5s ease-in-out; transition: 2s ease-in-out;}
#menu .box a:hover h3 .icon{ box-shadow:0px -100px 0 0 #3BE9FF inset;}
#menu .box h3 .dress{}
#menu .box h3 .make{}
#menu .box h3 .faq{}
/*TITLE*/
#menu .box a h4 { width:100%; height:60px; margin-top:10px; line-height:20px; float:left; font-size:13px; color:#555; letter-spacing:4px; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;} 
#menu .box a h4 .en{ display:block; line-height:20px;}
/*Text*/
#menu .box a p { width:80%; float:left; margin:0px 10% 0; padding-top:40px; background:url("../img/index/line2.gif") 50% 5px no-repeat; text-align:left;}
#menu .box a p .more{ display:none;}
/*Ready2*/
@media screen and (max-width: 960px) {
#menu{ padding:50px 0;}
/*Image*/
#menu .box a h3 img { max-width:100%; height:auto; border-radius:30px; -webkit-border-radius:30px; -moz-border-radius:30px;}
/*TITLE*/
#menu .box a h4 { height:70px; line-height:20px; font-size:12px; letter-spacing:1px; line-height:18px; color:#444;} 
#menu .box a h4 .en{ display:block; line-height:22px; font-size:11px; color:#888;}
/*Text*/
#menu .box a p { min-height:86px; padding:20px 0 40px; font-size:11.5px; line-height:1.6em; position:relative;}
#menu .box a p .more{ display:block; position:absolute; bottom:10px; font-size:10px; left:5%; z-index:10; width:90%; height:20px; text-align:center; line-height:20px; background:#999; color:#fff; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px;}
}
@media screen and (max-width: 840px) {
#menu .box a p { min-height:95px; font-size:11px;}
}
@media screen and (max-width: 680px) {
#menu{ padding:20px 0 0;}
#menu .cntMin3 {width: 100%; margin:0;}
#menu h2{ background-color:#fff; padding:0px 0 15px; font-size:14px; letter-spacing:3px; }
#menu h2 .en{ font-size:11px;}
/*Clumn*/
#menu .cntMin3 #inner { width:94%; padding:20px 3%; background:#eee; border-top: solid 1px #ccc; border-bottom: solid 1px #ccc;}
#menu .box { width:100%; height:100px; margin:0 -1px; overflow:hidden; border-bottom: solid 1px #ccc;  border-left: solid 1px #ccc; border-right: solid 1px #ccc; background:#fff;}
#menu .box.menu4{ background:#fff;}
#menu .box.menu1{border-top: solid 1px #ccc;}
#menu .box a { width:100%; padding:0;}
/*Image*/
#menu .box a h3 { width:40%; height:100px; display:inline; overflow:hidden; position:relative;}
#menu .box a h3 img { max-width:1000%; width:130%; position:absolute; z-index:3; height:auto; border-radius:0px; -webkit-border-radius:0px; -moz-border-radius:0px;}
#menu .box.menu1 a h3 img{left:0%; bottom:0%;}
#menu .box.menu2 a h3 img{left:0%; top:0%;}
#menu .box.menu3 a h3 img{left:0%; bottom:0%;}
#menu .box.menu4 a h3 img{left:0%; top:-5%;}
#menu .box h3 .icon{ display:none;}
#menu .box a h3 .icon{ -webkit-transition: 2s ease-in-out; -moz-transition: 2s ease-in-out; -o-transition: 5s ease-in-out; transition: 2s ease-in-out;}
#menu .box a:hover h3 .icon{ box-shadow:0px -100px 0 0 #3BE9FF inset;}
/*TITLE*/
#menu .box a h4 { width:52%; height:35px; float:right; margin:10px 2% 5px 0; border-bottom:dashed 1px #eee; letter-spacing:2px; text-align:left; font-size:11px; line-height:15px;}
#menu .box.menu2 a h4 { height:46px; line-height:14px; font-size:11px; margin:5px 2% 5px 0; letter-spacing:1px;}
#menu .box a h4 .en{ font-size:9.5px; line-height:15px; color:#008AF9;}
/*Text*/
#menu .box a p { width:52%; float:right; margin:0 2% 0 0; padding-top:0px; background:none; font-size:9px; text-align:left; line-height:1.4em; color:#777;}
#menu .box a p .more{ display:none;}
}

/*==========================
 concept
==========================*/
#concept .box a .inner p .more {-webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out; -o-transition: 1s ease-in-out; transition: 1s ease-in-out;}
/*-----*/
#concept{ background:#fff; padding-bottom:80px;}
#concept .box{
height:300px;
overflow:hidden;
background: #68bbff;
background: -moz-linear-gradient(top,  #68bbff 0%, #008afb 80%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#68bbff), color-stop(80%,#008afb));
background: -webkit-linear-gradient(top,  #68bbff 0%,#008afb 80%);
background: -o-linear-gradient(top,  #68bbff 0%,#008afb 80%);
background: -ms-linear-gradient(top,  #68bbff 0%,#008afb 80%);
background: linear-gradient(to bottom,  #68bbff 0%,#008afb 80%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#68bbff', endColorstr='#008afb',GradientType=0 );
}
#concept .box a { display:block;}
#concept .box .inner{ width:99%; height:288px; float:left; margin:5px 0.5%; box-shadow:0 0 1px #fff; position:relative; overflow:hidden;}
/*text*/
#concept .box a .inner h2{ width:22%; float:left; font-weight:bold; display:inline; margin:60px 0 0 15%; *margin:60px 0 0 5%; margin:60px 0 0 5%\9; padding:20px 0px 20px 70px; padding:20px 0 20px 100px\9; *padding:20px 0 20px 100px; font-size:20px; letter-spacing:2px; line-height:1.4em; color:#fff; background:url("../img/icon/heart.png") left 50% no-repeat; background-size:50px auto; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; position:relative; z-index:15;}
#concept .box a .inner h2 span{ display:block; color:#fff; font-size:18px; line-height:1.4em;}
#concept .box a .inner p{ width:40%; float:right; display:inline; margin:30px 15% 0 0; color:#fff; font-size:16px; line-height:2em; position:relative; z-index:15;}
#concept .box a .inner p .more{ padding:2px 25px; background:#fff; color:#68bbff;}
#concept .box a:hover .inner p .more{ padding:2px 50px 2px 25px; position:relative; z-index:15;}
#concept .box a .inner .pc{ display:block;}
#concept .box a .inner .sp{ display:none;}

/*Animation*/
#concept .box a .inner  .Animation span { position:absolute;}
#concept .box a .inner .Animation .Tree{ width:50px; height:60px; left:10%; bottom:0; z-index:8; background:url("../img/index/concept/ki.png") left bottom no-repeat;}
/*波*/
#concept .box a .inner .Animation .nami{ width:100%; height:30px; z-index:10; left:0; bottom:0; background-image:url("../img/index/concept/nami.png");}
/*イルカ*/
#concept .box a .inner .Animation .iruka01, 
#concept .box a .inner .Animation .iruka02, 
#concept .box a .inner .Animation .iruka03 { width:160px; height:160px; position:absolute; z-index:5; display:none\9; *display:none;}

#concept .box a .inner .Animation .iruka01 { right:20%; bottom:-110px; background: url("../img/index/concept/iruka1.png") left top no-repeat;}
#concept .box a .inner .Animation .iruka02 { left:18%; bottom:-110px; background:url("../img/index/concept/iruka2.png") left top no-repeat;}
#concept .box a .inner .Animation .iruka03 { left:15%; bottom:-80px; background:url("../img/index/concept/iruka1.png") left top no-repeat;}





@media screen and (max-width: 1200px) {
/*text*/
#concept .box a .inner h2{ width:35%; margin:50px 0 0 2%; font-size:18px;}
#concept .box a .inner h2 span{ font-size:14px;}
#concept .box a .inner p{ width:45%; margin:50px 5% 0 0; font-size:14px;}
}
@media screen and (max-width: 900px) {
#concept .box a .inner h2{font-size:18px;}
#concept .box a .inner h2 span{ font-size:12px;}
#concept .box a .inner p{font-size:13px;}
}

@media screen and (max-width: 680px) {
#concept { padding:30px 0;}
#concept .box{ height:200px;}
#concept .box a .inner{ width:94%; height:178px; margin:10px 3%;}
#concept .box a .inner h2{ width:70%; margin:10px 15%; padding:0 0 5px; font-size:13.5px;  background-size:40px auto; background:url("../img/icon/heart.png") left 40% no-repeat; text-align:center; line-height:20px;}
#concept .box a .inner h2 span{ font-size:12px; line-height:20px;}
#concept .box a .inner p{ width:70%; margin:10px 15% 0; font-size:11px; line-height:1.4em;}
#concept .box a .inner p .more{ display:block; margin-top:10px; text-align:center;}
/*Animation*/
#concept .box a .inner .Animation .Tree{ width:25px; height:30px; left:10%; bottom:-5px; background-size:25px 30px;}
/*波*/
#concept .box a .inner .Animation .nami{ height:15px; background-size:auto 15px;}
/*イルカ*/
#concept .box a .inner .Animation .iruka01, 
#concept .box a .inner .Animation .iruka02, 
#concept .box a .inner .Animation .iruka03 { width:120px; height:120px}

#concept .box a .inner .Animation .iruka01 { right:10%; bottom:-82px; background-size:120px auto;}
#concept .box a .inner .Animation .iruka02 { left:8%; bottom:-82px; background-size:120px auto;}
#concept .box a .inner .Animation .iruka03 { left:12%; bottom:-60px; background-size:120px auto;}
}
@media screen and (max-width: 520px) {
#concept .box a .inner h2{ width:95%; margin:15px 0% 0px 5%; background-size:40px auto; }

#concept .box a .inner .pc{ display:none;}
#concept .box a .inner .sp{ display:block;}
}



/*==========================
 CONTACT BOX
==========================*/
#tebraContact{ background:#F6F6F6; padding:40px 0;}
#tebraContact ul{}
#tebraContact ul li{ width:33%; height:215px; float:left; display:inline; margin-right:4%;}
#tebraContact ul li *{-webkit-transition: 0.8s ease-in-out; -moz-transition: 0.8s ease-in-out; -o-transition: 0.8s ease-in-out; transition: 0.8s ease-in-out;}
#tebraContact ul li.faq{ width:26%; margin-right:0;}
#tebraContact ul li a{ min-height:215px; display:block;}
#tebraContact ul li a > *{ width:100%; float:left; display:block; text-align:center;}
#tebraContact ul li a em{ height:50px; line-height:50px; padding-top:75px; font-size:18px; letter-spacing:3px; position:relative; color:#fff;
border-top-left-radius: 8px;  
border-top-right-radius: 8px;  
-webkit-border-top-left-radius: 8px;  
-webkit-border-top-right-radius: 8px;  
-moz-border-radius-topleft: 8px;  
-moz-border-radius-topright: 8px;
box-shadow:0px 1px 2px #555;
}

#tebraContact ul li.contact a em{ background:#34A0FA;}
#tebraContact ul li.request a em{ background:#6EBDFB;}
#tebraContact ul li.faq a em{ background:#E0CA29;}
#tebraContact ul li.contact a:hover em,
#tebraContact ul li.request a:hover em{ background:#009;} 
#tebraContact ul li.faq a:hover em{ background:#B59100;}
#tebraContact ul li a em span{ width:54px; height:54px; position:absolute; z-index:10; left:50%;}
#tebraContact ul li a em .icon{ top:15px; margin-left:-27px; background-image:url("../img/common/contact_pc.png"); margin-left:-27px;}
#tebraContact ul li.contact a em .icon{background-position:0 0;background-size:100% auto;}
#tebraContact ul li.request a em .icon{ background-position:0 -54px; background-size:100% auto;}
#tebraContact ul li.faq a em .icon{ background-position:0 -108px; background-size:100% auto;}
#tebraContact ul li a em .Circle{top:12px; margin-left:-30px; border:solid 3px #fff; border-radius:100%; -webkit-border-radius:100%; -moz-border-radius:100%;}
#tebraContact ul li a:hover em .Circle{
 border: dashed 4px #fff;
margin-left:-31px;
-webkit-animation-duration:12s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-webkit-animation-name:rectRotate;
-moz-animation-duration:12s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:linear;
-moz-animation-name:rectRotate;
-o-animation-duration:12s;
-o-animation-iteration-count:infinite;
-o-animation-timing-function:linear;
-o-animation-name:rectRotate;
-ms-animation-duration:12s;
-ms-animation-iteration-count:infinite;
-ms-animation-timing-function:linear;
-ms-animation-name:rectRotate;
}
@-webkit-keyframes rectRotate{	0% {-webkit-transform:rotate(0deg);}	99%,100%{-webkit-transform:rotate(360deg);}}
@-moz-keyframes rectRotate{ 0%{-moz-transform:rotate(0deg);} 99%,100%{-moz-transform:rotate(360deg);}}
@-o-keyframes rectRotate{ 0%{-o-transform:rotate(0deg);} 99%,100%{-o-transform:rotate(360deg);}}
@-ms-keyframes rectRotate { 0%{-ms-transform:rotate(0deg);} 99%,100%{-ms-transform:rotate(360deg);}}
#tebraContact ul li a .text{
background:#fff;
font-size:13px;
color:#0686EE;
margin:0;
line-height:20px;
border-bottom-left-radius:8px;  
border-bottom-right-radius:8px;  
-webkit-border-bottom-left-radius:8px;  
-webkit-border-bottom-right-radius:8px;  
-moz-border-radius-bottomleft:8px;  
-moz-border-radius-bottomright:8px;  
box-shadow:0px 1px 2px #555;
}
#tebraContact ul li.contact a .text{padding:10px 0;}
#tebraContact ul li.request a .text{padding:20px 0;}
#tebraContact ul li.faq a .text{padding:20px 0; color:#8C6800;}
#tebraContact ul li.contact a:hover .text, 
#tebraContact ul li.request a:hover .text{ color:#009;}
#tebraContact ul li.faq a:hover .text{ color:#B59100;}
@media screen and (max-width:1250px) {
#tebraContact{width:96%; padding:40px 2%;}
}
@media screen and (max-width: 960px) {
#tebraContact ul li{ width:35%; margin-right:1%;}
#tebraContact ul li.faq{ width:28%; margin-right:0;}
#tebraContact ul li a .text { font-size:12px;}
}
@media screen and (max-width: 800px) {
#tebraContact ul li{ width:46%; margin:0 2%;}
#tebraContact ul li.faq{ display:none;}
}
@media screen and (max-width: 680px) {
#tebraContact{ width:100%; padding:20px 0%;}
#tebraContact ul li { height:165px;}
#tebraContact ul li a { min-height:165px;}
#tebraContact ul li a em{ height:30px; line-height:30px; padding-top:55px; font-size:14px;}
#tebraContact ul li a em span{ width:40px; height:40px;}
#tebraContact ul li a em .icon{ top:10px; margin-left:-20px;}
#tebraContact ul li.contact a em .icon{background-position:0 0;background-size:100% auto;}
#tebraContact ul li.request a em .icon{ background-position:0 -40px; background-size:100% auto;}
#tebraContact ul li a em .Circle{top:7px; margin-left:-23px;}
#tebraContact ul li a:hover em .Circle{margin-left:-24px;}
#tebraContact ul li.contact a em{ background:#0075F0;}
#tebraContact ul li.request a em{ background:#34A0FA;}
#tebraContact ul li a .text{ width:90%; font-size:10px; line-height:14px; text-align:left; color:#666;}
#tebraContact ul li a .text br { display:none;}
#tebraContact ul li.contact a .text{padding:10px 5%; height:60px;}
#tebraContact ul li.request a .text{padding:20px 5%; height:40px;}
}
/*==========================
 FOOT NAV
==========================*/
.footNav{ width:100%; height:21px; float:left; background:#1796D2;}
.footNav ol{ height:21px;}
.footNav ol li{ width:auto; height:21px; display:inline-block; float:left; position:relative;}
.footNav ol li img{ width:10px; height:21px; position:absolute; right:-10px; top:0; z-index:10;}
.footNav ol li a{ display:block;}
.footNav ol li a span { color:#fff; line-height:21px; font-size:11px; display:block; padding:0 25px;}
.footNav ol li.nav2 { background:#46ADDD;}
.footNav ol li.nav3 { background:#62BBE4;}
.footNav ol li.nav4 { background:#78C6E9;}
.footNav ol li.nav5 { background:#91D2EF;}
.footNav .tebraNav{ display:none;}
@media screen and (max-width: 480px) {
.footNav{ height:auto; background:#EEE;}
.footNav ol{ display:none;}
.footNav .tebraNav{ display:block;}
}