@charset "UTF-8";

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

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

body{ background-color: #f8f7f4; }

@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;
}


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

header{
width:100%;
height:100px;
margin: 0 auto;
position: fixed;
top:0;
left:0;
z-index:1;
}

header h1{
width:16.6%;
position: absolute;
left:41.7%;
top:40px;
}

#gnav{
position:absolute;
right:4.1%;
top:50px;
}

#gnav ul{
display: flex;
align-items: center;
font-size: 18px;
}

#gnav ul:last-child{
justify-content: flex-end;
}

#gnav ul li a{
transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1);
opacity: 1;
}

#gnav ul li a:hover{ opacity: 0.5; }

#gnav ul:last-child li a{ border-bottom: 1px solid #333; }


#gnav ul li{ margin-left: 15px; }

#gnav ul li:first-child{ margin-left:0px; }

/*スクロール後 ここから*/
.headerCommon{ 
transition: all 0.5s 0s cubic-bezier(0.23,1,0.32,1);
background:rgba(248,247,244,0);
backdrop-filter: blur(30px);
}

.headerCommon h1{
transition: all 0.5s 0s cubic-bezier(0.23,1,0.32,1);
width:10%;
left:45%;
top:20px;
}

.headerCommon #gnav{
transition: all 0.5s 0s cubic-bezier(0.23,1,0.32,1);
top:20px;
}

/*ここまで*/

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

header h1{
width:24%;
left:38%;
top:27px;
}

/*スクロール後 ここから*/
.headerCommon{ 
transition: all 0.5s 0s cubic-bezier(0.23,1,0.32,1);
background:rgba(248,247,244,0);
backdrop-filter: blur(30px);
}

.headerCommon h1{
transition: all 0.5s 0s cubic-bezier(0.23,1,0.32,1);
width:24%;
left:38%;
top:24px;
}

#gnav{ display: none; }

}

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

header h1{
width:33.4%;
left:33.3%;
top:27px;
}

}



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

.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; }
}

#sp_box{ display:block; }

.btn_wrapper {
position:fixed;
z-index:9999;
width:50px;
height:50px;
top:30px;
left:4.1%;
transition: all 0.5s 0s cubic-bezier(0.23,1,0.32,1);
}

.scrolled .btn_wrapper {
top:15px;
}

.menu_btn {
width:50px;
height:50px;
overflow:visible;
cursor:pointer;
position:absolute;
top:0;
right:0;
z-index:1000;
}

.menu_btn .line {
position:absolute;
background-color:#333;
overflow:hidden;
width:50px;
height:1px;
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:22px;
left:50%;
margin-left:-25px;
}

.menu_btn .line:nth-child(2) {
bottom:22px;
left:50%;
margin-left:-25px;
}

.btn_wrapper.clicked .menu_btn .line:nth-child(1) {
-webkit-transform: translateY(1px) rotate(45deg);
transform: translateY(1px) 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:#333;
}

.btn_wrapper.clicked .menu_btn .line:nth-child(2) {
-webkit-transform: translateY(4px) rotate(-45deg);
transform: translateY(-4px) 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:#333;
}

#sp_menu{ position:relative; }

#sp_menu nav {
position: fixed;
width: 50%;
height: 100%;/*100vh*/
top: 0;
left:0;
display:none;
z-index:99;
overflow-y: auto;
background: rgba(0, 0, 0, 0);
backdrop-filter: blur(50px);
-webkit-backdrop-filter: blur(50px); /* Safari対応 */
}

#sp_menu nav a { color:#333; }

#nav_cont{
position:relative;
top:18%;
left:63%;
width:37%;
overflow-x: hidden;
}

.nav_menu{ width:100%; }

#gnav_sp li {
font-size:32px;
width:100%;
margin-top:0;
letter-spacing: 0.05em;
line-height: 2.2;
}

#gnav_sp li.small{ font-size:18px; }

.copy_right_sp{
position:absolute;
bottom:55px;
left:8.2%;
font-size:14px;
color:#333;
}


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

.btn_wrapper {
top:30px;
left:5%;
}

.scrolled .btn_wrapper { top:20px; }

.menu_btn {
width:50px;
height:50px;
overflow:visible;
cursor:pointer;
position:absolute;
top:0;
right:0;
z-index:1000;
}

.menu_btn .line { width:40px; }

#nav_cont{
position:relative;
top:13%;
left:55%;
width:45%;
}

.nav_menu{ width:100%; }

#sp_menu nav { width: 95%; }


#gnav_sp li {
font-size:30px;
line-height:2;
}

#gnav_sp li.small{ font-size:15px; }

.copy_right_sp{
bottom:30px;
left:8.2%;
font-size:12px;
}

}



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

footer{
width:100%;
background-color: #f2f1ec;
margin-top: 260px;
padding: 65px 0 90px 0;
position: relative;
}

footer h1{
width:13.8%;
position: absolute;
left:43.1%;
top:60px;
z-index: 1;
}

#cont_footer {
width:83.4%;
margin: 170px auto 0 auto;
display: flex;
justify-content: space-between;
font-size: 18px;
}

#cont_footer .info{ width:40%; }

#cont_footer .info span{ font-size: 14px; }

#cont_footer .box_menu{ width:60%; }

#cont_footer .box_menu nav ul{
display: flex;
justify-content: flex-end;
}

#cont_footer .box_menu nav ul li{
margin-right: 18px;
position:relative;
line-height: 1.2;
}

#cont_footer .box_menu nav ul li:last-child{ margin-right:0px; }

#cont_footer .box_menu nav ul li:nth-child(5){ margin-right: 36px; }

#cont_footer .box_menu nav ul li:nth-child(5)::after{
content: "/";
position: absolute;
bottom: -3px; 
right: -22px;
color: #333;
}

#cont_footer .box_menu nav ul li a{
color: #333;
opacity: 1;
transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1);
display: block;
}

#cont_footer .box_menu nav ul li a:hover{ opacity: 0.5; }

#cont_footer .box_menu nav ul li:nth-child(6) a, 
#cont_footer .box_menu nav ul li:nth-child(7) a{
border-bottom: 1px solid #333;
transition: all 0.75s cubic-bezier(0.19, 1, 0.22, 1);
}
#cont_footer .box_menu small{ 
font-size: 18px;
margin-top: 10px;
display: block;
text-align: right;
}

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

footer{
width:100%;
margin-top: 140px;
padding: 60px 0 80px 0;
}

footer h1{
width:20%;
left:40%;
top:60px;
}

#cont_footer {
width:90%;
margin: 120px auto 0 auto;
display:block;
font-size: 15px;
}

#cont_footer .info{ width:100%; }

#cont_footer .info span{ font-size: 14px; }

#cont_footer .box_menu{ width:100%; }

#cont_footer .box_menu nav ul{display: none }

#cont_footer .box_menu small{ 
font-size: 12px;
margin-top: 20px;
text-align: left;
}

}

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

footer{
width:100%;
margin-top: 100px;
padding: 60px 0 90px 0;
}

footer h1{
width:26%;
left:37%;
top:60px;
}

#cont_footer {
margin: 110px auto 0 auto;
}

}

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

#content{
margin: 330px auto 0;
width:83.4%;
}

#content h2{
border-bottom: 1px dotted #c6c6c3;
font-size: 40px;
line-height: 1.8;
}

#content h2 span{
padding-left: 15px;
font-size: 15px;
}

.br_pc{ display:inline; }
.br_sp{ display:none; }

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

.br_pc{ display:none; }
.br_sp{ display:inline; }

#content{
margin: 175px auto 0;
width:90%;
}

#content h2{ font-size: 28px; }

#content h2 span{
padding-left: 10px;
font-size: 13px;
}

}