@charset "UTF-8";
/*!
 Theme Name: Cocoon Child
 Description: Cocoon専用の子テーマ
 Theme URI: https://wp-cocoon.com/
 Author: わいひら
 Author URI: https://nelog.jp/
 Template: cocoon-master
 Version: 1.1.5
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/

/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/* WML: desktop navigation typography unified across every page */
@media screen and (min-width: 1024px){
  html body[class] #navi .menu-pc > li > a,
  html body[class] #navi .menu-pc > li > a .item-label{
    font-family: "Bahnschrift Condensed", "DIN Condensed", "Roboto Condensed", "Arial Narrow", "Yu Gothic", YuGothic, "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif !important;
    font-size: .78rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: .035em !important;
  }

  html body[class] #navi .menu-pc > li > a{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}


/* WML CATEGORY ARCHIVE SYSTEM */
body.category{
  --wml-orange:#ff6a00;
  --wml-black:#111;
  background:#f4f4f4!important;
  font-family:"Bahnschrift Condensed","DIN Condensed","Roboto Condensed","Arial Narrow","Yu Gothic",YuGothic,"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif!important;
}
body.category #header-container{
  position:sticky!important;
  top:0!important;
  z-index:9990!important;
  height:72px!important;
  min-height:72px!important;
  background:#111!important;
  border-bottom:1px solid #292929!important;
  box-shadow:0 5px 18px rgba(0,0,0,.28)!important;
}
body.category.admin-bar #header-container{top:32px!important}
body.category #header-container-in{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  width:min(100%,1240px)!important;
  height:72px!important;
  margin:0 auto!important;
  padding:0 20px!important;
  background:#111!important;
}
body.category #header,
body.category #header-in,
body.category #header .logo,
body.category #header .site-name,
body.category #header .tagline{
  display:none!important;
  width:0!important;
  height:0!important;
}
body.category #navi,
body.category #navi-in{
  display:block!important;
  width:100%!important;
  height:72px!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
}
body.category #navi .menu-pc{
  display:flex!important;
  flex-flow:row nowrap!important;
  align-items:stretch!important;
  justify-content:flex-end!important;
  width:100%!important;
  height:72px!important;
  margin:0!important;
  padding:0!important;
}
body.category #navi .menu-pc>li{
  flex:0 0 auto!important;
  width:auto!important;
  height:72px!important;
}
body.category #navi .menu-pc>li>a{
  display:flex!important;
  align-items:center!important;
  height:72px!important;
  padding:0 12px!important;
  color:#fff!important;
  background:transparent!important;
  border-bottom:3px solid transparent!important;
  font-size:.78rem!important;
  font-weight:700!important;
  white-space:nowrap!important;
}
body.category #navi .menu-pc>li>a:hover,
body.category #navi .current-menu-item>a,
body.category #navi .current_page_item>a{
  color:#ff6a00!important;
  border-bottom-color:#ff6a00!important;
}
body.category .mobile-menu-buttons{display:none!important}
body.category #sidebar,
body.category .breadcrumb{display:none!important}
body.category #content{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  background:#f4f4f4!important;
}
body.category #content-in,
body.category .content-in{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
}
body.category #main{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0 0 90px!important;
  border:0!important;
  background:#f4f4f4!important;
  box-shadow:none!important;
}
body.category #archive-title{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:28px!important;
  width:100%!important;
  min-height:360px!important;
  margin:0 0 64px!important;
  padding:72px 24px 55px!important;
  border:0!important;
  background:#050505!important;
  color:#fff!important;
  font-size:clamp(2.8rem,7vw,6.2rem)!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:.03em!important;
  text-align:center!important;
}
body.category #archive-title:before,
body.category #archive-title:after{
  content:""!important;
  display:block!important;
  flex:0 0 34px!important;
  width:34px!important;
  height:13px!important;
  background:repeating-linear-gradient(115deg,#ff6a00 0 5px,transparent 5px 11px)!important;
}
body.category #list{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:22px!important;
  width:min(1120px,calc(100% - 40px))!important;
  margin:0 auto!important;
}
body.category .entry-card-wrap{
  display:block!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  border:1px solid #d5d5d5!important;
  background:#fff!important;
  box-shadow:none!important;
  transition:.25s ease!important;
}
body.category .entry-card-wrap:hover{
  transform:translateY(-4px)!important;
  border-color:#ff6a00!important;
  box-shadow:0 12px 30px rgba(0,0,0,.12)!important;
}
body.category .entry-card{
  display:flex!important;
  flex-direction:column!important;
  height:100%!important;
  padding:0!important;
  background:#fff!important;
}
body.category .entry-card-thumb{
  width:100%!important;
  margin:0!important;
}
body.category .entry-card-thumb img{
  width:100%!important;
  aspect-ratio:16/9!important;
  object-fit:cover!important;
}
body.category .entry-card-content{padding:24px!important}
body.category .entry-card-title{
  margin:0 0 14px!important;
  color:#111!important;
  font-size:1.55rem!important;
  line-height:1.25!important;
}
body.category .entry-card-snippet{
  color:#555!important;
  font-family:"Noto Sans JP","Yu Gothic",sans-serif!important;
  line-height:1.75!important;
}
body.category .entry-card-meta{
  margin-top:auto!important;
  padding:0 24px 22px!important;
  color:#ff6a00!important;
}
@media(max-width:1024px){
  body.category #navi{display:none!important}
  body.category .mobile-menu-buttons{
    display:block!important;
    position:fixed!important;
    top:0!important;
    right:0!important;
    width:72px!important;
    height:72px!important;
    z-index:10020!important;
    background:#111!important;
  }
  body.category.admin-bar .mobile-menu-buttons{top:32px!important}
  body.category #list{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:781px){
  body.category.admin-bar #header-container,
  body.category.admin-bar .mobile-menu-buttons{top:46px!important}
  body.category #archive-title{
    min-height:300px!important;
    margin-bottom:38px!important;
    padding:65px 20px 48px!important;
    gap:14px!important;
    font-size:clamp(2.2rem,11vw,4rem)!important;
  }
  body.category #archive-title:before,
  body.category #archive-title:after{
    flex-basis:24px!important;
    width:24px!important;
    height:10px!important;
  }
}
@media(max-width:600px){
  body.category #list{
    grid-template-columns:1fr!important;
    width:calc(100% - 32px)!important;
  }
  body.category .entry-card-content{padding:20px!important}
  body.category .entry-card-title{font-size:1.35rem!important}
}


/* WML CATEGORY ARCHIVE TITLE BALANCE */
@media screen and (min-width: 769px) {
  body.category #archive-title {
    min-height: 250px;
    padding: 56px clamp(70px, 8vw, 130px);
    font-size: clamp(38px, 4vw, 54px);
    line-height: 1.12;
    white-space: nowrap;
  }
  body.category #archive-title .fa,
  body.category #archive-title [class*="fa-"] {
    font-size: .72em;
  }
}
@media screen and (max-width: 768px) {
  body.category #archive-title {
    min-height: 180px;
    padding: 40px 46px;
    font-size: clamp(28px, 8vw, 38px);
    line-height: 1.2;
  }
}


/* WML CATEGORY ARCHIVE WIDTH GUARD */
body.category { overflow-x: hidden; }
@media screen and (min-width: 769px) {
  body.category #archive-title {
    width: 100%;
    max-width: 100%;
    min-height: 230px;
    padding: 52px clamp(52px, 6vw, 84px);
    font-size: clamp(34px, 3.4vw, 46px);
    white-space: normal;
    overflow: hidden;
  }
}


/* WML CATEGORY ARCHIVE ONE LINE TITLE */
@media screen and (min-width: 1101px) {
  body.category #archive-title {
    font-size: 38px;
    white-space: nowrap;
  }
}
@media screen and (min-width: 769px) and (max-width: 1100px) {
  body.category #archive-title {
    padding-left: 50px;
    padding-right: 50px;
    font-size: 30px;
    white-space: nowrap;
  }
}


/* WML CATEGORY CARD LAYOUT FIX */
body.category #list > .entry-card-wrap {
  height: auto !important;
  min-height: 0 !important;
}
body.category #list .entry-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  height: 100% !important;
  min-height: 0 !important;
}
body.category #list .entry-card-thumb {
  width: 100% !important;
  max-width: none !important;
  flex: 0 0 auto !important;
}
body.category #list .entry-card-content {
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  flex: 1 1 auto !important;
  padding: 22px !important;
}
body.category #list .entry-card-title,
body.category #list .entry-card-snippet,
body.category #list .entry-card-meta {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  white-space: normal !important;
  word-break: normal !important;
  writing-mode: horizontal-tb !important;
}


/* WML CATEGORY CARD CONTENT OFFSET FIX */
body.category #list .entry-card-content {
  margin: 0 !important;
}


/* WML CATEGORY FINAL BALANCE */
@media screen and (min-width: 769px) {
  body.category #archive-title {
    min-height: 0 !important;
    height: auto !important;
    padding: 56px 70px !important;
    font-size: clamp(34px, 3vw, 54px) !important;
    line-height: 1.15 !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }
  body.category #list {
    grid-template-columns: repeat(auto-fit, minmax(280px, 360px)) !important;
    justify-content: center !important;
  }
}
@media screen and (max-width: 768px) {
  body.category #archive-title {
    min-height: 0 !important;
    height: auto !important;
    padding: 42px 42px !important;
    font-size: clamp(26px, 8vw, 36px) !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
    white-space: normal !important;
  }
  body.category #list {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}


/* WML GLOBAL ACTIVE NAV ITEM */
@media screen and (min-width: 1025px) {
  #navi .navi-in > ul > li.current-menu-item > a,
  #navi .navi-in > ul > li.current_page_item > a,
  #navi .navi-in > ul > li.current-menu-parent > a,
  #navi .navi-in > ul > li.current-menu-ancestor > a,
  #navi .navi-in > ul > li.current_page_parent > a,
  #navi .navi-in > ul > li.current_page_ancestor > a,
  body.single-post #navi .navi-in > ul > li > a[href="https://weekendmodlab.com/blog/"],
  body.category #navi .navi-in > ul > li > a[href="https://weekendmodlab.com/blog/"] {
    color: #ff6a00 !important;
    border-bottom-color: #ff6a00 !important;
  }
}


/* WML BLOG ACTIVE NAV PRIORITY */
@media screen and (min-width: 1025px) {
  html body.blog #navi .navi-in > ul.menu-top > li.current-menu-item > a,
  html body.blog #navi .navi-in > ul.menu-top > li.current_page_item > a,
  html body.single-post #navi .navi-in > ul.menu-top > li > a[href="https://weekendmodlab.com/blog/"],
  html body.category #navi .navi-in > ul.menu-top > li > a[href="https://weekendmodlab.com/blog/"] {
    color: #ff6a00 !important;
    border-bottom-color: #ff6a00 !important;
  }
}

