@charset "UTF-8";

@font-face {
    font-family: 'BIZ UDPGothic'; /* 共通のフォント名 */
    src: url('/lp/bg_001/assets/fonts/BIZUDPGothic-Regular02.woff2') format('woff2');
    font-weight: 400; /* 標準のウェイト */
    font-style: normal;
    font-display: swap; 
    ascent-override: 88%;
    descent-override: 12%;
    line-gap-override: 0%;
    size-adjust: 102%;
}

/* 2. Bold (太字) の定義 */
@font-face {
    font-family: 'BIZ UDPGothic'; /* 共通のフォント名 */
    src: url('/lp/bg_001/assets/fonts/BIZUDPGothic-Bold02.woff2') format('woff2');
    font-weight: 700; /* 太字のウェイト */
    font-style: normal;
    font-display: swap; 
    ascent-override: 89%;
    descent-override: 11%;
    line-gap-override: 0%;
    size-adjust: 101%;
}

html {
	font-size: 62.5%;
    margin: 0px; padding: 0px;
    font-family: "BIZ UDPGothic", "Yu Gothic UI", "Hiragino Sans", "Noto Sans JP", sans-serif; 
    font-weight: 400;
}

/*
    clamp( 下限値, ( 100vw - ブレイクポイント) * サイズの増減量 / ビューポート幅の増減量 + 下限値, 上限値)
    ・100vw = 現在のビューポート（固定）
    ・サイズの増減量 = 上限値 - 下限値
    ・ビューポート幅の増減量 = 上限値の際のディスプレイ幅 - 下限値の際のディスプレイ幅
*/


:root {
    --textColor: rgb(50, 35, 35);
    --textColorWhite: rgb(255, 255, 255);
    --textShadow: rgb(31, 12, 12 , 0.3);
    --backgroundColor: rgb(250, 245, 230);
    --backgroundColorCTA: rgb(250, 240, 235);
    --backgroundColorBrand: rgb(255, 240, 190);
    --backgroundColorContents: rgb(255, 252, 245);
    --backgroundColorContents02: rgb(255, 250, 235);
    --backgroundColorList: rgb(255, 215, 130); 
    --backgroundColorListSub: rgb(255, 235, 180);
    --backgroundColorWhite: rgb(255, 255, 255);
    --borderColor: rgb(219, 211, 189);
    --linkColor: rgb(30, 120, 180);
    --linkColor02: rgb(190, 230, 255);
    --linkHover: rgb(202, 86, 111);
    --accentColor: rgb(125, 75, 50);
    --brandColor: rgb(255, 205, 0);
    --brandColor02: rgb(255, 230, 95);
    --CTAColor: rgb(230, 0, 92);

    --backgroundDesign01: rgba(255, 190, 120, 0.1);
    --backgroundDesign02: rgba(255, 255, 255, 0.7);
}

body {
    margin: 0;
    padding: 0;
    font-display: swap;
    font-style: normal;
    text-align: center;
    background: var(--backgroundColor);
    color: var(--textColor);
    font-size: 1.6rem;
    line-height: 1.6;
    background-size: 40px 40px;
    background-position: -1px -1px;
}

a { color: var(--linkColor); text-decoration: underline var(--linkColor); }
a:hover { color:var(--linkHover); text-decoration: underline var(--linkHover); }
a[href^="tel:"] { pointer-events: none; }

p { margin: 1em 0; }
h1 { font-size: 4.0rem; line-height: 1.6; margin: 1em 0; font-weight: 700; }  /* メインキャッチ */
h2 { font-size: 2.5rem; line-height: 1.6; margin: 1em 0; font-weight: 700; }  /* メイン見出し */
h3 { font-size: 2.0rem; line-height: 1.6;  margin: 1em 0; font-weight: 700; } /* 記事内見出し */
h4 { font-size: 1.8rem; line-height: 1.6; margin: 1em 0; font-weight: 700; }
h5 { font-size: 1.6rem; line-height: 1.6; margin: 1em 0; font-weight: 700; }
small { font-size: 1.4rem; line-height: 1.6; margin: 1em 0; font-weight: 700;  }
sup { font-size: 0.8rem; }

.subTitle { 
    color:var(--accentColor);
    font-weight: 700;
    background: var(--accentColor);
    padding: 0.5em 1em;
    border-radius: 0.25rem;
    color: var(--textColorWhite); 
    border-bottom: 6px double var(--textColorWhite);
}

.nopc { display: none; }
.nosp { display: block; }

main { overflow: hidden; }


h2.titleLogo {
    line-height: 1.6;
    padding-bottom: 0.5em;
    margin-top: 0;
}

h2.titleLogo::before {
    content: "";
    display: inline-block;
    height: 5rem;
    width: 5rem;
    background-image: url('../image/bridge_simpleIcon.webp'); 
    background-size: cover;
    margin-right: 0.5em;
    vertical-align: middle;
}

h3.titleLogo {
    line-height: 2rem;
    padding-bottom: 0.5em;
}

h3.titleLogo::before {
    content: "";
    display: inline-block;
    height: 5rem;
    width: 5rem;
    background-image: url('../image/bridge_simpleIcon.webp'); 
    background-size: cover;
    margin-right: 0.3em;
    margin-bottom: 0.1em;
    vertical-align: middle;
}



@media screen and (max-width: 768px) {
    body { font-size: clamp( 1.4em, ( 100vw - 32rem ) * 2 / 448 + 1.4rem, 1.6rem ); }
    h1 { font-size: clamp( 2rem, ( 100vw - 32rem ) * 20 / 448 + 2rem, 4rem );  }
    h2 { font-size: clamp( 1.8rem, ( 100vw - 32rem ) * 4 / 448 + 1.8rem, 2.2rem ); } 
    h3 { font-size: clamp( 1.6rem, ( 100vw - 32rem ) * 4 / 448 + 1.6rem, 2.0rem ); }
    h4 { font-size: clamp( 1.4rem, ( 100vw - 32rem ) * 2 / 448 + 1.4rem, 1.6rem ); }
    h5 { font-size: clamp( 1.4rem, ( 100vw - 32rem ) * 2 / 448 + 1.4rem, 1.6rem ); }
    .subTitle { font-size: clamp( 1.2rem, ( 100vw - 32rem ) * 4 / 448 + 1.2rem, 1.6rem );}
    .nopc { display: block; }
    .nosp { display: none; }

    h2.titleLogo::before,
    h3.titleLogo::before {
        height: 3.5rem;
        width: 3.5rem;
    }

    a[href^="tel:"] {
        pointer-events:auto;
    }
}

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

@keyframes bugfix {
    from {
        padding: 0;
    }
    to {
        padding: 0;
    }
}
@-webkit-keyframes bugfix {
    from {
        padding: 0;
    }
    to {
        padding: 0;
    }
}

/* ボタン関連 */

.btn_link {
    position: relative;
    align-items: center;
    text-decoration: none;
    overflow: hidden;
    font-weight: 700;
    min-width: 15em;
    display: inline-block;
    color: var(--textColorWhite);
    padding: 0.75em 1.75em 0.75em 2.75em;
    background: var(--linkColor);
    margin: 0.25em 0 1em 0;
    border-radius: 0.5rem;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2),
    4px 4px 5px rgba(0, 0, 0, 0.1);
}

.btn_link:hover {
    text-decoration: none;
    color: var(--textColorWhite);
    background: var(--linkHover);
}

.btn_link::before {
    content: "≫";
    position: absolute;
    top: 50%;
    left: 1em;
    font-size: 1em;
    line-height: 1em;
    transform: translateY(-50%);
    z-index: 2;
    color: var(--linkColor);
}

.btn_link:hover::before {
    color: var(--linkHover);
}

.btn_link::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.85em;
    width: 1.25em;
    height: 1.25em;
    border-radius: 50%;
    background: var(--textColorWhite);
    font-size: 1em;
    line-height: 1em;
    transform: translateY(-50%);
    z-index: 1;
}

.reverse_btn {
    color: var(--linkColor);
    background: var(--textColorWhite);
}

/* header */

header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    margin: 0 auto;
    text-align: center;
    z-index: 10;
}

header .logo {
    position: absolute;
    top: 0;
    left: 0;
    padding-left: 3rem;
    padding-top: 2rem;
    text-align: left;
    opacity: 0;
    pointer-events: none; 
    transition: opacity 1s ease-in-out;
}

header .logo#displayA a {
    color: var(--textColor);
    text-decoration: none;
}

header .logo#displayA .text {
    margin-bottom: 0.5em;
    font-size: 1.0rem;
    font-weight: 700;
}


header .logo#displayA img {
    height: 6.5rem;
    width: auto;
}

header .logo.active {
    opacity: 1;
    pointer-events: auto; 
    filter: drop-shadow(1px 1px 0px var(--backgroundColor))
            drop-shadow(-1px 1px 0px var(--backgroundColor))
            drop-shadow(1px -1px 0px var(--backgroundColor))
            drop-shadow(-1px -1px 0px var(--backgroundColor));
}

header .logo span::before {
    display: inline-block;
    content: "";
    height: 1px;
    width: 1em;
    margin: 0 0.5em;
    background-color: var(--textColor);
    vertical-align: middle;
}

header .menu {
    text-align: right;
    position: absolute;
    right: 0;
    top: 0;
    padding-right: 2rem;
    padding-top: 3rem;

}

header .menu::before {
    content: 'MENU';
    position: absolute;
    right: 10.5rem;
    top: 52%;
    color: var(--linkColor);
    font-weight: 700;
    filter: drop-shadow(-1px 0 0 var(--textColorWhite))
            drop-shadow(0 -1px 0 var(--textColorWhite))
            drop-shadow(1px 0 0 var(--textColorWhite))
            drop-shadow(0 1px 0 var(--textColorWhite));
}

input[type="checkbox"] {
    opacity: 0;
    visibility: hidden;
    position: absolute;
}

.hamburger {
    width: 7.5rem;
    height: 7.5rem;
    padding: 2.5rem;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background: var(--linkColor);
    border-radius: 50%;
    border: solid 3px var(--backgroundColor);
    z-index: 11;
}

.hamburger::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9; 
    pointer-events: none; 
}

input[type="checkbox"]:checked + .hamburger::before {
    pointer-events: auto; 
}

.hamburger span {
    position: absolute;
    display: block;
    content: "";
    width: 55%;
    height: 2px;
    background-color: var(--textColorWhite);
    transition: all 0.5s;
}

.hamburger span::before,
.hamburger span::after {
    position: absolute;
    display: block;
    content: "";
    width: 100%;
    height: 2px;
    background-color:  var(--textColorWhite);
    transition: all 0.5s;
}
.hamburger span::before {
    top: -1.2rem;
}
.hamburger span::after {
    bottom: -1.2rem;
}


input[type="checkbox"]:checked + .hamburger span {
    background-color: transparent;
    z-index: 10;
}
input[type="checkbox"]:checked + .hamburger span::before {
    top: 0;
    transform: rotate(45deg);
    z-index: 10;
}
input[type="checkbox"]:checked + .hamburger span::after {
    bottom: 0;
    transform: rotate(-45deg);
    z-index: 10;
}

input[type="checkbox"]:checked + .hamburger span {
    background-color: transparent;
}
input[type="checkbox"]:checked + .hamburger span::before {
    top: 50%; 
    transform: translateY(-50%) rotate(45deg);
}
input[type="checkbox"]:checked + .hamburger span::after {
    top: 50%; 
    transform: translateY(-50%) rotate(-45deg);
}

header aside {
    padding: 2rem 0 0 0;
    position: absolute;
    right: 0;
    top: 7.25rem;
    margin-right: 2.5rem;
    margin-top: 3.5rem;
    text-align: right;
    padding: 1em;
    border-radius: 0.5rem;
    font-weight: 700;

}

header aside.scroll-element {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

header aside.scroll-element.hidden {
    opacity: 0;
    pointer-events: none;
}

header aside ul li {
    margin-bottom: 0.5rem;

}

header aside ul li a {
    color: var(--textColor);
    text-decoration: none;
    display: block;
    padding: 0.25em 0.5em;
    border-right: 3px solid var(--linkColor);
    overflow: hidden;
    position: relative;
    z-index: 1;
    filter: drop-shadow(-1px 0 0 var(--backgroundColorWhite))
            drop-shadow(0 -1px 0 var(--backgroundColorWhite))
            drop-shadow(1px 0 0 var(--backgroundColorWhite))
            drop-shadow(0 1px 0 var(--backgroundColorWhite));
}

header aside ul li a:hover {
    text-decoration: none;
    color:  var(--textColorWhite);
}

header aside ul li a::after {
    background: var(--linkColor);
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    transform: scale(0, 1);
    transform-origin: right top;
    transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
    z-index: -1;
}

header aside ul li a:hover::after {
    transform: scale(1, 1);
}
   
.nav {
    position: fixed;
    width: 100%;
    height: 100vh;
    text-align: center;
    top: 0;
    right: -120%;
    background-color: var(--linkColor);
    color:  var(--textColorWhite);
    padding: 5rem 0;
    transition: all 0.5s;
    z-index: 10;
}

nav .nav_wrap {
    margin: 10rem auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    width: 100%;
    max-width: 140rem;
}

nav .nav_wrap div {
    padding: 1em 2em;
    text-align: left;
}

nav .nav_wrap ul li {
    margin-bottom: 1em;
}

nav .nav_wrap a {
    font-weight: 700;
    color:var(--textColorWhite);
    text-decoration: underline var(--textColorWhite) 1px;
}

nav .nav_wrap a:hover {
    color:var(--brandColor);
    text-decoration: underline var(--brandColor) 1px;
}

nav .nav_wrap .features ul {
    display: grid;
    grid-template-columns: repeat(2 , 1fr);
    gap: 0 5em;
    margin-top: 2em;
}


nav .nav_wrap .main_link,
nav .nav_wrap .sub_link {
    border-left: 1px solid var(--borderColor)
}

input[type="checkbox"]:checked ~ .nav {
    right: 0;
}

@media screen and (max-width: 999px) {
    header aside {
        display: none;
    }

    nav .nav_wrap {
        margin : 0 1em;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr auto;
        gap: 1em;
    }

    nav .nav_wrap ul li {
        margin-bottom: 0.25em;
    }

    nav .nav_wrap .features {
        grid-column: 1 / 3;
    }

    nav .nav_wrap .main_link, nav .nav_wrap .sub_link {
        border-left: none;
    }

}

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

    header {
        height: 8rem;
    }

    header .logo {
        padding-left: 0.5em;
        padding-top: 0.25em;
        height: 10rem;
    }

    header .logo#displayA img {
        height: 5rem;
    }
    header .logo#displayA .text {
        font-size: 1.0rem;
    }
    header .menu {
        padding-right: 0.25em;
        padding-top: 0.25em;
        overflow: hidden;
    }
    header .menu::before {
        display: none;
    }
    .hamburger {
        height: 5rem;
        width: 5rem;
        padding: 2.0rem;
    }
    .hamburger span::after {
        top: 0.8rem;
    }
    .hamburger span::before {
        top: -0.8rem;
    }
    .nav {
        padding: 1em 1em 1em 1em;
        overflow-y: auto; 
        -webkit-overflow-scrolling: touch; 
    }
    nav .nav_wrap {
        display: block;
        margin: 0;
    }
    nav .nav_wrap div {
        padding: 1em;
    }
    nav .nav_wrap .features {
        display: none;
    }
    nav .nav_wrap ul li a {
        display: block;
        width: 100%;
        text-decoration: none;
    }
    nav .nav_wrap ul li a::before {
        content: '≫ ';
    }

    nav .nav_wrap ul li.SubLink a::before {
        content: '└ ';
        padding-left:1em;
    }


}

/* main */

main { 
    width: 100%;
    margin: 0 auto 0 auto;
    position: relative;
}

/* section */

section {
    margin: 0 auto;
    text-align: left;
    padding: 2em;
}

article {
    max-width: 140rem;
    margin: 2em auto;
}

article > h2 {
    margin-top: 0;
}


@media screen and (max-width: 1400px) {
    section {
        padding: 0;
    }
}

@media screen and (max-width: 767px) {
    article {
        max-width: 140rem;
        margin: 0 auto;
    }
}


@media screen and (max-width: 767px) {
    section {
        padding: 1em;
    }
}

/* section.headline */

section.headline {
    padding-top: 0;
    padding-bottom: 0;
}

article.head_bigimage {
    height: 50rem;
    width: 100%;
    position: relative;
    margin: 1em auto 2em auto;
}

article.head_bigimage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.65);
    border-radius: 0.5rem;
}

article.head_bigimage .text {
    color: var(--textColorWhite);
    position: absolute;
    top:45%;
    transform: translateY(-50%);
    left: clamp( 6.4rem, ( 100vw - 76.8rem ) * 24 / 432 + 6.4rem, 8.8rem );
}

article.head_bigimage .text h1 {
    margin-top: 0.2rem;
    font-size: 3.6rem;
    line-height: 1.4;
}
article.head_bigimage .text small {
    color: var(--brandColor02);
    line-height: 1.4;
    font-size: 1.6rem;
    margin-top: 9rem;
    display: block;
}

article.head_bigimage a {
    padding: 1em 1em 1em 2.25em;
    border-radius: 0.5rem;
    background: var(--CTAColor);
    color: var(--textColorWhite);
    text-decoration: none;
    position: relative;
    font-weight: 700;
    box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 3px, rgba(0, 0, 0, 0.1) 4px 4px 5px;
}

article.head_bigimage a:before {
    content: '≫';
    position: absolute;
    left: 0.75em;
    height: 1em;
}

article.head_bigimage a:hover {
    filter: brightness(1.1);
}

article.campaign_area {
    max-width: 120rem;
    padding: clamp( 3em, ( 100vw - 76.8rem ) * 20 / 432 + 1em, 3em );
    text-align: center;
    position: relative;
    margin-top: 3em;
    border-radius: 0.5rem;
    background: var(--backgroundColorWhite);
}

article.campaign_area .campaign_img {
    text-align: center;
}

article.campaign_area .campaign_img img {
    max-width: 100rem;
    height: auto;
    margin: 0 auto 0 auto;
}

 article.campaign_area .campaign_contents {
    max-width: 100rem;
    margin: 0 auto;
}

article.campaign_area .campaign_contents .campaign_text {
    margin: 3em auto 0 auto;
    max-width: 100rem;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 0;
    width: 100%;
}

article.campaign_area .campaign_contents .campaign_text .campaign_main {
    padding: clamp( 1em, ( 100vw - 76.8rem ) * 20 / 432 + 1em, 3em );
    background: var(--backgroundColorContents02);
    border-radius: 0.5rem;
    font-size: 1.8rem;
    font-weight: 700;
}

article.campaign_area .campaign_contents .campaign_text .campaign_main h3 {
    margin-top: 0;
}


article.campaign_area .campaign_contents .campaign_text .campaign_main ul {
    display: grid;
    grid-template-columns: repeat(3 , 1fr);
    gap: 1em;
}

article.campaign_area .campaign_contents .campaign_text .campaign_main ul li {
    border: double 3px var(--borderColor);
    box-shadow:(2px 2px 2px var(--borderColor));
    background: var(--backgroundColorWhite);
}

article.campaign_area .campaign_contents .campaign_text .campaign_main ul li h4 {
    margin: 0 auto;
    background: var(--backgroundColorBrand);
    padding: 0.25em;
    font-size: 2.0rem;
    border-bottom: double 3px var(--borderColor);
}

article.campaign_area .campaign_contents .campaign_text .campaign_main ul li span {
    display: block;
}

article.campaign_area .campaign_contents .campaign_text .campaign_main ul li span.after {
    padding: 1.5rem 1.5rem 0.25rem 1.5rem;
    font-size: 4rem;
    color:var(--CTAColor)
}

article.campaign_area .campaign_contents .campaign_text .campaign_main ul li span.before {
    padding: 0.25rem 1.5rem 1.5rem 1.5rem;
    font-size: 1.4rem;
    color: var(--accentColor);
}

article.campaign_area .campaign_contents .campaign_text .campaign_sub {
    padding: clamp( 1em, ( 100vw - 76.8rem ) * 20 / 432 + 1em, 3em );
    background: var(--backgroundColorWhite);
    border-radius: 0.5rem;
    height: auto;
    align-self: start;
}

article.campaign_area .campaign_contents .campaign_text .campaign_sub h4 {
    margin-top: 0;
}

article.campaign_area .campaign_contents .campaign_text .campaign_sub ul {
    font-size: 1.4rem;
    text-align: left;
    padding-left: 2em;
    margin-top: 2em;
    list-style: disc;
}

article.campaign_area h2 {
    margin: 1em auto;
    
}

article.campaign_area img {
    width: 100%;
    object-fit: contain;
    border-radius: 0.5rem;
}

article.campaign_area .campaign_CTA {
    width: 100%;
    max-width: 100rem;
    text-align: center;
    margin: 0 auto;
}

article.campaign_area .campaign_CTA a {
    width: 100%;
    font-size: clamp( 1.6rem, ( 100vw - 32em ) * 80 / 448 + 1.6rem, 2.4rem );
    padding: 1.25em 1.25em 1.25em 3em;
    background: var(--CTAColor);
    color: var(--textColorWhite);
    text-decoration: none;
    font-weight: 700;
    display: block;
    border: 1px solid var(--borderColor);
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;
    filter: drop-shadow(2px 2px 2px var(--borderColor));
}

article.campaign_area .campaign_CTA a::before {
    content: "≫";
    position: absolute;
    top: 50%;
    left: 1.2em;
    transform: translate(-50%, -50%);
    font-size: 1.5em;
    color: var(--textColorWhite);
    z-index: 0;
    pointer-events: none;
}


article.campaign_area .campaign_CTA a::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    opacity: 0;
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}

article.campaign_area .campaign_CTA a:hover::after {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 1;
}


@media screen and (max-width: 1400px) {
    article.head_bigimage {
        margin: 0 auto;
    }
    article.head_bigimage img {
        border-radius: 0;
    }

    article.head_bigimage .text {
        left: 3rem;
    }
}

@media screen and (max-width: 1200px) {
    article.campaign_area {
        margin: 0;
    }
    
    article.campaign_area .campaign_contents .campaign_text .campaign_sub h4 {
        margin-top: 1em;    
    }

    article.campaign_area .campaign_contents .campaign_text .campaign_sub ul {
        margin: 1em auto;
    }

}

@media screen and (max-width: 767px) {
    
    section.headline {
        padding: 0.5em 0 0 0;
        margin-bottom: 0;
    }

    article.head_bigimage {
        height: 30rem;
    }

    article.head_bigimage img {
        border-radius: 0;
    }

    article.head_bigimage .text {
        left: 1.5em;
    }

    article.head_bigimage .text h1 {
        font-size: clamp( 2.2rem, ( 100vw - 32em ) * 14 / 448 + 2.2rem, 3.6rem );
    }

    article.head_bigimage .text small {
        margin-top: 0;
        font-size: 1.4rem;
    }
    
    article.campaign_area {
        margin-top: 0;
        padding: 1.5em;
    }

    article.campaign_area h2 {
        margin-top: 0;
    }

    article.campaign_area .campaign_img {
        margin: 1em 0;
    }

    article.campaign_area .campaign_img img {
        border-radius: 0;
    }

    article.campaign_area .campaign_contents .campaign_text {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        margin: 1em auto 0 auto;
    }

    article.campaign_area .campaign_contents .campaign_text .campaign_main ul {
        display: grid;
        grid-template-columns: 1fr;
    }

    article.campaign_area .campaign_contents .campaign_text .campaign_main ul li span.after {
        font-size: 2.8rem;
    }

    article.campaign_area .campaign_contents .campaign_text .campaign_sub h4 {
        margin-top: 1em;    
    }

    article.campaign_area .campaign_contents .campaign_text .campaign_sub ul {
        margin: 1em auto;
    }
}

/* breadcrumb */

article.breadcrumb {
    font-size: 1.4rem; line-height: 1.6; margin: 1em 0;
    width:100%;
    max-width: 140rem;
    margin: 2em auto;
}

article.breadcrumb ul li {
    display: inline-block;
}

article.breadcrumb ul li:first-child::before {
    content: url('../image/house.svg');
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.25em;
    margin-right: 0.25em;
}

article.breadcrumb ul li:not(:first-child)::before {
    content: '>';
    margin-left: 0.25em;
    margin-right: 0.25em;
}

@media screen and (max-width: 1400px) {
    article.breadcrumb {
        margin-left: 1em;
        margin-right: 1em;
    }
}

@media screen and (max-width: 768px) {
    article.breadcrumb {
        font-size: clamp( 1.2rem, ( 100vw - 32rem ) * 2 / 448 + 1.2rem, 1.4rem );
        margin: 1em 0.5em;
    }

}



/* article.about_message */

article.about_message {
    display: grid;
    width: 100%;
    max-width: 120rem;
    grid-template-columns: 30rem 1fr;
    padding: 8rem;
    gap: 4rem;
    background: var(--backgroundColorContents);
    border-radius: 1rem;
    margin: 3em auto;
}



article.about_message .image img {
    width: auto;
    height: 100%;
    object-fit: cover;
    border-radius: 1rem;
    aspect-ratio: 1.5 / 2;
}

article.about_message .message {
    margin-bottom: 0;
    font-size: clamp( 1.8rem, ( 100vw - 76.8rem ) * 2 / 432 + 1.8rem, 2.0rem) ;
    margin: 0;
}


@media screen and (min-width: 768px) and (max-width: 1199px) {
    article.about_message {
        padding: clamp( 2rem, ( 100vw - 76.8rem ) * 60 / 432 + 2rem, 8rem) ;
        gap: clamp( 2rem, ( 100vw - 76.8rem ) * 60 / 432 + 2rem, 8rem) ;
    }
}

@media screen and (max-width: 1200px) {
    article.about_message {
        margin: 0;
    }
}

@media screen and (max-width: 767px) {
    
    article.about_message {
        padding: 3rem 2rem;
        grid-template-columns: 1fr;
        margin-bottom: 0;
        gap: 2em;
    }

    article.about_message .message {
        margin-bottom: 0;
        font-size: clamp( 1.6rem, ( 100vw - 32rem ) * 2 / 448 + 1.6rem, 1.8rem ); 
    }

    article.about_message .image img {
        width: 100%;
        height: auto;
        aspect-ratio: auto;
    }

}

/* section.carousel */

section.carousel {
    width: 100%;
    max-width: 100%;
    position: relative;
    z-index: 0;
    background: var(--backgroundColorBrand);
    padding:0;

    background-image: 
            linear-gradient(45deg, var(--backgroundDesign01) 25%, transparent 25%),
            linear-gradient(-45deg, var(--backgroundDesign01) 25%, transparent 25%),
            linear-gradient(45deg, transparent 75%, var(--backgroundDesign01) 75%),
            linear-gradient(-45deg, transparent 75%, var(--backgroundDesign01) 75%)
            ;
    background-size: 40px 40px;
    background-position: 0 0, 0 40px, 40px -40px, -40px 0px;
}

section.carousel article {
    width: 100%;
    max-width: 100%;
    margin-top: 0;
}


/* スライドアニメーションの設定 */
@keyframes horizontal-animation {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}


/* スライダーを表示する親コンテナ */
.slider-container {
    display: flex;
    overflow: hidden;
}

/* スライダー本体 */
.slider-wrapper {
    display: flex;
    animation: horizontal-animation 60s linear infinite;

}

/* スライドコンテンツ */
.slide {
    height: 60rem;
    width: 80rem;
    z-index: 1;
    padding: 4em 2em;
}

.slide img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    background-color: var(--backgroundColorWhite);
    padding: 2rem;
        border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

section.carousel .text-container {
    width: 100vw;
    max-width: 140rem;
    height: auto;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    top: 50%;
    box-sizing: border-box;
    text-align: left;
    transform: translate(-50% ,-50% );
}

section.carousel .text-contents {
    width: 35rem;
    margin-left: 5rem;
    background:  var(--backgroundColorWhite);
    padding: 3em;
    border-radius: 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

section.carousel .text-contents h3 {
    margin-top:0;
    border-left: 0.5rem solid var(--accentColor);
    padding-left: 0.75em;
}


@media screen and (max-width: 999px) {
    section.carousel .text-contents {
        width: 30rem;
        margin-left: 3rem;
        padding: 2em;
    }
    section.carousel .slide {
        padding: 2em 0.5em;
    }
}

@media screen and (max-width: 767px) {
    section.carousel article {
        display: grid;
        grid-template-rows: auto 1fr;
    }
    section.carousel article .text-container {
        position: relative;
        transform: none;
        left: auto;
        top:auto;
    }
    section.carousel article .text-contents {
        width: auto;
        margin: 0 1em 2em 1em;
        padding: 2em;
        box-shadow: none;
    }
    section.carousel article .slide {
        width: 32rem;
        height: 25rem;
        padding: 1.5em 0.25em;
    }
}

/* section.features */

section.features {
    text-align: center;
    width: 100%;
    max-width: 140rem;
    padding: 1em;
}

section.features .box_wrap {
    max-width: 140rem;
    width: 100%;
    padding: 1em 0 0 0;
}

section.features .box_wrap ul {
    display: grid;
    grid-template-columns: repeat(6 , 1fr);
    grid-template-rows: repeat(3 , 1fr);
    gap: 1.5rem;
    margin-top: 1em;
}

section.features .box_wrap ul li.box_01 {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    font-size: 1.8rem;
}
section.features .box_wrap ul li.box_02 {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    font-size: 1.4rem;
}
section.features .box_wrap ul li.box_03 {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    font-size: 1.4rem;
}

section.features .box_wrap ul li.box_04 {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    font-size: 1.4rem;
}

section.features .box_wrap ul li.box_05 {
    grid-column: 4 / 5;
    grid-row: 1 / 2;
    font-size: 1.4rem;
}

section.features .box_wrap ul li.box_06 {
    grid-column: 3 / 5;
    grid-row: 2 / 4;
    font-size: 1.8rem;
}

section.features .box_wrap ul li.box_07 {
    grid-column: 5 / 7;
    grid-row: 1 / 3;
    font-size: 1.8rem;
}

section.features .box_wrap ul li.box_08 {
    grid-column: 5 / 6;
    grid-row: 3 / 4;
    font-size: 1.4rem;
}

section.features .box_wrap ul li.box_09 {
    grid-column: 6 / 7;
    grid-row: 3 / 4;
    font-size: 1.4rem;
}

section.features .box_wrap ul li a {
    padding: 2rem;
    border-radius: 1rem;
    text-decoration: none;
    font-weight: 700;
    color: var(--textColor);
    background: var(--backgroundColorWhite);
    border: solid 1px var(--borderColor);
    display: block;
    height: 100%;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    text-align: left;
    position: relative;
}

section.features .box_wrap ul li a div.main_text {
    display: block;
    padding-left: 0.5em;
    border-left: 3px solid var(--linkColor);
    line-height: 1.2;
}

section.features .box_wrap ul li a div.main_text span {
    display: inline-block;
}

section.features .box_wrap ul li a div.icon_img {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 35%;
    height: 35%;
}

section.features .box_wrap ul li a div.icon_img img {
    width: 100%;
    height: 100%;
}

section.features .box_wrap ul li a div.bottom_link {
    display: block;
    text-align: right;
    position: absolute;
    padding: 1.25rem 2rem;
    bottom: 0;
    left: 0;
    text-align: left;
    line-height: 1;
    color: var(--textColorWhite);
    width: 100%;
    background: var(--linkColor);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

section.features .box_wrap ul li a div.bottom_link span {
    position: relative;
    color: var(--linkColor);
}

section.features .box_wrap ul li a div.bottom_link span::before {
    content: "≫";
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: var(--textColorWhite);
    font-size: 0.9em;
    font-weight: 700;
}


section.features .box_wrap ul li a:hover {
    background: var(--linkColor);
    color:  var(--textColorWhite);
}

section.features .box_wrap ul li a:hover div.main_text {
    border-left: 3px solid var(--textColorWhite);
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
    section.features .box_wrap ul {
        display: grid;
        grid-template-columns: repeat(4 , 1fr);
        grid-template-rows: repeat(5 , 1fr);
        gap: 1.5rem;
    }
    
    section.features .box_wrap ul li.box_01 {
        grid-column: 1 / 3;
        grid-row: 1 / 3;
        font-size: 1.8rem;
    }
    section.features .box_wrap ul li.box_02 {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
        font-size: 1.8rem;
    }
    section.features .box_wrap ul li.box_03 {
        grid-column: 2 / 3;
        grid-row: 3 / 4;
        font-size: 1.8rem;
    }
    
    section.features .box_wrap ul li.box_04 {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
        font-size: 1.8rem;
    }
    
    section.features .box_wrap ul li.box_05 {
        grid-column: 4 / 5;
        grid-row: 1 / 2;
        font-size: 1.8rem;
    }
    
    section.features .box_wrap ul li.box_06 {
        grid-column: 3 / 5;
        grid-row: 2 / 4;
        font-size: 1.8rem;
    }
    
    section.features .box_wrap ul li.box_07 {
        grid-column: 1 / 3;
        grid-row: 4 / 6;
        font-size: 1.8rem;
    }
    
    section.features .box_wrap ul li.box_08 {
        grid-column: 3 / 4;
        grid-row: 4 / 5;
        font-size: 1.8rem;
    }
    
    section.features .box_wrap ul li.box_09 {
        grid-column: 4 / 5;
        grid-row: 4 / 5;
        font-size: 1.8rem;
    }

}

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

    section.features {
        margin-bottom: 0;
    }

    section.features .box_wrap ul {
        display: grid;
        grid-template-columns: repeat(2 , 1fr);
        grid-template-rows: repeat(6 , 1fr);
        gap: 1.5rem;
    }
    
    section.features .box_wrap ul li {
        font-size: 1.6rem;
    }


    section.features .box_wrap ul li.box_01 {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
        aspect-ratio: 2 / 1;
        font-size: 1.8rem;
    }
    section.features .box_wrap ul li.box_02 {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        font-size: 1.8rem;
    }
    section.features .box_wrap ul li.box_03 {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        font-size: 1.8rem;
    }
    
    section.features .box_wrap ul li.box_04 {
        grid-column: 1 / 2;
        grid-row: 4 / 5;
        font-size: 1.8rem;
    }
    
    section.features .box_wrap ul li.box_05 {
        grid-column: 2 / 3;
        grid-row: 4 / 5;
        font-size: 1.8rem;
    }
    
    section.features .box_wrap ul li.box_06 {
        grid-column: 1 / 3;
        grid-row: 3 / 4;
        aspect-ratio: 2 / 1;
        font-size: 1.8rem;
    }
    
    section.features .box_wrap ul li.box_07 {
        grid-column: 1 / 3;
        grid-row: 5 / 6;
        aspect-ratio: 2 / 1;
        font-size: 1.8rem;
    }
    
    section.features .box_wrap ul li.box_08 {
        grid-column: 1 / 2;
        grid-row: 6 / 7;
        font-size: 1.8rem;
    }
    
    section.features .box_wrap ul li.box_09 {
        grid-column: 2 / 3;
        grid-row: 6 / 7;
        font-size: 1.8rem;
    }

    section.features .box_wrap ul li.box_01 a div.icon_img,
    section.features .box_wrap ul li.box_06 a div.icon_img,
    section.features .box_wrap ul li.box_07 a div.icon_img {
        width: 15%;
        height: auto;
    } 

    section.features .box_wrap ul li a {
        aspect-ratio: auto;
    }

    section.features .box_wrap ul li a div.bottom_link {
        padding: 0.75rem 1.25rem;
        text-align: right;
    }

    section.features .box_wrap ul li a div.bottom_link small {
        font-size: 1.4rem;
    }

    section.features .box_wrap ul li a div.bottom_link small::after {
        content: "≫";
        display: inline-flex;
        justify-content: center;
        align-items: center;
        color: var(--textColorWhite);
        font-size: 0.9em;
        font-weight: 700;
        padding-left: 0.5em;
    }

    section.features .box_wrap ul li a div.bottom_link span::before {
        content:'';
    }
}

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

    section.features .box_wrap ul li a {
        padding: 1.5rem;
        aspect-ratio: auto;
        height: auto;
        min-height: 7.5em;
        border-radius: 0.5rem;
    }

    section.features .box_wrap ul li a div.main_text {
        padding-right: 20%;
    }

    section.features .box_wrap ul li a div.bottom_link {
        padding: 1rem;
    }

    section.features .box_wrap ul li a div.icon_img {
        top: 0.25em;
        left: auto;
        right: 0.25em;
        transform: none;
        width: 4.5em;
        height: 4.5em;
    }

    section.features .box_wrap ul {
        display: block;
    }
    section.features .box_wrap ul li {
        margin-bottom: 1em;
    }
    section.features .box_wrap ul li.box_01,
    section.features .box_wrap ul li.box_02,
    section.features .box_wrap ul li.box_03,
    section.features .box_wrap ul li.box_04,
    section.features .box_wrap ul li.box_05,
    section.features .box_wrap ul li.box_06,
    section.features .box_wrap ul li.box_07,
    section.features .box_wrap ul li.box_08,
    section.features .box_wrap ul li.box_09 {
        font-size: 1.6rem;
    }

    section.features .box_wrap ul li.box_01,
    section.features .box_wrap ul li.box_06,
    section.features .box_wrap ul li.box_07 {
        aspect-ratio: auto;
    }


    section.features .box_wrap ul li a div.main_text {
        margin-bottom: 2.5em;
    }


    section.features .box_wrap ul li a div.bottom_link small {
        font-size: 1.2rem;
    }

    section.features .box_wrap ul li.box_01 a div.icon_img,
    section.features .box_wrap ul li.box_06 a div.icon_img,
    section.features .box_wrap ul li.box_07 a div.icon_img {
        top: 0.25em;
        left: auto;
        right: 0.25em;
        transform: none;
        width: 4.5em;
        height: 4.5em;
    }

}


/* section.schedule */


section.schedule {
    width: 100%;
    max-width: 140rem;
    padding: 0 1em;
}

section.schedule h2 {
    text-align: center;
    margin-bottom: 1em;
}

section.schedule article p.overview {
    margin: 0 auto 4em auto;
    text-align: center;
}


section.schedule .annotation {
    text-align: center;
    margin: 1em auto;
    padding: 0.5rem;
    margin-bottom: 2em;
}

section.schedule .schedule_wrap {
    display: grid;
    grid-template-columns: 30% 70%;
    text-align: center;
    padding: 0.5em;
}

section.schedule .schedule_wrap .schedule_text {
    padding: 3em;
    background: var(--backgroundColorListSub);
    color:  var(--textColor);
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
    display: flex;
    align-items: center;

    background-image: 
            linear-gradient(45deg, var(--backgroundDesign01) 25%, transparent 25%),
            linear-gradient(-45deg, var(--backgroundDesign01) 25%, transparent 25%),
            linear-gradient(45deg, transparent 75%, var(--backgroundDesign01) 75%),
            linear-gradient(-45deg, transparent 75%, var(--backgroundDesign01) 75%)
            ;
    background-size: 40px 40px;
    background-position: 0 0, 0 40px, 40px -40px, -40px 0px;

}

section.schedule .schedule_wrap .schedule_text h3 {
    text-align: center;
}

section.schedule .schedule_wrap .schedule_text p {
    text-align: left;
}


section.schedule .schedule_wrap .schedule_time {
    padding: 2.5em;
    background: var(--backgroundColorList);
    color:  var(--textColor);
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

section.schedule .schedule_wrap .schedule_time table.schedule_box {
    width: 100%;
    font-weight: 700;
}

section.schedule .schedule_wrap .schedule_time table.schedule_box td {
    padding: 1.25em;
}

section.schedule .schedule_wrap .schedule_time table.schedule_box tr {
    border-bottom: 1px solid var(--textColor);
}

section.schedule .schedule_wrap .schedule_time table.schedule_box tr.schedule_header {
    border-bottom: 3px solid var(--textColor);

}

@media screen and (max-width: 999px) {
    section.schedule .schedule_wrap {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: 1fr auto;
        max-width: 100%;
    }
    section.schedule .schedule_wrap .schedule_text {
        display: block;
        text-align: center;
        border-bottom-left-radius: unset;
        border-top-right-radius: 1rem;
    }
    section.schedule .schedule_wrap .schedule_text p {
        text-align: center;
    }

    section.schedule .schedule_wrap .schedule_time {
        border-top-right-radius: 1rem;
        border-top-left-radius: 1rem;
        border-bottom-right-radius: unset;
        border-bottom-left-radius: unset;
    }

    section.schedule .schedule_wrap .schedule_time {
        border-top-right-radius: unset;
        border-top-left-radius: unset;
        border-bottom-left-radius: 1rem;
        border-bottom-right-radius: 1rem;
    }

    section.schedule .annotation {
        font-size: 1rem;
        text-align: left;
    }

}

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

    section.schedule {
        margin: 2em auto 2em;
    }
    section.schedule h2 {
        margin-bottom: 0;
        padding-bottom: 0;
    }

    section.schedule article p.overview {
        margin: 1em auto;
    }



    section.schedule .schedule_wrap {
        padding: 0;
    }


    section.schedule .schedule_wrap .schedule_text h3 {
        margin-top: 0;
    }

    section.schedule .schedule_wrap .schedule_time {
        padding: 1em;
    }
    section.schedule .schedule_wrap .schedule_time table.schedule_box td {
        padding: 0.75em 0.75em;
        line-height: 1.1;
    }

    section.schedule .schedule_wrap .schedule_text {
        margin-top: 2em;
        padding: 2em 1em 1em 1em;
    }

}

@media screen and (max-width: 450px) {
    section.schedule .schedule_wrap .schedule_time table.schedule_box td {
        padding: 0.75em 0.5em;
        line-height: 1.1;
    }
}

/* section.price_list */

section.price_list {
    width: 100%;
    max-width: 80rem ;
    background: var(--backgroundColorContents);
    border-radius: 1rem;
    padding: 3em;
    text-align: center;
    margin: 3em auto;
}

section.price_list .price_area {
    width: 100%;
    max-width: 65rem;
    margin: 0 auto;
}

section.price_list .price_area h3 {
    color: var(--accentColor);
    margin: 3.5rem auto 1em auto; 
}

section.price_list .price_area h3::before,
section.price_list .price_area h3::after  {
    display: inline-block;
    content: "＊＊＊";
    margin: 0 1em;
    color: var(--accentColor);
    vertical-align: middle;
}

section.price_list .price_area ul li {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    border-bottom: solid 1px var(--textColor);
    padding: 0.5em;
    font-weight: 700;
    margin-bottom: 0.5em;
}

section.price_list .price_area ul li .price_title {
    text-align: left;
}

section.price_list .price_area ul li .price_cost {
    text-align: right;
}

section.price_list .price_area .payment_method {
    margin: 5em auto;
    background: var(--backgroundColor);
    border-radius: 1rem;
    display: grid;
    grid-template-columns: auto 1fr;
}

section.price_list .price_area .payment_method .payment_image {
    padding: 3rem;
    vertical-align: middle;
    text-align: center;
    line-height: 1;
    width: 16rem;
    height: 16rem;
}

section.price_list .price_area .payment_method .payment_image img {
    width: 100%;
    height: auto;
}

section.price_list .price_area .payment_method .payment_text {
    text-align: left;
    padding: 3rem 3rem 3rem 0;
}

section.price_list .price_area .payment_method .payment_text h4 {
    margin: 0.25rem;
}

@media screen and (max-width: 1000px) {
    section.price_list {
        border-radius: unset;
        width: 100%;
    }
}


@media screen and (max-width: 767px) {
    section.price_list {
        padding: 1em 2em;
        margin: 0 auto;
    }

    section.price_list article {
        margin: 2em auto 0 auto;
    }

    section.price_list .price_area {
        margin: 1em auto 0px auto;
    }

    section.price_list .price_area h3 {
        margin: 4rem auto 1.5rem auto;
    }

    section.price_list .price_area .payment_method {
        margin: 5em auto 2em auto;
    }

    section.price_list .price_area .payment_method .payment_image {
        width: 10rem;
        height: 10rem;
    }

    section.price_list .price_area .payment_method .payment_text {
        padding: 2rem 1rem 1rem 0px;
    }


}

/*　section.recommend　*/

section.recommend {
    width: 100%;
    max-width: 140rem;
    padding: 0.5em;
}

article.twoBlock {
    display: grid;
    grid-template-columns: auto auto;
    gap: 1em;
}

article.twoBlock .text_area {
    padding: 2em 2em 2em 0;
    max-width: 40rem;
}

article.twoBlock .text_area h2 {
    margin: 0;
}

article.twoBlock .recommend_text h3 {
    margin: 0;
}
article.twoBlock .recommend_text p {
    margin: 0.5em 0;
}


article.twoBlock .explain_area {
    padding: 4em;
    border: 4px dashed var(--borderColor);
    background: var(--backgroundColorContents);
}

article.twoBlock .explain_area ul li {
    display: grid;
    gap: 1rem;
    grid-template-columns: auto 1fr;
    margin-bottom: 2em;
    border-bottom: 1px solid var(--textColor);
    padding-bottom: 0.5em;
}

article.twoBlock .explain_area .recommend_image {
    padding: 0 1em 1em 1em;
}

article.twoBlock .explain_area .recommend_image img {
    height: auto;
    width: 8rem;
}

article.twoBlock .explain_area .explain_number {
    font-size: 3.5em;
    opacity: 0.3;
    padding: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
}

@media screen and (max-width: 1400px) {
    article.twoBlock {
        margin:2em;
    }
}


@media screen and (max-width: 999px) {
    article.twoBlock {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: 1fr auto;
        gap: 0;
    }

    article.twoBlock .text_area {
        padding: 2em 2em 2em 0;
        width: 100%;
        max-width: 100%;
    }

    article.twoBlock .explain_area {
        margin: 0;
    }

}

@media screen and (min-width: 768px) and (max-width: 1199px) {
    article.twoBlock .text_area {
        padding: 2em clamp( 1.6rem, ( 100vw - 76.8rem ) * 48 / 432 + 1.6rem, 6.4rem) 2em 0;
    }

    article.twoBlock .explain_area {
        padding: clamp( 1.6rem, ( 100vw - 76.8rem ) * 48 / 432 + 1.6rem, 6.4rem) ;
    }

}


@media screen and (max-width: 767px) {
    section.recommend {
        padding: 1em;
        margin-bottom: 0;
    }

    article.twoBlock {
        margin: 0 auto;
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: 1fr auto;
        gap: 0;
    }

    article.twoBlock .text_area {
        padding: 1em;
        width: 100%;
        max-width: 100%;
    }

    article.twoBlock .explain_area {
        margin: 0;
        padding: 1em ;
    }

    article.twoBlock .explain_area .explain_number {
        font-size: 2.2em;
    }


}

/* section.tutor */

section.tutor {
    background: var(--backgroundColorBrand);
    padding: 4em 0;
    margin: 0 auto 0 auto;

    background-image: 
        linear-gradient(45deg, var(--backgroundDesign01) 25%, transparent 25%),
        linear-gradient(-45deg, var(--backgroundDesign01) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--backgroundDesign01) 75%),
        linear-gradient(-45deg, transparent 75%, var(--backgroundDesign01) 75%)
        ;
    background-size: 40px 40px;
    background-position: 0 0, 0 40px, 40px -40px, -40px 0px;
}

section.tutor article {
    position: relative;
    min-height: 40rem;
}


section.tutor .text-contents {
    position: absolute;
    top: 0;
    left: 0;
    width: 35rem;
    margin-left: 5rem;
    background:  var(--backgroundColorWhite);
    padding: 3em;
    border-radius: 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

section.tutor .text-contents h3 {
    margin-top:0;
    border-left: 0.5rem solid var(--accentColor);
    padding-left: 0.75em;
}

section.tutor .image-contents {
    padding-left: 45rem;
}


section.tutor .image-contents ul {
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1em;
    padding-right: 3em;
}

section.tutor .image-contents ul li.variable {
    display: none;
}

section.tutor .image-contents img {
    background: var(--backgroundColorWhite);
    padding: 1.5rem;
    border-radius: 0.5rem;
    max-height: 36rem;
    width: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1.2;
}

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

    section.tutor .text-contents {
        margin-left: 3rem;
    }

    section.tutor .image-contents ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    section.tutor .image-contents ul li.variable {
        display: block;
    }

    section.tutor .image-contents img {
        max-height: 26rem;
    }
}


@media screen and (max-width: 1000px) {
    section.tutor .text-contents {
        margin-left: 3rem;
        width: 30rem;
        padding: 2em;
    }

    section.tutor .image-contents ul {
        padding-right: 1em;
    }

    section.tutor .image-contents {
        padding-left: 38rem;
    }
}

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

    section.tutor {
        margin: 0 auto;
    }

    section.tutor article {
        margin: 0 auto;
    }

    section.tutor .image-contents {
        padding: 1em;
    }

    section.tutor .image-contents ul {
        position: relative;
        transform: none;
        padding: 0;
    }

    section.tutor .image-contents img {
        padding: 1.5em
    }

    section.tutor .text-contents {
        position: relative;
        width: auto;
        margin: 1em;
    }

}

/* section.customerVoice */
 
section.customerVoice {
    text-align: center;
    width: 100%;
    max-width: 140rem;
}

section.customerVoice article {
    background: var(--backgroundColorContents);
    border-radius: 1rem;
    padding: 4em clamp( 3.2rem, ( 100vw - 76.8rem ) * 32 / 432 + 3.2rem, 6.4rem) ;
}


section.customerVoice ul {
    margin: clamp( 0rem, ( 100vw - 120rem ) * 64 / 200 + 0rem, 6.4rem) ;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp( 2rem, ( 100vw - 120rem ) * 40 / 200 + 2rem, 6rem) ;
}

section.customerVoice ul li {
    background: var(--backgroundColor);
    text-align: left;
    padding: 1.5em;
    border-radius: 1rem;
    display: grid;
    grid-template-columns: auto 1fr;
    gap:1em;
}

section.customerVoice ul li .customerVoice_text {
    font-size: 1.4em;
}

section.customerVoice ul li .customerVoice_text span {
    font-weight: 700;
    color: var(--accentColor);
}

section.customerVoice ul li .customerVoice_image img {
    height: 5em;
    width: 5em;
}

@media screen and (max-width: 1400px) {
    section.customerVoice {
        margin-top: 0;
        padding: 3.2rem;
    }
}

@media screen and (max-width: 767px) {
    section.customerVoice {
        padding: 0;
        border-radius: unset;
        margin: 0 auto;
    }


    section.customerVoice ul {
        display: block;
        margin: 2em 1em 0 1em;
    }

    section.customerVoice ul li {
        margin-bottom: 1em;
    }

    section.customerVoice ul li .customerVoice_text {
        font-size: 1.4rem;
        font-weight: 700;
    }
}



/* section.FAQ */

section.FAQ {
    padding: 1em;
}


section.FAQ .FAQ_text h3 {
    margin-bottom: 0.25em;
}

section.FAQ .FAQ_text p {
    margin: 0 0 0.5em 0;    
}

section.FAQ .FAQ_number {
    font-size: 3.5em;
    opacity: 0.3;
    padding: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
}

@media screen and (max-width: 999px) {
    section.FAQ .twoBlock .explain_area {
        order: 2;
    }

    section.FAQ .twoBlock .text_area {
        order: 1;
    }
}

@media screen and (max-width: 767px) {
    section.FAQ .twoBlock  {
        display: grid;
        grid-template-rows: 1fr auto;
        gap: 0;
    }

    section.FAQ .FAQ_number {
        font-size: 2.2em;
    }

}


/* section.flow */

section.flow {
    width: 100%;
    max-width: 140rem;
    padding-top: 3em;
    padding: 1em;
}

section.flow h2 {
    text-align: center;
    margin-bottom: 1em;
}

section.flow .flow_wrap {
    display: grid;
    grid-template-columns: 25% 75%;
    text-align: center;
}

section.flow .flow_wrap .flow_text {
    padding: 3em;
    background: var(--backgroundColorListSub);
    color:  var(--textColor);
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
    display: flex;
    align-items: center;
    background-image: 
            linear-gradient(45deg, var(--backgroundDesign01) 25%, transparent 25%),
            linear-gradient(-45deg, var(--backgroundDesign01) 25%, transparent 25%),
            linear-gradient(45deg, transparent 75%, var(--backgroundDesign01) 75%),
            linear-gradient(-45deg, transparent 75%, var(--backgroundDesign01) 75%)
            ;
    background-size: 40px 40px;
    background-position: 0 0, 0 40px, 40px -40px, -40px 0px;

}

section.flow .flow_wrap .flow_text h3 {
    text-align: center;
}

section.flow .flow_wrap .flow_text p {
    text-align: left;
}

section.flow .flow_wrap .flow_list {
    background: var(--backgroundColorList);
    padding: 3em;
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

section.flow .flow_wrap .flow_list ul li {
    background: var(--backgroundColorWhite);
    padding: 1.0em;
    margin-bottom: 1em;
    text-align: left;
    border-radius: 1rem;
    display: grid;
    grid-template-columns: 14rem 1fr;
    gap: 2rem;
}

section.flow .flow_wrap .flow_list ul li .flow_list_number {
    font-size: 4em;
    font-weight: 700;
    opacity: 0.3;
    border-right: 1px solid var(--textColor);
    text-align: center;
    line-height: 1;
    padding: 0.2em;
}

section.flow .flow_wrap .flow_list ul li h4 {
    margin: 0.25em 0;
}

section.flow .flow_wrap .flow_list ul li p {
    margin: 0;
}

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

    section.flow .flow_wrap {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: 1fr auto;
    }

    section.flow .flow_wrap .flow_text {
        border-top-right-radius: 1rem;
        border-top-left-radius: 1rem;
        border-bottom-right-radius: unset;
        border-bottom-left-radius: unset;
        display: block;
    }
    
    section.flow .flow_wrap .flow_list {
        border-top-right-radius: unset;
        border-top-left-radius: unset;
        border-bottom-right-radius: 1rem;
        border-bottom-left-radius: 1rem;
    }

    section.flow .flow_wrap .flow_text p {
        text-align: center;
    }

}

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

    section.flow {
        padding: 1em 0 0 0;
        background: var(--accentColor_2);
    }


    section.flow h2 {
        margin: 0 auto;
    }


    section.flow .flow_wrap .flow_text {
        padding: 0 1em 1em 1em;
    }

    section.flow .flow_wrap .flow_list {
        padding: 1em;
        border-radius: unset;
    }

    section.flow .flow_wrap .flow_list ul {
        padding-top: 1em;
    }

    section.flow .flow_wrap .flow_list ul li {
        grid-template-columns: 4.5em 1fr;
        gap: 1.5rem;
    }

    section.flow .flow_wrap .flow_list ul li .flow_list_number {
        font-size: 2.2em;
        padding-left: 0;
    }

}

/* section.about */

section.about {
    width: 100%;
    background: var(--backgroundColorContents);
    padding: 4em 2em;
}

section.about > p {
    text-align: center;
    margin-bottom: 3em;
}

section.about h2 {
    text-align: center;
}

section.about article.twoBlock .text_area {
    max-width: 100rem;
}

section.about article.twoBlock .image_area {
    padding: 2em 0;
    text-align: center;
}

section.about article.twoBlock .image_area img {
    height: 100%;
    width: auto;
    object-fit: cover;
    border-radius: 0.5rem;
}

section.about article.twoBlock .text_area ul li {
    border-bottom: 1px solid var(--textColor);
    margin-bottom: 2em;
}

section.about article.twoBlock .text_area ul li:last-child {
    margin-bottom: 0;
}

section.about article.twoBlock .text_area ul li small {
    display: inline-block;
    color: var(--accentColor);
    position: relative;
    background: var(--backgroundColorBrand);
    padding: 0.25em 0.5em;
    margin-top: 0;
    margin-bottom: 1.5em;
    border-left: solid 3px var(--backgroundColorList);
    border-right: solid 3px var(--backgroundColorList);
}

section.about article.twoBlock .text_area ul li h3 {
    margin: 0 0 0.25em 0;
}

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

    section.about {
        padding: 3rem 2rem;
    }


    section.about article.twoBlock {
        gap: 1em;
    }

    section.about article.twoBlock .image_area {
        padding: 0;
        order: 1;
    }

    section.about article.twoBlock .text_area {
        order: 2;
        padding: 3em 0 0 0 ;
    }

    section.about article.twoBlock .text_area .link_area {
        text-align: left;
    }

}



/* section.tri_box */

section.tri_box {
    width: 100%;
    max-width: 140rem;
    padding-top: 4em;
    text-align: center;
}


section.tri_box ul {
    margin-top: 4em;
    display: grid;
    grid-template-columns: repeat(3 , 1fr);
    gap: 2em;
}

section.tri_box ul li {
    background: var(--backgroundColorWhite);
    padding: 3em;
    border-radius: 0.5rem;
}

section.tri_box ul li img {
    aspect-ratio: 1;
    object-fit: cover;
}


section.tri_box ul li h3 {
    margin: 0.25em 0 0 0;
    text-align: left;
    padding-left: 2em;
    position: relative;
}

section.tri_box ul li h3:before {
    color: var(--accentColor);
    position: absolute;
    left: 0;
    top: 0;
}

section.tri_box ul li:nth-child(1) h3:before {
    content:'01';
}

section.tri_box ul li:nth-child(2) h3:before {
    content:'02';
}

section.tri_box ul li:nth-child(3) h3:before {
    content:'03';
}

section.tri_box ul li:nth-child(4) h3:before {
    content:'04';
}

section.tri_box ul li:nth-child(5) h3:before {
    content:'05';
}

section.tri_box ul li:nth-child(6) h3:before {
    content:'06';
}


section.tri_box ul li p {
    text-align: left;
    margin-top: 0.5rem;
    margin-bottom: 0;
}





/* section.environment */

section.environment {
    width: 100%;
    max-width: 140rem;
    text-align: center;
}

section.environment article > p {
    max-width: 76.8rem;
    margin-left: auto;
    margin-right: auto;
}


section.environment h3 {
    margin: 4em auto 1em auto;
    text-align: left;   
}


section.environment ul {
    display: grid;
    grid-template-columns: repeat(3 , 1fr);
    gap: 3em;
    margin-top: 1em;
}

section.environment ul p {
    margin-bottom: 0;
    text-align: left;
}

section.environment ul p span {
    font-size: 0.8em;
    display: block;
    line-height: 1.4;
}


section.environment ul h4 {
    font-size: 1em;
    margin: 0;
}

section.environment ul li {
    padding: 2em;
    background: var(--backgroundColorWhite);
    border-radius: 0.5rem;;
}

section.environment ul li svg {
    width: 5rem;
    height: 5rem;
    margin-bottom: 1em;
    color: var(--accentColor);
}

section.environment .environment_wrap > p {
    font-size: 0.8em;
    text-align: left;
}

section.environment .environment_follow {
    padding: 2em;
    margin: 3em 0;
    text-align: left;
    background: var(--backgroundColorWhite);
    border-radius: 0.5rem;
    display: grid;
    grid-template-columns: 15em 1fr;
    gap: 2em;
}

section.environment .environment_follow img {
    width: auto;
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width: 1399px) {
    section.environment article .environment_wrap {
        padding: 0 2em 2em 2em;
    }
}


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

    section.environment article .environment_wrap {
        padding: 0 1em 1em 1em;
    }

    section.environment ul {
        display: grid;
        grid-template-columns: repeat(2 , 1fr);
        gap: 1em;
        margin-top: 1em;
    }

    section.environment h3 {
        text-align: center;
        margin: 3em auto 1em;
    }

    section.environment .environment_follow {
        padding: 1.5em;
        display: grid;
        grid-template-columns: 10em 1fr;
        gap: 1em;
    }

    section.environment .environment_follow img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
}

@media screen and (max-width: 767px) {
    section.environment article {
        margin: 1em 0 2em 0;
    }
}


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

    section.environment article .environment_wrap {
        padding: 0;
    }

    section.environment ul {
        display: grid;
        grid-template-columns: repeat(1 , 1fr);
        gap: 1em;
        margin-top: 1em;
    }
    section.environment .environment_follow {
        padding: 2em;
        display: block;
        grid-template-columns: 10em 1fr;
        gap: 1em;
    }

    section.environment .environment_follow img {
        width: 100%;
        height: auto;
        object-fit: cover;
        margin-bottom: 1em;
    }


}

/* section.introduction */


section.introduction {
    width: 100%;
    max-width: 140rem;
    text-align: center;
    padding: 3rem 2rem;
}

section.introduction article {
    margin: 4em auto;
}

section.introduction article ul {
    display: grid;
    max-width: 100rem;
    grid-template-columns: 1fr;
    gap: 3em;
    margin: 0 auto;
}

section.introduction article ul li {
    background: var(--backgroundColorWhite);
    border-radius: 1rem;
    padding: 3em;
    text-align: left;
    display: grid;
    grid-template-columns: 20% auto;
    grid-template-rows: auto 1fr;
    gap: 0 2em;
}

section.introduction article ul li .image {
    grid-column: 1 / 2 ;
    grid-row: 1 / 3;
}


section.introduction article ul li .image img {
    width: 100%;
    object-fit: cover;
    height: auto;
    border-radius: 0.5rem;
}

section.introduction article ul li .profile .name {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--accentColor);
}

section.introduction article ul li .profile .hobby, 
section.introduction article ul li .profile .qualification {
    font-size: 1.4rem;
}

section.introduction article ul li .text {
    grid-column: 2 / 3 ;
    grid-row: 2 / 3;
}

section.introduction article ul li .text h2 {
    font-size: 2rem;
}


section.introduction article ul li .text .CTA {
    margin-top: 2.5em;
}


section.introduction article ul li .text .CTA a {
    padding: 1em 1em 1em 2.25em;
    background: var(--CTAColor);
    color: var(--textColorWhite);
    font-weight: 700;
    text-decoration: none;
    border-radius: 0.5rem;
    position: relative;
    line-height: 1;
}

section.introduction article ul li .text .CTA a::before {
    position: absolute;
    content: '≫';
    top: 50%;
    left: 1em;
    transform: translateY(-50%);
}


section.introduction article ul li .text .CTA a:hover {
    background: var(--backgroundColorCTA);
    color: var(--CTAColor);
}

@media screen and (max-width: 999px) {
    section.introduction {
        padding: 3rem 2rem;
    }
}


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

    section.introduction article {
        margin: 3em auto 1em auto;
    }

    section.introduction article ul li {
        padding: 2em;
        text-align: left;
        display: grid;
        grid-template-columns: 8rem auto;
        grid-template-rows: auto 1fr;
        gap: 0 1em;
    }

    section.introduction article ul li .image img {
        aspect-ratio: 1 /1;
    }

    section.introduction article ul li .image {
        grid-column: 1 / 2 ;
        grid-row: 1 / 2;
    }

    section.introduction article ul li .text {
        grid-column: 1 / 3 ;
        grid-row: 2 / 3;
    }

}

/* section.movie */

section.movie {
    width: 100%;
    max-width: 140rem;
    text-align: center;
    padding: 0em auto;
}

article.movieBlock {
    padding: 4em;
    border: 4px dashed var(--borderColor);
    background: var(--backgroundColorContents02);
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 3em;
}

article.movieBlock .text_area {
    text-align: left;
}

article.movieBlock .explain_area iframe {
    aspect-ratio: 2.4 / 1.7;
}

@media screen and (max-width: 1400px) {
    article.movieBlock {
        margin:2em;
    }
}


@media screen and (max-width: 999px) {
    article.movieBlock {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
        gap: 0;
        margin: 2em;
        padding: 2em;
    }

    article.movieBlock .explain_area {
        order: 1;
    }

    article.movieBlock .text_area {
        order: 2;
    }

    article.movieBlock .text_area h2.titleLogo {
        margin: 1em 0px;
    }
}

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

    section.movie {
        padding: 0em 0.75em;
    }

    article.movieBlock {
        padding: 1em;
        margin: 2em 0;
    }

}


/* section.CTA */

section.CTA {
    background: var(--backgroundColorWhite);
    padding: 4em 0;
    margin: 0 auto 0 auto;
}

section.CTA article {
    width: 100%;
    max-width: 140rem;
    text-align: center;
    margin: 0 auto;
}

section.CTA article h2 {
    margin-top: 0;
}

section.CTA article p {
    font-weight: 700;
    color: var(--accentColor);
}

section.CTA ul {
    margin-top: 2em;
}

section.CTA ul li {
    width: 100%;
    max-width: 32rem;
    display: inline-block;
    margin: 0;
    vertical-align: top;
}



section.CTA ul li.freeCall_wrap {
    margin-right: 1em;
    background: var(--backgroundColorWhite);
}

section.CTA ul li.freeCall_wrap a {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5em;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.5em;
    background: var(--backgroundColorWhite);
    border: 2px solid var(--linkColor)
}

section.CTA ul li.freeCall_wrap .image {
    place-items: center;
    padding-top: 0.25em;
}

section.CTA ul li.freeCall_wrap a img {
    height: 1.5em;
    width: auto;
}

section.CTA ul li.freeCall_wrap .text {
    font-size: 2.6rem;
    line-height: 1.4;
    display: grid;
    align-items: center;
}

section.CTA ul li.freeCall_wrap .text span {
    font-size: 1.6rem;
}

section.CTA ul li a {
    width: 100%;
    padding: 0.75em;
    background: var(--textColorWhite);
    display: block;
    border: 1px solid var(--grayColor);
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;
}


section.CTA ul li a::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    opacity: 0;
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}

section.CTA ul li a:hover::after {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 1;
}

section.CTA ul li a.btn_CTA {
    background: var(--CTAColor);
    color: var(--textColorWhite);
    text-decoration: none;
    font-weight: 700;
    padding-left: 3em;
    text-align: center;
    font-size: 1.3em;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2), 4px 4px 5px rgba(0, 0, 0, 0.1);
}

section.CTA ul li a.btn_CTA::before {
    content: "≫";
    position: absolute;
    top: 50%;
    left: 1.2em;
    transform: translate(-50%, -50%);
    font-size: 1.5em;
    color: var(--textColorWhite);
    z-index: 0;
    pointer-events: none;
}

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

    section.CTA {
        margin: 0;
    }

    section.CTA ul {
        margin-top: 4em;
    }
    section.CTA ul li {
        margin: 0 auto;
    }

    section.CTA ul li.freeCall_wrap {
        margin: 0 auto;
        order: 2;
    }
}

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

    section.CTA {
        padding: 4em 0px;
        text-align: center;
        margin: 0 auto;
    }

    section.CTA h2 {
        font-size: 1.6rem;
    }

    section.CTA article p {
        margin: 1em;
    }

    section.CTA ul {
        width: 100%;
        max-width: 100%;
        display: block;
        margin: 0 auto;
        padding-left: 1em;
        padding-right: 1em;
    }

    section.CTA ul li.freeCall_wrap {
        margin: 0 auto;
        margin-bottom: 1em;
    }

    section.CTA ul li.freeCall_wrap a {
        font-size: 1em;
        gap: 0.5em;
    }

    section.CTA ul li a.btn_CTA::before {
        left: 1em;
    }

    section.CTA ul li.freeCall_wrap .text {
        font-size: 1.6em;
    }

    section.CTA ul li.freeCall_wrap a img {
        height: 2em;
    }

    section.CTA ul li a.btn_CTA {
        padding: 0.5em 0.5em 0.5em 3em;
    }
}

/* section.houki */

section.houki {
    width: 100%;
    max-width: 140rem;
    margin: 0 auto;
    background: var(--backgroundColorWhite);
    border-radius: 0.5rem;
    padding: 1em;
}

section.houki article {
    width: 100%;
    max-width: 100rem;
    padding: 6em 0;
    margin: 0 auto;
}

@media screen and (max-width: 767px) {
    section.houki article {
        width: 100%;
        padding: 1em 0;
        margin: 0 auto;
    }
}

/* section.faq */

summary {
  display: block;
}

section.faq {
    width: 100%;
    max-width: 140rem;
    padding: 2em;
    margin: 0px auto;
    background: var(--backgroundColorBrand);
    border-radius: 0.5rem;
}

section.faq h2 {
    text-align: center;
    margin-bottom: 1em;
}

section.faq article {
    margin: 1em 0 0 0;
}


section.faq article details {
    border: 1px solid var(--accentColor);
    margin: 0 auto 1em auto;
    border-radius: 0.5rem;
    max-width: 100rem;
}

section.faq article details summary {
    background: var(--backgroundColorContents02);
    padding: 1em 2.75em 1em 2.75em;
    font-size: 1.2em;
    color: var(--textColor);
    position: relative;
    font-weight: 700;
    border-radius: 0.5rem;
}

section.faq article details summary::before {
    content: 'Q.';
    color: var(--brandColor);
    position: absolute;
    top: 50%;
    left: 1em;
    transform: translateY(-50%);
}

section.faq article details summary span.icon {
    display: block;
    width: 20px;
    margin-left: 6px;
    flex-shrink: 0;
    transform-origin: center 43%;
    transition: transform 0.4s;
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -3px;
}

section.faq article details summary span.icon::after,
section.faq article details summary span.icon::before {
    content: "";
    position: absolute;
    display: block;
    width: 2.4rem;
    height: 0.5rem;
    background-color: var(--brandColor);
}

section.faq article details summary span.icon::after {
    transform: rotate(-90deg);
}

section.faq article details[open] summary span.icon {
    transform: rotate(45deg);
}


section.faq article details .faq_text {
    padding: 1.5em 1.5em 1.5em 4.5em;
    background: var(--backgroundColorWhite);
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    position: relative;
    border-top: 1px dotted var(--borderColor);
}

section.faq article details .faq_text::before {
    content: 'A.';
    color: var(--linkColor);
    position: absolute;
    top: 0;
    left: 0;
    font-size: 1.2em;
    font-weight: 700;
    width: 5rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px dotted var(--borderColor);
}

@media screen and (max-width: 767px) {
    section.faq {
        margin: 0 auto;
        padding: 1em;
    }

    section.faq h2 {
        text-align: center;
        margin: 1.5em auto;
    }
}



/*-- footer --*/

footer { 
    width: 100%;
    background: var(--backgroundColorContents02);

}

footer section.column {
    max-width: 100%;
    width: 100%;
    background: var(--linkColor);
    padding: 5em 3em;
    color: var(--textColorWhite);
}

footer section.column ul {
    display: grid;
    grid-template-columns: repeat(4 , 1fr);
    gap: 1em;
    margin: 3em 0;
}

footer section.column ul a {
    background: var(--backgroundColorWhite);
    color: var(--linkColor);
    padding: 1.5em 1em 1em 1em;
    display: block;
    position: relative;
    height: 100%;
    text-decoration: none;
    border-radius: 0.25rem;
}

footer section.column ul a:hover {
    color: var(--textColor);
    background: var(--brandColor);
    text-decoration: none;
}

footer section.column ul a::before {
    position: absolute;
    content:'≫';
    bottom: 0.75em;
    right: 0.75em;
    padding: 0.3em 0.25em 0.3em 0.35em;
    background: var(--linkColor);
    color: var(--textColorWhite);
    border-radius: 50%;
    font-size: 1.6rem;
    line-height: 1;
    font-weight: 700;
}

footer section.column ul a:hover::before {
    background: var(--backgroundColorWhite);
    color: var(--linkColor);
}


footer section.column ul li .date {
    font-size: 1.2rem;
}

footer section.column ul li .image {
    position: relative;
    padding-bottom: 0.5em;
}

footer section.column ul li .image img {
    width: 100%;
}


footer section.column div.column_link {
    text-align: right;
    margin: 0;
}

footer section.column div.column_link a {
    display: inline;
}

@media screen and (max-width: 999px) {
    footer section.column ul {
        grid-template-columns: repeat(2 , 1fr);
        gap: 1em;
    }
}

@media screen and (max-width: 767px) {
    footer section.column {
        padding: 2em 1em;
    }

    footer section.column h2 {
        padding-left: 1.6rem; 
    }

    footer section.column ul {
        display: block;
        margin: 1em auto;
    }

    footer section.column ul li {
        margin-bottom: 2em;
    }
}

/* section.footer_link */

section.footer_link {
    width:100%;
    max-width: 140rem;
    font-weight: 700;
}

section.footer_link a {
    text-decoration: none;
    font-size: 1.4rem;
}

section.footer_link h2 {
    text-align: center;
    padding-bottom: 1em;
}

section.footer_link h2 img {
    height: 8rem;
    width: auto;
}

section.footer_link article {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;   
}

section.footer_link article div {
    padding: 2em clamp( 1rem, ( 100vw - 76.8rem ) * 10 / 232 + 1rem, 2rem) ;
}

section.footer_link article ul li {
    margin-bottom: 0.5em;
}

section.footer_link article .features a:before,
section.footer_link article .main_link a:before,
section.footer_link article .sub_link  a:before {
    content: '≫ ';
}

section.footer_link article .features ul li a:before {
    content: '└ ';
}

section.footer_link article .features ul {
    display: grid;
    grid-template-columns: repeat(2 , 1fr);
    gap: 0 2em;
    margin-top: 1em;
}


section.footer_link article .features {
    background: var(--backgroundColorContents02);
}


section.footer_link article .main_link,
section.footer_link article .sub_link {
    margin-left: 0.5em;
    background: var(--backgroundColorContents02);
}

section.footer_copy {
    padding-bottom: 3em;
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 0;
}

@media screen and (max-width: 999px) {
    section.footer_link article div {
        padding: 2em;
    }
    section.footer_link article {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;   
    }
    section.footer_link article .features {
        grid-column: 1 /3;
        margin-bottom: 1em;
    }
   
    section.footer_link article .main_link {
        margin-left: 0;
    }

    section.footer_link article .main_link,
    section.footer_link article .sub_link {
        border-left: none;
    }
}



@media screen and (max-width: 767px) {
    section.footer_link {
        padding: 0;
    }

    section.footer_link article {
        display: block;
    }

    section.footer_link article ul li {
        margin-bottom: 0;
    }


    section.footer_link article div {
        padding: 0;
    }

    section.footer_link article .features {
        border-bottom: none;
        margin-bottom: 0;
    }

    section.footer_link article .features > a {
        border-top: 1px solid var(--borderColor);
        border-bottom: 1px solid var(--borderColor);
        background: var(--backgroundColorBrand);
    }

    section.footer_link article .features ul {
        display: block;
        margin-top: 0;
    }

    section.footer_link article .features ul li {
        margin-bottom: 0;
        border-bottom: 1px solid var(--borderColor);
    }

    section.footer_link article .main_link, 
    section.footer_link article .sub_link {
        border-left: none;
        margin-left: 0;
        border-bottom: none;
    }

    section.footer_link article .main_link ul li a {
        background: var(--backgroundColorBrand);
        border-bottom: 1px solid var(--borderColor);
    }

    section.footer_link article a {
        padding: 1em;
        display: block;
        text-decoration: none;

    }

    section.footer_link article .sub_link ul li a {
        border-bottom: 1px solid var(--borderColor);
    }

    section.footer_link article .sub_link ul li.CTA a {
        background: var(--CTAColor);
        color: var(--textColorWhite);
    }

    section.footer_copy {
        font-size: 1rem;
        margin-bottom: 10em;
    }

    section.footer_link article .sub_link ul li.link_blank {
        background: var(--backgroundColor);
        padding: 0;
        border-bottom: 1px solid var(--borderColor);
    }

}

/* section.footer_CTA */

section.footer_CTA {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    margin: 1em;
    padding: 0;
    z-index: 3;
}


section.footer_CTA .pc_footer_CTA a {
    display: grid;
    place-items: center;
    height: 16rem;
    width: 16rem;
    background: var(--CTAColor);
    color: var(--textColorWhite);
    border-radius: 50%;
    text-align: center;
    font-weight: 700;
    text-decoration: none;
    border: 4px solid var(--textColorWhite);
    position: relative;
    overflow: hidden;
    filter: drop-shadow(2px 2px 2px var(--borderColor));
}
 
  
.pc_footer_CTA a::before {
    content: "≫";
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    font-size: 10em;
    color: rgba(255, 255, 255, 0.1);
    z-index: 0;
    pointer-events: none;
}

section.footer_CTA .pc_footer_CTA a::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    opacity: 0;
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}
  
section.footer_CTA .pc_footer_CTA a:hover::after {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 1;
}


section.footer_CTA .sp_footer_CTA {
    display: none;
}


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

    section.footer_CTA {
        position: fixed;
        bottom: 0;
        right: 0;
        margin: 0;
        padding: 0;
        width: 100%;
        z-index: 3;
        height: 6rem;
    }

    section.footer_CTA .pc_footer_CTA { display: none; }

    section.footer_CTA .sp_footer_CTA {
        display: block;
    }

    section.footer_CTA ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        height: 100%;
    }
    
    section.footer_CTA ul li {
        text-align: center;
    }

    section.footer_CTA ul li a {
        font-size: 1.2rem;
        line-height: 1.6;
        overflow: hidden;
        height: 6.0rem;
        box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.2);
    }

    section.footer_CTA ul li.CTA_btn a {
        padding: 0.5em 0.25em 0.5em 1.5em;
        display: grid;
        background: var(--CTAColor);
        color: var(--textColorWhite);
        text-decoration: none;
        font-weight: 700;
        position: relative;
        place-items: center;
        font-size: clamp( 1.2rem, ( 100vw - 32rem ) * 4 / 448 + 1.2rem, 1.6rem );
        border-left: 1px solid #fff;
        border-top: 2px solid #fff;
     }

    section.footer_CTA ul li.CTA_btn a::before {
        content: "≫";
        width: 1.75em;
        height: 2.25em;
        position: absolute;
        top: 50%;
        left: 0.25em;
        transform: translateY(-50%);
        line-height: 2.25em;
        font-size: 1.75rem;
    }



    section.footer_CTA ul li.freeCall_btn a {
        font-size: 1.3rem;
        line-height: 1.0;
        padding: 1.0em 0.25em 1.0em 2.5em;
        display: grid;
        text-decoration: none;
        font-weight: 700;
        background: var(--linkColor);
        color: var(--textColorWhite);
        position: relative;
        place-items: center;
        border-right: 1px solid #fff;
        border-top: 2px solid #fff;
    }

    section.footer_CTA ul li.freeCall_btn a::before {
        content: "";
        width: clamp( 2.25em, ( 100vw - 32rem ) * 12.5 / 20 + 2.25em, 3.5rem );
        height: clamp( 2.25em, ( 100vw - 32rem ) * 12.5 / 20 + 2.25em, 3.5rem );
        background-image: url('/lp/bg_001/assets/image/freeCallWhite.png');
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        position: absolute;
        top: 50%;
        left: 0.5em;
        transform: translateY(-50%);
    }

    section.footer_CTA ul li.freeCall_btn a span {
        font-size: 1.0rem;
    }
}