@charset "utf-8";

:root {
  --color-primary: #E50053;
  --color-secondary-brown:#755600;
  --color-secondary-beige:#FAF4E9;
}

/* --------------------------------------------
    h1
-------------------------------------------- */
.mdl-page-heading{
  margin-top:103px;
  background: none;
}
@media (max-width: 1023px) {
  .mdl-page-heading{
    margin-top:60px;
  }
}
.mdl-page-heading-inner{
  height:fit-content;
  min-height:160px;
  overflow: hidden;
  position: relative;
  padding:126px 100px;
}
@media (max-width: 1023px) {
  .mdl-page-heading-inner{
    min-height:130px;
    padding:44px 24px;
  }
}
.mdl-page-heading-inner picture{
  width:100%;
  height:100%;
  position: absolute;
  top:0;
  left:0;
  z-index: -1;
  background: #ddd;
}

.mdl-page-heading-inner picture img{
  width:100%;
  height:100%;
  object-fit: cover;
}

.mdl-page-heading-inner h1{
  color: #fff;
  text-shadow: 0 0 8px #000000;
}

/* --------------------------------------------
    リード文
-------------------------------------------- */
.section-datespot-lead{
  max-width:1080px;
  padding:40px 15px 40px 15px;
  margin:0 auto;
  font-size:16px;
  text-align: center;
}

@media (max-width: 1023px) {
  .section-datespot-lead{
    padding:36px 15px 36px 15px;
    font-size:14px;
    text-align: left;
  }
}

/* --------------------------------------------
    日本地図 ページ内リンク
    .section-datespot-japan-map
-------------------------------------------- */
@media (max-width: 1023px) {
  .japan-map-wrapper{
    width:100%;
    max-width: 430px; 
  }
}
@media (min-width: 1024px) {
  .japan-map-wrapper{
    width: 668px;
  }
}

.japan-map-wrapper{
  height:auto;
  margin:0 auto;
  position:relative;
}

.japan-map-wrapper picture{
  width:100%;
  height:auto;
}

.japan-map-wrapper .japan-map-links{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

.japan-map-wrapper .japan-map-links a{
  position: absolute;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding:8px 10px 6px 10px;
  border: 1.5px solid var(--color-primary);
  border-radius: 4px;
  background: #fff;
  color: var(--color-primary);
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  letter-spacing: .04em;
  line-height: 1.0;
  transform: translate(-50%, -50%);
}

@media (max-width: 1023px) {
  .japan-map-wrapper .japan-map-links a{
    font-size:14px
  }
}
@media (min-width: 1024px) {
  .japan-map-wrapper .japan-map-links a{
    font-size:20px;
  }
}

.japan-map-wrapper .japan-map-links a:hover{
  background: var(--color-primary);
  color: #fff;
}

@media (max-width: 390px) {
  .japan-map-wrapper .japan-map-links a.hokkaido-tohoku { left: 35.0%; top:  13.5%; }
  .japan-map-wrapper .japan-map-links a.hokuriku-koshinetsu { left: 23.5%; top: 23.0%; }
  .japan-map-wrapper .japan-map-links a.chugoku  { left: 15.0%; top: 34.5%; }
  .japan-map-wrapper .japan-map-links a.kantou   { right: 2.0%; top: 43.0%; }
  .japan-map-wrapper .japan-map-links a.tokai    { right: 10.0%; top: 57.3%; }
  .japan-map-wrapper .japan-map-links a.kansai   { right: 22.5%; top: 66.5%; }
  .japan-map-wrapper .japan-map-links a.shikoku  { right: 51.5%; top: 68.0%; }
  .japan-map-wrapper .japan-map-links a.kyushu-okinawa { left: 39.0%; top: 78.5%; }
}

@media (min-width: 391px) and  (max-width: 430px) {
  .japan-map-wrapper .japan-map-links a.hokkaido-tohoku { left: 35.5%; top:  13.5%; }
  .japan-map-wrapper .japan-map-links a.hokuriku-koshinetsu { left: 23.5%; top: 24.0%; }
  .japan-map-wrapper .japan-map-links a.chugoku  { left: 14.5%; top: 36.0%; }
  .japan-map-wrapper .japan-map-links a.kantou   { right: 3.0%; top: 45.0%; }
  .japan-map-wrapper .japan-map-links a.tokai    { right: 11.0%; top: 60.0%; }
  .japan-map-wrapper .japan-map-links a.kansai   { right: 23.5%; top: 69.5%; }
  .japan-map-wrapper .japan-map-links a.shikoku  { right: 52.5%; top: 71.5%; }
  .japan-map-wrapper .japan-map-links a.kyushu-okinawa { left: 39.0%; top: 82.5%; }
}

@media (min-width: 431px) and (max-width: 667px) {
  .japan-map-wrapper .japan-map-links a.hokkaido-tohoku { left: 36.5%; top: 13.5%; }
  .japan-map-wrapper .japan-map-links a.hokuriku-koshinetsu { left: 24.5%; top: 24.5%; }
  .japan-map-wrapper .japan-map-links a.chugoku  { left: 15.0%; top: 36.0%; }
  .japan-map-wrapper .japan-map-links a.kantou   { right: 4.0%; top: 45.5%; }
  .japan-map-wrapper .japan-map-links a.tokai    { right: 12.0%; top: 60.5%; }
  .japan-map-wrapper .japan-map-links a.kansai   { right: 25.0%; top: 70.2%; }
  .japan-map-wrapper .japan-map-links a.shikoku  { right: 53.8%; top: 71.8%; }
  .japan-map-wrapper .japan-map-links a.kyushu-okinawa { left: 38.5%; top: 83.0%; }
}

@media  (min-width: 668px) and (max-width: 896px) {
  .japan-map-wrapper .japan-map-links a.hokkaido-tohoku { left: 37.0%; top: 13.5%; }
  .japan-map-wrapper .japan-map-links a.hokuriku-koshinetsu { left: 25.0%; top: 24.5%; }
  .japan-map-wrapper .japan-map-links a.chugoku  { left: 15.3%; top: 36.0%; }
  .japan-map-wrapper .japan-map-links a.kantou   { right: 5.0%; top: 45.5%; }
  .japan-map-wrapper .japan-map-links a.tokai    { right: 12.5%; top: 60.5%; }
  .japan-map-wrapper .japan-map-links a.kansai   { right: 25.5%; top: 70.0%; }
  .japan-map-wrapper .japan-map-links a.shikoku  { right: 54.0%; top: 71.5%; }
  .japan-map-wrapper .japan-map-links a.kyushu-okinawa { left: 38.0%; top: 82.8%; }
}

@media (min-width: 897px) {
  .japan-map-wrapper .japan-map-links a.hokkaido-tohoku { left: 34.0%; top:  3.4%; }
  .japan-map-wrapper .japan-map-links a.hokuriku-koshinetsu { left: 17.8%; top: 23.5%; }
  .japan-map-wrapper .japan-map-links a.chugoku  { left: 21.8%; top: 41.0%; }
  .japan-map-wrapper .japan-map-links a.kantou   { right: -4.0%; top: 49.7%; }
  .japan-map-wrapper .japan-map-links a.tokai    { right: -4.8%; top: 67.0%; }
  .japan-map-wrapper .japan-map-links a.kansai   { right: 7.5%; top: 81.7%; }
  .japan-map-wrapper .japan-map-links a.shikoku  { left: 59.0%; top: 83.0%; }
  .japan-map-wrapper .japan-map-links a.kyushu-okinawa { left: 10.0%; top: 71.7%; }

  .japan-map-wrapper .japan-map-note{
    position:absolute;
    bottom:0;
    right:60px;
  }
}

@media (max-width: 430px) {
  .japan-map-wrapper .japan-map-note{
    padding-inline: 1em;
  }
}

.japan-map-wrapper .japan-map-note{
  width:fit-content;
  font-size: 12px;
  color: #585858;
}


/* --------------------------------------------
    目次 toc:table-of-content
-------------------------------------------- */
.section-datespot-toc{
  padding:58px 20px;
}
@media (max-width: 1023px) {
  .section-datespot-toc{
    padding:20px 15px 40px;
  }
}
.section-datespot-toc-inner{
  max-width:600px;
  margin:0 auto;
}

.datespot-toc{
  border: 1px solid transparent;
  background:
    linear-gradient(#FFF, #FFF) padding-box,
    linear-gradient(-25deg, #A98521, #CFB673) border-box;
  padding-bottom:24px;
}

.datespot-toc h2{
  border-bottom: 1px solid transparent;
  background:
    linear-gradient(var(--color-secondary-beige), var(--color-secondary-beige)) padding-box,
    linear-gradient(-25deg, #A98521, #CFB673) border-box;
  padding: 16px 32px ;
  font-weight: 700;
}

.datespot-toc ul#datespot-toc-list{
  padding:24px 32px 0 32px;
  display: flex;
  flex-direction: column;
  gap:8px;
}

.datespot-toc ul#datespot-toc-list a{
  font-weight: 700;
  color: var(--color-secondary-brown);
}

@media (max-width: 1023px) {
  .datespot-toc ul#datespot-toc-list a{
    font-size:15px;
  }
}
@media (min-width: 1024px) {
  .datespot-toc ul#datespot-toc-list a:hover{
    color: var(--color-primary);
  }
}

#datespot-toc-toggle-wrap {
  margin:0 auto;
  text-align: center;
}
#datespot-toc-toggle-btn {
  align-items: center;
  width:80%;
  font-size: 16px;
  margin-top:20px;
  padding: 6px 16px;
  cursor: pointer;
  border:none;
  color: var(--color-secondary-brown);
  border-radius: 5px;
  background: #fff;
}
@media (max-width: 1023px) {
  #datespot-toc-toggle-btn {
    font-size:13px;
  }
}

#datespot-toc-toggle-btn::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 1px solid  var(--color-secondary-brown);
  border-bottom: 1px solid  var(--color-secondary-brown);
  transform: rotate(45deg);
  transition: transform 0.2s;
  position: relative;
  top: -3px;
  margin-left:6px;
}

/* 開いているとき（上向きに反転） */
#datespot-toc-toggle-btn.is-open::after {
  transform: rotate(-135deg);
  top: 0px;
}
@media (min-width: 1024px) {
  #datespot-toc-toggle-btn:hover {
    background: var(--color-secondary-beige);
  }
}

/* --------------------------------------------
    エリア別紹介
-------------------------------------------- */
.section-datespot-contents h2{
  background-color: var(--color-secondary-beige);
  padding:40px;
}
@media (max-width: 1023px) {
  .section-datespot-contents h2{
    padding:20px;
  } 
}

.section-datespot-contents-inner{
  padding:40px 0 96px;
  display: flex;
  flex-direction: column;
  gap: 96px;
}
@media (max-width: 1023px) {
  .section-datespot-contents-inner{
    padding:0;
    gap:0;
  }
}

article.datespot-content {
  max-width:1080px;
  padding:0 100px;
  margin:0 auto;
  display: flex;
  flex-direction: column;
  gap:30px;
}
@media (max-width: 1023px) {
  article.datespot-content {
    padding:20px 15px 30px;
    gap:15px;
  }
}

.datespot-content-title{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.datespot-content-speech-bubble{
  display: inline-block;
  position:relative;
  background: linear-gradient(45deg, #F3EBD4, #D9C793) border-box;
  border-radius:100px;
  padding:8px 14px 10px 14px;
  margin-bottom:12px;
  font-size:16px;
}
@media (max-width: 1023px) {
  .datespot-content-speech-bubble{
    margin-bottom:12px;
    font-size:14px;
  }
}

.datespot-content-speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -13px;
  left: 50%;
  margin-left:-11px;
  width: 14px;
  height: 14px;
  /* 本体と合わせたグラデーション */
  background: linear-gradient(135deg, #F3EBD4, #D9C793) border-box;
  /* clip-pathで三角形に切り抜く */
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.datespot-content-title h3{
  font-size:38px;
  font-weight: 700;
  line-height:1.5;}
@media screen and (max-width: 1024px) {
  .datespot-content-title h3{
    font-size:22px;
  }
}

/* --------------------------------------------
    コンテナ
    SP: 縦1列
    PC: 2カラム + JSで並び替え
    　左列: 画像 → スポット情報
    　右列: おすすめ理由 → おすすめ行動
-------------------------------------------- */
article.datespot-content .datespot-content-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
article.datespot-content .datespot-content-detail > * {
  width: 100%;
}

article.datespot-content .datespot-content-detail .datespot-col-left{
  display: flex;
  flex-direction: column;
  gap:20px;
}

article.datespot-content .datespot-content-detail .datespot-col-right{
  display: flex;
  flex-direction: column;
  gap:20px;
}

@media (max-width: 1023px) {
  article.datespot-content .datespot-content-detail {
    flex-direction: column;
  }
}
@media (min-width: 1024px) {
  article.datespot-content .datespot-content-detail { 
    display: flex;
    flex-direction: row;
    gap:40px;
  }
  article.datespot-content .datespot-content-detail .datespot-col-left{
    width:400px;
  }
  article.datespot-content .datespot-content-detail .datespot-col-right{
    flex:1;
  }
}

/* --------------------------------------------
    スポット画像
-------------------------------------------- */
article.datespot-content .datespot-image img {
  width: 100%;
  height: auto;
  display: block;
}

article.datespot-content .datespot-image p{
  font-size:14px;
}
@media (max-width: 1023px) {
  article.datespot-content .datespot-image p{
    font-size:12px;
  }
}

/* --------------------------------------------
    おすすめ理由・おすすめ行動
-------------------------------------------- */
article.datespot-content .datespot-recommend-reason,
article.datespot-content .datespot-recommend-action {
  padding: 20px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap:8px;
  width: calc(100% - 40px);
}
article.datespot-content .datespot-recommend-reason{
  background: var(--color-secondary-beige);
  box-shadow: 0 0 4px rgba(37, 33, 20, 0.1);
  align-self: flex-start;
}
article.datespot-content .datespot-recommend-action {
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.12);
  align-self: flex-start;
}

article.datespot-content .datespot-recommend-reason h4,
article.datespot-content .datespot-recommend-action h4 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding:12px 16px 10px;
  font-size: 21px;
  font-weight: 700;
  line-height:1em;
  border-radius: 8px;
}

@media screen and (max-width: 1023px) {
  article.datespot-content .datespot-recommend-reason h4,
  article.datespot-content .datespot-recommend-action h4 {
    font-size: 16px;
  }
}

article.datespot-content .datespot-recommend-reason h4{
  background: #fff;
}
article.datespot-content .datespot-recommend-action h4{
  background-color: var(--color-secondary-beige);
}

article.datespot-content .datespot-recommend-reason h4 img,
article.datespot-content .datespot-recommend-action h4 img{
  height:1em;
  width:auto;
  margin-top:-2px;
}

article.datespot-content .datespot-recommend-reason p,
article.datespot-content .datespot-recommend-action p {
  font-size: 14px;
  line-height: 1.8;
}

/* --------------------------------------------
    スポット情報
-------------------------------------------- */
article.datespot-content .datespot-detail {
  width:calc(100% - 24px);
  padding: 12px;
  border: 2px solid transparent;
  border-radius: 8px;
  background:
    linear-gradient(#FFF, #FFF) padding-box,
    linear-gradient(-25deg, #A98521, #CFB673) border-box;
}

.datespot-detail .datespot-detail-name {
  font-size: 18px;
  font-weight: 700;
}

@media screen and (max-width: 1023px) {
  .datespot-detail .datespot-detail-name {
    font-size: 15px;
  }
}

.datespot-detail > :nth-child(4) {
  margin-top:12px;
}

.datespot-detail .datespot-detail-address {
  margin-bottom:8px;
  font-size:14px;
}

@media screen and (max-width: 1023px) {
  .datespot-detail .datespot-detail-address {
    display: flex;
    flex-direction: column;
    gap: 0;
    font-size:12px;
  }
}


@media (min-width: 1024px) {
  .datespot-detail-address span {
    padding-right: 13px;
  }
}

.datespot-detail-web-site{
  padding:8px;
  text-align: center;
  font-size:14px;
  background: var(--color-secondary-beige);
}
@media (min-width: 1024px) {
  .datespot-detail-web-site{
    font-size:12px;
  }
}
.datespot-detail-web-site a{
  color: var(--color-secondary-brown);
  text-decoration: underline;
}

/* --------------------------------------------
    店舗ページへのリンクボタン
-------------------------------------------- */
.datespot-content-shop-link-inner {
  padding:40px 0;
}
@media screen and (max-width: 1023px) {
  .datespot-content-shop-link-inner {
    padding:20px 0;
  }
}

/* --------------------------------------------
    CTAエリア
-------------------------------------------- */
.mdl-button-block-a .mdl-button-block-a-inner{
  padding:50px 0;
}
@media screen and (max-width: 1023px) {
  .mdl-button-block-a .mdl-button-block-a-inner{
    padding:40px 15px;
  }
}

.mdl-button-block-a .message{
  margin-bottom: 12px;
  font-size:16px;
  display: flex;
  flex-direction: column;
  gap:12px;
}
@media screen and (max-width: 1023px) {
  .mdl-button-block-a .message{
    font-size:14px;
  }
}
@media screen and (min-width: 431px) {
  .mdl-button-block-a .message{
    width:fit-content;
    margin:0 auto 12px;
   
    text-align: center;
  }
}