@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.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/

body {font-family: "Optima", sans-serif;}

.home h1.list-new-entries-title {display:none;}
.home .list {margin-right: calc(50% - 50vw);margin-left: calc(50% - 50vw);margin-top:5vh;margin-bottom:7vh;}
.list {justify-content:flex-start; gap: 3px;}
.list a.entry-card-wrap {width:calc(33.333333333% - 3px);}
.list a.entry-card-wrap,
.list a.entry-card-wrap article.entry-card,
.list a.entry-card-wrap article.entry-card figure.entry-card-thumb,
.list a.entry-card-wrap article.entry-card figure.entry-card-thumb img.entry-card-thumb-image {margin:0;padding:0;border:0;}
.list a.entry-card-wrap .entry-card-content {display:none;}

.list {
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}


.logo-header,
.cat-label,
.admin-pv,
.pagination {display:none;}
.list-new-entries {display:;}
h1.list-new-entries-title {display:none;}


.navi {display:none;}
.fixed-header {box-shadow:none;}
.fixed-header .navi {display:block;}


a.list-more-button {font-size:13px;border:0px solid #bbb;background:#fff;color:#555;margin:10px auto 100px;z-index:99;text-align:right;}
a.list-more-button:hover {background:#fff;color:#bbb;}

h1.archive-title,
h1.list-title,
.page h1.entry-title {margin:3.9em;letter-spacing:0.1em;font-size:2vh;font-weight:600;text-align:center;padding:1em;transform: rotate(90deg);border-bottom:1px solid #333;display:inline-block;z-index:-1;clear:both;width:auto;}
h1.archive-title:after,
h1.list-title:after,
.page h1.entry-title:after {content:'';display:block;clear:both;}
.fa {display:none;}
.list-title-in:before,
.list-title-in:after {content:none;}
.new-entry-card {margin:20px auto;}
.new-entry-card-content {padding:1.5em 0 0.5em;}
.new-entry-card-title {font-size:13px;margin:1em;}

h2.entry-card-title,
h1.entry-title {margin:1.8em 0 5vh;letter-spacing:0.05em;line-height:160%;font-weight:400;}
.entry-content img {margin:50px auto;width:100%;height:auto;display:block;}
.entry-content p {font-size:15px;margin:1.5em auto 3em;color:#555;line-height:200%;}
.entry-content p a {color:#555;text-decoration:underline;}

.entry-content .flex {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: space-between ;
margin:50px auto;
padding:0;
}
.entry-content .flex.half img {width:49%;margin:0;}
.entry-content .flex.triple img {width:32%;margin:0;}

h2.entry-card-title {display:none;}
h2.entry-card-title {font-size:15px;padding:1em 5vw 2em;}
h2.related-entry-heading {margin:5em 0 4em;text-align:center;font-size:13px;}
.related-list h3.related-entry-card-title {display:none;font-size:15px;margin:1.8em auto;}

.related-list {justify-content:flex-start; row-gap: 7px;}
.related-list a.related-entry-card-wrap {width:24.5%;}
.related-list a.related-entry-card-wrap,
.related-list a.related-entry-card-wrap article.related-entry-card,
.related-list a.related-entry-card-wrap article.related-entry-card figure.related-entry-card-thumb,
.related-list a.related-entry-card-wrap article.related-entry-card figure.related-entry-card-thumb img.related-entry-card-thumb-image {margin:0;padding:0;border:0;}
.related-list a.related-entry-card-wrap .related-entry-card-content {display:none;}


.entry-categories-tags {display:block;margin-top:5vw;}
.entry-categories-tags a {font-size:10px !important;color:#999;border:1px solid #bbb;border-radius:3px;padding:0.5em 2em;}
.entry-categories-tags a:hover {color:#ccc;border:1px solid #ccc;transition:0.4s;}

.category-sketches-post .entry-content p {width:800px;max-width:90%;}

ul.sub-menu li.menu-item .item-label {font-size:13px;}
body {letter-spacing:0.1em;}

.page .entry-content {width:1050px;max-width:100%;margin:0 auto;padding:0 5vh;}

.entry-content {
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

a,img {user-select: none;}
a {transition:0.7s;}
a:hover {opacity:0.5;transition:0.3s;}

a[target="_blank"]:after {content:"";display:inline-block;width:12px;height:12px;
	background:url(https://okada-design.co.jp/wp25/wp-content/uploads/2025/08/link.png);
	background-size:contain;margin:0 15px;
}
	
	

.footer-meta {
width: 100%;
height: 1px;
background-color: #555;
transform-origin: left bottom;
transform: rotate(-7deg);
margin-top:15vh;
margin-bottom:80px;
}

.no-pc {display:none;}
.no-sp {display:block;}

/*============
hamburger menu
=============*/
nav.hamburger {
display: none;
position: fixed;
top:0;
bottom: 0;
left: -100vw;
width: 100vw;
background: #222;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transition: all .5s;
z-index: 3;
opacity: 0;
}
.open nav.hamburger {
left: 0;
opacity: 1;
display: block;
}
nav.hamburger .inner-wrap {
padding: 0 10vw;	
}
nav.hamburger .inner {
padding: 25px;
}
nav.hamburger .inner.logo-wrap {
text-align:center;
margin-top:10vh;
}
nav.hamburger .inner img.innerlogo {width:150px;max-width:39%;margin:0 auto;filter: brightness(0) invert(1);}
nav.hamburger .inner p {font-size:15px;}
nav.hamburger .inner ul {
list-style: none;
margin: 20px 0;
padding: 0;
}
nav.hamburger .inner ul li {
position: relative;
margin: 0;
text-align:center;
}
nav.hamburger .inner ul li a {
display: block;
color: #f5f5f5;
font-size: 16px;
padding: 1em;
text-decoration: none;
transition-duration: 0.2s;
}
nav.hamburger .inner ul li a:hover {
background: transparent;
}
nav.hamburger .inner ul li ul {
display:flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: center ;
align-items: center ;
margin: 0 0 0.5em;
}
nav.hamburger .inner ul li ul li {
border-bottom: none;
}
nav.hamburger .inner ul li ul li a {
font-size: 13px;
}	
@media screen and (max-width: 767px) {
  nav.hamburger {
    left: -100vw;
    width: 100vw;
  }
}
/*============
.toggle_btn
=============*/
.toggle_wrap {
display: block;
position: fixed;
top: 0;
right: 0;
width: 80px;
height: 80px;
border:25px solid #fff;
background:#fff;
cursor: pointer;
z-index: 99999;
transition: all .5s;
}
.toggle_btn {
display: block;
width: 30px;
height: 30px;
transition: all .5s;
cursor: pointer;
background:#fff;
}
.toggle_btn span {
display: block;
position: absolute;
left: 0;
width: 30px;
height: 2px;
background-color: #222;
border-radius: 4px;
transition: all .5s;
}
.toggle_btn span:nth-child(1) {
top: 4px;
}
.toggle_btn span:nth-child(2) {
top: 14px;
}
.toggle_btn span:nth-child(3) {
bottom: 4px;
}

.open .toggle_wrap {
border:25px solid #222;
background:#222;
}
.open .toggle_btn {
background:#222;
}
.open .toggle_btn span {
background-color: #fff;
}
.open .toggle_btn span:nth-child(1) {
-webkit-transform: translateY(10px) rotate(-315deg);
transform: translateY(10px) rotate(-315deg);
}
.open .toggle_btn span:nth-child(2) {
opacity: 0;
}
.open .toggle_btn span:nth-child(3) {
-webkit-transform: translateY(-10px) rotate(315deg);
transform: translateY(-10px) rotate(315deg);
}
/*============
#mask
=============*/
#mask {
  display: none;
  transition: all .5s;
}
.open #mask {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #222;
  opacity: .8;
  z-index: 2;
  cursor: pointer;
}


/*デフォルトのハンバーガーメニュー*/
.mobile-header-menu-buttons {display:none;box-shadow:none;}
.menu-button {color:#888;}
.menu-button .menu-caption {display:none;}
.menu-drawer {margin:10vw;}
.menu-drawer:before {content:"";width:110px;height:80px;display:block;background-image:url(https://okada-design.co.jp/wp25/wp-content/uploads/2024/12/logo.svg);background-repeat:no-repeat;background-size:contain;opacity:0.7;}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
.related-list {justify-content:space-between; row-gap: 10px;}
.related-list a.related-entry-card-wrap {width:32.3%;}
}

/*834px以下*/
@media screen and (max-width: 834px){
.list a.entry-card-wrap {width:calc(50% - 2px);}
.list {justify-content:space-between;column-gap:2px;row-gap:4px;}
h2.entry-card-title {font-size:3vw;}
h1.entry-title {font-size:4vw;}
h3.related-entry-card-title {font-size:2vw;}
.entry-content img,
.entry-content .flex {margin:20px auto;}
.entry-content p {font-size:3vw;}
h2.related-entry-heading {font-size:3vw;}
h2.entry-card-title,
.related-list h3.related-entry-card-title {font-size:3vw;padding:1em 5vw 2em;}
.content,.content,.content-in,.wrap,.main {margin:0 !important;padding:0 !important;}
.single .entry-content h1,
.single .entry-content h2,
.single .entry-content h3,
.single .entry-content h4,
.single .entry-content p {margin:1.5em 5vw;padding:0;}
h2.entry-card-title,
h1.entry-title {margin:1.8em 5vw 5vh;}
nav.hamburger .inner ul li ul li {width:45%;}
}


/*480px以下*/
@media screen and (max-width: 480px){
.home .list a.entry-card-wrap {width:100%;}
.related-list {row-gap: 5px;}
.entry-categories-tags {margin:1.5em 5vw;}
.entry-categories-tags a {font-size:9px !important;padding:0.4em 1.5em;}
.no-pc {display:block;}
.no-sp {display:none;}
}