@charset "utf-8";
body {
    padding: 0px;
    margin: 0px;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    background-color: #fff;
}


img{
	/*画像の伸縮設定*/
	max-width: 100%;
	width /***/: auto;
　/*画像のボーダーを消す*/
    border: none;
	height: auto;
}

a img {
    border-style: none;
}

p {
	padding: 0px;
	margin: 0px;
}
/*clearfix*/
.cf:before,
.cf:after {
  content:"";
  display: table;
}
.cf:after {
  clear:both;
}
/*IE6,7対策 （haslayout対策）*/
.cf {
  *zoom:1;
}
/*clearfixここまで*/
.clear {
	clear: both;
}

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


.contents {
    width: 100%;
}
.wp {
    width: 100%;
}
/*改行*/
.brl{
}
/*行間の余白*/
.pad_h10{
	padding-top:10px;
}
.pad_h20{
	padding-top:20px;
}
.pad_h30{
	padding-top:30px;
}
.pad_h40{
	padding-top:40px;
}
.pad_h50{
	padding-top:50px;
}

/* PCだけ表示 */
.sp-none { display: block; }
@media (max-width: 640px){
  .sp-none { display: none; }
}

/* スマホだけ表示 */
.pc-none { display: none; }
@media (max-width: 640px){
  .pc-none { display: block; }
}



/*ロールオーバーで明るさ調整------------------------------------------------*/
	
 .effect-brightness {
      transition: filter 0.8s ease;
      filter: brightness(0.7); /* デフォルト値なのでこの一行は省略してもOK */
    }

    .effect-brightness:hover {
      filter: brightness(1.3); /* 明るくする */
    }


 .effect-brightness1 {
      transition: filter 0.8s ease;
      filter: brightness(1.0); /* デフォルト値なのでこの一行は省略してもOK */
    }

    .effect-brightness1:hover {
      filter: brightness(1.5); /* 明るくする */
    }

.effect-brightness2 {
      transition: filter 0.8s ease;
      filter: brightness(0.8); /* デフォルト値なのでこの一行は省略してもOK */
    }

    .effect-brightness2:hover {
      filter: brightness(1.3); /* 明るくする */
    }




@media screen,print and (min-width: 769px) {
/*横幅769px以上に適応*/

/*pc-タブレット-スマホ使い分け*/
.mobile{
	display: none;
}
.pc{

}

	/*ロールオーバーで拡大縮小------------------------------------------------*/
img {
    -webkit-transition: all 1s;
    transition: all 1s;
    color: #185FA8;
}
.expand img:hover{
	-webkit-transform: scale(1.3);
	transform: scale(1.1);
}
.expand1 img:hover{
	-webkit-transform: scale(2.0);
	transform: scale(1.8);
}
.expand2 img:hover{
	-webkit-transform: scale(1.6);
	transform: scale(1.6);
	margin-right: 55px;
	position: relative;
	right: 55px;
}
	

/* =========================================
  共通レイアウト
========================================= */
.header {
  width: 100%;
  z-index: 100;
  min-height: 113px;
  padding-bottom: 10px;
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
}

.header-in {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1100px;
}
.header-in::after {
  content: "";
  display: block;
  clear: both;
}

.header-in-logo {
  width: 62%;
  float: left;
  text-align: right;
  padding-top: 30px;
}
.header-in-right {
  width: 30%;
  float: right;
  padding-top: 20px;
}

/* SNS */
.s_box {
  float: left;
  padding-left: 50px;
}
.sns-icons {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 12px;
}
.sns-icons a {
  display: inline-block;
}
.sns-icons a img {
  display: block;
  width: 28px;
  height: auto;
  transition: opacity 0.3s;
}
.sns-icons a img:hover {
  opacity: 0.7;
}

/* LINEボタン */
.line_box {
    margin-left: auto;
    margin-right: auto;
}
a.btn_10 {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  width: auto;
  padding: 0.6rem 1.2rem;
  font-size: 14px;
  font-weight: bold;
  border-radius: 100vh;
  color: #fff;
  border: none;
  transition: 0.3s;
  background-color: #89bd6b;
}
a.btn_10:hover {
  background-color: #aecb94;
}

/* ナビゲーション */
.h-nav_box {
  width: 70%;
  margin: 0 auto;
  text-align: center;
  clear: both;
}
.h-nav {
  padding: 20px 0;
  display: flex;
  justify-content: center;
  width: 100%;
}
.gmenu {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  float: left;
  flex-wrap: wrap;
  row-gap: 8px;
}
.gmenu li {
  margin: 0 10px;
}
.gmenu a {
  display: inline-flex;              /* フレックスで中央寄せ */
  align-items: center;               /* 縦中央 */
  justify-content: center;           /* 横中央 */
  text-decoration: none;
  color: #8C7884;
  font-size: 16px;
  padding: 0.6em 1.4em;              /* 内側余白は固定 */
  border-radius: 12px;
  transition: background 0.3s, color 0.3s;
  line-height: 1;                    /* hoverでズレない */
}

.gmenu a:hover {
  background-image: linear-gradient(to right, #8C7884 0%, #D8C4D4 100%);
  color: #fff;
}


/* =========================================
  ハンバーガーメニュー
========================================= */
#nav-toggle {
  position: fixed;
  top: 25px;
  right: 25px;
  width: 36px;
  height: 32px;
  cursor: pointer;
  z-index: 10010;
}
#nav-toggle > div {
  position: relative;
  width: 36px;
  height: 32px;
}
#nav-toggle span {
  width: 100%;
  height: 1px;
  left: 0;
  display: block;
  background: #8c7884;
  position: absolute;
  transition: transform .6s ease-in-out, top .5s ease;
}
#nav-toggle span:nth-child(1) { top: 0; }
#nav-toggle span:nth-child(2) { top: 14px; }
#nav-toggle span:nth-child(3) { top: 28px; }

#nav-toggle:hover span:nth-child(1) { top: 4px; }
#nav-toggle:hover span:nth-child(3) { top: 23px; }

.open #nav-toggle span {
  background: #fff;
}
.open #nav-toggle span:nth-child(1) {
  top: 15px;
  transform: rotate(45deg);
}
.open #nav-toggle span:nth-child(2) {
  top: 15px;
  width: 0;
  left: 50%;
}
.open #nav-toggle span:nth-child(3) {
  top: 15px;
  transform: rotate(-45deg);
}

/* モーダルナビ */
#gloval-nav {
  background-color: rgba(177,162,170,0.80);
  color: #fff;
  position: fixed;
  inset: 0;
  z-index: 10000;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 29px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease, visibility .6s ease;
}
#gloval-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#gloval-nav ul li {
  opacity: 0;
  transform: translateX(200px);
  transition: transform 1s ease, opacity .9s ease;
}
#gloval-nav a {
  color: #fff;
  text-decoration: none;
  padding: 10px 0;
  display: block;
}
#gloval-nav a:hover { color: #666; }

.open #gloval-nav {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.open #gloval-nav li {
  opacity: 1;
  transform: translateX(0);
}
.open { overflow: hidden; }

/* =========================================
  スマホ対応
========================================= */
@media (max-width: 768px) {

  .header { min-height: auto; padding-bottom: 6px; }
  .header-in { max-width: 100%; padding: 0 16px; }

  .header-in-logo,
  .header-in-right {
    float: none;
    width: 100%;
    text-align: center;
    padding-top: 12px;
  }
  .header-in-logo a img { max-width: 90%; height: auto; }

  .s_box { float: none; padding-left: 0; margin-top: 8px; }
  .sns-icons { justify-content: center; gap: 10px; }
  .sns-icons a img { width: 40px; }

  .line_box { margin-top: 4px; }
  a.btn_10 {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    padding: .7rem 1rem;
    font-size: 15px;
  }

  .h-nav { display: none; }
  .h-nav_box { width: 100%; margin: 8px auto 0; }

  #nav-toggle {
    display: block;
    top: 14px;
    right: 14px;
    z-index: 10001;
  }

  #gloval-nav {
    font-size: 22px;
  }
  #gloval-nav a {
    padding: 12px 0;
    white-space: nowrap;
    word-break: keep-all;
    letter-spacing: 0.05em;
  }

  #gloval-nav ul {
    text-align: center;
    padding: 0;
    margin: 0;
  }

  .gmenu a {
    white-space: nowrap;
    word-break: keep-all;
  }

  .gmenu li {
    margin: 6px 8px;
  }

  /* 開いている時にロゴが被らないように */
  .open .header-in { display: none; }
}

/* PCではハンバーガー非表示 */
@media (min-width: 769px){
  #nav-toggle{ display:none; }
}

/* まずは土台をフラットに */
html, body{
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* まれな横ズレ防止 */
}

/* iPhoneの安全域に合わせて左右パディングを均等に */
@media (max-width: 768px){
   /* safe-area が使える環境では左右を同じだけ確保 */
  @supports (padding: max(0px)){
    .header-in{
      padding-left: max(16px, env(safe-area-inset-left));
      padding-right: max(16px, env(safe-area-inset-right));
      box-sizing: border-box;      /* ← 幅計算を安定させる */
    }
  }

  /* ロゴを“文字揃え”ではなく画像自体で中央寄せ */
  .header-in-logo{ text-align: center; }
  .header-in-logo a img{
    display: block;
    margin: 0 auto;
  }

/* LINEボタンの箱そのものを中央へ */
  .line_box{
    width: 100%;              /* 箱はフル幅 */
    max-width: 300px;         /* ボタンの上限だけ決める */
    margin: 8px auto 0;       /* ← ブロック自体を中央に */
    display: flex;
    justify-content: center;  /* 中身も中央 */
  }
  /* 念のためボタンの最大幅を明示 */
  a.btn_10{
    max-width: 340px;
  }

  /* SNSアイコン行も中央寄せを強化 */
  .s_box{ width: 100%; }
  .sns-icons{
    justify-content: center;
  }
}
/* メインビジュアル中央寄せ */
.header2 {
  width: 100%;
  text-align: center; /* 中央寄せの決め手 */
}

.header2-in {
  display: inline-block; /* ブロック幅を画像に合わせる */
  text-align: center;
}

.header2-in img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}
	
	
 
/*ーーーーーーーーーーーーーーー*/
	
.footer {
    width: 100%;
    min-height: 350px;
    font-family: 'Kosugi Maru', sans-serif;
    margin-right: auto;
    margin-left: auto;
    background-image: url(../images/footer_bg_47.png);
    background-position: center center;
    background-size: cover;
    padding-top: 30px;
}
.footer h2 {
    font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "游明朝体", YuMincho,
                 "MS PMincho", "MS Mincho", serif;
    font-size: 30px;           /* 見出しらしい大きさ */
    font-weight: 600;          /* 明朝体はやや太めで上品に */
    color: #7B586D;               /* 落ち着いたダークグレー */
    line-height: 1.6;          /* 行間を少し広めに */
    letter-spacing: 0.05em;    /* 少し字間を広げて読みやすく */
    margin: 50px 0 30px;       /* 上下の余白を調整 */
    text-align: center;        /* 中央揃え（必要なら left/right に変更） */
    position: relative;
    padding-bottom: 12px;      /* 下に装飾ライン用の余白 */
}

/* 下に細い装飾ラインを追加（上品な雰囲気） */
.footer h2::after {
    content: "";
    display: block;
    width: 100px;               /* ラインの長さ */
    height: 2px;
    background-color: #924F77; /* サイトのカラーに合わせると統一感UP */
    margin: 12px auto 0;
    border-radius: 2px;
}

.footer-in {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* セクション背景（淡いにじみ） */
.contact-cta{
  padding: 56px 16px 72px;
  text-align: center;
  color: #3a3338;
}

.contact-cta .lead{
  font-size: clamp(16px, 1.9vw, 18px);
  line-height: 1.9;
  margin: 0 auto 28px;
}

/* グリッド配置 */
.cta-grid{
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* カード */
.cta-card{
  background: #fff;
  border-radius: 24px;
  padding: 28px 22px 26px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

.cta-icon{
  width: 72px; height: 72px;
  margin: 0 auto 10px;
}
.cta-icon svg{ width: 100%; height: 100%; display: block; }

.cta-card h4{
  font-size: clamp(16px,1.8vw,18px);
  margin: 6px 0 14px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* 電話強調 */
.tel{
  font-size: 22px;
  letter-spacing: .02em;
  color: #d7818d;
  margin: 8px 0 6px;
}
.tel a{ color: inherit; text-decoration: none; }
.note{ color:#6b6b6b; font-size: 14px; }

/* ボタン */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
  margin-top: 10px;
  transition: transform .06s ease, box-shadow .2s ease;
}
.btn span{ font-size: 1.2em; transform: translateY(-.04em); }

/* 色違い */
.btn-pink{ background:#d7818d; color:#fff; box-shadow: 0 6px 16px rgba(215,129,141,.28); }
.btn-green{ background:#7bbd63; color:#fff; box-shadow: 0 6px 16px rgba(123,189,99,.28); }

/* hover */
.btn:hover{ transform: translateY(-5px); }
.btn:active{ transform: translateY(0); }

/* レスポンシブ余白 */
@media (max-width: 599px){
  .contact-cta{ padding: 40px 14px 56px; }
  .cta-card{ border-radius: 18px; }
}



.footer-copy{
  position: static;   /* ← これだけでOK。固定はやめる */
  width:100%;
  text-align:center;
  color:#fff;
  background:#8c7884;
  padding:14px 0;
  font-size:12px;
}



	
	
	
	
	
	
/*topページへ戻る*/
#page-top {
    position: fixed;
    bottom: 110px;
    right: 15px;
    font-size: 50%;
    z-index: 100;
}
#page-top a {
    text-decoration: none;
    color: #FFFFFF;
    width: 160px;
    padding-top: 12px;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 12px;
    text-align: center;
    display: block;
    background-image: url(../images/pagetop1_72.png);
    background-repeat: no-repeat;
    height: 110px;
}
#page-top a:hover {
    text-decoration: none;
    color: rgba(255,255,255,1.00);
    background-image: url(../images/pagetop2_72.png);
}	
		
	
}