@charset "UTF-8";
/* CSS Document */

html {
	font-size: 62.5%;
}

body {
	width: 100%;
	font-family:"Yu Gothic Medium", "Yu Gothic", "YuGothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-weight: 700;
	line-height: 0;
	letter-spacing: 0em;
	color:#404040;
	background: #fff;
}

.pc	{
	display: block;
}

.sp {
	display: none;
}

.inner {
	width: 100%;
	max-width:960px;
	margin:0 auto;
	text-align: center;
}

img {
	width: 100%;
	height: auto;
	display: block;
}

a {
	display: block;
}

a:hover {
	opacity: .8;
}

section {
	line-height: 1;
}

h2 {
	color: #fff;
	background-color: #006239;
	font-size: clamp(30px, 2.5vw, 40px);
	text-align: center;
	margin-top: 10rem;
	padding: 2rem;
	box-sizing: border-box;
}

h2 span {
	font-size: clamp(56px, 2.5vw, 70px);
}

h3 {
	color: #006239;
	background-color: #fff;
	font-size: clamp(30px, 2.5vw, 40px);
	text-align: center;
	margin-top: 10rem;
	padding: 2rem;
	box-sizing: border-box;
}

h4 {
	color: #006239;
	font-size: clamp(16px, 2.5vw, 18px);
	background-color: #c8d5be;
	padding: 1rem;
	box-sizing: border-box;
	margin-bottom: 4.5rem;
}

/*.notes {
	font-size: 1rem;
}*/

/*////////////////*/
/*//// header ////*/
header {
  width: 100%;
  padding: 20px 0;
  line-height: 1;
}

/* ロゴのサイズ調整 */
header h1 img {
  width: clamp(200px, 50vw, 342px); /* スマホで小さすぎず、PCで大きすぎず */
  height: auto;
  margin: 0 auto;
}

/* テキスト全体のボックス */
.header-text {
  color: #fff;
  background-color: #006239;
  margin-top: 20px;
  padding: 12px 50px;
  box-sizing: border-box;
}

/* メインの「補聴器」 */
.main-copy {
  /* 最小 40px 〜 最大 84px の可変 */
  font-size: clamp(20px, 8vw, 30px); 
  line-height: 1.1;
  letter-spacing: 0.05em;
}


/*////////////////*/
/*//// キャンペーン ////*/
.campaign {
	width: 100%;
	padding: 60px 0;
	border: solid 4px #006239;
	box-sizing: border-box;
}

/*////////////////*/ 
/*//// 見せない補聴器エリア ////*/
.campaign-invisible {
	margin-top: 5rem;
	text-align: center;
}

/* タイトル：「見せない補聴器」 */
.invisible-ttl {
	color: #006239;
	background: transparent; /* h2共通スタイルを打ち消し */
	font-size: clamp(30px, 6vw, 82px);
	font-weight: 700;
	letter-spacing: 0.05em;
	margin-top: 11rem;
	padding: 0;
}

/* 矢印アイコン */
.invisible-arrow {
	position: relative;
	width: 24px;
	margin: 4.5rem auto -2rem;
	z-index: 1;
}

/* 補聴器単体画像 */
.invisible-product-img {
	width: 100%;
	max-width: 250px;
	margin: 0 auto;
}

/*////////////////*/
/*//// 見せたくない人のための、補聴器です ////*/
.invisible-lead-section {
	border-top: solid 4px #006239;
	margin-top: 6rem;
	padding: 8rem 0 2rem 0;
}

.lead-ttl {
	color: #006239;
	background: transparent; /* h3共通スタイルを打ち消し */
	font-size: clamp(22px, 3.5vw, 36px);
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-top: 0;
	padding: 0 0 2.5rem 0;
}

.lead-text {
	max-width: 900px;
	color: #006239;
	font-size: clamp(14px, 1.8vw, 18px);
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.05em;
	margin: 0 auto 4rem;
	text-align: justify;
}

.brand-copy {
	color: #006239;
	font-size: clamp(24px, 3vw, 32px);
	line-height: 1.8;
	font-family: "游明朝", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
	font-weight: 500;
	letter-spacing: 0.2em;
	margin-top: 3rem;
}



/*////////////////*/
/*//// limited ////*/

.limited-bar {
    background-color: #006239;
    color: #fff;
    text-align: center;
    padding: 10px 0;
}
.limited-bar h2 {
	background: transparent; /* h2共通スタイルを打ち消し */
	margin-top: 0; /* h2共通スタイルを打ち消し */
	padding: 1rem 0;
    font-size: clamp(2.1rem, 4vw, 3rem);
    font-weight: 700;
}

/*////////////////*/
/*//// FV ////*/
/* --- FV全体の基本設定 --- */
.fv {
    width: 100%;
    background: #fff;
    position: relative;
}

.fv-main-visual {
	background-color: #fffbda;
	padding: 4.5rem 0 0;
	overflow: hidden;
}

.fv-main-visual-caution {
	font-size: clamp(1.2rem, 1.8vw, 1.6rem);
	font-weight: 700;
	line-height: 1.5;
	margin: 2rem auto 4.5rem;
	text-align: center;
}

.fv-limited-block {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	text-align: left;
	position: relative;
}

.limited-text-area {
	width: 62%;
	max-width: 675px;
	padding-bottom: 6rem;
	margin-left: 14.86090776%;
}

.limited-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.5rem;
	margin-bottom: 2.5rem;
}

/* 限定商品タグ */
.limited-tag {
	display: inline-block;
	background-color: #006239;
	color: #fff;
	font-size: clamp(17px, 3.2vw, 45px);
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 0.15em 0.5em;
	white-space: nowrap;
	flex-shrink: 0;
	border: 6px solid #fff;
	outline: 2px solid #006239;
	margin: 4px;
}

.limited-ttl {
	color: #006239;
	background: transparent;
	font-size: clamp(15px, 3.2vw, 45px);
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
	padding: 0;
	text-align: left;
}

/* シグニア 「BLACK PREMIUM」本文 */
.limited-copy {
	font-size: clamp(22px, 3.2vw, 34px);
	font-weight: 700;
	color: #222;
	line-height: 1.35;
	letter-spacing: 0.02em;
}

/* 右側の手で持つ画像 */
.limited-img-area {
	width: 34.40702782%;
	align-self: flex-end; /* 親要素の最下部に吸着 */
	line-height: 0;        /* inlineブロックによる画像下の隙間防止 */
}

.limited-img-area img {
	width: 100%;
	height: auto;
	display: block;
}

.productList {
	background-color: #fff;
	padding-top: 10rem;
}

.productList ul {
	display: flex;
}

.productList ul li {
	width: 50%;
	padding: 0 6%;
	box-sizing: border-box;
}

.productList ul li:first-child {
	border-left: solid 3px #006239;
	border-right: solid 1.5px #006239;
}

.productList ul li:nth-child(2) {
	border-left: solid 1.5px #006239;
	border-right: solid 3px #006239;
}


/*////////////////*/
/*//// YOUTUBE ////*/
.youtube {
	padding: 10rem 0;
}

.youtube p {
	width: 100%;
	color: #fff;
	background-color: #b60020;
	font-size: clamp(1.8rem, 2vw, 3.3rem);
	border-radius: 10px;
	padding: 1.5rem;
	box-sizing: border-box;
	display: inline-block;
	position: relative;
}

.youtube p::after {
	content: '';
	position: absolute;
	bottom: -15px;
	left: 50%;
	transform: translateX(-50%);
	border-style: solid;
	border-width: 15px 15px 0 15px;
	border-color: #b60020 transparent transparent transparent;
}

.youtube-Wrapper {
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	aspect-ratio: 16 / 9;
}

.youtube-Wrapper iframe {
	width: 100%;
	height: 100%;
	margin-top: 4.5rem;
}

/*////////////////*/
/*//// 小型補聴器が出来るまで ////*/
.step {
	margin-bottom: 9rem;
}

/* タイトル見出し */
.step h2 {
	color: #006239;
	background-color: transparent;
	font-size: clamp(26px, 3.5vw, 36px);
	text-align: center;
	margin-top: 6rem;
	padding: 0;
}

/* カードの配置（2列並び） */
.step-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 4rem;
}

.step-card {
	width: 49%;
	margin-bottom: 2rem;
	display: flex;
	flex-direction: column;
	text-align: left;
}

/* STEPバー（緑背景＋黄色数字） */
.step-bar {
	background-color: #006239;
	color: #fff;
	font-size: clamp(18px, 2.5vw, 26px);
	font-weight: 700;
	text-align: center;
	padding: 0.8rem 0;
	line-height: 1;
	letter-spacing: 0.05em;
}

.step-bar span {
	color: #fff462; /* 黄色 */
	font-size: 1.5em;
}

/* ステップ画像 */
.step-img {
	width: 100%;
	line-height: 0;
	margin: 0;
}

.step-img img {
	width: 100%;
	height: auto;
	display: block;
}

/* 下部解説エリア（緑背景＋白文字） */
.step-content {
	background-color: #2a8467;
	color: #fff;
	padding: 2rem 2.5rem 2.5rem;
	box-sizing: border-box;
	flex-grow: 1; /* 高さを揃える */
	margin: 0;
}

.step-content h3 {
	color: #fff;
	background-color: transparent;
	font-size: clamp(12px, 2.5vw, 21px);
	font-weight: 700;
	text-align: center;
	margin: 0 0 1.5rem 0;
	padding: 0 0 1rem 0;
	border-bottom: 1px solid #fff;
}

.step-content p {
	font-size: clamp(10px, 2.5vw, 16px);
	font-weight: 500;
	line-height: 1.5;
	margin: 0;
	text-align: justify;
}

/*////////////////*/
/*//// 最新設備を完備 ////*/
.equipment {
}

.equipment h2 {
	color: #006239;
	background-color: transparent;
	font-size: clamp(30px, 2.5vw, 36px);
	line-height: 1.2;
	padding: 0;
}

.equipment-flex {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	margin-top: 4.5rem;
}

.equipment-flex dl {
	width: 31.875%;
}

.equipment-flex dd {
	font-size: clamp(12px, 2.5vw, 21px);
	line-height: 1.5;
	color: #fff;
	background-color: #2a8467;
	padding: 1rem;
	box-sizing: border-box;
}

.equipment-flex dd.bottom {
	position: relative;
	font-size: clamp(10px, 2.5vw, 16px);
	font-weight: 500;
	text-align: left;
    padding-top: 1rem;
}

.equipment-flex dd.bottom::before {
    content: "";
    position: absolute;
    top: 0;
    left: 1rem;
    right: 1rem;
    height: 1px;
    background-color: #fff;
}

/*////////////////*/
/*//// 聞こえのこと まだ年のせいにしていませんか？ ////*/
.consult {
	margin-top: 9rem;
}

.consult-header {
	color: #fff;
	background-color: #006239;
	padding: 3rem 2rem;
	box-sizing: border-box;
}

.consult-header h2 {
	color: #fff;
	background: transparent;
	font-size: clamp(20px, 2.8vw, 36px);
	font-weight: 700;
	margin: 0 0 1.5rem 0;
	padding: 0;
	line-height: 1.3;
}

.consult-header p {
	font-size: clamp(16px, 2.2vw, 28px);
	font-weight: 700;
	line-height: 1.4;
	margin: 0;
}

.consult-header p span {
	color: #fff000;
	font-size: 1.35em;
}


.consult-graph {
	background-color: #fffbda;
	padding: 2rem;
	box-sizing: border-box;
}
.consult-graph img {
	width: 100%;
	max-width: 800px;
	height: auto;
	margin: 0 auto;
}

.consult-text {
	background-color: #fff;
	padding: 3.5rem 1.5rem;
	box-sizing: border-box;
}

.consult-text p {
	color: #222;
	font-size: clamp(16px, 2.2vw, 26px);
	font-weight: 700;
	line-height: 1.5;
	margin: 0;
}

.consult-text p span {
	color: #e60012;
	font-size: 1.35em;
}

.consult-merit {
	background-color: #fffbda;
	padding: 8rem 2rem 5rem; /* バッジが上に飛び出すため上余白を確保 */
	box-sizing: border-box;
}

.consult-merit .merit-list {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	gap: 2%;
	list-style: none;
	padding: 0;
	margin: 0;
}

.consult-merit .merit-list li {
	width: 32%;
	background-color: #fff;
	border: solid 3px #44af35;
	border-radius: 20px;         /* 角丸 */
	position: relative;
	padding: 5.5rem 2rem 2.5rem; /* 上部に雲型バッジが入る十分な余白を設定 */
	box-sizing: border-box;
	text-align: center;
}

.consult-merit .merit-list li img {
	width: 48%;                  /* バッジの幅 */
	max-width: 200px;
	height: auto;
	position: absolute;
	top: -50px;                  /* 枠の上に飛び出させる調整 */
	left: 50%;
	transform: translateX(-50%); /* 中央寄せ */
	margin: 0;
}

.consult-merit .merit-list li h3 {
	color: #222;
	background-color: transparent; /* 共通h3スタイルを打ち消し */
	font-size: clamp(16px, 1.8vw, 24px);
	font-weight: 700;
	line-height: 1.35;
	margin: 0 0 1.5rem 0;
	padding: 0;
	border: none;
}

.consult-merit .merit-list li p {
	color: #222;
	font-size: clamp(12px, 1.3vw, 15px);
	font-weight: 500;
	line-height: 1.6;
	text-align: justify;
	margin: 0;
}

.consult-footer {
	background-color: #c82266;
	color: #fff;
	padding: 4rem 2rem;
	box-sizing: border-box;
	text-align: center;
}

.consult-footer .sub-ttl {
	font-size: clamp(16px, 2.2vw, 28px);
	font-weight: 700;
	line-height: 1.4;
	margin: 0 0 2rem 0;
}

.consult-footer .main-ttl {
	font-size: clamp(22px, 3.5vw, 50px);
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
}

.consult-footer .main-ttl span {
	color: #fff000;
}


/*////////////////*/
/*//// 選ばれる理由 ////*/
.choosing {
}

.choosing img {
	display: inline;
}

.choosing dl {
	text-align: left;
	padding: 4.5rem 0;
	border-bottom: solid 1px #006239;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.choosing dl:last-child {
	border: none;
}

.choosing dt {
	width: 100%;
	font-size: clamp(12px, 2.5vw, 24px);
	font-weight: 500;
	margin-bottom: 3rem;
}

.choosing dd {
	width: 100%;
	font-size: clamp(14px, 2.5vw, 16px);
	font-weight: 500;
	line-height: 1.625;
}

.choosing .half {
	width: 49%;
	margin-bottom: 2rem;
}

.choosing .third {
	width: 31.875%; /*306 960*/
	color: #fff;
	background-color: #2a8467;
	font-size: clamp(12px, 2.5vw, 24px);
	text-align: center;
	border-radius: 10px;
	padding: 3rem;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
}

.choosing .quarter {
	width: 25%;
	font-size: 1.2rem;
	text-align: center;
}

.choosing .quarter02 {
	width: 23.125%; /*222 960*/
	color: #fff;
	background-color: #2a8467;
	font-size: clamp(12px, 2.5vw, 24px);
	text-align: center;
	border-radius: 10px;
	padding: 3rem 2rem;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
}

.choosing .choosing-img {
	width: 31.875%; /*306 960*/
	display: flex;
	justify-content: center;
	margin-bottom: 2rem;
}

.choosing span {
	font-weight: 700;
}

.choosing .number {
	font-size: clamp(40px, 2.5vw, 57px);
	color: #fff;
	background-color: #006239;
	display: inline-block;
	width: 73px;
	height: 73px;
	border-radius: 50%;
	text-align: center;
	line-height: 73px;
	margin-right: 1.5rem;
}

.choosing .choosing-textGreen {
	color: #006239;
	font-size: clamp(30px, 2.5vw, 36px);
}

.choosing .choosing-textRed {
	color: #b60020;
	font-size: clamp(30px, 2.5vw, 36px);
}

.choosing .choosing-notes {
	font-size: 1rem;
	font-weight: 500;
	display: block;
	margin-top: 1.2rem;
}

/*////////////////*/
/*//// 社長コメント ////*/
.boss {
	margin-top: 5.5rem;
}

.boss-flex {
	display: flex;
	align-items: stretch;
	justify-content: space-around;
	border-top: solid 3px #006239;
	border-bottom: solid 3px #006239;
	padding-top: 2.1rem;
}

.boss-comment {
	width: 65.625%;/*630*/
	padding: 2.1rem;
	box-sizing: border-box;
	text-align: left;
}

.boss-comment-title {
	color: #006239;
	font-size: clamp(30px, 3.2vw, 39px);
	line-height: 1.325;
}

.boss-comment-read {
	font-size: clamp(14px, 3.2vw, 21px);
	line-height: 1.571;
	margin-top: 3rem;
}

.boss-name {
	font-size: clamp(26px, 3.2vw, 33px);
	line-height: 1.333;
	text-align: right;
	margin-top: 2.1rem;
}

.boss-name span {
	color: #006239;
	font-size: clamp(14px, 3.2vw, 21px);
	display: block;
}

.boss-image {
	width: 34.375%;/*330*/
	padding-top: 2.1rem;
	display: flex;
	align-items: flex-end;
}

.boss-image img {
	width: 100%;
	max-width: 330px;
	height: auto;
}


/*////////////////*/
/*//// 店舗情報 ////*/
.shopInfo {
	background-color: rgba(200,213,190,.2);
	padding-bottom: 4.5rem;
}

.shopInfo .shopInfo-manager {
	margin: 4.5rem auto 10rem;
}

.shopInfo .shopInfo-manager-voice {
	color: #006239;
	font-size: clamp(12px, 2.5vw, 24px);
	line-height: 1.5;
	margin-bottom: 1.2rem;
}

.shopInfo .shopInfo-manager-voice span {
	font-size: clamp(18px, 2.5vw, 30px);
	background: linear-gradient(transparent 65%, #fff462 65%);
}

.shopInfo .shopInfo-manager-inner {
	max-width: 580px;
	display: flex;
	align-items: flex-start;
	margin: 4.5rem auto 0;
}

.shopInfo .shopInfo-manager-inner .shopInfo-manager-textBox {
	width: 65.51724138%; /*380 580*/
	font-size: clamp(12px, 2.5vw, 17px);
	line-height: 1.75;
	text-align: left;
}

.shopInfo .shopInfo-manager-inner .shopInfo-manager-textBox span {
	display: block;
	font-size: clamp(12px, 2.5vw, 24px);
	line-height: 2;
	text-align: right;
	margin-right: 1em;
}

.shopInfo .shopInfo-manager-inner .shopInfo-manager-imgBox {
	width: 34.48275862%; /*200 580*/
	max-width: 200px;
}


.shopInfo .shopInfo-manager-notes {
	font-size: 10px;
	line-height: 1.5;
	padding-top: 1.5rem;
	border-top: solid 1px #006239;
}


/*////////////////*/
/*//// 浦和・大宮　各店舗 ////*/
.shop .shop-inner {
	display: flex;
	justify-content: space-between;
}

.shop .shop-inner div {
	width: 48.75%; /*468 960*/
	color: #006239;
	margin: 1.5rem auto;
}

.shop .shop-inner dl.shop-Location-Hours {
	font-size: clamp(16px, 2.5vw, 18px);
	line-height: 1.4;
	display: flex;
	flex-wrap: wrap;
	border-left: solid 8px #006239;
	box-sizing: border-box;
}

.shop .shop-inner dl.shop-Location-Hours dt {
	width: 25%;
	text-align: right;
	margin: 0.5rem 0;
}

.shop .shop-inner dl.shop-Location-Hours dd {
	width: 75%;
	text-align: left;
	margin: 0.5rem 0;
}

.shop .shop-inner dl.shop-opening-hours {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 1rem;
}

.shop .shop-inner dl.shop-opening-hours dt {
	width: 48.75%; 
	font-size: clamp(14px, 2.5vw, 16px);
	font-weight: 500;
	line-height: 1.4;
	background-color: #c8d5be;
}

.shop .shop-inner dl.shop-opening-hours dt:first-child {
	order: 0;
}

.shop .shop-inner dl.shop-opening-hours dt:nth-child(2) {
	order: 1;
}

.shop .shop-inner dl.shop-opening-hours dd {
	width: 48.75%; 
	font-size: clamp(16px, 2.5vw, 18px);
	line-height: 1.4;
	padding: 0.5rem 0;
}

.shop .shop-inner dl.shop-opening-hours dd:first-child {
	order: 2;
}

.shop .shop-inner dl.shop-opening-hours dd:nth-child(2) {
	order: 3;
}

.shop .shop-inner div.ggMap iframe {
	width: 100%;
	height: 100%;
}

.shop p {
	color: #006239;
	font-size: clamp(18px, 2.5vw, 30px);
}

/*////////////////*/
/*//// ボタン ////*/
.shop div.btn-link,
footer div.btn-link {
	width: 100%;
	max-width: 580px; /* 必要に応じて最大幅を調整 */
	color: #fff462;
	background-color: #006239;
	border-radius: 10px;
	margin: 2rem auto 0;
	padding: 0;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
	transition: opacity 0.3s;
	box-sizing: border-box;
}

.shop div.btn-link:hover,
footer div.btn-link:hover {
  opacity: 0.85;
}

.shop div.btn-link a,
footer div.btn-link a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 2rem;
  color: #fff462;
  font-size: clamp(16px, 2.5vw, 24px);
  text-decoration: none; /* 下線を消す */
  position: relative; /* アイコン配置の基準 */
}

/* 右側の三角形アイコン */
.shop div.btn-link a::after,
footer div.btn-link a::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 2rem;
  background-image: url("../images/icon-triangle.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center; 
  /* 右側に絶対配置したい場合はこちらを有効に */
  /*
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  */
}

.shop .btnBox {
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* stretch から flex-start に変更 */
  margin-top: 3rem;
}

.shop .btnBox div,
footer .footer-btnBox div {
  width: 48.75%; /*468 960*/
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 予約ボタン自体の横幅を100%に維持 */
.shop .btnBox div a {
  width: 100%;
}

/* 共通のボタン設定 */
.shop .btnBox a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* 高さを固定、または最小高さを指定して左右を統一する */
  min-height: 80px; 
  padding: 1rem;
  border-radius: 12px;
  box-sizing: border-box;
  text-decoration: none;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  transition: opacity 0.3s;
}

.shop .btnBox a:hover {
  opacity: 0.8;
}

/* 予約ボタン（左） */
.shop .btnBox div.btn-reserve a {
  background-color: #006239;
  color: #fff462;
  font-size: clamp(16px, 2.2vw, 28px);
  position: relative;
}

/* 右側の小さな三角形（予約ボタン用） */
.shop .btnBox div.btn-reserve a::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 1rem;
  background-image: url("../images/icon-triangle.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* 電話ボタン（右） */
.shop .btnBox div.btn-tell {
  margin: 0; /* PCではmargin不要 */
}

.shop .btnBox div.btn-tell a {
  background-color: #fff462;
  color: #006239;
  font-size: clamp(20px, 2.8vw, 36px); /* 電話番号は少し大きく */
  font-weight: 700;
}

/* アイコン設定 */
.shop .btnBox a::before {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin-right: 1.5rem;
  flex-shrink: 0;
}

.shop .btnBox div.btn-reserve a::before {
  width: 36px;
  height: 28px;
  background-image: url("../images/icon-mail.svg");
}

.shop .btnBox div.btn-tell a::before {
  width: 30px;
  height: 30px;
  background-image: url("../images/icon-tell.svg");
}

/* 注釈のスタイル */
.shop p.btn-notes {
  display: block;
  width: 100%;
  margin-top: 0.8rem;
  font-size: 1rem;
  color: #006239;
  text-align: center;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0;
}

/*////////////////*/
/*//// ページトップへ戻る ////*/
.pagetop {
	width: 50px;
	position: fixed;
	right: 30px;
	bottom: 150px;
	z-index: 999;
	font-size: 0;
}

.pagetop img {
	width: 100%;
	max-width: 50px;
	height: auto;
}

.pagetop a:hover,
.pagetop img:hover {
	opacity: 1;
}

/*////////////////*/
/*//// footer ////*/
footer {
	border-bottom: solid 30px #006239;
}

.footer-btnBox {
	display: flex;
	justify-content: space-between;
	margin-top: 4.5rem;
}

footer div.btn-link {
	padding: 1rem 2rem;
	box-sizing: border-box;
}

footer ul {
	color: #006239;
	display: flex;
	justify-content: center;
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 1.5;
	margin-top: 1.5rem;
}

footer ul li {
	margin-right: 0.5em;
}

footer ul li::before {
	content: "●";
	width: 4px;
	height: 4px;
}

.privacy {
	margin: 3rem auto 1rem;
}

.privacy img {
	max-width: 500px;
	height: auto;
	margin: 0 auto;
}

/*////////////////*/
/*//// 下部固定CV ////*/
.floating-cv-bar {
	display: none;
}


@media only screen and (max-width : 1024px ){
/*////////////////*/
/*//// FV ////*/
/* --- FV全体の基本設定 --- */
.limited-text-area {
	margin-left: 0;
}

/*////////////////*/
/*//// 選ばれる理由 ////*/
.choosing dl {
	padding: 4.5rem 2rem;
	box-sizing: border-box;
}

.choosing .third {
	font-size: clamp(12px, 2.5vw, 17px);
}

.choosing .quarter02 {
	font-size: clamp(12px, 2.5vw, 17px);
}

/*////////////////*/
/*//// 店舗情報 ////*/

.shopInfo .shopInfo-manager-voice {
	color: #006239;
	font-size: clamp(20px, 4vw, 28px);
	line-height: 1.5;
}

.shopInfo .shopInfo-manager-voice span {
	font-size: clamp(20px, 4vw, 36px);
}

/*////////////////*/
/*//// footer ////*/
footer ul {
	flex-wrap: wrap;
	justify-content: flex-start;
}

}

@media only screen and (max-width : 768px ){
.pc {
	display: none;
}

.sp {
	display: block;
}

.inner {
	padding: 0 15px;
	box-sizing: border-box;
}

h2,
h3 {
	margin-top: 6rem;
}

/*////////////////*/
/*//// header ////*/

.header-inner {
  flex-direction: column;
}

.header-text {
	width: 100%;
	margin-top: 12px;
}

.main-copy {
  font-size: clamp(16px, 8vw, 20px); 
  text-align: center;
}

header h1 img {
  margin-top: 15px;
}

/*////////////////*/
/*//// キャンペーン ////*/
.campaign {
	padding: 30px 0;
}

.campaign img {
}

/*////////////////*/ 
/*//// 見せない補聴器エリア ////*/

/* 矢印アイコン */
.invisible-arrow {
	position: relative;
	width: 24px;
	margin: 4.5rem auto -2rem;
	z-index: 1;
}

/* 補聴器単体画像 */
.invisible-product-img {
	max-width: 180px;
}

.lead-ttl {
	line-height: 1.6;
}


/*////////////////*/
/*//// FV ////*/
.fv-main-visual {
}

.fv-limited-block {
	display: grid;
	grid-template-columns: 55% 45%; /* 左本文55% / 右画像45% */
	align-items: end; /* 画像を下端吸着 */
	position: static;
	padding-bottom: 0;
	padding-left: 15px;  /* ★ここで左側に余白を設定 */
	padding-right: 0;    /* 画像を右端ピッタリにつけるため0 */
	box-sizing: border-box;
}

.limited-text-area {
	display: contents;
}

/* 1行目：限定商品タグ ＋ 見出し（全幅 1 / 3 表示） */
.limited-header {
	grid-column: 1 / 3;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.5rem;
	padding-right: 15px; /* ★右側の余白を確保 */
}

.limited-tag {
	border-width: 3px;
	outline-width: 1px;
	margin: 2px;
	padding: 0.2em 0.5em;
}

.limited-ttl {
	font-size: clamp(15px, 4vw, 28px); /* 430pxで約17px / 768pxで24px */
	line-height: 1.35;
}

.limited-copy {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
	width: 100%;
	font-size: clamp(15px, 2.8vw + 3px, 28px); /* 768px時にも負けない大きめサイズ */
	line-height: 1.45;
	padding: 0 2rem 6rem;
	margin: 0;
}

.limited-img-area {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
	width: 100%;
	align-self: end;  /* 下端ピタッと吸着 */
	position: static;
	margin: 0;
	line-height: 0;   /* 下部の隙間防止 */
}

.limited-img-area img {
	width: 100%;
	height: auto;
	display: block;
}

.productList {
	padding: 5rem 0;
}

/*////////////////*/
/*//// YOUTUBE ////*/
.youtube {
	padding: 6rem 0;
}

.youtube p {
	font-size: clamp(2.4rem, 1.2vw, 3rem); 
	line-height: 1.435;
	text-align: left;
	display: flex;
	justify-content: center;
}

/*////////////////*/
/*//// 小型補聴器が出来るまで ////*/
.step {
	margin-bottom: 5rem;
}

.step-card {
	width: 100%; /* 1列化 */
	margin-bottom: 3rem;
}

.step-content {
	padding: 1.5rem;
}

.step-content h3 {
	font-size: clamp(23px, 1.2vw, 28px);
}

.step-content p {
	font-size: clamp(16px, 1.2vw, 24px);
	text-align: left;
}

/*////////////////*/
/*//// 最新設備を完備 ////*/
.equipment {
	margin: 3rem auto;
}

.equipment h2 {
	font-size: clamp(30px, 2.5vw, 36px);
}

.equipment-flex {
	flex-direction: column;
	margin-top: 4.5rem;
}

.equipment-flex dl {
	width: 100%;
	margin-bottom: 3rem;
}

.equipment-flex dd {
	font-size: clamp(23px, 1.2vw, 28px);
	padding: 1rem 2.5rem;
}

.equipment-flex dd.bottom {
	font-size: clamp(16px, 1.2vw, 24px);
}

.equipment-flex dd.bottom::before {
    left: 2.5rem;
    right: 2.5rem;
}

/*////////////////*/
/*//// 聞こえのこと まだ年のせいにしていませんか？ ////*/
.consult {
	margin-top: 5rem;
}

.consult-header {
	padding: 2.5rem 1.5rem;
}

.consult-header h2 {
	font-size: clamp(18px, 4.5vw, 24px);
}

.consult-header p {
	font-size: clamp(15px, 4vw, 20px);
}

.consult-graph {
	padding: 2rem 1rem;
}

.consult-text {
	padding: 2.5rem 1rem;
}

.consult-text p {
	font-size: clamp(15px, 4vw, 20px);
}

/* メリットカードを縦1列に配置 */
.consult-merit {
	padding: 10rem 1.5rem 4rem;
}

.consult-merit .merit-list {
	flex-direction: column;
	gap: 10rem;
}

.consult-merit .merit-list li {
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
	padding: 5rem 2rem 2.5rem;
}

.consult-merit .merit-list li img {
	top: -35%;
}

.consult-merit .merit-list li h3 {
	font-size: clamp(25px, 4.5vw, 30px);
	margin: 2rem 0 1.2rem 0;
}

.consult-merit .merit-list li p {
	font-size: clamp(14px, 3.8vw, 16px);
	text-align: left;
}

.consult-footer {
	padding: 3rem 1.5rem;
}

.consult-footer .sub-ttl {
	font-size: clamp(14px, 4vw, 20px);
	margin-bottom: 1.5rem;
}

.consult-footer .main-ttl {
	font-size: clamp(20px, 5.5vw, 30px);
}



/*////////////////*/
/*//// 選ばれる理由 ////*/
.choosing dl {
	padding: 4.5rem 0;
}

.choosing dt {
	font-size: clamp(20px, 1.2vw, 24px);
	line-height: 1.5;
	text-align: center;
}

.choosing .number {
	font-size: clamp(45px, 1.2vw, 57px);
	display: block;
	margin: 0 auto 2rem;
}

.choosing .choosing-textGreen {
	display: block;
	font-size: clamp(30px, 1.2vw, 36px);
}

.choosing .choosing-textRed {
	display: block;
	font-size: clamp(30px, 1.2vw, 36px);
}

.choosing .third {
	width: 100%;
	font-size: clamp(30px, 1.2vw, 36px);
	margin-bottom: 2rem;
}

.choosing .quarter {
	width: 50%;
	font-size: 1.4rem;
	margin-bottom: 4rem;
}

.choosing .quarter02 {
	width: 100%;
	font-size: clamp(30px, 1.2vw, 36px);
	margin-bottom: 2rem;
}

/*////////////////*/
/*//// 社長コメント ////*/
.boss {
	margin-top: 3rem;
}

.boss-flex {
	flex-direction: column;
}

.boss-comment {
	width: 100%;
	padding: 0;
}

.boss-comment-title {
	color: #006239;
	font-size: clamp(28px, 1.2vw, 40px);
	line-height: 1.325;
}

.boss-comment-read {
	font-size: clamp(16px, 1.2vw, 20px);
	margin-top: 1.5rem;
}

.boss-image {
	width: 	100%;
	justify-content: flex-end;
	padding-top: 1rem;
}

.boss-name {
	width: auto;
	font-size: clamp(30px, 5vw, 40px); /* 画面幅に応じて調整 */
	text-align: right;
	margin: 0 10px 40px 0; /* 下の数値を増やすと名前が上に上がります */
	writing-mode: vertical-rl;
	flex-shrink: 0;
}

.boss-name span {
	color: #006239;
	font-size: clamp(16px, 3vw, 22px);
    display: block;
    text-align: left;
    margin-left: 5px; /* 行間（縦書きなので左側の空き）を調整 */
}

.boss-image img {
	width: 50%;
}

/*////////////////*/
/*//// 店舗情報 ////*/
.shopInfo {
}

.shopInfo .shopInfo-manager {
	margin: 4.5rem auto 10rem;
}

.shopInfo .shopInfo-manager-voice {
	font-size: clamp(24px, 1.2vw, 3px);
	text-align: left;
}

.shopInfo .shopInfo-manager-voice span {
	font-size: clamp(30px, 1.2vw, 36px);
}

.shopInfo .shopInfo-manager-inner {
	width: 100%;
	max-width: 768px;
	flex-direction: column;
	justify-content: center;
	margin: 0 auto;
}

.shopInfo .shopInfo-manager-inner .shopInfo-manager-textBox {
	width: 100%;
	font-size: clamp(16px, 1.2vw, 20px);
}

.shopInfo .shopInfo-manager-inner .shopInfo-manager-textBox span {
	font-size: clamp(20px, 1.2vw, 24px);
}

.shopInfo .shopInfo-manager-inner .shopInfo-manager-imgBox {
	width: 100%;
	max-width: 768px;
}

.shopInfo .shopInfo-manager-inner .shopInfo-manager-imgBox img {
	width: 44.8%;
	margin: 0 auto;
}

/*////////////////*/
/*//// 浦和・大宮　各店舗 ////*/
.shop .shop-inner {
	flex-direction: column;
}

.shop .shop-inner div {
	width: 75%;
}

.shop .shop-inner div.ggMap iframe {
	min-height: 434px;
}

.shop p {
	font-size: clamp(24px, 1.2vw, 40px);
	line-height: 1.3;
}


.shop .btnBox {
	flex-direction: column;
}

.shop .btnBox div,
footer .footer-btnBox div {
	width: 100%;
	margin-bottom: 1rem;
}

.shop div.btn-link {
	width: 100%;
	max-width: 700px;
}

/* 予約ボタン（左） */
.shop .btnBox div.btn-reserve a {
  font-size: clamp(24px, 1.2vw, 40px);
}

/* 電話ボタン（右） */
.shop .btnBox div.btn-tell a {
  font-size: clamp(30px, 2.8vw, 50px); /* 電話番号は少し大きく */
}

.shop .btnBox a {
	padding: 1.5rem 1rem;
	min-height: 70px;
}
  
.shop p.btn-notes {
	font-size: 1.1rem;
}



/*////////////////*/
/*//// ページトップへ戻る ////*/
.pagetop {
	bottom: 45px;
}

/*////////////////*/
/*//// footer ////*/
.footer-btnBox {
	width: 100%;
	flex-direction: column;
	margin-top: 3rem;
}

footer div.btn-link {
	max-width: 7680px; /* 必要に応じて最大幅を調整 */
	margin: 1.2rem auto 0;
}

footer ul {
	font-size: clamp(10px, 2.2vw, 12px);
}

.privacy {
	margin: 3rem auto 4.5rem;
}

/*////////////////*/
/*//// 下部固定CV ////*/
.floating-cv-bar {
	display: flex;
	position: fixed;
	bottom: -100px; /* 初期状態は画面下に隠す */
	left: 0;
	width: 100%;
	height: 60px;/* バーの高さ */
	z-index: 998;
	transition: bottom 0.4s ease; /* 滑らかに出現 */
	box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
}

/* スクロールで出現するクラス */
.floating-cv-bar.is-active {
	bottom: 0;
}

/* 共通ボタン基本設定 */
.floating-cv-bar a,
.floating-cv-bar button {
	width: 50%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(16px, 4.2vw, 22px);
	font-weight: 700;
	text-decoration: none;
	border: none;
	outline: none;
	cursor: pointer;
	box-sizing: border-box;
}

.floating-cv-bar .btn-cv-reserve {
	background-color: #006239;
	color: #fff462;
}

.floating-cv-bar .btn-cv-reserve::before {
	content: "";
	display: inline-block;
	width: 26px;
	height: 20px;
	margin-right: 0.6em;
	background-image: url("../images/icon-mail.svg");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

.floating-cv-bar .btn-cv-tell {
	background-color: #fff462;
	color: #006239;
}

.floating-cv-bar .btn-cv-tell::before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 22px;
	margin-right: 0.6em;
	background-image: url("../images/icon-tell.svg");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

.tel-modal {
	padding: 0;
	border: none;
	border-radius: 20px;
	width: 85%;
	max-width: 340px;
	background: #fff;
	box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

.tel-modal[open] {
	display: block;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	z-index: 9999;
}

.tel-modal::backdrop {
	background: rgba(0, 0, 0, 0.65);
}

.tel-modal .modal-inner {
	padding: 2.5rem 1.5rem 2rem;
	text-align: center;
}

.tel-modal .modal-title {
	font-size: 1.6rem;
	font-weight: 700;
	color: #222;
	line-height: 1.4; /* 行高を復元 */
	margin: 0 0 2rem 0;
}

.tel-modal .modal-buttons {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	margin-bottom: 2rem;
}

/* 各店舗ボタン */
.tel-modal .btn-shop {
	display: grid;
	grid-template-columns: auto auto; /* 左:アイコン / 右:テキスト */
	justify-content: center;           /* ★全体を左右中央にセンタリング */
	align-items: center;               /* 上下中央揃え */
	column-gap: 1.2rem;                /* アイコンとテキストの間隔 */
	background-color: #fff462;
	color: #006239;
	text-decoration: none;
	padding: 1rem 1.5rem;
	border-radius: 14px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.1);
	box-sizing: border-box;
}

/* 左側の電話アイコン（1列目・縦貫通） */
.tel-modal .btn-shop::before {
	content: "";
	grid-column: 1;
	grid-row: 1 / 3;
	display: block;
	width: 28px;
	height: 28px;
	background-image: url("../images/icon-tell.svg");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

/* 店舗名テキスト（2列目・上段） */
.tel-modal .shop-name {
	grid-column: 2;
	grid-row: 1;
	display: block;
	font-size: 1.7rem;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
}

/* 電話番号テキスト（2列目・下段） */
.tel-modal .shop-number {
	grid-column: 2;
	grid-row: 2;
	display: block;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	margin-top: 0.2rem;
}

/* 閉じるボタン */
.tel-modal .btn-close {
	background: transparent;
	border: none;
	color: #404040;
	font-size: 1.5rem;
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
	padding: 0.5rem 1rem;
	line-height: 1.4;
}

/* ページトップボタンがCVバーと被らないようSP調整 */
.pagetop {
	bottom: 80px !important;
}
}


@media only screen and (max-width : 430px ){
.spOnly {
	display: none;
}

.spBlock {
	display: block;
}

/*////////////////*/
/*//// header ////*/
.header-text {
	margin-top: 8px;
	 padding: 12px;
}

.main-copy {
  font-size: clamp(12px, 8vw, 16px); 
}

/*////////////////*/
/*//// キャンペーン ////*/
.campaign {
	padding: 20px 0;
}

/*////////////////*/ 
/*//// 見せない補聴器エリア ////*/
.campaign-invisible {
	margin-top: 3rem;
}

/* タイトル：「見せない補聴器」 */
.invisible-ttl {
	margin-top: 4rem;
}

.invisible-arrow {
	width: 16px;
	margin: 1.5rem auto -s1rem;
}

.invisible-product-img {
	max-width: 140px;
}

.invisible-lead-section {
	margin-top: 4rem;
	padding-top: 3rem;
}

.lead-text {
	text-align: left; /* スマホでは左揃えで見やすく調整 */
}

/*////////////////*/
/*//// FV ////*/
.limited-copy {
	line-height: 1.5;
	padding: 0 0 3rem;
	position: relative;
	z-index: 1;
}

.productList {
	padding: 0;
	border-top: solid 2px #006239;
	border-bottom: solid 2px #006239;
}

.productList ul {
	flex-direction: column;
}

.productList ul li {
	width: 100%;
	padding: 6% 0;
	box-sizing: border-box;
}

.productList ul li:first-child {
	border-left: none;
	border-right: none;
	border-bottom: solid 2px #006239;
}

.productList ul li:nth-child(2) {
	border-left: none;
	border-right: none;
}

/*////////////////*/
/*//// 小型補聴器が出来るまで ////*/
.step {
}

/*////////////////*/
/*//// 最新設備を完備 ////*/
.equipment {
}

.equipment p {
	font-size: clamp(28px, 1.2vw, 30px);
}

.equipment-flex {
	margin-top: 3rem;
}

.equipment-flex dl {
	width: 100%;
	margin-bottom: 2rem;
}

.equipment-flex dd {
	padding: 1rem 2rem;
}

.equipment-flex dd.bottom::before {
    left: 2rem;
    right: 2rem;
}

/*////////////////*/
/*//// 聞こえのこと まだ年のせいにしていませんか？ ////*/
.consult-header h2 {
	text-align: left;
	font-size: clamp(22px, 1.2vw, 30px);
}

.consult-header p {
	text-align: left;
	font-size: clamp(22px, 1.2vw, 30px);
}

.consult-text p {
	text-align: left;
	font-size: clamp(20px, 1.2vw, 30px);
}


.consult-merit .merit-list {
	gap: 8rem;
}

.consult-merit .merit-list li img {
	width: 180px;
	top: -65px;
}

.consult-merit .merit-list li h3 {
	font-size: clamp(24px, 1.2vw, 36px);
	margin-top: 8%;
}

.consult-merit .merit-list li p {
	font-size: clamp(14px, 1.2vw, 16px);
}

.consult-footer {
	text-align: left;
}

.consult-footer .sub-ttl {
	font-size: clamp(25px, 1.2vw, 40px);
	margin-bottom: 1.5rem;
}

.consult-footer .main-ttl {
	font-size: clamp(36px, 1.2vw, 48px);
}


/*////////////////*/
/*//// 選ばれる理由 ////*/
.choosing dl:last-child {
	padding-bottom: 0;
}


.choosing dt {
}

.choosing .number {
	font-size: clamp(40px, 1.2vw, 50px);
}

.choosing .choosing-textGreen {
	font-size: clamp(28px, 1.2vw, 30px);
}

.choosing .choosing-textRed {
	font-size: clamp(28px, 1.2vw, 30px);
}

.choosing .third,
.choosing .quarter02 {
	font-size: clamp(22px, 1.2vw, 26px);
	margin-bottom: 1.5rem;
}

.choosing .half,
.choosing .quarter {
	width: 100%;
}

.choosing .choosing-img {
	width: 100%;
	flex-direction: column;
	margin-bottom: 1.5rem;
}

/*////////////////*/
/*//// 社長コメント ////*/
.boss {
	margin-top: 4.5rem;
}

.boss-comment-title {
}

.boss-comment-read {
	margin-top: 1.5rem;
}

.boss-name {
	font-size: clamp(25px, 1.2vw, 35px);
	margin: 0 3% 5% 0;
}

.boss-name span {
	color: #006239;
	font-size: clamp(16px, 1.2vw, 26px);
}

.boss-image img {
	width: 60%;
}

/*////////////////*/
/*//// 店舗情報 ////*/
.shopInfo .shopInfo-manager-voice span {
	line-height: 1.5;
}

.shopInfo .shopInfo-manager-inner {
	margin: 3rem auto 0;
}

.shopInfo .shopInfo-manager-inner .shopInfo-manager-imgBox img {
	width: 60%;
	min-width: 200px;
}

.shopInfo .shopInfo-manager-notes {
	text-align: left;
}

/*////////////////*/
/*//// 浦和・大宮　各店舗 ////*/
.shop .shop-inner div {
	width: 100%;
}

.shop .shop-inner div.ggMap iframe {
	min-height: 300px;
}

.shop div.btn-link a,
footer div.btn-link a {
  font-size: clamp(18px, 1.2vw, 30px);
}

/* 予約ボタン（左） */
.shop .btnBox div.btn-reserve a {
  font-size: clamp(18px, 1.2vw, 35px);
}

/*////////////////*/
/*//// ページトップへ戻る ////*/
.pagetop {
	width: 40px;
	right: 20px;
	bottom: 70px;
}

.pagetop img {
	max-width: 40px;
}

}