@charset "utf-8";

/* google-fontを使いたい時には有効化 */
/* @import url('https://fonts.googleapis.com/*'); */

/********** ↓ 00_リセットcss:デフォルトcss設定を初期化 ↓ **********/
h1,
h2,
h3,
ul,
li,
p,
figure,
body {
    font-family: "ヒラギノ角ゴ ProN",
                "メイリオ",
                "ＭＳ Ｐゴシック",
                sans-serif;
	margin: 0;
	padding: 0;
    text-align: center;
	box-sizing: border-box;
	color: #333;
    background-color: #eee;
	/* ここを変更する際は ”a” も一緒に同じフォントカラーに変更 */
}

a {
	text-decoration: none;
	color: #333;
}

ul {
	list-style-type: none;
}

a.anchor {
    display: block;
    padding-top: 7.3rem;
    margin-top: -7.3rem;
}

/********** ↓ 全体のページ幅 ↓ **********/
body {
    margin: 0;
    width: 100vw;
	min-width: 360px;
    font-family: sans-serif;
}

/********** ↑ 全体のページ幅 ↑ **********/

/********** ↑ 00_リセットcss:デフォルトcss設定を初期化 ↑ **********/


/********** ↓ header ↓ **********/
header {
    border-top: 0.5rem solid #222;
    position: fixed;
    top: 0;
    z-index: 1000;
	min-width: 360px;
	min-height: 80px;
    background-color: #eee;
	border-bottom: 2px solid #777;
}

#logo {
    padding-top: 0.8rem;
    font-size: 2.0rem;
    font-weight: bold;
}

.drawer {
	width: 100vw;
	height: auto;
}

.drawer-hidden {
	display: none;
}

/* ↓ PC画面サイズ固有のCSS ↓ */
@media screen and (min-width: 900px) {
	.drawer-list {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.drawer-item {
		width: 25%;
		font-weight: bold;
		height: 100%;
		text-align: center;
		position: relative;
	}

	.drawer-item a span {
		display: block;
		width: 100% - 1px;
		border-right: 1px solid #777;
	}

	.drawer-item:last-child {
		border: none;
	}

	.drawer-item a {
		display: block;
		padding: 0.6rem 0rem;
		font-size: 1.2rem;
		text-align: center;
		height: 100%;
	}

	.drawer-item a:hover {
		color: #fff;
		background-color: #999;
	}
}
/* ↑ PC画面サイズ固有のCSS ↑ */

/* ↓ サイトトップページへ戻るためのボタン設定 ↓ */
/*参考サイト:https://cotodama.co/pagetop/*/
#site_top {
	width: 80px;
	height: 80px;
	position: fixed;
	right: 0.8rem;
	bottom: 0.8rem;
	background-color: #333;
	opacity: 0.6;
	border-radius: 40px;
}

#site_top a {
	position: relative;
	display: block;
	width: 100px;
	height: 60px;
	text-decoration: none;
}

#site_top a::before {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: '\f102';
	font-size: 30px;
	color: #fff;
	position: absolute;
	width: 0;
	height: 0;
	top: -14px;
	bottom: 0;
	right: 36px;
	left: 0;
	margin: auto;
	text-align: center;
}
/* ↑ サイトトップページへ戻るためのボタン設定 ↑ */

/********** ↑ header ↑ **********/

/******** ↓ main ↓ ********/
/* ヘッダースペース（トップ画像開始位置）の確保 ※トップ画像が重ならないように */
.header-Separated {
    height: 7.3rem;
}

/* ページ内画像の設定 */
.TOP-image,
.MID-image {
    width: 100%;
    max-height: 93vh;
    margin-bottom: 2.4rem;
    background: #777;
}

/* ↓ 各コンテンツの設定 ↓ */
#profile,
#portfolio {
    width: 80%;
    margin: 0 auto;
    margin-bottom: 2.8rem;
}

#profile .Sub1-header,
#portfolio .Sub1-header {
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 0.8rem;
}

#profile .Sub2-header,
#portfolio .Sub2-header {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 0.4rem;
}

#profile p,
#profile H3,
#profile ul li {
    text-align: left;
    margin-left: 1.0rem;
}

#profile section,
#profile p {
    margin: 0rem 0rem 1.0rem 0.8rem;
}
/* ↑ 各コンテンツの設定 ↑ */

/* ↓ portfolio の画像レイアウト設定 ↓ */
#sub {
	display: flex;
	justify-content: space-around;
	/* flex設定については場合によっては切り替え */
	/* justify-content: space-between; */
    flex-wrap: wrap;
}

#sub section {
    margin-bottom: 0.8rem;
    width: 30%;
}

#sub section img {
    width: 100%;
    border-radius: 3%;
    box-shadow: 0 0 5px #333;
    position:relative;
	top:0;
}

#sub a:hover H3 {
    text-decoration: underline;
}

#sub a:hover img {
    top:-3%;
	transition:0.3s;
}
/* ↑ portfolio の画像レイアウト設定 ↑ */

/******** ↓ タブレット画面サイズ以下のCSS ↓ **********/
@media screen and (max-width: 899px) {
	/* ロゴの左寄せ */
	#logo {
		float: left;
    	padding-top: 1rem;
		padding-left: 1.8rem;
    	font-size: 1.6rem;
	}

	/* ↓ ハンバーガーメニュー ↓
		参考サイト:https://yuntu-tek.com/hamburger-menu/
	*/
	/* ハンバーガーアイコンの設置スペース */
	.drawer-open {
		float: right;
		display: flex;
		height: 10vw;
		min-height: 80px;
		width: 10%;
		justify-content: center;
		align-items: center;
		position: relative;
		z-index: 100;
		/* 重なり順を一番上に */
		cursor: pointer;
		margin-right: 1rem;
	}

	/* ハンバーガーメニューのアイコン */
	.drawer-open span,
	.drawer-open span:before,
	.drawer-open span:after {
		content: '';
		display: block;
		height: 3px;
		width: 25px;
		border-radius: 3px;
		background: #333;
		transition: 0.5s;
		position: absolute;
	}

	/* 三本線のうち一番上の棒の位置調整 */
	.drawer-open span:before {
		bottom: 8px;
	}

	/* 三本線のうち一番下の棒の位置調整 */
	.drawer-open span:after {
		top: 8px;
	}

	/* アイコンがクリックされたら真ん中の線を透明にする */
	#drawer-check:checked ~ .drawer-open span {
		background: rgba(255, 255, 255, 0);
	}

	/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
	#drawer-check:checked ~ .drawer-open span::before {
		bottom: 0;
		transform: rotate(45deg);
	}

	#drawer-check:checked ~ .drawer-open span::after {
		top: 0;
		transform: rotate(-45deg);
	}

	/* メニューのデザイン*/
	.drawer-content {
		width: 40vw;
		height: 100%;
		position: fixed;
		top: 0;
		left: 100%;
		/* メニューを画面の外に飛ばす */
		z-index: 99;
		background: #222;
		transition: .5s;
		padding-top: 80px;
	}

	/* アイコンがクリックされたらメニューを表示 */
	#drawer-check:checked ~ .drawer-content {
		left: 60vw;
		/* メニューを画面に入れる */
	}

	.drawer-item {
		padding: 0.5rem 0;
		background-color: #222;
	}

	.drawer-item a span {
		color: #fff;
		font-size: 1.4rem;
	}
	/* ↑ ハンバーガーメニュー ↑ */

	/* ヘッダースペース（トップ画像開始位置）の行幅調整 */
	.header-Separated {
		height: 80px;
	}

	/* ↓ portfolio の列幅調整 ↓ */
	#sub section {
		width: 300px;
	}

	#sub {
		justify-content: space-around;
	}
	/* ↑ portfolio の列制御 ↑ */

	/* コンテンツ幅調整 */
	#profile,
	#portfolio {
		width: 90%;
	}

}

/******** ↑ タブレット画面サイズ以下のCSS ↑ **********/

/******** ↑ main ↑ ********/

/******** ↓ footer ↓ ********/
footer {
    padding: 0.8rem 0rem 1.4rem;
    background-color: #222;
    text-align: center;
}

footer small {
    font-weight: bold;
    color: #fff;
}

/******** ↑ footer ↑ ********/