


@charset "utf-8";
*::before,
*::after {
  box-sizing: border-box; /* もちろん、より直感的なbox-sizingに設定 */
  margin: 0; /* マージンは0に */
  padding: 0; /* パディングも常に0に */
}

:where([hidden]:not([hidden="until-found"])) {
  display: none !important; /* hiddenは非表示を意味します */
}

:where(html) {
  text-size-adjust: none; /* iOSのランドスケープでテキストが調整されないようにする */
  color-scheme: dark light; /* ユーザーがダークテーマを好む場合、自動的にダークテーマになる */
}

@supports not (min-block-size: 100dvb) {
  :where(html) {
    block-size: 100%;
  }
}

@media (prefers-reduced-motion: no-preference) {
  :where(html:focus-within) {
    scroll-behavior: smooth; /* 何かにフォーカスがある場合のみスムーズスクロール */
  }
}

:where(body) {
  font-family: system-ui, sans-serif; /* timeの代わりにシステムフォントを使用 */
  line-height: 1.5; /* アクセシブルな行の高さ */
  block-size: 100%; /* サファリ以外のブラウザのフォールバック */
  block-size: 100dvb; /* 1dvbは動的ビューポートの長さの1%、100dvbで高さいっぱいに */
  -webkit-font-smoothing: antialiased; /* テキストのレンダリングを改善 */
}

:where(input, button, textarea, select) {
  color: inherit; /* カラーも継承 */
  font: inherit; /* フォーム コントロールは親フォントを継承 */
}

:where(textarea) {
  resize: vertical; /* テキストエリアの水平リサイズを無効に */
  resize: block;
}

:where(button, label, select, summary, [role="button"], [role="option"]) {
  cursor: pointer; /* インタラクティブなものにカーソルを合わせる */
}

:where(:disabled) {
  cursor: not-allowed; /* フォームコントロール無効時のカーソルを許可しない */
}

:where(label:has(> input:disabled), label:has(+ input:disabled)) {
  cursor: not-allowed; /* ラベルにもカーソルを許可しない */
}

:where(button) {
  border-style: solid; /* ボタンのボーダーのスタイルを設定しやすくする */
}

:where(a) {
  text-underline-offset: 0.2ex; /* 下線の上にスペースを追加する */
}

:where(ul, ol) {
  list-style: none; /* ビュレットを削除、必要に応じて手動で追加する */
}

:where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: block; /* 置換された要素をより予測可能にする */
}

:where(img, picture, svg) {
  max-inline-size: 100%; /* images should never overflow past the available space */
  block-size: auto; /* アスペクト比を保持 */
}

:where(p, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word; /* 長い単語は改行 */
}

:where(h1, h2, h3) {
  line-height: calc(1em + 0.5rem); /* 見出しの行の高さを減らす */
}

:where(hr) {
  overflow: visible;

  /* より一貫性のある、スタイリッシュなhr */
  border: none;
  color: inherit;
  border-block-start: 1px solid;
  block-size: 0;
}

:where(:focus-visible) {
  /* より一貫性のある、カスタマイズ可能なフォーカスのアウトライン */
  outline: 2px solid var(--focus-color, Highlight);
  outline-offset: 2px;
}

/* .visually-hiddenは後のカスケードレイヤーを上書きするために!importantを使用 */
:where(.visually-hidden:not(:focus, :active, :focus-within, .not-visually-hidden)) {
  position: absolute !important;
  overflow: hidden !important;
  width: 1px !important;
  height: 1px !important;
  border: 0 !important;
  white-space: nowrap !important;
  clip-path: inset(50%) !important;
}

.visually-hidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  white-space: nowrap;
}
main#hojinlp {
    margin-top: 97px;
    font-family: "toppan-bunkyu-midashi-go-std", sans-serif;
    font-weight: 900;
    font-style: normal;
}
#hojinlp .mv_section{
	background: #e73b19;
	background: linear-gradient(238deg, rgba(231, 59, 25, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(255, 255, 255, 1) 75%, rgba(132, 206, 224, 1) 100%);
	padding: 10vh 10vw;
	display: grid;
	grid-template-columns: 50% auto;
	justify-content: space-around;
}
@media print, screen and (width <=768px){
	main#hojinlp {
    margin-top: 67px;
}
	#hojinlp .mv_section{
		gap:20px;
		grid-template-columns: 60% auto;
		padding: 15vh 5vw 14vh 6vw;
		position: relative;
		display: block;
	}
}
#hojinlp .mv_section h1{
	background:url(/gaishou/images/htb_mv-title.svg) no-repeat center/contain;
	aspect-ratio: 300/77;
	margin: 0 0 10vh;
}
figure.mv-img img {height: 100%;width: auto;object-fit: contain;}
.mv_merit {
    width: 93%;
}
@media print, screen and (width <=768px){
	.mv_merit {
    width: 86%;
  }
	#hojinlp .mv_section h1{
		margin: 0 0 8vh;
		width: 64%;
	}
figure.mv-img {position: absolute;height: 33vh;top: 2vh;right: 10%;width: 23%;}
}
.mv_merit p:first-of-type{
	aspect-ratio:401/102;
	width: 90%;
}
.mv_merit p:first-of-type img{
	height:100%
}
.mv_merit p:last-of-type{
    margin:5vh 0 0;
    transform:translateX(10%);
width:114%
}
#hojinlp .content{
	margin:0 auto;
	max-width: 1000PX;
}
@media print, screen and (width <=768px) {
	.mv_merit p:last-of-type{
    transform:translateX(3%);
    width: 114%;
    height: 10vh;
    width: 102%;
    margin: 3vh 0 0;
  }
  .c-footer__body .c-footer__body-inner{
	grid-template-columns: 1fr;
	padding: 0;
	}
}
.merit_section{
	padding: 20vh 50px;
	background: #84CEE0;
	background: linear-gradient(30deg, rgba(132, 206, 224, 1) 0%, rgba(255, 255, 255, 1) 100%);
}
@media print, screen and (width <=768px) {
  .merit_section{
	padding: 14vh 30px;
	}
}
.merit_section h2{
	margin: 0 0 34px;
	font-size: clamp(30px,5vw,56px);
	text-align: center;
	font-weight: 600;
}
.merit_section h2 span{
	font-size: clamp(13px,2.0vw,16px);
	display: block;
}
.merit_section .header_lead{
	text-align: center;
	font-size: clamp(16px,2.2vw,22px);
	font-weight: 600;
}
.header_lead + .merit_wrap{
	margin:150px 0 80px;
}
.header_lead + .merit_wrap svg{
	width:90%;
	margin:0 auto
}
.merit_wrap{
	margin: 28vh 0;
	text-align: center;
}
.merit_wrap:last-of-type,.heatshock_section .merit_wrap:last-of-type{
	margin-bottom:0
}
.merit_wrap h3{
	font-size: clamp(20px,3.7vw,35px);
	margin-bottom: 32px;
	position: relative;
	line-height: 1.0;
	z-index:10
}
@media print, screen and (width <=768px){
	.merit_wrap{
	margin: 18vh 0;
  }
	.header_lead + .merit_wrap{
	margin:110px 0 80px;
}
	.merit_wrap h3{
	line-height: 1.4;
	margin-bottom: 25px;
	}
	.header_lead + .merit_wrap svg{
	width:100%;
  }
}
.merit_wrap h3::before{
	content: "01";
	display: block;
	position: absolute;
	top: -27%;
	left:50%;
	transform: translate(-50%,-50%);
	color: #fff;
	opacity: 0.46;
	font-family: "epilogue", sans-serif;
	font-weight: 700;
	font-style: normal;
	z-index: -1;
	font-size: clamp(100px,15.5vw,167px);
}
.merit_wrap:nth-of-type(2) h3::before{
	content: "02";
}
.merit_wrap:nth-of-type(3) h3::before{
	content: "03";
}
.merit_wrap h3 span{
	margin:0 0 5px;
	font-size: clamp(15px,2.2vw,20px);
	display: block;
}
.merit_lead{
	font-size: clamp(13px,2.0vw,18px);
	line-height: 1.5;
}
.cls-1 {
        font-family: SourceHanSans-Heavy-90ms-RKSJ-H, 'Source Han Sans';
        font-size: 16.52px;
      }

      .cls-1, .cls-2 {
        fill: #fff;
        font-weight: 800;
      }

      .cls-3 {
        fill: #21639a;
      }

      .cls-4 {
        fill: #194b7d;
      }

      .cls-5 {
        fill: #3b9bd3;
      }

      .cls-6 {
        fill: #2d80b9;
      }

      .cls-2 {
        font-family: Epilogue-Black, Epilogue;
        font-size: 26.52px;
      }

.heatshock_section{
	padding: 21vh 50px;
	display:grid;
	background: #e73b19;
	background: -webkit-linear-gradient(300deg, rgba(231, 59, 25, 1) 0%, rgba(255, 255, 255, 1) 100%);
	background: -o-linear-gradient(300deg, rgba(231, 59, 25, 1) 0%, rgba(255, 255, 255, 1) 100%);
	background: linear-gradient(30deg, rgba(231, 59, 25, 1) 0%, rgba(255, 255, 255, 1) 100%);
}
@media print, screen and (width <=768px){
	.heatshock_section{
	padding: 11vh 30px;
	}
}
#hojinlp .heatshock_section .content{
	width:auto;
	display:inline-block;
}
.heatshock_section h2{
	margin:0 0 50px;
	font-size: clamp(19px,3.0vw,30px);
	text-align: left;
	font-weight: 600;
	line-height:2.0;
}
.heatshock_section h2 span{
	font-size: clamp(22px,6vw,37px);
}
.heatshock_section .merit_wrap{
	margin: 11vh 0px;
}
.heatshock_section .merit_wrap,.heatshock_section .merit_wrap h3{
	text-align: left;
}
.heatshock_section .merit_wrap h3::before{
	display:none
}


section.price_section {
    padding: 10vh 30px 10vh;
}
.price_section .content{
	display: grid;
	grid-template-columns: 30% 1fr;
	gap:8%;
	align-items: center;
}
@media print, screen and (width <=768px) {
  .price_section .content{
	grid-template-columns: 1fr;
	padding: 0;
	gap: 10px;
	}
	.price_section .content figure{
		height:40vh;
		display:flex;
		justify-content:center
	}
	.price_section .content figure img{
		height:100%;
		object-fit:contain;
	}
}
.text-wrap {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 98px max-content;
    gap: 30px;
    justify-content: center;
    align-items: center;
}
.price_section .content ul{
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap:20px
}
@media print, screen and (width <=768px){
	.text-wrap{
		gap:10px
	}
	.price_section .content ul{
	grid-template-columns: 1fr;
  }
}
.price_section .content ul li{
	border:3px solid #b22323;
	padding:15px;
	border-radius: 10px;
	display: grid;
	justify-content: center;
	gap: 10px;
}
.price_section .content ul li:nth-of-type(2){
	border:3px solid #093250;
}
.price_section .content ul li h3{
	margin-bottom: initial;
	font-size: clamp(15px,2.0vw,22px);
	color: #b22323;
	font-weight: 600;
	line-height: 1.8;
	text-align: center;
}
.price_section .content ul li:nth-of-type(2) h3{
	color: #093250;
}
.price_section .content ul li:nth-of-type(2) .info-text{
	font-weight: 600;
}
p.info-text{
	font-size: clamp(14px,1.5vw,16px);
	font-weight:600;
	margin:10px 0
}
p.info-text:nth-of-type(1) .content-title{
	display:block
}
.content-title::before{
	content:"";
	display:inline-block;
	width:10px;
	height: 10px;
	background: #333;
	border-radius: 50%;
	margin-right: 3px;
}
.info-text .content-title,.price_section .price{
	font-weight: 600;
	font-size: clamp(14px,4.5vw,17px);
	display: inline-block;
	margin-right: 10px;
}
 .price_section .price{
	font-size: clamp(19px,4.5vw,26px);
	line-height: 1.5;
	}
.info-text .mini-title{
	font-size: clamp(11px,1.2vw,13px);
}
.info-text .big-text{
	font-size: clamp(22px,3.0vw,25px);
}
.price_section .price span{
	font-size: clamp(34px,6.5vw,62px);
	line-height: 1.0;
	font-family: "epilogue", sans-serif;
	font-weight: 700;
	font-style: normal;
}


.c-footer__body{
	padding: 50px 30px;
	background:linear-gradient(90deg, #3769c6 0%, #07378e 100%)
}
.c-footer__body > p{
	letter-spacing: 0.1em;
	font-size: clamp(15px,2.6vw,25px);
	text-align: center;
	font-weight: 600;
	color: #fff;
}
.c-footer__body .c-footer__body-inner{
	display: grid;
	grid-template-columns: 371px 1fr;
	justify-content: space-between;
	gap: 0 50px;
	padding: 60px 50px;
}
@media print, screen and (width <=768px) {
  .c-footer__body .c-footer__body-inner{
	margin-top: 31px;
	grid-template-columns: 1fr;
	padding: 0;
	gap: 39px;
	}
}
.c-footer__contact{
	grid-area:auto;
	color:#fff
}
.c-footer__logo{
	grid-area:auto
}
.c-footer__contact-text {
	font-size: clamp(30px,3.5vw,40px);
	color: #fff;
}
.c-footer__contact-text span{
	font-size: clamp(15px,3.0vw,24px);
}
.mail-bt a {
	display: flex;
	padding: 16px 20px 16px 30px;
	background: #fff;
	border-radius: 8px;
	color: #0e3e96;
	align-items: center;
	gap: 15px;
	margin: 10px 0 0;
	font-size: clamp(21px, 5vw, 32px);
}
.mail-bt a::before{
	cotent:"";
	display:inline-block;
	width:7px;
	height: 7px;
	background: #333;
	border-radius: 50%;
	margin-right: 3px;
}
..c-header__navigation-contact-button-text{
font-size: clamp(21px, 5vw, 32px);	
}
.c-footer__contact-hour {
  margin-top: 20px;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.8;
}
.c-footer__contact-note {
  margin-top: 5px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.8;
}
.mail-bt .c-header__navigation-contact-button-icon {
        aspect-ratio: 32 / 26;
        width: 30px;
        fill: #0a3a91;
    }

.mail-bt {
    max-width: 224px;
    margin: 0;
}
.mail-bt a .c-header__navigation-contact-button-text{
	font-size: clamp(15px, 5vw, 20px);
}



