:root {
    --primary-bland-color: #009098;
    /* --primary-bland-color: black; */
    --secondary-bland-color: #5F5E5E;
    --attention-color: #DB9716;
    --danger-color: red;
    --white: white;
    --black: black;
    --grey: #eee;
    --secondary-background-color: #FAF8F5;
    --header-background-color: rgba(250, 248, 245, 0.9);
    --inner-l: 1240px;
    --inner-m: 1024px;
    --inner-s: 816px;
    --aspect-ratio-16-9: 16/9;
    --aspect-ratio-4-3: 4/3;
    --aspect-ratio-1-1: 1/1;


    /* hero 24px~40px*/
    /* --font-size-title-hero: clamp(1.5rem, 1.136rem + 1.82vw, 2.5rem); */
    --font-size-title-hero: clamp(1.375rem, 0.966rem + 2.05vw, 2.5rem);
    /* lowerhero 24px~40px*/
    --font-size-title-lowerhero: clamp(1.5rem, 1.136rem + 1.82vw, 2.5rem);
    /* lowerhero 16px~24px*/
    --font-size-subtitle-lowerhero: clamp(1rem, 0.818rem + 0.91vw, 1.5rem);

    /* fontsize 32px~40px */
    --font-size-xxlarge: clamp(2rem, 1.818rem + 0.91vw, 2.5rem);
    /* fontsize 24px~36px */
    --font-size-xlarge: clamp(1.5rem, 1.227rem + 1.36vw, 2.25rem);
    /* fontsize 20px~24px */
    --font-size-large: clamp(1.25rem, 1.159rem + 0.45vw, 1.5rem);
    /* fontsize 16px~18px */
    --font-size-medium: clamp(1rem, 0.955rem + 0.23vw, 1.125rem);
    /* fontsize 14px~16px */
    --font-size-small: clamp(0.875rem, 0.83rem + 0.23vw, 1rem);
}

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

body {
    font-family: "ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO";
    line-height: 1.8em;
    letter-spacing: 0.05em;
}

section {
    padding: 60px 0;
}

/* nth-childは兄弟要素（同じ階層にある要素）のグループの中での位置 */
/* 同じ階層にdiv等があった場合、下記コードでもsectionだけではなく、divも含めて処理される */
/* そのためnth-of-typeに変更 */
/* main > section:nth-child(even) {
    background-color: var(--secondary-background-color);
} */

main > section:nth-of-type(even) {
    background-color: var(--secondary-background-color);
}

h2 {
    font-size: var(--font-size-xlarge);
}

h3 {
    font-size: var(--font-size-medium);
}

p {
    color: var(--secondary-bland-color);
    font-size: var(--font-size-medium);
}

em {
    font-style: normal;
    color: var(--attention-color);
}

strong {
    color: var(--danger-color);
}

small {
    font-size: 14px;
}

a {
    color: var(--secondary-bland-color);
    font-size: var(--font-size-medium);
    text-decoration: none;
}

address {
    color: var(--secondary-bland-color);
    font-style: normal;
}

figcaption {
    font-size: 16px;
    text-align: center;
    color: var(--secondary-bland-color);
}

picture {
    line-height: 0;
}

@media screen and (max-width: 1024px) {
    /* 1024pxまでの幅の場合に適応される */
    section {
        padding-right: 5%;
        padding-left: 5%;
    }
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    section {
        padding-top: 32px;
        padding-bottom: 32px;
    }
}

/* TOPページHERO */
.hero {
    position: relative;
    /* 後で調整 */
    padding-top: 40%;
    padding-left: 5%;
    background-image: url(../img/bg-top-20230129.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 20% center;
}

.heroTitleBox {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.heroTitle {
    color: var(--white);
    font-size: var(--font-size-title-hero);
    filter: drop-shadow(1px 1px 3px var(--black));
    margin-bottom: 8px;
    line-height: 1.5;
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .hero {
        padding-top: 100%;
    }
}

/* 下層ページHERO */
.lowerHero {
    position: relative;
    padding-top: 27.34375%;
    /* padding-top: 20%; */
    padding-left: 5%;
    background-size: cover;
    background-position: center 30%;
    min-height: 175px;
    /* 背景画像は各ページのcssファイル */
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .lowerHero {
        padding-top: 70%
    }
}

.pageTitleBox {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.pageTitle {
    color: var(--white);
    font-size: var(--font-size-title-lowerhero);
    filter: drop-shadow(1px 1px 3px var(--black));
    margin-bottom: 8px;
    line-height: 1.5;
}

.pageSubTitle {
    font-size: var(--font-size-subtitle-lowerhero);
    filter: drop-shadow(1px 1px 3px var(--black));
    margin-bottom: 8px;
}

/* お知らせ */

.sectionInner {
    width: 100%;
    max-width: var(--inner-m);
    margin: 0 auto;
    /* padding: 0 5%; */
}

.sectionInner-small {
    width: 100%;
    max-width: var(--inner-s);
    margin: 0 auto;
}

.sectionTitle {
    color: var(--primary-bland-color);
    font-size: var(--font-size-xlarge);
    text-align: center;
    margin-bottom: 40px;
}

.sectionTitle-left {
    color: var(--primary-bland-color);
    font-size: var(--font-size-xlarge);
    text-align: left;
    margin-bottom: 40px;
}

.sectionSubTitleBox {
    margin-top: 56px;
}

.sectionSubTitle {
    color: var(--primary-bland-color);
    font-size: var(--font-size-large);
    text-align: center;
    margin-bottom: 24px;
}

.sectionSubTitle-left {
    color: var(--primary-bland-color);
    font-size: var(--font-size-large);
    text-align: left;
    margin-bottom: 24px;
}

.sectionText {
    color: var(--secondary-bland-color);
    font-size: var(--font-size-medium);
    text-align: center;
    margin-bottom: 20px;
}

.sectionText-left {
    color: var(--secondary-bland-color);
    font-size: var(--font-size-medium);
    text-align: left;
    margin-bottom: 20px;
}

.sectionImgBox {
    width: 100%;
    margin-bottom: 32px;
}

.sectionImg-widthBase {
    width: 100%;
    border-radius: 16px;
}

.sectionImg-heightBase {
    display: block;
    height: 100%;
    margin: 0 auto;
    border-radius: 16px;
}

@media screen and (max-width: 1024px) {
    /* 1024pxまでの幅の場合に適応される */
    .sectionInner {
        /* padding: 0 5%; */
    }
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .sectionTitle {
        margin-bottom: 24px;
    }

    .sectionText {
        text-align: left;
    }

    .sectionImg-heightBase {
        width: 100%;
    }
}

.news--listItem {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 16px;
}

.news--listItem:last-of-type {
    margin-bottom: 0;
}

.news--metadata {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-right: 16px;
    width: 300px;
}

.news--date {
    margin-right: 16px;
}

.news--category {
    text-align: center;
    color: var(--primary-bland-color);
    font-size: 14px;
    border: 1px solid var(--primary-bland-color);
    border-radius: 4px;
    width: 112px;
    min-width: 80px;
    padding: 8px 0;
    line-height: normal;
}

.category-attention {
    color: var(--attention-color);
    border-color: var(--attention-color);
}

.news--title {
    flex: 1;
}

.news--hasLink {
    /* border-bottom: 1px solid var(--secondary-bland-color); */
    text-decoration: underline;
}

.news--attention {
    font-weight: bold;
}

.news--link {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.news--link:hover {
    opacity: 0.75;
}

/* .news--link:hover .news--title {
    border-bottom: 1px solid var(--secondary-bland-color);
} */

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

    /* 599pxまでの幅の場合に適応される */
    .news--listItem {
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    .news--link {
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    .news--category {
        padding: 4px 0;
    }
}


/* 診療のご案内 */

.media {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 40px;
}

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

.media-reverse {
    flex-direction: row-reverse;
}

.media-reverse .media--body {
    margin-right: 3.33333%;
}

.media--imgBox {
    flex: 0 1 38.2%;
    /* flex: 0 1 25%; */
    margin-right: 3.33333%;
    filter: drop-shadow(2px 2px 2px var(--secondary-bland-color));
}

.media-reverse .media--imgBox {
    margin-right: 0;
    filter: drop-shadow(-2px 2px 2px var(--grey));
}

.media--img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.media--body {
    flex: 1;
}

.media--title {
    color: var(--primary-bland-color);
    font-size: var(--font-size-large);
    font-weight: bold;
    margin-bottom: 24px;
}

.media--text {
    font-size: var(--font-size-medium);
    margin-bottom: 24px;
}

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

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

.media--listItems {
    padding: 0.5em 0.5em 0.5em 1.35em;
}
  
.media--listItem {
    /* padding: 0.5em 0; */
    color: var(--secondary-bland-color);
    font-size: var(--font-size-medium);
}

.media--btn {
    display: block;
    width: 100%;
    max-width: 280px;
    padding: 16px;
    border-radius: 4px;
    font-size: var(--font-size-medium);
    color: var(--white);
    text-align: center;
    background: var(--primary-bland-color);
    text-decoration: none;
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */

    .media {
        display: block;
    }

    .media--imgBox {
        margin-right: 0;
        margin-bottom: 16px;
        filter: drop-shadow(0px 2px 2px var(--secondary-bland-color));
    }
    
    .media-reverse .media--imgBox {
        filter: drop-shadow(0px 2px 2px var(--grey));
    }

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

    .media--btn {
        width: 100%;
        max-width: none;
    }
}

/* cta */

.cta {
    width: 100%;
    padding: 32px 64px;
    background-image: url(../img/bg-clinic.jpg);
    background-blend-mode: overlay;
    background-size: cover;
    background-position: center;
    font-family: Meiryo,
        "Helvetica Neue",
        Arial,
        "Hiragino Kaku Gothic ProN",
        "Hiragino Sans",
        "BIZ UDPGothic",
        sans-serif;
}

.cta--inner {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    padding: 32px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.cta--title {
    font-size: var(--font-size-large);
    margin-bottom: 16px;
}

.cta--text {
    color: var(--secondary-bland-color);
    font-size:  var(--font-size-small);
}

.cta--message {
    flex: 1;
    margin-right: 3.33333%;
    margin-right: 5%;
}

.cta--contact {
    flex: 0 1 40%;
}

.cta--tel {
    display: block;
    width: auto;
    line-height: 1em;
    font-size: var(--font-size-xlarge);
    color: var(--black);
    font-weight: bold;
    /* line-height: 1em; */
    text-decoration: none;
    margin-bottom: 16px;
}

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

    /* 1024pxまでの幅の場合に適応される */
    .cta {
        padding: 0;
    }

    .cta--inner {
        display: block;
        padding: 5%;
        background-color: rgba(255, 255, 255, 0.85);
        border-radius: 0;
    }

    .cta--message {
        margin-right: 0;
        margin-bottom: 32px;
    }
}

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

    /* 599pxまでの幅の場合に適応される */
    .cta--inner {
        display: block;
    }

    .cta--message {
        margin-right: 0;
        margin-bottom: 24px;
    }
}

/* cards */

.cardsCol2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* grid-template-rows: 1fr 1fr; */
    gap: 24px 32px;
    grid-auto-flow: row;
    grid-template-areas:
        ". ."
        ". .";
}

.cardsCol3 {
    display: grid;
    height: auto;
    grid-template-columns: repeat(3, minmax(0,1fr));
    grid-template-rows: repeat(4, minmax(0,1fr));
    /* gapを%で指定すると挙動がおかしいので注意 */
    gap: 24px 32px;
}

.cardsCol4 {
    display: grid;
    height: auto;
    grid-template-columns: repeat(4, minmax(0,1fr));
    grid-template-rows: repeat(3, minmax(0,1fr));
    gap: 24px 32px;
}

.card--imgBox {}

.card--img {
    width: 100%;
    /* height: auto; */
    aspect-ratio: var(--aspect-ratio-4-3);
    object-fit: contain;
    border-radius: 8px;
    vertical-align: bottom;
    margin-bottom: 8px;
}

.card--img-square {
    aspect-ratio: var(--aspect-ratio-1-1);
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */

    .cardsCol2,
    .cardsCol3,
    .cardsCol4 {
        display: block;
    }

    .card {
        margin-bottom: 24px;
    }
}

/* crossTable */

.tableBox {
    margin-bottom: 24px;
}

.crossTable {
    border: 1px solid #ddd;
}

.crossTable--inner {
    width: auto;
    min-width: 100%;
    text-align: center;
    table-layout: fixed;
}

.crossTable--header {
    padding: 15px;
    background-color: #efefef;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    font-weight: bold;
    vertical-align: middle;
    color: var(--secondary-bland-color);
}

.crossTable--text {
    padding: 15px;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    vertical-align: middle;
    color: var(--secondary-bland-color);
}

.crossTable--header:last-child,
.crossTable--text:last-child {
    border-right-width: 0;
}

.crossTable--bodyRow:last-child .crossTable--header,
.crossTable--bodyRow:last-child .crossTable--text {
    border-bottom-width: 0;
}

@media screen and (max-width: 768px) {
    .crossTable {
        border-right-width: 0;
        overflow-x: auto;
    }

    .crossTable--inner {
        width: auto;
        min-width: 100%;
    }

    .crossTable--header,
    .crossTable--text {
        white-space: nowrap;
    }

    .crossTable--header:last-child,
    .crossTable--text:last-child {
        border-right-width: 1px;
    }

    .crossTable--header-sticky {
        position: -webkit-sticky;
        position: sticky;
        left: 0;
    }
}

@media screen and (min-width: 600px) {
    /* mix-witdhの値px以上の幅の場合に適応される */
    .br-sp {
        display: none;
    }
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .hide-sp {
        display: none;
    }
}

/* Googleマップの下に発生する余白を無効 */
.googleMap {
    display: block;
}

.handWrittenMap {
    width: 100%;
}

/* 親要素を無視したwidth100%の設定 */
/* 親要素に次の設定を実施する事
    display: grid;
    place-items: center;
 */
.widthFullsizeIgnoreParentElement {
    display: block;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    line-height: 0;
}

.marker {
    background-image: linear-gradient(transparent 80%, #DBBD84 0%);
    /* background-image: linear-gradient(transparent 80%, var(--attention-color) 0%); */
}

/* 表示非表示 */

@media screen and (min-width: 600px) {
    /* 600px以上の幅の場合に適応される */
    
    .spOnly {
        display: none;
    }
    
}

@media screen and (max-width: 1025px) {
    /* 1024pxまでの幅の場合に適応される */
    .pcOnly {
        display: none;
    }
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .notSpOnly {
        display: none;
    }
}

@media not screen and (min-width: 599px) and (max-width: 1024px) {
    /* 599px以上、1024px以下の幅の場合に適応される */
    .tabletOnly {
        display: none;
    }
}

.informationBox {
    width: 100%;
    margin-top: 16px;
    padding: 16px;
    background-color: var(--white);
    border-radius: 8px;
    /* box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25); */
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.25));
}

.informationBox--link {
    text-decoration: underline;
    color: var(--attention-color);
}