@charset "utf-8";
/* CSS Document */

body {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    color: #3D3D3D;
}

#container {
    width: 100%;
    margin: 0 auto;
}

.section {
    margin: 0 auto 0;
    padding: 50px 0;
}


.section-inner{
width: 94%;
max-width: 1250px;
margin: 0 auto;
}





.section-text {
    font-size: 1.1rem;
    line-height: 1.8;
}


.mv {
    margin: 40px auto;
    max-width: 1600px;
position: relative;
}

.mv-title {
position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
}



#intro {
    width: 75%;
    margin: auto;
    padding: 0 0 80px;
    max-width: 640px;
}

.intro-subtitle {
    font-size: 2.2rem;
    font-weight: 600;
    letter-spacing: 1px;
}
.intro-icon {
    max-width: 400px;
    width: 50%;
    margin: auto;
}
.intro-text {
    font-size: 1.2rem;
    line-height: 2;
    margin: 10px auto;
}
    
/** イントロのテキスト装飾 **/    

.c-marker {
    background: -webkit-linear-gradient(left, rgb(255,250,153) 50%, transparent 50%);
    background: -moz-linear-gradient(left, rgb(255,250,153) 50%, transparent 50%);
    background: linear-gradient(left, rgb(255,250,153) 50%, transparent 50%);
  background-repeat: no-repeat;
  background-size: 200% .8em; 
    background-position: 100% .5em;
    transition: 2s;
}
.c-marker.is-active{
    background-position: 0% .5em;
}
    
h2.section-heading {
    text-align: center;
    margin-bottom: revert-layer;
    font-size: 4rem;
    font-weight: 600;
    line-height: 1;
}


#hat {
    background-color: #8addcf;
}
    
    .hat-text-area {
    width: 70%;
    margin: 80px auto;
}

.hat-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.hat-block {
    width: 25%;
    margin: 4.1666666%;
}

.hat-block-heading {
    font-size: 1rem;
    font-weight: 600;
    line-height: 2;
}


.hat-block-text {
    margin-bottom: 0.5rem;
    border-bottom: solid 1.5px;
}
#JACKET {
    background-color: #ba8a61;
}

.jacket-mv {
    margin: auto;
}



.jacket-text-area {
    margin: 20px auto 20px;
}

.jacket-block-cresit {
    font-size: 11px;
    margin-bottom: 10px;
}

h3.section-subheading {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 10px;
}


.jacket-wrapper {
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
}

.jacket-block {
    width: 45%;
    margin: 2.5%;
}


.jacket-block-heading {
    font-size: 1rem;
    font-weight: 600;
    line-height: 2;
}


.section-twoculum {
    display: flex;
    flex-wrap: wrap;
}

.twoculum-left {
    width: 50%;
    padding: 30px;
}

.twoculum-right {
    width: 50%;
}

#pants {
    background-color: gainsboro;
}


.pants-mv {
    width: 80%;
    margin: auto;
}


.pants-text-area {
    width: 80%;
    margin: 20px auto;
}



.pants-wrapper {
    position: relative;
    margin: 80px auto;
}
    
.pants-text {
    margin-bottom: 8px;
}    
.pants-block {
    width: 35%;
}

.pants-block-heading {
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    margin: 0 0 6px;
}

.pants-block.pants-first {
    width: 35%;
    margin-left: 15%;
}


.pants-block.pants-second {
    width: 35%;
    margin-left: 60%;
    margin-top: -200px;
}

.pants-block.pants-third {
    width: 40%;
    margin: 50px auto;
}


.section-img-area.tshirt-wrapper {
    display: flex;
}


.section-img-area.backpack-wrapper {
    display: flex;
}


#Tshirt {
    background-color: #ffebeb;
}

    
    
.tshirt-mv {
    margin: auto;
}

.tshirt-wrapper {
    display: flex;
    margin: 80px auto;
	width: 90%;
}

.tshirt-text-area {
    width: 60%;
    margin: 80px auto;
}
    
    
.tshirt-block {
    border-top: solid 1px;
    border-left: solid 1px;
    border-bottom: solid 1px;
}

.tshirt-block:last-child{
border-right: solid 1px;
}



.tshirt-block-heading {
    padding-left: 5px;
    line-height: 1.8;
    font-size: 1rem;
    font-weight: 600;
}

.tshirt-block-image {
    border-top: solid 1px;
}

.tshirt-block-cresit {
    border-top: solid 1px;
    padding-left: 5px;
    line-height: 1.8;
}

.tshirt-main-cresit {
    border: none;
    text-align: right;
}

#backpack {
    background-color: #dce6d0;
}


.backpack-block {
    margin: 10px;
}
.backpack-text-area {
    width: 60%;
    margin: 80px auto;
}


.backpack-block-heading {
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    margin: 0 0 6px;
}


    footer {
    margin-top: 0;
}

    
.swiper-slide img {
  height: auto;
  width: 100%;
}    

    
@media (max-width: 780px) {
 
  
   .intro-subtitle {
    font-size: 1.8rem;
    font-weight: 600;
    letter-spacing: 1px;
} 
    
    
    .intro-text {
    font-size: 1rem;
    line-height: 2;
    margin: 10px auto;
}
    
  .section-text {
    font-size: 0.9rem;
    line-height: 1.8;
}


    
   h2.section-heading {
    text-align: center;
    margin-bottom: revert-layer;
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1;
} 
    
  #intro {
    width: 85%;
    margin: auto;
    padding: 0 0 80px;
    max-width: 640px;
}  
    
    
    
  .twoculum-left {
    width: 100%;
    padding: 30px;
}

    .twoculum-right {
    width: 100%;
}
    
  .hat-block {
    width: 46%;
    margin: 0 2% 40px;
}  
    
    .tshirt-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.tshirt-text-area {
    width: 80%;
    margin: 40px auto;
}
    
    .tshirt-block {
    border-top: solid 1px;
    border-left: solid 1px;
    border-bottom: solid 1px;
    border-right: solid 1px;
    margin-bottom: 20px;
    /* width: 50%; */
}
    
.tshirt-block-image a img {
    width: 75%;
    margin: 0 12.5%;
}
    
    
.pants-mv {
    width: 100%;
    margin: auto;
}

    
  .pants-block.pants-first {
    width: 75%;
    margin-left: 15%;
}  
   .pants-block.pants-second {
    width: 70%;
    margin-left: 15%;
    margin-top: 20px;
} 
    
    
   .pants-block.pants-third {
    width: 70%;
    margin-left: 15%;
    margin-top: 20px;
} 

    .backpack-text-area {
    width: 80%;
    margin: 40px auto;
}
    
    
  .section-img-area.backpack-wrapper {
    display: flex;
    flex-wrap: wrap;
}  
   .backpack-block {
    margin: 10px;
    width: 90%;
    margin: 20px auto;
} 
    
    }
    