@charset "UTF-8";

/* *****************************************************************************************************
*
*  top.css
* 
* -------------------------------------------------------------------------------------
* 
*   ---- FONT-SIZE -----
*	
*	 9px	69%			|		18px	138.5%
*	10px	77%			|		19px	146.5%
*	11px	85%			|		20px	153.9%
*	12px	93%			|		21px	161.6%
*	13px	100%		|		22px	167%
*	14px	108%		|		23px	174%
*	15px	116%		|		24px	182%
*	16px	123.1%		|		25px	189%
*	17px	131%		|		26px	197%
*
*
***************************************************************************************************** */

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

	header

   ============================================================ */
@media ( min-width : 768px ) {
	header h1 a {
		/* background:url(../images/logo.png) 0 0 no-repeat; */
	}
	#sidr-right ul li a { color:#FFF; }
	#sidr-right ul li a:hover {
		color:#FFF;
		opacity:0.8;
	}
	#sidr-right .subNav ul li a { color:#333; }
	#sidr-right .subNav ul li a:hover { color:#FFF; }
	#sidr-right ul li.subNav {
		background:url(../images/arrow_nav_wh.png) 85% 0.8em no-repeat;
	}
	#sidr-right .subNav ul li {
		background-color:#FFF;
		border-bottom:none;
		margin-bottom:1px;
		line-height:3;
	}
	#sidr-right ul li.subNav:hover {
		background-image:url(../images/arrow_nav_wh_hv.png);
	}
	#sidr-right ul li a:hover, #sidr-right .subNav ul li a:hover { filter: alpha(opacity=80); } /* ie8 */
}
@media ( min-width : 980px ) {
	#sidr-right ul li.subNav {
		background:url(../images/arrow_nav_wh.png) 77% 0.8em no-repeat;
	}
}

/* ============================================================
	
	#mvArea
	
   ============================================================ */
@media ( min-width : 768px ) {
	#mvArea {
		display:block;
		position:relative;
		z-index:0;
		width:100%;
		margin-top:0;
	}
	#mvArea a, #mvArea .slides li img { display:block; }
	#mvArea .mvTxt {
		display:block;
		position:absolute;
		top:40%;
		left:50%;
		z-index:999;
		width:460px;
		margin-left:-230px;
		color:#FFF;
		text-align:center;
	}
	#mvArea .mvTxt p {
		font-weight:bold;
		margin-bottom:4%;
		font-size:108%;
	}
	#mvArea .mvTxt h2 a {
		border:3px #FFF solid;
		line-height:50px;
		padding:0;
		text-decoration:none;
		color:#FFF;
		font-size:197%;
		text-decoration:none;
		width:auto;
	}
	#mvArea .mvTxt h2 a:hover { background-color:rgba(255,255,255,0.2); }
	.flexslider {
		border: 0;
		@include box-shadow(black 0 0 0);
	}
	.flex-direction-nav, .flexslider-controls { display:none !important; }
	
	/* manualControls */
	.flexslider-controls {
		max-width: 100%;
		position:relative;
		z-index:9999;
		display:block !important;
	}
	.flex-control-nav {
		bottom:30px;
		left:50%;
		width:900px;
		margin-left:-450px;
        display: flex;
        justify-content: space-between;
	}
	.flex-control-nav li {
		background-color:rgba(255,255,255,0.32);
		width:116px;
		font-size:85%;
		cursor:pointer;
        margin: 0;
        padding: 1px 0 0;
        line-height: 22px;
    }
    .dispMd { display: none; }
    .flex-control-nav li a { /* text-shadow: 0 0 3px rgba(0,0,0,.5); */ line-height: 16px; display: block; width: 100%; }
    @media (min-width:768px) and (max-width:980px) {
        .flex-control-nav { width:728px; margin-left:-364px; }
        .flex-control-nav li { width: 94px; }
        .flex-control-nav li:nth-child(1), .flex-control-nav li:nth-child(3), .flex-control-nav li:nth-child(6), .flex-control-nav li:nth-child(7) { padding-top: 12px; }
        .dispMd { display: block; }
    }
    /* Old Style
	.flexslider-controls {
		max-width: 100%;
		position:relative;
		z-index:9999;
		display:block !important;
	}
	.flex-control-nav {
		bottom:30px;
		left:50%;
		width:590px;
		margin-left:-295px;
	}
	.flex-control-nav li {
		background-color:rgba(255,255,255,0.2);
		width:23.7288%;
		line-height:24px;
		font-size:85%;
		cursor:pointer;
		float:left;
		margin:0 10px 0 0;
	}
    */
	.flex-control-nav li:last-child { margin-right:0; }
	.flex-control-nav .flex-active {
		border:1px solid #FFF;
		background:none;
		line-height:22px;
	}
	#mvArea .flex-control-nav li a {
		display:inline;
		background:none;
		text-indent:inherit;
		border-radius:0;
		box-shadow:none;
		color:#FFF;
		text-decoration:none;
        font-weight: bold;
	}
	#mvArea .flex-control-nav li:hover { background-color:#FFF;	}
	#mvArea .flex-control-nav li:hover a { color:#333; }
}

#eventTab > div a > p { font-weight: bold; font-size: .5rem; white-space: nowrap; }

@media ( min-width : 980px ) {
	#mvArea .mvTxt {
		width:550px;
		margin-left:-275px;
	}
	#mvArea .mvTxt p {
		font-size:138.5%;
		margin-bottom:5.4545%;
	}
	#mvArea .mvTxt h2 a {
		line-height:54px;
		font-size:225% /* 30px */;
	}
}

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

	#topMain

   ============================================================ */
@media ( min-width : 768px ) {
	#topMain {
		padding:0 2.1739% /* 0 20px */;
		margin:4.1666% 0 6.25%;
	}
	#topMain h2 { margin-bottom:2.1739%; }
	#topMain h2 img { width:60%; }
	#topMain h2 + p { font-size:123.1%; }
	#topMain h2 + p span, .eMessage span { display:block; }
	.eMessage {
		/*width:47em;*/
		margin-top:20px;
		font-size:93%;
	}
}
@media ( min-width : 980px ) {
	#topMain h2 + p { font-size:153.9%; }
	.eMessage { font-size:123.1%; }
}

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

	#topEvent

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

.new > .mosaic-backdrop::after {
    content: "NEW";
    background: rgba(227,0,80,.92);
    color: white;
    position: absolute;
    right: 0;
    top: 0;
    padding: 3px 7px;
    font-weight: bold;
    font-size: .75rem;
    font-family: 'Arial', sans-serif;
}

@media ( min-width : 768px ) {
	#topEvent {
		padding:0 2.17391%;
		margin-bottom:4.3478%;
		background:none;
	}
	#topEvent h2 {
		font-size:153.9%;
		margin:1.5% 0 2.5%;
	}
	#topEvent > div.row { margin-bottom:2.5%; }
	/*.refine {
		display:inline-block;
		margin-right:12px;
		color:#999;
		font-size:85%;
		font-weight:bold;
	}*/
	#topEvent h2.col.span_2 { width:23%; }
	#topEvent div.col.span_10 { width:77%; }
	.eventTabBox {
		display:flex;
        justify-content: flex-end;
	}
	.eventTabBox li.evenTabIn {
		display:table-cell;
		vertical-align:middle;
	}
	#eventTab { margin-bottom:0; }
	#eventTab li {
		width: calc( ( 100% - 30px ) / 4 );
		margin-right:10px;
		cursor:pointer;
		min-height:40px;
		font-size:85%;
		line-height:1;
	}
	#eventTab li:last-child {
	}
	#loadarea li.col.span_4 {
		margin:0 2.3% 4.05% 0;
		width:30.4348%;
		height:144px;
	}
	#loadarea ul.row {
		margin-right:-4.2%;
		overflow:hidden;
	}
	.spEventImg { display:none; }
	.pcEventImg { display:block; }
	.mosaic-block { height:100%; }
	.mosaic-overlay {
		bottom:-110px;
		height:144px;
	}
	.mosaic-overlay h3 {
		padding:10px 0;
		font-size:95%;
	}
	#pc .col.span_4:hover .mosaic-overlay h3 { padding:10px 0 5px; }
	.mosaic-overlay p { padding:0 7.1429%; }
	.mosaic-overlay p span { display:none; }
	.loadmore, .pageTransition, .eventLink { font-size:182%; }
	.loadmore a, .pageTransition a, .eventLink a { width:65%; }
	.pageTransition a {
		background-size:auto;
		background-position:86% 50%;
		padding-left:8.5%;
	}
}
@media ( min-width : 980px ) {
	#topEvent h2 {
		font-size:182%;
		margin:0 0 2.17391% 0;
	}
	#eventTab li {
		width:132px;
		padding:7px 0;
		min-height:inherit;
	}
	#eventTab li span, #eventTab div span { display:inline; }
	.mosaic-overlay {
		bottom:-150px;
		height:190px;
	}
	.mosaic-overlay h3 {
		padding:13px 0;
		font-size:100%;
	}
	#pc .col.span_4:hover .mosaic-overlay h3 { padding:25px 0 15px; }
	.mosaic-overlay p { font-size:85%; }
	#loadarea li.col.span_4 {
		margin:0 4.05% 4.05% 0;
		width:280px;
		height:190px;
	}
	#loadarea ul.row {
		margin-right:-4.168%;
		overflow:hidden;
	}
	.loadmore a, .pageTransition a,.eventLink a { width:50%; }
	.pageTransition a {
		background-position:84% 50%;
		padding-left:7.5%;
	}
}

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

	#topInfo

   ============================================================ */
@media ( min-width : 768px ) {
	#topInfo {
		padding:3.5% 0 0;
		margin-bottom:4.3%;
		font-size:93%;
	}
	#topInfoIn {
		max-width:698px;
		margin: 0 auto;
	}
	#topInfo h2 {
		font-size:153.9%;		
		margin-bottom:2.3913%;
	}
	#topInfo dl { padding:1.0869% 0; }
	#topInfo .span_9 { margin-bottom:0; }
	#topInfo .span_9 a, #topInfo .span_9 a:hover { background:none; }
	#topInfo dl dt { padding:0; }
	#topInfo dl dd {
		padding:0;
		background:none;
	}
	#topInfo .pvMark img {
		width:42.6829%;
		margin:0 auto 9.4339%;
	}
	#topInfo .pvMark { font-size:93%; }
}
@media ( min-width : 980px ) {
	#topInfo { font-size:100%; }
	#topInfoIn { max-width:920px; }
	#topInfo h2 { font-size:182%; }
	#topInfo .pvMark { font-size:108%; }
	#topInfo .pvMark img { width:70px; }
}   

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

	#topEco

   ============================================================ */
@media ( min-width : 768px ) {
	#topEco {
		width:100%;
		padding:3% 0 3.9062%;
		background:url(../images/pc_eco_bg.jpg) 0 0 no-repeat;
		background-size:cover;
	}
	#topEcoIn {
		max-width:698px;
		margin: 0 auto;
	}
	#topEco h2 {
		font-size:123.1%;
		margin-bottom:3.4782%;
	}
	#topEco div.col.span_8 {
		margin-bottom:0;
		min-height:280px;
	}
	#topEco div.col.span_8 p {
		font-size:93%;
		margin-bottom:3.4782%;
		line-height:1.7;
	}
	#topEco div.col.span_8 ol {
		font-size:93%;
		padding-left:4%;
		line-height:2;
	}
	#topEco div.col.span_4 {
		position:relative;
		min-height:280px;
	}
	#topEco .signature {
		position:absolute;
		right:0;
		bottom:0;
		font-size:85%;
	}
	.ecoImg {
		margin:0;
		width:100%;
	}
	.ecoImg ul li { margin-left:auto; }
	.ecoImg ul li:first-child {
		width:73.5426%;
		float:none;
		margin:0 0 6.8027% auto;
	}
	.ecoImg ul li:last-child {
		width:98.6547%;
		float:none;
	}
}
@media ( min-width : 980px ) {
	#topEcoIn { max-width:920px; }
	#topEco h2 { font-size:138.5%; }
	#topEco div.col.span_8 p { font-size:100%; }
	#topEco div.col.span_8 ol { font-size:108%; }
	#topEco div.col.span_8, #topEco div.col.span_4 { min-height:290px; }
	#topEco .signature { font-size:100%; }
	.ecoImg ul li:first-child {	width:164px; }
	.ecoImg ul li:last-child { width:220px; }
}

/* ============================================================
	
	#pagetop
	
   ============================================================ */
@media ( min-width : 980px ) {
	#pagetop {
		display:block;
		margin: 3.2% auto 0;
	}
}

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

	footer

   ============================================================ */
@media ( min-width : 768px ) {
	footer { background:none; }
}

#topEvent > div.row { display: flex; justify-content: space-between; flex-wrap: wrap; }
#eventTab a, #topEvent > div.row > h2 { display: block; }
@media (min-width: 768px)
    #topEvent div.col.span_10 { display: flex; justify-content: space-between; }
}
@media ( max-width : 767px ) {
    #topEvent > div.row > h2 { width: 100%; }
    #eventTab li, #eventTab a { width: calc( ( 100vw - 6.25% - 40px ) / 4 ); }
}