@charset "utf-8";

/* メインイメージ
------------------------------------ */
.main_img {
	padding: 0;
	margin: 0 auto;
	height: 600px;
	background: url('./img/main.jpg') no-repeat;
	background-size: cover;
	background-position: bottom;
	opacity: 0.9;
	position: relative;
}
	.main_img .describe {
		padding: 32px 42px;
		margin: 0 auto;
		z-index:1;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-right: -50%;
		transform: translate(-50%, -50%);
		text-align: center;
		font-size: 1.3em;
		color: #474747;
		border: solid 2px #fff;
		line-height: 2em;
		background: hsla(0, 0%, 100%, 0.25);
	}
	/* スマホ */
	@media screen and (max-width: 480px) {
		.main_img {
			height: 300px;
		}
			.main_img .describe {
				width: 90%;
				padding: 24px 24px;
				font-size: 1em;
			}
	}

/* コンテンツボックス
------------------------------------ */
.content_box {
	padding: 60px 0px;
}

/* コンテンツタイトル */
h2.content_title {
	position: relative;
	padding: 0 65px;
	margin: 30px 0 48px 0;
	text-align: center;
	font-weight: normal;
	font-size: 1.6em;
}
h2.content_title:before {
	position: absolute;
	top: calc(50% - 1px);
	left: 0;
	width: 100%;
	height: 1px;
	content: '';
	background: #a0a0a0;
}
	h2.content_title span {
		position: relative;
		padding: 0 1em;
		background: #fff;
	}

/* indexコンテンツ
------------------------------------ */
.about_box {
	padding-bottom: 32px;
	margin-bottom: 10px;
}
	.about_box h3.index_title {
		font-size: 1.4em;
		padding: 0 0 12px 0;
		margin: 0;
		color: #2582a7;
	}
	.about_box .img_block {
		padding: 0;
		margin-bottom: 10px;
	}
	.about_box .text_block_right {
		padding: 30px 50px 0 50px;
	}
	.about_box .text_block_left {
		padding: 30px 0px 0 0;
	}
		.about_box .text_block p {
			line-height: 2em;
		}
@media screen and (max-width: 430px) {
	section.about_box {
		padding-bottom: 0;
		margin-bottom: 0;
	}
	.about_box .text_block_right {
		padding: 20px 10px;
	}
	.about_box .text_block_left {
		padding: 20px 10px;
	}
}


/* ボタン
------------------------------------ */
.border_btn_area {
	padding: 20px 10px;
}
	.border_btn_area .borde_botton a {
		display: flex;
		/* justify-content: space-between; */
		align-items: center;
		position: relative;
		margin: 0 auto;
		padding: 0.8em 1em 1.2em 1em;
		color: #333;
		background-color: #f5f3f3;
		transition: 0.3s;
		font-size: 15px;
		width: 100%;
		text-align: center;
		display: inline-block;
	}
	.border_btn_area .borde_botton a::before {
		content: '';
		position: absolute;
		top: -5px;
		left: -5px;
		width: calc(100% - 2px);
		height: calc(100% - 2px);
		border: 2px solid #2582a7;
		transition: 0.2s;
	}
	.border_btn_area .borde_botton a::after {
		/* content: ''; */
		width: 5px;
		height: 5px;
		border-top: 3px solid #333333;
		border-right: 3px solid #333333;
		transform: rotate(45deg);
	}
	.border_btn_area .borde_botton a:hover::before {
		top: 0;
		left: 0;
	}
	.border_btn_area .borde_botton a:hover {
		padding: 0.8em 8% 1.2em 8%;
		text-decoration: none;
		background-color: #fff;
		color: #333;
		/* background-color: #a0c4d3; */
	}
	/* スマホ */
	@media screen and (max-width: 480px) {
		.border_btn_area .borde_botton a {
			padding: 0.8em 0.8em 1.2em 0.8em;
			width: 100%;
		}
	}
	/* ipad */
	@media all and (min-width: 480px) and (max-width: 1366px) {
		.border_btn_area .borde_botton a {
			padding: 0.7em 1em 1.1em 1em;
			width: 90%;
		}
		.border_btn_area .borde_botton a:hover {
			padding: 0.7em 12% 1.1em 12%;
			text-decoration: none;
			background-color: #fff;
			color: #333;
			/* background-color: #a0c4d3; */
		}
	}

/* ニュース
------------------------------------ */
.news {
	background: #f3f3f3;
	border-bottom: solid 1px #f3f3f3;
	padding: 18px 10px;
	color: #3a3a3a;
}
	.news span.news_cat {
		font-size: 0.75em;
		display: inline-block;
		border-radius: 4px;
		padding: 2px 6px;
		margin-right: 18px;
		background: #F45D6F;
		color: #fff;
	}
	.news span.news_date {
		padding-right: 10px;
	}
	.news span.news_text {
		display: inline-block;
		padding: 0px 0px;
	}

/* indexページのカテゴリー表示
------------------------------------ */
.index_area_box {
	padding-bottom: 30px;
}
	.index_area_box .img_block {
		padding: 0 6px 10px 6px;
		position: relative;
		bottom:0;
	}
		.index_area_box .img_block .band {
			position: absolute;
			top: 50%;
			left: 50%;
			-ms-transform: translate(-50%,-50%);
			-webkit-transform: translate(-50%,-50%);
			transform: translate(-50%,-50%);
			color: #333;
			margin: 0;
			padding: 10px;
			font-size: 1.3em;
			background: rgba(255, 255, 255, 0.5);
			width: 80%;
			text-align: center;
		}

/* 登録フォームへのリンクについて
------------------------------------ */
.link_join_area {
	background: #f8f8f4;
	padding: 60px 0px;
	text-align: center;
}
	.link_join_area h2 {
		padding: 20px 0;
		font-size: 1.5em;
	}
	.link_join_area a.btn_join {
		background: #F45D6F;
		margin: 10px auto;
		padding: 10px 20px;
		border-radius: 8px;
		display: inline-block;
		text-align: center;
		color: #fff;
	}
		.link_join_area a.btn_join:hover {
			color: #fff;
		}

/* パンくず
------------------------------------ */
.crumbs {
	background: #f8f8f4;
	padding: 10px;
	margin-bottom: 20px;
	font-size: 0.8em;
}
.crumbs span {
	font-size: 1.3em;
}

.material-icons,
.material-icons-outlined {
	display: inline-flex;
	vertical-align: middle;
	padding-bottom: 3px;
}

/* しおり・ブログ一覧表示の外枠
------------------------------------ */
.photo_blocks {
	padding: 36px 0 40px 0;
	margin:0;
}
	/* ブログ一覧表示の部分
	------------------------------------ */
	.photo_blocks .photo_block {
		padding: 10px;
		margin: 0 auto 20px auto;
		border: solid 2px #e4e4e4;
	}
		.photo_blocks .photo_block h3 {
			text-align: center;
			padding: 20px 20px 10px 20px;
			font-size: 1.2em;
			margin: 0;
		}
		.photo_blocks .photo_block .tags {
			font-size: 0.7em;
			border:solid 1px #ccc;
			border-radius: 4px;
			padding: 2px 8px;
			margin: 0 3px 10px 0;
			display: inline-block;
		}
			.photo_blocks .photo_block .tags span.material-icons {
				font-size: 1em;
			}

		.photo_blocks .photo_block .area_name {
			padding: 4px 0;
			color: #363636;
		}
			.photo_blocks .photo_block .area_name span.material-icons {
				font-size: 0.9em;
				color: #363636;
			}

		.photo_blocks .photo_block .img_block {
			padding: 0;
		}
			.photo_blocks .photo_block .img_block img {
				width: 100%;
				height: 150px;
				object-fit: cover;
			}

		.photo_blocks .photo_block p {
			padding: 10px 0 20px 0;
			margin: 0;
			color: #4e4e4e;
		}

			/* 絞り込み検索 */
			.photo_blocks .search {
				background: #f5f5f5;
				padding: 30px;
				margin: 0 auto 30px auto;
			}
				.photo_blocks .search h2.search_title {
					padding-bottom: 10px;
					font-size: 1.2em;
				}
				.photo_blocks .search .bookmark_tags {
					padding: 0 10px 12px 10px;
				}
					.photo_blocks .search .bookmark_tags .tag {
						padding: 3px 6px;
						margin: 0 4px 4px 0;
						display: inline-block;
						border: solid 1px #ccc;
						border-radius: 4px;
						background: #fff;
						font-size: 0.8em;
					}
						.photo_blocks .search .bookmark_tags .tag .material-icons {
							font-size: 1em;
						}
					.photo_blocks .search .bookmark_tags button {
						padding: 4px 8px;
						margin: 0 4px 8px 0;
						display: inline-block;
						border-radius: 4px;
						font-size: 0.8em;
						background: #efefef;
						border: solid 1px #ddd;
					}
					.photo_blocks .search .bookmark_tags button span.material-icons {
						font-size: 1em;
					}
				.photo_blocks .search .more_view {
					padding: 10px 10px 0 10px;
					margin: 0;
					font-size: 0.9em;
					text-align: center;
				}

	/* しおり一覧表示の部分
	------------------------------------ */
	.photo_blocks .shiori_block {
		padding: 12px;
		margin: 0 auto 26px auto;
	}
		.photo_blocks .shiori_block .img_block {
			padding: 0 0 20px 0;
		}
			.photo_blocks .shiori_block .img_block img {
				width: 100%;
				height: 180px;
				object-fit: cover;
			}
		.photo_blocks .shiori_block h3 {
			padding: 0 0 10px 0;
			font-size: 1.1em;
			margin: 0;
		}
		.photo_blocks .shiori_block p {
			padding: 0 0 0 0;
			font-size: 0.9em;
		}
		.photo_blocks .shiori_block .user_pref {
			padding: 2px 4px;
			background: #4671bb;
			border-radius: 3px;
			color: #fff;
			font-size: 0.7em;
			display: inline-block;
		}
		.photo_blocks .shiori_block .coupon {
			padding: 2px 4px;
			background: #F45D6F;
			border-radius: 3px;
			color: #fff;
			font-size: 0.7em;
			display: inline-block;
		}

/* 表示方法変更の部分 */
.view_icons {
	padding: 0 0 10px 0;
	margin: 0;
	text-align: right;
}
	.view_icons span {
		padding: 0 0 0 10px;
	}

/* しおり・ブログから探す
------------------------------------ */
.search_list {
	padding: 46px 0 40px 0;
	margin: 0 auto;
}
	.search_list h3 {
		font-size: 1.2em;
		padding: 10px 0 8px 0;
		margin: 0;
	}
		.search_list h3 span.material-icons {
			vertical-align: top;
			color: #248ca7;
			font-size: 1.1em;
		}
	.search_list .cat_list {
		margin-bottom: 20px;
		padding: 30px;
		background: #fafafa;
	}
		.search_list .cat_list ul {
			padding: 10px 0px 30px 0px;
			margin: 0 auto;
		}
			.search_list .cat_list ul li {
				list-style: none;
				padding: 6px 14px;
				margin: 0 10px 10px 0px;
				display: inline-block;
				border-radius: 6px;
				background: #fff;
			}
/* 全て見るボタン */
.see_all {
	font-size: 0.9em;
	text-align: center;
	padding: 0 20px;
}
	.see_all .material-icons {
		font-size: 1.2em;
	}


/* ページナビゲーション
------------------------------------ */
.pagenav {
	margin: 0 auto 0px auto;
	padding: 10px 0 30px 0;
	text-align: center;
}
	.pagenav .num {
		padding: 3px 12px;
		margin: 0;
		display: inline-block;
	}
		.pagenav .num span.now {
			color:#336886;
		}
	.pagenav .arrow {
		padding: 3px 12px;
		margin: 0;
		display: inline-block;
	}
	.pagenav .arrow span {
		font-size: 1em;
		vertical-align: middle;
	}

/* ログインページ
------------------------------------ */
.login_form_area {
	padding: 36px 0;
	margin: 0px auto;
}
	.login_form_area .form_box {
		padding: 32px;
		margin: 0 auto;
		text-align: center;
	}
		.login_form_area .form_box label {
			display: inline-block;
			width: 10%;
		}
		.login_form_area .form_box input {
			display: inline-block;
			width: auto;
		}
		.login_form_area .form_box .btn_area {
			padding: 20px;
		}
		.login_form_area .form_box .others{
			font-size: 0.9em;
			padding: 10px 0;
		}
			.login_form_area .form_box .others a {
				padding-bottom: 10px;
				display: block;
				width: fit-content;
				margin: 0 auto;
			}
				.login_form_area .form_box .others a .material-icons {
					font-size: 1em;
				}

/* パスワード忘れページ
------------------------------------ */
.forget_form_area {
	padding: 36px 0;
	margin: 0px auto;
}
	.forget_form_area .form_box {
		padding: 32px;
		margin: 0 auto;
		text-align: center;
	}
		.forget_form_area .form_box label {
			display: inline-block;
			width: 20%;
			text-align: left;
		}
		.forget_form_area .form_box input {
			display: inline-block;
			width: auto;
		}
		.forget_form_area .form_box .btn_area {
			padding: 20px;
		}
		.forget_form_area .form_box .others{
			font-size: 0.9em;
			padding: 10px 0;
		}

/* 会員登録ページ
------------------------------------ */
.join_form_area {
	padding: 36px 0;
	margin: 0px auto;
}
	.join_form_area .form_attention {
		background: #f5f5f5;
		padding: 20px;
		margin-bottom: 20px;
	}
		.join_form_area .form_attention p {
			padding: 10px;
		}
		.form_attention a,
		.form_attention a:link,
		.form_attention a:visited {
			color: #F45D6F;
			font-weight: bold;
			text-decoration: underline;
		}
	.join_form_area .form_box {
		padding: 32px;
		margin: 0 auto;
		text-align: center;
	}
		.join_form_area .form_box label {
			display: inline-block;
			width: 20%;
			text-align: left;
			vertical-align: top;
		}
		.join_form_area .form_box input,
		.join_form_area .form_box select,
		.join_form_area .form_box textarea {
			display: inline-block;
			width: 70%;
		}
		.join_form_area .form_box .btn_area {
			padding: 20px;
		}

/* プライバシーポリシーページ
------------------------------------ */
.policy_area {
	padding: 30px 0;
	margin: 0;
}
	.policy_area dl.policy {
		padding: 0 0 30px 0;
		margin: 0;
	}
		.policy_area dl.policy dt {
			padding: 0 0 10px 0;
			margin: 0;
		}
		.policy_area dl.policy dd {
			padding: 0 0 30px 0;
			margin: 0;
		}

/* 利用規約ページ
------------------------------------ */
.terms_area {
	padding: 36px 0;
	margin: 0px auto;
}
.terms {
	padding: 0 0 30px 0;
	margin: 0;
}
	.terms dl.terms_list {
		margin-bottom: 30px;
	}
		.terms dl.terms_list dt {
			padding: 0 0 4px 0;
			margin: 0 0 10px 0;
			border-bottom: solid 1px #ddd;
			font-size: 1.2em;
			font-weight: normal;
		}
			.terms dl.terms_list dt::before {
				content: '\e8fd';
				font-family: "Material Icons";
				vertical-align: top;
				font-size: 1.2em;
				padding-right: 6px;
			}
		.terms dl.terms_list dd {
			padding: 0 0 50px 0;
			margin: 0;
			line-height: 2em;
		}
			.terms dl.terms_list dd ol {
				padding: 10px 30px;
				margin: 10px auto;
			}
				.terms dl.terms_list dd ol li {
					padding: 0 0 6px 0;
					margin: 0;
				}

/* お知らせ一覧ページ
------------------------------------ */
.info_area {
	padding: 36px 0;
	margin: 0px auto;
}
	.info_area .info {
		padding: 10px;
		margin: 0 0 40px 0;
		border: solid 1px  #eee;
	}
		.info_area .info h3.info_title {
			padding: 10px 6px 3px 6px;
			margin: 0 0 4px 0;
			font-size: 1.1em;
			color: #2582a7;
			background: #f8f8f4;
		}
			.info_area .info h3.info_title span.important {
				padding: 4px 6px;
				margin: 0 0 0 10px;
				display: inline-block;
				font-size: 0.8em;
				background: #F45D6F;
				color: #fff;
				border-radius: 3px;
				vertical-align: top;
			}
		.info_area .info p {
			padding: 0 10px 20px 10px;
			margin: 0;
		}
			.info_area .info p.date {
				padding: 4px 4px;
				margin: 0 0;
				text-align: right;
				font-size: 0.8em;
		}


/* サイトマップ
------------------------------------ */
.sitemap {
	padding: 36px 0 50px 0;
}
	.sitemap a {
		padding: 0 0 6px 3px;
		margin-bottom: 8px;
		display: block;
		border-bottom: solid 1px #ccc;
	}
	/* .sitemap a::before {
		font-family: 'Material Icons';
		content: '\e315';
		vertical-align: bottom;
		font-weight: normal;
	} */
	.sitemap a span.material-icons-outlined {
		font-size: 0.9em;
	}

/* お問い合わせページ
------------------------------------ */
.contact_form_area {
	padding: 36px 0;
	margin: 0px auto;
}
	.contact_form_area .contact_attention {
		background: #f5f5f5;
		padding: 20px;
		margin-bottom: 20px;
	}
	.contact_form_area .form_box {
		padding: 32px;
		margin: 0 auto;
		text-align: center;
	}
		.contact_form_area .form_box label {
			display: inline-block;
			width: 20%;
			text-align: left;
			vertical-align: top;
		}
		.contact_form_area .form_box input,
		.contact_form_area .form_box select,
		.contact_form_area .form_box textarea {
			display: inline-block;
			width: 70%;
		}
		.contact_form_area .form_box .btn_area {
			padding: 20px;
		}

/* 404ページ
------------------------------------ */
.notfound {
	padding: 36px 0 50px 0;
}
	.notfound .text {
		padding: 20px 10px;
		margin-bottom: 20px;
	}
		.notfound .text h3 {
			padding: 0 0 20px 0;
			color: #336886;
		}


/* レスポンシブ
------------------------------------ */
@media screen and (max-width: 430px) {

	/* ログインエリア */
	.login_form_area .form_box label {
		width: 100%;
	}
	/* パスワード再発行 */
	.forget_form_area .form_box label {
		width: 100%;
	}
	/* 登録 */
	.join_form_area .form_box label {
		width: 100%;
	}
		.join_form_area .form_box input,
		.join_form_area .form_box select,
		.join_form_area .form_box textarea {
			width: 100%;
		}
	/* お問い合わせ */
	.contact_form_area .form_box label {
		width: 100%;
	}
	.contact_form_area .form_box input,
	.contact_form_area .form_box select,
	.contact_form_area .form_box textarea {
		width: 100%;
	}

	/* テキストエリア */
	.about_box .text_block {
		padding: 30px 20px;
	}

	/* コンテンツタイトル */
	h2.content_title {
		padding: 0 32px;
		margin: 30px 0 48px 0;
		font-size: 1.3em;
	}
	h2.content_title:before {
		position: absolute;
		top: calc(50% - 1px);
		left: 0;
		width: 100%;
		height: 1px;
		content: '';
	}
		h2.content_title span {
			padding: 0 1em;
		}
}