@charset "UTF-8";


/* *********************************

   common.css

	- Variable
	- Reset
	- Base
	- Layout
	- Navigation
	- Component
	- Animation
	- Utility

********************************* */



/* ========================================================
  
  Variable

======================================================== */
:root {
	--fw-bold: 600;

	--ff-gothic: "Hiragino Kaku Gothic ProN","Hiragino Sans","游ゴシック","Yu Gothic",Meiryo,sans-serif;

	--font-min: normal normal 400 100%/1.6 "Zen Old Mincho", serif;
	--font-en: normal normal 400 100%/1 "Josefin Sans", serif;
	/* --font-no: normal normal 400 100%/1 "Cardo", serif; */

	--color-base: #333;
	--color-bdr: #d9d9d9;

	--color-primary: #faed00;
	--color-primary-400: #FBF37C;
	--color-secondary: #ff968a;

	--color-ppl: #b8a1e3;
	--color-blu: #41adcd;
	--color-blu-300: #76c4db;
	--color-grn: #53c067;
	--color-grn-300: #61c498;
	--color-pnk: #ea788d;
	--color-pnk-300: #fc96ad;
	--color-org: #f19460;
	--color-org-300: #ffb057;
	--color-och : #b3a357;
	--color-cml : #b07b46;
	--color-cml-300 : #d89f14;
	--color-brw : #543f34;
	--color-brw-300 : #7d6559;
	--color-red: #c1272d;
	--color-bei: #f0eede;
	--color-ybei: #faf9f0;
	--color-ivo: #f9faf3;
	--color-gry-100: #f2f2f2;

	--color-dr: var(--color-blu-300);
	--color-dh: var(--color-pnk-300);
	--color-da: var(--color-org-300);
	--color-dt: #c78dd9;
	--color-visit: #94c461;
	--color-office: var(--color-grn-300);

	--accent-color: var(--color-cml);
	--job-color: var(--accent-color);

	--bdr-solid: 1px solid #ccc;
}

.u-acc--org { --accent-color: var(--color-org );}
.u-acc--org-300 { --accent-color: var(--color-org-300 );}
.u-acc--grn { --accent-color: var(--color-grn );}
.u-acc--grn-300 { --accent-color: var(--color-grn-300 );}
.u-acc--blu { --accent-color: var(--color-blu );}
.u-acc--blu-300 { --accent-color: var(--color-blu-300 );}
.u-acc--pnk { --accent-color: var(--color-pnk );}
.u-acc--pnk-300 { --accent-color: var(--color-pnk-300 );}
.u-acc--ppl { --accent-color: var(--color-ppl );}

.u-acc--dr { --accent-color: var(--color-dr );}
.u-acc--dh { --accent-color: var(--color-dh );}
.u-acc--da { --accent-color: var(--color-da );}
.u-acc--dt { --accent-color: var(--color-dt );}
.u-acc--visit { --accent-color: var(--color-visit );}
.u-acc--office { --accent-color: var(--color-office );}

.u-acc--primary { --accent-color: var(--color-primary);}
.u-acc--secondary { --accent-color: var(--color-secondary);}

.page-dh {
	--job-color: var(--color-pnk );
	--job-color-rgb: 217 127 132;;
}
.page-staff {
	--job-color: var(--color-ppl-300 );
	--job-color-rgb: 177 132 217;
}


/* ========================================================
  
  Reset

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

div,
dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,
pre,form,fildset,p,blockquote,
figure,figcaption,hr {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font-style: normal;
	font-weight: inherit;
}

ul{
	list-style:none;
}

img{
	display: block;
    /* width: 100%; */
    max-width: 100%;
    height: auto;
    /* object-fit: cover; */
}

picture {
	display:block;
}

table {
	width:100%;
	font-size:inherit;
	font:100%;
	border-collapse:separate;
	border-spacing:0;
}

button {
	display: block;
	padding: 0;
	border: none;
	outline: none;
	font: inherit;
	color: inherit;
	background: none;
	cursor: pointer;
}






/* ========================================================
  
  Base

======================================================== */
html {
	font-size: 16px;
}
body {
	font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans","游ゴシック","Yu Gothic",Meiryo,sans-serif;
	font-style: normal;
	color: var(--color-base);
	letter-spacing: .1em;
	line-height: 2;
	margin: 0;
	-webkit-text-size-adjust: 100%;
}

main {
	position: relative;
}

a {
	color: inherit;
	text-decoration: none;
	outline: 0;
	transition: color .8s, background-color .8s;
}

address {
	font-style: normal;
}

section {
	position: relative;
}

main {
	position: relative;
}

cite {
	display: block;
	text-align: right;
	font-size: min(1.5vw,100%);
	letter-spacing: normal;
	font-style: normal;
	line-height: 1.4;
	margin-top: 1em;
}

sup {
	font-size:60%;
}

hr {
	display: block;
	height: 1px;
	background: #e6e6e6;
	width: 100%;
	border: none;
	margin: 7% auto;
}

b {font-weight: var(--fw-bold);}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {

body {
	line-height: 1.8;
	letter-spacing: .06em;
}
}

@media(min-width: 768px) {
/* PC時はaタグ無効 */
  a[href^="tel:"] {
    pointer-events: none;
  }
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
/* スマホのときはビューポートを基準にサイズ調節する */
/* スマホ時：emまたは%で指定する */
/* スマホ以外でビューポート基準にするときは、その都度「vw」で指定する */
html {
	font-size: 4vw;
}
body {
	line-height: 1.7;
	letter-spacing: .04em;
}
cite {
	font-size: 80%;
}
hr {
	margin: 12% auto;
}
}






/* ========================================================
  
  Layout

======================================================== */
.l-wrapper { overflow: clip; }


/*-----------------------------------------------
 Layout - header
-----------------------------------------------*/
.l-header {
	position: relative;
	width: 100%;
	left: 0;
	top: 0;
	padding: min(3vw,40px) min(3.2vw,50px) 20px;
	z-index: 100;
}
.l-header__left {
	position: relative;
	max-width: max-content;
}

.l-header__txt {
	font-size: min(1.3vw,88%);
	line-height: 1.3;
}

.c-logo {
	position: relative;
	max-width: 447px;
	display: grid;
	justify-content: space-between;
	align-items: flex-end;
	grid-template-columns: 18.6% 77.6%;
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.l-header__left {
	width: 58%;
	max-width: 770px;
}

.l-header__right {
	position: absolute;
	width: 40%;
	max-width: 440px;
	display: flex;
	justify-content: flex-end;
	column-gap: 3.5%;
	font-size: min(1.3vw,1rem);
	right: 0;
	top: 0;
}
.l-header__right > div:first-child {
	align-self: center;
	padding: 1em 0;
}

.l-header__txt {
	position: absolute;
	left: 14.8%;
	top: .5em;
}

.l-header__logo {
	max-width: 770px;
	grid-template-columns: 12.5% 85.3%;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.l-header {
	padding: 4vw;
}

.l-header__right {
	display: none;
}

.l-header__txt {
	font-size: 80%;
	margin-bottom: .6em;
}

.l-header__logo {
	width: 72vw;
}
}

@media only screen and (min-width: 768px) and (max-width: 1500px) and (min-aspect-ratio: 1024/750) {

.l-header {
	padding: min(2.2vw,40px) min(3vw,50px) 15px;
}
.l-header__left {
	width: 45%;
}

.l-header__right {
	font-size: min(1.1vw,1rem);
}

.l-header__txt {
	font-size: min(1.1vw,88%);
	white-space: nowrap;
}
}

/*-----------------------------------------------
 Layout - l-nav
-----------------------------------------------*/
.l-nav {
	display: flex;
	column-gap: 2%;
	margin-top: min(4vw,2em);

	.l-nav__list,
	.l-nav__job {
		font-size: min(1.13vw,0.94rem);
	}
	.l-nav__list > li:last-child {
		display: none;
	}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.l-nav {
	display: none;
}
}

/* Navigation - l-nav - l-nav__job
-----------------------------------------------*/
.l-nav__job {
	position: relative;
	display: flex;
	align-items: center;
	column-gap: .2em;
	font-size: min(1.5vw,0.94rem);
	font-weight: var(--fw-bold);
	letter-spacing: .1em;
	line-height: 1.3;
	font-feature-settings: "halt";
	background: var(--color-gry-100);
	padding: .2em .2em .2em 2em;
	border-radius: 100vmax;
}

.l-nav__job p {
	white-space: nowrap;
}
.l-nav__job ul {
	display: flex;

	& a {
		position: relative;
		display: block;
		width: 8.6em;
		max-width: 100%;
		text-align: center;
		white-space: nowrap;
		padding: 1em 1%;

		&::before {
			position: absolute;
			content: "";
			background: #000;
			width: 100%;
			height: 100%;
			border-radius: 100vmax;
			inset: 0;
			opacity: 0;
			transition: opacity .5s;
		}
		&:hover {
			color: #FFF;
		}
		&:hover::before {
			opacity: 1;
		}
		> span {
			position: relative;
		}
	}
}
.l-nav__job ul li {
	&:nth-of-type(1) a::before { background: linear-gradient(to right, #6ccedb, #4088d3); }
	&:nth-of-type(2) a::before { background: linear-gradient(to right, #fdb18a, #fc85a0); }
	&:nth-of-type(3) a::before { background: linear-gradient(to right, #ffb0ae, #e99839); }
	&:nth-of-type(4) a::before { background: linear-gradient(to right, #8b95d8, #aa74c2); }
	&:nth-of-type(5) a::before { background: linear-gradient(to right, #d3d88b, #7cc23a); }
	&:nth-of-type(6) a::before { background: linear-gradient(to right, #8bd898, #4cb38b); }
}

/* Navigation - l-nav - l-nav__list
-----------------------------------------------*/
.l-nav__list {
	position: relative;
	display: flex;
	column-gap: 1.8em;
	font-size: min(1.5vw,0.94rem);
	font-weight: var(--fw-bold);
	letter-spacing: .1em;
	line-height: 1.3;
}
.l-nav__list > li {
	position: relative;
}

.l-nav__list > li > a {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	text-align: center;
	padding: .6em 0;
	white-space: nowrap;

	&::after {
		position: absolute;
		content: "";
		background-color: var(--color-cml);
		width: 4px;
		height: 4px;
		border-radius: 50%;
		left: 50%;
		bottom: 0;
		translate: -50% 0;
		scale: 0;
		transition: scale .5s;
	}
	> br {
		display: none;
	}
}
.l-nav__list > li > a:hover::after,
.l-nav__list > li.is-active > a::after {
	scale: 1;
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (max-width: 1500px) {

.l-nav__list > li > a {
	> br {
		display: block;
	}
}
}

/* Navigation - l-nav - l-nav__inmenu
-----------------------------------------------*/
.l-nav__inmenu {
	display: none;
	position: absolute;
	width: 16em;
	right: 50%;
	top: calc(100% + 1em);
	translate: 50% 0;
	background: var(--color-gry-100);
	padding: 2em;
	border-radius: 1.4em;
	z-index: 999;
}

/* inmenu */
.l-nav__inmenu ul {
	display: grid;
	gap: 1em;

	& a {
		position: relative;
		display: block;
		white-space: nowrap;

		&::before {
			display: inline-block;
			font-family: 'fontello';
			content: '\e801';
			opacity: 0;
			margin-left: -1em;
			transition: opacity .5s, margin .5s;
		}
		&:hover::before {
			margin-left: 0;
			opacity: 1;
		}
	}
}
/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {

.l-nav__inmenu {
	font-size: min(1.5vw,1.06rem);
}
}



/*-----------------------------------------------
 Layout - scl_header
-----------------------------------------------*/
#scl_header {
	position: fixed;
	background-color: #FFF;
	z-index: 500;
	left: 0;
	top: 0;
	width: 100%;
	padding: min(3vw,20px) min(3vw,30px);
	translate: 0 -101%;

	&.is-show {
		display: block;
		translate: 0 0;
		opacity: 1;
		animation: sclAnimation 1.0s;
		box-shadow: 0 30px 25px -20px rgb(202 191 138 / 0.3);
	}
}
.l-scroll__inner {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.l-scroll__cta {
	width: 45%;
	max-width: 520px;
	font-size: min(1.3vw,1rem);
}

@keyframes sclAnimation {
	0% {
		translate: 0 -100%;
	}
	100% {
		translate: 0 0;
	}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
#scl_header {
	display: none !important;
}
}

/*-----------------------------------------------
 Layout - drawer
-----------------------------------------------*/
.l-drawer__inner {
	padding: 10% 5%;
}
.l-drawer__logo {
	width: 65vw;
	margin-bottom: 10%;
}

.l-drawer__box {
	background-color: #fff;
	padding: 7% 5%;
	border-radius: 10px;
	margin: 10% auto 8%;

	> dt {
		text-align: center;
		color: #85804f;
		font-size: 110%;
		font-weight: var(--fw-bold);
		letter-spacing: .1em;
		line-height: 1.5;
		margin-bottom: 1em;
	}
}
/* Layout - drawer - l-drawer__menu
-----------------------------------------------*/
.l-drawer__menu {
	display: grid;
	row-gap: .4em;
	font-size: 4vw;
	font-weight: var(--fw-bold);
	letter-spacing: .1em;
	line-height: 1.3;

	background: url(../images/common/logo-mark-bei.svg) no-repeat right bottom;
	background-size: 34% auto;
}
.l-drawer__menu > li {
	width: 58%;
	border-bottom: 1px solid #e0dec5;

	> a {
		position: relative;
		display: block;
		padding: .8em .5em .8em 1.4em;
		
		&::before {
			position: absolute;
			font-family: 'fontello';
			content: '\e801';
			left: 0;
			top: 50%;
			translate: 0 -50%;
		}
	}
}

/* Layout - drawer - l-drawer__job
-----------------------------------------------*/
.l-drawer__job {
	display: grid;
	flex-wrap: wrap;
	gap: .6em;
	line-height: 1.4;
}
.l-drawer__job a {
	position: relative;
	display: block;
	color: #FFF;
	font-weight: var(--fw-bold);
	border-radius: .4em;
	padding: 1em 2em 1em 1.2em;

	&::before {
		position: absolute;
		font-family: 'fontello';
		content: '\e801';
		right: 1em;
		top: 50%;
		translate: 0 -50%;
	}
}
.l-drawer__job > li {
	&:nth-of-type(1) > a {background-color: var(--color-dr);}
	&:nth-of-type(2) > a {background-color: var(--color-dh);}
	&:nth-of-type(3) > a {background-color: var(--color-da);}
	&:nth-of-type(4) > a {background-color: var(--color-dt);}
	&:nth-of-type(5) > a {background-color: var(--color-visit);}
	&:nth-of-type(6) > a {background-color: var(--color-office);}
}



/*-----------------------------------------------
 Layout - footer
-----------------------------------------------*/
.l-footer {
	position: relative;
	padding: min(10vw,110px) 0 min(6vw,50px);
}

.copyright {
	display: block;
	text-align: center;
	color: #7d7d7d;
	font: var(--font-en);
	font-size: 81%;
	line-height: 1.4;
	letter-spacing: .184em;
	margin-top: 3.5em;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.l-footer {
	padding: 14% 0 30%;
}

.copyright {
	font-size: 60%;
}
}

/* Layout - footer - sitemap
-----------------------------------------------*/
.l-footer__sitemap {
	max-width: 1180px;
	margin-inline: auto;
}
.l-footer__sitemap .c-menu-arw {
	grid-auto-flow: column;
	grid-template-rows: repeat(4, auto);
	font-size: min(1.7vw,1rem);
	white-space: nowrap;
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.l-footer__sitemap {
	display: flex;
	justify-content: space-between;
	column-gap: 4%;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.l-footer__sitemap .c-menu-arw {
	grid-auto-flow: row;
	grid-template-columns: repeat(2,48%);
	font-size: 85%;
	margin-top: 8%;
}
}

/* Layout - footer - clinic
-----------------------------------------------*/
.c-menu-cln {
	display: grid;
	font-size: min(1.2vw,.94rem);
}
.c-menu-cln > li > a {
	position: relative;
	height: 4em;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: left;
	letter-spacing: .06em;
	line-height: 1.2;
	padding: .5em 2.2em .5em 7%;
	border-radius: 5px;
	border: 1px solid #d9d5d3;

	&:hover {
		background-color: #d9d5d3;
	}
	&::before {
		position: absolute;
		font-family: 'fontello';
		content: '\e808';
		right: 1em;
		top: 50%;
		translate: 0 -50%;
	}
}
/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 960px) {

.c-menu-cln {
	font-size: 1.5vw;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-menu-cln {
	font-size: 76%;
}
.c-menu-cln > li > a {
	height: 4em;
	border-radius: 5px;
}
}

/* Layout - footer - clinic
-----------------------------------------------*/
.l-footer__clinic {
	display: grid;
	justify-content: space-between;
	grid-template-columns: repeat(5,19.6%);
	column-gap: 0.5%;
	row-gap: 1em;
}
.l-footer__clinic dt {
	color: #918d8d;
	font-size: min(1.5vw,.94rem);
	line-height: 1.5;
	margin-bottom: .5em;
}

.l-footer__clinic > dl:first-child {
	grid-column: 1/-1;

	> dd {
		display: grid;
		grid-template-columns: subgrid;
		grid-column: span 5;
		column-gap: 0.5%;
		row-gap: .2em;
	}
}
.l-footer__clinic .c-menu-cln {
	grid-template-columns: inherit;
	grid-column: inherit;
	column-gap: inherit;
	row-gap: inherit;
}
/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 960px) {

.l-footer__clinic {
	grid-template-columns: repeat(4,24.6%);
}
.l-footer__clinic > dl:first-child {
	> dd {
		grid-column: span 4;
	}
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.l-footer__clinic {
	grid-template-columns: repeat(2,49%);
	column-gap: 2%;
}
.l-footer__clinic dt {
	font-size: 90%;
}
.l-footer__clinic > dl:first-child {
	> dd {
		grid-column: span 2;
		column-gap: 2%;
	}
}
}


/* Layout - footer - bnr
-----------------------------------------------*/
.l-footer__bnr {
	display: grid;
	justify-content: space-between;
	grid-template-columns: repeat(5,19%);
	row-gap: .5em;
	margin-top: min(8%, 55px);

	> li {
		max-width: max-content;
	}
	& a {
		display: block;
		background-color: #f4f4f4;

		&:hover {
			background-color: #E9E9E9;
		}
	}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.l-footer__bnr {
	grid-template-columns: repeat(2,49%);
}
}


/*-----------------------------------------------
 Layout - sp_footer
-----------------------------------------------*/
#sp_footer {
	position: fixed;
	width: 100%;
	inset: auto 0 0 0;
	z-index: 10;
	padding: 0 2.5% 2.5%;
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

#sp_footer {
	display: none;
}
}


/*-----------------------------------------------
 Layout - FV
-----------------------------------------------*/
.l-fv {
	position: relative;
	width: 100%;
}
.l-fv__img {
	position: relative;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	width: 100%;
	height: 100%;
	inset: 0;
	margin: auto;
}


/*-----------------------------------------------
 Layout - float
-----------------------------------------------*/
.l-flt {
	position: relative;
	text-align: left;
	
	&::after {
		content: "";
		display: block;
		clear: both;
		height: 0;
		visibility: hidden;
	}
}
.l-flt__img {
	position: relative;
	max-width: max-content;

	.abs {
		position: absolute;
	}
}

/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.l-flt {
	.is-right {
		float: right;
	}
	.is-left {
		float: left;
	}
}
.l-flt__img {
	width: 40%;
	margin-bottom: .5em;

	&.is-left {
		margin-right: 5%;
	}
	&.is-right {
		margin-left: 5%;
	}
}
.l-flt__txt {
	.c-hdg--min {
		text-align: left;
	}
}
}
/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {

.l-flt__img {
	&.is-w {
	width: 45%;
}
}
.l-flt__txt {
	width: 100% !important;
	float: none !important;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.l-flt__img {
	width: 80%;
	margin: 0 auto 6%;
}
.l-flt__img {
	&.is-w {
	width: 96%;
}
}
}

/*-----------------------------------------------
 Layout - box
-----------------------------------------------*/

/* Layout - l-item-list
-----------------------------------------------*/
.l-col-list {
	position: relative;
	display: grid;
	justify-content: space-between;

	.c-hdg--bld {
		text-align: center;
		color: var(--color-brw);
	}
}
.l-col-list__img {
	position: relative;
	max-width: max-content;
	margin: 0 auto 6%;
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.l-col-list {
	row-gap: 5em;

	&.is-col2 {
		grid-template-columns: repeat(2,min(48%,550px));
	}
	&.is-col3 {
		grid-template-columns: repeat(3,min(31.2%,410px));
	}
	&.is-col4 {
		grid-template-columns: repeat(4,23.4%);
	}
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.l-col-list {
	row-gap: 2.6em;

	&.is-col3 > *:not(:last-child) {
		padding-bottom: 8%;
		border-bottom: 1px solid var(--color-bdr);
	}
}
.l-col-list__img {
	width: 80%;
	margin-bottom: 5%;
}
}


/*---------------------------------------------------------
 Layout - bnr
---------------------------------------------------------*/
.l-bnr-m {
	display: block;
	width: 45vw;
	max-width: max-content;
	margin-inline: auto;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.l-bnr-m {
	width: 80%;
}
}

/* Layout - bnr - l-bnr-cat
-----------------------------------------------*/
.l-bnr-cat {
	max-width: 953px;
	display: grid;
	justify-content: space-between;
	grid-template-columns: repeat(3,31.1%);
	row-gap: 3.6em;
	margin-inline: auto;
}
.l-bnr-cat > li {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
	row-gap: 0;
}
.l-bnr-cat__img {
	position: relative;
	max-width: max-content;
	margin: 0 auto 8%;

	&::after {
		position: absolute;
		content: "";
		background: linear-gradient(to top, var(--accent-color), transparent 50%);
		width: 100%;
		height: 100%;
		inset: 0;
		opacity: 0.8;
	}
}
.l-bnr-cat__txt {
	width: 95%;
	max-width: 260px;
	margin-inline: auto;
	font-size: min(1.6vw,94%);
	font-weight: var(--fw-bold);
	line-height: 1.6;
}
.l-bnr-cat .c-btn-bdr {
	width: 95%;
	max-width: 260px;
	margin: 0 auto;

	> a {
		min-width: 100%;
		height: 2.6em;
		font: var(--font-min);
		font-size: min(2.2vw,156%);
	}
	.c-icon {
		font-size: 45%;
		background-color: var(--accent-color);
	}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.l-bnr-cat {
	grid-template-columns: repeat(2,48%);
	row-gap: 2em;
}
.l-bnr-cat__txt {
	font-size: 95%;
}
.l-bnr-cat .c-btn-bdr a {
	font-size: 100%;
}
}


/*---------------------------------------------------------
 Layout - form
---------------------------------------------------------*/
.l-form {
	color: #FFF;

	.c-bg-color {
		background-color: var(--color-brw-300);
	}
	.c-hdg--deco {
		--color-grd: #b2deeb;
		background-color: #97847a;
	}
}
.l-form__inner {
	width: 92%;
	max-width: 900px;
	margin-inline: auto;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.l-form__inner {
	width: 96%;
}
}

/* Form - form-cta
-----------------------------------------------*/
.l-form-cta {
	color: var(--color-base);
	background-color: #fff;
	padding: 3.5%;
	border-radius: 10px;
	margin: 5% auto 3%;

	.c-hdg--bld {
		color: var(--color-brw-300);
		font-size: min(2vw,125%);
		white-space: nowrap;
		margin-bottom: 0;
	}
	& dd {
		display: flex;
		justify-content: center;
		align-items: center;
		column-gap: 4%;
	}
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.l-form-cta {
	display: flex;
	/* flex-wrap: wrap; */
	justify-content: center;
	align-items: center;
	column-gap: 4%;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.l-form-cta {
	padding: 7% 6%;
	margin: 8% auto 3%;

	.c-hdg--bld {
		text-align: center;
		font-size: 105%;
		margin-bottom: .8em;
	}
}
}





/* ========================================================
  
  Navigation

======================================================== */

/*-----------------------------------------------
 Navigation - menu
-----------------------------------------------*/

/* Navigation - menu - c-menu-arw
-----------------------------------------------*/
.c-menu-arw {
	display: grid;
	flex-wrap: wrap;
	gap: 2em;
	line-height: 1.4;
}
.c-menu-arw a {
	position: relative;
	display: block;
	padding-left: 1.4em;

	&::before {
		position: absolute;
		font-family: 'fontello';
		content: '\e801';
		left: -0.2em;
		top: 0;
		opacity: 0;
		transition: opacity .5s, left .5s;
	}
	&:hover::before {
		left: 0;
		opacity: 1;
	}
}
/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {

.c-menu-arw {
	gap: 1.2em;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-menu-arw {
	grid-template-columns: repeat(2,50%);
	gap: 1.2em;
	font-size: 82%;
	font-feature-settings: "palt"
}
}

/* Navigation - menu - c-menu--job
-----------------------------------------------*/
.c-menu--job {
	display: grid;
	flex-wrap: wrap;
	gap: 2em;
	line-height: 1.4;
}
.c-menu--job a {
	position: relative;
	display: block;
	color: #FFF;
	padding-left: 1.4em;

	&::before {
		position: absolute;
		font-family: 'fontello';
		content: '\e801';
		left: -0.2em;
		top: 0;
		opacity: 0;
		transition: opacity .5s, left .5s;
	}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

}






/* ========================================================
  
  Component

======================================================== */


/*-----------------------------------------------
 Component - text
-----------------------------------------------*/
.c-txt--link {
	text-decoration: underline;
	text-underline-offset: .1em;
}
.c-txt--link:hover {
	text-decoration: none;
	color: var(--accent-color);
}

.c-txt--ast {
	display: block;
	font-size: 94%;
	line-height: 1.6;
	letter-spacing: .08em;
	margin-top: 1em;
}
ul.c-txt--ast {
	display: grid;
	row-gap: .2em;
}

.c-txt-center {
	text-align: center;
	font-size: 112%;
	font-weight: var(--fw-bold);
	line-height: 1.8;
	margin-top: 2em;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-txt--ast {
	font-size: 80%;
	letter-spacing: .04em;
}

.c-txt--radi {
	font-size: 110%;
}

.c-txt-center {
	font-size: 105%;
	line-height: 1.6;
	margin-top: 1.6em;
}
}


/*-----------------------------------------------
 Component - scroll
-----------------------------------------------*/
.scl-area {
	position: relative;

	--scr-bg-color: #d6d4c8;
}
.scl-area__txt {
	text-align: center;
	font-size: 80%;
	line-height: 1.4;
	margin-bottom: 1em;
	opacity: 0.8;
}
/* scrollbar */
.scl-area {
	&::-webkit-scrollbar {
		width: 4px;
		height: 4px;
	}

	&::-webkit-scrollbar-track {
		background: var(--scr-bg-color);
		border-radius: 2px;
	}

	&::-webkit-scrollbar-thumb {
		background-color: var(--color-brw);
		border-radius: 2px;

		&:hover {
			background-color: #555;
		}
	}
}

/* Firefox */
@-moz-document url-prefix(){
.scl-area {
	scrollbar-width: thin;         /* auto, thin, none */
	scrollbar-color: var(--accent-color) transparent; /* thumb track */
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.scl-area {
	overflow-x: scroll;
	padding-bottom: 8%;
}
}

/*-----------------------------------------------
 Component - accordion
-----------------------------------------------*/
.c-acd {
	position: relative;
}
.c-acd__trigger {
	position: relative;
	cursor: pointer;
	transition: color .5s, background-color .5s;
}
.c-acd__content {
	display: none;
}
.c-acd__close {
	cursor: pointer;
	opacity: 0;
	transition: opacity .2s .1s;
}
/*c-acd__icon*/
.c-acd__icon {
	position: relative;
	letter-spacing: normal;
	line-height: 1.0em;
	display: inline-block;
	vertical-align: middle;
	width: 1.1em;
	height: 1.1em;
	border-radius: 50%;
	translate: 0 -0.1em;
	transition: background-color .5s;

	&::before,
	&::after {
		content: "";
		position: absolute;
		width: .6em;
		height: 1px;
		background: currentcolor;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
	}
	&::after {
		transform: rotate(90deg);
		transition: transform 0.4s;
	}
}
.c-acd__trigger.is-active {
	.c-acd__icon::after {
		transform: rotate(0deg);
	}
	+ .c-acd__content .c-acd__close {
		opacity: 1;
	}
}

/*-----------------------------------------------
 Component - hover
-----------------------------------------------*/
.c-hov--zoom {
	position: relative;
	overflow: hidden;

	> img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transform: translateZ(0);
		transition: scale .6s;
	}
}
.blocklink:hover .c-hov--zoom img,
a:hover .c-hov--zoom img {
	scale: 1.08;
}



/*-----------------------------------------------
 Component - tab
-----------------------------------------------*/
[data-tab] {
	&.is-active {
		pointer-events: none;
	}
}
[data-tab-content] {
	display: none;

	&.is-active {
		display: block;
	}
}



/*-----------------------------------------------
 Component - contact
-----------------------------------------------*/
.c-cta-cap {
	text-align: center;
	font-size: 88%;
	font-weight: var(--fw-bold);
	line-height: 1.3;
	letter-spacing: .06em;
	white-space: nowrap;
	/* font-feature-settings: "halt"; */
	margin-bottom: .6em;
}

.l-cta-sp .c-cta-cap {
	color: var(--color-brw);
	padding: .4em;
	border-radius: 2em;
	background-color: #e0dec5;
}

/* Component - contact - c-cta-tel
-----------------------------------------------*/
.c-cta-tel {
	font: var(--font-en);
	font-size: min(3.6vw,275%);
	letter-spacing: .04em;
	white-space: nowrap;

	&::before {
		font-family: 'fontello';
		content: '\e807';
		color: var(--color-cml);
		margin-left: -0.2em;
	}
}

.l-header .c-cta-tel {
	font-size: 205%;
}
.l-scroll .c-cta-tel {
	font-size: 193%;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-cta-tel {
	font-size: 6vw;
}
}

/* Component - contact - c-cta-btn
-----------------------------------------------*/
.c-cta-btn > a {
	position: relative;
	/* width: 100%; */
	width: 8em;
	/* min-width: 8em; */
	max-width: 100%;
	height: 3.2em;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: .4em;
	color: #FFF;
	font-size: min(2vw,135%);
	font-weight: var(--fw-bold);
	letter-spacing: .1em;
	line-height: 1.2;
	white-space: nowrap;
	background-color: var(--color-brw);
	border-radius: .4em;
	padding: .5em;
	transition: filter .6s;

	&::before {
		position: absolute;
		content: "";
		background: linear-gradient(135deg, rgba(255,255,255,0.3), rgba(255,255,255,0));
		width: 60%;
		height: 100%;
		clip-path: polygon(55% 0, 100% 0, 100% 100%, 0 100%);
		inset: 0 0 0 auto;
	}
	&::after {
		position: absolute;
		content: "";
		background: rgb(255 255 255 / 0.5);
		width: 0.62em;
		aspect-ratio: 1;
		border-radius: 0 0 .2em 0;
		clip-path: polygon(100% 0, 100% 100%, 0 100%);
		inset: auto .25em .25em auto;
	}
	
	&:hover {
		filter: brightness(1.05);
	}
}
.c-cta-btn > a > div {
	position: relative;
	display: flex;
	align-items: center;
	column-gap: .4em;

	&::before {
		display: inline-block;
		content: "";
		background-repeat: no-repeat;
		background-position: center center;
		background-size: contain;
		min-width: 1.3em;
		aspect-ratio: 1;
	}
}
.c-cta-btn span {
	font: var(--font-en);
	font-size: 128%;
	letter-spacing: .04em;
	translate: 0 0.1em;
}

.c-cta-btn--line > a {
	background-color: #4cc764;

	> div::before {
		background-image: url(../images/common/icon-line.svg);
	}
}
.c-cta-btn--form > a {
	background-color: #ff9d00;

	> div::before {
		background-image: url(../images/common/icon-mail.svg);
	}
}
.c-cta-btn--tel > a {

	> div::before {
		background-image: url(../images/common/icon-tel.svg);
	}
}

/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

/* header */
.l-header__right .c-cta-btn--line {
	margin-top: .3em;

	> a {
		width: 100%;
		height: 2.4em;
		font-size: 81%;
		border-radius: 2em;

		&::before,
		&::after {
			display: none;
		}

		> div::before {
			min-width: 3.4em;
			background-image: url(../images/common/icon-line-bdr.svg);
		}
	}
}

.l-header__right .c-cta-btn--form > a {
	height: 100%;
	font-size: 115%;
	background: linear-gradient(to right, #ffb700, #e34e24);
	border-radius: 0;

	&::after {
		border-radius: 0;
	}
	> div {
		flex-direction: column;

		&::before {
			margin-bottom: .6em;
		}
	}
	span {
		font-size: 178%;
	}
}

/* header */
.l-scroll .c-cta-btn > a {
	font-size: 96%;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-cta-btn > a {
	flex-direction: row;
	font-size: 3.5vw;
}
#sp_footer .c-cta-btn > a {
	width: auto;
}
}

/* Component - contact - c-cta-wrap
-----------------------------------------------*/
.c-cta-wrap {
	position: relative;
	width: 100%;
	max-width: 800px;
	display: flex;
	align-items: center;
	column-gap: 2%;

	> * {
		flex: 1;
	}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-cta-wrap {
	justify-content: center;
}
}


/*-----------------------------------------------
 Component - heading
-----------------------------------------------*/
/* c-hdg--min */
.c-hdg--min {
	position: relative;
	font: var(--font-min);
	font-size: min(187%,2.8vw);
	line-height: 1.5;
	letter-spacing: .08em;
	margin-bottom: .5em;
}

/* c-hdg--bg */
.c-hdg--bg {
	position: relative;
	text-align: center;
	color: #FFF;
	font: var(--font-min);
	font-size: min(211%,2.8vw);
	line-height: 1.3;
	letter-spacing: .16em;
	background-color: var(--accent-color);
	padding: .8em 1em;
	margin-bottom: 1.2em;
}

.c-hdg--bbl {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	font-size: min(2.2vw,150%);
	font-weight: var(--fw-bold);
	line-height: 1.5;
	letter-spacing: .08em;
	color: #FFF;
	background-color: var(--accent-color);
	border-radius: .6em;
	padding: .8em 2em;
	margin: 0 auto .6em;

	&::before {
		position: absolute;
		content: "";
		background-color: inherit;
		width: .7em;
		height: .7em;
		clip-path: polygon(0 0, 100% 0, 50% 100%);
		inset: auto 0 -0.6em 0;
		margin: auto;
	}
}

.c-hdg--bld {
	position: relative;
	font-size: min(2.4vw,164%);
	font-weight: var(--fw-bold);
	line-height: 1.5;
	letter-spacing: .12em;
	margin-bottom: .4em;
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-hdg--min {
	font-size: 130%;
	line-height: 1.5;
	letter-spacing: .08em;
}

.c-hdg--bg {
	font-size: 130%;
	letter-spacing: .1em;
}

.c-hdg--bbl {
	font-size: 120%;
}

.c-hdg--bld {
	font-size: 115%;
	letter-spacing: .05em;
}
}

/* Component - heading - deco
-----------------------------------------------*/
.c-hdg--en {
	position: relative;
	color: var(--accent-color);
	font: var(--font-en);
	font-size: min(2.6vw,1.87rem);
	letter-spacing: .08em;
	margin-bottom: 1em;
}
.c-hdg--en:last-child {
	margin-bottom: 0;
}

.c-hdg--deco {
	--color-grd: #def5b8;

	position: relative;
	max-width: max-content;
	text-align: center;
	font: var(--font-en);
	font-size: min(6.5vw,4.37rem);
	letter-spacing: .08em;
	line-height: 1.1;
	white-space: nowrap;
	margin-bottom: .2em;
	
	background-color: #dbdede;
	background-image: radial-gradient(var(--color-grd), transparent 50%);
    background-position: center center;
    background-size: 100% 4em;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

	&.is-center {
		margin-inline: auto;
	}
	&.size-lg {
		font-size: min(8vw,6.25rem);
	}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-hdg--en {
	font-size: 3.5vw;
	margin-bottom: .8em;
}
.c-hdg--deco {
	font-size: 10vw;

	&.size-lg {
		font-size: 10vw;
	}
}
}


/*-----------------------------------------------
 Component - title
-----------------------------------------------*/
.c-title--enjp {
	display: grid;
	row-gap: 1em;
	margin-bottom: 5%;

	> * {
		margin-bottom: 0 !important;
	}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-title--enjp {
	row-gap: .8em;
	margin-bottom: 8%;
}
}


/*-----------------------------------------------
 Component - text_deco
-----------------------------------------------*/
.c-txt--marker {
	position: relative;
	&::before {
		position: absolute;
		content: "";
		background-color: rgba(57,158,177,0.2);
		width: 100%;
		height: .25em;
		border-radius: .2em;
		left: 0;
		bottom: -0.18em;
	}
}
/*c-txt--fuki*/
.c-txt--fuki {
	position: relative;
	text-align: center;
	max-width: max-content;
	letter-spacing: .12em;
	line-height: 1.5;
	margin: 0 auto 1.5em;

	&::before,
	&::after {
		position: absolute;
		display: inline-block;
		content: "";
		background-color: currentColor;
		width: 1px;
		height: 1.2em;
		bottom: 0;
	}
	&::before {
		rotate: -32deg;
		right: calc(100% + 1em);
	}
	&::after {
		rotate: 32deg;
		left: calc(100% + 1em);
	}
}
/*c-txt--circle */
.c-txt--circle {
    position: relative;
    display: flex;
	flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
	/* font-size: min(2vw,1.35rem); */
    letter-spacing: .1em;
    line-height: 1.3;
    width: min(9.5em);
	background-color: var(--accent-color);
	aspect-ratio: 1;
    border-radius: 50%;
	transition-duration: .5s;
	transition-property: color, background-color, scale;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
/*c-txt--fuki*/
.c-txt--fuki {
	font-size: 120%;
	letter-spacing: .1em;
}
}


/*-----------------------------------------------
 Component - list
-----------------------------------------------*/
.c-list {
	display: grid;
	row-gap: .4em;
	text-align: left;
	line-height: 1.5;
}
.c-list > li {
	position: relative;
	padding-left: 1.4em;

	&::before {
		position: absolute;
		content: "";
		font-family: 'fontello';
		font-weight: normal;
		left: 0;
		top: 0;
	}
}

.c-list--point > li {
	padding-left: 1em;

	&::before {
		display: block;
		background-color: var(--accent-color);
		width: .7em;
		height: .7em;
		border-radius: 50%;
		left: 0;
		top: .4em;
	}
}

.c-list--dot > li::before {
	content: "・";
}

.c-list--check > li::before {
	content: '\e808';
	color: var(--accent-color);
}

.c-list--ast {
	font-size: 82%;
	margin-top: 1em;

	> li {
		padding-left: 1.1em;
		&::before {
			content: "※";
		}
	}
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.c-list--col2 {
	column-count: 2;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-list {
	row-gap: .4em;
}

.c-list--ast {
	font-size: 90%;
}
}


/*-----------------------------------------------
 Component - c-sns-list
-----------------------------------------------*/
.c-sns-list {
	display: flex;
	column-gap: .4em;
	font-size: 2.5rem;
	margin-top: .6em;
}
.c-sns-list li {
	width: 1em;
}
.c-sns-list a {
	display: block;
	transition: filter .5s;

	&:hover {
		filter: invert(0.8) sepia(1);
	}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-sns-list {
	font-size: 8vw;
}
}


/*-----------------------------------------------
 Component - bg
-----------------------------------------------*/
.c-bg-color {
	position: absolute;
	background-color: #f7f7f7;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100vw;
	height: 100%;
	left: 0;
	top: 0;
	margin-inline: calc(50% - 50vw);
	z-index: -2;
	overflow: clip;
	pointer-events: none;
}

.c-bg-img {
	position: absolute;
	height: auto;
	max-height: 100%;
	top: 0;
	z-index: -2;
	overflow: clip;

	> img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center center;
		pointer-events: none;
	}

	&.is-max {
		width: 100vw;
		left: calc(50% - 50vw);

		-webkit-mask-image: linear-gradient(to top, transparent 10%, black 80%);
		mask-image: linear-gradient(to top, transparent 10%, black 80%);
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-position: center;
		mask-position: center;
		-webkit-mask-size: auto;
		mask-size: auto;
	}

	&.pos-l,
	&.pos-r {
		width: 62vw;
		max-width: 960px;
		color: var(--color-bei);
		background-color: currentColor;

		&::after {
			position: absolute;
			content: "";
			width: 101%;
			height: 101%;
			inset: -1px;
			pointer-events: none;
			background:
				linear-gradient(to right, transparent 30%, currentColor 100%),
				linear-gradient(to bottom, transparent 50%, currentColor 100%);
		}
	}
	&.pos-l {
		left: calc(50% - 50vw);
	}
	&.pos-r {
		left: auto;
		right: calc(50% - 50vw);

		&::after {
			scale: -1 1;
		}
	}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-bg-img {
	&.pos-l,
	&.pos-r {
		width: 70vw;
	}
}
}

/*-----------------------------------------------
 Component - c-icon
-----------------------------------------------*/
.c-icon {
    position: relative;
	display: inline-block;
    text-align: center;
	letter-spacing: normal;
	color: #FFF;
	font-size: 0.7rem;
	line-height: 1.5;
	background-color: #ccc;
    border-radius: 1em;
	width: 2.9em;
	height: 1.5em;
	transition: color .4s, background-color .4s;
	overflow: hidden;


	&::before,
	&::after {
		position: absolute;
		display: block;
		font-family: 'fontello';
		content: '\e800';
		font-weight: normal;
		text-align: center;
		width: 100%;
		left: 0;
		top: 0;
		transition: all .4s;
		animation-delay: 0.1s;
		animation-fill-mode: both;
		animation-duration: 0.6s;
	}

	&.is-wh {
		color: var(--color-base);
		background-color: #FFF;
	}
	&.is-out::before {
		content: '\e803';
	}
}
.hov-arw:hover .c-icon,
a:hover .c-icon {
	background-color: var(--color-cml);

	&::after {
		animation-name: transformLeftRight;
	}
	&::before {
		animation-name: transformRightLeft;
	}
}
@keyframes transformLeftRight {
	0% {	translate: -100% 0;}
	100% {	translate: 0 0;}
}
@keyframes transformRightLeft {
	0% {	translate:  0 0;}
	100% {	translate:  100% 0;}
}

/*-----------------------------------------------
 Component - link
-----------------------------------------------*/

/* Component - link - c-btn-bdr
-----------------------------------------------*/
.c-btn-bdr {
	margin-top: 1.6em;

	> a {
		position: relative;
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		min-width: 16em;
		max-width: 100%;
		height: 3.7em;
		text-align: left;
		font-size: min(1.8vw,1rem);
		font-weight: var(--fw-bold);
		letter-spacing: .1em;
		line-height: 1.2;
		padding: .5em 2em .5em .1em;
		border-bottom: 1px solid #ccc;
	}

	.c-icon {
		position: absolute;
		font-size: min(70%,0.7rem);
		right: 0;
		top: 50%;
		translate: 0 -50%;
	}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-btn-bdr {
	text-align: center;
	margin-top: 1em;

	> a {
		min-width: 14em;
		height: 3.2em;
		font-size: 100%;
	}
}
.c-btn-bdr > a {
}
}

/* Component - link - c-btn-icon
-----------------------------------------------*/
.c-btn-icon {
	margin-top: .8em;

	> a {
		position: relative;
		display: inline-block;
		text-align: left;
		font-size: min(1.8vw,1rem);
		letter-spacing: .1em;
		line-height: 1.2;
		padding-right: 3em;
	}

	.c-icon {
		position: absolute;
		font-size: min(70%,0.7rem);
		right: 0;
		top: 50%;
		translate: 0 -50%;
	}

	.u-font--en {
		font-size: 105%;
		font-weight: 500;
		letter-spacing: .05em;
	}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-btn-icon {
	margin-top: .6em;

	> a {
		font-size: 100%;
	}
}
}

/* Component - link - c-btn-bg
-----------------------------------------------*/
.c-btn-bg {
	margin-top: 1.4em;

	> a {
		position: relative;
		display: inline-flex;
		align-items: center;
		column-gap: .2em;
		width: 100%;
		min-width: 7.5em;
		max-width: 100%;
		height: 3em;
		text-align: left;
		font-size: min(1.4vw,1rem);
		font-weight: var(--fw-bold);
		letter-spacing: .1em;
		line-height: 1.2;
		color: #FFF;
		background-color: #937f75;
		border-radius: .5em;
		padding: .5em 1em;
		transition: filter .5s;

		> div.u-font--en {
			position: relative;
			translate: 0 0.1em;
		}
		&::before {
			font-family: 'fontello';
			content: '\e805';
		}
		&:hover {
			filter: brightness(1.08);
		}
		&:has(.c-icon) {
			padding-right: 2.5em;
		}
	}

	.c-icon {
		position: absolute;
		font-size: min(70%,0.7rem);
		background-color: transparent !important;
		right: 1em;
		top: 50%;
		translate: 0 -50%;
	}
}
.c-btn-bg.c-btn-bg--insta {
	> a {
		background-color: #fca6ad;
		&::before {
			content: '\e806';
		}
	}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-btn-bg {
	text-align: center;
	margin-top: 1em;

	> a {
		font-size: 90%;
	}

	.c-icon {
		right: .5em;
	}
}
}

/* Component - link - c-btn-wrap
-----------------------------------------------*/
.c-btn-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 1em 3%;
	margin-top: 1.4em;

	&.is-center {
		justify-content: center;
	}

	> * {
		margin-top: 0 !important;
	}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-btn-wrap {
	justify-content: center;
	row-gap: .6em;
}
}


/*---------------------------------------------------------
 Component - slider - swiper
---------------------------------------------------------*/
.swiper {
    overflow: visible !important;
	
	.swiper-wrapper {
		z-index: 0 !important;
	}
}
.c-slide--ticker {
	.swiper-wrapper {
		transition-timing-function: linear !important;	/*滑らかに流れ続ける*/
	}
	.swiper-slide {
		width: 36vw;
		max-width: max-content;
	}
}
.swiper-fade .swiper-slide {
    transition-property: opacity !important;	/* フェードモード時 共通調整 */
}

/*ドット*/
.swiper-pagination {
	display: flex;
	justify-content: center;
	gap: 1.6em;
	z-index: 1;
	font-size: 16px;
	margin-top: 5%;

	.swiper-pagination-bullet {
		position: relative;
		cursor: pointer;
		display: block;
		width: 1em;
		height: 1em;
		border-radius: 50%;
		background: #dbdede;
		opacity: 1 !important;
		transition: all 0.4s;
	}
	.swiper-pagination-bullet-active,
	.swiper-pagination-bullet:hover {
		background: #bfb28a;
	}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-slide--ticker {
	.swiper-slide {
		width: 50vw;
	}
}

/*ドット*/
.swiper-pagination {
	font-size: 10px;
}
}


/*---------------------------------------------------------
 Component - mv
---------------------------------------------------------*/
.c-mv {
	width: 65%;
	max-width: 700px;
	text-align: center;
	margin-inline: auto;

	> iframe {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 696 / 390;
	}
	.c-mv__txt {
		display: block;
		font-weight: var(--fw-bold);
		line-height: 1.5;
		margin-top: 1.5em;
	}
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.c-mv-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 1215px;
	gap: 3.5em 5%;
	margin-inline: auto;

	.c-mv {
		width: 47.5%;
	}
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-mv {
	width: 100%;
}
.c-mv-wrap {
	.c-mv {
		&:nth-of-type(n+2) {
			margin-top: 6%;
		}
		.c-mv__txt {
			margin-top: .8em;
		}
	}
}
}

/*-----------------------------------------------
 Component - box
-----------------------------------------------*/
.c-box-bg {
	position: relative;
	background-color: var(--color-ybei);
	border-radius: 1.5em;
	padding: min(8%,60px) 4% 4.5%;
	margin-inline: auto;
}
.c-box-bg .l-flt {
	margin-inline: auto;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-box-bg {
	padding: 10% 6%;
}
}







/* ========================================================
  
  Animation

======================================================== */
.u-anm--fade,
.u-anm--fadelist > li {
	opacity: 0;
	transition: opacity 1.5s ease;
}
.is-animated .u-anm--fade,
.is-animated.u-anm--fade,
.u-anm--fadelist.is-animated > li {
	opacity: 1;
}
.u-anm--fadelist > li:nth-of-type(2) {transition-delay: .2s}
.u-anm--fadelist > li:nth-of-type(3) {transition-delay: .4s}
.u-anm--fadelist > li:nth-of-type(4) {transition-delay: .6s}
.u-anm--fadelist > li:nth-of-type(5) {transition-delay: .8s}
.u-anm--fadelist > li:nth-of-type(6) {transition-delay: 1.0s}
.u-anm--fadelist > li:nth-of-type(7) {transition-delay: 1.2s}

.u-anm--up {
	opacity: 0;
	translate: 0 10px;
	transition: opacity 1s .2s, translate 1s .2s;
}
.is-animated .u-anm--up,
.is-animated.u-anm--up {
	opacity: 1;
	translate: 0 0;
}

.u-anm--zoom {
	opacity: 0;
	scale: 0.8;
	transition: scale 1s .3s, opacity 1s .4s;
}
.is-animated .u-anm--zoom,
.is-animated.u-anm--zoom {
	opacity: 1;
	scale: 1;
}

/*PC,Tablet
------------------------------------------*/
@media only screen and (min-width: 768px) {

/* .u-anm--up:nth-of-type(2),
.u-anm--fade:nth-of-type(2) {transition-delay: .2s}
.u-anm--up:nth-of-type(3),
.u-anm--fade:nth-of-type(3) {transition-delay: .4s} */
}

/* Animation - petal
-----------------------------------------------*/
.c-petal {
	position: absolute;

	left: 50%;
	top: 50%;
	left: calc(var(--x) / var(--wrap-width) * 100%);
	top: calc(var(--y) / var(--wrap-height) * 100%);

	width: 6vw;
	max-width: 80px;
	height: auto;
	aspect-ratio: 1;
	pointer-events: none;

	opacity: 0;

	translate: -50% -50%;
	rotate: var(--rotate);
	scale: 0.8;
	transform-origin: center center;
	will-change: translate, rotate, opacity;

	> img {
		width: 100%;
		height: 100%;

		animation:
			petal-float var(--float-duration, 5s)
			ease-in-out
			4s
			infinite;
	}

	&.is-animated {
		animation: petal-single 3.5s .2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	}
	&.fall-to-l {
		--translate-before: 80% -70%;
	}
	&.fall-to-r {
		--translate-before: -100% -70%;
	}
}
.c-petal-wrap {
	--wrap-width: 1536;
	--wrap-height: 500;

	width: 100%;
	height: calc(var(--wrap-height) / var(--wrap-width) * 100vw);
	max-height: calc(var(--wrap-height) * 1px);

	position: absolute;
	z-index: -1;

	&.is-animated .c-petal {
		animation: petal-single 3s .2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	}

	.c-petal {
		&:nth-of-type(2) {
			animation-delay: .1s;
		}
		&:nth-of-type(3) {
			animation-delay: .2s;
		}
		&:nth-of-type(4) {
			animation-delay: .3s;
		}
		&:nth-of-type(5) {
			animation-delay: .4s;
		}
	}

	&.type-spread {
		.c-petal {
			left: calc(var(--sx) / var(--wrap-width) * 100%);
			top: calc(var(--sy) / var(--wrap-height) * 100%);
			opacity: 0.3;
			rotate: var(--start-rotate);

			--animation-delay: .5s;

			&:nth-of-type(2n) {
				--start-rotate: 60deg;
			}
			&:nth-of-type(3n) {
				--start-rotate: -30deg;
			}
			&:nth-of-type(5n) {
				--start-rotate: 50deg;
			}
		}
		&.is-animated .c-petal {
			animation: petal-bloom 6s var(--animation-delay) cubic-bezier(0.22, 1, 0.36, 1) forwards;
		}
	}
}

@keyframes petal-bloom {
    from {
        opacity: 0.3;

		left: calc(var(--sx) / var(--wrap-width) * 100%);
		top: calc(var(--sy) / var(--wrap-height) * 100%);
		rotate: var(--start-rotate);
		scale: 0.7;
    }

    to {
        opacity: 1;

		left: calc(var(--x) / var(--wrap-width) * 100%);
		top: calc(var(--y) / var(--wrap-height) * 100%);
		rotate: var(--rotate);
		scale: 1;
    }
}

@keyframes petal-single {
    from {
        opacity: 0;

		translate: var(--translate-before);
		rotate: var(--rotate);
		scale: 0.7;
    }
    to {
        opacity: 1;

		translate: -50% -50%;
		rotate: var(--rotate);
		scale: 1;
    }
}

@keyframes petal-float {
	0%,100% {
		translate: 0 0;
	}

	50% {
		translate: 0 -8px;
	}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {


.c-petal-wrap {
	/* --wrap-width: 390; */
}
.c-petal {
	width: 13vw;
}
}



/* ========================================================
  
  Utility

======================================================== */
/* font */
.u-font--min {
	font-family: "Shippori Mincho", serif;
	font-weight: 400;
	letter-spacing: .06em;
}
.u-font--en {
	font: var(--font-en);
	letter-spacing: .1em;
	line-height: 1;
	font-optical-sizing: auto;
}

/* Font-weight */
.u-fw--bold{font-weight: var(--fw-bold);}
.u-fw--normal{font-weight: normal;}	

/* Font-weight */
.u-fz--sm{font-size: 94%;}
.u-fz--lg{font-size: 112%;}

/* Line-height */
.u-lh--l {line-height: 2.6;}

/* Text-align */
.u-align--l{text-align:left;}
.u-align--r{text-align:right;}
.u-align--c{text-align:center;}
.u-align--l-sp{text-align:center;}

/* Block-link */
.blocklink,
.blocklink_out,
.blocklink_ank{
	cursor:pointer;
}

/* text color */
.u-color--accent { color: var(--accent-color);}
.u-color--grn { color: var(--color-grn);}
.u-color--red { color: var(--color-red);}
.u-color--wine { color: var(--color-wine);}

/* background color */
.u-bg--wh {background-color: #fff;}
.u-bg--ivo {background-color: var(--color-ivo);}
.u-bg--bei {background-color: var(--color-bei);}

/* img */
img.size-max {width: 100%;}

/* radius */
.u-radi--full {border-radius:50%;}
.u-radi--10px {border-radius: 10px;}
.u-radi--20px {border-radius: min(2.4vw,20px);}
.u-radi--30px {border-radius: min(2.6vw,30px);}
.u-radi--50px {border-radius: clamp(30px,4.5vw,50px);}
.u-radi--60px {border-radius: clamp(40px,5vw,60px);}


/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {

/* Font-weight */
.u-fz--lg{font-size: 105%;}

/* Line-height */
.u-lh--l {line-height: 2.3;}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

/* Text-align */
.u-align--l-sp{text-align:left;}

/* Font-weight */
.u-fz--sm{font-size: 90%;}
.u-fz--lg{font-size: 100%;}

/* Line-height */
.u-lh--l {line-height: 2.1;}
}

/*-----------------------------------------------
 Utility - size
-----------------------------------------------*/
.u-size-20 {font-size: min(2vw,125%);}
.u-size-25 {font-size: min(2.2vw,156%);}
.u-size-35 {font-size: min(3.2vw,218%);}
.u-size-40 {font-size: min(3.5vw,250%);}
.u-size-43 {font-size: min(3.7vw,268%);}
.u-size-45 {font-size: min(4vw,281%);}
.u-size-50 {font-size: min(4.4vw,312%);}
.u-size-60 {font-size: min(5.2vw,375%);}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.u-size-20 {font-size: 115%;}
.u-size-25 {font-size: 120%;}
.u-size-35 {font-size: 135%;}
.u-size-40 {font-size: 140%;}
.u-size-43 {font-size: 145%;}
.u-size-45 {font-size: 145%;}
.u-size-50 {font-size: 160%;}
.u-size-60 {font-size: 165%;}
}

/*-----------------------------------------------
 Utility - border/padding
-----------------------------------------------*/
.u-pdg--s,
.u-pdg--m,
.u-pdg--l {
	position: relative;
}
.u-pdg--s {
	padding: min(6vw,80px) 0;
}
.u-pdg--m {
	padding: min(8vw,100px) 0;
}
.u-pdg--l {
	padding: min(10vw,120px) 0;
}
.u-pdg--xl {
	padding: min(12vw,150px) 0;
}

.u-border-btm {
	padding-bottom: min(6%,60px);
	margin-bottom: min(6%,60px);
	border-bottom: 1px solid var(--color-bdr);
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.u-pdg--s {
	padding: 10% 0;
}
.u-pdg--m {
	padding: 12% 0;
}
.u-pdg--l {
	padding: 15% 0;
}
.u-pdg--xl {
	padding: 18% 0;
}
.u-border-btm {
	padding-bottom: 10%;
	margin-bottom: 10%;
	border-width: 1px;
}
}


/*---------------------------------------------------------
 anchor
---------------------------------------------------------*/
/* [id] {
	position: relative;
} */
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {
[id] {
	scroll-margin-top: min(14vw,100px);
}
}

/*---------------------------------------------------------
 Utility - width
---------------------------------------------------------*/
.max_width,
.w1440,.w1400,
.w1360,.w1340,.w1300,
.w1280,.w1240,.w1200,
.w1150,.w1100 {
	box-sizing: content-box;
	width: 92%;
	padding: 0 4%;
	margin-inline: auto;
}
.max_1500 {
	max-width: 1500px;
	margin-inline: auto;
}
.w1440 {max-width: 1440px;}
.w1400 {max-width: 1400px;}
.w1360 {max-width: 1360px;}
.w1340 {max-width: 1340px;}
.w1300 {max-width: 1300px;}
.w1280 {max-width: 1280px;}
.w1240 {max-width: 1240px;}
.w1200 {max-width: 1200px;}
.w1150 {max-width: 1150px;}
.w1100 {max-width: 1100px;}

.u-inner {
	width: 96%;
	max-width: 1200px;
	margin-inline: auto;
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.max_width,
.w1440,.w1400,
.w1360,.w1340,.w1300,
.w1280,.w1260,.w1200,
.w1150,.w1100 {
	width: 90%;
	padding: 0 5%;
}
}

/*---------------------------------------------------------
margin
---------------------------------------------------------*/
.u-mb--xlg {margin-bottom: 150px;}
.u-mb--lg {margin-bottom: 120px;}
.u-mb--md {margin-bottom: 100px;}
.u-mb--sm {margin-bottom: 80px;}
.u-mb--xs {margin-bottom: 60px;}
.mgn_b_1em {margin-bottom: 1em;}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {

.u-mb--xlg {margin-bottom: 12%;}
.u-mb--lg {margin-bottom: 10%;}
.u-mb--md {margin-bottom: 8%;}
.u-mb--sm {margin-bottom: 7%;}
.u-mb--xs {margin-bottom: 5%;}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.u-mb--xlg {margin-bottom: 15%;}
.u-mb--lg {margin-bottom: 14%;}
.u-mb--md {margin-bottom: 12%;}
.u-mb--sm {margin-bottom: 10%;}
.u-mb--xs {margin-bottom: 8%;}
}


/* PC
------------------------------------------*/
@media only screen and (min-width: 960px)  {
.tb_only{display:none !important;}
.sp_only{display:none !important;}
.sp_tb{display:none !important;}
}

/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
.pc_only{display:none !important;}
.sp_only{display:none !important;}
.sp_pc{display:none !important;}
}

/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.pc_only{display:none !important;}
.tb_only{display:none !important;}
.tb_pc{display:none !important;}
}