@charset "utf-8";

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

second_page_template.css

========================*/
body {
 background-color:var(--color-main-100);
 background-color:var(--color-second-100);
}

/*---------------------------------------------
main_visual
---------------------------------------------*/
#main_visual {
 margin-top:88px;
}

#main_visual #main_visual_cont {
 align-items:center;
 display:flex;
 justify-content:center;
 flex-direction:column;
 height:380px;
 position:relative;
 width:100%;
}

#main_visual #main_visual_cont > img {
 height:380px;
 object-fit:cover;
 object-position:center top;
 width:100%;
}

#main_visual #main_visual_cont > img.object-center-10 { object-position: center 10%; }
#main_visual #main_visual_cont > img.object-center-20 { object-position: center 20%; }
#main_visual #main_visual_cont > img.object-center-30 { object-position: center 30%; }
#main_visual #main_visual_cont > img.object-center-40 { object-position: center 40%; }
#main_visual #main_visual_cont > img.object-center-50 { object-position: center 50%; }
#main_visual #main_visual_cont > img.object-center-60 { object-position: center 60%; }
#main_visual #main_visual_cont > img.object-center-70 { object-position: center 70%; }
#main_visual #main_visual_cont > img.object-center-80 { object-position: center 80%; }
#main_visual #main_visual_cont > img.object-center-90 { object-position: center 90%; }

#main_visual #main_visual_cont:before {
 background: linear-gradient(70deg,rgba(0,0,0,.3) 5%,rgba(0,0,0,.2) 35%,rgba(0,0,0,.1) 45%,rgba(0,0,0,0) 50%);
 content: " ";
 position:absolute;
 left: 0;
 top: 0;
 height:100%;
 width:100%;
 z-index:3;
}

#main_visual #main_visual_cont.no-filter:before {
 content:none;
}

#main_visual #main_visual_cont:after {
 background-image:url(../img/common/bg_dot.png);
 background-repeat:repeat;
 background-position:left top; 
 opacity:0.2;
 content:" ";
 position:absolute;
 left:0;
 top:0;
 height:100%;
 width:100%;
 z-index:2;
}

#main_visual #main_visual_cont .title {
 align-items:start;
 align-content:center;
 display:flex;
 flex-direction:column;
 justify-content:center;
 position:absolute;
 margin:auto;
 top:-25px;
 right:0;
 bottom:0;
 left:0;
 max-width:calc(1080px - 100px);
 row-gap:10px;
 z-index:10;
 padding:50px;
 row-gap:20px;
}

#main_visual #main_visual_cont .title h2 {
 color:var(--white);
 font-family:var(--mincho);
 font-size:5rem;
 font-weight:500;
 line-height:1.3;
}

#main_visual #main_visual_cont .title h3 {
 color:var(--white);
 font-family:var(--hina-mincho);
 font-size:3.0rem;
 font-weight:600;
 line-height:1.3;
}

#main_visual #main_visual_cont .title figure {
 position:absolute;
 right:5vw;
 bottom:calc(5vw + 20px);
 z-index:10;
}

#main_visual #main_visual_cont .title figure img {
 height:auto;
 max-width:500px;
 max-height:70px;
 width:auto;
}

@media (min-width:1080px) {
#main_visual #main_visual_cont .title {
 max-width:1080px;
}
}

/*---------------------------------------------
main_visual(second_page)
---------------------------------------------*/
#main_visual.second_page {
 margin-top:88px;
}

#main_visual.second_page #main_visual_cont {
 align-items:center;
 display:flex;
 height:540px;
 justify-content:center;
 flex-direction:column;
 position:relative;
 width:100%;
}

#main_visual.second_page #main_visual_cont:before {
 background: linear-gradient(70deg,rgba(0,0,0,.3) 5%,rgba(0,0,0,.2) 35%,rgba(0,0,0,.1) 45%,rgba(0,0,0,0) 50%);
 content: " ";
 position:absolute;
 left: 0;
 top: 0;
 height:100%;
 width:100%;
 z-index:3;
}

#main_visual.second_page #main_visual_cont.no-filter:before {
 content:none;
}

#main_visual.second_page #main_visual_cont:after {
 background-image:url(../img/common/bg_dot.png);
 background-repeat:repeat;
 background-position:left top; 
 opacity:0.2;
 content:" ";
 position:absolute;
 left:0;
 top:0;
 height:100%;
 width:100%;
 z-index:2;
}

#main_visual.second_page #main_visual_cont .title {
 align-items:start;
 align-content:center;
 display:flex;
 flex-direction:column;
 justify-content:center;
 position:absolute;
 margin:auto;
 top:-25px;
 right:0;
 bottom:0;
 left:0;
 max-width:calc(1080px + 10vw);
 row-gap:10px;
 z-index:10;
 padding:5vw;
 row-gap:20px;
}

#main_visual.second_page #main_visual_cont .title h2 {
 color:var(--white);
 font-family:var(--mincho);
 /*font-size:3.0rem;*/
 font-weight:500;
 line-height:1.3;
}

#main_visual.second_page #main_visual_cont .title h3 {
 color:var(--white);
 font-family:var(--hina-mincho);
 font-size:3.0rem;
 font-weight:600;
 line-height:1.3;
}

#main_visual.second_page #main_visual_cont .title figure {
 position:absolute;
 right:5vw;
 bottom:calc(5vw + 20px);
 z-index:10;
}

#main_visual.second_page #main_visual_cont .title figure img {
 height:auto;
 max-width:400px;
 max-height:70px;
 width:auto;
}

#main_visual.second_page #main_visual_cont .slick-slider {
 width:100%;
 height:540px;
}

#main_visual.second_page #main_visual_cont .slick-slide video {
 display: block;
 position: absolute;
 top: 50%;
 left: 50%;
 min-width: 100%;
 min-height: 100%;
 width: auto;
 height: auto;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 pointer-events: none;
 z-index:20;
}

#information_area {
 align-items:flex-end;
 align-content:center;
 display:flex;
 flex-direction:column;
 justify-content:start;
 top:0;
 right:0;
 bottom:0;
 left:0;
 margin:auto;
 padding:5vw;
 position:absolute;
 max-width: calc(1080px + 10vw);
 width:100%;
 z-index:11;
}

#information_area ul {
 align-items:center;
 display:flex;
 height:auto;
 /*flex-direction:column;*/
 /*gap:15px;*/
 justify-content:center;
 max-height:calc(100% - 10vw);
 max-width:400px;
 position:relative;
}

#information_area .slick-prev {
 left:10px;
}

#information_area .slick-next {
 right:10px;
}

/*
#information_area ul li {
 max-width:180px;
 max-height:300px;
 overflow:hidden;
}
*/

#information_area ul li a {
 display:block;
 text-align:center;
}

#information_area ul li a img {
 height:auto;
 opacity:0;
 -webkit-transition:opacity 3s;
 transition: opacity 3s; 
 width:auto;
 max-width:220px;
 object-fit:contain;
}

#information_area ul li a img.lazyloaded {
 opacity:1;
}

#information_area ul li a:hover {
 opacity:0.7;
}


/*---------------------------------------------
main
---------------------------------------------*/
main {
 display:flex;
 flex-direction:column;
 justify-content:center;
 margin:-50px auto 50px;
 padding:0 5vw;
 position:relative;
 z-index:10;
}

#main {
 background-color:var(--white);
 border-radius:20px;
 display:flex;
 flex-direction:column;
 max-width:1080px;
 margin:0 auto;
 padding:70px 0 50px;
 position:relative;
 row-gap:40px;
 width:100%;
 z-index:10;
}

.symbol {
 align-items:center;
 display:flex;
 justify-content:center;
 margin:-30px 0 0;
 position:absolute;
 left:0;
 top:0;
 z-index:1;
}

.symbol img {
 height:auto;
 min-height:80px;
 max-height:80px;
 max-width:80px;
 width:10vw;
 object-fit:contain;
 position:relative;
 z-index:3;
}

.symbol:before {
 background-color:var(--white);
 border-radius:50%;
 content:" ";
 position:absolute;
 height:120px;
 width:120px;
 z-index:1;
}

/*---------------------------------------------
image_box
---------------------------------------------*/
.image_box {
	align-items:center;
	display:flex;
	flex-direction:column;
	justify-content:center;
 margin-bottom:0;
 position:relative;
 row-gap:30px;
}

.image_box .mage_box_title {
	align-items:center;
	display:flex;
	flex-direction:column;
	justify-content:center;
}

.image_box .image_box_title h3 {
	align-items:baseline;
	display:flex;
	font-size:3rem;
	font-weight:600;
	justify-content:center;
	width:100%;
}

.image_box .image_box_title h3 span {
	white-space:nowrap;
}

.image_box .image_box_cont {
 display:flex;
 flex:0 1 auto;
 justify-content:space-between;
 width:100%;
}

.image_box .image_box_cont .left_image,
.image_box .image_box_cont .right_image {
 align-items:stretch;
 display:flex;
 flex-direction:column;
 height:auto;
 min-height: 0;
 max-width:160px;
}

.image_box .image_box_cont .left_image ul,
.image_box .image_box_cont .right_image ul {
 display:flex;
 flex:1;
 flex-direction:column;
 height:auto;
 min-height: 0;
}

.image_box .image_box_cont .left_image ul li,
.image_box .image_box_cont .right_image ul li {
 flex:1 1 auto;
 min-height: 0;
 width:100%;
 overflow:hidden;
}

.image_box .image_box_cont .left_image ul li img,
.image_box .image_box_cont .right_image ul li img {
 width:100%;
 object-fit:cover;
 display:block;
 max-height:100%;
 min-height: 100%;
 opacity:0;
 -webkit-transition:opacity 3s;
 transition: opacity 3s; 
}

.image_box .image_box_cont .left_image ul li img.lazyloaded,
.image_box .image_box_cont .right_image ul li img.lazyloaded {
 opacity:1;
}

.image_box .image_box_cont .center_contents {
	align-items:center;
	display:flex;
	flex-direction:column;
	justify-content:start;
 flex:1;
 padding:0;
}

.image_box .image_box_cont .center_contents h3 {
	align-items:baseline;
	display:flex;
	font-size:2.8rem;
	font-weight:600;
	justify-content:center;
 padding:50px 0 0;
 position:relative;
	width:100%;
}

.image_box .image_box_cont .center_contents h3 span {
 line-height:1.4;
 text-align:center;
 white-space:nowrap;
 position:relative;
}

/*--- merit ---*/

#merit .image_box .image_box_cont .center_contents h3 span {
 border-top:2px dotted var(--main);
 border-bottom:2px dotted var(--main);
 padding:20px 0;
}

/*--- charactor ---*/

#charactor .image_box .image_box_cont .center_contents h3 > span:first-child:before {
 aspect-ratio: 333 / 944;
 background-image:url(../img/common/figure_work.webp);
 background-repeat:no-repeat;
 background-size: contain;
 content:" ";
 margin-left: -8px;
 align-items: center;
 display: flex;
 justify-content: center;
 max-height: 110px;
 position: absolute;
 top:-15px;
 left:-65px;
 height:auto;
 width:100px;
}

/*---------------------------------------------
module-text-image
---------------------------------------------*/
.module-text-image {
 border-bottom:1px solid #ddd;
 padding:50px;
}

/*---------------------------------------------
jobs
---------------------------------------------*/
.jobs {
 padding:0 50px;
}

.jobs .jobs_cont {
 padding:0 50px 50px;
}

.jobs .jobs_cont ul {

}

.jobs .jobs_cont ul li {

}

/*---------------------------------------------
conversion-area
---------------------------------------------*/
.section.conversion-area {
 background-color:var(--color-second-50);
 padding:50px;
}