@charset "UTF-8";
/* CSS Document */
/*記述例*/
section {
		/*変数呼び出し方*/
		padding: var(--sec-padding);
}
/*==========================================================================
ヘッダー
============================================================================*/
header {
		height: 50px;
}
.header {
		width: 100%;
		max-width: 500px;
		box-shadow: 0px 4px 4px -1px rgba(0, 0, 0, 0.23);
		position: fixed;
		z-index: 1000;
		background: #fff;
}
.header__inner {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		z-index: 10;
}
.header__logo {
		display: block;
		font-size: 0;
		width: 125px;
		height: 15px;
		margin-left: 15px;
		margin-top: -5%;
}
.header__logo img {
		width: 100%;
		height: auto;
}
@media screen and (min-width:500px) {
		header {
				height: 50px;
		}
}
/*==========================================================================
ハンバーガーメニュー
============================================================================*/
.container {
		width: 100%;
		overflow: hidden;
		height: 50px;
}
.header__menu {
		position: fixed;
		z-index: 5;
		top: 50px;
		width: 100%;
		max-width: 500px;
		/*		height: calc(100vh - 50px);*/
		background: #fff;
		opacity: 0;
		visibility: hidden;
		transition: opacity .2s ease;
}
.header__inner.active .header__menu {
		opacity: 1;
		visibility: visible;
		opacity: 0.95;
}
.menu__list {
		border-top: 1px solid #d7d7d7;
}
.menu__item {
		border-bottom: 1px solid #d7d7d7;
}
.menu__link {
		display: block;
		padding: 13px 25px;
		color: var(--sub-color-end);
}
.header__menu-btn {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: end;
		width: 50px;
		height: 50px;
		padding: 5px;
		cursor: pointer;
}
.header__menu-btn span:nth-child(-n+3) {
		position: absolute;
		display: block;
		width: 30px;
		height: 2px;
		background: var(--sub-color-end);
}
.header__menu-btn span:nth-child(1) {
		top: 10px;
		transition: all .2s ease;
}
.header__inner.active .header__menu-btn span:nth-child(1) {
		top: 20px;
		transform: rotate(45deg);
}
.header__menu-btn span:nth-child(2) {
		top: 18px;
		transition: opacity .2s ease;
}
.header__inner.active .header__menu-btn span:nth-child(2) {
		opacity: 0;
}
.header__menu-btn span:nth-child(3) {
		top: 26px;
		transition: all .2s ease;
}
.header__inner.active .header__menu-btn span:nth-child(3) {
		top: 20px;
		transform: rotate(-45deg);
}
.header__menu-btn span:nth-child(4) {
		font-size: 10px;
		color: var(--sub-color-end);
}
/*==========================================================================
共通
============================================================================*/
.sectionRead {
		margin-bottom: 2rem;
}
.subTtl {
		margin: auto;
		margin-bottom: 0.3rem;
}
/* フェードアップ */
.fadein {
    opacity: 0;
    transform: translateY(0);
    transition: opacity 1.3s, transform 1.3s;
}
.fadein-bottom {
    transform: translateY(30px);
}
.scrollin {
    opacity: 1;
    transform: translateY(0);
}

section h2 {
		font-size: 0.55rem;
		margin-bottom: 1.5rem;
}
/* アニメーション前のスタイル */
.js-marker {
		display: inline;
		position: relative;
		background-image: linear-gradient(90deg, #ffff66, #ffff66); /* 単色の場合は同じ色、グラデーションさせる場合は別々の色 */
		background-repeat: no-repeat;
		background-position: bottom left;
		background-size: 0 50%; /* '30%'の部分にマーカーの太さを記入 */
		transition: all 2.5s ease-in-out; /* マーカーを引く速度を調整 */
		font-weight: bold; /* ついでに太字にしたい場合 */
}
/* アニメーション発火時 */
.js-marker.inview {
		background-size: 100% 50%; /* '30%'の部分は上で設定した太さに合わせる */
}
/*==========================================================================
MVー
============================================================================*/
section#mv {
		color: #fff;
		position: relative;
		text-align: start;
		padding-top: 18%;
		overflow: hidden;
		padding: 5% 0 0 0;
}
.txtArea {
		position: absolute;
		top: 40%;
		padding: 0 0 0 5%;
}
section {
		text-align: center;
}
section p {
		text-align: justify;
		font-feature-settings: "palt";
}
h1 {
		font-size: calc((20 / 0.625) * 1px);
		font-weight: 600;
		text-shadow: 2px 2px 2px #001D4B;
		margin-bottom: 0.3rem;
		line-height: 1.4;
}
@media screen and (min-width:500px) {
		h1 {
				font-size: calc((25 / 0.625) * 1px);
		}
}
#mv p {
		background: linear-gradient(90deg, #18A0FB, #009FFC);
		display: inline-block;
		padding: 0rem 0.3rem;
		border-radius: 1rem;
		margin-bottom: 0.2rem;
		font-weight: 600;
		font-size: calc((8.4/ 0.625) * 1px);
}
@media screen and (min-width:500px) {
		#mv p {
				font-size: calc((10/ 0.625) * 1px);
				margin-bottom: 0.4rem;
		}
}
/* MVズームアップ*/
.zoomin.is-animated {
		animation: zoomIn 8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes zoomIn {
		0% {
				transform: scale(1);
		}
		100% {
				transform: scale(1.1);
		}
}
/*==========================================================================
私たちの理念とビジョン
============================================================================*/
section#vision {
		background: url("../image/2505/bg-vision.webp");
		background-size: cover;
		color: #ffffff;
		position: relative;
	padding-top: 13%;
}
iframe {
    margin-bottom: 15%;
}
#vision img.subTtl {
		width: 35.8%;
}
#vision .readTxt {
		font-size: 0.8rem;
		font-weight: 600;
		letter-spacing: 0.15em;
}
#vision .bgTop {
		position: absolute;
		top: 0;
		left: 0;
}
#vision .bgBottom {
		position: absolute;
		bottom: 0;
		left: 0;
}
#vision .subTxt {
		text-align: center;
		line-height: 2.3em;
		font-size: 0.95em;
		margin-top: 3.5em;
}
@media screen and (min-width:500px) {
		iframe {
   width: 100%;
			height: 250px;
}
}
/*==========================================================================
Reboneについてー
============================================================================*/
section#aboutRebone {
		background: url("../image/2504/bg_message.webp");
		background-size: contain;
		background-repeat: no-repeat;
		padding-bottom: 0;
}
#aboutRebone img.subTtl {
		width: 72.8%;
}
#aboutRebone h3 {
		color: var(--sub-color-end);
		font-size: 1rem;
		font-weight: 600;
		letter-spacing: 0.1em;
		margin: 15% 0 10%;
		position: relative;
}
#aboutRebone .subTtl1::before {
		content: "";
		display: inline-block;
		width: 80px;
		height: 80px;
		background-image: url('../image/2505/ic_map.png');
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		position: absolute;
		top: -50%;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		z-index: -1;
}
#aboutRebone .subTtl2::before {
		content: "";
		display: inline-block;
		width: 80px;
		height: 80px;
		background-image: url('../image/2505/ic_friends.png');
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		position: absolute;
		top: -50%;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		z-index: -1;
}
.voice_bottom_images_wrapper--sp_inner img {
		width: 50%;
}
@media screen and (min-width:500px) {
		section#about {
				padding: 4rem 6%;
		}
}
/*==========================================================================
メリット
============================================================================*/
section#merit {
		background: url("../image/2504/bg_message.webp");
		background-size: contain;
		background-repeat: no-repeat;
}
#merit img.subTtl {
		width: 27.5%;
}
#merit ul li {
		margin-bottom: 1.5rem;
}
.meritThumbnail {
		position: relative;
		margin-bottom: 0.3rem;
}
.meritThumbnailTxt {
		position: absolute;
		bottom: 10%;
		left: 8%;
}
.meritThumbnailTxt img {
		width: 40%;
		margin-left: 0.5rem;
		margin-bottom: 0.2rem;
}
.meritThumbnail h3 {
		background-color: #fff;
		font-size: 0.8rem;
		text-align: start;
		padding-right: 0.5rem;
}
.space {
		margin-bottom: 0.5rem;
}
.merit2Ttl {
		padding-right: 0.5rem;
}
/*==========================================================================
セラピストの仕事ー
============================================================================*/
section#aboutJob {
		background: url("../image/2504/bg_message.webp");
		background-size: contain;
		background-repeat: no-repeat;
		padding: 0;
}
section#aboutJob .inner {
		padding: 4em 5.5%;
}
#aboutJob h3 {
		color: var(--sub-color-end);
		font-size: 1rem;
		font-weight: 600;
		letter-spacing: 0.1em;
		margin: 15% 0 10%;
		position: relative;
}
#aboutJob .subTtl3::before {
		content: "";
		display: inline-block;
		width: 80px;
		height: 80px;
		background-image: url('../image/2505/ic_hand.png');
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		position: absolute;
		top: -50%;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		z-index: -1;
}
#aboutJob .subTtl4::before {
		content: "";
		display: inline-block;
		width: 90px;
		height: 90px;
		background-image: url('../image/2505/ic_clock.png');
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		position: absolute;
		top: -85%;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		z-index: -1;
}
#aboutJob .sectionRead {
		margin-top: 0.3rem;
}
#aboutJob img.subTtl {
		width: 53.5%;
}
#aboutJob .bottomInner {
		background-color: var(--accent-color);
		color: #ffffff;
		position: relative;
		padding: 1em 5.5%;
}
.bottomInner p {
		width: 75%;
		margin-top: 2rem;
}
#aboutJob .messageImg {
		position: absolute;
		top: 15%;
		width: 60%;
}
#aboutJob .jobMessage {
		position: absolute;
		bottom: -13%;
		right: 0;
		width: 43%;
		max-width: 180px;
}
#aboutJob .scheduleInner {
		padding: 2em 5.5% 4em;
		background-color: rgba(0, 159, 252, 0.2);
}
#aboutJob .scheduleInner h3 {
		margin: 10% 0 20%;
}
@media screen and (min-width:500px) {
		.bottomInner p {
				margin-top: 2.5rem;
		}
}
/*==========================================================================
先輩写真の声
============================================================================*/
section#voice {
		background: url("../image/2504/bg_message.webp");
		background-size: contain;
		background-repeat: no-repeat;
		padding-bottom: 0.5rem;
}
#voice img.subTtl {
		width: 31.5%;
}
#voice li {
		margin-bottom: 4rem;
}
.accordion {
		position: relative;
}
/* ボタン */
.accordion-btn {
		color: #18A0FB;
		background-color: #fff;
		border: 1.5px solid #18A0FB;
		bottom: -40px;
		cursor: pointer;
		display: inline-block;
		font-size: 14px;
		left: 0;
		margin: auto;
		padding: 1px 10px;
		position: absolute;
		right: 0;
		text-align: center;
		transition: all .2s;
		width: fit-content;
		z-index: 1;
		border-radius: 20px;
}
/* 続きを読むボタンの表記 */
.accordion-btn::after {
		content: "view more ▼";
		letter-spacing: 0.01rem;
}
/* ボタンhover時のスタイル */
.accordion-btn:hover {
		background-color: #fff;
		color: #6495ed;
}
.accordion-text {
		overflow: hidden; /* テキストを隠す */
		position: relative;
}
/* 最初に見えてるテキストエリアの高さ */
.accordion-text.is-hide {
		height: 100px;
}
/* テキストをグラデーションで隠す */
.accordion-text::before {
		background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .9) 50%, rgba(255, 255, 255, .9) 50%, #fff 100%);
		background: linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .9) 50%, rgba(255, 255, 255, .9) 50%, #fff 100%);
		bottom: 0;
		left: 0;
		content: "";
		height: 60px; /* グラデーションで隠す高さ */
		position: absolute;
		width: 100%;
}
/* 閉じるボタンの位置 */
.accordion-btn.is-show {
		bottom: -3em;
}
/* 閉じるボタンの表記 */
.accordion-btn.is-show::after {
		content: "close ▲";
		letter-spacing: 0.01rem;
}
/* 続きを見るボタンをクリックしたらテキストを隠しているグラデーションを消す */
.accordion-btn.is-show + .accordion-text::before {
		display: none;
}
/* レイアウトの為のスタイル */
.accordion {
		margin-top: 10px;
}
.accordion:not(:first-of-type) {
		margin-bottom: 100px;
		margin-top: 100px;
}
/*==========================================================================
事業部長からのメッセージ
============================================================================*/
section#message {
		background: url("../image/2504/bg_message.webp");
		background-size: contain;
		background-repeat: no-repeat;
}
section#message h2 {
		text-align: center;
}
#message img.subTtl {
		width: 46%;
}
section#message {
		margin-bottom: 2rem;
}
#message img.lazyload.name {
		width: 45%;
		margin: 1rem 0 0.3rem;
}
#message {
		text-align: start;
}
#message ul {
		margin: 0.5rem 0;
		text-indent: -1em;
		padding-left: 1em;
}
.hide-text {
		display: none;
}
div#text-wrap\ accordion-text {
		position: relative;
}
button.readmore {
		color: #18A0FB;
		background-color: #fff;
		border: 1.5px solid #18A0FB;
		bottom: -40px;
		cursor: pointer;
		display: inline-block;
		font-size: 14px;
		left: 0;
		margin: auto;
		padding: 1px 10px;
		position: absolute;
		right: 0;
		text-align: center;
		transition: all .2s;
		width: fit-content;
		z-index: 1;
		border-radius: 20px;
}
button.readmore::after {
		content: "view more ▼";
		letter-spacing: 0.01rem;
}
button.readmore:hover::after {
		top: 40px;
}
button.readmore.on-click::after {
		content: "close ▲";
		letter-spacing: 0.01rem;
}
/* テキストをグラデーションで隠す */
.show-text::before {
		background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, .4) 50%, #fff 100%);
		background: linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, .4) 50%, #fff 100%);
		bottom: 0;
		left: 0;
		content: "";
		height: 50px; /* グラデーションで隠す高さ */
		position: absolute;
		width: 100%;
}
/* 続きを見るボタンをクリックしたらテキストを隠しているグラデーションを消す */
button.readmore.on-click + .show-text::before {
		display: none;
}
/*==========================================================================
福利厚生
============================================================================*/
section#benefit {
		background: url("../image/2504/bg_benefit.webp");
		background-size: cover;
		background-repeat: no-repeat;
}
#benefit img.lazyload {
		width: 21%;
		aspect-ratio: 1/1;
		object-fit: contain;
}
#benefit img.lazyload.subTtl {
		width: 40.2%;
		aspect-ratio: 0;
}
p.readTxt {
		font-size: 0.8rem;
		text-align: center;
		font-weight: 700;
		margin-bottom: 1.2rem
}
@media screen and (min-width:500px) {
		p.readTxt {
				font-size: 1rem;
		}
}
#benefit ul li {
		background: #fff;
		border-radius: 1rem;
		padding: 4% 5%;
		margin-bottom: 0.5rem;
		display: flex;
		justify-content: space-between;
		font-size: 14px;
}
#benefit ul li:nth-child(2n) {
		flex-direction: row-reverse;
}
#benefit ul li div {
		width: 76%;
}
#benefit ul li div h3 {
		background: linear-gradient(90deg, var(--sub-color-start), var(--sub-color-end));
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		font-size: 0.75rem;
		font-weight: 600;
		text-align: start;
}
/*==========================================================================
募集要項
============================================================================*/
section#jobDescription {
		background: url("../image/2504/bg_message.webp");
		background-size: contain;
		background-repeat: no-repeat;
}
#jobDescription img.subTtl {
		width: 79%;
}
#jobDescription .blueTxt {
		font-weight: 600;
		color: var(--sub-color-end);
		line-height: 2.1;
		text-align: center;
		margin: 7% 0;
}
#jobDescription ul {
		text-align: start;
}
#jobDescription ul .description {
		background: linear-gradient(70deg, rgba(0, 159, 252, 1), rgba(0, 159, 252, 0.5));
		color: #ffffff;
		font-weight: 600;
		padding: 1% 4%;
		border-right: solid 1px var(--sub-color-end);
		border-left: solid 1px var(--sub-color-end);
}
#jobDescription ul li {
		background: #ffffff;
}
#jobDescription ul li .detail {
		padding: 4%;
		border-right: solid 1px var(--sub-color-end);
		border-left: solid 1px var(--sub-color-end);
		font-size: 0.97em;
}
#jobDescription ul li .detail:last-child {
		border-bottom: solid 1px var(--sub-color-end);
}
#jobDescription ul li .detail span {
		color: #ffffff;
		background: var(--main-color);
		border-radius: 0.8em;
		padding: 0 3%;
}
#jobDescription ul li .detail small {
		letter-spacing: 0;
		line-height: 1.5;
		display: block;
}
#jobDescription ul li ul {
		list-style: disc;
		padding-left: 5%;
}
#jobDescription .qualification p {
		margin-top: 3%;
}
#jobDescription .salary p {
		margin: 3% 0;
}
#jobDescription .holiday p {
		margin-bottom: 3%;
}
#jobDescription .benefits ul {
		margin-top: 3%;
}
/*==========================================================================
よくある質問
============================================================================*/
section#faq {
		background: url("../image/2504/bg_benefit.webp");
		background-size: cover;
		background-repeat: no-repeat;
}
#faq img.subTtl {
		width: 28.8%;
}
#faq h2 {
		margin-bottom: 1rem;
}
#faq h3 {
		text-align: start;
		font-size: 1.3em;
		font-weight: 600;
		color: var(--sub-color-end);
		margin-bottom: 0.5em;
}
#faq .details {
		margin-bottom: 1em;
}
.details-summary {
    position: relative;
    display: block;
    padding: 1em 0.5em 1em 3em;
    color: var(--text-color);
    font-size: 1em;
    font-weight: bold;
    text-align: start;
    background: #ffffff;
    box-shadow: 0px 10px 10px -6px rgba(2, 124, 195, 0.3);
    cursor: pointer;
    transition: opacity 0.2s;
}

.details-summary:hover {
    opacity: 0.8;
}

.details-summary .btn {
    position: absolute;
    top: 50%;
    left: 1em;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    transition: transform 0.2s;
}

.details-summary .btn:before,
.details-summary .btn:after {
    content: "";
    position: absolute;
    background-color: var(--sub-color-end);
    border-radius: 10px;
    width: 18px;
    height: 2px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    transition: all 0.2s;
}

.details-summary .btn:before {
    transform: translateY(-50%) rotate(90deg);
}

.details-summary.is-active .btn:before {
    opacity: 0;
}

.details-summary::-webkit-details-marker {
    display: none;
}

.details-content {
    padding: 1em 1em 1em 3em;
    background: #ffffff;
}

.details-content p {
    margin: 0 0 20px;
    color: #000;
    font-size: 1em;
    text-align: justify;
}

.details-content p:last-of-type {
    margin-bottom: 0;
}

section#faq .faqBox1,
section#faq .faqBox2 {
    margin-bottom: 10%;
}

/*==========================================================================
会社情報
============================================================================*/
section#company {
		background: url("../image/2504/bg_message.webp");
		background-size: contain;
		background-repeat: no-repeat;
}
#company img.subTtl {
		width: 52.5%;
}
#company a {
		text-decoration: underline;
		text-underline-offset: 4px;
}
table {
		display: block;
		padding: 0 5% 0.5rem;
}
@media screen and (min-width:500px) {
		table {
				padding: 0 10% 1rem;
		}
		section#company {
				padding-bottom: 0;
		}
}
table tr {
		padding-bottom: 1.5rem;
		display: block;
}
table th {
		background: linear-gradient(90deg, var(--sub-color-start), var(--sub-color-end));
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
}
table td {
		text-align: start;
}
table th, table td {
		width: 100%;
		display: block;
}
.google_map_lava {
		width: 90%;
		margin: auto;
}
.google_map_lava iframe {
		height: 230px;
}
@media screen and (min-width:500px) {
		.google_map_lava {
				width: 82%;
				height: 300px;
		}
}
/*==========================================================================
申込みCTA
============================================================================*/
.fix_nav {
		display: block;
		position: fixed;
		width: 90%;
		max-width: 400px;
		z-index: 99999;
		border-radius: 3rem;
		bottom: 2.5%;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		background: initial;
}
.scroll_up {
		transition: 2s;
		opacity: 0;
		z-index: -1;
}
.shake-up {
		animation: shake-up 3s infinite ease-in-out;
}
@keyframes shake-up {
		0%, 100% {
				transform: translateY(0);
		}
		50% {
				transform: translateY(15px);
		}
}
@media screen and (min-width:500px) {
		.fix_nav {
				left: 50%;
				transform: translateX(-50%);
				-webkit-transform: translateX(-50%);
				-ms-transform: translateX(-50%);
		}
}
/*===============　きらっと光るアニメーション ===============*/
@-webkit-keyframes shine {
		0% {
				left: -200%;
				opacity: 0;
		}
		70% {
				left: -200%;
				opacity: 0.5;
		}
		71% {
				left: -200%;
				opacity: 1;
		}
		100% {
				left: -20%;
				opacity: 0;
		}
}
@keyframes shine {
		0% {
				left: -200%;
				opacity: 0;
		}
		70% {
				left: -200%;
				opacity: 0.5;
		}
		71% {
				left: -200%;
				opacity: 1;
		}
		100% {
				left: -20%;
				opacity: 0;
		}
}
.shine_inner {
		position: relative;
		overflow: hidden;
		display: block;
		max-width: 100%;
}
.shine_mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		-webkit-mask-image: url("../image/2504/cta.webp");
		mask-image: url("../image/2504/cta.webp");
		-webkit-mask-size: 100% auto;
		mask-size: 100% auto;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-position: left top;
		mask-position: left top;
		display: block;
}
.shine {
		content: "";
		-webkit-animation: shine 3s cubic-bezier(0.25, 0, 0.25, 1) infinite;
		animation: shine 3s cubic-bezier(0.25, 0, 0.25, 1) infinite;
		background-color: #fff;
		width: 140%;
		height: 100%;
		-webkit-transform: skewX(-45deg);
		transform: skewX(-45deg);
		top: 0;
		left: -160%;
		opacity: 0.5;
		position: absolute;
		z-index: 1;
		display: block;
}
/*==========================================================================
フッター
============================================================================*/
footer img {
		width: 40%;
		/* text-align: center; */
		margin: auto;
}