@import url("reset.css");
@import url("common.css");


/*	cover bg
============================== */

div.cover {
	position:relative;
}
div.cover:after {
	position:absolute;
	z-index:0;
	right:0;
	bottom:0;
	content:"";
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	opacity:0.2;
}
body.contact div.cover:after {
	background-image:url(../img/idx_bg_faq.jpg);
}
body.profile div.cover:after {
	background-image:url(../img/idx_bg_profile.jpg);
}
body.service div.cover:after {
	background-image:url(../img/idx_bg_service.jpg?0);
}
body.about div.cover:after {
/*	background-image:url(../img/idx_bg_about.jpg); */
}
body.vision div.cover:after {
	background-image:url(../img/idx_bg_vision.jpg?0);
}
div.cover main {
	position:relative;
	z-index:1;
}
@media all and (min-width: 992px) {
div.cover:after {
	width:40%;
	height:240px;
}
}
@media all and (max-width: 991.98px) {
div.cover:after {
	width:60%;
	height:120px;
}
}



/*	article
============================== */

main > article {
	position:relative;
	text-align:left;
}
main > article > header h1 span span {
	display:inline-block;
	text-indent:110%;white-space:nowrap;overflow:hidden;
}
article > header h1:before,
article > header h2:before {
	display:block;
	line-height:1.25;
	color:#001d6e;
}
body.profile main > article > header h1:before {
	content:"PROFILE";
}
body.profile main > article > header h2:before {
	content:"MESSAGE";
}
body.service main > article > header h1:before {
	content:"SERVICE";
}
body.vision main > article > header h1:before {
	content:"VISION";
}
body.contact main > article > header h1:before {
	content:"CONTACT US";
}
body.contact main > article > header h2:before {
	content:"FAQ";
}
body.about main > article > header h1:before {
	content:"ABOUT US";
}
article > header h1:first-letter,
article > header h2:first-letter {
	color:#7fb5ff;
}
@media all and (min-width: 1200px) {
main > article {
	max-width:992px;
	margin:0 auto;
}
}
@media all and (min-width: 992px) {
main > article {
	padding:0 60px;
}
main > article:not(:last-child) {
	margin-bottom:120px;
}
main > article > header {
	margin-bottom:60px;
}
main > article > header h1:before,
main > article > header h2:before {
	font-size:400%;
}
main > article > header h1 > span,
main > article > header h2 > span {
	font-size:150%;
}
}
@media all and (max-width: 991.98px) {
main > article {
	padding:0 5vw;
}
main > article:not(:last-child) {
	margin-bottom:60px;
}
main > article > header {
	margin-bottom:30px;
}
main > article > header h1:before,
main > article > header h2:before {
	font-size:9vw;
}
main > article > header h1 > span,
main > article > header h2 > span {
	font-size:3vw;
}
}



/*	figure.pic
============================== */
figure span, figure img {
	display:block;
}
figure span {
	position:relative;
	height:0;
	padding-top: -webkit-calc(9 / 16 * 100%);
	padding-top: calc(9 / 16 * 100%);
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
}
main > article header figure.pic span {
	padding-top: -webkit-calc(900 / 1600 * 100%);
	padding-top: calc(900 / 1600 * 100%);
}
main > article.message figure.pic span {
	padding-top: -webkit-calc(1280 / 954 * 100%);
	padding-top: calc(1280 / 954 * 100%);
}
/*
.vision main > article header figure.pic span {
	padding-top: -webkit-calc(740 / 1280 * 100%);
	padding-top: calc(740 / 1280 * 100%);
} */
.profile main > article figure.pic.baby span {
	padding-top: -webkit-calc(800 / 600 * 100%);
	padding-top: calc(800 / 600 * 100%);
}
.profile main > article figure.pic.reporter span {
	padding-top: -webkit-calc(800 / 1200 * 100%);
	padding-top: calc(800 / 1200 * 100%);
}
figure img {
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
.service main > article header figure.pic span {
	background-image:url(../img/main_service.jpg?0);
}
.profile main > article header figure.pic span {
	background-image:url(../img/main_profile.jpg?0);
}
.vision main > article header figure.pic span {
	background-image:url(../img/main_vision.jpg?1);
}
.about main > article header figure.pic span {
	background-image:url(../img/main_about.jpg?0);
}
.profile main > article.message figure.pic span {
	background-image:url(../img/message.jpg?0);
}
.profile main > article div.inner figure.pic.baby span {
	background-image:url(../img/prof_1.jpg?0);
}
.profile main > article div.inner figure.pic.reporter span {
	background-image:url(../img/prof_2.jpg?0);
}
.profile main > article div.inner figure.pic.baby {
	float:right;
}
.profile main > article div.inner figure.pic.reporter {
	float:left;
}
.profile main > article div.inner figure.pic.baby figcaption,
.profile main > article div.inner figure.pic.reporter figcaption {
	color:#1e78f0;
	text-align:center;
	line-height:1.5;
	margin-top:0.5em;
}
@media all and (min-width: 992px) {
main > article header figure {
	width:100%;
	margin-top:60px;
}
article.message figure {
	width:280px;
}
.profile main > article div.inner figure.pic.baby {
	width:140px;
	margin-left:30px;
	margin-bottom:30px;
}
.profile main > article div.inner figure.pic.reporter {
	width:260px;
	margin-right:30px;
	margin-bottom:30px;
}
.profile main > article div.inner figure.pic.baby figcaption,
.profile main > article div.inner figure.pic.reporter figcaption {
	font-size:75%;
}
}
@media all and (max-width: 991.98px) {
main > article header figure {
	width:100%;
	margin-top:30px;
}
article.message figure {
	width:50%;
	margin:0 auto 30px;
}
.profile main > article div.inner figure.pic.baby {
	width:25%;
	margin-left:15px;
	margin-bottom:15px;
}
.profile main > article div.inner figure.pic.reporter {
	width:35%;
	margin-right:15px;
	margin-bottom:15px;
}
.profile main > article div.inner figure.pic.baby figcaption,
.profile main > article div.inner figure.pic.reporter figcaption {
	font-size:62.5%;
}
}



main > article > div.inner p,
main > article > div.inner ul li {
	line-height:1.5;
}
main > article > div.inner ul li:not(:last-child) {
	margin-bottom:0.5em;
}
main > article > div.inner p {
	text-align:justify;
	text-justify:inter-ideograph;
}
main > article > div.inner p:not(:last-child) {
	margin-bottom:1.5em;
}
@media all and (min-width: 992px) {
main > article > div.inner p,
main > article > div.inner ul li {
	font-size:112.5%;
}
}
@media all and (max-width: 991.98px) {
main > article > div.inner p,
main > article > div.inner ul li {
	font-size:87.5%;
}
}


main > article div.inner > section {
}
@media all and (min-width: 992px) {
main > article > div.inner > section:not(:last-child) {
	margin-bottom:60px;
}
}
@media all and (max-width: 991.98px) {
main > article > div.inner > section:not(:last-child) {
	margin-bottom:30px;
}
}

/*	section.unit
============================== */

main > article > div.inner > section.unit {
}
main > article > div.inner > section.unit > h2,
main > article > div.inner > section.unit > div > h2 {
	line-height:1.5;
	color:#001d6e;
	margin-bottom:1em;
}
@media all and (min-width: 992px) {
main > article > div.inner > section.unit:not(:last-child) {
	margin-bottom:60px;
}
main > article > div.inner > section.unit > h2,
main > article > div.inner > section.unit > div > h2 {
	font-size:150%;
}
}
@media all and (max-width: 991.98px) {
main > article > div.inner > section.unit:not(:last-child) {
	margin-bottom:30px;
}
main > article > div.inner > section.unit > h2,
main > article > div.inner > section.unit > div > h2 {
	font-size:112.5%;
}
}


/*	.service
============================== */
.service main > article > div.inner > section.unit {
	display: flex;
	align-items: flex-start;
}
.service main > article > div.inner > section.unit::before {
	content: "";
	background-color:#ededed;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
}
.service main > article > div.inner > section.unit.service1::before {background-image:url(../img/icon_service_1.png);}
.service main > article > div.inner > section.unit.service2::before {background-image:url(../img/icon_service_2.png);}
.service main > article > div.inner > section.unit.service3::before {background-image:url(../img/icon_service_3.png);}
.service main > article > div.inner > section.unit.service4::before {background-image:url(../img/icon_service_4.png);}
.service main > article > div.inner > section.unit.service5::before {background-image:url(../img/icon_service_5.png);}

.service main > article > div.inner > section.unit > div {
	flex: 1;
}
.service main > article > div.inner > section.unit > div > h2 > span:first-child {
	color:#ffa500;
}
@media all and (min-width: 992px) {
.service main > article > div.inner > section.unit {
	gap: 20px;
}
.service main > article > div.inner > section.unit::before {
	flex: 0 0 80px;
	width: 80px;
	height: 80px;
}
}
@media all and (max-width: 991.98px) {
.service main > article > div.inner > section.unit {
	gap: 10px;
}
.service main > article > div.inner > section.unit::before {
	flex: 0 0 50px;
	width: 50px;
	height: 50px;
}
}



/*	.diving
============================== */
ul.diving {
	display:flex;
	justify-content:right;
}
ul.diving li span,
ul.diving li img {
	display:block;
}
ul.diving li span {
	background-size:cover;
}
ul.diving li:nth-child(1) span {
	background-image:url(../img/diving_1.jpg);
}
ul.diving li:nth-child(2) span {
	background-image:url(../img/diving_2.jpg);
}
ul.diving li:nth-child(3) span {
	background-image:url(../img/diving_3.jpg);
}
@media all and (min-width: 992px) {
ul.diving {
	gap:40px;
}
ul.diving li span img {
	width:120px;
	height:120px;
}
}
@media all and (max-width: 991.98px) {
ul.diving {
	gap:20px;
}
ul.diving li span img {
	width:60px;
	height:60px;
}
}

/*	.message
============================== */
@media all and (min-width: 992px) {
article.message > div.inner {
	display:flex;
	gap:30px;
}
article.message > div.inner > div {
	width: -webkit-calc(100% - 350px);
	width: calc(100% - 350px);
}
}


/*	.about
============================== */

.about main > article > div.inner {
}
.about main > article > div.inner div.map {
	position:relative;
	height:0;
	padding-top: -webkit-calc(9 / 16 * 100%);
	padding-top: calc(9 / 16 * 100%);
}
.about main > article > div.inner div.map iframe {
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	border:0;margin:0;padding:0;
}
.about main > article > div.inner dl {
	line-height:1.5
}
.about main > article > div.inner dl dt {
	width:4em;
	float:left;
	color:#ffa500;
}
.about main > article > div.inner dl dd {
	padding-left:4.5em;
}
.about main > article > div.inner dl dd:not(:last-child) {
	margin-bottom:0.75em;
}
@media all and (min-width: 992px) {
.about main > article > div.inner {
	display:flex;
}
.about main > article > div.inner div.lef {
	width:40%;
}
.about main > article > div.inner div.rig {
	width:60%;
}
.about main > article > div.inner dl dt,
.about main > article > div.inner dl dd {
	font-size:112.5%;
}
}
@media all and (max-width: 991.98px) {
.about main > article > div.inner div.lef {
	margin-bottom:40px;
}
.about main > article > div.inner dl dt,
.about main > article > div.inner dl dd {
	font-size:87.5%;
}
}



.about main > article > div.inner div.station span,
.about main > article > div.inner div.station img {
	display:block;
}
.about main > article > div.inner div.station span {
	position:relative;
	height:0;
	padding-top: -webkit-calc(136 / 1600 * 100%);
	padding-top: calc(136 / 1600 * 100%);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
	background-image:url(../img/about_station.png);
}
.about main > article > div.inner div.station span img {
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
@media all and (min-width: 992px) {
.about main > article > div.inner div.station {
	margin-bottom:30px;
}
}
@media all and (max-width: 991.98px) {
.about main > article > div.inner div.station {
	margin-bottom:15px;
}
}



/*	.vision
============================== */

section.unit.vision ul li:before {
	content:"★";
	display:block;
	float:left;
}
section.unit.vision ul li > span {
	display:block;
	padding-left:1.5em;
}
section.unit.vision ul li > span > span.dt {
	color:#ffa500;
}



/*	.neko
============================== */
main > article > div.inner div.neko {
	position:relative;
}
main > article > div.inner div.neko:after {
	content:"";
	display:block;
	background-image:url(../img/vision_neko.png);
	background-repeat:no-repeat;
	background-size:cover;
	position:absolute;
	left:0;
	bottom:0;
}
main > article > div.inner div.neko p {
	color:#50321e;
	background-color:hsla(0,0%,100%,0.7);
	border:1px solid #ededed;
	box-shadow:4px 4px 10px hsla(0,0%,0%,.1);
}
main > article > div.inner div.neko p > b {
	display:inline-block;
	margin-bottom:0.25em;
}
@media all and (min-width: 992px) {
main > article > div.inner div.neko {
	margin-right:28%;
	margin-left:14%;
	margin-top:120px;
}
main > article > div.inner div.neko p {
	font-size:112.5%;
	padding:40px 40px;
	border-radius:20px;
}
main > article > div.inner div.neko:after {
	width:140px;
	height:140px;
	left:-120px;
	bottom:-30px;
}
}
@media all and (max-width: 991.98px) {
main > article > div.inner div.neko {
	margin-right:12%;
	margin-left:14%;
	margin-top:60px;
	margin-bottom:80px;
}
main > article > div.inner div.neko p {
	font-size:87.5%;
	padding:5vw;
	border-radius:10px;
}
main > article > div.inner div.neko:after {
	width:80px;
	height:80px;
	left:-60px;
	bottom:-15px;
}
}