@charset "utf-8";

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
   font-size: 15px;
   font-family: "Hiragino Sans",Tahoma, Verdana, sans-serif;
   background-color: #fffffc;
}

h1,h2{
   font-family: Georgia, 'Times New Roman', Times, serif;
}

h3{
   font-family: "Hiragino Sans",Tahoma, Verdana, sans-serif;
}

a{
   text-decoration: none;
}

/* 
ヘッダー
*/
.header{
   display: flex;
   position: fixed;
   background-color: #0f2350;
   width: 100%;
   height: 120px;
   justify-content: space-between;
   align-items: center;
   z-index: 10;
   top: 0;
   left: 0;
   /* padding: 0 25px; */
}

#header_shop{
    width: 38.5%;
    padding-left: 7%;
}

#header_shop a{
   font-size: 21px;
   font-family: Georgia,"Times New Roman", Times, serif;
   color: whitesmoke;
   text-decoration: none;
   font-weight: bold;
   transition: border-color .25s;  
}

#header_shop a:hover{
   color:rgb(230, 143, 68);
}

.header_nav{
   width: 23%;
   font-family: Georgia,"Times New Roman", Times, serif;   
}

.header_navlist{
   text-align: center;
}

.header_navitem{
   font-size: 17px;
   display: flex;
   white-space: nowrap;
   justify-content: space-between;
   align-items: center;
   margin: 0;
}

.header_navitem a{
   font-family: Georgia,"Times New Roman", Times, serif;
   display: block;
   color: whitesmoke;
   text-decoration: none;
   border-bottom: 2px solid transparent;
   transition: border-color .25s;
}

.header_navitem a:hover{
   color: aliceblue;
   border-bottom: 2px solid slategrey;
}

.header_nav li{
   list-style: none;   
}

.header_navlist a{
   color: whitesmoke;
}

#header_logo{
   width: 38.5%;
   text-align: right;
   margin-right: 7%;
}

#header_logo img{
   width: 13%;
}

/* 
ハンバーガーメニュー_PC非表示
*/
 #toggle_box{
   position: fixed;
   display: block;
   z-index: 3;
   right: 13px;
   top:13px;
   width: 45px;
   height: 45px;
   cursor: pointer;
   text-align: center;
}

.nav_2{
   display: none;
}

   /* ↓モバイル専用_ハンバーガーメニュー↓ */
   @media only screen and (max-width: 768px) {

      /* 
      ハンバーガーボタン
      */
      #toggle_box{
         position: relative;
         z-index: 3;
         right: 0;
         top: 0;
         width: 45px;
         height: 45px;
         cursor: pointer;
         /* -align: center; */
      }
     
      #toggle_box span{
         position: absolute;
         width: 30px;
         height: 2px;
         left: 6px;
         background:#f7f7f7;
         -webkit-transition: 0.4s ease-in-out;
         -moz-transition : 0.4s ease-in-out;
         transition: 0.4s ease-in-out;
      }
     
      #toggle_box span:nth-child(1){
         top:10px;
      }
      #toggle_box span:nth-child(2){
         top:20px;
      }
      #toggle_box span:nth-child(3){
         top:30px;
      }
     
     /* 
     ハンバーガーナビが開いている時のボタン
   　*/
      #toggle_box.active span:nth-child(1){
         top: 16px;
         left: 6px;
         background:#c0c0c0;
         -webkit-transform: rotate(-45deg);
         -moz-transform: rotate(-45deg);
         transform: rotate(-45deg);
      }
   
      #toggle_box.active span:nth-child(2),
      #toggle_box.active span:nth-child(3){
         top:16px;
         background:#c0c0c0;
         -webkit-transform: rotate(45deg);
         -moz-transform: rotate(45deg);
         transform: rotate(45deg);
      }
      .nav_2{
         display: block;
      }
   
     /* 
      ハンバーガーメニュー 部分
      */
      #toggle_menu .nav_2{
         position: fixed;
         z-index: 2;
         top: -490px;
         left:0;
         background-color: #0f2350;
         width: 100%;
         height: 490px;
         opacity: 0.88;
         padding-top: 21%;
      } 
   
      #toggle_menu .nav_2 li{
         list-style: none;
         width: 29%;
         white-space: nowrap;
         transition: .4s all;
         margin: 0 auto;
         padding-top: 8%;
      }
   
      #toggle_menu .nav_2 li:last-child{
         padding-bottom: 0;
      }
      #toggle_menu .nav_2 li:hover{
         background:#000;
      }
   
      #toggle_menu .nav_2 li a{
         color: #eee9e6;
         font-size: 1.3rem;
         text-decoration: none;
         margin: 0;
         padding-top: 1%; 
      }
   
      #toggle_menu .nav_2 li a:hover{
         background-color: #000;
      }
   
   
      /* このIDをjQueryで付与・削除する */
      #toggle_menu.nav_2.activ{
         opacity: 100;
      }

      .header{
         width: 100%;
         height: 80px;  
      }

      .header_navlist{
         display: none;
      }

      #header_logo{
         display: none;
      }   
   }
 
/* 
メイン 
*/
main{
   background-color:#f7f7f7;
}

/* 
スライドショー
*/
.slide{
   padding-top: 7%;
}

.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
   width: 94%;
   list-style: none;
   margin: 3% auto 0;
}

.slider img {
   width: 100%;/*スライダー内の画像を横幅100%に*/
   height: auto;
   object-fit: cover;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/
.slider .slick-slide {
   margin:0 1px;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
   position: absolute;/*絶対配置にする*/
   top: 42%;
   cursor: pointer;/*マウスカーソルを指マークに*/
   outline: none;/*クリックをしたら出てくる枠線を消す*/
   border-top: 2px solid #666;/*矢印の色*/
   border-right: 2px solid #666;/*矢印の色*/
   height: 15px;
   width: 15px;
}

.slick-prev {/*戻る矢印の位置と形状*/
   left: -1.5%;
   transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
   right: -1.5%;
   transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/
.slick-dots {
   text-align:center;
   margin:20px 0 0 0;
}

.slick-dots li {
   display:inline-block;
   margin:0 5px;
}

.slick-dots button {
   color: transparent;
   outline: none;
   width:8px;/*ドットボタンのサイズ*/
   height:8px;/*ドットボタンのサイズ*/
   display:block;
   border-radius:50%;
   background:#ccc;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
   background:#333;/*ドットボタンの現在地表示の色*/
}

   @media screen and (max-width:768px) {
      .slide{
         background-color: #f7f7f7;
         padding-top: 11%;
      }

      .slick-slider {
         margin-top: 11%;
         padding-top: 5%;
      }   
      .slick-slider img {
         width: 96%;
         margin: 0 2%;
      }
      
}

/* 新年あいさつ文 */
.news{
   font-size: 21px;
   padding: 5% 0 5% 21%;
}

@media screen and (max-width:768px) {
   .news{
      font-size: 0.8rem;
      margin: 0;
      padding: 5% 8%;
   }
}

/* 
トップのコメント
*/
 .top_comment p{
   font-size: 15px;
   margin-left: 5%;
   padding-top: 1%;
 }

 .top_comment_2 p{
   font-size: 13px;
   margin-left: 5%;
   padding-bottom: 1.5%;
 }

   @media screen and (max-width:768px) {
      .top_comment{
         width: 100%;
         padding: 3% 1%;
   }

      .top_comment_2{
         padding: 0.3% 1% 3% 1%;
      }   
   }


/* 
TAMA-photoshop画像
*/
.index_section_title{
   background-image: url("../images/back/index_img.jpg");
   text-align: center; 
   margin-top: 1%;
   width: 100%;
   height: 720px;
}

.index_section_title img{
   width: 52%;
   margin-top: 5%;
}


.drop-shaped{
   position: relative;
   margin:  0 auto;
   top: -15px;
   width: 15px;
   height: 15px;
   background: #0f2350;
   border-radius: 0% 100% 50% 50%/ 0% 50% 50% 100%;
   transform: rotate(45deg) skew(8deg, 8deg);
   animation: 3s cubic-bezier(.97,.03,.86,.12) 0s infinite running fall;
 }
 
 @keyframes fall {
   to {
     top: 200px;
   }
 }
 
.ripple {
   position: relative;
   margin:  0 auto;
   top: 100px;
   width: 300px;
   height: 150px;
   border-radius: 300px / 150px;
   border: 10px solid #0f2350;
   transform: scale(0.01,0.01);
   opacity: 0;
   animation: 3s ease-out 3s infinite running spread;
}
 
 @keyframes spread {
   from {
     opacity: 1;
   }
   to {
     transform: scale(1,1);
     opacity: 0;
   }
 }
 
.delay1 {
   top: -70px;
   animation-delay: 3.3s;
}
 
.delay2 {
   top: -240px;
   animation-delay: 3.7s;
}

   @media screen and (max-width:768px) {
      .index_section_title{
         width: 100%;
         height: 520px;
      }
      .index_section_title img{
         width: 100%;
         margin: 5% 0 0 0;
         padding: 5% 0;
      }
   }

/* 
カテゴリー
*/
.category{
   margin: 5% 0;
}

.category h1{
   font-size: 2.5rem;
   text-align: center;
   text-decoration: underline overline solid #0f2350 1px;
   margin-bottom: 1%;
}

.category_box{
   display: flex;
   width: 100%;
   align-items: center;
   justify-content: center;
   padding: 0 1%;    
}

.category_box_img{
   opacity : 0;
   transition : all 1s;
}

.category_box_img.active{
   opacity : 1;
 }

.category_box img{
   width: 100%;
   border-radius: 5%;
   padding: 3%;
}

/* 
All Itemボタン
*/
.section_button{
   text-align: center;
   margin: 3% 0 7% 0;
}

#button{
   font-size: 29px;
   font-family:'Times New Roman', Times, serif;
   cursor: pointer;
   padding: 1% 3%;
}

/* 
製作期間コメント
*/
/* .detail{
   font-size: 15px;
   text-align: center;
   margin: 5% 0 8% 0;
} */

   @media screen and (max-width:768px){
      .category{
        width: 100%;
        height: auto;
      }
   
      .category h1{
         font-size: 1.5rem;
         padding: 3% 0;
      }

      .category_box{
         display: block;
         width: 100%;
         align-items: center;
         margin: 0;
      }
      
      .category_box img{
         width: 100%;
         border-radius: 11%;
         padding: 1% 3%;
      }

      .detail{
         font-size: 0.9rem;
         text-align: justify;
         margin: 5% 7%;
         padding: 0.5% 0;
      }   
}

/* 
ブランドコンセプト
*/
.description_title{
   background-color: #fffffc;
   padding-top: 8%;
}

.description_title h1{
   font-size: 2.5rem;
   text-align: center;
   text-decoration: underline overline solid #0068b7 1px;
}

.description{
   display: flex;
   background-color: #fffffc;
   padding-top: 5%;
}

.description_photo{
   width: 65%;
   padding: 6%;
}

.description_photo img{
   width: 100%;
   border-radius: 13%;
}

.description_photo img {
   filter: grayscale(94%);
   transition: all 0.3s ease-in;
}
 
.description_photo img:hover {
   filter: grayscale(0%);
}

.brand{
    width: 35%;
}

.brand h2{
   font-size: 2rem;
   padding: 39% 0 0 0;
}

.brand h3{
   font-size: 1.2rem;
   font-weight: lighter;
   padding: 2% 0 0 0;
   /* padding: 0 15% 0 1%; */
   /* padding: 1% 0; */
}

.brand p{
   font-size: 0.95rem;
   line-height: 1.7rem;
   padding: 5% 15% 0 0;
}

.description_2{
   display: flex;
   background-color: #fffffc;
   padding-top: 5%;
}

.description_2_photo{
   width: 65%;
   padding: 6%;
}

.description_2_photo img{
   width: 100%;
   border-radius: 13%;
}

.description_2_photo img {
   filter: grayscale(94%);
   transition: all 0.3s ease-in;
}
 
.description_2_photo img:hover {
   filter: grayscale(0%);
}

.brand_2{
   font-size: 0.95rem;
   line-height: 1.7rem;
   width: 35%;
}

.brand_2 h2{
   font-size: 2rem;
   padding: 39% 0 0 15%;
}

.brand_2 h3{
   font-size: 1.2rem;
   font-weight: lighter;
   padding: 2% 0 0 16%;
}

.brand_2 p{
   padding: 5% 15%;
   padding: 5% 1% 0 15%;
}


/* 
ABOUTブランドコンセプト
 */
   @media screen and (max-width:768px){
      .description_title h1{
         font-size: 1.5rem;  
      }

      .description{
         display: block;
      }

      .description_2{
         display: block;
      }

      .description_photo,.description_2_photo{
         width: 100%;
      }

      .description_photo{
         width: 100%;
         padding: 3%;
      }
      
      .description_photo img{
         width: 100%;
         border-radius: 24%;
      }
      
      .description_photo img {
         filter: grayscale(94%);
         transition: all 0.3s ease-in;
      }
       
      .description_photo img:hover {
         filter: grayscale(0%);
      }

      .description_2_photo{
         width: 100%;
         padding: 3%;
      }
      
      .description_2_photo img{
         width: 100%;
         border-radius: 24%;
      }
      
      .description_2_photo img {
         filter: grayscale(94%);
         transition: all 0.3s ease-in;
      }
       
      .description_2_photo img:hover {
         filter: grayscale(0%);
      }

      .brand{
         width: 100%;
      }

      .brand_2{
         width: 100%;
      }
     
      .brand h2,.brand_2 h2{
        font-size: 1.8rem;
        font-weight: bold;
        margin: 0;
        padding: 0 0 0 8%;
      }
     
      .brand h3,.brand_2 h3{
        font-size: 1.1rem;
        font-weight: lighter;
        margin: 0;
        padding: 0 0 0 8%;  
      }
     
      .brand p,.brand_2 p{
        padding: 1.5% 8% 3% 8%;
       }
   }

.article{
   padding: 13% 0 5% 0;
}

/* .article_headline{
   text-align: center;
   padding-bottom: 5%;
} */

.feauture{
   display: flex;
   list-style: none;
   width: 100%;
}

.feautur_item{
   width: 33.333%;
}

.content{
   list-style: none;
}

/* .content_headline{
   font-size: 1.2rem;
   text-align: center;
   cursor: pointer;
   margin: 3% 0;
} */

.content_img{
   text-align: center;
   cursor: pointer;
}

.content_img img{
   border-radius: 50%; 

}

.content_text{
   font-size: 0.9rem;
   text-align: center;
   margin: 3% 0;
   padding: 0 21%;
}

@media screen and (max-width:768px){
   .article{
      width: 100%;
      padding: 8% 0 0 0;
   }

   .feauture{
      display: block;
      width: 100%;
   }

   .feautur_item{
      width: 100%;
   }

   .content_img img{
      width: 52%;
      height: 100%;
}

.content_text{
   font-size: 0.9rem;
   text-align: left;
   margin: 0 0 15% 18%;
   padding: 0 11%;
   
}
}

/* 
アコーディオンメニュー 
*/
.accordion{
   max-width: 920px;
   position: relative;
   width: 100%;
   margin: 15px auto;
   /* padding-bottom: 11%; */
}

.accordion-container{
   width: 100%;
   margin: 11% auto;
}

.accordion-item{
   margin: 15px auto;
}

#faq{
   font-size: 24px;
   font-family: Georgia, 'Times New Roman', Times, serif;
   text-align: center;
   margin: 0;
   padding: 3%;
}

.accordion-title{
   color: #333333;
   cursor:pointer;
   font-size: 16px; 
   font-family: Georgia,"Times New Roman", Times, serif;
   padding: 10px 20px;
}

.accordion-content{
   display: none;
   padding: 10px 20px;
}

.accordion-content p{
   font-size: 14px;
   /* font-family: Georgia,"Times New Roman", Times, serif; */
   font-family: "Hiragino Sans",Tahoma, Verdana, sans-serif;
   line-height: 1.5rem;
   padding: 3% 5%;
}

/* 
タイトル背景色
*/
.accordion-item:nth-of-type(1)
.accordion-title{
   background-color: #dcdcdc;
}
.accordion-item:nth-of-type(2)
.accordion-title{
   background-color: #dcdcdc;
}
.accordion-item:nth-of-type(3)
.accordion-title{
   background-color: #dcdcdc;
}

/* 
コンテンツの枠線
 */
 .accordion-item:nth-of-type(1)
 .accordion-content{
   color: #000;
 }
 .accordion-item:nth-of-type(2)
 .accordion-content{
   color: #000;
 }
 .accordion-item:nth-of-type(3)
 .accordion-content{
   color: #000;
 }

 /* 
 矢印
  */
 .accordion-title{
   position: relative;
 }
 .accordion-title::after{
   border-right: solid 2px #333333;
   border-top: solid 2px #333333;
   content: "";
   display: block;
   height: 8px;
   position: absolute;
   right: 25px;
   top: 38%;
   transform: rotate(135deg);
   transition: transform .3s ease-in-out, top .3s ease-in-out;
   width: 8px;
 }
 .accordion-title.open::after{
   top: 45%;
   transform: rotate(-45deg);
 }

   @media(max-width: 768px){
       .accordion-content p{
           font-size: 1rem;
       }
   }

   .work{
      width: 100%;
      margin: 5% 10%;
   }

   .work img{
      width: 80%;
   }

   .mens{
      color: #000;
      font-size: 1.1rem;
      font-family: Georgia, 'Times New Roman', Times, serif;
   }

   @media screen and (max-width:768px){
      .work{
         width: 100%;
         margin: 0;
      }
   
      .work img{
         width: 100%;
      }

      .banner img{
         width: 100%;
         height: auto;
         margin: 5% 0 0 0;
      }
   }

/*
  フッター 
*/
footer{
   width: 100%;
   height: 290px;
   background-color: #0f2350;
}

.footer_continer{
   display: flex;
}

.footer_logo{
   width: 30%;
}

.footer_logo img{
   width: 21%;
   margin: 11% 15%;
}

.footer_nav{
   display: flex;
   width: 30%;
   margin: 5% 0;
}

.footer_nav ul{
   list-style: none;
}
 
.footer_nav ul li a{
   color: whitesmoke;
   text-decoration:none;
}

.footer_shop{
   width: 40%;
   padding-left: 24%;
}

.footer_shop a{
   color: whitesmoke;
   text-decoration:none;
}

/* 
 フッターコピーライト
*/

.footer_copy{
   color: whitesmoke;
   font-size: 13px;
}

.footer_copy p{
   text-align: right;
   margin-bottom: 3%;
   padding-right: 5%;
}

@media screen and (max-width:768px){
   .footer{
      width: 100%;
      height: 190px;
   }
   .footer_continer{
      width: 100%;
   }
   .footer_logo{
      width: 20%;
   }
   .footer_logo img{
      width: 100%;
      margin: 24% 0 0 24%;
      padding: 0%;
   }
   .footer_nav{
      width: 70%;
      margin: 11% 0 0 16%;
      padding: 0;
   }
   .footer_item{
      font-size: 0.9rem;
      margin:0 0 0 3%;
   }
   .footer_shop{
      font-size: 0.9rem;
      margin:0 0 0 3%;
   }
   .footer_copy{
      font-size: 0.8rem;
   }
   .footer_copy p{
      text-align: center;
      padding: 8% 0 1% 0;
   }
 }