@charset "utf-8";

/*h2, h4タグ 既定のstyle.cssの適用が抜けない場合は !important; を付けて最優先に
---------------------------------------------------------------------------*/
h2 { /*style.cssを継承したいけど、なぜか効かないので再定義*/
	background: linear-gradient(#404d77, #313f6e 49%, #293765 50%);	/*グラデーション*/
	border-bottom: 4px solid #000;	/*下線*/
	border-image: linear-gradient(to right, #000 0%, #cfd5e2 100%);
	border-image-slice: 1;
	color: #fff;
	font-size: 1.2rem;		/*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
	font-weight: normal;		/*文字の太さを標準に*/
	padding: 5px 0px 5px 20px;	/*h2タグ内の余白。上下、左右の順。*/
	margin: 0 0 20px;		/*h2タグの外側にとるスペース。上、左右、下の順。*/
}

h4 {
	background: #9c9595 !important;
	color: #ffffff !important;
	padding: 5px 0px 5px 5px !important;	/*h4タグ内の余白。上下、左右の順。*/
	font-size: 1.0rem !important;		/*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
}
main h4::first-letter {
	border-left: none !important;	/*左の線の幅、線種、色*/
	padding-left: 0% !important;	/*線と文字との余白*/
}



/*Reviewページ専用のre-menubarブロック初期設定
---------------------------------------------------------------------------*/
#re-mainmenu ul {list-style: none;margin: 0;padding: 0;}

#re-mainmenu {
	/*display: none;*/
	font-size: 85%;		/**/
	font-weight: bold;
	color: #00245d;
	border: 1px;
	max-width: 1500px;	/*意図的な理由でbodyの外にmenubarを記載したのでサイズ指定が必要になった。*/
	margin: 0 auto;		/*上記のため、左寄せになったので→中央配置を指定*/
}

/*開閉用のスタイル*/
#re-mainmenu.db {display: block;}
#re-mainmenu.dn {display: none;}

/*メニュー１個あたりの設定*/
#re-mainmenu ul li {
	background: linear-gradient(rgba(0,0,0,0), #eee 40%, #fff 60%, #fff 80%, #00245d 99%, #8f8f8f);/*グラデーション、rgba()で色を指定すると半透明になる。*/
}

#re-mainmenu a {
	display: block;text-decoration: none;
	text-align: center;	/*テキストを中央に*/
	color: #111;		/*文字色*/
	padding: 6px 0;	/*上下、左右へのメニュー内の余白*/
}
/*マウスオン時*/
#re-mainmenu ul li:hover {
	background: linear-gradient(rgba(0,0,0,0.5), #7b7e85 0%, #fff 15%, #b8b8b8 80%, #00245d 99%, #8f8f8f);/*グラデーション、rgba()で色を指定すると半透明になる。*/
	/*text-shadow: rgb(138, 138, 146) 1px 0 5px;*/
	/*background: #dbdbdb;*/
}



/*-----------------------------
現在表示されている年数部分のスタイルのみ変更したいが・・・・
#re-mainmenu ul li:nth-child(1)>a,
#re-mainmenu ul li:nth-child(9)>a,
#re-mainmenu ul li:nth-child(10)>a,
#re-mainmenu ul li:nth-child(11)>a {
	color: #901b1b;		
} 
-------------------------------*/


/*装飾文字（英語表記）不要だけど残しておく*/
#re-mainmenu span {
	display: block;
	font-size: 0.7em;	/*変更2023/02/21　文字サイズを70%に*/
	opacity: 0.6;		/*透明度。60%色が出た状態。*/
}


/*小さな端末用の開閉ブロック設定
---------------------------------------------------------------------------*/
/*メニューブロック設定*/
.s #re-mainmenu.db {
	position: fixed;overflow: auto;z-index: 100;
	left: 0px;top: 0px;
	width: 100%;
	height: 100%;
	animation: animation1 0.2s both;	/*animation.cssの、animation1を実行する。0.2sは0.2秒の事。*/
	background: #fff;			/*背景色*/
	padding: 5%;				/*余白*/
}

/*メニュー１個あたりの設定*/
.s #re-mainmenu.db a {
	display: block;
	padding: 5px 20px;	/*上下、左右へのメニュー内余白*/
	text-align: left;	/*メニュー内のテキストを左寄せ。センタリングがいいならこの１行を削除。*/
}



/*ドロップダウンメニュー
---------------------------------------------------------------------------*/
/*ドロップダウンを非表示にしておく*/
#re-mainmenu .re-ddmenu_parent ul {
	display: none;
}

/*ドロップダウンメニューを持つ親に矢印アイコンをつける設定*/
a.re-ddmenu::before {
	font-family: "Font Awesome 5 Free";	/*Font Awesomeを使う指定*/
	content: "\f107";	/*使いたいアイコン名をここで指定。Font Awesomeに記載されています。*/
	font-weight: bold;	/*この手の設定がないとアイコンが出ない場合があります*/
	margin-right: 0.5em;	/*アイコンとテキストとの間に空けるスペース*/
}

/*メニューにあるYouTubeへのリンク
---------------------------------------------------------------------------*/
#re-mainmenu img{
	width: 20px;
	margin: 0 2px 4px 0;
}

/*ドロップダウンメニュー１個あたりの設定*/
.re-mainmenu_parent ul a {
	background: #fff !important;	/*背景色*/
	color: #666 !important;		/*文字色*/
	border: 1px solid #ccc;		/*線の幅、線種、色*/
	border-top: none;
}
.re-mainmenu_parent ul a:hover {
	color: #293765 !important;	/*マウスオン時の文字色*/
	background: #f5f5f5 !important;	/*背景色 追記20230221*/
}



/*inner
---------------------------------------------------------------------------*/
.inner {
	max-width: 1450px;	/*サイトの最大幅*/
	padding-top: 10px;
	margin: 0 auto;
}

/*section
---------------------------------------------------------------------------*/
section {overflow: hidden;}




/*画像にマウスオーバーで画像を浮き上がらせる
参考：https://yoncoichi.com/image-transform/
他：不備があって使えなかったが→https://cotodama.co/css_mouseover_img/
---------------------------------------------------------------------------*/
#review-contents a img {
	transition: all 0.4s ease-in-out;
}
#review-contents a img:hover {
	/*transform: translateY(-5px);			 /* マイナス値なので、上に移動 */
	transform: scale(1.05, 1.05);			 /* transform: scale(x, y); 要素をx軸方向、y軸方向に1.2倍拡大する */
	box-shadow: 0 8px 10px -5px #9d9d9d;	/* 影の指定 */
}


/*一覧ブロック（listタイプ）
---------------------------------------------------------------------------*/
/*listはcol1とcol2を囲むボックス*/
#review-contents .list {
	/*メディアクエリにて1000px以上（PC）に「display: flex;」を指定してcol1とcol2を横並びにする。
	スマホはこのままの指定なし＝col1とcol2を縦並びになる。*/
	background: #fff;	/*背景色*/
	width: 96%;
	margin: 0 auto;
	padding: 10px 7px 0 10px;	/*画像を枠いっぱいに配置しない＝ボックスボーダーの内側に余白。上、右、下、左（時計回り）*/
	margin: 0 auto;
	margin-bottom: 20px;	/*ボックスボーダーの外側の下に空ける余白。*/
	border: 1px solid #666;
	/*https://developer.mozilla.org/ja/docs/Web/CSS/box-shadow*/
	box-shadow: 4px 3px 3px rgba(0,0,0,0.3);	/*ボックスボーダーの影。右へ、下へ、ぼかし幅の順番。0,0,0は黒の事で0.5は色が50%出た状態の事。*/
}

/*短い方が.col1、長い方が.col2*/
.col1 {
	flex: 1;	/*１:３の１の方*/
	margin: 0 auto;
	/*border: 1px solid #666;　←レイアウトの確認時に使う*/
}

.col2 {
	flex: 3;	/*１:３の３の3方*/
	margin-left: 12px;
	margin-right: 12px;
	/*border: 1px solid #666;　/*←レイアウトの確認時に使う*/
}

.rev-grid-container {
	display: grid;		/*グリッドレイアウトを採用*/
	flex-wrap: wrap;	/*折り返す*/							
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /*最小180px*/
	column-gap: 10px;	/*列間　画像が自動でサイズ変化すためほぼ関与しない*/
	row-gap: 5px;		/*行間　画像が自動でサイズ変化すためほぼ関与しない*/
	margin: 10px;		/*下に余白*/
}




/*画像に関する設定*/
#review-contents .list img {
	/*スマホなどではwidth:を小さくする方が良い。*/
	/*align-items: center;	/*中のブロックの縦並びの揃え方*/
	/*width: 180px;/*スマホなどはメディアクエリで幅を変更*/
	/*line-height: 5px;
	margin-bottom: 10px;*/
	border: 1px solid #666;
}

/*ボックス内のh4（見出し）タグ*/
#review-contents .list h4 {
	padding-bottom: 10px;	/*CSS .border との間隔*/
	margin-bottom: 0px;	/*下のテキストとの間に空けるスペース*/
	font-size: 1.25rem;		/*文字サイズ。冒頭で指定しているフォントサイズの1.25倍です。*/
	line-height: 1.25em
}
/*ボックス内のp（段落）タグ*/
#review-contents .list p {
	padding: 0;		/*余白のリセット*/
	padding-bottom: 10px;
}

/*画像に関する設定は　#review-contents .list imgでおこなう*/
/*ボックス内のfigure画像
#review-contents .list figure,
#review-contents .list video {
	width: 100%;		
}*/

/*「class="text"」を指定したブロック。テキストブロック。*/
#review-contents .list .explain {
	width: 100%;	/*ブロックの幅。下のpaddingの2%とも連動するので変更の際は注意して下さい。*/
	padding: 0% 2%;	/*上下、左右へのブロック内の余白*/
}

/*偶数目(=even)のブロックの設定（画像とテキストブロックが左右交互に入れ替わる設定です。全部同じむきがよければこのブロックを削除します。）
https://libre-co.com/markup/nth-of-type/*/
#review-contents .list:nth-of-type(even) .col1 {
	order: 1;
}


/*クローラーテキストの修飾（画像の説明、キーワードを囲む枠）
---------------------------------------------------------------------------
/*各月のタイトルの下にある文字に適用する枠の囲み*/
.waku {
	font-size: 1em;
	padding: 0.5em 1em;
	margin: 1px;
	color: #666;/*文字色*/
	background: #FFF;
	border: solid 1px #999;/*線*/
	border-radius: 5px;/*角の丸み*/
}
.waku p {
	margin: 0; 
	padding: 0;
}

/*2023/3/8追記 クローラーテキストの修飾（枠の色と背景色を変更→少し目立たせた。）
---------------------------------------------------------------------------
上記の.waku にある一部の属性値を変更（他の属性はそのまま継承）
style.css の.iconを継承して上記の.waku　.waku pを削除して
HTMLの<div class="icon waku">を<div>に略記可能*/
.explain > div { 			/*クラス名explainのあるタグ（親要素）に囲まれた全ての子要素（div）に適用する*/
	display: inline-block;
	border-radius: 4px;/*角の丸み*/
	line-height: 1;
	margin: 1px 0;		/*スマホではこの設定が適切、PCでは効果なし*/
	padding: 3px 8px;	/*上下、左右へのアイコン内の余白*/
	font-size: 0.8em;
	border: solid 1px #f0e8ce;	/*枠の色を薄い金色に変更*/
	background: #f7f7f7;		/*背景色を無色から薄いグレーに変更*/
}





/*---------------------------------------------------------------------------
2021/02/21 追記：画面幅1000px以下で表示させたくないもの
---------------------------------------------------------------------------*/
@media screen and (max-width:1000px) {


/*@media screen and (max-width:1100px)ここまで*/

}


/*---------------------------------------------------------------------------
ここから下は画面幅414px以下の追加指定
---------------------------------------------------------------------------*/
@media screen and (max-width:414px) {


.col1 {
	padding-top: 0px;
	line-height: 6px;
	/*border: 1px solid #666;　←レイアウトの確認時に使う*/
}

.rev-grid-container {
	grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); /*最小80px*/
	column-gap: 5px;	/*列間*/
	row-gap: 5px;		/*行間*/
	margin: 0 0 10px -6	px;		/*下に歩役*/
}	

/*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　*/

}


/*---------------------------------------------------------------------------
ここから下は画面幅415px以上430px以下の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:415px) and (max-width:430px){

/*短い方が.col1、長い方が.col2*/
.col1 {
	padding-top: 0px;
	line-height: 6px;
	/*border: 1px solid #666;　←レイアウトの確認時に使う*/
}

.col2 {
	flex: 3;	/*１:３の３の3方*/
	margin-left: 12px;
	margin-right: 0px;
	/*border: 1px solid #666;　/*←レイアウトの確認時に使う*/
}


.rev-grid-container {
	grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); /*最小80px*/
	column-gap: 5px;	/*列間*/
	row-gap: 5px;		/*行間*/
	margin: 0 5px 10px -10px;		/*下に歩役*/
}	

/*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　*/

}


/*---------------------------------------------------------------------------
ここから下は画面幅600px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:600px) {

h4 {
	width: 93%;
}

.col2 {
	flex: 3;	/*１:３の３の3方*/
	margin-left: 14px;
	margin-right: 6px;
	/*border: 1px solid #666;　/*←レイアウトの確認時に使う*/
}
.rev-grid-container {
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /*最小150px*/
	column-gap: 5px;	/*列間*/
	row-gap: 5px;		/*行間*/
	margin: 0 5px 10px -10px;		/*下に歩役*/
}	

/*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　*/

}


/*---------------------------------------------------------------------------
ここから下は画面幅1000px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:1000px) {

#review-contents .list {
	display: flex;
}

h2 {
	background: url(../images/arrow.png) no-repeat left center, linear-gradient(#404d77, #313f6e 49%, #293765 50%);	/*左側に透過画像を付ける。*/
	padding: 5px 0px 5px 50px;	/*h2タグ内の余白:20→50pxへ画像の左側の余白を広げた。→ arrow.png に文字が重ならないようにするため。*/
}

.rev-grid-container {
	column-gap: 10px;	/*列間*/
	row-gap: 15px;		/*行間*/
}	

/*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　1000以上ここまで。*/

}