@charset "UTF-8";

html,body{
width:100%;
height:100%;
}

img{ 
vertical-align:middle;
width: 100%;
height: auto;
}

body{ background-color: #f6f6f6; }

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

body{ 
letter-spacing:0.05em;
}

}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

/*----------------------------------------------------------------------------------------------------------------------body_fadein----------*/


body{
    animation: bodyFadeIn 3s ease 0s 1 normal;
    -webkit-animation: bodyFadeIn 3s ease 0s 1 normal;
}

@keyframes bodyFadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes bodyFadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}


/*----------------------------------------------------------------------------------------------------------------------header----------*/

header{ 
position:fixed;
top:0;
width: 100%;
z-index:100;
padding: 0 4.16%;
}

header h1{
margin-top:50px;
width:9%;
line-height:1;
}

header h2{
margin-top:32px;
width:9%;
}

header p#intro{
margin-top:36px;
font-size: clamp(10px,1vw,13px);
line-height: 1.9;
}

header .insta{
margin-top:45px;
width:1.8%;
}

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

header{ padding: 0 5%; }

header h1{
margin-top:30px;
width:25%;
}

header h2{
margin-top:32px;
width:25%;
}

header p#intro{
margin-top:36px;
font-size:11px;
}

header .insta{
margin-top:30px;
width:22px;
}

}

/*----------------------------------------------------------------------------------------------------------------------#sp_menu----------*/

#sp_box{ 
display:block;
width:100%;
position: absolute;
top:0;
right:0;
}

.slide_in { animation: slideIn 1s cubic-bezier(0.19, 1, 0.22, 1); }

@keyframes slideIn {
0% {
transform: translateX(10px);
opacity: 0;
}
100% { transform: translateX(0); }
40%,100% { opacity: 1; }
}

.menu_btn {
width:50px;
height:50px;
overflow:visible;
cursor:pointer;
position:absolute;
top:30px;
right:4.16%;
z-index:9999;
margin-right: -25px;
}

.menu_btn .line {
position:absolute;
background-color:#333;
overflow:hidden;
width:25px;
height:2px;
left:0;
-webkit-transition: all 400ms ease-out 0ms;
-moz-transition: all 400ms ease-out 0ms;
-o-transition: all 400ms ease-out 0ms;
transition: all 400ms ease-out 0ms;
}

.menu_btn .line:nth-child(1) {
top:21px;
right:0;
}

.menu_btn .line:nth-child(2) {
bottom:21px;
right:0;
}

.btn_wrapper.clicked .menu_btn .line:nth-child(1) {
-webkit-transform: translateY(3px) rotate(45deg);
transform: translateY(3px) rotate(45deg);
-webkit-transition: all 400ms ease-out 0ms;
-moz-transition: all 400ms ease-out 0ms;
-o-transition: all 400ms ease-out 0ms;
transition: all 400ms ease-out 0ms;
background-color:#fff;
}

.btn_wrapper.clicked .menu_btn .line:nth-child(2) {
-webkit-transform: translateY(3px) rotate(-45deg);
transform: translateY(-3px) rotate(-45deg);
-webkit-transition: all 400ms ease-out 0ms;
-moz-transition: all 400ms ease-out 0ms;
-o-transition: all 400ms ease-out 0ms;
transition: all 400ms ease-out 0ms;
background-color:#fff;
}

#sp_menu{ position:relative; }

#sp_menu nav {
position: fixed;
width: 50%;
height: 100%;/*100vh*/
top: 0;
left:50%;
display:none;
z-index:99;
overflow-y: auto;
background: rgba(0,0,0,0.8); 
}

#sp_menu nav a { color:#333; }

#nav_cont{
position:relative;
top:24%;
left:16.6%;
width:66.6%;
}

.nav_menu{ width:100%; }

#site_tit_menu{ width:20%; }

#site_logo_menu{ 
width:25%;
margin-top:30px;
}

#gnav_sp li {
font-size:16px;
margin-top:25px;
letter-spacing: 0.05em;
line-height: 1;
}

#gnav_sp li:first-child { margin-top:55px; }

#gnav_sp li a{ color:#fff; }

#insta_menu{
width:25px;
margin-top: 55px;
}

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


.menu_btn {
top:15px;
right:5%;
}

#sp_menu nav {
width: 90%;
left:10%;
}

#nav_cont{ top:22%; }

#site_tit_menu{ width:30%; }

#site_logo_menu{ 
width:40%;
margin-top:30px;
}

#gnav_sp li { 
margin-top:22px;
font-size:15px;
letter-spacing: 0.1em;
}

#gnav_sp li:first-child { margin-top:50px; }

#insta_menu{
width:22px;
margin-top: 50px;
}

}


/*----------------------------------------------------------------------------------------------------------------------footer----------*/

footer{ 
position:fixed;
bottom:56px;
width: 100%;
padding: 0 4.16%;
font-size: clamp(10px,1vw,12px);
}

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

footer{ 
font-size: 11px; 
bottom:36px;
}

}




/*----------------------------------------------------------------------------------------------------------------------共通要素----------*/

.br_pc{ display:inline; }

.br_sp{ display:none; }

.mincho{ font-family: Times, YuMincho, "Yu Mincho", serif; }


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

.br_pc{ display:none; }

.br_sp{ display:inline; }

}