@charset "utf-8";

/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

/*Google Fontsの読み込み
---------------------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Sans+JP:wght@100..900&display=swap');


/*CSSカスタムプロパティ（サイト全体を一括管理する為の設定）
---------------------------------------------------------------------------*/
:root {
	--text-color: #000;
	/*テキストカラー*/

	--primary-color: #333;
	/*テンプレートのメインまたはアクセントカラー*/
	--primary-inverse-color: #fff;
	/*上のprimary-colorの対となる色*/

	--global-space: 5vw;
	/*サイト内の左右へとる余白を一括管理しています。画面幅100%＝100vwです。*/
}


/*全体の設定
---------------------------------------------------------------------------*/
body * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html,
body {
	height: 100%;
	font-size: 16px;
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
	/*基準となるフォントサイズ。*/
}

/*画面幅900px以上の追加指定*/
@media screen and (min-width:900px) {

	html,
	body {
		font-size: 16px;
		/*基準となるフォントサイズ。*/
	}

}

/*追加指定ここまで*/

/*--------------------
全体に対するカーニングと文字間の指定
--------------------*/
body {
	font-family: "Inter", "Noto Sans JP", 'Yu Gothic', 'YuGothic', "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "Osaka", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;
	font-feature-settings: "palt";
	letter-spacing: 0.04rem;
	font-size: 1rem;
	line-height: 2rem;
	font-weight: 300;
	/*フォント種類（ゴシック）*/
	font-optical-sizing: auto;
	-webkit-text-size-adjust: none;
	background: #F8F7F6;
	/*背景色*/
	color: var(--text-color);
	/*文字色。css冒頭で指定しているtext-colorを読み込みます*/

}

/*リセット*/

ul,
ol {
	list-style: none;
}

section li {
	margin-left: 1rem;
}

/*table全般の設定*/
table {
	border-collapse: collapse;
}

/*画像全般の設定*/
img {
	border: none;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

/*videoタグ*/
video {
	max-width: 100%;
}

/*iframeタグ*/
iframe {
	width: 100%;
}

/*他*/
input {
	font-size: 1rem;
}

section+section {
	margin-top: 3rem;
}


/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: var(--text-color);
	/*文字色。css冒頭で指定しているtext-colorを読み込みます*/
	transition: 0.3s;
	/*hoverまでにかける時間。0.3秒。*/
	text-decoration: none;
}

/*マウスオン時*/
a:hover {
	text-decoration: none;
	/*下線を消す*/
	color: var(--primary-color);
	/*文字色。css冒頭で指定しているprimary-colorを読み込みます*/
	opacity: 0.8;
}

/*コンテンツ（フッター関連「以外」を囲むブロック）
---------------------------------------------------------------------------*/
#contents {
	flex: 1;
	/* padding: var(--global-space); */
	padding: 0 0 50px;
	max-width: 1080px;
	margin: 0 auto;
	/*コンテンツ内の余白。css冒頭で指定しているglobal-spaceを読み込みます。*/
}

/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	display: flex;
	/*flexボックスを使う指定*/
	align-items: center;
	/*垂直揃えの指定。天地中央に配置されるように。*/
	justify-content: space-between;
	flex-wrap: wrap;
	z-index: 1;
	width: 100%;
	max-width: 1080px;
	padding: 2rem;
	margin: 0 auto;
}

/*ロゴ（※画像にする場合）*/
header img {
	display: block;
	width: 120px;
	/*ロゴ画像の幅*/
}

/*ロゴ（テキストにする場合）*/
#logo a {
	display: block;
	text-decoration: none;
	font-size: 2rem;
	font-weight: 700;
}

/*画面幅900px以上の追加以下定*/
@media screen and (max-width:900px) {

	/*ヘッダーブロック*/
	header {
		justify-content: flex-end;
		align-items: center;
		flex-direction: column-reverse;
		padding: 2rem 2rem 0;
	}

	/*ロゴ（※画像にする場合）*/
	header img {
		width: 100px;
		margin-bottom: 20px;
	}

	/*ロゴ（テキストにする場合）*/
	#logo a {
		font-size: 1.6rem;
		text-align: center;
	}
}


/*main
---------------------------------------------------------------------------*/



/*フッターメニュー
---------------------------------------------------------------------------*/
/* index用 */
#footer-menu-list {
	max-width: 1080px;
	margin: 0 auto !important;
	padding: 0 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	/*ブロック内の余白*/
	text-align: center;
	/*テキストを中央に*/
	font-size: 0.8rem;
	/*文字サイズ。bodyのfont-sizeの80%です。*/
}

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

	#footer-menu-list li:nth-of-type(1) {
		width: 30%;
		text-align: left;
	}

	#footer-menu-list li:nth-of-type(3) {
		width: 30%;
		text-align: right;
		font-size: 0.6rem;
	}
}

/* コピーライト */
footer small {
	font-size: 100%;
}

footer {
	background: #fff;
	font-size: 0.7rem;
	/*文字サイズ。bodyのfont-sizeの70%です。*/
	text-align: center;
	/*内容をセンタリング*/
	padding: 1rem;
	/*ボックス内の余白*/
}

/*リンクテキスト*/
footer a {
	color: inherit;
	text-decoration: none;
}


/*アーカイブ一覧ブロック
---------------------------------------------------------------------------*/
/*記事の下に空ける余白*/
.lineup {
	padding: 1rem;
}

.archive-list {
	width: 100%;
	display: flex;
	flex-flow: column wrap;
	border-top: 1px solid #ddd;
}

.archive-list div {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	border-bottom: 1px solid #ddd;
	padding: 1rem;
}

.archive-list dt {
	font-size: 1.7rem;
	font-weight: 500;
	line-height: 1.6;
}

/*ブロック内のspan */
.archive-list dt span {
	display: block;
	color: #CCC;
	font-size: 0.8rem;
	font-weight: 800;
}

.archive-list dd {
	width: 50px;
	text-align: center;
	color: #1928FF;
	font-size: 0.8rem;
}

/*icon-bg2*/
.archive-list .icon-bg2 {
	background: #ff0000;
	/*背景色*/
	color: #fff;
	/*文字色*/
}

/*画面幅700px以上の追加指定*/
@media screen and (min-width:700px) {

	/*ブロック全体*/
	.archive-list {
		display: flex;

		/*横並びの指定*/
	}

}


/*画面幅800px以上の追加指定*/
@media screen and (min-width:900px) {

	/*listブロック全体を囲むブロック*/
	.list-grid1 {
		grid-template-columns: repeat(2, 1fr);
		/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
		gap: 1rem;
		/*ブロックの間に空けるマージン的な指定*/
	}

}

/*追加指定ここまで*/



aside .text {
	width: 700px;
	max-width: 100%;
	padding: 2rem;
	font-size: 0.9rem;
}

.blue {
	color: #1928FF;
}

.hv-wh {
	padding: 20px;
	border-radius: 30px;
	transition: all 0.3s;
}

.hv-wh:hover {
	background-color: #fff;
}


.hv-gr {
	padding: 20px;
	border-radius: 30px;
	transition: all 0.3s;
}

.hv-gr:hover {
	background-color: #f7f6f6;
}

.hv-sp {
	padding: 20px;
	opacity: 0;
}

/*---------------------------------------------------------------------------*/
/*各年号ーBW一覧ここから*/
/*---------------------------------------------------------------------------*/


@media screen and (max-width:899px) {
	#contents {
		margin-top: 20px;
	}
}

#nav-arrow {
	max-width: 1080px;
	margin: 0 auto !important;
	padding: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	/*ブロック内の余白*/
	text-align: center;
	/*テキストを中央に*/
	font-size: 1rem;
}

/*list-grid1
---------------------------------------------------------------------------*/
/*listブロック全体を囲むブロック*/
.list-grid1 {
	display: grid;
	padding: 0 1rem;
	column-gap: 10%;
	color: var(--text-color);
	/*文字色。css冒頭で指定しているtext-colorを読み込みます*/
}

/*ボックス１個あたり*/
.list-grid1 .list {
	display: grid;
	padding: 1rem;
	/*ボックス内の余白*/
	grid-template-columns: repeat(2, 1fr);
	align-items: flex-start;
	/* grid-template-rows: auto 2fr; */
	/*１つ目（この場合はfigure要素のサイズ）は自動に、２つ目（この場合はtextブロック））を残った幅で使う*/

}

.list-grid1 a:nth-of-type(1) {
	border-bottom: #ddd solid 1px;
	padding-bottom: 1rem;
}

.list-grid1 a:nth-of-type(2) {
	padding-top: 1rem;
}

/*ボックス内のp要素*/


.list-grid1 .list .entry-name {
	padding-left: 20px;

}

.list-grid1 .list .category {
	font-size: 0.85rem;
	/*文字サイズを85%に*/
	margin: 8px 0;
}

.list-grid1 .list h4 {
	font-size: 1.2rem;
	/*文字サイズを85%に*/
	letter-spacing: 0.3rem;
	font-weight: 400;
}

.list-grid1 .list .kana {
	font-size: 0.7rem;
	/*文字サイズを80%に*/
	letter-spacing: 0.1rem;
	font-weight: 400;
}

/*ボックス内のfigure画像*/
.list-grid1 .list figure {
	width: 150px;
	height: 150px;
	margin: 0 auto;
	/* box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1); */
	/*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.1は色が10%出た状態。*/
	/* background: #fff; */

}

.list-grid1 .list figure img {
	margin-bottom: 0.5rem;
	width: 150px;
	height: 150px;
	object-fit: scale-down;
	/*画像の下に空けるスペース*/
}

/*画面幅800px以上の追加指定*/
@media screen and (min-width:800px) {

	/*listブロック全体を囲むブロック*/
	.list-grid1 {
		grid-template-columns: repeat(2, 1fr);
		/*2列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
		gap: 1rem;
		/*ブロックの間に空けるマージン的な指定*/
	}

	.list-grid1 a:nth-of-type(1) {
		border-bottom: none;
		padding-bottom: 0rem;
	}

	.list-grid1 a:nth-of-type(2) {
		padding-top: 0rem;
	}

	.list-grid1 .list .category {
		margin-bottom: 30px;
	}

	/*ボックス内のfigure画像*/
	.list-grid1 .list figure {
		width: 200px;
		height: 200px;
	}

	.list-grid1 .list figure img {
		width: 200px;
		height: 200px;
		/*画像の下に空けるスペース*/
	}
}




.count-hr {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-left: 1rem;
}

.count-hr p {
	width: 100%;
	height: 1px;
	background-color: #ddd;
}

.count-hr span {
	margin: 0 10px;
	width: 20px;
	text-align: center;
	color: #ccc;
	font-size: 0.8rem;
}

/* カウント用 */
body {
	counter-reset: number 0;
}

.count-hr span::before {
	counter-increment: number 2;
	content: "("counter(number) ")";
}



/* ページ内リンク固定スティッキー */
#page-list {
	position: sticky;
	bottom: 20px;
	width: 100%;
	display: flex;
	justify-content: center;
}

#page-list li a {
	display: block;
	margin: 10px;
	text-decoration: underline;
	color: #1928FF;
}

/*---------------------------------------------------------------------------*/
/*会員ワークページ　共通部分ここから*/
/*---------------------------------------------------------------------------*/

.main-hr {
	width: 100%;
	height: 1px;
	background-color: #ddd;
}

#nav-arrow.work li:first-child {
	width: 25%;
	text-align: left;
}

#nav-arrow.work li:last-child {
	width: 25%;
	text-align: right;
}

#nav-arrow.work li.name-box {
	width: 40%;
	text-align: center;
}

#nav-arrow .category {
	font-size: 0.8rem;
	margin-right: 10px;
}

#nav-arrow .entry-name h2 {
	font-size: 1.5rem;
	letter-spacing: 0.5rem;
	font-weight: 400;
	display: block;
	overflow: hidden;
}

#nav-arrow .entry-name h2 span {
	display: block;
	margin-right: -0.5rem;
}

#nav-arrow .kana {
	font-size: 0.8rem;
	letter-spacing: 0.2rem;
	font-weight: 400;
	text-align: center;
}


/* 詳細コンテンツ */

#work-box {
	padding: 2.4rem 2rem;
}


#work-box .member-work {
	width: 680px;
	max-width: 100%;
	margin: 0 auto;
}

#work-box .member-work img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

#work-box .caption {
	margin: 2rem 1rem;
	width: 740px;
	max-width: 90%;
}

#work-box .caption h3 {
	margin-bottom: 5px;
	font-weight: 400;
	font-size: 1rem;
}

#work-box .caption p {
	margin-bottom: 30px;
	font-weight: 300;
	font-size: 0.8rem;
	line-height: 1.7rem;
}

#work-box .sns-list {
	display: flex;
	column-gap: 20px;
	font-size: 0.7rem;
}

#work-box .sns-list a {
	text-decoration: underline;
}


/*各アーカイブ詳細用*/
#works-menu-list {
	max-width: 1080px;
	margin: 0 auto !important;
	padding: 0 20px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	column-gap: 20px;
	/*ブロック内の余白*/
	text-align: center;
	/*テキストを中央に*/
	font-size: 0.8rem;
	/*文字サイズ。bodyのfont-sizeの80%です。*/
}

#works-menu-list a {
	color: #1928FF;
}

@media screen and (max-width:899px) {
	#works-menu-list {
		justify-content: center;
	}
}

/* オンスクリーンページ用 */

#work-box .screen-work {
	width: 980px;
	max-width: 100%;
	margin: 0 auto;
}

#work-box .screen-work figure {
	width: 180px;
	margin: 40px auto 10px;
}

#work-box .screen-work figcaption {
	margin: 0 auto 20px;
	width: 100%;
	max-width: 100%;
	text-align: center;
	font-size: 0.8rem;
}