/*================================================================
Chrome/Firefox/Edgeなど、各ブラウザはそれぞれデフォルトで効くCSSを持っています。
何もしないと見え方が微妙に変わるので、デフォルトのCSSをリセットして
ブラウザごとの表示の差異をなくすために書くのが「リセットCSS」です。
================================================================*/

*,
::before,
::after {
	box-sizing: border-box;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
dl,
li,
dt,
dd,
p,
div,
span,
img,
a,
table,
tr,
th,
td {
	border: 0;
	font-size: 100%;
	font-weight: normal;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}

header,
footer,
nav,
section,
article,
main,
aside,
figure,
figcaption {
	display: block;
}

ol,
ul {
	list-style: none;
	list-style-type: none;
}

img {
	height: auto;
	max-width: 100%;
	vertical-align: middle;
}

a {
	color: inherit;
	text-decoration: none;
}

body {
	background: #4a4a4a; /*
   * 変数をカンマで繋ぎ、最後に sans-serif を指定する
   */
	font-family: "Font Awesome 5 Free", "Lato", "Meiryo", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}

body.is-fixed {
	overflow: hidden;
}

.l-inner {
	background-color: #225670;
	max-width: 100%; /*-----------------------
  // pc
  -----------------------*/
}

.l-content {
	background-color: #225670; /*-----------------------
  // pc
  -----------------------*/
}

.l-content__inner {
	background-color: #225670; /*-----------------------
  // pc
  -----------------------*/
}

.l-content__header {
	background-color: #225670;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 100; /*-----------------------
  // pc
  -----------------------*/
}

.l-header-container {
	background-color: #225670;
	position: relative;
}

.l-content__main {
	background-color: #225670;
	padding-top: 100px; /*-----------------------
  // pc
  -----------------------*/
}

.l-content__footer {
	background-color: #fafafa;
}

.l-inner-subpage {
	background-color: #fff;
	max-width: 100%; /*-----------------------
  // pc
  -----------------------*/
}

.l-fade-in {
	opacity: 0;
	transition: opacity 3s ease; /*-----------------------
  // pc
  -----------------------*/
}

.l-fade-in.is-in-view {
	opacity: 1;
}

.c-to-widget-title {
	align-items: center;
	display: flex;
	gap: 24px;
	margin: 0 auto;
	padding: 6px 10px 6px 30px;
	width: 210px;
}

.c-nav-button { /* --- 1. 通常時のスタイル --- */
	background-color: transparent;
	border: 2px solid transparent;
	color: #fff;
	transition: all 0.3s ease; /* --- 2. ホバー時のスタイル --- */ /* --- 3. アクティブ（クリック中）のスタイル --- */
}

.c-nav-button:active {
	background-color: #fff;
	border-color: #fff;
	color: #4a4a4a;
}

.c-nav-button__icon-path {
	fill: #fff;
}

.c-nav-button__icon-path-reverse {
	fill: #000;
}

.c-nav-button-icon-path-x {
	gap: 24px;
	height: auto;
	width: 25px;
}

.c-to-widget-title-text-black {
	background-color: #fff;
	color: #000;
}

.c-to-widget-title-white {
	align-items: center;
	background-color: #fff;
	display: flex;
	gap: 24px;
	margin: 0 auto;
	padding: 6px 10px 6px 30px;
	width: 210px;
}

.c-to-widget-title-black {
	align-items: center;
	border: 1px solid #fff;
	display: flex;
	gap: 24px;
	margin: 0 auto;
	padding: 6px 10px 6px 30px;
	width: 210px;
}

.c-section {
	padding: 48px 0;
}

.c-section.service {
	background-color: #fff;
	padding-top: 0;
}

.c-section.works {
	background-color: #fafafa;
	padding-top: 0;
}

.c-section.about {
	background-color: #fff;
	padding-top: 0;
}

.c-section.flow {
	background-color: #fafafa;
	padding-top: 0;
}

.c-section.massage {
	background-color: #fff;
	padding-top: 0;
}

.c-section.page-bottom {
	padding: 0;
}

.c-section.contact {
	background-color: #fafafa;
	padding-block: 94px 130px;
}

.c-section.x {
	background-color: #4a4a4a;
	padding: 40px;
}

.c-section.page-bottom { /*-----------------------
  // pc
  -----------------------*/
}

.c-section__inner {
	padding: 30px 32px 0px 32px; /*-----------------------
  // pc
  -----------------------*/
}

.c-section__head {
	color: #333;
	display: flex;
	flex-direction: column;
	margin-bottom: 32px;
	padding-top: 48px; /*-----------------------
  // pc
  -----------------------*/
}

.c-section__head.page-bottom {
	align-items: center; /* 垂直方向の中央揃え */
	color: white;
	justify-content: center; /* 水平方向の中央揃え */
	padding-top: 0;
}

.c-section__head-main {
	font-family: "Oswald", "Noto Sans JP", sans-serif;
	font-size: 30px;
	font-weight: bold;
	letter-spacing: 0.1em; /*-----------------------
  // pc
  -----------------------*/
}

.c-section__head-sub {
	font-size: 11px;
}

.c-section__contents {
	margin-top: 40px;
}

.c-section__lead-text {
	color: #333;
	font-size: 16px;
	line-height: 1.6;
}

.c-service__list { /*-----------------------
  // pc
  -----------------------*/
}

.c-service__item + .c-service__item {
	margin-top: 40px; /*-----------------------
  // pc
  -----------------------*/
}

.c-works__list { /*-----------------------
  // pc
  -----------------------*/
}

.c-works__item + .c-works__item {
	margin-top: 40px; /*-----------------------
  // pc
  -----------------------*/
}

.c-about__container { /*-----------------------
  // pc
  -----------------------*/
}

.c-flow__list {
	margin-top: 64px; /*-----------------------
  // pc
  -----------------------*/
}

.c-flow__item {
	border: 1px solid black;
	padding: 46px 16px 24px;
	position: relative;
}

.c-flow__item + .c-flow__item {
	margin-top: 40px; /*-----------------------
  // pc
  -----------------------*/
}

.c-flow__item-number {
	align-items: center;
	background-color: #4a4a4a;
	color: #fff;
	display: flex;
	font-size: 24px;
	height: 40px;
	justify-content: center;
	left: 50%;
	position: absolute;
	top: -24px;
	transform: translateX(-50%);
	width: 40px;
}

.c-massage__container { /*-----------------------
  // pc
  -----------------------*/
}

.c-nav-button-x {
	align-items: center; /* --- 1. 通常時のスタイル --- */
	background-color: transparent;
	border: 2px solid transparent;
	color: #fff;
	display: flex;
	transition: all 0.3s ease; /* --- 2. ホバー時のスタイル --- */ /* --- 3. アクティブ（クリック中）のスタイル --- */
}

.c-nav-button-x:hover {
	border-color: #fff;
}

.c-nav-button-x:active {
	background-color: #fff;
	border-color: #fff;
	color: #4a4a4a;
}

.c-contact__text-box {
	font-size: 40px;
	font-weight: 700;
	line-height: normal;
	margin-bottom: 72px;
}

.c-contact__container { /*-----------------------
  // pc
  -----------------------*/
}

.c-contact__title {
	font-size: 40px;
	font-weight: 700;
	line-height: normal;
	margin-bottom: 72px;
}

.c-contact__form {
	display: flex;
	flex-direction: column;
	row-gap: 30px;
}

.c-contact__row {
	display: grid;
	grid-template-columns: 212px 1fr;
	-moz-column-gap: 30px;
	align-items: center;
	column-gap: 30px;
}

.c-contact__row.--aifs {
	align-items: flex-start;
}

.c-contact__head {
	font-size: 20px;
	line-height: normal;
}

.c-contact__head span.--must {
	display: inline-block;
	position: relative;
}

.c-contact__head span.--must::after {
	background: #AEEFF8;
	border-radius: 4px;
	content: "必須";
	display: inline-block;
	font-size: 12px;
	left: calc(100% + 14px);
	line-height: normal;
	padding: 1px 7px;
	position: absolute;
	top: calc(50% + 1px);
	translate: 0 -50%;
	white-space: nowrap;
}

select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.c-contact__select-wrap {
	position: relative;
}

.c-contact__select-wrap svg {
	height: auto;
	pointer-events: none;
	position: absolute;
	right: 10.69px;
	top: calc(50% + 2px);
	translate: 0 -50%;
	width: 17.313px;
}

input[type=checkbox] {
	height: 1px;
	position: absolute;
	width: 1px;
	clip: rect(0, 0, 0, 0);
}

input[type=checkbox]:checked + span::after {
	opacity: 1;
}

.c-contact__data-checkbox {
	display: grid;
	gap: 13px 10px;
	grid-template-columns: repeat(2, 1fr);
}

.c-contact__data-checkbox span {
	display: inline-block;
	font-size: 16px;
	line-height: normal;
	padding-left: 30px;
	position: relative;
}

.c-contact__data-checkbox span::before {
	border: 1px solid #000;
	content: "";
	height: 20px;
	left: 0;
	position: absolute;
	top: 2.5px;
	width: 20px;
}

.c-contact__data-checkbox span::after {
	border-bottom: 1.5px solid #000;
	border-right: 1.5px solid #000;
	content: "";
	height: 12px;
	left: 7px;
	opacity: 0;
	position: absolute;
	rotate: 45deg;
	top: 4.5px;
	transition: opacity 0.3s ease;
	width: 6px;
}

input[type=radio] {
	height: 1px;
	position: absolute;
	width: 1px;
	clip: rect(0, 0, 0, 0);
}

input[type=radio]:checked + span {
	background: #000;
	color: #fff;
}

.c-contact__data-radio {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.c-contact__data-radio span {
	border: 1px solid #000;
	display: block;
	font-size: 16px;
	line-height: normal;
	padding: 12px 10px;
	text-align: center;
}

.c-contact__data-radio label:not(:last-of-type) span {
	border-right: none;
}

input[type=submit],
input[type=button] {
	border-radius: 0px;
	-webkit-box-sizing: content-box;
	-webkit-appearance: button;
	-moz-appearance: button;
	appearance: button;
	background: transparent;
	border: none;
	box-sizing: border-box;
	cursor: pointer;
}

input[type=submit]::-webkit-search-decoration,
input[type=button]::-webkit-search-decoration {
	display: none;
}

.row.jc-center {
	justify-content: center;
}

.c-contact__submit {
	text-align: center;
}

.c-contact__submit input[type=submit] {
	background: #000;
	color: #fff;
	display: inline-block;
	font-size: 16px;
	line-height: normal;
	padding: 11px 63px;
}

.c-contact__acceptance {
	grid-template-columns: 1fr;
	text-align: center;
}

.c-contact__acceptance a {
	color: #000;
	font-weight: 700;
}

.c-contact__error-message {
	color: red;
	font-size: 16px;
	font-weight: 700;
	margin-top: 6px;
}

.c-link-underline {
	align-items: center; /* 垂直方向の中央揃え */
	background-color: #fafafa;
	color: #000;
	display: flex;
	justify-content: center; /* 水平方向の中央揃え */
	padding: 30px 0px 30px 0px;
	text-decoration: underline;
}

.c-link-underline:hover {
	text-decoration: none;
}

.c-to-top-scroll-button {
	bottom: 20px; /* ② 初期状態（非表示） */
	opacity: 0; /* --- ベースのスタイル（PC/SP共通） --- */ /* ① 位置を画面右下に固定 */
	position: fixed;
	right: 270px;
	transform: translateY(20px); /* ③ アニメーションの設定 */
	transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s ease;
	visibility: hidden;
	z-index: 1000; /* ④ jQueryで付与するクラス（表示状態） */ /*-----------------------
  // pc
  -----------------------*/
}

.c-to-top-scroll-button.is-visible {
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
}

.c-to-top-scroll-button-text {
	display: none; /*-----------------------
  // pc
  -----------------------*/
}

.c-to-contact-scroll-button {
	bottom: 20px; /* ② 初期状態（非表示） */
	opacity: 0; /* --- ベースのスタイル（PC/SP共通） --- */ /* ① 位置を画面右下に固定 */
	position: fixed;
	right: 350px;
	transform: translateY(20px); /* ③ アニメーションの設定 */
	transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s ease;
	visibility: hidden;
	z-index: 1000; /* ④ jQueryで付与するクラス（表示状態） */ /*-----------------------
  // pc
  -----------------------*/
}

.c-to-contact-scroll-button.is-visible {
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
}

.c-to-contact-scroll-button-text {
	display: none; /*-----------------------
  // pc
  -----------------------*/
}

.c-privacy__text {
	align-items: center; /* 垂直方向の中央揃え */
	background-color: #fafafa;
	color: #000;
	display: flex;
	justify-content: center; /* 水平方向の中央揃え */
	padding: 30px 0px 30px 0px;
}

.p-subpage-section {
	background-color: #fff;
	padding-bottom: 80px;
	padding-top: 80px;
}

.p-subpage-section__title {
	font-size: 2.4rem;
	font-weight: bold;
	margin-bottom: 40px;
	text-align: center;
}

.p-privacy-policy__content {
	line-height: 1.8;
	margin-left: auto;
	margin-right: auto;
	max-width: 800px;
}

.p-privacy-policy__content h2 {
	border-bottom: 1px solid #ccc;
	font-size: 1.8rem;
	font-weight: bold;
	margin-bottom: 16px;
	margin-top: 40px;
	padding-bottom: 8px;
}

.p-privacy-policy__content p {
	margin-bottom: 1em;
}

.p-privacy-policy__content ol {
	list-style-type: decimal;
	margin-left: 20px;
	padding-left: 1em;
}

.p-privacy-policy__content ol li {
	margin-bottom: 0.5em;
}

.p-privacy-policy__date {
	margin-top: 60px;
	text-align: right;
}

.l-header-subpage {
	border-bottom: 1px solid #eee;
	padding: 20px 0;
}

.p-header__logo-subpage {
	color: #333;
	font-size: 1.8rem;
	font-weight: bold;
	text-decoration: none;
}

.p-header__logo {
	background-color: #225670; /* --- 1. 通常時のスタイル --- */
	background-color: transparent;
	border: 2px solid transparent;
	color: #fff;
	color: #fff;
	display: inline-block;
	font-size: 30px;
	padding: 14px 24px;
	transition: all 0.3s ease; /* --- 2. ホバー時のスタイル --- */ /* --- 3. アクティブ（クリック中）のスタイル --- */ /*-----------------------
  // pc
  -----------------------*/
}

.p-header__logo:hover {
	border-color: #fff;
}

.p-header__logo:active {
	background-color: #fff;
	border-color: #fff;
	color: #4a4a4a;
}

.p-header__contents {
	display: none; /*-----------------------
  // pc
  -----------------------*/
}

.p-header__menu-button {
	background-color: transparent;
	background-image: url(../../../../complete/img/bg_menu.png) center center no-repeat;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-size: contain;
	border: none;
	color: transparent;
	cursor: pointer;
	height: 40px;
	position: absolute;
	right: 24px;
	top: 24px;
	width: 40px; /*-----------------------
  // pc
  -----------------------*/
}

.p-header__menu-button.is-checked {
	background-image: url(../../../../complete/img/bg_menu-close.png) center center no-repeat;
	background-size: 100% auto;
}

/* SCSS (Sass) で書く場合 */

.p-header__menu-button {
	background-color: transparent;
	border: none;
	cursor: pointer;
	padding: 0; /* .is-checked クラスがボタンについた時のスタイル */
}

.p-header__menu-button .p-hamburger-icon { /* 通常時：ハンバーガー画像 */
	background-image: url("../img/bg_menu.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	display: block;
	height: 40px; /* 画像のサイズに合わせて調整 */
	width: 40px; /* 画像のサイズに合わせて調整 */
}

.p-header__menu-button.is-checked .p-hamburger-icon { /* クリック後：閉じる画像に切り替え */
	background-image: url("../img/bg_menu-close.png");
}

.p-header__nav {
	border-top: 1px solid #fff;
	height: calc(100vh - 88px); /*-----------------------
  // pc
  -----------------------*/
}

.p-header__nav-item { /* --- 1. 通常時のスタイル --- */
	background-color: transparent;
	border: 2px solid transparent;
	color: #fff;
	margin-top: 30px;
	transition: all 0.3s ease; /* --- 2. ホバー時のスタイル --- */ /* --- 3. アクティブ（クリック中）のスタイル --- */
}

.p-header__nav-item:hover {
	border-color: #fff;
}

.p-header__nav-item:active {
	background-color: #fff;
	border-color: #fff;
	color: #4a4a4a;
}

.p-fv {
	position: relative;
}

.p-fv__contents {
	background: url(../img/sp/bg_fv.png) center center no-repeat;
	background-size: 100% auto;
	bottom: 26px;
	height: 209px;
	left: 0;
	padding: 32px;
	position: absolute;
	width: 100%;
}

.p-fv__heading {
	color: #000;
}

.p-fv__heading-main {
	display: block;
	font-size: 40px;
	letter-spacing: 0.1em;
}

.p-fv__heading-sub {
	display: block;
	font-size: 14px;
	margin-top: 12px;
}

.p-service__item-img { /* ③ 垂直方向の中央寄せ */
	align-items: center; /* ① Flexコンテナ化 */
	display: flex;
	height: 150px; /* ② 水平方向の中央寄せ */
	justify-content: center; /* 上下のマージンを調整 */
	margin: 20px auto 14px; /* 上20px, 左右auto, 下14px */ /* 画像がはみ出さないように */
	overflow: hidden; /* ④ 固定の幅と高さを指定（これが一番重要！）*/ /* 例として、幅200px, 高さ150pxの箱にする */
	width: 200px; /* margin: ... auto; でこの箱自体も中央に寄せておく */ /* 中のimgタグへのスタイル */ /*-----------------------
  // pc
  -----------------------*/
}

.p-service__item-img img {
	max-height: 80%;
	max-width: 80%;
}

.p-service__item-name {
	color: #333;
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 10px;
	text-align: center;
}

.p-service__item-text {
	color: #333;
	font-size: 14px;
	line-height: 1.6;
}

.p-works__item-img {
	align-items: center;
	box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.15);
	display: flex;
	font-size: 30px;
	font-weight: bold;
	height: 165px;
	justify-content: center;
	margin-bottom: 12px;
	text-align: center;
}

.p-works__item-name {
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 6px;
}

.p-works__item-link {
	font-size: 14px;
	text-decoration: underline;
}

.p-about__image {
	box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.15);
	margin-bottom: 12px;
}

.p-about__text-contents {
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 6px;
}

.p-flow__item-image {
	align-items: center; /* --- 2. コンテナの中の画像を上下左右中央寄せ --- */
	display: flex;
	height: 100px;
	justify-content: center;
	margin-bottom: 24px; /* 元のmargin-bottomは維持 */ /* --- 1. コンテナ自体を中央寄せ --- */ /* 左右のmarginをautoにすることで、親要素の中で中央に配置される */
	margin-left: auto;
	margin-right: auto; /* --- 3. 固定のサイズを指定 --- */ /* デザインに合わせて円形にするため、幅と高さを同じにするのが一般的 */
	width: 100px; /* （お好みで）円形にする場合は以下を追加 */ /* 中のimgがはみ出さないように */
}

.p-flow__item-image img {
	max-height: 100%;
	max-width: 100%;
}

.p-flow__item-name {
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 10px;
	text-align: center;
}

.p-flow__item-text {
	color: #333;
	font-size: 14px;
	line-height: 1.6;
}

.p-massage__image {
	box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.15);
	margin-bottom: 12px;
}

.p-massage__text-contents {
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 6px;
}

.p-footer__copy {
	align-items: center; /* 垂直方向の中央揃え */
	background-color: #fafafa;
	color: #000;
	display: flex;
	justify-content: center; /* 水平方向の中央揃え */
	padding: 10px 0px 10px 0px;
}

.p-contact__inner {
	margin-inline: auto;
	padding-inline: 20px;
	width: min(729px, 100%);
}

.p-contact__inner input[type=text],
.p-contact__inner input[type=email],
.p-contact__inner select,
.p-contact__inner textarea {
	background: #F0F0F0;
	border: none;
	border-radius: 0;
	font-size: 16px;
	line-height: normal;
	padding: 12px 24px;
	width: 100%;
}

.p-contact__inner input[type=text]::-moz-placeholder,
.p-contact__inner input[type=email]::-moz-placeholder,
.p-contact__inner select::-moz-placeholder,
.p-contact__inner textarea::-moz-placeholder {
	color: #5A5A5A;
}

.p-contact__inner input[type=text]::placeholder,
.p-contact__inner input[type=email]::placeholder,
.p-contact__inner select::placeholder,
.p-contact__inner textarea::placeholder {
	color: #5A5A5A;
}

.p-contact__inner textarea {
	height: 243px;
	resize: vertical;
}

.p-about__jpg { /* ③ オブジェクトがインライン要素として扱われるのを防ぐ */ /*    予期せぬ隙間などをなくす効果がある */
	display: block; /* ② 高さは自動調整して、縦横比を維持する */
	height: auto; /* ① 横幅を親要素の100%にする */
	width: 100%; /* min-width: 200px; は削除、または意図に合わせて変更 */ /* もし「どうしても200pxは確保したいが、それより狭い画面でははみ出ても良い」
     という意図なら残しますが、通常レスポンシブでは削除します。 */
}

.p-massage__jpg { /* ③ オブジェクトがインライン要素として扱われるのを防ぐ */ /*    予期せぬ隙間などをなくす効果がある */
	display: block; /* ② 高さは自動調整して、縦横比を維持する */
	height: auto; /* ① 横幅を親要素の100%にする */
	width: 100%; /* min-width: 200px; は削除、または意図に合わせて変更 */ /* もし「どうしても200pxは確保したいが、それより狭い画面でははみ出ても良い」
     という意図なら残しますが、通常レスポンシブでは削除します。 */
}

.p-contact__image {
	box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.15);
	margin-bottom: 12px;
}

.p-contact__jpg { /* ③ オブジェクトがインライン要素として扱われるのを防ぐ */ /*    予期せぬ隙間などをなくす効果がある */
	display: block; /* ② 高さは自動調整して、縦横比を維持する */
	height: auto; /* ① 横幅を親要素の100%にする */
	width: 100%; /* min-width: 200px; は削除、または意図に合わせて変更 */ /* もし「どうしても200pxは確保したいが、それより狭い画面でははみ出ても良い」
     という意図なら残しますが、通常レスポンシブでは削除します。 */
}

.p-contact__jpg {
	display: block;
	height: auto; /* ↓ここから追加↓ */ /* 枠線のガタつきを防ぐための準備（outlineを使うなら不要ですが、borderを使う場合のテクニック） */
	outline: 3px solid transparent;
	outline-offset: -3px; /* 枠線を画像の内側に表示させる */ /* 変化を滑らかにするための設定（0.3秒かけて変化） */
	transition: outline-color 0.3s ease;
	width: 100%;
}

/* ホバーした時のスタイル */

.p-contact__jpg:hover {
	cursor: pointer; /* 枠線の色だけを変更する */
	outline-color: rgb(103, 139, 193);
}

.p-contact__text-contents {
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 6px;
}

.u-separate {
	margin-bottom: 24px;
	margin-top: 24px;
}

@media (any-hover: hover) {

.c-nav-button .text:hover {
	border-color: #fff;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 1s ease;
}

.c-contact__select-wrap:hover {
	cursor: pointer;
}

}

@media screen and (min-width: 1280px) {

.l-inner {
	display: flex;
	flex-direction: row-reverse;
}

.l-content {
	display: flex;
	position: relative;
}

.l-content__inner {
	display: flex;
}

.l-content__header {
	flex-basis: 20.8%;
	position: relative;
	position: sticky;
	top: 50px;
}

.l-content__main {
	padding-top: 0;
}

.l-inner-subpage {
	display: flex;
	flex-direction: row-reverse;
}

.c-section.page-bottom {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

.c-section__inner {
	margin: 0 auto;
	max-width: 944px;
}

.c-section__head {
	margin-bottom: 24px;
}

.c-section__head-main {
	font-size: 40px;
}

.c-service__list {
	display: grid;
	gap: 8%;
	grid-template-columns: repeat(3, 1fr);
}

.c-service__item + .c-service__item {
	margin-top: 0;
}

.c-works__list {
	display: grid;
	gap: 8%;
	grid-template-columns: repeat(3, 1fr);
}

.c-works__item + .c-works__item {
	margin-top: 0;
}

.c-about__container {
	display: flex;
	flex-direction: row-reverse;
	gap: 40px;
}

.c-flow__list {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(4, 1fr);
}

.c-flow__item + .c-flow__item {
	margin-top: 0;
}

.c-massage__container {
	display: flex;
	flex-direction: row-reverse;
	gap: 40px;
}

.c-contact__container {
	display: flex;
	flex-direction: row-reverse;
	gap: 40px;
}

.c-to-top-scroll-button {
	align-items: center;
	background-color: #225670; /* ③ 円の枠線と背景色 */
	border: 2px solid #fff; /* ② 正円にする */
	border-radius: 50%;
	color: #fff; /* ⑤ display: flex; はここに残す */ /*    (jQueryでクラスが付いても、このdisplayが適用される) */
	display: flex;
	height: 70px; /* ④ 中のテキストを上下左右中央に配置するためのFlexbox設定 */
	justify-content: center; /* ⑤ aタグのデフォルトスタイルをリセット */
	text-decoration: none; /* ① 円の大きさを決める */
	width: 70px; /* ⑥ ホバー時のアニメーション（お好みで） */ /* ---  アクティブ（クリック中）のスタイル --- */
}

.c-to-top-scroll-button:hover {
	border-color: rgb(103, 139, 193);
}

.c-to-top-scroll-button:active {
	background-color: #225670;
	border-color: #225670;
	color: #a98c5f;
}

.c-to-top-scroll-button-text {
	color: #fff;
	display: block;
	font-size: 20px;
	font-weight: bold;
}

.c-to-contact-scroll-button {
	align-items: center;
	background-color: #225670; /* ③ 円の枠線と背景色 */
	border: 2px solid #fff; /* ② 正円にする */
	border-radius: 5%;
	color: #fff; /* ⑤ display: flex; はここに残す */ /*    (jQueryでクラスが付いても、このdisplayが適用される) */
	display: flex;
	height: 70px; /* ④ 中のテキストを上下左右中央に配置するためのFlexbox設定 */
	justify-content: center; /* ⑤ aタグのデフォルトスタイルをリセット */
	text-decoration: none; /* ① 円の大きさを決める */
	width: 100px; /* ⑥ ホバー時のアニメーション（お好みで） */ /* ---  アクティブ（クリック中）のスタイル --- */
}

.c-to-contact-scroll-button:hover {
	border-color: rgb(103, 139, 193);
}

.c-to-contact-scroll-button:active {
	background-color: #225670;
	border-color: #225670;
	color: #a98c5f;
}

.c-to-contact-scroll-button-text {
	color: #fff;
	display: block;
	font-size: 15px;
	font-weight: bold;
}

.p-header__logo {
	align-items: center;
	display: flex;
	justify-content: center;
}

.p-header__contents {
	border: none;
	display: flex;
	padding: 50px 20px;
}

.p-header__menu-button {
	display: none;
}

.p-header__nav {
	border: none;
}

.p-fv__contents {
	background: url(../img/bg_fv.png) center center no-repeat;
	background-size: 100% auto;
	bottom: 100px;
	height: 174px;
	left: 0;
	padding-left: 96px;
	padding-top: 24px;
	width: 650px;
}

.p-service__item-img {
	height: 180px; /* PCではパディングをなくし、サイズを調整するなど */
	padding: 0;
	width: 250px; /* 中のimgタグへのスタイル */
}

.p-service__item-img img {
	max-height: 100%;
	max-width: 100%;
}

}

@media screen and (max-width: 819px) {

.c-to-top-scroll-button {
	height: 50px;
	width: 50px;
}

.c-to-contact-scroll-button {
	height: 50px;
	width: 50px;
}

}

@media screen and (max-width: 630px) {

.c-section.contact {
	max-width: 1280px;
}

.c-contact__row {
	align-items: center;
	display: flex;
	display: flex;
	flex-direction: column;
}

.c-contact__row.--aifs {
	align-items: center;
	display: flex;
	display: flex;
	flex-direction: column;
}

.c-contact__head {
	font-size: 14px;
}

.c-contact__form {
	font-size: 14px;
}

.c-contact__data-checkbox span {
	font-size: 14px;
}

.c-contact__data-radio span {
	font-size: 14px;
}

.p-contact__inner {
	padding-inline: 40px;
}

}