@charset "UTF-8";

/*Base setting*/

:where(:not(iframe, canvas, img, svg, video):not(svg*)) {
    all: unset;
    display: revert
}

*, ::after, ::before {
    box-sizing: border-box
}

ol, ul {
    list-style: none
}

img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

table {
    border-collapse: collapse
}

textarea {
    white-space: revert
}

*, ::after, ::before {
    box-sizing: border-box
}

blockquote, body, dd, dl, figure, h1, h2, h3, h4, p {
    margin: 0
}

ol[role=list], ul[role=list] {
    list-style: none
}

html:focus-within {
    scroll-behavior: smooth
}

html {
    overflow-y: scroll;
}

body {
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    line-height: 1.5
}

a:not([class]) {
    -webkit-text-decoration-skip: ink;
    text-decoration-skip-ink: auto
}

button, input, select, textarea {
    font: inherit
}

a {
    text-decoration: none
}

button {
    padding: 0;
    margin: 0;
    cursor: pointer;
    background-color: transparent;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

input[type=button], input[type=submit] {
    -webkit-appearance: none;
    border-radius: 0
}

/*custom properties*/

:root {
    --bg-color: #ffffff;
    --text-color: #333333;
    --text-sub-color: #555555;
    --white: #ffffff;
    --black: #000000;
    --blue: #0068B7;
    --navy: #1E3B53;
    --purple: #A63480;
    --orange: #ED7100;
    --yellow: #FEDC5E;
    --lightyellow: #FFFCA9;
    --green:#308d32;
    --lightgreen:#c9fac5;
    --red: #E60012;
    --pink: #E85298;
    --lightpink: #f7d9e3;
    --darkgray: #666;
    --gray: #D0CBCF;
    --lightgray: #F7F6F7;
    --bk-purple: #f6ebf2;
    --bk-orange: #fdf1e5;
    --bk-navy: #e8ebee;
    --bk-sky: #DDF0FE;
    --bk-green: #d1eed4;
    --bk-gray: #F5F5F5;
    --bk-beige: #F8F6E7;
    --font-xx-large: clamp(1.5rem, 1.136rem + 1.82vw, 2.5rem);
    --font-x-large: clamp(1.25rem, 0.917rem + 1.67vw, 1.75rem);
    --font-large: clamp(1.125rem, 0.989rem + 0.68vw, 1.5rem);
    --font-midium: clamp(1rem, 0.909rem + 0.45vw, 1.25rem);
    --font-midium-small: clamp(0.75rem, 0.614rem + 0.68vw, 1.125rem);
    --font-reg: clamp(0.875rem, 0.83rem + 0.23vw, 1rem);
    --font-small: clamp(0.625rem, 0.534rem + 0.45vw, 0.875rem);
    --font-x-small: clamp(0.75rem, 0.667rem + 0.42vw, 0.875rem);
    --font-xx-small: clamp(0.625rem, 0.542rem + 0.42vw, 0.75rem);
}

/*Design setting*/

.bk-white {
    background-color: var(--white);
}

.bk-purple {
    background-color: var(--bk-purple);
}

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

.bk-navy {
    background-color: var(--bk-navy);
}

.bk-sky {
    background-color: var(--bk-sky);
}

/*Font setting*/

.font-larger {
    font-size: 2em;
}

.font-xx-large {
    font-size: var(--font-xx-large);
}

.font-x-large {
    font-size: var(--font-x-large);
}

.font-large {
    font-size: var(--font-large);
}

.font-midium {
    font-size: var(--font-midium);
}

.font-midium-small {
    font-size: var(--font-midium-small);
}

.font-small {
    font-size: var(--font-small);
}

.font-x-small {
    font-size: var(--font-x-small);
}

.font-xx-small {
    font-size: var(--font-xx-small);
}

.font-bold {
    font-weight: 700;
}

/*Text setting*/

.text {
    margin-top: 1rem;
    line-height: 1.75;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.text-small {
    font-size: 0.75em;
}

.text-x-small {
    font-size: 0.5em;
}

.inline-block {
    display: inline-block;
}

.text-list {
    list-style: disc;
}

.text-star-indent {
    padding-left:1em;
    text-indent: -1em;
}

.line-height-min {
    line-height: 1.2;
}

.text-red {
    color: var(--red);
}

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

.link-text {
    display: inline-block;
    text-decoration: underline;
}

.link-text:hover {
    background-color: var(--sub-color);
}

@media (width < 768px) {
    .sp-text-left {
       text-align: left;
    }
}

@media (width >= 768px) {
    .sp-only {
        display: none;
    }    
}

@media (width < 768px) {
    .pc-only {
        display: none;
    }   
}

/*-----------Page setting-----------*/

body, html {
    font-family: "BIZ UDPGothic", sans-serif;
    color: var(--text-color);
    word-break: break-word
}

body {
    background-color: var(--bg-color);
    position: relative;
    display: flex;
    flex-flow: column;
    min-height: 100vh;
}

/*Header setting*/

.header {
    width: 100%;
    background-color: var(--white);
    display: flex;
    justify-content: center;
    padding: 0.75rem;

    .headerlogo {
        width: 540px;
        height: auto;
    }

    @media (width < 768px) {
        .headerlogo {
            width: 80vw;
        }
      }

}

/*Section setting*/

.section {
    padding-block-end: 5rem;
    text-align: center;
}

@media (width < 768px) {
    .section {
        padding-block-end: 3rem;
    }
}

/*Heading setting*/

.heading-title {
    margin: 0 auto 0 auto;
    padding-block-end: .75rem;
    border-bottom:5px solid var(--red);
    line-height: 1.2;
    text-align: center;

    & img {
        width: 430px;
        height: auto;
    }
}

@media (width < 768px) {
    .heading-title img {
        width: 75vw;
    }
  }

.heading-title02 {
    margin: 0 auto 0 auto;
    margin-block-start: 3rem;
    padding-inline-start: 1em;
    text-indent: -1em;
    text-align: left;
}

.heading-title02::before {
    content:"●";
    color:var(--red)
}

.section-number::before {
    content: '';
    position: absolute;
    top: -88px;
    left:0;
    right:0;
    margin: auto;   
    display: block;
    width: 160px;
    height: 160px;
}

@media (width < 768px) {
    .section-number::before {
        width: 80px;
        height: 80px;
        top: -50px;
    }
  }

.number-01::before {
    background: url(../img/number-01.svg) no-repeat center center / contain;
}
.number-02::before {
    background: url(../img/number-02.svg) no-repeat center center / contain;
}
.number-03::before {
    background: url(../img/number-03.svg) no-repeat center center / contain;
}

.wrapper {
}

.inner {
    position: relative;
    width: 1200px;
    margin: auto;
    text-align: center;
}

@media (width < 768px) {
    .inner {
        width: 95vw;
    }
  }

/*Top Section*/

.section-top {
    width: 100%;
    position: relative;
    padding-block-end: 0;
}

.top-title {
    position: relative;
    width: 100%;
    height: 700px;
}

@media (width < 768px) {
    .top-title {
        height: auto;
    }
}

.top-kv {
    position: relative;
    min-width: 1280px;
    height:714px;
    margin: 0 auto;
    background:
        url(../img/kv-concentration-line.png) no-repeat center center / cover,
        radial-gradient(50% 50% at 50% 50%, #FFFFFF 0%, #D0CBCF 75%);
}

@media (width < 768px) {
    .top-kv {
        min-width: 100vw;
        height:70vw;
    }
  }

.site-title-wrap {
    display: grid;
    place-items: center;
    position: absolute;
    bottom: -64px;
    left:0;
    right:0;
    margin: auto;
    width: 800px;
    height: 200px;
    background: var(--red);
    z-index: 3;
}

@media (width < 768px) {
    .site-title-wrap {
        bottom: -120px;
        width: 75vw;
        height: auto;
        padding: 1rem;
    }
  }

.site-title-text {
    display: inline-block;
    margin-block-end: .25em;
    color:var(--yellow);
    font-size: clamp(1.125rem, 0.898rem + 1.14vw, 1.75rem);
}

.site-title-img {
    max-width: 432px;
    height: auto;
}

.site-catch {
    height: 160px;
    display: grid;
    place-items: center;
    background: var(--red);
}

@media (width < 768px) {
    .site-catch {
        height: auto;
        padding-block: 1.5rem;
    }
  }

.site-catch-img {
    width: 875px;
    height: auto;
}

@media (width < 768px) {
    .site-catch-img {
        width: 80vw;
    }
  }

.top-talent {
    position: absolute;
    top: -24px;
    left:0;
    right: 0;
    margin: auto;
    width: 624px;
    height: auto;
    z-index: 2;
    animation: talentIn 1s ease-out;
    animation-delay: .5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@media (width < 768px) {
    .top-talent {
        top: 0;
        bottom:0;
        right: 0;
        width: 60vw;
    }
  }

@keyframes talentIn {
    0% {
        transform: scale3d(0,0,0);
        opacity: 0;
    }
    100% {
    transform:  scale3d(1,1,1);
    }
    40%,100% {
    opacity: 1;
    }
}

.top-illust-item {
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right: 0;
    margin: auto;
    width: 1199px;
    height: auto;
    z-index: 1;
    animation: itemIn 1s ease-out;
    animation-delay: .7s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes itemIn {
    0% {
        transform: scale3d(0,0,0);
        opacity: 0;
    }
    100% {
    transform:  scale3d(1,1,1);
    }
    40%,100% {
    opacity: 1;
    }
}

.kv-drawncharacter {
    position: absolute;
    top:-24px;
    left:0;
    right:0;
    margin: auto;
    width: 620px;
    height: auto;
    z-index: 2;
    animation: drawnIn 1s ease-out;
    animation-delay: .7s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes drawnIn {
    0% {
        transform: translateY(200px);
        opacity: 0;
    }
    100% {
    transform: translateY(0px);
    }
    40%,100% {
    opacity: 1;
    }
}

@media (width < 768px) {
    .kv-drawncharacter {
        top: -8px; 
        width: 90vw;
    }
}

.kv-chara-momo {
    position: absolute;
    bottom:0;
    left:0;
    right:0;
    height: auto;
    z-index: 2;
    animation: charaIn 1s ease-out;
    animation-delay: 1.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes charaIn {
    0% {
        opacity: 0;
    }
    100% {
    opacity: 1;
    }
}

@media (width >= 768px) {
    .kv-chara-momo {
        margin: auto;
        width: 192px;
        transform: translateX(-620px);
    }
}

@media (width < 768px) {
    .kv-chara-momo {
        width: 80px;
    }
}

.kv-chara-monkey {
    position: absolute;
    bottom:0;
    height: auto;
    z-index: 2;
    animation: charaIn 1s ease-out;
    animation-delay: 1.75s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@media (width >= 768px) {
    .kv-chara-monkey {
        left:0;
        right:0;
        margin: auto;
        width: 112px;
        transform: translateX(620px);
    }
}

@media (width < 768px) {
    .kv-chara-monkey {
        width: 56px;
        right:0;
    }
}

/*Report*/

.section-report {
    padding-block-start: 240px;
    background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px)),
                    linear-gradient(90deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px));
    background-size: 8px 8px;
    background-repeat: repeat;
    background-position: top center;
}

@media (width < 768px) {
    .section-report {
        padding-block-end: 0;
        border:1px solid var(--white);
    }
}

.report-title {
    width: 800px;
    height: auto;
    margin: 3rem auto 1rem auto;
    padding: 1rem 0;
    background: var(--white);
    border-top:4px solid var(--red);
    border-bottom:4px solid var(--red);
    font-size: var(--font-x-large);
    text-align: center;
}

@media (width < 768px) {
    .report-title {
        width: 100%;
    }
}

.report-catch {
    font-size: var(--font-large);
    font-weight: 700;
}

.report-talent {
    position: absolute;
    left:40px;
    top:-160px;
    width: 336px;
    height: auto;
    z-index: 3;
    animation: charaIn 1s ease-out;
    animation-delay: 2.25s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@media (width < 768px) {
    .report-talent {
        top:-172px;
        width: 152px;
    }
}

.report-illust {
    position: absolute;
    right:40px;
    top:-40px;
    width: 250px;
    height: auto;
    z-index: 3;
    animation: charaIn 1s ease-out;
    animation-delay: 2.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@media (width < 768px) {
    .report-illust {
        top:-88px;
        width: 120px;
    }
}

.report-list {
    position: relative;
    width: 1082px;
    margin: 1rem auto;
    padding: 0 0 0 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 16px;
    z-index: 5;
}

@media (width < 768px) {
    .report-list {
        width: 100%;
        gap: 8px;
    }    
}

.report-list-item img {
    width: 100%;
    height: auto
}

/*Point*/

.point-lead-wrap {
    width: 100%;
    padding: 0 0 2rem 0;
    background: var(--lightgray);
}

.point-heading {
    position: relative;
    padding:3rem 0;
    text-align: center;
    font-size: var(--font-xx-large);
    background: var(--red);
    color:var(--white);
}

@media (width < 768px) {
    .point-heading {
        padding:1.5rem 0;
    }
}

.point-heading::after {
    position: absolute;
    bottom: -88px;
    left: 0;
    right: 0;
    margin: auto;
    content: "";
    width: 640px;
    height: 88px;
    aspect-ratio: 1/cos(30deg);
    clip-path: polygon(50% 100%,100% 0,0 0);
    background:var(--red);
}

@media (width < 768px) {
    .point-heading::after {
        bottom: -36px;
        width: 160px;
        height: 36px;
    }
}

.point-catch {
    margin-block-start: 8rem;
    text-align: center;
    font-size: var(--font-x-large);
    font-weight: 700;
    color:var(--black);
}

@media (width < 768px) {
    .point-catch {
        position: relative;
        padding-block: .5rem;
        background: var(--white);
        border:2px solid var(--red);
        font-size: var(--font-large);
        z-index: 3;
    }
}

.point-talent {
    position: absolute;
    left:-24px;
    top:-360px;
    width: 312px;
    height: auto;
    z-index: 3;
}

@media (width < 768px) {
    .point-talent {
        left:8px;
        top:-144px;
        width: 120px;
        z-index: 1;
    }
}

.point-chara-momo {
    position: absolute;
    right:-24px;
    top:-252px;
    width: 224px;
    height: auto;
    z-index: 3;
}

@media (width < 768px) {
    .point-chara-momo {
        width: 112px;
        right:8px;
        top:-62px
    }
}

.product-list {
    position: relative;
    width: 980px;
    margin: 1rem auto 2rem auto;
    padding: 0 0 0 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(1, 1fr);
    gap: 16px;
    z-index: 5;
}

@media (width < 768px) {
    .product-list {
        width: 100%;
        gap: 8px;
    }    
}

@media (width < 768px) {
    .movie {
        width: 100%;
        aspect-ratio: 16 / 9;
    }
    .movie iframe {
        width: 100%;
        height: 100%;
    }        
}



.apply-btn-list {
    margin: 2rem auto;
    padding: 0 0 0 0;
}

@media (width >= 768px) {
    .section-point .apply-btn-list {
        width: 980px;
    }    
}

.apply-btn-list li:not(:last-child) {
    margin-block-end: 1rem;
}

.apply-btn {
    position: relative;
    display: block;
    padding:1.5rem 1rem;
    background: var(--red);
    border:4px solid var(--white);
    color:var(--white);
    font-size: var(--font-x-large);
    font-weight: 700;
    border-radius: 16px;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
    transition: 0.3s;
}

@media (width >= 768px) {
    .apply-btn:hover {
        box-shadow: none;
        transform: translate3d(0, 4px, 0);
    }    
}

.apply-btn::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom:0;
    right: 1rem;
    margin: auto;
    width: 56px;
    height: 56px;
    background:url(../img/selectplan-btn-arrow.svg) no-repeat center center / contain;
    transform: rotate(-90deg);
}

@media (width < 768px) {
    .apply-btn::after {
        width: 40px;
        height: 40px;
    }
    
}

.apply-btn.apply-iryo {
    background:url(../img/btn_type-iryo.svg) no-repeat 1rem center / 72px 72px , var(--purple);
}

.apply-btn.apply-teiki {
    background:url(../img/btn_type-teiki.svg) no-repeat 1rem center / 72px 72px , var(--orange);
}

.apply-btn.apply-double {
    background:url(../img/btn_type-iryo.svg) no-repeat 1rem center / 72px 72px ,
    url(../img/btn_type-teiki.svg) no-repeat 6rem center / 72px 72px , 
    var(--navy);
}

@media (width < 768px) {
    .apply-btn.apply-iryo {
        background:url(../img/btn_type-iryo.svg) no-repeat 1rem center / 48px 48px , var(--purple);
    }
    .apply-btn.apply-teiki {
        background:url(../img/btn_type-teiki.svg) no-repeat 1rem center / 48px 48px , var(--orange);
    }

    .apply-btn.apply-double {
        background:url(../img/btn_type-iryo.svg) no-repeat 1rem 14px / 48px 48px ,
        url(../img/btn_type-teiki.svg) no-repeat 1rem 70px / 48px 48px , 
        var(--navy);
    }   
}

.apply-btn-subtxt {
    display: block;
    margin-block-end: .25rem;
    font-size: clamp(0.75rem, 0.614rem + 0.68vw, 1.125rem);
}

@media (width >= 768px) {
    .apply-btn br {
        display: none;
    }    
}












.point-title {
    margin-block-start:3rem ;
    color:var(--red);
    font-size: var(--font-xx-large);
}

@media (width < 768px) {
    .point-title {
        margin-block-start: 1rem;
    }
}

.point-list {
    width: 1176px;
    margin: 1rem auto;
    padding: 0 0 0 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(1, 1fr);
    gap: 8px;
}

@media (width < 768px) {
    .point-list {
        width: 100%;
        margin-block: 0 0;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 8px;
    }
}

.point-list-item {
    display: grid;
    place-content: center;
    place-items: center;
    width: 288px;
    height: 288px;
    border-radius: 50%;
    background: var(--red);
    font-size: var(--font-x-large);
    color:var(--yellow);
}

@media (width < 768px) {
    .point-list-item {
        width: 46vw;
        height: 46vw;
        font-size: var(--font-large);
    }
}

.point-subtitle {
    position: relative;
    margin-block-start: 3rem;
    color:var(--black);
    font-size: var(--font-x-large);
}

@media (width < 768px) {
    .point-subtitle {
        font-size: var(--font-large);
    }   
}

@media (width >= 768px) {
    .point-subtitle::after {
        position: absolute;
        bottom: -138px;
        right: 64px;
        content: "";
        width: 208px;
        height: 278px;
        background: url(../img/illust_dr-ok.png) no-repeat left center / contain;
    }    
}

.point-subtext {
    margin-block-start: 1rem;
    color:var(--black);
    font-size: var(--font-midium);
}

.questions-title {
    width: 960px;
    display: flex;
    align-items: center;
    margin: 3rem auto 1rem auto;
    color:var(--black);
    font-size: var(--font-large);
}

@media (width < 768px) {
    .questions-title {
        width: 100%;
    }   
}

.questions-title:before,
.questions-title:after {
    content: "";
    height: 3px;
    flex-grow: 1;
    background-color: #ccc;
}

.questions-title:before {
    margin-right: 1rem;
}

.questions-title:after {
    margin-left: 1rem;
}

.questions-text {
    position: relative;
    margin-block-start: 1rem;
    font-size: var(--font-midium);
    color:var(--red);
}

@media (width < 768px) {
    .questions-text {
        margin-block-start: 7rem;
    }
    .questions-text::before {
        position: absolute;
        content: "";
        top: -107px;
        left:0;
        right: 0;
        margin: auto;
        width: 80px;
        height: 107px;
        background: url(../img/illust_dr-ok.png) no-repeat left center / contain;
    }
}

.questions-list {
    width: 960px;
    margin: 2rem auto 1rem auto;
    padding-inline-start: 1rem;
}

@media (width < 768px) {
    .questions-list {
        width: 100%;
    }   
}

.questions-list-item {
    position: relative;
    margin-block-end: 1rem;
    font-size: var(--font-reg);
    line-height: 1.8;
    text-align: left;
}

.questions-list-item::before {
    content:"●";
    display: block;
    position: absolute;
    left:-1rem;
    top:0;
    color:var(--red);    
}



.questions-sup {
    vertical-align: middle;
    font-size: var(--font-xx-small);
    color:var(--pink)
}

.questions-sup-list {
    width: 920px;
    margin: 0 auto;
}

@media (width < 768px) {
    .questions-sup-list {
        width: 100%;
    }   
}

.questions-sup-list-item {
    margin-block-end: 1rem;
    text-indent: -3em;
    line-height: 1.8;
    text-align: left;
    color:var(--pink);
    font-size: var(--font-x-small);
}

.mitigation {
    width: 940px;
    margin: 3rem auto 1rem auto;
    padding: 0 1rem 2rem 1rem;
    border:3px solid var(--navy);
    background: var(--white);
}

@media (width < 768px) {
    .mitigation {
        width: 100%;
        margin: 3rem auto 1rem auto;
        padding-block-end: 1rem;
        border:2px solid var(--navy);
    }
}

.mitigation-title {
    display: inline-block;
    margin: 0 auto;
    padding-inline: 1rem;
    transform: translateY(-50%);
    background: var(--white);
    color:var(--black);
    font-size: var(--font-large);
    text-align: center;
}

.mitigation-text {
    margin-block-end: 1rem;
    color:var(--black);
    font-size: var(--font-midium);
}

@media (width < 768px) {
    .mitigation-text {
        text-align: left;
    }   
}

.mitigation-illust {
    width: 80%;
    height: auto;
    margin: 2rem auto 0 auto;
}

@media (width < 768px) {
    .mitigation-illust {
        width: 100%;
        margin-block-start: 1rem; 
    }   
}

.mitigation-notice {
    display: flex;
    justify-content: space-around;
    margin: 0 auto 1rem auto;
    color: var(--red);
}

@media (width >= 768px) {
    .mitigation-notice {
        width: 940px;
    }   
}

@media (width < 768px) {
    .mitigation-notice {
        font-size: var(--font-x-small);
    }
}

.mitigation-notice-num {
    display: inline-block;
    width: 4em;
    height: 2.25em;
    padding: .25rem;
    border:1px solid var(--red);
    background: var(--lightyellow);
    text-align: center;
}

.mitigation-notice-text {
    width: calc(100% - 5em);
    padding-block-start: calc(0.25em + 1px);
    text-align: left;
}

.selectplan-wrap {
        margin-block-start: 10rem;
    }

@media (width < 768px) {
    .selectplan-wrap {
        margin-block-start: 2rem;
    }  
}

.selectplan-title {
    color: var(--black);
}

@media (width >= 768px) {
    .selectplan-title {
        padding-block-end: 3rem;
        font-size: var(--font-x-large);
    }
}

@media (width < 768px) {
    .selectplan-title {
        padding: 1rem 1rem 2rem 1rem;
        background: var(--white);
        box-shadow: inset 4px 4px 4px 0px rgba(0, 0, 0, 0.3);
        border:4px solid var(--red);
        border-radius: 16px;
        font-size: var(--font-large);
        color: var(--red);
    }
}


.selectplan-talent {
        height: auto;
    }

@media (width >= 768px) {
    .selectplan-talent {
        position: absolute;
        left:0;
        bottom:0;
        width: 256px;
    }    
}

@media (width < 768px) {
    .selectplan-talent {
        display: block;
        width: 160px;
        margin: -2rem auto 0 auto;
    }
}

.selectplan-bar {
    padding: 2rem;
    background: var(--red);
}

@media (width < 768px) {
    .selectplan-bar {
        padding: 1rem;
    }   
}

.selectplan-list {
    margin: 0 auto;
    padding:0 0 0 0;
    display: grid;
}

@media (width >= 768px) {
    .selectplan-list {
        width: 1144px;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(1, 1fr);
        gap: 32px;
    }
}

@media (width < 768px) {
    .selectplan-list {
        width: 100%;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 16px;
    }
    .selectplan-list-item:last-child {
        grid-column: span 2 / span 2;
    }
}


@media (width >= 768px) {
    .selectplan-list-item {
        width: 360px;
        height:192px;
    }    
}

@media (width >= 768px) {
    .selectplan-btn {
        position: relative;
        display: block;
        width: 360px;
        height:160px;
        border-radius: 8px;
        border:3px solid var(--white);
    }
    .selectplan-btn::before {
        content: "";
        position: absolute;
        bottom: -26px;
        left:0;
        right: 0;
        margin: auto;
        width: 56px;
        height: 56px;
        background:url(../img/selectplan-btn-arrow.svg) no-repeat center center / contain;
        z-index: 2;
    }
    .selectplan-btn:hover::before {
        animation: selectplan-btn-anime 0.4s ease 0s infinite alternate;
    }    
    .selectplan-btn::after {
        content: "";
        position: absolute;
        bottom: -40px;
        left:0;
        right: 0;
        margin: auto;
        width: 80px;
        height: 40px;
        border:4px solid var(--white);
        border-bottom-left-radius: 50px;
        border-bottom-right-radius: 50px;
        border-top: none;
    }
    .selectplan-btn-text {
        display: block;
        padding-block-start: 1rem;
        font-size: var(--font-midium);
        color:var(--white);
    }
    .selectplan-btn-num {
        display: block;
        padding-block-start: .5rem;
        font-size: var(--font-xx-large);
        color:var(--white);
    }
}

@keyframes selectplan-btn-anime {
  from {
    transform: translateY(0px);;
  }
  to {
    transform: translateY(11px);;
  }
}

@media (width < 768px) {
    .selectplan-btn {
        position: relative;
        display: block;
        width: 100%;
        height:80px;
        margin-block-end: 1rem;
        border-radius: 8px;
        border:2px solid var(--white);
    }
    .selectplan-btn::before {
        content: "";
        position: absolute;
        bottom: -12px;
        left:0;
        right: 0;
        margin: auto;
        width: 24px;
        height: 24px;
        background:url(../img/selectplan-btn-arrow.svg) no-repeat center center / contain;
        z-index: 2;
    }
    .selectplan-btn::after {
        content: "";
        position: absolute;
        bottom: -20px;
        left:0;
        right: 0;
        margin: auto;
        width: 40px;
        height: 20px;
        border:3px solid var(--white);
        border-bottom-left-radius: 50px;
        border-bottom-right-radius: 50px;
        border-top: none;
    }
    .selectplan-btn-text {
        display: block;
        padding-block-start: .75rem;
        font-size: var(--font-x-small);
        color:var(--white);
    }
    .selectplan-btn-num {
        display: block;
        /*padding-block-start: .5rem;*/
        font-size: var(--font-large);
        color:var(--white);
    }
}

.selectplan-iryo,
.selectplan-iryo::after {
    background: var(--purple);
}

.selectplan-teiki,
.selectplan-teiki::after {
    background: var(--orange);
}

.selectplan-double,
.selectplan-double::after {
    background: var(--navy);
}

/*冊子プレゼントバナー*/

.present-banner {
    display: block;
    width: 1080px;
    height: auto;
    margin: 2rem auto 0 auto;
}

@media (width < 768px) {
    .present-banner {
        width: 98vw;
    }
}

.section-plan {
    padding-block: 8rem;
    background: #f5f5f5;
}

@media (width < 768px) {
    .section-plan {
        padding-block-end: 3rem;
    }
}

.plan-header {
    position: relative;
    background: var(--white);
    border:4px solid black;
}

@media (width >= 768px) {
    .plan-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 1080px;
        height: 80px;
        border-radius: 40px;
        margin: -40px auto 0 auto;
        padding-inline: 2rem;
    }
}

@media (width < 768px) {
    .plan-header {
        width: 100%;
        height: 56px;
        margin: -30px auto 0 auto;
        border-radius: 40px;
    }
}

.plan-header-title {
    font-weight: 700;
    color: var(--black);
}

@media (width >= 768px) {
    .plan-header-title {
        width: 476px;
        font-size: var(--font-x-large);
        text-align: left;
    }
}

@media (width < 768px) {
    .plan-header-title {
        position: absolute;
        left:0;
        right:0;
        top:-76px;
        margin: auto;
        font-size: var(--font-large);
    }
}

.plan-header-num {
    border-radius: 50%;
    background: var(--black);
    color: var(--white);
}

@media (width >= 768px) {
    .plan-header-num {
        width: 128px;
        height: 128px;
        font-size: 80px;
        font-weight: 700;
        line-height: 128px;
        transform: translateX(-8px);
    }
}

@media (width < 768px) {
    .plan-header-num {
        position: absolute;
        left:0;
        right:0;
        top:-48px;
        margin: auto;
        display: block;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        font-size: 24px;
        font-weight: 700;
        line-height: 56px;
    }
}

.plan-header-text {
    font-weight: 700;
    color: var(--black);
}

@media (width >= 768px) {
    .plan-header-text {
        width: 476px;
        font-size: var(--font-x-large);
        text-align: right;
    }
}

@media (width < 768px) {
    .plan-header-text {
        position: absolute;
        left:0;
        right:0;
        top:0;
        bottom:0;
        margin: auto;
        height: 1em;
        line-height: 1.0;
        display: inline-block;
        font-size: var(--font-large);
        font-weight: 700;
        color: var(--black);
        text-align: center;
    }
}

.section-iryo {
    background-color: #f6ebf2;

    .plan-header {
        border:4px solid var(--purple);
    }
    .plan-header-title {
        color: var(--purple);
    }
    .plan-header-num {
        background: var(--purple);
    }
}



.section-plan .inner {
    border:8px solid var(--black);
    background: #ccc;
}

@media (width < 768px) {
 .section-plan .inner {
        border-radius: 8px;
    }
}

.plan-title {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 1080px;
    margin: 0 auto;
    padding-block: 4rem;
    font-size: var(--font-x-large);
    font-weight: 700;
    color: var(--black);
}

@media (width < 768px) {
    .plan-title {
        width: 90%;
        padding-block: 2rem;
        flex-direction: column;
        align-items: center;
    }
}

.plan-title-heading {
    width: 480px;
    height: 215px;
}

@media (width < 768px) {
    .plan-title-heading {
        /*width: 85%;*/
        width: 240px;
        height: auto;
    }
}


.plan-title-catch {
    position: relative;
    width: 356px;
    margin-inline-start: 2rem;
    padding-block: 2rem;
    background: var(--white);
    font-size: var(--font-large);
    font-weight: 400;
}

@media (width < 768px) {
    .plan-title-catch {
        width: 100%;
        margin: 80px 0 0 0;
    }
}

.plan-title-catch::before {
    display: block;
    content: "";
    position: absolute;
    left:1rem;
    top: 0;
}

@media (width < 768px) {
    .plan-title-catch::before {
        width: auto;
        height:72px;
    }
}

.plan-title-catch::after {
    display: block;
    content: "";
    position: absolute;
    right: 1rem;
    top: 0;
}

@media (width < 768px) {
    .plan-title-catch::after {
        width: auto;
        height:72px;
    }
}





















.plan-content {
    position: relative;
    margin-block-start: 2rem;
    padding-block: 3rem 4rem;
    padding-inline: 3rem;
    background: var(--white);
}

@media (width < 768px) {
    .plan-content {
        padding-block: 1rem 1rem;
        padding-inline: 1rem;
    }
}

.plan-content::before {
    content: "";
    position: absolute;
    top: -40px;
    left:0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 40px;
    background:url("../img/bk-wave.svg") no-repeat top center / cover;
}

@media (width >= 768px) {
    .guarantee {
        display: grid;
        gap: 24px;
    }   
    .section-iryo .guarantee {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(1, 1fr);
    } 
}

@media (width < 768px) {
    .section-iryo .guarantee {
        display: block;
    }
}

.section-double {
    .plan-title {
        flex-direction: column;
        align-items: center;
        padding-block-start: 1rem;
        
    }
    .double-logo {
        width: 320px;
        height:auto;
        margin: 2rem auto;
    }
    @media (width < 768px) {
        .double-logo {
            width: 160px;
            height:auto;
            margin: 2.5rem auto 1rem auto;
            z-index: 5;
        }
    }
    .double-ex-logo {
        width: 800px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 32px;
        z-index: 2;
    }
    @media (width < 768px) {
        .double-ex-logo {
            width: 100%;
            gap:8px;
        }
    }
    .double-ex-logo img:first-child,
    .double-ex-logo img:last-child {
        width: 424px;
        height: auto;
    }
    @media (width < 768px) {
        .double-ex-logo img:first-child,
        .double-ex-logo img:last-child {
            width: 45%;
        }
        .double-ex-logo img:nth-child(2) {
            width: 10%;
        }
    }
    .double-talent {
        position: absolute;
        left:8px;
        top:96px;
        width: 264px;
        height: auto;
        z-index: 1;
    }
    @media (width < 768px) {
        .double-talent {
            left:-8px;
            top:32px;
            width: 104px;
        }
    }
    .double-speech {
        position: absolute;
        height: auto;
    }
    @media (width >= 768px) {
        .double-speech {
            width: 104px;
            left:180px;
            top:80px;
            width: 208px;
        }
    }
    @media (width < 768px) {
        .double-speech {
            width: 104px;
            top:40px;
            right:-8px;
            z-index: 6;
        }
    }
    .double_recommend {
        position: absolute;
        height: auto;
    }
    @media (width >= 768px) {
        .double_recommend {
            right:-24px;
            top:80px;
            width: 408px;
            transform: rotate(3deg);
        }
    }
    @media (width < 768px) {
        .double_recommend {
            width: 168px;
            z-index:5;
            top:16px;
            left:0;
            right:0;
            margin: auto;
        }
    }
    .guarantee {
        margin-block-start: 4rem;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }
     .guarantee-guide.surgery {
        grid-column-start: 1;
        grid-row-start: 2;
    }
     .guarantee-guide.death {
        grid-row: span 2 / span 2;
        grid-column-start: 2;
        grid-row-start: 1;
    }
}

.guarantee-guide {
    border: 4px solid var(--black);
    padding:0 2rem;
    border-radius: 16px;
}

@media (width < 768px) {
    .guarantee-guide {
        margin-block-end: 3rem;
        padding:2rem 1rem 1rem 1rem;
        border: 2px solid var(--black);
        border-radius: 8px;
    }
}

.guarantee-guide-title {
    position: relative;
    width: 5em;
    margin: -1em auto 1.5rem auto;
    padding-block: .25em;
    background: var(--yellow);
    font-size: var(--font-x-large);
    color: var(--black);
}

@media (width < 768px) {
    .guarantee-guide-title {
        margin: -3.5rem auto 1rem auto;
        transform: translateX(1rem);
    }
}

.guarantee-guide-title::before {
    content: "";
    display: block;
    width: 80px;
    height: 80px;
    position: absolute;
    top: -10px;
    left:-60px;
    background:var(--black);
}

@media (width < 768px) {
    .guarantee-guide-title::before {
        width: 56px;    
        height: 56px;
        top: -8px;
        left:-40px;
    }
}

.guarantee-guide.hospital .guarantee-guide-title::before {
    background:url("../img/icon_hospitalization.svg") no-repeat center center / contain;
}

.guarantee-guide.surgery .guarantee-guide-title::before {
    background:url("../img/icon_surgery.svg") no-repeat center center / contain;
}

.guarantee-guide.death .guarantee-guide-title::before {
    background:url("../img/icon_angel.svg") no-repeat center center / contain;
}


.hospital-price {
    margin: 3rem auto 0 auto;
    font-size: var(--font-xx-large);
    font-weight: 700;
}

@media (width < 768px) {
    .hospital-price {
        margin: 0 auto 0 auto;
    }
}

.hospital-price-text {
    width: 70%;
    margin: .5rem auto 0 auto;
    padding: .25em;
    background: var(--purple);
    border-radius: 2rem;
    font-size: var(--font-large);
    color: var(--yellow);
}

@media (width < 768px) {
    .hospital-price-text {
        width: 90%;
    }
}

.surgery-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (width >= 768px) {
    .surgery-list:last-child {
        margin-block-end: 2rem;
    }    
}



.surgery-list-name {
    text-align: left;
    font-size: var(--font-large);
}

@media (width < 768px) {
    .surgery-list-name {
        font-size: var(--font-midium);
    }
}

.surgery-list-name::before {
    content:"●";
    color:var(--purple);
}

.surgery-list-price {
    text-align: right;
    font-size: var(--font-xx-large);
    font-weight: 700;
}

@media (width < 768px) {
    .surgery-list-price {
        font-size: var(--font-x-large);
    }
}

.insurance-guide {
    position: relative;
    margin-block-start: 2rem;
    text-align: left;
}

@media (width >= 768px) {
    .insurance-guide { 
        padding-inline-start: 8rem;
    }
  }

.insurance-guide-title {
    font-size: var(--font-large);
    color: var(--red);
}

.insurance-guide-subtitle {
    background: var(--black);
    margin-block-end: .5rem;
    padding:.25em .5em;
    text-align: center;
    font-size: var(--font-large);
    color: var(--white);
}

@media (width >= 768px) {
    .insurance-guide-subtitle {
        display: inline-block;
    }
}

.insurance-guide-subtitle.iryo {
    background: var(--purple);
}

.insurance-guide-subtitle.teiki {
    background: var(--orange);
}

.insurance-guide-illust {
    display: block;
    width: 128px;
    height: auto;
    margin: 0 auto 1rem auto;
}

@media (width >= 768px) {
    .insurance-guide-illust {
        position: absolute;
        left:-40px;
        top:-80px;
        width: 160px;
    }
  }

.insurance-guide-text {
    font-size: var(--font-midium);
    color: var(--black);
}

.insurance-guide-note {
    margin-block-start: 1rem;
    padding: 0 0 0 0;
    font-size: var(--font-x-small);
    color: var(--pink);
}

.insurance-guide-note li {
    padding-left: 1em;
    text-indent: -1em;
}

.advice {
    position: relative;
    z-index: 2;
}

.advice-talent {
    display: block;
    width: 148px;
    height: auto;
    margin: 0 auto 0 auto;
}

.advice-title {
    display: inline-block;
    padding: .5em;
    border:3px solid var(--red);
    background: var(--white);
    font-size: var(--font-large);
}

.advice-text {
    width: 856px;
    padding: 3rem 1.5rem 1.5rem 1.5rem;
    margin: -1.5rem auto 1rem auto;
    background: var(--white);
    border: 2px dashed #9FA0A0;
    box-shadow: 8px 8px 0px rgba(255, 255, 255, 0.5);
    font-size: var(--font-midium);
    line-height: 1.8;
}

@media (width < 768px) {
    .advice-text {
        width: 90%;
        border: 1px dashed #9FA0A0;
        text-align: left;
    }
}

.plan-price {
    margin-block-start: -8rem;
    padding: 9rem 2rem 2rem 2rem;
    background: #ccc;
    border-radius: 16px;
}

@media (width < 768px) {
    .plan-price {
        padding-inline: 1rem;
    }
}

@media (width < 768px) {
    .plan-price-wrap {
        overflow:hidden;
        overflow-x: scroll;
    }   
}

.plan-price-title {
    margin-block-start: 1rem;
    font-size: var(--font-large);
}

.plan-price-table {
    position: relative;
    width: 856px;
    margin: 1rem auto;
    z-index: 1;
}

@media (width < 768px) {
    .plan-price-table {
        width: 90vw;
    }   
}

.plan-price-table::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 816px;
    height: 216px;
    border:2px solid var(--black);
    background: var(--white);
    z-index: -1;
}

@media (width < 768px) {
    .plan-price-table::after {
        width: calc(100% - 32px);
        height: 186px;
    }   
}

.plan-price-table tr,
.plan-price-table th,
.plan-price-table td {
    padding:0 0 0 0;
}

.plan-price-table thead tr th:first-child {
    font-size: 0;
}

@media (width < 768px) {
    .plan-price-table thead tr th:not(first-child) {
        padding: 0 1rem 1rem 1rem;
    }    
}

.plan-price-table thead .age {
    display: inline-block;
    padding: .5em 2em;
    font-size: var(--font-large);
    background: var(--black);
    color:#fff;
}

@media (width < 768px) {
    .plan-price-table thead .age {
        padding: .5em 1em;
        text-wrap: nowrap;
    }
}

.plan-price-table tbody th,
.plan-price-table tbody td{
    padding-block-end: .5rem;
}

.plan-price-table tbody .gender {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4em;
    height: 4em;
    font-size: var(--font-midium);
    font-weight: 400;
    background: var(--black);
    border-radius: 50%;
    color:#fff;
}

.plan-price-table .male .gender {
    background:var(--blue);
}

.plan-price-table .female .gender {
    background:var(--pink);
}

.plan-price-table tbody .price {
    font-size: var(--font-xx-large);
    font-weight: 700;
}

.plan-price-table .male .price {
    color:var(--blue);
}

.plan-price-table .female .price {
    color:var(--pink);
}

.plan-price-note {
    margin: 0 auto;
    padding: 0 0 0 0;
    font-size: var(--font-x-small);
    color: var(--pink);
    text-align: right;
}

@media (width >= 768px) {
    .plan-price-note { 
        width: 856px;
    }
  }

.plan-price-text {
    margin-block-start: 1rem;
    font-size: var(--font-midium);
    font-weight: 700;
    color: var(--black);
}

.plan-calculation-btn {
    position: relative;
    display: block;
    width: 100%;
    margin-block-start: 1rem;
    padding-block: 1rem;
    text-align: center;
    background: var(--white);
    border:6px solid var(--black);
    border-radius: 2rem;
    /*box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.25);*/
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
    font-size: var(--font-x-large);
    color:var(--black);
    transition: 0.3s;
}

@media (width < 768px) {
    .plan-calculation-btn {
        padding-inline-start: 1rem;
        border:4px solid var(--black);
        border-radius: 1rem;   
    }

}

@media (width >= 768px) {
    .plan-calculation-btn:hover {
        background: var(--yellow);
        box-shadow: none;
        transform: translate3d(0, 4px, 0);
    }    
}

.plan-calculation-btn::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom:0;
    left: 256px;
    margin: auto;
    width: 64px;
    height: 64px;
    background:url(../img/icon_calculator.svg) no-repeat center center / contain;
}

@media (width < 768px) {
    .plan-calculation-btn::before {
        width: 32px;
        height: 32px;
        left: 4px;
    }
}

.plan-features {
    margin-block-start: 2rem;
}

@media (width >= 768px) {
    .plan-features {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(1, 1fr);
        gap: 32px;
    }
  }

@media (width < 768px) {
    .plan-features {
        display: block;
    }
}

.plan-features-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    row-gap: 16px;
    justify-items: center;
}

@media (width < 768px) {
    .plan-features-card {
        padding-block: 1rem;
    }
    .plan-features-card:not(:last-child) {
        border-bottom:1px solid var(--gray);
    }
}

.plan-features-title {
    font-size: var(--font-large);
}

.plan-features-illust {
    width: 192px;
    height: auto;
}

@media (width < 768px) {
    .plan-features-illust {
       width: 160px;
    }
}

.plan-features-explain {
    font-size: var(--font-midium);
    text-align: left;
}


.public-insurance {
    border-top:2px dashed var(--purple);
    background: var(--white);
    padding: 3rem 10rem;
}

@media (width < 768px) {
    .public-insurance {
        border-top:1px dashed var(--purple);
        padding: 2rem 1rem;
    }    
}

.public-insurance-title {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: top;
    font-size: var(--font-midium);
}

@media (width < 768px) {
    .public-insurance-title  br {
        display: none;
    }
}

.public-insurance-title::before {
    content: "";
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin-right: 1rem;
    background: url(../img/icon_pencil.svg) no-repeat center center / contain, var(--white);
}

@media (width < 768px) {
    .public-insurance-title::before {
        position: absolute;
        top:-56px;
        left:0;
        right:0;
        margin: auto;
    }
}

.link-btn {
    display: inline-block;
    margin-block-start: 2rem;
    padding-block: .75rem;
    padding-inline: 2rem 3rem;
    border-radius: 2rem;
    background: url(../img/icon_extlink_white.png) no-repeat 95% center / 20px 20px, #bd67a0;
    font-size: var(--font-reg);
    color: var(--white);
}

.plan-bottom-block {
    padding-block: 3rem;
}

@media (width < 768px) {
    .plan-bottom-block {
        padding-block: 1rem;
    }
}

.order-btn {
    position: relative;
    display: block;
    margin-inline: 3rem;
    padding-block: .75rem;
    background: var(--black);
    /*box-shadow: 8px 8px 0px var(--white);*/
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
    border:4px solid var(--white);
    border-radius: 3rem;
    font-size: var(--font-x-large);
    color:var(--white);
    transition: 0.3s;
}

@media (width < 768px) {
    .order-btn {
        margin-inline: 1rem;
        border-radius: 1rem;
        border:2px solid var(--white);
        /*box-shadow: 4px 4px 0px var(--darkgray);*/
        box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
    }
}

@media (width >= 768px) {
    .order-btn:hover {
        box-shadow: none;
        transform: translate3d(0, 4px, 0);
    }
  }


.order-btn::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom:0;
    right: 1rem;
    margin: auto;
    width: 56px;
    height: 56px;
    background:url(../img/order-btn-arrow.svg) no-repeat center center / contain;
}

@media (width < 768px) {
    .order-btn::after {
        width: 32px;
        height: 32px;
        right: .5rem;
        background:url(../img/order-btn-arrow.svg) no-repeat center center / contain;
    }
}

.order-btn-plan {
    position: absolute;
    line-height: 1.0;
    color:var(--yellow)
}

@media (width < 768px) {
    .order-btn-plan {
        top:.5rem;
        left:1rem;
        font-size: var(--font-xx-small);
    }
}

@media (width >= 768px) {
    .order-btn-plan {
        height:1em;
        left:2.5rem;
        top:0;
        bottom:0;
        margin: auto;
    }
  }

.order-btn-num {
    position: absolute;
    display: block;
    margin: auto;
    border-radius: 50%;
    background: var(--black);
    color:var(--yellow);
    font-weight: 700;
}

@media (width < 768px) {
    .order-btn-num {
        left:.75rem;
        top:1rem;
        bottom:0;
        width: 40px;
        height: 40px;
        line-height: 36px;
        font-size: 22px;
        border:2px solid var(--white);
    }
}

@media (width >= 768px) {
    .order-btn-num {
        left:9rem;
        top:0;
        bottom:0;
        width: 112px;
        height: 112px;
        border:4px solid var(--white);
        font-size: 64px;
        line-height: 104px;
    }
}

.order-btn-text {
    font-size: var(--font-midium);
}

@media (width < 768px) {
    .order-btn-text {
        .exp {
            display: block;
            font-size: var(--font-x-small);
            color:var(--yellow)
        }
        .order {
            display: inline-block;
            font-size: var(--font-x-large);
        }
    }
}

@media (width >= 768px) {
    .order-btn-text {
        display: inline-block;
        margin-inline-start: 3.5em;

        .order {
            font-size: 2em;
        }
    }
  }

.section-iryo {
    background-color: var(--bk-purple);

    .inner {
        border:8px solid var(--purple);
        background: var(--bk-sky);
    }
    .plan-header,
    .guarantee-guide {
        border:4px solid var(--purple);
    }
    .plan-title-catch::before {
        top: -100px;
        left:64px;
        width: 88px;
        height: 80px;
        background:url("../img/chara_bird-a.png") no-repeat top center / contain;
    }
    @media (width < 768px) {
        .plan-title-catch::before {
            top: -80px;
            left:72px;
            width: 64px;
            height:64px;
        }
    }
    .plan-title-catch::after {
        top: -103px;
        right:48px;
        width: 160px;
        height: 103px;
        background:url("../img/chara_momo-c.png") no-repeat top center / contain;
    }
    @media (width < 768px) {
        .plan-title-catch::after {
            top: -88px;
            width: 137px;
            height: 88px;
        }
    }
    .plan-header-title,
    .plan-header-text,
    .plan-price-table caption,
    .plan-features-title {
        color: var(--purple);
    }
    .plan-header-num,
    .plan-price-table thead .age,
    .order-btn,
    .order-btn-num {
        background: var(--purple);
    }
    .plan-price {
        background: var(--bk-sky);
    }
    .plan-price-title {
        color: var(--purple);
    }
    .plan-price-table::after {
        border:2px solid var(--purple);
    }
    .plan-calculation-btn {
        border:6px solid var(--purple);
    }
    @media (width >= 768px) {
        .order-btn:hover {
        background: var(--green);
        }
    }
    @media (width < 768px) {
        .inner {
            border:4px solid var(--purple);
        }
        .plan-calculation-btn {
            border:4px solid var(--purple);
        }
    }
}

.section-teiki {
    background-color: var(--bk-orange);

    .inner {
        border:8px solid var(--orange);
        background: var(--bk-green);
    }
    .plan-header,
    .guarantee-guide {
        border:4px solid var(--orange);
    }
    .plan-title-catch::before {
        top: -103px;
        left:80px;
        width: 108px;
        height: 103px;
        background:url("../img/chara_monkey-b.png") no-repeat top center / contain;
    }
    @media (width < 768px) {
        .plan-title-catch::before {
            left:64px;
        }
    }
    .plan-title-catch::after {
        top: -64px;
        right:80px;
        width: 74px;
        height: 80px;
        background:url("../img/chara_dog-a.png") no-repeat top center / contain;
    }
    @media (width < 768px) {
        .plan-title-catch::after {
            right:64px;
        }
    }
    .plan-header-title,
    .plan-header-text,
    .plan-price-table caption,
    .plan-features-title {
        color: var(--orange);
    }
    .plan-header-num,
    .plan-price-table thead .age,
    .order-btn,
    .order-btn-num {
        background: var(--orange);
    }
    
    .plan-price {
        background: var(--bk-green);
    }
    .plan-price-title {
        color: var(--orange);
    }
    .plan-price-table {
        margin-block-end: 2rem;
    }
    .plan-price-table::after {
        border:2px solid var(--orange);
        background: var(--bk-orange);
    }
    .plan-calculation-btn {
        border:6px solid var(--orange);
    }
    @media (width >= 768px) {
        .order-btn:hover {
        background: var(--green);
        }
    }
    @media (width < 768px) {
        .inner {
            border:4px solid var(--orange);
        }
        .plan-calculation-btn {
            border:4px solid var(--orange);
        }
    }
    .plan-calculation-btn::before {
        background:url(../img/icon_calculator_orange.svg) no-repeat center center / contain;
    }
}

.section-double {
    background-color: var(--bk-navy);

    .inner {
        border:8px solid var(--navy);
        background: var(--bk-beige);
    }
    .plan-header {
        border:4px solid var(--navy);
    }
    .guarantee-guide.hospital,
    .guarantee-guide.surgery {
        border:4px solid var(--purple);
    }
    .guarantee-guide.surgery {
        margin-block-start: 16px;
    }
    .guarantee-guide.death {
        border:4px solid var(--orange);
    }
    .plan-title-catch::before {
        top: -103px;
        width: 108px;
        height: 103px;
        background:url("../img/chara_monkey-b.png") no-repeat top center / contain;
    }
    .plan-header-title,
    .plan-header-text,
    .plan-price-table caption,
    .plan-features-title {
        color: var(--navy);
    }
    .plan-header-num,
    .plan-price-table thead .age,
    .order-btn,
    .order-btn-num {
        background: var(--navy);
    }
    .plan-price {
        background: var(--bk-beige);
    }
    .plan-price-title {
        color: var(--navy);
    }
    .plan-price-table::after {
        border:2px solid var(--navy);
    }
    .plan-calculation-btn {
        border:6px solid var(--navy);
    }
    .plan-calculation-btn::before {
        background:url(../img/icon_calculator_navy.svg) no-repeat center center / contain;
    }
    @media (width >= 768px) {
        .order-btn:hover {
        background: var(--green);
        }
    }
    @media (width < 768px) {
        .inner {
            border:4px solid var(--navy);
        }
        .plan-calculation-btn {
            border:4px solid var(--navy);
        }
    }
}

.teiki-plan-list {
    width: 90%;
    margin-inline: auto;
    padding: 0 0 0 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    align-items: center;
    gap: 16px;
}

@media (width < 768px) {
    .teiki-plan-list {
        width: 100%;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: 8px;
    }
}

.teiki-plan-list-item {
    padding: 1rem;
    background: var(--orange);
    border-radius: 1rem;
    font-size: var(--font-midium);
    line-height: 1.4;
    color:var(--white)
}

@media (width < 768px) {
    .teiki-plan-list-item {
        padding: .5rem;
        border-radius: .5rem;
        font-size: var(--font-x-small);
    }
    .teiki-plan-list-item .font-larger {
        font-size: 1.5em;
    }
}

.section-double .teiki-plan-list {
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap:8px;
}

.section-double .teiki-plan-list-item {
    padding-inline: .25rem;
    font-size: var(--font-small);
}

/*ご契約後のスケジュール*/

.section-schedule {
    margin-block-start: 5rem;
}

.schedule-content {
    width: 1088px;
    margin: 2rem auto;

}

@media (width < 768px) {
    .schedule-content {
        width: 100%;
    }
  }
.schedule-note-list {
    padding-inline-start: 0;
    font-size: var(--font-small);
    text-align: left;
}

.schedule-chart {
    margin-block-start: 2rem;
}

/*あんしん倶楽部*/

.club-content {
    width: 1088px;
    margin: 2rem auto;

}

@media (width < 768px) {
    .club-content {
        width: 100%;
    }
  }

.club-lead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-block-end: 2rem;
}

@media (width < 768px) {
    .club-lead {
        flex-direction: column;
    }
  }

.club-card {
    width: 360px;
    height: auto;
}

.club-lead-text {
    width: calc(100% - 380px);
    font-size: var(--font-midium);
    font-weight: 700;
    text-align: left;
}

@media (width < 768px) {
    .club-lead-text {
        width: 100%;
        margin-block-start: 1rem;
    }
    .club-lead-text br {
        display: none;
    }
  }

.club-lead-note {
    font-weight: normal;
    font-size: var(--font-small);
    color:var(--pink);
}

@media (width < 768px) {
    .club-lead-note {
        display: block;
        margin-block-start: 0.5rem;
    }
  }

.club-menu {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:2rem;
}

@media (width < 768px) {
    .club-menu {
        grid-template-columns: 1fr 1fr;
        gap:1rem
    }
  }

.club-menu-list {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
}

.club-menu-title {
    display: flex;
    align-items: center;
    justify-content: center;
    padding:1rem;
    border-radius: 1rem;
    background: var(--lightpink);
    font-size: var(--font-large);
    font-weight: 700;
}

@media (width < 768px) {
    .club-menu-title {
        font-size: var(--font-midium);
    }
}

.club-menu-text {
    margin-block-start: 1rem;
    font-size: var(--font-midium);
}

@media (width < 768px) {
    .club-menu-text {
        text-align: left;
    }
    .club-menu-text br {
        display: none;
    }
  }

/*FAQ*/

.faq-box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    margin-block-start: 2rem;
	padding:1rem;
    border: 2px solid var(--black);
    border-radius: 1rem;	
	text-align: left;
}

@media (width < 768px) {
    .faq-box {
        width: 98%;
        margin-inline: auto;
        margin-block-start: 1rem;
    }
  }

.faq-box .faq-question {
    position: relative;
	display:inline-block;
	width:calc(100% - 56px);
	margin:5px 0px 10px 0px;
	padding:0px 0px 0px 80px;
    font-size: var(--font-midium);
}

@media (width < 768px) {
    .faq-box .faq-question {
        width:calc(100% - 40px);
        padding-inline-start: 48px;
    }
}

.faq-box .faq-question:before {
	content:"Q";
	display:block;
	width:64px;
	height:64px;
    line-height: 64px;
	position:absolute;
	left:3px;
	top:0;
	bottom:0;
	margin:auto;
    border-radius: 50%;
    text-align: center;
    color:var(--white);
    background: var(--black);
}

@media (width < 768px) {
    .faq-box .faq-question:before {
        width:32px;
	    height:32px;
        line-height: 32px;
    }
}

.faq-box {
    label {
        display:inline-block;
        border-radius: 15px;
        cursor :pointer;
        transition: .5s;
    }
    label:before {
        content: '＋';
        font-weight: 700;
        font-size: var(--font-xx-large);
        color:var(--black);
        transition: 0.2s;
    }
    input:checked ~ label:before {
        content: '−';
    }
    input {
        display: none;
    }
    .faq-answer {
            width: 100%;
            height: 0;
            padding:0 0 0 0;
            overflow: hidden;
            opacity: 0;
            transition: 0.8s;
            position: relative;
            clear:both;
            font-size: var(--font-midium);
            color:var(--text-color);
            line-height: 1.8;
        }

    input:checked ~ .faq-answer {
            padding:1rem;
            min-height: 60px;
            height: auto;
            opacity: 1;
        }
    ul li {
        list-style: disc;
    }
    ol li {
        list-style: decimal;
    }
    table {
        border-collapse: collapse;
        margin-block-start: 1rem;
        margin-block-end: 1rem;
    }
    th, td {
        padding: 0.75rem;
        border: 1px solid var(--darkgray);
    }
    th {
        background-color: var(--lightgray);
    }
    @media (width < 768px) {
        th, td {
            display: block;
            margin-block-start: -1px;
        }
    }
    .faq-answer a:link,
    .faq-answer a:hover,
    .faq-answer a:visited,
    .faq-answer a:active {
        background:var(--lightyellow);
        color:var(--text-color);
    }
    .faq-answer strong {
    color:var(--red);
    }

    .faq-answer em {
        font-style: normal;
        font-weight: 700;
    }
    .faq-answer small {
        color:var(--pink)
    }
    .faq-answer small a {
        color:var(--pink);
        text-decoration: underline;
    }    
}

.faq-iryo {
    .heading-title02::before {
        color:var(--purple)
    }
    .faq-box {
        border: 2px solid var(--purple);
    }
    .faq-box label:before {
        color:var(--purple);
    }
    .faq-box .faq-question:before {
        background: var(--purple);
    }
}

.faq-teiki {
    .heading-title02::before {
        color:var(--orange)
    }
    .faq-box {
        border: 2px solid var(--orange);
    }
    .faq-box label:before {
        color:var(--orange);
    }
    .faq-box .faq-question:before {
        background: var(--orange);
    }
}

.faq-double {
    .heading-title02::before {
        color:var(--navy)
    }
    .faq-box {
        border: 2px solid var(--navy);
    }
    .faq-box label:before {
        color:var(--navy);
    }
    .faq-box .faq-question:before {
        background: var(--navy);
    }
}

/*パンフレットダウンロード*/

.download-list {
    width: 1088px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap:1rem;
    margin: 3rem auto 8rem auto;
    padding: 0 0 0 0;
}

@media (width < 768px) {
    .download-list {
        width: 100%;
        grid-template-columns: repeat(1, 1fr);
        margin-block-end: 3rem;
    }
  }
.download-list-item {
    padding: 0 0 0 0;
}

.download-list-item a {
    position: relative;
    display: block;
    margin: auto;
    padding-block: 2rem;
    border:3px solid var(--red);
    border-radius: 1rem;
    text-align: center;
    font-size: var(--font-large);
    color:var(--black)
    text-indent: 64px;
}

@media (width < 768px) {
    .download-list-item a {
        width: 98%;
        text-indent: 32px;
    }
  }

.download-list-item a::before {
    content: "";
    display: block;
    width: 53px;
    height: 63px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 1rem;
    margin: auto;
    background: url(../img/icon-pdf.svg) no-repeat center center / contain;
}

@media (width < 768px) {
    .download-list-item a::before {
        width: 32px;
        height: 38px;
        left: 16px;
    }
  }

/*Footer Setting*/

.footer {
    padding-block: 3rem;
    border-top:5px solid var(--red);
    text-align: center;
}

.footer-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding:0 0 0 0;
}

.footer-menu li {
    margin-block-end: 1rem;
    margin-inline: 0 ;
    margin-inline-start: -1px;
    padding-inline: 0.5rem;
    border-left: 1px solid var(--black);
    border-right: 1px solid var(--black);
    font-size: var(--font-small);
}

.footer-menu li:last-child{
    font-size: var(--font-midium);
    font-weight: 700;
}

.footer-menu li a {
    color:var(--text-color);
}

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

.copyright {
    font-size: var(--font-small);
    color:var(--red);
}