/*
Theme Name: hachiware
Theme URI: https://hachiware.velvelnovel.com/
Author: conjac
Author URI:
Description: まゆ人形工房「風屋」 2025年作品展
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: hachiware
*/

.hina-mincho-regular {
  font-family: "Hina Mincho", serif;
  font-weight: 400;
  font-style: normal;
}

/* リセット・共通 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Hina Mincho", "MS P明朝", serif;
  color: #1f1f1f;
}
ul{margin:0;padding:0;} li{list-style:none;} a{text-decoration:none;}
.sec-title{font-size:1.5rem;text-align:center;}

/*-------------------------------------------
ヘッダー
-------------------------------------------*/
#header {
  position: fixed; top: 0; width: 100%; height: 50px; z-index: 100;
  transition: background-color 0.5s ease; background-color: transparent;
}
.header-bg {
  position: relative;
  max-width: 1500px;
  background-image: url("head-1300-854.webp");
  background-size: cover;
  background-position: center;
  margin: 0 auto;
  height: 800px;
}
.hero-inner{ position:relative; height:100%; max-width:1000px; margin:0 auto; padding:0 4%; }

#header.scrolled {
  background-color: rgba(136, 171, 138, 0.9);
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.header-wrapper{
  max-width: 1000px; margin: 0 auto; display:flex; justify-content:space-between; align-items:center;
  height: 50px; padding: 0 4%;
}
#header ul{display:flex;}
#header li{margin-left:30px;}
#header li a{color:#fff;}
#header li a:hover{opacity:0.7;}
#header h1{font-size:0.8rem;text-align:center;}
#header h1 a{color:#fff;}
#header h1 a:hover{opacity:0.7;}

.vertical-text{
  position:absolute; top:14%; left:50%; transform:translateX(-50%);
  writing-mode: vertical-rl; text-orientation: upright;
  font-family: "Hina Mincho","MS P明朝",serif; font-size:2.2rem; letter-spacing:0.25em;
  color: rgba(255,255,255,0.95); text-shadow:0 2px 10px rgba(0,0,0,0.35);
  opacity:0; animation: fadeDown 1.2s ease-out 0.2s forwards; z-index:60;
}
@keyframes fadeDown {
  0% { opacity:0; transform:translate(-50%, -12px); }
  100% { opacity:1; transform:translate(-50%, 0); }
}

.header-content{
  position:absolute; bottom:6%; left:4%; right:auto;
  opacity:0; animation: fadeUp 1s ease-out 0.4s forwards; color:#fff;
}
.header-content h2{ font-size:3rem;}
.header-content p{ font-size:1rem; }
@keyframes fadeUp { 0%{opacity:0; transform:translateY(12px);} 100%{opacity:1; transform:translateY(0);} }

.contact-btn{
  margin-top:10px; display:inline-block; background-color: rgba(80,135,99,0.7);
  color:#fff; padding:10px 20px; font-size:0.7rem; font-weight:bold; transition:background-color .3s;
}
.contact-btn:hover{ background-color: rgba(1,59,103,0.4); }

@media screen and (max-width:600px){
  .header-bg{ background-image:url("head-800-1154.webp"); height:700px; }
  .header-wrapper{ flex-direction:row; justify-content:space-between; align-items:center; padding:0 4%; }
  .vertical-text{ top:12%; font-size:1.6rem; letter-spacing:0.3em; }
  .header-content h2{ font-size:2.4rem; }
  .header-content p{ font-size:0.9rem; }
}

/*-------------------------------------------
appreciate 感謝
-------------------------------------------*/
#appreciate {
    background-color: white;
    padding:50px 0; margin:0;
}

#appreciate .wrapper { max-width:700px; margin:0 auto; padding:0 4%;}
#appreciate .item{ box-sizing:border-box; padding:30px; border: 1px solid #c8c8c8;}
#appreciate p{ margin-bottom:2rem; line-height:2rem; color:#444; }

#appreciate img {
    width: 100%;
    margin-bottom: 20px;
    display: block;
}

#appreciate .appreciate-item {
  box-sizing:border-box; padding: 80px 60px 60px 60px;
}

#appreciate .appreciate-item p { margin: 0;}

/*-------------------------------------------
event
-------------------------------------------*/
#event{ background:#fff; padding:50px 0; margin:0; }
#event .wrapper{ max-width:700px; margin:0 auto; padding:0 4%; }
#event .item{ box-sizing:border-box; padding:10px; }
#event .heading{ text-align:center; font-size:2rem; font-weight:700; color:rgb(116,144,118); margin-bottom:30px; letter-spacing:0.05em;}
#event h2{ text-align:center; color:#444; }
#event p{ margin-bottom:2rem; line-height:2rem; color:#444; }
#event img {
    width: 100%;
    display: block;
}
@media screen and (max-width:600px){ #event .wrapper{ flex-direction:column; } #event .item{ width:100%; } }

/*-------------------------------------------
info
-------------------------------------------*/
#info{ background:#fff; padding:40px 0; margin:0; }
#info .wrapper{ max-width:700px; margin:0 auto; padding:0 4%; }
#info .info-item{ box-sizing:border-box; padding:10px; }
#info .info-heading{ text-align:center; font-size:2rem; font-weight:700; color:rgb(116,144,118); margin-bottom:20px; }
#info h2{ text-align:center; margin-bottom:10px; font-size:1.5rem; color:#444; }
#info p{ font-size:0.9rem; margin-bottom:1rem; line-height:2rem; color:#444; }
#info .map-wrap{ margin-top:40px; }
@media screen and (max-width:600px){ #info .wrapper{ flex-direction:column; } #info .info-item{ width:100%; } }

/*-------------------------------------------
footer
-------------------------------------------*/
#sns{
  background-color: rgba(136,171,138,0.3); color:#444; font-size:1rem; padding:10px 20px; text-align:center;
}
#sns .sns-item{ box-sizing:border-box; padding:10px; }
#sns h3{ font-size:1.3rem; margin:20px auto; }
#sns p{ font-size:0.8rem; line-height:1.5rem; margin:20px auto; }

.insta_btn2{ margin-top:10px; color:#FFF; border-radius:7px; position:relative; display:inline-block;
  height:30px; width:120px; text-align:center; font-size:13px; line-height:30px;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; overflow:hidden; text-decoration:none;
}
.insta_btn2:before{
  content:''; position:absolute; top:0; left:0; width:100%; height:100%;
  background: linear-gradient(15deg, #ffdb2c, rgb(249,118,76) 25%, rgba(255,77,64,0) 50%) no-repeat;
}
.insta_btn2 .fa-instagram{ font-size:22px; position:relative; padding-right:10px; top:4px; }
.insta_btn2 span{ display:inline-block; position:relative; transition:.5s; }
.insta_btn2:hover span{ transform: rotateX(360deg); }

body.admin-bar #header { top: 32px; }               /* PC */
@media (max-width: 782px) {                         /* WP標準ブレーク */
  body.admin-bar #header { top: 46px; }             /* モバイル */
}