@charset "UTF-8";

/* -----------------------------------------------------------

	Colorbox
	
----------------------------------------------------------- */
.mod-freeHTML#colorbox,
.mod-freeHTML#cboxOverlay,
.mod-freeHTML #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
.mod-freeHTML #cboxWrapper{ top:50px; }
.mod-freeHTML #cboxWrapper {max-width:none;}
.mod-freeHTML#cboxOverlay{position:fixed; width:100%; height:100%;left:0;top:0;}
.mod-freeHTML #cboxMiddleLeft,
.mod-freeHTML #cboxBottomLeft{clear:left;}
.mod-freeHTML #cboxContent{position:relative;}
.mod-freeHTML #cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
.mod-freeHTML #cboxTitle{margin:0;}
.mod-freeHTML #cboxLoadingOverlay,
.mod-freeHTML #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
.mod-freeHTML #cboxPrevious,
.mod-freeHTML #cboxNext,
.mod-freeHTML #cboxClose,
.mod-freeHTML #cboxSlideshow{cursor:pointer;}
.mod-freeHTML .cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.mod-freeHTML .cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
.mod-freeHTML#colorbox,
.mod-freeHTML #cboxContent,
.mod-freeHTML #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
.mod-freeHTML#cboxOverlay{background:#000; opacity: 0.9; filter: alpha(opacity = 90);}
.mod-freeHTML#colorbox{outline:0;}
.mod-freeHTML #cboxContent{margin-top:0;background:#000;}
.mod-freeHTML .cboxIframe{background:#fff;}
.mod-freeHTML #cboxError{padding:50px; border:1px solid #ccc;}
.mod-freeHTML #cboxLoadedContent{border:5px solid #000; background:#fff;}
.mod-freeHTML #cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;}
.mod-freeHTML #cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;}
.mod-freeHTML #cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}
.mod-freeHTML #cboxPrevious,
.mod-freeHTML #cboxNext,
.mod-freeHTML #cboxSlideshow,
.mod-freeHTML #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
.mod-freeHTML #cboxPrevious:active,
.mod-freeHTML #cboxNext:active,
.mod-freeHTML #cboxSlideshow:active,
.mod-freeHTML #cboxClose:active {outline:0;}
.mod-freeHTML #cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
.mod-freeHTML #cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px;  width:28px; height:65px; text-indent:-9999px;}
.mod-freeHTML #cboxPrevious:hover{background-position:bottom left;}
.mod-freeHTML #cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; width:28px; height:65px; text-indent:-9999px;}
.mod-freeHTML #cboxNext:hover{background-position:bottom right;}
.mod-freeHTML #cboxClose{position:absolute; top:5px; right:5px; display:block; width:38px; height:19px; text-indent:-9999px;}

.mod-freeHTML #cboxClose{display: block;position: absolute;padding: 0;width: 30px;height: 30px;top:-50px;bottom: auto;right: 0px;cursor: pointer;z-index:999;}
.mod-freeHTML #cboxClose::before {display: block;content: "";position: absolute;top: 50%;right: 0;width: 30px;height: 2px;background: #FFFFFF;transform: rotate(225deg);z-index:1000;}
.mod-freeHTML #cboxClose::after {display: block;content: "";position: absolute;top: 0;right: 50%;width: 2px;height: 30px;background: #FFFFFF;transform: rotate(45deg);z-index:1000;}
.mod-freeHTML#colorbox{padding:50px 0;top: 50% !important;transform: translateY(-50%) !important;}
.mod-freeHTML #cboxWrapper {overflow:visible !important;}
.mod-freeHTML #cboxClose:hover{background-position:bottom center;}


/* -----------------------------------------------------------

	共通スタイル
	
----------------------------------------------------------- */
.mod-freeHTML .all-wrapper{
	opacity: 1;
	transition: opacity .5s;
	position: relative;
	z-index: 1;
	overflow:hidden;
	background: url(../img/pc/all_bg01.png) top left no-repeat;
	background-size:cover;
	background-attachment: fixed;
}
/*
.mod-freeHTML::before{
	content:"";
	display:block;
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	width:100%;
	height:100vh;
}
*/

.mod-freeHTML.js-page_loaded{
	opacity: 1;
}
/* -----------------------------------------------------------

	共通スタイル
	
----------------------------------------------------------- */
.mod-freeHTML h1,
.mod-freeHTML h2,
.mod-freeHTML h3{ margin:0;font-size:100%; }
.mod-freeHTML ul{ margin:0; padding:0; list-style:none; }
.mod-freeHTML #fixedArea img{ display:block; vertical-align:bottom; }
.mod-freeHTML p{ margin:0; }
.mod-freeHTML img{ height: auto; max-width: 100%; width: 100%; }
.mod-freeHTML img[src$=".svg"] { width: 100%; }
.mod-freeHTML sup{ font-size: 0.714em; }
.mod-freeHTML .iBlock{ display: inline-block; *display: inline; *zoom:1;}
.mod-freeHTML *,.mod-freeHTML *::after,.mod-freeHTML *::before{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
.mod-freeHTML .inner{ position: relative; }
@media screen and (min-width: 641px) {
	.mod-freeHTML .u-sp{ display: none; }
	.mod-freeHTML .inner{ max-width: 1000px; margin: 0 auto; }
}
@media screen and (max-width: 640px) {
	.mod-freeHTML{ font-size: 14px; }
	.mod-freeHTML .u-pc{ display: none; }
	.mod-freeHTML .inner{ width: 85%; margin: 0 auto; }
}
/* -----------------------------------------------------------

	共通スタイル　-　タイトル
	
----------------------------------------------------------- */
.mod-freeHTML .common-tit-box{
	font-size: 	1.500em;
	font-weight: bold;
	line-height: 140%;
	text-align: center;
	padding-bottom: 10px;
	border-bottom: 3px solid #000000;
	position: relative;
	display: table;
	margin: 0 auto 100px;
}
.mod-freeHTML .common-tit-box::after{
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: #000000;
	margin-bottom: 6px;
}
@media screen and (max-width: 640px) {
	.mod-freeHTML .common-tit-box{
		font-size: 	1em;
		border-bottom: 2px solid #000000;
		margin: 0 auto 60px;
	}
	.mod-freeHTML .common-tit-box::after{
		height: 2px;
		background: #000000;
		margin-bottom: 4px;
	}
}


/* -----------------------------------------------------------

	.start-area
	
----------------------------------------------------------- */
.mod-freeHTML .start-area{
	display: none;
}
/* -----------------------------------------------------------

	.slide-area
	
----------------------------------------------------------- */
.mod-freeHTML .slide-area .inner{
	max-width: none;
	position: relative;
}
.mod-freeHTML .slide-area.animate{
	opacity: 1;
}
.mod-freeHTML .slide-area ul{
		display: -ms-grid;
		display: grid;
		grid-gap: 0;
		grid-template-column: auto;
		-ms-grid-rows: auto;
		grid-template-rows: auto;
		width: 100vw;
}
.mod-freeHTML .slide-area ul li{
	display: block;
	position: relative;
	overflow: hidden;
}
@media screen and (min-width: 641px) {
	.mod-freeHTML .slide-area ul{
		-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	}
	.mod-freeHTML .slide-area ul li:nth-child(1){ -ms-grid-row: 1; -ms-grid-row-span: 2; grid-row: 1 / 3; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1 / 3; }
	.mod-freeHTML .slide-area ul li:nth-child(2){ -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1 / 2; -ms-grid-column: 3; -ms-grid-column-span: 1; grid-column: 3 / 4; }
	.mod-freeHTML .slide-area ul li:nth-child(3){ -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1 / 2; -ms-grid-column: 4; -ms-grid-column-span: 2; grid-column: 4 / 6; }
	.mod-freeHTML .slide-area ul li:nth-child(4){ -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1 / 2; -ms-grid-column: 6; -ms-grid-column-span: 1; grid-column: 6 / 7; }

	.mod-freeHTML .slide-area ul li:nth-child(5){ -ms-grid-row: 2; -ms-grid-row-span: 1; grid-row: 2 / 3; -ms-grid-column: 3; -ms-grid-column-span: 1; grid-column: 3 / 4; }
	.mod-freeHTML .slide-area ul li:nth-child(6){ -ms-grid-row: 2; -ms-grid-row-span: 2; grid-row: 2 / 4; -ms-grid-column: 4; -ms-grid-column-span: 2; grid-column: 4 / 6; }
	.mod-freeHTML .slide-area ul li:nth-child(7){ -ms-grid-row: 2; -ms-grid-row-span: 2; grid-row: 2 / 4; -ms-grid-column: 6; -ms-grid-column-span: 1; grid-column: 6 / 7; }

	.mod-freeHTML .slide-area ul li:nth-child(8){ -ms-grid-row: 3; -ms-grid-row-span: 1; grid-row: 3 / 4; -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1 / 2; }
	.mod-freeHTML .slide-area ul li:nth-child(9){ -ms-grid-row: 3; -ms-grid-row-span: 1; grid-row: 3 / 4; -ms-grid-column: 2; -ms-grid-column-span: 2; grid-column: 2 / 4; }
}
@media screen and (max-width: 640px) {
	.mod-freeHTML .slide-area .inner{
		max-width: none;
		width: 100%;
	}
	.mod-freeHTML .slide-area ul{
		-ms-grid-columns: 1fr 1fr 1fr;
	}
	.mod-freeHTML .slide-area ul li:nth-child(1){ -ms-grid-row: 1; -ms-grid-row-span: 2; grid-row: 1 / 3; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1 / 3; }
	.mod-freeHTML .slide-area ul li:nth-child(2){ -ms-grid-row: 1; -ms-grid-row-span: 1; grid-row: 1 / 2; -ms-grid-column: 3; -ms-grid-column-span: 1; grid-column: 3 / 4; }
	.mod-freeHTML .slide-area ul li:nth-child(3){ -ms-grid-row: 2; -ms-grid-row-span: 1; grid-row: 2 / 3; -ms-grid-column: 3; -ms-grid-column-span: 1; grid-column: 3 / 4; }
	.mod-freeHTML .slide-area ul li:nth-child(4){ -ms-grid-row: 3; -ms-grid-row-span: 2; grid-row: 3 / 5; -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1 / 2; }
	.mod-freeHTML .slide-area ul li:nth-child(5){ -ms-grid-row: 3; -ms-grid-row-span: 1; grid-row: 3 / 4; -ms-grid-column: 2; -ms-grid-column-span: 1; grid-column: 2 / 3; }
	.mod-freeHTML .slide-area ul li:nth-child(6){ -ms-grid-row: 3; -ms-grid-row-span: 1; grid-row: 3 / 4; -ms-grid-column: 3; -ms-grid-column-span: 1; grid-column: 3 / 4; }
	.mod-freeHTML .slide-area ul li:nth-child(7),
	.mod-freeHTML .slide-area ul li:nth-child(8){ display: none; }
	.mod-freeHTML .slide-area ul li:nth-child(9){ -ms-grid-row: 4; -ms-grid-row-span: 1; grid-row: 4 / 5; -ms-grid-column: 2; -ms-grid-column-span: 2; grid-column: 2 / 4; }
}


/* 	.slide-area　box01
========================================================================== */
.mod-freeHTML .slide-area.slideStart ul li:nth-child(1) .img-box01 { transition-delay:1.2s; }
.mod-freeHTML .slide-area.slideStart ul li:nth-child(2) .img-box01 { transition-delay:2.0s; }
.mod-freeHTML .slide-area.slideStart ul li:nth-child(3) .img-box01 { transition-delay:1.6s; }
.mod-freeHTML .slide-area.slideStart ul li:nth-child(4) .img-box01 { transition-delay:2.2s; }
.mod-freeHTML .slide-area.slideStart ul li:nth-child(5) .img-box01 { transition-delay:1.0s; }
.mod-freeHTML .slide-area.slideStart ul li:nth-child(6) .img-box01 { transition-delay:1.4s; }
.mod-freeHTML .slide-area.slideStart ul li:nth-child(7) .img-box01 { transition-delay:1.8s; }
.mod-freeHTML .slide-area.slideStart ul li:nth-child(8) .img-box01 { transition-delay:2.0s; }
.mod-freeHTML .slide-area.slideStart ul li:nth-child(9) .img-box01 { transition-delay:1.6s; }

.mod-freeHTML .slide-area ul li .img-box01 { opacity: 0; transition-duration:1.0s; transition-property:opacity; }
.mod-freeHTML .slide-area.slideStart ul li .img-box01 { opacity: 1; }



/* 	.slide-area　box02
========================================================================== */
.mod-freeHTML .slide-area ul li:nth-child(1) .img-box02 { transition-delay:0.2s; }
.mod-freeHTML .slide-area ul li:nth-child(2) .img-box02 { transition-delay:0.4s; }
.mod-freeHTML .slide-area ul li:nth-child(3) .img-box02 { transition-delay:0.6s; }
.mod-freeHTML .slide-area ul li:nth-child(4) .img-box02 { transition-delay:0.8s; }
.mod-freeHTML .slide-area ul li:nth-child(5) .img-box02 { transition-delay:0.4s; }
.mod-freeHTML .slide-area ul li:nth-child(6) .img-box02 { transition-delay:0.6s; }
.mod-freeHTML .slide-area ul li:nth-child(7) .img-box02 { transition-delay:0.8s; }
.mod-freeHTML .slide-area ul li:nth-child(8) .img-box02 { transition-delay:0.4s; }
.mod-freeHTML .slide-area ul li:nth-child(9) .img-box02 { transition-delay:0.6s; }

.mod-freeHTML .slide-area ul li .img-box02{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 101%;
	height: 101%;
	opacity: 0;
	
	transition-duration:2.0s;
	transition-property:opacity;
}
.mod-freeHTML .slide-area.animate.slideStart.js-slide ul li .img-box02{
	opacity: 1;
}

.mod-freeHTML .slide-area ul li img{
	object-fit:cover;
	object-position: 50% 100%;
	max-width:none;
	width: 100%;
	height: 100%;
	max-height: 100%;
}

/* -----------------------------------------------------------

	.copy-area
	
----------------------------------------------------------- */
.mod-freeHTML .copy-box{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-30%);
	z-index: 3;
	text-align: center;
	width: 100%;
	opacity: 0;
	transition: all 1.5s 3s;
}
.mod-freeHTML .slide-area.slideStart .copy-box{
	opacity: 1;
	transform: translate(-50%,-50%);
 }
.mod-freeHTML .copy-box p{
	display: inline-block;
}
/*
.mod-freeHTML .copy-box p{
	background: #FFFFFF;   
	padding: 2px 5px;
	display: inline;
	font-size: 1.5em;
	font-weight: bold;
	line-height: 300%;
}
*/  
@media screen and (max-width: 640px) {
	.mod-freeHTML .copy-box p{
		font-size: 1em;
		line-height: 300%;
	}
}
/* -----------------------------------------------------------

	.play-area
	
----------------------------------------------------------- */
.mod-freeHTML .play-area{
	position: relative;
	padding-top: 200px;
}
.mod-freeHTML .play-area .list-area{
	display: flex;
}
.mod-freeHTML .play-area .list-area > .try-area,
.mod-freeHTML .play-area .list-area > .watch-area{
	width: 50%;
}
.mod-freeHTML .play-area .list-area > .try-area > .inner-top,
.mod-freeHTML .play-area .list-area > .try-area > .inner-bottom{
	padding-right: 52px;
	position: relative;
}
.mod-freeHTML .play-area .list-area > .watch-area > .inner-top,
.mod-freeHTML .play-area .list-area > .watch-area > .inner-bottom{
	padding-left: 52px;
}
@media screen and (min-width: 641px) {
	.mod-freeHTML .play-area .list-area > .try-area > .inner-top,
	.mod-freeHTML .play-area .list-area > .watch-area > .inner-top{
		height: 140px;
	}
	.mod-freeHTML .play-area .list-area > .try-area > .inner-bottom::after{
		content: "";
		display: block;
		background-image: linear-gradient(to bottom, #000, #000 6px, transparent 6px, transparent 12px);
		background-size: 2px 12px;
		background-repeat: repeat-y;
		position: absolute;
		top: 0;
		right: 0;
		width: 2px;
		height: 100%;
	}
}
@media screen and (max-width: 640px) {
	.mod-freeHTML .play-area{
		padding-top: 54px;
	}
	.mod-freeHTML .play-area .inner{
		padding-top: 15px;
		padding-bottom: 40px;
	}
	.mod-freeHTML .play-area .list-area{
		display: flex;
		flex-direction: column;
	}
	.mod-freeHTML .play-area .list-area > .try-area,
	.mod-freeHTML .play-area .list-area > .watch-area{
		width: 100%;
	}
	.mod-freeHTML .play-area .list-area > .try-area > .inner-top,
	.mod-freeHTML .play-area .list-area > .try-area > .inner-bottom{
		padding-right: 0;
	}
	.mod-freeHTML .play-area .list-area > .try-area > .inner-bottom{
		border-right: none;
		padding-bottom: 35px;
	}
	.mod-freeHTML .play-area .list-area > .try-area > .inner-bottom::after{
		content: "";
		display: block;
		background-image: linear-gradient(to right, #000, #000 6px, transparent 6px, transparent 12px);
		background-size: 12px 2px;
		background-repeat: repeat-x;
		position: absolute;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 2px;
	}
	.mod-freeHTML .play-area .list-area > .watch-area > .inner-top,
	.mod-freeHTML .play-area .list-area > .watch-area > .inner-bottom{
		padding-left: 0;
	}
}
/* 	.play-area　(bg)
========================================================================== */
.mod-freeHTML .play-area .bg-inner{
	width: 100%;
}
.mod-freeHTML .play-area .bg-inner::before,
.mod-freeHTML .play-area .bg-inner::after{
    display: block;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
	left: 0;
	width: 0;
	height: 0;
	border-style: solid;
}
.mod-freeHTML .play-area .bg-inner::before{ top: 0; }
.mod-freeHTML .play-area .bg-inner::after{ bottom: 0; margin-bottom: -200px; }

.mod-freeHTML .play-area.play-area01{z-index: 1;}
.mod-freeHTML .play-area.play-area01 .bg-inner{ background: #FFFFFF; }
.mod-freeHTML .play-area.play-area01 .bg-inner::before{ border-width: 200px 100vw 0px 0; border-color: transparent #FFFFFF transparent transparent; }
.mod-freeHTML .play-area.play-area01 .bg-inner::after{ border-width: 200px 100vw 0 0; border-color: #FFFFFF transparent transparent transparent; }

.mod-freeHTML .play-area.play-area02{z-index: 2;}
.mod-freeHTML .play-area.play-area02 .bg-inner{ background: #E7E5E3; }
.mod-freeHTML .play-area.play-area02 .bg-inner::before{ border-width: 0px 100vw 200px 0; border-color: transparent transparent #E7E5E3 transparent; }
.mod-freeHTML .play-area.play-area02 .bg-inner::after{ margin-bottom: -200px; border-width: 0 100vw 200px 0; border-color: transparent #E7E5E3 transparent transparent; }

.mod-freeHTML .play-area.play-area03{z-index: 3;}
.mod-freeHTML .play-area.play-area03 .bg-inner{ background: #FFFFEA; }
.mod-freeHTML .play-area.play-area03 .bg-inner::before{ border-width: 200px 100vw 0px 0; border-color: transparent #FFFFEA transparent transparent; }
.mod-freeHTML .play-area.play-area03 .bg-inner::after{ margin-bottom: -200px; border-width: 200px 100vw 0 0; border-color: #FFFFEA transparent transparent transparent; }

@media screen and (max-width: 640px) {
	.mod-freeHTML .play-area .bg-inner::after{ margin-bottom: -54px; }
	.mod-freeHTML .play-area.play-area01 .bg-inner::before{ border-width: 54px 100vw 0px 0; }
	.mod-freeHTML .play-area.play-area01 .bg-inner::after{ border-width: 54px 100vw 0 0; }

	.mod-freeHTML .play-area.play-area02 .bg-inner::before{ border-width: 0px 100vw 54px 0; }
	.mod-freeHTML .play-area.play-area02 .bg-inner::after{ margin-bottom: -54px; border-width: 0 100vw 54px 0; }

	.mod-freeHTML .play-area.play-area03 .bg-inner::before{ border-width: 54px 100vw 0px 0; }
	.mod-freeHTML .play-area.play-area03 .bg-inner::after{ margin-bottom: -54px; border-width: 54px 100vw 0 0; }
}

/* 	.play-area　.try-area .inner-top
========================================================================== */
.mod-freeHTML .play-area .list-area > .try-area > .inner-top{
	position: relative;
}
.mod-freeHTML .play-area .list-area > .try-area > .inner-top::before{
	content: "";
	display: block;
	width: 234px;
	height: 138px;
	position: absolute;
	top: 0;
	left: 0;
	margin: -30px 0 0 -15px;
	z-index: 1;
}
.mod-freeHTML .play-area.play-area01 .list-area > .try-area > .inner-top::before{ background: url(../img/pc/play_try_bg01.svg) top left no-repeat; }
.mod-freeHTML .play-area.play-area02 .list-area > .try-area > .inner-top::before{ background: url(../img/pc/play_try_bg02.svg) top left no-repeat; }
.mod-freeHTML .play-area.play-area03 .list-area > .try-area > .inner-top::before{ background: url(../img/pc/play_try_bg03.svg) top left no-repeat; }

.mod-freeHTML .play-area .list-area > .try-area > .inner-top > .tit-box{
	max-width: 150px;
	margin-bottom: 20px;
	position: relative;
	z-index: 2;
}
.mod-freeHTML .play-area .list-area > .try-area > .inner-top > .read-box{
	max-width: 100%;
	position: relative;
	z-index: 2;
	font-size: 1.286em;
	font-weight: bold;
}
@media screen and (max-width: 640px) {
	.mod-freeHTML .play-area .list-area > .try-area > .inner-top::before{
		width: 182px;
		height: 107px;
		margin: -30px 0 0 10px;
	}
	.mod-freeHTML .play-area .list-area > .try-area > .inner-top > .tit-box{
		max-width: 115px;
		margin-bottom: 10px;
		margin-left: auto;
		margin-right: auto;
	}
	.mod-freeHTML .play-area .list-area > .try-area > .inner-top > .read-box{
		font-size: 1em;
		margin-bottom: 30px;
		text-align: center;
	}
}
/* 	.play-area　.try-area .inner-bottom
========================================================================== */
.mod-freeHTML .play-area .list-area > .try-area > .inner-bottom > .img-box{
	margin-bottom: 25px;
}
.mod-freeHTML .play-area .list-area > .try-area > .inner-bottom > .txt-box > span{
	display: inline-block;
	position: relative;
}
.mod-freeHTML .play-area .list-area > .try-area > .inner-bottom > .txt-box > span.mid-box{
	margin-bottom: 10px;
	font-size: 1.143em;
	padding-bottom: 2px;
}
.mod-freeHTML .play-area .list-area > .try-area > .inner-bottom > .txt-box > span.mid-box::after{
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	position: absolute;
	left: 0;
	bottom: 0;
	background: #000000;
}
@media screen and (max-width: 640px) {
	.mod-freeHTML .play-area .list-area > .try-area > .inner-bottom > .img-box{
		margin-bottom: 15px;
	}
	.mod-freeHTML .play-area .list-area > .try-area > .inner-bottom > .txt-box > span{
		font-size: 0.857em;
	}
	.mod-freeHTML .play-area .list-area > .try-area > .inner-bottom > .txt-box > span.mid-box{
		display: inline-block;
		margin-bottom: 30px;
		font-size: 1em;
		text-align: center;
		width: 100%;
		font-weight: bold;
	}
	.mod-freeHTML .play-area .list-area > .try-area > .inner-bottom > .txt-box > span.mid-box > .iBlock{
		position: relative;
	}
	.mod-freeHTML .play-area .list-area > .try-area > .inner-bottom > .txt-box > span.mid-box > .iBlock::after{
		content: "";
		display: block;
		width: 100%;
		height: 1px;
		position: absolute;
		left: 0;
		bottom: 0;
		background: #000000;
	}
	.mod-freeHTML .play-area .list-area > .try-area > .inner-bottom > .txt-box > span.mid-box::after{
		display: none;
	}
}

/* 	.play-area　.watch-area .inner-top
========================================================================== */
.mod-freeHTML .play-area .list-area > .watch-area > .inner-top{
	position: relative;
	padding-top: 20px;
}
.mod-freeHTML .play-area .list-area > .watch-area > .inner-top::before{
	content: "";
	display: block;
	width: 138px;
	height: 138px;
	position: absolute;
	top: 0;
	left: 0;
	margin: calc( -45px + 20px ) 0 0  calc( -40px + 52px );
	z-index: 1;
}
.mod-freeHTML .play-area.play-area01 .list-area > .watch-area > .inner-top::before{ background: url(../img/pc/play_watch_bg01.svg) top left no-repeat; }
.mod-freeHTML .play-area.play-area02 .list-area > .watch-area > .inner-top::before{ background: url(../img/pc/play_watch_bg02.svg) top left no-repeat; }
.mod-freeHTML .play-area.play-area03 .list-area > .watch-area > .inner-top::before{ background: url(../img/pc/play_watch_bg03.svg) top left no-repeat; }

.mod-freeHTML .play-area .list-area > .watch-area > .inner-top > .tit-box{
	max-width: 205px;
	margin-bottom: 20px;
	position: relative;
	z-index: 2;
}
.mod-freeHTML .play-area .list-area > .watch-area > .inner-top > .read-box{
	max-width: 100%;
	position: relative;
	z-index: 2;
	font-weight: bold;
}
@media screen and (max-width: 640px) {
	.mod-freeHTML .play-area .list-area > .watch-area > .inner-top{
		padding-top: 55px;
		padding-right: 15px;
	}
	.mod-freeHTML .play-area .list-area > .watch-area > .inner-top::before{
		width: 107px;
		height: 107px;
		margin: 30px 0 0 5px;
	}
	.mod-freeHTML .play-area .list-area > .watch-area > .inner-top > .tit-box{
		max-width:155px;
		margin-bottom: 10px;
		margin-left: auto;
		margin-right: auto;
	}
	.mod-freeHTML .play-area .list-area > .watch-area > .inner-top > .read-box{
		max-width: 100%;
		margin-bottom: 20px;
		text-align: center;
	}
}
/* 	.play-area　.watch-area .inner-bottom
========================================================================== */
.mod-freeHTML .play-area .list-area > .watch-area > .inner-bottom{
	position: relative;
}
.mod-freeHTML .play-area .list-area > .watch-area > .inner-bottom > .img-box{
	margin-bottom: 30px;
	background: #FFFFFF;
}
.mod-freeHTML .play-area .list-area > .watch-area > .inner-bottom > .btn-box{
	background: #FFFFFF;
}
.mod-freeHTML .play-area .list-area > .watch-area > .inner-bottom > .btn-box > a{
	display: block;
}
.mod-freeHTML .play-area.play-area01 .list-area > .watch-area > .inner-bottom > .btn-box > a{ background: #90C2CC; }
.mod-freeHTML .play-area.play-area02 .list-area > .watch-area > .inner-bottom > .btn-box > a{ background: #B3A4C2; }
.mod-freeHTML .play-area.play-area03 .list-area > .watch-area > .inner-bottom > .btn-box > a{ background: #E7C5CE; }
@media screen and (max-width: 640px) {
	.mod-freeHTML .play-area .list-area > .watch-area > .inner-bottom > .img-box{
		margin-bottom: 20px;
	}
}

/* 	.play-area　.try-area .char-box
========================================================================== */
.mod-freeHTML .play-area .char-box{
	position: absolute;
	top: 0;
	right: 0;
	margin: -190px -40px 0 0;
}
@media screen and (max-width: 640px) {
	.mod-freeHTML .play-area .char-box{
		max-width: 100px;
		margin: -145px -30px 0 0;
	}
}

/* -----------------------------------------------------------

	.bnr-area
	
----------------------------------------------------------- */
.mod-freeHTML .bnr-area{
	padding: 210px 0;
	text-align: center;
}
/*
.mod-freeHTML .bnr-area .tit-box{
	display: inline-block;
	background: #FFFFFF;
	font-size: 1.500em;
	font-weight: bold;
	padding: 5px 15px;
	position: relative;
	margin-bottom: 85px;
}
.mod-freeHTML .bnr-area .tit-box::after{
	content: "";
	position: absolute;
	display: block;
	bottom: 0;
	left: 0;
	background: url(../img/pc/bnr_bar01.svg) bottom center / cover no-repeat;
	width: 100%;
	height: 24px;
	margin-bottom: calc( -24px - 5px );
}
*/
.mod-freeHTML .bnr-area .list-area{
	display: flex;
	justify-content:center;
	max-width: 855px;
	margin: 0 auto;
}
@media screen and (max-width: 640px) {
	.mod-freeHTML .bnr-area{
		padding:100px 0 60px;
		text-align: center;
	}
}
























/* -----------------------------------------------------------
	共通 アニメーション
----------------------------------------------------------- */
.mod-freeHTML .sec02 { -webkit-animation-delay:0.2s; animation-delay: 0.2s; }
.mod-freeHTML .sec04 { -webkit-animation-delay:0.4s; animation-delay: 0.4s; }
.mod-freeHTML .sec06 { -webkit-animation-delay:0.6s; animation-delay: 0.6s; }
.mod-freeHTML .sec08 { -webkit-animation-delay:0.8s; animation-delay: 0.8s; }

.mod-freeHTML .sec05 { -webkit-animation-delay:0.5s; animation-delay: 0.5s; }
.mod-freeHTML .sec10 { -webkit-animation-delay:1.0s; animation-delay: 1.0s; }

.mod-freeHTML .sec12 { -webkit-animation-delay:1.2s; animation-delay: 1.2s; }
.mod-freeHTML .sec14 { -webkit-animation-delay:1.4s; animation-delay: 1.4s; }
.mod-freeHTML .sec16 { -webkit-animation-delay:1.6s; animation-delay: 1.6s; }
.mod-freeHTML .sec18 { -webkit-animation-delay:1.8s; animation-delay: 1.8s; }

.mod-freeHTML .sec15 { -webkit-animation-delay:1.5s; animation-delay: 1.5s; }
.mod-freeHTML .sec20 { -webkit-animation-delay:2.0s; animation-delay: 2.0s; }

.mod-freeHTML .sec22 { -webkit-animation-delay:2.2s; animation-delay: 2.2s; }
.mod-freeHTML .sec24 { -webkit-animation-delay:2.4s; animation-delay: 2.4s; }
.mod-freeHTML .sec26 { -webkit-animation-delay:2.6s; animation-delay: 2.6s; }
.mod-freeHTML .sec28 { -webkit-animation-delay:2.8s; animation-delay: 2.8s; }

.mod-freeHTML .sec25 { -webkit-animation-delay:2.5s; animation-delay: 2.5s; }
.mod-freeHTML .sec30 { -webkit-animation-delay:3.0s; animation-delay: 3.0s; }
.mod-freeHTML .sec35 { -webkit-animation-delay:3.5s; animation-delay: 3.5s; }

.mod-freeHTML .sec32 { -webkit-animation-delay:3.2s; animation-delay: 3.2s; }
.mod-freeHTML .sec34 { -webkit-animation-delay:3.4s; animation-delay: 3.4s; }
.mod-freeHTML .sec36 { -webkit-animation-delay:3.6s; animation-delay: 3.6s; }
.mod-freeHTML .sec38 { -webkit-animation-delay:3.8s; animation-delay: 3.8s; }
.mod-freeHTML .sec40 { -webkit-animation-delay:4.0s; animation-delay: 4.0s; }


.mod-freeHTML .animate{ opacity: 0; transition: all 0.8s ease; }
/* -----------------------------------------------------------
	.fadeIn
----------------------------------------------------------- */
.mod-freeHTML .animate.fadeIn{
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
	-webkit-animation-duration: 1000ms;
	animation-duration: 1000ms;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
@-webkit-keyframes fadeIn{
	from {
		opacity: 0;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	}
	to {
		opacity: 1;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	}
}
@keyframes fadeIn{
	from {
		opacity: 0;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	}
	to {
		opacity: 1;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	}
}

/* -----------------------------------------------------------
	.slideIn play-area
----------------------------------------------------------- */
.mod-freeHTML .animate.slideUp{
	animation: slideUp 1s ease forwards;
}
/* -----------------------------------------------------------
	.slideIn
----------------------------------------------------------- */
/*
.mod-freeHTML .play-area.animate{
	opacity: 1;
}
.mod-freeHTML .play-area.animate > .bg-inner,
.mod-freeHTML .play-area.animate > .bg-inner::before,
.mod-freeHTML .play-area.animate > .bg-inner::after{
	opacity: 1;
	transition: all 1s;
	transform: translate(100vw , 0);
}
.mod-freeHTML .play-area.play-area01.animate > .bg-inner,
.mod-freeHTML .play-area.play-area01.animate > .bg-inner::before,
.mod-freeHTML .play-area.play-area01.animate > .bg-inner::after{
	opacity: 1;
	transition: all 1s;
	transform: translate(100vw , 0);
}
.mod-freeHTML .play-area.animate.slideIn > .bg-inner,
.mod-freeHTML .play-area.animate.slideIn > .bg-inner::before,
.mod-freeHTML .play-area.animate.slideIn > .bg-inner::after{
	transform: translate(0 , 0);
}
*/


/*  .play-area.animate　01
========================================================================== */
.mod-freeHTML .play-area.animate.slideIn{
	animation-duration: 1.5s;
	animation-fill-mode: both;
}
.mod-freeHTML .play-area.play-area01.animate.slideIn{ animation-name: slideIn; }
.mod-freeHTML .play-area.play-area02.animate.slideIn{ animation-name: slideInR; }
.mod-freeHTML .play-area.play-area03.animate.slideIn{ animation-name: slideIn; }
@-webkit-keyframes slideIn {
	0% {opacity: 0; transform:translate(100vw , -200px); }
	10% {opacity: 1; transform:translate(100vw , -200px); }
	100% {opacity: 1; transform:translate(0 , 0);}
}
@keyframes slideIn {
	0% {opacity: 0; transform:translate(100vw , -200px); }
	10% {opacity: 1; transform:translate(100vw , -200px); }
	100% {opacity: 1; transform:translate(0 , 0);}
}
@keyframes slideInR {
	0% {opacity: 0; transform:translate(-100vw , -200px); }
	10% {opacity: 1; transform:translate(-100vw , -200px); }
	100% {opacity: 1; transform:translate(0 , 0);}
}

/*  .play-area.animate　02
========================================================================== */
.mod-freeHTML .play-area.animate .common-tit-box{
	opacity: 0;
}
.mod-freeHTML .play-area.animate.slideIn .common-tit-box{
	animation-name: fadeIn;
	animation-duration: 1.5s;
	animation-fill-mode: both;
	animation-delay: 1.5s;
	opacity: 1;
}

/*  .play-area.animate　02
========================================================================== */
.mod-freeHTML .play-area.animate .try-area,
.mod-freeHTML .play-area.animate .watch-area{
	opacity: 0;
}
.mod-freeHTML .play-area.animate.slideIn .try-area{
	animation-name: slideUp;
	animation-duration: 1.5s;
	animation-fill-mode: both;
	animation-delay: 1.5s;
}
.mod-freeHTML .play-area.animate.slideIn .watch-area{
	animation-name: slideUp;
	animation-duration: 1.5s;
	animation-fill-mode: both;
	animation-delay: 2.0s;
}
@keyframes slideUp {
	0% {transform: translateY(50px);opacity: 0;}
	100% {transform: translateY(0);opacity: 1;}
}





/*
.mod-freeHTML .animate.slideIn{
	position: relative;
	opacity: 1;
}
.mod-freeHTML .animate > .bg-inner
.mod-freeHTML .animate > .bg-inner::before,
.mod-freeHTML .animate > .bg-inner::after{
	opacity:0;
}
.mod-freeHTML .animate.slideIn .bg-inner,
.mod-freeHTML .animate.slideIn .bg-inner::before,
.mod-freeHTML .animate.slideIn .bg-inner::after{
	animation-name: slideIn;
	animation-duration: 1.5s;
	animation-fill-mode: both;
}
.mod-freeHTML .animate.slideIn::after {
	position: absolute;
	content: "";
	display: block;
	height: calc(100% + 200px);
	width:calc(100%);
	top: 0;
	transform: scaleX(0);
	opacity: 1;
	
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	z-index: 99;
}
@media screen and (max-width: 640px) {
	.mod-freeHTML .animate.slideIn::after {
		height: calc(100% + 54px + 54px);
	}
}
.mod-freeHTML .play-area.play-area01.animate.slideIn::after{
	right: 0;
	animation-name: slideIn-border-right-left;
	background: #FFFFFF;
	transform-origin: right; 
}
.mod-freeHTML .play-area.play-area02.animate.slideIn::after{
	left: 0;
	animation-name: slideIn-border-left-right;
	background: #E7E5E3;
	transform-origin: left; 
}
.mod-freeHTML .play-area.play-area03.animate.slideIn::after{
	right: 0;
	animation-name: slideIn-border-right-left;
	background: #FFFFEA;
	transform-origin: right; 
}
@keyframes slideIn {
	0% {opacity: 0;}
	1% {opacity: 0;}
	49% {opacity: 0;}
	50% {opacity: 1;}
	100% {opacity: 1;}
}
@keyframes slideIn-border-left-right {
	0% { transform: scaleX(0); opacity: 1; transform-origin: left;  }
	1% { transform: scaleX(0); opacity: 1; transform-origin: left;  }
	49% { transform: scaleX(1); opacity: 1; transform-origin: left;  }
	50% { transform: scaleX(1); opacity: 1; transform-origin: right;  }
	100% { transform: scaleX(0); opacity: 1; transform-origin: right;  }
}@keyframes slideIn-border-right-left {
	0% { transform: scaleX(0); opacity: 1; transform-origin: right;  }
	1% { transform: scaleX(0); opacity: 1; transform-origin: right;  }
	49% { transform: scaleX(1); opacity: 1; transform-origin: right;  }
	50% { transform: scaleX(1); opacity: 1; transform-origin: left;  }
	100% { transform: scaleX(0); opacity: 1; transform-origin: left;  }
}
*/