@charset "utf-8";

/*iPhoneのブラウザの上下対応*/
#layout_tyousei .menu_bg {
position: absolute;
inset: 0;
z-index: 0;
background: #fff;
pointer-events: none;
width: 100%;
height: 100%;
}

/* canvasを白より前面へ(JSを触らずCSSで上書き) */
#layout_tyousei .sp_menu_bg_canvas {
  z-index: 1 !important;
}


/* canvasと文字の間に敷く黒の半透明(文字の可読性確保) */
#layout_tyousei .menu_overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}


.menu-btn,
.menu_close,
.nav_sp ul li a {
touch-action: manipulation;
}




/* lang_switcher.jsの言語選択のCSSをJSで設定 */
.nav_sp ul li .nav_link_wrap.is_active .hover_shffule {
text-decoration-line: line-through;
}


body.menu_open_fixed {
overflow: hidden;
height: 100vh;
touch-action: none; /*メニューオープン時、モバイルでの慣性スクロール防止 */
}

/* スマホ　ナビと区別、全体を囲うID=content_area */
#content_area {
position: relative;
width: 100%;
margin: 0;
padding: 0;
background: none;
border: none;
}

/* スマホの画像とナビの全体 */
#layout_tyousei {
position: fixed;
z-index: -99;
inset: 0;            /* top/left/right/bottom すべて 0 */
visibility: hidden;
display: none;
overflow: hidden;

width: 100%;
height: 100vh;       /* フォールバック */
height: 100dvh;      /* viewport-fit=cover 前提で全面を覆う */

margin: 0;
padding: 0;

opacity: 1;
background: none;
border-bottom: none;
}

/* ▼▼▼ JSで .menu-is-open クラスが付いたら表示 ▼▼▼ */
.menu-is-open #layout_tyousei {
visibility: visible;
display: block;
opacity: 1;
z-index: 9995;
}

.nav_sp {
position: relative;
z-index: 4;
display: block;
margin: 0;
padding: 0;

width: 100%;
height: 100%;


box-sizing: border-box;
}

.nav_sp_layout {
position: relative;

width: 100%;
height: 100%;

margin: 0;
padding: 0 0 0 7vw;
box-sizing: border-box;

display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}



/* ナビ　基本 */
.nav_sp ul {
position: relative;

margin: 0;
padding: 0;

width: fit-content;
}


/* 下部メニュー（言語・Cookie）を左下へ */
.nav_sp ul.nav_sp_bottom {
position: relative;
margin: 40px 0 0 0;
padding: 0;
}



.nav_sp ul li {
position: relative;

margin: 0 0 3px 0;
padding: 0 1px 0 1px;

width: fit-content;

font-family: "swiss-721-bt", sans-serif;
font-weight: 700;
font-style: normal;

/*FONT 375px計算*/
font-size: 22px;
font-size: 5.8666667vw;
font-size: clamp(21px, 5.8666667vw, 23px);

letter-spacing: -0.02em;
line-height: 1.0;

color: #000;
background-color: #fff;
text-transform: uppercase;

-moz-font-feature-settings: "palt" 1;
-webkit-font-feature-settings: "palt" 1;
font-feature-settings: "palt" 1;

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

user-select: none;
-webkit-user-select: none;
}

.nav_sp ul li:first-child{
margin: 0 0 2px 0;
}


/* スマホ版：現在ページのナビボタン */
li.sp_nav_active a {
    pointer-events: none;
    cursor: default;
color: #fff;
}

li.sp_nav_active .hover_shffule {
    text-decoration: line-through;
    pointer-events: none;
}


/*ENGLISH / JAPANESE*/
li#language{
margin: 0 0 3px 0;
padding: 0 1px 0 1px;
/*FONT 375px計算*/
font-size: 13px;
font-size: 3.4666666vw;
font-size: clamp(12px, 3.4666666vw, 14px);

line-height: 1.0;
text-transform: uppercase;
}

/*COOKIE*/
.nav_sp ul li#cookie {
margin: 0 0 3px 0;
padding: 0 1px 0 1px;

/*FONT 375px計算*/
font-size: 13px;
font-size: 3.4666666vw;
font-size: clamp(12px, 3.4666666vw, 14px);
line-height: 1.0;
text-transform: uppercase;
}

/*Privacy Policy*/
.nav_sp ul li#privacy {
margin: 0 0 3px 0;
padding: 0 1px 0 1px;

/*FONT 375px計算*/
font-size: 13px;
font-size: 3.4666666vw;
font-size: clamp(12px, 3.4666666vw, 14px);

line-height: 1.0;
text-transform: uppercase;
}

.nav_haihun{
position: relative;
top: -2px;
margin: 0 0 0 2px;
}


.nav_sp ul li a {
inset: 0;
-webkit-tap-highlight-color: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
color: #000;
touch-action: manipulation; /* スマホのタップ遅延を殺す */
}

.nav_link_wrap > a {
position: absolute;
inset: 0;
z-index: 1;
}

/* 追加: アニメスパンはレイアウト担当、クリック無効 */
.nav_sp ul li .hover_shffule {
display: inline-block;
position: relative;
z-index: 0;
pointer-events: none;
}

/* 追加: language / cookie の複数リンク用ラッパー */
.nav_link_wrap {
position: relative;
display: inline-block;
}

/* クリック禁止 */
.nav_sp ul li a.not_click {
pointer-events: none;
}





/*ナビのコピーライト*/
.copy_only_sp_nav{
position: fixed;
bottom: 8px;
right: 10px;

font-family: "swiss-721-bt", sans-serif;
font-weight: 700;
font-style: normal;

/*FONT 375px計算*/
font-size: 6px;
font-size: 1.6vw;
font-size: clamp(5px, 1.6vw, 7px);

color: #04181e;

line-height: 1.4;
font-feature-settings: "liga" 1, "pnum" 1;
letter-spacing: 0.02em;

background: white;
}


/*禁止メッセージ*/
.menu_prohibited{
position: fixed;
bottom: 8px;
left: 10px;

font-family: "helvetica-neue-lt-pro", sans-serif;
font-weight: 500;
font-style: normal;

/*FONT 375px計算*/
font-size: 6px;
font-size: 1.6vw;
font-size: clamp(5px, 1.6vw, 7px);

line-height: 1.4;
font-feature-settings: "liga" 1, "pnum" 1;
letter-spacing: 0.02em;
text-transform: uppercase;
}

.menu_prohibited span{
background: white;
}




/* メニューボタン */
.menu-btn {
position: fixed;
z-index: 9998;
display: block;
top: 0;
right: 0;
width: 70px;
height: 70px;
text-align: left;
opacity: 1;
-webkit-tap-highlight-color: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
transition:opacity 0.7s;
-webkit-transition:opacity 0.7s;
/* ★ ボタンのデフォルトスタイルをリセット */
border: none;
background: transparent;
padding: 0;
cursor: pointer;
}

/* 丸: ::before をやめて実要素 .menu_dot に。
   差の合成をページ本体に効かせるため、ボタンの外(ページ直下)に置き、
   fixedで最前面に独立配置する。 */
.menu_dot {
display: block;
position: fixed;
z-index: 9999;
top: 24px;
right: 22px;
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #fff;
mix-blend-mode: difference;
pointer-events: none;
}

/* オープン時もそのまま表示（差の合成でメニューの白背景上では黒丸になる） */


.menu-btn:hover {
transition:opacity 0.7s;
-webkit-transition:opacity 0.7s;
opacity: 0.6;
}

/* JSで .menu-is-open クラスが付いたら非表示（::beforeの黒丸も一緒に消える） */
.menu-is-open .menu-btn {
opacity: 0;
visibility: hidden;
}


/* メニュー丸: 旧実装。黒丸は .menu-btn::before に移行したため非表示。
   HTMLから <span class="menu_text"> を削除する場合はこのルールごと削除可。 */
.menu_text {
display: none;
}


/* 閉じるボタン */
.menu_close {
position: absolute;
z-index: 9999;
display: none;
top: 0;
right: 0;
width: 70px;
height: 70px;
cursor: pointer;
}


/* ▼▼▼ JSで .menu-is-open クラスが付いたら表示 ▼▼▼ */
.menu-is-open .menu_close {
display: block;
}

/* 閉じるバー2 */
.menu_close .bar02_top {
opacity: 1;
display: block;
position: absolute;
top: 24px;
right: 22px;
width: 5px;
height: 5px;
border-radius: 50%;
overflow: hidden;
background: #fff;
mix-blend-mode: difference;
}





/* スマホ終了（PC開始）
------------------------------------------------------------------------------ */
@media screen and (min-width: 768px) {




/* PC: dvhではなく従来の高さ100%に固定 */
#layout_tyousei {
top: 0;
height: 100%;
}

.menu-btn {
display: none;
visibility: hidden;

position: fixed;
z-index: 9998;

top: 0;
right: auto;
left: calc(100% - 70px);
left: -webkit-calc(100% - 70px);

margin: 0;
padding: 0;
width: 70px;
height: 70px;

opacity: 1;
-webkit-tap-highlight-color: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
transition:opacity 0.7s;
-webkit-transition:opacity 0.7s;
/* ★ ボタンのデフォルトスタイルをリセット */
border: none;
background: transparent;
cursor: pointer;
}

.menu-btn:hover {
opacity: 0.5;
transition:opacity 0.7s;
-webkit-transition:opacity 0.7s;
}

/* オープンメニュー */
.menu_text {
opacity: 1;
display: block;
position: fixed;
top: 24px;
right: 22px;
width: 5px;
height: 5px;
border-radius: 50%;
overflow: hidden;
background: #333;

opacity: 0;
}

/* 閉じるボタンのエリア */
.menu_close {
position: absolute;
z-index: 9999;
display: none;
top: 0;
right: auto;
left: calc(100% - 70px);
left: -webkit-calc(100% - 70px);
width: 70px;
height: 70px;
cursor: pointer;

transition:opacity 0.7s;
-webkit-transition:opacity 0.7s;
}

.menu_close:hover {
opacity: 0.5;
transition:opacity 0.7s;
-webkit-transition:opacity 0.7s;
}



/*ナビゲーション PC*/
.nav_sp {
position: relative;
width: 40%;
height: 100%;
margin: 0 0 0 60%;
padding: 0;
}

.nav_sp_layout {
display: block;
padding: 0;
}

.logo_sp_nav {
position: relative;
margin: 0;
padding: 0;

font-size: 2.5vw;
line-height: 1;
font-feature-settings: "liga" 1, "pnum" 1;
letter-spacing: -0.02em;
}

/* ナビ　基本 */
.nav_sp ul {
position: relative;
display: block;
margin: 0;
padding: 0;
height: auto;
overflow: hidden;
}

/* PC: メインメニューは従来の上下余白を維持 */
.nav_sp ul#japanese {
padding: 28vh 0 4vh 0;
}



/* PC: 下部メニューはメインに続けて配置 */
.nav_sp ul.nav_sp_bottom {
margin-top: 0;
padding: 0 0 28vh 0;
}


.nav_sp ul li {
position: relative;
margin: 0 0 0 0;

font-size: 2.5vw;
line-height: 1;
font-feature-settings: "liga" 1, "pnum" 1;
letter-spacing: -0.02em;

color: #04181e;
overflow: visible;
}

.nav_sp ul li a {
color: #04181e;
}

/*カタカナ*/
.nav_sp ul li#katakana_logo{

/*Hiragino Kaku Gothic ProN W3*/
font-family: "hiragino-kaku-gothic-pron", sans-serif;
font-weight: 300;
font-style: normal;

-moz-font-feature-settings: "pkna" 1;
-webkit-font-feature-settings: "pkna" 1;
font-feature-settings: "pkna" 1;
letter-spacing: -0.03em;
}


li#nav_home{
margin: 4vh 0 0 0;
}


/*ENGLISH / JAPANESE*/
.nav_sp ul li#language{
font-size: 1.4vw;
line-height: 1.2;
margin: 4vh 0 0 0;
}

.nav_sp ul li#cookie{
font-size: 1.4vw;
}

.menu_close .bar02_top,
.menu_close .bar02_bottom {
background: #04181e;
}

/* PC: スマホ用の丸は非表示 */
.menu_dot {
display: none;
}




}/*end/ pc*/