@charset "UTF-8";
:root {
--theme-main-color: #02549a; /* 北欧ブルー */
--theme-main-dark: #0d497d; /* 北欧らしさを表現 */
--theme-main-pale: #dbeefe;/* メインカラーの薄いティント */
  --theme-main-pale20: #ceeaf5; /* メインカラーのさらに薄いティント */
  --vivid-color: #1d764a; /* 鮮やかな緑 */
  --theme-vivid-color: #C22A39;
  
  --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: #A9C2A370;
--dp-bg-transparent-80: #A9C2A380;

  --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) {
.SpotSection .SpotWrap .SpotHeaderWrap .SpotHeader .SpotSubTitle {
    width: 85%;
    position: absolute;
    bottom: 1rem;
    right: 0;
}
.SpotSection .SpotWrap .SpotHeaderWrap .SpotHeader .SpotSubTitle p span {font-size: 1.1rem;}
.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.3rem;
    padding-top: 0;
  }
  .SpotSection #Spot02 .SpotTitle .SpotTitleJp {
    font-size: 0.8rem;
    letter-spacing: -2px;
    padding-bottom: 1em;
  }
.SpotSection #Spot02 .SpotHeader .SpotImageLabel {
    width: 65%;
    text-align: right;
    font-size: 0.625rem;
    position: absolute;
    top: 0;
    right: 0.5rem;
    color: var(--sub-text-color);
}
  .SpotSection #Spot03 .SpotTitle .SpotTitleJp {
    font-size: 1.5rem;
    padding-top: 0;
  }
}

@media screen and (min-width: 760px), print {
.SpotSection .SpotWrap .SpotHeaderWrap .SpotHeader .SpotSubTitle {
	width: 64%;
	position: absolute;
	bottom: 1rem;
	right: 0;
}
  .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 {
    font-size: 1.5rem;
    padding-top: 0.25rem;
  }
  .SpotSection #Spot02 .SpotTitle .SpotTitleJp {
    font-size: 0.8rem;
    letter-spacing: -2px;
    padding-bottom: 1em;
  }
  .SpotSection #Spot03 .SpotTitle .SpotTitleJp {
    font-size: 1.8rem;
    padding-top: 0.5rem;
  }
  .ImageMapWrap .SpotTitle.Spot04Button .SpotTitleEng {font-size: 0.8rem;}
}