@charset "UTF-8";
.sp_only{
    display: none;
}
.pc_flex{
  display: flex;
}
h1,h2,h3,.support_title {
  
}
h2{
  font-size: 2em;
  line-height: 35px;
  margin-bottom: 20px;
}
h3{
  font-size: 1.7em;
}
h4{
  font-size: 1.3em;
}
.ma{
  margin:auto;
}
.mr-10{
  margin-right: 10px;
}
.mb-10{
  margin-bottom: 10px;
}
.mb-15{
  margin-bottom: 15px;
}
.mb-20{
  margin-bottom: 20px;
}
.mb-30{
  margin-bottom: 30px;
}
.mb-40{
  margin-bottom: 2.5em;
}
.bg-green{
  background-color: rgba(61, 159, 156, 0.9);
  padding:2% 0;
}
.bg-purple{
  background-color: #ece3f0;
}
.bg-washi{
  background: url(../img/washi.jpg) repeat center top;
  max-width: 100%;
  padding: 2em 3em;
  margin: 3em auto 0;
}
#area_sk a, #area_sk2 a, #area_nt a{
  color: #727474;
}
.mincho{
  
}

.main_wrapper{
  max-width: 1000px;
  margin: auto;
}
/*はじめに*/
.beginning{
  text-align: center;
  padding: 10% 3% 5%;
}
/*目次*/
#box {
  width: 100%;
  height: auto;
  margin-bottom: 10%;
  padding: 2% 3%;
  background-color: #e9f6f5;
}
#box li {
  margin: 1% 3%;
  text-decoration: underline;
}
#box a {
  color: #3d9f9c;
  font-weight: bold;
  font-size: 1.2em;
}

/*お墓リスト*/
.area h2{
  text-align: center;
  color: #fff;
}
.area span{
  display: flex;
}
.area img{
  width: 40%;
  margin: 1%;
}
.grave_list{
  width: 50%;
  list-style: none;
  padding:3%;
}
ol {
  margin: 0;
  padding: 0;
  list-style: none; /* デフォルトの数字を非表示に */
  counter-reset: li;
}
/* ol内のliのスタイル */
.grave_list ol li {
  position: relative;
  font-size: 1.1em;
  padding-left: 1.5em;
  line-height: 1.5;
  text-decoration: underline;
}
.grave_detail ol li {
  position: relative;
  font-size: 16px;
  line-height: 1.5;
}

/* 2つ目以降のliにmargin-topを指定 */
.grave_list ol li:not(:first-child) {
  margin-top: 0.5em;
}

/* 数字のスタイル */
ol li::before {
  counter-increment: li;
  content: counter(li);
  position: absolute;
  left: 0;
  top: 2px;
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #9689b6;
  font-size: 12px;
  color: #fff;
  line-height: 20px; /* 数字のY軸線上の位置を調整 */
  text-align: center;
  font-family:"游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", 
    "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
/* 湘南・県央2枚目を8番始まりに */
.grave_listb ol{
  counter-reset: listb 7;
}
.grave_listb ol li::before {
  counter-increment: listb;
  content: counter(listb);
}
/* 西東京を12番始まりに */
.grave_listc ol{
  counter-reset: listc 11;
}
.grave_listc ol li::before {
  counter-increment: listc;
  content: counter(listc);
}

/*お墓詳細*/
.grave_detail ol{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.grave_detail li{
  background-color: #e8e3dc;
  padding: 1%;
  margin: 0.5%;
  width: 32%
}
.grave_detail h3{
  padding:0.4em 0 0.5em 2em;
  color: #555555;
  font-size: 1.3em;
  top: 15px;
  /*height: 100px; 画像の高さ合わせるなら開放*/
}
.grave_detail img{
  width: 100%;
}
.grave_detail ol li::before {
  counter-increment: li;
  content: counter(li);
  position: absolute;
  left: 10px;
  top: 15px;
  width: 35px;
  height: 35px;
  font-size: 23px;
  line-height: 37px; /* 数字のY軸線上の位置を調整 */
}
/* 西東京を12番始まりに */
.grave_detailb ol{
  counter-reset: detailb 11;
}
.grave_detailb ol li::before {
  counter-increment: detailb;
  content: counter(detailb);
}
.grave_detail span{
  display: flex;
  align-items: center;
}
/*最後の列の要素だけ左寄せ*/
.grave_detail ol::after {
  display: block;
  content:"";
  width: 32%;
  margin: 0.5%;
}
.adress_access{
  color: #fff;
  background-color: rgba(174, 168, 186, 0.8)/*rgba(61, 159, 156, 0.9)*/;
  margin: 1% 3% 1% 1%;
  width:25%;
  text-align: center;
}
.adress{
  padding: 2% 5%;
}
.access{
  padding: 2% 3%;
  font-size: 0.9em;
}
.break-word{
  width:70%;
  word-wrap: break-word;
}

/*お墓について知っておきたいこと*/
.bg-beige{
  background-color: #fff9f3;
  padding: 5%;
  margin-top: 15%;
}
.grave_knowledges h3{
  color: #a17d25;
  border-bottom: 3px solid #fff;
}
.grave_knowledges p{
  text-align: justify;
  line-height: 30px;
  padding:2%;
}
.grave_knowledges_title{
  width: 50%;
  display: block;
  margin: auto;
  padding-bottom: 4%;
}
.grave_point img{
  width: 50%;
  display: block;
  margin: auto;
  padding-bottom: 4%;
}
.grave_point_table{
  display: flex;
}
.grave_point_table span{
  display: flex;
  justify-content: space-between;
}
.type, .criteria, .kuyou{
  padding: 1%;
  margin: 1%;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 5px 5px #ebe3d5;
}
.type{
  justify-content: center;
  align-items: center;
  width: 17%;
}
.type h4{
  text-align: center;
}
.type p{
  text-align: center;
}
.criteria p{
  font-size: 14px;
  padding: 0 3%;
}
.criteria li{
  color: #b83a4d;
  font-size: 17px;
}
.criteria h4{
  background-color: #ebe3d5;
  text-align: center;
  border-radius: 3px;
}
.criteria ul{
  display: flex;
  justify-content: space-around;
  list-style-type: disclosure-closed;
}
.emphasis span{
  color: #b83a4d;
}
.right_img img{
  margin: 0 3% 0 2%;
  width: 210px;
  height: auto;
}
.kuyou span{
  display: flex;
  background-color: #ebe3d5;
  justify-content: center;
  align-items: center;
  border-radius: 3px;
  margin: 1% 15%;
}
.kuyou h4{
  color: #727474;
}
.kuyou img{
  width: 7%;
  margin: 1.5% 3% 1.5% 0;
}

/*まとめ*/
.ending{
  margin-top: 100px;
}
.ending h2{
  text-align: left;
}
/*電話相談*/
.cta_wrap{
  width: 100%;
}

/***追従するトップへ戻るボタン
#page-top {
    position: fixed;
    right: 10px;
    bottom: 130px;
    width: 10%;
    height: 5%;
    background: #fff;
    color: #737373;
    padding: 10px;
    border: solid 1px;
    border-radius: 50%;
    box-shadow: 0 2px 10px -6px rgba(0,0,0,.5), 0 3px 10px -4px rgba(0,0,0,.2);
}
/***トップへ戻るボタンここまで***/


@media(max-width: 768px){
.tb_img{
  height: 14.4em;
}
.grave_detail li{
  width: 48%;
}
.grave_detail img{
  width: 98%;
}
.grave_detail h3{
  padding: 0.4em 0 0.5em 2.5em;
}
.right_img img{
  width: 180px;
  height: 150px;
}
}

@media(max-width: 425px){
.breadcrumb {
    display: none;
}
.pc_only{
    display: none;
}
.sp_only{
    display: block;
}
.pc_flex{
  display: block;
}
h2{
  font-size: 1.6em;
  line-height: 35px;
  margin-bottom: 20px;
}
h3{
    font-size: 1.4em;
}
h4{
  font-size: 1.3em;
}
p{
  margin: 0;
  padding: 0;
  line-height: 1.8
}
.bg-washi{
  padding: 0;
  margin: 0;
}
.main_wrapper{
  width: 100%;
}
.container{
    padding:6% 6% 0 6%;
}
.beginning{
    text-align: center;
}
.beginning p{
  padding: 4%;
}

/*目次*/
#box{
  margin-bottom: 0;
  padding: 5%;
}
#box li {
  margin: 1% 3%;
  text-decoration: underline;
}
#box a {
  color: #3d9f9c;
  font-weight: bold;
  font-size: 1.05em;
}

/*お墓リスト*/
.area span{
  display: block;
}
.area img{
  width: 100%;
  margin: 0%;
}
.tb_img {
  height: auto;
}
.grave_list{
  width: 100%;
}
.grave_detail ol{
  display: block;
}
/* ol内のliのスタイル */
.grave_list ol li {
  font-size: 16px;
}
/* 2つ目以降のliにmargin-topを指定 */
ol li:not(:first-child) {
  margin-top: 0.5em;
}
/* 数字のスタイル */
ol li::before {
  position: absolute;
  left: 0;
  top: 2px; /* 数字のY軸線上の位置を調整 */
  display: block;
  width: 20px;
  height: 20px;
  font-size: 12px;
  line-height: 20px;
}

/*お墓詳細*/
.btn a{
  width:50%;
  text-align: center;
  display: block;
  background-color: #fff;
  padding: 3% 10%;
  margin: auto;
  margin-bottom: 3%;
  border-radius: 5px;
}
.grave_detail li{
  padding: 3% 2% 2% 2%;
  width: 100%;
}
.grave_detail h3{
  padding:0.3em 0 0.5em 3em;
  height: auto;
}
.grave_detail ol li::before {
  left: 15px;
  top: 10px; /* 数字のY軸線上の位置を調整 */
  width: 40px;
  height: 40px;
  font-size: 24px;
}
.sp_flex span{
  display: flex;
}
.adress{
  padding: 1% 5%;
}
.break-word{
  width: 75%;
}

/*お墓について知っておきたいこと*/
.bg-beige{
  padding:0;
}
.grave_point img{
  width: 100%;
}
.grave_point_table{
  align-items: center;
}
.type, .criteria, .kuyou{
  padding: 3% 5% 3% 3%;
  margin: 3%;
}
.type{
  width: 100%;
}
.type span{
  display: flex;
  align-items: center;
}
.type img{
  width:40%;
}
.type h4{
  font-size: 20px;
}
.type p{
  font-size: 13px;
  text-align: center;
}
.criteria p{
  font-size: 13px;
  line-height: 1.7;
}
.criteria ul{
  display: block;
  list-style-type: none;
}
.grave_knowledges_title{
  width: 100%;
}
.right_img {
  overflow: hidden;/*float解除*/
}
.right_img .space {
  float: right;
}
.right_img img {
  float: right;
  clear: both;/*.spaceのfloat解除*/
  margin: 0 0 0 1em;
  padding: 2% 2% 0 0;
  width: 50%;
}
.kuyou{
  padding: 2%;
}
.kuyou img{
  width: 12%;
  margin: 3% 3% 3% 0;
}
.kuyou p{
  margin-bottom: 20px;
  line-height: 2;
}
.kuyou span{
  margin: 3% 0 1% 0;
}


/*.kawakoya{
  width: auto;
  height: 50%;
}
.call_flex{
  display: flex;
  background-color: #fff;}
.call{
  background-color: #3D9F9C;
  padding:2%;
}

.call_top p{
  text-align: center;
  align-items: center;
  display: inline-block;
}
.call_flex span{
  background-color: #C3003C;
  color: #fff;
  padding: .5em;
}
.call_top{
  padding: 2% 2% 0 2%;
}
.call_bottom{
  background-color: #DEF3F3;
}
.call_bottom img{
  width: 90%;
  margin: auto;
}
.support_time span{
  color: #3D9F9C;
  font-size: 1.4em;
  background-color: #fff;
}
.call a{
  background-color: #DEF3F3;
  color: #3D9F9C;
}*/


.call{
  width: 95%;
  color: #fff;
  background-color: #3d9f9c;
  text-align: center;
  margin-bottom: 50px;
}
.call p{
  padding-top: 2%;
  text-align: center;
}
.call span{
  display: flex;
  background-image: url(https://www.moshimo.net/wp-content/themes/moshimo.net/img/grave/bg_img.png.webp);
  margin:2%;
}
.call a{
  background-color: #fff;
  color: #3d9f9c;
  padding: 5% 20%;
  margin-bottom: 3%;
  display: inline-block;
  border-radius: 5px;
  transition: background-color .5s;
}
.call a:hover{
  background-color: #a17d25;
  color: #fff;
}
.call_number{
  color: #a17d25;
  /*background-color: #fff9f3;*/
  display: inline-block;
  margin: 2%;
}
.call img{
  width: 28%;
}
.call_number img{
  width: 100% !important;
}

}