@charset "UTF-8";

/*++++++++++++++++++++++++++
	背景
++++++++++++++++++++++++++*/

#wrapper {
    width: 100%;
    margin: auto;
    color: #000;
    font-family: 'Noto Serif JP', serif;
    position: absolute;
}

/*++++++++++++++++++++++++++
	共通
++++++++++++++++++++++++++*/

.setitle {
    color: #000;
    font-size: 20px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    text-align: center;
    /*position: relative;*/
}

.setitle span {
    font-size: 12px;
    margin: 0 0 0 0;
    font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

/*++++++++++++++++++++++++++
	ヘッダー
++++++++++++++++++++++++++*/

header {
    /*background-color: rgba(0, 0, 0, 0.8);*/
    text-align: center;
    z-index: 5;
    width: 100%;
    display: block;
    position: absolute;
}

header .header_logo {
    width: 120px;
    margin: auto;
    padding: 15px 10px 0px 10px;
}


#special {
    max-width: 800px;
    padding: 0 0 0 0;
    margin: 80px auto 0 auto;
    background-color: #fff;
    color: #333;
    font-family: 'Noto Serif JP', serif;
    overflow: hidden;
}


#special .mainvisual_logo {
    background-color: black;
    position: relative;
    max-width: 800px;
    margin: auto;
}

#special .box-main-photo_pc {
    display: block;
    position: relative;
    max-width: 800px;
    background-color: black;
}

#special .box-main-photo_sp {
    display: none;
}

#special .mainvisual_logo .area_right {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

#special .mainvisual_logo .mainvisual_waku {
    background-color: rgba(0, 0, 0, 0.5);
    width: 350px;
    padding: 10px 0 5px;
    color: #fff;
    text-align: center;
}

#special .mainvisual_logo .area_right .logo_img {
    margin: 0 auto;
    max-width: 180px;
    padding: 5px;
}

#special .mainvisual_logo .area_right .slick-dots {
    display: none;
}

#special .mainvisual_logo .area_right .logo_catch {
    font-size: 13px;
}


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

    #special .box-main-photo_sp {
        display: block;
        position: relative;
        max-width: 800px;
        background-color: black;
    }

    #special .box-main-photo_pc {
        display: none;
    }

    #special .mainvisual_logo .mainvisual_waku {
        background-color: rgba(0, 0, 0, 0.5);
        width: 220px;
        padding: 9px 5px;
        color: #fff;
        text-align: center;
    }

    #special .mainvisual_logo .area_right .logo_img {
        margin: 0 auto;
        max-width: 200px;
        padding: 5px 5px 10px 5px;
    }

    #special .mainvisual_logo .area_right .logo_catch {
        font-size: 14px;
    }

}

/*
mainvisual
shop_slide
pickup_wrap
スライドdot設定
*/

#special .mainvisual_logo .slick-dots li button:before,
#special .pickup_wrap .slick-dots li button:before,
#special .shop_slide .slick-dots li button:before {
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;

    /*描画位置*/
    position: absolute;
    top: 10px;
    /*線の形状*/
    width: 35px;
    height: 3px;
    background: #e2c290;

    content: '';
    text-align: center;

    opacity: .5;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#special .mainvisual_logo .slick-dots li.slick-active button:before,
#special .pickup_wrap .slick-dots li.slick-active button:before,
#special .shop_slide .slick-dots li.slick-active button:before {
    opacity: .9;
    color: black;
    content: "";
    /*描画位置*/
    position: absolute;
    top: 10px;
    /*線の形状*/
    width: 35px;
    height: 3px;
    background: #e2c290;
    /*線の動き1.4秒かけて動く。永遠にループ*/
    animation: pathmove 4s ease-in-out;
    opacity: 0;
    animation-fill-mode: forwards;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove {
    0% {
        width: 0;
        top: 10px;
        opacity: 1;
    }

    100% {
        width: 100%;
        top: 10px;
        opacity: 1;
    }
}


/*スライド両サイド透明化*/
#special .pickup_wrap .slick-slide {
	transform: scale(0.8);/*左右の画像のサイズを80%に*/
	transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
}
#special .pickup_wrap .slick-slide img {
	opacity: 0.5;/*透過50%*/
	transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
}

#special .pickup_wrap .slick-slide.slick-center{
	transform: scale(1);/*中央の画像のサイズだけ等倍に*/
}

#special .pickup_wrap .slick-slide.slick-center .img_bk{
	background-color: #fff !important;
}

#special .pickup_wrap .slick-slide.slick-center img{
	opacity: 1;/*透過なし*/
}




/*design*/

#special #design .slick-dots {
    display: none;
}


#special #design h2 {
    font-size: 20px;
    color: #4d4d4d;
    text-align: center;
    margin: 50px 0 0.5em 0;
}

#special #design h3 {
    font-size: 16px;
    text-align: center;
    margin: 0 0 0 0;
}

#special #design h4 {
    font-size: 20px;
    color: #4d4d4d;
    text-align: center;
    margin: 50px 0 0 0;
}


#special #design .design_wrap {
    max-width: 1000px;
    width: 99%;
    margin: 20px auto;
    display: flex;
    justify-content: space-between;
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.1));
}

#special #design .design_wrap ul {
    display: flex;
    align-items: stretch;
    text-align: left;
    flex-wrap: wrap;
}

#special #design .design_wrap ul li {
    position: relative;
    width: 32.5%;
    margin: 0 auto 1%;
    padding: 0px;
    line-height: 0;
}
/*
#special #design .design_wrap ul li img{
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.1));
}
*/

#special #design .radius1 {
    border-radius: 8px 0 0 0;
}

#special #design .radius2 {
    border-radius: 0 8px 0 0;
}

#special #design .radius3 {
    border-radius: 0 0 0 8px;
}

#special #design .radius4 {
    border-radius: 0 0 8px 0;
}






/*
#special #design .design_wrap ul li:nth-child(5) {
    border: 1px solid #eeeeee;
}
*/



/*
shop
*/

#special #shop h4 {
    font-size: 20px;
    color: #4d4d4d;
    text-align: center;
    margin: 50px 0 0 0;
}

#special #shop .shop_slide {
    max-width: 600px;
    margin: 20px auto 40px;
    padding: 0 0 0 0;
}






/*ranking*/

#special .ranking {
    margin: 40px auto 0 auto;
    font-family: 'Noto Serif JP', serif;
}

#special .ranking .slick-dots {
    display: none;
}


#special .ranking h2 {
    font-size: 20px;
    color: #4d4d4d;
    text-align: center;
    margin: 0 0 20px 0;
    padding: 0.5em 0 0 0;
    display: block;
}

#special .ranking .one_wrap {
    width: auto;
    margin: 5px;
    padding: 8px;
    min-height: 200px;
    clear: both;
    position: relative;
    background-color: #f6f6f6d6;
}

#special .ranking article {
    max-width: 1000px;
    margin: 20px auto;
}

#special .ranking article ul {

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

#special .ranking article ul li {
    position: relative;
    width: 48%;
    margin: 10px auto 10px;
    padding: 8px;
    min-height: 200px;
    position: relative;
    background-color: #f6f6f6d6;
}

#special .ranking p {
    padding: 10px 2px;
    text-align: center;
    color: #000;
    font-size: 15px;
    line-height: 1.4em;
}


#special .ranking p span {
    font-size: 12px;
    display: block;
}



#special .ranking p a {
    color: #ffffff;
}

#special .ranking a:hover {
    text-decoration: none;
}


/*eternity*/


#special #eternity {
    margin: 40px auto 0 auto;
    font-family: 'Noto Serif JP', serif;
}

#special #eternity h2 {
    font-size: 20px;
    color: #4d4d4d;
    text-align: center;
    margin: 0 0 20px 0;
    padding: 0.5em 0 0 0;
    display: block;
}

#special #eternity .catch {
    padding: 0px 2px 20px;
    text-align: center;
    color: #000;
    font-size: 15px;
    line-height: 1.4em;
}


#special #eternity .catch span {
    font-size: 12px;
    display: block;
}



#special #eternity .catch a {
    color: #ffffff;
}

#special .eternity a:hover {
    text-decoration: none;
}



/*riyu*/
#special #riyu {
    margin: 40px auto 50px;
}

#special #riyu h2 {
    font-size: 20px;
    color: #4d4d4d;
    text-align: center;
    margin: 40px 0 30px 0;
}


/*number*/

#special .ranking .number {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 40px;
}


@media screen and (max-width: 500px) {
    #special .ranking .number {
        position: absolute;
        top: 8px;
        left: 8px;
        width: 30px;
    }
}




/*more*/

#special .more {
    width: 95%;
    margin: auto;
    overflow: auto;
}

#special .more a {
    color: #AA923A;
    font-size: 15px;
    text-align: right;
    border-bottom: 1px solid #AA923A;
    float: right;
    letter-spacing: 0.1em;
}

#special .more a:after {
    margin: 0 0 0 5px;
    content: '';
    display: inline-block;
    width: 18px;
    height: 10px;
    background-repeat: no-repeat;
    background-image: url(../images/arrow.svg);
    background-size: contain;
    vertical-align: middle;
}


/*pickup*/

#special #pickup h2 {
    font-size: 20px;
    color: #4d4d4d;
    text-align: center;
    margin: 40px 0 20px 0;
    font-feature-settings: "palt";
}



#special .pickup_wrap {
    max-width: 800px;
    width: 95%;
    margin: 0 auto 50px;
}

#special .pickup_wrap div {
    padding: 0px 0px 0px 5px;
    margin: 0px 0px 0px 0px;
}

#special .pickup_wrap div img {
    border-radius: 8px;
}

#special .pickup_wrap .img_bk {
    filter: drop-shadow(3px 3px 4px #00000030);
    width: 95%;
    margin: 0 0px 5px 0px;
    padding: 0 0 0 0;
    background-color: #000;
    border-radius: 8px;
}


#special .pickup_wrap div p {
    margin: 10px 0 0 0;
    font-size: 14px;
    text-align: center;
}




/*eternity_wrapのスライド*/

#special .eternity_wrap {
    max-width: 1000px;
    width: 95%;
    margin: 0 auto;
}

#special .eternity_wrap div {
    padding: 0 15px 10px 10px;
    margin: 0 auto 0;
}

#special .eternity_wrap div img {
    border-radius: 8px;
    filter: drop-shadow(2px 2px 1px #e9e9e9);
}

#special .eternity_wrap .eternity_txt1 {
    text-align: center;
    margin: 20px 0 0 0;
    font-size: 18px;
}

#special .eternity_wrap .eternity_txt2 {
    text-align: center;
    margin: 10px 0 0 0;
    font-size: 14px;
}


/*左右の矢印の位置を変える*/

#special .eternity_wrap .slick-prev {
    left: 7% !important;
    z-index: 10 !important;
    top: 31%;
}

#special .eternity_wrap .slick-next {
    right: 5% !important;
    z-index: 10 !important;
    top: 31%;
}


@media screen and (min-width: 500px) {
    #special .eternity_wrap .slick-prev {
        left: 7% !important;
        z-index: 10 !important;
        top: 38%;
    }

    #special .eternity_wrap .slick-next {
        right: 5% !important;
        z-index: 10 !important;
        top: 38%;
    }

}

#special .eternity_wrap .slick-arrow:before {
    content: "" !important;
    width: 9px !important;
    height: 24px !important;
    position: absolute;
    top: 0;
    left: 0;
}

#special .eternity_wrap .slick-next:before {
    background: url(../images/arrow_r.svg) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

#special .eternity_wrap .slick-prev:before {
    background: url(../images/arrow_l.svg) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

#special .eternity_wrap .slider .slick-list {
    padding: 0 4% 0 0 !important;
}


@media screen and (min-width: 500px) {

    #special .eternity_wrap .slider .slick-list {
        padding: 0 0 0 0 !important;
    }
}




/*riyu_wrapのスライド*/

#special .riyu_wrap {
    max-width: 1000px;
    width: 95%;
    margin: 0 auto;
}

#special .riyu_wrap div {
    padding: 0 15px 10px 10px;
    margin: 0 auto 0;
}

#special .riyu_wrap div img {
    border-radius: 8px;
    filter: drop-shadow(2px 2px 1px #e9e9e9);
}

#special .riyu_wrap .riyu_txt1 {
    text-align: center;
    margin: 20px 0 0 0;
    font-size: 16px;
}

#special .riyu_wrap .riyu_txt2 {
    text-align: center;
    margin: 10px 0 0 0;
    font-size: 14px;
}


/*左右の矢印の位置を変える*/

#special .riyu_wrap .slick-prev {
    left: 7% !important;
    z-index: 10 !important;
    top: 31%;
}

#special .riyu_wrap .slick-next {
    right: 5% !important;
    z-index: 10 !important;
    top: 31%;
}


@media screen and (min-width: 500px) {
    #special .riyu_wrap .slick-prev {
        left: 7% !important;
        z-index: 10 !important;
        top: 38%;
    }

    #special .riyu_wrap .slick-next {
        right: 5% !important;
        z-index: 10 !important;
        top: 38%;
    }

}

#special .riyu_wrap .slick-arrow:before {
    content: "" !important;
    width: 9px !important;
    height: 24px !important;
    position: absolute;
    top: 0;
    left: 0;
}

#special .riyu_wrap .slick-next:before {
    background: url(../images/arrow_wr.svg) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

#special .riyu_wrap .slick-prev:before {
    background: url(../images/arrow_wl.svg) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

#special .riyu_wrap .slider .slick-list {
    padding: 0 4% 0 0 !important;
}


@media screen and (min-width: 500px) {

    #special .riyu_wrap .slider .slick-list {
        padding: 0 0 0 0 !important;
    }
}




/* Dots */

#special .riyu_wrap .slick-dots,
#special .eternity_wrap .slick-dots  {
    position: absolute;
    bottom: -10px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}

#special .riyu_wrap .slick-dots li,
#special .eternity_wrap .slick-dots li {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 10px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
}

#special .riyu_wrap .slick-dots li button,
#special .eternity_wrap .slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}

#special .riyu_wrap .slick-dots li button:before,
#special .eternity_wrap .slick-dots li button:before {
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #fff !important;
    border: 1px solid #E0BA8A;
    background-image: initial !important;
    content: '';
    text-align: center;
    opacity: .25;
    color: black;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#special .riyu_wrap .slick-dots li.slick-active button:before,
#special .eternity_wrap .slick-dots li.slick-active button:before {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #E0BA8A !important;
    border: 1px solid #E0BA8A;
    opacity: .75;
    color: black;
}


/*slick*/
#special .slick-slide img {
    width: 100%;
    height: auto;
}





/*tenpo*/

#tenpo {
    max-width: 600px;
    width: 90%;
    margin: auto;
    padding: 20px 0 0 0;
}

#tenpo h2 {
    font-size: 20px;
    color: #4d4d4d;
    text-align: center;
    margin: 0 0 10px 0;
}

.tenpo-box-main-photo {
    position: relative;
    width: 100%;
    height: 270px;
    overflow: hidden;
}

#tenpo article {
    background-image: url(../images/tenpo.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    padding: 0px;
    height: 270px;
    width: auto;
}

#tenpo .tenpo_logo {
    background-color: black;
    position: relative;
}

#tenpo a {
    display: block;
    text-align: center;
}

#tenpo .tenpo_logo .bk_black {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    height: auto;
    width: 280px;
    margin: auto;
}

#tenpo .tenpo_logo .logo_img {
    width: auto;
    margin: auto;
    padding: 15px 0;
    width: 200px;
}

#tenpo .tenpo_logo p {
    color: white;
    font-size: 15px;
    margin: 0 0 10px 0;
    text-align: center;
}



.footer_sns_box {
    display: table;
    width: 180px;
    margin: 0 auto;
}

.footer_sns_box .navi {
    display: table-cell;
    box-sizing: border-box;
    width: 10%;
    padding: 5px;
}

.footer_sns_box .navi--ex {
    box-sizing: border-box;
    width: 14%;
    padding: 2px;
}

.footer_sns_box .navi a {
    display: block;
    cursor: pointer;
}

.footer_sns_box .navi a img {
    width: 100%;
    height: auto;
}








/*++++++++++++++++++++++++++
	店舗案内
++++++++++++++++++++++++++*/

#shoplist {
    max-width: 800px;
    padding: 20px;
    background-color: #fff;
    color: #000;
    margin: auto;
}

#shoplist .pagelink {
    margin: 40px 0;
    padding: 0 20px;
}

#shoplist .pagelink a {
    color: #000;
}

#shoplist .pagelink ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
}

#shoplist .shop_photo {
    margin: 0 0 10px 0;
}


#shoplist .matterport {
    margin: 0 0 10px 0;
    width: 100%;
    margin: auto;
}

#shoplist .matterport p {
    font-size: 16px;
    text-align: center;
    margin: 0 auto 10px;
}



#shoplist .shop_name {
    font-size: 18px;
    margin: 15px 0 10px 0;
    line-height: 1.0em;
}

#shoplist .shop_name span {
    font-size: 14px;
}

#shoplist .shop_access {
    font-size: 14px;
    margin: 0 0 10px 0;
    font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

#shoplist .shop_tel {
    background-color: #f6f6f6;
    border-radius: 0;
    display: block;
    padding: 0;
    margin: 10px 0;
}

#shoplist .shop_tel .tel_line {
    background-color: #fff;
    /*background: linear-gradient(#e3ca97, #ffeac0);*/
    color: #000;
    display: block;
    text-align: center;
    padding: 15px;
    font-size: 20px;
    line-height: 0px;
    border: #9e9e9e 1px solid;
    border-radius: 4px;
}

#shoplist .shop_tel .tel_icon {
    width: 20px;
    margin: 0 0px 0 0;
}

#shoplist .shop_tel span {
    vertical-align: 3px;
    letter-spacing: 2px;
}

#shoplist .shop_tel .arrow {
    padding: 0 10px 0 0;
    font-size: 13px;
    color: #AF9538;
    position: absolute;
    top: 50%;
    /*親要素を起点に上から50%*/
    right: 10px;
    /*親要素を起点に左から50%*/
}

#shoplist .shop_map {
    display: block;
    text-align: right;
    color: #AF9538;
    font-size: 14px;
    margin: 0 0 30px 0;
}



#shoplist .shoplist_waku ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: stretch;
}

#shoplist .shoplist_waku ul li {
    width: 45%;
    padding: 0 0 10px;
}


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


    #shoplist .shoplist_waku ul {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: stretch;
    }

    #shoplist .shoplist_waku ul li {
        width: 100%;
        padding: 0;
    }

}



/*++++++++++++++++++++++++++
	フッターロゴ
++++++++++++++++++++++++++*/

#footerlogo {
    width: 100%;
    padding: 20px 0 20px;
    background-color: #fff;
    color: #000;
    margin: 0 auto 60px;
    box-sizing: border-box;
}

#footerlogo .logo {
    max-width: 150px;
    margin: auto;
    padding: 0 0 10px;

}

#footerlogo .txt {
    text-align: center;
    font-size: 12px;

}

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

    #footerlogo {
        margin: 0 auto 130px;
    }

}



/*++++++++++++++++++++++++++
	フッター
++++++++++++++++++++++++++*/

footer {
    display: none;
}

@media screen and (max-width: 500px) {
    footer {
        display: block;
        position: fixed !important;
        bottom: 0;
        right: 0;
        left: 0;
        z-index: 100;

    }

    footer .footer_tel_wrap {
        background-color: #000000da;
        padding: 5px;
    }

    footer .footer_tel a {
        color: #fff;
        text-align: center;
        padding: 5px;
        margin: 5px auto;
        border: rgb(188, 188, 188) 1px solid;
        display: block;
        background-color: #ffffff2d;
    }

    footer .footer_btn {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: stretch;
    }


    footer .footer_btn .link_wrap a:hover {
        opacity: 1;
    }

    footer .footer_btn .link_wrap {
        text-align: center;
        background-color: #f6f6f6;
        font-size: 18px;
        display: block;
        width: 50%;
        padding: 5px;
        box-sizing: border-box;
        cursor: pointer;
    }

    footer .footer_btn .link_wrap .line {
        text-align: center;
        line-height: normal;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        /*border: #e3ca97 1px solid !important;
        background: linear-gradient(#e3ca97, #ffeac0);*/
        background-color: #e2c290;
        width: 100%;
        margin: auto;
        padding: 10px 0;
        color: #fff;
    }

    footer .footer_btn .link_wrap a {
        text-align: center;
        line-height: normal;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        /*border: #e3ca97 1px solid !important;
        background: linear-gradient(#e3ca97, #ffeac0);*/
        background-color: #e2c290;
        width: 100%;
        margin: auto;
        display: block;
        color: #fff;
        padding: 10px 0;
    }

}


/*--------------------------------------
		pagetop
---------------------------------------*/

a#btn_top {
    position: fixed;
    bottom: 60px;
    right: 5px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    color: #6A5849;
    padding: 9px 7px;
    text-align: center;
    display: block;
    border-radius: 3px;
    display: none;
}

a#btn_top span {
    display: block;
    font-size: 11px;
}

a#btn_top a:hover {
    text-decoration: none;
    background: rgba(255, 255, 255, 0.2);
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
}



/*--------------------------------------
		lightbox
---------------------------------------*/
.lightbox {
    display: none;
    color: #000;
    text-align: center;
    font-family: 'Noto Serif JP', serif;
}



/*quo_banner*/

.quo_banner {
    max-width: 600px;
    width: 95%;
    margin: auto;
    display: block;
    position: relative;
    font-family: 'Noto Serif JP', serif;
    margin: 0 auto 10px;
    padding: 0 0 0 0;
    line-height: 0;
}

.quo_banner img {
    width: 100%;
}


/*yoyaku_button*/

.yoyaku_button_wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 600px;
    width: 95%;
    margin: auto;
}

.yoyaku_button_wrap img {
    width: 100%;
}



.yoyaku_button_wrap .yoyaku_button_tel,
.yoyaku_button_wrap .yoyaku_button_web {
    display: block;
    margin: 0 0 30px;
    width: 49%;
    position: relative;
    font-family: 'Noto Serif JP', serif;
    cursor: pointer;
}

.yoyaku_button_wrap .yoyaku_icon {
    display: block;
    width: 20%;
    height: auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    top: 48%;
    transform: translateY(-52%);
    left: 15px;
}

.yoyaku_button_wrap .yoyaku_button_tel span,
.yoyaku_button_wrap .yoyaku_button_web span {
    display: block;
    position: absolute;
    right: 0;
    width: 82%;
    color: #6a3906;
    font-size: 20px;
    line-height: 1em;
    text-align: center;
    top: 44%;
    transform: translateY(-56%);
}

@media screen and (min-width: 500px) {
    .yoyaku_button_wrap .yoyaku_button_tel {
        display: none;
    }

    .yoyaku_button_wrap .yoyaku_button_web {
        width: 100%;
    }

    .yoyaku_button_wrap .yoyaku_icon {
        width: 10%;
        left: 30px;
    }

    .yoyaku_button_wrap .yoyaku_button_tel span,
    .yoyaku_button_wrap .yoyaku_button_web span {
        right: 0;
        width: 100%;
        font-size: 25px;
    }

}



/*yoyaku_button*/

.yoyaku_button_footer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 600px;
    width: 100%;
    margin: auto;
    background-color: #ffffffdd;
    padding: 8px 8px 0;
}

.yoyaku_button_footer img {
    width: 100%;
}



.yoyaku_button_footer .yoyaku_button_tel,
.yoyaku_button_footer .yoyaku_button_web {
    display: block;
    margin: 0 0 0;
    width: 49%;
    position: relative;
    font-family: 'Noto Serif JP', serif;
    cursor: pointer;
}

.yoyaku_button_footer .yoyaku_icon {
    display: block;
    width: 20%;
    height: auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    top: 48%;
    transform: translateY(-52%);
    left: 15px;
}

.yoyaku_button_footer .yoyaku_button_tel span,
.yoyaku_button_footer .yoyaku_button_web span {
    display: block;
    position: absolute;
    right: 0;
    width: 82%;
    color: #6a3906;
    font-size: 20px;
    line-height: 1em;
    text-align: center;
    top: 44%;
    transform: translateY(-56%);
}