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

* {
    line-height: 1.5;
}

:root {
    /* カラー */
    --cta_robust: #A42E13;

    --main_maize: #ECE033;
    --main_moonstone: #409FB8;
    --main_paynesgray: #4A6D75;
    --main_gunmetal: #283032;

    --body_white: #FFFFFE;
    --body_maize: #FBF9DA;
    --body_moonstone: #E1F0F4;
    --body_paynesgray: #DAE6E7;
    --body_gunmetal: #DDE3E4;

    --deco_maize: #DCCF18;
    --deco_moonstone: #439AB1;
    --deco_paynesgray: #618E94;
    --deco_gunmetal: #6C8489;

    /* 余白 */
    --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;
    --margin_btw: 1.5rem;

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

    --box_padding_pc: 1.5rem 1rem;
    --box_padding_sp: 1rem 0.5rem;
    --box_marging_bottom_pc: 2rem;
    --box_marging_bottom_sp: 1rem;
    --box_marging_leftright: 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: "Noto Sans JP", 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) {
    h4 {
        font-size: 0.95rem;
    }
}


p,
a,
li,
dd,
dt {
    font-style: normal;
    font-size: 1rem;
    color: var(--main_gunmetal);
}

label {
    font-size: 1.1rem;
}

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

span {
    display: inline-block;
}

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

a {
    color: var(--main_moonstone);
    text-decoration: none;
}

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

summary {
    /* display: list-item;以外を指定してデフォルトの三角形アイコンを消します */
    display: block;
}

summary::-webkit-details-marker {
    /* Safariで表示されるデフォルトの三角形アイコンを消します */
    display: none;
}

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

.annotation,
.annotation_block p {
    font-size: xx-small;
    text-align: left;
}

.annotation_block {
    flex: 1;
    width: 100%;
}

.annotation_block_fv {
    padding: 0.5rem 1rem;
}


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

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

/*
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: smaller;
}

.small {
    font-size: small;
}

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

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

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

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

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

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

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

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

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

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

.body_gunmetal {
    color: var(--body_paynesgray);
}

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

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

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

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

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

.red {
    color: red;
}

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

.dotline {
    text-decoration: underline dotted;
}

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

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

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

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

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

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

.highlight_white_50 {
    display: inline;
    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 {
    display: inline;
    margin: 0 auto;
    width: fit-content;
    background: linear-gradient(transparent 10%, rgba(255, 255, 255, 0.6) 10% 90%, transparent 90%);
}

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

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

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

.highlight_blue_100 {
    display: inline;
    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;
}

.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 dokidoki {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }

    60% {
        transform: scale(1);
    }

    100% {
        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(-0.5rem);
    }

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

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

    50% {
        transform: translateY(-0.5rem);
    }

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

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

    50% {
        transform: translateY(-0.5rem);
    }

    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,
.intro_wrap,
.warning_wrap,
.form_wrap,
.recommend_wrap,
.points_wrap,
.diff_wrap,
.mech_wrap,
.procon_wrap,
.caution_wrap,
.compare_table_wrap,
.rank_wrap,
.cta,
.float_menu .menu,
.result,
.company_wrap,
.ranking_wrap,
.other_wrap,
.evidence_wrap,
.privacy_wrap {
    max-width: var(--width_pc);
    margin: 0 auto;
}

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

    .points_check,
    .comment_wrap,
    .intro_wrap,
    .form_wrap,
    .warning_wrap,
    .points_wrap,
    .diff_wrap,
    .mech_wrap,
    .procon_wrap,
    .caution_wrap,
    .compare_table_wrap,
    .rank_wrap,
    .result {
        margin: 1rem;
    }
}

/* 
FORM 見出し
-------------------------------------------------------
*/
.form h1,
.warning h1,
.points h1,
.diff h1,
.mech h1,
.caution h1,
.procon h1,
.compare_table h1,
.rank h1 {
    width: 100%;
    max-width: var(--width_pc);
    margin: 0 auto;
    margin-bottom: var(--title_bottom_pc);
}

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

    .form h1,
    .warning h1,
    .points h1,
    .diff h1,
    .mech h1,
    .caution h1,
    .procon h1,
    .compare_table h1,
    .rank h1 {
        max-width: 100%;
        /* margin-bottom: var(--title_bottom_sp); */
        margin-bottom: 0;
    }
}

.form h1 img,
.warning h1 img,
.points h1 img,
.diff h1 img,
.mech h1 img,
.caution h1 img,
.procon h1 img,
.other h2 img,
.compare_table h1 img,
.rank h1 img {
    object-fit: contain;
    width: 100%;
}

/* 
=======================================================
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;
    width: 100%;
}

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

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

    .shiny_button p,
    .shiny_button a {
        margin-top: 0;
        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;
    margin-left: 1rem;
}

/* 
枠線が動いてホバー時に光るボタン
=======================================================
*/
.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(--main_moonstone);
}

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

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

/* 
段差あり四角ボタン
=======================================================
*/
.step_button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 1rem 0;
    background: var(--main_maize);
    border-radius: var(--box_radius);
    border-bottom: solid 5px var(--deco_maize);
    animation: dokidoki 2s ease-in-out infinite;
}


.step_button a {
    width: 70%;
    text-align: center;
    margin: 0 auto;
    color: var(--main_gunmetal);
    transition: 0.3s ease-in-out;
    font-size: xx-large;
    font-weight: 600;
}

@media screen and (max-width: 480px) {
    .step_button a {
        font-size: larger;
        margin: var(--padding_sp);
    }
}

.step_button img {
    width: 60px;
    height: 60px;
    margin: 0 1rem;
    animation: fuwafuwa_sideway 1s infinite;
}

@media screen and (max-width: 480px) {
    .step_button a::after {
        width: 30px;
        height: 30px;
        margin-left: 1rem;
        background-size: 30px;
    }
}

.step_button:active {
    border-bottom: solid 2px var(--deco_maize);
    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;
    }
}

/* 
予約ボタン
=======================================================
*/
.book_button a {
    border-radius: var(--width_pc);
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;

    width: 100%;
    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, #2a93d5, #aed9da, #3ddad7);
    /*グラデーションを定義*/
    background-size: 200% 200%;
    /*サイズを大きくひきのばす*/
    animation: bggradient 6s ease infinite;
}

.book_button a:hover,
.book_button a:active {
    background: linear-gradient(45deg, #3bade3, #9844b7, #44ea76);
}

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

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

/* 
背景色スライドボタン
=======================================================
*/
.slide_button {
    display: block;

    border: 2px solid var(--body_lemon);
    border-radius: 60px;

    width: 70%;
    margin: 0 auto;
    padding: 2rem 3rem;
    padding-right: 5rem;

    text-align: center;
    font-size: 1.8rem;
    font-weight: bolder;
    color: var(--body_lemon);

    overflow: hidden;
    position: relative;

    background: var(--main_gunmetal);
    background-image:
        url(../img/fv/supplement_body_lemon.webp),
        url(../img/fv/right_arrow_body_lemon.webp);
    background-size: 48px, 24px;
    background-repeat: no-repeat;
    background-position:
        left 2rem bottom 50%,
        right 2rem bottom 50%;
    /* animation: fuwafuwa_sideway 2s infinite ease-in-out; */
    animation: heartbeat 2s infinite;
    z-index: 1;
}

@media screen and (max-width: 480px) {
    .slide_button {
        width: 100%;
        padding: 1rem;
        padding-right: 2rem;
        font-size: 1.3rem;
        background-image:
            url(../img/fv/right_arrow_body_lemon.webp);
        background-size: 12px;
        background-repeat: no-repeat;
        background-position:
            right 1rem bottom 50%;
    }
}

.slide_button::after {
    border: 4px solid var(--main_gunmetal);
    border-radius: 60px;

    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;

    transform: scale(0, 1);
    transform-origin: left top;
    transition: .2s cubic-bezier(0.45, 0, 0.55, 1);

    background: var(--body_lemon);
    background-image:
        url(../img/fv/supplement_deeporange.webp),
        url(../img/fv/right_arrow_deeporange.webp);
    background-size: 48px, 24px;
    background-repeat: no-repeat;
    background-position:
        left 2rem bottom 50%,
        right 2rem bottom 50%;

    z-index: -1;
}

@media screen and (max-width: 480px) {
    .slide_button::after {
        width: 100%;
        padding: 1rem;
        padding-right: 2rem;
        font-size: 1.3rem;
        background-image:
            url(../img/fv/right_arrow_deeporange.webp);
        background-size: 12px;
        background-repeat: no-repeat;
        background-position:
            right 1rem bottom 50%;
    }
}

.slide_button:hover,
.slide_button:active {
    color: var(--main_gunmetal);
}

.slide_button:hover::after,
.slide_button:active::after {
    transform: scale(1, 1);
}

/* 
=======================================================
HEADER
=======================================================
FV
=======================================================
*/
header {
    height: 100vh;
    margin: 0;
    background: linear-gradient(180deg,
            rgba(201, 216, 203, 1) 10%,
            rgba(66, 159, 184, 1) 100%);
    padding-bottom: var(--section_updown_sp);
}

@media screen and (max-width: 480px) {
    header {
        height: 90vh;
    }
}

header .header_wrap {
    height: 100%;
    background-image: url(../img/background/bg_pc.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

@media screen and (max-width: 480px) {
    header .header_wrap {
        background-image: url(../img/background/bg_sp.png);
        background-size: contain;
        background-position: top;
    }
}

header .fv {
    height: 100%;
}

header .fv img {
    object-fit: contain;
    margin: 0 auto;
    height: 60%;
}

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

header .fv .cta {
    width: 100%;
    padding: 0 1rem;
}

header .note {
    padding: var(--padding_pc);
    color: #fff;
}

/* 
=======================================================
INTRO
=======================================================
INTRO全体にかかる設定
-------------------------------------------------------
*/
section.intro {
    padding-top: 8.5rem;
    padding-bottom: var(--section_updown_pc);
    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;
}

@media screen and (max-width: 480px) {
    section.intro {
        padding-top: 5rem;
        padding-bottom: var(--section_updown_sp);
    }
}

section.intro .intro_wrap {
    position: relative;
    padding: var(--padding_pc);
    background-color: var(--body_moonstone);
    border: solid 0.2rem var(--deco_moonstone);
}

section.intro .intro_wrap h1 {
    position: relative;
    position: absolute;
    display: inline-block;
    left: -2.035rem;
    padding: var(--padding_pc);
    background: var(--main_moonstone);
    color: var(--body_white);
    font-size: 1.5rem;
    font-weight: bold;
}

@media screen and (max-width: 480px) {
    section.intro .intro_wrap h1 {
        font-size: 1.1rem;
        left: -1.2rem;
    }
}

section.intro .intro_wrap h1::before {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border: none;
    border-bottom: solid 1rem transparent;
    border-right: solid 1.875rem rgb(149, 158, 155);
}

@media screen and (max-width: 480px) {
    section.intro .intro_wrap h1::before {
        border-bottom: solid 0.8rem transparent;
        border-right: solid 1.2rem rgb(149, 158, 155);
    }
}

/* 
=======================================================
recommend
=======================================================
recommendにかかる設定
-------------------------------------------------------
*/
.recommend {
    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;
}

.recommend_wrap {
    padding-top: var(--section_updown_pc);
}

.recommend_comment--sp {
    display: none;
}

.spBr {
    display: none;
}

.triangle {
    width: 66px;
    margin: 10px auto 0;
}

.triangle-bottom {
    display: inline-block;
    border-style: solid;
    border-width: 57.6px 33.6px 0 33.6px;
    border-color: var(--main_maize) transparent transparent transparent;
}

/* 回転するアニメーション */
@keyframes fuwafuwa {

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

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

/* このクラスをつけると回転を無限に繰り返します */
.anime-fuwafuwa {
    animation: 2s fuwafuwa infinite;
}

.recommend_list {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    align-items: flex-end;
}

.recommend_item {
    width: 50%;
    border: var(--main_maize) solid 2px;
}

.recommend_item {
    height: 100%;
}

.recommend_item--pmg {
    order: 1;
}

.recommend_item--accel {
    order: 3;
    margin-top: 9%;
}

.recommend_item--ququmo {
    margin-top: 9%;
}



.recommend_rank {
    background-image: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);
}

.recommend_rank--no2 {
    background-image: linear-gradient(45deg, #757575 0%, #9E9E9E 45%, #E8E8E8 70%, #9E9E9E 85%, #757575 90% 100%);
}

.recommend_rank--no3 {
    background-image: url(../img/asset/ranking/left_no3.webp), 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;
}

.recommend_img {
    display: block;
    margin: 0 auto;
    width: 80px;
}

.no1--recommend,
.no2--recommend {
    width: 50%;
    margin: 0 auto;
}

.no3--recommend {
    width: 40%;
    margin: 0 auto;
}

.no1--recommend img,
.no2--recommend img,
.no3--recommend img {
    width: 100%;
    object-fit: contain;
    max-height: 3.5rem;
}


.product_img--recommend img {
    width: 100%;
    object-fit: cover;
}

.top--recommend {
    margin: 0 auto;
}

.header--recommend {
    background-color: #fff;
    padding-bottom: 30px;
}

.product_detail--recommend {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.shiny_button--recommend {
    width: 90%;
    margin: 0 auto;
}

.shiny_button .redirect--recommend {
    font-size: 1.3rem;
}

.header--recommend--01 {
    padding-bottom: 0;
}

@media screen and (max-width: 480px) {
    .header--recommend {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .recommend_wrap {
        padding-top: var(--section_updown_sp);
        margin: 0 1rem;
    }

    .recommend_comment--sp {
        display: block;
    }

    .recommend_comment--pc {
        display: none;
    }

    .recommend_list {
        flex-direction: column;
    }

    .recommend_item {
        width: 100%;
    }

    .recommend_item--pmg {
        order: 1;
    }

    .recommend_item--accel {
        order: 3;
        margin-top: 0;
    }

    .recommend_item--ququmo {
        order: 2;
    }

    .spBr {
        display: block;
    }

    .no1--recommend,
    .no2--recommend {
        width: 40%;
        margin: 0 auto;
    }

    .recommend_img {
        display: block;
        margin: 0 auto;
        width: 40px;
    }

    .triangle {
        width: 44px;
        margin-top: 5px;
    }


    .triangle-bottom {
        display: inline-block;
        border-style: solid;
        border-width: 38.4px 22.4px 0 22.4px;
        border-color: var(--main_maize) transparent transparent transparent;
    }

    .recommend_list {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 1rem;
    }


    .recommend_item:nth-child(2) {
        margin-top: 0;
    }

    .top {
        display: flex;
        justify-content: center;
        gap: 5%;
        margin-bottom: 10px;
    }

    .product_img--recommend {
        width: 55%;
    }

    .product_detail--recommend {
        align-items: baseline;
    }
}

/* 
=======================================================
FORM
=======================================================
FORM全体にかかる設定
-------------------------------------------------------
*/
.form {
    padding: var(--section_updown_pc) 0;
    background-color: var(--body_maize);
    /* background: linear-gradient(180deg,
            rgba(255, 255, 255, 1) 0%,
            rgba(249, 246, 200, 1) 100%); */
}

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

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

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

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

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

@media screen and (max-width: 480px) {
    .form .question {
        margin-top: 0.5rem;
        margin-bottom: var(--padding_sp);
    }
}

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


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

@media screen and (max-width: 480px) {
    .form .options {
        width: calc((100% / 2) - 0.25rem);
        padding: var(--padding_sp);
        margin-right: var(--padding_sp);
        margin-bottom: 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;
    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(--deco_gunmetal);
    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: 20%;
    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(--main_paynesgray);
    background: var(--body_moonstone);
}

/* 
選択肢のラジオボタン
-------------------------------------------------------
*/
.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(--deco_gunmetal);
    border-radius: 50%;
    content: '';
    display: block;
    height: 1.3rem;
    width: 1.3rem;
    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(--main_gunmetal);
    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(--body_maize);
}

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

/* 
SUBMIT BUTTON
-------------------------------------------------------
*/
.submit_btn {
    width: 100%;
}

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

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

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

/* 
mech 説明文書
-------------------------------------------------------
*/
.warning_wrap .intro {
    width: 100%;
    background: var(--body_white);
    padding: var(--padding_pc);
    margin-bottom: var(--box_marging_bottom_pc);
    border-radius: var(--box_radius);
}

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

.warning_wrap .intro ul {
    background: var(--body_gunmetal);
    padding: var(--box_padding_pc);
    margin: var(--margin_bottom_pc) 0;
}

@media screen and (max-width: 480px) {
    .warning_wrap .intro ul {
        margin: var(--margin_bottom_sp) 0;
        padding: var(--box_padding_sp);
    }
}

.warning_wrap .intro ul li {
    width: fit-content;
    position: relative;
    margin-left: var(--padding_pc);
    padding-bottom: 0.2rem;
    border-bottom: 0.15rem dotted var(--main_gunmetal);
    list-style-type: none !important;
}

.warning_wrap .intro ul li:last-child {
    margin-bottom: 0;
}

.warning_wrap .intro ul>li::before {
    position: absolute;
    content: "✕";
    left: -1.5rem;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    color: red;
    text-align: center;
    border-radius: 100%;
    box-sizing: border-box;
    font-weight: bold;
}

@media screen and (max-width: 480px) {
    .warning_wrap .intro ul>li::before {
        left: -1rem;
    }
}

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

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

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

/* 
points 3つのポイント
-------------------------------------------------------
*/
.points .points_schema {
    display: flex;
    width: 100%;
    gap: var(--padding_pc);
    margin-bottom: var(--box_marging_bottom_pc);
}

@media screen and (max-width: 480px) {
    .points .points_schema {
        gap: var(--padding_sp);
    }
}

.points .points_schema .point_rect {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    aspect-ratio: 1/1;
    color: var(--body_white);
    border: 0.2rem solid var(--main_gunmetal);
    background-color: var(--main_moonstone);
}

@media screen and (max-width: 480px) {
    .points .points_schema .point_rect {
        border: none;
    }
}


.points .points_schema .point_rect.point1,
.points .points_schema .point_rect.point2,
.points .points_schema .point_rect.point3 {
    position: relative;
}

.points .points_schema .point_rect.point1::before,
.points .points_schema .point_rect.point2::before,
.points .points_schema .point_rect.point3::before {
    position: absolute;
    content: "";
    width: 90%;
    height: 90%;
    background: var(--main_moonstone);
    border: dashed 0.15rem var(--main_gunmetal);
}

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

    .points .points_schema .point_rect.point1::before,
    .points .points_schema .point_rect.point2::before,
    .points .points_schema .point_rect.point3::before {
        border: dashed 0.1rem var(--main_gunmetal);
    }
}


.points .points_schema .point_rect.point1::after,
.points .points_schema .point_rect.point2::after,
.points .points_schema .point_rect.point3::after {
    position: absolute;
    content: "";
    width: 70%;
    height: 30%;
    top: -1.2rem;
    left: -0.2rem;
}

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

    .points .points_schema .point_rect.point1::after,
    .points .points_schema .point_rect.point2::after,
    .points .points_schema .point_rect.point3::after {
        left: -0.25rem;
    }
}


.points .points_schema .point_rect.point1::after {
    background-image: url(../img/points/1.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.points .points_schema .point_rect.point2::after {
    background-image: url(../img/points/2.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.points .points_schema .point_rect.point3::after {
    background-image: url(../img/points/3.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.points .points_schema .point_rect p {
    text-align: center;
    color: var(--body_white);
    font-weight: 600;
    margin-top: 0.3rem;
    z-index: 1;
    font-size: xx-large;
    margin: var(--padding_pc);
}

@media screen and (max-width: 480px) {
    .points .points_schema .point_rect p {
        margin: 0;
        font-size: 1rem;
    }

}

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

.points .points_details {
    display: flex;
    flex-direction: column;
    gap: var(--box_marging_bottom_pc);
    width: 100%;
}

@media screen and (max-width: 480px) {
    .points .points_details {
        gap: var(--margin_btw);
    }
}

.points .points_details .detail {
    background-color: var(--body_white);
    border-radius: var(--box_radius)
}


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

.points .points_details .detail .title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: fit-content;
}

.points .points_details .detail.point1 .title h2,
.points .points_details .detail.point2 .title h2,
.points .points_details .detail.point3 .title h2 {
    position: relative;
    padding: var(--padding_sp) 0;
    padding-left: 3rem;
    color: var(--main_gunmetal);
    border-bottom: solid 2px var(--main_moonstone);
}

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


    .points .points_details .detail.point1 .title h2,
    .points .points_details .detail.point2 .title h2,
    .points .points_details .detail.point3 .title h2 {
        padding-left: 2rem;
    }

}

.points .points_details .title {
    position: relative;
}

.points .points_details .title::before,
.points .points_details .title::after {
    position: absolute;
    content: "";
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.points .points_details .title::before {
    width: 4rem;
    height: 4rem;
    top: 0;
    left: -1rem;
}

@media screen and (max-width: 480px) {
    .points .points_details .title::before {
        width: 3rem;
        height: 3rem;
    }
}

.points .points_details .detail.point1 .title::before {
    background-image: url(../img/points/01.png);
}

.points .points_details .detail.point2 .title::before {
    background-image: url(../img/points/02.png);
}

.points .points_details .detail.point3 .title::before {
    background-image: url(../img/points/03.png);
}

/* 開いてるときに表示される */
.points_details details[open] .title::after {
    width: 3rem;
    height: 1.8rem;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    background-image: url(../img/points/close.png);
}

/* 閉じてるときに表示される */
.points_details summary::after {
    width: 4rem;
    height: 3rem;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    background-image: url(../img/points/summary.png);

}

.points .points_details .detail .content {
    background-color: var(--body_white);
    padding: var(--padding_pc);
}

@media screen and (max-width: 480px) {
    .points .points_details .detail .content {
        padding: var(--padding_sp) 1rem;
    }
}

.points .points_details .detail .content ul {
    counter-reset: li;
    margin: var(--padding_sp) 0;
    background: var(--body_paynesgray);
    border-radius: var(--box_radius);
    list-style-type: none !important;
}

.points .points_details .detail .content ul li {
    position: relative;
    padding: var(--padding_pc) 0 var(--padding_pc) 3.5rem;
    border-bottom: 0.2rem solid var(--body_white);
    font-weight: bold;
}

.points .points_details .detail .content ul li:last-child {
    border-bottom-left-radius: var(--box_radius);
    border-bottom-right-radius: var(--box_radius);
}


@media screen and (max-width: 480px) {
    .points .points_details .detail .content ul li {
        padding: var(--padding_sp) 0 var(--padding_sp) 2.5rem;
    }
}

.points .points_details .detail .content ul>li::before {
    position: absolute;
    counter-increment: li;
    content: counter(li) "";
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    color: var(--body_white);
    width: 2.5rem;
    height: 2.5rem;
    text-align: center;
    border-radius: 100%;
    box-sizing: border-box;
    font-weight: bold;
    line-height: 2.5rem;
    background: var(--deco_gunmetal);
    margin-left: var(--padding_sp);
}

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

    .points .points_details .detail .content ul>li::before {
        width: 1.5rem;
        height: 1.5rem;
        line-height: 1.5rem;
    }

}

/* 
points 説明文書
-------------------------------------------------------
*/
.points_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) {
    .points_wrap .intro {
        padding: 1rem;
        margin-bottom: 1rem;
    }
}

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

/* 
points それぞれのitem
-------------------------------------------------------
*/
.points_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(--main_gunmetal) solid 2px;
    border-radius: 10px;
    overflow: hidden;
}

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

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

/* 
points item 項目名
-------------------------------------------------------
*/
.points_wrap .diagrams .item .title {
    color: #fff;
    background-color: var(--main_gunmetal);
    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) {
    .points_wrap .diagrams .item .title {
        font-size: 1rem;
    }
}

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

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

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

.points_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) {
    .points_wrap .diagrams .item .fact {
        font-size: 0.8rem;
        padding: 0 0.5rem;
        margin-bottom: 0.5rem;
        text-align: left;
    }
}

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

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

/* 
diff レイアウト
-------------------------------------------------------
*/
.diff .diff_wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.diff_wrap {
    display: flex;
    flex-direction: column;
    gap: var(--padding_pc);
}

/* 
diff 画像
-------------------------------------------------------
*/
.diff_wrap .diagram {
    padding: var(--padding_pc);
    background: var(--body_white);
    border-radius: var(--box_radius);
    width: 100%;
}

.diff_wrap .diagram img {
    width: 100%;
    margin: 0 auto;
}

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

/* 
diff 取引説明
-------------------------------------------------------
*/
.diff_wrap .transaction {
    display: flex;
    flex-direction: column;
    gap: var(--padding_sp);
}

.diff_wrap .transaction .two,
.diff_wrap .transaction .three {
    display: flex;
    flex-direction: column;
    gap: var(--padding_sp);
    padding: var(--padding_pc);
    border-radius: var(--box_radius);
}

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

    .diff_wrap .transaction .two,
    .diff_wrap .transaction .three {
        padding: var(--padding_sp);

    }
}

.diff_wrap .transaction .two {
    background-color: var(--main_moonstone);
}

.diff_wrap .transaction .three {
    background-color: var(--main_paynesgray);
}

.diff_wrap .transaction .two .title,
.diff_wrap .transaction .three .title {
    position: relative;
    font-weight: bold;
}

.diff_wrap .transaction .two .title::after,
.diff_wrap .transaction .three .title::after {
    position: absolute;
    content: "";
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 開いてるときに表示される */
.diff_wrap .transaction .two details[open] .title::after,
.diff_wrap .transaction .three details[open] .title::after {
    width: 3rem;
    height: 1.8rem;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.diff_wrap .transaction .two details[open] .title::after {
    background-image: url(../img/diff/close_2.png);
}

.diff_wrap .transaction .three details[open] .title::after {
    background-image: url(../img/diff/close_3.png);
}

/* 閉じてるときに表示される */
.diff_wrap .transaction .two summary::after,
.diff_wrap .transaction .three summary::after {
    width: 4rem;
    height: 3rem;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

/* 閉じてるときに表示される */
.diff_wrap .transaction .two summary::after {
    background-image: url(../img/diff/summary_2.png);
}

/* 閉じてるときに表示される */
.diff_wrap .transaction .three summary::after {
    background-image: url(../img/diff/summary_3.png);
}

.diff_wrap .transaction .two h2 img,
.diff_wrap .transaction .three h2 img {
    height: 2.5rem;
    margin: 0 auto;
}

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

    .diff_wrap .transaction .two h2 img,
    .diff_wrap .transaction .three h2 img {
        height: 2rem;
    }

}

.diff_wrap .transaction .explain {
    padding: var(--padding_pc);
    background-color: var(--body_white);
    border-top-left-radius: var(--box_radius);
    border-top-right-radius: var(--box_radius);
}

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

    .diff_wrap .transaction .explain {
        padding: var(--padding_sp);
    }
}

.diff_wrap .transaction .explain .content {
    padding: var(--padding_pc) 0;
}

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

    .diff_wrap .transaction .explain .content {
        padding: var(--padding_sp);
    }
}


.diff_wrap .transaction .two h3,
.diff_wrap .transaction .three h3 {
    width: fit-content;
    text-align: center;
    margin: 0 auto;
    color: var(--main_gunmetal);
    padding: var(--padding_sp);
    background-color: var(--body_maize);
    border-top: 0.2rem double var(--main_moonstone);
    border-bottom: 0.2rem double var(--main_moonstone);
}

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

    .diff_wrap .transaction .two h3,
    .diff_wrap .transaction .three h3 {
        width: 100%;
        padding: 0.25rem;
    }

}

.diff_wrap .transaction .compare_transaction {
    display: flex;
    width: 100%;
    gap: var(--padding_sp);
}

.diff_wrap .transaction .compare_transaction .merit,
.diff_wrap .transaction .compare_transaction .demerit {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 50%;
    background-color: var(--body_white);
}

.diff_wrap .transaction .compare_transaction .merit {
    border-bottom-left-radius: var(--box_radius);
}

.diff_wrap .transaction .compare_transaction .demerit {
    border-bottom-right-radius: var(--box_radius);
}

.diff_wrap .transaction .two h4,
.diff_wrap .transaction .three h4 {
    padding: var(--padding_sp);
    width: 100%;
    text-align: center;
}

.diff_wrap .transaction .two .merit h4,
.diff_wrap .transaction .three .merit h4 {
    background: var(--main_maize);
}

.diff_wrap .transaction .two .demerit h4,
.diff_wrap .transaction .three .demerit h4 {
    color: var(--body_white);
    background: var(--deco_gunmetal);
}

.diff_wrap .transaction .compare_transaction ul {
    width: 100%;
    padding: var(--padding_pc);
}

@media screen and (max-width: 480px) {
    .diff_wrap .transaction .compare_transaction ul {
        padding: var(--padding_sp);
    }
}

.diff_wrap .transaction .compare_transaction ul li {
    position: relative;
    padding-left: var(--padding_pc);
    border-bottom: 0.2rem solid var(--body_white);
    list-style-type: none !important;
}

@media screen and (max-width: 480px) {
    .diff_wrap .transaction .compare_transaction ul li {
        padding-left: var(--padding_sp);
    }
}

.diff_wrap .transaction .compare_transaction ul>li::before {
    position: absolute;
    content: "";
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    text-align: center;
    border-radius: 100%;
    box-sizing: border-box;
    font-weight: bold;
}

@media screen and (max-width: 480px) {
    .diff_wrap .transaction .compare_transaction ul>li::before {
        left: -0.25rem;
    }
}

.diff_wrap .transaction .compare_transaction .merit ul>li::before {
    content: "+";
    color: var(--deco_maize);
}

.diff_wrap .transaction .compare_transaction .demerit ul>li::before {
    content: "-";
    color: var(--deco_gunmetal);
}


.compare_title {
    text-align: center;
    color: #44656e;
    font-weight: bold;
    margin-bottom: 0.8rem;
}

/* 
diff 豆知識
-------------------------------------------------------
*/
.diff_wrap .trivia {
    position: relative;
    width: 100%;
    background: var(--body_maize);
    padding: var(--box_padding_pc);
    margin-top: var(--box_marging_bottom_pc);
    border: 0.2rem solid var(--main_maize);
    border-radius: var(--box_radius);
}

@media screen and (max-width: 480px) {
    .diff_wrap .trivia {
        margin-top: var(--box_marging_bottom_sp);
        padding: var(--box_padding_sp);
    }
}

.diff_wrap .trivia .trivia_title {
    position: relative;
    position: absolute;
    top: -0.55rem;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: fit-content;
    color: var(--body_white);
    background: var(--main_maize);
    padding: var(--padding_sp) var(--section_updown_sp);
    border-radius: 300px;
}

.diff_wrap .trivia .trivia_title::before {
    content: "";
    position: absolute;
    width: 60px;
    height: 60px;
    top: -25%;
    left: 85%;
    background-image: url(../img/diff/light_bulb.png);
    background-size: contain;
    background-repeat: no-repeat;
    transform: rotate(20deg);
}

@media screen and (max-width: 480px) {
    .diff_wrap .trivia .trivia_title::before {
        width: 40px;
        height: 40px;
        top: -15%;
        left: 75%;
    }
}


/* 
=======================================================
MECHANISM
=======================================================
mech 背景部分の設定
-------------------------------------------------------
*/
.mech {
    background: var(--body_white);
    padding: var(--section_updown_pc) 0;
}

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

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

/* 
mech 説明文書
-------------------------------------------------------
*/
.mech_wrap .intro {
    width: 100%;
    background-color: rgba(232, 236, 237, 0.7);
    background-blend-mode: lighten;
    padding: var(--padding_pc);
    border-top-left-radius: var(--box_radius);
    border-top-right-radius: var(--box_radius);
}

.mech_wrap .structure {
    display: flex;
    gap: var(--padding_sp);
    padding: var(--padding_pc);
    background-color: var(--body_gunmetal);
    border-bottom-left-radius: var(--box_radius);
    border-bottom-right-radius: var(--box_radius);
}

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

.mech_wrap .structure .before,
.mech_wrap .structure .after {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.mech_wrap .structure h2 {
    padding: var(--padding_pc);
    width: 100%;
    text-align: center;
    color: var(--body_white);
    background-color: var(--deco_gunmetal);
    border-top-left-radius: var(--box_radius);
    border-top-right-radius: var(--box_radius);
}

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

.mech_wrap .structure .content {
    flex: 1;
    padding: var(--padding_pc);
    background: var(--body_white);
    border-bottom-left-radius: var(--box_radius);
    border-bottom-right-radius: var(--box_radius);
}

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

.mech_wrap dl {
    margin: var(--box_padding_pc);
    background: var(--body_white);
    /* font-family: Georgia, "Times New Roman", Times, serif; */
}

@media screen and (max-width: 480px) {
    .mech_wrap dl {
        margin: var(--padding_sp) 0;
    }
}

.mech_wrap dt {
    margin: 0;
    padding: var(--padding_sp);
    background-color: #e0e0e0;
}

.mech_wrap dd {
    padding: var(--padding_sp);
    border: 0.1rem solid var(--body_gunmetal);
}

/* 
=======================================================
PROCON
=======================================================
procon背景部分の設定
-------------------------------------------------------
*/
.procon {
    background: var(--body_maize);
    padding: var(--section_updown_pc) 0;
}

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

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

/* 
procon 説明文書
-------------------------------------------------------
*/
.procon_wrap .intro {
    width: 100%;
    background: var(--body_white);
    padding: var(--padding_pc);
    margin-bottom: var(--box_marging_bottom_pc);
    border-radius: var(--box_radius);
}

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

.procon_wrap .compare {
    display: flex;
    gap: var(--padding_sp);
}

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

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

.procon_wrap .compare .item.merit {
    border: 0.2rem solid var(--main_moonstone);
}

.procon_wrap .compare .item.demerit {
    border: 0.2rem solid var(--main_paynesgray);
}

.procon_wrap .compare .item h2 {
    padding: var(--padding_pc);
    width: 100%;
    text-align: center;
    color: var(--body_white);
}

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

.procon_wrap .compare .item.merit h2 {
    background: var(--main_moonstone);
}

.procon_wrap .compare .item.demerit h2 {
    background: var(--main_paynesgray);
}

.procon_wrap .compare .item ul {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    background: var(--body_white);
    padding: var(--padding_pc);
}

@media screen and (max-width: 480px) {
    .procon_wrap .compare .item ul {
        padding: var(--padding_sp);
    }
}

.procon_wrap .compare .item ul li {
    position: relative;
    padding-left: var(--padding_pc);
    border-bottom: 0.2rem solid var(--body_white);
    list-style-type: none !important;
}

@media screen and (max-width: 480px) {
    .procon_wrap .compare .item ul li {
        padding-left: var(--padding_sp);
    }
}

.procon_wrap .compare .item ul li:last-child {
    margin-bottom: 0;
}

.procon_wrap .compare .item ul>li::before {
    position: absolute;
    content: "";
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    text-align: center;
    border-radius: 100%;
    box-sizing: border-box;
}

@media screen and (max-width: 480px) {
    .procon_wrap .compare .item ul>li::before {
        left: -0.25rem;
    }
}

.procon_wrap .compare .item.merit ul>li::before {
    content: "+";
    color: var(--main_maize);
}

.procon_wrap .compare .item.demerit ul>li::before {
    content: "-";
    color: var(--deco_paynesgray);
}

.procon_wrap .compare .item .comment {
    display: flex;
    padding: var(--padding_pc);
}

@media screen and (max-width: 480px) {
    .procon_wrap .compare .item .comment {
        padding: var(--padding_sp) 1rem;
    }
}

.procon_wrap .compare .item.merit .comment {
    background: var(--body_moonstone);
}

.procon_wrap .compare .item.demerit .comment {
    background: var(--body_paynesgray);
}

/* 
=======================================================
CAUTION
=======================================================
caution 背景部分の設定
-------------------------------------------------------
*/
.caution {
    background: var(--body_white);
    padding: var(--section_updown_pc) 0;
}

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

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

.caution .caution_details {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--padding_pc);
    background: var(--body_maize);
    padding: var(--box_padding_pc);
    margin-top: var(--box_marging_bottom_pc);
}

@media screen and (max-width: 480px) {
    .caution .caution_details {
        gap: var(--padding_sp);
        padding: var(--box_padding_sp);
        margin-top: var(--box_marging_bottom_sp);
    }
}

.caution_details .detail {
    background: var(--body_white);
    border-radius: var(--box_radius);
}

.caution_details .title {
    position: relative;
    display: flex;
    padding: var(--title_bottom_sp);
    background: var(--main_maize);
    border-bottom: 0.15rem solid var(--main_maize);
    border-top-left-radius: var(--box_radius);
    border-top-right-radius: var(--box_radius);
}

.caution_details .title h2 {
    padding-left: 3rem;
}

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

    .caution_details .title h2 {
        padding-left: 2rem;
    }
}


.caution_details .title::before,
.caution_details .title::after {
    position: absolute;
    content: "";
    top: 50%;
    height: 1.8rem;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.caution_details .title::before {
    left: 1rem;
    width: 1.8rem;
    background-image: url(../img/caution/caution.png);
}

/* 開いてるときに表示される */
.caution_details details[open] .title::after {
    right: 1rem;
    width: 1.8rem;
    background-image: url(../img/caution/close.png);
}

/* 閉じてるときに表示される */
.caution_details summary::after {
    right: 1rem;
    width: 4rem;
    background-image: url(../img/caution/summary.png);

}


@media screen and (max-width: 480px) {
    .caution_details .title::before {
        left: 0.5rem;
    }

    .caution_details .title::after {
        right: 0.5rem;
        width: 4rem;
    }
}



.caution_details .content {
    padding: var(--padding_pc);
}

.caution_details .content ol {
    counter-reset: li;
    display: flex;
    gap: var(--padding_pc);
    margin-top: var(--box_marging_bottom_pc);
}

@media screen and (max-width: 480px) {
    .caution_details .content ol {
        flex-wrap: wrap;
        gap: var(--padding_sp);
        margin-top: var(--box_marging_bottom_sp);
    }
}

.caution_details .content ol li {
    display: flex;
    flex-direction: column;
    flex: 1;
    background: var(--body_paynesgray);
    list-style-type: none !important;
    margin-bottom: 0;
}

@media screen and (max-width: 480px) {
    .caution_details .content ol li {
        flex: auto;
        /* width: calc((100% / 2) - 0.5rem); */
        width: 100%;
    }
}

.caution_details .content ol li p:first-child {
    position: relative;
    padding: var(--padding_pc) 0 var(--padding_pc) 3.5rem;
    font-weight: bold;
    color: var(--body_white);
    background: var(--deco_paynesgray);
    margin-bottom: 0;
}

@media screen and (max-width: 480px) {
    .caution_details .content ol li p:first-child {
        padding: var(--padding_sp) 0 var(--padding_sp) 2.5rem;
    }
}

.caution_details .content ol li p {
    margin-bottom: 0;
    padding: var(--padding_pc);
}

@media screen and (max-width: 480px) {
    .caution_details .content ol li p {
        padding: var(--padding_sp);
    }
}

.caution_details .content ol li>p:first-child::before {
    position: absolute;
    counter-increment: li;
    content: counter(li) "";
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    color: var(--main_paynesgray);
    width: 2rem;
    height: 2rem;
    text-align: center;
    border-radius: 100%;
    box-sizing: border-box;
    font-weight: bold;
    line-height: 2rem;
    background: var(--body_white);
    margin-left: var(--padding_sp);
}

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

    .caution_details .content ol li>p:first-child::before {
        width: 1.5rem;
        height: 1.5rem;
        line-height: 1.5rem;
    }

}


/* 
=======================================================
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
=======================================================
案件別の表示
-------------------------------------------------------
*/

.search {
    display: none;
}


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

@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 td {
    background-color: #A4D2DF;
}

.scroll_x .fields img {
    height: 150px;
    width: 200px;
    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;
    }
}

.shortest {
    font-weight: bold;
    font-size: x-large;
}

.achive {
    font-weight: bold;
    font-size: x-large;
    color: red;
    text-shadow: 1px 1px 0 #fff,
        2px 2px 0 rgba(108, 131, 137, 1);
}

.tbl_circle {
    font-size: xx-large;
    color: pink;
}

.tbl_batsu {
    font-size: xx-large;
    color: paleturquoise;
}

/*
テーブル　周りの設定
-------------------------------------------------------
*/
.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;
    table-layout: auto;
    border: 1px solid var(--body_maize);
}

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

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


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

.scroll_x table th:not(.sticky_1):not(.sticky_2) {
    min-width: 270px;
}

.scroll_x table td {
    min-width: 245px;
    max-width: 180px;
}


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

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

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

/*
テーブル　セル（td: 各データ）の全体設定
-------------------------------------------------------
*/
.scroll_x td {
    white-space: wrap;
    border-right: 1px solid var(--body_maize);
    border-bottom: 1px solid var(--body_maize);
    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 td.tbl_ul {
    text-align: left;
}

.scroll_x td.tbl_ul ul {
    list-style-type: none !important;
}

.scroll_x td.tbl_ul ul li {
    position: relative;
    padding-left: 1.5rem;
}

.scroll_x td.tbl_ul ul li:last-child {
    margin-bottom: 0;
}


.scroll_x td.tbl_ul ul>li::before {
    position: absolute;
    content: "";
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    color: var(--main_maize);
    width: 1rem;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    font-weight: bold;
}

/* ★ */
.scroll_x td.tbl_ul ul>li.star::before {
    content: "★";
}

/* ✓ */
.scroll_x td.tbl_ul ul>li.doc::before {
    content: "✓";
}

/* ➿ */
.scroll_x td.tbl_ul ul>li.proc::before {
    content: "☎";
}

.scroll_x td.tbl_dl {
    padding: 0;
}

.scroll_x td.tbl_dl dl {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.scroll_x td.tbl_dl dt,
.scroll_x td.tbl_dl dd {
    display: flex;
    padding: var(--box_padding_pc);
}

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

    .scroll_x td.tbl_dl dt,
    .scroll_x td.tbl_dl dd {
        padding: var(--box_padding_sp);
    }
}

/*  dl dt 項目名 */
.scroll_x td.tbl_dl dt {
    width: 40%;
    color: var(--body_white);
    background-color: var(--main_paynesgray);
}

.scroll_x td.tbl_dl dl dt:first-of-type {
    border-bottom: 1px solid var(--body_white);
}

/*  dl dd 項目内容 */
.scroll_x td.tbl_dl dd {
    width: 60%;
    background-color: var(--body_white);
}

.scroll_x td.tbl_dl dl dd:first-of-type {
    border-bottom: 1px solid var(--main_paynesgray);
}

/* 
COMPARE TABLE 装飾部分
=======================================================
公式サイトへのボタン
-------------------------------------------------------
*/
.button_offical {
    background: var(--main_maize);
    color: var(--main_gunmetal);
    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(--main_paynesgray);
    color: var(--body_white);
}

/*
テーブル　各装飾
-------------------------------------------------------
*/
/* （）部分 */
.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;
    }
}

/* 
=======================================================
other
=======================================================
other 背景部分の設定
-------------------------------------------------------
*/
.other {
    background-color: var(--body_moonstone);
    padding-bottom: var(--section_updown_pc);
}

.other_info {
    margin-top: var(--box_marging_bottom_pc);
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
}

.shiharai_content {
    display: flex;
    width: 100%;
    background-color: #fff;
    padding: 1rem;
    margin-bottom: 1rem;
}

.other_detail {
    width: 100%;
    padding: 1.5rem 2rem;
}

.shiharai_background {
    margin-top: var(--box_marging_bottom_pc);
    padding: 1rem;
}

.other_item_content h3::before,.other_item_content h3::after {
    border-top: solid 2px var(--main_paynesgray);
    border-bottom: solid 2px var(--main_paynesgray);
    position: absolute;
    top: calc(50% - 3px);
    width: 50px;
    height: 6px;
    content: '';
}

.other_item_content h3::before {
    left: 0;
}

.other_item_content h3::after {
    right: 0;
}

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

.other_head {
    width: 100%;
}

.other_logo {
    width: 50%;
    margin: 0 auto;
}

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

.other_detail ol {
    width: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    counter-reset: li;
    position: relative;
    margin: 1rem 0;
    list-style: none;
    font-weight: bold;
}


.other_item_content ol>li:before {
    position: absolute;
    font-weight: bold;
    counter-increment: li;
    content: counter(li)"";
    left: -45px;
    top: -1px;
    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(--main_maize);
    padding: 6px 0;
}

.other_detail h3 {
    color: var(--main_paynesgray);
}

.other_detail h3 {
    position: relative;
    display: inline-block;
    padding: 0 65px;
    margin: 0 auto;
    text-align: center;
    font-size: 1.8rem;
}



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

    .shiharai_content {
        display: flex;
        flex-direction: column;
        width: 100%;
        background-color: #fff;
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .other_info {
        margin-top: var(--box_marging_bottom_sp);
    }

    .shiharai_background {
        margin-top: var(--box_marging_bottom_sp);
        padding: 1rem;
    }

    .other_detail {
        width: 100%;
        padding: 1rem;
    }

    .other_detail h3 {
        width: 100%;
        font-size: 1.3rem;
    }
}

/* 
=======================================================
RANKING DETAIL
=======================================================
rank 背景部分の設定
-------------------------------------------------------
*/
.rank {
    padding: 5rem 0;
    padding-bottom: 2.5rem;
    background-color: var(--body_white);
    background-image: radial-gradient(#eee 10%, transparent 20%), radial-gradient(#eee 10%, transparent 20%);
    background-position: 0 0, 0.5rem 0.5rem;
    background-size: 1rem 1rem;
}

@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_maize);
    border-radius: 1rem;
}

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


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

.rank .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;
}

.rank .item .headline.no2 {
    background: var(--main_moonstone);
    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;
}

.rank .item .headline.no3 {
    background: var(--main_moonstone);
    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) {

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

}

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

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

}

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

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

.rank .item .headline h2 img {
    margin: 0 auto;
    height: 64px;
    width: 100%;
    object-fit: contain;
}

/* 
=======================================================
星付き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: column;
    justify-content: space-between;
    width: 100%;
    padding: var(--padding_pc);
    gap: var(--padding_sp);
}

@media screen and (max-width: 480px) {
    .rank .item .header {
        align-items: center;


    }
}

.rank .item .header .top {
    display: flex;
    flex-direction: row;
    width: 100%;
    background-color: var(--body_white);
    gap: var(--padding_pc);
}

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


/* 
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;
    }
}

.rank .item .header .product_img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding-left: 1rem;
}

@media screen and (max-width: 480px) {
    .rank .item .header .product_img img {
        padding-left: 0;
    }
}

/* 
rank 商品詳細（右）
-------------------------------------------------------
*/
.rank .item .header .product_detail {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 70%;
    margin: 0 auto;
    padding: 1.5rem 2rem;
    padding-right: 1.5rem;
    background-color: var(--body_white);
}

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

/* 
rank 商品詳細（右）見出し
-------------------------------------------------------
*/
.rank .item .header .product_detail h3,
.rank .item .reviews h3 {
    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 h3,
    .rank .item .reviews h3 {
        width: 100%;
        font-size: 1.3rem;
    }
}

.rank .item .header .product_detail h3 {
    color: var(--main_paynesgray);
}

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

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

.rank .item .header .product_detail h3::before,
.rank .item .header .product_detail h3::after {
    border-top: solid 2px var(--main_paynesgray);
    border-bottom: solid 2px var(--main_paynesgray);
}

.rank .item .reviews h3::before,
.rank .item .reviews h3::after {
    border-top: solid 2px var(--body_white);
    border-bottom: solid 2px var(--body_white);
}

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

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

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

.product_detail ol {
    counter-reset: li;
    position: relative;
    margin: 1rem 0;
    list-style: none;
    font-weight: bold;
}

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

.product_detail--recommend ol li {
    margin: 0;
}

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

.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: -1px;
    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(--main_maize);
    padding: 6px 0;
}

.product_detail--recommend ol>li:before {
    display: none;
}

/* 
rank 商品詳細（右）公式サイトボタン
-------------------------------------------------------
*/
.rank .item .header .product_detail a {
    padding: 1rem 2rem;
    width: 100%;
    margin: 0 auto;
    background: var(--main_maize);
    color: var(--body_white);
    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;
    }
}

/* 
rank PMG限定 参照元
-------------------------------------------------------
*/
.rank .item .pmg_annotation {
    display: flex;
    margin-top: var(--padding_pc);
    gap: var(--padding_pc);
}

@media screen and (max-width:480px) {
    .rank .item .pmg_annotation {
        display: flex;
        flex-direction: row;
    }
}

/* 
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: 0 var(--padding_pc);
}

.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(--main_gunmetal);
    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;
        text-align: center;
        padding: var(--padding_sp) 0.1rem;
    }

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

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

.rank_table th {
    color: var(--main_gunmetal);
    background: var(--main_maize);
    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: var(--padding_sp);
    }
}

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

/*
評価表　左寄せ
-------------------------------------------------------
*/
.rank_table .text_left {
    text-align: left;
}

/* 
Rank Review
=======================================================
*/
.rank .item .reviews {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: var(--main_moonstone);
    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 {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.rank .reviews_wrap .review h4 {
    display: flex;
    align-items: center;
    gap: var(--padding_pc);
    padding: var(--box_padding_pc);
    background: var(--body_moonstone);
    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 {
    height: 100%;
    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 h3 {
    padding: 0.3rem 0;
    text-align: center;
    border-bottom: 6px double var(--main_moonstone);
    font-size: 1.5rem;
    margin-bottom: var(--title_bottom_pc);
    color: var(--main_gunmetal);
}

@media screen and (max-width:480px) {
    .rank .item .comment .text h3 {
        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-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    z-index: 99998;
    bottom: 0;
    width: 100%;
    height: 10vh;
    padding: 1rem 0;
}

@media screen and (max-width: 480px) {
    .float_menu {
        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;
}

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

.float_menu .menu li {
    width: calc(100% / 4);
    height: 100%;
    margin-right: 1.5rem;
    text-align: center;
}

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

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

.float_menu .menu li:last-child {
    margin-right: 0;
}

.float_menu .menu li a {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--body_white);
    font-size: 1.3rem;
    font-weight: bolder;
    background-color: var(--main_moonstone);
    width: 100%;
    height: 100%;
    border-radius: var(--box_radius);
    transition: 0.3s;
}

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

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

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

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

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

.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;
    color: var(--body_white);
}

@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;
    color: var(--body_white);
}

@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(--main_moonstone);
    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(--main_moonstone);
    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;
    }
}

/* 
=======================================================
POPUP
=======================================================
*/

/* 背景黒 */
.modal-container {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    transition: .3s ease-out;
    z-index: 9999;
}

.modal-container::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.modal-container.active {
    opacity: 1;
    visibility: visible;
}

.modal-body {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    max-width: 500px;
    width: 90%;
}

.modal-close {
    position: absolute;
    top: -30px;
    right: 0;
    font-size: 14px;
    color: #fff;
    background: rgba(0, 0, 0, 60%);
    width: fit-content;
    padding: 4px 15px;
    cursor: pointer;
    border-radius: 5px 5px 0 0;
}

/* モーダル白背景 */
.modal-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 95%);
    border: 2px solid #000;
    padding: var(--box_padding_pc);
    font-weight: bold;
}

/* モーダル内ボタンエリア */
.modal-btn-area {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    width: 100%;
}

/* モーダル内ボタンエリア */
.modal-btn-area a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--padding_pc) 2rem;
    border-radius: 5rem;
    width: 90%;
}

/* 矢印 */
.modal-btn-area a img {
    width: 48px;
    height: 48px;
    animation: fuwafuwa_sideway 1s infinite;
}

/* モーダル内ボタンエリア */
.modal-btn-area a.corp {
    background-color: var(--main_moonstone);
    color: white;
}

/* モーダル内ボタンエリア */
.modal-btn-area a.sole {
    background: white;
    color: var(--main_moonstone);
    border: 2px solid var(--main_moonstone);
}

/* 
=======================================================
掲載落とし
=======================================================
*/

.ququmo_none {
    display: none !important;
}

.betrading_none {
    display: none;
}