@charset "UTF-8";

#wrapper {
width:100%;}
.container {
position:relative;
padding:90px 0 90px 0;}
.contents {
position:relative;
margin:0 auto;
width:90%;
max-width:1200px;}

@media only screen and (max-width:1023px) {

.container {
padding:9% 0 9% 0;}

}

@media only screen and ( max-width:767px) {

.container {
padding:65px 0 65px 0;}

}

/* hamburger =================== */

.gmenu-sp-btn {
position:fixed;
z-index:10000;
cursor:pointer;
top:7px;
right:7px;
width:70px;
height:70px;
background:#009E9D;
border-radius:50%;
transition:0.25s;}
.gmenu-sp-btn::after {
font-family:"Noto Sans JP", sans-serif;
content:"MENU";
position:absolute;
font-size:14px;
line-height:40px;
font-weight:700;
color:#fff;
letter-spacing:-0.05em;
bottom:0px;
left:50%;
transform:translate(-50%,0);}
.gmenu-sp-btn span, .gmenu-sp-btn span::before, .gmenu-sp-btn span::after {
content:"";
position:absolute;
display:block;
left:50%;
top:25px;
height:1px;
width:40px;
background:#fff;
transition:0.25s;
transform:translate(-50%,0);}
.gmenu-sp-btn span::before {
top:-8px;}
.gmenu-sp-btn span::after {
top:8px;}
#gmenu-sp-btn-check:checked ~ .gmenu-sp-btn {
background:none;}
#gmenu-sp-btn-check:checked ~ .gmenu-sp-btn::after {
color:#222;}
#gmenu-sp-btn-check:checked ~ .gmenu-sp-btn span {
background:none;}
#gmenu-sp-btn-check:checked ~ .gmenu-sp-btn span::before {
top:0px;
background:#222;
transform:translate(-50%,0) rotate(45deg);}
#gmenu-sp-btn-check:checked ~ .gmenu-sp-btn span::after {
top:0px;
background:#222;
transform:translate(-50%,0) rotate(-45deg);}
#gmenu-sp-btn-check {
display:none;}

/* gmenu-sp ===================== */

.gmenu-sp-bg {
-webkit-overflow-scrolling:touch;
overflow-scrolling:touch;
pointer-events:none;
opacity:0;
position:fixed;
z-index:9998;
overflow-y:auto;
overscroll-behavior-y:contain;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(226,238,197,0.95);
transition:0.25s;}
#gmenu-sp-btn-check:checked ~ .gmenu-sp-bg {
pointer-events:auto;
opacity:1;}
.gmenu-sp-modal {
text-align:center;
margin:75px auto 40px;
width:90%;
max-width:540px;}
.gmenu-sp-logo {
margin:0 auto 1.6em;
width:96%;
max-width:480px;}
.gmenu-sp-sns {
margin:1.6em auto;
width:200px;}
.gmenu-sp-sns ul {
justify-content:center;}
.gmenu-sp-sns li {
width:25%;}
.gmenu-sp-sns img {
max-width:85%;
border-radius:50%;
box-shadow:1px 1px 2px rgba(0,0,0,0.1);}
.gmenu-sp-global {
margin:2.0em 0;}
.gmenu-sp-global ul {
justify-content:center;
width:100%;}
.gmenu-sp-global ul li {
width:33.3333%;}
.gmenu-sp-global ul li a {
display:block;
padding:0 2.2%;
transition:transform 0.25s;}
.gmenu-sp-global ul li a:hover {
transform:scale(1.075);}
.gmenu-sp-global ul li a:hover img {
transform-origin: 50% 57.5%;}
.gmenu-sp-contact {
margin:1.6em 0 0 0;}
.gmenu-sp-contact a {
display:block;
padding:6px 0;
background:#8ec555;
border-radius:12px;}

/* footer =========== */

.footer-global {
font-family:"Noto Sans JP",sans-serif;
text-align:center;
background:#c4d700;}
.footer-global .footer-menu {
padding:2.5em 0 3.0em 0;
background:#534c4a;}
.footer-global .footer-menu h2 {
margin-bottom:1.0em;
font-size:200%;
line-height:1.15;
font-weight:800;
color:#fff;
letter-spacing:0.075em;
white-space:nowrap;}
.footer-global .footer-menu h2 br {
display:none;}
.footer-global .footer-menu ul {
margin:0 auto;
width:95%;
max-width:1050px;
justify-content:center;}
.footer-global .footer-menu ul li {
width:20%;}
.footer-global .footer-menu ul li a {
display:block;
padding:0 5%;
transition:transform 0.25s;}
.footer-global .footer-menu ul li a:hover {
transform:scale(1.1);}
.footer-global .footer-menu ul li a:hover img {
transform-origin: 50% 57.5%;}
.footer-global .footer-logo {
padding:1.5em 0 0.25em 0;}
.footer-global .footer-copyright {
padding:1.25em 0;
font-size:60%;
line-height:1.25;}

@media only screen and (max-width:767px) {

.footer-global .footer-menu h2 {
margin-bottom:0.7em;
font-size:6.5vw;}
.footer-global .footer-menu h2 br {
display:block;}
.footer-global .footer-menu ul li {
width:33.3333%;}
.footer-global .footer-menu ul li a {
padding:0 4%;}

}

#page-top {
position:fixed;
z-index:9990;
bottom:10px;
right:10px;
width:80px;}
#page-top:hover {
transform:translate(0,-10px);}
