/*フレーム0902*/
.js-start .animation-text-shine {
    animation: animation-shine 6s infinite;
    animation-delay: 10s;
    grid-row: 1/2;
    grid-column: 1/2;
    position: relative;
    background: linear-gradient(20deg,rgba(237,209,129, 0) 47%, #f5e1a7 50%,rgba(237,209,129, 0) 51%);
    background-size: 500% 100%;
    background-clip: text;
    -webkit-background-clip: text;
}

#main .contents-bottom {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1000px;
    margin: 0px auto 20px;
    height: auto;
    overflow: hidden;
    clear: both;
}

#main.contents h2 {
    width: 100%;
    border-bottom: 1px solid #ECECEC;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "Helvetica Neue", Helvetica, Arial, "ＭＳ Ｐゴシック", sans-serif;
    font-weight: normal;
    font-style: normal;
    background-color: rgba(255, 255, 255, 0.2);
    margin: 50px 0px 0px 5px;
    padding: 15px 0px 15px 0px;
    font-size: 20px;
    color: #000;
    text-align: center;
    clear: both;
}

#main h3.h3 {
    font-family: 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'ＭＳ Ｐ明朝', 'MS PMincho', serif;
    padding: 25px 0px 25px 0px;
    font-size: 16px;
    color: #333;
    clear: both;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    text-align: center;
}

/*■SP・PC■BASE■■■■■■■■■■■■■■■■■■■■■■■■■*/


/* ===============================================
layout
=============================================== */

.l-inner {
    margin-inline: auto;
    max-width: 1080px;
    width: 82%;
}
.l-inner--sp-L {
    margin-inline: auto;
    max-width: 1080px;
    width: 92%;
}
.l-pc-none {
    display: none;
}
.l-sp-none {
    display: block;
}
.l-tab {
    display: none;
}
@media screen and (max-width: 1080px) {
    .l-tab {
        display: block;
    }
}
@media screen and (max-width: 700px) {
    .l-pc-none {
        display: block;
    }
    .l-sp-none {
        display: none;
    }
}


.c-color__bg--primary {
    background-color: var(--bg-primary-color);
}

a {
    color: var(--default-color);
}


@media screen and (max-width: 320px)
body {
    font-size: 60%;
}
@media screen and (max-width: 700px)
body {
    line-height: 1.3;
}




/*■SP・PC■BASE■■■■■■■■■■■■■■■■■■■■■■■■■■*/





/*■SP・PC■common■■■■■■■■■■■■■■■■■■■■■■■■■*/
@charset "utf-8";

/*⭐️-1追記*/
.pc-nav #menu-wp-main-1{
    margin-inline: auto;
    width: min(100%,1200px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    border-bottom: 1px solid var(--default-color);
    position: relative;
}
@media screen and (max-width: 700px) {
    .sp-nav #menu-wp-main-1 {
        padding-top: 50px;
        padding-bottom: 50px;
        margin: auto;
        width: 100%;
        height: calc(var(--vh, 1vh) * 100);
        transform: translateY(-100%);
        display: initial;
        grid-template-columns: auto;
        grid-template-rows: initial;
        border-top: none;
        position: fixed;
        top: 0;
        left: 0;
    background-color: var(--bg-primary-color-rgba);
        box-sizing: border-box;
        overflow-y: scroll;
        transition: .5s transform ease-in-out;
        z-index: 10;
    }
    .sp-nav #menu-wp-main-1.js-open {
        transform: translateY(0%);
    }
}
.nav-item {
border-left: 1px solid var(--silver-color);
list-style: none;
}

@media screen and (max-width: 700px) {
    .sp-nav .nav-item {
        margin-inline: auto;
        width: 80%;
        border-left: none;
        border-bottom: 1px solid var(--silver-color);
    }
}
.nav-item:last-child {
    border-right: 1px solid var(--silver-color);
}
@media screen and (max-width: 700px) {
    .nav-item:last-child {
        border-right: none;
    }
}
.nav-item > a {
    text-decoration: none;
    display: block;
    *margin-left:3%;
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: center;
    font-size: 14px;
    color: var(--silver-color);
    line-height: 1.2;
    font-weight: 500;
}
.nav-item > a:hover {
color: var(--silver-color);
}


@media screen and (max-width: 1080px) {
    .nav-item > a {
        font-size: 12px;
    }
}
@media screen and (max-width: 700px) {
    .sp-nav .nav-item > a {
        padding-top: 20px;
        padding-bottom: 20px;
        display: grid;
        place-items: center;
        width: 100%;
        background-color: var(--default-color);
    }
}
@media (hover: hover) and (pointer: fine) {
/*.nav-item a:hover {*/
.pc-nav .nav-item a:hover {
    opacity: 1;
    color: var(--default-color);
    background: var(--bg-silver-gradation);
    transition: all .5s ease-in-out;
}
}



@media screen and (max-width: 700px) {
    .sp-nav .sub-menu {
        margin-bottom: 30px;
        margin-left: 0;
        margin-right: 0;
        padding: 0;
        width: 100%;
        grid-template-columns: repeat(auto-fit, minmax(48%, 1fr));
        position: initial;
        background-color: initial;
        border-top: 1px solid var(--silver-color);
    }
}
.nav-item__sub {
    border-bottom: 1px solid var(--silver-color);
    list-style: none;
    background-color: var(--bg-primary-color-rgba);
}
.nav-item__sub a {
    text-decoration: none;
    padding-top: 5px;
    padding-bottom: 5px;
    width: 100%;
    display: grid;
    place-items: center;
    color: var(--silver-color);
}
.nav-item__sub a:hover {
color: var(--default-color);
}

@media screen and (max-width: 700px) {
    .nav-item__sub a {
        padding-top: 10px;
        padding-bottom: 10px;
        display: block;
        text-align: center;
        font-size: 12px;
    }
}
@media (hover: hover) and (pointer: fine) {
.c-color__bg--primary .js-hover {
    color: var(--default-color);
    background: var(--bg-silver-gradation);
}
}
.nav-series {
    color: var(--silver-color);
    background-color: var(--blue-color);
    position: relative;
    border: none;
}
.nav-series-text {
    display: inline-block;
    position: absolute;
    left: 1em;
    font-size: .8em;
}
@media screen and (max-width: 1024px) {
    .nav-series-text {
        font-size: .6em;
    }
}
@media screen and (max-width: 700px) {
    .nav-series-text {
        position: initial;
        margin-right: .8em;
    }
}


/*-------------hamburger-------------*/
.hamburger {
    display: none;
}
 @media screen and (max-width: 700px) {
     .hamburger {
         display: block;
         position: relative;
         z-index: 25;
        }
    .hamburger__button {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        width: 54px;
        height: 54px;
        margin: auto;
        background-color: var(--bg-primary-color-rgba);
        outline: none;
        -webkit-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
    }
    .hamburger__line {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        width: 18px;
        height: 1px;
        background-color: var(--silver-color);
        -webkit-transition: inherit;
        transition: inherit;
    }
    .hamburger__line:before,
    .hamburger__line:after {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        background-color: inherit;
        content: "";
        -webkit-transition: inherit;
        transition: inherit;
    }
    .hamburger__line:before {
        top: -5px;
    }
    .hamburger__line:after {
        top: 5px;
    }
    .hamburger__button[aria-expanded="true"] .hamburger__line {
        background-color: transparent;
    }
    .hamburger__button[aria-expanded="true"] .hamburger__line:before,
    .hamburger__button[aria-expanded="true"] .hamburger__line:after {
        top: 0;
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
        background-color: var(--silver-color);
    }
    .hamburger__button[aria-expanded="true"] .hamburger__line:before {
        top: 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    .p-visuallyHidden {
        position: absolute;
        white-space: nowrap;
        width: 1px;
        height: 1px;
        overflow: hidden;
        border: 0;
        padding: 0;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
    }
}
/*■SP・PC■common■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/*ここからハンバーガー部分の中身*/
/*ロゴキラキラ*/
.logo img {
    animation: logo-color 120s infinite;
    -webkit-animation: logo-color 120s infinite;
width:30px;
padding-top:7px;
}
@-webkit-keyframes logo-color {
  0% { filter: invert(15%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(95%) contrast(112%); }
  20% { filter: invert(17%) sepia(91%) saturate(7085%) hue-rotate(128deg) brightness(100%) contrast(106%); }
  40% { filter: invert(8%) sepia(99%) saturate(7044%) hue-rotate(247deg) brightness(100%) contrast(145%); }
  60% { filter: invert(88%) sepia(61%) saturate(0%) hue-rotate(229deg) brightness(107%) contrast(101%); }
  80% { filter: invert(50%) sepia(0%) saturate(11%) hue-rotate(143deg) brightness(101%) contrast(93%); }
  100% { filter: invert(81%) sepia(81%) saturate(633%) hue-rotate(359deg) brightness(106%) contrast(105%); }
}
@keyframes logo-color {
  0% { filter: invert(15%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(95%) contrast(112%); }
  20% { filter: invert(17%) sepia(91%) saturate(7085%) hue-rotate(128deg) brightness(100%) contrast(106%); }
  40% { filter: invert(8%) sepia(99%) saturate(7044%) hue-rotate(247deg) brightness(100%) contrast(145%); }
  60% { filter: invert(88%) sepia(61%) saturate(0%) hue-rotate(229deg) brightness(107%) contrast(101%); }
  80% { filter: invert(50%) sepia(0%) saturate(11%) hue-rotate(143deg) brightness(101%) contrast(93%); }
  100% { filter: invert(81%) sepia(81%) saturate(633%) hue-rotate(359deg) brightness(106%) contrast(105%); }
}

/*◆<div class="spmenu"><img>*/
.spmenu img {
    position: relative;
    z-index: 10;
    width: 50px;
    height: 50px;
    padding: 0px 0px 0px 0px;
    float: left;
    background-color: rgba(255,255,255,0.75);

    animation: bg-color 120s infinite;
    -webkit-animation: bg-color 120s infinite;
}


/*◆<li class="nowpage">…</div>*/
li.nav-item.nowpage {
    *opacity: 0.85;
    *background-color: rgba(222,222,222,0.5);
    background-color: rgba(255,255,255,0.75);
    animation: bg-color 120s infinite;
    -webkit-animation: bg-color 120s infinite;
}
/*nowpageをキラキラ*/
@-webkit-keyframes bg-color {
  0% { background-color: #9DAAD6; }
  20% { background-color: #BD9FBC; }
  40% { background-color: #9FA0BD; }
  60% { background-color: #D5DBC4; }
  80% { background-color: #D4A78B; }
  100% { background-color: #E1B6CF; }
}
@keyframes bg-color {
  0% { background-color: #9DAAD6; }
  20% { background-color: #BD9FBC; }
  40% { background-color: #9FA0BD; }
  60% { background-color: #D5DBC4; }
  80% { background-color: #D4A78B; }
  100% { background-color: #E1B6CF; }
}


/*ここまでハンバーガー部分の中身*/


body {
    margin-inline: auto;
    font-family: var(--font-default);
    color: var(--default-color);
    *font-size: 17px;
    line-height: var(--base-line-height);
    font-weight: 200;
}
:root {
    --primary-color: #620068;/*#ccc rgba(100,0,127,1)*/
    --gold-color: #dbbc6f;
    --default-color: #000;
    --silver-color: #333;
    --white-color: #fff;
    --blue-color: #1d2e37;
    --gray-color: #9e9e9e;
    --bg-primary-color: #000;
    --bg-primary-color-rgba: rgba(0,0,0,0.95);
    --bg-white-color-rgba: 255,255,255;
        --bg-silver-gradation: radial-gradient(circle, rgba(230,230,230,1) 0%, rgba(100,100,100,1) 100%);
    --bg-gold-gradation: radial-gradient(circle, rgba(237,209,129,1) 0%, rgba(90,71,31,1) 100%);
    --bg-blue-black-gradation: radial-gradient(circle, rgba(30,46,53,1) 0%, rgba(0,0,0,1) 50%);
    --base_line_height: 1.5;
    --font-English: "Barlow", "Noto Sans JP", "游ゴシック", YuGothic, "Yu Gothic", "游ゴシック体", "ヒラギノ角ゴシック", "Hiragino Sans", "メイリオ", Meiryo, sans-serif;
    --font-default: "Noto Sans JP", "游ゴシック", YuGothic, "Yu Gothic", "游ゴシック体", "ヒラギノ角ゴシック", "Hiragino Sans", "メイリオ", Meiryo, sans-serif;
}


.menu-wp-main-container{
background-color: var(--bg-primary-color);
}
.nav{
width:100%;
position: fixed;
top:0;
z-index:9;
}


/* サブメニューの初期状態を非表示に設定 */



/* ホバー時にサブメニューを表示 */
.pc-nav .nav-item:hover > .sub-menu {
    display: grid; /* ホバー時に表示 */
}


/*⭐️.nav .pc-nav .sub-menu{*/
.nav .pc-nav .sub-menu{
    display: none; /* 初期状態で非表示に */
    *margin-left: 2%;
    margin-right: 2%;
    padding: 20px 2% 2%;
    width: 96%;
    grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
    column-gap: 0%;
    row-gap: 5px;
    position: absolute;
    top: 40px;
    left: 0;
    background-color: var(--bg-primary-color-rgba);
    z-index: 10;
}
/*display:none;⭐️*/


li.logo{
text-align: center;
}

li.logo img{
*width:30px;
text-align: center;
*display:none;
}


@media screen and (min-width: 701px) {
.hamburger{
display:none;
}
}



/* ===== SP専用（700px以下） ===== */
@media screen and (max-width: 700px) {

  /* 1) 親階層の区切り線：最後だけ消す（=一番下の白線を消す） */
  .sp-nav #menu-wp-main-1 > .nav-item {
    border-bottom: 1px solid var(--silver-color);
  }
  .sp-nav #menu-wp-main-1 > .nav-item:last-child {
    border-bottom: none; /* ←スクショの不自然な最下段線を消す */
  }

  /* 2) 子階層（第2階層）の区切り線：基本消す or 最後だけ消す、どちらか選択 */

  /* A. 子階層はボーダーなし（“2階層目以降のボトム線を出さない”方針） */
  .sp-nav #menu-wp-main-1 .sub-menu .nav-item__sub {
    border-bottom: none;
  }

  /* ---B案（子にも線は付けたいが、最後だけ消したい場合）---
  .sp-nav #menu-wp-main-1 .sub-menu .nav-item__sub {
    border-bottom: 1px solid var(--silver-color);
  }
  .sp-nav #menu-wp-main-1 .sub-menu .nav-item__sub:last-child {
    border-bottom: none;
  }
  */

  /* 3) 二重線対策：親に子が出る直前の“親ボーダー”が見えないよう余白調整（任意） */
  .sp-nav #menu-wp-main-1 .nav-item > .sub-menu {
    margin-top: 0;          /* お好みで 6px 程度 */
    border-top: none;       /* 既定の線が入っていれば消す */
  }
}







/* ===== SP：第2階層＝常時2列、第3階層＝開いたら2列 ===== */
@media screen and (max-width: 700px) {

  /* 第2階層（= 親 .nav-item の直下 .sub-menu）を2列固定 */
  .sp-nav #menu-wp-main-1 > .nav-item > .sub-menu {
    display: grid;                            /* 常時表示（あなたの設計に合わせる） */
    grid-template-columns: repeat(2, 1fr);    /* 2列＝50%/50% */
    gap: 10px 10px;
    border-top: 1px solid var(--silver-color);
    margin: 0;
    padding: 10px 0 20px;
  }

  /* 第2階層の各項目（.nav-item__sub）からボトム線は外す */
  .sp-nav #menu-wp-main-1 .sub-menu .nav-item__sub {
    border-bottom: none;
    background-color: var(--bg-primary-color-rgba);
  }

  /* 第3階層（= .nav-item__sub の直下の ul）を初期は非表示に */
  .sp-nav #menu-wp-main-1 .nav-item__sub > ul {
    display: none;                             /* ←初期は隠す */
    list-style: none;
    margin: 8px 0 12px;
    padding: 0;
    grid-template-columns: repeat(2, 1fr);     /* 開いたら2列 */
    gap: 8px 10px;
  }

  /* .is-open が付いたら第3階層を表示（2列） */
  .sp-nav #menu-wp-main-1 .nav-item__sub.is-open > ul {
    display: grid;
  }

  /* 開閉のインジケーター（＋/－） */
  .sp-nav #menu-wp-main-1 .nav-item__sub > a {
    position: relative;
    padding-right: 1.6em;                      /* 右に余白 */
  }
  .sp-nav #menu-wp-main-1 .nav-item__sub > a::after {
    content: "＋";
    position: absolute;
    right: .6em;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 700;
  }
  .sp-nav #menu-wp-main-1 .nav-item__sub.is-open > a::after {
    content: "－";
  }
}



@media (max-width: 700px) {
  /* 親メニュー（開くボタン部分） */
  .sp-nav .menu-item-has-children > a {
    display: block;
    border-bottom: 1px solid #fff; /* 白いボーダー */
    padding: 8px 12px;
  }

  /* 子メニュー（sub-menu内の各リンク） */
  .sp-nav .menu-item-has-children .sub-menu > li > a {
    display: block;
    border-bottom: 1px solid #ccc; /* グレーのボーダー */
    padding: 6px 12px;
  }

  /* 子メニュー最後の要素のボーダーを消す（必要なら） */
  .sp-nav .menu-item-has-children .sub-menu > li:last-child > a {
    border-bottom: none;
  }
}

.code_text{
    padding: 5%;
    background-color: #eee;
}