@charset "UTF-8";


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

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



/* ========================================================
  
  deco

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

/*---------------------------------------------------------
 Petal
---------------------------------------------------------*/
.p-petal {
	position: absolute;
	width: 33vw;
	max-width: max-content;
	translate: -50% 0;

	&.p-petal--lt {
		left: 10%;
		top: 20px;
	}
	&.p-petal--lb {
		left: 0;
		bottom: 0;
	}
	&.p-petal--rt {
		left: 87%;
		top: 20px;
	}

	> img {
		opacity: 0;
		translate: 10px -10px;
		transition: opacity 2s .2s, translate 2s .2s;
	}
	&.is-animated {
		> img {
			opacity: 1;
			translate: 0 0;
		}
	}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.p-petal {
	width: 46vw;

}
.promise .p-petal {

	&.p-petal--lt {
		left: 24%;
		top: 24vw;
	}
	&.p-petal--rt {
		left: 70%;
		top: 0;
	}
}
}

/* Petal - Chairman
-----------------------------------------------*/
.chairman .p-petal {
	width: 20vw;

	&.p-petal--lt {
		left: 17%;
		top: 50px;
	}
	&.p-petal--rt {
		left: 90%;
		top: 0;
		translate: -50% -70%;
	}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.chairman .p-petal {
	width: 25vw;

	&.p-petal--lt {
		top: 18vw;
	}
}
}

/* Petal - Director
-----------------------------------------------*/
.director .c-petal-wrap {
	--wrap-height: 140;

	inset: 80px 0 auto 0;
}
.director .c-petal {
	&.p01 {
		--x: 306;
		--y: 60;
		--rotate: 10deg;
	}
	&.p02 {
		--x: 435;
		--y: 110;
		--rotate: -30deg;
	}
	&.p03 {
		--x: 1118;
		--y: 100;
		--rotate: 35deg;
	}
	&.p04 {
		--x: 1244;
		--y: 40;
		--rotate: -85deg;
	}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.director .c-petal-wrap {
	width: 150vw;
	height: 50vw;
	left: -25vw;
	top: 10vw;
}
}


/* ========================================================
  
  main

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

/*---------------------------------------------------------
 common
---------------------------------------------------------*/

/* common - stf-flt
-----------------------------------------------*/
.stf-flt {
	width: 96%;
	max-width: 1168px;
	margin-inline: auto;
}
.stf-name {
	text-align: center;
	font: var(--font-min);
	font-size: min(1.8vw,125%);
	line-height: 1.5;
	letter-spacing: .12em;
	margin-top: 1em;

	> p:first-child {
		margin-bottom: .2em;
	}
	& span {
		font-size: 150%;
		letter-spacing: .1em;
		vertical-align: -0.05em;
	}
	.u-font--en {
		color: #d79e14;
		font-size: 90%;
		letter-spacing: .08em;
		margin-top: .8em;
	}
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.stf-flt {
	.l-flt__img {
		width: 29%;
		margin-bottom: 2em;

		&.is-left {
			margin-right: 6%;
		}
	}
	.l-flt__txt {
		width: 65%;
	}
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.stf-flt {
	width: 96%;
}
.stf-img {
	width: 100%;
	display: grid;
	justify-content: space-between;
	grid-template-columns: 40% 55%;
	align-items: center;
}
.stf-name {
	font-size: 90%;
	margin: 0;
}
}

/* common - stf-prof
-----------------------------------------------*/
.stf-prof {
	position: relative;
	background-color: #f9f8ef;
	padding: 4.5% 5%;
	margin-top: 4%;

	.stf-prof__inner {
		max-width: 1000px;
		margin-inline: auto;
	}
	& dt {
		color: #af7b46;
		font: var(--font-min);
		font-size: min(1.8vw,118%);
		letter-spacing: .1em;
		line-height: 1.5;
		white-space: nowrap;
		margin-bottom: .5em;
	}
	& dd {
		font-size: 88%;
	}
	.c-list {
		row-gap: .6em;

		> li {
			padding-left: 1.2em;
		}
	}
}
.stf-reki {
	& th {
		width: 5.5em;
		text-align: left;
		font-weight: normal;
		vertical-align: top;
		padding-right: .5em;
	}
	+ .c-list {
		margin-top: .5em;
	}
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.stf-prof {
	.stf-prof__inner {
		&.is-col2 {
			display: flex;
			gap: 1.5em 6%;
		}
	}

	& dl {
		display: flex;
		column-gap: 1.4em;
	}
}
}
/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {

.stf-prof {
	& dl {
		display: block;
	}
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.stf-prof {
	padding: 7% 6%;
	margin-top: 6%;

	& dl:nth-of-type(n+2) {
		margin-top: 4%;
	}
	& dt {
		font-size: 105%;
	}
}
.stf-reki {
	& th {
		width: 5em;
	}
}
}

/*---------------------------------------------------------
 chairman
---------------------------------------------------------*/
.chairman {
	padding-bottom: 0;

	.c-hdg--deco {
		--color-grd: #ffdfbc;
	}
	.stf-flt {
		max-width: 992px;
	}
}

/* chairman - sub
-----------------------------------------------*/
.chair-sub {
	position: relative;
	width: 96%;
	max-width: 992px;
	margin-inline: auto;
	padding: 5% 0;

	.c-bg-img {
		width: 40vw;
		height: 100%;
		color: #FFF;

	&::after {
		background: linear-gradient(to right, transparent 50%, currentColor 100%);
	}
	}
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.chair-sub {
	.chair-sub__txt {
		width: 65%;
		margin-left: auto;
	}
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.chair-sub {
	padding: 40vw 0 0;

	.c-bg-img {
		width: 100vw;
		height: 60vw;

	&::after {
		background: linear-gradient(to bottom, transparent 50%, currentColor 100%);
	}
	}
}
}

/*---------------------------------------------------------
 director
---------------------------------------------------------*/
.director {
	.c-hdg--deco {
		--color-grd: #c9cbf2;
	}
}
.director__item {
	margin-bottom: min(10vw,120px);

	&:last-child {
		margin-bottom: 0;
	}
}


/*---------------------------------------------------------
 Promise
---------------------------------------------------------*/
.promise {
	.c-bg-color {
		background: url(../images/message/promise-bg@2x.jpg) no-repeat;
		background-size: cover;
	}
}
.prom-ttl {
	position: relative;
	text-align: center;
	margin-bottom: 5%;

	.prom-ttl__img {
		width: 55%;
		max-width: max-content;
		margin-inline: auto;
	}
	.c-hdg--en {
		color: #d2cdca;
		margin: .3em auto 0;
	}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.promise {
	.c-bg-color {
		background-image: url(../images/message/promise-bg-sp@2x.jpg);
	}
}
.prom-ttl {
	margin-bottom: 10%;

	.prom-ttl__img {
		width: 80%;
	}
}
}
/* Promise - list
-----------------------------------------------*/
.prom-list {
	counter-reset: promCounter;
	list-style: none;
}
.prom-list__item {
	position: relative;
	background-color: #fff;
	padding: 4.5% 5%;
	box-shadow: 0 0 10px rgb(0 0 0 / 0.1);
	margin-bottom: 25px;

	.c-hdg--min {
		display: flex;
		column-gap: 1em;
	}
	&:nth-child(1) .prom-no { color: #fdc5d2; }
	&:nth-child(2) .prom-no { color: #b5dfec; }
	&:nth-child(3) .prom-no { color: #c5e97c; }
	&:nth-child(4) .prom-no { color: #c8eadb; }
	&:nth-child(5) .prom-no { color: #ffd757; }
	&:nth-child(6) .prom-no { color: #ffbd72; }
	&:nth-child(7) .prom-no { color: #a2dcc2; }
	&:nth-child(8) .prom-no { color: #c8bae2; }
	&:nth-child(9) .prom-no { color: #cfeaf2; }
	&:nth-child(10) .prom-no { color: #cecece; }
}
.prom-no {
	position: relative;
	counter-increment: promCounter;
	text-align: left;
	font: var(--font-en);
	font-size: min(203%);
	letter-spacing: .08em;
	width: 1.8em;
	
	&::before {
		content: counter(promCounter, decimal-leading-zero);
	}
	&::after {
		position: absolute;
		content: "";
		background-color: #c4c4c4;
		width: 1px;
		height: 0.5em;
		rotate: 30deg;
		right: 0;
		top: 40%;
		translate: 0 -50%;
	}
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

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

.prom-list__item {
	padding: 8% 6%;
	margin-bottom: 10px;
}
.prom-no {
	width: 1.2em;
	
	&::after {
		display: none;
	}
}
}

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

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

/* 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) {


}