@charset "UTF-8";

/* =========================
   LP専用（固定ページID=313のみ）
========================= */
/* キャンバスを画面端まで広げる（左右の白フチを消す） */
body.page-id-313 .lp,
body.page-id-313 .kv,
body.page-id-313 .kv__canvas,
body.page-id-313 .kv_canvas {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw) ;
  margin-right: calc(50% - 50vw) ;
  padding: 0;
}

/* ── 1) テーマ側のラップ余白をゼロに ───────────────── */
body.page-id-313 #inner-content,
body.page-id-313 .wrap,
body.page-id-313 #content,
body.page-id-313 .entry-content,
body.page-id-313 section.entry-content,
body.page-id-313 main,
body.page-id-313 article {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* 画像自体の上下のスキマも確実に消す */
body.page-id-313 img {
  display: block;
  margin: 0;
}

/* ── 2) ログイン時の管理バーによる上余白を無効化（閲覧者には影響なし） ── */
body.admin-bar.page-id-313 {
  margin-top: 0;  /* 一部テーマで body に余白を持たせる対策 */
}
html[style] {
  margin-top: 0;  /* WPが html に付ける inline margin-top を打ち消す */
}

/* キャンバスを画面端まで広げる（左右の白フチを消す） */
body.page-id-313 .lp,
body.page-id-313 .kv,
body.page-id-313 .kv__canvas,
body.page-id-313 .kv_canvas {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0;
}


body.page-id-313 #content,
body.page-id-313 .entry-content {
  padding: 0;
  margin: 0;
}


/* ヘッダー・サイドバー消す*/
body.page-id-313 .site-header,
body.page-id-313 header,
body.page-id-313 .site-footer,
body.page-id-313 footer,
body.page-id-313 .sidebar,
body.page-id-313 #secondary {
  display: none;
  margin: 0;
}

body.page-id-313 .site,
body.page-id-313 .site-main,
body.page-id-313 .content-area,
body.page-id-313 #primary,
body.page-id-313 #main,
body.page-id-313 .container,
body.page-id-313 .wrap,
body.page-id-313 .inner,
body.page-id-313 .l-container,
body.page-id-313 .l-content,
body.page-id-313 .entry-content,
body.page-id-313 .post-content {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ---- Base ---- */
body.page-id-313{
  font-family: "Noto Sans JP", sans-serif;
  overflow-x: hidden;
  margin: 0;
  background: linear-gradient(to bottom,#ddf5ff 0%,#ddf5ff 48%,#d4dbb8 100%);
}

/* ---- Config ---- */
:root{
  --pc-max: 1440px;
  --cta-bg: #f2a64c;
  --cta-bg-hover: #e59536;
  --shadow: 0 10px 22px rgba(0,0,0,.18), 0 4px 10px rgba(0,0,0,.08);
}

/* ---- Layout ---- */
body.page-id-313 .lp{
  display: flex;
  justify-content: center;
  padding: 0 16px;
}

body.page-id-313 .kv{
  width: 100%;
  max-width: var(--pc-max);
  margin-inline: auto;
}

body.page-id-313 .kv__canvas,
body.page-id-313 .kv_canvas{
  position: relative;
  max-width: var(--pc-max);
  margin-inline: auto;
}

/* 画像 */
body.page-id-313 .kv__canvas img,
body.page-id-313 .kv_canvas img{
  display:block; 
  width:100%; 
  height:auto; 
  pointer-events:none;
}

body.page-id-313 .kv__canvas img.alignleft{ 
  float:none;
  margin:0; 
}

/* ---- CTA（共通） ---- */
body.page-id-313 .kv__canvas .cta,
body.page-id-313 .kv_canvas .cta{
  position:absolute; left:50%; 
  transform:translateX(-50%);
  display:inline-block; 
  background:var(--cta-bg);
  color:#fff; 
  font-weight:700;
  text-align:center; 
  border-radius:50px; 
  padding:14px 38px;
  font-size: 22px;  
  min-width: 320px; 
  text-decoration:none; 
  box-shadow:var(--shadow); 
  transition:background .25s ease;
  z-index:20; pointer-events:auto;
}

body.page-id-313 .kv__canvas .cta:hover,
body.page-id-313 .kv_canvas .cta:hover{ 
	background:var(--cta-bg-hover); 
}


  
 

/* =========================
   Fallback（viewport無でもSP見え方を確保）
========================= */
@media screen and (max-device-width:768px),
       screen and (hover:none) and (pointer:coarse){
  body.page-id-313 .lp{ 
  padding:0 8px; 
  display:block; 
 }
 
  body.page-id-313 .kv,
  body.page-id-313 .kv__canvas,
  body.page-id-313 .kv_canvas{ 
  width:100%; 
  max-width:100%; 
  margin-inline:auto; 
 }
 
  body.page-id-313 .kv__canvas img,
  body.page-id-313 .kv_canvas img{ 
  max-width:100%; 
  height:auto; 
  }
}

/* === SP === */
@media (max-width:700px){
  body.page-id-313 .kv__canvas .cta--top,
  body.page-id-313 .kv_canvas .cta--top{
    font-size: 13px;  
    padding: 6px 14px; 
    border-radius: 30px ;
    min-width: 140px;   
    top: 20.5%; 
  }
  
  body.page-id-313 .kv__canvas .cta--bottom,
  body.page-id-313 .kv_canvas .cta--bottom{
    font-size: 9px;       
    padding: 4px 8px;     
    border-radius: 16px;  
    min-width: 70px;      
    top: 92.5%;      
  }
}


/* =========================
   フォーム（CF7）
========================= */
body.page-id-313 .form-card{
  position:absolute;
  left: var(--form-left, 10%);
  top:  var(--form-top, 41.5%);
  width: var(--form-width, 80%);
  background:#F5FBFF; 
  border:2px solid #B7D5EC; 
  border-radius:12px;
  padding:28px; 
  box-shadow:0 4px 12px rgba(0,0,0,.1);
  box-sizing:border-box; 
  z-index:10; 
  overflow:hidden;
}

body.page-id-313 .form-card fieldset{ 
　border:0; 
　margin:0; 
　padding:0; 
}

body.page-id-313 .form-card-title{
  display:block; 
  margin:20px 12px; 
  font-weight:700; 
  font-size:25px;
  text-align:center; 
  color:#173a52;
}

body.page-id-313 .form-field{ 
　width:90%; 
　max-width:700px; 
　margin:8px auto; 
}

body.page-id-313 .form-label{
  display:block; 
  padding-left:12px; 
  margin-bottom:2px;
}

/* 段落余白リセット */
body.page-id-313 .form-card p:not(.form-card-title),
body.page-id-313 .wpcf7 p,
body.page-id-313 .entry-content .wpcf7 p{
　margin:0; 
  padding:0;
 }
 
body.page-id-313 .wpcf7 br{ 
 display:none; 
}

body.page-id-313 .form-field .wpcf7-form-control-wrap{ 
 display:block;
 margin-top:2px; 
}

/* 入力欄 */
body.page-id-313 .form-field input,
body.page-id-313 .form-field textarea,
body.page-id-313 .form-input{
  width:100%; max-width:700px; 
  display:block;
  margin:4px auto 18px;
  background:#EAF6FF; 
  border:2px solid #CFE6F6; 
  border-radius:8px;
  padding:12px; 
  font-size:16px; 
  outline:none; 
  box-sizing:border-box;
}

body.page-id-313 .form-field input:focus,
body.page-id-313 .form-field textarea:focus,
body.page-id-313 .form-input:focus{
  border-color:#7CC2EF; 
  box-shadow:0 0 0 3px rgba(124,194,239,.2);
}

/* 送信ボタン */
body.page-id-313 .form-card .cta--form{
  position:static; 
  display:block; 
  width:auto; 
  max-width:360px;
  margin:16px auto 0; 
  padding:15px 35px; 
  text-align: center;
  border:none; 
  border-radius:50px; 
  background:var(--cta-bg); 
  color:#fff;
  font-weight:700; 
  font-size:18px; 
  cursor:pointer;
  box-shadow:0 6px 12px rgba(0,0,0,.15);
  transform:none; 
  transition:background .25s ease;
}

body.page-id-313 .form-card .cta--form:hover{ 
	background:var(--cta-bg-hover); 
	transform:none; 
}

body.page-id-313 .form-card .cta--form:active{ 
	transform:translateY(1px); 
}

/* 送信ボタン（色/角丸/中央） */
body.page-id-313 .form-card .wpcf7 input[type="submit"].cta--form,
body.page-id-313 .form-card input[type="submit"].cta--form,
body.page-id-313 .form-card .wpcf7-submit.cta--form{
  display:block; 
  width:auto; 
  max-width:360px;
  margin:16px auto 0; 
  padding:15px 35px; 
  text-align:cente;
  background:var(--cta-bg); 
  background-image:none; 
  color:#fff;
  border:0; 
  border-radius:50px; 
  box-shadow:0 6px 12px rgba(0,0,0,.15);
  transform:none; 
  transition:background .25s ease; 
  appearance:none !important; -webkit-appearance:none;
}

body.page-id-313 .form-card .wpcf7 input[type="submit"].cta--form:hover,
body.page-id-313 .form-card input[type="submit"].cta--form:hover,
body.page-id-313 .form-card .wpcf7-submit.cta--form:hover{
  background:var(--cta-bg-hover); 
  transform:none;
}

/* --- 内容欄（テキストエリア）高さ（PC基準） --- */
body.page-id-313 .form-field textarea{
  height:100px; 
  max-height:100px; 
  resize:none;
}

/* ---- Responsive（フォーム全体） ---- */
@media (max-width:1024px){
  body.page-id-313{ --form-top:36%; --form-left:6%; --form-width:88%; }
  
  body.page-id-313 .form-card{ 
  padding:12px 16px 20px; 
  border-radius:10px; 
  margin-top:-28px; 	
  box-shadow:0 2px 8px rgba(0,0,0,.12); 
 }
  
 body.page-id-313 .form-card-title{ 
 	font-size:15px; margin:4px 0 6px; 
 }
 
  body.page-id-313 .form-label{ 
  font-size:13px; 
  padding-left:6px; 
 }
 
  body.page-id-313 .form-field input,
  body.page-id-313 .form-field textarea,
  body.page-id-313 .form-input{ 
  font-size:15px; 
  padding:8px 20px; 
  margin:3px auto 12px; 
  border-radius:6px; 
 }
 
  body.page-id-313 .form-field textarea{ 
  min-height:72px; 
 }
 
  body.page-id-313 .form-card .cta--form{ 
  width:100%; 
  max-width:240px; 
  margin:10px auto; 
  padding:9px 12px; 
  font-size:14px; 
  border-radius:18px; 
  }
}



/* 固定ページ313：上下の白余白を完全にゼロにする */
body.page-id-313 #inner-content.wrap,
body.page-id-313 #inner-content,
body.page-id-313 #content,
body.page-id-313 .site-content,
body.page-id-313 .content,
body.page-id-313 .wrap,
body.page-id-313 .entry-content,
body.page-id-313 section.entry-content,
body.page-id-313 main,
body.page-id-313 article {
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}

/* entry-content 直下の段落が作る余白も潰す */
body.page-id-313 .entry-content > p { margin: 0; }

/* 先頭/末尾の要素のマージンも念のため無効化 */
body.page-id-313 .entry-content > :first-child { margin-top: 0 !important; }
body.page-id-313 .entry-content > :last-child  { margin-bottom: 0 !important; }

/* 画像の “ベースライン隙間” を消す */
body.page-id-313 img {
  display: block;
  vertical-align: top;
  margin: 0;
}

/* before/after で余白を作るテーマ対策 */
body.page-id-313 .entry-content:before,
body.page-id-313 .entry-content:after,
body.page-id-313 #inner-content:before,
body.page-id-313 #inner-content:after {
  content: none;
  display: none;
}

/* ログイン中の管理バーが付ける上余白の無効化（閲覧者には影響なし） */
html { margin-top: 0;}
body.admin-bar { margin-top: 0;}

/* LP313：CF7フォームを中央寄せ＆幅そろえ */
body.page-id-313 .wpcf7 {
  max-width: 860px;         /* フォーム全体の最大幅 */
  margin: 0 auto;/* 画面中央へ */
}

body.page-id-313 .wpcf7 form {
  padding: 16px 20px;
  box-sizing: border-box;
}

/* ラベル行の左右余白が片寄らないように */
body.page-id-313 .wpcf7 p {
  margin: 8px 0;
}

/* 入力欄を中央・同じ幅に */
body.page-id-313 .wpcf7 input[type="text"],
body.page-id-313 .wpcf7 input[type="email"],
body.page-id-313 .wpcf7 input[type="tel"],
body.page-id-313 .wpcf7 textarea {
  display: block;
  width: 100%;
  max-width: 760px;         /* 欲しい内側幅 */
  margin: 6px auto 14px;    /* 中央寄せ */
  box-sizing: border-box;
  background:#EAF6FF;
  border:2px solid #CFE6F6;
  border-radius:8px;
  padding:12px;
  font-size:16px;
}

/* 送信ボタンを中央に */
body.page-id-313 .wpcf7 input[type="submit"] {
  display: block !important;
  margin: 16px auto 0 !important; 
  padding: 15px 35px !important;
  background: var(--cta-bg) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 50px !important;
  font-weight: 700;
  font-size: 18px;
  box-shadow: 0 6px 12px rgba(0,0,0,.15);
  cursor: pointer;
}

/* 入力欄（テキスト・メール・電話・テキストエリア）は幅100%で中央 */
body.page-id-313 .wpcf7 input[type="text"],
body.page-id-313 .wpcf7 input[type="email"],
body.page-id-313 .wpcf7 input[type="tel"],
body.page-id-313 .wpcf7 textarea {
  width: 100%;
  display: block;
  margin: 6px auto 14px; 
}

/* フォーム全体は中央寄せのまま */
body.page-id-313 .wpcf7 {
  max-width: 860px;
  margin: 0 auto;
  padding: 16px 20px;
  box-sizing: border-box;
  text-align: center;
}

/* 見出しは中央 */
body.page-id-313 .form-card-title {
  text-align: center;
}

/* ラベル文字だけ入力欄に合わせて左寄せ */
body.page-id-313 .wpcf7 label {
  display: block;
  text-align: left;
  margin: 6px auto 4px;
  max-width: 760px;     /* 入力欄と同じ幅に制限 */
  padding-left: 4px;    /* 少し余白 */
}

/* 入力欄は中央寄せ */
body.page-id-313 .wpcf7 input[type="text"],
body.page-id-313 .wpcf7 input[type="email"],
body.page-id-313 .wpcf7 input[type="tel"],
body.page-id-313 .wpcf7 textarea {
  display: block;
  width: 100%;
  max-width: 760px;
  margin: 6px auto 14px;   /* 中央に配置 */
  background:#EAF6FF;
  border:2px solid #CFE6F6;
  border-radius:8px;
  padding:12px;
  font-size:16px;
  box-sizing: border-box;
}

/* 送信ボタンは中央 */
body.page-id-313 .wpcf7 input[type="submit"] {
  display: block;
  margin: 16px auto 0;
  padding: 15px 35px;
  background: var(--cta-bg);
  color: #fff;
  border: 0;
  border-radius: 50px;
  font-weight: 700;
  font-size: 18px;
  box-shadow: 0 6px 12px rgba(0,0,0,.15);
  cursor: pointer;
}

body.page-id-313 .wpcf7 input[type="submit"]:hover {
  background: var(--cta-bg-hover);
}

/* 上ボタン：画像の20%あたりに配置 */
body.page-id-313 .kv__canvas .cta--top,
body.page-id-313 .kv_canvas .cta--top {
  top: 23%;
  bottom: auto;
  padding: 24px 50px;
  min-width: 500px;
  font-size: 30px;    
}

/* 下ボタン：画像の下端から少し上に配置 */
body.page-id-313 .kv__canvas .cta--bottom,
body.page-id-313 .kv_canvas .cta--bottom {
  top: auto;
  bottom: 2.3%;   /* 下からの距離で配置 */
}

/* スマホ対応 */
@media (max-width:700px){
  body.page-id-313 .kv__canvas .cta--top,
  body.page-id-313 .kv_canvas .cta--top {
    top: 18%;
    font-size: 15px;
    padding: 12px 28px;
    min-width: 280px;
    border-radius: 30px;
    top: 23%;
    bottom: auto;
  }

  body.page-id-313 .kv__canvas .cta--bottom,
  body.page-id-313 .kv_canvas .cta--bottom {
    bottom: 12px;
    font-size: 12px;
    padding: 8px 16px;
    min-width: 50px;
    border-radius: 24px;
    top: auto;
    bottom: 1.3%;   
  }
  

  body.page-id-313 .form-card{
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* ← scale を削除 */
    width: 90vw;                 /* ← 画面幅の90%以内に収める */
    max-width: 360px;            /* ← PCで見切れないよう制限 */
    padding: 10px 12px;
    border-radius: 10px;
    box-sizing: border-box;
    z-index: 15;
  }

  /* 入力欄ははみ出し防止 */
  body.page-id-313 .form-card input,
  body.page-id-313 .form-card textarea{
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }


body.page-id-313 .wpcf7 label,
  body.page-id-313 .wpcf7 p {
    max-width: 100% !important;  /* ← 760pxを上書き */
    width: 100% !important;
    padding: 0 6px;              /* 左右に少し余白 */
    box-sizing: border-box;
    margin: 4px 0;
  }

  /* 入力欄も確実にカード幅に収まるように */
  body.page-id-313 .wpcf7 input[type="text"],
  body.page-id-313 .wpcf7 input[type="email"],
  body.page-id-313 .wpcf7 input[type="tel"],
  body.page-id-313 .wpcf7 textarea {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
  }



}

/* 固定ページ313のときだけパンくずリストを消す */
body.page-id-313 ul.breadcrumb_ul,
body.page-id-313 .breadcrumb {
  display: none;
}

/* 空の段落（ ）を削除 */
body.page-id-313 p:empty,
body.page-id-313 p:has( ) {
  display: none;
}

/* inner-content の余計な padding を削除 */
body.page-id-313 #inner-content {
  padding: 0;
  margin: 0;
}

/* 画像を基準に絶対配置できるようにする */
body.page-id-313 .kv__canvas{
  position: relative;
  line-height: 0;
  font-size: 0;
  margin: 0;
  padding: 0;
}
body.page-id-313 .kv__canvas > img{
  display: block;
  margin: 0;
  padding: 0;
  vertical-align: top;
}


/* 共通：画像はブロックで高さ基準に */
body.page-id-313 .kv__canvas{
  position: relative;
  line-height: 0;
  font-size: 0;
  margin: 0;
  padding: 0;
}
body.page-id-313 .kv__canvas > img{
  display: block;
  margin: 0;
  padding: 0;
  vertical-align: top;
}

/* フォームは画像の上に重ねる */
body.page-id-313 .kv__canvas > #contact{
  position: absolute;
  left: 0; right: 0;
  top: 45%;   
  margin: 0; 
  padding: 0;
}





@media (max-width:700px){
  /* 画像上の起点位置 */
  body.page-id-313 .kv__canvas > #contact{
    position:absolute;
    left:50%;
    top:38%;
    transform:translateX(-50%); 
  }

  /* ===== フォーム本体 =====
     幅はそのまま・見た目のサイズは等倍スケールで決める */
  body.page-id-313 .form-card{
    /* ベース幅（スケール前の理想幅） */
    width:clamp(290px, 88vw, 360px);
    max-width:360px;

    /* 等倍スケール：文字の比率は崩さない */
    --s:0.80; 
    transform:translateX(-50%) scale(var(--s));
    transform-origin:top center;

    /* 縦を短くするのは padding で */
    padding:6px 10px 10px;
    border-radius:10px;
    box-sizing:border-box;
    z-index:15;
    /* レンダリングをくっきり */
    will-change:transform;
  }

  /* タイトルと行間を詰める（縦短縮の主役） */
  body.page-id-313 .form-card-title{
    margin:4px 0 6px;
    font-size:14px;
    line-height:1.25;
  }
  
  body.page-id-313 .form-field{ margin:4px 0; }

  /* 入力欄：縦を短く（幅は100%のまま） */
  body.page-id-313 .form-card input[type="text"],
  body.page-id-313 .form-card input[type="email"],
  body.page-id-313 .form-card input[type="tel"]{
    height:25px;
    padding:6px 10px;
    font-size:11px;
  }

  /* テキストエリアも短く固定 */
  body.page-id-313 .form-card textarea{
    height:35px;      
    max-height:35px;
    padding:6px 10px;
    font-size:12px;
    resize:none;
  }


/* 下のボタンだけサイズを小さく */
  body.page-id-313 .kv__canvas .cta--bottom,
  body.page-id-313 .kv_canvas .cta--bottom {
    font-size: 11px;
    padding: 6px 12px;
    min-width: 110px;
    border-radius: 16px;
    bottom: 1.7%; 
  }
｝