@charset "UTF-8";



/*--------------------------------------------------------------------------

----------------------------------------------------------------------------

----------------------------------------------------------------------------

汎用

----------------------------------------------------------------------------

----------------------------------------------------------------------------

--------------------------------------------------------------------------*/



:root {

    --color-white: #fff;

    --color-black: #000;

    --color-green: #4daf8d;

    --color-pink: #eb8da0;

    --color-ivory: #fff7e8;

    --color-gray: #f4f4f4;



    --fw-regular: 400;

    --fw-medium: 500;

    --fw-bold: 700;



    --mrg-17: 1.7rem;

    --mrg-25: 2.5rem;

    --mrg-35: 3.5rem;

    --mrg-50: 5rem;

    --mrg-70: 7rem;

    --mrg-100: 10rem;

    --mrg-150: 15rem;



    --br-4: .4rem;

    --br-5: .5rem;

    --br-6: .6rem;

    --br-7: .7rem;

    --br-8: .8rem;

    --br-10: 1rem;

    --br-12: 1.2rem;

    --br-15: 1.5rem;

    --br-20: 2rem;



    --trans-eoe: cubic-bezier(0.16, 1, 0.3, 1);

}



/*----------------------------------------

テキスト用

----------------------------------------*/

.fs-15 {

    font-size: 1.5rem;

}

.fs-18 {

    font-size: 1.8rem;

}

.fs-20 {

    font-size: 2rem;

}

.fs-ih * {

    font-size: inherit;

}



.fw-r {

    font-weight: var(--fw-regular);

}

.fw-m {

    font-weight: var(--fw-medium);

}

.fw-b {

    font-weight: var(--fw-bold);

}

.fw-ih * {

    font-weight: inherit;

}



.lh-1 {

    line-height: 1;

}

.lh-20 {

    line-height: 2rem;

}

.lh-25 {

    line-height: 2.5rem;

}

.lh-30 {

    line-height: 3rem;

}

.lh-35 {

    line-height: 3.5rem;

}

.lh-40 {

    line-height: 4rem;

}

.lh-ih * {

    line-height: inherit;

}



.ls-0 {

    letter-spacing: 0;

}

.ls-01 {

    letter-spacing: .1em;

}

.ls-ih * {

    letter-spacing: inherit;

}



/*----------------------------------------

flex

----------------------------------------*/

.flex {

    display: flex;

}

.i-flex {

    display: inline-flex;

}

.jc-fs {

    justify-content: flex-start;

}

.jc-fe {

    justify-content: flex-end;

}

.jc-c {

    justify-content: center;

}

.jc-sb {

    justify-content: space-between;

}

.ai-fs {

    align-items: flex-start;

}

.ai-fe {

    align-items: flex-end;

}

.ai-bl {

    align-items: baseline;

}

.ai-c {

    align-items: center;

}

.fwr-wr {

    flex-wrap: wrap;

}

.fd-row {

    flex-direction: row;

}

.fd-col {

    flex-direction: column;

}



/*----------------------------------------

float

----------------------------------------*/

.flow-root {

    display: flow-root;

}

.float-left {

    float: left;

}

.float-right {

    float: right;

}



/*----------------------------------------

object-fit

----------------------------------------*/

.of {

    width: 100%;

    height: 100%;

    overflow: hidden;

}


.of img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: 50%;

}



/*----------------------------------------

コンテナ

----------------------------------------*/

.container {

    margin: 0 auto;

}



/*----------------------------------------

スクロールアニメーション

----------------------------------------*/

[data-saHover][data-scroll] {

    transition: 3s var(--trans-eoe);

    transition-property: transform,opacity;

    transform: translateY(2vh);

    opacity: 0;

    pointer-events: none;

}

[data-saHover][data-scroll="in"] {

    transform: translateY(0);

    opacity: 1;

    pointer-events: auto;

}







/*--------------------------------------------------------------------------

コンポーネント

--------------------------------------------------------------------------*/

/*----------------------------------------

見出し（ページトップ）

----------------------------------------*/

.cm__headline-pagetop {

    border-bottom: 1px solid var(--color-green);

}

.cm__headline-pagetop .headline-pagetop_txt-en {

    font-family: 'Noto Serif JP', serif;

}

.cm__headline-pagetop * {

    color: var(--color-green);

    font-weight: var(--fw-medium);

    letter-spacing: 0;

    text-align: center;

}

/*----------------------------------------

見出し（小）

----------------------------------------*/

.cm__headline-s span {

    color: var(--color-green); 

    font-weight: var(--fw-medium);

    border-bottom: 1px solid var(--color-green);

    display: inline-block;

}



/*----------------------------------------

見出し（大）

----------------------------------------*/

.cm__headline-l {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}

.cm__headline-l * {

    display: inline-block;

    color: var(--color-green);

    font-weight: var(--fw-medium);

}

.cm__headline-l .headline-l_txt-jp {

    border-bottom-style: solid;

    border-color: var(--color-green);

}

.cm__headline-l.a-center {

    align-items: center;

}

.cm__headline-l.a-center * {

    margin: 0 auto;

}



/*----------------------------------------

ボタン

----------------------------------------*/

.cm__link-btn {

    text-align: center;

    box-sizing: border-box;

}

.cm__link-btn span {

    display: block;

    position: relative;

    font-weight: var(--fw-medium);

    line-height: 1;

}

.cm__link-btn .arrow:after {

    content: "";

    position: relative;

    top: -.21275rem;

    display: inline-block;

    width: 1.2616rem;

    height: .8775rem;

    margin-left: 1rem;

}

.cm__link-btn.c-green {

    background: var(--color-green);

}

.cm__link-btn.c-green span {

    color: var(--color-white);

}

.cm__link-btn.c-green .arrow:after {

    background-image: url(../../_assets/img/common/arrow-white.svg);

    background-repeat: no-repeat;

}

.cm__link-btn.c-white {

    background: var(--color-white);

    box-shadow: 0 .3rem .6rem rgba(0,0,0, .16);

}

.cm__link-btn.c-white span {

    color: var(--color-green);

}

.cm__link-btn.c-white .arrow:after {

    background-image: url(../../_assets/img/common/arrow-green.svg);

    background-repeat: no-repeat;

}

.cm__link-btn.m-center {

    margin: 0 auto;

}



/*----------------------------------------

ロゴ

----------------------------------------*/

.cm__logo {

    display: inline-flex;

    align-items: center;

}

.cm__logo .logo_txt-en,

.cm__logo .logo_txt-jp {

    font-weight: var(--fw-medium);

}



/*----------------------------------------

アドレス

----------------------------------------*/

.cm__address .address_num {

    color: var(--color-green);

}

.cm__address .address_domicile {

    letter-spacing: .05em;

}



/*----------------------------------------

診察時間

----------------------------------------*/

.cm__timetable {

    box-sizing: border-box;

    border: 1px solid var(--color-black);

}

.cm__timetable .timetable_table {

    width: 100%;

}

.cm__timetable .timetable_table * {

    letter-spacing: 0;

}

.cm__timetable .timetable_table tbody tr {

    border-top: 1px solid var(--color-black);

}

.cm__timetable .timetable_table tr td,

.cm__timetable .timetable_table tr th {

    vertical-align: middle;

}

.cm__timetable .timetable_table tr th:first-child {

    text-align: left;

}

.cm__timetable .timetable_table tr td {

    text-align: center;

}

.cm__timetable .timetable_table tr th .table-hl_wrap span {

    display: block;

    line-height: 1;

}

.cm__timetable .timetable_table tr th .table-hl_wrap span:first-child {

    margin-right: .75em;

}

.cm__timetable .timetable_table tr th .table-hl_end {

    display: block;

}

.cm__timetable .timetable_table tbody tr td {

    font-weight: 700;

}



/* 2025/03追加 */
/*----------------------------------------

PDF

----------------------------------------*/

.cm__pdf ul li a {

    padding-right: 2.1rem;

    position: relative;

}

.cm__pdf ul li a::before {

    content: "";

    width: 1.5rem;

    height: 1.5rem;

    background-image: url(/_assets/img/introduction/introduction__main-facility__pdf__pdf.svg);

    background-size: contain;

    background-repeat: no-repeat;

    position: absolute;

    top: 50%;

    right: 0;

    transform: translateY(-50%);

}



/*----------------------------------------

Google Map

----------------------------------------*/

.cm__g-map {

    position: relative;

    overflow: hidden;

}

.cm__g-map iframe {

    position: absolute;

    left: 0;

    top: 0;

    height: 100%;

    width: 100%;

}



/*----------------------------------------

インフォメーション

----------------------------------------*/

.cm__facility-info {

    background: var(--color-ivory);

}

.cm__facility-info.rehabili {

    background: var(--color-green);

}

.cm__facility-info.support {

    background: var(--color-pink);

}

.cm__facility-info.rehabili .cm__address .address_num,

.cm__facility-info.support .cm__address .address_num {

    color: var(--color-white);

}

.cm__facility-info.support .cm__address .address_ttl_txt .address_fax {

    color: var(--color-white);

    font-weight: var(--fw-medium);

    align-self: flex-end;

}



/*--------------------------------------------------------------------------

----------------------------------------------------------------------------

----------------------------------------------------------------------------

インクルード

----------------------------------------------------------------------------

----------------------------------------------------------------------------

--------------------------------------------------------------------------*/



/*--------------------------------------------------------------------------

ヘッダー

--------------------------------------------------------------------------*/

#nav-header {

    width: 100%;

    background: var(--color-white);

    transition: .5s ease;

}

#nav-header .cm__logo *,

#nav-header .header_tel-btn * {

    transition: .5s ease;

}

/* 2025/03/11追加 */
#nav-header .header_nav .nav-list .nav-item a {

    transition: opacity .5s ease;

}



#nav-header .header_tel-btn {

    background: var(--color-green);

}

#nav-header .header_tel-btn .tel-btn_num {

    color: var(--color-white);

    font-weight: var(--fw-bold);

    line-height: 1;

    letter-spacing: .1em;

}



/*--------------------------------------------------------------------------

フッター

--------------------------------------------------------------------------*/

#nav-footer .footer_bottom-sec .footer_nav .nav-list .nav-item a {

    position: relative;

}

#nav-footer .footer_bottom-sec .footer_nav .nav-list .nav-item a:before {

    content: "";

    position: absolute;

    top: calc(50% - .4rem);

    left: 0;

    width: .8rem;

    height: .8rem;

    border: 2px solid var(--color-black);

    border-top: none;

    border-left: none;

    transform: rotate(-45deg);

}

#nav-footer .copyright {

    text-align: center;

    line-height: 1;

    letter-spacing: .1em;

    text-indent: -.1em;

}



/*--------------------------------------------------------------------------

----------------------------------------------------------------------------

----------------------------------------------------------------------------

ページ

----------------------------------------------------------------------------

----------------------------------------------------------------------------

--------------------------------------------------------------------------*/



/*--------------------------------------------------------------------------

フロントページ

--------------------------------------------------------------------------*/



/*----------------------------------------

ヒーローヘッダー

----------------------------------------*/

#page__top .sec__hero-header .hero-header_wrap {

    position: relative;

}

#page__top .sec__hero-header .hero-header-message {

    font-weight: var(--fw-medium);

    color: var(--color-white);

    text-shadow: 0 3px 6px rgb(61 70 70);

    position: absolute;

    z-index: 2;

}



/*----------------------------------------

インフォメーション

----------------------------------------*/

#page__top .sec__news .now-loading:after {

    content: "";

    display: inline-block;

    width: .2rem;

    height: .2rem;

    border-radius: 50%;

    background: transparent;

    box-shadow:.8rem 0 0 #000,1.6rem 0 0 #000,2.4rem 0 0 #000;

    animation: blink steps(4) 1s infinite;

}

@keyframes blink {

    0% {box-shadow:.8rem 0 0 transparent,1.6rem 0 0 transparent,2.4rem 0 0 transparent;}

    25% {box-shadow:.8rem 0 0 #000,1.6rem 0 0 transparent,2.4rem 0 0 transparent;}

    50% {box-shadow:.8rem 0 0 #000,1.6rem 0 0 #000,2.4rem 0 0 transparent;}

    75% {box-shadow:.8rem 0 0 #000,1.6rem 0 0 #000,2.4rem 0 0 #000;}

    100% {box-shadow:.8rem 0 0 #000,1.6rem 0 0 #000,2.4rem 0 0 #000;}

}



#page__top .sec__news .news-list .news-entry .entry-date .entry-time {

    display: block;

}

#page__top .sec__news .news-list .news-entry .entry-txt .entry-cate-list .cate-item {

    border: 1px solid #707070;

    border-radius: .2rem;

}

#page__top .sec__news .news-list .news-entry .entry-txt .entry-cate-list .cate-item {

    margin: 0 .5rem .5rem 0;

}

#page__top .sec__news .news-list .news-entry .entry-txt .entry-cate-list .cate-item:last-child {

    margin: 0 0 .5rem 0;

}

#page__top .sec__news .news-list .news-entry .entry-txt .entry-ttl {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}

#page__top .sec__news .more-link span {

    font-size: 1.3rem;

    margin-right: .5rem;

}



/* 求人募集 */
/* 2024年10月30日追加 */
.sec__recruit .info-ttl br,

.sec__recruit .recruit_text_qr p br
{

    display: contents;

}

.sec__recruit .recruit_text_qr {

    align-items: center;

}

.sec__recruit .recruit_text_qr svg {

    width: 10rem;

}



/*----------------------------------------

当院について&診療案内

----------------------------------------*/

#page__top .sec__about {

    position: relative;

    z-index: 1;

}

#page__top .sec__about.our-hospital:before {

    content: "";

    left: 0;

    position: absolute;

    width: 100%;

    background: var(--color-ivory);

    z-index: -1;

}

#page__top .sec__about .about_img .of img {

    object-position: 70% 0;

}



/*----------------------------------------

キャッチ

----------------------------------------*/

#page__top .sec__catch .catch_img {

    position: relative;

    width: 100%;

    z-index: 1;

}

#page__top .sec__catch .catch_txt {

    position: relative;

    background: var(--color-ivory);

    z-index: 2;

}



/*----------------------------------------

施設紹介

----------------------------------------*/

#page__top .sec__intro .intro-list .intro-item {

    width: 100%;

    background: var(--color-green);

    overflow: hidden;

}

#page__top .sec__intro .intro-list .intro-item .item_txt {

    box-sizing: border-box;

}

#page__top .sec__intro .intro-list .intro-item .item_txt .item_ttl {

    color: var(--color-white);

    font-weight: var(--fw-medium);

}



/*----------------------------------------

アクセス

----------------------------------------*/

#page__top .sec__access .access_txt {

    background: var(--color-ivory);

    box-sizing: border-box;

}



/*----------------------------------------

医師紹介

----------------------------------------*/







/*--------------------------------------------------------------------------

当院について

--------------------------------------------------------------------------*/



/*----------------------------------------

わたしたちのおもい

----------------------------------------*/

#page__our-hosp .sec__thought .thought__img figure {

    overflow: hidden;

}

#page__our-hosp .sec__thought .thought__catch span {

    position: relative;

    font-weight: var(--fw-medium);

}

#page__our-hosp .sec__thought .thought__catch span:before {

    content: "";

    position: absolute;

    background: var(--color-pink);

}

#page__our-hosp .sec__thought .thought__catch[data-scroll] span:before {

    transition: transform 1.5s ease;

}



/*----------------------------------------

当院３つの特徴

----------------------------------------*/

#page__our-hosp .sec__feature .feature-list .feature-item {

    background: var(--color-pink);

}

#page__our-hosp .sec__feature .feature-list .feature-item .feature-item_catch {

    text-align: center;

}



/* 2024年8月追加 */
/*----------------------------------------

かかりつけ医

----------------------------------------*/

#page__our-hosp .sec__doctor .doctor__txt .doctor__txt_ttl {

    margin-bottom: 1rem;

}

#page__our-hosp .sec__doctor .doctor__txt .doctor__txt_list li {

    list-style-type: disc;

    margin-left: 2rem;

}






/*--------------------------------------------------------------------------

診療案内

--------------------------------------------------------------------------*/







/*--------------------------------------------------------------------------

施設紹介

--------------------------------------------------------------------------*/

/*----------------------------------------

縦見出し

----------------------------------------*/

#page__introduction .thought__catch span {

    position: relative;

    font-weight: var(--fw-medium);

    color: var(--color-pink);

}

#page__introduction .thought__catch span:before {

    content: "";

    position: absolute;

    background: var(--color-green);

}

#page__introduction .thought__catch[data-scroll] span:before {

    transition: transform 1.5s ease;

}



/*----------------------------------------

イントロ

----------------------------------------*/

#page__introduction .intro_txt .intro_txt_box {

    background: var(--color-ivory);

}



#page__introduction .sec__main-facility .main-facility-list {

    flex-wrap: wrap;

}



/*----------------------------------------

流れ

----------------------------------------*/

#page__introduction .sec__facility-detail .facility-detail-flow_inner {

    position: relative;

    box-sizing: border-box;

    background-image: url(../img/introduction/introduction__rehabili__facility-detail-flow__arrow_line.svg);

    background-position: 0 0;

    background-repeat: repeat-y;

    z-index: 1;

}

#page__introduction .sec__facility-detail .facility-detail-flow_inner:after {

    position: absolute;

    content: "";

    background-image: url(../img/introduction/introduction__rehabili__facility-detail-flow__arrow_head.svg);

    background-repeat: no-repeat;

    z-index: 2;

}



/*----------------------------------------

腸内視鏡検査機

----------------------------------------*/

#page__introduction .sec__colonoscopy {

    background: #FDEAC3;

}

#page__introduction .sec__colonoscopy .colonoscopy_ai .colonoscopy_ai_ttl span {

    font-weight: var(--fw-medium);

}

#page__introduction .sec__colonoscopy .colonoscopy_ai .colonoscopy_ai_intro {

    position: relative;

}

#page__introduction .sec__colonoscopy .colonoscopy_ai .colonoscopy_ai_intro .colonoscopy_ai_img {

    position: relative;

    z-index: 1;

}

#page__introduction .sec__colonoscopy .colonoscopy_ai .colonoscopy_ai_intro .colonoscopy_ai_txt {

    position: absolute;

    z-index: 2;

}

#page__introduction .sec__colonoscopy .colonoscopy_ai .colonoscopy_ai_intro .colonoscopy_ai_txt .st1 {font-size: 15px;}

#page__introduction .sec__colonoscopy .colonoscopy_ai .colonoscopy_ai_intro .colonoscopy_ai_txt .st2 {fill: var(--color-green);}

#page__introduction .sec__colonoscopy .colonoscopy_ai .colonoscopy_ai_intro .colonoscopy_ai_txt .st3 {font-weight: 500;}

#page__introduction .sec__colonoscopy .colonoscopy_ai .colonoscopy_ai_intro .colonoscopy_ai_txt .st4 {font-size: 20px;}

#page__introduction .sec__colonoscopy .colonoscopy_ai .colonoscopy_ai_intro .colonoscopy_ai_txt .st5 {fill: none; stroke: var(--color-green); stroke-width: 2;}



/*--------------------------------------------------------------------------

医師紹介

--------------------------------------------------------------------------*/



/*----------------------------------------

院長あいさつ

----------------------------------------*/

#page__greeting .sec__greeting .greeting_img {

    position: relative;

}

#page__greeting .sec__greeting .greeting_img figure {

    position: relative;

    z-index: 1;

    border-radius: var(--br-8);

}

#page__greeting .sec__greeting .greeting_img .greeting_img_person {

    display: flex;

    flex-direction: row-reverse;

    position: absolute;

    background: var(--color-green);

    z-index: 2;

}

#page__greeting .sec__greeting .greeting_img .greeting_img_person * {

    color: var(--color-white);

    font-weight: var(--fw-medium);

    writing-mode: vertical-rl;

    line-height: 1;

}

#page__greeting .sec__greeting .greeting_img .greeting_img_person .person-name .first-name {

    margin-top: .5em;

}

#page__greeting .sec__greeting .greeting_txt {

    position: relative;

}

#page__greeting .sec__greeting .greeting_txt .greeting_txt_bio dl {

    display: flex;

}

#page__greeting .sec__greeting .greeting_txt .greeting_txt_bio dl dt {

    width: 4.5em;

    margin-right: .5em;

}

#page__greeting .sec__greeting .greeting_txt .greeting_txt_bio dl dd {

    width: calc(100% - 5em);

}

#page__greeting .sec__greeting .greeting_txt .greeting_txt_bg-logo {

    position: absolute;

    bottom: 0;

    right: 0;    

    z-index: -1;

    opacity: 0.2;

}



#page__greeting .sec__other-docs .other-docs-list .other-docs-item .other-docs_img figure {

    border-radius: var(--br-8);

}

#page__greeting .sec__other-docs .other-docs-list .other-docs-item .other-docs_name .person-title {

    margin-right: 1em;

}

#page__greeting .sec__other-docs .other-docs-list .other-docs-item .other-docs_bio dl {

    display: flex;

}

#page__greeting .sec__other-docs .other-docs-list .other-docs-item .other-docs_bio dl dt {

    width: 4.5em;

    margin-right: .5em;

}

#page__greeting .sec__other-docs .other-docs-list .other-docs-item .other-docs_bio dl dd {

    width: calc(100% - 5em);

}







/*--------------------------------------------------------------------------

アクセス

--------------------------------------------------------------------------*/



/*----------------------------------------

案内

----------------------------------------*/

#page__access .sec__access .access_map .access_txt {

    text-align: center;

}

#page__access .sec__access-around .access_around-list .access_around-item .access_around-img .of picture img {

    aspect-ratio: 320 / 240;
    
}

#page__access .sec__access-around .access_around-list .access_around-item .access_ttl {

    text-align: center;

}







/*--------------------------------------------------------------------------

404

--------------------------------------------------------------------------*/

#page__notfounds .notfounds_ttl,

#page__notfounds .notfounds_txt {

    text-align: center;

}