@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/* reCAPTCHAバッジを非表示に */
.grecaptcha-badge { visibility: hidden; }

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/************************************
** 固定ページのタイトルを非表示にする
************************************/
article.page .entry-title {
	display: none;
}

/************************************
** 固定ページのページの日付を非表示にする
************************************/
article.page .date-tags {
	display: none;
}





/* 【共通】配色 */
:root {
  --avj_color_base: #FFFFFF;
  --avj_color_black: #081723;
	--avj_color_main: #256EA9;
	--avj_color_accent: #DA5F4D;
}

/* 【共通】フォント */
/* フォント、文字サイズ、文字色は Cocoon設定＞全体＞サイトフォント で指定 */
body.page {	/* サイト全体 */
  font-family: "Yu Gothic", "YuGothic", Meiryo, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 21px;
  color: var(--avj_color_black);
}

body.page-id-5 {	/* レッスン */
	font-family: "Noto Serif JP" ,sans-serif;
  font-size: 18px;
	color: #000142;
}

/* 【共通】アクセントの色 */
/* .avj_accent-color { color: #DA5F4D; } */

/* 【共通】 リンク：下線なし + 色なし */
a {
	color: var(--avj_color_black);
	text-decoration: none;
}
a, a div {
	transition: color 0.3s ease-in-out;
}
a img {
	transition: opacity 0.3s ease-in-out;
}

/* 【共通】タイトルを表示しない */
#post-552 .entry-title {	/* トップページ */
	display: none;
}


/***********************/
/* 横幅の指定 -- ここから */

article.page .wrap { /* 【共通】 コンテンツの幅 */
	width: unset;
	max-width: 1440px; 
}
#header-container-in {	/* 【共通】トップメニュー */
	max-width: 1080px;
}
/* article.page,	/* 固定ページすべて */
/* article.post,	/* 投稿ページすべて */
#breadcrumb,	      /* パンくずリスト */
.pagination-next {	/* 次のページ */
	/* max-width: 800px; */
	/* margin-right: auto; */
	/* margin-left: auto; */
}
#post-552 {	/* トップページ */
	max-width: 1440px;
}

/* 横幅の指定 -- ここまで */
/***********************/


/* 【共通】ヘッダー */
/* ヘッダーロゴ */
.site-name-text-link {
	padding: unset;
}
.header-container-in.hlt-top-menu .logo-header {
	max-height: unset;
}
.header-container-in.hlt-top-menu .logo-header img {
	margin: 15px;
	width: 112px;
}
@media screen and (max-width: 1023px){
	#header-container {
		position: absolute;
		top: 0;
		left: 0;
	}
	.header-container-in.hlt-top-menu .logo-header img {
    margin: 14px 15px;	/* (ヘッダーの高さ 53px - ロゴの高さ 25px) / 2 = 14px */
/*     width: clamp(73px, calc(100vw * 0.098), 142px); */
    width: 73px;
	}
}

/* 【共通】グローバルナビメニュー */
/* .navi-in : ヘッダー */
/* .slicknav_nav : モバイル */
/* .widget_nav_menu : フッター左 */
.navi-in ul {
	justify-content: flex-end;
}
#navi .navi-in ul li {
	width: unset;
	margin: 0 15px;
}
.footer-left .widget_nav_menu ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 10px;
}
.footer-left .widget_nav_menu ul li {
	margin: 0 25px;
}
.footer-mobile .widget_nav_menu ul li {
	margin-top: 10px;
}
.footer-mobile .widget_nav_menu ul li:not(li.avj_nav_sns) a {
	display: inline-block;
}
/* .navi-in a, */
.slicknav_nav a {
	display: inline-block;
	vertical-align: middle;
	position: relative;
}
.navi-in a *,
.slicknav_nav a * {
  font-size: 14px;
  font-weight: 700;
  line-height: 21px;
  letter-spacing: 0.1em;
}
.widget_nav_menu a {
	font-size: 12px;
	font-weight: 700;
	line-height: 18px;
	letter-spacing: 0.1em;
}
/* フォーカス時のアクセント */
.navi-in a:hover *,
.navi-in a:focus *,
.slicknav_nav a:hover *,
.slicknav_nav a:focus *,
.widget_nav_menu ul li a:hover,
.widget_nav_menu ul li a:focus {
	color: var(--avj_color_accent);
}
.slicknav_nav a:hover img,
.slicknav_nav a:focus img,
.widget_nav_menu ul li a:hover img,
.widget_nav_menu ul li a:focus img {
	opacity: 0.3;
}
.navi-in a:hover,
.navi-in a:focus,
.slicknav_nav a:hover,
.slicknav_nav a:focus,
.widget_nav_menu ul li a:hover,
.widget_nav_menu ul li a:focus {
	background-color: unset;
}
/* SNSリンクの出し分け */
.navi-in ul li.avj_nav_sns {
	display: none;
}
.slicknav_nav .avj_nav_sns > div,
.footer-left .avj_nav_sns > a,
.footer-mobile .avj_nav_sns > a {
	display: none;
}
.slicknav_nav .avj_nav_sns > .sub-menu {
	display: flex !important;
	justify-content: center;
	align-items: center;
	padding: 5px 10px;
	margin: 10px 5px;
}
.footer-left .avj_nav_sns > .sub-menu,
.footer-mobile .avj_nav_sns > .sub-menu {
	display: flex;
	align-items: center;
	padding: 5px;
}
.avj_nav_sns ul li a {
	padding: 0;
	margin: 0;
	width: 30px;
}
.footer-left .avj_nav_sns {
	width: 100%;
}
.footer-left .avj_nav_sns ul li {
	margin: 0;
}
.footer-left .avj_nav_sns ul li:not(li:first-child) {
	margin-left: 40px;
}
.slicknav_nav .avj_nav_sns ul li:not(li:first-child),
.footer-mobile .avj_nav_sns ul li:not(li:first-child) {
	margin-left: 30px;
}


/* 【共通】モバイルメニュー：ハンバーガーメニューアイコン */
/* .mobile-menu-buttons .menu-icon { line-height: 50px; } */
/* .mobile-menu-buttons .menu-caption { display: none; } */
.slicknav_menu .slicknav_menutxt { display: none; }
.slicknav_menu .slicknav_icon { margin: 0.188em 0; }
.slicknav_btn {
	background-color: var(--avj_color_main);
}

/* 【共通】モバイルメニュー：スライドメニュー */
.slicknav_menu {
  background: var(--avj_color_base);
	padding: 5px 15px;
}
.slicknav_nav { padding: 70px 0; }
.slicknav_nav, .slicknav_nav ul { text-align: center; }
.slicknav_nav a {
	color: var(--avj_color_black);
	margin: 10px 5px;
}

/* 問い合わせフォームのボタン */
input.wpcf7-submit {
	/* display: inline-block; */
  color: var(--avj_color_base);
  background-color: var(--avj_color_main);
	/* text-align: center; */
	/* max-width: 100%; */
	padding: 10px 2.5em;
	border-radius: 50px;
	/* position: relative; */
	width: unset;
	font-size: 16px;
}
form.wpcf7-form>p:nth-last-of-type(1) {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* 【共通】 ヘッダー直下の余白調整 */
.content { margin-top: 0px; }
main.main {
	padding-top: 0px;
	border: none;
}
.home .entry-content { margin-top: 0; }
/* .date-tags { display: none; } */

/* 【共通】 本体下部の余白 */
body:not(.home) .content { margin-bottom: 100px; }		/* トップページ以外 */

/* 【トップ】周囲の余白 */
.home #main	{ padding: unset; }	/* トップページ */

/* 【トップ】メインビジュアル */
body .wp-block-group.avj_top_mv {
	position: relative;
	margin-bottom: 210px;
	margin-bottom: calc(100vw * 0.146);	/* 210px/1440px=0.146 */
}
/* .wp-block-group.avj_top_mv img { */
.avj_top_mv--pc {
	width: calc(100% * 0.764); /* 1100px/1400px=0.764 */
	margin-right: 0;
	margin-left: auto;
}
.avj_top_mv--sp {
	width: calc(100% * 0.787); /* 295px/375px=0.787 */
	margin-right: 0;
	margin-left: auto;
}
.avj_top_mv--sp { display: none; }
@media screen and (max-width: 834px){
	.avj_top_mv--pc { display: none; }
	.avj_top_mv--sp { display: block; }
}
body .is-layout-constrained > * + .avj_top_mv--sp {
	margin-block-start: unset;
}
/* オーバーレイ部分（テキスト） */
.avj_top_mv__overlay {
	position: absolute;
	bottom: calc(
		calc(min(1440px, 100vw) * 0.013) * -2
		- calc(min(1440px, 100vw) * 0.015)
		- calc(min(1440px, 100vw) * 0.076) * 0.125
	);	/* 下部テキスト２行分 - Avionの下部余白 - Avion */
	left: calc(100% * 0.125);	/* 180px/1400px=0.125 */
}
.avj_top_mv__overlay p:nth-child(1) {		/* 上部テキスト */
	font-size: calc(min(1440px, 100vw) * 0.021);	/* 30px/1440px=0.021 */
	font-weight: 700;
	line-height: calc(min(1440px, 100vw) * 0.021);	/* 30px/1440px=0.021 */
	letter-spacing: 0.1em;
	margin: 0;
}
.avj_top_mv__overlay p:nth-child(2) {		/* Avion */
	font-family: "Hiragino Mincho ProN", "Times New Roman", "YuMincho", "Yu Mincho", "MS PMincho", serif;
	font-size: calc(min(1440px, 100vw) * 0.076);	/* 110px/1440px=0.076 */
	font-weight: 600;
	line-height: calc(min(1440px, 100vw) * 0.076);	/* 110px/1440px=0.076 */
	letter-spacing: 0.1em;
	text-align: left;
	color: var(--avj_color_main);
	text-shadow: 0px 5px 30px 0px #FFFFFFE5;
	margin: 0 0 calc(min(1440px, 100vw) * 0.015);	/* 21px/1440px=0.015 */
}
.avj_top_mv__overlay p:nth-child(3) {		/* 下部テキスト */
	font-size: calc(min(1440px, 100vw) * 0.013);	/* 18px/1440px=0.013 */
	font-weight: 700;
	line-height: calc(min(1440px, 100vw) * 0.013);	/* 18px/1440px=0.013 */
	line-height: calc(min(1440px, 100vw) * 0.019);	/* 27px/1440px=0.019 */
	letter-spacing: 0.1em;
	margin: 0;
}
@media screen and (max-width: 834px){
	.avj_top_mv__overlay {
		bottom: calc(100% * 0.027);	/* 10px/375px=0.027 */
		left: calc(100% * 0.04);	/* 15px/375px=0.04 */
	}	
	.avj_top_mv__overlay p:nth-child(1) {		/* 上部テキスト */
		font-size: calc(100vw * 0.032);		/* 12px/375px=0.032 */
		line-height: calc(100vw * 0.048);	/* 18px/375px=0.048 */
		letter-spacing: 0em;
	}
	.avj_top_mv__overlay p:nth-child(2) {		/* Avion */
		font-size: calc(100vw * 0.107);		/* 40px/375px=0.107 */
		line-height: calc(100vw * 0.107);	/* 40px/375px=0.107 */
		margin: 0 0 calc(100vw * 0.069);	/* 26px/375px=0.069 */
	}
	.avj_top_mv__overlay p:nth-child(3) {		/* 下部テキスト */
		font-size: calc(100vw * 0.037);		/* 14px/375px=0.037 */
		line-height: calc(100vw * 0.056);	/* 21px/375px=0.056 */
		letter-spacing: 0em;
	}
}

/* 【トップ】セクション */
.article .avj_top-section {
	padding: 100px 45px;
	background-color: #B5D6EE;
	border-radius: 0 calc(min(1440px, 100vw) * 0.069) 0 0;	/* 100px/1440px=0.069 */
	border-radius: 0 calc(min(1440px, 100vw) * 0.08) 0 0;		/* 30px/375px=0.08 */
}
p.avj_top-section__title {
	font-family: "Hiragino Mincho ProN", "Times New Roman", "YuMincho", "Yu Mincho", "MS PMincho", serif;
	font-size: 60px;
	font-weight: 600;
	line-height: 60px;
	letter-spacing: 0.2em;
	text-align: center;
	color: var(--avj_color_base);
	margin-bottom: 50px;
}
.avj_top-section__card-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 60px 100px;
	gap: calc(100vw * 0.042) calc(min(1440px, 100vw) * 0.069);	/* 60px/1440px=0.042 100px/1440px=0.069 */
}
.avj_top-section__card {
	padding: 30px 20px;
	background-color: var(--avj_color_base);
	border-radius: 20px;
	box-shadow: 10px 10px 30px 0px #363A3D1A;
	flex: 0 1 343px;
	display: flex;
	flex-direction: column;
}
.avj_top-section__card .button-block {
    margin-top: auto;
}
.body div.avj_top-section__card figure {
	margin: unset;
}
body .is-layout-constrained > * + .avj_top-section__card {
	margin-block-start: unset;
}
.avj_top-section__card img {
	width: 93px;
	height: 93px;
	margin: 0 auto;
}
p.avj_top-section__card-title {
	font-size: 20px;
	font-weight: 700;
	line-height: 30px;
	text-align: center;
	margin: 20px 0;
}
p.avj_top-section__card-text {
	margin: 30px 0;
}
.avj_top-section__card .button-block {
	text-align: center;
}
.avj_top-section__card .btn {
	letter-spacing: 0.2em;
	color: var(--avj_color_base);
	padding: 10px 58px 10px 30px;
	background-color: var(--avj_color_main);
	border-radius: unset;
}
.avj_top-section__card .btn::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 1.5em;
	width: 0.55em;
	height: 0.55em;
	transform: translateY(-50%) rotate(45deg);
	border-right: 1.7px solid currentColor;
	border-top: 1.7px solid currentColor;
}
/* フォーカス時のアクセント */
.avj_top-section__card .btn:hover,
.avj_top-section__card .btn:focus {
	filter: unset;
	opacity: 0.5;
}
@media screen and (max-width: 834px){
	.article .avj_top-section {
		padding: 30px 27.5px 50px;
	}	
	p.avj_top-section__title {
		font-size: 30px;
		line-height: 40px;
		letter-spacing: 0.1em;
		margin-bottom: 20px;
	}
	.avj_top-section__card-wrapper {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 20px;
	}
	.avj_top-section__card {
		padding: 30px 15px;
		border-radius: 20px;
		flex: unset;
		width: min(100vw * 0.853, 343px);	 /* 320px/375px=0.853  */
	}
	.avj_top-section__card img {
		width: 40px;
		height: 40px;
	}
	p.avj_top-section__card-title {
		font-size: 18px;
		line-height: 27px;
		margin: 5px 0;
	}
	p.avj_top-section__card-text {
		line-height: 21px;
		margin: 20px 0;
	}
}

/* 【共通】フッター */
/* フッター周りの余白調整 */
.body .article, .body .wp-block-group { margin-bottom: 0; }
.entry-content { margin-bottom: 0; }
.footer { padding: 0; margin-top: 0 }
.footer-widgets, .footer-widgets-mobile { margin: 0; }
.footer-left { width: 100%; }
.footer-center, .footer-right { display: none; }
.footer-left .widget, .footer-mobile .widget { margin-bottom: unset; }
#footer {
	/* フッター背景色は Cocoon設定＞フッター で指定  */
	/* background-color: #E9F3F9; */
	max-width: 1440px;
	margin: 0 auto;
}
/* レッスン */
/* .page-id-5  #footer {
	background-color: #FFFFFF;
	max-width: unset;
	margin: unset;	
} */

/* クレジット部分 */
.footer-bottom {
	margin-top: unset;
}
.footer-bottom .copyright {
	margin-top: unset;
	font-size: 12px;
	font-weight: 500;
	line-height: 18px;
	padding: 10px;
}
@media screen and (max-width: 834px){
	.footer-bottom .copyright {
		font-size: 10px;
		line-height: 15px;
	}
}