/* public/css/custom.css に追記/上書き */

/* ==================================
   共通スタイル
   ================================== */
header .h_left .h_title {
    margin: 0;
}
.book_area ul.lineup {
    justify-content: flex-start
}

.page-news nav ul li a[href="/news/"],
.page-backnumber nav ul li a[href="/backnumber/"],
.page-rpg nav ul li a[href="/rpg/"],
.page-rpg-single nav ul li a[href="/rpg/"],
.page-support nav ul li a[href="/rpg/"],
.page-download nav ul li a[href="/rpg/"],
.page-tutorial nav ul li a[href="/tutorial/"],
.page-books nav ul li a[href="/books/"] {
    background-color: #fff;
    color: #00b5d0;
}


/* ----------------------------------
 * 1. ロゴ画像のアスペクト比設定 (ヘッダー)
 * ---------------------------------- */
.header-logo-container {
    position: relative; 
    padding-bottom: 41.67%; 
    width: 100%; 
    overflow: hidden;
}
@media screen and (max-width: 767px) {
    .header-logo-container {
        min-width: 115rem; 
    }
}

/* ----------------------------------
 * 2. リード文画像のアスペクト比設定 (ヘッダー)
 * ---------------------------------- */
.header-lead-container {
    position: relative;
    padding-bottom: 10%; 
    width: 100%;
    overflow: hidden;
}
.header-lead-sp-container {
    position: relative;
    padding-bottom: 5%;
    max-width: 263rem; 
    width: 100%;         
}

.to-howto-container {
    position: relative;
    width: 139px;
    height: 134px;
    overflow: hidden;
}
.to-howto-sp-container { 
    position: relative;
    padding-bottom: 51.46%; 
    width: 100%;
    overflow: hidden;
}
.btn-side-lineup-container {
    position: relative;
    width: 100%;
    max-height: 340px;
    min-height: 340px;
    overflow: hidden;  
}
@media screen and (max-width: 767px) {
    .btn-side-lineup-container {
    }
}
/* --- 画像比率のベース設定 --- */
.image-ratio-wrapper {
    position: relative; 
    width: 100%;
    height: 0;
    overflow: hidden;
}
.image-rpg-logo-container {
    position: relative;
    padding-bottom: 62.5%; 
    max-width: 226rem; 
    width: 100%;
}
.image-rpg-sub {
    padding-bottom: 62.5%; 
}
.internal-banner-container {
    position: relative;
    padding-bottom: 45.3125%;
    width: 100%;
    overflow: hidden;

}
.external-banner-container {
    position: relative;
    padding-bottom: 26.56%;
    width: 100%;
    overflow: hidden;

}

.rpg_gametitle_list .list_wrap .game .img_wrap {
    position: relative; 
}

.book-cover-container {
    position: relative;
    width: 100%;   
    height: 100%;
    overflow: hidden;
}
.btn-amazon-container {
    position: relative;
    padding-bottom: 21.54%;
    width: 100%; 
    overflow: hidden;
}

.buy-btn-container {
    display: block;
    position: relative;
/*    padding-bottom: 21.54%; */
    width: 100%;
    overflow: hidden;
}
@media screen and (max-width: 767px) {
    /* モバイル時の調整 */
    .buy-btn-container {
/*         padding-bottom: 38.125%;  */
    }
}


/* ==================================
   1. 無限ロゴスライダーアニメーション (TOPページ)
   ================================== */

.infinite_slide_wrap {
    padding: 20px 0;
    background-color: #f8f8f8;
    overflow: hidden; /* スライダーからはみ出た部分を隠す */
    white-space: nowrap; 
    display: block; 
}

.logo_slider {
    max-width: none; /* 無限スクロールのため最大幅を解除 */
    margin: 0;
    padding: 0;
    background-color: transparent;
}

/* ★修正点: infinite クラスに Flexbox とアニメーションを適用 ★ */
.logo_slider ul.infinite {
    display: inline-flex; /* li要素を強制的に横並びにする */    
    /* アニメーションの実行 */
    /* ※durationはコンテンツ量に合わせて調整が必要です */
    animation: slide-left 180s linear infinite; 
}

.logo_slider ul.infinite li {
    display: inline-block;
    padding: 0 20px; 
    text-align: center;
    white-space: normal;
    flex-shrink: 0; /* Flexアイテムが縮小されないようにする */
}


/* アニメーションの定義 (右から左へスクロール) */
@keyframes slide-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    /* リストが1セット分（元のデータの長さ）移動するよう計算 */
    transform: translateX(-33.333%); /* 3倍複製を想定した値 */
  }
}

/* --- モバイル時の修正 (Gridを削除し、Flexboxに依存) --- */
@media screen and (max-width: 767px) {
    /* モバイル時の調整 */
    .logo_slider ul.infinite li {
        padding: 0 10px;
    }
}


/* ==================================
   モバイルナビゲーションの開閉アニメーション
   ================================== */
@media screen and (max-width: 767px) {
    /* 1. デフォルト (閉じている状態) */
    nav {
        /* ★修正点: display: none; を上書きし、max-heightで制御する★ */
        display: block !important; /* style.css の display: none を無効化 */
        
        max-height: 0; /* 閉じている状態 */
        opacity: 0; 
        overflow: hidden;
        
        /* スライドアニメーションを設定 */
        transition: max-height 0.4s ease-in-out, opacity 0.4s;
    }

    /* 2. 開いている状態 (hm_btnクリック時) */
    nav.active {
        /* 開いている状態: 十分に大きな固定値を設定 */
        max-height: 1200px; /* ★コンテンツの最大高さに合わせて調整してください★ */
        opacity: 1; 
    }   
}

.book_area {
    margin: 90rem 0;
}
.link_btns_area {
    margin: 90rem 0 60rem;
    padding: 0;
}
.other_link_area {
    margin: 60rem 0 90rem;
}



/* ==================================
   トップ
   ================================== */

.page-home .infinite_slide_wrap {
    margin-top: 50rem; 
}

.page-home .link_area {
    margin-top: 100rem; 
}
.page-home .link_area .btn_border a {
    margin-left: auto;
    margin-right: auto;
    width: 600rem;
    height: 100rem; 
}
.page-home .link_area ul.link_btns {
    margin-top: 100rem;
}

.page-home .book_area {
    margin-top: 90rem;
    padding: 80rem 0 90rem;
}

@media screen and (min-width: 768px) {
  .page-home nav ul li a[href="/"] {
    background-color: #fff;
    color: #00b5d0; }
 }
@media screen and (max-width: 767px) {
    .page-home .infinite_slide_wrap {
        margin-top: 26rem;
    }
    .page-home .link_area {
        margin-top: 55rem; 
    }
    .page-home .link_area .btn_border a {
        width: 335rem;
        height: 90rem;
        border-radius: 20rem;
        font-size: 15rem;
    }
    .page-home .link_area ul.link_btns {
        margin-top: 55rem; 
    }
    .page-home .book_area {
        margin-top: 38rem;
        padding: 40rem 0;
    }
}

/* ==================================
   ニュース
   ================================== */

.page-news,
.page-news-single {
    /* --- アンカーソートエリア --- */
    .anc_sort {
        background-color: #ededed;
        padding: 40rem 0;
        margin-top: 30rem;
    }
    .anc_sort ul {
        display: flex;
        justify-content: center;
    }
    .anc_sort ul li + li {
        margin-left: 100rem;
    }
    .anc_sort ul li a {
        font-size: 20rem;
        font-weight: bold;
        text-align: center;
        width: 320rem;
        padding-bottom: 35rem;
        position: relative;
        display: block;
        z-index: 1;
    }
    .anc_sort ul li a::after {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 57rem;
        background-image: url(/assets/img/news/btn_news_anc.png);
        background-size: contain;
        background-position: center bottom;
        left: 0;
        bottom: 0;
        z-index: -1;
        transition: .3s;
    }
    .anc_sort ul li a:hover {
        transform: translateY(6rem);
    }

    /* --- ニュース一覧エリア --- */
    .news_area {
        margin-top: 70rem;
    }
    .news_area .tabs {
        margin-top: 50rem;
        border-bottom: 1px solid #b3b3b3;
    }
    .news_area .tabs ul {
        display: flex;
    }
    .news_area .tabs ul li + li {
        margin-left: 20rem;
    }

    /* タブごとの色 */
    .news_area .tabs ul li.tab1 a {
        color: #00b5d0;
    }
    .news_area .tabs ul li.tab1 a::after {
        background-color: #00b5d0;
    }
    .news_area .tabs ul li.tab2 a {
        color: #3d72bc;
    }
    .news_area .tabs ul li.tab2 a::after {
        background-color: #3d72bc;
    }
    .news_area .tabs ul li.tab3 a {
        color: #45b966;
    }
    .news_area .tabs ul li.tab3 a::after {
        background-color: #45b966;
    }
    .news_area .tabs ul li.tab4 a {
        color: #e78715;
    }
    .news_area .tabs ul li.tab4 a::after {
        background-color: #e78715;
    }

    /* タブ共通スタイル */
    .news_area .tabs ul li a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 200rem;
        height: 40rem;
        font-weight: bold;
        font-size: 18rem;
        position: relative;
        z-index: 1;
    }
    .news_area .tabs ul li a::after {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 8rem;
        transition: .3s;
        z-index: -1;
    }
    .news_area .tabs ul li a.on {
        pointer-events: none;
    }
    .news_area .tabs ul li a:hover, 
    .news_area .tabs ul li a.on {
        color: #fff;
    }
    .news_area .tabs ul li a:hover::after, 
    .news_area .tabs ul li a.on::after {
        height: 100%;
        border-radius: 0 20rem 0 0;
    }

    /* カテゴリーごとのアクティブ状態 */
    .news_area .tabs ul.trpg li.tab2 a {
        color: #fff;
        pointer-events: none;
    }
    .news_area .tabs ul.trpg li.tab2 a::after {
        height: 100%;
        border-radius: 0 20rem 0 0;
    }
    .news_area .tabs ul.info li.tab3 a {
        color: #fff;
        pointer-events: none;
    }
    .news_area .tabs ul.info li.tab3 a::after {
        height: 100%;
        border-radius: 0 20rem 0 0;
    }
    .news_area .tabs ul.role-roll li.tab4 a {
        color: #fff;
        pointer-events: none;
    }
    .news_area .tabs ul.role-roll li.tab4 a::after {
        height: 100%;
        border-radius: 0 20rem 0 0;
    }

    /* ニュースリスト */
    .news_area .news {
        margin-top: 60rem;
    }
    .news_area .news ul li {
        justify-content: flex-start;
    }
    .news_area .news ul li p {
        width: 650rem;
        margin-left: 16rem;
    }

    /* --- ページネーションとアーカイブ --- */
    .pagination_wrap {
        margin-top: 60rem;
    }
    .archive_wrap {
        margin-top: 24rem;
    }
    .archive_wrap .sidebar_content ul {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        max-width: 500rem;
        margin-left: auto;
        margin-right: auto;
    }
    .archive_wrap .sidebar_content ul li {
        margin-right: 20rem;
        margin-bottom: 10rem;
    }
    .archive_wrap .sidebar_content ul li:last-child {
        margin-right: 0;
    }
    .archive_wrap .sidebar_content ul li a {
        font-size: 18rem;
        font-weight: bold;
        color: #434343;
        display: inline-block;
        border-bottom: 1px solid #434343;
        line-height: 1.2;
    }
    .archive_wrap .sidebar_content ul li a:hover {
        opacity: .8;
        border-bottom-color: transparent;
    }

    /* --- 記事詳細コンテンツ --- */
    .single_content {
        margin-top: 45rem;
    }
    .single_content article > h1 {
        font-size: 30rem;
        font-weight: bold;
    }
    .single_content article p.at {
        margin-top: 20rem;
    }
    .single_content article dl.tags {
        margin-top: 42rem;
        display: flex;
        align-items: flex-start;
    }
    .single_content article dl.tags dt {
        padding: 5rem 0;
        margin-right: 5rem;
        min-width: 42rem;
    }
    .single_content article dl.tags > div {
        display: flex;
        flex-wrap: wrap;
    }
    .single_content article dl.tags > div dd {
        color: #fff;
        background-color: #00b5d0;
        padding: 5rem 10rem;
        margin-bottom: 5rem;
        margin-right: 5rem;
    }
    .single_content article .share_label {
        margin-top: 30rem;
    }
    .single_content article .share_label dl {
        padding: 38rem 32rem;
        background-color: #eee;
        display: flex;
        align-items: center;
    }
    .single_content article .share_label dl dt {
        font-size: 14rem;
        margin-right: 20rem;
        color: #707070;
    }
    .single_content article .share_label dl dd {
        margin-right: 4px;
    }
    .single_content article .share_label dl dd img {
        width: 120rem;
    }
    .single_content article .share_label dl dd a,
    .single_content article .share_label dl dd span {
        transition: .3s;
    }
    .single_content article .share_label dl dd a:hover,
    .single_content article .share_label dl dd span:hover {
        opacity: .8;
    }

    /* WordPressコンテンツ本体のスタイル */
    .single_content article .wp_content_wrap {
        padding: 40rem 70rem 50rem;
        line-height: 1.8;
    }
    .single_content article .wp_content_wrap img {
        height: auto;
    }
    .single_content article .wp_content_wrap::after {
        content: "";
        display: block;
        clear: both;
    }
    .single_content article .wp_content_wrap a {
        color: #002286;
        text-decoration: underline;
        transition: .3s;
    }
    .single_content article .wp_content_wrap a::after {
        text-decoration-color: transparent;
    }
    .single_content article .wp_content_wrap h2 {
        font-size: 23rem;
        font-weight: bold;
        margin-bottom: 24rem;
        display: block;
        text-align: left;
        padding-bottom: 8rem;
        border-bottom: 4rem solid #00b5d0;
    }
    .single_content article .wp_content_wrap h3 {
        font-weight: bold;
        margin-bottom: 20rem;
    }
    .single_content article .wp_content_wrap h3::before {
        content: "";
        display: inline-block;
        width: 8rem;
        height: 28rem;
        background-color: #00b5d0;
        margin-right: 8rem;
        line-height: 1;
        vertical-align: -45%;
    }
    .single_content article .wp_content_wrap h4 {
        font-weight: bold;
        margin-bottom: 20rem;
        color: #00b5d0;
    }
    .single_content article .wp_content_wrap h5 {
        font-weight: bold;
        margin-bottom: 20rem;
    }
    .single_content article .wp_content_wrap h6 {
        font-weight: bold;
        margin-bottom: 10rem;
    }
    .single_content article .wp_content_wrap hr {
        margin: 10rem 0;
        clear: both;
        display: block;
    }
    .single_content article .wp_content_wrap p {
        margin-bottom: 20rem;
    }
    .single_content article .wp_content_wrap .alignleft {
        float: left;
        margin-bottom: 10rem;
        max-width: 53%;
        padding-right: 3%;
        background-color: #fff;
    }
    .single_content article .wp_content_wrap .alignright {
        float: right;
        margin-bottom: 10rem;
        max-width: 53%;
        padding-left: 3%;
        background-color: #fff;
    }
    .single_content article .wp_content_wrap .aligncenter {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30rem;
    }
    .single_content article .wp_content_wrap .alignnone {
        margin-bottom: 20rem;
        display: block;
    }
    .single_content article .wp_content_wrap .wp-caption-text {
        text-align: center;
        margin-bottom: 0;
        margin-top: 5rem;
        font-weight: bold;
    }
    .single_content article .wp_content_wrap strong {
        font-weight: bold;
    }
    .single_content article .wp_content_wrap em {
        font-style: italic;
    }
    .single_content article .wp_content_wrap ul {
        margin-bottom: 10rem;
    }
    .single_content article .wp_content_wrap ul li {
        position: relative;
        padding-left: 16rem;
    }
    .single_content article .wp_content_wrap ul li::before {
        content: "・";
        position: absolute;
        top: 0;
        left: 0;
    }
    .single_content article .wp_content_wrap ol li {
        margin-bottom: 10rem;
        margin-left: 24rem;
        list-style: decimal;
    }
    .single_content article .wp_content_wrap table {
        max-width: 100%;
        margin-bottom: 20rem;
    }
    .single_content article .wp_content_wrap table th,
    .single_content article .wp_content_wrap table td {
        border: 1px solid #e5e5e5;
        vertical-align: middle;
        padding: 10rem 15rem;
    }
    .single_content .btn_wrap {
        padding-bottom: 60rem;
        margin-top: 20rem;
        border-bottom: 1px solid #e6e6e6;
    }
    .single_content .btn_wrap p a {
        margin-left: auto;
        margin-right: auto;
        width: 290rem;
        height: 40rem;
        font-size: 16rem;
    }

    /* --- コンテンツ情報 (RPG News) --- */
    .rpg_news h2 {
        margin-bottom: 0;
    }
    .rpg_news .inner {
        width: 860rem;
    }
    .rpg_news .select_area {
        margin-top: 45rem;
    }
    .rpg_news .select_area dl {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .rpg_news .select_area dl dt {
        font-size: 20rem;
        color: #434343;
    }
    .rpg_news .select_area dl dd {
        font-size: 16rem;
        margin-left: 15rem;
        position: relative;
    }
    .rpg_news .select_area dl dd select {
        cursor: pointer;
        min-width: 400rem;
        padding: 2rem 45rem 2rem 12rem;
        height: 35rem;
        border: 1px solid #a0a0a0;
        color: #434343;
    }
    .rpg_news .select_area dl dd::before, 
    .rpg_news .select_area dl dd::after {
        content: "";
        display: block;
        position: absolute;
        pointer-events: none;
    }
    .rpg_news .select_area dl dd::before {
        height: 100%;
        width: 1px;
        background-color: #a0a0a0;
        top: 0;
        right: 34rem;
    }
    .rpg_news .select_area dl dd::after {
        border-left: 6rem solid transparent;
        border-right: 6rem solid transparent;
        border-top: 8rem solid #434343;
        top: 14rem;
        right: 12rem;
    }
    .rpg_news .content-wrap {
        margin-top: 30rem;
        padding-top: 30rem;
        background-color: #ededed;
        padding-bottom: 40rem;
    }
    .rpg_news .content-wrap h3 {
        text-align: center;
        color: #fff;
        font-size: 18rem;
        background-color: #00b5d0;
        padding: 9rem;
    }
    .rpg_news .content-wrap h3 span {
        font-weight: bold;
        font-size: 26rem;
    }
    .rpg_news .content-wrap .content-txt {
        margin-top: 60rem;
    }
    .rpg_news .content-wrap p.btn_border {
        margin-top: 60rem;
    }
    .rpg_news .content-wrap p.btn_border a {
        font-size: 16rem;
        width: 290rem;
        height: 40rem;
        margin-left: auto;
        margin-right: auto;
    }

    /* --- レスポンシブ (max-width: 767px) --- */
    @media screen and (max-width: 767px) {
        .anc_sort {
            padding: 30rem 15;
            margin-top: 26rem;
        }
        .anc_sort ul li + li {
            margin-left: 15rem;
        }
        .anc_sort ul li a {
            font-size: 13rem;
            width: 168rem;
            padding-bottom: 32rem;
        }
        .anc_sort ul li a::after {
            width: 100%;
            height: 58rem;
            background-image: url(/assets/img/news/btn_news_anc_sp.png);
        }
        .news_area {
            margin-top: 40rem;
        }
        .news_area .tabs {
            margin-top: 26rem;
        }
        .news_area .tabs ul li + li {
            margin-left: 5rem;
        }
        .news_area .tabs ul li a {
            width: 80rem;
            height: 40rem;
            font-size: 13rem;
        }
        .news_area .tabs ul li a::after {
            width: 100%;
            height: 3rem;
        }
        .news_area .tabs ul li a:hover::after, 
        .news_area .tabs ul li a.on::after {
            border-radius: 0 10rem 0 0;
        }
        .news_area .news {
            margin-top: 25rem;
        }
        .news_area .news ul {
            width: auto;
        }
        .news_area .news ul li p {
            width: 100%;
            margin-left: 0;
        }
        .pagination_wrap {
            margin-top: 35rem;
        }
        .archive_wrap {
            margin-top: 20rem;
        }
        .archive_wrap .sidebar_content ul li a {
            font-size: 14rem;
            line-height: 1.2;
        }
        .single_content {
            margin-top: 20rem;
        }
        .single_content article > h1 {
            font-size: 20rem;
        }
        .single_content article p.at {
            margin-top: 5rem;
            font-size: 11rem;
        }
        .single_content article dl.tags {
            margin-top: 25rem;
            font-size: 11rem;
        }
        .single_content article dl.tags dt {
            padding: 5rem 0;
            margin-right: 5rem;
            min-width: 33rem;
        }
        .single_content article dl.tags > div dd {
            padding: 3rem 7rem;
            margin-bottom: 5rem;
            margin-right: 5rem;
        }
        .single_content article .share_label {
            margin-top: 14rem;
        }
        .single_content article .share_label dl {
            padding: 15rem 7rem 15rem 15rem;
        }
        .single_content article .share_label dl dt {
            font-size: 11.5rem;
            margin-right: 16rem;
        }
        .single_content article .share_label dl dd {
            line-height: 1;
            margin-right: 5rme;
        }
        .single_content article .share_label dl dd img {
            width: 60rem;
        }
        .single_content article .share_label dl dd.print {
            display: none;
        }
        .single_content article .wp_content_wrap {
            padding: 25rem 0;
        }
        .single_content article .wp_content_wrap h2 {
            font-size: 15rem;
            margin-bottom: 12rem;
            padding-bottom: 4px;
            border-bottom-width: 3px;
        }
        .single_content article .wp_content_wrap h3 {
            margin-bottom: 12rem;
        }
        .single_content article .wp_content_wrap h3::before {
            width: 6rem;
            height: 24rem;
            margin-right: 6rem;
            vertical-align: -50%;
        }
        .single_content article .wp_content_wrap .alignleft {
            float: none;
            margin-bottom: 20rem;
            max-width: 100%;
            padding-right: 0;
        }
        .single_content article .wp_content_wrap .alignright {
            float: none;
            padding-left: 0;
            margin-bottom: 20rem;
            max-width: 100%;
        }
        .single_content .btn_wrap {
            padding-bottom: 40rem;
            margin-top: 10rem;
        }
        .single_content .btn_wrap p a {
            width: 225rem;
            height: 50rem;
            font-size: 12rem;
        }
        .rpg_news {
            margin-top: 90rem;
            padding-bottom: 0;
        }
        .rpg_news h2 {
            margin-bottom: 0;
        }
        .rpg_news .inner {
            width: 335rem;
        }
        .rpg_news .select_area {
            margin-top: 25rem;
            padding: 0 10rem;
        }
        .rpg_news .select_area dl {
            flex-wrap: wrap;
        }
        .rpg_news .select_area dl dd {
            margin-left: 8rem;
        }
        .rpg_news .select_area dl dd select {
            min-width: 260rem;
            height: 35rem;
        }
        .rpg_news .content-wrap {
            margin-top: 20rem;
            padding-top: 25rem;
            padding-bottom: 45rem;
        }
        .rpg_news .content-wrap h3 {
            font-size: 13rem;
            padding: 9rem;
        }
        .rpg_news .content-wrap h3 span {
            display: block;
            font-size: 19rem;
        }
        .rpg_news .content-wrap .content-txt {
            margin-top: 45rem;
        }
        .rpg_news .content-wrap p.btn_border {
            margin-top: 30rem;
        }
        .rpg_news .content-wrap p.btn_border a {
            font-size: 12rem;
            width: 225rem;
            height: 50rem;
        }
    }
}
/* ==================================
   backnumber
   ================================== */
.page-backnumber,
.page-backnumber-single,
.page-backnumber-role-and-roll {
    .backnumber_mv {
        min-height: 500rem;
        position: relative;
    }
    .backnumber_mv .mv_side {
        position: absolute;
        top: 34rem;
        right: 0;
        padding-bottom: 5rem;
        width: 200rem;
    }
    .backnumber_mv .mv_side ul li + li {
        margin-top: 12rem;
    }
    .backnumber_mv .btn_border {
        position: absolute;
        left: 50%;
        bottom: 10rem;
        transform: translateX(-50%);
    }
    .backnumber_mv .btn_border a {
        border-radius: 25rem;
        height: 50rem;
        width: 300rem;
    }

    .all_b_number {
        margin-top: 82rem;
    }
    .all_b_number h1 {
        text-align: center;
    }
    .all_b_number .vol_number {
        text-align: center;
        margin-top: 14rem;
    }
    .all_b_number ul {
        margin-top: 60rem;
        display: flex;
        flex-wrap: wrap;
    }
    .all_b_number ul li {
        width: 300rem;
        margin-right: 50rem;
        padding-bottom: 60rem;
        position: relative;
    }
    .all_b_number ul li:nth-child(3n) {
        margin-right: 0;
    }
    .all_b_number ul li:nth-child(n+4) {
        margin-top: 60rem;
    }
    .all_b_number ul li h3 {
        text-align: center;
        font-size: 15rem;
        border-bottom: 1px dotted #00b5d0;
        padding-bottom: 10rem;
    }
    .all_b_number ul li h3 span {
        font-size: 23rem;
        font-weight: bold;
    }
    .all_b_number ul li .cover_wrap {
        text-align: center;
        padding: 10rem 0;
    }
    .all_b_number ul li .cover_wrap img {
        height: 220rem;
        border: 1px solid #d4d4d4;
    }
    .all_b_number ul li h4 {
        color: #fff;
        font-weight: bold;
        background-color: #00b5d0;
        padding: 8rem 12rem;
        font-size: 16rem;
    }
    .all_b_number ul li p.description {
        margin-top: 10rem;
        line-height: 1.4;
    }
    .all_b_number ul li .btn_border {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
    }
    .all_b_number ul li .btn_border a {
        max-width: 100%;
        height: 50rem;
        border-radius: 25rem;
    }

    .bottom_page_nav {
        margin-top: 80rem;
    }
    .bottom_page_nav p.vol_number {
        text-align: center;
    }

    .bnumber_single h1 {
        margin-top: 35rem;
        text-align: center;
    }
    .bnumber_single h1 span {
        font-size: 30rem;
        font-weight: normal;
    }
    .bnumber_single h1 span strong {
        font-weight: bold;
        font-size: 40rem;
    }

    .bnumber_single .bnumber_single_mv {
        margin-top: 54rem;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .bnumber_single .bnumber_single_mv .cover_wrap {
        width: 360rem;
    }
    .bnumber_single .bnumber_single_mv .cover_wrap img {
        border: 1px solid #e1e1e1;
    }
    .bnumber_single .bnumber_single_mv .text {
        width: 605rem;
    }
    .bnumber_single .bnumber_single_mv .text ul li {
        color: #ed6d00;
        position: relative;
    }
    .bnumber_single .bnumber_single_mv .text ul li .feature {
        display: flex;
        align-items: center;
    }
    .bnumber_single .bnumber_single_mv .text ul li .feature.on_img {
        max-width: 475rem;
    }
    .bnumber_single .bnumber_single_mv .text ul li .feature span {
        display: block;
    }
    .bnumber_single .bnumber_single_mv .text ul li .feature span.feature_icon {
        background-color: #ed6d00;
        color: #fff;
        font-size: 18rem;
        min-width: 130rem;
        line-height: 1;
        padding: 20rem 5rem;
        word-break: keep-all;
        text-align: center;
    }
    .bnumber_single .bnumber_single_mv .text ul li .feature span.feature_tit {
        margin-left: 12rem;
        font-size: 20rem;
    }
    .bnumber_single .bnumber_single_mv .text ul li h2 {
        font-size: 42rem;
        font-weight: bold;
    }
    .bnumber_single .bnumber_single_mv .text ul li h2.on_img {
        max-width: 475rem;
    }
    .bnumber_single .bnumber_single_mv .text ul li .author {
        font-size: 13rem;
    }
    .bnumber_single .bnumber_single_mv .text ul li p.description {
        margin-top: 12rem;
        background-color: #e4f0f2;
        padding: 8rem 16rem;
        color: #434343;
    }
    .bnumber_single .bnumber_single_mv .text ul li .deco_wrap {
        max-width: 120rem;
        position: absolute;
        top: 0;
        right: 0;
    }
    .bnumber_single .bnumber_single_mv .text ul li .deco_wrap img {
        height: 120rem;
        width: auto;
    }
    .bnumber_single .bnumber_single_mv .text ul li + li {
        margin-top: 44rem;
    }
    .bnumber_single .bnumber_single_mv .text ul li:nth-child(2n) {
        color: #0079c2;
    }
    .bnumber_single .bnumber_single_mv .text ul li:nth-child(2n) .feature span.feature_icon {
        background-color: #0079c2;
    }

    .bnumber_single .buy_area {
        margin-top: 50rem;
    }
    .bnumber_single .buy_area .content_wrap {
        display: flex;
        justify-content: center;
    }
    .bnumber_single .buy_area .content_wrap p.btn_border a {
        width: 290rem;
        height: 120rem;
        border-radius: 60rem;
    }
    .bnumber_single .buy_area .content_wrap .book_data {
        margin-left: 20rem;
        line-height: 1.8;
    }

    .bnumber_single .questionnaire {
        margin-top: 100rem;
        padding-top: 60rem;
        padding-bottom: 54rem;
        background-image: linear-gradient(to right, #f4f4f4, #cacaca);
    }
    .bnumber_single .questionnaire h2 {
        text-align: center;
    }
    .bnumber_single .questionnaire h2 span {
        position: relative;
    }
    .bnumber_single .questionnaire h2 span::after {
        content: "";
        display: block;
        position: absolute;
        top: -96rem;
        left: -150rem;
        width: 140rem;
        height: 134rem;
        background-image: url(/assets/img/backnumber/pic_deco_questionnaire.svg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center center;
    }
    .bnumber_single .questionnaire .content_wrap {
        display: flex;
        justify-content: space-between;
        margin-top: 60rem;
        width: 670rem;
        margin-left: auto;
        margin-right: auto;
    }
    .bnumber_single .questionnaire .content_wrap .text {
        width: 470rem;
    }
    .bnumber_single .questionnaire .content_wrap .text .description span {
        font-weight: bold;
    }
    .bnumber_single .questionnaire .content_wrap .text .no_qr {
        margin-top: 40rem;
    }
    .bnumber_single .questionnaire .content_wrap .qr_wrap {
        width: 181rem;
    }

    .bnumber_single .bn_single_item + .bn_single_item {
        margin-top: 50rem;
    }

    .bnumber_single .bn_single_item h2 {
        text-align: center;
    }

    .bnumber_single .bn_single_item .content_area {
        margin-top: 25rem;
        padding-top: 35rem;
        border-top: 1px solid #00b5d0;
    }
    .bnumber_single .bn_single_item .content_area ul.box_list {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .bnumber_single .bn_single_item .content_area ul.box_list li {
        width: 300rem;
        margin-right: 50rem;
    }
    .bnumber_single .bn_single_item .content_area ul.box_list li:nth-child(n+4) {
        margin-top: 34rem;
    }
    .bnumber_single .bn_single_item .content_area ul.box_list li:nth-child(3n) {
        margin-right: 0;
    }
    .bnumber_single .bn_single_item .content_area ul.box_list li:last-child {
        margin-right: 0;
    }
    .bnumber_single .bn_single_item .content_area ul.box_list li h3 {
        font-weight: bold;
        font-size: 18rem;
        border-bottom: 1px dotted #00b5d0;
        padding-bottom: 8rem;
    }
    .bnumber_single .bn_single_item .content_area ul.box_list li h3 a {
        color: #014099;
        text-decoration: underline;
    }
    .bnumber_single .bn_single_item .content_area ul.box_list li h3 a:hover {
        text-decoration: none;
        text-decoration: underline transparent;
    }
    .bnumber_single .bn_single_item .content_area ul.box_list li p.author {
        margin-top: 10rem;
    }
    .bnumber_single .bn_single_item .content_area ul.box_list li p.description {
        margin-top: 18rem;
        background-color: #d4ecf0;
        padding: 8rem 10rem;
    }

    .bnumber_single .support {
        margin-top: 50rem;
    }
    .bnumber_single .support .content_area .free_text {
        padding-left: 60rem;
        padding-right: 60rem;
    }
    .bnumber_single .support .content_area .free_text h3 {
        border-bottom: 1px dotted #00b5d0;
        padding-bottom: 8rem;
        font-size: 18rem;
        font-weight: bold;
    }
    .bnumber_single .support .content_area .free_text h3:nth-of-type(n+2) {
        margin-top: 40rem;
    }
    .bnumber_single .support .content_area .free_text p {
        margin-top: 14rem;
    }
    .bnumber_single .support .content_area .free_text h3 + p + p {
        background-color: #e4f0f2;
        padding: 8rem 10rem;
    }
    .bnumber_single .support .content_area .free_text + ul {
        margin-top: 40rem;
    }
    .bnumber_single .support .content_area ul {
        padding-left: 60rem;
        padding-right: 60rem;
    }
    .bnumber_single .support .content_area ul li + li {
        margin-top: 40rem;
    }
    .bnumber_single .support .content_area ul li h3 {
        border-bottom: 1px dotted #00b5d0;
        padding-bottom: 8rem;
        font-size: 18rem;
        font-weight: bold;
    }
    .bnumber_single .support .content_area ul li h3 a {
        color: inherit;
    }
    .bnumber_single .support .content_area ul li p {
        margin-top: 14rem;
    }
    .bnumber_single .support .content_area ul li p.author {
        margin-top: 14rem;
    }
    .bnumber_single .support .content_area ul li p.text {
        background-color: #e4f0f2;
        padding: 8rem 10rem;
    }

    .bnumber_single .bn_label_item {
        margin-top: 75rem;
    }
    .bnumber_single .bn_label_item h2 {
        color: #fff;
        background-color: #00b5d0;
        padding: 25rem;
    }
    .bnumber_single .bn_label_item .content_wrap {
        margin-left: auto;
        margin-right: auto;
        width: 600rem;
        margin-top: 30rem;
    }
    .bnumber_single .bn_label_item .content_wrap h3 {
        font-weight: bold;
        text-align: center;
        font-size: 23rem;
        padding-bottom: 10rem;
        border-bottom: 1px dotted #00b5d0;
    }
    .bnumber_single .bn_label_item .content_wrap p.comic_author {
        text-align: center;
        margin-top: 14rem;
    }
    .bnumber_single .bn_label_item .content_wrap p.description {
        margin-top: 15rem;
        padding: 8rem 15rem;
        background-color: #e4f0f2;
    }

    .bnumber_single .free_content.bn_single_item {
        margin-top: 120rem;
    }

    .bnumber_single .free_content h2 {
        background-color: #00b5d0;
        color: #fff;
        font-weight: bold;
        font-size: 23rem;
        padding: 10rem;
    }
    .bnumber_single .free_content h2:nth-of-type(n+2) {
        margin-top: 80rem;
    }

    .bnumber_single .free_content p, .bnumber_single .free_content h3 {
        max-width: 880rem;
        margin-left: auto;
        margin-right: auto;
    }

    .bnumber_single .free_content h3 {
        margin-top: 40rem;
        border-bottom: 1px dotted #00b5d0;
        padding-bottom: 8rem;
        font-size: 18rem;
        font-weight: bold;
        margin-bottom: 8rem;
    }

    .bnumber_single .free_content p {
        margin-top: 12rem;
    }

    .bnumber_single .single_page_nav {
        margin-top: 80rem;
        background-color: #ededed;
        padding: 30rem 0;
    }
    .bnumber_single .single_page_nav ul {
        display: flex;
        justify-content: center;
    }
    .bnumber_single .single_page_nav ul li {
        width: 300rem;
    }
    .bnumber_single .single_page_nav ul li + li {
        margin-left: 20rem;
    }
    .bnumber_single .single_page_nav ul li.prev a::before, .bnumber_single .single_page_nav ul li.next a::before {
        content: "";
        display: block;
        position: absolute;
        width: 0;
        height: 0;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        top: 50%;
        transform: translateY(-50%);
        transition: .3s;
    }
    .bnumber_single .single_page_nav ul li.prev a::before {
        border-right: 8px solid #00b5d0;
        left: 22rem;
    }
    .bnumber_single .single_page_nav ul li.prev a:hover::before {
        border-right-color: #fff;
    }
    .bnumber_single .single_page_nav ul li.next a::before {
        border-left: 8px solid #00b5d0;
        right: 22rem;
    }
    .bnumber_single .single_page_nav ul li.next a:hover::before {
        border-left-color: #fff;
    }
    .bnumber_single .single_page_nav ul li a {
        position: relative;
        width: 100%;
        flex-direction: row;
    }

    .bnumber_single .book_area {
        margin-top: 110rem;
        padding-top: 90rem;
        padding-bottom: 105rem;
    }
    .bnumber_single .book_area h3 {
        margin-top: 0;
    }
    .bnumber_single .book_area .btn_area {
        margin-top: 85rem;
    }

    .backnumber_mv .mv_side {
        top: 0;
    }
    .all_b_number ul li .cover_wrap img {
        height: auto;
    }
    .bnumber-container {
        display: flex;
    }
    .bnumber-img-container {
        order: 1;
        flex-shrink: 0;
    }
    .bnumber-text-container {
        order: 2;
        text-align: center;
        padding: 0 20rem 20rem 40rem;
        color: #E1065E;
    }
    .bnumber-text-container .latest-feature-img {
        margin-bottom: 20rem;
    }
    .bnumber-text-container .feature {
        margin-bottom: 30rem;
    }
    .bnumber-text-container .feature_icon{
        background-color: #E1065E;
        color: #fff;
        font-size: 20rem;
        padding: 16rem 54rem;
        margin-bottom: 20rem;
    }
    .bnumber-text-container .special {
        margin-bottom: 10rem;
        font-size: 32rem;
        font-weight: 800;
    }
    .book-meta-info {
        background-color: #f2f2f2;
        width: 240rem;
        padding: 10rem;
        font-weight: 500;
        line-height: 2;
    }

    @media screen and (max-width: 767px) {
        .backnumber_mv {
            min-height: 0;
            position: relative;
        }
        .backnumber_mv.inner {
            width: auto;
        }
        .backnumber_mv .mv_side {
            position: static;
            margin-top: 30rem;
            width: auto;
            padding-bottom: 0;
        }
        .backnumber_mv .mv_side ul {
            display: flex;
            justify-content: space-between;
            width: 335rem;
            margin-left: auto;
            margin-right: auto;
        }
        .backnumber_mv .mv_side ul li {
            width: 105rem;
        }
        .backnumber_mv .mv_side ul li + li {
            margin-top: 0;
        }
        .backnumber_mv .btn_border {
            margin-top: 15rem;
            position: static;
            transform: translateX(0);
        }
        .backnumber_mv .btn_border a {
            margin-left: auto;
            margin-right: auto;
            border-radius: 25rem;
            height: 50rem;
            width: 160rem;
        }
        .all_b_number {
            margin-top: 50rem;
        }
        .all_b_number .vol_number {
            margin-top: 10rem;
        }
        .all_b_number ul {
            margin-top: 28rem;
            justify-content: space-between;
        }
        .all_b_number ul li {
            width: 160rem;
            margin-right: 0;
        }
        .all_b_number ul li:nth-child(n+4) {
            margin-top: 30rem;
        }
        .all_b_number ul li:nth-child(n+3) {
            margin-top: 30rem;
        }
        .all_b_number ul li h3 {
            text-align: center;
            font-size: 11.5rem;
            padding-bottom: 5rem;
            white-space: nowrap;
        }
        .all_b_number ul li h3 span {
            font-size: 18rem;
        }
        .all_b_number ul li .cover_wrap {
            text-align: center;
            padding: 10rem 0;
        }
        .all_b_number ul li .cover_wrap img {
            height: 175rem;
            width: auto;
        }
        .all_b_number ul li h4 {
            padding: 3rem 6rem;
            font-size: 13rem;
        }
        .all_b_number ul li p.description {
            margin-top: 10rem;
            line-height: 1.4;
            font-size: 12rem;
        }
        .bottom_page_nav {
            margin-top: 35rem;
        }
        .bnumber_single h1 {
            margin-top: 20rem;
            text-align: center;
        }
        .bnumber_single h1 span {
            font-size: 20rem;
        }
        .bnumber_single h1 span strong {
            font-size: 30rem;
        }
        .bnumber_single .bnumber_single_mv {
            margin-top: 30rem;
            display: block;
        }
        .bnumber_single .bnumber_single_mv .cover_wrap {
            width: 250rem;
            margin-left: auto;
            margin-right: auto;
        }
        .bnumber_single .bnumber_single_mv .text {
            margin-top: 25rem;
            width: auto;
        }
        .bnumber_single .bnumber_single_mv .text ul li .feature.on_img {
            max-width: 280rem;
        }
        .bnumber_single .bnumber_single_mv .text ul li .feature span.feature_icon {
            font-size: 13rem;
            min-width: 75rem;
            padding: 6rem 5rem;
        }
        .bnumber_single .bnumber_single_mv .text ul li .feature span.feature_tit {
            margin-left: 8rem;
            font-size: 13rem;
        }
        .bnumber_single .bnumber_single_mv .text ul li h2 {
            font-size: 35rem;
        }
        .bnumber_single .bnumber_single_mv .text ul li h2.on_img {
            max-width: 280rem;
        }
        .bnumber_single .bnumber_single_mv .text ul li .author {
            font-size: 12rem;
        }
        .bnumber_single .bnumber_single_mv .text ul li p.description {
            margin-top: 5rem;
            padding: 8rem 12rem;
        }
        .bnumber_single .bnumber_single_mv .text ul li .deco_wrap {
            max-width: 52rem;
            max-height: 65rem;
        }
        .bnumber_single .bnumber_single_mv .text ul li .deco_wrap img {
            height: auto;
            width: auto;
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
        .bnumber_single .bnumber_single_mv .text ul li + li {
            margin-top: 25rem;
        }
        .bnumber_single .buy_area {
            margin-top: 25rem;
        }
        .bnumber_single .buy_area .content_wrap {
            justify-content: space-between;
            align-items: center;
        }
        .bnumber_single .buy_area .content_wrap p.btn_border a {
            width: 160rem;
            height: 50rem;
            border-radius: 25rem;
        }
        .bnumber_single .buy_area .content_wrap .book_data {
            width: 160rem;
            margin-left: 0;
            line-height: 1.8;
            font-size: 11rem;
        }
        .bnumber_single .questionnaire {
            margin-top: 55rem;
            padding-top: 36rem;
            padding-bottom: 30rem;
        }
        .bnumber_single .questionnaire h2 span {
            display: inline-block;
            max-width: 206rem;
        }
        .bnumber_single .questionnaire h2 span::after {
            content: "";
            display: block;
            background-image: url(/assets/img/backnumber/pic_deco_questionnaire.svg);
            background-repeat: no-repeat;
            background-size: 100% auto;
            top: -62rem;
            left: -72rem;
            width: 78rem;
            height: 75rem;
        }
        .bnumber_single .questionnaire .content_wrap {
            display: block;
            margin-top: 20rem;
            width: 335rem;
        }
        .bnumber_single .questionnaire .content_wrap .text {
            width: auto;
        }
        .bnumber_single .questionnaire .content_wrap .text .description br {
            display: none;
        }
        .bnumber_single .questionnaire .content_wrap .text .no_qr {
            display: none;
        }
        .bnumber_single .questionnaire .content_wrap .qr_wrap {
            display: none;
        }
        .bnumber_single .questionnaire .btn_wrap {
            margin-top: 20rem;
        }
        .bnumber_single .bn_single_item + .bn_single_item {
            margin-top: 40rem;
        }
        .bnumber_single .bn_single_item .content_area {
            margin-top: 18rem;
            padding-top: 20rem;
        }
        .bnumber_single .bn_single_item .content_area ul.box_list {
            display: block;
        }
        .bnumber_single .bn_single_item .content_area ul.box_list li {
            width: auto;
            margin-right: 0;
            margin-top: 34rem;
        }
        .bnumber_single .bn_single_item .content_area ul.box_list li h3 {
            font-size: 14rem;
            padding-bottom: 8rem;
        }
        .bnumber_single .bn_single_item .content_area ul.box_list li p.author {
            margin-top: 10rem;
        }
        .bnumber_single .bn_single_item .content_area ul.box_list li p.description {
            margin-top: 12rem;
            padding: 8rem 6rem;
        }
        .bnumber_single .support {
            margin-top: 35rem;
        }
        .bnumber_single .support .content_area .free_text {
            padding-left: 0;
            padding-right: 0;
        }
        .bnumber_single .support .content_area .free_text h3 {
            padding-bottom: 8rem;
            font-size: 14rem;
        }
        .bnumber_single .support .content_area .free_text h3:nth-of-type(n+2) {
            margin-top: 34rem;
        }
        .bnumber_single .support .content_area .free_text p {
            margin-top: 10rem;
        }
        .bnumber_single .support .content_area .free_text h3 + p {
            font-size: 12rem;
        }
        .bnumber_single .support .content_area .free_text h3 + p + p {
            margin-top: 12rem;
            padding: 8rem 6rem;
        }
        .bnumber_single .support .content_area .free_text + ul {
            margin-top: 34rem;
        }
        .bnumber_single .support .content_area ul {
            padding-left: 0;
            padding-right: 0;
        }
        .bnumber_single .support .content_area ul li + li {
            margin-top: 34rem;
        }
        .bnumber_single .support .content_area ul li h3 {
            padding-bottom: 8rem;
            font-size: 14rem;
        }
        .bnumber_single .support .content_area ul li h3 a {
            color: inherit;
        }
        .bnumber_single .support .content_area ul li p {
            margin-top: 10rem;
        }
        .bnumber_single .support .content_area ul li p.author {
            font-size: 12rem;
        }
        .bnumber_single .support .content_area ul li p.text {
            margin-top: 12rem;
            padding: 8rem 6rem;
        }
        .bnumber_single .bn_label_item {
            margin-top: 45rem;
        }
        .bnumber_single .bn_label_item h2 {
            padding: 25rem;
        }
        .bnumber_single .bn_label_item .content_wrap {
            width: auto;
            margin-top: 18rem;
        }
        .bnumber_single .bn_label_item .content_wrap h3 {
            font-size: 14rem;
            padding-bottom: 15rem;
        }
        .bnumber_single .bn_label_item .content_wrap p.description {
            margin-top: 20rem;
            padding: 8rem 12rem;
        }
        .bnumber_single .free_content.bn_single_item {
            margin-top: 80rem;
        }
        .bnumber_single .free_content h2 {
            font-size: 18rem;
            padding: 6rem;
        }
        .bnumber_single .free_content h2:nth-of-type(n+2) {
            margin-top: 60rem;
        }
        .bnumber_single .free_content h3 {
            margin-top: 34rem;
            padding-bottom: 8rem;
            font-size: 14rem;
        }
        .bnumber_single .single_page_nav {
            margin-top: 50rem;
            padding: 25rem 0;
        }
        .bnumber_single .single_page_nav ul {
            width: 355rem;
            justify-content: space-between;
        }
        .bnumber_single .single_page_nav ul li {
            width: 115rem;
            line-height: 1.4;
        }
        .bnumber_single .single_page_nav ul li + li {
            margin-left: 0;
        }
        .bnumber_single .single_page_nav ul li.prev a::before, .bnumber_single .single_page_nav ul li.next a::before {
            border-top-width: 5px;
            border-bottom-width: 5px;
        }
        .bnumber_single .single_page_nav ul li.prev a::before {
            border-right-width: 5px;
            left: 4rem;
        }
        .bnumber_single .single_page_nav ul li.next a::before {
            border-left-width: 5px;
            right: 4rem;
        }
        .bnumber_single .single_page_nav ul li a {
            text-align: center;
            font-size: 12rem;
        }
        .bnumber_single .book_area {
            margin-top: 80rem;
            padding-top: 36rem;
            padding-bottom: 40rem;
        }
        .bnumber_single .book_area .btn_area {
            margin-top: 30rem;
        }
        .bnumber-container {
            display: block;
        }
        .bnumber-text-container {
            padding: 20rem;
        }
        .bnumber-img-container {
            text-align: center;
        }
        .bnumber-img-container img {
            width: 240rem;
            height: 338.4rem;
        }
        .bnumber-img-container .book-meta-info {
            display: inline-block;
            text-align: left;
        }
        .backnumber_mv .mv_side ul {
            justify-content: center;
        }
        .backnumber_mv .mv_side ul li + li {
            margin-left: 10rem;
        }
    }
}

/*# sourceMappingURL=backnumber.css.map */
/* ==================================
   RPG
   ================================== */
:root {
    --rpg-blue: #00b5d0;
    --rpg-dark-blue: #014095;
    --rpg-text-color: #434343;
    --rpg-shadow-color: rgba(0, 0, 0, 0.1);
    --max-width-game: 480px; /* PCでのゲームリスト最大幅 */
}
.page-rpg-single,
.page-rpg {

    /* ==================================
       1. RPG LIST ARCHIVE ( /rpg/ )
       ================================== */
    .rpg_archive .mv {
        margin-top: 0;
        padding: 60rem 0 55rem; /* rem単位は維持 */
    }
    .rpg_archive .mv p {
        text-align: center;
        margin-top: 30rem;
    }

    .rpg_archive .rpg_gametitle_list {
        padding: 80rem 0 0;
    }

    .rpg_archive .rpg_gametitle_list .list_wrap {
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    /* 個々のゲーム要素 */
    .rpg_archive .rpg_gametitle_list .list_wrap .game {
        width: var(--max-width-game);
        margin-bottom: 5%;
    }

    /* 偶数番目のアイテムのマージン調整 (元のレイアウト再現) */
    .rpg_archive .rpg_gametitle_list .list_wrap .game:nth-child(2n) {
        margin-right: 0;
    }

    /* タイトルエリア */
    .rpg_archive .rpg_gametitle_list .list_wrap .game .ttl_area {
        text-align: center;
        padding: 20rem 0 10rem;
        border-bottom: 1px dashed var(--rpg-blue);
        min-height: 100rem;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
    }
    .rpg_archive .rpg_gametitle_list .list_wrap .game .ttl_area h2 {
        font-size: 20rem;
        line-height: 1.5;
    }
    .rpg_archive .rpg_gametitle_list .list_wrap .game .ttl_area h2 span {
        display: inline-block;
        position: relative;
    }
    .rpg_archive .rpg_gametitle_list .list_wrap .game .ttl_area h2 span.main_tit {
        font-size: 25rem;
        font-weight: bold;
        display: block;
    }

    /* Newアイコン */
    .rpg_archive .rpg_gametitle_list .list_wrap .game.new .ttl_area h2 {
        padding: 0 46rem;
    }
    .rpg_archive .rpg_gametitle_list .list_wrap .game.new .ttl_area h2::before {
        content: "";
        display: inline-block;
        position: absolute;
        width: 39rem;
        height: 39rem;
        /* 画像パスは Next.js の public から読み込むよう修正が必要です */
        background: url(/assets/img/ico_new.svg) no-repeat center center;
        background-size: contain;
        top: -6rem;
        left: 0;
    }

    /* テキストエリア */
    .rpg_archive .rpg_gametitle_list .list_wrap .game .txt_area p {
        margin: 15rem 0 30rem;
    }

    /* メインボタンエリア */
    .rpg_archive .rpg_gametitle_list .list_wrap .game .mainbtn_area {
        margin-bottom: 20rem;
    }

    /* サブボタンエリア */
    .rpg_archive .rpg_gametitle_list .list_wrap .game .subbtn_area {
        display: flex;
        justify-content: space-evenly;
    }
    .rpg_archive .rpg_gametitle_list .list_wrap .game .subbtn_area .btn_border {
        width: 100%;
        margin-right: 3%;
        line-height: 1.2;
        text-align: center;
    }
    .rpg_archive .rpg_gametitle_list .list_wrap .game .subbtn_area .btn_border a {
        width: auto;
        flex-wrap: wrap;
        flex-direction: row;
        align-content: center;
        padding: 0 10rem;
    }
    .rpg_archive .rpg_gametitle_list .list_wrap .game .subbtn_area .btn_border a span {
        display: block;
    }
    .rpg_archive .rpg_gametitle_list .list_wrap .game .subbtn_area .btn_border:last-child {
        margin-right: 0;
    }

    /* 外部リンクエリア (blankbtn_area) */
    .rpg_archive .rpg_gametitle_list .list_wrap .game .blankbtn_area .btn_border a {
        height: 143rem;
    }
    .rpg_archive .rpg_gametitle_list .list_wrap .game .blankbtn_area .btn_border a:hover p + p {
        border-top: 1px dashed #fff;
    }
    .rpg_archive .rpg_gametitle_list .list_wrap .game .blankbtn_area .btn_border a p {
        padding: 0 0 15rem;
    }
    .rpg_archive .rpg_gametitle_list .list_wrap .game .blankbtn_area .btn_border a p span {
        font-size: 14rem;
        font-weight: normal;
    }
    .rpg_archive .rpg_gametitle_list .list_wrap .game .blankbtn_area .btn_border a p + p {
        font-size: 14rem;
        font-weight: normal;
        border-top: 1px dashed var(--rpg-blue);
        width: 90%;
        text-align: center;
        padding: 15rem 0 0;
        transition: .3s;
        transition-property: border;
    }

    /* ==================================
       2. RPG SINGLE ( /rpg/slug )
       ================================== */
    .rpg_single .mv {
        margin-top: 0;
    }
    .rpg_single .mv h1 {
        text-align: center;
    }
    .rpg_single .mv h1 img {
        height: 550rem;
        width: auto; /* imgタグは削除されるが、Imageコンポーネントが処理する */
    }

    /* ページメニュー (サポート/ダウンロードボタン) */
    .rpg_single .page_menu .btn_wrap {
        display: flex;
        justify-content: space-evenly;
        margin: 30rem auto;
    }
    .rpg_single .page_menu .btn_wrap .btn_border {
        width: 100%;
        margin-right: 3%;
        line-height: 1.2;
        text-align: center;
    }
    .rpg_single .page_menu .btn_wrap .btn_border a {
        width: auto;
        height: 100rem;
    }
    .rpg_single .page_menu .btn_wrap .btn_border a:hover p + p {
        border-top: 1px solid #fff;
    }
    .rpg_single .page_menu .btn_wrap .btn_border p {
        font-size: 18rem;
        font-weight: bold;
        padding: 0 0 10rem;
    }
    .rpg_single .page_menu .btn_wrap .btn_border p + p {
        font-size: 14rem;
        font-weight: normal;
        text-align: center;
        padding: 15rem 0 0;
        border-top: 1px solid var(--rpg-blue);
        width: auto;
        transition: .3s;
        transition-property: border;
    }
    .rpg_single .page_menu .btn_wrap .btn_border:last-child {
        margin-right: 0;
    }

    /* RPG ポイント/紹介セクション */
    .rpg_single .rpg_point {
        color: var(--rpg-dark-blue);
        text-align: center;
        /* background-imageはJSXのインラインスタイルで動的に処理されます */
        background: url(../../img/rpg/bg_rpg_intro.png) no-repeat center top; 
        background-size: 1920rem auto;
    }
    .rpg_single .rpg_point .intro {
        padding-top: 95rem;
        padding-bottom: 45rem;
    }
    .rpg_single .rpg_point .intro .inner h2 {
        margin: 0 0 40rem;
    }
    .rpg_single .rpg_point .intro .inner p {
        font-size: 18rem;
        line-height: 2.5;
        margin-bottom: 20rem;
    }
    .rpg_single .rpg_point .inner .content-wrap .btn_less {
        cursor: pointer;
        width: var(--max-width-game);
        min-height: 60rem;
        padding: 10rem;
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10rem;
        color: var(--rpg-text-color);
        font-size: 18rem;
        background-color: #fff;
        border: 1px solid var(--rpg-blue);
        box-shadow: 0 5rem 0 0 var(--rpg-shadow-color);
        margin: 0 auto 80rem;
        transition: .3s;
    }
    .rpg_single .rpg_point .inner .content-wrap .btn_less p b, 
    .rpg_single .rpg_point .inner .content-wrap .btn_less p span {
        display: inline-block;
    }
    .rpg_single .rpg_point .inner .content-wrap .btn_less p::after {
        content: "▲";
        font-size: 15rem;
        color: var(--rpg-blue);
        margin-left: 10rem;
        transform: scaleX(1.2);
    }
    .rpg_single .rpg_point .inner .content-wrap .btn_less.btn_open {
        transform: translateY(-20rem);
    }
    .rpg_single .rpg_point .inner .content-wrap .btn_less.btn_open p::after {
        content: "▼";
    }
    .rpg_single .rpg_point .inner .content-wrap .point + .point {
        margin-top: 80rem;
    }
    .rpg_single .rpg_point .inner .content-wrap .point h3 {
        font-size: 28rem;
        font-weight: bold;
        margin-bottom: 20rem;
    }
    .rpg_single .rpg_point .inner .content-wrap .point h4 {
        font-size: 28rem;
        font-weight: bold;
        margin-top: 20rem;
        padding-bottom: 10rem;
        border-bottom: 1px solid var(--rpg-dark-blue);
    }
    .rpg_single .rpg_point .inner .content-wrap .point h4 + p {
        padding-top: 20rem;
    }
    .rpg_single .rpg_point .inner .content-wrap .point p {
        font-size: 14rem;
        line-height: 2;
    }

    /* ==================================
       3. LOGO SLIDER
       ================================== */
    .logo_slider {
        padding-bottom: 45rem;
    }

    /* ==================================
       4. RESPONSIVE (MAX-WIDTH: 767PX)
       ================================== */
    @media screen and (max-width: 767px) {
        .rpg_archive .mv {
            padding: 20rem 0 35rem;
        }
        .rpg_archive .mv p {
            margin-top: 15rem;
        }
        .rpg_archive .rpg_gametitle_list {
            padding: 0;
            margin-top: 32rem;
        }
        .rpg_archive .rpg_gametitle_list .list_wrap .game {
            width: 100%;
            margin-bottom: 50rem;
        }
        .rpg_archive .rpg_gametitle_list .list_wrap .game .ttl_area {
            min-height: 80rem;
        }
        .rpg_archive .rpg_gametitle_list .list_wrap .game .ttl_area h2 {
            font-size: 15rem;
            line-height: 1.4;
        }
        .rpg_archive .rpg_gametitle_list .list_wrap .game .ttl_area h2 span.main_tit {
            font-size: 19rem;
        }
        .rpg_archive .rpg_gametitle_list .list_wrap .game .ttl_area p {
            margin: 20rem 0;
        }
        .rpg_archive .rpg_gametitle_list .list_wrap .game .txt_area p {
            margin: 20rem 0;
        }
        .rpg_archive .rpg_gametitle_list .list_wrap .game .mainbtn_area {
            margin-bottom: 15rem;
        }
        .rpg_archive .rpg_gametitle_list .list_wrap .game .subbtn_area {
            display: flex;
            justify-content: space-evenly;
        }
        .rpg_archive .rpg_gametitle_list .list_wrap .game .subbtn_area .btn_border {
            width: 100%;
            margin-right: 4%;
        }
        .rpg_archive .rpg_gametitle_list .list_wrap .game .subbtn_area .btn_border a {
            width: auto;
        }
        .rpg_archive .rpg_gametitle_list .list_wrap .game .subbtn_area .btn_border:last-child {
            margin-right: 0;
        }
        .rpg_archive .rpg_gametitle_list .list_wrap .game .blankbtn_area .btn_border a {
            height: 135rem;
        }
        .rpg_archive .rpg_gametitle_list .list_wrap .game .blankbtn_area .btn_border a p {
            padding: 0 0 15rem;
        }
        .rpg_archive .rpg_gametitle_list .list_wrap .game .blankbtn_area .btn_border a p span {
            font-size: 10rem;
        }
        .rpg_archive .rpg_gametitle_list .list_wrap .game .blankbtn_area .btn_border a p + p {
            font-size: 12rem;
            padding: 10rem 0;
        }
        .rpg_archive .rpg_gametitle_list .list_wrap .game.new .ttl_area h2 {
            padding: 0 40rem;
        }
        .rpg_archive .rpg_gametitle_list .list_wrap .game.new .ttl_area h2::before {
            width: 30rem;
            height: 30rem;
            top: -6rem;
        }
        .rpg_archive .rpg_gametitle_list .list_wrap .game:nth-child(2n) {
            margin-right: 0;
        }
        
        .rpg_single .mv h1 img {
            height: auto;
        }
        .rpg_single .page_menu .btn_wrap {
            margin: 30rem auto;
        }
        .rpg_single .page_menu .btn_wrap .btn_border {
            margin-right: 4%;
        }
        .rpg_single .rpg_point {
            /* 背景画像をモバイル用に修正 */
            background: url(../../img/rpg/bg_rpg_intro_sp.png) no-repeat center top;
            background-size: 100% auto;
        }
        .rpg_single .rpg_point .intro {
            padding-top: 50rem;
            padding-bottom: 20rem;
        }
        .rpg_single .rpg_point .intro .inner h2 {
            margin-bottom: 20rem;
        }
        .rpg_single .rpg_point .intro .inner p {
            font-size: 15rem;
            line-height: 2;
            margin-bottom: 15rem;
        }
        .rpg_single .rpg_point .inner .content-wrap .btn_less {
            width: 100%;
            font-size: 13rem;
            min-height: 60rem;
            margin: 0 auto 45rem;
        }
        .rpg_single .rpg_point .inner .content-wrap .point + .point {
            margin-top: 40rem;
        }
        .rpg_single .rpg_point .inner .content-wrap .point h3 {
            font-size: 20rem;
        }
        .rpg_single .rpg_point .inner .content-wrap .point h4 {
            font-size: 16rem;
        }
        .rpg_single .rpg_point .inner .content-wrap .point p {
            font-size: 13rem;
            line-height: 1.6;
            text-align: left;
        }
    }
}
/* ==================================
   チュートリアル
   ================================== */
.page-tutorial {

    .bg_blue {
        background: #e4fbff;
    }

    .bg_green {
        background: #d9f2e4;
    }

    .bg_pink {
        background: #fff1fb;
    }

    /* --- メインビジュアル --- */
    .mv {
        margin-top: 50rem;
        position: relative;
        padding-bottom: 105rem;

        h1 {
            text-align: center;
            margin-bottom: 30rem;
        }

        .pic {
            text-align: center;
        }

        .ttl {
            position: absolute;
            bottom: 145rem;
            left: 75rem;
        }

        &::after {
            display: block;
            content: "";
            width: 1210rem;
            height: 265rem;
            background: url(../../../public/images/tutorial/mv_logo.jpg) no-repeat center center;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            z-index: -1;
            background-size: contain;
        }
    }

    /* --- 導入 (intro) --- */
    .intro {
        margin-top: -60rem;
        margin-bottom: 100rem;

        h2 {
            text-align: center;
            width: 245rem;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 35rem;
        }

        h3 {
            text-align: center;
            font-size: 20rem;
            color: #e700ae;
            margin-bottom: 40rem;
            font-weight: bold;
        }

        p {
            width: 80%;
            margin: 0 auto 40rem;
        }
    }

    /* --- TRPGの一例 (example) --- */
    .example {
        padding-top: 85rem;

        .ttl_block {
            position: relative;
            padding-top: 60rem;
            margin-bottom: 65rem;

            .bg_img {
                position: absolute;
                top: 0;
                left: 50%;
                transform: translateX(-50%);
                z-index: -1;
                width: 100%;
                text-align: center;
            }

            h2 {
                text-align: center;
                margin-bottom: 260rem;
            }

            p.example_lead {
                text-align: center;
            }
        }

        .contents_block {
            width: 80%;
            margin: 0 auto;

            h3 {
                color: #014099;
                font-size: 18rem;
                font-weight: bold;
                margin-bottom: 40rem;
            }

            p {
                margin-bottom: 40rem;
            }

        }
    }

    /* --- TRPG用語集 (words) --- */
    .words {
        margin-bottom: 40rem;

        .ttl_block {
            h2 {
                text-align: center;
                margin-left: 10rem;
            }

            p {
                text-align: center;
                color: #e700ae;
                font-size: 20rem;
                font-weight: bold;
                margin: 40rem 0 35rem;
            }
        }

        .contents_wrap {
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;

            .contents_block {
                padding: 0rem 20rem 20rem;
                width: calc(91%/4);
                margin-right: 3%;
                margin-bottom: 3%;

                h3 {
                    text-align: center;
                    font-size: 20rem;
                    font-weight: bold;
                    color: #014099;
                    border-bottom: 1px solid #00b5d0;
                    line-height: 1.2;
                    height: 80rem;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;

                    span {
                        display: block;
                        font-size: 14rem;
                    }
                }

                p {
                    padding-top: 15rem;
                    line-height: 1.4;

                    span {
                        font-weight: bold;
                    }
                }

                &:nth-of-type(4n) {
                    margin-right: 0;
                }

                &:nth-of-type(odd) {
                    background: #e4fbff;
                }

                &:nth-of-type(even) {
                    background: #d9f2e4;
                }
            }

        }
    }

    /* --- アイテム紹介 (items) --- */
    .items {
        margin-bottom: 50rem;

        .ttl_block {
            h2 {
                text-align: center;
                margin-left: 25rem;
            }

            p {
                text-align: center;
                color: #e700ae;
                font-size: 20rem;
                font-weight: bold;
                margin: 40rem 0 35rem;
            }
        }

        .contents_wrap {
            background: url(../../../public/images/tutorial/pic_02.png) no-repeat center top;
            background-size: cover;
            width: 80%;
            margin: 0 auto;

            .contents_block {
                width: 80%;
                margin: 0 auto 20rem;
                padding: 20rem;

                h3 {
                    text-align: center;
                    font-size: 20rem;
                    font-weight: bold;
                    color: #014099;
                    padding-bottom: 10rem;
                    border-bottom: 1px solid #00b5d0;
                }

                p {
                    padding-top: 10rem;
                    line-height: 2;

                    span {
                        font-weight: bold;
                    }
                }
            }
        }
    }

    /* --- プレイヤーをやりたい！ (howto) --- */
    .howto {
        margin-bottom: 100rem;

        .ttl_block {
            h2 {
                text-align: center;
                margin-left: -25rem;
            }

            p {
                text-align: center;
                color: #e700ae;
                font-size: 20rem;
                font-weight: bold;
                margin: 40rem 0 35rem;
            }
        }

        .contents_block {
            width: 85%;
            margin: 0 auto;

            h3 {
                text-align: center;
                margin-left: 10rem;
                img {
                    max-width: 245rem;
                }
            }

            p {
                padding: 70rem 20rem 30rem;
                margin: -50rem auto 30rem;
                line-height: 2;
            }

            &:nth-of-type(odd) {
                p {
                    background: #e4fbff;
                }
            }

            &:nth-of-type(even) {
                p {
                    background: #d9f2e4;
                }
            }
        }
    }

    /* --- ゲームマスターデビュー (debut) --- */
    .debut {
        margin-bottom: 140rem;

        .ttl_block {
            h2 {
                text-align: center;
            }

            p {
                text-align: center;
                color: #e700ae;
                font-size: 20rem;
                font-weight: bold;
                margin: 50rem 0;
            }
        }

        .contents_block {
            width: 85%;
            margin: 0 auto;

            h3 {
                text-align: center;
                margin-left: 73rem;
                img {
                    max-width: 311rem;
                }
            }

            p {
                padding: 70rem 20rem 30rem;
                margin: -50rem auto 60rem;
                line-height: 2;
            }

        }
    }

    /* --- さいごに (outro) --- */
    .outro {
        .ttl_block {
            h2 {
                text-align: center;
                margin-left: 5rem;
            }

            p {
                text-align: center;
                color: #e700ae;
                font-size: 20rem;
                font-weight: bold;
                margin: 40rem 0 35rem;
            }
        }

        .contents_block {
            width: 85%;
            margin: 0 auto;

            h3 {
                text-align: center;
                margin-left: 15rem;
                img {
                    max-width: 245rem;
                }
            }

            p {
                padding: 70rem 20rem 30rem;
                margin: -45rem auto 40rem;
                line-height: 2;
            }

        }
    }

    /* --- エンドビジュアル (ev) --- */
    .ev {
        margin-top: 50rem;
        position: relative;
        padding-bottom: 105rem;

        h2 {
            text-align: center;
            margin-bottom: 30rem;
        }

        .pic {
            text-align: center;
        }

        &::after {
            display: block;
            content: "";
            width: 1210rem;
            height: 265rem;
            background: url(../../../public/images/tutorial/mv_logo.jpg) no-repeat center center;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            z-index: -1;
            background-size: contain;
        }
    }


    /* --- レスポンシブ (max-width: 767px) --- */
    @media screen and (max-width: 767px) {
        .mv {
            position: relative;
            width: 100vw;
            margin: 50rem calc(50% - 50vw) 0;
            padding-bottom: 60rem;

            h1 {
                text-align: center;
                margin-bottom: 30rem;
            }

            .pic {
                width: 95%;
                margin: 0 auto;
            }


            .ttl {
                display: none;
            }

            &::after {
                width: 361rem;
                height: 79rem;
            }
        }

        .intro {
            position: relative;
            margin-top: -25rem;

            h2 {
                text-align: center;
                width: 50%;
                margin: 0 auto 25rem;
            }

            h3 {
                font-size: 15rem;
                margin-bottom: 35rem;
            }

            p {
                width: 100%;
                margin-bottom: 60rem;
            }
        }


        .example {
            padding-top: 45rem;

            .ttl_block {
                padding-top: 20rem;
                margin-bottom: 35rem;

                h2 {
                    margin: 0 auto 75rem;
                    width: 50%;
                }

            }

            .contents_block {
                width: 100%;
                margin: 0 auto;

                h3 {
                    font-size: 15rem;
                    margin-bottom: 25rem;
                }

                p {
                    margin-bottom: 25rem;
                }

            }
        }


        .words {
            .ttl_block {
                h2 {
                    width: 100vw;
                    margin: 50rem calc(50% - 50vw) 0;

                    picture {
                        width: 98%;
                        margin: 0 auto;
                        display: block;
                    }
                }

                p {
                    font-size: 15rem;
                    margin: 15rem 0 20rem;
                }
            }

            .contents_wrap {
                margin: 0 auto;
                display: flex;
                flex-wrap: wrap;

                .contents_block {
                    padding: 0rem 10rem 10rem;
                    width: calc(97%/2);

                    h3 {
                        font-size: 17rem;
                        height: 65rem;

                        span {
                            display: block;
                            font-size: 14rem;
                        }
                    }

                    p {
                        padding-top: 12rem;
                        line-height: 1.4;

                        span {
                            font-weight: bold;
                        }
                    }

                    &:nth-of-type(2n) {
                        margin-right: 0;
                    }

                }

            }
        }

        .items {
            .ttl_block {
                h2 {
                    width: 100vw;
                    margin: 50rem calc(50% - 50vw) 0;

                    picture {
                        width: 98%;
                        margin: 0 auto;
                        display: block;
                    }
                }

                p {
                    font-size: 15rem;
                    margin: 15rem 0 20rem;
                }
            }

            .contents_wrap {
                background: url(../../../public/images/tutorial/pic_02_sp.png) no-repeat center top 250rem;
                background-size: auto;
                width: 100%;

                .contents_block {
                    width: 90%;

                    h3 {
                        font-size: 17rem;
                    }

                    p {
                        font-size: 12rem;
                        line-height: 1.5;
                    }

                }
            }

        }

        .howto {
            margin-bottom: 50rem;

            .ttl_block {
                h2 {
                    width: 100vw;
                    margin: 50rem calc(50% - 50vw) 0;

                    picture {
                        width: 98%;
                        margin: 0 auto;
                        display: block;
                    }
                }

                p {
                    font-size: 15rem;
                    margin: 15rem 0 20rem;
                }
            }

            .contents_block {
                width: 100%;
                margin: 0 auto;

                h3 {
                    margin: 0 auto;
                    width: 50%;
                    img {
                        max-width: none;
                    }
                }

                p {
                    padding: 50rem 20rem 20rem;
                    margin: -35rem auto 25rem;
                    line-height: 1.7;
                }

                &:nth-of-type(odd) {
                    p {
                        background: #e4fbff;
                    }
                }

                &:nth-of-type(even) {
                    p {
                        background: #d9f2e4;
                    }
                }
            }
        }

        .debut {
            .ttl_block {
                h2 {
                    picture {
                        width: 100%;
                        margin: 0 auto;
                        display: block;
                    }
                }

                p {
                    font-size: 15rem;
                    margin: 15rem 0 20rem;
                }
            }

            .contents_block {
                width: 100%;
                margin: 0 auto;

                h3 {
                    width: 67%;
                    img {
                        max-width: none;
                    }
                }

                p {
                    padding: 50rem 20rem 20rem;
                    margin: -35rem auto 25rem;
                    line-height: 1.7;
                }

            }
        }

        .outro {
            .ttl_block {
                h2 {
                    width: 100vw;
                    margin: 50rem calc(50% - 50vw) 0;

                    picture {
                        width: 98%;
                        margin: 0 auto;
                        display: block;
                    }
                }

                p {
                    font-size: 15rem;
                    margin: 15rem 0 20rem;
                }
            }

            .contents_block {
                width: 100%;
                margin: 0 auto;

                h3 {
                    width: 50%;
                    margin: 0 auto;
                    img {
                        max-width: none;
                    }
                }

                p {
                    padding: 60rem 20rem 20rem;
                    margin: -35rem auto 18rem;
                    line-height: 1.7;
                }

            }
        }


        .ev {
            position: relative;
            margin: 12rem auto 0;
            padding-bottom: 56rem;

            h2 {
                width: 183rem;
                margin-left: auto;
                margin-right: auto;
                margin-bottom: 16rem;
            }

            .pic {
                width: 300rem;
                margin-left: auto;
                margin-right: auto;
            }


            &::after {
                width: 361rem;
                height: 79rem;
            }
        }

    } /* end of media query */

} /* end of .page-tutorial */
/* ==================================
   サークルコンベンション
   ================================== */
.page-circle-convention {
    .intro {
        margin-top: 50rem;
        margin-bottom: 70rem;
        text-align: center;
    }
    .intro .inner {
        position: relative;
    }
    .intro .inner .circle_right {
        position: absolute;
        top: -25%;
        right: 5%;
    }
    .intro .inner h1 {
        margin-bottom: 60rem;
    }
    .intro .inner h2 {
        font-size: 23rem;
        font-weight: bold;
        margin-bottom: 30rem;
    }
    .intro .inner p {
        line-height: 2;
    }

    .try_online {
        text-align: center;
        padding-bottom: 60rem;
        background: url(../../img/circle-convention/bg_gradation_border.jpg) repeat-x bottom right;
    }
    .try_online h2 {
        font-size: 23rem;
        font-weight: bold;
        margin-bottom: 40rem;
    }
    .try_online h2 span {
        font-size: 30rem;
        color: #014099;
    }
    .try_online p {
        display: flex;
        justify-content: center;
    }

    .circle_right-container {
        position: relative;
        width: 190px;
        height: 190px;
    }

    @media screen and (max-width: 1024px) {
        .intro .inner .circle_right {
            position: absolute;
            top: -25%;
            right: 8%;
            width: 18%;
        }
        .intro .inner .circle_right img {
            width: 100%;
        }
    }

    @media screen and (max-width: 767px) {
        .intro {
            margin-top: 0;
            margin-bottom: 40rem;
        }
        .intro .inner .circle_right {
            display: none;
        }
        .intro .inner h1 {
            margin-bottom: 50rem;
        }
        .intro .inner h1 img {
            height: 211rem;
        }
        .intro .inner h2 {
            font-size: 17rem;
            font-weight: bold;
            margin-bottom: 40rem;
        }
        .try_online {
            padding-bottom: 23rem;
            background: url(../../img/circle-convention/bg_gradation_border_sp.jpg) repeat-x bottom right;
            background-size: contain;
        }
        .try_online h2 {
            font-size: 20rem;
            margin-bottom: 40rem;
        }
        .try_online h2 span {
            font-size: 25rem;
        }
    }
}

/*# sourceMappingURL=circle-convention.css.map */
/* ==================================
   お問い合わせ
   ================================== */
.page-contact {

    .side_btns {
        display: none !important;
    }

    h1 {
        margin-top: 40rem;
    }

    .contact_lead {
        margin-top: 45rem;
        text-align: center;
    }
    .contact_lead p {
        color: #434343;
        line-height: 2.2;
        font-size: 14px;
    }

    .step {
        position: relative;
        z-index: 3;
    }
    .step.inner {
        width: 700px;
    }
    .step ol {
        display: flex;
        align-items: center;
    }
    .step ol li {
        display: flex;
        align-items: center;
        padding-right: 75px;
        position: relative;
        margin-right: 5px;
        color: #8c8c8c;
    }
    .step ol li::before {
        content: "1";
        display: block;
        width: 40px;
        height: 40px;
        line-height: 40px;
        background-color: #8c8c8c;
        border-radius: 50%;
        margin-right: 10px;
        color: #fff;
        font-weight: bold;
        font-size: 20rem;
        text-align: center;
    }
    .step ol li::after {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        width: 64px;
        height: 2px;
        background-image: linear-gradient(to right, #a3a3a3, #a3a3a3 2px, transparent 2px, transparent);
        background-size: 8px 2px;
        background-repeat: repeat-x;
    }
    .step ol li:last-child {
        padding-right: 0;
        margin-right: 0;
    }
    .step ol li:last-child::after {
        display: none;
    }
    .step ol li:nth-child(2)::before {
        content: "2";
    }
    .step ol li:nth-child(3)::before {
        content: "3";
    }
    .step ol li.on {
        color: #000;
    }
    .step ol li.on::before {
        background-color: #00b5d0;
    }

    .form_wrap {
        margin-top: 50rem;
        background-color: #efe;
        background-image: linear-gradient(to right, #e7fffa, #aaefe8);
        padding: 80rem 0 90rem;
        font-size: 16px;
    }
    .form_wrap span.error {
        font-size: 93%;
        color: #B70000;
        display: block;
    }
    .form_wrap input[type="text"],
    .form_wrap input[type="email"],
    .form_wrap input[type="tel"],
    .form_wrap input[type="url"],
    .form_wrap select,
    .form_wrap textarea {
        width: 100%;
        min-height: 50px;
        border: 1px solid #00b5d0;
        background-color: #fff;
        padding: 6px 23px;
        font-size: 16px;
    }
    .form_wrap input[type="text"]::placeholder,
    .form_wrap input[type="email"]::placeholder,
    .form_wrap input[type="tel"]::placeholder,
    .form_wrap input[type="url"]::placeholder,
    .form_wrap select::placeholder,
    .form_wrap textarea::placeholder {
        color: #8c8c8c;
    }
    .form_wrap select {
        position: relative;
        padding-left: 55px;
        cursor: pointer;
    }
    .form_wrap select.select_empty {
        color: #8c8c8c;
    }
    .form_wrap select option {
        cursor: pointer;
        color: #000;
    }
    .form_wrap select option:first-child {
        color: #8c8c8c;
    }
    .form_wrap textarea {
        resize: vertical;
        max-height: 600px;
        min-height: 350px;
    }
    .form_wrap dl {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        max-width: 700px;
    }
    .form_wrap dl dt {
        font-weight: bold;
    }
    .form_wrap dl dt.required::after {
        content: "必須";
        color: #f00;
        display: inline-block;
        margin-left: 8px;
    }
    .form_wrap dl dd + dt {
        margin-top: 20px;
    }
    .form_wrap dl dd {
        margin-top: 5px;
    }
    .form_wrap dl dd.select_dd {
        position: relative;
    }
    .form_wrap dl dd.select_dd::before {
        z-index: 1;
        pointer-events: none;
        content: "";
        display: block;
        position: absolute;
        width: 0;
        height: 0;
        border-top: 14px solid #8c8c8c;
        border-right: 8px solid transparent;
        border-left: 8px solid transparent;
        top: 19px;
        left: 25px;
    }
    .form_wrap .mw_wrap {
        margin-top: 45px;
    }
    .form_wrap .mw_wrap .privacy_check {
        text-align: center;
        margin-top: 12px;
        font-size: 14px;
        color: #434343;
    }
    .form_wrap .mw_wrap .privacy_check a {
        color: #434343;
        text-decoration: underline;
    }
    .form_wrap .mw_wrap .privacy_check a:hover {
        text-decoration: none;
        text-decoration: underline transparent;
    }

    .mw_wp_form {
        padding-top: 120px;
        margin-top: -120px;
    }

    .btn_area {
        margin-top: 30px;
        display: flex;
        justify-content: center;
        width: 700rem;
        margin-left: auto;
        margin-right: auto;
    }
    .btn_area button {
        cursor: pointer;
        width: 100%;
        max-width: 480px;
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        border-radius: 10px;
        background-color: #fff;
        border: 1px solid #00b5d0;
        box-shadow: 0 5px 0 0 rgba(0, 0, 0, 0.1);
        font-size: 18px;
        height: 60px;
        transition: .3s;
    }
    .btn_area button:hover {
        background-color: #00b5d0;
        color: #fff;
    }
    .btn_area button + button {
        margin-left: 30px;
    }
    .btn_area button.btn_back {
        border-color: #ccc;
        color: #666;
    }
    .btn_area button.btn_back:hover {
        color: #fff;
        background-color: #ccc;
    }
    .btn_area button.click {
        pointer-events: none;
    }

    #page_check .btn_area {
        margin-top: 50px;
    }

    #page_check .form_wrap dl dd {
        background-color: #fff;
        padding: 0 20px;
        line-height: 2;
    }

    #page_check .form_wrap dl dd.select_dd::before {
        display: none !important;
    }

    #page_check .form_wrap p.privacy_check {
        display: none !important;
    }

    #page_check .form_wrap p.consent {
        display: none !important;
    }

    #page_thanks .form_wrap p.btn_border a {
        margin-left: auto;
        margin-right: auto;
    }

    @media screen and (max-width: 767px) {
        h1 {
            margin-top: 30rem;
        }
        .contact_lead {
            margin-top: 40rem;
        }
        .contact_lead p {
            color: #434343;
            line-height: 1.6;
            font-size: 13rem;
        }
        .step {
            margin-top: 0;
            text-align: center;
            z-index: 3;
        }
        .step.inner {
            width: auto;
        }
        .step ol {
            display: inline-block;
            text-align: left;
            bottom: -20rem;
            right: 0;
        }
        .step ol li {
            padding-right: 0;
            position: relative;
            margin-right: 0;
            font-size: 11.5rem;
        }
        .step ol li + li {
            margin-top: 13rem;
        }
        .step ol li::before {
            width: 30rem;
            height: 30rem;
            line-height: 30rem;
            margin-right: 6rem;
            font-size: 15rem;
        }
        .step ol li::after {
            display: none;
        }
        .form_wrap {
            margin-top: 55rem;
            padding: 23rem 0 60rem;
            font-size: 16rem;
        }
        .form_wrap input[type="text"],
        .form_wrap input[type="email"],
        .form_wrap input[type="tel"],
        .form_wrap input[type="url"],
        .form_wrap select,
        .form_wrap textarea {
            padding: 6px 16px;
            font-size: 16px;
        }
        .form_wrap select {
            padding-left: 40px;
        }
        .form_wrap textarea {
            max-height: 600rem;
            min-height: 300rem;
        }
        .form_wrap dl {
            width: 335rem;
        }
        .form_wrap dl dt.required::after {
            margin-left: 8rem;
        }
        .form_wrap dl dd + dt {
            margin-top: 25rem;
        }
        .form_wrap dl dd {
            margin-top: 3px;
        }
        .form_wrap dl dd.select_dd::before {
            border-top-width: 10px;
            border-right-width: 6px;
            border-left-width: 6px;
            top: 21px;
            left: 21px;
        }
        .form_wrap dl dd .mwform-tel-field {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .form_wrap dl dd .mwform-tel-field input {
            width: 30%;
        }
        .form_wrap .mw_wrap {
            margin-top: 26rem;
        }
        .form_wrap .mw_wrap .privacy_check {
            margin-top: 10rem;
            font-size: 12rem;
        }
        .btn_area {
            margin-top: 35rem;
            width: 335rem;
        }
        .btn_area button {
            border-radius: 10rem;
            box-shadow: 0 5rem 0 0 rgba(0, 0, 0, 0.1);
            font-size: 13rem;
            height: 60rem;
        }
        .btn_area button + button {
            margin-left: 20rem;
        }
    }

/*# sourceMappingURL=contact.css.map */
}

/* ==================================
   サイトマップ
   ================================== */
.page-sitemap {
    .intro {
        margin-top: 50rem;
    }
    .intro h1 {
        margin-bottom: 50rem;
        text-align: center;
    }
    .intro .map_wrap .map_contents {
        display: flex;
        justify-content: center;
        margin-bottom: 20rem;
    }
    .intro .map_wrap .map_contents a {
        display: flex;
        justify-content: center;
        flex-direction: column;
        width: 500rem;
        height: 60rem;
        font-size: 18rem;
        font-weight: bold;
        text-align: center;
        border-bottom: 1px dotted #00b5d0;
        position: relative;
        background: linear-gradient(180deg, white, white, #e7fffa 75%);
        text-decoration: underline;
    }
    .intro .map_wrap .map_contents a:hover {
        text-decoration: none;
    }

    @media screen and (max-width: 767px) {
        .intro {
            margin-top: 30rem;
        }
        .intro h1 {
            margin-bottom: 30rem;
            text-align: center;
        }
        .intro .map_wrap .map_contents {
            margin-bottom: 15rem;
            height: 50rem;
        }
        .intro .map_wrap .map_contents a {
            font-size: 15rem;
        }
    }

    /*# sourceMappingURL=sitemap.css.map */
}
/* ==================================
   ロール＆ロール関連本
   ================================== */
.page-books {
    h1 {
        margin-top: 35rem;
    }

    .anchor_menu {
        margin-top: 50rem;
    }
    .anchor_menu .menu_wrap {
        flex-wrap: nowrap;
    }
    .anchor_menu .menu_wrap .menu_block {
        width: 100%;
    }
    .anchor_menu .menu_wrap .menu_block:nth-child(3n) {
        margin-right: 2%;
    }

    .book_area {
        margin-top: 70rem;
        padding-top: 65rem;
        padding-bottom: 70rem;
    }
    .book_area + .book_area {
        margin-top: 40rem;
    }
    .book_area h2, .book_area p.lead_text {
        text-align: center;
    }
    .book_area h2 {
        border-bottom: 1px solid #fff;
    }
    .book_area h2 span {
        font-size: 32rem;
        font-weight: bold;
    }
    .book_area h2 span.new {
        display: inline-block;
        position: relative;
    }
    .book_area h2 span.new::after {
        content: "";
        display: block;
        position: absolute;
        background-image: url(/assets/img/ico_new.svg);
        background-repeat: no-repeat;
        background-size: contain;
        width: 51rem;
        height: 51rem;
        top: -30rem;
        right: -62rem;
        transform: rotate(32deg);
    }
    .book_area p.lead_text {
        font-size: 15rem;
        margin-top: 8rem;
    }

    @media screen and (max-width: 767px) {
        h1 {
            margin-top: 55rem;
        }
        .anchor_menu {
            margin-top: 40rem;
        }
        .book_area {
            margin-top: 20rem;
            padding-top: 45rem;
            padding-bottom: 50rem;
        }
        .book_area + .book_area {
            margin-top: 20rem;
        }
        .book_area h2 span {
            font-size: 22rem;
        }
        .book_area h2 span.new::after {
            width: 38rem;
            height: 38rem;
            top: -30rem;
            right: -48rem;
        }
        .book_area p.lead_text {
            font-size: 13rem;
            margin-top: 15rem;
        }
    }

    /*# sourceMappingURL=books.css.map */
}
/* ==================================
   ユーザーサポート
   ================================== */
.page-support {
    .support_single .mv {
        margin-top: 0;
    }
    .support_single .mv h1 {
        text-align: center;
    }
    .support_single .mv h1 img {
        height: 190rem;
    }

    .support_single .support_menu h2 {
        margin-top: 70rem;
    }

    .support_single .support_menu h2 + p {
        text-align: center;
        margin-top: 30rem;
    }

    .support_single .support_menu .menu_wrap {
        margin-top: 100rem;
        display: flex;
        flex-wrap: wrap;
    }
    .support_single .support_menu .menu_wrap .menu_block {
        display: flex;
        width: calc(92%/2);
        margin-left: 2%;
        margin-right: 2%;
        margin-bottom: 10%;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .support_single .support_menu .menu_wrap .menu_block h3 {
        font-size: 23rem;
        font-weight: bold;
        line-height: 1;
        text-align: center;
        position: relative;
        width: 100%;
        margin-bottom: 50rem;
    }
    .support_single .support_menu .menu_wrap .menu_block h3::before {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 20rem;
        left: 0;
        bottom: -7rem;
        z-index: -1;
        background-color: #eeeeee;
    }
    .support_single .support_menu .menu_wrap .menu_block h3 span {
        line-height: 1;
        padding-bottom: 1rem;
        display: inline-block;
        position: relative;
        padding: 0 10rem 5rem;
        z-index: 1;
    }
    .support_single .support_menu .menu_wrap .menu_block .btn_border {
        width: 100%;
    }
    .support_single .support_menu .menu_wrap .menu_block .btn_border a {
        margin-top: 50rem;
        height: 100rem;
        width: 100%;
    }
    .support_single .support_menu .menu_wrap .menu_block .btn_border a p.tit {
        font-size: 18rem;
        padding-bottom: 5rem;
    }
    .support_single .support_menu .menu_wrap .menu_block .btn_border a p.text {
        font-size: 14rem;
        font-weight: normal;
        text-align: center;
        padding-top: 6rem;
        font-weight: normal;
        position: relative;
    }
    .support_single .support_menu .menu_wrap .menu_block .btn_border a p.text::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 225rem;
        height: 1px;
        background-color: #00b5d0;
        transition: .3s;
    }
    .support_single .support_menu .menu_wrap .menu_block .btn_border a:hover p.text::before {
        background-color: #fff;
    }

    @media screen and (max-width: 767px) {
        .support_single .mv {
            margin-top: 0;
        }
        .support_single .mv h1 {
            text-align: center;
        }
        .support_single .mv h1 img {
            width: 100%;
            height: auto;
        }
        .support_single .support_menu h2 {
            margin-top: 50rem;
        }
        .support_single .support_menu .menu_wrap {
            margin-top: 50rem;
            margin-bottom: 20rem;
        }
        .support_single .support_menu .menu_wrap .menu_block {
            width: calc(100%/1);
            margin: 0 auto 10%;
        }
        .support_single .support_menu .menu_wrap .menu_block h3 {
            font-size: 18rem;
            margin-bottom: 35rem;
        }
        .support_single .support_menu .menu_wrap .menu_block h3 + p {
            text-align: center;
        }
        .support_single .support_menu .menu_wrap .menu_block .btn_border a {
            height: 80rem;
            margin-top: 35rem;
        }
        .support_single .support_menu .menu_wrap .menu_block .btn_border a p.tit {
            font-size: 13rem;
        }
        .support_single .support_menu .menu_wrap .menu_block .btn_border a p.text {
            font-size: 10rem;
        }
        .support_single .support_menu .menu_wrap .menu_block .btn_border a p.text::before {
            width: 192rem;
        }
    }
}
/* ==================================
   ダウンロード
   ================================== */
.page-download {
    .download_single .mv {
        margin-top: 0;
    }
    .download_single .mv h1 {
        text-align: center;
    }
    .download_single .mv h1 img {
        height: 190rem;
    }

    .download_single .intro h2 {
        margin-top: 70rem;
    }

    .download_single .intro h2 + p {
        text-align: center;
        margin-top: 30rem;
        margin-bottom: 70rem;
        line-height: 1.8;
    }
    .download_single .intro h2 + p span {
        font-weight: bold;
    }

    .download_single .download_menu {
        background: #ededed;
        padding: 40rem 0;
    }
    .download_single .download_menu .menu_wrap {
        display: flex;
        justify-content: space-evenly;
    }
    .download_single .download_menu .menu_wrap .menu_block {
        line-height: 1.2;
        text-align: center;
        position: relative;
        width: 100%;
        margin-right: 3%;
    }
    .download_single .download_menu .menu_wrap .menu_block a {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: auto;
        height: 45rem;
        font-size: 20rem;
        font-weight: bold;
        text-align: center;
        border-bottom: 1px solid #00b5d0;
        position: relative;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0), white 74%);
    }
    .download_single .download_menu .menu_wrap .menu_block a:hover {
        transform: translateY(6rem);
    }
    .download_single .download_menu .menu_wrap .menu_block a::after {
        display: block;
        content: "";
        border: 14rem solid transparent;
        border-top: 15rem solid #07a2b7;
        position: absolute;
        bottom: -29rem;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
    }
    .download_single .download_menu .menu_wrap .menu_block a p {
        padding-bottom: 15rem;
    }
    .download_single .download_menu .menu_wrap .menu_block a::before {
        display: block;
        content: "";
        width: 100%;
        height: 5rem;
        background: #00b5d0;
        position: absolute;
        bottom: 10%;
        left: 0;
    }

    .download_single .download_contents {
        padding-top: 80rem;
    }
    .download_single .download_contents h3 {
        font-size: 23rem;
        font-weight: bold;
        line-height: 1;
        text-align: center;
        position: relative;
        width: 100%;
        margin-bottom: 50rem;
    }
    .download_single .download_contents h3::before {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 10rem;
        left: 0;
        bottom: 0;
        z-index: -1;
        background-color: #ffc7f6;
    }
    .download_single .download_contents .sheet .download_item_wrap,
    .download_single .download_contents .session .download_item_wrap {
        display: flex;
        flex-wrap: wrap;
    }
    .download_single .download_contents .sheet .download_item_wrap .download_item,
    .download_single .download_contents .session .download_item_wrap .download_item {
        display: flex;
        width: calc(85%/4);
        margin-right: 5%;
        margin-bottom: 7%;
        flex-direction: column;
        align-items: center;
    }
    .download_single .download_contents .sheet .download_item_wrap .download_item:nth-child(4n),
    .download_single .download_contents .session .download_item_wrap .download_item:nth-child(4n) {
        margin-right: 0;
    }
    .download_single .download_contents .sheet .download_item_wrap .download_item.all h4,
    .download_single .download_contents .session .download_item_wrap .download_item.all h4 {
        background-color: #8c61bd;
    }
    .download_single .download_contents .sheet .download_item_wrap .download_item.all h4::after,
    .download_single .download_contents .session .download_item_wrap .download_item.all h4::after {
        border-top: 21px solid #8c61bd;
    }
    .download_single .download_contents .sheet .download_item_wrap .download_item.new h4::before,
    .download_single .download_contents .session .download_item_wrap .download_item.new h4::before {
        display: inline-block;
        content: "";
        width: 70rem;
        height: 40rem;
        background: url(/assets/img/ico_new.svg) no-repeat center center;
        background-size: contain;
        position: absolute;
        left: -30rem;
        top: -20rem;
    }
    .download_single .download_contents .sheet .download_item_wrap .download_item h4,
    .download_single .download_contents .session .download_item_wrap .download_item h4 {
        text-align: center;
        width: 220rem;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        border-radius: 10rem;
        background-color: #00b5d0;
        color: #fff;
        font-size: 16rem;
        height: 95rem;
        line-height: 1.3;
        margin-bottom: 15rem;
        position: relative;
    }
    .download_single .download_contents .sheet .download_item_wrap .download_item h4::after,
    .download_single .download_contents .session .download_item_wrap .download_item h4::after {
        display: block;
        content: "";
        border: 13rem solid transparent;
        border-top: 21rem solid #00b5d0;
        position: absolute;
        bottom: -33rem;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
    }
    .download_single .download_contents .sheet .download_item_wrap .download_item img,
    .download_single .download_contents .session .download_item_wrap .download_item img {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .download_single .download_contents .sheet .download_item_wrap .download_item .btn_border a,
    .download_single .download_contents .session .download_item_wrap .download_item .btn_border a {
        width: 220rem;
        height: 95rem;
        padding-top: 4rem;
    }
    .download_single .download_contents .sheet .download_item_wrap .download_item .btn_border a span,
    .download_single .download_contents .session .download_item_wrap .download_item .btn_border a span {
        display: block;
        text-align: center;
    }
    .download_single .download_contents .sheet .download_item_wrap .download_item .btn_border a span img:nth-child(1),
    .download_single .download_contents .session .download_item_wrap .download_item .btn_border a span img:nth-child(1) {
        height: 44rem;
        width: auto;
    }
    .download_single .download_contents .sheet .download_item_wrap .download_item .btn_border a span img:nth-child(2),
    .download_single .download_contents .session .download_item_wrap .download_item .btn_border a span img:nth-child(2) {
        width: 35rem;
        margin-top: 4rem;
    }
    .download_single .download_contents .sheet + .sheet {
        margin-top: 70rem;
    }
    .download_single .download_contents .sheet .bg_border {
        background: url(../../img/download/bg_download_contents_sheet.jpg) repeat top -100rem left;
    }
    .download_single .download_contents .scenario {
        margin-top: 70rem;
    }
    .download_single .download_contents .scenario .download_item_wrap .download_item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        margin-bottom: 50rem;
    }
    .download_single .download_contents .scenario .download_item_wrap .download_item .ttl {
        width: 75%;
    }
    .download_single .download_contents .scenario .download_item_wrap .download_item .ttl h4 {
        margin: 5rem 0 15rem;
    }
    .download_single .download_contents .scenario .download_item_wrap .download_item .ttl h4 span {
        font-size: 18rem;
        font-weight: bold;
        margin-right: 4rem;
    }
    .download_single .download_contents .scenario .download_item_wrap .download_item .outline {
        margin-top: 15rem;
        background: #efefef;
        padding: 15rem 20rem 20rem;
        width: 75%;
    }
    .download_single .download_contents .scenario .download_item_wrap .download_item .outline h5 {
        color: #014099;
        font-weight: bold;
        text-align: center;
        margin-bottom: 20rem;
        position: relative;
    }
    .download_single .download_contents .scenario .download_item_wrap .download_item .outline h5 span {
        position: relative;
        background: #efefef;
        padding: 15rem;
        z-index: 1;
    }
    .download_single .download_contents .scenario .download_item_wrap .download_item .outline h5::before {
        display: block;
        content: "";
        width: 44%;
        height: 1px;
        background: #00b5d0;
        position: absolute;
        top: 50%;
        left: 0;
    }
    .download_single .download_contents .scenario .download_item_wrap .download_item .outline h5::after {
        display: block;
        content: "";
        width: 44%;
        height: 1px;
        background: #00b5d0;
        position: absolute;
        top: 50%;
        right: 0;
    }
    .download_single .download_contents .scenario .download_item_wrap .download_item .btn_border {
        position: absolute;
        left: 0;
    }
    .download_single .download_contents .scenario .download_item_wrap .download_item .btn_border a {
        width: 220rem;
        height: 95rem;
        color: #014099;
    }
    .download_single .download_contents .scenario .download_item_wrap .download_item .btn_border a span {
        margin-top: 3rem;
    }
    .download_single .download_contents .session {
        margin-top: 120rem;
    }

    .download_single .wp_editor {
        margin-bottom: 70rem;
    }
    .download_single .wp_editor h2 {
        text-align: center;
        font-size: 21rem;
        color: #fff;
        background-color: #00b5d0;
        padding: 5rem;
        margin-bottom: 24px;
    }

    .download_single .attention {
        margin-bottom: 145rem;
    }
    .download_single .attention .download_info {
        border: 1px solid #00b5d0;
        text-align: center;
        padding: 30rem 0 25rem;
    }
    .download_single .attention .download_info p {
        margin-bottom: 25rem;
    }

    @media screen and (max-width: 767px) {
        .download_single .mv {
            margin-top: 0;
        }
        .download_single .mv h1 {
            text-align: center;
        }
        .download_single .mv h1 img {
            width: 100%;
            height: auto;
        }
        .download_single .intro h2 {
            margin-top: 40rem;
        }
        .download_single .intro h2 + p {
            margin-bottom: 30rem;
        }
        .download_single .download_menu {
            padding: 40rem 0 30rem;
        }
        .download_single .download_menu .menu_wrap .menu_block a p {
            font-size: 13rem;
            padding-bottom: 32rem;
        }
        .download_single .download_contents {
            padding: 50rem 0 25rem;
        }
        .download_single .download_contents h3 {
            font-size: 17rem;
            margin-bottom: 35rem;
        }
        .download_single .download_contents h3 span {
            display: inline-block;
            padding: 0 0 1rem;
        }
        .download_single .download_contents h3::before {
            height: 8rem;
        }
        .download_single .download_contents .sheet .download_item_wrap .download_item,
        .download_single .download_contents .session .download_item_wrap .download_item {
            width: calc(95%/2);
            margin-right: 5%;
            margin-bottom: 9%;
        }
        .download_single .download_contents .sheet .download_item_wrap .download_item h4,
        .download_single .download_contents .session .download_item_wrap .download_item h4 {
            font-size: 13rem;
            width: 160rem;
            height: 80rem;
            margin-bottom: 10rem;
        }
        .download_single .download_contents .sheet .download_item_wrap .download_item h4::before,
        .download_single .download_contents .session .download_item_wrap .download_item h4::before {
            background-size: 49%;
        }
        .download_single .download_contents .sheet .download_item_wrap .download_item h4::after,
        .download_single .download_contents .session .download_item_wrap .download_item h4::after {
            border: 11rem solid transparent;
            border-top: 19rem solid #00b5d0;
            position: absolute;
            bottom: -28rem;
        }
        .download_single .download_contents .sheet .download_item_wrap .download_item .btn_border a,
        .download_single .download_contents .session .download_item_wrap .download_item .btn_border a {
            width: 160rem;
            height: 70rem;
            padding-top: 2rem;
        }
        .download_single .download_contents .sheet .download_item_wrap .download_item .btn_border a span img:nth-child(1),
        .download_single .download_contents .session .download_item_wrap .download_item .btn_border a span img:nth-child(1) {
            height: 31rem;
        }
        .download_single .download_contents .sheet .download_item_wrap .download_item .btn_border a span img:nth-child(2),
        .download_single .download_contents .session .download_item_wrap .download_item .btn_border a span img:nth-child(2) {
            width: 24rem;
        }
        .download_single .download_contents .sheet .download_item_wrap .download_item:nth-child(2n),
        .download_single .download_contents .session .download_item_wrap .download_item:nth-child(2n) {
            margin-right: 0;
        }
        .download_single .download_contents .sheet + .sheet {
            margin-top: 50rem;
        }
        .download_single .download_contents .sheet .bg_border {
            background: url(../../img/download/bg_download_contents_sheet_sp.jpg) repeat top -60rem center;
            background-size: contain;
        }
        .download_single .download_contents .scenario {
            margin-top: 50rem;
        }
        .download_single .download_contents .scenario .download_item_wrap .download_item .ttl {
            width: 100%;
        }
        .download_single .download_contents .scenario .download_item_wrap .download_item .ttl h4 {
            margin: 5rem 0 15rem;
        }
        .download_single .download_contents .scenario .download_item_wrap .download_item .ttl h4 span {
            font-size: 16rem;
            margin-right: 0;
            display: block;
            text-align: center;
        }
        .download_single .download_contents .scenario .download_item_wrap .download_item .ttl h4 + p {
            text-align: center;
            margin-bottom: 20rem;
        }
        .download_single .download_contents .scenario .download_item_wrap .download_item .outline {
            width: 100%;
            margin-top: 30rem;
        }
        .download_single .download_contents .scenario .download_item_wrap .download_item .outline h5 {
            color: #014099;
            font-weight: bold;
            text-align: center;
            margin-bottom: 20rem;
            position: relative;
        }
        .download_single .download_contents .scenario .download_item_wrap .download_item .outline h5 span {
            position: relative;
            background: #efefef;
            padding: 15rem;
            z-index: 1;
        }
        .download_single .download_contents .scenario .download_item_wrap .download_item .outline h5::before {
            display: block;
            content: "";
            width: 44%;
            height: 1px;
            background: #00b5d0;
            position: absolute;
            top: 50%;
            left: 0;
        }
        .download_single .download_contents .scenario .download_item_wrap .download_item .outline h5::after {
            display: block;
            content: "";
            width: 44%;
            height: 1px;
            background: #00b5d0;
            position: absolute;
            top: 50%;
            right: 0;
        }
        .download_single .download_contents .scenario .download_item_wrap .download_item .btn_border {
            position: relative;
            margin: 0 auto;
        }
        .download_single .download_contents .scenario .download_item_wrap .download_item .btn_border a {
            width: 140rem;
            height: 70rem;
        }
        .download_single .download_contents .scenario .download_item_wrap .download_item .btn_border a span {
            display: block;
            width: 29rem;
        }
        .download_single .download_contents .session {
            margin-top: 70rem;
        }
        .download_single .wp_editor {
            margin-bottom: 40rem;
        }
        .download_single .wp_editor h2 {
            font-size: 16rem;
            padding: 5rem;
            margin-bottom: 16px;
        }
        .download_single .attention {
            margin-bottom: 50rem;
        }
        .download_single .attention .download_info {
            padding: 20rem 0;
        }
        .download_single .attention .download_info a {
            width: 50%;
            display: block;
            margin: 0 auto;
        }
    }

    /*# sourceMappingURL=download.css.map */
}


/* --------------------------------------------------
 * お問い合わせフォーム (Contact Form) ローディング設定
 * -------------------------------------------------- */
.contact-form-container {
  position: relative;
  width: 100%;
}

.contact-form-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  width: 100%;
}

.contact-form-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #00B5D0;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.contact-form-loading-text {
  margin-top: 16px;
  font-size: 14px;
  color: #666;
}

.iframe-wrapper.is-loading {
  display: none;
}

.iframe-wrapper.is-loaded {
  display: block;
  position: relative;
  width: 100%;
}

/* iframe本体 */
.contact-form-iframe {
    width: 100%;
    min-height: 1100px;
    border: none;
    transition: opacity 0.3s ease-in-out;
}
@media screen and (max-width: 767px) {
    .contact-form-iframe {
        min-height: 1300px;
        -webkit-overflow-scrolling: touch;
    }
}

.announce {
    display: block;
}
.announce .news {
    width: 100%;
    border-bottom: 1px solid #b3b3b3;
    padding-bottom: 100px;
}
.news ul li p {
    width: 100%;
}
.news ul li {
    justify-content: inherit;
}
.news ul li + li {
    margin-top: 20px;
}
.news ul li time {
    margin-right: 10px;
}