@charset "utf-8";
/* CSS Document */
/* 基本設定: フォントサイズ　*/
@media(max-width: 599px){
	:root {
		font-size: 14px;
	}
}

@media(min-width: 600px) and (max-width: 799px) {
	:root{
		font-size: 16px;
	}
}

@media(min-width: 800px) {
	:root{
		font-size: 18px;
	}
}
body{
	font-size: 16px;
}

/*基本設定：ページ全体*/
body {
	font-family: 'メイリオ’,’Hiragino Kaku Gothic Pro',sans-selif;
	margin: 0;
}

/*コンテンツA：ヒーローイメージ*/
.conA {
	text-align: center;
	background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.4)),url(../images/fruits.jpg);
	background-position: center;
	background-size: cover;
	height: 100vh;
	min-height: 450px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #FFFFFF;
	}
.conA.compact{
	height: 450px;;
	min-height: 0;
	background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)),url(../images/balloon.jpg);
}
.conA h1 {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 15vw;
	font-family: 'Montserrat', sans-serif;
	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;
	color: #FFFFFF;
	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));
}
.conB h2 {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 20px;
}
.conB p {
	margin-top: 0px;
	margin-bottom: 20px;
	font-size: 14px;
	line-height: 1.8;
	opacity: 0.8;	
}
.conB a {
	color: #5D9AB2;
	text-decoration: none;
}
.conB a:hover{
	text-decoration: underline;
}
.conB .icon {
	display: inline-block;
	margin-bottom: 20px;
	font-size: 40px;
	background-color:  #DDDDDD;
	color: #FFFFFF;
	width:  2em;
	line-height: 2em;
	border-radius:  50%;
	text-align: center;
}
.conB .text {
	text-align: center;
}
/*コンテンツB：概要（アイコン＋テキスト）*/
.conB .container {
	padding-top: 80px;
	padding-bottom:  20px;
}

.conB .text {
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 60px;
	text-align: center;
}
@media (min-width: 768px) {
	.conA h1{
		font-size: 115px;
	}
	.conA p {
		font-size: 24px;
	}
}
@media (min-width: 768px) {
.conB .container{
	display: flex;
	max-width: 1000px;
	max-width: var(--large-width);
	margin-left: auto;
	margin: auto;
}
.conB .text {
	flex: 1;
}
}
/*コンテンツC：概要（画像+テキスト）*/
.conC {
	background-color: #5d9ab2;
	color: #FFFFFF;
}
.conC h2 {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 20px;
}
.conC p {
	margin-top: 0px;
	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;
	color: #FFFFFF;
	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 {
	background-image: url(../images/note.jpg);
	background-position: center;
	background-size: cover;
	min-height:  200px;
}
.conC .text {
	padding: 20px;
}
.conC h2 {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 1.5em ;
}
@media(min-width: 768px) {
	.conC .container {
		display: flex;
		max-width: 1000px;
		margin-left: auto;
		margin-right: auto;
	}
	.conC .photo {
		flex: 3;
	}
	.conC .text{
		flex: 2;
		padding: 50px;
	}
}
/*コンテンツD：概要（画像+テキスト）逆配置*/
.conD h2 {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 20px;
}
.conD p {
	margin-top: 0px;
	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;
	color: #FFFFFF;
	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 {
	background-image: url(../images/life.jpg);
	background-position: center;
	background-size: cover;
	min-height:  200px;
}
.conD .container {
	padding-top: 2px;
}
.conD .text {
	padding: 20px;
}
@media(min-width: 768px) {
	.conD .container {
		display: flex;
		flex-direction: row-reverse;
		max-width: 1000px;
		margin-left: auto;
		margin-right: auto;
		padding-top: 40px;
		padding-bottom: 40px;
	}
	.conD .photo {
		flex: 0 0 400px;
	}
	.conD .text{
		flex: 1;
		padding: 50px;
	}
}
/*　flex補足　　→　　flex: 0(伸長するか)　0（縮小するか）　400（基準の幅）；*/
/*　　　　　　　　0：no　1：yes　例　flex：1 1 400 ←この場合はflex1と同じ　*/
/*footerここから*/
footer {
	color: #FFFFFF;
	background-color: #2B5566;
}
footer .container {
	padding: 40px 20px;
}
@media(min-width: 768px) {
	footer .container{
		display: flex;
		flex-wrap: wrap;
		max-width: 1000px;
		margin-left: auto;
		margin-right: auto;
	}
}
/*　footerサイト情報ここから　*/
.footA {
	margin-bottom: 30px;
}
.footA h2 {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 30px;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 0.2em;
}
.footA p {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 14px;
}
.footA a {
	color: inherit;
	text-decoration: none;
}
/*footBここから*/
.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;
	}	
	.footA {
		flex: 0 0 40%;
	}
	.footB {
		flex: 0 0 60%;
	}
	.footC {
		flex: 0 0 100%;
	}
}

/*　footCここから　*/
.footC {
	font-size: 12px;
	text-align: center;
	font-family: 'Montserrat', sans-serif;
}
/* footD: SNSメニュー　ここから */
.footD {
	margin-top: 20px;
}
.footD ul {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}
.footD a {
	display: block;
	margin-right: 8px;
	padding: 0px;
	color: inherit;
	font-size: 16px;
	font-size: 12px;
	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.7);
}
.nohero header {
	position: static;
	border-bottom: solid 1px #ddd;
}
.headA {
	display: inline-block;
	line-height: 70px;
	padding-left: 20px;
	padding-right: 20px;
	background-color: #5D9AB2;
	color: #fff;
	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;
		margin-left: auto;
		margin-right: auto;
	}
.headB ul {
		display: flex;
	}
}
/* ヘッダーC トグルボタン　*/
@media (max-width: 767px) {
	/*	最大で　767pxの幅の設定　→　767px以下	*/
	header .container-small {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.headC {
		margin-left: 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)	{
	/*	最小の幅	768pxの幅の設定　→　768以上*/
	.headC {
		display: none;
	}
	.headB {
		display: block !important;
	}
}
/* コンテンツページ記事　*/
.post .container {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	padding: 30px 10px;
}
.post h1 {
	padding-left: 0.5rem;
	border-left: solid 	0.75rem #bf6a7a;
	font-size: 2rem;
}
.post p {
	font-size: 1rem;
	line-height: 2;
}
.post img {
	max-width: 100%;
}

/* コンテンツページ：　パンくずリスト　*/
.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;
	color: #FFFFFF;
}
.history h2 {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 1.5rem ;
}
.history .text {
	padding: 20px;
}
.history .photo {
	background-image: url(../images/plant.jpg);
	background-position: center;
	background-size: cover;
	min-height:  300px;
}
.history table{
	border-collapse: collapse;
	border-top: solid 1px #ddd;
	font-size: 0.875rem;
}
.history  th,
.history td{
	padding-top: 1.8rem;
	padding-bottom: 1.8rem;
	border-bottom:  solid 1px #ddd;
}
.history th{
	padding-right: 1rem;
	text-align: left;
	word-break: keep-all;
}
@media(min-width: 768px){
	.history .container {
		display: flex;
		max-width: 1000px;
		margin-left: auto;
		margin-right: auto;
	}
	.history .photo {
		flex: 3;
	}
	.history .text{
		flex: 2;
		padding: 50px;
	}
}
/* お問い合わせページ：　問い合わせ先　*/
.contact{
	margin-top: 20px;
	margin-bottom: 20px;
	padding: 20px;
	border: solid 1px #ddd;
	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;
	color: #FFF;
}
.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-top: 20px;
	padding-bottom: 20px;
	background-color: #5d9ab2;
	color: #fff;
	font-size: 1.5rem;
	text-align: center;
}
/*　記事一覧A　*/
.listA h1{
	text-align: center;
}
.listA .container {
	display: flex;
	flex-wrap: wrap;
	max-width: 1000px;
	margin: 30px auto;
}
.listA article {
	flex: 1 1 300px;
	display: flex;
}
.listA a{
	flex: 1;
	margin: 10px;
	display: block;
	border: solid 1px #ddd;
	color: inherit;
	text-decoration: none;
}
.listA a:hover {
	opacity: 0.8;
}
.listA .photo{
	min-height: 150px;
	background-position: center;
	background-size: cover;
}
.listA .text {
	margin: 10px;
}
.listA h2{
	font-size: 18px;
}
.listA p{
	font-size: 14px;
	opacity: 0.8;
}
/*　記事一覧B　*/
.listB h1{
	text-align: center;
}
.listB .container {
	display: flex;
	flex-wrap: wrap;
	max-width: 1000px;
	margin: 30px auto;
}
.listB article {
	flex: 1 1 384px;
	display: flex;
}
.listB a{
	flex: 1;
	margin: 10px;
	display: flex;
	border: solid 1px #ddd;
	color: inherit;
	text-decoration: none;
}
.listB a:hover {
	opacity: 0.8;
}
.listB .photo{
	flex: 2;
	min-height: 0;
	background-position: center;
	background-size: cover;
}
.listB .text {
	flex: 3;
	margin: 10px;
}
.listB h2{
	font-size: 18px;
}
.listB p{
	font-size: 14px;
	opacity: 0.8;
}
@media (max-width: 384px){
	.listB .photo{
		flex: 1;
	}
	.listB p{
		display: none;
	}
}
/*　記事一覧C　*/
.listC h1{
	text-align: center;
}
.listC .container {
	display: flex;
	flex-wrap: wrap;
	max-width: none;
	margin: 2px auto;
}
.listC article {
	flex: 1 1 250px;
	display: flex;
}
.listC a{
	position: relative;
	flex: 1;
	margin: 2px;
	display: block;
	border: solid 1px #ddd;
	background-color: currentColor;
	color: inherit;
	text-decoration: none;
}
.listC a:hover {
	opacity: 0.8;
}
.listC .photo{
	min-height: 250px;
	background-position: center;
	background-size: cover;
	opacity: 0.6;
}
.listC .text {
	position: absolute;
	bottom: 0;
	left: 0;
	margin: 10px;color: #fff;
}
.listC h2{
	margin: 0;
	font-size: 18px;
}
.listC p{
	margin: 0;
	font-size: 14px;
	opacity: 0.8;
}
@media (min-width: 1000px) {
	.listC article {
		flex: 1 1 25%;
	}	
}