@charset "utf-8";



/*全体の設定
---------------------------------------------------------------------------*/
html,body {
	height: 100%;
	font-size: 13px;	/*基準となるフォントサイズ。*/
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

		html, body {
/*			font-size: 16px;	/*基準となるフォントサイズ。*/
			font-size: 18px;	/*基準となるフォントサイズ。*/
		}

	}/*画面幅900px以上の追加指定ここまで*/


/*2カラムの中にある.main要素（頭にドットがない「main」とは異なるので注意して下さい）*/
main.column .main {
	margin-bottom: 30px;		/*ボックスの下に空けるスペース。subとの間の余白です。*/
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	/*カラムで使う為の指定*/
	main.column {
		display: flex;	/*flexボックスを使う指定*/
		justify-content: space-between;	/*並びかたの種類の指定*/
	}
	
	/*2カラムの中にある.main要素（頭にドットがない「main」とは異なるので注意して下さい）*/
	main.column .main {
		margin-bottom: 0;
		order: 2;					/*並び順。数字の小さい順番に表示されます。*/
/*		width: calc(100% - 260px);	/*幅。ここの280pxの数字は下の.subの幅(230px)と、左右ブロックの間の余白(30px)を追加したものです。*/
		width: calc(100% - 400px);	/*幅。ここの280pxの数字は下の.subの幅(230px)と、左右ブロックの間の余白(30px)を追加したものです。*/
	}
	
	/*2カラムの中にある.sub要素*/
	main.column .sub {
		order: 1;		/*並び順。数字の小さい順番に表示されます。*/
/*		width: 230px;	/*幅*/
		width: 370px;	/*幅*/
	}

	}/*画面幅900px以上の追加指定ここまで*/

/*h2タグ
---------------------------------------------------------------------------*/
/*h2タグ全体*/
#contents h2 {
	border-bottom: 2px solid #f46f86;	/*濃い色の線の幅、線種、色*/
}
/*アクセントラインの設定*/
#contents h2 .uline {
	padding-bottom: 0px;
}
/*右側の装飾文字の設定*/
#contents h2 .small {
	display: none;	/*小さな端末では非表示にしておく。*/
}
	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

		#contents h2 .small {
			display: inline-block;	/*表示させる*/
		}

	}/*画面幅900px以上の追加指定ここまで*/

/*他
---------------------------------------------------------------------------*/
section + section {
/*	margin-top: 3rem;	*/
	margin-top: 2rem;
}



/* ※印		<ol class="kome"> , <ul class="kome">
---------------------------------------------------------------------------*/
.kome {
	margin-top: 0;
	padding-left: 2rem;
	list-style-type: "※";
}

/* ◎印		<ol class="maru"> , <ul class="maru">
---------------------------------------------------------------------------*/
.maru {
	margin-top: 0;
	margin-bottom: 0;
	padding-left: 15px;
	list-style-type: "◎";
}

/* コンテンツの最外枠
---------------------------------------------------------------------------*/
.fsdiv10{
	padding-left: 1rem;
}
.fsdiv11{
	margin-bottom: 1rem;
	padding-left: 1rem;
}
.fsdiv12{
	margin-bottom: 2rem;
	padding-left: 1rem;
}

/* 横並び	<div class="fsflex1">	常に横並び《 注釈(※)などで使用 》
		<div class="fsflex2">	スマホ画面幅で解除
---------------------------------------------------------------------------*/
.fsflex1{
	display: flex;
}
.fsflex1 div{
	box-sizing: border-box;
}
.fsflex2{
	display: block;
}
	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:450px) {
		.fsflex2{
			display: flex;
		}
	}/*画面幅900px以上の追加指定ここまで*/
.fsflex2 div{
	box-sizing: border-box;
}

/* コンセプト	<p class="fsconcept1">
---------------------------------------------------------------------------*/
.fsconcept1{
	font-size: 1.3em;
}
	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

		.fsconcept1{
			font-size: 1.6rem;
		}

	}/*画面幅900px以上の追加指定ここまで*/