@charset "UTF-8";

/* *****************************************************************************************************
*
*  contents.css
* 
***************************************************************************************************** */

/* ============================================================

	#mainContents

   ============================================================ */
#topicPath { display:none; }

/* ============================================================

	#contentsBox

   ============================================================ */
#contentsBox { margin-bottom:8.3333%; }
#titleBox {
	background-color:#EFF2F5;
	padding:2.5% 3.125%;
}
#titleBox h1 { font-size:138.5%; }
#contentsBox .read {
	padding:2.5% 3.125vw 0;
	font-size:85%;
	line-height:1.6;
}
.read span { display:inline; }
.read a { text-decoration:none; }
.read p a { color:#5C668B; }
#contentsBox a[target="_blank"] {
	padding-right: 7%;
	background: url(../images/icon_externallink_s.png) no-repeat center right;
	margin-right:2%;
}
.read a:hover { color:#586185; }
.read .eventList { margin:2.8% 0; }
.read .eventList h2 {
	background-color:#F2F2F2;
	padding:1.6667%;
	font-size:116%;
	font-weight:bold;
	display:inline-block;
	margin-bottom:3.3333%;
    position: relative;
}
.read .eventList ul li {
	font-size:108%;
	background:url(../images/arrow_event_r.png) left 1.2em no-repeat;
	padding:2.8571% 0 2.8571% 4.4444%;
	border-bottom:1px dotted #CCC;
}
.read .eventList ul li a {
	display:block;
	color:#333;
}
.read .eventList ul li a:hover { color:#5C668B; }
#contentsBox .read .eventList ul li a[target="_blank"] {
	padding-right: 7%;
	background: url(../images/icon_externallink.png) no-repeat center right;
	margin-right:0;
}
.read .eventList ul li.noArw { background: none; padding: 6px 0 4px; }
#contentsBox .read .eventList ul li.noArw a[target="_blank"] { display: inline-block; }
.eventList ul li.noArw div { display: table-cell; height:60px; vertical-align: middle; align-content: center; font-size: 1.125em; }
.eventList img { height: 60px; width: auto; float: left; margin-right: 10px; }
section.read.bb { border:none; }
#contentsBox table {
	border-top:#D6D6D6 1px solid;
	margin:4.5% 3.125% 0;
	font-size:85%;
	line-height:1.5;
	width:93.8889%;
}
#contentsBox table th {
	background-color:#F2F2F2;
	vertical-align:top;
}
#contentsBox table th, #contentsBox table td {
	border-bottom:#D6D6D6 1px solid;
	padding:3.3333%;
	text-align:left;
	width:100%;
	display:block;
}
#contentsBox table td span, #contentsBox table a.linkBtn span { display:block; }
#contentsBox table a {
	color:#333;
	text-decoration:none;
}
#contentsBox table a.linkBtn {
	display:block;
	background-color:#727BA1;
	text-align:center;
	color:#FFF;
	font-weight:bold;
	text-decoration:none;
	padding:2.5% 0;
	margin-top:3.125%;
    margin-right: 0;
}
#contentsBox table td img {
	width:100%;
	margin-bottom:2.8450%;
	border:1px solid #D6D6D6;
}
@media all and (orientation: landscape) {
	#contentsBox table th, #contentsBox table td {
		display:table-cell;
		padding:3.3333% 0 3.3333% 3.3333%;
	}
	#contentsBox table th { width:26.6667%; }
	#contentsBox table td { width:73.3333%; }
	.read .eventList ul li { padding:1.3889% 0 1.3889% 2.2222%; }
	#contentsBox a[target="_blank"] {
		padding-right:4.8%;
		margin-right:1.5%;
	}
}

/* ============================================================

	#topEvent

   ============================================================ */
#topEvent { margin-top:8.3333%; }
#topEvent h2 {
	font-size:100%;
	padding:0 3.125% 3.125%;
}
#loadarea li.col.span_4 { margin-bottom:5%; }
.eventLink {
	padding:5% 3.125%;
	background-color: #EFF2F5;
	margin-bottom:8.3333%;
}
.eventLink h3 {
	font-size:100%;
	margin-bottom:4%;
}
.eventLink ul li {
	float:left;
	width: 32.0%;
	margin-right:2%;
	height:30px;
	font-size:63%;
	line-height:1.2;
	text-align:center;
	display:table;
}
.eventLink ul li:last-child {
	margin-right:0;
	float:right;
}
.eventLink ul li span { display:block; }
.eventLink ul li a {
	display:table-cell;
	vertical-align:middle;
	text-decoration:none;
	font-weight:bold;
	color:#333;
	background-color:#FFF;
	border:1px solid #EBEBEB;
}
.eventLink ul li a:hover {
	color:#FFF;
	background-color:#999;
	border-color:#999;
}
.eventLink ul li.active a {
	border:1px solid #999;
	background:none;
	color:#333;
}

/* mosaic.css */
.pcEventImg { display:none; }
.mosaic-block {
	width:100%;
	height:200px;
	margin:0;
	background:none;
	border:none;
	float:none;
}
.mosaic-backdrop {
	background:none;
	display:block;
}
.mosaic-backdrop img { width:100%; }
.bar2 .mosaic-overlay {
	display:block;
	bottom:-83%;
	height:100%;
	background-color:rgba(255,255,255,0.75);
	color:#333;
	opacity:1;
	text-decoration:none;
	text-align:center;
}
.bar2 .mosaic-overlay h3 { padding:3.3333% 0; }
.bar2 .mosaic-overlay p {
	padding:0 3.125%;
	font-weight:bold;
	font-size:77%;
	line-height:1.7;
	text-align:left;
}

@media all and (orientation: landscape) {
	.bar2 .mosaic-overlay h3 { padding:1.6667% 0; }
	.eventLink {
		padding:2.5% 3.125%;
		margin-bottom:3.3333%;
	}
	.eventLink h3 { margin-bottom:2%; }
}

/* ============================================================

	#contactUs

   ============================================================ */
#contactUs, #contactUs_2 {
	margin:-45px auto 0;
	padding-top:45px;
	display:table;
    width: 75%;
    min-width: 300px;
}
#contactUs > div, #contactUs_2 > div {
	border:#727BA1 1px solid;
	padding:2.7778%;
	display:table-cell;
	text-align:center;
	vertical-align:middle;
}
#contactUs div div:first-child.row.gutters, #contactUs_2 div div:first-child.row.gutters {
	margin-bottom:2.7778%;
	padding-bottom:2.7778%;
	border-bottom:1px dotted #CCC;
}
#contactUs h1, #contactUs_2 h1 {
	font-size:116%;
	margin-bottom:2.7778%;
}
#contactUs h1 + p, #contactUs_2 h1 + p{ font-size:85%; }
#contactUs a.conForm, #contactUs_2 a.conForm {
	background-color:#727BA1;
	padding:4.1667%;
	font-size:108%;
	margin-bottom:2.7778%;
	color:#FFF;
	text-decoration:none;
	font-weight:bold;
	display:inline-block;
}
#contactUs a.conForm span, #contactUs_2 a.conForm span {
	background:url(../images/arrow_contact.png) right 50% no-repeat;
	padding-right:20px;
}
#contactUs .conForm:hover, #contactUs_2 .conForm:hover {
	opacity:0.8;
	cursor:pointer;
}
#contactUs .conTel, #contactUs_2 .conTel {
	font-size:85%;
	line-height:1.5;
	display:inline-block;
}

#contactUs .conTel span.priTel, #contactUs_2 .conTel span.priTel {
	display:block;
	font-size:182%;
	background:url(../images/icon_tel.gif) left 50% no-repeat;
	background-size:18px;
	font-weight:bold;
	color:#333;
	padding-left:25px;
}
#contactUs .conTel a, #contactUs_2 .conTel a { text-decoration:none; }

@media all and (orientation: landscape) {
	#contactUs, #contactUs_2 {
		margin:-45px auto 0;
		width:80%;
	}
	#contactUs h1, #contactUs_2 h1 { margin-bottom:1.3889%; }
	#contactUs a.conForm, #contactUs_2 a.conForm { padding:1.9444%; }
}

/* ============================================================

	access.html

   ============================================================ */
#contentsBox .accBox a.linkBtn[target="_blank"] {
	padding-right:0;
	background-image:none;
	margin-right:0;
}

/* ============================================================

	privacy.html

   ============================================================ */
.privacy {
	padding:2.5% 3.125% 0;
	font-size:85%;
	line-height:1.6;
}
article.privacy:nth-child(4) { padding:0 3.125% 0; }
article.privacy:nth-child(4) > ol:nth-child(3) { margin-top:3.125%; }
.privacy h2 {
	font-size:123.1%;
	margin-bottom:1.3889%;
}
.privacy .mark {
	margin:5% 5% 2.5%;
	clear:both;
	overflow:hidden;
}
.privacy .mark li:first-child {
	width:14%;
	float:left;
}
.privacy .mark li:last-child {
	width:80%;
	float:right;
}
.privacy a {
	color:#5C668B;
	text-decoration:none;
}
.privacy ol li {
	list-style:decimal inside;
	padding-left:1.2em;
	text-indent:-1.2em;
	margin-bottom:2.5%;
}
.privacy ol li:last-child { margin-bottom:5.5556%; }
.privacy ol li ol { margin-top:2.5%; }
.privacy ol li h3 { display:inline; }
.privacy ol li /*ol li */p {
	text-indent:0;
	margin:2.5% 0;
}
.privacy ol li ol li:last-child { margin-bottom:0; }
.privacy .signature {
	text-align:right;
	margin-bottom:8.3333%;
}
.privacy:nth-child(4) ol li p { text-indent:0; }
.privacyInBox {
	margin-top:3.125%;
}
.privacyInBox h4 {
	margin-bottom:2.5%;
	text-indent:0;
}
.privacyInBox > ul:nth-child(2) > li:last-child { margin-bottom:2.5%; }
.privacyInBox > ul > li {
	padding-left:0;
	list-style:disc inside;
	margin-left:1.2em;
}
.privacy ol li p span { display:block; }
.priContact {
	border:#727BA1 1px solid;
	font-size:85%;
	margin:0 3.125%;
	padding:2.7778%;
	text-align:center;
}
.priContact > p span, .priNum > p + p span { display:block; }
.priContact h2 {
	background-color:#E4E4E4;
	font-size:116%;
	line-height:2;
	margin:3.125% 0;
}
.priNum > p {margin-bottom:3.125%; }
.priNum .priTel, .priNum .priFax {
	color:#727BA1;
	font-weight:bold;
}
.priNum a { text-decoration:none; }
.priContact .conForm {
	display:table;
	width:100%;
}
.priContact .conForm a {
	background-color:#727BA1;
	padding:4.1667%;
	font-size:131%;
	margin-bottom:2.7778%;
	color:#FFF;
	text-decoration:none;
	font-weight:bold;
	display:table-cell;
	text-align:center;
	vertical-align:middle;
}
.priContact .conForm a span {
	display:inline-block;
	background:url(../images/arrow_contact.png) right 50% no-repeat;
	padding-right:20px;
}
.priContact .conForm a:hover { opacity:0.8; }
.disclosure { margin:3.125% 0 0 0; }
.disclosure h3 { padding-left:1.2em; }
#contentsBox .disclosure table {
	margin: 4.5% 0 0;
	font-size:100%;
	width:100%;
	text-indent:0;
}
#contentsBox .disclosure > table:nth-child(3) { margin:7% 0 0; }
#contentsBox .privacy table a { color: #5C668B; }
#contentsBox .privacy table td span { display:inline; }
@media all and (orientation: landscape) {
	.privacy .mark {
		/*padding-left:13%;
		background-size:50px;
		min-height:50px;*/
		margin:2.5% 8.3333% 1.25%;
	}
	.privacy .signature { margin-bottom:4.1667%; }
	.priContact { margin:0 8.3333%; }
	.priContact > p span, .priNum > p + p span { display:inline; }
	.priContact .conForm a { padding: 1.9444%; }
}

/* ============================================================

	recruit.html

   ============================================================ */
.recruitBox { margin-top:2.5%; }
.recruitBox h2 {
	padding:0 3.125%;
	line-height:1.8;
}
.recruitBox h2 span {
	background-color:#727BA1;
	color:#FFF;
	font-weight:bold;
	padding:1%;
	font-size:77%;
	margin-left:2.5%;
	vertical-align:text-top;
}
.recruitBox h2 span.close { background-color:#999; }
.recruitBox h2 span.red { background-color:#f00; }
#contentsBox .recruitBox table a.linkBtn { margin-top:0; }
#contentsBox .recruitBox table { margin:2.5% 3.125% 8.3333%; }
.recSupp {
	margin-top:4.2194%;
	text-indent:-1em;
	padding-left:1em;
}
.recruitBox li {
	text-indent:-2em;
	padding-left:2em;
}

/* ============================================================

	contact.html

   ============================================================ */
.contactBox { margin:2.5% 3.125% 0; }
#contentsBox .contactBox .read {
	padding:0;
	margin-bottom:3.8660%;
}
.contactBox input[type="text"], select, textarea {
	outline:0;
	font-family: "qMmpS Pro W3","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",verdana,"CI",Meiryo,Osaka,"lr oSVbN","MS PGothic",sans-serif;
}
.contactBox input[type="text"]:focus, .contactBox select:focus, .contactBox textarea:focus { border:1px solid #727BA1; }
.contactBox #contactUs, .confirmBox #contactUs, .contactBox #contactUs_2, .confirmBox #contactUs_2 {
	margin:0;
	padding-top:0;
	width:100%;
}
.confirmBox #contactUs, .confirmBox #contactUs_2 { font-size:116%; }
.contactBox h2 {
	margin:5.5556% 0 2.7778%;
	line-height:1.8;
}
.category {
	background-color:#EFF2F5;
	padding:3.125%;
	font-size:93%;
}
.category h3 {
	font-size:108%;
	margin-bottom:2.7778%;
}
.category ul li { line-height:2; }
.contactBox .category ul li input[type="radio"] {
	vertical-align:middle;
	margin:0 2% 0 0;
}
#contentsBox .contactBox table {
	margin: 4.5% 0 0;
	width:100%;
}
.contactBox table input[type="text"] {
	width:100%;
	border:1px solid #CCC;
	padding:3%;
	font-size:100%;
}
.contactBox table th span {
	font-weight:bold;
	color:#C00;
	margin-left:2.5%;
}
.contactBox table td input#contact_postalcode {
	width:65%;
	margin:0 0 0 2.5%;
}
.contactBox table td p {
	vertical-align:middle;
	margin:0 0 5% 0;
}
.contactBox table td select#contact_state {
	width:50%;
	font-size:100%;
	margin:0 0 0 2.5%;
	vertical-align: bottom;
}
.contactBox table td textarea {
	border:1px solid #CCC;
	width:100%;
	height:100px;
	padding:3%;
	font-size:100%;
	resize:none;
}
#contentsBox .contactBox table td label.error {
	color:#C00;
	display:block;
	margin-top:1.5%;
}
#contentsBox .contactBox table td input.error,
#contentsBox .contactBox table td select.error,
#contentsBox .contactBox table td textarea.error { background:#FFC; }
.codeTxt {
	margin-top:1.5%;
	color:#666;
}
#contentsBox .contactBox table a.consentDtl {
	text-decoration:none;
	color:#727BA1;
}
.consentDtl { margin:0 0 0 6%; }
.consent li {
	display:inline-block;
	width:35%;
}
.consent li input[type="radio"] {
	margin:0 5% 0 0;
	vertical-align:middle;
}
.consent li:first-child { margin-right:2.7778%; }
.send {
	margin-top:5.5556%;
	text-align:center;
}
.send button {
	border:none;
	cursor:pointer;
	background:#727BA1;
	height:44px;
	line-height:44px;
	display:block;
	width:80%;
	color:#FFF;
	font-size:116%;
	margin: 0 auto;
	font-weight:bold;
	font-family: "qMmpS Pro W3","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",verdana,"CI",Meiryo,Osaka,"lr oSVbN","MS PGothic",sans-serif;
}
.send button:hover { opacity:0.8; }
.send button.disable {
	background:#CCC;
	cursor:default;
}
.send button.disable:hover { opacity:1 !important; }

@media all and (orientation: landscape) {
	.contactBox #contactUs, .confirmBox #contactUs, .contactBox #contactUs_2, .confirmBox #contactUs_2 {
		width:70%;
		margin:0 auto;
	}
	#contentsBox .contactBox table th { width:31%; }
	#contentsBox .contactBox table th span {
		display:block;
		margin:0 0 2% 0;
	}
	.consentDtl { margin:0; }
	#contentsBox .contactBox a[target="_blank"] { padding-right:10%; }
}

/* ============================================================

	contact.php

   ============================================================ */
.confirmBox {
	padding: 2.5% 3.125% 0px;
	font-size: 85%;
	line-height: 1.6;
}
.confirmBox h2 {
	font-size:116%;
	margin-bottom:2.5%;
}
.confirmBox h3 {
	margin-bottom:2.5%;
	color:#C00;
}
.confirmBox h3.complete { color:#333; }
.confirmBox h4 {
	margin-bottom:2.5%;
	font-weight:normal;
}
.confirmBox #formbox { margin-bottom:5.5556%; }
.confirmBox #formbox li {
	background:#F2F2F2;
	margin-bottom:2.5%;
	padding:1%;
}
.confirmBox #formbox li:last-chld { margin-bottom:0; }
.confirmBox .back, .buttonbox a, .buttonbox button {
	border:none;
	cursor:pointer;
	background:#999;
	height:44px;
	line-height:44px;
	display:block;
	width:80%;
	color:#FFF;
	font-size:131%;
	margin: 0 auto;
	font-weight:bold;
	font-family: "qMmpS Pro W3","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",verdana,"CI",Meiryo,Osaka,"lr oSVbN","MS PGothic",sans-serif;
	text-decoration:none;
	text-align:center;
}
.confirmBox .back:hover, .buttonbox a:hover, .buttonbox button:hover { opacity:0.8; }
.confirmBox #formbox li.clearfix {
	background:none;
	padding:0;
	margin-bottom:4%;
}
label.leftlabel {
	margin-bottom:2.5%;
	background:#F2F2F2;
	display:block;
	padding:1%;
}
#formbox .fl {
	font-weight:bold;
	padding:0 0 0 1%;
}
.buttonbox { padding: 0 3.125%; }
.buttonbox a {
	width:45%;
	float:left;
}
.buttonbox button {
	width:50%;
	float:right;
	background:#727BA1;
}

/* ============================================================

	Avoid Virus

   ============================================================ */

#avoidVirus { margin-bottom: 60px; padding: 24px 16px; background-color: rgba(255,134,136,0.08); border: 1px inset rgba(255,134,136,0.2); text-align: center; }
#avoidVirus h3 { font-size: 1.125rem; font-weight: bold; margin-bottom: 20px; color: rgba(200,50,53,1.00); line-height: 1.75rem; }
#avoidVirus dt { margin-bottom: 10px; font-size: 1rem; font-weight: bold; }
#avoidVirus dd { margin-bottom: 20px; font-size: .875rem; line-height: 1.75rem; }
#avoidVirus dd:last-child { margin-bottom: 0; }
#avoidVirus dd > span { border-bottom: 1px dotted #333; padding-bottom: 3px; }
@media (max-width: 767px) {
    #avoidVirus { margin: 0 15px 50px; }
}

/* ============================================================

	404.html

   ============================================================ */
.link404 {
	background-color:#727BA1;
	padding:4.1667%;
	font-size:108%;
	margin:3.125% 3.125% 0;
	color:#FFF;
	text-decoration:none;
	font-weight:bold;
	display:block;
	text-align:center;
}
.link404:hover { opacity:0.8; }
.link404 span {
	background:url(../images/arrow_contact.png) right 50% no-repeat;
	padding-right:20px;
}
@media all and (orientation: landscape) {
	.link404 {
		padding:2%;
		margin:3.125% 15% 0;
	}
}

table.innerTBL {
    margin-top: 0 !important;
}
#contentsBox table.innerTBL th {
    width: auto !important;
    background: none;
}
#contentsBox table.innerTBL { border-top: none; }
#contentsBox table.innerTBL th { background-color: #f8f8f8; }
#contentsBox table td.p0xs { padding: 0; }
#contentsBox table.innerTBL tr:last-child th, #contentsBox table.innerTBL tr:last-child td { border-bottom: none; }

/* Actors */
.header h3 { font-size: 1rem; margin-bottom: 15px; }
.header ul { margin-bottom: 20px; }
.header ul li { margin-bottom: 15px; color: rgba(23,38,90,1.00); background-color: #fff; }
.header ul li span { background: linear-gradient(transparent 85%, rgba(83,168,240,.5) 85%); display: inline; font-size: 1rem; padding-bottom: 10px; line-height: 2rem; }
.slideBox { margin-bottom: 50px; }
.slideBox a.modal { display: block; color: #fff; font-weight: bold; text-align: center; background-color: rgba(36,106,177,1.00); border-radius: 5px; line-height: 2.5rem; margin: 30px 20px 0; }
.prof { height: 100%; display: flex; align-items: center; margin: 0; padding: 30px; }
.pref table { border-collapse: collapse; border-spacing: 0 !important; }
.prof th, .prof td { font-size: .8rem; text-align: left; padding: 4px 10px; border-bottom: 1px solid #ddd; }
.prof .subTBL th, .prof .subTBL td { border-width: 0; padding: 0; }
.prof th { white-space: nowrap; vertical-align: top; }
.prof h1 { font-size: 1rem; background-color: #d8efff; padding: 4px 10px; }
.slideBox h1 { text-align: center; border-bottom: 2px solid #ddd; line-height: 2.4rem; font-size: 1.125rem; margin-bottom: 20px; }
.prof > div, .prof > div > table { width: 100%; }
.mb10 { margin-bottom: 10px !important; }
.flex-viewport { border: 1px solid #fff; }

.actor h2 { display: flex; justify-content: space-between; }
.actor h2 .small { font-size: .85rem; font-weight: normal; }

.actorList ul { display: flex; margin-left: -28px; flex-wrap: wrap; }
.actorList ul li { margin-left: 28px; text-align: center; margin-bottom: 25px; }
.actorList ul li a { text-decoration: none; }
.actorList ul li a p { margin-top: 10px; font-weight: bold; }
.actorList ul li a img { width: 130px; border-radius: 65px; }


@media (min-width: 768px) and ( max-width: 979px) { .actorList ul li a img { width: calc( ( 728px - 5.4946vw - 112px ) / 5 ); } }
@media (max-width: 767px) { .actorList ul li a img { width: calc( ( 100vw - 6.25vw - 112px ) / 5 ); } .actorSect { margin-top: -60px; padding-top: 60px; } }
@media (max-width: 600px) { .actorList ul li a img { width: calc( ( 100vw - 6.25vw - 84px ) / 4 ); } }
@media (max-width: 374px) { .actorList ul li { margin-left: 24px; margin-bottom: 16px; } .actorList ul li a img { width: calc( ( 100vw - 6.25vw - 48px ) / 3 ); } }
@media (max-width: 766px) { .prof { padding: 10px; } .prof th, .prof td { display: block; padding: 4px 0; } .prof .subTBL td { margin-bottom: 5px; } }

/* New */

.attenBox { background-color: rgba(255,250,220,1.00); padding: 15px; font-weight: bold; position: relative; color: rgba(85,20,13,1.00); font-size: .85rem; }
.attenBox::before, .attenBox::after { content: '*'; font-family: 'Arial Black', Gadget, 'sans-serif'; width: 40px; height: 40px; position: absolute; top: -45px; left: -5px; font-weight: bold; font-size: 4rem; color: rgba(224,71,0,1.00); opacity: .75; }
.attenBox::after { top: 0; left: -10px; font-weight: normal; font-size: 2rem; }
@media (min-width: 980px) { .attenBox { font-size: 1rem; } }

.read .eventList ul li a div {
    position: relative;
}
.read .eventList h2.new::after {
    content: 'NEW!';
    background-color: rgba(227,0,53,1);
    color: #fff;
    font-size: .5rem;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    width: 40px;
    line-height: 1.25rem;
    position: absolute;
    top: -4px;
    right: -30px;
    animation: new .25s infinite;
    text-align: center;
}
.read .eventList ul li a div span.new {
    display: inline-block;
    background-color: rgba(227,0,53,1);
    color: #fff;
    font-size: .5rem;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    width: 40px;
    line-height: 1rem;
    text-align: center;
    margin-left: 8px;
    padding: 2px 0 1px;
}

#contentsBox table td img.map { margin: 0; }
.rightBox { text-align: right; }