@charset "utf-8";

:root {
	/* font */
	--font_jp: "Noto Sans JP", sans-serif;
	--font_en: "futura-pt", "Noto Sans JP", sans-serif;

	/* color */
	--main_c: #0050E5;
	--main_c2: #F2F4F6;

	/* margin */
	--main_m: 120px;

	/* padding */
	--main_p: 40px;
}

*{ box-sizing: border-box;}

/* =base
------------------------------------------------------------------------------------------*/
html {overflow-y:scroll; height:100%;}
body {
	position: relative;
	text-align: center;
	font-family: var(--font_jp);
	font-weight:600;
	font-size: 16px;
	line-height: 1.8em;
	color: #000;
	margin: 0;
	min-height:100%;
	overflow-x: hidden;
	background-color:#fff;
	background-image: url(../images/bg/bg_03.png);
	background-position: center;
    background-repeat: repeat-y;
    background-size: 1920px;
}
.sp_only{display: none;}
.pc_only{display: initial;}

@media only screen and (max-width: 768px){
	body{font-size: 14px;background-size: 1100px;}
	
	.sp_only{display: initial;}
	.pc_only{display: none!important;}
	}

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

a {text-decoration: none;cursor: pointer;color: var(--main_c);outline:none; transition: 0.2s;}
a:link {  text-decoration: none; }
a:hover {  opacity: 0.8;  text-decoration: none; transition: 0.2s;}
a:active {  text-decoration: none;}
a img { outline:none;}
a:hover img {  opacity: .8;  -webkit-opacity: .8;  -moz-opacity: .8;  filter: alpha(opacity=80);  -ms-filter: "alpha(opacity=80)"; transition:0.3s;}

/* container
-------------------------------*/
.container{ max-width: 1000px;width: 90%;margin: 0 auto;}
.container.w600{ max-width: 600px;}
.container.w700{ max-width: 700px;}
.container.w800{ max-width: 800px;}
.container.w900{ max-width: 900px;}
.container.w1100{ max-width: 1100px;}
.container.w1200{ max-width: 1200px;}
.container.w1300{ max-width: 1300px;}
.container.w1400{ max-width: 1400px;}

/* sec tit
-------------------------------*/
.sec_tit_box{position: relative;}
.sec_tit{font-family: var(--font_en);font-size: 3.6em;font-weight: bold;line-height: 1.5em;margin-bottom: 20px;position: relative;color: #1c95d4;}
.txt_bg{position: absolute;width: calc(100% + 6vw);height: min(24vw,130px);left: -3vw;top: 50%;transform: translateY(-50%);display: flex;z-index: -1;opacity: 0.1;}
.txt_bg span{-webkit-animation: left_move 60s linear infinite;animation: left_move 60s linear infinite;display: block;color: #fff;font-family: var(--font_en);font-size: min(24vw,130px);line-height: 1em;white-space: nowrap;padding-right: 2vw;}

@keyframes left_move{
	0% {transform: translateX(0%);}
	100% {transform: translateX(-100%);}
}

@media only screen and (max-width: 768px){
	.sec_tit{font-size: 2.6em;}
}

/* in page head
-------------------------------*/
.in_page_head{margin-top: 76px;padding: var(--main_p) 0;}
.in_page_head .page_tit{font-size: 6.5em;font-family: var(--font_en);font-weight: bold;line-height: 1.5em;position: relative;padding-left: 0.4em;}
.in_page_head .page_tit:after{position: absolute;content: "●";color: var(--main_c);font-size: 0.2em;left: 0.4em;top: 50%;transform: translateY(-50%);}

@media only screen and (max-width: 768px){
	.in_page_head{margin-top: 62px;padding: calc(var(--main_p)/1.5) 0;}
	.in_page_head .page_tit{font-size: 60px;}
}

/* align box
-------------------------------*/
.center_box{text-align: center;}
.left_box{text-align: left;}
.right_box{text-align: right;}

/* btn
-------------------------------*/
.btn_01{display: block;width: min(500px,80%);margin: 0 auto;background-color: #1c95d4;color: #fff;font-size: min(20px,4.8vw);line-height: 1.5em;padding: 0.7em 0;position: relative;text-align: center;}

.btn_02{display: inline-block;width: min(300px,80%);margin: 0 auto;background-color: #fff;color: #1c95d4;font-family: var(--font_en);font-size: min(18px,4vw);line-height: 1.5em;padding: 0.5em 0;border: 2px solid #1c95d4;position: relative;text-align: center;margin-top: 1em;}

@media only screen and (max-width: 768px){
	.btn_02{width: 100%;margin-top: 1.5em;}
}

/* scrollbar
-------------------------------*/
.no_bar::-webkit-scrollbar{display: none;}
.no_bar{-ms-overflow-style: none;scrollbar-width: none;}

/* header
-------------------------------*/
header{display: flex;justify-content: space-between;position: fixed;z-index: 100;top: 0;left: 0;width: 100%;height: 50px;background-color: #fff;}
header .logo{width: 164px;position: relative;top: 0;left: 0;}
header .logo a img{transition: 0.2s;}
header .logo a:hover{opacity: 1;}
header .logo a:hover img{opacity: 1; transform: translateY(3px);}
header .global{display: flex;}
header .global li{margin-right: 0.2em;}
header .global li a{color: #fff;line-height: 50px;font-family: var(--font_en);font-weight: 800;display: block;padding: 0 1em;width: 240px;white-space: nowrap;}
header .global li a.c_01{background-color: #1c95d4;}
header .global li a.c_02{background-color: #d31277;}
header .global li.sns {display: flex;align-items: center;}
header .global li.sns a{padding: 0 1.2em;display: flex;align-items: center;justify-content: center;width: auto;}
header .global li.sns img{width: 26px;}

@media only screen and (max-width: 768px){
	header{height: 40px;}
	header .logo{width: 120px;z-index: 200;}

	header .global{width:100%;position:fixed;z-index:10;top:0;left:0;overflow-y: scroll;padding-top:0;height: 100dvh;transition:0.5s ease;flex-direction: column;background-color: #fff;opacity: 0;visibility: hidden;}
	header .global li{width: 100%;margin: 0 auto;border-bottom: 1px solid #fff;}
	header .global li a{display: block;font-size: 1.5em;line-height: 1.5em;padding: 0.8em 1em;position: relative;letter-spacing: 0.05em;width: auto;}

	header .global li.sns{display: block;margin-top: 24px;}

	header .nav-active .global{padding-top: 80px;opacity: 1;visibility: visible;}

	header .nav_trigger {display:none;position: fixed;width: 30px;height: 25px;right: 10px;top: 8px;z-index: 200;line-height:1;}
	header .nav-active .nav_trigger { opacity: 0.7;}
	header .nav_icon {display: inline-block;position: relative;width: 30px;height: 2px;background-color: #1c95d4;-webkit-transition-property: background-color, -webkit-transform;transition-property: background-color, -webkit-transform;transition-property: background-color, transform;transition-property: background-color, transform, -webkit-transform;-webkit-transition-duration: 300ms;transition-duration: 300ms;}
	header .nav_icon:before,
	header .nav_icon:after {content: '';display: block;width: 30px;height: 2px;position: absolute;background: #1c95d4;-webkit-transition-property: margin, -webkit-transform;transition-property: margin, -webkit-transform;transition-property: margin, transform;transition-property: margin, transform, -webkit-transform;-webkit-transition-duration: 300ms;transition-duration: 300ms;}
	header .nav_icon:before {margin-top: -7px;}
	header .nav_icon:after {margin-top: 7px;}
	header .nav-active .nav_icon { background: rgba(0, 0, 0, 0);}
	header .nav-active .nav_icon:before {margin-top: 0;-webkit-transform: rotate(45deg);transform: rotate(45deg);background: #1c95d4;}
	header .nav-active .nav_icon:after {margin-top: 0;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);background: #1c95d4;}
}

/* footer
-------------------------------*/
footer{text-align: center; padding: 5vw 0;}
footer small{font-family: var(--font_en);}

@media only screen and (max-width: 768px){
	footer{ padding: 50px 0;}
}

/* modal
-------------------------------*/
.modal_link{cursor: pointer;}

.modal_box{ position: fixed; background-color: #fff; width: 100%; height: 100lvh; top: 0; left: 0; z-index: 1000; transition: 0.5s cubic-bezier(0.87, 0, 0.13, 1); overflow: hidden; display: block; opacity: 0; visibility: hidden; cursor: pointer; transition: 0.2s;}
.modal_box.active{ opacity: 1; visibility: visible;}
.modal_box .close{position: absolute;width: min(42px,6vw);top: 20px;right: 20px;}
.modal_box .in_box{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 90%;max-width: 1000px;max-height: 80%;overflow-y: scroll;}
.modal_box .in_box .stit{font-size: min(40px,8vw);font-weight: bold;line-height: 1.5em;padding-bottom: 0.4em;margin-bottom: 0.6em;border-bottom: 1px solid #000;}
.modal_box .in_box .txt_box{text-align: left;}
.modal_box .in_box .txt_box .end_txt{text-align: right;}
.modal_box .bg_box{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 94%;max-width: 1000px;height: 80%;}
.modal_box .bg_box .icon{position: absolute;width: min(56px,10vw);}
.modal_box .bg_box .icon.top{top: max(-56px,-12vw);left: 0;}
.modal_box .bg_box .icon.bottom{bottom: max(-56px,-12vw);right: 0;transform: scale(-1,-1);}

/* artists modal */
.artists_modal{background-color: #fff;}
.artists_modal .in_box{display: flex;flex-direction: row-reverse;justify-content: space-between;}
.artists_modal .a_img{width: 48%;}
.artists_modal .txt_box{width: 48%;font-size: 0.9em;line-height: 1.8em;}
.artists_modal .txt_box .name{font-family: var(--font_en);font-size: 2em;font-weight: bold;line-height: 1.5em;margin-bottom: 12px;}
.artists_modal .txt_box a{text-decoration: underline;}

@media only screen and (max-width: 768px){
	.artists_modal .in_box{flex-direction: column;}
	.artists_modal .a_img{width: 100%;}
	.artists_modal .txt_box{width: 100%;}
	.artists_modal .txt_box .name{font-size: 1.8em;}
}



/* 404
-------------------------------*/
#error_404{padding: min(15vw, 600px) 0;}
#error_404 .stit{font-family: var(--font_en);font-size: 36px;color: #d31277;line-height: 1.5em;margin-bottom: 0.5em;}
#error_404 .button{}