@charset "utf-8";*,::before,::after{box-sizing:border-box}::before,::after{text-decoration:inherit;vertical-align:inherit}html{cursor:auto;line-height:1.5;-moz-tab-size:2;tab-size:2;-webkit-tap-highlight-color:transparent;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;word-break:break-word;font-size:62.5%;margin:0;padding:0}body{margin:0;padding:0;-webkit-text-size-adjust:100%}h1,h2,h3,h4,h5,h6{margin:0;font-size:1.6rem;font-weight:400;}dl dl,dl ol,dl ul,ol dl,ul dl{margin:0;padding:0}ol ol,ol ul,ul ol,ul ul{margin:0;padding:0}hr{height:0;overflow:visible}main{display:block}ol,ul{list-style:none;padding:0;margin:0}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;text-decoration:none;color:#000;}h1,h2,h3,h4,h5,h6{margin:0;padding:0}p{padding:0;margin:0}abbr[title]{text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}iframe{border-style:none}img{border-style:none;max-width:100%;height:auto;}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}table{border-collapse:collapse}button,input,select{margin:0}button{overflow:visible;text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}fieldset{border:1px solid #a0a0a0;padding:.35em .75em .625em}input{overflow:visible}legend{color:inherit;display:table;max-width:100%;white-space:normal}progress{display:inline-block;vertical-align:baseline}select{text-transform:none}textarea{margin:0;overflow:auto;resize:vertical}[type="checkbox"],[type="radio"]{padding:0}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}details{display:block}dialog{background-color:#fff;border:solid;color:#000;display:block;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content}dialog:not([open]){display:none}summary{display:list-item}canvas{display:inline-block}template{display:none}a,area,button,input,label,select,summary,textarea,[tabindex]{-ms-touch-action:manipulation;touch-action:manipulation}[hidden]{display:none}[aria-busy="true"]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled="true"],[disabled]{cursor:not-allowed}[aria-hidden="false"][hidden]{display:initial}[aria-hidden="false"][hidden]:not(:focus){clip:rect(0,0,0,0);position:absolute}address{font-style:normal}figure{line-height:1;margin:0;img{width:100%;}}

:root {
	--main-color: #faa32b;
  --main-color2: #f8b936;
	--sub-color: #000;
  --thir-color: #78C6B0;

  --fs-16: 1.6rem;

  --hd-hight:80px;

	--fontG: 'Noto Sans JP','sans-serif';
	--fontM: 'Noto Serif JP','serif';
}
@media screen and (max-width: 767px){
  :root{
    --fs-16: 1.4rem;
    --hd-hight: 60px;
  }
}

/* ページ内リンクの移動を滑らかに */
html {
  scroll-behavior: smooth;
}

/* 共通 */
body {
	font-size: var(--fs-16);
	line-height: 1.8;
	font-family: var(--fontG);
	letter-spacing: 0;
	font-weight: 400;
}
@media screen and (max-width: 1279px) {
  /* 推奨動作環境1280pxに固定 */
  body {
    width: 1280px;
  }
}

@media screen and (max-width: 767px) {
  body {
    width: 100%;
  }
}
.indent {
  padding-left: 1em;
  text-indent: -1em;
}
.span_indent{
  padding-left: 1em;
  text-indent: -1em;
  display: inline-block;
}
.bold{font-weight: 600;}
.marker{background: linear-gradient(transparent 50%, #fff500 50%);}

.common_link {
	position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 400px;
  width: 100%;
  margin: auto;
  height: 60px;
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
  background: var(--main-color);
  padding: 0 30px;
  transition: all 0.3s ease;
	.material-symbols-outlined{
		position: absolute;
		right: 5%;
		font-size: 1.6rem;
	}
  &:hover {
    background: var(--main-color2);
    transition: all 0.3s ease;
  }
}

/* PC（768px以上）では複製の追従バナーは非表示にし、MV内のCTAだけ表示（固定追従はSP専用） */
@media screen and (min-width: 768px) {
  .common_link.fixed {
    display: none;
  }
}

.common_title {
  font-size: 2.4rem;
  font-weight: 700;
  padding-left: 2rem;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 5px;
    height: 60%;
    background: var(--thir-color);
    transform: translate(0, -50%);
  }
}
@media screen and (max-width: 767px) {
  .common_link {
    height: 50px;
    font-size: 1.6rem;
  }
  .mv_left .common_link.fixed {
    position: fixed;
    bottom: 10px;
    right: 0;
    left: 0;
    z-index: 1000;
    width: 80%;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  /* 背面に敷くすりガラスのバー（画面幅いっぱい・最背面） */
  .mv_left .common_link.fixed::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    top: -10px;
    bottom: -10px;
    z-index: -2;
    background: rgba(255, 255, 255, .3);
    box-shadow: 0 0 12px rgb(0 0 0 / 5%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    pointer-events: none;
  }

  /* オレンジのボタン色を擬似要素で再現（バーの前・テキストの後ろ） */
  .mv_left .common_link.fixed::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--main-color);
    border-radius: inherit;
    pointer-events: none;
  }

  .mv_left .common_link.fixed:hover::after {
    background: var(--main-color2);
  }
}

/* ------------------
 テーブル
------------------ */
.cmn_table {
  width: 100%;
  margin: auto;
  td {
    padding: 1em 1.5em;
    color: #3f3c3c;
  }
  th {
    padding: 1em 1.5em;
    width: 200px;
    box-sizing: border-box;
  }
  thead tr:not(:last-child) th {
    border-bottom: 1px solid #fff;
  }
  thead th:not(:last-child) th {
    border-right: 1px solid #fff;
  }
  tbody tr th {
    border-top: 1px solid #ccc;
    &:last-child th{
      border-bottom: 1px solid #ccc;
    }
  }
  tbody tr td {
    border-top: 1px solid #ccc;
    &:last-child th{
      border-bottom: 1px solid #ccc;
    }
  }
  tbody td:not(:last-child) th {
    border-right: 1px solid #ccc;
  }
  tbody tr {
    &:last-child td,
    &:last-child th {
      border-bottom: 1px solid #ccc;
    }
  }
}
.cmn_table.head2rows thead th {
  width: 50%;
}
.cmn_table:has(+ p) {
  margin-bottom: 1em;
}
@media screen and (min-width: 768px) {
  .cmn_table {
    width: 100%;
    margin: auto;

    tr{
      display: flex;
      gap: 50px;
    }
    td {
      max-width: calc(100% -220px);
      width: 100%;
    }
  }
}
@media screen and (max-width: 767px) {
	.material-symbols-outlined{
		font-size: 2rem;
	}
  .cmn_table:not(:has(thead)):not(:has(th:nth-child(1) + td:nth-child(1) + td:nth-child(2))),
  .cmn_table:not(:has(thead)):not(:has(td:nth-child(3))) {
    tbody th {
      display: block;
      width: 100%;
      padding: 1em;
    }
		tbody tr:last-child th{
			border-bottom: none;
		}
    tbody td {
      display: block;
      width: 100%;
      padding: 1em;
    }
  }
}

/* header（追従なし：通常フロー） */
header {
  width: 100%;
  height: var(--hd-hight);
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  position: relative;
  z-index: 100;
}

.header_inner{
  width: 100%;
  padding-inline: 6rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header_logo{
  width: 200px;
}


main {
  margin-top: 0; /* headerは追従しない通常フローのため余白不要 */
}
.sp_br{
	display: none;
	@media screen and (min-width: 768px) {
		display: block;
	}
}
@media screen and (max-width: 767px) {
  header{
    height: 60px;
  }

  .header_inner{
    padding-inline: 5%;
  }
}

/* footer */
footer{
  position: relative;
  padding: 40px 0% 10px;
  background-color: #f1f1f1;
  text-align: center;
  line-height: 1.5;
  letter-spacing: 1px;
}
@media screen and (max-width: 767px) {
  footer{
    padding: 20px 0% 60px;
  }
}

/* mv */
.mv{
  width: auto;
  min-width: 1000px;
  max-width: 1280px;
  height: 640px;
	margin: auto;
	display: flex;
	justify-content: center;
	align-items: center;
}
.mv_accept{
  background: var(--sub-color);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  padding: 5px 10px 5px 50px;
}
.mv_tt{
  padding-left: 50px;
}
.mv_left {
  max-width: 640px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  h1 {
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1.6;
		text-align: justify;
  }

  .mv_text {
    margin-block: 3rem 2rem;
    line-height: 1.5;
    display: flex;
    align-items: center;
  }

  .common_link{
    max-width: 100%;
    width: 100%;
		position: relative;
    .material-symbols-outlined{
      font-size: 1.6rem;
      font-weight: 800;
			position: absolute;
			right: 5%;
    }
  }
}
.mv_categoly{
  background: #f1f1f1;
  display: inline-flex;
  padding: 5px 10px;
  margin-top: 2rem;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .24px;
}

.mv_date{
  padding-right: 20px;
}
.mv_time{
	padding-left: 20px;
  border-left: #000 1px solid;
}

.mv_tag {
	background: #78C6B0;
	color: #fff;
	font-size: 2.4rem;
	font-weight: 700;
	width: 300px;
	height: 60px;
	border-radius: 80px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.mv_bot{
	background: #f1f1f1;
	padding: 5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mv_right{
	max-width: 640px;
	width: 100%;
	height: 100%;
}
@media screen and (max-width: 767px) {
  .mv{
    flex-direction: column-reverse;
    min-width: 100%;
    max-width: 100%;
    height: auto;
  }
  .mv_top{
    position: relative;
    width: 90%;
    margin: auto;
    padding-bottom: 3rem;
  }
  .mv_accept{
    padding: 5px 10px 5px;
    position: absolute;
    top: -0px;
    left: 0px;
  }
  .mv_categoly{
    position: absolute;
    top: -0px;
    left: 70px;
    margin-top: 0;
  }
  .mv_tt{
    padding: 0;
    padding-top: 20px;
  }
  .mv_left {
    h1 {
      font-size: 2rem;
    }
  }
  .mv_date{
    margin-right: 1rem;
    padding-right: .8rem;
  }

  .mv_bot{
    padding: 3rem 5%;
  }
}

/* セミナー概要 */
.overview {
  max-width: 900px;
  width: 90%;
  margin: 8rem auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.main_lead{
  margin-bottom: 5rem;

  h3{
    font-weight: 600;
    font-size: 2.4rem;
    line-height: 1.8;
  }
}
.overview_inner--text{
  padding-top: 3rem;
  color: #3f3c3c;
	font-size: 1.8rem;
}
@media screen and (max-width: 767px) {
  .overview{
    margin-block: 4rem;
  }
  .main_lead{
    margin-bottom: 5rem;

    h3{
      font-weight: 600;
      font-size: 1.8rem;
      background:none;
      display: inline;
      line-height: 2;
      color: #000;
      padding: 0;
    }
  }
	.overview_inner--text{
		font-size: 1.6rem;
	}
}


/* セミナー特典 */
.benefits {
  max-width: 1000px;
  width: 90%;
  margin: 10rem auto;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.bene_flex {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}
.bene_item {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  padding: 1rem 2rem 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;

  > p:first-child {
    width: 100%;
    aspect-ratio: 4 / 3;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--sub-color);
    line-height: 1.6;
    min-height: calc(1.8rem * 1.6 * 2);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  > p:last-child {
    font-size: 1.5rem;
    color: #3f3c3c;
    line-height: 1.8;
    text-align: left;
  }
}
@media screen and (max-width: 767px) {
  .benefits {
    margin: 6rem auto;
    gap: 3rem;
  }
  .bene_flex {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .bene_item {
    padding: 1rem 1.5rem 2.5rem;

    h3 {
      font-size: 1.6rem;
      min-height: auto;
      display: block;
    }
    > p:last-child {
      font-size: 1.4rem;
    }
  }
}


/* 講師のご紹介 */
.instructor {
  max-width: 900px;
  width: 90%;
  margin: 10rem auto 0rem;
  display: flex;
  flex-direction: column;
  gap: 5rem;

	.cmn_box{
		padding-bottom: 6rem;
	}

}
.staff_image{
  max-width: 396px;
  width: 100%;
}
.staff_messe{
  max-width: calc(100% - 396px);
  width: 100%;
  background: var(--thir-color);
  color: #fff;
  padding: 3rem;

  h3 {
    font-size: 2.4rem;
    font-weight: 600;
    margin-bottom: 2rem;
  }
  p {
    font-weight: 500;
    text-align: justify;
  }
}
.staff_name{
  display: flex;
  flex-direction: column;
  padding-bottom: 2rem;
}
.staff_name--nn{
  font-size: 3.6rem;
  font-weight: 700;
  letter-spacing: 1px;
}
.staff_flex{
  display: flex;
}
.staff_text{
  padding: 3rem 0;
}

.swiper{
	display: flex;
	flex-direction: column;
	gap: 3rem;
}

.operation{
	max-width: 1024px;
	width: 90%;
	margin: 6rem auto 10rem;
	display: flex;
	flex-direction: column;
	gap: 6rem;

	.cmn_table{
		margin-top: -3rem;
	}
}

.cmn_box p{
	text-align: center;
	padding-top: 1rem;
}

@media screen and (max-width: 767px) {
  .instructor{
    gap: 3rem;
		margin-top: 6rem;
  }
  .staff_flex{
    flex-direction: column;
  }
  .staff_messe{
    max-width: 100%;
    padding: 2rem 5%;

    h3 {
      font-size: 2rem;
    }

    p {
      font-size: 1.5rem;
    }
  }
  .staff_text{
    padding: 1rem 0 0;
  }
  .swiper-button-prev,
  .swiper-button-next {
    display: none;
  }
  .staff_name--nn{
    font-size: 2.4rem;
  }
  /* スマホでスライドを縦並びに */
  .swiper-wrapper {
    flex-direction: column;
    height: auto;
  }
  .swiper-slide {
    height: auto;
    width: 100%;
  }
  .swiper-slide:last-child {
    margin-bottom: 0;
  }
	.swiper-slide {
		display: flex;
		flex-direction: column;
		gap: 20px;
		border-bottom: 1px solid #ccc;
		padding-bottom: 3rem;
	}
}

  /* フォーム */
.form{
	background: linear-gradient(135deg, #22adad 0%, #1a8f8f 100%);
	padding-block: 6rem;

	.form_mv{
		max-width: 560px;
		width: 90%;
		margin: auto;
		margin-bottom: 3rem;
		color: #fff;
	}

	.common_title{
		color: #fff;
		&::before{
			background: #fff;
		}
	}

	select,input[type="text"],input[type="tel"],input[type="email"] {
		width: 100%;
    padding: 16px 18px;
    font-size: 1.6rem;
    font-weight: 500;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    transition: border-color 0.2s;
		box-sizing: border-box;
		
		&:focus{
			outline: none;
			border-color: var(--main-color);
		}
	}
	
	select{
		cursor: pointer;
	}
}
.form_container{
	max-width: 560px;
	width: 90%;
	margin: auto;
	background: #fff;
	border-radius: 20px;
	padding: 6rem 3rem;
	display: flex;
	flex-direction: column;
	gap: 20px;
	font-size: 1.5rem;
}
.form_item.form_radio{
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.form_flex{
	display: flex;
	gap: 20px;
	align-items: center;

	&.half{
		.form_item--input{
			width: 50%;
		}
	}
}
.form_item--input.input-inline{
	display: flex;
	gap: 10px;
	width: 100% !important;
	flex-direction: row;
}

.form_item{
	border-bottom: 1px solid #e2e8f0;
	padding-bottom: 2rem;
}

.form_item--name{
	font-weight: 600;
	margin-bottom: 0.5rem;
	display: flex;
	align-items: center;
	gap: 1rem;

	.required{
		background: #22adad;
		color: #fff;
		margin: 0;
		padding: 0 .6rem;
		font-size: 1.2rem;
		border-radius: 5px;
	}
}

.form_item--input{
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	&.form_radio{
		gap: 2rem;
	}

	&.row{
		flex-direction: row;
		position: relative;

		.year{
			position: absolute;
			right: 15px;
			bottom: 0;
		}
	}
	
	span{
		display: block;
		font-size: 1.4rem;
		font-weight: 500;
		margin-bottom: 0.5rem;
	}
	
	p{
		margin: 0;
	}
}

.op_recaptcha{
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.form-item_input{
	margin: 0;
}
.g-recaptcha{
	display: flex;
	justify-content: center;
	margin-top: 3rem;
	margin-bottom: -0.5rem;
}
.form_item--input {
	input[type="radio"]:checked + label::before {
		border-color: #22a37b;
	}
	input[type="radio"] + label {
		position: relative;
		background: none;
		display: inline-block;
		margin-right: 12px;
		line-height: 2;
		cursor: pointer;
		vertical-align: middle;
		padding: 0 10px 0 31px;
    line-height: 22px;
	}
	input[type="radio"]:checked + label::after {
		content: "";
		position: absolute;
		top: 50%;
		box-sizing: border-box;
		display: block;
		left: 8px;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    background: #22a37b;
    border-radius: 6px;
	}
	input[type="radio"] + label::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		box-sizing: border-box;
		display: block;
		background: #ffffff;
		width: 22px;
		height: 22px;
		margin-top: -11px;
		border: 1px solid #cdcdcd;
    border-radius: 30px;
	}
	input[type="radio"]{
		display: none;
		width: 20px;
    height: 20px;
    margin: 0 5px 0 0;
	}
}
.form_consent--text{
	text-align: center;
	font-size: 1.4rem;
	padding-top: 1rem;
	&#warning{
		color: #e53e3e;
		font-weight: bold;
	}

	a{
		text-decoration: underline;
		text-underline-offset: 0.2em;
		color: #22a37b;
		font-weight: bold;
		&:hover{
			text-decoration: none;
		}
	}
}
.form_submit{
	input{
		position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 400px;
    width: 100%;
    margin: auto;
    height: 60px;
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    background: var(--main-color);
    padding: 0 30px;
    transition: all 0.3s ease;
		border: none;
		border-radius: 0;
		cursor: pointer;
		
		&:disabled{
			opacity: 0.5;
			cursor: not-allowed;
		}
		
		&:not(:disabled):hover{
			background: var(--main-color2);
		}
	}
}

@media screen and (max-width: 767px) {
	.form{
		padding-block: 4rem;
	}
	
	.form_container{
		padding: 3rem 5% 5rem;
		border-radius: 12px;
		gap: 2rem;
	}
	
	.form_flex{
		flex-direction: column;
		gap: 1.5rem;
		
		&.half{
			.form_item--input{
				width: 100%;
			}
		}
	}
	
	.form_item--input.input-inline{
		width: 100% !important;
		gap: 0.8rem;
	}
	
	.form_item--name{
		font-size: 1.4rem;
	}
	
	.form_item--input{
		span{
			font-size: 1.3rem;
		}
	}
	
	select, input[type="text"], input[type="tel"], input[type="email"]{
		font-size: 1.4rem;
		padding: 12px 14px;
	}

	
	.form_consent--text{
		font-size: 1.2rem;
		padding-top: 1.5rem;
	}
	
	.form_submit{
		input{
			height: 50px;
			font-size: 1.6rem;
			padding: 0 20px;
		}
	}
}

.formError .formErrorContent {
	margin-top: 6px;
	font-size: 12px;
	font-weight: 500;
	color: #e53e3e;
}

/* ============================================================
   ステップ式お申込みフォーム（右端ドッキングパネル）
   #chatPanel / #chatOpenTab 用
   ============================================================ */
#chatPanel{
  --brand:#22adad;
  --brand-dark:#1b8c8c;
  --navy:#1f2a44;
  --accent:#e0342f;
  --cf-bg:#f5f7f9;
  --cf-text:#1a1a1a;
  --text-sub:#6b7280;
  --border:#d9e0e7;
  --required:#e53e3e;
  position:fixed;
  right:0;
  bottom:0;
  z-index:9998;
  width:min(400px,100%);
  height:min(680px,calc(100dvh - 16px));
  transform:translateX(calc(100% + 40px));
  visibility:hidden;
  transition:transform .45s cubic-bezier(.22,1,.36,1),visibility 0s linear .45s;
  font-family:'Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','游ゴシック','Yu Gothic',sans-serif;
}
#chatPanel.is-open{
  transform:translateX(0);
  visibility:visible;
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
#chatPanel *{box-sizing:border-box}
#chatPanel:focus{outline:none}

#chatPanel .chat{
  width:100%;
  height:100%;
  background:var(--cf-bg);
  display:flex;
  flex-direction:column;
  position:relative;
  border-radius:16px 0 0 0;
  overflow:hidden;
  box-shadow:0 8px 36px rgba(0,0,0,.28);
  color:var(--cf-text);
  font-size:15px;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}

/* ヘッダー（上段固定：ロゴ＋タイトル帯） */
#chatPanel .chat__header{
  display:block;            /* サイト共通CSSの header{display:flex} を打ち消す */
  flex:0 0 auto;
  background:#fff;
  border-bottom:1px solid var(--border);
  padding:0;
  position:relative;
  height:auto;
  max-width:none;
  margin:0;
}
#chatPanel .chat__logo{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 44px 10px;
}
#chatPanel .chat__logo img{
  height:30px;
  width:auto;
  max-width:100%;
}
#chatPanel .cf-close{
  position:absolute;
  top:8px;
  right:10px;
  width:34px;
  height:34px;
  border:0;
  background:none;
  font-size:26px;
  line-height:1;
  color:var(--text-sub);
  cursor:pointer;
  font-family:inherit;
  z-index:2;
}
#chatPanel .cf-close:hover{color:var(--cf-text)}
#chatPanel .chat__title{
  text-align:center;
  font-size:13px;
  font-weight:700;
  padding:12px 40px;
  line-height:1.5;
  color: #fff;
  background:var(--brand);
  border-top:1px solid var(--border);
}

/* ===== 進捗インジケータ（プログレスバー）：20250105専用 ===== */
/* ヘッダー最下段に横バー＋％を常時表示。JS(updateProgress)が幅と数値を更新する */
#chatPanel .cf-progress{
  padding:9px 16px;
  background:#fff;
  border-top:1px solid var(--border);
}
#chatPanel .cf-progress__track{
  position:relative;
  width:100%;
  height:8px;
  background:#e6ebf1;
  border-radius:999px;
  overflow:hidden;
}
#chatPanel .cf-progress__fill{
  position:absolute;
  inset:0 auto 0 0;
  width:0;
  background:linear-gradient(90deg,var(--brand) 0%,var(--brand-dark) 100%);
  border-radius:999px;
  transition:width .5s cubic-bezier(.22,1,.36,1);
}
@media (prefers-reduced-motion:reduce){
  #chatPanel .cf-progress__fill{transition:none}
}

/* 本文（質問セクションが積み上がるスクロール領域） */
#chatPanel .chat__body{
  flex:1 1 auto;
  overflow-y:auto;
  padding:24px 16px 24px;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}

/* ===== 質問セクション ===== */
#chatPanel .qs{
  margin:0 0 10px;
  animation:cfpop .35s ease;
}
/* チャット風の見出し（PC・スマホ共通）：紺バーなし・枠線なしの吹き出し */
#chatPanel .qs__bar{display:none}
#chatPanel .qs__head{
  display:flex;
  flex-direction:column;
  align-items:flex-start;   /* Q（質問）は左詰め */
  text-align:left;
  margin-bottom:16px;
}
#chatPanel .qs__q{
  font-size:1.5rem;
  font-weight:700;
  line-height:1.6;
  color:var(--navy);
  margin:0;
}
#chatPanel .qs__q em{
  font-style:normal;
  color:var(--accent);
}
#chatPanel .qs__note{
  font-size:11.5px;
  color:var(--text-sub);
  margin-top:4px;
}
#chatPanel .qs__bubble{
  display:inline-block;
  max-width:88%;             /* 左側に寄せつつ幅を制限 */
  background:#fff;
  border-radius:14px;
  border-top-left-radius:4px; /* 吹き出しの尻尾を左上に（左詰め用） */
  padding:12px 14px;
  box-shadow:0 1px 3px rgba(16,34,64,.08);
}
/* 「あと◯問」は吹き出しの上にピル型で表示 */
#chatPanel .qs__badge{
  order:-1;
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:4px 12px;
  border-radius:999px;
  background:var(--accent);
  color:#fff;
  font-size:11px;
  font-weight:700;
  margin:0 0 8px;
  box-shadow:0 2px 6px rgba(224,52,47,.3);
}
#chatPanel .qs__badge b{font-size:12px}
#chatPanel .qs__badge[hidden]{display:none}

/* 入力カード */
#chatPanel .qs__card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px 14px;
  box-shadow:0 1px 3px rgba(16,34,64,.06);
  margin-left: 3em;
}
/* 最後の確認・送信カードだけは左マージンを付けない */
#chatPanel .qs__card--confirm{
  margin-left: 0;
}
#chatPanel .qs__field{margin-bottom:12px}
#chatPanel .qs__field:last-child{margin-bottom:0}
#chatPanel .qs__inline{display:flex;align-items:center;gap:8px}
#chatPanel .qs__inline input.f{flex:1 1 auto;min-width:0}
#chatPanel .qs__inline .unit{
  flex:0 0 auto;
  font-size:15px;
  font-weight:600;
  color:var(--cf-text);
}

#chatPanel .field-label{
  font-size:12.5px;
  font-weight:700;
  color:#333;
  margin:0 0 6px 2px;
}
#chatPanel .field-label .req{
  color:var(--required);
  font-size:10.5px;
  margin-left:6px;
  font-weight:700;
}

/* 入力部品 */
#chatPanel input.f,#chatPanel select.f{
  width:100%;
  padding:13px 14px;
  border:1.5px solid var(--border);
  border-radius:8px;
  font-size:16px; /* iOSの入力フォーカス時自動ズーム（16px未満で発動）を防ぐ */
  font-family:inherit;
  outline:none;
  background:#fff;
  color:var(--cf-text);
  transition:border-color .15s,box-shadow .15s;
}
#chatPanel input.f:focus,#chatPanel select.f:focus{
  border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(31,42,68,.12);
}
#chatPanel input.f::placeholder{color:#b3bcc7}

#chatPanel select.f{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right:42px;
  cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='%231f2a44' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:18px 18px;
}
#chatPanel select.f::-ms-expand{display:none}

/* 選択肢ボタン（2列グリッド） */
#chatPanel .opts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
#chatPanel .opt{
  padding:13px 8px;
  border:1.5px solid var(--brand);
  border-radius:8px;
  background:#fff;
  color:var(--brand);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:.15s;
  font-family:inherit;
}
#chatPanel .opt:hover{background:rgba(34,173,173,.08)}
#chatPanel .opt:active{transform:scale(.97)}
#chatPanel .opt.is-picked{background:var(--brand);color:#fff}

/* 「次へ」ボタン（年齢・氏名・フリガナ・電話・メール等の手打ち/選択確定） */
#chatPanel .next-btn{
  margin-top:12px;
  width:100%;
  padding:13px;
  border:0;
  border-radius:8px;
  background:var(--brand);
  color:#fff;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  font-family:inherit;
  transition:.15s;
}
#chatPanel .next-btn:hover{background:#1e9c9c}
#chatPanel .next-btn:active{transform:scale(.98)}

/* 回答済みは「次へ」を隠し、小さな「修正する」を表示（修正中は逆に「修正した内容を確認」を表示） */
#chatPanel .qs__edit{
  display:none;
  margin-top:8px;
  background:none;
  border:1px solid var(--border);
  color:var(--text-sub);
  font-size:11px;
  font-weight:600;
  padding:5px 14px;
  border-radius:999px;
  cursor:pointer;
  font-family:inherit;
}
#chatPanel .qs__edit:hover{border-color:var(--brand);color:var(--brand)}
#chatPanel .qs.is-done:not(.is-editing) .next-btn{display:none}
#chatPanel .qs.is-done:not(.is-editing) .qs__edit{display:flex;align-items:center;width:fit-content;margin-left:auto}

/* 回答済み：入力カードを隠し、答えだけを右端の吹き出しで表示（修正するを押すと編集モード） */
/* 回答の入れ物：右端寄せで複数バブルを縦に並べる（未回答時は非表示） */
#chatPanel .qs__answers{
  display:none;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}
#chatPanel .qs.is-done:not(.is-editing) .qs__card{display:none}
#chatPanel .qs.is-done:not(.is-editing) .qs__answers{display:flex}
/* 回答バブル（1項目＝1バブル。氏名とフリガナのように複数行は別バブルで表示） */
#chatPanel .qs__answer{
  width:fit-content;
  max-width:88%;
  background:var(--brand);
  color:#fff;
  border-radius:14px;
  border-top-right-radius:4px;
  padding:10px 14px;
  font-weight:600;
  line-height:1.5;
  box-shadow:0 1px 3px rgba(16,34,64,.08);
  white-space:pre-wrap;
  word-break:break-word;
}

/* スマホ用「前に戻る」ボタン（PCは非表示） */
#chatPanel .qs__back{
  display:inline-flex;
  align-items:center;
  gap:2px;
  background:none;
  border:0;
  color:var(--text-sub);
  font-size:12.5px;
  cursor:pointer;
  font-family:inherit;
  padding:4px 2px;
  margin:6px 0 2px;
}
#chatPanel .qs__back:hover{color:var(--navy)}
#chatPanel .qs__back[hidden]{display:none}

/* スマホ用「次へ進む」（回答済みステップに戻ったときの再前進。PCは非表示） */
#chatPanel .qs__fwd{
  margin-top:14px;
  width:100%;
  padding:13px;
  border:0;
  border-radius:8px;
  background:var(--brand);
  color:#fff;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  font-family:inherit;
}
#chatPanel .qs__fwd:hover{background:var(--brand-dark)}
#chatPanel .qs__fwd:active{transform:scale(.98)}
#chatPanel .qs__fwd[hidden]{display:none}

#chatPanel .err{
  color:var(--required);
  font-size:12px;
  margin-top:8px;
}
#chatPanel .err:empty{display:none}

/* ===== 確認・送信 ===== */
#chatPanel .confirm__summary{
  background:#fff;
  border-radius:10px;
  padding:4px 0px;
  margin:0 0 6px;
  font-size:13px;
}
#chatPanel .confirm__summary dl{display:block}
#chatPanel .confirm__summary dt{color:var(--text-sub);font-size:11px;margin-top:10px}
#chatPanel .confirm__summary dd{
  font-weight:600;
  margin-top:2px;
  padding-bottom:8px;
  border-bottom:1px dashed #e6ebf1;
  display:flex;
  align-items:center;
  justify-content: end;
  gap:30px;
}
#chatPanel .confirm__summary dd:last-child{border-bottom:0}
#chatPanel .edit-link{
  flex:0 0 auto;
  background:#fff;
  border:1px solid var(--brand);
  color:var(--brand);
  font-size:11px;
  font-weight:600;
  padding:3px 12px;
  border-radius:999px;
  cursor:pointer;
  font-family:inherit;
}
#chatPanel .edit-link:hover{background:var(--brand);color:#fff}
#chatPanel .consent{font-size:11px;color:var(--text-sub);line-height:1.6;margin:8px 2px}
#chatPanel .consent a{color:var(--brand)}
#chatPanel .recaptcha-box{display:flex;justify-content:center;margin:10px 0 4px;min-height:78px}
#chatPanel .recaptcha-warn{color:var(--required);text-align:center;margin:2px 2px 0}

#chatPanel .send-btn{
  margin-top:10px;
  width:100%;
  padding:14px;
  border:0;
  border-radius:8px;
  background:var(--main-color);
  color:#fff;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  font-family:inherit;
}
#chatPanel .send-btn:hover{background:var(--main-color2)}
#chatPanel .send-btn:disabled{background:#c3cdcd;cursor:not-allowed}
#chatPanel .send-btn:disabled:hover{background:#c3cdcd}

@keyframes cfpop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* 回答→次の質問の間・フォーム表示時に見せる「考え中」タイピング演出 */
#chatPanel .cf-thinking{
  display:flex;
  padding:14px 2px;
  animation:cfpop .3s ease;
}
#chatPanel .cf-typing{
  display:flex;
  gap:5px;
  align-items:center;
  padding:14px 16px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  border-bottom-left-radius:4px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
#chatPanel .cf-typing span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#c3cad6;
  animation:cfblink 1.2s infinite ease-in-out;
}
#chatPanel .cf-typing span:nth-child(2){animation-delay:.2s}
#chatPanel .cf-typing span:nth-child(3){animation-delay:.4s}
@keyframes cfblink{0%,80%,100%{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@media (max-width:767px){
  #chatPanel .cf-thinking{flex:0 0 auto;padding:8px 0}
}
@media (prefers-reduced-motion:reduce){
  #chatPanel .cf-typing span{animation:none}
  #chatPanel .cf-thinking{animation:none}
}

/* 起動タブ（パネルが閉じているとき右端に表示） */
#chatOpenTab{
  position:fixed;
  right:0;
  top	:calc(50% - 10rem);
	transform:translateY(-50%);
  z-index:9997;
  writing-mode:vertical-rl;
  padding:18px 12px;
  border:0;
  border-radius:12px 0 0 12px;
  background:linear-gradient(135deg, #22adad 0%, #1a8f8f 100%);
  color:#fff;
  font-family:'Noto Sans JP','Hiragino Sans',sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:.14em;
  line-height:1.2;
  cursor:pointer;
  box-shadow:-2px 4px 14px rgba(0,0,0,.22);
  transition:background .15s,transform .15s;
}
#chatOpenTab:hover{opacity:.8;}
#chatOpenTab[hidden]{display:none}
#chatOpenTab .tab-badge{
  display:inline-block;
  background:#fff500;
  color:#1a1a1a;
  font-size:11px;
  font-weight:700;
  padding:7px 3px;
  border-radius:6px;
  margin-inline-end:10px;
  letter-spacing:.08em;
}

/* SP：全画面パネル（見出しの吹き出し等はPC・スマホ共通スタイル） */
@media (max-width:767px){
  #chatPanel{
    width:100%;
    height:100dvh;
    top:0;
    right:0;
    bottom:auto;
    transform:translateY(calc(100% + 40px));
  }
  #chatPanel.is-open{transform:translateY(0)}
  #chatPanel .chat{border-radius:0}
  /* スマホでは右サイドの起動タブを非表示（CTAボタンからのみ開く） */
  #chatOpenTab{display:none}
  /* 連続（積み上げ）表示：通常スクロール＋質問間に余白 */
  #chatPanel .chat__body{padding:16px 18px 28px}
  #chatPanel .qs{margin:0 0 22px}
  #chatPanel .opt{padding:16px 8px;font-size:15px}
}

/* アニメーション削減設定を尊重 */
@media (prefers-reduced-motion:reduce){
  #chatPanel,#chatPanel.is-open,#chatOpenTab{transition:none}
  #chatPanel .qs{animation:none}
  #chatPanel .chat__body{scroll-behavior:auto}
}

/* PCでは戻る/次へ進むボタンを常に隠す（スマホ1項目1画面時のみ使用） */
@media (min-width:768px){
  #chatPanel .qs__back,
  #chatPanel .qs__fwd{display:none}
}

/* ===== ご希望日時ステップ（4スロット＋カレンダー＋「申し込まない」） ===== */
.sched-note{margin:.4rem 0 1rem;font-weight:700;color:var(--sub-color)}
.sched-slots{margin-bottom:.4rem}
.sched-cal-toggle{display:inline-block;margin-top:1.2rem;padding:.6rem 0;background:none;border:none;color:var(--main-color);font-size:1.4rem;text-decoration:underline;cursor:pointer}
.sched-cal{margin-top:.8rem}
.sched-cal .qs__field{margin-top:.8rem}
.sched-skip{display:block;width:100%;margin-top:1.8rem;padding:1rem;background:none;border:1px solid #ccc;border-radius:.8rem;color:#555;font-size:1.3rem;cursor:pointer}
.sched-skip:hover{background:#f5f5f5}