@charset "utf-8";

/* ↓関連記事カード250917追加 */
.article-card {
    margin-bottom: 2%;
}

.list-card {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.list-card li {
    max-width: 340px;
    width: 90%;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    transition: all 0.3s ease;
    margin-bottom: 10px;
}

.list-card li:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.03);
}

.thumb {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 4px 4px 0 0;
    max-height: 220px;
}

.article-card .txt {
    font-size: 12px;
    color: #868686;
    font-weight: normal;
    padding: 10px 0;
}

.article-card .title {
    font-weight: bold;
    padding: 10px 12px;
}

.list-card a {
    background-color: #ec703f;
    color: white;
    width: 90px;
    padding: 10px 18px;
    border-radius: 3px;
    text-align: center;
    display: block;
    font-size: 13px;
    margin: 8px 0;
}

/* ↑関連記事カード */



/* メディカルダイエット */
.diet .article-block {
    font-family: "Noto Sans JP", sans-serif;
    letter-spacing: .05em;
}

.diet .breadcrumbs li {
    line-height: 1.5;
}

.diet h2 {
    all: unset;
}

.diet h3 {
    all: unset;
}

.diet .article-contents div h3::before {
    content: none;
}

.diet h3::before {
    display: none;
}

.top-content {
    background-color: #FF6A7A;
    height: 420px;
    width: auto;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.top-content img {
    width: 100%;
    max-width: 1120px;
    min-width: 500px;
}

@media (max-width: 1133px) {
    .top-content {
        height: calc(100% - 7px);
    }
}

/* 目次Add */
.diet .online-toc li {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    border-radius: 10px;
    border: solid 2px #FFF;
    background-color: #edf7ff;
}

.diet .online-toc a {
    color: #fe6b7a;
    width: 100%;
}

.diet .toc-named {
    color: #fe6b7a;
    font-size: 24px;
    margin-bottom: 20px;
    border-bottom: 0px;
}

.diet .article-contents h3.line-bl {
    display: inline-block;
    font-weight: 800;
    color: #fe6b7a;
    background: white;
    border: 1px solid red;
    border-image: linear-gradient(to bottom, #cdffff, #94b9ff)1;
    padding: 12px 24px;
    font-size: 24px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    margin-bottom: 20px;
}

.common-block {
    text-align: center;
    position: relative;
    margin-top: 50px;
}

.common-block h2::after {
    position: absolute;
    -webkit-text-stroke: 0.5px #fff;
    text-stroke: 0.5px #fff;
    paint-order: stroke;
    color: transparent;
    font-size: 20px;
    text-shadow: none;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

.effect-block p,
.common-block p {
    padding: 10px 0;
    font-size: 18px;
    color: #40413f;
    font-weight: 300;
}

.common-block p.p-block {
    text-align: left;
    font-size: 15px;
    line-height: 1.5;
}

.backimage-block {
    position: relative;
    background-image: url(/images/diet/medical-diet-about_background.png);
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 5% 5% 8% 5%;
    text-align: center;
    max-width: 800px;
    margin: 0px auto 80px auto;
}

[class$="block"] .triangle {
    display: block;
    width: 230px;
    height: 32px;
    margin: 16px auto;
    background: linear-gradient(to bottom, #cdffff, #94b9ff);
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    opacity: 0.6;
}

.backimage-block h2 {
    font-weight: 700;
    font-size: clamp(20px, 5vw, 32px);
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
    margin-bottom: 10px;
}

.backimage-block .toc-mark {
    margin-bottom: 28px;
}

.backimage-block .left-side {
    position: absolute;
    width: 28%;
    left: -50px;
    bottom: -28%;
}

.backimage-block p {
    font-weight: 300;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
    font-size: 18px;
}

.backimage-block p span {
    font-weight: 600;
    background: linear-gradient(transparent 80%, #fb9376 50%);
    padding: 0 5px;
}

.diet .article-contents,
.diet .article-block {
    overflow: visible;
}

.worry-voice,
.effect-block {
    text-align: center;
    padding-top: 25px;
}

.worry-voice h2,
.effect-block h2,
.flow-block h2,
.price-block h2,
.question-block h2,
.strong-block h2,
.common-block h2 {
    font-weight: 900;
    font-size: clamp(18px, 5vw, 32px);
    background: #FF976B;
    background: linear-gradient(90deg, rgba(255, 151, 107, 1) 0%, rgba(240, 136, 152, 1) 50%, rgba(255, 151, 107, 1) 100%);
    color: #fff;
    position: relative;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
    padding: 5px 10px 25px 10px;
}

.worry-voice h2::after {
    position: absolute;
    content: 'for these people';
    -webkit-text-stroke: 0.5px #fff;
    text-stroke: 0.5px #fff;
    paint-order: stroke;
    color: transparent;
    font-size: clamp(13px, 3vw, 20px);
    text-shadow: none;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

.issue-content {
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8%;
}

.issue-listItem {
    position: relative;
    padding-left: 75px;
    padding-bottom: 80px;
    text-align: center;
}

.issue-listItem.right {
    padding-right: 75px;
    padding-left: 0;
    top: 30px;
}

.issue-listItem.bottom {
    bottom: 10px;
}

.issue-listItem img {
    position: absolute;
    max-width: 100px;
    bottom: 0;
}

.issue-listItem.left img {
    left: 0;
}

.issue-listItem.right img {
    right: 0;
}

.diet .article-contents .issue-content h3 {
    background-color: #fb9376;
    border-radius: 30px;
    color: #fff;
    margin: 0;
    display: inline-block;
    padding: 2px 8px;
    font-size: 18px;
}

.speech-bubble p {
    font-weight: 700;
    font-size: 22px;
    color: #fb9376;
    padding: 10px;
}

.speech-bubble {
    position: relative;
    display: inline-block;
    margin-bottom: 14px;
    padding: 16px;
    border-radius: 8px;
    background-color: #eeffff;
    text-align: left;
    font-size: 16px;
    font-weight: 400;
    box-shadow: 5px -5px 0 #d8d8d8;
    text-align: center;
}

.speech-bubble::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 27%;
    border-style: solid;
    border-width: 25px 50px 0 0;
    border-color: #eeffff transparent transparent;
    translate: calc(-50% - 1.2px) 100%;
}

.right .speech-bubble::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 70%;
    border-style: solid;
    border-width: 25px 0 0 50px;
    border-color: #eeffff transparent transparent;
    translate: calc(-50% + 1.2px) 100%;
}


/* 効果 */
.effect-block h2,
.flow-block h2,
.strong-block h2 {
    padding: 5px 10px;
}

.effect-block p strong {
    font-size: 26px;
    color: #fe6b7a;
}

.effect-block img {
    max-width: 740px;
}

.effect-block .triangle {
    width: 340px;
    height: 40px;
    margin: 0px auto;
}

.effect-txt p {
    font-weight: 800;
    font-size: clamp(18px, 2.4vw, 28px);
    margin: 0;
    padding: 0;
}

.effect-txt p span {
    color: #fe6b7a;
    font-size: clamp(21px, 3vw, 32px);
}

.effect-txt .dotline {
    display: inline-block;
    font-weight: 600;
    border-bottom: 6px dotted #fe6b7a;
}


.feature-box {
    background-color: #ffeef7;
    border-radius: 10px;
    position: relative;
    padding: 10px;
}

.feature-box p {
    font-weight: 500;
    color: #fe6b7a;
    line-height: 1.7;
    margin: 8px 0 14px 0;
}

.listType {
    font-weight: 400;
    text-align: left;
    width: 90%;
    margin: 0 auto;
}

.listType li {
    border-radius: 40px;
    color: #fff;
    padding: 10px;
    font-size: 18px;
    position: relative;
    padding-left: 60px;
    margin-bottom: 16px;
}

.listType li::before {
    content: '';
    display: block;
    top: 10px;
    width: 1.2em;
    height: 0.6em;
    border-bottom: 0.4em solid #ffffff;
    border-left: 0.4em solid #ffffff;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    position: absolute;
    left: 20px;
}

.listType-bl li {
    background-color: #76bffb;
}

/* 比較テーブル */
.vs-table {
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
}

.vs-table th,
.vs-table td {
    vertical-align: middle;
    padding: 10px;
}

.vs-table thead th:first-child {
    width: 24%;
}

.vs-table thead th:not(:first-child) {
    color: #fff;
    border-radius: 16px 16px 0 0;
    position: relative;
}

.vs-table .th-icon {
    padding-bottom: 30px;
    padding: 18px;
}

.vs-table .th-icon::before {
    position: absolute;
    content: '';
    background-position: center;
    background-size: cover;
}

.th-icon.injection {
    padding: 20px 20px 20px 70px;
    background-color: #fe6b7a;
}

.th-icon.injection::before {
    background-image: url('/images/diet/injection-white_icon.png');
    width: 46px;
    height: 46px;
    left: 50px;
    bottom: 7px;
}

.th-icon.supplement::before {
    background-image: url('/images/diet/supplement-white_icon.png');
    width: 46px;
    height: 46px;
    left: 48px;
    bottom: 7px;
}

.th-icon.supplement {
    padding: 20px 20px 20px 60px;
    background-color: #5ca1c9;
}

.vs-table thead th:nth-child(2)::after {
    content: '';
    width: max-content;
    color: #fe6b7a;
    font-size: .8rem;
    padding: 0.3em 1em;
    background: #fff;
    border: 3px solid #fe6b7a;
    border-radius: 100vh;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -20px;
    z-index: 1;
}

.vs-table .th-icon.injection::after {
    content: 'メディカルダイエット';
}

.vs-table thead th:nth-child(2) {
    border-right: 3px #fff solid;
}

.vs-table tbody th {
    background-color: #4e5c63;
    padding: 10px;
    color: #fff;
}

.vs-table tbody td:nth-child(2) {
    background-color: #ffe9eb;
}

.vs-table tbody td:nth-child(3) {
    background-color: #eef9ff;
}

.vs-table tbody td {
    border-bottom: solid 3px #fff;
    color: #40413f;
}

.vs-table tbody th {
    border: solid 3px #fff;
}

/* 流れ */
.flow-block {
    text-align: center;
    margin-top: 100px;
}

.flow-txt {
    padding: 10px 0;
    font-size: 18px;
    margin-top: 10px;
    color: #40413f;
}

.diet .online-flow {
    margin-top: 30px;
}

.diet .flow-top {
    align-items: center;
    color: #fe6b7a;
}

.diet .article-contents .flow-top h3 {
    margin: 0;
    text-align: left;
    font-weight: bold;
    font-size: 1.6em;
}

.diet .flow-bottom {
    background: #f2fbff;
    box-shadow: 0 2px 3px rgba(4, 81, 125, 0.26);
}

.diet .flow-bottom p {
    text-align: left;
}

.diet .flow-img-back {
    border-color: #fe6b7a;
}

.diet .flow-img-back::before {
    color: #fe6b7a;
}

/* 料金 */
.price-block {
    text-align: center;
    margin-top: 80px;
}

.diet .price-block .product-image img {
    filter: drop-shadow(rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px);
}

.price-block .toc-mark {
    margin-bottom: 50px;
}

.price-block h2::after {
    position: absolute;
    content: 'Price';
    -webkit-text-stroke: 0.5px #fff;
    text-stroke: 0.5px #fff;
    paint-order: stroke;
    color: transparent;
    font-size: 20px;
    text-shadow: none;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

.price-block p {
    font-weight: 300;
    padding: 10px 0;
    font-size: 18px;
    margin-top: 10px;
    color: #40413f;
}

.price-list_lep {
    align-items: baseline;
}

.price-block .price-list_lep p {
    font-weight: 400;
    padding: 10px;
}

.price-block .product-price {
    line-height: 1;
}

.price-block .product-price span {
    font-size: 14px;
}

/* 注意事項 */
.common-block h2.caution::after {
    content: 'Caution';
}

.simple-table {
    margin: 0 auto;
    color: #474747;
}

.simple-table th,
.simple-table td {
    vertical-align: middle;
    padding: 10px 20px;
}

.simple-table.blue th,
.simple-table.blue td {
    border: solid 1px #d8f1ff;
}

.simple-table.blue thead th {
    background-color: #e1f4ff;
}

.simple-table.blue tbody th {
    background-color: #f1f1f1;
}

.simple-table tbody th {
    font-weight: 500;
}

.simple-table td {
    font-weight: 300;
}

/* 強み */
.strong-block {
    text-align: center;
    margin-top: 70px;
}

.strong-block p {
    padding: 10px 0;
    font-size: 16px;
    margin-top: 10px;
    color: #40413f;
    line-height: 1.8;
}

.strong-block p span {
    font-weight: 600;
    background: linear-gradient(transparent 80%, #fb9376 50%);
    padding: 0 5px;
    font-size: 18px;
}

.strong-block .point-partText {
    line-height: 1.3;
}

.bottom-notice table td {
    font-size: 14px;
}

/* よくある質問 */
.question-block h2::after {
    position: absolute;
    content: 'Question';
    -webkit-text-stroke: 0.5px #fff;
    text-stroke: 0.5px #fff;
    paint-order: stroke;
    color: transparent;
    font-size: 20px;
    text-shadow: none;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

.question-block .toc-mark {
    margin-bottom: 50px;
}

.question-block {
    text-align: center;
    margin-top: 80px;
}

.diet .question {
    background: #f2fbff;
    box-shadow: 0 2px 3px rgba(4, 81, 125, 0.26);
    border-radius: 10px;
}

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

.diet .answer-icon {
    color: #fe6b7a;
}

.diet .answer-icon::after {
    background-color: #fe6b7a;
}

/* 流れのコンテンツ */
.step-contents.txtOnly {
    padding-top: 34px;
}

.step-contents.txtOnly .left-part {
    padding-left: 28%;
    text-align: right;
}

.step-contents.txtOnly .step-label {
    color: #fff;
}

.step-contents.txtOnly li:nth-child(even) .step-label {
    color: #fff;
}
.step-contents.txtOnly li p {
    font-size: 14px;
}
.step-contents.txtOnly a {
    color: #2c0b03;
}
.step-contents.txtOnly a:hover {
    border-bottom: 1px #2c0b03 solid;
}

@media (max-width: 1080px) {
    .issue-listItem.left img {
        width: 90px;
        bottom: 50px;
    }

    .issue-listItem.right {
        top: -25px;
    }

    .speech-bubble p {
        font-size: 20px;
        padding: 10px 0 0 0;
    }

    .effect-block .triangle {
        width: 200px;
        height: 20px;
    }

    [class$="block"] .triangle {
        width: 200px;
        height: 20px;
    }

    .backimage-block p {
        font-size: 16px;
    }

    .worry-voice h2::after {
        bottom: 3px;
    }

    .backimage-block .left-side {
        width: 30%;
        left: -78px;
        bottom: -27%;
        min-width: 160px;
    }

    .flow-block {
        margin-top: 60px;
    }

    .price-block .toc-mark {
        margin-bottom: 30px;
    }
}

@media (max-width: 820px) {
    .diet .article-contents h3.line-bl {
        font-size: 18px;
    }

    .effect-block p,
    .common-block p {
        font-size: 15px;
        text-align: left;
    }

    .speech-bubble p {
        font-size: 18px;
    }

    .vs-table tbody th {
        font-size: 14px;
        padding: 6px;
    }

    .vs-table .th-icon {
        padding: 14px 6px 38px 6px;
        font-size: 15px;
    }

    .vs-table .th-icon::before {
        width: 32px;
        height: 32px;
    }

    .vs-table thead th:nth-child(2)::after {
        font-size: 12px;
    }

    .vs-table tbody td {
        font-size: 15px;
        padding: 6px;
    }

    .diet .flow-top {
        padding: 0;
    }

    .diet .article-contents .flow-top h3 {
        font-size: 1.2em;
    }

    .flow-txt {
        font-size: 16px;
        text-align: left;
    }

    .diet .flow-bottom p {
        font-weight: 300;
    }

    .price-block p {
        font-size: 15px;
        text-align: left;
        margin: 0;
    }

    .price-list_lep .product-name::before {
        top: 90%;
    }

    .listType {
        width: 100%;
    }

    .listType li {
        font-size: 16px;
        padding-left: 48px;
    }

    .listType li::before {
        width: 1em;
        height: 0.5em;
        left: 15px;
        top: 22px;
    }


    /* テーブル↓ */
    .simple-table th,
    .simple-table td {
        padding: 6px;
    }

    .simple-table th {
        font-size: 14px;
    }

    .simple-table tbody td {
        font-size: 13px;
    }

    /* テーブル↑ */

    .diet .text-list li {
        font-size: 14px;
    }

    .diet .online-toc li {
        margin-bottom: 10px;
        padding: 8px 10px;
    }
}

@media (max-width: 1400px) {
    .backimage-block .left-side {
        width: 30%;
        left: -87px;
        bottom: -23%;
    }
}


/* 補足 */
table .sup {
    font-size: 11px;
}

blockquote cite a {
    color: #498ee7;
}