@charset "utf-8";

*,*::before,*::after { box-sizing: inherit;}
html { margin: 0; padding: 0; box-sizing: border-box;}
details * { box-sizing: border-box;}
h1,h2,h3,h4,h5,img,p,ul,ol,li,dl,dt,dd { margin: 0; padding: 0;}
img { border: none; max-width: 100%;}

/* -------------------- */
/* カスタム用色変更欄 */
/* -------------------- */
:root{
	--background-color: #e6e5e3; /* 全体背景色 */
	--background-color: #004a81; /* 全体背景色 */
	--background-gray: #ebebeb; /* 白背景より少し濃い灰色、ボタンなどに */
	--mozi-color: #004a81; /* メイン文字色 */
	--mozi-color: #e6e5e3; /* メイン文字色 */
	--usu-mozi-color: #979797; /* ↑よりちょっと薄い文字色など */
	--siro-mozi-color: #fefefe; /* 濃い背景に乗せる白文字 */
	--link-iro: #d63c61; /* リンク、カテゴリの色など */
	--link-hover-iro: #ffa1b8; /* リンクにマウス乗せたときの色と強調のマーカー色 */
	--lightblue-2: #b9d1d1; /* lightblue内の青 */
	--content-color: #fafafa; /* 薄い水色の中のcontentの色 */
	--iconfont: "Material Icons Round"; /* アイコンフォントの名前 */
}

/********* フォント読み込み ***********************************************/
@font-face {
	font-family: 'M PLUS Rounded 1c';
	src: url('../fonts/MPLUSRounded1c-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'M PLUS Rounded 1c';
	src: url('../fonts/MPLUSRounded1c-Bold.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'ZenKakuGothic';
    src: url('../fonts/ZenKakuGothicAntique-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'ZenKakuGothic';
    src: url('../fonts/ZenKakuGothicAntique-Bold.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'Josefin Sans';
    src: url('../fonts/JosefinSans-Bold.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
}

/********* 全体共通装飾 ***********************************************/
body {
	font-size: 15px;
	line-height: 1.6rem;
	font-family: "YakuHanRP","M PLUS Rounded 1c","メイリオ",Meiryo,"Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
	margin: 0;
	padding: 0;
	width: 100%;
	background-color: var(--background-color);
	color: var(--mozi-color);
	overflow-wrap: break-word;
}

h1,h2,h3,h4,h5 {
	margin: 0 0 20px 0;
	font-family: 'Josefin Sans', "ZenKakuGothic";
}

h1 {font-size: 180%;}
h2 {font-size: 160%;}
h3 {font-size: 140%;}
h4 {font-size: 130%;}
h5 {font-size: 120%;}
h6 {font-size: 100%;}

/* リンクの装飾 */
a {
	color: var(--siro-mozi-color);
	-webkit-transition: 0.24s ease-out;
    transition: 0.24s ease-out;
}
a:hover {
	color: var(--link-hover-iro);
	-webkit-transition: 0.24s ease-out;
    transition: 0.24s ease-out;
}

#container {
	width: 750px;
	margin: 50px auto;
	display: grid;
	gap: 50px;
}

section {
	border: 2px solid;
	border-radius: 30px;
	padding: 2rem;
}

section.name {
	border: none;
	align-items: center;
	text-align: center;
}

section.name .sec-h1-box {
	justify-content: center;
}

section h4 {
	margin: 0 0 10px 0;
}

section .sub-content p {
	margin-bottom: 5px;
}

.sub-content {
	margin-left: 10px;
}

section img {
	border-radius: 100px;
	width: 150px;
}

/* 見出しのスタイル */
.sec-h1-box {
	display: flex;
	align-items: flex-end;
}

.sec-h1-box p {
	margin-left: 1.0vw;
	line-height: 430%;
}

.sec-h1-box p::before {
	content: '/';
	margin-right: 4px;
}

ul.icon-list {
	display: flex;
	gap: 1rem;
	list-style: none;
}

ul.icon-list svg {
	width: 1.8rem;
	height: 1.8rem;
}

ul.icon-list a {
	background: var(--link-iro);
	color: var(--siro-mozi-color);
	border-radius: 100px;
	padding: .8rem;
	align-items: center;
	display: flex;
	line-height: 0;
}
ul.icon-list a:hover {
	background: var(--link-hover-iro);
}

.mail, .sns, .site {
	display: flex;
	gap: 7px;
}