@charset 'utf-8';

/* common
------------------------------------------------ */
@media screen and (min-width: 769px) {
  .fs-l-pageMain { padding: 0; max-width: inherit; }
}

/* traditional
------------------------------------------------ */
.trd { position: relative; background-position: center top; background-repeat: repeat; background-size: 100%; }
.trd-visual { position: relative; z-index: 1; }
.trd-visual-info { position: relative; color: #fff; }
.trd-visual-title { font-size: 1.95rem; font-weight: 600; line-height: 1.2; }
.trd-visual-text { margin-top: 8px; font-size: 1.2rem; font-weight: 600; line-height: 2; }
.trd-visual-photo { position: absolute; z-index: -1; }
.trd-visual-photo picture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.trd-content { padding: 38px 0 50px; }
.trd-title { text-align: center; font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.trd-title > span { display: inline-block; position: relative; vertical-align: top; }
.trd-title > span::after { content: ''; display: block; margin-top: 2px; width: 100%; height: 2px; background: #000; }
.trd-lead { margin-top: 14px; font-size: 1.2rem; line-height: 1.5833; }
.trd-area { position: relative; }
.trd-area-buyable { font-size: 1rem; line-height: 1.2; }
.trd-area-buyable::before { content: ''; display: inline-block; margin-right: 3px; width: 12px; height: 12px; background: url(../../img/icon/cart4.svg) no-repeat center center; background-size: 100% 100%; vertical-align: top; }
.trd-area-content { position: relative; }
.trd-area-block { position: relative; padding: 5px 5px 0; background: #fff; }
.trd-area-block::before,
.trd-area-block::after { content: ''; position: absolute; }
.trd-area-block::before { width: 1px; }
.trd-area-block::after { height: 1px; }
.trd-area-name { padding: 8px; font-size: 1.4rem; font-weight: 700; line-height: 1.2; color: #fff; }
.trd-area-box { position: relative; }
.trd-area-prefecture { position: relative; } 
.trd-area-prefecture > .column { position: relative; }
.trd-area-box > dt { position: relative; padding: 16px 8px; font-size: 1.2rem; font-weight: 700; line-height: 1.2; }
.trd-area-box > dd { padding: 0 8px 12px; }
.trd-area-box ul { position: relative; }
.trd-area-box ul > li { font-size: 1.2rem; line-height: 1.2; }
.trd-area-box ul > li + li { margin-top: 8px; }
.trd-area-box ul > li > a { display: inline-block; position: relative; padding-left: 1em; vertical-align: top; }
.trd-area-box ul > li > a::after { content: '\30FB'; position: absolute; top: 0; left: 0; }
.trd-area-box ul > li > a span { display: inline-block; position: relative; vertical-align: top; }
.trd-area-box ul > li.buyable > a span::after { content: ''; display: inline-block; margin: 1px 0 0 6px; width: 12px; height: 12px; background: url(../../img/icon/cart4.svg) no-repeat center center; background-size: 100% 100%; vertical-align: top; }
.trd-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(13,124,62,.95); z-index: 100; }
.trd-modal > .wrap { display: flex; align-items: center; height: 100%; }
.trd-modal-content { position: relative; background: #fff; width: 100%; height: calc(100vh - 30px); overflow-y: auto; }
.trd-modal-content > .frame { position: relative; width: 100%; }
.trd-modal-close { position: absolute; top: 15px; right: 15px; width: 20px; height: 20px; z-index: 5; }
.trd-modal-close > span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-indent: -9999px; white-space: nowrap; overflow: hidden; }
.trd-modal-close > span::before,
.trd-modal-close > span::after { content: ''; position: absolute; top: 9px; left: -2px; width: 25px; height: 2px; background: #000; }
.trd-modal-close > span::before { transform: rotate(45deg); }
.trd-modal-close > span::after { transform: rotate(-45deg); }
.trd-modal-area { position: relative; }
.trd-modal-area--name { margin-bottom: 20px; padding: 2px 0 0 2px; font-size: 1.4rem; font-weight: 700; line-height: 1.2; }
.trd-modal-area--name > span { display: block; padding: 10px 0; width: 90px; text-align: center; color: #fff; }
.trd-modal-pref { position: relative; margin-bottom: 58px; }
.trd-modal-pref:last-child { margin-bottom: 0; }
.trd-modal-pref--name { margin-bottom: 35px; text-align: center; font-size: 2rem; font-weight: 700; line-height: 1.2; }
.trd-modal-pref--name > span { display: inline-block; position: relative; vertical-align: top; }
.trd-modal-pref--name > span::after { content: ''; display: block; margin-top: 7px; width: 100%; height: 2px; }
.trd-modal-lists { margin: 0 15px; }
.trd-modal-lists--item { position: relative; padding: 22px 24px 24px; border: solid #eee 1px; }
.trd-modal-lists--title { margin-bottom: 20px; font-size: 1.7rem; font-weight: 700; line-height: 1.2; color: #0d7c3e; }
.trd-modal-lists--photo { position: relative; margin: 0 auto; width: 75.4717%; }
.trd-modal-lists--text { margin-top: 20px; font-size: 1.3rem; line-height: 1.69230769231; }
.trd-modal-lists--btn { position: relative; text-align: center; font-size: 1.5rem; font-weight: 700; line-height: 1.2; color: #fff; }
.trd-modal-lists--btn > a { display: block; position: relative; padding: 16px 0; border-radius: 4px; color: #fff; z-index: 1; }
.trd-modal-lists--btn > a {
  background: rgb(13,124,62);
  background: -moz-linear-gradient(left,  rgba(13,124,62,1) 0%, rgba(30,169,96,1) 100%);
  background: -webkit-linear-gradient(left,  rgba(13,124,62,1) 0%,rgba(30,169,96,1) 100%);
  background: linear-gradient(to right,  rgba(13,124,62,1) 0%,rgba(30,169,96,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d7c3e', endColorstr='#1ea960',GradientType=1 );
}
.device-click .trd-modal-lists--btn > a::before { content: ''; position: absolute; top: 0; left: 0; transition: opacity ease .4s; transform: rotate(180deg); width: 100%; height: 100%; border-radius: 4px; opacity: 0; z-index: -1; }
.device-click .trd-modal-lists--btn > a::before {
  background: rgb(13,124,62);
  background: -moz-linear-gradient(left,  rgba(13,124,62,1) 0%, rgba(30,169,96,1) 100%);
  background: -webkit-linear-gradient(left,  rgba(13,124,62,1) 0%,rgba(30,169,96,1) 100%);
  background: linear-gradient(to right,  rgba(13,124,62,1) 0%,rgba(30,169,96,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d7c3e', endColorstr='#1ea960',GradientType=1 );
}
.device-click .trd-modal-lists--btn > a:hover { opacity: 1; }
.device-click .trd-modal-lists--btn > a:hover::before { opacity: 1; }
.trd-modal-close--btn { position: relative; padding: 60px 0; text-align: center; font-size: 1.3rem; line-height: 1.2; }
.trd-modal-close--btn > a { display: inline-block; position: relative; padding: 0 4px; vertical-align: top; }
.trd-modal-close--btn > a::after { content: ''; display: block; margin-top: 8px; width: 100%; height: 1px; background: #000; }
.trd-modal-close--btn > a span { display: inline-block; position: relative; padding-right: 30px; vertical-align: top; }
.trd-modal-close--btn > a span::before,
.trd-modal-close--btn > a span::after { content: ''; position: absolute; top: 7px; right: 0; width: 20px; height: 1px; background: #000; }
.trd-modal-close--btn > a span::before { transform: rotate(45deg); }
.trd-modal-close--btn > a span::after { transform: rotate(-45deg); }

.body-traditional-modal { position: fixed; top: 0; left: 0; }

.area-hokkaido::before,
.area-hokkaido::after,
.area-hokkaido .trd-area-name,
.modal-hokkaido .trd-modal-area--name > span,
.modal-hokkaido .trd-modal-pref--name > span::after { background: #62d165; }
.modal-hokkaido .trd-modal-pref--name { color: #62d165; }
.area-tohoku::before,
.area-tohoku::after,
.area-tohoku .trd-area-name,
.modal-tohoku .trd-modal-area--name > span,
.modal-tohoku .trd-modal-pref--name > span::after { background: #e0cb73; }
.modal-tohoku .trd-modal-pref--name { color: #e0cb73; }
.area-kanto::before,
.area-kanto::after,
.area-kanto .trd-area-name,
.modal-kanto .trd-modal-area--name > span,
.modal-kanto .trd-modal-pref--name > span::after { background: #44d6e0; }
.modal-kanto .trd-modal-pref--name { color: #44d6e0; }
.area-hokuriku::before,
.area-hokuriku::after,
.area-hokuriku .trd-area-name,
.modal-hokuriku .trd-modal-area--name > span,
.modal-hokuriku .trd-modal-pref--name > span::after { background: #5da5b6; }
.modal-hokuriku .trd-modal-pref--name { color: #5da5b6; }
.area-tokai::before,
.area-tokai::after,
.area-tokai .trd-area-name,
.modal-tokai .trd-modal-area--name > span,
.modal-tokai .trd-modal-pref--name > span::after { background: #bf917f; }
.modal-tokai .trd-modal-pref--name { color: #bf917f; }
.area-kansai::before,
.area-kansai::after,
.area-kansai .trd-area-name,
.modal-kansai .trd-modal-area--name > span,
.modal-kansai .trd-modal-pref--name > span::after { background: #d8adc6; }
.modal-kansai .trd-modal-pref--name { color: #d8adc6; }
.area-chugoku::before,
.area-chugoku::after,
.area-chugoku .trd-area-name,
.modal-chugoku .trd-modal-area--name > span,
.modal-chugoku .trd-modal-pref--name > span::after { background: #afc675; }
.modal-chugoku .trd-modal-pref--name { color: #afc675; }
.area-kyusyu::before,
.area-kyusyu::after,
.area-kyusyu .trd-area-name,
.modal-kyusyu .trd-modal-area--name > span,
.modal-kyusyu .trd-modal-pref--name > span::after { background: #869953; }
.modal-kyusyu .trd-modal-pref--name { color: #869953; }

@media screen and (max-width: 768px) {
  .trd { margin: 0 -15px; width: calc(100% + 30px); background-image: url(../../img/traditional/bg.png); }
  .trd-visual { padding-top: 185px; }
  .trd-visual-info { margin: -60px 15px 0; padding: 20px 15px; background: #a39674; }
  .trd-visual-text { text-align: justify; }
  .trd-visual-photo { top: 0; left: 0; width: 100%; height: 185px; overflow: hidden; }
  .trd-content { margin: 0 15px; }
  .trd-area { margin-top: 20px; }
  .trd-area-buyable { margin-bottom: 18px; }
  .trd-area-block { margin-top: 30px; }
  .trd-area-block:first-child { margin-top: 0; }
  .trd-area-block::before,
  .trd-area-block::after { display: none; }
  .trd-area-prefecture .column,
  .trd-area-box { border-bottom: solid #ccc 1px; }
  .trd-area-prefecture { margin: 0 -5px; width: calc(100% + 10px); }
  .trd-area-prefecture .column:last-child,
  .trd-area-box:last-child { border-bottom: none; }
  .trd-area-box > dt { cursor: pointer; }
  .trd-area-box > dt::after { content: ''; position: absolute; top: 50%; right: 10px; transition: ease .3s; transform: rotate(90deg); margin-top: -6px; width: 8px; height: 12px; background: url(../../img/icon/arrow_green2.svg) no-repeat center center; background-size: 100% 100%; }
  .trd-area-box > dt.active::after { transform: rotate(-90deg); }
  .trd-area-box > dd { display: none; }
  .trd-area-box ul + ul { margin-top: 8px; }
  .trd-modal > .wrap { margin: 0 15px; }
  .trd-modal-lists--item { margin-top: 25px; }
  .trd-modal-lists--item:first-child { margin-top: 0; }
  .trd-modal-lists--btn { margin-top: 32px; }
}

@media screen and (min-width: 769px) {
  .trd { background-image: url(../../img/traditional/bg-pc.png); }
  .trd-visual { width: 100%; height: 532px; overflow: hidden; }
  .trd-visual::after { content: ''; position: absolute; top: 0; left: 0; width: 34.9333333333%; height: 100%; background: #a39674; z-index: -1; }
  .trd-visual-info { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; }
  .trd-visual-title { font-size: 3.9rem; }
  .trd-visual-text { margin-top: 40px; font-size: 2.4rem; }
  .trd-visual-photo { top: 0; right: 0; width: 65.0666666667%; height: 100%; }
  .trd-content { padding: 100px 0 120px; }
  .trd-title { font-size: 2.2rem; }
  .trd-title > span { padding: 0 6px; }
  .trd-title > span::after { margin-top: 3px; }
  .trd-lead { margin-top: 16px; text-align: center; font-size: 1.8rem; line-height: 1.77777777778; }
  .trd-area { margin-top: 80px; min-height: 1080px; overflow-x: auto; }
  .trd-area-buyable { position: absolute; bottom: 0; left: 54px; font-size: 1.8rem; }
  .trd-area-buyable::before { margin: 2px 4px 0 0; width: 17px; height: 17px; }
  .trd-area-content { width: 1280px; z-index: 1; }
  .trd-area-content::after { content: ''; position: absolute; top: 0; left: 297px; width: 715px; height: 813px; background: url(../../img/traditional/map.svg) no-repeat center center; background-size: 100% 100%; z-index: -1; }
  .trd-area-block { position: absolute; padding: 5px 5px 18px; }
  .trd-area-name { padding: 4px 6px; font-size: 1.8rem; }
  .trd-area-prefecture.multi { display: flex; }
  .trd-area-prefecture > .column { padding-right: 16px; }
  .trd-area-prefecture.multi > .column + .column { margin-left: 28px; }
  .trd-area-box > dt { padding: 10px 6px; font-size: 1.4rem; }
  .trd-area-box > dd { display: flex !important; padding: 0 0 0 6px; }
  .trd-area-box ul + ul { margin-left: 35px; }
  .trd-area-box ul > li { font-size: 1.4rem; }
  .trd-area-box ul > li + li { margin-top: 8px; }
  .trd-area-box ul > li.buyable > a span::after { margin: 0 0 0 8px; width: 17px; height: 17px; }

  .area-hokkaido { top: 156px; right: 55px; }
  .area-hokkaido::before { top: -7px; left: -98px; height: 58px; }
  .area-hokkaido::after { top: 50px; left: -98px; width: 98px; }
  .area-tohoku { top: 270px; right: 235px; }
  .area-tohoku::before { display: none; }
  .area-tohoku::after { top: 55px; left: -52px; width: 52px; }
  .area-kanto { top: 416px; right: 60px; }
  .area-kanto::before { display: none; }
  .area-kanto::after { top: 135px; left: -90px; width: 90px; }
  .area-hokuriku { top: 36px; left: 514px; }
  .area-hokuriku::before { bottom: -120px; right: 10px; height: 120px; }
  .area-hokuriku::after { display: none; }
  .area-tokai { top: 727px; right: 140px; }
  .area-tokai::before { top: -130px; left: 44px; height: 130px; }
  .area-tokai::after { display: none; }
  .area-kansai { top: 200px; left: 54px; }
  .area-kansai::before { bottom: -66px; right: -120px; height: 117px; }
  .area-kansai::after { bottom: 50px; right: -120px; width: 120px; }
  .area-chugoku { top: 726px; left: 453px; }
  .area-chugoku::before { top: -45px; left: 29px; height: 45px; }
  .area-chugoku::after { display: none; }
  .area-kyusyu { top: 643px; left: 93px; }
  .area-kyusyu::before { display: none; }
  .area-kyusyu::after { top: 120px; right: -77px; width: 77px; }

  .trd-modal-content { height: calc(100vh - 40px); }
  .trd-modal-close { top: 30px; right: 30px; width: 24px; height: 24px; }
  .trd-modal-close > span::before,
  .trd-modal-close > span::after { top: 11px; left: -3px; width: 30px; }
  .trd-modal-area--name { margin-bottom: 16px; padding: 3px 0 0 3px; font-size: 2rem; }
  .trd-modal-area--name > span { padding: 17px 0; width: 140px; }
  .trd-modal-pref { margin-bottom: 75px; }
  .trd-modal-pref--name { margin-bottom: 50px; font-size: 2.6rem; }
  .trd-modal-pref--name > span::after { margin-top: 10px; }
  .trd-modal-lists { display: flex; flex-wrap: wrap; margin: 0 40px; }
  .trd-modal-lists--item { margin: 3.33333333333% 3.33333333333% 0 0; padding: 28px 30px; width: 31.0833333333%; }
  .trd-modal-lists--item.buyable { padding-bottom: 132px; }
  .trd-modal-lists--item:nth-of-type(-n+3) { margin-top: 0; }
  .trd-modal-lists--item:nth-of-type(3n) { margin-right: 0; }
  .trd-modal-lists--title { margin-bottom: 25px; font-size: 2.4rem; }
  .trd-modal-lists--photo { width: 50.641025641%; }
  .trd-modal-lists__info { padding-bottom: 102px; }
  .trd-modal-lists--text { margin-top: 25px; font-size: 1.6rem; line-height: 1.75; }
  .trd-modal-lists--btn { position: absolute; bottom: 30px; left: 30px; width: calc(100% - 60px); font-size: 1.8rem; }
  .trd-modal-lists--btn > a { padding: 22px 0; }
  .trd-modal-close--btn { padding: 80px 0; font-size: 1.384rem; }
  .trd-modal-close--btn > a { padding: 0 3px; border-radius: 5px; }
  .trd-modal-close--btn > a::after { margin-top: 8px; }
}