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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.mlogo{display:none;}
body{font-family: YuMincho,"Hiragino Mincho ProN",serif;}
main#main.main{padding:0;border:none;}
div#content.content.cf{margin-top:0;}
.header-container{height:0;}
div#content-in.content-in.wrap{width:100%;}
body:not(.home) .content-in{justify-content:space-around;width:90%!important;}
.logo-image{width:20%;text-align:left;}
.tagline{display:none;}
.hamburger{display:none;}
.drawer{display:none;}
.header-in{background:transparent;height:100px;z-index: 10;position: fixed;width: 100%;top:0;}
.header-inner{width:90%;margin:auto;display:flex;flex-direction:row;justify-content:space-between;align-items:center;}
.header-menu{width:70%;}
.header-menu ul {display:flex;flex-direction:row;justify-content:space-between;}
.header-menu ul li{list-style:none;}
.header-menu ul li a{text-decoration:none;color:#000;}
.fv{background:url(img/fv.png);background-size:cover;background-repeat:no-repeat;background-position:center;height:100vh;width:100%;position:relative;}
.catch{position:absolute;top:35%;left: 50%;  transform: translateY(-50%) translateX(-50%);  -webkit- transform: translateY(-50%) translateX(-50%);text-align:center;width:100%;}
.catch1{font-size:400%;}
.catch2{font-size:130%;}
.inner{width:70%;margin:auto;}
.top{position:relative;width:100%;height:100vh!important;}
.top-slide{ content: '';position:fixed;top:0;left:0;z-index:-1;width:100%; height: 100vh!important;}

#about{padding:100px 0;position:relative;}
.more-bx{display: flex;justify-content:center;margin:50px 0;}
.more-btn {text-decoration: none;display: flex;justify-content: space-between;align-items: center;transition: all 0.3s ease;left: -20px;position: relative;color:#000;}
.more-btn .arrow {display: grid;place-items: center;transition: all 0.3s ease;position:relative;left:20px;color:#000;}
.more-btn .arrow span {transition: border-color 0.5s ease, right 0.5s ease;position: relative;width: 40px;height: 6px;border-bottom: 1px solid #000;border-right: 2px solid #000;transform: skew(45deg) !important;right:2px;}
.more-btn:hover .arrow span {right:-2px;}
.more-btn:hover{color:#000;}
.h2-about{text-align:center;margin-bottom:50px;font-size:300%;font-weight:normal;}
.h2-about::before{content: "";background: url(img/ttl1.png);background-size: contain;width: 100%;position: relative;display: block;height: 100px;background-repeat: no-repeat;background-position: center;}

#lineup{padding:100px 0;background:#f9eee5;}
.spray-bx{display:flex;flex-direction:row;justify-content:flex-start;flex-wrap:wrap;gap:20px;margin-top:50px;}
.shampoo-bx{display:flex;flex-direction:row;justify-content:flex-start;gap:20px;}
.dent-bx{display:flex;flex-direction:row;justify-content:flex-start;gap:20px;}
.product{width:22%;margin-bottom:30px;text-decoration:none;transition:0.5s;text-align:center;}
.h3-top2{position:relative;font-size:180%;font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;font-weight:normal;text-align:right;margin-bottom:20px;}
.h3-top2:before{content: '';display: inline-block;width: 200px;height: 1px;background: #000;right: 10px;top: -9px;position: relative;}
.p-title{color:#000;font-size:70%;margin-top:20px;}
.v-img {width:100%;height: 250px;position: relative;overflow: hidden;border-radius:20px;background:#fff;}
.v-img img {width: 100%;height: 100%;object-fit: cover;}
.h2-lineup{text-align:center;margin-bottom:50px;font-size:300%;font-weight:normal;}
.h2-lineup::before{content: "";background: url(img/ttl2.png);background-size: contain;width: 100%;position: relative;display: block;height: 100px;background-repeat: no-repeat;background-position: center;}

.spray-bx{display:flex;flex-direction:row;justify-content:flex-start;flex-wrap:wrap;gap:20px;}
.shampoo-bx{display:flex;flex-direction:row;justify-content:flex-start;gap:20px;flex-wrap:wrap;}
.dent-bx{display:flex;flex-direction:row;justify-content:flex-start;gap:20px;flex-wrap:wrap;}
.product{width:22%;margin-bottom:30px;text-decoration:none;transition:0.5s;text-align:center;}
.h3-top{color:#325827;margin-bottom:30px;margin-top:30px;border-bottom:solid 1px #325827;}
.p-title{color:#000;font-size:70%;margin-top:20px;}
.v-img {width:100%;height: 250px;position: relative;overflow: hidden;border-radius:20px;background:#fff;}
.v-img img {width:auto;height: 100%;object-fit: cover;}


#link{padding:100px 0;}
.link-bx{display:flex;flex-direction:row;justify-content:space-between;flex-wrap:wrap;}
.link-ctt{position:relative;}
.link-ctt img{width:100%;}
.link-inner{width:45%;text-align:center;}
.more-bx2{text-align:center;display:flex;justify-content:center;margin-top:70px;}
.more-btn2{width: 80%;background: #fff;color:#325827;padding: 20px 0;display: flex;align-items: center;justify-content: center;text-decoration:none;transition:0.5s;border:solid 1px #325827;}
.arrow-right2 {display: inline-block;width:10px;height:10px;border-top:2px solid #325827;border-right:2px solid #325827;transform: rotate(45deg);position:relative;right:-20px;}
.more-btn2:hover{background:#325827;color:#fff;border:solid 1px #fff;}
.more-btn2:hover .arrow-right2{border-top:2px solid #fff;border-right:2px solid #fff;}
.h2-faq{text-align:center;margin-bottom:50px;font-size:300%;font-weight:normal;}
.h2-faq::before{content: "";background: url(img/ttl3.png);background-size: contain;width: 100%;position: relative;display: block;height: 100px;background-repeat: no-repeat;background-position: center;}

#news{padding:100px 0;position:relative;background:#f9eee5;}
.t-list{display:flex;justify-content:center;}
.news-inner{width:60%;margin:auto;}
.new{padding:20px 0;color:#000;}
.t-time{padding-right:20px;}
#news .inner{width:60%;}
.h2-news{text-align:center;margin-bottom:50px;font-size:300%;font-weight:normal;}
.h2-news::before{content: "";background: url(img/ttl4.png);background-size: contain;width: 100%;position: relative;display: block;height: 100px;background-repeat: no-repeat;background-position: center;}

.footer{background:#CCD4D7;margin-top:0;}
.copyright{color:#fff;}
.footer-menu{width:60%;margin:auto;margin-bottom:50px;margin-top:30px;}
.footer-menu ul {display:flex;flex-direction:row;justify-content:space-between;}
.footer-menu ul li{list-style:none;}
.footer-menu ul li a{text-decoration:none;color:#fff;}

/*下層*/
body:not(.home) .content-in{padding-top:150px!important;}
.h1-under{position:relative;font-size:300%;font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;font-weight:normal;text-align:center;}

.under-inner{width:80%;margin:auto;padding-bottom:100px;margin-top:100px;}
.h2-under{color:#000;margin:30px 0;border-bottom:solid 1px #000;}

/*company*/
.company-table{margin-top:50px;}
.company-table th{width:20%;background:transparent;border-top:none;border-right:none;border-left:none;border-bottom:solid 1px #CCD4D7;}
.company-table td{width:80%;background:transparent;border-top:none;border-right:none;border-left:none;border-bottom:solid 1px #CCD4D7;}
table tr:nth-of-type(2n+1) {background-color:transparent;}

/*about*/
.under-bx{display:flex;flex-direction:row;justify-content:space-between;flex-wrap:wrap;align-items:center;margin:30px 0 100px 0;}
.under-img {width: 48%;height: 400px;position: relative;overflow: hidden;}
.under-img img {width: 100%;height: 100%;object-fit: cover;}
.under-ctt{width:48%;}
.feature{background:#CCD4D7;margin-bottom:70px;padding:50px 20px;}
.feature ul li{color:#fff;}

/*faq*/
.acd-bx{margin-top:100px;}
.accordion {margin:auto;margin-top:20px;}
.questionb {display: flex; justify-content: space-between; align-items: center; padding: 20px 0 0 0; cursor: pointer; border-top: 1px solid #CCD4D7;}
.questionb span{color:#000;}
.q{height: 40px;width: 40px;border: solid 1px #CCD4D7;background:#CCD4D7;border-radius: 50%;display: inline-block;line-height: 40px;text-align: center;margin-right: 10px;color:#fff!important;}
.accordion .toggle-icon {  position: relative; width: 40px; height: 40px; border-radius: 50%; display: inline-block;line-height: 40px; text-align: center; background: #F2F2F2;}
.accordion .toggle-icon::before, .accordion .toggle-icon::after {  content: ''; position: absolute; width: 12px; height: 1px; background: #000; top: 50%; left: 39%; transform: translate(-50%, -50%); transition: transform 0.2s ease;}
.accordion .toggle-icon::before { transform: rotate(90deg); }
.accordion .toggle-icon::after { transform: rotate(0deg); }
.accordion input[type="checkbox"] { display: none; }
.accordion input[type="checkbox"]:checked + .questionb .toggle-icon::before { transform: rotate(0deg); }
.accordion input[type="checkbox"]:checked + .questionb .toggle-icon::after { transform: rotate(90deg) scale(0); }
.accordion .answer {  max-height: 0; overflow: hidden; padding: 0; transition: max-height 0.4s ease, padding 0.4s; position: relative; display: flex; flex-direction: row;align-items:center;}
.accordion input[type="checkbox"]:checked ~ .answer { max-height: 200px; padding: 15px 0 0 0; }
.accordion .answer::before {  content: ""; width: 0; height: 0; border-left: 12px solid #000; border-top: 8px solid transparent; border-bottom: 8px solid transparent; position: relative; padding-right: 10px; top: 2px;}

.single-detergent .sidebar{display:none;}
.single-detergent .main{width:100%;}
.single-detergent .date-tags{display:none;}
h1.entry-title{text-align:center;}


.single-spray .sidebar{display:none;}
.single-spray .main{width:100%;}
.single-spray .date-tags{display:none;}
.single-shampoo .sidebar{display:none;}
.single-shampoo .main{width:100%;}
.single-shampoo .date-tags{display:none;}
.single-dent .sidebar{display:none;}
.single-dent .main{width:100%;}
.single-dent .date-tags{display:none;}
h1.entry-title{text-align:center;}


.spray-image {width:80%;height:400px;margin:auto;position: relative;overflow: hidden;border-radius:20px;background:#f6f6ee;text-align:center;}
.spray-image img {width:auto;height: 100%;object-fit: cover;}
.table-product{margin:auto;margin-top:50px;width:80%;}
.table-product th{width:100%;display:block;background:#CCD4D7;color:#fff;border:solid 1px #CCD4D7;}
.table-product td{width:100%;display:block;background:transparent;border:solid 1px #CCD4D7;}
.under-entry-content{width:80%;margin:auto;}



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

/*900px以下*/
@media screen and (max-width: 900px){
  /*必要ならばここにコードを書く*/
.mlogo img{width:100%;}
.mlogo a{display:inline;}	
.mlogo {width:100%;position:relative;z-index:1;display:block;}
.mlogo .logo-image {width: 30%;}
.fv{background-position-x:10%;}
.hamburger {display:block;position: fixed;top:25px;right: 20px;z-index: 150;width: 30px;height: 30px;cursor: pointer;}
.hamburger.is-active span:nth-child(1) { top: 50%;transform: translate(-50%, -50%) rotate(135deg);}
.hamburger.is-active span:nth-child(2) {opacity: 0;}
.hamburger.is-active span:nth-child(3) {top: 50%;transform: translate(-50%, -50%) rotate(-135deg);}
.hamburger span {position: absolute;left: 50%;transform: translate(-50%, -50%);width: 100%;height: 2px;background-color:#606163; transition: transform .3s;}
.hamburger.is-active span {background-color:#fff;}
.hamburger span:nth-child(1) {top: 30%;}
.hamburger span:nth-child(2) { top: 60%;}
.hamburger span:nth-child(3) {top: 90%;}
.drawer {display:block;visibility: hidden;opacity: 0;position: fixed;top: 0;left: 0;z-index:80; width: 100%; height: 100vh;transition: opacity .3s, visibility .3s;transition: opacity .3s, visibility .3s;background: transparent;backdrop-filter: blur(12px);--webkit-backdrop-filter: blur(12px);background-color: rgba(0, 0, 0, 0.5);}
.drawer.is-active {visibility: visible;opacity: 1;}
.drawer-inner {position: absolute;top: 50%;left: 50%;transform: translateY(-50%) translateX(-50%);-webkit- transform: translateY(-50%) translateX(-50%);width:70%;text-align:center;}
.drawer__list {display: flex;flex-direction: column;gap:15px;padding-left:0;}
.drawer__link {color: #ffffff;}				
.drawer__item {list-style:none;}
.drawer__item  a{text-decoration:none;color: #ffffff;font-size:14px;}	
.drawer__item ul li{padding:5px 0;}
.header-menu {display:none;}
.footer-menu {width: 90%;}
.footer-menu ul {flex-direction: column;padding:0;}
.footer-menu ul li {padding-bottom: 10px;}
.catch1 {font-size: 200%;}
.h2-top2 {font-size: 180%;}
.h2-top2:after {width: 150px;left: 30px; top: -13px;}
.h2-vertical {font-size: 180%;writing-mode: horizontal-tb;-ms-writing-mode: lr-tb;transform:none;right:auto;right: auto;top: auto;position: relative;}
.h2-vertical:after {width:150px;height: 1px;left: 30px; top: -13px;}
.h2-vertical2 {font-size: 180%;writing-mode: horizontal-tb;-ms-writing-mode: lr-tb;transform:none;right:auto;left: auto;top: auto;position: relative;}
.h2-vertical2:after {width:150px;height: 1px;left: 30px; top: -13px;}
.h1-under {width:100%;font-size: 200%;}
.h1-under:after {width: 150px;left: 30px; top: -13px;}
	
#about {padding: 50px 0;}
#about .inner { width: 90%;}
#lineup {padding: 50px 0;}
#news {padding: 50px 0;}
#link {padding: 50px 0;}
.link-inner {width: 100%;}
.h3-top2:before {width: 100px;}
.inner {width: 90%;}
.more-btn {width: 80%;}
.product {width: 48%;}
.link-ctt {width: 100%;margin-bottom: 20px;}
.news-inner {width: 90%;}
.fv{height:60vh;}
.header-in {display: none;}
body:not(.home) .content-in {padding-top: 70px !important;}
.under-inner{width:100%;margin-bottom:30px;}
.under-img {width: 100%;}
.under-ctt {width: 100%;}
.more-btn {width: 50%;justify-content:center;}
.more-btn {left:auto;}
.company-table th {background: #CCD4D7;border-bottom: none;display: block;width: 100%;color: #fff;}
.company-table td {border-bottom:none;display: block;width: 100%;}
	
#about {padding: 50px 0;}
#lineup {padding: 50px 0;}
#news {padding: 50px 0;}
#link {padding: 50px 0;}
.h2-about{font-size:200%;}
.h2-lineup{font-size:200%;}
.h2-news{font-size:200%;}
.h2-faq{font-size:200%;}	
.inner {width: 90%;}
.more-btn {width: 60%;}
.product {width: 45%;}
.link-ctt {width: 100%;margin-bottom: 20px;}
.news-inner {width: 90%;}
.fv{height:60vh;}
.header-in {display: none;}
.under-inner{width:100%;margin-bottom:30px;}
.under-img {width: 100%;}
.under-ctt {width: 100%;}
.catch{width:90%;}
.catch2 {font-size: 120%;}
.fbx div{width:45%;}
.about-ctt{width:100%;}
.about-bx{flex-wrap:wrap;}
.spray-image {width: 100%;}
.table-product {width: 100%;}
}

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