@charset "UTF-8";

/*--------------------------------------------------------------------------------------------------------------------------------------------------------
	共通
--------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* フォント */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');
#missionContents { font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'Noto Sans JP', sans-serif; }

/* 画像 */
img { max-width: 100%; }

/* ページ固有 */
#mission { padding: 0; }
#mission .l-header,
#mission .l-breadcrumb,
#mission .l-footer,
#mission .container_liquid { margin: 0; }
#mission p:not(:last-child) { margin: 0; }
#mission .m-btn.btn-primary { background-color: #008fed; }
#mission .f_pagetop { background-color: #0391e7; position: relative; }
#mission .f_pagetop::after { content: ''; background: url("../images/txt_supporting_your_life_pc.svg") no-repeat center center / contain; position: absolute; right: 23px; top: 50%; transform: translateY(-50%); display: block; max-width: 303px; width: 32%; height: 30px; }

/* タイトル */
#missionContents .leftLineTitle { padding-left: 14px; border-left: solid 5px #0391e7; text-align: left; }
#missionContents .leftLineTitleW { border-left-color: #fff; }

#missionContents .bgTitle { text-align: center; font-size: 2.3rem; letter-spacing: 0.05em; }
#missionContents .bgTitle span { display: inline-block; color: #0391e7; background-color: #f8fe81; padding: 2px 5px; min-width: 242px; }

/* 文字サイズ */
#mission .f19 { font-size: 1.9rem !important; line-height: 1.9; }
#mission .f23 { font-size: 2.3rem !important; }
#mission .f27 { font-size: 2.7rem !important; }
 
/* 文字色 */
#mission .fontColor01 { color: #0391e7; }

/* ディスプレイ */
#mission .pcDisplayNone { display: none; }

/* 下線テキスト */
#mission p.lineTxt span { position: relative; }
#mission p.lineTxt span::before { background-color: #f8fe81; content: ''; position: absolute; bottom: 3px; display: inline-block; width: 100%; height: 9px; transform:skewX(-50deg); z-index: -1; }

/* 背景 */
#mission #conttentsBgTop { background: linear-gradient(to bottom, #25a0ea, #fff 50%); }
#mission #conttentsBgBtm { background: linear-gradient(to top, #aadaf7, #f3fafe 90%); }
#mission .conttentsBgTriangle { position: relative; z-index: 1; padding-top: 15.5vw; }
#mission .conttentsBgTriangle::before { content:'';  background: url("../images/img_triangle.png") no-repeat center top / contain; width: 100%; position: absolute; top: 0; left: 0; right: 0; height: 15vw; }

/* コンテンツ幅 */
#mission .contentsWidth { max-width: 960px; padding: 0 10px; margin: 0 auto; }


@media screen and (max-width: 767px) {
	/* ページ固有 */
	#mission .container_liquid { padding-left: 25px; padding-right: 25px; }
	#mission .f_pagetop::after { right: 10px; max-width: 22%; height: 40px; }
	#mission .f_pagetop::after { background-image: url("../images/txt_supporting_your_life_sp.svg"); }
	
	/* フォント */
	.l-main_contents p { font-size: 1.4rem; }
	
	/* タイトル */
	#mission .leftLineTitle { padding-left: 10px; border-left-width: 4px; }
	#mission .leftLineTitle img { width: 115px; }

	#missionContents .bgTitle { font-size: 1.8rem; }
	#missionContents .bgTitle span { min-width: 195px; }
	
	/* 文字サイズ */
	#mission .spF16 { font-size: 1.6rem !important; }
	#mission .spF22 { font-size: 2.2rem !important; }
	
	/* ディスプレイ */
	#mission .spDisplayInline { display: inline; }
	#mission .spDisplayNone { display: none; }
	#mission .spDisplayBlock { display: block; }
	
	/* 背景 */
	#mission .conttentsBgTriangle { padding-top: 14vw; }
	#mission .conttentsBgTriangle::before { content:'';  background: url("../images/img_triangle.png") no-repeat center top / 100%; width: 100%; margin-left: 0; height: 14vw; }
	
	/* コンテンツ幅 */
	#mission .contentsWidth { padding: 0 25px; }

}


/*--------------------------------------------------------------------------------------------------------------------------------------------------------
	固有
--------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* MV */
#mission #mvSec { background: linear-gradient(to bottom, #0391e7, #0391e7, #b9d5ee 90%); box-shadow: inset 0 -4px 10px -5px rgba(0,0,0,0.5); text-align: center; padding: 72px 10px 40px; }
#mission #mvSec h2 { max-width: 260px; margin: 0 auto; }
#mission #mvSec ul { margin-top: 77px; display: flex; justify-content: center; }
#mission #mvSec ul li { box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.2); border-radius: 30px; overflow: hidden; max-width: 206px; width: 30%; margin: 0 1.6%; }
#mission #mvSec ul li a { display: block; background-color: #fff; padding: 13px 20px 10px; position: relative; text-align: center; transition: 0.7s; }
#mission #mvSec ul li a:hover { background-color: #f8fe81; }
#mission #mvSec ul li a::before { content: ''; border-style: solid; border-width: 6px 4px 0 4px; border-color: #0391e7 transparent transparent transparent; position: absolute; left: 20px; top: 50%; transform: translateY(-1px); }

@media screen and (max-width: 767px) {
	#mission #mvSec { padding: 52px 25px 30px; background-position: center bottom; }
	#mission #mvSec h2 { width: 58%; margin: 0 auto; }
	#mission #mvSec ul { margin-top: 50px; justify-content: space-between; }
	#mission #mvSec ul li { margin: 0; width: 31%; }
	#mission #mvSec ul li a { padding: 5px 17% 10px; }
	#mission #mvSec ul li a:hover { background-color: #fff; }
	#mission #mvSec ul li a::before { border-width: 5px 3px 0 3px; left: 7%; transform: translateY(-3px); }
}

/* About */
#mission #aboutSec { padding-top: 75px; padding-bottom: 50px; }
#mission #aboutSec .bgTitle { margin-top: 35px; }
#mission #aboutSec .fontColor01 { margin-top: 30px; }
#mission #aboutSec #aboutList { display: flex; justify-content: space-between; max-width: 960px; padding: 0 10px; margin: 115px auto 0; }
#mission #aboutSec #aboutList li { border: solid 2px #0391e7; max-width: 270px; width: 30%; position: relative; padding: 80px 20px 65px; }
#mission #aboutSec #aboutList li:nth-child(2) { margin: 0 2%; }
#mission #aboutSec #aboutList li .aboutImg { position: absolute; top: -45px; left: 0; right: 0; text-align: center; }
#mission #aboutSec #aboutList li .aboutHead { text-align: center; font-weight: bold; line-height: 1.4; }
#mission #aboutSec #aboutList li .aboutHead .headRuby { font-size: 1.3rem; }
#mission #aboutSec #aboutList li .aboutHead .headEn { font-size: 3.5rem; font-weight: bold; }
#mission #aboutSec #aboutList li .aboutHead .headEn span { font-size: 3.5rem; color: #0391e7; }
#mission #aboutSec #aboutList li .aboutTxt { margin-top: 38px; display: flex; align-items: center; justify-content: center; text-align: center; }
#mission #aboutSec #aboutList li .aboutTxt p { color: #999999; }
#mission #aboutSec #aboutList li .aboutTxt p span { font-size: 1.2rem; }

@media screen and (max-width: 767px) {
	#mission #aboutSec { padding-top: 47px; }
	#mission #aboutSec .bgTitle { margin-top: 30px; }
	#mission #aboutSec #aboutList { margin: 25% auto 0; }
	#mission #aboutSec #aboutList li { width: 32%; padding: 0 1% 5%; }
	#mission #aboutSec #aboutList li .aboutImg { width: 70%; margin: 0 auto; position: absolute; top: 0; transform: translateY(-50%); }
	#mission #aboutSec #aboutList li .aboutHead { margin-top: 50%; line-height: 1.2; }
	#mission #aboutSec #aboutList li .aboutHead .headRuby { font-size: 0.8rem; }
	#mission #aboutSec #aboutList li .aboutHead .headEn { font-size: 2rem; }
	#mission #aboutSec #aboutList li .aboutHead .headEn span { font-size: 2.5rem; }
	#mission #aboutSec #aboutList li .aboutHead .headJp { font-size: 1rem; line-height: 1.5; }
	#mission #aboutSec #aboutList li .aboutTxt { margin-top: 20px; }
	#mission #aboutSec #aboutList li .aboutTxt p { font-size: 1.3rem; line-height: 1.4; }
	#mission #aboutSec #aboutList li .aboutTxt p span { display: block; margin-top: 3px; font-size: 1rem; }
	#mission #aboutSec #aboutList li:nth-child(2) { margin: 0; }
	
}

#mission #missionSec,
#mission #visionSec,
#mission #valueSec { padding-top: 3vw; }


/* MISSION */
#mission #missionSec { text-align: center; }
#mission #missionSec #txtTheme { margin-top: 80px; }
#mission #missionSec #txtTheme img { max-width: 100%; }
#mission #missionSec .bgTitle { margin-top: 65px; }
#mission #missionSec .bgTitle + p { margin-top: 35px; } 

@media screen and (max-width: 767px) {
	#mission #missionSec { margin-top: 16vw; }
	#mission #missionSec #txtTheme { margin: 60px auto 0; width: 95%; }
	#mission #missionSec #txtTheme img { width: 100%; }
	#mission #missionSec .bgTitle { margin-top: 50px; }
}

/* VISION */
#mission #visionSec { margin-top: 192px; padding-bottom: 40px; text-align: center; }
#mission #visionSec #imgVision { margin-top: 40px; }
#mission #visionSec #txtVision { font-size: 3.4rem; color: #0391e7; margin-top: 50px; letter-spacing: 0.05em; line-height: 2.1; }
#mission #visionSec #txtVision span { color: #fff; background-color: #0391e7; padding: 0 8px; }
#mission #visionSec #txtVision + p { margin-top: 25px; line-height: 1.95; }

@media screen and (max-width: 767px) {
	#mission #visionSec { margin-top: 85px; }
	#mission #visionSec #imgVision { width: 82%; margin: 40px auto 0; }
	#mission #visionSec #txtVision { font-size: 2.6rem; margin-top: 35px; line-height: 1.8; }
	#mission #visionSec #txtVision span { padding: 0 3px; }
}

/* VALUE */
#mission #valueSec { padding-bottom: 55px; }
#mission #valueSec p.lineTxt { margin-top: 35px; }
#mission #valueSec ol#valueList { margin-top: 53px; }
#mission #valueSec ol#valueList li { display: flex; align-items: center; }
#mission #valueSec ol#valueList li:nth-child(n+2) { margin-top: 35px; }
#mission #valueSec ol#valueList li .listNum { background-color: #fff; border-radius: 0 30px 30px 0; box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.3); padding: 17px 25px 13px 10px; text-align: right; width: 113px; }
#mission #valueSec ol#valueList li .listTxt { flex: 1; position: relative; margin-left: 35px; font-size: 2.8rem; }
#mission #valueSec ol#valueList li .listTxt p { position: relative; display: inline; }
#mission #valueSec ol#valueList li .listTxt p::before { background-color: #9dd6f9; content: ''; position: absolute; bottom: 3px; display: inline-block; width: 100%; height: 9px; transform:skewX(-25deg); z-index: -1; }


@media screen and (max-width: 767px) {
	#mission #valueSec { margin-top: 16vw; padding-bottom: 25px; }
	#mission #valueSec ol#valueList { margin-top: 30px; }
	#mission #valueSec ol#valueList li .listNum { padding: 10px 15px 10px 10px; width: 50px; }
	#mission #valueSec ol#valueList li .listTxt { margin-left: 20px; font-size: 2rem; }
	#mission #valueSec ol#valueList li:nth-child(n+2) { margin-top: 20px; }
	#mission #valueSec ol#valueList li .listTxt p { font-size: 2rem; }
	#mission #valueSec ol#valueList li .listTxt p::before { content: none; } 
	#mission #valueSec ol#valueList li .listTxt p span { position: relative; }
	#mission #valueSec ol#valueList li .listTxt p span::before { background-color: #9dd6f9; content: ''; position: absolute; bottom: 3px; display: inline-block; width: 100%; height: 9px; transform:skewX(-25deg); z-index: -1; }

}