@charset "UTF-8";
@import url("./reseter.min.css");
@import url("./nav.css?8");
body{
    font-size:15px;
    background-color: #fff6e9;
    font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
    font-feature-settings: "palt";
}

*{min-width:0;}
.ss{font-family:'Segoe UI',SegoeUI,'Yu Gothic UI','Meiryo UI',"Helvetica Neue",Helvetica,Arial,sans-serif;}

h1{margin:0; height:auto; color: #947F41; font-family:'游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif; letter-spacing: 3px;}

div.upper_image>h2{margin:0; height:auto; color: #947F41; font-family:'游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif; letter-spacing: 3px;}
h2{letter-spacing: 2px;}
body a:hover{color:#AAA;}
a, a:hover, a:visited{color: #947F41; text-decoration: none;}


body .owl-carousel .owl-item {
  -webkit-animation-duration: 3s !important;
  animation-duration: 3s !important;
  max-height: 700px;
  position: center center;
}


body .logotype img{
    max-width:400px;
    filter: drop-shadow();}

.bg_container{
    width: 100%;
    height: 50vw;
    max-height: 700px;
    margin-bottom:-50vw;
    margin-bottom: max(-50vw, -700px);
  }

  .bg_container div{
    width:100%;
    height:100%;
    background-size: cover;
    background-position: center center;
    z-index: -1;
  }

div.kt{
  position: relative;
  z-index: 2;
  width: 100%;
  height: 50vw;
  max-height: 700px;
}
ul.kt_jump
{
  width: 100%;
  list-style-type: none;
  padding:5vw;
  text-align: right;
}

@media screen and (max-width: 40em) {
  ul.kt_jump
  {
    padding:5vw;
  }
}


ul.kt_jump *{
  transition: 0.3s;
}

ul.kt_jump li a{
  font-family: '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif;
  font-size:3vw; 
  line-height: 6vw;
  color:white;
  opacity: 80%;
  text-shadow:0 0 8px  #000;
}

ul.kt_jump a:hover{
  opacity: 50%;
}

#canvas{
  position: absolute;
  height: 30vw;
  z-index: 2;
  text-align: center;
  margin-top: 80px;
  top:7vw;
  left: 50%;
  transform: translate(-50%, 0);
}


@media screen and (min-width: 48em) {

  ul.kt_jump li a{
    font-size:2vw; 
    line-height: 4vw;
  }

  #canvas{
    margin-top:calc(220px);
    top:0;
    max-height: 350px;
  }
}

.scbk{
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.fnf_container svg {height:50%; filter: opacity(0.6);}

.concept{
    background-color: #134525;
    text-align: center;
    padding:3rem 1rem;
    margin:0;
}
.concept h3{
    color:#CABC98;
    text-decoration: none;
    margin:1rem 0 2rem 0;
}

.concept p{color:#EEE; letter-spacing: 0.05rem; line-height: 1.8rem;}
.concept p span{letter-spacing: 0.3rem;}

.sns_wrapper{width:100%; background-color: #fff6e9; padding:2rem; text-align: center;}
.sns_wrapper a{margin:1rem; display: inline-block;}
.sns_wrapper a:hover{filter:opacity(0.6);}
.sns_wrapper a img{ width:50px; height:auto; display: inline-block;}


.ameblo_wrapper{width:100%; background-color: #fff6e9; padding:2rem;}
a.ameblolink{display: flex; width:95%; height:70px; max-width:430px; margin:2rem auto; border: solid 1px rgb(35,123,49); padding-left:1rem; border-radius: 1rem; align-items: center; justify-content: flex-start;}
a.ameblolink:hover{filter:opacity(0.7);}
a.ameblolink img{ height:4rem;}
a.ameblolink div{padding-left:1rem;}
a.ameblolink h2{font-size: 20px; line-height:18px; letter-spacing: normal;}
a.ameblolink p{font-size: 11px; line-height: 15px; margin:0;}
a.ameblolink, a.ameblolink:visited, a.ameblolink:hover{color:rgb(35,123,49); text-decoration: none; font-family:'Segoe UI',SegoeUI,'Yu Gothic UI','Meiryo UI',"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: bold;}



.instagram_wrap{display:flex; flex-direction:row; align-items: flex-start; justify-content: space-evenly; padding:1rem; flex-wrap: wrap;}

.instagram_wrap h2{font-size:16px; padding:2rem 0 0rem 0; line-height: 1.8rem;}

.instagram_wrap h2 img{margin-bottom:5px;}
.instagram_embed{margin:1rem; text-align: center;flex-basis: 46.5%; flex-grow: 1;}

.instagram_embed.dos{border:none;}

footer{text-align:center;}
body footer address{font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;}

@media screen and (max-width: 500px) {
  .instagram_embed{flex-basis: 90%; margin-bottom:2rem;}
  .instagram_wrap{display:flex; flex-direction: row;}
}

@media screen and (min-width: 48em) {
    .nopc{display:none;}
  }



  /*_______services_______*/


  .upper_image{height:auto; width:100%; height: 50vw; max-height: 700px; background-image:url(../image/t_mens-tshirts.jpg); background-size: cover; 
    background-position: center center; text-align: center; display: flex; align-items: center; justify-content: center;}

  .services{
    display: flex;
    max-width:1350px;
    margin:3rem auto 0rem auto;
    line-height: 1.7rem;
    flex-basis: 50%;
  }
  .services.uno, .services.tres{
    flex-direction: row;
    background-color:#134525;
    color:#CCC;
  }
  .services.uno h2,  .services.tres h2{color:#CABC98}
  .services .service_img{
    display: flex;
    flex-basis: 50%;
    flex-grow: 1;
    flex-wrap: wrap;
    padding:1rem;
    justify-content:space-evenly;
    min-height: 300px;
    background: rgb(238,238,238);
    background: linear-gradient(129deg, rgba(238,238,238,1) 17%, rgba(195,193,191,1) 79%);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

}
  .services .service_img.men{background-image: url(../image/img_mens.jpg); }
  .services .service_img.women{background-image: url(../image/img_women.jpg); }
  .services .service_img.soko{background-image: url(../image/img_soko.jpg); }  
  .services .service_img.kako{background-image: url(../image/img_juki.jpg); }
  

  .services .service_img img{
    min-width: 0;  
    flex-basis: 27%;
    align-self:center;
    margin-bottom:0rem;
    border-radius: 0.5rem;
    object-fit: cover;
    height: 200px;
    object-position: center;
  }


  .services .service_img img{
    height: 150px;
    margin:1rem 0;
      }
/*
  .services.tres .service_img img{
    height:200px;
    flex-basis:42.5%;
  }
  */    

  .services .service_img img.first{align-self: center;}
  .services .service_img img.second{align-self: center;}  

  .services.dos{
    background-color:#FFF;
    color:#134525;
    }


  .services.reverse{flex-direction: row-reverse;}
  .service_txt{flex-basis: 50%; flex-grow: 1; padding:3rem; }
  .services a, .services a:visited{color: #CABC98; text-decoration: underline;}

  .concept.cbrand{background-color: white; margin:3rem auto;}
  .cbrand .brands{background-size:cover; display: flex; flex-basis: 50%; flex-grow: 1; flex-wrap: wrap; padding:1rem; justify-content:center; gap:1rem; align-items: center;}

  .cbrand h3{
    background-color:#134525;
    padding:0.5rem 2rem;
    border-radius: 5px;
    width:auto;
    display: inline-block;
  }
  .cbrand h4{margin:2rem auto 0 auto;}

  .cbrand .brands img{
    min-width: 0;  
    flex-basis:auto;
    align-self:center;
    margin-bottom:0rem;
    border-radius: 0.5rem;
    object-fit: contain;
    width:auto;
    height: 150px;
    object-position: left;
  }


 
  @media screen and (max-width: 48em) {
    body .services {
      flex-direction: column;
      flex-wrap: wrap;
    }

    .services .service_img img{margin-bottom:1rem;}
    .services .service_img, .services .service_txt{flex-basis: 100%;}
  }
  


  /*_______company_______*/
  .upper_image.com{background-image:url(../image/t_sewingm.jpg); }
  .company{
    display: flex;
    max-width:1350px;
    margin:auto;
    flex-direction: column;
    background-color:#fff6e9;
    color: #134525;
    background-image: url(../image/jpn_osaka.png);
    background-size: 20% auto;
    background-repeat:no-repeat;
    background-position: 90% 5%;
  }

  @media screen and (max-width: 48em) {
    body .company {
      background-size: 35% auto;

      background-position: 100% 5%;
    }
  }

  .company.uno h2{color:#CABC98}

  .company_jpn{flex-basis: 50%;flex-grow: 1;}

  .company_img{flex-basis: 50%;flex-grow: 1;}
  .company_img img{width:100%; margin-bottom}
  .company_txt{flex-basis: 50%;flex-grow: 1; padding-top:2rem; }
  .company_txt table{
    margin:auto;
    max-width:90%;
    letter-spacing: 0.05rem; 
    border-collapse: separate;
    border-spacing: 0 1.5rem;}
  .company_txt table td {padding:0 0.5rem;}
  .company_txt table td:first-child {border:none; min-width:6rem; color: #947F41; text-align: right;}
  .company_txt table td{ border-left: #947F41 1px solid;} 
  .company_txt table td:nth-child(2){font-family:'Segoe UI',SegoeUI,'Yu Gothic UI','Meiryo UI',"Helvetica Neue",Helvetica,Arial,sans-serif;}
  .company_txt table a,.company_txt table a:hover,.company_txt table a:visited{color:#134525; text-decoration: none;}

  .map{margin:2rem auto; min-height:600px; max-width:90%;}


  /*_______contact_______*/
  .upper_image.con{background-image:url(../image/t_buildings.jpg); }


  /*_______down arrow_______*/

  .scrolldown1{
    /*描画位置※位置は適宜調整してください*/
  position:absolute;
  right:10%;
  bottom:10px;
    /*全体の高さ*/
  height:150px;
  text-orientation: sideways;
}

/*Scrollテキストの描写*/
.scrolldown1 span{
    /*描画位置*/
  position: absolute;
  left:-15px;
  top: -15px;
    /*テキストの形状*/
  color: #AAA;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}

/* 線の描写 */
.scrolldown1::after{
  content: "";
    /*描画位置*/
  position: absolute;
  top: 0;
    /*線の形状*/
  width: 1px;
  height: 150px;
  background: #AAA;
    /*線の動き永遠にループ*/
  animation: pathmove 5.4s ease-in-out infinite;
  opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
  0%{
    height:40px;
    top:0;
    opacity: 0;
  }
  30%{
    height:80px;
    opacity: 1;
  }
  100%{
    height:0;
    top:150px;
    opacity: 0;
  }
}