@charset "utf-8";

/*--------------------------------------------------------------*/
/* ------------------------------------------------------------ */
/* 全デバイス/画面サイズに共通 かつ
　　320：スマートフォン縦：基本・レイアウト指定 */
/* ------------------------------------------------------------ */
* html body {
  background: url(null) fixed;
}
html {
  font-size: 62.5%;
  overflow-x: hidden;
}
/*ナビ表示のときはスクロールしないように*/
html.is-locked {
  overflow-y: hidden;
}
body {
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: break-word;
  font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, sans-serif !important;
  text-size-adjust: 100%;
  font-feature-settings: "palt";
  letter-spacing: 0.8;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  background-color: #FCF9F0;
}
@media (max-width: 430px) {
  body {
    font-size: 1.45rem;
  }
}
main {
  overflow: hidden;
}
section {
  font-size: 20px;
  color: #4A242E;
  font-weight: 400;
  letter-spacing: -.01em;
  font-style: normal;
  font-family: "Shippori Mincho B1", "Zen Maru Gothic", sans-serif !important;
  @media (max-width: 768px) {
    font-size: 16px;
  }
  &#room {
    padding: 50px 0 0;
    @media (max-width: 768px) {
    }
  }
  &#roomnovelty ,
  &#drink ,
  &#drinknovelty ,
  &#campaign {
    padding: 100px 0;
    @media (max-width: 768px) {
      padding: 50px 0;
    }
  }
  &#campaign ,
  &#question ,
  &#contact ,
  &#about ,
  &#sns {
    padding: 50px 0;
    @media (max-width: 768px) {
      padding: 30px 0;
    }
  }
  &.bg-pink {
    background-color: #B82853;
  }
  img {
    width: 100%;
    border-style: none;
    vertical-align: top;
    font-size: 0;
    line-height: 0;
  }
}

a {
  text-decoration: none;
  color: #D1345B;
}
a:hover {
  text-decoration: none;
}
p {
  margin: 0;
}
ul {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}

.sp_block {
  display: block;
  @media (min-width: 1024px) {
    display: none;
  }
}

.pc_block {
  display: none;
  @media (min-width: 1024px) {
    display: block;
  }
}

@media (min-width: 751px) {
  /*電話番号リンクをスマホのみ有効にする*/
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  }
}


/* ------------------------------------------------------------ */
/* common layouts */

.wrap-l{
  width: 980px;
  margin: 0 auto;
  @media (max-width: 980px) {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
}
.wrap-s {
  width: 720px;
  margin: 0 auto;
  @media (max-width: 768px) {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (max-width: 768px) {
}
@media (max-width: 430px) {
}
h2 {
  font-size: 46px;
  font-weight: 700;
  color: #D1345B;
  font-family: "Zen Maru Gothic", sans-serif;
  text-align: center;
  margin: 0;
  @media (max-width: 768px) {
    font-size: 28px;
  }
  &:before {
    content: '';
    display: inline-block;
    width: 118px;
    height: 1em;
    background-image: url(../img/room_deco-ttlL.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left bottom;
    margin-right: 1.5em;
    @media (max-width: 768px) {
      width: 70px;
      margin-right: 0;
    }
  }
  &:after {
    content: '';
    display: inline-block;
    width: 118px;
    height: 1em;
    background-image: url(../img/room_deco-ttlR.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right bottom;
    margin-left: 1.5em;
    @media (max-width: 768px) {
      width: 70px;
      margin-left: 0;
    }
  }
}
h3 {
  font-size: 40px;
  font-weight: 700;
  color: #D1345B;
  font-family: "Zen Maru Gothic", sans-serif;
  text-align: center;
  margin: 0;
  @media (max-width: 768px) {
    font-size: 24px;
  }
}
h4 {
  font-size: 32px;
  font-weight: 700;
  font-family: "Zen Maru Gothic", sans-serif;
  text-align: center;
  margin: 0;
  @media (max-width: 768px) {
    font-size: 22px;
  }
}
.titleTop {
  font-size: 30px;
  font-weight: 600;
  color: #C5A516;
  font-family: "Zen Maru Gothic", sans-serif;
  text-align: center;
  margin-bottom: .5em;
  @media (max-width: 768px) {
    font-size: 18px;
  }
}
.titleUnder {
  position: relative;
  font-size: 30px;
  font-weight: 600;
  color: #C5A516;
  font-family: "Zen Maru Gothic", sans-serif;
  text-align: center;
  margin-top: -.2em;
  span {
    position: relative;
    display: inline-block;
    padding: 0 10px;
    background-color: #FCF9F0;
    z-index: 5;
  }
  @media (max-width: 768px) {
    font-size: 18px;
  }
  &::before {
    position: absolute;
    content: '';
     width: 100%;
     height: 1px;
     left: 0;
     top: 50%;
    background-image: linear-gradient(to right, #f3df87 2px, transparent 2px);
    background-size: 4px 1px;
    background-position: left center;
    background-repeat: repeat-x;
    z-index: 0;
  }
}
.text {
  text-align: center;
  margin-top: 3em;
}
.text-s {
  font-size: 16px;
  @media (max-width: 768px) {
    font-size: 14px;
  }
}
.color-white {
  color: #fff;
}
.caption {
  font-size: 15px;
  font-weight: 600;
  font-family: "Zen Maru Gothic", sans-serif;
  @media (max-width: 768px) {
    font-size: 10px;
  }
}
.center {
  text-align: center;
}

.txt_red {
  color: #D1345B;
}

.btnLink {
  width: 100%;
  font-size: 20px;
  text-align: center;
  margin: 28px auto 0;
  padding: 0 20px;
  @media (max-width: 768px) {
    font-size: 18px;
  }
  a {
    display: block;
    color: #fff;
    background-color: #C5A516;
    padding: .5em;
  }
}

/* ------------------------------------------------------------ */

/*====================================
mv
====================================*/
.mv {
  margin-bottom: 70px;
  position: relative;
}
.shareBox {
  width: 55px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background-color: #9D2549;
  box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.3);
  padding: 15px;
  position: fixed;
  right: 0;
  bottom: 10%;
  z-index: 99999;
  border: solid 1px #C5A516;
  @media (max-width: 768px) {
    width: 45px;
    padding: 15px 10px;
  }
  .shareBox_ttl {
    width: 22px;
  }
  .shareBox_x {
    width: 24px;
    margin-top: 15px;
  }
  .shareBox_line {
    width: 27px;
    margin-top: 5px;
    @media (max-width: 768px) {
      margin-top: 10px;
    }
  }
}

/*====================================
nav
====================================*/
#nav {
  .navList {
    display: flex;
    justify-content: space-around;
    align-items: center;
    li {
      width: 32%;
    }
  }
  .collabLogo {
    width: 550px;
    margin: 50px auto 0;
    @media (max-width: 768px) {
      width: 120%;
      margin: 30px auto 0 -10%;
    }   
  }  
  .text {
    background-image: url(../img/nav_deco-ttl.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 48px auto;
    padding-top: 70px;
  }
}

/*====================================
room
====================================*/
.sp_block {
  display: none;
}
.pc_block {
  display: block;
}
@media (max-width: 768px) {
  .sp_block {
    display: block;
  }
  .pc_block {
    display: none;
  }
}
/* room layouts */
#room {
  position: relative;
  overflow: hidden;
  .dummy {
    margin: 1em 0;
    figcaption{
      text-align: center;
      padding-top: 10px;
    }
  }
  .colorBg {
    background-color: #D1345B;
    padding-bottom: 100px;
  }
  /*shop_list*/
  .shop_list {
    width: 100%;
    min-height: 480px;
    margin-top: 50px;
    position: relative;
  }
  .room_img {
    width: 1000px;
    margin: 0 auto;
  }
  /* Swiper ページネーション */
  .room-slider .swiper-pagination {
    bottom: 0px;
  }
  .room-slider .swiper-pagination-bullet {
    width: 10px;
    height: 16px;
    background: #912B4D;
    opacity: 1;
    margin: 0 6px;
    display: inline-block;
    border-radius: 0;
    -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    transition: background-color 0.3s ease;
  }
  .room-slider .swiper-pagination-bullet-active {
    background: #C5A516;
  }
  .btnLink {
    font-weight: bold;
  }
}

/*-----------------------
  shop_list
  ------------------------*/
.shop_list {
  position: relative;
  z-index: 3;
}

.shop_list::before {
  position: absolute;
  content: "";
  background: url(../img/room_deco_chara-2.png) center / contain no-repeat;
  width: 300px;
  height: 300px;
  right: 0;
  top: -198px;
  z-index: 2;
}

.shop_list::after {
  position: absolute;
  content: "";
  background: url(../img/deco_blue2.svg) center / contain no-repeat;
  width: 300px;
  height: 300px;
  right: -86px;
  top: -345px;
  z-index: 1;
}
@media (max-width: 1000px) {
  .shop_list::before {
    width: 250px;
    height: 250px;
    top: -155px;
  }

}
@media (max-width: 880px) {
  .shop_list::before {
    width: 230px;
    top: -165px;
  }
  .shop_list::after {
    width: 220px;
    right: -74px;
    top: -286px;
  }
}

@media (max-width: 680px) {
  .shop_list::before {
    width: 180px;
    top: -131px;
  }
  .shop_list::after {
    width: 170px;
    top: -239px;
  }
}

/*-----------------------
  タブ
  ------------------------*/
/*shoptab*/
.shoptab-btn {
  background-color: #FCF9F0;
  padding: 20px 0;
  position: relative;
  display: flex;
  justify-content: center;
  margin: 0;
  z-index: 2;
  @media (max-width: 768px) {
    justify-content: flex-start;
  }
}
.shoptab-btn {
}
.shoptabBtn {
  width: calc((100% - 35%) / 6);
  font-size: 28px;
  font-weight: 600;
  text-align: center;
  margin: 0 6px;
  cursor: pointer;
  transition: 0.2s;
  @media (max-width: 768px) {
    width: 4em;
    flex-shrink: 0;
    font-size: 18px;
  }
}
.shoptabBtn span {
  display: block;
  width: 75%;
  margin: 0 auto;
  padding: 10px 0;
  &:before,
  &:after {
    transition: 0.2s;
  }
  @media (max-width: 768px) {
    width: 100%;
  }
}
.shoptabBtn.active {
}
.shoptabBtn span:hover {
  color: #D1345B;
}
.shoptabBtn.active span {
  color: #D1345B;
  border-bottom: solid 2px #C5A516;
  position: relative;
  &:before {
    content: '';
    /* width: 27px;
    height: 14px; */
    width: 24px;
    aspect-ratio: 15 / 9;
    display: block;
    background-image: url(../img/room_deco-left.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left center;
    position: absolute;
    left: 0;
    bottom: -8px;
    @media (max-width: 768px) {
      /* width: 14px;
      height: 7px; */
      width: 14.2px;
      aspect-ratio: 19 / 12;
      bottom: -5.2px;
    }
  }
  &:after {
    content: '';
    /* width: 27px;
    height: 14px; */
    width: 24px;
    aspect-ratio: 15 / 9;
    display: block;
    background-image: url(../img/room_deco-right.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right center;
    position: absolute;
    right: 0;
    bottom: -8px;
    @media (max-width: 768px) {
      /* width: 14px;
      height: 7px; */
      width: 14.2px;
      aspect-ratio: 19 / 12;
      bottom: -5.2px;
    }
  }
}

/*shoptab-container*/
.shoptab-container {
  background-image: url(../img/room_deco_red-1.png),
    url(../img/room_deco_red-2.png);
  background-position: 103% -20px, 0 110%;
  background-size: 220px 200px, 205px 175px;
  background-repeat: no-repeat, no-repeat;
  padding: 50px 0 70px;
  position: relative;
  transform: translateY(-1px);
  z-index: 2;
}
.shoptabCnt {
  visibility: hidden;
  height: 0;
}
.shoptabCnt.show {
  visibility: visible;
  height: auto;
}
@media (max-width: 768px) {
  .shoptab-btn {
    overflow-x: scroll;
    -ms-overflow-style: none;
    overflow-y: hidden;
  }
}
/*-----------------------
  スライダー
  ------------------------*/
.no_slider {
  margin: 0 auto;
}

.swiper-wrapper {
  transition-timing-function: linear;
}
/*スライダーなし対応*/
.room-Noslider .swiper-wrapper {
  justify-content: center;
}
.room_box {
  .caption {
    margin: 1em 0 0;
  }
}

.room-Noslider .swiper-slide.room_box {
  flex-shrink: inherit;
}

.room-Noslider .swiper-slide.room_box {
  margin: 0 auto;
}

.room-Noslider .swiper-slide.room_box {
  margin: 0 10px 0 0;
}

.room-Noslider .shop_card {
  width: 300px;
  margin: 0 auto;
}

.room-Noslider .swiper-slide.room_box:first-child .shop_card {
  margin: 0 0 0 auto;
}

.room-Noslider .swiper-slide.room_box:nth-of-type(2) .shop_card {
  margin: 0 auto 0 0;
}

.roomonly2.flx_box {
  display: flex;
  justify-content: center;
}

.roomonly2.flx_box .room_box {
  width: 300px;
  min-height: 415px;
  margin: 0 10px;
}

.room-slider {
    min-height: 580px;
  }

.shop_card {
  min-height: 580px;
  height: 100%;
  border: 2px solid #C5A516;
  padding: 20px 20px 30px;
  background-color: #FCF9F0;
}
@media (max-width: 430px) {
  .roomonly2.flx_box .room_box {
    min-height: 445px;
  }
}

.no_slider .shop_card {
  width: 300px;
  margin: 0 auto;
}

.shop_name {
  text-align: left;
  font-size: 24px;
  font-weight: 600;
  padding-bottom: 15px;
  border-bottom: solid 2px #C5A516;
  position: relative;
  &:before {
    content: '';
    /* width: 27px;
    height: 14px; */
    width: 24px;
    aspect-ratio: 15 / 9;
    display: block;
    background-image: url(../img/room_deco-left.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    bottom: -8px;
  }
  &:after {
    content: '';
    /* width: 27px;
    height: 14px; */
    width: 24px;
    aspect-ratio: 15 / 9;
    display: block;
    background-image: url(../img/room_deco-right.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    right: 0;
    bottom: -8px;
  }
}

.shop_roomimg {
  margin: 30px 0;
  padding: 0 20px;
}

.shop_deta {
  margin: 15px 0;
  padding: 0 20px;
  table {
    font-size: 16px;
    text-align: left;
    padding: 0 20px;
    tr {
      &:first-of-type {
        td {
          /* height: 10em; */
          vertical-align: top;
        }
      }
    }
    th {
      width: 4em;
      font-weight: normal;
      padding-bottom: 1em;
      vertical-align: top;
    }
    td {
      padding-bottom: 1em;
      padding-left: 1em;
      a{
        display: block;
        color: #B82853;
      }
    }
  }
}
@media (max-width: 430px) {
  /*room_box*/
  .room_box {
    /* width: 84% !important; */
  }
}

/*priceBox*/
.priceBox {
  aspect-ratio: 654 / 406; /* ← 元画像の比率をそのまま指定 */
  width: 100%;
  max-width: 654px;

  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  background-image: url(../img/room_price-bg.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  margin: 50px auto 0;
  box-shadow: 2px 2px 8px rgba(0,0,0,.3);

  @media (max-width: 768px) {
  }
  .priceBox_inner {
    padding-top: 1.5em;
    h3{
      color: #633D0F;
    }
    .priceBox_price {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      dl {
        width: 45%;
        font-family: "Zen Maru Gothic", sans-serif;
        font-weight: 600;
        margin-top: .7em;
        .time {
          font-size: 26px;
          /* background-color: #4A242E; */
          background-color: #633D0F;
          color: #fff;
          padding: .1em;
          @media (max-width: 768px) {
            font-size: 14px;
          }
        }
        .price {
          font-size: 40px;
          color: #D1345B;
          margin-top: .3em;
          @media (max-width: 768px) {
            font-size: 22px;
          }
          span{
            font-size: 25px;
            @media (max-width: 768px) {
              font-size: 18px;
            }
          }
        }
      }
    }
  }
}

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

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

/*====================================
roomnovelty
====================================*/
#roomnovelty {
  position: relative;
  &:before {
    content: '';
    width: 100%;
    height: 30px;
    background-image: url(../img/roomnovelty_deco-diamond.png);
    background-size: auto 100%;
    background-position: center;
    border-top: solid 4px #C5A516;
    border-bottom: solid 4px #C5A516;
    position: absolute;
    left: 0;
    top: 0;
    @media (max-width: 768px) {
      height: 20px;
    }
  }
  &:after {
    content: '';
    width: 100%;
    height: 30px;
    background-image: url(../img/roomnovelty_deco-diamond.png);
    background-size: auto 100%;
    background-position: center;
    border-top: solid 4px #C5A516;
    border-bottom: solid 4px #C5A516;
    position: absolute;
    left: 0;
    bottom: 0;
    @media (max-width: 768px) {
      height: 20px;
    }
  }
  figure {
    margin: 50px auto;
  }
  .caption {
    @media (min-width: 769px) {
      width: 60%;
      margin: 0 auto;
    }
  }
}

/*====================================
drink
====================================*/
#drink {
  padding: 50px 0!important;
  background-image:
    url("../img/drink_deco-wrap-lt.png"),
    url("../img/drink_deco-wrap-rt.png"),
    url("../img/drink_deco-wrap-lb.png"),
    url("../img/drink_deco-wrap-rb.png");
  background-position:
    left top,
    right top,
    left bottom,
    right bottom;
  background-size:
    164px 164px,
    164px 164px,
    164px 164px,
    164px 164px;
  background-repeat: no-repeat;
  @media (max-width: 768px) {
    padding: 0!important;
    background-size:
    84px 84px,
    84px 84px,
    84px 84px,
    84px 84px;
  }
  .titleTop{
    background-image: url(../img/drink_deco-ttl.png);
    background-repeat: no-repeat;
    background-position: center top 10px;
    background-size: 51px auto;
    padding-top: 70px;
    @media (max-width: 768px) {
      background-size: 40px auto;
      padding-top: 60px;
    }
  }
  h4 {
    margin: 50px 0 20px;
  }
  .swiper {
    padding: 0 0 50px;
  }
  .swiper-pagination {
    bottom: 0px;
  }
  .swiper-pagination-bullet {
    width: 10px;
    height: 16px;
    background: #912B4D;
    opacity: 1;
    margin: 0 6px;
    display: inline-block;
    border-radius: 0;
    -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    transition: background-color 0.3s ease;
  }
  .swiper-pagination-bullet-active {
    background: #C5A516;
  }
  .drink_btn {
    font-size: 24px;
    text-align: center;
    margin-top: 30px;
    @media (max-width: 768px) {
      font-size: 14px;
    }
    a {
      display: inline-block;
      color: #fff;
      border: solid 1px #fff;
      padding: .5em 2em;
    }
  }
  .price_wrap{
    background-image:
      url("../img/drink_character_friren.png"),
      url("../img/drink_character_hinmel.png");
    background-position:
      calc(50% - 500px) bottom,
      calc(50% + 500px) bottom;
    background-size:
      281px auto,
      326px auto;
    background-repeat: no-repeat;
    @media (max-width: 768px) {
      background-position:
        calc(50% - 45px) bottom,
        calc(50% + 45px) bottom;
      background-size:
        100px auto,
        110px auto;
      padding-bottom: 120px;
    }
  }
}

/*====================================
drinknovelty
====================================*/
#drinknovelty {
  background: linear-gradient(to bottom,  #FFF1C8,  #FFF,  #FFF1C8);
  h3{
    @media (max-width: 768px) {
      font-size: 26px;
    }
  }
  figure {
    margin: 50px auto;
    padding-bottom:100px;
    background-image: url(../img/drinknovelty_deco-line.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 240px auto;
    @media (max-width: 768px) {
      background-size: 184px auto;
    }
  }
  .caption{
    line-height: 1.8;
  }
}

/*====================================
campaign
====================================*/
#campaign {
  h3 {
    background-image: url(../img/campaign_deco-ttl.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 108px auto;
    padding-top: 70px;
    margin-bottom: 50px;
  }
  .snsBox {
    text-align: center;
    border: solid 2px #C5A516;
    background-color: #FCF9F0;
    margin-top: 30px;
    padding: 30px 50px;
    background-image:
      url("../img/campaign_deco-wrap-lt.png"),
      url("../img/campaign_deco-wrap-rt.png"),
      url("../img/campaign_deco-wrap-lb.png"),
      url("../img/campaign_deco-wrap-rb.png");
    background-position:
      calc(0% + 5px) calc(0% + 5px),
      calc(100% - 5px) calc(0% + 5px),
      calc(0% + 5px) calc(100% - 5px),
      calc(100% - 5px) calc(100% - 5px);
    background-size:
      30px 30px,
      30px 30px,
      30px 30px,
      30px 30px;
    background-repeat: no-repeat;
    @media (max-width: 768px) {
      padding: 20px;
      background-size:
      14px 14px,
      14px 14px,
      14px 14px,
      14px 14px;
    }
    .snsBox_ttl {
      font-size: 28px;
      color: #B82853;
      font-weight: 600;
      margin-bottom: 1em;
      padding-bottom: .5em;
      border-bottom: solid 2px #C5A516;
      position: relative;
      @media (max-width: 768px) {
        font-size: 20px;
      }
      &::after{
        content: "";
        position: absolute;
        left: 0;
        bottom: -6px;
        height: 1px;
        width: 100%;
        border-bottom: solid 1px #C5A516;
      }
      small {
        font-size: 0.714em; /* 20px ÷ 28px = 0.714... */
        &:last-child {
          color: #4A242E;
        }
      }
    }
    .snsBox_partdate {
      display: inline-block;
      font-family: "Zen Maru Gothic", sans-serif;
      dl {
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 600;
        text-align: left;
        margin-bottom: .5em;
        dt {
          &:before {
            content: '';
            display: inline-block;
            width: .8em;
            height: .8em;
            background-image: url(../img/campaign_deco-mark.png);
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            margin-right: .3em;
          }
          dd {
            min-width: 11em;
          }
        }
      }
    }
    .snsBox_btn {
      width: 220px;
      margin: 1em auto 1.5em;
      text-align: center;
      a {
        display: block;
        line-height: 1;
        background-color: #C5A516;
        padding: 10px;
        box-sizing: border-box;
        img {
          width: 20px;
        }
      }
    }
    .snsBox_part {
      font-weight: 600;
      font-family: "Zen Maru Gothic", sans-serif;
      margin-bottom: 1em;
      &:before {
        content: '';
        display: inline-block;
        width: .8em;
        height: .8em;
        background-image: url(../img/campaign_deco-mark.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        margin-right: .3em;
      }
      &:after {
        content: '';
        display: inline-block;
        width: .8em;
        height: .8em;
        background-image: url(../img/campaign_deco-mark.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        margin-left: .3em;
      }
    }
    ._sp_block{
      display: none;
      @media (max-width: 768px) {
        display: block;
      }
    }
    ._pc_block{
      display: block;
      @media (max-width: 768px) {
        display: none;
      }
    }
  }
}


/*====================================
question
====================================*/
#question {
  h3 {
    background-image: url(../img/quest_deco-ttl.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 48px auto;
    padding-top: 70px;
    margin-bottom: 50px;
  }
  .qaBox {
    .qa-q {
      position: relative;
      cursor: pointer;
      padding: 1.5em 2em 1em 1em;
      font-weight: bold;
      border-bottom: 1px solid #C5A516;
      position: relative;
      &:before {
        content: '♦';
        display: block;
        font-size: 10px;
        color: #C5A516;
        position: absolute;
        left: 0;
        bottom: -8px;
      }
      &:after {
        content: '♦';
        display: block;
        font-size: 10px;
        color: #C5A516;
        position: absolute;
        right: 0;
        bottom: -8px;
      }
      p {
        &:before {
          content: 'Q：';
          color: #B82853;
        }
      }
    }
    .qa-q span {
      display: inline-block;
      width: 1em;
      height: 1em;
      background-color: #B82853;
      border-radius: 50%;
      position: absolute;
      right: 1em;
      top: 50%;
      transform: translateY(-50%);
    }
    .qa-q span:before,
    .qa-q span:after {
      content: '';
      position: absolute;
      right: .2em;
      top: 50%;
      width: 12px;
      height: 1px;
      background: #fff;
      transition: transform 0.3s ease;
      @media (max-width: 768px) {
        right: .12em;
      }
    }
    .qa-q span:before {
      transform: translateY(-50%) rotate(90deg);
    }
    .qa-q span:after {
      transform: translateY(-50%) rotate(0deg);
    }
    .qa-q.active span:before {
      transform: translateY(-50%) rotate(0deg);
    }
    .qa-q.active span:after {
      transform: translateY(-50%) rotate(0deg);
    }
    .qa-a {
      display: none;
      width: 90%;
      margin: 0 auto;
      padding: 1em 0;
      p {
        padding-left: 1.8em;
        text-indent: -1.8em;
        &:before {
          content: 'A：';
        }
      }
    }
  }
}



/*====================================
contact
====================================*/
#contact {
  text-align: center;
  h3 {
    background-image: url(../img/contact_deco-ttl.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 108px auto;
    padding-top: 70px;
    margin-bottom: 50px;
  }
  .btnLink {
    width: 300px;
    margin: 30px auto;
  }
  .contact_mail {
    color: #B82853;
    margin-bottom: 30px;
    font-weight: bold;
  }
  .caption{
    font-weight: initial;
    text-align: left;
    padding: 0 50px;
    @media (max-width: 768px) {
      padding: 0 0px;
    }
    span {
      display: block;
      position: relative;
      padding-left: 1.2em;
      &::before {
        content: "・";
        position: absolute;
        left: 0;
        top: 0;
      }
    }
  }
}

/*====================================
about
====================================*/
#about {
  .profileBox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    padding: 50px 0;
    position: relative;
    &:before {
      content: '';
      width: 100%;
      height: 17px;
      background-image: url(../img/about_deco-line.png);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      position: absolute;
      left: 0;
      top: 0;
    }
    &:after {
      content: '';
      width: 100%;
      height: 17px;
      background-image: url(../img/about_deco-line.png);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      position: absolute;
      left: 0;
      bottom: 0;
    }
    figure {
      width: 30%;
      @media (max-width: 768px) {
        width: 85%;
        margin: 0 auto 20px;
      }
    }
    p {
      width: 60%;
      @media (max-width: 768px) {
        width: 100%;
      }
    }
  }
}

/*====================================
sna
====================================*/
#sns {
  text-align: center;
  .snsList {
    width: 400px;
    display: flex;
    justify-content: center; 
    /* justify-content: space-between; */
    align-items: center;
    margin: 50px auto 30px;
    @media (max-width: 768px) {
      width: 100%;
    }
    li {
      width: 30%;
      margin: 0 1rem;
      a {
        display: block;
        line-height: 1;
        background-color: #C5A516;
        padding: 10px;
        img {
          /* width: 27px; */
          height: 27px;
        }
      }
    }
  }
}



.sp_br{
  display: none;
  @media (max-width: 768px) {
    display: inline-block;
  }
}
.pc_br{
  display: inline-block;
  @media (max-width: 768px) {
    display: none;
  }
}