@charset "utf-8";

/* ===============================================================================
Reset
=============================================================================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a,
abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure,
figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

ol, ul {
  list-style: none;
}
a{
	text-decoration: none;
	color: #000000;
}
/* ===============================================================================
Body Setting
=============================================================================== */
html, body {
  font-family: 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic W3 JIS2004',sans-serif;
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
       text-size-adjust: 100%;
  line-height: 1.8;
  color: #000;
  height: 100%;
}
.contents{
	padding: 0;
	overflow: hidden;
}
/* ===============================================================================
Common
=============================================================================== */
.spOnly{
	display: none;
}
.btn-permeate:hover{
	opacity: 0.4;
}
.btn-permeate{
	-webkit-transition: opacity .3s;
	transition: opacity .3s;
	display: block;
}
a:hover{
	opacity: 0.4;
	-webkit-transition: opacity .3s;
	transition: opacity .3s;	
}
@media screen and (max-width: 640px) {
	br{
		display: none;
	}
	.pcOnly{
		display: none;
	}
	.spOnly{
		display: block;
	}
	.sp-br{
		display: block !important;
	}
}
/* ===============================================================================
main visual
=============================================================================== */
#loader-bg {
	display: none;
	position: fixed;
	width: 100%;
	height: 100vh;
	height: calc(var(--vh, 1vh) * 100);
	top: 0px;
	left: 0px;
	z-index: -1;
}
#loader {
    display: none;
    position: fixed;
    top: 50vh;
	top: calc(var(--vh, 1vh) * 50);
    left: 50%;
    width: 200px;
    height: 200px;
    margin-top: -50px;
    margin-left: -100px;
	text-align: center;
	font-size: 180%;
	color: #eb5f28;
	z-index: 0;
	-webkit-animation: flash 1.8s linear infinite;
	        animation: flash 1.8s linear infinite;
}
.block{
	background: url(../images/bg_top-s.jpg);
	height: 95vh;
	opacity: 0;
}
.device-sp .block{
	background: url(../images/bg_top-s_sp.jpg);
}
.block.active {
	-webkit-animation: clipPath 3s cubic-bezier(.220, .60, .350, 1) 0s 1 forwards;
			animation: clipPath 3s cubic-bezier(.220, .60, .350, 1) 0s 1 forwards;
	opacity: 1;
}
.block.active.roop{
	background: url(../images/bg_top-s.jpg) 50% 50%;
	-webkit-animation: move-stripe 40s infinite linear;
	        animation: move-stripe 40s infinite linear;
}
.device-sp .block.active.roop{
	background: url(../images/bg_top-s_sp.jpg) 50% 50%;
}
@-webkit-keyframes clipPath {
0% {
-webkit-clip-path: circle(0 at 50% 50%);
        clip-path: circle(0 at 50% 50%);
}
100% {
-webkit-clip-path: circle(100% at 50% 50%);
        clip-path: circle(100% at 50% 50%);
}
}

@keyframes clipPath {
0% {
-webkit-clip-path: circle(0 at 50% 50%);
        clip-path: circle(0 at 50% 50%);
}
100% {
-webkit-clip-path: circle(100% at 50% 50%);
        clip-path: circle(100% at 50% 50%);
}
} 
@-webkit-keyframes move-stripe {
	0% {background-position: 0 0;}
	100% {background-position: 550px 478px;}
}
@keyframes move-stripe {
	0% {background-position: 0 0;}
	100% {background-position: 550px 478px;}
}
@-webkit-keyframes move-stripe_sp {
	0% {background-position: 0 0;}
	100% {background-position: 400px 348px;}
}
@keyframes move-stripe_sp {
	0% {background-position: 0 0;}
	100% {background-position: 400px 348px;}
}
#top{
	width: 100vw;
	height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
}
#top .header{
	position: relative;
	width: 100%;
	z-index: 2;
	overflow: hidden;
}
#top .lang{
	position: absolute;
	right: 20px;
	top: 20px;
	font-size: 1.5rem;
	font-weight: 600;
	color: #ffffff;
	opacity: 0;
}
#top .lang.active{
	-webkit-transition: all .5s ease-out 1.8s;
	transition: all .5s ease-out 1.8s;
	opacity: 1;
}
#top .lang li:first-of-type:after{
	content: "|";
	color: #ffffff;
	padding: 0 .5rem;
}
#top .lang ul{
	background-color: #3eaf3e;
    padding: 0 15px;
	border-radius: 20px;
	letter-spacing: .1em;
}
#top .lang ul li{
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
}
#top .fox{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translateY(-50%) translateX(-50%);
			transform: translateY(-50%) translateX(-50%);	
	opacity: 0;
	-webkit-transition: all .5s ease-out 1.4s;
}
#top .fox img{
	width: 0;
	-webkit-transition: all .5s ease-out 1.4s;
	transition: all .5s ease-out 1.4s;
}
#top .ttl-1{
	position: absolute;
	top: 31%;
	left: 50%;
	-webkit-transform: translateY(-50%) translateX(-50%);
			transform: translateY(-50%) translateX(-50%);
	-webkit-transition: all .5s ease-out 1.2s;
	transition: all .5s ease-out 1.2s;
	opacity: 0;
}
#top .ttl-2{
	position: absolute;
	top: 55%;
	left: 50%;
	-webkit-transform: translateY(-50%) translateX(-50%);
	        transform: translateY(-50%) translateX(-50%);
	-webkit-transition: all .5s ease-out 1.4s;
	transition: all .5s ease-out 1.4s;
	opacity: 0;
}
#top .ttl-3{
	position: absolute;
	top: 54.5%;
    left: 61.5%;
	-webkit-transform: translateY(-50%) translateX(-50%);
	        transform: translateY(-50%) translateX(-50%);
	-webkit-transform: rotate(10deg) scale(.2,.2);
	        transform: rotate(10deg) scale(.2,.2);
	-webkit-transform-origin: 0 0;
	        transform-origin: 0 0;
	-webkit-transition: all .5s cubic-bezier(.175,.885,.32,1.275) 1.8s;
	transition: all .5s cubic-bezier(.175,.885,.32,1.275) 1.8s;
	opacity: 0;
}
#top .fox.active{
	opacity: 1;	
	-webkit-transition: all 1s ease-out .8s;	
	transition: all 1s ease-out .8s;
}
.device-pc #top .fox.active img{
	width: 200px;
}
#top .fox.active img{
	width: 130px;
}
#top .fox.active.out{
	top: 120%;
	/* left: -10%; */
}
#top .ttl-1.active{
	top: 41%;
	opacity: 1;	
}
#top .ttl-2.active{
	top: 60%;
	opacity: 1;	
}
#top .ttl-3.active{
	-webkit-transform: rotate(0);
	        transform: rotate(0);
	opacity: 1;	
}
.down_link{
	position: absolute;
	top: 96%;
	left: 49%;
	z-index: 1;
	-webkit-animation: sdb 2s infinite;
	        animation: sdb 2s infinite;
    -webkit-box-sizing: border-box;
			box-sizing: border-box;
	opacity: 0;
}
.down_link.active{
	-webkit-transition: all .5s ease-out 1.8s;
	transition: all .5s ease-out 1.8s;
	opacity: 1;
}
@-webkit-keyframes sdb {
	0%  {-webkit-transform: rotate(0deg) translate(0, 0);}
	20% {-webkit-transform: rotate(0deg) translate(0, 10px);}
	40% {-webkit-transform: rotate(0deg) translate(0, 0);}
}
@keyframes sdb {
	0%  {-webkit-transform: rotate(0deg) translate(0, 0);transform: rotate(0deg) translate(0, 0);}
	20% {-webkit-transform: rotate(0deg) translate(0, 10px);transform: rotate(0deg) translate(0, 10px);}
	40% {-webkit-transform: rotate(0deg) translate(0, 0);transform: rotate(0deg) translate(0, 0);}
}
@media screen and (max-width: 1366px) {
	.device-sp #top .ttl-1{
		width: 33%;
	}
	.device-sp #top .ttl-2{
		width: 15%;
	}
	.device-sp #top .ttl-3{
		width: 12%;
	}
	.device-sp .article-lead .fox1{
		top: 160px;
    	width: 17%;
	}
}
@media screen and (max-width: 1024px) {
	.device-sp #top .ttl-2{
		top: 45%;
	}
	.device-sp #top .ttl-2.active{
		top: 53%;
	}
	.device-sp #top .ttl-3{
		top: 50.5%;
	}
}
@media screen and (max-width: 1024px) and (max-height: 768px) {
	.device-sp #top .ttl-2.active {
		top: 61%;
	}
	.device-sp #top .ttl-3 {
		top: 56.5%;
	}
}
@media screen and (max-width: 640px) {
	.block{
		background-image: url(../images/bg_top_sp.jpg);
		height: 95vh;
		background-size: cover;
	}
	.device-sp #top .ttl-1{
		width: 80%;
		top: 40%;
	}
	.device-sp #top .ttl-1.active{
		top: 45%;
	}
	.device-sp #top .ttl-2{
		top: 60%;
		width: 35%;
	}
	.device-sp #top .ttl-2.active{
		top: 64%;
	}
	.device-sp #top .ttl-3{
		width: 26.5%;
		top: 59.5%;
		left: 72%;
	}
	.down_link{
		width: 6%;
		top: 97vh;
		top: calc(var(--vh, 1vh) * 97);
		left: 48%;
	}
}
/* ===============================================================================
yodogawa
=============================================================================== */
.article-lead{
	max-width: 745px;
	font-size: 1.8rem;
	position: relative;
	padding-top: 50px;
	margin: 0 auto;
}
.device-pc .article-lead{
	margin: 54px auto;
}
.article-lead .txt p{
	margin: 0 auto 1em;
	font-family: 'roboto', sans-serif;
	font-weight: 700;
    line-height: 1.555;
}
.article-lead .fox1{
	position: absolute;
	top: 110px;
    right: 6px;
}
.fox1.delighter {
	-webkit-transition: all .5s ease-out;
	transition: all .5s ease-out;
	-webkit-transform: translateX(100%);
	        transform: translateX(100%);
	opacity: 0;
}
.fox1.delighter.started {
	-webkit-transform: none;
	        transform: none;
	opacity: 1;
}
@media screen and (max-width: 640px) {
	.article-lead{
		padding-top: 20px;
	}
	.article-lead .txt p{
		width: 100%;
		line-height: 1.8;
	}
	.device-sp .article-lead .fox1{
		position: relative;
		top: -20px;
		right: 0;
		width: 50%;
		margin: 0 auto;
	}
}
/* ===============================================================================
article
=============================================================================== */
.article{
	padding: 95px 0 0;
}
.article ul li span{
	display: block;
}
.article ul li{
	padding: 40px 0 80px;
}
.article ul li:first-of-type{
	background-color: #ebc4b5;
}
.article ul li:nth-of-type(2){
	background-color: #4e1e01;
}
.article ul li:nth-of-type(2) a{
	color: #ffffff;
}
.article ul li:nth-of-type(3){
	background-color: #ffd994;
}
.article ul li:nth-of-type(4){
	background-color: #e7a48a;
}
.article ul li a,
.article ul li div{
	max-width: 800px;
	margin: 0 auto;
	color: #000;
}
.article ul li div{
	padding-bottom: 10px;
}
.article ul li div img{
	position: relative;
}
.article ul li div img:first-of-type{
	z-index: 3;
}
.article ul li div img:nth-of-type(2){
	z-index: 2;
}
.article ul li div img:last-of-type{
	z-index: 1;
}
.article ul li div img.delighter {
	-webkit-transition: all .5s ease-out;
	transition: all .5s ease-out;
	-webkit-transform: translateX(-100%);
	        transform: translateX(-100%);
	opacity: 0;
}
.article ul li div img.last.delighter {
	-webkit-transition: all .5s .5s ease-out;
	transition: all .5s .5s ease-out;
	-webkit-transform: translateX(-100%);
	        transform: translateX(-100%);
	opacity: 0;
}
.article ul li div img.delighter.started {
	-webkit-transform: none;
	        transform: none;
	opacity: 1;
}
.article ul li.off a{
	opacity: .6;
	pointer-events: none;
}
.article ul li.off div img {
	opacity: .6;
}
.article ul li.off div img.delighter {
	opacity: 0;
}

.article dt{
	font-size: 1.6rem;
    line-height: 1.5;
	font-family: 'roboto',sans-serif;
	font-weight: 500;
	padding-top: 5px;
}
.article dd img{
	width: 100%;
}
.banner{
	text-align: center;
	line-height: 0;
}
.banner p{
	padding: 60px 0;
}
@media screen and (max-width: 1366px) {
	.device-sp .article ul li div img{
		width: 20%;
		display: inline;
	}
	.device-sp .article ul li div img.fox3{
		width: 28%;
	}
	.device-sp .article ul li div img.fox5{
		width: 26%;
	}
}
@media screen and (max-width: 640px) {
	.article{
		padding: 0;
	}
	.article ul li {
		padding: 20px 10px;
	}
	.device-sp .article ul li div img{
		width: 30%;
		display: inline-block;
	}
	.article dt{
		padding-top: 5px;
	}
}
/* ===============================================================================
lineup
=============================================================================== */
#magazine-items{
	max-width: 960px;
	margin: 0 auto;
    padding-bottom: 50px;
}
#magazine-items > li p{
	font-family: 'roboto',sans-serif;
	font-weight: 700;
    color: #ffffff;
    display: inline-block;
	padding: 0 .5em;
	margin-bottom: 1em;
    border-radius: 8px;
}
.device-pc #magazine-items > li p{
	font-size: 1.8rem;
	margin-bottom: 50px;
}
.device-pc #magazine-items > li p span{
    font-size: 1.4rem;
}
#magazine-items > li p.kondoaki{
	background-color: #dd5f28;
}
#magazine-items > li p.ochitsuke{
	background-color: #848fc9;
}
#magazine-items > li p.mina{
	background-color: #ff9680;
}
.line{
	max-width: 960px;
	margin: 0 auto;
}
@media screen and (max-width: 640px) {
	.lineup{
		padding: 0 20px;
	}	
}
/* ===============================================================================
footer
=============================================================================== */
.article-footer{
	background: url(../images/bg_top-s.jpg);
	-webkit-animation: move-stripe 40s infinite linear;
	        animation: move-stripe 40s infinite linear;
}
.share a{
	color: #000;
	display: block;
}
.share{
	font-size: 1.2rem;
	font-family: 'HiraKakuPro-W6','ヒラギノ角ゴ ProN W6','Hiragino Kaku Gothic W6 JIS2004',sans-serif;
    max-width: 438px;
	margin: 0 auto;
    padding: 110px 0 20px;
	text-align: center;
}
.share ul{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}
.share ul li span{
	display: block;
	line-height: 1;
	padding-top: .5em;
	font-family: 'roboto',sans-serif;
	font-weight: 700;
}
.share img{
	width: 72px;
}
.bottom{
	font-size: .9rem;
	text-align: center;
	padding: 30px 0 120px;
	font-family: 'roboto',sans-serif;
	font-weight: 400;
}
#lineup{
	position: fixed;
	right: 2vw;
	bottom: 1vw;
	z-index: 3;
}
@media screen and (max-width: 640px) {
	#lineup {
		width: 90%;
		right: 5%;
		bottom: 0;
	}
	.article-footer{
		background: url(../images/bg_top-s_sp.jpg);
		font-size: 1rem;
	}
	.share ul{
		width: 87.5%;
		margin: 0 auto;
	}
	.share ul li img{
		width: 70%; 
		display: inline-block;
	}
	.bottom{
		font-size: 1.2rem;
		height: 200px;
	}
	.bottom div{
		display: block;
		text-align: center;
		padding-top: 4.6%;
		line-height: 2.4;
	}
	.banner p{
		padding: 30px 0;
	}
}

.btn-item dl dd:nth-of-type(1) strong{
	font-weight: 700;
}
@media screen and (max-width: 640px) {
	#magazine-items > li p{
		font-size: 180%;
		white-space: nowrap;
	}
}