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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
@import url('https://fonts.googleapis.com/css2?family=Aoboshi+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap');
html{font-size:100%;}
body{font-family: ryo-text-plusn,"游明朝",YuMincho,'Yu Mincho',Meiryo,"Hiragino Mincho ProN",serif !important;
background:#fff;}
.content-in.wrap{max-width:1000px;}
.img-border{border:1px solid #ccc;}

.navi-in > ul li{height:44px;
line-height:44px;}
.hlt-tm-right .navi-in > ul li a{font-family: 'Aoboshi One', serif;}
.header-container-in.hlt-top-menu .header{padding-top:1em;
padding-bottom:1em;}
.mv{background-repeat:no-repeat;
	background-position:left 50% bottom 200px;
	background-attachment:fixed;
	height:calc(90vh - 250px);
	background-size:cover;
	display:flex;
	align-items:center;
	justify-content:center;
}
.mv h2{font-family: 'Aoboshi One', serif;
letter-spacing:0.1em;
	text-align:center;
color:#fff;
line-height:1.2em;
font-size:2.8rem;
margin-top:-1.5em;}
#front-content.content{margin-top:0;}
#front-content .main{padding:0;}
.desc{background-color:#fff;}
.desc .df{justify-content:center;}
.desc,.topnews,.topgear,.top-youtube{padding-top:5em;
padding-bottom:5em;}
.desc .item1-3 img{border:1px solid #ccc;}
.desc h2,.topnews h2,.topgear h2,.top-youtube h2{font-family: 'Aoboshi One', serif;
letter-spacing:0.1em;}
.desc h2 strong{
	font-family: ryo-text-plusn,"游明朝",YuMincho,'Yu Mincho',Meiryo,"Hiragino Mincho ProN",serif !important;
	letter-spacing:0;
	position: relative;
  padding: 0 1em;
  text-align: center;
	font-size:1.8rem;
margin:0 1em;
}
.desc h2 strong:before{position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 100%;
  height: 1px;
  content: '';
  background: #000;}
.desc h2 strong span{
position: relative;
  padding: 0 1em;
  background: #fff;
}

.desc h3{
margin:2em 0;}
.desc h3 span{padding-left:1em;
padding-right:1em;}

.desc p{margin:1em;}



.inner{max-width:1000px;
margin:0 auto;}

.topnews{background:#fff;}
.topnews h2,.topgear h2,.top-youtube h2{text-align:center;
margin-bottom:2em;}
.topnews figure img{border:1px solid #ccc;}
.df{display:flex;
justify-content:space-between;
flex-wrap:wrap;}

.item1-2{flex-basis:47%;}
.item1-3{flex-basis:32%;}
.item2-3{flex-basis:64%;}

.postlist{max-width:800px;
margin:0 auto;}
.postlist .df{justify-content:center;}
.postttl{width:100%;}
.postlist article{margin-bottom:2em;}
.postttl h3{border-bottom:2px solid #000;
padding-bottom:0.5em;}
.postttl a{color:#000;
text-decoration:none;}
.postttl a:hover{text-decoration:underline;
color:blue;}
.postsummary{margin-top:0.5em;}
.morebt{margin-top:3em!important;}
.morebt a{border:1px solid #000;
background:#fff;
padding:0.8em 5em;
color:#000;
text-decoration:none;}

.topnews .morebt a{
padding:0.5em 3em;}

.morebt a:hover{background:#000;
color:#fff;
text-decoration:none!important;}
.topnews .morebt{text-align:right;
margin-top:0!important;}
.desc .morebt{text-align:center;}
.topgear svg{width:100%;}
.topgear .df{justify-content:center;}
.topgear h3{text-align:center;line-height:1em;}
.topgear h3 a{text-decoration:none;
color:#000;
font-size:12px;}
.topgear article{position:relative;}
.new_label{
	font-family: 'Rock Salt', cursive;
	color:#000;
	font-size:25px;
	text-align:center;
	position:absolute;
	top:0;
	left:0;
}

.sale_label{
	font-family: 'Rock Salt', cursive;
	color:#000;
	font-size:25px;
	text-align:center;
	position:absolute;
	top:0;
	left:0;
}

.topgear figure img{
width:100%;
height:auto;
object-fit:cover;
}
.topgear figure{
width:320px;
height:320px;
	margin:0 auto;
}
.item-txt{max-width:375px;
margin:10px auto;}
.clip-me{
clip-path: url(#clipshape);
}
.instabt .item-label{line-height:0;}
.instabt img{height:44px;}
.shopbt a{background:#333!important;
color:#fff;}
.shopbt a:hover{color:#fff;}
.eye-catch{text-align:center;
margin-bottom:2em;}
.eye-catch img{width:80%;}
.article-header h1{margin-bottom:2em;}

.ywrap-outer{max-width:600px;
width:90%;
margin:0 auto;}
.ywrap{
    padding-top: 56.25%;
    width: 100%;
    position: relative;
}
 
.ywrap iframe{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}

.itembuybt{display:block;
background:#000;
color:#fff;
border:2px solid #fff;
outline:2px solid #000;
padding:1em 2em;
text-align:center;
text-decoration:none;}
.itembuybt:hover{background:#666;
color:#fff;
outline-color:#666;}

.img-fluid{width:100%;}
.itembuyblk{margin-bottom:5rem!important;}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
	.header-container{height:0;}
	.mv{margin-top:-3px;}
	#container{margin-top:3em;}
	.topgear,.topnews{padding-left:20px;
	padding-right:20px;}
	.topgear figure{width:300px;
	height:300px;}
	.desc,.topgear,.topnews{
		padding-top:3em;
		padding-bottom:3em;
	}
	.mv{height:calc(90vh - 200px);}
}

/*slick*/
.wpsisac-slick-slider.design-2 .wpsisac-image-slide .wpsisac-slide-wrap .wpsisac-slide-title{
	font-family: 'Aoboshi One', serif;
  letter-spacing: 0.1em;
  text-align: center;
  color: #fff;
  line-height: 1.2em;
  font-size: 2.8rem;
  margin-top: -1.5em;
}

.wpsisac-slick-slider.design-2 .wpsisac-image-slide .wpsisac-slide-wrap .wpsisac-slider-overlay{
	background:rgba(0,0,0,0);
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	html{font-size:60%;}
	.desc .df{flex-direction:column;}
	.desc h2,.desc h3{text-align:center;}
	.desc .item1-3{text-align:center;
	margin:0 auto 3em;}
	.desc .item1-3 img{max-width:70%;}
	.desc br{display:none;}
	.postttl h3,.postsummary{line-height:1.2em;}
	.topgear .item1-3{flex-basis:47%;}
	.wrap{margin-left:5px;
	margin-right:5px;}
	.shopbt a{text-align:center;}
	.mv{background-image:url(https://hosiror.com/wp-content/uploads/2023/06/mvsp.jpg)!important;}
}
/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	.mobile-menu-buttons .menu-button > a{padding-bottom:10px;}
	.topgear .item1-3{flex-basis:47%;}
	.mv{background-image:url(https://hosiror.com/wp-content/uploads/2023/06/mvsp.jpg)!important;}
}