@charset "utf-8";
/*
Theme Name: Lightning Child
Template: lightning
Author:アートフレア株式会社
Version: 1.2
*/
/* 標準データ最終更新日：2025/04/14  */


/*
 * WEBフォントの読み込み（@import url('https://fonts～'); ）はHeader.phpで行う
*/


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 *  General　全体的な設定
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* :root設定、bodyへの上書き、カラー変数設定など */
:root{
--en:"Barlow", sans-serif;
--vk-line-height: 1.9em;
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 *  Common 汎用パーツ系
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* 繰り返しボタン・見出し、余白設計など 汎用パーツへの上書き */
.w1100{
	width:1100px;
	margin:0 auto;
}
/* Mediaとテキスト */
.wp-block-media-text:not(.has-media-on-the-right) .wp-block-media-text__content {
    padding-right: 0;
}
.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
    padding-left: 0;
}

@media (max-width: 768px) {
	.wp-block-media-text .wp-block-media-text__content {
		padding:0;
		margin-top:1em;
	}
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 *  Header ヘッダーまわり
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* ヘッダー固定 */
body  {
	overflow-x: unset !important;
    display: flex;
    flex-direction: column;
}
.device-pc #site-header {
    position: sticky;
    top: 0;
}
.logged-in.device-pc #site-header {
    top: 32px;
}

/* グローバルナビ */
.global-nav-list>li>a {
	transition: .3s;
	border-bottom: 3px solid transparent;
}
.global-nav-list>li>a:hover,
.global-nav-list>li.current-menu-item>a {
    color: var(--vk-color-custom-1);
    border-bottom: 3px solid var(--vk-color-custom-1);
}
#site-header-container{
	max-width:100%;
}
#mega-menu-wrap-global-nav{
	margin-left:auto;
}
.header-top-description{
	display:none !important;
}
.header-top {
    background-color: #fff;
    border-bottom: 0px solid #f5f5f5;
}
.header-top .container{
	max-width:100%;
	    justify-content: end;
}
.site-header{
	padding:20px;
}
.naviti{
	font-size:30px;
	font-weight:600;
	color:var(--vk-color-primary);
	font-family:var(--en)
}
#mega-menu-wrap-global-nav{
	margin-top:20px;
}
#mega-menu-wrap-global-nav #mega-menu-global-nav > li.mega-menu-item > a.mega-menu-link {
    line-height: 50px;
	height:50px;
}
.header-top nav {
    position: absolute;
    top: 7px;
    right: 20px;
    z-index: 2;
}
.menu-nested-pages-container{
	position:absolute;
	top:10px;
	right:40px;
}

.widget_media_image{
	padding:10px!important;
}

nav a[href="#"] {
    pointer-events: none;
}

/* ヘッダー周り　レスポンシブ　特例 */
@media (max-width: 992px) {
    #mega-menu-global-nav {
        display: none !important;
    }
}

#mega-menu-item-5378,#mega-menu-item-5379{
	display:none!important;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 *  Footer フッターまわり
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* フッターウィジェット、フッターロゴ、コピーライト */
.cta_btn a{
	font-size:20px !important;
	padding:50px 25px !important;
}
.cta_btn i{
	color:var(--vk-color-primary) !important;
	transition:0.3s;
}
.cta_btn a:hover{
	opacity:1!important;
	background-color:var(--vk-color-primary) !important;
	color:#fff !important;
}
.cta_btn a:hover i{
		color:#fff !important;
}
.cta_box hr.wp-block-separator{
	border-color:#707070!important;
}
.wp-block-separator{
	    border-top: 1px solid;
}

footer,footer p, footer a, footer li{
	font-size:15px!important;
}
footer a{
	text-decoration:none!important;
	transition:0.3s;
}
footer a:hover{
	opacity:0.6!important;
}
.footer-table,.footer-table td{
	padding:5px 0!important;
	border:none!important;
		font-size:15px!important;
	vertical-align: top;
}
.footer-table td:nth-of-type(1){
	width:84px;
}
.txt16{
	font-size:16px!important;
}

footer ul.is-style-vk-arrow-mark li::before, ol.is-style-vk-arrow-mark li::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    content: ""!important;
    left: -13px;
	background-color:var(--vk-color-primary) !important;
	width:8px;
	height:1px;
	top:12px;
}
footer ul{
	padding-left:14px!important;
}
footer li{
	margin-bottom:0 !important;
	margin-top:0 !important;
		font-size:14px!important;
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 *  Toppage トップページ
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* パーツごとにコメントアウトで注釈を入れてください。 */
.teaser_outer{
	position:relative;
}
.teaser_cp_box{
	position:absolute;
	top:30%;
	left:10%;
	z-index:3;
}
.teaser_cp_box h2{
	font-family:var(--en);
	font-size:82px;
	line-height:1.0;
	padding:5px !important;
	margin-bottom:40px;
}
.teaser_cp_box p{
	font-family:var(--en);
	font-size:32px;
	font-weight:600;
	display:inline-block;
	padding:5px !important;
	padding:5px !important;
}
/* .teaser 内のスライド移動は常に線形＝“止まって見えない” 
.teaser .swiper-wrapper {
  transition-timing-function: linear !important;
  will-change: transform;
}*/

/* スライドを中身のサイズに合わせる 
.teaser.vk_slider .swiper-slide {
  width: auto !important;
}*/

.about_ph{
	width:55%;
		position:relative;
	right:-6%;
}
.about_txt{
	position:relative;
	left:-5%;
	width:55%;
	padding:40px;
padding-right:0;
	top:60px;
}

/* 横スクロール化（親HTMLはそのまま .vk_timeline を使う） */
.home .vk_timeline{
  display: flex;
  flex-wrap: nowrap;          /* 横並び固定 */
  overflow-x: auto;           /* 横スクロール */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  gap: 40px;                  /* アイテム間隔（後述の線でも使用） */
  padding: 0 0 28px 0;        /* 下にレール分の余白 */
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: #bbb transparent;
  box-sizing: border-box;     /* はみ出し事故防止 */
}

/* VK標準の縦線がある場合は無効化 */
.home .vk_timeline_item_lineStyle-default::before{ content: none !important; }

/* アイテム幅（お好みで調整） */
.home .vk_timeline_item{
  flex: 0 0 220px;            /* 固定幅で横に流す */
  scroll-snap-align: start;
  position: relative;         /* 線（セグメント）を敷くための基準 */
  white-space: normal;
}

/* 最後の余白で右端切れ防止（スクロール終端が見切れない） */
.home .vk_timeline::after{
  content:"";
  flex: 0 0 16px;             /* 右の安全スペーサー */
}

/* ===== “切れ目のない横線” を CSSのみで実現 =====
   各アイテムの下に、次アイテムとの gap ぶんも含めた
   横線セグメントを敷くことで、連続して見せる。
*/

 .vk_timeline .vk_timeline_item_caption {
    color: #333;
	font-family:var(--en);
	font-weight:600;
}

.home .vk_timeline_item::after{
  content:"";
  position:absolute;
  left: 0;
  right: calc(-1 * var(--vk-tl-gap, 40px));  /* gapぶん先まで伸ばす */
  top: 10px;                                /* アイコン/本文に合わせて微調整 */
  height: 3px;
  background: #ddd;
  z-index: 0;
}
.home .vk_timeline .vk_timeline_item_style{
	z-index:2;
}
.home .vk_timeline .vk_timeline_item_caption {
    margin-bottom: .5em;
    color: #333;
    margin-top: 2rem;
	font-family:var(--en);
	font-weight:600;
}
.home .vk_timeline .vk_timeline_item{
	padding-left:5px;
}
.home .vk_timeline, body .container .is-layout-flow>.vk_timeline{
	margin-bottom:0;
	padding-bottom:0;
}
/* gap をカスタムプロパティ化しておくと運用が楽 */
.home .vk_timeline{ --vk-tl-gap: 40px; }

/* 最後のアイテムは“先まで伸ばさない”＝締める */
.home .vk_timeline_item:last-child::after{
  right: 0;
}

/* もしアイコンをレール上に“乗せる”なら前面に */
.home .vk_timeline_item_icon{
  position: relative;
  z-index: 1;
  transform: translateY(10px); /* レールの高さに合わせて微調整 */
}

/* モバイル微調整 */
@media (max-width: 768px){
  .home .vk_timeline{ --vk-tl-gap: 24px; gap: 24px; }
  .home .vk_timeline_item{ flex-basis: 200px; }
}

/* 万一どこかに 100vw があってはみ出す場合は打ち消す */
[class*="container"], .vk_timeline, .vk_timeline *{
  box-sizing: border-box;
}

/* 年表カルーセル */
.home_timeline_item_caption {
    margin-bottom: .5em;
    color: #333;
    margin-top: 2rem;
	font-family:var(--en);
	font-weight:600;
}
.home_timeline_item_style::after {
    content: "";
    position: absolute;
    left: 7%;
    right: calc(-1 * var(--vk-tl-gap, 40px));
    top: 5px;
    height: 3px;
    background: #ddd;
    z-index: -1;
}

.top_recruit{
	position:relative;
	top:-340px;
	margin-bottom:-340px;
}
.vk-cols--fitbnrs .vk_button .vk_button_link_txt{
	font-size:20px;
}
.top_bn .wp-block-cover__background.has-background-dim.has-background-dim-30{
	transition:0.3s;
}
.top_bn .wp-block-cover:hover .wp-block-cover__background.has-background-dim.has-background-dim-30{
	opacity:0;
}
.top_bn .vk_button_link_caption{
	opacity:relative;
}
.top_bn .vk_button_link_caption::after{
	 content: '';/*何も入れない*/
  display: inline-block;
  width: 28px;/*画像の幅*/
  height: 28px;/*画像の高さ*/
  background-image: url(../../../wp-content/uploads/arrow.png);
  background-size: contain;
	background-repeat:no-repeat;
  vertical-align: middle;
	position:absolute;
	left:50%;
	bottom:30px;
	transform: translateX(-50%)
}
.top_bn .vk_button-color-custom a:hover{
	opacity:1 !important;
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 *  Pageheader, Breadcrumb 下層ページヘッダー・パンくずリスト
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* 下層ページのページヘッダー、パンクズ設定 */



/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 *  Page 下層ページ
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* ページごと、パーツごとにコメントアウトで注釈を入れてください。 */

/* 会社概要 */
.box_phil{
	width:85%;
	margin:auto;
}
.box_phil .wp-block-columns{
border-bottom:solid 1px #ccc;
	padding-bottom:35px;
}

.history{
width:60% ;
margin:auto;}
.history h4{
	font-size:1.0rem;
	margin-bottom:5px;
	padding-top:4px;
	padding-right:15px;
}

.history  .vk_timeline_item_caption{
	margin-bottom:10px !important;
	font-size:1.5rem;
	margin-top:-5px;
	position:relative;
	top:-5px;
}

/* 製品紹介 */
.tokutyou_ic{
	width:130px;
	line-height:130px;
	text-align:center;
	padding:0 !important;
	font-size:1.5rem;
}
.tokutyou_box{
	padding-left:30px;
	width:calc(100% - 140px)
}

.tokutyou_outer{
/* 	width:75%; */
	margin:auto;
}
.flow_box{
	background-color:#fff;
	padding:50px 50px 0;
}
.is-style-vk_faq-bgfill-square .vk_faq_title:before{
	background-color:var(--vk-color-primary);
}
.vk_faq .vk_faq_content:before{
	background-color:#333;
}

.box_data{
	background-color:#F5F4F2;
	padding:25px;
	height:100%;
}
.box_data2{
	background-color:#fff;
	padding:45px 50px;
	height:100%;
}
.box_data img{
	width:150px;
	height:auto;
	margin:auto;
}
.box_data2 img{
	width:150px;
	height:auto;
	margin:auto;
}
.box_data_grf img{
	width:100%;
}

/* 100年の歩み */
.wp-block-image figcaption {
    font-size: calc(1.2rem);
}

/* 採用情報 */
/* 	円グラフ自動生成 */
:root {
	--pie1: #ed724c;
	--pie2: #efa81c;
	--pie3: #f3e03b;
	--pie4: #94c45d;
	--pie5: #4fa7cf;
	--pie6: #6672b2;
	--pie8: #dd3f3b;
}
.piechart_legend p::before {content: '■ ';}
.piechart_legend p:nth-child(1)::before { color:var(--pie1) }
.piechart_legend p:nth-child(2)::before { color:var(--pie2) }
.piechart_legend p:nth-child(3)::before { color:var(--pie3) }
.piechart_legend p:nth-child(4)::before { color:var(--pie4) }
.piechart_legend p:nth-child(5)::before { color:var(--pie5) }
.piechart_legend p:nth-child(6)::before { color:var(--pie6) }
.piechart_legend p:nth-child(7)::before { color:var(--pie7) }
.piechart_legend p:nth-child(8)::before { color:var(--pie8) }

.piechart {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.piechart_circle {
    aspect-ratio: 1;
    width: 120px;
    border-radius: 50%;
}
.piechart_legend p {
    line-height: 1.7;
	margin: 0;
}

.wrap2{
    container-type: inline-size;
}
.piechart_legend {
    display: block;
  font-size:14px;
}

@container (min-width: 250px) {
.piechart_legend {
    display: grid;
    grid-template: auto / 1fr 1fr;
	gap: 0 1em;
}
}


/* お問い合わせ */
.tel a{
	font-size:44px;
	font-weight:600;
	font-family:var(--en);
	color:#333;
}
.tel i{
		font-size:34px;
	position:relative;
	top:3px;
	color:var(--vk-color-primary);
}
.tel .vk_button_link_subCaption{
	font-size:16px !important;
	color:#333 !important;
}
.smf-item__description{
	display:none;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 *  Archive　ブログ一覧ページ
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* パーツごとにコメントアウトで注釈を入れてください。 */
.postListText_title,.postListText_date{
	font-size:18px;
}
.postListText_title a{
	text-decoration:none;
}
.postListText_singleTermLabel{
	min-width:120px;
}
.postListText_singleTermLabel a{
	padding:5px;
	
}

.is-style-under-hd strong{
font-size:50px;
font-family:var(--en);
	margin-left:7px;
	position:relative;
	top:2px;
}

.sub-section-title.widget-title{
	border-left:solid 4px var(--vk-color-primary) !important;
	padding-left:6px;
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 *  Single　ブログ詳細ページ
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* パーツごとにコメントアウトで注釈を入れてください。 */



/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 *  その他・追加機能
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
/* パーツごとにコメントアウトで注釈を入れてください。 */