/******************************************************************************/
/* | レスポンシブ対応                                                          */
/*                   タブレット画面定義のためprodunt_only.cssとは別に定義        */
/******************************************************************************/
/*------------------------------------
- スマホとPCで表示/非表示の制御		 -
- 使用例(スマホのときだけ改行)   	 -
- <br class="show_sp_only">        	-
-------------------------------------*/ 
/* SP スマホ画面の設定 */
.show_sp_only { display: block;}
.show_tablet_only { display: none;}
.show_pc_only { display: none;}
.show_pc_and_tablet { display: none;}
html { font-size: 14px;  } /* フォントサイズ 1rem = 14px */

/* PC画面の設定 */
@media screen and (min-width: 1201px) {
    .show_sp_only { display: none;}
    .show_tablet_only { display: none;}
    .show_pc_only { display: block;}
    .show_pc_and_tablet { display: block;}
    html { font-size: 16px;  } /* フォントサイズ 1rem = 16px */
}

/* Tablet画面の設定 */
@media screen and (min-width: 782px) and (max-width: 1200px) {
    .show_sp_only { display: none;}
    .show_tablet_only { display: block;}
    .show_pc_only { display: none;}
    .show_pc_and_tablet { display: block;}
    html { font-size: 16px;  } /* フォントサイズ 1rem = 16px */
}
/******************************************************************************/
/* |                                                            */
/******************************************************************************/

body {
  margin:0;
  padding:0;
  background:#fff;
  /* FontAwesomeの読み込みを前提としたFontFamilyの追加 */
  font-family:'Montserrat', sans-serif, 'FontAwesome'; 
  font-size:12px;
}
ul {
  margin:0;
  padding:0;
  text-decoration:none;
  list-style:none;
}
li {
  padding:0;
  margin:0;
}
nav {
  text-align:center;
  width:100%;
  /*position:relative;*/
  position: fixed; /* navの上部固定表示 */
  top: 0;          /* 上部固定表示 */
  left: 0;         /* 上部固定表示 */
  height:auto;
  overflow:hidden;
  background:none;
  background: none; /* 必要に応じて背景色を指定してください */
  z-index: 1000;    /* 他のコンテンツの上に表示されるようにz-indexを高く設定 */
}
nav ul {
  text-align:center;
  visibility:hidden; /* 領域は確保するが非表示にする */
}
nav ul li {
  display:inline-none;
}
nav ul li a {
  color:#fff;
  display:inline-block;
  padding:1em 3em;
  text-decoration:none;
  border-bottom:2px solid #fff;
  transition-property:all .2s linear 0s;
  -moz-transition:all .2s linear 0s;
  -webkit-transition:all .2s linear 0s;
  -o-transition:all .2s linear 0s;
  font-size:16px;
}
nav ul li a:hover {
  color: #34B484;
}
/*styling open close button*/
.button {
  display:inline;
  position:absolute;
  right:10px;
  top:6px;
  z-index:999;
  font-size:30px;
}
.button a {
  text-decoration:none;
  font-size:20px; /* ハンバーガーメニューのアイコンのサイズ */
}

/* tabletの場合は変更 */
@media screen and (min-width: 782px) and (max-width: 1200px) {
.button {
  right:20px; /*ハンバーガーメニューのアイコンの位置*/
  top:6px;
}
.button a {
  font-size:30px; /* ハンバーガーメニューのアイコンのサイズ */
}
}
/* ハンバーガーアイコンのスタイル */
.btn-open:after {
  color:#333;
  content:"\f0c9"; /* FontAwesomeのハンバーガーアイコン */
  font-family:"FontAwesome"; /* FontAwesomeを使うことを明示 */
  transition-property:all .2s linear 0s;
  -moz-transition:all .2s linear 0s;
  -webkit-transition:all .2s linear 0s;
  -o-transition:all .2s linear 0s;
}
.btn-open:hover:after {
  color:#34B484;
}
/* 閉じるアイコンのスタイル */
.btn-close:after {
  color:#000; /* オーバーレイの背景色に合わせて白に */
  content:"\f00d"; /* FontAwesomeの閉じるアイコン */
  font-family:"FontAwesome"; /* FontAwesomeを使うことを明示 */
  transition-property:all .2s linear 0s;
  -moz-transition:all .2s linear 0s;
  -webkit-transition:all .2s linear 0s;
  -o-transition:all .2s linear 0s;
}
.btn-close:hover:after {
  color: #34B484;
}
/*overlay ハンバーガーメニュー表示時の下地*/
.overlay {
  display:none;
  position:fixed;
  top:0;
  left:0; /* left:0 を追加して画面左端に配置 */
  height:100%;
  width:100%;
  background:rgba(255,255,255,0.8); /* <-- 白地で90%不透明（10%透過） */
  overflow:auto;
  z-index:99;
}

.wrap {
  color:#e9e9e9;
  /* text-align:center; */ 
  max-width:90%;
  margin:0 auto;
}
.wrap ul.wrap-nav {
  border-bottom:1px solid #575757;
  text-transform:capitalize;
  padding:150px 0px 100px;
}
.wrap ul.wrap-nav li {
  font-size:20px;
  display:block;  /* ハンバーガーメニュー何の項目を縦に並べる inline-blockだと横にも並ぶ */
  vertical-align:top;
  width:24%;
  position:relative;
}
.wrap ul.wrap-nav li a {
  color:#000; /* 文字色 */
  display:block;
  padding:8px 0;
  text-decoration:none;
  transition-property:all .2s linear 0s;
  -moz-transition:all .2s linear 0s;
  -webkit-transition:all .2s linear 0s;
  -o-transition:all .2s linear 0s;
}
.wrap ul.wrap-nav li a:hover {
  color:#34B484;
}
.wrap ul.wrap-nav ul {
  padding:20px 0;
}
.wrap ul.wrap-nav ul li {
  display:block;
  font-size:13px;
  width:100%;
  color:#e9e9e9;
}
.wrap ul.wrap-nav ul li a { /*　ハンバーガーメニュー内の文字 */
  color:#000000;
}
.wrap ul.wrap-nav ul li a:hover {
  color:#34B484;
}
.social {
  font-size:25px;
  padding:20px;
}
.social p {
  margin:0;
  padding:20px 0 5px 0;
  line-height:30px;
  font-size:13px;
}
.social p a {
  color:#34B484;
  text-decoration:none;
  margin:0;
  padding:0;
}
.social-icon {
  width:80px;
  height:50px;
  background:#e9e9e9;
  color:#333;
  display:inline-block;
  margin:0 20px;
  transition-property:all .2s linear 0s;
  -moz-transition:all .2s linear 0s;
  -webkit-transition:all .2s linear 0s;
  -o-transition:all .2s linear 0s;
}
.social-icon:hover {
  background:#34B484;
  color:#f0f0f0;
}
.social-icon i {
  margin-top:12px;
}
@media screen and (max-width:48em) { /* 768px */
  .wrap ul.wrap-nav>li {
    width:100%;
    padding:0px 0;
  }
  .wrap ul.wrap-nav {
    padding:50px 0px 0px;
  }
  nav ul {
    opacity:0;
    visibility:hidden;
  }
  .social {
    color:#c1c1c1;
    font-size:25px;
    padding:15px 0;
  }
  .social-icon {
    width:100%;
    height:50px;
    background:#fff;
    color:#333;
    display:block;
    margin:5px 0;
  }
}
.content {
  width:100%;
  margin-top:2000px;
  font-size:20px;
  color: #333; /* コロンを追加 */
  text-align: center;
}

/* お問い合わせ画像セクションのスタイル */
.contact-image-section {
  text-align: center; /* 画像を中央揃えにする */
  padding: 5px 0; /* 上下の余白を調整 */
  margin: 0 auto; /* 中央寄せ */
  max-width: 300px; /* 画像の最大幅を制限して、モバイルで大きくなりすぎないように調整 */
  box-sizing: border-box; /* パディングを含めて幅を計算 */
}

.contact-promo-image {
  max-width: 100%; /* 親要素の幅に合わせて画像をレスポンシブにする */
  height: auto; /* アスペクト比を維持 */
  display: block; /* 画像の下に余白ができないようにブロック要素にする */
  margin: 0 auto; /* 画像自体を中央揃え */
}

/* 新しいFlexboxコンテナのスタイル */
.contact-buttons-flex-group {
    display: flex; /* Flexboxを有効にする */
    justify-content: center; /* 子要素を中央に配置 */
    align-items: center;    /* 子要素を垂直方向の中央に配置 */
    padding: 5px 0;         /* 上下の余白 */
    max-width: 600px; /* Flexboxコンテナの最大幅（必要に応じて調整） */
    margin: 0 auto; /* Flexboxコンテナ自体を中央寄せ */
    flex-wrap: wrap; /* 画面が狭い場合にボタンが折り返して表示されるようにする */
}

/* 横並びにする個々のボタンのスタイル（元のcontact-image-sectionから変更） */
.contact-image-section-inline {
    text-align: center; /* ボタン内の画像を中央揃えにする */
    padding: 0 5px; /* ボタン間の横方向の余白 */
    flex: 1; /* 親要素内で利用可能なスペースを均等に分配し、伸縮する */
    min-width: 140px; /* 各ボタンの最小幅（必要に応じて調整） */
    max-width: 250px; /* 各ボタンの最大幅（必要に応じて調整） */
    box-sizing: border-box; /* パディングを含めて幅を計算 */
}

/* 横並びにするボタン内の画像のスタイル */
.contact-image-section-inline .contact-promo-image {
    max-width: 100%; /* 親要素の幅に合わせて画像をレスポンシブにする */
    height: auto; /* アスペクト比を維持 */
    display: block; /* 画像の下に余白ができないようにブロック要素にする */
    margin: 0 auto; /* 画像自体を中央揃え */
}

/* 全ての問い合わせ関連ボタンを縦方向にまとめる親コンテナのスタイル */
.all-contact-buttons-group {
    display: flex; /* Flexboxを有効にする */
    flex-direction: column; /* 子要素（横並びの行と単独ボタン）を縦に並べる */
    align-items: center;    /* 子要素（行、単独ボタン）を親の水平方向の中央に揃える */
    padding: 10px 0; /* 上下の余白 */
    max-width: 600px; /* グループ全体の最大幅（必要に応じて調整） */
    margin: 0 auto; /* グループ全体を水平方向に中央寄せ */
}

/* 電話番号とLINEボタンを横並びにする行のスタイル */
.contact-row-flex-group {
    display: flex; /* Flexboxを有効にする */
    justify-content: center; /* 行内のボタンを水平方向の中央に配置 */
    align-items: center;    /* 行内のボタンを垂直方向の中央に配置 */
    width: 100%; /* 親all-contact-buttons-groupの幅いっぱいに広がる */
    padding: 5px 0; /* 行の上下余白 */
    gap: 10px; /* ボタン間の水平方向のスペース */
    flex-wrap: wrap; /* 画面が狭い場合にボタンが折り返して次の行に表示されるようにする */
}

/* 個々のボタンアイテムの基本スタイル（電話番号、LINE、「お問い合わせ」共通） */
.contact-button-item {
    text-align: center; /* ボタン内の画像を中央揃えにする */
    box-sizing: border-box; /* パディングを含めて幅を計算 */
    padding: 5px; /* 各ボタンアイテムのパディング（必要に応じて調整） */
    /* flex: 1; は .contact-row-flex-group の子に適用されるが、ここでは汎用的なスタイル */
    /* min-width, max-width は個々のボタンのサイズを制御するために必要に応じて追加 */
    min-width: 140px; /* 例：各ボタンの最小幅 */
    max-width: 250px; /* 例：各ボタンの最大幅 */
}

/* 「お問い合わせはこちらから」ボタンに適用される追加スタイル（全幅で表示したい場合） */
.contact-button-full-width {
    width: 100%; /* 親の幅いっぱいに広がる */
    max-width: 300px; /* 必要に応じて、単独ボタンの最大幅を調整 */
    margin-top: 10px; /* 上の行との間隔 */
}

/* ボタン内の画像が親要素にフィットするように */
.contact-button-item .contact-promo-image {
    max-width: 100%; /* 親の幅に合わせる */
    height: auto; /* アスペクト比を維持 */
    display: block; /* 画像の下の余白をなくす */
    margin: 0 auto; /* 画像を中央寄せ */
}