/* TABLE OF CONTENTS:
*
* 00 どのサイズでも共通で適用されるスタイル
* 01 幅 768px 未満
*    - フォントサイズと行送り
* 02 幅 480px 以上
* 03 幅 768px 以上
*    - フォントサイズと行送り
*    - 見出しデザイン
*    - 基本パーツ
* 04 幅 880px 以上
* 05 幅 1072px 以上
* 06 幅 1264px 以上
*/

/* --------------------------------------------------------------------------------------------------------
01
*
* どのサイズでも共通で適用されるスタイル
*/

/*基本レイアウト*/
.css-br {
    display: block;
}
.ta-c {
    text-align: center;
}
.mincho {
    font-family: 'Yu Mincho', YuMincho, 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'HGP明朝B', serif;
    font-size: 1.3rem;
    font-weight: 700;
}

/*ビルボード*/
.site-main #mainImg {
    background-image: none;
    padding-top: 0;
    padding-bottom: 0;
}
#mainImg > div {
    max-width: 1000px;
    margin-right: auto;
    margin-left: auto;
}
#mainImg div h1,
#mainImg div p {
    color: #333;
}

.outer.bg {
    background: url(../img/contents/line-smp.png) no-repeat right top 9%;
    background-size: 25%;
}

.intro {
    text-align: center;
    padding-top: 1vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    /* max-width: 800px; */
    margin: 0 auto;
}

/* 10/5追加 */
div.intro p.line-catch {
    text-align: center !important;
    color: #00b900;
}

.line-color {
    color: #00b900;
}

.concept {
    margin-bottom: 3em;
}
.concept span.mincho {
    text-shadow: 1px 1px 2px #fff, -1px 1px 2px #fff, 1px -1px 2px #fff, -1px -1px 2px #fff;
}
.concept .add-friend {
    text-align: center;
    padding-top: 2vw;
}

.add-friend img {
    padding-top: 2em;
    margin-bottom: 4em;
}

div.line-intro ul {
    list-style: none;
    display: grid;
    grid-auto-columns: 1fr,1fr;
    -ms-grid-columns: auto 0px auto;
    grid-template-columns: auto auto;
    -ms-grid-rows: auto 0px auto;
    grid-template-rows: auto auto;
    gap: 0px 90px;
    align-items: center;
    max-width: 800px;
    margin-right: auto;
    margin-left: auto;
}

div.line-intro ul li {
    display: block;
    text-align: center;
}

p.add-friend {
    text-align: center !important;
}

.line-qr span,
.add-friend span {
    display: block;
}

/*見出し*/
.outer h2.title {
    text-align: center;
}

#main .line {
    text-align: center;
}
.outer .business-time {
    border: 10px solid #316745;
    border-radius: 10px;
    padding: 0.3em 0.5em 1em;
    margin-top: 2em;
}
#main .line .add-friend {
    text-align: center;
}
.fs-b {
    font-size: 1.2rem
}

.linesatei-txt {
    margin: 3em auto !important;
    text-align: center;
}
.lineqr-img img {
    border: #ccc 1px solid;
}

p.lineqr-text {
    text-align: left !important;
}
/*　撮影のポイント　*/
.outer.line-bg .line-point .col-1-3 p.text-box{
    text-align: left !important;
    margin: 1rem 1.5rem 0.5rem;
}
.outer.line-bg{
    background-color: #f2f2f2;
}


/* --------------------------------------------------------------------------------------------------------
01
*
* 幅 768px 未満
*/
@media screen and (max-width: 767px) {

    /*ビルボード*/
    .site-main #mainImg {
        background-color: #FFF;
        background-size: contain;
        background-position: left bottom;
    }
    .site-main #mainImg h1 {
        padding-top: 3vw;
    }
    .site-main #mainImg h1 + div {
        background: url(../img/contents/line-bil.png) center top no-repeat;
        background-size: 70vw;
        padding-top: 61.7vw;
    }
    .site-main #mainImg h1 + div p img {
        width: 70%;
        margin-left: 15vw;
    }
    
    /*見出し*/
    .outer h2.title {
        background-color: #281e0d;
        padding: 1em 0.5em;
        font-size: 1rem;
        color: #fff;
    }

    div.line-intro ul {
        display: block;
    }

    .outer.bg {
        background: url(//www.ryokuwado.com/wp-content/themes/twentyseventeench/css/../img/contents/line-smp.png) no-repeat right top 7%;
        background-size: 15%;
    }

    .css-br {
        display: block;
    }

}/* End max767px */



/* --------------------------------------------------------------------------------------------------------
02
*
* 幅 480px 以上
*/
@media screen and (min-width: 30em) {

    /*基本レイアウト*/
    .css-br {
        display: inline;
    }
    .mincho {
        font-size: 1.5rem;
    }

}/* End 620px Mobile Large */



/* --------------------------------------------------------------------------------------------------------
03
*
* 幅 768px 以上
*/
@media screen and (min-width: 48em) {

    /*ビルボード*/
    .site-main #mainImg {
        background-color: #e9e4d4;
        text-align: left;
        position: relative;
    }
    #mainImg:before {
        background-image: url(../img/contents/line-bil.png),url(../img/bg/under-bg.png) ;
        background-position: right 5% bottom, left top;
        background-repeat: no-repeat;
        background-size: 35% auto, auto 100%;
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
    #mainImg > div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: start;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        min-height: 500px;
        position: relative;
        z-index: 1;
    }
    /*IE11対応*/
    _:-ms-lang(x)::-ms-backdrop, #mainImg > div {
        min-height: auto;
        height: 500px;
    }

    .mincho {
        font-size: 2rem;
    }
    .site-main #mainImg img {
        width: auto;
    }
    .intro {
        text-align: left;
        /* padding-left: 13vw; */
        padding-top: 1vw;
        text-align: center;
    }
    .concept .add-friend {
        padding-top: 1em;
        /* padding-left: 6em; */
        text-align: left;
    }
    .outer.bg {
        background-position: right top 20%;
    }
    
    /*見出し*/
    /*見出し*/
    h2.title {
        width: 108%;
        position: absolute;
        bottom: 0;
        left: -4%;
        right: 4%;
        background-image: url(../img/bg/object-left.png), url(../img/bg/flow-line.png), url(../img/bg/object-right.png);
        background-color: #e9e4d4;
        background-repeat: no-repeat, repeat,no-repeat;
        background-position: left -15vw bottom, center ,right -15vw bottom;
        background-size: 60vw, 100%, 60vw;
        color: #333;
        font-size: 1.5rem;
        border-top: 10px solid #241a08;
        padding: 0.6em 0.5em;
        position: relative;
    }

    .fs-b {
        font-size: 2rem
    }

    div.line-intro ul {
        gap: 0px 1em;
    }

    .outer.bg {
        background-size: 21%;
        background-position: right 12% top 10% !important;
    }


}/* End 740px Tablet Small */



/* --------------------------------------------------------------------------------------------------------
04
*
* 幅 880px 以上
*/
@media screen and (min-width: 55em) {
    /*ビルボード*/
    #mainImg:before {
        background-position: right 5% bottom, left top;
        background-size: 50% auto, auto 100%;
    }
}/* End 880px Tablet Large */

/* TB表示 */
@media all and (min-width: 768px) and (max-width: 1024px) { 
    .css-br {
        display: block;
    }

}

/* --------------------------------------------------------------------------------------------------------
05
*
* 幅 1072px 以上
*/
@media screen and (min-width: 67em) {

    /*ビルボード*/
    #mainImg:before {
        background-position: right 13% bottom, left top;
        background-size: auto 100%, auto 100%;
    }
    /*見出し*/
    h2.title {
        background-position: left -8vw bottom, center ,right -8vw bottom;
        background-size: contain, 100%, contain;
    }

}/* End 955px Desktop Small */



/* --------------------------------------------------------------------------------------------------------
06
*
* 幅 1264px 以上
*/
@media screen and (min-width: 79em) {

    /* イントロ背景 */
    .intro:before {
        bottom: 140px;
        z-index: -1;
    }
}
/* End 1100px Desktop Medium */