/* =============================
   Base
============================= */

html {
  font-size: 62.5%;/* 1rem = 10px */
}

@media (max-width: 768px){
  html {
  font-size: 52.5%;/* 1rem = 10px */
  scroll-padding-top: 5em;
}
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: "Yu Gothic", "YuGothic", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-size: 1.6rem;/* 16px */
  line-height: 26px;
  margin: 0;
  background: #E2F7FF;
  color: #3B3B3B;
}


main{
  min-height: 86vh;
}

h1 {
  font-size: 2.4rem;
  font-weight: 600;
}

h2 {
  font-size: 1.8rem;
  font-weight: 600;
}

h3 {
  font-size: 1.6rem;
  font-weight: 600;
}


.LineTitle {
  color: #257EC7;
  border-bottom: 1px solid #257EC7;
}

.barTitle{
  background:#2E77BE;     /* だいたい画像の青 */
  color:#fff;
  padding:0.5em;       /* 帯の上下/左右 */
  line-height:1.2;
  display:block;          /* 横いっぱい */
  margin:0 0 0.8em;        /* 下の余白はお好みで */
}

.highlight{
  font-size: 1.8rem;
  font-weight: 600;
  color: red;
}

.bold{
  font-weight: 600;
}

img {
  max-width: 100%;
  display: block;
}

a{
  color: inherit;
}


@media (max-width: 768px) {
  ul{
    padding-inline-start: 1.5em;
}

}

.txt-right{
  text-align: right;
}

/* =============================
   Layout
============================= */

.l-container {
  max-width: 896px;
  /* 896px */
  margin-left: 25%;
  /* 320px */
  margin-right: 5%;
  /* 64px */
}

@media (max-width: 1024px) {
  .l-container {
    width: auto;
    margin: 0 auto;
    padding-inline: 1.6em;
  }
}

/* =============================
   Hero
============================= */
.hero img{
  width:100%;
  height:auto;
  display:block;
}


/* =============================
   Section
============================= */

.section {
  margin-top: 5em;
  /* 80px */
}

.last{
  margin-bottom: 5em;
}

.content__box{
  margin-bottom: 3em;
}

@media (max-width: 768px){
  .page{
    margin-top: 3em;
  }
}


/* =============================
   Section Title
============================= */

.sectionTitle {
  margin: 0 0 1.5em;/* 36px */
  display: flex;
  align-items: center;
  gap: 0.75em;
}

.sectionTitle::before {
  content: "";
  width: 2.4rem;
  /* 24px */
  height: 2.4rem;
  border-radius: 50%;
  background: #D26E49;
  flex-shrink: 0;
}

@media (max-width: 768px){
  .sectionTitle {
  margin: 0 0 1em;/* 36px */
  display: flex;
  align-items: center;
  gap: 0.75em;
}
}

/* =============================
   Panel
============================= */

.panel {
  background: rgba(255, 255, 255, .7);
  border-radius: 20px;
  padding: 3em;
}

@media (max-width: 768px){
  .panel {
  padding: 1.5em;
}
}

/* =============================
   News
============================= */

.newsRow {
  display: flex;
  gap: 1em;
  padding: 0 3em;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  align-items: center;
}

.newsRow:first-child {
  padding-top: 0;
}

.newsRow:last-child {
  padding-bottom: 0;
}

.newsRow__date {
  font-size: 1.4rem;
}

@media (max-width: 768px) {

  .newsRow {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3em;
    padding: 0;
  }

  .newsRow__date{
    margin-top: 1em;
    margin-bottom: 0;
  }
  .newsRow__text{
    margin-top: 0;
    margin-bottom: 1em;
  }

}

/* =============================
   Buttons
============================= */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .9em 1.6em;
  width: 100%;
  max-width: 436px;
  border-radius: 10px;
  font-size: 1.6rem;
  font-weight: 700;
  transition: .15s ease;
  text-decoration: none;
  color: inherit;
}

/* 右側の丸アイコン */
.btn::after {
  content: "▶";
  position: absolute;
  right: 5%;
  width: 32px;
  height: 32px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

.btn:hover {
  transform: translateY(-0.1em);
}

.btn--yellow {
  background: #FFD953;
}

.btn--green {
  background: #17AA6C;
  color: #fff;
}

.btn--blue {
  background: #257EC7;
  color: #fff;
}

.btn--coral {
  background: #D26E49;
  color: #fff;
}

.btn--yellow::after {
  color: #FFD953;
}

.btn--green::after {
  color: #17AA6C;
}

.btn--blue::after {
  color: #257EC7;
}

.btn--coral::after {
  color: #D26E49;
}

/* =============================
   Cards
============================= */

.cardsTop {
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5em;
}

.cardsBottom {
  margin-top: 2em;
  text-align: center;
}

.cardImgBtn {
  border-radius: 10px;
  overflow: hidden;
  transition: .15s ease;
}

.cardImgBtn:hover {
  transform: translateY(-0.2em);
}

@media (max-width: 768px) {

  .cardsTop{
    grid-template-columns: 1fr;
  }

}

/* =============================
   grid
============================= */

.grid {
  display: grid;
  gap: 1.5em;
}

/* =============================
   Home-Reg
============================= */

.overview,
.ctaRow {
  grid-template-columns: repeat(2, 1fr);
  /* 2列 */
}

.overview__box{
  padding: 0 2em 0 3em;
}

.overviewTitle{
  margin-top: 0;
  margin-bottom: 1em;
}
.overviewText{
  margin: 0;
}

.ctaRow{
  margin-top: 3.75em;
}

@media (max-width: 768px) {

  .overview,
  .ctaRow {
    grid-template-columns: 1fr;
  }

  .overview__box{
  padding: 0;
}

.overviewTitle{
  margin-bottom: 0.2em;
}

}

/* =============================
   Links
============================= */
.links__box {
  grid-template-columns: repeat(4, 1fr);
  /* 2列 */
}

.links__box a {
  display: flex;
  justify-content: center; /* 横中央 */
  align-items: center;     /* 縦中央 */
}

.links__box img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 768px) {

  .links__box{
    grid-template-columns: 1fr;
    gap: 3em;
  }

}

/* =============================
   Google Map
============================= */
.access__box{
  padding: 0 3em;
}

.map {
  max-width: 896px;   /* 好きな幅 */
  margin: 0 auto;
  margin-top: 1.5em;
  border-radius: 20px; /* 角丸 */
  overflow: hidden;    /* ← これ重要 */
}

.map iframe {
  width: 100%;
  height: 363px;       /* 高さ調整 */
  border: 0;
  display: block;
}

@media (max-width: 768px) {

  .map iframe {
    height: 240px;
  }

  .access__box{
  padding: 0;
}

}

/* =============================
   Contact
============================= */
.contactTitle{
  margin: 0 0 1em 0;
}

.cb_2{
  margin-top: 3em;
}

@media (max-width: 768px) {

  .contactTitle{
  margin: 0;
}

  .contactText{
  margin-top: 0.2em;
}

}

/* =============================
   Left Menu
============================= */

.sideNav {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%); /* 自分の高さの半分戻す */
  width: 25%;
  /* 320px */
  display: flex;
  align-items: center;
  justify-content: center;
}

.sideNav__inner {
  padding: 2em 1.75em 2em 2.25em;/* 36px */
  border-radius: 20px;
  background: #fff;
  border: 2px solid #257EC7;
}

.sideNav__nav {
  display: flex;
  flex-direction: column;
  gap: 1.2em;
  /* 24px */
}

.sideNav__nav a,
.spNav a {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
}

.sideNav__nav a{
  font-weight: 600;
}

/* 青い丸 */
.sideNav__nav a::before,
.spNav a::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #257EC7; /* 青 */
}

@media (max-width: 1024px) {
  .sideNav {
    display: none;
  }

  .sideNav__nav a::before,
.spNav a::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #257EC7; /* 青 */
}

}

/* ====== SP Header ====== */
.spHeader {
  display: none;
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, .6);
  backdrop-filter: blur(8px);
}

.spHeader__inner {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: .75rem 1rem;
}

.spHeader__brand{
  text-decoration: none;
  color: #257EC7;
  font-weight: 600;
}

.spHeader__btn {
  font-size: 2.4rem;
  padding: 0 0.5rem;
  border: 1px solid rgba(0, 0, 0, .15);
  background: inherit;
}

.spNav {
  display: none;
  padding: 0.5em 2.5em;
}

.spNav a {
  display: block;
  padding: 0.5em 0.2em;
  text-decoration: none;
  border-top: 1px solid rgba(0, 0, 0, .08);
  
}

@media (max-width: 1024px) {
  .sideNav {
    display: none;
  }

  .spHeader {
    display: block;
  }

  .spNav.is-open {
    display: block;
  }
}


/* =============================
   Footer
============================= */

.footer {
  background: #257EC7;
  color: #fff;
  text-align: center;
}

.footer__inner{
  padding: 0.25em ; 
}

.copyright{
  font-size: 1.2rem;
  margin: 0;
}


/* =============================
   Reg
============================= */
.reg__box{
  margin-bottom: 3.3em;
}

/* =============================
   COI
============================= */
.coi__grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3em;
}

.coi__box {
  text-align: center;
}

.coi__box img{
  margin: auto;
  margin-bottom: 0.5em;
}

@media (max-width: 768px) {

  .coi__grid {
    grid-template-columns: 1fr;
  }

}

/* =============================
   Theme
============================= */
  .theme__table {
    border-collapse: collapse;
  }

  .theme__table th, .theme__table td {
    border: 1px solid #999;
    padding: 1em;
    vertical-align:middle;
  }
  .theme__table th {
    width: 15%;
    background-color: #f5f5f5;
    text-align: left;
  }
  .theme__table .sub-note {
    font-size: 13px;
    margin-top: 5px;
  }

  #theme .bold{
    margin-top: 2em;
  }

  /* =============================
   Hotel
============================= */
  .hotel__table {
    border-collapse: collapse;
    width: 100%;
  }

  .hotel__table th, .hotel__table td {
    border: 1px solid #999;
    padding: 0.5em;
    text-align: center;
  }

  .hotel__table th {
    background-color: #f5f5f5;
  }