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

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


.entry-content {padding-bottom:40px;}

.page .eye-catch-wrap {height:50vh;width:100vw;background:#fafafa;overflow:hidden;
	margin-right: calc(50% - 50vw);margin-left: calc(50% - 50vw);}
.page .eye-catch-wrap img {width:100vw;height:50vh;object-fit:cover;}
.page h1.entry-title {-ms-writing-mode: tb-rl;writing-mode: vertical-rl;background:rgba(255,255,255,0.8);position:absolute;margin:5vh;padding:0.5em;z-index:9;letter-spacing:.08em;max-height:40vh;}


/*　home　*/

.home .header-container {display:block;}
.home .header-container .logo {display:block;}
.home .fixed-header {display:block;}
.home .fixed-header .logo {display:;}
.home .article-header {display:none;}

.home .header-container,
.home .header-container-in,
.home .header,
.home .header-in {background:transparent !important;}

.home .content,
.home .content-in,
.home .main,
.home .entry-content {margin:0;padding:0;}

.slide-wrap {position:relative;z-index:-2;margin:0;padding:0;}
/*.slide-wrap {transform: translateY(-10vh);}*/

.copy-wrap {position:fixed;}
.copy-wrap {width:70vw;height:85vh;
	color:#555;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	}
.copy-wrap img {display:block;margin:120px auto 80px;height:12vh;width:auto;}
.entry-content .copy-wrap p {font-size:2.2vh;letter-spacing:0.1em;
	-ms-writing-mode: tb-rl;writing-mode: vertical-rl;
	margin:0 auto;padding:0;}
.entry-content .copy-wrap p span {display:block;margin:0 1.8em;}

.metaslider {overflow:hidden;}
.metaslider,
.metaslider ul.slides,
.metaslider ul.slides li {height:100vh;margin:0;padding:0;}
.metaslider ul.slides li img {height:100vh;object-fit:cover;margin:0;padding:0;}
.metaslider ul.slides li img {animation: animationZoom 12s ease-out forwards;}
@keyframes animationZoom {
      100% { transform:scale(1.1)} 
    }

.scroll-wrap {position:fixed;bottom:15vh;right:0;left:0;margin:auto;text-align:center;letter-spacing:0.1em;}
.scroll {
  margin-top: 50px;
  position: relative;
  text-align: center;
}
.scroll:before {animation: scroll 2s infinite;border-bottom: 1px solid #555;border-left: 1px solid #555;content: "";height: 20px;left: 0;margin:auto;position: absolute;right: 0;top: 0;width: 20px;}
@keyframes scroll {
  0% {
    opacity: 0;
    transform: rotate(-45deg) translate(0, 0);
  }
  40% {
    opacity: 1;
  }
  80% {
    opacity: 0;
    transform: rotate(-45deg) translate(-20px, 20px);
  }
  100% {
    opacity: 0;
  }
}


.intro-wrap {overflow:auto;clear:both;}
.intro-wrap .container {width:1000px;max-width:90%;margin:0 auto;padding:150px 0 50px;}
.intro-wrap .container p,
.intro-wrap .container .btn {margin-left:50%;}
.intro-wrap .container img {margin:20px auto;}
.intro-wrap .container h2 {letter-spacing:0.1em;
	-ms-writing-mode: tb-rl;writing-mode: vertical-rl;
	margin:50px 0 -180px 10%;}
.intro-wrap .container h2:before {
	content:"";
	width:60px;height:200px;
	background:url(https://www.byakue.com/wp-content/uploads/2024/10/logotext_t.png) no-repeat;
	background-size:contain;
	display:block;margin:20px 80px;
	clear:both;opacity:0.3;
}

.byakue-wrap {overflow:auto;clear:both;text-align:center;}
.byakue-wrap .container {width:1000px;max-width:90%;margin:0 auto;padding:30px 0;}


.silk-wrap {background:transparent;overflow:auto;clear:both;}
.silk-wrap .container {width:1200px;max-width:90%;margin:0 auto;padding:100px 0;}
.cotton-wrap {background:transparent;overflow:auto;clear:both;}
.cotton-wrap .container {width:1200px;max-width:90%;margin:0 auto;padding:100px 0 200px;overflow:auto;}

img.mark {width:55px;height:55px;display:block;margin:20px auto;}
.silk-wrap .text h2,
.cotton-wrap .text h2,
.baby-wrap .text h2,
.pet-wrap .text h2,
.about-wrap h2 {letter-spacing:0.07em;line-height:180%;}

.silk-wrap img.funeral {width:44%;margin:5% 3%;}
.cotton-wrap img.funeral {width:35%;margin:5% 7.5%;}
.silk-wrap img.funeral {float:right;}
.cotton-wrap img.funeral {float:left;}
.silk-wrap .text,
.cotton-wrap .text {width:30%;margin:5%;clear:both;}
.silk-wrap .text {float:left;}
.cotton-wrap .text {float:right;}

.silk-wrap .text h2,
.silk-wrap .text p,
.silk-wrap .text .btn,
.cotton-wrap .text h2,
.cotton-wrap .text p,
.cotton-wrap .text .btn {margin-left:5%;}
.silk-wrap .text p,
.cotton-wrap .text p {font-size:15.5px;}
.cotton-wrap .text h2 {margin-top:1em;}

.baby-wrap {background:rgba(232,211,202,0.2);overflow:auto;clear:both;}
.baby-wrap .container {width:1000px;max-width:90%;margin:0 auto;padding:150px 0;}
.baby-wrap .container p,
.baby-wrap .container .btn {margin-left:50%;}
.baby-wrap .container img {margin:80px auto;}

.baby-wrap .container h2:before {
	content:"";
	width:120px;height:120px;
	background:url(https://www.byakue.com/wp-content/uploads/2024/10/mark.png) no-repeat;
	background-size:contain;
	display:block;margin:-200px 50px 50px auto;
	clear:both;opacity:0.5;
}

.pet-wrap .text h2:before {
	content:"";
	width:120px;height:120px;
	background:url(https://www.byakue.com/wp-content/uploads/2024/10/mark-w.png) no-repeat;
	background-size:contain;
	display:block;margin:0 auto 40px;
	clear:both;opacity:1;
}
.pet-wrap {background:rgba(223,225,226,0.6);overflow:auto;clear:both;margin-top:-30px;}
.pet-wrap .container {width:1000px;max-width:90%;margin:0 auto;padding:150px 0;}
.pet-wrap img.funeral {width:40%;margin:5%;}
.pet-wrap img.funeral {float:right;}
.pet-wrap .text {width:40%;margin:5%;clear:both;}
.pet-wrap .text {float:left;}
.pet-wrap .text h2,
.pet-wrap .text p,
.pet-wrap .text .btn {margin-right:5%;}
.pet-wrap .text p {font-size:15.5px;}


.about-wrap {background:#fff;overflow:auto;clear:both;z-index:9;}
.about-wrap .container {width:1000px;max-width:90%;margin:0 auto;padding:150px 0 50px;}
.about-wrap .container p,
.about-wrap .container .btn {margin-left:50%;}
.about-wrap .container img {margin:20px auto;}
.about-wrap .container h2 {font-size:22px;}

.about-wrap img.about01 {width:60%;float:left;}
.about-wrap img.about02 {width:20%;margin:10%;float:right;}
.about-wrap img.about03 {clear:both;width:40%;margin:70px auto;display:block;}


.footer-wrap {background:#fff;overflow:auto;clear:both;z-index:999;padding:0 0 80px;}
.footer-wrap,
.footer-wrap a {color:#555;text-decoration:none;transition:1.2s;}
.footer-wrap a:hover {color:#333;transition:0.5s;}
.footer-wrap .container {width:1200px;max-width:90%;margin:0 auto;}
.footer-wrap .container {display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content: space-between;
	justify-content: center;}
.footer-col {width:25%;padding-bottom:100px;}
.footer-col img.logo {width:55%;margin:0 auto;opacity:0.85;transition:1.2s;}
.footer-col img.logo:hover {opacity:1;transition:0.5s;}
.footer-col h3 {font-weight:400;margin-bottom:1em;letter-spacing:0.08em;}
.footer-col li {list-style:none;font-size:15px;margin-left:1em;margin-bottom:0.8em;}
.footer-col.third li {font-size:13px;}
.footer-col.third li.k-takahasi {margin-top:2.3em;}
.btn.onlineshop {width:100%;}
.btn.onlineshop a {opacity:0.7;transition:1.2s;margin:0;}
.btn.onlineshop a:hover {opacity:1;transition:0.5s;color:#333;border:1px solid #555;}

.footer-col.third li.link a:after {
	content:"";
	width:13px;height:13px;
	background:url(https://www.byakue.com/wp-content/uploads/2024/10/link.png) no-repeat;
	background-size:contain;
	display:inline-block;margin:0 12px;
	opacity:0.7;
	}
.footer-col.third li.link a:hover:after {opacity:1;}

.footer-container {display:none;}

.copy {font-size:12px;}


/*　humberger menu　*/

.menu {height:12px;position:fixed;right:30px;top:30px;width:24px;z-index:99;cursor:pointer;}
.menu__line{background:#555;display:block;height:2px;position:absolute;transition:transform .3s;width:100%;}
.menu__line--bottom{bottom:0;}
.menu__line--top.active{top:4px;transform:rotate(45deg);}
.menu__line--bottom.active{bottom:6px;transform:rotate(135deg);}

.gnav {overflow:auto;}
.gnav {background-image:url(https://www.byakue.com/wp-content/uploads/2024/10/top02-2.jpg);background-repeat:no-repeat;background-size:cover;background-color:#fff;margin-top:-15vh;display:none;height:120vh;padding-top:15vh;position:fixed;width:100%;z-index:98;}
.gnav__wrap {display:flex;width:1000px;max-width:85%;height:100%;margin:auto;padding-bottom:150px;}
.gnav img.logo {width:200px;margin:0 auto;display:block;}
.gnav p.kansha {-ms-writing-mode:tb-rl;writing-mode:vertical-rl;margin:30px auto;letter-spacing:0.2em;color:#333;}
ul.gnav__menu {padding:30px;color:#333;letter-spacing:0.08em;}
ul.gnav__menu_wrap {margin:0 20px 20px;padding:0;}
ul.gnav__menu h3 {margin:1.7em 0 1.5em;font-weight:400;color:#333;}
.gnav__menu__item {margin:1em 2em;list-style:none;font-size:15px;}
.gnav__menu__item a {color:#333;text-decoration: none;transition: .2s;}
.gnav__menu__item a:hover {color: #111;}
ul.gnav__menu_content {margin:0 1em;padding:0;
	display: -webkit-flex;
	display: flex;
	justify-content: space-between;}
ul.gnav__menu_content li {width:30%;margin:2.5%;padding:0;text-align:center;}
ul.gnav__menu_content li img {opacity:0.7;transition:1.2s;}
ul.gnav__menu_content li img:hover {opacity:1;transition:0.5s;}
ul.gnav__menu li.btn {letter-spacing:0.01em;}


/*　basic　*/

html {
  scroll-behavior: smooth;
}
body {font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;color:#333;}

.header-container {background:transparent;box-shadow:none;padding:15px 5%;}
.navi {background:transparent;margin-right:60px;}
li.menu-item a {font-size:77%;color:#333;}
li.menu-item a:hover {background:rgba(225,225,225,0.2);}

.mobile-menu-buttons {box-shadow:none;}
.mobile-menu-buttons .logo-menu-button.menu-button {width:38%;max-width:38%;margin:15px auto;}
.mobile-menu-buttons .search-menu-button {display:none;}
.mobile-menu-buttons .menu-caption {display:none;}

.fullwidth {margin-right: calc(50% - 50vw);margin-left: calc(50% - 50vw);}
.fullwidth img {width:100%;}

.text-cont {width:900px;max-width:100%;margin:20px auto;}

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

.left {width:50%;float:left;}
.right {width:50%;float:left;}

.single .eye-catch-wrap {display:none;}
article h1.entry-title,
article h1.archive-title {font-weight:400;font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;}
.entry-content,
.entry-content p {font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;font-size:17px;line-height:280%;}
.entry-content p {text-align: justify;text-justify: inter-ideograph;}
article h1.entry-title {margin:1em 0 3em;}
.entry-content h2 {font-size:28px;font-weight:400;background:transparent;padding:0;margin:3em auto 2.5em;line-height:180%;}
.entry-content h3 {font-size:20px;font-weight:400;background:transparent;margin:1.5em 0;padding:0;border:0;line-height:180%;}
.entry-content h2.title {font-size:55px;margin:3em auto 1.5em;text-align:center;}
p.small {font-size:12px;}
.center {text-align:center;}

rt {text-align: center;}

h2.select  {color:#888;text-align:center;margin-bottom:5vw;}
h2.select a {color:#888;text-decoration:none;margin-left:0.5em;margin-right:0.5em;}
h2.select a:hover {color:#333;transition:0.4s;}

.btn {background:transparent;border:0;}
.btn a {color:#333;text-decoration:none;text-align:center;font-size:15px;font-weight:400;padding:0.7em 4em 0.7em 3em;border-radius:88px;margin:1.5em auto 4.5em;border:1px solid #333;background:transparent;position:relative;display:block;align-items: center;transition: 0.5s ease-in-out;}
.btn a:hover {opacity:0.8;}
.btn a:after {
	content: "";
	position: absolute;
	top: 50%;
	bottom: 0;
	right: 2rem;
	font-size: 90%;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: right 0.7s;
	width: 6px;
	height: 6px;
	border-top: solid 1px currentColor;
	border-right: solid 1px currentColor;
	transform: translateY(-50%) rotate(45deg);
}
a:hover:after {
	right: 1.4rem;
}

.page .date-tags,
.article-footer {display:none;}
.sidebar {font-size:12px;}
.grecaptcha-badge { visibility: hidden; }

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
.home .header-container {display:none;}
.home .header-container .logo {display:none;}
.home .content,
.home .content-in,
.home .main,
.home .entry-content {margin:0;padding:0;}

.page h1.entry-title {margin:5vh 2.5vh;}
.page .entry-content {width:90%;margin:0 auto;}
.home.page .entry-content {width:100%;margin:0 auto;}
	
.copy-wrap img {margin:60px auto 50px;}
.scroll-wrap {font-size:13px;}
.entry-content .copy-wrap {margin: auto;}
.entry-content .copy-wrap p {font-size:17px;margin:auto;padding:0;}
.entry-content .copy-wrap p span {margin:0 auto;}

.intro-wrap .container {max-width:85%;padding:50px 0 30px;}
.intro-wrap .container h2 {margin:20px 0 70px 25%;}
.intro-wrap .container h2:before {
	width:45px;height:150px;
	display:block;margin:20px 50px;}
.intro-wrap .container p,
.intro-wrap .container .btn {margin-left:auto;}

.byakue-wrap .container {max-width:36%;padding:10px 0;}

.silk-wrap .container,
.cotton-wrap .container {max-width:80%;margin:0 auto;padding:40px 0;}
.silk-wrap img.funeral,
.cotton-wrap img.funeral {width:100%;margin:20px auto;}
.silk-wrap img.funeral,
.cotton-wrap img.funeral {float:none;}
.silk-wrap .text,
.cotton-wrap .text {width:100%;margin:0;}
.silk-wrap .text,
.cotton-wrap .text {float:none;}

.baby-wrap .container {max-width:80%;padding:40px 0;}
.baby-wrap .container h2:before {
	width:50px;height:50px;
	display:block;margin:-100px 20px 0px auto;
	}
.baby-wrap .container p,
.baby-wrap .container .btn {margin-left:auto;}

.pet-wrap .container {max-width:80%;padding:40px 0;} 
.pet-wrap img.funeral {width:60%;margin:5%;}
.pet-wrap .text {width:100%;margin:0;}
.pet-wrap .text h2:before {
	content:"";
	width:50px;height:50px;
	margin:0 auto 40px;
}
	
.about-wrap .container {max-width:80%;padding:40px 0;} 
.about-wrap .container p,
.about-wrap .container .btn {margin-left:auto;}
.about-wrap .container h2 {font-size:17px;text-align: justify;text-justify: inter-ideograph;}
.about-wrap .container h2 br {display:none;}
.about-wrap img.about02 {width:30%;margin:7% 5%;}
.about-wrap img.about03 {width:70%;margin:40px auto;}
	
.footer-wrap .container {display:block;text-align:center;}
.footer-col {width:70%;margin:0 auto;padding-bottom:30px;}

.left,
.right {width:100%;float:none;}
.entry-content p {text-align: justify;text-justify: inter-ideograph;font-size:14px;}
.entry-content p br {display:none;}
.entry-content h2 {font-size:20px;margin:2em auto;}
.btn a {font-size:14px;padding:1em 2.5em 1em 1.2em;margin:2em auto 3.5em;}
.btn a:after {right:1rem;}
.no-sp {display:none;}

.gnav {margin-top:-10vh !important;padding-top:8.8vh;}
.gnav__wrap {display:block;;margin-bottom:200px;}
.gnav img.logo {width:120px;}
.gnav p.kansha {font-size:13px;margin:20px auto 0;text-align:center;-ms-writing-mode:horizontal-tb;writing-mode:horizontal-tb;}
ul.gnav__menu {padding:5px;}
ul.gnav__menu_wrap {margin:0 0 20px;}
ul.gnav__menu h3 {font-size:18px;}
.gnav__menu__item {font-size:14px;}
ul.gnav__menu_content {margin:0;}
ul.gnav__menu_content li {width:31%;margin:1%;font-size:13px;}
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}