@charset "UTF-8";
:root {
    --theme-main-color: #E01E2B; /* カナダ国旗同等の赤 */
    --theme-main-dark: #a70c17;
    --theme-main-pale: #f1c2c5;
    --theme-main-pale20: #ffbfc4;
    --vivid-color: #e01e2b;
    --theme-vivid-color: #C22A39;
  
  /* --olive-pale: #B4C4A4; /* 淡いオリーブグリーン、穏やかなオリーブ畑の風景 */
  /* --olive-color: #8F9C76; /* 標準的なオリーブグリーン、イタリアの自然を象徴 */
 /*  --olive-dark: #5E6650; /* 暗いオリーブグリーン、オリーブの実の陰影を表現 */
  /* --sea-green-pale: #9DC2B8; /* 海岸線の淡い緑色、チンクエ・テッレの海を思わせる */
  /* --sea-green-color: #2A8F7D; /* 明るい海の緑、イタリアの海岸線の清々しさ */
  /* --sea-green-dark: #205F54; /* 深い海の緑、海の深みを表現 */

  --gray-00-color:#F5F5F5;
  --gray-10-color:#A9C2A3;
  --gray-60-color:#999;

  --dp-bg-01: var(--theme-main-color);
  --dp-bg-02: var(--olive-pale);
  --dp-bg-03: var(--sea-green-pale);
    --dp-bg-transparent-70: rgba(224, 30, 43, 0.1);
    --dp-bg-transparent-80: rgba(224, 30, 43, 0.05);

  --bg-transparent-95: #ffffff95;
  --bg-transparent-90: #ffffff90;
  --bg-transparent-80: #ffffff80;
  --bg-transparent-b5: #ffffffb5;
  --bg-transparent-e4: #ffffffe4;
}



@media screen and (max-width: 759.9px) {
#Spot01 .SpotHeader .SpotImageLabel {
    position: absolute;
    top: -15px;
    right: 0.5rem;
}
.SpotSection .SpotWrap .SpotHeaderWrap .SpotHeader .SpotSubTitle {
    width: 70%;
    position: absolute;
    bottom: 0rem;
    right: 0;
}

.SpotSection .ImageMapWrap a .SpotTitle.Spot05Button .SpotTitleJp,
.SpotSection .ImageMapWrap a .SpotTitle.Spot06Button .SpotTitleJp {font-size: 1.1rem;}
.SpotSection .ImageMapWrap a .SpotTitle .SpotTitleJp {font-size: 0.75rem;}
  .ImageMapWrap .SpotTitle.Spot01Button {
    margin-left: -43%;
    margin-top: -49%;
  }
  .ImageMapWrap .SpotTitle.Spot02Button {
    margin-left: 10%;
    margin-top: -28%;
  }
  .ImageMapWrap .SpotTitle.Spot03Button {
    margin-left: -32%;
    margin-top: 1%;
  }
  .ImageMapWrap .SpotTitle.Spot04Button {
    margin-left: 25%;
    margin-top: -7%;
  }
  .ImageMapWrap .SpotTitle.Spot04Button .SpotTitleEng {font-size: 0.65rem;}
  .ImageMapWrap .SpotTitle.Spot05Button {
	margin-left: 17%;
	margin-top: -63%;
    border: 3px solid var(--vivid-color);
    width: 112px;
    height: 112px;
  }
  .ImageMapWrap .SpotTitle.Spot06Button {
	margin-left: -32%;
	margin-top: 50%;
    border: 3px solid var(--theme-vivid-color);
    width: 112px;
    height: 112px;
  }
  .NavWrap.is_fixed .is-SectionNavMini {
    display: none;
  }
  .NavSection .NavWrap .JumpToSection .SectionNavItem .SectionNavItemLabel {
    display: block;
  }
  .NavSection .NavWrap .JumpToSection .SectionNavItem .SectionNavItemLabel .is-SectionNavMini{
    width: 100%;
  }
  #JumpNav03 .SectionNavItemLabel {
    padding-top: 0.5rem;
  }
  .NavWrap.is_fixed #JumpNav03 .SectionNavItemLabel {
    padding-top: 0;
  }

  .NavWrap.is_fixed .ChangeDept {
    gap: 0.125rem;
    padding: 0.5rem 0 0.25rem;
  }

  .NavWrap.is_fixed .ChangeDept #deptSelect {
    padding: 0.25rem;
    font-size: 0.625rem;
    padding-bottom: 0;
  }

  .NavWrap.is_fixed .JumpToSection .SectionNav .SectionNavItem .SectionNavItemLabel {
    font-size: 0.625rem;
    min-height: auto;
  }

  .SpotSection #Spot01 .SpotTitle .SpotTitleJp {
    font-size: 1.1rem;
    padding-top: 0.5rem;
  }
  .SpotSection #Spot02 .SpotTitle .SpotTitleJp {
    font-size: 1.5rem;
    letter-spacing: -2px;
    padding-top: 0.5rem;
  }
  .SpotSection #Spot03 .SpotTitle .SpotTitleJp {
    font-size: 0.7rem;
    padding-top: 0.5rem;
  }
}

@media screen and (min-width: 760px), print {
.SpotSection .SpotWrap .SpotHeaderWrap .SpotHeader .SpotSubTitle {
	width: 55%;
	position: absolute;
	bottom: 0.25rem;
	right: -1rem;
}
  .ItemSection .ItemBox .ItemBoxContent .ItemBoxContentInner .ItemBoxItemWrap .ItemBoxItem .ItemSetWrap.is-tentsuki a .ItemTitle {
    min-height: 3.4rem;
  }
  .SpotSection .ImageMapWrap a .SpotTitle .SpotTitleJp {
    font-size: 1.1rem;
  }
  .ImageMapWrap .SpotTitle.Spot01Button {
    margin-left: 15%;
    margin-top: -24.5%;
  }
  .ImageMapWrap .SpotTitle.Spot02Button {
    margin-left: 10%;
    margin-top: -14%;
  }
  .ImageMapWrap .SpotTitle.Spot03Button {
    margin-left: -13%;
    margin-top: -6%;
  }
  .ImageMapWrap .SpotTitle.Spot04Button {
    margin-left: 19%;
    margin-top: -6%;
  }
  .SpotSection .ImageMapWrap a .SpotTitle.Spot05Button .SpotTitleJp,
  .SpotSection .ImageMapWrap a .SpotTitle.Spot06Button .SpotTitleJp {
    font-size: 1.5rem;
  }
  .ImageMapWrap .SpotTitle.Spot05Button {
	margin-left: -32%;
	margin-top: -22%;
    width: 140px;
    height: 140px;
    padding: 1rem 0.25rem 1.75rem;
    border: 3px solid var(--vivid-color);
    
  }
  .ImageMapWrap .SpotTitle.Spot06Button {
    margin-left: 30%;
    margin-top: 16%;
    width: 140px;
    height: 140px;
    padding: 1rem 0.25rem 1.75rem;
    border: 3px solid var(--theme-vivid-color);
  }

  .SpotSection #Spot01 .SpotTitle .SpotTitleJp {
    padding-top: 0.25rem;
    font-size: 1.4rem;
  }
  .SpotSection #Spot02 .SpotTitle .SpotTitleJp {
    font-size: 1.8rem;
    letter-spacing: -2px;
    padding-top: 0.5rem;
  }
  .SpotSection #Spot03 .SpotTitle .SpotTitleJp {
    font-size: 0.8rem;
    padding-top: 0.5rem;
  }
  .ImageMapWrap .SpotTitle.Spot04Button .SpotTitleEng {font-size: 0.8rem;}
}