@charset "utf-8";
/* CSS Document */

/** ==================================================
root
================================================== **/
:root {
  --colorMain: #644ca2;
  --colorMain80: #8370b5;
  --colorAcc: #8f0d23;
  --colorSub: #f0eef6;
  --colorRed: crimson;
  --colorYel: gold;


  --fontFamily: 'Noto Serif JP', serif;
  --fontFamily02: "Segoe UI", "Yu Gothic Medium", sans-serif;
  --fontColor: #323232;
  --bgColor: #fff;

  --borderWidth: 1px;
  --borderStyle: solid;
  --borderColor: #000;
}

/** ==================================================
default
================================================== **/
section {
  margin: 100px auto;
}
section[class*="bg"] {
  margin: 0 auto;
  padding: 100px 0;
}

@media (max-width: 520px) {
  body .ptb100 {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

/*==================================================
.font02
==================================================**/
.font02 {
  font-family: var(--fontFamily02);
}

/*==================================================
.bg_img
==================================================**/
.bg_img {
  background: url("../images/bg.webp") center center / contain repeat;
  /* background-color:burlywood; */
}

/*==================================================
.ttA
==================================================**/
.ttA h3 {
  margin-top: 20px;
  font-size: 2.2rem;
  font-weight: bold;
}
.ttA p {
  margin: 10px auto;
  font-size: 1.6rem;
}

/*==================================================
.titA
==================================================**/
.titA {
  margin-bottom: 50px;
  font-size: 3.2rem;
  font-weight: bold;
  text-align: center;
}
.titA small {
  display: block;
  font-size: 1.4rem;
  font-weight: normal;
  font-family: var(--fontFamily02);
}
@media (max-width: 520px) {
  .titA {
    font-size: 2.6rem;
  }
}

/*==================================================
.titB
==================================================**/
.titB {
  font-size: 2.6rem;
  font-weight: bold;
  text-align: center;
}
.titB::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  margin: 10px auto 20px;
  background-color: var(--colorMain);
}

/*==================================================
.txtA
==================================================**/
.txtA {
  font-size: 2.2rem;
  font-weight: bold;
  text-align: center;
  line-height: 2.4;
}
@media (max-width: 520px) {
  .txtA {
    font-size: 1.8rem;
    /* text-align: left; */
    line-height: 2;
  }
}

/*==================================================
.txtB
==================================================**/
.txtB {
  font-size: 1.6rem;
}
.txtB span {
  font-size: 2rem;
  font-weight: bold;
  color: var(--colorMain);
}

/*==================================================
.box2C.fit
==================================================**/
.box2C.fit {
  --boxWidth: 60%;
  --b2cSpace: 5%;
}
@media (max-width: 520px) {
  .box2C.fit {
    --boxWidth: 100%;
  }
}

/*==================================================
.bd1s
==================================================**/
.bd1s {
  border: 1px solid;
}

/*==================================================
.sp_mlr5p
==================================================**/
@media (max-width: 520px) {
  .sp_mlr5p {
    margin-left: 5%;
    margin-right: 5%;
  }
}


/** ==================================================
header
================================================== **/
:root {
  --headerHeight: auto;
}
@media (max-width: 1100px) {
   :root {
    --headerHeight: 50px;
  }
}

header .pc{

}
header .sp {
  display: none;
}
@media (max-width: 1100px) {
  header .pc {
    display: none;
  }
  header .sp {
    display: block;
  }
}

header {
  --bgColor: #fff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  max-width: 100vw;
  height: var(--headerHeight);
  background-color: var(--bgColor);
  z-index: 1000;
}
header .h_nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header h1 figure {
  height: 80px;
  margin: 10px auto;
}
header h1 figure img {
  display: block;
  width: auto;
}
header address a.tel {
  justify-content: flex-end;
}
header svg {
  height: 100%;
  vertical-align: top;
}
a.form_btn {
  margin-left: 10px;
  padding: 10px;
  font-size: 1.6rem;
  text-align: center;
  color: #fff;
  background-color: var(--colorMain);
}
a.form_btn svg {
  width: 1.5em;
  height: 1.5em;
  margin-right: 10px;
  fill: #fff;
}

/* .scroll */
.scroll .sc_none {
  display: none;
}
.scroll header h1 figure {
  height: 50px;
  transition: .3s;
}
.scroll header a.tel {
  font-size: 2rem;
  transition: .3s;
}
.scroll header address a.form_btn,
.scroll header address .fs16 {
  font-size: 1.2rem;
  transition: .3s;
}
.scroll header nav ul li a {
  height: auto;
  transition: .3s;
}
@media (max-width: 1100px) {
  header .deco01 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100vw;
    max-width: 100vw;
  }
  header .h_nav,
  header .g_nav {
    width: auto;
    margin: 0;
  }
  header h1 figure {
    height: var(--headerHeight);
    margin: 0 auto;
    padding: 10px;
  }
  header h1 figure img {
    width: 150px;
    object-position: left;
  }
}

/* nav */
header nav ul {
  display: flex;
  margin: 10px auto;
}
header nav ul li {
  position: relative;
  flex: 1;
  border-left: 2px dotted;
}
header nav ul li:last-child {
  border-right: 2px dotted;
}
header nav ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 70px;
  padding: 0 20px;
  font-size: 1.8rem;
  font-weight: bold;
  white-space: nowrap;
}
header nav ul li a:hover {
  color: var(--colorMain);
  text-decoration: underline;
  opacity: 1;
}
@media (max-width: 1100px) {
  header nav {
    /* --navWidth: 0; */
    position: fixed;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100vh;
    padding: calc(var(--headerHeight) + 30px) 5% 30px;
    background-color: var(--bgColor);
    z-index: -1;
    transition: 0.3s;
    overflow-y: scroll;
  }
  .onNav header nav {
    left: calc(100% - (var(--navWidth) * 1px));
  }
  header nav ul {
    flex-flow: column;
  }
  header nav ul li {
    width: 100%;
    white-space: normal;
    border-left: none;
    border-top: 1px dotted #b4b4b4;
    transition: 0.3s;
  }
  header nav ul li:last-child {
    border-right: none;
    border-bottom: 1px dotted #b4b4b4;
  }
  header nav ul li a {
    justify-content: flex-start;
    width: 100%;
    height: auto;
    padding: 10px;
    font-weight: normal;
  }
}

/* #menu */
header #menu {
  display: none;
}
@media (max-width: 1100px) {
  header #menu {
    display: block;
    position: relative;
    width: var(--headerHeight);
    height: var(--headerHeight);
    cursor: pointer;
    white-space: nowrap;
  }
  /*ハンバーガー*/
  header #menu::before {
    content: "\e5d2";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: calc(var(--headerHeight) * 0.8);
    font-family: "Material Icons";
    line-height: 1;
  }
  .onNav header #menu::before {
    content: "\e5cd";
  }
  /* afterがある場合 */
  header #menu::before {
    top: 40%;
    font-size: calc(var(--headerHeight) * 0.6);
  }
  header #menu::after {
    content: "MENU";
    position: absolute;
    left: 50%;
    bottom: 10%;
    transform: translateX(-50%);
    font-size: calc(var(--headerHeight) * 0.2);
  }
  .onNav header #menu::after {
    content: "CLOSE";
  }
}


/*==================================================
.hero
==================================================**/
.hero {
  --bgHeight: 100vh;
  position: relative;
  height: var(--bgHeight);
  margin: 0;
}
.hero h2 {
  padding: 50px;
  font-size: 2.6rem;
  line-height: 1.8;
  letter-spacing: 2px;
  writing-mode: vertical-rl;
  white-space: nowrap;
  color: #fff;
  background-color: rgba(0, 0, 0, .5)
}

@media (max-width: 520px) {
  .hero {
    --bgHeight: 60vh;
  }
  .hero h2 {
    padding: 30px;
    font-size: 2rem;
  }
}

/*==================================================
.big_btn
==================================================**/
.big_btn {
  width: 100%;
  height: 70px;
  font-size: 2.4rem;
  line-height: 1.2;
}
@media (max-width: 520px) {
  .big_btn {
    height: auto;
    font-size: max(3vw,1.6rem);
  }
}


/*==================================================
.sermon
==================================================**/
.sermon {
  --sermon: 20px;
  position: relative;
  padding: calc(var(--sermon) + 50px);
  text-align: center;
  background: url("../images/sermon_bg.webp") center center / cover no-repeat;
  z-index: 0;
}
.sermon::before {
  content: '';
  position: absolute;
  top: var(--sermon);
  right: var(--sermon);
  left: var(--sermon);
  bottom: var(--sermon);
  background-color: #fcf8eb;
  z-index: -1;
}
.sermon figure {
  width: 320px;
  max-width: 100%;
  margin: 0 auto;
}
@media (max-width: 520px) {
  .sermon {
    padding: calc(var(--sermon) + 40px) calc(var(--sermon) + 20px);
  }
}

/*==================================================
.news
==================================================**/
.news li {
  padding: 20px;
  font-size: 1.4rem;
  border-top: 1px dotted #b4b4b4;
}
.news li:last-child {
  border-bottom: 1px dotted #b4b4b4;
}
.news .news_text {
  display: flex;
  align-items: flex-start;
}
.news .news_text time {
  margin-right: 20px;
  white-space: nowrap;
}
.news .news_file a {
  padding: 10px;
  border: 1px solid var(--borderColor);
}
.news .news_file a:hover {
  color: #fff;
  background-color: var(--borderColor);
  transition: .3s;
}
.news .news_file a::before {
  content: "\e037";
  font-family: 'Material Icons';
  margin-right: 20px;
}

@media (max-width: 520px) {
  .news li {
    padding: 20px 0;
  }
  .news .news_text {
    flex-flow: column;
  }
  .news .news_text time {
    margin-bottom: 20px;
  }
}

/*==================================================
ul.tereco
==================================================**/
ul.tereco li {
  align-items: center;
  margin: 100px auto;
  --tereco: 50px;
}
ul.tereco li figure {
  margin-right: calc(var(--tereco) * -1);
  width: 60%;
  height: 600px;
}
ul.tereco li:nth-child(even) figure {
  margin-right: 0;
  margin-left: calc(var(--tereco) * -1);
}

ul.tereco li .wrap {
  width: calc(40% + var(--tereco));
  padding: 45px;
  background-color: rgba(255, 255, 255, .9);
  z-index: 1;
}
ul.tereco li .wrap h3 {
  font-size: 2.4rem;
  font-weight: bold;
}
ul.tereco li .wrap p {
  font-size: 1.6rem;
}
ul.tereco li .inner {
  width: 450px;
  max-width: 100%;
  margin-left: 0;
}
ul.tereco li:nth-child(even) .inner {
  margin-left: auto;
  margin-right: 0;
}
ul.tereco li a.btn {
  width: 100%;
}
ul.tereco li a.btn figure {
  width: 40px;
  height: 100%;
  margin-right: 10px;
}

ul.tereco.R li figure {
  margin-right: 0;
  margin-left: calc(var(--tereco) * -1);
}
ul.tereco.R li:nth-child(even) figure {
  margin-right: calc(var(--tereco) * -1);;
  margin-left: 0;
}
ul.tereco.R li .inner {
  margin-left: auto;
  margin-right: 0;
}
ul.tereco.R li:nth-child(even) .inner {
  margin-left: 0;
  margin-right: auto;
}

@media (max-width: 980px) {
  ul.tereco li,
  ul.tereco li:nth-child(even) {
    flex-flow: column;
    margin: 50px auto;
  }
  ul.tereco li figure,
  ul.tereco li .wrap,
  ul.tereco li .inner {
    width: 100%;
  }
  ul.tereco li figure {
    margin-right: 0;
    height: auto;
  }
  ul.tereco li:nth-child(even) figure {
    margin-left: 0;
  }
  ul.tereco li .wrap {
    padding: 20px 5%;
  }

  ul.tereco.R li,
  ul.tereco.R li:nth-child(even) {
    flex-flow: column;
  }
  ul.tereco.R li figure {
    margin-left: 0;
  }
  ul.tereco.R li:nth-child(even) figure {
    margin-right: 0;
  }
}

/*==================================================
.greeting
==================================================**/
@media (max-width: 520px) {
  .greeting figure img {
    width: 70%;
  }
}

/*==================================================
.consult
==================================================**/
.consult {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 50px 0;
  padding: 80px 0;
  background: url("../images/consult_bg.webp") center center / cover no-repeat;
}
.consult::before,
.consult::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
.consult::before {
  background: linear-gradient(to top, transparent,
  rgba(255, 255, 255, .2) 70%,
  rgba(255, 255, 255, 1) 100%);
}
.consult::after {
  background: linear-gradient(to bottom, transparent,
  rgba(255, 255, 255, .2) 70%,
  rgba(255, 255, 255, 1) 100%);
}
.consult > * {
  position: relative;
  z-index: 1;
}
.consult ul li {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 225px;
  height: 225px;
  padding: 40px;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  background-color: #fff;
  border: 2px solid var(--fontColor);
  border-radius: 50%;
}
@media (max-width: 980px) {
  .consult ul li {
    width: 160px;
    height: 160px;
    padding: 30px;
    font-size: 1.4rem;
  }
}

/*==================================================
.accept
==================================================**/
.accept {
  margin: 50px auto;
  padding: 20px 40px;
  font-size: 1.8rem;
  border: 1px solid var(--fontColor);
}
.accept ul li {
  display: flex;
  align-items: center;
}
.accept ul li:not(:last-child) {
  margin-bottom: 10px;
}
.accept ul li::before {
  content: "\e86c";
  margin-right: 10px;
  font-size: 2em;
  font-family: 'Material Icons';
  line-height: 1;
  color: var(--colorAcc);
}
@media (max-width: 520px) {
  .accept {
    padding: 20px;
  }
  .accept ul li {
    align-items: flex-start;
  }
}

/*==================================================
.service
==================================================**/
.service.box3C {
  --boxMargin: 40px;
}
.service li {
  display: flex;
  justify-content: space-between;
  flex-flow: column;
}
.service li a.btn {
  margin: 0 auto;
}

/*==================================================
.j_contact
==================================================**/
.j_contact.table {
  --tableWidth: 25%;
}
.j_contact.table table {
  width: 100%;
}
.j_contact.table tr > * {
  padding: 20px 40px;
}
.j_contact.table.head tr th {
  background-color: #f3f3f3;
}
.j_contact.table .require {
  background-color: var(--colorAcc);
}
.j_contact.table *[name="input[address_prefectures]"] {
  margin: 10px 0;
}
@media (max-width: 520px) {
  .j_contact.table tr > * {
    padding: 20px 0;
  }
}

/*==================================================
footer
==================================================**/
footer {
  position: relative;
  background: url("../images/footer_bg.webp") center center / cover no-repeat;
  z-index: 0;
}
footer::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, .4);
  z-index: -1;
}
footer ul.box3C a.btn {
  --btnColor: #fff;
  justify-content: flex-start;
  height: 80px;
  padding-left: 20px;
  font-weight: bold;
  color: var(--fontColor);
}
footer ul.box3C a.btn:hover {
  color: #fff;
  background-color: var(--fontColor);
  border-color: var(--fontColor);
}
@media (max-width: 520px) {
  footer ul.box3C a.btn {
    height: 60px;
  }
}


/*==================================================
下層ページ
==================================================**/
/*==================================================
.pagetitle
==================================================**/
.pagetitle {
  position: relative;
  margin: 0 auto;
  color: #fff;
}
.pagetitle > * {
  height: 500px;
}
.pagetitle figure {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: -1;
}
.pagetitle figure::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, .4);
}
.pagetitle .titA {
  margin-bottom: 20px;
  font-weight: normal;
}

@media (max-width: 520px) {
  .pagetitle > * {
    height: 300px;
  }
}

/*==================================================
#memorial
==================================================**/
#memorial .sup.box2C.fit {
  --boxWidth: 15%;
  --b2cSpace: 5%;
}
@media (max-width: 520px) {
  #memorial .sup.box2C.fit {
    --boxWidth: 100%;
  }
}


/*==================================================
.anniv
==================================================**/
.anniv tr:first-child {
  font-size: 2.6rem;
  font-weight: bold;
  color: var(--colorMain);
  background-color: var(--colorSub);
}
.anniv.table tr > * {
  padding: 15px;
  font-size: 2rem;
}
.anniv.table.lattice tr > *:last-child {
	border-right: var(--borderWidth) var(--borderStyle) var(--borderColor);
}
.anniv td span {
  display: inline-block;
  color: var(--colorMain);
}
@media (max-width: 520px) {
  .anniv.table tr > * {
    padding: 10px 5px;
  }
  .anniv td span {
    font-size: 1.6rem;
  }
}


/*==================================================
.feature
==================================================**/
.feature.table {
  --tableWidth: 10%;
  background-color: transparent;
}
.feature dl {
  margin-bottom: 10px;
  font-size: 1.8rem;
  background-color: #fff;
  border: 1px solid var(--colorMain);
}
.feature dl > * {
  display: flex;
  align-items: center;
  padding: 10px;
}
.feature dt {
  color: #fff;
  background-color: var(--colorMain80);
}
.feature dd small {
  display: block;
  font-size: 1.4rem;
}
.feature figure {
  min-width: 40px;
  max-width: 40px;
  height: 40px;
  margin: 0 20px 0 10px;
}
.feature figure img {
  object-fit: contain;
}
@media (max-width: 520px) {
  .feature figure {
    margin: 10px auto;
  }
}

/*==================================================
.method
==================================================**/
.method.box3C {
  --boxWidth: calc(100% / 3);
}
.method li {
  padding: 0 20px;
  text-align: center;
  border-right: 1px solid;
}
.method li:last-child {
  border-right: none;
}
.method li h4 {
  font-size: 2.2rem;
  font-weight: bold;
}
.method li p {
  margin: 10px auto;
  font-size: 1.6rem;
  line-height: 2;
}
@media (max-width: 520px) {
  .method.box3C {
    --boxWidth: 100%;
  }
  .method li {
    border-right: none;
    border-bottom: 1px solid;
  }
  .method li:last-child {
    border-bottom: none;
  }
}

/*==================================================
.donation
==================================================**/
.donation.table {
  --tableWidth: auto;
  font-size: 1.8rem;
}
.donation tr:first-child th {
  font-size: 2rem;
  color: var(--colorMain);
  background-color: var(--colorSub);
}
.donation tr > * {
  padding: 10px;
}

@media (max-width: 768px) {
  .of_sc {
    overflow-x: scroll;
  }
  .of_sc .of_inner {
    width: 768px;
  }
}

/*==================================================
.flow
==================================================**/
.flow {
  counter-reset: number 0;
  --num: 30px;
  display: flex;
  justify-content: space-between;
}
.flow li {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  padding: 30px 0 70px;
  font-size: 2.4rem;
  border-left: 1px solid #969696;
  writing-mode: vertical-rl;
  white-space: nowrap;
}
.flow li:last-child {
  border-right: 1px solid #969696;
}
.flow li::before {
  counter-increment: number 1;
  content: counter(number) " ";
  width: var(--num);
  height: var(--num);
  margin-bottom: 20px;
  font-size: 1.8rem;
  writing-mode: horizontal-tb;
  text-combine-upright: all;
  line-height: var(--num);
  text-align: center;
  color: #fff;
  background-color: var(--colorMain);
  border-radius: 50%;
}
.flow li::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -20px;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: url("../images/flow_arrow.svg") center center / contain no-repeat;
  z-index: 1;
}
.flow li:last-child::after {
  display: none;
}

@media (max-width: 520px) {
  .flow {
    flex-flow: column;
  }
  .flow li {
    padding: 20px;
    padding-bottom: 60px;
    writing-mode: horizontal-tb;
    border-left: none;
  }
  .flow li:last-child {
    border-right: none;
    padding-bottom: 20px;
  }
  .flow li::before {
    margin-bottom: 0;
    margin-right: 20px;
  }
  .flow li::after {
    top: calc(100% - 40px);
    right: 50%;
    transform: translateX(50%) rotate(90deg);
  }
}

/*==================================================
.faq
==================================================**/
.faq {
  counter-reset: number 0;
}
.faq li {
  margin-bottom: 20px;
}
.faq .acc_wrap {
  border: 1px solid #9b9b9c;
}
.faq .acc_tit,
.faq .acc_item {
  display: flex;
}
.faq .acc_tit {
  align-items: center;
  font-size: 2rem;
  background-color: var(--colorSub);
  border-bottom: 1px solid #9b9b9c;
}
.faq .acc_item {
  align-items: flex-start;
  font-size: 1.6rem;
}
.faq .acc_tit::before {
  counter-increment: number 1;
  content: "Q" counter(number) " ";
  color: var(--colorMain);
  white-space: nowrap;
}
.faq .acc_item::before {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 30px;
  width: 30px;
  height: 30px;
  color: #fff;
  background-color: #b0a4d0;
}
@media (max-width: 520px) {
  .faq .acc_wrap {
    padding: 0;
  }
}

/*==================================================
.link_wrap
==================================================**/
@media (max-width: 520px) {
  .link_wrap .p50 {
    padding: 20px;
  }
}

/*==================================================
.f_fixed お問い合わせボタン
==================================================**/
/* .f_fixed {
  display: none;
}
@media (max-width: 1100px) {
  .f_fixed {
    display: block;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: auto;
    padding: 10px;
    background-color: rgba(0, 0, 0, .8);
    z-index: 100;
  }
  .f_fixed .box2C {
    --boxMargin: 10px;
  }
  .f_fixed a {
    border: 2px solid #fff;
  }
  .f_fixed a.tel {
    font-size: 2.6rem;
    background-color: #fff;
  }
}
@media (max-width: 520px) {
  .f_fixed a.tel {
    font-size: 1.6rem;
  }
  .f_fixed a.form_btn {
    margin-left: 0;
    font-size: 1.2rem;
  }
} */

/*==================================================
.f_fixed TOPへ戻るボタン
==================================================**/
.f_fixed {
  display: none;
}
@media (max-width: 1100px) {
  .f_fixed {
    display: block;
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 100;
  }
  .f_fixed p {
    padding: 10px;
    line-height: 1;
    color: #fff;
    background-color: var(--colorMain80);
    border-radius: 50px;
  }

}


/*==================================================
deco
==================================================**/
[class*="deco"] {
  overflow: hidden;
  position: relative;
  z-index: 0;
}
[class*="deco"]::before,
[class*="deco"]::after {
  content: "";
  position: absolute;
  height: 100%;
  z-index: -1;
}
[class*="deco"]::before {
  left: 0;
}
[class*="deco"]::after {
  right: 0;
}

/* .deco01 */
.deco01::before {
  top: -50px;
  width: 150px;
  background: url("../images/leaf02.webp") left top / contain no-repeat;
}
.deco01::after {
  top: -50px;
  width: 150px;
  background: url("../images/leaf05.webp") right top / contain no-repeat;
}
@media (max-width: 1100px) {
  .deco01::before,
  .deco01::after {
    display: none;
  }
}

/* .deco02 */
.deco02::before {
  top: 100px;
  width: 300px;
  background: url("../images/leaf03.webp") left top / contain no-repeat;
}
.deco02::after {
  top: 100px;
  width: 300px;
  background: url("../images/leaf06.webp") right top / contain no-repeat;
}
@media (max-width: 1100px) {
  .deco02::before,
  .deco02::after {
    width: 150px;
  }
  .deco02::before {
    left: -40px;
    top: -30px;
  }
  .deco02::after {
    top: 80px;
    right: -50px;
  }
}

/* .deco03 */
.deco03::before {
  top: -150px;
  width: 200px;
  background: url("../images/leaf02.webp") left top / contain no-repeat;
}
.deco03::after {
  top: -50px;
  width: 300px;
  background: url("../images/leaf05.webp") right top / contain no-repeat;
}
@media (max-width: 1100px) {
  .deco03::before,
  .deco03::after {
    width: 100px;
  }
  .deco03::before {
    top: -50px;
  }
  .deco03::after {
    top: 0;
  }
}

#about ul.tereco li {
  overflow: hidden;
  position: relative;
  z-index: 0;
}
#about ul.tereco li::before,
#about ul.tereco li::after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  z-index: -1;
}
#about ul.tereco li:nth-child(2)::before {
  left: 0;
  width: 200px;
  background: url("../images/leaf02.webp") left bottom / contain no-repeat;
}
#about ul.tereco li:nth-child(3)::after {
  right: 0;
  width: 200px;
  background: url("../images/leaf04.webp") right bottom / contain no-repeat;
}
@media (max-width: 1100px) {
  #about ul.tereco li::before,
  #about ul.tereco li::after {
    display: none;
  }
}


/* .deco04 */
.deco04::before {
  top: 0;
  width: 300px;
  background: url("../images/leaf01.webp") left top / contain no-repeat;
}
.deco04::after {
  top: 0;
  width: 250px;
  background: url("../images/leaf04.webp") right top / contain no-repeat;
}
@media (max-width: 1100px) {
  .deco04::before,
  .deco04::after {
    width: 100px;
  }
  .deco04::before {
    top: 50px;
  }
}

/* .deco05 */
.deco05 {
  background: #f8f7fb;
}
.deco05::after {
  top: 50px;
  right: -50px;
  width: 450px;
  background: url("../images/memorial_bg.webp") right top / contain no-repeat;
}
@media (max-width: 1100px) {
  .deco05::after {
    top: 20px;
    width: 250px;
  }
}

/* .deco06 */
.deco06::before {
  top: 0;
  width: 150px;
  background: url("../images/leaf02.webp") left top / contain no-repeat;
}
.deco06::after {
  top: -50px;
  width: 250px;
  background: url("../images/leaf04.webp") right top / contain no-repeat;
}
@media (max-width: 1100px) {
  .deco06::before,
  .deco06::after {
    width: 100px;
  }
  .deco06::before {
    top: 50px;
  }
  .deco06::after {
    top: 0;
  }
}

/* .deco07 */
.deco07::before {
  top: 100px;
  width: 150px;
  background: url("../images/leaf02.webp") left top / contain no-repeat;
}
.deco07::after {
  top: 0;
  width: 150px;
  background: url("../images/leaf05.webp") right top / contain no-repeat;
}
@media (max-width: 1100px) {
  .deco07::before,
  .deco07::after {
    width: 100px;
  }
  .deco07::before {
    top: 50px;
  }
}


/*==================================================
owlet
==================================================**/
/* owlet */
/* 電話 */
form input.owlet-input-tel1,
form input.owlet-input-tel2,
form input.owlet-input-tel3,
form input.zip1,
form input.zip2 {
    width: 5em;
}
/* 名前 */
form input.owlet-input-name-sei,
form input.owlet-input-name-mei {
    width: 8em;
}
/* 記入例 */
form .owlet-input-sample {
  margin-top: 5px;
  color: var(--fontColor);
  font-size: 14px;
}
/* フォーム規約 */
.owlet-rules {
  margin: 50px auto;
  width: 90%;
}
.owlet-rules-title {
  font-size: 2.6rem;
  font-weight: bold;
  text-align: center;
}
.owlet-rules-body {
  overflow-y:scroll;
  box-sizing:border-box;
  margin-bottom: 20px;
  padding:15px;
  height:200px;
  font-size: 1.6rem;
  border:1px solid var(--fontColor);
}
.owlet-rules-agree {
  position: relative;
  margin-bottom: 20px;
  text-align: center;
}
.owlet-rules-agree .require {
  position: static;
  margin: 0 15px;
}
.form_button,
.owlet-form-confirm {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
.form_button input[type="submit"],
.form_button input[type="button"],
.form_button .owlet-form-confirm a {
  margin: 0 20px;
}

@media (max-width: 520px) {
  .owlet-rules {
    width: 100%;
  }
  .form_button,
  .owlet-form-confirm {
    flex-flow: column;
  }
  .form_button input[type="submit"],
  .form_button input[type="button"],
  .form_button .owlet-form-confirm a {
    width: 80%;
    margin: 10px auto;
  }

}