@charset "utf-8";

/*==================================================
  ファイル情報
==================================================*/
/*
  ファイル名: style.css
  用途: tp_beginner8テンプレート用スタイルシート
  
  【目次】
  1. 初期設定・外部読み込み
  2. 全体設定（フォント・カラー・リセット）
  3. レイアウト（コンテナ・コンテンツ）
  4. ヘッダー
  5. ナビゲーションメニュー
  6. ハンバーガーメニュー（スマホ用）
  7. スライドショー
  8. メインコンテンツ
  9. フッター
  10. ページトップボタン
  11. ユーティリティクラス
  12. レスポンシブ設定（メディアクエリ）
*/


/*==================================================
  1. 初期設定・外部読み込み
==================================================*/

/* リセットCSS */
@import url("https://unpkg.com/sanitize.css");

/* アイコンフォント */
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");

/* スライドショープラグイン */
@import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css");

/* テーマカラー定義（この色を変更するとサイト全体の色が変わる） */
:root {
    --primary-color: #add4dc;
}


/*==================================================
  2. 全体設定
==================================================*/

/*--------------------------------------------------
  2-1. 基本設定
--------------------------------------------------*/
html, body {
	height: 100%;
	font-size: 13px;  /* スマホ基準（PCは16pxに変更） */
}

body {
	/* フォント指定: 丸ゴシック系 */
	font-family: "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	-webkit-text-size-adjust: none;  /* iOSでのフォントサイズ自動調整を無効化 */
	background: #fdfdfb;             /* 背景色: オフホワイト */
	color: #999;                     /* 文字色: グレー */
	line-height: 2.5;                /* 行間: 2.5倍（読みやすさ重視） */
}

/*--------------------------------------------------
  2-2. リセット（margin/padding削除）
--------------------------------------------------*/
figure {margin: 0;}
dd {margin: 0;}
nav {margin: 0; padding: 0;}

/*--------------------------------------------------
  2-3. 要素全般の設定
--------------------------------------------------*/
/* テーブル: 枠線を重ねて表示 */
table {border-collapse: collapse;}

/* 画像: レスポンシブ対応 */
img {
	border: none;
	max-width: 100%;         /* 親要素からはみ出さない */
	height: auto;            /* 縦横比を維持 */
	vertical-align: middle;  /* 下の隙間を削除 */
}

/* 動画: レスポンシブ対応 */
video {max-width: 100%;}

/* iframe: 幅100% */
iframe {width: 100%;}

/* 入力フォーム: フォントサイズ継承 */
input {font-size: 1rem;}

/* セクション間の余白 */
section + section {
	margin-top: 3rem;
}

/*--------------------------------------------------
  2-4. アニメーション定義
--------------------------------------------------*/
@keyframes opa1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

/*--------------------------------------------------
  2-5. リンク設定
--------------------------------------------------*/
a {
	color: #999;          /* 文字色 */
	transition: 0.3s;     /* ホバー時の色変化速度 */
}

/* ホバー時: テーマカラーに変更 */
a:hover {
	color: var(--primary-color);
}


/*==================================================
  3. レイアウト
==================================================*/

/*--------------------------------------------------
  3-1. コンテナ（サイト全体を囲む）
--------------------------------------------------*/
#container {
	height: 100%;
	display: flex;                      /* フレックスボックス使用 */
	flex-direction: column;             /* 縦並び */
	justify-content: space-between;     /* フッターを下部に固定 */
	max-width: 1800px;                  /* 最大幅制限 */
	margin: 0 auto;                     /* 中央配置 */
	border-top: 5px solid var(--primary-color);  /* 上部のアクセント線 */
}

/*--------------------------------------------------
  3-2. コンテンツエリア（フッター以外の全体）
--------------------------------------------------*/
#contents {
	flex: 1;              /* 残りのスペースを全て使用 */
	padding: 0 3%;        /* 左右余白: 3%（スマホは5%に変更） */
}


/*==================================================
  4. ヘッダー
==================================================*/

/*--------------------------------------------------
  4-1. ヘッダーブロック
--------------------------------------------------*/
header {
	padding: 2rem 0;      /* 上下余白: 2rem */
	text-align: center;   /* 中央揃え */
}

/*--------------------------------------------------
  4-2. ロゴ
--------------------------------------------------*/
#logo img {
	width: 300px;         /* 基本幅: 300px */
	max-width: 70%;       /* スマホ時: 画面幅の70%まで */
}


/*==================================================
  5. ナビゲーションメニュー（PC用）
==================================================*/

/*--------------------------------------------------
  5-1. メニューブロック
--------------------------------------------------*/
#menubar {
	position: relative;   /* ハンバーガーボタンの基準位置 */
	z-index: 200;         /* 前面表示 */
}

/*--------------------------------------------------
  5-2. メニューリスト
--------------------------------------------------*/
#menubar ul {
	margin: 0;
	padding: 0;
	margin-bottom: 3rem;              /* 下余白: 3文字分 */
	display: flex;                    /* 横並び */
	justify-content: space-around;    /* 均等配置 */
	border-top: 1px solid #ddd;       /* 上線 */
	border-bottom: 1px solid #ddd;    /* 下線 */
}

/*--------------------------------------------------
  5-3. メニュー項目
--------------------------------------------------*/
#menubar li {
	flex: 1;              /* 均等幅 */
	text-align: center;   /* 中央揃え */
}

#menubar a {
	text-decoration: none;    /* 下線なし */
	display: block;           /* ブロック要素化 */
	color: inherit;           /* 親要素の色を継承 */
	padding: 0.7rem 0.5rem;   /* 上下0.7rem、左右0.5rem */
}

/* ホバー時: 背景色変更 */
#menubar a:hover {
	background: var(--primary-color);  /* テーマカラー背景 */
	color: #fff;                       /* 白文字 */
}

/*--------------------------------------------------
  5-4. メニュー内ロゴ（スマホのみ表示）
--------------------------------------------------*/
.menu-logo {
	display: none;        /* PC時は非表示 */
}

/* メニュー内ロゴのリンクhover時にすべての効果を無効化 */
#menubar .menu-logo a:hover {
	color: inherit !important;
	background: transparent !important;
	opacity: 1;
	transform: none;
	filter: none;
}

/* メニュー内ロゴの画像hover時も効果を無効化 */
#menubar .menu-logo a:hover img {
	opacity: 1;
	transform: none;
}


/*==================================================
  6. ハンバーガーメニュー（スマホ用）
==================================================*/
/* 注: スマホ時のみ表示（メディアクエリで制御） */

/*--------------------------------------------------
  6-1. ハンバーガーボタン
--------------------------------------------------*/
.menu-toggle {
	display: none;                /* PC時は非表示 */
	position: fixed;              /* 画面固定 */
	top: 15px;                    /* 上から15px */
	right: 15px;                  /* 右から15px */
	background: transparent;      /* 透明背景 */
	border: none;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;              /* カーソルをポインターに */
	padding: 0.8rem;              /* タップ領域確保 */
	z-index: 250;                 /* メニューより前面 */
	flex-direction: column;
	align-items: center;
}

/*--------------------------------------------------
  6-2. 3本線アイコン
--------------------------------------------------*/
.menu-toggle span:not(.menu-text) {
	display: block;
	width: 22px;                  /* 幅 */
	height: 3px;                  /* 高さ */
	background: #999;             /* グレー */
	margin: 3px 0;                /* 上下余白 */
	transition: all 0.3s ease-in-out;  /* 変形アニメーション */
	border-radius: 2px;           /* 角を少し丸く */
}

/* 1本目: 上marginなし */
.menu-toggle span:nth-child(1) {
	margin-top: 0;
}

/* 3本目: 下marginなし */
.menu-toggle span:nth-child(3) {
	margin-bottom: 0;
}

/* ハンバーガーアイコン（3本線）にhover効果 */
.menu-toggle:hover span:not(.menu-text) {
	background: #add4dc;
}

/*--------------------------------------------------
  6-3. MENUテキスト（2行表示: MENU / OPEN）
--------------------------------------------------*/
.menu-text {
	display: flex;
	flex-direction: column;       /* 縦並び（2行表示） */
	align-items: center;          /* 中央揃え */
	font-size: 0.75rem;           /* 文字サイズ */
	letter-spacing: 0.1em;        /* 字間 */
	margin-top: 10px;             /* 3本線との間隔 */
	color: #999;
	font-weight: normal;
	line-height: 1.3;             /* 行間 */
}

/* 1行目: MENU */
.menu-text::before {
	content: "MENU";
}

/* 2行目: OPEN（閉じている時） */
.menu-text::after {
	content: "OPEN";
}

/*--------------------------------------------------
  6-4. アクティブ時（メニュー開いている時）
--------------------------------------------------*/

/* 3本線を×印に変形 */
.menu-toggle.active span:nth-child(1) {
	width: 22px;
	height: 3px;
	margin: 0 auto;
	transform: translateY(6px) rotate(45deg);  /* 下に移動+45度回転 */
}

.menu-toggle.active span:nth-child(2) {
	opacity: 0;                   /* 2本目は非表示 */
}

.menu-toggle.active span:nth-child(3) {
	width: 22px;
	height: 3px;
	margin: 0 auto;
	transform: translateY(-6px) rotate(-45deg);  /* 上に移動-45度回転 */
}

/* テキスト: 2行目をCLOSEに変更 */
.menu-toggle.active .menu-text::after {
	content: "CLOSE";
}


/*==================================================
  7. スライドショー
==================================================*/
/* プラグイン: Slick Carousel 使用 */

/*--------------------------------------------------
  7-1. 画像エリア
--------------------------------------------------*/
.mainimg-slick {
	margin-bottom: 80px;          /* 下余白（スマホは50px） */
	position: relative;
	z-index: 1;                   /* メニューより背面 */
}

/*--------------------------------------------------
  7-2. ページナビボタン（丸いドット）
--------------------------------------------------*/
ul.slick-dots {
	margin: 0;
	padding: 0;
	line-height: 1;
	width: 100%;
	text-align: center;           /* 中央揃え */
	position: absolute;
	bottom: -30px;                /* 画像の下30pxに配置 */
}

/* 各ドットボタン */
ul.slick-dots li {
	display: inline-block;
	margin: 0 10px;               /* 左右10pxずつ間隔 */
	cursor: pointer;
}

/* ボタン本体 */
ul.slick-dots li button {
	border: none;
	padding: 0;
	display: block;
	text-indent: -9999px;         /* テキストを画面外に */
	width: 12px;                  /* 幅12px */
	height: 12px;                 /* 高さ12px */
	border-radius: 50%;           /* 円形 */
	cursor: pointer;
	background: #ccc;             /* グレー */
}

/* アクティブなボタン（現在表示中の画像） */
ul.slick-dots li.slick-active button {
	background: var(--primary-color);  /* テーマカラー */
}


/*==================================================
  8. メインコンテンツ
==================================================*/

/*--------------------------------------------------
  8-1. メインブロック
--------------------------------------------------*/
main {
	padding: 3% 5%;               /* 上下3%、左右5% */
}

/*--------------------------------------------------
  8-2. 見出し
--------------------------------------------------*/
/* h2: 大見出し */
main h2 {
	font-size: 1.8rem;            /* 文字サイズ */
	text-align: center;           /* 中央揃え */
	letter-spacing: 0.2em;        /* 字間を広く */
	color: var(--primary-color);  /* テーマカラー */
}

/* h3: 中見出し */
main h3 {
	font-size: 1.4rem;
	text-align: center;
	letter-spacing: 0.2em;
}

/*--------------------------------------------------
  8-3. 段落
--------------------------------------------------*/
main p {
	margin: 1rem 0;               /* 上下1rem余白 */
}

/*--------------------------------------------------
  8-4. お知らせブロック
--------------------------------------------------*/
.new {
	margin: 0;
	display: flex;                /* フレックスボックス */
	flex-wrap: wrap;              /* 折り返し */
	padding: 0 1rem;
}

/* 日付(dt)と記事(dd)の共通設定 */
.new dt,
.new dd {
	padding: 10px 0;              /* 上下10px */
}

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

/* 記事(dd) */
.new dd {
	width: calc(100% - 8em);      /* 残りの幅 */
}


/*==================================================
  9. フッター
==================================================*/

footer small {
	font-size: 100%;              /* smallタグのサイズ調整 */
}

footer {
	font-size: 0.7rem;            /* 文字サイズ小さめ */
	text-align: center;           /* 中央揃え */
	padding: 20px;                /* 内側余白 */
	color: #fff;                  /* 白文字 */
	background: var(--primary-color);  /* テーマカラー背景 */
}

/* リンク */
footer a {
	color: inherit;               /* 親要素の色を継承 */
	text-decoration: none;        /* 下線なし */
}

/* フッターのリンクhover時に色を変更しない */
footer a:hover {
	color: inherit;
}

/* 著作権表示 */
footer .pr {
	display: block;
}


/*==================================================
  10. その他のコンテンツ要素
==================================================*/

/*--------------------------------------------------
  10-1. リストスタイル（作品集など）
--------------------------------------------------*/
.list-simple {
	text-align: center;           /* 中央揃え */
	max-width: 700px;             /* 最大幅 */
	margin: 0 auto 4rem;          /* 中央配置、下余白4rem */
}

.list-simple h3 {
	margin: 0;
}

.list-simple p {
	margin: 0;
	font-size: 0.85rem;           /* 文字サイズ85% */
	line-height: 1.5;
}

/*--------------------------------------------------
  10-2. 地図（iframe）
--------------------------------------------------*/
.iframe-box {
	width: 100%;
	height: 0;
	padding-top: 56.25%;          /* 高さ（16:9比率） */
	position: relative;
	margin-bottom: 2rem;          /* 下余白 */
}

.iframe-box iframe {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

/*--------------------------------------------------
  10-3. テーブル
--------------------------------------------------*/

/* テーブルキャプション（見出し） */
.ta1 caption {
	font-weight: bold;
	padding: 1rem;
	background: #555;
	margin-bottom: 15px;
	border-radius: 5px;
	color: #fff;
}

/* テーブル本体 */
.ta1 {
	border-top: 1px solid #666;   /* 上線 */
	width: 100%;
	margin: 0 auto 2em;           /* 下余白2em */
}

/* テーブル行 */
.ta1 tr {
	border-bottom: 1px solid #666;  /* 下線 */
}

/* セル共通（見出しth・データtd） */
.ta1 th, .ta1 td {
	padding: 1rem;
	word-break: break-all;        /* 長い英単語を折り返し */
}

/* 見出しセル（左側） */
.ta1 th {
	width: 28%;
	text-align: left;
	background: #f7f7f7;
}


/*==================================================
  11. ページトップボタン（↑）
==================================================*/

.pagetop-show {
	display: block;               /* 表示用クラス */
}

/* ボタン本体 */
.pagetop a {
	display: block;
	text-decoration: none;
	text-align: center;
	z-index: 99;
	position: fixed;              /* 画面固定 */
	right: 20px;                  /* 右から20px */
	bottom: 20px;                 /* 下から20px */
	color: #fff;                  /* 白文字 */
	font-size: 1.5rem;            /* アイコンサイズ */
	background: rgba(0,0,0,0.2);  /* 半透明黒背景 */
	width: 60px;                  /* 幅60px */
	line-height: 60px;            /* 高さ60px */
	border-radius: 50%;           /* 円形 */
}


/*==================================================
  12. ユーティリティクラス
==================================================*/
/* 汎用的に使えるクラス群 */

.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;}      /* 幅95%（PCは48%） */
.wl {width: 95%; display: block;}
.mb0 {margin-bottom: 0px !important;}  /* 下余白なし */
.mb30 {margin-bottom: 30px !important;}/* 下余白30px */
.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;}                   /* PC専用（スマホで非表示） */
.sh {display: block;}                  /* スマホ専用（PCで非表示） */
.dn {display: none !important;}        /* 強制非表示 */
.block {display: block !important;}    /* 強制表示 */


/*==================================================
  13. レスポンシブ設定（メディアクエリ）
==================================================*/

/*--------------------------------------------------
  13-1. PC表示（画面幅900px以上）
--------------------------------------------------*/
@media screen and (min-width:900px) {

	/* フォントサイズをPCサイズに変更 */
	html, body {
		font-size: 16px;          /* 13pxから16pxに */
	}

	/* ユーティリティクラスの調整 */
	.ws {
		width: 48%;               /* 95%から48%に（2カラム用） */
		display: inline;
	}
	.sh {display: none;}          /* スマホ専用要素を非表示 */
	.pc {display: block;}         /* PC専用要素を表示 */

}

/*--------------------------------------------------
  13-2. スマホ・タブレット表示（画面幅899px以下）
--------------------------------------------------*/
@media screen and (max-width: 899px) {

	/* ハンバーガーボタンを表示 */
	.menu-toggle {
		display: flex;            /* 非表示から表示に */
	}

	/* コンテンツ余白の調整 */
	#contents {
		padding: 0 5%;            /* 3%から5%に拡大 */
	}

	/* ヘッダー余白の調整 */
	header {
		padding: 1.5rem 0 1.2rem 0;  /* 下余白を調整 */
	}

	/* メニュー内ロゴを表示 */
	.menu-logo {
		display: block;           /* 非表示から表示に */
		text-align: center;
		padding: 0.8rem 0 1rem 0; /* 上余白を縮小 */
		background: #fdfdfb;      /* 背景色 */
		border-bottom: 1px solid #ddd;  /* 区切り線 */
	}

	.menu-logo img {
		width: 180px;             /* ロゴ幅を縮小 */
		max-width: 70%;           /* 画面幅の70%まで */
		height: auto;
	}

	/* メニュー展開エリア */
	#menubar nav {
		position: fixed;          /* 画面固定 */
		top: 0;                   /* 画面最上部 */
		left: 0;
		right: 0;
		width: 100%;
		max-height: 0;            /* 初期状態: 高さ0 */
		overflow: hidden;
		transition: max-height 0.3s ease, opacity 0.3s ease;
		opacity: 0;               /* 初期状態: 透明 */
		z-index: 150;             /* ボタンより背面 */
		background: #fdfdfb;      /* 背景色（透過防止） */
	}

	/* メニュー展開時 */
	#menubar nav.open {
		max-height: 340px;        /* 高さを確保 */
		opacity: 1;               /* 不透明に */
		box-shadow: 0 2px 5px rgba(0,0,0,0.1);  /* 影で浮かせる */
		margin-top: 0;
		padding-top: 0;
		background: #fdfdfb;      /* 背景色を明示 */
	}

	/* メニューを縦並びに変更 */
	#menubar ul {
		flex-direction: column;   /* 横並びから縦並びに */
		border-top: none;
		margin-bottom: 2rem;
		margin-top: 0;
	}

	/* メニュー項目に区切り線 */
	#menubar li {
		border-bottom: 1px solid #ddd;
	}

	/* 最初の項目に上線も追加 */
	#menubar li:first-child {
		border-top: 1px solid #ddd;
	}

	/* スライドショー下余白の調整 */
	.mainimg-slick {
		margin-bottom: 50px;      /* 80pxから50pxに */
	}

	/* メインブロック余白の調整 */
	main {
		padding: 5%;              /* 全方向5% */
	}

	main p {
		margin: 0.8rem 0;         /* 上下余白を縮小 */
	}

	/* フッター調整 */
	footer {
		font-size: 0.75rem;       /* 文字サイズ微増 */
		padding: 25px 20px;       /* 上下余白拡大 */
	}

	/* ページトップボタン調整 */
	.pagetop a {
		width: 50px;              /* 60pxから50pxに */
		line-height: 50px;
		right: 15px;
		bottom: 15px;
	}

}
/* スマホ・タブレット設定ここまで */