@charset "UTF-8";
/* =====================================
    トップページ ここから
===================================== */
.topPage{
    padding: 20px 0
}

.topPage__section{
    margin: 30px auto 20px
}

.topPage__link{
    display: block;
    margin-top: 10px
}

/* =====================================
    トップページ ここまで
===================================== */

/* =====================================
    安全・安心な水道水 ここから
===================================== */
.pageTitle{
    color: #fff;
    background: #0054aa;
    padding: 26px 20px;
    font-size: clamp(1.12rem,1.56vw,1.25rem)
}



.pageInnerLayout__inner{
    padding: 20px 20px 40px;
    background: #fff;
    margin: 0 auto 60px
}

.pageInnerLayout__feature{
    padding: 20px 140px 40px
}



.pageInnerLayout__reduction{
    padding: 20px 20px 40px;
    background: #fff;
    margin: 0 auto 60px
}

.container{
    position: relative;
    width: 100%;
    height: auto
}

.weblink{
    position: absolute;
    z-index: 1
}

.weblink1{
    top: 88.5%;
    width: 29%;
    height: 1.5%;
    left: 64%;
}

.weblink2{
    top: 84%;
    width: 54%;
    height: 1.4%;
    left: 5%
}
/* =====================================
    安全・安心な水道水 ここまで
===================================== */

/* =====================================
    インタビュー ここから
===================================== */
/* ヘッダー */
.profile{
    border-top: 5px dotted #fff;
    color: #fff;
    padding: 24px 0
}
.profile__inner{
    display: flex;
    justify-content: flex-start;
    align-items: end
}
.profile h2 {
    line-height: 1
}
.profile h2:first-of-type{
    font-size: clamp(2.75rem,3.75vw,3rem);
    padding-right: 24px
}
.profile h2:last-of-type{
    font-size: clamp(2.125rem,2.96vw,2.375rem);
    padding-left: 24px;
    border-left: 1px solid
}
.profile span{
    display: block;
    font-size: clamp(1.12rem,1.56vw,1.25rem);
    margin-bottom: 12px
}
a:focus{
    outline: 2px solid #007acc!important;
    outline-offset: 2px
}

#interview__head{
    position: relative;
    padding: 82px 0 20px
}
.headerimage {
    position: absolute;
    display: block;
    inset: 0;
    width: 100%;
    z-index: -1
}
.top {
    margin: 0 auto;
    max-width: 890px;
    padding-left: 25px;
    padding-right: 25px
}
.top__title {
    max-width: 840px;
    width: 100%;
    height: auto
}
.top__profile {
    margin: 24px 0 40px
}
.top__profile--tab {
    display: none
}
.top__content{
    margin: 80px auto 0;
    display: flex;
    justify-content: space-between
}
.top__contentLeft {
    max-width: 420px;
    width: 50%;
    max-height: 520px;
    height: auto;
}
.top__contentRight {
    width: calc(50% - 50px);
    max-height: 520px;
}
.top__contentRight h3 {
    font-size: clamp(1.12rem,1.56vw,1.25rem)
}
.top__contentRight h3:first-of-type {
    color: #3da1cd;
}
.top__contentRight strong {
    font-size: clamp(1.5rem,2.187vw,1.75rem);
    padding-left: 20px;
    position: relative
}
.top__contentRight p {
    padding: 12px 0;
    font-size: 1em;
    text-align: left;
    line-height: 24px;
    border-bottom: 1px black solid;
}
.career-list{
    margin: 0.8em 0;
}
.career-list .career{
  display: flex; /* これでdtとddが横並びになる */
  margin-bottom: 5px;
}
.career-list .career dt,
.career-list .career dd{
    padding:0;
    font-size: 0.8em;
    line-height: 24px;
}

/* ❗ 追加・修正: dt（年）の右側にスペース（マージン）を追加 */
.career-list .career dt {
    margin-right: 1.3em; /* ここでdtとddの間に15pxのスペースを作成 */
    /* 必要であれば、年部分の幅を固定したい場合は以下を追加 */
    /* min-width: 60px; */ 
}
/* メニュー一覧 */
#interview__menu{
    background: #dedcdc
}
.interview__menuinner {
    margin: 0 auto;
    max-width: 890px;
    padding-left: 25px;
    padding-right: 25px
}
.interview__menuinner ul{
    display: flex;
    list-style: none;
    font-size: clamp(1.12rem,1.56vw,1.25rem);
    font-weight: 700
}
.interview__menuinner ul li{
    width: 50%;
    text-align: center;
    border-right: 1px solid
}
.interview__menuinner ul li:first-of-type{
    border-left: 1px solid
}
.interview__menuinner ul li a{
    text-decoration: none;
    color: #231815;
    display: block;
    padding: 16px 0
}

/* インタビュー本文 */
#interview{
    margin: 70px auto 0;
    max-width: 890px;
    padding-left: 25px;
    padding-right: 25px
}
#interview h3{
    font-size: clamp(1.625rem,2.34vw,1.875rem);
    color: #3da1cd;
    margin: 12px 0
}

#interview iframe{
    width: 100%;
    height: 100%;
    aspect-ratio: 16/9
}

.interview__section{
    margin: 100px auto
}
.interview__sectionInner{
    padding: 0 11%
}
.interview__sectionTitle{
    display: flex;
    justify-content: flex-start
}
.interview__sectionTitleLine{
    color: #3da1cd
}
.interview__sectionTitle h4{
    font-size: 20px;
    color: #3da1cd
}
.interview__section p{
    line-height: 1.8;
    font-size: 16px;
    margin: 20px 0 30px;
    text-align: justify
}
.interview__section span {
    display: inline-block
}
.interview__sectionImg {
    width: 100%;
    height: auto;
    margin: 6px 0
}

/* 保湿ケア紹介 */
.care{
    margin: 40px auto;
    max-width: 890px;
    padding-left: 25px;
    padding-right: 25px
}
.care h3{
    color: #3da1cd;
    border-bottom: 1px solid #3da1cd;
    width: 480px;
    font-size: clamp(1.5rem,2.187vw,1.75rem);
    padding: 4px 0;
    margin: 20px auto;
    text-align: center;
}
.care__top{
    display: flex;
    align-items: end;
    margin: 30px auto;
}
.care__topLeft{
    max-width: 480px;
    width: 61%;
    height: auto;
    margin: 0 auto;
    display: block;
}
.care__topRight{
    margin-left: 8%;
    margin-bottom: 1%;
}
.care__topRight strong{
    font-size: clamp(1.25rem,1.718vw,1.5rem)
}
.care__topRight h4{
    font-size: clamp(1rem,1.4vw,1.12rem)
}
.care__topRight h4{
    margin: 15px 0;
}
.care__topRight p{
    font-size: clamp(.875rem,1.25vw,1rem);
    text-align: justify;
    line-height: 1.7em;
}
.care__detail{
    border: 1px solid;
    padding: 2% 3%;
}

.care__detail h4{
    text-align: center;
    display: block;
    border-bottom: 1px solid;
    margin-bottom: 20px;
    padding: 10px 0;
    font-size: clamp(1.25rem,1.718vw,1.5rem)
}
.care__point{
    margin: 0 0.5em;
    padding-left: 12px;
    margin-bottom: 12px;
}

.care__point ul{
    /* ❗ 新規追加: リストのデフォルトマーカーを非表示にする */
    list-style: none;
}
.care__point ul li{
    margin: 4px 0;
    font-size: 15px;
    display: flex;
    justify-content: flex-start;
}
#care__time .time{
    display: inline-block;
    white-space: nowrap;
}
.care__point ul li img{
    height: 1.2em;
    padding-right: 5px;
}
.btn {
    background: #dedcdc;
    display: block;
    margin: 0 auto;
    width: 200px;
    text-align: center;
    padding: 6px;
    font-weight: 700;
    text-decoration: none;
    color: #231815;
    font-size: clamp(1.12rem,1.56vw,1.25rem)
}
small{
    display: block;
    text-align: center;
    margin: 50px auto;
    font-size: clamp(.625rem,.937vw,.75rem)
}
/* =====================================
    インタビュー ここまで
===================================== */

/* =====================================
    水道局からのお知らせ ここから
===================================== */
.pageTitle[data-astro-cid-guvttfii] {
                color: #fff;
                background: #0054aa;
                padding: 26px 20px;
                font-size: clamp(1.12rem,1.56vw,1.25rem)
            }

            @media screen and (max-width: 768px) {
                .pageTitle[data-astro-cid-guvttfii] {
                    font-size:clamp(.875rem,1.25vw,1rem)
                }
            }

            .pageInnerLayout__inner {
                padding: 20px 20px 40px;
                background: #fff;
                margin: 0 auto 60px
            }

            .pageInnerLayout__feature {
                padding: 20px 140px 40px
            }

            @media screen and (max-width: 768px) {
                .pageInnerLayout__feature {
                    padding:20px 0 40px
                }
            }

            .pageInnerLayout__reduction {
                padding: 20px 20px 40px;
                background: #fff;
                margin: 0 auto 60px
            }

            ul#breadcrumb-label{
                display: flex;
                justify-content: flex-start;
                padding: 20px 0;
                flex-wrap: wrap
            }

            ul#breadcrumb-label li,ul#breadcrumb-label  a {
                font-size: clamp(.625rem,.937vw,.75rem)
            }

            ul#breadcrumb-label li:after {
                content: "/";
                margin: 0 10px
            }

            ul#breadcrumb-label li:last-of-type:after {
                content: ""
            }

            ul#breadcrumb-label li a:hover {
                border-bottom: 1px solid;
                color: #0054aa
            }

            .active {
                color: #0054aa;
                font-weight: 700
            }
/* =====================================
    水道局からのお知らせ ここまで
===================================== */


/* =====================================
    お問い合せ ここから
===================================== */

.pageTitle[data-astro-cid-guvttfii] {
                color: #fff;
                background: #0054aa;
                padding: 26px 20px;
                font-size: clamp(1.12rem,1.56vw,1.25rem)
            }

            @media screen and (max-width: 768px) {
                .pageTitle[data-astro-cid-guvttfii] {
                    font-size:clamp(.875rem,1.25vw,1rem)
                }
            }

            .pageInnerLayout__inner {
                padding: 20px 20px 40px;
                background: #fff;
                margin: 0 auto 60px
            }

            .pageInnerLayout__feature {
                padding: 20px 140px 40px
            }

            @media screen and (max-width: 768px) {
                .pageInnerLayout__feature {
                    padding:20px 0 40px
                }
            }

            .pageInnerLayout__reduction {
                padding: 20px 20px 40px;
                background: #fff;
                margin: 0 auto 60px
            }

            .linkBtn[data-astro-cid-bqued5ja] {
                position: relative;
                display: block;
                text-align: center;
                background: #0054aa;
                color: #fff;
                padding: 8px;
                border-radius: 8px
            }

            @media screen and (max-width: 480px) {
                .linkBtn[data-astro-cid-bqued5ja] {
                    width:100%
                }
            }

            .linkBtn[data-astro-cid-bqued5ja]:after {
                content: "";
                display: block;
                position: absolute;
                top: 0;
                bottom: 0;
                margin: auto 0;
                right: 10px;
                transform: rotate(45deg);
                width: 12px;
                height: 12px;
                border-top: 2px solid #fff;
                border-right: 2px solid #fff
            }

                h3[data-astro-cid-uw5kdbxl] {
                color: #fff;
                margin: 24px 0;
                padding: 8px 12px;
                background: #20aee5
            }

            .time[data-astro-cid-uw5kdbxl] {
                margin: 20px 0
            }

            .time[data-astro-cid-uw5kdbxl] strong[data-astro-cid-uw5kdbxl] {
                background: #0054aa;
                color: #fff;
                padding: 4px 6px;
                margin-right: 12px
            }

            @media screen and (max-width: 768px) {
                .time[data-astro-cid-uw5kdbxl] span[data-astro-cid-uw5kdbxl] {
                    display:block
                }
            }

            .tel[data-astro-cid-uw5kdbxl] {
                color: #1068b3;
                display: block;
                margin: 20px 0;
                font-size: clamp(1rem,1.4vw,1.12rem);
                font-weight: 700
            }

            .tel[data-astro-cid-uw5kdbxl] strong[data-astro-cid-uw5kdbxl] {
                font-size: clamp(1.12rem,1.56vw,1.25rem);
                margin-right: 20px
            }

            .tel[data-astro-cid-uw5kdbxl] span[data-astro-cid-uw5kdbxl] {
                font-size: clamp(1rem,1.4vw,1.12rem)
            }

            @media screen and (max-width: 480px) {
                .tel[data-astro-cid-uw5kdbxl] span[data-astro-cid-uw5kdbxl] {
                    display:block
                }
            }

            .tel__kana[data-astro-cid-uw5kdbxl] {
                position: relative
            }

            .tel__kana[data-astro-cid-uw5kdbxl]:before {
                content: "みずきゅうきゅう";
                position: absolute;
                display: block;
                top: -16px;
                right: 0;
                font-size: clamp(.5rem,.781vw,.625rem)
            }

            .btn[data-astro-cid-uw5kdbxl] {
                width: 300px;
                margin: 20px 0;
                white-space: pre-wrap
            }

            @media screen and (max-width: 480px) {
                .btn[data-astro-cid-uw5kdbxl] {
                    width:100%
                }
            }

            .description__dot[data-astro-cid-uw5kdbxl] {
                color: #20aee5;
                margin-right: 4px
            }

            .reception[data-astro-cid-uw5kdbxl] {
                display: flex;
                margin: 20px 0
            }

            .reception[data-astro-cid-uw5kdbxl] li[data-astro-cid-uw5kdbxl] {
                color: #0054aa;
                border: 2px solid #0054AA;
                width: 200px;
                padding: 4px 0;
                margin-right: 15px;
                border-radius: 12px;
                text-align: center
            }
/* =====================================
    お問い合せ ここまで
===================================== */