@charset "utf-8";


/* ------------------------------------------------------------------
- reset
------------------------------------------------------------------ */

body{
  position: relative;
}

/* ------------------------------------------------------------------
- Layout
------------------------------------------------------------------ */
  
.l-header {
  width: 100%;
  height: 100vh;
  background-image: url(../img/bg_00.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  margin-left: auto;
  margin-right: auto;

  padding-top: 50px;
  padding-bottom: 0px;

  padding-left: 60px;
  padding-right: 60px;
}

  .l-header_a {
  width: 100%;
  height: 100vh;
  background-image: url(../img/bg_01.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  margin-left: auto;
  margin-right: auto;

  padding-top: 50px;
  padding-bottom: 0px;

  padding-left: 60px;
  padding-right: 60px;
}

.l-header_b {
  width: 100%;
  height: 100vh;
  background-image: url(../img/bg_02.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  margin-left: auto;
  margin-right: auto;

  padding-top: 50px;
  padding-bottom: 0px;

  padding-left: 60px;
  padding-right: 60px;
}

.l-header_c {
  width: 100%;
  height: 100vh;
  background-image: url(../img/bg_03.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  margin-left: auto;
  margin-right: auto;

  padding-top: 50px;
  padding-bottom: 0px;

  padding-left: 60px;
  padding-right: 60px;
}

.l-header_d {
  width: 100%;
  height: 100vh;
  background-image: url(../img/bg_04.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  margin-left: auto;
  margin-right: auto;

  padding-top: 50px;
  padding-bottom: 0px;

  padding-left: 60px;
  padding-right: 60px;
}

 .l-container {
  width: 100%;
  max-width: 1000px;
  padding-left: 20px;
  padding-right: 20px; 
  margin-right: auto;
  margin-left: auto;}

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

    .l-header {
      padding-top: 25px;
      padding-bottom: 0px;
    
      padding-left: 20px;
      padding-right: 20px;}
  
    }

    :root{
      --font:'Klee One';
    }

/* ------------------------------------------------------------------
- Common
------------------------------------------------------------------ */


.c-heading{
  display: flex;
  flex-direction: column;

  margin-left: auto;
  margin-right: auto;
  width: 20px;
}

.c-heading__ja{
  font-family: var(--font);
  font-size: 18px;
  width: 20px;
  margin-top: 25px;
  margin-bottom: 13px;


}

.c-heading__en{
  font-family: var(--font);
  font-size: 14px;
  letter-spacing: 0.1rem;
  color: #707070;
  writing-mode: tb;
}

.c-heading::before{
  content: "";
 display: inline-block;
 width: 20px;
 height: 20px;
 background-image:url(../img/heading_mark.svg);
 background-repeat: no-repeat;
 background-position: center;
}

.c-copy{
  font-family: var(--font);
  font-size: 22px;
  line-height: 2.2rem;

  margin-bottom: 40px;
}

.c-text{
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.8rem;
}

.c-templeHeading{
  display: flex;
  align-items: center;
  writing-mode: vertical-rl;
  margin-left: 60px;

}

.c-templeHeading__ja{
  font-family: var(--font);
  font-size: 28px;

  margin-top: 20px;
  margin-bottom: 24px;
}

.c-templeHeading__en{
  font-family: var(--font);
  font-size: 14px;
  letter-spacing: 0.1rem;
  color: #707070;
}

.c-templeHeading::before{
  content: "";
 display: inline-block;
 width: 20px;
 height: 20px;
 background-image:url(../img/heading_mark.svg);
 background-repeat: no-repeat;
 background-position: center;
}



@media only screen and (max-width: 767px) {
  .c-templeHeading{
    align-items: center;
    writing-mode: horizontal-tb;
    margin-left: 0px;
    margin-bottom: 40px;
  }

  .c-templeHeading__ja{
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 18px;
    margin-right: 10px;
    margin-left: 5px;
  }

  .c-templeHeading__en{
    font-size: 14px;
}}


  /*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0;
}

.scroll_up02 {
  transition: 1.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.scroll_up02.on {
  transform: translateY(0);
  opacity: 1.0;
}
 


@media only screen and (max-width: 767px) {
  .c-copy{
    font-family: var(--font);
    font-size: 18px;
    line-height: 2rem;
  
    margin-bottom: 20px;
  }

  .c-text{
    font-family: var(--font);
    font-size: 12px;
    line-height: 1.6rem;
  }






}


/* ------------------------------------------------------------------
- Project
------------------------------------------------------------------ */

/* - header mv_ new
------------------------------------------------------------------ */

/* header
------------------------------------------------------------------- */
body {
  background-color: #fff;
}

/* hamburger ------------------------------------------------------ */

.p-hamburger__btn {
	position: fixed;
  top: 50px;
  left: 60px;
  width: 60px;
  height: 62px;
	z-index: 10000;
}
.p_navWrap {
	box-sizing: border-box;
	position: fixed;
  left:-1000px;
	top: 0;
	width: 40%;
	height: 100%;
	padding-top: 200px;
	background-color:#fff;
	z-index: 9999;
  opacity: 0;
	transition: all .3s;
}

.p_navWrap.open {
	visibility: visible;
  left:0px;
	opacity: 1;
}


/* trigger */
.trigger,
.trigger span {
	display: inline-block;
	transition: all .3s;
	box-sizing: border-box;
}
.trigger {
	display: block;
	position: relative;
	width: 50px;
	height: 50px;
}
.trigger span {
	position: absolute;
	left: 0;
	width: 20px;
	height: 1px;
	background-color: #000;
}
.trigger.active span {
	background-color: #000;
}
.trigger span:nth-of-type(1) {
  width: 100%;
  height: 1px;
  background-color: #000;
  box-shadow: 0px 0px 3px 2px rgba(255, 255, 255, 1);
  z-index: 8000;
}
.trigger span:nth-of-type(2) {
  top: 10px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #000;
  box-shadow: 0px 0px 3px 2px rgba(255, 255, 255, 1);
  z-index: 8000;
}

.trigger span:nth-of-type(3) {
  top: 20px;
  left: 0;
  width: 100%;
  height: 1px;
  box-shadow: 0px 0px 3px 2px rgba(255, 255, 255, 1);
  background-color: #000;
  transition: all .3s;
  z-index: 7999;
}
.trigger.active span:nth-of-type(1) {
  top: 10px;
  background-color: #000;
  box-shadow: none;
  transform: rotate(30deg);
}

.trigger.active span:nth-of-type(2) {
  top: 10px;
  background-color: #000;
  box-shadow: none;
  transform: rotate(-30deg);
}

.trigger.active span:nth-of-type(3) {
  background-color: #fff;

}

.p-hamburger__text {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translate(-50%, -50%);

  color: #000;
  letter-spacing: 0.25em;
  text-align: center;
  text-shadow: 1px 1px 3px #fff, -1px 1px 3px #fff, 1px -1px 3px #fff, -1px -1px 3px #fff;

  font-family: 'Lora', serif;
  font-size: 14px;
  letter-spacing: 0.1rem;
}


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

  .p-hamburger__btn {
    top: 25px;
    left: 20px;
  }
  .p_navWrap {
    width:100%;

  }}


/* globalNav ----------------------------------------------------------- */
.p-globalNav {
  display: flex;
  justify-content: center;
  flex-direction: row-reverse;
  gap: 20px;
}
.p-globalNav__item {
  font-family: var(--font);
  writing-mode: vertical-rl;
  width: 20px;
  text-orientation: upright;
  white-space: nowrap;
}
.p-globalNav__link {
  color: #000;
  letter-spacing: 0.1em;
}

.p-globalNav__link.-hero{
  color: #fff;
}

.p-nav__btn{
  display: flex;
  justify-content: center;
  margin-top: 100px;
}

.p-nav__btn-sns {
  display: flex;
  width: 60px;
  align-items: center;
  writing-mode: tb;
  z-index: 10;

  font-size: 12px;
  gap: 25px;

  font-family: var(--font);
}

.p-nav__btn-shop{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60px;

  z-index: 10;

  font-family: var(--font);
}

.p-nav__btn-sns::after{
  content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(../img/instagram-bl.svg);
    background-repeat: no-repeat;
    background-position: center;
}

.p-nav__btn-sns img{
  width: 18px;
}

.p-nav__btn-shop{
  width: 60px;
  background-color: rgba(248, 181, 0, 0.9);
}

.p-nav__btn-shop::after{
  content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-bottom: 30px;
    background-image: url(../img/arrow.svg);
    background-repeat: no-repeat;
    background-position: center;
}

.p-nav__btn-shop a{
padding: 30px 20px 15px;
  width: 100%;
  word-break: break-all;
}

.p-nav__btn-shop img{
  margin-top: 15px;
  position: relative;
  left: 2px;
}

@media screen and (max-width: 750px) {
  .p-globalNav {
    display: flex;
    margin-right: 0;
  }
  .p-globalNav__item {
    margin-left: 0;
    margin-bottom: 16px;
  }
  .p-globalNav__link {

    font-size: 14px;
    letter-spacing: 0.1em;
  }

  
}

/* hero ----------------------------------------------------------- */
.p-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 750px;
  background: url(../img/bg_00.jpg) no-repeat center / cover;
  z-index: 1;
  overflow: hidden;
}

/* .p-hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: -1;
} */

.p-hero__nav {
  position: absolute;
  top: 50px;
  /* right: calc(50% - 480px); */
  right: 60px;
  display: flex;
  flex-direction: row-reverse;
  z-index: 5;
}

.p-hero__copy {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  /* color: #fff; */
  /* writing-mode: vertical-rl; */
  /* text-orientation: upright;
  font-size: 2.592592592vw;
  line-height: 1.75; */
  z-index: 3;
}

.p-hero__name{
  /* writing-mode: vertical-rl; */
  font-family: var(--font);
  font-size: 26px;
  color: #fff;
  text-shadow: 3px 3px 3px #000;

  display: flex;
  justify-content: end;
  width: 30px;


}

.p-hero__btn-sns,.p-hero__btn-shop {
  position: fixed;
  bottom: 0px;
  left: 60px;
  display: flex;
  justify-content: center;
  width: 60px;
  align-items: center;
  writing-mode: vertical-rl;
  line-height: 1.25;
  z-index: 10;

  font-family: var(--font);
}

.p-hero__btn-sns{
  bottom: 244px; 
  font-size: 12px;
  gap: 25px;
  align-items: center;

    /* mix-blend-mode: difference; */
    color: #000;

    background-color: rgba(255, 255, 255, 0.6);
    padding: 30px 20px;
}

.p-hero__btn-sns img{
  width: 18px;
}

.p-hero__btn-shop{
  width: 60px;
    background-color: rgba(248, 181, 0, 0.9);
}

.p-hero__btn-shop a{
  padding: 30px 20px;
}


.p-hero__btn-shop img{
  margin-top: 15px;
}

.p-btn__sp{
  display: none;
}



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

  .-pc{
    display: none;
  }

  .p-hero__nav {
    top: 25px;
    right: 20px;
  }
  

  .p-hero__nav nav {
    display: none;
  }

  .p-hero__copy {
    font-size: 6.92307vw;
  }

  .p-hero__btn {
    bottom: 20px;
    left: 20px;
    width: 64px;
    padding: 32px 16px;
    font-size: 14px;
  }

  .p-hero__btn::before {
    top: -64px;
    left: -1px;
    width: 64px;
    height: 64px;
  }

  .p-hero__btn::after {
    content: "";
    position: absolute;
    top: -40px;
    left: 18px;
    width: 18px;
    height: 18px;
  }




  .p-btn__sp{
    display: block;

    width: 100%;
    position: fixed;
    z-index: 9997;
    bottom: 0; 
    left: 0px;
    
  }
  
  .p-btn__sp p{
    writing-mode: horizontal-tb;;
    font-family: var(--font);
    text-align: center;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 10px;
  }
  
  .p-btn__sns{
    display: flex;
    flex-direction: column;
    gap:10px;
    align-items: center;
  
    margin-bottom: 50px;
  }
  
  .p-btn__snsItem{
    width: 18px;
  }
  
  .p-btn__online{
    width: 60px;
    background-color: rgba(248, 181, 0, 0.9);
    padding: 30px 20px;
  
  }
  
  .p-btn__arrow{
    width: 20px;
  }

  .p-btn__flex{
    display: flex;
  }

  .p-btn__left,.p-btn__right{
    width: 50%;
  }

  .p-btn__left{
    display: flex;
    padding: 30px 20px;
    background-color: #fff;
    opacity: 0.9;
    justify-content: center;
    align-items: center;
  }


  .p-btn__online{
    width: auto;
    display: flex;
    background-color: rgba(248, 181, 0, 0.9);
    padding: 30px 20px;
    justify-content: center;
    align-items: center;
    }  

}


/* - コンセプト
------------------------------------------------------------------ */

.p-concept{
  padding-top: 200px;
  margin-bottom: 200px;
}

.p-concept__flexBox{
  display: flex;
  justify-content: space-between;
}

.p-concept__heading{
  display: flex;
  align-items: center;

  width: 40%;
  font-family: var(--font);
  writing-mode: vertical-rl;
  font-size: 20px;
  line-height: 4rem;
}

.p-concept__heading .c-heading{
  margin-left: auto;
  margin-right: auto;
}

.p-concept__img{
  width: 60%;
  height: 350px;

  background-image: url(../img/concept.jpg);
  background-position: center;
  background-repeat: no-repeat;
}

.p-concept__textBox{
  max-width: 770px;
  margin-left: auto;
  margin-top: 100px;
}

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

  .p-concept{

    margin-bottom: 100px;
  }

  .p-concept__flexBox{
    flex-direction: column;
  }

  .p-concept__heading{
    width: 100%;
    margin-top: 30px;
  }

  .p-concept__heading .c-heading{
    margin-top: -25px;
  }

  .p-concept__img{
    width: 100%;
    height: 300px;}
  
    .p-concept__textBox{
      margin-top: 50px;
    }
  

  
  }


/* - お寺
------------------------------------------------------------------ */

.p-temple{
  background: linear-gradient(90deg,  rgba(223, 235, 223, 1), rgba(255, 255, 255, 1) , rgba(223, 235, 223, 1));
  padding-top: 100px;
  padding-bottom: 100px;
}

.p-temple__listBox{
  width: 100%;
  max-width: 1000px;
  padding-left: 20px;
  padding-right: 20px; 
  margin-right: auto;
  margin-left: auto;
}

.p-temple__list{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 100px;

  margin-bottom: 100px;
}


.p-temple__item{
  position: relative;
  max-width: 253px;;
}

.p-temple__item:hover img{
  filter: brightness(50%);
  transition: 0.5s ease;
}

.p-temple__item p{
  font-family: var(--font);
  font-weight: 200;
  letter-spacing: 0.2rem;
  font-size: 16px;
  width: 20px;
  
  color: #fff;
  writing-mode: vertical-rl;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.p-temple__heading.-pc{
  display: flex;
  justify-content: center;
  margin-bottom:  30px;
}

.p-temple__heading.-sp{
  display: none;
}



@media only screen and (max-width: 767px) {
  
  .p-temple{
    background: linear-gradient(90deg,  rgba(223, 235, 223, 1), rgba(255, 255, 255, 1) , rgba(223, 235, 223, 1));
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .p-temple__heading.-sp{
    display: flex;
  }

  .p-temple__heading.-pc{
    display: none;
  } 

  .p-temple__list{
    gap: 20px;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    margin-bottom: 0px;
  }

  .p-temple__item{
    max-width: 100%;
  }

  .p-temple__heading .c-heading{

    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
  }


}

/* - about
------------------------------------------------------------------ */

.p-about{
  padding-top: 200px;
}

.p-about__flexBox{
  display: flex;
  justify-content: space-between;
  gap:100px;
}

.p-about__img{
  width: 450px;
  height: 1050px;

  background-image: url(../img/about.jpg);
  background-position: center;
  background-repeat: no-repeat;
}

.p-about__heading{
  margin-left: auto;
  margin-right: auto;
}

.p-about__textBox{
  max-width: 410px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.p-about__bg.-sp{
  display: none;
}

.p-about__table{
  width: 410px;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5rem
}

.p-about__table th{
  padding: 13px 0;
  border-top: 1px solid #DCDCDC;
  border-bottom: 1px solid #DCDCDC;
}
.p-about__table td {
  padding: 20px 0;
  border: none;
  vertical-align: middle;
}

.p-about__table td.last{
  padding-bottom: 0px;}

.p-about__table th {
  width: 22%;
}

.p-about__table-list{
  text-indent: -1em;
   padding-left: 1em;
}

.p-about__table-list:before {
  content:  "";     /* 空の要素作成 */
  width:  10px;               /* 幅指定 */
  height:  10px;              /* 高さ指定 */
  display:  inline-block;     /* インラインブロックにする */
  background-color: #DCDCDC;  /* 背景色指定 */
  border-radius:  50%;        /* 要素を丸くする */
  position:  relative;        /* 位置調整 */
  top: -1px;                  /* 位置調整 */
  margin-right: 5px;          /* 余白指定 */
}

.p-about__attention{

  display: flex;
  flex-direction: column;
  gap: 30px;

  background-color: #F5F5F5;
  margin-top: 100px;

  padding: 50px;

  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5rem
}

.p-about__attention-text{
  text-align: center;
}

.p-about__imglist{
  display: flex;
  justify-content: space-between;
  gap: 50px;
 
  margin-top: 80px;

}

.p-about__imglist li{
  width : calc(100% / 3) ;
}



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

  .p-about{
    padding-top: 100px;
    margin-bottom: 40px;}

  .p-about__heading{
    margin-bottom: 30px}

  .p-about__textBox{
    max-width: 100%;}

  .p-about__flexBox{
    flex-direction: column-reverse;}

  .p-about__img.-pc{
  display: none;}

  .p-about__bg.-sp{
    display: block;
    width: 100%;
    height: 500px;
    background-image: url(../img/about.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

  }

  .p-about__table{
    width: 100%;
  }

  .p-about__attention{

    margin-top: 50px;
    margin-bottom: 50px;}
  
  .p-about__imglist{
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;    }

  .p-about__imglist li{
    width : 100%;}
    

}

/* - management
------------------------------------------------------------------ */

.p-manag{
  padding-top: 200px;
  margin-bottom: 200px;
}


.p-manag__heading{
  display: flex;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
}

.p-manag__table{
  font-family: var(--font);
  font-size: 16px;
  letter-spacing: 0.2rem;
  line-height:30px;
}

.p-manag__table tr {
  border-top: 1px solid #DCDCDC;
  border-bottom: 1px solid #DCDCDC;
}

.p-manag__table th,
.p-manag__table td {
  padding: 30px 0;
  border: none;
  vertical-align: middle;
}

.p-manag__table th {
  width: 22%;
}

.p-manag__tenshu{
   margin-bottom: 15px;
}

.p-manag__tenshu::before {
  content: "";
 display: inline-block;
 width: 15px;
 height: 15px;
 margin-right: 10px;
 margin-bottom: 2px;
 background-image:url(../img/heading_mark.svg);
 background-repeat: no-repeat;
 background-position: center;
 background-size: contain;
 vertical-align: middle;}


.p-manag__company{
  display: flex;
  align-items: center;
  flex-direction: column;
}

.p-manag__company-year{
  font-size: 12px;
  margin-bottom: 15px;

}

.p-manag__company-adress{
  font-size: 14px;
  text-align: center;
}



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

  .p-manag{
    margin-bottom: 100px;
    padding-top: 200px
  }

  .p-manag__table th,
  .p-manag__table td {
    width: 100%;
  }

  .p-manag__table th {
    width: 100%;
  }

  .p-manag__tenshu{
    padding-top: 30px;
  }

  .p-manag__company{
    padding-top: 30px;
  }


  
}
/*------------- */


/* - footer
------------------------------------------------------------------ */

.p-footer{
  width: 100%;  
  border-top: 1px solid #DCDCDC;
}

.p-footer__wrap{
  width: 100%;
  max-width: 1000px;

  padding: 27px 0;
  padding-left: 20px;
  padding-right: 20px; 

  display: flex;
  justify-content: space-between;
  align-items: center;


  font-family: var(--font);

  margin-right: auto;
  margin-left: auto;
}
.p-footer__nav{
  display: flex;
  font-size: 16px;
  gap: 30px;
}

.p-footer__sns{
  display: flex;
  justify-content: end;
  gap:15px;

  margin-bottom: 13px;
}

.p-footer__snsItem{
width: 18px;
}

.p-footer__coopyrights{
  font-size: 12px;
}

@media only screen and (max-width: 767px) {
.p-footer__wrap{
flex-direction: column;
align-items: flex-start;}

.p-footer__left{
  margin-bottom: 50px;
}

.p-footer__nav{
  gap: 20px;
  flex-direction: column;}

.p-footer__right{
  width: 100%;
}

.p-footer__coopyrights{
  text-align: end;
}}


/* ------------------------------------------------------------------
- 下層
------------------------------------------------------------------ */

/* - 各お寺
------------------------------------------------------------------ */

.p-hero.-enryakuji {
  background: url(../img/hero_enryakuji.png) no-repeat center / cover;
}

.p-hero.-kiyomizu {
  background: url(../img/hero_kiyomizu.png) no-repeat center / cover;
}

.p-hero.-syorenin {
  background: url(../img/hero_syorenin.png) no-repeat center / cover;
}



.p-temlpeSigle{
margin-top: 200px;
margin-bottom: 200px;
}

.p-temlpeTextbox{
  display: flex;
  flex-direction: row-reverse;
  height: 460px;

}

.p-temlpeCopy{
  font-family: var(--font);
  writing-mode: vertical-rl;
  font-size: 22px;
  margin-left: 87px;
  line-height: 1.8rem;
}

.p-temlpeText{
  font-family: var(--font);
  writing-mode: vertical-rl;
  font-size: 14px;
  line-height: 1.8rem;

  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.p-temlpeText-icon{
text-align: center;}

.p-temlpeText-icon::before{
content: "";
display: inline-block;
width: 15px;
height: 15px;
margin-right: 10px;
margin-bottom: 2px;
background-image:url(../img/heading_mark.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
vertical-align: middle;}


.p-temlpeText span.-bottom{
  display: block;
  text-align: end;
  padding-bottom: 10px;
}

.p-temlpeImgbox{
  display: flex;
  justify-content: space-between;
  gap: 100px;
  margin-top: 100px;
  margin-bottom: 100px;
}

.p-temlpeImgbox01{
  display: flex;
  flex-direction: column;
  gap: 50px;
  justify-content: space-between;
}

.p-temlpeImgbox__img01,
.p-temlpeImgbox__img02{
  width:100%;
  height: auto;
}

.p-temlpeImgbox__img03{
  width:100%;
  height:auto;
}

.p-temlpeImgbox04{
  width:100%;}

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

    .p-temlpeSigle{
      margin-top: 100px;
      margin-bottom: 100px;
      }

    .p-temlpeTextbox{
      flex-direction: column;
      justify-content: space-between;
      height: auto;
      margin-bottom: 30px;
      margin-right: 0px;
    }
    
    .p-temlpeCopy{
      writing-mode: horizontal-tb;
      font-size: 14px;
      margin-left: 0px;
      margin-bottom: 20px;
    }
    
    .p-temlpeText{
      writing-mode: horizontal-tb;
      font-size: 12px;
    }

    .p-temlpeImgbox{
      display: block;
      gap: 30px;
      margin-top: 50px;
      margin-bottom: 50px;
    }

    .p-temlpeImgbox01{
      flex-direction:row;
      gap: 20px;
      margin-bottom: 50px;
    }
    

  }