@charset "UTF-8";
:root {
 --h3font:1200px;
 --footerColor:rgb(fff,fff,fff,0.5);
 --footerBGop:0.5;
 --fontH2:calc(1.8rem + ((1vw - 0.64rem) * 1.2));/* var(--fontH2) */
 --fontH3:calc(1.1rem + ((1vw - 0.64rem) * 1.2));/* var(--fontH3) */
 --fontBody:calc(1rem + ((1vw - 0.64rem) * 1.2));
}

img{ width:100%;}
html { font-size:62.5%;/*10px*/}
/*body { font-size:1.6rem; line-height: 2;
background-image:url(/special/18th-anniversary-project/_img/bodyBG.jpg);
background-repeat:repeat;
background-size:auto;
}*/

body { font-size:1.6rem; line-height:1.5;
background-image: url(/special/18th-anniversary-project/_img/entryChara/bgCenter.png), url(/special/18th-anniversary-project/_img/bodyBG.jpg);
background-position: top center, top center;
background-repeat: repeat-y, repeat;
background-color:rgb(102, 153, 255);
background-size:auto,auto;
}
#roComFooter{background-color:#002067;}


/*========================[ 定型  ]========================*/
/*-----  タイトル設定 -------*/
h1{ font-size: 36px; font-size: calc(2.4rem + ((1vw - 0.64rem) * 2));  /* 24px~36pxで可変*/ line-height: 1.5;}
h2{ font-size: 24px; font-size: calc(1.8rem + ((1vw - 0.64rem) * 1.2));/* 22px~24pxで可変*/ font-weight:bold; line-height: 1.5;}
h3{ font-size: 20px; font-size: calc(1.1rem + ((1vw - 0.64rem) * 1.2));/* 18px~20pxで可変*/ font-weight:bold; line-height: 1.5;}
/* 640px～1200px calc( 基準サイズ ((1vm -  [ビューポートの幅の最小値/100] ) * [100 * フォントサイズの差 / ビューポートの幅の差] ) ) */

@media (min-width: 75em) {/* 1200px以上でフォントサイズを固定*/
	h1{font-size: 3.6rem;/* 36px*/}
	h2{font-size: 2.4rem;/* 24px*/}
	h3{font-size: 2rem; /* 20px*/}
}
@media (max-width: 40em) {/* 640px以下 でフォントサイズを固定*/
	body { font-size:1.2rem;}
	h1{ font-size: 2.4rem;}
	h2{ font-size: 2rem;}
	h3{ font-size: 1.6rem;}
}
/*-----  ページトップ設定 -------*/
#page_top{ width:3em; height:3em; position:fixed; right:0; bottom:3em; background: rgba(0,10,27,1); opacity: 0.6; border:solid #fff 1px;}
#page_top a{ position:relative; display: block; width:40px; height:40px; text-decoration: none; }
#page_top a::after{ content: '▲'; font-size: 1.5em; font-weight: bold; color:#fff; position: absolute; top:0.25em; bottom:0; right:0; left:0.25em; margin: auto; text-align: center; }

/*-----  デコレーション設定 -------*/
.f-redBold{ color:red; font-weight:bold;}
.cent{ margin-left:0; margin-right:0;}
/*====================================================================*/
/*--- トップイメージ ----*/
header{ width:100%; background: url(/special/18th-anniversary-project/_img/entryChara/heddeBeasrBG.png) top center repeat-x; }
#headers{ max-width:1464px; background: url(/special/18th-anniversary-project/_img/entryChara/hedderBG.jpg) center top no-repeat; background-size:cover; margin:0 auto;}
#hedderBox{max-width:1464px; height:auto; margin:0 auto; position:relative; }
#hedderBox:before{ content: ""; display: block; padding-top:62.97%;}
#hedderChar{ position:absolute; top:0; left:0;}
#eventLogo{ position:absolute; top:1%; left:0; padding:0 32%;}
#topItem{ position:absolute; bottom:7%; left:0; padding:0 22.21%;}
#eventDay{ position:absolute; bottom:1%; left:0; padding:0 12.01%;}
/*-------------------------------------------------------------------*/
@media (max-width: 75em) {/* 1200px以下で背景を変更*/
}
/*====================================================================*/
main{ max-width:1200px; margin:0 auto; }
section{ width:80%; margin:2em auto;}
.readBox{
 padding:0.2em 0.5em;
 color:#565656;
 background:#bce8ff;
 box-shadow:0px 0px 0px 10px #bce8ff;
 border:dashed 2px #09099f;
 border-radius:1rem;
 line-height:2;
}
.readBox > div{ margin:2rem; }

/*-------------------------------------------------------------------*/
/* タイトルデザイン*/
.stripe{ background:repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px); margin:0 auto 2rem; padding:1rem; border-radius: 1rem; }
.stripe p{ background:rgba(255,255,255,0.5); padding:0.5rem; text-align:center; }

.stripedLine{
	background-color: rgba(244,253,255,0);
	color: #253570;
	padding: 10px;
	position: relative;
text-align:center;
	margin:0 auto 5rem;
}
.stripedLine::after {
	background: repeating-linear-gradient(-45deg, #253570, #253570 5px, #f0fff0 0, #f0fff0 10px); /* ストライプ */
	content: '';
	height: 5px; /* ストライプの高さ */
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
}
/*-------------------------------------------------------------------*/
.flow{ margin:0 auto; display:flex; justify-content: center; padding-bottom:2rem; }
.flow li:nth-child(odd)/*奇数*/{ width:calc((100%/9)*2); border:2px solid #ffa500; border-radius:1rem; padding:1rem; text-align:center; background-color:#fff; }
.flow li:nth-child(odd) p{ text-align:left; }
.flow li:nth-child(even)/*偶数*/{ width:calc((100%/9)); position:relative; }
.flow li:nth-child(even) p{ width:0; height:0; position:absolute; top:40%; left:35%; border-style:solid; border-width:3vw 0 3vw 3.5vw; border-color:transparent transparent transparent #ffa500; margin:0 auto; }

.banner{max-width:500px; margin:0 auto 5rem;}
/*-------------------------------------------------------------------*/
.charaInfo{ max-width:1000px; height:auto; margin:0 auto; border-radius:2rem; border:10px solid #00c; position:relative; margin-bottom:6rem; background:rgba(255,255,255,1); }
.charaInfo:before{ content: ""; display: block; padding-top:53%;}
.charaInfo .nameBox{ position:absolute; top:2rem; left:30%; z-index:500;}
.charaInfo .nameBox h1{/* web font*/
font-family: vdl-logojrblack, sans-serif; font-weight: 900; font-style: normal;/*adobe*/
 color: #FF7C00; background: -webkit-linear-gradient(top, #FFB76B 0%, #FFA73D 50%, #FF7C00 51%, #FF7F04 100%);  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;
}
.charaInfo .nameBox h2{}
.charaInfo .prfBox{ position:absolute; bottom:0; left:0; margin:0 auto; padding:0 0 0 25%; z-index:500;}
.charaInfo .prfBox dl{ display:flex; flex-wrap:wrap;}
.charaInfo .prfBox dt{width:20%; box-sizing:border-box; background:rgba(0,0,0,0.8); color:#fff; padding:0.2rem 0 0.2rem 0.5rem; border-bottom:1px solid #fff; white-space:nowrap;}
.charaInfo .prfBox dd{width:80%; box-sizing:border-box; background:rgba(255,255,255,0.8); color:#000; padding:0.2rem 0 0.2rem 0.5rem; border-bottom:1px solid #000; line-height:180%}
.charaInfo .prfBox dt:last-of-type{border-bottom:none;}
.charaInfo .prfBox dd:last-of-type{border-bottom:none; border-bottom-right-radius:2rem;}
.charaInfo .leftChara{position:absolute; bottom:0; left:0; overflow: hidden; padding:0; line-height:0;}
.charaInfo .rightChara{position:absolute; top:0; right:0; overflow: hidden; padding:0; line-height:0; z-index:400;}
/*-------------------------------------------------------------------*/
.sexBox{display:flex;}
.sexBox .sex{width:50%; box-sizing:border-box; padding:0.5rem;}
.sexBox .sex .men{ background:#165e83; color:#fff; text-align:center; padding:0.5rem; border-radius:5px;}
.sexBox .sex .fem{ background:#c9171e; color:#fff; text-align:center; padding:0.5rem; border-radius:5px;}
.sexBox .sex .rank{ display:flex;}
.sexBox .sex .rank .no{ width:50%; box-sizing:border-box; margin:0.5rem;}
.sexBox .sex .rank .no .prfIcon{width:100%; max-width:250px; position: relative; box-sizing:border-box; border-radius:5px; overflow:hidden;}
.sexBox .sex .rank .no .prfIcon:before{ padding-top:100%; content: ""; display: block;}
.sexBox .sex .rank .no .prfIcon img{ position: absolute; top: 0; left: 0;}
.sexBox .sex .rank .no .name{ text-align:center; padding:0.5rem; font-size:1.8rem ; font-weight:bold; }
.sexBox .sex .rank .no .point{ text-align:center; padding:0.5rem; font-size:1.8rem ;}
.sexBox .sex .rank .no .point:after{ content: "票";}

.sexBox table{ border-collapse:  collapse; width:100%;}
.sexBox table th{ border:1px solid #666; padding:0.5rem; }
.sexBox table td{ padding:0.5rem; border:1px solid #666; background:#fff;}
.sexBox table td:nth-child(odd):after{ content: "票";}

.blue th{background:#165e83; color:#fff; }
.red th{background:#c9171e; color:#fff; }

/*-----------------*/
.first h4{font-weight:bold; text-align:center; background:#ebd842; margin:0.5rem auto; padding:0.5rem;}
.first .prfIcon{border:3px solid #dccb18; background:#f2f2b0;}

.second h4{font-weight:bold; text-align:center; background:#c0c6c9; margin:0.5rem auto; padding:0.5rem;}
.second .prfIcon{border:3px solid #c0c6c9; background:#f3f3f2;}

/*-------------------------------------------------------------------*/
.char01Eremes .leftChara{padding-right:67%;}
.char01Eremes .rightChara{padding:2% 5% 0 70%;}

.char02Oscar .leftChara{padding-right:70%;}
.char02Oscar .rightChara{padding:2% 6% 0 70%;}

.char03Ktullanux .leftChara{padding-right:55.4%;}
.char03Ktullanux .rightChara{top:-20%; right:-10%; padding-left:71.8%;}

.char04Groza .leftChara{padding-right:47%;}
.char04Groza .rightChara{top:5%; right:-10%; padding-left:62.9%; }
.char04Groza h1{ /*color: #FF7C00; background: -webkit-linear-gradient(top, #FFB76B 0%, #FFA73D 50%, #FF7C00 51%, #FF7F04 100%);  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;*/}

.char05Schmitz .leftChara{padding-right:56.7%;}
.char05Schmitz .rightChara{padding:2% 6% 0 70%;}

.char06Morocc .leftChara{padding-right:68.8%;}
.char06Morocc .rightChara{top:-10%; right:-5%; padding-left:67.1%;}

.char07Loomin .leftChara{padding-right:74.6%;}
.char07Loomin .rightChara{padding:2% 6% 0 76%;}

.char08Lookie .leftChara{padding-right:58.4%;}
.char08Lookie .rightChara{padding:2% 6% 0 75%;}

.char09Leizi .leftChara{padding-right:65.3%;}
.char09Leizi .rightChara{padding:2% 7% 0 76%;}

.char10As .leftChara{padding-right:74.1%;}
.char10As .rightChara{padding:2% 7% 0 75%;}

.char11Elly .leftChara{padding-right:76.7%;}
.char11Elly .rightChara{padding:2% 7% 0 77%;}

.char12Elena .leftChara{padding-right:67.6%;}
.char12Elena .rightChara{padding:2% 5% 0 74.5%;}

.char13Meer .leftChara{padding-right:65.8%;}
.char13Meer .rightChara{padding:2% 2% 0 66%;}

.char14Kathrine .leftChara{padding-right:67.6%;}
.char14Kathrine .rightChara{padding:2% 5% 0 72%;}

.char15Zilant .leftChara{padding-right:60.6%;}
.char15Zilant .rightChara{top:-5%; right:-10%; padding-left:50%;}

.char16Spica .leftChara{padding-right:65.8%;}
.char16Spica .rightChara{padding:2% 5% 0 74%;}

.char17Cecil .leftChara{padding-right:65.9%;}
.char17Cecil .rightChara{padding:2% 5% 0 69%;}

.char18Margaretha .leftChara{padding-right:69.4%;}
.char18Margaretha .rightChara{padding:2% 5% 0 73%;}

/*------------------*/
@media (min-width: 75em) {/* 1200px以上でフォントサイズを固定*/
}

@media (max-width: 62.5em) {/* 1000px以下 */
	.prfBox dl{ font-size:var( --fontBody);}
	.charaInfo .prfBox dt:nth-of-type(6){display:none;}
	.charaInfo .prfBox dt:nth-of-type(7){display:none;}
	.charaInfo .prfBox dd:nth-of-type(6){display:none;}
	.charaInfo .prfBox dd:nth-of-type(7){display:none;}
}

@media (max-width: 52em) {/* */
	.charaInfo .prfBox dt:nth-of-type(-n+3){display:none;}
	.charaInfo .prfBox dt:nth-of-type(8){display:none;}
	.charaInfo .prfBox dd:nth-of-type(-n+3){display:none;}
	.charaInfo .prfBox dd:nth-of-type(8){display:none;}
	.sexBox{display:block;}
	.sexBox .sex{width:100%;}
}

@media (max-width: 26em) {
	main ul li{ width:calc(100%);}
}