@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ---------- RESET ---------- */
/* Contact Form 7 が自動でフォーム先頭に差し込む Turnstile を全消し */
.wpcf7 form > .cf-turnstile { 
  display:none !important; 
}
 
/* 自分で置いたラッパーのものは表示する */
.turnstile-wrap .cf-turnstile { 
  display:block !important; 
}
 
/* レイアウト安定用 */
.turnstile-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:16px 0 12px;
  min-height:44px;   /* 成功メッセージで高さがズレないように */
}
.cf-turnstile, .cf-turnstile > iframe{
  display:block;
  max-width:100%;
}


html{
  scroll-behavior:smooth;
}
@media (min-width: 660px) {
	#landing{
		max-width:660px;
		margin:0 auto;
	}
}
@media (min-width: 660px) {
	.visual-block__cta{
		width:270px !important;
	}
	.visual--hero .visual-block__cta-wrap, .visual--worries .visual-block__cta-wrap{
		width:594px;
	}
}
@media (max-width: 660px) {
	.faq-block .visual-block__cta-wrap .visual-block__cta-link .visual-block__cta{
		width: 42vw;
	}
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
img{max-width:100%;height:auto;display:block;border:0}

/* ---------- Visual Block (full-width hero＋CTA) ---------- */
.visual-block{position:relative;overflow:hidden;width:100%}
.visual-block__image{width:100%;height:auto}
.visual-block__cta-wrap{
  position:absolute;
  bottom:26px;
  left:50%;
  transform:translateX(-49%);
  display:flex;
  gap:5%;
  flex-wrap:nowrap;
  justify-content:center;
}
.visual-block__cta-link:hover img{
  transition:opacity .2s;
}
.visual-block__cta{width:44vw;height:auto;cursor:pointer}
.visual--worries .visual-block__cta-wrap{bottom:8vw}
@media (min-width: 660px) {.visual--worries .visual-block__cta-wrap{bottom:65px}}

.visual--hero .visual-block__cta-wrap,
.visual--worries .visual-block__cta-wrap{
    width: 90vw
}
@media (min-width: 660px) {
	.visual--hero .visual-block__cta-wrap,
.visual--worries .visual-block__cta-wrap{
     width: 100%;
}
}

/* ---------- Base ---------- */
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Yu Gothic','Segoe UI',sans-serif}

/* ---------- Service Area ---------- */
.service-area{
  padding:60px 40px 5px;
  background:#fff;
  background-image:
    repeating-linear-gradient(0deg,transparent 0 29px,rgba(0,0,0,.1) 30px),
    repeating-linear-gradient(90deg,transparent 0 29px,rgba(0,0,0,.1) 30px);
  background-size:30px 30px;
  text-align:center;
}
.service-head h2{font-size:2.5rem;line-height:1.1;margin:0 0 .5rem;font-weight:800;color:#1f2327}
.service-head p{font-size:1rem;font-weight:500;line-height:1.6;margin:0 0 3.5rem}
.accent{color:#ff9900;font-weight:600}

/* ---------- Service Card ---------- */
.service-card{
  margin:0 auto 3.5rem;
  border:2px solid #00b035;
  border-radius:10px;
  background:#e6f9e9;
  width:100%;
  position:relative;
  transition:box-shadow .25s;
}
.service-card[open]{box-shadow:0 4px 14px rgba(0,0,0,.15)}
.service-card summary{
  list-style:none;
  cursor:pointer;
  padding:75px 20px 30px;
  position:relative;
}
.service-card summary::-webkit-details-marker{display:none}
.icon-wrap{
  position:absolute;
  top:-35px;left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
}
.icon-wrap img{width:100px;height:auto}
.service-card h3{font-size:2rem;line-height:1.1;margin:.2em 0;color:#1ac835;font-weight:800}
.service-card .lead{margin:0 0 1em;font-size:1.1rem;font-weight:800;color:#1f2327}
.service-card.is-open .toggle-btn .arrow{transform:rotate(180deg)}
.service-card.pre-open .card-body{
  margin:0;            /* 余白ゼロでまず折り畳み状態に */
  padding:0 20px;
}


/* ---------- Toggle Button ---------- */
.toggle-btn{
  appearance:none;
  border:none;
  background:#262f39;
  color:#fff;
  font-size:1rem;
  font-weight:400;
  border-radius:32px;
  padding:8px 36px;
  cursor:pointer;
  position:relative;
}
.toggle-btn .is-bold{font-weight:700}
/* ---------- Card Body ---------- */
.card-body{
  max-height:0;
  opacity:0;
  overflow:hidden;
  margin:0;
  padding:0 20px;
  background:#fff;
  transition:max-height .55s cubic-bezier(.25,1,.3,1),opacity .35s ease,padding .35s ease,margin .35s ease;
}
.service-card.is-open .card-body{margin:0 20px 20px;padding:0 20px}
.card-body h4{
  font-size:1.2rem;
  font-weight:700;
  color:#00b035;
  margin:30px 0 1.2em;
  border-top:3px solid #00b035;
  border-bottom:3px solid #00b035;
  padding:12px 0;
  text-align:center;
}

.service-card.is-closing .card-body{
  /* 余白を 0 にする。ただし transition 対象なのでスムースに消える */
  margin:0;
  padding:0 20px;
}

/* ---------- Ordered List ---------- */
.card-body ol{margin:0 0 1.8em;padding:0;list-style:none;text-align:left;counter-reset:num}
.card-body ol li{
  position:relative;
  padding-left:25px;
  margin:.4em 0;
  font-size:1rem;
  line-height:1.55;
  font-weight:700;
}
@counter-style circled-decimal{
  system:fixed;
  symbols:① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩;
  suffix:" "
}
.card-body ol li::before{
  counter-increment:num;
  content:counter(num,circled-decimal);
  position:absolute;
  left:0;top:.2em;
  font-weight:700;
  font-size:1.1rem;
  color:#ff9900;
  line-height:1;
}
.demo-media{
  text-align:center;
  margin:0 0 1.8em;
  border-radius:8px;
  box-shadow:0 3px 8px rgba(0,0,0,.12);
  overflow:hidden;
}
.demo-media img,.demo-media video{
  width:100%;
  height:100%;
  object-fit:cover;
  transform-origin:center;
}

/* ---------- Check-points List ---------- */
.check-points{margin:1em 0 0;padding:0;list-style:none;text-align:left}
.check-points li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:1em 0;
  font-size:1rem;
  line-height:1.55;
  font-weight:800;
  padding-top:.6em;
}
.check-points li+li{border-top:1px solid #ccc;padding-top:1.4em}
.check-points li::before{
  content:"";
  flex:0 0 20px;
  height:20px;
  align-self:center;
  margin-top:.1em;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ff9900" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="7 13 11 17 23 3"/></svg>') center/contain no-repeat;
}

/* ---------- Compare Block ---------- */
.compare-block{padding:0;background:#fff;text-align:center}
.compare-head{
  margin:0 auto 0;
  padding:22px 20px;
  background:var(--accent-green,#00b035);
  color:#fffdee;
  font-size:2rem;
  font-weight:600;
  position:relative;
  overflow:hidden;
}
.compare-head::before,
.compare-head::after{
  content:"";
  position:absolute;
  width:50px;height:50px;
  border:3px solid #fffdee;
}
.compare-head::before{border-right:none;border-bottom:none;top:12px;left:12px}
.compare-head::after{border-left:none;border-top:none;bottom:12px;right:12px}
.compare-head__primary{color:#fff488}
.compare-head__particle{font-size:.65em;vertical-align:baseline}

/* ---------- Compare Table ---------- */
.compare-table__wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  text-align:center;
  margin:0 auto;
}
.compare-table__img{display:block;width: 128.4vw;
    max-width: 1200px;height:auto;margin:40px 40px 5px}

@media (min-width: 670px) {
	.compare-table__img{
	  width: 87%;
	}
}

/* ---------- CTA in Compare Block ---------- */
.compare-block .visual-block__cta-wrap{
  position:static;
  transform:none;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:1vw;
  margin:50px auto 50px;
}

/* ---------- FAQ Block ---------- */
.faq-block{padding:40px 20px 1px;background:#eaf7e8}
.faq-head{margin:0 0 24px;font-size:2.5rem;font-weight:700;text-align:center;color:#1f2327}

/* FAQ Accordion */
.faq-item{
  margin:0 20px 30px;
  background:#fff;
  border-radius:4px;
  overflow:hidden;
  transition:box-shadow .25s;
}
.faq-item[open]{box-shadow:0 4px 12px rgba(0,0,0,.12)}
.faq-item__head{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
  padding:15px 45px 15px 20px;
  font-size:1.2rem;
  font-weight:700;
  color:#fff;
  background:#00c630;
  position:relative;
  flex-wrap:wrap;
}
.faq-item__head::-webkit-details-marker{display:none}
.faq-item__txt{flex:1 1 0%;min-width:0}
.faq-item__icon{
  flex:0 0 40px;
  width:40px;height:40px;
  border-radius:50%;
  background:#fff;
  color:#00c630;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.5rem;
  font-weight:800;
}
.faq-item__toggle{
  position:absolute;
  right:20px;top:50%;
  width:20px;height:20px;
  transform:translateY(-50%);
  transition:transform .35s ease;
}
.faq-item__toggle::before,
.faq-item__toggle::after{
  content:"";
  position:absolute;inset:0;margin:auto;
  background:#fff;
  transition:transform .35s ease;
}
.faq-item__toggle::before{width:100%;height:2px}
.faq-item__toggle::after{width:2px;height:100%}
.faq-item.is-open .faq-item__toggle{transform:translateY(-50%) rotate(360deg)}
.faq-item.is-open .faq-item__toggle::after{transform:scaleY(0)}
.faq-item.is-closing .faq-item__toggle{transform:translateY(-50%) rotate(-360deg)}
.faq-item.is-closing .faq-item__toggle::after{transform:scaleY(1)}

/* FAQ Answer */
.faq-item__body{
  max-height:0;
  opacity:0;
  overflow:hidden;
  background:#fff;
  transition:max-height .45s cubic-bezier(.25,1,.3,1),opacity .35s ease,padding .35s ease;
	padding:0 18px 0 18px;
}
.faq-item__answer{
  position:relative;
  padding-left:55px;
  margin:20px 0 20px;
  font-size:1.2rem;
  line-height:1.6;
  color:#333;
  font-weight:500;
}
.faq-item__answer::before{
  content:"A";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:40px;height:40px;
  border-radius:50%;
  background:#00c630;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.5rem;
  font-weight:800;
}


/* ---------- FAQ CTA ---------- */
.faq-block .visual-block__cta-wrap{
  position:static;
  transform:none;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:5%;
  margin:30px auto;
}

/* ========== 申し込みフォーム ========== */
.apply-block{
  padding:60px 20px 80px;
  background:#f6fff8;
  text-align:center;
}

.apply-head__title{
  font-size:2rem;
  font-weight:800;
  color:#1f2327;
  margin:0 0 .4em;
  line-height:1.2;
}
.apply-head__title .apply-head__primary{
  color:var(--accent-green,#00b035);
}
.apply-head__lead{
  font-size:1.2rem;
  font-weight:600;
  color:#555;
  margin:0 0 2.2em;
}
/* =============== フォーム全体ラッパー =============== */
.apply-form{
  max-width: 640px;
  margin: 0 auto;
  text-align: left;
  --border: 1.8px solid var(--accent-green,#00b035);
  --radius: 6px;
  --focus-ring: 0 0 0 3px rgba(0,176,53,.25);
}

/* ------- ラベル & 必須マーク ------- */
.apply-form label{
  display: block;
  font-weight: 600;
  margin-bottom: 10px;
}
.apply-form .required{
  color: #d32f2f;
  margin-left: .25em;
  font-size: .85em;
}

/* ------- 共通入力 ------- */
.apply-form input[type="text"],
.apply-form input[type="email"],
.apply-form input[type="tel"],
.apply-form textarea,
.apply-form select{
  width: 100%;
  padding: 12px 14px;
  border: var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
  line-height: 1.5;
  background: #fff;
  box-sizing: border-box;
  margin-bottom: 18px;
}

/* テキストエリア */
.apply-form textarea{
  min-height: 160px;
  resize: vertical;
}

/* ------- プルダウン用矢印カスタム ------- */
.apply-form select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2300b035' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  padding-right: 40px;
}

/* ------- フォーカスリング ------- */
.apply-form input:focus,
.apply-form textarea:focus,
.apply-form select:focus{
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ------- 送信ボタン ------- */
/* ============ APPLY (CF7 SUBMIT) ============ */
.apply-form .wpcf7-submit{
    /* ボタンのベース */
    display:block;
    align-items:center;
    gap:.6em;                         /* テキストとアイコンの間隔 */
    padding:1.1em 2.8em;              /* 余白 */

    font-size:1.05rem;                /* 可読サイズ */
    font-weight:700;
    line-height:1;                    /* 上下センター */

    color:#fff;
    background:#06C755;               /* LINE と同じブランドグリーン */
    border:none;
    border-radius:9999px;
    cursor:pointer;

    box-shadow:0 4px 10px rgba(6,199,85,.25);
    transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
	margin:32px auto 0;
}

/* ホバー＆フォーカス時の浮き上がり */
.apply-form .wpcf7-submit:hover,
.apply-form .wpcf7-submit:focus-visible{
    transform:translateY(-3px);
    box-shadow:0 6px 14px rgba(6,199,85,.35);
}

/* 非活性時（送信中など） */
.apply-form .wpcf7-submit[disabled],
.apply-form .wpcf7-submit.wpcf7-submit:disabled{
    opacity:.6;
    pointer-events:none;
}

/* ─ アイコンを付けたい場合 ─ */
/* SVG を CSS だけで埋め込むなら↓を有効にする。不要なら削除してください */
.apply-form .wpcf7-submit::before{
    content:"";
    width:1.2em;
    height:1.2em;
    background:url('data:image/svg+xml;utf8,\
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FFFFFF">\
        <path d="M5 13l4 4L19 7" stroke="%23FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat;
}

/* デフォルトの CF7 スピナーがボタン直後に挿入される場合の調整 */
/* 例: ボタンの近くに小さく表示したいとき */
.wpcf7-spinner{
    margin-left:.8em;
    width:20px; height:20px;
}


/* ========== Conditional Fields ========== */
/* 非表示グループは確実に隠す */
.apply-form .wpcf7cf_group.wpcf7cf_hidden{
  display:none !important;
}

/* 表示されたグループにフェード演出（任意） */
.apply-form .wpcf7cf_group{
  transition: opacity .25s ease, transform .25s ease;
  opacity:1;
  transform:translateY(0);
}
.apply-form .wpcf7cf_group.wpcf7cf_hidden{
  opacity:0;
  transform:translateY(-8px);
}

/* ------- ヘッダー（h3） ------- */
.apply-form h3{
  font-size:1.25rem;
  margin:32px 0 16px;
  position:relative;
  padding-left:12px;
}
.apply-form h3::before{
  content:'';
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  background:var(--accent-green,#00b035);
  border-radius:2px;
}

/* ========== サンクスメッセージ ========== */
.apply-form .thanks-block{
  /* 非表示制御は JS に任せる。見栄え用プロパティだけ指定 */
  max-width: 640px;          /* 本体と幅を合わせる */
  margin: 0 auto;            /* 中央寄せ */
  padding: 40px 28px;
  border: 2px solid var(--accent-green,#00b035);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  text-align: left;
  line-height: 1.6;
  font-size: 1.05rem;
}

/* 見出し（太字部分）を大きく／アクセント色に */
.apply-form .thanks-block strong{
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--accent-green,#00b035);
  margin-bottom: .75em;
  text-align: center;
}

/* 本文段落の余白調整 */
.apply-form .thanks-block p{
  margin: 0 0 1.4em;
}

/* 絵文字付き行を少しインデントしてアイコン風に */
.apply-form .thanks-block p:has(> svg),
.apply-form .thanks-block p:has(> .emoji){
  padding-left: 1.8em;
  text-indent: -1.8em;  /* 絵文字分を戻す */
}

/* モバイルで余白の微調整 */
@media (max-width: 480px){
  .apply-form .thanks-block{
    padding: 32px 20px;
    font-size: 1rem;
  }
}
input[type="hidden"]{display:none!important;}


/* ===============================
   Footer – site-footer
   ===============================*/
.site-footer{
  /* 背景は任意で変更してください */
  background:#f6fff8;
  padding:3rem 1rem;
  text-align:center;
  /* レイアウトが広がり過ぎないように */
  max-width:1280px;
  margin-inline:auto;
}

/* ── リンク行 ────────────── */
.site-footer .footer-links{
  /* インラインフレックスで中央に並べる */
  display:inline-flex;
  gap:1.6rem;          /* | 区切り線とリンクの余白 */
  align-items:center;
  font-weight:700;
  /* ビューポート幅に応じて可変する見出しサイズ */
  font-size:1rem;
}

/* 区切りパイプ（│） */
.site-footer .footer-links .divider{
  /* 同じカラーで統一 */
  color:#17c350;
}

/* ── リンク装飾 ─────────── */
.site-footer .footer-links a{
  color:#17c350;       /* 彩度高めのグリーン */
  text-decoration:none;
  transition:opacity .2s;
}
.site-footer .footer-links a:hover{
  opacity:.7;
}

/* ── コピーライト ───────── */
.site-footer .copyright{
  margin-top:1.2rem;
  font-size:.875rem;
  color:#17c350;
  display:block;
}


/* ============ CONTACT (LINE) ============ */
.contact-block{
    padding: 4rem 1.5rem;
    text-align: center;
    background: #f7fdf9;              /* ほんのり淡いグリーン */
}
.contact-block__title{
    font-size: clamp(1.6rem, 5vw, 2.2rem);
    font-weight: 700;
    margin-bottom: .5em;
}
.contact-block__lead{
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 2.5rem;
}
.contact-block__btn{
    display: inline-flex;
    align-items: center;
    gap: .6em;
    padding: 1.1em 2.4em;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    background: #06C755;              /* LINE グリーン */
    border-radius: 9999px;
    box-shadow: 0 4px 10px rgba(6,199,85,.25);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}
.contact-block__btn:hover,
.contact-block__btn:focus-visible{
    transform: translateY(-3px);
    box-shadow: 0 6px 14px rgba(6,199,85,.35);
}
.btn__icon{
    width: 1.2em;
    height: 1.2em;
    background: url('data:image/svg+xml;utf8,\
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FFFFFF">\
        <path d="M12 2C6.48 2 2 6.02 2 11c0 2.58 1.17 4.9 3.04 6.62L4 22l4.54-2.38C9.65 19.87 10.79 20 12 20c5.52 0 10-4.02 10-9s-4.48-9-10-9zM8 11h8v2H8v-2zm4-6c4.41 0 8 3.13 8 7 0 3.87-3.59 7-8 7-1.37 0-2.66-.28-3.8-.79l-.27-.12-2.69 1.41.51-2.96-.2-.2C4.62 15.05 4 13.55 4 12c0-3.87 3.59-7 8-7z"/>\
        </svg>') center/contain no-repeat;
}