@charset "utf-8";
/* ===================================
WAKKA BBB
base Style Sheet
First Update  2018-08-03
Last Update   2019-12-09
Creat by Basic Plus Design Inc.
====================================*/ 
 
/*============================================================
Structure Module
=========================================================== */

html{ text-align:center;}
body{ text-align:left;}

/* -----------------------------------------------------------
 Header
----------------------------------------------------------- */

/* hamburger button */
#nav-toggle { width: 45px; height: 40px; cursor: pointer; padding:10px 3px 3px 3px; }
#nav-toggle div { position: relative; }
#nav-toggle span { display: block; position: absolute; height: 6px; width: 100%; background: #2B5678; left: 0; -webkit-transition: .35s ease-in-out; -moz-transition: .35s ease-in-out; transition: .35s ease-in-out; }
#nav-toggle span:nth-child(1) { top: 0; }
#nav-toggle span:nth-child(2) { top: 10px; }
#nav-toggle span:nth-child(3) { top: 20px; }
#nav-toggle span:nth-child(4) { top: 30px; height:0; }

/* overlay menu */
#gnav { font-size:11rem; font-size:1.1em; color:#FFF;}
#gnav .left ul{ padding-top:2em; padding-bottom:1em;}
#gnav .left li{ position: relative; margin-bottom:1px; line-height:2em; margin-bottom:7px;}
#gnav .left li:after { position: absolute; content: " "; display: block; border-bottom: solid 1px #FFF; bottom: 0px; width:14px; }
#gnav .left li:hover:after { width:100%; transition: 0.3s; }
#gnav .left li a{ color:#FFF;}
#gnav .left li span{ display:inline-block; width:8em;}
#gnav .right h1{ font-size:10rem; font-size:1.0em; }
#gnav .right img{ max-width:100px;}
#gnav .right .nav-inner{ text-align:center;}
#gnav .right .address-set{ display:none;}
#gnav .right .contact-set a{ border:1px solid #FFF; color:#FFF; padding:0 1em 5px 1em;}
#gnav .right .contact-set a:nth-child(1):before{ content: url(../images/ico_tel_white.svg);}
#gnav .right .contact-set a:nth-child(2):before{ content: url(../images/ico_reserve_white.svg);}
#gnav .right .sns h3{ display:none;}
#gnav .right .sns  a{ color: #FFF; }
#gnav .right .sns ul { display: -webkit-flex; display: flex; -webkit-flex-flow: row nowrap; flex-flow: row nowrap;  }
#gnav .right .sns li img{ height:30px; }

/* fixed nav */
#fnav .header-logo img{ max-height:35px; width: auto; position: absolute; top:5px; left:20px;}
#fnav .contact-set{ display:none;}
.site-header{ background: rgba(255,255,255,0.8); padding: 25px; position: fixed; top: 0; transition: .5s; width: 100%; z-index: 100;}

/* side-menu */
#side-area .side-l, #side-area .side-r{ display:none;}

	/* -----------------------------------------------------------
	   Header area MediaQuery
	----------------------------------------------------------- */
	@media screen and (max-width: 768px) {
	#gnav .right .sns li a span{ line-height:0px; height:0; display:inline-block; text-indent: 100%; white-space: nowrap; overflow: hidden; }
	#gnav .right .sns li { padding-top:1em; width:4em; height:55px; }
	#gnav .right .nav-inner{ padding-top:1em;}
	}
	@media screen and (min-width: 769px) {
	#nav-toggle span { height: 4px; }
	#gnav { font-size:9rem; font-size:0.9em;}
	#gnav .left li{ line-height:4em;}
	#gnav .left li span{ width:10em;}
	#gnav .left li:after {  bottom: 15px; }
	#gnav .right .address-set{ display: block;  font-size:8rem; font-size:0.8em; margin-bottom:2em}
	#gnav .right .address-set img{ margin-bottom:2em;}
	#gnav .right .contact-set{ margin-bottom:3em;}
	#gnav .right .sns h3{ display:block; margin-bottom:1em;  font-size:10rem; font-size:1.0em;}
	#gnav .right .sns ul{ }
	#gnav .right .sns li { width:25%;}
	#gnav .right .sns li a span{ font-size:9rem; font-size:0.9em; }
	#gnav .right .go-map{ font-size:9rem; font-size:0.9em; background-color: transparent;}
	#fnav .contact-set{ display: inline-block; position:absolute; top:8px; right:120px;}
	#fnav .contact-set a{ border:none }
	.site-header { position: fixed;  top: 0;  left: 0;  width: 100%;  transition: .3s;}	
	}

	@media screen and (min-width: 1280px) {
	#side-area .side-l{ display:block; position:absolute; top:0px; left:0; width: calc((100% - 1024px) / 2); min-width:128px; height:100vh; padding-top:100px;}
	#side-area .side-l ul { display: -webkit-flex; display: flex; -webkit-flex-flow: column-reverse nowrap; flex-flow: column-reverse nowrap; align-items: flex-end;  font-size:8em;  font-size:0.8rem; height:100%; padding-right:90px;  }
	#side-area .side-l li a{ display:block; height:70px; width:20px;}
	#side-area .side-l li{ background-repeat:no-repeat; background-position: top left; background-size:contain;white-space: nowrap; text-indent: 100%; overflow:hidden; }
	#side-area .side-l li:nth-of-type(1){ background-image:url(../images/side_BBB.svg); height:190px; margin-top:2em; margin-left:3px; width:20px;}
	#side-area .side-l li:nth-of-type(2){ background-image:url(../images/side_blog.svg); height:60px; margin-top:2em}
	#side-area .side-l li:nth-of-type(3){ background-image:url(../images/side_fb.svg); height:95px; margin-top:2em}
	#side-area .side-l li:nth-of-type(4){ background-image:url(../images/side_insta.svg); height:110px; margin-top:2em}
	#side-area .side-l li:nth-of-type(5){ background-image:url(../images/side_youtube.svg); height:100px;}
	#side-area .side-r{ display:block; position:relative; position:absolute; top: 0px; right:0; width: calc((100% - 1024px) / 2); height:100vh; padding-top:100px; min-width:128px; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; text-align:right;  }
	#side-area .side-r span{ color:#989898; font-size:8rem; font-size:0.8em ; display:inline-block ; height:100%; width:20px; position:absolute; left:90px; bottom:0; }
	}



/* -----------------------------------------------------------
 Contents
----------------------------------------------------------- */

.container{	max-width:100% !important;	}
.content{ margin:0 auto; max-width:1024px; width:100%; clear:both; }
.content:after { content: ""; display: table; clear: both; }
.pdg{ padding:5em 2em;}
.pdg-l{ padding:12em 2em;}
.pdg-m{ padding:3em 2em;}
.pdg-s{ padding:2em;}

	/* -----------------------------------------------------------
	   Contents area MediaQuery
	----------------------------------------------------------- */
	@media screen and (min-width: 1124px) {
	.pdg{ padding:130px 0;}
	.pdg-l{ padding:200px 2em;}
	.pdg-m{ padding:5em 0;}
	.pdg-s{ padding:2em 0;}
	}

/* -----------------------------------------------------------
 Footer
----------------------------------------------------------- */
#footer-white .footer-logo img{ display:none;}
#footer-white .nav-text{ display:none; }
#footer-white h3{ color:#A0A0A0; margin-bottom:0.5em; font-size:8em;  font-size:0.8rem;}
#footer-black { font-size:7.5rem; font-size:0.75em; }
#footer-black .go-public{ display:inline-block; background-color:#FFF; color:#000; padding:10px 1em 5px 1em;}
#footer-black .go-public:before{ content: url(../images/ico_triangle.svg); position:relative;  left:-5px; }
		
	/* -----------------------------------------------------------
	 Footer MediaQuery
	----------------------------------------------------------- */
	@media screen and (min-width: 769px) {
	#footer-white .footer-logo img{ display:block; max-width:140px;}
	#footer-white .nav-text{ display: -webkit-flex; display: flex; -webkit-flex-flow: row nowrap; flex-flow: row nowrap;justify-content:space-between; margin-bottom:5em;}
	#footer-white .nav-text li{ font-size:9rem; font-size:0.85em ; position: relative; margin-bottom:1px;}
	#footer-white .nav-text li:after { position: absolute; content: " "; display: block; border-bottom: solid 1px #2B5678; bottom: -3px; width:14px; }
	#footer-white .nav-text li:hover:after { width:100%; transition: 0.3s; }
	#footer-white .footer-contact {justify-content:flex-end; }
	#footer-white .footer-contact a{ padding:0 10px 5px 10px;}
	}
	@media screen and (min-width:1124px) {
	#footer-white .nav-text li{font-size:0.9em ;}
	#footer-white .pdg-s{ padding: 8em 0; }
	#footer-black .pdg-s{ padding: 0.8em 0; }
	}

/* -----------------------------------------------------------
 Pagetop
----------------------------------------------------------- */

#page-top { position: fixed; bottom: 20px; right: 10px; }
#page-top a { width: 60px; height:60px;	background:url(../images/gotop.png) no-repeat bottom right;	background-size:contain; display: block; text-indent: 100%;	white-space: nowrap; overflow: hidden; opacity:0.4; }
	
	/* -----------------------------------------------------------
	 Pagetop MediaQuery
	----------------------------------------------------------- */
	@media screen and (min-width: 640px) {
	#page-top {	right: 50px;}	
	}


/* ===========================================================
 Site Common Style
=========================================================== */
.title { position: relative; font-size:40rem; font-size:4.0em ;	letter-spacing:0.1em; font-weight:700;	margin-bottom:35px;}
.title:after { position: absolute; content: " "; display: block; border-bottom: solid 3px #2B5678; bottom: -25px; width:60px; }
.subtitle{ font-size:9rem; font-size:0.9em; display:block; }
.ico-title{ font-size:10rem; font-size:1.0em ; width:100%; margin:0 auto; font-weight:700; position:relative; text-align:center; margin-bottom:4em; margin-top:110px; }
.ico-title:before{ content:" "; display:block; background-size: 205px 100%; background-repeat:no-repeat; position: absolute; left: 50%;  transform: translateX(-50%);  -webkit- transform: translateX(-50%);top:-110px; margin:0; width:205px;  }
.bar-title{ font-size:10rem; font-size:1.0em ; width:100%; margin:0 auto; position:relative; font-weight:700; margin-bottom:3em;}
.bar-title:before{  background-size:contain; background-repeat:no-repeat; position: absolute; left: 50%;  transform: translateX(-50%);  -webkit- transform: translateX(-50%); display:block; top:-40px; }
.sns-set { margin-bottom:2em; font-size:8em;  font-size:0.8rem;}
.sns-set a{ color:#A0A0A0;}
.sns-set a:hover{ color:#2B5678; transition: 0.3s;}
.sns-set ul { display: -webkit-flex; display: flex; -webkit-flex-flow: row nowrap; flex-flow: row nowrap; }
.sns-set li:nth-child(1):before{ content: url(../images/ico_blog.svg); position:relative; top:4px; left:-3px; }
.sns-set li:nth-child(2):before{ content: url(../images/ico_fb.svg); position:relative; top:4px; left:-3px; margin-left:1.2em;}
.sns-set li:nth-child(3):before{ content: url(../images/ico_insta.svg); position:relative; top:4px; left:-5px; margin-left:1.5em; }
.sns-set li:nth-child(4):before{ content: url(../images/ico_youtube.svg); position:relative; top:4px; left:-5px; margin-left:1.5em; }
.contact-set { /*display: -webkit-flex; display: flex; -webkit-flex-flow: row nowrap; flex-flow: row nowrap;*/ font-size:8em;  font-size:0.8rem; }
.contact-set a{ display:inline-block; vertical-align:middle;border:1px solid #2B5678; text-align:center; padding:0 2em 5px 2em;}
.contact-set a:nth-child(1){ margin-right:0.5em;}
.contact-set a:nth-child(1):before{ content: url(../images/ico_tel.svg); position: relative; top:5px; left:-5px;}
.contact-set a:nth-child(2){ min-width:14em;}
.contact-set a:nth-child(2):before{ content: url(../images/ico_reserve.svg); position:relative; top:5px; left:-5px;}
.go-map{ display:inline-block; background-color:#2B5678; color:#FFF; padding:0 1em 5px 1em; margin-right:0.5em; margin-top:2em;}
.go-map:before{ content: url(../images/ico_map.svg); position:relative;  top:5px; left:-5px; }
.circle { border-radius:50%; padding:50%; background: transparent; position:relative; transition: .3s; overflow: hidden; }
.circle:before{ content:" "; display:block; border-radius:50%; padding:50%; position:absolute; top: 0; left: 0; width: 0; height: 0; margin: 0;  }
.circle::after { display: block; content: ""; position: absolute; top: 50%; left: 50%; width: 0; height: 0; margin: 0; border-radius: 50%; background: rgba(218, 228,234,0.3); transition: .3s;}
.circle:hover:after { width: 100%; height: 100%; margin: -50% 0 0 -50%;}
.circle p{ display:inline-block; position: absolute; top: 50%;	left: 50%; transform: translateY(-50%) translateX(-50%); -webkit- transform: translateY(-50%) translateX(-50%);	width:60%; }
.circle img{ width:100%;}
.circle-set a:hover img{ opacity: 1; }

	/* -----------------------------------------------------------
	 Common Style MediaQuery
	----------------------------------------------------------- */
	@media screen and (min-width: 390px) {	
	.contact-set a:nth-child(1){ margin-right:1em;}
	.go-map{ padding:0 0.5em 5px 1em; margin-right:0.5em; }
	}
	@media screen and (min-width: 769px) {	
	.go-map{ margin-top:0em;}
	.bar-title{ margin-bottom:100px;}
	}

	 /* color style
	----------------------------------------------------------- */
	.lblue{ background-color:#E9EEF1; }
	.dblue{ background-color:#0f3555; }
	.black{ background-color:#000000; color:#FFF; }
	.dglay{ background-color:#b8b8b8; }
	.lglay{ background-color:#cbcbcb; }

	
	a { color:#2B5678;}
	.trs a, .trs{ color:#2B5678;}
	.trs:hover{ opacity: 0.7; transition: 0.3s;}

	
	 /* Table style
	----------------------------------------------------------- */
	/* tbl-base 縦見出し*/
	.tbl-base01{ width:100%; }
	.tbl-base01 th{ color: #FFF; padding: 0.5em; }
	.tbl-base01 td{ padding: 0.5em; margin-bottom:1em;}
	.tbl-base01 td span{ display:block; font-weight:bold;}
			
			/*  Table style MediaQuery----------------------------------------------------------- */
			@media screen and (max-width: 768px) {
			.tbl-base01{	border-bottom:0; }
			.tbl-base01 th{ display:block; width:100% !important; border-bottom:0;}
			.tbl-base01 td{ display:block; width:100% !important;}
			}

	/* tbl-base 縦横見出し*/
	/*  Table style MediaQuery----------------------------------------------------------- */
	@media screen and (max-width: 768px) {
	.tbl-base{ border-bottom:0; width: 100%; }
	.tbl-base caption{ font-weight:bold; margin-bottom:0.5em;display:block; width:100%; background: #fff; color: #2B5678; text-align:center;}
	.tbl-base .thead { display: none; }
	.tbl-base tr { width: 100%; }
	.tbl-base th{ display:block; width:100%; border-bottom:0; padding: 0.5em; }
	.tbl-base th[scope="row"]{text-align:left;  font-weight: bold;}
	.tbl-base td{ padding: 0.5em; display:block; width:100%; text-align:left; border-bottom:1px dashed #fff; }
	.tbl-base td:before{ content: attr(data-label);　float: left; font-weight: bold; display:inline-block; width:50%;	margin-right: 10px; }
	.tbl-base td:last-child{ margin-bottom:2em;}
	}
	@media screen and (min-width: 769px) {
	.tbl-base{ width:100%; margin-bottom:1em; }
	.tbl-base caption{ font-weight:bold; margin-bottom:0.5em; width:100%; background: #fff; color: #2B5678; text-align:center;}
	.tbl-base th{ color: #FFF; padding: 0.5em; border-bottom:1px dashed #fff; border-left:1px dashed #fff; border-right:1px dashed #fff; }
	.tbl-base td{ padding: 0.5em; border:1px dashed #fff;}
	.tbl-base td span{ display:block; font-weight:bold;}
	}

	
	 /* FadeIn style for Page
	----------------------------------------------------------- */
	body {
		animation: fadeIn 2s ease 0s 1 normal;
		-webkit-animation: fadeIn 2s ease 0s 1 normal;
	}
	
	@keyframes fadeIn {
		0% {opacity: 0}
		100% {opacity: 1}
	}
	
	@-webkit-keyframes fadeIn {
		0% {opacity: 0}
		100% {opacity: 1}
	}

	 /* Others style
	----------------------------------------------------------- */
	.pc-break{ display: none; }
	.pc-visible{ visibility: hidden;}
	
		/* Others style MediaQuery----------------------------------------------------------- */
		@media screen and (min-width: 769px) {
		.pc-break{ display: block;}
		.mbl-break{ display: none; }
		.pc-visible{ visibility:visible;}
		}