@charset "UTF-8";
:root {
  --theme-main-color: #4B7F52; /* 深いオリーブグリーン、豊かな自然を象徴 */
  --theme-main-dark: #2E5034; /* オリーブグリーンのさらに暗いシェード、深みと濃密さを表現 */
  --theme-main-pale: #A9C2A3; /* メインカラーの薄いティント、オリーブ畑の優しい朝霧を思わせる */
  --theme-main-pale20: #C0D1BF; /* メインカラーのさらに薄いティント、柔らかな日差しを浴びたオリーブ葉 */
  --vivid-color: #679436; /* 鮮やかな緑、イタリアの春を思わせる生命力あふれるカラー */
  --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: #A9C2A370;
  --dp-bg-transparent-80: #9DC2B880;

  --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 .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 .SpotTitle .SpotTitleJp {
    font-size: 1.8rem;
    letter-spacing: -1px;
  }
  .SpotSection #Spot03 .SpotTitle .SpotTitleJp {
    font-size: 1.3rem;
    letter-spacing: -3px;
    padding-top: 0.5rem;
  }
  .SpotSection #Spot04 .SpotTitle {
    padding: 0.75rem 0.25rem;
  }
  .SpotSection #Spot04 .SpotTitle .SpotTitleJp {
    font-size: 1.15rem;
    letter-spacing: -1px;
    padding-top:0;
    line-height: 1.2;
  }
  .SpotSection #Spot04 .SpotTitle .SpotTitleEng {
    font-size: 1rem;
  }
  .SpotSection #Spot05 .SpotTitle .SpotTitleJp {
    font-size: 1.3rem;
    padding-top: 0.5rem;
  }
  .SpotSection #Spot06 .SpotTitle .SpotTitleJp {
    font-size: 1.3rem;
    padding-top: 0.5rem;
  }

}

@media screen and (min-width: 760px), print {
  .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 .SpotTitle .SpotTitleJp {
    padding-top: 0.25rem;
    font-size: 2.2rem;
    letter-spacing: -0px;
  }
  .SpotSection #Spot03 .SpotTitle .SpotTitleJp {
    font-size: 1.4rem;
    letter-spacing: -2px;
    padding-top: 0.5rem;
  }
  .SpotSection #Spot04 .SpotTitle {
    padding: 0.75rem 0.25rem;
  }
  .SpotSection #Spot04 .SpotTitle .SpotTitleJp {
    font-size: 1.3rem;
    letter-spacing: -1px;
    padding-top:0.25rem;
    line-height: 1.4;
  }
  .ImageMapWrap .SpotTitle.Spot04Button .SpotTitleEng {font-size: 0.8rem;}
  .SpotSection #Spot04 .SpotTitle .SpotTitleEng {
    font-size: 1rem;
  }
  .SpotSection #Spot05 .SpotTitle .SpotTitleJp {
    font-size: 1.6rem;
    padding-top: 0.5rem;
  }
  .SpotSection #Spot06 .SpotTitle .SpotTitleJp {
    font-size: 1.6rem;
    padding-top: 0.5rem;
  }
}