/*
Theme Name: Tutrial4-Proto
Author: Your Name
Description: 汎用WordPressテーマ
Version: 4.0
*/

html, body {
	margin: 0;
	padding: 0;
	font-size: clamp(1.3vw, 1rem, 3vw);
	font-family: "BIZ UDPGothic", sans-serif;
}
#en-txt {font-size: clamp(1.1vw, 0.9rem, 2.5vw);}
/* 全体 */
body {padding:0;margin:0;}
@media (max-width: 768px) {
	body {padding-top: 70px;}
}

/* ヘッダー */
header {
  color: #333333;
  width: 100%;
}
@media (max-width: 768px) {
header {
  color: #333333;
	background:#FFFFFF;
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%;
	height:auto;
  z-index: 2000;
}	
}


/* ヘッダー内部を最大1000pxで中央配置 */
.header-inner {
  width: 97%;
  margin: 0 auto;
  position: relative; 
  display: flex;
  justify-content:space-between;
  align-items: center;
  padding: 0 3% 0 0;
}
.inner-h {background-color:#f9d3e3;padding:0;margin:0;flex:1;display:flex;flex-direction:column;justify-content:flex-end;}
.inner-h h1 {font-size:2.7vw;margin:0;padding:30px 30px 10px 26vw;}
.en-txt {padding-left:8.5vw!important;}
.inner-h h2 {font-size:1vw;margin:0;padding:5px 30px 5px 26vw;background:#FFFFFF;font-weight:normal;}
.inner-h a {color:#333333;text-decoration:none;}
.logo-area {width:100%;margin:0;padding:0;display:flex;}
.logo-area img {width:120px;height:auto;vertical-align:bottom;}
.lang-area {display:flex;align-items:center;}
.lang-area ul {list-style:none;padding:0 0 0 15px;margin:0;display:flex;flex-direction:column;align-items:center;}
.lang-area ul li {width:100px;margin:5px;font-size:11px;}
.lang-area ul li:first-child a{padding:10px 3px;color:#ffffff;background:#00a0e9;display:flex;justify-content:center;align-items:center;text-decoration:none;}
.logo-area ul li:first-child a:hover {background:#004de8;}
.lang-area ul li:last-child a{padding:10px 3px;color:#ffffff;background:#009944;display:flex;justify-content:center;align-items:center;text-decoration:none;}
.logo-area ul li:last-child a:hover {background:#037531;}
.citylogo {width:100%;max-width:800px;margin:15px auto;display:flex;align-items:center;justify-content:center;}
.top-capt {width:100%;padding:10px 0;margin:0 auto 30px auto;background:#ede0e6;font-family: "BIZ UDPMincho", serif;}
.top-capt article {width:96%;padding:10px 2%;max-width:800px;margin:auto;}
.top-capt h2 {width:100%;max-width:800px;margin:0 auto;text-align:center;}
.top-capt h2 img {width:100%;height:auto;}
.top-capt p {line-height:150%;}
/* PC用ナビ */
.pc-menu ul{
	width:90%;
	display: flex;
	justify-content:center;
	list-style:none;
	padding:15px 5%;
	margin:10px auto;
	background:#fcdcbd;
	font-size:1.2vw;
}
.pc-menu ul li{padding:0 15px;}
.pc-menu ul li a{text-decoration:none;color:#333333;}
.pc-menu ul li a:hover {text-decoration:underline;}
@media (max-width: 1110px) {
	.inner-h {justify-content:flex-end;}
	.inner-h h1 {font-size:2.6vw;margin:0;padding:30px 30px 10px 22vw;}
	.en-txt {padding-left:5vw!important;}
	.inner-h h2 {margin:0;padding:5px 30px 5px 22vw;}
	.logo-area img {width:80px;}
	.citylogo img {max-width:250px;height:auto;}
	.pc-menu ul{font-size:1.5vw;}
	.pc-menu ul li{padding:0 10px;}
}
@media (max-width: 768px) {
	.pc-menu {display:none;}
	.header-inner {flex-direction:column;}
	.logo-area {width:calc(100% - 40px);margin-right:40px;}
	.lang-area {flex-direction:column;}
	.logo-area img {width:50px;}
	.lang-area ul {display:none;}
	.lang-area ul li a {padding:10px 0;}
	.inner-h h1 {font-size:15px;margin:0 0 5px 0;padding:15px 5px 0 5px}
	.en-txt {padding-left:8vw!important;}
	.inner-h h2 {font-size:8px;margin:0;padding:5px 5px 5px 5px;}
	.top-capt h2{width:98%;}
	.top-capt p {width:94%;margin:auto;padding:3%;}
}

/* ハンバーガーボタン */
.hamburger-btn {
  position: absolute; 
  right: 15px;
  top: 15px;
  width: 30px;
  height: 30px;
  z-index: 1100; 
  cursor: pointer;
}
.hamburger-btn span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70%; 
  height: 2px;
  background: #333333;
  transition: all 0.3s ease;
  transform: translate(-50%, -50%);
}

/* 初期状態：3本線 */
.hamburger-btn span:nth-child(1) {
  transform: translate(-50%, -50%) translateY(-8px);
}
.hamburger-btn span:nth-child(2) {
  transform: translate(-50%, -50%);
}
.hamburger-btn span:nth-child(3) {
  transform: translate(-50%, -50%) translateY(8px);
}

/* ハンバーガー(Xへ)変形時 */
.hamburger-btn.active span:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}
.hamburger-btn.active span:nth-child(2) {
  opacity: 0;
}
.hamburger-btn.active span:nth-child(3) {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* モバイルメニューオーバーレイ: 全画面 */
.mobile-menu-overlay {
  position: fixed;
  top: 69px; right: 0; bottom: 0; left: 0; 
  background: #fff;
  z-index: 1000; 
  transition: opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
}
.mobile-menu-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* モバイルナビ：全画面 */
.mobile-nav {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: #ffffff;
  padding: 20px;
	font-size:21px;
}
.mobile-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mobile-menu li a {
  display: block;
  color: #333333;
  text-decoration: none;
  padding: 10px 0;
}

/* モバイルサブメニュー */
.mobile-has-sub {
  position: relative;
}
.accordion-toggle {
  position: relative;
  display: block;
  color: #333333;
  text-decoration: none;
  padding: 10px 0;
}
.accordion-icon {
  font-weight: bold;
  margin-left: 5px; 
}

/* モバイルサブメニューアニメーション */
.mobile-sub-menu {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s ease;
  margin: 0;
  padding-left: 20px;
}
.mobile-sub-menu li a {
  padding: 5px 0;
}
ul.langmenu {list-style:none;padding:0;margin:0;display:flex;}
ul.langmenu li {width:46%;margin:2%;}
ul.langmenu li:first-child a{padding:10px 3px;color:#ffffff;background:#00a0e9;display:flex;justify-content:center;align-items:center;text-decoration:none;}
ul.langmenu li:first-child a:hover {background:#004de8;}
ul.langmenu li:last-child a{margin:0 2%;padding:10px 3px;color:#ffffff;background:#009944;display:flex;justify-content:center;align-items:center;text-decoration:none;}
ul.langmenu li:last-child a:hover {background:#037531;}

/* メインコンテンツ */
#main {
	width:calc(100% - 40px);
	max-width:960px;
	padding: 20px;
	margin:0 auto;
}
article {width:100%;margin:0 auto;padding:0;max-width:800px;}
main img {max-width:100%;height:auto;}
.date-area {display:flex;justify-content:flex-end;margin:0;padding:0 5px;font-size:.9em;}
.news-area {width:80%;max-width:798px;margin:0 auto 5% auto;padding:0;border:1px solid #333333;}
.news-h3 {display:flex;align-items:center;margin-top:-9%;margin-left:-9%;font-size: clamp(1rem, 2vw, 2rem);}
.news-h3 span {display:inline-flex;color:#ffffff;background:#1d2088;border-radius:1999px;padding:5px 25px;}
.news-area ul {list-style:none;padding:2%;margin:0;}
.news-area ul li {margin-bottom:20px;}
.news-area ul li a {color:#333333;text-decoration:none;}
.news-area ul li a:hover {text-decoration:underline;}
.news-area ul li a span {padding-left:10px;}
.readmore {width:96%;padding:1% 2%;color:#00a0e9;text-align:right;}
.readmore a{text-decoration:none;color:#00a0e9;}
.readmore a:hover {text-decoration:underline;}
.hero-area {width:100%;margin:0 auto;padding:0;}
.hero-area img {width:100%;height:auto;}
.hero-area p {display:flex;justify-content:flex-end;margin:0;padding:0 5px;font-size:11px;}
.main-h2 {font-family:serif;display:flex;font-size: clamp(1.25rem, 4vw, 2.5rem);margin:0;justify-content:center;}
.img-area {width:98%;margin:1% auto;text-align:center;}
.img-button {width:50%;margin:2% auto 10% auto;text-align:center;}
.img-button a:hover {opacity:.8;transition: 0.3s;}
.img-button2 {width:100%;margin:2% auto 10% auto;text-align:center;}
.img-button2 a:hover {opacity:.8;transition: 0.3s;}
.content-h2 {display:flex;justify-content:center;}
.content-h2 span {display:inline-flex;color:#1d2088;border-bottom:3px solid #1d2088;font-size:1em;}
.line01 {width:100%;height:61px;background:url('images/line01.png');background-size:cover;background-repeat:repeat-x;margin:10px 0;color:#ffffff;}
.line01 h2 {width:96%;max-width:800px;height:65px;padding:0 2%;margin:auto;display:flex;align-items:center;}
.line01 h2 img {margin:0 10px;}
.line01 h2 small{font-size:13px;padding-left:15px;}
.line02 {width:100%;height:61px;background:url('images/line02.png');background-size:cover;background-repeat:repeat-x;margin:10px 0;color:#FFFFFF;}
.line02 h2 {width:96%;max-width:800px;height:65px;padding:0 2%;margin:auto;display:flex;align-items:center;}
.line02 h2 img {margin:0 10px;}
.insta {width:98%;margin:1%;}
.insta h3 {text-align:center;font-size: clamp(1.5vw, 1.5rem, 3.5vw);}
.txt-center {justify-content:center;}
.access01 {width:100%;max-width:800px;margin:0 auto 20px auto;display:flex;justify-content:space-between;font-size:12px;}
.access01 h4 {margin:0 0 10px 0;padding:5px 10px;background:#00a0e9;color:#FFFFFF;font-size:130%;font-weight:normal;}
.access01 h5 {margin:0 0 5px 0;font-size:120%;}
.access01 p {margin:0 0 5px 0;line-height:120%;}
.access-box01 {width:48%;display:flex;flex-direction:column;}
.access-box02 {width:58%;margin:0;}
.access-box03 {width:40%;margin:0;display:flex;flex-direction:column;}
.img-resize {margin:0 20%;}
.img-resize2 {margin:0 10%;}
.links {width:96%;margin:auto;}
.p-hr {line-height:135%;margin-bottom:5px;}
.url-wrapper {
  white-space: nowrap;     /* 改行させない */
  overflow: hidden;        /* はみ出た分を隠す */
  text-overflow: ellipsis; /* 末尾を「...」にする */
  display: block;          /* インライン要素の場合はblockかinline-blockに */
	border-top:1px solid #333333;
	padding-top:3px;
	margin-bottom:10px;
}
.single-article {width:90%;margin:auto;}
@media (max-width: 768px) {
	#main {width:100%;padding:0;margin-bottom:10%;}
	.news-h3 {margin-top:-12%;margin-left:-12%;}
	.line01, .line02 {height:41px;}
	.line01 h2, .line02 h2 {height:41px;font-size:18px;}
	.line01 h2 small{font-size:10px;padding-left:5px;}
	.line01 h2 img, .line02 h2 img {height:100%!important;width:auto;}
	.common-h3 {width:96%; margin:2%;}
	.news-area {width:90%;}
	.news-area ul li {margin-bottom:10px;}
	.access01 {flex-direction:column;}
	.access-box01, .access-box02, .access-box03 {width:98%;margin:0 auto 10px auto;}
	.img-resize {margin:0 2%;}
}


/* フッター */
footer {
  background: #f9d3e3;
  color: #333333;
  text-align: center;
  width:100%;
	padding:10px 0;
	margin:0 auto;
}
footer h1 {font-size:2.5vw;margin:0;padding:5px;font-weight:normal;}
footer h2 {font-size:1vw;margin:0;padding:15px 0 10px 0;font-weight:normal;}
footer a{text-decoration:none;color:#ffffff;}
footer a:hover {text-decoration:underline;}

/* レスポンシブ */
@media (max-width: 768px) {
  .global-nav {
    display: none;
  }
  .hamburger-btn {
    display: block;
  }
footer h1 {font-size:15px;margin:0;padding:5px;}
footer h2 {font-size:8px;margin:0;padding:5px;}
}

@media (min-width: 769px) {
  /* PC表示時、ハンバーガーは非表示にして、上でdisplay:block;を打ち消す */
  .hamburger-btn {
    display: none;
  }
}

/* --- ボタン本体の設定（既存のコードと同じ） --- */
#back-to-top-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background: #00a0e9;
  /* color: #008232; ←文字を使わないので削除してもOK */
  border: 1px solid #FFFFFF;
  border-radius: 50%;
  
  /* flexで中央揃え */
  display: flex;
  align-items: center;
  justify-content: center;
  
  cursor: pointer;
  z-index: 10; 
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#back-to-top-btn.visible {
  opacity: 1;
  pointer-events: auto;
}

/* --- ★ここから追加：矢印（くの字）の設定 --- */
.arrow-up {
  display: block;
  width: 12px;       /* 矢印のサイズ（お好みで変更可） */
  height: 12px;
  
  /* 線の設定：ここを太くすると矢印が太くなります */
border-top: 3px solid #FFFFFF;
border-right: 3px solid #FFFFFF; 
  
  /* 45度回転させて上に向ける */
  transform: rotate(-45deg);
  
  /* 微調整：目の錯覚で少し上に寄って見えるのを直す */
  margin-top: 6px; 
}

/* 親要素：グリッド設定 */
dl {
  display: grid;
  /* 左(dt)は幅固定か自動、右(dd)は残り全部(1fr) */
  grid-template-columns:1fr auto; 
	font-size:12px;
	padding:0;
  
  /* 上下左右の隙間を完全に0にする */
  gap: 0; 
  
  /* 必要なら一番上にも線を入れる
  border-top: 1px solid #ccc;  */
  
  /* 余計なマージンを消す */
  margin: 0 0 10px 0;
}

/* 子要素共通：線と余白の設定 */
dl dt, dl dd {
  /* これで下線が引かれます
  border-bottom: 1px solid #ccc; */
  
  /* ブラウザ標準のインデント(margin)をリセット（★重要） */
  margin: 0;
  
  /* 見やすくするための内側の余白 */
  padding:3px 5px;
  
  /* 縦位置を真ん中に揃えたい場合:center */
  display: flex;
  align-items: flex-start;
}

/* タイトル(dt)だけの装飾（任意） */
dl dt {
  /* background-color: #f9f9f9; 背景色をつけると表っぽくなります
  font-weight: bold; */
}
dt {justify-content:flex-end;}

dl.dl-en {
  display: grid;
  /* 左(dt)は幅固定か自動、右(dd)は残り全部(1fr) */
  grid-template-columns:auto 1fr; 
	font-size:12px;
	padding:0;
  
  /* 上下左右の隙間を完全に0にする */
  gap: 0; 
  
  /* 必要なら一番上にも線を入れる
  border-top: 1px solid #ccc;  */
  
  /* 余計なマージンを消す */
  margin: 0 0 10px 0;
}


/* Google Map */

.gmap-wrap {width:100%;padding:0;margin:0 auto;}
.gmap-wrap p{color:#00318b;}
.map-embed{
  aspect-ratio: 4 / 3;  /* 4:3 比率でレスポンシブ対応 */
  width: 100%;
  max-height:350px;
  margin: auto;
}
.map-embed iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* クリックされるまで地図操作を無効化（スクロール優先） */
.map-embed.blocked iframe{
  pointer-events: none;
}

/* aspect-ratio未対応ブラウザ向けフォールバック */
@supports not (aspect-ratio: 1 / 1){
  .map-embed{
    position: relative;
  }
  .map-embed::before{
    content: "";
    display: block;
    padding-top: 56.25%; /* 4:3 */
  }
  .map-embed iframe{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}
.contacts {margin-top:1%;margin-bottom:5%;}
.contact01 {width:96%;height:60px;padding:5px 2%;background:#7fd6f6;display:flex;align-items:center;font-size:1.8em;margin-top:0;margin-bottom:10px;}
.contact01 img {margin:0 10px;}
.contact01 a {width:100%;text-decoration:none;display:flex;align-items:center;color:#333333;}
.contact02 {width:96%;height:60px;padding:5px 2%;background:#eab5d4;display:flex;align-items:center;font-size:1.8em;margin-top:0;margin-bottom:10px;}
.contact02 img {margin:0 10px;}
.contact02 a {width:100%;text-decoration:none;display:flex;align-items:center;color:#333333;}
.contact03 {width:96%;height:60px;padding:5px 2%;background:#d3d4d5;display:flex;align-items:center;margin-top:0;margin-bottom:10px;}
.contact03 img {margin:0 10px;}
.contact03 a {width:100%;text-decoration:none;display:flex;align-items:center;color:#333333;}

.events-green {width:calc(100% - 60px);max-width:740px;background:#e5f6ed;border-radius:20px;padding:20px 30px;margin:20px auto 40px auto;}
.events-green h3 {background:#00a651;margin:0 0 10px 0;padding:10px;color:#FFFFFF;font-size:clamp(1.3em, 2vw, 24px);letter-spacing:2px;}
.events-green p {line-height:130%;}
.events-blue {width:calc(100% - 60px);max-width:740px;background:#e5f7fd;border-radius:20px;padding:20px 30px;margin:20px auto 40px auto;}
.events-blue h3 {background:#00adee;margin:0 0 10px 0;padding:10px;color:#FFFFFF;font-size:clamp(1.3em, 2vw, 24px);letter-spacing:2px;}
.events-blue p {line-height:130%;}
.events-orange {width:calc(100% - 60px);max-width:740px;background:#feeeee;border-radius:20px;padding:20px 30px;margin:20px auto 40px auto;}
.events-orange h3 {background:#f15757;margin:0 0 10px 0;padding:10px;color:#FFFFFF;font-size:clamp(1.3em, 2vw, 24px);letter-spacing:2px;}
.events-orange p {line-height:130%;}
@media (max-width: 768px) {
	.events-green h3, .events-blue h3, .events-orange h3 {font-size:15px;}
	.events-green, .events-blue, .events-orange {width:calc(96% - 40px);padding:20px 20px;}
	.events-green h3, .events-blue h3, .events-orange h3 {letter-spacing:0;}
}

/*wp-pagenavi base*/
.wp-pagenavi {
	clear: both;
	text-align:center;

}
.wp-pagenavi a, .wp-pagenavi span {
	color: #333333;
	background-color: #FFF;
	border: solid 1px #f8d3e2;
	padding: 8px 15px;
	margin: 0 2px;
	white-space: nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	text-align: center;
	text-decoration:none;
}
.wp-pagenavi a:hover{
    color:#333333; 
    background-color:#f8d3e2; 
    border-color:#f8d3e2;
    }
.wp-pagenavi span.current{
	color: #333333;
	background-color: #f8d3e2;
	border-color: #f8d3e2;
	font-weight: bold;
    }

/* 全体の余白調整 */
.video-wrapper {
  max-width: 800px; /* 動画の最大幅（お好みで調整） */
  margin: 0 auto;   /* 中央寄せ */
  padding: 20px;
}

/* 動画のコンテナ（16:9を維持する設定） */
.video-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 の比率 (9 / 16 = 0.5625) */
  margin-bottom: 20px; /* 動画と動画の間の隙間 */
}

/* iframeをコンテナいっぱいに広げる */
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}