@charset "UTF-8";
/********************************************************************************

page-about.css　About

********************************************************************************/

/*============================================================
 メインビジュアル
*============================================================*/
/* 
---------------------------------------- */
#page-about #mainvisual  {
}
#page-ページslug #セクション名  {
}

/*============================================================
 ページ共通
*============================================================*/
/* 
---------------------------------------- */
#page-about .section .sec-title {
    text-align: center;
    margin-bottom: 24px;
}

/*============================================================
 セクション アイキャッチ　設定されている場合に表示
*============================================================*/
#page-about #sec-eyecatch {
    margin-bottom: 48px;
}
#page-about #sec-eyecatch .eyecatch img {
    border-radius: 24px;
}

/*============================================================
 セクション 概要
*============================================================*/
#page-about #sec-summary {
    margin-bottom: 96px;
}
#page-about #sec-summary .inner {
	--common-inner-base-width-custom: 720px;
	max-width: var(--common-inner-max-width-custom);
}
#page-about #sec-summary .block-summary {
    margin-bottom: 24px;
}
#page-about #sec-summary .block-map iframe {
    border-radius: 16px;
}

/*============================================================
 セクション 代表メッセージ
*============================================================*/
#page-about #sec-message {
}
#page-about #sec-message .block-representative {
    min-height: 480px;
    /* aspect-ratio: 1280 / 480; */
    background-image: url(../images/about/message-bg.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    position: relative;
    margin-bottom: 48px;
}
#page-about #sec-message .block-representative .info {
    width: 100%;
    position: absolute;
    bottom: 16px;
    left: 0;
    color: var(--common-color-white);
}
#page-about #sec-message .block-representative .info .catch {
    font-weight: 900;
    font-size: clamp(48px, 12.8vw, 84px);
    /* font-size: 84px; */
    line-height: 120%;
    text-shadow: 1px 1px 12px rgba(0, 0, 0, 0.30);
    margin-bottom: 10px;
}
#page-about #sec-message .block-representative .info .block-prof {
    width: fit-content;
    padding: 8px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.20);
    backdrop-filter: blur(4px);
    margin-left: auto;
}
#page-about #sec-message .block-representative .info .block-prof .prof-post {
    font-weight: 500;
    font-size: 18px;
    line-height: 120%;
    margin-bottom: 8px;
}
#page-about #sec-message .block-representative .info .block-prof .prof-name {
    font-weight: bold;
    font-size: 28px;
    line-height: 100%;
}
#page-about #sec-message .block-representative .info .block-prof .prof-name span {
    padding-left: 8px;
    vertical-align: bottom;
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;
}
#page-about #sec-message .block-message .inner {
	--common-inner-base-width-custom: 800px;
	max-width: var(--common-inner-max-width-custom);
}



/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
 Tablet
_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
@media screen and (max-width: 1007px) {
    /*============================================================
     メインビジュアル
    *============================================================*/
    /* 
    ---------------------------------------- */
    #page-about #mainvisual {
    }

    /*============================================================
     セクション
    *============================================================*/
    /* 
    ---------------------------------------- */
    #page-about #sec-セクション名 {
    }

}



/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
 SP
_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
@media screen and (max-width: 767px) {
    /*============================================================
     セクション 概要
    *============================================================*/
    #page-about #sec-summary {
        margin-bottom: 64px;
    }

    /*============================================================
     セクション 代表メッセージ
    *============================================================*/
    #page-about #sec-message .block-representative .info .catch {

    }

}