@charset "UTF-8";

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

main{
	color: #fff;
}

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{
	min-width: 1200px;
}

#title .visual{
	position: relative;
}

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

#title .visual #visual-logo{
	position: absolute;
	bottom: -20px;
	left: 50%;
	transform: translate(-50%, -50%);
}

#title .visual picture{
	line-height: 0;
	display: block;
	height: 100%;
}

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


/* IN NAV */
#inav{
	background-color: #5C0000;
}

#inav ul{
	display: flex;
	padding: 50px 0 70px;
	width: 976px;
	margin: 0 auto;
	justify-content: center;
}

#inav a{
	position: relative;
	display: inline-block;
	margin: 0 20px;
	line-height: 100%;
	padding: 15px 0px;
}

#inav a::after{
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 1px;
	background-color: #fff;
	bottom: 0;
	left: 0;
	transform: scaleX(0);
	transition: .1s transform linear;
}

#inav a:hover::after{
	transform: scaleX(1);
}


/* concept 
===================*/
#concept{
	background-color: #5C0000;
}

#concept .flex{
	position: relative;
	z-index: 1;
}

#concept .top{
	position: relative;
}

#concept .top::after{
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 55px;
	left: 0;
	bottom: 0;
	background-color: #13283C;
}

#concept .top .bg{
	width: 566px;
}

#concept .top .text{
	flex: 1;
	padding-left: 62px;
}

#concept .top .text p{
	font-size: 1.4rem;
	margin-top: 20px;
}

#concept .bottom{
	background-color: #13283C;
	padding-top: 30px;
	padding-bottom: 70px;
}

#concept .bottom .text{
	flex: 1;
	padding-right: 50px;
}

#concept .bottom .text p{
	font-size: 1.4rem;
	margin-top: 20px;
}

#concept .bottom .text .old{
	padding-top: 30px;
	text-align: center;
}


#concept .bottom .image{
	position: relative;
	width: 566px;
	text-align: right;
}

#concept .bottom .image img{
	position: absolute;
	bottom: -70px;
	right: 0;
}

/* coordinate 
===================*/
#coordinate{
	background: url('img/pc-bg.jpg') no-repeat center center;
	background-size: cover;
	background-attachment: fixed;
	padding: 85px 0;
}

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

#coordinate .lead{
	max-width: 900px;
	align-items: center;
	margin-bottom: 40px;
}

#coordinate .lead .right{
	width: 350px;
}

#coordinate .lead p{
	margin-bottom: 50px;
	font-size: 1.8rem;
	line-height: 180%;
	font-weight: bold;
}

#coordinate .lead a.tw-btn{
	display: block;
	border: 2px solid #fff;
	line-height: 100%;
	padding: 24px 105px 24px 65px;
	font-weight: bold;
	font-size: 1.8rem;
	text-decoration: none;
	color: #fff;
	background: url('img/twitter-icon.png') no-repeat right 35px center;
}

#coordinate .lead a.tw-btn:hover{
	background-color: rgba(255,255,255,.2);
}


#coordinate #lists{
	width: 840px;
	margin-bottom: 100px;
}

#coordinate #lists .box:nth-child(2n){
	margin-top: 113px;
}

#coordinate .player{
	width: 1068px;
	margin: 0 auto 50px;
	align-items: center;
}

#coordinate .player .prof{
	flex: 1;
}

#coordinate .player .prof .name{
	font-size: 40px;
	font-weight: bold;
}

#coordinate .player .prof .name .jp{
	line-height: 110%;
	margin-bottom: 15px;
}

#coordinate .player .prof .position{
	margin-bottom: 30px;
}


#coordinate .player .image{
	width: 810px;
}

#coordinate .player .image .box{
	padding-right: 15px;
}

#coordinate .player .image .box a{
	position: relative;
	display: block;
	background-color: #000;
}

#coordinate .player .image .box a::after{
	position: absolute;
	content: url(./img/zoom.png);
	z-index: 1;
	top: 50%;
	left: 50%;
	margin-top: -25px;
	margin-left: -24px;
	opacity: 0;
	transition: all .5s
}

#coordinate .player .image .box a:hover::after{
	opacity: 1;
}

#coordinate .players-slider{
	display: flex;
	justify-content: space-between;
}

#coordinate .players-slider .box{
	line-height: 0;
}

#coordinate .yfm{
	width: 1068px;
	margin: 0 auto 0;
	text-align: right;
}


/* item 
===================*/
#suits-item{
	padding: 90px 0;
	background-color: #5C0000;
}

#suits-item h2{
	text-align: center;
	margin-bottom:30px;
}

#suits-item .lead{
	text-align: center;
	font-size: 1.5rem;
	color: #fff;
	margin-bottom:30px;
}

#suits-item .fabric{
	text-align: center;
	margin-bottom: 60px;
}


#suits-item #item-list{
	max-width: 950px;
	margin: 0 auto;
	background-color: #fff;
	color: #13283C;
}

#suits-item #item-list h3{
	background-color: #13283C;
	color: #fff;
	font-weight: bold;
	text-align: center;
	padding: 20px;
}

#suits-item #item-list .inner{
	padding: 35px 95px 95px;
	width: 100%;
}

#suits-item #item-list .lead2{
	text-align: center;
	font-size: 1.8rem;
	font-weight: bold;
	margin-bottom: 42px;
}

#suits-item #item-list #item01{
	margin-bottom: 45px;
}

#suits-item #item-list #item01 .info{
	flex: 1;
	padding-top: 10px;
	padding-left: 45px;
}

#suits-item #item-list .info h4{
	padding: 0 0 25px;
	font-size: 1.5rem;
	font-weight: bold;
}

#suits-item #item-list .info .detail{
	font-size: 1.3rem;
}

#suits-item #item-list .info .about-combi{
	background-color: #EAEAEA;
	padding: 20px;
	margin-top: 20px;
}

#suits-item #item-list .info .about-combi .title{
	text-align: center;
	margin-bottom: 20px;
	font-weight: bold;
}

#suits-item #item-list .info .about-combi p{
	font-size: 1.3rem;
}

#suits-item #item-list .box{
	margin-bottom: 45px;
}

#suits-item #item-list .box .info{
	padding-left: 20px;
}

#suits-item #set{
	background-color: #EAEAEA;
	padding: 33px;
}

#suits-item #set .image{
	width: 210px;
}

#suits-item #set .text{
	flex: 1;
}

#suits-item #set .text h4{
}

#suits-item #set .text h4 span{
	display: block;
	font-size: 1.5rem; 
}

#suits-item #set .text h4 span{
	margin-bottom: 25px;
}

#suits-item #set .text .set5{
	font-size: 2.3rem;
	font-weight: bold;
	color: #840101;
}

#suits-item #set .text .setin{
	font-size: 1.5rem;
	margin-bottom: 25px;
}

#suits-item #set .text .price-title{
	font-size: 2.0rem;
}

#suits-item #set .text .price{
	font-size: 3.4rem;
	color: #840101;
}

#suits-item #set .text .price span{
	font-size: 2.0rem;
}

#suits-item #set .text .annotation{
	font-size: 1.3rem;
}


/* shop 
===================*/
#shop{
	padding: 90px 0;
	background: url('img/shop-bg.jpg') no-repeat center center;
	background-size: cover;
	text-align: center;
}

#shop h2{
	margin-bottom: 35px;
}

#shop .lead{
	font-size: 1.5rem;
	font-weight: bold;
}

#shop .lead .annotation{
	font-size: 1.2rem;
}

#shop .shop-image{
	margin-bottom: 30px;
}

#shop .yokohama{
	margin-bottom: 70px;
}

#shop .yokohama a.cp-btn{
	display: inline-block;
	border: 2px solid #fff;
	width: 300px;
	padding: 10px;
	font-weight: bold;
	text-decoration: none;
	color: #fff;
	font-size: 1.8rem;
	color: #fff;
}

#shop .banner-box{
	max-width: 850px;
	margin: 0 auto;
}

#shop .banner-box .left{
	flex: 1;
	text-align: center;
}

#shop .banner-box .left .ribon{
	margin-bottom: 20px;
	background: url('img/ribon.svg') no-repeat center center;
	padding: 10px 0;
	font-weight: bold;
	font-size: 1.7rem;
}

#shop .banner-box .left h3{
	font-size: 3.0rem;
	font-weight: bold;
	margin-bottom: 30px;
	line-height: 130%;
}

#shop .banner-box .left a.cp-btn{
	display: inline-block;
	border: 2px solid #fff;
	width: 300px;
	padding: 10px;
	font-weight: bold;
	text-decoration: none;
	color: #fff;
	font-size: 1.8rem;
	color: #fff;
}

#shop .banner-box .right{
	width: 416px;
}

/* etc 
===================*/
#faq{
	width: 900px;
	margin: 0 auto;
	padding: 90px 0 50px;
}

#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.png) no-repeat left top;
	background-size: 23px;
	padding-left: 50px;
	margin-bottom: 15px;
	color: #121a2e;
}

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


#sns{
	width: 620px;
	margin: 0 auto;
	margin-bottom: 35px;
}

#sns h2{
	text-align: center;
}

#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;
}

#etc .shoplink{
	text-align: center;
}


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

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


#marinos{
	background: none;
	min-width: 0;
}

.flex{
	display: block;
}

#inav ul{
	width: 100%;
	padding: 24px 0;
	align-items: center;
}

#inav a{
	margin: 0 10px;
}

#inav h2{
	margin-bottom: 20px;
}

#inav .bg{
	margin-bottom: 20px;
}

#concept .top::after{
	content: none;
}

#concept .top .bg{
	width: 100%;
}

#concept .top .text{
	padding: 0 0 30px;
}

#concept .top .text p{
	font-size: 1.2rem;
}

#concept .top .text p br{
	display: none;
}

#concept .bottom{
	padding-bottom: 0;
}

#concept .bottom .text .old.sp{
	padding: 20px 0 0;
	display: block !important;
}

#concept .bottom .text{
	padding: 0;
}

#concept .bottom .text h2{
	text-align: center;
}

#concept .bottom .text h2 img{
	height: 35px;
}


#concept .bottom .text p{
	font-size: 1.2rem;
}

#concept .bottom .text p br{
	display: none;
}

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

#concept .bottom .image img{
	position: static;
}


/* coodinate */
#coordinate{
	padding: 30px 0;
}

#coordinate .padding{
	padding: 0 15px;
}

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

#coordinate .lead p{
	font-size: 1.2rem;
	margin-bottom: 10px;
}

#coordinate .lead p br{
	display: none;
}

#coordinate .lead .right{
	padding: 0 20px 20px;;
	text-align: center;
	width: 100%;
}

#coordinate .lead a.tw-btn{
	padding: 15px;
	font-size: 1.4rem;
	padding: 10px 20px 10px 20px;
	background: none;
	text-align: center;
	
}
#coordinate .lead a.tw-btn .img{
	display: inline-block;
	width: 38px;
	vertical-align: middle;
	padding-left: 10px;
}

#coordinate .player{
	width: 100%;
	margin-bottom: 50px;
}

#coordinate .yfm{
	width: 100%;
	padding: 0 15px;
}

#coordinate .player .image{
	width: 100%;
}

#coordinate .players-slider-sp{
}

#coordinate .players-slider-sp a img{
	width: 240px;
}


#suits-item #item-list .inner{
	padding: 0;
}

/* coordinate */
#coordinate #lists{
	width: 100%;
	padding: 0 30px;
	margin-bottom: 10px;
}

#coordinate #lists .box{
	padding-bottom: 20px;
	text-align: center;
}

#coordinate #lists .box:nth-child(2n){
	margin: 0;
}

#coordinate .player .prof{
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding: 0 15px 20px;;
}

#coordinate .player .prof .name .jp{
	font-size: 2.2rem;
	margin-bottom: 0px;
}

#coordinate .player .prof .name .kana{
	line-height: 100%;
}

#coordinate .player .prof .kana img{
	height: 25px;
}

#coordinate .player .prof .number{
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	justify-content: center;
}

#coordinate .player .prof .number img{
	height: 40px;
}

#coordinate .player .prof .position{
	padding-top: 10px;
	margin-bottom: 0;
}
#coordinate .player .prof .position img{
	height: 14px;
}


/* item */
#suits-item{
	padding: 30px 15px 40px;
}

#suits-item .lead{
	font-size: 1.2rem;
}

#suits-item .fabric{
	padding: 0 30px;
}

#suits-item #item-list h3{
	padding: 10px;
	line-height: 100%;
}

#suits-item #item-list h3 img{
	width: 75px;
}

#suits-item #item-list .inner{
	padding: 20px;
}

#suits-item #item-list .lead2{
	font-size: 1.2rem;
}

#suits-item #item-list #item01{
	margin-bottom: 20px;
	border-bottom: 1px solid #162839;
}

#suits-item #item-list #item01 .info{
	padding: 20px 0;
}

#suits-item #item-list .box{
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid #162839;
}

#suits-item #item-list .box:last-child{
	border-bottom: none;
}

#suits-item #item-list #item01 .image,
#suits-item #item-list .box .image{
	text-align: center;
	padding-right: 20px;
}

#suits-item #item-list .box .info{
	padding: 0;
}

#suits-item #item-list .info h4{
	font-size: 1.3rem;
	padding-bottom: 15px;
}

#suits-item #set .image{
	display: none;
}

#suits-item #set .text h4{
	text-align: center;
}

#suits-item #set .text h4 span.jp{
	font-size: 1.2rem;
	margin-bottom: 15px;
}

#suits-item #set .text .set5{
	font-size: 1.8rem;
}

#suits-item #set .text .setin{
	font-size: 1.2rem;
}

#suits-item #set .text .price-title{
	font-size: 1.4rem;
}

#suits-item #set .text .price{
}

#suits-item #set .text .annotation{
	font-size: 1rem;
}
	
/* shop */
#shop{
	padding: 40px 15px;
}

#shop .lead{
	font-size: 1.2rem;
}

#shop .shop-image{
	margin-bottom: 15px;
}

#shop .banner-box .left .ribon{
	background-size: 100% 100%;
	margin-bottom: 15px;
}

#shop .banner-box .left h3{
	font-size: 2rem;
	margin-bottom: 15px;
}

#shop .yokohama a.cp-btn{
	font-size: 1.3rem;
}
#shop .banner-box .left a.cp-btn{
	font-size: 1.3rem;
	margin-top: 15px;
}

#sns{
	width: 100%;
	padding: 0 15px;
	margin-bottom: 0;
}

#sns h2{
	padding: 0 30px;
}


#sns .flex{
	padding: 0;
	display: flex;
}
#sns .flex > div{
	padding: 0 10px;
	height: auto;
	margin-bottom: 10px;
}

#sns .sns-in{
	padding: 15px 0;
}
#sns h3{
	font-size: 1.4rem;
}

#sns a{
	display: block;
	padding: 0 20px;
}


#etc .shoplink{
	padding: 0 20px;
}

#faq{
	padding: 30px 10px;
	width: 100%;
}

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

#faq .boxs{
	padding: 0 20px;
}

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

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


}