@charset "utf-8";
/* CSS Document */
/*.m-plus-rounded-1c-medium {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.m-plus-rounded-1c-bold {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.m-plus-rounded-1c-extrabold {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.m-plus-rounded-1c-black {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 900;
  font-style: normal;
}
.barlow-condensed-bold {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-style: normal;
}
*/
:root {
--main-color: #230a28;
--base-color: #05e4c7;
--transition : all 0.5s ease 0s;
--en: "Zen Maru Gothic", serif;
--green:rgb(34, 74, 73);
--green-op:rgba(116, 184, 154,0.5);
--yellow:rgb(255, 226, 62);
}
a {transition : var(--transition);color:inherit}
img{vertical-align: bottom;max-width: 100%;height: auto;width: 100%}
small{font-size: 80%;}
.cen{text-align: center!important}
.lef{text-align:left!important}
@media screen and (max-width:767px){.pc_only{display:none!important}}
@media screen and (min-width:768px){.sp_only{display:none!important}}
@media only screen and (min-width: 1025px) {.tab-sp {display: none !important;}}


html{font-size:100%;box-sizing:border-box;-webkit-text-size-adjust:100%;word-break:normal;scroll-behavior:smooth; -webkit-text-size-adjust: 100%;}
body{overflow-x: hidden; background-color: var(--base-color);color: var(--main-color);font-family: "M PLUS Rounded 1c", sans-serif;font-weight: 700;font-size:16px;position: relative;}

.container{width: 100%;max-width:940px;margin: 0 auto ;padding: 0 15px}

.hamburger{display:block;position:fixed;z-index:100;right:5px;top:5px;width:52px;height:52px;cursor:pointer;text-align:center;background: #fff}
.hamburger span{display:block;position:absolute;width:30px;height:2px;left:11px;background:var(--green);-webkit-transition:0.3s ease-in-out;-moz-transition:0.3s ease-in-out;transition:0.3s ease-in-out}
.hamburger span:nth-child(1){top:10px}
.hamburger span:nth-child(2){top:18px}
.hamburger span:nth-child(3){top:26px;}
.hamburger::after{position:absolute;top:34px;left:10px;content:'MENU';height:13px;font-size:12px; line-height: 1; color:var(--green);font-family: var(--en);font-weight: 900;}
.hamburger.active{background: var(--yellow)}
.hamburger.active::after{left:8px;content:'CLOSE'; }
.hamburger.active span:nth-child(1){top:20px;left:10px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg)}
.hamburger.active span:nth-child(2),.hamburger.active span:nth-child(3){top:20px;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg);width:30px;}
@media (min-width: 769px) {
.hamburger{display: none}
}
	

.nav_list_sp{position:fixed;z-index:2;top:0;left:0;color:var(--base-color);background:rgba( 0,0,0,0.6 );text-align:center;width:100%;height:100vh;opacity:0;display:none;transition:opacity .6s ease,visibility .6s ease}
.nav_list_sp .logo{text-align: center;margin-bottom: 15px}
.nav_list_sp .logo img{width: 100px;height: 100px;}
.nav_list_sp ul{margin:0 auto;padding:0;width:100%}
.nav_list_sp ul li{list-style-type:none;padding:0;width:100%;transition:.5s all}
.nav_list_sp ul li:last-child{padding-bottom:0}
.nav_list_sp ul li:hover{background:#ddd;}
.nav_list_sp ul li a,.nav_list_sp ul li .open{display:block;color:var(--base-color);font-size:20px;text-decoration:none;line-height:3}
.nav_list_sp ul li a:hover,.nav_list_sp ul li .open:hover{color: var(--main-color)}
.nav_list_sp.active{opacity:100;display:flex;flex-direction:column;justify-content:center}
.nav_icon_sp {text-align: center}
.nav_icon_sp img{width:auto;height:20px;margin:15px;display: inline-block}
/*========= 上部固定させるためのCSS ===============*/
@media screen and (min-width:767px){
main{position: relative}
#header {
  width: 100%;
  height:140px;
  position: fixed;
  z-index: 10;
  transition: var(--transition);
  text-align: center;
}

#header.hidden {
  transform: translateY(-140px);
}
.nav_list_sp{display: none}
	
#header .container .pc_only{display: flex;
	justify-content:center;
	align-items: center;
	color:var(--green);
	text-align: center;
	padding: 20px 0;}
}
/*fixedでブロックがなくなるのではじめの要素のトップに余白を持たせる*/
section#kv{padding-top:30px;}
@media screen and (min-width:769px){
section#kv{
	padding-top:140px;
}}

/*========= レイアウトのためのCSS ===============*/
h1{padding:0 20px}
h1 img{width: 100px;height:100px;  }

h2{text-align:center;margin:0 0 15px 0}
p{margin-top:20px}
small{background:#333;color:#fff;display:block;text-align:center;padding:20px}
nav ul#g-navi{list-style:none;display:flex;justify-content:center;}
nav ul#g-navi li{padding:0 10px;/*font-family: var(--en);*/font-weight: 900;font-size: 19px}
nav ul#g-navi li a{display:block;text-decoration:none;color:var(--main-color);padding:10px 0;transition:all 0.3s;position: relative;transform: rotate(0.05deg);}
nav ul#g-navi li a::after {
    position: absolute;
    left: 0;
    content: '';
    width: 100%;
    height: 3px;
    background: var(--green);
    bottom: -5px;
    transform: scale(0, 1);
    transform-origin: center top;
    transition: transform 0.3s;
}
nav ul#g-navi li a:hover::after{transform:scale(1,1)}

nav ul li.current a,nav ul li a:hover,nav ul li a:active{color:#fff}

section:nth-child(2n){background:url("../img/bg.webp")repeat,var(--yellow);position: relative}


section#kv,section#system,section#dogmenu,section#terms{background:url("../img/bg.webp")repeat;}
section#kv .container{display: flex;flex-direction: column;justify-content: center;align-items: center;}
section#kv .container img{max-width:768px;width: 100%}
section#kv .container p{font-size:clamp(1.5rem, 1.091rem + 2.05vw, 2.625rem);font-weight: 900}
section#concept .container p{font-size:clamp(1.125rem, 0.852rem + 1.36vw, 1.875rem);transform:rotate(0.03deg);font-weight: 500;text-align: center;padding: 20px;border-radius: 15px;background: #fff;max-width: 940px;margin: 25px auto 15px;}
section .container{padding-top:25px;padding-bottom:25px;}
@media screen and (min-width:769px){
section .container{padding-top:35px;padding-bottom:35px;}
}
section .container h2{font-weight: 900;font-size:clamp(2.5rem, 0.795rem + 8.52vw, 7.188rem);color:var(--green);filter: drop-shadow(3px 4px 0 var(--green-op));}
@media screen and (min-width:769px){
section .container h2{filter: drop-shadow(5px 6px 0 var(--green-op));}
}
section .container h3{display: flex;justify-content: space-between;align-items: center;position: relative;font-weight: 800;font-size:clamp(1.25rem, 0.886rem + 1.82vw, 2.25rem);color:var(--green);}
section .container h3:before,
section .container h3:after {content: "";flex-grow: 1;border-top: 3px dashed var(--green);display: block;}
section .container h3:before {margin-right: 1em;}
section .container h3:after {margin-left: 1em;}
table{width:100%;max-width: 940px;margin: 25px auto;font-weight: 500;font-size:clamp(1rem, 0.682rem + 1.59vw, 1.875rem);transform: rotate(0.05deg);}
td{padding:10px;font-size:clamp(1rem, 0.682rem + 1.59vw, 1.875rem);vertical-align: middle;white-space: nowrap;font-weight: 500}
td:last-child{text-align: right}
tr:nth-child(even){}
tr:nth-child(odd){background:#fff}
.fa-rotate-90 {
	transform: rotate(90deg);
}
/* Google Mapを囲う要素 */
.map {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 65%; 
	margin: 25px auto;
}
 
/* Google Mapのiframe */
.map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.btn{text-align: center}
.btn a{background: var(--green);color:#fff;font-weight: 500;display: inline-block;padding: 1rem 3rem;cursor: pointer;transition: all 0.3s;vertical-align: middle;border: 2px solid var(--green);font-size: clamp(1.188rem, 0.892rem + 1.48vw, 2rem);}
.btn a:hover{color: var(--green);background: #fff;}
.btn02{}
.btn02{text-align: center;background: #e9727e;color:#fff;font-weight: 800;display: inline-block;padding: 1rem 1.5rem;cursor: pointer;transition: all 0.3s;vertical-align: middle;border: 3px solid #e9727e;font-size: clamp(1.625rem, 1.307rem + 1.59vw, 2.5rem);margin: 0 auto;border-radius: 15px}
.btn02:hover{background: #fff;color:#e9727e;}

section#caution{padding-bottom: 75px!important;}
section#access p{display: flex;flex-direction: column;justify-content: center;align-items: center;font-size:clamp(1rem, 0.682rem + 1.59vw, 1.875rem);transform:rotate(0.03deg);font-weight: 900;}

@media screen and (min-width:769px){
section#access p{display: flex;flex-direction: row;justify-content: space-between; }}
section#caution ul{
    margin: 0 auto;
    padding: 0.5em 0em 0.5em 2.5em;
    position: relative;}
section#caution ul li{display: inline-block;
    text-align: left;
    padding: 0.5em 0;
    vertical-align: middle;
    border: none;
    font-weight: bold;font-size: clamp(1rem, 0.682rem + 1.59vw, 1.875rem);}
section#caution ul li::before{font-family: "Font Awesome 5 Free";
    content: '\f00c';
    position: absolute;
    left: 0em;
    color: var(--green);}
#footer{background:url("../img/bg.webp")repeat,#77655b;position: relative}
#footer .container .flex{display: flex;
	justify-content:center;
	align-items: center;
	color:var(--green);
	text-align: center;
	padding: 20px 0;}

#footer .container .flex .logo{padding:0 20px}
#footer .container .flex .logo img{width: 100px;height:100px; }
nav ul#footer-navi{list-style:none;display:flex;justify-content:center;}
nav ul#footer-navi li{padding:0 10px;/*font-family: var(--en);*/font-weight: 900;font-size: 19px}
nav ul#footer-navi li a{display:block;text-decoration:none;color:#fff;padding:10px 0px;transition:all 0.3s;position: relative;transform: rotate(0.05deg);}
nav ul#footer-navi li a::after {
    position: absolute;
    left: 0;
    content: '';
    width: 100%;
    height: 3px;
    background: #fff;
    bottom: -5px;
    transform: scale(0, 1);
    transform-origin: center top;
    transition: transform 0.3s;
}
nav ul#footer-navi li a:hover::after{transform:scale(1,1)}

#footer #sp-footer-navi{position: fixed;
   width: 100%;
   bottom: 0px;
   font-size: 0;
   opacity: 0.9;
   z-index: 99;}
#footer #sp-footer-navi{display: flex;background:url("../img/bg.webp")repeat,#77655b;}
#footer #sp-footer-navi li{
   justify-content: center;
   align-items: center;
   width: 50%;
   padding:0;
   margin:0;
   font-size: 24px;
	line-height: 24px;
   border-right: 1px solid #fff;
}
#footer #sp-footer-navi li:last-child{border-right:none!important}
#footer #sp-footer-navi li a{color: #fff;font-family: var(--en);font-weight: 900;
   text-align: center;
   display:block;
   width: 100%;
   padding:10px 10px;}
#footer #sp-footer-navi li:first-child a{font-size: 14px;}
/*-------------------------
ページのトップへ
-------------------------*/
#page_top{width:40px;height:40px;position:fixed;right:10px;bottom:70px;background:rgba(255, 255, 255,0.5);z-index: 1000;display: flex;justify-content: center;align-items: center;transition: var(--transition)}
#page_top:hover{background:rgba(255, 255, 255,1);}
#page_top::before{content:'';background:url("../img/angles-up-solid.svg")no-repeat;width: 30px;height: 30px;background-size: contain;background-position: center }
@media screen and (min-width:767px){
#page_top{width:60px;height:60px;bottom:10px;}
}
.hotpepper{margin: 10px auto;text-align: center}
@media screen and (min-width:1280px){
	.hotpepper{position:fixed;z-index: 100;
	top:30px; right:0}}
@media screen and (min-width:767px) and ( max-width: 1024px) {
h1,#footer .container .flex .logo{padding:0 10px}
h1 img,#footer .container .flex .logo img{width: 80px;height:80px;}
nav ul#g-navi li ,nav ul#footer-navi li {font-size: 18px!important}	
}
/*-------------------------
トリミング
-------------------------*/

 #trimming h3 + p {
    font-size: clamp(1.125rem, 0.989rem + 0.68vw, 1.5rem);
    font-weight: 700;
    text-align: center;
    padding: 20px;
    border-radius: 15px;
    background: #fff;
    max-width: 940px;
    margin: 25px auto 15px;transform: rotate(0.05deg);
}
#trimming p:last-of-type{margin-bottom: 3em}
.tbl{margin: 20px auto;}

.tbl th {
 /* background: #e9727e;*/
  /*border-bottom: solid 1px #ccc;*/
  padding: 15px;background: #e9727e;font-size: clamp(1.125rem, 0.989rem + 0.68vw, 1.5rem)
}
.tbl td {
padding: 15px;
}
 .tbl td:first-child {

}
.tbl th:nth-child(2),.tbl th:last-child{text-align: right}
.tbl td:nth-child(2),.tbl td:last-child{text-align: right}
.tbl tr:nth-child(even){background:#fff}
.tbl tr:nth-child(odd){background:#f7f2e8}
@media screen and (max-width: 640px) {
  .tbl {
    width: 100%;
  }
  .tbl .thead {
    display: none;
  }
  .tbl tr {
    width: 100%;
  }
  .tbl td {
    display: block;
    text-align: right;
    width: 100%;
  }
  .tbl td:first-child {
    background: #e9727e;
    color: #fff;
    font-weight: bold;
    text-align: center;
  }
  .tbl td:before {
    content: attr(data-label);
    float: left;
    margin-right: 10px;
  }
}

#system .container img{margin-bottom: 25px}