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

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

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

.button-wrap {margin:50px auto;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: space-around;
justify-content: center;
align-items: center;}
.button-wrap a {width:48%;margin:1%;background:#222;color:#f5f5f5;padding:1em;font-size:150%;border-radius:8px;text-align:center;text-decoration:none;font-weight:600;}
.button-wrap a:hover {opacity:0.8;transition:0.4s;}

p.flow a {display:inline-block;margin:1.5em 0;background:#222;color:#f5f5f5;padding:1em 1.5em;font-size:100%;border-radius:8px;text-align:center;text-decoration:none;font-weight:600;transition:0.4s;}
div.flow a {display:inline-block;margin:1.5em 0;background:#222;color:#f5f5f5;padding:1em 1.5em;font-size:100%;border-radius:8px;text-align:center;text-decoration:none;font-weight:600;transition:0.4s;}
.flow a:hover {opacity:0.7;transition:0.4s;}

.single.categoryid-6 .entry-content h3 {font-size:18px;line-height:170%;}
.single.categoryid-6 .entry-content table td {padding:0.7em 1em !important;border:1px solid #888;}
.single.categoryid-6 .entry-content table td.item {width:8em;}


/*　取り扱い商品一覧　*/

h1.category-title.category-item {font-size:19px;}
.subcategory {display:block;margin:5vw 0;background:#e7e5dd;padding:1.5em;width:100%;text-align:center;}
.subcategory h2 a {text-decoration:none;color:#000;font-size:16px;}
.product-itemwrap {overflow:auto;margin:40px auto;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;}
.product-itemwrap {width:100%;margin:0;padding:0;}
.product-itemwrap .item {width:23%;margin:1%;}
.product-itemwrap .item .thumbnail {overflow:hidden;}
.product-itemwrap .item img {width:100%;height:auto;}
.product-itemwrap .item img:hover {transform: scale(1.05); transition:0.7s;}
.product-itemwrap .item h2 a {text-decoration:none;color:#000;font-size:16px;}
.product-itemwrap .item p {font-size:12px;margin-bottom:30px;}
.product-itemwrap .item .entry-date {display:none;}

@media screen and (max-width: 834px) {
	.product-itemwrap .item {width:48%;margin:1%;}
}	
	
	
/*　BASIC */

.single .eye-catch,
.categoryid-6 .date-tags,
.admin-pv,
.cat-label {display:none;}

.entry-content h2,
.entry-content h3,
.entry-content h4 {border:none;padding:0;background:transparent;}
.entry-content p.center {text-align:center;}
p.small {font-size:12px;}

.width70 {margin-left:15%;margin-right:15%;}
.container.block {background:#f5f5f5;padding:5%;overflow:auto;margin-bottom:30px;}
.container.block .img-cont {width:35%;margin:20px 0 0 5%;float:right;}
.container.block .text-cont {width:55%;margin:70px 5% 0 0;float:left;}
.container.block .img-cont img {margin:15px auto;}
.container.block .img-cont img:first-child {margin-top:5vw;}

h1.archive-title {margin-bottom:2.5em;font-size:18px;}
h1.archive-title span {display:;}
.list article .entry-card-content {padding:0 5%;}
.list article h2.entry-card-title {margin:1.2em 0 0.8em;}
.list article .entry-card-snippet {line-height:180%;}
.list article .post-date {font-size:12px;margin-bottom:25px;display:block;}

.date-tags {margin:2vw 0 5vw;}
.sns-share {margin:7vw 0;}

.category-tenjijo .list article .post-date {display:none;}

aside {font-size:12px;}

.icon-wrap {position:fixed;right:0;bottom:15%;z-index:3;background:rgba(0,0,0,0.7);padding:1vw;border-top-left-radius:5px;border-bottom-left-radius:5px;}
.icon-wrap div {margin:10px 0;pointer-events: auto;}
.icon-wrap div img {width:30px;margin:5px 0;}

.home .popup .icon-wrap {display:block;}
.popup .icon-wrap {display:none;right:7%;bottom:1.5%;border-top-right-radius:5px;border-bottom-right-radius:5px;margin:0 2%;padding:0.8em 1em;}
.popup .icon-wrap p {font-size:11px;line-height:130%;}
.popup .icon-wrap p a {color:#fff;text-decoration:none;}
.popup .icon-wrap:hover {background:rgba(0,0,0,0.5);}

.logo img.site-logo-image {width:200px;max-width:60%;}

.logo-menu-button img.site-logo-image {width:130px;max-width:80%;}
.mobile-header-menu-buttons .navi-menu-caption,
.mobile-header-menu-buttons .search-menu-caption {display:none;}
.mobile-header-menu-buttons .menu-drawer:before {content:"";display:block;height:100px;width:100px;background-image:url(https://pelletman.jp/wp/wp-content/uploads/fav.png);background-size:contain;margin:20px auto 0;}

nav.navi .navi-in ul.menu-header li.menu-item .caption-wrap .item-label {font-size:14px !important;}


.category .article-header {position:relative;}
.category .article-header h1.entry-title {color:#fff;position:absolute;top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index:999;}
.category .eye-catch {
	width: 100%;
	max-width: 1200px;
	height: 450px;
	margin:0 auto;
	overflow: hidden;
	position: relative;
	}
.category .eye-catch img {	
	position: relative;
	top: 50%;
	left: 50%;
	width: 100%;
	height: auto;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	}

.breadcrumb {margin:8vw 0 0;}

.bannerarea {background:#eaeaea !important;}
.footer-wrap h3.tel {color:#222 !important;}
.footer-wrap li.menu-item:before,
.footer-wrap li.menu-item:after {content:none !important;}
.sns-wrap {margin:5vw 0;}
.sns-wrap img {width:35x;height:35px;margin-right:12px;}

.grecaptcha-badge { visibility: hidden; }

@media screen and (max-width: 834px) {
	.width70 {margin-left:2%;margin-right:2%;}
	.container.block .img-cont,
	.container.block .text-cont {width:90%;margin:20px 5%;float:none;}
	.container.block .img-cont {display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		justify-content: space-between;}
	.container.block .img-cont img {width:48%;}
	.container.block .img-cont img:first-child {margin-top:20px;}
	.category .eye-catch {
	height: 200px;
	}
	.category .eye-catch h1.entry-title {
	font-size:23px;
	top:120px;
	}
}

/*　HOME　*/

.first-wrap.preload .wow.fadeIn,
.first-wrap.preload .wow.fadeInRight,
.first-wrap.preload .wow.jello,
.first-wrap.preload .wow.zoomIn,
.iconwrap.preload .wow.fadeInRight{opacity: 0 !important;}

.top-only {display:none;}
.home .top-only {display:block;}

.first-wrap {position:relative;overflow:hidden;}
.first-wrap .first-image {width:75%;margin:0 20% 0 5%;position:relative;}
.first-wrap .first-image metaslider {z-index:-8;}
.first-wrap .first-image metaslider img {max-width:100%;width:100%;opacity:0.8;}
.first-wrap .metaslider ul.slides li {overflow:hidden;}
.first-wrap .metaslider ul.slides li img {animation: animationZoom 18s ease-out forwards;}
@keyframes animationZoom {
      100% { transform:scale(1.1)} 
    }
.first-wrap img.copy {position:absolute;top:10%;right:7%;width:7.7vw;z-index:2;}
.first-wrap img.greenenergy {position:absolute;bottom:-10vh;left:4%;width:230px;z-index:2;}

.news-wrap {width:80%;margin:0 3% 0 17%;}
.news-wrap h2 {color:#222;font-size:90%;margin-top:3em;margin-left:150px;}
.news-wrap ul.slick-slider {margin:10px 0 0;padding:0;}
.news-wrap ul.slick-slider li {padding:10px;transition:0.7s;}
.news-wrap ul.slick-slider li a {color:#333;text-decoration:none;}
.news-wrap ul.slick-slider li:hover {opacity:0.7;transition:0.5s;}
.news-wrap ul.slick-slider li img {margin:10px auto;border-radius:1px;}
.news-wrap ul.slick-slider li h3 {font-size:15px;}
.news-wrap ul.slick-slider li p {font-size:12px;color:#888;}
.news-wrap ul.slick-slider li p.date {text-align:right;}
.more {clear:both;text-align:right;margin-right:10%;margin-top:15px;margin-bottom:5px;font-size:12px;}
.more a {border:1px solid #888;padding:0.4em 1.5em;color:#888;text-decoration:none;}

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

.home-content section {position:relative;overflow:auto;clear:both;margin:20px 0;padding:30px 0;}
.intro main {width:80%;margin:14.5vw 0 0;position:relative;}
.intro img.title {mix-blend-mode: multiply;width:17vw;z-index:2;}
.intro p {line-height:280%;font-size:1.2vw;font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;}

.home-content section.intro01 {margin:-20px 0 20px;padding:0 0 30px;}
.intro01 main {width:70%;margin:15vw 0 0 30%;}
.intro01 img.title {position:absolute;top:0;left:10%;width:21vw;}
.intro01 .text {position:absolute;top:35%;left:5%;}
.intro01 p {color:#111;}

p.link a {text-decoration:none;font-size:1.6vw !important;font-weight:600;color:#222;}
p.link a:before {content:url(http://okada-design.co.jp/pelletman/wp-content/uploads/arrow.png);display:inline-block;vertical-align: middle;margin-right:10px;}

.intro02 img.title {position:absolute;top:0;right:10%;}
.intro02 p.text {position:absolute;top:20%;left:10%;color:#f5f5f5;}
.intro02 img.image {margin:20px auto;display:block;}

.entry-content p {text-align: justify;text-justify: inter-ideograph;}
.entry-content section h2 {background:transparent;text-align:center;}
.wrap-copy {margin:7vw auto 2vw;zoom:0.5;display:block;}
section.service-wrap {background:#f1eeeb;margin:30px 0 50px;padding:2% 2% 5%;}
section.service-wrap p {display:none;}
section.service-wrap .block p {display:block;font-size:min(1.2vw,18px);}
section.service-wrap .container {width:1300px;max-width:96%;margin:0 auto;overflow:auto;}
section.service-wrap .container.block .img-cont {width:55%;margin:20px 0 0 5%;float:right;}
section.service-wrap .container.block .text-cont {width:35%;margin:70px 5% 0 0;float:left;}

section.service-wrap p.inner-text {display:block;font-size:min(1.2vw,18px);width:800px;margin:1.2em auto;max-width:90%;text-align: justify;text-justify: inter-ideograph;}
ul.service-content {width:1300px;margin:40px auto;padding:0;max-width:100%;}
.service-content {display:flex;justify-content:center;flex-wrap:wrap;}
.service-content a {width:31.333%;margin:1%;background:#fff;padding:0;color:#222;text-decoration:none;}
.service-content a:hover {opacity:0.7;transition:0.4s;}
.service-content li {list-style:none;}
.service-content li img {width:100%;}
.entry-content .service-content li h3 {text-align:center;border:0;margin-top:1em;}
.entry-content .service-content li h3:before {content:url(http://okada-design.co.jp/pelletman/wp-content/uploads/arrow.png);display:inline-block;vertical-align: middle;margin-right:10px;}

.banner-sustainable {display:flex;justify-content:center;width:1500px;max-width:100%;margin:0 auto 20px;overflow:auto;}
.banner-sustainable img:hover {opacity:0.7;transition:0.4s;}


section.service-wrap.experience .container {width:1300px;max-width:96%;margin:5vw auto;overflow:auto;background:transparent;}
.experience img.wrap-copy {margin:2vw auto;}
.experience p.text {position:absolute;top:20%;left:10%;color:#f5f5f5;}
.experience img.mainimage {margin:20px auto;display:block;}


ul.store-slider {margin:10px auto 60px;padding:0;overflow:auto;}
ul.store-slider li {padding:10px;}
ul.store-slider li a {color:#333;text-decoration:none;}
ul.store-slider li img {margin:10px auto;}
.entry-content ul.store-slider li h3 {font-size:15px;text-align:center;border:0;margin:0;padding:0;}
.entry-content ul.store-slider li h3:before {content:url(http://okada-design.co.jp/pelletman/wp-content/uploads/arrow.png);display:inline-block;vertical-align: middle;margin-right:10px;}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
.news-wrap h2 {text-align:center;margin-left:0;}
}

/*834px以下*/
@media screen and (max-width: 834px){
.list article h2.entry-card-title {font-size:14px;margin:0.8em 0;}
.list article .entry-card-content {padding:0 0;}
.list article .entry-card-snippet {display:block;font-size:11px;}
.icon-wrap {display:none;}
.popup .icon-wrap {right:auto;left:2%;bottom:1.5%;}
.first-wrap .first-image {width:100%;margin:0;}
.first-wrap .first-image .metaslider img {width:100%;height:50vh;object-fit:cover;}
.first-wrap img.copy {top:6%;right:8%;width:13vw;filter: invert();}
.first-wrap img.greenenergy {bottom:-18%;left:2.5%;width:28vw;}
.news-wrap {width:95%;margin:0 0 0 5%;}
.news-wrap ul.slick-slider {margin:0;}
.news-wrap ul.slick-slider li h3 {font-size:11px;}
.news-wrap ul.slick-slider li p {font-size:10px;}
.intro main {margin:16vw 0 0;}
.intro01 main {margin:35vw 0 0 30%;}
.intro img.title {width:36vw;margin-top:0px;}
.intro01 img.title {left:5%;width:39vw;}
.intro02 img.title {right:5%;}
.intro01 .text,
.intro02 p.text {line-height:230%;position:relative;top:auto;left:auto;margin-left:10vw;}
.intro01 .text p,
.intro02 p.text {font-size:3.8vw;color:#111;}
p.link a {font-size:3.8vw !important;}
.wrap-copy {margin:10vw auto 5vw;}
section.service-wrap {padding:5% 2% 5%;}
section.service-wrap .block p,
section.service-wrap p.inner-text {font-size:min(3vw,14px);}
.wrap-copy {zoom:0.36;}
.service-content a {width:48%;}
.entry-content .service-content li h3 {zoom:0.75;}
section.service-wrap .container.block .img-cont,
section.service-wrap .container.block .text-cont {width:80%;margin:20px 10%;float:none;}
.sustainable-wrap {margin-top:30px;}
.banner-sustainable {flex-wrap: wrap;margin-top:30px;}
.banner-sustainable img {width:80%;margin:0 10%;}
}

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



/*=================================
スライダーのためのcss
===================================*/
.slick-slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
   width:94%;
   margin:0 auto;
}
.slick-slider img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}
/*slickのJSで書かれるタグ内、スライド左右の余白調整*/
.slick-slider .slick-slide {
    margin:0 10px;
}
/*矢印の設定*/
/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #666;/*矢印の色*/
    border-right: 2px solid #666;/*矢印の色*/
    height: 15px;
    width: 15px;
}
.slick-prev {/*戻る矢印の位置と形状*/
    left: -1.5%;
    transform: rotate(-135deg);
}
.slick-next {/*次へ矢印の位置と形状*/
    right: -1.5%;
    transform: rotate(45deg);
}
/*ドットナビゲーションの設定*/
.slick-dots {
    text-align:center;
	margin:20px 0 0 0;
}
.slick-dots li {
    display:inline-block;
	margin:0 5px;
}
.slick-dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#ccc;/*ドットボタンの色*/
}
.slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}


/*=================================
フッター移植
===================================*/
footer.footer-container {display:none;}

.bannerarea {
	margin-bottom:40px;
	padding:20px 0;
	overflow:auto;
	}
.bannerarea .container .widget {
	width:23%;
	margin:1%;
	float:left;
	}
.bannerarea img {border:1px solid #e5e5e5;box-sizing: border-box;}

#footer {
	padding:40px 0 80px;
	color:#555 !important;
	}
#footer .container,
.bannerarea .container {width:1300px;max-width:96%;margin:0 auto;}
#footer img {
filter: invert();
}
#footer a {
	color:#555 !important;
	}
#footer div.footerbox1 {
	width:25%;
	float:left;
	margin:2.5%;
	text-align:left;
	}
#footer div.footerbox1 h3 {
	font-size:17px;
	margin: 1.5em 0 0.4em;
	}
#footer div.footerbox1 p {
	font-size:12px;
	margin:0.1em 0;
	}
#footer div.footerbox1 h3.tel {
	color:#222;
	font-size:23px;
	font-weight:normal !important ;
	}
#footer div.footerbox1 h3.tel img {
	width:27px;
	height:27px;
	margin-right:8px;
	}


#footer div.footerbox2 {
	width:65%;
	float:left;
	margin:2.5%;
	}
#footer div.footerbox2 div.footer-menu {
	width:23%;
	float:left;
	margin:1%;
	}
#footer div.footerbox2 div.footer-menu .textwidget {
	clear:none !important ;
	}
#footer div.footerbox2 ul {
margin:0;padding:0;	
}
#footer div.footerbox2 ul li {
	position: relative;
	list-style:none;
	font-size:13.6px;
	margin:1.2em 0;
}
#footer div.footerbox2 ul li a {
	text-decoration:none;
}
#footer div.footerbox2 ul li ul li {
	margin:1.2em;
}
#footer .footer04 img {
	filter: invert();
	zoom:0.5;
	opacity: 0.7;
	margin:10px 10px;
	bottom:0;
	}
#footer .footer04 img:hover {
	opacity: 1.0;
	}

#footer .copyr {
	font-size:12px;
	}
@media screen and (max-width: 834px){
	.bannerarea .container .widget {
	width:48%;
	margin:1%;
	}
	#footer div.footerbox1,#footer div.footerbox2 {
	float:none;
	width:100%;
	margin:0;
	}
	#footer div.footerbox1,#footer div.footerbox1 h3 {
	text-align:center;
	}
	#footer div.footerbox2 {
	margin-top:40px;
	}
	#footer div.footerbox2 ul li {
	margin:0.2em ;
	}
}
@media screen and (max-width: 480px) {
	.footer-menu,.footer-menu1,.footer-menu2,.footer-menu3,.footer-menu4 {display:none;}
}