@charset "utf-8";
@font-face {
	font-family: "title-font";
	src: url("../font/Didot Bold.otf");
}
:root {--accent-color: #9F44FF;}
body{
	background: center / cover no-repeat url("../img/bg.jpg");
}
body.entrancePage::before{
	content: "";
	width: 100%;
	height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
	background: linear-gradient(150deg, #9F44FF 0%, #FFA946 100%);
	opacity: 1;
	animation: Grad 4s infinite alternate;
}
@keyframes Grad {
  0% {
    -webkit-filter: hue-rotate(0deg);
    filter: hue-rotate(0deg);
  }

  100% {
    -webkit-filter: hue-rotate(360deg);
    filter: hue-rotate(360deg);
  }
}


.bg{
	background: center / cover no-repeat url("../img/bg02.jpg");
}
body,body a{
	color: #FFF;
}
main,footer{
	transition: .5s;
}
.pcNav main,
.pcNav footer{
	-ms-filter: blur(2px);
	filter: blur(2px);
}
section{
	width: 100%;
    padding-top: 80px;
	padding-bottom: 80px;
	position: relative;
	overflow: hidden;
}
.inner{
	width: 90%;
	margin: 0 auto;
    position: relative;
}
h1,h2,h3,h4,h5,h6{
	font-weight: normal;
	line-height: 1.6;
	letter-spacing: 0.2em;
}
p{
	font-size: 15px;
	line-height: 1.6;
    letter-spacing: 0.15em;
}
@media screen and (max-width: 820px) {
	section{
	    padding-top: 40px;
		padding-bottom: 40px;
	}
}
/*==================================================================================================*/
/*共通コンテンツの記述*/
/*ボタン*/
.btn{
    display: flex;
	align-items: center;
	justify-content: center;
	width: 90%;
	max-width: 328px;
	height: 55px;
	font-size: 18px;
	padding: 0 15px;
	border-radius: 4px;
	border: solid 1px #FFF;
	background: rgba(255,255,255,0.20);
	position: relative;
	box-shadow: 0 0 24px 0 rgba(255,255,255,0.25);
}
.btn.otherLink{
	justify-content:flex-start;
}
.btn.otherLink::after{
	display: block;
	content: "";
	width: 17px;
	height: 17px;
	background: center / cover no-repeat url("../img/icon-link.svg");
	position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}
@media screen and (max-width: 520px) {
	.btn{
		width: 100%;
		max-width: 100%;
		height: 55px;
		font-size: 16px;
	}
}
/*タイトル+テキスト+ボタン*/
.block01{
	padding-top: 60px;
	padding-bottom: 100px;
}
.block01 .inner{
	height: 100%;
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	flex-wrap: wrap;
}
.block01 h2{
	font-size: 3.2vw;
	font-weight: bold;
	text-align: center;
	margin: 0 0 20px;
}
.block01 p{
	font-size: 16px;
	text-align: center;
}
.block01 .btn{
	margin: 5% auto 0;
}
@media screen and (max-width: 820px) {
	.block01 h2{
		font-size: 24px;
	}
	.block01 p{
		font-size: 15px;
	}
}
/*3カラム*/
.column{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: -20px;
}
.column3 li{
	display: flex;
    flex-direction: column;
	width: 32%;
	max-width: 330px;
	padding: 2.5% 3%;
	border: solid 1px #CFCFCF;
	background:rgba(20,20,20,0.40);
	margin-bottom: 20px;
	position: relative;
}
#youtube .column3 li,
#blog .column3 li{
	background:rgba(255,255,255,0.40);
}
.column3::after{
	position: relative;
	content: "";
	width: 32%;
	max-width: 330px;
}
.column3 li span{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 82px;
	height: 18px;
	font-size: 10px;
	font-weight: bold;
	background: #6D13D5;
	transform: rotate(90deg);
	position: absolute;
	top: 60px;
    right: -32px;
}
.tag-red{
	background: #FC4949 !important;
}
.tag-blue{
	background: #335EBA !important;
}
.tag-purple{
	background: var(--accent-color) !important;
}
.column3 li .img{
	margin: 0 0 10px;
}
.column3 li h3{
	font-size: 16px;
	letter-spacing: 0.1em;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
	margin: 0 0 5px;
}
.column3 li p{
	font-size: 13px;
	letter-spacing: 0.1em;
	margin: 0 0 20px;
}
.column3 li .btn{
	width: 100%;
	height: 35px;
	font-size: 18px;
	margin-top: auto;
}
/**/
.column3.column3-2 li p{
	font-size: 12px;
	letter-spacing: 0.05em;
	margin: 0 0 5px;
}
.column3.column3-2 li h3{
	margin: 0 0 20px;
}
@media screen and (max-width: 820px) {
	.column{
		max-width: 520px;
		margin-left: auto;
		margin-right: auto;
	}
	.column3 li{
		width: 100%;
		max-width: 100%;
		padding: 20px 30px;
	}
	.column3 li h3{
		font-size: 15px;
	}
}
/*==================================================================================================*/
/*トピックス-お知らせ*/
.topics{
	width: 90%;
	max-width: 1175px;
	padding: 45px 0;
	background: rgba(37,37,37,0.8);
	box-shadow: 0 0 24px 0 rgba(0,0,0,0.25);
	margin: 0 auto;
}
.topicsList li{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 0;
	border-bottom: dotted 1px #6D6D6D;
	margin: 0 0 10px;
}
.topicsList li span{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 21px;
	font-size: 12px;
	letter-spacing: 0.15em;
	border-radius: 4px;
}
.topicsList li h3{
	width: calc( 100% - 200px );
	font-size: 16px;
	letter-spacing: 0.1em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.topicsList li a{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 112px;
	height: 20px;
	font-size: 10px;
	letter-spacing: 0.15em;
	border-radius: 30px;
	background: #777777;
}
@media screen and (max-width: 820px) {
	.topics{
		padding: 25px 0;
	}
	.topicsList li{
		flex-wrap: wrap;
		padding: 15px 0;
		margin: 0;
		position: relative;
	}
	.topicsList li h3{
		width: 100%;
	}
	.topicsList li a{
		position: absolute;
		bottom: 15px;
		right: 0;
	}
}
@media screen and (max-width: 520px) {
	.topicsList li h3{
		width: 100%;
		margin-top: 5px;
	}
	.topicsList li a{
        bottom: auto;
        top: 15px;
	}
}
/*==================================================================================================*/
/*テーブル*/
.tableContent .inner{
	max-width: 1140px;
}
.tableContent .title{
	width: fit-content;
	margin: 0;
}
.tableContent .inner + p{
	width: 90%;
	max-width: 1140px;
	font-size: 11px;
	color: #D2D2D2;
	margin: 0 auto;
}
.table table{
	width: 100%;
	max-width: 1140px;
	border-collapse: collapse;
	border-spacing: 0;
	color: #592C8C;
	background: #D2ABFF;
	margin: 5px auto 0;
}
.table table tr:nth-child(odd) {
	background: #DDBFFF;
}
/*表タイトル*/
.table table thead tr{
	background: #6E27C1 !important;
}
.table table th{
	font-weight: normal;
	text-align: left;
	color: #FFF;
	padding: 5px 20px !important;
}
.table table th:not(:last-child),
.table table td:not(:last-child){
	border-right: dotted 1px #FFF;
}
/*表内容*/
.table table th,
.table table td {
	padding: 15px 20px;
}
@media screen and (max-width: 1270px) {
	.tableContent .inner + p{
		margin: 0 auto 5px;
	}
	.table{
		overflow-y: scroll;
	}
	.table table{
		width: 1200px;
		margin: 0 5%;
	}
}
@media screen and (max-width: 820px) {
	.tableContent .title{
		margin: 0 0 10px;
	}
}
/*ポップアップ*/
.hidden {
    display: none;
}
/*全て共通：hideエリアをはじめは非表示*/
.modal{
	display: block;
	position: fixed;
	top: 0;
	height: 100vh;
	width: 100%;
	opacity:0;
	pointer-events: none;
	transition: opacity 1s;
}
/*ポップアップ共通css*/
.modaal-inner-wrapper{
	padding-top: 0px !important;
	padding-bottom: 0px !important;
}
.modaal-container{
	width: 90% !important;
	max-width: 816px !important;
	background: var(--main-color) !important;
	margin: 60px 0 0;
}
.modaal-content-container {
    max-height: 80vh;
    padding: 0 !important;
    overflow-y: auto; /* 必要に応じてスクロールバーを表示 */
}
.modaal-container [type="button"]{
    margin: 0;
}
.modaal-wrapper .modaal-close{
    width: 25px;
    height: 25px;
    position: absolute !important;
    top: -35px !important;
    right: 0px !important;
}
.modaal-close:after,
.modaal-close:before{
    width: 2px !important;
    height: 30px !important;
    border-radius: 0;
    background: #FFF !important;
    top: -2px !important;
    left: 11px !important;
}
.modaal-close:focus, .modaal-close:hover{
	background: none !important;
}
/**/
.popup{
	padding: 20px 0;
	background: #DDBFFF;
}
.popup .inner{
	width: 94%;
	align-items: flex-end;
}
.popup .textBox{
	width: 42%;
	max-width: 316px;
	color: #592C8C;
}
.popup .textBox div:nth-child(1){
	display: flex;
	align-items: center;
	margin: 0 0 10px;
}
.popup .textBox div:nth-child(1) p:nth-child(1){
	width: fit-content;
	font-size: 13px;
	letter-spacing: 0;
	margin-right: 10px;
}
.popup .textBox div:nth-child(1) p:nth-child(2){
	width: fit-content;
	font-size: 11px;
	letter-spacing: 0;
	padding: 2px 13px;
	border-radius: 20px;
	background: #FFF;
	margin-right: 10px;
}
.popup .textBox div:nth-child(1) p:nth-child(3){
	width: fit-content;
	font-size: 12px;
	letter-spacing: 0;
}
.popup .textBox div + p{
	font-size: 19px;
	letter-spacing: 0.1em;
	margin: 0 0 10px;
}
.popup .textBox div:nth-child(3){
	color: #FFF;
	padding: 10px;
	background: #592C8C;
	margin: 0 0 10px;
}
.popup .textBox div:nth-child(3) p:nth-child(1){
	font-size: 12px;
	letter-spacing: 0;
}
.popup .textBox div:nth-child(3) p:nth-child(2){
	font-size: 16px;
	letter-spacing: 0;
}
.popup .textBox div:nth-child(3) p:nth-child(3){
	font-size: 19px;
	letter-spacing: 0;
}
.popup .textBox div:nth-child(3) p:nth-child(3) span{
	font-size: 29px;
	letter-spacing: 0;
	margin-left: 10px;
}
.popup .textBox a{
	font-size: 12px;
	letter-spacing: 0;
	text-decoration: underline;
	color: #592C8C;
}
.popup .imageBox{
	display: flex;
    justify-content: center;
	width: 56%;
	max-width: 427px;
	background: #3B2257;
	padding: 30px;
}
.popup .imageBox img{
	max-width: 278px;
	margin: 0 auto;
}
@media screen and (max-width: 820px) {
	.modaal-container{
		max-width: 520px !important;
	}
	.popup .textBox{
		width: 100%;
		max-width: 100%;
		margin: 0 0 20px;
	}
	.popup .imageBox{
		width: 100%;
		max-width: 100%;
	}
}
@media screen and (max-width: 520px) {
	.popup{
		padding: 20px 0 40px;
	}
	.popup .imageBox{
		padding: 15px;
	}
	.popup .imageBox img {
    	max-width: 200px;
	}
}
/*==================================================================================================*/
/*header-ヘッダー*/
header{
	width: 100%;
	height: 55px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	top: 0;
	z-index: 1000;
	transition: .5s;
}
header.movement{
	background: rgba(0, 0, 0, 0.20);
	box-shadow: 0 0 24px 0 rgba(255, 255, 255, 0.25);
}
header a.logo{
	width: fit-content;
	font-size: 17px;
	font-weight: bold;
	letter-spacing: 0.3em;
	margin-left: 15px;
	z-index: 1;
}
nav{
	width: fit-content;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}
nav p{
	width: 100%;
	font-size: 10px;
	color: #DADADA;
	text-align: right;
	padding-right: 15px;
}
nav div{
	width: fit-content;
}
nav ul{
	width: fit-content;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
nav ul.mainNav li{
	width: fit-content;
	padding: 0 15px;
}
nav ul.mainNav li a{
	width: fit-content;
	font-size: 13px;
}
nav ul.ctaNav a{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 125px;
	height: 55px;
	font-size: 13px;
	color: #6D13D5;
	background: #FFF;
}
nav ul.ctaNav li:last-child a{
	color: #FFF;
	background: #6D13D5;
}
/*ページ毎に表示変更*/
/*トップページ*/
.entrancePage nav p{
	display: none;
}
.entrancePage nav ul.mainNav li{
	display: none;
}
.entrancePage nav ul.mainNav li:nth-child(1),
.entrancePage nav ul.mainNav li:nth-child(2){
	display: block;
}
/*会員ページ*/
.memberPage nav ul.ctaNav li:first-child{
	display: none;
}
.memberPage nav ul.mainNav li:nth-child(2){
	display: none;
}
@media screen and (max-width: 900px) {
	.memberPage nav ul.mainNav li{
		padding: 0 10px;
	}
	.memberPage nav ul.ctaNav a{
		width: 100px;
	}
}
@media screen and (max-width: 820px) {
	nav{
		align-content: baseline;
		justify-content: center;
		width: 100%;
		height: 100vh;
		padding-top: 100px;
		background:rgba(0,0,0,0.8);
		position: fixed;
		top: -100vh;
		left: 0;
		transition: .5s;
	}
	.pcNav nav{
		top: 0;
	}
	nav div,nav ul{
		width: 100%;
		max-width: 520px;
	}
	nav ul{
		flex-wrap: wrap;
	}
	nav ul.ctaNav{
		margin: 30px 0 0;
	}
	nav p{
		font-size: 14px;
		margin-bottom: 10px;
	}
	nav ul.mainNav li{
		width: 100%;
		border-bottom: solid 1px #FFF;
		margin-bottom: 10px;
	}
	nav ul.mainNav li a{
		width: 100%;
		display: block;
		font-size: 16px;
		text-align: center;
		padding: 10px 0;
	}
	.entrancePage nav ul.ctaNav li{
		width: 50%;
	}
	nav ul.ctaNav a{
		width: 90% !important;
		margin: 0 auto;
	}
}
.openbtn1{
	display: none;
}
@media screen and (max-width: 820px) {
	.openbtn1{
		display: block;
		cursor: pointer;
		width: 60px;
		height: 60px;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 1;
		background: #FFF;
	}
	.openbtn1 span:nth-of-type(1),
	.openbtn1 span:nth-of-type(2),
	.openbtn1 span:nth-of-type(3){
		display: inline-block;
		transition: all .4s;
		width: 30px;
		height: 2px;
		border-radius: 2px;
		background: #383838;
		position: absolute;
		left: 15px;
	}
	.openbtn1 span:nth-of-type(1) { top:20px;}
	.openbtn1 span:nth-of-type(2) { top:29px;}
	.openbtn1 span:nth-of-type(3) { top:38px;}
	
	.openbtn1.active span:nth-of-type(1) {
		top: 29px;
		transform: rotate(-40deg);
	}
	.openbtn1.active span:nth-of-type(2){
		opacity: 0;
	}
	.openbtn1.active span:nth-of-type(3){
		top: 29px;
		transform: rotate(40deg);
	}
}
/*==================================================================================================*/
/*footer-フッター*/
footer{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
footer h2{
	width: fit-content;
	font-size: 17px;
	margin-left: 15px;
}
footer ul{
	display: flex;
	justify-content: space-between;
}
footer ul.ft-mainNav{
	width: calc( 100% - 300px );
	max-width: 645px;
	margin-left: 3%;
}
footer ul.ft-subNav{
	width: calc( 100% - 740px );
	max-width: 274px;
	margin-right: 3%;
}
footer ul li{
	width: fit-content;
}
footer ul li a{
	font-size: 11px;
	letter-spacing: 0.15em;
}
footer small{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 48px;
	font-size: 10px;
	letter-spacing: 0.4em;
	background: #440889;
	margin-top: 10px;
}
.entrancePage footer ul.ft-mainNav{
	display: none;
}
.memberPage footer small{
	background: #1B132B;
}
.memberPage footer h2{
	display: none;
}
@media screen and (max-width: 1000px) {
	footer ul.ft-mainNav{
		width: 100%;
		max-width: 645px;
	}
	footer ul.ft-subNav{
		width: 100%;
		max-width: 274px;
		margin-left: 3%;
	}
}
@media screen and (max-width: 820px) {
	footer ul{
		flex-wrap: wrap;
	}
	footer ul li{
		width: 100%;
	}
	.entrancePage footer ul.ft-subNav{
		max-width: 128px;
	}
}
@media screen and (max-width: 520px) {
	.entrancePage footer ul.ft-subNav{
		max-width: 100%;
	}
}



/* タグの色をカスタマイズ */
.tag-red {
    background-color: #E02A48 !important; /* 重要（info）用の赤色 */
}

.tag-purple {
    background-color: #262626 !important; /* お知らせ（news）用の黒色 */
}

/* 既存の青色タグはそのまま維持 */



/* ページネーションのスタイル */
.pagination {
    text-align: center;
    margin: 40px 0;
    width: 100%;
}

.pagination .page-numbers {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 5px;
    background-color: #f5f5f5;
    color: #333;
    text-decoration: none;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.pagination .page-numbers.current {
    background-color: #993333; /* テーマの赤色 */
    color: #fff;
}

.pagination .page-numbers:hover {
    background-color: #e0e0e0;
}

.pagination .next, 
.pagination .prev {
    padding: 8px 15px;
}

/* モバイル対応 */
@media screen and (max-width: 520px) {
    .pagination .page-numbers {
        padding: 6px 10px;
        margin: 0 2px;
        font-size: 14px;
    }
    
    .pagination .page-numbers.dots,
    .pagination .page-numbers.prev,
    .pagination .page-numbers.next {
        display: inline-block;
    }
    
    .pagination .page-numbers:not(.dots):not(.prev):not(.next):not(.current) {
        display: none;
    }
}



/* 3カラムレイアウトの調整 */
.column.column3 {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* 左寄せにする */
    gap: 20px; /* アイテム間の間隔を設定 */
}

.column.column3 > li {
    width: calc((100% - 40px) / 3); /* 3カラム分の幅（間隔を考慮） */
    margin-bottom: 20px; /* 下方向の余白 */
}

/* 2カラムレイアウト（タブレット用） */
@media screen and (max-width: 768px) {
    .column.column3 > li {
        width: calc((100% - 20px) / 2); /* 2カラム分の幅 */
    }
}

/* 1カラムレイアウト（スマホ用） */
@media screen and (max-width: 520px) {
    .column.column3 > li {
        width: 100%; /* 1カラム */
    }
}