@charset "UTF-8";
@import url("grid.css");

:root { /* 色変更される場合は、#以降のカラーコードを変更してください IE非対応 */
    --base-color: #000;
    --link-color: #666;
    --linkhover-color: #999;
    --back-color: #f7f7f7;
    --border-color: #ccc;
    --white-color: #fff;
}

img {
	max-width:100%;
	height: auto;/*高さ自動*/
}
a {
    display:block;
    color: var(--link-color);
    text-decoration-line: none;
}
a:hover { 
    color: var(--linkhover-color);
}

/*ヘッダー
-------------------------------------*/
.header {
	display: flex;
    flex-direction: row;
    padding: 2rem 0 0 0;
}
.header-box {
	margin-left: auto;
	margin-top: 8px;
}
.contact-button {
	padding: 1rem;
	border: 2px solid #2f7a36;
	color: #ffffff;
	background-color: #2f7a36;
}
nav ul {
	display: flex;
    flex-direction: row;
    justify-content: space-around;
    list-style: none;
	margin: 1rem 0 0 0;
}
nav li {
	flex: 1 0 auto;
}
nav li a {
    text-decoration: none;
    text-align: center;
    width: 100%;
}
nav a:hover {
    background-color: var(--back-color);   
}
nav a {
    padding: 0.5rem;
}

@media screen and (min-width: 769px){
/* PC時はMENUボタンを非表示 */
#open,#close {
    display: none !important;
}

#navi {
    display: block !important;
}
}

@media screen and (max-width: 768px){
.header {
	flex-direction: column;
    margin-bottom: 10px;
}
.header #open,#close  {
    position: absolute;
    top: 20px;
    right: 12px;
}
nav ul {
	flex-direction: column;
}
.header li {
	padding-top: 0;
}
/* スマホ時はMENUボタンを表示 */
#open {
    display: block;
    background: url(../img/button.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 50px;
    height: 50px;
    border: none;
    position: absolute;
    top: 20px;
    right: 12px;
}
#close  {
    display: block;
    background: url(../img/button2.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 50px;
    height: 50px;
    border: none;
    position: absolute;
    top: 20px;
    right: 12px;
}
/* スマホ時はメニューを非表示 */
#navi {
    display: none;
}
}
    
/*メイン画像
-------------------------------------*/
.mainimg img {
    width: 100vw;
}

/*メインコンテンツ
-------------------------------------*/
main {
    margin: 5rem 0 0 0;
}
section {
	margin: 5rem 0;
	padding: 3rem 0;
}
.gray-back {
	background-color: var(--back-color);
}


.blackgreen-back {
	background-color: #3cb056;
	padding-bottom:50px;
	padding-top:50px;
}


/*キャッチコピー
-------------------------------------*/
.catch {
    text-align: center;
}
.catch h2 {
    padding-bottom: 1rem;
}
.under {
    border-bottom: 0.4rem solid var(--base-color);
    padding:0 1rem 1rem 1rem;
}
.center {
	text-align: center;
	margin-bottom: 4rem;
	padding-top: 0px;
}

/*申し込みの流れ
-------------------------------------*/
.flow.row {
	margin-bottom: 3rem;
}

/*フッター
-------------------------------------*/
footer {
    background-color: var(--back-color); 
    padding: 5rem 0;
}
footer h4 {
    border-bottom: 3px solid var(--border-color);
}

/*お問い合わせ
-------------------------------------*/
.contact-box {
	border: 1px solid var(--border-color);
	text-align: center;
	padding: 2rem 0;
}
.table {
	margin: 4rem 0;
}
.table th {
	width: 250px;
}

/*コピーライト
-------------------------------------*/
.copyright {
	text-align: center;
	padding: 1rem 0;
	background-color: #57a4e2;
	color: #ffffff;
}
.copyright a {
	color: #ffffff;
	text-decoration: none;
	display: inline;
}

/*ページトップへ戻るボタン
-------------------------------------*/
#pagetop {
    position: fixed;
    bottom: 15px;
    right: 15px;
}
#pagetop a {
    display: block;
    background-color: var(--base-color);
    color: var(--white-color);
    width: 50px;
    padding: 10px 5px;
    text-align: center;
}
#pagetop a:hover {
    background-color: var(--link-color);
}

/* 幅768px以下の表示
-------------------------------------*/
@media screen and (max-width: 768px){
	
/*ヘッダー
-------------------------------------*/
.header-box {
	display: none;
}	
/*お問い合わせ
-------------------------------------*/
.table th {
	width: 100%;
	display: block;
}	
.table td {
	display: block;
}
}





















/* ▼ 見出し背景（薄いグレー） */
.title-hero{
  background:#ffffff;
  padding:56px 16px 40px;
}

/* ▼ 幅を整える */
.title-hero__inner{
  max-width:1000px;
  margin:0 auto;
}

/* ▼ 文字（中央・緑） */
.title-hero__title{
  margin:0;
  text-align:center;
  color:#2f7a36;               /* 緑：お好みで調整 */
  font-weight:600;
  font-size:28px;
  line-height:1.9;
  letter-spacing:0.03em;
  border-bottom:none !important;
}

/* ▼ 下の横線＋中央の▼ */
.title-hero__rule{
  position:relative;
  margin:28px auto 0;
  width:min(92%, 980px);
  height:3px;
  background:#2f7a36;
}

/* ▼ 三角（下向き） */
.title-hero__rule::after{
  content:"";
  position:absolute;
  left:50%;
  top:100%;
  transform:translateX(-50%);
  width:0;
  height:0;
  border-left:14px solid transparent;
  border-right:14px solid transparent;
  border-top:22px solid #2f7a36;
}

.title-hero__title::after{
  content: none !important;   /* ← h2のafter自体を消す */
  display: none !important;
}


/* ▼ タブレット調整 */
@media (max-width:1000px){
  .title-hero{
    padding:0px 0px 0px;
  }
  .title-hero__title{
    font-size:18px;
    line-height:1.85;
  }
  .title-hero__rule::after{
    border-left-width:12px;
    border-right-width:12px;
    border-top-width:18px;
  }
}


/* ▼ スマホ調整 */
@media (max-width:640px){
  .title-hero{
    padding:0px 0px 0px;
  }
  .title-hero__title{
    font-size:18px;
    line-height:1.85;
  }
  .title-hero__rule::after{
    border-left-width:12px;
    border-right-width:12px;
    border-top-width:18px;
  }
}

.sp-br{ display: none; }           /* PCは改行しない */
@media (max-width: 640px){
  .sp-br{ display: inline; }
  .sp-br::before{ content: "\A"; white-space: pre; } /* 改行を挿入 */
}





h2{
	color:#2f7a36;
	font-size:200%;
	font-weight:bold;
	border-bottom:none;
	padding-top:50px;
	padding-right:20px;
	padding-left:20px;
	text-align:center;
}

h2::after{
	content:"";
	display:block;
	height:3px;
	background:#2f7a36;
	width:300px; /* 左右を短く */
	margin:10px auto 0; /* 中央寄せ */
}


@media (max-width:1000px){
	h2{
	color:#2f7a36;
	font-size:180%;
	font-weight:bold;
	border-bottom:none;
	padding-top:30px;
	padding-right: 20px;
	padding-left: 20px;
}

h2::after{
  content:"";
  display:block;
  height:3px;
  background:#2f7a36;
  width: 300px;←左右を短く（20px×2） */
  margin:10px auto 0;   /* ←中央 */     /* ←中央寄せ */
}}

@media (max-width:640px){
	h2{
	color:#2f7a36;
	font-size:180%;
	font-weight:bold;
	border-bottom:none;
	padding-top:0px;
	padding-right: 20px;
	padding-left: 20px;
}

h2::after{
  content:"";
  display:block;
  height:3px;
  background:#2f7a36;
  width: 300px;←左右を短く（20px×2） */
  margin:10px auto 0;   /* ←中央 */   /* ←中央寄せ */
}}



@media (max-width:500px){
	h2{
	color:#2f7a36;
	font-size:150%;
	font-weight:bold;
	border-bottom:none;
	padding-top:0px;
	padding-right: 20px;
	padding-left: 20px;
}
}

@media (max-width:400px){
	h2{
	color:#2f7a36;
	font-size:110%;
	font-weight:bold;
	border-bottom:none;
	padding-top:0px;
	padding-right: 20px;
	padding-left: 20px;
}
}



h3{
	font-size:200%;
	font-weight:bold;
	color:#7f4f21;
	padding-top: 20px;
	padding-bottom: 20px;
}

@media (max-width:1000px){
h3{
	font-size:180%;
	font-weight:bold;
	color:#7f4f21;
	padding-top: 20px;
	padding-bottom: 20px;
	}}


@media (max-width:640px){
h3{
	font-size:150%;
	font-weight:bold;
	color:#7f4f21;
	padding-top: 20px;
	padding-bottom: 20px;
	}}

@media (max-width:500px){
h3{
	font-size:130%;
	font-weight:bold;
	color:#7f4f21;
	padding-top: 20px;
	padding-bottom: 20px;
	}}

@media (max-width:400px){
h3{
	font-size:110%;
	font-weight:bold;
	color:#7f4f21;
	padding-top: 20px;
	padding-bottom: 20px;
	}}

.green{font-size:150%;
	font-weight:bold;
	color: #2f7a36;
	padding-top:30px;
	padding-right: 20px;
	padding-left: 20px;
	padding-bottom: 0px;
text-align: center;
border-bottom:none;}


.item-title{
    font-size: 110%;
    color: #036eb7;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    margin: 0;
}

.item-title .sub{
  display:block;      /* 下に落とす */
  font-size: 70%;     /* 小さくする */
  font-weight: 600;   /* 少しだけ細めでもOK */
  margin-top: 4px;    /* 上との間隔 */
}

.item-title2{
    font-size: 110%;
    color: #333;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    margin: 0;
}

.item-title2 .sub{
  display:block;      /* 下に落とす */
  font-size: 70%;     /* 小さくする */
  font-weight: 600;   /* 少しだけ細めでもOK */
  margin-top: 4px;    /* 上との間隔 */
}


h4{
	font-size:200%;
	font-weight:bold;
	color:#e3007f;
	padding-top: 30px;
}




/*ラインナップ
-------------------------------------*/
/* ===============================
   ラインナップ 完全版
================================= */
/* ===============================
   ラインナップ（GAP調整版）
================================= */
/* 1000px以上の画面では、ラインナップの箱を最低1000px確保 */
@media (min-width:1000px){
  #lineup{
    width:800px;
    max-width:80vw;      /* 画面が狭い時ははみ出さない保険 */
    margin:0 auto;
  }
}
/* =====================================
   ラインナップ（プロ仕様）
===================================== */

#lineup #contentswhite .row2{
  display:grid !important;
  grid-template-columns:repeat(5, 1fr);
  column-gap:14px;
  row-gap:64px;                /* ← 行間ゆったり */
  align-items:start;
}

/* ===== 5列時（デフォルト） ===== */
#lineup #contentswhite .row2 > .col:nth-child(n+6){
  border-top:1px dashed rgba(0,0,0,0.2);
  padding-top:40px;
}


/* 1000px未満：4列 */
@media (max-width:1170px){
  #lineup #contentswhite .row2{
    grid-template-columns:repeat(4, 1fr);
  }
	 /* 4列時：5番目から2段目 */
  #lineup #contentswhite .row2 > .col:nth-child(n+5){
    border-top:1px dashed rgba(0,0,0,0.2);
    padding-top:40px;
  }
}

/* 767px未満：3列 */
@media (max-width:860px){
  #lineup #contentswhite .row2{
    grid-template-columns:repeat(3, 1fr);
    row-gap:48px;
  }
	#lineup #contentswhite .row2 > .col:nth-child(n+4){
    border-top:1px dashed rgba(0,0,0,0.2);
    padding-top:40px;
  }
}

/* 599px未満：2列 */
@media (max-width:630px){
  #lineup #contentswhite .row2{
    grid-template-columns:repeat(2, 1fr);
    row-gap:40px;
  }
	  #lineup #contentswhite .row2 > .col:nth-child(n+3){
    border-top:1px dashed rgba(0,0,0,0.2);
    padding-top:30px;
  }
}

/* 480px未満：1列 */
@media (max-width:480px){
  #lineup #contentswhite .row2{
    grid-template-columns:1fr;
  }

  #lineup #contentswhite .row2 > .col:nth-child(n+2){
    border-top:1px dashed rgba(0,0,0,0.2);
    padding-top:24px;
    margin-top:24px;
  
	}}


/* ===== 各カード ===== */

#lineup #contentswhite .row2 > .col{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  text-align:center;
  padding:10px 10px 0;
}

/* タイトル */
#lineup .item-title{
    font-size: 120%;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 14px;
}

/* 画像 */
#lineup #contentswhite .row2 img{
  width:100%;
  max-width:170px;
  height:auto;
  margin:0 auto 18px;
  transition:transform .25s ease;
}

/* ほんの少しホバー演出 */
#lineup #contentswhite .row2 > .col:hover img{
  transform:scale(1.05);
}

/* 価格 */
#lineup #contentswhite .row2 > .col p{
  margin-top:auto;         /* ← 価格を下に揃える */
  font-size:160%;
  font-weight:800;
  margin-bottom:6px;
}

#lineup #contentswhite .row2 .sub{
  font-size:70%;
  font-weight:600;
  margin-top:4px;
}


/*会社情報
-------------------------------------*/

* ====== ベース：中央寄せの囲み ====== */
.company-table{
  width: 70%;
  max-width: 1000px;
  margin: 30px auto;
  background: #fff;
  overflow: hidden;           /* はみ出し防止 */
  box-sizing: border-box;
  margin-bottom:100px;
}

/* ====== 行：左見出し固定幅／右可変 ====== */
.company-table .row{
  display: grid;
  grid-template-columns: 180px 1fr;   /* 見出し固定・本文可変 */
  gap: 24px;
  padding: 14px 0;
  border-top: 1px solid #cfd3d7;      /* 横罫線 */
  align-items: start;
}
.company-table .row:first-child{ border-top: none; }

/* ====== 見出しセル ====== */
.company-table .th{
  font-weight: 700;
  color: #555;                        /* ややグレー */
  line-height: 1.6;
  letter-spacing: .02em;
  /* 画像の雰囲気に合わせて左寄せ（右寄せにしたい場合は text-align:right; に） */
  text-align: left;
  white-space: nowrap;
}

/* ====== 内容セル ====== */
.company-table .td{
  line-height: 1.9;
  color: #222;
  word-break: break-word;             /* 長い語の折返し */
  min-width: 0;                       /* グリッドはみ出し防止 */
}

/* ====== リスト（・四角い黒ポチ風） ====== */
.company-table .td .circle-list{
  margin: 4px 0 0 0;
  padding: 0;
  list-style: none;
}
.company-table .td .circle-list li{
  position: relative;
  padding-left: 1.2em;
  margin: .25em 0;
}
.company-table .td .circle-list li::before{
  content: "";
  position: absolute;
  left: 0; top: .6em;
  width: .45em; height: .45em;
  background: #333;                   /* 黒いポチ（四角） */
  border-radius: 2px;                 /* 丸にしたければ 50% */
  transform: translateY(-50%);
}

/* ====== リンク ====== */
.company-table a{
  color: #2563eb;
  text-decoration: none;
}
.company-table a:hover{ text-decoration: underline; }

/* ====== レスポンシブ ====== */
@media (max-width: 1100px){
  .company-table{ width: 80%; }
  .company-table .row{ grid-template-columns: 160px 1fr; }
}
@media (max-width: 820px){
  .company-table{ width: 88%; }
  .company-table .row{ grid-template-columns: 140px 1fr; gap: 18px; }
  .company-table .th{ font-size: 95%; }
}
@media (max-width: 640px){
  /* スマホは1カラムに崩して読みやすく */
  .company-table{
	width: 80%;
}
  .company-table .row{
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 12px 0;
  }
  .company-table .th{
    font-size: 100%;
    opacity: .9;
    margin-bottom: 2px;               /* 見出し→内容の余白 */
  }
}


/* ▼ スマホで確実に1カラム化（display:gridを解除） */
@media (max-width: 640px) {
  .company-table .row {
    display: block !important;     /* gridを解除してブロックに */
    padding: 12px 0;
    border-top: 1px solid #cfd3d7;
  }

  .company-table .th,
  .company-table .td {
    display: block !important;     /* 縦並びにする */
    width: 100% !important;
    text-align: left !important;   /* 左寄せに戻す */
    padding: 4px 0;
  }

  .company-table .th {
    margin-bottom: 4px;
    font-weight: 700;
    color: #555;
  }
}


.company-table .td ul.circle-list {
  list-style: none !important;
  margin: 0;
  padding: 0;
}
.company-table .td ul.circle-list li {
  position: relative;
  padding-left: 1.4em;
}
.company-table .td ul.circle-list li::before {
  content: "◯";
  position: absolute;
  left: 0;
  top: 0.1em;
  line-height: 1.6;
  opacity: 0.9;
  color: #333;
}
/* ◯印リスト（マーカー重なり対策・下げ調整） */
.company-table .td ul.circle-list {
  list-style: none !important; /* ← 黒い「・」を完全に消す */
  margin: 0;
  padding: 0;
}

.company-table .td ul.circle-list li {
  position: relative;
  padding-left: 1.6em;
  line-height: 1.9;
}

/* ◯の位置を少し下げる */
.company-table .td ul.circle-list li::before {
  content: "◯";
  position: absolute;
  left: 0;
  top: 0.35em; /* ← ここで下げ具合を調整（例：0.3〜0.4em） */
  font-size: 0.9em;
  color: #333;
  opacity: 0.9;
}

/* 黒丸マーカーを完全に無効化し、◯だけ表示 */
.company-table .td ul.circle-list {
  list-style-type: none !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ブラウザが自動生成するマーカーを非表示 */
.company-table .td ul.circle-list li::marker {
  content: "" !important; /* ← これで黒い点を完全除去 */
}

/* 独自の◯マークを表示 */
.company-table .td ul.circle-list li {
  position: relative;
  padding-left: 1.6em;
  line-height: 1.9;
}

.company-table .td ul.circle-list li::before {
  content: "◯";
  position: absolute;
  left: 0;
  top: 0.35em; /* ← 少し下げる */
  font-size: 0.9em;
  color: #333;
  opacity: 0.9;
}
/* ==== 1) 既存のマーカーと擬似要素を徹底的に無効化 ==== */
.company-table .td ul.circle-list {
  list-style: none !important;          /* 黒い点を無効化 */
  margin: 0 !important;
  padding: 0 !important;
}
.company-table .td ul.circle-list li::marker {
  content: "" !important;               /* UAマーカー完全除去 */
}
/* 以前の「四角ポチ」などを消す（サイズ/背景の残りを潰す） */
.company-table .td ul.circle-list li::before {
  content: none !important;             /* まず消す */
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ==== 2) 新しく ◯ を描く（位置は少し下げる） ==== */
.company-table .td ul.circle-list li {
  position: relative;
  padding-left: 1.6em;                  /* 文字の前に余白 */
  line-height: 1.9;
}
.company-table .td ul.circle-list li::before {
  content: "◯" !important;
  position: absolute;
  left: 0;
  top: 0.38em;                           /* ← 下げ具合。0.32〜0.45emで微調整 */
  line-height: 1;
  font-size: 0.95em;                     /* 文字サイズ連動で微調整可 */
  color: #333;
  opacity: .9;
}





.green-back {
	background-color: #e2f0e7;
	padding-top: 50px;
}




#width60{
	width:60%;
	margin-left:auto;
	margin-right:auto;
	overflow:hidden;}


/* ▼ タブレット調整 */
@media (max-width:1000px){
#width60{
	width:80%;
	margin-left:auto;
	margin-right:auto;
	overflow:hidden;}
}

.width60{
	width:60%;
	margin-left:auto;
	margin-right:auto;
	overflow:hidden;}


/* ▼ タブレット調整 */
@media (max-width:1200px){
.width60{
	width:80%;
	margin-left:auto;
	margin-right:auto;
	overflow:hidden;}
}


@media (max-width:800px){
.width60{
	width:90%;
	margin-left:auto;
	margin-right:auto;
	overflow:hidden;}
}
@media (max-width:675px){
.width60{
	width:100%;
	margin-left:auto;
	margin-right:auto;
	overflow:hidden;}
}

#width50{
	width:65%;
	margin-left:auto;
	margin-right:auto;
	display:flex;                 /* ✅ flexにする */
	align-items:stretch;          /* ✅ 高さを揃える */
	gap: 2%;                      /* 左右の隙間 */
	margin-bottom: 20px;
	max-width: 900px;
}

/* 左：30% */
#L30{
  width:30%;
}

/* 右：残り */
#R70{
  width:68%;
  display:flex;
  align-items:flex-start;       /* ✅ 右側の中身を上寄せ */
  padding-top:20px;             /* ✅ 文字を下にずらす（調整用） */
}
	
/* ulの余白調整（好みで） */
.list ul{
  margin:0;
  padding-left:20px;
}	
	
.list ul li {

  position: relative;

  padding-left: 30px;
  list-style: none;
  font-weight:bolder;
 font-size: 120%;
}

.list ul li:before {

  color: #e95513;

  content: "▶";

  font-size: 120%;

  position: absolute;

  top: -5px;

  left: 0;

}

/* ▼ タブレット調整 */
@media (max-width:1200px){
		
#width50{
	width:90%;
	margin-left:auto;
	margin-right:auto;
	display:flex;                 /* ✅ flexにする */
	align-items:stretch;          /* ✅ 高さを揃える */
	gap: 2%;                      /* 左右の隙間 */
}

	
	
	/* 左：30% */
#L30{
  width:30%;
}

/* 右：残り */
#R70{
  width:68%;
  display:flex;
  align-items:flex-start;       /* ✅ 右側の中身を上寄せ */
  padding-top:20px;             /* ✅ 文字を下にずらす（調整用） */
}}

/* ▼ タブレット調整 */
@media (max-width:650px){
		
#width50{
	width:98%;
	margin-left:auto;
	margin-right:auto;
	display:flex;                 /* ✅ flexにする */
	align-items:stretch;          /* ✅ 高さを揃える */
	gap: 2%;                      /* 左右の隙間 */
}}
	
/* ulの余白調整（好みで） */
.list ul{
  margin:0;
  padding-left:20px;
}	
	
.list ul li {

  position: relative;

  padding-left: 30px;
  list-style: none;
  font-weight:300;
 font-size: 110%;
}

.list ul li:before {

  color: #e95513;

  content: "▶";

  font-size: 110%;

  position: absolute;

  top: -5px;

  left: 0;

}}


/* ▼ タブレット調整 */
@media (max-width:730px){
		
#width50{
	width:95%;
	margin-left:auto;
	margin-right:auto;
	display:flex;                 /* ✅ flexにする */
	align-items:stretch;          /* ✅ 高さを揃える */
	gap: 2%;                      /* 左右の隙間 */
}
}


/* ▼ タブレット調整 */
@media (max-width:640px){
	#width60{
	width:95%;
	margin-left:auto;
	margin-right:auto;
	overflow:hidden;}

	/* 左：30% */
#L30{
	display:none;
}

/* 右：残り */
#R70{
  width:90%;
  margin-right:auto;
  margin-left:auto;
  display:flex;
  align-items:flex-start;       /* ✅ 右側の中身を上寄せ */
  padding-top:20px;             /* ✅ 文字を下にずらす（調整用） */
}
}

#lineup{
	width:80%;
	margin-left:auto;
	margin-right:auto;
	background-color:#fcf5e5;
	padding-bottom: 5px;
	padding-top: 50px;
	margin-top:0px;
}


/* ▼ タブレット調整 */
@media (max-width:1000px){
#lineup{
	width:90%;
	margin-left:auto;
	margin-right:auto;
	background-color:#fcf5e5;
	padding-bottom: 5px;
	padding-top: 50px;
	margin-top:0px;
}}
/* ▼ タブレット調整 */
@media (max-width:650px){
#lineup{
	width:95%;
	margin-left:auto;
	margin-right:auto;
	background-color:#fcf5e5;
	padding-bottom: 5px;
	padding-top: 30px;
	margin-top:0px;
	padding-right: 15px;
	padding-left: 15px;
}}


#flow{
    width: 60vw;
    margin-left: auto;
    margin-right: auto;
    background-color: #fcf5e5;
    padding-bottom: 30px;
    margin-bottom: 100px;
}



#melit{
width:80%;
margin-left:auto;
margin-right:auto;
background-color:#ffffff;
}



#plan{
	width:100%;
	margin-left:auto;
	margin-right:auto;
	background-color:#f5c2d8;
	margin-bottom:100px;
	padding-top: 50px;
	padding-left:50px ;
	padding-right:50px;
	padding-bottom:30px;
}

@media (max-width:1000px){
	#plan{
	padding-left:30px;
	padding-right:30px;
	padding-bottom:20px;
	padding-top: 30px;
}}

@media (max-width:500px){
	#plan{
	padding-left:20px;
	padding-right:20px;
	padding-bottom:10px;
	padding-top: 20px;
}}


#plantittle{
	background-color:#e40060;
	color:#ffffff;
	font-weight:bold;
	font-size:230%;
	padding-top:15px;
	padding-bottom:15px;
	margin-bottom: 0px;
}

@media (max-width:1000px){
	#plantittle{
	background-color:#e40060;
	color:#ffffff;
	font-weight:bold;
	font-size:200%;
	padding-top:10px;
	padding-bottom:10px;
	margin-bottom: 0px;
}
}

@media (max-width:630px){
	#plantittle{
	background-color:#e40060;
	color:#ffffff;
	font-weight:bold;
	font-size:180%;
	padding-top:8px;
	padding-bottom:8px;
	margin-bottom: 0px;
}
}

@media (max-width:500px){
	#plantittle{
	background-color:#e40060;
	color:#ffffff;
	font-weight:bold;
	font-size:130%;
	padding-top:6px;
	padding-bottom:6px;
	margin-bottom: 0px;
}
}
	
#width100{
	width:100%;
	overflow:hidden;
	margin-bottom: 100px;
}
	
#width100tel{
	width:100%;
	overflow:hidden;
	
}

.Lp50{
	width:50%;
	float:left;
	padding-left:50px;
	
}

.Rp50{
	width:50%;
	float:right;
	padding-right:50px;
}
@media (max-width: 950px){	
	.Lp50{
	width:100%;
	float:none;
	padding-left:0px;
	}

.Rp50{
	width:100%;
	float:none;
	padding-right:0px;
	padding-top:50px;
	padding-left:0px;}}

.L50{
	width:45%;
	float:left;
	padding-left:50px;}

.R50{
	width:50%;
	float:right;
	padding-right:50px;}
	
@media (max-width: 1400px){	
	.L50{
	width:45%;
	float:left;
	padding-left:20px;}

.R50{
	width:53%;
	float:right;
	padding-right:20px;}}


@media (max-width: 1230px){	
	.L50{
	width:70%;
	float:none;
	padding-left:0px;
	margin-left:auto;
	margin-right:auto;}

.R50{
	width:90%;
	max-width:600px;
	float:none;
	padding-right:0px;
	margin-left:auto;
	margin-right:auto;}}

.cLf50{
	width:45%;
	float:left;
	}

.cRf50{
	width:45%;
	float:right;
	}	

@media (max-width: 764px){	

.cLf50{
	width:80%;
	float:none;
	margin-left: auto;
	margin-right: auto;
	}

.cRf50{
	width:80%;
	float:none;
	margin-left: auto;
	margin-right: auto;
	}	}


.cL50{
	width:53%;
	float:left;
	}

.cR50{
	width:45%;
	float:right;
	}
@media (max-width: 1400px){		
}
	
#greentittle{
	width:100%;
	margin-left:auto;
	margin-right:auto;
	background-color:#92c75c;
	color:#ffffff;
	font-size:200%;
	font-weight:bold;}
	
@media (max-width:1000px){
	#greentittle{
	
	color:#ffffff;
	font-weight:bold;
	font-size:180%;

}
}

@media (max-width:630px){
	#greentittle{
	
	color:#ffffff;
	font-weight:bold;
	font-size:150%;


}
}

@media (max-width:500px){
	#greentittle{
	
	color:#ffffff;
	font-weight:bold;
	font-size:130%;


}
}

@media (max-width:400px){
	#greentittle{
	
	color:#ffffff;
	font-weight:bold;
	font-size:110%;


}
}		
	
#contentswhite{
	width:90%;
	margin-left:auto;
	margin-right:auto;
	background-color:#ffffff;
	margin-bottom:100px;
	padding: 20px 10px;   /* ← 上下 左右 */
	}
	
	#contentswhite3{
	width:100%;
	margin-left:auto;
	margin-right:auto;
	background-color:#ffffff;
	margin-bottom:100px;
	padding: 20px 10px;   /* ← 上下 左右 */
	}
	
#contentswhite2{
	width:90%;
	margin-left:auto;
	margin-right:auto;
	background-color:#ffffff;
	margin-bottom:100px;
	padding: 0px 0px;   /* ← 上下 左右 */
	}
	
	
.point-list{
  display:block;     /* ← flexをやめる */
  padding-left: 0;
  margin: 0;
  list-style: none;
  text-align:left;
  padding-left:20px;
}

.point-list li{
  white-space: normal;  /* ← nowrapを解除 */
  width: 100%;          /* ← 1行ずつ */
  margin-bottom: 8px;
}

.point-list .hl{
  color: #ff2a83;            /* ピンク強調 */
  font-weight: bold;
   font-size:120%;
   padding-left:5px;
}



/* スマホは1列 */
@media (max-width: 640px){
  .point-list li{
    width: 100%;
    white-space: normal;     /* スマホは折り返しOKに */
  }
}
.arrow{
  display: inline-block;   /* ←これが超重要！ */
  position: relative;
  width: 20px;
  height: 10px;
  background: #17b46b;
  border-radius: 3px;
  margin: 0 8px;           /* 文字との間隔（お好みで） */
}

/* 先端の三角 */
.arrow::after{
  content:"";
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  border-left: 14px solid #17b46b;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  
}








/* ===== スマホだけ：2行目を「→ 最短で設置」にして、→の位置に合わせて字下げ ===== */
@media (max-width: 640px){

  /* liを横並び＆折り返し可能に */
  .point-list li{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
  }

  /* ここで改行させる（あなたのsp-brを活かす） */
  .point-list .sp-br{
    flex-basis:100%;
    height:0;
  }

  /* 「→」の幅を確保（ここを調整すると字下げ量が変わる） */
  .point-list .arrow{
    display:inline-block;
    width:20px;      /* ← “→”の位置（字下げ幅）調整 */
	margin-left:40px;
  }

  /* 2行目の先頭（→の後ろ） */
  .point-list .hl{
    display:inline-block;
    margin-left:0;    /* 念のため */
	margin-bottom:10px;
  }

  /* 1行目と2行目の行間をあけたい場合 */
  .point-list .arrow,
  .point-list .hl{
    margin-top:6px;   /* ← 行間の調整 */
  }
}

@media (max-width: 470px){

.point-list .arrow{
    display:inline-block;
    width:15px;      /* ← “→”の位置（字下げ幅）調整 */
	margin-left:0px;
  }
 

 
  }


 

.container .hl{
	color: #ff2a83;            /* ピンク強調 */
	font-weight: bold;
	font-size:120%;
	padding-left:5px;
	padding-top: 0px;
	margin-top: 0px;
}

@media (max-width: 470px){
	.container .hl{
	color: #ff2a83;            /* ピンク強調 */
	font-weight: bold;
	font-size:100%;
	padding-left:5px;
	padding-top: 0px;
	margin-top: 0px;
}}


/* ===== 共通（全幅→レスポンシブで上書き） ===== */
.parent{
	display:flex;
	flex-wrap:wrap;
	gap:0;
	border:2px solid #036eb7;       /* 外枠 */
	margin-bottom:50px;
}

.parent > .child{
  box-sizing:border-box;
  background:#fff;

  /* 内側の罫線は「右＋下」だけ（重なり防止） */
  border-right:1px solid #036eb7;
  border-bottom:1px solid #036eb7;

  /* まずはスマホ：縦並び */
  flex: 0 0 100%;
}

/* スマホ：右線いらない、最後だけ下線なし */
@media (max-width: 600px){
  .parent > .child{ border-right:0; }
  .parent > .child:last-child{ border-bottom:0; }
}

/* ===== タブレット：A（1-2 / 3-4 / 5全幅） ===== */
@media (min-width: 601px) and (max-width: 900px){
  .parent > .child{
    flex: 0 0 50%;
  }

  /* 5だけ全幅 */
  .parent > .child:nth-child(5){
    flex-basis: 100%;
  }

  /* 右端（2列目）の右線を消す：2と4だけ */
  .parent > .child{ border-right:1px solid #036eb7; }
  .parent > .child:nth-child(2),
  .parent > .child:nth-child(4),
  .parent > .child:nth-child(5){  /* 5は全幅なので右線なし */
    border-right:0;
  }

  /* 最後（5）の下線を消す */
  .parent > .child:nth-child(5){
    border-bottom:0;
  }
}

/* ===== PC：上3つ3等分／下2つ2等分 ===== */
@media (min-width: 901px){
  .parent > .child{
    flex: 0 0 calc(100% / 3);
  }
  .parent > .child:nth-child(4),
  .parent > .child:nth-child(5){
    flex-basis: calc(100% / 2);
  }

  /* PC右端（3列目）は右線なし：3だけ */
  .parent > .child:nth-child(3){ border-right:0; }

  /* PC下段（4,5）は下線なし */
  .parent > .child:nth-child(4),
  .parent > .child:nth-child(5){
    border-bottom:0;
  }

  /* PC下段の右端（5）は右線なし */
  .parent > .child:nth-child(5){ border-right:0; }
}

/* 2等分になる時の調整（上限は一旦広め） */
@media (max-width: 1100px){
  .parent{
    padding-left: 48px;
    padding-right: 48px;
    box-sizing: border-box;
  }

  .parent > .child{
    padding: 18px 26px;
  }

  .parent > .child .box-title,
  .parent > .child .box-body,
  .parent > .child ul,
  .parent > .child p{
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
}






.box-title{ font-size: 150%; color: #036eb7; font-weight: bold; text-align: center; margin-bottom: 10px; line-height: 1.2; margin-top: 4px; }

.box-body{
	text-align:left;
	overflow:hidden;}

.L30{
	width:30%;
	float:left;
	text-align:right;
}

.R70{
	width:68%;
	float:right;}




.contactcontainer a img{
  transition: opacity .2s ease;
}

.contactcontainer a:hover img{
  opacity: 0.8;
}






/*************
/* フッター
*************/
.footer {
  background-color: #fff;
  font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  color: #333;
  position: relative;
  overflow: hidden;
   margin-bottom: 0;   /* ← これを追加：下の余白もゼロに */n
  
}

/* 背景：雲や家などの模様 */
.footer-bg {
 
}

.footer-inner {
  width:80%;
  margin: 0 auto;
  padding: 20px;
  overflow:hidden;
  max-width:1000px;
  
}

@media (max-width: 1280px) {	

.footer-inner {
  width:90%;
  margin: 0 auto;
  padding: 20px;
  overflow:hidden;
  min-width:800px;
  
}}
@media (max-width: 750px) {	

.footer-inner {
  width:90%;
  margin: 0 auto;
  padding: 20px;
  overflow:hidden;
  min-width:300px;
  
}}


.footer-logo-block {
  margin-bottom: 15px;
}


.footer-logo {
  width: 100%;
  max-width:350px;
  vertical-align: middle;
	padding-bottom: 20px;
  
}

.footer-title {
  display: inline-block;
  font-size: 20px;
  font-weight: bold;
  margin: 5px 0;
}

a.contact-btn {
	width:60%;
  display: inline-block;
  background-color: #ec6b62;
  color: #fff;
  font-weight: bold;
  font-size:130%;
  text-align:center;
  padding-top:15px;
  padding-bottom:15px;
  
  text-decoration: none;
  margin-top: 15px;
  margin-left:auto;
  margin-right:auto;
  transition: background 0.3s;
  border: 2px solid #ec6b62;
}

a.contact-btn:hover {
  background-color: #ffffff;
  color: #ec6b62;
 border: 2px solid #ec6b62;

}

.footer-info {
  font-size: 18px;
  line-height: 1.6;
  margin-top: auto;
  margin-bottom: auto;
  background-color:#ffffff;
 justify-content:center;  /* 縦中央 */
}

#cfL{
	width:70%;
	float:left;
	padding-top: 30px;
}
			
		#cfR{
			width:48%;
			float:right;
			 
			 
			
			}

@media screen and (max-width: 780px) {

#cfL{
			width:40%;
			float:left;}
			
		#cfR{
			width:60%;
			float:left;
			 
			 
			
			}}


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

.footer-nav li {
  display: inline-block;
  margin: 0 15px;
}

.footer-nav a{
  color: #6ab32e;
  text-decoration: none;
  font-size: 20px;
  font-weight: bold;
  transition: opacity 0.3s;
}

.footer-nav a:hover {
  color: #6a6b05;      /* 濃い緑に */
  font-size: 20px;
}

.footer-illust img {
  width: 180px;
  margin-top: 10px;
}

.footer-copy {
  background-color: #57a4e2;
  color: #fff;
  font-size: 18px;
  text-align: center;
  padding: 20px 0;
  margin-top: 10px;
  margin-bottom: 0;   /* ← これを追加：下の余白もゼロに */
}

#contentsF100{ 
	width:100%;
	display:flex;
	align-items:stretch;     /* ←これで左右の高さが揃う */
	overflow:hidden;
	margin-right:auto;
	margin-left:auto;
	margin-bottom:20px;}


#FL{
			width:75%;
			float:left;}
			
		#FR{
			width:23%;
			float:left;
			text-align:left;}
			@media screen and (max-width: 850px) {
				#FL{
			width:100%;
			float:left;}
			
		#FR{
			display:none;}}

/* スマホ対応 */
@media screen and (max-width: 600px) {
  .footer-inner {
    padding: 15px;
  }

 .footer-nav a{
  color: #6ab32e;
  text-decoration: none;
  font-size: 13px;
  font-weight: bold;
  transition: opacity 0.3s;
}
.footer-nav a:hover {
  color: #6a6b05;      /* 濃い緑に */
  font-size: 13px;
}
  .footer-illust img {
    width: 140px;
  }
}










/* フッターのナビ全体 */
.footer-nav{
  width: 100%;
  overflow: visible;         /* 念のため：はみ出しで切らない */
}

/* ul の初期余白を消す */
.footer-nav ul{
  margin: 0;
  padding: 0;
  list-style: none;

  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;   /* ← ここを変更 */
  gap: 10px 18px;
}


/* li はブロック化して詰めやすく */
.footer-nav li{
  margin: 0;
}

/* リンクの見た目（お好みで） */
.footer-nav a{
  display: block;
  white-space: nowrap;       /* 「よくある質問」などを途中で改行させない */
  text-decoration: none;
  padding: 6px 4px;
}
















.ruleCell .ttl{
  width:100%;
  color:#2a6fdb;
  font-weight:800;
  font-size:18px;
  text-align:center;
  margin:0 0 12px;
}

.ruleCell .cellBody{
  display:flex;
  gap:14px;
  align-items:flex-start;
}

.ruleCell .cellIcon{
  width:60px;
  height:auto;
  flex:0 0 60px;   /* 縮まない */
}

.ruleCell .cellList{
  margin:0;
  padding-left:18px;
  font-weight:600;
  font-size:14px;
  line-height:1.55;
}

.cellList{
	text-align:left;}


/* 横並びはここだけ */
.ruleCell .cellBody{
  display:flex;
  gap:14px;
  align-items:flex-start;
}


.ruleTable{
  --b:#2a6fdb;
  border:2px solid var(--b);
  background:#fff;

  display:grid;
  grid-template-columns: repeat(3, 1fr); /* ✅ PCは3列 */
}

/* 各マス */
.ruleCell{
  padding:18px;
  display:flex;
  gap:14px;
  align-items:flex-start;
  box-sizing:border-box;
 display:block;   /* ←これがポイント */
  border-right:1px solid var(--b);
  border-bottom:1px solid var(--b);
}

/* 右端の縦線を消す（3列の右端） */
.ruleCell:nth-child(3){
  border-right:none;
}

/* 下段2つを横幅2列分にする（PCだけ） */
.ruleCell.wide{
  grid-column: span 1; /* 後でPCだけ上書き */
}

/* ---- 中身デザイン（任意） ---- */
.icon{
  width:58px;
  height:58px;
  
  flex:0 0 58px;
}

.ttl{
  color:var(--b);
  font-weight:800;
  font-size:18px;
  margin:2px 0 8px;
}

.ruleTable ul{
  margin:0;
  padding-left:18px;
  font-weight:600;
  font-size:14px;
  line-height:1.55;
}

.red{
  color:#d93025;
  font-weight:800;
}


/* ✅ PC：下段2つを「2列分ずつ」にする */
@media (min-width: 1257px){
  .ruleCell.wide{
    grid-column: span 1; /* 一旦そのまま */
  }

  /* 4個目と5個目を2列にしたい場合は、PCは2列レイアウトに組み替え */
  .ruleTable{
    grid-template-columns: repeat(6, 1fr);
  }
  .ruleCell{
    grid-column: span 2; /* 上3つ＝2ずつ */
  }
  .ruleCell.wide{
    grid-column: span 3; /* 下2つ＝3ずつ（=2列） */
  }

  /* 右端の縦線を消す（上段右端と下段右端） */
  .ruleCell:nth-child(3),
  .ruleCell:nth-child(5){
    border-right:none;
  }

  /* 最下段は下線なし */
  .ruleCell:nth-child(4),
  .ruleCell:nth-child(5){
    border-bottom:none;
  }
}


/* ✅ 幅が小さくなったら：2列（2つ→2つ→1つ） */
@media (max-width: 1256px){
  .ruleTable{
    grid-template-columns: repeat(2, 1fr);
  }

  .ruleCell{
    grid-column: span 1;
  }

  /* 2列の右端は縦線なし */
  .ruleCell:nth-child(2),
  .ruleCell:nth-child(4){
    border-right:none;
  }

  /* wide指定は解除（通常の1マス扱い） */
  .ruleCell.wide{
    grid-column: span 1;
  }

  /* 最後（5個目）は下線なしにするなら */
  .ruleCell:last-child{
    border-bottom:none;
  }
}






@media (max-width: 1256px){

  /* 2列レイアウト */
  .ruleTable{
    grid-template-columns: repeat(2, 1fr);
  }

  /* 通常セル */
  .ruleCell{
    grid-column: span 1;
  }

  /* 右列は右端なので右線なし */
  .ruleCell:nth-child(2),
  .ruleCell:nth-child(4){
    border-right: none;
  }

  /* ✅ 最後（5個目）を2列ぶち抜きで中央 */
  .ruleCell:last-child{
    grid-column: 1 / -1;     /* 2列分使う */
    justify-content: center; /* 中身を中央寄せ */
  }

  /* ✅ 中身が横に広がりすぎないように（見た目が整う） */
  .ruleCell:last-child .txt{
    max-width: 520px;
  }

  /* 最後は下線なし（必要なら） */
  .ruleCell:last-child{
    border-bottom: none;
  }
  
  
  
   /* ✅ 2段目の左側（3番目）に縦線を強制 */
  .ruleCell:nth-child(3){
    border-right: 1px solid var(--b) !important;
  }

  /* ✅ 右側（4番目）は右端なので右線なし */
  .ruleCell:nth-child(4){
    border-right: none !important;
  }
  
  
  /* 右列（偶数）は右端なのでセル右線なし */
  .ruleCell:nth-child(even){
    border-right: none !important;
  }

  /* 最後（5個目）は2列ぶち抜き＝右端なので右線なし */
  .ruleCell:last-child{
    border-right: none !important;
  }
}




/* ✅ さらに小さくなったら：1列（1つ→1つ→1つ→1つ→1つ） */
@media (max-width: 770px){
  .ruleTable{
    grid-template-columns: 1fr;
  }

  .ruleCell{
    border-right:none;
  }

  /* 最後だけ下線なし */
  .ruleCell:last-child{
    border-bottom:none;
  }
  
    /* 1列 */
  .ruleTable{
    grid-template-columns: 1fr;
  }

  /* ✅ セルの枠線を一旦全部消す → 下線だけ付け直す */
  .ruleTable .ruleCell{
    border: 0 !important;                         /* ←これが効く */
    border-bottom: 1px solid var(--b) !important; /* 下線だけ */
  }

  /* ✅ 最後は下線なし（好み） */
  .ruleTable .ruleCell:last-child{
    border-bottom: 0 !important;
  }
  
}










/* ✅ アイコン右の文章エリアを伸ばす（全マス共通で効く） */
.ruleCell .cellBody{
  display:flex;
  gap:14px;
  align-items:flex-start;
}

.ruleCell .cellList{
  flex: 1;
  min-width: 0;
  width: 100%;
}



.cell60{
	width:60%;
	margin-left: auto;
	margin-right: auto;
}


@media (max-width: 1256px){
.cell60{
	width:100%;
	margin-left: auto;
	margin-right: auto;
}
}



.cell602{
	width:60%;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 770px){
.cell602{
	width:100%;
	margin-left: auto;
	margin-right: auto;
}
}



.melit{
	margin-bottom:20px;
}



/* そんな時に… */

/* ====== ベース ====== */
.feature {
  display: flex;
  gap: 10px;
  align-items: stretch;     /* PCは左右の高さを揃える */
  padding: 24px;
  border-radius: 16px;
 
}

/* 左：画像 */
.feature__media {
  flex: 0 0 30%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature__media img {
  width: 100%;
  height: auto;
  /* 高さ揃え時に間延びしにくくする（ブラウザ対応も広い） */
  aspect-ratio: 4 / 3;
  object-fit: contain;
  display: block;
}

/* 右：テキスト */
.feature__body {
  flex: 1;
  min-width: 0; /* 長い文字で横にはみ出すのを防ぐ */
}

.feature__title {
  margin: 0 0 12px;
  line-height: 1.4;
  font-size: clamp(18px, 2.2vw, 26px);
}

.feature__accent {
  color: #ff4fa0;
  font-weight: 700;
}

.feature__list {
  margin: 0;
  padding-left: 1.2em;
  line-height: 1.7;
}

.feature__list li + li {
  margin-top: 10px;
}

/* ====== モバイル ====== */
@media (max-width: 768px) {
  .feature {
    flex-direction: column;  /* 縦並び */
    align-items: flex-start; /* 高さ揃えを解除（余白が増えるのを防ぐ） */
  }

  .feature__media {
	  display:none;
  }
}



.main-imgs{
  width:60%;
  max-width:100%;
  height:auto;
}
@media (max-width: 1000px) {
	.main-imgs{
  width:80%;
  max-width:100%;
  height:auto;
}}


@media (max-width: 700px) {
	.main-imgs{
  width:100%;
  max-width:100%;
  height:auto;
}}






.main-imgs2{
  width:60%;
  max-width:100%;
  height:auto;
}
@media (max-width: 1000px) {
	.main-imgs2{
  width:80%;
  max-width:100%;
  height:auto;
}}









.melit-imgs{
  width:350px;
  
}
@media (max-width: 1108px) {
.melit-imgs{
  width:330px;
  
	}}

@media (max-width: 1082px) {
.melit-imgs{
  width:300px;
  
	}}
@media (max-width: 750px) {
.melit-imgs{
  display:none;
  
	}}


/* メリット本文幅 */
#melitwidth{
  width:75%;
  margin-left:auto;
  margin-right:auto;
}

/* 段階的に広げる */
@media (max-width:1380px){
  #melitwidth{ width:85%; }
}
@media (max-width:1295px){
  #melitwidth{ width:90%; }
}
@media (max-width:1225px){
  #melitwidth{ width:95%; }
}
@media (max-width:1164px){
  #melitwidth{ width:100%; }
}

/* スマホは左右余白を最小に */
@media (max-width:800px){
  #melitwidth{
    width:100%;
  }
}
		
		
		
/* 基本：非表示 */
.sp-onlycon { display:none; }
.pc-onlycon { display:block; }

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

		
		
		
		
	.youtube-wrap{
  width:100%;
  max-width:none;
  position:relative;
  padding-top:56.25%; /* 16:9 */
}

.youtube-wrap iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  border:0;
}
		
		
		

		
		




@media (max-width:800px){
  #flow{
    background:#fcf5e5;
    width:94vw;
    margin:0 auto;
    text-align:center;   /* 中央寄せ */
  }

  #flow img{
    display:block;
    margin:0 auto;       /* 画像も中央 */
    width:100%;
    height:auto;
  }
}


.qa {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px; /* ← 左右の余白 */
}

.qa-item {
  margin-bottom: 32px;
}

.qa-question {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 0px; /* ← 緑文字の下余白を狭く */
  color: #39b54a;
  font-size: 1.95rem;
  font-weight: bold;
  line-height: 1.5;
}

.qa-question::before {
  content: "?";
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ea8a95;
  color: #fff;
  text-align: center;
  line-height: 22px;
  font-size: 1.3rem;
  font-weight: bold;
  margin-top: 0.15em;
}

.qa-answer {
  margin: 0;
  padding-left: 32px;
  font-size: 1.55rem;
  line-height: 1.9;
  color: #222;
}

.qa-answer p {
  margin: 0;
}








.form-embed {
  width: 100%;
}

.form-embed iframe {
  width: 100%;
  height: 2000px;
  border: none;
  display: block;
}




@media (max-width:730px){
	.form-embed iframe {
  width: 100%;
  height: 2200px;
  border: none;
  display: block;
	}}

@media (max-width:580px){
	.form-embed iframe {
  width: 100%;
  height: 3000px;
  border: none;
  display: block;
	}}