@charset "utf-8";
/* CSS Document */
/* 新潟観光ドライブパス 2023～
https://www.driveplaza.com/etc/drawari/niigata/yutaitokuten.html
*/

/* 優待施設エリアマップ 背景地図
*/
.l-container .main_pct_bg1, 
.l-container .main_pct_bg2 {
  position: relative;
  width: 100%;
  height: auto;
  background-size: 100%;
  background-repeat: no-repeat;
  margin: 0 auto;
}
.l-container .main_pct_bg1 {
  background-image: url("../../../../../assets/img/etc/drawari/niigata/pct_bg_yutai-area.gif");
}
.l-container .main_pct_bg2 {
  background-image: url("../../../../../assets/img/etc/drawari/niigata/pct_bg_yutai-area_sado.gif");
}
.l-container .main_pct_bg1::before, 
.l-container .main_pct_bg2::before {
  display: block;
  content: "";
  padding-top: 87%;
}
/* 優待施設エリアマップ　エリア名ボタン
*/
.l-container .yutai-area {
  display: block;
  position: absolute;
  padding: 2px 4px 2px 2px;
  font-size: 0.8em;
  font-weight: bold;
  border-left: 3px solid #333;
  cursor: pointer;
  transition: 0.4s;
  /*text-shadow: 1px 1px 2px #000;*/
  box-shadow: 2px 2px 2px rgb(51 51 51 / 50%);
}
.l-container img.yutai-area_icon {
  width: 24px;
  margin-right: 0.6rem;
}
.l-container .yutai-area a {
  width: 100%;
  height: 100%;
  color: #333;
}
.l-container .yutai-area.num01 { top:  3%; left:  2%; background: #fff; border-color: #ff9900; }
.l-container .yutai-area.num02 { top:  1%; left: 45%; background: #fff; border-color: #33cc00; }
.l-container .yutai-area.num03 { top: 15%; left: 50%; background: #fff; border-color: #3399cc; }
.l-container .yutai-area.num04 { top: 30%; left:  2%; background: #fff; border-color: #00cccc; }
.l-container .yutai-area.num05 { top: 30%; left: 50%; background: #fff; border-color: #d2a000; }
.l-container .yutai-area.num06 { top: 45%; left:  2%; background: #fff; border-color: #009900; }
.l-container .yutai-area.num07 { top: 60%; left:  2%; background: #fff; border-color: #ff66ff; }
.l-container .yutai-area.num08 { top: 75%; left: 50%; background: #fff; border-color: #9933ff; }
.l-container .yutai-area.num09 { top: 60%; left: 50%; background: #fff; border-color: #006699; }
/* yutaitokuten_sado.html */
.l-container .yutai-area.num31 { top: 15%; left: 30%; background: #fff; border-color: #f18ab8; }
.l-container .yutai-area.num32 { top: 35%; left: 60%; background: #fff; border-color: #6cddf9; }
.l-container .yutai-area.num33 { top: 55%; left: 30%; background: #fff; border-color: #5ea94c; }
.l-container .yutai-area.num34 { top: 70%; left: 60%; background: #fff; border-color: #c369cd; }
.l-container .yutai-area.num35 { top: 72%; left:  2%; background: #fff; border-color: #e1c670; }
@media screen and (min-width: 641px) {
    .l-container .yutai-area {
      padding: 4px 8px 4px 4px;
      font-size: 2.2rem;
      border-left-width: 8px;
      /*text-shadow: 1px 1px 2px #333;*/
      box-shadow: 2px 2px 4px rgb(51 51 51 / 50%);
    }
    .l-container .yutai-area:hover {
      opacity: 0.7; 
      /*text-shadow: 0px 0px 4px #333;
      box-shadow: 6px 6px 10px #666;*/
    }
    .l-container img.yutai-area_icon {
      width: 46px;
    }
    .l-container .yutai-area.num01 { top: 10%; left: 14%; }
    .l-container .yutai-area.num02 { top:  2%; left: 52%; }
    .l-container .yutai-area.num03 { top: 16%; left: 50%; }
    .l-container .yutai-area.num04 { top: 29.5%; left: 24%; }
    .l-container .yutai-area.num05 { top: 43%; left: 23%; }
    .l-container .yutai-area.num06 { top: 55%; left: 42%; }
    .l-container .yutai-area.num07 { top: 67%; left: 11%; }
    .l-container .yutai-area.num08 { top: 81%; left: 16%; }
    .l-container .yutai-area.num09 { top: 35%; left: 67%; }
    /* yutaitokuten_sado.html */
    .l-container .yutai-area.num31 { top: 25%; left: 35%; }
    .l-container .yutai-area.num32 { top: 30%; left: 70%; }
    .l-container .yutai-area.num33 { top: 57%; left: 30%; }
    .l-container .yutai-area.num34 { top: 70%; left: 60%; }
    .l-container .yutai-area.num35 { top: 70%; left: 10%; }
}
/* 優待施設エリアマップ　タイトル
*/
.l-container .yutai-area.title {
  top: 88%;
  left: 2%;
  color: #fff;
  font-size: 1.6rem;
  background: none;
  box-shadow: none;
  border: none;
  text-shadow: 1px 1px 2px rgb(51 51 51 / 50%);
}
/* 優待施設エリアマップ　タイトル(タブレット)
*/
@media all and (min-width: 768px) {
    .l-container .yutai-area.title {
      top: 90%;
      left: 55%;
      cursor: default;
      background: none;
      box-shadow: none;
      border: none;
      text-shadow: 2px 2px 4px rgb(51 51 51 / 50%);
      line-height: 1.3em;
      font-size: 2.6rem;
    }
}
/* 優待施設エリアマップ　タイトル(PC)
*/
@media all and (min-width: 960px) {
    .l-container .yutai-area.title {
      top: 90%;
      left: 55%;
      cursor: default;
      background: none;
      box-shadow: none;
      border: none;
      text-shadow: 2px 2px 4px rgb(51 51 51 / 50%);
      line-height: 1.3em;
      font-size: 3.6rem;
    }
}

/* 優待施設エリアマップ　アコーディオン
  */
.l-container label.acclabel_area {
  display: inline-block;
  cursor: pointer; 
}
.l-container label.acclabel_area .accicon_area:after {
  content: "\f358";
  font-family: 'Font Awesome 5 Free';
}
.l-container input.acccheck_area:checked ~ label.acclabel_area .accicon_area:after {
  content: "\f35b";
}
.l-container input.acccheck_area {
  display: none;
}
.l-container div.accshow_area {
  display: none;
  opacity: 0;
  margin: 0;
  background: #fffff;
  box-shadow: 0 -0.3px 0px 1px #cccccc inset;
  transition: 1s !important;
}
/* Yutai Area Head
  */
.l-container .p-dfx.yah {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  margin-top: 12px;
  padding: 0.5rem ;
  font-size: 1.4rem;
  cursor: pointer;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  line-height: 40px;
}
@media screen and (min-width:641px) {
  .l-container .p-dfx.yah {
    padding: 1.0rem ;
    font-size: 2.2rem;
    line-height: 60px;
  }
}
/* 優待施設　ボックス
*/
.l-container .ichiranBox {
  background: #fff;
  border-bottom: 1px solid #ccc; 
  padding: 24px 0;
}
@media screen and (min-width:768px) {
  .l-container .ichiranBox {
    padding: 16px 8px;
  }
}
/* 優待施設　詳細
  */
.l-container .shisetsu-desc {
  line-height: 1.5;
}
.l-container .shohin-title-joken {
  display: flex;
  color: #e96f4c;
  font-size: 1.0em;
  font-weight: 600;
  line-height: 1.5;
}
@media screen and (min-width:641px) {
  .l-container .shohin-title-joken {
    font-size: 1.1em;
  }
}
.l-container .shohin-title-joken:before {
  content: "◎";
}
/* エリアの施設数カウント(js)
*/
.l-container .num_shisetsu {
	color:#333;
  text-align: center;
  padding: 12px 0;
}
/* 一覧ヘッダ
  */
.l-container .btnToggle01a::after, 
.l-container .btnToggle02a::after,
.l-container .btnToggle03a::after, 
.l-container .btnToggle04a::after, 
.l-container .btnToggle05a::after, 
.l-container .btnToggle06a::after, 
.l-container .btnToggle07a::after, 
.l-container .btnToggle08a::after, 
.l-container .btnToggle09a::after, 
.l-container .btnToggle30a::after, 
.l-container .btnToggle31a::after, 
.l-container .btnToggle32a::after,
.l-container .btnToggle33a::after, 
.l-container .btnToggle34a::after, 
.l-container .btnToggle35a::after {
  content: "\f358";
  font-family: 'Font Awesome 5 Free';
  color: green;
  font-size: 30px;
}
.l-container .btnToggle01a.toggleActive::after, 
.l-container .btnToggle02a.toggleActive::after, 
.l-container .btnToggle03a.toggleActive::after, 
.l-container .btnToggle04a.toggleActive::after, 
.l-container .btnToggle05a.toggleActive::after, 
.l-container .btnToggle06a.toggleActive::after, 
.l-container .btnToggle07a.toggleActive::after, 
.l-container .btnToggle08a.toggleActive::after, 
.l-container .btnToggle09a.toggleActive::after, 
.l-container .btnToggle30a.toggleActive::after, 
.l-container .btnToggle31a.toggleActive::after, 
.l-container .btnToggle32a.toggleActive::after, 
.l-container .btnToggle33a.toggleActive::after, 
.l-container .btnToggle34a.toggleActive::after, 
.l-container .btnToggle35a.toggleActive::after {
  content: "\f35b";
  font-family: 'Font Awesome 5 Free';
  color: red;
  font-size: 30px;
}
.l-container .btnToggle01a, 
.l-container .btnToggle02a, 
.l-container .btnToggle03a, 
.l-container .btnToggle04a, 
.l-container .btnToggle05a, 
.l-container .btnToggle06a, 
.l-container .btnToggle07a, 
.l-container .btnToggle08a, 
.l-container .btnToggle09a, 
.l-container .btnToggle30a, 
.l-container .btnToggle31a, 
.l-container .btnToggle32a, 
.l-container .btnToggle33a, 
.l-container .btnToggle34a, 
.l-container .btnToggle35a {
  background: #fff !important;
}
.l-container .btnToggle01a.toggleActive, 
.l-container .btnToggle02a.toggleActive, 
.l-container .btnToggle03a.toggleActive, 
.l-container .btnToggle04a.toggleActive, 
.l-container .btnToggle05a.toggleActive, 
.l-container .btnToggle06a.toggleActive, 
.l-container .btnToggle07a.toggleActive, 
.l-container .btnToggle08a.toggleActive, 
.l-container .btnToggle09a.toggleActive,
.l-container .btnToggle30a.toggleActive, 
.l-container .btnToggle31a.toggleActive, 
.l-container .btnToggle32a.toggleActive,  
.l-container .btnToggle33a.toggleActive,  
.l-container .btnToggle34a.toggleActive, 
.l-container .btnToggle35a.toggleActive {
  background: #ffefc4 !important;
}
@media screen and (min-width: 641px) {
  .l-container .btnToggle01a:hover, 
	.l-container .btnToggle02a:hover, 
	.l-container .btnToggle03a:hover, 
	.l-container .btnToggle04a:hover, 
	.l-container .btnToggle05a:hover, 
	.l-container .btnToggle06a:hover, 
	.l-container .btnToggle07a:hover, 
	.l-container .btnToggle08a:hover, 
	.l-container .btnToggle09a:hover, 
  .l-container .btnToggle30a:hover, 
  .l-container .btnToggle31a:hover, 
	.l-container .btnToggle32a:hover, 
	.l-container .btnToggle33a:hover, 
	.l-container .btnToggle34a:hover, 
	.l-container .btnToggle35a:hover {
    background: #ffefc4 !important;
  }
}
/* エリアの一覧を閉じるボタン
  */
.l-container .btnToggle01b, 
.l-container .btnToggle02b, 
.l-container .btnToggle03b, 
.l-container .btnToggle04b, 
.l-container .btnToggle05b, 
.l-container .btnToggle06b, 
.l-container .btnToggle07b, 
.l-container .btnToggle08b, 
.l-container .btnToggle09b, 
.l-container .btnToggle30b, 
.l-container .btnToggle31b, 
.l-container .btnToggle32b, 
.l-container .btnToggle33b, 
.l-container .btnToggle34b, 
.l-container .btnToggle35b {
  width: 100%;
  margin-top: 12px;
	padding: 8px 0;
  text-align: center;
  border: 1px solid #2d720a !important;
  border-radius: 6px !important;
  transition: 0.4s;
  cursor: pointer;
  color: #2d720a;
  background: #fff !important;
}
@media screen and (min-width: 641px) {
  .l-container .btnToggle01b:hover, 
	.l-container .btnToggle02b:hover, 
	.l-container .btnToggle03b:hover, 
	.l-container .btnToggle04b:hover, 
	.l-container .btnToggle05b:hover, 
	.l-container .btnToggle06b:hover, 
	.l-container .btnToggle07b:hover, 
	.l-container .btnToggle08b:hover, 
	.l-container .btnToggle09b:hover, 
  .l-container .btnToggle30b:hover, 
  .l-container .btnToggle31b:hover, 
	.l-container .btnToggle32b:hover, 
	.l-container .btnToggle33b:hover, 
	.l-container .btnToggle34b:hover, 
	.l-container .btnToggle35b:hover {
    margin-top: 12px;
    background: #2d720a !important;
    color: #fff;
  }
}
/* 優待施設エリアマップに戻るボタン
  */
.l-container .yutai-returnmap {
  width: 100%;
  margin-top: 12px;
  padding: 8px 0;
  text-align: center;
  border: 1px solid #2d720a !important;
  border-radius: 6px !important;
  transition: 0.4s;
  cursor: pointer;
  color: #2d720a;
  background: #fff !important;
}
.l-container .yutai-returnmap a {
  display: block;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 641px) {
  .l-container .yutai-returnmap:hover {
    background: #2d720a !important;
  }
  .l-container .yutai-returnmap a:hover {
    color: #fff !important;
  }
}

/* 優待・アンケート　施設概要（サマリー）フレックス配置 PC・SP共用
*/
.l-container .l-wrapper .shisetsu-summary {
  width: 100%;
  font-size: 0.8em;
}
@media screen and (min-width:641px) {
  .l-container .l-wrapper .shisetsu-summary {
    font-size: 1em;
  }
  .l-container .l-wrapper .shisetsu-summary-name {
    width: 20% !important;
    max-width: 4.5em;
    min-width: 60px;
  }
  .l-container .l-wrapper .shisetsu-summary-colon {
    width: 5% !important;
    min-width: 16px;
    text-align: center;
  }
}
.l-container .l-wrapper .shisetsu-summary-content {
  width: 75% !important;
  text-align: left;
}
/* 優待・アンケート　施設概要（サマリー）テーブル配置 PC・SP共用
*/
.l-container .l-wrapper table.shisetsu-summary-table {
  font-size: 0.9em;
  margin: 0.8em 0;
}
@media screen and (min-width:641px) {
  .l-container .l-wrapper table.shisetsu-summary-table {
    font-size: 1.0em;
  }
}
.l-container .l-wrapper th.shisetsu-summary-table-name {
  min-width: 4em;
  text-align: justify !important;
  text-align-last: justify !important;
  text-justify: inter-ideograph;
}
.l-container .l-wrapper td.shisetsu-summary-table-cont {
  display: inline-flex;
  text-align: left;
  line-height: 1.5;
}
.l-container .l-wrapper td.shisetsu-summary-table-cont:before {
	content: "：";
  text-align: center;
  line-height: 1.5;
}