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

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


section.top {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;}
.entry-content section h2 {text-align:left;font-size: min(3.9vh, 40px);font-weight:500;line-height:250%;-ms-writing-mode: tb-rl;writing-mode: vertical-rl;font-family:
  "Yu Mincho",
  "YuMincho",
  "Hiragino Mincho ProN",
  "Hiragino Mincho Pro",
  "Noto Serif JP",
  "MS PMincho",
  serif;}
section.top {min-height:50vh;width:100vw;margin-top:0;margin-bottom:0;will-change: background-position;}
section.top.philosophy {background:url(https://www.mibunosugano.jp/journal/wp-content/uploads/2026/06/rakkyoubtk.jpg) no-repeat;background-size:50%;background-position:left 5% top;margin:8vw auto;}
section.top.history {background:url(https://www.mibunosugano.jp/journal/wp-content/uploads/2026/06/saisyou_img03.jpg) no-repeat;background-size:50%;background-position:right 5% top;margin:8vw auto;}


@media screen and (min-width: 835px){
section.top .content-wrap.left {padding-right:min(600px, 50%);}
section.top .content-wrap.center {padding-left:35%;}
section.top .content-wrap.right {padding-left:min(600px, 50%);}
}



.scroll-indicator {
    position: absolute;
    left: 50%;
    bottom: 20vh;
    transform: translateX(-50%);
    font-size: 11px;
    text-align: center;
	color:#fff;
	text-decoration:none;
}
.scroll-indicator:hover {
	color:#fff;
	opacity:0.7;
}
.scroll-indicator::after {
    content: "";
    display: block;
    width: 1px;
    height: 75px;
    margin: 12px auto 0;
    background: #fff;
}

.scroll-indicator::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 32px;
    width: 5px;
    height: 5px;
    margin-left: -2.5px;
    border-radius: 50%;
    background: #fff;
    animation: scrollDot 3s ease infinite;
}

@keyframes scrollDot {
    0% {
        transform: translateY(0);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    80% {
        transform: translateY(50px);
        opacity: 1;
    }
    100% {
        transform: translateY(50px);
        opacity: 0;
    }
}
/************************************
** ここまでTOP
************************************/

div.green,section.green {background:#497D4D;}
div.white,section.white {background:#fff;}
div.black,section.black {background:#1a1a1a;}
div.darkgray,section.darkgray {background:#56564b;}
div.gray,section.gray {background:#888e7e;}
div.lightgray,section.lightgray {background:#dcdddd;}
div.lightgreen,section.lightgreen {background:#A9D395;}
div.baige,section.baige {background:#e9e4d4;}

p.lightgreen,
span.lightgreen {color:#A9D395;}

.entry-content p.green,
.entry-content h1.green,
.entry-content h2.green,
.entry-content h3.green,
.entry-content h4.green,
.entry-content span.green {color:#497D4D;}
.entry-content p.white,
.entry-content h1.white,
.entry-content h2.white,
.entry-content h3.white,
.entry-content h4.white,
.entry-content span.white {color:#fff;}

.angle {
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8vw), 0 100%);
}
.angle2 {
clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 88%);
}


/************************************
** BASIC
************************************/

.fullwidth {margin:0 calc(50% - 50vw);}

.content-wrap {width:1000px;max-width:100%;margin:40px auto;padding:0 2.5%;}

.flex {display: flex;
	flex-wrap: wrap;
	justify-content: center ;
	align-items: stretch;}

.flex.one div {width:98%;margin:1%;}
.flex.half div {width:48%;margin:1%;}
.flex.triple div {width:31.333%;margin:1%;}
.flex.quadruple div {width:24%;margin:0.5%;}

.flex.content div {padding:5%; border-radius:8px;text-align: justify;
text-justify: inter-ideograph;}
.flex.content.triple div {padding:2.5%;}
.flex.content.quadruple div {padding:1.5%;}

.flex.banner-wrap div img {border-radius:8px;box-shadow:0 0 10px rgba(0,0,0,0.1);transition:0.4s;}
.flex.banner-wrap div img:hover {opacity:0.8;transition:0.4s;}

div.text {padding:0 5%;}

.entry-content p {text-align: justify;text-justify: inter-ideograph;}
p.center {text-align:center;}
p.right {text-align:right;}
p.x-large,.x-large {font-size:150%;}
p.large,.large {font-size:120%;}
p.small,.small {font-size:85%;}
p.x-small,.x-small {font-size:70%;}
span.normal {font-weight:400;}
p.space,.space {margin:5vw auto;}

p.subtitle {color:#006e58;border-bottom:1px solid #006e58;margin:1.8em auto 0.2em;padding-bottom:1.2em;display:inline-block;font-weight:600;}
p.subtitle.white {color:#A9D395;border-bottom:1px solid #A9D395;}

.page h1.entry-title,
h1.archive-title {text-align:center;margin:1.2em auto;}

.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5 {color:#1a1a1a;margin:2.5em auto 1em !important;line-height:180%;background:transparent;}

.rl {-ms-writing-mode: tb-rl;writing-mode: vertical-rl;text-align:left !important;}

.entry-content a.btn,
a.btn {background:transparent;border:1px solid #111;color:#111;font-size:110%;border-radius:4px;text-decoration:none;font-weight:400;letter-spacing:0.05em;margin:10px 0;}
.entry-content a.btn:hover,
a.btn:hover {color:#666;border:1px solid #666;}
a.btn.green {background:#497D4D;}
a.btn.white {background:#fff;color:#1a1a1a;}
a.btn.white:hover {color:#006e58;}

a.btn {position: relative;padding:0.8em 3.5em 0.8em 3em;}

/* 横棒 */
a.btn::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 1em;
    width: 24px;
    height: 1px;
    background: currentColor;
    transform: translateY(-50%);
    transition: transform 0.2s ease;
}
/* 斜線（右肩下がり） */
a.btn::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1em;
    width: 7px;
    height: 1px;
    background: currentColor;
    transform: translateY(-50%) rotate(45deg);
    transform-origin: right center;
    transition: transform 0.2s ease;
}

/* ホバーで少し右へ */
a.btn::before,
a.btn::after {
    transition: transform 0.2s ease;
}
a.btn:hover::before {
    transform: translateX(5px) translateY(-50%);
}
a.btn:hover::after {
    transform: translateY(-50%) translateX(-20px) rotate(45deg);
}

.entry-content img {margin-top:15px;margin-bottom:15px;}
.page .entry-content img {display:block;margin-left:auto;margin-right:auto;}

.entry-content .wp-block-gallery .wp-block-image img {margin:10px auto;}
.entry-content .wp-block-gallery .wp-block-image .wp-element-caption {background:none;color:#222;position:relative;margin:0 auto;padding:0.5em;}

.entry-content ul {margin-top:0.8em;margin-bottom:0.8em;}

table {margin:0 2.5%;width:95%;}
table.capacity th,
table th {background:#fafafa;padding:0.5em;}
table td {background:#fff;padding:0.5em;}
table tr.triple th,
table tr.triple td {width:33.333%;}
table .center {text-align:center;}

.gallery img {border:none !important;width:98% !important;margin:10px auto !important;}
.gallery-caption {margin:5px auto !important;}
.metaslider {margin:0;padding:0;}

.admin-pv,
.footer-meta,
.cat-label,
.page .date-tags,
.post-date .fa {display:none;}
.entry-categories-tags,
.entry-categories-tags a,
.entry-categories-tags a:hover {color:#333;}


body {box-sizing: border-box;}
.header-container {box-shadow:none;padding:15px 0;margin:0;}
.home .header-container,
.home .logo-header,.home .navi {background:transparent !important;z-index:2;}
.home .content {margin-top:-90px;}

.logo-header {height:60px;}
.logo-header img {height:39px !important;margin:10px auto;}
.mobile-header-menu-buttons {box-shadow:none;}
.mobile-header-menu-buttons {flex-direction: row-reverse;justify-content:space-between ;}

.navi {background:transparent;margin-right:60px;}
.navi .fa {display: none;}
li.menu-item {width:auto !important;margin:0 0.75em !important;}
li.menu-item.menu-item-has-children a:before {content:none !important;}
li.menu-item a {color:#497D4D !important;font-weight:400;letter-spacing:0.03em;}
li.menu-item a:hover {background:transparent !important;opacity:0.8;}
li.menu-item ul li {background:#497D4D;margin:0 !important;}
li.menu-item ul li:hover {background:#fafafa;}

/* ↓ トップ公開時.homeに変更 */
.page-id-14 li.menu-item {display:none;}
.page-id-14 .fixed-header li.menu-item {display:block;}

.fixed-header .navi-in > ul li:hover > ul {
display: block;}

.breadcrumb {background:transparent !important;padding:0 5%;}
.breadcrumb,.breadcrumb a {color:#333;}
.breadcrumb .fa {display:none;}

.content {margin:0;padding:0;}
.main {margin:0;padding:0;}
.entry-content {margin:0;padding:0 0 40px;}
.main {background:transparent;}


.single article {width:800px;max-width:100%;margin:0 auto;}
.single article img {margin:40px auto;display:block;}

h1.entry-title {line-height:160%;}

html {scroll-behavior: smooth;scroll-padding-top: 150px;}
h1 span.fa {display:none;}

.entry-content h2,
.entry-content h3,
.entry-content h4 {text-align:center;margin:1.2em auto;padding:0.5em 0;border:none;}

table {background:#fff;}
table th,table td {border:1px solid #888 !important;text-align:left;padding:0.5em 1em;}

.list {width:1200px;max-width:100%;margin:5vw auto;padding:4% 0;border-top:1px solid #222;}
.list .entry-card-wrap {padding:4%;border-bottom:1px solid #222;}
.list .entry-card-content {padding-left:2.5%;}
.list .entry-card-content .entry-card-snippet {margin:2em 0;line-height:180%;}

.under-entry-content {margin-top:8vw;}
.related-entry-heading {text-align:center;}
.related-entry-card-wrap {width:800px;max-width:100%;margin:15px auto;border-bottom:1px solid #222;}
.related-entry-card-thumb img.related-entry-card-thumb-image,
.related-entry-card-thumb img.related-entry-card-no-image {margin:0 auto;}
.related-entry-card-thumb .cat-label {display:none;}
.related-entry-card-content {padding-left:2.5%;}

footer {display:none;}
.footer-wrap {background:#497D4D;color:#fff;padding:8vw auto;margin:0;font-size:14px;}
.footer-wrap div:first-child {width:28%;}
.footer-wrap div:first-child img {width:50%;margin:0 auto 20px;display:block;}
.footer-wrap div:last-child {width:60%;margin:1% 0}
.footer-wrap div p {margin:0.5em 0;}
.footer-wrap a {color:#111;text-decoration:none;margin-left:2%;}
.footer-wrap a:after {content:"";}
.footer-wrap .footer-menu {font-size:16px;font-weight:600;}
.footer-link {margin-top:5vw;}


.map {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    /* 16:9のアスペクト比 */
    height: 0;
}

.map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.grecaptcha-badge { visibility: hidden; }
.no-pc {display:none;}
.no-sp {display:block;}


/************************************
** hamburger menu
************************************/
nav.hamburger {
display: none;
opacity: 0;
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
transition: transform .8s;
z-index: 3;
background:#497D4D;
background-size:cover;
background-attachment:fixed;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.open nav.hamburger {
opacity: 1;
display: block;
transition: transform .8s;
}

nav.hamburger .inner-wrap {
width:1300px;
max-width:100%;
margin:10px auto;
padding:0 5% 20vh;	
}
nav.hamburger .logo-wrap img {
height:60px;
width:auto;
margin:20px 0;
}

nav.hamburger .content-wrap {width:1200px;max-width:100%;margin:0;}
nav.hamburger .content-wrap:first-child {margin-top:8vw;}
nav.hamburger .half.flex div {width:47%;margin:1.5%;}
nav.hamburger .triple.flex div {width:30.33333%;margin:1.5%;}
nav.hamburger .box-wrap {margin:40px auto;}
nav.hamburger .half.content-wrap div {
background:rgba(255,255,255,0.9);
padding:2.5% 5%;
border-radius:12px;
}
nav.hamburger .triple.content-wrap div {
background:rgba(255,255,255,0.9);
padding:2.5% 5%;border-radius:12px;
}
nav.hamburger .content-wrap h2.title {
font-weight:400;
font-size:27px;
color:#2b2b2b;
margin:2vw auto;
text-align:center;
}
nav.hamburger .content-wrap h3.title {
font-weight:550;
font-size:20px;
margin:0.4em 0;
}
nav.hamburger .content-wrap h3.title a {
color:#111;
text-decoration:none;
}
nav.hamburger .content-wrap h3.title a:hover {
color:#3c9463;
}
nav.hamburger .content-wrap ul {margin:0 0 0.5em;padding:0;}
nav.hamburger .content-wrap ul li:last-child {margin-bottom:0.5em;}
nav.hamburger .content-wrap ul li {
	list-style:none;
	font-size:16px;
	line-height:1.2;	
position: relative;
display: inline-block;}
nav.hamburger .content-wrap ul li a {
display: block;
position: relative;
padding-left: 23px;
margin-right:1.8em;
}
nav.hamburger .content-wrap ul li a:before {
content: '';
width: 16px;
height: 16px;
border:1px solid #333;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
margin: auto;
}
nav.hamburger .content-wrap ul li a:after {
content: '';
width: 5px;
height: 5px;
border: 0;
border-top: solid 1px #333;
border-right: solid 1px #333;
transform: rotate(45deg);
position: absolute;
top: 0;
left: 4px;
bottom: 0;
margin: auto;
}
nav.hamburger .content-wrap ul li a {
	color:#000;
	text-decoration:none;
}
nav.hamburger .content-wrap ul li a:hover {color:#497D4D;}
nav.hamburger .content-wrap ul li a:hover:before {border:1px solid #497D4D;;}
nav.hamburger .content-wrap ul li a:hover:after {
border-top: solid 1px #1a1a1a;
border-right: solid 1px #1a1a1a;}

/*============
.toggle_btn
=============*/
.toggle_wrap {
display: block;
position: fixed;
top: 0;
right: 0;
width: 90px;
height: 90px;
border:30px solid #497D4D;
background:#497D4D;
cursor: pointer;
z-index: 99999;
}
.toggle_btn {
display: block;
width: 30px;
height: 30px;
transition: all .5s;
cursor: pointer;
background:#497D4D;
}
.toggle_btn span {
display: block;
position: absolute;
left: 0;
width: 30px;
height: 2px;
background-color: #fff;
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_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: transparent;
  opacity: .3;
  z-index: 2;
  cursor: pointer;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
	
}

/*834px以下*/
@media screen and (max-width: 834px){
.content {padding:0 2.5%;}
.content-wrap {margin:30px auto 15px;}
.home .header-container,
.home .navi {background:#006e58 !important;}
.home .content {margin-top:0;}
.header-container,.header-container-in,.header,.header-in,.logo {margin:0;padding:0;display:inline-block;text-align:left;}
.main {margin:0 auto;padding:0 5% !important;}
div.logo {width:100vw;height:80px;padding:10px 0 !important;margin:0 !important;position:relative;}
.logo img {height:25px !important;margin:25px auto;}
nav.hamburger .logo-wrap img {margin-left:0px;height:25px !important;}
.toggle_wrap {
width: 70px;
height: 70px;
border:20px solid #497D4D;
	}
nav.hamburger .content-wrap div {width:100%;}
nav.hamburger .half.flex div {width:100%;}
nav.hamburger .triple.flex div {width:100%;}
nav.hamburger .box-wrap {margin:20px auto;}
nav.hamburger .half.content-wrap div {padding:5% 8%;}
nav.hamburger .content-wrap h2.title {font-size:28px;margin:25px auto;}
h2.title-green {font-size:27px;}
h1.entry-title {margin:1em 0;padding:0;}
.breadcrumb {padding:0 5% !important;}
.flex.half div {width:100%;margin:2% 0;}
.flex.triple div {width:100%;margin:2% 0;}
.flex.triple.triplesp div {width:31.3333%;margin:2% 1%;}
.flex.quadruple div {width:48%;margin:1%;}
.flex.content.triple div {padding:5%}
.breadcrumb {display:none;}
.fullwidth-sp {margin-right: calc(50% - 50vw);margin-left: calc(50% - 50vw);}
table {margin:0;width:100%;}
.list .entry-card-wrap {padding:2% 0;}
.footer-wrap {padding:1% 5%;}
.footer-wrap div:first-child img {width:30%;display:block;margin:5px auto;}
.footer-wrap .footer-menu {font-size:15px;}
.no-pc {display:block;}
.no-sp {display:none;}
}

/*480px以下*/
@media screen and (max-width: 480px){
.entry-content .wp-block-gallery .wp-block-image {width:90% !important;}
}