/* =========== WordPress子テーマ用基本設定 ここから =========== */
/*
Theme Name:Lightning-child
Theme URI:
Description:WordPressテーマ「Lightning」の自作子テーマです。
Template:lightning
Author:N
Author URI:https://careertest.tracl.cloud/
Version:0.0.8
*/
/* =========== WordPress子テーマ用基本設定 ここまで =========== */

/* 
＜index＞
=基本設定=
@文字
(色、太さ、フォント指定)
@背景色
@線
@余白
@コンテンツの配置
@背景デザイン
@ボタン
@テーブル
@リスト
@タイトル

=場所別=
@ヘッダー
@フッター
@共通お問い合わせコンテンツ
@TOP
@フォーム

==CSSでの動き=
@スライダー


=jsの設定=
@動き
*/



/* =========== CSS上書き設定 ここから =========== */

/* ーーーーーーー基本設定ーーーーーーー */


/* ーーーーーーー文字ーーーーーーー */

/* 黒/オレンジ/水色/紺 */
.cl_bk{color:#000;}
.cl_orange{color:#ff8b34;}
.cl_blue{color: #209DE6;}
.cl_kon{color: #03426D;}

/* 太字 */
.font_bold{font-weight: 700;}

/* サイズ指定 */
.font_s60{font-size: 3.8rem;}
.font_s44{font-size: 2rem;}
.font_s32{font-size: 2rem;}
.font_s30{font-size: 1.9rem;}
.font_s28{font-size: 1.7rem;}
.font_s24{font-size: 1.5rem;}
.font_s20{font-size: 1.3rem;}
.font_s18{font-size: 1.1rem;}
.font_s16{font-size: 1rem;}
.font_s14{font-size: 0.9rem;}


/* ===フォント=== */
/* google font読み込み */
@import url('https://fonts.googleapis.com/css2?family=Cabin:wght@400;700&family=Shippori+Mincho:wght@400;700&display=swap');

/* 01.しっぽり明朝 */
.shippMin_400{
	font-family: 'Shippori Mincho', serif;
	font-weight: 400;
}
.shippMin_700{
	font-family: 'Shippori Mincho', serif;
	font-weight: 700;
}z

/* 02.cabin */
.cabin_400{
	font-family: 'Cabin', sans-serif;
	font-weight: 400;
}
.cabin_700{
	font-family: 'Cabin', sans-serif;
	font-weight: 700;
}


/* === 装飾 === */
/* テキストに下線 */
.txt_uline{
	text-decoration: underline;
}
/* 破線の下線 */
.border_bo{
	border-bottom: 1px dashed #bebebe;	
}
/* 黄色マーカー */
.yellowLine{
	background: #ffc107;
	font-weight: 700;
}

/* ーーーーーーー余白ーーーーーーー */

/* パディング：上 */
.pa_to10{padding-top: 10px;}

/* パディング：下 */
.pa_bo5{padding-bottom: 5px;}
.pa_bo10{padding-bottom: 10px;}
.pa_bo15{padding-bottom: 15px;}
.pa_bo18{padding-bottom: 18px;}

/* パディング：上下 */
.pa_20{padding: 20px 0;}

/* マージン：上 */
.ma_to10{margin-top: 10px;}
.ma_to20{margin-top: 20px;}
.ma_to30{margin-top: 30px;}
.ma_to40{margin-top: 40px;}
.ma_to50{margin-top: 50px;}
.ma_to60{margin-top: 60px;}
.ma_to70{margin-top: 70px;}

/* マージン：下 */
.ma_bo10{margin-bottom: 10px;}
.ma_bo20{margin-bottom: 20px;}
.ma_bo30{margin-bottom: 30px;}
.ma_bo40{margin-bottom: 40px;}
.ma_bo50{margin-bottom: 50px;}
.ma_bo60{margin-bottom: 60px;}
.ma_bo70{margin-bottom: 70px;}


/* ーーーーーーーコンテンツの配置ーーーーーーー */

/* コンテンツの中央配置 */
.conCenter{
	display: flex;
	justify-content: center;
	align-items: center;
}

/* テキストの中央配置 */
.txt_c{
	text-align: center;
}

/* スマホ時 */
@media (max-width:576px) {
	/* 非表示 */
	.sp_none{
		display: none;
	}
	/* テキストの中央配置 */
	.txt_center{
		text-align: center;
	}
	/* コンテンツの中央配置 */
	.spConCenter{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	/* コンテンツ幅90％ */
	.sp_w90{
		max-width: 90%;
		margin: 0 auto;
	}
	/* オブジェクトフィット */
	.sp_bg_cover{
		background-size: cover;
	}
}


/* ーーーーーーー背景ーーーーーーー */

/* コンテンツの角丸 */
.bk_radius10 {
	border-radius: 10px;
}

/* 線のみのコンテンツ */
/* グレー */
.borderCon{
	border: solid 1px #bebebe;
}

/* 太めの青線 */
.borderCon_blue{
	border: solid 2px #3597d9;
}


/* ーーーーーーーボタンーーーーーーー */

/* ボタンの角丸 */
.btn_radius50 a {
	padding: 12px 3rem;
	border-radius: 50px;
}

/* TOPへ戻るボタンの変更 */
.page_top_btn {
	right: 2.5%;
	bottom: 10%;
	width: 60px;
    height: 58px;
	background-color: #209DE6;
	border: solid 1px #efefef;
	border-radius: 50px;
	box-shadow: none;
}

/* 水色ボタン */
a.btn_kon {
	display: inline-block;
	position: relative;
	max-width: 320px;
	width: 100%;
	padding: 1rem 2.8rem;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	background-color: #209DE6;
	border-radius: 5px;
	font-size: 1.2rem;
	font-weight: bold;
	color: #fff;
	line-height: 1.5;
	text-align: center;
	vertical-align: middle;
}
a.btn_kon:before {
	position: absolute;
	top: calc(50% - .7rem);
	right: 1rem;
	content: '\f138';
	margin: 0;
	padding: 0;
	font-family: 'Font Awesome 5 Free';
	font-size: 1.4rem;
	line-height: 1;
}
a.btn_kon:hover {
	background-color: #1e92d6;
	text-decoration: none;
}  
/* マイクロコピー部分 */
.btn_kon_copy{
	display: block;
	position: relative;
	margin-bottom: .2em;
	font-size: .9rem;
}
.btn_kon_copy:before {
	margin-right: .4rem;
	content: '＼';
}
.btn_kon_copy:after {
	margin-left: .4rem;
	content: '／';
}
/* /水色ボタン */

/* オレンジ色ボタン */
a.btn_ora {
	display: inline-block;
	position: relative;
	max-width: 320px;
	width: 100%;
	padding: 1rem 2.8rem;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	background-color: #fcb900;
	border-radius: 5px;
	font-size: 1.2rem;
	font-weight: bold;
	color: #fff;
	line-height: 1.5;
	text-align: center;
	vertical-align: middle;
}
a.btn_ora:before {
	position: absolute;
	top: calc(50% - .7rem);
	right: 1rem;
	content: '\f138';
	margin: 0;
	padding: 0;
	font-family: 'Font Awesome 5 Free';
	font-size: 1.4rem;
	line-height: 1;
}
a.btn_ora:hover {
	background-color: #ff6200;
	text-decoration: none;
}  
/* マイクロコピー部分 */
.btn_ora_copy{
	display: block;
	position: relative;
	margin-bottom: .2em;
	font-size: .9rem;
}
.btn_ora_copy:before {
	margin-right: .4rem;
	content: '＼';
}
.btn_ora_copy:after {
	margin-left: .4rem;
	content: '／';
}
/* /オレンジ色ボタン */

/* お申し込みボタン */
a.btn_infos {
	display: inline-block;
	position: relative;
	max-width: 320px;
	width: 100%;
	padding: 1rem 2.8rem;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	background-color: #ff6200;
	border-radius: 50px;
	font-size: 1.3rem;
	font-weight: bold;
	color: #fff;
	line-height: 1.5;
	text-align: center;
	vertical-align: middle;
}
a.btn_infos:before {
	position: absolute;
	top: calc(50% - .7rem);
	right: 1rem;
	content: '\f138';
	margin: 0;
	padding: 0;
	font-family: 'Font Awesome 5 Free';
	font-size: 1.4rem;
	line-height: 1;
}
a.btn_infos:hover {
	background-color: #ff8c00;
	text-decoration: none;
}  
/* マイクロコピー部分 */
.btn_infos_copy{
	display: block;
	position: relative;
	margin-bottom: .2em;
	font-size: .9rem;
}
.btn_infos_copy:before {
	margin-right: .4rem;
	content: '＼';
}
.btn_infos_copy:after {
	margin-left: .4rem;
	content: '／';
}
/* /お申し込みボタン */


/* ===============@ヘッダー=============== */
/* ヘッダーメニュー */
#site-header,
#site-header-container,
#global-nav,
ul.menu.vk-menu-acc.global-nav-list.nav{
	height: 70px;
}
.site-header-logo{
	padding-top: .5rem;
}
.site-header-logo a{
	display: inline-block;
	width: 78px;
}
.site-header-logo a span img{
	width: 100%;
}

/* ヘッダーメニューのお申し込みボタン */
#menu-item-318 {
	margin-left: 2px;
}
#menu-item-318 a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	min-width: 125px;
	padding: 0;
	background-color: #FF731C;
	color: #fff;
}
#menu-item-318 a:hover{
	background-color: #ff6200;
}

/* ハンバーガーメニュー：形の変更 */
#vk-mobile-nav-menu-btn {
	border: none;
}

/* 下層ページ：ヘッダーの変更 */
.page-header {
	position: relative;
    background: url(https://careertest.tracl.cloud/wp-content/uploads/2022/10/unpagettl_bg-scaled.jpg) no-repeat top 40% center;
    background-size: cover;
	color: #03426D;
	text-align: left;
}

/* 下層ページ：h1タイトルの上部余白の調整 */
.page-header_pageTitle,
h1.page-header_pageTitle:first-child {
	margin-top: 1.4em;
	margin-bottom: 1em;
	font-size: 2.3rem;
}


/* ===============@フッター=============== */

/* ©️を消す */
.container.site-footer-copyright{
	display: none;
}
.site-footer{
	background-color: #02243B;
	border-top: none;
}

.footerMain{
	width: 100%;
	background-color: #02243B;
}

.footerLogo a{
	display: block;
	width: 100px;
	margin: 0 auto;
}
.footerLogo a img{
	width: 100%;
}

ul.footerMainNavi{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 20px;
	padding-left: 0;
}
.footerMainNavi li{
	margin: 0 0 0 20px;
}
.footerMainNavi li a{
	margin: 0;
	color: #fff;
	text-decoration: none;
}
.footerMainNavi li:first-child{
	margin-left: 0;
}
.footerMainNavi::marker{
	display: none;
}

.footerMainCopylight{
	display: flex;
	justify-content: center;
	color: #fff;
}




/*==================================================
　　共通お問い合わせコンテンツ
==================================================*/
.contactCon{
	padding-bottom: 30px;
}
h2.contactCon_ttl{
	margin-bottom: 30px;
	padding-top: 0;
	padding-bottom: 0;
	text-align: center;
	line-height: 1.5;
	font-size: 1.7rem;
	font-weight: bold;
	color: #03426D;
	border: none;
}
.contactCon_txt{
	text-align: center;
	line-height: 1.5;
}
@media (max-width:1450px) {
	.contactCon{
		padding-top: 0;
		padding-bottom: 40px;
	}
	.contactCon_txt{
		background-color: rgba(255,255,255,0.8);
	}
}


/*==================================================
　　TOP
==================================================*/
.top_ttl_28{
	margin-bottom: 40px;
	line-height: 1.5;
	font-size: 1.7rem;
	font-weight: bold;
}
@media (max-width:768px) {
	.top_ttl_28{
		font-size: 1.3rem;
	}
}


/* ------------悩みの吹き出し */
.balloonCon{
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
}
.balloonCon_inner{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
}
.balloonItem {
	position: relative;
	width: 30%;
	min-height: 12em;
	/* height: 10em; */
	margin: 2em 0 2em 40px;
	border-radius: 30px;
	mix-blend-mode:multiply;
	background:radial-gradient(rgba(0, 42, 83, 0.75) 0%, rgba(0, 42, 83, 0.75) 100%),url("https://careertest.tracl.cloud/wp-content/uploads/2022/10/top_problem_01.jpg")no-repeat center/cover;
}
.balloonItem:before {  
	content: "";
	position: absolute;
	left: -28px;
	bottom: 0;
	width: 13px;
	height: 12px;
	background: #03426D;
	border-radius: 50%;
}
.balloonItem:after {
	content: "";
	position: absolute;
	left: -10px;
	bottom: 3px;
	width: 22px;
	height: 20px;
	background: #03426D;
	border-radius: 50%;
}
.balloonItem_text {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 0 -50% 0 0;
	padding: 20px;
	transform: translate(-50%, -50%);
	color:#fff;
}

/* スマホ時指定 */
@media (max-width:767px) {
	.balloonCon_inner{
		display: block;
	}
	.balloonItem{
		width: 90%;
		margin: 0 auto;
	}
	.balloonItem:not(:first-child){
		margin-top: 20px;
	}
	.balloonItem:before,.balloonItem:after {  
		display: none;
	}
}

/* 個別指定：背景画像だけ変える */
.prob_gb02{
	background: radial-gradient(rgba(0, 42, 83, 0.75) 0%, rgba(0, 42, 83, 0.75) 100%),url("https://careertest.tracl.cloud/wp-content/uploads/2022/10/top_problem_02.jpg") no-repeat center/cover;
}
.prob_gb03{
	background: radial-gradient(rgba(0, 42, 83, 0.75) 0%, rgba(0, 42, 83, 0.75) 100%),url("https://careertest.tracl.cloud/wp-content/uploads/2022/10/top_problem_03.jpg") no-repeat center/cover;
}





/* ------------POINT */
.topPointCon{
	display: flex;
	justify-content: center;
	margin-bottom: 70px;
}

.topPointItem{
	width: 30%;
	padding: 20px 15px;
	border: solid 1px #bebebe;
}
.topPointItem:not(first-child){
	margin-left: 45px;
}

.topPointItem_img{
	width: 100%;
	margin: 0 auto;
}
.topPointItem_img img{
	width: 100%;
}

.topPointItem_ttlArea{
	position: relative;
	top: -20px;
	margin-bottom: 0;
	padding-bottom: 15px;
	border-bottom: solid 1px #bebebe;
}
.topPointItem_ttlArea::after{
	border-bottom: none;
}
.topPointItem_ttlArea_sub{
	display: inline-block;
	padding: 0 5px 5px;
	background-color: #fff;
	font-size: 1.3rem;
	color: #ff6200;
}
.topPointItem_ttlArea_sub_nmb{
	font-size: 1.9rem;
}
.topPointItem_ttlArea_main{
	display: flex;
	justify-content: center;
	text-align: center;
	line-height: 1.5;
	font-size: 1.3rem;
	font-weight: 700;
	color: #007DC6;
}

.topPointItem_capArea{
	margin-bottom: 0;
}

@media (max-width:767px) {
	.topPointCon{
		display: block;
	}
	.topPointItem{
		width: 100%;
		margin: 0 auto;
	}
	.topPointItem{
		margin-top: 20px;
		margin-left: 0;
	}
	.topPointItem:not(first-child){
		margin-top: 20px;
		margin-left: 0;
	}
}

/*==================================================
　　フォーム
==================================================*/
/* 入力画面 */
.formEntryBox_wrap{
	max-width: 556px;
	width: 100%;
	margin: 0 auto 30px;
	padding-top: 20px;
	padding-bottom: 20px;
	background-color: #fffbf4;
}
.formEntryBox_wrap br{
	display: none;
}

@media (max-width:768px) {
	.formEntryBox_wrap{
		padding-right: 10px;
		padding-left: 10px;
	}
}

.formEntryBox{
	display: block;
    max-width: 500px;
    width:100%;
    margin: 0 auto;
	padding: 10px 15px;
}

.formEntryBox_label{
	display: inline-block;
	margin-bottom: 3px;
}
.formEntryBox_label_name{
	line-height: 1.5;
	font-weight: 700;
}
.formEntryBox_label_req{
	display: inline-block;
	margin-left: 6px;
	padding: 1px 5px;
	background-color: #e42702;
	border-radius: 5px;
	text-align: center;
	vertical-align: text-bottom;
	line-height: 1.5;
	font-size: 12px;
	color: #fff;
}

/* 確認画面 */
.formConfLabel_wrap{
	max-width: 556px;
	width: 100%;
	margin: 0 auto 30px;
	padding-top: 20px;
	padding-bottom: 20px;
	background-color: #fffbf4;
}
@media (max-width:768px) {
	.formConfLabel_wrap{
		padding-right: 20px;
		padding-left: 20px;
	}
}
.formConfLabel_wrap br{
	display: none;
}
.formConfLabel{
	display: block;
    max-width: 500px;
    width:100%;
    margin: 0 auto 14px;
	padding-bottom: 5px;
	border-bottom: 1px dashed rgb(200, 200, 200);
}
.formConfLabel_name{
	display: inline-block;
	color: #2c79ad;
}
.formConfLabel_item{
	display: inline-block;
}

@media (max-width:768px) {
	.formConfLabel_name,
	.formConfLabel_item{
		display: block;
	}
}

/* ボタン */
.formBtn{
	display: flex;
	justify-content: center;
	margin-bottom: 40px;
}
.formBtn input.wpcf7-previous{
    width: 80px;
    border: none;
    border-radius: 5px;
}    
.formBtn input.wpcf7-submit{
    width: 180px;
	background-color: #FF731C;
    border: none;
}

/* ローディングアニメ非表示 */
span.wpcf7-spinner{
	display: none;
}


/*==================================================
	CSSでの動き
==================================================*/
/* ------ スライダー ------ */
.slider1 {
	display: flex;
	margin: 40px calc(50% - 50vw) 70px;
	padding: 0;
	width: 100vw;
	height:auto;
	overflow: hidden;
  }
  .slider1 ul{
	  display:flex;
	  padding: 0;
	  margin:0;
	  background-color: #fafafa;
  }
  .slider1 li{
	  width:150px;
	  list-style: none;
  }
  .slider1 ul:first-child {
	animation: slide1 150s -75s linear infinite;
  }
  
  .slider1 ul:last-child {
	animation: slide2 150s linear infinite;
  }
  @keyframes slide1 {
	0% {
	  transform: translateX(100%);
	}
	to {
	  transform: translateX(-100%);
	}
  }
  
  @keyframes slide2 {
	0% {
	  transform: translateX(0);
	}
	to {
	  transform: translateX(-200%);
	}
  }

/* スマホ時 */
@media (max-width:768px) {
	.slider1 li{
		width:70px;
	}
}


/*==================================================
	動き
==================================================*/
/* ------ コンテンツがふわっと出てくる ------ */
/* 下から */
.fadeInUpTrigger{
	opacity: 0;
}

/* =========== CSS上書き設定 ここまで =========== */