@charset "utf-8";

/* ヘッダー
-------------------------------------*/
header {
	width: 100%;
	background-color: var(--white);
	/*position: -webkit-sticky;
	position: sticky;
	top: 0;
    left: 0;
	z-index: 10;*/
}
header.l-slim__head {
	/*max-width: var(--l-slim); margin: 1rem auto 0;*/
	min-height: 100px;
	/*border-radius: 40px 40px 0 0;*/
}
header .head-area {
    padding: 1rem 1.5rem;
}
.head-logo {width: clamp(160px,25vw,220px);}
header .head-nav {
	display: flex;
	justify-content: center;
	align-items: center;
}
.nav-area {
	position: fixed;
	left: 50%; top: 0; transform: translate(-50%, -200%);
	width: 100%; max-width: var(--l-slim);
	height: 100%;
	background: url("../img/common/bg-head.svg") no-repeat bottom right / 274px;
	background-color: var(--main-color);
	padding: 0 1.25rem;
	transition: transform 0.3s ease;
	z-index: 9;
	overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.nav-area.is-open {transform: translate(-50%, 0);}
.nav-area ul {
	font-family: "Poppins", sans-serif;
	font-weight: 600;
}
.nav-area ul.nav__main {
    font-size: 34px;
	margin-top: 5rem; margin-bottom: 1.5rem;
}
.nav-area ul.nav__main li {
	padding: 1rem .5rem;
}
.nav-area ul.nav__sub {
	font-size: 21px;
	display: flex; align-items: center;
	margin-bottom: 2.5rem;
}
.nav-area ul.nav__sub li {padding: 0 .5rem;}
.head-sns {
	display: flex; align-items: center; gap: 1rem;
}
.head-sns > div,
.back-sns > div {
	width: 46px; height: 46px;
	background-color: var(--white);
	border-radius: 50%;
}
.head-sns > div a,
.back-sns > div a {
	display: flex; justify-content: center; align-items: center;
	width: 100%; height: 100%;
}
.icon-x {width: 18px;}
.icon-fb {width: 26px;}
.icon-inst {width: 20px;}
.icon-yt {width: 22px;}
.nav-area .text-vertical {
	position: absolute;
	right: .75rem;
}
/* ハンバーガーボタン */
.hamburger-box {
	/*max-width: calc(var(--l-slim) - 2rem);*/
    width: 56px; height: 56px;
    position: fixed; right: 1rem; top: 1.5rem; z-index: 10;
    /*margin-top: 4.5rem;*/
}
.hamburger {
	width: 56px; height: 56px;
	position: absolute;
	right: 0; top: 50%; transform: translateY(-50%);
	background-color: var(--main-color);
	border-radius: 50%;
	cursor: pointer;
	transition: background-color .3s ease;
}
.hamburger span,
.hamburger span::before,
.hamburger span::after {
	--gap: .4rem;
	width: 42%; height: 2px;
	background-color: var(--sub-color_01);
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	transition: transform .4s ease, opacity .4s ease;
}
.hamburger span::before,
.hamburger span::after {
	content: "";
	width: 100%;
}
.hamburger span::before {
	transform: translate(-50%, calc(-50% - var(--gap)));
}
.hamburger span::after {
	transform: translate(-50%, calc(-50% + var(--gap)));
}
/*activeクラスが付与されると線が回転して×になり、Menu表記をしている2つ目の要素が透過して消える*/
.hamburger.active {background-color: var(--white);}
.hamburger.active span {
	background-color: transparent;
}
.hamburger.active span::before {
	transform: translate(-50%, -50%) rotate(35deg);
}
.hamburger.active span::after {
	transform: translate(-50%, -50%) rotate(-35deg);
}
body.menu-open {overflow: hidden;}
@media screen and (max-width: 560px) {
	.nav-area,.hamburger-box {max-width: 100%; }
	.hamburger-box {right: 0;}
	.hamburger {right: 1rem;}
}

/* フッター
-------------------------------------*/
footer {
	padding: 1rem 1.4rem;
	background-color: var(--sub-color_01);
	color: var(--white);
	position: relative;
}
footer .js-toTop {
	--width: 72px;
	width: var(--width); height: var(--width); aspect-ratio: 1 / 1;
	background-color: var(--black); border-radius: 50%;
	font-size: 15px; font-weight: 600; color: var(--white);
	font-family: "Poppins", sans-serif;
	margin: 0; cursor: pointer;
	position: absolute;
	right: 2rem; top: calc(0px - (var(--width) / 2));
}
footer .js-toTop a {
	display: flex; justify-content: center; align-items: center; flex-direction: column;
	height: 100%;
	transition: opacity .2s ease;
}
footer .js-toTop span {margin-bottom: .5rem;}
footer nav ul li {
	border-bottom: 1px solid var(--dark-gray);
	padding: 1rem 0;
}
footer nav ul li:first-of-type {border-top: 1px solid var(--dark-gray);}
footer nav ul li .icon-arrow {
	display: block;
	width: 22px; height: 22px;
	background-color: var(--main-color); border-radius: 50%;
	position: relative;
	margin-right: .75rem;
}
footer nav ul li .icon-arrow::before,
footer nav ul li .icon-arrow::after {
	content: "";
	background-color: var(--sub-color_01);
	position: absolute;
}
footer nav ul li .icon-arrow::before {
	width: 10px; height: 2px;
	left: 50%; top: 50%; transform: translate(-50%, -50%);
}
footer nav ul li .icon-arrow::after {
	width: 5px; height: 6.5px;
	clip-path: polygon(0 0, 0% 100%, 100% 50%);
	left: 56%; top: 50%; transform: translateY(-50%);
}
footer nav ul li a {transition: opacity .3s ease;}
.foot-sns > div {
	background-color: var(--gray2); border-radius: 50%;
	width: 46px; height: 46px; aspect-ratio: 1 / 1;
	transition: background-color .3s ease;
}
.foot-sns > div:has(a:hover) {
	background-color: var(--gray);
}
.foot-sns > div a {width: 100%; height: 100%;}
.foot-sns > div a:hover,.foot-sns > div a:hover img {
	opacity: 1;
}
.copyright {font-size: 11px;text-align: center;margin: 0; color: var(--gray2);}

/* 汎用
-------------------------------------*/
/* パンくずリスト */
.breadcrumb { 
	display: flex;align-items: center;
}
.breadcrumb li {
	flex: 0 0 auto;
    padding: 0 .25rem;
    font-size: 12px; color: var(--gray-blue);
}
.breadcrumb li:has(span) {
	flex: 1 1 auto; min-width: 0;
	white-space: nowrap; text-overflow: ellipsis;
    overflow: hidden;
	font-weight: 600; color: var(--sub-color_01);
}
.breadcrumb li::after {
    content: ">";
    padding-left: .5rem;
}
.breadcrumb li:last-of-type::after {display: none;}

/* ページネーション */
.nav-links {
	font-family: "Poppins", sans-serif;
	font-weight: 600; font-size: 15px;
	display: inline-flex; justify-content: center; align-items: center;
}
.nav-links > * {display: flex; justify-content: center; align-items: center;}
.nav-links .page-numbers {width: 32px;}
.nav-links .current {
	aspect-ratio: 1 / 1; border-radius: 50%;
	background-color: var(--sub-color_01);
	color: var(--white);
}
.pag-prev {margin-right: 1rem;}
.pag-next {margin-left: 1rem;}
.pag-prev span,
.pag-next span {
	position: relative;
	display: inline-block;
	width: 18px; height: 2px;
	background-color: var(--sub-color_01);
}
.pag-prev span::before,
.pag-next span::before {
	content: "";
	background-color: var(--sub-color_01);
    position: absolute;
	top: 50%; transform: translateY(-50%);
	width: 7px; height: 6px;
	transition: background-color .3s ease;
}
.pag-prev span::before {
	clip-path: polygon(100% 0, 0 50%, 100% 100%);
	left: -2px;
}
.pag-next span::before {
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
    right: -2px;
}
.pag-prev.is-disabled span,
.pag-next.is-disabled span,
.pag-prev.is-disabled span::before,
.pag-next.is-disabled span::before {
	background-color: var(--gray);
}

/* 記事一覧用 */
.tag {
	font-family: "Poppins", sans-serif;
	font-weight: 600; font-size: 11px;
}
.page-single .tag {font-size: 13px;}
.time {
	font-family: "Poppins", sans-serif;
	font-weight: 400; font-size: 13px; color: var(--gray-blue);
}
.page-single .time {font-size: 14px;}

/* SNSアイコン */
.icon-sns > div {
	background-color: var(--light-blue);
    border-radius: 50%;
    width: 46px;
    height: 46px;
    aspect-ratio: 1 / 1;
}
.icon-sns > div a {width: 100%; height: 100%;}

/* WPブロックエディタ 削除用クラス */
.scroll-x .wp-block-table {overflow-x: visible;}
.wp-block-table td, .wp-block-table th {
    padding: 1rem!important;
}
.wp-block-table thead {border: none!important;}
figure.tbl__border {border: none;}

/* テーブル(全線) */
.tbl__border.wp-block-table table {
	border: 1px solid var(--gray);
}
.tbl__border.wp-block-table :is(th,td) {
	border-right: 1px solid var(--gray);
	border-bottom: 1px solid var(--gray);
	border-left: none;
    border-top: none;
}
.tbl__border.wp-block-table table > :not(thead) tr:last-of-type > :is(th,td) {border-bottom: none!important;}
.tbl__border.wp-block-table table tr > :is(th,td):last-of-type {border-right: none!important;}
.tbl__border.wp-block-table table > thead tr > :is(th,td) {border-bottom: 1px solid var(--gray);}
.tbl__border.wp-block-table th {background-color: var(--light-blue)!important;}

/* テーブル(角丸) */
.tbl__round.wp-block-table table {border-collapse: separate!important;}

/* トップページ
-------------------------------------*/
/* FV */
.fv {
    text-align: center;
    position: relative;
}
.fv__logo {
	position: absolute;
	left: 50%; top: -5.25rem;
	transform: translateX(-50%);
    z-index: 1;
	max-width: 158px;
}
.fv__slider {}
.fv__slider li a {
	position: relative;
	padding: 0 .5rem;
}
.fv__slider li a > img {
	width: calc(364px + 1rem); margin: 0 auto;
	aspect-ratio: 364 / 527; object-fit: cover;
	border-radius: var(--rounded-10-25);
}
.fv__slider li a > div {
	position: absolute;
	left: 50%; bottom: 0; transform: translateX(-50%);
	width: calc(100% - 1rem);
	padding: 2rem 1rem;
	color: var(--white);
	background: linear-gradient(rgb(0 0 0 / .0), rgb(0 0 0 / .4));
	border-radius: 0 0 var(--rounded-10-25) var(--rounded-10-25);
	text-align: left;
}
.fv__slider .tag {
	font-size: 12px;
	color: var(--white);
	background-color: var(--black); border-radius: 200px;
	padding: .25rem .75rem; margin-right: .5rem;
}
.fv__slider time {
	font-family: "Poppins", sans-serif;
	font-weight: 600; font-size: 14px;
}
.fv__slider h3 {
	font-size: 18px; font-weight: 600;
	line-height: 1.5em;
	margin-top: .75rem; margin-bottom: 0;
}
.fv__slide-nav {
	display: inline-flex; justify-content: center; align-items: center; gap: 1rem;
	margin-top: 1rem;
}
.slick-prev,
.slick-next {
	position: relative;
	width: 40px; height: 40px; border-radius: 50%;
	border: 1px solid var(--sub-color_01); 
	background-color: var(--white);
	cursor: pointer;
	transition: background-color .3s ease;
}
.slick-next {order: 3;}
.slick-prev span,
.slick-next span {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	width: 18px; height: 2px;
	background-color: var(--sub-color_01);
	transition: background-color .3s ease;
}
.slick-prev span::before,
.slick-next span::before {
	content: "";
	background-color: var(--sub-color_01);
    position: absolute;
	top: 50%; transform: translateY(-50%);
	width: 7px; height: 6px;
	transition: background-color .3s ease;
}
.slick-prev span::before {
	clip-path: polygon(100% 0, 0 50%, 100% 100%);
	left: -2px;
}
.slick-next span::before {
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
    right: -2px;
}
.slick-prev:hover,
.slick-next:hover {background-color: var(--sub-color_01);}
.slick-prev:hover span,
.slick-next:hover span,
.slick-prev:hover span::before,
.slick-next:hover span::before {
	background-color: var(--white);
}
.slick-dots {
	display: flex;
}
.slick-dots li {
	width: 12px; height: 12px; aspect-ratio: 1 / 1;
    background-color: var(--white);
    border: 1px solid var(--sub-color_01);
    border-radius: 50%;
    margin: 0 .5rem;
    cursor: pointer;
    transition: background-color .2s ease;
}
.slick-dots li:hover, .slick-dots li.slick-active {
	background-color: var(--sub-color_01);
}
.slick-dots button {
	/*font-family: "Poppins", sans-serif;
	font-weight: 600; font-size: 14px;*/
	display: none; appearance: none; outline: none; border: none;
    padding: 0; background-color: transparent;
}

/* 下層ページ
-------------------------------------*/
/* ヘッダー */
.sub-page header {
	max-width: calc(100% - 2.5rem);
	margin-left: auto; margin-right: auto;
	border-bottom: 1px solid var(--gray);
	display: flex; align-items: center;
}
.sub-page header .head-area {padding: 1rem 0;}
.sub-page header .head-logo {
	max-width: 159px;
}

/* 記事詳細ページ
-------------------------------------*/
.sub-content p:not([class*="font-"]) {font-size: 15px;}
.sub-content p {line-height: 1.7em;}
.sub-content ul.list-icon__circle li {
	font-size: 15px;
	text-indent: -1.4em;
    padding-left: 1.4em;
	line-height: 1.7em;
    margin-bottom: .5rem;
}
.sub-content ul.list-icon__circle li::before {
	content: "";
	display: inline-block;
	width: 8px; height: 8px;
	background-color: var(--main-color); border-radius: 50%;
}
.sub-content .link-btn__rou-bd,
.link-btn__full-width.link-btn__rou-bd {max-width: 100%;}
.sub-content table {font-size: 14px;}
.sub-content .scroll-x :is(th,td) {min-width: 186px;}


/* ABOUT US ページ
-------------------------------------*/
/* ABOUT US */
.about-u-bg {background: url("../img/about/about_bg.jpg") no-repeat center bottom / cover;}
.about-logo {max-width: 126px;}
.about-name {max-width: 186px;}

/* Service */
.service-bg {background: no-repeat center / cover;}
.service-bg.bg-1 {background-image: url("../img/about/service_01.jpg");}
.service-bg.bg-2 {background-image: url("../img/about/service_02.jpg");}
.service-bg.bg-3 {background-image: url("../img/about/service_03.jpg");}
.service-bg.bg-4 {background-image: url("../img/about/service_04.jpg");}

/* About Your Fun */
.about-yf-grid {grid-template-columns: 72px 1fr;}
.about-yf-grid > .icon span {
	height: 72px; aspect-ratio: 1 / 1; border-radius: 50%;
}
.about-yf-grid > .icon span img {width: auto;}


/* お問い合わせ
-------------------------------------*/
input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select {
    height: 38px;
    padding: 6px 10px;
    background-color: var(--white);
    border: 1px solid var(--dark-gray);
    box-shadow: none;
    box-sizing: border-box;
    font-size: 16px;
	border-radius: 0;
}
input,textarea,select{margin-bottom: 0;}
textarea {
    min-height: 190px;
    padding-top: 6px;
    padding-bottom: 6px;
}
input[type="submit"],
input[type="reset"],
input[type="button"],
.btn-form-top {
	width: 200px;
	height: 50px;
	border: none;
	border-radius: 100px;
	font-size: 1.2em;
	font-weight: bold;
	transition: all .3s;
	cursor: pointer;
	margin: .25rem .5rem;
}
input[type="submit"],.btn-form-top {
	background-color: var(--main-color);
	border: 1px solid var(--main-color);
	color: var(--white);
}
input[type="reset"],input[type="button"]{
	background-color: var(--deep-dark-gray);
	border: 1px solid var(--deep-dark-gray);
	color: var(--white);
}
input[type="submit"]:hover,.btn-form-top:hover {
	background-color: var(--white);
	color: var(--main-color);
}
input[type="reset"]:hover,input[type="button"]:hover {
	background-color: var(--white);
	color: var(--deep-dark-gray);
}
.btn-form-top {
	width: 240px;
    max-width: 100%;
	display: flex;
    justify-content: center;
    align-items: center;
	margin-left: auto;
	margin-right: auto;
}
.form-contact th {
	vertical-align: text-top;
	text-align: right;
	font-size: clamp(16px, 2vw, 18px);
	padding-right: 2rem;
	padding-top: 2rem;
}
.form-mult input {margin-bottom: .5rem;}
.form-input__name {max-width: 200px;}
.form-input__age {max-width: 60px;margin-right: .5rem;}
.form-input__wide {width: 100%;}

/* SEO用 */
fieldset {
	padding: 0;
	border: none;
}
.visually-hidden {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* その他
-------------------------------------*/
/* 背景ナビゲーション */
.back-logo {/*max-width: 380px;*/ display: inline-block;}
[class*="back-logo__"] {transform-origin: center;}
.back-logo__y {
	max-width: clamp(54px,calc((-48rem + 100vw) / 5),100px);
	margin-right: .25rem;
	animation: floatUpDown 3s ease-in-out infinite;
}
.back-logo__o {
	max-width: clamp(31px,calc((-59rem + 100vw) / 5),63px);
	margin-right: clamp(1.5rem,calc((-62rem + 100vw) / 5),2.5rem);
	animation: floatUpDown 3.2s ease-in-out infinite;
}
.back-logo__u1 {
	max-width: clamp(39px,calc((-55rem + 100vw) / 5),75px);
	margin-right: clamp(1.25rem,calc((-62rem + 100vw) / 5),2.25rem);
	animation: floatUpDown 3.4s ease-in-out infinite;
}
.back-logo__r {
	max-width: clamp(28px,calc((-59rem + 100vw) / 5),58px);
	animation: floatUpDown 3.6s ease-in-out infinite;
}
.back-logo__f {
	max-width: clamp(48px,calc((-50rem + 100vw) / 5),90px); 
	margin-right: clamp(.5rem,calc((-61rem + 100vw) / 5),1rem);
	animation: floatUpDown 3s ease-in-out infinite;
}
.back-logo__u2 {
	max-width: clamp(44px,calc((-52rem + 100vw) / 5),84px);
	margin-right: clamp(1rem,calc((-61rem + 100vw) / 5),2rem);
	animation: floatUpDown 3.2s ease-in-out infinite;
}
.back-logo__n {
	max-width: clamp(39px,calc((-55rem + 100vw) / 5),65px);
	animation: floatUpDown 3.4s ease-in-out infinite;
}
.l-slim__left h1 {font-size: clamp(22px, calc((-55rem + 100vw) / 10), 32px);}
.l-slim__left .font-14-18 {font-size: clamp(14px, 1.5vw, 18px);}
.back-nav__main,
.back-nav__sub {
	font-family: "Poppins", sans-serif;
	font-weight: 600;
}
.back-nav__main a,
.back-nav__sub a {
	position: relative;
	transition: opacity .3s ease;
}
.back-nav__main a.is-current::before,
.back-nav__sub a.is-current::before {
	content: "";
	position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
	width: calc(100% + 3rem); height: 4.5rem;
	background-color: var(--yellow);
	-webkit-mask: url("../img/common/head-nav-current.svg") no-repeat center / 100% 100%;
	mask: url("../img/common/head-nav-current.svg") no-repeat center / 100% 100%;
	
}
.back-nav__main {font-size: clamp(28px,calc((-55rem + 100vw) / 10),34px);}
.back-nav__main li a {padding: clamp(.5rem,calc((-58rem + 100vw) / 12),1rem) 0;}
.back-nav__sub {
	font-size: clamp(16px,calc((-62rem + 100vw) / 10),20px);
	display: flex; justify-content: flex-end; gap: 1.5rem;
}
/*.back-nav__sub li {padding: 0 .5rem;}*/
.back-sns {display: inline-grid;}
.back-sns > div {
	width: clamp(40px,3.75vw,46px); height: clamp(40px,3.75vw,46px);
	transition: opacity .3s ease;
}
.back-sns > div:hover {opacity: .7;}
.back-sns > div a:hover,
.back-sns > div a:hover img {opacity: 1;}
@keyframes floatUpDown {
    0% { transform: translateY(10px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(10px); }
}

/* ページトップへ戻るボタン */
#page-top {
	position: fixed;
	right: clamp(1rem,calc((-60rem + 100vw) / 5),3rem);
	bottom: 20px;
	z-index: 4;
	transition: bottom 0.3s ease-in-out;
}
#page-top a {
	display: flex; justify-content: center; align-items: center;
	width: 110px;
	font-family: "Poppins", sans-serif;
	font-weight: bold;
	background-color: var(--white);
	color: var(--gray-blue);
	padding: 15px 5px;
	border-radius: var(--rounded-200);
	transition: opacity .2s ease;
}
#page-top a span,
footer .js-toTop span {
	position: relative;
	display: inline-block;
    width: 2px; height: 14px;
    background-color: var(--main-color);
}
#page-top a span {margin-right: .5rem;}
#page-top a span::before,
footer .js-toTop span::before {
	content: "";
	position: absolute; left: 50%; top: -2px; transform: translateX(-50%);
	width: 7.5px; height: 6px;
	background-color: var(--main-color);
	clip-path: polygon(50% 0, 0% 100%, 100% 100%);
	
}
@media screen and (max-width: 1024px) {
	#page-top {display: none;}
}