@charset "utf-8";
/* CSS Document 道トクふりーぱす ご利用特典 エリアMAP連動アコーディオン */
/* https://www.driveplaza.com/etc/drawari/hokkaido/tokuten2025.html */

/* ▼モバイルファースト (全環境に共通のデザイン) */
/* エリアマップ 背景地図 */
.l-container .c-areaMap {
  position: relative;
  height: auto;
  width: 100%;
  background-size: 100%;
  background-repeat: no-repeat;
  margin: 0 auto;
}

.l-container .c-areaMap {
  background-image: url("../../../../../assets/img/etc/drawari/hokkaido/bg_map_tokuten.gif");
  background-color: #e7e7e7;
}

.l-container .c-areaMap::before {
  content: "";
  display: block;
  padding-top: 100%;
}

/* エリアマップ エリア選択ボタン */
.l-container .c-areaMapBtn {
  display: block;
  position: absolute;
  font-feature-settings: "palt";
}

/* エリアマップ エリア選択ボタン onclick */
.l-container label.u-acLabelArea {
  cursor: pointer;
  display: inline-block;
}

.l-container label.u-acLabelArea .u-acIconArea:after {
  color: #333333;
  content: "\f055"; /* ＋ 開く */
  font-family: 'Font Awesome 5 Free';
}

.l-container input.u-acCheckArea:checked ~ label.u-acLabelArea .u-acIconArea:after {
  color: #b5b5b5;
  content: "\f056"; /* － 閉じる */
  font-family: 'Font Awesome 5 Free';
}

.l-container input.u-acCheckArea {
  display: none !important;
}

.l-container div.u-acShowArea {
  display: none !important;
  opacity: 0;
  margin: 0;
  transition: 1s !important;
}

/* アコーディオン コンテナ */
.l-container .ui-acContainer {
  background-color: #ffffff;
  box-shadow: 1px 1px 16px 0 rgba(0, 0, 0, 0.11);
  border-radius: 0 0 32px 0;
}

/* アコーディオン タイトル */
.l-container .ui-acHeader {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 1.8rem;
  line-height: 1.5;
  margin-top: 24px;
  padding: 1.6rem 5.6rem 1.6rem 1.6rem;
  min-height: 6.4rem;
}

.l-container .ui-acHeader::after {
  position: absolute;
  right: calc( 0% + 1.6rem );
  color: #2d720a;
  content: "\f055"; /* ＋ 開く */
  font-family: 'Font Awesome 5 Free';
  font-weight: bold;
  font-size: 3.2rem;
}

.l-container .ui-acHeader.js-acActive {
  border-bottom: 1px solid #e7e7e7;
}

.l-container .ui-acHeader.js-acActive::after {
  position: absolute;
  right: calc( 0% + 1.6rem );
  color: #b5b5b5;
  content: "\f056"; /* － 閉じる */
  font-family: 'Font Awesome 5 Free';
  font-weight: bold;
  font-size: 3.2rem;
}

/* アコーディオン コンテンツ */
.l-container .ui-acContents {
  padding: 32px 16px;
}


/* ▼モバイルのみ付け足すデザイン */
@media all and (max-width: 767px) {
  .l-container .c-areaMap .c-areaMapBtn .c-btn.sizeS, 
  .l-container .c-areaMap .c-areaMapBtn .sizeS.c-btnInverse, 
  .l-container .c-areaMap .c-areaMapBtn .sizeS.c-btnDisable {
    display: inline-block;
    padding: 4px 24px 4px 4px;
    border-radius: 0 0 8px 0;
    font-size: 11px;
    font-size: 1.1rem;
    font-style: normal;
    font-weight: normal;
    vertical-align: middle;
  }

  .l-container .c-areaMap .c-areaMapBtn .c-btn.sizeS[class*="circle-"]:before, 
  .l-container .c-areaMap .c-areaMapBtn .sizeS.c-btnInverse[class*="circle-"]:before, 
  .l-container .c-areaMap .c-areaMapBtn .sizeS.c-btnDisable[class*="circle-"]:before, 
  .l-container .c-areaMap .c-areaMapBtn .c-btn.sizeS[class*="circle-"]:after, 
  .l-container .c-areaMap .c-areaMapBtn .sizeS.c-btnInverse[class*="circle-"]:after, 
  .l-container .c-areaMap .c-areaMapBtn .sizeS.c-btnDisable[class*="circle-"]:after {
    right: 4px;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    font-size: 10px;
  }

  /* エリアマップ エリア選択ボタン 表示位置指定（SP） */
  .l-container .c-areaMap .c-areaMapBtn.area01 { top: 18%; left: 20%; } /* 稚内・利尻・礼文・留萌 */
  .l-container .c-areaMap .c-areaMapBtn.area02 { top: 32%; left: 20%; } /* 旭川・層雲峡 */
  .l-container .c-areaMap .c-areaMapBtn.area03 { top: 45%; left: 40%; } /* 富良野・美瑛 */
  .l-container .c-areaMap .c-areaMapBtn.area04 { top: 32%; left: 58%; } /* 知床・網走・紋別 */
  .l-container .c-areaMap .c-areaMapBtn.area05 { top: 56%; left: 48%; } /* 釧路・阿寒・摩周・根室 */
  .l-container .c-areaMap .c-areaMapBtn.area06 { top: 66%; left: 58%; } /* 十勝・帯広 */
  .l-container .c-areaMap .c-areaMapBtn.area07 { top: 45%; left:  1%; } /* 小樽・ニセコ */
  .l-container .c-areaMap .c-areaMapBtn.area08 { top: 56%; left: 12%; } /* 札幌近郊 */
  .l-container .c-areaMap .c-areaMapBtn.area09 { top: 66%; left: 12%; } /* 洞爺・登別・日高 */
  .l-container .c-areaMap .c-areaMapBtn.area10 { top: 77%; left:  1%; } /* 松前・江差・奥尻 */
  .l-container .c-areaMap .c-areaMapBtn.area11 { top: 88%; left: 12%; } /* 函館近郊 */
}


/* ▼タブレット用として付け足すデザイン */
@media all and (min-width: 768px) {
  /* エリアマップ エリア選択ボタン 表示位置指定（タブレット） */
  .l-container .c-areaMap .c-areaMapBtn.area01 { top: 28%; left: 34%; } /* 稚内・利尻・礼文・留萌 */
  .l-container .c-areaMap .c-areaMapBtn.area02 { top: 36%; left: 34%; } /* 旭川・層雲峡 */
  .l-container .c-areaMap .c-areaMapBtn.area03 { top: 48%; left: 34%; } /* 富良野・美瑛 */
  .l-container .c-areaMap .c-areaMapBtn.area04 { top: 42%; left: 60%; } /* 知床・網走・紋別 */
  .l-container .c-areaMap .c-areaMapBtn.area05 { top: 57%; left: 60%; } /* 釧路・阿寒・摩周・根室 */
  .l-container .c-areaMap .c-areaMapBtn.area06 { top: 68%; left: 56%; } /* 十勝・帯広 */
  .l-container .c-areaMap .c-areaMapBtn.area07 { top: 48%; left:  1%; } /* 小樽・ニセコ */
  .l-container .c-areaMap .c-areaMapBtn.area08 { top: 57%; left: 20%; } /* 札幌近郊 */
  .l-container .c-areaMap .c-areaMapBtn.area09 { top: 68%; left: 18%; } /* 洞爺・登別・日高 */
  .l-container .c-areaMap .c-areaMapBtn.area10 { top: 75%; left:  1%; } /* 松前・江差・奥尻 */
  .l-container .c-areaMap .c-areaMapBtn.area11 { top: 84%; left: 20%; } /* 函館近郊 */

  /* エリアマップ エリア選択ボタン 末尾テキスト追加（タブレット～PC表示のみ） */
  .l-container .c-areaMapBtn span::after {
    content: "エリア";
    font-feature-settings: "palt";
  }
}

/* ▼PC用として付け足すデザイン */
@media all and (min-width: 960px) {
  /* エリアマップ 背景地図 */
  .l-container .c-areaMap {
    position: relative;
    height: auto;
    width: 100%;
    background-size: 100%;
    background-repeat: no-repeat;
    margin: 0 auto;
  }

  /* エリアマップ エリア選択ボタン 表示位置指定（PC） */
  .l-container .c-areaMap .c-areaMapBtn.area01 { top: 24%; left: 34%; } /* 稚内・利尻・礼文・留萌 */
  .l-container .c-areaMap .c-areaMapBtn.area02 { top: 40%; left: 40%; } /* 旭川・層雲峡 */
  .l-container .c-areaMap .c-areaMapBtn.area03 { top: 49%; left: 40%; } /* 富良野・美瑛 */
  .l-container .c-areaMap .c-areaMapBtn.area04 { top: 44%; left: 75%; } /* 知床・網走・紋別 */
  .l-container .c-areaMap .c-areaMapBtn.area05 { top: 58.6%; left: 70%; } /* 釧路・阿寒・摩周・根室 */
  .l-container .c-areaMap .c-areaMapBtn.area06 { top: 68%; left: 56%; } /* 十勝・帯広 */
  .l-container .c-areaMap .c-areaMapBtn.area07 { top: 57%; left:  2%; } /* 小樽・ニセコ */
  .l-container .c-areaMap .c-areaMapBtn.area08 { top: 58%; left: 32%; } /* 札幌近郊 */
  .l-container .c-areaMap .c-areaMapBtn.area09 { top: 69%; left: 26%; } /* 洞爺・登別・日高 */
  .l-container .c-areaMap .c-areaMapBtn.area10 { top: 75%; left:  2%; } /* 松前・江差・奥尻 */
  .l-container .c-areaMap .c-areaMapBtn.area11 { top: 84%; left: 20%; } /* 函館近郊 */

  /* アコーディオン コンテナ */
  .l-container .ui-acContainer {
    background-color: #ffffff;
    box-shadow: 1px 1px 16px 2px rgba(0, 0, 0, 0.08);
    border-radius: 0 0 32px 0;
  }
}