@charset "UTF-8";
/* CSS Document */
html {
  font-size: 62.5%; /* 16px * 62.5% = 10px */
  width: 100%;
  box-sizing: border-box;
}
body {
  color: #333; /* RGB */
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  font-weight: 500;
  font-size: 1.6em;
  line-height: 2.4rem;
  text-align: center;
}
section h2 {
  font-size: 2.4rem;
}

.none {
  display: none;
}
/******************************header******************************/
.header {
  height: 180px;
  background-color: #FFFFFF;
  position: relative;
  font-size: 1.5rem;
  position:-webkit-sticky; position:sticky; top:0;
  z-index: 99999;
  
}

.header ul {
  font-size: 1.2rem;
  color: #cad0d2;
  position: absolute;
  right: 5%;
  top: 30%;
}

.header__div_ul {
  align-items: end;/*丸山さん追加*/
  display: flex;
  flex-direction: row;
  
  }
.header__div_ul_1 {
  display: flex;
  flex-direction: row;
   justify-content: space-between;
  align-items: flex-end;
}
.header__div_ul_2 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}


.header-logo {
  position: relative;
  left: 0px;
  top: 0px;
  max-width: 370px;
  max-height: 109px;
  object-fit: cover; /*写真を左右対称で調整してくれる*/
  /* object-position:0 0;*/
  background-size: auto; /*100% 100% に変えた。本当はAuto*/
  background-repeat: no-repeat;
  padding: 0px;
  margin-bottom: 60px;
}
.header-logo img {
  width: 100%;
  height: 100%;
}




.header__navigation {
  display: none;
  font-size: 1.5rem;
}
.nav-drawer__title_wrapper {
  text-decoration: none;
  color: #cad0d2;
  display: inline-block;
  margin-bottom: 10px;
}
.header nav ul li a {
    text-decoration: none;
    color: #000;
  }



.woods .JPN {
  vertical-align: bottom;/*日本語２段丸山さん追加*/
}

.online .JPN {
  vertical-align: bottom;/*日本語２段丸山さん追加*/
}
.diy .JPN {
  vertical-align: bottom;/*日本語２段丸山さん追加*/
}
.JPN {  
  font-size: 1.2rem;
  font-family: ten-mincho-text, serif;
  line-height: 1;/*丸山さん追加*/ 
  display: inline-block;
  padding-top: 20px; 
  width: 100px;
  margin-bottom: 0px;
  
}

.eng {
  font-size: 1.2rem;
  line-height: 1.6rem;
  font-family: 'Cormorant', serif;
  display: inline-block;
  width: 100px;
  margin-bottom: 0px;
  border: none;
  box-sizing: border-box;
  vertical-align: bottom;
}

/************************ navigation　ハンバーガー ************************/
.open-button, .close-button {
  display: none;
}
@media(max-width:1000px) {

  .open-button {
    display: block;
    position: absolute;
    right: 10px;
    top: 35px;
    width: 40px;
    height: 40px;
    cursor: pointer;
  }
  .open-button span, .open-button span:before, .open-button span:after {
    position: absolute;
    height: 1px;
    width: 25px;
    border-radius: 3px;
    background: #000;
    display: block;
    content:"";
  }
  .open-button span:before {
    bottom: -8px;
  }
  .open-button span:after {
    bottom: -16px;
  }
  .close-button {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    color: #000;
    font-size: 20px;
    padding: 20px;
  }
  
  
  .header nav {
    display: none;
    z-index: 100000;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    width: 70%;
    height: 100%;
    padding-top: 5px;
    box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.4);
  }
  .header nav ul li {             
    border-bottom: solid 1px rgba(255, 255, 255, 0.5);
  }
  .header nav ul li:first-child {             
    border-top: solid 1px rgba(255, 255, 255, 0.5);
  }
  .header nav ul li a {
    font-weight: 600;

    text-decoration: none;
    color: #000;
  }
  
  /*コピーしたk*/ 
  .nav-drawer__wrapper{
    position: relative;
    width: 100%;
    height: auto;
  }
  .nav-drawer__logo {
    position: relative;
    left: 5px;
    top: 5px;
    max-width: 140px;
    max-height: 69px;
    object-fit: cover; /*写真を左右対称で調整してくれる*/
    object-position:0 0;
    background-size: auto; /*100% 100% に変えた。本当はAuto*/
    background-repeat: no-repeat;

    padding-bottom: 60px;
    
  }
  .nav-drawer__logo img {
    width: 100%;
    height: 100%;
  }
  .nav-drawer__title_wrapper{
    padding-top: 20px;
     width: 100%;
    height: auto;
    
    
  }
  
  .header__div_ul {
    margin-top: 120px;
    text-align: left;
    display: flex;
    align-items:flex-start;
    flex-direction: row;
    height: 300px;
  }
  .header__div_ul_1 {
  display: flex;
  flex-direction: column;
   justify-content: space-between;
}
.header__div_ul_2 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

  
  .home, .about, .woods, .online, .diy, .inquiry {
    margin: 5px;
    max-width: 80px;
    text-align: left;    
  }
  p.JPN {
    display: none;
  }
  
  
  .header ul {
    font-size: 1.2rem;
    color: #cad0d2;
    position: absolute;
    left: 50px;
    top: 12px;
  }
}

/*header ハンバーガー終了*/

@media (min-width: 1000px) { /*480以上だったらってこと*/
.header {
    max-width: 100%;
    margin: 0 auto;
    padding: 14px;
    box-sizing: border-box;
    height: 180px;
  }
  .header__div {
    max-width: 1940px;
    padding: 20px 0px;
    position: relative;
    margin: 0 auto;
  }
  .header h1 {
    font-size: 2rem;
  }
  .nav-drawer__logo{
    display:none;
  }
  .top_pelipeli {
    text-decoration: none;
    color: #cad0d2;
    display: inline-block;
  }
  .header__navigation {
    display: flex;
    justify-content: flex-end;
  }
  .header__div_ul {
    display: flex;
    flex-direction: row;
    align-items: end;/*丸山さん追加*/
    
  }
  .header__navigation ul li a {
    text-decoration: none;
    font-size: 2rem;
    font-weight: 600;
    color: #cad0d2; /*#cad0d2*/
    margin-left: 30px;
  }
}






@media (max-width: 1369px) { 
.header {
  height: 120px; 
}
.header-logo {
  position: relative;
  left: 0px;
  top: 0px;
  max-width:194px;
  max-height: 65px;
  object-fit: cover; /*写真を左右対称で調整してくれる*/
 /* object-position:0 0;*/
  
  background-size: auto; /*100% 100% に変えた。本当はAuto*/
  background-repeat: no-repeat;
  padding: 0px;
  margin-bottom: 60px;
  
}

.header-logo img {
  width:100%;
  height:100%;
}
.header ul {
  font-size: 1.2rem;
  color: #cad0d2;
  position: absolute;
  right: 5%;
  vertical-align: middle;
  
  
}  
  .JPN {
    margin-left: 0px;
    padding-top: 0px;
  }
  
}

@media (max-width: 1160px) { /*1040以下だったらってこと*/
  .header {
    max-height: 150px
  }
}
@media (max-width: 1000px) { /*1040以下だったらってこと*/
  .header {
    max-height: 100px
  }
  .header-logo {
  max-width:149px;
  max-height: 50px;
  top: 10px;
}
}



/************************アクションボタン調整************************/

.action-button {
  position: relative;
  padding: 100px 0;
  background-color: #fff;
 
  
}
.action-button_wrap {
  margin: 0 auto; /*中央よせ ブロック要素*/
  width: 600px;
  height: 725px;
  background-color: #a2a2ad;
  border: 23px solid #dcd5c8; /*ボーダー設定*/
  box-sizing: border-box;
  
}
.action-button_logo {
  padding-top: 100px;
  padding-bottom: 100px;
  margin: 0 auto;
  max-width: 370px;
  max-height: 109px;
  object-fit: cover; /*写真を左右対称で調整してくれる*/
  /* object-position:0 0;*/
  background-size: 100% 100%; /*100% 100% に変えた。本当はAuto*/
  background-repeat: no-repeat;
}
.header-logo img {
  width: 100%;
  height: 100%;
}
.action-button_button_g {
  margin: 40px 0 auto;
}

.action-button_buttonn:hover img{
    opacity: 0.7;
}

.action-button_buttonn img {
  max-width: 100%;
  height: auto;
  display: block;
  opacity:1;
  transition:.3s;
  margin:0 auto;
  padding-top: 8px;
}
.action-button_buttonn {
  
  background: #a2a2ad;

    
  
}

@media (max-width: 600px) { /*1040以下だったらってこと*/
  .action-button_logo {
    object-fit: cover; /*写真を左右対称で調整してくれる*/
    /* object-position:0 0;*/
    background-size: auto; /*100% 100% に変えた。本当はAuto*/
    background-repeat: no-repeat;
    margin: 100px auto 50px;
  }
  .action-button_logo img {
    width: 100%;
    height: 100%;
  }
  .action-button_button_g {
    width: 100%;
  }
  .action-button_buttonn {
    object-fit: cover; /*写真を左右対称で調整してくれる*/
    /* object-position:0 0;*/
    background-size: auto; /*100% 100% に変えた。本当はAuto*/
    background-repeat: no-repeat;
    margin: 0 auto;
  }
  .action-button_buttonn img {
    width: 100%;
    height: 100%;
  }
  .action-button_wrap {
    border: none;
    width: 100%;
  }
}
/************************ footer (replace all) ************************/
.footer{
  width:100%;
  background-color:#888;          /* 2段目の帯色の上にかぶらないよう維持 */
  padding-bottom:20px;
  font-family:'Cormorant', serif;
  color:#fff;
}

/* 背景 + レイアウト層（PCは2カラム） */
.footer__image{
  position:relative;
  width:100%;
  background:url("../common/fuji.jpeg") no-repeat 0 0 / cover;
  /* 背景の高さを一定に（元の 800/1920 ≒ 41.67%） */
  padding-bottom:41.67%;
  /* レイアウト（PC） */
  display:flex;
  gap:96px;                       /* 左：メニュー と 右：住所 の間隔 */
  align-items:flex-start;         /* “TOP” 行と高さを合わせる */
  flex-wrap:wrap;
}

/* 中央寄せ用の外側コンテナ（iPadで効かせる） */
.footer__container{
  width:100%;
  margin:0 auto;
}

/* ========== 左：メニュー（PC） ========== */
.footer__site-map{
  position:static !important;
  flex:0 0 320px;                 /* 重なり防止でやや広め */
  text-align:left;
  color:#fff;
  padding-top:98px;
  left:10%;                       /* 既存のレイアウト感を維持（PCのみ） */
}
.footer__site-map h2{ display:none; margin:0 0 12px; }
.top_pelipeli{ color:#fff; font-size:1.8rem; }
.footer__site-map ul{ margin:0; padding:0; list-style:none; line-height:1.9; }
.footer__site-map li{ display:inline-block; }
.footer__site-map a,
.footer__site-map h2 a{ color:#fff; text-decoration:none; }
.footer__site-map li a:visited{ color:#fff; font-size:1.8rem; }

/* ========== 右：住所（PC） ========== */
.footer__shop{
  flex:1 1 680px;
  max-width:820px;
  text-align:left;
  color:#fff;
  line-height:1.9;
  margin-top:96px;                /* ← “TOP” 行に合わせる（微調整OK） */
}
.footer__shop h2{ margin:0 0 12px; color:#fff; }
.footer__shop p{ margin:0; }

/* ========== Instagram（PC） ========== */
.footer__sns_links{
  position:absolute;
  top:140px;                      /* ← もっと下へ（PC） */
  right:40px;                     /* ← 右端から少し内側へ */
}
.footer__sns_links ul{ margin:0; padding:0; list-style:none; }
.footer__sns_links li{ display:inline-block; width:20px; margin:0 10px; }
.footer__sns_links img{ width:22px; height:22px; display:block; }

/* ========== 2段目コピーライト帯 ========== */
.footer2{
  width:100%;
  height:112px;
  background-color:#a2a2ad;
  padding-bottom:20px;
  font-weight:600;
  font-size:1.6rem;
  color:#fff;
}
.footer2 small{
  display:inline-block;
  color:#cad0d2;
  padding-top:20px;
  font-size:1.6rem;
}

/* ---------------- PC（≥1040px）保全 ---------------- */
@media (min-width:1040px){
  .footer{ margin:0; padding:0; }
  .footer__container{ margin:0 auto; text-align:left; }
  .footer__site-map{ float:left; }
  .footer__site-map h2{
    display:inline-block; width:120px; vertical-align:top; color:#fff;
  }
  .footer__site-map ul{ display:inline-block; margin-left:10px; }
  .footer__site-map ul li{ margin:0; display:block; }
  .footer__sns_links ul{ float:right; }
  .footer__sns_links ul li{ display:inline-block; margin-left:27px; }
  .footer small{ clear:both; display:block; text-align:center; }
}

/* ---------------- iPad（721–1024px） ---------------- */
/* コンテンツを“画面中央寄り”に、ただし文字は左揃えのまま */
@media (max-width:1024px) and (min-width:721px){
  /* 中央寄せ（左右に余白） */
  .footer__container{ max-width:980px; padding:0 40px; margin:0 auto; }
  .footer__image{
    flex-direction:column;
    gap:28px;
    align-items:flex-start;       /* 左揃えキープ */
  }
  .footer__site-map{
    left:0;                       /* PCの left:10% を解除 */
    padding-left:20px;            /* 少し内側から開始 */
    flex:0 1 auto; width:100%; text-align:left;
  }
  .footer__shop{
    margin-top:12px;
    max-width:92vw;               /* 画面幅に追従 */
    text-align:left;
    padding-left:20px;            /* メニューと揃える */
  }
  .footer__sns_links{
    top:80px;                     /* iPadでは少し上に */
    right:24px;
  }
  .footer__sns_links img{ width:24px; height:24px; }
}
@media (max-width:1024px) and (min-width:721px){
  /* メニューを縦並びに */
  .footer__site-map ul{
    display:block;
    white-space:normal; /* 折り返し有効化 */
  }
  .footer__site-map li{
    display:block;
    margin:6px 0; /* 行間調整 */
  }
}
/* ===== iPad（721–1024px）：Instagram ロゴをもっと左＆少し下へ ===== */
@media (max-width:1024px) and (min-width:721px){
  .footer__sns_links{
    top: 84px;                 /* お好みで 70–100px で微調整 */
    right: 56px;               /* ← 右端からの距離を増やして左へ寄せる */
  }
  .footer__sns_links img{
    width: 24px;
    height: 24px;
  }
  /* notch 等のセーフエリア対応（対応ブラウザのみ有効） */
  @supports (padding: env(safe-area-inset-right)){
    .footer__sns_links{
      right: calc(56px + env(safe-area-inset-right));
    }
  }
}

/* （PCでももっと左に寄せたいならこちらも）
@media (min-width:1025px){
  .footer__sns_links{ right: 56px; }   /* 既定は 40px でした */
}

/* ---------------- スマホ（≤720px） ---------------- */
/* メニューに左余白、縦並び維持。インスタはやや下へ */
@media (max-width:720px){
  .footer__image{
    flex-direction:column;
    gap:24px;
    align-items:flex-start;
  }
  .footer__site-map{
    left:auto;                    /* PCの left:10% を解除 */
    padding-left:18px;            /* ← ベタ付き防止の左余白 */
    flex:0 1 auto; width:100%; text-align:left;
  }
  .footer__site-map ul{ display:block; white-space:normal; }
  .footer__site-map li{ display:block; margin:6px 0; } /* ← 改行＆行間 */

  .footer__shop{
    margin-top:12px;
    max-width:92vw;
    text-align:left;
    padding-left:18px;            /* メニューと揃える */
  }

  .footer__sns_links{
    top:150px;                    /* スマホでは下げる */
    right:16px;
  }
  .footer__sns_links img{ width:26px; height:26px; }
}

/*scroll top button*/
#scroll-top {
  z-index: 999999;
  
  background-color: #000;
  opacity: 0.6;
  buttom: 20px;
  padding: 15px 15px 10px;
  position: fixed; /*画面に対して*/
  right: 30px;
  bottom: 50px;
  font-size: 2rem;
}
#scroll-top a {
  text-decoration: none; /*アンダーばーをなくす*/
  color: #fff;
}