@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

:root{
--brand:#2563eb; /* 信頼ブルー */
--accent:#f59e0b; /* 行動オレンジ */
--ink:#0f172a; /* 本文色 */
--muted:#64748b; /* 補助 */
--bg:#ffffff;
--bg-soft:#f8fafc;
--ok:#16a34a;
--radius:16px;
--shadow:0 6px 24px rgba(2,6,23,.08);
--shadow-soft:0 1px 2px rgba(2,6,23,.06), 0 8px 24px rgba(2,6,23,.06);
}
*{box-sizing:border-box}
html,body{
	margin:0;
	padding:0;
	background:var(--bg);
	color:var(--ink);
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
	line-height:1.6;
}

img{
	max-width:100%;
	height:auto;
	vertical-align:middle;
	border-radius:12px;
}

a{
	color:var(--brand);
	text-decoration:none;
}

a:hover{
	text-decoration:underline;
}

.container{
	width:min(1120px,92vw);
	margin-inline:auto;
}


/********** Header **********/
.header{
	position:sticky;
	top:0;
	z-index:40;
	background:rgba(255,255,255,.85);
	backdrop-filter:saturate(180%) blur(10px);
	border-bottom:1px solid #eef2f7;
}

.header .inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:.8rem 0;
}

.logo{
	display:flex;
	align-items:center;
	gap:.6rem;
	font-weight:900;
	color:var(--ink);
}

.logo svg{
	width:28px;
	height:28px:
}

.btn{
	appearance:none;
	border:0;
	border-radius:999px;
	padding:1rem 1.4rem;
	font-weight:800;
	letter-spacing:.01em;
	cursor:pointer;
	box-shadow:var(--shadow-soft);
}

.btn-primary{
	background:linear-gradient(180deg,#2563eb,#1d4ed8);
	color:#fff;
}

.btn-accent{
	background:linear-gradient(180deg,#f59e0b,#d97706);
	color:#111827;
}

.btn-outline{
	background:#fff;
	border:1px solid #dbe4f0;
	color:var(--ink);
}

/* ロゴ周りのレイアウトを崩さず、サブタイトルだけ追加表示 */
.logo{display:flex;align-items:center;gap:.6rem}
.logo .brand{display:flex;flex-direction:column;line-height:1.15}
.brand-name{font-weight:700;color:var(--brand);font-size:1.1rem}
.brand-sub{font-size:.82rem;color:var(--muted);letter-spacing:.02em}



/********** Hero **********/
.hero{
	position:relative;
	isolation:isolate:
}

.hero::before{
	content:"";
	position:absolute;
	inset:0;
	background:radial-gradient(1200px 400px at 70% -10%, #dbeafe 0, transparent 60%),linear-gradient(180deg,#ffffff 0,#f7fbff 70%);
	z-index:-1;
}

.hero .grid{
	display:grid;
	grid-template-columns:1.1fr .9fr;
	gap:2rem;
	align-items:center;
	padding:2.4rem 0;
}

.badge{
	display:inline-flex;
	gap:.5rem;
	align-items:center;
	font-weight:700;
	color:#0b3b8a;
	background:#e6f0ff;
	border:1px solid #cfe1ff;
	padding:.35rem .7rem;
	border-radius:999px;
	font-size:.85rem;
}

.hero-title{
	font-size:clamp(1.7rem,2.4vw+1rem,2.6rem);
	line-height:1.25;
	margin:.5rem 0 .8rem;
	font-weight:900;
}

.hero-sub{
	font-size:clamp(1rem,1.2vw+.6rem,1.2rem);
	color:var(--muted);
}

.kpis{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:1rem;
	margin-top:1rem;
}

.kpi{
	background:linear-gradient(180deg,#ffffff,#f8fafc);
	border:1px solid #e6edf7;
	border-radius:14px;
	padding:1rem;
	text-align:center;
}

.kpi strong{
	display:block;
	font-size:1.25rem;
}

.hero-card{
	background:#fff;
	border:1px solid #e5eef9;
	border-radius:var(--radius);
	padding:1.2rem;
	box-shadow:var(--shadow);
}

.hero-form{
	display:grid;
	gap:1rem;
}

label{
	display:block;
	font-weight:700;
	font-size:.92rem;
	margin-bottom:.35rem;
}

input,select{
	width:100%;
	padding:.9rem .95rem;
	border-radius:12px;
	border:1px solid #dbe4f0;
	background:#fff;
	font-size:1rem;
}

input:focus,select:focus{
	outline:3px solid rgba(37,99,235,.15);
	border-color:#93c5fd;
}

.help{
	font-size:.82rem;
	color:#6b7280;
}


/********** Headings accent **********/
h2{
	background:linear-gradient(90deg,#eff6ff,#ffffff);
	padding:.6rem 1rem;
	border-left:6px solid var(--brand);
	border-radius:6px;
	margin:0 0 1rem;
}

h3{
	background:linear-gradient(90deg,#fff7ed,#ffffff);
	padding:.45rem .9rem;
	border-left:4px solid var(--accent);
	border-radius:6px;
	margin:.6rem 0;
}


/********** Benefit cards **********/
.section{
	padding:3rem 0;
}

.cards{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:1.2rem;
}

.card{
	background:#fff;
	border:1px solid #e6edf7;
	border-radius:14px;
	padding:1.2rem;
	box-shadow:var(--shadow-soft);
}

.card .icon{
	width:24px;
	height:24px;
}

.chip {
	display: inline-block;
	padding: 0.25rem 0.6rem;
	margin-right: 0.5rem;
	font-size: 0.75rem;
	font-weight: 700;
	border-radius: 999px;
	vertical-align: middle;
}

/********** カラーごとにクラス追加 **********/
.chip-blue {
	background: #eff6ff;  /* 淡いブルー */
	color: #2563eb;
}
.chip-orange {
	background: #fff7ed;  /* 淡いオレンジ */
	color: #d97706;
}
.chip-green {
	background: #ecfdf5;  /* 淡いグリーン */
	color: #16a34a;
}


/********** Job style examples **********/
.jobs{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:1.2rem;
}

.job{
	background:#fff;
	border:1px solid #e6edf7;
	border-radius:14px;
	padding:1rem;
	box-shadow:var(--shadow-soft);
}

.job .meta{
	display:flex;
	flex-wrap:wrap;
	gap:.5rem;
	margin:.6rem 0;
	color:#475569;
}

.legal{
	display:flex;
	flex-wrap:wrap;
	gap:1rem;
}

.job h3 .chip {
	font-size: 0.75rem;
	padding: 0.25rem 0.6rem;
	margin-right: 0.4rem;
	font-weight: 700;
}

/********** Testimonials ***********/
.voice{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:1.2rem;
}

.quote{
	border:1px solid #e6edf7;
	box-shadow:var(--shadow-soft);
	position:relative;
	display: flex;
	flex-direction: column;         /* 縦並びに */
	justify-content: space-between; /* 本文とアイコン行を上下に分ける */
	background: #f8fafc;            /* 任意：背景を淡ブルーで少しメリハリ */
	border-radius: 12px;
	padding: 1.2rem;
	margin: 0.5rem;
}

.quote blockquote {
	flex-grow: 1;   /* 本文が伸縮して余白を埋める */
	margin: 0 0 1rem 0;
	line-height: 1.6;
}

.quote:before{
	content:"\201C";
	position:absolute;
	left:12px;
	top:-8px;
	font-size:40px;
	color:#dbe4f5;
}

.person{
	display:flex;
	align-items:center;
	gap:.8rem;
	margin-top:.6rem;
	color:#475569;
}

.avatar{
	width:40px;
	height:40px;
	border-radius:50%;
	background:#e2e8f0;
}

.quote .person {
	margin-top: auto;               /* 常に最下段に固定 */
	display: flex;
	align-items: center;
	gap: .6rem;
	font-size: 0.9rem;
	color: #475569;
}

.avatar {
	display:inline-flex;
	justify-content:center;
	align-items:center;
	width:40px; height:40px;
	border-radius:50%;
	font-size:1.2rem;
	background:#f1f5f9; /* デフォルト背景 */
}

.avatar-blue {
	background:#dbeafe;
}   /* 男性ブルー */

.avatar-orange {
	background:#fde68a;
} /* 女性オレンジ */

.avatar-green {
	background:#bbf7d0;
}  /* 中立グリーン */


/********** Steps **********/
.steps{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:1rem;
	counter-reset:step;
}

.step{
	background:linear-gradient(180deg,#ffffff,#f9fafb);
	border:1px solid #e6edf7;
	border-radius:14px;
	padding:1rem;
	box-shadow:var(--shadow-soft);
	position:relative;
}

.step h3{
	margin:0 0 .5rem;
	font-size:1.05rem;
}

.step:before{
	counter-increment:step;
	content:counter(step);
	position:absolute;
	inset:auto 12px -12px auto;
	background:var(--brand);
	color:#fff;
	width:36px;
	height:36px;
	display:grid;
	place-items:center;
	border-radius:10px;
	box-shadow:0 10px 20px rgba(37,99,235,.2);
}


/********** Form block **********/
.form-wrap{
	background:#fff;
	border:1px solid #e6edf7;
	border-radius:16px;
	padding:1.2rem;
	box-shadow:var(--shadow);
}

.form-grid{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:1rem;
}

.form-actions{
	display:flex;
	justify-content:center;
	align-items:center;
	margin-top:1.2rem;
}

.form-actions .btn-accent{
	font-size:1.2rem;
	padding:1.2rem 2.4rem;
}


/********** FAQ **********/
.faq{
	display:grid;
	gap:.8rem;
}

.qa{
	background:#fff;
	border:1px solid #e6edf7;
	border-radius:14px;
	box-shadow:var(--shadow-soft);
	overflow:hidden;
}

.qa summary{
	list-style:none;
	cursor:pointer;
	display:flex;
	align-items:center;
	gap:.6rem;
	padding:1rem 1.1rem;
	font-weight:700;
}

.qa summary::-webkit-details-marker{
	display:none;
}

.qa summary .label{
	flex:1;
}

.qa summary::after{
	content:"";
	margin-left:auto;
	inline-size:12px;
	block-size:12px;
	border-right:2px solid var(--brand);
	border-bottom:2px solid var(--brand);
	transform:rotate(-45deg);
	transition:transform .2s ease;
}

.qa[open] summary::after{
	transform:rotate(45deg);
}

.qa .answer{
	padding:0 1.1rem 1rem;
	color:#475569;
}


/********** Sticky CTA & footer **********/
.cta-sticky{
	position:sticky;
	bottom:0;
	background:rgba(255,255,255,.93);
	backdrop-filter:blur(8px);
	border-top:1px solid #e6edf7;
}

.cta-sticky .inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:1rem;
	padding:.8rem 0;
}

.footer{
	padding:2rem 0;
	color:#475569;
}

.legal{
	display:flex;
	flex-wrap:wrap;
	gap:1rem;
}


/* 見出し帯の高さを統一：1行でも2行でも同じ帯高に */
.cards .card h3,
.jobs  .job  h3{
	display: grid;
	grid-template-columns: auto 1fr; /* 左=chip / 右=テキスト */
	align-items: center;
	gap: .5rem;
	font-size: 1.05rem;
	line-height: 1.4; /* 2行分 + 既存padding(上下合計0.9rem) を最低高に設定 */
	min-height: calc(2 * 1.4em + 0.9rem); /* 既存の背景＆paddingはそのままでOK（h3に適用済みのもの） */
}

/* テキストだけ2行まででトリム（chipはトリムしない） */
.cards .card h3 .h3text,
.jobs  .job  h3 .h3text{
	display: -webkit-box;
	-webkit-line-clamp: 2;      /* 最大2行 */
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* chipの縦位置を揃える（2行見出しの先頭に合わせる） */
.cards .card h3 .chip,
.jobs  .job  h3 .chip{
	align-self: start;           /* 先頭行に揃える */
	margin-top: .1rem;           /* 微調整：お好みで */
}

/* フォールバック：lh未対応環境向け（任意調整可） */
@supports not (height: 1lh) {
.cards .card h3,
.jobs  .job  h3{
	min-height: 3.8rem; /* ≒ 1.05rem × 1.4 × 2 + 0.9rem */
}
}


.fm-btn {
	width:30% !important;
}

.mwform-tel-field input[type="text"] {
	width:28%;
}

input[type=checkbox] {
  -ms-transform: scale(2, 2);
  -webkit-transform: scale(2, 2);
  transform: scale(2, 2);
}

#personal_info .title {
	margin:10px;
	font-weight:bold;
	text-decoration : underline;
}

#personal_info .register_kiyaku {
	overflow: auto;
	height: 200px;
	border-radius: 2px 2px 2px 2px / 2px 2px 2px 2px;
	border: 1px solid #e0e0e0;
	padding: 8px;
	background: #fcfcfc;
	font-size: 85%;
	margin:20px 10px;
}

.register_kiyaku .txt_l {
	font-size: 12px;
	line-height:1.5em;
	margin-bottom: 20px;
	margin-top: 10px;
}

.register_kiyaku .kiyaku-h2 {
	border-left: 6px solid #ccc;
	padding: .25em 0 .25em .75em;
	margin-top:30px;
	font-size:14px;
}

.register_kiyaku .mt15 {
	font-weight:bold;
	margin-top:30px;
}

.shikaku input {
	width:auto;
}

.shikaku label {
	display:inline-block;
}

.mw_wp_form .shikaku .horizontal-item + .horizontal-item {
	margin-left:20px;
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/* Responsive */
@media (max-width: 1024px){
.hero .grid{grid-template-columns:1fr}
.voice{grid-template-columns:repeat(2,1fr)}
.steps{grid-template-columns:repeat(2,1fr)}
}



@media (max-width: 720px){
.kpis{grid-template-columns:1fr}
.cards,.jobs,.voice{grid-template-columns:1fr}
.form-grid{grid-template-columns:1fr}
.cta-sticky .inner{flex-direction:column;align-items:stretch}

.fm-btn {
	width:80% !important;
}

.mwform-tel-field input[type="text"] {
	width:28% !important;
}

input[type=checkbox] {
  -ms-transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
}

}





/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/

.cards,.jobs{
	grid-template-columns:1fr;
}

.kpis{
	grid-template-columns:1fr;
}

.cta-sticky .inner{
	flex-direction:column;
	align-items:stretch;
}

.fm-btn {
	width:80% !important;
}

.mwform-tel-field input[type="text"] {
	width:28% !important;
}

input[type=checkbox] {
  -ms-transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
}

.mw_wp_form .shikaku .horizontal-item + .horizontal-item {
	margin-left:0;
}

.mw_wp_form .shikaku .horizontal-item {
	display:inline-block;
}

.mw_wp_form .shikaku .horizontal-item label {
	display:flex;
	align-items: center;
}

.mwform-checkbox-field input, .mwform-radio-field input {
    margin-right:0 !important;
}

.shikaku input[type=checkbox] {
  -ms-transform: scale(0.8) !important;
  -webkit-transform: scale(0.8) !important;
  transform: scale(0.8) !important;
}

  .brand-name{font-size:1rem}
  .brand-sub{font-size:.76rem}

.btn-top {
	padding:8px 5px;
}


}