@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;500;600;700;900&display=swap');

.shumai {
  font-family: "Zen Old Mincho", serif;
  color: #4B3D0C;
  font-size: 16px;
  margin-inline: min(600px - 50vw, -30px);
  background: url(/img/usr/detail_design/saiho/shumai/bg01.png) repeat center top / contain #FFF1EB;
  position: relative;
  padding-block: 94px 304px;
}
.shumai::before {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  background: url(/img/usr/detail_design/saiho/shumai/bg02.png) no-repeat center top / contain, url(/img/usr/detail_design/saiho/shumai/bg03.png) no-repeat center bottom / contain #FFFAEC;
  opacity: 0.6;
  position: absolute;
  left: 0;
  top: 0;
}
.section_inner {
    width: min(100%, 1260px);
    margin-inline: auto;
    padding-inline: 30px;
}
section#lead {
  position: relative;
  margin-bottom: 123px;
}

.lead_head {
  writing-mode: vertical-rl;
  display: flex;
  flex-flow: column wrap;
  align-content: center;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
  min-height: 290px;
  margin-bottom: 78px;
  font-size: 31px;
  letter-spacing: .15em;
  line-height: 1;
}
.lead_head .num {
    display: inline-block;
    rotate: -90deg;
    letter-spacing: 0;
    margin-inline: -.15em .15em;
}
.lead_head p.brand {
  font-size: 22px;
}
section#content {
  position: relative;
}

.content_wrap {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;
    align-items: flex-start;
}
.content_img {
    width: 640px;
    margin-top: 30px;   
}
.content_textbox {
    width: 460px;
}
.content_catch {
    color: #4B3D0C;
    font-size: 28px;
    margin-bottom: 48px;
    position: relative;
}
.content_catch::before {
    content: "";
    display: inline-block;
    width: 500px;
    height: 400px;
    background: url(/img/usr/detail_design/saiho/shumai/bg04.png) no-repeat center top / contain #fff;
    position: absolute;
    left: -180px;
    top: -70px;
    mix-blend-mode: multiply;
    pointer-events: none;
}
.content_text {
    line-height: 2.6;
}
.content_text p + p {
    margin-top: 1em;
}

section#saiho {
  font-family: "Zen Old Mincho", serif;
  color: #fff;
  font-size: 16px;
  line-height: 2;
  position: relative;
  margin-inline: min(600px - 50vw, -30px);
  background: url(/img/usr/detail_design/saiho/shop_bg.jpg) no-repeat center / cover;
  padding-block: 50px 56px;
}
.saiho_inner {
    width: min(100%, 1160px);
    margin-inline: auto;
    padding-inline: 30px;
}
.saiho_logo {
    width: 236px;
    margin-bottom: 16px;
}

section#deta {
  margin-top: 80px;
}
.deta_inner {
  width: min(100%, 1100px);
  margin-inline: auto;
}
.deta_content {
  color: #000000;
  font-size: 13px;
  border-bottom: 1px solid #C6B2A4;
  border-right: 1px solid #C6B2A4;
}
.deta_content dl {
  display: flex
;
  flex-flow: row wrap;
  border-top: 1px solid #C6B2A4;
  border-left: 1px solid #C6B2A4;
}
.deta_content dt {
  width: 264px;
  padding: 10px 40px;
  border-right: 1px solid #C6B2A4;
  background: #F5ECE2;
}
.deta_content dd {
  width: calc(100% - 264px);
  padding: 10px 40px;
}
.deta_content dd .is-red {
  font-size: 11px;
  display: inline-block;
  margin-top: 8px;
  padding-left: 1em;
  text-indent: -1em;
}
.deta_note {
  margin-top: 16px;
  font-size: 14px;
  color: #000;
}

  [data-browse-mode=P] {
    .content_wrap:nth-of-type(even) {
      flex-direction: row;
      .content_catch::before {
        transform: rotateY(180deg);
        left: -20px;
        top: -100px;
      }
    }
    
    .content_wrap:nth-of-type(1) {
        margin-bottom: 48px;
    }
    .content_wrap:nth-of-type(2) {
        margin-bottom: 175px;
    }
    .content_wrap:has(.content_img_item:nth-of-type(2)) {
      .content_img {
          margin-top: 0px;
          width: 736px;
          display: flex        ;
          flex-direction: row;
          flex-wrap: wrap;
          align-content: center;
          justify-content: space-between;
          align-items: flex-start;
          .content_img_item {
            width: 336px;
            &:nth-of-type(1) {
              margin-top: 156px;
            }
          }
      }
      .content_textbox {
          width: 392px;
          margin-top: 30px;
      }
    }
}







[data-browse-mode=S] {
  
.shumai {
  padding-block: 45px 122px;
  font-size: 14px;
}
section#lead {
  margin-bottom: 40px;
}
.section_inner {
  padding-inline: 18px;
}
.lead_head {
  font-size: 28px;
  margin-bottom: 40px;
  min-height: 260px;
}
.lead_slide {
  width: calc(100% + 36px);
  margin-inline: -18px;
  overflow: hidden;
}
.shumai-slider {
  overflow: visible;
}
.slick-slide {
  height: auto;
  margin-inline: 7px;
  border-radius: 60px;
  overflow: hidden;
}
.content_img {
  width: 100%;
  margin-bottom: 52px;
}
.content_img_item {
  border-radius: 60px;
  overflow: hidden;
}
.content_textbox {
  width: 100%;
}
.content_catch {
  text-align: center;
  font-size: 21px;
  margin-bottom: 40px;
  line-height: 2.2;
}
.content_catch::before {
top: -40px;
left: calc(50% - 250px);
transform: scaleY(.55);
transform-origin: top;
}
.content_text {  
height: 6.9em;
overflow: hidden;
position: relative;
margin-bottom: 20px;
transition: .3s;
}
.content_text::before {
content: "";
display: inline-block;
width: 100%;
height: 100%;
background: transparent;
background: linear-gradient(0deg, #fff6ec90 0%, #fff6ec00 100%);
position: absolute;
left: 0;
top: 0;
pointer-events: none;
}
.content_more{
  display: flex;
  flex-flow: row wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  width: 210px;
  margin-inline: auto;
  padding: 11px;
  border: 1px solid #4B3D0C;
  border-radius: 300px;
  text-decoration: none;
  color: #4B3D0C;
  font-size: 11px;
  cursor: pointer;
}
.content_more::before {
  content: "もっと見る";
  transition: .3s;
}
.content_text:has(+ .content_more.close) {
height: auto;
margin-bottom: 20px;
}
.content_text:has(+ .content_more.close)::before {
display: none;
}
.content_more.close::before {
  content: "閉じる";
}

section#saiho {
  padding-block: 43px 30px;
  background-image: url(/img/usr/detail_design/saiho/shop_bg_sp.jpg);
}
.saiho_inner {
  padding-inline: 18px;
}
.saiho_logo {
  margin-inline: auto;
  margin-bottom: 0;
}
.saiho_text {
  text-align: center;
  font-size: 12px;
}


section#deta {
margin-top: 40px;
margin-inline: -10px;
}
.deta_content dl {
  border-top: none;
}
.deta_content dt, .deta_content dd {
width: 100%;
border-right: none;
border-top: 1px solid #C6B2A4;
}
.deta_content dt {
text-align: center;
}
.deta_content dd {
padding: 20px;
}

}