@charset "utf-8";
/* CSS Document */
body {
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
font-size: 16px;
}
.flag{
	text-align: center;
	flex-shrink: 0;
}
.donation-button {
    display: inline-block;
    background-color: #e41587;
    font-size: 15px;
    padding: 8px 24px 6px;
    border-radius: 3px;
    color: #fff;
	margin-bottom:5px;
}
.wrapper {
  position: relative;
}
.site-footer{
	max-width:none !important;
}
@media screen and (max-width: 1024px) {
.gnav {
display: none;
}
.flag img{width:100%; max-width:300px;}
.header-container{
margin: 20px 0 0;
}
#header-search{
margin:15px 0 0;
}
.gsc-control-cse{
	padding-bottom:0 !important;
	}
 
#header-right{display: none;}
}
.gsc-control {
    /*width: 300px;*/
    margin-left: auto;
    margin-right: auto;
}
@media screen and (min-width: 500px)and (max-width:1024px) {
/*.header-container{ display: flex;}*/
#header-left{width:395px; margin-left:auto; margin-right:auto; display: flex;}
}
@media screen and (max-width: 499px) {
#header-left{
text-align: center;
}
#header-search img{width:100%; max-width: 400px;}/*ダミー画像用につき本環境ではこの記述←部を削除*/
}
@media screen and (min-width: 1025px) {
.slide-button{
display: none;
}
.menu {
display: none;
}
.gnav {
display: flex;
height: 2rem;
margin: 0 auto;
width: 1000px;
}
.gnav ul{
box-sizing: border-box;
margin: 0;
padding: 0;
}
ul{
padding-inline-start: 0 !important;
}
.gnav > li {/*親階層のみ幅を25%にする*/
width: 25%;
}
/*全てのリスト・リンク共通*/
.gnav li {
list-style: none;
position: relative;
z-index: 2;
background-color: #fff;
}
.gnav li a {
background: #fffff;
border-right: 1px solid #000000;
color: #000;
display: block;
height: 2rem;
line-height: 2rem;
text-align: center;
text-decoration: none;
width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*子階層以降共通*/
.gnav li li {
height: 0;
overflow: hidden;
transition: .5s;
}
.gnav li li a {
border-top: 1px solid #ffffff;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.gnav li:hover > ul > li {
height: 2rem;
overflow: visible;
}
.gnav li ul li ul {
left: 100%;
position: absolute;
top: 0;
width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*一番右のメニュー*/
.gnav > li:nth-child(5) ul li ul {
left: -100%;
}
/*aの背景色を指定*/	
.gnav li:hover a {/*親階層*/
background: #fffff;
}
.gnav li li a {/*子階層*/
background: #fffff;
}
.gnav li li:hover a {
background: #fffff;
}
.gnav li ul li ul li a {/*孫階層*/
background: #fffff;
}
.gnav li ul li ul li:hover a {
background: #fffff;
}
.gnav li ul li ul li ul li a {/*ひ孫階層*/
background: #fffff;

}
.gnav li ul li ul li ul li:hover a {
background: #fffff;
}
/*リストに「▶︎」を付ける*/
.gnav > li > ul:before {/*子階層*/
border: 5px solid transparent;
border-top: 5px solid #000;
content: "";
right: 1rem;
position: absolute;
top: 1rem;
transform: translateY(-40%);
}
.gnav li ul li ul:before {/*孫階層*/
border: 5px solid transparent;
border-left: 5px solid #000;
content: "";
left: -20px;
position: absolute;
top: 1em;
transform: translateY(-50%);
}
.gnav li:nth-child(5) ul li ul:before {/*一番右のメニューの孫階層*/
border: 5px solid transparent;
border-right: 5px solid #000;
left: auto;
right: -20px;
}
header{
border-bottom: solid 3px #57bba1;
margin-bottom: 3px;
}
.header-container{max-width:1000px; margin:5px auto 0; display: flex;}
#header-left{width:50%; display: flex;}
#header-search{width:40%; display: flex; align-items: center; justify-content: flex-end;}
#header-search img{width:100%; max-width: 400px;}/*ダミー画像用につき本環境ではこの記述←部を削除*/
#header-right{width:10%; display: flex; align-items: center; justify-content: flex-end; }
.top-container{width:100%; max-width:1000px; margin:40px auto;}
/*.top-container,.page-container{width:100%; max-width:1000px; margin:50px auto;}*/
	.page-container h3{
		font-size:1.5rem;
	}
.details{display: flex; height: 150px; align-items: center; margin:0 30px; }
.flag{max-width: 200px;}
.flag img{width:100%;}
.details p{padding: 20px;}
.details p span{margin-left:20px; font-size: 12pt; text-decoration: underline}

/*スライド*/
    /* 横幅100%・余白なし */
    .hero-slider { width: 100%; margin: 0; padding: 0; }

    /* 縦寸法の最大値を 500px に固定し、中央基準で上下をトリミング */
    .slide-inner {
      height: 500px;            /* ← 最大 500px（PC想定） */
      overflow: hidden;         /* はみ出しを隠す */
      will-change: opacity, box-shadow;
      transform: translateZ(0);
      transition: opacity 500ms ease, box-shadow 500ms ease;
      opacity: 0.95;            /* 強調を付けないなら 1 に */
    }
    /* 完全に同一表示にしたい場合はこのブロックを削除してOK */
    .slick-center .slide-inner {
      opacity: 1;
      box-shadow: 0 0 16px rgba(0,0,0,0.28);
    }

    /* 画像は横幅100%、高さはコンテナに合わせて中央トリミング */
    .slide-inner img {
      width: 100%;
      height: 100%;
      object-fit: cover;          /* トリミングして歪み防止 */
      object-position: center center; /* 縦中央を基準に上下をカット */
      display: block;
    }

    /* スライド間の余白ゼロ */
    .slick-slide { padding: 0; }

    /* ドット */
    .slick-dots li.slick-active button:before { opacity: 0; color: #fff; }
	.slick-dots li.slick-active button{background:#fff; opacity:0.6;}
	.slick-dots {bottom: 10px;}

    /* スマホ等で高さを抑えたい場合（任意） */
    @media (max-width: 768px) {
      .slide-inner { height: 320px; } /* 例：SPは 320px 上限に */
    }
/*スライド*/
	
@media screen and (max-width: 1024px){
  /*nav#mobile-nav.mobile-nav.active{
    display: block !important;
  }*/
}

/* ココからモバイルメニュー関係 */
/*.mobile-nav {
  display: none;
}*/
header {
  position: relative;
}
/* ハンバーガーボタン */
.hamburger {
  display: none;
}

/* タブレット以下 */
@media screen and (max-width: 1024px) {

  .gnav {
    display: none;
  }

  .hamburger {
    display: block;
    background: none;
    border: none;
    cursor: pointer;
  }

  .hamburger span {
    display: block;
    width: 30px;
    height: 2px;
    margin: 6px 0;
    background: #000;
  }
#mobile-nav.active{
  overflow: auto;
}
@media (max-width: 1024px){

  /* navの基本（表示は常に確保して、見え方だけ変える） */
  #mobile-nav{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 10000;

    /* ここがアニメ用 */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: max-height .28s ease, opacity .18s ease, transform .18s ease;

    padding: 0 16px; /* 閉じたとき高さが出ないよう縦paddingはactive側に */
  }

  #mobile-nav.active{
    max-height: 80vh;        /* メニューが多い時に備える */
    opacity: 1;
    transform: translateY(0);
    padding: 12px 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
  }

  /* 中のメニュー */
  #mobile-nav .mobile-menu{
    list-style: none;
    margin: 0;
    padding: 0;
  }
  #mobile-nav .mobile-menu li{
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,.08);
  }
}

}
/*モバイルメニューの追加*/
/* モバイル用：開閉の見た目を確実にする */
@media screen and (max-width: 1024px) {

  /* PC用gnavは隠す（既に書いてあるなら重複OK） */
  .gnav { display: none; }

  /* mobile navは閉じている時は非表示 
  .mobile-nav { display: none; }
*/
  /* JSがactiveを付けたら表示 
  .mobile-nav.active { display: block; }
*/
  /* “表示されてるのに見えない” を防ぐ（位置・重なり） */
  .mobile-nav{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 9999;
    padding: 12px 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
  }

  /* ボタンが他要素に埋もれないように */
  .hamburger{
    position: relative;
    z-index: 10000;
  }

  /* メニューの見た目（最低限） */
  .mobile-menu{
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .mobile-menu li{
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,.08);
  }
  .mobile-menu a{
    display: block;
    text-decoration: none;
  }
}
/*ハンバーガー追記*/
/* ハンバーガー基本 */
.hamburger{
  background: transparent;
  border: 0;
  padding: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent; /* スマホのタップ暗転を抑制 */
}

.hamburger span{
  display: block;
  width: 30px;
  height: 2px;
  margin: 6px 0;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
  transform-origin: center;
}

/* 開いている状態：× */
.hamburger.is-open span:nth-child(1){
  transform: translateY(8px) rotate(45deg);
}
.hamburger.is-open span:nth-child(2){
  opacity: 0;
}
.hamburger.is-open span:nth-child(3){
  transform: translateY(-8px) rotate(-45deg);
}
.hamburger{
  outline: none;
}
.hamburger:focus{
  outline: none;
}
.hamburger:focus-visible{
  outline: 2px solid currentColor; /* キーボード操作の人向け */
  outline-offset: 3px;
}
/* ハンバーガーの暗転（active/focus/タップハイライト等）を無効化 */
.hamburger,
.hamburger:hover,
.hamburger:active,
.hamburger:focus,
.hamburger:focus-visible{
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  color: inherit !important;
  outline: none !important;
}

/* iOS/Android/Chrome系のタップ時ハイライトを抑止 */
.hamburger{
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
  -webkit-appearance: none;
  appearance: none;
}
@media (max-width: 1024px){

  /* 重要：display切替は使わない（瞬間表示の原因） */
  #mobile-nav{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 10000;

    /* アニメ用：閉じた状態 */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;

    transition:
      max-height .70s ease,
      opacity .35s ease,
      transform .35s ease;

    padding: 0 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
  }

  /* 開いた状態 */
  #mobile-nav.active{
    max-height: 80vh;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    padding: 12px 16px;
  }
}