body {
    font-family: Arial, sans-serif;
}
html, body {
    overflow-x: hidden; /* 横スクロールを防ぐ */
    width: 100%;
}
/* ローディング画面 */
#loading {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
#content {
    display: none;
    background: rgba(255, 255, 255, 0.9);
    background-image: url("../img/bg01.png");
    background-size: 100% auto;

}
.fade-in {
    animation: fadeIn 2s ease-in-out;
}
.nosp{
    display: block;
}
.onsp{
    display: none;
}
@media (max-width: 768px) {
    .nosp{
        display: none;
    }
    .onsp{
        display: block;
    }
    .npop{
        display: none;
        opacity: 0;
    }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* ヘッダーエリア */
.header {
    background-color: #fff; /* 背景色（変更可） */
    padding: 10px 0;
    width: 100%;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

/* ヘッダーのコンテナ */
.header-container {
    display: flex;
    justify-content: center; /* 中央寄せ */
    align-items: center;
    max-width: 1400px;
    width: 100%; /* ヘッダーの横幅を基準に */
    margin: 0 auto;
    padding: 0 20px;
    gap: 0vw; /* ロゴとボタンの間隔 */
}
/* ロゴのスタイル（横幅基準で可変 & 中央） */
.r-logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.r-logo img {
    width: 10vw; /* ヘッダーの横幅を基準 */
    max-width: 281px; /* 最大幅 */
    height: auto;
}

/* メニューのスタイル */
.menu {
    display: flex;
    gap: 0vw; /* ボタン間の間隔 */
    justify-content: center; /* メニューを中央寄せ */
    flex-wrap: wrap; /* 折り返しを許可 */
    margin: 0 auto; /* 中央寄せ */
    padding: 0px 0;
}

/* ボタンの画像サイズ */
.menu a img,.menu em img  {
    width: 12vw; /* ヘッダーの横幅基準 */
    max-width: 280px; /* 最大サイズ */
    height: auto;
    transition: opacity 0.3s;
}

/* ホバー時のエフェクト */
.menu a:hover img {
    opacity: 0.7;
}
/* レスポンシブ対応（スマホ・タブレット用） */
@media (max-width: 768px) {
    .header{
        padding: 10px 0;
        margin: 0px 0 0px;
    }
    .header-container {
        flex-direction:row;
        align-items: center;
        text-align: center;
        padding: 0 0px 0 10px;
    }
    .r-logo {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 30%;
    
    }

    .r-logo img {
        max-width: 100%; /* 画面幅の40%まで拡大 */
        min-width: 126px;
        margin: 10px 0;
    }

    .menu {
        justify-content: space-between; /* 左右均等配置 */
        width: 66%;
    }
    .menu a, .menu em {
        width: 48%; /* 2列（50% - 余白） */
    }
    .menu img {
        width:100% !important;
    }
    .menu .ppc{
        margin: 0 auto;
    }
    .menu .ppc img{

    }
}
.sheader,.nheader,.nheader2{
    width: 100%;
    max-width: 1920px;
    margin: 0;
    padding: 0;
}
.nheader2{
    text-align: center;
}
.sheader img,.nheader img{
    width: 100%;
}
.nheader2 img{
    width: 100%;
    max-width: 1122px;
}
@media (max-width: 768px) {
    .nheader2{
        background: rgb(255, 255, 255, 0.9);
        padding: 12px 0;
    }
}
/* NEWSセクション */
#NEWSl{
    background: rgba(227,226,227,0.9);
    width: 100%;
    max-width: 1920px;
    padding: 20px 0% 40px;
    margin: 0 !important;

}
#NEWSl .nbox{
    padding: 12px 12.5%;
}
#NEWSl .nbox2{
    padding: 12px 0%;
    max-width: 820px;
}
.news-box {
    padding: 0px;
    border: 0px solid #ddd;
    border-radius: 0px;
    text-align: center;
    background-color: #fff;
    padding-bottom: 0.5rem;
    box-shadow: 8px 8px;
}
.news-box-x {
    border: 0px solid #ddd;
    border-radius: 0px;
    text-align: center;
    background-color: #fff;
    padding: 1rem 2rem;
}
.news-box-x2 {
    border: 0px solid #ddd;
    border-radius: 0px;
    text-align: center;
    background-color: #fff;
    padding: 1rem 2rem;
}
.news-box img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}
.news-box p,.news-box-x p,.news-box-x2 p{
    text-align: left;
    font-size: 16px;
    padding: 6px 6px 0;
    margin: 0 auto 0;
    max-width: 90%;
}
.news-box p.date,.news-box-x2 p.date,.date .wp-block-post-date{
    color: #FF0000;
    font-size: 14px;
    margin-bottom: 0;
}
#NEWSl .page{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 20px 0%;
    align-items: center;
    text-align: center;
    gap: 6px;
    width: 100%;
}
#NEWSl .page a,#NEWSl .page em{
    width: calc(100vw*0.025);
    max-width: 46px;
    height: auto;
}
#NEWSl .page a img,#NEWSl .page em img{
    width: 100%;
}
.dtli{
    display: flex;
    margin-left: 5%;
}
.dtli img,.dtli div{

}
.news-box-x2 h1{
    font-size: 1.5rem;
}
.news-box-x2 .has-global-padding{
    padding-right:0;
    padding-left: 0;
    font-size: 16px;
}
.wp-block-post-featured-image{
    max-width: 90%;
}
@media (max-width: 768px) {
    #NEWSl{
        padding: 0px 0% 0px;
    }

    #NEWSl .nbox{
        padding:12px 4%;
    }
    #NEWSl .nbox2 {
        padding:0px 0%;
    }
    #NEWSl .nbox2 .col{
        padding: 0 0;
    }
    #NEWSl .page{
        margin: 40px 0%;
    }
    #NEWSl .page a,#NEWSl .page em{
        width: calc(100vw*0.25);
        max-width: 48px;
        height: auto;
    }
    .news-box-x {
        padding: 1rem 0rem;
    }
    #NEWSl .nbox2 .news-box-x img{
        width: 100%;
    }
    .news-box-x2 p{
        max-width: 100%;
        padding: 6px 0px 0;
    }
    .dtli{
        margin-left: 0%;
    }
}

/* Characterセクション */

.chmenu{
    max-width: 1440px;
    margin: 0 auto !important;
    padding: 24px 2%;
    background: rgba(255,255,255,0.9);
    text-align: center;
}
#Characterl,#Character2{
    max-width: 1440px;
    margin: 0 auto !important;
    padding: 24px 2%;
    background: rgba(255,255,255,0.9);
}
.cbox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

}
#Characterl .col,#Character2 .col{
    width: calc(50% - 10px); /* 2列配置, ギャップを考慮 */
    aspect-ratio: 5 / 3.1; /* 5:3 の比率を維持 */
    display: flex;*/
    flex-direction: column;
    justify-content: space-between;
    padding: 0;;
    margin-bottom: 0px;
    background-repeat: no-repeat;
    background-size: 100% auto;
}
/* ===== BOXのデザイン ===== */
.c-box {
    border-radius: 0px;
    padding: 0px;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
#Characterl .col:nth-child(1){
    background-image: url("../img/chara/chara_l/bg_kat01.png");
}
#Characterl .col:nth-child(2){
    background-image: url("../img/chara/chara_l/bg_uk01.png");
}
#Characterl .col:nth-child(3){
    background-image: url("../img/chara/chara_l/bg_usa01.png");
}
#Characterl .col:nth-child(4){
    background-image: url("../img/chara/chara_l/bg_fra01.png");
}
#Characterl .col:nth-child(5){
    background-image: url("../img/chara/chara_l/bg_ger01.png");
}
#Characterl .col:nth-child(6){
    background-image: url("../img/chara/chara_l/bg_jap01.png");
}
#Characterl .col:nth-child(7){
    background-image: url("../img/chara/chara_l/bg_aus01.png");
}
#Characterl .col:nth-child(8){
    background-image: url("../img/chara/chara_l/bg_bel01.png");
}
#Characterl .col:nth-child(9){
    background-image: url("../img/chara/chara_l/bg_ita01.png");
}
#Characterl .col:nth-child(10){
    background-image: url("../img/chara/chara_l/bg_tol01.png");
}
#Character2 .col:nth-child(1){
    background-image: url("../img/chara/chara_l/bg_paf01.png");
}
#Character2 .col:nth-child(2){
    background-image: url("../img/chara/chara_l/bg_tol01.png");
}
.c-box h3{
    margin-bottom: 0;
}
/* h3（タイトル画像） */
.c-box h3 img {
    width: 100%; /* ロゴサイズ可変 */
    max-width: 700px;
    height: auto;
}

/* ===== UL（リスト）のスタイル ===== */
.c-box ul {
    display: grid;
    gap: 0px; /* 各ボタンの間隔 */
    padding: 0 3%;
    margin: 0;
    list-style: none;
}

.c-box ul.chbox-6{
    grid-template-columns: repeat(6, auto); /* 6列に配置 */
}
.c-box ul.chbox-7{
    grid-template-columns: repeat(7, auto); /* 6列に配置 */
}
.c-box ul.chbox-5{
    grid-template-columns: repeat(5, auto); /* 6列に配置 */
    padding: 0 2%;
}
.c-box ul.chbox-4{
    grid-template-columns: repeat(4, auto); /* 6列に配置 */
    padding: 0 12.3%;
}
.c-box ul.chbox-3{
    grid-template-columns: repeat(3, auto); /* 6列に配置 */
    padding: 0 21.5%;
}
.c-box ul.chbox-3a{
    grid-template-columns: repeat(3, auto); /* 6列に配置 */
    padding: 0 19%;
}
.c-box ul.chbox-2{
    grid-template-columns: repeat(2, auto); /* 6列に配置 */
    padding: 0 31%;
}
@media (max-width: 768px) {
    .chmenu{
        max-width: 100%;
        padding: 0px 0%;
        text-align: center;
        display: flex;
        flex-direction: row;
    }
    .chmenu img{
        width: 100%;
    }
    .c-box ul.chbox-4{
        grid-template-columns: repeat(3, auto); /* 6列に配置 */
        padding: 0 2%;
    }
    .c-box ul.chbox-6{
        grid-template-columns: repeat(3, auto); /* 6列に配置 */
        padding: 0 2%;
    }
    .c-box ul.chbox-7{
        grid-template-columns: repeat(3, auto); /* 6列に配置 */
        padding: 0 4%;
    }
    .c-box ul.chbox-5{
        grid-template-columns: repeat(3, auto); /* 6列に配置 */
        padding: 0 2%;
    }
    .c-box ul.chbox-3{
        grid-template-columns: repeat(3, auto); /* 6列に配置 */
        padding: 0 2%;
    }
    .c-box ul.chbox-3a{
        grid-template-columns: repeat(3, auto); /* 6列に配置 */
        padding: 0 2%;
    }
    .c-box ul.chbox-2{
        grid-template-columns: repeat(3, auto); /* 6列に配置 */
        padding: 0 18%;
    }
    #Characterl .col:nth-child(1){
        background-image: url("../img/chara/chara_l/bg_kat01_sp.png");
        height: calc((100vw*0.756) + (100vw*0.7));
    }
    #Characterl .col:nth-child(2){
        background-image: url("../img/chara/chara_l/bg_uk01_sp.png");
        height: calc((100vw*0.756) + (100vw*0.7));
    }
    #Characterl .col:nth-child(3){
        background-image: url("../img/chara/chara_l/bg_usa01_sp.png");
        height: calc((100vw*0.756) + (100vw*0.7));
    }
    #Characterl .col:nth-child(4){
        background-image: url("../img/chara/chara_l/bg_fra01_sp.png");
        height: calc((100vw*0.756) + (100vw*0.7));
    }
    #Characterl .col:nth-child(5){
        background-image: url("../img/chara/chara_l/bg_ger01_sp.png");
        height: calc((100vw*0.756) + (100vw*0.7));
    }
    #Characterl .col:nth-child(6){
        background-image: url("../img/chara/chara_l/bg_jap01_sp.png");
        height: calc((100vw*0.756) + (100vw*0.9));
    }
    #Characterl .col:nth-child(7){
        background-image: url("../img/chara/chara_l/bg_aus01_sp.png");
        height: calc((100vw*0.756) + (100vw*0.2));
    }
    #Characterl .col:nth-child(8){
        background-image: url("../img/chara/chara_l/bg_bel01_sp.png");
        height: calc((100vw*0.756) + (100vw*0.2));
    }
    #Characterl .col:nth-child(9){
        background-image: url("../img/chara/chara_l/bg_ita01_sp.png");
        height: calc((100vw*0.756) + (100vw*0.2));
    }
    #Characterl .col:nth-child(10){
        background-image: url("../img/chara/chara_l/bg_tol012_sp.png");
        height: calc((100vw*0.756) + (200vw*1.2));
    }
    #Character2 .col:nth-child(1){
        background-image: url("../img/chara/chara_l/bg_paf01_sp.png");
        height: calc(100vw*0.756);
    }
    #Character2 .col:nth-child(2){
        background-image: url("../img/chara/chara_l/bg_tol01_sp.png");
        height: calc(100vw*0.756);
    }
}

/* `.c-box ul li` すべてを `.chbox-6 li` の高さに統一 */
.c-box ul li {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 2px;
}
/* 画像リンク */
.c-box ul li a img {
    width: 100%; /* `.col` の幅に収める */
    max-width: 100%; /* `.col` からはみ出さないように */
    height: auto; /* 高さを `.c-box ul` に合わせる */
    object-fit: contain; /* 画像の比率を維持 */
}

.c-box ul li a:hover img {
    opacity: 0.8;
}

#Character_on{
    width: 100%;
    margin: 0 auto !important;
    padding: 0px 0%;
    position: relative;
}
#Character_on .ch_bk{
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center;
}
#Character_on .ch_bk.kat{
    background-image: url("../img/chara/chara_on/bg_kat01.png");
}
#Character_on .ch_bk.uk{
    background-image: url("../img/chara/chara_on/bg_uk01.png");
}
#Character_on .ch_bk.usa{
    background-image: url("../img/chara/chara_on/bg_usa01.png");
}
#Character_on .ch_bk.fra{
    background-image: url("../img/chara/chara_on/bg_fra01.png");
}
#Character_on .ch_bk.ger{
    background-image: url("../img/chara/chara_on/bg_ger01.png");
}
#Character_on .ch_bk.jap{
    background-image: url("../img/chara/chara_on/bg_jap01.png");
}
#Character_on .ch_bk.aus{
    background-image: url("../img/chara/chara_on/bg_aus01.png");
}
#Character_on .ch_bk.bel{
    background-image: url("../img/chara/chara_on/bg_bel01.png");
}
#Character_on .ch_bk.ita{
    background-image: url("../img/chara/chara_on/bg_ita01.png");
}
#Character_on .ch_bk.tol{
    background-image: url("../img/chara/chara_on/bg_tol01.png");
}
#Character_on .ch_bk.paf{
    background-image: url("../img/chara/chara_on/bg_paf01.png");
}
#Character_on .chara_on{
    max-width: 1440px;
    margin: 0 auto !important;
    padding: 0px 0%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
    z-index: 1;

}
#Character_on .chara_img{
    position: absolute;
    left: -8%;
    top: 0px;
    z-index: 1000;
    width: 70%;
    max-width: 920px;
/*    height: calc(100vw*26.7/48 - 4px);*/
    height: 100%;
    overflow: hidden;

}
#Character_on .chara_img img{
    width: 100%;

}
#Character_on .bel01 .chara_img{
    left: -7%;
}

#Character_on .aus02 .chara_img,
#Character_on .ita02 .chara_img,#Character_on .tol01 .chara_img{

}
#Character_on .uk04 .chara_img,#Character_on .ger04 .chara_img{

}

#Character_on .kat02 .chara_img,#Character_on .uk02 .chara_img,
#Character_on .kat03 .chara_img,#Character_on .usa01 .chara_img,
#Character_on .aus03 .chara_img,
#Character_on .ger04 .chara_img,
#Character_on .jap03 .chara_img,
#Character_on .jap04 .chara_img,
#Character_on .aus03 .chara_img,
#Character_on .ita01 .chara_img,
#Character_on .ita02 .chara_img,
#Character_on .tol01 .chara_img,
#Character_on .tol02 .chara_img,
#Character_on .tol03 .chara_img{
    padding-top: 28px;
}
#Character_on .jap02 .chara_img,
#Character_on .jap06 .chara_img,
#Character_on .usa04 .chara_img{
    padding-top: 40px;
}
#Character_on .fra01 .chara_img,
#Character_on .fra02 .chara_img,
#Character_on .fra03 .chara_img,
#Character_on .bel01 .chara_img{
    padding-top: 12px;
}
#Character_on .bel02 .chara_img,
#Character_on .aus02 .chara_img,
#Character_on .usa02 .chara_img{
    padding-top: 20px;
}
#Character_on .uk03 .chara_img{
    padding-top: 16px;
}
#Character_on .bel03 .chara_img{
    padding-top: 72px;
}
#Character_on .jap05 .chara_img{
    padding-top: 100px;
}
#Character_on .aus01 .chara_img,
#Character_on .tol06 .chara_img{
    padding-top: 120px;
}

@media (max-width: 768px) {
    #Character_on .ger04 .chara_img{
        left: -25%;
    }
    #Character_on .ger02 .chara_img,
    #Character_on .ger03 .chara_img{
        left: -30%
    }
    #Character_on .uk03 .chara_img,
    #Character_on .uk04 .chara_img,
    #Character_on .aus02 .chara_img{
        left: -30%
    }
    #Character_on .fra01 .chara_img{
        left: -34%;
    }

    #Character_on .fra02 .chara_img,
    #Character_on .fra03 .chara_img,
    #Character_on .fra04 .chara_img,
    #Character_on .uk02 .chara_img,
    #Character_on .kat02 .chara_img,
    #Character_on .uk05 .chara_img,
    #Character_on .usa04 .chara_img,
    #Character_on .aus03 .chara_img,
    #Character_on .kat04 .chara_img,
    #Character_on .jap01 .chara_img,
    #Character_on .jap02 .chara_img{
        left: -30%;
    }
    #Character_on .tol01 .chara_img,
    #Character_on .tol02 .chara_img,
    #Character_on .tol03 .chara_img,
    #Character_on .tol05 .chara_img,
    #Character_on .tol06 .chara_img,
    #Character_on .tol07 .chara_img{
        left: -34%;
    }
    #Character_on .tol04 .chara_img{
        left: -40%;
    }
    #Character_on .kat01 .chara_img,
    #Character_on .uk01 .chara_img{
        left: -30%;
    }
    #Character_on .kat03 .chara_img,
    #Character_on .usa01 .chara_img,
    #Character_on .bel01 .chara_img,
    #Character_on .bel02 .chara_img,
    #Character_on .bel03 .chara_img,
    #Character_on .ita01 .chara_img,
    #Character_on .ita02 .chara_img{
        left: -30%;
    }
    #Character_on .jap03 .chara_img,
    #Character_on .jap04 .chara_img,
    #Character_on .jap05 .chara_img,
    #Character_on .jap06 .chara_img{
        left: -34%;
    }
    #Character_on .paf01 .chara_img,
    #Character_on .paf02 .chara_img,
    #Character_on .paf03 .chara_img{
        left: -36%;
    }
    #Character_on .tol11 .chara_img,
    #Character_on .tol12 .chara_img{
        left: -32%;
    }
    #Character_on .tol13 .chara_img{
        left: -50%;
    }
}
#Character_on .chara_prof{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 3% auto 1%;
    padding: 0 0 5%;
    max-width: 1080px;

}
#Character_on .chara_flag{
    width: 100%;
    height: 100%;
}

#Character_on .chara_flag img{
    width: 100%;
    height: auto;
}

/* 画像ボタンのコンテナ */
#Character_on .chara_teams,#Character_on .chara_teams2{
    display: flex;
    justify-content: right;
    align-items: center;
    gap: 2px; /* ボタン間の間隔 */
    flex-wrap: wrap; /* 画面幅が狭いと折り返す */
    max-width: 100%;
    padding: 1% 0 0;
    position: absolute;
    bottom: 4%;
    right: 10%;
    z-index: 100000;
}
/* 画像ボタンのスタイル */
#Character_on .chara_teams .image-button {
    display: block;
    width: 9%; /* ボタンの幅（調整可能） */
    height: auto;
    transition: transform 0.2s ease-in-out;
}
/* 画像ボタンのスタイル */
#Character_on .chara_teams2 .image-button {
    display: block;
    width: 48%; /* ボタンの幅（調整可能） */
    height: auto;
    transition: transform 0.2s ease-in-out;
}

/* 画像のスタイル */
#Character_on .chara_teams .image-button img,#Character_on .chara_teams2 .image-button img {
    width: 100%;
    height: auto;
    display: block;
}

/* ホバー時のエフェクト */
#Character_on .chara_teams .image-button:hover,#Character_on .chara_teams2 .image-button:hover  {
    opacity: 0.8;
}
#Character_on .ch_bt{
    position: absolute;
    width: 75%;
    max-width: 1080px;
    z-index: 100000;
    height: 50%;
    display: flex;
    margin: 0 auto 0;
    top: 0;
    right: 0;
    left: 0;
}
#Character_on .bt_left{
    position: absolute;
    left:-12%;
    bottom: 0;
    height: auto;
    width: 11%;
    text-align: center;
    padding-top: 0%;
}
#Character_on .bt_right{
    position: absolute;
    right:-12%;
    bottom: 0;
    height: auto;
    width: 11%;
    text-align: center;
    padding-top: 0%;
}
#Character_on .bt_left img,#Character_on .bt_right img{
    width: 28%;
    max-width: 46px;
}
@media (max-width: 1080px) {
    #Character_on .ch_bt{
        width: 100%;
    }
    #Character_on .bt_left{
        left:0px;
    }
    #Character_on .bt_right{
        right: 0px;

    }
}
/* ===== スマホ・タブレット対応 ===== */
@media (max-width: 768px) {
    #Characterl,#Character2{
        max-width: 1440px;
        margin: 0 auto !important;
        padding: 23px 6%;
    }
    .sheader{
        padding: 3% 20%;
        background: rgba(255, 255, 255, 0.9);
    }
    .nheader{
        padding: 0% 0%;
    }
    .nheader img{
        width: 100%;
    }
    #Characterl .col,#Character2 .col {
        width: 100%; /* 1列表示 */
    }

    .c-box ul {
        justify-content: center;
        flex-wrap: wrap; /* スマホでは折り返す */
    }

    /* スマホでは高さも自動調整 */
    .c-box ul li {
        height: auto;
    }

    .c-box ul li a img {
        height: auto;
        width: 100%;
    }
    #Character_on .chara_prof{
        margin: 0 auto 1%;
        z-index: 10000;
        padding: 0 1% 5%;
    }
    .chara_flag2{
        padding: 0% 5%;
    }

    .chara_flag2 img,.chara_flag3 img{
        width: 100%;
    }
    #Character_on{
        background: rgba(255, 255, 255, 1);
    }
    #Character_on .chara_img img{
        width: 170%;
    }
/*
    #Character_on .ch_bk.kat{
        background-image: url("../img/chara/chara_on/bk_ff01_sp.png");
        background-position: right;
        background-size: auto 100%;
    }
        */
    #Character_on .chara_on{
        padding: 0px 0%;
        overflow: hidden;
    }

    .chara_catch{
        position: absolute;
        top: 17%;
        left: 7%;
        height: 47vh;
        max-height: 50vh;
        z-index: 100000;

    }
    .chara_catch img{
        height: 100%;
    }
    #Character_on .chara_img{
        width: auto;
        height: calc(50vh);
        position: relative;
        left: -25%;
        overflow: visible;
        padding-top: inherit !important;

    }

    #Character_on .chara_teams {
        position: relative;
        justify-content: center;
        right: auto;
        padding: 1% 0 4% 0;
    }
    #Character_on .chara_teams .image-button {
        width: 18%; /* ボタンの幅（調整可能） */
    }
    #Character_on .ch_bt{
        margin: 0 0 0 auto;
        height: auto;
        top: 38%;
        width: 100%;
    }


    #Character_on .bt_left,#Character_on .bt_right{
        top: 65%;
        width: 8%;
        padding-top: 0;
    }
    #Character_on .bt_left{
        left: 2%;
    }
    #Character_on .bt_right{
        right: 2%;

    }
    #Character_on .bt_left img,#Character_on .bt_right img{
        width: 100%;
        max-width: 52px;
    }
}
#Character .counbox{
    background:rgba(255,255,255,0.9) ;
    padding: 0 12%;
}
#Character .counbox .character-box{
    padding-left: 6px;
    padding-right: 6px;
}
.character-container {
    width: auto; /* 適宜調整 */
    height: auto; /* 適宜調整 */
}

/* STAFFセクション */
#STAFF{
    width: 100%;
    max-width: 100%;
    padding: 32px 0% 40px;
    background-image: url("../img/bg_staff.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
}
#STAFF h2 img{
    width: 100%;
}
#STAFF .staff-box {
    padding: 0 12% 2px;
}
.staff-box img {
    width: 100%;
    border-radius: 0px;
}
/* 製品情報セクション */
#Product{
    width: 100%;
    max-width: 100%;
    padding: 0px 0% 40px;

}
#Product h2 img{
    width: 100%;
}
#Product .prod-box {
    padding: 0 22% 2px;
}
.prod-box img {
    width: 100%;
    border-radius: 0px;
}
/* PRODUCTSセクション */
#PRODUCTS{
    width: 100%;
    max-width: 1920px;
    padding: 20px 0% 40px;
    margin: 0 !important;
    background: rgba(227, 226, 227, 0.9);
}
#PRODUCTS .h2_menu{
    padding: 12px 0;
    background: rgb(255, 255, 255);
    width: 77%;
    margin: 0 auto;
    text-align: center;
}
#PRODUCTS .h2_menu a{
    
}
#PRODUCTS .h2_menu a img{
    width: 18%;
}
#PRODUCTS .nbox{
    padding: 12px 0;
    background: rgb(255, 255, 255);
    width: 77%;
    margin: 0 auto;
    text-align: center;
}
#PRODUCTS .pro01{
    margin: 40px 0 20px;
}
#PRODUCTS .pro01 .pro01_a img,
#PRODUCTS .pro01 .pro01_b img{
    width: 100%;
}
#PRODUCTS .pro01 .pro01_a{
    margin: 0px auto 40px;
    max-width: 1080px;
}
#PRODUCTS .pro01 .pro01_b{
    margin: 0px auto 40px;
    max-width: 1080px;
    position: relative;
    display: inline-block;
}
#PRODUCTS .pro01 .pro01_b > img {
    display: block;
    max-width: 100%;
    height: auto;
}
#PRODUCTS .pro01 .pro01_b a.detail_link {
    position: absolute;
    left: 64px;   /* 詳細はこちら の位置に合わせて調整 */
    bottom: 168px;    /* 詳細はこちら の位置に合わせて調整 */
    width: 120px;  /* クリック範囲 */
    height: 30px;
    display: block;
    z-index: 10;
}
#PRODUCTS .pro01 .pro01_b .pro01_b_btn{
    position: absolute;
    bottom: 26px;
    /* top: 0; */
    text-align: center;
    width: 100%;
    padding: 0 5px 0 0px;
}
#PRODUCTS .pro01 .pro01_b .pro01_b_btn img{
    max-width: 372px;
}
@media (max-width: 768px) {
    #PRODUCTS .h2_menu{
        width: 100%;
    }
    #PRODUCTS .h2_menu a img{
        width: 24%;
    }
    #PRODUCTS .nbox{
        width: 100%;
    }
    #PRODUCTS .pro01{
        margin: 20px 0 20px;
    }
    #PRODUCTS .pro01 h2 img{
        width: 100%;
    }
    #PRODUCTS .pro01#all h2{
        width: 126px;
        margin: 20px auto;
    }
    #PRODUCTS .pro01#gentei h2{
        width: 104px;
        margin: 20px auto;
    }
    #PRODUCTS .pro01#tuujyo h2{
        width: 108px;
        margin: 20px auto;
    }
    #PRODUCTS .pro01#shop h2{
        width: 168px;
        margin: 20px auto;
    }
    #PRODUCTS .pro01 .pro01_b .pro01_b_btn{
        margin: 20px 20% 0;
        width: 60%;
    }
    #PRODUCTS .pro01 .pro01_b .pro01_b_btn img{
        width: 100%;

    }
    #PRODUCTS .pro01.capp img{
        width: 362px;
    }
    #PRODUCTS .pro01 .pro01_b a.detail_link {
    left: 41px;   /* 詳細はこちら の位置に合わせて調整 */
    bottom: 122px;    /* 詳細はこちら の位置に合わせて調整 */
    width: 100px;  /* クリック範囲 */
}
}
/* PRODUCTSセクション */
#GUIDELINES{
    width: 100%;
    max-width: 1920px;
    padding: 10px 0% 40px;
    margin: 0 !important;
    background: rgba(227, 226, 227, 0.9);
}
#GUIDELINES .nbox{
    padding: 12px 0;
    background: rgb(255, 255, 255,0.8);
    width: 77%;
    margin: 0 auto;
    text-align: center;
}
#GUIDELINES .pro01{
    margin: 40px 0 20px;
    font-size: 18px;
}
#GUIDELINES .pro01 h2{
    margin: 0px auto 20px;
    max-width: 960px;
    text-align: left;
    border-bottom: 2px solid #ff0000;
}
#GUIDELINES .pro01 .pro01_a img,
#GUIDELINES .pro01 .pro01_b img{
    width: 100%;
}
#GUIDELINES .pro01 .pro01_a{
    margin: 0px auto 20px;
    max-width: 960px;
    text-align: left;
}
#GUIDELINES .pro01 .pro01_a .pro01_b{
    margin: 20px auto 20px;
    max-width: 960px;
    text-align: left;
    padding: 4%;
    border: 1px solid #000;
    border-radius: 12px;
}
#GUIDELINES .pro01 .pro01_a .pro01_b h3{
    margin: 0px auto 10px;
    max-width: 960px;
    text-align: left;
    font-size: 20px;
    border-bottom: 1px solid #000000;
}
#GUIDELINES .pro01 .pro01_a .pro01_b p{
    margin: 0px auto 20px;
    max-width: 960px;
    text-align: left;
}
@media (max-width: 768px) {
    #PRODUCTS .pro01{
        margin: 20px 0 20px;
    }
    #GUIDELINES .nbox{
        width: 100%;
        padding: 12px 8px;
    }
}
/* footer */
footer {
    background-color: #180c0c;
    color: white;
    text-align: center;
    padding: 30px 00px 0;
    width: 100%;
    max-width: 100% !important;
    margin-top: 0 !important;
}
footer.mt-5 {
    margin-top: 0rem !important;
}
footer nav.footer-nav{
    padding: 20px 0;
}
footer nav.footer-nav a{
    padding: 0 21px;
    color: #fff;
}
footer nav.footer-nav a:hover{
    color: #3c0f11;
}