@charset "utf-8";

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

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

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

h3,h4{
   font-family:Tahoma, Verdana, sans-serif;
   font-weight: lighter;
}

/* 
ヘッダー
*/
.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;
 }

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

/* 
トップ画面
 */
.section_info{
   /* background-image: url("../images/back/about_img.jpg"); */
   width: 100%;
   height: 810px;
   text-align: center;
}

.section_info img{
   width: 42%;
   text-align: center;
   padding-top: 330px;
}

/* 写真マルから広がる */
.circle-spread{
   animation: circle-spread 2s cubic-bezier(.4, 0, .2, 1);
   background-image: url("../images/back/about_img.jpg");
   content: "";
   width: 100%;
   height: 800px;
   background-position: center;
   background-size: cover;
 }
 
 @keyframes circle-spread {
   0% {
     clip-path: circle(0 at 50% 50%);
   }
   
   100% {
     clip-path: circle(100% at 50% 50%);
   }
 }

 
 /* 
AllMandmadeSilverアニメ
*/
.info{
   width: 100%;
   text-align: center;
   padding: 11% 0;
}

.info img{
   width: 50%;
}

/* 
About
 */
.section_headline{
   font-size: 42px;
   text-align: center;
   margin-top: 3%;
}

.section_inner,.section_inner2{
   display: flex;
   width: 100%;
   padding: 1% 5%;
}

.section_photo{
   width: 50%;
}

.section_photo img{
   width: 100%;
   border-radius: 7%;
   padding: 5%;
}

.category_1{
   width: 50%;
   margin-top: 11%;
   padding: 3% 13% 0 5%;
}

.category_2{
   width: 50%;
   margin-top: 11%;
   padding: 8% 5% 0 13%;
}

.category_1 h2,.category_2 h2{
   font-size: 2rem;
   padding-left: 1%;
}

.category_1 h3,.category_2 h3{
   font-size: 1rem;
   padding: 0 0 3% 1%;
}

.category_1 p,.category_2 p{
   font-size: 0.9rem;
   padding: 0 1.5%;
}

@media only screen and (max-width: 768px) {
   .section_info{
      width: 100%;
      height: 490px;
    
      /* background-color: red; */
   }

   .circle-spread{
      width: 100%;
      height: 490px;
     
   }

   .circle-spread img{
      width: 100%;
      text-align: center;
      margin: 0;
      padding: 55% 0 0 0;
   }

   .info{
      width: 100%;
      padding: 5% 1.5% 0 1.5%;
   }
   
   .info img{
      width: 100%;
      text-align: center;
      margin: 0;
      padding: 0;
   }

   .section_headline{
      font-size: 1.5rem;
      text-align: center;
      margin: 5% 0;
   }

   .section_inner,.section_inner2{
      display: block;
      width: 100%;
      margin: 0;
      padding: 0;
   }

   .section_photo{
      /* width: 100%; */
      margin: 0;
      padding: 0;
   }

   .section_photo img{
      width: 80%;
      padding: 5% 10%;
   }

   .section_photo{
      width: 100%;
   }

   .section_photo img{
      width: 100%;
      padding: 5%;
   }

   .category_1,.category_2{
      width: 100%;
      margin-top: 3%;
      padding: 3% 5%;
   }

   .category_1 h2,.category_2 h2{
      font-size: 1.8rem;
      padding-left: 1.5%;
   }
   
   .category_1 h3,.category_2 h3{
      font-size: 1rem;
      padding: 0 0 3% 3%;
   }

   .category_1 p,.category_2 p{
      font-size: 0.9rem;
      padding: 0 3%;
   }
}



/* 
雑学あれこれ 
*/

.article{
   background-image: url("../images/back/about_img.jpg");
   width: 100%;
   height: 1150px;
   margin-top: 7%;
   padding: 5% 0; 
}

.article img{
   border-radius: 50%;
   margin: 3% 0 0 11%;
}


.article_inner{
   color: #000000;
   background-color: rgba( 255, 255, 255, 0.75 );
   width: 80%;
   /* border-radius: 3%; */
   margin: 5% 10%; 
}

.content{
   display: flex;
   padding: 3% 0 1.5% 0;
}

.content2{
   display: flex;
   padding: 1.5% 0 3% 0;
}

#content_item,#content2_item{
   width: 100%;
   list-style: none;
   padding: 0 6%;
}

.feauture_headline{
   font-size: 18px;
   list-style: none;
   padding-top: 11%;
}

.feauture_description{
   width: 100%;
   padding: 6% 0 8% 0;
}

/* 
プロフィール
*/
.avatar{
   display: flex;
   width: 100%;
   height: 420px;
}

.avatar_prof{
   width: 31%;
   padding: 11% 0 0 11%;
}

.avatar_prof h2{
   font-size: 2.4rem;
   font-family:Georgia, 'Times New Roman', Times, serif;
   font-weight: lighter;
   padding-left: 8%;
}

.avatar_prof h3{
   font-family:Georgia, 'Times New Roman', Times, serif;
   padding: 1% 0 1% 11%;
}

.avatar_comment{
   display: flex;
   width: 69%;
   margin: 11% 5% 0 5%;
}

.avatar_prof h4{
   font-size: 0.9rem;
   padding: 8% 3% 0 24%;
}

.avatar img{
   border-radius: 50%;
   margin-left: 8%;
}

@media only screen and (max-width: 768px) {
   .content,.content2{
      display: block;
     
   }

   .article{
      width: 100%;
      height: 1490px;
      margin-top: 7%;
      padding: 5% 0; 
   }

   .article img{
      width: 80%;
      height: auto;
      border-radius: 50%;
      margin: 1.5% 10%;
   }

   .article_inner{
      color: #000000;
      background-color: rgba( 255, 255, 255, 0.75 );
      width: 94%;
      margin: 11% 3%;
      padding: 0;
   }

   .avatar{
      display: block;
      width: 100%;
      height: 275px;
   }

   .avatar_prof h2{
      font-size: 2rem;
      padding: 29% 0 1% 24%;
   }
   
   .avatar_prof h3{
      font-size: 1rem;
      font-family:Georgia, 'Times New Roman', Times, serif;
      padding: 1% 0 1% 24%;
   }

   .avatar_comment{
      width: 100%;
      margin: 0;
      padding: 0 3%;
   }

   .avatar_comment h4{
      width: 65%;
      font-size: 0.8rem;
      margin: 0;
      padding: 5% 3% 0 5%;
   }

   .avatar_comment img{
      width: 35%;
      height: auto;
      margin: 0;
      padding: 3%;
   }

   
  
   
   
   .avatar_prof{
     padding: 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;
      padding-left: 11%;
   }
   .footer_copy{
      font-size: 0.8rem;
   }
   .footer_copy p{
      text-align: center;
      padding: 8% 0 1% 0;
   }
 }