@charset "UTF-8";
:root {
	--main-color: #092147;
	--sub-color: #97B2DE;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Noto Sans JP', sans-serif;
	list-style: none;
}

.clearfix::after {
	display: block;
	content: "";
	clear: both;
}

/* 共通 */
html {
	color: var(--main-color);
	scroll-behavior: smooth;
	font-size: 14px;
}
a {
	color: var(--main-color);
	text-decoration: underline;
	text-decoration-color: var(--sub-color);
	text-decoration-thickness: 2px;
}
a:hover {
	opacity: 0.8;
	transition: 0.8s;
}
span {
	color: red;
}
body {
	background-color: #FCFDFF;
}

/* ヘッダー */
.index-h1 {
	color: var(--main-color);
	font-weight: 900;
	font-size: 28px;
	margin-top: 50px;
	text-align: center;
}
.index-logo {
	width: 100vw;
	height: 85vh;
	position: relative;
}
.index-logo img {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}
.index-h1::before {
	content: "/";
	padding-right: 20px;
}
.index-h1::after {
	content: "/";
	padding-left: 20px;
}
.top-header {
	/*padding: 0 clamp(2.25rem, -1.8652rem + 17.558vw, 13.125rem);*/
	padding: 0 clamp(1.125rem, -1.8336rem + 6.3201vw, 5rem);
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}
.top-header h1 a img {
	/* color: var(--main-color);
	text-decoration: none;
	font-size: clamp(2.25rem, 1.9662rem + 1.2109vw, 3rem);
	font-weight: 900; */
	width: clamp(10rem, 6.1825rem + 8.1549vw, 15rem);;
}
.top-header ul {
	display: flex;
	gap: clamp(0.75rem, 0.0878rem + 2.8254vw, 2.5rem);
	margin-bottom: 5px;
}
.top-header ul li a {
	color: var(--main-color);
	text-decoration: none;
	font-size: clamp(1rem, 0.7162rem + 1.2109vw, 1.75rem);
	font-weight: 900;
}
/* .hamburger-menu {
	display: none;
} */
.hamburger-menu {
	display: block;
}
.menu-btn {
	position: fixed;
	top: clamp(1.125rem, -0.5929rem + 3.6697vw, 3.375rem);
	right: clamp(1.125rem, -1.8336rem + 6.3201vw, 5rem);
	display: flex;
	height: 60px;
	width: 60px;
	justify-content: center;
	align-items: center;
	z-index: 90;
	background-color: var(--main-color);
	border-radius: 5px;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
	content: '';
	display: block;
	height: 3px;
	width: 25px;
	border-radius: 3px;
	background-color: #ffffff;
	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);
}
#menu-btn-check {
	display: none;
}
.menu-content {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 100%;/*leftの値を変更してメニューを画面外へ*/
	z-index: 80;
	background-color: #708fc29d;
	transition: all 0.5s;/*アニメーション設定*/
}
.menu-content ul {
	padding: 70px 10px 0;
	display: flex;
	flex-direction: column;
}
details {
	padding: 15px 10px;
	border-bottom: solid 1px #ffffff;
}
.menu-content ul li {
	border-bottom: solid 1px #ffffff;
	list-style: none;
	padding: 15px;
}
.menu-content details li {
	border-bottom: none;
}
.menu-content ul li a {
	display: block;
	width: 100%;
	font-size: 15px;
	box-sizing: border-box;
	color:#ffffff;
	text-decoration: none;
	padding: 9px 15px 10px 0;
	position: relative;
}
.menu-content details summary {
	display: block;
	width: 100%;
	font-size: 15px;
	font-weight: 900;
	box-sizing: border-box;
	color:#ffffff;
	text-decoration: none;
	padding: 9px 15px 10px 5px;
	position: relative;
}
details summary::-webkit-details-marker {
	display: none;
}
.menu-content details li a {
	display: block;
	width: 100%;
	font-size: 15px;
	box-sizing: border-box;
	color:#ffffff;
	text-decoration: none;
	padding: 9px 15px 10px 0;
	position: relative;
}
.menu-content ul li a::before {
	content: "";
	width: 7px;
	height: 7px;
	border-top: solid 2px #ffffff;
	border-right: solid 2px #ffffff;
	transform: rotate(45deg);
	position: absolute;
	right: 11px;
	top: 16px;
}
.menu-content summary::before {
	content: "＋";
	position: absolute;
	right: 11px;
	top: 8px;
}
#menu-btn-check:checked ~ .menu-content {
	left: 0;/*メニューを画面内へ*/
}
.top-img {
	text-align: center;
	position: relative;
}
.top-news {
	width: clamp(22.5rem, 13.4541rem + 19.3237vw, 30rem);
	margin: 0 auto;
	display: flex;
	justify-content: center;
	padding: 10px 0;
	background-color: #FCFDFF;
	border-radius: 50px;
	border: solid var(--main-color) 3px;
}
.top-news p {
	color: var(--main-color);
}
.top-news a {
	text-decoration: none;
    display: block;
}
.icon {
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}
.icon img {
	width: clamp(7.5rem, 6.554rem + 4.0363vw, 10rem);
	height: clamp(7.5rem, 6.554rem + 4.0363vw, 10rem);
}
.top-main-img img {
	width: calc(100% - 240px);
	height: 80vh;
	object-fit: cover;
	object-position: 50% 68%;
	margin-top: -15px;
	border: solid 10px var(--main-color);
	border-radius: 15px;
	box-shadow: 4px 4px 15px 0px rgba(0, 0, 0, 0.3);
}
.header-link a {
	color: #FCFDFF;
	display: block;
}
.sub-img {
	text-align: center;
	position: relative;
}
.sub-main-img img {
	width:  clamp(21.5625rem, 0.49rem + 89.9092vw, 77.25rem);
	height: auto;
	margin-top: -15px;
	border: solid 10px var(--main-color) ;
	border-radius: 15px;
	box-shadow: 4px 4px 15px 0px rgba(0, 0, 0, 0.3);
}

/* メイン */
.index-main {
	text-align: center;
	color: var(--main-color);
}
.index-main img {
	margin: 24px 0;
}
.index-main p {
	width: clamp(15rem, 10.9368rem + 13.544vw, 22.5rem);
	margin: 0 auto 20px;
}
.main-main {
	margin-top: 55px;
}
.main-about, .main-other {
	margin: 0 auto;
	color: var(--main-color);
	padding: 50px 0;
}
.main-about h2, .main-other h2 {
	margin-bottom: 40px;
	text-align: center;
	font-weight: 900;
	font-size: clamp(1.25rem, 1.0608rem + 0.8073vw, 1.75rem);
}
.main-about h2::before, .main-other h2::before {
	content: "/";
	padding-right: 20px;
}
.main-about h2::after, .main-other h2::after {
	content: "/";
	padding-left: 20px;
}
.main-about, .main-prof {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.main-about p, .main-prof p {
	width: 360px;
}
.main-about .link {
	margin-top: 15px;
}
.main-about .link h3 {
	color: var(--sub-color);
	margin-top: 24px;
}
.main-about ul, .gift {
	display: flex;
}
.main-about ul li::after, .gift li::after {
	content: "/";
	padding: 5px;
}
.main-about ul li:last-child:after, .gift li:last-child:after {
	content: none;
}
.main-dream {
	color: #FCFDFF;
	background-color: var(--main-color);
	padding: 50px 0 80px;
}
.main-dream h2 {
	margin-bottom: 40px;
	text-align: center;
	font-weight: 900;
	font-size: clamp(1.25rem, 1.0608rem + 0.8073vw, 1.75rem);
}
.main-dream h2::before {
	content: "/";
	padding-right: 20px;
}
.main-dream h2::after {
	content: "/";
	padding-left: 20px;
}
.main-contents {
	margin-bottom: 20px;
	padding: 0 360px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 80px;
}
.main-contents a {
	text-decoration: none;
}
.main-contents img {
	width: 120px;
	height: 120px;
	border-radius: 10px;
}
.main-contents p {
	text-align: center;
	padding-top: 12px;
}
.main-contents-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.main-dream .main-contents-btn p {
	color: #FCFDFF;
	font-weight: 900;
	font-size: 16px;
}
.main-other .main-contents-btn p {
	color: var(--main-color);
	font-weight: 900;
	font-size: 16px;
}
.wave-b {
	display: block;
	width: 100%;
	height: 95px;
	padding-top: 7%;
	background: url('../img/wave_b.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.wave-w {
	display: block;
	width: 100%;
	height: 95px;
	padding-top: 7%;
	background: url('../img/wave_w.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.dream-top h2, .dream-chara h2 {
	margin: 80px 0 36px;
	text-align: center;
	font-weight: 900;
	font-size: clamp(1.25rem, 1.0608rem + 0.8073vw, 1.75rem);
	color: var(--main-color);
}
.dream-log h2 {
	margin-top: 80px;
	text-align: center;
	font-weight: 900;
	font-size: clamp(1.25rem, 1.0608rem + 0.8073vw, 1.75rem);
	color: var(--main-color);
}
.dream-top h2::before, .dream-log h2::before, .dream-chara h2::before {
	content: "/";
	padding-right: 20px;
	color: var(--main-color);
}
.dream-top h2::after, .dream-log h2::after, .dream-chara h2::after {
	content: "/";
	padding-left: 20px;
	color: var(--main-color);
}
.chara-icon {
	width: clamp(11.25rem, 9.831rem + 6.0545vw, 15rem);
	height: clamp(11.25rem, 9.831rem + 6.0545vw, 15rem);
	border-radius: 15px;
	border: solid var(--main-color) 2px;
	margin-bottom: 30px;
}
.partner {
	padding-bottom: 15px;
}
.enst {
	background: url('https://53rdo.xyz/wp-content/uploads/2025/01/ic_sasaki.png');
	background-size: cover;
}
.bachi {
	background: url('https://53rdo.xyz/wp-content/uploads/2025/01/ic_mishiro.jpg');
	background-size: cover;
}
.eitr {
	background: url('https://53rdo.xyz/wp-content/uploads/2025/01/ic_mizu.jpg');
	background-size: cover;
}
.bleach {
	background: url('https://53rdo.xyz/wp-content/uploads/2025/01/ic_asagao.jpg');
	background-size: cover;
}
.str1 {
	background: url('https://53rdo.xyz/wp-content/uploads/2025/01/ic_nayuta.jpg');
	background-size: cover;
}
.str2 {
	background: url('https://53rdo.xyz/wp-content/uploads/2025/01/ic_shunei.jpg');
	background-size: cover;
}
.bll {
	background: url('https://53rdo.xyz/wp-content/uploads/2025/01/ic_kou.jpg');
	background-size: cover;
}
.v1 {
	background: url('https://53rdo.xyz/wp-content/uploads/2025/01/ic_knkd.jpg');
	background-size: cover;
}
.v2 {
	background: url('https://53rdo.xyz/wp-content/uploads/2025/01/ic_369.jpg');
	background-size: cover;
}
.v3 {
	background: url('https://53rdo.xyz/wp-content/uploads/2025/01/ic_kuma.jpg');
	background-size: cover;
}
.dream-top p {
	font-weight: 400;
	margin: 30px 0 px;
}
.main-prof p {
	margin: 30px 0;
	padding: 0 24px;
}
.prof-link{
	text-align: center;
	margin: 30px auto;
	background-color: #092147;
	width: 159px;
	padding: 10px;
	border-radius: 26px;
}
.prof-link a{
	display: block;
	color: #FCFDFF;
	text-decoration: none;
}
.log {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(1rem, 0.375rem + 2vw, 1.5rem);
}
.log li a img {
	width: clamp(4.5rem, 4.2162rem + 1.2109vw, 5.25rem);
	height: clamp(9.6875rem, 8.3867rem + 5.5499vw, 13.125rem);
	border: solid var(--main-color) 2px;
	border-radius: 5px;
	object-fit: cover;
}
.gift {
	justify-content: center;
	flex-wrap: wrap;
	padding: 40px 24px 0;
	margin-bottom: 150px;
}
.dream-log {
	text-align: center;
	margin-bottom: 95px;
}

.dream-log img {
	width: 60vw;
	height: auto;
	margin-top: 50px;
}

.dream-log p {
	margin: 10px 0;
}
.back-btn {
	text-align: center;
	margin: 80px auto;
	background-color: #092147;
	width: 159px;
	padding: 10px;
	border-radius: 26px;
}
.back-btn a {
	display: block;
	color: #FCFDFF;
	text-decoration: none;
}
.gift_img {
	 margin-top: 0;
}
.character-about {
	display: flex;
}
.character-about img {
	margin-top: clamp(4.5rem, 3.8378rem + 2.8254vw, 6.25rem);
	width: 40%;
	height: 40%;
}
.character-about_detail {
	margin-top: clamp(4.5rem, 3.8378rem + 2.8254vw, 6.25rem);
	padding-right: 139px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.character-about_detail h3 {
	font-size: clamp(1.75rem, 1.5608rem + 0.8073vw, 2.25rem);
}
rt { 
	transform: translateY(-.5em);
}
.character-about_detail ul {
	width: 100%;
	background-color: var(--main-color);
	color: #FCFDFF;
	margin: 60px;
	padding: clamp(1.5rem, 0.6486rem + 3.6327vw, 3.75rem) 40px;
	border-radius: 5px;
}
.character-about_detail ul li {
	padding: 5px;
}
.character-about_relationship {
	padding: 183px 80px 0;
	display: flex;
	gap: 80px;
}
.character-about_relationship section {
	width: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.character-about_relationship h3 {
	position: relative;
	display: inline-block;
	margin-bottom: 1em;
}
.character-about_relationship h3:before {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -15px;/*線の上下位置*/
	display: inline-block;
	width: 60px;/*線の長さ*/
	height: 3px;/*線の太さ*/
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);/*位置調整*/
	background-color: var(--main-color);/*線の色*/
	border-radius: 5px;/*線の丸み*/
}
.character-about_relationship p {
	margin-top: 30px;
}

.log-page {
	background-color: #FCFDFF;
	/*adding: 0 clamp(1.5rem, -14.7826rem + 34.7826vw, 15rem);*/
	text-align: center;
}
figure {
	width: 40vw;
	height: auto;
}

.wp-block-image {
	margin-top: 24px;
	margin-bottom: 24px;
  }

@media (max-width: 550px){
.related_post h3{
	font-size: 18px;
}
.related_post_container{
	flex-direction: column;
	flex-wrap: nowrap;
}
.related_post_container li{
	width: auto;
	margin-right: 0;
	margin-bottom: 10px;
	border: 1px solid #E8E8E8;
}
.related_post_container li:nth-child(n+1):nth-child(-n+4){
	margin-bottom: 10;
}
.related_post_container a{
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.related_thumb{
	width: 43%;
}
.related_thumb img{
	vertical-align: bottom;
}
.related_title{
	width: 55%;
	font-size: 12px;
}
.log {
	padding: 0 24px;
}
figure {
	width: 80vw;
	height: auto;
}
.wp-block-image {
	margin-top: 24px;
	margin-bottom: 24px;
  }
}

/* フッター */
footer {
	background: url('../img/wave_f.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding: 14.2% 40px 40px;
}
small {
	color: #FCFDFF;
	display: flex;
	justify-content: center;
	margin-top: 55px;
}
@media screen and (max-width:1082px) {
	.character-about {
		flex-direction: column;
		align-items: center;
	}
	.character-about img {
		width: 80vw;
		margin-top: 0;
	}
	.character-about_detail {
		padding: 0 54px;
	}
	.dream-log p {
		padding: 0 24px;
	}
}
@media screen and (max-width:749px) {
	/* .top-header:not(nav) {
		padding-top: 50px;
	}
	.top-nav {
		display: none;
	} */
	.index-logo {
		width: 100vw;
		height: 70vh;
		position: relative;
	}
	.index-logo img {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
	}
	
	.top-main-img img {
		width: calc(100% - 24px);
		height: 80vh;
		object-fit: cover;
		border: solid var(--main-color) 5px;
	}
	.main-contents {
		padding: 0;
		flex-direction: column;
		gap: 40px;
	}
	.sub-main-img img {
		border: solid var(--main-color) 5px;
	}
	.character-about_relationship {
		flex-direction: column;
		align-items: center;
		padding: 80px 54px 0;
	}
	.character-about_relationship section {
		width: 100%;
}
	.dream-log img {
		width: 80vw;
		height: auto;
	}
}