@charset "utf-8";
/* 基本色 */
:root {
 --main-color: #5D9AB2;
 --accent-color: #BF6A7A;
 --dark-main-color: #2B5566;
 --text-bright-color: #fff;
 --icon-color:#fff;
 --icon-bk-color:#ddd;
 --gray-color:#ddd;
 --large-width:1000px;
 --middle-width:800px;
}

/* 基本設定：フォントサイズ */
@media (max-width: 599px){
	:root{
		font-size: 14px;
	}
}
@media (min-width: 600px)and(max-with: 799px){
	:root{
		font-size: 16px;
	}
}
@media (min-width: 800px){
	:root{
		font-size: 18px;
	}
}
body{
	font-size: 16px;
}

/* 基本設定：ページ全体 */
body {
	margin: 0;
	font-famiry: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
}
/* コンテンツA:ヒーローイメージ */
.conA {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	min-height: 450px;
	background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url(../images/fruits.jpg);
	background-position: center;
	background-size: cover;
	color: #fff;
	color: var(text-bright-color);
	text-align: center;
}
.conA h1 {
	margin-top: 0;
	margin-bottom: 10px;
	font-family: 'Montserrat', sans-serif;
	font-size: 15vw;
	letter-spacing: 0.2em;
	margin-left: 0.2em;
}
.conA p {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 18px;
}
.conA img {
	width: 20%;
}
.conA a {
	display: inline-block;
	margin-top: 20px;
	padding: 10px 30px;
	border: solid 3px currentColor;
	border-radius: 6px;
	background-color: #BF6A7A;
	background-color: var(--accent-color);
	color: #FFFFFF;
	color: var(--text-bright-color);
	font-size: 14px;
	text-decoration: none;
}
.conA a:hover {
	background-image: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0.2));
}

@media (min-width: 768px) {
.conA h1 {
	font-size: 115px;
}
.conA p {
	font-size: 24px;
}
}

/* コンテンツB:概要（アイコン＋テキスト） */
.conB .container{
	padding-top: 80px;
	padding-bottom: 20px;
}
.conB .text{
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 60px;
	text-align: center;
}
.conB h2{
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 20px;
}

.conB p{
	margin-top:0;
	margin-bottom: 20px;
	font-size: 14px;
	line-height: 1.8;
	opacity: 0.8;
}

.conB a{
	color:#5D9AB2;
	color:var(--main-color);
	text-decoration: none;
}

.conB a:hover{
	text-decoration: underline;
}

.conB .icon{
	display:inline-block;
	margin-bottom: 20px;
	font-size: 40px;
	width: 2em;
	line-height: 2em;
	border-radius: 50%;
	text-align: center;
	background-color: #ddd;
	background-color: var(--icon-bk-color);
	color:#fff;
	color:var(--icon-color);
}

@media (min-width: 768px){
	.conB .container{
		display: flex;
		max-width: 1000px;
		max-width: var(--large-width);
		margin-left: auto;
		margin-right: auto;
	}
	.conB .text{
		flex: 1;
	}
}

/*コンテンツC：概要（画像＋テキスト） */
.conC{
	background-color: #5D9AB2;
	background-color: va(--main-color);
	color:#fff;
	color:var(--text-bright-color);
}

.conC .text{
	padding: 20px;
}
.conC h2{
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 20px;
}

.conC p{
	margin-top:0;
	margin-bottom: 20px;
	font-size: 14px;
	line-height: 1.8;
	opacity: 0.8;
}

.conC a {
	display: inline-block;
	margin-top: 20px;
	padding: 10px 30px;
	border: solid 3px currentColor;
	border-radius: 6px;
	background-color: #BF6A7A;
	background-color: var(--accent-color);
	color: #FFFFFF;
	color: var(--text-bright-color);
	font-size: 14px;
	text-decoration: none;
}
.conC a:hover {
	background-image: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0.2));
}

.conC .photo{
	min-height: 200px;
	background-image: url(../images/note.jpg);
	background-position: center;
	background-size:cover;
}

@media (min-width: 768px){
	.conC .container{
		display: flex;
		max-width: 1000px;
		max-width: var(--large-width);
		margin-left: auto;
		margin-right: auto;

	}
	
	.conC .photo{
		flex: 3;
	}
	
	.conC .text{
		flex: 2;
		padding: 50px;
	}
}

/*コンテンツD：概要（画像＋テキスト） */
.conD .container{
	padding-top: 2px;
}
.conD .text{
	padding: 20px;
}
.conD h2{
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 20px;
}

.conD p{
	margin-top:0;
	margin-bottom: 20px;
	font-size: 14px;
	line-height: 1.8;
	opacity: 0.8;
}

.conD a {
	display: inline-block;
	margin-top: 20px;
	padding: 10px 30px;
	box-shadow: 0 0 0 1px #888;
	border: solid 3px currentColor;
	border-radius: 6px;
	background-color: #BF6A7A;
	background-color: var(--accent-color);
	color: #FFFFFF;
	color: var(--text-bright-color);
	font-size: 14px;
	text-decoration: none;
}
.conD a:hover {
	background-image: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0.2));
}

.conD .photo{
	min-height: 200px;
	background-image: url(../images/life.jpg);
	background-position: center;
	background-size:cover;
}

@media (min-width: 768px){
	.conD .container{
		display: flex;
		flex-direction: row-reverse;
		max-width: 1000px;
		max-width: var(--large-width);
		margin-left: auto;
		margin-right: auto;
		padding-top: 40px;
		padding-bottom: 40px;

	}
	
	.conD .photo{
		flex: 0 0 400px;
	}
	
	.conD .text{
		flex: 1;
		padding: 50px;
	}
}


/*フッター*/
footer{
	color:#fff;
	color:var(--text-bright-color);
	background-color: #2B5566;
	background-color: var(--dark-main-color);
	}
	footer .container{
		padding: 40px 20px;
	}
@media(min-width:768px){
	footer .container{
		display: flex;
		flex-wrap: wrap;
		max-width: 1000px;
		max-width: var(--large-width);
		margin-left: auto;
		margin-right: auto;
	}
	.footA{
		flex: 0 0 40%;
	}
	.footB{
		flex: 0 0 60%;
	}
	.footC{
		flex: 0 0 100%;
	}
}


/*フッターA:サイト情報*/

.footA{
	margin-bottom: 30px;
}
.footA h2{
	margin-top: 0;
	margin-bottom: 10px;
	font-family: 'Montserrat', sans-serif;
	font-size: 30px;
	letter-spacing: 0.2em;
}

.footA p{
	margin-top: 0;
	margin-bottom: 0;
	font-size: 14px;
}

.footA a{
	color: inherit;
	text-decoration: none;
}

/*フッターB：フッターメニュー*/
.footB div{
	margin-bottom: 20px;
}

.footB h3{
	margin-top: 0;
	margin-bottom: 10px;
	border-bottom: solid 1px currentColor;
	font-size: 14px;
}

.footB ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

.footB a{
	display: block;
	padding: 5px;
	color: inherit;
	font-size: 12px;
	text-decoration: none;
}

.footB a:hover{
	background-color: rgba(0,0,0,0.3);
}


@media (min-width: 768px){
	.footB{
		display: flex;
	}
	.footB div{
		flex: 1;
	}
	.footB div:not(:first-child){
		margin-left: 40px;
	}
}

/*フッターC：コピーライト*/
.footC{
	font-size: 12px;
	text-align: center;
	font-family: 'Montserrat', sans-serif;
}

/*フッターD：SNSメニュー*/
.footD{
	margin-top: 20px;
}
.footD ul{
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footD a{
	display: block;
	margin-right: 8px;
	padding: 0;
	color: inherit;
	font-size: 16px;
	text-decoration: none;
	border: solid 1px currentColor;
	width: 2em;
	line-height: 2em;
	border-radius: 50%;
	text-align: center;
}

.footD a:hover{
	background-color: rgba(0,0,0,0.3);
}

/* ヘッダー */
header{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	background-color: rgba(255,255,255,0.9);
}
.nohero header{
	position: static;
	border-bottom: solid 1px #ddd;
	border-bottom: solid 1px var(--gray-color);
}

/* ヘッダーA：サイト名 */
.headA{
	display: inline-block;
	line-height: 70px;
	padding-left: 20px;
	padding-right: 20px;
	background-color: #5D9AB2;
	background-color: var(--main-color);
	color: #fff;
	color: var(--text-bright-color);
	font-family: 'Montserrat', sans-serif;
	font-size: 24px;
	text-decoration: none;
}

/* ヘッダーB：ナビゲーションメニュー */
.headB ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

.headB a{
	display: block;
	padding: 15px;
	color: inherit;
	font-size: 12px;
	text-decoration: none;
}

.headB a:hover{
	background-color: rgba(0,0,0,0.3);
}

@media (min-width: 768px){
	header .container{
		display: flex;
		align-items: center;
		justify-content: space-between;
		max-width: 1000px;
		max-width: var(--large-width);
		margin-left: auto;
		margin-right: auto;
	}
	.headB ul{
		display: flex;
	}
}
/* ヘッダーC：トグルボタン */
@media (max-width: 767px){
	/*  小さい画面用設定*/
	header .container-small{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.headC{
		margin-right: 10px;
		padding: 0;
		border: none;
		outline: none;
		background: none;
		font-size: 28px;
		opacity: 0.5;
		cursor: pointer;
	}
	.headC:hover{
		opacity: 0.3;
	}
	
	.headB{
		display: none;
	}
}

@media (min-width: 768px){
	/*  大きい画面用設定*/
	.headC{
		display: none;
	}
	.headB{
		display: block !important;
	}
}

/* コンテンツページ：記事 */
.post .container{
		max-width: 800px;
		max-width: var(--middle-width);
		margin-left: auto;
		margin-right: auto;
		padding: 30px 10px;
}

.post h1{
	padding-left: 0.5rem;
	border-left: solid 0.75rem #BF6A7A;
	border-left: solid 0.75rem (--accent-color);
	font-size: 2rem;
}

.post p{
	font-size: 1rem;
	line-height: 2;
}
.post img{
	max-width: 100%;
}
/* 文字サイズの参照
.aaa{
	font-size: 90px;
}
.aaa h1{
	font-size: 2rem;
	font-weight: 400;
}
.aaa span{
	font-size: 3rem;
}*/

/* コンテンツページ：パンくずリスト */
.bread ol{
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bread a{
	display: block;
	padding: 5px;
	color: inherit;
	font-size: 0.875rem;
	text-decoration: none;
}

.bread a::after{
	margin-left: 10px;
	content: "\f054";
	font-family: "FontAwesome";
	opacity: 0.3;
}

.bread a:hover{
	background-color: rgba(0,0,0,0.3);
}

/* アバウトページ：画像と沿革 */
.history{
	background-color: #5D9AB2;
	background-color: va(--main-color);
	color:#fff;
	color:var(--text-bright-color);
}

.history .text{
	padding: 20px;
}
.history h2{
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 1.5rem;
}
.history .photo{
	min-height: 300px;
	background-image: url(../images/plant.jpg);
	background-position: center;
	background-size:cover;
}

.history table{
	border-collapse: collapse;
	border-top: solid 1px #ddd;
	border-top: solid 1px (--gray-color);
	font-size: 0.875rem;
}

.history th,
.history td{
	padding: 1.8rem 0;
	border-bottom: solid 1px #ddd;
	border-bottom: solid 1px (--gray-color);
}
.history th{
	padding-right: 1rem;
	text-align: left;
	word-break: keep-all;
}
@media (min-width: 768px){
	.history .container{
		display: flex;
		max-width: 1000px;
		max-width: var(--large-width);
		margin-left: auto;
		margin-right: auto;
	}
	
	.history .photo{
		flex: 3;
	}
	
	.history .text{
		flex: 2;
		padding: 50px;
	}
}

/* お問い合わせページ：問い合わせ先 */
.contact{
	margin: 20px 0;
	padding: 20px;
	border: solid 1px #ddd;
	border: solid 1px var(--gray-color);
	text-align: center;
}

.contact span{
	display:inline-block;
	margin-bottom: 20px;
	font-size: 2.2rem;
	width: 2em;
	line-height: 2em;
	border-radius: 50%;
	text-align: center;
	background-color: #5D9AB2;
	background-color: var(--main-color);
	color:#fff;
	color:var(--icon-color);
}
.contact h2{
	margin-top: 0;
	font-size: 1.2rem
}

.contact a{
	font-size: 1.4rem;
	color: inherit;
	text-decoration: none;
}
@media (min-width: 768px){
	.contact-wrap{
		display: flex;
	}
	.contact{
		flex: 1;
	}
	.contact:first-child{
		margin-right: 20px;
	}
}

/* お問い合わせページ：地図 */
.location iframe{
	width: 100%;
	height: 400px;
	vertical-align: bottom;
}

.location h2{
	margin: 0;
	padding: 20px 0;
	background-color: #5D9AB2;
	background-color: var(--main-color);
	color:#fff;
	color:var(--text-bright-color);
	font-size: 1.5rem;
	text-align: center;
}