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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
html{overflow-x:hidden;scroll-behavior:smooth;}
body{background:#f4f4f4;font-family: 'Zen Maru Gothic', sans-serif;overflow-x:hidden;}
.sp-br{display:none;}
.drawer{display:none;}
.ham-bx{display:none;}
div#header-in.header-in.wrap.cf {width:100%;}
main#main.main{padding:0;border:0;margin:0;background:#f4f4f4;position:relative;}
.header-in{width:100%;position: fixed;top: 0;z-index: 100;background:#f4f4f4;}
.header-ctt{width:100%;height:100px;background:#f4f4f4;position:relative;margin:auto;display: flex;justify-content: space-between;align-items: center;}
.header-nav{display:flex;align-items: center;gap:30px;padding-left:0;}
.header-nav li{list-style:none;}
.header-nav li a{text-decoration:none;transition:0.7s;font-size:1.05rem;color:#083F84;}
.header-nav li a:hover{opacity:0.7;color:#083F84;}
.header-bx{display:flex;justify-content: flex-end;gap:50px;}
.header-cart{background:#083F84;height:100px;padding:10px 30px;color:#fff;text-decoration:none;transition:0.7s;border:solid 1px #083F84;text-align:center;}
.header-cart span{display:block;}
.header-cart:hover{background:transparent;color:#083F84;}
.header-cart svg {width: 40px;fill: #fff;transition: 0.7s;}
.header-cart:hover svg {fill: #083F84;}
.tagline {font-size: 10px;margin: 0.3em 1em;}
.ham-bx{display:none;}

.content{margin-top:0;}
.content-in{width:100%;}
.logo-image {padding:0;}
.tagline{padding:0;}

.fv{max-width:1400px;width:90%;margin:auto;margin-top:130px;height:560px;position:relative;background:#f4f4f4;}
.fv-swiper{width:100%;height:560px;overflow:hidden;border-radius: 20px;}
.fv-swiper .swiper-slide{position:relative;overflow:hidden;}
.fv-swiper .swiper-slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 6s ease;}
.fv-swiper .swiper-slide-active img{transform:scale(1);}
.fv-caption{  position: absolute;top: 50%;left: 50%;transform: translateY(-50%) translateX(-50%);-webkit- transform: translateY(-50%) translateX(-50%);text-shadow:0 2px 16px rgba(0,0,0,.5);z-index:2;color:#fff;text-align:center;width:100%;}
.fv-caption h2{font-size:3.5rem;font-weight:700;}
.fv-caption p{font-size:1.5rem;font-weight:700;}
.fv-dots{position:absolute;right:-28px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:14px;}
.fv-dot-inactive{display:block;width:12px;height:12px;border-radius:50%;background:transparent;border:solid 1px #083F84;padding:0;margin:0;cursor:pointer;}
.fv-dot-active{display:block;width:12px;height:12px;border-radius:50%;background:#083F84;border:none;padding:0;margin:0;cursor:pointer;}
.swiper-wrapper {margin:0;}

a{text-decoration:none;transition:0.7s;}
a:hover{opacity:0.7;}

.inner{max-width:1200px;width:90%;margin:auto;}
.blog-section{padding:100px 0;}
.blog-bx{max-width:1200px;width:90%;margin:auto;display:flex;gap:70px;padding:30px 50px;background:#fff;border-radius:20px;}
.blog-ctt{width:50%;}
.h2-blog{font-size:1.5em;color:#083F84;}
.h2-bx{border-bottom:solid 4px #ccd9ea;padding-bottom:10px;display:flex;justify-content:space-between;align-items:center;}
.blog-list{display:flex;gap:20px;margin-top:20px;}
.list-img{width:45%;}
.list-ttl{font-size:1.2rem;font-weight:500;color:#000;}
.list-date{font-size:1.2rem;font-weight:500;color:#083F84;}
.news-more{color:#083F84;}
.news-more:hover{color:#083F84;}

.about{padding:50px 0 100px 0;}
.about h2{font-size:3.5rem;font-weight:700;color:#083F84;text-align:center;}
.about p{text-align:center;margin:20px auto 0;}
.more-btn{background:#083F84;position:relative;margin:50px auto 0;width:200px;color:#fff;transition:0.7s ease-in-out;padding:15px 0;border-radius:9999px;display: block;text-align: center;}
.more-btn:hover{opacity:0.7;color:#fff;}

.product-section{padding:100px 0;}
.product-section h2{font-size:2.5rem;font-weight:700;color:#083F84;text-align:center;margin-bottom:50px;}
.top-products{display:grid;grid-template-columns:repeat(3, 1fr);gap:30px;width:100%;max-width:1000px;margin:auto;}
.top-product-thumb img{height:205px;width:300px;object-fit:cover;}
.top-product-thumb {height:205px;width:300px;overflow:hidden;}
.top-product-name{color:#083F84;}
.top-product-price{color:#083F84;}

.faq{padding:100px 0;background:#F5F5F5;}
.faq h2{text-align:center;}
.faq h2:before{content:"FAQ";font-size:1rem;display:block;line-height: 1;}
.faq .inner{margin-top:50px;}
.accordion-bx {width:70%;margin:auto;}
.accordion-ctt {margin-bottom:50px;}
.accordion{border-bottom:solid 1px #083F84;}
.ques {display: flex; justify-content: space-between; align-items: center; padding:20px 0; cursor: pointer;}
.q{height:50px;width:50px;background:#083F84;color:#fff;border-radius: 50%;display:inline-flex;justify-content:center;align-items:center;padding: 5px;text-align: center;margin-right:10px;margin-bottom:5px;font-weight:bold;}
.accordion .toggle-icon {  position: relative; display: inline-block; padding: 20px; line-height:1.5; text-align: center; }
.accordion .toggle-icon::before, .accordion .toggle-icon::after {  content: ''; position: absolute; width: 20px; height: 3px; background: #083F84; top: 50%; left: 31%; 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 + .ques .toggle-icon::before { transform: rotate(0deg); }
.accordion input[type="checkbox"]:checked + .ques .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;}
.accordion input[type="checkbox"]:checked ~ .answer { max-height: 300px; padding: 15px 0; }
.a{height:50px;width:50px;background:#083F84;color:#fff;border-radius: 50%;;display:inline-flex;justify-content:center;align-items:center;padding: 5px;text-align: center;margin-right:10px;margin-bottom:5px;font-weight:bold;}

.footer {margin-top:0;padding:0;}
#footer-in {width:100%;}
.fcontact{position:relative;max-width:1200px;width:100%;display:block;margin:auto;height:270px;margin-bottom:70px;margin-top:70px;overflow:hidden;}
.fcontact::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:url(img/contact-img.webp);background-size:cover;background-repeat:no-repeat;background-position:center;transition:transform 0.5s ease;}
.fcontact:hover::before{transform:scale(1.2);}
.fcontact:hover{opacity:1;}
.footerp{color:#fff;}
.finner{width:100%;position:absolute;top: 50%;left: 50%;transform: translateY(-50%) translateX(-50%); -webkit- transform: translateY(-50%) translateX(-50%);padding:0 50px;box-sizing:border-box;}
.finner .more{color:#fff;border-bottom:solid 1px #fff;}
.finner h2{color:#fff;}
.finner .h2-contact:before{content:"CONTACT";font-size:15px;display:block;}
.finner div{display:flex;justify-content:space-between;}
.finner .more::before {border-top: 1px solid #D0B1A1;;border-right: 1px solid #D0B1A1;}
.finner .more::after{background:#fff;}
.footer-area{background:#083F84;padding:100px 0;}

.footer-nav{margin:0;padding-left:0;display:flex;gap:20px;justify-content:center;}
.footer-nav li {list-style:none;padding-bottom:10px;}
.footer-nav li a{color:#fff;text-decoration:none;}
.footer-bottom {background:#083F84;padding-bottom:70px;margin-top:0;}

.bread{max-width:1200px;width:90%;margin:auto;text-align:right;}
.breadcrumb {margin: 1em 0;font-size: 1rem;color:#083F84;}
.breadcrumb a{color:#083F84;}
.page-fv{height:400px;position:relative;}
.page-ttl{font-size:2.5rem;color:#083F84;position:absolute;top:50%;transform:translateY(-50%);font-weight:600;}
.h1-page{font-size:1rem;font-weight:normal;color:#083F84;position:absolute;bottom:10px;}
.page-fv .inner{position:relative;height:400px;}
.under-inner{width:90%;max-width:1200px;margin:auto;padding:100px;background:#fff;border-radius:20px;margin-bottom:50px;margin-top:50px;}
.content-in{margin-top:130px;}
.about-fv{background:url(img/about-fv.webp);background-size:cover;background-repeat:no-repeat;background-position: 0% 30%;border-radius:20px;padding:30px;}
.under-h2{text-align:center;margin-bottom:50px;color:#083F84;position:relative;}
.under-h2:before {content: '';position: absolute;bottom: -10px;display: inline-block;width:30px;height:3px;left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);background-color:#083F84;border-radius: 2px;}
.ubx-ctt{margin-bottom:70px;}
.company-table{width:80%;margin:auto;}
.company-table th{width:20%;background:transparent;border-left:none;border-top:none;border-right:none;border-bottom:solid 1px #d8d8d8;}
.company-table td{width:80%;background:transparent;border-left:none;border-top:none;border-right:none;border-bottom:solid 1px #d8d8d8;}
table tr:nth-of-type(2n+1) {background:transparent;}

.contact-fv{background:url(img/contact-fv.webp);background-size:cover;background-repeat:no-repeat;background-position:0% 60%;border-radius:20px;padding:30px;}
.contact-table th{background:transparent;border:none;text-align:left;font-weight:normal;display: flex;justify-content: space-between;gap: 30px;padding: 15px 50px 5px 0;width:300px;}
.contact-table td{background:transparent;border:none;width:650px;}
.must{color:#083F84;font-size:0.9rem;padding: 2px 10px;}
.contact-bx{padding:0 50px;}
.wpcf7-spinner{display:none;}
.acceptance p{text-align:center;font-size:15px;display: flex;justify-content: center;}
.acceptance p a{color:#083F84;}
.cbtn{text-align:center;margin-top:50px;position:relative;height:40px;}
.cbtn p a{text-decoration:none;}
input[type='submit']{background:#083F84;position:relative;margin:0 auto;width:200px;color:#fff;transition:0.7s ease-in-out;padding:15px 0;border-radius:9999px;}
input[type='submit']:hover{opacity:0.7;}
.wpcf7-spinner{display:none;}
input[type='submit'] a{text-decoration:none;}
.contact-bx p{text-align:center;}
.wpcf7-list-item {margin:0;}

.junkk-fv{background:url(img/junkk-fv.webp);background-size:cover;background-repeat:no-repeat;border-radius:20px;padding:30px;}
.h3-pp{color:#083F84;font-size:1.5rem;margin:20px 0 10px 0;}

.product-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:30px;}
.product-thumb img{height:205px;width:300px;object-fit:cover;}
.product-thumb {height:205px;width:300px;overflow:hidden;}
.product-category-filter{display:grid;grid-template-columns:repeat(5, 1fr);gap:10px;width:80%;justify-content:center;margin:0 auto 30px;}
.cat-btn{color:#083F84;background:transparent;border:solid 1px #083F84;padding:10px 0;width:150px;cursor:pointer;border-radius:9999px;transition:0.7s;font-family: 'Zen Maru Gothic', sans-serif;}
.product-category-filter .active{color:#fff;background:#083F84;border:solid 1px #083F84;}
.cat-btn:hover{color:#fff;background:#083F84;border:solid 1px #083F84;}
#product-orderby{width:150px;font-size:1rem;font-family: 'Zen Maru Gothic', sans-serif;}
.product-sort-wrap{text-align:right;margin-bottom:30px;}
.btn-cart{background:#083F84;color:#fff;border: none;padding: 10px;cursor:pointer;transition:0.7s;font-family: 'Zen Maru Gothic', sans-serif;}
.btn-cart:hover{opacity:0.7;}
.product-name{color:#083F84;}
.product-price{color:#083F84;}

.new-list{display:grid;grid-template-columns:repeat(3, 1fr);gap:30px;}
.pttl{font-size:1.2rem;font-weight:500;color:#000;}
.pdate{font-size:1.2rem;font-weight:500;color:#083F84;}
.pcate{font-size:1rem;font-weight:500;color:#fff;background:#ccd9ea;padding:2px 10px;border-radius:5px;}
.post-meta{display:flex;gap:10px;align-items:center;margin:5px 0;}

.pagination-next {display:none;}
.pnavi{display:flex;flex-direction:row;justify-content:center;gap:5px;margin-top:50px;}
.pnavi a{transition:0.7s;}
.nav-links{display:flex;}
.pnavi .page-numbers{display:inline-block;color:#083F84;border:solid 1px #083F84;border-radius:0;background:#fff;margin:0;border-radius:5px;}
.pnavi .current{color:#fff;background:#083F84;border:solid 1px #083F84;border-radius:5px;}
.pnavi .next.page-numbers{width:46px;}
.pnavi .prev.page-numbers{width:46px;}
.pnavi a:hover{background:#083F84;color:#fff;}
.entry-title{padding:0  0 0.6em 0;}

.entry-title{padding:0  0 0.6em 0;color:#083F84;}
.single-post .content-in{justify-content:space-around;max-width:1200px;width:100%;margin-top:120px;}
.single-post .content-in h2{font-size:24px;color:#fff;padding:15px;margin:50px 0 20px 0;background:#083F84;;}
.single-post .content-in h3{border-bottom:solid 2px #083F84;border-left:none;border-top:none;border-right:none;padding:5px 10px;font-size:20px;}
.single-post .content-in h4{padding:10px;font-size:18px;background:#ccd9ea;border:none;}
#sidebar h3 {border-bottom: none;background:#083F84;color: #fff;}
.single-column .content-in{justify-content:space-around;max-width:1200px;width:100%;margin-top:120px;}
.single-column .content-in h2{font-size:24px;color:#fff;padding:15px;margin:50px 0 20px 0;background:#083F84;}
.single-column .content-in h3{border-bottom:solid 2px #083F84;border-left:none;border-top:none;border-right:none;padding:5px 10px;font-size:20px;}
.single-column .content-in h4{padding:10px;font-size:18px;background:#ccd9ea;border:none;}

.error404 .sidebar{display:none;}
.error404 .main{width:100%;}
.error404 .content-in{display:block;}
.error404 div.sidebar{display:none;}
.not-found{width:40%;}
.error404 .post{text-align:center;}

.banner-area{display:flex;justify-content:center;gap:20px;margin-top:50px;}
.banner-area a{width:300px;}

.sp-wrap{display:flex;gap:20px;}
.sp-gallery{width:40%;}
.sp-info-bx{width:60%;}
.sp-title{color:#083F84;font-size:1.8rem;}
.sp-cart{display:flex;gap:10px;margin:10px 0;}
.sp-qty{width:45px!important;text-align: center;}
.sp-related-grid{display:flex;gap:20px;}
.sp-related{margin-top:100px;}
.sp-related-title{color:#083F84;font-size:1.5rem;text-align:center;margin-bottom:30px;}
.coupon .input-text{width:180px!important;font-family: 'Zen Maru Gothic', sans-serif;}
.coupon .button{background:#083F84!important;color:#fff!important;font-family: 'Zen Maru Gothic', sans-serif;}
.cart .button{background:#083F84!important;color:#fff!important;font-family: 'Zen Maru Gothic', sans-serif;}
.checkout-button{background:#083F84!important;color:#fff!important;font-family: 'Zen Maru Gothic', sans-serif;}
#place_order{background:#083F84!important;color:#fff!important;font-family: 'Zen Maru Gothic', sans-serif;}
.woocommerce-MyAccount-navigation ul{list-style:none;padding-left:0;}
.woocommerce-MyAccount-navigation ul li a{color:#083F84;}
.woocommerce-MyAccount-navigation ul li {padding:10px 5px;border-bottom:solid 1px #083F84;}
.woocommerce-MyAccount-content p a{color:#083F84;}
.woocommerce-account .woocommerce-MyAccount-navigation {width: auto;}
.woocommerce-account .woocommerce-MyAccount-content {width: 75%;}
.woocommerce-address-fields p .button{background:#083F84!important;color:#fff!important;font-family: 'Zen Maru Gothic', sans-serif;margin-top:20px;}
.woocommerce form .form-row {padding: 0;}
.woocommerce-Button{background:#083F84!important;color:#fff!important;font-family: 'Zen Maru Gothic', sans-serif;margin-top:20px!important;}
.woocommerce-EditAccountForm fieldset{padding:20px;}
.ul-dsct{padding-left:20px;margin-bottom:30px;}
.faq-fv{background:url(img/faq-fv.webp);background-size:cover;background-repeat:no-repeat;background-position: 0% 30%;border-radius:20px;padding:30px;}
.shop-fv{background:url(img/shop-fv.webp);background-size:cover;background-repeat:no-repeat;background-position: 0% 30%;border-radius:20px;padding:30px;}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/

/*1200px以下*/
@media screen and (max-width: 1200px){
.header-nav {gap: 20px;}
.header-bx{gap:30px;}
.header-contact{padding:0 20px;}
}

/*1024px以下*/
@media screen and (max-width: 1024px){
  /*必要ならばここにコードを書く*/
.ham-bx{display:block;width: 50px;height: 50px;position:relative;z-index:9999;}
.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: 50%;height: 1px;background-color:#083F84; transition: transform .3s;}
.hamburger.is-active span {background-color:#083F84;}
.hamburger span:nth-child(1) {top: 35%;}
.hamburger span:nth-child(2) { top: 50%;}
.hamburger span:nth-child(3) {top: 65%;}
.drawer {display:block;visibility: hidden;opacity: 0;position: fixed;top: 0;left: 0;z-index:5; width: 100%; height: 100%;transition: opacity .3s, visibility .3s;transition: opacity .3s, visibility .3s;background:#f4f4f4;}
.drawer.is-active {visibility: visible;opacity: 1;}
.sp-menu-bx {flex-direction: column;display: flex;width: 90%;margin: auto;margin-top:30px;background:#fff;border-radius:20px;padding: 20px;}
.drawer-inner{width:100%;margin-top:100px;}
.sp-nav{margin:0;}
.sp-nav{padding-left:0;}
.sp-nav li {list-style:none;margin-bottom:10px;}
.sp-nav li a{text-decoration:none;font-size:0.9rem;}
.sp-nav > li > ul {display: none;overflow: hidden;padding-left:0;}
.sp-nav > li.is-open > ul {display: flex;margin:0 0 10px 0;max-height: 500px;}
.sp-nav > li > ul {max-height: 0;transition: max-height 0.3s ease;display:flex;gap:10px;}	
.sp-nav > li > ul > div > li{border-bottom:none;}
.sp-nav > li > ul > div{margin-top:20px;}
.drawer-inner .header-contact{margin-top:30px;}

.tagline {margin: 0;}
.content-in {margin-top: 60px;}
.header-in{background: transparent;height:80px;}
.header-ctt{height:80px;background:transparent;}
.fv { margin-top:100px;height:550px;}
.fv img { object-position: 70%;height:550px;}
.sp-br{display:block;}
.header-bx{display:none;}
.logo-header img {width: 55px;height: auto;}
.logo-area{padding-left:10px;}
	
.fv-caption p {font-size: 1rem;}
.fv-caption h2 { font-size: 1.8rem;}
.fv-dots {right: auto;top: auto; flex-direction: row;left: 50%;bottom: -40px;transform: translateY(-50%) translateX(-50%);-webkit- transform: translateY(-50%) translateX(-50%);}
.blog-bx {gap: 30px;padding: 30px 20px;flex-direction: column;}
.blog-ctt { width: 100%;}
.list-ctt{width:70%;}	
.list-img {width: 30%;}	
.list-img img{height: 80px;object-fit:cover;}
.list-date {font-size: 1rem;}
.list-ttl {font-size: 1rem; line-height: 1.2;}
.about h2 {font-size: 1.8rem;}
.about p{width:90%;}
.product-section {padding: 50px 0 100px 0;}
.product-section h2 {font-size: 1.8rem;}
.top-products {grid-template-columns: repeat(1, 1fr);}
.top-product-thumb {height: 230px;width: 100%;}
.top-product-thumb img{height: 230px;width: 100%;}
.footer-area {padding: 50px 0;}
.footer-nav {gap: 0;flex-direction: column;align-items: center;}
.banner-area {flex-direction: column;align-items: center;}
.banner-area a {width: 60%;}

.page-fv .inner {height: 250px;}
.page-ttl {font-size: 2rem;}
.about-fv {padding: 20px;}
.page-fv {height: 250px;}
.breadcrumb {font-size:0.9rem;}	
.company-table { width: 100%;}
.h1-page {font-size: 0.9rem;width: 90%;}
.under-inner {padding: 50px 20px;}
.contact-bx {padding: 0;}
.contact-table th {width: 100%; justify-content: flex-start;}
.contact-table td {width: 100%;display: block;}
.h3-pp {font-size: 1.2rem;}
.product-grid {grid-template-columns: repeat(1, 1fr);}
.product-thumb {height: 230px;width: 100%;}
.product-thumb img{height: 230px;width: 100%;}	
.product-category-filter {display: grid;grid-template-columns: repeat(2, 1fr);}
.pdate {font-size: 1rem;}
.pcate {font-size: 0.8rem;}
.pttl {font-size: 1rem; line-height: 1.2;}	
.new-list {grid-template-columns: repeat(1, 1fr);}
.sp-wrap { flex-direction: column;}
.sp-gallery {width: 100%;}
.sp-info-bx {width: 100%;}
.sp-title {font-size: 1.4rem;}
.sp-related-title {font-size: 1.2rem;margin-bottom: 10px;}
.sp-related {margin-top: 50px;}
.more-btn {padding: 10px 0;}
.coupon .input-text {width: 130px !important;}
.woocommerce-account .woocommerce-MyAccount-navigation {margin-bottom:30px;}
.woocommerce-account .woocommerce-MyAccount-content {width: 100%;}	
.woocommerce-account .woocommerce-MyAccount-navigation {width: 100%;}	
}

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


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