@charset "utf-8";
/* CSS Document */





/*================================================================================
	サイト全体の配置などの指定
================================================================================*/
/*サイトの主要部分の指定================================================================================*/
#main_wrapper {
	width: 100%;
	margin: 0 auto;
	
	display: flex;
	flex-wrap: wrap;
}

#main_wrapper:has(aside) {
	width: min(100% - 32px, 1200px);
}

/*================================================================================サイトの主要部分の指定*/





/*サイト主要部分のエリアごとの指定================================================================================*/
/*=====サイト全体の最大幅などを指定=====*/
main {
	width: max(60ch, 100% - 30ch);
	flex-grow: 1;
	/*以下、確認用なので実装時は削除*
	height: 200px;
	background-color: #FF7A7C;
	/**/
}

#main_wrapper > aside {
	width: 30ch;
	flex-grow: 1;
	order: 1;
	/*以下、確認用なので実装時は削除*
	height: 200px;
	background-color: #9099FF;
	/**/
}
/*
 * ＜説明＞
 * 上記では「width」と「flex-grow: 1」を指定しているが、
 * widthの値で並列できる場合には、並列させて表示。
 * widthの値で並列させられない場合には、段替えして100％（flex-grow:1）で表示してくれる。
 * 並列させたコンテンツが最大幅よりも小さい場合には、余った空白分を均等に分割して、それぞれの幅に足すので、
 * 想定していた幅よりもコンテンツ幅が大きくなることがある。
 * また、asideが無かった場合にも、mainはflex-grow: 1;を優先するため、全幅で表示される。
 *
 * 並列させたときに余った空白分を、優先したいエリア（今回ならmain）にだけ割り振りたいため、
 * widthに「100％ - "他のエリアの大きさ"」をしている。
 * しかしそれだけだと％を使っているのでずっと並列してしまうため、
 * max関数を使って、エリアの最小幅（今回なら60ch）を設定している。
 * 
 * widthを％で設定すると、ずっと1行の範囲内にコンテンツが割り振れてしまうので、
 * ずっと並列になってしまい、レスポンシブ処理できない。
 * 
 * 親要素で「grid-template-columns: 1fr」として100％をしようとしても、
 * 1frでは必ず１つのコンテンツが領域100％を占めてしまうので、
 * メディアクエリを使わないといけなかった。
 */





/*=====左サイドカラムの処理=====*/
/*
 * ＜説明＞
 * 左にサイドカラムがあり、さらに右サイドカラムがレスポンシブで下に移動した場合に、
 * その位置に左サイドカラムを移動させる、という処理をするためのもの。
 * 
 * 順番入れ替えはorderを使用。
 * orderの値が一緒の時はHTML記載順で並ぶことを利用。
 * 最初（モバイル優先）はmainを優先で表示するために両サイドカラムをorder: 1;で後に移動するようにし、
 * 画面幅が広がって両サイドにカラムが表示される時に、order値を元に戻して左サイドカラムを左側へ移動させている。
 * 
 * 「全てが縦並び」「右にカラムあり」「両サイドにカラムあり」の段階全てで、
 * 並列化させたときの余った空白分をメインエリアに割り振りたいため、
 * 都度、メインエリアのwidthに再計算式を入れている。
 *
 */
@media screen and (min-width: calc(120ch + 50px)){
	main {
		width: max(60ch, 100% - 60ch);
	}
	
	#main_wrapper > aside {
		order: 0;
	}
}
/*================================================================================サイト主要部分のエリアごとの指定*/










/*================================================================================
	コンテンツの指定
================================================================================*/
/*コンテンツの初期値の設定================================================================================*/
/*=====コンテンツラッパーの設定=====*/
.content_wrapper {
	width: 100%;
	margin-bottom: 200px;
}
.content_wrapper:last-child {
	margin-bottom: 0;
}

/*=====コンテンツインナーの設定=====*/
.content_inner {
	width: min(90%, 1400px);
	margin: 0 auto 50px;
}

.content_inner_full_width {
	width: 100%;
	margin-bottom: 50px;
}

/*=====コンテンツの設定=====*/
.content {
	position: relative;
}
/*================================================================================コンテンツの初期値の設定*/










/*================================================================================
		各タグについての設定
================================================================================*/
/*初期値================================================================================*/
* {
	font-family: Helvetica, YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	font-size: 1rem;
	color: #222222;
	line-height: 1.6;
	letter-spacing: 0.1em;
}

html {
	scroll-behavior: smooth;
}
/*=====見出し=====*/

/*=====本文=====*/
p {
	font-size: 1rem;
	line-height: 1.3;
	letter-spacing: 0.03rem;
}

/*=====リンク=====*/
a {
	font-size: 1rem;
	line-height: 1;
	letter-spacing: 0.1rem;
	text-decoration: none;
}

/*=====リスト=====*/
ul, ol {
	list-style: none;
	font-size: 1rem;
	line-height: 1;
}

ul:empty, ol:empty {
	display: none;
}

/*=====画像=====*/
img {
	vertical-align: middle;
}

/*=====別のタグに内包されるタグの設定=====*/
option, li, tr, th, td {
	font-size: 1em;
}

caption {
	font-size: 0.8em;
}
/*================================================================================初期値*/





/*標準化の設定================================================================================*/
/*
 * ＜説明＞
 * 上記の初期値と分けている理由は、
 * 初期値の方は一般的に適用される値として設定しているので、基本的に変えることが無い要素を記述している。
 *
 * 一方こちらでは、あくまでサイト内で標準化する項目について記載しているので、
 * サイトが違う場合には変更する可能性もある要素を記述している。
 *
 */
/*=====見出し=====*/
h1, h2, h3, h4, h5, h6 {
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	color: #222222;
}

h1 {
	font-size: 2rem;
	line-height: 3;
	letter-spacing: 0;
	font-weight: normal;
}

h2 {
	font-size: 1.6rem;
	line-height: 2.2;
	letter-spacing: 0;
	font-weight: normal;
}

h3 {
	font-size: 1.4rem;
	line-height: 1.8;
	letter-spacing: 0.05em;
	font-weight: bolder;
}

h4 {
	font-size: 1.25rem;
	line-height: 1.8;
	letter-spacing: 0.05em;
	font-weight: bolder;
}

h5 {
	font-size: 1.1rem;
	line-height: 1.8;
	letter-spacing: 0.08em;
	font-weight: bolder;
}

h6 {
	font-size: 1rem;
	line-height: 1.8;
	letter-spacing: 0.1em;
	font-weight: bolder;
}

/*=====本文=====*/
p {
	font-family: Helvetica, YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	color: #222222;
}

/*=====リンク=====*/
a {
	color: #222222;
}

/*=====リスト=====*/
ul ol {
}

/*=====画像=====*/
img {
	width: 100%;
}


/*================================================================================標準化の設定*/










/*================================================================================
		以下、標準化クラスの設定
================================================================================*/
/*初期値================================================================================*/
/*すべての要素と疑似要素の設定*/
/*================================================================================初期値*/