@charset "UTF-8";
/*
Author: 株式会社メックコミュニケーションズ
Author URI: http://www.mec-com.co.jp
*/


/*  CSS Index
--------------------------------------------------------------
ヘッダーのロゴは縦の長さで横幅を自動調整します。
比率に注意してください。
--------------------------------------------------------------
@media print, screen and (min-width: 768px) {pc/print}
@media screen and (max-width: 767px) {sp}
1 : base
 	  : body
 	  : frame(max-width:1200px)
 	  	  : frame.sp0
 	  : clearfix
 	  : accordion
 	  : pc/sp
2 : header
 	  : pc(media min-width:1200px)
 	  	  : header_logo(pc)
 	  	  : header_nav_btn(pc)
 	  	  : globalnav_btn(pc)
 	  	  : globalnav(pc)
 	  	  	  : acc_btn(pc)
 	  	  : header_search(pc)
 	  : sp(media min-width:1199px)
 	  	  : header_logo(sp)
 	  	  : header_nav_btn(sp)
 	  	  : globalnav_btn(sp)
 	  	  : globalnav(sp)
 	  	  	  : acc_btn(sp)
 	  	  : header_search(sp)
3 : main
	  : mainimg
	  : pagetitle
 	  : path
 	  : pager
4 : single
5 : access_map
6 : footer
 	  : footer_nav
 	  : footer_logo
 	  : footer_data
 	  : pagetop
 	  : copyright
7 : print
-----------------------------------------------------------------------------------------*/


/*base
-----------------------------------------------------------------------------------------*/
*{
	margin: 0; 
	padding: 0; 
	list-style-type: none; 
	font-weight: 400;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
html{
	height:100%;
	font-size:10px;
}
body{
	color:#000;
	text-align:center;
	font-size:1.8rem;
	line-height:1.5;
	height:100%;
	min-width:375px;
	-webkit-text-size-adjust:none;
}
body {
  font-family: "Zen Kaku Gothic New", "Inter", sans-serif;
  font-weight: 500;
   -webkit-text-size-adjust: 100%;
   overflow-wrap: break-word;
   word-wrap: break-word
}
body * {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   box-sizing: border-box;
}
ruby{
	ruby-position:under; 
}
ruby rt{
	margin:5px 0;
	letter-spacing:1px;
}
img{
	border-width: 0px;
	vertical-align: bottom;
	max-width: 100%;
	height: auto;
	width :auto;
}
* html img{
	border-width: 0px;
	vertical-align: top;
	padding:-1px;
}
*:first-child+html img {
	border-width: 0px;
	vertical-align: middle;
	padding:-1px;
}
h1,h2,h3,h4,h5,h6,p,ul,dl,input,table,figure,ol,.dot{
	font-size:1.8rem;
	line-height:1.6;
	margin:0;
}
/*日時など*/
time{
  font-family: "Zen Kaku Gothic New", sans-serif;
}
@media screen and (max-width: 767px) {h1,h2,h3,h4,h5,h6,p,ul,dl,input,table,figure,ol,.dot{font-size:1.7rem;}}
ul > li,
dl > dt,
dl > dd{
	font-size:inherit
}
span{
	font-weight:inherit;
	display:inline-block;
	text-decoration:inherit;
}
em{
	font-weight:700;
	font-style:inherit;
	color:var(--color_notice);
}
strong{
	font-weight:700;
}
a{
	color:inherit;
	font-weight:inherit;
	text-decoration: none;
	outline:none;
	-webkit-text-decoration-skip: none;
}
a:hover {
	text-decoration: none;
	outline:none;
}
a:link,a:visited,a:hover,a:active {
	outline:none;
}
hr{
	border:none;
	border-bottom:1px solid rgba(0,0,0,0.2);
	margin:70px 0;
}
@media screen and (max-width: 767px) {hr{margin:30px 0;}}
#wrapper{
	width:100%;
	min-height:100vh;
	display:flex;
	flex-direction:column;
}
/*-------------------------frame*/
.frame{
	max-width:1240px;
	margin:0 auto;
	text-align:left;
	position:relative;
	padding:0 30px;
}
@media screen and (max-width: 767px) {
.frame{padding:0 16px;}
.frame.sp0{padding:0;}
}
/*-------------------------clearfix*/
.clearfix::after{
	display: block;
	clear: both;
	content: "";
}
/*-------------------------accordion*/
@media print, screen and (max-width: 1199px) {
	.accordion{
		display:none;
	}
}
.accordion.open{
	display:block;
}
.acc_btn{
	cursor:pointer;
}
/*-------------------------pc/sp*/
@media screen and (max-width: 767px) {#wrapper .pc{display:none;}}
@media print, screen and (min-width: 768px) {#wrapper .sp{display:none;}}



/*header
-----------------------------------------------------------------------------------------*/
#wrapper{
	padding-top:var(--hh);
}
/*ヘッダーの高さ*/
@media print, screen and (min-width: 1200px) {#wrapper{--hh:130px;}}
@media screen and (max-width: 1199px) {#wrapper{--hh:90px;}}
@media screen and (max-width: 767px) {#wrapper{--hh:70px;}}
header{
	z-index:1000;
	width:100%;
	text-align:center;
	max-width:100%;
	min-width:375px;
	position:fixed;
	top:0;
	height:var(--hh);
	transition:all 0.3s;
}

@media print, screen and (min-width: 1200px) {
	header{
		background:rgb(255,255,255,0.8);
		backdrop-filter: blur(5px);
	}
	#wrapper.scroll header{
	box-shadow: 0 0 5px rgba(0,0,0,0.1);
	 }
}

/*----------------------------------------------------------------------------------------pc*/
@media print, screen and (min-width: 1200px) {
#wrapper.scroll header {
	top:-50px;
	transition: top 0.4s ease; /* スムーズに移動 */
}

/* ロゴは相殺しない → 相対的にtransformで位置調整 */
  #wrapper.scroll .header_logo {
    transform: translateY(50px);
    transition: transform 0.4s ease; /* 上下移動を滑らかに */
  }

.header_logo {
	position: relative;
	width:250px;
	height:180px;
	top: 0; /* スマホ・タブレットは常に上から表示 */
}


.header_logo_bg {
	position:absolute;
	inset:0;
	background-color: var(--color_mido);
	border-bottom-right-radius:50px;
	box-shadow: 0 4px 8px rgba(0,0,0,0.15);
	z-index:0; /* 背景は装飾用、クリックしない */
	pointer-events: none; /* 背景はクリック無効 */
}

.header_logo a{
	width:250px;
	height:180px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	gap:12px 8px;
	background-color: var(--color_mido);
	border-bottom-right-radius:50px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* 下方向に柔らかい影 */
  	transition: box-shadow 0.3s ease; /* ホバー時の変化もスムーズに */
	padding-bottom:5px;
}
.header_logo a img {
	transition: transform 0.3s ease; /* 拡大をスムーズに */
	z-index:999;
	position:relative;
}
.header_logo a:hover img {
  transform: scale(1.1);   /* 10%拡大 */
}

/*-------------------------sp*/
@media screen and (max-width: 999px) {
	.header_logo a{
		position:absolute;
		left:0;
		top:0;
		width:min(52.5vw, 220px);
		height:75px;
		flex-direction:row;
		padding:0 5px 0 0;
		border-bottom-right-radius:30px;
	}
	.header_logo img{
		width:50px;
	}
	.header_logo img + img{
		width:115px;
	}
	#wrapper.scroll .header_logo{
		display:none;
	}
}
/*-------------------------header_tel(pc)*/
.header_tel{
	display:none;
}
/*-------------------------globalnav_btn(pc)*/
.globalnav_btn{
	display:none;
}
/*------------------------- globalnav (PC) -------------------------*/
.globalnav {
	display: block;
	position: absolute;
	top: 50px;
	right: 40px;
	padding-left: 300px;
	max-width: 1200px;
	width: 100%;
	z-index:-1;
}

/* nav ul 横並び */
.globalnav nav > ul {
	display: flex;
	text-align: center;
}

/* li に relative を指定して子 ul.accordion の位置基準に */
.globalnav nav > ul > li {
	position: relative;
	flex: 1 0 auto;
}

/* メニューリンク */
.globalnav nav > ul > li > a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80px;
	font-size: 18px;
	line-height: 1.25;
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 500;
	position: relative;
	text-align: center;
}

/* ホバー時の矢印表示 */
.globalnav nav > ul > li > a:after {
	content: "";
	display: block;
	position: absolute;
	bottom: 3px;
	left: 50%;
	margin-left: -5px;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--color_mido);
	border-bottom: 2px solid var(--color_mido);
	transform: rotate(45deg) scale(0);
	transition: all 0.25s;
}
.globalnav nav > ul > li:hover > a:after,
.globalnav nav > ul > li:hover > a.current:after {
	transform: rotate(45deg) scale(1);
	bottom: 10px;
}

/*------------------------- アコーディオン -------------------------*/
.globalnav nav ul.accordion {
	position: absolute;
	top: 100%;           /* li の下に表示 */
	left: 50%;
	transform: translateX(-50%); /* 幅の半分だけ左にずらす */
	width: auto;
	/* min-width: 200px;        必要に応じて調整 */
	width:240px;
	white-space: nowrap;
	background: var(--color_mido);
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.25s ease;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* 下方向に柔らかい影 */
	z-index: 999;
}

/* 子 li のリンク */
.globalnav nav ul.accordion li a {
	display: block;
	padding: 10px 20px;
	font-size: 18px;
	height: 50px;
	color: #fff;
	text-decoration: none;
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 500;
	text-align: left;
}

/* ホバー・現在ページ時の色 */
.globalnav nav ul.accordion li a:hover,
.globalnav nav ul.accordion li a.current {
	background: var(--color_mido2);
}

/* ホバー時に展開 */
.globalnav nav > ul > li:hover > ul.accordion {
	max-height: 500px;  /* 実際の高さに合わせて調整 */
}

.globalnav nav ul .acc_btn{
	display: inline;
}

/*-------------------------header_sublink(pc)*/
.header_sublink{
	position:absolute;
	top:-30px;
	right:380px;
	width:900px;
	display:flex;
	justify-content:end;
	gap:15px;
	color:var(--color_mido);
}
.header_sublink p a{
	line-height:40px;
	font-size:16px;
}
.header_sublink p a:hover{
	text-decoration:underline;
}
.header_sublink p a::before{
	content:"";
	display:inline-block;
	width:0.8em;
	height:0.8em;
	margin-right:0.3em;
	border-radius:1em;
	background:var(--color_ao);
	position:static;
}

/*-------------------------header_toi(pc)*/
.header_yoyaku{
	position:absolute;
	top:-40px;
	right:0px;
}
.header_yoyaku a{
	font-weight:bold;
	height:40px;
	font-size:16px;
	color:#FFF;
	border-radius:20px;
	transition: all 0.3s;
	background:var(--color_mido);
	width:180px;
}
/*-------------------------header_access(pc)*/
.header_access{
	position:absolute;
	top:-40px;
	right:190px;
}
.header_access a{
	font-weight:bold;
	height:40px;
	font-size:16px;
	color:var(--color_mido);
	border-radius:20px;
	transition: all 0.3s;
	background:#fff;
	width:180px;
}
}
/*----------------------------------------------------------------------------------------sp*/
@media screen and (max-width: 1199px) {

/*-------------------------header_logo(sp)*/
.header_logo a{
	position:absolute;
	left:0;
	top:0;
	width:min(52.5vw, 220px);
	flex-direction:row;
	padding:0 5px 0 0;
	border-bottom-right-radius:30px;
	background-color: var(--color_mido);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* 下方向に柔らかい影 */
  	transition: box-shadow 0.3s ease; /* ホバー時の変化もスムーズに */
}

/*#wrapper.scroll .header_logo{
	display:none;
}*/

/* a を「箱」として中央寄せにする（幅は auto のまま） */
.header_logo a {
	display: flex;
	align-items: center;
	justify-content: center;

	/* transform を a にかける（幅指定はしない） */
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.6, 1);
	transform-origin: left top; /* 左上固定（縮めても左上位置が変わらない） */
	will-change: transform;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateZ(0); /* GPU に投げて滑らかに */
	transform: translateZ(0);
}

/* 画像は a の中央に配置・レスポンシブに */
.header_logo img {
	display: block;
	max-width: 100%;
	height: auto;
	/* img に transform を付けない（親 a を縮小するので二重縮小を避ける） */
}

/* スクロール時（拡縮） — a を縮めるだけ */
#wrapper.scroll .header_logo a {
	transform: scale(0.5); /* 縮小サイズ指定 */
}

/* タブレット (768px〜1199px) */
@media screen and (min-width: 768px) and (max-width: 1199px) {
	#wrapper.scroll .header_logo a {
	transform: scale(0.6); /* 縮小サイズ指定 */
	}
}


/*-------------------------header_tel(sp)*/
.header_tel a{
	position:absolute;
	right:var(--hh);
	top:0;
	width:var(--hh);
	height:var(--hh);
	display:flex;
	justify-content:center;
	align-items:center;
	border-left:1px solid var(--color_ao);
}
.header_tel a img{
	min-width:33%;
}
.header_tel a span{
	display:none;
}
/*-------------------------globalnav_btn(sp)*/
.globalnav_btn{
	position:absolute;
	right:0;
	top:0;
	width:var(--hh);
	height:var(--hh);
	z-index:1000;
	background:#333333;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:10%;
	padding-top: 4px; /* 全体を下げる */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* 下方向に柔らかい影 */
}
.globalnav_btn span{
	content:"";
	display:block;
	width:40%;
	height:2px;
	background:#FFF;
	transition: all 0.4s;
}
.globalnav_btn.open span:nth-child(1){
	position:absolute;
	transform:rotate(-45deg);
}
.globalnav_btn.open span:nth-child(2){
	position:absolute;
	transform:translateX(100px);
}
.globalnav_btn.open span:nth-child(3){
	position:absolute;
	transform:rotate(45deg);
}
/*-------------------------globalnav(sp)*/
.globalnav{
	padding:10px 20px;
	height:calc(100vh - var(--hh));
	overflow:auto;
	background:#333333;
	position:relative;
	/*top:var(--hh);*/
	top: 43px;
}

/* タブレット (768px〜1199px) */
@media screen and (min-width: 768px) and (max-width: 1199px) {
	.globalnav {
		top: 61px; /* ハンバーガー下にぴったり */
	}
}

.globalnav nav,
.header_search,
.header_sublink{
	max-width:600px;
	min-width:335px;
	margin:10px auto;
}
#wrapper .globalnav nav .sp{
	display:block;
}
.globalnav nav > ul > li{
	position:relative;
	border-bottom:1px solid #FFF;
}
.globalnav nav ul li a{
	font-size:18px;
	font-weight:500;
	height:50px;
	display:flex;
	align-items:center;
	color:#FFF;
	font-family: "Zen Maru Gothic", sans-serif;
}
/*acc_btn(sp)*/
.globalnav nav .acc_btn{
	width:100%;
	height:50px;
	position:absolute;
	right:0;
	top:0;
	display:flex;
	align-items:center;
}
.globalnav nav .acc_btn::after{
	content:"";
	width:0.5em;
	height:0.5em;
	border-top:2px solid #FFF;
	border-left:2px solid #FFF;
	margin-left:auto;
	margin-right:5px;
	transform:rotate(-135deg);
	transition: all 0.4s;
}
.globalnav nav .acc_btn.open::after,
.globalnav nav ul li a.current + p.acc_btn::after{
	transform:rotate(45deg);
}
.globalnav nav ul li a.current + p.acc_btn.open::after{
	transform:rotate(-135deg);
}
/*accordion(sp)*/
#wrapper .globalnav nav ul li a.current + p + .accordion{
	display:block;
}
.globalnav nav .accordion{
	/*background:var(--color_mido3);*/
	background-color: #fff;
	padding:0.4em 0.8em;
}

/* PC以外は非表示にしたい場合はメディアクエリで制御 */
.globalnav nav ul.accordion {
	position: static;
	width: 100%;
	max-height: none;
	display: none; /* JSで開閉 */
}

.globalnav nav .accordion a{
	color:#333;
	font-size:1.7rem;
}
.globalnav nav .accordion li + li{
	border-top:1px dashed var(--color_mido);
}
.globalnav nav .section li.subtitle{
	background:var(--color_ao);
	color:#FFF;
	font-size:14px;
	font-weight:bold;
	padding:0.25em;
	margin-top:0.4em;
}
.globalnav nav .section li.subtitle + li{
	border:none;
}

/* 閉じているとき（デフォルト）はMENUを表示 */
.globalnav_btn::after {
	content: "MENU";
	font-size: 12px;
	color: #fff;
	margin-top: 2px;
	letter-spacing: 1px;
	display: block;
	text-align: center;
}

/* 開いているときは非表示 */
.globalnav_btn.open::after {
	content: "";
}

/*-------------------------header_sublink(sp)*/
.header_sublink{
	display:flex;
	gap:5px;
	margin-top:15px;
	color: #fff;
	justify-content: center;
}
.header_sublink p{
	width:100%;
}
.header_sublink p a{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	height:50px;
	font-size:16px;
	border-radius:25px;
	font-weight:bold;
	color:#000;
	background:#FFF;
}
.header_sublink p a span{
	font-size:80%;
	padding:0;
}
@media screen and (max-width: 400px) {
.header_sublink{gap:3px;}
.header_sublink p a{font-size:14px;}
}

/*-------------------------header_toi(sp)*/
.header_toi{
	display:flex;
	justify-content: center;
	margin-top: 20px;
	gap: 20px;
}

/*-------------------------header_yoyaku(sp)*/
.header_yoyaku a{
	font-weight:bold;
	height:40px;
	font-size:16px;
	color:#FFF;
	border-radius:20px;
	transition: all 0.3s;
	background:var(--color_mido);
	width:150px;
}
/*-------------------------header_access(sp)*/
.header_access a{
	font-weight:bold;
	height:40px;
	font-size:16px;
	color:var(--color_mido);
	border-radius:20px;
	transition: all 0.3s;
	background:#fff;
	width:150px;
}
}

/*footer
-----------------------------------------------------------------------------------------*/
footer{
	position:relative;
	margin-top:auto;
	display:flex;
	flex-direction:column;
}

/*-------------------------pagetop*/
.pagetop a{
  position: fixed;
  right: 0;
  z-index: 20;
  width: 90px;
  height: 90px;
  font-size: 18px;
  font-weight: bold;
  color: var(--color_mido);
  background: rgba(230,230,230,0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 5px;
  /* ここだけ変更：CSS変数で下余白を制御（PC/タブレット用） */
  bottom: var(--pt-bottom, 0);

  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.pagetop a::before{
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  border: 2px solid var(--color_mido);
  border-right: none;
  border-bottom: none;
  transform: rotate(45deg);
}
.pagetop a:hover{
  background: var(--color_mido2);
  color: #FFF;
}
.pagetop a:hover::before{ border-color: #FFF; }
.pagetop a:active{
  background: var(--color_mido2);
  color: #FFF;
}
.pagetop a:active::before{ border-color: #FFF; }

/* ---- 旧 .pagetop.bottom の固定値は不要（残しても無効化されるので削除推奨） */

/*-------------------------スマホ用調整*/
@media screen and (max-width: 767px) {
  .pagetop a{
    width: 60px;
    height: 60px;
    font-size: 13px;
    padding-top: 3px;
    /* スマホは従来通り固定値でOK（フッター追従しない） */
    bottom: 57px;
  }
  .pagetop a::before{
    width: 6px;
    height: 6px;
  }
}

/*-------------------------footer_nav*/
.footer_nav{
	padding-top:30px;
	padding-bottom:25px;
	padding-left:20px;
	padding-right:20px;
	width:100%;
	background-color: var(--color_mido);
}
.footer_nav h2,
.footer_nav li{
	display:block;
	font-size:1.6rem;
	text-align: left;
}
.footer_nav h2 a:hover,
.footer_nav li a:hover{
	text-decoration:underline;
}

.path a::after{
	content:">";
	display:inline-block;
	padding:0 0.5em 0.1em 0.5em;
	vertical-align:0.1em;
}


/*siteinfo*/
.siteinfo{
	margin-top:1.5em;
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
	.footer_nav{height:170px;}
}
@media screen and (max-width: 767px) {
	.footer_nav{padding-bottom:70px;}
}


/*-------------------------footer_sns*/
.footer_sns{
	display:flex;
	justify-content:center;
	align-items:center;
	gap:20px;
	margin-top:auto;
}
/*-------------------------footer_data*/
.footer_data{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	padding:20px;
	font-size:1.6rem;
	line-height:1.875;
	gap:0 1em;
}
.footer_data strong{
	font-size:2rem;
	font-weight:500;
	width:100%;
}
/*-------------------------copyright*/
.copyright{
	font-size:13px;
	display:block;
	/*line-height:40px;*/
	color:#FFF;
	background:var(--color_mido);
	padding-top:10px;
	text-align:left;
}
@media screen and (max-width: 767px) {
	.copyright{font-size:12px;}
}

/*-------------------------footer_grid*/
.footer_grid {
	display: grid;
	align-items: start;
	/* PCデフォルト: 2列、3行のグリッドを作る（行高さは自動） */
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto 1fr auto;
	grid-template-areas:
	"a b"
	". b"
	"c b";
}

/* 各要素をグリッドエリアに配置 */
.a { grid-area: a; }
.b { grid-area: b; align-self: center; /* Bを縦方向中央に */ }
.c { grid-area: c; }

/* 見た目の調整（任意）*/
/*.footer_grid_item {
  padding: 16px;
}*/

/* スマホ（小さめ画面）では1カラムの縦並びにする */
@media screen and (max-width: 599px) {
	.footer_grid {
	grid-template-columns: 1fr;
	grid-template-rows: auto auto auto;
	grid-template-areas:
		"a"
		"b"
		"c";
	}
	/* スマホ時はBの縦中央揃えを解除（必要なら継続できます） */
	.b { align-self: stretch; }
}

.footer_grid ul{
	column-gap: 20px;
}

.footer_grid ul li {
	font-weight: 500;
}

/*main
-----------------------------------------------------------------------------------------*/
main{
	display:block;
	position:relative;
	z-index:0;
	width:100%;
	overflow:hidden;
	min-height:calc(100vh - var(--fh) - 60px);
	padding-bottom: min(70px, 10vw);
}


/*-------------------------メイン画像エリア全体*/
.mainimg_area {
	position: relative; /* 絶対配置の基準 */
	overflow: visible; /* これでアコーディオンがはみ出しても見える */
	background: linear-gradient(to bottom,
		transparent 200px,
		var(--color_mido3) 200px
	);
}
/* mainimg_area の下中央に三角形を追加 */
.mainimg_area::after {
	content: "";
	position: absolute;
	bottom: -30px; /* 三角形の高さ分だけ下にずらす */
	left: 50%;
	transform: translateX(-50%);
	border-left: 30px solid transparent;   /* 三角形の左右幅 */
	border-right: 30px solid transparent;  /* 三角形の左右幅 */
	border-top: 30px solid var(--color_mido3); /* 上向きの線で下向き三角形 */
	width: 0;
	height: 0;
}
/*-------------------------メイン画像*/
.mainimg {
	position: relative; /* catchcopy用の親要素 */
	padding: 0 40px;
}

/* タブレット（768px〜1199px） */
@media screen and (min-width: 768px) and (max-width: 1199px) {
	.mainimg{padding: 10px 40px 0;}
}

/* スマホ（767px以下） */
@media screen and (max-width: 767px) {
	.mainimg{padding: 10px 20px 0;}
}

.mainimg > picture > img {
	border-radius: 30px;
	display: block;
	width: 100%;
	height: auto;       /* 縦横比を維持 */
	max-height: 600px; /* 高さの最大値を指定 */
	object-fit: cover;  /* はみ出す場合は切り抜き、比率は維持 */
}

/*-------------------------キャッチコピー*/
.catchcopy {
	position: absolute;
	top: 50%;
	left: 100px;
	transform: translateY(-50%);
	color: #fff;
	line-height: 1.4;
	max-width: 70%;
	z-index: 2;
	display: block;           /* ブロック表示にする */
	white-space: normal;      /* <br>を有効にする */
	text-align: left;         /* 左寄せ */
	/* 文字の影を追加 */
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
/* PC（1000px以上） */
@media screen and (min-width: 1000px) {
	.catchcopy {
		font-size: 50px;
	}
}
/* タブレット（768px〜999px） */
@media screen and (min-width: 768px) and (max-width: 999px) {
	.catchcopy {
		font-size: 32px; /* タブレット用のサイズ */
		left: 50px;      /* 必要に応じて位置調整 */
	}
}
/* スマホ（767px以下） */
@media screen and (max-width: 767px) {
	.catchcopy {
		font-size: 26px;
		left: 40px; /* スマホ用の位置調整 */
	}
}

/*-------------------------pagetitle*/
.pagetitle {
	position: relative;
	padding: 0 40px;
	/* 画像とh1を同じセルに重ねて、h1の横幅＝画像幅に揃える */
	display: grid;
}
.pagetitle > * {grid-area: 1 / 1;}

/* figure を基準にしてオーバーレイを重ねる */
.pagetitle > figure {
	position: relative; /* オーバーレイの基準 */
	display: block;
}

/* 画像の上にオーバーレイ */
.pagetitle > figure::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.35); /* 暗さの調整 */
	border-radius: 30px; /* img と同じ角丸に */
	z-index: 1;
}
/* スマホ（767px以下） */
@media screen and (max-width: 767px) {
	.pagetitle > figure::after {border-radius: 20px;}
}

/* ===== タイトル：画像内に重ね、長いときは自然に折り返す ===== */
.pagetitle h1 {
	/* 絶対配置はやめて、Gridで中央寄せにする */
	position: relative;
	place-self: center;         /* 画像の中央（PC） */
	z-index: 2;
	margin: 0;
	padding: clamp(24px, 4vw, 56px) clamp(22%, 10vw, 28%);
	box-sizing: border-box;

	/* 幅を画像と揃える＆折り返し強化 */
	width: 100%;
	max-width: 100%;
	white-space: normal;        /* ← nowrap を解除 */
	overflow-wrap: anywhere;    /* 英数長語も折り返し */
	word-break: normal;
	line-break: strict;         /* 和文の禁則処理 */
	hyphens: auto;

	/* 見た目 */
	color: #fff;
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 500;
	font-size: clamp(22px, 2.2vw + 8px, 40px);
	line-height: 1.3;
	letter-spacing: 0.15em;
	text-align: center;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

/* タブレット（768px〜1199px） */
@media screen and (min-width: 768px) and (max-width: 1199px) {
	.pagetitle {padding: 10px 30px 0;}
	.pagetitle h1 {font-size: 28px; padding:clamp(20px, 3.5vw, 44px) clamp(12%, 6vw, 18%);}
	
}

/* スマホ（767px以下） */
@media screen and (max-width: 767px) {
	.pagetitle { padding: 10px 16px 0; }
	.pagetitle h1{
		/* 右下寄せに配置（文量が多くても画像幅内で折り返す） */
		place-self: end end;
		text-align: right;
		padding-right: 20px;
		font-size: 18px;
		padding: clamp(12px, 3.5vw, 24px) clamp(16px, 4vw, 32px);

		/* 行数が多くなりすぎる場合は下の line-clamp を有効化（任意） */
		/* display: -webkit-box;
		   -webkit-line-clamp: 3;     // 2〜3に調整可
		   -webkit-box-orient: vertical;
		   overflow: hidden; */
	}
}

.pagetitle > figure > img {
	border-radius: 30px;
	display: block;
	width: 100%;
	height: 300px;
	max-height: 1320px;   /* 高さの最大値を指定 */
	object-fit: cover;    /* はみ出す場合は切り抜き、比率は維持 */
}

/* タブレット（768px〜1199px） */
@media screen and (min-width: 768px) and (max-width: 1199px) {
	.pagetitle > figure > img {height: 230px;}
}

/* スマホ（767px以下） */
@media screen and (max-width: 767px) {
	.pagetitle > figure > img{
		border-radius: 20px;
		width: auto;
		height: 130px;
	}
}

/* ----（任意）PCでも行数を制限したい場合は追加 ----
.pagetitle h1 {
  display: -webkit-box;
  -webkit-line-clamp: 2;   // 好みで2〜3
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@supports (line-clamp: 2) {
  .pagetitle h1 {
    display: block;
    line-clamp: 2;
    block-overflow: ellipsis;
    overflow: hidden;
  }
}
*/


/*-------------------------pageimg*/
.pageimg{
	width:100%;
	height:100px;
	overflow:hidden;
}
@media print, screen and (min-width: 768px) {
	.pageimg img{width:102%;height:auto;margin-top:-10px;-ms-filter: blur(1px);filter: blur(1px);}
}

@media screen and (max-width: 767px) {
	.pageimg{height:70px;}
	.pageimg img{width:100%;height:100%;object-fit:cover;}
}

/*-------------------------path*/
.path p{
	font-size:1.4rem;
	text-align:left;
	word-spacing:3px;
	font-weight:300;
	padding:10px 10px 10px 50px;
	/*background:rgba(0,0,0,0.05)*/
	margin-bottom:50px;
}
.path p strong{
	font-weight:inherit;
}
.path p a:hover{
	text-decoration:underline;
}

/* タブレット（768px〜1199px） */
@media screen and (min-width: 768px) and (max-width: 1199px) {
	.path p{padding:10px 20px 10px 30px;}
}

@media screen and (max-width: 767px) {
	.path p{font-size:1.2rem;padding:10px 20px;margin-bottom:10px;}
}
/*-------------------------layout*/
.layout{
	display:flex;
	gap:40px;
	flex-direction: row-reverse;
}
/*contents*/
.contents{
	width:100%;
}

/*sidebar*/
.sidebar{
	flex-shrink:0;
	width:250px;
}
@media screen and (max-width: 1000px) {
	.layout{flex-wrap:wrap;}
	.sidebar{width:100%;}
}
/*-------------------------sidebar*/
.sidebar nav h2{
	background:var(--color_mido);
	padding:1em 0;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	border-radius: 20px 20px 0px 0px;
	font-weight: 500;
	color: #fff;
}
.sidebar h2 + ul{
	margin-top:1px;
}
.sidebar h2 + ul > li:first-child > a{
	border-top:none;
}
.sidebar nav li a{
	padding:1em 0 1em 1.3em;
	line-height:1.25;
	display:block;
	position:relative;
	font-weight:normal;
	border-top:1px solid #CCC;
}
.sidebar nav li a::before{
	content:"";
	display:inline-block;
	width:0.4em;
	height:0.4em;
	border-radius:1em;
	background:var(--color_mido);
	position:absolute;
	top:1.4em;
	left:0.5em;
	opacity:0.6;
}
.sidebar nav li a.current{
	background:#F3F3F3;
}
.sidebar nav li a.non{
	background:none;
}
.sidebar nav li a:hover{
	background:#F3F3F3;
}
.sidebar nav li a.current::before{
	opacity:1;
}
/*children*/
.sidebar .children{
	display:none;
}
.sidebar .current_page_item .children,
.sidebar .current_page_parent .children{
	display:block;
}
.sidebar .children li{
	margin-left:0.7em;
}
.sidebar .children li a:before{
	display:none;
}
.sidebar .children li a{
	padding-left:0.5em;
}
/*category*/
.sidebar .category{
}
.sidebar .category h3{
	position:relative;
	padding:0.5em 0;
	font-weight:bold;
}
.sidebar nav h3 + ul li a{
	border-top:1px dashed #CCC;
}
.sidebar nav h3 + ul li a{
	padding:1em 0;
}
.sidebar nav h3 + ul li.empty{
	font-weight:normal;
	margin-top:-0.5em;
	padding-bottom:1em;
	color:#666;
	font-size:1.2rem;
}
.sidebar nav h3 + ul li a::before{
	display:none;
}
/*-------------------------article*/
article + article{
	margin-top:100px;
}
@media screen and (max-width: 767px) {
	article + article{margin-top:50px}
}
/*-------------------------pager*/
.pager{
	margin-top:30px;
	text-align:center;
}
.pager p{
	color:#555;
	font-size:1.4rem;
	margin-bottom:3px;
}
.pager li{
	display:inline-block;
}
.pager li a,
.pager li span{
	display:block;
	background:rgba(0,0,0,0.1);
	width:4rem;
	font-size:1.6rem;
	line-height:4rem;
	text-align:center;
	margin:2px;
	text-decoration:none;
	border-radius:5px;
}
.pager li span{
	color:#FFF;
	background:var(--color_mido);
}
.pager li span.dots{
	background:none;
	color:#4D4D4D;
	width:auto;
	padding:0;
}
.pager li a:hover{
	background-color:#CCCCCC;
}

/*single
-----------------------------------------------------------------------------------------*/
.single{
	position:relative;
}
/*@media print, screen and (min-width: 768px) {
	.single{border:1px solid #BDBDBD;padding:50px;}
}*/
/*-------------------------single_data*/
.single_data{
	font-size:1.6rem;
	display:flex;
	align-items:center;
	gap:1em;
}
.single_data time{
	font-weight:bold;
}
.single_data a{
	font-weight:bold;
	/*width:7em;*/
	text-align:center;
	border-radius:10em;
	flex-shrink:0;
	color:var(--color_link);
	font-family: "Zen Kaku Gothic New", sans-serif;
}
.single_data a:hover{
	/*filter:brightness(75%);*/
	text-decoration:underline;
	text-decoration-thickness: 1px;          /* 下線の太さを指定 */
}
/*-------------------------single_title*/
.single_title{
	font-weight:bold;
	font-size:2.4rem;
	color:#000;
	padding:1em 0;
	border-bottom:1px solid #BDBDBD;
	margin-bottom:1.5em
}
/*-------------------------single_kiji*/
.single_kiji p{
}
/*見出し1*/
.single_kiji h2{
	font-weight:bold;
	background:var(--color_mido);
	color:#FFF;
	padding:0.2em 0.5em;
	margin-top:1.5em;
	margin-bottom:0.5em;
	font-size:2.2rem;
}
/*見出し2*/
.single_kiji h3{
	font-size:2.2rem;
	font-weight:bold;
	margin-top:1.5em;
	margin-bottom:0.5em;
	border-left:0.3em solid var(--tx_bar);
	padding-left:0.5em;
	margin-bottom:0.5em;
}
/*見出し3*/
.single_kiji h4{
	font-weight:bold;
	color:var(--color_mido);
	margin-top:1.5em;
	border-bottom:1px solid #666;
	padding-bottom:0.3em;
	margin-bottom:0.5em;
	font-size:2.1rem;
}
/*見出し3*/
.single_kiji h5{
	margin-top:10px;
}
/*番号なしリスト*/
.single_kiji ul li{
	font-size:inherit;
	margin-left:1em;
}
.single_kiji ul li:before{ 
	margin-left:-1em;
	display:inline-block; 
	content:'';
	width:1em;
	height:1em;
	background:rgba(0,0,0,1);
	border-radius:50%;
	transform:scale(0.6) translateY(0.3em);
}
.single_kiji ul > li + li{margin-top:0.25em;}


/*access_map
-----------------------------------------------------------------------------------------*/
.access_map{
	margin-top:auto;
	display:flex;
	background:var(--color_mido);
	color:#FFF;
}
.access_map .googlemap iframe{
	height:400px;
}
@media screen and (max-width: 767px) {
	.access_map{flex-direction:column;justify-content:center;height:auto;}
	.googlemap iframe{height:299px;}
}
.access_map .dtbox dt{
	outline:1px solid #FFF;
	border-radius:10em;
}
.access_map .textbox{
	min-width:30vw;
	text-align:left;
}
/*footerとの間は0*/
.access_map + footer{
	margin-top:0;
}