/*
(C) 2021 Wangrove Inc. <wangrove.co.jp>
*/

/*
アイキャッチ
*/
.eyecatch {
	display: flex;
	width: 100%;
	height: 300px;
	overflow: hidden;
}
.eyecatch .swiper {
	position: relative;
	width: 100%;
	height: 100%;
}
.eyecatch .swiper .swiper-wrapper {
	width: 100%;
	height: 100%;
}
.eyecatch .swiper .swiper-wrapper .swiper-slide {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
    border-radius: 10px;
    border: var(--main-color) 1px solid;
    box-shadow: var(--main-color) 0 0 3px 1px inset;
}

/*
お知らせ領域
*/
.info {
	display: flex;
	justify-content: center;
	width: 90%;
	margin: 3rem auto 0;
}
.info__message {
	display: block;
	width: fit-content;
	height: auto;
	margin: 0;
	padding: 5px;
	background-color: #ffffff;
	border-radius: 5px;
	line-height: 1.5;
}

/*
検索領域
*/
.search {
	display: flex;
	flex-direction: column;
	width: 90%;
	margin: 3rem auto 0;
}
/* スマホ */
@media screen and (max-width:800px) {
	.search {
		height: auto;
	}
}

/*
広告
*/
.ad-search {
	width: 100%;
	height: auto;
	margin-top: 30px;
}

/*
カテゴリで検索
*/
.search-cate {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: auto;
}
.search-cate > h2 {
	margin-top: 0;
	margin-bottom: 10px;
	border-left: none;
}
.search-cate .cate-items {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	height: auto;
	gap: 10px;
}
.search-cate .cate-items .cate-item {
	flex-grow: 1;
	position: relative;
	width: auto;
	height: auto;
	border-radius: 8px;
}	
.search-cate .cate-items .cate-item a {
	display: block;
	width: 100%;
	height: 100%;
	padding: 5px 5px 30px 5px;
	background-color: var(--input-background-color);
	/*border: 2px solid;*/
	/*border-color: var(--border-color);*/
	border-radius: 8px;
	text-align: center;
	text-decoration: none;
}
.search-cate .cate-items .cate-item:hover {
	box-shadow: #00f 0 0 3px 0px, #00f 0 0 1px 0px inset;
}
.search-cate .cate-items .cate-item img {
	width: auto;
	height: 50px;
	vertical-align: top;
}
.search-cate .cate-items .cate-item span {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	right: 0;
	bottom: 0;
	left: 0;
	height: 2em;
	margin: 0 2px 2px 2px;
	background-color: rgba(255, 255, 255, 0.3);
	border-radius: 0 0 8px 8px;
	color: #444444;
	line-height: 1;
}
.search-cate .cate-items .cate-item:hover span {
	background-color: rgba(0, 0, 0, 0.3);
	color: #EEEEEE;
}
/* スマホ */
@media screen and (max-width:800px) {
	.search-cate {
		position: static;
		width: 100%;
	}
	.search-cate .cate-items .cate-item {
		width: 30%;
	}	
}

/*
都道府県で検索
*/
.search-pref {
	display: flex;
	flex-direction: column;
	margin-top: 30px;
}
.search-pref > h2 {
	position: absolute;
	width: 50%;
	margin-top: 0;
	margin-bottom: 10px;
	border-left: none;
}
.search-pref > .japan {
	position: relative;
	align-self: center;
	width: 95vw;
	max-width: 800px;
	height: 50vw;
	max-height: 450px;
}
/* スマホ */
@media screen and (max-width:800px) {
	.search-pref {
		position: static;
		display: flex;
		flex-direction: column;
		width: 100%;
		max-width: unset;
		height: 100vw;
		margin-top: 2rem;
	}
	.search-pref > h2 {
        flex-shrink: 0;
        flex-grow: 0;
		position: static;
		justify-content: unset;
		width: inherit;
		margin-top: 0;
		margin-bottom: 10px;
		padding: 0px 0 0px 40px;
		background-position-x: unset;
	}
	.search-pref > .japan {
        flex-shrink: 1;
        flex-grow: 1;
		width: 100%;
		height: 100%;
	}
	.search-pref > .japan .japan__area__pref > a {
		font-size: 0.85rem;
	}
	.search-pref > .japan .japan__area__pref[data-value="14"] > a,
	.search-pref > .japan .japan__area__pref[data-value="46"] > a {
		word-break: keep-all;
	}
}

/*
キーワードで検索
*/
.search-word {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-top: 30px;
}
.search-word > h2 {
	margin-top: 0;
	margin-bottom: 10px;
	border-left: none;
}
.search-word > .field {
	display: flex;
	gap: 10px;
}
.search-word > .field > input[type="text"] {
	flex-grow: 1;
}
.search-word > .field > button {
}
/* スマホ */
@media screen and (max-width:800px) {
	.search-word {
		position: static;
		width: 100%;
		min-width: unset;
		margin-top: 2rem;
	}
}

/*
ギャラリー
*/
.japan {
	width: 800px;
	height: 500px;
}

/*
ギャラリー
*/
.gallery .swiper {
	position: relative;
	/*width: 100%;*/
	/*height: 300px;*/
}
.gallery .swiper-wrapper{
	/*transition-timing-function: linear;*/
}
.gallery .swiper-slide {
	/*width: fit-content !important;*/
}

/*
新着枠
*/
.whatsnew {
	display: flex;
	flex-direction: row;
	gap: 40px;
}
/* スマホ */
@media screen and (max-width:800px) {
	.whatsnew {
		flex-direction: column;
	}
}

/*
メルマガ新着
*/
.maga {
	width: 50%;
}
.maga__list {
	display: flex;
	flex-direction: column;
	gap: 15px;
}
.maga__list__item {
	display: flex;
	flex-direction: column-reverse;
	width: 100%;
	height: auto;
	gap: 0px;
	margin: 0;
	padding: 2px 0;
	background: none;
	border-bottom: #00440040 1px dashed;
	color: #004400;
	text-decoration: none;
}
.maga__list__item:hover,
.maga__list__item:active {
	background-color: rgba(255, 255, 255, 0.3);
	color: #000088;
	text-decoration: underline;
}
.maga__list__item__date {
	flex-grow: 0;
	display: block;
	word-break: keep-all;
	word-wrap: normal;
	white-space: nowrap;
	line-height: 1.5em;
	text-align: right;
	color: #88aa88;
}
.maga__list__item__title {
	display: block;
	flex-grow: 1;
	word-break: normal;
	word-wrap: normal;
	white-space: normal;
	line-height: 1.5em;
}
/* スマホ */
@media screen and (max-width:800px) {
	.maga {
		width: 100%;
	}
}

/*
ニュース新着
*/
.news {
	width: 50%;
}
.news__list {
	display: flex;
	flex-direction: column;
	gap: 15px;
}
.news__list__item {
	display: flex;
	flex-direction: column-reverse;
	width: 100%;
	height: auto;
	gap: 0px;
	margin: 0;
	padding: 2px 0;
	background: none;
	border-bottom: #00440040 1px dashed;
	color: #004400;
	text-decoration: none;
}
.news__list__item:hover,
.news__list__item:active {
	background-color: rgba(255, 255, 255, 0.3);
	color: #000088;
	text-decoration: underline;
}
.news__list__item__date {
	flex-grow: 0;
	display: block;
	word-break: keep-all;
	word-wrap: normal;
	white-space: nowrap;
	line-height: 1.5em;
	text-align: right;
	color: #88aa88;
}
.news__list__item__title {
	display: block;
	flex-grow: 1;
	word-break: normal;
	word-wrap: normal;
	white-space: normal;
	line-height: 1.5em;
}
.ad-news {
	width: 100%;
	height: auto;
}
/* スマホ */
@media screen and (max-width:800px) {
	.news {
		width: 100%;
	}
}