@charset "UTF-8";
/*
Theme Name: SWELL CHILD (arschool blog)
Template: swell
Version: 1.0.0
Description: arschool.co.jp/blog 用 SWELL 子テーマ。JIN からの移行で必要な互換処理を持つ。
*/

/* ---------------------------------------------
 * 文字間隔: JIN はサイト全体に 1px 付けていた（SWELL は 0）。詰まって窮屈に見えるので JIN に合わせる
 * ------------------------------------------------------------- */
:root {
	--swl-letter_spacing: 1px;
}

/* ---------------------------------------------
 * ヘッダー: JIN（header_style4）と同じく PC ではロゴを出さずグローバルナビを中央に。
 * サイト名はトップ画像の中に入っている。SP はメニューボタンのためロゴ付きのまま。
 * ------------------------------------------------------------- */
@media (min-width: 960px) {
	.l-header .l-header__logo {
		display: none;
	}
	.l-header__inner {
		justify-content: center;
		min-height: 48px;
	}
}

/* ---------------------------------------------
 * JIN アイコン（[jin_icon_*]）
 * JIN は body の font-family 先頭に "jin-icons" を入れて表示していた。SWELL の本文フォントには無いので、
 * アイコン要素にだけ指定する（フォント本体は乗り換えサポートが themes/jin から読み込む）。
 * ------------------------------------------------------------- */
.jic::before,
[class*="jin-ifont-"]::before {
	font-family: "jin-icons";
	font-style: normal;
	font-weight: normal;
}

/* ---------------------------------------------
 * JIN [qa-box01] 互換（JIN の jin-ac-box02 の見た目に寄せる）
 * ------------------------------------------- */
.jin-qa {
	margin: 0 0 2em;
}
.jin-qa__q {
	position: relative;
	padding: 15px 55px;
	border-radius: 4px;
	box-shadow: 0 2px 6px 0 #dedede;
	font-weight: bold;
	line-height: 1.5;
	cursor: pointer;
	list-style: none;
}
.jin-qa__q::-webkit-details-marker {
	display: none;
}
.jin-qa__q::before,
.jin-qa__a::before {
	position: absolute;
	left: 20px;
	font-family: "jin-icons";
	font-size: 1.25em;
	font-weight: normal;
}
.jin-qa__q::before {
	top: 14px;
	content: "\e99d";
	color: #4f5ed2;
}
.jin-qa__q::after {
	position: absolute;
	top: 15px;
	right: 20px;
	content: "\e932";
	font-family: "jin-icons";
	font-size: 1.3em;
	font-weight: normal;
	transition: transform 0.3s;
}
.jin-qa[open] .jin-qa__q::after {
	transform: rotate(180deg);
}
.jin-qa__a {
	position: relative;
	margin-top: 15px;
	padding: 25px 25px 1px 55px;
	border-radius: 4px;
	background: #fff5f4;
}
.jin-qa__a::before {
	top: 24px;
	content: "\e99c";
	color: #e25178;
}
@media (max-width: 599px) {
	.jin-qa__q {
		padding: 15px 45px 15px 50px;
	}
	.jin-qa__a {
		padding: 22px 18px 1px 50px;
	}
}

/* ---------------------------------------------
 * 記事下のカテゴリー・タグのボタン（CTA の上に出る）は出さない（マーケチームの判断、stgxx で確認済み）
 * ------------------------------------------------------------- */
.p-articleFoot__terms,
.p-articleFoot .c-categoryList {
	display: none;
}

/* ---------------------------------------------
 * 記事下の CTA（JIN の .cta-content。scripts/build/06-cta が JIN と同じマークアップでブログパーツ化）
 * 乗り換えサポートは JIN の CTA 用 CSS を読み込まないので移す。色・ボタン幅は functions.php で JIN の設定値から出す
 * ------------------------------------------------------------- */
.cta-content {
	position: relative;
	padding: 30px;
	border-radius: 2px;
	overflow: hidden;
}
.cta-content .info-title {
	display: block;
	margin-bottom: 20px;
	font-size: 1.6rem;
	font-weight: 500;
	text-align: center;
}
/* SWELL の段落の余白は本文直下の要素にしか付かないので、CTA の中身にも付ける */
.cta-content .cta-text > * {
	margin-bottom: 1.5em;
}
.cta-content .cta-text > *:last-child {
	margin-bottom: 0;
}
.cta-content .cta-text img {
	max-width: 100%;
	height: auto;
}
.cta-content .color-button01-big,
.cta-content .color-button02-big {
	margin-top: 10px;
}
@media (max-width: 599px) {
	.cta-content {
		padding: 20px;
	}
	.cta-content .info-title {
		font-size: 1.4rem;
		font-weight: 700;
		margin-bottom: 10px;
	}
}

/* ---------------------------------------------
 * サイトマップ（固定ページ「サイトマップ」の [arschool_sitemap]）
 * ------------------------------------------- */
.arschool-sitemap__cat {
	margin-top: 2em;
}
.arschool-sitemap__list {
	margin-top: 0.5em;
}