@charset "utf-8";

#visual {
	width: 100%;
	margin: 0 auto;
}
#visual .swiper{
	background: #333;
}
#visual .swiper-wrapper{
	margin: 0 auto;
}
#visual .swiper-slide {
	width: 80vw;
	max-width: 1200px;
	transition: all 0.4s ease;
}
#visual .swiper-slide a{
	display: block;
	margin-bottom: -5px;
}
#visual .swiper-slide img{
	width: 100%;
}

#visual .swiper-slide-next ,
#visual .swiper-slide-prev {
	pointer-events: none;
	opacity: 0.5;
}
#visual .swiper-button-next,
#visual .swiper-button-prev {
	color: rgba(255,255,255,0.7);
}
#visual .swiper-button-next:after,
#visual .swiper-button-prev:after {
	font-weight: bold;
}
#visual .swiper-pagination {
}
.swiper-pagination-bullet {
	background: #AAA;
	opacity: 0.9;
}
.swiper-pagination-bullet-active {
	background: #FFF;
}

#news{
	padding: 60px 0;
	line-height: 0;
}
#news h2{
    text-align: left;
    margin: 0 auto 40px;
    font-style: italic;
}
#news ul.tab{
	display: block;
	letter-spacing: -0.4em;
	text-align: left;
	line-height: 0;
	margin: 0 50px 20px;
}
#news ul.tab>li{
	display: inline-block;
	letter-spacing: normal;
	vertical-align: top;
	font-size: 1.5rem;
	line-height: 120%;
	margin: 0 20px 0 0;
	color: #999;
	padding: 0 0 0 15px;
	overflow: hidden;
	font-weight: bold;
	position: relative;
	cursor: pointer;
	transition: 0.3s ease-in-out;
}
#news ul.tab>li:last-child{
	margin-right: 0;
}
#news ul.tab>li::before{
	content: '';
	width: 8px;
	height: 8px;
	background: #666;
	position: absolute;
	top: 5px;
	left: 0px;
	border-radius: 100%;
	transition: 0.3s ease-in-out;
	transform: scale(0);
}
#news ul.tab>li.active,
#news ul.tab>li:hover{
	color: #333;
}
#news ul.tab>li:hover::before,
#news ul.tab>li.active::before{
	transform: scale(1);
}

#news p.link{
    position: absolute;
    top: 14px;
    right: 0;
}
#news p.link>a{
	display: inline-block;
	font-size: 1.5rem;
	line-height: 120%;
	padding: 2px 40px 2px 0;
	color: #333;
	overflow: hidden;
	position: relative;
}
#news p.link>a:hover{
	text-decoration: none;
	color: #666;
}
#news p.link>a::before{
	position: absolute;
	top: 50%;
	right: 0;
	display: block;
	content: '';
	width: 20px;
	height: 20px;
	margin-top: -10px;
	border-radius: 20px;
	border: 1px solid #333;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	overflow: hidden;
}
#news p.link>a:hover::before{
	background: #333;
}
#news p.link>a::after{
	position: absolute;
	top: 50%;
	right: 9px;
	display: block;
	content: '';
	width: 3px;
	height: 3px;
	margin-top: -1.8px;
	border-top: 1px solid #333;
	border-right: 1px solid #333;
	transform: rotate(45deg);
	transition: fill .4s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}
#news p.link>a:hover::after{
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	animation: arw-r .4s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}
#news .tab-area{
	display: none;
}
#news .tab-area>ul{
	display: block;
	border-top: 1px solid #ccc;
}
#news .tab-area>ul>li{
	display: block;
	letter-spacing: -0.4em;
	text-align: left;
	line-height: 0;
	padding: 20px 50px;
	border-bottom: 1px solid #ccc;
}
#news .tab-area>ul>li span{
	display: inline-block;
	letter-spacing: normal;
	vertical-align: middle;
	font-size: 1.5rem;
	line-height: 140%;
	color: #333;
}
#news .tab-area>ul>li a{
	color: #333;
}
#news .tab-area>ul>li span.cat{
	background: #7e989b;
	width: 120px;
	margin: 0 30px 0 0;
	padding: 8px 10px;
	text-align: center;
	color: #FFF;
	font-size: 1.4rem;
	line-height: 120%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 3px;
}
#news .tab-area>ul>li span.date{
	margin: 6px 40px 0 0;
	font-family: 'Roboto', sans-serif;
}
#news .tab-area>ul>li span.tit{
	max-width: 840px;
}

#banner{
	padding: 60px 0;
	line-height: 0;
}
#banner ul{
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    letter-spacing: -0.4em;
	text-align: left;
	line-height: 0;
}
#banner ul + ul{
    margin: 30px 0 0;
}
#banner ul>li{
	letter-spacing: normal;
	vertical-align: top;
}
#banner ul>li:last-child{
}
#banner ul>li>a{
	display: block;
	text-align: center;
}
#banner ul>li>a:hover{
	text-decoration: none;
}
#banner ul>li span{
	display: block;
}
#banner ul>li span.img{
	margin: 0 auto 20px;
	overflow: hidden;
}
#banner ul>li span.img img{
	transition: 0.3s ease-in-out;
	border: 3px solid #f2f1f0;
    box-sizing: border-box;
}
#banner ul>li>a:hover span.img img{
	transform: scale(1.1);
}
#banner ul>li span.tx{
	font-size: 1.8rem;
    font-weight: bold;
	line-height: 160%;
	color: #555;
	transition: 0.3s ease-in-out;
}
#banner ul>li>a:hover span.tx{
	opacity: 0.7;
}

#concept{
	padding: 60px 0 0;
	line-height: 0;
	background: #FBFBFB url('../img/index/concept_bg.png') center bottom no-repeat;
	background-size: 1920px auto;
	text-align: left;
	overflow: hidden;
}
	@media screen and (min-width:1920px){
		#concept{background-size: cover !important;}
	}
	
.inner h2{
	font-size: 4.2rem;
	line-height: 120%;
	font-weight: 500;
	color: #333;
}
#concept>.inner{
	padding-left: 80px;
	padding-bottom: 220px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
#concept h2{
	margin: 0 auto 90px;
	font-style: italic;
}
#concept h2>small{
	display: block;
	font-size: 1.5rem;
	font-weight: normal;
	line-height: 120%;
	padding: 10px 0 0;
}
#concept .image{
	display: block;
	letter-spacing: -0.4em;
	text-align: left;
	line-height: 0;
	position: absolute;
	top: 0;
	right: -180px;
	z-index: 2;
}
#concept .image>p{
	display: inline-block;
	letter-spacing: normal;
	vertical-align: top;
	width: 310px;
	margin: 0 15px 0 0;
	position: relative;
}
#concept .image>p.img1{
	margin-top: 135px;
}
#concept .image>p.img2{
	margin-right: 0;
}
#concept .image>p span{
	display: block;
}
#concept .image>p span.i2{
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}
#concept .image img{
	border-radius: 10px;
}
#concept p.t{
	font-size: 5.0rem;
	font-weight: normal;
	line-height: 120%;
	font-family: 'Roboto', sans-serif;
	margin: 0 auto 20px;
	color: #977961;
	font-style: italic;
}
#concept p.t small{
	display: block;
	font-size: 2.5rem;
	padding: 0 0 0 40px;
	font-family: "Noto Sans JP","游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
}
#concept p.tx{
	font-size: 1.5rem;
	line-height: 240%;
	color: #333;
}
#concept p.t2{
	font-size: 9rem;
	font-weight: 100;
	line-height: 100%;
	font-family: 'Roboto', sans-serif;
	margin: 0 auto;
	color: #c4bba9;
	position: absolute;
	bottom: -5px;
	left: 80px;
}
#concept .text{
	display: flex;
	position: absolute;
	top: -50px;
	right: -80px;
	z-index: 1;
	flex-direction: column-reverse;
	height: 100%;
	white-space: nowrap;
	pointer-events: none;
	writing-mode: vertical-lr;
	color: #e2ddce;
	text-align: left;
}
#concept .text>span{
	font-size: 9rem;
	line-height: 90%;
	font-weight: 100;
	font-family: 'Roboto', sans-serif;
	display: block;
}
#concept .text>span:nth-child(1){
	animation: loop-l1 20s linear 0s infinite;
}
#concept .text>span:nth-child(2){
	animation: loop-l2 32s linear 0s infinite;
}
#concept .text>span:nth-child(3){
	animation: loop-l3 26s linear 0s infinite;
}
#concept .text>span:nth-child(4){
	animation: loop-l4 18s linear 0s infinite;
	transform: translateY(-1805px)
}
@keyframes loop-l1 {
	0% {
		transform: translateY(-585px)
	}

	to {
		transform: translateY(-1378px)
	}
}
@keyframes loop-l2 {
	0% {
		transform: translateY(-1805px)
	}

	to {
		transform: translateY(-615px)
	}
}
@keyframes loop-l3 {
	0% {
		transform: translateY(-110px)
	}

	to {
		transform: translateY(-903px)
	}
}
@keyframes loop-l4 {
	0% {
		transform: translateY(-1995px)
	}

	to {
		transform: translateY(-925px)
	}
}

#material{
    margin: 0 0 40px;
	padding: 60px 0;
	overflow: hidden;
	line-height: 0;
	background: #f2f1f0;
}
#material .text{
	padding: 0 0 0;
	text-align: center;
	margin: 0 auto 40px;
}
#material .text.stop{
	top: initial;
	bottom: 0;
}
#material .text.fixed{
	position: fixed;
	top: 93px;
}
body.v2 #material .text.fixed{
	top: 138px;
}
#material .text h2{
	margin: 0 auto 40px;
	font-style: italic;
}
#material .text h2>small{
	display: block;
	font-size: 1.4rem;
	font-weight: normal;
	line-height: 120%;
	padding: 10px 0 0;
}
#material .text p.tx{
	font-size: 1.5rem;
	line-height: 220%;
	color: #333;
}
#material .text p.tx strong{
	display: block;
	font-size: 1.6rem;
}
#material ul{
	display: block;
	letter-spacing: -0.4em;
	text-align: center;
	line-height: 0;
}
#material ul>li{
	display: inline-block;
	letter-spacing: normal;
	vertical-align: top;
	width: 187px;
	margin: 0 15px 15px 0;
	border-radius: 14px;
	background: #f5f7f7;
	padding: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
	box-shadow: 3px 3px 15px rgba(0,0,0,0.05);
}
#material ul>li:last-child{
	margin-right: 0;
}
#material ul>li a{
	display: block;
	line-height: 0;
	padding: 30px 20px;
}
#material ul>li a:hover{
	text-decoration: none;
}
#material ul>li span{
	display: block;
	text-align: center;
}
#material ul>li span.num{
	font-size: 5.2rem;
	line-height: 100%;
	color: #c9d5d5;
	font-weight: 500;
	font-style: italic;
	padding: 0;
	margin: 0 auto 10px;
}
#material ul>li span.tit{
	font-size: 2.0rem;
	font-weight: 500;
	line-height: 140%;
	color: #333;
	margin: 0 auto 20px;
	padding: 0;
	position: relative;
	font-family: 'Roboto', sans-serif;
	font-style: italic;
}
#material ul>li span.tit small{
	display: block;
	font-size: 1.4rem;
	line-height: 120%;
	font-weight: 500;
    color: #888;
}
#material ul>li span.img{
	width: 100%;
	line-height: 0;
	border-radius: 100%;
	overflow: hidden;
	margin: 0 auto;
}
#material ul>li span.img img{
	width: 100%;
	height: auto;
	transition: 0.3s ease-in-out;
}
#material ul>li:hover span.img img{
	transform: scale(1.1);
}
#material ul>li span.tx{
	font-size: 1.4rem;
	line-height: 220%;
	color: #333;
	margin: 0 auto;
	text-align: left;
}
#material ul>li span.over{
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(51, 51, 51, 0.7);
	padding: 30px 15px;
	transition: 0.3s ease-in-out;
}
#material ul>li span.over .num,
#material ul>li span.over .tit{
	color: rgba(255, 255, 255, 0.7);
}
#material ul>li span.over .tx{
	line-height: 160%;
	color: #fff;
}
#material ul>li:hover{
	transform: translate(0px, -20px);
}
#material ul>li:hover span.over{
	opacity: 1;
}

#bg{
	position: relative;
	width: auto;
	max-height: 350px;
	line-height: 0;
	overflow: hidden;
}
#bg>p.image{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;
}
#bg>p.img{
	position: relative;
	line-height: 0;
	z-index: 1;
}
#bg img{
	width: 100%;
	height: auto;
}

#bg2{
	position: relative;
	width: auto;
	height: 250px;
	line-height: 0;
	overflow: hidden;
}
#bg2>p.image{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
}
#bg2 img{
	width: 100%;
	height: auto;
}

#lineup{
    margin: 0 0 40px;
	padding: 60px 0;
	background: #f2f1f0;
	line-height: 0;
}
#lineup h2{
	margin: 0 auto 40px;
	text-align: left;
	font-style: italic;
}
#lineup ul.tab{
	display: block;
	letter-spacing: -0.4em;
	text-align: left;
	line-height: 0;
	position: absolute;
	top: 5px;
	right: 0;
}
#lineup ul.tab>li{
	display: inline-block;
	letter-spacing: normal;
	vertical-align: top;
	font-size: 1.5rem;
	line-height: 100%;
	padding: 15px;
	width: 170px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border: 1px solid #666;
	color: #333;
	background: #fff;
	text-align: center;
	font-weight: bold;
	cursor: pointer;
	margin: 0 10px 0 0;
	border-radius: 28px;
	overflow: hidden;
}
#lineup ul.tab>li:last-child{
	margin-right: 0;
}
#lineup ul.tab>li.active,
#lineup ul.tab>li:hover{
	background: #333;
	color: #fff;
}
#lineup ul.tab>li>span{
	display: inline-block;
	transition: fill .3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}
#lineup ul.tab>li:hover>span,
#lineup ul.tab>li.active>span{
	animation: arw .3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}
@keyframes arw{
	0% {
		transform: translateY(0);
		opacity: 1
	}

	50% {
		transform: translateY(100%);
		opacity: 0
	}

	50.1% {
		transform: translateY(-100%);
		opacity: 0
	}

	100% {
		transform: translateY(0);
		opacity: 1
	}
}

#lineup p.btn{
    margin-top: -50px;
}
#lineup p.btn>a{
	display: inline-block;
	font-size: 1.4rem;
	line-height: 100%;
	color: #fff;
	font-weight: bold;
	background: #333;
	border-radius: 10px;
	padding: 17px 70px;
	transition: 0.3s ease-in-out;
}
#lineup p.btn>a:hover{
	opacity: 0.7;
	text-decoration: none;
}
#lineup p.btn>a>span{
	display: inline-block;
	padding: 0 0 0 20px;
	position: relative;
}
#lineup p.btn>a>span::before{
	position: absolute;
	top: 50%;
	left: 0px;
	display: block;
	content: '';
	width: 4px;
	height: 4px;
	margin-top: -2px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	transform: rotate(45deg);
	transition: 0.3s ease-in-out;
}
#lineup p.btn>a:hover>span::before{
	left: 2px;
}
#lineup .tab-area{
	display: none;
}

#lineup .swiper{
	overflow: inherit;
}
#lineup .swiper-wrapper{
	margin: 0 auto 120px;
}
#lineup .swiper-slide{
	width: 265px;
	margin: 0 auto;
}
#lineup .swiper-slide>a{
	display: block;
	line-height: 0;
}
#lineup .swiper-slide>a:hover{
	text-decoration: none;
}
#lineup .swiper-slide span{
	display: block;
	text-align: center;
}
#lineup .swiper-slide span.img{
	margin: 0 auto 20px;
	overflow: hidden;
	border-radius: 10px;
	background: rgba(255,255,255,0.4);
	transition: all 0.5s ease;
}
#lineup .swiper-slide.swiper-slide-active span.img,
#lineup .swiper2 .swiper-slide span.img{
	background: rgba(255,255,255,0.9);
	box-shadow: 0px 3px 10px rgba(0,0,0,0.05);
}

#lineup .swiper-slide span.img img{
	width: 100%;
	height: auto;
	transition: 0.3s ease-in-out;
	opacity: 0.7;
}
#lineup .swiper-slide.swiper-slide-active span.img img,
#lineup .swiper2 .swiper-slide span.img img{
	opacity: 1.0;
}

#lineup .swiper-slide a:hover span.img img{
	transform: scale(1.1);
}


#lineup .swiper-slide span.t{
	color: #666;
	font-size: 1.5rem;
	line-height: 140%;
	margin: 0 auto;
	transition: 0.3s ease-in-out;
}
#lineup .swiper-slide.swiper-slide-active span.t,
#lineup .swiper2 .swiper-slide span.t{
	color: #444;
	font-weight: bold;
}

#lineup .swiper-slide a:hover span.t{
	color: #666;
}
#lineup .swiper-btn{
	display: block;
	max-width: 975px;
	margin: 0 auto;
	line-height: 0;
	position: relative;
}
#lineup .swiper-btn .swiper-button-prev,
#lineup .swiper-btn .swiper-button-next{
	display: inline-block;
	letter-spacing: normal;
	vertical-align: top;
	width: 59px;
	height: 59px;
	background: #555;
    opacity: 0.7;
	border: 2px solid #f7f7f6;
	position: absolute;
	top: -330px;
	margin: 0;
	transition: 0.3s ease-in-out;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 100%;
}
#lineup .swiper-btn .swiper-button-prev{
	left: 0;
}
#lineup .swiper-btn .swiper-button-next{
	right: 0;
}
#lineup .swiper-btn .swiper-button-prev::after,
#lineup .swiper-btn .swiper-button-next::after{
	position: absolute;
	top: 50%;
	display: block;
	content: '';
	width: 12px;
	height: 12px;
	margin-top: -6px;
	border-top: 1px solid #FFF;
	border-right: 1px solid #FFF;
}
#lineup .swiper-btn .swiper-button-prev::after{
	left: 22px;
	transform: rotate(-135deg);
}
#lineup .swiper-btn .swiper-button-next::after{
	right: 22px;
	transform: rotate(45deg);
}
#lineup .swiper-btn .swiper-button-prev:hover,
#lineup .swiper-btn .swiper-button-next:hover{
	background: #333;
}
#lineup .swiper-btn .swiper-button-prev:hover::after,
#lineup .swiper-btn .swiper-button-next:hover::after{
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
}

#campaign{
	padding: 60px 0;
	background: #fff;
	line-height: 0;
}
#campaign h2{
	text-align: left;
	margin: 0 auto 40px;
	font-style: italic;
}
#campaign p.link{
	position: absolute;
	top: 14px;
	right: 0;
}
#campaign p.link>a{
	display: inline-block;
	font-size: 1.5rem;
	line-height: 120%;
	padding: 2px 40px 2px 0;
	color: #333;
	overflow: hidden;
	position: relative;
}
#campaign p.link>a:hover{
	text-decoration: none;
	color: #666;
}
#campaign p.link>a::before{
	position: absolute;
	top: 50%;
	right: 0;
	display: block;
	content: '';
	width: 20px;
	height: 20px;
	margin-top: -10px;
	border-radius: 20px;
	border: 1px solid #333;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	overflow: hidden;
}
#campaign p.link>a:hover::before{
	background: #333;
}
#campaign p.link>a::after{
	position: absolute;
	top: 50%;
	right: 9px;
	display: block;
	content: '';
	width: 3px;
	height: 3px;
	margin-top: -1.8px;
	border-top: 1px solid #333;
	border-right: 1px solid #333;
	transform: rotate(45deg);
	transition: fill .4s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}
#campaign p.link>a:hover::after{
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	animation: arw-r .4s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}
@keyframes arw-r{
	0% {
		transform: matrix3d(1,0,0.00,0,0.00,0.71,0.71,0,0,-0.71,0.71,0,0,0,0,1);
	}

	50% {
		transform: matrix3d(1,0,0.00,0,0.00,0.71,0.71,0,0,-0.71,0.71,0,20,0,0,1);
	}

	50.1% {
		transform: matrix3d(1,0,0.00,0,0.00,0.71,0.71,0,0,-0.71,0.71,0,-20,0,0,1);
	}

	100% {
		transform: matrix3d(1,0,0.00,0,0.00,0.71,0.71,0,0,-0.71,0.71,0,0,0,0,1);
	}
}

#campaign .swiper{
	padding: 0 15px;
}
#campaign .swiper-wrapper{
	margin: 0 auto;
}
#campaign .swiper-slide{
	width:33%;
}
#campaign .swiper a{
	display: block;
	line-height: 0;
}
#campaign .swiper a:hover{
	text-decoration: none;
}
#campaign .swiper span{
	display: block;
	text-align: left;
}
#campaign .swiper span.img{
	width: 100%;
	height: 250px;
	margin: 0 auto 20px;
	overflow: hidden;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
#campaign .swiper span.img img{
	width: 100%;
	transition: 0.3s ease-in-out;
}
#campaign .swiper a:hover span.img img{
	transform: scale(1.1);
}
#campaign .swiper span.img.close::after{
	content: '';
	background: rgba(0, 0, 0, 0.3);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;;
}
#campaign .swiper span.img>i{
	position: absolute;
	top: 11px;
	left: -41px;
	font-size: 1.2rem;
	font-style: normal;
	line-height: 100%;
	padding: 8px 50px 10px;
	background: #ce0000;
	color: #fff;
	transform: rotate(-30deg);
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
	z-index: 2;
}
#campaign .swiper span.t{
	color: #333;
	font-size: 1.7rem;
	line-height: 150%;
	margin: 0 auto 5px;
	font-weight: bold;
	transition: 0.3s ease-in-out;
}
#campaign .swiper a:hover span.t{
	color: #666;
}
#campaign .swiper span.tx{
	color: #666;
	font-size: 1.4rem;
	line-height: 180%;
	margin: 0 auto 5px;
	transition: 0.3s ease-in-out;
}
#campaign .swiper a:hover span.tx{
	color: #999;
}
#campaign .swiper span.date{
	color: #333;
	font-size: 1.5rem;
	line-height: 140%;
	font-family: 'Roboto', sans-serif;
	transition: 0.3s ease-in-out;
}
#campaign .swiper a:hover span.date{
	color: #666;
}


#campaign .swiper-btn,
#column .swiper-btn{
	text-align: right;
}
#campaign .swiper-btn .swiper-button-prev,
#campaign .swiper-btn .swiper-button-next,
#column .swiper-btn .swiper-button-prev,
#column .swiper-btn .swiper-button-next{
	display: inline-block;
	letter-spacing: normal;
	vertical-align: top;
	width: 40px;
	height: 40px;
	background: #999;
	position: relative;
	top: initial;
	left: initial;
	right: initial;
	margin: 0 10px 0 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 100%;
	text-indent: -9999px;
	overflow: hidden;
}
#campaign .swiper-btn .swiper-button-prev:after,
#campaign .swiper-btn .swiper-button-next:after,
#column .swiper-btn .swiper-button-prev:after,
#column .swiper-btn .swiper-button-next:after{
	font-size:20px;
	color: #EEE;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -10px;
    margin-left: 3px;
}
#campaign .swiper-btn .swiper-button-next:after,
#column .swiper-btn .swiper-button-next:after{
    margin-left: 7px;
}

#column{
	padding: 60px 0;
	line-height: 0;
}
#column h2{
	text-align: left;
	margin: 0 auto 40px;
	font-style: italic;
}
#column p.link{
	position: absolute;
	top: 14px;
	right: 0;
}
#column p.link>a{
	display: inline-block;
	font-size: 1.4rem;
	line-height: 120%;
	padding: 2px 40px 2px 0;
	color: #333;
	overflow: hidden;
	position: relative;
}
#column p.link>a:hover{
	text-decoration: none;
	color: #666;
}
#column p.link>a::before{
	position: absolute;
	top: 50%;
	right: 0;
	display: block;
	content: '';
	width: 20px;
	height: 20px;
	margin-top: -10px;
	border-radius: 20px;
	border: 1px solid #333;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	overflow: hidden;
}
#column p.link>a:hover::before{
	background: #333;
}
#column p.link>a::after{
	position: absolute;
	top: 50%;
	right: 9px;
	display: block;
	content: '';
	width: 3px;
	height: 3px;
	margin-top: -1.8px;
	border-top: 1px solid #333;
	border-right: 1px solid #333;
	transform: rotate(45deg);
	transition: fill .4s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}
#column p.link>a:hover::after{
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	animation: arw-r .4s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}
#column .swiper-wrapper{
	letter-spacing: -0.4em;
	text-align: left;
	line-height: 0;
}
#column .swiper-wrapper > div{
	display: inline-block;
	letter-spacing: normal;
	vertical-align: top;
	width: 33%;
	/*width:380px;*/
	margin: 0 0 60px;
}
#column .swiper-wrapper > div:nth-child(3n){
	margin-right: 0;
}
#column .swiper a{
	display: block;
}
#column .swiper a:hover{
	text-decoration: none;
}
#column .swiper span{
	display: block;
	text-align: left;
}
#column .swiper span.img{
	width: 100%;
	height: 250px;
	margin: 0 auto 20px;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}
#column .swiper span.img img{
	width: 100%;
	transition: 0.3s ease-in-out;
}
#column .swiper a:hover span.img img{
	transform: scale(1.1);
}
#column .swiper span.tx{
	font-size: 1.5rem;
	line-height: 200%;
	margin: 0 auto 10px;
	color: #333;
	font-weight: bold;
	transition: 0.3s ease-in-out;
}
#column .swiper span.date{
	font-size: 1.5rem;
	line-height: 140%;
	font-family: 'Roboto', sans-serif;
	margin: 0 auto 10px;
	color: #333;
	transition: 0.3s ease-in-out;
}
#column .swiper a:hover span.tx,
#column .swiper a:hover span.date{
	color: #666;
}
#column .swiper span.cat{
	margin: 0 auto;
}
#column .swiper span.cat i{
	display: inline-block;
	font-size: 1.3rem;
	color: #FFF;
	line-height: 100%;
	padding: 8px 0 9px;
	text-align: center;
	font-style: normal;
	border-radius: 4px;
	width: 88px;
}
#column .swiper span.cat i.c{
	background: #c96375;
}
#column .swiper span.cat i.t{
	background: #e4f2f9;
}
#column .swiper span.cat i.r{
	background: #f4ebe6;
}


#first-guide{
    background: #f5f7f7;
	margin: 0 0 40px;
    padding: 60px 0;
	line-height: 0;
}
#first-guide h2{
	text-align: center;
	margin: 0 auto 50px;
	font-style: italic;
}
#first-guide h2>small{
	display: block;
	font-size: 1.5rem;
	font-weight: normal;
	line-height: 120%;
	padding: 10px 0 0;
}
#first-guide ul{
	display: block;
	letter-spacing: -0.4em;
	text-align: left;
	line-height: 0;
}
#first-guide ul>li{
	display: inline-block;
	letter-spacing: normal;
	vertical-align: top;
	width: 48.7%;
	margin: 0 30px 0 0;
}
#first-guide ul>li:last-child{
	margin-right: 0;
}
#first-guide ul>li>a{
	display: block;
	background: #FFF;
	padding: 55px 30px 60px;
	transition: 0.3s ease-in-out;
	position: relative;
}
#first-guide ul>li>a:hover{
	text-decoration: none;
    opacity: 0.6;
}
#first-guide ul>li>a::before{
	content: '01';
	position: absolute;
	top: 0;
	left: 0;
	font-size: 1.6rem;
	line-height: 100%;
	color: #fff;
	font-weight: bold;
	background: #000;
	display: inline-block;
	padding: 8px 9px 10px;
}
#first-guide ul>li:nth-child(2)>a::before{
	content: '02';
}
#first-guide ul>li:nth-child(3)>a::before{
	content: '03';
}
#first-guide ul>li span{
	display: block;
}
#first-guide ul>li span.img{
	overflow: hidden;
	margin: 0 auto 20px;
}
#first-guide ul>li span.img img{
	transition: 0.3s ease-in-out;
}
#first-guide ul>li>a:hover span.img img{
	transform: scale(1.1);
}
#first-guide ul>li span.tit{
	font-size: 2.4rem;
    font-weight: bold;
	color: #333;
	line-height: 150%;
	margin: 0 auto 5px;
	transition: 0.3s ease-in-out;
}
#first-guide ul>li span.tit.blank:after{
    display: inline-block;
    content: "";
    background:url(/img/icn/_blank2.svg) no-repeat right top;
    width: 18px;
    height: 18px;
    padding-left: 10px;
}

#first-guide ul>li span.tx{
	font-size: 1.6rem;
	color: #666;
	line-height: 200%;
	margin: 0 auto;
	transition: 0.3s ease-in-out;
}
#first-guide ul>li>a:hover span.tit,
#first-guide ul>li>a:hover span.tx{
	opacity: 0.7;
}

#ranking{
	padding: 100px 0;
	background: #f2f1f0;
	line-height: 0;
	overflow: hidden;
}
#ranking h2{
	text-align: left;
	margin: 0 auto;
	font-style: italic;
}
#ranking h2>small{
	display: block;
	font-size: 1.4rem;
	font-weight: normal;
	line-height: 120%;
	padding: 10px 0 0;
}
#ranking ul.tab{
	display: block;
	letter-spacing: -0.4em;
	text-align: left;
	line-height: 0;
	position: absolute;
	top: 40px;
	right: 0;
}
#ranking ul.tab>li{
	display: inline-block;
	letter-spacing: normal;
	vertical-align: top;
	font-size: 1.4rem;
	line-height: 100%;
	padding: 4px 10px 6px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	color: #999;
	text-align: center;
	cursor: pointer;
	margin: 0 14px 0 0;
	position: relative;
}
#ranking ul.tab>li:last-child{
	margin-right: 0;
}
#ranking ul.tab>li::after{
	content: '|';
	position: absolute;
	top: 3px;
	right: -9px;
	font-weight: normal;
	color: #999;
}
#ranking ul.tab>li:last-child::after{
	content: none;
}
#ranking ul.tab>li.active,
#ranking ul.tab>li:hover{
	background: #333;
	color: #fff;
	font-weight: bold;
}
#ranking ul.tab>li.active::after,
#ranking ul.tab>li:hover::after{
	color: #999;
}
#ranking ul.tab>li>span{
	display: inline-block;
	transition: fill .3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}
#ranking ul.tab>li:hover>span,
#ranking ul.tab>li.active>span{
	animation: arw .3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}
@keyframes arw{
	0% {
		transform: translateY(0);
		opacity: 1
	}

	50% {
		transform: translateY(100%);
		opacity: 0
	}

	50.1% {
		transform: translateY(-100%);
		opacity: 0
	}

	100% {
		transform: translateY(0);
		opacity: 1
	}
}
#ranking p.btn{
	display: block;
	margin: 0 auto;
	text-align: center;
	letter-spacing: normal;
}
#ranking p.btn>a{
	display: inline-block;
	padding: 16px 60px 18px;
	line-height: 100%;
	border: 1px solid #666;
	border-radius: 10px;
	color: #333;
	background: #fff;
	transition: 0.3s ease-in-out;
}
#ranking p.btn>a::before,
#ranking p.btn>a::after{
	content: none !important;
}
#ranking p.btn>a.icn{
	padding: 12px 20px 12px 30px;
}
#ranking p.btn>a:hover{
	background: #333;
	color: #fff;
}
#ranking p.btn>a>span{
	display: inline-block;
	font-size: 1.4rem;
	line-height: 100%;
	position: relative;
	padding: 0 0 0 20px;
}
#ranking #rank-slider p.btn>a.icn>span img,
#ranking #rank-sp-slider p.btn>a.icn>span img{
	width: 148px;
	height: auto;
}
#ranking p.btn>a>span::before{
	position: absolute;
	top: 50%;
	left: 0px;
	display: block;
	content: '';
	width: 4px;
	height: 4px;
	margin-top: -2px;
	border-top: 1px solid #333;
	border-right: 1px solid #333;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	transition: 0.3s ease-in-out;
}
#ranking p.btn>a:hover>span::before{
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
}
#ranking p.btn:hover img{
	transform: scale(1);
}

#ranking .tab-area{
	display: none;
}
#ranking .swiper{
	padding-top: 40px;
}
#ranking .swiper-wrapper{
	margin: 0 auto 50px;
}
#ranking .swiper-slide{
	width: 285px;
	margin: 0;
}
#ranking .swiper-slide>a{
	display: block;
	line-height: 0;
	transition: 0.3s ease-in-out;
}
#ranking .swiper-slide>a:hover{
	text-decoration: none;
	transform: translate(0,-10px);
}
#ranking .swiper-slide span{
	display: block;
	text-align: center;
}
#ranking .swiper-slide span.img{
	margin: 0 auto 20px;
	overflow: hidden;
	background: #fff;
}
#ranking .swiper-slide span.img img{
	width: 100%;
	height: auto;
}
#ranking .swiper-slide span.t{
	color: #333;
	font-size: 1.2rem;
	line-height: 140%;
	margin: 0 auto;
	transition: 0.3s ease-in-out;
}
#ranking .swiper-slide a:hover span.t{
	color: #666;
}
#ranking .swiper-btn{
	display: block;
	max-width: 975px;
	margin: 0 auto;
	line-height: 0;
	position: relative;
}
#ranking .swiper-btn .swiper-button-prev,
#ranking .swiper-btn .swiper-button-next{
	display: inline-block;
	letter-spacing: normal;
	vertical-align: top;
	width: 59px;
	height: 59px;
	background: #fff;
	border: 1px solid #ccc;
	position: absolute;
	top: -250px;
	margin: 0;
	transition: 0.3s ease-in-out;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 100%;
}
#ranking .swiper-btn .swiper-button-prev{
	left: 0;
}
#ranking .swiper-btn .swiper-button-next{
	right: 0;
}
#ranking .swiper-btn .swiper-button-prev::after,
#ranking .swiper-btn .swiper-button-next::after{
	position: absolute;
	top: 50%;
	display: block;
	content: '';
	width: 12px;
	height: 12px;
	margin-top: -6px;
	border-top: 1px solid #333;
	border-right: 1px solid #333;
}
#ranking .swiper-btn .swiper-button-prev::after{
	left: 25px;
	transform: rotate(-135deg);
}
#ranking .swiper-btn .swiper-button-next::after{
	right: 25px;
	transform: rotate(45deg);
}
#ranking .swiper-btn .swiper-button-prev:hover,
#ranking .swiper-btn .swiper-button-next:hover{
	background: #333;
}
#ranking .swiper-btn .swiper-button-prev:hover::after,
#ranking .swiper-btn .swiper-button-next:hover::after{
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
}

#instagram{
	margin: 0 0 40px;
    padding: 60px 0;
	line-height: 0;
}
#instagram h2{
	text-align: center;
	line-height: 0;
	margin: 0 auto 55px;
}
#instagram h2 img{
	width: 40px;
	height: auto;
}
#instagram ul.archive{
	display: block;
	letter-spacing: -0.4em;
	text-align: left;
	line-height: 0;
	margin: 0 auto 40px;
}
#instagram ul.archive>li{
	display: inline-block;
	letter-spacing: normal;
	vertical-align: top;
	width: 270px;
	margin: 0 40px 0 0;
	overflow: hidden;
}
#instagram ul.archive>li:last-child{
	margin-right: 0;
}
#instagram ul.archive>li img{
	width: 100%;
	height: auto;
	transition: 0.3s ease-in-out;
}
#instagram ul.archive>li>a:hover img{
	transform: scale(1.1);
}
#instagram p.link{
	text-align: right;
	margin: 0;
	line-height: 0;
}
#instagram p.link>a{
	display: inline-block;
	font-size: 1.4rem;
	line-height: 120%;
	padding: 2px 40px 2px 0;
	color: #333;
	overflow: hidden;
	position: relative;
}
#instagram p.link>a:hover{
	text-decoration: none;
	color: #666;
}
#instagram p.link>a::before{
	position: absolute;
	top: 50%;
	right: 0;
	display: block;
	content: '';
	width: 20px;
	height: 20px;
	margin-top: -10px;
	border-radius: 20px;
	border: 1px solid #333;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	overflow: hidden;
}
#instagram p.link>a:hover::before{
	background: #333;
}
#instagram p.link>a::after{
	position: absolute;
	top: 50%;
	right: 9px;
	display: block;
	content: '';
	width: 3px;
	height: 3px;
	margin-top: -1.8px;
	border-top: 1px solid #333;
	border-right: 1px solid #333;
	transform: rotate(45deg);
	transition: fill .4s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}
#instagram p.link>a:hover::after{
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	animation: arw-r .4s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}


@media all and (max-width: 767px) {
	#visual {
		height: 100vw;
	}
	#visual .swiper-slide{
		width: 100%;
	}
	#visual .swiper-slide a{
		margin-bottom: -1px;
	}
	#visual .swiper-button-next:after,
	#visual .swiper-button-prev:after {
		font-weight: normal;
	}

}

@media screen and (min-width:768px){

	#ranking .flexslider{
		overflow: visible;
	}
	#ranking #rank-sp-slider{
		display: none;
	}

}

@media screen and (max-width:767px){
	
	.inner h2{
		font-size: 2.8rem;
	}

	#bg2 {
		height: 150px;
	}

	#news{
		padding: 30px 0;
	}
	#news ul.tab{
		margin: 0 auto 20px;
		overflow-x: auto;
		display: flex;
		letter-spacing: normal;
	}
	#news ul.tab>li{
		margin: 0 0 15px;
		padding: 5px;
		font-size: 1.2rem;
		border-bottom: 3px solid #FFF;
        white-space: nowrap;
		overflow: visible;
		transition: all 0.2s ease;
	}
	#news ul.tab>li+li{
		margin-left: 5px;
	}
	#news ul.tab>li.active{
		border-bottom: 3px solid #7e989b;
	}
	#news ul.tab>li::before{
		top: 4px;
		display: none;
	}
	#news .tab-area{
		margin: 0 auto 30px;
	}
	#news .tab-area>ul>li{
		padding: 20px 15px;
	}

	#news .tab-area>ul>li span.cat{
		display: table-cell;
		vertical-align: middle;
		width: auto;
        font-size: 1.3rem;
	}
	#news .tab-area>ul>li span.date{
		display: table-cell;
		padding: 5px 0 0 20px;
		margin: 0;
        font-size: 1.4rem;
	}
	#news .tab-area>ul>li span.tit{
		display: block;
		width: auto;
		max-width: 100%;
		margin-top: 15px;
	}
	#news p.link{
		top: 10px;
	}

	#banner{
		padding: 30px 0;
	}
    #banner ul {
        display: block;
    }
	#banner ul>li{
		margin: 0 auto 40px;
	}
	#banner ul>li:last-child{
		margin-bottom: 0;
	}

	#concept{
		padding: 50px 0 0;
		background-position: left 20% top 280px;
		background-size: auto 80%;
	}
	#concept>.inner{
		padding: 0 20px 80px;
	}
	#concept h2{
		margin-bottom: 0;
	}
	#concept .image{
		position: relative;
		top: 0;
		right: 0;
		margin: -40px auto 30px;
	}
	#concept .image>p{
		width: 48%;
		margin-right: 4%;
	}
	#concept .image>p.img1{
		margin-top: 65px;
	}
	#concept .image>p.img2{
		margin-right: 0;
	}
	#concept p.tx{
        line-height: 200%;
	}
	#concept p.t {
		font-size: 4.4rem;
	}
	#concept p.t small {
		padding-left: 220px;
		font-size: 1.8rem;
	}
	#concept p.t2{
		font-size: 4.8rem;
		left: 20px;
		bottom: -5px;
	}
	#concept .text{
		top: -80px;
		right: -70px;
		height: 510px;
		overflow: hidden;
	}
	#concept .text>span{
		font-size: 4.8rem;
	}

	#material{
        margin: 0;
		padding: 50px 0 40px;
	}
	#material .text{
		position: static;
		margin: 0 auto 40px;
		width: auto;
	}
	#material .text h2{
		margin-bottom: 30px;
	}
	#material ul{
		width: auto;
	}
	#material ul>li{
		display: block;
		width: auto;
		padding: 0;
		margin: 0 auto 15px;
	}
	#material ul>li>a{
		display: block;
		letter-spacing: -0.4em;
		text-align: left;
		line-height: 0;
		padding: 20px 15px;
	}
	#material ul>li>a>span{
		display: inline-block;
		letter-spacing: normal;
		vertical-align: middle;
	}
	#material ul>li>a>span.normal{
		width: 28%;
	}
	#material ul>li>a>span.normal .num,
	#material ul>li>a>span.normal .tit{
		display: none;
	}
	#material ul>li>a>span.over{
		width: 65%;
		margin: 0 0 0 7%;
		position: static;
		opacity: 1;
		background: none;
		padding: 0;
		text-align: left;
	}
	#material ul>li>a>span.over span.num{
		display: inline-block;
		vertical-align: top;
		font-size: 4.4rem;
		color: #c9d5d5;
		margin: 0 10px 0 0;
		line-height: 100%;
	}
	#material ul>li>a>span.over span.tit{
		display: inline-block;
		vertical-align: top;
		color: #333;
		margin: 0 auto;
		font-size: 2.2rem;
	}
	#material ul>li>a>span.over span.tit small{
		font-size: 1.2rem;
		text-align: left;
	}
	#material ul>li span.over .tx{
		padding: 10px 0 0;
		color: #333;
	}

	#lineup{
		padding: 50px 0 80px;
	}
	#lineup .inner{
		padding: 0 10px;;
	}
	#lineup h2{
		margin-bottom: 40px;
		margin-left: 10px;
	}
	#lineup ul.tab{
		position: static;
		margin: 0 auto 20px;
		display: flex;
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
	}
	#lineup ul.tab>li{
		font-size: 1.2rem;
		padding: 12px 5px;
		/* width: 115px; */
		margin: 0 5px 10px 0;
		flex-grow: 3;
        width: 30%;
	}
	#lineup ul.tab>li:nth-child(3n){
		margin-right: 0;
	}
	#lineup .swiper-wrapper{
		margin-bottom: 40px;
	}
	#lineup .swiper-slide{
		text-align: center;
		margin: 0;
		width: 50vw;
	}
	#lineup .swiper-btn{
		width: 85%;
	}
	#lineup .swiper-btn .swiper-button-prev,
	#lineup .swiper-btn .swiper-button-next{
		top: -200px;
		width: 50px;
		height: 50px;
	}
	#lineup .swiper-btn .swiper-button-prev::after{
		left: 20px;
	}
	#lineup .swiper-btn .swiper-button-next::after{
		right: 20px;
	}
	#lineup div[data=agaricus] .swiper-wrapper {
		justify-content:center;
	}
	#lineup div[data=astaxanthin] .swiper-wrapper {
		justify-content:center;
	}
	#lineup div[data=plasmalogen] .swiper-wrapper {
		justify-content:center;
	}
	#lineup div[data=anserine] .swiper-wrapper {
		justify-content:center;
	}
    
    #lineup p.btn {
        margin: 0;
    }

	#campaign{
        padding: 0 0 30px;
	}
	#campaign .swiper-slide,
	#column .swiper-slide{
		width:100% !important;
	}
	
	#campaign .swiper span.img{
		height: 210px;
	}
	#campaign .swiper span.tx {
		line-height: 1.6;
	}
	
	#column {
		padding: 50px 0 0;	
	}
	#column .swiper-btn{
		margin:-30px 0 30px;
	}
	#column .swiper span.img{
		height: 210px;
	}

	#first-guide{
        margin: 0;
		padding: 60px 0;
	}
	#first-guide h2{
		margin-bottom: 40px;
	}
	#first-guide ul>li{
		display: block;
		width: auto;
		margin: 0 auto 20px;
	}
	#first-guide ul>li:last-child{
		margin-bottom: 0;
	}


	#ranking{
		padding: 80px 0;
	}
	#ranking h2{
		text-align: center;
		margin-bottom: 40px;
	}
	#ranking ul.tab{
		position: static;
		margin: 0 auto;
		overflow-x: auto;
		display: flex;
		letter-spacing: normal;
	}
	#ranking ul.tab>li{
		font-size: 1.1rem;
		padding: 12px 11px;
		margin: 0 8px 10px 0;
		background: #fff;
		border: 1px solid #666;
		color: #333;
		border-radius: 28px;
		font-weight: bold;
		white-space: nowrap;
		overflow: visible;
	}
	/*
	#ranking ul.tab>li:nth-child(3){
		margin-right: 0;
	}*/
	#ranking ul.tab>li::after{
		content: none;
	}
	#ranking ul.tab>li:nth-child(2n)::after{
		content: none;
	}
	#ranking .swiper{
		padding-top: 20px;
	}
	#ranking .swiper-wrapper{
		margin-bottom: 40px;
	}
	#ranking .swiper-slide{
		text-align: center;
		margin: 0 0;
	}
	#ranking .swiper-btn{
		width: 85%;
	}
	#ranking .swiper-btn .swiper-button-prev,
	#ranking .swiper-btn .swiper-button-next{
		top: -200px;
		width: 50px;
		height: 50px;
	}
	#ranking .swiper-btn .swiper-button-prev::after{
		left: 20px;
	}
	#ranking .swiper-btn .swiper-button-next::after{
		right: 20px;
	}


	#instagram{
        margin: 0;
		padding: 50px 0 40px;
	}
	#instagram ul.archive{
		margin-bottom: 25px;
	}
	#instagram ul.archive>li{
		width: 48%;
		margin: 0 4% 15px 0;
	}
	#instagram ul.archive>li:nth-child(2n){
		margin-right: 0;
	}
	
	.sp_only {
		display: block;
		margin-left: 32vw;
	}

}

@media screen and (max-width:400px){
	.sp_only {
		margin-left: 0;
		text-align: right;
	}
}