@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond&family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@400;500;600;700&display=swap');

/* ===================================================================

 file name  :  common.css

=================================================================== */

/* --------------------------------------------------
 common
--------------------------------------------------- */
html{ width: 100%;}
body{
    width: 100%;
    background: #f6f4f0;
    color: #333;
    letter-spacing: .05em;
    font-weight: 400;
    font-size: 13px;
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1;
}
a{ color: #333; text-decoration: none;}
*, *:after, *:before{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
img{ max-width: 100%; width: auto; height: auto;}
.ctr:before,
.ctr:after{ display: block; overflow: hidden; content: "";}
.ctr:after{ clear: both;}
.ctr{ zoom: 1;}
.ctr-left{ float: left;}
.ctr-right{ float: right;}
.table{ display: table;}
.table-left{ display: table-cell;}
.table-right{ display: table-cell;}
.txt-l{ text-align: left;}
.txt-r{ text-align: right;}
em{ color: #ff5400; font-style: normal;}
em a{ color: #ff5400;}
.pc{ display: none;}
.sp{ display: block;}

.pagetop{ position: fixed; right: 10px; bottom: 10px; z-index: 9999; display: none;}
.pagetop a{ display: block; width: 44px; height: 44px; background: #fff; color: #c59a53; text-align: center; font-size: 24px; line-height: 44px;}

.cs{ padding: 100px 0; text-align: center;}
.cs span{ display: inline-block; padding: 10px 30px; border: 1px solid; color: #dfc89b; font-size: 14px;}

.anchor{ position: relative; z-index: -1;}
.anchor:before { display: block; margin-top: -50px; width: 100%; height: 50px; content: ""; vertical-align: top;}

/* --------------------------------------------------
 header
--------------------------------------------------- */
.header{ position: fixed; top: 0; z-index: 100; width: 100%; height: 50px; background: #fff;}
.header .logo{ display: inline-block; float: left; padding: 10px 0 0 15px; height: 40px;}
.header .logo img{ height: 100%;}
.header .sns{ position: absolute; top: 9px; right: 14%;}
.header .sns ul{ display: flex; align-items: baseline;}
.header .sns li{ padding: 0 0 0 8px;}
.header .sns li .tel-btn{ display: flex; font-size: 30px; cursor: pointer;}
.header .sns li .tel-btn.open{ color: #c59a53;}
.header .sns li a{ font-size: 30px;}
.header .sb-toggle-right{ display: inline-block; float: right; color: #333; cursor: pointer;}
.drawer-hamburger { z-index: 110; display: block; box-sizing: content-box; padding: 0 15px; width: 6%; height: 50px; outline: 0; border: 0; background-color: transparent; transition: all .4s cubic-bezier(0.190, 1.000, 0.220, 1.000); transform: translate3d(0, 0, 0);}
.drawer-hamburger:hover { background-color: transparent; cursor: pointer;}
.drawer-hamburger-icon { position: relative; display: block;}
.drawer-hamburger-icon,
.drawer-hamburger-icon:before,
.drawer-hamburger-icon:after { width: 100%; height: 3px; border-radius: 100%; background: #333; transition: all .4s cubic-bezier(0.190, 1.000, 0.220, 1.000);}
.drawer-hamburger-icon:before,
.drawer-hamburger-icon:after { position: absolute; top: -9px; left: 0; content: ' ';}
.drawer-hamburger-icon:after { top: 9px;}
.sb-active .drawer-hamburger-icon { background-color: transparent;}
.sb-active .drawer-hamburger-icon:before,
.sb-active .drawer-hamburger-icon:after { top: 0;}
.sb-active .drawer-hamburger-icon:before { transform: rotate(45deg);}
.sb-active .drawer-hamburger-icon:after { transform: rotate(-45deg);}

.tel-nav{ position: fixed; top: -100%; left: 0; z-index: 20; visibility: hidden; padding: 50px 0 0; width: 100%; border-bottom: 1px solid #e9e1d1; background: #f6f4f0; font-family: "Noto Serif JP", serif; opacity: 0;}
.tel-nav.open{ top: 0; visibility: visible; opacity: 1; transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);}
.tel-nav .list-tel > li{ padding: 15px; border-top: 1px solid #e9e1d1;}
.tel-nav .list-tel dl{ display: flex; justify-content: space-between; align-items: center;}
.tel-nav .list-tel a{ color: #c59a53; text-decoration: underline; font-family: 'Noto Sans JP', sans-serif;}
.tel-nav .btn-close{ padding: 12px 0 8px; border-top: 1px solid #e9e1d1; background: #fff;}
.tel-nav .btn-close span{ display: block; margin: 0 auto; width: 10px; height: 10px; border-top: 2px solid #333; border-right: 2px solid #333; transform: rotate(-45deg);}


/* --------------------------------------------------
 common
--------------------------------------------------- */
.notes{ box-sizing: border-box; margin: 30px auto; padding: 15px 0; width: calc(100% - 30px); border: 3px double #b38d41; background: rgba(255,255,255,.5); text-align: center; font-size: 14px;}
.notes a{ color: #ff5400;}
.notes a:hover{ text-decoration: underline;}

.note3{ margin: 30px 0 0; padding: 0 14px 15px;}
.note3 a{ display: block; box-sizing: border-box; padding: 15px 0; border: 1px solid #8B8075; color: #101010; text-align: center; font-family: "Noto Serif JP", serif;}

.wrap-table{ overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap;}
.wrap-table::-webkit-scrollbar{ height: 5px;}
.wrap-table::-webkit-scrollbar-track{ background: #F1F1F1;}
.wrap-table::-webkit-scrollbar-thumb{ background: #BCBCBC;}

.fixbn{ position: absolute; top: 0; right: 0; z-index: 100000; visibility: hidden; opacity: 0;}
.fixbn.is-show{ visibility: visible; opacity: 1;}
.fixbn .inner{ position: relative; z-index: 200; display: flex; flex-direction: column; box-sizing: border-box; padding: 0 30px; width: 78.666vw; height: 64.533vw; background: rgba(180,174,151,.9); color: #fff; justify-content: center; align-items: flex-start;}
.fixbn .close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    display: block;
    overflow: visible;
    width: 25px;
    height: 25px;
    cursor: pointer;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
}
.fixbn .close-btn:before,
.fixbn .close-btn:after{ position: absolute; top: 50%; right: 0; width: 25px; height: 1px; background: #FFFFFF; content: "";}
.fixbn .close-btn:before{ transform: translate(0,-50%) rotate(45deg);}
.fixbn .close-btn:after{ transform: translate(0,-50%) rotate(-45deg);}

.fixbn .inner .tl{ width: 100%;}
.fixbn .inner .tl img{ width: 100%;}
.fixbn .inner a{ display: inline-block; margin: 20px 0 0; padding: 10px 20px; background: #fff; color: #606060; text-align: center; font-size: 12px; line-height: 1;}

#insta-window{ padding: 0 !important; border: none !important; border-radius: none !important;  background: none !important;}
.iswd-copyright-wrapper{ display: none !important;}

/* --------------------------------------------------
 top
--------------------------------------------------- */
.top .ttl{ padding: 50px 15px 15px; background: #fff;}
.top .ttl img{ width: 100%;}

.top img{ max-width: 100%; width: 100%;}

.ani { opacity: 0;}
.fadein { animation: fadein 1.2s ease forwards;}

@keyframes fadein {
    0% { opacity: 0;}
    100% { opacity: 1;}
}

.sec{ margin: 45px 0 0; padding: 40px 0 0; background: url("/sp/img/blt.gif") no-repeat top center / contain;}
.sec h2{ display: flex; flex-direction: column; color: #b48e3a; letter-spacing: .12em; font-size: 20px; font-family: "Noto Serif JP", serif;align-items: center; }
.sec h2 span{ margin: 1em 0 0; color: #333; text-align: center; letter-spacing: .12em; font-size: 12px;}

.sec1 .slide{ opacity: 0; transition: opacity 1.2s ease;}
.sec1 .slide.slick-initialized{ opacity: 1;}
.sec1 .slide .slick-slide{ backface-visibility: hidden; transform-style: preserve-3d;}
.sec1 .slide a{ position: relative; display: block;}
.sec1 .slide .caption{ position: absolute; right: 4vw; bottom: 4vw; display: flex; flex-direction: column; color: #fff; text-align: right;letter-spacing: .1em; font-weight: 400; font-size: 16px; font-family: "Cormorant Garamond", serif; line-height: 1.5; align-items: flex-end; }
.sec1 .slide .caption span{ font-size: 10px;}

.slick-dotted.slick-slider{ margin-bottom: 0;}
.slick-dots{ bottom: -30px;}
.slick-dots li{ margin: 0 4px; width: 8px; height: 8px;}
.slick-dots li button{ padding: 0; width: 8px; height: 8px;}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before{ opacity: 1;}
.slick-dots li button:before{ width: 8px; height: 8px; border: 1px solid #b38d41; border-radius: 100%; content: ''; opacity: 1;}
.slick-dots li.slick-active button:before{ background: #b38d41; opacity: 1;}

.top h1{ margin: 60px 0 0; text-align: center; letter-spacing: .1em; font-size: 14px; font-family: "Noto Serif JP", serif; line-height: 2;}

.sec2{ display: flex; flex-direction: column; align-items: center;}
.sec2 ul > li{display: flex; flex-direction: column;  margin: 60px 0 0; align-items: center;}
.sec2 ul > li:first-child{ margin: 30px 0 0;}
.sec2 h3{ display: flex; flex-direction: column; justify-content: center; align-items: center;}
.sec2 h3 img{ width: 65vw;}
.sec2 ul > li:last-child h3 img{ width: 80vw;}
.sec2 h3 span{ margin: 1em 0 0; color: #333; letter-spacing: .1em; font-size: 12px;}
.sec2 figure{ margin: 30px 0 0; width: 60vw; filter: drop-shadow(0px 6px 6px rgba(0, 0, 0, 0.16));}
.sec2 p{ margin: 30px 0 0; text-align: center; letter-spacing: .1em; font-size: 14px; font-family: "Noto Serif JP", serif; line-height: 2;}

.sec .more{ margin: 30px 0 0;}
.sec .more a{ display: flex; margin: 0 auto; width: 38vw; height: 8vw; border: 1px solid #b38d41; color: #b38d41; letter-spacing: .1em; font-size: 10px; align-items: center; justify-content: center;}
.sec .more a:hover{ background: #b38d41; color: #f6f4f0;}

.sec3 ul{display: flex; flex-direction: column; margin: -10px 0 0; align-items: center;}
.sec3 ul > li{ padding: 10px 8vw 0;}
.sec3 ul a{ display: block; filter: drop-shadow(0px 6px 6px rgba(0, 0, 0, 0.16));}

.list-news{ padding: 15px 8vw;}
.list-news > li{ margin: 15px 0 0; padding: 15px 0 0; border-top: 1px solid #e9e1d1;}
.list-news > li:first-child{ padding: 0; border: none;}
.list-news a{ display: flex; justify-content: space-between;}
.list-news figure{ position: relative; overflow: hidden; padding-top: 38.2%; width: 38.2%; height: 0;}
.list-news figure img{ position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%,-50%); object-fit: cover;}
.list-news .detail{ position: relative; padding: 0 0 0 4vw; width: 61.8%; letter-spacing: .05em; line-height: 1.75;}
.list-news .detail .cat{ position: relative; margin: 0 0 1em; padding: 0 0 .5em; color: #b38d41; font-size: 10px; font-family: "Noto Serif JP", serif;}
.list-news .detail .cat:after{ position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: #b38d41; content: "";}
.list-news .detail .cat.is-animated:after{ animation: 1.2s stroke-width .6s cubic-bezier(0.22, 1, 0.36, 1) forwards;}
@keyframes stroke-width {
    0% { width: 0; opacity: 1;}
    100% { width: 100%; opacity: 1;}
}
.list-news .detail h3{ word-break: break-all; letter-spacing: .05em; font-size: 12px;}
.list-news .detail time{ position: absolute; bottom: 0; left: 4vw; font-size: 10px;}

.list-sns{ padding: 0 8vw;}
.list-sns > li{ margin: 45px 0 0;}
.list-sns > li:first-child{ margin: 0;}
.list-sns .insta-wrap{position: relative;  margin: 30px 0 0; padding-top: 100%;}
.list-sns .insta-wrap iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.list-sns .more a{ width: 50vw;}

.sec6 ul{ padding: 0 8vw;}
.sec6 ul > li{ margin: 60px 0 0;}
.sec6 ul > li:first-child{ margin: 30px 0 0;}
.sec6 ul figure{ margin: 0 0 0 -8vw; filter: drop-shadow(0px 6px 6px rgba(0, 0, 0, 0.16));}
.sec6 ul > li:nth-child(even) figure{ margin: 0 -8vw 0 0;}
.sec6 ul .detail{ margin: 30px 0 0; text-align: center;}
.sec6 ul .detail h3{ display: flex; flex-direction: column; color: #b38d41; letter-spacing: .12em; font-weight: 500; font-size: 16px; font-family: "Noto Serif JP", serif; line-height: 1.75; align-items: center; justify-content: center;}
.sec6 ul .detail h3 span{ color: #333; font-size: 12px;}
.sec6 p{ margin: 15px 0 0; text-align: center; letter-spacing: .1em; font-size: 14px; font-family: "Noto Serif JP", serif; line-height: 2;}
.sec6 ul .detail .more{ margin: 30px 0 0;}

.sec7{ padding: 40px 0 45px;}

.list-shop-wrap{ margin: 30px calc(50% - 50vw) 0;}
.list-shop{ opacity: 0; transition: opacity 1.2s ease;}
.list-shop.slick-initialized{ opacity: 1;}
.list-shop .slick-slide{ padding: 0 4vw; width: 66vw; backface-visibility: hidden; transform-style: preserve-3d;}
.list-shop a{ display: block;}
.list-shop a:hover{ color: #333;}
.list-shop figure{ overflow: hidden;}
.list-shop figure img{ transition: all .3s ease-in-out;}
.list-shop a:hover figure img{ transform: scale(1.1);}
.list-shop .detail{ padding: 15px 0 0; text-align: left; letter-spacing: .05em; font-size: 12px;line-height: 1.75; }
.list-shop h3{ color: #b38d41; text-align: left; white-space: nowrap;font-weight: 500; font-size: 16px; font-family: "Noto Serif JP", serif; line-height: 1.5; }
.list-shop p{ margin: 1em 0 0;}
.list-shop table{ margin: 1em 0 0; width: 100%; border-top: 3px double #e0c898; border-bottom: 3px double #e0c898; font-size: 10px; line-height: 1.5;}
.list-shop table th{ padding: 5px 5px 5px 0; width: 25%; border-top: 1px solid #e0c898; vertical-align: top; text-align: left; white-space: nowrap; font-weight: normal;}
.list-shop table td{ padding: 5px 0 5px 5px; border-top: 1px solid #e0c898; border-left: 1px solid #e0c898;}
.sec7 .more{ margin: 60px 0 0;}

/* --------------------------------------------------
 article
--------------------------------------------------- */
article{ padding: 75px 0 0;}
article header{ padding: 0 15px; font-family: "Noto Serif JP", serif;}
article header .ttl{ display: flex; flex-direction: column; padding: 0; background: none; text-align: center; letter-spacing: .12em; font-weight: 400; font-family: "Noto Serif JP", serif; line-height: 1.5; align-items: center;}
article header .ttl .en{ color: #b48e3a; font-size: 20px;}
article header .ttl h1{ display: block; margin: 1em 0 0; color: #333; font-size: 10px; line-height: 1;}
article header > h1{display: flex; flex-direction: column;  color: #b48e3a; text-align: center; letter-spacing: .12em; font-weight: 400; font-size: 20px; font-family: "Noto Serif JP", serif; line-height: 1.5; align-items: center;}
article header > h1 span{ margin: 1em 0 0; color: #333; font-size: 10px; line-height: 1;}
article header p{ margin: 15px 0 0; line-height: 1.8;}
article header .btn{ margin: 15px 0 0; width: 100%;}
article header .btn a{ position: relative; display: block; padding: 15px; background: #b38d41; color: #fff;}
article header .btn a:after{
    position: absolute;
    top: 50%;
    right: 15px;
    display: block;
    margin-top: -4px;
    width: 8px;
    height: 8px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    content: "";
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

article > nav{ margin: 30px 0; padding: 0 15px; font-family: "Noto Serif JP", serif;}
article > nav ul{ display: flex; width: 100%; align-items: stretch; justify-content: center;}
article > nav ul > li{ padding: 0 10px; border-right: 1px solid #e9e1d1;}
article > nav ul > li:first-child{ border-left: 1px solid #e9e1d1;}
article > nav ul > li a{ display: flex; padding: 10px 0; width: 100%; height: 100%; border: none; color: #333; text-align: center; white-space: nowrap;letter-spacing: .05em; font-size: 10px; line-height: 1.5; justify-content: center; align-items: center; }
article > nav ul > li a:after{ content: none;}
article > nav ul > li.current a{ border-bottom: 1px solid; background: none;color: #b48e3a; }

/* --------------------------------------------------
 form
--------------------------------------------------- */
.form{ padding: 30px 15px;}
.form .lead{ padding: 30px 15px; background: #f1ede6; line-height: 1.5;}
.form .lead li{ margin: 15px 0 0;}
.form .lead li a{ position: relative; display: block; padding: 15px; background: #e9e1d1;}
.form .lead li a:after{
    position: absolute;
    top: 50%;
    right: 15px;
    display: block;
    margin-top: -2px;
    width: 8px;
    height: 8px;
    border-right: 1px solid #b38d41;
    border-bottom: 1px solid #b38d41;
    content: "";
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.form .lead p{ margin: 15px 0 0;}
.form .lead p:first-child{ margin: 0;}
.form .lead p a{ text-decoration: underline;}
.form .note{ margin: 30px 0 0;}
.form .note2{ margin: 0;}
.form h3{ margin: 30px 0 0; text-align: center; font-weight: bold;}
.form table{ margin: 15px 0 0; width: 100%; border: 3px double #e0c898;}
.form table th{ display: block; padding: 15px; background: #f1ede6; text-align: left; line-height: 1.8;}
.form table td{ display: block; padding: 15px; line-height: 1.8;}
.form table td p{ padding: 1em 0 0;}
.form .type2{ margin: 15px 0 0; width: 100%; border: 3px double #e0c898;}
.form .type2 th{ display: table-cell; padding: 15px; background: #f1ede6; text-align: left; line-height: 1.8;}
.form .type2 td{ display: table-cell; padding: 15px; line-height: 1.8;}
.form .type2 td div + div{ margin: 15px 0 0;}
.form input[type="text"]{ width: 30%;}
.form input[type="text"].long{ width: 100%;}
.form input[type="text"].md{ width: 75%;}
.form input[type="tel"]{ width: 100%;}
.form input[type="email"]{ width: 100%;}
.form input[type="radio"]{ vertical-align: middle;}
.form select{ width: 20%;}
.form select.long{ width: 100%;}
.form textarea{ box-sizing: border-box; padding: 5px; width: 100%; height: 150px;}
.form .agree{ overflow: auto; -webkit-overflow-scrolling: touch; margin: 15px 0 0; padding: 15px; height: 300px; border: 3px double #e0c898; line-height: 1.5;}
.form .agree h2{ font-weight: bold;}
.form .agree p{ margin: 15px 0 0;}
.form .agree ul{ margin: 0 0 0 1.5em;}
.form .agree li{ margin: 15px 0 0; list-style: disc;}
.form dl{ border-right: 3px double #e0c898; border-bottom: 3px double #e0c898; border-left: 3px double #e0c898;}
.form dt{ padding: 15px; background: #f1ede6; font-weight: bold; line-height: 1.8;}
.form dd{ padding: 15px; line-height: 1.8;}
.form .submit{ margin: 30px 0 0; text-align: center;}
.form button{ width: 40%; height: 45px; border: none; background: #b28c39; color: #fff; line-height: 45px;}
.form button:hover,
.form button:active{ background: #fff; color: #b28c39;}
.form .thanks{ line-height: 1.8;}
.form .thanks p + p{ margin: 15px 0 0;}
.fin{ margin: 30px 0 0; padding: 15px; border: 1px solid; color: #f00; text-align: left; line-height: 1.8;}
.form h2{ margin: 30px 0 0; font-size: 17px;}
.form .list{ margin: 15px 0 0; border-top: 1px solid #e9e1d1;}
.form .lead + .list{ margin: 30px 0 0;}
.form .list > li{ border-bottom: 1px solid #e9e1d1;}
.form .list a{ display: block; padding: 15px 0 15px 15px;}
.form .list h3{ position: relative; margin: 0; color: #b28c39; text-align: left; text-decoration: underline; font-weight: normal;}
.form .list h3:after{
    position: absolute;
    top: 50%;
    right: 15px;
    display: block;
    margin-top: -2px;
    width: 6px;
    height: 6px;
    border-right: 1px solid #b38d41;
    border-bottom: 1px solid #b38d41;
    content: "";
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.form .list dl{ display: flex; margin: 15px 0 0; border: none; font-size: 12px; flex-wrap: wrap;}
/*
.form .list dt{ padding: 0; width: 18%; background: none; font-weight: normal;}
.form .list dd{ padding: 0 0 0 15px; width: 82%; border-left: 1px solid #e9e1d1;}
*/
.form .list dt{ padding: 0; width: 30%; background: none; font-weight: normal;}
.form .list dd{ padding: 0 0 0 10px; width: 70%; border-left: 1px solid #e9e1d1;}
.form .list dd span{ display: block; color: #f00;font-size: 10px; }

/* --------------------------------------------------
 app
--------------------------------------------------- */
.app{ padding: 40px 0 45px; background: url("/sp/img/blt.gif") no-repeat top center; background-size: contain;}
.app h2{ padding: 0 15px; color: #b38d41; text-align: center; font-size: 17px;}
.app ul{ margin: 30px 0 0; border-top: 1px solid #e9e1d1;}
.app ul li{ border-bottom: 1px solid #e9e1d1;}
.app ul li a{ position: relative; display: block; padding: 15px;}
.app ul li a:after{
    position: absolute;
    top: 50%;
    right: 15px;
    display: block;
    margin-top: -2px;
    width: 6px;
    height: 6px;
    border-right: 1px solid #b38d41;
    border-bottom: 1px solid #b38d41;
    content: "";
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.app p{ margin: 30px 0 0; padding: 0 15px; line-height: 1.8;}
.app .btn{ margin: 15px 0 0; padding: 0 15px;}
.app .btn a{ position: relative; display: block; padding: 15px; background: #b38d41; color: #fff;}
.app .btn a:after{
    position: absolute;
    top: 50%;
    right: 15px;
    display: block;
    margin-top: -2px;
    width: 8px;
    height: 8px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    content: "";
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.flow{ padding: 25px 15px 45px; background: url("/sp/img/blt.gif") no-repeat top center; background-size: contain;}
.flow h2{ color: #b48e3a; text-align: center; letter-spacing: .1em; font-weight: 400; font-size: 18px; font-family: "Noto Serif JP", serif; line-height: 1.5;}
.list-flow{ position: relative; display: inline-block; margin: 30px auto 0; counter-reset: number; font-size: 13px;}
.list-flow:before{ position: absolute; top: 0; left: 10px; width: 1px; height: 100%; background: #e9e1d1; content: "";}
.list-flow > li{ position: relative; padding: 0 0 0 2.5em; counter-increment: number; text-align: left;}
.list-flow > li:before{ position: absolute; top: 50%; left: 0; display: flex; width: 20px; height: 20px; border-radius: 100%; background:  #e9e1d1; content: counter(number); font-size: 10px; font-family: "Noto Serif JP", serif; transform: translate(0,-50%); align-items: center; justify-content: center;}
.list-flow > li + li{ margin: 30px 0 0;}

.list-relate{ padding: 25px 15px 45px; background: url("/sp/img/blt.gif") no-repeat top center; background-size: contain;}
.list-relate > li{ border-bottom: 1px solid #e9e1d1; line-height: 1.5;}
.list-relate a{ position: relative; display: flex; flex-direction: column; padding: 15px 0; align-items: flex-start;}
.list-relate a:after{ position: absolute; top: 50%; right: 0; width: 6px; height: 6px; border-right: 1px solid #b38d41; border-bottom: 1px solid #b38d41; content: ""; transform: rotate(-45deg) translate(0,-50%);}
.list-relate .tl{ padding: 0 1em .25em 0; border-bottom: 1px solid #b38d41; font-size: 12px; font-family: "Noto Serif JP", serif;}
.list-relate p{ margin: 1em 0 0; font-size: 10px;}


/* --------------------------------------------------
 sitemap
--------------------------------------------------- */
.sitemap ul{ border-bottom: 1px solid #f6f4f0; letter-spacing: .1em;}
.sitemap li{ border-top: 1px solid #f6f4f0;}
.sitemap li a{ position: relative; display: flex; flex-direction: column; padding: 15px; background: #e9e1d1; line-height: 1.5;}
.sitemap li a span{ font-size: 10px;}
.sitemap li a em{ position: absolute; top: 50%; right: 35px; width: 50vw; transform: translate(0,-50%);}
.sitemap li a em img{ width: 100%;}
.sitemap li a:after{
    position: absolute;
    top: 50%;
    right: 15px;
    display: block;
    margin-top: -2px;
    width: 8px;
    height: 8px;
    border-right: 1px solid #b38d41;
    border-bottom: 1px solid #b38d41;
    content: "";
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.sitemap li .trigger{ position: relative; padding: 15px; background: #e9e1d1;}
.sitemap li .trigger:before{
    position: absolute;
    top: 50%;
    right: 17px;
    display: block;
    margin-top: -4px;
    width: 1px;
    height: 9px;
    background-color: #b38d41;
    content: "";
}
.sitemap li .trigger:after{
    position: absolute;
    top: 50%;
    right: 13px;
    display: block;
    width: 9px;
    height: 1px;
    background-color: #b38d41;
    content: "";
}
.sitemap li .active-submenu{ position: relative;}
.sitemap li .active-submenu:before{ display: none;}
.sitemap li ul{ border: none;}
.sitemap li li{ border-top: 1px solid #e9e1d1;}
.sitemap li li a{ background: #f6f4f0;}

/* --------------------------------------------------
 menu
--------------------------------------------------- */
.menu ul{ border-bottom: 1px solid #e9e1d1; letter-spacing: .1em; font-size: 12px;font-family: "Noto Serif JP", serif;}
.menu li{ border-top: 1px solid #e9e1d1;}
.menu li a{ position: relative; display: block; padding: 15px; cursor: pointer;}
.menu li a:after{
    position: absolute;
    top: 50%;
    right: 15px;
    display: block;
    margin-top: -2px;
    width: 6px;
    height: 6px;
    border-right: 1px solid #b38d41;
    border-bottom: 1px solid #b38d41;
    content: "";
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.menu li div{ position: relative; padding: 15px;}
.menu li ul{ border: none;}
.menu li li a{ display: flex; flex-direction: column; padding: 15px; background: #f1ede6; color: #333; font-size: 10px; line-height: 1.5;}
.menu li li a em{ position: absolute; top: 50%; right: 30px; width: 42vw; transform: translate(0,-50%);}
.menu li li a em img{ width: 100%;}

/* --------------------------------------------------
 footer
--------------------------------------------------- */
.footer{ padding: 30px 0 80px;}
.footer .copy{ display: block; text-align: center; letter-spacing: normal;font-size: 2.666666667vw; line-height: 1.75; }
.footer .pc{ margin: 15px 0 0; text-align: center;}
.footer .pc a{ display: inline-block; padding: 10px 15px; background: #b38d41; color: #fff; text-align: center;}