@charset "utf-8";

/*========= レイアウトのためのCSS ===============*/

html {
	scroll-behavior: smooth;
}

body {
	font-size: clamp(0.875rem, calc(0.75rem + 0.25vw), 1.5rem);
}

hr {
	display: block;
	border: .1px solid #ccc;
	width: 80%;
	text-align: center;
	opacity: .3;
}

h1 {
	font-size: clamp(2rem, 1.8rem + 1vw, 3rem);
	color: #0000cd;
	margin: 1em 0;
	font-family: 'Times New Roman', 'Georgia', 'serif';
	text-align: center;
	text-shadow: 1px 2px 5px #fff;
	position: absolute;
	top: 10%;
	/* 上端からの距離を調整 */
	left: 22%;
	/* 左端からの距離を調整 */
	background-color: transparent;
	/* 背景を透明に */
	z-index: 1;
	/* オーバーレイより手前に配置 */
}

h1 a {
	color: #0000cd;
}

h1 a:hover {
	color: #fff;
}

h2 {
	display: block;
	width: 100%;
	font-family: 'Times New Roman', 'Georgia', 'serif';
	font-size: clamp(1.5rem, 1.5rem + 2.25vw, 2.75rem);
	text-align: center;
	padding: 5vw 0 3vw;
}

small {
	display: block;
	text-align: center;
	margin: 10px 0 30px 0;
}

img {
	width: 100%;
	height: auto;
}

.contents_box {
	width: 90%;
	margin: auto;
}


/*========= 左固定レイアウトのためのCSS ===============*/

/*左と右を囲う全体のエリア*/
#wrapper {
	position: relative;
	/*position stickyの基点にするため relativeをかける*/
	display: flex;
	/*左エリア、右エリア横並び指定*/
	flex-wrap: wrap;
	/*ボックスの折り返し可*/
	line-height: 1.5;
}

/*左エリア*/
#fixed-area {
	/*左固定記述*/
	position: -webkit-sticky;
	/*Safari用*/
	position: sticky;
	top: 0;
	/*横半分50%　縦を100vhにする*/
	width: 40%;
	height: 100vh;
	/*装飾のためのCSS*/
	display: flex;
	justify-content: center;
	align-items: center;
	background: url("../images/bg_nav_image.jpg") no-repeat center;
	background-size: cover;
	color: #fff;
	overflow: hidden;
	/* オーバーレイを隠す */
}

#overlay {
	position: absolute;
	/* オーバーレイの初期設定 */
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: url("../images/bg_nav_image01.jpg") no-repeat center;
	background-size: cover;
	opacity: 0;
	/* 最初は透明にする */
	transition: opacity 0.5s ease;
	/* フェードインのアニメーションを設定 */
}


/* ------------hamburger_menu----------- */

.hamburger-menu {
	width: 55%;
}

.hamburger-menu input {
	display: none;
}

.hamburger-menu span {
	display: none;
}

/* -------- nav_area --------- */

.scroll {
	/* ナビゲーションのスタイル */
	position: absolute;
	top: 40%;
	/* 上端からの距離を調整 */
	left: 22%;
	/* 左端からの距離を調整 */
	background-color: transparent;
	/* 背景を透明に */
	z-index: 1;
	/* オーバーレイより手前に配置 */
}

.scroll #g_nav {
	width: 100%;
	margin: .5rem;
	font-size: 2rem;
	font-weight: bold;
	font-family: 'Times New Roman', 'Georgia', 'serif';
	opacity: none;
}

#g_nav li {
	padding: 10px;
}

#g_nav li a {
	color: #0000cd;
}

#g_nav li a:hover {
	opacity: 1;
	color: #fff;
	border-bottom: 1px solid #0000cd;
}

/*右エリア*/
#container {
	/*横半分にする*/
	width: 60%;
}

/*右各セクション 装飾のためのCSS*/
section {
	margin: 0 30px;
}

section.area {
	margin-bottom: 3vw;
}

/* -------- profile_area --------- */

.p_box {
	text-align: center;
	margin-bottom: 5em;
}

#p_list {
	width: 83%;
	margin: auto;
	font-size: 1.125rem;
	line-height: 1.8;
	display: inline-block;
	text-align: justify;
}

.p_list {
	opacity: 0;
	animation: p_list 1s ease forwards;
}

@keyframes p_list {
	100% {
		opacity: 1;
	}
}

.txt00 {
	animation-delay: 1s;
}

.txt01 {
	animation-delay: 2s;
}

.txt02 {
	animation-delay: 3s;
}

.txt03 {
	animation-delay: 4s;
}

.txt04 {
	animation-delay: 5s;
}

.txt05 {
	animation-delay: 6s;
	margin-bottom: 2vw;
}

.txt06 {
	animation-delay: 7s;
}

#p_list .p_btn {
	padding-top: 20px;
}

#p_list .p_btn a {
	color: #000;
	border: 1px solid #737373;
	border-radius: 20px;
	padding: .25em 1em;
	font-size: 1rem;
}


/* -------- skill_area --------- */

#skill_area {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#skill_area .skill_li {
	width: 25%;
	margin: 0 1rem 2rem;
}

#skill_area .skill_li .skill_img {
	text-align: center;
	margin: 20px auto;
	padding: 0 2rem;
}

#skill_area .skill_li .skill_txt {
	margin: 5px 0;
	text-align: justify;
}


/* -------- works_area --------- */

#works_area {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	width: 100%;
}

#works_area .works {
	width: 48%;
	padding: 1em;
	margin-bottom: 2rem;
}

#works_area .works_txt_box {
	padding: 5px;
}

h4 {
	margin: .5rem 0;
}

#works_area .works_txt_box .works_txt {
	padding-bottom: 1rem;
	text-align: justify;
}

#works_area .works_txt_box .works_txt .works_li {
	font-size: .8rem;
}

#works_area .works .btn,
#p_list .p_btn {
	text-align: center;
	width: 100%;
	margin: auto;
}

#works_area .works .btn a {
	color: #000;
	border: 1px solid #737373;
	border-radius: 20px;
	padding: .25em 1em;
	font-size: 1rem;
}

#works_area .works .btn a:hover,
#p_list .p_btn a:hover {
	color: #fff;
	background-color: #295bff;
	width: 100%;
	animation-name: btn;
	animation-fill-mode: both;
	animation-duration: 1s;
	opacity: 0;
}

@keyframes btn {
	0% {
		opacity: 0;
		/*ここに開始のCSSを記述*/
	}

	100% {
		opacity: 1;
		/*ここに終了のCSSを記述*/
	}
}

#works_area .works .works_txt_box .works_txt .plan_txt .plan {
	width: 100%;
	padding-top: 1vw;
}

#works_area .works .works_txt_box .works_txt .plan_txt .plan dt {
	font-weight: bold;
	padding: 1vw;
	background-color: #f4f4f4f4;
}

#works_area .works .works_txt_box .works_txt .plan_txt .plan dd {
	padding: 1vw;
	background-color: #f4f4f4f4;
}

#works_area .works .works_txt_box .works_txt .plan_txt summary {
	cursor: pointer;
	padding: 1rem 0;
	font-size: 1rem;
	font-weight: bold;
}

#works_area .works .works_txt_box .works_txt .plan_txt summary:hover {
	text-decoration-line: underline;
	opacity: .75;
}


#works_li_btn {
	width: 100%;
	text-align: center;
	padding-bottom: 2em;
}

#works_li_btn a {
	color: #000;
	font-size: 1.25em;
	font-weight: bold;
	padding: 0.5em;
}

#works_li_btn a:hover {
	background: linear-gradient(transparent 50%, orange 50%);
	animation-name: li_btn;
	animation-duration: 3s;
	animation-iteration-count: 5;
}

@keyframes works_li_btn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

#design_area .design_li1,
#design_area .design_li2 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	width: 100%;
	margin-bottom: 1em;
}

#design_area .design_li1 li {
	width: 30%;
	margin: 1%;
	text-align: center;
	padding: 1%;
	border: 1px solid #ccc;
	cursor: pointer;
}

#design_area .design_li2 li {
	width: 20%;
	margin: 1%;
	cursor: pointer;
}

#logo_area .logo {
	width: 95%;
	margin-bottom: 1rem;
}

#logo_area .logo li {
	width: 50%;
	cursor: pointer;
}

#banner_area #logo_area {
	padding: 1rem;
}

.title {
	font-size: 1.5rem;
	margin: 10px 0;
}

#banner_area .banner {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

#banner_area .banner li {
	width: 48%;
	margin: 5px auto;
	cursor: pointer;
}


/*-- 追従するトップへ戻るボタン --*/

#page-top {
	position: fixed;
	right: 5px;
	bottom: 20px;
	height: 50px;
	text-decoration: none;
	font-weight: bold;
	transform: rotate(90deg);
	font-size: 90%;
	line-height: 1.5rem;
	color: #737373;
	padding: 0 0 0 35px;
	border-top: solid 1px;
}

#page-top::before {
	content: "";
	display: block;
	position: absolute;
	top: -1px;
	left: 0px;
	width: 15px;
	border-top: solid 1px;
	transform: rotate(35deg);
	transform-origin: left top;
}

/*＝＝＝＝＝＝＝＝＝＝＝1080px以下の見え方＝＝＝＝＝＝＝＝＝＝＝＝＝*/

@media screen and (max-width : 1080px) {
	#wrapper {
		display: block;
		/*display:flex;を解除*/
	}

	h1 {
		position: unset;
	}

	#fixed-area {
		position: relative !important;
		/*position stickyを解除*/
		width: 100%;
		/*横幅を100%にして1列に見せる*/
		height: 40vh;
		/*縦幅を100vh⇒40vh　※任意の高さに設定可能*/
	}

	/* ------- hamburger.menu ------ */

	.hamburger-menu span {
		display: block;
		text-align: center;
	}

	#menu-btn-check:checked~nav {
		left: 0%;
		/*メニューを画面内へ*/
	}

	.menu-btn {
		position: fixed;
		top: 4%;
		right: 4%;
		width: 60px;
		line-height: 4;
		opacity: 0.8;
		text-align: center;
		cursor: pointer;
		color: #fff;
		display: flex;
		height: 35px;
		justify-content: center;
		align-items: center;
		z-index: 90;
	}

	.menu-btn span,
	.menu-btn span:before,
	.menu-btn span:after {
		content: '';
		display: block;
		height: 3px;
		width: 25px;
		border-radius: 3px;
		background-color: #000;
		position: absolute;
	}

	.menu-btn span:before {
		bottom: 8px;
	}

	.menu-btn span:after {
		top: 8px;
	}

	#menu-btn-check:checked~.menu-btn span {
		background-color: rgba(255, 255, 255, 0);
		/*メニューオープン時は真ん中の線を透明にする*/
	}

	#menu-btn-check:checked~.menu-btn span::before {
		bottom: 0;
		transform: rotate(45deg);
	}

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

	.scroll {
		height: 100vh;
		position: fixed;
		top: 0;
		left: 100%;
		/*leftの値を変更してメニューを画面外へ 初期調整時は０にしてた*/
		background: rgb(245, 245, 245, .8);
		z-index: 1;
		width: 20%;
		min-width: 150px;
	}

	.scroll #g_nav {
		display: block;
		margin-top: 15rem;
	}

	#g_nav li {
		font-weight: bold;
	}

	#g_nav li a {
		box-sizing: border-box;
	}

	.p_list {
		font-size: 1rem;
		margin: auto;
	}


	#container {
		width: 100%;
		/*横幅を100%にして1列に見せる*/
	}

	/* -------- skill_area --------- */
	#skill_area {
		margin: inherit;
	}

	#skill_area .skill_li .img {
		padding: 50px;
	}

	#skill_area .skill_li {
		margin: 1rem;
	}
}

/*＝＝＝＝＝＝＝＝＝＝＝768px以下の見え方＝＝＝＝＝＝＝＝＝＝＝＝＝*/
@media screen and (max-width : 768px) {

	/* -------- skill_area --------- */

	#skill_area .skill_li .skill_img {
		width: 60%;
		padding: unset;
	}

	#skill_area .skill_li {
		width: 35%;
	}


	#works_area .works {
		width: 100%;
	}

}

/*＝＝＝＝＝＝＝＝＝＝＝428px以下の見え方＝＝＝＝＝＝＝＝＝＝＝＝＝*/

@media screen and (max-width : 428px) {

	h2 {
		margin: 0;
		padding: .5em 0;
	}


	section.area {
		margin: 0;
	}

	/* ------- hamburger.menu ------ */

	.scroll #g_nav {
		display: block;
		margin-top: 15rem;
	}

	#p_list {
		width: 90%;
	}


	/* -------- skill_area --------- */

	#skill_area {
		display: block;
	}

	#skill_area .skill_li {
		width: 100%;
		padding-bottom: 2rem;
		margin: auto;
	}

	#skill_area .skill_li .skill_img {
		padding: 10px 50px 10px;
	}

	#skill_area .skill_li .skill_txt {
		width: 80%;
		margin: auto;
	}

	#skill_area .skill_li .skill_img .btn {
		padding-bottom: 20px;
	}

	#works_area {
		display: block;
		width: 100%;
	}

	#works_area .works {
		margin: 0 auto 4rem;
		width: 90%;
		padding: 0;
	}

	#works_area .works_li {
		padding-bottom: 0px;
	}

	#works_area .works_txt_box {
		width: 100%;
		padding: 0;
		margin: auto;
	}

	#design_area .design_li1 li,
	#design_area .design_li2 li {
		width: 40%;
	}

	#logo_area .logo {
		width: 100%;
		padding-left: 0;
	}

	#logo_area .logo li {
		width: 100%;
	}

	#banner_area .banner {
		display: block;
	}

	#banner_area .banner li {
		width: 90%;
	}

	small {
		font-size: .7rem;
	}


}