@charset "utf-8";
/*
Theme Name: heartsfield
Description: Original template for HEARTS FIELD
Version: 1.3
*/

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}
img,abbr,acronym,fieldset{border:0;}
*,*:before,*:after{box-sizing:border-box}

html{
  scroll-behavior: smooth;
}

body{
  font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  background: #0C0C0C;
  overflow-x: hidden;
}
body#toppage{
  background: #151515;
}

img{
  max-width: 100%;
  height: auto;
}

.en{
  font-weight: 400;
  font-family: "Oswald", sans-serif;
  letter-spacing: .05em;
}

/* LINK
------------------------------------------------------------*/
a{
  color: #fff;
  text-decoration: none;
}
a:hover{
  opacity: .7;
}
a:active,
a:focus,
input:active,
input:focus{
  outline: none;
}



/* HEADER + MENU + MODAL + FOOTER
------------------------------------------------------------*/
#header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  z-index: 100;
}

#panel{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#nav a{
  font-size: 15px;
  font-weight: 400;
  font-family: "Oswald", sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: transparent;
  transition: .5s;
}
#nav a:hover{
  opacity: 1;
  text-decoration-color: #fff;
}
#panel > ul{
  display: flex;
}
#panel li{
  position: relative
}

#sns{
  padding: 40px 0;
  position: relative;
  display: flex;
  justify-content: center;
  background: #151515;
}
#sns:after{
  position: absolute;
  top: calc(50% - 64px);
  left: 50%;
  content: '';
  width: 1px;
  height: 128px;
  background: #737373;
}
#sns li{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 170px;
  height: 128px;
  font-size: 14px;
  text-align: center;
}
#sns li:first-of-type{
  width: 180px;
}
#sns a{
  padding: 10px 20px;
}

#sns img{
  margin: auto auto 20px;
  display: block;
}

#footer{
  width: 100%;
  aspect-ratio: 1 / .351;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
  background: url(images/bgFooter.jpg) no-repeat 50% 50% / cover;
}
#footer a{
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: transparent;
  transition: .5s;
}
#footer a:hover{
  opacity: 1;
  text-decoration-color: #fff;
}
#copyright{
  font-size: 12px;
  font-family: "Inter", sans-serif;
  font-weight: 400 !important;
}

.meta-links{
  padding: 25px 0 130px;

}
.meta-links a{
  margin: 0 10px;
  font-family: "Inter", sans-serif !important;
  font-weight: 400 !important;
  font-size: 15px;
}


@media screen and (min-width: 841px){
  #menu,
  #sp-menu{
    display: none;
  }

  /* HEADER */
  #toppage #header{
    padding: 30px 40px 0;
  }
  #header{
    padding: 10px 40px;
  }
  #header #logo{
    padding-top: 5px;
  }
  #toppage #header #logo{
    opacity: 0;
  }
  #toppage #header #logo img{
    width: 120px;
  }
  #toppage #header.is-visible #logo{
    opacity: 1;
  }
  /* MAIN NAVI */
  #header.is-visible #panel{
    justify-content: flex-end;
  }
  #panel > ul > li{
    margin: 0 0 0 30px;
    line-height: 27px;
    height: 27px;
  }
}

@media screen and (max-width: 940px){
  #header{
    padding: 30px 10px 0;
  }
}

@media screen and (max-width: 840px){
  .js-scroll-prevent{
    overflow: hidden;
  }

  #header{
    padding: 20px;
  }

  #logo img{
    width: 95px;
  }

  /* MENU */
  #menu{
    position: fixed;
    top: 27px;
    right: 20px;
    width: 80px;
    height: 40px;
    text-align: center;
    cursor: pointer;
    z-index: 1000;
  }
  #menu span{
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    content: '';
    width: 40px;
    height: 1px;
    background: #D9D9D9;
  }
  #menu:before,
  #menu:after{
    display: block;
    position: absolute;
    top: 10px;
    right: 0;
    width: 40px;
    height: 1px;
    content: '';
    background: #D9D9D9;
    transition: .5s ease-in-out;
  }
  #menu:after{
    top: 20px;
  }
  #menu.is-open span{
    display: none;
  }
  #menu.is-open:before{
    transform: rotate(45deg);
    top: 20px;
  }
  #menu.is-open:after{
    transform: rotate(-45deg);
    top: 20px;
  }

  #panel{
    display: block;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    padding: 95px 10px 0 0;
    opacity: 0;
    background: #000;
    overflow: scroll;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
    transform: translateY(-100%);
    transition: transform .5s ease, opacity .5s ease;
    pointer-events: none;
  }
  #panel.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  #nav{
    width: 100%;
    padding-left: 50px;
    flex-wrap: wrap;
  }
  #nav > li{
    width: 100%;
    margin-bottom: 20px;
  }
  #nav > li > a{
    display: block;
    font-size: 20px;
  }
  #sp-menu{
    width: 100%;
    padding-left: 50px;
  }
  #sp-menu .sns-link a{
    display: inline-block;
    margin: 50px 20px 0 0;
  }
  #sp-menu .meta-links{
    padding: 30px 0;
  }
  #sp-menu .meta-links a:first-of-type{
    margin-left: 0;
  }

  #sns{
    padding: 35px 0;
  }

  /* FOOTER */
  #footer{
    aspect-ratio: 1 / 1.312;
    background-image: url(images/bgFooter-sp.jpg)
  }
}


@media screen and (max-width: 374px){
  .shop-name{
    padding-left: 0px;
  }
  .shop-name:after,
  .shop-name:before{
    right: 5px;
  }
}



/* TOPPAG
------------------------------------------------------------*/
#toppage section{
  position: relative;
  z-index: 10;
}

#toppage section .inner{
  position: relative;
  height: 100%;
  display: flex;
  z-index: 11;
}

#toppage section p{
  line-height: 1.875;
}

#toppage section p.en{
  font-weight: 300;
  font-size: 13px;
  line-height: 1.54;
  color: #9A9A9A;
}

#toppage :where(figure),
.custom-post :where(figure){
  margin-bottom: 0;
}

@media screen and (max-width: 840px){
  #toppage section .inner{
    flex-wrap: wrap;
    align-items: flex-start;
  }
}

/* FV
------------------*/
#fv{
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
}
#fv video{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0
}
#scroll{
  position: absolute;
  bottom: -40px;
  left: 50px;
  transition: .5s;
  cursor: pointer;
  z-index: 101;
}
#scroll > div{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#scroll p{
  color: #fff;
  font-size: 12px;
  writing-mode: vertical-rl;
}
#scroll .line-down-inner{
  position: relative;
  margin-top: 10px;
  height: 106px;
  overflow: hidden;
}
#scroll .line-down{
  position: absolute;
  left: calc(50% - 1px);
  width: 1px;
  height: 106px;
  display: block;
  background: #fff;
  animation: lineDown 3s ease-out infinite normal;
}
@keyframes lineDown{
  0%{
    transform: translateY(-106px);
    opacity: 0;
  }
  50%{
    opacity: 1;
  }
  to{
    transform: translateY(106px);
    opacity: 0;
  }
}


@media screen and (max-width: 840px){
  #scroll{
    display: none;
  }
}

/* ABOUT
------------------*/
#toppage #about{
  width: 100%;
  aspect-ratio: 1 / .6;
  background: url(images/bgAbout.jpg) no-repeat 50% 50% / cover;
}

#toppage #about > .wp-block-group__inner-container{
  height: 100%;
}

#toppage #about h2.heading{
  font-size: 200px;
  writing-mode: vertical-rl;
  color: rgba(255, 255, 255, .2);
}
.about-txt h3{
  margin-bottom: 20px;
  font-size: 29px;
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1.6;
}
.about-txt .en{
  margin-top: 20px;
}

@media screen and (min-width: 841px){
  #toppage #about .inner{
    align-items: center;
  }
  #toppage #about .inner > div{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 95px 0 140px;
  }
  .about-txt{
    max-width: 350px;
  }
}
@media screen and (max-width: 840px){
  #toppage #about{
    aspect-ratio: 1 / 1.808;
    background-image: url(images/bgAbout-sp.jpg);
  }
  #toppage #about .inner > div{
    margin: auto;
    height: 100%;
    width: 22em;
    display: flex;
    align-items: center;
  }
  #toppage #about h2.heading{
    position: absolute;
    left: -60px;
    height: 100%;
    display: flex;
    justify-content: center;
    font-size: 160px;
  }
}
@media screen and (max-width: 374px){
  #toppage #about h2.heading{
    font-size: 120px;
  }
}


/* BLOG(NEWS) + OUR WORK
------------------*/
/* BLOG(NEWS) */
#blog{
  padding: 85px 0 100px;
}
#blog-slide .slick-slide{
  transition: .3s;
}
#blog-slide .slick-slide .img-wrap,
#index .img-wrap{
  aspect-ratio: 1 / .684;
  width: 100%;
  height: auto;
  object-fit: cover;
}
#custom-work .img-wrap{
  aspect-ratio: 1 / 1;
}

.blog-article h3{
  margin: 20px 0 5px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.78;
}
.date{
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  color: #737373;
}
.cat{
  padding: 4px 26px;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 11px;
  line-height: 2.18;
  border: 1px solid #fff;
  transition: .5s;
}
.cat:hover{
  color: #0c0c0c;
  background: #fff;
}

#work{
  position: relative;
  padding: 75px 0 70px;
  background: #0C0C0C;
}
#work > div{
  position: relative;
  z-index: 10;
}
#toppage #work:after{
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(50% + 540px);
  height: 100%;
  content: '';
  background: #151515;
}
#work .slick-slide{
  width: 287px;
  margin: 0 5px 30px 0;
}
#work .slick-slide figure a{
  aspect-ratio: 1 / 1;
}

@media screen and (min-width: 841px){
  /* BLOG(NEWS) + OUR WORK */
  .heading-wrap > div{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .heading-wrap h2{
    font-size: 36px;
  }
  .slide,
  #work-slide > .wp-block-group__inner-container{
    padding: 65px 0 95px;
    margin-left: auto;
  }
  #blog-slide .slick-list{
    min-height: 360px;
  }
  #blog-slide .slick-slide{
    width: 354px;
    margin-left: 30px;
  }
  #work-slide > .wp-block-group__inner-container{
    padding: 50px 0 75px;
  }
}

@media screen and (min-width: 1241px){
  .slide,
  #work-slide > .wp-block-group__inner-container{
    width: calc(50% + 600px);
  }
}

@media screen and (max-width: 1240px){
  .slide,
  #work-slide > .wp-block-group__inner-container{
    padding-left: 30px;
    width: 100%;
  }
  #toppage #work:after{
    width: 80%;
  }
}

@media screen and (max-width: 840px){
  #blog{
    padding: 70px 0;
  }
  .heading-wrap h2{
    font-size: 30px;
  }
  .blog-article .date{
    margin-bottom: 10px;
  }
  .slide,
  #work-slide > .wp-block-group__inner-container{
    padding: 35px 0 95px 8.5%;
  }
  #blog-slide .slick-slide{
    width: 260px;
    margin-left: 30px;
  }
  #work{
    padding: 55px 0 48px;
  }
  #toppage #work:after{
    width: 100%;
  }
  #work-slide > .wp-block-group__inner-container{
    padding-bottom: 0px;
  }
  #work .slick-slide{
    width: 230px;
    padding-bottom: 60px;
  }
}


/* SELECT ITEM + BRAND
------------------*/
#select{
  position: relative;
  padding-bottom: 40px;
}
#select picture,
#brand picture{
  line-height: 0;
}
#select picture,
#select .select-txt{
  position: relative;
  z-index: 10;
}
#select:after{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 30vw;
  content: '';
  background: #0C0C0C;
}
#select img{
  box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
}
#brand{
  padding-bottom: 115px;
  background: #0C0C0C;
}
#select h3,
#brand h3{
  margin: 30px 0 20px;
  font-size: 26px;
  font-weight: inherit;
  letter-spacing: .05em;
}
#brand .btn{
  margin-top: 30px;
}

@media screen and (min-width: 841px){
  #select > div,
  #brand > div{
    display: flex;
  }
  #brand > div{
    justify-content: flex-end;
  }
  #select img,
  #brand img{
    width: calc(50vw + 380px);
  }
  #select .select-txt{
    padding-top: 7.5vw;
    margin-left: -235px;
  }
  #brand .brand-txt{
    padding-top: 7.5vw;
    margin-right: -330px;
    z-index: 10;
  }
}

@media screen and (max-width: 1200px){
  #select .select-txt{
    padding-right: 30px;
    margin-left: -370px;
  }
  #brand .brand-txt{
    padding-left: 30px;
    margin-right: -450px;
  }
}

@media screen and (max-width: 840px){
  #select img,
  #brand img{
    width: 91.2%;
  }
  #select .select-txt,
  #brand .brand-txt{
    padding: 0 8.5%;
    margin: -50px auto 20px;
  }
  #select:after{
    height: calc(100% - 35vw);
  }
  #select h3,
  #brand h3{
    font-size: 22px;
    line-height: 1.5;
  }
  #brand > div{
    display: flex;
    flex-direction: column;
  }
  #brand picture{
    order: 0;
    text-align: right;
  }
  #brand .brand-txt{
    order: 1;
    margin: -50px auto 20px;
  }
}


/* ORIGINAL MARK
------------------*/
#mark{
  padding: 110px 0 100px;
  background: #0C0C0C;
}

#marks > div{
  width: 100%;
  padding-top: 75px;
  display: flex;
  justify-content: space-between;
}

#marks > div > div{
  width: 16%;
  max-width: 182px;
}

@media screen and (max-width: 840px){
  #mark{
    padding: 55px 0 75px;
  }
  #marks *{
    margin: 0 !important;
  }
  #mark h2{
    letter-spacing: -.01em;
    text-wrap: nowrap;
  }
  #marks > div{
    padding-top: 35px;
    flex-wrap: wrap;
  }
  #marks > div > div{
    width: 48%;
    margin-bottom: 12px !important;
  }
  #mark .sp-btn{
    padding-top: 15px;
  }
}
@media screen and (max-width: 374px){
  #mark h2{
    text-wrap: wrap;
  }
}


/* SHOP IMAGE
------------------*/
#shop{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / .257;
}

#shop:before{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  content: '';
  height: 100vh;
  z-index: -100;
}
#shop.show-bg:before{
  background: url(images/imgShop.jpg) no-repeat 50% 50% / cover;
}
@media screen and (max-width: 840px){
  #shop{
    aspect-ratio: 1 / .613;
  }
}



/* GALLERY
------------------*/
#gallery{
  padding: 110px 1px 8px;
  background: #0C0C0C;
}

#gallery-thumb > div{
  padding-top: 60px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

#gallery-thumb .img-wrap{
  width: 33%;
  margin-top: 0.357vw;
  aspect-ratio: 1 / .6;
}

#gallery-thumb figure img{
  width: 100%;
  max-width: initial;
}

@media screen and (max-width: 840px){
  #gallery{
    padding: 70px 0 45px;
  }
  #gallery-thumb *{
    margin: 0 !important;
  }
  #gallery-thumb > div{
    padding-top: 30px;
  }
  #gallery-thumb .img-wrap{
    width: 100%;
    margin-bottom: 5px !important;
  }
  #gallery .sp-btn{
    padding-top: 25px;
  }
  #gallery-thumb{
    width: 100vw;
    margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  }
  #gallery-thumb figure img{
    max-width: 100%;
  }
}

/* Original Fragrance + GIRLISH
------------------*/
.link-banner{
  position: relative;
  aspect-ratio: 1 / .271;
  box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
}
#fragrance .link-banner{
  margin-bottom: 10px;
}
.link-banner img{
  width: 100%;
  max-width: initial;
}
.link-banner h2{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 120px;
  font-weight: 400;
  font-family: "Six Caps", sans-serif;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
}
.link-banner:hover a{
  opacity: 1;
}
.link-banner:hover h2{
  color: #fff;
}

@media screen and (max-width: 840px){
  .link-banner{
    aspect-ratio: 1 / .613;
  }
  .link-banner h2{
    font-size: 70px;
  }
}

/* LOCATION
------------------*/
#location{
  padding: 120px 0;
  display: flex;
  background: #000 url(images/bgBlack.png) no-repeat 0 0 / cover;
}
#location > div{
  display: flex;
  width: 100%;
}
#location h2{
  margin-bottom: 60px;
}

#location p:first-of-type{
  margin: 35px 0 15px;
  font-size: 15px;
  line-height: 1.8;
}

#location p:last-of-type{
  font-size: 14px;
  line-height: 1.78;
}

@media screen and (min-width: 841px){
  #location > div{
    justify-content: flex-end;
  }
  .location-map img{
    width: calc(50vw + 140px);
  }
  .location-txt{
    margin-left: calc((100% - 1200px) / 2);
    margin-right: auto;
    padding-right: 20px;
  }
}

@media screen and (max-width: 1200px){
  .location-txt{
    margin-left: 30px;
  }
}

@media screen and (max-width: 840px){
  #location{
    padding: 70px 0 75px;
    background: #0C0C0C;
  }
  #location > div{
    flex-direction: column;
  }
  #location h2{
    margin-bottom: 35px;
    padding-left: 8.5%;
    font-size: 30px;
  }
  .location-map{
    order: 0;
  }
  .location-map img{
    width: 100%;
    max-width: initial;
  }
  .location-txt{
    order: 1;
    margin: 0;
    padding: 45px 8.5% 0;
  }
}


/* COMMON
------------------------------------------------------------*/
#content{
  padding: 95px 20px 120px;
}
.inner{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

@media screen and (max-width: 840px){
  #content.inner{
    padding: 80px 20px;
  }
  .inner{
    padding: 0 8.5%;
  }
}

.img-wrap,
#work-slide figure a,
#gallery-thumb figure a{
  width: 100%;
  overflow: hidden;
}

.img-wrap img,
#work-slide img,
#gallery-thumb img{
  filter: saturate(0%);
  transition: all .5s ease-out
}
.related .img-wrap img,
.related #work-slide img{
  filter: none;
}
.img-wrap:hover img,
#work-slide figure:hover img,
#gallery-thumb figure:hover img{
  transform: scale(1.05);
  filter: none;
  opacity: 1;
}
.slick-active .img-wrap img,
#work-slide .slick-active img{
  filter: none;
}

.slide a:hover,
#work-slide a:hover,
#marks a:hover,
#custom-work a:hover,
.blog-article a:first-of-type:hover{
  opacity: 1;
}

.animated-text{
  opacity: 0;
  transform: translateY(50px);
  transition: all .6s
}
.animated-text.in-view {
  opacity: 1;
  transform: translateY(0);
}

p{
  line-height: 1.5;
}

h2.heading{
  font-size: 150px;
  font-weight: 400;
  font-family: "Six Caps", sans-serif;
  text-transform: uppercase;
  line-height: 1;
  color: rgba(255, 255, 255, .5);
}

.btn a{
  position: relative;
  width: 250px;
  max-width: 90%;
  display: inline-block;
  line-height: 50px;
  font-weight: 400;
  font-family: "Oswald", sans-serif;
  font-size: 14px;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: center;
  transition: .5s;
  border: 1px solid #fff;
}

.btn:not(.btn-arrow):hover a{
  color: #0c0c0c;
  background: #fff;
}

.btn-arrow a{
  padding-right: 47px;
  width: 140px;
  line-height: 2.5;
  text-align: right;
  border: 0;
}

.btn-arrow a:before,
.btn-arrow a:after{
  position: absolute;
  top: 20px;
  right: 0;
  height: 1px;
  background: #fff;
  content: '';
}

.btn-arrow a:before{
  width: 32px;
  transform: translateY(-50%);
}

.btn-arrow a:after{
  width: 12px;
  transform: translateY(-50%) rotate(30deg);
  transform-origin: right center;
}

@media screen and (min-width: 841px){
  .sp-show{
    display: none;
  }
}

@media screen and (max-width: 840px){
  body{
    font-size: 15px;
  }
  .pc-show{
    display: none;
  }
  .sp-btn{
    padding: 32px 8.5% 0 0;
    text-align: right;
  }
  h2.heading{
    font-size: 83px;
  }
}


/* page + post
------------------*/
#bread{
  margin-bottom: 50px;
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  text-transform: uppercase;
}
#bread li{
  position: relative;
  padding: 0 20px 0 0;
  margin-right: 10px;
}
#bread li:after{
  content: '';
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 10px;
  border-top: solid 1px #fff;
  border-right: solid 1px #fff;
  transform: rotate(45deg);
}
#bread li:last-child:after{
  content: none;
}
#bread a{
  color: #737373;
}
@media screen and (max-width: 840px){
  #bread{
    margin-bottom: 30px;
  }
}

/* archive
------------------*/
#index{
  padding-bottom: 80px;
}
#index > div{
  margin-bottom: 45px;
}

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

#post{
  max-width: 800px;
  margin: auto;
}

.page{
  font-size: 16px;
}

.page h1{
  margin-bottom: 75px;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.53;
  text-align: center;
}


@media screen and (min-width: 841px){
  #index > div{
    margin-bottom: 50px;
  }
  .col3 > *{
    width: 31%;
  }

  .col3:after{
    content: '';
    width: 31%;
  }
}

@media screen and (max-width: 840px){
  #index{
    padding-bottom: 20px;
  }
  .page h1{
    margin-bottom: 40px;
    font-size: 30px;
  }
}

.single-header h1{
  font-size: 26px;
  font-weight: 500;
  line-height: 1.6;
}

.meta{
  margin-bottom: 40px;
}
.meta .date{
  margin-bottom: 10px;
}

@media screen and (min-width: 841px){
  .meta{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .meta .date{
    margin-bottom: 0;
  }
}

.article .attachment-post-thumbnail{
  margin-bottom: 40px;
}

.article p{
  margin-bottom: 30px;
  font-size: 15px;
  line-height: 1.93;
}

.article p:has(+ figure),
.article p:has(+ .img-wrap){
  margin-bottom: 40px;
}

.article h2.wp-block-heading{
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.8;
}

.article h3.wp-block-heading{
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.8;
}

.article h4.wp-block-heading{
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
}

.article :where(.wp-block-columns.is-layout-flex.gap20){
  gap: 20px;
}

ul.wp-block-list{
  margin: 0 0 1em;
  list-style: disc;
}

.wp-block-list li{
  margin: 0 0 10px 20px;
  line-height: 1.6;
}

.article ol li{
  margin: 0 0 10px 20px;
  padding-left: 5px;
}

.wp-caption,
iframe{
  max-width: 100%;
}

th,
td{
  padding: 10px;
  line-height: 1.4;
  border: 1px solid #fff;
}


.tbl dt{
  font-weight: 700;
  border-top: 1px solid #737373;
}

.tbl dt:first-of-type{
  border: 0;
}

.tbl p:not(:last-of-type){
  margin-bottom: 25px;
}

@media screen and (min-width: 841px){
  .tbl{
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0;
    width: fit-content;
    margin: auto;
    line-height: 1.56;
    border-bottom: 1px solid #737373;
  }

  .tbl dt{
    padding: 20px 40px 20px 0;
    grid-column: 1;
  }
  .tbl dd{
    padding: 20px 0;
    grid-column: 2;
    border-top: 1px solid #737373;
  }
  .tbl dd:first-of-type{
    border: 0;
  }
}

@media screen and (max-width: 840px){
  .tbl dt{
    padding-top: 15px;
  }
  .tbl dd{
    padding: 0 0 15px 12px;
  }
  .article p:has(+ figure),
  .article p:has(+ .img-wrap){
    margin-bottom: 30px;
  }
}


/* pagination
------------------*/
.post-count-display{
  font-size: 14px;
  text-align: center;
}
.pagination{
  position: relative;
  display: flex;
  justify-content: center;
}
.pagination li{
  margin: 10px;
}
.pagination li a,
.pagination li span{
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
}
.pagination li.current span{
  border: 1px solid #fff;
}
.pagination li.prev{
  margin-right: 30px;
}
.pagination li.next{
  margin-left: 30px;
}
.pagination li.inactive{
  opacity: .4;
  pointer-events: none;
}
.pagination li.next a,
.pagination li.prev a{
  width: auto;
  font-size: 14px;
}
.pagination li.prev a{
  padding: 0 0 0 47px;
}
.pagination li.prev a:before{
  left: 0;
  right: auto;
}
.pagination li.prev a:after{
  left: 0;
  right: auto;
  width: 12px;
  transform: translateY(-50%) rotate(-30deg);
  transform-origin: left center;
}

@media screen and (max-width: 840px){
  .pagination li.prev{
    position: absolute;
    width: 40%;
    left: 0;
    bottom: -40px;
    text-align: right;
  }
  .pagination li.next{
    position: absolute;
    width: 40%;
    right: 0;
    bottom: -40px;
  }
}



/* CUSTOM POST WORK
------------------*/
#custom-work{
  margin: auto;
  padding-bottom: 10px;
  max-width: 1000px;
}
.custom-post h1{
  margin-bottom: 60px;
  font-size: 36px;
  text-align: center;
}

#custom-work > a{
  margin-bottom: 60px;
}

#custom-work h3{
  margin-top: 10px;
  font-size: 14px;
  font-weight: 500;
}

#work-title{
  position: relative;
  width: 100vw;
  aspect-ratio: 1 / .25;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  line-height: 1;
}
#work-title:after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(21, 21, 21, .7);
}
#work-title img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: initial;
  object-fit: cover;
  aspect-ratio: 1 / .25;
}
#work-title h1{
  position: relative;
  padding: 0 20px;
  font-size: 36px;
  font-weight: 500;
  text-align: center;
  color: #D9D9D9;
  z-index: 10;
}
.work-post .article{
  padding-top: 60px;
}
.work-post h2.title{
  font-size: 26px;
  font-weight: 500;
}
.work-post .date{
  margin-bottom: 40px;
}

.custom-post #gallery-thumb{
  padding-bottom: 90px;
}


@media screen and (max-width: 840px){
  #custom-work > a{
    margin-bottom: 40px;
  }
  #work-title,
  #work-title img{
    aspect-ratio: 1 / .667;
  }
  #work-title h1{
    font-size: 30px;
  }
  .work-post h2.title{
    font-size: 18px;
  }
}


/* ABOUT US
------------------*/
#aboutpage{
  padding-top: 100px;
}
#about-page-fv{
  display: flex;
  aspect-ratio: 1 / .429;
  text-align: center;
  background: url(images/aboutPageBg1.jpg) no-repeat 50% 50% / cover;
}
#about-page-fv > div{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#about-page-fv h1{
  margin-bottom: 75px;
  font-size: 30px;
  text-transform: uppercase;
}
#about-page-fv h2{
  margin-bottom: 22px;
  font-size: 29px;
  font-weight: 500;
}
#about-page-fv p{
  font-size: 14px;
  line-height: 2;
}
#about-page-2{
  background: url(images/aboutPageBg2.jpg) no-repeat 50% 0 / 1400px auto;
}
#about-page-2 h2,
#about-page-4 h2{
  margin-bottom: 25px;
  font-size: 120px;
  font-weight: 400;
  font-family: "Six Caps", sans-serif;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .2);
}
#about-page-2 p,
#about-page-3 p{
  margin-bottom: 30px;
  font-size: 16px;
  line-height: 1.7;
}
#about-page-2 em{
  letter-spacing: -.13em;
}
#about-page-3{
  margin-top: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / .429;
  background: url(images/aboutPageBg3.jpg) no-repeat 100% 0 / auto 100%;
}

#about-page-3 > div{
  width: 100%;
}

#about-page-4{
  padding-top: 120px;
  padding-bottom: 120px;
}
#about-page-4 h2{
  margin-bottom: 15px;
}
#about-page-4 p{
  line-height: 2;
}



@media screen and (min-width: 841px){
  #about-page-2 .inner{
    position: relative;
    padding-top: 90px;
    padding-bottom: 380px;
  }
  #about-page-2 figure{
    position: absolute;
    top: 250px;
    right: 20px;
  }
  #about-page-2 figure:nth-of-type(2){
    right: calc(50% - 107px);
    top: auto;
    bottom: -5px;
  }
  #about-page-3 .inner > div,
  #about-page-4 .inner > div{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

@media screen and (max-width: 840px){
  body#about .inner{
    padding-right: 5.3%;
    padding-left: 5.3%;
  }
  #about-page-fv{
    aspect-ratio: 1 / 1.333;
    background-image: url(images/aboutPageBg1-sp.jpg);
  }
  #about-page-fv h1{
    margin-bottom: 25px;
  }
  #about-page-fv h2{
    line-height: 1.4;
  }
  #about-page-2 h2,
  #about-page-4 h2{
    font-size: 83px;
    line-height: 1;
  }
  #about-page-2{
    padding-top: 60px;
    background: url(images/aboutPageBg2-sp.jpg) no-repeat 50% 0 / 100% auto;
  }
  #about-page-2 h2{
    margin-bottom: 35px;
  }
  #about-page-2 p{
    font-size: 15px;
    line-height: 1.93;
  }
  #about-page-2 figure{
    padding-top: 30px;
    width: 50%;
  }
  #about-page-2 figure:nth-of-type(2){
    margin-left: 40%;
    width: 34%;
  }
  #about-page-3{
    margin-top: 70px;
    padding-bottom: 80px;
    background: url(images/aboutPageBg3-sp.jpg) no-repeat 50% 28vw / 100% auto;
  }
  #about-page-3 p{
    margin-top: 60px;
    font-size: 15px;
  }
  #about-page-4{
    padding: 50px 0 90px;
  }
  #about-page-4 .inner > div{
    display: flex;
    flex-direction: column;
  }
  #about-page-4 .about-page-4-txt{
    order: 1;
  }
  #about-page-4 .about-page-4-img{
    order: 0;
  }
}


/* hidden */
#nav #menu-item-19,
#nav #menu-item-138,
#blog,
#work {
  display: none;
}