@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 300 100%/1.6 "Noto Serif JP", serif;
	--font-en: normal normal 400 100%/1 "EB Garamond", serif;

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

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

	--color-blu: #59a3ad;
	--color-grn: #306555;
	--color-grn-300: #4ca08c;
	--color-lgrn: #82b264;
	--color-gld: #9e8d3d;
	--color-yel: #fff799;
	--color-org: #f15a24;
	--color-coral: #db8479;
	--color-pnk: #d97f84;
	--color-ppl: #997c97;
	--color-ppl-100: #f6f1fa;
	--color-ppl-300: #b184d9;
	--color-wine: #a51f52;
	--color-red: #cc2d2d;
	--color-bei: #f0eee9;
	--color-ivo: #f9faf3;
	--color-gry-100: #e6e6e6;
	--color-brw-600: #372308;

	--accent-color: var(--color-gld);

	--grd-grn: linear-gradient(to bottom, rgba(48,101,85,1), rgba(57,158,126,0.8));

	--clip-arrow: polygon(0 0, 100% 0, 50% 100%);
}

.u-accent-blu { --accent-color: var(--color-blu );}
.u-accent-pnk { --accent-color: var(--color-pnk );}
.u-accent-ppl { --accent-color: var(--color-ppl );}
.u-accent-job { --accent-color: var(--job-color );}

.u-accent-primary { --accent-color: var(--color-primary);}
.u-accent-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: 17px;
}
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) {

html {
	font-size: 16px;
}
body {
	line-height: 1.8;
}
}

@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
-----------------------------------------------*/
header {
	position: relative;
	width: 100%;
	left: 0;
	top: 0;
	padding: min(1.8vw,30px) min(1.6vw,25px);
	z-index: 100;
}
.l-header__left {
	max-width: max-content;
}
.l-header__txt {
	font-size: min(0.9vw,0.82rem);
	font-size: 36%;
	line-height: 1.4;
	letter-spacing: .1em;
	margin-bottom: .4em;
}
/* c-logo */
.c-logo {
	display: block;
	text-align: left;
	
	font: var(--font-min);
	font-size: min(2.4vw,223%);
	letter-spacing: .15em;
	line-height: 1.2;
	white-space: nowrap;
}
.c-logo .c-logo__corp {
	position: relative;
	display: inline-block;
	padding-right: 1.2em;
}
.c-logo .c-logo__corp::before {
	position: absolute;
	display: block;
	content: "";
	background: url(../images/common/logo-mark.svg) no-repeat;
	background-size: contain;
	width: 3.1em;
	height: 1.6em;
	right: 0;
	bottom: 0;
	z-index: -1;
}
.c-logo .c-logo__corp span {
	display: block;
	font-size: 48%;
	letter-spacing: .15em;
	margin-bottom: .2em;
}
.c-logo .c-logo__site {
	font-size: 102%;
}
.c-logo .c-logo__site span {
	display: block;
	color: rgb(178 159 110 / 0.2);
	font: var(--font-en);
	font-size: 230%;
	letter-spacing: .12em;
	line-height: 0.7;
	margin-bottom: -0.2em;
}

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

.l-header__inner {
	display: flex;
	justify-content: space-between;
}
.l-header__right {
	width: 34vw;
	max-width: 470px;
}

/* c-logo */
.c-logo {
	display: flex;
	align-items: center;
	column-gap: 1em;
}
.c-logo .c-logo__site {
	padding-left: .6em;
	border-left: 1px solid var(--color-bdr);
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

header {
	padding: 4vw;
}
.c-logo {
	font-size: 6.8vw;
}

.l-header__right {
	display: none;
}
}


/*-----------------------------------------------
 Layout - l-nav
-----------------------------------------------*/
.l-nav {
	position: relative;
	box-shadow: 0 10px 10px rgb(0 0 0 / 0.05);
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.l-nav {
	display: none;
}
}

/* Layout - l-nav - inmenu
-----------------------------------------------*/
.l-nav__inmenu {
	display: none;
	position: absolute;
	width: 100vw;
	font-size: min(1.7vw,1rem);
	line-height: 1.3;
	top: 100%;
	left: 0;
	color: #FFF;
	background-color: var(--color-grn);
	padding: 2em 6.5%;
	z-index: 999;
	margin-inline: calc(50% - 50vw);
}
.l-nav__inmenu .c-hdg--min {
	font-size: min(2vw,152%);
}

/* list */
.l-nav__inmenu .c-menu--arw {
	display: block;
}
.l-nav__inmenu .c-menu--arw.is-col3 {
	column-count: 3;
}
.l-nav__inmenu .c-menu--arw > li {
	margin-bottom: 1em;
}
.l-nav__inmenu li a:hover {
}


/*-----------------------------------------------
 Layout - scl_header
-----------------------------------------------*/
#scl_header {
	position: fixed;
	background-color: #FFF;
	z-index: 500;
	left: 0;
	top: 0;
	width: 100%;
	translate: 0 -101%;
}
#scl_header.is-show {
	display: block;
	translate: 0 0;
	opacity: 1;
    animation: sclAnimation 1.0s;
	box-shadow: 0 10px 10px rgb(0 0 0 / 0.05);
}
.l-scroll__inner {
	position: relative;
	display: flex;
	justify-content: space-between;
}

@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% 8%;
}

/* Layout - drawer - l-drawer__menu
-----------------------------------------------*/
.l-drawer__inner.u-bg-grn {
	color: #FFF;
}
.l-drawer__inner.u-bg-grn .c-hdg--min:not(:first-child) {
	padding-top: 1.2em;
	margin-top: 1.5em;
	border-top: 1px solid currentColor;
}
.l-drawer__inner.u-bg-grn .c-menu--arw {
	grid-template-columns: auto;
	font-size: 3.8vw;
}
.l-drawer__inner.u-bg-grn .c-menu--arw a::before {
	color: var(--color-base);
	background-color: #fff;
}


/*-----------------------------------------------
 Layout - footer
-----------------------------------------------*/
footer {
	position: relative;
	background-color: var(--color-lgry);
}
.l-footer__bg {
	position: relative;
	color: #FFF;
	padding: min(8vw,100px) 3.5% min(6vw,65px);
}

.l-footer .c-bg-color {
	background-color: var(--color-grn);
}
.l-footer .c-bg-img {
	opacity: 0.5;
	mix-blend-mode: multiply;
}

.l-footer__logo {
	margin-left: auto;
}
.copyright {
	display: block;
	text-align: right;
	font: var(--font-min);
	font-size: 76%;
	line-height: 1.4;
	letter-spacing: .18em;
	margin-top: 1.5em;
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.l-footer .c-bg-img {
	height: 100%;
	mask-image: unset !important;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.l-footer__bg {
	padding: 10% 5% 24vw;
}

.l-footer .c-acd__trigger {
	text-align: center;
	font: var(--font-en);
	font-size: 7vw;
	letter-spacing: .15em;
}
.l-footer .c-acd__icon {
	font-size: 80%;
	color: var(--color-grn);
	background-color: #FFF;
	margin-left: .6em;
}

.copyright {
	font-size: 60%;
	letter-spacing: .12em;
}
}

/* Layout - footer - sitemap
-----------------------------------------------*/
.l-sitemap {
	font-size: 88%;
	line-height: 1.4;
}
.l-sitemap > div {
	position: relative;
}
.l-sitemap p {
	font-weight: var(--fw-bold);
	margin-bottom: 1em;
}
.l-sitemap ul {
	display: grid;
	gap: 1em;
}
.l-sitemap ul a:hover {
	color: var(--color-yel);
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.l-sitemap {
	max-width: 1200px;
	display: flex;
	column-gap: 3%;
	margin-inline: auto;
}
.l-sitemap > div {
	padding-right: 3%;
}
.l-sitemap > div::after {
	position: absolute;
	content: "";
	background: linear-gradient(to bottom, rgb(255 255 255 / 1), rgb(255 255 255 / 0));
	width: 1px;
	height: 100%;
	right: 0;
	top: 0;
}
.l-sitemap > div:last-of-type {
	width: 60%;
	padding-right: 0;
}
.l-sitemap > div:last-of-type:after {
	display: none;
}

.l-sitemap .c-list--col2 {
	grid-auto-flow: column;
	grid-template-rows: repeat(6, auto);
	column-gap: 5%;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.l-sitemap {
	display: none;
	padding-top: 8%;
}
.l-sitemap > div {
	padding: 0 2% 8%;
	margin-bottom: 8%;
}
.l-sitemap > div::after {
	position: absolute;
	content: "";
	background: linear-gradient(to right, rgb(255 255 255 / 1), rgb(255 255 255 / 0));
	width: 100%;
	height: 1px;
	left: 0;
	bottom: 0;
}
.l-sitemap > div:last-of-type:after {
	display: none;
}

.l-sitemap ul {
	gap: .5em;
}
.l-sitemap ul:not(.c-list) {
	grid-auto-flow: column;
	grid-template-rows: repeat(4, auto);
}
}



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

.l-fixed-cta {
	display: none !important;
}
}

/*-----------------------------------------------
 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;
}
/* .l-fv__img::before {
	position: absolute;
	content: "";
	background: rgba(0,0,0,0.2);
	width: 100%;
	height: 100%;
	inset: 0;
} */


/*---------------------------------------------------------
 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%;
}
}





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

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

/*-----------------------------------------------
 Navigation - l-nav__list
-----------------------------------------------*/
.l-nav__list {
	/* position: relative; */
	width: 100%;
	height: 6.5em;
	display: flex;
	column-gap: 2em;
	font: var(--font-min);
	font-size: min(1.35vw,1.05rem);
	letter-spacing: .18em;
	line-height: 1.3;
}

.l-nav__list > li > a {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	text-align: center;
	white-space: nowrap;
}
.l-nav__list > li > a:hover,
.l-nav__list > li.is-active > a {
	color: var(--color-grn);
}

.l-nav__list > li.has-inmenu > a {
	padding-right: 1.2em;
}
.l-nav__list > li.has-inmenu > a::after {
	position: absolute;
	display: inline-block;
	font-family: 'fontello';
	content: '\e801';
	color: #a79564;
	font-size: 160%;
	line-height: 1;
	rotate: 90deg;
	right: -0.2em;
	top: 54%;
	translate: 0 -50%;
}

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

.l-nav .l-nav__list {
	justify-content: center;
}
.l-scroll .l-nav__list {
	column-gap: 1.8em;
	font-size: min(1.1vw,0.88rem);
	padding-left: 4%;
}

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

.l-scroll .l-nav__list {
	column-gap: 1.4em;
	font-size: min(1.3vw,0.88rem);
	letter-spacing: .12em;
}
.l-nav__list > li > a > br {
	display: block;
}
}


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

/* Navigation - menu - c-menu--arw
-----------------------------------------------*/
.c-menu--arw {
	display: flex;
	flex-wrap: wrap;
	gap: 1em 2em;
	font: var(--font-min);
	font-size: 88%;
	line-height: 1.4;
}
.c-menu--arw a {
	position: relative;
	display: block;
	padding-left: 2em;
}
.c-menu--arw a::before {
	position: absolute;
	display: block;
	font-family: 'fontello';
	content: '\e801';
    text-align: center;
	letter-spacing: normal;
	color: #FFF;
	font-size: 100%;
	line-height: 1.5;
	background-color: var(--color-grn);
    border-radius: 50%;
    width: 1.5em;
	aspect-ratio: 1;
	transition: color .4s, background-color .4s;
	left: 0;
	top: 0;
}

.l-nav__inmenu .c-menu--arw a::before {
	color: var(--color-base);
	background-color: #FFF;
}
.l-nav__inmenu .c-menu--arw a:hover {
	color: var(--color-yel);
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-menu--arw {
	display: grid;
	grid-template-columns: repeat(2,50%);
	column-gap: 5%;
	font-size: 4.2vw;
	font-feature-settings: "palt"
}
}


/*-----------------------------------------------
 Navigation - bnr
-----------------------------------------------*/

/* Navigation - bnr - com_bnr_insta
-----------------------------------------------*/





/* ========================================================
  
  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;
	color: #999;
	font-size: 80%;
	line-height: 1.8;
	letter-spacing: .08em;
	margin-top: 1em;
}
ul.c-txt--ast {
	display: grid;
	row-gap: .2em;
}

.c-txt--radi {
	position: relative;
	text-align: center;
	font: var(--font-min);
	font-size: min(2vw,129%);
	letter-spacing: .08em;
	line-height: 1.3;
	color: #FFF;
	background-color: var(--accent-color);
	border-radius: 100vmax;
	padding: .8em 1.2em;
	margin-bottom: 1.6em;
}

.c-txt--bld {
	text-align: center;
	color: var(--color-gld);
	font-size: min(2.1vw,135%);
	font-weight: var(--fw-bold);
	line-height: 1.8;
	margin-top: 1.5em;
}

.c-txt--min {
	text-align: center;
	font: var(--font-min);
	font-size: min(2.8vw,176%);
	letter-spacing: .12em;
	line-height: 1.8;
	margin-top: 1em;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-txt--ast {
	font-size: 78%;
	letter-spacing: .04em;
	line-height: 1.6;
}

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

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

.c-txt--min {
	font-size: 120%;
	letter-spacing: .06em;
}
}


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

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

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

.scl-area::-webkit-scrollbar-thumb {
	background-color: var(--accent-color);
	border-radius: 2px;
}

.scl-area::-webkit-scrollbar-thumb: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__icon*/
.c-acd__icon {
	position: relative;
	letter-spacing: normal;
	line-height: 1.0em;
	display: inline-block;
	vertical-align: middle;
	width: 1.2em;
	height: 1.2em;
	border-radius: 50%;
	translate: 0 -0.1em;
	transition: background-color .5s;
}
.c-acd__icon::before,
.c-acd__icon::after {
	content: "";
	position: absolute;
	width: .6em;
	height: 1px;
	background: currentcolor;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}
.c-acd__icon::after {
	transform: rotate(90deg);
	transition: transform 0.4s;
}
.is-active .c-acd__icon::after {
	transform: rotate(0deg);
}

/*-----------------------------------------------
 Component - hover
-----------------------------------------------*/
.c-hover--zoom {
	position: relative;
	overflow: hidden;
}
.c-hover--zoom img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: translateZ(0);
	transition: scale .6s;
}
a:hover .c-hover--zoom img {
	scale: 1.08;
}


/*-----------------------------------------------
 Component - contact
-----------------------------------------------*/

/* Component - contact - c-cnsl-box
-----------------------------------------------*/
.c-cnsl-box {
	position: relative;
	text-align: center;
	color: #FFF;
	padding: 7% 4% 4.2%;
	margin-top: min(80px,6vw);
}
.c-cnsl-box .c-bg-color {
	width: 100%;
	height: 100%;
	background-color: var(--color-grn);
	inset: 0;
	margin-inline: auto;
}
.c-cnsl-box .c-bg-img {
	width: 72%;
	height: 100%;
	color: var(--color-grn);
	right: 0;
	opacity: 0.5;
}
.c-cnsl-box .c-hdg--bbl {
	position: absolute;
	width: 96%;
	max-width: max-content;
	left: 50%;
	top: 0;
	translate: -50% -50%;
}
.c-cnsl-box .c-hdg--min {
	color: var(--color-yel);
	font-size: min(6vw,411%);
	margin-bottom: .3em;
}
.c-cnsl-box .c-cta-wrap {
	margin-top: 1.5em;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-cnsl-box {
	padding: 14% 6% 8%;
	margin-top: 22%;
}
.c-cnsl-box .c-bg-img {
	width: 100%;
	height: auto;
}
.c-cnsl-box .c-hdg--bbl {
	font-size: 100%;
	letter-spacing: .02em;
}
.c-cnsl-box .c-hdg--min {
	font-size: 170%;
}
}

/* Component - contact - c-cta-tel
-----------------------------------------------*/
.l-modal .c-cta-tel::before {
	top: .05em;
}

/* Component - contact - c-cta-btn
-----------------------------------------------*/
.c-cta-btn {
	position: relative;
	width: 100%;
	max-width: 100%;
	height: 4.8em;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: .4em;
	color: #FFF;
	font: var(--font-min);
	font-size: min(2.2vw,135%);
	letter-spacing: .08em;
	line-height: 1.2;
	white-space: nowrap;
	padding: .6em .2em;
	transition: filter .6s;
}
.c-cta-btn::before {
	position: absolute;
	content: "";
	background: radial-gradient(rgba(255,255,255,0.15), rgba(255,255,255,0));
	width: 100%;
	height: 100%;
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
	inset: 0;
}

.c-cta-btn__txt::before {
	display: inline-block;
	content: "";
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	min-width: 1.75em;
	min-height: 1.3em;
	vertical-align: -0.35em;
}
.c-cta-btn__txt br {
	display: none;
}

.c-cta-btn small {
	display: block;
	font-family: var(--ff-gothic);
	font-weight: var(--fw-bold);
	letter-spacing: .08em;
	font-size: 58%;
}
.c-cta-btn small span {
	display: inline-block;
	font: var(--font-en);
	font-size: 140%;
	transform: skewX(-10deg);
}

.c-cta-btn .c-cta-tel {
	font-size: 130%;
}

.c-cta-btn .c-icon {
	position: absolute;
	right: 10px;
	bottom: 0;
	translate: 0 50%;
	transition: opacity .2s;
}

.l-scroll:not(.is-show) .c-cta-btn .c-icon {
	opacity: 0;
}

.c-cta-btn:hover {
	filter: brightness(1.1);
}

.c-cta-btn--tel {background: linear-gradient(135deg, #0d4780 50%, #003d7a 100%);}
.c-cta-btn--tel .c-cta-btn__txt::before,
.c-cta-btn--tel .c-cta-tel::before {
	background-image: url(../images/common/icon-tel.svg);
	min-width: 1.3em;
	left: -0.1em;
}

.c-cta-btn--rsv {background: linear-gradient(135deg, #9a2828 50%, #63251a 100%);}
.c-cta-btn--rsv .c-cta-btn__txt::before {background-image: url(../images/common/icon-reserve.svg);}

.c-cta-btn--csl {background: linear-gradient(135deg, #bf9031 50%, #8c6921 100%);}
.c-cta-btn--csl .c-cta-btn__txt::before {background-image: url(../images/common/icon-consul.svg);}


.l-modal .c-cta-btn {
	flex-direction: row;
	width: 11.3em;
	height: auto;
	padding: .5em .2em;
	margin-inline: auto;
}
.l-modal .c-cta-btn .c-icon {
	position: relative;
    display: inline-block;
	font-size: 80%;
    inset: auto;
    translate: none;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-cta-btn {
	width: auto;
	height: 4.2em;
	font-size: 5.6vw;
	padding: .5em 1em;
}

.l-modal .c-cta-btn {
	font-size: 3.6vw;
}
}

/* Component - contact - c-cta-wrap
-----------------------------------------------*/
.c-cta-wrap {
	position: relative;
	width: 100%;
	width: 75vw;
	max-width: 800px;
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 1.25%;
	margin-inline: auto;
}
.c-cta-wrap .c-cta-btn {
	flex: 1;
}
.c-cta-wrap .c-cta-btn .c-icon {
	box-shadow: 0 0 4px rgb(0 0 0 / 0.3);
}

/* header */
.c-cta-wrap.c-cta-wrap--header {
	width: 100%;
	font-size: min(1.5vw,100%);
}
.c-cta-wrap.c-cta-wrap--header .c-cta-btn {
	flex-direction: column-reverse;
	height: 6.1em;
	font-size: 105%;
}
.c-cta-wrap.c-cta-wrap--header .c-cta-btn__txt::before {
	display: block;
	min-width: 2.23em;
	min-height: 1.67em;
}
.c-cta-wrap.c-cta-wrap--header .c-cta-btn--tel small {
	display: none;
}
.c-cta-wrap.c-cta-wrap--header .c-cta-btn--tel br {
	display: block;
}
.c-cta-wrap.c-cta-wrap--header .c-cta-btn .c-icon {
	font-size: 100%;
}

/* compact */
.c-cta-wrap.c-cta-wrap--compact {
	display: flex;
	column-gap: 0;
	width: 100%;
	height: 100%;
	font-size: min(1.1vw,100%);
}
.c-cta-wrap.c-cta-wrap--compact .c-cta-btn {
	height: 100%;
	flex-direction: column-reverse;
	font-size: 105%;
}
.c-cta-wrap.c-cta-wrap--compact .c-cta-btn small {
	display: none;
}
.c-cta-wrap.c-cta-wrap--compact .c-cta-btn__txt::before {
	display: block;
	min-width: 2.23em;
	min-height: 1.67em;
	margin-bottom: .2em;
}
.c-cta-wrap.c-cta-wrap--compact .c-cta-btn .c-icon {
	font-size: 100%;
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.l-scroll .l-scroll__cta {
	width: 24%;
	max-width: 360px;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-cta-wrap {
	display: grid;
	gap: 1.2em;
}

/* compact */
.c-cta-wrap.c-cta-wrap--compact {
	font-size: 100%;
}
.c-cta-wrap.c-cta-wrap--compact .c-cta-btn .c-icon {
	display: none;
}
}


/*-----------------------------------------------
 Component - title
-----------------------------------------------*/
.c-title--enjp {
	text-align: center;
	margin-bottom: 5%;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

}


/*-----------------------------------------------
 Component - heading
-----------------------------------------------*/

/* c-hdg--min */
.c-hdg--min {
	position: relative;
	font: var(--font-min);
	font-size: min(176%,2.8vw);
	line-height: 1.4;
	letter-spacing: .1em;
	margin-bottom: .6em;
}
.c-hdg--min small {
	display: inline-block;
	font-size: 85%;
}

/* c-hdg--var */
.c-hdg--var {
	position: relative;
	font: var(--font-min);
	font-size: min(2vw,117%);
	line-height: 1.5;
	letter-spacing: .16em;
	white-space: nowrap;
	writing-mode: vertical-rl;
}
.c-hdg--var > span span {
	color: var(--accent-color);
}

/* c-hdg--bg */
.c-hdg--bg {
	position: relative;
	text-align: center;
	color: #FFF;
	font: var(--font-min);
	font-size: min(2.8vw,205%);
	line-height: 1.3;
	letter-spacing: .16em;
	background: linear-gradient(to bottom, rgba(48,101,85,1), rgba(57,158,126,0.8));
	padding: .8em 1em;
	margin-bottom: 2em;
}

.c-hdg--bdr {
	position: relative;
	text-align: center;
	color: var(--color-grn);
	font-size: min(2.4vw,158%);
	font-weight: var(--fw-bold);
	line-height: 1.3;
	letter-spacing: .1em;
	padding: 1em;
	margin-bottom: 1.8em;
	border-top: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
}

.c-hdg--bbl {
	position: relative;
	text-align: center;
	color: var(--color-nvy);
	font: var(--font-min);
	font-size: min(2.2vw,147%);
	line-height: 1.4;
	letter-spacing: .1em;
	color: #FFF;
	background-color: #378344;
	border-radius: .8em;
	padding: .7em 1.2em;
	margin-bottom: .6em;
}
.c-hdg--bbl::before {
	position: absolute;
	content: "";
	background-color: inherit;
	width: 1.6em;
	height: .8em;
	clip-path: var(--clip-arrow);
	inset: auto 0 -0.6em 0;
	margin: auto;
}
.c-hdg--bbl.anime {
	opacity: 0;
	top: 10px;
	transition: opacity .8s, top .8s;
	transition-delay: .2s;
}
.c-hdg--bbl.is-animated {
	opacity: 1;
	top: 0;
}

.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: .5em;
}

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

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

.c-hdg--var {
	font-size: 3.4vw;
}

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

.c-hdg--bbl {
	font-size: 120%;
	padding: .5em .8em;
}

.c-hdg--bdr {
	font-size: 130%;
	padding: .8em;
	margin-bottom: 1.2em;
}

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

/* Component - heading - deco
-----------------------------------------------*/
.c-hdg--en {
	position: relative;
	color: var(--color-bei-600);
	color: var(--accent-color);
	font: var(--font-en);
	font-size: min(2.6vw,1.76rem);
	letter-spacing: .18em;
	margin-bottom: 1em;
}
.c-hdg--en:last-child {
	margin-bottom: 0;
}
.c-hdg--en.u-size-100 {
	font-size: min(10vw,5.88rem);
}

.c-hdg--deco {
	position: relative;
	display: inline-block;
	color: #FFF;
	font: var(--font-en);
	font-size: min(7vw,4.7rem);
	letter-spacing: .15em;
	white-space: nowrap;
	margin-bottom: .2em;
}
.c-hdg--deco.bg-grd {
	background-color: var(--color-gry-100);
	background-image: radial-gradient(var(--color-primary-400), rgba(250,237,0,0));
    background-position: left -0.6em center;
    background-size: 2em auto;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

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

.c-hdg--en {
	font-size: 3.5vw;
	margin-bottom: .8em;
}
/* .c-hdg--en.u-size-100 {
	font-size: 10vw;
} */

.c-hdg--deco {
	font-size: 10vw;
}

.c-hdg--en.u-size-20 {
	font-size: 3vw;
}
}


/*-----------------------------------------------
 Component - text_deco
-----------------------------------------------*/
.c-txt--marker {
	position: relative;
}
.c-txt--marker::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;
	font: var(--font-min);
	font-size: min(2.8vw,176%);
	letter-spacing: .12em;
	line-height: 1.5;
	margin: 0 auto 1.5em;
}
.c-txt--fuki::before,
.c-txt--fuki::after {
	position: absolute;
	display: inline-block;
	content: "";
	background-color: currentColor;
	width: 1px;
	height: 1.2em;
	bottom: 0;
}
.c-txt--fuki::before {
	rotate: -32deg;
	right: calc(100% + 1em);
}
.c-txt--fuki::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: var(--font-min);
	/* font-size: min(2vw,1.35rem); */
    letter-spacing: .1em;
    line-height: 1.6;
	white-space: nowrap;
    width: min(9.5em);
	min-width: 9.5em;
	aspect-ratio: 1;
    border-radius: 50%;
	transition-duration: .5s;
	transition-property: color, background-color, scale;
}
.c-txt--circle.pdg_t {
	padding-top: .5em;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
/*c-txt--fuki*/
.c-txt--fuki {
	font-size: 120%;
	letter-spacing: .1em;
}
}

/* Component - heading - size
-----------------------------------------------*/
.u-size-20 {font-size: min(2vw,117%);}
.u-size-25 {font-size: min(2.2vw,147%);}
.u-size-35 {font-size: min(3.2vw,205%);}
.u-size-40 {font-size: min(3.5vw,235%);}
.u-size-45 {font-size: min(4vw,264%);}
.u-size-50 {font-size: min(4.2vw,294%);}
.u-size-60 {font-size: min(5.2vw,352%);}

/* 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-45 {font-size: 145%;}
.u-size-50 {font-size: 160%;}
.u-size-60 {font-size: 165%;}
}


/*-----------------------------------------------
 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;
}
.c-list > li::before {
	position: absolute;
	content: "";
	font-family: 'fontello';
	font-weight: normal;
	left: 0;
	top: 0;
}

.c-list--point > li::before {
	display: block;
	color: var(--accent-color);
	background-color: currentColor;
	width: .4em;
	height: .4em;
	border-radius: 50%;
	left: .2em;
	top: .5em;
}

.c-list--dot > li {
	padding-left: 1em;
}
.c-list--dot > li::before {
	content: "・";
	left: -0.2em;
}

.c-list--dash > li {
	padding-left: 1em;
}
.c-list--dash > li::before {
	content: "-";
}

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

.c-list--mer > li::before {
	content: '\e806';
	color: var(--color-coral);
}
.c-list--dem > li::before {
	content: '\e807';
	color: #999;
}

.c-list--ast {
	margin-top: 1em;
}
.c-list--ast > li {
	padding-left: 1.2em;
}
.c-list--ast > li::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;
}

.aster_list {
	font-size: 90%;
}
}


/*-----------------------------------------------
 Component - bg
-----------------------------------------------*/
.c-bg-color {
	position: absolute;
	background-color: var(--color-bei);
	background-repeat: no-repeat;
	background-size: contain;
	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;
}
.c-bg-img img {
	width: 100%;
    height: 100%;
    object-fit: cover;
	object-position: center center;
	pointer-events: none;
}
.c-bg-img.is-max {
	width: 100vw;
	-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;
	left: calc(50% - 50vw);
}

.c-bg-img:where(.is-min) {
	width: 50vw;
	/* max-width: max-content; */
	color: var(--color-bei);
	background-color: currentColor;
}
.c-bg-img.is-min::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%);
	/* background:
		linear-gradient(to right, transparent 30%, currentColor 100%),
		linear-gradient(to top, transparent 50%, currentColor 100%),
		linear-gradient(to bottom, transparent 50%, currentColor 100%); */
}
.c-bg-img:where(.pos-lt),
.c-bg-img:where(.pos-lb) {
	left: calc(50% - 50vw);
}
.c-bg-img:where(.pos-rt),
.c-bg-img:where(.pos-rb) {
	left: auto;
	right: calc(50% - 50vw);
}
.c-bg-img:where(.pos-lb),
.c-bg-img:where(.pos-rb) {
	top: auto;
	bottom: 0;
}
.c-bg-img:where(.pos-rt)::after {
	scale: -1 1;
}
.c-bg-img:where(.pos-rb)::after {
	scale: -1 -1;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-bg-img:where(.pos-lt),
.c-bg-img:where(.pos-lb) {
	width: 70vw;
}
}

/*-----------------------------------------------
 Component - c-icon
-----------------------------------------------*/
.c-icon {
    position: relative;
	display: inline-block;
    text-align: center;
	letter-spacing: normal;
	color: var(--color-base);
	font-size: 1.05rem;
	line-height: 1.5;
	background-color: #FFF;
    border-radius: 50%;
    width: 1.5em;
	aspect-ratio: 1;
	transition: color .4s, background-color .4s;
}
.c-icon::before {
	position: absolute;
	display: block;
	font-family: 'fontello';
	content: '\e801';
	font-weight: normal;
	text-align: center;
	width: 100%;
	height: 100%;
	inset: 0;
}
.c-icon.is-out::before {
	content: '\e803';
	padding-top: .04em;
}

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

/* Component - link - com_btn__radi
-----------------------------------------------*/
.c-btn-radi {
	margin-top: 2em;
}
.c-btn-radi > a {
	position: relative;
	width: 19em;
	min-width: max-content;
	max-width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4em;
	text-align: left;
	color: #FFF;
	font: var(--font-min);
	font-size: min(1.8vw,1.05rem);
	letter-spacing: .15em;
	font-feature-settings: "halt";
	line-height: 1.2;
	background-color: var(--color-gld);
	padding: .9em 1.5em;
	border-radius: 100vmax;
	box-sizing: content-box;
}

.c-btn-radi .c-icon {
	color: var(--color-base);
	background-color: #FFF;
}
.c-btn-radi > a:hover {
	background-color: var(--color-brw-600);
}

.c-btn-radi--wh {
	margin-top: 1.2em;
}
.c-btn-radi--wh a {
	width: 11em;
	height: 2.7em;
	box-sizing: border-box;
}
.c-btn-radi--wh a:not(:hover) {
	color: var(--color-gld);
	background-color: #fff;
	border: 1px solid currentColor;
}
.c-btn-radi--wh a:not(:hover) .c-icon {
	color: #FFF;
	background-color: var(--color-gld);
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.c-btn-radi {
	text-align: center;
	margin-top: 1em;
}
.c-btn-radi > a {
	height: 3.2em;
	font-size: 3.5vw;
}
}


/*---------------------------------------------------------
 Component - slider
---------------------------------------------------------*/
.c-slide--ticker .splide__track {
	overflow: visible;
}
.c-slide--ticker .splide__slide {
	width: 27vw;
	max-width: max-content;
}
.c-slide--ticker.is-large .splide__slide {
	width: 41vw;
}
/* dot */
.c-slide--fade .splide__pagination {
	gap: 28px;
	margin-top: 15px;
}
.c-slide--fade .splide__pagination button {
	display: block;
	background-color: #e6e6e6;
	border: none;
	border-radius: 50%;
	width: 10px;
	height: 10px;
	padding: 0;
	opacity: 1;
	transition: background-color .5s;
	cursor: pointer;
	outline: none;
}
.c-slide--fade .splide__pagination button.is-active,
.c-slide--fade .splide__pagination button:hover {
	background-color: var(--color-primary);
}
/* arrow */
.splide__arrow {
	display: block;
	width: 1em;
	font-size: min(5vw,4em);
	font-weight: normal;
	aspect-ratio: 1;
	color: #FFF;
	background-color: var(--color-grn);
	border-radius: 50%;
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background-color .5s;
	box-shadow: 0 0 5px rgb(0 0 0 / 0.05);
}
.splide__arrow::before {
	display: block;
	content: "";
	background: url(../images/common/icon-arrow.svg) no-repeat center center;
	background-size: 23% auto;
	width: 100%;
	height: 100%;
}
.splide__arrow--prev::before {
	scale: -1 1;
}
.splide__arrow:hover {
	background-color: var(--color-brw-600);
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-slide--ticker .splide__slide {
	width: 50vw;
}
.c-slide--ticker.is-large .splide__slide {
	width: 60vw;
}
/* arrow */
.splide__arrow {
	font-size: 8vw;
}
}


/*-----------------------------------------------
 Component - decoration
-----------------------------------------------*/
.c-deco--underline {
	position: relative;
	max-width: max-content;
}
.c-deco--underline::before {
	position: absolute;
	content: "";
	background-color: var(--color-primary-400);
	width: 100%;
	height: 5px;
	rotate: -5deg;
	inset: auto 0 0.2em 0;
}
.c-deco--underline > * {
	position: relative;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {


}



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

======================================================== */
.u-anm--fade,
.u-anm--fadelist > li {
	opacity: 0;
	transition: opacity 2s 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;
}

.u-anm--txt {
	display: inline-block;
}
.u-anm--txt > * {
	display: inline-block;
	width: 0;
	overflow: hidden;
}
.u-anm--txt.is-animated > * {
	animation: TEXT_SHOW_CLIP 1s linear forwards;
}

@keyframes TEXT_SHOW_CLIP {
	from {
		width: 0%;
	}
	to {
		width: 100%;
	}
}
@keyframes TEXT_SHOW_CLIP_VERTICAL {
	from {
		height: 0%;
	}
	to {
		height: 100%;
	}
}
/*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}
}


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

======================================================== */
/* font */
.u-font-min {
	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-weight: 400;
	letter-spacing: .06em;
}
.u-font-en {
	font: var(--font-en);
	font-optical-sizing: auto;
	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%;
	line-height: 1.8;
	letter-spacing: .06em;
}
.u-fz--lg{font-size: 112%;}

/* 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);}
.u-color-org { color: var(--color-org);}

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

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

/* radius */
.u-rounded-full {border-radius:50%;}
.u-rounded-10px {border-radius: 10px;}
.u-rounded-20px {border-radius: min(2.4vw,20px);}
.u-rounded-30px {border-radius: min(2.6vw,30px);}
.u-rounded-50px {border-radius: clamp(30px,4.5vw,50px);}
.u-rounded-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%;}
}
/* 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%;line-height: 1.6;}
.u-fz--lg{font-size: 100%;}
}


/*-----------------------------------------------
 Utility - border/padding
-----------------------------------------------*/
.u-pdg-ss,
.u-pdg-s,
.u-pdg-m,
.u-pdg-l {
	position: relative;
}
.u-pdg-ss {	padding: min(6vw,60px) 0;}
.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-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-ss {	padding: 10% 0;}
.u-pdg-s {	padding: 10% 0;}
.u-pdg-m {	padding: 12% 0;}
.u-pdg-l {	padding: 15% 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,
.w1350,.w1340,.w1300,
.w1280,.w1240,.w1200,
.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;}
.w1350 {max-width: 1350px;}
.w1340 {max-width: 1340px;}
.w1300 {max-width: 1300px;}
.w1280 {max-width: 1280px;}
.w1240 {max-width: 1240px;}
.w1200 {max-width: 1200px;}
.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,
.w1350,.w1340,.w1300,
.w1280,.w1260,.w1200,
.w1100 {
	width: 90%;
	padding: 0 5%;
}
}

/*---------------------------------------------------------
margin
---------------------------------------------------------*/
.u-mb-xl {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;}
.u-mb-xxs {margin-bottom: 40px;}
.u-mb-1em {margin-bottom: 1em;}

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

.u-mb-xl {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%;}
.u-mb-xxs {margin-bottom: 4%;}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.u-mb-xl {margin-bottom: 16%;}
.u-mb-lg {margin-bottom: 14%;}
.u-mb-md {margin-bottom: 12%;}
.u-mb-sm {margin-bottom: 10%;}
.u-mb-xs {margin-bottom: 8%;}
.u-mb-xxs {margin-bottom: 7%;}
}


/* 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;}
}