@charset "utf-8";
/* CSS Document */



.test{
	text-align:center;
	color:#FC6;
}


/* ------ＨＯＭＥページのコンテンツ紹介の img h3 pをグループ化した時のグループに枠を付ける--- */

/* ---------------------------------------------------- */
/* 基本 */
/* ---------------------------------------------------- */

html,body {
	font-size: 13px;
}


img{
	border:none;
}

a {
	color: #25420d;
	transition: 0.3s;	/*マウスオン時の移り変わるまでの時間設定*/
    text-decoration: none;
}

a:hover {
	color: #5aa120;
	text-decoration:underline;
}

.f-red01{
	color:#FF0000;
}

.f-larger{
	font-size:larger;
}

.f-large{
	font-size:large;
}

.clear{
	clear:both;
}

body {
	line-height:1.3;
	font-family:"メイリオ", "ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3";
	list-style-type:none;
	font-weight: 500;
	font-style: normal;
	-webkit-text-size-adjust: none;
	background: #fff;
	color: #305512;
	margin:0px;
	padding:0px;
}

@media screen and (min-width:900px) {
	
html, body {
	font-size: 14px;
}
}

/* ---------------------------------------------------- */
/* ---------------------------------------------------- */

/*----ヘッダー----*/

#top-home-box{
	width:100%;　/*ＨＯＭＥページのヘッダー*/
}

#top-page-box{
	max-width:1200px;
	margin:auto;
}
	
#top-hr{	
	border-top: 25px solid #78d32e;
}

#top-home-box #h1-logo{
	width:320px;
	height:30px;
	float:left;
	margin-left:5%;
}

#h1-logo img {
	width: 300px;	/*ロゴ画像の幅*/
}

#top-home-box .message {
	width:50%;
	float:left;
	margin-left:5%;
	padding-top:10px;
	font-size:large;
}

#top-page-box #h1-logo{
	width:95%;	
	max-width:1150px;
	height:30px;
	margin-left:5%;
}

@media screen and (MAX-width:900px) {
	
#top-home-box .message{
	width:90%;
	margin:auto;
	padding-top:0px;
	padding-left:7%;
	font-size:medium;
}
}


/*----トップページのスライドショー----*/

.slide-container{
  height: 500px;
  width: 100%;
  position: relative;
}

.slide-container .image {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  background-size: cover;
  background-position: center center;
  
  animation: image-switch-animation 25s infinite;
}

.src1 {
  background-image: url(images/01.jpg);
}
.src2 {
  background-image: url(images/02.jpg);
}
.src3 {
  background-image: url(images/03.jpg);
}
.src4 {
  background-image: url(images/04.jpg);
}
.src5 {
  background-image: url(images/05.jpg);
}

@keyframes image-switch-animation {
  0%{ opacity: 0;}
  5%{ opacity: 1;}
  25%{ opacity: 1;}
  30%{ opacity: 0;}
  100%{ opacity: 0;}
}

.image:nth-of-type(1) {
  animation-delay: 0s;
}
.image:nth-of-type(2) {
  animation-delay: 5s;
}
.image:nth-of-type(3) {
  animation-delay: 10s;
}
.image:nth-of-type(4) {
  animation-delay: 15s;
}
.image:nth-of-type(5) {
  animation-delay: 20s;
}

/* ---------------------------------------------------- */
#wrapper{
	max-width:1200px;
	margin:auto;
}

/* ---------------------------------------------------- */
#banner-wrapper{
	width:90%;
	margin:auto;
	padding:2%;
}

.img-banner-w{
	width:100%;
}

/* ---------------------------------------------------- */
.main-home-wrapper{
	width:90%;
	margin:auto;
	padding:2%;
}

.inf-box-l{
	width:500px;
	float:left;
	margin:0 2% 0 2%;
}

.inf-box-l-h2{
	margin:0 0 -20px 0;
	padding:0px;
	font-size:20px;
}

.inf-box-l p{
	margin-left:5%;
}

.inf-box-r{
	width:400px;
	float:right;
	text-align:right;
	margin:0 5% 0 2%;
}

.main-wrapper{
	width:90%;	
	max-width:1150px;
	margin:auto;
	padding:2%;
}

.main-h2{
	margin:0px;
	padding:0px;
	font-size:20px;
}

.main-hr{
	border-top: 1px solid #5aa120;
	margin:5px 0px 20px 0px;
}


.main-hr2{
	border-top: 1px solid #5aa120;
	margin:20px 3% 30px 3%;
}

.maine-img{
	width:65%;
	margin:auto;
}

.maine-img img{
	width:100%;
	height:auto;
	margin-bottom:20px;
	border:#cddac3 1px solid;
	box-shadow:0.5em 0.5em 1em 0 #aac893;/*cddac3*/
}

.i-fb:before {
  content: url('https://kyoto-hyoutan.com/000/images/i-fb.gif');
}

.i-ig:before {
  content: url('https://kyoto-hyoutan.com/000/images/i-ig.gif');
}

.i-pdf:before {
  content: url('https://kyoto-hyoutan.com/000/images/i-pdf.gif');
}


@media screen and (MAX-width:900px) {
	
.maine-img{
	width:80%;
	margin:auto;
}

.inf-box-l{
	width:95%;
	float:none;
	margin:auto
}



.inf-box-l-h2{
	margin:0 0 0 0;
	font-size:18px;
}

.inf-box-l p{
	margin-left:5%;
}

.inf-box-r{
	width:95%;
	float:none;
	margin:auto
}
}

/* ---------------------------------------------------- */

.content-box{
	width:26%;
	float:left;
	margin:0 1% 30px 1%;
	padding:2%;
	background-color:#FFFFFF;
	border:#cddac3 1px solid;
	border-radius: 10px 10px 10px 10px;
	box-shadow:none;
}

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

.content-box h3{
	margin:10px 10px 20px 4%;
	font-size:16px;
}

.content-box p{
	margin:10px 10px 10px 7%;
	font-size:13px;
}

@media screen and (MAX-width:900px) {
.content-box{
	width:40%;
	float:left;
	margin:0 2% 40px 3%;
	padding:2%;
	background-color:#FFFFFF;
	border:#cddac3 1px solid;
	border-radius: 10px 10px 10px 10px;
	box-shadow:0.5em 0.5em 1em 0 #cddac3;
}
}

@media screen and (MAX-width:700px) {

.content-box{
	width:95%;
	float:none;


	margin:auto
	padding:2%;
	margin:0 2% 10px 1%;
}

.content-box h3{
	font-size:15px;
}
}

/* ---------------------------------------------------- */
/*001説明ページなどで使用　右に300px画像用*/

.main-box-Al{
	max-width:700px;
	margin:0 0 0 5%;
	float:left;
}

.main-box-Al h3{
	margin:0 10px 0 0;
	font-size:18px;
}

.main-box-Al h4{
	margin:0;
	font-size:15px;
}

.main-box-Ar{
	width:300px;
	float:right;
	text-align:center;
	margin:0 0 10px 0:
}

/* ---------------------------------------------------- */
/*002種まきページんどで使用　左に28%写真　右に60％s説明*/

.main-box-B{
	width:90%;
	margin:30px auto;
	padding:2%;
	background-color:#FFFFFF;
	border:#cddac3 1px solid;
	border-radius: 10px 10px 10px 10px;
	box-shadow:0.5em 0.5em 1em 0 #cddac3;
}

.main-box-Bl{
	width:28%;
	float:left;
	margin:0 0 0 5%;
}

.main-box-Bl img{
	width:100%;
	height:auto;
}

.main-box-Br{
	width:60%;
	float:right;
	margin:0 3% 0 0;
}


.main-box-Br h3{
	margin:0;
	font-size:16px;
}

@media screen and (MAX-width:900px) {
	
.main-box-Bl{
	width:95%;
	float:none;
	margin:auto;
}

.main-box-Bl img{
	width:90%;
	height:auto;
	margin:5%;
}

.main-box-Br{
	width:95%;
	float:none;
	margin:auto;
}
}

/* ---------------------------------------------------- */
/*oo2種配布など横に３カラム*/
.main-box-C{
	width:24%;
	float:left;
	margin:30px 0 30px 4%;
	padding:2%;
	background-color:#FFFFFF;
	border:#cddac3 1px solid;
	border-radius: 10px 10px 10px 10px;
	box-shadow:0.5em 0.5em 1em 0 #cddac3;
}

.main-box-C h3{
	margin:0 0 10px 0;
	font-size:17px;
}

.main-box-C ｐ{
	margin:0;
	font-size:17px;
}

.main-box-C img{
	width:100%;
	height:auto;
}

@media screen and (MAX-width:900px) {
	
.main-box-C{
	width:90%;
	float:none;
	margin:5% auto;
	padding:5%;
}

}

/* ---------------------------------------------------- */
/*051方広寺の栽培など使用　上列説明　下に写真1列に３→２*/

.main-box-D{
	width:90%;
	margin:30px auto;
	padding:2%;
	background-color:#FFFFFF;
	border:#cddac3 1px solid;
	border-radius: 10px 10px 10px 10px;
	box-shadow:0.5em 0.5em 1em 0 #cddac3;
}

.main-box-D h3{
	margin:0 0 10px 0;
	font-size:17px;
}

.main-box-D h4{
	margin:0 0 0 3%;
	font-size:14px;
}

.img-box{
	width:31%;
	float:left;
	margin:1% 0% 1% 2%;
	
	font-size:11px;
	font-weight:400;
	line-height:1.1;
}

.img-box img{
	width:100%;
}

@media screen and (MAX-width:900px) {

.main-box-D .img-box{
	width:47%;;
	float:left;
}
}



/* ---------------------------------------------------- */
/*061栽培など使用　上列画像　説明　下に説明*/

.main-box-E{
	width:90%;
	margin-left:8%;
	padding:2%;
	background-color:#FFFFFF;
}

.main-box-E h3{
	margin:0 0 10px 0;
	font-size:17px;
}

.main-box-E h4{
	margin:0 0 0 3%;
	font-size:14px;
}

.main-box-E img{
	width:70%;
	height:auto;
}

/* ---------------------------------------------------- */


#foot-wrapper{
	width:85%;
	margin:auto;
	padding:1% 2%;
	text-align:center;
}