@charset "utf-8";

/* スクロールさせない */
body.menu-open {
position: fixed;
width: 100%;
overflow: hidden;
}

#drawer-menu-zentai{
position: fixed;
z-index: 9990;
top: 0;
left: 0;
margin: 0;
padding: 0;
}

#content_area{
position: relative;
width:100%;
margin:0;
padding:0;
background: none;
border: none;
}

/* SPの画像とナビ */
#layout_tyousei{
position: fixed;
z-index: 99;
top: 0;
left: 0;

width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
/* 初期状態は非表示 */
visibility: hidden;
opacity: 0;
transition: opacity 0.3s, visibility 0.3s;
}

/* .is-open クラスが付与されたら表示 */
#drawer-menu-zentai.is-open #layout_tyousei{
visibility: visible;
opacity: 1;
}

/* ロゴ */
.logo_menu_2024{
position: absolute;
top: 15px;
left: 15px;
width: auto;
text-align: left;
}
.logo_menu_2024 img{
width: 15vw;
height: auto;
}

/* ナビ 基本 SP */
.nav_sp{
position: relative;
display: flex; /* 天地中央揃え */
align-items: center;
z-index: 4;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

.nav_sp_layout{
position: relative;
width: 200px;
height: auto;
margin: 0 auto;
padding: 0;
}

.nav_sp ul{
position: relative;
display: inline-block;
width: 100%;
margin: 0 auto;
padding: 0;
}

.nav_sp ul li{
position: relative;
margin: 0 0 33px 0;
padding: 0;
width: 100%;
height: auto;
text-align: center;
-webkit-tap-highlight-color:rgba(0,0,0,0);
user-select:none;
-webkit-user-select:none;
-ms-user-select: none;
-moz-user-select:none;
font-family: neue-haas-grotesk-display, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 20px;
letter-spacing: 0.0em;
}

.nav_sp ul li:last-child{
margin: 0 0 0 0;
}

.nav_sp ul li img{
width: 100%;
height: auto;
user-select:none;
-webkit-user-select:none;
}

.nav_sp ul li a{
position: relative;
-webkit-tap-highlight-color:rgba(0,0,0,0);
width: auto;
color: #fff;
}


#layout_tyousei .copyright_menu2024{
position: absolute;
bottom: 10px;
left: 0;
z-index: 99;
width: 100%;
text-align: center;
user-select: none;
-webkit-user-select: none;
}

#layout_tyousei .copyright_menu2024 img{
width: 50px;
height: auto;
}

/* 背景 */
#layout_tyousei .menu_bg{
pointer-events: none;
position: absolute;
z-index: 1;
opacity: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}


.menu-btn-wrapper{
position: fixed;
z-index: 1;
top: 0;
right: 10px;
width: 100px;
height: 60px;
}


.menu-btn{
display: block;
cursor: pointer;

margin: 0;
padding: 0;

width: 100%;
height: 100%;

-webkit-tap-highlight-color:rgba(0,0,0,0);
background: none;
border: none;
}

/* メニューを開いているときは開くボタンを非表示に */
#drawer-menu-zentai.is-open .menu-btn{
opacity: 0;
visibility: hidden;
}

.bar-top{
position: absolute;
top: 25px;
right: 0;
display: block;
width: 60px;
height: 1px;

background: #000;

transition: all .3s .0s ease-in-out;
transform-origin: right;
transform: scaleX(1);
opacity: 1;
}

.bar-top.kesu{
transition: all .0s .1s ease-in-out;
transform: scaleX(0);
opacity: 0;
}

.bar-bottom{
position: absolute;
width: 60px;
height: 1px;
top: 32px;
right: 0;
background: #000;

transition: all .3s .0s ease-in-out;
transform-origin: right;
transform: scaleX(1);
opacity: 1;
}

.bar-bottom.kseu02{
transition: all 0s .1s ease-in-out;
transform: scaleX(0);
opacity: 0;
}


/* 閉じるボタン */
.menu_close{
display: none; /* JSで制御 */
position: fixed;
cursor: pointer;
z-index:100;
top: 0;
right:0;
width: 60px;
height: 60px;
/* buttonのデフォルトスタイルをリセット */
background: none;
border: none;
}

/*タップエリアを拡張できます。*/
.menu_close::after {
content: '';
position: absolute;
/* 上下左右にタップエリア領域を広げる */
top: -10px;
right: -10px;
bottom: -60px;
left: -60px;
}

/* メニューが開いているときに表示 */
#drawer-menu-zentai.is-open .menu_close{
display: block;
pointer-events: auto;
z-index: 9999;
}


.menu_close .bar02_top{
position: absolute;
display: block;
top: 15px;
right: 3px;
width: 33px;
height: 1px;
background: #fff;
transform:rotate(45deg) scale(1);
transform-origin: center left;
transition-timing-function:cubic-bezier(.91,-0.01,.08,.99);
}

.menu_close .bar02_bottom{
position: absolute;
top: 38px;
right: 3px;
display: block;
width: 33px;
height: 1px;
background: #fff;
transform:rotate(-45deg) scale(1);
transform-origin: center left;
transition-timing-function:cubic-bezier(.91,-0.01,.08,.99);
}

/* スマホ 画像ビューワー */
.sp_bg_black{
display: block;
position: absolute;
z-index: 3;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100vw;
height: 100%;
opacity: 0.4;
background: #000;
}

#inter01{
position: absolute;
z-index: 2;
top: 0;
left: 0;
opacity: 0;
width: 100vw;
height: 100%;
margin: 0;
padding:0;
will-change: opacity;
background: #fff;
}

.inter01 ul.imageviewer{
position: absolute;
z-index: 1;
width: 100vw;
height: 100%;
text-align: left;
margin: 0;
padding:0;
overflow: hidden;
}

.inter01 ul.imageviewer li{
position: absolute;
z-index: 1;
width: 100vw;
height: 100%;
margin: 0;
padding: 0;
top: 0;
left: 0;
overflow: hidden;
opacity: 0;
will-change: transform, opacity;
}

.inter01 ul.imageviewer li .photo_zone{
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100%;
will-change: transform, opacity;
}

.inter01 ul.imageviewer li .photo_zone img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}

.inter01 ul.imageviewer li:nth-child(2) .photo_zone img{
object-position: center center;
}

.inter01 ul.imageviewer li:nth-child(1){ opacity: 1; }
.inter01 ul.imageviewer li:nth-child(2){ opacity: 0; }
.inter01 ul.imageviewer li:nth-child(3){ opacity: 0; }
.inter01 ul.imageviewer li:nth-child(4){ opacity: 1; }


@media screen and (min-width: 768px) {
.menu-btn,
#layout_tyousei,
.nav_sp {
display: none;
visibility: hidden;
}
}