@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	list-style: none;
}

body {
	font-family: 'UDReiminPro Medium', 'UDReiminPro', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif;
	background-color: #000000;
	color: white;
	line-height: 1.6;
}

/* Common image styles */
img {
	max-width: 100%;
	height: auto;
}

/* Main sections */
.about, .rule {
	display: grid;
	justify-content: center;
	justify-items: center;
}

.title {
	margin-bottom: 40px;
	text-align: center;
}

/* About section */
.about {
	background: url(../images/about_upper_right_corner.png) no-repeat right top, url(../images/about_lower_left_corner.png) no-repeat left bottom;
	background-size: 42%, 24%;
	background-origin: border-box;
	background-position: right top, 150px calc(100% + -33px);
	padding: 9% 20px 4% 20px;
}

.append {
	background-size: 42%, 24%;
	background-origin: border-box;
	background-position: right top, 150px calc(100% + -33px);
	padding: 4% 20px 4% 20px;
}

.about .content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 40px;
	max-width: 1000px;
	width: 100%;
	margin: 15% 0;
}

.append .append_box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 40px;
	width: 100%;
}

.about .content .content_top {
	display: grid;
	justify-items: start;
	font-size: clamp(18px, 4vw, 25px);
	gap: 20px;
	margin-bottom: 13vh;
}

.append .append_box .box_top {
	display: grid;
	justify-items: start;
	font-size: clamp(18px, 4vw, 25px);
	gap: 20px;
}

.about .content .content_top .content_title {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
}

.append .append_box .box_top .box_text span {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
}

.about .content .content_bottom {
	width: 100%;
	max-width: 500px;
	text-align: center;
}

.about .content .content_bottom img {
	max-width: 90%;
}

/* Rule section */
.rule {
	padding: 9% 20px;
	background: url(../images/rule_right_background.png) no-repeat right top;
	background-size: contain;
}

.rule_card {
	display: grid;
	gap: 60px;
	max-width: 1200px;
	width: 100%;
}

.card_box {
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
}

/* Card sections */
.card_basic, .card_expand, .card_system, .card_special {
	display: grid;
	gap: 30px;
	text-align: center;
}

.card_basic>span, .card_expand>span, .card_system>span, .card_special>span {
	margin-bottom: 20px;
}

.card_basic>span img, .card_expand>span img, .card_system>span img, .card_special>span img {
	margin: 5% 0;
}

.card_item {
	display: grid;
	gap: 15px;
	justify-items: center;
	margin-bottom: 20px;
	background-color: #333333e6;
	padding: 20px 10px;
	width: 280px;
	min-width: 280px;
	flex-shrink: 0;
}

.card_item .item_title {
	font-family: 'UDReiminPro ExBold', 'Meiryo', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', sans-serif;
	font-size: 25px;
	font-weight: bold;
}

.card_item .item_content {
	display: grid;
	text-align: left;
	font-family: 'UDReiminPro ExBold', 'UDReiminPro', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif;
	font-size: 18px;
	margin: 0 10px;
}

/* SNS and Footer sections */
.sns {
	margin-bottom: 0;
	position: relative;
}

.sns .btn_box {
	display: flex;
	gap: 35px;
	align-items: baseline;
	justify-content: center;
	z-index: 10;
	margin: 20px auto 100px;
}

.sns .btn_box img {
	width: 60px;
	height: auto;
	/* transition: transform 0.3s ease, opacity 0.3s ease; */
}

.sns .btn_box img:hover {
	transform: scale(1.1);
	/* opacity: 0.8; */
}


/* footer start */
footer{
	margin: 0 auto;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}

footer .ending{
	margin:0 auto;
	display: flex;
	justify-content: center;
}
footer .ending a{
	width: 100%;
}
footer .ending img{
	width: 100%;
}

footer nav{
	width: 100%;
	max-width: 1920px;
	margin: 1em auto;
}
.footer_menu{
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 1em;
	min-height: 50px;
	list-style: none;
	flex-wrap: wrap;
}
.footer_menu a{
	color: #110400;
	font-size: 32px;
	font-weight: bold;
	text-shadow: 2px 0 #F79C1F, -2px 0 #F79C1F, 0 2px #F79C1F, 0 -2px #F79C1F, 2px 2px #F79C1F, -2px 2px #F79C1F, -2px 2px #F79C1F, -2px -2px #F79C1F;
	text-decoration: none;
	transition: all 0.3s ease;
}
.footer_menu a:hover{
	font-size: 34px;
}
.copyright{
	color: #110400;
	font-size: 22px;
	font-weight: bold;
	text-shadow: 2px 0 #F79C1F, -2px 0 #F79C1F, 0 2px #F79C1F, 0 -2px #F79C1F, 2px 2px #F79C1F, -2px 2px #F79C1F, -2px 2px #F79C1F, -2px -2px #F79C1F;
	text-decoration: none;
	text-align: center;
	padding: 1em;
}

/* footer end */


/* Remove picture element spacing */
picture {
	display: block;
	line-height: 0;
}

picture img {
	display: block;
	line-height: 0;
}

/* Embeded video clips */
.sns_container {
	display: grid;
	justify-content: center;
    justify-items: center;
	gap: 60px 10px;
	margin-top: -10vw;
}

.sns_1 {
	grid-column: 1 / 2;
	height: 574px;
    overflow: hidden;
}

.sns_2 {
	grid-column: 2 / 3;
}

.sns_3 {
	grid-column: 1 / 3;
	grid-row: 2 / 3;
}

@media (max-width: 480px) {
.sns_container {
	display: flex;
	margin-top: -25vw;
	flex-wrap: wrap;
}
.sns_container > * > * {
	max-width: 90vw;
}
}


/* Responsive breakpoints */
@media (min-width: 1920px) {
	body {
		font-size: 18px;
	}

	.about .content .content_top {
		font-size: clamp(25px, 2.5vw, 35px);
	}

	.append .append_box .box_top {
		font-size: clamp(25px, 2.5vw, 35px);
	}

	.card_item .item_title {
		font-size: 30px;
	}

	.card_item .item_content {
		font-size: 22px;
	}
	.about .content .content_top .content_title{
		flex-wrap:unset;
		white-space: nowrap;
	}
	.append .append_box .box_top .box_text{
		flex-wrap:unset;
		white-space: nowrap;
	}
}

/* Medium screen optimizations */
@media (min-width: 770px) and (max-width: 900px) {
	.sns .btn_box {
		gap: 25px;
		margin-bottom: 80px;

	}

	.sns .btn_box img {
		width: 45px;
	}
}

@media (max-width: 768px) {
	.title img {
		width: 60%;
	}

	.about {
		padding: 60px 15px;
		background-size: 70%, 50%;
		background-position: right top, 9% calc(100% + -115px);
	}

	.rule {
		padding: 60px 15px;
	}

	.about .content {
		gap: 30px;
	}

	.about .content .content_top {
		font-size: 18px;
		gap: 15px;
	}

	.append .append_box {
		gap: 30px;
	}

	.append .append_box .box_top {
		font-size: 18px;
		gap: 15px;
	}

	.rule_card {
		gap: 40px;
	}

	.card_item {
		width: 250px;
		min-width: 250px;
	}

	.card_item .item_title {
		font-size: 20px;
	}

	.card_title {
		display: block;
		margin: 0 20px;
		margin-bottom: 20px;
		overflow: hidden;
	}

	.card_title img {
		transform: scale(1.7);
	}

	.sns .btn_box {
		gap: 25px;
		margin-bottom: 60px;
	}

	.sns .btn_box img {
		width: 50px;
	}

	footer .register_btn {
		transform: translate(-50%, 25%);
	}
}

@media (max-width: 480px) {
	.about {
		padding: 40px 10px;
		margin-bottom: 40px;
		background-position: right top, 10px bottom;
	}

	.append {
		padding: 40px 10px;
		background-position: right top, 10px bottom;
	}

	.rule {
		padding: 40px 10px;
	}

	.about .content .content_top {
		font-size: 20px;
		gap: 12px;
		width: 70%;
	}

	.append .append_box .box_top {
		font-size: 20px;
		gap: 12px;
	}

	.card_item {
		min-width: 220px;
	}

	.card_title {
		margin: 0 15px;
	}

	.about .content .content_top .content_title {
		display: grid;
		justify-content: center;
		align-items: center;
		justify-items: center;
	}

	.about .content .content_top {
		justify-items: center;
	}

	.append .append_box .box_top .box_text {
		display: grid;
		justify-content: center;
		align-items: center;
		justify-items: center;
	}

	.append .append_box .box_top {
		justify-items: center;
	}

	.sns .btn_box {
		gap: 25px;
		margin-bottom: 40px;
	}

	.sns .btn_box img {
		width: 40px;
	}

	.footer_menu{
		align-items: center;
		height: auto;
		flex-wrap: wrap;
	}
	.footer_menu a{
		font-size: 24px;
	}
	.copyright{
		font-size: 18px;
	}
}

/* Large screen optimizations */
@media (min-width: 1440px) and (max-width: 1919px) {
	.about .content .content_top {
		font-size: clamp(22px, 2.2vw, 28px);
	}

	.append .append_box .box_top {
		font-size: clamp(22px, 2.2vw, 28px);
	}

	.card_item .item_title {
		/* font-size: 28px; */
	}

	.card_item .item_content {
		font-size: 20px;
	}
}

/* Ultra large screen optimizations */
@media (min-width: 2560px) {
	.card_item {
		padding: 35px 10px;
		width: 320px;
	}

	.sns .btn_box {
		gap: 60px;
	}

	.sns .btn_box img {
		width: 100px;
	}
}