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

  トップページ（page/top.php）専用のCSS
  ・読み込みは functions.php の tcs_enqueue_layout()（トップページだけ、style.css の後）
  ・ヘッダー・フッター・リセット・共通パーツ・新着情報のカードはルートの style.css（LAYOUT・COMMON・TOPICS）を共用

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

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

  TOP（トップページ）
	※旧Elementorページ（ID 30）の見た目をそのまま再現（数値はステージングの表示を実測）。PC/SPの切替は767px
	※新着情報のカードは TOPICS、スライダーの動きは js/top.js

--------------------------------------------------*/
#top {--teal: #00809E;--text: #3C3C3C;--orange: #EA8712;color: var(--text);font-family: var(--font-jp);}
#top a {text-decoration: none;}
/* セクション共通 */
#top .top_sec {padding: 80px 20px;background: no-repeat center / cover;text-align: center;}
#top .top_sec > * {max-width: 1180px;margin-right: auto;margin-left: auto;}
/* 見出し（英字＋線＋和文） */
#top .top_title {margin-bottom: 65px;color: var(--text);font-weight: 400;font-size: 24px;letter-spacing: .12em;line-height: 1.4;text-align: center;}
#top .top_title .en {display: block;font-family: var(--font-jp);font-size: 32px;line-height: 1.4;text-align: center;}
#top .top_title .en::after {content: '';display: block;width: 60px;height: 3px;margin: 20px auto;background: var(--teal);}
/* 本文 */
#top .txt {max-width: 560px;margin-bottom: 55px;font-size: 16px;letter-spacing: .05px;line-height: 1.8;text-align: left;}
/* オレンジのボタン */
#top .top_btn {display: flex;justify-content: center;margin-bottom: 0;}
#top .top_btn a {position: relative;isolation: isolate;overflow: hidden;display: inline-flex;align-items: center;gap: 5px;padding: 20px 40px;background: var(--orange);color: #fff;font-weight: 700;font-size: 16px;letter-spacing: .2em;line-height: 1.8;transition: transform .3s, box-shadow .3s;}
#top .top_btn svg {width: 19px;height: 16px;fill: currentColor;transition: transform .3s;}
/* ホバー：青緑が左から流れ込む＋少し浮く＋矢印が右へ（マウス操作の端末のみ） */
#top .top_btn a::before {content: '';position: absolute;inset: 0;z-index: -1;background: var(--teal);transform: scaleX(0);transform-origin: right;transition: transform .45s cubic-bezier(.65, 0, .35, 1);}
@media (hover: hover) {
	#top .top_btn a:hover {box-shadow: 0 10px 20px rgba(0, 128, 158, .3);transform: translateY(-3px);}
	#top .top_btn a:hover::before {transform: scaleX(1);transform-origin: left;}
	#top .top_btn a:hover svg {transform: translateX(6px);}
}
/* タッチ端末：タップした瞬間に青緑が流れ込む＋少し沈む */
@media (hover: none) {
	#top .top_btn a:active {transform: scale(.97);}
	#top .top_btn a:active::before {transform: scaleX(1);transform-origin: left;transition-duration: .25s;}
}
@media only screen and ( max-width : 1024px ) {
	#top .top_sec {padding: 64px 30px;}
	#top .top_title {margin-bottom: 48px;}
	#top .top_btn a {padding: 18px 40px;font-size: 15px;}
}
@media only screen and ( max-width : 767px ) {
	#top .top_sec {padding: 48px 20px;}
	#top .top_title {margin-bottom: 32px;font-size: 14px;}
	#top .top_title .en {font-size: 22px;}
	#top .top_title .en::after {margin: 10px auto;}
	#top .txt {margin-bottom: 28px;font-size: 14px;}
	/* ボタンは指で押しやすい大きさに（幅240px以上・高さ約50px） */
	#top .top_btn a {justify-content: center;gap: 8px;min-width: 240px;padding: 14px 28px;font-size: 14px;letter-spacing: .15em;}
	#top .top_btn svg {width: 15px;height: 15px;}
}
/*-------------------------------------------------
  メインビジュアル（動画）
--------------------------------------------------*/
#top .top_mv video {display: block;width: 100%;aspect-ratio: 16 / 9;object-fit: cover;background: #000;}
/*-------------------------------------------------
  主要取引先・採用情報のバナー
--------------------------------------------------*/
#top .top_bn {display: flex;padding: 0;list-style: none;}
#top .top_bn li {flex: 1 1 50%;}
#top .top_bn a {display: flex;height: 110px;}
#top .top_bn .label {display: flex;flex: 0 0 40%;justify-content: center;align-items: center;background: url("../images/front/top_bn1_bg.webp") no-repeat center / cover;color: #fff;font-size: 24px;letter-spacing: .1em;line-height: 1.8;}
#top .top_bn .photo {flex: 1;background: no-repeat center / cover;}
@media only screen and ( max-width : 767px ) {
	#top .top_bn {flex-direction: column;}
	#top .top_bn a {height: 60px;}
	#top .top_bn .label {font-size: 14px;}
}
/*-------------------------------------------------
  新着情報（スライダー）
--------------------------------------------------*/
#top .topics_slider {position: relative;margin-bottom: 30px;text-align: left;}
#top .topics_slider .viewport {overflow: hidden;margin: 0 -15px;}
#top .topics_slider .track {display: flex;transition: transform .5s;}
#top .topics_slider .slide {flex: 0 0 33.3333%;padding: 10px 15px;}
#top .topics_slider .arrow {position: absolute;top: 219px;z-index: 2;width: 50px;height: 50px;padding: 0;border: 0;background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cpath d='M119 47.3166C119 48.185 118.668 48.9532 118.003 49.6212L78.8385 89L118.003 128.379C118.668 129.047 119 129.815 119 130.683C119 131.552 118.668 132.32 118.003 132.988L113.021 137.998C112.356 138.666 111.592 139 110.729 139C109.865 139 109.101 138.666 108.436 137.998L61.9966 91.3046C61.3322 90.6366 61 89.8684 61 89C61 88.1316 61.3322 87.3634 61.9966 86.6954L108.436 40.002C109.101 39.334 109.865 39 110.729 39C111.592 39 112.356 39.334 113.021 40.002L118.003 45.012C118.668 45.68 119 46.4482 119 47.3166Z' fill='white'/%3E%3C/svg%3E") no-repeat center / 24px;cursor: pointer;}
#top .topics_slider .prev {left: -15px;}
#top .topics_slider .next {right: -15px;transform: scaleX(-1);}
/* タブレット2枚・SP1枚。矢印は写真の高さの真ん中（写真は横長およそ 1：0.62） */
@media only screen and ( max-width : 1024px ) {
	#top .topics_slider .slide {flex-basis: 50%;}
	#top .topics_slider .arrow {top: calc(10px + (50vw - 45px) * .31);width: 40px;height: 40px;background-size: 20px;transform: translateY(-50%);}
	#top .topics_slider .prev {left: -10px;}
	#top .topics_slider .next {right: -10px;transform: translateY(-50%) scaleX(-1);}
}
@media only screen and ( max-width : 767px ) {
	#top .topics_slider .viewport {margin: 0;}
	#top .topics_slider .slide {flex-basis: 100%;padding: 10px 0;}
	#top .topics_slider .arrow {top: calc(10px + (100vw - 40px) * .31);width: 36px;height: 36px;background-size: 18px;}
}
/*-------------------------------------------------
  当社の強み
--------------------------------------------------*/
#top .top_strength {background-color: var(--teal);background-image: url("../images/front/top_company-strengs_bg.webp");}
#top .top_strength :is(.top_title, h3, .txt) {color: #fff;}
#top .top_strength .top_title .en::after {background: #fff;}
#top .top_strength h3 {margin-bottom: 30px;font-weight: 400;font-size: 34px;letter-spacing: .1em;line-height: 1.8;text-align: center;}
#top .top_strength .txt {max-width: 710px;margin-bottom: 40px;}
#top .top_strength .icons {display: flex;justify-content: center;max-width: 791px;margin-top: 0;padding: 0;list-style: none;}
#top .top_strength .icons li {flex: 1;}
#top .top_strength .icons img {display: block;width: 100%;height: auto;}
#top .top_strength .icons + .top_btn {margin-top: 40px;}
#top .top_strength h3 span {display: inline-block;} /* 「、」の後ろで改行させる */
@media only screen and ( max-width : 1024px ) {
	#top .top_strength h3 {font-size: 28px;}
}
@media only screen and ( max-width : 767px ) {
	#top .top_strength h3 {margin-bottom: 16px;font-size: 20px;line-height: 1.6;}
	#top .top_strength .txt {margin-bottom: 24px;}
	#top .top_strength .icons + .top_btn {margin-top: 28px;}
}
/*-------------------------------------------------
  技術領域と事業内容・会社概要・採用情報（背景写真）
--------------------------------------------------*/
#top .top_wecando {background-image: url("../images/front/top_wecando_bg.webp");}
#top .top_about {background-image: url("../images/front/top_about_bg.webp");}
#top .top_recruit {background-image: url("../images/front/top_recruit_Bg.webp");}
/* タブレット・SPは写真の人物や手に文字が重なるので、本文に白い下地を敷く */
@media only screen and ( max-width : 1024px ) {
	#top :is(.top_about, .top_recruit) .txt {padding: 20px 24px;background: rgba(255, 255, 255, .88);}
}
@media only screen and ( max-width : 767px ) {
	#top :is(.top_about, .top_recruit) .txt {padding: 16px 18px;}
}
/*-------------------------------------------------
  主要取引先・お問い合わせ（半分幅バナー）
--------------------------------------------------*/
#top .top_half {display: flex;padding: 0;list-style: none;}
#top .top_half li {flex: 1 1 50%;}
#top .top_half a {display: flex;flex-direction: column;justify-content: center;align-items: center;height: 300px;background: no-repeat center / cover;color: var(--text);}
#top .top_half .en {font-family: var(--font-jp);font-size: 32px;letter-spacing: .12em;line-height: 1.4;text-align: center;}
#top .top_half .en::after {content: '';display: block;width: 60px;height: 3px;margin: 20px auto;background: var(--teal);}
#top .top_half .ja {font-size: 24px;letter-spacing: .12em;line-height: 1.4;text-align: center;}
#top .top_half img {width: 28px;height: 29px;margin-top: 24px;}
@media only screen and ( max-width : 767px ) {
	#top .top_half {flex-direction: column;}
	#top .top_half a {height: 200px;}
	#top .top_half .en {font-size: 22px;}
	#top .top_half .en::after {margin: 10px auto;}
	#top .top_half .ja {font-size: 14px;}
	#top .top_half img {width: 20px;height: 25px;margin-top: 14px;object-fit: contain;}
}
/*-------------------------------------------------
  お知らせ・バナー・提携校
--------------------------------------------------*/
#top .top_news .more {max-width: 1140px;margin-bottom: 30px;text-align: right;}
#top .top_news .more a {display: inline-flex;align-items: center;gap: 6px;color: var(--teal);font-weight: 600;font-size: 14px;letter-spacing: .05em;line-height: 39px;}
#top .top_news .more a::after {content: '';width: 9px;height: 9px;margin-left: 4px;border-top: 3px solid currentColor;border-right: 3px solid currentColor;transform: rotate(45deg);}
#top .top_news .more a:hover {opacity: .7;}
#top .news_list {max-width: 900px;padding: 0;list-style: none;text-align: left;}
#top .news_list a {display: flex;align-items: center;padding: 10px;color: #000;}
#top .news_list time {flex: 0 0 122px;color: var(--teal);font-weight: 700;font-size: 15px;letter-spacing: 2px;line-height: 25px;}
#top .news_list .cat {flex: none;margin-right: 20px;padding: 5px 10px;background: #E6B600;color: #fff;font-size: 12px;line-height: 12px;}
#top .news_list .ttl {font-size: 14px;line-height: 20px;}
#top .news_list a:hover .ttl {color: var(--teal);}
#top .banners {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 10px;margin-top: 60px;padding: 0;list-style: none;}
#top .banners img {display: block;width: 100%;height: auto;}
#top .banners a:hover {opacity: .8;}
#top .partner {margin-top: 200px;text-align: center;}
#top .partner_title {display: flex;align-items: center;min-height: 57px;padding: 15px 0;color: var(--text);font-size: 15px;line-height: 27px;}
#top .partner_title::before, #top .partner_title::after {content: '';flex: 1;border-top: 1px solid var(--text);}
#top .partner_title span {margin: 0 10px;}
#top .partner a {display: inline-block;}
#top .partner img {display: block;width: 371px;max-width: 100%;height: auto;}
@media only screen and ( max-width : 1024px ) {
	#top .news_list li {border-bottom: 1px solid #E5E5E5;}
	#top .news_list a {padding: 14px 4px;}
	#top .partner {margin-top: 100px;}
}
@media only screen and ( max-width : 767px ) {
	#top .top_news .more {margin-bottom: 12px;}
	#top .news_list li:first-child {border-top: 1px solid #E5E5E5;}
	#top .news_list a {flex-wrap: wrap;gap: 6px 0;}
	#top .news_list time {flex-basis: auto;margin-right: 12px;font-size: 13px;}
	#top .news_list .ttl {flex-basis: 100%;line-height: 1.6;}
	#top .banners {grid-template-columns: minmax(0, 1fr);gap: 10px;margin-top: 32px;}
	#top .partner {margin-top: 48px;}
}