@charset "utf-8";



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

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

/*GoogleMap用のテンプレートスタイルの読み込み
---------------------------------------------------------------------------*/
@import url("style_map.css");



/*全体の設定
---------------------------------------------------------------------------*/
html,body {
	margin: 0;padding: 0;
	font-size: 14px;	/*基準となるフォントサイズ。下の方にある「画面幅900px以上」で基準を大きなサイズに再設定しています。*/
}

body {
	font-family: "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	-webkit-text-size-adjust: none;
	background: #fff;	/*背景色*/
	color: #333;		/*全体の文字色*/
	line-height: 2;		/*行間*/
}

/*リセット*/
figure {margin: 0;}
dd {margin: 0;}
nav {margin: 0;padding: 0;}

/*table全般の設定*/
table {border-collapse:collapse;}

/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

/*videoタグ*/
video {max-width: 100%;}

/*iframeタグ*/
iframe {width: 100%;}


/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: #333;	/*文字色*/
	transition: 0.3s;
}

a:hover {
	color: #7fc949;	/*マウスオン時の文字色*/
}


/*header
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	position: relative;z-index: 1;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #7fc949;	/*背景色*/
	padding: 0px 20px;		/*上下、左右へのヘッダー内の余白*/
	height: 50px;			/*高さ。ここを変更する場合、style_map.cssの#mapのheightも変更します。*/
}

/*ロゴ*/
header #logo {
	margin: 0;line-height: 0;
	font-weight: normal;
	font-size: 1.6rem;
	letter-spacing: 0.1em;
}
header #logo a {
	text-decoration: none;
}
/*ロゴのテキストを画像に置き換えた場合の設定*/
header #logo img {
	height: 26px;	/*高さ*/
}

/*header内のメニュー
---------------------------------------------------------------------------*/
header ul {
	list-style: none;margin: 0;
	display: flex;
}
header li {
	margin-left: 10px;	/*メニュー同士の余白*/
}
header a,header a:hover {
	color: #fff;		/*文字色*/
}


/*contentsブロック
---------------------------------------------------------------------------*/
#contents {
	margin: 3%;
}


/*一覧ブロック
---------------------------------------------------------------------------*/
/*１個あたりのボックスの指定*/
.list {
	display: flex;	/*flexボックスを使う指定*/
	border-bottom: 1px solid #ccc;	/*下線の幅、線種、色*/
	padding: 25px 0;	/*上下、左右へのボックス内の余白*/
}

/*１つ目のボックスにのみ上に線を入れる*/
.list:nth-of-type(1) {
	border-top: 1px solid #ccc;	/*上の線の幅、線種、色*/
}

/*１つ目のボックス。写真と地図をみるボタン。*/
.list div:nth-of-type(1) {
	width: 20%;			/*画像の幅*/
	margin-right: 20px;	/*画像の右側に空けるスペース*/
}
.list div:nth-of-type(1) img {
	width: 100%;
	margin-bottom: 10px;
}
/*２つ目ボックス。右側テキスト欄。*/
.list div:nth-of-type(2) {
	width: calc(80% - 20px);
}

/*ボックス内のh4タグ*/
.list h4 {
	margin: 0;				/*デフォルトマージンを一旦リセット*/
	margin-bottom: 10px;	/*下に少し余白を作る*/
}

/*ボックス内のpタグ*/
.list p {
	margin: 0;
	font-size: 0.7em;		/*文字サイズを70%に。*/
}

/*「地図を見る」ボタン*/
.list span.btn {
	display: block;
	cursor: pointer;
	text-align: center;
	background: #7fc949;	/*背景色*/
	color: #fff;			/*文字色*/
}


/*list内のtableっぽく見える所。
---------------------------------------------------------------------------*/
/*ボックス全体*/
dl.line {
	margin: 0;
	display: flex;		/*flexボックスを使う指定*/
	flex-wrap: wrap;	/*折り返す指定*/
	font-size: 0.7em;	/*文字サイズを70%に。*/
	border-top: 1px solid #ccc;	/*上の線の幅、線種、色*/
}

/*左右のボックス*/
dl.line dt, dl.line dd {
	border-bottom: 1px solid #ccc;	/*下線の幅、線種、色*/
	padding: 0 5px;					/*上下、左右へのボックス内の余白*/
}

/*左のボックス*/
dl.line dt {
	width: 9em;				/*幅。9文字(em)分。*/
	background: #f0f0f0;	/*背景色*/
}
/*右のボックス*/
dl.line dd {
	width: calc(100% - 9em);	/*「9em」は上の「dl.line dt」のwidthの値です。*/
}

/*list2ブロック内でのline設定*/
.list dl.line dt:nth-of-type(1), .list dl.line dd:nth-of-type(1),
.list dl.line dt:nth-of-type(2), .list dl.line dd:nth-of-type(2) {
	border-top: none;
}


/*フッター設定（最下部のコピーライトの部分）
---------------------------------------------------------------------------*/
footer small {font-size: 100%;}
footer {text-align: center;}
footer .pr {display: block;}


/*list内で使うアイコン
---------------------------------------------------------------------------*/
/*アイコンの共通設定*/
.icon {
	display: inline-block;
	padding: 0 10px;	/*上下、左右へのアイコン内の余白*/
	background: #999;	/*背景色。iconクラスだけ適用した場合に出る色です。*/
	color: #fff;		/*文字色*/
	font-size: 0.7em;	/*文字サイズを70%に。*/
}

/*枠線だけが入ったデザイン*/
.waku {
	background: #fff;		/*背景色*/
	color: #666;			/*文字色*/
	border: 1px solid #666;	/*枠線の幅、線種、色*/
}

/*NEWアイコン*/
.newicon {
	background: #e82600;	/*背景色*/
}

/*UPアイコン*/
.upicon {
	background: #0078e8;	/*背景色*/
}

/*option1アイコン（人気）*/
.option1 {
	background: #e80068;	/*背景色*/
}

/*option2アイコン（急募）*/
.option2 {
	background: #5ab600;	/*背景色*/
}

/*option3アイコン（終了）*/
.option3 {
	background: #ccc;		/*背景色*/
}


/*その他
---------------------------------------------------------------------------*/
.c {text-align: center !important;}
.ws {width: 100%;}
.wl {width: 100%;}
.color1 {color: #ff0000;}
.big1 {font-size: 150%;}



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


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


/*一覧ブロック
---------------------------------------------------------------------------*/
/*１個あたりのボックスの指定*/
.list {
	padding-left: 10px;	/*ボックス内の左側にだけ余白を作る*/
}


/*list内のtableっぽく見える所。
---------------------------------------------------------------------------*/
/*list2ブロック内でのline設定*/
.list dl.line dd {
	width: calc(50% - 9em - 10px);	/*大きな端末向けの再設定。２列にしたいので、100%でなく半分の50%から引いています。*/
	margin-right: 10px;				/*２列になった際の間のスペース*/
}

.list dl.line {border-top: none;}

.list dl.line dt:nth-of-type(1), .list dl.line dd:nth-of-type(1),
.list dl.line dt:nth-of-type(2), .list dl.line dd:nth-of-type(2) {
	border-top: 1px solid #ccc;
}


/*その他
---------------------------------------------------------------------------*/
.ws {width: 50%;}


}