@charset "UTF-8";


/*******************************

厳選Css

*******************************/
.page #hero{
    border-top-color: #b6c976;
}
.page #hero h1:after {
    content: url(../images/select_head_img01.png);
}

section {
    margin-bottom: 80px;
}


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


}

/*******************************

下層サブナビゲーション

*******************************/
nav.aboutNav {
    background-color: #b6c976;
}

nav.subNav ul {
    width: 988px;
}

nav.subNav li {
    width: 16%;
    letter-spacing: -0.02em;
	display: inline-block;
}


/*-----------------------------
.sec02
-------------------------------*/

.sec02_inner h3{
    font-size: 23px;
    border-bottom: 2px dotted #d6d6d6;
    background: url(../images/h_icon.png) left top no-repeat;
    padding: 0 0 10px 35px;
}

.sec02_inner h3{
    font-size: 23px;
    border-bottom: 2px dotted #d6d6d6;
    background: url(../images/h_icon.png) left top no-repeat;
    padding: 0 0 10px 35px;
}

/*-----　日本国産の銘石・墓石　------*/
.sec0201{
    margin-top: 100px;
}

.sec0201 ul{
    margin: 20px 0 0 0;
    width: 100%;
    overflow: hidden;
}

.sec0201 ul li{
    margin: 0;
    overflow: hidden;
    width: 232px;
    margin-right: 20px;
    margin-bottom: 30px;
    float: left;
}

.sec0201 ul li:nth-child(4n){
    margin-right: 0;
}


.sec0201 figure{
    margin: 0;
    width: 100%;
    overflow: hidden;
}

.sec0201 figure figcaption{
    margin: 0;
    width: 100%;
    overflow: hidden;
    margin-top: 15px;
}

.sec0201 figure dl{
    margin: 0;
    width: 100%;
    overflow: hidden;
}

.sec0201 figure dt{
    margin: 0;
    width: 100%;
    overflow: hidden;
    border-bottom: 2px solid #f2f2f2;
    padding-left: 23px;
    font-size: 18px;
    padding-bottom: 5px;
    background: url(../images/color01_icon01.png) left 5px no-repeat;
}

.sec0201 figure dd{
    margin: 10px 0 0 0;
}

@media screen and (max-width: 767px) {
.sec0201{
    margin-top: 50px;
}
.sec0201 ul{
    text-align: center;
}

.sec0201 ul li{
    display: inline-block;
    margin-right: 10px;
    margin-left: 10px;
    float: none;
}
.sec0201 figure dl{
    text-align: left;
}

}


/*-----　墓石 色別リンク　------*/
ul.stoneList{
    width: 100%;
    overflow: hidden;
    margin-top: 40px;
}
ul.stoneList li{
    width: 140px;
    overflow: hidden;
float: left;
    border-bottom: 2px solid #000;
    border-right: 2px solid #bcbcbc;
}
ul.stoneList li a{
    display: block;
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding-bottom: 50px;
    background: url(../images/color_arrow.png) 50% 90% no-repeat;
}
ul.stoneList li a dl{
    margin: 0;
    width: 100%;
    text-align: center;
    overflow: hidden;
}
ul.stoneList li a dl dt{
    font-size: 20px;
    padding: 10px 0 5px 0;
    margin: 0;
}
ul.stoneList li a dl dd{
    margin: 0;}

@media screen and (max-width: 767px) {
    /*-----　SP 墓石 色別リンク　------*/
        ul.stoneList li{
            width: 33%;
        max-width: 140px;
    }

    ul.stoneList li a dl dt{
        font-size: 16px;
    }

}


/*-----　墓石　------*/
.sec_stone {
    margin-top: 60px;
    margin-bottom: 0;
    overflow: hidden;
}

.sec_stone h4{
    border-bottom-style: solid;
    border-bottom-width: 3px;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    margin-top: 67px;
    padding: 15px 0;
}

.sec_stone > ul{
    margin: 20px 0 0 0;
    width: 100%;
    overflow: hidden;
}

.sec_stone > ul > li{
    margin: 0;
    overflow: hidden;
    width: 232px;
    margin-right: 14px;
    margin-bottom: 30px;
    float: left;
    vertical-align: top;
}

.sec_stone > ul > li:nth-child(4n){
    margin-right: 0;
}

.sec_stone a{
    display: block;
    margin: 0;
    width: 100%;
    overflow: hidden;
}

.sec_stone figure.list{
    margin: 0;
    width: 100%;
    overflow: hidden;
}

.sec_stone figure.list figcaption{
    margin: 0;
    width: 100%;
    overflow: hidden;
    margin-top: 15px;
}

.sec_stone figure.list dl{
    margin: 0;
    width: 100%;
    overflow: hidden;
}

.sec_stone figure.list dt{
    margin: 0;
    width: 100%;
    overflow: hidden;
    border-bottom: 2px solid #f2f2f2;
    padding-left: 23px;
    font-size: 18px;
    padding-bottom: 5px;
}

.sec_stone figure.list dd{
    margin: 10px 0 0 0;
}

@media screen and (max-width: 767px) {
    /*-----　SP墓石　------*/
    .sec_stone {
        margin-top: 0;
    }

    .sec_stone h4{
        font-size: 20px;
        margin-top: 60px;
        padding: 10px 0;
    }

    .sec_stone > ul{
        text-align: center;
    }

    .sec_stone > ul > li{
        display: inline-block;
        margin-right: 10px;
        margin-left: 10px;
        float: none;
    }
    .sec_stone figure.list dl{
        text-align: left;
    }

}

/*-----　ポップアップ内容　------*/
.popup{
  position: relative;
  background: #fff;
  width: auto;
  max-width: 700px;
  border-radius: 15px;
border: 5px solid #959595;

  padding: 50px 0;
  margin: 0 auto;
}
.popup .inner{
    width: 90%;
    max-width: 490px;
    margin: 0 auto;
    /*overflow: hidden;*/
}

.popup figure{
    width: 100%;
    /*overflow: hidden;*/
    margin: 0;
}

.popup figure span{
    display: block;
    float: left;
}

.popup figcaption{
    width: 230px;
    /*overflow: hidden;*/
    margin: 0;
    float: right;
}

.popup figcaption dl{
    margin: 0;
    width: 100%;
    /*overflow: hidden;*/
}

.popup figcaption dt{
    margin: 0;
    width: 100%;
    /*overflow: hidden;*/
    border-bottom: 2px solid #f2f2f2;
    padding-left: 30px;
    font-size: 28px;
    padding-bottom: 10px;
    line-height: 1;
}

.popup figcaption dd{
    margin: 10px 0 0 0;
}

.popup dl.case{
    width: 100%;
    /*overflow: hidden;*/
    margin: 30px 0 0 0;
    clear: both;
}

.popup dl.case dt{
    border-bottom: 2px solid #f2f2f2;
    font-size: 18px;
    padding-bottom: 5px;
    margin: 0;
}

.popup dl.case dd{
    width: 100%;
    /*overflow: hidden;*/
    margin: 15px 0 0 0;
}

.popup dl.case ul{
    width: 100%;
    /*overflow: hidden;*/
    margin: 0;
}

.popup dl.case ul li{
    margin-bottom: 10px;
}

.popup dl.case ul li:nth-child(odd){
    float: left;
}

.popup dl.case ul li:nth-child(even){
    float: right;
}

.mfp-close {
  right: 10px!important;
  top: 10px!important;
}


@media screen and (max-width: 767px) {
/*-----　SP ポップアップ内容　------*/
.popup{
  border-radius: 10px;
border-width: 2px;
  padding: 20px 0;
}

.popup figure span{
    float: none;
    text-align: center;
}

.popup figcaption{
    width: auto;
    max-width: 230px;
    float: none;
    margin: 15px auto 0 auto;
}

.popup dl.case dt{
    font-size: 16px;
}

.popup dl.case ul li{
    width: 49%;
}

.mfp-close {
  width: 40px!important;
  height: 40px!important;
  font-size: 40px!important;
}

.mfp-arrow-left:before {
      display: none!important;
}
  .mfp-arrow-right:before {
      display: none!important;
}

}

/*-----　色別CSS　------*/
#white h4{
    background: #f2f2f2;
    border-bottom-color: #cecece;
}
#white figure.list dt{
    background: url(../images/color01_icon01.png) left 5px no-repeat;
}
.color-white figcaption dt{
    background: url(../images/color01_icon02.png) left 3px no-repeat;
}

#gray h4{
    background: #cccccc;
    border-bottom-color: #aeaeae;
}
#gray dt{
    background: url(../images/color02_icon01.png) left 5px no-repeat;
}
.color-gray figcaption dt{
    background: url(../images/color02_icon02.png) left 3px no-repeat;
}

#black h4{
    color: #fff;
    background: #575757;
    border-bottom-color: #4a4a4a;
}
#black dt{
    background: url(../images/color03_icon01.png) left 5px no-repeat;
}
.color-black figcaption dt{
    background: url(../images/color03_icon02.png) left 3px no-repeat;
}

#green h4{
    color: #fff;
    background: #7bb596;
    border-bottom-color: #699a80;
}
#green dt{
    background: url(../images/color04_icon01.png) left 5px no-repeat;
}
.color-green figcaption dt{
    background: url(../images/color04_icon02.png) left 3px no-repeat;
}

#pink h4{
    color: #fff;
    background: #b57b98;
    border-bottom-color: #9a6981;
}
#pink dt{
    background: url(../images/color05_icon01.png) left 5px no-repeat;
}
.color-pink figcaption dt{
    background: url(../images/color05_icon02.png) left 3px no-repeat;
}

#red h4{
    color: #fff;
    background: #b57b7b;
    border-bottom-color: #9a6969;
}
#red dt{
    background: url(../images/color06_icon01.png) left 5px no-repeat;
}
.color-red figcaption dt{
    background: url(../images/color06_icon02.png) left 3px no-repeat;
}

#other h4{
    color: #fff;
    background: #7badb5;
    border-bottom-color: #69939a;
}
#other dt{
    background: url(../images/color07_icon01.png) left 5px no-repeat;
}
.color-other figcaption dt{
    background: url(../images/color07_icon02.png) left 3px no-repeat;
}





/*-----------------------------
.sec01
-------------------------------*/
.sec01 .staff_inner{
    width: 100%;
    display: table;
    overflow: hidden;
    border:solid 5px #ababab;
    border-radius: 20px;
    padding: 0;
}
.sec01 .staff dl,
.sec01 .staff .photo{
    display: table-cell;
    vertical-align: top;
}
.sec01 .staff dl{
    width: 75%;
}
.sec01 .staff dl dt,
.sec01 .staff dl dd{
    padding: 12px 15px;
}
span.area{
    display: inline-block;
    background: #b6c976;
    padding: 0 5px;
    float: right;
    font-weight: normal;
    font-size: 14px;
    color: #fff;
}
.sec01 .staff dl dd{
    border-top: solid 1px #e9e9e9;
    margin-bottom: 0;
}
.sec01 .staff .photo{
    overflow: hidden;
    vertical-align: bottom;
    width: 25%;
    height: 100%;
    max-width: 123px;
    background: #b6c976;
    text-align: right;
    border-radius: 0 10px 10px 0 / 0 10px 10px 0;
    -webkit-border-radius: 0 10px 10px 0 / 0 10px 10px 0;
    -moz-border-radius: 0 10px 10px 0 / 0 10px 10px 0;
}
.sec01 .staff .photo img{
    width: auto;
}

.sec01 .comment p{
    background: #fffcf5;
    border-radius: 20px;
    padding: 15px 20px;
}
.sec01 .comment p span{
    border-bottom: dashed 2px #d7c59a;
    padding: 5px 0;
    line-height: 2;
}

@media screen and (max-width: 767px) {
    .sec01 .staff{
        margin-bottom: 15px;
    }
    .sec01 .staff dl dd{
        font-size: 12px;
    }
    .sec01 .comment{
        margin-bottom: 40px;
    }
}


/*******************************

下層Bottomナビゲーション

*******************************/
/*ul.aboutBN {
    border: solid 2px #f0a4a1;
    background: #fef9e9;
}

ul.aboutBN a {
    background: url(../../images/about_back.jpg) repeat;
}*/

ul.aboutBN {
    border: solid 2px #b6c976;
	background: #fef9e9;
}

ul.bottomNav li {
    float: left;
    width: 33%;
	max-width: 309px;
    margin: 10px 30px 10px 0;
    padding: 0;
}


li.aboutBN a {
	float: left;
    display: block;
    width: 100%;
    padding: 15px 10px;
	position: relative;
	background-color: #b6c976;
	border: solid 2px #b6c976;
	border-radius: 8px;
}

li.aboutBN a:after{
	content: ">";
	position: absolute;
	right: 10px;
}

ul.bottomNav {
	border-radius: 0;
	padding: 30px 0;
	width: 1018px;
	margin: 0 auto;
}

.b_nav{
	background-color: #EDF2DE;
}

.b_arrow{
	vertical-align: -1.5px;
    margin-left: 25px;
}


li.aboutBN.active a{
	color:  #b6c976;
	background-color: #FFFFFF;
	border: solid 2px #b6c976;
	border-radius: 8px;
}

@media screen and (max-width: 767px) {
	
	ul.bottomNav li {
		float: left;
		width: 100%;
		margin: 10px 0;
		padding: 0;
		max-width: none;
	}
	
	ul.bottomNav {
		width: 100%;
	}
}


/*-----------------------------
事例
-------------------------------*/
.box_case{
    border: solid 3px #7bb596;
    border-radius: 10px;
    margin: 40px 0;
    padding: 25px 40px;
}
.box_case h3:after{
    content: "";
    display: block;
    width: 148px;
    height: 1px;
    border-bottom: dotted 2px #7bb596;
    margin: 15px auto 30px;
}

.box_case ul{
    width: 880px;
    margin: 50px auto;
    overflow: hidden;
}
.box_case ul li{
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: dashed 2px #e0ca98;
    overflow: hidden;
}
.box_case ul li:nth-last-child(1){
    border: none;
    padding: 0;
    margin-bottom: 0;
}

.box_case ul li .txtWrap{
    float: left;
    width: 310px;
}
.box_case ul li .txtWrap h4{
    margin-bottom: 30px;
}
.box_case ul li .imgWrap{
    float: right;
}

@media screen and (max-width: 767px) {
    .box_case{
        margin: 25px 0;
        padding: 25px 30px;
    }

.box_case ul{
    width: 100%;
    margin: 30px auto;
}
.box_case ul li{
    margin-bottom: 30px;
    padding-bottom: 30px;
}

.box_case ul li .txtWrap{
    float: none;
    width: 100%;
}
.box_case ul li .txtWrap h4{
   text-align: center;
}
.box_case ul li .imgWrap{
    float: none;
    text-align: center;
}

    .case01 p{
        margin-bottom: 20px;
    }


}