@charset "utf-8";
@import url("https://cdn.jsdelivr.net/npm/yakuhanjp@3.4.1/dist/css/yakuhanjp.min.css");
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Sawarabi+Gothic&display=swap');


/* テンプレート + 作品展示用てがろぐスキン「ippen」 */
/* 共通css */

*,*::before,*::after { box-sizing: inherit;}
html { box-sizing: border-box;}
h1,h2,h3,h4,h5,img,p,ul,ol,li { margin: 0; padding: 0;}
img { border: none;}

/* -------------------- */
/* カスタム用色変更欄 */
/* -------------------- */
:root {
	--haikei-iro: #f2e9ea; /* 全体背景色 */
	--koi-iro: #e83b2b; /* 濃いアクセント色 */
	--mozi-iro: #2b2d30; /* メイン文字色 */
	--link-iro: #e83b2b; /* リンクの色など */
	--link-hover-iro: #c082d3; /* リンクにマウス乗せたときの色と強調のマーカー色 */
	--iconfont: "remixicon"; /* アイコンフォントの名前 */
	--titlefont: YakuHanJP,'Outfit','Sawarabi Gothic',sans-serif; /* タイトルなどのフォントの名前 */
}


/* 全体共通装飾 */
body {
	font-size: 0.85rem;
	line-height: 1;
	font-family: var(--titlefont);
	margin: 0;
	padding: 0;
	overflow-wrap: break-word;
}

/* リンクの装飾 */
a { text-decoration: none; color: var(--link-iro); }
a:hover { color: var(--link-hover-iro); text-decoration: underline;}

/* 画像の基本設定 */
img { max-width: 100%;}

/* リスト */
ul,ol {
	margin-bottom: 1rem;
	padding-left: 1.5rem;
}
ul { list-style-type: square;}

/* ヘッダーからフッターを囲むエリア */
.bodyarea {
	margin: 0;
	padding: 0;
	background-color: var(--haikei-iro);
	color: var(--mozi-iro);
	display: grid;/* ↓4行 フッターを下部固定する */
	grid-template-rows: auto 1fr auto;
	grid-template-columns: 100%;
	min-height: 100svh;
}

/* ヘッダー */
header {
	width: 100%;
	margin: 0;
	padding: 1.5rem;
	text-align: center;
	line-height: 1.2;
	font-family: var(--titlefont);
	letter-spacing: 0.1rem;
}


/* メニューとメインコンテンツを囲むエリア */
main { margin: 0; padding: 0;}

/* メニュー */
.mainmenu {
	position: sticky;/* 上まで来たら固定 */
	top: 0;
	z-index: 110;
}

.mainmenu ul {
	background-color: var(--haikei-iro);
	list-style: none;
	margin: 0;
	padding: 0.5rem 1.3rem;
	font-size: rem;
	line-height: 1.5;
	font-family: var(--titlefont);
	letter-spacing: 0.1rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 1rem;

}

/* メニュー除いたメイン部分を囲むエリア(横幅を狭くする) */
.mainarea {
	width: min(100%,1000px);/* メイン領域の横幅 */
	margin: 0 auto;
	padding: 2rem 1.3rem 3rem;
	line-height: 1.65;
}

/* 各セクション(下に大きめの余白が入ります) */
section { margin-bottom: 5rem;}

/* p(普通文章) */
p { margin: 0.5rem auto 1rem;}


/* 見出し(てがろぐの方も共通) */
h4,.deco-h4 {
	font-size: 1rem;
	font-weight: bold;
	margin-bottom: 0.5rem;
	font-family: var(--titlefont);
	letter-spacing: 0.1rem;
}
h4::before,.deco-h4::before { content: "-";}

/* 枠線付きボックス */
.box1,.deco-box1 {
	display: block;
	border: 1px solid var(--mozi-iro);
	padding: 1.3rem;
	margin: 1rem auto 1.5rem;
}

/* フッター */
footer {
	color: var(--mozi-iro);
	padding: 1rem 4rem 1rem 1rem;
	text-align: right;
}
footer p { margin: 0;}

/* 全体に設定 */
::selection {
	color: var(--haikei-iro);
	background-color: var(--koi-iro);
  }