/* =========================================
   BASE
========================================= */

*,
*::before,
*::after{
  box-sizing: border-box;
}

body{
  margin:0;
  padding:0;
  background:#fff;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  color:#222;
  line-height:1.7;
}

img{
  max-width:100%;
  height:auto;
  display:block;
}

ul{
  list-style:none;
  padding:0;
  margin:0;
}

a{
  text-decoration:none;
  color:inherit;
}

/* =========================================
   LAYOUT
========================================= */

.container{
  width:100%;
  margin:0 auto;
}

.content{
  display:flex;
  justify-content:center;
  padding-top:20px;
}

/* 左カラムは一旦使わない */
.aside_left{
  display:none;
}

.main.order2{
  width:100%;
  max-width:1000px;
  margin:0 auto;
  padding:0 20px;
}

/* =========================================
   HEADER
========================================= */

.header{
  position:relative;
  margin-bottom:20px;
  font-size:0;
}

.header_2 h1{
  margin:0;
}

.header_2 h1 img{
  width:100%;
  height:auto;
  display:block;
}

/* =========================================
   NAVIGATION (共通 / デフォルト)
   ※ TOPだけは style_top.css で上書きする
========================================= */

#menu{
  width:100%;
    position: relative;
  background: rgba(255, 182, 193, 0.55) !important; 
   backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
  position: static;
  backdrop-filter: blur(6px); /* 対応ブラウザだけ ふわっと */
}

#menu ul{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0;
  margin:0;
}

#menu li{
  flex:1;
  text-align:center;
  padding:18px 0;
  font-family: 'Mochiy Pop P One', sans-serif;
  font-size:16px;
}

#menu li + li{
  border-left:1px solid rgba(92,58,58,0.25);
}

#menu a{
  display:block;
  color:#5c3a3a;
}

#menu a:hover{
  color:#5c3a3a;
  opacity:0.7;
}

/* ハンバーガー（共通） */
.hamburger{
  cursor:pointer;
  background:transparent;
  border:0;
  padding:0;
}

/* =========================================
   MAIN (共通)
========================================= */

main h2{
  font-family:'M PLUS Rounded 1c', sans-serif;
  margin:30px 0 15px;
  font-size:22px;
}

/* =========================================
   FOOTER
========================================= */

.site-footer{
  width:100%;
  background:#F4F1EC;
  text-align:center;
  padding:50px 0;
  font-size:14px;
  color:#777;
  border-top:1px solid #e5e5e5;
}

.site-footer p{
  margin:0;
}

/* =========================================
   PAGE TOP BUTTON
========================================= */

#page_top{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:9999;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(10px);
  transition:.25s;
}

#page_top.is-show{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}

/* iPhone下のバー対策（対応してる端末だけ効く） */
@supports (bottom: env(safe-area-inset-bottom)){
  #page_top{
    bottom: calc(24px + env(safe-area-inset-bottom));
  }
}

#page_top a{
  width:60px;
  height:60px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#b08d78;
  color:#fff;
  font-size:20px;
  line-height:1;
}

/* =========================================
   UTIL
========================================= */

.pc-img{ display:block !important; }
.sp-img{ display:none !important; }


html, body {
  overflow-x: hidden;
}



/* 横はみ出し対策（保険） */
img, svg, video, iframe{
  max-width: 100%;
  height: auto;
}

/* 念のため、横スクロールを出さない */
html, body{
  overflow-x: hidden;
}


/* ===== メニュー上の余白を消す（保険） ===== */
html, body{
  margin: 0 !important;
  padding: 0 !important;
}

.header,
.header_1{
  margin: 0 !important;
  padding: 0 !important;
}

#menu{
  margin-top: 0 !important;
}


body{
  padding-top: 0 !important;
}


/* ===== menu 透過：最強上書き ===== */
#menu{
  background: rgba(244, 167, 191, 0.5) !important; /* くすみピンク透過 */
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
}

/* 中身が塗ってたら無効化（ここ重要） */
#menu ul,
#menu li,
#menu a{
  background: transparent !important;
}


/* ===== footerを常に画面下へ（本文が短いとき） ===== */
html, body{
  height: 100%;
}

body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container{
  flex: 1 0 auto; /* 本文エリアを伸ばす */
}

.site-footer{
  margin-top: auto; /* フッターを一番下へ */
}