@charset "utf-8";



/*リセットCSS（sanitize.css）の読み込み
---------------------------------------------------------------------------*/
@import url("https://unpkg.com/sanitize.css");

/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");

/*slick.cssの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css");



/*テーマカラーの定義（CSS変数）
ここのカラーコードを変更するだけで、テンプレートのテーマカラーが変わります。
---------------------------------------------------------------------------*/
:root {
    --primary-color: #ff7676;
}


/*全体の設定
---------------------------------------------------------------------------*/
html,body {
	height: 100%;
	font-size: 13px;	/*基準となるフォントサイズ。*/
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	html, body {
		font-size: 16px;	/*基準となるフォントサイズ。*/
	}

	}/*追加指定ここまで*/


body {
	font-family: "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	-webkit-text-size-adjust: none;
  color: #444;
  background: #fff7f7;
	line-height: 2.5;		/*行間*/
}




/*リセット*/
figure {margin: 0;}
dd {margin: 0;}
nav {margin: 0;padding: 0;}

/*table全般の設定*/
table {border-collapse:collapse;}

/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

/*videoタグ*/
video {max-width: 100%;}

/*iframeタグ*/
iframe {width: 100%;}

/*他*/
input {font-size: 1rem;}
section + section {
	margin-top: 3rem;
}


/*opa1のキーフレーム設定
---------------------------------------------------------------------------*/
@keyframes opa1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}


/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: white;		/*文字色*/
	transition: 0.2s;	/*hoverまでにかける時間。0.2秒。*/
}

/*マウスオン時*/
a:hover {
	color: var(--primary-color);	/*css冒頭で指定しているテーマカラーを読み込みます*/
	text-decoration-line: underline;
}


/*referencesのリンクテキストの設定
---------------------------------------------------------------------------*/
.z a i {
	color: black;
}

.z a {
	color: black;
}

.z a i:hover {
	color: var(--primary-color);
	text-decoration-line: underline;
}

.z a:hover {
	color: var(--primary-color);
	text-decoration-line: underline;
}


/*コンテナー（サイト全体を囲むブロック）
---------------------------------------------------------------------------*/
#container {
	height: 100%;
	display: flex;					/*flexボックスを使う指定*/
	flex-direction: column;			/*子要素を縦並びにする*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	max-width: 1800px;	/*サイトの最大幅。これ以上広がらない。*/
	margin: 0 auto;
	border-top: 5px solid var(--primary-color);	/*上の線の幅、線種、varは色のことで、ここではcss冒頭で指定しているテーマカラーを読み込みます。*/
}


/*コンテンツ（フッター関連「以外」を囲むブロック）
---------------------------------------------------------------------------*/
#contents {
	flex: 1;
	padding: 0 3%;	/*コンテンツ内の余白*/
}


/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
    display: flex;
    justify-content: space-between; /* 左：メニュー / 右：ロゴ などの配置が可能 */
    align-items: center;            /* 上下中央そろえ */
    padding: 5px 10px;
    background-color: rgb(255, 219, 219);
    color: black;
    z-index: 80;
    background: linear-gradient(90deg, #ff9393, #f7b0b0);
    box-shadow: 0 3px 10px rgba(255, 118, 118, 0.3);
    position: sticky;
    top: 0;
    transition: 0.3s;
    transition: all 0.3s;
}

header:hover {
  transform: translateY(-2px);
}

header::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #ff6f6f, #ff7676);
  z-index: -1;
  transition: width 0.3s ease;
}

header:hover::before {
  width: 100%;
}


/*ロゴ*/

#logo {
  flex-grow: 1;
  /* position: absolute;
  left:34.2%; */
  text-align: center;
  margin: 0;
  
}

#logo img {
	width: 10px;	/*ロゴの幅*/
}

#logo a {
	color: white;
	text-decoration-line: none;
	margin-bottom: 1rem 0;
}

#logo a:hover {
	color: white;	/*css冒頭で指定しているテーマカラーを読み込みます*/
	text-decoration-line: none;
}


/*メニューブロック設定
---------------------------------------------------------------------------*/
/*メニューブロック*/

#menubar {
  position: sticky;
  top: 80px;
  height: 20px;
  z-index: 80;
}

#menubar.hide {
  display: none;
}

#menubar ul {
	margin: 0;padding: 0;
	display: flex;					/*flexボックスを使う指定*/
	justify-content: space-around;	/*並びかたの種類の指定*/
	border-top: 1px solid #ddd;		/*上の線の幅、線種、色*/
	border-bottom: 1px solid #ddd;	/*下の線の幅、線種、色*/
	position: sticky;
  margin-bottom: 0 !important;  /* 余白をゼロにする */
  padding-bottom: 0;            /* 念のためパディングもリセット */
}

#menubar li {
	flex: 1;
	text-align: center;
}
#menubar a {
	text-decoration: none;display: block;
	color: inherit;
	padding: 0.7rem 0.5rem;		/*上下、左右へのメニュー内の余白*/
	background: #fff;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  z-index: 0;
  transition: all 0.3s;
}

#menubar a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  background: var(--primary-color);
  z-index: -1;
  transition: width 0.3s ease;
}

#menubar a:hover::before {
  width: 100%;
}

#menubar a:hover {
	background: var(--primary-color);	/*背景色。css冒頭で指定しているテーマカラーを読み込みます*/
	color: #fff;					/*文字色*/
  text-decoration: none;
}

.menu-button {
  background: rgba(255,255,255,0.2);
  border: none;
  color: white;
  padding: 10px 14px;
  font-size: 24px;
  cursor: pointer;
  border-radius: 8px;
  margin-left: 5px;     /* ← 左側余白に変更（任意） */
  transition: background 0.3s ease;
  flex-shrink: 0;
  z-index: 90;
}

.menu-button:hover {
  background: rgba(255,255,255,0.35);
}

#menu-btn {
  z-index: 90;
}

/* アコーディオンのベース */
.menubar ul {
  list-style: none;
  padding: 0 !important;
  margin: 0 !important;
  margin-bottom: 0 !important;
}

.menubar li {
  position: relative;
}

.menubar nav {
  margin-bottom: 0 !important;
}


/* もしメニュー要素自体に余白がある場合の保険 */
#menubar, #menubar nav {
  margin-bottom: 0;
  padding-bottom: 0;
}


/* ボタン部分 */
.accordion-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 10px 12px;
  border-bottom: none !important;
}

.accordion-btn a {
  border-bottom: none !important;
}

.accordion-btn i {
  transition: transform 0.3s;
}

/* サブメニュー */
/* .submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
  background: #f4f4f4;
} */

.submenu {
  display: none;
  background: #f4f4f4;
}


.submenu li a {
  display: block;
  padding: 8px 20px;
}

/* 開いたときの状態 */
/* .accordion.open .submenu {
  max-height: 300px; /* サブメニューの高さより大きければOK */
/* } */ 

.accordion.open .accordion-btn i {
  transform: rotate(180deg);
}



/*スライドショー（slickを使用）
---------------------------------------------------------------------------*/
/*画像を囲むブロック*/
.mainimg-slick {
	margin-bottom: 80px;	/*画像の下に空けるスペース*/
}

/*丸いページナビボタン全体を囲むブロック*/
ul.slick-dots {
	margin:0;padding: 0;
	line-height: 1;
	width: 100%;
	text-align: center;
	position: absolute;
	bottom: -30px;	/*下からの配置場所指定。ボタンを画像の下に移動します。*/
}

/*丸いページナビボタン１個あたりの設定*/
ul.slick-dots li {
	display: inline-block;
	margin: 0 10px;
	cursor: pointer;
}

/*buttonタグ*/
ul.slick-dots li button {
	border: none;padding: 0;
	display: block;
	text-indent: -9999px;	/*デフォルトで文字が出るので画面の外に追い出す指定*/
	width: 12px;			/*ボタンの幅*/
	height: 12px;			/*ボタンの高さ*/
	border-radius: 50%;		/*丸くする指定*/
	cursor: pointer;		/*クリックで画像へジャンプするので、わかりやすいようhover時にpointerになるように。*/
	background: #ccc;		/*背景色。白。*/	
}

/*buttonのアクティブ時（現在表示されている画像を示すボタン）*/
ul.slick-dots li.slick-active button {
	background: var(--primary-color);	/*色。css冒頭で指定しているテーマカラーを読み込みます*/
}


/*mainブロック設定
---------------------------------------------------------------------------*/
/*mainブロック*/
main {
	padding: 5%;	/*ブロック内の余白*/
}


main h1 {
	font-size: large;
	color: #ff7676;
}
/*mainブロック内のh2*/
main h2 {
	font-size: 1.8rem;		/*文字サイズ*/
	text-align: center;		/*テキストをセンタリング*/
	letter-spacing: 0.2em;	/*文字間隔を広くする指定*/
  position: relative;
  display: inline-block;
  padding: 0.5rem 1.5rem;
  margin: 2rem auto;
  font-size: 1.8rem;
  color: var(--primary-color);
  border-bottom: 3px solid var(--primary-color);
}

main h2::before {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 40%;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-color), transparent);
}

/*mainブロック内のh3*/
main h3 {
	font-size: 1.4rem;		/*文字サイズ*/
	text-align: center;		/*テキストをセンタリング*/
	letter-spacing: 0.2em;	/*文字間隔を広くする指定*/
}

/**mainブロック内のpタグ*/
main p {
	margin: 1rem;	/*pの外側にとるスペース*/
}



/*「お知らせ」ブロック
---------------------------------------------------------------------------*/
/*お知らせブロック*/
.new {
	margin: 0;
	display: flex;		/*flexボックスを使う指定*/
	flex-wrap: wrap;	/*折り返す指定*/
	padding: 0 1rem;	/*上下、左右へのボックス内の余白*/
}

/*日付(dt)、記事(dd)共通設定*/
.new dt,
.new dd {
	padding: 5px 0;		/*上下、左右へのボックス内の余白*/
}

/*日付(dt)設定*/
.new dt {
	width: 8em;	/*幅。8文字(em)分*/
}

/*記事(dd)設定*/
.new dd {
	width: calc(100% - 8em);	/*「8em」は上の「.new dt」のwidthの値です*/
}


/*フッター設定
---------------------------------------------------------------------------*/
footer small {font-size: 100%;}
footer {
	font-size: 1rem;		/*文字サイズ。bodyのfont-sizeの70%です。*/
	text-align: center;		/*内容をセンタリング*/
	padding: 20px;			/*ボックス内の余白*/
  background: linear-gradient(90deg, #ff7676, #ff9e9e);
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  box-shadow: 0 -3px 10px rgba(255,118,118,0.3);
  position: relative;
}

footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 60%;
  height: 2px;
  background: rgba(255,255,255,0.5);
  transform: translateX(-50%);
  border-radius: 2px;
}

/*リンクテキスト*/
footer a {
	color: inherit;
	text-decoration: none;
}


/*著作部分*/
footer .pr {
	display: block;
	font-size: 1rem;
}

footer .pr a:hover {
	color: #555;
	text-decoration: none;
}

/* フッターメニュー */
#footermenu {
  list-style: none;         /* デフォルトの点を消す */
  padding: 0;
  margin: 10px 0 0 0;
  text-align: center;       /* 中央寄せ */
}

#footermenu li {
  display: inline-block;    /* 横並びにする */
  margin: 5px 15px;         /* 文字間のスペース */
}

#footermenu a {
  text-decoration: none;    /* 下線を消す */
  color: #fff;              /* 白文字 */
  font-size: 1.3rem;          /* 文字サイズ */
  transition: color 0.3s, transform 0.3s;
}

#footermenu a:hover {
  color: #555; /* ホバー時にテーマカラーに */
  transform: scale(1.05);      /* 少し拡大して目立たせる */
}



/*メニューのご紹介ページの各ボックス
---------------------------------------------------------------------------*/
/*ボックス１個あたりの設定*/
.list-simple {
	text-align: center;	/*中身をセンタリング*/
	max-width: 700px;		/*ボックスの幅*/
	margin: 0 auto 4rem;	/*ボックスの外側にとるスペース。上、左右、下。*/
}

/*ボックス内のh3*/
.list-simple h3 {
	margin: 0;
}

/*ボックス内のp*/
.list-simple p {
	margin: 0;
	font-size: 0.85rem;	/*文字サイズを85%に*/
	line-height: 1.5;
}


/*アクセスのマップ。コメント解説がある行以外はそのままで使って下さい。
---------------------------------------------------------------------------*/
.iframe-box {
	width: 100%;
	height: 0;
	padding-top: 56.25%;	/*ここが高さになります。大きくすればよりマップの高さも増します。*/
	position: relative;
	margin-bottom: 2rem;	/*地図の下に空けるスペース。２文字分。*/
}
.iframe-box iframe {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}


/*テーブル
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
	font-weight: bold;		/*太字に*/
	padding: 1rem;			/*ボックス内の余白。基本的に数行下の「.ta1 th, .ta1 td」のpaddingと揃えておけばOKです。*/
	background: #555;		/*背景色*/
	margin-bottom: 15px;	/*下に空けるスペース*/
	border-radius: 5px;		/*角を丸くする指定*/
	color: #fff;			/*文字色*/
}

/*ta1テーブルブロック設定*/
.ta1 {
	border-top: 1px solid #666;	/*テーブルの一番上の線。幅、線種、色*/
	width: 100%;
	margin: 0 auto 2em;		/*最後の「2em」がテーブルの下に空けるスペースです*/
}

/*tr（１行分）タグ設定*/
.ta1 tr {
	border-bottom: 1px solid #666;	/*テーブルの下線。幅、線種、色*/
}

/*th（左側）、td（右側）の共通設定*/
.ta1 th, .ta1 td {
	padding: 1rem;		/*ボックス内の余白*。基本的に数行上の「.ta1 caption」のpaddingと揃えておけばOKです。*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}

/*th（左側）のみの設定*/
.ta1 th {
	width: 28%;			/*幅*/
	text-align: left;	/*左よせにする*/
}


/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

/*ボタンの設定*/
.pagetop a {
	display: block;
  text-decoration: none;
  text-align: center;
  z-index: 99;
	position: fixed;	/*スクロールに追従しない(固定で表示)為の設定*/
	right: 20px;		/*右からの配置場所指定*/
	bottom: 20px;		/*下からの配置場所指定*/
	color: #fff;		/*文字色*/
	font-size: 1.5rem;	/*文字サイズ*/
	background: rgba(0,0,0,0.2);	/*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
	width: 60px;		/*幅*/
	line-height: 60px;	/*高さ*/
	border-radius: 50%;	/*円形にする*/
}


/*その他
---------------------------------------------------------------------------*/
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
.color-check,
 .color-check a {
  color: #ff0000 !important;
}
.l {
  text-align: left !important;
}
.c {
  text-align: center !important;
}
.r {
  text-align: right !important;
}
.ws {
  width: 95%;display: block;
}
.wl {
  width: 95%;display: block;
}
.mb0 {
  margin-bottom: 0px !important;
}
.mb30 {
  margin-bottom: 30px !important;
}
.look {
  display: inline-block;
  padding: 0px 10px;
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin: 5px 0;
   word-break: break-all;
  }
.small {
  font-size: 0.75em;
}
.large {
  font-size: 2em;
   letter-spacing: 0.1em;
  }
.pc {
  display: none;
}
.dn {
  display: none !important;
}
.block {
  display: block !important;
}



	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	.ws {width: 48%;display: inline;}
	.sh {display: none;}
	.pc {display: block;}

	}/*追加指定ここまで*/


.bg1 h2 {
	color: var(--primary-text-color);	/*文字色。css冒頭で指定しているprimary-text-colorを読み込みます*/
}

/*bg1背景色がついたブロック
---------------------------------------------------------------------------*/
.bg1 {
	position: relative;
	background: var(--primary-color);	/*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
	color: var(--primary-text-color);	/*文字色。css冒頭で指定しているprimary-text-colorを読み込みます*/
	padding-top: 1vw;		/*ボックス内の上に空ける余白。お好みで調整して下さい。*/
	padding-bottom: 1vw;	/*ボックス内の下に空ける余白。お好みで調整して下さい。*/
	margin-top: 9vw;		/*ボックス外の上に空ける余白。お好みで調整して下さい。*/
	margin-bottom: 5vw;	/*ボックス外の下に空ける余白。お好みで調整して下さい。*/
	
	/*以下は変更不要*/
	margin-left: calc(-1 * var(--global-space));
	margin-right: calc(-1 * var(--global-space));
	padding-left: var(--global-space);
	padding-right: var(--global-space);

  font-size: 100px;
  text-align: center;

}
.bg1 a {
	color: white;
}

/*以下のheightの行が傾斜の角度です。vwという単位は画面幅に対してで、画面幅100%＝100vwになります。
つまり、画面幅に対して常に同じ傾斜具合になります。1pxの数字は時々隙間が発生するのでそれを防ぐ為の措置です。
傾斜（height）を変更したい場合は、下にある「.bg1::before」のtopと「.bg1::after」のbottomの数字も変更。*/
.bg1::before, .bg1::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: calc(5vw + 1px);
	background: var(--primary-color);	/*背景色。css冒頭で指定しているprimary-colorを読み込みます*/
}

.bg1::before {
	top: -5vw;	/*上の、heightの「5vw」と数字を揃えて先頭にマイナスをつける*/
	clip-path: polygon(0 100%, 100% 0, 100% 100%);	/*三角形の形を作っています*/
}

.bg1::after {
	bottom: -5vw;	/*上の、heightの「5vw」と数字を揃えて先頭にマイナスをつける*/
	clip-path: polygon(0 0, 100% 0, 0 100%);	/*三角形の形を作っています*/
}

/*テキストのフェードイン設定
---------------------------------------------------------------------------*/
/* 初期状態でテキストを非表示にする */
.fade-in-text {
    visibility: hidden;
	font-size: 5.5rem;
}

/* アニメーションを適用するクラス。
animationの行の「0.05s」が文字の出現のなめらかさで、大きいほどなめらかに出てきます。
１文字ずつの出現する際の時差は、js/main.jsの「テキストのフェードイン効果」の中にある「0.2」で調整できます。*/
.char {
    display: inline-block;
    opacity: 0;
    animation: fadeIn 0.5s linear both;
}


@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* タイトルリンクの下線を消す */
.c a {
  text-decoration: none;  /* 下線を消す */
}

/* 見た目調整（モバイル） */
/* @media(max-width:600px){
  .opt{ padding:10px; }
  .opt .label{ min-width:30px; min-height:30px; }
} */


/* 次へボタン */

.navigation {
    display: flex;
    justify-content: space-between; /* 左右に配置 */
    padding: 10px 40px;
    /* background-color: #f9f9f9; テンプレートの淡い背景に合わせる */
    /* border-top: 1px solid #ccc; */
}

.navigation a.button {
    padding: 10px 20px;
    font-size: 16px;
    color: #fff;
    background-color: #ff8f8f; /* テンプレートのリンク色に合わせる */
    border: none;
    cursor: pointer;
    transition: 0.3s;
    background: linear-gradient(90deg, #ff8f8f, #ff6f6f);
    border-radius: 50px;
    box-shadow: 0 3px 8px rgba(255, 118, 118, 0.3);
    font-weight: 600;
}

.navigation a.button:hover {
    background-color: #d57979; /* ホバー時の濃い赤 */
	  color: white;
    transform: scale(1.05);
    box-shadow: 0 5px 12px rgba(255, 118, 118, 0.5);
}

.navigation a {
	text-decoration: none;
}

.navigation a:hover {
	color: white;
}

.y {
	opacity: 0;
	pointer-events: none;
}







/* ==============================
   ページトップボタン強化
============================== */
.pagetop a {
  background: var(--primary-color);
  color: white;
  font-size: 1.3rem;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
  transition: all 0.3s;
}

.pagetop a:hover {
  transform: scale(1.1);
  background: #ff5c5c;
}




.fade-in-text {
  font-size: 4rem;
  letter-spacing: 0.05em;
  color: white;
  font-weight: 700;
  visibility: hidden;
  display: inline-block;
  text-align: center;
}

.fade-in-text .char {
    opacity: 0;
    display: inline-block;
    transform: translateY(20px);
    animation: fadeUp 0.6s ease forwards;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.img-row {
  display: flex;
  gap: 2px; /* 画像の間隔調整 */
}

.img-row img {
  width: 500px; /* 好きなサイズに */
  height: auto;
}

.r {
  align-content: center;
}