@charset "utf-8";


/*リセットCSS（ress.css）の読み込み
---------------------------------------------------------------------------*/
@import url("https://unpkg.com/ress/dist/ress.min.css");

/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");

/*slick.cssの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css");


/*全体の設定
---------------------------------------------------------------------------*/

/*listボックスを囲むボックス*/
.list-container {
	display: flex;		/*flexボックスを使う指定*/
	flex-wrap: wrap;	/*折り返す指定*/
	padding: 0 4px;		/*上下、左右へのボックス内の余白*/
}

/*１個あたりのボックス*/
.list {
	width: 49%;		/*ボックスの幅*/
	margin-bottom: 4px;	/*ボックス同士の上下間の余白*/
	margin-right: 2px;	
	padding: 0px;		/*ボックス内の余白*/
	position: relative;
	overflow: hidden;
	transition: 0.3s;	/*アニメーションにかける時間 0.3秒 */
	box-shadow: 0px 0px 20px rgba(0,0,0,0.2); /*ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒の事で0.2は色が20%ついた状態。*/
	background: #fff;	/*背景色*/
}

/*偶数のボックスの右側マージンをなくす */
.list:nth-of-type(even) {
	margin-right: 0;
}

/*マウスオン時にボックスの影を少し濃くする*/
.list:hover {
	box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
}


/*ボックス内のpタグ 指定した行数までを表示 */
.list p {
	margin: 0!important;	/*「main p」のマージンをリセットする*/
	display: -webkit-box;
        text-align: center;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;	/*表示させたい行数。変更する際は、下の「IE対策」の「height」も変更して下さい。*/
	font-size: 0.7rem;	/*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
	color: #fff;		/*文字色*/
        line-height: 2.21em;	/*IE対策。行間。１行あたりの高さの事。1.5文字分。*/
        max-height: 2.2em;	/*IE対策。最大の高さ。1.5emの3倍の4.5emになっているので、3行分という事。*/
	background: black;	/*背景色*/

}

/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

.pagetop a {
	display: block;text-decoration: none;text-align: center;
	width: 35px;		/*幅*/
	line-height: 35px;	/*高さ*/
	position: fixed;
	right: 20px;		/*右からの配置場所指定*/
	bottom: 20px;		/*下からの配置場所指定*/
	color: #fff;		/*文字色*/
	background: rgba(0,0,0,0.4);	/*背景色。0,0,0は黒色の指定で0.4は色が40%出た状態。*/
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
}

/*マウスオン時*/
.pagetop a:hover {
	background: rgba(0,0,0,0.8);	/*背景色。0,0,0は黒色の指定で0.8は色が80%出た状態。*/
}


/*pickupスライドショーコーナー（slickを使用）
---------------------------------------------------------------------------*/
/*スライドショー全体を囲むボックス*/
.pickup {
	position: relative;
	display: flex;			/*flexボックスを使う指定*/
}

/*マウスオン時の設定。
マウスオンでスライドがストップしてしまうので、それがわかりやすいようにopacityを設定しました。
もしマウスオンでストップさせたくない場合は、slick.cssの「//pauseOnHover: false,」の行の冒頭の「//」を外して適用して下さい。*/
.pickup .list:hover figure {
	opacity: 0.8;	/*透明度。色が80%出た状態。*/
}

/*１個あたりのボックス*/
.pickup .slick-slide {
	margin: 5px !important;
	width: auto;
}

/*ボックス内のpタグの最大の高さ。
max-heightにするとslick内で高さを統一できなかったので、応急措置でheightのみ指定。
3行分を確保したかったので、1.5emの3倍で本来なら「4.5em」なのですが、
なぜか画面幅によってほんの少しテキストのかけらが見えてしまったので「4.4em」にしました。*/
.pickup .list p {
    height: 1.4em;
}

/*ボックス内の画像*/
.pickup .list img {
	object-fit: cover;	/*トリミングのタイプ*/
	height: 140px;		/*画像の高さ。下の方で数カ所再設定があります。*/
	width: 100%;		/*画像の幅*/
	font-family: 'object-fit: cover;';	/*IE対策*/
}

/*左右の三角矢印の共通設定*/
.slick-arrow {
	position: absolute;
	bottom: 40%;	/*下からの配置場所*/
}

/*左右の三角矢印の共通設定。マウスオン時。*/
.slick-arrow:hover {
	cursor: pointer;
	opacity: 0.8;
}

/*左右の三角矢印の形、色、サイズ*/
.slick-prev::after,
.slick-next::after {
	display: block;
	content: "▼";		/*この形を出力する。このままだと下向き矢印になってしまうので、下の方の設定でそれぞれ90度回転させています。*/
	color: #999;		/*三角の色*/
	font-size: 1.4rem;	/*三角のサイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
        z-index: 10;
}

/*左側の三角*/
.slick-prev {
	left: 0px;	/*左からの配置場所*/
}

/*左側の三角を回転させる指定*/
.slick-prev::after {
	transform: rotate(90deg);
}

/*右側の三角*/
.slick-next {
	right: 3px;	/*右からの配置場所*/
}

/*右側の三角を回転させる指定*/
.slick-next::after {
	transform: rotate(-90deg);
}

/*スライドショー（slickを使用）
---------------------------------------------------------------------------*/
.mainimg {
	position: relative;
	padding: 0 !important;
}

/*マウスオン時の設定。
マウスオンでスライドがストップしてしまうので、それがわかりやすいようにopacityを設定しました。
もしマウスオンでストップさせたくない場合は、slick.cssの「//pauseOnHover: false,」の行の冒頭の「//」を外して適用して下さい。*/
.mainimg:hover {
	opacity: 0.8;	/*透明度。色が80%出た状態。*/
}

/*丸いページナビボタン全体を囲むブロック*/
.slick-dots {
	text-align: center;
	width: 100%;
	margin:0;
	line-height: 1;
	position: absolute;
	bottom: -20px;	/*下からの配置場所指定*/
}

/*丸いページナビボタン１個あたりの設定*/
.slick-dots li {
	display: inline-block;
	margin: 0 10px;
	cursor: pointer;
}

/*buttonタグ*/
.slick-dots li button {
	display: block;
	text-indent: -9999px;	/*デフォルトで文字が出るので画面の外に追い出す指定*/
	width: 12px;			/*ボタンの幅*/
	height: 12px;			/*ボタンの高さ*/
	border-radius: 50%;		/*丸くする指定*/
	cursor: pointer;		/*クリックで画像へジャンプするので、わかりやすいようhover時にpointerになるように。*/
	background: #999;		/*背景色。白。*/
}

/*buttonのアクティブ時（現在表示されている画像を示すボタン）*/
.slick-dots li.slick-active button {
	background: #2ff;	/*色*/
}


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

/*ボックス内の画像*/
.pickup .list img {
	height: 160px;		/*画像の高さ*/
}

/*　※注意！　下の閉じカッコ　}　は480px以上の設定に必要なので、うっかり削除しないように。　*/

}

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

/*ボックス内の画像*/
.pickup .list img {
	height: 220px;		/*画像の高さ*/
}


/*マウスオン時*/
.pagetop a:hover {
	background: rgba(0,0,0,0.8);	/*背景色。0,0,0は黒色の指定で0.8は色が80%出た状態。*/
}

/*　※注意！　下の閉じカッコ　}　は600px以上の設定に必要なので、うっかり削除しないように。　*/

}


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

/*全体の設定
---------------------------------------------------------------------------*/
html, body {
	font-size: 18px;	/*基準となるフォントサイズの上書き*/
}

/*section全般の設定*/
section + section {
	padding-top: 50px;	/*sectionの間に空けるスペース*/
}

/*mainブロック設定
---------------------------------------------------------------------------*/
/*mainブロックの設定*/
main {
	padding: 50px;	/*ボックス内の余白*/
}


/*listブロック設定
---------------------------------------------------------------------------*/
/*１個あたりのボックス*/
.list {
	width: 23%;				/*ボックスの幅*/
	margin-bottom: 20px;	/*ボックス同士の上下間の余白*/
	margin-right: 2.66%;	/*（2022/09/22更新）*/
}
/*偶数のボックスの右側マージンを再指定。
これがないと小さな端末のマージン0が引き継がれてレイアウトが崩れます。*/
.list:nth-of-type(even) {
	margin-right: 2.66%;	/*※下の指定より先に記載する*/
}
/*4の倍数のボックスの右側マージンをなくす（2022/09/22更新）*/
.list:nth-of-type(4n) {
	margin-right: 0;
}

/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

.pagetop a {
	width: 40px;		/*幅*/
	line-height: 40px;	/*高さ*/
	right: 25px;		/*右からの配置場所指定*/
	bottom: 25px;		/*下からの配置場所指定*/
}


/* pickupスライドショーコーナー（slickを使用）
---------------------------------------------------------------------------*/
/* スライドショー全体を囲むボックス */
.pickup {
	padding: 20px;		/*ボックス内の余白*/
}

/*１個あたりのボックス*/
.pickup {
	margin: 10px !important;
}

/*ボックス内の画像*/
.pickup .list img {
	height: 200px;		/*画像の高さ*/
}

/*　※下の閉じカッコ　}　は800px以上の設定に必要なので削除しないこと　*/

}


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

/*ボックス内の画像*/
.pickup .list img {
	height: 240px;		/*画像の高さ*/
}

/*　※下の閉じカッコ　}　は1000px以上の設定に必要なので削除しないこと　*/

}