@charset "utf-8";
/*-------------------------*/
/*Reset*/
html{margin:0; padding:0; border:0; overflow-y:scroll;scroll-behavior: smooth;}
*{border:0; box-sizing: border-box; margin:0; padding:0;}
body{
background-color: var(--c_red);
color: white;
line-height:1; -webkit-text-size-adjust:100%; width:100%;
}
h1,h2,h3,h4,h5,h6,p,span,table,a,img,dl,dt,dd,ul,li,ol,iframe,nav,small{
margin:0;	padding:0; font-size:100%;font-weight:normal; background:transparent;
vertical-align:baseline; border:none;}
img{vertical-align:top;}
ol, ul{list-style:none; list-style-type:none;}
/*
a:link{color:#fff; text-decoration:none;}
a:visited{color:#fff; text-decoration:none;}
a:hover{color:#f00; text-decoration:none;}
*/

:root{
--c_red: #e70012;
}
.onlyPc{}
.onlySp{display: none;}

#wrapper{
color: white;
font-family: Arial, Helvetica,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka,"sans-serif";
margin: 0 auto;
width: 100%;
}
.Impact_Regular{
font-family: "impact", sans-serif;
font-weight: 400;
font-style: normal;
}
.Source_Han_Sans_Variable{
font-family: "source-han-sans-vf", sans-serif;
font-variation-settings: "wght" 250;
}
.Toppan_BunkyuMidashiGoStdN_EB{
font-family: "toppan-bunkyu-midashi-go-std", sans-serif;
font-weight: 900;
font-style: normal;
}

/*-------------------------*/
#sns_button_pc{margin: 15px auto;min-height: 50px; width: 120px;}
#sns_button_pc .btn_sns img{height: 50px;width: 50px;margin: 0 5px;}

/*-- header -----------------------*/
header {
background: white;
display: flex;
flex-wrap: nowrap;
padding: 10px 0;
width: 100%;
}
header h1{
color: var(--c_red);
font-family: "toppan-bunkyu-midashi-go-std", sans-serif;
font-weight: 900;
font-style: normal;
font-size: min(1.1em, 5.0vw);
width: 25%;
}
header h1 a {
color: var(--c_red);
display: block;
line-height: 1.3;
text-decoration: none;
padding: 0 0 0 2%;
}
header nav{
color: #aaa;
width: 85%;
}
header nav a{
color: var(--c_red);
text-decoration: none;
}
header nav a:hover{
opacity: 0.6;
}
header nav ul {
display: flex;
flex-wrap: nowrap;
justify-content: flex-end;
overflow: visible;
}
header nav ul li{
font-family: "impact", sans-serif;
font-style: normal;
font-size: min(2.4em, 8.0vw);
font-weight: 400;
margin: 0 2% 0 0;
}
/*-------------------------*/

section {
margin: 0 auto;
padding: 4% 0 2%;
max-width: 1400px;
width: 80%;
}
.flex{
display: flex;
}
.flex.rev{
flex-flow: row-reverse;
}
section h2{
font-family: "impact", sans-serif;
font-weight: 400;
font-size: min(5em, 12.0vw);
font-style: normal;
}
section div{
font-family: "source-han-sans-vf", sans-serif;
font-variation-settings: "wght" 250;
}

/* #title ---------------------------------------------------------- */
#title{
position: relative;
min-height: 550px;
margin: 0 auto;
padding: 5% 0;
width: 1000px;
}
#title .logo{
margin: 0 auto;
width: 40%;
}
#title .logo img{
height: auto;
width: 100%;
}
#title .popUpImg{
border: solid white 1px;
color: white;
font-family: "impact", sans-serif;
font-weight: 400;
font-size: min(2em, 4.0vw);
text-align: left;
padding: 1%;
position: absolute;
right: 15%;
bottom: 10%;
word-break: auto-phrase;
max-width: 110px;
}
#title .popUpImg:hover{
opacity: 0.6;
}

/* 基本の背景（非表示時は pointer-events:none でクリック無効） */
#imgModal {
align-items: center;
background: rgba(0,0,0,0.6);
display: none;             /* JSで制御 */
position: fixed;
inset: 0;
justify-content: center;
pointer-events: none;      /* 非表示時はクリック受けない */
opacity: 0;
transition: opacity 260ms ease; /* 背景のフェード */
z-index: 9999;
}
/* モーダル内コンテナ */
.modalInner {
background: #fff;
box-sizing: border-box;
border-radius: 10px;
padding: 18px;
max-width: 90%;
max-height: 85%;
overflow: auto;
opacity: 0;
position: relative;
transform: translateY(8px) scale(0.98);
transition: transform 300ms cubic-bezier(.2,.9,.25,1), opacity 300ms ease;
}
/* 画像の調整 */
#modalContent {
display: block;
max-width: 100%;
max-height: 70vh;
}
/* 閉じるボタン */
#modalClose {
background: transparent;
border: none;
font-size: min(1.3em,3.0vw);
cursor: pointer;
position: absolute;
top: 8px;
right: 10px;
}
/* open クラスが付いたときの表示状態（フェードイン） */
#imgModal.open {
display: flex;
opacity: 1;
pointer-events: auto;
}
/* open が付いたときは modalInner もふわっと */
#imgModal.open .modalInner {
transform: translateY(0) scale(1);
opacity: 1;
}


/* #concept ---------------------------------------------------------- */
#concept{
min-height: 500px;
position: relative; 
}
#concept h2{
margin: 0;
padding: 10% 5% 5% 0;
position: relative;
text-align: left;
width: 40%!important;
}
#concept .btn {
position: absolute;
top: 300px;
left: 5%;
z-index: 150;
}
#concept .btn::after{
content: "\25B6";
color: white;
}
#concept .btn[data-choose="en"]{
font-family: "impact", sans-serif;
font-size: min(2.5em, 6.0vw);
font-weight: 400;
/*line-height: 2.0;*/
}
#concept .btn[data-choose="ja"]{
font-family: "toppan-bunkyu-midashi-go-std", sans-serif;
font-size: min(2.3em, 5.5vw);
font-weight: 900;
}
#concept .btn[data-choose="ja"] strong{
font-size: min(2.5em, 3.5vw);
font-weight: bold;
}
#concept .text {
font-weight: bold;
line-height: 1.5;
text-align: left;
}
#concept .text strong {
font-size: min(1.5em, 4.0vw);
}



/* #news ---------------------------------------------------------- */
#news{}
#news h2{
padding: 5% 0 5% 5%;
text-align: right;
width: 30%;
}
#news .list {
/*font-family: "toppan-bunkyu-midashi-go-std","impact", sans-serif;*/
padding: 0 0 0 5%;
width: 100%;
}
#news .list dl {
/*align-items: flex-start;*/
display: flex;
flex-wrap: wrap;
width: 100%;
}
#news .list dl > div{
width: 100%;
}
#news .list dl dt {
color: white;
font-family: "impact", sans-serif;
font-size: min(2.5em, 5.0vw);
font-weight: 400;
line-height: 1.5;
margin-bottom: 1%;
position: relative;
width: 25%;
}
#news .list dl dd {
color: white;
font-family: "Impact", "toppan-bunkyu-midashi-go-std";
font-size: min(2.5em, 5.0vw);
font-weight: 400;
line-height: 1.5;
margin-bottom: 1%;
width: 75%;
}
#news .list dl dd a{
color: white;
}
/*#news .triangle {
display: block;
height: 0;
width: 0;
position: absolute;
bottom: 8px;
right: 8px;
border-left: 15px solid transparent;
border-bottom: 15px solid #fff;
}*/

/* #event ---------------------------------------------------------- */
#event{}
#event h2{
padding: 5% 5% 5% 0;
text-align: left;
width: 100%;
}
#event .csOut{
margin: 0 auto 5%;
text-align: center;
}
#event .cs{
background: white;
color: var(--c_red);
display: inline;
font-family: "impact", sans-serif;
font-size: min(4em, 8.0vw);
padding: 0 2% 0.5%;
text-align: center;
}
#event h3 {
background: white;
color: var(--c_red);
font-family: "impact", sans-serif;
font-weight: 400;
font-size: min(1.5em, 4.0vw);
/* margin: 1% auto 0;  //いろいろある版 */
margin: 0 auto 2%;
padding: 1%;
position: relative;
display: inline-block;
width: 100%;
/*cursor: pointer;               */
}
#event h3 .area{
display: inline-block;
width: 40%;
}
#event h3 .area .talkshow{
background: var(--c_red);
color: white;
margin: 0 0 0 10%;
padding: 0 1%;
}
/* ▼のやつ -------------------------------------------
#event h3::after {
content: '';
position: absolute;
bottom: -14px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 15px solid white;
transition: opacity 0.3s ease;
z-index: -1;
}
*/
/* ▼を非表示にする用 */
#event h3.hide-arrow::after {
opacity: 0;
}
#event .info {/* info 初期は隠す */
background: white;
color: #333;
display: flex;
max-height: 0;
margin: 0 auto 2%;
overflow: hidden;
opacity: 0;
padding: 0 5%; /* 横方向は常にあり */
transition: max-height 0.4s ease, opacity 0.4s ease;
z-index: -1;
}
/* 開くとき */
#event .info.open,
#event .info.ongoing {
border-top: 2px solid #ddd;
max-height: 1000px !important;
opacity: 1;
padding: 5%;
}
#event .info .text{
font-size: min(1.0em, 3.0vw);
width: 60%;
}
#event .info .text dl {
align-items: flex-start;
display: flex;
flex-wrap: wrap;
width: 100%;
}
#event .info .text dt {
font-weight: bold;
line-height: 1.5;
margin-bottom: 2%;
position: relative;
width: 18%;
}
#event .info .text dt::after {
content: "：";
position: absolute;
right: 0.2em;
}
#event .info .text dd {
font-weight: bold;
line-height: 1.5;
margin-bottom: 2%;
width: 82%;
}
#event .info .map{
width: 40%;
}
#event .text_talkshow{
border: solid 1px var(--c_red);
margin: 5% 5% 0 0;
line-height: 1.5;
padding: 3%;
text-align: left;
width: 90%;;
}

/*-- #newsPage ----------------------*/
#newsPage #news {
min-height: 90vh;
}
#newsPage #news h2{
padding: 5% 0;
text-align: left;
}
#newsPage article{
border: 1px solid white;
margin: 0 auto 5%;
padding: 5%;
}
#newsPage article h4{
font-family: "Impact", "toppan-bunkyu-midashi-go-std";
font-size: min(2.5em, 6.0vw);
font-weight: 400;
/*line-height: 1.5;*/
margin: 0 0 1%;
}
#newsPage article .img{}
#newsPage article .date{
font-family: "Impact";
font-size: min(1.5em, 4.0vw);
margin: 0 0 1%;
text-align: right;
}
#newsPage article .text{
font-family: "source-han-sans-vf", sans-serif;
line-height: 1.5;
}
#newsPage article a{
/*color: white;*/

background-color: white;
color: var(--c_red);

display: block;
font-family: "Impact";
font-size: min(2.0em, 5.0vw);
font-weight: 400;
line-height: 1.5;
margin-top: 3%;
padding: 0 1% 0 0;
text-align: right;
text-decoration: none;
}
#newsPage article a:hover{
/*background-color: white;
color: var(--c_red);*/
opacity: 0.6;
}


/*-- SNS ----------------------*/
.snsLogo{
height:40px;
width: 40px;
}
.sns{
width:30%;
height:40px;
margin: 20px auto;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
}
.sns a{
display:block;
width:40px;
height:40px;
margin:0 !important;
}
.sns img{
width:40px !important;
height:40px !important;
margin:0 !important;
}

/* footer ---------------------------------------------------------- */
footer{
background: white;
color: #333;
clear: both;
font-size: 0.9em;
line-height: 1.5;
text-align: center;
}
footer a{
color: #d00;
text-decoration: none;
}
footer .snsLink{
color: var(--c_red);
display: flex;
font-family: "impact", sans-serif;
font-weight: 400;
font-style: normal;
flex-wrap: nowrap;
line-height: 40px;
text-align: left;
padding: 1%;
}
footer .snsLink ul {
display: flex;
flex-wrap: nowrap;
min-width: 30%;
}
footer .snsLink ul li{
margin: 0 0 0 2%;
}
footer .snsLink ul li:nth-child(1) {
color: 8px solid var(--c_red);
/*display: block;*/
font-size: min(2.4em, 6.0vw);
padding: 0 2% 0 0;
word-break: break-all;
}

footer .contact {
text-align: center;
}
footer .contact a{
background: white;
border: 8px solid var(--c_red);
border-radius: 10px;
color: var(--c_red);
display: block;
font-family: "impact", sans-serif;
font-weight: 400;
font-style: normal;
font-size: min(3.0em, 6.5vw);
margin: 0 auto;
width: 40%;
padding: 0 5%;
text-align: center;
}
footer .contact a:hover{
background: var(--c_red);
color: white;
}
/*
footer .contact.slide {
background: #fff;
color: #ff701e;
overflow: hidden;
position: relative;
z-index: 1;
}
footer .contact.slide::after {
background: #ff701e;
position: absolute;
top: 0;
left: 0;
content: '';
width: 100%;
height: 100%;
transform: scale(0, 1);
transform-origin: left top;
transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
z-index: -1;
}
footer .contact.slide:hover {
color: #fff;
}
footer .contact.slide:hover::after {
transform: scale(1, 1);
}
footer .contact.slide.skew::after {
transform: skewY(-10deg) scale(1, 0);
height: 140px; // ボタンの高さによって調整
}
footer .contact.slide.skew:hover::after {
transform: skewY(-10deg) scale(1, 1);
}
*/

footer .copyrightA{
background: white;
color: #333;
font-size: min(0.95em, 2.5vw);
padding: 1% 0;
text-align: center;
word-break: auto-phrase;
}
footer .copyrightB{
background: var(--c_red);
color: white;
padding: 0.3% 0;
text-align: center;
}
footer .company {
text-align: center;
}
footer .company ul{
align-items: center;
justify-content: center;
display: flex;
flex-wrap: nowrap;
margin: 1% auto;
width: 1000px;
}
footer .company ul li{
flex-basis: 20%;
}
footer .company ul li:nth-child(2) img{
width: 50%;
}
footer .company ul li img{
height: auto;
width: 100%;
}

/*-- 緊急テキスト ----------------------*/
#rp_textbox{
background: rgba(255,255,255,0.7);
border: #928484 solid 1px;
font-size: 0.9em;
margin: 20px auto;
padding: 8px;
line-height: 1.6em;
text-align: left;
max-width: 960px;
width: 90%;
}
#rp_textbox .pop_text{
background:#fff;
-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;
border: #c9c9c9 solid 1px;
font-size:0.9em;
line-height:1.5em;
margin:0 auto;
padding:20px;
text-align:left;
max-width: 900px;
word-break: break-all;
width:75%;
}
#rp_textbox .pop_text .popup_title{
border-bottom: #999 dotted 1px;
font-size:1.1em;
line-height:1.5em;
font-weight:bold;
margin:0 0 15px 0;
padding-bottom:5px;
text-align:center;
width:100%;
}
#rp_textbox .ema_img {
display: block;
text-align: center;
width: 100%;
}
#rp_textbox .ema_img img{
margin: 0 auto 10px;
max-width: 100%;
}
#rp_textbox a{
color:#d00;
text-decoration:underline;
}

/* 動画囲いタグ ----------------------　<div class="video-container"></div> */
.video-container {
padding: 56.25% 0 0;
position: relative;
width: 100%;
}
.video-container iframe{
height: 100% !important;
position: absolute;
right: 0;
top: 0;
width: 100% !important;
}

/*-- google翻訳 ----------------------*/
.skiptranslate.goog-te-gadget,
a.goog-logo-link{color:#fff !important;}

/*-- ローディング ----------------------*/
#loader{background-color: var(--c_red); position:fixed; height:100%; width:100%; z-index: 21000;}/*背景*/
.loader,.loader:before,.loader:after {
background: #aaa;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
height: 4em;
width: 1em;
top: 50%;
}
.loader {
color: #ccc;
text-indent: -9999em;
margin: auto;
position: relative;
font-size: 11px;
-webkit-transform: translateZ(0);-ms-transform: translateZ(0);transform: translateZ(0);
-webkit-animation-delay: -0.16s;animation-delay: -0.16s;
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
}
.loader:before,.loader:after {
position: absolute;
top: 0;
content: '';
}
.loader:before {
left: -1.5em;
-webkit-animation-delay: -0.32s;animation-delay: -0.32s;
}
.loader:after {
left: 1.5em;
}
@-webkit-keyframes load1 {
	0%,80%,100% {
	box-shadow: 0 0;
	height: 4em;
	}
	40% {
	box-shadow: 0 -2em;
	height: 5em;
	}
	}
	@keyframes load1 {
	0%,80%,100% {
	box-shadow: 0 0;
	height: 4em;
	}
	40% {
	box-shadow: 0 -2em;
	height: 5em;
	}
}
/*--------------------------------------------------------*/

/* TAB  -------------------------------------------------- */
@media screen and (max-width:1200px) {
	#news .list dl dt {
	width: 30%;
	}
	#news .list dl dd {
	width: 70%;
	}
}
/* TAB  -------------------------------------------------- */
@media screen and (max-width:1000px) {
	/*-- Pan_box ----------------------*/

	/*-- 緊急テキスト ----------------------*/
	#rp_textbox{
	margin: 10px auto;
	max-width:640px;
	width: 90%;
	}
	#rp_textbox .pop_text{}
	#rp_textbox .popup_title{
	margin-bottom:10px;
	}
	/*-- SNS -----------------------*/
	#sns_button_sp{
	padding: 15px 0;
	text-align: center;
	}
	#sns_button_sp .btn_sns{
	margin: 0 2px;
	}
	#sns_button_sp .btn_sns img{
	height: 50px; width: 50px;
	}
	header{
	position: relative;
	}
	header h1{
	width: 80%;
	}
	header nav{
	background: white;
	height: 100vh;
	/*position: absolute;*/
    position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	z-index: 9999;
	}
	header nav.headMenu{
	display: none;
	}
	header nav ul{
	display: block;
	width: 100%;
	}
	header nav ul li{
    border-bottom: 1px #aaa solid;
    padding: 4%;
	text-align: left;
    width: 100%;
	}
	header nav a {
	display: block;
	width: 100%;
	}
	header nav ul li:nth-last-child(-n + 1){
    border-bottom: none;
    display: flex;
    margin: 0 auto;
    width: 30%;
	}
	header .hamOut {
    position: absolute;
    top: 1.7vh;
    right: 2vh;
    z-index: 20000;
	}

	/*=============================
	.btn-trigger
	=============================*/
	.btn-trigger {
	cursor: pointer;
	margin: 0.5% 0 0 0;
	height: 38px;
	position: relative;
	width: 50px;
	}
	.btn-trigger span {
	background-color: #666;
	border-radius: 4px;
	height: 4px;
	position: absolute;
	left: 0;
	width: 100%;
	}
	.btn-trigger, .btn-trigger span {
	display: inline-block;
	transition: all .5s;
	box-sizing: border-box;
	}
	.btn-trigger span:nth-of-type(1) {
	top: 0;
	}
	.btn-trigger span:nth-of-type(2) {
	top: 17px;
	}
	.btn-trigger span:nth-of-type(3) {
	bottom: 0;
	}
	/*=============================
	#hamBtn
	=============================*/
	#hamBtn.active span:nth-of-type(1) {
	-webkit-transform: translateY(17px) rotate(-45deg);
	transform: translateY(17px) rotate(-45deg);
	}
	#hamBtn.active span:nth-of-type(2) {
	left: 50%;
	opacity: 0;
	-webkit-animation: active-hamBtn-bar02 .8s forwards;
	animation: active-hamBtn-bar02 .8s forwards;
	}
	@-webkit-keyframes active-hamBtn-bar02 {
		100% {
		height: 0;
		}
	}
	@keyframes active-hamBtn-bar02 {
		100% {
		height: 0;
		}
	}
	#hamBtn.active span:nth-of-type(3) {
	-webkit-transform: translateY(-17px) rotate(45deg);
	transform: translateY(-17px) rotate(45deg);
	}
/*
}
/* SP  -------------------------------------------------- * /
@media screen and (max-width:640px) {
*/	.flex {
	display: inline-block;
	}
	#modalClose {
	font-size: 8vw;
	top: 1%;
	right: 3%;
	}
	section {
	padding: 5% 0;
	max-width: 1000px;
	width: 90%;
	}
	#title {
	min-height: auto;
	width: 100%;
	}
	#title .logo{
	max-width: 300px;
	width: 100%;
	}
	#title .popUpImg{
	right: 5%;
	width: 15vw;
	}

	#concept h2{
	margin: 0 0 3%;
	padding: 0;
	width: 100%!important;
	}
	#concept .btn{
	top: 7vw;
	right: 5%;
	left: unset;
	}

	#news h2 {
	padding: 0;
	text-align: left;
	margin: 0 auto 2%;
	width: 90%;
	/*width: 100%!important;*/
	}
	#news .flex {
	display: flex;
	}
	#news .list{
		
	}
	#news .list dl dt{
	width: 30%;
	}
	#news .list dl dd{
	width: 70%;
	}

	#event h2{
	padding: 0;
	margin: 0 auto 2%;
	}
	#event .csOut {
    margin: 7% auto 5%;
	}
	#event h3{
	line-height: 1.3;
	padding: 2%;
	}
	#event h3 .area{
	width: 100%;
	}
	#event h3 .area .talkshow{
	margin: 0 0 0 5%;
	padding: 0 2%;
	}

	#event .info{
	display: inline-block;
	}
	#event .info .text {
	margin: 0 auto 5%;
	width: 100%;
	}
	#event .info .text dt{
	margin-bottom: 1%;
	width: 25%;
	}
	#event .info .text dd{
	width: 75%;
	}
	#event .info .map {
	width: 100%;
	}
	#event .text_talkshow{
	width: 100%;
	}

	#newsPage #news h2 {
	margin: 0!important;
	}

	footer .snsLink ul{
	margin: 2% auto 5%;
	min-width: 100%;
	}
	footer .company ul{
	flex-wrap: wrap;
	list-style: none;
    min-height: 13vh;
	width: 80%;
	}
	footer .company ul li{
	align-items: center;  /* 縦方向中央 */
	box-sizing: border-box;
	display: flex;
	flex: 0 0 33%;
	/* min-height: 15vh;*/
	justify-content: center;
	}
	footer .company ul li a{
	display: block;
	}
	footer .company ul li img{
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	}
	footer .contact a {
	margin: 0 auto 2%;
	padding: 1% 0;
	width: 80%;
	}

}