@charset "UTF-8";
/* ===================================================
	Services / 489ban CSS
====================================================== */

/* ---------------------------------------------------
	Global Header Overwrite
------------------------------------------------------ */
#g_header { position: absolute;}

/* ---------------------------------------------------
	Sub Header Overwrite
------------------------------------------------------ */
@media screen and (max-width: 600px) {
.sub_header .sub_box_01 .sub_btn_01{ width: 100%; padding: 0; margin: 0;}
}

/* ---------------------------------------------------
	Contents Overwrite
------------------------------------------------------ */
#contents { padding: 200px 0 0 !important;}

@media screen and (max-width: 600px) {
#contents { padding: 200px 0 0 !important;}
}

/* ---------------------------------------------------
.sec_eyecatch
------------------------------------------------------ */
@-webkit-keyframes fade-in { 100% { opacity: 1; } }
@keyframes fade-in { 100% { opacity: 1; } }

.sec_eyecatch { width: 100%; height: 680px; background: url("../img/services/489ban/eyecatch_bg_01_pc.jpg") no-repeat; background-size: cover; color: #fff;}
.sec_eyecatch_inn { width: 90%; max-width: 1300px; margin: 0 auto; position: relative; opacity: 0; animation: fade-in 1s ease 2s 1 forwards;}
.eyecatch_txt{ padding: 120px 0 0;}
.eyecatch_txt .tit{ font-size: 52px; font-weight: bold; line-height: 1.2;}
.eyecatch_txt .txt{ font-size: 20px; font-weight: bold; padding: 15px 0 0;}
.eyecatch_point{ padding: 15px 0;}
.eyecatch_point ul{ display: flex;}
.eyecatch_point ul li{ background: #f77900; text-align: center; width: 136px; height: 136px; border-radius: 136px; margin: 0 20px 0 0; font-size: 16px; line-height: 1.1; padding: 25px 0 0; box-sizing: border-box;}
.eyecatch_point .txt_01,
.eyecatch_point .txt_02,
.eyecatch_point .txt_03{ display: inline-block; color: #ffde00;}
.eyecatch_point .txt_01{ font-size: 34px;}
.eyecatch_point .txt_02{ font-size: 18px;}
.eyecatch_point .txt_03{ font-size: 22px; padding: 5px 0 0;}
.sec_eyecatch #slide { width: 570px; height: 525px; position: absolute; top: 120px; left: 50%;}
.sec_eyecatch #slide1 { position: relative;}
.sec_eyecatch #slide1 .slick_center1 { width: 520px; top: 23px; left: 25px; z-index: 5;}
.sec_eyecatch #slide1 .slick_center1 img[data-lazy] { display: none;}
.sec_eyecatch #slide1 > img { position: absolute; top: 0; z-index: 1;}
.sec_eyecatch #slide2 { width: 130px; height: 270px; position: absolute; bottom: 0; right: -50px; z-index: 10;}
.sec_eyecatch #slide2 > img { position: absolute; top: 0; z-index: 1;}
.sec_eyecatch #slide2 .slick_center2 { top: 22px; left: 5px; z-index: 5; width: 120px;}
.sec_eyecatch #slide2 .slick_center2 img[data-lazy] { display: none;}
.eyecatch_btns{ padding: 35px 0 0; display: flex;}
.eyecatch_btns .btn_01,
.eyecatch_btns .btn_02{ font-size: 18px; min-width: auto; margin: 0 20px 0 0; }
.eyecatch_btns .btn_01::after { border-right: solid 2px #5bb446; border-bottom: solid 2px #5bb446; }
.eyecatch_btns .btn_01:hover::after{ border-right: solid 2px #333; border-bottom: solid 2px #333;}

@media screen and (max-width: 600px) {
.sec_eyecatch { width: 100%; height: auto; background: url("../img/services/489ban/eyecatch_bg_01_sp.jpg") no-repeat; background-size: cover;}
.sec_eyecatch_inn { width: 90%; max-width: 90%; padding: 0 0 20px;}
.eyecatch_txt{ padding: 30px 0 0; text-align: center;}
.eyecatch_txt .tit{ font-size: 35px; line-height: 1.2;}
.eyecatch_txt .txt{ font-size: 17px; padding: 5px 0 0;}
.eyecatch_point{ padding: 15px 0;}
.eyecatch_point ul{ justify-content: space-around;}
.eyecatch_point ul li{ width: 100px; height: 100px; border-radius: 100px; margin: 0; font-size: 12px; line-height: 1.1; padding: 19px 0 0;}
.eyecatch_point .txt_01{ font-size: 25px;}
.eyecatch_point .txt_02{ font-size: 13px;}
.eyecatch_point .txt_03{ font-size: 16px; padding: 5px 0 0;}
.sec_eyecatch #slide { width: 300px; height: 278px; position: relative; top: 0; left: 50%; margin: 0 0 0 -150px;}
.sec_eyecatch #slide1 .slick_center1 { width: 275px; top: 11px; left: 13px;}
.sec_eyecatch #slide2 { width: 66px; height: 138px; right: -20px;}
.sec_eyecatch #slide2 .slick_center2 { top: 15px; left: 4px; width: 59px;}
.eyecatch_btns{ padding: 15px 0 0; flex-direction: column;}
.eyecatch_btns .btn_01,
.eyecatch_btns .btn_02{ font-size: 15px; margin: 0 0 15px 0; }
.eyecatch_btns .btn_01::after { border-right: solid 1px #5bb446; border-bottom: solid 1px #5bb446; }
.eyecatch_btns .btn_01:hover::after{ border-right: solid 1px #333; border-bottom: solid 1px #333;}
}

/* ---------------------------------------------------
Section Results
------------------------------------------------------ */
.sec_results{ background: #f5f6f6; padding: 50px 0 0;}
.sec_results .inner_lg{ background: #fff; padding: 0 0 100px; border-radius: 15px;}
.sec_results .txt_01{ font-size: 24px; text-align: center;}
.sec_results .txt_01 .num{ display: inline-block; font-weight: 700; font-size: 60px; background: #ff8204; background: linear-gradient(90deg, rgba(251,159,25,1) 15%, rgba(255,130,4,1) 85%); -webkit-background-clip: text; color: transparent; }
.sec_results .txt_02{ font-size: 16px; text-align: center;}
.sec_results .box_ticker{ padding: 50px 0 0;}
.sec_results .slick-track{ display: flex; align-items: center;}
.sec_results .slick-track img{ margin: 0 auto;}

@media screen and (max-width: 600px) {
.sec_results{ padding: 30px 0 0;}
.sec_results .inner_lg{ padding: 0 0 30px; border-radius: 10px;}
.sec_results .txt_01{ font-size: 20px;}
.sec_results .txt_01 .num{ font-size: 40px;}
.sec_results .txt_02{ font-size: 14px;}
.sec_results .box_ticker{ padding: 20px 0 0;}
.sec_results .slick-slide{ padding: 0 10px; box-sizing: border-box;}
}

/* ---------------------------------------------------
Section Applicable
------------------------------------------------------ */
.sec_applicable{ background: #f5f6f6; padding: 50px 0 0;}
.sec_applicable .inner_lg{ padding: 0 0 50px; display: flex; justify-content: space-between; flex-wrap: wrap;}
.sec_applicable .inner_lg > section{ width: 31.3%; background: #fff; padding: 28px; margin: 0 0 4%; border-radius: 10px; box-sizing: border-box;}
.sec_applicable .tit{ font-size: 24px; font-weight: bold; color: #f77900; line-height: 1.4; padding: 0 0 10px;}
.sec_applicable .txt{ font-size: 16px; line-height: 1.75;}

@media screen and (max-width: 600px) {
.sec_applicable{ padding: 30px 0 0;}
.sec_applicable .inner_lg{ padding: 0 0 30px;}
.sec_applicable .inner_lg > section{ width: 100%; padding: 15px; margin: 0 0 4%; border-radius: 10px;}
.sec_applicable .tit{ font-size: 20px; line-height: 1.4; padding: 0 0 5px;}
.sec_applicable .txt{ font-size: 14px; line-height: 1.75;}
}

/* ---------------------------------------------------
Section About
------------------------------------------------------ */
.sec_about{ position: relative; padding: 0 0 60px;}
.sec_about::after{ content: ""; width: 90%; max-width: 1400px; height: 1px; background: #e4e4e4; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto;}
.sec_about .inner_lg{ display: flex; justify-content: space-between; flex-direction: row-reverse;}
.sec_about .box_img{ width: 48%;}
.sec_about .box_img img{ width: 100%; height: auto;}
.sec_about .box_txt{ width: 48%;}
.sec_about .box_txt .tit{ font-size: 26px; font-weight: 700; line-height: 1.5; padding: 0 0 40px;}
.sec_about .box_txt .txt{ font-size: 16px; line-height: 1.75; padding: 0 0 1em;}

@media screen and (max-width: 600px) {
.sec_about{ padding: 0 0 30px;}
.sec_about .inner_lg{ flex-direction: column;}
.sec_about .box_img{ width: 100%;}
.sec_about .box_img img{ width: 100%; height: auto;}
.sec_about .box_txt{ width: 100%;}
.sec_about .box_txt .tit{ font-size: 20px; line-height: 1.5; padding: 20px 0 10px;}
.sec_about .box_txt .txt{ font-size: 15px; line-height: 1.75; padding: 0 0 1em;}
}

/* ---------------------------------------------------
Section Feature
------------------------------------------------------ */
.sec_feature{ position: relative; padding: 0 0 20px;}
.sec_feature::after{ content: ""; width: 90%; max-width: 1400px; height: 1px; background: #e4e4e4; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto;}
.sec_feature .sec_01{ display: flex; justify-content: space-between; flex-direction: row-reverse; margin: 0 0 40px;}
.sec_feature .sec_01 .box_img{ width: 54%;}
.sec_feature .sec_01 .box_img img{ width: 100%; height: auto;}
.sec_feature .sec_01 .box_txt{ width: 42%; padding: 0 0 0 50px; position: relative;}
.sec_feature .sec_01 .box_txt .tit{ font-size: 26px; font-weight: 700; line-height: 1.5; padding: 20px 0 40px;}
.sec_feature .sec_01 .box_txt .tit .num{ position: absolute; top: 0; left: 0; font-size: 60px; line-height: 1; color: #f77900}
.sec_feature .sec_01 .box_txt .txt{ font-size: 16px; line-height: 1.75; padding: 0 0 1em;}
.sec_feature .sec_01 .box_txt .btn{ float: right; margin: 50px 0 0;/* padding: 20px 60px 20px 40px;*/}

@media screen and (max-width: 600px) {
.sec_feature{ padding: 0 0 20px;}
.sec_feature .sec_01{ flex-direction: column; margin: 0 0 20px;}
.sec_feature .sec_01 .box_img{ width: 100%;}
.sec_feature .sec_01 .box_txt{ width: 100%; padding: 0 0 0 30px; position: relative;}
.sec_feature .sec_01 .box_txt .tit{ font-size: 20px; line-height: 1.5; padding: 20px 0 10px;}
.sec_feature .sec_01 .box_txt .tit .num{ top: 10px; left: 0; font-size: 40px; line-height: 1;}
.sec_feature .sec_01 .box_txt .txt{ font-size: 15px; line-height: 1.75; padding: 0 0 1em;}
.sec_feature .sec_01 .box_txt .btn{ margin: 0;/* padding: 10px 60px 10px 40px;*/}
}

/* ---------------------------------------------------
Section Options
------------------------------------------------------ */
.sec_options{ padding: 0 0 100px;}
.sec_options .txt_01{ text-align: center; font-size: 18px; line-height: 1.75; padding: 0 0 60px;}
.sec_options .inner_lg{ display: flex; flex-wrap: wrap; justify-content: space-between;}
.sec_options .sec_01{ width: 48%; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; margin: 0 0 70px; position: relative;}
.sec_options .sec_01 .box_img{ width: 250px; min-height: 180px; position: absolute; top: 0; left: 0;}
.sec_options .sec_01 .box_img img{ width: 100%; height: auto;}
.sec_options .sec_01 .tit_01{ width: 100%; font-size: 24px; font-weight: 700; line-height: 1.5; padding: 0 0 10px 280px; box-sizing: border-box;}
.sec_options .sec_01 .txt_02{ width: 100%; font-size: 16px; line-height: 1.75; padding: 0 0 0 280px; box-sizing: border-box;}
.sec_options .box_btn{ text-align: center;}

@media screen and (max-width: 600px) {
.sec_options{ padding: 0 0 50px;}
.sec_options .txt_01{ text-align: left; font-size: 14px; line-height: 1.75; padding: 0 5% 30px;}
.sec_options .inner_lg{ flex-direction: column; }
.sec_options .sec_01{ width: 100%; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin: 0 0 30px; position: relative;}
.sec_options .sec_01 .box_img{ width: 40%; min-height: auto; position: static;}
.sec_options .sec_01 .tit_01{ width: 58%; font-size: 19px; line-height: 1.5; padding: 0 0 0 10px;}
.sec_options .sec_01 .txt_02{ width: 100%; font-size: 15px; line-height: 1.75; padding: 10px 0 0;}
.sec_options .box_btn{ width: 90%; margin: 0 auto;}
}

/* ---------------------------------------------------
Box Banner Type 01
------------------------------------------------------ */
.box_bnr_01{ margin: 0 auto 100px;}

@media screen and (max-width: 600px) {
.box_bnr_01{ margin: 0 auto 50px;}
}

/* ---------------------------------------------------
Section Website
------------------------------------------------------ */
.sec_website{ background: #fff;/*background: #f5f6f6;*/ padding: 0 0 80px;}
.sec_website .inner_lg{ display: flex; flex-direction: row-reverse; justify-content: space-between;}
.sec_website .box_img{ width: 54%;}
.sec_website .box_img img{ width: 100%; height: auto;}
.sec_website .box_txt{ width: 42%;}
.sec_website .txt{ font-size: 16px; line-height: 1.75;}
.sec_website .logo{ text-align: right; padding: 60px 0 50px;}
.sec_website .btn{ text-align: right;}

@media screen and (max-width: 600px) {
.sec_website{ padding: 0 0 50px;}
.sec_website .inner_lg{ flex-direction: column;}
.sec_website .box_img{ width: 100%; padding: 0 0 20px;}
.sec_website .box_txt{ width: 100%;}
.sec_website .txt{ font-size: 15px; line-height: 1.75;}
.sec_website .logo{ padding: 20px 0 20px;}
.sec_website .btn{ text-align: center;}
}

/* ---------------------------------------------------
Section Case Study
------------------------------------------------------ */
/*.cmn_sec_casestudies .comingsoon{ margin: 50px 0 0;}*/

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

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


/* ---------------------------------------------------
Section Price
------------------------------------------------------ */
.sec_price{ background: linear-gradient(90deg, rgba(251,159,25,1) 15%, rgba(255,130,4,1) 85%); position: relative; z-index: 1; overflow: hidden; padding: 0 0 80px;}
.sec_price::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_price .cmn_tit_01{ position: relative; z-index: 3;}
.sec_price .cmn_tit_01 .en{ background: none; color: #000;}
.sec_price .cmn_tit_01 .ja{ color: #fff;}
.sec_price .list_01{ border-radius: 10px; display: flex; flex-wrap: wrap; width: 90%; max-width: 900px; margin: 0 auto;}
.sec_price .list_01 dt{ border-radius: 10px 10px 0 0; background: #f0f0f0; border-bottom: solid 1px #f69f4b; text-align: center; font-size: 22px; font-weight: bold; padding: 10px 0; width: 100%;}
.sec_price .list_01 dd{ width: 50%; background: #fff; border-right: solid 1px #f69f4b; box-sizing: border-box; text-align: center; padding: 20px 0;}
.sec_price .list_01 dd:first-of-type{ border-radius: 0 0 0 10px;}
.sec_price .list_01 dd:last-of-type{ border-radius: 0 0 10px 0; border-right: none;}
.sec_price .list_01 dd .tit{ font-size: 20px; font-weight: bold; line-height: 1.1;}
.sec_price .list_01 dd .cost{ font-size: 40px; font-weight: bold; line-height: 1.1; color: #f77900;}
.sec_price .list_01 dd .cost .num{ font-size: 60px;}
.sec_price .list_02{ width: 90%; max-width: 900px; margin: 20px auto 30px;}
.sec_price .list_02 li{ padding: 0 0 0 0.8em; text-indent: -0.8em; font-size: 16px; line-height: 1.6;}
.sec_price .box_btns{ display: flex; justify-content: center;}
.sec_price .box_btns a{ display: block; width: 400px; margin: 0 25px;}
.sec_price .box_btns a.btn_01::after{ border-right: solid 2px #5bb446; border-bottom: solid 2px #5bb446;}
.sec_price .box_btns a.btn_01:hover::after{ border-right: solid 2px #333; border-bottom: solid 2px #333;}

@media screen and (max-width: 600px) {
.sec_price{ padding: 0 0 40px;}
.sec_price::before{ background-size: 50%; top: -20px; left: 0; margin: 0 0 0 -50px;}
.sec_price .list_01{ border-radius: 10px; flex-direction: column;}
.sec_price .list_01 dt{ border-radius: 10px 10px 0 0; font-size: 20px; padding: 10px 0; width: 100%;}
.sec_price .list_01 dd{ width: 100%; border-right: none; border-bottom: solid 1px #f69f4b; padding: 15px 0;}
.sec_price .list_01 dd:first-of-type{ border-radius: 0;}
.sec_price .list_01 dd:last-of-type{ border-radius: 0 0 10px 10px; border-right: none; border-bottom: none;}
.sec_price .list_01 dd .tit{ font-size: 18px;}
.sec_price .list_01 dd .cost{ font-size: 30px;}
.sec_price .list_01 dd .cost .num{ font-size: 40px;}
.sec_price .list_02{ margin: 20px auto 30px;}
.sec_price .list_02 li{ font-size: 14px; line-height: 1.6;}
.sec_price .box_btns{ flex-direction: column; width: 90%; margin: 0 auto;}
.sec_price .box_btns a{ width: 90%; margin: 0 auto 10px;}
}

/* ---------------------------------------------------
Section Downloads
------------------------------------------------------ */
.sec_downloads{ width: 90%; max-width: 1360px; margin: 0 auto; border-bottom: solid 1px #e4e4e4; padding: 0 0 80px;}
.sec_downloads ul{ list-style-type: none; width: 90%; max-width: 1060px; margin: 0 auto; display: flex; justify-content: space-between;}
.sec_downloads ul li{ width: 30.3%; }
.sec_downloads .img img{ width: 100%; height: auto;}
.sec_downloads .tit{ font-size: 18px; font-weight: bold; line-height: 1.4; padding: 10px 0;}
.sec_downloads .body{ font-size: 16px; line-height: 1.7;}
.sec_downloads .btn{ font-size: 16px; font-weight: bold; line-height: 1.1; padding: 20px 0 0; text-align: right;}
.sec_downloads .btn a{ color: #f77900; position: relative; padding: 0 12px 0 0;}
.sec_downloads .btn a::after{ content: ""; width: 6px; height: 6px; border-bottom: solid 1px #f77900; border-right: solid 1px #f77900; transform: rotate(-45deg); transform-origin: center center; display: block; position: absolute; top: 0; bottom: 0; right: 0; margin: auto 0;}
.sec_downloads .box_btn{ text-align: center; padding: 50px 0 0;}

@media screen and (max-width: 600px) {
.sec_downloads{ padding: 0 0 50px;}
.sec_downloads ul{ width: 100%; max-width: 100%; flex-direction: column;}
.sec_downloads ul li{ width: 100%; padding: 0 0 30px;}
.sec_downloads .tit{ font-size: 16px; line-height: 1.4; padding: 10px 0;}
.sec_downloads .body{ font-size: 15px; line-height: 1.7;}
.sec_downloads .btn{ font-size: 15px; line-height: 1.1; padding: 10px 0 0;}
.sec_downloads .box_btn{ padding: 0;}
}

/* ---------------------------------------------------
Box Bunners 2024/02/15 追記
------------------------------------------------------ */
.box_bnrs_2024{ background: #f5f6f6; padding: 0; overflow: hidden;}
.box_bnrs_2024 a{ width: 90%; max-width: 1400px; margin: 50px auto 0; display: block;}

@media screen and (max-width: 600px) {
.box_bnrs_2024{ padding: 0;}
.box_bnrs_2024 a{ margin: 20px auto 0; }
}