@charset "UTF-8";

section {
	width: 95%;
	line-height: 1.5;
	font-size: 1.1em;
	margin: var(--dynamic-margin-large) auto
}

section p {
	text-align: left;
}

.flex-row {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 16px;
	margin: 0 auto
}

.photo-left {
	flex-direction: row;
}

.photo-right {
	flex-direction: row-reverse;
}

/*--------------------------------------------
	profileセクション
	運営情報として私のプロフィールを公開
--------------------------------------------*/
.profile {
	max-width: 800px;
	margin-top: var(--dynamic-margin-small)
}

.profile .container {
	margin-top: var(--dynamic-margin-verylarge);
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	position: relative;
	text-align: left
}

.profile .name-block {
	display: flex;
	flex-direction: column;
	position: relative;
	writing-mode: vertical-rl;
	text-orientation: upright;
	top: 10px;
	z-index: 1
}

.profile .name-block .kanji {
	font-size: 2em;
	text-shadow: 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color)
}

.profile .photo {
	width: 30%;
	height: auto;
	margin-left: -20px;
	position: relative
}

.profile .photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px
}

.profile .info-table {
	width: 63%;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	margin-left: 10px;
	border-collapse: collapse;
	text-shadow: 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color), 0px 0px 3px var(--main-color)
}

.profile .info-table td {
	padding: 4px 8px;
	border: none
}

.profile .info-table td:first-child {
	text-align: right;
	width: 140px
}

.profile .info-table a {
	color: var(--text-color)
}

@media (max-width: 550px) {
	.profile .container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative
	}

	.profile .name-block {
		display: flex;
		flex-direction: row;
		align-items: center;
		writing-mode: horizontal-tb;
		text-orientation: mixed;
		text-align: center
	}

	.profile .name-block .kanji {
		font-size: 1.4em;
		margin-right: 5px
	}

	.profile .name-block .hiragana {
		font-size: 0.8em
	}

	.profile .photo {
		margin: 7px auto
	}

	.profile .info-table {
		width: 100%;
		position: static;
		top: auto;
		right: auto;
		transform: none;
		margin-left: 0
	}
}

/*--------------------------------------------
	Operationalセクション
	運用方針や目的を記載する
--------------------------------------------*/
.operation {
	max-width: 800px
}

.operation .flex-row .photo {
	width: 25%;
	height: auto;
	border-radius: 8px
}

.operation .flex-row .text {
	width: 75%
}

.operation .paypal-button {
	margin-top: calc(3vh + 5px);
	width: 200px;
	height: auto
}

@media (max-width: 650px) {
	.flex-row {
		flex-direction: column
	}

	.operation .flex-row .photo {
		width: 100%;
		max-width: 200px
	}

	.operation .flex-row .text {
		width: 100%
	}
}

/*--------------------------------------------
	御剣セクション
	御剣に関する説明
--------------------------------------------*/
.mitsurugi {
	max-width: 800px
}

.mitsurugi .flex-row .photo {
	width: 30%;
	height: auto;
	border-radius: 8px;
	position: relative;
	background: url('/img/information/og_thumbnail_hero.jpg');
	background-size: auto 100%;
	background-position: center center;
	transition: background-size 0.3s ease, background-position 0.3s ease;
	aspect-ratio: 110 / 63
}

.mitsurugi .flex-row .photo:hover {
	/*横を100%にしているので、写真の繰り返しを防ぐため、縦を少しoverさせた写真を使う。*/
	background-size: auto 105%;
	background-position: center center
}

.mitsurugi .photo-link {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	border-radius: 8px;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: var(--text-color);
	text-decoration: none;
	background-color: rgba(0, 0, 0, 0.5);
	/* 文字が見やすいよう半透明背景 */
	font-size: 1.1em
}

.mitsurugi .photo-link:hover {
	opacity: 0;
	transition: opacity 0.7s ease
}

.mitsurugi .flex-row .text {
	width: 70%
}

@media (max-width: 650px) {
	.mitsurugi .flex-row .photo {
		width: 100%
	}

	.mitsurugi .flex-row .text {
		width: 100%
	}
}