/** Shopify CDN: Minification failed

Line 962:0 Unexpected "}"

**/
/* =========================================================
   LP全体ベース設定
========================================================= */
#manga {
    font-family: 'Noto Sans JP', "Hiragino Kaku Gothic Pro", "Hiragino Sans", "Yu Gothic", "游ゴシック", "游ゴシック体", sans-serif;
    text-align: center;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    color: #333;
    line-height: 1.3;
}
#manga main {
    margin: 0 auto;
    display: block;
}
#manga li {
    list-style: none;
}
#manga .material-icons {
    vertical-align: middle;
    font-weight: bold;
}
#manga .Zen_Kaku {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    line-height: 0;
    font-size: 120%;
    padding: 0 1%;
}
#manga .area {
    max-width: 990px;
    margin: auto;
}
#manga section img {
    object-fit: scale-down;
    max-width: 750px;
}
#manga img.manga_img {
    max-width: 697px;
}

/* =========================================================
   ヘッダー関連（既存）
========================================================= */
header .sp {
    display: none;
}

/* =========================================================
   メインビジュアル
========================================================= */
#manga #main-visual {
    width: 100%;
    overflow: hidden;
    position: relative;
    background: url(/cdn/shop/files/top_73dd616e-cf98-4cbf-909d-4abbfa7f0998.webp?v=1778748654) no-repeat 47% top /cover;
    background-color: #ffffff;
    padding-top: 5%;
}
#manga #main-visual > div {
    text-align: left;
    position: relative;
    background-image: url(/cdn/shop/files/SD.webp?v=1778748655);
    background-size: 60%;
    background-position: 60% 44%;
    background-repeat: no-repeat;
    height: 675px;
    padding: 0 1.5%;
}
#manga #main-visual > div > div {
    justify-content: space-between;
    height: 100%;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
}
#manga #main-visual > div > div > div {
    position: relative;
    width: 65%;
    height: 60%;
}
#manga #main-visual > div > div + img {
    position: absolute;
    height: 90%;
    right: -6.3%;
    bottom: 7%;
}

/* メインビジュアル：丸いアイコン */
#manga .ms_circle {
    text-align: center;
    position: absolute;
}
#manga .ms_circle img {
    width: 100%;
}
#manga .ms_circle span {
    position: absolute;
    color: #ffffff;
    top: 50%;
    right: 0;
    left: 0%;
    transform: translateY(-40%);
    font-weight: 700;
    line-height: 1.1;
    width: 100%;
    display: block;
}
#manga .ms_circle.yellow {
    z-index: 2;
    width: 230px;
    height: 230px;
    left: 3%;
    top: 2%;
}
#manga .ms_circle.lime {
    z-index: 1;
    width: 175px;
    height: 175px;
    top: 0;
    left: 65%;
}
#manga .ms_circle.hotpink {
    z-index: 1;
    width: 200px;
    height: 200px;
    top: 50%;
    left: 0;
}
#manga .ms_circle.yellow span {
    transform: translateY(-45%);
    font-size: 3.6rem;
}
#manga .ms_circle.lime span {
    transform: translateY(-55%);
    font-size: 2.3rem;
}
#manga .ms_circle.hotpink span {
    transform: translateY(-40%);
    font-size: 2.6rem;
}

/* メインビジュアル：タイトル（h1） */
#manga #main-visual h1 {
    font-family: 'Noto Sans JP', "Hiragino Kaku Gothic Pro", "Hiragino Sans", sans-serif;
    position: relative;
    z-index: 100;
    font-weight: 900;
    transform: translate(5%, -15%);
    font-size: 40px;
    line-height: 1.2;
    margin: 0;
    letter-spacing: normal;
    color: #333;
}
#manga #main-visual h1 span {
    font-family: 'Noto Sans JP', "Hiragino Kaku Gothic Pro", "Hiragino Sans", sans-serif;
    font-weight: 900;
    line-height: 1.2;
    display: inline;
    font-size: 67px;
}
#manga #main-visual h1 span.text-small {
    font-size: 37px;
    font-weight: 700;
}
#manga #main-visual h1 span.Zen_Kaku {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: 900;
    font-size: 82px;
    padding: 0 1%;
}

/* =========================================================
   背景設定
========================================================= */
#manga #main-visual + #back_image > div img {
    width: 100%;
    transform: translateY(-35%);
}
#manga #back_image {
    background: url(/cdn/shop/files/51ec311770822ccd0065dfd75bc52336.webp?v=1778748655) repeat;
}
#manga .back_image_a {
    background: url(/cdn/shop/files/bg_storya_manga.webp?v=1778748655) no-repeat center 100% / 100% 85%;
}
#manga .back_image_b {
    background: url(/cdn/shop/files/bg_storyb_manga.webp?v=1778748654) no-repeat center 0% / 100% 85%;
}
#manga .back_image_end {
    background: url(/cdn/shop/files/bg_end_manga.webp?v=1778748654) no-repeat center 100.1% / 100% 10%;
    padding: 5rem 0 6rem;
}
#manga section:first-of-type .back_image_a {
    margin-top: -2%;
}

/* =========================================================
   各セクション（manga）共通タイトル（h2）
========================================================= */
#manga section.manga h2 {
    font-family: 'Noto Sans JP', "Hiragino Kaku Gothic Pro", "Hiragino Sans", sans-serif;
    font-weight: 900;
    font-size: 3rem;
    white-space: nowrap;
    display: inline-block;
    position: relative;
    color: #e62d7d;
    text-shadow: 0 0 7px #ffffff, 0 0 7px #ffffff, 0 0 7px #ffffff, 0 0 7px #ffffff, 0 0 7px #ffffff, 0 0 7px #ffffff, 0 0 7px #ffffff, 0 0 7px #ffffff, 0 0 7px #ffffff, 0 0 7px #ffffff, 0 0 7px #ffffff, 0 0 7px #ffffff, 0 0 7px #ffffff, 0 0 7px #ffffff, 0 0 7px #ffffff, 0 0 7px #ffffff, 0 0 7px #ffffff, 0 0 7px #ffffff, 0 0 7px #ffffff, 0 0 7px #ffffff;
    margin-top: 5rem;
    line-height: 1.2;
    padding: 0;
}
#manga section.manga h2::before,
#manga section.manga h2::after {
    content: '＿';
    position: absolute;
    bottom: 5px;
    font-size: 1.6em;
    line-height: 1;
}
#manga section.manga:first-of-type h2::before { left: -5.8%; transform: rotate(45deg); }
#manga section.manga:nth-of-type(4) h2::before { left: -7%; transform: rotate(45deg); }
#manga section.manga:first-of-type h2::after { right: -5.5%; transform: rotate(-45deg); }
#manga section.manga:nth-of-type(4) h2::after { right: -10.5%; transform: rotate(-45deg); }

/* =========================================================
   各セクションのボックス・テキスト
========================================================= */
#manga section.manga:first-of-type .area > div:first-of-type,
#manga section.manga:nth-of-type(2) .area > div:first-of-type {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}
#manga section.manga:first-of-type .area > div:first-of-type,
#manga section.manga:nth-of-type(2) .area > div:first-of-type,
#manga section.manga:nth-of-type(4) .box_black {
    filter: drop-shadow(4px 4px 3px rgba(0, 0, 0, 15%));
    margin: 2rem 0;
}

/* 黒い見出しラベル（h3.black） */
#manga section.manga h3.black {
    font-family: 'Noto Sans JP', "Hiragino Kaku Gothic Pro", "Hiragino Sans", sans-serif;
    color: #ffffff;
    background-color: #3f3936;
    display: inline-block;
    border-radius: 100vh;
    transform: translateY(50%);
    font-size: 2.5rem;
    padding: 0.7rem 3rem 1.0rem;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.2;
}

/* 白枠のボックス（.box_black） */
#manga section.manga .box_black {
    display: inline-block;
    background-color: #ffffff;
    border: 4px solid #3f3936;
    border-radius: 2rem;
    padding: 3.4rem 0 2rem;
    width: 720px;
}
#manga section.manga .box_black > p {
    font-family: 'Noto Sans JP', "Hiragino Kaku Gothic Pro", "Hiragino Sans", sans-serif;
    font-weight: 500;
    display: inline-block;
    text-align: left;
    padding-left: 10px;
    font-size: 2rem;
    line-height: 1.5;
    margin-top: 20px;
}
#manga section.manga:nth-of-type(4) .box_black {
    padding: 2rem 0;
}

/* 薄い黄色のボックス（.box_light_yellow） */
#manga .box_light_yellow {
    position: relative;
    background-color: #fff7be;
    border-radius: 1.5rem;
    padding: 0.7rem 0;
    max-width: 800px;
    margin: 2rem auto;
}
#manga .box_light_yellow .material-icons { padding-right: 10px; }
#manga .box_light_yellow p {
    display: inline-block;
    text-align: left;
}
#manga .box_light_yellow img {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(40%, -57%);
    width: 25%;
    max-width: 170px;
}
#manga section:nth-of-type(4) .box_light_yellow {
    transform: translateX(-3%);
    margin-bottom: 6rem;
}
#manga section:nth-of-type(4) .box_light_yellow p {
    font-weight: 500;
    transform: translateX(-8%);
    width: 80%;
    line-height: 1.5;
    padding: 0.3rem 0 0.5rem;
    font-size: 2rem;
    letter-spacing: 1px;
}

/* =========================================================
   セクション特有の装飾
========================================================= */
/* 「選べるアイテムは750種類以上！」 */
#manga section:first-of-type .additional_explanation {
    position: relative;
    padding: 7rem 0;
    margin: 1rem auto;
}
#manga section:first-of-type .additional_explanation > div {
    position: relative;
    margin: auto;
    width: 400px;
    height: 400px;
}
#manga section:first-of-type .additional_explanation > div > div {
    height: 400px;
    background-color: #ef9825;
    filter: drop-shadow(5px 10px 0px #ec6431);
    border-radius: 50%;
    transform: translateX(-10%);
}
#manga section:first-of-type .additional_explanation > div > img {
    filter: drop-shadow(6px 7px 0px #ec6431);
    position: absolute;
    max-width: 40%;
    max-height: 42%;
}
#manga section:first-of-type .additional_explanation > div > img:first-of-type { top: -9%; right: 4%; }
#manga section:first-of-type .additional_explanation > div > img:nth-of-type(2) { top: -17%; left: 5%; }
#manga section:first-of-type .additional_explanation > div > img:nth-of-type(3) { top: 11%; left: -39%; }
#manga section:first-of-type .additional_explanation > div > img:nth-of-type(4) { transform: rotate(-22deg); top: 78%; left: -15%; }
#manga section:first-of-type .additional_explanation > div > img:last-child { transform: rotate(10deg); top: 70%; right: 30%; }
#manga section:first-of-type .additional_explanation > img {
    position: absolute;
    bottom: 9%;
    right: 10%;
    height: 60%;
}
#manga .additional_explanation div > span {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 900;
    color: #ffffff;
    line-height: 1.2;
    font-size: 42px;
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-37%);
    left: 0;
    right: 0;
}
#manga .additional_explanation div > span > span {
    font-size: 55px;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    display: inline;
}

/* セクション2：シミュレーター */
#manga section:nth-of-type(2) .additional_explanation > div {
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    margin: 3rem 0 5rem;
}
#manga section:nth-of-type(2) .additional_explanation > div > img { width: 25%; }
#manga section:nth-of-type(2) .additional_explanation > div > div {
    position: relative;
    width: 50%;
}
#manga section:nth-of-type(2) .additional_explanation > div > div > img { width: 100%; }
#manga section:nth-of-type(2) .additional_explanation > div > div > p {
    position: absolute;
    left: 0;
    right: 0;
    font-size: 2.1rem;
    top: 50%;
    transform: translateY(-65%);
}

/* =========================================================
   セクション3：サンプル注文（下揃え調整版）
========================================================= */
#manga .sample_order_wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 40px 0;
}

/* 見出し：align-itemsをbaselineにして下揃えにする */
#manga .sample_header {
    display: flex;
    align-items: baseline; /* 🌟centerからbaselineに変更して下揃えに */
    justify-content: center;
    font-size: 2.2rem;
    font-weight: 900;
    margin: 0 0 10px 0;
    color: #333;
    white-space: nowrap; 
}

/* 5の数字 */
#manga .sample_header .Zen_Kaku {
    font-size: 6.2rem;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    line-height: 1;
    margin-right: 5px;
    display: inline-block;
    transform: none;
    /* vertical-align: middle; を削除してベースラインを活かす */
}

#manga .sample_green_pill {
    background-color: #00bdab;
    color: #ffffff;
    padding: 0.8rem 4.5rem;
    border-radius: 100vh;
    font-size: 2.6rem;
    font-weight: 900;
    margin-bottom: 30px;
    box-shadow: 0 5px 0 #196b84;
}

#manga .sample_check_box {
    background-color: #fff9d7;
    border-radius: 25px;
    padding: 3rem 2rem;
    width: 95%;
    max-width: 750px;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

#manga ul.sample_list {
    list-style: none !important;
    list-style-type: none !important;
    padding: 0;
    margin: 0;
    display: inline-block;
    text-align: left;
}

#manga ul.sample_list li {
    list-style: none !important;
    display: flex;
    align-items: flex-start;
    font-size: 1.5rem;
    margin-bottom: 20px;
    line-height: 1.5;
    color: #333;
}

#manga ul.sample_list li::before,
#manga ul.sample_list li::after {
    content: none !important;
    display: none !important;
}

#manga ul.sample_list li:last-child {
    margin-bottom: 0;
}

#manga ul.sample_list li .material-icons {
    margin-right: 12px;
    font-size: 2.4rem;
    flex-shrink: 0;
    margin-top: 2px;
}

/* 📱 スマホ表示 */
@media screen and (max-width: 990px) {
    #manga .sample_header {
        font-size: 4.2vw;
    }
    #manga .sample_header .Zen_Kaku {
        font-size: 12vw;
        margin-right: 1.5vw;
    }
    #manga .sample_green_pill {
        font-size: 5.5vw;
        padding: 2.5vw 10vw;
    }
    #manga .sample_check_box {
        padding: 6vw 5%;
    }
    #manga ul.sample_list li {
        font-size: 3vw;
        margin-bottom: 3vw;
    }
    #manga ul.sample_list li .material-icons {
        font-size: 4vw;
        margin-right: 3vw;
    }
}

/* =========================================================
   共通ボタン設定
========================================================= */
/* 親の箱（余計な背景を消す） */
#manga div.btn {
    margin: 2rem 0 5rem;
    text-align: center;
    display: block;
    background: transparent;
    background-color: transparent;
    border: none;
    box-shadow: none;
}

/* 親の箱に付随するダミー要素を消す */
#manga div.btn::before,
#manga div.btn::after {
    display: none;
    content: none;
}

/* ボタン本体（aタグ） */
#manga div.btn a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* 色と形 */
    background-color: #00bdab;
    color: #ffffff;
    border-radius: 100vh; 
    
    /* 下の立体感 */
    border: none;
    border-bottom: 8px solid #196b84;
    box-shadow: none;
    
    /* 余白と文字サイズ */
    padding: 2.0rem 7rem;
    font-size: 2.3rem;
    font-weight: 700;
    letter-spacing: 4px;
    line-height: 1;
    text-decoration: none;
}

/* マウスホバー時の動き */
#manga div.btn a:hover {
    opacity: 0.9;
    transform: translateY(3px);
    border-bottom: 5px solid #196b84;
    background-color: #00bdab;
    text-decoration: none;
}

/* スマホ用の設定（@media の中に入れます） */
@media screen and (max-width: 800px) {
    #manga div.btn a {
        padding: 4vw 8vw;
        font-size: 4vw;
        border-bottom: 1.5vw solid #196b84;
        width: 90%; 
        box-sizing: border-box;
    }
    #manga div.btn a:hover {
        transform: translateY(0.5vw);
        border-bottom: 1vw solid #196b84;
    }
}

/* =========================================================
   セクション：お客様の声 (cases)
========================================================= */
#manga #cases .area h3 {
    color: #22adec;
    font-weight: 500;
    font-size: 2.8rem;
    line-height: 1.6;
    margin-bottom: 50px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-shadow: 0 0 4px #ffffff, 0 0 4px #ffffff, 0 0 4px #ffffff, 0 0 4px #ffffff, 0 0 4px #ffffff, 0 0 4px #ffffff, 0 0 4px #ffffff, 0 0 4px #ffffff, 0 0 4px #ffffff, 0 0 4px #ffffff, 0 0 4px #ffffff, 0 0 4px #ffffff, 0 0 4px #ffffff, 0 0 4px #ffffff, 0 0 4px #ffffff, 0 0 4px #ffffff, 0 0 4px #ffffff, 0 0 4px #ffffff, 0 0 4px #ffffff, 0 0 4px #ffffff;
}
#manga #cases .cases_position {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}
#manga #cases .case {
    width: 48%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin-bottom: 50px;
    box-sizing: border-box;
}
#manga #cases .case:nth-child(even) {
    margin-top: 80px;
}
#manga #cases .case img {
    width: 40%;
    flex-shrink: 0;
    margin-right: 5%;
    height: auto;
}
#manga #cases .case > div {
    width: 55%;
    display: flex;
    flex-direction: column;
    text-align: left;
}
#manga #cases .case > div p {
    width: 100%;
    white-space: normal;
    word-break: break-word;
    font-weight: 500;
    text-align: left;
    padding-top: 1rem;
    font-size: 18px;
    letter-spacing: 0.7px;
    line-height: 1.5;
}
/* アイテム名 */
#manga #cases .case > div > span:first-of-type {
    width: 100%;
    white-space: normal;
    word-break: break-word;
    font-weight: 800;
    display: inline-block;
    width: fit-content;
    margin-bottom: 15px;
    font-size: 2rem;
    background: linear-gradient(transparent 55%, #fff800 0%);
    padding: 0 0.5rem;
}

/* リンクボタン */
#manga #cases .case > div a.case_btn {
    display: inline-block;
    width: fit-content;
    width: -moz-fit-content;
    width: max-content;
    align-self: flex-start;
    color: #ffffff;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 0.5rem 1rem;
    margin-top: 10px;
    background-color: #5fb7c3;
    border: none;
    box-shadow: none;
    font-size: 16px;
}
#manga #cases .case > div a.case_btn:hover { opacity: 0.8; }
#manga #cases .case > div a.case_btn span {
    text-decoration: underline;
    color: #ffffff;
    background: transparent;
}
#manga #cases .case > div a.case_btn::before,
#manga #cases .case > div a.case_btn::after {
    display: none !important;
    content: none !important;
}

/* =========================================================
   セクション：アイテムを選ぶ
========================================================= */
#manga section#itemcategory {
    background-color: #ffffff;
    padding-top: 6rem;
}
#manga section#itemcategory h3 {
    font-weight: 700;
    width: 70%;
    color: #c8161e;
    font-size: 2.5rem;
    padding-bottom: 1rem;
    border-bottom: 3px solid;
    margin: auto;
}
#manga div.flexbox_select {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 25px 10px;
}
#manga .flexbox_select_item {
    width: 150px;
    padding-bottom: 30px;
}
#manga .flexbox_select_item img {
    width: 100%;
    padding: 10px;
    transition: 0.3s;
}
#manga .flexbox_select_item a {
    color: #333;
    font-size: 13px;
    transition: 0.2s;
}
#manga .flexbox_select_item a:hover { color: #ee1923; }
#manga .flexbox_select_item a:hover > img { transform: scale(1.1); }

/* =========================================================
   フッター・ページトップ
========================================================= */
#manga #lp_footer {
    padding: 25px 15px;
    background-color: #8f8f8f;
    color: white;
    font-family: 'Kosugi Maru', sans-serif;
    font-weight: normal;
}
#manga #lp_footer a {
    display: inline-block;
    color: white;
    text-decoration: none;
    border-bottom: 1px solid white;
    padding-bottom: 4px;
    transition: 0.2s;
}
#manga #lp_footer a:hover {
    transform: translateY(2px);
    opacity: 0.7;
}
#manga address { font-style: normal; }
#manga address p { margin: 1rem 0; }
#manga .footer_tel { font-size: 35px; }
#manga .list-inline { margin-top: 2rem; }
#manga .list-inline > li { display: inline-block; padding: 0 4px 15px; }
#manga .copyright { font-family: 'Lato', sans-serif; margin: 20px 0 10px 0; }
#page_top {
    position: fixed;
    background: #333;
    border-radius: 100vh;
    transition: 0.2s;
    bottom: 2rem;
    right: 1.5rem;
    width: 3.5rem;
    height: 3.5rem;
}
#page_top a {
    position: absolute;
    border-radius: 100vh;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
#page_top a::before {
    position: absolute;
    content: '';
    color: #ffffff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    border-style: solid;
    border-color: transparent transparent #ffffff transparent;
    border-width: 0px 8px 12px 8px;
}
#page_top:hover { opacity: 0.8; }

/* =========================================================
   FAQ
========================================================= */
#manga section.faqBox {
    max-width: 990px;
    width: 100%;
    margin: 0 auto 50px;
    padding: 0 1.5%;
    /* リスト設定をリセット */
    list-style: none !important;
}

#manga .faqBox a:hover { text-decoration: none; }

#manga .faqBox__title {
    padding: 15px;
    font-size: 32px;
    font-weight: bold;
    text-align: left;
    background-color: #95C51B;
    color: #fff;
    display: block;
    text-shadow: none;
}

/* 項目ごとの「点」を完全に消去 */
#manga .faqBox__item { 
    margin: 30px 0 0 0; 
    list-style: none !important;
    list-style-type: none !important;
}

/* テーマ側が ::before で点を出している場合の対策 */
#manga .faqBox__item::before,
#manga .faqBox__item::after {
    content: none !important;
    display: none !important;
}

#manga .faqBox__item:not(:last-child) { 
    border-bottom: 1px dotted #cccccc; 
}

#manga .faqBox__question {
    padding: 10px 0 0 0;
    display: flex;
    font-size: 20px;
    font-weight: bold;
    color: #336699;
}

#manga .faqBox__answer {
    display: flex;
    padding: 10px 0 10px 0;
    font-size: 16px;
    line-height: 1.6;
    text-align: left;
}

/* QとAのアイコン画像（ここは消さないように注意） */
#manga .faqBox__question::before,
#manga .faqBox__answer::before {
    content: "";
    flex-shrink: 0;
    width: 50px;
    height: 38px;
    background-repeat: no-repeat;
    background-size: contain;
    transform: translate(0, -10px);
    padding-right: 5px;
}
#manga .faqBox__question::before { background-image: url("/images/common/faq01.gif"); }
#manga .faqBox__answer::before { background-image: url("/images/common/faq02.gif"); }

#manga a.faqBox__more {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    padding: 10px;
    margin: 20px 0 20px auto;
    font-size: 16px;
    background-color: #5fb7c3;
    color: #fff;
}


/* =========================================================
   レスポンシブ設定（ここから下がスマホ用の設定になります）
========================================================= */

@media (min-width: 769px) {
    a[href*="tel:"] { pointer-events: none; cursor: default; text-decoration: none; }
}

/* ▼▼ 990px以下（タブレット・スマホ共通） ▼▼ */
@media screen and (max-width: 990px) {
    #manga #main-visual { padding-top: 20%; }
    #manga #main-visual > div {
        background-size: 65%;
        background-position: 70% 45%;
        width: 97vw;
        height: 68vw;
    }
    #manga #main-visual > div > div + img { right: -9%; }
    
    #manga .ms_circle.yellow { width: 23vw; height: 23vw; }
    #manga .ms_circle.lime { width: 17vw; height: 17vw; left: 62%; }
    #manga .ms_circle.hotpink { width: 19.5vw; height: 19.5vw; }
    #manga .ms_circle.yellow span { font-size: 5.5vw; }
    #manga .ms_circle.lime span { font-size: 3.3vw; }
    #manga .ms_circle.hotpink span { font-size: 4vw; }
    
    #manga #main-visual h1 { font-size: 4.2vw; line-height: 1.2; }
    #manga #main-visual h1 span { font-size: 7vw; }
    #manga #main-visual h1 span.text-small { font-size: 3.8vw; }
    #manga #main-visual h1 span.Zen_Kaku { font-size: 8.5vw; }
    
    #manga img.manga_img, #manga section img { max-width: 96vw; }
    
    /* 「オリジナルグッズを作るなら〜」絶対に1行にする */
    #manga section.manga h2 {
        font-size: 5vw;
        white-space: nowrap;
        width: 100%;
        padding: 0 5px;
        box-sizing: border-box;
        text-align: center;
        text-shadow: 0 0 0.7vw #ffffff, 0 0 0.7vw #ffffff, 0 0 0.7vw #ffffff, 0 0 0.7vw #ffffff, 0 0 0.7vw #ffffff, 0 0 0.7vw #ffffff, 0 0 0.7vw #ffffff, 0 0 0.7vw #ffffff, 0 0 0.7vw #ffffff, 0 0 0.7vw #ffffff;
        margin-top: 6.5vw;
    }
    #manga section.manga h2::before, #manga section.manga h2::after { font-size: 7vw; }
    #manga section.manga h2::before { left: 3%; }
    #manga section.manga h2::after { right: 3%; }
    
    #manga section.manga .box_black {
        padding: 6vw 0 4vw;
        max-width: 94vw;
        border-radius: 3vw;
    }
    
    #manga section:first-of-type .additional_explanation { padding: 10vw 0; }
    #manga section:first-of-type .additional_explanation > div { width: 40vw; height: 40vw; }
    #manga section:first-of-type .additional_explanation > div > div { height: 40vw; }
    #manga section:first-of-type .additional_explanation > div > div > span { font-size: 4.5vw; }
    
    #manga section:nth-of-type(2) .additional_explanation > div > div > p { font-size: 3.2vw; }
    
    /* サンプル注文 */
    #manga .sample_header { font-size: 3.5vw; }
    #manga .sample_header .Zen_Kaku { font-size: 10vw; }
    #manga .sample_list li { font-size: 3.6vw; }
    #manga .sample_check_box { padding: 3rem 5%; }
    
    }
    
    #manga section.manga h2::before,
    #manga section.manga h2::after {
        font-size: 6vw; 
        bottom: 0.5vw; /* 線の高さを微調整 */
    }

    /* 🌟 PC用の詳しい呼び方に合わせて、優先度を上げる！ */
    /* 左側の線（1番目と4番目のセクション） */
    #manga section.manga:first-of-type h2::before,
    #manga section.manga:nth-of-type(4) h2::before {
        left: -4vw; 
    }
    
    /* 右側の線（1番目と4番目のセクション） */
    #manga section.manga:first-of-type h2::after,
    #manga section.manga:nth-of-type(4) h2::after {
        right: -4vw; 
    }
}


/* ▼▼ 860px以下 ▼▼ */
@media screen and (max-width: 860px) {
    #manga section.manga:nth-of-type(2) .box_black > p { font-size: 3.5vw; }
    #manga .additional_explanation div>span>span { font-size: 45px; }
}

/* ▼▼ 800px以下 ▼▼ */
@media screen and (max-width: 800px) {
    #manga section.manga:first-of-type .area > div:first-of-type,
    #manga section.manga:nth-of-type(2) .area > div:first-of-type { margin: 4vw 0; }
    #manga section.manga h3.black { font-size: 4.7vw; padding: 1vw 4vw 1.5vw; }
    #manga section.manga:first-of-type .box_black > p { font-size: 4.3vw; }
    
    #manga section:nth-of-type(4) .box_light_yellow { max-width: 85vw; margin-bottom: 10vw; }
    #manga section:nth-of-type(4) .box_light_yellow p { font-size: 3.5vw; }
    #manga .box_light_yellow img { transform: translate(35%, -57%); }
    
    #manga .back_image_end { background-size: 100% 3%; padding: 10vw 0 9vw; }
    
    #manga #cases h3 { font-size: 5vw; }
    #manga #cases h3 + div { margin-top: 2.5vw; }
    #manga #cases .cases_position { max-width: 760px; flex-wrap: wrap; justify-content: center; }
    
    #page_top { bottom: 1rem; right: 1rem; width: 40px; height: 40px; }
    #manga #cases .area h3 { font-size: 5vw; }
}

/* ▼▼ 760px以下 ▼▼ */
@media screen and (max-width: 760px) {
    #manga .additional_explanation div>span>span { font-size: 40px; }
    #manga .sample_green_pill { font-size: 4.5vw; }
    #manga ul.sample_list li { font-size: 3vw; }
    #manga ul.sample_list li .material-icons { font-size: 4vw; }
    #manga .sample_check_box {  padding: 2rem 0; }

}


/* ▼▼ 700px以下 ▼▼ */
@media screen and (max-width: 700px) {
    .overflow-x_hidden{ overflow-x: hidden; }
    #manga section.faqBox{ width: fit-content; padding: 0 10px; }
    #manga .faqBox__title { text-align: left; }
    #manga .faqBox__question { text-align: left; }
    #manga a.faqBox__more { width: 100%; }

    #manga section:nth-of-type(2) .additional_explanation > div { margin: 4vw 0 6vw; }
    #manga .btn a { padding: 1.8vw 8vw; border-radius: 2vw; font-size: 4vw; }
    #manga .box_light_yellow { max-width: 96vw; border-radius: 3vw; padding: 1.5vw 0; }
    #manga .box_light_yellow .material-icons { font-size: 3.5vw; padding-right: 1.5vw; }
    #manga section.manga:nth-of-type(4) .box_black { margin-top: 5vw; padding: 3vw; }
    #manga section.manga:nth-of-type(4) .box_black p { font-size: 4.3vw; }
    #manga section#itemcategory h3 { font-size: 5.5vw; }
    #manga section#itemcategory { padding-top: 18vw; }
}

/* ▼▼ 590px以下（スマホ表示） ▼▼ */
@media screen and (max-width: 590px) {
    header .pc { display: none; }
    header .sp { display: initial; }
    header .material-icons { font-size: 7vw; }
    header li { margin: 0 2vw; }
    header li img { background-color: #ffffff; border-radius: 100vh; max-height: 7vw; }
    header li:first-child a { padding: 0; border: unset; }
    header li a:hover { background-color: unset !important; opacity: 0.8; }
    header li:last-child { margin: 0 0 0 1vw; }
    header img { max-height: 10vw; vertical-align: middle; }

    #manga #main-visual > div { padding: 0 0.5%; height: 70vw; background-size: 67%; background-position: 75% 53%; }
    #manga #main-visual > div > div + img { right: -14.2%; bottom: 5%; }
    #manga .ms_circle.yellow { width: 24vw; height: 24vw; }
    #manga .ms_circle.lime { width: 19vw; height: 19vw; }
    #manga .ms_circle.hotpink { width: 20.5vw; height: 20.5vw; }
    #manga .ms_circle.yellow span { font-size: 6vw; }
    #manga .ms_circle.lime span { font-size: 3.8vw; }
    #manga .ms_circle.hotpink span { font-size: 4.2vw; }
    #manga #main-visual h1 { font-size: 4.3vw; line-height: 1.1; }
    #manga #main-visual h1 span.text-small { font-size: 4vw; }
    #manga #main-visual h1 span { font-size: 7.5vw; }

    #manga section:first-of-type .additional_explanation > div { width: 44vw; height: 44vw; transform: translateX(-3%); }
    #manga section:first-of-type .additional_explanation > div > div { height: 44vw; filter: drop-shadow(3px 7px 0px #ec6431); }
    #manga section:first-of-type .additional_explanation > div > img { filter: drop-shadow(3px 4px 0px #ec6431); }
    #manga section.manga:nth-of-type(2) .box_black > p { font-size: 4vw; }
    #manga section:first-of-type .additional_explanation > div > div > span { font-size: 5vw; }
    
    #manga #cases h3 { font-size: 6vw; }
    #manga ul.list-inline { width: max-content; margin: 0.5rem auto 0; display: inline-flex; flex-direction: column; }
    #manga ul.list-inline > li { text-align: left; }
    #manga .additional_explanation div>span>span { font-size: 35px; }
    #manga #cases .area h3 { font-size: 6vw; }
}

/* ▼▼ 450px以下 ▼▼ */
@media screen and (max-width: 450px) {
    #manga section.manga .box_black { border-radius: 4.3vw; border: 3px solid #3f3936; }
    #manga section:nth-of-type(2) .additional_explanation > div > img { width: 27%; }
    #manga section:nth-of-type(2) .additional_explanation > div > div { width: 65%; }
    #manga section:nth-of-type(2) .additional_explanation > div > div > p { font-size: 4.2vw; }
    #manga section:nth-of-type(4) .box_light_yellow p { font-size: 3.8vw; letter-spacing: 0; transform: translateX(-9%); }
    #manga .btn a { font-size: 4.5vw; letter-spacing: 3px; }
    #manga section#itemcategory h3 { font-size: 7.5vw; width: 77%; }
    #page_top { bottom: 0.5rem; width: 30px; height: 30px; }
    #page_top a::before { border-width: 0px 7px 9px 7px; }
    #manga .additional_explanation div>span>span { font-size: 25px; }
}

/* ▼▼ 410px以下 ▼▼ */
@media screen and (max-width: 410px) {
    #manga #cases .cases_position { padding: 0 2%; }

    @media screen and (max-width: 990px) {
    #manga section.manga h2 {
        /* 箱の幅を「文字の長さにぴったり合わせる」 */
        width: max-content;
        margin-left: auto;
        margin-right: auto;
        
        /* 左右の装飾を含めても画面に収まるように文字サイズを微調整 */
        font-size: 4.5vw; 
        white-space: nowrap;
        padding: 0;
    }
    
    #manga section.manga h2::before,
    #manga section.manga h2::after {
        font-size: 6vw; 
        bottom: 0.5vw; /* 線の高さを微調整 */
    }

    /* 線を文字のすぐ外側に配置する */
    #manga section.manga h2::before {
        left: -6vw; 
    }
    
    #manga section.manga h2::after {
        right: -6vw; 
    }
    #manga ul.sample_list li{
        font-size: 13px;
    }  
}
}
/* =========================================================
   お客様の声：スマホ版（画像左・テキスト右の横並び）
========================================================= */

/* =========================================================
   お客様の声：スマホ版（画像左・テキスト右 ＆ ボタン幅調整）
========================================================= */

@media screen and (max-width: 990px) {
    /* 1. 外枠：横並び（row）を維持 */
    #manga #cases .case {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 0 35px 0 !important;
        padding: 0 !important;
    }

    /* 2. 画像：左側に配置 */
    #manga #cases .case img {
        width: 38% !important;
        height: auto !important;
        margin: 0 15px 0 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }

    /* 3. テキストとボタンを包む箱 */
    #manga #cases .case > div {
        width: 58% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    /* 4. タイトル：黄色マーカー */
    #manga #cases .case > div > span:first-of-type {
        font-size: 18px !important;
        font-weight: 800 !important;
        background: linear-gradient(transparent 60%, #fff800 0%) !important;
        margin-bottom: 10px !important;
        padding: 0 2px !important;
        display: inline-block !important;
    }

    /* 5. 本文テキスト */
    #manga #cases .case > div p {
        font-size: 13px !important;
        line-height: 1.5 !important;
        margin-bottom: 12px !important;
        color: #333 !important;
    }

    /* 6. ボタン：横幅を中身に合わせる（fit-content） */
    #manga #cases .case > div a.case_btn {
        display: inline-flex !important; /* flexからinline-flexに変更 */
        width: fit-content !important;    /* 🌟ここがポイント：中身の幅に合わせる */
        min-width: 160px !important;      /* 短くなりすぎないよう最低幅を設定 */
        background-color: #5fb7c3 !important;
        color: #ffffff !important;
        justify-content: center !important;
        padding: 8px 15px !important;     /* 左右に少し余白 */
        text-decoration: none !important;
        margin: 0 !important;
    }

    /* ボタン内のテキスト：下線あり */
    #manga #cases .case > div a.case_btn span {
        background: transparent !important;
        color: #ffffff !important;
        font-size: 12px !important;
        text-decoration: underline !important;
        text-underline-offset: 3px !important;
    }
}