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

* {
    line-height: 1.5;
}

:root {
    /* カラー */
    /* ---------------------------------- */
    --cta: #DD4B1A;

    /* メイン */
    --skyblue: #8DD8F8;
    --pink: #f2a7c1;
    --orange: #ff6f41;
    --green: #298675;
    --yellow: #ffc759;
    --benesse: #1E5BAC;


    /* SEASON: 秋 */
    --autumn_purple: #932E71;
    --autumn_chacol: #6C432D;
    --autumn_red: #96232E;

    /* SEASON: 冬 */
    --winter_blue: #004681;
    --winter_paleblue: #98A9D0;
    --winter_palegreen: #d5e8f2;

    /* 各色の濃淡 */
    --pale_skyblue: #D9F2FD;
    --deep_skyblue: #3FBDF3;

    --pale_pink: #FCEDF3;
    --deep_pink: #EA719B;

    --pale_orange: #FFD1C2;
    --deep_orange: #8F2400;

    --pale_green: #EBFFFC;
    --deep_green: #005247;

    --pale_yellow: #FFF8EB;
    --deep_yellow: #ffad0a;

    /* フォント */

    /* bg */

    /* 余白 */
    /* ---------------------------------- */
    /* セクション */
    --section_updown_pc: 3rem 0;
    --section_updown_sp: 1.5rem 0;

    /* タイトル */
    --title_bottom_pc: 1.5rem;
    --title_bottom_sp: 1rem;

    /* 要素の余白 */
    --padding_pc: 1rem;
    --padding_sp: 0.5rem;

    /* text */
    --text_padding_pc: 1.5rem 1rem;
    --text_padding_sp: 1rem;

    /* ボタン */
    --btn_padding_pc: 1rem 3rem 1rem 2rem;
    --btn_padding_sp: 0.5rem 1.5rem 1rem 0;
    --btn_radius: 12rem;
    --text_radius: 0.5rem;

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

    /* GAP */
    --section_gap_pc: 1.5rem;
    --section_gap_sp: 1rem;
    --gap_pc: 1rem;
    --gap_sp: 0.5rem;

    /* 幅 */
    /* ---------------------------------- */
    /* 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.5rem;
    }
}

h2 {
    font-size: 1.5rem;
    font-family: "Murecho", sans-serif;
}

@media screen and (max-width: 480px) {
    h2 {
        font-size: large;
        line-height: 1;
    }
}


h3 {
    font-size: 1.3rem;
}

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

h4 {
    font-size: 1.1rem;
}

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

p,
a {
    font-style: normal;
    font-size: 1rem;
    margin-bottom: 0.3rem;
}

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

a {
    text-decoration: none;
}

ul,
ol {
    list-style: none;
}

span {
    display: inline;
}

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

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

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

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

.sp {
    display: none;
}

@media screen and (max-width: 768px) {
    .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;
        line-height: 1;
    }
}

.smaller {
    font-size: smaller;
}

h2 .smaller {
    font-size: 1.1rem;
}

.small {
    font-size: small;
}

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

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

.bolder {
    font-weight: bolder;
}

/* 
フォント
=======================================================
*/
.murecho {
    font-family: "Murecho", sans-serif;
}

.shippori {
    font-family: 'Shippori Mincho', serif;
}


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

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

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

.bg_deep_skyblue {
    background: var(--deep_skyblue);
}

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

.bg_pink {
    background: var(--pink);
    padding: var(--padding_pc);
}

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

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

.bg_orange {
    background: var(--orange);
    padding: var(--padding_pc);
}

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

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

.bg_green {
    background: var(--green);
    padding: var(--padding_pc);
}

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

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

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

/* SEASON: 秋 */
.autumn_purple {
    color: var(--autumn_purple);
}

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

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

/* SEASON: 冬 */
.winter_blue {
    color: var(--winter_blue);
}

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

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

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

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

.bg_cta {
    background: var(--cta);
}

.white {
    color: white;
}


/* 
下線
=======================================================
*/
.underline {
    border-bottom: 1px solid;
}

.dotline {
    text-decoration: underline dotted;
}

/* 
ハイライト
=======================================================
*/
.highlight_red_50 {
    display: inline;
    margin: 0 auto;
    width: fit-content;
    line-height: 1;
    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;
    line-height: 1;
    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;
}

/* 
=======================================================
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 heartbeat {
    0% {
        transform: scale(1);
    }

    4% {
        transform: scale(1.02);
    }

    8% {
        transform: scale(1);
    }

    12% {
        transform: scale(1.02);
    }

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

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

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

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 1;
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

    50% {
        transform: translateY(-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 moveRight {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(0.5rem);
    }

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

@keyframes shine {
    20% {
        left: 150%;
    }

    100% {
        left: 150%;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        /* 透明 */
        transform: translateY(-10px);
        /* 上から表示 */
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

/* 
=======================================================
COMMON
=======================================================
Width 設定：一律1000px
wrapは中の要素、wrap抜きのクラス名で全面背景色の設定可能
=======================================================
*/
.cta_wrap,
.slogan,
.intro_wrap,
.gene_wrap,
.reason_wrap,
.point_wrap {
    max-width: var(--width_pc);
    margin: 0 auto;
}

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

    .first_wrap,
    .image_wrap,
    .slogan,
    .intro_wrap,
    .gene_wrap,
    .reason_wrap,
    .point_wrap {
        margin: 0 1rem;
    }
}


/* 
=======================================================
TRIANGLE ▶
=======================================================
*/
.triangle {
    display: inline-block;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background-size: 200% 200%;
    animation: bggradient 1s ease infinite, moveRight 1s linear infinite;
}

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

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

.shiny_button {
    position: relative;
    overflow: hidden;
    width: fit-content;
    margin: 1rem auto 0;
    padding: var(--btn_padding_pc);
    font-size: 2rem;
    font-weight: bolder;
    color: white;
    border-radius: var(--btn_radius);
}

@media screen and (max-width: 480px) {
    .shiny_button {
        width: 100%;
        font-size: 1.5rem;
        padding: var(--btn_padding_sp);
    }

}

.shiny_button::after {
    position: absolute;
    content: '';
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .4) 100%);
    height: 100%;
    left: -100%;
    top: 0;
    transform: skewX(-25deg);
    width: 50%;
    animation: 2s 0s shine linear infinite;
}

/* 
=======================================================
FV
=======================================================
*/
.fv_wrap {
    width: 100%;
    height: 100%;
}

/* 背景画像 */
.fv_img {
    position: relative;
    background-image: url(../img/fv/fv_all_bg.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: var(--section_updown_pc);
}

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

/* 3コラム画像 */
.image_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.image_wrap img {
    margin: 0 auto;
}

/* 2025年最新版 */
.fv_img::before {
    position: absolute;
    content: "";
    height: 4rem;
    width: 100%;
    background-image: url(../img/fv/fv_2025_latest.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    top: -1.75rem;
}

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

    /* 2025年最新版 */
    .fv_img::before {
        height: 2.5rem;
        width: 100%;
        top: -1.05rem;
    }
}

.slogan {
    background: var(--skyblue);
    padding: var(--padding_pc);
    padding-top: 3rem;
}

.slogan p {
    color: white;
    font-size: x-large;
    font-weight: bold;
    text-align: center;
}

@media screen and (max-width: 480px) {
    .slogan {
        padding: 1.6rem 0 0.5rem;
    }

    .slogan p {
        font-size: large;
    }
}

.main_fv {
    max-width: 450px;
    position: relative;
    z-index: 2;
}

.fv_container {
    display: flex;
    position: relative;
}

.effect {
    position: relative;
}

.effect:hover img {
    transform: scale(1.05);
}

.effect-text {
    position: absolute;
    left: 25%;
    color: #fff;
    font-weight: 700;
    background-color: #f2a7c1;
    font-size: 25px;
}

.effect-text_ele {
    background-color: #FF6F40;
}

.effect-text_juni {
    background-color: #008676;
}

.ele_img {
    width: 35vw;
}

.you_img,
.junior_img {
    width: 27vw;
}

.you_img img,
.junior_img img {
    width: 100%;
    object-fit: cover;
    margin-bottom: 25px;
}

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

    .effect {
        position: relative;
    }

    .effect-text {
        position: absolute;
        font-size: 9px;
        left: 16%;
        width: 50px;
        text-align: center;
    }

    .effect-text_ele {
        position: absolute;
        left: 22.5%;
    }

    .you_img img,
    .junior_img img {
        width: 100%;
        object-fit: cover;
        margin-bottom: 10px;
    }

    .you_img {
        width: 30vw;
    }

    .junior_img {
        width: 32vw;
    }

    .junior_img {
        margin-left: -14px;
    }

    .you_img {
        margin-right: -14px;
    }

    .ele_img {
        width: 40vw;
    }

    .effect:hover img {
        transform: none;
    }
}

/* 
=======================================================
INTRO ※10月〜11月末までは秋。
=======================================================
into全体にかかる設定
-------------------------------------------------------
*/
/* 背景 */
.intro {
    padding: var(--section_updown_pc);
    background: var(--pale_yellow);
}

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

.intro_wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--gap_pc);
}

.intro h2.deco {
    position: relative;
    text-align: center;
}

/* 紅葉葉っぱ */
.intro h2.deco::before {
    position: relative;
    text-align: center;
}

.intro .text {
    background: white;
    border: solid 2px #999;
    padding: 0 1em 0 2em;
    position: relative;
}

/*ドットの設定*/
.intro .text::before {
    content: "";
    position: absolute;
    border-right: dotted 10px #ddd;
    height: 90%;
    top: 0.5em;
    left: 0.5em;
}

.intro .text p {
    border-bottom: dashed 1px #ccc;
    line-height: 1.5;
    padding: 0.5em 0 0.5em 0.5em;
    margin: 0;
}

.intro .text p:last-of-type {
    border-bottom: none;
}

/* 
=======================================================
GENERATION
=======================================================
gene 背景部分の設定
-------------------------------------------------------
*/
.gene {
    padding: var(--section_updown_pc);
    width: 100%;
}

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

/* 
gene レイアウト
-------------------------------------------------------
*/
.gene_wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--section_gap_pc);
}

@media screen and (max-width: 480px) {
    .gene_wrap {
        gap: var(--section_gap_sp);
    }
}

/* 
gene タイトル
-------------------------------------------------------
*/
.gene h2.deco {
    background-image: url(../img/deco/deco_gene.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: fit-content;
    height: 2rem;
    padding-bottom: 3rem;
}

@media screen and (max-width: 480px) {
    .gene h2.deco {
        height: 2rem;
        padding-bottom: 2rem;
    }
}

/* 比較対象括り */
.gene ul {
    display: flex;
    width: 100%;
    gap: var(--gap_pc);
}

@media screen and (max-width: 480px) {
    .gene ul {
        flex-direction: column;
        gap: var(--gap_sp);
    }
}

/* 比較対象各項目 */
.gene ul li {
    display: flex;
    height: 100%;
    width: 100%;
}

/* 準備中 */
.gene ul li.in_preparation {
    position: relative;
}

.gene ul li.in_preparation::before {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    content: "準備中";
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-weight: 800;
    font-size: 3vw;
    text-align: center;
    vertical-align: middle;
    color: white;
    background: darkgoldenrod;
    mix-blend-mode: hard-light;
    height: 100%;
    width: 100%;
    z-index: 999;
}

@media screen and (max-width: 480px) {
    .gene ul li.in_preparation::before {
        font-size: 10vw;
    }
}

/* 各カードのククリ */
.gene ul li a {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.35);
}

/* SPでは横向きにする */
@media screen and (max-width: 480px) {
    .gene ul li a {
        position: static;
        flex-direction: row;
        align-items: normal;
        justify-content: normal;
    }

    .gene ul li a .icon {
        width: 40%;
    }
}

/* 各カード項目名 */
.gene ul li a .name {
    position: absolute;
    padding: var(--padding_pc);
    background-color: rgba(0, 0, 0, 0.4);
    width: 100%;
    text-align: center;
    bottom: 0;
}

/* 項目名のフォント設定 */
.gene ul li a .name p {
    color: white;
    font-size: x-large;
    font-weight: bold;
}

@media screen and (max-width: 480px) {
    .gene ul li a .name {
        position: static;
        width: 60%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 幼児: ピンク */
    .gene ul li.kinder a .name {
        background: var(--pink);
    }

    /* 小学校: オレンジ */
    .gene ul li.primary a .name {
        background: var(--orange);
    }

    /* 中学校: グリーン */
    .gene ul li.middle a .name {
        background: var(--green);
    }
}

/* 
=======================================================
REASON
=======================================================
reason 背景部分の設定
-------------------------------------------------------
*/
.reason {
    background: var(--pale_skyblue);
    padding: var(--section_updown_pc);
    width: 100%;
}

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

.reason_wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--section_gap_pc);
}

/* 
reason タイトル
-------------------------------------------------------
*/
.reason h2.deco {
    position: relative;
    height: 100%;
    z-index: 1;
}

.reason h2.deco::before {
    position: absolute;
    content: "";
    display: block;
    background-image: url(../img/deco/deco_reason.png);
    background-repeat: no-repeat;
    background-size: cover;
    left: 50%;
    bottom: 0rem;
    transform: translateX(-50%);
    height: 1rem;
    width: 50%;
    z-index: -1;
}

/* オススメ理由 */
.reason ul {
    display: flex;
    gap: var(--gap_pc);
    width: 100%;
    counter-reset: li;
}

@media screen and (max-width: 480px) {
    .reason ul {
        flex-wrap: wrap;
        gap: var(--gap_sp);
    }
}

/* 各おすすめ */
.reason ul li {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    background: white;
    border: solid 0.25rem #3FBDF3;
    border-radius: 0.5rem;
}

@media screen and (max-width: 480px) {
    .reason ul li {
        width: calc(50% - 0.25rem);
    }
}

.reason ul li::before {
    position: absolute;
    counter-increment: li;
    content: counter(li) "";
    display: flex;
    align-items: center;
    justify-content: center;
    left: -1rem;
    top: -1.25rem;
    color: white;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.5rem;
    border-radius: 100%;
    box-sizing: border-box;
    font-weight: bold;
    line-height: 0.9;
    background: var(--yellow);
}

/* 各おすすめタイトル */
.reason ul li div.title {
    display: flex;
    flex: 1;
    justify-content: center;
    background-color: #3FBDF3;
    padding: var(--padding_pc);
    color: white;
}

@media screen and (max-width: 480px) {
    .reason ul li div.title {
        padding: 1rem 0.5rem;
        align-items: center;
    }
}

/* 各おすすめアイコン */
.reason ul li div.icon {
    padding: var(--padding_pc);
}

@media screen and (max-width: 480px) {
    .reason ul li div.icon {
        padding: var(--padding_sp);
    }
}

/* 
=======================================================
POINT
=======================================================
point 背景部分の設定
-------------------------------------------------------
*/
.point {
    background: var(--skyblue);
    padding: var(--section_updown_pc);
    width: 100%;
}

@media screen and (max-width: 480px) {
    .point {
        padding: var(--section_updown_sp);
        padding-top: 3rem;
    }
}

.point_wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* point タイトル */
/* 
reason タイトル
-------------------------------------------------------
*/
.point .deco {
    position: relative;
    padding: var(--padding_pc);
    background: white;
    border: solid 0.25rem var(--yellow);
    border-radius: 0.5rem;
}

.point h2.title {
    position: absolute;
    display: flex;
    align-items: center;
    padding: 0.5rem 2rem;
    color: white;
    background: var(--yellow);
    border-radius: 128rem;
    height: 3rem;
    line-height: 1;
    top: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
}

@media screen and (max-width: 480px) {
    .point h2.title {
        width: max-content;

    }
}


.point .text {
    padding-top: 1.5rem;
}