@charset "UTF-8";


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

   contentpage.css

	- Variables
	- Layout
	- Component

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




/* ========================================================
  
  Variables

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



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

======================================================== */
main {
	padding-top: 20px;
}

/*-----------------------------------------------
 Layout - FV
-----------------------------------------------*/
.l-fv__img {
	position: relative;
	max-height: 490px;
	overflow: hidden;
}
.l-fv__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.l-fv__img::before {
	position: absolute;
	content: "";
	background: rgba(59,50,43,0.2);
	width: 100%;
	height: 100%;
	inset: 0;
}
.l-fv__path {
	position: absolute;
	background: url(../images/common/fv-path@2x.png) no-repeat right bottom;
	background-size: contain;
	width: 44%;
	height: 100%;
	right: 0;
	bottom: 0;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.l-fv__img {
	height: 40vw;
}
}

/*-----------------------------------------------
 Layout - m__ttl
-----------------------------------------------*/
.l-fv__ttl {
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: center;
	row-gap: 1rem;
	color: #FFF;
	font-size: min(1.3vw,1rem);
	letter-spacing: .1em;
	line-height: 1.2;
	white-space: nowrap;
	left: 9%;
	bottom: 22%;
}
.l-fv__ttl .u-fw--bld {
	font-size: 125%;
}
.l-fv__ttl .u-font-en {
	font-size: 593%;
	text-transform: uppercase;
}

.l-fv__ttl--med .u-font-min {
	font-size: 437%;
}
.l-fv__ttl--med .u-font-en {
	font-size: 156%;
}

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

.l-fv__ttl {
	font-size: 3.2vw;
	row-gap: 2vw;
}
.l-fv__ttl .u-fw--bld {
	font-size: 105%;
}
.l-fv__ttl .u-font-en {
	font-size: 300%;
}

.l-fv__ttl--med .u-font-min {
	font-size: 220%;
}
.l-fv__ttl--med .u-font-en {
	font-size: 105%;
}
}

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

/*-----------------------------------------------
 Layout - l-lead
-----------------------------------------------*/
.l-lead {
	position: relative;
}
.l-lead .c-hdg--min span {
	color: var(--accent-color);
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

}


/*-----------------------------------------------
 Layout - l-medmenu
-----------------------------------------------*/
.l-medmenu {
	position: relative;
}
.l-medmenu .c-bg-color {
	background-color: var(--color-bei);
}
.l-medmenu .c-hdg--en {
	text-align: center;
	color: var(--color-base);
	margin-bottom: 1.5em;
}


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

/* Layout - box - l-box--s
-----------------------------------------------*/
.l-box--s {
	position: relative;
	max-width: 1220px;
	background-color: #f6f8f1;
	padding: min(5%,50px) 4%;
	margin-inline: auto;
	border-radius: 10px;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.l-box--s {
	width: 100%;
	padding: 8% 6%;
	border-radius: 6vw;
}
}



/*-----------------------------------------------
 Layout - l-col-list
-----------------------------------------------*/
.l-col-list {
	position: relative;
	display: grid;
	justify-content: space-between;
}
.l-col-list .l-col-list__img {
	position: relative;
	max-width: max-content;
	margin: 0 auto 6%;
}
.l-col-list .l-col-list__txt .u-fw--bld {
	text-align: center;
	font-size: min(1.5vw,100%);
	letter-spacing: .08em;
	line-height: 1.5;
}
.l-col-list .l-col-list__txt .u-fw--bld small {
	display: block;
	font-size: 100%;
	line-height: 1.4;
	font-weight: normal;
	margin-top: .1em;
}
.l-col-list .l-col-list__txt .c-txt--asterisk {
	margin-top: .4em;
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.l-col-list {
	row-gap: 5em;
}
.l-col-list.is-col2 {
	grid-template-columns: repeat(2,min(48%,550px));
}
.l-col-list.is-col3 {
	grid-template-columns: repeat(3,min(31.2%,410px));
}
.l-col-list.is-col4 {
	grid-template-columns: repeat(4,23.4%);
}

.l-col-list .c-btn-radi {
	width: 100%;
}
.l-col-list .c-btn-radi a {
	width: 100%;
	max-width: 20em;
}

.l-box--bg .l-col-list {
	row-gap: 3em;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.l-col-list {
	row-gap: 2.6em;
}
.l-col-list.is-col2 .l-col-list__img {
	width: 90%;
	margin-bottom: 7%;
}
.l-col-list.is-col3 {
	row-gap: 2em;
}
.l-col-list.is-col3 > *:not(:last-child) {
	padding-bottom: 8%;
	border-bottom: 1px solid var(--color-bdr);
}
.l-col-list.is-col3 .l-col-list__img {
	width: 80%;
	margin-bottom: 5%;
}

.l-col-list__txt {
	width: 90%;
	margin-inline: auto;
}
.l-col-list .l-col-list__txt .u-fw--bld {
	font-size: 96%;
	letter-spacing: .04em;
}

.l-col-list.is-col4 {
	grid-template-columns: repeat(2,48.5%);
	row-gap: 1.6em;
}
.l-col-list.is-col4 .l-col-list__txt {
	width: 100%;
}
}





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

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

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




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

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

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


}