@charset "utf-8";
@import '../CSS/common.css';



/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
    バナー詳細ページ：メイン
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
:root {

    /* ＃タグ */
    --color-banner-tag: #2B95B7;
    --fontsize-banner-tag: 16px;

    /* name */
    --color-banner-name: #333333;
    --fontsize-banner-name: 24px;

    /* メイン画像 */
    --width-banner-mainimage: 400px;
    --width-banner-mainimage-500: 450px;


    /* 画像下テキスト */
    --fontsize-banner-maintext: 16px;

}
.banner_main{
    margin-top: 200px;
    margin-bottom: 50px;
}

.page_main {
    display: flex;
    justify-content: center;
    align-items: start;
}

.tag_title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* height: 300px; */
    margin-right: 40px;
}


.banner_main p.tag {
    font-size: var(--fontsize-banner-tag);
    color: var(--color-banner-tag);
}

.banner_main p.name {
    font-size: var(--fontsize-banner-name);
    color: var(--color-banner-name);
    font-weight: 600;
}

.banner_main img {
    width: var(--width-banner-mainimage);
}

.banner_main img.size500 {
    width: var(--width-banner-mainimage-500);
}

p.banner_maintext {
    font-size: var(--fontsize-banner-maintext);
    text-align: center;
    margin-bottom: 100px;
}


/* +++++++++++++++++++レスポンシブ++++++++++++++++++++++++ */

:root {
    /* #タグ */
    --rwd-fontsize-banner-tag: 10px;

    /* デザイン名 */
    --rwd-fontsize-banner-name: 18px;

    /* メイン画像 */
    --rwd-width-banner-mainimage: 230px;
    --rwd-height-banner-mainimage: 230px;
    --rwd-width-banner-mainimage-large: 300px;

    /* 画像下テキスト */
    --rwd-fontsize-banner-maintext: 14px;

}

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

    .banner_main {
        margin-top: 80px;
    }

    .page_main {
        flex-direction: column;
        align-items: center;
        height: auto;
        margin-top: 0px;
        margin-bottom: 50px;
    }

    .tag_title {
        margin-right: 20px;
    }

    .banner_main p.tag {
        display: inline-block;
        font-size: var(--rwd-fontsize-banner-tag);
        width: var(--rwd-width-banner-name);
    }

    .banner_main p.name {
        font-size: var(--rwd-fontsize-banner-name);
    }

    .banner_main img {
        width: var(--rwd-width-banner-mainimage);
        margin-top: 20px;
    }

     .banner_main img.large{
        display: block;
        width: var(--rwd-width-banner-mainimage-large);
        margin-bottom: 0px;
    }

    p.banner_maintext {
        font-size: var(--rwd-fontsize-banner-maintext);
    }


}