@charset "utf-8";

/*------------------------------------------------------

	グローバル

------------------------------------------------------*/

body { min-width: 0px; font-size: 0.9em;}

.ta_right-s_center { text-align: center !important;}
.ta_left-s_center { text-align: center !important;}
.ta_center-s_left { text-align: left !important;}

.hidden_s { display: none !important;}

/* margin */
.mb30-15 { margin-bottom: 15px !important;}
.mb40-20 { margin-bottom: 20px !important;}
.mb60-30, .mb50-30 { margin-bottom: 30px !important;}
.mb80-40 { margin-bottom: 40px !important;}
.mb100-60 { margin-bottom: 60px !important;}
.mb120-60 { margin-bottom: 60px !important;}
.mb160-80 { margin-bottom: 80px !important;}

.back_stripe { background: #fff linear-gradient(90deg,transparent 0,transparent 198px,rgba(227,227,227,0.3) 198px,rgba(227,227,227,0.3) 200px,transparent 200px,transparent 398px,rgba(227,227,227,0.3) 398px,rgba(227,227,227,0.3) 400px) center top/400px 100% repeat-x;}

/* ------------------------
	ヘッダー
------------------------ */

body { padding-top: 60px;}

.header { position: fixed; width: 100%; left: 0; top: 0; z-index: 500; background: #fff;}
.header .box01 { height: 60px; padding: 0 180px 0 15px; gap: 0.5em;}
.header h1 img { vertical-align: middle; max-height: 36px; width: auto;}
.header .lang_btn { right: 70px !important; top: 13.6px;}

.header.under h1 { width: auto;}


/* ------------------------
	グローバルナビ
------------------------ */

/* ハンバーガーメニュー */
.humberger {
	cursor: pointer;
	display: block;
	position: fixed;
	top: 0px;
	right: 0px;
	width: 60px;
	height: 60px;
	z-index: 1001;
}
.humberger span {
	background: #000;
	border-radius: 15px;
	position: absolute;
	left: 14px;
	width: 34px;
	height: 3px;
	transition: 0.4s;
}
.humberger span:nth-of-type(1) { top: 21px;}
.humberger span:nth-of-type(2) { top: 29px;}
.humberger span:nth-of-type(3) { top: 37px;}
.is-open .humberger span:nth-of-type(1) { transform: translateY(6px) rotate(-45deg);}
.is-open .humberger span:nth-of-type(2) { opacity: 0;}
.is-open .humberger span:nth-of-type(3) { transform: translateY(-10px) rotate(45deg);}

/* ナビ本体 */
.sp-navi { -webkit-text-size-adjust: 100%;}
.sp-navi.is-open .sp-navi-inner {
	opacity: 1;
	visibility: visible;
	z-index: 100;
}
.sp-navi .sp-navi-inner {
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	position: fixed;
  background: #EFEFEF;
	top: 60px;
	left: 0px;
	height: calc(100% - 60px);
	width: 100%;
	transition: .5s;
	padding: 7% 0 10% 2em;
  font-size: min(6.5vw,1.8em);
}

.sp-navi .list01 li { border-bottom: solid 1px #E3E3E3;}
.sp-navi .list01 > li > a, .sp-navi .list01 .aco { color: #333; text-decoration: none; display: flex; flex-flow: column; padding: 0.6em 3em 0.6em 0;}
.sp-navi .list01 > li > a .fo_noto, .sp-navi .list01 .aco .fo_noto { font-size: 0.8em;}

.sp-navi .list01 .aco { cursor: pointer; background: url("../images/common/ico_plus.svg") no-repeat calc(100% - 2em) center; background-size: 1.4em auto;}
.sp-navi .list01 .aco.open { background-image: url("../images/common/ico_minus.svg");}
.sp-navi .list02 { padding: 0 2em 0.6em 0; display: none;}
.sp-navi .list02 li { font-size: 0.7em;}
.sp-navi .list02 li:not(:last-child) { margin-bottom: 0.6em;}
.sp-navi .list02 a { display: flex; align-items: flex-start; flex-flow: column; justify-content: center; height: 4em; background: url("../images/common/cta_tel.svg") no-repeat 1.2em center #004B9E; background-size: 2.5em auto; border-radius: 0.3em; color: #fff; padding-left: 4.5em;}
.sp-navi .list02 li:last-child a { background-image: url("../images/common/ico_mail_white.svg"); background-color: #333333;}


/* ------------------------
	フッター
------------------------ */

.cta .cont1200 { padding: 60px 15px; max-width: 700px;}
.cta .btn_area01 a { background-position: 8% center, calc(100% - 1.5em) center; padding: 1.8em 3em 1.8em 23%;}
.cta .btn_area02 a { font-size: min(2.5vw,1em); padding-left: 25%;}
.cta .btn_area02 li:first-child a { background-position: 8% center; background-size: 2.5em auto;}
.cta .btn_area02 li:last-child a { background-position: 7% center; background-size: 2.3em auto;}

.footer .bg01 { padding: 50px 0;}
.footer .box01, .footer .box02 { flex-flow: column; gap: 30px;}
.footer .box01 .box_inner { gap: 1.5em;}

.footer .box01 dl, .footer .box01 dt a { gap: 1em;}

.footer .box02 .box_inner02 { width: auto; margin-top: 15px;}
.footer .box02 .btn_area .list01 { flex: 1.5;}

.pagetop { width: 50px;}

@media only screen and (max-width: 640px) {
  .footer .box01 .box_inner { flex-flow: column; gap: 2em; font-size: min(3.5vw,1em);}

  .footer .box02 .btn_area .list01 a { padding: 0 0.5em 0 22%; background-size: 2em auto !important; background-position: 7% center !important;}
}

@media only screen and (max-width: 480px) {
  .cta .btn_area01 a { background-position: 5% center, calc(100% - 0.8em) center; padding: 1.8em 3em 1.8em 20%; font-size: min(4vw,1.2em) !important;}
  .cta .btn_area02 { flex-flow: column;}
  .cta .btn_area02 a { font-size: min(4vw,1em);}
  
  .footer .box02 .btn_area { flex-flow: column;}
  .footer .box02 .btn_area .btn01 a { background-position: center 1em, center calc(100% - 1em); padding: 3.7em 0.5em;}
  .footer .box02 .btn_area .btn01 a .hide_sp { display: none;}
  .footer .box02 .btn_area .list01 a { height: 6em;}
  
}


/*------------------------------------------------------

	トップページ

------------------------------------------------------*/

.top_en_ttl { font-size: 2.5em;}

.mainimage .img01 { height: calc(100vh - 60px);}
.mainimage .img01 img { width: 100%; height: 100%; display: block; object-fit: cover;}
.mainimage .text_box { left: 5%; bottom: auto; top: 50%; transform: translateY(-50%); width: 90%; font-size: min(3vw,1em); text-shadow: 0 0 0.3em #000;}
.mainimage .text01 { font-size: 4em;}

.top_sec01 .bg01 .inner_bg { background-position: -5% 15%; background-size: 80% auto; padding: 60px 0;}
.top_sec01 .bg01 .cont1200 { flex-flow: column;}
.top_sec01 .bg01 .box01 { width: auto;}
.top_sec01 .bg01 .img01 { margin-right: -15px;}
.top_sec01 .bg01 .fo13 { font-size: min(4.9vw,1.3em) !important;}

.top_sec01 .bg02 .list01 { gap: 80px 20px;}
.top_sec01 .bg02 .list01 a { padding: 0 0.8em 0.8em}
.top_sec01 .bg02 .list01 .img01 figure { margin-top: -50px;}
.top_sec01 .bg02 .text_box { background-position: right center; background-size: 1.5em auto; margin-top: 0.7em;}

.top_sec02 .cont1200 { flex-flow: column; align-items: flex-start; padding: 60px 15px;}
.top_sec02 .box01 { width: auto;}
.top_sec02 .img01 { margin-left: -15px;}
.top_sec02 .fo18 { font-size: min(5.5vw,1.8em) !important;}

.top_sec03 { padding: 50px 0 60px;}
.top_sec03 .back_white { border-radius: 0.8em; padding: 2em 1em;}

.art_dl dl { gap: 1.5em; padding: 0 0.5em 0.3em;}
.art_dl dd.fo125 { font-size: 1.05em !important;}

@media only screen and (max-width: 640px) {
  .top_sec01 .bg02 .list01 li { width: calc((100% - 20px) / 2);}
  .top_sec01 .bg02 .list01 li:nth-child(3), .top_sec01 .bg02 .list01 li:nth-child(5) { animation-delay: 0s;}
  .top_sec01 .bg02 .list01 li:nth-child(4) { animation-delay: 0.2s;}
}

@media only screen and (max-width: 480px) {
  .top_sec01 .bg02 .list01 li { width: auto; animation-delay: 0s !important;}
}


/*------------------------------------------------------

	コンテンツ

------------------------------------------------------*/

.pagettl { padding-top: 50px;}
.pagettl .cont1400 { flex-wrap: wrap;}
.pagettl .under_en_ttl { font-size: 3em;}

.link_pad { padding-top: 80px; margin-top: -80px;}


/* ------------------------
	company
------------------------ */

.table_bordered th { width: 14em;}

.com_sec01 { padding-top: 40px;}

.com_sec02 table { width: 100%;}
.com_sec02 th, .com_sec02 td { padding-bottom: 0.5em;}
.com_sec02 th { width: 5.5em;}

.com_sec03 p:not(:last-child) { margin-bottom: 40px;}


@media only screen and (max-width: 768px) {
  .com_sec { flex-flow: column; gap: 30px;}
  .com_sec h3 { width: 8em;}
}

@media only screen and (max-width: 480px) {
  .table_bordered, .table_bordered tbody, .table_bordered tr, .table_bordered th, .table_bordered td { display: block; width: 100%;}
  .table_bordered td { padding-top: 0; margin-top: -0.5em;}
}


/* ------------------------
	agency
------------------------ */

@media only screen and (max-width: 640px) {
  .age_sec .box01 section { width: 100%;}
}


/* ------------------------
	product
------------------------ */

@media only screen and (max-width: 640px) {
  .pro_sec .en_ttl { font-size: 1.6em;}
  .pro_sec h3 { font-size: 1.8em;}
}

@media only screen and (max-width: 480px) {
  .pro_sec .box01 { flex-flow: column; align-items: center;}
  .pro_sec .box01 figure { width: 80%;}
  .pro_sec .box01  .btn_area { text-align: center;}

  .faq_dl dt { padding: 1.2em 2.7em 1.2em 1em;}
  .faq_dl dt:after { width: 1.2em; height: 1.2em; right: 0.8em;}
}


/* ------------------------
	recruit
------------------------ */

.rec_mainimage .text01 { font-size: min(5vw,2.2em); top: 15%;}
.rec_sec01 { flex-flow: column;}
.rec_sec01 .box_inner { width: 100%;}
.rec_sec01 h3 { font-size: 3em;}

.rec_sec02 { background-blend-mode: soft-light;}

.slide01 { gap: 25px;}
.slide01 li img { width: 40vw; max-width: 250px;}
.slide01 li:nth-child(even) { margin-top: 50px;}

.rec_sec03 h3 { font-size: 1.6em; margin: 60px auto 0;}
.rec_sec03 .img01 { padding: 30px 22% 0; margin-bottom: 50px !important;}
.rec_sec03 header .bg:before, .rec_sec03 header .bg:after { width: 17%; height: 70%;}

.rec_sec03 .main_box { display: block; min-height: initial;}
.rec_sec03 .contents_box { width: auto; gap: 50px;}

.rec_sec04 h3 { max-width: 400px; font-size: min(8vw,2em);}
.rec_sec04 h3:before, .rec_sec04 h3:after, 
.rec_sec04 h3 span:before, .rec_sec04 h3 span:after { border-width: 4px;}

.rec_sec04 .bg01:before { height: 200px;}
.rec_sec04 .bg01 .list01 { flex-flow: column; padding-bottom: 30px;}
.rec_sec04 .bg01 .list01 li { width: 100%; max-width: 500px; margin: 0 auto 50px;}
.rec_sec04 .bg01 .box01 { padding: 25px 20px 40vw;}
.rec_sec04 .bg01 h4 { font-size: min(5.7vw,1.5em);}
.rec_sec04 .bg01 .img01 { margin: -39vw 20px -30px;}

.rec_sec05 .back_gray { padding-bottom: 50px;}
.rec_sec05 th { padding: 1em 0.3em; width: 10em; font-size: 1.05em !important;}
.rec_sec05 td { padding: 1em 0 1em 1em;}

.rec_sec05 .btn_area a { gap: 1.5em; align-items: stretch; max-width: 450px; padding: 0 1.5em 1em 1em; font-size: min(2.8vw,1em);}
.rec_sec05 .btn_area figure { margin: -2.5em 0 0; width: 40%;}
.rec_sec05 .btn_area .text_box { font-size: 1.8em; background-position: left calc(100% - 0.3em); display: flex; flex-flow: column; padding: 1.3em 0 0 0;}
.rec_sec05 .btn_area .en_ttl { position: static; font-size: 0.65em; margin-bottom: 0.5em !important;}
.rec_sec05 .btn_area p { line-height: 1.4;}

@media only screen and (max-width: 640px) {
  .rec_sec05 table { font-size: 0.9em;}
  .rec_sec05 th { width: 6.5em;}
  .rec_sec05 th .show_sp { display: inline;}
}


/* ------------------------
	contact
------------------------ */

.con_sec01 .list01 { gap: 1em; font-size: min(2.5vw,1em); margin-top: -0.5em;}
.con_sec01 .list01 li { width: calc((100% - 1em) / 2); max-width: 350px;}
.con_sec01 .list01 a { padding: 1em 1em 1em 32%; background-position: 13% center; background-size: 1.9em;}

.contact_sec dt { width: 11em;}

@media only screen and (max-width: 640px) {
  .contact_sec dl { flex-flow: column;}
  .contact_sec dt { justify-content: flex-start; gap: 1em;}
  .contact_sec dd { width: 100%;}
}

@media only screen and (max-width: 480px) {
  .con_sec01 .list01 { font-size: min(4vw,1em);}
  .con_sec01 .list01 li { width: 100%; max-width: 350px;}
}


/* ------------------------
	topics
------------------------ */

.blog_content table { font-size: 0.9em;}

img.aligncenter, img.alignright, img.alignleft { display: block; margin: 20px auto; float: none;}


/* product */
.pro_cat_head h2 { height: auto; flex-wrap: wrap; font-size: min(8vw,2em); line-height: 1.4; gap: 0 1em; padding: 5.5vw 1em 5.5vw 1.5em;}

.pro_cat_list li { width: calc(94% / 3);}
.pro_cat_list .btn_area a { width: 100%; max-width: 180px;}

.pro_art .single_cat_ttl.mb20 { font-size: 1.3em; margin-bottom: 5px !important;}
.pro_art .ttl_box { flex-flow: column; align-items: flex-start;}
.pro_art .ttl_box h1 { font-size: 2.2em;}
.pro_art .pcat_list { font-size: 1em;}

.pro_main .main_box.blog_content h2 { font-size: 1.8em;}

.detail_box { flex-flow: column;}
.detail_box h2 { font-size: 1.8em;}
.detail_box .table_box { width: 100%; font-size: min(3vw,1em);}

.pro_art hr { margin: 40px 0;}

@media only screen and (max-width: 768px) {
  .pro_main { flex-flow: column;}
  .pro_main .img_box { width: 100%; max-width: 600px; margin: auto;}
}

@media only screen and (max-width: 640px) {
  .pro_cat_list { gap: 50px 15px;}
  .pro_cat_list li { width: calc((100% - 15px) / 2);}
}