/*
Theme Name: YOGU2-Theme
Author:motoshi
Description: This is my original theme.
Version: 1.0
*/


*{
  margin:0;
  padding:0;
}
body {
	background-color: #f6f6f6;
  margin:0 auto;
}

header {
  background-color:#E1DCD9;
  height:60px;
  background-size:auto;
}


.attention img {
  height:30px;
  float:left;
  margin-left: 30px;
  margin-top: 15px;
}

.setting img {
  height:30px;
  float:left;
  margin-left: 30px;
  margin-top: 15px;
}


#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 50px;
  background: #3f98ef;
  opacity: 0.6;
  border-radius: 50%;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}


h1 {
  color:#fff;
  text-align:center;
  line-height: 60px;
}

header span {
  color:#7fbfff;
}


body {
    transition: all 1s;
}


p {
  margin-left:20px;
}

.main3 {
  height:100px;
  /* overflow:hidden; */
}

.inline-block_test {
    display: inline-block;      /* インラインブロック要素にする */
    padding:  0px;             /* 余白指定 */
    height: 80px;              /* 高さ指定 */
    width: 30%;
    margin-top: 10px;
}

.tate {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
  float:left;
}

.main1 {
  width:49%;
  height:60px;
  margin-top: 10px;
  float:left;
}
.main2 {
  width:49%;
  height:60px;
  margin-top: 10px;
  float:right;
}

.main1 #search {
  width:100%;
  height:60px;
  /* margin-left: 0; */
}
.main2 #search2 {
  width:100%;
  height:60px;
  /* margin-right: 0; */
}
.main1 a img {
  /* width:30%; */
  height: 100%;
  margin-top: 10px;
  margin-left: 35%;
  line-height: 60px;
}

.main2 a img{
  /* width:30%; */
  height: 100%;
  margin-top: 10px;
  margin-left: 35%;
  line-height: 60px;
}

#keyword {
  font-size:26px;
  margin-top: 10px;
  margin-bottom: 30px;
  width:100%;

}
.modoru img {
  height:30px;
  float:right;
  margin-right: 30px;
  margin-top: 15px;
  /* line-height: 60px; */
}


hr {
 /* margin-top: 20%; */
 height: 5px;
 background-color: #f5deb3;
 width: 100%;
 border: none;
}
.main {
  margin-top: 20px;
}

h2 {
  margin-top:10px;
  margin-left:10px;
  margin-bottom: 10px;
}
.topics {
  text-align: center;
}

.topics img{
  margin: 10px;
}
.topic01 img{
  width:100%;
}

.topic02 img {
  width:47.5%;
  float:left;
}

.topic03 img {
  width:47.5%;
  margin-left:5%;
}

.topicyoutube img{
  width:100%;
  margin-top:4px;
}

.new1 img {
  float:left;
  width:20%;
  margin-left:5%;
}

/* youtube */
.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
h2 {
  color:#202020;
font-family: 'M PLUS Rounded 1c', sans-serif;
}
p {
font-family: 'M PLUS Rounded 1c', sans-serif;
color:#202020;
}


.products {
  float:clear;
}

/* search.html のページ*/
.bbb {
  position: relative;
  float:left;
  width:30%;
  text-align: center;
}
.bbb a img{
  width:90%;
  /* float:left; */
  /* margin: 5% 5% 5% 10%;
  border-radius: 50%; */
  /* text-align: center; */
  /* margin-bottom: 50px; */
}

.searchhtml2 {
  margin-left: 4%;
  margin-right: 0;
}

.bbb .imgmini {
  position: absolute;
  top:0;
  left: 0;
    /* bottom: 30px; */
    width:20%;
    margin: 5% 5% 5% 15%;
    border-radius: 50%;
  /* margin-bottom: 30px; */
  /* height:2em; */
  /* top:10; */
  /* font-size: 11px; */
  /* margin-left: 10px; */
  /* text-align:center; */
}


.bbb span {
  color:#a2a2a2;
  display: none; /* キーワードを隠す */
}

a {
  text-decoration: none;
}

.searchhtml2 {
  margin-left: 6%;
  margin-right: 1%;
}

#list li img {
  width:30%;
  float:left;
  margin: 3px;
}

.search1 #keyword {
  padding-left:10px;
}

/* category.html のページ*/
.category {
  text-align: center;
}

.category img {
  margin: 10px;
  border-radius: 50%;
}
/* 横３つバーsジョン*/
/* #categorylist li img {
  width:19.933%;
  float:left;
  margin: 6.7%;
  border-radius: 50%;
  margin-bottom: 50px;
} */


/* 横４つバージョン*/
/* #categorylist li img {
  width:15%;
  float:left;
  margin: 5%;
  border-radius: 50%;
  margin-bottom: 50px;
} */

.aaa {
  float:left;
  width:24%;
  text-align: center;
}
.aaa a img{
  width:70%;
  /* float:left; */
  margin: 5% 5% 5% 10%;
  border-radius: 50%;
  /* text-align: center; */
  /* margin-bottom: 50px; */
}

.catebody h2{
  margin-bottom:30px;
}

.category {
  margin-left: 4%;
  margin-right: 0;
}


.aaa p {
  margin-bottom: 30px;
  height:2em;
  font-size: 11px;
  margin-left: 0px;
  text-align:center;
}
#list li{
  list-style:none;
}

.stage .list img{
  width:100%;
  margin-top:10px;
}
.list_item{
  width:32%;
  float:left;
  margin-left:1%;
  margin-bottom: 16px;
}
.search-box{
  float:left;
  margin-left:5%;
}
h3 {
  margin-left:3%;
}

.list_item {
  /* background: #eee; */
  overflow: hidden;
  width: 32%;
}
  h5{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
.search-box label {
  display: block;
  float: left;
  width: 100%;
  /* text-align:justify; */
}

/* 商品詳細のページ*/
.products img{
  width:100%;
}

#list li span {
  color:#a2a2a2;
  display: none; /* キーワードを隠す */
}

.swiper-container {
  text-align:center;
}

/* .swiper-slide img{
height: 220%;
} */

.title2 h5, h6 {
  margin-left:10px;
}
.title2 h5 {
margin-bottom:8px;
}

/* タブここから */
.tabs {
  margin-top: 50px;
  padding-bottom: 40px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  margin: 0 auto;}

/*タブのスタイル*/
.tab_item {
  width: calc(100%/4);
  height: 50px;
  border-bottom: 3px solid #5ab4bd;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 11px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab_item:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 0 0 0;
  clear: both;
  overflow: hidden;
}


/*選択されているタブのコンテンツのみを表示*/
#all:checked ~ #all_content,
#size:checked ~ #size_content,
#comment:checked ~ #comment_content,
#maker:checked ~ #maker_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #5ab4bd;
  color: #fff;
}

.tab_content {
  padding-top:10px;
  padding-right:30px;
  padding-left:30px;
  padding-bottom:20px;
 background-color:#e1dcd9;
}

#comment_content {
  padding-top:10px;
}

/* タブここまで */