@charset "UTF-8";
:root{
	--interval: 10px; /* 小数点の扱いによる罫線ズレを起こさないための基準。10倍で1行。*/
}

/* ノート 背景 */
.noteArea{
	width: 924px;
	padding: 0 18px 40px;
	margin: 10px auto 20px;
	background-color: #ffffff;
	font-size: 24px;
	font-weight: bold;
	line-height: 40px;
	border-radius: 10px; /* ボックスの四つ角を丸くする */ 
	border: solid 1px #534741;
}
.noteArea::before{
	content: '';
	display: block;
 	background-image: url("../images/note_header_pc.png");
	background-repeat: no-repeat;
	background-size: 100%;
	margin: 0 0 0 auto;
	width: 924px;
	height: 167px;
}
.noteArea::after{
	content: '';
	display: block;
 	background-image: url("../images/note_footer_pc.png");
	background-repeat: no-repeat;
	background-size: 100%;
	margin: 0;
	width: 924px;
	height: 47px;
}
@media only screen and (max-width: 768px) {
	.noteArea{
		width: 96.4vw;
		padding: 0 1.8vw calc(var(--interval) * 6);
		margin: 0 0 -7vw;/* test2 */
		font-size: calc(var(--interval) * 5.4);
		line-height: calc(var(--interval) * 10);
		border-radius: 0;
		border: none;
	}
	.noteArea::before{
		background-image: url("../images/note_date_sp.png");
		width: calc(var(--interval) * 40);
		height: calc(var(--interval) * 16.2);
	}
	.noteArea::after{
		background-image: url("../images/note_footer_sp.png");
		margin: calc(var(--interval) * -1) 0 0;
		width: 96.4vw;
		height: 11vw;
	}
}
/* spではnote headerを二つの画像に分けていて，その片割れ*/
@media only screen and (max-width: 768px) {
	.header_line{
		display: block;
		background-image: url("../images/header_line_sp.png");
		background-repeat: no-repeat;
		background-size: 100%;
		margin: 0;
		width: 100%;
		height: 12.4vw;/* 画像の高さ的には11.4vwがピッタリだが少し広めにとっていて，.lineのmargineで帳尻合わせ*/
	}
}
/* スタンプ */
.stamp{
	margin: 20px 0 0 10px;
	transform: rotate(-6deg);
}
/* ノート上部（日付とか） */
.note-header{
	display: flex;
	margin: -166px 0 0;
	font-size: 30px;
	font-weight: lighter;
}
.infoArea{
	margin: 41.5px 0 auto auto;
	width: 303px;
	height: 78.5px;
	line-height: 40px;
}
.numArea{
	width: 303px;
	height: 39.25px;
}
.num{
	text-align: center;
	margin: -10px auto 0 75px;
}
.dateArea{
	margin: auto 0 30px;
	display: flex;
	width: 303px;
	height: 39.25px;
}
.year{
	width: 158px;
	text-align: right;
	padding: 0 5px 0 0;
		
	}
.month{
	width: 70px;
	text-align: center;
	margin: 0;
}
.date{
	width: 70px;
	text-align: center;
	padding: 0;
}
@media only screen and (max-width: 768px) {
	.note-header{
		margin: calc(var(--interval) * -16.2) auto 0;
		font-size: calc(var(--interval) * 4.2);
	}
	.infoArea{
		margin: calc(var(--interval) * 3) 0 auto auto;
		width: calc(var(--interval) * 36.7);
		height: calc(var(--interval) * 14);
		line-height: calc(var(--interval) * 7.2);
	}
	.numArea{
		width: calc(var(--interval) * 36.7);
		height: calc(var(--interval) * 7);
	}
	.num{
		margin: calc(var(--interval) * -0.5) auto 0 calc(var(--interval) * 10);
		font-size: calc(var(--interval) * 4.8);
		text-align: center;
	}
	.dateArea{
		margin: auto 0 0 auto;
		display: flex;
		width: calc(var(--interval) * 36.7);
		height: calc(var(--interval) * 7);
	}
	.year{
		width: calc(var(--interval) * 21.2);
		padding: 0 calc(var(--interval) * 1) 0 0;
		
	}
	.month{
		width: calc(var(--interval) * 7.5);
	}
	.date{
		width: calc(var(--interval) * 8);
		padding: 0 0 0 calc(var(--interval) * 1);
	}
}
/* タイトル */
.titleArea{
	display: table;
	padding: 40px 50px 20px;
	font-size: 36px;
	line-height: 40px;
}
.titleArea::after{
	content: '';
	display: block;
	background-image: url("../images/wavy.png");
	background-size: contain;
	background-repeat: repeat-x;
	width: 100%;
	height: 20px;
}
@media only screen and (max-width: 768px) {
	.titleArea{
		padding: calc(var(--interval) * 5) 0 calc(var(--interval) * 2.5);
		margin: 0 auto;
		font-size: calc(var(--interval) * 7.2);
		line-height: calc(var(--interval) * 10);
		text-align: center;
	}
	.titleArea::after{
		margin: calc(var(--interval) * -1 ) 0 0;
		height: calc(var(--interval) * 4);
	}
}
/* 罫線 */
.line{
	width: 920px;
	margin: -6px auto 0px; /* 上の余白は結果として84pxのつもり */
	background: linear-gradient(to top,rgba(0,0,0,0.12) 1px, rgba(255,255,255,0) 1px) left top / 1px 40px; /* カラーコードで指定するとIEで罫線が出ない */
}
@media only screen and (max-width: 768px) {
	.line{
		width: 96vw;
		padding: 0;
		margin: -1vw auto 0;/* topは.header_lineの帳尻合わせ */
		background: linear-gradient(to top, #0000001F 1px, #ffffff00 1px) left top / 1px calc(var(--interval) * 10);
	}
}
/* 本文 */
.description{
	padding: 0 0 0 21px;
	margin: 8px 0 -8px;
	font-size: 21px;
	font-weight: normal;
	order: 0;
}
@media only screen and (max-width: 768px) {
	.description{
		padding: calc(var(--interval) * 1.5) 0 0;
		margin: 0 3vw calc(var(--interval) * -1.5);
		font-size: calc(var(--interval) * 5.4);
		text-align: left;
	}
}
/* 箇条書きリスト */
.ulist li{
	list-style-type: disc; /* リストの左側に黒丸 */
	margin-left: 21px;
	text-align: left;
}
@media only screen and (max-width: 768px) {
	.ulist li{
		margin: 0 auto 0 calc(var(--interval) * 6);
	}
}
/* 箇条書きリスト内箇条書きリスト */
.ulist li:nth-child(n+1) .ulist li{
	list-style-type: none;
}
.ulist li:nth-child(n+1) .ulist li::before{
	content: "−";
	margin: 0 6px 0 -21px
}
@media only screen and (max-width: 768px) {
	.ulist li:nth-child(n+1) .ulist li::before{
		margin: 0 0 0 calc(var(--interval) * -6);
		padding: 0 calc(var(--interval) * 1.8) 0 calc(var(--interval) * 1);
	}
}
/* ナンバリングリスト */
.olist li{
	list-style-type: decimal; /* リストの左側に数字 */
	margin-left: 21px;
	text-align: left;
}
@media only screen and (max-width: 768px) {
	.olist li{
		margin: 0 auto 0 calc(var(--interval) * 6);
	}
}
/* asterisk */
.list_asterisk li{
	list-style-type: none;
	text-align: left;
	margin-left: 21px;
}
.list_asterisk li::before {
	content: "＊" ; /* リストの左側に＊ */
	margin-left: -21px;
}
@media only screen and (max-width: 768px) {
	.list_asterisk li{
		margin: 0 auto 0 calc(var(--interval) * 6); /* 他のリスト系に揃えた */
	}
	.list_asterisk li::before {
		margin: 0 0 0 calc(var(--interval) * -6); /* paddingとmargin合わせて1文字分 */
		padding: 0 calc(var(--interval) * 0.6) 0 0;
	}
}
/* 再編コンテンツ注釈用 */
.annotation li{
	list-style-type: none;
	text-align: left;
	margin: 8px 24px -8px 68px; /* 上下はdescription準拠, 左はタイトルの位置に揃えた */
	font-size: 18px;
	font-weight: normal;
}
.annotation li::before {
	content: "※" ; /* リストの左側に＊ */
	margin-left: -18px;
}
@media only screen and (max-width: 768px) {
	.annotation li{
		padding: calc(var(--interval) * 1.5) 0 0 0; /* description準拠, */
		margin: 0 calc(var(--interval) * 1) calc(var(--interval) * -1.5) calc(var(--interval) * 5.1 + 2.8vw); /* 左は枠の位置に揃えて，topはdescription準拠 */
		font-size: calc(var(--interval) * 4.8);
		text-align: left;
	}
	.annotation li::before {
		margin:  0 0 0 calc(var(--interval) * -5.1); /* paddingとmargin合わせて1文字分 */
		padding: 0 calc(var(--interval) * 0.3) 0 0;
	}
}
/* 導入 */
.intoroArea{
	padding: 0 0 40px 74px;
}
.intoro{
	display: flex;
}
.intoroImg_4by3{
	flex-shrink: 0;
	margin: 0 0 auto -24px;
}
.intoroImg_by{
	
}
@media only screen and (max-width: 768px) {
	.intoroArea{
		padding: 0 0 calc(var(--interval) * 10);
		margin: calc(var(--interval) * -0.5) 0 0;
		font-size: calc(var(--interval) * 5.4);
		text-align: center;
	}
	.intoro{
		flex-direction: column;
	}
	.intoroImg_4by3{
		display: block;
		box-sizing: border-box;
		width: calc(var(--interval) * 90);
		height: calc(var(--interval) * 70);
		padding: 0 0 calc(var(--interval) * 2.25);
		margin: 0 auto;
	}
}
/* pc版の枠１つ目をmargin-1pxにするための調整 */
.mainArea{
		padding: 1px 0 0;
	}
@media only screen and (max-width: 768px){
	.mainArea{
		padding: 0 0 0.1vw; /* 下のpaddingは最終行の罫線が消えないように */
	}
}
/* 見出し 枠 */
.itembox-r, .itembox-g, .itembox-b{
	position: relative;
	margin: -2px 12px 40px; /* 枠線がboxの外だから線の太さ分topのmarginを減らしている */
}
.itembox-r{
	border: solid 2px #DE1C24;
}
.itembox-g{
	border: solid 2px #80B73F;
}
.itembox-b{
	border: solid 2px #299CD3;
}
@media only screen and (max-width: 768px) {
	.itembox-r, .itembox-g, .itembox-b{
		box-sizing: border-box;
		padding: 0 0 calc(var(--interval) * 4);
		margin: 0 2.8vw calc(var(--interval) * 15);
	}
	.itembox-r{
		border: solid var(--interval) #DE1C24;
	}
	.itembox-g{
		border: solid var(--interval) #80B73F;
	}
	.itembox-b{
		border: solid var(--interval) #299CD3;
	}
}
/* ノートの最後に空行を入れないと罫線が足りなくなる */
.last_line{
	margin: -40px 0 0;
}
@media only screen and (max-width: 768px){
	.last_line{
		margin: calc(var(--interval) * -10) 0 0;
	}
}
/* 枠の見出し */
.box-title, .box-point {
	position: absolute;
	display: inline-block;
	margin: -15px 30px auto 30px; 
	padding: 0 9px;
	line-height: 30px;
	font-size: 24px;
}
.box-title{
	background: linear-gradient(rgb(255,255,255) 55%, rgba(255,121,211,0.6) 55%); /* rgbaで指定しないとIEで表示されない */
}
/* ここがポイント */
.box-point{
	background: linear-gradient(rgb(255,255,255) 55%, rgba(205,255,95,0.6) 55%);
}
.box-point::before{
	content: '☆';
	font-size: 27px;
}
.box-point::after{
	content: '☆';
	font-size: 27px;
}
@media only screen and (max-width: 768px) {
	.box-title, .box-point{
		margin: calc(var(--interval) * -4) auto auto 6vw;
		padding: 0;
		line-height: calc(var(--interval) * 8);
		font-size: calc(var(--interval) * 6.4);
	}
	.box-point::before{
		font-size: calc(var(--interval) * 6.4);
	}
	.box-point::after{
		font-size: calc(var(--interval) * 6.4);
	}
}
.box-subtitle{
	margin: -5px 0 5px;
	padding: 0 18px;
	font-weight: bold;
	font-size: 24px;
	color: #ff6e00;
}
@media only screen and (max-width: 768px) {
	.box-subtitle{
		margin:  calc(var(--interval) * -0.5) 0 calc(var(--interval) * 0.5);
		text-align: center;
		font-size: calc(var(--interval) * 6.4);
	}
}
/* 枠内の写真+説明 */
.item{
	display: flex;
	margin: 38px 0 0 0;
}
@media only screen and (max-width: 768px) {
	.item{
		flex-direction:column;
		margin: calc(var(--interval) * -1) 0 auto; /* 枠線分 */
	}
}
/* 枠内に複数の写真+説明を入れる場合，枠線を考慮しないmarginが必要  */
.itembox-r div.item:nth-child(n+3), .itembox-g div.item:nth-child(n+3), .itembox-b div.item:nth-child(n+3){
	margin: 40px 0 0;
}
@media only screen and (max-width: 768px) {
	.itembox-r div.item:nth-child(n+3),	.itembox-g div.item:nth-child(n+3), .itembox-b div.item:nth-child(n+3){
		margin:  0;
	}
}
/* 記事画像 基本は横幅320px */
.itemImg_4by3, .itemImg_3by4, .itemImg_480by384, .itemImg_320by197, .itemImg_5by4, .itemImg_1by1 {/* test */
	flex-shrink: 0; 
	margin: -40px 0 0 auto;
	order: 1; /* pcではdiscriptionの後に, spでは前に */
}
.itemImg_4by3{
	padding: 20px;
}
.itemImg_3by4{
	padding: 20px;
}
/* 2007/0907/ ここがポイント用（widthが例外なだけで後は同じルール） */
.itemImg_480by384{ /* 基本上下左右に20px確保。比率によって下が行からはみ出るので調整。*/
	padding: 20px 20px 36px; /* 20pxに足りない分を追加する。36=20+16，16=384+40 mod 40 */
}
.itemImg_320by197{
	padding: 20px 20px 23px 20px;
}
.itemImg_5by4{
	padding: 20px 20px 4px 20px;
}
.itemImg_1by1{
	padding: 20px 20px 20px 20px;
}

@media only screen and (max-width: 768px) {
	.itemImg_4by3, .itemImg_3by4, .itemImg_480by384, .itemImg_320by197, .itemImg_5by4, .itemImg_1by1{
		display: block;
		box-sizing: border-box;
		width: calc(var(--interval) * 80); /* widthは80%固定 */
		margin: calc(var(--interval) * 10) auto 0;
		order: -1; /* pcではdiscriptionの後に, spでは前に */
	}
	.itemImg_4by3{
		height: calc(var(--interval) * 60);
		padding: 0 0 calc(var(--interval) * 0) 0;
	}
	.itemImg_3by4{
		height: calc(var(--interval) * 110); /* width80に対するheightを10の倍数に切り上げ */
		padding: 0 0 calc(var(--interval) * (10 / 3)); /* 上で切り上げるために増やした分を下の余白にとる */
	}
	.itemImg_480by384{
		height: calc(var(--interval) * 70); 
		padding: 0 0 calc(var(--interval) * 6);
	}
	.itemImg_320by197{
		height: calc(var(--interval) * 50);
		padding: 0 0 calc(var(--interval) * 0.8);
	}
	.itemImg_5by4{
		height: calc(var(--interval) * 70);
		padding: 0 0 calc(var(--interval) * 6);
	}
	.itemImg_1by1{
		height: calc(var(--interval) * 80);
		padding: 0;
	}
}
/* 資料室，枠外で横いっぱいの画像用のつもり */
.img_maxwidth_244{
	flex-shrink: 0; 
	margin: -1px 12px 0;
	order: 1; /* pcではdiscriptionの後に, spでは前に */
	padding: 0 0 29px;
}
@media only screen and (max-width: 768px) {
	.img_maxwidth_244{
		display: block;
		box-sizing: border-box;
		width: 96vw;
		margin: calc(var(--interval) * -10) auto 0;
		order: -1; /* pcではdiscriptionの後に, spでは前に */
		height: calc(var(--interval) * 40);
		padding: 0 0 calc(var(--interval) * 40 - 27vw) 0;
	}
}

/* pc版で枠内に画像を連投用 */
.imgArea{
	display: flex;
	flex-direction: column;
	margin: 0 0 0 auto;
	padding: 0;
	order: 1;
}
/* .item内の画像の２枚目以降はtopのmargineが不要 */
.imgArea img:nth-child(n+2){
	margin: 0 0 0 auto;
}
@media only screen and (max-width: 768px) {
	.imgArea{
		margin: 0 auto;
		order: -1;
	}
}
/* .itembox内の画像につけるキャプション */
.caption, .caption_320by197 {
	text-align: center;
	font-size: 18px;
	font-weight: normal;
	order: 1; /* itemImg準拠 */
}
.caption{
	margin: -20px 0 20px 0; /*半行上にズラして，かつ下にくる画像の位置に影響を与えない */
}
.caption_320by197{
	margin: -17px 0 17px 0; /* 画像が3px下にはみ出てるので17pxズラす */
}
@media only screen and (max-width: 768px) {
	.caption, .caption_3by4, .caption_320by197 {
		text-align: center;
		font-size: calc(var(--interval) * 4.8);
		order: -1; /* itemImg準拠 */
	}
	.caption{
		margin: calc(var(--interval) * -1.5) 0 0 0;/* .descriptionでtopにmarginをとって罫線に寄せてる分をここでは解消してる */
		padding:  0 0 calc(var(--interval) * 1.5) 0;/* このpaddingは上のmarginの帳尻合わせ */
	}
	.caption_3by4{
		margin: calc(var(--interval) * (-1.5 - 10 /3)) 0 0 0;
		padding: 0 0 calc(var(--interval) * (1.5 + 10 /3));
	}
	.caption_320by197{
		margin: calc(var(--interval) * -2.3) 0 calc(var(--interval) * 0) 0;/* .itemImgのズレ0.8分を考慮 */
		padding:  0 0 calc(var(--interval) * 2.3) 0;
	}
}

/* indexへ戻る mathfulからコピペ */
.btn_back {
  text-align: center;
  margin: 1em auto 3em;	/* 6rem auto 0 auto から変更 */
}
.btn_back a {
  display: inline-block;
  font-size: 2rem;
  text-align: center;
  padding: .5rem 6.5rem;
  border: 2px solid;
  border-radius: 3.5rem
}
.btn_back a.color_note_title {
	border-color: #ff6e00 !important;
	background: rgba(255,255,255,.75) !important;
	color: #ff6e00 !important;
}
.btn_back a:hover {
  text-decoration: none !important;
  color: #fff !important
}
.btn_back a:active, .btn_back a:link, .btn_back a:visited {
  text-decoration: none !important
}
.btn_back a.color_note_title:hover {
	background: #ff6e00 !important;
	border-color: #ff6e00 !important;
}
@media only screen and (max-width:768px) {
  .btn_back {
    margin: 4rem auto 1px auto;
    margin: 10.6vw auto 1px auto
  }
  .btn_back a {
    font-size: 2rem;
    font-size: 5.33vw;
    padding: .62rem 5rem;
    padding: 1.66vw 13.3vw;
    border-radius: 9.33vw
  }
}