@charset "UTF-8";


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

   contentpage.css

	- Variables
	- Layout
	- Component

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




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

======================================================== */
.color_blu {
	--accent-color: var(--color-blu);
	--bg-color: #e5f2f7;
}
.color_taq {
	--accent-color: var(--color-taq);
	--bg-color: #f2fafa;
}
.color_lgrn {
	--accent-color: var(--color-lgrn);
	--bg-color: #FFF;
}
.color_och {
	--accent-color: var(--color-och);
}
.color_och-100 {
	--accent-color: var(--color-och-100);
}
.color_coral {
	--accent-color: var(--color-coral);
	--bg-color: #FFF;
}
.color_tan {
	--accent-color: var(--color-tan);
}
.color_org {
	--accent-color: var(--color-org);
	--bg-color: rgba(251,234,172,0.4);
}
.color_pnk {
	--accent-color: var(--color-pnk);
	--bg-color: #fcf7fa;
}
.color_bei {
	--accent-color: var(--color-bei-600);
	--bg-color: rgba(205,202,168,0.2);
}

.color_taq .has-icon::before {	color: #a4dedd;}
.color_blu .has-icon::before {	color: #a1d0e3;}
/* .color_lgrn .has-icon::before {	background: linear-gradient(to bottom, var(--accent-color) 50%, #6baa80 50%);} */
.color_lgrn .has-icon::before {	background: linear-gradient(to bottom, #cae2c5 50%, #95c68b 50%);}
.color_och .has-icon::before {	color: #eaddbc;}
.color_tan .has-icon::before {	color: #dfb9a6;}
.color_org .has-icon::before {	color: #e8c090;}
.color_pnk .has-icon::before {	color: #e7c8db;}
.color_bei .has-icon::before {	color: #e6e4d3;}

/* .color_blu .has-icon::before {	background-image: url(../images/common/icon-wave-blu.svg);}
.color_lgrn .has-icon::before {	background-image: url(../images/common/icon-wave-grn.svg);}
.color_och .has-icon::before {	background-image: url(../images/common/icon-wave-och.svg);}
.color_pnk .has-icon::before {	background-image: url(../images/common/icon-wave-pnk.svg);}
.color_bei .has-icon::before {	background-image: url(../images/common/icon-wave-bei.svg);} */



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

======================================================== */
.site-bg {
	position: absolute;
	background-color: var(--color-ivo);
	inset: 0;
	width: 100vw;
	height: 100%;
	z-index: -10;
}

/*-----------------------------------------------
 Layout - m_nav_area
-----------------------------------------------*/
.m_nav_area {
	/* position: absolute; */
	width: 92%;
	max-width: 1100px;
	background-color: var(--color-ivo);
	border-radius: 20px;
	padding: 1.2em 1em 1em;
	margin: auto;
	translate: 0 -50%;
}


/*-----------------------------------------------
 Layout - FV
-----------------------------------------------*/
.fv_area .m_img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.fv_area .m_inbox {
	position: relative;
}
/* type-bg */
.fv_area.type-bg {
	height: min(45vw,560px);
}
.fv_area.type-bg .m_img {
	position: absolute;
	width: 100%;
	height: 100%;
	inset: 0;
	z-index: -1;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {
.fv_area.type-bg {
	height: 60vw;
}
}

/*-----------------------------------------------
 Layout - m_title
-----------------------------------------------*/
.m_title {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	row-gap: 1.2rem;
	font: var(--font-min);
	font-size: min(2.8vw,200%);
	letter-spacing: .04em;
	line-height: 1.5;
	white-space: nowrap;
}
.m_title .ft_en {
	font-size: 233%;
}
/* type-bg */
.fv_area.type-bg .m_title {
	position: absolute;
	text-align: center;
	color: #FFF;
	text-shadow: 0 0 15px rgba(0,0,0,0.3);
	inset: 58% 0 auto 0;
	margin: auto;
	transform: translateZ(0);
	translate: 0 -50%;
}
.fv_area.type-bg .m_title .ft_en {
	text-transform: uppercase;
}

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

.m_title {
	font-size: 3.5vw;
	row-gap: 2vw;
}
.m_title .ft_en {
	font-size: 200%;
}

.fv_area.type-bg .m_title {
	top: 70%;
}
}

/*-----------------------------------------------
 Layout - pankuzu
-----------------------------------------------*/
.pankuzu {
	position: relative;
	display: flex;
	justify-content: flex-end;
	gap: .2em .5em;
	color: #99A1A7;
	font-size: 94%; 
	letter-spacing: .08em;
    margin: 0 min(6.6vw,100px) min(7vw,80px) auto;
}
.pankuzu li::after {
	content: "＞";
	font-size: 80%;
}
.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_deco_wave {
	color: var(--color-taq);
	margin-top: 0;
}
.com_lead_box .lead_txt {
	line-height: 2.2;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.com_lead_box .com_h__min {
	letter-spacing: .05em;
}
.com_lead_box .lead_txt {
	text-align: left;
	line-height: 1.8;
}
}


/*-----------------------------------------------
 Layout - f_medical
-----------------------------------------------*/
.f_medical {
	background-color: #F1F0ED;
	padding: min(7vw,90px) 0;
}
.f_medical .com_h__en {
	color: var(--color-base);
	font-size: min(2vw,153%);
	margin-bottom: 1.6em;
}
.f_medical .com_h__en::before {
	font-size: 90%;
}
.f_medical .com_menu__med a {
	font: var(--font-min);
}
/* 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 {
	background-color: #fff;
	padding: min(6vw,90px) 5%;
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.f_bnr_inbox {
	max-width: 1150px;
	display: grid;
	justify-content: space-between;
	grid-template-columns: 36% 19% 40%;
	margin-inline: auto;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.f_bnr {
	padding: 12% 5%;
}
.f_bnr_inbox {
	display: grid;
	row-gap: 1em;
}
} 

/* Layout - f_bnr - bnr_rec
-----------------------------------------------*/
.bnr_rec {
	position: relative;
	--accent-color: var(--color-coral);
}
.bnr_rec a {
	height: 100%;
	display: grid;
	justify-content: space-between;
	align-items: center;
	grid-template-columns: 48% 46%;
	font-size: min(1.6vw,120%);
}
.bnr_rec .ft_en {
	position: relative;
	font-size: 155%;
	margin-bottom: .3em;
}
.bnr_rec .ft_min {
	position: relative;
	padding-right: 2em;
}
.bnr_rec .ft_min i {
	position: absolute;
	font-size: 170%;
	right: 0;
	top: 50%;
	translate: 0 -50%;
}
.bnr_rec .ft_en::first-letter,
.bnr_rec .ft_min i {
	color: var(--accent-color);
}

.bnr_rec a::before {
	position: absolute;
	content: "";
	background: url(../images/common/rec-bg-wave@2x.png) no-repeat right bottom;
	background-size: contain;
	width: 96%;
	height: 80%;
	right: 0;
	bottom: -28%;
	rotate: -10deg;
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.bnr_rec {
	padding-left: 6.4%;
	border-left: 1px solid var(--color-bdr);
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.bnr_rec a {
	font-size: 90%;
}
}





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

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

/*-----------------------------------------------
 Component - box
-----------------------------------------------*/
.com_inbox {
	width: 94%;
	max-width: 1300px;
	margin-inline: auto;
}
.com_in_pdg {
	padding-left: 3.8%;
	padding-right: 3.8%;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.com_inbox {
	width: 96%;
}
}


/*-----------------------------------------------
 Component - title
-----------------------------------------------*/
.com_title__enjp {
	text-align: center;
	display: grid;
	row-gap: 1.4rem;
	margin-bottom: 3em;
	margin-bottom: 6%;
}
.com_title__enjp > * {
	margin-bottom: 0;
}
.com_title__enjp .com_h__min span {
	color: var(--accent-color);
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.com_title__enjp {
	row-gap: .7em;
	margin-bottom: 7%;
}
}


/*-----------------------------------------------
 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: .04em;
	line-height: 1.3;
	background: url(../images/common/bg-wave-bar@2x.png) no-repeat right bottom / contain;
	background-color: #CCB376;
	padding: .8em 1em;
	margin-bottom: 1.6em;
}

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

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

/* com_h__enjp */
.com_h__enjp {
	margin-bottom: 1em;
}
.com_h__enjp .com_h__en {
	margin-bottom: 1em;
}
.com_h__enjp .com_h__min {
	margin-bottom: 0;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

/* com_h__bg */
.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: .08em;
	padding: .6em;
	margin-bottom: 1.2em;
}
/*com_h__bdr*/
.com_h__bdr {
	font-size: 125%;
	letter-spacing: .08em;
}
}


/*-----------------------------------------------
 Component - text
-----------------------------------------------*/
.com_txt__center {
	position: relative;
	text-align: center;
	font: var(--font-min);
	font-size: min(2vw,160%);
	line-height: 1.5;
	letter-spacing: .1em;
	margin-bottom: .6em;
}

/* com_txt__radi */
.com_txt__radi {
	position: relative;
	text-align: center;
	font-size: min(1.9vw,120%);
    font-weight: var(--fw-bold);
	letter-spacing: .12em;
	line-height: 1.3;
	background-color: #FFF;
	border-radius: .5em;
	padding: .7em;
	margin-inline: auto;
}
.com_txt__radi span {
	color: var(--accent-color);
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.com_txt__center {
	font-size: 115%;
	letter-spacing: .08em;
}

/* com_txt__radi */
.com_txt__radi {
	font-size: 105%;
	letter-spacing: .08em;
}
}


/*-----------------------------------------------
 Component - deco
-----------------------------------------------*/
.com_deco_wave {
	position: relative;
	width: 10vw;
	max-width: 109px;
	aspect-ratio: 109/16;
	color: var(--accent-color);
	margin: 2em auto 3.5em;
}
.com_deco_wave::before {
	display: block;
	content: "";
	background-size: contain;
	background-color: currentColor;
	mask: url(../images/common/wave.svg) no-repeat center;
	-webkit-mask: url(../images/common/wave.svg) no-repeat center;
	mask-size: contain;
	-webkit-mask-size: contain;
	width: 100%;
	height: 100%;
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.com_deco_wave {
	width: 18vw;
	margin: 5vw auto 6vw;
}
}




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

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

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


/*-----------------------------------------------
 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 > * > .com_h__min {
	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,min(48%,616px));
}
.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%;
	margin-bottom: 7%;
}
.com_col_list.col__3 {
	row-gap: 2em;
}
.com_col_list.col__3 > *:not(:last-child) {
	padding-bottom: 8%;
	/* border-bottom: var(--border-dash); */
	border-bottom: 1px solid var(--color-bdr);
}
.com_col_list.col__3 .box_img {
	width: 80%;
	margin-bottom: 5%;
}

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

.com_box__bg .com_col_list.col__3 > *:not(:last-child) {
	border-bottom: 1px dotted var(--color-bei-600);
}
}



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

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

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


}