@charset "UTF-8";

/* 用途不明CSS */


section h2 {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	font-size: 4rem;
	padding: 0%;
	margin: 0%;
}

article p {
	font-size: 1.6rem;
	line-height: 2.8;
	/*行間調整*/
	margin: 10px 30px;
}

article .menu-img {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	width: 80%;
	margin: auto;
}

@media screen and (max-width: 600px) {
	article {
		width: 95%;
	}
}

article .h1-out {
	text-align: center;
	margin: 15px 0 20px 0;
	font-family: "Meiryo";
}

article h1 {
	font-family: "Goldman", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 2.8rem;
	position: relative;
	display: inline-block;
	padding: 0 55px;
	margin: 0;
}

.h1-out h1 {
	font-family: "Meiryo", sans-serif;
	font-weight: bolder;
}



article p {
	font-size: 1.6rem;
	line-height: 2.8;
	/*行間調整*/
	margin: 10px 30px;
}

article .menu-img {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	width: 80%;
	margin: auto;
}

@media screen and (max-width: 600px) {
	article .menu-img {
		grid-template-columns: 1fr;
	}
}

article .menu-img figure {
	aspect-ratio: 1/1;
	border-radius: 50%;
	overflow: hidden;
	position: relative;
}

article .menu-img figure img {
	height: 100%;
	opacity: 0.7;
	/*不透明度を70％にして上にかぶせた文字を見やすく*/
}

article .menu-img figure figcaption {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	font-size: 3rem;
	color: #494a41;
	text-shadow: 4px 0px 3px rgba(255, 255, 255, 0.8);
	/*よく使う影をcolor.scssで変数に登録*/
}

.introduction {
	display: grid;
	grid-template-columns: 2fr 3fr;
	gap: 20px;
}

.introduction .html_work {
	margin-left: auto;
}

/*よく使う影をcolor.scssで変数に登録*/

/*以上、用途不明CSS*/



html {
	font-size: 62.5%;
	scroll-behavior: smooth;
}

body {
	margin: 0%;
	padding: 0%;
	background-color: beige;
}


/* headerに適用 */
header {
	background-color: beige;
	margin: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 20px;
	flex-wrap: wrap;
	/* これも推奨 */
}

.container {
	max-width: 1200px;
	/* ← 元が1000pxなら少し広めに */
	margin: 0 auto;
	padding: 0 10px;
	/* ← 左右の余白を10pxに */
}

.headerinn {
	float: left;
	text-align: left;
	padding-top: 20px;
	padding-bottom: 25px;
	padding-left: 20px;
	font-size: 2rem;
}

/* 左寄せしたいページだけに適用 */
.headerinn.left-align {
	padding-left: 0;
	/* ← 左端に詰める */
}

.header-title {
	display: flex;
	align-items: center;
	/* ★ 縦方向の中央揃え */
	height: 100%;
	/* ★ 親の高さに合わせる */
	font-size: 1.2em;
	gap: 0.5em;
}

.headerinn,
.nav-wrapper {
	display: block;
}



/* navメニュー用 */
nav {
	text-align: right;
	padding: 20px 20px 10px 20px;
}

nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: inline-block;
}

nav li {
	display: inline-block;
	padding: 0 10px;
	border-right: 1px solid #000;
}

nav li:last-child {
	border-right: none;
}



/* SNSアイコン用 */
.sns-icons {
	color: #000;
	margin-top: 10px;
	margin-right: 30px;
	display: flex;
	justify-content: flex-end;
	gap: 15px;
}

.sns-icons a {
	color: #000;
	font-size: 1.6rem;
	text-decoration: none;
}

.sns-icon {
	color: #000;
	width: 20px;
	height: 20px;
	vertical-align: middle;
}

.header-sns a img {
	width: 20px;
	height: 20px;
}

/* Font Awesomeのアイコンと画像の共通サイズ指定 */
.sns-icons i,
.sns-icons img {
	font-size: 24px;
	/* Font Awesome用 */
	width: 23px;
	/* 画像用 */
	height: 23px;
	/* 画像用 */
	display: inline-block;
	/* 並びを揃える */
	vertical-align: middle;
}

/* SNSアイコン共通クラス .sns-icons  */
.top-page .sns-icons {
	display: none;
}



/* ★Indexページに適用★ */
.catch {
	width: 100%;
	height: 100vh;
	/* 縦横いっぱいの指定をしているだけ */
	background-position: center center;
	background-size: cover;
	font-family: "Ribeye Marrow", serif;
	font-weight: 400;
	font-style: normal;
}

.catch p {
	position: absolute;
	top: 82%;
	left: 70%;
	font-size: 3rem;
	text-shadow: 0px 5px 10px #000000;
	color: white;
	padding: 0;
	margin: 0;
	word-break: break-word;
	max-width: 90%;
}

.catch {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
}


@media screen and (max-width: 768px) {
	.catch p {
		font-size: 1.2rem;
	}
}




/* ★Aboutページに適用★ */
.about {
	font-family: "Kaisei Decol", serif;
	font-weight: 400;
	font-style: normal;
	padding-top: 0;
}

.about .about-in {
	display: grid;
	grid-template-columns: 2fr 3fr;
	gap: 20px;
}

.about .about-in img {
	width: 70%;
}

.about-in p {
	font-size: 1.7rem;
	line-height: 2.2;
	/* 通常行間、ややゆったり */
	margin-bottom: 1.5em;
	/* 「研究論文紹介🎵」の下に余白つける用 */
}

/* 🎵研究論文紹介🎵の直後だけ間隔を広くする */
.about-in p br:first-of-type {
	line-height: 3;
	/* ここで1行分の余白を強めにとる */
	content: "";
	display: block;
	margin-bottom: 1em;
	/* IEなど対策で明示的に */
}

/* 論文タイトルと注釈の間を狭める */
.thesis-note {
	display: inline-block;
	margin-top: -10px;
	line-height: 1.2;
	font-size: 1.5rem;
}

.about-in {
	max-width: 1000px;
	/* コンテンツ幅の上限 */
	margin: 0 auto;
	/* 中央寄せ */
	padding: 0 1em;
	/* 左右均等な余白 */
	display: flex;
	/* 画像とテキストを横並び */
	flex-wrap: wrap;
	/* スマホでは縦並び */
	gap: 1.5em;
	/* 画像とテキスト間の間隔 */
	box-sizing: border-box;
}

.myname {
	font-size: 2.5rem;
	text-align: center;
	margin: 0 0 30px 0;
	padding: 0%;
}

.my-img {
	width: 100%;
	max-width: 240px;
	border-radius: 8px;
	object-fit: cover;
	flex-shrink: 0;
	display: block;
	margin: 0 auto 1em;
}

.about-text {
	font-size: 1.6rem;
	line-height: 1.5;
	flex: 1;
	min-width: 250px;
}

.research-title {
	margin-top: 1rem;
	margin-left: 0em;
	font-weight: bold;
}

.thesis-links p {
	margin: 0.3em 0;
	line-height: 1.4;
}

.thesis-note {
	margin-left: 0.5em;
	font-size: 1.4rem;
}

@media screen and (max-width: 1024px) {
	.about .about-in p {
		line-height: 1.8;
	}
}

@media screen and (max-width: 600px) {
	.about .about-in {
		display: block;
	}
}

/* About用スマホ対応レスポンシブ対応 */
@media screen and (max-width: 370px) {
	.about-in {
		flex-direction: column;
		/* 横並び → 縦並び */
		align-items: center;
		padding: 0 1em;
	}

	.myname {
		font-size: 1.2em;
	}

	.my-img {
		margin-left: 0;
		/* 左余白をリセット */
		width: 100%;
		/* 幅を親に合わせる */
		max-width: 240px;
		display: block;
		margin: 0 auto 1em;
		/* センター配置＋下余白 */
	}

	.about-text {
		width: 100%;
		padding-top: 1em;
		font-size: 1.4rem;
		/* 少し文字サイズ縮小 */
		line-height: 1.4;
		padding: 0 1em;
		/* 左右に少し余白 */
		text-align: center;
		/* 中央寄せでバランス取り */
	}

	nav ul {
		flex-direction: column;
		/* ナビ項目を縦に並べる */
		align-items: center;
	}

	nav ul li {
		margin-bottom: 0.5em;
	}

	.sns-icons {
		justify-content: center;
		margin-top: 1em;
	}

	.header-title img {
		max-width: 100px;
		/* ロゴ画像の縮小 */
		height: auto;
	}

	.thesis-links p {
		font-size: 0.85em;
		/* リンク文を少し縮小 */
	}



	.research-title {
		font-size: 1.2rem;
		margin-top: 1em;
		text-align: center;
	}

	.thesis-links p {
		font-size: 1.3rem;
		line-height: 1.4;
		word-break: break-word;
		/* 長いURLの折り返し対策 */
		text-align: left;
		/* 見やすさのため */
		padding: 0 0.5em;
	}

	.thesis-note {
		font-size: 1.2rem;
		display: block;
		/* 折り返しが自然になるように */
		margin-left: 0;
	}
}




/* ★Skillページに適用★ */

.shop {
	max-width: 1200px;
	/* 好みで調整。例: 960px, 1000px など */
	margin: 0 auto;
	/* 中央寄せ */
	padding: 0 20px;
	/* スマホなどで端にくっつかないように余白 */
}


.shop h1 {
	font-size: 2.5rem;
	padding: 30px 0;
}

.shop h1 span {
	background-color: rgba(255, 255, 255, 0.8);
	display: block;
	text-align: center;
}

.shop .catch {
	font-size: 1.7rem;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}

.shop h3 {
	font-size: 1.7rem;
	border-left: 3px solid #F6F7FF;
	padding-left: 10px;
	margin-bottom: 0;
	/*グリッドタイトルの位置*/
}

.shop .product {
	margin-top: 0;
	display: flex;
	justify-content: space-between;
	font-size: 1.5rem;
	margin-left: 0px;
	padding: 0;
	/*タイトル内容の説明*/
}

.shop .shop-out {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px 60px;
	width: 90%;
	margin: 30px auto 0;
}

/* 商品画像をレスポンシブに */
.shop-out img {
	width: 100%;
	height: auto;
	display: block;
}

.shop .shop-out img {
	width: 95%;
	margin: 0px 2.5% 15px;
}

.shop form {
	font-size: 1.5rem;
}

.shop form select {
	border: 1px solid #ccc;
	width: 4em;
	/*幅4文字分指定*/
}

.shop form button {
	background-color: #ccc;
	padding: 3px;
	border-radius: 5px;
	width: 10em;
	text-align: center;
}

.cart {
	font-size: 1.5rem;
}

.cart h1 {
	background-image: url(../image/bcg.jpg);
	background-size: cover;
	font-size: 2.5rem;
	padding: 30px 0;
}

.cart h1 span {
	background-color: rgba(255, 255, 255, 0.8);
	display: block;
	text-align: center;
}

.cart .cart-img {
	margin: 20px auto;
	width: 200px;
	display: block;
}

.cart .cart-list {
	width: 80%;
	margin: auto;
}

.cart .cart-list p {
	display: grid;
	grid-template-columns: 1fr 1fr;
	text-align: center;
	margin-top: 20px;
	border-bottom: 1px dotted #ccc;
}

.cart hr {
	margin: 50px 0;
}

.cart button {
	background-color: #ccc;
	padding: 3px;
	border-radius: 5px;
	width: 10em;
	text-align: center;
	margin: 30px auto;
	display: block;
}

.cart-button {
	display: inline-block;
	background-color: #ccc;
	padding: 3px;
	border-radius: 5px;
	width: 10em;
	text-align: center;
	font-size: 1.5rem;
	text-decoration: none;
	color: black;
}

.cart-button:hover {
	background-color: #aaa;
	color: white;
	cursor: pointer;
	transition: background-color 0.3s, color 0.3s;
}

select {
	margin-top: 5px;
	padding: 5px;
	font-size: 1em;
}


@media screen and (max-width: 600px) {
	.shop .shop-out {
		display: block;
	}
}




/* ★Worksページに適用★ */

article h1:before,
article h1:after {
	content: "";
	position: absolute;
	top: 50%;
	display: inline-block;
	width: 45px;
	height: 1px;
	background-color: #494a41;
}

article h1:before {
	left: 0;
}

article h1:after {
	right: 0;
}

.flex-section {
	background-color: #ffffff;
	/* 白背景 */

	padding: 30px;
	margin: 40px auto;
	/* セクションごとに中央寄せ＆余白 */
	max-width: 1200px;
	/* 最大幅を設定（お好みで調整） */
	display: flex;
	align-items: center;
	gap: 20px;
}

.flex-section img {
	width: 400px;
	height: auto;
	border: 2px solid #eee;
}

.flex-section .text-content {
	text-align: left;
	color: #444;
}

.heart-icon {
	color: whitesmoke;
}

.heart-button {
	background-color: skyblue;
	/* 背景色 */
	border: 0.1px solid gray;
	/* 枠線 */
	border-radius: 2px;
	/* 丸み */
	padding: 6px;
	/* 内側の余白 */
	cursor: pointer;
	transition: 0.3s;
}

.heart-button.liked {
	background-color: pink;
	color: white;
	border: 1px solid gold;
	border-radius: 2px;
	/* 丸み */
	cursor: not-allowed;
	opacity: 0.6;
}

textarea {
	display: block;
	width: 600px;
	height: 120px;
}

input {
	display: block;
	width: 200px;
}


/* Works用スマホ対応レスポンシブ */
@media (max-width: 370px) {
	header {
		flex-direction: column;
		align-items: stretch;
	}

	.headerinn,
	.nav-wrapper {
		width: 100%;
	}

	.nav-wrapper {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	nav {
		text-align: left;
		padding: 10px;
	}

	.sns-icons {
		margin-right: 0;
		justify-content: flex-start;
	}

	body {
		font-size: 14px;
		padding: 0 10px;
	}

	.flex-section {
		flex-direction: column;
	}

	.flex-section img {
		max-width: 100%;
		height: auto;
	}

	.text-content {
		width: 100%;
	}

	textarea {
		width: 100% !important;
	}

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

	button {
		width: 100%;
		box-sizing: border-box;
	}
}




/* フッター */
footer {
	background-color: beige;
	padding: 10px 20px;
	margin: 0%;
	text-align: center;
	vertical-align: bottom;
}