@charset "utf-8";

/****************************************************************
 下層ページにおけるメニューの設定

 【背景色】
    ・背景が単色の場合(under_common内での初期設定)
        背景色を透明にする。
    ・背景が画像の場合（各ページCSSにて設定）
        背景色を黒半透明(black-transparent)にする。
*****************************************************************/

header {
    /* 初期設定として、背景色を透明にする */
    background-color: transparent;
}

/****************************************************************
 ページタイトルの設定
 初期設定では背景色をmain-colorにしている。(under_common内に記述)
 背景画像を設定する場合は、各ページのCSSにそれぞれ記述する。

 【記述例】
 .page_title_wrap {
    background-image: url(../../img/画像の名前.jpg);
    background-size: cover;
}
*****************************************************************/

.page_title_wrap {
    /* ページタイトルセクションの背景の大きさの設定 */
    width: 100%;
    height: 280px;
    /* 初期設定として、背景色をmain-colorにする */
    background-color: var(--main-color);
    /* ページタイトルとコンテンツとの余白 */
    margin-bottom: var(--header-gutter);
}

.page_title_text_wrap {
    /* ページタイトル文字背景の色 */
    background-color: var(--white-transparent);
    /* 背景色の最大幅 */
    max-width: 320px;
    /* 中央配置 */
    margin-left: auto;
    margin-right: auto;
    /* メニューに被らないよう下へ移動 */
    transform: translateY(144px);
}

.page_title_text {
    /* 文字を中央配置 */
    text-align: center;
    /* 文字背景色の高さを設定 */
    padding: 32px 0;
}

/* PC版の設定 */
@media screen and (min-width:950px) {
    .page_title_wrap {
        /* ページタイトルセクションの背景の大きさの設定 PC版 */
        height: 320px;
        /* ページタイトルとコンテンツとの余白 PC版 */
        margin-bottom: var(--header-gutter-pc);
    }
}

/*=====min-width:950px=====*/