@charset "UTF-8";


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

   contentpage.css

	- Layout
	- Component

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



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

======================================================== */
.site-bg {
	position: absolute;
	background: linear-gradient(to bottom, transparent 150px, var(--color-bei) 700px);
	bottom: 0;
	left: calc(50% - 50vw);
	width: 100vw;
	height: 100%;
	z-index: -10;
}

/*-----------------------------------------------
 Layout - header
-----------------------------------------------*/
.h_logo {
	width: 26vw;
	max-width: 381px;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.h_logo {
	width: 50vw;
}
}

/*-----------------------------------------------
 Layout - FV
-----------------------------------------------*/
.fv_area.has-mimg {
	height: min(45vw,560px);
}
.fv_area.has-mimg .m_img {
	position: absolute;
	width: 100%;
	height: 100%;
	inset: 0;
	z-index: -1;
}
.fv_area.has-mimg .m_img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.fv_area.has-mimg .m_img::before {
	position: absolute;
	content: "";
	background-color: rgba(0,0,0,0.2);
	width: 100%;
	height: 100%;
	inset: 0;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.fv_area.has-mimg {
	height: 60vw;
}
}

/*-----------------------------------------------
 Layout - m_title
-----------------------------------------------*/
.m_title {
	position: relative;
	font-size: min(1.6vw,1.38rem);
	font-weight: var(--fw-bold);
	letter-spacing: .24em;
	line-height: 1.3;
	white-space: nowrap;
}
.m_title .ft_en {
	font-size: 380%;
	text-transform: uppercase;
	margin-bottom: -0.1em;
	letter-spacing: .18em;
}

.has-mimg .m_inbox {
	position: absolute;
	left: min(100px,6.6%);
	bottom: min(9vw,50px);
}
.has-mimg .m_title {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 1em;
	color: #FFF;
}
.has-mimg .h_txt {
	margin-top: 1.5em;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.m_title {
	font-size: 3vw;
}
.m_title .ft_en {
	font-size: 260%;
}

.has-mimg .m_inbox {
	bottom: 5vw;
}
}

/*-----------------------------------------------
 Layout - pankuzu
-----------------------------------------------*/
.pankuzu {
	position: relative;
	display: flex;
	justify-content: flex-end;
	gap: .2em .5em;
	color: rgba(58,80,55,0.4);
	font-size: 86%; 
	letter-spacing: .15em;
    margin: 2em min(6.6vw,100px) min(7vw,90px) auto;
}
.pankuzu li::after {
	content: "−";
}
.pankuzu li:last-child::after {
	display: none;
}
.pankuzu a {
	text-decoration: underline;
}
.pankuzu a:hover {
	color: var(--color-mgrn);
	text-decoration: none;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.pankuzu {
	font-size: 60%;
    margin: 1.2em 2em 8% auto;
}
}

/*-----------------------------------------------
 Layout - com_lead_box
-----------------------------------------------*/
.com_lead_box {
	position: relative;
    text-align: center;
}
.com_lead_box .com_h__min {
	display: inline-block;
	letter-spacing: .18em;
}
.com_lead_box .com_h__min i {
	position: relative;
	display: inline-block;
	color: var(--color-bgrn);
	font-size: 80%;
	margin-right: -1em;
	translate: -0.2em -1em;
}
.com_lead_box .lead_txt {
	font-size: 105%;
	line-height: 2.2;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.com_lead_box .com_h__min {
	letter-spacing: .08em;
}
.com_lead_box .lead_txt {
	text-align: left;
	font-size: 100%;
	line-height: 1.8;
}
}


/*-----------------------------------------------
 Layout - f_medical
-----------------------------------------------*/
.f_medical {
	background: var(--color-pgrn) url(../images/common/bg-splay-yel@2x.png) no-repeat left bottom;
	background-size: auto 100%;
	padding: min(6vw,70px) 0;
}
.f_medical .com_h__en {
	font-size: 126%;
	margin-bottom: 1.8em;
}
.f_medical .com_h__en::before {
	font-size: 90%;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.f_medical {
	padding: 10% 0;
}
.f_medical .com_h__en {
	font-size: 3.5vw;
	margin-bottom: 1.4em;
}
} 


/*-----------------------------------------------
 Layout - f_bnr
-----------------------------------------------*/
.f_bnr {
	padding: min(6vw,90px) 0;
}
/* f_bnr_wp */
.f_bnr_wp {
	display: grid;
	grid-template-columns: 1 1;
	row-gap: 1em;
}
.f_bnr_wp a {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	font: var(--font-min);
	font-size: min(1.5vw,1.06rem);
	letter-spacing: .15em;
	padding-left: 1.2em;
}
.f_bnr_wp .ft_en {
	position: relative;
	display: inline-block;
	color: var(--color-news);
	font: var(--font-en);
	font-size: 187%;
	letter-spacing: .1em;
	padding-right: 1.2em;
}
.f_bnr_wp .ft_en::before {
	position: absolute;
	font-family: 'fontello';
	content: '\e802';
	font-size: 70%;
	right: 102%;
	top: 50%;
	translate: 0 -50%;
}
.f_bnr_wp .ft_en .com_arw {
	position: absolute;
	font-size: 36%;
	background-color: var(--color-news);
	right: 0;
	top: 50%;
	translate: 0 -50%;
}
.f_bnr_wp .bnr_blog .ft_en {color: var(--color-blog);}
.f_bnr_wp .bnr_blog .com_arw {background-color: var(--color-blog);}

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

.f_bnr_inbox {
	display: grid;
	justify-content: space-between;
	grid-template-columns: 16% 18% 58%;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.f_bnr {
	padding: 10% 0;
}
.f_bnr_inbox {
	display: grid;
	justify-content: space-between;
	grid-template-columns: 45% 50%;
	row-gap: 1.2em;
}
/* f_bnr_wp */
.f_bnr_wp {
	padding-left: 5%;
}
.f_bnr_wp a {
	font-size: 80%;
}

.f_bnr .com_bnr_rec {
	grid-column: 1/3;
	grid-row: 2/3;
}
} 






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

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

/*-----------------------------------------------
 Component - box
-----------------------------------------------*/
.com_inbox {
	width: 93%;
	max-width: 1200px;
	margin-inline: auto;
}
.com_in_pdg {
	padding-left: 3.8%;
	padding-right: 3.8%;
}
.txt_bld {
    font-size: 112%;
    font-weight: var(--fw_bold);
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.txt_bld {
    font-size: 105%;
}
}


/*-----------------------------------------------
 Component - title
-----------------------------------------------*/
.com_h__enjp {
	margin-bottom: 3em;
}
.com_h__enjp .com_h__min {
	margin-bottom: 0;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.com_h__enjp {
	margin-bottom: 6%;
}
}


/*-----------------------------------------------
 Component - heading
-----------------------------------------------*/
/* com_h__bg */
.com_h__bg {
	position: relative;
	text-align: center;
	color: #FFF;
	font: var(--font-min);
	font-size: min(3vw,233%);
	letter-spacing: .15em;
	line-height: 1.3;
	background: url(../images/common/bg-splay-bar@2x.png) no-repeat left bottom / contain;
	background-color: var(--color-bgrn);
	padding: .8em 1em;
	margin-bottom: 1.6em;
}
.com_h__bg.bg__och {background-color: var(--color-blog);}
.com_h__bg.bg__grn {background-color: var(--color-grn);}

/* com_h__radi */
.com_h__radi {
	position: relative;
	text-align: center;
	font-size: min(2vw,140%);
    font-weight: var(--fw-bold);
	letter-spacing: .2em;
	line-height: 1.3;
	color: #FFF;
	background-color: var(--color-mgrn);
	border-radius: 100vmax;
	padding: .5em;
	margin-bottom: 1.2em;
}

/*com_h__bdr*/
.com_h__bdr {
	position: relative;
	text-align: center;
	font: var(--font_klee);
	font-size: min(2.8vw,218%);
	line-height: 1.3;
	letter-spacing: .15em;
	padding: 1em 1%;
	margin-bottom: 1.5em;
	border-top: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.com_h__bg {
	font-size: 130%;
	letter-spacing: .06em;
	padding: .6em .4em;
	margin-bottom: 1.4em;
}
/* com_h__radi */
.com_h__radi {
	font-size: 105%;
	letter-spacing: .1em;
	margin-bottom: 1em;
}
/*com_h__bdr*/
.com_h__bdr {
	font-size: 125%;
	letter-spacing: .08em;
}
}


/*-----------------------------------------------
 Component - text
-----------------------------------------------*/
.com_txt_center {
	text-align: center;
	font-size: min(2vw,140%);
	font-weight: var(--fw-bold);
	line-height: 1.7;
	letter-spacing: .15em;
	font-feature-settings: "halt";
	margin-top: 2em;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.com_txt_center {
	font-size: 105%;
	letter-spacing: .08em;
	margin-top: 1.4em;
}
}


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

/* Component - box - com_box__bg
-----------------------------------------------*/
.com_box__bg {
	position: relative;
	background-color: #fff;
	padding: min(5%,50px) 4% 4%;
	margin-inline: auto;
	border-radius: 2em;
}
.com_box__bg .box_inner {
    padding-left: 1.8%;
    padding-right: 1.8%;
}
.com_box__bg > .com_h__en {
	text-align: center;
}
.com_box__bg > .com_h__min {
	text-align: center;
	font-size: min(3vw,206%);
	margin-bottom: 1em;
}
.com_box__bg .com_flt {
	margin-inline: auto;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.com_box__bg {
	padding: 10% 6%;
	border-radius: 6vw;
}
.com_box__bg .box_inner {
    padding-left: 1%;
    padding-right: 1%;
}
.com_box__bg > .com_h__en {
	font-size: 3.5vw;
}
.com_box__bg > .com_h__min {
	font-size: 130%;
}
}

/* Component - box - com_box__s
-----------------------------------------------*/
.com_box__s {
	position: relative;
	max-width: 1200px;
	background-color: #f6f8f1;
	padding: 3.6% 4%;
	margin-inline: auto;
	border-radius: 3.2em;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.com_box__s {
	padding: 8% 6%;
	border-radius: 6vw;
}
}

/* Component - box - com_box__corner
-----------------------------------------------*/
.com_box__corner {
	--corner-bg-color: #fff;
	--corner-accent-color: var(--color-bgrn);

	position: relative;
	background-color: var(--corner-bg-color);
	border-radius: 2em;
	padding: 8.2% 7.6%;
	margin-inline: auto;
}
.com_box__corner .com_corner,
.com_box__corner .com_h__en::before,
.com_box__corner .com_h__min span,
.com_box__corner .com_h__bld span {
	color: var(--corner-accent-color);
}
.com_box__corner a:hover .com_arw {
	background-color: var(--corner-accent-color);
}

.com_box__corner .com_h__deco {
	--deco-color: var(--corner-accent-color);
	--deco-bg-color: var(--corner-bg-color);
	opacity: 0.3;
	margin-bottom: .4em;
}

.com_box__corner .fam_illust {
	width: 15%;
	max-width: max-content;
	margin: -15% auto 0;
}

.color_yel {
	--corner-bg-color: #ffffe9;
	--corner-accent-color: #d5ac55;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.com_box__corner {
	padding: 12% 7%;
	border-radius: 8vw;
}

.com_box__corner .fam_illust {
	width: 30%;
	margin-top: -20%;
}
}


/*-----------------------------------------------
 Component - com_col_list
-----------------------------------------------*/
.com_col_list {
	position: relative;
	display: grid;
}
.com_col_list .box_img {
	position: relative;
	max-width: max-content;
	margin: 0 auto 6%;
}

.com_col_list > li > .com_h__bld {
	text-align: center;
	margin-bottom: 0;
}
.com_col_list > li > .com_h__en {
	text-align: center;
	margin-bottom: .32em;
}
.com_col_list > li > .com_h__bld {
	text-align: center;
	margin-bottom: 0;
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {
.com_col_list {
	justify-content: space-between;
	row-gap: 5em;
}
.com_col_list.col__2 {
	grid-template-columns: repeat(2,47%);
}
.com_col_list.col__3 {
	grid-template-columns: repeat(3,min(31.2%,390px));
}
.com_col_list.col__4 {
	grid-template-columns: repeat(4,23.4%);
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.com_col_list {
	row-gap: 2.6em;
}
.com_col_list.col__2 .box_img {
	width: 90%;
}
.com_col_list.col__3 {
	row-gap: 1.8em;
}
.com_col_list.col__3 > *:not(:last-child) {
	padding-bottom: 8%;
	border-bottom: 1px solid #E6E6E6;
}
.com_col_list.col__3 .box_img {
	width: 80%;
}

.com_col_list .sp_img_w {
	width: 96% !important;
}
}



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

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

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


}