@charset "utf-8";

/* ===================================================
	Company CSS
====================================================== */

/* ---------------------------------------------------
	#sec01
------------------------------------------------------ */
#sec01 { position: relative; z-index: 0; padding-top: 100px; }
#sec01>* { text-align: center; }
#sec01 .en_tit { position: absolute; z-index: -1; top: 0; left: 50%; transform: translateX(-50%); color: rgba(242 242 210/60%); }
#sec01 h2 .tit { display: block; font-size: 30px; }
#sec01 h2 .sm { font-size: 12px; }
#sec01 h2::after { position: absolute; top: 60px; right: calc(50vw - 350px); content: ''; display: block; width: 136px; height: 136px; border-radius: 50%; overflow: hidden; background: url(../../company/img/sec01_01.jpg)no-repeat center/cover; }
#sec01 .dots_flow { margin-top: 55px; }
#sec01 .dots_flow .txt { position: absolute; top: 110px; left: 50%; transform: translateX(-50%); text-align: left; line-height: 1.8; text-shadow: 0 0 2px #fff, 0 0 2px #fff;}
#sec01 .dots_flow .tit { font-size: 30px; line-height: 1.5; }
#sec01 .dots_flow .tit+p { width: 500px; max-width: 100%; margin-top: 1em; }
#sec01 .dots_flow img { max-height: 870px; }
#sec01 .dots_flow .dots-line { position: absolute; top: 500px; left: calc(50vw - 550px); margin: 0 auto; }

@media screen and (hover: hover) {}
@media screen and (min-width: 601px) {}
@media screen and (max-width: 1170px) {
	#sec01 .dots_flow .dots-line { left: 3%; }
}
@media screen and (max-width: 1100px) {
	#sec01 h2::after { right: 18.9%; }
}
@media screen and (max-width: 600px) {
	#sec01 { padding-top: 12vw; }
	#sec01 .en_tit { left: 0; transform: none; }
	#sec01 h2 { display: flex; flex-wrap: wrap; justify-content: center; }
	#sec01 h2 .tit { width: 100%; font-size: 22px; }
	#sec01 h2>span { width: 250px; }
	#sec01 h2::after { position: relative; transform: translate(40%, -45%); width: 100px; height: 100px; top: auto; right: auto; }
	#sec01 .dots_flow { margin: 0; }
	#sec01 .dots_flow .txt { top: 8%; font-size: 14px;
		text-shadow: 0 0px 5px #fff, 0 0px 5px #fff, 0 0px 5px #fff, 0 0px 5px #fff, 0 0px 5px #fff, 0 0px 5px #fff, 0 0px 5px #fff, 0 0px 5px #fff, 0 0px 10px #fff, 0 0px 10px #fff, 0 0px 10px #fff, 0 0px 10px #fff, 0 0px 10px #fff, 0 0px 10px #fff, 0 0px 10px #fff;
		line-height: 1.8;}
	#sec01 .dots_flow .tit { font-size: 22px; }
	#sec01 .dots_flow img { height: max(500px, 90vw); }
	#sec01 .dots_flow .dots-line { top: auto; bottom: 30px; }
}


/* ---------------------------------------------------
	#sec02
------------------------------------------------------ */
#sec02 .txt_col { position: relative; z-index: 0; padding: 70px 0 90px; overflow: hidden; text-align: center;}
#sec02 .txt_col::before,
#sec02 .txt_col::after { position: absolute; z-index: -1; content: ''; display: block; width: 534px; height: 192px; opacity: .2;}
#sec02 .txt_col::before { right: -100px; top: -75px; background: url(../../img/bg_pat_02.svg)no-repeat center/contain; }
#sec02 .txt_col::after { left: 0; bottom: -90px; background: url(../../img/bg_pat_01.svg)no-repeat center/contain; }
#sec02 .sub { display: inline-block; margin-top: 45px; padding: 0 68px; font-size: 32px; font-style: italic; background: #f2f2d2; }
#sec02 .sub+p { margin-top: 25px; }
#sec02 .dots_flow .txt { position: absolute; top: 110px; left: 50%; transform: translateX(-50%); text-align: left; line-height: 1.8; /* text-shadow: 0 0 2px #fff, 0 0 2px #fff;*/ color: #fff;}
#sec02 .dots_flow .tit { display: flex; align-items: center; font-size: 45px; line-height: 1.5; }
#sec02 .dots_flow .tit .num { margin-left: .5em; font-size: 40px; font-weight: 900; }
#sec02 .dots_flow .tit .num .lg { margin-right: 10px; font-size: 80px; }
#sec02 .dots_flow .tit+p { width: 500px; margin-top: 25px; }
#sec02 .dots_flow img { min-height: 500px; }
#sec02 .dots_flow .dots-line { position: absolute; bottom: 120px; left: calc(50vw - 550px); margin: 0 auto; background: #8e8e8e;}
#sec02 .dots-line button { background: #8e8e8e; }
#sec02 .dots-line li:hover button,
#sec02 .dots-line .slick-active::after,
#sec02 .dots-line .slick-active button { background: #fff; }

@media screen and (max-width: 1170px) {
	#sec02 .dots_flow .dots-line { left: 3%; }
}
@media screen and (max-width: 600px) {
	#sec02 .txt_col { padding: 8vw 0 10vw; }
	#sec02 .txt_col::before,
	#sec02 .txt_col::after { width: 75%; height: 144px; }
	#sec02 .txt_col::before { top: -5%; right: -40%; }
	#sec02 .txt_col::after { bottom: -5%; left: -40%; }
	#sec02 .sub { margin-top: 5vw; padding: 5px 18px; font-size: 22px; }
	#sec02 .sub+p { margin-top: 3.5vw; }
	#sec02 .dots_flow .txt { top: 4%; }
	#sec02 .dots_flow .tit { font-size: 33px; }
	#sec02 .dots_flow .tit .num { font-size: 30px; }
	#sec02 .dots_flow .tit .num .lg { margin-right: 0; font-size: 60px; }
	#sec02 .dots_flow .tit+p { width: auto; margin-top: 15px; }
	#sec02 .dots_flow img { min-height: 300px; }
	#sec02 .dots_flow .dots-line { left: 3%; bottom: 30px; }
}
@media screen and (max-width: 460px) {
	#sec01 h2 { justify-content: stretch; }
	#sec01 h2::after { transform: translate(0, -45%); width: calc(100% - 250px); height: 100px; max-height: 24.6vw; max-width: 100px; }
	#sec01 h2 .tit { text-align: left; }
}
@media screen and (max-width: 359px) {
	#sec01 h2::after { content: none; }
}


/* ---------------------------------------------------
	#sec03
------------------------------------------------------ */
#sec03 { position: relative; z-index: 0; padding: 100px 0 60px; background: rgba(247 209 184/5%); }
#sec03::before,
#sec03::after { position: absolute; z-index: -1; content: ''; display: block; }
#sec03::before { top: 0; left: 0; width: 710px; max-width: 44.3%; height: 450px; background: url(../../img/bg_pat_03.svg)no-repeat right bottom/cover; }
#sec03::after  { bottom: 0; right: 0; width: 547px; max-width: 34.1%; height: 482px; background: url(../../img/bg_pat_04.svg)no-repeat left bottom/cover; }
#sec03 .cmn_tit_01 { margin-bottom: 60px; }
#sec03 .charms { position: relative; padding: 55px 4% 50px; border: 1px solid rgba(197 206 213/95%); background: rgba(248 247 243/95%); text-align: center; }
#sec03 .charms:not(:last-child) { margin-bottom: 50px; }
#sec03 .charms .inner { width: 670px; max-width: 96%; margin: 0 auto; }
#sec03 .charms .ico { position: absolute; top: -30px; left: -35px; display: flex; align-items: center; justify-content: center;
	width: 165px; height: 165px; border-radius: 50%; font-size: 32px; font-weight: bold; color: #fff; background: #bc6b4a; }
#sec03 .charms .tit { font-size: 22px; }
#sec03 .charms .ill .cap { display: block; margin-top: .5em; font-size: 14px; text-align: right; }
#sec03 .charms ul { display: flex; }
#sec03 .charms dl.inner { margin-top: 30px;}
#sec03 .charms dt { margin-bottom: 6px; padding: 8px 0; font-weight: bold; background: #ebe3d8; }
#sec03 .charms dd { display: flex; padding: 4px 0; border-bottom: 1px solid #d2d2d2; font-size: 14px; text-align: left; }
#sec03 .charms dd>span:first-child { width: 130px; }
#sec03 .charms dd>span:last-child { width: calc(100% - 130px); }

#sec3_1 ul { justify-content: space-between; width: 540px; max-width: 90%; margin: 30px auto 0; }
#sec3_1.charms .ill { margin-top: 100px; }
#sec3_2 .name { display: inline-block; width: 230px; padding: 8px 10px; font-size: 22px; font-weight: bold; color: #fff; }
#sec3_2 .name.manpa { margin-top: 65px; background-color: #6ea0ca; }
#sec3_2 .name.kancho { margin-top: 50px; background-color: #efb863; }
#sec3_3 ul { align-items: flex-end; width: 700px; max-width: 100%; margin: 60px auto 0; }
#sec3_3 li { display: flex; flex-direction: column; align-items: center;}
#sec3_3 li:not(:last-child) { position: relative; padding-right: 150px; }
#sec3_3 li:not(:last-child):after { position: absolute; top: 50%; right: 30px; display: block; content: ''; width: 85px; height: 85px; background: url(../../company/img/arrow_ill.svg)no-repeat center/contain; }
#sec3_3 li:first-child .num { padding-bottom: 25px; }
#sec3_3 li .num { flex-grow: 1; padding-bottom: 15px; font-size: 22px; line-height: 1; }
#sec3_3 li .num .md { font-size: 55px;}
#sec3_3 li .num .lg { font-size: 62px;}

@media screen and (max-width: 600px) {
	#sec03 { padding: 11vw 0 7vw; border-bottom: 1px solid #f9f7f3; }
	#sec03 .cmn_tit_01 { margin-bottom: 7vw; }
	#sec03 .charms { padding: 6.5vw 4% 6vw; }
	#sec03 .charms::after { content: ''; display: block; height: 0px; clear: both; visibility: hidden; font-size: 0; }
	#sec03 .charms:not(:last-child) { margin-bottom: 6vw; }
	#sec03 .charms .ico { position: static; float: left; margin: -10% 15px 0 -6%; width: 93px; height: 93px; max-width: 25%; max-height: 21.45vw; font-size: 22px; }
	#sec03 .charms .tit { text-align: left; font-size: 16px; }
	#sec03 .charms .ill .cap { font-size: 12px; }
	#sec03 .charms dd>span:first-child { width: 100px; }
	#sec03 .charms dd>span:last-child { width: calc(100% - 100px); }

	#sec3_1 ul { margin-top: 15px; font-size: 13px; }
	#sec3_1.charms .ill { margin-top: 8vw; }
	#sec3_2 .name { font-size: 17px; }
	#sec3_2 .name.manpa { margin-top: 7vw; }
	#sec3_2.charms .ill { margin-top: 15px; }
	#sec3_3 ul { margin-top: 4vw; }
	#sec3_3 li { display: block; width: calc((100% - 60px)/ 2); }
	#sec3_3 li:not(:last-child) { padding-right: 60px; }
	#sec3_3 li:not(:last-child):after { width: 40px; height: 40px; right: 10px; }
	#sec3_3 li .num { padding-bottom: 0; font-size: 17px; line-height: 1.5; }
	#sec3_3 li .num .md { font-size: 20px; }
	#sec3_3 li .num .lg { font-size: 20px; }
}


/* ---------------------------------------------------
	#sec04
------------------------------------------------------ */
#sec04 { padding-top: 100px; }
#sec04 .cmn_tit_02 { margin-bottom: 40px; }
#sec04 .wrap .txt { padding: 95px 4% 120px; color: #fff; text-align: center; background: url(../../company/img/sec04_bg.jpg)no-repeat center/cover;}
#sec04 .wrap .txt .tit { margin-bottom: 40px; line-height: 1.2; font-size: 32px; }
#sec04 .wrap .txt .tit span { font-size: 60px; }
#sec04 .wrap .txt ul { margin-top: 30px; }
#sec04 .wrap .txt ul li::before { content: '一、'; }

@media screen and (max-width: 600px) {
	#sec04 { padding-top: 11vw; }
	#sec04 .cmn_tit_02 { margin-bottom: 30px; }
	#sec04 .wrap .txt { padding: 9vw 4% 12vw; }
	#sec04 .wrap .txt .tit { margin-bottom: 20px; font-size: 24px; }
	#sec04 .wrap .txt .tit span { font-size: 40px; letter-spacing: 6px; }
	#sec04 .wrap .txt>*:not(.tit) { text-align: left; }
	#sec04 .wrap .txt ul { margin-top: 20px; }
	#sec04 .wrap .txt ul li { padding-left: 1.5em; text-indent: -1.7em; }
	#sec04 .wrap .txt ul li+li { margin-top: 5px; }
	#sec04 .wrap .img img { min-height: 460px; }
}


/* ---------------------------------------------------
	#sec05
------------------------------------------------------ */
#sec05 { padding: 70px 0 30px;}
#sec05 .cmn_tit_02 { margin-bottom: 45px; }
#sec05 .wrap { position: relative; padding-bottom: 125px; }
#sec05 .wrap .img { width: 730px; max-width: 100%; }
#sec05 .wrap .txt { position: absolute; top: 170px; right: 0; width: 592px; padding: 45px 45px 0; background-color: #fff; }
#sec05 .wrap .txt .tit { font-size: 24px; }
#sec05 .wrap .txt dl { display: flex; flex-wrap: wrap; margin-top: 25px;}
#sec05 .wrap .txt dt,
#sec05 .wrap .txt dd { padding-top: 5px; }
#sec05 .wrap .txt dt { width: 120px; font-size: 14px; color: #c69b5f; }
#sec05 .wrap .txt dd { width: calc(100% - 120px); }
#sec05 .wrap .btn1{margin-top:30px;display: block; position: relative;padding: 5px 0;background-color: #5f788d;text-align: center;width: 180px;color: #fff;transition: border-color 500ms ease, background 500ms ease, color 500ms ease;}
#sec05 .wrap .btn1::after,#sec05 .wrap .btn2::after{content: ""; display: block; width: 40px;height: 1px;background-color: #fff;position: absolute;right: -20px;top: 50%;}
#sec05 .wrap .btn1:hover,#sec05 .wrap .btn2:hover{ text-decoration: none; opacity: 0.8;}

#sec05 .wrap .btn2{margin-top:30px;display: block; position: relative;padding: 5px 0;background-color: #a0184f;text-align: center;width: 180px;color: #fff;transition: border-color 500ms ease, background 500ms ease, color 500ms ease;border: none;}

@media screen and (max-width: 600px) {
	#sec05 { padding: 8vw 0 4vw; }
	#sec05 .cmn_tit_02 { margin-bottom: 30px; }
	#sec05 .wrap { padding-bottom: 10vw; }
	#sec05 .wrap .txt { position: static; width: 100%; padding: 5vw 4% 0; }
	#sec05 .wrap .txt .tit { font-size: 18px; }
	#sec05 .wrap .txt dl { margin-top: 15px;}
	#sec05 .wrap .txt dt { width: 110px; }
	#sec05 .wrap .txt dd { width: calc(100% - 110px); font-size: 14px; }
	#sec05 .wrap .btn2,#sec05 .wrap .btn1{margin: 30px auto;}
}