@charset "UTF-8";
/*---------------------------------------------
カスタムプロパティ
---------------------------------------------*/
:root {
  --color-black: #000000;
  --color-charcoal: #3c4348;
  --color-lightgray: #b3b3b3;
  --color-greige: #a6968d;
  --color-offwhite: #f7f4f1;
  --color-lightgreen:#c1d367;
  --color-limegreen:#97b500;
  --color-orangered :#e73820;
  --color-coral :#ef7464;
  --color-palepink:#f3cbcb;
  --color-paleppeach:#feedd7;
  --color-paleaqua:#daefef;
  --color-dustyteal:#90cfce;
  --color-teal:#2aa3a1;
  --color-brown :#b37b4f;
  --wide-pc: 1024px;
}
@media screen and (min-width: 1024px) {
:root {
  --font_base:20px;
}
}
@media screen and (min-width: 768px) and (max-width:1023px){
:root {
  --font_base: 18px;
}
}
@media screen and (max-width: 767px) {
:root {
  --font_base: 16px;
}
}
/*---------------------------------------------
メディアクエリ
---------------------------------------------*/
@media screen and (max-width: 767px) {
  .pc {
    display: none !important;
  }
}

@media screen and (min-width: 768px) {
  .sp {
    display: none !important;
  }
}

/*---------------------------------------------
初期設定
---------------------------------------------*/
html {
  color: var(--color-black);
}
body {
  font-family:'Noto Sans JP', sans-serif;
	font-weight: 400;
  font-size: var(--font_base);
  line-height: 1.875;
  letter-spacing: 0.08em;
  position: relative;
  background-color: var(--color-offwhite);
}
p{
  	font-feature-settings: "palt";
	text-align: justify;
}
img{
  width: 100%;
  height: auto;
}
a{
  transition: 0.3s;
  cursor: pointer;
}
a:hover{
  opacity: 0.8;
}
@media(min-width: 768px){
  a[href^="tel:"]{
    pointer-events: none;
  }
}

/*---------------------------------------------
ユーティリティ
---------------------------------------------*/
.u-alignC {
  text-align: center;
}

.u-alignR {
  text-align: right;
}

.u-bold {
  font-weight: bold;
}

.u-italic {
  font-style: italic;
}

.u-josefin {
  font-family: "Josefin Sans", sans-serif;
}

.u-vertical{
  writing-mode: vertical-rl;
}
.u-fw1 {
  font-weight: 100;
}

.u-fw3 {
  font-weight: 300;
}

.u-fw4 {
  font-weight: 400;
}

.u-fw5 {
  font-weight: 500;
}

.u-fw7 {
  font-weight: 700;
}

.u-fs-2xl {
  font-size: 2rem;
}

.u-fs-3xl {
  font-size: 2.2rem;
}

.u-mb03e {
  margin-bottom: 0.3em;
}

.u-mb05e {
  margin-bottom: 0.5em;
}

.u-mb10e {
  margin-bottom: 1em;
}

.u-mb15e {
  margin-bottom: 1.5em;
}

.u-mb20e {
  margin-bottom: 2em;
}

.u-mb25e {
  margin-bottom: 2.5em;
}

.u-mb30e {
  margin-bottom: 3em;
}

.u-mb35e {
  margin-bottom: 3.5em;
}

.u-mb40e {
  margin-bottom: 4em;
}

.u-mb45e {
  margin-bottom: 4.5em;
}

.u-mb50e {
  margin-bottom: 5em;
}

.u-mb60 {
  margin-bottom: 60px;
}
.u-ls-0 {
  letter-spacing: 0 !important;
}
.u-ls-md {
  letter-spacing: 0.2em !important;
}
.u-lh-sm {
  line-height: 1.4 !important;
}
.u-lh-md {
  line-height: 1.6 !important;
}

.u-lh-lg {
  line-height: 1.8 !important;
}

.u-lh-2xl {
  line-height: 2 !important;
}

.u-lh-3xl {
  line-height: 2.18 !important;
}

.u-lh-4xl {
  line-height: 2.4 !important;
}
.u-fc-red{
  color: var(--color-orangered);
}
.u-nowrap{
  white-space: nowrap;
}

[data-anime=fadeUp] {
  opacity: 0;
  -webkit-transform: translateY(30px);
  transform: translateY(30px);
  -webkit-transition: 1s ease transform, 1s ease opacity;
  transition: 1s ease transform, 1s ease opacity;
}

[data-anime=fadeUp].is-active {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

[data-anime=slideRight] {
  opacity: 0;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: 0.5s ease transform, 0.5s ease opacity;
  transition: 0.5s ease transform, 0.5s ease opacity;
}

[data-anime=slideRight].is-active {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

[data-anime=slideLeft] {
  opacity: 0;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition: 0.5s ease transform, 0.5s ease opacity;
  transition: 0.5s ease transform, 0.5s ease opacity;
}

[data-anime=slideLeft].is-active {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

/*---------------------------------------------
モジュール
---------------------------------------------*/
.m-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 46px;
  color: white;
  font-size: 15px;
  padding: 4px;
  white-space: nowrap;
  font-weight: 500;
  transition: 0.3s;
}
.m-btn:hover{
  opacity:0.8;
}

.m-btn._consultation{
  background-color: var(--color-lightgreen);
}
.m-btn._contact{
  background-color: var(--color-orangered);
}

.m-link-btn{
  height: 3em;
  position: relative;
  border: 2px solid var(--color-charcoal);
  border-radius: 4px;
  line-height: 1;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
}
@media screen and (min-width: 768px) {
  .m-link-btn{
  height: 2.5em;
  font-size: 0.9em;
}
}
.m-link-btn:hover{
  background-color: #ffffffc6;
}
.m-link-btn::after{
  content:"";
  width: 22px;
  height: 12px;
  background: url(../img/icon-arrow-02.png) no-repeat;
  background-size: contain;
  transition: 0.3s;
  position: absolute;
  right: 2%;
  top: 50%;
  transform: translate(0,-50%);
}
.m-link-btn:hover::after{
   transform: translate(65%,-50%);
}
.p-info .m-link-btn::after{
  width: 14px;
  height: 8px;
}
.m-link-btn.-white{
    border: 2px solid white;
}
.m-link-btn.-white:hover{
    background-color: #00000018;
}
.m-link-btn.-red{
      background-color: var(--color-orangered);
      border: none;
}
.m-link-btn.-greige{
  background-color: white;
  border: 2px solid var(--color-greige);
  color: var(--color-greige);
}
.m-link-btn.-white::after,
.m-link-btn.-red::after{
  background: url(../img/icon-arrow-03.png) no-repeat;
  background-size: contain;
}
.m-link-btn.-greige::after{
  background: url(../img/icon-arrow-07.png) no-repeat;
  background-size: contain;
}


.m-trigger {
  width: 32px;
  height: 24px;
  display: flex;
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 100;
    cursor: pointer;
}
@media screen and (min-width: 768px) {
  .m-trigger {
    width: 46px;
    height: 38px;
}
}
@media screen and (min-width: 1240px) {
.m-trigger {
  display: none;
}
}

.m-trigger span {
  display: block;
  transition: all 0.4s;
  width: 100%;
  height: 2px;
  background-color:var(--color-charcoal);
  border-radius: 1px;
  position: absolute;
  left: 0;
}
.m-trigger span:nth-of-type(1){
  top: 10%;
}
.m-trigger span:nth-of-type(2){
  top: calc(50% - 1px);
}
.m-trigger span:nth-of-type(3){
  bottom: 10%;
}

.m-trigger.is-active span:nth-of-type(1) {
  top: calc(50% - 1px);
  transform: rotate(-45deg);
}
.m-trigger.is-active span:nth-of-type(2) {
  opacity: 0;
}
.m-trigger.is-active span:nth-of-type(3) {
  transform: rotate(45deg);
  bottom: calc(50% - 1px);
}

.m-dogear{
  position: relative;
}
.m-dogear::before,
.m-dogear::after{
  content: "";
  position: absolute;
}
.m-dogear::before{
  width: calc(5.208333333333334vw + 1px);
  height: calc(5.208333333333334vw + 1px);
  left: -1px;
  top: -1px;
  background-color: var(--color-offwhite);
  clip-path: polygon(0 0, 0% 100%, 100% 0);
}
  @media screen and (min-width: 768px){
.m-dogear::before{
  width: 41px;
  height: 41px;
}
   }
.m-dogear::after,
.m-dogear::after{
width: 5.208333333333334vw;
height: 5.208333333333334vw;
left: 0;
top: 0;
clip-path: polygon(100% 100%, 0% 100%, 100% 0);
}
  @media screen and (min-width: 768px){
.m-dogear::after,
.m-dogear::after{
width: 40px;
height: 40px;
}   
  }
.m-dogear.m-dogear-red::after{
  background-color: var(--color-orangered);
}
.m-dogear.m-dogear-gry::after{
  background-color: var(--color-lightgray);
}
.m-dogear.m-dogear-dus::after{
  background-color: var(--color-dustyteal);
}
.m-dogear.m-dogear-cor::after{
  background-color: var(--color-coral);
}


.m-topbtn{
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
    transition: .3s;
}
.m-topbtn.is-active{
  opacity: 1;
  visibility: visible;
}
.m-topbtn a{
  display: block;
  width: 50px;
  height: 50px;
  background-color: white;
  border-radius: 25px;
  position: relative;
}
.m-topbtn a::after{
  display: block;
  content: "";
  width: 15px;
  height: 15px;
  border-left: 2px solid var(--color-lightgray);
  border-top:2px solid var(--color-lightgray);
  position: absolute;
  top: 20px;
  left: 18px;
  transform: rotate(45deg);
}

.m-previous-next-arrows{
  width: 50px;
    display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}
.m-previous-next-arrows a{
  display: block;
  width: 20px;
  height: 11px;
  background: url(../img/icon-arrow-02.png) no-repeat;
  background-size: contain;
}
.m-previous-next-arrows .previous{
  transform: rotate(180deg);
}
@media screen and (min-width: 768px) {
  .m-previous-next-arrows{
  width: 78px;
}
.m-previous-next-arrows a{
  width: 26px;
  height: 14px;
}
}
.m-archive-pagination{
  margin-top: 3em;
}
.m-archive-pagination .page-numbers{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: #000;
  font-size: 0.9em;
}
.m-archive-pagination .page-numbers.current{
  color: var(--color-greige);
}
.m-archive-pagination .page-numbers li{
  margin-right: 0.5em;
}
.m-archive-pagination .page-numbers li:last-of-type{
  margin-right: 0;
}
.m-archive-pagination .page-numbers .prev,
.m-archive-pagination .page-numbers .next{
    width: 20px;
  height: 11px;
  background: url(../img/icon-arrow-02.png) no-repeat;
  background-size: contain;
}
.m-archive-pagination .page-numbers .prev{
    transform: rotate(180deg);
}

.m-serchWP{
  width: 100%;
  position: relative;
}
.m-serchWP form input{
  border-radius: 4px;
  font-size: 14px;
}
.m-serchWP form input[type="text"]{
  width: 100%;
  color: var(--color-charcoal);
  background-color: white;
  padding: 2px;
  text-align: left;
}
.m-serchWP form{
  position: relative;
}
.m-serchWP form button{
  display: block;
  background-image: url(../img/icon-search.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 16px;
  height: 16px;
  position: absolute;
  right: 4px;
  top:14px;
}
/*---------------------------------------------
common
---------------------------------------------*/

  .l-wrapper {
    position: relative;
  margin-top: 10.416666666666668vw;
    padding-bottom: 19.53125vw;
  }

@media screen and (min-width: 768px) {
.l-wrapper {
  margin-top: 80px;
  padding-bottom: 150px;
}
}
.l-text-wrapper{
  margin-top: 2em;
}
@media screen and (min-width: 768px) {
  .l-text-wrapper{
  margin-top: 3em;
}
}
@media screen and (max-width: 1239px) {
  .l-inner-wide {
    width: 100%;
    padding-left: 5vw;
    padding-right: 5vw;
  }
}
@media screen and (min-width: 1240px) {
  .l-inner-wide {
    width: var(--wide-pc);
    margin-left: auto;
    margin-right: auto;
  }
}

@media screen and (max-width: 767px) {
  .l-inner{
    padding-left: 5vw;
    padding-right: 5vw;
  }
}

@media screen and (min-width: 768px) {
  .l-inner{
    width: 768px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media screen and (max-width: 767px) {
  .l-inner-narrow{
    padding-left: 5vw;
    padding-right: 5vw;
  }
}

@media screen and (min-width: 767px) {
  .l-inner-narrow{
    width: 519px;
    margin-left: auto;
    margin-right: auto;
  }
}


/*---------------------------------------------
p-header
---------------------------------------------*/

.p-header {
  width: 100%;
  height: 54px;
  position: fixed;
  top: 0;
  left: 0;
  background-color: white;
  padding: 8px;
  box-shadow: 0 6px 2px #00000001;
    z-index: 100;
}
@media screen and (min-width: 768px) {
.p-header {
  height: 68px;
  padding: 10px;
}
}
@media screen and (min-width: 1240px) {
.p-header {
  width: 190px;
  min-height: 100vh; 
   box-shadow: 8px 0 2px #00000001;
}
main{
  padding-left: 190px;
}
}

.p-header .-logo{
  width: 190px;
}
@media screen and (min-width: 768px) {
  .p-header .-logo{
  width: 220px;
}
}
@media screen and (min-width: 1240px) {
  .p-header .-logo{
  width: 170px;
}
  }
.p-header .-logo a,
.p-header .-logo a img{
  width: 100%;
}
.p-header nav{
  position: absolute;
  height: calc(100vh - 54px);
  bottom:0;
  transform: translateY(100%);
  background-color: #fffffff4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  left: -100vw;
  transition: all 0.2s ease-in-out;
  padding: 3%;
}
.p-header nav.is-active{
  left: 0;
box-shadow: 8px 0 2px #00000001;
}
@media screen and (max-width: 767px) {
.p-header nav{
  width: 100%;
 height: auto;
  left: 0;
transform: translateY(-54px);
}
.p-header nav.is-active{
  bottom: 1px;
    transform: translateY(100%);
    box-shadow: 0 8px 2px #00000001;
}
}


@media screen and (min-width: 1240px) {
.p-header nav{
  position: static;
  transform: unset;
    height: calc(100vh - 180px);
    margin-top: 40px;
    transition: all 0.2s ease-in-out;
    padding: 0;
}
  }
.p-header nav ul{
  width: 100%;
}
.p-header nav ul li{
  width: 100%;
  height: 3em;
  font-size: 16px;
  text-align: left;
  line-height: 1;
  font-weight: 400;
  padding-right: 22px;
  padding-left: 6px;
transition: 0.2s cubic-bezier(0.45, 0, 0.55, 1);
}
@media screen and (min-width: 1240px) {
.p-header nav ul li{
  padding-right: 18px;
  padding-left: 4px;
}
  }
  @media screen and (max-width: 767px) {
.p-header nav ul li{
  padding-right: 0;
    height: 2.5em;
}
  }
  .p-header nav ul li:hover{
  background-color: var(--color-paleaqua);
}
.p-header nav ul li a,
.dropdown-hover span{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
    white-space: nowrap;
}
.p-header nav ul li a img{
  width: 34px;
  margin-right: 10px;
  margin-bottom: 6px;
}
@media screen and (min-width: 1240px) {
  .p-header nav ul li a img{
  width: 32px;
}
}
.p-header nav .-btn-wrap{
  width: 100%;
  margin-top: 60px;
}
.p-header nav .-btn-wrap ._contact{
  letter-spacing: 0;
  margin-top: 10px;
}
/*ドロップダウンメニュー*/
.dropdown-hover{
  position: relative;
}
@media screen and (max-width: 767px) {
 .p-header nav ul .dropdown-hover{
    height: auto;
    padding-top: 1em;
}
}
.dropdown-hover::after{
  content: "";
  width: 14px;
  height: 14px;
  background: url(../img/icon-arrow-01.png) no-repeat;
  background-size: contain;
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
  .dropdown-hover::after{
    display: none;
}
}
.dropdown-list{
  display: none;
  background-color: white;
  position: absolute;
  right: 0;
  top: 0;
  transform: translateX(100%);
  transition: 0.2s cubic-bezier(0.45, 0, 0.55, 1);
  display: none;
  box-shadow: 3px 0 2px #00000007;
}
@media screen and (max-width: 767px) {
  .dropdown-list{
    display: block;
  background-color: #ffffff58;
    position: static;
    transform: unset;
    margin-top: 1em;
      box-shadow: none;
      border-left:2px solid var(--color-lightgray) ;
  }
   .dropdown-list li a{
    padding-left: 0.5em;
   }
}
.dropdown-hover:hover .dropdown-list{
  display: block;
  animation-name: fadeIn;
  animation-fill-mode:forwards;
  animation-duration:0.3s;
}
@keyframes fadeIn{
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
}

/*---------------------------------------------
p-head
---------------------------------------------*/
.p-head{
  height: 54px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}

@media screen and (min-width: 768px) {
  .p-head{
  height: 68px;
}
}
@media screen and (min-width: 1240px) {
  .p-head{
  height: 100px;
}
}



/*---------------------------------------------
footer
---------------------------------------------*/
.p-footer {
  background-color: var(--color-charcoal);
  padding-top: 3.90625vw;
  padding-bottom: 2.604166666666667vw;
  color: white;
}
@media screen and (min-width: 768px) {
  .p-footer {
    padding-top:30px;
    padding-bottom:20px;
  }
}

.p-footer .-logo{
  width: 32%;
  display: block;
  margin: 0 auto 3.90625vw auto;
}
@media screen and (min-width: 768px) {
  .l-footer .-logo{
  width: 164px;
    margin: 0 auto 30px auto;
}
}

.p-footer .-fbox{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 768px) {
  .p-footer .-fbox{
  flex-direction: row;
  justify-content: space-between;
}
}
.p-footer .-fbox .-box-01{
  text-align: center;
}
@media screen and (min-width: 768px) {
.p-footer .-fbox .-box-01{
  width: 187px;
}
}
.p-footer .-fbox .-box-01 p:nth-of-type(1){
  font-size: 16px;
  border-bottom: 1px solid white;
  padding-bottom: 0.25em;
}
@media screen and (min-width: 768px) {
.p-footer .-fbox .-box-01 p:nth-of-type(1){
  font-size: 17px;
}
}
.p-footer .-fbox .-box-01 p:nth-of-type(2){
  font-size: 14px;
  padding-top: 0.5em;
  letter-spacing: 0;
}
.p-footer .-fbox .-box-01 p:nth-of-type(3){
  font-size: 14px;
}
@media screen and (min-width: 768px) {
.p-footer .-fbox .-box-01 p:nth-of-type(2),
.p-footer .-fbox .-box-01 p:nth-of-type(3){
  font-size: 13px;
  text-align: left;
}
}
.p-footer .-fbox .-box-01 p:nth-of-type(3) img{
  width: 15px;
  margin-right: 0.5em;
}
@media screen and (min-width: 768px) {
  .p-footer .-fbox .-box-01 p:nth-of-type(3) img{
  width: 14px;
}
}
.p-footer .-fbox .-box-01 .-btn-wrap{
  font-size: 13px;
  border-top: 1px solid white;
  border-bottom: 1px solid white;
  margin-top: 0.5em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}
.p-footer .-fbox .-box-01 .-btn-wrap a img{
  width: 25px;
}

.p-footer .-fbox .-box-02{
  width: 100%;
  margin-top: 1em;
}
@media screen and (min-width: 768px) {
.p-footer .-fbox .-box-02{
  width: 294px;
  margin-top: 0;
}
}
.p-footer .-fbox .-box-02 .-links a{
  display: block;
  text-align: center;
  margin-bottom: 0.5em;
  line-height: 1;
  font-size: 13px;
}
@media screen and (min-width: 768px) {
  .p-footer .-fbox .-box-02 .-links a{
  font-size: 14px;
  text-align: left;
}
}

.p-footer .-copylight{
  font-size: 10px;
  text-align: center;
  margin-top: 9.114583333333332vw;
}
@media screen and (min-width: 768px) {
  .p-footer .-copylight{
  margin-top: 80px;
}
}

.p-footer .m-serchWP{
max-width: 340px;
  margin: 1em auto 0 auto;
}  

/*---------------------------------------------
p-footer-btn
---------------------------------------------*/

.p-footer-btn{
  background-color: white;
  padding:5.208333333333334vw 0;
}
@media screen and (min-width: 768px) {
  .p-footer-btn{
  padding:30px 0;
  }
}
.p-footer-btn .-btn-wrap{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.p-footer-btn .-btn-wrap .m-btn{
  height: 4em;
  width: 48%;
}

@media screen and (max-width: 364px) {
.p-footer-btn .-btn-wrap{
  flex-direction: column;
  gap:0.8em;
}
.p-footer-btn .-btn-wrap .m-btn{
  width: 100%;
}
}
/*---------------------------------------------
p-footer-link
---------------------------------------------*/

.p-footer-link{
  background-color: var(--color-greige);
    padding: 9.114583333333332vw 0;
}
@media screen and (min-width: 768px) {
  .p-footer-link{
    padding: 70px 0;
}
}
.p-footer-link h2{
  color: white;
}
.p-footer-link .-content{
  margin-top: 7.8125vw ;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 768px) {
.p-footer-link .-content{
  margin-top: 60px ;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}
}
.p-footer-link .-content .-box{
  width: 100%;
  position: relative;
  margin-bottom:3.90625vw;
}.p-footer-link .-content .-box:last-of-type{
  margin-bottom: 0;
}
@media screen and (min-width: 768px) {
.p-footer-link .-content .-box{
  width: 376px;
  margin-bottom: 15px;
}
.p-footer-link .-content .-box.-narrow{
  width: 245px;
  margin-bottom: 0;
}
}
.p-footer-link .-content .-box .-img-wrap{
  width: 100%;
    height: 39.0625vw;
    overflow: hidden;
    position: relative;
      z-index: 60;
}
@media screen and (min-width: 768px) {
.p-footer-link .-content .-box .-img-wrap{
    height:146px;
}
}
.p-footer-link .-content .-box .-img-wrap .-img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
    transition: 0.5s;
}
.p-footer-link .-content .-box:hover .-img-wrap .-img{
  transform: translate(-50%,-50%) scale(1.1, 1.1);
}
.p-footer-link .-content .-box .-btn{
  width: 240px;
    position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 80;
  color: white;
    filter: drop-shadow(0px 0px 12px #000);
}
@media screen and (min-width: 768px) {
  .p-footer-link .-content .-box .-btn{
    font-size: 0.9em;
    }
  }
.p-footer-link .-content .-box.-narrow .-btn{
  width: 180px;
}

/*---------------------------------------------
p-kv
---------------------------------------------*/

.p-kv .-wrap{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 1240px) {
.p-kv .-wrap{
  height: 680px;
  overflow: hidden;
}
}
.p-kv .-wrap picture img{
  width: 100%;
  position: relative;
}
.p-kv .add-animation img{
  animation: kvZoom 3s ease-in-out forwards;
 will-change: animation;
}
    @keyframes kvZoom {
      0%{transform:scale(1)}
      100% { transform:scale(1.1)} 
    }

.p-kv .-wrap .-item {
  display: flex;
  align-items: center;
  position: absolute;
  z-index: 80;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  color: white;
  font-weight: 600;
  font-size: 13vw;
  white-space: nowrap;
}


@media screen and (min-width: 768px) {
  .p-kv .-wrap .-item {
  font-size: 54px;
}
.p-kv .-wrap:nth-of-type(odd) .-item {
  align-items: flex-start;
}
}
@media screen and (min-width: 1240px) {
  .p-kv .-wrap .-item {
  font-size:60px;
}
}

/*---------------------------------------------
p-titleBlock
---------------------------------------------*/
.p-titleBlock {
  width: 100%;
  height: 52.083333333333336vw;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-titleBlock {
    height: 400px;
  }
}
.p-titleBlock h1 {
  font-size: 7.03125vw;
  font-weight: 600;
  color: white;
}
@media screen and (min-width: 768px) {
  .p-titleBlock h1 {
    font-size: 48px;
  }
}
.p-titleBlock.kv-consultation h1,
 .p-titleBlock.kv-contact h1{
  font-size: 4.166666666666666vw;
    text-shadow: 0 0 8px #000;
}
@media screen and (min-width: 768px) {
.p-titleBlock.kv-consultation h1,
 .p-titleBlock.kv-contact h1 {
  font-size: 32px;
}
}
.p-titleBlock.kv-greeting {
  background-image: url(../img/kv-greeting.webp);
}
.p-titleBlock.kv-design {
  background-image: url(../img/kv-design.webp);
}
.p-titleBlock.kv-spec {
  background-image: url(../img/kv-spec.webp);
}
.p-titleBlock.kv-support {
  background-image: url(../img/kv-support.webp);
}
.p-titleBlock.kv-renovation {
  background-image: url(../img/kv-renovation.webp);
}
.p-titleBlock.kv-modelhouse {
  background-image: url(../img/kv-modelhouse.webp);
}
.p-titleBlock.kv-company {
  background-image: url(../img/kv-company.webp);
}
.p-titleBlock.kv-staff {
  background-image: url(../img/kv-staff.webp);
}
.p-titleBlock.kv-sitemap {
  background-image: url(../img/kv-sitemap.webp);
}
.p-titleBlock.kv-privacy {
  background-image: url(../img/kv-privacy.webp);
}
.p-titleBlock.kv-works{
  background-image: url(../img/kv-works.webp);
}
.p-titleBlock.kv-blog{
   background-image: url(../img/kv-blog.webp); 
}
.p-titleBlock.kv-blog-post{
  height: 80px;
  background-image: url(../img/kv-blog-post.webp); 
}
.p-titleBlock.kv-archive{
  height: 80px;
  background-image: url(../img/kv-archive.webp); 
}
.p-titleBlock.kv-consultation{
  height: 80px;
  background-image: url(../img/kv-consultation.webp); 
}
.p-titleBlock.kv-contact{
  height: 80px;
  background-image: url(../img/kv-contact.webp); 
}
.p-titleBlock.kv-search{
  height: 80px;
  background-image: url(../img/kv-search.webp); 
}
@media screen and (min-width: 768px) {
  .p-titleBlock.kv-blog-post,
  .p-titleBlock.kv-archive,
  .p-titleBlock.kv-consultation,
  .p-titleBlock.kv-contact,
  .p-titleBlock.kv-search{
  height: 120px;
}
}
/*---------------------------------------------
p-title
---------------------------------------------*/
.p-title{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 6.4vw;
  font-weight: 600;
  letter-spacing: 0.2em;
  white-space: nowrap;
}
@media screen and (min-width: 768px) {
  .p-title{
  font-size: 40px;
}
}
.p-title span{
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0;
  font-weight: 400
}

/*---------------------------------------------
p-content-title
---------------------------------------------*/
.p-content-title{
    text-align: center;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.5;
}
 @media screen and (min-width: 768px) {
.p-content-title{
    font-size: 30px;
 }
 }

/*---------------------------------------------
p-breadcrumb
---------------------------------------------*/
.p-breadcrumb{
  padding: 1em 0;
}
.p-breadcrumb ol{
    display: flex;
  flex-wrap: wrap;
}
.p-breadcrumb ol li{
  line-height: 1;
  font-size: 14px;
  color:var(--color-black);
}
.p-breadcrumb ol li .-txt{
    color: var(--color-lightgray); 
}
.p-breadcrumb ol li:not(:last-of-type)::after {
  content: "＞";
  margin: 0 .6em;
    color: var(--color-lightgray); 
}
/*---------------------------------------------
p-info
---------------------------------------------*/
.p-info{
  position: relative;
    padding: 0;
}
.p-info h2{
  width: 100px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-orangered);
  color: white;
  position: absolute;
  top: 0;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  z-index: 80;
}
@media screen and (min-width: 768px) {
  .p-info h2{
  width: 140px;
  font-size: 13px;
  left: 0;
}
}
.p-info h2 span{
  margin-right: 1.4em;
  margin-top: 4px;
}
.p-info h2::after{
  content:"";
  width: 1px;
  height: 30px;
  background-color: white;
  position: absolute;
  left: 45px;
  transform: rotate(35deg);
}
@media screen and (min-width: 768px) {
  .p-info h2::after{
  left: 64px;
}
}
.p-info .-btn-wrap{
  width: 70px;
  height: 80px;
  position: absolute;
  right:0;
  bottom:0;
  z-index: 80;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (min-width: 768px) {
  .p-info .-btn-wrap{
  width: 127px;
  height: 39px;
}
}
.p-info .-btn-wrap .-btn{
   width: 52px;
  height: 52px;
  font-size: 12px;
  text-align: center;
  padding-bottom: 13px;
}
@media screen and (min-width: 768px) {
  .p-info .-btn-wrap .-btn{
  width: 116px;
  height: 28px;
  font-size: 15px;
  padding-top: 2px;
  padding-bottom: 0;
}
}
@media screen and (max-width: 767px) {
.p-info .-btn-wrap .m-link-btn::after{
  top: 34px;
  right: 35%;
}
}


.p-info .-fbox{
  background-color: white;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 70;
}
@media screen and (min-width: 768px) {
.p-info .-fbox{
  flex-direction: row;
}
}
.p-info .-fbox .-items,
.p-info .-fbox .-title{
  height: 40px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.p-info .-fbox .-items{
  width: calc(100% - 110px);
  margin-left: 110px;
  border-bottom: 1px solid var(--color-charcoal);
  font-size: 11px;
  font-weight: 400;
}
@media screen and (min-width: 768px) {
  .p-info .-fbox .-items{
    width: 160px;
      margin-left: 140px;
    border-bottom: none;
    flex-direction: row-reverse;
}
}
.p-info .-fbox .-items .-category{
  background-color: var(--color-lightgray);
  color: white;
  padding: 0.5em 1em;
  line-height: 1;
  border-radius: 4px;
  margin-right: 0.8em;
  white-space: nowrap;
}
@media screen and (min-width: 768px) {
  .p-info .-fbox .-items .-category{
  margin-right: 0;
}
  .p-info .-fbox .-items .-date{
  margin-right: 1em;
}
}
.p-info .-fbox .-title{
  width: calc(100% - 70px);
  padding-left: 1em;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media screen and (min-width: 768px) {
  .p-info .-fbox .-title{
  width: calc(100% - 390px);
  font-size: 16px;
}
}

/*---------------------------------------------
p-message
---------------------------------------------*/
.p-message{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
    margin-top: 10.416666666666668vw;
}
@media screen and (min-width: 768px) {
  .p-message{
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
    margin-top: 80px;
}
}
.p-message h2{
  font-size: 8vw;
  font-weight: 600;
}
@media screen and (min-width: 768px) {
  .p-message h2{
  font-size: 40px;
  margin-left: 0;
}
}
.p-message .-content{
  width: 100%;
}
@media screen and (min-width: 768px) {
  .p-message .-content{
  width: 384px;
}
}

.p-message .-content .-logo{
  display: block;
  width: 45%;
  max-width: 220px;
  margin: 2em auto 0 auto;
}
@media screen and (min-width: 768px) {
  .p-message .-content .-logo{
  margin-top: 20px;
}
}
@media screen and (min-width: 1024px) {
  .p-message .-content .-txt{
    letter-spacing: 0.05em;
  }
}

.p-message .-content .-btn{
  margin: 3.90625vw auto 0 auto;
}
@media screen and (min-width: 768px) {
.p-message .-content .-btn{
  margin: 40px auto 0 0;
}
}
/*---------------------------------------------
p-bigImg
---------------------------------------------*/
.p-bigImg{
  margin-top: 10.416666666666668vw;
}

@media screen and (max-width: 767px) {
.p-bigImg{
  padding-left: 0;
  padding-right: 0;
}
}
@media screen and (min-width: 768px) {
.p-bigImg{
  margin-top: 80px;
}
}


/*---------------------------------------------
p-works
---------------------------------------------*/
.p-works{
  margin-top: 10.416666666666668vw; 
}
@media screen and (min-width: 768px) {
.p-works{
    margin-top: 80px;
}  
}
.p-works .-txt{
    text-align: left;
}
@media screen and (min-width: 768px) {
  .p-works .-txt{
    text-align: center;
    }
}
.p-works .-wrap{
  margin-top:10.416666666666668vw;
  padding: 0;
}
@media screen and (min-width: 768px) {
  .p-works .-wrap{
  margin-top:80px;
}
}
.p-works .-wrap .-box{
  margin-left: 20px;
  margin-right: 20px;
}
.p-works .-wrap .-box .-img-wrap{
  width: 100%;
  height: 0;
  padding-top: 125%;
  position: relative;
  overflow: hidden;
}
.p-works .-wrap .-box .-img-wrap .-img{
  position: absolute;
  width: 260%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  transition: 0.5s;
}
.p-works .-wrap .-box:hover .-img-wrap .-img{
 transform: translate(-50%,-50%) scale(1.1, 1.1);
}

.p-works .-wrap .-box .-txt-wrap .-title{
  height: 3em;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
}
.p-works .-wrap .-box .-txt-wrap .-area{
  margin-top: 1em;
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
}
.p-works .-wrap .-box .-txt-wrap .-item{
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
.p-works .-wrap .-box .-txt-wrap .-item .-icon{
  width: 32px;
  margin-right: 4px;
}


.p-works .-btn-wrap{
  margin: 7.8125vw auto 0 auto;
}
@media screen and (min-width: 768px) {
  .p-works .-btn-wrap{
  margin: 60px auto 0 auto;
}
}
/* 施工事例一覧 slick */
.js-slick-works .-arrow-prev,
.js-slick-works .-arrow-next{
  width: 20px;
  height: 100%;
  background-color: #00000024;
  position: absolute;
  top:50%;
  z-index: 80;
  transform: translateY(-50%);
transition: 0.3s;
}
@media screen and (min-width: 768px) {
  .js-slick-works .-arrow-prev,
.js-slick-works .-arrow-next{
  opacity:0;
   
}
.js-slick-works:hover .-arrow-prev,
.js-slick-works:hover .-arrow-next{
  opacity: 1;
}
}

.js-slick-works .-arrow-prev:hover,
.js-slick-works .-arrow-next:hover{
  background-color: #00000030;
    cursor: pointer;
}

.js-slick-works .-arrow-prev{
  left: 0;
}
.js-slick-works .-arrow-next{
  right: 0;
}
.js-slick-works .-arrow-prev::after,
.js-slick-works .-arrow-next::after{
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--color-offwhite);
  border-right: 2px solid var(--color-offwhite);
  position: absolute;
  top: 50%;
}
.js-slick-works .-arrow-prev::after{
  left: 12px;
  transform: translate(-50%,-50%) rotate(-135deg);
}
.js-slick-works .-arrow-next::after{
  right: 2px;
  transform: translate(-50%,-50%) rotate(45deg);
}
/*---------------------------------------------
p-mhouse ※toppage
---------------------------------------------*/
.p-mhouse{
    margin-top: 10.416666666666668vw; 
}
@media screen and (min-width: 768px) {
  .p-mhouse{
    margin-top: 80px;
}
}
.p-mhouse::after{
  content: "";
  background-color: var(--color-lightgray);
  width: calc(100% - 10vw);
  height: 1px;
  position: absolute;
  left: 5vw;
  top: 0;
}
@media screen and (min-width: 768px) {
.p-mhouse::after{
  display: none;
}
}
.p-mhouse h2{
      padding-top: 1em;
}
@media screen and (min-width: 768px) {
  .p-mhouse h2{
    margin-top: 4em;
}
}
.p-mhouse .-btn-wrap{
  width: 100%;
  margin: 7.8125vw auto 0 auto;
}
@media screen and (min-width: 768px) {
    .p-mhouse .-btn-wrap{
      margin: 60px auto 0 0;
    }
}

/*---------------------------------------------
p-concept
---------------------------------------------*/
.p-concept{
     margin-top: 10.416666666666668vw; 
}
@media screen and (min-width: 768px) {
  .p-concept{
     margin-top: 80px; 
}
}
.p-concept .-content{
  margin-top: 7.8125vw ;
  display: flex;
  flex-direction: column;
  gap:3.90625vw;
}
@media screen and (min-width: 768px) {
  .p-concept .-content{
  margin-top: 60px ;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0;
}
}
.p-concept .-content .-box{
  width: 100%;
  position: relative;
}
@media screen and (min-width: 768px) {
  .p-concept .-content .-box{
  width: 50%;
}
}
.p-concept .-content .-box .-img-wrap{
  width: 100%;
    height: 42.96875vw;
    overflow: hidden;
    position: relative;
      z-index: 60;
}
@media screen and (min-width: 768px) {
  .p-concept .-content .-box .-img-wrap{
    height:236px;
}
}
.p-concept .-content .-box .-img-wrap .-img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
    transition: 0.5s;
}
.p-concept .-content .-box:hover .-img-wrap .-img{
  transform: translate(-50%,-50%) scale(1.1, 1.1);
}
.p-concept .-content .-box .-btn{
  width: 240px;
    position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 80;
  color: white;
    filter: drop-shadow(0px 0px 12px #000);
}

/*---------------------------------------------
p-renova ※toppage
---------------------------------------------*/
.p-renova{
    margin-top: 10.416666666666668vw;
  height: 55.989583333333336vw;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .p-renova{
    margin-top: 80px;
    height: 400px;
}
}

.p-renova .-content {
  position: relative;
  z-index: 80;
  filter: drop-shadow(0px 0px 12px white);
}


.p-renova .-content .-btn{
  width: 100%;
  margin: 2em auto 0 auto;
}
@media screen and (min-width: 768px) {
.p-renova .-content .-btn{
      margin: 60px auto 0 auto;
    }

}
.p-renova .-img-wrap{
  width: 100%;
  height: 400px;
  position: absolute;
  z-index: 60;
  top: 0;
  left: 0;
   overflow: hidden;
}
.p-renova .-img-wrap .-img{
  position: absolute;
  top:  0;
  left: 0;
      transition: 0.5s;
}
.p-renova:hover .-img-wrap .-img{
  transform:scale(1.1, 1.1);
}
@media screen and (min-width: 768px) {
.p-renova .-img-wrap .-img{
  top:  50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.p-renova:hover .-img-wrap .-img{
  transform: translate(-50%,-50%) scale(1.1, 1.1);
}
}

/*---------------------------------------------
p-about
---------------------------------------------*/
.p-about-company h3{
  font-size:4.6875vw;
  text-align: center;
  font-weight: 600;
  line-height: 1.5;
    letter-spacing: 0.18em;
  white-space: nowrap;
  margin-top: 2em;
}
@media screen and (min-width: 768px) {
.p-about-company h3{
  font-size:30px;
  text-align: left;
}
}
.p-about-company .-btn-wrap{
  margin: 7.8125vw auto 0 auto;
}
@media screen and (min-width: 768px) {
  .p-about-company .-btn-wrap{
      margin: 60px auto 0 0;
    }
}

.p-about-staff{
  position: relative;
    margin-top: 10.416666666666668vw;
}
@media screen and (min-width: 768px) {
  .p-about-staff{
   margin-top: 80px;
}
}
@media screen and (min-width: 768px) {
 .p-about-staff .-content{
  padding-right: 463px;
 
}
}
.p-about-staff .-content h3{
    font-size:19px;
  font-weight: 500;
  line-height: 1.5;
      letter-spacing: 0.18em;
}
@media screen and (min-width: 768px) {
.p-about-staff .-content h3{
    font-size:24px;
}
}
.p-about-staff .-img-wrap{
  margin-top: 1.5em;
}
@media screen and (min-width: 768px) {
.p-about-staff .-img-wrap{
  width: 384px;
  margin-top: 0;
  position: absolute;
  top: 0;
  right: 0;
}
}
.p-about-staff .-btn-wrap{
 width: 100%;
  margin: 5.208333333333334vw auto 0 auto;
}
@media screen and (min-width: 768px) {
    .p-about-staff .-btn-wrap{
        max-width: 300px;
      margin: 52px auto 0 0;
    }
}
/*---------------------------------------------
p-blog
---------------------------------------------*/
.p-blog{
  background-color: var(--color-paleppeach);
  padding-top: 8.9058524173028vw;
  padding-bottom:13.020833333333334vw;
}
@media screen and (min-width: 768px) {
 .p-blog{
  padding-top:70px;
  padding-bottom: 130px;
}
}
@media screen and (min-width: 768px) {
  .p-blog .-txt{
  text-align: center;
}
}
.p-blog-blog .-wrap{
  margin-top:5.208333333333334vw;
  padding: 0;
}
@media screen and (min-width: 768px) {
 .p-blog-blog .-wrap{
  margin-top:40px;
}
}
.p-blog-blog .-wrap .-box{
  margin-left: 10px;
  margin-right: 10px;
  background-color: white;
}
.p-blog-blog .-wrap .-box .-img-wrap{
  width: 100%;
  height: 0;
  padding-top: 70%;
  position: relative;
  overflow: hidden;
}
.p-blog-blog .-wrap .-box .-img-wrap .-img{
  position: absolute;
  width: 130%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  transition: 0.5s;
}
.p-blog-blog .-wrap .-box:hover .-img-wrap .-img{
 transform: translate(-50%,-50%) scale(1.1, 1.1);
}
.p-blog-blog .-wrap .-box .-txt-wrap{
  padding:0 1em 1em 1em;
  display: flex;
  flex-direction: column;
  height: 220px;
}
@media screen and (min-width: 768px) {
  .p-blog-blog .-wrap .-box .-txt-wrap{
    height: 280px;
  }
}
.p-blog-blog .-wrap .-box .-txt-wrap .-date{
  color: var(--color-orangered);
  padding-left: 0.8em;
  border-left:1px solid var(--color-orangered) ;
  font-size: 13px;
}
.p-blog-blog .-wrap .-box .-txt-wrap .-title{
  height: 3em;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  margin-top: 0.5em;
}
.p-blog-blog .-wrap .-box .-txt-wrap .-txt{
  text-align: left;
  margin-top: 1em;
  font-size: 15px;
  line-height: 1.5;
}
.p-blog-blog .-wrap .-box .-txt-wrap .-btn{
  width: 100%;
  font-size: 16px;
  margin-top: auto;
  margin-bottom: 0;
}

/* ブログ一覧 slick */
.js-slick-blog .-arrow-prev,
.js-slick-blog .-arrow-next{
  width: 20px;
  height: 40px;
  background-color: #fffffff0;
  position: absolute;
  top: 0;
  transition: 0.3s;
  z-index: 80;
}
.js-slick-blog .-arrow-prev:hover,
.js-slick-blog .-arrow-next:hover{
  background-color: #fffffffe;
    cursor: pointer;
}
.js-slick-blog .-arrow-prev{
  left: 0;
}
.js-slick-blog .-arrow-next{
  right: 0;
}
@media screen and (min-width: 1240px) {
.js-slick-blog .-arrow-prev{
  left: -20px;
}
.js-slick-blog .-arrow-next{
  right: -20px;
}
}
.js-slick-blog .-arrow-prev::after,
.js-slick-blog .-arrow-next::after{
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--color-lightgray);
  border-right: 2px solid var(--color-lightgray);
  position: absolute;
  top: 50%;
}
.js-slick-blog .-arrow-prev::after{
  left: 12px;
  transform: translate(-50%,-50%) rotate(-135deg);
}
.js-slick-blog .-arrow-next::after{
  right: 2px;
  transform: translate(-50%,-50%) rotate(45deg);
}
.p-blog-insta .p-title img{
  width: 64px;
  margin-top: 15.625vw;
  margin-bottom: 0.5em;
}
@media screen and (min-width: 768px) {
  .p-blog-insta .p-title img{
  margin-top: 120px;
}
}
  .p-blog-insta .-txt{
    text-align: center;
  }
    .p-blog-insta .-wrap{
        margin-top:5.208333333333334vw;
    }
    @media screen and (min-width: 768px) {
    .p-blog-insta .-wrap{
  margin-top:40px;
}
}

/*---------------------------------------------
p-greeting
---------------------------------------------*/

.p-greeting .-content-01{
    padding: 6.510416666666667vw 0;
  background: url(../img/greeting-top-sp.webp) no-repeat;
  background-size: cover;
}
 @media screen and (min-width: 768px) {
  .p-greeting .-content-01{
      padding: 50px 0;
    background: url(../img/greeting-top.webp) no-repeat;
    background-size: cover;
      background-position: center bottom;
  }
 }
  @media screen and (min-width: 768px){
 .p-greeting .-content-01 .-box{
  padding-left: 440px;
 }
  }

   .p-greeting .-content-01 .-box .-title{
    font-size: 5.46875vw;
    font-weight: 500;
    margin-left: auto;
    margin-right: auto;
   }
  .p-greeting .-content-01 .-box .-title span{
    background-color: white;
    padding-top: 0.25em;
  }
  @media screen and (min-width: 768px){
       .p-greeting .-content-01 .-box .-title{
        font-size: 28px;
       }
  }
   .p-greeting .-content-01 .-txt{
    color: white;
    text-shadow: 0 0 6px #00000087;
   }
.p-greeting .-content-02{
  margin-top: 10.416666666666668vw; 
}
  @media screen and (min-width: 1024px){
    .p-greeting .-content-02{
      letter-spacing: 0.05em;
        margin-top: 80px;
    }
  }


  .p-greeting .-content-03 .-title{
    margin-top: 2em;
    margin-bottom: 1em;
  }
    @media screen and (min-width: 768px){
   .p-greeting .-content-03 .-title{
     margin-top: 3em;
    margin-bottom: 1.5em;
  }
    }
  @media screen and (min-width: 1024px){
     .p-greeting .-content-03 .-txt-01{
      letter-spacing: 0.05em;
     }
  }
     .p-greeting .-content-03 .-fbox-01{
      display: flex;
      flex-direction: column;
     }
      .p-greeting .-content-03 .-fbox-01 .-img-wrap{
        margin-bottom: 1em;
      }
      .p-greeting .-content-03 .-fbox-01 .-txt{
        width: 100%;
      }
   @media screen and (min-width: 768px){
    .p-greeting .-content-03 .-fbox-01{
      flex-direction: row;
      justify-content: space-between;
     }
       .p-greeting .-content-03 .-fbox-01 .-img-wrap{
        width: 340px;
        margin-bottom: 0;
        padding: 10px 0;
      } 
       .p-greeting .-content-03 .-fbox-01 .-txt{
        width: 380px;
        letter-spacing: 0.05em;
      }
      }
           .p-greeting .-content-03 .-fbox-02{
      display: flex;
      flex-direction: column;
     }
      .p-greeting .-content-03 .-fbox-02 .-img-wrap{
        margin-bottom: 1em;
      }
      .p-greeting .-content-03 .-fbox-02 .-txt{
        width: 100%;
      }
   @media screen and (min-width: 768px){
    .p-greeting .-content-03 .-fbox-02{
      flex-direction: row;
      justify-content: space-between;
     }
       .p-greeting .-content-03 .-fbox-02 .-img-wrap{
        width: 450px;
        margin-bottom: 0;
        padding: 10px 0;
      } 
       .p-greeting .-content-03 .-fbox-02 .-txt{
        width: 270px;
      }
      }
 @media screen and (min-width: 768px){
       .p-greeting .-content-03 .-fbox-02 .-txt{
        letter-spacing: 0.05em;
      }
 }

.p-greeting .-content-04 .-card-01{
  background-color: var(--color-paleppeach);
    padding: 2em;
  margin-bottom: 3em;
}
.p-greeting .-content-04 .-card-02{
background-color: white;
}
.p-greeting .-content-04 .-card-01 h2{
   font-size:16px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 0.5em;
  line-height: 1.5;
}
  @media screen and (min-width: 768px){
    .p-greeting .-content-04 .-card-01 h2{
  font-size:26px;
}
  }
.p-greeting .-content-04 .-card-02 .-fbox-01{
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 768px){
  .p-greeting .-content-04 .-card-02 .-fbox-01{
  display: flex;
  flex-direction: row;
}
}

 .p-greeting .-content-04 .-card-02 .-fbox-01 h2{
  width: 100%;
      text-align: center;
      padding-top: 0.5em;
      padding-bottom: 0.5em;
      font-weight: 500;
      font-size:16px;
    }
@media screen and (min-width: 768px){
 .p-greeting .-content-04 .-card-02 .-fbox-01 h2{
   width: 140px;
      font-size: 24px;
      border-right: 1px solid var(--color-charcoal);
      padding-top: 1.5em;
      padding-left: 1.5em;
    }
      }
 .p-greeting .-content-04 .-card-02 .-fbox-01 .-box-01{
  padding: 1em 2em 2em 1em;
 }
 @media screen and (min-width: 768px){
   .p-greeting .-content-04 .-card-02 .-fbox-01 .-box-01{
    flex: 1;
  padding:2em 2em 2em 0.5em;
 }
 }
 .p-greeting .-content-04 .-card-02 .-fbox-01 .-box-01 h3{
  font-size: 12px;
      border-bottom: 1px solid var(--color-charcoal);  
 }
 @media screen and (min-width: 768px){
   .p-greeting .-content-04 .-card-02 .-fbox-01 .-box-01 h3{
  font-size: 16px;
 }
 }
  .p-greeting .-content-04 .-card-02 .-fbox-01 .-box-01 dl{
    font-size: 14px;
  }
  @media screen and (min-width: 768px){
      .p-greeting .-content-04 .-card-02 .-fbox-01 .-box-01 dl{
    font-size: 16px;
  }
  }
    .p-greeting .-content-04 .-card-02 .-fbox-01 .-box-01 dl dt{
      margin-top:1em ;
    }
 .p-greeting .-content-04 .-card-02 .-fbox-02{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 1em;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 2em;
 }
  .p-greeting .-content-04 .-card-02 .-fbox-02 .-box-02{
    width: 46%;
    margin-bottom: 1em;
  }
    .p-greeting .-content-04 .-card-02 .-fbox-02 .-box-02 .-title{
      font-size: 10px;
      line-height: 1.3;
      margin-top: 0.25em;
    }
  @media screen and (min-width: 460px){
    .p-greeting .-content-04 .-card-02 .-fbox-02{
      justify-content: flex-start;
      gap: 5%;
    }
  .p-greeting .-content-04 .-card-02 .-fbox-02 .-box-02{
    width: 30%;
  }
      }
    @media screen and (min-width: 768px){
      .p-greeting .-content-04 .-card-02 .-fbox-02{
        justify-content:flex-start;
        gap: 18px;
      }
    .p-greeting .-content-04 .-card-02 .-fbox-02 .-box-02{
    width: 130px;
     margin-bottom: 0;
  }
    }
/*---------------------------------------------
p-design
---------------------------------------------*/

@media screen and (min-width: 1024px) {
.p-design .-content-01 .-txt:last-of-type{
 letter-spacing: 0.08em;
}
}
  .p-design .-content-01 .-img-wrap{
    padding-bottom: 11.450381679389313vw;
    border-bottom: 1px solid var(--color-charcoal);
  }
   @media screen and (min-width: 1240px) {
    .p-design .-content-01 .-img-wrap{
    padding-bottom: 90px;
    padding-right: 250px;
  }
   }
   @media screen and (min-width: 768px) and (max-width:1239px){
    .p-design .-content-01 .-img-wrap{
    padding-bottom: 11.450381679389313vw;
    padding-right:calc(50vw - 384px);
    padding-left: calc(50vw - 384px);
  }
   }
.p-design .-content-01 .-txt{
  margin-bottom: 1.5em;
  letter-spacing: 0;
}

.p-design .-content-02 .-title{
  margin-top: 3em;
  margin-bottom: 2em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
  .p-design .-content-02 .-title .-item-01{
  width: 120px;
  margin-bottom: 0.5em;
}
  @media screen and (min-width: 768px) {
  .p-design .-content-02 .-title .-item-01{
  width: 180px;
}
  }
  .p-design .-content-02 .-title .-item-02{
  width: 54px;
  margin-bottom: 0.5em;
}
  @media screen and (min-width: 768px) {
  .p-design .-content-02 .-title .-item-02{
  width: 67px;
}
  }
@media screen and (min-width: 1024px) {
   .p-design .-content-02 .-txt-01{
    letter-spacing: 0.05em;
   }
}
  @media screen and (min-width: 768px) {
       .p-design .-content-02 .-txt-02{
    letter-spacing: 0.05em;
   }
  }
   .p-design .-content-02 .-fbox-01{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
   }
      .p-design .-content-02 .-fbox-01 .-img-wrap{
            margin-bottom:  1em;
      }
  @media screen and (min-width: 768px) {
     .p-design .-content-02 .-fbox-01{
    flex-direction: row;
   }
   .p-design .-content-02 .-fbox-01 .-img-wrap{
    width: 390px;
    margin-bottom: 0;
    padding-top: 10px;
    padding-bottom: 10px;
   }
   .p-design .-content-02 .-fbox-01 .-txt{
    width: 340px;
    letter-spacing: 0;
   }
  }

   .p-design .-content-02 .-card-01,
   .p-design .-content-02 .-card-02{
    padding: 2em;
    margin-top: 2em;
   }
   .p-design .-content-02 .-card-01{
  background-color: var(--color-paleaqua);
}
.p-design .-content-02 .-card-02{
  background-color: var(--color-palepink);
}
   .p-design .-content-02 .-card-01 h3,
   .p-design .-content-02 .-card-02 h3{
    font-size: 18px;
    text-align: center;
    font-weight: 500;
    line-height: 1.5;
   }
   .p-design .-content-02 .-card-01 h3{
    margin-bottom: 1em;
   }
    @media screen and (min-width: 768px) {
   .p-design .-content-02 .-card-01 h3,
   .p-design .-content-02 .-card-02 h3{
    font-size: 28px;
   }
    }

  .p-design .-content-02 .-card-01 .-fbox-02{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
  }

  .p-design .-content-02 .-card-01 .-fbox-02 .-box-01{
    width: 100%;
    padding-bottom: 1em;
    border-bottom: 1px solid var(--color-charcoal);
  }
  .p-design .-content-02 .-card-01 .-fbox-02 .-box-02{
        padding-top: 1em;  
  }
    @media screen and (min-width: 768px) {
      .p-design .-content-02 .-card-01 .-fbox-02{
    flex-direction: row;
    font-size: 18px;
  } 
   .p-design .-content-02 .-card-01 .-fbox-02 .-box-01{
    width: 496px;
    padding-bottom: 0;
    padding-right: 1em;
    border-bottom: none;
    border-right:1px solid var(--color-charcoal);
   }
   .p-design .-content-02 .-card-01 .-fbox-02 .-box-02{
    width: 180px;
    padding-top: 0;
   }
    }
  .p-design .-content-02 .-card-01 .-fbox-02 .-box-01 h4{
    font-size: 16px;
    text-align: center;
    font-weight: 500;
    background-color: var(--color-dustyteal);
  }
     @media screen and (min-width: 768px) {
   .p-design .-content-02 .-card-01 .-fbox-02 .-box-01 h4{
    font-size:22px;
  }
     }
  .p-design .-content-02 .-card-01 .-fbox-02 .-box-01 dl{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .p-design .-content-02 .-card-01 .-fbox-02 .-box-01 dl dt,
  .p-design .-content-02 .-card-01 .-fbox-02 .-box-01 dl dd{
    margin-top: 15px;
  }
    .p-design .-content-02 .-card-01 .-fbox-02 .-box-01 dl dt{
      width: 90px;
      font-size: 13px;
      font-weight: 500;
      text-align: center;
      background-color: var(--color-greige);
      color: white;
      border-radius: 4px;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    @media screen and (min-width: 768px) {
      .p-design .-content-02 .-card-01 .-fbox-02 .-box-01 dl dt{
      width: 100px;
      font-size: 16px;
      padding: 2px;
    }
    }

    .p-design .-content-02 .-card-01 .-fbox-02 .-box-01 dl dd{
      width: calc(100% - 90px);
      padding-left: 0.5em;
      line-height: 1.3;
            font-size: 13px;
    }
      @media screen and (min-width: 768px) {
    .p-design .-content-02 .-card-01 .-fbox-02 .-box-01 dl dd{
      width: calc(100% - 100px);
      font-size: 17px;
    }
      }


   .p-design .-content-02 .-card-02 h4{
    background-color: var(--color-coral);
    line-height: 1;
    padding: 0.5em 0;
    text-align: center;
    font-weight: 500;
    color: white;
    font-size: 16px;
    margin-top: 2em;
    margin-bottom: 1em;
   }
    @media screen and (min-width: 768px) {
  .p-design .-content-02 .-card-02 h4{
    font-size: 22px;
   }
    }

  .p-design .-content-02 .-card-02 .-fbox-03{
     display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
  }
       .p-design .-content-02 .-card-02 .-fbox-03 .-img-wrap{
      margin-bottom: 1em;
     }
 @media screen and (min-width: 768px) {
    .p-design .-content-02 .-card-02 .-fbox-03{
    flex-direction: row;
    flex-wrap: wrap;
  }
     .p-design .-content-02 .-card-02 .-fbox-03 .-img-wrap{
      width: 350px;
      padding-top: 10px;
      padding-bottom: 10px;
      margin-bottom: 0;
     }
     .p-design .-content-02 .-card-02 .-fbox-03 .-txt{
      width: 308px;

     }
 }



/*---------------------------------------------
p-spec
---------------------------------------------*/

  .p-spec .-content-01 .-btn-wrap{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
     margin-top: 10.416666666666668vw;
  }
   @media screen and (min-width: 768px) {
      .p-spec .-content-01 .-btn-wrap{
    flex-direction: row;
      margin-top: 80px;
  }
   }
   .p-spec .-content-01 .-btn-wrap .-box{
    width: 100%;
   }
   @media screen and (min-width: 768px) {
   .p-spec .-content-01 .-btn-wrap .-box{
    width:230px;
   }
  }
  .p-spec .-content-01 .-btn-wrap .-box .-title{
    display: block;
    width: 100%;
    font-size: 16px;
    text-align: center;
    font-weight: 500;
    line-height: 1;
    padding: 0.5em;
    position: relative;
  }
   .p-spec .-content-01 .-btn-wrap .-box:nth-of-type(1) .-title{
    background-color: var(--color-orangered);
    color: white;
   }
   .p-spec .-content-01 .-btn-wrap .-box:nth-of-type(2) .-title{
    background-color: var(--color-lightgreen);
   }
  .p-spec .-content-01 .-btn-wrap .-box:nth-of-type(3) .-title{
    background-color: var(--color-dustyteal);
   }
     @media screen and (min-width: 768px) {
        .p-spec .-content-01 .-btn-wrap .-box .-title{
        font-size: 22px;
      }
        }
   .p-spec .-content-01 .-btn-wrap .-box .-title::after{
    content:'';
    width: 16px;
    height: 16px;
    position: absolute;
    right: 1em;
    top: 50%;
    transform: translateY(-50%);
    background-image: url(../img/icon-arrow-05.png);
    background-size: contain;
   }
    @media screen and (min-width: 768px) {
   .p-spec .-content-01 .-btn-wrap .-box .-title::after{
    width: 18px;
    height: 18px;
   }
    }
    .p-spec .-content-01 .-btn-wrap .-box:nth-of-type(2) .-title::after,
     .p-spec .-content-01 .-btn-wrap .-box:nth-of-type(3) .-title::after{
          background-image: url(../img/icon-arrow-06.png);
    background-size: contain;
     }
    .p-spec .-content-01 .-btn-wrap .-box .-fbox-01,
    .p-spec .-content-01 .-btn-wrap .-box .-fbox-02,
    .p-spec .-content-01 .-btn-wrap .-box .-fbox-03{
      background-color: white;
      font-size: 15px;
      padding: 0.5em;
    }
    @media screen and (min-width: 768px) {
    .p-spec .-content-01 .-btn-wrap .-box .-fbox-01,
    .p-spec .-content-01 .-btn-wrap .-box .-fbox-02,
    .p-spec .-content-01 .-btn-wrap .-box .-fbox-03{
      height: 100px;
      padding: 0.8em;
    }
    }
    .p-spec .-content-01 .-btn-wrap .-box .-fbox-01 a,
    .p-spec .-content-01 .-btn-wrap .-box .-fbox-02 a,
    .p-spec .-content-01 .-btn-wrap .-box .-fbox-03 a{
      padding-left: 1.25em;
      position: relative;
      font-size: 17px;
      line-height: 1;
      vertical-align:middle;
      white-space: nowrap;
      margin-bottom: 0.5em;
    }
    .p-spec .-content-01 .-btn-wrap .-box .-fbox-01 a::after,
    .p-spec .-content-01 .-btn-wrap .-box .-fbox-02 a::after,
    .p-spec .-content-01 .-btn-wrap .-box .-fbox-03 a::after{
      content: "";
      width: 15px;
      height: 15px;
      border-radius: 20px;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }
      .p-spec .-content-01 .-btn-wrap .-box .-fbox-01 a::after{
      background-color:  var(--color-orangered);
        }
      .p-spec .-content-01 .-btn-wrap .-box .-fbox-02 a::after{
      background-color:  var(--color-lightgreen);
        }
      .p-spec .-content-01 .-btn-wrap .-box .-fbox-03 a::after{
      background-color:  var(--color-dustyteal);
        }
      @media screen and (min-width: 768px) {
    .p-spec .-content-01 .-btn-wrap .-box .-fbox-01 a::after,
    .p-spec .-content-01 .-btn-wrap .-box .-fbox-02 a::after,
    .p-spec .-content-01 .-btn-wrap .-box .-fbox-03 a::after{
      content: "";
      width: 17px;
      height: 17px;
    }
      }

   .p-spec .-content-01 .-btn-wrap .-box .-fbox-01,
     .p-spec .-content-01 .-btn-wrap .-box .-fbox-03{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex-wrap: wrap;
    align-items: center;
  }
  .p-spec .-content-01 .-btn-wrap .-box .-fbox-02,
  .p-spec .-content-01 .-btn-wrap .-box .-fbox-03 .-box-01,
   .p-spec .-content-01 .-btn-wrap .-box .-fbox-03 .-box-02{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
    align-items: center;
  }
.p-spec .-content-01 .-btn-wrap .-box .-fbox-03 .-box-01,
.p-spec .-content-01 .-btn-wrap .-box .-fbox-03 .-box-02{
    width: 100%;
}
@media screen and (min-width: 480px) {
  .p-spec .-content-01 .-btn-wrap .-box .-fbox-01,
  .p-spec .-content-01 .-btn-wrap .-box .-fbox-02,
  .p-spec .-content-01 .-btn-wrap .-box .-fbox-03 .-box-01,
  .p-spec .-content-01 .-btn-wrap .-box .-fbox-03 .-box-02{
   flex-direction: row;
   justify-content: center;
   gap: 2em;
    }
}
   @media screen and (min-width: 768px) {
    .p-spec .-content-01 .-btn-wrap .-box .-fbox-01,
    .p-spec .-content-01 .-btn-wrap .-box .-fbox-03 .-box-01,
  .p-spec .-content-01 .-btn-wrap .-box .-fbox-03 .-box-02{
    flex-direction: column;
    gap: normal;
    align-items: flex-start;  
    }
    .p-spec .-content-01 .-btn-wrap .-box .-fbox-02,
    .p-spec .-content-01 .-btn-wrap .-box .-fbox-03{
      flex-direction: row;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 1em;
    }
    .p-spec .-content-01 .-btn-wrap .-box .-fbox-03 .-box-01,
    .p-spec .-content-01 .-btn-wrap .-box .-fbox-03 .-box-02{
    width: 95px;
}
   }
.p-spec .-content-02,
.p-spec .-content-03,
.p-spec .-content-04{
  margin-top: 10.416666666666668vw; 
}
@media screen and (min-width: 768px) {
.p-spec .-content-02,
.p-spec .-content-03,
.p-spec .-content-04{
  margin-top: 80px; 
}
}
.p-spec .-content-02 .-title,
.p-spec .-content-03 .-title,
.p-spec .-content-04 .-title{
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  padding: 0.5em;
  margin-bottom: 1em;
}
 @media screen and (min-width: 768px) {
.p-spec .-content-02 .-title,
.p-spec .-content-03 .-title,
.p-spec .-content-04 .-title{
  font-size: 22px;
}
 }
 .p-spec .-content-02 .-title{
  background-color: var(--color-orangered);
  color: white;
 }
 .p-spec .-content-03 .-title{
  background-color: var(--color-lightgreen);
 }
  .p-spec .-content-04 .-title{
  background-color: var(--color-dustyteal);
 }

 .p-spec .-content-02 h3,
.p-spec .-content-03 h3,
.p-spec .-content-04 h3{
  text-align: center;
  font-size: 16px;
  background-color: white;
  line-height: 1;
  padding: 0.5em;
  font-weight: 500;
  margin-top: 2em;
  margin-bottom: 1em;
}
 @media screen and (min-width: 768px) {
.p-spec .-content-02 h3,
.p-spec .-content-03 h3,
.p-spec .-content-04 h3{
  font-size: 22px;
}
 }
.p-spec .-content-02 h3{
  border: 2px solid var(--color-orangered);
}
.p-spec .-content-03 h3{
  border: 2px solid var(--color-lightgreen);
}
.p-spec .-content-04 h3{
  border: 2px solid var(--color-dustyteal);
}
.p-spec .-content-02 h4,
.p-spec .-content-03 h4,
.p-spec .-content-04 h4{
  font-size: 17px;
  font-weight: 500;
    line-height: 1.5;
    margin-bottom: 1em;
}
@media screen and (min-width: 768px) {
  .p-spec .-content-02 h4,
.p-spec .-content-03 h4,
.p-spec .-content-04 h4{
  font-size: 25px;
  margin-bottom: 1.5em;
}
}

.p-spec .-content-02 .-fbox .-img-wrap{
  margin-bottom: 1em;
}
@media screen and (min-width: 768px) {
.p-spec .-content-02 .-fbox{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .p-spec .-content-02 .-fbox .-img-wrap{
    width: 384px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 0;
   } 
   .p-spec .-content-02 .-fbox .-box{
    width: 348px;
   } 
.p-spec .-content-02 .-fbox .-box .-txt{
        letter-spacing: 0;
      }
  }

   .p-spec .-content-03 .-fbox-01{
    margin-top: 1em;
   }
   .p-spec .-content-03 .-fbox-01 .-img-wrap{
    margin-bottom: 1em;
   }
@media screen and (min-width: 768px) {
  .p-spec .-content-03 .-fbox-01{
        display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
  .p-spec .-content-03 .-fbox-01 .-img-wrap{
    width: 480px;
    margin-bottom: 10px;
  }
   .p-spec .-content-03 .-fbox-01 .-txt{
    width: 250px;
   }
}

   .p-spec .-content-03 .-fbox-02{
    margin-top: 1em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
   }
   .p-spec .-content-03 .-fbox-02 .-img-wrap{
    width: 100%;
    margin-bottom: 1em;
    background-color: white;
    text-align: center;
    padding: 2em;
   }
   .p-spec .-content-03 .-fbox-02 .-img-wrap img{
    width: 90%;
   }
  @media screen and (min-width: 768px) {
    .p-spec .-content-03 .-fbox-02{
      flex-direction: row;
      align-items: flex-start;
    } 
    .p-spec .-content-03 .-fbox-02 .-img-wrap{
    width: 445px;
      max-width: none;
      margin-top: 10px;
    }
      .p-spec .-content-03 .-fbox-02 .-txt-wrap{
      width: 288px;
      letter-spacing: 0;
    }
  }
  .p-spec .-content-03 .-fbox-02 .-txt-wrap .-fbox-03{
    margin-top: 1.5em;
  }
  .p-spec .-content-03 .-fbox-02 .-txt-wrap .-fbox-03 .-box dt{
    background-color: var(--color-lightgreen);
    text-align: center;
    font-size: 15px;
    line-height: 1;
    padding: 0.5em;
  }
    .p-spec .-content-03 .-fbox-02 .-txt-wrap .-fbox-03 .-box dd{
    background-color: white;
    text-align: center;
    font-size: 13px;
    line-height: 1.5;
    padding: 0.5em 0.5em 1em 0.5em;
  }
   @media screen and (min-width: 768px) {
  .p-spec .-content-03 .-fbox-02 .-txt-wrap .-fbox-03{
    margin-top: 10px;
  }
    .p-spec .-content-03 .-fbox-02 .-txt-wrap .-fbox-03 .-box dt{
    font-size: 20px;
  }
  .p-spec .-content-03 .-fbox-02 .-txt-wrap .-fbox-03 .-box dd{
    font-size: 16px;
  }
   }
   @media screen and (min-width: 1240px) {
  .p-spec .-content-03 .-fbox-02 .-txt-wrap .-fbox-03{
    margin-top: 92px;
  }
   }

   .p-spec .-content-03 .-fbox-04{
    margin-top: 1em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
   }
   .p-spec .-content-03 .-fbox-04 .-img-wrap{
    width: 100%;
    margin-bottom: 1em;
    background-color: white;
    text-align: center;
    padding: 2em;
   }
   .p-spec .-content-03 .-fbox-04 .-img-wrap img{
    width: 90%;
   }
  @media screen and (min-width: 768px) {
    .p-spec .-content-03 .-fbox-04{
      flex-direction: row;
      align-items: flex-start;
    } 
    .p-spec .-content-03 .-fbox-04 .-img-wrap{
      width: 445px;
      max-width: none;
      margin-top: 10px;
    }
      .p-spec .-content-03 .-fbox-04 .-txt{
      width: 288px;
      letter-spacing: 0;
    }
  }
  .p-spec .-content-04 .-txt .-item{
    font-size: 0.8em;
  }
  .p-spec .-content-04 .-fbox-01 .-img-wrap{
  margin-bottom: 1em;
}
@media screen and (min-width: 768px) {
.p-spec .-content-04 .-fbox-01{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .p-spec .-content-04 .-fbox-01 .-img-wrap{
    width: 384px;
    padding-top: 8px;
    padding-bottom: 10px;
    margin-bottom: 0;
   } 
   .p-spec .-content-04 .-fbox-01 .-box{
    width: 348px;
   } 
.p-spec .-content-04 .-fbox-01 .-box .-txt{
        letter-spacing: 0;
      }
      .p-spec .-content-04 .-fbox-01 .-box .-txt-01{
        letter-spacing: 0.08em;
      }
  }
  .p-spec .-content-04 .-title{
    margin-top: 2em;
  }
  @media screen and (min-width: 768px) {
  .p-spec .-content-04 .-txt-02{
    letter-spacing: 0;
  }
  }

.p-spec .-content-04 .-fbox-02{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 1em;
}
.p-spec .-content-04 .-fbox-02 .-box{
  width: 48%;
  margin-bottom: 1em;
}
@media screen and (min-width: 768px) {
  .p-spec .-content-04 .-fbox-02 .-box{
  width: 30%;
}
}
.p-spec .-content-04 .-fbox-02 .-box .-txt{
  font-size: 14px;
  margin-top: 0.25em;
}

/*---------------------------------------------
p-support
---------------------------------------------*/
 .p-support .-content-01{
  padding-bottom: 8.9058524173028vw;
 }
 @media screen and (min-width: 768px) {
   .p-support .-content-01{
  padding-bottom:70px;
 }
 }
  .p-support .-content-02{
      padding-bottom: 8.9058524173028vw;
      border-bottom: 1px solid var(--color-charcoal);
  }
 @media screen and (min-width: 768px) {
   .p-support .-content-02{
  padding-bottom:70px;
 }
 }
  .p-support .-content-02 .-no{
    background: var(--color-orangered);
    background-image: url(../img/support-no-bk.png);
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 0.5em;
    font-size: 12px;
    height:32px ;
    color: white;
    line-height: 1;
    margin-bottom: 1em;
  }
   @media screen and (min-width: 768px) {
  .p-support .-content-02 .-no{
    padding-left: 1.25em;
    font-size: 14px;
    height:44px ;
  }
   }

.p-support .-content-02 .-fbox .-img-wrap{
  margin-bottom: 1em;
}
   @media screen and (min-width: 768px) {
    .p-support .-content-02 .-fbox{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }
    .p-support .-content-02 .-fbox .-img-wrap{
      width: 384px;
      margin-bottom: 0;
    }
    .p-support .-content-02 .-fbox .-box{
      width: 347px;
    }
   }
   .p-support .-content-02 .-fbox .-box .-title{
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 0.5em;
    line-height: 1.3;
   }
      .p-support .-content-02 .-fbox .-box .-title .-item{
        font-size: 0.7em;
      }
    @media screen and (min-width: 768px) {
    .p-support .-content-02 .-fbox .-box .-title{
    margin-bottom: 1em;
    font-size: 25px;
   }
    }
     @media screen and (min-width: 768px) {
     .p-support .-content-02 .-fbox .-box .-txt{
    letter-spacing: 0.05em;
   }
     }


/*---------------------------------------------
p-renovation
---------------------------------------------*/
.p-renovation .-title{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 1.5;
}
.p-renovation .-title img{
  width: 52px;
}
.p-renovation .-title span{
  font-size: 0.7em;
}
.p-renovation .-content-01 .-btn-wrap{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 10.416666666666668vw;
}
 @media screen and (min-width: 768px) {
  .p-renovation .-content-01 .-btn-wrap{
  margin-top: 80px;
}
 }
.p-renovation .-content-01 .-btn-wrap .-box{
  width: 46%;
  padding-top: 46%;
  margin-bottom: 5vw;
  background-color: white;
  position: relative;
}
 @media screen and (min-width: 768px) {
.p-renovation .-content-01 .-btn-wrap .-box{
  width: 159px;
  padding-top: 166px;
  margin-bottom: 0;
}
}
.p-renovation .-content-01 .-btn-wrap .-box::before{
  content: "";
  width: 90%;
  height: 90%;
  border: var(--color-orangered) 2px solid;
  position: absolute;
  left: 5%;
  top: 5%;
  z-index: 40;
}
.p-renovation .-content-01 .-btn-wrap .-box::after{
  content: "";
  width: 10%;
  height: 10%;
  background-image: url(../img/icon-arrow-06.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  left: 50%;
  bottom: 5vw;
  transform: translateX(-50%);
  z-index: 50;
}
 @media screen and (min-width: 768px) {
  .p-renovation .-content-01 .-btn-wrap .-box::after{
    bottom: 20px;
  }
 }
.p-renovation .-content-01 .-btn-wrap .-box a{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 50;
  font-size: min(6.2vw,26px);
  font-weight: 600;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .p-renovation .-content-01 .-btn-wrap .-box a{
    font-size: 22px;
  }
}
.p-renovation .-content-01 .-btn-wrap .-box a span{
  font-size: 0.7em;
  margin-top: 0.5em;
}
.p-renovation .-content-01 .-btn-wrap .-box a img{
  width: 30%;
  position: absolute;
  top: -3vw;
  left: 50%;
  transform: translateX(-50%);
}
 @media screen and (min-width: 768px) {
  .p-renovation .-content-01 .-btn-wrap .-box a img{
    width: 49px;
    top: -8px;
  }
 }
.p-renovation .-content-02{
    margin-top: 10.416666666666668vw;
}
 @media screen and (min-width: 768px) {
  .p-renovation .-content-02{
    margin-top: 80px;
}
 }
   .p-renovation .-content-02 .-fbox-01{
    margin-top: 2em;
    margin-bottom: 3em;
   }
 .p-renovation .-content-02 .-fbox-01 .-img-wrap{
  margin-bottom: 1em;
 }
 @media screen and (min-width: 768px) {
  .p-renovation .-content-02 .-fbox-01{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
  .p-renovation .-content-02 .-fbox-01 .-img-wrap{
    width: 384px;
    padding-top: 6px;
    padding-bottom: 6px;
    margin-bottom: 0;
  }
  .p-renovation .-content-02 .-fbox-01 .-box{
    width: 348px;
  }
    .p-renovation .-content-02 .-fbox-01 .-box .-txt{
    letter-spacing: 0;
    line-height: 1.5;
  }
  .p-renovation .-content-02 .-fbox-01 .-box .-txt,.-txt-01{
    letter-spacing: 0.02em;
  }
 }
.p-renovation .-content-02 .-fbox-01 .-box ul{
  padding: 0.25em;
  border: 1px solid var(--color-orangered);
        display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      column-gap: 1em;
      margin-top: 0.25em;
      margin-bottom: 0.25em;
}
 .p-renovation .-content-02 .-fbox-01 .-box ul li{
  position: relative;
  padding-left: 1em;
  text-indent: -1em;
  line-height: 1.2;
  margin-bottom: 0.25em;
  font-size: 0.9em;
 }
  .p-renovation .-content-02 .-fbox-01 .-box ul li::before{
    content: "●";
    color: var(--color-orangered);
  }


/*---------------------------------------------
p-modelhouse
---------------------------------------------*/

 .p-modelhouse .-content-01 .-btn-wrap{
  margin-top: 2em;
 }
 .p-modelhouse .-content-01 .-btn-wrap a{
  color: white;
  line-height: 1;
  height: 3em;
  text-align: center;
  background-color: var(--color-lightgreen);
  display: flex;
  justify-content: center;
  align-items: center;
 }
 @media screen and (min-width: 768px) {
   .p-modelhouse .-content-01 .-btn-wrap{
  height: 2.5em;
 }
 }
 .p-modelhouse .-content-02,
 .p-modelhouse .-content-04{
  margin-top:10.416666666666668vw;
 }
  @media screen and (min-width: 768px) {
     .p-modelhouse .-content-02,
     .p-modelhouse .-content-04{
  margin-top:80px;
 }
  }
 .p-modelhouse .-content-02 dt{
  position: relative;
  line-height: 1;
  font-size: 1.1em;
  margin-bottom: 0.5em;
  letter-spacing: 0.25em;
 }
 .p-modelhouse .-content-02 dt::after{
  content: "";
  width: calc(100% - 70px);
  height: 1px;
  background-color: var(--color-charcoal);
  position: absolute;
  right: 0;
  top: 0.5em;
 }
.p-modelhouse .-content-02 dd{
  margin-bottom: 2em;
}
 @media screen and (min-width: 768px) {
  .p-modelhouse .-content-02 dd{
    width: 668px;
    margin-left: auto;
    margin-right: 0;
  }
 }
.p-modelhouse .-content-02 dd:last-of-type{
  margin-bottom: 0;
}
.p-modelhouse .-content-02 dd img{
  margin-top: 0.5em;
}
.p-modelhouse .-content-02 dd ul{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  column-gap: 1em;
}
 @media screen and (min-width: 768px) {
  .p-modelhouse .-content-02 dd ul{
  justify-content: space-between;
}
.p-modelhouse .-content-02 dd ul li{
  width: 320px;
}
 }
 .p-modelhouse .-content-03 .p-content-title{
  margin-top: 20.833333333333336vw;
 }
 @media screen and (min-width: 768px) {
   .p-modelhouse .-content-03 .p-content-title{
  margin-top: 160px;
 }
 }
 .p-modelhouse .-content-03 .-txt{
  margin-top: 2em;
  margin-bottom: 1em;
 }

 .p-modelhouse .-content-04 .-box{
  background-color: var(--color-lightgreen);
  padding: 1.5em 3vw 1em 3vw;
 }
  .p-modelhouse .-content-04 .-box h2{
    text-align: center;
    font-weight: 600;
    font-size: min(4.5vw,24px);
  }
 .p-modelhouse .-content-04 .-btn{
  height: 4em;
  background-color: var(--color-limegreen);
  text-align: center;
  line-height: 1.3;
  margin-top: 1em;
  position: relative;
 }
  .p-modelhouse .-content-04 .-btn::after{
      content:"";
  width: 22px;
  height: 12px;
    background: url(../img/icon-arrow-03.png) no-repeat;
    background-size: contain;
  transition: 0.3s;
  position: absolute;
  right: 3%;
  top: 50%;
  transform: translate(0,-50%);
  }
   .p-modelhouse .-content-04 .-btn:hover::after{
    transform: translate(65%,-50%);
   }
@media screen and (min-width: 768px) {
  .p-modelhouse .-content-04{
    display: flex;
    flex-direction: row;
    align-items: stretch;
  }
  .p-modelhouse .-content-04 .-box h2{
    font-size: 30px;
  }
  .p-modelhouse .-content-04 .-img-wrap{
    width: 247px;
  }
  .p-modelhouse .-content-04 .-box{
    width: 521px;
    padding: 1em ;
  }
  .p-modelhouse .-content-04 .-btn{
    font-size: 20px;
    padding-right: 2em;
  }
}
 /* p-gallery */
 .p-modelhouse .p-gallery{
  overflow: hidden;
 }
.p-modelhouse .p-gallery .-thumbnail-wrap{
   margin: 10px -5px 0 -5px;
}
.p-modelhouse .p-gallery .-thumbnail-wrap li{
  transition: opacity .3s linear;
  margin: 0 5px;
}
.p-modelhouse .p-gallery .-thumbnail-wrap li.slick-current{
  filter: grayscale(80%);
}



/*---------------------------------------------
p-company
---------------------------------------------*/
.p-company {
  padding-bottom: 0;
}
@media screen and (min-width: 768px) {
.p-company .-content-01 .-txt-01{
  letter-spacing: 0.05em;
}
}
.p-company .-content-02{
  max-height: 400px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10.416666666666668vw;
}
@media screen and (min-width: 768px) {
.p-company .-content-02{
  margin-top: 80px;
}
}

.p-company .-content-02 picture {
  width: 100%;
}
.p-company .-content-03,
.p-company .-content-04{
  margin-top: 20.833333333333336vw;
}
 @media screen and (min-width: 768px) {
  .p-company .-content-03,
.p-company .-content-04{
  margin-top: 160px;
}
 }
  .p-company .-content-03 .-fbox-01{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    border-top: 1px solid var(--color-charcoal);
    margin-top: 2em;
    margin-bottom: 2em;
  }
  .p-company .-content-03 .-fbox-01 dt,
  .p-company .-content-03 .-fbox-01 dd{
    font-size: 13px;
    font-weight: 400;
    border-bottom: 1px solid var(--color-charcoal);
    padding-top: 0.5em;
    padding-bottom: 0.5em;
  }
  .p-company .-content-03 .-fbox-01 dt{
    width: 105px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    padding-left: 0.5em;
    line-height: 1;
  }
  .p-company .-content-03 .-fbox-01 dt::after{
    content: "";
    width: 1px;
    height: calc(100% - 6px);
    background-color: var(--color-charcoal);
    position: absolute;
    right: 0;
    top: 3px;
  }
  .p-company .-content-03 .-fbox-01 dd{
    width: calc(100% - 105px);
    padding-left: 1.5em;
    line-height: 1.5;
  }
     @media screen and (min-width: 768px) {
   .p-company .-content-03 .-fbox-01 dt,
  .p-company .-content-03 .-fbox-01 dd{
    font-size: 18px;
  }
  .p-company .-content-03 .-fbox-01 dt{
    width: 175px;
  }
    .p-company .-content-03 .-fbox-01 dd{
      width: 593px;
    }
   }

.p-company .-content-03 .-card{
  margin-bottom: 2em;
}
.p-company .-content-03 .-card.-item-01{
  margin-top: 10.416666666666668vw;
}
@media screen and (min-width: 768px) {
.p-company .-content-03 .-card.-item-01{
  margin-top: 80px;
}
     }
   .p-company .-content-03 .-card .-fbox-02{
    display: flex;
    flex-direction: row;
   }
.p-company .-content-03 .-card .-fbox-02 .-title,
.p-company .-content-03 .-card .-fbox-02 dd,
.p-company .-content-03 .-card .-fbox-03 .-title,
.p-company .-content-03 .-card .-fbox-03 dd{
  font-weight: 400;
   padding-top: 0.25em;
    padding-bottom: 0.5em;
   line-height: 1.5;
}
.p-company .-content-03 .-card .-fbox-02 .-title{
  width: 160px;
  text-align: center;
  border-right:1px solid var(--color-charcoal) ;
}
.p-company .-content-03 .-card .-fbox-03 .-title{
  text-align: center;
  border-bottom:1px solid var(--color-charcoal) ;
}
 @media screen and (min-width: 768px) {
  .p-company .-content-03 .-card .-fbox-02 .-title,
.p-company .-content-03 .-card .-fbox-02 dd{
  font-size: 18px;
}
  .p-company .-content-03 .-card .-fbox-02 .-title{
    width: 200px;
  }
 }
.p-company .-content-03 .-card .-fbox-02 dd{
  width: calc(100% - 160px);
  padding-left: 1em;
}
@media screen and (min-width: 768px) {
  .p-company .-content-03 .-card .-fbox-02 dd{
  width: calc(100% - 200px);
}
}
.p-company .-content-03 .-card .-fbox-03 dd{
  margin-top: 0.5em;
}
@media screen and (min-width: 768px) {
  .p-company .-content-03 .-card .-fbox-03{
    display: flex;
    flex-direction: row;
  }
  .p-company .-content-03 .-card .-fbox-03 .-title{
      width: 200px;
      border-bottom: none;
      border-right:1px solid var(--color-charcoal) ;
  }
  .p-company .-content-03 .-card .-fbox-03 dd{
  width: calc(100% - 200px);
  padding-left: 1em;
  margin-top: 0;
}
}

.p-company .-content-03 .-card .-fbox-03 dd .-list{
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.p-company .-content-03 .-card .-fbox-03 dd .-list dt{
  width: 110px;
}
.p-company .-content-03 .-card .-fbox-03 dd .-list dd{
  width: calc(100% - 110px);
}
@media screen and (min-width: 768px) {
  .p-company .-content-03 .-card .-fbox-03 dd .-list dt{
  width: 130px;
}
.p-company .-content-03 .-card .-fbox-03 dd .-list dd{
  width: calc(100% - 130px);
}
}
.p-company .-content-03 .-card .-fbox-03 dd .-list dt,
.p-company .-content-03 .-card .-fbox-03 dd .-list dd{
  font-size: 0.9em;
  line-height: 1.3;
  font-weight: 400;
}
.p-company .-content-03 .-card .-fbox-03 dd .-list dt{
  padding-top: 5px;
  white-space: nowrap;
}
.p-company .-content-03 .-card .-map-wrap{
  border: 3px solid var(--color-lightgray);
}
.p-company .-content-03 .-card .-map-wrap iframe{
  width: 100%;
  height: 309px;
}
     @media screen and (min-width: 768px) {
      .p-company .-content-03 .-card .-map-wrap iframe{
  height: 508px;
}
     }

.p-company .-content-03 .-btn-wrap .-btn{
      margin-top: 4em;
     }
     @media screen and (min-width: 768px) {
.p-company .-content-03 .-btn-wrap .-btn{
      margin-top: 6em;
     } 
        }
.p-company .-content-04{
 padding-bottom: 15.625vw;
}
  @media screen and (min-width: 768px) {
    .p-company .-content-04{
 padding-bottom: 120px;
}
  }
.p-company .-content-04 .-fbox{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 3em;
  margin-bottom: 3em;
}
.p-company .-content-04 .-fbox .-box{
  width: 70%;
  margin-bottom: 2em;
}
.p-company .-content-04 .-fbox .-box:last-of-type{
  margin-bottom: 0;
}
@media screen and (min-width: 480px) {
  .p-company .-content-04 .-fbox{
  flex-direction: row;
  justify-content: flex-start;
  column-gap:4%;
}
.p-company .-content-04 .-fbox .-box{
  width: 48%;
}
}
@media screen and (min-width: 768px) {
  .p-company .-content-04 .-fbox{
  justify-content: space-between;
  column-gap:normal;
}
.p-company .-content-04 .-fbox .-box{
  width: 220px;
  margin-bottom: 0;
}
}
.p-company .-content-04 .-fbox .-box .-txt{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 0.25em;
}
.p-company .-content-04 .-fbox .-box .-txt span{
  font-size: 0.7em;
}
.p-company .-content-05{
   height: 55.989583333333336vw;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; 
}
@media screen and (min-width: 768px) {
.p-company .-content-05{
    height: 380px;
}
}
.p-company .-content-05 .-img-wrap{
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 60;
  top: 0;
  left: 0;
   overflow: hidden;
}
.p-company .-content-05 .-img-wrap .-img{
  position: absolute;
  top:  0;
  left: 0;
      transition: 0.5s;
}
.p-company .-content-05:hover .-img-wrap .-img{
  transform:scale(1.1, 1.1);
}
@media screen and (min-width: 768px) {
.p-company .-content-05 .-img-wrap .-img{
  top:  50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.p-company .-content-05:hover .-img-wrap .-img{
  transform: translate(-50%,-50%) scale(1.1, 1.1);
}
}
.p-company .-content-05 .-box{
  width: 80%;
  max-width: 540px;
  position: relative;
  z-index: 60;
  background-color: #ffffffdd;
  padding: 1em;
}
.p-company .-content-05 .-box .-btn{
  margin-top: 1em;
  border-radius: 0;
  border: none;
  background-color: white;
  font-weight: 400;
}

/*---------------------------------------------
p-staff
---------------------------------------------*/

 .p-staff .-content-01{
  background: url(../img/staff-top-sp.webp) no-repeat;
  background-size: cover;
  padding-top: 90vw;
  padding-bottom: 2em;
}
 @media screen and (min-width: 768px) {
  .p-staff .-content-01{
    background: url(../img/staff-top.webp) no-repeat;
    background-size: cover;
      background-position: center;
      padding-top: 340px;
      padding-bottom: 3em;
      letter-spacing: 0.05em;
  }
 }
  .p-staff .-content-01 .-txt{
    color: white;
 text-shadow: 0 0 6px #00000087;
  }
  .p-staff .-content-02 .-txt-wrap{
    margin-bottom: 3em;
  }
   .p-staff .-content-02 .-txt-wrap .-txt{
    margin-bottom: 0.5em;
   }
   .p-staff .-content-02 .-fbox{
    margin-bottom: 2em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 3em;
    border-bottom: var(--color-lightgray) solid 3px;
   }
   .p-staff .-content-02 .-fbox:last-of-type{
    margin-bottom: 0;
    border-bottom: none;
   }
   .p-staff .-content-02 .-fbox .-img-wrap,
    .p-staff .-content-02 .-fbox .-box{
      width: 100%;
      max-width: 380px;
    }
     .p-staff .-content-02 .-fbox .-img-wrap{
      margin-bottom: 1em;
     }

     .p-staff .-content-02 .-fbox .-box .-txt{
      font-size: 18px;
      font-weight: 600;
      line-height: 1.3;
      border-bottom: 1px solid var(--color-charcoal);
      padding-bottom: 0.5em;
      margin-bottom: 0.5em;
     }
     .p-staff .-content-02 .-fbox .-box .-txt span{
      font-weight: 400;
      font-size: 0.7em;
     }
     .p-staff .-content-02 .-fbox .-box dl dt,
     .p-staff .-content-02 .-fbox .-box dl dd{
      line-height: 1.5;
      font-size: 13px;
      font-weight: 400;
      margin-bottom: 0.25em;
      letter-spacing: 0;
     }
     .p-staff .-content-02 .-fbox .-box dl{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
     }
      .p-staff .-content-02 .-fbox .-box dl dt{
        width: 70px;
      }
       .p-staff .-content-02 .-fbox .-box dl dd{
        width: calc(100% - 70px);
       }
.p-staff .-content-02 .-fbox .-box dl dd ul .-item{
  padding-left: 4.25em;
}
@media screen and (min-width: 768px) {
.p-staff .-content-02 .-fbox{
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 3em;
   } 
.p-staff .-content-02 .-fbox .-img-wrap{
  width: 295px;
   max-width: none;
   margin-bottom: 0;
}
.p-staff .-content-02 .-fbox .-box{
      width: 425px;
      max-width: none;
    }

    .p-staff .-content-02 .-fbox .-box .-txt{
              font-size: 26px;
    }
     .p-staff .-content-02 .-fbox .-box dl dt,
     .p-staff .-content-02 .-fbox .-box dl dd{
      font-size: 16px;
     }
  .p-staff .-content-02 .-fbox .-box .-item{
      margin-bottom: 2em;
     }
      }
  .p-staff .-content-02 .-fbox .-box{
    font-size: 1.5em;
  }
/*---------------------------------------------
p-sitemap
---------------------------------------------*/
.p-sitemap .-title{
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 32px;
  background-color: var(--color-greige);
  font-weight: 500;
  color: white;
  margin-bottom: 1em;
}
@media screen and (min-width: 768px) {
  .p-sitemap .-title{
  height: 44px;
}
}
  .p-sitemap .-fbox{
    margin-bottom: 2em;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 1em;
  }
  .p-sitemap .-fbox li{
    width: 48%;
    text-align: center;
  }
     .p-sitemap .-fbox li .-item{
      display: none;
    }
@media screen and (max-width: 767px) {
   .p-sitemap .-fbox li{
    letter-spacing: 0;
   }
}
@media screen and (max-width: 500px) {
    .p-sitemap .-item{
    display: block;
  }
   .p-sitemap .-fbox li{
    font-size: 14px;
   }
}

/*---------------------------------------------
p-privacy
---------------------------------------------*/
.p-privacy .-title{
  background-color: var(--color-dustyteal);
  font-weight: 500;
  padding:0.25em 1em;
  line-height: 1.5;
  margin-bottom: 0.5em;
}
.p-privacy .-content{
  margin-bottom: 2em;
}
.p-privacy .-content:first-of-type{
  margin-top: 3em;
}
.p-privacy .-content .-txt,
.p-privacy .-content ul li{
  font-size: 0.9em;
  font-weight: 400;
  line-height: 1.5;
    margin-bottom: 0.5em;
}
.p-privacy .-content ul li{
  list-style-type: disc;
  margin-left: 1.5em;

}

/*--------------------------------------------------------------------------
問い合わせフォーム
---------------------------------------------------------------------------*/
.p-Inquiry .-box{
  padding: 1em 0;
  margin-bottom: 6px;
  position: relative;
}
.p-Inquiry .-box::after{
  content: "";
  width: 100%;
  height: 1px;
  background-color: var(--color-palepink);
  position: absolute;
  bottom: 0;
  left: 0;
}
.p-Inquiry .-box .-txt{
  font-size: 1em;
  color: var(--color-charcoal);
  position: relative;
  line-height: 1;
  margin-bottom: 0.5em;
}
@media screen and (min-width: 768px){
  .p-Inquiry .-box .-txt{
  font-size: 0.9em;
  margin-bottom: 0;
}
}
.p-Inquiry .-box .-txt .-item{
  font-size: 0.7em;
}
.p-Inquiry .-box .-txt.-txt-01::after{
  content: "＊";
  font-size: 14px;
  font-weight: 600;
  color: var(--color-orangered);
  vertical-align: top;
}

.p-Inquiry .-box .-txt.-txt-02{
 line-height: 1.3; 
}

.p-Inquiry .-box .-txt-03{
  font-size: 0.8em;
  line-height: 1.3;
  width: 100%;
  text-align: center;
}
.p-Inquiry .-box .-txt-03 a{
  color: var(--color-teal);
  font-weight: 600;
}

.p-Inquiry .-txt-04{
  font-size: 0.7em;
  color: var(--color-teal);
    text-align: center;
}
.p-Inquiry .-box 	input[type="text"],
.p-Inquiry .-box 	input[type="email"],
.p-Inquiry .-box 	input[type="tel"],
.p-Inquiry .-box 	input[type="date"],
.p-Inquiry .-box 	input[type="time"],
.p-Inquiry .-box .select-warap,
.p-Inquiry .-box .-fbox,
.p-Inquiry .-box textarea{
  width: 100%;

}
@media screen and (min-width: 768px){
  .p-Inquiry .-box{
  display: flex;
  }
    .p-Inquiry .-box .-txt{
      width: 280px;
    }
.p-Inquiry .-box 	input[type="text"],
.p-Inquiry .-box 	input[type="email"],
.p-Inquiry .-box 	input[type="tel"],
.p-Inquiry .-box 	input[type="date"],
.p-Inquiry .-box 	input[type="time"],
.p-Inquiry .-box .select-warap,
.p-Inquiry .-box .-fbox,
.p-Inquiry .-box textarea{
      flex: 1;
      font-size: 0.9em;
    }
   .p-Inquiry .-box label{
          font-size: 0.9em;
   } 
}

.p-Inquiry .-box 	input[type="text"],
.p-Inquiry .-box 	input[type="email"],
.p-Inquiry .-box 	input[type="tel"],
.p-Inquiry .-box 	input[type="date"],
.p-Inquiry .-box 	input[type="time"],
.p-Inquiry .-box select,
.p-Inquiry .-box textarea{
      outline: 1px solid var(--color-lightgreen);
      padding: 0.25em;
}
.p-Inquiry .-box 	input[type="text"]:focus,
.p-Inquiry .-box 	input[type="email"]:focus,
.p-Inquiry .-box 	input[type="tel"]:focus,
.p-Inquiry .-box 	input[type="date"]:focus,
.p-Inquiry .-box 	input[type="time"]:focus,
.p-Inquiry .-box select:focus,
.p-Inquiry .-box textarea:focus{
      outline: 2px solid var(--color-palepink);
}

.p-Inquiry .-box input,
.p-Inquiry .-box select,
.p-Inquiry .-box textarea{
  background-color: white;
}

.p-Inquiry .-box input::placeholder{
  color: var(--color-lightgray);
}

.p-Inquiry .-box input[type="radio"]{
  display: none;
}
.p-Inquiry .-box input[type="radio"] + label{
  position: relative;
  margin-right: 1em;
  padding-left: 24px;
}
.p-Inquiry .-box input[type="radio"] + label::before{
    content: "";
  width: 16px;
  height: 16px;
  background-color: white;
  margin-right: 0.5em;
  border-radius: 999px;
  outline: 1px solid var(--color-lightgreen);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.p-Inquiry .-box input[type="radio"]:checked + label::before{
    outline: 2px solid var(--color-palepink);
}
.p-Inquiry .-box input[type="radio"]:checked + label::after{
  content: "";
  width: 12px;
  height: 12px;
  background-color: var(--color-charcoal);
  border-radius: 999px;
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
}
.p-Inquiry .-box .-fbox{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.p-Inquiry .-box input[type="checkbox"]{
  display: none;
}
.p-Inquiry .-box input[type="checkbox"] + label{
  position: relative;
  margin-right: 1em;
  padding-left: 24px;
}
.p-Inquiry .-box input[type="checkbox"] + label::before{
    content: "";
  width: 16px;
  height: 16px;
  background-color: white;
  margin-right: 0.5em;
  border-radius: 999px;
  outline: 1px solid var(--color-lightgreen);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.p-Inquiry .-box input[type="checkbox"]:checked + label::before{
    outline: 2px solid var(--color-palepink);
}
.p-Inquiry .-box input[type="checkbox"]:checked + label::after{
  content: "";
  width: 12px;
  height: 12px;
  background-color: var(--color-charcoal);
  border-radius: 999px;
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
}
.p-Inquiry .checkbox-agree-wrap{
  text-align: center;
  }

.p-Inquiry .-box select{
  width: 100%;
}
.p-Inquiry .-box .select-warap{
  position: relative;
}
.p-Inquiry .-box .select-warap::after{
  content:"";
  width: 12px;
  height: 12px;
  border-bottom: 4px solid var(--color-charcoal);
  border-left: 4px solid var(--color-charcoal);
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  pointer-events:none
}

.p-Inquiry .-btn-warp{
  margin: 3em auto 2em auto;
}
.p-Inquiry .-btn-warp button{
  margin-left: auto;
  margin-right: auto;
  width: 280px;
    height: 3em;
  position: relative;
  background-color: var(--color-orangered);
  color: white;
  border-radius: 4px;
  line-height: 1;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
}
.p-Inquiry .-btn-warp button:hover{
  opacity: 0.8; 
}
/*---------------------------------------------
投稿一覧
p-sarchive
---------------------------------------------*/
.p-archive .-content-01 .-box{
  padding-bottom: 2em;
  margin-bottom: 2em;
  border-bottom: 1px solid var(--color-lightgray);
}
.p-archive .-content-01 .-box:last-of-type{
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}
 .p-archive .-content-01 .-box .-fbox{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
 }
 .p-archive .-content-01 .-box .-fbox .-date,
 .p-archive .-content-01 .-box .-fbox .-category{
      font-size: 0.8em;
      line-height: 1;
          margin-right: 0.5em;
 }
  .p-archive .-content-01 .-box .-fbox .-date{
    color: var(--color-orangered);
  }
    .p-archive .-content-01 .-box .-fbox .-category{
      background-color: var(--color-dustyteal);
      color: white;
      border-radius: 2px;
      padding: 0.25em;
    }
     .p-archive .-content-01 .-box .-fbox .-title{
      line-height: 1.3;
     }
   .p-archive .-content-02{
    margin-top:3em;
   }
   .p-archive .-content-02 .m-previous-next-arrows{
    margin: 0 auto;
   }
/*---------------------------------------------
物件一覧
p-worksarchive
---------------------------------------------*/
.p-worksarchive .-content-01{
   margin-top: 10.416666666666668vw; 
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    column-gap: 8%;
    row-gap: 8.849557522123893vw;   
}
 .p-worksarchive .-content-01 .-box{
  width: 46%;
}
@media screen and (min-width: 768px) {
  .p-worksarchive .-content-01{
    column-gap:4%;
    row-gap:5vw;
  }
.p-worksarchive .-content-01 .-box{
  width: 22%;
}
  }
@media screen and (min-width: 1240px) {
  .p-worksarchive .-content-01{
   margin-top: 80px;
   column-gap: 48px;
  row-gap: 60px;
}
.p-worksarchive .-content-01 .-box{
  width: 220px;
}
}

.p-worksarchive .-content-01 .-box .-img-wrap{
  width: 100%;
  height: 0;
  padding-top: 125%;
  position: relative;
  overflow: hidden;
}
.p-worksarchive .-content-01 .-box .-img-wrap .-img{
  position: absolute;
  width: 260%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  transition: 0.5s;
}
.p-worksarchive .-content-01 .-box:hover .-img-wrap .-img{
 transform: translate(-50%,-50%) scale(1.1, 1.1);
}
.p-worksarchive .-content-01 .-box .-txt-wrap .-title{
  height: 3.5em;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
}
@media screen and (min-width: 768px) {
  .p-worksarchive .-content-01 .-box .-txt-wrap .-title{
      font-size: 16px;
  }
}
.p-worksarchive .-content-01 .-box .-txt-wrap .-area{
  margin-top: 1em;
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
}
@media screen and (min-width: 768px) {
  .p-worksarchive .-content-01 .-box .-txt-wrap .-area{
  font-size: 15px;
}
}
.p-worksarchive .-content-01 .-box .-txt-wrap .-item{
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  font-size: 12px;
}
@media screen and (min-width: 768px) {
  .p-worksarchive .-content-01 .-box .-txt-wrap .-item{
  font-size: 15px;
}
}
.p-worksarchive .-content-01 .-box .-txt-wrap .-item .-icon{
  width: 28px;
  margin-right: 4px;
}
@media screen and (min-width: 768px) {
  .p-worksarchive .-content-01 .-box .-txt-wrap .-item .-icon{
  width: 32px;
}
}
 .p-worksarchive .-content-02{
    margin-top:3em;
   }
 .p-worksarchive .-content-02 .m-previous-next-arrows{
    margin: 0 auto;
   }
/*---------------------------------------------
ブログ一覧
p-blogarchive
---------------------------------------------*/

.p-blogarchive .-content-01{
   margin-top: 10.416666666666668vw; 
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    row-gap: 8.849557522123893vw;   
}
 .p-blogarchive .-content-01 .-box{
  width: 100%;
  background-color: white;
}
@media screen and (min-width: 768px) {
 .p-blogarchive .-content-01{
    flex-direction: row;
    column-gap:8%;
    row-gap:5vw;
  }
 .p-blogarchive .-content-01 .-box{
  width: 46%;
}
  }
@media screen and (min-width: 980px) {
 .p-blogarchive .-content-01{
    flex-direction: row;
    column-gap:5%;
    row-gap:5vw;
  }
 .p-blogarchive .-content-01 .-box{
  width: 30%;
}
  }
@media screen and (min-width: 1240px) {
 .p-blogarchive .-content-01{
   margin-top: 80px;
   column-gap: 32px;
  row-gap: 60px;
}
 .p-blogarchive .-content-01 .-box{
  width: 320px;
}
}

 .p-blogarchive .-content-01 .-box .-img-wrap{
  width: 100%;
  height: 0;
  padding-top: 70%;
  position: relative;
  overflow: hidden;
}
 .p-blogarchive .-content-01 .-box .-img-wrap .-img{
  position: absolute;
  width: 130%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  transition: 0.5s;
}
 .p-blogarchive .-content-01 .-box:hover .-img-wrap .-img{
 transform: translate(-50%,-50%) scale(1.1, 1.1);
}
 .p-blogarchive .-content-01 .-box .-txt-wrap{
  padding:0 1em 1em 1em;
  display: flex;
  flex-direction: column;
  height: 220px;
}
@media screen and (min-width: 768px) {
 .p-blogarchive .-content-01 .-box .-txt-wrap{
    height: 280px;
  }
}
 .p-blogarchive .-content-01 .-box .-txt-wrap .-date{
  color: var(--color-orangered);
  padding-left: 0.8em;
  border-left:1px solid var(--color-orangered) ;
  font-size: 13px;
}
 .p-blogarchive .-content-01 .-box .-txt-wrap .-title{
  height: 3em;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  margin-top: 0.5em;
}
 .p-blogarchive .-content-01 .-box .-txt-wrap .-txt{
  text-align: left;
  margin-top: 1em;
  font-size: 15px;
  line-height: 1.5;
}
 .p-blogarchive .-content-01 .-box .-txt-wrap .-btn{
  width: 100%;
  font-size: 16px;
  margin-top: auto;
  margin-bottom: 0;
}
 .p-blogarchive .-content-02{
    margin-top:3em;
   }
 .p-blogarchive .-content-02 .m-previous-next-arrows{
    margin: 0 auto;
   }
/*---------------------------------------------
投稿ページのレイアウト
single.php
---------------------------------------------*/
/*投稿ーページ トップとボトム*/
.p-article .-content-01{
  margin-bottom: 1.5em;
} 
.p-article .-content-01 .-fbox,
.p-article .-content-03 .-fbox .-box{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}
.p-article .-content-03 .-fbox .-box.-box-01{
  justify-content: flex-start;
}
.p-article .-content-03 .-fbox .-box.-box-01{
  margin-bottom: 0.5em;
}
.p-article .-content-03 .-fbox .-box.-box-02{
  justify-content: flex-end;
}
.p-article .-content-01 .-fbox,
.p-article .-content-03 .-fbox{
  border-bottom: 1px solid var(--color-charcoal);
  padding-bottom: 0.5em;
  margin-bottom: 0.5em;
}
.p-article .-content-01 .-fbox .-category,
.p-article .-content-01 .-fbox .-date,
.p-article .-content-03 .-fbox .-category,
.p-article .-content-03 .-fbox .-date,
.p-article .-content-03 .-fbox .-title{
  font-size: 0.8em;
  line-height: 1;
}
.p-article .-content-03 .-fbox .-title{
  margin-bottom: 0.25em;
}
.p-article .-content-01 .-fbox .-category,
.p-article .-content-03 .-fbox .-box .-category{
  background-color: var(--color-greige);
  color: white;
  padding: 0.25em 0.5em 0.25em 0.5em;
  white-space: nowrap;
}
@media screen and (min-width: 768px) {
  .p-article .-content-01 .-fbox .-category,
.p-article .-content-03 .-fbox .-box .-category{
  padding: 0.25em 2em 0.25em 0.5em;
}
}
.p-article .-content-01 .-fbox .-date,
.p-article .-content-03 .-fbox .-date{
  color: var(--color-orangered);
  line-height: 1;
  vertical-align: top;
}
.p-article .-content-01 .-title{
    font-size: 4.166666666666666vw;
    font-weight: 600;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 0.5em;
}
@media screen and (min-width: 768px) {
  .p-article .-content-01 .-title{
    font-size: 32px;
}
}
.p-article .-content-03 .-btn-wrap{
  margin-bottom: 4em;
}
.p-article .-content-03 .-fbox{
  margin-top: 3em;
}
.p-article .-content-03 .-fbox .-title{
  margin-left: 0.5em;
}


@media screen and (min-width: 768px) {
  .p-article .-content-03 .-fbox{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}
.p-article .-content-03 .-fbox .-box.-box-01{
  margin-bottom: 0;
}
  .p-article .-content-03 .-fbox .-date{
    margin-right: 2em;
  }
}

/*投稿ーページ snsシェア部分*/
.p-article .-content-02 .-snsbtns{
  text-align: center;
}
/*投稿ーページ コンテンツ部分*/

.p-article .-content-02{
  padding-bottom: 3em;
}

.editor-content p code,
.editor-content p img,
.editor-content p iframe,
.editor-content p object,
.editor-content figure img,
.editor-content figure iframe,
.editor-content figure video,
.editor-content figure audio,
.editor-content pre code {
  margin-bottom: 0;
}
.editor-content figure img{
  width: 100%;
}
.editor-content p,
.editor-content ul,
.editor-content ol,
.editor-content table,
.editor-content dl,
.editor-content blockquote,
.editor-content pre,
.editor-content code,
.editor-content img,
.editor-content picture img,
.editor-content figure,
.editor-content iframe,
.editor-content object,
.editor-content hr,
.editor-content video,
.editor-content audio {
  margin-bottom: 1.5em;
}

.editor-content h2,
.editor-content h3,
.editor-content h4,
.editor-content h5 {
  margin: 2em 0 1.5em;
  line-height: 1.5;
  font-weight: 600;
}
 
.editor-content h2 {
  font-size: 1.5em;
}
 
.editor-content h3 {
  font-size: 1.08em;
  text-align: center;
  color: white;
  background-color: var(--color-charcoal);
  padding: 0.25em;
}
 
.editor-content h4 {
  border-bottom: 1px solid var(--color-charcoal);
}
 .editor-content h5{
  position: relative;
  padding-left: 1.5em;
 }
.editor-content h5::before{
  content: "";
  width: 0.9em;
  height: 0.9em;
  background-color: var(--color-charcoal);
  position: absolute;
  left: 0;
  top:0.25em;
}

.editor-content ul:not([class]) {
  padding-left: 1.75em;
  list-style: none;
}
 .editor-content ul:not([class]) li{
  position: relative;
   font-size: 0.9em;
   line-height: 1.5;
 }
.editor-content ul:not([class]) li:before {
  content: "";
  background-color: var(--color-charcoal);
  border-radius: 50%;
  height: 0.9em;
  width: 0.9em;
  position: absolute;
  top: 0.25em;
  left: -1.5em;
  }
.editor-content ol:not([class]) {
  padding-left: 1.75em;
  counter-reset: my-counter;
  list-style: none;
   font-size: 0.9em;
    line-height: 1.5;
}
.editor-content ol:not([class]) li{
  position: relative;
}
.editor-content ol:not([class]) li:before {
  content: counter(my-counter);
  counter-increment: my-counter;
  background-color: var(--color-charcoal);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1.5em;
  width: 1.5em;
  color: #ffffff;
  font-size: 80%;
  line-height: 1;
  position: absolute;
  top: 0.25em;
  left: -2em;
}
.editor-content table th,
.editor-content table td{
  border: 1px solid var(--color-charcoal);
}
.editor-content img,
.editor-content iframe,
.editor-content object,
.editor-content video,
.editor-content audio {
  line-height: 1;
}
.editor-content img{
  height: auto;
}
.editor-content figure {
  max-width: 100%;
}
 
.editor-content iframe,
.editor-content object {
  width: 100%;
}
.editor-content .wp-block-buttons{
  width: 100%;
  display: flex;
  justify-content: center;
}
.editor-content .wp-block-button__link{
    height: 3em;
  position: relative;
    display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-orangered);
  color: white;
  margin: 2em auto 3em auto;
  text-align: center;
  line-height: 1;
  border-radius: 4px;
  padding: 0 2.5em;
    font-size: 0.9em;
}
 
.editor-content .wp-block-button__link::after{
    content:"";
  width: 22px;
  height: 12px;
    background: url(../img/icon-arrow-03.png) no-repeat;
  background-size: contain;
    transition: 0.3s;
  position: absolute;
  right: 0.5em;
  top: 50%;
  transform: translate(0,-50%);
}
.editor-content .wp-block-button__link:hover{
  opacity: 0.8;
}
.editor-content .wp-block-button__link:hover::after{
   transform: translate(45%,-50%);
}


/*ブロックエディタで反映できるスタイル*/
.has-black-color{
  color: var(--color-black);
}
.has-cyan-bluish-gray-color{
  color: var(--color-gray);
}
.has-white-color{
  color: white;
}
.has-pale-pink-color{
  color: var(--color-palepink);
}
.has-vivid-red-color{
  color: var(--color-orangered);
}
.has-luminous-vivid-orange-color{
  color: var(--color-orangered);
}
.has-luminous-vivid-amber-color{
  color:var(--color-lightgreen);
}
.has-light-green-cyan-color{
  color: var(--color-greige);
}
.has-vivid-green-cyan-color{
  color:var(--color-teal);
}
.has-pale-cyan-blue-color{
  color: var(--color-dustyteal);
}
.has-vivid-cyan-blue-color{
  color: var(--color-dustyteal);
}
.has-vivid-purple-color{
  color: var(--color-paleaqua);
}
.has-black-background-color{
background-color: var(--color-black);
}
.has-cyan-bluish-gray-background-color{
  background-color: var(--color-gray);
}
.has-white-background-color{
  background-color: white;
}
.has-pale-pink-background-color{
 color: var(--color-palepink);
}
.has-vivid-red-background-color{
  color: var(--color-orangered);
}
.has-luminous-vivid-orange-background-color{
  color: var(--color-orangered);
}
.has-luminous-vivid-amber-background-color{
  color:var(--color-lightgreen);
}
.has-light-green-cyan-background-color{
  color: var(--color-greige);
}
.has-vivid-green-cyan-background-color{
   color:var(--color-teal);
}
.has-pale-cyan-blue-background-color{
  color: var(--color-dustyteal);
}
.has-vivid-cyan-blue-background-color{
  color: var(--color-dustyteal);
}
.has-vivid-purple-background-color{
  color: var(--color-paleaqua);
}
.has-text-align-left{
  text-align: left;
}
.has-text-align-center{
text-align: center;
}
.has-text-align-right{
  text-align: right;
}


/*---------------------------------------------
投稿ページ 施工事例
single-works.php
---------------------------------------------*/
.p-works-post h1{
    font-size: 4.166666666666666vw;
    font-weight: 600;
  text-align: center;
  line-height: 1.5;
  padding: 0.5em;
  margin-top: 1em;
  margin-bottom: 0.5em;
  background-color: white;
}
@media screen and (min-width: 1240px) {
.p-works-post h1{
      margin-top: 0;
}  
}
@media screen and (min-width: 768px) {
.p-works-post .-title{
    font-size: 32px;
}  
}
 /* p-gallery */
 .p-works-post .p-gallery {
  overflow: hidden;
 }
  .p-works-post .p-gallery .js-slick-works-gallery .slick-slide .-img-wrap{
    padding-top: 60%;
    overflow: hidden;
  }
  .p-works-post .p-gallery .js-slick-works-gallery .slick-slide .-img-wrap img{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    }
.p-works-post .p-gallery .-thumbnail-wrap{
   margin: 10px -5px 0 -5px;
     padding-bottom: 18px;
}
@media screen and (min-width: 768px) {
  .p-works-post .p-gallery .-thumbnail-wrap{
     padding-bottom: 24px;
}
}
.p-works-post .p-gallery .-thumbnail-wrap li{
  transition: opacity .3s linear;
  margin: 0 5px;

}
.p-works-post .p-gallery .-thumbnail-wrap li.slick-current{
  filter: grayscale(80%);
}
.p-works-post .p-gallery .-thumbnail-wrap .-arrow-prev,
.p-works-post .p-gallery .-thumbnail-wrap .-arrow-next{
  display: block;
  width: 20px;
  height: 11px;
  background: url(../img/icon-arrow-02.png) no-repeat;
  background-size: contain;
  position: absolute;
  bottom: 0;
}
.p-works-post .p-gallery .-thumbnail-wrap .-arrow-prev{
  transform: rotate(180deg);
  right: 48px;
}
.p-works-post .p-gallery .-thumbnail-wrap .-arrow-next{
  right: 4px;
}
.p-works-post .p-gallery .-thumbnail-wrap img {
    width: 100%;
    height: 20vw;
    object-fit: cover;
}
@media screen and (min-width: 768px) {
  .p-works-post .p-gallery .-thumbnail-wrap .-arrow-prev,
.p-works-post .p-gallery .-thumbnail-wrap .-arrow-next{
    width: 26px;
  height: 14px;
}
.p-works-post .p-gallery .-thumbnail-wrap img {
    height: 100px;
}
}
.p-works-post .-content-02 .-box-01{
  margin-top: 3em;
  margin-bottom: 3em;
}
.p-works-post .-content-02 .-box-01 .-title{
  text-align: center;
      margin: 0 0 1.5em 0;
  font-size: 1.5em;
}
.p-works-post .-content-02 .-box-01 dl{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.p-works-post .-content-02 .-box-01 dl dt,
.p-works-post .-content-02 .-box-01 dl dd{
  font-weight: 400;
  font-size: 0.8em;
  line-height: 1.5;
  border-top: 1px solid var(--color-charcoal);
}
.p-works-post .-content-02 .-box-01 dl dt{
  width: 80px;
  position: relative;
  line-height: 1;
  padding: 0.6em 0 0.6em 0.5em;
}
.p-works-post .-content-02 .-box-01 dl dd a{
  color: var(--color-teal);
}
@media screen and (min-width: 768px) {
  .p-works-post .-content-02 .-box-01 dl dt{
  width: 120px;
}
}
.p-works-post .-content-02 .-box-01 dl dt::after{
  content:"";
  width: 1px;
  height: calc(100% - 6px);
  background-color: var(--color-charcoal);
  position: absolute;
  right: 0;
  top: 3px;
}
.p-works-post .-content-02 .-box-01 dl dd{
  width: calc(100% - 80px);
  padding: 0.25em 0 0.25em 1em;
}
@media screen and (min-width: 768px) {
  .p-works-post .-content-02 .-box-01 dl dd{
  width: calc(100% - 120px);
}
}
.p-works-post .-content-02 .-box-02{
  margin-bottom: 3em;
}
.p-works-post .-content-02 .-box-02 .-title{
  font-size: 1em;
  background-color: var(--color-orangered);
  color: white;
}
.p-works-post .-content-02 .-box-02{
  margin-bottom: 3em;
}
.p-works-post .-content-02 .-box-02 .-img-wrap{
  width: 100%;
  margin-bottom: 1em;
  text-align: center;
}
.p-works-post .-content-02 .-box-02 .-img-wrap img{
  width: 100%;
  margin-bottom: 0;
}
.p-works-post .-content-02 .-box-02 .-img-wrap img.-vertical-img{
  width: 60%;
}
.p-works-post .-content-02 .-box-02 .-txt{
  margin-bottom: 3em;
}
.p-works-post .-content-02 .-iframe{
  position: relative;
  padding-top: 56.25%;
      overflow: hidden;
      margin-bottom: 2em;
} 
.p-works-post .-content-02 .-iframe:last-of-type{
  margin-bottom: 0;  
}
.p-works-post .-content-02 .-iframe iframe{
  position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/*---------------------------------------------
検索結果
search.php
---------------------------------------------*/
.p-search .-content-01{
  margin-bottom: 2em;
}
.p-search .-content-01 .-txt{
  text-align: center;
  font-size: 0.8em;
  color: var(--color-teal);
}
.p-search .-content-02{
  margin-bottom: 2em;
}
.p-search .-content-02 h2{
  font-weight: 600;
  color: var(--color-charcoal);
}
.p-search .-content-02 .-box{
  margin-bottom: 1em;
}
.p-search .-content-02 .-txt-01{
  font-size: 0.7em;
  color: var(--color-teal);
}
.p-search .-content-02 .-txt-02{
  text-align: center;
  color: var(--color-teal);
}
.p-search .m-serchWP{
  text-align: center;
  width: 100%;
  max-width: 340px;
  margin: 1em auto 0 auto;
}