@charset "utf-8";
/*=== freepage ===*/

/* ============================================================
   メディアクエリ
   ============================================================ */

/* SP: ~768px */
@media screen and (max-width: 768px) {
  .navi-area    { width: 100%; margin: 0 auto; }
  .faq-block    { max-width: 480px; }
  .faq-list     { min-width: 200px; }
}

/* タブレット: 768px ~ 1024px */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  #faq-contents { width: 1024px; margin: 0 auto; }
  .navi-area    { width: 800px; margin: 0 auto; }
  .main-block   { max-width: 1024px; }
  .faq-block    { max-width: 800px; }
  br.sp         { display: none; }
}

/* PC: 800px~ */
@media screen and (min-width: 800px) {
  #faq-contents { width: 1024px; }
  .navi-area    { width: 800px; margin: 0 auto; }
  .sub-navi li  { width: 25%; }
  .main-block   { max-width: 1024px; }
  .faq-block    { max-width: 80%; margin: 0 auto; }
  br.sp         { display: none; }
}

/* ============================================================
   共通
   ============================================================ */

/* 見出し */
#faq-contents h3 {
  margin-top: 2em;
  margin-bottom: 0.8em;
}

/* 幅ユーティリティ */
.w-25 { width: 25%; }
.w-50 { width: 50%; }

/* ============================================================
   サブナビ
   ============================================================ */
.sub-navi {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  padding: 0;
  margin: 0 0.5em 1em;
}

/* ナビボタン */
.btn-border {
  display: block;
  padding: 10px 20px;
  margin-left: 0.5em;
  margin-bottom: 0.5em;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.4s, color 0.4s, border-color 0.4s;
}

.btn-border--red {
  border: 1px solid #a70303;
  color: #a70303;
}

.btn-border--gray {
  border: 1px solid #666;
  color: #333;
}

.btn-border:hover {
  background-color: #a70303;
  border-color: #a70303;
  color: #fff;
}

/* ============================================================
   FAQリスト
   ============================================================ */
.faq-list a {
  display: block;
  padding: 15px;
  text-decoration: none;
  color: #000;
}

/* Question ラベル */
.faq-list label {
  display: block;
  margin: 0.25em 0;
  padding: 0.5em 2em 0.5em 0.5em;
  color: #000;
  background-color: rgba(216, 216, 216, 1);
  background-image: url(https://image.rakuten.co.jp/i-kappa/cabinet/plus.gif);
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: 98% 50%;
  border-radius: 5px 5px 0 0;
  font-size: 1.2em;
  line-height: 1.4;
  cursor: pointer;
}

/* checkbox は非表示 */
input[type="checkbox"] {
  display: none;
}

/* Answer 外ボックス */
.faq-list .ans-wrap {
  margin: 0;
  padding: 0;
  background-color: rgba(248, 248, 248, 1);
  list-style: none;
}

/* Answer 内ボックス（アコーディオン） */
.faq-list .ans-inner {
  height: 0;
  overflow: hidden;
  transition: all 0.4s;
}

/* Answer テキスト */
.faq-list .ans-inner p {
  margin: 0;
  padding: 1em;
  line-height: 1.6;
}

/* チェックボックスでアコーディオン開閉 */
#q01:checked ~ #ans01 .ans-inner,
#q02:checked ~ #ans02 .ans-inner,
#q03:checked ~ #ans03 .ans-inner,
#q04:checked ~ #ans04 .ans-inner,
#q05:checked ~ #ans05 .ans-inner,
#q06:checked ~ #ans06 .ans-inner,
#q07:checked ~ #ans07 .ans-inner,
#q08:checked ~ #ans08 .ans-inner,
#q09:checked ~ #ans09 .ans-inner,
#q10:checked ~ #ans10 .ans-inner,
#q11:checked ~ #ans11 .ans-inner,
#q12:checked ~ #ans12 .ans-inner,
#q13:checked ~ #ans13 .ans-inner,
#q14:checked ~ #ans14 .ans-inner,
#q15:checked ~ #ans15 .ans-inner,
#q16:checked ~ #ans16 .ans-inner,
#q17:checked ~ #ans17 .ans-inner,
#q18:checked ~ #ans18 .ans-inner,
#q19:checked ~ #ans19 .ans-inner,
#q20:checked ~ #ans20 .ans-inner,
#q21:checked ~ #ans21 .ans-inner,
#q22:checked ~ #ans22 .ans-inner,
#q23:checked ~ #ans23 .ans-inner,
#q24:checked ~ #ans24 .ans-inner,
#q25:checked ~ #ans25 .ans-inner,
#q26:checked ~ #ans26 .ans-inner,
#q27:checked ~ #ans27 .ans-inner,
#q28:checked ~ #ans28 .ans-inner,
#q29:checked ~ #ans29 .ans-inner,
#q30:checked ~ #ans30 .ans-inner,
#q31:checked ~ #ans31 .ans-inner,
#q32:checked ~ #ans32 .ans-inner,
#q33:checked ~ #ans33 .ans-inner {
  height: auto;
  opacity: 1;
}

/* ============================================================
   関連サイト紹介ページ (site.html)
   ============================================================ */

.main-inner {
  box-sizing: border-box;
}

.intro-box {
  margin-bottom: 2em;
}

/* ショップカード */
.shop-box__item {
  border: solid 1px #ccc;
  padding: 20px;
  margin-bottom: 2em;
}

.shop-box__name {
  padding-left: 12px;
  padding-bottom: 2px;
  margin-bottom: 2em;
  border-bottom: solid 1px #ccc;
  border-left: solid 8px #ccc;
  font-size: 120%;
  font-weight: 600;
}

/* QRコード: SP は非表示 */
.img-qr {
  display: none;
}

/* ショップリンクボタン */
.shop-box__btn {
  position: relative;
  display: block;
  margin: 1em;
  padding: 0.5em 1em;
  background-color: #a70303;
  border: solid 1px #a70303;
  border-radius: 8px;
  text-align: center;
  font-size: 94%;
  font-weight: 600;
  color: #fff!important;
  text-decoration: none;
}

.shop-box__btn:hover,
.shop-box__btn:active {
  border-color: #a70303;
  color:rgba(255,216,217,1.00);
  background-color: #f4d8de;
}

/* タブレット: 480px~ */
@media screen and (min-width: 480px) {
  .shop-box { width: 96%; }
  .shop-box__btn {
    width: calc(94% - 20px);
    margin: 3em auto 2em;
    padding: 0.5em 1em;
  }
}

/* タブレット横〜PC小: 768px ~ 1024px */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .shop-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-bottom: 2em;
  }
  .shop-box__item {
    width: calc(50% - 40px);
  }
  .shop-box__btn {
    width: 60%;
    margin: 1em auto;
  }
  .img-qr {
    display: block;
    width: 180px;
    margin: 10px auto;
  }
}

/* PC: 1024px~ */
@media screen and (min-width: 1024px) {
  .shop-box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-bottom: 2em;
  }
  .shop-box__item {
    width: calc(50% - 40px);
  }
  .shop-box__btn {
    width: 60%;
    margin: 1em auto;
  }
  .img-qr {
    display: block;
    width: 200px;
    margin: 20px auto;
  }
}