に全部入っています） :where() を使うのは特異度を増やさないためです。素の .pcwrap で前置すると特異度が1つ上がり、Swiperなどライブラリ側CSSを意図せず上書きします。・支給時の原本は style.orig.css（アップロード不要／編集しない／切り戻し用）。スコープ化に使った変換スクリプトはプロジェクト直下 scope_css.py。 ※一度きりの変換用なので、通常は再実行しません。 ============================================================ */ /* ---- ここだけ意図的にグローバル（必要最小限） ---- */ html { scroll-behavior: smooth; /* ページ内アンカーのスムーススクロール */ } body { margin: 0; /* 既存テーマ側でリセット済みなら削除可 */ } @media (min-width: 500px) { body { /* PC表示時のLP外側の背景。テーマ側の背景と競合する場合はこの1ブロックを削除 */ background: #F4F4F4; } } /* ---- ここから下は .pcwrap 配下にスコープ済み ---- */ :where(.pcwrap), :where(.pcwrap) * { list-style: none; margin: 0; padding: 0; text-decoration: none; -webkit-box-sizing: border-box; box-sizing: border-box; } :where(.pcwrap) { font-family: "Noto Sans JP", sans-serif; font-size: 3.5135135135vw; font-weight: 500; line-height: 160%; color: #000; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; position: relative; } @media (min-width: 500px) { :where(.pcwrap) { font-size: 14px; } } :where(.pcwrap) main { overflow: hidden; background-color: #fff; } .pcwrap { /* 2026/8/19: z-index: 999 を外した。 999 があると .pcwrap が「積み重ねコンテキスト」を作り、その中の ::before（画面全体を覆う position:fixed のレンガ背景／z-index:-1）ごとテーマのフッターより手前のレイヤーに乗ってしまい、フッターの文字に被る。 z-index を指定しなければ ::before がページ最背面に落ちて解消する。 LP内部の z-index は最大10（.side-area）なのでテーマ側のメニュー（z-index 99〜99999）を覆う心配はない。 */ position: relative; } @media (min-width: 500px) { .pcwrap { max-width: 500px; margin: auto; } .pcwrap::before { content: ""; background-image: url("../../images/bg_pcmain.png"); background-repeat: repeat-y; background-size: 100% auto; background-position: center center; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; } } :where(.pcwrap) .side-area { /* 2026/8/19: position: fixed → sticky に変更。 fixed だと画面中央に居座り続け、LPを読み終えてテーマのフッター領域に入ってもロゴが重なったままになるため。sticky は親（.pcwrap ＝ LP本体）の範囲でしか追従しないので、LPの末尾で自動的に止まる。仕組み: 高さ0のstickyラインを画面中央＋ロゴ半分の位置に置き、 align-items:flex-end でロゴの「下端」をそのラインに合わせている。 stickyの停止位置はこのラインなので、ロゴ下端がLPの末尾を超えない。ロゴの中心は結果的に画面中央にきて、fixed のときと同じ見た目になる。 */ --logo-h: 5.5vw; position: -webkit-sticky; position: sticky; top: calc(50vh + var(--logo-h) / 2); height: 0; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; z-index: 10; padding: 0; pointer-events: none; /* 幅100%なのでLPのリンクを塞がないように */ } :where(.pcwrap) .side-area .logo { width: auto; max-width: none; min-width: 0; height: var(--logo-h); /* 5.5vw。stickyの停止位置の計算と連動させるため変数化 */ } :where(.pcwrap) .side-left { /* sticky化に伴い left/right での配置をやめ、 LPカラムの左端から自分の幅ぶん＋5vw ぶん左へずらす方式に変更（余白は従来と同じ） */ left: auto; right: auto; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } :where(.pcwrap) .side-left .logo { -webkit-transform: translateX(calc(-100% - 5vw)); transform: translateX(calc(-100% - 5vw)); } :where(.pcwrap) .side-right { /* 同上。LPカラムの右端から 2.5vw ぶん右へずらす（余白は従来と同じ） */ right: auto; left: auto; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } :where(.pcwrap) .side-right .logo { -webkit-transform: translateX(calc(100% + 2.5vw)); transform: translateX(calc(100% + 2.5vw)); } @media (max-width: 1500px) { :where(.pcwrap) .side-right, :where(.pcwrap) .side-left { display: none; } } :where(.pcwrap) .jp { font-family: "Zen Kaku Gothic Antique", sans-serif; } :where(.pcwrap) img { width: 100%; height: auto; vertical-align: bottom; } :where(.pcwrap) a { display: block; text-decoration: none; } :where(.pcwrap) .note { font-size: 2.4324324324vw !important; margin-top: 5px; line-height: 160%; } @media (min-width: 500px) { :where(.pcwrap) .note { font-size: 12px !important; } } :where(.pcwrap) .footer_copyrite { background: #fff; padding: 20px 10px; } :where(.pcwrap) .footer_copyrite img { width: 60%; margin: auto; display: block; } :where(.pcwrap) #top .mv { position: relative; } :where(.pcwrap) #top .mv h1 { margin-bottom: 10px; } :where(.pcwrap) #top .mv ul li { position: absolute; } :where(.pcwrap) #top .mv ul li img { -webkit-filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.3)); filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.3)); } :where(.pcwrap) #top .mv ul li.product_01 { width: 27.5675675676vw; top: 49%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 15vw; } @media (min-width: 500px) { :where(.pcwrap) #top .mv ul li.product_01 { width: 138px; left: 75px; } } :where(.pcwrap) #top .mv ul li.product_02 { width: 17.2972972973vw; top: 48%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 44.5vw; } @media (min-width: 500px) { :where(.pcwrap) #top .mv ul li.product_02 { width: 86px; left: 223px; } } :where(.pcwrap) #top .mv ul li.product_03 { width: 17.2972972973vw; top: 82.5%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 22vw; } @media (min-width: 500px) { :where(.pcwrap) #top .mv ul li.product_03 { width: 86px; left: 110px; } } :where(.pcwrap) #top .mv ul li.product_04 { width: 17.2972972973vw; top: 81.5%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 41vw; } @media (min-width: 500px) { :where(.pcwrap) #top .mv ul li.product_04 { width: 86px; left: 205px; } } :where(.pcwrap) #top .mv ul li.product_05 { width: 20vw; top: 76%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 60vw; } @media (min-width: 500px) { :where(.pcwrap) #top .mv ul li.product_05 { width: 100px; left: 300px; } } :where(.pcwrap) #contents { background: url("../../images/bg_shop.png"); background-size: cover; padding: 40px 6vw; } @media (min-width: 500px) { :where(.pcwrap) #contents { padding: 40px 30px; } } :where(.pcwrap) #contents h2 { font-size: 4.0540540541vw; letter-spacing: 0.1em; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; margin: 20px 0; } @media (min-width: 500px) { :where(.pcwrap) #contents h2 { font-size: 16px; } } :where(.pcwrap) #contents h2 span { display: inline-block; width: clamp(200px, 60%, 350px); padding: 0 2vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (min-width: 500px) { :where(.pcwrap) #contents h2 span { padding: 0 10px; } } :where(.pcwrap) #contents h2::before, :where(.pcwrap) #contents h2::after { content: ""; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; height: 2px; background-color: #EF8468; } :where(.pcwrap) #contents .online_wrap { background: #EF8468; -webkit-box-shadow: 4px 4px rgba(0, 0, 0, 0.3); box-shadow: 4px 4px rgba(0, 0, 0, 0.3); padding: 10px 0 20px; margin-bottom: 30px; } :where(.pcwrap) #contents .online_wrap h2 { color: #fff; } :where(.pcwrap) #contents .online_wrap h2::before, :where(.pcwrap) #contents .online_wrap h2::after { background-color: #fff; } :where(.pcwrap) #contents .online_wrap ul { margin: 5px 5vw; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; } @media (min-width: 500px) { :where(.pcwrap) #contents .online_wrap ul { margin: 5px 25px; } } :where(.pcwrap) #contents .online_wrap ul li { width: calc((100% - 20px) / 3); } :where(.pcwrap) #contents .online_wrap ul li:only-child { width: calc((100% - 10px) / 2); } :where(.pcwrap) #contents .online_wrap ul li:only-child a { padding: 2px 10vw; } @media (min-width: 500px) { :where(.pcwrap) #contents .online_wrap ul li:only-child a { padding: 2px 50px; } } :where(.pcwrap) #contents .online_wrap ul li a { display: block; background: #fff; padding: 2px 2vw; } @media (min-width: 500px) { :where(.pcwrap) #contents .online_wrap ul li a { padding: 2px 10px; } } :where(.pcwrap) #contents .online_wrap ul li img { width: 100%; height: auto; } :where(.pcwrap) #contents .online_wrap .shop_search { font-size: 4.5945945946vw; font-weight: 600; display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; background: #fff; color: #EF8468; padding: 10px 4vw; margin: 0 auto; } @media (min-width: 500px) { :where(.pcwrap) #contents .online_wrap .shop_search { font-size: 18px; } } :where(.pcwrap) #contents .online_wrap .note { color: #fff; text-align: center; } :where(.pcwrap) #contents .contents_list_wrap h2 { letter-spacing: 2em; text-indent: 2em; } :where(.pcwrap) #contents .contents_list_wrap ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 3vw; width: 100%; } @media (min-width: 500px) { :where(.pcwrap) #contents .contents_list_wrap ul { gap: 15px; } } :where(.pcwrap) #contents .contents_list_wrap ul li { width: calc((100% - 9vw) / 4); } @media (min-width: 500px) { :where(.pcwrap) #contents .contents_list_wrap ul li { width: calc((100% - 45px) / 4); } } :where(.pcwrap) #contents .contents_list_wrap ul li a { font-weight: 700; line-height: 140%; background-image: -webkit-gradient(linear, left top, left bottom, from(#EF8468), to(#EA5A42)); background-image: linear-gradient(to bottom, #EF8468, #EA5A42); -webkit-box-shadow: 4px 4px rgba(0, 0, 0, 0.3); box-shadow: 4px 4px rgba(0, 0, 0, 0.3); text-align: center; border-radius: 10px; padding: 25px 0 15px; position: relative; } :where(.pcwrap) #contents .contents_list_wrap ul li a span { letter-spacing: -0.12em; -webkit-transform: scaleX(0.8); transform: scaleX(0.8); display: inline-block; } :where(.pcwrap) #contents .contents_list_wrap ul li a .arrow { width: 5.4054054054vw; margin: 10px auto 0; display: block; } @media (min-width: 500px) { :where(.pcwrap) #contents .contents_list_wrap ul li a .arrow { width: 27px; } } :where(.pcwrap) #contents .contents_list_wrap ul li:nth-child(even) a { color: #fff; } :where(.pcwrap) #contents .contents_list_wrap ul li:nth-child(odd) a { color: #FFF67F; } :where(.pcwrap) #contents #goods { background: #EF8468; margin: 0 -6vw; } @media (min-width: 500px) { :where(.pcwrap) #contents #goods { margin: 0 -30px; } } :where(.pcwrap) #about { background: #D3D3D4; padding: 10vw 8vw 30px; } @media (min-width: 500px) { :where(.pcwrap) #about { padding: 50px 40px 30px; } } :where(.pcwrap) #about .about_wrap { background: #fff; padding: 5vw 5vw 20px; } @media (min-width: 500px) { :where(.pcwrap) #about .about_wrap { padding: 25px 20px 20px; } } :where(.pcwrap) #about .about_wrap hgroup { position: relative; } :where(.pcwrap) #about .about_wrap hgroup .icn { width: 39.1891891892vw; position: absolute; top: -18vw; left: -14vw; } @media (min-width: 500px) { :where(.pcwrap) #about .about_wrap hgroup .icn { width: 196px; top: -90px; left: -70px; } } :where(.pcwrap) #about .about_wrap hgroup p { text-align: center; margin-top: 4vw; } @media (min-width: 500px) { :where(.pcwrap) #about .about_wrap hgroup p { margin-top: 20px; } } :where(.pcwrap) #about .about_wrap hgroup p img { width: 21.0810810811vw; } @media (min-width: 500px) { :where(.pcwrap) #about .about_wrap hgroup p img { width: 105px; } } :where(.pcwrap) #about .about_wrap hgroup h2 { font-size: 5.9459459459vw; font-weight: 900; line-height: 160%; letter-spacing: 0.2em; text-align: center; color: #EF8468; margin: 20px auto; } @media (min-width: 500px) { :where(.pcwrap) #about .about_wrap hgroup h2 { font-size: 24px; } } :where(.pcwrap) #about .about_wrap .img_aboutmain { margin: 0 -8vw 8vw; position: relative; } @media (min-width: 500px) { :where(.pcwrap) #about .about_wrap .img_aboutmain { margin: 0 -40px 40px; } } :where(.pcwrap) #about .about_wrap .img_aboutmain .main_img { width: 100%; height: auto; display: block; } :where(.pcwrap) #about .about_wrap .img_aboutmain .map_img { width: 34.0540540541vw; position: absolute; bottom: -9vw; right: -3vw; } @media (min-width: 500px) { :where(.pcwrap) #about .about_wrap .img_aboutmain .map_img { width: 170px; bottom: -45px; right: -15px; } } :where(.pcwrap) #about .about_wrap .text_wrap { display: flow-root; width: 100%; } :where(.pcwrap) #about .about_wrap .text_wrap p { font-size: 3.2432432432vw; letter-spacing: 0.04em; text-align: justify; } @media (min-width: 500px) { :where(.pcwrap) #about .about_wrap .text_wrap p { font-size: 13px; } } :where(.pcwrap) #about .about_wrap .text_wrap .img_wrap .circle { border-radius: 50%; border: 3px solid #fff; } :where(.pcwrap) #about .about_wrap .img_right_wrap { margin-bottom: -1vw; } @media (min-width: 500px) { :where(.pcwrap) #about .about_wrap .img_right_wrap { margin-bottom: -5px; } } :where(.pcwrap) #about .about_wrap .img_right_wrap p { margin-right: 1em; } :where(.pcwrap) #about .about_wrap .img_right_wrap::before { content: ""; float: right; width: 0; height: 13vw; } @media (min-width: 500px) { :where(.pcwrap) #about .about_wrap .img_right_wrap::before { height: 65px; } } :where(.pcwrap) #about .about_wrap .img_right_wrap .img_right img { float: right; clear: right; width: 37.8378378378vw; height: 37.8378378378vw; margin: 0 -16vw 10px 3px; } @media (min-width: 500px) { :where(.pcwrap) #about .about_wrap .img_right_wrap .img_right img { width: 140px; height: 140px; margin: -10px -60px 10px 3px; } } :where(.pcwrap) #about .about_wrap .img_left_wrap { margin-bottom: 6vw; } @media (min-width: 500px) { :where(.pcwrap) #about .about_wrap .img_left_wrap { margin-bottom: 15px; } } :where(.pcwrap) #about .about_wrap .img_left_wrap .img_left { margin-left: -13vw; } @media (min-width: 500px) { :where(.pcwrap) #about .about_wrap .img_left_wrap .img_left { margin-left: -65px; } } :where(.pcwrap) #about .about_wrap .img_left_wrap .img_left .square { float: left; clear: left; width: 43.2432432432vw; margin: 0 10px 10px 0; } @media (min-width: 500px) { :where(.pcwrap) #about .about_wrap .img_left_wrap .img_left .square { width: 180px; margin: -50px 10px 10px 0; } } :where(.pcwrap) #about .about_wrap .img_left_wrap .img_left .circle { float: left; clear: left; width: 32.4324324324vw; height: 32.4324324324vw; margin: 0 10px 10px 5vw; } @media (min-width: 500px) { :where(.pcwrap) #about .about_wrap .img_left_wrap .img_left .circle { width: 130px; height: 130px; margin: 0 10px 10px 20px; } } :where(.pcwrap) #about .about_wrap ol { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 3vw 1fr; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 4vw 3vw; } @media (min-width: 500px) { :where(.pcwrap) #about .about_wrap ol { gap: 20px 15px; } } :where(.pcwrap) #about .about_wrap ol li { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; background: #EF8468; border-radius: 15px; padding: 10px 0; } :where(.pcwrap) #about .about_wrap ol li .num { width: 6.7567567568vw; position: absolute; top: -3.5vw; left: -2vw; } @media (min-width: 500px) { :where(.pcwrap) #about .about_wrap ol li .num { width: 34px; top: -17.5px; left: -10px; } } :where(.pcwrap) #about .about_wrap ol li p { font-size: 2.972972973vw; font-weight: 800; line-height: 130%; color: #fff; } @media (min-width: 500px) { :where(.pcwrap) #about .about_wrap ol li p { font-size: 12px; } } :where(.pcwrap) #about .about_wrap ol li p sup { font-size: 2.4324324324vw; font-weight: 500; color: #000; line-height: 0; vertical-align: baseline; position: relative; top: -0.4em; } @media (min-width: 500px) { :where(.pcwrap) #about .about_wrap ol li p sup { font-size: 10px; } } :where(.pcwrap) #about .about_wrap ol li:first-child .num { left: -1vw; } @media (min-width: 500px) { :where(.pcwrap) #about .about_wrap ol li:first-child .num { left: -5px; } } :where(.pcwrap) #about .about_wrap .note { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; gap: 1em; } :where(.pcwrap) #about .about_wrap .character_wrap { position: relative; padding: 30px 0 10px; } :where(.pcwrap) #about .about_wrap .character_wrap .pop { width: 51.3513513514vw; } @media (min-width: 500px) { :where(.pcwrap) #about .about_wrap .character_wrap .pop { width: 257px; } } :where(.pcwrap) #about .about_wrap .character_wrap .character { width: 37.8378378378vw; position: absolute; bottom: -20px; right: -10vw; } @media (min-width: 500px) { :where(.pcwrap) #about .about_wrap .character_wrap .character { width: 189px; right: -50px; } } :where(.pcwrap) #product { background: #fff; } :where(.pcwrap) #product h2 { font-size: 4.0540540541vw; letter-spacing: 0.5em; text-indent: 0.5em; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; padding: 40px 5vw; } @media (min-width: 500px) { :where(.pcwrap) #product h2 { font-size: 20px; } } @media (min-width: 500px) { :where(.pcwrap) #product h2 { padding: 40px 25px; } } :where(.pcwrap) #product h2 span { display: inline-block; padding: 0 2vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (min-width: 500px) { :where(.pcwrap) #product h2 span { padding: 0 10px; } } :where(.pcwrap) #product h2::before, :where(.pcwrap) #product h2::after { content: ""; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; height: 2px; background-color: #EF8468; } :where(.pcwrap) #product .product_list_wrap { margin-bottom: 10vw; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap { margin-bottom: 50px; } } :where(.pcwrap) #product .product_list_wrap .product_img_inner { background-size: 15px 15px; padding-top: 5px; } :where(.pcwrap) #product .product_list_wrap .product_img_inner hgroup { margin: 20px 6vw; padding: 15px 10px; text-align: center; color: #fff; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap .product_img_inner hgroup { margin: 20px 30px; } } :where(.pcwrap) #product .product_list_wrap .product_img_inner hgroup h3 { font-size: 5.6756756757vw; font-weight: 900; letter-spacing: -0.06em; line-height: 120%; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap .product_img_inner hgroup h3 { font-size: 28px; } } :where(.pcwrap) #product .product_list_wrap .product_img_inner hgroup p { font-size: 2.972972973vw; margin-top: 2px; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap .product_img_inner hgroup p { font-size: 15px; } } :where(.pcwrap) #product .product_list_wrap .product_img_inner .img_box { position: relative; z-index: 1; } :where(.pcwrap) #product .product_list_wrap .product_img_inner .img_box .component_img img { width: 31.6216216216vw; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap .product_img_inner .img_box .component_img img { width: 158px; } } :where(.pcwrap) #product .product_list_wrap .product_img_inner .img_box .component_img p { font-size: 3.2432432432vw; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap .product_img_inner .img_box .component_img p { font-size: 16px; } } :where(.pcwrap) #product .product_list_wrap .product_img_inner .img_box .component_img .em { font-size: 3.5135135135vw; font-weight: 700; line-height: 130%; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap .product_img_inner .img_box .component_img .em { font-size: 18px; } } :where(.pcwrap) #product .product_list_wrap .product_img_inner .img_box .component_img .em span { letter-spacing: -0.2em; } :where(.pcwrap) #product .product_list_wrap .product_img_inner .img_box .component_img .em sup { font-size: 2.7027027027vw; letter-spacing: 0.05em; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap .product_img_inner .img_box .component_img .em sup { font-size: 14px; } } :where(.pcwrap) #product .product_list_wrap .product_img_inner .img_box .product_img li { text-align: center; } :where(.pcwrap) #product .product_list_wrap .product_img_inner .img_box .product_img li p { font-size: 2.972972973vw; margin-top: 0.7em; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap .product_img_inner .img_box .product_img li p { font-size: 15px; } } :where(.pcwrap) #product .product_list_wrap .product_img_inner .img_box .product_img img { -webkit-filter: drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.4)); filter: drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.4)); } :where(.pcwrap) #product .product_list_wrap .product_text_inner { padding: 20px 0 20px 4vw; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap .product_text_inner { padding: 20px 0 20px 20px; } } :where(.pcwrap) #product .product_list_wrap .product_text_inner .character_wrap img { position: absolute; } :where(.pcwrap) #product .product_list_wrap .product_text_inner .explanation_box { background: rgba(255, 255, 255, 0.8); padding: 20px 4vw; position: relative; z-index: 1; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap .product_text_inner .explanation_box { padding: 20px 20px; } } :where(.pcwrap) #product .product_list_wrap .product_text_inner .explanation_box p { font-size: 3.1081081081vw; line-height: 160%; margin-bottom: 0.5em; text-shadow: 2px 2px 0 #fff, -2px -2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, 0px 2px 0 #fff, 0px -2px 0 #fff, -2px 0px 0 #fff, 2px 0px 0 #fff; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap .product_text_inner .explanation_box p { font-size: 16px; } } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap .product_text_inner .explanation_box p { text-shadow: 2px 2px 2px #fff, -2px -2px 2px #fff, -2px 2px 2px #fff, 2px -2px 2px #fff, 0px 2px 2px #fff, 0px -2px 2px #fff, -2px 0px 2px #fff, 2px 0px 2px #fff; } } :where(.pcwrap) #product .product_list_wrap .product_text_inner .explanation_box p:last-of-type { margin-bottom: 0; } :where(.pcwrap) #product .product_list_wrap .product_text_inner .note { margin-left: 4vw; padding-right: 2vw; position: relative; z-index: 1; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap .product_text_inner .note { margin-left: 20px; padding-right: 10px; } } :where(.pcwrap) #product .product_list_wrap .product_purchase { margin-bottom: 30px; } :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap { background-size: 15px 15px; padding: 20px 4vw 14vw; background-image: linear-gradient(rgba(239, 132, 104, 0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(239, 132, 104, 0.2) 1px, transparent 1px); } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap { padding: 20px 20px 70px; } } :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap .purchase_select { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; gap: 3vw; margin-bottom: 10px; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap .purchase_select { gap: 15px; } } :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap .purchase_select .swiper_area { width: 55%; } :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap .purchase_select .swiper_area .swiper { background: #fff; border: 1px solid #000; } :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap .purchase_select .swiper_area .swiper .swiper-slide { padding: 2.3vw 3vw 1vw; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap .purchase_select .swiper_area .swiper .swiper-slide { padding: 11.5px 15px 5px; } } :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap .purchase_select .swiper_area .swiper .swiper-button-prev, :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap .purchase_select .swiper_area .swiper .swiper-button-next { color: #000; } :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap .purchase_select .swiper_area .swiper .swiper-button-prev::after, :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap .purchase_select .swiper_area .swiper .swiper-button-next::after { font-size: 5.4054054054vw; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap .purchase_select .swiper_area .swiper .swiper-button-prev::after, :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap .purchase_select .swiper_area .swiper .swiper-button-next::after { font-size: 27px; } } :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap .purchase_select .swiper_area .swiper .swiper-button-prev { left: 0; } :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap .purchase_select .swiper_area .swiper .swiper-button-next { right: 0; } :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap .purchase_select .swiper_area .swiper-pagination { position: relative; bottom: auto; margin-top: 2px; } :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap .purchase_select .swiper_area .swiper-pagination .swiper-pagination-bullet { width: 8px; height: 8px; background: #fff; border: 1px solid #000; opacity: 1; } :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap .purchase_select .swiper_area .swiper-pagination .swiper-pagination-bullet-active { background: #000; } :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap .purchase_select .txt { width: 45%; margin-top: -6vw; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap .purchase_select .txt { margin-top: -10px; } } :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap .purchase_select .txt .price { font-size: 3.2432432432vw; margin-bottom: 5px; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap .purchase_select .txt .price { font-size: 16px; } } :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap .purchase_select .txt .price .em { display: inline; font-size: 5.2702702703vw; font-weight: 700; line-height: 1.4; letter-spacing: 0; white-space: nowrap; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap .purchase_select .txt .price .em { font-size: 28px; } } :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap .purchase_select .txt .price .tax { font-size: 2.4324324324vw; display: inline; letter-spacing: -0.05em; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap .purchase_select .txt .price .tax { font-size: 12px; } } :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap .purchase_select .txt .sm { font-size: 2.4324324324vw; line-height: 140%; margin-bottom: 5vw; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap .purchase_select .txt .sm { font-size: 12px; } } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap .purchase_select .txt .sm { margin-bottom: 25px; } } :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap .purchase_select .txt .sm span { letter-spacing: -0.05em; } :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap .purchase_select .txt .btn { font-size: 2.7027027027vw; background: #fff; color: #EF8468; border: 1px solid #EF8468; padding: 1vw 2vw; position: relative; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap .purchase_select .txt .btn { font-size: 14px; } } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap .purchase_select .txt .btn { padding: 5px 10px; } } :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap .purchase_select .txt .btn::after { content: ""; background: url("../../images/arrow_purchase.svg") no-repeat; background-size: contain; width: 3.5vw; height: 1.2vw; position: absolute; right: 2vw; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap .purchase_select .txt .btn::after { width: 17.5px; height: 6px; } } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap .purchase_select .txt .btn::after { right: 5px; } } :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap .purchase_set { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 6vw; font-size: 3.2432432432vw; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap .purchase_set { gap: 30px; } } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap .purchase_set { font-size: 16px; } } :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap .purchase_set h5 { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-item-align: start; align-self: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #ECA490; color: #fff; font-weight: bold; padding: 4vw 1vw 4vw 4vw; z-index: 1; margin-left: -4vw; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap .purchase_set h5 { padding: 20px 5px 20px 20px; } } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap .purchase_set h5 { margin-left: -20px; } } :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap .purchase_set h5::after { content: ""; position: absolute; top: 50%; right: -5vw; width: 10vw; height: 10vw; background-color: #ECA490; border-radius: 4px; -webkit-transform: translateY(-50%) scaleX(0.6) rotate(45deg); transform: translateY(-50%) scaleX(0.6) rotate(45deg); z-index: -1; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap .purchase_set h5::after { right: -23px; width: 45px; height: 45px; } } :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap .purchase_set .note { margin-top: 10px; } :where(.pcwrap) #product .product_list_wrap .product_purchase .purchase_wrap .copyrite { width: 55%; display: block; margin-left: auto; margin-top: 10px; } :where(.pcwrap) #product .product_list_wrap .product_purchase .online_wrap { background: #EF8468; -webkit-box-shadow: 4px 4px rgba(0, 0, 0, 0.3); box-shadow: 4px 4px rgba(0, 0, 0, 0.3); padding: 10px 0 20px; margin: -11vw 4vw 0; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap .product_purchase .online_wrap { margin: -55px 20px 0; } } :where(.pcwrap) #product .product_list_wrap .product_purchase .online_wrap h4 { font-size: 4.0540540541vw; letter-spacing: 0.1em; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; margin: 20px 0; color: #fff; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap .product_purchase .online_wrap h4 { font-size: 16px; } } :where(.pcwrap) #product .product_list_wrap .product_purchase .online_wrap h4 span { display: inline-block; width: clamp(200px, 60%, 350px); padding: 0 2vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap .product_purchase .online_wrap h4 span { padding: 0 10px; } } :where(.pcwrap) #product .product_list_wrap .product_purchase .online_wrap h4::before, :where(.pcwrap) #product .product_list_wrap .product_purchase .online_wrap h4::after { content: ""; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; height: 2px; background-color: #EF8468; background-color: #fff; } :where(.pcwrap) #product .product_list_wrap .product_purchase .online_wrap ul { margin: 5px 5vw; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap .product_purchase .online_wrap ul { margin: 5px 25px; } } :where(.pcwrap) #product .product_list_wrap .product_purchase .online_wrap ul li { width: calc((100% - 20px) / 3); } :where(.pcwrap) #product .product_list_wrap .product_purchase .online_wrap ul li:only-child { width: calc((100% - 10px) / 2); } :where(.pcwrap) #product .product_list_wrap .product_purchase .online_wrap ul li:only-child a { padding: 2px 10vw; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap .product_purchase .online_wrap ul li:only-child a { padding: 2px 50px; } } :where(.pcwrap) #product .product_list_wrap .product_purchase .online_wrap ul li a { display: block; background: #fff; padding: 2px 2vw; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap .product_purchase .online_wrap ul li a { padding: 2px 10px; } } :where(.pcwrap) #product .product_list_wrap .product_purchase .online_wrap ul li img { width: 100%; height: auto; } :where(.pcwrap) #product .product_list_wrap .product_purchase .online_wrap .shop_search { font-size: 4.5945945946vw; font-weight: 600; display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; background: #fff; color: #EF8468; padding: 10px 4vw; margin: 0 auto; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap .product_purchase .online_wrap .shop_search { font-size: 18px; } } :where(.pcwrap) #product .product_list_wrap .product_purchase .online_wrap .note { color: #fff; text-align: center; } :where(.pcwrap) #product .product_list_wrap.list_01 .product_img_inner { background-image: linear-gradient(rgba(239, 132, 104, 0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(239, 132, 104, 0.2) 1px, transparent 1px); } :where(.pcwrap) #product .product_list_wrap.list_01 .product_img_inner hgroup { background: #EF8468; margin-bottom: 1px; } :where(.pcwrap) #product .product_list_wrap.list_01 .product_img_inner hgroup .wrap { border: 1px solid #fff; display: inline-block; padding: 0 0.2em; } :where(.pcwrap) #product .product_list_wrap.list_01 .product_img_inner .img_box { margin: 0 11vw 0 9vw; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap.list_01 .product_img_inner .img_box { margin: 0 55px 0 40px; } } :where(.pcwrap) #product .product_list_wrap.list_01 .product_img_inner .img_box .component_img { position: absolute; right: 0; top: -8vw; text-align: center; z-index: 1; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap.list_01 .product_img_inner .img_box .component_img { top: -30px; } } :where(.pcwrap) #product .product_list_wrap.list_01 .product_img_inner .img_box .component_img img { width: 35.1351351351vw; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap.list_01 .product_img_inner .img_box .component_img img { width: 175px; } } :where(.pcwrap) #product .product_list_wrap.list_01 .product_img_inner .img_box .component_img .em { color: #EA5A42; text-align: center; } :where(.pcwrap) #product .product_list_wrap.list_01 .product_img_inner .img_box .component_img p { line-height: 130%; } :where(.pcwrap) #product .product_list_wrap.list_01 .product_img_inner .img_box .product_img { width: 40.5405405405vw; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap.list_01 .product_img_inner .img_box .product_img { width: 203px; } } :where(.pcwrap) #product .product_list_wrap.list_01 .product_text_inner { background: #F4A996; padding-top: 17vw; margin-top: -13vw; position: relative; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap.list_01 .product_text_inner { padding-top: 85px; margin-top: -65px; } } :where(.pcwrap) #product .product_list_wrap.list_01 .product_text_inner .character_wrap .pop { width: 23.5135135135vw; top: -38vw; right: 1vw; z-index: 2; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap.list_01 .product_text_inner .character_wrap .pop { width: 107px; top: -190px; right: 6px; } } :where(.pcwrap) #product .product_list_wrap.list_01 .product_text_inner .character_wrap .character { width: 83.7837837838vw; bottom: 0; right: -3vw; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap.list_01 .product_text_inner .character_wrap .character { width: 405px; right: -15px; } } :where(.pcwrap) #product .product_list_wrap.list_01 .product_text_inner .note { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; gap: 0.1em; text-shadow: 2px 2px 2px #F4A996, -2px -2px 2px #F4A996, -2px 2px 2px #F4A996, 2px -2px 2px #F4A996, 0px 2px 2px #F4A996, 0px -2px 2px #F4A996, -2px 0px 2px #F4A996, 2px 0px 2px #F4A996; } :where(.pcwrap) #product .product_list_wrap.list_02 .product_img_inner { background-image: linear-gradient(rgba(239, 132, 104, 0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(239, 132, 104, 0.2) 1px, transparent 1px); } :where(.pcwrap) #product .product_list_wrap.list_02 .product_img_inner hgroup { background: #EF8468; } :where(.pcwrap) #product .product_list_wrap.list_02 .product_img_inner .img_box { margin: 0 3vw; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap.list_02 .product_img_inner .img_box { margin: 0 15px; } } :where(.pcwrap) #product .product_list_wrap.list_02 .product_img_inner .img_box .component_img { position: absolute; right: 0; top: -8vw; text-align: center; z-index: 1; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap.list_02 .product_img_inner .img_box .component_img { top: -30px; } } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap.list_02 .product_img_inner .img_box .component_img img { width: 140px; } } :where(.pcwrap) #product .product_list_wrap.list_02 .product_img_inner .img_box .component_img .em { color: #EF8468; text-align: center; } :where(.pcwrap) #product .product_list_wrap.list_02 .product_img_inner .img_box .product_img { margin-right: 36vw; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap.list_02 .product_img_inner .img_box .product_img { margin-right: 185px; } } :where(.pcwrap) #product .product_list_wrap.list_02 .product_text_inner { background: #F4A996; padding-top: 30vw; margin-top: -26vw; position: relative; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap.list_02 .product_text_inner { padding-top: 150px; margin-top: -130px; } } :where(.pcwrap) #product .product_list_wrap.list_02 .product_text_inner .character_wrap .pop { width: 25.6756756757vw; top: 1vw; right: 10vw; z-index: 2; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap.list_02 .product_text_inner .character_wrap .pop { width: 128px; top: 5px; right: 50px; } } :where(.pcwrap) #product .product_list_wrap.list_02 .product_text_inner .character_wrap .character { width: 43.2432432432vw; bottom: 0; right: 2vw; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap.list_02 .product_text_inner .character_wrap .character { width: 210px; right: 15px; } } :where(.pcwrap) #product .product_list_wrap.list_02 .product_text_inner .note { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; gap: 0.1em; text-shadow: 2px 2px 2px #F4A996, -2px -2px 2px #F4A996, -2px 2px 2px #F4A996, 2px -2px 2px #F4A996, 0px 2px 2px #F4A996, 0px -2px 2px #F4A996, -2px 0px 2px #F4A996, 2px 0px 2px #F4A996; } :where(.pcwrap) #product .product_list_wrap.list_03 .product_img_inner { background-image: linear-gradient(rgba(73, 188, 189, 0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(73, 188, 189, 0.2) 1px, transparent 1px); } :where(.pcwrap) #product .product_list_wrap.list_03 .product_img_inner hgroup { background: #49BCBD; } :where(.pcwrap) #product .product_list_wrap.list_03 .product_img_inner .img_box { margin: 0 3vw; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap.list_03 .product_img_inner .img_box { margin: 0 15px; } } :where(.pcwrap) #product .product_list_wrap.list_03 .product_img_inner .img_box .component_img { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 3px; margin-top: -7vw; margin-left: -1vw; z-index: 1; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap.list_03 .product_img_inner .img_box .component_img { margin-top: -35px; margin-left: -5px; } } :where(.pcwrap) #product .product_list_wrap.list_03 .product_img_inner .img_box .component_img img { width: 35.1351351351vw; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap.list_03 .product_img_inner .img_box .component_img img { width: 166px; } } :where(.pcwrap) #product .product_list_wrap.list_03 .product_img_inner .img_box .component_img .em { color: #49BCBD; margin-top: 1.2em; } :where(.pcwrap) #product .product_list_wrap.list_03 .product_img_inner .img_box .product_img { margin: -16vw 25vw 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap.list_03 .product_img_inner .img_box .product_img { margin: -80px 125px 0; } } :where(.pcwrap) #product .product_list_wrap.list_03 .product_img_inner .img_box .product_img li { width: 50%; min-width: 0; } :where(.pcwrap) #product .product_list_wrap.list_03 .product_img_inner .img_box .product_img li .bg_white { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #fff; width: 23vw; height: 23vw; margin-top: -1vw; border-radius: 50%; -webkit-box-shadow: 0 0 6px 6px #fff; box-shadow: 0 0 6px 6px #fff; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap.list_03 .product_img_inner .img_box .product_img li .bg_white { width: 115px; height: 115px; margin-top: -5px; } } :where(.pcwrap) #product .product_list_wrap.list_03 .product_img_inner .img_box .product_img li .bg_white p { margin-top: 0; } :where(.pcwrap) #product .product_list_wrap.list_03 .product_img_inner .img_box .product_img li .bg_white .comment { font-size: 3.2432432432vw; line-height: 110%; color: #49BCBD; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap.list_03 .product_img_inner .img_box .product_img li .bg_white .comment { font-size: 16px; } } :where(.pcwrap) #product .product_list_wrap.list_03 .product_img_inner .img_box .product_img li:first-child { width: 61%; } :where(.pcwrap) #product .product_list_wrap.list_03 .product_text_inner { background: #80D0D1; padding-top: 35vw; margin-top: -30vw; position: relative; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap.list_03 .product_text_inner { padding-top: 175px; margin-top: -150px; } } :where(.pcwrap) #product .product_list_wrap.list_03 .product_text_inner .character_wrap.right .pop { width: 22.972972973vw; top: -30vw; right: 2vw; z-index: 2; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap.list_03 .product_text_inner .character_wrap.right .pop { width: 115px; top: -150px; right: 15px; } } :where(.pcwrap) #product .product_list_wrap.list_03 .product_text_inner .character_wrap.right .character { width: 41.8918918919vw; bottom: 0; right: -3vw; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap.list_03 .product_text_inner .character_wrap.right .character { width: 203px; right: -8px; } } :where(.pcwrap) #product .product_list_wrap.list_03 .product_text_inner .character_wrap.left .pop { width: 22.972972973vw; top: -46vw; left: 4vw; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap.list_03 .product_text_inner .character_wrap.left .pop { width: 112px; top: -210px; left: 20px; } } :where(.pcwrap) #product .product_list_wrap.list_03 .product_text_inner .character_wrap.left .character { width: 31.8918918919vw; bottom: 0; left: 0; z-index: 1; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap.list_03 .product_text_inner .character_wrap.left .character { width: 150px; } } :where(.pcwrap) #product .product_list_wrap.list_03 .product_text_inner .note { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; gap: 0.1em; text-shadow: 2px 2px 2px #80D0D1, -2px -2px 2px #80D0D1, -2px 2px 2px #80D0D1, 2px -2px 2px #80D0D1, 0px 2px 2px #80D0D1, 0px -2px 2px #80D0D1, -2px 0px 2px #80D0D1, 2px 0px 2px #80D0D1; } :where(.pcwrap) #product .product_list_wrap.list_03 .product_purchase .purchase_wrap { background-image: linear-gradient(rgba(73, 188, 189, 0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(73, 188, 189, 0.2) 1px, transparent 1px); } :where(.pcwrap) #product .product_list_wrap.list_03 .product_purchase .purchase_wrap .purchase_set h5 { background-color: #80D0D1; } :where(.pcwrap) #product .product_list_wrap.list_03 .product_purchase .purchase_wrap .purchase_set h5::after { background-color: #80D0D1; } :where(.pcwrap) #product .product_list_wrap.list_04 .product_img_inner { background-image: linear-gradient(rgba(241, 141, 0, 0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(241, 141, 0, 0.2) 1px, transparent 1px); padding-bottom: 5vw; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap.list_04 .product_img_inner { padding-bottom: 25px; } } :where(.pcwrap) #product .product_list_wrap.list_04 .product_img_inner hgroup { background: #F18D00; margin-bottom: 5px; } :where(.pcwrap) #product .product_list_wrap.list_04 .product_img_inner .img_box { margin: 0 5vw 0 7vw; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap.list_04 .product_img_inner .img_box { margin: 0 25px 0 35px; } } :where(.pcwrap) #product .product_list_wrap.list_04 .product_img_inner .img_box .component_img { position: absolute; right: 0; top: -7vw; text-align: center; z-index: 1; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap.list_04 .product_img_inner .img_box .component_img { top: -35px; } } :where(.pcwrap) #product .product_list_wrap.list_04 .product_img_inner .img_box .component_img img { width: 35.1351351351vw; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap.list_04 .product_img_inner .img_box .component_img img { width: 176px; } } :where(.pcwrap) #product .product_list_wrap.list_04 .product_img_inner .img_box .component_img .em { color: #EB6100; text-align: center; } :where(.pcwrap) #product .product_list_wrap.list_04 .product_img_inner .img_box .component_img p { line-height: 130%; text-shadow: 2px 2px 0 #fff, -2px -2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, 0px 2px 0 #fff, 0px -2px 0 #fff, -2px 0px 0 #fff, 2px 0px 0 #fff; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap.list_04 .product_img_inner .img_box .component_img p { text-shadow: 2px 2px 2px #fff, -2px -2px 2px #fff, -2px 2px 2px #fff, 2px -2px 2px #fff, 0px 2px 2px #fff, 0px -2px 2px #fff, -2px 0px 2px #fff, 2px 0px 2px #fff; } } :where(.pcwrap) #product .product_list_wrap.list_04 .product_img_inner .img_box .product_img { width: 32.972972973vw; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap.list_04 .product_img_inner .img_box .product_img { width: 165px; } } :where(.pcwrap) #product .product_list_wrap.list_04 .product_text_inner { background: #F5AF4C; padding-top: 15vw; position: relative; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap.list_04 .product_text_inner { padding-top: 75px; } } :where(.pcwrap) #product .product_list_wrap.list_04 .product_text_inner .character_wrap .pop { width: 55.4054054054vw; top: -3vw; left: 5vw; z-index: 2; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap.list_04 .product_text_inner .character_wrap .pop { width: 277px; top: -15px; left: 25px; } } :where(.pcwrap) #product .product_list_wrap.list_04 .product_text_inner .character_wrap .character { width: 50vw; bottom: 0; right: 1vw; } @media (min-width: 500px) { :where(.pcwrap) #product .product_list_wrap.list_04 .product_text_inner .character_wrap .character { width: 245px; right: 5px; } } :where(.pcwrap) #product .product_list_wrap.list_04 .product_text_inner .note { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; gap: 0.1em; text-shadow: 2px 2px 2px #F5AF4C, -2px -2px 2px #F5AF4C, -2px 2px 2px #F5AF4C, 2px -2px 2px #F5AF4C, 0px 2px 2px #F5AF4C, 0px -2px 2px #F5AF4C, -2px 0px 2px #F5AF4C, 2px 0px 2px #F5AF4C; } :where(.pcwrap) #product .product_list_wrap.list_04 .product_purchase .purchase_wrap { background-image: linear-gradient(rgba(241, 141, 0, 0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(241, 141, 0, 0.2) 1px, transparent 1px); } :where(.pcwrap) #product .product_list_wrap.list_04 .product_purchase .purchase_wrap .purchase_set h5 { background-color: #F5AF4C; } :where(.pcwrap) #product .product_list_wrap.list_04 .product_purchase .purchase_wrap .purchase_set h5::after { background-color: #F5AF4C; } :where(.pcwrap) #download { padding: 30px 5vw; background: #fff; } @media (min-width: 500px) { :where(.pcwrap) #download { padding: 30px 25px; } } :where(.pcwrap) #download .title_wrap { position: relative; } :where(.pcwrap) #download .title_wrap .img_wallpaper { width: 54.0540540541vw; position: absolute; top: -4vw; right: -6.5vw; } @media (min-width: 500px) { :where(.pcwrap) #download .title_wrap .img_wallpaper { width: 270px; top: -20px; right: -32.5px; } } :where(.pcwrap) #download .wallpaper_wrap { margin-top: -21vw; } @media (min-width: 500px) { :where(.pcwrap) #download .wallpaper_wrap { margin-top: -105px; } } :where(.pcwrap) #download .wallpaper_wrap::before { content: ""; display: block; width: 100%; height: 32vw; background: url("../../images/bg_wallpaper_top.png") no-repeat center bottom; background-size: 100% auto; } @media (min-width: 500px) { :where(.pcwrap) #download .wallpaper_wrap::before { height: 160px; } } :where(.pcwrap) #download .wallpaper_wrap ul { background: url("../../images/bg_wallpaper_center.png") repeat-y center top; background-size: 100% auto; padding: 20px 4vw; margin: -2px 0 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px 1vw; width: 100%; } @media (min-width: 500px) { :where(.pcwrap) #download .wallpaper_wrap ul { padding: 20px 20px; } } @media (min-width: 500px) { :where(.pcwrap) #download .wallpaper_wrap ul { gap: 20px 5px; } } :where(.pcwrap) #download .wallpaper_wrap ul li { width: calc((100% - 2vw) / 3); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background: #fff; padding: 10px 2vw; border-radius: 10px; } @media (min-width: 500px) { :where(.pcwrap) #download .wallpaper_wrap ul li { width: calc((100% - 10px) / 3); } } @media (min-width: 500px) { :where(.pcwrap) #download .wallpaper_wrap ul li { padding: 10px 10px; } } :where(.pcwrap) #download .wallpaper_wrap ul li img { width: 100%; height: auto; } :where(.pcwrap) #download .wallpaper_wrap ul li p { font-size: 2.4324324324vw; line-height: 150%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; margin: 5px 0; text-align: center; } @media (min-width: 500px) { :where(.pcwrap) #download .wallpaper_wrap ul li p { font-size: 10px; } } :where(.pcwrap) #download .wallpaper_wrap ul li p span { letter-spacing: -0.02em; } :where(.pcwrap) #download .wallpaper_wrap ul li p .flex { letter-spacing: -0.12em; display: inline-block; -webkit-transform: scaleX(0.9); transform: scaleX(0.9); } :where(.pcwrap) #download .wallpaper_wrap ul li a { font-size: 2.7027027027vw; line-height: 130%; margin-top: auto; text-align: center; background: #EF8468; color: #fff; border-radius: 10px; padding: 5px 0; } @media (min-width: 500px) { :where(.pcwrap) #download .wallpaper_wrap ul li a { font-size: 12px; } } :where(.pcwrap) #download .wallpaper_wrap::after { content: ""; display: block; width: 100%; height: 6vw; background: url("../../images/bg_wallpaper_bottom.png") no-repeat center top; background-size: 100% auto; } @media (min-width: 500px) { :where(.pcwrap) #download .wallpaper_wrap::after { height: 30px; } } :where(.pcwrap) #quiz { background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.4)), color-stop(40%, rgba(255, 255, 255, 0))), url("../../images/bg_quiz.png") repeat-y; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 40%), url("../../images/bg_quiz.png") repeat-y; background-size: 100% 100%, contain; padding: 15vw 6vw 20px; } @media (min-width: 500px) { :where(.pcwrap) #quiz { padding: 75px 30px 20px; } } :where(.pcwrap) #quiz .quiz_wrap { padding: 20px 4vw; background: #fff; position: relative; } @media (min-width: 500px) { :where(.pcwrap) #quiz .quiz_wrap { padding: 20px 20px; } } :where(.pcwrap) #quiz .quiz_wrap h2 { width: 120%; margin-top: -13vw; margin-left: -10%; text-align: center; } @media (min-width: 500px) { :where(.pcwrap) #quiz .quiz_wrap h2 { margin-top: -65px; } } :where(.pcwrap) #quiz .quiz_wrap .quiz_list li { margin-bottom: 40px; } :where(.pcwrap) #quiz .quiz_wrap .quiz_list li:last-child { margin-bottom: 0; } :where(.pcwrap) #quiz .quiz_wrap .quiz_list li.q01 .ttl_wrap { border: 4px solid #0083C9; border-bottom: none; } :where(.pcwrap) #quiz .quiz_wrap .quiz_list li.q01 .quiz_detail { border: 4px solid #0083C9; } :where(.pcwrap) #quiz .quiz_wrap .quiz_list li.q01 .quiz_detail .character { width: 77.027027027vw; margin-left: -4vw; } @media (min-width: 500px) { :where(.pcwrap) #quiz .quiz_wrap .quiz_list li.q01 .quiz_detail .character { width: 385px; margin-left: -20px; } } :where(.pcwrap) #quiz .quiz_wrap .quiz_list li.q01 .answer_wrap .answer_img { border: 10px solid #0083C9; } :where(.pcwrap) #quiz .quiz_wrap .quiz_list li.q01 .js-toggle-answer { background: #0083C9; } :where(.pcwrap) #quiz .quiz_wrap .quiz_list li.q02 .ttl_wrap { border: 4px solid #C265A4; border-bottom: none; } :where(.pcwrap) #quiz .quiz_wrap .quiz_list li.q02 .quiz_detail { border: 4px solid #C265A4; } :where(.pcwrap) #quiz .quiz_wrap .quiz_list li.q02 .quiz_detail .character { width: 78.3783783784vw; margin-left: -4vw; } @media (min-width: 500px) { :where(.pcwrap) #quiz .quiz_wrap .quiz_list li.q02 .quiz_detail .character { width: 387px; margin-left: -15px; } } :where(.pcwrap) #quiz .quiz_wrap .quiz_list li.q02 .answer_img { border: 10px solid #C265A4; } :where(.pcwrap) #quiz .quiz_wrap .quiz_list li.q02 .js-toggle-answer { background: #C265A4; } :where(.pcwrap) #quiz .quiz_wrap .quiz_list li.q03 .ttl_wrap { border: 4px solid #F5A200; border-bottom: none; } :where(.pcwrap) #quiz .quiz_wrap .quiz_list li.q03 .quiz_detail { border: 4px solid #F5A200; } :where(.pcwrap) #quiz .quiz_wrap .quiz_list li.q03 .quiz_detail .question_img { margin: 0 -3vw; } @media (min-width: 500px) { :where(.pcwrap) #quiz .quiz_wrap .quiz_list li.q03 .quiz_detail .question_img { margin: 0 -15px; } } :where(.pcwrap) #quiz .quiz_wrap .quiz_list li.q03 .quiz_detail .character { width: 70.2702702703vw; margin: 10px auto 0; } @media (min-width: 500px) { :where(.pcwrap) #quiz .quiz_wrap .quiz_list li.q03 .quiz_detail .character { width: 351px; } } :where(.pcwrap) #quiz .quiz_wrap .quiz_list li.q03 .answer_wrap .answer_img { border: 10px solid #F5A200; } :where(.pcwrap) #quiz .quiz_wrap .quiz_list li.q03 .answer_wrap .answer_img img { width: 110%; margin: 0 -4vw; } @media (min-width: 500px) { :where(.pcwrap) #quiz .quiz_wrap .quiz_list li.q03 .answer_wrap .answer_img img { margin: 0 -20px; } } :where(.pcwrap) #quiz .quiz_wrap .quiz_list li.q03 .js-toggle-answer { background: #F5A200; } :where(.pcwrap) #quiz .quiz_wrap .quiz_list li.q04 .ttl_wrap { border: 4px solid #EE86A1; border-bottom: none; } :where(.pcwrap) #quiz .quiz_wrap .quiz_list li.q04 .quiz_detail { border: 4px solid #EE86A1; } :where(.pcwrap) #quiz .quiz_wrap .quiz_list li.q04 .quiz_detail .question_img { margin: 0 -4vw 0 -2vw; } @media (min-width: 500px) { :where(.pcwrap) #quiz .quiz_wrap .quiz_list li.q04 .quiz_detail .question_img { margin: 0 -20px 0 -10px; } } :where(.pcwrap) #quiz .quiz_wrap .quiz_list li.q04 .quiz_detail .character { width: 79.7297297297vw; margin: -15vw 0 0 -4vw; } @media (min-width: 500px) { :where(.pcwrap) #quiz .quiz_wrap .quiz_list li.q04 .quiz_detail .character { width: 398px; margin: -75px 0 0 -20px; } } :where(.pcwrap) #quiz .quiz_wrap .quiz_list li.q04 .answer_wrap .answer_img { border: 10px solid #EE86A1; padding-bottom: 0; } :where(.pcwrap) #quiz .quiz_wrap .quiz_list li.q04 .answer_wrap .answer_img img { width: 105%; margin-left: -1vw; } @media (min-width: 500px) { :where(.pcwrap) #quiz .quiz_wrap .quiz_list li.q04 .answer_wrap .answer_img img { margin-left: -5px; } } :where(.pcwrap) #quiz .quiz_wrap .quiz_list li.q04 .js-toggle-answer { background: #EE86A1; } :where(.pcwrap) #quiz .quiz_wrap .quiz_list li.q05 .ttl_wrap { border: 4px solid #E83836; border-bottom: none; } :where(.pcwrap) #quiz .quiz_wrap .quiz_list li.q05 .quiz_detail { border: 4px solid #E83836; padding: 30px 6vw; } @media (min-width: 500px) { :where(.pcwrap) #quiz .quiz_wrap .quiz_list li.q05 .quiz_detail { padding: 30px 30px; } } :where(.pcwrap) #quiz .quiz_wrap .quiz_list li.q05 .answer_wrap .answer_img { border: 10px solid #E83836; padding: 30px 4vw; } @media (min-width: 500px) { :where(.pcwrap) #quiz .quiz_wrap .quiz_list li.q05 .answer_wrap .answer_img { padding: 30px 20px; } } :where(.pcwrap) #quiz .quiz_wrap .quiz_list li.q05 .js-toggle-answer { background: #E83836; } :where(.pcwrap) #quiz .quiz_wrap .quiz_list li .ttl_wrap { display: flow-root; padding: 20px 1vw 10px; } @media (min-width: 500px) { :where(.pcwrap) #quiz .quiz_wrap .quiz_list li .ttl_wrap { padding: 20px 10px 10px; } } :where(.pcwrap) #quiz .quiz_wrap .quiz_list li .ttl_wrap .icn_img { float: left; width: 37.8378378378vw; margin-top: -8vw; margin-left: -10vw; margin-right: 1.5vw; -webkit-filter: drop-shadow(2px 4px 5px rgba(0, 0, 0, 0.25)); filter: drop-shadow(2px 4px 5px rgba(0, 0, 0, 0.25)); } @media (min-width: 500px) { :where(.pcwrap) #quiz .quiz_wrap .quiz_list li .ttl_wrap .icn_img { width: 189px; margin-top: -30px; margin-left: -50px; margin-right: 7.5px; } } :where(.pcwrap) #quiz .quiz_wrap .quiz_list li .ttl_wrap p { font-size: 3.7837837838vw; font-weight: 700; text-align: left; line-height: 140%; } @media (min-width: 500px) { :where(.pcwrap) #quiz .quiz_wrap .quiz_list li .ttl_wrap p { font-size: 16px; } } :where(.pcwrap) #quiz .quiz_wrap .quiz_list li .ttl_wrap p span { display: inline-block; width: 5em; margin: 0 0.1em; } :where(.pcwrap) #quiz .quiz_wrap .quiz_list li .ttl_wrap.is-indent p { display: flow-root; } :where(.pcwrap) #quiz .quiz_wrap .quiz_list li .ttl_wrap.is-wrap .icn_img { margin-top: -8vw; padding-left: 3vw; } @media (min-width: 500px) { :where(.pcwrap) #quiz .quiz_wrap .quiz_list li .ttl_wrap.is-wrap .icn_img { margin-top: -50px; padding-left: 15px; } } :where(.pcwrap) #quiz .quiz_wrap .quiz_list li .ttl_wrap.is-wrap p { padding-left: 5vw; } @media (min-width: 500px) { :where(.pcwrap) #quiz .quiz_wrap .quiz_list li .ttl_wrap.is-wrap p { padding-left: 25px; } } :where(.pcwrap) #quiz .quiz_wrap .quiz_list li .ttl_wrap.is-single { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } :where(.pcwrap) #quiz .quiz_wrap .quiz_list li .ttl_wrap.is-single .icn_img { float: none; } :where(.pcwrap) #quiz .quiz_wrap .quiz_list li .quiz_detail { padding: 20px 4vw 0; } @media (min-width: 500px) { :where(.pcwrap) #quiz .quiz_wrap .quiz_list li .quiz_detail { padding: 20px 20px 0; } } :where(.pcwrap) #quiz .quiz_wrap .quiz_list li .quiz_detail .character { margin-top: 20px; } :where(.pcwrap) #quiz .quiz_wrap .quiz_list li .answer_wrap { max-height: 0; overflow: hidden; -webkit-transition: max-height 0.5s ease; transition: max-height 0.5s ease; } :where(.pcwrap) #quiz .quiz_wrap .quiz_list li .answer_wrap .answer_img { padding: 30px 2vw; background: #fff; margin-top: 0; -webkit-transition: margin-top 0.5s ease; transition: margin-top 0.5s ease; } @media (min-width: 500px) { :where(.pcwrap) #quiz .quiz_wrap .quiz_list li .answer_wrap .answer_img { padding: 30px 10px; } } :where(.pcwrap) #quiz .quiz_wrap .quiz_list li .js-toggle-answer { font-size: 4.3243243243vw; font-weight: 700; color: #fff; border: none; border-radius: 0 0 10px 10px; padding: 5px 10px; cursor: pointer; display: block; margin-left: auto; } @media (min-width: 500px) { :where(.pcwrap) #quiz .quiz_wrap .quiz_list li .js-toggle-answer { font-size: 18px; } } :where(.pcwrap) #inquiry { padding: 30px 4vw; background: rgba(239, 132, 104, 0.1); text-align: center; } @media (min-width: 500px) { :where(.pcwrap) #inquiry { padding: 30px 40px; } } :where(.pcwrap) #inquiry h2 { font-size: 4.3243243243vw; line-height: 150%; margin-bottom: 20px; } @media (min-width: 500px) { :where(.pcwrap) #inquiry h2 { font-size: 18px; } } :where(.pcwrap) #inquiry .inquiry_wrap { background: #fff; padding: 20px 10px; font-size: 4.0540540541vw; } @media (min-width: 500px) { :where(.pcwrap) #inquiry .inquiry_wrap { font-size: 17px; } } :where(.pcwrap) #inquiry .inquiry_wrap p { font-weight: 600; margin-bottom: 5px; } :where(.pcwrap) #inquiry .inquiry_wrap a { color: #000; -webkit-transition: 0.3s; transition: 0.3s; display: inline-block; } :where(.pcwrap) #inquiry .inquiry_wrap a:hover { opacity: 0.5; color: #EF8468; }