@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap');
/*-----------------------------------------------------

  Works CSS
  [LastUpDate:2021.10.01]
  
  - Page Title
  - About Top
  - Works Area

/*'Klee One'
-----------------------------------------------------*/
/*-----------------------------------------------------

  Page Title

-----------------------------------------------------*/
body.page #wrapper .pagetit-area .cat-area .cat-tit:before {
  background: url(../img/works/cmn_pagetit_icon.png) no-repeat top center;
  background-size: contain;
}


/*-----------------------------------------------------

  Tabs

-----------------------------------------------------*/
#wrapper .works-tabs {
  margin: 0 12px;
  font-family: 'Lora', serif;
}

#wrapper .works-tabs .works-tab-btn {
  display: none;
}

#wrapper .works-tabs .works-tab-pulldown {
  height: 45px;
  color: #523e07;
  font-size: 1.8rem;
  width: 100%;
  background: url("../img/cmn/cmn_pulldown_bg.png") no-repeat right 13px center;
  background-size: 10px auto;
  padding-left: 20px;
  margin-bottom: 45px;
  text-align: left;
  border-top: 1px solid #cbc7ba;
  border-bottom: 1px solid #cbc7ba;
  font-family: 'Lora', serif;
}

/*414px以上*/
@media only screen and (min-width: 414px) {
  #wrapper .works-tabs .works-tab-pulldown {
    font-size: 1.8rem;
  }
}

/*768px以上*/
@media only screen and (min-width: 768px) {
  #wrapper .works-tabs {
    margin: 0 auto 45px auto;
    width: calc(89.37198vw + 14px);
  }
  #wrapper .works-tabs .works-tab-pulldown {
    display: none;
  }
  #wrapper .works-tabs .works-tab-btn {
    display: flex;
    justify-content: space-between;
  }
  #wrapper .works-tabs .works-tab-btn li {
    width: calc((100% - (1.2931034% * 5)) / 6);
  }
  #wrapper .works-tabs .works-tab-btn li a {
    display: flex;
    width: 100%;
    justify-content: space-around;
    align-items: center;
    position: relative;
    background: url("../img/works/cmn_tab_bg.png") top center;
    background-size: cover;
    height: 40px;
    border-radius: 2.5px;
    text-decoration: none;
    color: #ffffff;
    transition: all 0.5s;
  }
  /*Current All*/
  #wrapper.all .works-tabs .works-tab-btn li.cat-all a {
    background: url("../img/works/cmn_tab_current_bg.png") top center;
    background-size: cover;
    color: #523e07;
  }
  #wrapper.all .works-tabs .works-tab-btn li.cat-all a:after {
    content: "";
    display: block;
    height: 8.5px;
    width: 10.5px;
    position: absolute;
    bottom: -8.5px;
    background: url("../img/works/cmn_tab_current_arrow.png") top center;
    background-size: 10.5px 8.5px;
  }
  /*Current Logo*/
  #wrapper.logo .works-tabs .works-tab-btn li.cat-logo a {
    background: url("../img/works/cmn_tab_current_bg.png") top center;
    background-size: cover;
    color: #523e07;
  }
  #wrapper.logo .works-tabs .works-tab-btn li.cat-logo a:after {
    content: "";
    display: block;
    height: 8.5px;
    width: 10.5px;
    position: absolute;
    bottom: -8.5px;
    background: url("../img/works/cmn_tab_current_arrow.png") top center;
    background-size: 10.5px 8.5px;
  }
  /*Current Graphic*/
  #wrapper.graphic .works-tabs .works-tab-btn li.cat-graphic a {
    background: url("../img/works/cmn_tab_current_bg.png") top center;
    background-size: cover;
    color: #523e07;
  }
  #wrapper.graphic .works-tabs .works-tab-btn li.cat-graphic a:after {
    content: "";
    display: block;
    height: 8.5px;
    width: 10.5px;
    position: absolute;
    bottom: -8.5px;
    background: url("../img/works/cmn_tab_current_arrow.png") top center;
    background-size: 10.5px 8.5px;
  }
  /*Current Illustration*/
  #wrapper.illust .works-tabs .works-tab-btn li.cat-illust a {
    background: url("../img/works/cmn_tab_current_bg.png") top center;
    background-size: cover;
    color: #523e07;
  }
  #wrapper.illust .works-tabs .works-tab-btn li.cat-illust a:after {
    content: "";
    display: block;
    height: 8.5px;
    width: 10.5px;
    position: absolute;
    bottom: -8.5px;
    background: url("../img/works/cmn_tab_current_arrow.png") top center;
    background-size: 10.5px 8.5px;
  }
  /*Current Lecture*/
  #wrapper.lecture .works-tabs .works-tab-btn li.cat-lecture a {
    background: url("../img/works/cmn_tab_current_bg.png") top center;
    background-size: cover;
    color: #523e07;
  }
  #wrapper.lecture .works-tabs .works-tab-btn li.cat-lecture a:after {
    content: "";
    display: block;
    height: 8.5px;
    width: 10.5px;
    position: absolute;
    bottom: -8.5px;
    background: url("../img/works/cmn_tab_current_arrow.png") top center;
    background-size: 10.5px 8.5px;
  }
  /*Current HandCraft*/
  #wrapper.craft .works-tabs .works-tab-btn li.cat-craft a {
    background: url("../img/works/cmn_tab_current_bg.png") top center;
    background-size: cover;
    color: #523e07;
  }
  #wrapper.craft .works-tabs .works-tab-btn li.cat-craft a:after {
    content: "";
    display: block;
    height: 8.5px;
    width: 10.5px;
    position: absolute;
    bottom: -8.5px;
    background: url("../img/works/cmn_tab_current_arrow.png") top center;
    background-size: 10.5px 8.5px;
  }
}

/*1024px以上*/
@media only screen and (min-width: 1024px) {
  #wrapper .works-tabs {
    width: calc(100% - 70px);
  }
  #wrapper .works-tabs .works-tab-btn li a:hover,
  #wrapper .works-tabs .works-tab-btn li a:focus {
    background: url("../img/works/cmn_tab_current_bg.png") top center;
    background-size: cover;
    color: #523e07;
  }
}

/*1550px以上*/
@media only screen and (min-width: 1550px) {
  #wrapper .works-tabs {
    width: calc(100% - 60px);
    max-width: 1188px;
    margin-bottom: 60px;
  }
  #wrapper .works-tabs .works-tab-btn li a {
    font-size: 1.8rem;
    height: 50px;
    border-radius: 5px;
  }
}


/*-----------------------------------------------------

  Works List

-----------------------------------------------------*/
.works-list .work {
  margin: 0 0 2em 0;
  transition: all 0.5s;
}

.works-list .work a {
  text-decoration: none;
}

.works-list .work .photo {
  border-radius: 10px;
  overflow: hidden;
  display: block;
  margin-bottom: 10px;
}

.works-list .work dl {
  text-align: left;
}

.works-list .work dl dt {
  font-family: "Klee One";
  font-weight: 600;
  font-size: 4.347826vw;
  line-height: 1.4;
  color: #523e07;
}

.works-list .work dl .cat {
  font-family: "Lora";
  font-size: 3.1400966vw;
  color: #937c3e;
}

/*414px以上*/
@media only screen and (min-width: 414px) {
  .works-list .work dl dt {
    font-size: 1.8rem;
  }
}

/*768px以上*/
@media only screen and (min-width: 768px) {
  .works-list .work dl dt {
    font-size: 1.8rem;
  }
  .works-list .work dl .cat {
    font-size: 1.3rem;
  }
}

/*1024px以上*/
@media only screen and (min-width: 1024px) {
  .works-list .work:hover, .works-list .work:focus {
    opacity: 0.5;
  }
}

/*1024px以上1336px未満*/
@media only screen and (min-width: 1024px)  and (max-width: 1365px) {
  .works-list .work dl dt {
    font-size: 1.4173228vw;
  }
  .works-list .work dl .cat {
    font-size: 1.023622vw;
  }
}



/*-----------------------------------------------------

  Work

-----------------------------------------------------*/
/*-----------------------------------------------------
  Header
-----------------------------------------------------*/
#wrapper .work .work-header {
  text-align: left;
  margin-bottom: 20px;
}

#wrapper .work .work-header > p {
  display: table;
  height: 25px;
  vertical-align: middle;
}

#wrapper .work .work-header .cat {
  font-size: 2.65vw;
  font-family: 'Lora', serif;
  color: #ffffff;
  display: table-cell;
  vertical-align: middle;
  line-height: 1;
  height: 25px;
  padding: 0 0.75em;
}

#wrapper .work .work-header .cat-logo {
  background: url("../img/cmn/cmn_label_purple.png") no-repeat top center;
  background-size: cover;
}

#wrapper .work .work-header .cat-graphic {
  background: url("../img/cmn/cmn_label_orange.png") no-repeat top center;
  background-size: cover;
}

#wrapper .work .work-header .cat-illust {
  background: url("../img/cmn/cmn_label_green.png") no-repeat top center;
  background-size: cover;
}

#wrapper .work .work-header .cat-lecture {
  background: url("../img/cmn/cmn_label_brown.png") no-repeat top center;
  background-size: cover;
}

#wrapper .work .work-header .cat-craft {
  background: url("../img/cmn/cmn_label_blue.png") no-repeat top center;
  background-size: cover;
}

#wrapper .work .work-header h2 {
  font-family: "Klee One";
  font-weight: 600;
  font-size: 4.8309vw;
  letter-spacing: 0.1em;
  line-height: 1.25;
  color: #523e07;
  margin-top: 10px;
}

/*414px以上*/
@media only screen and (min-width: 414px) {
  #wrapper .work .work-header .cat {
    font-size: 1.1rem;
  }
  #wrapper .work .work-header h2 {
    font-size: 2.0rem;
  }
}

/*768px以上*/
@media only screen and (min-width: 768px) {
  #wrapper .work .work-header .cat {
    font-size: 0.875vw;
  }
  #wrapper .work .work-header h2 {
    font-size: 2.5rem;
  }
}

/*1024px以上*/
@media only screen and (min-width: 1024px) {
  .works-list .work {
    margin-bottom: 4em;
  }
}

/*1024px以上1336px未満*/
@media only screen and (min-width: 1024px)  and (max-width: 1365px) {
  #wrapper .work .work-header h2 {
    font-size: 1.9685038vw
  }
}

/*1550px以上*/
@media only screen and (min-width: 1550px) {
  #wrapper .work .work-header .cat {
    font-size: 1.4rem;
  }
}

/*-----------------------------------------------------
  Entry Work
-----------------------------------------------------*/
.entry-work p {
  text-align: left;
}

.entry-work figure img {
  max-height: calc(100vw - 44px);
  height: 100%;
  width: auto;
}

.entry-work .wp-block-image {
  margin-bottom: 40px;
}

/*768px以上*/
@media only screen and (min-width: 768px) {
  .entry-work figure img {
    max-height: 500px;
  }
}

/*1550px以上*/
@media only screen and (min-width: 1550px) {
  .entry-work figure img {
    max-height: 700px;
  }
}



/*-----------------------------------------------------
  Gallery
-----------------------------------------------------*/
.entry-work .wp-block-gallery {
  margin-bottom: 40px;
  overflow: hidden;
}
.entry-work .wp-block-gallery .blocks-gallery-grid .slick-track {
  display: flex;
  align-items: center;
}

.entry-work .wp-block-gallery .blocks-gallery-grid .slick-track {
  margin-bottom: 2em;

}
.entry-work .wp-block-gallery .blocks-gallery-grid .blocks-gallery-item {
  margin: 0 5px;
}
.entry-work .wp-block-gallery .blocks-gallery-grid .blocks-gallery-item figure {
  position: relative;
}

.entry-work .wp-block-gallery .blocks-gallery-grid .blocks-gallery-item figure .blocks-gallery-item__caption {
  position: absolute;
  bottom: -2em;
  width: 100%;
  text-align: center;
}

.entry-work .slick-dots li {
  width: 15px;
  height: 15px;
  margin: 0 5px;
}


/*-----------------------------------------------------
  Data
-----------------------------------------------------*/
#wrapper .work .work-data {
  margin-top: 40px;
}
#wrapper .work .work-data .headline-brown {
  font-family: 'Lora', serif;
}

#wrapper .work .work-data .keyword li {
  display: inline-block;
  margin-right: 0.5em;
}

#wrapper .work .work-data .keyword li a {
  color: #937c3e;
}

#wrapper .work .work-data .keyword li::after {
  content: ",";
}

#wrapper .work .work-data .keyword li:last-child::after {
  content: "";
}

/*-----------------------------------------------------
  タブでの絞り込み（静的サイト版）

  元テーマは分類ごとに別ページ（#wrapperのクラス違い）で
  現在地の色を出していたが、このサイトは1ページ内でJSにより
  絞り込む方式にしたので、.active クラスで同じ見た目を出す。
-----------------------------------------------------*/
@media only screen and (min-width: 768px) {
  #wrapper .works-tabs .works-tab-btn li.active a {
    background: url("../img/works/cmn_tab_current_bg.png") top center;
    background-size: cover;
    color: #523e07;
  }
  #wrapper .works-tabs .works-tab-btn li.active a:after {
    content: "";
    display: block;
    height: 8.5px;
    width: 10.5px;
    position: absolute;
    bottom: -8.5px;
    background: url("../img/works/cmn_tab_current_arrow.png") top center;
    background-size: 10.5px 8.5px;
  }
}

.works-list .work.no-link {
  cursor: default;
}