@charset "UTF-8";


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

プラン詳細　Css

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

.planWrap .fl650{
    float: left;
    width: 650px;
    margin-bottom: 100px;
}

.planWrap .bootBuilder >img{
    float: right;
    margin-bottom: 100px;
}

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

    .planWrap .fl650{
    float: none;
    width: 100%;
    margin-bottom: 30px;
}

.planWrap .bootBuilder >img{
    float: none;
    margin-bottom: 50px;
}

}

/*-----------------------------
テーブル
-------------------------------*/
table.tablePlan {
    width: 100%;
}

table.tablePlan thead th {
    color: #fff;
    font-size: 20px;
    padding: 15px 0;
    text-align: center;
    border-bottom: 0.05em solid #fff;
    border-right: 0.05em solid #fff;
}

table.tablePlan tbody th {
    text-align: center;
width: 75px;
    padding: 20px;
    font-size: 20px;
    color: #fff;
    text-align: center;
    border-bottom: 0.05em solid #fff;
    border-right: 0.05em solid #fff;
}
table.tablePlan td {
    border-bottom: 0.05em solid #fff;
    border-right: 0.05em solid #fff;
    padding: 20px;
}

table.tableplan_row thead{
    display: none;
}


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

table.tablePlan {
    display: block;
    width: 100%;
    overflow: hidden;
}
table.tablePlan tbody, table.tablePlan tr, table.tablePlan th, table.tablePlan td {
    display: block;
    width: 100%;
    overflow: hidden;
    }



table.tablePlan thead {
    display: none!important;
}


table.tablePlan thead th {
    font-size: 20px;
    padding: 15px 0;
    border-bottom: none;
    border-right: none;
}


table.tablePlan tbody tr {
    margin-bottom: 15px;
}
table.tablePlan tbody th {
    width: 100%;
    padding: 10px;
    font-size: 20px;
    border-bottom: 5px solid #fff;
    border-right: none;
        font-weight: bold;
    letter-spacing: 0.1rem;
}
table.tablePlan td {
    border-bottom: 5px solid #fff;
    border-right: none;
    padding: 20px;
}
    .area01:before,
    .area02:before{
        color: #767676;
        font-size: 20px;
        width: 100%;
        display: block;
        text-align: center;
        letter-spacing: 0.1rem;
    }
    .area01:before{
        content: "〜1平米未満";
    }
    .area02:before{
        content: "1平米以上";
    }

}

/*-----------------------------
テーブル内容
-------------------------------*/
.planWrap figure {
    float: left;
    display: block;
    width: 265px;
    overflow: hidden;
    background: #fff;
    padding: 5px;
    margin: 0 10px 10px 0;
    -webkit-box-shadow:1px 1px 3px 0px rgba(0,0,0,0.2);
    box-shadow:1px 1px 3px 0px rgba(0,0,0,0.2);
}
table.tablePlan td.area01 figure{
    width: 48%;
    margin-right: 2%;
}

.planWrap figure:nth-last-child(1){
    margin-right: 0px;
}

.planWrap figure p.name {
    display: block;
    border-left: 8px solid #ccc;
    padding-left: 10px;
    padding-left: 10px;
    font-size: 22px;
    font-weight: normal;
   line-height: 1.2;
}

.planWrap figure p.comment {
    display: block;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.5;
    padding-top: 10px;
}

.planWrap figure>span {
    display: block;
    width: 100%;
    height: 240px;
  overflow: hidden;
  position: relative;
}

.planWrap figure>span img{
    position: absolute;
  width: auto;
  height: auto;
  left: 50%;
  top: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
}

.planWrap figure figcaption {
}
.planWrap figure dl {
    margin: 0;
}
.planWrap figure dl .tablePlan-list{
    margin-top: 5px;
    border: solid 1px #dedede;
    display: table;
    width: 100%;
}
.planWrap figure dt,
.planWrap figure dd{
    display: table-cell;
}
.planWrap figure dt {
    text-align: center;
    vertical-align: middle;
    width: 25%;
    padding: 5px;
    background: #767676;
    color: #fff;
    font-size: 14px;
}
.planWrap figure dd {
    width: 75%;
    padding: 5px;
    margin: 0;
    font-size: 13px;
}
.planWrap figure dd:before{
    display: none;
}
.planWrap figure .item-stone{
    margin-bottom: 7px;
    font-size: 11px;
    font-weight: bold;
    line-height: 1.1
}
.planWrap figure .item-stone:last-child{
    margin-bottom: 0;
}
.planWrap figure .item-stone span{
    display: inline-block;
    vertical-align: middle;
    width: 25px;
    height: 25px;
    overflow: hidden;
    border-radius: 50%;
    margin-right: 5px;
    position: relative;
    float:left;
    ine-height: 1.2;
}
.planWrap figure .item-stone span:before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    background: rgba(0,0,0,.5) url("../images/ico_search.png") no-repeat center;
    background-size: 50% auto;
    opacity: 0;
    transition: all 300ms 0s ease;
}
.planWrap figure .item-stone a:active span:before,
.planWrap figure .item-stone a:hover span:before{
    opacity: 1;
}
.planWrap figure .item-stone span img{
    width: auto;
    max-width: none;
}


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

.planWrap figure,
table.tablePlan td.area01 figure{
    width: 100%;
    margin-top: 10px;
}
.planWrap figure dl .tablePlan-list{
    display: block;
    width: 100%;
}
.planWrap figure dt,
.planWrap figure dd{
    display: block;
    width: 100%;
}
}

/*横並びver*/
.planWrap .type-list{
    clear: both;
}
.planWrap .type-list figure{
    width: 25%;
    margin: 0 0 10px;
}
@media screen and (max-width: 767px) {
    .planWrap .type-list figure{
        width: 100%;
        margin-top: 10px;
        box-shadow: unset;
    }
}



/*-----------------------------
ポイント
-------------------------------*/

.point ul{
    width: 100%;
    overflow: hidden;
    margin-top: 50px;
}

.point ul li{
    padding-top: 15px;
    width: 33%;
    float: left;
    overflow: hidden;
    border-right: 1px solid #dcdcdc;
}

.point ul li:nth-child(3n){
    border-right: none;
}

.point ul li dl{
    width: 100%;
    overflow: hidden;
}

.point ul li dl dt{
    height: 110px;
    text-align: center;
  overflow: hidden;
  position: relative;
    font-weight: normal;
}

.point ul li dl dt span{
    width: 100%;
    display: block;
    font-size: 24px;
        position: absolute;
  top: 55%;
  -webkit-transform: translate3d(0, -45%, 0);
          transform: translate3d(0, -45%, 0);
}

.point ul li dl dd{
text-align: center;
    margin-top: 20px;
}

.point ul li dl dd p{
    width: 280px;
    margin: 0 auto;
    margin-top: 20px;
text-align:left;
}


.point ul li:nth-child(1) dl dt{
   background: url(../images/point01.png) 50% 50% no-repeat;
}
.point ul li:nth-child(2) dl dt{
   background: url(../images/point02.png) 50% 50% no-repeat;
}
.point ul li:nth-child(3) dl dt{
   background: url(../images/point03.png) 50% 50% no-repeat;
}

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

.point ul{
    margin-top: 30px;
}

.point ul li{
    width: 100%;
    float: none;
    border-bottom: 1px solid #dcdcdc;
    border-right: none;
}


.point ul li dl dd p{
    width: 90%;
}


}


/*-----------------------------
プランに含まれるもの
-------------------------------*/

.service figure{
    float: left;
    margin-right: 20px;
}

.service figure:nth-child(6n){
    margin-right: 0;
}


/**ノーマル　お墓本体**/
.service figure span{
    display: block;
    width: 148px;
    height: 148px;
    background: #fffcf5;
  overflow: hidden;
  position: relative;
    border: 2px solid #e07c7e;
    border-radius: 15px;
	color: #000000;
}

.service figure p{
	position:absolute;
    display: block;
    width: 148px;
    height: 30px;
    background: #e07c7e;
  	overflow: hidden;
  	position: relative;
	color: #FFFFFF;
	text-align: center;
}


/**カラバリ　基礎（class="grn"）**/
.service figure.grn span{
    border-color:#7bb596;
}
.service figure.grn p{
    background: #7bb596;
}

/**カラバリ　付属品（class="bro"）**/
.service figure.bro span{
    border-color:#ae997e;
}
.service figure.bro p{
    background: #ae997e;
}

/**カラバリ　その他（class="blu"）**/
.service figure.blu span{
    border-color:#67b9c8;
}
.service figure.blu p{
    background: #67b9c8;
}

/**カラバリ　含まれない（class="gry"）**/
.service figure.gry span{
    border-color:#7a7a7a;
}
.service figure.gry p{
    background: #7a7a7a;
}





.service figure img{
    position: absolute;
  width: auto;
  height: auto;
  left: 50%;
  top: 60%;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
}

.service figure figcaption{
    font-size: 15px;
    text-align: center;
    margin-top: 5px;
}

.service figure figcaption small {
    font-size: 13px;
    text-align: center;
    margin-top: 5px;
}

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

    .service figure{
    width: 32%;
        margin-right: 2%;
}

.service figure:nth-child(3n){
    margin-right: 0;
}


.service figure span{
    width: 100%;
    max-width: 148px;
}
.service figure figcaption{
    font-size: 15px;
    width: 100%;
    max-width: 148px;
}

}

/*-----------------------------
プラン備考
-------------------------------*/
.remarks{
    clear: both;
    margin-top: 40px;
}
.remarks h3{
    font-size: 20px;
    font-weight: bold;
}
ul.style-list{
    text-indent: -1em;
    padding-left: 1em;
}
ul.style-list li{
    margin-top: 10px;
}
ul.style-list li:before{
    content: "●";
    color: #a7a7a7;
}


/*-----------------------------
お悩み・ご相談
-------------------------------*/
.nayami .nayamiWrap{
    width: 100%;
    position: relative;
    overflow: hidden;
    background: url(../images/nayami_back.jpg) repeat;
    padding: 0;
    height: auto;
    min-height: 400px;
}

.nayami .nayamiWrap img{
    padding: 0;
    margin: 0;
}

.nayami .nayamiWrap:before{
    content: url(../images/nayami_illust.png);
    position: absolute;
    bottom:-6px;
    left: 65px;
    margin: 0;
    padding: 0;
}

.nayami .nayamiWrap .nayamilist{
    padding: 0 5px 5px 0;
    margin: 0;
    position: relative;
    margin: 60px 35px 60px 0;
    float: right;
    overflow: hidden;
}

.nayami .nayamiWrap .nayamilist:before{
    content: url(../images/nayami_fukidasi.png);
    display: block;
    position: absolute;
    left:0;
    height: 52px;
    top:0;
    bottom:0;
    margin: auto;
}

.nayami .nayamiWrap .nayamilist ul{
    width: 630px;
    padding: 20px 30px;
    margin: 0 0 0 65px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    -webkit-box-shadow:5px 5px rgba(0,0,0,0.4);
    box-shadow:5px 5px rgba(178,208,218,0.5);
}

.nayami .nayamiWrap .nayamilist ul li{
    border-bottom: 1px dotted #bfbfbf;
    padding: 15px 0;
    background: url(../images/nayami_icon.png) left 19px no-repeat;
    padding-left: 25px;
}


.nayami .advice {
    width: 100%;
    height: 160px;
    overflow: hidden;
    margin-top: 50px;
    position: relative;
}

.nayami .advice:before{
    content: url(../images/advice_illust01.png);
    display: block;
    position: absolute;
    bottom:0;
    right:100px;
}

.nayami .advice:after{
    content: url(../images/advice_fukidasi.png);
    display: block;
    float: right;
    margin-right: 30px;
}

.nayami .advice dl {
    border-radius: 20px;
    padding: 30px 0 15px 30px;
    background: url(../images/advice_illust02.png) 60% 50% no-repeat,#f4f8f7;
    margin: 0;
}



.nayami .advice dt {
    font-size: 28px;
}
.nayami .advice dd {
}


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

.nayami .nayamiWrap{
    background: none;
    min-height: auto;
}


.nayami .nayamiWrap:before{
    display: none;
}

.nayami .nayamiWrap .nayamilist{
    width: 100%;
    margin: 0;
    padding: 0;
    float: none;
}

.nayami .nayamiWrap .nayamilist:before{
    display: none;
}

.nayami .nayamiWrap .nayamilist ul{
    width: 100%;
    padding: 0;
    margin: 0;
    background: none;
    border-radius: none;
    -webkit-box-shadow:none;
    box-shadow:none;
}

.nayami .nayamiWrap .nayamilist ul li{
    padding: 10px 0;
    padding-left: 25px;
}


.nayami .advice {
    width: 100%;
    height: auto;
    margin-top: 30px;
    padding-bottom: 30px;
}


.nayami .advice:before{
    content:"";
    display: inline-block;
    position: absolute;
    bottom:0;
    right:0;
  width: 101px;
  height: 74px;
  background-image: url(../images/advice_illust01.png);
  background-size: contain;
  vertical-align: middle;
}

.nayami .advice:after{
    display: none;
}

.nayami .advice dl {
    border-radius: 20px;
    padding: 15px;
    background: #f4f8f7;
}

.nayami .advice dt {
    font-size: 20px;
}
.nayami .advice dd {
    padding-right: 70px;
}

}


/*-----------------------------
自由創作プラン
-------------------------------*/
.bnr_order{
    margin-bottom: 60px;
}

/*-----------------------------
安心信頼のやまきのお墓
-------------------------------*/
.about{padding: 60px 0;}
.about h2{
        max-width: 434px;
        height: 26px;
        background: url(../../assets/images/common/about_ttl@2x.png) no-repeat center top;
        background-size: contain;
        margin: 0 auto 40px;
    margin-bottom: 40px;
}
.about ul li{
    width: 160px;
    margin-bottom: 0;
}
.about ul li a:hover .btn_more{
    opacity: .6;
}
.about ul li p{
    margin: 15px 0;
    font-size: 12px;
}
.about .btn_more{
    width: 100%;
    display: inline-block;
    padding: 10px 0;
    border-radius: 22px;
    color: #fff;
    -webkit-transition: all 300ms 0s ease;
    transition: all 300ms 0s ease;
}


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


.about ul li{
    width: auto;
    margin-bottom: 40px;
}

.about ul li:nth-last-child(1){
    margin-bottom: 0;
}

.about .btn_more{
   max-width: 220px;
}

}

/*-----------------------------
おすすめプラン
-------------------------------*/

.plan {
    width: 988px;
    overflow: hidden;
    border-radius: 10px;
    padding: 30px 10px;
    margin: 70px auto;
    border: solid 2px #6d7c9e;
    /*background: #f0f2f5;*/
    background: #f4f4f4;
}

.plan h2 {
    font-size: 24px;
    color: #6d7c9e;
    font-weight: bold;
}

.plan ul {
    width: 100%;
    overflow: hidden;
    margin-top: 30px;
}

.plan ul li {
    float: left;
    width: 25%;
    padding: 0 10px;
}

.plan ul li span {
    display: block;
    text-align: left;
    margin-top: 15px;
}

.plan ul li a {
    display: block;
    width: 100%;
    padding: 15px 0;
    color: #fff;
    border-radius: 10px;
    line-height: 1.2;
    background: url(../../shop/images/plan_back.jpg) repeat;
}

.plan ul li a:hover {
    text-decoration: underline;
}



@media screen and (max-width: 767px) {
    .plan {
        margin: 50px 3%;
        width: 94%;
    }

    .plan ul li {
        width: 90%;
        float: none;
        padding: 0;
        margin: 0 auto;
        margin-bottom: 20px;
    }
}

/*-----------------------------
エリアカラー
-------------------------------*/

/* ------浜松市エリア 紺------*/
.area-c-01 .page #hero {border-top-color: #6d7c9e;}
.area-c-01 .page #hero span{ color: #6d7c9e; }
.area-c-01 nav.planNav{ background: url(../images/plan_back_area01.jpg) repeat; }
.area-c-01 .s_gray span{ border-color: #6d7c9e;}

.area-c-01 table.planWrap th { background: #6d7c9e; }
.area-c-01 table.planWrap thead th:nth-child(odd),
.area-c-01 table.planWrap tbody tr:nth-child(even) th{
    background: #88A1DA;
}
.area-c-01 table.planWrap td { background: #dcdcdc; }
.area-c-01 .plan{ border-color: #6d7c9e; }
.area-c-01 .plan h2{ color: #6d7c9e; }
.area-c-01 .plan ul li a{ background: url(../images/back01.jpg) repeat; }


/* ------磐田掛川エリア ピンク------*/
.area-c-02 .page #hero {border-top-color: #e07c7e;}
.area-c-02 .page #hero span{ color: #e07c7e; }
.area-c-02 nav.planNav{ background: url(../images/plan_back_area02.jpg) repeat; }
.area-c-02 .s_gray span{ border-color: #e07c7e;}

.area-c-02 table.planWrap th { background: #e07c7e; }
.area-c-02 table.planWrap thead th:nth-child(odd),
.area-c-02 table.planWrap tbody tr:nth-child(even) th{
    background: #EFACAE;
}
.area-c-02 table.planWrap td { background: #dcdcdc; }
.area-c-02 .plan{ border-color: #e07c7e; }
.area-c-02 .plan h2{ color: #e07c7e; }
.area-c-02 .plan ul li a{ background: url(../images/back02.jpg) repeat; }


/* ------島田〜焼津エリア 紫------*/
.area-c-03 .page #hero {border-top-color: #9f6fb5;}
.area-c-03 .page #hero span{ color: #9f6fb5; }
.area-c-03 nav.planNav{ background: url(../images/plan_back_area03.jpg) repeat; }
.area-c-03 .s_gray span{ border-color: #9f6fb5;}

.area-c-03 table.planWrap th { background: #9f6fb5; }
.area-c-03 table.planWrap thead th:nth-child(odd),
.area-c-03 table.planWrap tbody tr:nth-child(even) th{
    background: #ad8dbd;
}
.area-c-03 table.planWrap td { background: #dcdcdc; }
.area-c-03 .plan{ border-color: #9f6fb5; }
.area-c-03 .plan h2{ color: #9f6fb5; }
.area-c-03 .plan ul li a{ background: url(../images/back03.jpg) repeat; }


/* ------静岡市エリア 水色------*/
.area-c-04 .page #hero {border-top-color: #67b9c8;}
.area-c-04 .page #hero span{ color: #67b9c8; }
.area-c-04 nav.planNav{ background: url(../images/plan_back_area04.jpg) repeat; }
.area-c-04 .s_gray span{ border-color: #67b9c8;}

.area-c-04 table.planWrap th { background: #67b9c8; }
.area-c-04 table.planWrap thead th:nth-child(odd),
.area-c-04 table.planWrap tbody tr:nth-child(even) th{
    background: #96D2DD;
}
.area-c-04 table.planWrap td { background: #dcdcdc; }
.area-c-04 .plan{ border-color: #67b9c8; }
.area-c-04 .plan h2{ color: #67b9c8; }
.area-c-04 .plan ul li a{ background: url(../images/back04.jpg) repeat; }


/* ------富士富士宮エリア 緑---*/
.area-c-05 .page #hero {border-top-color: #7bb596;}
.area-c-05 .page #hero span{ color: #7bb596; }
.area-c-05 nav.planNav{ background: url(../images/plan_back_area05.jpg) repeat; }
.area-c-05 .s_gray span{ border-color: #7bb596;}

.area-c-05 table.planWrap th { background: #7bb596; }
.area-c-05 table.planWrap thead th:nth-child(odd),
.area-c-05 table.planWrap tbody tr:nth-child(even) th{
    background: #ABCABA;
}
.area-c-05 table.planWrap td { background: #dcdcdc; }
.area-c-05 .plan{ border-color: #7bb596; }
.area-c-05 .plan h2{ color: #7bb596; }
.area-c-05 .plan ul li a{ background: url(../images/back05.jpg) repeat; }


/* ------裾野〜伊豆エリア 茶---*/
.area-c-06 .page #hero {border-top-color: #ae997e;}
.area-c-06 .page #hero span{ color: #ae997e; }
.area-c-06 nav.planNav{ background: url(../images/plan_back_area06.jpg) repeat; }
.area-c-06 .s_gray span{ border-color: #ae997e;}

.area-c-06 table.planWrap th { background: #ae997e; }
.area-c-06 table.planWrap thead th:nth-child(odd),
.area-c-06 table.planWrap tbody tr:nth-child(even) th{
    background: #CBB89F;
}
.area-c-06 table.planWrap td { background: #dcdcdc; }
.area-c-06 .plan{ border-color: #ae997e; }
.area-c-06 .plan h2{ color: #ae997e; }
.area-c-06 .plan ul li a{ background: url(../images/back06.jpg) repeat; }