@charset "utf-8";
/* ===================================================
	Home CSS
====================================================== */

.empty{ width: 80%; max-width: 500px; margin: 0 auto; border: solid 1px rgba(195,195,195,1.00); padding: 50px 0; text-align: center; font-size: 18px; line-height: 1;}

@media screen and (max-width: 600px) {

}

/* ---------------------------------------------------
Section Main Images
------------------------------------------------------ */
.sec_main_img{ background: url("../img/home/main_bg_01.png") no-repeat center center; background-size: cover; height: 465px; position: relative;}
.sec_main_img .box_txt{ position: absolute; top: 120px; left: 50%; margin: 0 0 0 -600px; color: #fff;}
.sec_main_img .box_txt .tit{ font-size: 60px; line-height: 1.2; letter-spacing: 0.1em; padding: 0 0 30px; font-weight: 700;}
.sec_main_img .box_txt .txt{ font-size: 24px; line-height: 1.5; letter-spacing: 0.2em; font-weight: 500;}
.sec_main_img .box_slide{ position: absolute; top: 35px; left: 50%; margin: 0 0 0 20px; width: 574px; height: 408px;}
.slick-slider { opacity: 0; transition: opacity .5s linear; }
.slick-initialized { opacity: 1; }

@media screen and (max-width: 600px) {
.sec_main_img{ background: url("../img/home/main_bg_02.png") no-repeat center center; background-size: cover; height: 410px; position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: center;}
.sec_main_img .box_txt{ position: static; margin: 0; padding: 30px 0 0;}
.sec_main_img .box_txt .tit{ font-size: 40px; line-height: 1.1; letter-spacing: 0.05em; padding: 0 0 10px;}
.sec_main_img .box_txt .txt{ font-size: 18px; line-height: 1.2; letter-spacing: 0.2em;}
.sec_main_img .box_slide{ position: static; margin: 0 0 10px; width: 287px; height: 204px; }
}

@media screen and (max-width: 360px) {
.sec_main_img .box_txt .tit{ font-size: 36px;}
.sec_main_img .box_txt .txt{ font-size: 16px;}
}

/* ---------------------------------------------------
Box Services
------------------------------------------------------ */
.box_serv{ width: 90%; max-width: 1200px; margin: 50px auto 0; border: solid 1px #dfdfdf; box-sizing: border-box; display: flex;}
.box_serv > div{ width: 25%; height: 130px; border-right: solid 1px #dfdfdf; box-sizing: border-box;}
.box_serv > div:last-of-type{ border-right: none;}
.box_serv > div a{ display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; height: 100%; text-align: center;}
.box_serv > div a span{ font-size: 14px; line-height: 1; font-weight: bold; padding: 20px 0 0;}

@media screen and (max-width: 600px) {
.box_serv{ width: 90%; max-width: 90%; margin: 30px auto 0; flex-wrap: wrap;}
.box_serv > div{ width: 100%; height: 100px; border-right: none; border-bottom: solid 1px #dfdfdf; box-sizing: border-box;}
.box_serv > div:last-of-type{ border-bottom: none;}
.box_serv > div a span{ font-size: 12px; line-height: 1; font-weight: bold; padding: 10px 0 0;}
}

/* ---------------------------------------------------
Section Pickup
------------------------------------------------------ */
.sec_pickup{ position: relative;}
.sec_pickup::after{ content: ""; width: 96%; height: 1px; background: #e4e4e4; position: absolute; bottom: 0; left: 2%;}
.sec_pickup .cmn_btn_01{ margin: 50px 0 0;}
.sec_pickup .cmn_wrap_01{ padding: 0 0 60px;}

@media screen and (max-width: 600px) {
/*.sec_pickup{ width: 90%; margin: 0 auto;}*/
.sec_pickup::after{ width: 100%; left: 0;}
.sec_pickup .cmn_btn_01{ margin: 0;}
.sec_pickup .cmn_wrap_01{ padding: 0 5% 30px;}
}

/* ---------------------------------------------------
Section Information
------------------------------------------------------ */
@media screen and (max-width: 600px) {
/*.sec_info{ width: 90%; margin: 0 auto;}*/
}

/* ---------------------------------------------------
Section Concept
------------------------------------------------------ */
.sec_concept{ padding: 0 0 60px; background: linear-gradient(90deg, rgba(251,159,25,1) 15%, rgba(255,130,4,1) 85%); position: relative; z-index: 1; overflow: hidden;}
.sec_concept::before{ content: ""; display: block; background: url("../img/bg_deco_02.png") no-repeat 0 0; background-size: 492px; width: 492px; height: 203px; position: absolute; top: 0; left: 50%; margin: 0 0 0 -630px; z-index: 2;}
.sec_concept .cmn_tit_01{ position: relative; z-index: 3;}
.sec_concept .cmn_tit_01 .en{ background: none; color: #000;}
.sec_concept .cmn_tit_01 .ja{ color: #fff;}
.sec_concept .inner{ display: flex; justify-content: space-between; position: relative; z-index: 3;}
.sec_concept .box_txt{ width: 40%; color: #fff; text-align: right;}
.sec_concept .box_txt .txt{ text-align: left; font-size: 16px; line-height: 1.75;}
.sec_concept .box_txt .cmn_btn_02{ margin: 30px 0 0 auto;}
.sec_concept .box_img{ width: 54%;}
.sec_concept .box_img img{ width: 100%; height: auto;}

@media screen and (max-width: 600px) {
.sec_concept{ padding: 0 0 30px;}
.sec_concept::before{ background-size: 50%; top: -20px; left: 0; margin: 0 0 0 -50px;}
.sec_concept .inner{ flex-direction: column-reverse; }
.sec_concept .box_txt{ width: 100%; text-align: center;}
.sec_concept .box_txt .txt{ text-align: left; font-size: 15px; line-height: 1.4;}
.sec_concept .box_txt .cmn_btn_02{ margin: 20px 0 0;}
.sec_concept .box_img{ width: 100%; padding: 0 0 20px;}
}


/* ---------------------------------------------------
Section Get Ready
------------------------------------------------------ */
.sec_getready{ position: relative;}
.sec_getready::after{ content: ""; width: 96%; height: 1px; background: #e4e4e4; position: absolute; bottom: 0; left: 2%;}

@media screen and (max-width: 600px) {
.sec_getready::after{ width: 100%; left: 0;}
}


/* ---------------------------------------------------
Section Know-how
------------------------------------------------------ */
.sec_knowhow{ position: relative;}
.sec_knowhow::after{ content: ""; width: 96%; height: 1px; background: #e4e4e4; position: absolute; bottom: 0; left: 2%;}

@media screen and (max-width: 600px) {
.sec_knowhow::after{ width: 100%; left: 0;}
}


/* ---------------------------------------------------
Section Marketing
------------------------------------------------------ */
.sec_marketing{ position: relative;}
.sec_marketing::after{ content: ""; width: 96%; height: 1px; background: #e4e4e4; position: absolute; bottom: 0; left: 2%;}

@media screen and (max-width: 600px) {
.sec_marketing::after{ width: 100%; left: 0;}
}


/* ---------------------------------------------------
Section Services
------------------------------------------------------ */
.sec_services{ background: linear-gradient(90deg, rgba(251,159,25,1) 15%, rgba(255,130,4,1) 85%); position: relative; z-index: 1; overflow: hidden;}
.sec_services::before{ content: ""; display: block; background: url("../img/bg_deco_02.png") no-repeat 0 0; background-size: 492px; width: 492px; height: 203px; position: absolute; top: 0; left: 50%; margin: 0 0 0 -630px; z-index: 2;}
.sec_services .cmn_tit_01{ position: relative; z-index: 3;}
.sec_services .cmn_tit_01 .en{ background: none; color: #000;}
.sec_services .cmn_tit_01 .ja{ color: #fff;}
.sec_services .inner{ display: flex; justify-content: space-between; flex-wrap: wrap; max-width: 1400px; position: relative; z-index: 3;}
.sec_services .inner > section{ display: flex; flex-wrap: wrap; justify-content: space-between; background: #fff; width: 48.5%; border-radius: 10px; margin: 0 0 3%; padding: 40px; box-sizing: border-box;}
.sec_services .inner > section:nth-last-of-type(1),
.sec_services .inner > section:nth-last-of-type(2){ margin: 0;}
.sec_services .tit_01{ width: 100%; padding: 0 0 20px; font-size: 24px; font-weight: 600; color: #f77900;}
.sec_services .txt_01{ width: 100%; padding: 0 0 30px; font-size: 16px; font-weight: 600; line-height: 1.75;}
.sec_services .box_txt{ width: 55%;}
.sec_services .tit_02{ padding: 0 0 20px; font-size: 18px; font-weight: 600;}
.sec_services .txt_02{ font-size: 16px; line-height: 1.6;}
.sec_services .box_img{ width: 40%;}
.sec_services .box_img img{ width: 100%; height: auto;}
.sec_services .btn{ width: 100%; text-align: right; padding: 30px 0 0;}
.sec_services .btn .cmn_btn_01{ font-size: 16px; font-weight: 700; padding: 20px 60px 20px 40px;}

@media screen and (max-width: 600px) {
.sec_services::before{ background-size: 50%; top: -20px; left: 0; margin: 0 0 0 -50px;}
.sec_services .inner{ flex-direction: column; max-width: 90%;}
.sec_services .inner > section{ flex-direction: column; width: 100%; border-radius: 10px; margin: 0 0 20px; padding: 5%;}
.sec_services .inner > section:nth-last-of-type(1),
.sec_services .inner > section:nth-last-of-type(2){ margin: 0 0 20px;}
.sec_services .tit_01{ padding: 0 0 10px; font-size: 18px;}
.sec_services .txt_01{ padding: 0 0 15px; font-size: 15px; line-height: 1.4;}
.sec_services .box_txt{ width: 100%;}
.sec_services .tit_02{ padding: 0 0 10px; font-size: 16px;}
.sec_services .txt_02{ font-size: 14px; line-height: 1.5;}
.sec_services .box_img{ width: 200px; display: block; margin: 0 auto 20px;}
.sec_services .btn{ width: 100%; text-align: center; padding: 15px 0 0;}
.sec_services .btn .cmn_btn_01{ font-size: 15px; padding: 10px 20px 10px 20px;}
.sec_services .btn .cmn_btn_01::after{ right: 10px;}
.sec_services .btn .cmn_btn_01:hover::after{ right: 5px;}
.sec_services .cmn_wrap_01{ width: 90%; margin: 0 auto; padding: 0 0 30px;}
}

@media screen and (max-width: 360px) {
.sec_services .btn .cmn_btn_01{ font-size: 13px;}
}


/* ---------------------------------------------------
Section Download
------------------------------------------------------ */
.sec_download{}
.sec_download ul{ display: flex; justify-content: center; width: 90%; max-width: 1200px; margin: 0 auto;}
.sec_download ul li{ width: 320px; margin: 0 25px;}
.sec_download .img{ width: 100%;}
.sec_download .img img{ width: 100%; height: auto;}
.sec_download .tit{ font-size: 18px; font-weight: 700; line-height: 1.3; padding: 20px 0 10px;}
.sec_download .body{ font-size: 16px; line-height: 1.7;}
.sec_download .btn{ text-align: right; padding: 20px 0 0;}
.sec_download .btn a{ display: inline-block; font-size: 16px; font-weight: 700; line-height: 1.1; color: #f77900; padding: 0 15px 0 0; position: relative;}
.sec_download .btn a::after{ content: ""; display: block; width: 6px; height: 6px; border-bottom: solid 2px #f77900; border-right: solid 2px #f77900; transform: rotate(-45deg); transform-origin: center center; position: absolute; top: 5px; right: 0;}

@media screen and (max-width: 600px) {
.sec_download{}
.sec_download ul{ flex-direction: column;}
.sec_download ul li{ width: 100%; margin: 0 0 5%;}
.sec_download .img{ width: 100%;}
.sec_download .tit{ font-size: 17px; line-height: 1.3; padding: 10px 0 5px;}
.sec_download .body{ font-size: 14px; line-height: 1.6;}
.sec_download .btn{ padding: 5px 0 0;}
.sec_download .btn a{ font-size: 14px; padding: 0 15px 0 0;}
}


/* ---------------------------------------------------
Section E-mail Newsletter
------------------------------------------------------ */
.sec_newsletter{ background: #f8f3ab; padding: 90px 0;}
.sec_newsletter .inner{ width: 90%; max-width: 1200px; display: flex; justify-content: space-between; align-items: flex-start;}
.sec_newsletter .box_txt{ width: 660px;}
.sec_newsletter .tit{ font-size: 28px; font-weight: 700; line-height: 1.1; letter-spacing: 0.1em; padding: 10px 0 40px;}
.sec_newsletter .txt{ font-size: 16px; font-weight: 600; line-height: 1.6;}
.sec_newsletter .img{ width: 517px;}
.sec_newsletter .img img{ width: 100%; height: auto;}

@media screen and (max-width: 600px) {
.sec_newsletter{ padding: 40px 0;}
.sec_newsletter .inner{ flex-direction: column;}
.sec_newsletter .box_txt{ width: 100%;}
.sec_newsletter .tit{ font-size: 21px; line-height: 1.3; letter-spacing: 0.1em; padding: 0 0 15px;}
.sec_newsletter .txt{ font-size: 16px; font-weight: normal; line-height: 1.5; padding: 0 0 15px;}
.sec_newsletter .img{ width: 100%;}
}


/* ---------------------------------------------------
Section Affiliated Company
------------------------------------------------------ */
.sec_affiliated{ position: relative; padding: 0 0 60px;}
.sec_affiliated::after{ content: ""; width: 96%; height: 1px; background: #e4e4e4; position: absolute; bottom: 0; left: 2%;}
.sec_affiliated ul{ width: 90%; max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;}

@media screen and (max-width: 600px) {
.sec_affiliated{ padding: 0 0 20px;}
.sec_affiliated::after{ width: 100%; left: 0;}
.sec_affiliated ul{ width: 90%; max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}
.sec_affiliated ul li{ width: 28%; margin: 0 0 30px;}
}


/* ---------------------------------------------------
Section Case Studies
------------------------------------------------------ */
.sec_casestudies{ background: #f1f1f1;}
.sec_casestudies .postlist_01{ display: flex; justify-content: flex-start; flex-wrap: wrap; padding: 0; /*border-bottom: solid 1px #e4e4e4;*/}
.sec_casestudies .postlist_01 article{ width: 31%; margin: 0 3.5% 0 0; border-radius: 10px; background: #fff; overflow: hidden;}
.sec_casestudies .postlist_01 article:nth-of-type(3n){ margin: 0;}
.sec_casestudies .postlist_01 article a{ display: block; height: 100%;}
.sec_casestudies .postlist_01 article a:hover{ text-decoration: none;}
.sec_casestudies .postlist_01 article .box_img{ overflow: hidden; width: 100%;}
.sec_casestudies .postlist_01 article .box_img img{ width: 100%; height: auto; transition: all 0.5s; aspect-ratio: 16 / 9;}
.sec_casestudies .postlist_01 article a:hover .box_img img{ transform: scale(1.1); transform-origin: center center;}
.sec_casestudies .postlist_01 article .box_txt{ display: flex; flex-wrap: wrap; justify-content: space-between; padding: 15px 20px 30px;}
.sec_casestudies .postlist_01 article .box_txt .name{ padding: 5px 0 0; font-size: 15px; font-weight: 700; line-height: 1.5;}
.sec_casestudies .postlist_01 article .box_txt .area{ padding: 5px 0 0; font-size: 15px; line-height: 1.5;}
.sec_casestudies .postlist_01 article .box_txt .tit{ width: 100%; padding: 15px 0 0; font-size: 16px; font-weight: 700; line-height: 1.5;}
.sec_casestudies .postlist_01 article a:hover .box_txt .tit{ color: #ff7200;}

@media screen and (max-width: 600px) {
.sec_casestudies .postlist_01{ flex-direction: column; width: 100%; margin: 0; padding: 0;}
.sec_casestudies .postlist_01 article{ width: 100%; margin: 0;}
.sec_casestudies .postlist_01 article:nth-of-type(3n){ margin: 0;}
.sec_casestudies .postlist_01 article a{ display: flex; flex-direction: column;}
.sec_casestudies .postlist_01 article .box_img{ width: 100%;}
.sec_casestudies .postlist_01 article .box_txt{ width: 100%; padding: 3% 5% 5%;}
.sec_casestudies .postlist_01 article .box_txt .name{ padding: 2% 0 0; font-size: 13px;}
.sec_casestudies .postlist_01 article .box_txt .area{ padding: 2% 0 0; font-size: 13px;}
.sec_casestudies .postlist_01 article .box_txt .tit{ width: 100%; padding: 4% 0 0; font-size: 16px; line-height: 1.3;}
}

/*.sec_casestudies{ padding: 0 0 90px;}
.sec_casestudies .inner{ display: flex; justify-content: space-between;}
.sec_casestudies .inner > div{ width: 270px;}
.sec_casestudies a:hover{ text-decoration: none;}
.sec_casestudies .img{ width: 100%;}
.sec_casestudies .img img{ width: 100%; height: 190px;}
.sec_casestudies .status{ display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; padding: 10px 0 5px;}
.sec_casestudies .status span{ border: solid 1px #cbcbcb; padding: 5px 10px; margin: 0 5px 5px 0; font-size: 14px; line-height: 1;}
.sec_casestudies .tit{ font-size: 16px; line-height: 1.4;}
.sec_casestudies a:hover .tit{ color: #ff7200; }*/

@media screen and (max-width: 600px) {
/*.sec_casestudies{ padding: 0 0 40px;}
.sec_casestudies .inner{ flex-wrap: wrap;}
.sec_casestudies .inner > div{ width: 48%; margin: 0 0 4%;}
.sec_casestudies .img img{ height: 100px;}
.sec_casestudies .status{ padding: 10px 0 5px;}
.sec_casestudies .status span{ padding: 2px 3px; margin: 0 3px 3px 0; font-size: 10px; line-height: 1;}
.sec_casestudies .tit{ font-size: 15px; line-height: 1.4;}*/
}