/*
Theme Name: Lightning Child
Template: lightning
*/

body {
	font-family: 'Noto Sans JP', sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	overflow-y: scroll;  /* 常に縦スクロールバーを表示する */
}
.site-body {
	padding-top: 30px;
	padding-bottom: 0 !important;
}

 /* --- 画像の高さを自動で調整してアスペクト比を保つ --- */
img {
  width: auto;
  height: auto;
}

/* --- ボタンホバー時の設定を上書き --- */
a.vk_button_link.btn:hover {
  	box-shadow: none;
}
a.wp-block-button__link:hover {
	opacity: 0.8;
	filter: none;
}

/* --- ヘッダー --- */
#site-header {
	font-weight: 100;
	background-color: #eee
}

/* --- ロゴ --- */
.site-header-logo img {
	margin:10px 0;
}

/* --- ヘッダー --- */
.site-header-logo {
	display: flex;
	padding-top: 0.5em;
}
/* --- ヘッダー「川口駅 3分 託児付き美容室　Soleil petit」 --- */
.site-header-logo #soleilpetit-header-catchcopy {
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
	font-size: 20px;
	letter-spacing: 1.8px;
    color: #333;
    margin-left: 30px;
    align-content: center;
}

/* --- 「今すぐ応募」ボタン --- */
#menu-applynow {
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
	background-color: #dfc0c9;
	border: 1px solid #fff;
	border-radius: 5px;
	padding: 10px 25px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
#menu-applynow:hover {
	transform: scale(1.03);
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.12);
}
#menu-applynow .global-nav-name {
	color: #fff;
	font-size: 20px;
}
.header_scrolled #menu-applynow {
  display: none;
}
.global-nav-list>li:before {
	border-bottom: none !important;
}

/* --- ハンバーガーメニュー --- */
.mobmenu-content li:hover,
.mobmenu-content li > a:hover {
	background-color: var(--wp--preset--color--vk-color-primary) !important;
}

/* --- 非表示 --- 
 * 固定ページのヘッダ 
 * パンくずリスト
 * --- */
.page-header,
.breadcrumb,
.site-footer-copyright {
  display:none;
}
.header_scrolled .site-header {
  position: static !important; /* --- 固定ページのヘッダを display:noneにした影響（画面のガタつき）を回避 --- */
}

/* --- 「子供を預けて仕事できます　美容師(スタイリスト)募集」「ママ美容師さんが　安心して働ける環境　ここにあります。」 --- */
.soleilpetit-h1-group {
	font-family: "Noto Sans JP", sans-serif;
	/* --- 縦横中央 --- */
    padding-top: 1em;
    padding-bottom: 1em;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media screen and (min-width: 821px) {
	.soleilpetit-h1-group h1 {	
		font-size: 38px;	
		font-weight: 600;
		letter-spacing: 4px;
		line-height: 1.2em;
		padding-top: 40px;
	}
	.soleilpetit-h1-group p {
		font-size: 24px;
		font-weight: 500;
		line-height: 2;
		letter-spacing: 3.5px;
	}
}
@media screen and (max-width: 768px) { /* --- スマホ & iPadmini 用 --- */
	.soleilpetit-h1-group h1 {
		font-size: 21px;
        letter-spacing: 2px;
        line-height: 1.1em;
        padding-top: 10px;
    }
	.soleilpetit-h1-group p {
		font-size: 20px;
        font-weight: 500;
        letter-spacing: 2px;
        line-height: 2.1em;
        padding-top: 20px;
        padding-bottom: 45px;
	}
}
@media screen and (min-width: 769px) and (max-width: 820px) { /* iPad縦用 */
	.soleilpetit-h1-group h1 {
		font-size: 28px;
        letter-spacing: 4px;
        line-height: 1.5;
        padding-top: 20px;
    }
	.soleilpetit-h1-group p {
        font-size: 20px;
        font-weight: 500;
        letter-spacing: 3.2px;
        line-height: 1.7;
        padding-bottom: 35px;
	}
}

/* --- ナビ --- */
.soleilpetit-nav-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(3, 1fr);
}
.soleilpetit-nav-grid > div {
	width: 100%;
}
.soleilpetit-nav-grid a.vk_button_link.btn {
  	font-family: "BIZ UDPGothic", sans-serif; /* --- 400 or 700 --- */
	font-weight: 400;
	font-size: 18px;
	height: 80px;
    text-align: center;
    align-content: center; 
    border-radius: 10px;
	border: none;
}
.soleilpetit-nav-grid br {
	display: none;
}
@media screen and (max-width: 768px) { /* --- スマホ & iPadmini 用 --- */
	.soleilpetit-nav-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.soleilpetit-nav-grid br {
		display: block;
	}
	.soleilpetit-nav-grid a.vk_button_link.btn {
		height: 100px;
		font-size: 16px;
	}
}

/* --- 導入文 --- */
div.soleilpetit-introduction-section {
	font-family: "Noto Sans JP", sans-serif;
	max-width: 900px;
	margin: 0 auto;
}
div.soleilpetit-introduction-section p {
	font-weight: 400;
	font-size: 18px;
	color: #333;
	letter-spacing: 0.04em;	
	line-height: 2;
}
@media screen and (max-width: 768px) { /* --- スマホ & iPadmini 用 --- */
	div.soleilpetit-introduction-section p {
		font-size: 16px;
    	line-height: 1.5;
	}
}

/* --- 概要カラム --- */
h2#flexible {
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.8em;
}
div.soleilpetit-about-column {
	font-family: "Noto Sans JP", sans-serif;
    justify-content: space-between;
}
div.soleilpetit-about-column h3 {
	font-weight: 700;
	font-size: 23px;
	letter-spacing: 0.01em;
}
div.soleilpetit-about-column p {
	font-weight: 400;
	font-size: 16px;
    line-height: 1.8;
}
div.soleilpetit-about-column li {
	font-weight: 400;
	font-size: 15px;
	letter-spacing: 0.05em;
}
div.soleilpetit-about-column ul li:first-child {
	margin-top : 0;
}
div.soleilpetit-about-column ul li:last-child {
	margin-bottom : 0;
}
@media screen and (max-width: 768px) { /* --- スマホ & iPadmini 用 --- */
	div.soleilpetit-about-column  > div {
		padding: 0 5px 0 5px;
	}
}

/* --- インタビューカラム --- */
h2#interview {
  	font-family: "BIZ UDPGothic", sans-serif; /* --- 400 or 700 --- */
	font-weight: 700;
	font-size: 30px;
	letter-spacing: 0.2em;
	line-height: 1.8em;
}
div.soleilpetit-interview-column {
  	font-family: "BIZ UDPGothic", sans-serif; /* --- 400 or 700 --- */
	width: 80%;
	min-width: 720px;
	gap: 0;
}
div.soleilpetit-interview-column h3 {
	font-weight: 700;
	font-size: 20px;
	letter-spacing: 0.1em;
	margin-bottom: 0;
}
div.soleilpetit-interview-column p {
	font-weight: 400;
	font-size: 16px;
	line-height: 1.8em;
	letter-spacing: 0.07em;
	padding: 0 40px;
}
div.soleilpetit-interview-column img {
	padding: 0 20px 50px 20px;
}
@media screen and (max-width: 768px) { /* --- スマホ & iPadmini 用 --- */
	h2#interview {
		font-weight: 700;
		font-size: 20px;
	}
	div.soleilpetit-interview-column {
		width: 90%;
		min-width: auto;
	}
	div.soleilpetit-interview-column h3 {
		font-size: 18px;
	}
	div.soleilpetit-interview-column p {
		font-size: 15px;	
	}
	div.soleilpetit-interview-column img {
		padding: 0px 20% 10px 20%;
	}
}
div.soleilpetit-interview-column figure {
	max-width: 350px;
}

/* --- 業務委託美容師 スタッフ募集 --- */
h2#income {
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 600;
	font-size: 32px;
	letter-spacing: 0.05em;
}
div.soleilpetit-recruit-section > div {
	width: 95%;
	max-width: 800px;
	margin: 0 auto;
}
/* --- 収入 --- */
div.soleilpetit-income {
	font-family: "Noto Sans JP", sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
	padding-bottom: 80px;
}
@media screen and (max-width: 768px) { /* --- スマホ & iPadmini 用 --- */
	div.soleilpetit-income {
		padding-bottom: 20px;
	}
}
div.soleilpetit-income h3 {
	font-weight: 500;
	font-size: 24px;
}
/* --- 収入詳細 --- */
div.soleilpetit-income-detail {
	gap: 0;
	flex-wrap: nowrap;
}
div.soleilpetit-income-detail > div {
	gap: 0;
	flex-wrap: wrap;
}
div.soleilpetit-income-detail p {
	font-size: 16px;
	white-space: nowrap;
	margin-bottom: 0 !important;	
}
div.soleilpetit-income-detail li {
	font-size: 15px;
}
div.soleilpetit-income-detail > div > p { /* --- リストの擬似クラス(具体的な金額) --- */
	padding-left : 16px;
}
div.soleilpetit-income-detail > p::before { /* --- リストの擬似クラス(先頭の黒丸) --- */
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  background-color: black;
  border-radius: 50%;
  margin-left: 1em;
  margin-right: 0.5em;
  vertical-align: 0.1em
}
/* --- 求める人物像 --- */
div.soleilpetit-want li {
	font-size: 16px;
}
@media screen and (max-width: 768px) { /* --- スマホ & iPadmini 用 --- */
	div.soleilpetit-want li {
	font-size: 15px;
	}
}

/* --- メインイメージのトリミング --- */
figure.soleilpetit-main-image {
	justify-content: center;
	height: 100%;
	max-height: 450px;
	max-width: 400px !important;
	overflow: hidden;
} 
figure.soleilpetit-main-image img {
	height: 100%;
	max-height: 450px;
	object-fit: cover;
	object-position: center;
	display: block;
} 
@media screen and (max-width: 768px) { /* --- スマホ & iPadmini 用 --- */
	figure.soleilpetit-main-image > figure {
		justify-content: center;
		height: 350px;
		max-width: 400px !important;
		overflow: hidden;
	} 
	figure.soleilpetit-main-image > figure img {
		height: 350px;
		object-fit: cover;
		object-position: center;
		display: block;
	} 
}
@media screen and (min-width: 769px) and (max-width: 820px) { /* iPad縦用 */
	figure.soleilpetit-main-image > figure {
		justify-content: center;
		height: 100%;
		max-width: 350px !important;
		overflow: hidden;
	} 
	figure.soleilpetit-main-image > figure img {
		height: 100%;
		object-fit: cover;
		object-position: center;
		display: block;
	} 
}