@charset "UTF-8";



/* ========================================================
  
  common

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


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

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

/*-----------------------------------------------
 Layout - FV
-----------------------------------------------*/
.l-fv {
	position: relative;
	height: min(25vw,360px);
	overflow: hidden;
}

.l-fv__img {
	position: relative;
	width: 52%;
	height: 89%;
	margin: 0;
}
.l-fv__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.l-fv__txt {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50%;
	height: 89%;
	right: 3.3%;
	bottom: 0;
}
.l-fv__txt::before {
	position: absolute;
	content: "";
	background: var(--grd-grn);
	width: 100%;
	height: 100%;
	inset: 0;
	transform: skewX(-6deg);
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.l-fv {
	height: 60vw;
}
.l-fv__img {
	width: 90%;
	height: 65%;
}
.l-fv__txt {
	width: 85%;
	height: 65%;
	right: 5%;
}
}

/*-----------------------------------------------
 Layout - m__ttl
-----------------------------------------------*/
.l-fv__ttl {
	position: relative;
	display: flex;
	flex-direction: column;
	row-gap: 1em;
	color: #FFF;
	text-align: center;
	font: var(--font-min);
	font-size: min(1.4vw,1.17rem);
	letter-spacing: .1em;
	line-height: 1.4;
	white-space: nowrap;
}
.l-fv__ttl--lg {
	font-size: 225%;
	letter-spacing: .18em;
}
.l-fv__ttl--sm::after {
	display: block;
	content: "";
	width: 1em;
	height: 1px;
	background-color: currentColor;
	margin: 1.5em auto 0;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.l-fv__ttl {
	font-size: 3.2vw;
}
.l-fv__ttl--lg {
	font-size: 175%;
	letter-spacing: .08em;
}
.l-fv__ttl--sm::after {
	margin-top: 1em;
}
}

/*-----------------------------------------------
 Layout - pankuzu
-----------------------------------------------*/
.pankuzu {
	position: relative;
	display: flex;
	justify-content: flex-end;
	gap: .2em .5em;
	color: #999;
	font-size: 88%; 
	line-height: 1.5;
	letter-spacing: .08em;
    margin: min(4vw,50px) min(2vw,20px) min(5vw,60px) auto;
}
.pankuzu li::after {
	content: "ー";
}
.pankuzu li:last-child::after {
	display: none;
}
.pankuzu a {
	text-decoration: underline;
}
.pankuzu a:hover {
	color: var(--color-grn);
	text-decoration: none;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.pankuzu {
	font-size: 60%;
	letter-spacing: .02em;
    margin: 1.2em 1em 8% auto;
}
}

/*-----------------------------------------------
 Layout - l-lead
-----------------------------------------------*/
.l-lead {
	position: relative;
}
.l-lead .c-hdg--min {
	text-align: center;
	line-height: 1.8;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.l-lead .c-hdg--min {
	line-height: 1.6;
}
}

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

.l-flt__txt .c-list--dot {
	color: var(--color-gld);
	font-size: min(1.8vw,135%);
	font-weight: var(--fw-bold);
	margin: 1em auto;
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.l-flt__img {
	width: 40%;
	margin-bottom: .5em;
}

.l-flt .is-right {
	float: right;
}
.l-flt .is-left {
	float: left;
}

.l-flt__img.is-left {
	margin-right: 4%;
}
.l-flt__img.is-right {
	margin-left: 4%;
}

.l-flt__txt .c-hdg--min {
	text-align: left;
}

.l-flt__txt .c-txt--bld,
.l-flt__txt .c-txt--min {
	text-align: left;
	margin-top: 1em;
}
}
/* 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;
}
}
/* 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%;
}

.l-flt__txt .c-list--dot {
	font-size: 105%;
}
}



/*-----------------------------------------------
 Layout - l-anchor-list
-----------------------------------------------*/
.l-anchor-list {
	max-width: 960px;
	display: grid;
	justify-content: space-between;
	row-gap: 1.6em;
	font: var(--font-min);
	font-size: min(1.8vw,1.05rem);
	letter-spacing: .15em;
	line-height: 1.2;
	margin-inline: auto;
}
.l-anchor-list a {
	position: relative;
	height: 3.4em;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .4em;
	color: #FFF;
	background-color: var(--color-gld);
	padding: .2em 1em;
	border-radius: 100vmax;
}
.l-anchor-list a:hover {
	background-color: var(--color-brw-600);
}
.l-anchor-list .c-icon {
	position: absolute;
	font-size: 100%;
	background-color: #FFF;
	inset: auto 0 -1em 0;
	margin: auto;
	rotate: 90deg;
	box-shadow: 0 0 4px rgb(0 0 0 / 0.3);
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.l-anchor-list {
	grid-template-columns: repeat(3,31.2%);
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.l-anchor-list {
	grid-template-columns: repeat(2,48%);
	font-size: 95%;
}
}

/*---------------------------------------------------------
 Layout - boxlist
---------------------------------------------------------*/
.l-boxlist {
    display: grid;
	row-gap: 2.4em;
	margin-inline: auto;
}
.l-boxlist__img {
	position: relative;
	max-width: max-content;
	margin: 0 auto min(2.5vw,30px);
}
.l-boxlist__bg {
	position: relative;
	text-align: center;
	background: radial-gradient(transparent, #f0eee9);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding: 2em 2%;
	margin: 0 auto 1em;
}
.l-boxlist__bg img {
	width: 58%;
	max-width: 190px;
	margin: 0 auto .5em;
}
.l-boxlist__bg .c-hdg--min {
	font-size: min(2.2vw,176%);
	line-height: 1.7;
	white-space: nowrap;
	margin-bottom: 0;
}
.l-boxlist__bg .u-font-en {
	font-size: min(2vw,125%);
	letter-spacing: .18em;
	margin-bottom: 1em;
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.l-boxlist {
	justify-content: space-between;
	margin-inline: auto;
}
.l-boxlist.is-col2 {
	grid-template-columns: repeat(2,min(48%,560px));
}
.l-boxlist.is-col3 {
	grid-template-columns: repeat(3,31%);
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.l-boxlist {
	row-gap: 2em;
}
.l-boxlist__img {
	width: 80%;
	margin-bottom: 5vw;
}
.l-boxlist__bg {
	width: 80%;
	padding: 1.2em 2%;
}
.l-boxlist__bg .c-hdg--min {
	font-size: 120%;
}
.l-boxlist__bg .u-font-en {
	font-size: 100%;
}
}

/*---------------------------------------------------------
  Layout - l-poit__ttl
---------------------------------------------------------*/
.l-poit__ttl p.u-font-en {
	font-size: min(1.5vw,117%);
	line-height: 1em;
	letter-spacing: 0.2em;
	margin-bottom: 1em;
}
.l-poit__ttl .u-font-min{
	font-size: min(3vw,235%);
	line-height: 1.3em;
	letter-spacing: 0.1em;
	margin-bottom: 1em;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.l-poit__ttl p.u-font-en {
	font-size: 80%;
	margin-bottom: 0.8em;
}
.l-poit__ttl .u-font-min{
	font-size: 160%;
	margin-bottom: 0.8em;
}
}

/*-----------------------------------------------
 Layout - l-equipment
-----------------------------------------------*/
.l-equipment{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}
.l-equipment > * {
	border-right: 1px solid #306555;
	padding:0 5%;
}
.l-equipment > *:last-child {
	border-right: none;
}
.l-equipment > * .u-font-min{
	font-size: min(2.3vw,176%);
	line-height: 1.7em;
	letter-spacing: 0.1em;
	padding-top: 0.8em;
	padding-left: 1.2em;
	position: relative;
	z-index: 1;
	max-width: 350px;
	margin: 0 auto;
}
.l-equipment > * .u-font-min::before{
	position: absolute;
	font-family: "fontello";
	content: '\e809';
	font-size: 3em;
	line-height: 1em;
	letter-spacing: 0;
	left: 0;
	top:0;
	z-index: -1;
	color: #ffff00;
}
.l-equipment > * dt.u-font-min{
	margin-bottom: 0.6em;
}
.l-equipment > * dd{
	max-width: 350px;
	margin: 0 auto;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.l-equipment{
	display: block;
}
.l-equipment > * {
	border-right: none;
	border-bottom: 1px solid #306555;
	padding:0 0 4%;
	margin-bottom: 6%;
}
.l-equipment > *:last-child {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}
.l-equipment > * .u-font-min{
	font-size: 130%;
	max-width: 100%;
}
.l-equipment > * dt.u-font-min{
	margin-bottom: 0.3em;
}
.l-equipment > * dd{
	max-width: 100%;
}
}


/*---------------------------------------------------------
 Layout - l-qa
---------------------------------------------------------*/
.l-qa__ttl {
	position: relative;
	text-align: center;
	width: 9em;
	font: var(--font-min);
	font-size: min(4.2vw,294%);
	letter-spacing: .12em;
	line-height: 1.5;
	border-bottom: 1px solid var(--color-grn);
	padding-bottom: .7em;
	margin: 0 auto 8.4%;
}
.l-qa__ttl .c-hdg--en {
	position: absolute;
	display: inline-block;
	color: var(--color-grn);
	font-size: 60%;
	background-color: #FFF;
	padding: 0 .5em;
	left: 50%;
	bottom: 0;
	translate: -50% 50%;
}
.l-qa__item {
	margin-bottom: min(7vw,100px);
}
.l-qa__item:last-child {
	margin-bottom: 0;
}
.l-qa__q,
.l-qa__a {
	position: relative;
	padding-left: 12%;
	padding-right: 3%;
}
.l-qa__q::after,
.l-qa__a::after {
	position: absolute;
	display: block;
	text-align: center;
	font: var(--font-en);
	font-size: min(6vw,4.12rem);
	line-height: 1;
	white-space: nowrap;
	left: 7%;
	top: .25em;
	translate: -50% 0;
}
.l-qa__q::after {
	content: "Q";
}
.l-qa__a::after {
	content: "A";
	color: var(--color-grn);
	top: -0.2em;
}

.l-qa__q {
	color: #FFF;
	background-color: var(--color-lgrn);
	padding-top: 1.2em;
	padding-bottom: 1.2em;
	margin-bottom: 2em;
}
.l-qa__q .c-hdg--min {
	margin-bottom: 0;
}
.l-qa__q::before {
	position: absolute;
	display: block;
	content: "";
	background-color: inherit;
	width: 1.6em;
	height: 1em;
	clip-path: var(--clip-arrow);
	left: 7%;
	top: 99%;
	translate: -50% 0;
}

.l-qa__a .c-hdg--min {
	color: var(--color-grn);
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.l-qa__ttl {
	font-size: 150%;
	margin-bottom: 12%;
}

.l-qa__item {
	margin-bottom: 10%;
}
.l-qa__q,
.l-qa__a {
	padding-left: 16%;
}
.l-qa__q::after,
.l-qa__a::after {
	font-size: 9vw;
	left: 8%;
	top: .3em;
}
.l-qa__a::after {
	top: 0;
}

.l-qa__q {
	padding-top: .8em;
	padding-bottom: .8em;
	margin-bottom: 1.2em;
}
.l-qa__q::before {
	width: 1.2em;
	height: .8em;
	left: 8%;
}
}


/*-----------------------------------------------
 Layout - footer-cta {
-----------------------------------------------*/
.l-footer-cta {
	text-align: center;
	border-top: 1px solid #ccc;
}
.l-footer-cta .c-cta-wrap {
	margin-top: 3%;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.l-footer-cta .c-cta-wrap {
	margin-top: 6%;
}
}



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

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

/*-----------------------------------------------
 Component - box
-----------------------------------------------*/

/* Component - box - c-box--wide
-----------------------------------------------*/
.c-box--wide {
	position: relative;
	width: 96vw;
	background-color: var(--color-bei);
	padding: 6% 4%;
	left: 50%;
	translate: -50% 0;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-box--wide {
	padding: 10% 5%;
}
}

/* Component - box - c-box--bg
-----------------------------------------------*/
.c-box--bg {
	position: relative;
	background-color: var(--color-bei);
	padding: min(8%,80px) 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%;
}
}

/* Component - box - c-box--s
-----------------------------------------------*/
.c-box--s {
	position: relative;
	background-color: var(--color-bei);
	background-repeat: no-repeat;
	background-position: right top;
	background-size: contain;
	padding: min(5%,50px) 5%;
	margin-inline: auto;
}
.c-box--s .l-flt {
	margin-inline: auto;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-box--s {
	padding: 8% 6%;
}
}


/*---------------------------------------------------------
 c-procon
---------------------------------------------------------*/
.c-procon {
	margin-top: 4%;
}
.c-procon__item dt {
	text-align: center;
	color: #FFF;
	font-size: min(2vw,125%);
	font-weight: var(--fw-bold);
	line-height: 1.3;
	letter-spacing: .1em;
	background-color: var(--accent-color);
	padding: .3em;
	border-radius: 2em;
	margin-bottom: .8em;
}

.c-procon__item--mer {
	--accent-color: var(--color-coral);
}
.c-procon__item--dem {
	--accent-color: #999;
}

.c-procon__item .c-list {
	row-gap: .8em;
	font-size: 88%;
}

/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {
.c-procon {
	display: grid;
    justify-content: space-between;
	grid-template-columns: repeat(2, min(48.5%,630px));
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.c-procon {
	margin-top: 6%;
}
.c-procon__item dt {
	font-size: 105%;
}
}


/*---------------------------------------------------------

---------------------------------------------------------*/

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

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

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


}