@charset "UTF-8";

/* ページ全体 */
html {
	font-size: 62.5%;
	max-widh: 1100px;
}

body {
	color: #000;
	font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

html * {
	box-sizing: border-box;
}

/* ふわっと表示 */
.fade {
	opacity : 0;
	transition: opacity 3s;
}

.fade.view{
  opacity: 1;
}



/*全てのボックスにアウトライン
* {
	outline: 0.1px solid #ff0000;
}
*/





/* ヘッダー */
.header {
	position: relative;
}

.header .logo-icon {
	position: absolute;
	top: 30px;
	left: 65px;
	z-index: 2;
	width: 400px;
}

.header .logo {
	position: absolute;
	top: 30px;
	left: 60px;
	color: #fff;
	z-index: 2;
	font-size: 10rem;
	font-family: 'Lora', serif;
}

.header .logo-bottom {
	position: absolute;
	top: 140px;
	left: 155px;
	color: #fff;
	z-index: 2;
	font-size: 1.5rem;
	font-weight: normal;
	/* ロゴ下のテキストに左右ライン */
	display: inline-block;
    padding: 0 55px;
}

.header .main-copy {
	font-size: 3rem;
	font-family: 'Noto Serif JP', serif;
	letter-spacing: 4px;
	position: absolute;
	bottom: 130px;
	left: 60px;
	z-index: 2;
	color: #fff;
}

.header .main-txt {
	font-size: 1.4rem;
	font-family: 'Noto Serif JP', serif;
	letter-spacing: 2.5px;
	position: absolute;
	bottom: 87px;
	left: 60px;
	line-height: 1.9rem;
	z-index: 2;
	color: #fff;
}

.copy-txt {
	font-size: 1.3rem;
	font-weight: bold;
	vertical-align: -18px;
}


.header {
	position: relative;
}




/* ロゴ下のテキストに左右ライン */
.header .logo-bottom:before,
.header .logo-bottom:after {
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 50px;
    height: 0.5px;
    background-color: #fff;
}

.header .logo-bottom:before {
    left: 0;
}

.header .logo-bottom:after {
    right: 0;
}








/*==================================================
スライダーのためのcss
===================================*/
.slider {
  position:relative;
	z-index: 1;
	/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
	height: 95vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
/*　背景画像設定　*/

.slider-item01 {
    background:url(../img/slider_01.jpg);
}

.slider-item02 {
    background:url(../img/slider_02.jpg);
}

.slider-item03 {
    background:url(../img/slider_03.jpg);
}

.slider-item04 {
    background:url(../img/slider_04.jpg);
}

.slider-item {
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height: 95vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}

/*矢印の設定*/

.slick-prev, 
.slick-next {
    position: absolute;
	z-index: 3;
    top: 50%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #fff;/*矢印の色*/
    border-right: 2px solid #fff;/*矢印の色*/
    height: 15px;
    width: 15px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left:2.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right:2.5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
	position: relative;
	z-index: 3;
    text-align:center;
	margin:-50px 0 0 0;/*ドットの位置*/
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#fff;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}

/*==================================================
ここまでスライダーのためのcss
===================================*/




/*====== 9-1-1 縦線が動いてスクロールを促す =======*/

/*スクロールダウン全体の場所*/
.scrolldown1{
	z-index: 2;
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	left:97%;
	bottom:10px;
    /*全体の高さ*/
	height:50px;
}

/*Scrollテキストの描写*/
.scrolldown1 span{
    /*描画位置*/
	position: absolute;
	left:-15px;
	top: -15px;
    /*テキストの形状*/
	color: #eee;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
}

/* 線の描写 */
.scrolldown1::after{
	content: "";
    /*描画位置*/
	position: absolute;
	top: 0;
    /*線の形状*/
	width: 1px;
	height: 30px;
	background: #eee;
    /*線の動き1.4秒かけて動く。永遠にループ*/
	animation: pathmove 1.4s ease-in-out infinite;
	opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
	0%{
		height:0;
		top:0;
		opacity: 0;
	}
	30%{
		height:30px;
		opacity: 1;
	}
	100%{
		height:0;
		top:50px;
		opacity: 0;
	}
}

/*==================================================
ここまでスクロールダウンのためのcss
===================================*/



/* 生産者紹介 */

.box {
	position: relative;
	height: 600px;
	margin-top: 130px;
}

.wrapper {
	display: flex;
	position: absolute;
	right: 0;
}

.wrapper .txt-block {
	width: 470px;
	text-align: center;
	margin: 0 15px 0 0;
}

.wrapper .ph-block .img-set {
	width: 100%;
	border-radius: 0 0 0 100px;
}

.wrapper .txt-block .copy {
	text-align: left;
	margin: 0 auto;
	font-size: 2.7rem;
	font-family: 'Noto Serif JP', serif;
	letter-spacing: 4px;
	/* 左のライン */
	border-left: 0.5px solid #000;
	padding-left: 5px;
	/* 縦書き */
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}

.text {
	margin-top: 40px;
	padding-left: 10px;
	font-size: 1.3rem;
	line-height: 25px;
}



/* 特栽エリア */
.tokusai-wrapper {
	margin: 0 auto 0 auto;
	width: 100%;
	background-color: #F8F8F8;
	padding: 5em 0;
}


/*これのせいでレイアウト直せない*/
.tokusai-wrapper .tokusai-block {
	display: flex;
	justify-content: center;
    align-items: center;
}

.tokusai-txt {
	display:flex;
	justify-content:center;
}


.tokusai-wrapper .copy {
	font-size: 2.7rem;
	font-family: 'Noto Serif JP', serif;
	letter-spacing: 4px;
	/* 左のライン */
	border-left: 0.5px solid #000;
	padding-left: 5px;
	/* 縦書き */
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}

.tokusai-ph {
	width: 195px;
	margin-left: 15px;
}

.tokusai-wrapper .tokusai-block .text {
	margin-top: 0;
	margin-left: 55px;
	width: 465px;
}

.tomato {
	color: tomato;
}



/* アクセス */
.access-wrapper {
	margin-bottom: 30px;
	background-color: #F8F8F8;
	padding: 3em 0;
}

.access-wrapper .access-block {
	display:flex;
	justify-content:center;
	align-items:center;
	right: 0;
}

.access-item {
	width: 300px;
	margin: 0 auto;
}

.access-block .copy {
	margin: 0 auto;
	font-size: 2.7rem;
	font-family: 'Noto Serif JP', serif;
	letter-spacing: 4px;
	/* 左のライン */
	border-left: 0.5px solid #000;
	padding-left: 5px;
	/* 縦書き */
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}

.access-info {
	width: 80%;
	height: 80%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 60px;
}

.googlemap {
	border-radius: 0 0 0 100px;
	width: 600px;
	height: 600px;
}

.name, .info-txt {
	font-family: 'Noto Serif JP', serif;
}

.name {
	font-size: 2.5rem;
	padding: 0 0 0 25px;
}

.info-txt {
	font-size: 1.5rem;
	padding: 10px 0 0 25px;
}



/*これいらない？*/
.access-info .info .logo-icon2 {
	width: 120px;
	margin: 0 0 10px 30px;
}




/*電話番号 アイコンの入れ方
.tel {
	position:relative;
	line-height:1.5em;
	text-indent:1.5em;
	font-size: 2.8rem;
	padding: 7px 0 0 30px;
}

.info .tel .tel-icon::before {
	position:absolute;
	left: 26px;
	top: 17px;
	content:"";
	display:inline-block;
	width:1.5em;
	height:1.5em;
	background:url("../img/free.svg") no-repeat;
	background-size:contain;
	margin-right: 10px;
}
*/



/* コピーライト */

.copyright {
	background-color: tomato;
	width: 100%;
	height: 50px;
	display: flex;
}



/*ページトップ*/
.page-top span{
	color: #eee;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	margin-right: 30px;
	text-decoration: none;
}

.page-top {
	display: inline-block;
	text-align: right;
}




small {
	font-size: 1.3rem;
	color: #fff;
}

.copyright2 .top:hover {
	opacity: 0.7;
}

.copyright1 {
	width: 100%;
	height: 50px;
	/* 縦横の中央揃え */
	display: flex;
	justify-content: center;
	align-items: center;
}

.copyright2 {
	margin-top: 17px;
}









/* 履歴 */

.history-box {
	margin-left: 50px;
	padding: 10em 0 3em 0;
}

.history-wrapper {
	display: flex;
	justify-content: center;
    align-items: center;
}

.history-block {
    max-width: 1300px;
    width: 100%;
	margin-left: 80px;
}

.history-item {
	width: 100%;
}

history-item .item {
	width: 25%;
}

.history-txt .copy {
	margin: 0 auto 0 -20px;
	font-size: 2.7rem;
	font-family: 'Noto Serif JP', serif;
	letter-spacing: 4px;
	/* 左のライン */
	border-left: 0.5px solid #000;
	padding-left: 5px;
	/* 縦書き */
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}

.history-txt {
	width: 300px;
	margin: 0 auto;
}

.tomato-ph {
	width: 90%;
	transition: opacity 0.3s;
}

.tomato-ph:hover {
	opacity: 0.7;
}

.link-icon {
	position: relative;
}

.history-text {
	width: 100%;
	position: absolute;
	top: 45%;
	left: 51.5%;
	transform: translate(-50%, -50%);
	color: #fff;
	z-index: 2;
	text-align: center;
	font-size: 2rem;
	font-weight: bold;
	text-shadow: 1.5px 1.5px 4px rgba(0,0,0, 0.6);
}

.year {
	font-size: 1.5rem;
	font-weight: normal;
}


/*履歴グリッドで並べる*/
.grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
}







/*レスポンシブのために表示非表示するもの*/
@media (max-width: 768px) {
	.smartphon { display: none; } 
}

@media (max-width: 500px) {
	.smartphon { display: block; } 
}



img.img-set2 { display: none; }

@media (max-width: 500px) {
	.img-set2 { display: block; } 
}


#smartphon { display: none; }

@media (max-width: 575px) {
	#smartphon { display: block; } 
}


@media (max-width: 500px) {
	.white-back { display: block; } 
}







@media screen and (-webkit-min-device-pixel-ratio:0) and (max-width:991px) { 

	.history-item .item {
		width: 33%;
	}

}









@media screen and (-webkit-min-device-pixel-ratio:0) and (max-width:768px) { 


	/* 生産者紹介 */

	.box {
		position: static;
		height: 870px;
		margin-top: 50px;
	}

	.wrapper {
		display: block;
		position: relative;
		top: 0;
		left: 0;
	}

	.wrapper .txt-block {
		width: 100%;
		text-align: center;
		margin: 0 15px 0 0;
	}

	.wrapper .ph-block .img-set {
		width: 100%;
		border-radius: 0 0 0 100px;
		margin-top: 25px;
	}

	.wrapper .txt-block .copy {
		text-align: left;
		display: inline;
		/* 下のライン */
		border-bottom: 0.5px solid #000;
		/* 左のライン */
		border-left: none;
		/* 横書き */
		-ms-writing-mode: lr-tb;
		writing-mode: horizontal-tb;

	}

	.text {
		margin-top: 30px;
		padding-left: 0;
	}


	/* 特栽エリア */

	.tokusai-wrapper {
		position: relative;
		margin: 15px auto 15px auto;
		width: 100%;
		text-align: center;
	}

	.tokusai-wrapper .tokusai-block {
		display: block;
	}

	.tokusai-wrapper .copy {
		display: inline;
		/* 下のライン */
		border-bottom: 0.5px solid #000;
		/* 左のライン */
		border-left: none;
		/* 横書き */
		-ms-writing-mode: lr-tb;
		writing-mode: horizontal-tb;
	}
	
	.tokusai-ph {
		margin-top: 30px;
		width: 195px;
		margin-left: 0;
	}

	.tokusai-wrapper .tokusai-block .text {
		margin-top: 30px;
		margin-left: 0;
		width: 700px;
	}




	/* 履歴 */
	.history-box {
		margin-left: 0;
		text-align: center;
	}
	
	.history-wrapper {
		flex-direction: column;
		flex-wrap: wrap;
		width: 100%;
	}
	
	.history-item .item {
		width: 50%;
	}

	.history-block {
		margin-left:0;
	}
	

	.history-txt .copy {
		display: inline;
		border-bottom: 0.5px solid #000;
		margin-bottom: 15px;
		border-left: none;
		/* 横書き */
		-ms-writing-mode: lr-tb;
		writing-mode: horizontal-tb;
	}

	/*履歴グリッドで並べる*/
	/* .grid {
		display: block;
		margin: 50px 0 0 25px;
	} */
	
	.history-txt {
		order: 1;
		margin-bottom: 15px;
	}
	
	.history-block {
		order: 2;
	}
	
	


	/* アクセス */
	
	.access-wrapper {
		text-align: center;
		position: relative;
		background-color: #F8F8F8;
	}

	.access-wrapper .access-block {
		display: block;
	}

	.access-block .copy {
		display: inline;
		border-bottom: 0.5px solid #000;
		border-left: none;
		/* 横書き */
		-ms-writing-mode: lr-tb;
		writing-mode: horizontal-tb;
	}

	.access-item {
		width: 100%;
		margin: 0;
	}
	
	.googlemap {
		border-radius: 0 0 0 100px;
		max-width: 600px;
		max-height: 400px;
	}
	
	.access-info {
		display: block;
		width: 100%;
		height: 100%;
	}
	
	.info {
		margin-top: 30px;
	}
	
	.map {
		width: 100%;
		margin-top: 30px;
	}

}












@media screen and (-webkit-min-device-pixel-ratio:0) and (max-width:575px) { 


	/*==================================================
	スライダーのためのcss
	===================================*/
	.slider {
		margin-top: 100px;
		height: 50vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
	}

	.slider-item {
		height: 50vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
	}


	/*ドットナビゲーションの設定*/

	.slick-dots {
		margin:-20px 0 0 0;/*ドットの位置*/
	}
	/*==================================================
	ここまでスライダーのためのcss
	===================================*/


	/*====== 9-1-1 縦線が動いてスクロールを促す =======*/

	/*スクロールダウン全体の場所*/
		.scrolldown1{
			left:92%;
		}

	/*==================================================
	ここまでスクロールダウンのためのcss
	===================================*/
	
	.header {
		position: static;
	}
	
	.white-back {
		position: relative;
		max-height: 100px;
	}
	

	.header .logo-icon {
		width: 280px;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50%,-170%);
		margin-top: 10px;
	}
	
	#display-block {
		display: none;
	}
	
	#smartphon {
		background-color: tomato;
		width: 100%;
		padding: 20px 0 20px 0;
		display:flex;
		justify-content:center;
		align-items:center;
		flex-flow: column;
	}
	
	#copy-txt2 {
		font-size: 4vw;
		font-weight: bold;
		color: #fff;
	}
	
	#main-copy2 {
		font-size: 11vw;
		font-family: 'Noto Serif JP', serif;
		color: #fff;
		text-align: center;
		line-height: 1.3em;
		margin-bottom: 10px;
	}

	#main-txt2 {
		font-size: 4vw;
		font-family: 'Noto Serif JP', serif;
		color: #fff;
		text-align: center;
	}



	
	/* 生産者紹介 */

	.box {
		position: static;
		height: 850px;
	}

	.wrapper {
		display: block;
		position: static;
	}

	.wrapper .txt-block {
		width: 100%;
		text-align: center;
		margin: 0 15px 0 0;
	}

	.wrapper .ph-block .img-set {
		display: none;
	}

	.wrapper .ph-block .img-set2 {
		display: block;
		width: 100%;
		border-radius: 0 0 0 100px;
		margin-top: 15px;
	}

	.wrapper .txt-block .copy {
		text-align: left;
		display: inline;
		/* 下のライン */
		border-bottom: 0.5px solid #000;
		/* 左のライン */
		border-left: none;
		/* 横書き */
		-ms-writing-mode: lr-tb;
		writing-mode: horizontal-tb;

	}

	.text {
		margin-top: 30px;
		padding: 0 5vw;
	}






	/* 特栽エリア */
	.tokusai-block {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.tokusai-wrapper {
		margin: 0 auto 0 auto;
		width: 100vw;
		background-color: #F8F8F8;
	}

	.tokusai-ph {
		width: 195px;
	}
	
	.tokusai-copy {
		margin-bottom: 4vw;
	}

	.tokusai-wrapper .tokusai-block .text {
		margin-top: 0;
		margin-left: 0;
		width: 90vw;
	}
	
	
	



	/* 履歴 */
	.history-box {
		margin: 10vw 0 0 0;
	}
	
	.history-wrapper {
		display: flexbox;
		flex-wrap: wrap;
	}
	
	.history-item .item{
		width: 100%;
	}

	.history-txt .copy {
		display: inline;
		border-bottom: 0.5px solid #000;
		margin-bottom: 15px;
		border-left: none;
		/* 横書き */
		-ms-writing-mode: lr-tb;
		writing-mode: horizontal-tb;
	}

	/*履歴グリッドで並べる*/
	/* .grid {
		display: block;
		margin: 50px 0 0 25px;
	} */
	
	.history-txt {
		order: 1;
		margin: 0 auto 5vw auto;
	}
	
	.history-block {
		order: 2;
	}
	
	
	


	/* アクセス */
	.access-wrapper {
		width: 100%;
		background-color: #F8F8F8;
	}

	.access-wrapper .access-block {
		display: block;
		position: relative;
	}

	.access-block .copy {
		display: inline;
		border-bottom: 0.5px solid #000;
		border-left: none;
		margin-left: 0;
		/* 横書き */
		-ms-writing-mode: lr-tb;
		writing-mode: horizontal-tb;
	}

	.googlemap {
		border-radius: 0 0 0 100px;
		max-width: 90vw;
		max-height: 90vw;
		margin-left: 0;
	}
	
	.access-info {
		display: block;
	}
	
	.access-item {
		width: 100%;
	}
	
	.info {
		margin-top: 30px;
		margin-left: 0;
		padding: 0 3vw;
	}
	
	.map {
		width: 100%;
		margin-top: 30px；
	}
	
	.access-info .info .logo-icon2 {
		width: 120px;
		margin: 0 0 10px 0;
	}
	
	.name {
		padding: 0 0 0 0;
	}

	.info-txt {
		padding: 10px 0 0 0;
	}

	.access-info .info .logo-icon2 {
		margin: 0 0 10px 0;
	}


	
	
	/* コピーライト */

	.copyright {
		background-color: tomato;
		width: 100%;
		display: flex;
	}

	small {
		font-size: 1.1rem;
	}


	/*ページトップ*/
	.page-top span{
		font-size: 1rem;
	}

/*====== 9-1-1 縦線が動いてスクロールを促す =======*/

	#container {
		position: relative;
	}

	/*スクロールダウン全体の場所*/
	.scrolldown1{
		position:absolute;
		top:25px;
		ritht:3px;
		/*全体の高さ*/
		height:50px;
	}

	/*Scrollテキストの描写*/
	.scrolldown1 span{
		color: #000;
	}

	/* 線の描写 */
	.scrolldown1::after{
		background: #000;
	}

}