@charset "UTF-8";

/*===============================================
画面の横幅が768px以上（PC用）

(max-width: 959.99px)(min-width: 1060px)
(max-width: 1059.99px)
===============================================
画面の横幅が約767.99pxまで（SP用）

(min-width: 376px)(max-width: 375.99px)
(min-width: 376px)(max-width: 567.99px)
(min-width: 568px)
(max-width: 959.99px)
===============================================*/
/*https://www.ohnoya.co.jp/cemetery/search_other/358irm/*/




/*----------------
BTN　
----------------*/
.pageContact3{
  border-top:3px dotted #6fba2c60;
  width:1100px;
  background: #6fba2c10;
  margin:3rem auto 4rem;
  border-bottom:3px dotted #6fba2c60;
  text-align: center;
  /*padding:30px 0;*/
    padding: 2rem 0 1.5rem;}
@media only screen and (max-width: 1024.99px) {
.pageContact3{
  margin:1rem auto;
  padding: 1rem 0;
  width:100%;
  }}
@media screen and (max-width: 767.99px) {
.pageContact3{
  border:3px dotted #6fba2c60;
  }}


body.boikibody .pageContact{
  margin-top:0;
}

.pageContact h3{
  font-size:35px;
}





.btn_box {
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1000px;
text-align: center;}
@media screen and (max-width: 767.99px) {
.btn_box {
padding: 0 4vw 1rem;
  }}


.beforetxt{
    margin: 1.8rem auto 0;
    font-size: 1.3rem;
    font-weight: bold;
    width: 100%;
    text-align: center;
    animation:blink0 0.8s infinite alternate;}
@media screen and (max-width: 767.99px) {
.beforetxt{
    margin: 1rem auto 0;
    font-size: 116%;
  }}

@keyframes blink0{
    0% {opacity:0.6;}
    100% {opacity:1;}
}



/* 2カラム対応*/
.btn_box .block_btn{
    margin: 0.5rem 4% 2rem;
    font-weight: bold;
    width: 42%;
    padding: 0 2px 2px 0;
    background: #7ac543;
/*border-radius: 0 0.4rem 0.4rem 0.2rem; */}
@media screen and (max-width: 767.99px) {
.btn_box .block_btn{
    padding: 0 2px 2px 0;
    margin: 1rem 2% 0;
    width: 98%;
  }}

/* 1カラム 長文　対応*/
.btn_box .block_btn2{
    margin: 0.5rem 10% 1.5rem;
    font-weight: bold;
    width: 80%;
    padding: 0 2px 2px 0;
    background: #7ac543;
/*border-radius: 0 0.4rem 0.4rem 0.2rem; */}
@media screen and (max-width: 767.99px) {
.btn_box .block_btn2{
    padding: 0 2px 2px 0;
    margin: 1rem 2% 0;
    width: 98%;
  }}


.btn_box .block_btn a,
.btn_box .block_btn2 a{
    display: block;
    color: #fff;
    text-decoration: none;
}


.btn_box .block_btn:hover,
.btn_box .block_btn2:hover{
    transition: all 0.5s;
    border-radius: 0.4rem;
    background: #3f7e42;
  }

.btn_link{
    position: relative;
    display: inline-block;
    margin: 0 auto;
    padding: 1.6rem 2vw;
    font-size: 1.1rem;
    font-weight: bold;
    letter-spacing: 0.07em;
    /* background: #7ac543; */
    text-decoration: none;
    color: #fff;
    text-align: center;
    border-radius: 0 0 0.4rem 0;
    width: 100%;
    border: 1px solid #fff;
    border-left: 1px solid #7ac543;
    border-top: 1px solid #7ac543;
  }
 @media screen and (max-width: 767.99px) {
.btn_link{
font-size: 110%;
    border: 2px solid #fff;
    padding: 1rem 2vw;
    margin: 0 auto 0.2rem;
    border-left: 2px solid #7ac543;
    border-top: 2px solid #7ac543;
}}
 @media screen and (min-width: 768px) {
.btn_link{
    border: 1px solid #fff;
    border-left: 1px solid #7ac543;
    border-top: 1px solid #7ac543;
}}
@media screen and (min-width: 1024px) {
.btn_link{
    font-size: 1.3rem;
  }}

.btn_link:after {
  position: absolute;
  /*
  top: calc(80% - 0.6em);
    right: 7px;
   content: "\0216c";
color: #fff;
transform:rotate(-90deg);
*/
  content: "";
  bottom: 0.8vh;
  right: 2%;
  width: 1rem;
  height: 1rem;
  background: url(../images/1x/ic_triangle.png) no-repeat;
  background-size: 100%;
}

.btn_link:hover{
    color: #fff000;
    background: #3e9c42;
    text-decoration: none;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    animation: changecolor7 4s forwards;
    border-radius: 0 0 0.4rem 0;
    border-left: 1px solid #3e9c42;
    border-right: 1px solid #317c34;
    border-bottom: 1px solid #317c34;
    }





.rinkbtn a{
    display: block;
    text-decoration: none;
}

.rinkbtn a:hover{
    transition: all 0.5s;
    border-radius: 0.4rem;
    opacity: 0.9;
}






/*----------------
BTN　資料
----------------*/

.siryo{
  margin: 2rem 10% 0;
    padding: 1rem;
    width: 80%;
    border: 1px solid #3e9c4230;
    border-radius: 0.4rem;
    display: flex;
    flex-wrap: wrap;
    background: #fff;}
@media screen and (max-width: 767.99px) {
.siryo{
    margin: 2rem 4% 1rem;
    padding: 0.5rem 3vw;
    width: 92%;
  }}



.siryo .siryo-l{
  margin: 0 auto;
  padding: 0.5rem;
  width: 32%;
  /* float: left; */
  text-align: center;}
 @media screen and (max-width: 767.99px) {
.siryo .siryo-l{
margin: 1rem 15% 0;
    width: 70%;
    padding: 0;
}}


.siryo .siryo-l img{
    width: 100%;
box-shadow: 0 2px 3px 0 #7ac54320;
    filter: drop-shadow(0 5px 2px rgba(0, 0, 0, .1));
}

.siryo .siryo-r{
    margin: 0 auto;
    padding: 0.6rem;
    width: 60%;
    float: right;
    text-align: left;}
 @media screen and (max-width: 767.99px) {
.siryo .siryo-r{
    padding: 0.6rem 0 0 3%;
    margin: 1rem 1%;
    width: 98%;
    float:normal;
}}


.siryo .siryo-r .siryotitle{
  font-size: 1.3rem;
  line-height:1.3;
  font-weight: bold;
    width: 100%;
    color: #968031;
    padding-bottom:0.5rem;
    border-bottom: 1px solid #968031;
    text-align: left;}
 @media screen and (max-width: 896.99px) {
.siryo .siryo-r .siryotitle{
    font-size: 110%;
}}
 @media screen and (max-width: 767.99px) {
.siryo .siryo-r .siryotitle{
line-height: 1.6;
    font-size: 130%;
}}


.siryo .siryo-r .siryocap{
    width: 100%;
  font-size: 1rem;
  margin-bottom: 0.6rem;}
 @media screen and (max-width: 767.99px) {
.siryo .siryo-r .siryocap{
line-height: 1.6;
    font-size: 100%;
}}



/*----------
news
----------*/
.news{
    padding: 0!important;
}

#news h2{
  margin-bottom:2rem;
  font-size:20px;
  font-weight:bold;
  text-align:center;
  padding:60px 0 20px 0;
  border-bottom: 1px solid #c9caca;
}

#news dl{
  border-bottom: 1px solid #c9caca;
  padding:15px 0;
}

#news dl dt{
  font-weight: normal;
}

/*  */

.txt-hide{
display: none;
    width: 560px;
    margin: 0 auto;}
@media screen and (max-width: 767.99px) {
.txt-hide{
    width: 100%;
}}


/*  */

.list .newscap {
    opacity: 1;
    list-style: none;
    background-color: #ddd;
    margin-top: 10px;
    text-align: center;
    border-radius: 4px;
    height: 32px;
    line-height: 32px;
    font-size: 13px;
    transition: all 0.4s ease 0s;
}


.list .newscap.is-hidden {
    opacity: 0;
    height: 0;
    margin: 0;
}


button.more {
  width: 60%;
  margin: 2rem auto;
  display: block;
  background-color: #66666620;
  color: #666;
  outline: 0;
  font-size: 96%;
  border-radius: 4em;
  transition: .5s;
  padding: 5px;
  height: auto;
}

button.more::after {
content: "全て見る";
transition: .2s;
-erbkit-transition: .2s;
}

button.more.on-click::after{
content: "閉じる";
}

button {
    background-color: #bbdeff;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    height: 32px;
    line-height: 32px;
    width: 120px;
    border-radius: 1em;
}


.js-accordionnews{
    width: 100%;
    margin: 0 auto;}
@media screen and (max-width: 767.99px) {
.js-accordionnews{
    width: 100%;
}}

.btn{
  width: 40%;
  margin: 20px auto;
  display: block;
  background-color: #fff;
  color: #666;
  padding: 0.4rem 2vw;
  font-size: 90%;
  border-radius: 4em;
  outline: 0;
  transition: .5s;
  border: 1px solid #666;
}


.newscap {
  width:100%;
    padding-bottom: 0.6rem;}
@media screen and (max-width: 767.99px) {
.newscap {
    width: 96%;
}}


/*----------
施設紹介
----------*/
.facility{
    padding: 0 !important;
    max-width: 900px;
    margin: 3rem auto 4rem;
    text-align: center;}
@media screen and (max-width: 767.99px) {
    .facility{
    width: 100%;
    margin:0 auto;
}}


.js-accordionfacility{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;}
@media screen and (max-width: 767.99px) {
.js-accordionfacility{
    width: 100%;
    margin: 0 auto;
}}

/*
#facility h2{
  margin-bottom:2rem;
  font-size:20px;
  font-weight:bold;
  text-align:center;
  padding:60px 0 20px 0;
  border-bottom: 1px solid #c9caca;
}
*/

.facilitybox{
    width: 44%;
    margin: 1rem 2%;
  display: block;
  color: #666;
  padding: 0.6rem 1vw;
  font-size: 90%;
  border: 1px solid #f2f1eb;}
@media screen and (max-width: 767.99px) {
.facilitybox{
    width: 90%;
    margin: 0.5rem 5%;
    padding: 0.4rem;
}}



.facilitybox img{
  width: 100%;
}



.btnfacility{
  width: 40%;
  margin: 20px auto;
  display: block;
  background-color: #fff;
  color: #666;
  padding: 0.4rem 2vw;
  font-size: 90%;
  border-radius: 4em;
  outline: 0;
  transition: .5s;
  border: 1px solid #666;}
@media (max-width: 767.99px){
.btnfacility{
    padding: 0.6rem 2vw;
    margin: 0.5em auto;
    width: 80%;
  }}



.facilitytitle {
      margin-top: 10px;
      text-align: left;
      line-height: 1.4;
      font-size: 1.2rem;
      font-weight:bold;
    width:100%;}
@media screen and (max-width: 767.99px) {
.facilitytitle {
    width: 100%;
}}


.facilitycap {
    margin-top: 10px;
    text-align: left;
    line-height: 1.5;
    font-size: 0.9rem;
  width:100%;}
@media screen and (max-width: 767.99px) {
.facilitycap {
    width: 100%;
    font-size: 106%;
}}




/*------------------------------
procedure　見学手順　周辺環境
--------------------------------*/

.procedure{
  width:100%;
  max-width: 1000px;
  margin:0rem auto;
  text-align: center;
  padding:0;
}

.procedure h2{
  display: flex;
  flex-wrap: wrap;
  padding: 0rem 1%;
  width: 96%;
  margin: 1em 2%;
  align-items: center;
  background: #b2d882;
  border-radius: 1rem;}
@media (max-width: 767.99px){
.procedure h2{
    padding: 0;
    margin: 1em auto;
    width: 100%;
  }}


.procedure .h2title{
    margin: 0 auto;
    width: 46%;
    /*margin: 1rem auto;
    text-align: center;
    padding: 0;*/
color: #fff;
    font-size: 1.3rem;
    line-height: 1.5;}
@media (max-width: 767.99px){
.procedure .h2title{
    width: 94%;
    font-size: 70%;
    margin: 1rem 3% 0.4rem;
}}

.procedure .h2titleimg{
    width: 50%;
    margin: 0 3% 0 0;}
@media (max-width: 767.99px){
.procedure .h2titleimg{
    width: 96%;
    margin: 0 2% 1rem;
}}

.procedure .h2titleimg img{
    width: 100%;}






.procedure .procedure_item{
  width:100%;
  margin:0rem auto 3rem;
  text-align: center;
  padding:0;
  display: flex;
  flex-wrap: wrap;
align-items: flex-start;
}

.procedure_item .procedure_itemin{
  width:50%;
  margin:0rem auto;
  text-align: center;
  padding:3rem 2vw 0;
  position: relative;}
@media (max-width: 767.99px){
.procedure_item .procedure_itemin{
    width: 80%;
    padding: 1rem 2vw 2em;
    font-size: 120%;
  }}


 .procedurecircle {
    /* width: 90%; */
    min-height: 9vh; /* 高さごとに変更 */
    margin: 0 auto 1rem;
    background: #fff00030;
padding: 1rem 1vw 1rem;
    font-size: 1.3rem;
    color: #e5b13d; /*71bf44*/
    font-weight: bold;
    text-align: center!important;
    font-feature-settings: "palt";
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    animation: uneune 5s linear infinite;
    /*border-radius: 50%;*/}
@media only screen and (max-width: 768px) {
 .procedurecircle {
  margin: 0 auto;
    font-size: 92%;
  }}

@keyframes uneune {
  0% {border-radius: 60% 50% 70% 80% / 50% 60% 50% 70%; }
  25% {border-radius: 70% 60% 60% 90% / 70% 80% 40% 90%; }
  50% {border-radius: 60% 40% 70% 60% / 40% 60% 50% 60%; }
  75% {border-radius: 90% 60% 40% 70% / 70% 50% 80% 40%; }
  100% {border-radius: 60% 50% 70% 80% / 50% 60% 50% 70%; }
}



.procedure_item .procedure_itemin .circletitle{
    font-size: 0.9rem;
    font-feature-settings: "palt";
    font-weight: bold;
    width: 100%;
    color: #968031;
    text-align: center;}
 @media screen and (max-width: 767.99px) {
.procedure_item .procedure_itemin .proceduretitle{
line-height: 1.6;
    font-size: 130%;
}}


.procedure_item .circlecap{
margin: -1rem auto 3rem;
    font-size: 0.9rem;
    font-feature-settings: "palt";
    font-weight: bold;
    width: 100%;
    color: #968031;
    text-align: center;}
 @media screen and (max-width: 767.99px) {
.procedure_item .circlecap{
line-height: 1.6;
    font-size: 120%;
}}

.procedure_item .circleshopcap{
    font-size: 1.2rem;
    font-feature-settings: "palt";
    font-weight: bold;
    width: 100%;
    color: #333;
    text-align: center;}
 @media screen and (max-width: 767.99px) {
.procedure_item .circleshopcap{
    text-align: left;
line-height: 1.3;
    font-size: 130%;
    margin: 1rem 3%;
}}

.procedure_item .shoptxt{
  margin-top:-0.5em;
  margin-bottom:2rem;
    font-size: 0.9rem;
    font-feature-settings: "palt";
    width: 100%;
    color: #333;
    text-align: center;}
 @media screen and (max-width: 767.99px) {
.procedure_item .shoptxt{
    text-align: left;
    margin: 0 3%;
line-height: 1.5;
    font-size: 100%;
}}



/*  */
.procedure_item .procedurebox{
margin: 1rem auto 0;
    padding: 0;
    width: 32%;}
 @media screen and (max-width: 767.99px) {
.procedure_item .procedurebox{
    width: 48%;
}}
 @media screen and (max-width: 430.99px) {
.procedure_item .procedurebox{
    width: 100%;
}}

.procedure_item .procedurebox .procedureimg{
margin: 0 auto;
    padding: 0;
    background: #f4dc24;
    border: 3px solid #f4dc24;
    border-radius: 0 0 0.5rem 0.5rem;
    width: 100%;}
 @media screen and (max-width: 767.99px) {
.procedure_item .procedurebox .procedureimg{
    padding: 0;
}}


.procedure_item .procedurebox .procedureimg img{
    width: 100%;
}



.procedureimg2{
margin: 5em auto;
    padding: 0;
    width: 100%;}
 @media screen and (max-width: 767.99px) {
.procedureimg2{
margin: 1.5em auto;
}}
 .procedureimg2 img{
    width: 100%;
}



.procedure_item .procedurebox .proceduretitle{
padding: 0.5rem 0 0.2rem;
    margin: 0;
    width: 100%;
    font-size: 1.2rem;
    color: #fff;
    font-weight: bold;
    font-family: 'Noto Serif JP', serif;
    background: #f4dc24;
    line-height: 1;
    border-radius: 0.5rem 0.5rem 0 0;
    border-bottom: 3px dotted #ffffff60;}
 @media screen and (max-width: 767.99px) {
.procedure_item .procedurebox .proceduretitle{
padding: 0.3rem 0 0rem;
    font-size: 140%;
    line-height: 1.2;
    border-bottom: 6px dotted #ffffff60;
}}


.procedure_item .procedurebox .procedureboxcap{
    padding: 0.2rem 0.5vw 0;
    line-height: 1.4;
    font-size: 0.9rem;
    font-feature-settings: "palt";
    text-align: left;
    font-weight: 500;
    margin: 0 auto;}
 @media screen and (max-width: 767.99px) {
.procedure_item .procedurebox .procedureboxcap{
    font-size: 100%;
    padding: 0.2rem 0.5vw 0.5rem;

}}


/*----------------
scene　情景　
----------------*/

.scene{
  width:100%;
  margin:3rem auto 0;
  text-align: center;
  padding:0;
}


.scene .scene_item{
  width:100%;
  margin:0rem auto;
  text-align: center;
  padding:0;
  display: flex;
  flex-wrap: wrap;
align-items: flex-start;
}

/*  */
.scene_item .scenebox{
  margin:0rem auto;
  text-align: center;
  position: relative;
    padding: 0;
    width: 33.333%;}
 @media screen and (max-width: 767.99px) {
.scene_item .scenebox{
    width: 100%;
}}



 @media screen and (max-width: 767.99px) {
.sceneboxnone{
  display:none;
}}


.scene_item .scenebox .sceneimg{
margin: 0 auto;
    padding: 0;
    width: 100%;}
.scene_item .scenebox .sceneimg img{
    width: 100%;
}

.scene_item .scenebox .scenecap{
position: absolute;
    line-height: 1.3;
    font-size: 0.9rem;
    font-feature-settings: "palt";
    text-align: left;
    font-weight: 500;
    margin: 0 auto;
    top: calc(7% - 0.5em);
    left: 3%;
    filter: drop-shadow(1px 2px 1px #00000070);
    color: #fff;
}
 @media screen and (max-width: 767.99px) {
.scene_item .scenebox .scenecap{
    font-size: 90%;
}}






/*----------------
共通　
----------------*/


.m1 {margin: 1rem!important; }
.m2 {margin: 2rem!important; }
.m3 {margin: 3rem!important; }

.mt1 {margin-top: 1rem!important; }
.mt2 {margin-top: 2rem!important; }
.mt3 {margin-top: 3rem!important; }
.mt4 {margin-top: 4rem!important; }
.mt5 {margin-top: 5rem!important; }

.mb1 {margin-bottom: 1rem!important; }
.mb2 {margin-bottom: 2rem!important; }
.mb3 {margin-bottom: 3rem!important; }
.mb4 {margin-bottom: 4rem!important; }
.mb5 {margin-bottom: 5rem!important; }

@media screen and (max-width: 767.98px) {
.mt1 {margin-top: 0.3rem!important; }
.mt2 {margin-top: 1rem!important; }
.mt3 {margin-top: 1.5rem!important; }
.mt4 {margin-top: 2rem!important; }
.mt5 {margin-top: 2.5rem!important; }

.mb1 {margin-bottom: 0.3rem!important; }
.mb2 {margin-bottom: 1rem!important; }
.mb3 {margin-bottom: 1.5rem!important; }
.mb4 {margin-bottom: 2rem!important; }
.mb5 {margin-bottom: 2.5rem!important; }
}


.ss-text{ font-size: 78%;}
.s-text{ font-size: 86%;}
.l-text{ font-size: 110%;}
.ll-text{ font-size: 120%;}

.strongtxt{font-weight: bold;}

.strongcolor{color: #937d31;}

/*  */
.text-green {
  color: #317c34 !important;
  font-weight: bold;
}
.text-green2 {
  color: #7ac543 !important;
  font-weight: bold;
}

.text-red {
  color: #ee7d7b !important;
  font-weight: bold;
}

.text-brown {
  color: #968031 !important;
  font-weight: bold;
}

.text-yellow {
  color: #fffccc !important;
  font-weight: bold;
}


.wi100 {width: 100%!important; }
.wi90 {width: 90%!important; }

.mrl2{
margin-left:2%;
margin-right:2%;
width:96%!important;
}

.mrl5{
margin-left:5%;
margin-right:5%;
}

.mb2{ margin-bottom:2rem;}
 @media screen and (max-width: 767.99px) {
.mb2{ margin-bottom:1.25rem;
}}


/* 影 */
.drop-bl{
    filter: drop-shadow(1px 3px 2px #00000030);
}


/* 点滅 */
.blinking{
  animation:blink 1s ease-in-out infinite alternate;
}

@keyframes blink{
    0% {opacity:0.9;}
    100% {opacity:1;}
}

/* 点滅2 */
.blinking2{
  animation:blink 3s ease-in-out infinite alternate;
}

@keyframes blink{
    0% {opacity:0.8;}
    100% {opacity:1;}
}