@charset "UTF-8";
/* CSS Document */

@font-face {
font-family: 'Billabong';
src: url("../webfonts/Billabong.ttf");
}

html {
font-size: 62.5%;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 16px;
font-size: 1.6rem;
color: #474645;
font-family: "Noto Sans JP", YuGothic, "Hiragino Kaku Gothic Pro", Meiryo,'Montserrat','Roboto Condensed', "sans-serif";
background: #FFF;
margin: 0;
}
img{
width:100%;
max-width: 100%;
height: auto;
vertical-align: bottom;
}
video, iframe {
width: 100%;
height: 100%;
vertical-align: bottom;
}
a {
text-decoration: none;
color: #585655;
}
a:hover {
text-decoration: none;
color: #585655;
}
i {
font-size: 1.0em;
}
p {
word-break: break-all;
}
a.btn {
display: block;
border: 1px solid #b5b5b6;
border-radius: 30px;
text-align: center;
width: 100%;
max-width: 230px;
padding: 15px 0;
font-size: 14px;
font-size: 1.4rem;
letter-spacing: 0.3rem;
}
a.btn:after {
content: "";
display: inline-block;
width: 50px;
height: 5px;
margin-bottom: 5px;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
transform: skew(45deg);
margin-left: 5px;
}
.bottom-fi.isActive {
opacity: 1;
transform: translateY(0);
}
.line.bottom-fi.isActive {
opacity: 1;
transform: translate(-50%,0);
}
.bottom-fi {
opacity: 0;
transform: translateY(40px);
transition: .6s;
}
.line.bottom-fi-line {
opacity: 0;
transform: translate(0,40px);
transition: .6s;
}
/*--------------------
header
--------------------*/
#header {
position: fixed;
top: 0;
z-index: 10000;
background: #fff;
transition: 1.0s;
}
#logo{
background: #005726;
}
/*--------------------
#footer
--------------------*/
#footer{
background: #005726;
}
#footer .event{
color: #005726;
background: #fff;
}
#footer h2{
letter-spacing: 0.2rem;
font-weight: 600;
}
#footer .btn{
color: #fff;
background: #005726;
border-radius: 50px;
max-width: 280px;
}
#footer .btn:last-of-type:after {
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
}
#footer small{
color: #fff;
}



@media (max-width: 560px){
.box{
margin: 40px auto;
width: 90%
}	
/*--------------------
header
--------------------*/
#header {
width: 100%;
height: 65px;
}
#logo {
width: 75px;
}
#logo img{
display: block;
margin: 0 auto;
width: 50px;
height: 65px;
}
.el_humburger {
position: absolute;
top: 20px;
right: 5%;
width: 33px;
height: auto;
padding-top: 1px;
box-sizing: border-box;
z-index: 10000;
transition: all 0.2s ease-in-out;
cursor: pointer;
pointer-events: auto;
}
.el_humburger > span {
display: block;
width: 100%;
margin: 0 auto 8px;
height: 3px;
background: #000;
transition: all 0.2s ease-in-out;
}
.el_humburger > span:last-child {
margin-bottom: 0;
}
.js_humburgerOpen .el_humburger > span {
background: #000;
}
.js_humburgerOpen .el_humburger > span.top {
transform: translateY(11px) rotate(-45deg);
}
.js_humburgerOpen .el_humburger > span.middle {
opacity: 0;
}
.js_humburgerOpen .el_humburger > span.bottom {
transform: translateY(-11px) rotate(45deg);
}
.uq_spNavi {
display: none;
}
.uq_spNavi.js_appear {
position: fixed;
top: 0;
bottom: 0;
right: 0;
display: block;
background: #fff;
z-index: 9999;
}	
#uq_spNavi {
padding-bottom: 10px;
font-size: 1.5rem;
padding-top: 30px;
width: 70%;
color: #111;
}
#uq_spNavi a {
text-decoration: none;
color: #111;
}
#uq_spNavi a:hover {
color: #999;
}
.main_menu{
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
display: block;
position: relative;
width: 280px;
}
#header .main_menu.drop:after{
display: inline-block;
content: "\f0dd";
font-family: "Font Awesome 5 Free";
font-size: 2.0rem;
font-weight: 600;
padding-left: 5px;
color: #585655;
}
#menu .open::before {
-ms-transform: rotate(315deg);
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
margin-top: -3px;
}
#menu .main_menu:hover a ,#menu .open {
color: #999;
}
.sub_menu li a{
padding-top: 10px;
padding-bottom: 10px;
text-indent: 40px;
display: block;
position: relative;
}
.sub_menu li a:hover{
color: #999;
}
.sub_menu li a:hover::before {
border-left: solid 6px #ffffff;
}
.third_menu li a{
padding-left: 40px;
border-top-style: none;
padding-bottom: 6px;
padding-top: 6px;   
}
.third_menu li a::before{
margin-left: 65px;
}
/*--------------------
#footer
--------------------*/
#footer{
padding: 50px 0 20px;
}
#footer .box{
margin: 0 auto;
width: 90%
}
#footer .box > div{
padding-bottom: 50px;
}
#footer .logo{
width: 40%;
margin: 0 auto;
padding-bottom: 40px;
}
#footer .event{
align-items: center;
padding: 20px;
}
#footer h2{
font-size: 2.2rem;
text-align: center;
padding-bottom: 15px;
}
#footer p{
font-size: 1.4rem;
padding-bottom: 25px;
}
#footer .btn{
margin: 0 auto;
padding: 15px 0;
}
#footer nav{
display: none;
}
#footer small{
font-size: 1.0rem;
display: block;
text-align: center;
}
}


@media (min-width: 561px){
.sp{
display: none;
}
/*--------------------
header
--------------------*/
#logo img{
display: block;
margin: 0 auto;
}
#uq_spNavi {
padding-bottom: 10px;
font-size: 15px;
font-size: 1.5rem;
}
.main_menu{
display: block;
position: relative;
}
#menu .open::before {
-ms-transform: rotate(315deg);
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
margin-top: -3px;
}
#header .sub_menu li a{
font-size: 1.4rem;
text-indent: 30px;
display: block;
position: relative;
}
.third_menu li a{
padding-left: 40px;
border-top-style: none;
padding-bottom: 6px;
padding-top: 6px;   
}
.third_menu li a::before{
margin-left: 65px;
}	
/*--------------------
#footer
--------------------*/	
#footer .box > div{
display: flex;
justify-content: space-around;
align-items: center;
}
#footer .event{	
align-items: center;
}
#footer p{
font-size: 14px;
font-size: 1.4rem;
}
}



@media (min-width: 561px) and (max-width: 1024px){
main .box{
margin: 60px auto;
width: 90%
}
/*--------------------
header
--------------------*/
#header {
width: 100%;
height: 100px;
}
#logo {
width: 100px;
height: 100px;
}
#logo img{
width: 80px;
height: 100px;
}
/*------humburger------*/
.el_humburger {
position: absolute;
top: 33px;
right: 3%;
width: 50px;
height: auto;
padding-top: 1px;
box-sizing: border-box;
z-index: 10000;
transition: all 0.2s ease-in-out;
cursor: pointer;
pointer-events: auto;
}
.el_humburger > span {
display: block;
width: 45px;
margin: 0 auto 13px;
height: 3px;
background: #000;
transition: all 0.2s ease-in-out;
}
.el_humburger > span:last-child {
margin-bottom: 0;
}
.js_humburgerOpen .el_humburger > span {
background: #000;
}
.js_humburgerOpen .el_humburger > span.top {
transform: translateY(15px) rotate(-45deg);
}
.js_humburgerOpen .el_humburger > span.middle {
opacity: 0;
}
.js_humburgerOpen .el_humburger > span.bottom {
transform: translateY(-15px) rotate(45deg);
}
.uq_spNavi {
display: none;
}
.uq_spNavi.js_appear {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 50%;
display: block;
background: #fff;
z-index: 9999;
}
#header #uq_spNavi {
padding-top: 100px;
width: 40%;
color: #111;
}
#header #uq_spNavi a {
text-decoration: none;
color: #111;
}
#header #uq_spNavi a:hover {
color: #999;
}
#header .main_menu{
padding: 20px 0 20px 50px;
text-indent: 10;
width: 280px;
}
#menu .main_menu:hover a ,#menu .open {
color: #999;
}
#header .sub_menu li a{
padding: 20px 0 20px 30px;
}
#header .sub_menu li a:hover{
color: #999;
}
#header .sub_menu li a:hover::before {
border-left: solid 6px #ffffff;
}
/*--------------------
#footer
--------------------*/	
#footer{
padding: 50px 0 20px;
}
#footer .box{
margin: 0 auto;
width: 90%
}
#footer .box > div{
padding-bottom: 50px;
}
#footer .logo{
width: 20%;
}
#footer .event{	
width: 65%;
padding: 30px 20px;
}
#footer h2{
font-size: 30px;
font-size: 3.0rem;
text-align: center;
padding-bottom: 10px;
}
#footer p{
padding-bottom: 20px;
}
#footer .btn{
padding: 15px 0;
margin: 0 auto;
}
#footer nav{
display: none;
}
#footer small{
font-size: 10px;
font-size: 1.0rem;
display: block;
text-align: center;
}
}



@media (min-width: 1025px){
main .box{
margin: 80px 3% 80px auto;
width: calc(97% - 250px);
}
/*--------------------
header
--------------------*/
#header{
width: 250px;
height: 120vh;
}
#logo img{
width: 70%;
height: 200px;
}	
#uq_spNavi {
padding-top: 50px;
color: #474645;
}
#header.top{
background-color: transparent;
}
#header .main_menu{
padding-top: 15px;
padding-bottom: 15px;
padding-left: 20px;
}
#header .main_menu.drop:after{
display: inline-block;
content: "\f0dd";
font-family: "Font Awesome 5 Free";
font-size: 24px;
font-size: 2.4rem;
font-weight: 600;
padding-left: 10px;
color: #585655;
}
#header .sub_menu li a{
padding: 10px 0 10px 5px;
}
#header .sub_menu li a:before{
position: absolute;
left: -5px;
content: "-";
display: inline-block;
}
#header.top #uq_spNavi,
#header.top .main_menu,
#header.top .main_menu.drop:after{
color: #fff;
transition: 1.0s;
}
#header.change-color{
background: #fff;
color: #999;
transition: 1.0s;
}
#header.top.change-color #uq_spNavi,
#header.top.change-color .main_menu,
#header.top.change-color .main_menu.drop:after{
color: #474645;
transition: 1.0s;
}
/*--------------------
#footer
--------------------*/
#footer{
padding: 80px 0 50px;
}
#footer .box{
margin: 0 3% 0 auto;
width: calc(97% - 220px);
}
#footer .box > div{
padding-bottom: 70px;
}
#footer .logo{
width: 15%;
padding: 0 5%;
}
#footer .event{
display: flex;
justify-content: space-around;
width: 75%;
max-width: 700px;
padding: 30px;
}
#footer .event div{
width: 50%;
}
#footer h2{
font-size: 33px;
font-size: 3.3rem;
padding-bottom: 10px;
}
#footer .btn{
padding: 25px 0;
width: 45%;
}
#footer nav {
display: flex;
justify-content: space-between;
color: #fff;
padding-bottom: 180px;
}
#footer nav > div {
text-align: center;
font-size: 50px;
font-size: 5rem;
width: 15%;
padding: 0 5%;
}
#footer nav > div a{
color: #fff;
}
#footer .insta{
padding-right: 10%;
}
#footer nav a:hover{
color: #fff;
}	
#footer nav > ul{
display: flex;
flex-wrap: wrap;
width: 75%;
max-width: 760px;
}
#footer nav ul > li {
position: relative;
padding: 0 30px 30px 0;
}
#footer nav ul li a,
#footer nav ul li:nth-child(3),
#footer nav ul li:nth-child(4) {
display: block;
color: #fff;
line-height: 1;
}
#footer nav .sub_menu {
position: absolute;
top: 100%;
left: -2px;
z-index: 2;
}
#footer nav .sub_menu li {
background: #135726;
width: 100%;
font-size: 1.4rem;
padding-left: 20px;
padding-bottom: 20px;
}
#footer nav ul > li:nth-child(5) li:last-of-type a {
line-height: 1.6em;
}
#footer nav .sub_menu li:before {
position: absolute;
content: "-";
display: block;
left: 5px;
}
#footer small{
font-size: 12px;
font-size: 1.2rem;
padding-left: 10%;
}
}