@charset "utf-8";

/* CSS INFORMATION -====================================================
File name : layout.css
Description : レイアウト用CSS
===================================================================== */


/* ==========================================================
	共通
========================================================== */

/*メインビジュアル背景*/
.mv {
	background-color: #ffea55;
	/*	画像はこちら↓ */
	/*	background: url(../images/bg.png) repeat center;*/
}

/*アクセントカラー（背景色）*/
.nav,
.slick-arrow,
.slick-active button::before,.ttl_h2:before,
.popup_close {
	background-color: #ff4500;
}

/*アクセントカラー（文字色）*/

.wrapper .txt_link,
.wrapper b.highlight,
.cast_name1 {
	color: #a00010;
}
.ttl_h3{
	color: #000;
}

.popup_close {
	border-color: #a00010;
}


/* ==========================================================
	header
========================================================== */

/*メニューの幅(SP)
　※calc(### / 750 * 100%)の###部分を変更してください*/
.nav ul {
	width: calc(1200 / 750 * 100%);
	justify-content: space-around;
}

/*メニューの文字色*/
.nav a {
	color: #fff;
}

/*メニューの文字色：ホバー*/
/*テキストリンクの文字色：ホバー*/
.nav a:hover,
.txt_link:hover {
	color: #000;
}

/*メニューの下線：ホバー*/
.nav a:hover:after {
	background-color: #000;
}


/* ==========================================================
	コンテンツ
========================================================== */

/*コンテンツ外側の背景*/
#main {
	background-color: #ffea55;
    /*	画像はこちら↓ */
    /*	background: url(../images/bg.png) repeat center;*/
}

/*コンテンツ背景*/
.contents {
	background-color: #fff;
}

/*スライダーの矢印ボタン：ホバー*/
/*ポップアップのクローズボタン：ホバー*/
.slick-arrow:hover,
.popup_close:hover {
	background-color: #000;
}

/*ポップアップのクローズボタン：ホバー*/
.popup_close:hover {
	border-color: #000;
}

/* 画像ガード */
.photo_protect {
	position: relative;
	display: inline-block;
	pointer-events: none;
}

.photo_protect::after {
	content: "";
	width: 100%;
	height: 100%;
	display: block;
	background-color: transparent;
	position: absolute;

	top: 0;
	left: 0;
}
.metaverse{
	background-color: #fff0b6;
	padding: 2rem 4rem;
}
p{
	margin: 1rem 0;
}
.btn_link{
	background-color: #fff;
}
.two_column {
    justify-content: flex-start;
    gap: 1rem;
}
.f_box li {
    width: calc(70% - 1rem);
}
.name{
	color: #e6b422;
	font-weight: bold;
	font-size: 1.1em;
	background-color: beige;
}
.metaverse_ttl{
	font-size: 2.8rem;
	color: #f00;
	font-weight: bold;
	background-color: #fff;
	padding: 1rem;
    margin-bottom: 1rem;
}

.metaverse_text{
	/* text-align: center; */
}
.bg_white{
	background-color: #fff;
	padding: 1rem;
}
.f_box{
	display: flex;
}
.caption{
	font-size: 1.4rem;
	text-align: center;
}
.outline{
	font-size: 0.8em;
}
.bnr_anothername{
	text-align: center;
	border-radius: 0;
	background-color: #fff;
	padding: 2rem;
	border: 3px solid #a00010;
	margin-bottom: -3rem;
}
.btn_link{
	display: block;
	border-radius: 0;
}
.btn_link:hover{
	width: fit-content;
	display: block;
	background-color: #fff0b6;
	border-radius: 0;
}
.black{
	color: #000;
}
.ttl_h3_blue{
	font-size: 1.2em;
	color:#ff4500;
	background-color:#ffe4e1;
}
.ttl_h3_red{
	font-size: 1.2em;
	color:#ffa500
}
.caution{
	color: #f00;
	font-size: 1.2em;
}
.twitter {
    border: 4px solid #a00010;
    padding: 1rem;
}
.photo1 {
	display: block;
	width:80%;
	margin: 3rem auto;
}
.photo2 {
	display: block;
	width:80%;
	margin: 3rem auto;
}
.emphasis{
    color: #e91e63;
    font-weight: bold;
    background-color: #fff;
    font-size: 2.4rem;
    padding: 0.5em;
	display: block;
    line-height: 1.8;
}
.wrapper a {
    color: #fff;
}
.btn_link {
	width: 100%;
	text-align: center;
	font-size: 2rem;
	line-height: 1.4;
    background-color: #ff9800;
    padding: 3rem 5rem;
    color: #fff;
    font-weight: bold;
    border-radius: 50px;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
}
.btn_link:hover {
	width: 100%;
	text-align: center;
	font-size: 2rem;
	line-height: 1.4;
	background-color: #ff9800;
    padding: 3rem 5rem;
    color: #fff;
    font-weight: bold;
    border-radius: 50px;
	box-shadow: 5px 5px 5px rgba(0,0,0,0.3);

}
.f_box{
	display: block;
}
.cast_id_01{
	width: 100%;
}

.flag-icon {
	margin-right: .5em;
}

span.marker {
	background: linear-gradient(transparent 50%, rgba(255, 246, 0, 0.5) 50%);

}
span.marker-red {
	background: linear-gradient(transparent 50%, rgba(213, 0, 107, 0.5) 50%);

}
.cast-txt {
	font-weight: 700;
}
.cast-txt dt {
	color: #ff4500;
}

.country_title {
	background-color: #000;
	color: #fff;
	font-weight: 700;
	font-size: 2.8rem;
	padding: 0 .5em;
}

.point-txt {
	color: #fff000;
}

.txt-box {
	width: 90%;
	margin: 2rem auto;
	font-size: 4rem;
	padding: .25em;
	line-height: 6rem;
	color: #fff;
	font-weight: 700;
	background-color: #ff9800;
	text-align: center;
}
.bnr-tver {
	width: 90%;
	margin: 3rem auto;
}
.bnr-tver img {
	width: 100%;
}
@media screen and (min-width: 768px){
	.metaverse_ttl{
		font-size: 2rem;
	}
	.f_box li {
		width: calc(40% - 1rem);
	}
 .bnr_anothername{
		font-size: 2rem;
	}
.photo1 {
	width: 500px;
}
.photo2 {
	width: 650px;
}

.f_box{
	display: flex;
}
.f_item{
	width: 50%;
}
.btn_link {
	width: fit-content;
	text-align: left;
}
.btn_link:hover {
	width: fit-content;
	text-align: left;
}
.cast_id_01{
	width: calc(25% - 1rem) !important;
}
.country_title {
	font-size: 2rem;
}
.bnr-tver {
	width: 400px;
	margin: 2rem auto;
}
}
/*プリント禁止*/
@media print {
    * {
        display: none;
        opacity: 0;
        background: #fff;
    }

    img {
        display: none;
        opacity: 0;
        background: #fff;
    }
}