@charset "utf-8";

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

	グローバル

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

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

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

.hidden_s { display: none !important;}

/* margin */
.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;}

.mt80-40 { margin-top: 40px !important;}

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

body { padding-top: 0px !important;}

.header, .sp-navi .logo { position: static; display: block; padding: 0 70px 0 10px; line-height: 50px;}
.header .box01 { display: block;}
.header h1 { width: auto;}
.header h1 img, .sp-navi .logo img { max-height: 34px; width: auto; vertical-align: middle;}


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

/* ハンバーガーメニュー */
.humberger {
	background: #1571DA;
	cursor: pointer;
	display: block;
	position: fixed;
	top: 0px;
	right: 0px;
	width: 50px;
	height: 50px;
	z-index: 10000001;
}
.humberger span {
	background: #fff;
	position: absolute;
	left: 14px;
	width: 22px;
	height: 1px;
	transition: 0.4s;
}
.humberger span:nth-of-type(1) { top: 17px;}
.humberger span:nth-of-type(2) { top: 24px;}
.humberger span:nth-of-type(3) { top: 31px;}
.is-open .humberger span:nth-of-type(1) { transform: translateY(5px) rotate(-45deg);}
.is-open .humberger span:nth-of-type(2) { opacity: 0;}
.is-open .humberger span:nth-of-type(3) { transform: translateY(-9px) rotate(45deg);}

/* ナビ本体 */
.sp-navi { -webkit-text-size-adjust: 100%;}
.sp-navi.is-open .sp-navi-inner {
	opacity: 1;
	visibility: visible;
	z-index: 10000000;
}
.sp-navi .sp-navi-inner {
	background: #fff;
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	position: fixed;
	top: 0;
	left: 0px;
	height: 100%;
	width: 100%;
	transition: .5s;
}

.sp-navi .navi-main { padding: 1.7em 2.5em 3.5em; font-size: min(6vw,2em); display: flex; flex-flow: column; gap: 1.3em;}
.sp-navi .header_btn { margin: 0 2.3em; font-size: min(6vw,2em);}
.sp-navi .header_btn a { font-size: 1.3em; padding: 0.4em;}


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

.cmn_btn { padding: 60px 0;}
.cmn_btn ul { gap: 1.5em; font-size: min(1.7vw,0.95em);}
.cmn_btn li { width: calc((100% - 1.5em) / 2);}
.cmn_btn a { padding: 3em 2em; gap: 1.5em;}
.cmn_btn h2 { font-size: 1.8em;}

.footer { padding: 50px 0 15px;}
.footer_nav { flex-wrap: wrap; gap: 2em; font-size: min(4vw,1em);}

.footer .box01 { flex-wrap: wrap; gap: 2em;}
.footer .box01 .btn_area { position: static;}


@media only screen and (max-width: 680px) {
  .cmn_btn ul { flex-wrap: wrap; justify-content: center; gap: 1.5em; font-size: min(3.3vw,1em);}
  .cmn_btn li { width: 100%; max-width: 400px;}
  
  .footer_nav { justify-content: center;}
  .footer_nav > li { width: calc((100% - 2em) / 2); max-width: 14em;}
  .footer_nav > li:last-child { width: 100%; max-width: 30em; margin-top: -3.5em;}
}


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

	トップページ

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

.main_slider { font-size: 10vw; margin-bottom: -0.7em;}
.main_slider .box01 { display: block; position: relative;}
.main_slider .box01 figure { width: 100%; margin-bottom: 0; padding-bottom: 0.7em; aspect-ratio: 860 / 1160;}
.main_slider .text_box { position: absolute; bottom: 0; left: 0; padding-left: 0; font-size: 10vw; line-height: 1.2; gap: 0.4em; align-items: flex-start; padding-bottom: 0;}
.main_slider .text_box span { padding: 0.1em 0.3em;}

.back_pad { padding: 50px 0 40px;}

.top_en_ttl { font-size: 3em;}

.top_sec01 { padding: 140px 0 15%;}
.top_sec01 .text01 { font-size: min(7.5vw,2.3em);}

.top_sec02 .ttl_box { flex-flow: column;}
.top_sec02 .box01 { gap: 4%;}
.top_sec02 .box01 section { width: 48%;}
.top_sec02 .box01 .box_inner { padding: 2em;}

.top_sec04 .list01 { padding: 5%; gap: 5% 0;}

.top_sec05 .list01 { gap: 40px 6%;}
.top_sec05 .list01 li { width: calc(94% / 2); font-size: min(2.8vw,1em);}
.top_sec05 .list01 figure { padding: 0 25%;}

.top_sec06 .box01 { padding: 50px 0 25px;}
.work_box { flex-flow: column; gap: 30px;}
.work_box .box_inner.fo11 { width: 100%; font-size: 1em !important;}
.work_box > figure { padding: 10px; max-width: 670px; margin: auto;}
.work_box h3 { font-size: min(6.2vw,2em); margin: 0;}
.work_box .fig-pause { left: 0px;}

/* iOS Safari だけ上書き（16+想定） */
@supports (font-size: 1svw) and (-webkit-touch-callout: none) {
  .work_box h3 { font-size: clamp(16px, 6.2svw, 30px) !important; }
  .work_box .box_inner.fo11 { font-size: 16px !important; -webkit-text-size-adjust: 100%;}
}

.work_thumb_wrap { transform: none; margin-top: 2em;}
.work_thumb_slider { gap: 0.9em;}
.work_thumb_slider img { display: none;}
.work_thumb_slider li { flex: 1;}
.work_thumb_slider a { background: rgba(21,113,218,0.2); height: 0.7em;}
.work_thumb_slider a.active { background: rgba(21,113,218,1);}
.work_thumb_slider a:after { display: none;}

.top_sec06 .box02 figure { width: 150px; align-self: flex-start;}
.top_sec06 .box02 .box_inner { flex: 1;}

.top_sec07 section { flex-flow: column !important;}
.top_sec07 section .box_inner { width: 100%; display: block; padding: 2em;}
.top_sec07 section h3 { font-size: min(6vw,1.8em);}

.top_sec07 section:nth-of-type(odd):not(:nth-of-type(5)) .box_inner { padding-right: 23%;}
.top_sec07 section:nth-of-type(even) .box_inner { padding-left: 23%;}
.top_sec07 section:nth-of-type(5) .box_inner { padding-left: 20%;}

.top_sec07 section:nth-of-type(1) .pos_ab { width: 25%; bottom: -1.7vw;}
.top_sec07 section:nth-of-type(2) .pos_ab { max-width: 140px;}
.top_sec07 section:nth-of-type(odd):nth-of-type(3) .box_inner { padding-right: 25%;}
.top_sec07 section:nth-of-type(3) .pos_ab { width: 25%; right: -1.5%;}
.top_sec07 section:nth-of-type(4) .pos_ab { max-width: 150px;}
.top_sec07 section:nth-of-type(5) .pos_ab { max-width: 120px; left: 1%;}

.top_sec08 .ttl_box { flex-flow: column;}
.top_sec08 .list01 { flex-wrap: wrap; justify-content: center; gap: 40px 0; font-size: min(2.8vw,1em);}
.top_sec08 .list01 li { width: 50%; max-width: 300px;}

@media only screen and (max-width: 640px) {
  .top_sec02 .box01 { flex-flow: column; gap: 20px;}
  .top_sec02 .box01 section { width: 100%;}
  .top_sec02 .box01 .box_inner { padding: 7%;}

  .top_sec03 .box_inner { display: contents;}
  .top_sec03 .ttl_box { flex-flow: column;}
  .top_sec03 .ttl_box > figure { width: auto; order: 2;}
  .top_sec03 .ttl_box .text01 { gap: 0.1em; font-size: min(5.2vw,2em); margin: 0.7em 0 0.2em; order: 3;}

  .top_sec04 .list01 li { width: 50%;}
  
  .top_sec07 section h3 .show_sp { display: inline;}

  .top_sec09 .btn_area a { flex-flow: column;}
}

@media only screen and (max-width: 480px) {
  .top_sec04 .list01 li { width: 100%;}

  .top_sec05 .list01 li { width: 90%; margin: auto; font-size: 1em;}
  .top_sec05 .list01 figure { padding: 0 30%;}

  .top_sec06 .box02 { flex-flow: column-reverse; justify-content: center; gap: 20px;}
  .top_sec06 .box02 figure { width: 180px; align-self: center; margin-left: -40px;}
  
  .top_sec07 section .box_inner { padding: 2em 1.5em;}
  .top_sec07 section:nth-of-type(1) h3 { margin-right: -25%;}
  .top_sec07 section:nth-of-type(2) h3, .top_sec07 section:nth-of-type(4) h3 { margin-left: -25%;}
  .top_sec07 section:nth-of-type(5) h3 { margin-left: -20%;} {}
}


/* ------------------------
	コンテンツ
------------------------ */

a.link { background-size: 0.8rem auto; padding-right: 1.25rem;}

.note { background-size: 100% 2.7em; line-height: 2.7em;}

.pagettl { font-size: 2em; padding: 1.2em 0;}


/* ------------------------
	details
------------------------ */

.det_sec01 th, .det_sec01 td { padding: 1em 0.5em;}
.det_sec01 th { width: 11em; vertical-align: top;}

.det_sec01 .btn_area a { max-width: 400px; font-size: min(3.5vw,1em); padding-top: 1.2em;}
.det_sec01 .btn_area .fo_quick { font-size: 3em;}

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


/* ------------------------
	interview
------------------------ */

.int_head { font-size: 1em; font-size: min(3.5vw,1em);}
.int_head figcaption { bottom: 0; width: 100%; padding: 1.5em; font-size: min(2vw,1.15em);}
.int_head dl { gap: 1em;}

.int_sec01 { flex-flow: column !important; gap: 30px;}
.int_sec01 .box_inner { width: 100%;}
.int_sec01 h3 { font-size: min(5.5vw,2em);}

.int_sec02 { padding: 50px 18% 50px 20px;}
.int_sec02.img_left { padding: 50px 20px 50px 18%;}
.int_sec02:before, .int_sec02:after { width: 30px; height: 30px;}
.int_sec02 .box01 { border-radius: 30px; padding: 0 20px 30px;}
.int_sec02 .box01:after { top: auto; bottom: 30%; transform: scale(1,-1); width: 1.5em; height: 1.5em; right: -1.4em;}
.int_sec02.img_left .box01:after { left: -1.4em; transform: scale(-1,-1);}
.int_sec02 .box01 h3 { transform: translate(-10px,-50%);}
.int_sec02 dl { margin-top: 0;}

.int_sec02.int01 .img01 { width: 12%; right: 2%;}
.int_sec02.int02 .img01 { width: 12%; left: 2%;}
.int_sec02.int03 .img01 { width: 13%; right: 2%; bottom: -20px;}
.int_sec02.int04 .img01 { width: 12%; left: 2.5%; bottom: -20px;}

.int_sec03 { flex-flow: column;}
.int_sec03 > figure { width: 100%;}
.int_sec03 .box01 { width: 100%; margin: 0;}
.int_sec03 .box02 { padding: 30px 0 0;}
.int_sec03 .text01 { margin: 0 0 5px; display: flex; justify-content: center;}
.int_sec03 .text01 img { margin-left: -40%; width: 170px; transform: rotate(-20deg);}

@media only screen and (max-width: 480px) {
  .int_sec02 { padding: 50px 20px 25px !important;}
  .int_sec02 .box01:after { display: none;}
  
  .int_sec02 .img01 { top: auto !important; left: auto !important;}
  .int_sec02.int01 .img01 { width: 10%; bottom: -20vw;}
  .int_sec02.int02 .img01 { width: 11%; bottom: -11vw; right: 5%;}
  .int_sec02.int03 .img01 { width: 15%; bottom: -15vw; right: 0;}
  .int_sec02.int04 .img01 { width: 10%; bottom: -10vw; right: 2%;}
}