@charset "UTF-8";
/* ==========================================================================
   レイアウト（段組み・表示の出し分け・余白）
   旧サイト（Avada）と同じ幅の計算・同じ切り替え幅にしています。
     スマホ：〜640px ／ タブレット：641〜1024px ／ PC：1025px〜
     段組みを縦積みにする幅：800px以下
   ========================================================================== */

/* セクション：左右30pxの余白＋中身は最大1100px ------------------------- */

.ym-section {
	position: relative;
	box-sizing: border-box;
	padding: 0 30px;
}

.ym-section > .ym-row {
	max-width: var(--ym-site-width, 1100px);
	margin-left: auto;
	margin-right: auto;
}

/* 画面いっぱいに広げる */
.ym-section--full > .ym-row {
	max-width: none;
}

/* 左右の余白なし */
.ym-section--flush {
	padding-left: 0;
	padding-right: 0;
}

/* 段組み ------------------------------------------------------------------ */

.ym-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}

.ym-col {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	min-height: 1px;
	margin: 0 0 20px;
}

/* 中身の下余白を列の中に留める（旧Avadaの列末尾の clearfix と同じ働き） */
.ym-col::after {
	content: "";
	display: table;
	clear: both;
}

.ym-col--flush {
	margin-bottom: 0;
}

/*
 * 列の幅：1行の余白（4%）を、各列の幅の割合で差し引く（Avada と同じ計算）
 */

/* 1/5 ・ 3/5 ・ 1/5 */
.ym-row--side > .ym-col:nth-child(3n+1),
.ym-row--side > .ym-col:nth-child(3n) { width: 18.4%; }
.ym-row--side > .ym-col:nth-child(3n+2) { width: 55.2%; }

/* 1/6 ・ 3/5 ・ 1/5 */
.ym-row--side6 > .ym-col:nth-child(1) { width: 15.3333%; }
.ym-row--side6 > .ym-col:nth-child(2) { width: 55.2%; }
.ym-row--side6 > .ym-col:nth-child(3) { width: 18.4%; }

.ym-row--side > .ym-col:not(:nth-child(3n)),
.ym-row--side6 > .ym-col:not(:nth-child(3n)) {
	margin-right: 4%;
}

/* 1/4 ・ 1/2 ・ 1/4（最後の1列は全幅） */
.ym-row--quarter > .ym-col:nth-child(3n+1),
.ym-row--quarter > .ym-col:nth-child(3n) { width: 23%; }
.ym-row--quarter > .ym-col:nth-child(3n+2) { width: 46%; }
.ym-row--quarter > .ym-col:not(:nth-child(3n)) { margin-right: 4%; }

/* 2列 */
.ym-row--half > .ym-col { width: 48%; }
.ym-row--half > .ym-col:nth-child(even) { margin-right: 4%; } /* 1列目が全幅で、2列目から2つずつ並ぶ */

/* 2/3 と 1/3 の組み合わせ */
.ym-row--thirds > .ym-col--2of3 { width: 64%; }
.ym-row--thirds > .ym-col--1of3 { width: 32%; }
.ym-row--thirds > .ym-col:nth-child(odd) { margin-right: 4%; }

/* 5等分（余白なし） */
.ym-row--five > .ym-col { width: 20%; }

/* 全幅（どの段組みでも） */
.ym-row > .ym-col.ym-col--full {
	width: 100%;
	margin-right: 0;
}

/* 800px以下は縦積み（旧Avadaと同じく通常のブロックに戻す） */
@media (max-width: 800px) {
	.ym-row {
		display: block;
	}

	.ym-row > .ym-col,
	.ym-row > .ym-col:nth-child(n) {
		width: 100%;
		margin-right: 0;
	}
}

/* 表示の出し分け --------------------------------------------------------- */

/* スマホ（〜640px）で隠す */
@media (max-width: 640px) {
	.ym-hide-sm { display: none !important; }
}

/* スマホ（〜640px）だけ表示 */
@media (min-width: 641px) {
	.ym-only-sm { display: none !important; }
}

/* PC（1025px〜）だけ表示 */
@media (max-width: 1024px) {
	.ym-only-lg { display: none !important; }
}

/* PC（1025px〜）で隠す */
@media (min-width: 1025px) {
	.ym-hide-lg { display: none !important; }
}

/* 余白・区切り ------------------------------------------------------------ */

/* 上下20pxのすき間（旧サイトの「区切り線なし」の区切り） */
.ym-spacer {
	clear: both;
	height: 1px;
	padding-top: 21px;
	margin-bottom: 20px;
}

/* 上だけ20px */
.ym-spacer--top {
	margin-bottom: 0;
}