/*!
 * custom_n_garden2020.css
 */

/*  =================================================================
   # トップページ
   ================================================================= */

/*  =================================================================
   # common.cssベース　のカスタマイズ
   ================================================================= */

a,
button {color: #388388;}

a:hover,
button:hover {color: #000; }






/* # =================================================================
#	トップページ
# ================================================================= */

/*メインスライド vegas*/

#vegas {
    width: 100%;
    height: calc(100vh - 150px );
}

.vegas_inner{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
width:50%;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    flex-wrap: wrap; 
}


.btn_news{
  position: relative;
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(0,0,0,.0);
background-size:100px 100px;
border:1px solid rgba(255,255,255,.8);
}

.btn_news span{
  position: absolute;
  display: inline-block;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100px;
  text-align:center;
font-size:80%;
color:#fff;font-family:serif;
}

.btn_news:hover{  background: rgba(123,27,27,.6);
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}


@media only screen and (max-width: 1030px) {

}


@media only screen and (max-width: 767px) {
#vegas {
    width: 100%;
    height: calc(100vh - 75px );
}
.vegas_inner{ width: 80%;}
.btn_news{
  width: 80px;
  height: 80px;}
.btn_news span{width:80px;}
}


/*トップページサブタイトル*/
.top_sub_title{
    display:flex;
    align-items:flex-end;
    justify-content:center;
height:70px;
margin-bottom:15px;
padding-bottom:20px;
border-bottom:0px solid rgba(122,144,100,.2);
}
.top_sub_title h3{font-weight:normal;line-height:1;color:#495d36;padding-bottom:5px;padding-right:50px;}

.top_sub_title img{height:100%;margin-right:10px;}

@media only screen and (max-width: 767px) {
.top_sub_title{   }
.top_sub_title img{height:80%;}
}

/*更新情報*/

.news{
padding-top:50px;margin-bottom:80px;
}

.news dl{width:80%;margin:0 auto;
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
    flex-wrap:wrap;
line-height:1.4;
}

.news dl dt{width:6em;margin-top:15px;color:#000;}
.news dl dd{width:calc(100% - 6em);margin-top:15px;}

@media only screen and (max-width: 767px) {
.news dl{width:100%;}
.news dl dt{width:auto;margin-top:15px;}
.news dl dd{width:100%;margin-top:5px;margin-bottom:15px;}
}

/*ブログ紹介*/

.blog_container{
display:flex;
align-items:stretch;
justify-content:space-between;
flex-wrap:wrap;
margin-bottom:100px;
}

.blog_box{
width:48%;
}

.blog_box ul{width:100%; line-height:1.4;color:#666;background: rgba(122,144,100,.3);border:3px solid transparent; transition:1s all;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    flex-wrap:wrap;
padding:40px 40px 30px;
}

.blog_box ul li{width:100%;text-align:center; position: relative;}
.blog_box ul li:first-child{width:40%;margin-bottom:20px;border-radius:50%;overflow:hidden;}
.blog_box ul li:first-child img{width:100%;}
.blog_box ul li:nth-child(2){font-size:125%;font-weight:bold;color:#954949;line-height:1;}
.blog_box ul li:nth-child(3){margin-bottom:15px;color:rgba(122,144,100,.9);font-style:italic;letter-spacing:0;}
.blog_box ul li:nth-child(4){margin-bottom:20px;font-size:90%;line-height:1.3;min-height:4em;}
.blog_box ul li:nth-child(4) span{}
.blog_box ul li:nth-child(5){margin-bottom:25px;text-align:left;}

.blog_box a:hover ul{background:rgba(122,144,100,.5); border:3px solid rgba(122,144,100,.5);}

.blog_box a ul li:first-child{
    position: relative;z-index: 1;/*拡大時にborderradiusが効かないための対処*/
    overflow: hidden;
border-radius:50%;}

.blog_box a ul li:first-child img{transition:1s all;}

.blog_box a:hover ul li:first-child img{ transform:scale(1.2,1.2);}



@media only screen and (max-width: 1030px) {
.blog_box ul{padding:30px;}
.blog_box ul li:nth-child(3){font-size:80%;}
}



@media only screen and (max-width: 767px) {
.blog_box{width:100%;margin-bottom:5px;}
.blog_box ul{border:0;padding:30px 20px 20px;border-radius:20px;}
.blog_box a:hover ul{border:0;}
.blog_box ul li:nth-child(4){min-height:auto;}
}

/*　最近の庭　*/
.latest_garden{padding:50px 0}
.latest_album{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    flex-wrap:wrap;
}
.latest_album figure{width:32%;}
.latest_album figure img{width:100%;}
.latest_album figure figcaption{text-align:right;font-size:80%;font-style:italic;padding-right:1em;}

@media only screen and (max-width: 767px) {
.latest_album{    justify-content:center;}
.latest_album figure{width:80%;margin-bottom:15px;}
}

/*　撮影著作　*/
.toppage_declaration{padding-top:80px;
    display:flex;
    align-items:flex-start;
    justify-content:center;

}
.toppage_declaration i{font-size:120%;margin-right:5px;}

@media only screen and (max-width: 767px) {
.toppage_declaration{padding-top:40px; padding-bottom:40px;    line-height:1.3; }
.toppage_declaration i{}
}

/* # =================================================================
#	ページタイトル
# ================================================================= */

.page_title{padding:60px 0 30px;}
.page_title img{margin-left:35%; width:30%;}

@media only screen and (max-width: 767px) {
.page_title{padding:30px 0;}
.page_title img{margin-left:30%; width:40%;}
}

@media only screen and (max-width: 450px) {
.page_title img{margin-left:20%; width:60%;}
}

/* # =================================================================
# 　メインコンテンツ
# ================================================================= */

.main-contents{padding-bottom:30px;}

/* # =================================================================
#	プランツインデックス
# ================================================================= */

.photo_index_container{margin-bottom:50px;
    display: flex;
    align-items:flex-start;
    justify-content:space-between;
    flex-wrap: wrap; 
    align-content:space-between;
}

.photo_index_container::before {
        content: "";
        width: 23%;
        order: 1;
    }
 
.photo_index_container::after {
        content: "";
        display: block;
        width: 23%;
    }


/*サルビアとハーブ　　　ul*/

.photo_index_container ul{
width:23%;
margin-bottom:20px;
    display: flex;
    align-items:flex-start;
    justify-content:space-between;
    flex-wrap: wrap; 
    align-content:space-between;
 position: relative;
}

.photo_index_container ul a{width:100%;}

.photo_index_container ul li{
line-height:1.2;
}

.photo_index_container ul li:first-child{
margin:0 auto; 
 overflow:hidden; //はみ出た部分を非表示に
}

.photo_index_container ul li:first-child img{width:100%;
 transition:1s all;
}

.photo_index_container ul li:first-child img:hover{
  transform:scale(1.2,1.2);
  transition:.5s all;
}

.photo_index_container ul li:nth-child(2){font-size:120%;font-weight:500;position:absolute;top:0;left:0; color:rgba(255,255,255,.5); top:2px;left:5px;font-style:italic;font-family:serif;}
.photo_index_container ul li:nth-child(3){color:#000;margin:3px 0;}
.photo_index_container ul li:nth-child(4){color:#666;font-size:90%;}

@media only screen and (max-width: 767px) {
.photo_index_container ul{width:32%;margin-bottom:20px;}
}

@media only screen and (max-width: 480px) {
.photo_index_container ul{width:48%;margin-bottom:20px;}
}


/*リースとアレンジメント　　　ギャラリー*/

.gallery_box{margin-bottom:50px;
width:23%;
margin-bottom:20px;
 position: relative;
}

.gallery_box .gallery_photo{
margin:0 auto; 
 overflow:hidden; //はみ出た部分を非表示に
}

.gallery_box .gallery_photo img{width:100%;
 transition:1s all;
}

.gallery_box .gallery_photo img:hover{
  transform:scale(1.1,1.1);
  transition:.5s all;
}


.gallery_box p.indexCaption{font-size:90%;line-height:1.1;margin-top:3px;}



@media only screen and (max-width: 767px) {
.photo_index_container ul,
.gallery_box{width:32%;margin-bottom:20px;}
}

@media only screen and (max-width: 480px) {
.photo_index_container ul,
.gallery_box{width:48%;margin-bottom:20px;}
}

/*アレンジメント　　　サムネイル画像を正方形にトリミング*/

.thumbs_square {
  width: 100%;

  position: relative;
}
.thumbs_square::before {
  content: "";
  display: block;
  padding-top: 100%;
}
.thumbs_square img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  object-fit: cover;
}

/*インデックスナンバー*/

.index_number{color:rgba(255,255,255,.8); font-size:120%;line-height:1;font-weight:600;position:absolute;top:7px;left:7px;font-style:italic;font-family:serif;}
.index_number.index_number_shadow{color:#fff; text-shadow: #000 0 0 3px;}
.index_number.index_number_marron{color:rgba(102,51,51,.4); }



/*インデックス　ページネイション*/

.pagination_container{
    display: flex;
    align-items:flex-start;
    justify-content:center;
margin-bottom:30px;
}

.pagination_container ul{
    display: flex;
    align-items:flex-start;
    justify-content:center;
}

.pagination_container ul li{margin:0 5px;width:40px; height:40px;line-height:40px;text-align:center;}
.pagination_container ul li a{display:block;background:rgba(123,27,27,.0);color:#7b1b1b;border:1px solid #7a1b1b;}
.pagination_container ul li a:hover{background:rgba(123,27,27,.2);}
.pagination_container ul li a.hear{background:rgba(123,27,27,1);color:#fff;border:1px solid #7a1b1b;}


@media only screen and (max-width: 767px) {
.pagination_container ul li{margin:0 3px;width:24px; height:24px;line-height:24px;font-size:80%;}
}

/* # =================================================================
#	個別ページ
# ================================================================= */

/*植物名タイトル*/
.plant_title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap: wrap; 
    align-content:flex-start;
margin-top:20px;
margin-bottom:40px;
}

.plant_title_left.plant_title_left_salvia{background-image:url(../images/bg_number_salvia.png);}
.plant_title_left.plant_title_left_herb{background-image:url(../images/bg_number_herb.png);}

.plant_title_left{
  position: relative;
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(73,94,54,.8);
background-size:100px 100px;
}

.plant_title_left span{
  position: absolute;
  display: inline-block;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100px;
  text-align:center;
font-size:120%;
color:#fff;font-family:serif;
}




.pageTitle01{
width : -webkit-calc(100% - 115px) ;
width : calc(100% - 115px) ;
}

.pageTitle01 h1{font-size:22px;color:#495e36;line-height:1.2;margin-bottom:3px;}

.pageTitle01 tr{
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
    flex-wrap: wrap; 
    align-content:flex-start;
}
.pageTitle01 td{ width:100%;}


@media only screen and (max-width: 767px) {
.plant_title{    align-items:flex-start;}
.plant_title_left{  width: 80px; height: 80px;background-size:80px 80px;}
.plant_title_left span{  width: 80px;}
.pageTitle01{
width : -webkit-calc(100% - 90px) ;
width : calc(100% - 90px) ;
}
}

@media only screen and (max-width: 400px) {

.plant_title_left{  width: 60px; height: 60px;background-size:60px 60px;}
.plant_title_left span{  width: 60px;}
.pageTitle01{
width : -webkit-calc(100% - 65px) ;
width : calc(100% - 65px) ;
}
.plant_title_left span{font-size:110%;}
.pageTitle01 h1{font-size:18px;margin-bottom:1px;}
}


/*植物本文*/

.plant_body{margin-bottom:50px;
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
    flex-wrap: wrap; 
    align-content:flex-start;
}

.plant_body_right{ justify-content:flex-end;}

.plant_body_center{ justify-content:center;}



p.plant_body_text{width:96%;margin-left:2%;margin-right:2%;margin-bottom:40px;font-size:110%;line-height:1.8;}
p.plant_body_text_half01{width:52.5%;margin-left:2%;margin-right:2%;margin-bottom:40px;}
p.plant_body_text_half02{width:39.5%;margin-left:2%;margin-right:2%;margin-bottom:40px;}
.img_tate{width:39.5%;margin-left:2%;margin-right:2%;margin-bottom:41px;}
.img_yoko{width:52.5%;margin-left:2%;margin-right:2%;margin-bottom:41px;}
.img_yoko_c{width:52.5%;margin-left:23.75%;margin-right:23.75%;margin-bottom:41px;}
.img_yoko-130{width:52.5%;margin-left:2%;margin-right:2%;margin-bottom:41px;margin-top:-130px;}
.img_yoko_r-130{width:52.5%;margin-left:45.5%;margin-right:2%;margin-bottom:41px;margin-top:-130px;}

.fig_tate{width:39.5%;margin-left:2%;margin-right:2%;margin-bottom:41px;}
.fig_yoko{width:52.5%;margin-left:2%;margin-right:2%;margin-bottom:41px;}
.fig_yoko_c{width:52.5%;margin-left:23.75%;margin-right:23.75%;margin-bottom:41px;}

.fig_yoko_r-130{width:52.5%;margin-left:45.5%;margin-right:2%;margin-bottom:41px;margin-top:-130px;}

.fig_tate img,
.fig_yoko img,
.fig_yoko_c img,
.fig_yoko_r-130 img{width:100%}

.plant_body figcaption{font-size:90%;line-height:1.2;margin-top:3px;}

@media only screen and (max-width: 1030px) {
p.plant_body_text{font-size:100%;line-height:1.6;}
.img_yoko_r-130,.fig_yoko_r-130{margin-top:-100px;}
}

@media only screen and (max-width: 767px) {
.plant_body,.plant_body_right{justify-content:center;}

p.plant_body_text{font-size:100%;line-height:1.6;}
p.plant_body_text,
p.plant_body_text_half01,p.plant_body_text_half02{width:100%;margin-left:0;margin-right:0;}
.img_tate{width:72%;margin-left:0;margin-right:0;}
.img_yoko,
.img_yoko_c{width:96%;margin-left:0;margin-right:0;}
.img_yoko_r-130,.img_yoko-130{width:96%;margin-left:0;margin-right:0;margin-top:0;}

.fig_tate{width:72%;margin-left:0;margin-right:0;}
.fig_yoko,
.fig_yoko_c{width:96%;margin-left:0;margin-right:0;}
.fig_yoko_r-130{width:96%;margin-left:0;margin-right:0;margin-top:0;}

}


@media only screen and (max-width: 400px) {
.plant_body{justify-content:center;}
.img_tate{width:75%;}
 .img_yoko,.plant_body .img_yoko_c,.plant_body .img_yoko_r-130{width:100%;}

.fig_tate{width:75%;}
.fig_yoko,.fig_yoko_c,.fig_yoko_r-130{width:100%;}
}

/*回り込み*/

.plant_body_text_wrap01,
.plant_body_text_wrap02{width:96%; margin-left:2%;margin-right:2%;margin-bottom:40px;font-size:110%;line-height:1.8;}
.plant_body_text_wrap01 img{float: right;margin:0 0 15px 41px;width:41.14583333%;}
.plant_body_text_wrap02 img{float: right;margin:0 0 19px 41px;width:54.6875%;}
.plant_body_text_wrap01::after,
.plant_body_text_wrap02::after{
  clear: both ;
  content: ''; 
  display: block;
}

@media only screen and (max-width: 767px) {
.plant_body_text_wrap01,
.plant_body_text_wrap02{display:flex;align-items:flex-start;justify-content:center;flex-wrap:wrap;width:100%;margin-left:0;margin-right:0;font-size:100%;line-height:1.6;}
.plant_body_text_wrap01 img{float:none;display:block;margin:40px 0 0 0;width:72%;order:2;}
.plant_body_text_wrap02 img{float:none;display:block;margin:40px 0 0 0;width:96%;order:2;}
}

@media only screen and (max-width: 400px) {
.plant_body_text_wrap01 img{width:75%;}
.plant_body_text_wrap02 img{width:100%;}
}

/*本文中のリスト*/

.ul_disc01,.ol_suuji01{
width:96%;margin-left:2%;margin-right:2%;margin-bottom:40px;font-size:110%;line-height:1.8;
}
.ul_disc01.ul_yoko,.ol_suuji01.ol_yoko{
width:52.5%;margin-left:2%;margin-right:2%;
}
.ul_disc01.ul_tate,.ol_suuji01.ol_tate{
width:39.5%;margin-left:2%;margin-right:2%;
}
.ul_disc01 li{list-style-position: inside;list-style-type:disc;text-indent:-1em;padding-left:1em;line-height:1.4;margin-bottom:1em;}
.ol_suuji01 li{list-style-position: inside;text-indent:-1em;padding-left:1em;line-height:1.4;margin-bottom:1em;}
@media only screen and (max-width: 767px) {
.ul_disc01,.ol_suuji01{width:100%;margin-left:0;margin-right:0;font-size:100%;line-height:1.6;}
.ul_disc01.ul_yoko,.ol_suuji01.ol_yoko,
.ul_disc01.ul_tate,.ol_suuji01.ol_tate{
width:100%;margin-left:0%;margin-right:0%;
}
}


/* # =================================================================
#　フッター
# ================================================================= */
footer{width:100%;}

.bottom_image{text-align:right;padding-top:50px;}
.bottom_image img{width:35%;}

.footer_inner{background:rgba(76,51,35,.8);
padding:30px 0 50px;text-align:center;
color:#fff;
}

@media only screen and (max-width: 1030px) {
footer{width:100%;}
}

@media only screen and (max-width: 767px) {
.footer_inner{font-size:80%}
.bottom_image img{width:80%;}
footer{width:100%;}
}

/* # =================================================================
#　ページトップ
# ================================================================= */


.footer_pagetop {
	position: fixed;
	right: 20px;
	bottom: 10px;

	display: none;
	height: 60px;
	opacity: 1;
	width: 60px;
	z-index: 80;
}

.footer_pagetop a {
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	height: 100%;
	background: rgba(122,27,27,.6);
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 100%;
}

.footer_pagetop a > {
	display: block;
}

.footer_pagetop a:hover{
background:rgba(122,27,27,1);
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
    transition: 0.3s;}

.footer_pagetop a span {
	position: relative;
	top: 3.5px;
	border-right: solid 2px #fff;
	border-top: solid 2px #fff;
	display: block;
	height: 14px;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	width: 14px;
}

@media only screen and (max-width: 767px) {
.footer_pagetop {
	right: 10px;
	height: 40px;
	width: 40px;
}
}