@charset "utf-8";

main {
	margin-top: 0 !important;
}

/* メインビジュアル */
#top {
	width: 100%;
	height: 60vw;  /* 縦幅可変 */
	color: #330000;
	background-image: url(../image/img_main_bg_01.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100%; /* ブラウザサイズに合わせてメインビジュアルサイズ変更 */
}
#top h1 {
	text-align: center;
	font-weight: normal;
	margin-top: 0;
	padding-top: 1vw;
	font-size: 6vw;
	line-height: 1.1em;
}
#top h2 {
	text-align: center;
	font-weight: normal;
	font-size: 5vw;
	padding-top: 14vw;
	margin: 0;
}

/* お知らせ */
.news-container {
	font-size: 16px;
	max-width: 800px;
	margin: 0 auto;
}
#news h2 {
	font-size: 24px;
	text-align: center;
}
#news .more {
	margin-right: 1rem;
	text-align: right;
}
#news .more a {
	display: inline;
}
@media screen and (max-width: 768px) {
	#news {
		padding: 2vw 0;
	}
	#news h2 {
		font-size: 3vw;
	}
	#news .more {
		font-size: 2vw;
	}
}
/*
.info-contents br {
	display: none;
}
*/

/* メインビジュアル下の文章 */
#top-comment {
	text-align: center;
	margin-top: 1vw;
	margin-bottom: 3vw;
	display: flex;
	flex-direction: row;
	justify-content: center;
}
#top-comment h2,
#top-comment div {
	font-size: 170%;
	font-weight: 600;
	line-height: 1.7em;
	overflow-y: hidden;  /* IEで縦スクロールが出るのを対策 */
	margin: auto 20px auto;
}
@media screen and (max-width: 1024px) {
	#top-comment h2,
	#top-comment div {
		margin: auto 1.9vw;
	}
	#top-comment h2 {
		padding-top: 0.5vw;
	}
	#top-comment img {
		width: 12.7%;
		height: 23.3vw;
	}
}

/* 赤帯のタイトル */
.checktitle {
	height: 225px;
	width: 100%;
	display: inline-block;
	text-align: center;
	margin-bottom: 1vw;
}
.checktitle h2 {
	font-size: 380%;
}
.checktitle h2 ruby rt {
	font-size: 30%;
}
.check {  /* 赤帯内の赤字の「check」 */
	display: inline-block;
	text-align: left;
	color: #dc418c;
	font-size: 340%;
	padding: 0.4vw 0 0 0;
	font-family: "GMincho", serif;
	overflow-y: hidden;  /* IEで縦スクロールが出るのを対策 */
}
/* check1～check6の各section */
#check1,
#check2,
#check3,
#check4,
#check5,
#check6,
#check7 {
	background-image:
		url(../image/check1.png),
		url(../image/check_pink_bg_01.png);
	background-size:
		1524px 221px,
		100% 221px;
	background-repeat:
		no-repeat,
		no-repeat;
	background-position:
		center top,
		left top;
	text-align: center;
}
/* ピンク帯の縦幅リサイズ */
@media screen and (max-width: 1024px) {
	#check1,
	#check2,
	#check3,
	#check4,
	#check5,
	#check6,
	#check7 {
		background-size:
			1524px 21.6vw,
			200px 21.6vw,
			200px 21.6vw;
	}
	.checktitle {
		height: 22vw;
	}

	.checktitle h2 {

	}
}

/* 梅農家の紹介画像 */
#check1 img {
	margin: 0 0 4vw;
}

/* check2内の記事 */
#c2-art {  /* 枠線にうっすらシャドウ */
	display: inline-block;
	border: 1px solid #eeeeee;
	box-shadow: rgba(122, 122, 122, 0.0588235) 0px 0px 6px 3px;
	-webkit-box-shadow: rgba(122, 122, 122, 0.0588235) 0px 0px 6px 3px;
	-moz-box-shadow: rgba(122, 122, 122, 0.0588235) 0px 0px 6px 3px;
	margin-top: 1vw;
	margin-bottom: 4vw;
	text-align: left;
}
/* check2のPointの記事 */
#c2-title {
	margin-top: -5vw;
	line-height: 1.5em;
	font-size: 380%;
}
#c2-title-f {
	font-size: 75%;
}
#c2-point {
	margin: 50px 30px 30px 30px;
}
#c2-point-midashi-u {  /* Pointの見出し */
	height: 65px;
	display: flex;
	align-items: center;
}
#c2-point-inner {
	margin: 20px 0 30px 0;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
#c2-point-inner img {
	width: 422px;
	height: 724px;
}
#c2-point-inner > div {
	width: 49%;
	text-align: left;
	font-size: 180%;
	letter-spacing: 0.08em;
	line-height: 1.5em;
}
/* check2のPointの後半部（私は～の見出し以降） */
#c2-point-midashi-l { /* 見出し */
	background-image: url(../image/point2.png);
	background-repeat: no-repeat;
	background-size: 904px 59px;
	background-position: center;
	text-align: center;
	font-weight: normal;
	padding-bottom: 1vw;
}
#c2-point-l { /* 文章 */
	line-height: 1.6em;
	font-size: 210%;
}


@media screen and (min-width: 1024px) {
	#c2-title {
		margin-top: -60px;
	}
}

@media screen and (max-width: 1024px) {  /* check2のPoint用メディアクエリ */
	#c2-point {
		margin: 5vw 3vw 3vw 3vw;
	}
	#c2-point-inner {
		margin: 2vw 0 3vw 0;
	}
	#c2-point-inner img {
		width: 46.7%;
		height: 70.7vw;
	}
	#c2-point-inner > div {
		font-size: 240%;
	}
}

@media screen and (max-width: 980px)
		and (orientation:portrait)
		and (-webkit-min-device-pixel-ratio:0) {
	#c2-point-midashi-l {
		font-size: 150%;
	}
}

/* check2内のかざり */
#kazari {
	text-align: center;
}
@media screen and (max-width: 1024px) {
	#kazari img {
		width: 44vw;
		height: auto;
	}
}

/* check2の紹介 */
#c2-syokai {
	margin: 10px 30px 4vw 30px;
}
#c2-syokai-desc { /* 農園紹介の本文 */
	font-size: 170%;
	letter-spacing: 0.11em;
	line-height: 1.3em;
	margin: 0.8em 0 1.5em;
}
#c2-syokai h3 {
	text-align: center;
	line-height: 1.3em;
}
#c2-syokai h3 ruby rt {
	font-size: 30%;
}
.syokai-img { /* check2の紹介内の農園の写真を3つ並べる */
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin-top: 1.5vw;
}
.syokai-hatake { /* check2の紹介内の農園の紹介を3つ並べる */
	width: 100%;
	display: flex;
	justify-content: space-between;
}
#hatake-caption { /* .hatakeの直上にある注釈 */
	margin-top: 5vw;
	text-align: center;
	font-size: 180%;
}
.hatake { /* check2の紹介内の農園紹介文が入るコンテナ */
	background-image: url(../image/point2.png);
	background-size: cover;
	font-size: 180%;
	line-height: 1.3em;
	width: 255px;
	height: 4.2em;
	padding-top: 1.1em;
	padding-left: 10px;
}
#c2-syokai-l { /*check2の紹介下部の文章*/
	text-align: center;
	line-height: 1.5em;
	margin-top: 3.3vw;
	font-size: 350%;
}
@media screen and (max-width: 1024px) {  /* check2の紹介用メディアクエリ */
	#c2-syokai {
		margin: 1vw 3vw 3vw 3vw;
	}
	.syokai-img img {
		width: 29.3%;
		height: 100%;
	}
	.hatake { /* check2の紹介内の農園紹介文が入るコンテナ */
		line-height: 1.3em;
		width: 28.2%;
		height: auto;
		padding-left: 1.1%;
		padding-bottom: 0.5em;
	}
}
/*check3内の記事（画像3つ） */
#c3-img {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-top: 1vw;
	margin-bottom: 6vw;
}
#c3-img img,
#c3-img figure {
	width: 311px;
	height: 305px;
}
@media screen and (max-width: 1024px) {
	#c3-img img,#c3-img figure {
		width: 30vw;
		height: auto;
	}
}
#c3-img figcaption { /* 図のキャプション */
	margin-top: 1.0vw;
	letter-spacing: 0.14em;
	font-size: 170%;
}

/* check4内の記事 */
.c4-cap {
	text-align: left;
	padding: 20px 0 20px;
	font-size: 200%;
}
.c4-vid {
	padding-bottom: 75px;
}
.c4-vid iframe {
	width: 100%;
	height: 508px;
	border: 0;
}
@media screen and (max-width: 1024px) {
	.c4-vid iframe {
		height: 49.6vw;
	}
}
@media screen and (max-width: 768px) {
	.c4-cap {
		font-size: 300%;
	}
}

/* check5内の記事 */
#c5-sec1 {  /* 背景画像 */
	background-image: url(../image/check5_bgphoto.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	margin: 10px auto 3vw;
	white-space: nowrap;
}
@media screen and (min-width: 1524px) {
	#c5-sec1 {
		background-size: 1524px;
	}
}
/* 背景画像に合わせてリサイズされるように
   check5用のコンテナを設定 */
#c5-sec1-container { /* check5前半の記事が入るコンテナ */
	width: 1024px;
	height: 1159px;
	margin: 0 auto;
	padding-top: 115px; /* 背景画像にあわせて上余白 */
}
.c5thincontainer {
	width: 964px;
	margin-left: auto;
	margin-right: auto;
}
.c5thincontainer904 {
	width: 904px;
	margin-left: auto;
	margin-right: auto;
}
@media screen and (max-width: 1024px) {
	#c5-sec1 {
		background-size: 143%;
	}
	#c5-sec1-container {
		width: 100%;
		height: 113vw;
		padding-top: 10.5vw;
	}
	.c5thincontainer {
		width: 92vw;
	}
	.c5thincontainer904 {
		width: 88.3vw;
	}
}
#c5-sec1 h3 {
	padding: 10px 0;
	text-align: left;
}
@media screen and (max-width: 1024px) {
	#c5-sec1 h3 {
		padding: 1vw 0;
	}
}
/* check5前半記事の文章 */
#c5-sec1-1 {
	text-align: left;
	padding-top: 0.8vw;
	font-weight: bold;
	line-height: 1.6em;
	font-size: 200%;
}
@media screen and (max-width: 1524px) {
	#c5-sec1 { /* ブラウザ幅が小さいときは文章の折り返し許可 */
		white-space: normal;
	}
}
/* check5前半記事のコース説明*/
#c5-sec1-2 {
	text-align: left;
	padding-top: 2vw;
	font-weight: bold;
	line-height: 1.6em;
	font-size: 230%;
}
#c5-sec1-2 span {
	font-size: 180%;
}
#c5-sec1-2 ul {
	list-style-type: none;
}
#c5-sec1-2 li {
	line-height: 2.7em;
}
#c5-sec1-2 li::before {  /* コース説明のリストマーカー */
	font-size: 2vw;
	color: #dc418c;
	content: "■"
}
#c5-sec1-2 div {
	font-size: 90%;
}
/* check5記事の梅作業内容 */
#c5-sec1-3 {
	text-align: left;
	padding-top: 30px;
	font-weight: bold;
	line-height: 1.6em;
	font-size: 150%;
}
@media screen and (max-width: 1024px) {
	#c5-sec1-3 {
		padding-top: 4.9vw;
		font-size: 1.5vw;
	}
}
#c5-sec1-3 > span {
	font-size: 110%;
}
/* ブラウザ幅が小さい時用レイアウト
   （背景にあわせるために煩雑な設定になってしまっているので
	   実機確認後問題あれば要修正 */
@media screen and (max-width: 580px) {
	#c5-sec1 {
		background-size: 170%;
	}

	#c5-sec1-2,
	#c5-sec1-3 {
		margin-left: 5%;
		width: 70%;
	}

	#c5-sec1-4 {
		margin-left: 5%;
		width: 55%;
	}

	#c5-sec1-2 {
		padding-top: 1vw;
		font-weight: bold;
	}
	#c5-sec1-2 li::before {  /* コース説明のリストマーカー */
		font-size: 2vw;
	}
	#c5-sec1-3 {
		padding-top: 2.5vw;
		font-size: 1.5vw;
	}
}

/* check5記事の補足 */
#c5-sec1-4 {
	text-align: left;
	font-weight: bold;
	line-height: 1.3em;
	padding-top: 1.5vw;
	font-size: 180%;
}
/* check6内の記事・前半 */
#c6-taiken1 {
	margin-bottom: 2vw;
}
#c6-sec1-1 {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-bottom: 3vw;
}
#c6-sentenceA {
	text-align: left;
	font-weight: bold;
	line-height: 1.8em;
	font-size: 200%;
}
#c6-sec1-1 img {
	width: 50%;
	height: auto;
}
#c6-sec1-1 div {
	width: 50%;
	padding-right: 2.9%;
	text-align: left;
	font-size: 200%;
}

@media screen and (max-width: 1024px) {
	#c6-sec1-1 img {
		height: 45vw;
	}
}

#c6-sec1-2 {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-bottom: 3vw;
}
#c6-sentenceB {
	text-align: left;
	font-weight: bold;
	line-height: 1.8em;
	padding-left: 5.8%;
}
#c6-sec1-2 img {
	width: 50%;
	height: auto;
	margin-top: 10px;
	margin-bottom: 10px;
}
#c6-sec1-2 div {
	width: 50%;
	padding-left: 2.9%;
	text-align: left;
	font-size: 200%;
}
@media screen and (max-width: 1024px) {
	#c6-sec1-2 img {
		height: 60vw;
	}
}
#c6-sec1-3 {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-bottom: 3vw;
}
@media screen and (max-width: 1024px) {
	#c6-sec1-3 img {
		width: 23%;
		height: 23vw;
	}
}

/* イベントページボタン */
.event-button {
	width: 410px;
	height: 82px;
	margin: 20px auto;
	background-color: #cccc33;
	border-radius: 20.5px;
	position: relative;
}

.event-hover {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 20.5px;
	background-color: rgba(255, 255, 255, 0);
	transition-property: background-color;
	transition-duration: 0.5s;
	z-index: 1;
}

.event-button a {
	display: block;
	height: 100%;
	text-align: center;
	text-decoration: none;
	color: #ffffff;
	font-size: 31px;
	line-height: 82px;
}

.event-button a:hover .event-hover {
	background-color: rgba(255, 255, 255, 0.4);
}

@media screen and (max-width: 1024px) {
	.event-button {
		width: 40vw;
		height: 8vw;
		margin: 5vw auto;
		border-radius: 2vw;
	}

	.event-hover {
		border-radius: 2vw;
	}

	.event-button a {
		font-size: 3vw;
		line-height: 8vw;
	}
}

@media screen and (max-width: 768px) {
	.event-button {
		width: 60vw;
		height: 12vw;
	}
	.event-button a {
		font-size: 4vw;
		line-height: 12vw;
	}
}

#contents-box + .event-button {
	margin-top: 0;
}

#c6-border {
	height: 10px;
	border-top: 1px solid #dc418c;
	margin-bottom: 5vw;
}

#c6-p, #c7-p {
	width: 1024px;
	margin: auto;
	text-align: left;
	padding: 20px 0 20px;
	font-size: 200%;

}

#C6img {
	width: 1024px;
	margin: auto;
	text-align: left;
	position: relative;
	margin-bottom: 40px;
	overflow: hidden;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.C6taiken-img {
	display: block;
	margin-bottom: 20px;
	width: 490px;
	height: 490px;
	position: relative;
	font-family: "GMincho";
	overflow: hidden;
}

.C6taiken-img a {
	display: block;
}

.C6taiken-img img {
	width: 100%;
	height: auto;
}

.more-text {
  	transition: 0.5s;
 	position: absolute;
 	left: 50%;
 	top: 50%;
  	transform: translate(-50%, -50%);
 	display: inline-block;
	padding: 6px 12px 8px;
 	color: #ffffff;
 	font-size: 14px;
 	border: 1px solid #ffffff;
	opacity: 0;
}
.hover-img {
	transition: 0.5s;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.4);
	opacity: 0;
}
.C6taiken-img:hover .hover-img {
	opacity: 1;
}
.C6taiken-img2:hover .hover-img {
	opacity: 1;
}
.C6taiken-img:hover .more-text {
	opacity: 1;
}

.C6taiken-img2 {
	display: inline-block;
	width: 490px;
	height: 490px;
	position: relative;
	font-family: "GMincho";
	position: absolute;
    top: 0;
    right: 0;
}
.C6taiken-img2:hover .more-text {
	opacity: 1;

}
.C6img-number {
	width: 65px;
	height: 65px;
	background-color: #cccc33;
	position: absolute;
    top: 0;
    left: 0;
}
.C6img-number p {
	text-align: center;
	color: #ffffff;
	font-size: 50px;
	line-height: 63px;
}
.C6img-name {
	position: absolute;
    top: 0;
    left: 80px;
    color: #ffffff;
    line-height: 65px;
    font-size: 30px;

}

.C6img-p {
	height: 120px;
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: rgba(255, 255, 255, 0.5);
}

.C6img-p p {
	color: #ffffff;
	padding: 15px 0 0 20px;
	font-size: 27px;
	text-shadow: 1px 1px 0 #000000,1px 1px 0 #000000,1px 2px 0 #000000,1px 2px 0 #000000;
}

@media screen and (max-width: 1024px) {
	#C6img {
		width: 100vw;
	}
	.C6taiken-img {
		width: 49vw;
		height: 49vw;
	}
	.C6img-p {
		height: 10vw;
	}
}

@media screen and (max-width: 768px) {
	#c6-p, #c7-p {
		margin-left: 2em;
		font-size: 300%;
	}

	#C6img {
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		justify-content: center;
	}

	.C6taiken-img {
		width: 90vw;
		height: 90vw;
		margin: 2vw auto;
	}

	.C6img-number {
		width: 15vw;
		height: 15vw;
	}

	.C6img-number p {
		font-size: 10vw;
		line-height: 15vw;
	}

	.C6img-name {
		font-size: 9vw;
	}

	.C6img-p {
		height: 25%;
	}

	.C6img-p p {
		padding: 3.2vw 0 0 4vw;
		font-size: 5.5vw;
	}
}

/* check6内の記事・後半 */
#c6-sec2 {
	margin-bottom: 6.5vw;
}
#c6-mid-midashi {  /* check6内中央の見出しコメント */
	height: 239px;
	line-height: 80px;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1vw;
	font-size: 450%;
}
@media screen and (max-width: 1024px) {
	#c6-mid-midashi {
		height: 23.3vw;
		line-height: 1.4em;
	}
	#c6-mid-midashi img {
		width: 12.7%;
		height: 23.3vw;
	}
}
#c6-add {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-bottom: 3vw;
}
#c6-add > div {
	width: 50%;
}
#ume-photo2 {
	width: 100%;
	text-align: left;
}
#c6-add-inner {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	font-size: 200%;
}
.address {
	text-align: left;
	font-weight: bold;
	line-height: 1.7em;
	padding-left: 5.8%;
}
#c6-add-inner img {
	width: 88.2%;
	height: 59.2%;
	align-self: flex-end;
	padding: 10px 5.8% 0 0;
}
.c5charL {
	font-size: 30px;
}
@media screen and (max-width: 1024px) {
	.c5charL {
		font-size: 2.9vw;
	}
}
/* check5の市長との意見交換記事 */
#c6-tanabe {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding-bottom: 100px;
}
#c6-tanabe img {
	width: 50%;
	height: 384px;
}
#c6-tanabe div {
	width: 50%;
	padding-left: 2.9%;
	text-align: left;
	font-size: 180%;
}
@media screen and (max-width: 1024px) {
	#c6-tanabe {
		padding-bottom: 10vw;
	}
	#c6-tanabe img {
		height: 37.5vw;
	}
}

@media screen and (max-width: 768px) {
	#c7-p {
		font-size: 300%;
		padding-left: 7%;
	}
}

/* check5のボタン */
#c6-button {
	list-style: none;
	overflow: hidden;
	display: flex;
	justify-content: space-between;
}
#c6-button li {
	width: 48.1%;
}
#c6-button li a:hover img {
	opacity: 0.8;
	filter: alpha(opacity=80);
	-ms-filter: "alpha(opacity=80)";
}
#c6-button li a img {
	width: 100%;
	background-color: #ffffff;
}

.borderW {  /* ボーダーライン：太線 */
	border-top: 5px solid #cc9900;
}
.borderT {  /* ボーダーライン：細線 */
	border-top: 1px solid #cc9900;
}