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




/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
    sns：メイン
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
:root {

    /* メイン画像　横幅・縦幅 */
    --width-sns-mainimage: 450px;
    --height-sns-mainimage: 300px;

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


    /* デザインタイトル */
    --fontsize-sns-name: 24px;
    --color-sns-name: #333333;

}

.sns_main img{
    display: block;
    width: var(--width-sns-mainimage);
    height: var(--height-sns-mainimage);
}

.page_main {
    display: flex;
    justify-content: center;
    margin-top: 200px;
    margin-bottom: 40px;
}


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


.sns_main p.tag {
    font-size: var(--fontsize-sns-tag);
    color: var(--color-sns-tag);
}

.sns_main p.name {
    font-size: var(--fontsize-sns-name);
    color: var(--color-sns-name);
    margin-top: 5px;
    font-weight: 600;
}

/* ++++++++++++++++++レスポンシブ+++++++++++++++++ */
:root{

    /* メイン画像　横幅・縦幅 */
    --rwd-width-sns-mainimage: 300px;
    --rwd-height-sns-mainimage: 200px;

    /* ＃タグ */
    --rwd-fontsize-sns-tag: 14px;
    --rwd-color-sns-tag: #2B95B7;

    /* デザインタイトル */
    --rwd-fontsize-sns-name: 18px;
    --rwd-width-sns-name: 90px;


}

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

    .sns_main img{
    width: var(--rwd-width-sns-mainimage);
    height: var(--rwd-height-sns-mainimage);
    margin-top: 20px;
    }

    .page_main {
    flex-direction: column;
    align-items: center;
    margin-top: 80px;
    }   

    .tag_title {
    margin-right: 20px;
    }

    .sns_main p.tag {
    font-size: var(--rwd-fontsize-sns-tag);
    }

    .sns_main p.name {
    font-size: var(--rwd-fontsize-sns-name);
    }
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
    sns：イメージ
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/


:root{

    /* イメージ画像*/
    --width-sns-image: 450px;
    --height-sns-image: 550px;

    /* ※こちらは仮想のバナーとなっております。 */
    --fontsize-sns-text: 16px;

    /* 紹介文テキスト */
    --width-sns-text: 830px;
    --height-sns-text: auto;
    --fontsize-sns-text: 16px;
    --color-sns-text: #333333;

}


.sns_image{
    text-align: center;
    margin-top: 80px;
}

#slide img {
    display: block;
    width: var(--width-sns-image);
    height: var(--height-sns-image);
    margin: 0 auto 40px auto; 
}

.sns_image p{
    width: var(--width-sns-text);
    height: var(--height-sns-text);
    font-size: var(--fontsize-sns-text);
    color: var(--color-sns-text);
    margin: 0 auto;
}

p.sns_text{
    margin-top: 50px;
}

/* ++++++++++++++++++レスポンシブ+++++++++++++++++ */
:root{

    /* 後半画像 */
    --rwd-width-sns-image: 300px;
    --rwd-height-sns-image: 400px;


    /* 紹介文テキスト */
    --rwd-width-sns-text: 100%;
    --rwd-fontsize-sns-text: 14px;

}

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


    .sns_image{
    text-align: center;
    }

    #slide  img {
    display: block;
    width: var(--rwd-width-sns-image);
    height: var(--rwd-height-sns-image);
    margin: 0 auto 40px auto;
}


    .sns_image p{
    width: var(--rwd-width-sns-text);
    font-size: var(--rwd-fontsize-sns-text);
    margin: 0 auto;
    }

    p.sns_text{
    margin-top: 50px;
    }

}