@charset "utf-8";

body{font-family: "Montserrat","游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,Roboto,'Droid Sans',sans-serif;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}}

a{text-decoration: none;}

.clear{clear: both;}
* {margin: 0;padding: 0;}
html {overflow: hidden;overflow-y: scroll;font-size: calc(15px + 0.2vw) ;}
body {position: relative;right: 0;overflow-x: hidden;height: 100%;overflow: hidden;-webkit-overflow-scrolling: touch;font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;}
.clear{clear: both;}
::selection {background: #c2da69;color: #fff;}

.above-the-fold{display:-webkit-box;display:-ms-flexbox;display:flex}
.above-the-fold h1{margin:20px;width:40px}
@media screen and (min-width: 768px){.above-the-fold h1{margin:calc(3.125vw + 10px)}}
@media screen and (min-width: 1200px){.above-the-fold h1{margin:20px}}
@media screen and (min-width: 768px){.above-the-fold h1{width:calc(6.25vw + 20px)}}
@media screen and (min-width: 1200px){.above-the-fold h1{width:150px}}
@media screen and (min-width: 768px){.above-the-fold .hero .hgroup{font-size:calc(3.90625vw + 12.5px)}}
@media screen and (min-width: 1200px){.above-the-fold .hero .hgroup{font-size:50px}}
@media screen and (min-width: 768px){.above-the-fold .hero .hgroup{left:calc(-9.375vw + -30px)}}
@media screen and (min-width: 1200px){.above-the-fold .hero .hgroup{left:-120px}}
@media screen and (min-width: 768px){.above-the-fold .hero h3{font-size:calc(.9375vw + 7px)}}
@media screen and (min-width: 1200px){.above-the-fold .hero h3{font-size:16px}}

.c1 {opacity: 0;animation-name: fade-in;animation-duration: 1s;animation-timing-function: ease-out;animation-delay: 1s;animation-iteration-count: 1;animation-direction: normal;animation-fill-mode: forwards;}
.c2 {opacity: 0;animation-name: fade-in;animation-duration: 1s;animation-timing-function: ease-out;animation-delay: 1.1s;animation-iteration-count: 1;animation-direction: normal;animation-fill-mode: forwards;}
.c3 {opacity: 0;animation-name: fade-in;animation-duration: 1s;animation-timing-function: ease-out;animation-delay: 1.2s;animation-iteration-count: 1;animation-direction: normal;animation-fill-mode: forwards;}
.c4 {opacity: 0;animation-name: fade-in;animation-duration: 1s;animation-timing-function: ease-out;animation-delay: 1.3s;animation-iteration-count: 1;animation-direction: normal;animation-fill-mode: forwards;}
.c5 {opacity: 0;animation-name: fade-in;animation-duration: 1s;animation-timing-function: ease-out;animation-delay: 1.4s;animation-iteration-count: 1;animation-direction: normal;animation-fill-mode: forwards;}
.c6 {opacity: 0;animation-name: fade-in;animation-duration: 1s;animation-timing-function: ease-out;animation-delay: 1.5s;animation-iteration-count: 1;animation-direction: normal;animation-fill-mode: forwards;}
.c7 {opacity: 0;animation-name: fade-in;animation-duration: 1s;animation-timing-function: ease-out;animation-delay: 1.6s;animation-iteration-count: 1;animation-direction: normal;animation-fill-mode: forwards;}
.c8 {opacity: 0;animation-name: fade-in;animation-duration: 1s;animation-timing-function: ease-out;animation-delay: 1.7s;animation-iteration-count: 1;animation-direction: normal;animation-fill-mode: forwards;}
.c9 {opacity: 0;animation-name: fade-in;animation-duration: 1s;animation-timing-function: ease-out;animation-delay: 1.8s;animation-iteration-count: 1;animation-direction: normal;animation-fill-mode: forwards;}
.c10 {opacity: 0;animation-name: fade-in;animation-duration: 1s;animation-timing-function: ease-out;animation-delay: 1.9s;animation-iteration-count: 1;animation-direction: normal;animation-fill-mode: forwards;}
.c11 {opacity: 0;animation-name: fade-in;animation-duration: 1s;animation-timing-function: ease-out;animation-delay: 2s;animation-iteration-count: 1;animation-direction: normal;animation-fill-mode: forwards;}
.c12 {opacity: 0;animation-name: fade-in;animation-duration: 1s;animation-timing-function: ease-out;animation-delay: 2.1s;animation-iteration-count: 1;animation-direction: normal;animation-fill-mode: forwards;}
.c13 {opacity: 0;animation-name: fade-in;animation-duration: 1s;animation-timing-function: ease-out;animation-delay: 2.2s;animation-iteration-count: 1;animation-direction: normal;animation-fill-mode: forwards;}
.c14 {opacity: 0;animation-name: fade-in;animation-duration: 1s;animation-timing-function: ease-out;animation-delay: 2.3s;animation-iteration-count: 1;animation-direction: normal;animation-fill-mode: forwards;}
.c15 {opacity: 0;animation-name: fade-in;animation-duration: 1s;animation-timing-function: ease-out;animation-delay: 2.4s;animation-iteration-count: 1;animation-direction: normal;animation-fill-mode: forwards;}
.c16 {opacity: 0;animation-name: fade-in;animation-duration: 1s;animation-timing-function: ease-out;animation-delay: 2.5s;animation-iteration-count: 1;animation-direction: normal;animation-fill-mode: forwards;}
.c17 {opacity: 0;animation-name: fade-in;animation-duration: 1s;animation-timing-function: ease-out;animation-delay: 2.6s;animation-iteration-count: 1;animation-direction: normal;animation-fill-mode: forwards;}
.c18 {opacity: 0;animation-name: fade-in;animation-duration: 1s;animation-timing-function: ease-out;animation-delay: 2.7s;animation-iteration-count: 1;animation-direction: normal;animation-fill-mode: forwards;}
.c19 {opacity: 0;animation-name: fade-in;animation-duration: 1s;animation-timing-function: ease-out;animation-delay: 2.8s;animation-iteration-count: 1;animation-direction: normal;animation-fill-mode: forwards;}
.c20 {opacity: 0;animation-name: fade-in;animation-duration: 1s;animation-timing-function: ease-out;animation-delay: 2.9s;animation-iteration-count: 1;animation-direction: normal;animation-fill-mode: forwards;}
.c21 {opacity: 0;animation-name: fade-in;animation-duration: 1s;animation-timing-function: ease-out;animation-delay: 3s;animation-iteration-count: 1;animation-direction: normal;animation-fill-mode: forwards;}
.c22 {opacity: 0;animation-name: fade-in;animation-duration: 1s;animation-timing-function: ease-out;animation-delay: 3.1s;animation-iteration-count: 1;animation-direction: normal;animation-fill-mode: forwards;}
.c23 {opacity: 0;animation-name: fade-in;animation-duration: 1s;animation-timing-function: ease-out;animation-delay: 3.2s;animation-iteration-count: 1;animation-direction: normal;animation-fill-mode: forwards;}
.c24 {opacity: 0;animation-name: fade-in;animation-duration: 1s;animation-timing-function: ease-out;animation-delay: 3.3s;animation-iteration-count: 1;animation-direction: normal;animation-fill-mode: forwards;}
.c25 {opacity: 0;animation-name: fade-in;animation-duration: 1s;animation-timing-function: ease-out;animation-delay: 3.4s;animation-iteration-count: 1;animation-direction: normal;animation-fill-mode: forwards;}
.c26 {opacity: 0;animation-name: fade-in;animation-duration: 1s;animation-timing-function: ease-out;animation-delay: 3.5s;animation-iteration-count: 1;animation-direction: normal;animation-fill-mode: forwards;}
@keyframes fade-in {0% {opacity: 0}100% {opacity: 1}}
dd p{font-weight: bold;}

@media only screen and (min-width: 1200px) {
.pc { display:block; }
.sp { display:none; }
.above-the-fold .hero{background:url(images/main_img.jpg) no-repeat center;background-size:cover;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;height:calc(100vh - 0px);margin-bottom:200px;position:relative;display: flex;justify-content: center;margin-top: -30px;}
.above-the-fold .hero .hgroup{font-size:25px;left:-60px;letter-spacing:0.2em;line-height:1.6;margin-top:-2.4em;position:absolute;top:100%}
.hero img{width: 671px; height: 891px;}
.above-the-fold .hero h2{margin-bottom:0.3em; font-family: 'Anton', sans-serif;font-size: 100px;color: #0799b9; font-style: oblique;letter-spacing: 0.1em;line-height: 1.15em;margin-top: -135px;}


h3{text-align: center; font-size: 36px;font-weight: bold;letter-spacing: 0.2em;margin-top: 150px;transform: scale(0.9, 1);line-height: 80%;}
h3 span{text-align: center; font-size: 18px;font-weight: bold;letter-spacing: 0.2em;margin-top: 30px;}

#blue{background-image: url(images/line_blue.png);background-repeat:no-repeat;}
#green{background-image:url(images/line_green.png); background-repeat:no-repeat;background-position:0% 80%;}

#news{width: 926px;margin-left: auto; margin-right: auto;border-bottom: solid 1px #b2b2b2; border-top: solid 1px #b2b2b2;display: flex; padding: 15px;margin-top: -100px;}
#sub{font-size: 12px; padding: 5px; background-color: #000; color: #fff;margin-left: 100px;}
.news_list{display: flex; font-size: 14px; letter-spacing: 0.2em;margin-left: 30px;margin-top: 3px;}
.news_list span{font-size: 12px; letter-spacing: 0.2em; color: #6e9b84;margin-top: 2px;}

#box-wrapper{letter-spacing:-6px; width: 1020px;margin: 40px auto;}
h5{display:inline-block;letter-spacing:normal;transform: skewX(-25deg);color: #fff;width: 38%;height: 7.5ex;font-size: 1.3em;padding: 87px 0px 0px 0px;margin-left: 6%;align-items: center;}
h5 div{transform: skewX(25deg);margin: 0 auto;text-align: center;position: relative;font-weight: bold;letter-spacing: 0.1em;}
.blue{background-color: #23b3d3;}
.green{background-color: #9eb939;}
.number{position: absolute;  bottom: -0.5em;  left: -0.15em;  opacity: 0.2;  font-style: oblique;  font-family: 'Anton', sans-serif;  letter-spacing: 0.05em;  font-size: 8em;}

.wrap-overview{width: 1000px;margin:0 auto; }
dl {display: -webkit-box;display: -ms-flexbox;display: flex;line-height: 1.5em;}
dl:nth-of-type(1) {margin-top: 60px;}
dt{width: 150px;-ms-flex-negative: 0;flex-shrink: 0;padding: 20px 20px 20px 0;border-top: solid 2px #21b3d3; font-weight: bold;letter-spacing: 0.2em;}
dd{-webkit-box-flex: 1;-ms-flex: 1 1 0px;flex: 1 1 0;padding: 20px 0 20px 30px;border-top: solid 2px #a2c522;font-weight: bold;letter-spacing: 0.2em;color: #000}

#employment p{text-align: center;margin-top: 2em;font-weight: bold;}

#access{width: 1200px; margin-left: auto;margin-right: auto;margin-bottom: -60px;}
#access p {font-weight: bold;font-size: 18px;text-align: center;margin-top: 20px;line-height: 180%;letter-spacing: 0.1em;}
.ggmap {position: relative;padding-bottom:30.25%;padding-top: 30px;height: 0;overflow: hidden;}
.ggmap iframe,.ggmap object,.ggmap embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.square_btn{display: inline-block;padding:0.8em 2em;text-decoration: none;background: -moz-linear-gradient(65deg, #21b3d3, #c1d969); background: -webkit-linear-gradient(65deg, #21b3d3, #c1d969); background: linear-gradient(25deg, #21b3d3, #c1d969);color: #fff;text-align: center;position: relative;top: -47px; letter-spacing: 0.2em; color: #fff;transition: all 0.3s;}
.square_btn:hover {opacity: 0.7;transition: all 0.3s;}
#access img{width: 18px; height: 16px;}

#contact p {font-weight: bold;font-size: 18px;text-align: center;margin-top: 20px;line-height: 180%;letter-spacing: 0.1em;}
#contact p.bold{font-family: 'Abel', sans-serif;font-size: 2em;font-weight: bold;color: #21b3d3;margin-top: 0;}
#contact img{width: 30px; height: 23px;}

footer{margin-top: 3em; background: -moz-linear-gradient(65deg, #21b3d3, #c1d969); background: -webkit-linear-gradient(65deg, #21b3d3, #c1d969); background: linear-gradient(25deg, #21b3d3, #c1d969);color: #fff;padding: 1em;text-align: center; font-family: 'Abel', sans-serif;font-size: 0.9em;}
}


@media only screen and (min-width:769px) and (max-width:1199px) {
.pc { display:block; }
.sp { display:none; }
h1 img{width: 108px;margin-top: -22px;margin-left: -16px;}
.above-the-fold .hero{background:url(images/main_img.jpg) no-repeat center;background-size:cover;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;height:calc(100vh - 140px);margin-bottom:200px;position:relative;display: flex;justify-content: center;margin-top: -30px;}
.above-the-fold .hero .hgroup{font-size:25px;left:-110px;letter-spacing:0.2em;line-height:1.6;margin-top:-2.4em;position:absolute;top:100%}
.hero img{width: 30em;}
.above-the-fold .hero h2{margin-bottom:0.3em; font-family: 'Anton', sans-serif;font-size: 69px;color: #0799b9; font-style: oblique;letter-spacing: 0.1em;line-height: 1.15em;margin-top: -109px;}
h3{text-align: center; font-size: 36px;font-weight: bold;letter-spacing: 0.2em;margin-top: 150px;transform: scale(0.9, 1);line-height: 80%;}
h3 span{text-align: center; font-size: 18px;font-weight: bold;letter-spacing: 0.2em;margin-top: 30px;}

#blue{background-image: url(images/line_blue.png);background-repeat:no-repeat;}
#green{background-image:url(images/line_green.png); background-repeat:no-repeat;background-position:0% 72%;}

#news{width: 678px;margin-left: auto; margin-right: auto;border-bottom: solid 1px #b2b2b2; border-top: solid 1px #b2b2b2;display: flex; padding: 15px;margin-top: -100px;}
#sub{font-size: 12px; padding: 10px 5px 5px 5px; background-color: #000; color: #fff;}
.news_list{display: flex; font-size: 14px; letter-spacing: 0.2em;margin-left: 30px;margin-top: 3px;}
.news_list span{font-size: 12px; letter-spacing: 0.2em; color: #6e9b84;margin-top: 6px;}

#box-wrapper{letter-spacing:-6px; width: 100%;margin: 40px auto;}
h5{display:inline-block;letter-spacing:normal;transform: skewX(-25deg);color: #fff;width: 38%;height: 7.5ex;font-size: 1.3em;padding: 87px 0px 0px 0px;margin-left: 8%;align-items: center;}
h5 div{transform: skewX(25deg);margin: 0 auto;text-align: center;position: relative;font-weight: bold;letter-spacing: 0.1em;}
.blue{background-color: #23b3d3;}
.green{background-color: #9eb939;}
.number{position: absolute;  bottom: -0.5em;  left: -0.15em;  opacity: 0.2;  font-style: oblique;  font-family: 'Anton', sans-serif;  letter-spacing: 0.05em;  font-size: 8em;}

.wrap-overview{width: 80%;margin:0 auto; }
dl {display: -webkit-box;display: -ms-flexbox;display: flex;line-height: 1.5em;}
dl:nth-of-type(1) {margin-top: 60px;}
dt{width: 150px;-ms-flex-negative: 0;flex-shrink: 0;padding: 20px 20px 20px 0;border-top: solid 2px #21b3d3; font-weight: bold;letter-spacing: 0.2em;}
dd{-webkit-box-flex: 1;-ms-flex: 1 1 0px;flex: 1 1 0;padding: 20px 0 20px 30px;border-top: solid 2px #a2c522;font-weight: bold;letter-spacing: 0.2em;color: #000}

#employment p{text-align: center;margin-top: 2em;font-weight: bold;}

#access{margin-left: auto;margin-right: auto;margin-bottom: -60px;}
#access p {font-weight: bold;font-size: 18px;text-align: center;margin-top: 20px;line-height: 180%;letter-spacing: 0.1em;}
.ggmap {position: relative;padding-bottom:30.25%;padding-top: 30px;height: 0;overflow: hidden;}
.ggmap iframe,.ggmap object,.ggmap embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.square_btn{display: inline-block;padding:0.8em 2em;text-decoration: none;background: -moz-linear-gradient(65deg, #21b3d3, #c1d969); background: -webkit-linear-gradient(65deg, #21b3d3, #c1d969); background: linear-gradient(25deg, #21b3d3, #c1d969);color: #fff;text-align: center;position: relative;top: -47px; letter-spacing: 0.2em; color: #fff;transition: all 0.3s;}
.square_btn:hover {opacity: 0.7;transition: all 0.3s;}
#access img{width: 18px; height: 16px;}

#contact p {font-weight: bold;font-size: 18px;text-align: center;margin-top: 20px;line-height: 180%;letter-spacing: 0.1em;}
#contact p.bold{font-family: 'Abel', sans-serif;font-size: 2em;font-weight: bold;color: #21b3d3;margin-top: 0;}
#contact img{width: 30px; height: 23px;}

footer{margin-top: 3em; background: -moz-linear-gradient(65deg, #21b3d3, #c1d969); background: -webkit-linear-gradient(65deg, #21b3d3, #c1d969); background: linear-gradient(25deg, #21b3d3, #c1d969);color: #fff;padding: 1em;text-align: center; font-family: 'Abel', sans-serif;font-size: 0.9em;}
}


@media only screen and (max-width:768px) {
.pc { display:none; }
.sp { display:block; }
h1 img{width: 73px;margin-top: -13px;margin-left: -16px;}
.above-the-fold .hero{background:url(images/main_img_sp.jpg) no-repeat center;background-size:cover;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;height:calc(77vh - 0px);margin-bottom:200px;position:relative;display: flex;justify-content: center;margin-top: -30px;}
.above-the-fold .hero .hgroup{font-size:23px;left:-72px;letter-spacing:0.2em;line-height:1.6;margin-top:-2.4em;position:absolute;top:100%}
.hero img{width: 16em;}
.above-the-fold .hero h2{margin-bottom:0.3em; font-family: 'Anton', sans-serif;font-size: 1.4em;color: #0799b9; font-style: oblique;letter-spacing: 0.1em;line-height: 1.15em;margin-top: -30px;}
h3{text-align: center; font-size: 2em;font-weight: bold;letter-spacing: 0.2em;margin-top: 3em;transform: scale(0.9, 1);line-height: 80%;}
h3 span{text-align: center; font-size: 0.5em;font-weight: bold;letter-spacing: 0.2em;margin-top: 1em;}

#blue{background-image: url(images/line_blue.png);background-repeat:no-repeat;}
#green{background-image:url(images/line_green.png); background-repeat:no-repeat;background-position:0% 72%;}

#news{width: 80%;margin-left: auto; margin-right: auto;border-bottom: solid 1px #b2b2b2; border-top: solid 1px #b2b2b2;display: flex; padding: 15px;margin-top: -160px;}
#sub{font-size: 12px; padding: 5px; background-color: #000; color: #fff;height: 13px;}
.news_list{font-size: 14px; letter-spacing: 0.2em;margin-left: 16px;}
.news_list span{font-size: 12px; letter-spacing: 0.2em; color: #6e9b84;margin-top: 2px;}

#box-wrapper{letter-spacing:-6px;margin: 2em auto;}
h5{display:inline-block;letter-spacing:normal;transform: skewX(-25deg);color: #fff;width: 80%;height: 7.5ex;font-size: 1.3em;padding: 87px 0px 0px 0px;margin-left: 10%;align-items: center;}
h5 div{transform: skewX(25deg);margin: -0.5em auto 0 auto;text-align: center;position: relative;font-weight: bold;letter-spacing: 0.1em;}
.blue{background-color: #23b3d3;}
.green{background-color: #9eb939;margin-top: 1em;}
.number{position: absolute;  bottom: -0.5em;  left: -0.15em;  opacity: 0.2;  font-style: oblique;  font-family: 'Anton', sans-serif;  letter-spacing: 0.05em;  font-size: 8em;}

.wrap-overview{width: 90%;margin:0 auto;font-size: 0.8em; }
dl {display: -webkit-box;display: -ms-flexbox;display: flex;line-height: 1.5em;}
dl:nth-of-type(1) {margin-top: 60px;}
dt{width: 6em;-ms-flex-negative: 0;flex-shrink: 0;padding: 20px 25px 20px 0;border-top: solid 2px #21b3d3; font-weight: bold;letter-spacing: 0.1em;}
dd{-webkit-box-flex: 1;-ms-flex: 1 1 0px;flex: 1 1 0;padding: 20px 0 20px 5px;border-top: solid 2px #a2c522;font-weight: bold;letter-spacing: 0.1em;color: #000}

#employment p{text-align: center;margin-top: 2em;font-weight: bold;}

#access{margin-left: auto;margin-right: auto;margin-bottom: -60px;}
#access p {font-weight: bold;font-size: 1em;text-align: center;margin-top: 20px;line-height: 180%;letter-spacing: 0.1em;}
.ggmap {position: relative;padding-bottom:63.25%;padding-top: 30px;height: 0;overflow: hidden;}
.ggmap iframe,.ggmap object,.ggmap embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.square_btn{display: inline-block;padding:0.8em 2em;text-decoration: none;background: -moz-linear-gradient(65deg, #21b3d3, #c1d969); background: -webkit-linear-gradient(65deg, #21b3d3, #c1d969); background: linear-gradient(25deg, #21b3d3, #c1d969);color: #fff;text-align: center;position: relative;top: -47px; letter-spacing: 0.2em; color: #fff;transition: all 0.3s;}
.square_btn:hover {opacity: 0.7;transition: all 0.3s;}
#access img{width: 18px; height: 16px;}

#contact p {font-weight: bold;font-size: 1em;text-align: center;margin-top: 20px;line-height: 180%;letter-spacing: 0.1em;}
#contact p.bold{font-family: 'Abel', sans-serif;font-size: 2em;font-weight: bold;color: #21b3d3;margin-top: 0;}
#contact img{width: 30px; height: 23px;}

footer{margin-top: 3em; background: -moz-linear-gradient(65deg, #21b3d3, #c1d969); background: -webkit-linear-gradient(65deg, #21b3d3, #c1d969); background: linear-gradient(25deg, #21b3d3, #c1d969);color: #fff;padding: 1em;text-align: center; font-family: 'Abel', sans-serif;font-size: 0.9em;}
}


.head_contents{position: fixed;right: 0;top: 0;z-index: 999;}
@media only screen and (min-width:1200px) {
.menu ul {display: flex;justify-content: flex-end;align-items: center;height: 70px;background: #fff;text-align: center;z-index: 99;padding:0 20px}
.menu ul li {padding: 0 20px;letter-spacing: 0.2em;font-size:16px;transform: scale(0.9, 1);}
.menu ul li span {font-size:11px;letter-spacing: 0.1em;}
.menu ul li a {position: relative;display: inline-block;text-decoration: none;color: #206774;}
.menu ul li a:after {position: absolute;bottom: -4px;left: 0;content: '';width: 100%;height: 1px;background: #206774;transform: scale(0, 1);transform-origin: left top;transition: transform .3s;}
.menu ul li a:hover::after {transform: scale(1, 1);}
}
.menubutton{list-style: none;}

.menu-trigger,
.menu-trigger span {display: block;  position: fixed;  z-index: 11;  top: 0;  right: 0;  background: #fff;  border: none;}
.menu-trigger {margin-right: -4px;width: 17px;height: 8px;z-index: 999;}
.menu-trigger span {position: absolute;  left: 0;  width: 100%; height: 2px;left:10px;width:18px; border-radius: 4px;  background: #21b3d3;  transition: all .5s;}
.menu-trigger span:nth-of-type(1) {top: 13px;}
.menu-trigger span:nth-of-type(2) {top: 21px;}
.menu-trigger span:nth-of-type(3) {top: 29px;}

.menu-trigger.active span:nth-of-type(1) {-webkit-transform: translateY(17px) rotate(-45deg);transform: translateY(17px) rotate(-45deg);width: 28px;left: 8px;top: 1px;}
.menu-trigger.active span:nth-of-type(2) {opacity: 0;}
.menu-trigger.active span:nth-of-type(3) {-webkit-transform: translateY(-12px) rotate(45deg);transform: translateY(-12px) rotate(45deg);width: 28px;left: 8px;top: 30px;}

.MenuList{}
.MenuList li{display: inline-block;}
#slide_menu{position: fixed;top: 28px;right: -240px;width: 240px;height: 100%;z-index: 997;}

.menubutton{padding: 20px;letter-spacing: 0.2em;font-size:16px;transform: scale(0.9, 1);text-align: center;}
.menubutton span {font-size:11px;letter-spacing: 0.1em;width: 24px;left: 16px;}
.menubutton a {position: relative;display: inline-block;text-decoration: none;color: #206774;}
.menubutton a:after {position: absolute;bottom: -4px;left: 0;content: '';width: 100%;height: 1px;background: #206774;transform: scale(0, 1);transform-origin: left top;transition: transform .3s;}
.menubutton a:hover::after {transform: scale(1, 1);}


.hamburger{position: relative;}

@media (max-width: 1200px) {
.head_contents{ width: 100%; height: 65px;}
.logoPc,.MenuList{ display: none;}
.br-sp-no{display: none!important;}.br{display:inline!important;}
}

@media (min-width: 1200px) {
.logoSp,.hamburger{display: none;}
}