@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
body,
html {
	width: 100%;
	height: 100%;
}
body {
	margin: 0;
	font-family: "Ubuntu", "Noto Sans JP", sans-serif;
	color: #16161a;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body hr {
	display: block !important; /* ブロック要素であることを強制 */
	width: 50% !important;	 /* 幅を50%に強制 */
	max-width: 50% !important; /* 最大幅も制限 */
	margin: 0 auto 3rem auto !important; /* 中央寄せを強制 */
	
	/* デザイン部分 */
	border: 0 !important;
	border-top: 10px dotted !important;
	color: currentColor;
	opacity: 0.1;
}
.mb-70{margin-bottom: 70px;}
.mb-100{margin-bottom: 100px;}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
	margin-top: 0;
	margin-bottom: 0.5rem;
	line-height: 1.6;
} 
p {
	margin-top: 0;
	margin-bottom: 1rem;
	font-size: 18px;
	line-height: 1.6em;
}
.text-red {color:#cc4400;}
.text-gray {color:#666666;}
.text-ora {color: #f0a51f;}
.text-blue {color: #38A7BB;}
.text-white {color:#a12c2f;}
a {
	color: var(--bs-link-color);
	text-decoration: underline;
}
a:hover {
	color: var(--bs-link-hover-color);
}
.img_trans:hover {opacity: 0.8;}

i {vertical-align: middle;}
h2 .pricing {font-size: calc(1.375rem + 1.5vw);}
@media (min-width: 1200px) {h2 .pricing {font-size: 2.5rem;}}

.bg-ora{background-color: #faa700;
background-image: url("https://www.transparenttextures.com/patterns/absurdity.png");
}
.bg-light{background-color: #faf1dc;
background-image: url("https://www.transparenttextures.com/patterns/absurdity.png");
}
.bg-yellow{background-color: #ddd0b5;
background-image: url("https://www.transparenttextures.com/patterns/absurdity.png");
}
.marker-white {background:linear-gradient(transparent 20%, #fff 100%);padding-bottom: 0.1em;}
.marker-yellow {background:linear-gradient(transparent 20%, #faa700 100%);padding-bottom: 0.1em;}
.marker-blue {background:linear-gradient(transparent 60%, #38A7BB 100%);padding-bottom: 0.1em;}
/* 波線マーカーの定義 */
.marker-wave {
	text-decoration: underline wavy rgba(255, 255, 255, 0.3); /* 種類(wavy) と 色 を指定 */
	text-underline-offset: 0.3em;           /* 文字と線の間隔（お好みで調整） */
	text-decoration-thickness: 3px;        /* 線の太さ */
}
.marker-wave-bl {
	text-decoration: underline wavy rgba(56, 167, 187, 0.7); /* 種類(wavy) と 色 を指定 */
	text-underline-offset: 0.1em;           /* 文字と線の間隔（お好みで調整） */
	text-decoration-thickness: 3px;        /* 線の太さ */
}
.scroll-to-top {
	position: fixed;
	right: 15px;
	bottom: 15px;
	display: none;
	width: 50px;
	height: 50px;
	text-align: center;
	color: #fff;
	background: rgba(52, 58, 64, 0.5);
	line-height: 50px;
	text-decoration: none;
}
.scroll-to-top:focus, .scroll-to-top:hover {
	color: #fff;
}
.scroll-to-top:hover {
	background: #343a40;
}
.scroll-to-top i {
	font-weight: 800;
}
/* --- 1. ナビゲーションの初期状態（透明） --- */
#mainNav {
	background-color: transparent !important; /* 強制的に透明から開始 */
	transition: background-color 0.3s ease-in-out;
	padding-top: 5px;
	padding-bottom: 5px;
}
/* --- 2. スクロール後に JS でクラスが付与された時の状態 --- */
#mainNav.navbar-scrolled {
	background-color: rgba(0, 0, 0, 0.8) !important; /* スクロールしたら黒背景 */
	box-shadow: 0 2px 10px rgba(0,0,0,0.5);
	padding-top: 0px;
	padding-bottom: 0px;
}
/* --- 3. メニュー文字のスタイル（追加分） --- */
#mainNav .nav-link {
	color: #fff !important; /* 文字を常に白に */
	font-weight: 700;
	transition: color 0.3s ease;
}
#mainNav .nav-link:hover {
	color: #ffc107 !important; /* ホバー時のアクセントカラー */
}
/* メニュー項目（li）同士の間隔をあける */
#mainNav .nav-item {
	margin-left: 15px;  /* 左側に15pxの余白を追加 */
	margin-right: 15px; /* 右側に15pxの余白を追加 */
}
/* 最後の項目の右余白を消して右端に揃える（お好みで） */
#mainNav .nav-item:last-child {
	margin-right: 0;
}
/* スムーズスクロールの設定 */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 70px; /* ナビの高さ分、止まる位置を下げる */
}
/* --- ハンバーガーボタン --- */
#mainNav .navbar-toggler {
	background: rgba(52, 58, 64, 0.5);
	margin-right: 15px;
	top: 15px;
	width: 50px;
	height: 50px;
	border: none;
	border-radius: 8px;
	padding: 10px;
	outline: none;/* クリック時の青い枠を消す */
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.navbar-toggler:focus, .navbar-toggler:hover {
	color: #fff;
}
/* ボタンをホバー（マウスを乗せた時）した時の演出 */
#mainNav .navbar-toggler:hover {
	background-color: #38A7BB; /* 少し暗くする */
}

.btn-primary {
	--bs-btn-color: #fff;
	--bs-btn-bg: #38A7BB;
	--bs-btn-border-color: #38A7BB;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #2a8798;
	--bs-btn-hover-border-color: #2a8798;
	--bs-btn-focus-shadow-rgb: 63, 147, 173;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #2a8798;
	--bs-btn-active-border-color: #2a8798;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #1D809F;
	--bs-btn-disabled-border-color: #1D809F;
}
.btn-xl {
	padding: 1rem 2rem;
	border-radius: 30px;
}
.masthead {
	min-height: 30rem;
	position: relative;
	display: table;
	width: 100%;
	height: auto;
	padding-top: 8rem;
	padding-bottom: 8rem;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%), url("../assets/img/bg-masthead.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.masthead h1, .masthead .h1 {
	font-size: 34px;
	color: #fff;
	margin: 100px 0 0 0;
	padding: 0 0 20px 0;
	text-shadow: 1px 1px 2px black;
	line-height: 1.5em;
}
.masthead h2, .masthead .h2 {
	font-size: 28px;
	color: #fff;
	margin: 0;
	padding: 0;
	text-shadow: 1px 1px 2px black;
	line-height: 1.3em;
}
.masthead {
	min-height: 30rem;
	position: relative;
	display: table;
	width: 100%;
	height: auto;
	padding-top: 8rem;
	padding-bottom: 8rem;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%), url("../assets/img/bg-masthead.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.page-header {
	min-height: 20rem;
	position: relative;
	display: table;
	width: 100%;
	height: auto;
	padding-top: 8rem;
	padding-bottom: 8rem;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%), url("../assets/img/header-page.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.content-section {
	padding-top: 7.5rem;
	padding-bottom: 7.5rem;
}
.content-section-heading h2, .content-section-heading .h2 {
	font-size: 2rem;
}
.content-section-heading h3, .content-section-heading .h3 {
	font-size: 1rem;
	text-transform: uppercase;
}
.content-section-heading::before {
	position: absolute;
	content: "";
	width: calc(100% + 80px);
	height: 2px;
	top: 4px;
	left: -40px;
	background: #38A7BB;
	z-index: -1;
}
.subtitle-double-line {
	display: inline-block;    /* テキストの幅に合わせる */
	position: relative;
	padding-bottom: 15px;     /* 線を表示するスペース */
	text-align: center;
}
/* 共通設定（線を作る） */
.subtitle-double-line::before,
.subtitle-double-line::after {
	content: "";
	position: absolute;
	left: 50%;                /* 中央に配置 */
	transform: translateX(-50%); /* 中央寄せの補正 */
	height: 2px;              /* 線の太さ */
	background-color: currentColor; /* 文字色と同じ色 */
}
/* 上の線（長め） */
.subtitle-double-line::before {
	bottom: 8px;              /* 下からの位置 */
	width: 100px;             /* 上の線の長さ（お好みで調整） */
}
/* 下の線（短め） */
.subtitle-double-line::after {
	bottom: 0px;              /* 一番下の位置 */
	width: 60px;              /* 下の線の長さ（お好みで調整） */
}
h2.heading-speech {
	display: block;
	width: fit-content;	  /* 文字幅に合わせる */
	margin: 0 auto 0.2rem;   /* 中央寄せ */
	position: relative;
	padding-bottom: 20px;	/* 下線と三角のスペース（少し詰めました） */
	color: currentColor;
	font-weight: bold;
	text-align: center;
}
/* 下線と三角形を生成するパーツ */
h2.heading-speech::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;               /* 文字幅いっぱいに広がる */
	height: 15px;               /* 全体の高さ */
	background-color: #000; /* 線の色 */
	
	/* 三角を鋭角にするために、中央からの距離を 15px → 8px に変更しました。
	   この数値を小さくするほど、角が鋭くなります。
	*/
	clip-path: polygon(
		0 0,                                      /* 線の左上 */
		calc(50% - 8px) 0,               /* 三角の左付け根（外側） */
		50% 12px,                          /* 三角の頂点（外側） */
		calc(50% + 8px) 0,             /* 三角の右付け根（外側） */
		100% 0,                             /* 線の右上 */
		100% 2px,                         /* 線の右下（厚み2px） */
		calc(50% + 8px) 2px,         /* 三角の右付け根（内側） */
		50% 14px,                         /* 三角の頂点（内側） */
		calc(50% - 8px) 2px,         /* 三角の左付け根（内側） */
		0 2px                                /* 線の左下（厚み2px） */
	);
}
.cta {
	padding: 15rem 0;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%), url("../assets/img/bg-callout.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
/* aboutus */
.info .address, 
.info .email, 
.info .phone, 
.info .hour {
	display: flex;         /* アイコンとテキストを横並びにする */
	align-items: center;   /* 垂直方向の中央で揃える */
	margin-bottom: 15px;   /* 各行の間の余白（お好みで調整） */
}
/* アイコン自体の調整（iタグ） */
.info i {
/* 前回のコードにあった float: left; は削除してください */
	flex-shrink: 0;        /* テキストが長くなってもアイコンが潰れないようにする */
	margin-right: 15px;    /* アイコンとテキストの間の距離 */
/* サークルにするための設定（既存のものを活かす） */
	display: flex;
	justify-content: center;
	align-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #f0a51f;
	color: #fff;
}
.info .email:hover i, .info .address:hover i, .info .phone:hover i, .info .hour:hover i {
	background: #38A7BB;
	color: #fff;
}
.info a {
	color: #16161a;
	text-decoration: underline;
}
.info a:hover {
	opacity: 0.5;
}

.map {
	height: 20rem;
}
.map iframe {
	pointer-events: none;
	height: 100%;
	width: 100%;
	border: 0;
}
.contact .form-control:focus {
  border: 5px solid #E26B5D; /* 通常時の枠線の色に戻す、またはお好みの色に */
  box-shadow: none;      /* 青い影を消す */
  outline: 0;            /* 念のためoutlineもリセット */
}
/* チェックが入った時の背景色と枠線の色を変更 */
.contact .form-check-input:checked {
  background-color: #E26B5D;
  border-color: #E26B5D;
}

/* クリックした瞬間の青い影（フォーカス）を、薄い赤色に変更 */
.contact .form-check-input:focus {
  border-color: #E26B5D;
  box-shadow: 0 0 0 0.25rem rgba(226, 107, 93, 0.25); /* #E26B5Dの半透明色 */
}
.contact label, p, option {
	font-size: 18px;
}
/* 追従エリアの土台 */
.floating-bnr {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 -3px 15px rgba(0,0,0,0.15);
	z-index: 9999;
	padding: 8px 10px;
	
	/* --- アニメーションの設定 --- */
	transition: all 0.4s ease; /* 0.4秒かけて変化 */
	transform: translateY(100%); /* 最初は画面の下に隠す */
	opacity: 0;				 /* 最初は透明 */
	pointer-events: none;	   /* 消えている間はクリック不可 */
}
.floating-bnr-inner {
	display: flex;
	gap: 8px; /* ボタン同士の間隔 */
	max-width: 450px; /* スマホでの最大幅 */
	margin: 0 auto;
}
.floating-btn-item {
	flex: 1;
}
.floating-btn-item img {
	width: 100%;
	height: auto;
	display: block;
	/* 軽く浮き上がらせるような効果 */
	transition: transform 0.2s;
}
/* タップした時に少し沈む演出 */
.floating-btn-item:active img {
	transform: scale(0.95);
}
/* スクロールした時に付与されるクラス */
.floating-bnr.is-show {
	transform: translateY(0);	/* 定位置に戻る */
	opacity: 1;				  /* 表示する */
	pointer-events: auto;		/* クリック可能にする */
}
.flow {
  padding-left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 60px;
}

.flow > li {
  list-style-type: none;
  /* --- 修正ポイント --- */
  width: 350px;       /* 幅を350pxで固定 */
  flex-shrink: 0;     /* 画面が狭くなってもボックス自体は縮まないようにする */
  /* ------------------ */
  display: flex;
}

.flow > li .icon04 {
  line-height: 2;
  width: 2em;
  height: 2em;
  text-align: center;
  color: #fff;
  background: #E26B5D;
  margin: 0 auto 10px;
  display: block;
  border-radius: 100vh;
  position: relative;
}

.flow > li .icon04::before {
  content: "";
  border: solid transparent;
  border-width: 7px;
  border-top-color: #E26B5D;
  position: absolute;
  top: calc(100% - 2px);
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.flow > li dl {
  padding: 30px 20px;
  margin: 0;
  border: 3px solid #E26B5D;
  position: relative;
}
.flow > li:not(:first-child) dl::before {
  content: "";
  width: 14px;
  height: 14px;
  display: block;
  border-top: 4px solid #E26B5D;
  border-right: 4px solid #E26B5D;
  position: absolute;
  top: 50%;
  left: -40px; /* 横並びの時は左に配置 */
  transform: translateY(-50%) rotate(45deg);
  z-index: 1;
}

.flow > li dl dt {
  font-size: 1.3em;
  font-weight: 600;
  color: #E26B5D;
  -ms-flex-preferred-size: 20%;
  flex-basis: 20%;
  margin-bottom: 10px;
  text-align: center;
}

.flow > li dl dd {
  margin-left: 0;
}

@media(max-width: 991px) {
  .flow {
    gap: 40px; /* 上下の隙間を広げる */
  }
  
.flow > li {
    width: 100%;      /* スマホでは横幅いっぱいにする */
    max-width: 500px; /* 広がりすぎ防止（お好みで） */
    margin: 0 auto;   /* 中央寄せ */
  }

  .flow > li:not(:first-child) dl::before {
    /* 位置を「左」から「中央上」に変更 */
    top: -28px;      /* 箱の上に配置 */
    left: 50%;       /* 横方向の中央 */
    margin-left: -7px; /* 矢印の幅の半分戻して完全中央へ */
    
    /* 向きを「下向き」に変更 */
    transform: rotate(135deg); 
  }
}
footer.footer {
	padding-top: 5rem;
	padding-bottom: 5rem;
}
footer.footer .social-link {
	display: block;
	text-decoration: none;
	height: 4rem;
	width: 4rem;
	line-height: 3.8rem;
	font-size: 1.7rem;
	background-color: #38A7BB;
	transition: background-color 0.15s ease-in-out;
	box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1);
}
footer.footer .social-link:hover {
	background-color: #40838F;
	text-decoration: none;
}
@media (min-width: 992px) {
	.masthead {
		height: 100vh;
	}
	.masthead h1, .masthead .h1 {
		font-size: 3.2rem;
		margin: 0;
	}
	.masthead h2, .masthead .h2 {
		font-size: 2.5rem;
	}
}
@media (max-width: 992px) {
	.map {
	height: 75%;
	}
}
/* スマホ表示（画面幅992px未満）の時の調整 */
@media (max-width: 991.98px) {
/* スマホ表示（折りたたみ時）のメニュー背景 */
	#navbarResponsive {
		background-color: rgba(46, 137, 153, 0.9); /* ボタンに近いカーキ色（少し透過） */
		margin-top: 10px;       /* ボタンとの間に少し隙間を作る */
		padding: 20px;          /* 内側の余白 */
		box-shadow: 0 4px 15px rgba(0,0,0,0.3); /* 浮き上がって見える影 */
	}
/* メニュー項目を中央寄せにする場合 */
	#navbarResponsive .nav-item {
		text-align: center;
		border-bottom: 1px solid rgba(255,255,255,0.1); /* 項目間の区切り線 */
		padding-top: 10px;
		padding-bottom: 10px;
	}
	#navbarResponsive .nav-link {
		font-size: 18px !important;
		 /* リンクエリアを横いっぱいに広げる（どこを触っても反応するように） */
		display: block;
		width: 100%;
	}
	#navbarResponsive .nav-item:last-child {
		border-bottom: none; /* 最後の項目の線は消す */
	}
 /* セクション上下の余白を半分くらいに減らす */
	.content-section {
		padding-top: 3rem !important;
		padding-bottom: 3rem !important;
	}
	.cta {padding: 5rem 0 !important; /* 15remから5rem（約80px）へ縮小 */}
	.mb-70 {margin-bottom: 30px !important;}
	.mb-100 {margin-bottom: 40px !important;}
/* フッターの上の余白も少し詰める */
	footer.footer {padding-top: 2rem !important;}
}