/*-----------------------------------------
メインカラー

背景　白：#FFFFFE
背景　空色：#E3F6F5
背景　レモン：#FFFCEB
飾り　ミント（メイン）：#BAE8E8
飾り　宇宙色：#2D334A
強調色　濃宇宙色：#272343
強調色　黄色：#FFD803
---------------------------------------------*/

/* 
=======================================================
GENERAL
=======================================================
*/

* {
    line-height: 1.5;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

:root {
    /* カラー */
    --body_white: #FFFFFE;
    --body_sky: #E3F6F5;
    --body_lemon: #FFFCEB;
    --body_mint: #F0FAFA;
    --deco_mint: #BAE8E8;
    --deco-sky: #85D6D6;
    --deco_space: #2D334A;
    --em_space: #272343;
    --em_yellow: #FFD803;
    --em_gold: #F5D000;

    /* 余白 */
    --section_updown_pc: 5rem;
    --section_updown_sp: 1.5rem;
    --padding_pc: 1rem;
    --padding_sp: 0.5rem;

    --margin_bottom_pc: 1rem;
    --margin_bottom_sp: 0.5rem;

    --title_bottom_pc: 1rem;
    --title_bottom_sp: 0.5rem;

    --box_padding_pc: 1rem 1.5rem;
    --box_padding_sp: 0.5rem;
    --box_marging_bottom_pc: 2rem;
    --box_marging_bottom_sp: 1rem;
    --box_radius: 0.25rem;


    /* PC幅 */
    --width_pc: 1000px;
}

body {
    width: 100%;
    max-width: 100%;
    margin: auto;
    font-family: 'Zen Old Mincho', serif;
    font-family: 'Zen Maru Gothic', sans-serif;
}

/* under 480 */
@media screen and (max-width: 480px) {
    body {
        font-size: 1rem;
    }
}

main {
    margin: 0;
}

h1 {
    font-size: 2rem;
}

@media screen and (max-width: 480px) {
    h1 {
        font-size: 1.3rem;
    }
}

h2 {
    font-size: 1.5rem;
}

@media screen and (max-width: 480px) {
    h2 {
        font-size: 1.1rem;
    }
}

h3 {
    font-size: 1.3rem;
}

@media screen and (max-width: 480px) {
    h3 {
        font-size: 1.075rem;
    }
}

h4 {
    font-size: 1.1rem;
}

@media screen and (max-width: 480px) {
    h3 {
        font-size: 1.075rem;
    }
}

p,
li {
    font-style: normal;
    font-size: 1.1rem;
    margin-bottom: 0.3rem;
}

@media screen and (max-width: 480px) {

    p,
    li {
        font-size: 1rem;
    }
}

p:last-child {
    margin-bottom: 0;
}


form {
    width: 100%;
    margin: 0 auto;
}

a {
    text-decoration: none;
}

sup {
    vertical-align: top;
    font-size: xx-small;
}

.redirect {
    margin: 0;
    padding: 0;
}

.annotation,
.annotation_block p {
    font-size: xx-small;
    text-align: left;
    padding-top: 0.2rem;
    padding-left: 0.1rem;
    margin-bottom: 0;
}

.annotation_block {
    padding-bottom: 0.5rem;
    width: 100%;
}

.note {
    padding: 1rem;
    padding-right: 0;
    width: 100%;
    max-width: var(--width_pc);
}

.note p {
    text-align: right;
    font-size: medium;
    margin-bottom: 0;
    line-height: 1.8;
}

@media screen and (max-width: 480px) {
    .note p {
        font-size: small;
    }
}

/*
PC、SPの改行
=======================================================
*/
.pc {
    display: block;
}

@media screen and (max-width: 480px) {
    .pc {
        display: none;
    }
}

.sp {
    display: none;
}

@media screen and (max-width: 480px) {
    .sp {
        display: block;
    }
}

/* 
=======================================================
強調デザイン
=======================================================
フォントサイズ
=======================================================
*/
.larger {
    font-size: larger;
}

.large {
    font-size: large;
}

.x-large {
    font-size: x-large;
}

.largest {
    font-size: 3rem;
}

@media screen and (max-width: 480px) {
    .largest {
        font-size: 1.8rem;
    }
}

.smaller {
    font-size: small;
}

.x-small {
    font-size: x-small;
}

/* 
太さ
=======================================================
*/
.bold {
    font-weight: bold;
}

/* 
文字上ドット
=======================================================
*/
.dots {
    background-image: radial-gradient(circle at center,
            orange 20%, transparent 20%);
    /* 点の色とサイズ調整 */
    background-position: top left;
    /* 点の位置 */
    background-repeat: repeat-x;
    /* 横方向に繰り返し */
    background-size: 1em 0.3em;
    /* 点の間隔とサイズ調整 */
    padding-top: 0.1rem;
    /* 縦方向の位置調整 */
}

/* 
カラー
=======================================================
*/
.em_gold {
    color: var(--em_gold);
}

.em_yellow {
    color: var(--em_yellow);
}

.em_space {
    color: var(--em_space);
}

.deco_mint {
    color: var(--deco_mint);
}

.deco_space {
    color: var(--deco_space);
}

.body_white {
    color: var(--body_white);
}

.red {
    color: red;
}

/* 
下線
=======================================================
*/
.underline {
    text-decoration: underline solid;
}

.dotline {
    text-decoration: underline dotted;
}

/* 
ハイライト
=======================================================
*/
.highlight_red_50 {
    margin: 0 auto;
    width: fit-content;
    background: linear-gradient(transparent 40%, rgba(255, 0, 0, 0.2) 40% 90%, transparent 90%);
}

.highlight_red_100 {
    margin: 0 auto;
    width: fit-content;
    background: linear-gradient(transparent 10%, rgba(255, 0, 0, 0.2) 10% 90%, transparent 90%);
}

.highlight_pink_50 {
    margin: 0 auto;
    width: fit-content;
    background: linear-gradient(transparent 40%, rgba(255, 230, 238, 0.6) 40% 90%, transparent 90%);
}

.highlight_pink_100 {
    margin: 0 auto;
    width: fit-content;
    background: linear-gradient(transparent 10%, rgba(255, 230, 238, 0.6) 10% 90%, transparent 90%);
}

.highlight_yellow_50 {
    margin: 0 auto;
    width: fit-content;
    background: linear-gradient(transparent 40%, rgba(255, 240, 0, 0.4) 40% 90%, transparent 90%);
}

.highlight_yellow_100 {
    margin: 0 auto;
    width: fit-content;
    background: linear-gradient(transparent 10%, rgba(255, 240, 0, 0.4) 10% 90%, transparent 90%);
}

.highlight_white_50 {
    margin: 0 auto;
    width: fit-content;
    background: linear-gradient(transparent 50%, rgba(255, 255, 255, 0.6) 50% 90%, transparent 90%);
    padding-bottom: 0.3rem;
}

.highlight_white_100 {
    margin: 0 auto;
    width: fit-content;
    background: linear-gradient(transparent 10%, rgba(255, 255, 255, 0.6) 10% 90%, transparent 90%);
}

.highlight_green_50 {
    margin: 0 auto;
    width: fit-content;
    background: linear-gradient(transparent 40%, #b9e382 40% 90%, transparent 90%);
}

.highlight_green_100 {
    margin: 0 auto;
    width: fit-content;
    background: linear-gradient(transparent 10%, #b9e382 10% 90%, transparent 90%);
}

.highlight_blue_50 {
    margin: 0 auto;
    width: fit-content;
    background: linear-gradient(transparent 40%, #79DFFF 40% 90%, transparent 90%);
}

.highlight_blue_100 {
    margin: 0 auto;
    width: fit-content;
    background: linear-gradient(transparent 10%, #79DFFF 40% 90%, transparent 90%);
}

/* 
文字寄せ
=======================================================
*/
.right {
    text-align: right;
    margin-right: 1rem;
}

.left {
    text-align: left;
    display: inline-block;
}

.separator {
    margin-bottom: 1.5rem;
}

@media screen and (max-width: 480px) {
    .h2_indent {
        margin-left: 1.5rem;
    }
}

.indent {
    margin-left: 3rem;
}

/* 
=======================================================
Animationアニメーション
=======================================================
*/

/* アニメーション適用例 */
.fuwafuwa {
    -webkit-animation: fuwafuwa 2s infinite;
    -moz-animation: fuwafuwa 2s infinite;
    animation: fuwafuwa 2s infinite;
}

@keyframes shine {
    33% {
        left: 100%;
    }

    100% {
        left: 100%;
    }
}

@keyframes heartbeat {
    0% {
        transform: scale(1);
    }

    4% {
        transform: scale(1.02);
    }

    8% {
        transform: scale(1);
    }

    12% {
        transform: scale(1.02);
    }

    16% {
        transform: scale(1);
    }
}

@keyframes scaling {
    from {
        transform: scale(0.9, 0.9);
    }

    to {
        transform: scale(1, 1);
    }
}

@keyframes bggradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@-webkit-keyframes blink {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes blink {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes blink {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes mochimochi {
    0% {
        transform: scale(1, 0.8);
    }

    20% {
        transform: scale(0.8, 1.1);
    }

    90% {
        transform: scale(1, 1);
    }

    100% {
        transform: scale(1, 0.8);
    }
}

@-moz-keyframes mochimochi {
    0% {
        transform: scale(1, 0.8);
    }

    20% {
        transform: scale(0.8, 1.1);
    }

    90% {
        transform: scale(1, 1);
    }

    100% {
        transform: scale(1, 0.8);
    }
}

@keyframes mochimochi {
    0% {
        transform: scale(1, 0.8);
    }

    20% {
        transform: scale(0.8, 1.1);
    }

    90% {
        transform: scale(1, 1);
    }

    100% {
        transform: scale(1, 0.8);
    }
}

@-webkit-keyframes fuwafuwa {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0px);
    }
}

@-moz-keyframes fuwafuwa {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes fuwafuwa {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0px);
    }
}

@-webkit-keyframes pikopiko {
    0% {
        transform: rotate(20deg);
    }

    to {
        transform: rotate(-10deg);
    }
}

@-moz-keyframes pikopiko {
    0% {
        transform: rotate(20deg);
    }

    to {
        transform: rotate(-10deg);
    }
}

@keyframes pikopiko {
    0% {
        transform: rotate(20deg);
    }

    to {
        transform: rotate(-10deg);
    }
}

@keyframes fuwafuwa_updown {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(8px);
    }
}

/* 横のふわふわの動き */
@keyframes fuwafuwa_sideway {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(5px);
    }
}

@keyframes rotation {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes kurukuru {
    0% {
        transform: rotateY(0);
    }

    100% {
        transform: rotateY(360deg);
    }
}

@keyframes pulsate {
    100% {
        box-shadow:
            0 0 4px #fff,
            0 0 8px #fff,
            0 0 16px #fff,
            0 0 20px var(--body_lemon),
            0 0 8px var(--body_lemon),
            0 0 10px var(--body_lemon),
            0 0 20px var(--body_lemon),
            0 0 30px var(--body_lemon);
    }

    0% {
        box-shadow:
            0 0 2px #fff,
            0 0 4px #fff,
            0 0 6px #fff,
            0 0 8px var(--body_lemon),
            0 0 10px var(--body_lemon),
            0 0 20px var(--body_lemon),
            0 0 30px var(--body_lemon),
            0 0 40px var(--body_lemon);
    }
}

@keyframes bggradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* 
=======================================================
COMMON
=======================================================
Width 設定：一律1000px
wrapは中の要素、wrap抜きのクラス名で全面背景色の設定可能
=======================================================
*/
.fv_contents_area,
.abstract_wrap,
.form_wrap,
.first_wrap,
.second_wrap,
.third_wrap,
.forth_wrap,
.middle_cta_wrap,
.howtochose_wrap,
.compare_table_wrap,
.rank_wrap,
.cta,
.float_menu .menu,
.result,
.company_wrap,
.ranking_wrap,
.evidence_wrap,
.privacy_wrap {
    max-width: var(--width_pc);
    margin: 0 auto;
}

@media screen and (max-width: 480px) {

    .abstract_wrap,
    .form_wrap,
    .first_check,
    .comment_wrap,
    .first_wrap,
    .second_wrap,
    .third_wrap,
    .forth_wrap,
    .middle_cta_wrap,
    .howtochose_wrap,
    .compare_table_wrap,
    .rank_wrap,
    .result {
        margin: 1rem;
    }
}

/* 
=======================================================
LOGO
=======================================================
*/

/* .logo {
    margin-left: 1rem;
    max-width: 200px;
}

@media screen and (max-width: 480px) {
    .logo {
        padding: 0;
        margin: 0 1rem;
        margin-bottom: 0;
        width: 35%;
        max-width: 150px;
    }
} */

/* 
=======================================================
BUTTON
=======================================================
*/

/* Default button background color is #EFEFEF, reset the color */
button {
    width: 100%;
    background-color: transparent;
}

/* 
輝くボタン
=======================================================
*/
.shiny_button {
    display: flex;
    justify-content: center;
}

.shiny_button p,
.shiny_button a {
    background: var(--em_yellow);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    padding: var(--box_padding_pc);
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
    color: var(--em_space);
    border-radius: 0.5rem;
    transition: 0.3s ease-in-out;
    overflow: hidden;
}

@media screen and (max-width:480px) {

    .shiny_button p,
    .shiny_button a {
        margin-top: 0;
        width: 100%;
        padding: var(--box_padding_sp);
        font-size: 5vw;
    }
}

.shiny_button p:active,
.shiny_button a:active {
    transform: translateY(4px);
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
    border-bottom: none;
}

.shiny_button p:before,
.shiny_button a:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: -100%;
    background-image: linear-gradient(130deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 55%);
    animation: shine 3s infinite;
}

.shiny_button p:after {
    content: '»';
    display: inline-block;
    color: #fff;
    padding-left: 10px;
    font-size: 4vw;
    line-height: 1;
}

.shiny_button img {
    width: 50px;
    height: 50px;
    z-index: 6;
    -webkit-animation: fuwafuwa_sideway 1s infinite;
    -moz-animation: fuwafuwa_sideway 1s infinite;
    animation: fuwafuwa_sideway 1s infinite;
}

/* 
枠線が動いてホバー時に光るボタン
=======================================================
*/
.gradient_blur_button {
    margin: 1rem 0;
    border-radius: 180px;
    position: relative;
    background: linear-gradient(210deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);
    background-size: 200% 200%;
    cursor: pointer;
    animation: pulsate 1s infinite alternate,
        bggradient 2s ease infinite;
}

@media screen and (max-width: 480px) {
    .gradient_blur_button {
        width: 100%;
    }
}

/* 背景のぼかし */
.gradient_blur_button:before {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transition: 0.3s opacity ease-in-out;
    filter: blur(1rem);
    opacity: 0;
    border-radius: 180px;
    z-index: 1;
    box-shadow:
        0 0 3px #fff,
        0 0 5px #fff,
        0 0 5px #fff,
        0 0 6px var(--body_lemon),
        0 0 10px var(--body_lemon),
        0 0 20px var(--body_lemon),
        0 0 30px var(--body_lemon),
        0 0 20px var(--body_lemon);
}

/* ホバー時の背景のぼかし */
.gradient_blur_button:hover:before {
    opacity: 1;
    transition: 0.3s opacity ease-in-out;
    filter: blur(1rem);
    background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
}

/* 文字背景 */
.gradient_blur_button:after {
    content: '';
    position: absolute;
    display: block;
    border-radius: 180px;
    width: 98%;
    height: 90%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: var(--em_yellow);
    z-index: 2;
}

@media screen and (max-width: 480px) {
    .gradient_blur_button:after {
        width: 97%;
    }
}

/* 文字背景 */
.gradient_blur_button:hover::after {
    transition: 0.3s;
    background: var(--body_lemon);
}

/* ボタン内のa */
.gradient_blur_button a {
    text-align: center;
    font-size: 1.8rem;
    font-weight: bold;
    padding: 1rem 0.5rem;
    z-index: 3;
    color: var(--em_space);
}

@media screen and (max-width: 480px) {

    /* ボタン内のa */
    .gradient_blur_button a {
        font-size: 6vw;
    }
}

/* 
段差あり四角ボタン
=======================================================
*/
.step_button a {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 240px;
    padding: 1rem;
    color: #FFF;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    background: #f69157;
    border-radius: 8px;
    border-bottom: solid 5px #F2620F;
}

.step_button a:active {
    border-bottom: solid 2px #F2620F;
    transform: translateY(3px);
}

.heartbeat {
    animation-name: heartbeat;
    /* アニメーション名の指定 */
    animation-delay: 0s;
    /* アニメーションの開始時間指定 */
    animation-duration: 3s;
    /* アニメーション動作時間の指定 */
    animation-timing-function: ease-in-out;
    /* アニメーションの動き（徐々に早く徐々に遅く）*/
    animation-iteration-count: infinite;
    /* アニメーションをループさせる */
}

/* 
段差あり丸ボタン
=======================================================
*/
.rank_button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 3rem auto;
    width: fit-content;
    background-color: rgba(255, 255, 255, 0.3);
    background-blend-mode: lighten;
    background-image: url(../img/background/bg.jpeg);
    background-size: cover;
    background-position: center;
    padding: 2rem;
}

.rank_button .clinic_logo {
    max-width: 300px;
}

.highly_recommend .rank_button {
    margin-top: 1rem;
}

a.btn_design {
    text-align: center;
    text-decoration: none;
    font-size: 20px;
    padding: 1rem 4rem;
    margin: 0 auto;
    margin-bottom: 1.3em;
    font-weight: bold;
    color: #FFF;
    background-color: #f69157;
    transition: 0.3s ease-in-out;
    box-shadow: 5px 5px 0 #F2620F;
    border-radius: 100vh;
    transition: 0.5s;
}

a.btn_design:hover {
    color: #fff;
    background: #F2620F;
    box-shadow: 0 0 0;
    transform: translate(5px, 5px);
}

.brand_name {
    font-size: 1.7rem;
}

@media screen and (max-width: 480px) {
    .rank_button {
        margin: 1rem 0;
        margin-bottom: 0;
        padding: 1rem;
    }

    .rank_button .clinic_logo {
        max-width: 200px;
    }

    a.btn_design {
        font-size: 1rem;
        padding: 1rem 2rem;
    }
}

/* 
詳細への誘導ボタン
=======================================================
*/
.detail_button {
    color: #3CD0BB;
    border-bottom: #40281F dashed 3px;
}

.detail_button:hover,
.detail_button:active {
    border-bottom: #93A603 dashed 3px;
}

/* 
動くグラデーション
=======================================================
*/
.gradient_button a {
    border-radius: var(--width_pc);
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;

    width: 70%;
    margin: 0 auto;
    padding: 1.2rem 0;
    color: #FFF;
    transition: 0.3s ease-in-out;

    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 2rem;
    font-weight: 600;

    background: linear-gradient(45deg, #3bade3, #9844b7, #44ea76);
    /*グラデーションを定義*/
    background-size: 200% 200%;
    /*サイズを大きくひきのばす*/
    animation: bggradient 6s ease infinite;
}

.gradient_button a:after {
    position: absolute;
    top: 50%;
    right: 40px;
    border-radius: 1px;
    transition: 0.2s ease-in-out;
    content: "\f0da";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    transform: translateY(-50%);
}

.gradient_button a:hover,
.gradient_button a:active {
    background: linear-gradient(270deg, rgba(54, 217, 201, 1) 0%, rgba(208, 242, 239, 1) 100%);
}

@media screen and (max-width: 480px) {
    .gradient_button a {
        padding: 1.3rem 0;
        font-size: 1.3rem;
        width: 100%;
    }

    .gradient_button a:after {
        right: 20px;
    }
}


/* 
背景色スライドボタン
=======================================================
*/
.slide_button {
    display: block;
    border: 2px solid var(--body_lemon);
    border-radius: 1000px;
    width: 70%;
    max-width: var(--width_pc);
    margin: 0 auto;
    margin-top: 3rem;
    padding: 1rem 1.5rem;
    padding-right: 5rem;
    text-align: center;
    font-size: 1.8rem;
    font-weight: bolder;
    color: var(--deco_space);
    background-color: var(--em_gold);
    background-image:
        url(../img/fv/arrow.webp);
    background-size: 3rem;
    background-repeat: no-repeat;
    background-position:
        right 2rem bottom 50%;

    animation: fuwafuwa_sideway 2s infinite ease-in-out;
}

@media screen and (max-width: 480px) {
    .slide_button {
        padding: 1rem;
        padding-right: 2rem;
        margin-top: 1.5rem;
        font-size: 1.3rem;
        background-size: 1.5rem;
        background-repeat: no-repeat;
        background-position:
            right 1rem bottom 50%;
    }
}

.slide_button a {
    color: var(--deco_space);
}

.slide_button:hover,
.slide_button:active {
    border: 2px solid var(--deco-sky);
    background-color: var(--body_sky);
    transition: 0.3s;
}


/* 
=======================================================
HEADER
=======================================================
FV
=======================================================
*/
header {
    /* height: 100vh; */
    margin: 0;
    background-color: var(--deco_space);
}

header .header_wrap {
    height: 100%;
}

header .fv {
    height: 50%;
    background-color: var(--body_white);
    background-image: url(../img/background/denki_sky_fv_pc_backgroud.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media screen and (max-width: 480px) {
    header .fv {
        background-image: url(../img/background/denki_sky_fv_sp_background.png);
        height: auto;
    }
}

header .fv img {
    object-fit: contain;
    margin: 0 auto;
    width: 100%;
    max-width: var(--width_pc);
}


@media screen and (max-width: 480px) {
    header .fv img {
        max-width: 100%;
    }
}

/* 
=======================================================
FV下コンテンツ
=======================================================
*/
header .fv_contents_area {
    height: 50%;
    max-width: var(--width_pc);
    display: flex;
    gap: 1rem;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0rem 0;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

@media screen and (max-width: 480px) {
    header .fv_contents_area {
        width: 100%;
        padding: 1.5rem 1rem;
    }
}

.fv_contents_area .cta {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70%;
    max-height: 25%;
    height: 100%;
}

@media screen and (max-width: 480px) {
    .fv_contents_area .cta {
        height: 100%;
        width: 100%;
    }
}

.fv_contents_area .cta img {
    width: 50px;
    height: 50px;
    z-index: 6;
    -webkit-animation: fuwafuwa_sideway 1s infinite;
    -moz-animation: fuwafuwa_sideway 1s infinite;
    animation: fuwafuwa_sideway 1s infinite;
}

header .intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: fit-content;
    width: 100%;
    background: var(--deco-sky);
    border: var(--deco-sky) 3px solid;
    border-radius: var(--box_radius);
}

@media screen and (max-width: 480px) {
    header .intro {
        margin-top: 0;
    }
}

header .intro h2 {
    width: 100%;
    padding: var(--title_bottom_pc) 0;
    text-align: center;
    color: var(--deco_space);
}

@media screen and (max-width: 480px) {
    header .intro h2 {
        padding: var(--padding_sp);
    }
}

header .intro div {
    background-color: var(--body_white);
    padding: var(--box_padding_pc);
    border-bottom-left-radius: var(--box_radius);
    border-bottom-right-radius: var(--box_radius);
}

@media screen and (max-width: 480px) {
    header .intro div {
        padding: var(--padding_sp);
    }
}


header .note {
    max-height: 20%;
    padding: 0;
    color: #fff;
}

/* 
=======================================================
ABSTRACT
=======================================================
abstract全体にかかる設定
-------------------------------------------------------
*/
.abstract {
    background-color: var(--body_white);
    background-image: radial-gradient(#eee 10%, transparent 20%), radial-gradient(#eee 10%, transparent 20%);
    background-position: 0 0, 0.625rem 0.625rem;
    background-size: 1.25rem 1.25rem;
    padding: 5rem 0;
}

@media screen and (max-width: 480px) {
    .abstract {
        padding: 1.5rem 0;
    }
}

/* 
abstract くくり
-------------------------------------------------------
*/
.abstract_wrap {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.podium {
    display: flex;
    width: 100%;
    gap: 1rem;
    align-items: flex-end;
}

@media screen and (max-width: 480px) {

    .podium {
        flex-wrap: wrap;
    }
}

.podium .item {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.podium .item:first-child {
    order: 1;
}

.podium .item:nth-child(2) {
    order: 0;
}

.podium .item:nth-child(3) {
    order: 2;
}

@media screen and (max-width: 480px) {
    .podium .item:first-child {
        order: 0;
    }

    .podium .item:nth-child(2) {
        order: 1;
        width: calc(50% - 0.5rem);
    }

    .podium .item:nth-child(3) {
        order: 2;
        width: calc(50% - 0.5rem);
    }

    .display_none_sp {
        display: none;
    }
}

.podium .intro .banner {
    display: block;
    width: 100%;
    height: fit-content;
}

.podium .intro .banner img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media screen and (max-width: 480px) {
    .podium .intro .banner img {
        height: 180px;
        object-fit: contain;
    }

    .podium .item:first-child .banner img {
        height: 250px;
    }
}

.podium .intro .shiny_button a {
    font-size: large;
}


/* 
=======================================================
FORM
=======================================================
FORM全体にかかる設定
-------------------------------------------------------
*/
.form {
    background-color: var(--body_lemon);
    padding: 5rem 0;
}

@media screen and (max-width: 480px) {
    .form {
        padding: 1.5rem 0;
    }
}

/* 
FORM 見出し
-------------------------------------------------------
*/
.form h2,
.first h2,
.second h2,
.third h2,
.compare_table h2,
.rank h2 {
    width: 100%;
    max-width: var(--width_pc);
    margin: 0 auto;
}

@media screen and (max-width: 480px) {

    .form h2,
    .first h2,
    .second h2,
    .third h2,
    .compare_table h2,
    .rank h2 {
        max-width: 100%;
    }
}

.form h2 img,
.first h2 img,
.second h2 img,
.third h2 img,
.compare_table h2 img,
.rank h2 img {
    object-fit: contain;
    width: 100%;
}

/* 
FORM 診断部分
-------------------------------------------------------
*/
.form_wrap {
    display: flex;
    flex-direction: column;
}

/* 
FORM 診断部分見出し
-------------------------------------------------------
*/
.form_wrap h3 {
    padding: 1rem 2rem;
    padding-left: 1rem;
    color: var(--body_lemon);
    border-left: 5px solid var(--em_gold);
    background: var(--em_space);
    margin-bottom: 1.5rem;
    font-weight: 500;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    width: fit-content;
}

@media screen and (max-width: 480px) {
    .form_wrap h3 {
        margin: 0;
    }
}

/* 
FORM 各質問エリア
-------------------------------------------------------
*/
.form .question {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
}

@media screen and (max-width: 480px) {
    .form .question {
        padding: 1rem 0;
    }
}

.form .last {
    padding-bottom: 0;
}


/* 
FORM　各選択肢
-------------------------------------------------------
*/
.form .options {
    display: flex;
    flex-direction: row;
    width: calc((100% / 2) - 0.5rem);
    align-items: center;
    border: var(--em_gold) solid 2px;
    border-radius: 0.5rem;
    background: var(--body_white);
    padding: var(--padding_pc);
    margin-right: 1rem;
    margin-bottom: 1rem;
    position: relative;
}

@media screen and (max-width: 480px) {
    .form .options {
        padding: var(--padding_sp);
    }
}

.form .options:nth-child(even) {
    margin-right: 0;
}

.form input {
    appearance: none;
}

/* 
FORM　Q1のみflex-direction: column
-------------------------------------------------------
*/
.form .region {
    max-width: 100%;
}

.form .region .options {
    flex-direction: column;
}

.form .region .options select {
    width: 100%;
}

/* 
選択肢のチェックボックス
-------------------------------------------------------
*/

.form input[type="checkbox"]+label {
    display: block;
    position: relative;
    padding: var(--box_padding_pc);
    padding-left: 2rem;
    font: 14px/20px 'Open Sans', Arial, sans-serif;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

@media screen and (max-width: 480px) {
    .form input[type="checkbox"]+label {
        padding: var(--padding_sp);
        padding-left: 1.5rem;
    }
}

.form input[type="checkbox"]+label:before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--em_space);
    border-radius: var(--box_radius);
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    opacity: .6;
    -webkit-transition: all .12s, border-color .08s;
    transition: all .12s, border-color .08s;
}

.form input[type="checkbox"]:checked+label:before {
    width: 8px;
    top: 30%;
    left: 0.5rem;
    border-radius: 0;
    opacity: 1;
    border-top-color: transparent;
    border-left-color: transparent;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.form .checkbox.active,
.form .radio.active {
    color: var(--em_space);
    background: var(--body_mint);
}

/* 
選択肢のラジオボタン
-------------------------------------------------------
*/
.form input[type="radio"] {
    appearance: none;
}

.form input[type="radio"]+label {
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    padding: var(--box_padding_pc);
    padding-left: 2rem;
    position: relative;
    width: auto;
}

@media screen and (max-width: 480px) {
    .form input[type="radio"]+label {
        padding: var(--padding_sp);
        padding-left: 1.5rem;
    }
}

.form input[type="radio"]+label::before {
    border: 2px solid var(--em_space);
    border-radius: 50%;
    content: '';
    display: block;
    height: 1.5rem;
    width: 1.5rem;
    left: 0px;
    margin-top: -12px;
    position: absolute;
    top: 50%;
}

@media screen and (max-width: 480px) {
    .form input[type="radio"]+label::before {
        height: 20px;
        width: 20px;
        left: 0px;
        margin-top: -9px;
    }
}

/* 
ラジオボタン選択時のアニメーション
-------------------------------------------------------
*/
.form input[type="radio"]+label::after {
    background: var(--em_space);
    border-radius: 50%;
    content: '';
    display: block;
    height: 19px;
    width: 19px;
    left: 3px;
    margin-top: -9px;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: scale3d(.3, .3, 1);
    transition: transform .2s ease-in-out, opacity .2s ease-in-out;
}

@media screen and (max-width: 480px) {
    .form input[type="radio"]+label::after {
        height: 14px;
        width: 14px;
        left: 3px;
        margin-top: -6px;
    }
}

.form input[type="radio"]:checked+label:before {
    border-color: var(--em_gold);
}

.form input[type="radio"]:checked+label::after {
    opacity: 1;
    transform: scale3d(1, 1, 1);
}

/* 
SUBMIT BUTTON
-------------------------------------------------------
*/

/* 
=======================================================
FIRST
=======================================================
first背景部分の設定
-------------------------------------------------------
*/
.first {
    padding: 5rem 0;
    background-color: var(--em_space);
}

@media screen and (max-width: 480px) {
    .first {
        padding: 1.5rem 0;
    }
}

/* 
first 見出し
-------------------------------------------------------
*/
/* 
first レイアウト
-------------------------------------------------------
*/
.first .first_wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* 
first 3つのポイント
-------------------------------------------------------
*/
.first .points_schema {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin: 15vh 0;
}

@media screen and (max-width: 480px) {
    .first .points_schema {
        margin: 2.5rem 0;
    }
}

.first .points_schema .point_circle {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.first .points_schema .point_circle::before {
    position: absolute;
    content: "";
    width: 90%;
    aspect-ratio: 1/1;
    border-radius: 300px;
    background-color: var(--em_gold);
    z-index: 0;
    box-shadow: 0 0 7px #fff, 0 0 5px #fff, 0 0 10px #fff, 0 0 20px var(--body_lemon), 0 0 40px var(--body_lemon), 0 0 60px var(--body_lemon), 0 0 70px var(--body_lemon), 0 0 80px var(--body_lemon);
    animation: pulsate 1s infinite alternate;
}

.first .points_schema .point_circle.point1::after,
.first .points_schema .point_circle.point2::after,
.first .points_schema .point_circle.point3::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100px;
    top: -130px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

@media screen and (max-width: 480px) {

    .first .points_schema .point_circle.point1::after,
    .first .points_schema .point_circle.point2::after,
    .first .points_schema .point_circle.point3::after {
        position: absolute;
        content: "";
        width: 100%;
        height: 50px;
        top: -50px;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
    }
}

.first .points_schema .point_circle.point1::after {
    background-image: url(../img/1_first/point1.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.first .points_schema .point_circle.point2::after {
    background-image: url(../img/1_first/point2.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.first .points_schema .point_circle.point3::after {
    background-image: url(../img/1_first/point3.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}




.first .points_schema .point_circle p {
    text-align: center;
    color: var(--em_space);
    font-weight: 600;
    margin-top: 0.3rem;
    z-index: 1;
    font-size: 2rem;
}

@media screen and (max-width: 480px) {
    .first .points_schema .point_circle p {
        margin-top: 0.1rem;
        font-size: 1rem;
    }
}

/* 
first 3つのポイント 詳細
-------------------------------------------------------
*/

.points_details {
    width: 100%;
}

.first .points_details .detail {
    padding: var(--padding_pc);
    margin: var(--padding_pc) 0;
    background-color: var(--body_white);
    border-radius: 0.5rem;
}

.points_details summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}

.points_details summary::-webkit-details-marker {
    display: none;
}

.points_details details p {
    margin-top: 0.5rem;
    padding-left: 1rem;
}

.style p {
    padding-bottom: 1rem;
}

@media screen and (max-width: 480px) {
    .first .points_details .detail {
        padding: var(--padding_sp);
        margin: var(--padding_sp) 0;
    }
}

.first .points_details .detail:last-child {
    margin-bottom: 0;
}

.first .points_details .detail .title {
    display: flex;
    align-items: flex-end;
    height: fit-content;
}

.first .points_details .detail .title h3 {
    color: var(--em_space);
    padding-bottom: 0.3rem;
    padding-left: 0.3rem;
    width: fit-content;
    border-bottom: solid 2px var(--em_gold);
}

@media screen and (max-width: 480px) {
    .first .points_details .detail .title h3 {
        padding-bottom: 0.1rem;
    }
}

.first .points_details .detail .title img {
    height: 3rem;
}

@media screen and (max-width: 480px) {
    .first .points_details .detail .title img {
        height: 2rem;
    }
}

.first .points_details .detail p {
    padding: var(--padding_pc);
}

@media screen and (max-width: 480px) {
    .first .points_details .detail p {
        padding: var(--padding_sp);
    }

}

/* 
first 説明文書
-------------------------------------------------------
*/
.first_wrap .intro {
    width: 100%;
    margin-bottom: 2rem;
    background-color: rgba(251, 233, 218, 0.4);
    background-blend-mode: lighten;
    padding: var(--box_padding_pc);
    border-radius: var(--box_radius);
}

@media screen and (max-width: 480px) {
    .first_wrap .intro {
        padding: 1rem;
        margin-bottom: 1rem;
    }
}

/* 
first 図解
-------------------------------------------------------
/* itemを横並びにしてる */
.first_wrap .diagrams {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    width: 100%;
}

/* 
first それぞれのitem
-------------------------------------------------------
*/
.first_wrap .diagrams .item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: var(--body_white);
    width: 50%;
    margin-right: 1rem;
    border: var(--deco_space) solid 2px;
    border-radius: 10px;
    overflow: hidden;
}

@media screen and (max-width: 480px) {
    .first_wrap .diagrams .item {
        width: 100%;
        margin-right: 0.5rem;
    }
}

.first_wrap .diagrams .item:last-child {
    margin: 0;
}

/* 
first item 項目名
-------------------------------------------------------
*/
.first_wrap .diagrams .item .title {
    color: #fff;
    background-color: var(--deco_space);
    width: 100%;
    padding: 0.5rem;
    text-align: center;
    font-size: 1.3rem;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

@media screen and (max-width: 480px) {
    .first_wrap .diagrams .item .title {
        font-size: 1rem;
    }
}

/* 
first 画像を囲っているdiv
-------------------------------------------------------
*/

.first_wrap .diagrams .item img {
    margin-bottom: 1rem;
    transition: transform .6s ease;
    width: 100%;
}

.first_wrap .diagrams .item img:hover {
    transform: scale(1.1);
}

.first_wrap .diagrams .item .fact {
    vertical-align: middle;

    font-size: 1.3rem;
    padding: 0 1rem;
    text-align: center;
    margin-bottom: 1rem;
}

@media screen and (max-width: 480px) {
    .first_wrap .diagrams .item .fact {
        font-size: 0.8rem;
        padding: 0 0.5rem;
        margin-bottom: 0.5rem;
        text-align: left;
    }
}

/* details要素のデフォルト矢印を非表示にする */
details>summary {
    list-style: none;
}

details>summary::-webkit-details-marker {
    display: none;
}

/* モバイルSafari用の追加対策 */
details>summary::-webkit-details-marker,
details>summary::marker {
    display: none;
}

/* カスタム矢印のスタイリング例 */
.custom-arrow {
    position: absolute;
    right: 1rem;
    transition: transform 0.3s ease;
}

/* 開いた時の矢印の回転 */
details[open] .custom-arrow {
    transform: rotate(180deg);
}

/* 
=======================================================
SECOND
=======================================================
second背景部分の設定
-------------------------------------------------------
*/
.second {
    padding: var(--section_updown_pc) 0;
    background-color: var(--deco_mint);
}

@media screen and (max-width: 480px) {
    .second {
        padding: var(--section_updown_sp) 0;
    }
}

/* 
second レイアウト
-------------------------------------------------------
*/
.second .second_wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* 
second 見出し
-------------------------------------------------------
*/

.second h2 {
    margin-bottom: var(--title_bottom_pc);
    color: var(--em_space);
}

@media screen and (max-width: 480px) {
    .second h2 {
        margin-bottom: var(--title_bottom_sp);
    }
}

/* 
second 説明文書
-------------------------------------------------------
*/
.second_wrap .intro {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    background-blend-mode: lighten;
    padding: var(--box_padding_pc);
    border-top-left-radius: var(--box_radius);
    border-top-right-radius: var(--box_radius);
}

@media screen and (max-width: 480px) {
    .second_wrap .intro {
        padding: var(--padding_pc);
    }
}

/* 
second 画像
-------------------------------------------------------
*/
.second_wrap .diagram {
    padding: var(--padding_pc);
    background: var(--body_white);
    border-bottom-left-radius: var(--box_radius);
    border-bottom-right-radius: var(--box_radius);
    position: relative;
    width: 100%;
}

.second_wrap .diagram img {
    width: 80%;
    padding: var(--padding_sp);
    margin: 0 auto;
}

@media screen and (max-width: 480px) {
    .second_wrap .diagram img {
        width: fit-content;
        padding: var(--padding_sp);
        margin: 0 auto;
    }

}

.second_wrap .diagram img.emphasis {
    position: absolute;
    width: 15%;
    right: 10px;
    top: 25%;
    animation: scaling 0.5s ease 0s infinite alternate;
}

@media screen and (max-width: 480px) {
    .second_wrap .diagram img.emphasis {
        position: absolute;
        width: 30%;
        top: 65%;
        animation: scaling 0.5s ease 0s infinite alternate;
    }
}

/* 
=======================================================
THIRD
=======================================================
first背景部分の設定
-------------------------------------------------------
*/
.third {
    background: var(--body_lemon);
    padding: var(--section_updown_pc) 0;
}

.each_style summary,
.each_pros_cons summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}

@media screen and (max-width: 480px) {
    .third {
        padding: var(--section_updown_sp) 0;
    }
}

/* 
third レイアウト
-------------------------------------------------------
*/
.third .third_wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* 
third 見出し
-------------------------------------------------------
*/
.third h2 {
    text-align: center;
    margin-bottom: var(--title_bottom_pc);
    color: var(--em_space);
}

@media screen and (max-width: 480px) {
    .third h2 {
        margin-bottom: var(--title_bottom_sp);
    }
}

/* 
third 説明文書
-------------------------------------------------------
*/
.third_wrap .intro {
    width: 100%;
    background-color: rgba(255, 246, 194, 0.7);
    background-blend-mode: lighten;
    padding: var(--padding_pc);
    margin-bottom: var(--box_marging_bottom_pc);
    border-radius: var(--box_radius);
}

@media screen and (max-width: 480px) {
    .third_wrap .intro {
        margin-bottom: var(--box_marging_bottom_sp);
    }
}

/* 
third それぞれの料金スタイル
-------------------------------------------------------
*/
.third_wrap .each_style {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: var(--padding_pc);
    margin-bottom: var(--margin_bottom_pc);
}

@media screen and (max-width: 480px) {
    .third_wrap .each_style {
        flex-direction: column;
        gap: var(--padding_sp);
        margin-bottom: var(--margin_bottom_sp);
    }
}

.third_wrap .each_style .style {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    background: var(--body_white);
    border: 4px solid var(--em_gold);
    border-bottom: 4px solid var(--deco_space);
    border-right: 4px solid var(--deco_space);
    padding: var(--padding_pc) var(--padding_pc) 0;
    height: max-content;
}

.third_wrap .each_style .style .title {
    display: flex;
    align-items: flex-end;
    height: fit-content;
    margin-bottom: var(--margin_bottom_pc);
}

@media screen and (max-width: 480px) {
    .third_wrap .each_style .style .title {
        margin-bottom: var(--margin_bottom_sp);
    }
}

.third_wrap .each_style .style .title h3 {
    color: var(--em_space);
    padding-bottom: 0.3rem;
    padding-left: 0.3rem;
    width: fit-content;
    border-bottom: solid 2px var(--em_gold);
}

.third_wrap .each_style .style .title img {
    height: 3rem;
}

@media screen and (max-width: 480px) {
    .third_wrap .each_style .style .title img {
        height: 2rem;
    }
}

/* 
third 料金スタイルの一長一短
-------------------------------------------------------
*/
.third_wrap .each_pros_cons {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: var(--padding_pc);
    margin: var(--padding_pc);
}

@media screen and (max-width: 480px) {
    .third_wrap .each_pros_cons {
        gap: var(--padding_sp);
        margin: var(--padding_sp);
    }
}

.third_wrap .pros_cons {
    display: flex;
    flex-direction: column;
    flex: 1;
    background: var(--em_yellow);
    padding: var(--padding_pc);
    height: max-content;
}

@media screen and (max-width: 480px) {
    .third_wrap .pros_cons {
        gap: var(--padding_sp);
        padding: var(--padding_sp);
    }

}

.third_wrap .pros_cons h3,
.third_wrap .pros_cons h4 {
    width: fit-content;
    text-align: center;
    margin: 0 auto;
}

.third_wrap .pros_cons h4 {
    margin-bottom: 10px;
    border-bottom: 1px solid var(--em_gold);
}

.third_wrap .pros_cons .merit,
.third_wrap .pros_cons .demerit,
.third_wrap .pros_cons .conclude {
    flex: 1;
    padding: var(--padding_pc);
    border-radius: var(--box_radius);
}

@media screen and (max-width: 480px) {

    .third_wrap .pros_cons .merit,
    .third_wrap .pros_cons .demerit,
    .third_wrap .pros_cons .conclude {
        padding: var(--padding_sp);
    }
}

.third_wrap .pros_cons .merit {
    background: var(--body_lemon);
}

.third_wrap .pros_cons .demerit {
    background: var(--body_mint);
}

.third_wrap .pros_cons .conclude {
    background: var(--body_white);
}

.pros_cons ul {
    list-style: none;
    padding-bottom: 0;
}

.pros_cons ul>li {
    background: url(../img/fv/favicon.webp) no-repeat 0 0;
    background-size: auto 20px;
    padding-left: var(--padding_pc);
    margin-bottom: 10px;
}

/* 三角形アイコンを疑似要素で追加 */
.points_details summary::after,
.each_style summary::after,
.each_pros_cons summary::after {
    content: '▶';
    /* 閉じている状態 */
    margin-right: 0.5rem;
    display: inline-block;
    transition: transform 0.3s;
}

/* 開いている状態の三角形 */
.points_details details[open] summary::after,
.each_style details[open] summary::after,
.each_pros_cons details[open] summary::after {
    transform: rotate(90deg);
    /* 90度回転 */
}

/* ホバー時のスタイル */
.points_details summary:hover,
.each_style summary:hover,
.each_pros_cons summary:hover {
    cursor: pointer;
    opacity: 0.8;
}

/* アニメーションをスムーズに */
.points_details details,
.each_style details,
.each_pros_cons details {
    transition: all 0.3s ease;
}


/* 
=======================================================
REAL TIME
=======================================================
Realtime 背景部分
-------------------------------------------------------
*/
.realtime_rank {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: var(--box_marging_bottom_pc);
    padding: var(--padding_pc);
    width: 100%;
    position: relative;
    background-color: rgba(255, 255, 255, 0.6);
}

@media screen and (max-width: 480px) {
    .realtime_rank {
        margin-bottom: var(--box_marging_bottom_sp);
        padding: var(--padding_sp);
    }
}

/*
Realtime 角の飾り部分
-------------------------------------------------------
*/
.realtime_rank:before,
.realtime_rank:after {
    content: '';
    width: 30px;
    height: 30px;
    position: absolute;
    display: inline-block;
}

.realtime_rank:before {
    border-left: solid 2px var(--em_yellow);
    border-top: solid 2px var(--em_yellow);
    top: 0;
    left: 0;
}

.realtime_rank:after {
    border-right: solid 2px var(--em_yellow);
    border-bottom: solid 2px var(--em_yellow);
    bottom: 0;
    right: 0;
}

/*
Realtime 本文
-------------------------------------------------------
*/
.realtime_rank p {
    font-size: 2rem;
    font-weight: bolder;
    text-align: center;
    padding: 0 1rem;
    position: relative;
    z-index: 1;
}

@media screen and (max-width: 480px) {
    .realtime_rank p {
        font-size: 1.2rem;
    }
}

/*
Realtime 背景ハイライト
-------------------------------------------------------
*/
.realtime_rank p::before {
    content: "";
    width: 100%;
    height: 30%;
    background: rgba(255, 255, 0, 0.6);
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
    -webkit-animation: blink 1s linear infinite;
    -moz-animation: blink 1s linear infinite;
    animation: blink 1s linear infinite;
}

/* 
=======================================================
COMPARE TABLE
=======================================================
compare table 背景部分の設定
-------------------------------------------------------
*/
section.compare_table {
    padding: var(--section_updown_pc) 0;
    background-color: var(--deco_space);
}

@media screen and (max-width: 480px) {
    section.compare_table {
        padding: var(--section_updown_sp) 0;
    }
}

/*
compare table 中身のレイアウト
-------------------------------------------------------
*/
.compare_table_wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/*
compare table 見出し
-------------------------------------------------------
*/
.compare_table_wrap h1 {
    position: relative;
    z-index: 10;
}


/*
compare table 後ろで光っている丸
-------------------------------------------------------
*/
.compare_table_wrap h1::before {
    content: "";
    display: block;
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 300px;
    background-color: var(--body_lemon);
    z-index: -1;
    animation: pulsate 1s infinite alternate;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

@media screen and (max-width: 480px) {
    .compare_table_wrap h1::before {
        width: 125px;
        height: 125px;
    }
}

/* 
compare table　イメージ
-------------------------------------------------------
テーブル内のイメージを左右中央寄せ */

table img {
    display: block;
    margin: 0 auto;
    width: 100px;
}

@media screen and (max-width: 480px) {
    table img {
        width: 80px;
    }
}

.scroll_x .fields img {
    height: auto;
    width: 150px;
    object-fit: contain;
    padding-top: var(--padding_pc);
}


.scroll_x .fields .no1,
.scroll_x .fields .no2,
.scroll_x .fields .no3 {
    position: relative;
}


.scroll_x .fields .no1::before,
.scroll_x .fields .no2::before,
.scroll_x .fields .no3::before {
    content: "";
    position: absolute;
    width: 50px;
    height: 50px;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

.scroll_x .fields .no1::before {
    background-image: url(../img/compare_table/rank_1st.webp);
    background-size: contain;
    background-repeat: no-repeat;
}

.scroll_x .fields .no2::before {
    background-image: url(../img/compare_table/rank_2nd.webp);
    background-size: contain;
    background-repeat: no-repeat;
}

.scroll_x .fields .no3::before {
    background-image: url(../img/compare_table/rank_3rd.webp);
    background-size: contain;
    background-repeat: no-repeat;
}


/*
compare table 総合評価部分の画像
-------------------------------------------------------
*/
.evaluation {
    max-width: 60%;
}

@media screen and (max-width: 480px) {
    .evaluation {
        max-width: 100px;
    }
}

/*
テーブル　周りの設定
-------------------------------------------------------
*/
.scroll_x {
    overflow: scroll;
    margin: var(--box_marging_bottom_pc) auto;
    margin-top: 0;
    width: 100%;
}

@media screen and (max-width: 480px) {
    .scroll_x {
        margin: 0 auto;
    }
}

/*
テーブル　全体の設定
-------------------------------------------------------
*/
.scroll_x table {
    width: 100%;
    text-align: center;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--em_space);
    table-layout: auto;
    border: 1px solid var(--em_gold);
}

/*
テーブル　最初の1行
-------------------------------------------------------
/*
テーブル　最初の1行を縦書き
-------------------------------------------------------*/
.scroll_x table th:first-child {
    text-orientation: mixed;
    /* テキストが折り返されないようにする */
}

/*
テーブル　最初の1行を固定
-------------------------------------------------------
*/
.scroll_x table .sticky_1 {
    position: sticky;
    /* width: 100px; */
    left: 0;
    z-index: 1;
}

/* .scroll_x table .sticky_2 {
    position: sticky;
    left: 82px;
} */

/* @media screen and (max-width: 480px) {
    .scroll_x table .sticky_1 {
        width: 120px;
    }

    .scroll_x table .sticky_2 {
        left: 66px;
    }
} */

/*
テーブル　ヘッダー(th) とセル（td）の全体設定
-------------------------------------------------------
*/
.scroll_x table th,
.scroll_x table td {
    border: 1px solid var(--em_gold);
    vertical-align: middle;
    word-wrap: break-word;
    white-space: nowrap;
    max-width: 205px;
}

/*
テーブル　ヘッダー(th: 項目名）の設定
-------------------------------------------------------
*/
.scroll_x th {
    white-space: nowrap;
    padding: var(--box_padding_pc);
    background-color: var(--em_yellow);
}

.scroll_x th.simulation {
    background-color: var(--deco_mint);
}

@media screen and (max-width: 480px) {
    .scroll_x th {
        padding: var(--box_padding_sp);
    }
}

/*
テーブル　セル（td: 各データ）の全体設定
-------------------------------------------------------
*/
.scroll_x td {
    white-space: wrap;
    border-right: 1px solid var(--em_gold);
    border-bottom: 1px solid var(--em_gold);
    background: #FFF;
    padding: var(--box_padding_pc);
}

@media screen and (max-width: 480px) {
    .scroll_x td {
        padding: var(--box_padding_sp);
        width: 100%;
    }
}

.scroll_x td.simulation {
    text-align: left;
}


/*
テーブル　商品イメージ後ろの背景色
-------------------------------------------------------
*/
.scroll_x .fields td {
    background-color: var(--em_yellow);
}

/*
テーブル　セル（td: 各データ）の全体設定
-------------------------------------------------------
*/
/* .scroll_x .text_left td,
.scroll_x td.text_left,
.rank_table .text_left {
    text-align: left;
} */

/* 
COMPARE TABLE 装飾部分
=======================================================
公式サイトへのボタン
-------------------------------------------------------
*/
.button_offical {
    background: var(--deco_space);
    color: var(--body_white);
    border-radius: var(--box_radius);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--padding_pc);
    margin: 0 auto;
    max-width: 260px;
    height: 80px;
    transition: 0.3s ease-in-out;
    font-weight: 500;
    /* animation: scaling 0.5s ease 0s infinite alternate; */
}

@media screen and (max-width: 480px) {
    .button_offical {
        padding: var(--padding_sp);
    }
}

.button_offical:hover {
    background: var(--body_lemon);
    color: var(--light_space);
}

/*
テーブル　各装飾
-------------------------------------------------------
*/
/* （）部分 */
.price_tag {
    font-size: x-small;
    line-height: 0.9;
}

/* 文字グラデーション */
.emphasis_grad {
    font-size: 2em;
    text-align: center;
    line-height: 0.95em;
    font-weight: bold;
    color: transparent;
    /* background: linear-gradient(90deg, #E274A0 0% 30%, #f67481 40% 60%, #f79d98 70% 100%); */
    background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);
    background-clip: text;
    -webkit-background-clip: text;
}

/* 丸囲み */
.good_deal {
    display: inline-block;
    background-color: #3CD0BB;
    color: #FFF;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 5px 20px;
    margin-top: 5px;
    border-radius: 30px;
}

@media screen and (max-width: 480px) {
    .good_deal {
        font-size: 0.9rem;
        padding: 10px 15px;
        border-radius: 20px;
    }
}

/* 
=======================================================
RANKING DETAIL
=======================================================
rank 背景部分の設定
-------------------------------------------------------
*/
.rank {
    padding: 5rem 0;
    background-color: var(--body_white);
    padding-bottom: 2.5rem;
}

@media screen and (max-width: 480px) {
    .rank {
        padding: 1.5rem 0;
    }
}

/* 
rank 見出し
-------------------------------------------------------
*/

/*
rank レイアウト
=======================================================
rank 全体の設定
-------------------------------------------------------
*/
.rank .rank_wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
}

@media screen and (max-width: 480px) {
    .rank .rank_wrap {
        gap: 1rem;
    }
}


/*
rank 各商品全部のwrap
-------------------------------------------------------
*/
.rank .item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: var(--body_mint);
    border-radius: 1rem;
}

.rank .item:last-of-type {
    margin-bottom: 0;
}


/* 
rank 商品名見出し
-------------------------------------------------------
*/
.item .headline {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    border-top-right-radius: 1rem;
    border-top-left-radius: 1rem;
    padding-bottom: 16px;
}

.item .headline.no1 {
    background:
        /* 1枚目の背景画像のパス */
        url(../img/asset/ranking/left_no1.webp),
        /* 2枚目の背景画像のパス */
        url(../img/asset/ranking/right_no1.webp),
        /* 背景のゴールド */
        linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);

    background-position:
        /* 1枚目の背景画像の表示位置 */
        left 35% center,
        /* 2枚目の背景画像の表示位置 */
        right 35% center,
        100%;

    background-repeat:
        /* 1枚目の背景画像の設定 */
        no-repeat,
        /* 2枚目の背景画像の設定 */
        no-repeat;
    background-size: 50px, 50px, 100%;
    padding-top: 1rem;
}

.item .headline.no2 {
    background: var(--em_space);
    background-image:
        /* 1枚目の背景画像のパス */
        url(../img/asset/ranking/left_no2.webp),
        /* 2枚目の背景画像のパス */
        url(../img/asset/ranking/right_no2.webp),
        linear-gradient(45deg, #757575 0%, #9E9E9E 45%, #E8E8E8 70%, #9E9E9E 85%, #757575 90% 100%);

    background-position:
        /* 1枚目の背景画像の表示位置 */
        left 35% center,
        /* 2枚目の背景画像の表示位置 */
        right 35% center,
        100%;

    background-repeat:
        /* 1枚目の背景画像の設定 */
        no-repeat,
        /* 2枚目の背景画像の設定 */
        no-repeat;
    background-size: 50px, 50px, 100%;
    padding-top: 1rem;
}

.item .headline.no3 {
    background: var(--em_gold);
    background-image:
        /* 1枚目の背景画像のパス */
        url(../img/asset/ranking/left_no3.webp),
        /* 2枚目の背景画像のパス */
        url(../img/asset/ranking/right_no3.webp),
        linear-gradient(45deg, #a57e65 0%, #a57e65 45%, #f3cfb8 70%, #a57e65 85%, #a57e65 90% 100%);

    background-position:
        /* 1枚目の背景画像の表示位置 */
        left 35% center,
        /* 2枚目の背景画像の表示位置 */
        right 35% center,
        100%;

    background-repeat:
        /* 1枚目の背景画像の設定 */
        no-repeat,
        /* 2枚目の背景画像の設定 */
        no-repeat;
    background-size: 50px, 50px, 100%;
    padding-top: 1rem;
}

@media screen and (max-width: 480px) {

    .item .headline.no1,
    .item .headline.no2,
    .item .headline.no3 {
        background-position:
            /* 1枚目の背景画像の表示位置 */
            left 20% center,
            /* 2枚目の背景画像の表示位置 */
            right 20% center;
        background-size: 30px, 30px, 100%;
        padding-top: 0.5rem;
    }

}

/* 
rank 王冠
-------------------------------------------------------
*/
.item .headline img {
    width: 60px;
    margin-bottom: 0.5rem;
}

@media screen and (max-width: 480px) {
    .item .headline img {
        width: 50px;
        margin-bottom: 0.25rem;
    }

}

/* 
rank 見出し文字部分
-------------------------------------------------------
*/
.item .headline h2 {
    width: 100%;
    padding-bottom: var(--padding_pc);
}

@media screen and (max-width: 480px) {
    .item .headline h3 {
        padding-bottom: var(--padding_sp);
    }
}

.item .headline h3 img {
    margin: 0 auto;
    height: 65px;
    width: auto;
}

.podium .item .no3--img .tokyo_img {
    max-height: 35px;
}

.podium .item .no2--img .ribbon_img {
    height: auto;
}

/* 
=======================================================
星付きRATING
=======================================================
*/

/* Recommendation bar */
.rating {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    padding-bottom: 1rem;
}

.rate_left {
    padding: 10px 20px;
    background-color: #f69157;
    border: 3px solid #f69157;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
}

.rate_right {
    display: flex;
    background-color: #fff;
    padding: 10px 20px;
    border: 3px solid #f69157;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
}

.rate {
    position: relative;
    display: inline-block;
    width: 150px;
    height: 30px;
    font-size: 30px;
    margin-right: 20px;
}

.rate::before,
.rate::after {
    position: absolute;
    display: inline-block;
    height: 30px;
    content: '★★★★★';
    line-height: 30px;
}

.rate::before {
    color: #c4c4c4;
}

.no1_rate .rate::after {
    overflow: hidden;
    /* fomula: rating * font size */
    /* font-size = 30px*/
    /* ex: rating 5 * 30 = 150px */
    width: 150px;
    color: #ffeb00;
}

.no2_rate .rate::after {
    overflow: hidden;
    /* fomula: rating * font size */
    /* font-size = 30px*/
    /* ex: rating 4.5 * 30 = 135px */
    width: 135px;
    color: #ffeb00;
}

.no3_rate .rate::after {
    overflow: hidden;
    /* fomula: rating * font size */
    /* font-size = 30px*/
    /* ex: rating 4.5 * 30 = 135px */
    width: 126px;
    color: #ffeb00;
}

.recotext {
    font-weight: 700;
    font-size: 18px;
}

.recommend_level {
    color: #fff;
}

.rate-wrap {
    display: flex;
    width: 330px;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
    border: 1.5px solid #e8d8b0;
    margin: 20px auto 0;
    font-weight: bold;
}

@media screen and (max-width: 480px) {
    .rating {
        justify-content: center;
        margin: .5rem 0;
        margin-top: 0;
        padding: 0;
    }

    .rate_left {
        border: none;
        padding: 5px 10px;
    }

    .rate_right {
        border: none;
        padding: 5px 10px;
    }

    .recotext {
        font-size: 0.9rem;
    }
}

.each_rank_content .content {
    display: flex;
    align-items: stretch;
    margin: 1rem 0;
    width: 100%;
}

@media screen and (max-width: 480px) {
    .each_rank_content .content {
        flex-direction: column;
        width: 100%;
    }
}

.hover_banner {
    background-color: #fff;
}

.hover_img:hover,
.hover_img:active {
    filter: opacity(70%);
    cursor: pointer;
}

/* 
Rank Header
=======================================================
見出し下全体の設定
*/
.rank .item .header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 1rem 0 1rem;
    gap: var(--padding_pc);
    margin-bottom: 1rem;
    border-top: solid 0.5rem var(--body_white);
}

@media screen and (max-width: 480px) {
    .rank .item .header {
        flex-direction: column;
        align-items: center;
        margin-bottom: 0;
        gap: var(--padding_sp);
    }
}

/* 
rank 商品画像（左）
-------------------------------------------------------
*/
.rank .item .header .product_img {
    display: flex;
    width: 40%;
    margin: 0 auto;
}

@media screen and (max-width: 480px) {
    .rank .item .header .product_img {
        width: 100%;
        justify-content: center;
        margin-bottom: 1rem;
    }
}

.rank .item .header .product_img:hover {
    opacity: 0.8;
    transition: 0.3s;
}


.rank .item .header .product_img img {
    width: 100%;
    object-fit: contain;
}

/* 
rank 商品詳細（右）
-------------------------------------------------------
*/
.rank .item .header .product_detail {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 70%;
    margin: 0 auto;
}

@media screen and (max-width: 480px) {
    .rank .item .header .product_detail {
        width: 100%;
    }
}

/* 
rank 商品詳細（右）見出し
-------------------------------------------------------
*/
.rank .item .header .product_detail h4,
.rank .item .reviews h4 {
    position: relative;
    display: inline-block;
    padding: 0 65px;
    width: 70%;
    margin: 0 auto;
    text-align: center;
    font-size: 1.8rem;
}

@media screen and (max-width: 480px) {

    .rank .item .header .product_detail h4,
    .rank .item .reviews h4 {
        width: 100%;
        font-size: 1.3rem;
    }
}

.rank .item .header .product_detail h4 {
    color: var(--em_gold);
}

.rank .item .reviews h4 {
    color: var(--body_white);
}

.rank .item .header .product_detail h4::before,
.rank .item .header .product_detail h4::after,
.rank .item .reviews h3::before,
.rank .item .reviews h3::after {
    position: absolute;
    top: calc(50% - 3px);
    width: 50px;
    height: 6px;
    content: '';
    border-top: solid 2px var(--deco_space);
    border-bottom: solid 2px var(--deco_space);
}

.rank .item .header .product_detail h4::before,
.rank .item .reviews h3::before {
    left: 0;
}

.rank .item .header .product_detail h4::after,
.rank .item .reviews h3::after {
    right: 0;
}

/* 
rank 商品詳細（右）リスト
-------------------------------------------------------
*/

.product_detail ol {
    counter-reset: li;
    position: relative;
    margin: 1rem 0;
    padding: 1.5rem 2rem;
    list-style: none;
    font-weight: bold;
    background-color: var(--body_white);
    border-radius: 0.5rem;
    box-shadow: 0px 0px 5px var(--deco_mint);
}

@media screen and (max-width: 480px) {
    .product_detail ol {
        padding: 0.5rem 0.5rem 0.5rem 1.5rem;
        margin: 0.5rem 0;
    }

    .podium .product_detail ol {
        padding: 0.5rem;
        margin: 0.5rem 0;
    }
}


.product_detail ol li {
    position: relative;
    margin: 1rem 0 0 2rem;
    padding: 0;
    line-height: 1.5;
    font-size: 1.2rem;
}

@media screen and (max-width:480px) {
    .product_detail ol li {
        font-size: 1rem;
    }

    .product_detail ol li.margintop_none {
        margin: 0;
    }

}

.product_detail ol li:first-child {
    margin-top: 0;
}


.product_detail ol>li:before {
    position: absolute;
    font-weight: bold;
    counter-increment: li;
    content: counter(li) "";
    left: -45px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    width: 35px;
    height: 35px;
    font-size: 1.4rem;
    text-align: center;
    border-radius: 100%;
    box-sizing: border-box;
    font-weight: bold;
    line-height: 0.9;
    background: var(--em_gold);
    padding: 6px 0;
}

@media screen and (max-width:480px) {
    .podium .product_detail ol li:before {
        content: none;
    }
}

/* 
rank 商品詳細（右）公式サイトボタン
-------------------------------------------------------
*/
.rank .item .header .product_detail a {
    padding: 1rem 2rem;
    width: fit-content;
    margin: 0 auto;
    border-radius: 10px;
    font-size: 1.5rem;
    animation: heartbeat 2s linear infinite;
}

@media screen and (max-width:480px) {
    .rank .item .header .product_detail a {
        font-size: 1.2rem;
        width: 100%;
    }
}

/* 
Rank 評価表
=======================================================
*/
/* PC向けスタイル（画面幅が768px以上） */
.mobile-view {
    display: none;
    /* スマートフォン向けの表示を非表示にする */
}

.pc-view {
    display: table;
    /* PC向けの表示を表示する */
}

/* スマートフォン向けスタイル（画面幅が480px以下） */
@media screen and (max-width: 480px) {
    .mobile-view {
        display: table;
    }

    .pc-view {
        display: none;
    }
}

/* 
rank 評価表の全体
-------------------------------------------------------
*/
.rank_table {
    padding: var(--padding_pc);
    padding-bottom: 0;
}

.rank_table table {
    border-collapse: collapse;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    table-layout: fixed;
    width: 100%;
}

@media screen and (max-width: 480px) {
    .rank_table table {
        width: 100%;
        align-items: center;
        justify-content: center;
    }
}

/* 
評価表 th（見出し）, td（セル）の設定
-------------------------------------------------------
*/

.rank_table table th,
.rank_table table td {
    padding: var(--box_padding_sp);
    margin: var(--padding_pc) 0;
    border: 2px solid var(--em_space);
    text-align: center;
    vertical-align: middle;
}

@media screen and (max-width: 480px) {

    .rank_table table th,
    .rank_table table td {
        width: auto;
        border-bottom: none;
        font-size: 0.88rem;
        text-align: center;
        padding: var(--padding_sp) 0.1rem;
    }

    .rank_table tr:last-child {
        border-bottom: 2px solid var(--em_space);
    }
}

/* 
評価表 th（見出し）の設定
-------------------------------------------------------
*/

.rank_table th {
    color: var(--em_space);
    background: var(--deco_mint);
    width: calc(100% / 6);
    vertical-align: middle;
}

/* 
評価表 td（セル）の設定
-------------------------------------------------------
*/

.rank_table td {
    background: var(--body_white);
}

@media screen and (max-width: 480px) {
    .rank_table td {
        padding: 0.5rem;
        font-size: 0.8rem;
    }
}

.rank_table td img {
    width: 50%;
    margin-bottom: 0.3rem;
}

/* 
Rank Review
=======================================================
*/
.rank .item .reviews {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: var(--em_gold);
    padding: var(--box_padding_pc);
    margin-top: 1rem;
}

@media screen and (max-width: 480px) {
    .rank .item .reviews {
        padding: var(--padding_pc);
    }
}

.rank .item .reviews_wrap {
    display: flex;
    flex-direction: row;
    gap: var(--padding_pc);
    padding-bottom: 0;
    margin-top: var(--padding_pc);
}

@media screen and (max-width: 480px) {
    .rank .item .reviews_wrap {
        flex-direction: column;
        gap: var(--padding_sp);
    }
}

.rank .reviews_wrap .review {
    flex: 1;
}

.rank .reviews_wrap .review h5 {
    display: flex;
    align-items: center;
    gap: var(--padding_pc);
    padding: var(--box_padding_pc);
    color: var(--body_white);
    background: var(--deco_space);
    border-top-left-radius: var(--box_radius);
    border-top-right-radius: var(--box_radius);
}

.rank .reviews_wrap .review img {
    width: 20%;
}


.rank .reviews_wrap .review div {
    padding: var(--padding_pc);
    background-color: var(--body_white);
    border-bottom-left-radius: var(--box_radius);
    border-bottom-right-radius: var(--box_radius);
}



/* 
Rank Comment
=======================================================
*/
.rank .item .comment {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    margin-top: 1rem;
}

@media screen and (max-width:480px) {
    .rank .item .comment {
        margin-top: 0;
    }
}

/* 
rank comment 編集者画像
-------------------------------------------------------
*/
.rank .item .comment .editor {
    display: flex;
    margin-right: 1rem;
    object-fit: contain;
    width: 20%;
    margin-left: 1rem;
}

@media screen and (max-width:480px) {
    .rank .item .comment .editor {
        display: none;
    }
}

/* 
rank comment 編集者テキスト
-------------------------------------------------------
*/
.rank .item .comment .text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 75%;
    background-color: var(--body_white);
    position: relative;
    border-radius: var(--box_radius);
    padding: var(--padding_pc);
    margin-bottom: var(--margin_bottom_pc);
    margin-right: var(--margin_bottom_pc);
}

@media screen and (max-width:480px) {
    .rank .item .comment .text {
        width: 100%;
        margin: var(--padding_pc);
    }
}

.rank .item .comment .text::after {
    border: solid transparent;
    content: '';
    height: 0;
    width: 0;
    pointer-events: none;
    position: absolute;
    border-color: rgba(0, 153, 255, 0);
    border-top-width: 0.8rem;
    border-bottom-width: 0.8rem;
    border-left-width: 1rem;
    border-right-width: 1rem;
    margin-top: -1rem;
    border-right-color: var(--body_white);
    right: 100%;
    top: 50%;
}

@media screen and (max-width:480px) {
    .rank .item .comment .text::after {
        display: none;
    }

}

.rank .item .comment .text h4 {
    padding: 0.3rem 0;
    text-align: center;
    border-bottom: 6px double var(--deco_mint);
    font-size: 1.5rem;
    margin-bottom: var(--title_bottom_pc);
    color: var(--deco_space);
}

@media screen and (max-width:480px) {
    .rank .item .comment .text h4 {
        font-size: 1.25rem;
    }
}

/* 
rank 星レート
-------------------------------------------------------
*/

/* Recommendation bar */
.rating {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    padding-bottom: 1rem;
}

.rate_left {
    padding: 10px 20px;
    background-color: #f69157;
    border: 3px solid #f69157;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
}

.rate_right {
    display: flex;
    background-color: #fff;
    padding: 10px 20px;
    border: 3px solid #f69157;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
}

.rate {
    position: relative;
    display: inline-block;
    width: 150px;
    height: 30px;
    font-size: 30px;
    margin-right: 20px;
}

.rate::before,
.rate::after {
    position: absolute;
    display: inline-block;
    height: 30px;
    content: '★★★★★';
    line-height: 30px;
}

.rate::before {
    color: #c4c4c4;
}

.no1_rate .rate::after {
    overflow: hidden;
    /* fomula: rating * font size */
    /* font-size = 30px*/
    /* ex: rating 5 * 30 = 150px */
    width: 150px;
    color: #ffeb00;
}

.no2_rate .rate::after {
    overflow: hidden;
    /* fomula: rating * font size */
    /* font-size = 30px*/
    /* ex: rating 4.5 * 30 = 135px */
    width: 135px;
    color: #ffeb00;
}

.no3_rate .rate::after {
    overflow: hidden;
    /* fomula: rating * font size */
    /* font-size = 30px*/
    /* ex: rating 4.5 * 30 = 135px */
    width: 126px;
    color: #ffeb00;
}

.recotext {
    font-weight: 700;
    font-size: 18px;
}

.recommend_level {
    color: #fff;
}

.rate-wrap {
    display: flex;
    width: 330px;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
    border: 1.5px solid #e8d8b0;
    margin: 20px auto 0;
    font-weight: bold;
}

@media screen and (max-width: 480px) {
    .rating {
        justify-content: center;
        margin: .5rem 0;
        margin-top: 0;
        padding: 0;
    }

    .rate_left {
        border: none;
        padding: 5px 10px;
    }

    .rate_right {
        border: none;
        padding: 5px 10px;
    }

    .recotext {
        font-size: 0.9rem;
    }
}

/* 利用者の口コミ
=======================================================*/
.card_wrap {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}

.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 1rem;
    padding: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.card:last-child {
    margin-right: 0;
}

.card_header {
    width: 30%;
    margin: 1rem 0;
}

.card_text {
    height: 70%;
    padding: 1rem 2rem;
    background-color: #dee4b3;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.dog_detail {
    margin-top: 0.3rem;
    text-align: right;
}

@media screen and (max-width: 480px) {
    .card_wrap {
        flex-direction: column;
    }

    .card {
        margin-right: 0;
        margin-bottom: 1rem;
    }

    .card:last-child {
        margin-right: 0;
        margin-bottom: 0;
    }
}


/* 
=======================================================
Highly recommend
=======================================================
*/
/* Wrapping all of ranking components */
.highly_recommend {
    margin: 1rem auto;
}

.highly_recommend .wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 10px;
    padding: 1rem;
}

.highly_recommend .wrap .text {
    background-color: #f9f3e7;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    background-image:
        linear-gradient(to right, #8C602A 2px, transparent 2px),
        linear-gradient(to bottom, #8C602A 2px, transparent 2px),
        linear-gradient(to left, #8C602A 2px, transparent 2px),
        linear-gradient(to top, #8C602A 2px, transparent 2px);
    background-size: 10px 2px, 2px 10px, 10px 2px, 2px 10px;
    background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
    background-position: left top, right bottom, right bottom, left top;
}

.highly_recommend .static {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    margin: 2rem auto;
    margin-bottom: 0;
}

.highly_recommend .static img {
    box-sizing: border-box;
    padding: 0 1rem;
    width: 50%;
}

.highly_recommend .wrap .all_dog {
    height: 200px;
    object-fit: contain;
}


@media screen and (max-width: 480px) {
    .highly_recommend .static {
        margin-bottom: 1rem;
    }

    .highly_recommend .wrap .all_dog {
        height: auto;
        width: 100%;
    }
}

/* 
=======================================================
FLOAT MENU
=======================================================
*/
.float_menu {
    background: var(--em_space);
    position: fixed;
    z-index: 99998;
    bottom: 0;
    width: 100%;
    height: fit-content;
    min-height: 10vh;
    padding: 1rem 0;
}

.float_menu.test {
    display: block;
}

@media screen and (max-width: 480px) {
    .float_menu {
        height: 12vh;
        border-top: 2px solid var(--body_white);
        background-color: transparent;
        padding: 0;
    }
}

.float_menu .menu {
    width: 100%;
    height: 100%;
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
}

@media screen and (max-width: 480px) {
    .float_menu .menu {
        height: 100%;
        align-items: stretch;
        gap: 0;
    }
}

.float_menu_01 {
    width: 100%;
    height: 80px;
    text-align: center;
}

.float_menu_02 {
    width: 100%;
    height: 80px;
    text-align: center;
}

.float_menu_01 a,
.float_menu_02 a {
    max-height: 94.38px;
}

.spbr {
    display: none;
}

@keyframes poyoyon3 {

    0%,
    40% {
        transform: skew(0deg, 0deg);
    }

    5% {
        transform: skew(5deg, 5deg);
    }

    10% {
        transform: skew(-4deg, -4deg);
    }

    15% {
        transform: skew(3deg, 3deg);
    }

    20% {
        transform: skew(-2deg, -2deg);
    }

    25% {
        transform: skew(1deg, 1deg);
    }

    30% {
        transform: skew(-0.6deg, -0.6deg);
    }

    35% {
        transform: skew(0.3deg, 0.3deg);
    }
}

.float_img {
    animation: poyoyon3 4s infinite;
    opacity: 1;
}

.float_img img {
    width: 65%;
    margin: 0 auto;
}


@media screen and (max-width:1000px) {
    .float_font {
        font-size: 3vw;
    }

    .float_menu_01 {
        width: 60%;
        /* height: 100%; */
        text-align: center;
    }

    .float_menu_02 {
        width: 40%;
        /* height: 100%; */
        text-align: center;
    }
}


@media screen and (max-width: 480px) {
    .float_menu .menu li {
        margin: 0;
        border-right: 2px solid white;
    }

    .float_menu .menu li:last-child {
        border-right: none;
    }

    .float_font {
        font-size: 3.5vw;
    }

    .spbr {
        display: block;
    }
}

.float_menu .menu li a {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    color: var(--deco_space);
    font-size: 1.3rem;
    font-weight: bolder;
    background-color: var(--em_yellow);
    width: 100%;
    height: 100%;
    padding: 1rem 0;
    border-radius: 10px;
    transition: 0.3s;
}

.float_menu .menu li a p {
    color: #339be8;
}

.float_img {
    width: 60%;
}

@media screen and (max-width: 480px) {

    .float_menu .menu li a {
        padding: 0 0.2rem;
        border-radius: 0;
        font-size: 3.5vw;
        height: 100%;
        color: var(--em_space);
        background-color: var(--em_gold);
    }
}

@media (hover: hover) and (pointer: fine) {
    .float_menu .menu li a:hover {
        background-color: var(--deco_mint);
    }
}

/* 
=======================================================
FOOTER
=======================================================
*/
.footer {
    width: 100%;
    color: var(--body_lemon);
    background: var(--deco_space);
    text-align: center;
    padding-top: 2rem;
    font-weight: bolder;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    padding-bottom: 15vh;
}

@media screen and (max-width:480px) {
    .footer {
        margin: 0;
        padding-bottom: 10vh;
    }
}

.footer a {
    color: var(--body_lemon);
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}

.footer .menu {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

@media screen and (max-width:480px) {
    .footer .menu {
        margin: 0;
        padding: 0;
    }
}

.footer .menu li {
    margin: 0;
    padding: 0 0px;
}

@media screen and (max-width:480px) {
    .footer .menu li {
        width: calc(100% / 2);
        margin-bottom: 0.5rem;
    }
}

.footer .menu li::before {
    content: "｜";
    padding-right: 30px;
    padding-left: 30px;
    color: white;
    position: relative;
}

@media screen and (max-width:480px) {
    .footer .menu li::before {
        content: "";
        padding: 0;
    }
}

.footer .menu .after_line::after {
    content: "｜";
    padding: 0 30px 0;
}

@media screen and (max-width:480px) {
    .footer .menu .after_line ::after {
        content: "\A";
        padding: 0;
    }
}

.footer .copyright {
    margin: auto;
    padding: 1rem 0 2rem 0;
}

@media screen and (max-width:480px) {
    .footer .copyright {
        padding-top: 0;
    }
}

.footer_logo img {
    width: 10%;
    display: block;
    margin: 0 auto;
}

@media screen and (max-width:480px) {
    .footer_logo img {
        width: 60%;
        display: block;
        margin: 50px auto 0;
    }
}

/* 
=======================================================
プライバシーポリシー
=======================================================
*/

.privacy_title {
    text-align: center;
    margin: 20px auto;
}

.privacy_wrap {
    margin: 30px auto;
}

.privacy01 {
    margin: 15px auto;
}

.privacy01 ol {
    margin: 15px auto;
    list-style-type: decimal;
    /* 数字形式（1, 2, 3, ...） */
}

.privacy01 li {
    margin: 20px 0px 10px auto;
}

.privacy01 h2 {
    margin-bottom: 10px;
}

@media screen and (max-width:480px) {
    .privacy_wrap {
        margin: 30px 20px;
    }
}

/* 
=======================================================
ランキングの根拠
=======================================================
*/

.ranking_title {
    text-align: center;
    margin: 20px auto;
}

.ranking_wrap {
    margin: 30px auto;
}

.ranking_rate h1 {
    background-color: var(--deco_mint);
    color: white;
    text-align: center;
    padding: 5px;
    border: 1px solid gray;
    border-bottom: 0px;
}

.ranking_rate table {
    border: 1px solid gray;
    width: 100%;
    border-collapse: collapse;
    font-size: 20px;
    text-align: center;
}

.ranking_rate td {
    border: 1px solid gray;
    padding: 10px;
}

.ranking_evidence h1 {
    text-align: center;
    margin: 30px 0 0px 0;
    padding: 5px;
    border: 1px solid gray;
    border-bottom: 0;
    background-color: var(--deco_mint);
    color: white;
}

.ranking_evidence p {
    border: 1px solid gray;
    padding: 10px;
}

@media screen and (max-width:480px) {
    .ranking_wrap {
        margin: 10px 15px 0px 15px;

    }

    .ranking_rate table {
        font-size: 15px;
        vertical-align: middle;
    }

    .ranking_rate td {
        vertical-align: middle;
    }

    .ranking_evidence p {
        font-size: 15px;
        margin-bottom: 20px;
    }

}

/* 
=======================================================
運営者情報
=======================================================
*/

.company_title {
    text-align: center;
    margin: 20px auto;
}

.company_wrap {
    margin: 30px auto;
}

.company_info {
    display: flex;
    justify-content: center;
    margin: 40px auto;

}

.company_text {
    text-align: left;
}

@media screen and (max-width:480px) {
    .company_info {
        padding: 15px;
        font-size: 15px;
    }
}

/* 
=======================================================
reviews
=======================================================
*/

.reviews_looop {
    padding: 5rem 0;
    background-color: var(--deco_mint);
}

.reviews_looop_wrap {
    max-width: var(--width_pc);
    margin: 0 auto;
}

.review_looop_contents {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.review_item {
    display: flex;
    width: 100%;
    padding: 1rem;
}

.review_item:nth-child(2) {
    position: relative;
    flex-direction: row-reverse;
}

.review_item:nth-child(2) .review_container {
    position: relative;
    margin-left: 0;
    margin-right: 45px;
}

.review_container {
    width: 80%;
    margin-left: 45px;
    position: relative;
    display: inline-block;
    min-width: 120px;
    max-width: 100%;
    border-radius: 15px;
    padding: 1rem;
    border: solid 3px #555;
    background: #fff;
}

.review_container::before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    left: -24px;
    border: 12px solid transparent;
    border-right: 12px solid #FFF;
    z-index: 2;
}

.review_container::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    left: -30px;
    border: 14px solid transparent;
    border-right: 14px solid #555;
    z-index: 1;
}


.review_contaier--2 {
    position: relative;
}

.review_container--2::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    right: -17px;
    left: auto;
    border-left: 14px solid #555;
    border-right: none;
    z-index: 1;
}

.review_container--2::before {
    position: absolute;
    right: -12px;
    left: auto;
    display: inline-block;
    border-left: 12px solid #FFF;
    border-right: none;
    z-index: 2;
}

.name_img {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 130px;
}

.people_img {
    width: 100%;
}

.name_content {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #a7a7a7;
}

.name_content--02 {
    justify-content: end;
}

.line {
    display: block;
    height: 2px;
    width: 50px;
    background-color: #dcdcdc;
}

@media screen and (max-width:480px) {

    .reviews_looop {
        padding: 1.5rem 0;
    }

    .review_item {
        flex-direction: column;
        align-items: center;
        position: relative;
        margin-top: 3rem;
    }

    .review_container {
        margin-left: 0;
        margin-top: 10px;
        width: 100%;
        padding-top: 2rem;
    }

    .review_container::before {
        content: "";
        display: none;
        position: absolute;
        top: 50%;
        left: -24px;
        border: 12px solid transparent;
        border-right: 12px solid #FFF;
        z-index: 2;
    }

    .review_container::after {
        content: "";
        display: none;
        position: absolute;
        top: 50%;
        left: -30px;
        border: 14px solid transparent;
        border-right: 14px solid #555;
        z-index: 1;
    }

    .review_item:nth-child(2) {
        flex-direction: column;
    }

    .review_item:nth-child(2) .review_container {
        margin-left: 0;
        margin-right: 0px;
    }

    .name_img {
        position: absolute;
        width: 100px;
        z-index: 2;
        top: -40px;
    }

    .review_item:last-child {
        display: none;
    }

}

/* ポップアップの初期状態は非表示 */
#popup {
    display: none;
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    background-color: white;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
}

#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.popup_img img {
    width: 100%;
}

#popup p {
    text-align: center;
}

@media screen and (max-width:480px) {
    #popup {
        max-width: 300px;
        padding: 10px;
    }
}

/* 
=======================================================
resimulation
=======================================================
*/

.resimulation {
    padding: var(--padding_pc);
    padding-bottom: 0;
}

.resimulation_title {
    text-align: center;
    font-size: 1.5rem;
}

.resimulation table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    text-align: center;
    margin-top: var(--padding_pc);
}

.resimulation table th,
.resimulation table td {
    padding: var(--padding_sp) 0.2rem;
}

.resimulation table th {
    color: var(--em_space);
    background: var(--em_gold);
    border: 2px solid var(--em_space);
    border-bottom: none;
    vertical-align: middle;
}

.member {
    width: 150px;
}

.resimulation table td {
    border: 2px solid var(--em_space);
    vertical-align: middle;
    padding: var(--padding_sp) 0.1rem;
    border-bottom: none;
}

.resimulation table tr:last-child {
    border-bottom: 2px solid var(--em_space);
}

.happy,
.yellow {
    font-size: large;
}

@media screen and (max-width:480px) {
    .member {
        width: 35px;
    }

    .resimulation_title {
        text-align: center;
        font-size: 1.3rem;
    }

    .happy,
    .yellow {
        font-size: 1rem;
    }

}

.happy {
    position: relative;
    z-index: 1;
}

.happy::before {
    content: "";
    width: 100%;
    height: 50%;
    background: rgba(255, 255, 0, 0.6);
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
    -webkit-animation: blink 1s linear infinite;
    -moz-animation: blink 1s linear infinite;
    animation: blink 1s linear infinite;
}

.yellow {
    background-color: #FFFCEB;
}

.white {
    background-color: #fff;
}

.navigation-bar {
    width: 100%;
    background-color: #f9fafb;
    padding: 1rem;
}

.navigation-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.nav-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
}

.nav-item {
    flex: 1;
    min-width: 200px;
}

.form {
    width: 100%;
}

/* フォームのベースレイアウト */
.form .flex {
    display: flex;
}

.form .flex-col {
    flex-direction: column;
}

.form .flex-wrap {
    flex-wrap: wrap;
}

/* セレクトボックスのスタイル */
select {
    width: 100%;
    padding: 0.5rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    background-color: white;
    color: #4b5563;
    cursor: pointer;
    appearance: none;
    /* カスタムの矢印アイコン */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}

/* セレクトボックスのホバー・フォーカス */
select:hover {
    border-color: #d1d5db;
}

select:focus {
    outline: none;
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.max-w-6xl {
    display: flex;
    justify-content: space-between;
}


/* レスポンシブ調整 */
@media screen and (max-width: 640px) {
    .flex-1 {
        min-width: 100% !important;
    }

    .gap-3 {
        gap: 0.5rem;
    }

    .max-w-6xl {
        display: flex;
        flex-direction: column;
    }
}

/* IE11対応 */
@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
    select {
        background-image: none;
        padding-right: 1rem;
    }

    .shiny_button::before {
        display: none;
    }
}

/* ベースレイアウト */
.form {
    margin: 0 auto;
    padding: 20px;
}

.max-width {
    max-width: 1000px;
    margin: 0 auto;
}

/* グリッドレイアウト */
.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    width: 65%;
}

.submit_btn--a {
    width: 30%;
}

/* セレクトボックス */
.form-select {
    width: 100%;
    padding: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    background-color: white;
    appearance: none;
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.shy_button p {
    background: var(--em_yellow);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    padding: var(--box_padding_pc);
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
    color: var(--em_space);
    border-radius: 0.5rem;
    transition: 0.3s ease-in-out;
    overflow: hidden;
}

@media screen and (max-width:480px) {
    .grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
        width: 100%;
    }

    .submit_btn {
        width: 100%;
    }

    .shy_button {
        margin: 10px 0;
    }

    .shy_button p {
        background: var(--em_yellow);
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: fit-content;
        padding: var(--box_padding_pc);
        font-size: 1rem;
        font-weight: 600;
        text-align: center;
        color: var(--em_space);
        border-radius: 0.5rem;
        transition: 0.3s ease-in-out;
        overflow: hidden;
        margin: 0 auto;
    }
}

/* コンテナ */
.container_syumi {
    width: 100%;
    margin: 0 auto;
    padding: 60px;
    background: var(--body_lemon);
}

/* ヘッダー */
.header_syumi {
    margin-bottom: 24px;
}

.header_syumi h2 {
    color: #38B8B6;
    font: bold;
}

/* 最大節約額 */
.lowest_price {
    padding: var(--padding_pc);
}

.lowest_price_title {
    text-align: center;
    font-size: 1.5rem;
}

.lowest_price table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    text-align: center;
    margin-top: var(--padding_pc);
    margin-bottom: var(--padding_pc);
}

.lowest_price table th {
    background-color: var(--em_gold);
}

.lowest_price table td {
    background-color: #fff
}

.lowest_price table,
.lowest_price table th,
.lowest_price table td {
    border: solid 2px #000;
}

/* タブ */
.tabs {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 16px;
    gap: 8px;
    padding-bottom: 4px;
}

.tab-button {
    padding: 8px 16px;
    background-color: #e5e5e5;
    border: none;
    border-radius: 8px;
    color: #666;
    font-size: 0.875rem;
    white-space: nowrap;
    cursor: pointer;
}

.tab-button:hover {
    background-color: #d5d5d5;
}

.tab-button.active {
    background-color: var(--em_yellow);
    color: var(--deco_space);
    font-weight: bold;
}

/* 使用量情報 */
.usage-info {
    background-color: #f8f9fa;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 0.875rem;
}

/* 料金カード */
.price-cards {
    display: grid;
    gap: 16px;
}

.price-card {
    background: white;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e5e5;
}

.price-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.company-name {
    font-weight: 500;
}

.monthly-price {
    font-size: 1.125rem;
    font-weight: bold;
}

.price-details {
    font-size: 0.875rem;
}

.yearly-price {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.savings {
    text-align: right;
}

.savings.profit {
    color: #1a73e8;
    font-weight: bold;
}

.savings.loss {
    color: #dc3545;
    font-weight: bold;
}

/* タブコンテンツ */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* 注意書き */
.note {
    margin-top: 16px;
    font-size: 0.75rem;
    color: #666;
}

.img_rank {
    width: 60px;
    margin: 0 auto;
}

.shiny_button_syumi a {
    width: 100%;
    font-size: 1.25rem;
    padding: 0.5rem;
}

/* レスポンシブ対応 */
@media (max-width: 480px) {
    .container {
        padding: 16px;
    }

    .price-card {
        padding: 12px;
    }

    .container_syumi {
        width: 100%;
        margin: 0 auto;
        padding: 1rem;
        background: var(--body_lemon);
    }
}

.pink {
    color: #ff3ea6;
}