@charset "utf-8";


.main-image{
    width:100%;
	margin: 0 0 5%;
	padding: 4% 0 0;
}
.main-image img{
    width:100%;
}



/* スライダー */

/*
.bx-wrapper .bx-controls-auto,
.bx-wrapper .bx-pager {
    display: none;
    }*/


.sec01 {
  width: 52.0833%;
  margin: 0 auto 5%;
	height: auto;
	position: relative;
}
.sec01-title{
	width:100%;
}

.sec01-title img{
	width:100%;
	margin-bottom: 3%;
}
.sec01-title img{
	width:100%;
}
.sec01-txt{
	font-size:1.1vw;
	line-height: 200%;
	text-align: center;
}
.sec01_in img{
    width:100%;
	-webkit-transition: 0.3s ease-in-out;  
     -moz-transition: 0.3s ease-in-out;  
       -o-transition: 0.3s ease-in-out;  
          transition: 0.3s ease-in-out;
}
.about_btn{
	width:46%;
	margin: 5% auto;
}

.about_btn img{
	width:100%;
}
.news-wrap {
	width: 100%;
	margin: 0 auto 8%;
}

.more {
	    width: 37%;
    margin: 5% auto 0;
	text-align: center;
	display: block;
}
.more img {
	width: 100%;
}



.sec02 {
    width: 100%;
	position: relative;
    background-repeat: no-repeat;
    background-size: contain;
	margin:0 0 5%;
}

.sec-bana{
width: 52.0833%;
    margin: 0 auto;
    padding: 0 0 5%;
}

.m-bana{
width:100%;
margin: 3% 0;
}
.m-bana img{
width:100%;
}

.entry_btn{
	width:24.58333%;
	position: relative;
	margin: 30% auto 0;
}

.entry_btn img{
	width:100%;
}


.sec04 {
    width: 52.0833%;
    margin: 0 auto;
    padding: 5% 0;
}

.sec04_l{
	width:46%;
	float: left;
}

.sec04_l img{
	width:100%;
}

.test_btn{
	width:78.26%;
	margin: 10% auto 0;
}

.test_btn img{
	width:100%;
}


.sec04_r{
	width:51%;
	float: right;
}



.sec03 {
    width: 100%;
    margin: 0 auto;
	padding:0;
	position: relative;
	background-image: url(../img/shared/denimu_bg.png);
	background-repeat: repeat;
	
}

.sec03_in{
	width:52.0833%;
	margin: 0 auto;
	padding: 5% 0;
}

.sec03_in .title{
	margin-bottom:5%;
}
.sec03_in .title img{
	width:100%;
}

.sec03 .cons-list {
    width: 82%;
    margin: 0 auto;
}

.sec03 .cons-wrap {
    width: 45.12195%;
    margin: 0 2.439% 5%;
    float: left;
    box-sizing: border-box;
	position: relative;
}

.sec03 .cons-wrap .photo {
    height: 17vw;
    overflow: hidden;
	margin-bottom: 5%;
	border: 10px solid #fff;
}

.sec03 .cons-wrap .photo img {
    height: 100%;
    width: 100%;
}

.sec03 .cons-wrap .s-name {
   width: 100%;
    text-align: center;
    line-height: 150%;
    color: #fff;
    font-weight: bold;
    font-size: 1.6vw;
}

.san{
	font-size: 1.1vw;
	font-weight: normal;
}

.sec03 .cons-wrap .cons-title{
    height: 7vw;
	padding: 0 ;
    margin: 0;
}

.cons-title .prof-katagaki{
	text-align: center;
	color: #fff;
    line-height: 180%;
	font-size: 1vw;
}

.prof-katagaki img{
	width:70.81%;
	margin: 0 auto 3%;
}

.s-cate{
	font-size:1.4vw;
	text-align: center;
	font-weight: bold;
}

.s-kaisha{
	font-size:1vw;
	text-align: center;
}



.sec05 {
   width: 52.0833%;
    margin: 0 auto;
	padding: 5% 0;
}


.cms-area{
	width:100%;
}

.cms-area2{
	width:96%;
	margin: 5% auto;
}


.cms-01 {
    width: 100%;
    margin: 0 0 ;
    float: left;
	}
	

.news {
    width: 31%;
    margin: 0 1% 3%;
    float: left;
    height: 18vw;
}

.news .photobox {
    width: 100%;
    height: 11vw;
    margin-right: 1.3%;
    overflow: hidden;
    position: relative;
	margin-bottom: 5%;
}

.news .photobox img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    font-family: 'object-fit: cover;';
	
}

.news .day{
line-height: 160%;
	font-size: 1vw;
}



.news .info {
    background-color: #a87500;
    color: #fff;
	width:30%;
text-align: center;
	line-height: 160%;
	font-size: 1vw;
	margin-bottom: 3%;
}

.news .event {
    background-color: #830000;
    color: #FFF;
	width:30%;
text-align: center;
	line-height: 160%;
	font-size: 1vw;
	margin-bottom: 3%;
}

.news .staffblog {
    background-color: #000055;
    color: #FFF;
	width:30%;
text-align: center;
	line-height: 160%;
	font-size: 1vw;
	margin-bottom: 3%;
}

.cms-area2 .blog-title{
	font-size: 1vw;
	font-weight: bold;
	line-height: 150%;
}

.cms-area2 li.blog-title{
	width: 48%;
	float: left;
	margin: 0 2% 0 0;
    line-height:180%;
    font-size: 1vw;
	color: #000;
	list-style: disc;
	text-indent:-10px;
	font-weight: bold;
}

.cms-area2 li.blog-title a{
	text-decoration: none;
	color: #000;
}

.more_rec {
     width: 31.25%;
   margin: 0 auto 3%;
   /*float: left;*/
    display: block;
}

.sec06 {
    width: 100%;
    margin:0% auto 3%;
    padding-top: 21.927%;
	background-image: url("../img/top/mamebana_bg.png");
	height: 0;
	background-repeat: no-repeat;
    position: relative;
	background-size: contain;
}

.sec06_in{
	width:100%;
	margin-top:-21.927%;
}
.sec06_in .title{
	width:52.0833%;
	margin:0 auto 3%;
}

.sec06 .title img{
	width:100%;
}

.flow{
	width:66.6666%;
	margin: 0 auto 5%;
}

.flow img{
	width:100%;
}

.more_entry {
    width: 38.3333%;
    margin: 2% auto 0;
    text-align: center;
    display: block;
}

.more_entry img{
	width:100%;
}

/*********************2020-4 コロナ告知********************************************/

.sec-kokuti {
    width: 52.0833%;
    margin: 0 auto;
    border: 3px solid #002060;
    color: #002060;
    text-align: center;
    font-size: 1.4vw;
    line-height: 150%;
    padding: 0 0 2%;
   /* font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";*/
}

.kokuti_bg {
    background-color: #002060;
    color: #ffffff;
    font-size: 1.2vw;
        line-height: 150%;
    margin: 0 0 3%;
    text-align: center;
    padding: 2% 0 3%;
}

.kokuti_bg a{
text-decoration: none;
}

.kokuti_bg a:hover{
opacity:0.6;
}

.kokuti-button {
    width: 30%;
    margin: 2% auto 0;
    background-color: #ffffff;
    padding: 1% 0;
    text-align: center;
    font-size: 1.2vw;
    font-weight: bold;
    color: #002060;
    display: block;
}


.kokuti-t{
font-size: 2.6vw;
line-height: 180%;
font-weight: bold;

}
.kokuti-title {
	margin: 0 auto 1%;
	font-size: 1.6vw;
	font-weight: bold;
	color: #d5b215;
	text-align: center;
}
.kokuti-txt {
    font-size: 1.1vw;
    line-height: 150%;
    text-align: center;
}

.kokuti-txt02{
font-size: 2.4vw;
line-height: 150%;
font-weight: bold;
}

.kokuti-pic{
width:30%;
margin: 0 auto;
}
.kokuti-pic img{
width:100%;
}
/* ジーンズソムリエGP */
.sec-gp {
  width: 52.0833%;
  margin: 0 auto 5%;
  border: 3px solid #002060;
  text-align: center;
  font-size: 1.1vw;
  line-height: 200%;
  padding: 3% 0 0;
  /* font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO"; */
}
.sec-gp .gp-title {
	margin: 0 auto 3%;
}
.sec-gp .gp-txt {
	margin: 0 auto 3%;
}

/* ジーンズソムリエフェスタ */
.sec-fes {
    width: 52.0833%;
    margin: 0 auto 5%;
    padding: 3% 0 0;
  }

/*********************2022-4 YouTube********************************************/
.sec07_in{
	width:52.0833%;
	margin:0 auto 5%;
}
.sec07_in .title{
	margin: 0 0 5%;
}

.youtube_box {
	width: 100%;
	height: 0;
	padding-top: 56.25%;
	position: relative;
}

.youtube_box iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.sec07_txt {
	margin: 5% 0 0;
	font-size: 1.1vw;
	font-weight: 700;
	line-height: 200%;
	text-align: center;
	color: #000055;
}

/* =================================================================================================================================================
　　　　　　　　　　　　　　　　　　　　　ipad
==================================================================================================================================================== */
@media only screen and (max-width: 1024px) {
.main-image {
    width: 100%;
    margin: 0 auto 5%;
    padding: 7% 0 0;
}
	

	
.sec01 {
    width: 80%;
}
	
.sec01-txt {
    font-size: 1.5vw;
}	
	
.entry_btn {
    width: 40%;
}	
	
	
.sec04 {
    width: 80%;
    margin: 0 auto;
    padding: 5% 0;
}
    
	
.about-box {
    width: 80%;
    margin: 0 auto;
}	
	
.sec03 {
    margin: 0 auto;
    padding: 5% 0;
}
	
.sec03 .cons-list {
    width: 100%;
    margin: 0 auto;
}
	
.sec03_in {
    width: 80%;
    margin: 0 auto;
}
	
.sec03 .cons-wrap .photo {
    height: 30vw;
	}	
	
.sec03 .cons-wrap .cons-title {
    height: 10vw;
    padding: 0;
    margin: 0;
}	
	
.s-cate {
    font-size: 1.7vw;
    text-align: center;
    font-weight: bold;
}
	
.s-kaisha {
    font-size: 1.4vw;
    line-height: 180%;
    text-align: center;
}
	
.sec03 .cons-wrap .s-name {
    font-size: 2vw;
}	
	
.san {
    font-size: 1.4vw;
    font-weight: normal;
}	
	
.sec05 {
    width: 80%;
    margin: 0 auto;
    padding: 5% 0;
}
	
.cms-area2 .blog-title {
    width: 80%;
    float: left;
   font-size: 1.7vw;
    font-weight: bold;
    line-height: 160%;
}
	
.news {
    width: 31%;
    margin: 0 1% 10%;
    float: left;
    height: 31vw;
}
	
.news .info {
    font-size: 1.4vw;
}
	
.news .event {
    font-size: 1.4vw;
}
	
.news .staffblog {
    font-size: 1.4vw;
}	
	
.news .day {
    line-height: 160%;
    font-size: 1.4vw;
}	
	
.news .photobox {
    width: 100%;
    height: 17vw;
    margin-right: 1.3%;
    overflow: hidden;
    position: relative;
    margin-bottom: 5%;
}	
	
    
    /*********************2020-4 コロナ告知********************************************/

.sec-kokuti {
    width: 80%;
    margin: 0 auto;
    border: 3px solid #002060;
    color: #002060;
    text-align: center;
    font-size: 1.6vw;
    line-height: 170%;
    padding: 0 0 3%;
    /*font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";*/
}



.kokuti_bg{
background-color: #002060;
color: #ffffff;
font-size: 1.8vw;
margin: 0 0 6%;
text-align: center;
padding: 3% 0;
}

.kokuti_bg a{
text-decoration: none;
}

.kokuti_bg a:hover{
opacity:0.6;
}

.kokuti-button{
width:30%;
margin: 3% auto 0;
background-color: #ffffff;
padding: 2% 0;
text-align: center;
font-size: 1.6vw;
font-weight: bold;
color: #002060;
display: block;
}


.kokuti-t{
font-size: 3vw;
line-height: 180%;
font-weight: bold;

}
.kokuti-title {
	font-size: 2vw;
}
.kokuti-txt{
font-size: 1.4vw;
}

.kokuti-txt02{
font-size: 2.2vw;
line-height: 180%;
font-weight: bold;
}

	

    
}

/* =================================================================================================================================================
　　　　　　　　　　　　　　　　　　　　　　スマホ
==================================================================================================================================================== */
@media only screen and (max-width: 699px) {
    
.pc-only {
  display: none;
}
.sm-only {
  display: block;
}    
    
.main-image {
    margin: 0;
    padding: 0;
}

.main-image-bg {
    margin: 0% 0 5%;
    width: 100%;
}

.sec01 {
	width:90%;
    padding: 5% 0;
	background-image:none;
	height: auto;
	
	}
	
.sec01_in {
    width: 100%;
    margin: 0 auto;
}	
	
.sec01-txt {
    font-size: 16px;
    line-height: 200%;
    text-align: left;
}
	
.about_btn {
    width: 100%;
    margin: 5% auto;
}	
  
.sec02 {
    width: 100%;
	position: relative;
    background-repeat: no-repeat;
    background-size: contain;
	margin-top: -1px;
}


	
.entry_btn {
    width: 90%;
    position: absolute;
    bottom: 10%;
    left: 5%;
} 

.sec04 {
    width: 90%;
    margin: 0 auto;
    padding: 5% 0;
}
	
.sec04_l {
    width: 100%;
    float: none;
	margin-bottom: 5%;
}
	
.sec04_r {
    width: 100%;
    float: none;
}	

.test_btn {
    width: 100%;
    margin: 10% auto 0;
}	
	
	

.sec03 {
   width: 100%;
    margin: 0 auto;
    padding: 5% 0;
    position: relative;
} 
	
.sec03_in {
    width: 90%;
    margin: 0 auto;
}	
    
.sec03 .title {
        width: 100%;
	margin: 0 auto 10%
} 
	
.sec03 .cons-list {
    width: 100%;
    margin: 0 auto;
}	
	
.sec03 .cons-wrap .photo {
    height: 60vw;
    width: 80%;
    margin: 0 auto 3%;
}	
	
	
.sec03 .cons-list-out {
    margin: 0 0 0 0;
    overflow: hidden;
}    
    
.sec03 .cons-wrap {
    width: 100%;
    margin: 0 auto;
    float: none;
    box-sizing: border-box;
} 
	
	
.sec03 .cons-wrap .cons-title {
    height: 40vw;
}
    
.s-cate {
    font-size: 16px;
	line-height: 180%;
    text-align: center;
    font-weight: bold;
}	
	
.s-kaisha {
    font-size: 14px;
	line-height: 180%;
    text-align: center;
}

.sec03 .cons-wrap .s-name {
    width: 100%;
    text-align: center;
    line-height: 150%;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
}	
	
.more {
    width: 80%;
}	
	

.title03 {
    width: 90%;
    margin: -7% auto 0;
}		
	
.sec05 {
    width: 90%;
    margin: 0 auto;
    padding: 5% 0;
}
	
.cms-01 {
    width: 100%;
    margin: 0 0 3%;
   /* float: none;*/
	}
	
.news {
    width: 47%;
    margin: 0 1.5% 3% ;
    /* float: none;*/
    height: 65vw;
}
	
.news .photobox {
    width: 100%;
    height: 30vw;
    margin-right: 1.3%;
    overflow: hidden;
    position: relative;
    margin-bottom: 5%;
}	
	
.news .info {
    background-color: #a87500;
    color: #fff;
    width: 40%;
    text-align: center;
    line-height: 160%;
    font-size: 15px;
    margin-bottom: 3%;
}	
	
.news .event {
    background-color: #830000;
    color: #fff;
    width: 40%;
    text-align: center;
    line-height: 160%;
    font-size: 15px;
    margin-bottom: 3%;
}
	
.news .staffblog {
    background-color: #000055;
    color: #fff;
    width: 40%;
    text-align: center;
    line-height: 160%;
    font-size: 15px;
    margin-bottom: 3%;
}		
	
.news .day {
    line-height: 160%;
    font-size: 16px;
}	
	
.cms-area2 .blog-title {
    width: 100%;
    float: left;
    text-indent: -5px;
    font-size: 16px;
    font-weight: bold;
    line-height: 160%;
}
	
.more_rec {
    width: 80%;
    margin: 0 auto 5%;
    float: none;
    display: block;
}	
	
	
.sec06 {
    width: 100%;
    margin:0% auto 3%;
    padding-top: 42.1%;
	background-image: url("../img/top/mamebana_bg_sm.png");
	height: 0;
	background-repeat: no-repeat;
    position: relative;
	background-size: contain;
}

.sec06_in{
	width:100%;
	margin-top:-42.1%;
}
	
.sec06_in .title {
    width: 85%;
    margin: 2% auto;
}	
	
.flow {
    width: 100%;
    margin: 0 auto 5%;
}

.more_entry {
    width: 60%;
    margin: 2% auto 0;
    text-align: center;
    display: block;
}    
    

}



/********************************************************************************
ジーンズソムリエに会える店バナー
****************************************************************************************/

.sec-shop {
    width: 52.0833%;
    margin: 0 auto;
    padding: 5% 0;
}

.shoplist_bana_bana{
	width:100%;
}
.shoplist_bana_bana img{
	width:100%;
}

@media only screen and (max-width: 699px) {
	.sec-shop {
    width: 90%;
    margin: 0 auto;
    padding: 5% 0;
}


/*********************2020-4 コロナ告知********************************************/

.sec-kokuti {
    width: 90%;
    margin: 0 auto;
    padding: 5% 0;
    border: 3px solid #002060;
    color: #002060;
    text-align: center;
    font-size: 16px;
    line-height: 170%;
    padding: 0 0 3%;
    font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
}

.kokuti-pic{
width:60%;
margin: 0 auto;
}

.kokuti_bg{
background-color: #002060;
color: #ffffff;
font-size: 16px;
margin: 0 0 3%;
text-align: left;
padding: 3% 2%;
}

.kokuti_bg a{
text-decoration: none;
}

.kokuti_bg a:hover{
opacity:0.6;
}

.kokuti-button{
width:62%;
    margin: 3% auto 0;
    background-color: #ffffff;
    padding: 2% 0;
text-align: center;
font-size: 16px;
font-weight: bold;
color: #002060;
display: block;
}


.kokuti-t{
font-size: 24px;
line-height: 180%;
font-weight: bold;

}
.kokuti-title {
	font-size: 20px;
}
.kokuti-txt{
font-size: 16px;
}

.kokuti-txt02{
font-size: 24px;
line-height: 180%;
font-weight: bold;
}
/* ジーンズソムリエGP */
.sec-gp {
  width: 90%;
}
.sec-gp .gp-title {
	width: 95%;
  margin: 0 auto 3%;
}
.sec-gp .gp-txt {
  margin: 0 auto 3%;
  font-size: 13px;
  line-height: 2;
}

/* ジーンズソムリエフェスタ */
.sec-fes {
    width: 90%;
  }


.sec-bana {
    width: 90%;
    margin: 0 auto;
    padding: 0 0 5%;
}

/*********************2022-4 YouTube********************************************/
.sec07_in{
	width: 90%;
	margin: 0 auto;
	padding: 5% 0;
}
.sec07_txt {
	font-size: 16px;
}




}