@charset "utf-8";
/* CSS Document */
/* style.css */

/* AEM部分 */
/* ---コンテンツ幅 フル--- */
.contentsInr{width:auto;padding:0px;}
.ctm_contentsFull{padding: 60px 0;}
/* ---コンテンツ幅 950px--- */
.contentsInr .contentsUnit{padding:0 10px;}


@media all and (min-width:740px){
.contentsInr .contentsUnit{width:950px;padding:0px;margin:0 auto;}
.ctm_contentsFull{padding: 90px 0;}
}
/* ---背景色指定--- */

/* 背景色バリエーション */
.ctm_contentsFull.wrap01{background-color:#F7F3EA;}

/* ---見出し--- */
.ctm_pageTtl.hc01{color: #374E81;}
.ctm_pageTtl.hc02{color: #333333;}
.ctm_pageTtl.hc03{color: #ffffff; background-color: #9A805E;}
.hc03_txt01{
  font-size: 120%;
}
.hc03_txt02 {
  font-size: 60%;
  display: block;
}


.ctm_pageTtl.hc02.coupon__block--ttl .ttlLv3 .heading span{
    font-size: 150%;
    color: #D64330;
}
.ctm_pageTtl.hc01 .ttlLv2 {
    margin-top: 0px;
}
.ctm_pageTtl.hc01 .ttlLv2 .heading{
  font-size: 2.8rem;
  line-height: 1.2;
  font-weight: normal;
}
.day__block{
  border: 2px solid #374E81;
  color: #374E81;
  font-weight: bold;
  text-align: center;
  padding: 8px;
}
.coupon__block--ttl .ttlLv3{
  margin-top: 0;
  padding-top: 0;
  margin-bottom: 0;
}
.ttl-deco{
width: 170px;
margin: 0 auto 8px;
}
#story .ctm_pageTtl.hc01{
  position: relative;
}

#story .ctm_pageTtl.hc01 .ttlLv2 span {
    font-size: 85%;
}
.story__block{
  position: relative;
}
.story__block::before,.story__block::after{
content: "";
display: block;
width: 110px;
height: 44px;
background-image: url(/jp/ja/domtour/jaldp/shikoku-henro/img_sites/deco-cloud.svg);
background-repeat: no-repeat;
background-size: contain;
position: absolute;
}
.story__block::before{
top:25px;
left: -25px;
}
.story__block::after{
top:-20px;
right: -30px;
}
#story .ctm_pageTtl.hc01::after{
content: "";
display: block;
width: 80px;
height: 100px;
background-image: url(/jp/ja/domtour/jaldp/shikoku-henro/img_sites/ill-ohenro.png);
background-repeat: no-repeat;
background-size: contain;
position: absolute;
top: -40px;
right:10px;
z-index: 1;
}
#map .ctm_pageTtl.hc01 .ttlLv2 span{
  font-size: 75%;
}

.coupon__block--r {
    padding: 20px 0 10px;
}
.coupon__step .stepLabel {
    background-color: #9A805E;
}
.coupon__step .stepLabel::after {
    border-color: transparent transparent transparent #9A805E;
}
.coupon__step .ttlLv4 .heading span{
  color: #D64330;
}

.btnRD .coupon__step--btn .btn {
    background-color: #D64330;
}
.btnSrg .coupon__step--btn .btn {
    font-size: 2rem;
    padding: 25px 0;
}
.story__txt{
  line-height: 2;
}
.tokyuhotels{
  border: 1px solid #333333;
  font-weight: bold;
  text-align: center;
  padding: 8px;
}
/* モジュールの上のスペース */
.contentsInr .ticketModule_unit {
    margin: 0px -10px 0 -10px;
}
@media all and (min-width:740px){
.ctm_pageTtl.hc01 .ttlLv2 .heading{
  font-size: 4rem;
}
.ttl-deco{
width: 200px;
}
.coupon__block--r{
    border-left: 1px solid #333333;
    padding: 25px 0 25px;
}
.coupon__step .ttlLv4{
  padding-top: 30px;
}
#story .ctm_pageTtl.hc01::after{
  width: 110px;
  height: 150px;
  top: -50px;
  right:120px;
}

.story__block::before,.story__block::after{
  width: 128px;
}
.story__block::before{
  top: 30px;
  left: 180px
}
.story__block::after{
  top: -35px;
  right: 200px;
}
.story__txt{
  font-size: 1.8rem;
}
/* .storyBox__clm .colWrap{
  align-items: center;
  justify-content: space-between;
}
.storyBox__clm .clm_1_2col.colWrap .col:first-child{
  width: 740px;
  flex-shrink: 0;
}
.storyBox__clm .clm_1_2col.colWrap .col:last-child{
  width: 180px;
} */

/* モジュールの上のスペース */
.contentsInr .ticketModule_unit {
    margin: 0px 0 0 0;
}
}

/* ------------------------------------------------------------------

spotArea

------------------------------------------------------------------ */
.spotBlock {
  border-radius: 20px;
  overflow: hidden;
}
.spotBox {
  position: relative;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
}
.spotBlock .spotPhotoBox {
    padding: 20px;
    background-color: #ffffff;
  }
  .spot_photo_item {
  justify-content: center;
  align-items: baseline;
}
.spot_photo_item .clm_1_2col.colWrap .col:nth-of-type(n+2), .spot_photo_item .clm_1_3col.colWrap .col:nth-of-type(n+2) {
    margin-top: 25px;
}
.spot_photo_itemBox_img {
    border-radius: 16px;
    overflow: hidden;
}
/* .spot_photo_itemBox figure.imgParts {
  position: relative;
}
.spot_photo_itemBox .imgParts figcaption {
  margin-top: 0px;
  position: absolute;
  background: rgba(0, 0, 0, .7);
  color: #fff;
  bottom: 4px;
  right: 6px;
  font-size: 10px;
  padding: 0 4px;
}   */
.spotBox__ttl{
  border-bottom: 1px solid #ffffff;
  padding-bottom: 6px;
}
.spotBox__ttl--name{
  font-size: 3.2rem;
}
.spotBox__ttl--en{
  letter-spacing: 0.2em;
  font-weight: 900;
}
/* ----spotBox color---- */
.spotBlock.ehime .spotBox {
  background-color: #BC8341;
}
.ehime .spot_photo_ttl{
  color: #BC8341;
}
.spotBlock.kagawa .spotBox {
  background-color: #558351;
}
.kagawa .spot_photo_ttl{
  color: #558351;
}
.spotBlock.tokushima .spotBox {
  background-color: #3F80A8;
}
.tokushima .spot_photo_ttl{
  color: #3F80A8;
}
.spotBlock.kochi .spotBox {
  background-color: #B46986;
}
.kochi .spot_photo_ttl{
  color: #B46986;
}

.spotBlock .spotBox {
    background-image: url(/jp/ja/domtour/jaldp/shikoku-henro/img_sites/deco-cloud-white.svg), url(/jp/ja/domtour/jaldp/shikoku-henro/img_sites/deco-cloud-white.svg);
    background-repeat: no-repeat, no-repeat;
    background-size: 45%;
    background-position: top right, bottom left;
}



@media all and (min-width:740px){
  /* .spotBlock {
  padding-top: 60px;
} */
.spotBox {
  padding: 20px 40px;
}
.spotBlock .spotBox {
  background-size: 20%;
    background-position: top left, bottom right;
}
.spotBlock .spotPhotoBox {
    padding: 30px;
  }
.spot_photo_item .colWrap.clm_1_2col .col,
.spot_photo_item .clm_1_3col.colWrap .col {
  width: calc((100% - 60px) / 3);
}
.spot_photo_item .clm_1_2col.colWrap .col:nth-of-type(n+2), .spot_photo_item .clm_1_3col.colWrap .col:nth-of-type(n+2) {
    margin-top: 0px;
}
.spot_photo_item .colWrap.clm_1_3col {
  justify-content: space-between;
}
.spotBox__ttl{
  border-bottom: none;
  border-right: 1px solid #ffffff;
  padding-bottom: 6px;
  text-align: center;
  padding-right: 40px;
}
.spotBox__ttl--name{
  font-size: 4.2rem;
}
.spotBox__clm .colWrap{
  align-items: center;
  justify-content: space-between;
}
.spotBox__clm .clm_1_2col.colWrap .col:first-child{
  width: 260px;
  flex-shrink: 0;
}
.spotBox__clm .clm_1_2col.colWrap .col:last-child{
  width: 570px;
}
  
}

/* メディアクエリ */
@media all and (min-width:740px){
  
}


/* ==================================================================
自由型部分
==================================================================== */
.map__wrap{
  position: relative;
  padding-top: 40px;
}
.map__modal--btn a{
  position: absolute;
  color: #fff;
  font-size: 14px;
  padding: 10px 16px;
  border-radius: 16px;
  line-height: 1;
  background-color: #333;
  display: inline-block;
}
.map__modal--btn a:focus{
  outline: none;
}
.map__modal--icon{
  display: inline-block;
  content: "";
  background-image: url(/global/Y18/img/icon_dialog_wt.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 10px;
  height: 10px;
  margin-left: 4px;
}
.tokushima.map__modal--btn a{
  background-color: #3F80A8;
  top: 86px;
  right: 60px;
}
.kochi.map__modal--btn a{
  background-color: #B46986;
  bottom: 45px;
    left: 120px;
}
.ehime.map__modal--btn a{
  background-color: #BC8341;
  top: 120px;
  left: 36px;
}
.kagawa.map__modal--btn a{
  background-color: #558351;
  top: 20px;
  right: 50px;
}

@media all and (min-width:740px) {
  .map__wrap{
    padding-top: 30px;
    width: 650px;
    margin: 0 auto;
  }
  .map__modal--btn a {
    font-size: 18px;
    padding: 10px 20px;
    border-radius: 24px;
    transition: all .5s;
}
.map__modal--icon{
  width: 12px;
  height: 12px;
}
.map__modal--btn a:hover{
  text-decoration: none;
  opacity: 0.8;
}

.tokushima.map__modal--btn a {
  top: 125px;
  right: 60px;
}
.kochi.map__modal--btn a {
  bottom: 100px;
  left: 210px;
}
.ehime.map__modal--btn a {
  top: 150px;
  left: 90px;
}
.kagawa.map__modal--btn a {
  top: 20px;
  right: 120px;
}

}



/* モーダル */
.md-xmark{
  position: absolute;
  top: 16px;
  right: 16px;
  width: 25px;
  height: 22px;
  z-index: 9999;
  cursor: pointer;
}
.md-xmark span {
  height: auto;
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #333;
  border-radius: 4px;
}
.md-xmark span:nth-of-type(1) {
  top: 0;
  transform: translateY(10px) rotate(-45deg);
}
.md-xmark span:nth-of-type(2) {
  bottom: 0;
  transform: translateY(-10px) rotate(45deg);
}
.md-overlay{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .7;
  z-index: 9999;
}
.map__modal--contents{
  display: none;
  position: fixed;
  top: 16px;
  left: 50%;
  width: 95%;
  height: auto;
  overflow: hidden;
  transform: translateX(-50%);
  z-index: 10000;
}
.map__modal--inner{
  padding: 24px 10px 20px;
  background: #fff;
  max-height: 95vh;
  border-radius: 16px;
  overflow-y: scroll;
}
.map__modal--ttl{
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 12px;
  text-align: center;
}
.tokushima .map__modal--ttl{
  color: #3F80A8;
}
.kochi .map__modal--ttl{
  color: #B46986;
}
.ehime .map__modal--ttl{
  color: #BC8341;
}
.kagawa .map__modal--ttl{
  color: #558351;
}

.map__modal--img{
  background-color:#EDFBFF ;
  border-radius: 8px 8px 0px 0px;
}
.henro-name__box{
  margin-bottom: 16px;
  padding: 10px 16px;
  background-color: #F7F3EA;
  border-radius: 0px 0px 8px 8px;
}
.henro-name__box ul{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.henro-name__list{
  width: 50%;
  margin-bottom: 2px;
  font-size: 14px;
}
.henro-name__list span{
  color: #fff;
  font-size: 12px;
  margin-right: 8px;
  width: 60px;
  display: inline-block;
  text-align: center;
  border-radius: 2px;
}
.tokushima .henro-name__list span{
  background-color: #3F80A8;
}
.kochi .henro-name__list span{
  background-color: #B46986;
}
.ehime .henro-name__list span{
  background-color: #BC8341;
}
.kagawa .henro-name__list span{
  background-color: #558351;
}
.henro-img__box{
  width: 230px;
  margin: 0 auto;
}
.henro-img__box img{
  border-radius: 8px;
}
.henro-img__cap{
  margin-top: 4px;
  text-align: center;
}

@media all and (min-width:740px) {
  .map__modal--contents {
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 710px;
}
.map__modal--inner {
  padding: 40px;
  max-height: 95vh;
  border-radius: 16px;
  overflow-y: auto;
}
.map__modal--ttl {
  font-size: 20px;
}
.henro-name__box ul {
  justify-content: flex-start;
}
.henro-name__list {
  width: 33%;
}
}


/* =================================
メディアクエリ
=================================== */
@media all and (min-width:740px) {
  
}