@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Montserrat:600,700');

main{
	color: #D9D3CE;
}

main .breadcrumbs{
	color: #3c1e00;
}

.en{
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
}

.fubox {
  opacity: 0;
}

.fade.fubox {
  transition: opacity .5s ease-out;
}

.fade.fubox.active {
    opacity: 1;
}

.up.fubox.active {
  opacity: 1;
  animation: fadeInup .5s ease-out;
  animation-fill-mode: backwards;
}
@keyframes fadeInup {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

.fade.delay01 {
  -webkit-transition-delay: 0.3s !important;
  transition-delay: 0.3s !important;
}
.fade.delay02 {
  -webkit-transition-delay: 0.6s !important;
  transition-delay: 0.6s !important;
}
.fade.delay03 {
  -webkit-transition-delay: 0.9s !important;
  transition-delay: 0.9s !important;
}


.up.delay01 {
  -webkit-animation-delay: 0.3s !important;
  animation-delay: 0.1s !important;
}

.up.delay02 {
  -webkit-animation-delay: 0.6s !important;
  animation-delay: 0.2s !important;
}

.up.delay03 {
  -webkit-animation-delay: 0.9s !important;
  animation-delay: 0.3s !important;
}


.slick-slide{
	height: auto;
}

.slick-dots li button{
	border-radius: 0;
	background-color: transparent;
	border: 1px solid #fff;
}

.slick-dots li.slick-active button{
	background-color: #fff;
}

h2.bar{
	background-color: #121a2e;
	line-height: 100%;
	padding: 10px;
	text-align: center;
	color: #fff;
	font-weight: bold;
	font-size: 16px;
	letter-spacing: 2px;
}

.flex{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#marinos{
	background-color: #E8E5E1;
}

#title .visual{
	position: relative;
}

#title .visual h1{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#title .visual img{
	max-width: none;
	width: 100%;
}


/* IN NAV */
#inav{
	display: flex;
	padding: 50px 0 70px;
	width: 976px;
	margin: 0 auto;
}

#inav a{
	display: inline-block;
	padding-right: 35px;
	margin-right: 35px;
	line-height: 100%;
	border-right: 2px solid #1A2540;
	font-size: 13px;
	text-decoration: none;
	color: #1A2540;
}

/* FIRST */
#first{
}

#first .inner{
	position: relative;
	width: 976px;
}

#first .inner .title{
	padding-top: 65px;
	margin-bottom: 75px;
}

#first .inner .mono{
	position: absolute;
	right: 0;
	top: 0;
	width: 411px;
}

#first .inner .mono .logo{
	position: absolute;
	right: -70px;
	bottom: -75px;
}


#first .inner .text{
	position: relative;
	margin-bottom: 415px;
	background-color: #121A2E;
	width: 450px;
	padding: 65px 54px;
	z-index: 1;
}

#first .inner .text h2{
	position: relative;
	font-size: 2.6rem;
	padding-bottom: 30px;
	margin-bottom: 40px;
}

#first .inner .text h2::after{
	content: "";
	position: absolute;
	display: block;
	width: 30px;
	height: 3px;
	background-color: #D9D3CE;
	left: 0;
	bottom: 0;
}

#first .inner .text p{
	font-size: 1.5rem;
}

#first .inner .text p.en{
	margin-top: 25px;
	font-size: 1.1rem;
}

#first .inner .bg{
	position: absolute;
	right: 0;
	bottom: -315px;
}

/* COORDINATE */
#coordinate{
	background: #121A2E url('img/bg.png') no-repeat center top;
	background-attachment: fixed;
	background-size: cover;
	padding: 85px 0;
}

#coordinate h2{
	font-size: 2.2rem;
	margin-bottom: 75px;
	text-align: center;
}

#coordinate #players .flex{
	justify-content: center;
}

#coordinate #players .flex .box{
	position: relative;
	width: 300px;
	margin: 0 40px 60px;
}

#coordinate #players .flex .box .image{
	position:relative;
}

#coordinate #players .flex .box .sign{
	position: absolute;
}

#coordinate #players .flex .box:nth-child(1) .sign{
	width: 98px;
	left: -33px;
	bottom: -22px;
}
#coordinate #players .flex .box:nth-child(2) .sign{
	width: 143px;
	left: -52px;
	bottom: -17px;
}
#coordinate #players .flex .box:nth-child(3) .sign{
	width: 113px;
	left: -46px;
	bottom: -6px;
}
#coordinate #players .flex .box:nth-child(4) .sign{
	width: 101px;
	left: -40px;
	bottom: -21px;
}
#coordinate #players .flex .box:nth-child(5) .sign{
	width: 124px;
	left: -52px;
	bottom: -8px;
}

#coordinate #players .flex .box .name{
	padding-top: 
}

#coordinate #players .flex .box .name .en{
	display: block;
	font-size: 2.0rem;
	font-weight: bold;
}

#coordinate #players .flex .box .name .jp{
	display: block;
	font-size: 1.4rem;
}

#coordinate #gallery {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 990px;
	margin-bottom: 140px;
}

#coordinate #gallery #g01{
	width: 510px;
}

#coordinate #gallery #g02{
	width: 400px;
	padding-top: 285px;
}

#coordinate #gallery #g03{
	width: 730px;
	margin: 80px auto 100px;
}

#coordinate #gallery #g04{
	width: 400px;
}

#coordinate #gallery #g05{
	width: 510px;
	padding-top: 140px;
}

#players-slider .box{
	position:relative;
	width: 300px;
	margin: 10px;
	cursor: pointer;
}

#players-slider .box a{
	position: relative;
	display: block;
	line-height: 0;
}

#players-slider .box a::before{
	content: "";
	display: block;
	position: absolute;
	background: rgba(0,0,0,.3) url('img/zoom.png') no-repeat center center;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	transition: all .5s ease-out;
}

#players-slider .box a:hover::before{
	opacity: 1;
}


/* CONCEPT */
#concept{
	padding: 100px 0 0;
}

#concept .top{
	position: relative;
}

#concept .top .text{
	position: absolute;
	right: 0;
	bottom: -65px;
	width: 395px;
	background-color: #121a2e;
	padding: 55px 45px 65px;
}

#concept .top .text h3{
	position:relative;
	font-size: 2.8rem;
	letter-spacing: 3.4px;
	padding-bottom: 30px;
	margin-bottom: 50px;
}

#concept .top .text h3::after{
	content: "";
	position: absolute;
	display: block;
	width: 30px;
	height: 3px;
	background-color: #D9D3CE;
	left: 0;
	bottom: 0;
}

#concept .top .text p{
	text-align: left;
	font-size: 1.4rem;
	line-height: 2;
}

#concept .bottom{
	width: 980px;
	margin: 170px auto 100px;
	position: relative;
	display: flex;
	justify-content: space-between;
	flex-direction: row-reverse;
}

#concept .bottom .image{
	width: 477px
}

#concept .bottom .text{
	width: 436px;
}

#concept .bottom .text h3{
	position: relative;
	font-size: 2.8rem;
	letter-spacing: 3.4px;
	color: #121a2e;
	padding-bottom: 35px;
	margin-bottom: 35px;
}

#concept .bottom .text h3::after{
	content: "";
	position: absolute;
	display: block;
	width: 30px;
	height: 3px;
	background-color: #121a2e;
	left: 0;
	bottom: 0;
}

#concept .bottom .text p{
	font-size: 1.4rem;
	color: #121a2e;
	margin-bottom: 35px;
}

#concept .bottom .text .estrato{
	background: rgba(255,255,255,.7);
	padding: 18px 30px;
}

#concept .bottom .text .estrato h4{
	font-size: 2.0rem;
	color: #121a2e;
	text-align: center;
}

#concept .bottom .text .estrato .kana{
	font-size: 1.1rem;
	color: #121a2e;
	text-align: center;
}

#concept .bottom .text .estrato .label{
	padding: 16px 0 20px;
	width: 200px;
	margin: 0 auto;
}

#concept .bottom .text .estrato p{
	font-size: 1.3rem;
	line-height: 1.85;
	color: #121a2e;
	padding-bottom: 30px;
	margin-bottom: 0;
}

#concept .bottom .text .estrato .eximg{
}

/* ITEMLIST */
#itemlist{
	color: #121a2e;
	background-color: #EDEDED;
	padding-bottom: 100px;
}

#itemlist .inner{
	background: url('img/item-bg.jpg') no-repeat right 50px top;
	background-size: 310px;
}

#itemlist .title{
	background-color: #121a2e;
	text-align: center;
	padding: 24px;
	margin-bottom: 50px;
}

#itemlist h3{
	font-size: 2.4rem;
	color: #d9d3ce;
	margin-bottom: 6px;
}

#itemlist .sub-title{
	font-size: 1.4rem;
	color: #d9d3ce;
}

#itemlist .lead{
	text-align: center;
	font-size: 1.8rem;
	margin-bottom: 50px;
	font-weight: bold;
}

#itemlist #item01{
	width: 800px;
	margin: 0 auto 80px;
	display: flex;
	justify-content: space-between;
}

#itemlist #item01 .slide{
	width: 327px;
}

#item01 .slide .slick-arrow{
	position: absolute;
	top: 194px;
	width: 40px;
	height: 40px;
}
#item01 .slide .slick-arrow::after{
	content: "";
	display: block;
	position: absolute;
	border-top: 3px solid #121a2e;
	border-right: 3px solid #121a2e;
	width: 12px;
	height: 12px;
	left: 50%;
	top: 50%;
	margin-top: -7px;
	margin-left: -4px;
}

#item01 .slide .slick-prev{
	left: -35px;
}
#item01 .slide .slick-prev::after{
	transform: rotate(-135deg);
}

#item01 .slide .slick-next{
	right: -35px;
}
#item01 .slide .slick-next::after{
	transform: rotate(45deg);
	margin-left: -10px;
}



#itemlist #item01 .info{
	width: 340px;
}

#itemlist #items{
	width: 1052px;
	margin: 0 auto 80px;
	justify-content: left;
}

#itemlist .item{
	width: 320px;
	margin-right: 46px;
}

#itemlist .item:nth-child(3n){
	margin-right: 0;
}

#itemlist .item .num{
	font-size: 4.2rem;
	margin-bottom: 23px;
	width: 38px;
}

#itemlist .item .min-en{
	font-size: 3.0rem;
}

#itemlist .item h4{
	font-size: 1.6rem;
	margin-bottom: 27px;
}

#itemlist .item ul{
}

#itemlist .item ul li{
	font-size: 1.4rem;
}

#itemlist .item .meisai{
	font-size: 1.4rem;
}

#itemlist .item .price{
	line-height: 150%;
}

#itemlist .item .yen{
	font-size: 2.2rem;
}

#itemlist .item .tax{
	font-size: 1.5rem;
}


#itemlist #item01 .item ul{
	margin-bottom: 21px;
}

#itemlist #item01 .item .meisai{
	margin-bottom: 31px;
}

#itemlist #item01 .arrow{
	position: relative;
	display: inline-block;
}

#itemlist #item01 .arrow::after{
	content: "";
	display: block;
	position: absolute;
	width: 8px;
	height: 8px;
	bottom: -20px;
	right: 50%;
	border-bottom: 2px solid #121a2e;
	border-right: 2px solid #121a2e;
	transform: rotate(45deg) translateY(-50%);
}


#itemlist #items .item{
	margin-bottom: 40px;
}

#itemlist .item .col2{
	flex: 1;
	padding-left: 20px;
	padding-top: 10px;
}

#itemlist .item .col2 .min-en{
	display: inline-block;
	vertical-align: -5px;
	margin-right: 26px;
	font-size: 2.5rem;
}

#itemlist .item .col2 h4{
	display: inline-block;
	font-size: 1.3rem;
	margin: 0;
}

#itemlist .item .col2 ul{
	padding-top: 15px;
	margin-bottom: 8px;
}

#itemlist .item .col2 ul li{
	font-size: 1.3rem;
}

#itemlist .item .col2 .meisai{
	font-size: 1.3rem;
}

#itemlist .item .col2 .yen{
	font-size: 2.0rem;
}

#itemlist #set{
	position:relative;
	width: 825px;
	margin: 0 auto;
	border: 2px solid #121a2e;
	padding: 34px 75px 15px;
	background-color: #fff;
}

#itemlist #set .set-title{
	position:absolute;
	width: 100%;
	left: 0;
	top: -17px;
	z-index: 1;
}

#itemlist #set .set-title::after{
	content: "";
	display: block;
	position: absolute;
	width: 355px;
	height: 35px;
	background-color: #fff;
	left: 50%;
	transform: translateX(-50%);
	top: 15px;
	z-index: 0;
}

#itemlist #set h3{
	position: relative;
	color: #121a2e;
	font-size: 2.6rem;
	text-align: center;
	z-index: 10;
}

#itemlist #set h3 span{
	display: block;
	color: #121a2e;
	font-size: 1.3rem;
}

#itemlist #set h4{
	font-size: 2.3rem;
	margin-bottom: 23px;
}

#itemlist #set ol{
}

#itemlist #set ol li{
	display: inline-block;
	font-size: 1.7rem;
	margin-right: 15px;
}

#itemlist #set .price{
}

#itemlist #set .text{
	width: 420px;
	padding-top: 30px;
}

#itemlist #set .text .tit{
	display: block;
}

#itemlist #set .image{
	flex: 1;
	text-align: center;
}

#itemlist #set .image img{
	width: 156px;
}

#itemlist #set .price.arrow{
	position: relative;
	display: inline-block;
	font-size: 2.2rem;
	margin-bottom: 36px;
}

#itemlist #set .price.arrow::after{
	content: "";
	display: block;
	position: absolute;
	width: 8px;
	height: 8px;
	bottom: -20px;
	right: 50%;
	border-bottom: 2px solid #121a2e;
	border-right: 2px solid #121a2e;
	transform: rotate(45deg) translateY(-50%);
}

#itemlist #set .price.special{
	font-size: 2.0rem;
}

#itemlist #set .price.special{
	font-size: 2.0rem;
}

#itemlist #set .price.special{
	font-size: 2.0rem;
}

#itemlist #set .price.special .yen{
	font-size: 3.4rem;
	color: #a70000;
}

#itemlist #set .price.special .tax{
	font-size: 2.0rem;
	color: #a70000;
}

#itemlist #set .price.special .off{
	line-height: 100%;
	padding: 8px 6px 0;
	background-color: #a70000;
	color: #fff;
	font-size: 2.7rem;
	margin-left: 22px;
}

#itemlist #set .price.special .off b{
	font-size: 3.5rem;
}


/* ETC */
#etc{
	background-color: #fff;
	padding: 80px 0;
}

/* SNS */
#sns{
	width: 620px;
	margin: 0 auto;
	border:  solid 2px #121a2e;
	margin-bottom: 35px;
}

#sns h2{
	background-color: #121a2e;
	line-height: 100%;
	padding: 10px;
	text-align: center;
	font-size: 2.2rem;
	letter-spacing: 2px;
}

#sns .sns-in{
	padding: 18px;
}

#sns .sns-in .copy{
	font-size: 2.0rem;
	color: #121a2e;
	margin-bottom: 23px;
	font-weight: bold;
	text-align: center;
}

#sns .flex{
	justify-content: center;
	align-items: center;
}

#sns .flex > div{
	margin: 0 28px;
	height: 20px;
}

#sns .fb_iframe_widget{
	line-height: 0;
}

#shopinfo{
	text-align: center;
	margin-bottom: 60px;
}

#shopinfo h2{
	font-size: 2rem;
	color: #121a2e;
	font-weight: bold;
}


#faq{
	width: 900px;
	margin: 0 auto;
}

#faq h2{
	font-size: 20px;
}

#faq .boxs{
	border: 1px solid #121a2e;
	padding: 8px 70px;
}

#faq .box{
	padding: 28px;
}

#faq .box.q1{
	border-bottom: 1px solid #121a2e;
}

#faq .box .q{
	background: url(./img/mark-q@2x.png) no-repeat left top;
	background-size: 23px;
	padding-left: 50px;
	margin-bottom: 15px;
	color: #121a2e;
}

#faq .box .a{
	background: url(./img/mark-a@2x.png) no-repeat left top;
	background-size: 23px;
	padding-left: 50px;
	color: #121a2e;
}


/*--------------------------------------
	Smartphone 
----------------------------------------*/

@media screen and (max-width: 767px) {


#marinos{
	background: none;
}

.bg-color{
	position: relative;
	background-color: #E8E5E1;
	z-index: 0;
}

#first .inner{
	width: 100%;
}

#first .inner .title{
	padding-top: 25px;
	margin-bottom: 10px;
	text-align: center;
}

#first .inner .title img{
	width: 347px;
}

#first .inner .mono{
	position: relative;
	width: 292px;
	margin: 0 auto 40px;
}

#first .inner .mono .logo{
	width: 122px;
	bottom: 20px;
	right: -48px;
}

#first .inner .text{
	width: 100%;
	margin: 0;
	padding: 30px;
	width: 305px;
}

#first .inner .text h2{
	font-size: 1.8rem;
	padding-bottom: 18px;
	margin-bottom: 18px;
}

#first .inner .text p{
	font-size: 1.2rem;
}

#first .inner .text .en-lead{
	display: none;
}

	
#first .inner .bg{
	position: relative;
	bottom: auto;
	top: -20px;
	width: 320px;
	margin: 0 0 0 auto;
}

#coordinate{
	position: relative;
	padding-top: 50px;
	background: none;
}

#coordinate::after{
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	background: #121A2E url('img/bg.png') no-repeat center top;
	background-size: cover;
	width: 100%;
	height: 100%;
	z-index: -1;
}

#coordinate h2{
	margin-bottom: 45px;
}

#coordinate #players .flex .box{
	width: 250px;
	margin: 0 auto 60px;
}


#coordinate #gallery{
	width: 100%;
	margin-bottom: 60px;
}

#coordinate #gallery .fubox{
	width: 330px;
}

#coordinate #gallery #g01,
#coordinate #gallery #g02,
#coordinate #gallery #g03,
#coordinate #gallery #g04,
#coordinate #gallery #g05{
	width: 90%;
	padding: 0;
	margin: 0 auto 30px;
}

/* CONCEPT */
#concept{
	padding: 0 0 0;
}

#concept .top{
	padding: 0;
	background-color: #121A2E;
}

#concept .top .text{
	position: static;
	width: 100%;
	padding: 10%;
}

#concept .top .text h3{
	padding-bottom: 17px;
	margin-bottom: 27px;
	font-size: 2rem;
}

#concept .top .text p{
	font-size: 1.2rem;
	line-height: 180%;
	margin-bottom: 0;
}

#concept .bottom{
	width: 100%;
	padding: 60px 10%;
	margin: 0;
	display: block;
	background-color: #E8E5E1;
}

#concept .bottom .image{
	width: 100%;
	line-height: 0;
}

#concept .bottom .text{
	width: 100%;
	background-color: transparent;
	color: #121A2E;
}

#concept .bottom .text h3{
	padding-top: 30px;
	padding-bottom: 17px;
	margin-bottom: 27px;
	font-size: 2rem;
}

/* ITEM LIST */
#itemlist{
	padding-bottom: 50px;
}

#itemlist .inner{
	background: none;
	background-position: right -50px top;
}

#itemlist h3{
	font-size: 2.2rem;
}

#itemlist .sub-title{
	font-size: 1rem;
}

#itemlist .lead{
	font-size: 1.3rem;
}

#itemlist #item01{
	position: relative;
	width: 100%;
	display: block;
}

#itemlist #item01 .slide{
	width: 250px;
	margin: 0 auto;
}

#itemlist #item01 .info{
	width: 100%;
	padding: 30px 10px 0px;
}

#itemlist #item01 .item .num{
	position: absolute;
	top: -12px;
	left: 50%;
	margin-left: -144px;
}

#itemlist #items{
	width: 100%;
	display: block;
}

#itemlist #items .item{
	display: flex;
	align-items: center;
}

#itemlist #items .item .image{
	width: 160px;
	line-height: 0;
}

#itemlist #items .item .text{
	flex: l;
	padding-left: 18px;
}

#itemlist .item .min-en{
	font-size: 2.3rem;
}

#itemlist .item h4{
	font-size: 1.4rem;
	margin-bottom: 20px;
}

#itemlist .item ul li{
	font-size: 1.2rem;
}

#itemlist .item .price{
	font-size: 1.5rem;
}

#itemlist #items {
	padding: 0 5px;
}

#itemlist #items .item{
	position: relative;
	width: 100%;
	margin: 0 0 40px;
}

#itemlist #items .item .info{
	display: block;
	flex: 1;
}

#itemlist #items .item .num{
	font-size: 3.2rem;
	position: absolute;
	left: -7px;
	top: -20px;
}

#itemlist .item .col2{
	padding-top: 0;
}

#itemlist .item .col2 .min-en{
	font-size: 2.0rem;
}

#itemlist .item .col2 ul li{
	font-size: 1.2rem;
	line-height: 130%;
}

#itemlist .item .col2 .price{
	font-size: 1.8rem;
}

#itemlist .item .col2 .price .tax{
	font-size: 1.2rem;
}

#itemlist .item .col2 h4{
	display: block;
}


#itemlist #set{
	width: 100%;
	padding: 50px 20px 20px;
}

#itemlist #set .set-title{
	top: -13px;
}

#itemlist #set .set-title::after{
	width: 260px;
	top: 10px;
}

#itemlist #set h3{
	font-size: 2rem;
}

#itemlist #set h3 span{
	font-size: 1.1rem;
}

#itemlist #set .text{
	padding: 0;
	width: 100%;
	text-align: center;
}

#itemlist #set h4{
	text-align: center;
	font-size: 2.1rem;
	margin-bottom: 12px;
}

#itemlist #set h4 span{
	color: #A70000;
	font-size: 2.5rem;
}

#itemlist #set ol li{
	font-size: 1.5rem;
}

#itemlist #set .price.arrow{
	font-size: 1.8rem;
}

#itemlist #set .price.arrow .yen{
	font-size: 2.2rem;
}

#itemlist #set .price.arrow .tax{
	font-size: 1.5rem;
}

#itemlist #set .price.special{
	font-size: 1.8rem;
	font-weight: bold;
}

#itemlist #set .price.special .yen{
	font-size: 3rem;
}

#itemlist #set .price.special .tax{
	font-size: 1.8rem;
}

#itemlist #set .price.special .off{
	font-size: 2.2rem;
    margin-left: 10px;
}

#itemlist #set .price.special .off b{
	font-size: 2.9rem;
}

/* ETC */
#etc{
	padding: 50px 10px 0;
	
}

#sns{
	width: 100%;
}

#sns .flex{
	justify-content: space-between;
}

#sns .flex > div{
	margin: 0;
	line-height: 0;
}

#shopinfo{
	margin-bottom: 40px;
}

#shopinfo h2{
	font-size: 1.8rem;
}

#faq{
	width: 100%;
}

#faq h2{
	font-size: 1.8rem;
}

#faq .boxs{
	padding: 10px 15px;
}

#faq .box{
	padding: 15px 0;
}

#faq .box .q, #faq .box .a {
    font-size: 1.1rem;
    min-height: 28px;
}

#common-info{
	background-color: #fff;
}

}