@charset "utf-8";

/* 要素のリセット */
h1, h2, h3, h4, h5, h6, p, address,
ul, ol, li, dl, dt, dd,
table, caption, th, td, img, form {
 margin: 0;
 padding: 0;
 border: none;
 font-style: normal;
 font-weight: normal;
 font-size: 100%;
 text-align: left;
 list-style-type: none;
}

/* 画像の下にできる隙間をなくす */
img { vertical-align: bottom; }

/* hr 要素は不可視で使う */
hr { display: none; }

/* table 要素の文字サイズ固定 */
table {
 font-size: inherit;
 font: 100%;
}

/* 文字サイズ class */
.text10 { font-size: 77%;}
.text11 { font-size: 85%;}
.text12 { font-size: 93%;}
.text13 { font-size: 100%;}
.text14 { font-size: 108%;}
.text15 { font-size: 116%;}
.text16 { font-size: 123.1%;}
.text17 { font-size: 131%;}
.text18 { font-size: 138.5%;}
.text19 { font-size: 146.5%;}
.text20 { font-size: 153.9%;}
.text21 { font-size: 161.6%;}
.text22 { font-size: 167%;}
.text23 { font-size: 174%;}
.text24 { font-size: 182%;}
.text25 { font-size: 189%;}
.text26 { font-size: 197%;}

/* clearfix */
.clearfix {
 zoom: 1;
}

.clearfix:after {
 content: "";
 display: block;
 clear: both;
}

/* 全体設定 */
html, body {
 font: 13px marugo,"HG丸ゴシックM-PRO",verdana,arial,sans-serif;
 *font-size: small;
 *font: x-small; margin: 0;
 text-align: left;
 word-break: break-all;
 word-wrap: break-word;
 -webkit-text-size-adjust: none;
 height: 100%;
 color: #000;
}

#wrapper {
 width: 960px;
 margin: 0 auto;
}


/* h 要素 */
h1 {
 font-size: 131%;
 color: #fff;
 font-weight: bold;
 text-align: center;
 background-color: #1E3746; 
 padding: 1%;
}

h2 {
 top: 20%;
 position: absolute;
 transform: translate(0%,-20%);
 width: 45%;
 left: 5%;
 text-align: center;
}

h3 {
 font-weight: bold;
 font-size: 198%;
 color: #1E3746;
 text-align: center;
}
 
h4{
 padding: 0 0 5px;
 color: #1E3746;
 font-size: 123.1%;
 font-weight: bold;
 text-align: center;
 border-bottom: 2px solid #1E3746;
}

 
h5 {
 font-size: 161.6%;
 font-weight: bold;
 background: #DFB961;
 color: #fff;
 padding: 1%;
 text-align: center;
}

/* 全体リンク */
a {
 outline: medium none;
}

a:link {
 color: #000;
}

a:visited {
 color: #000;
}

a:hover {
 color: #CB0000;
}

a:active {
 color: #000;
}

/* 共通 */
a:hover img.over {
 opacity: 0.7;
 filter: alpha(opacity=70);
 -ms-filter: "alpha( opacity=70 )";
}

.center {
 text-align: center;
}

.padding5 {
 padding: 5px;
}

.padding10 {
 padding: 10px;
}

.marginright-1 {
 margin-right: 2%;
}

.marginright-2 {
 margin-right: 2%;
}

.margin10 {
 margin: 10px;
}

.left {
 float: left;
}

.right {
 float: right;
}

#kendama_check, #kendama_category, #kendama_description, #movie, #protein_description, #ec_product {
 margin-top: 5%; 	
}

/* ヘッダー */

.backimages {
 background: url(../images/topbannerback.jpg) 0 0 no-repeat;
 background-size: contain;
 height: 0;
 padding-top:  80%;
 position: relative;
}

.kendamaimages {
 top: 20%;
 position: absolute;
 transform: translate(0%,-20%);
 width: 40%;
 left: 55%;
 text-align: center;
}


.kendamabanner_pc {
 top: 80%;
 position: absolute;
 transform: translate(0%,-40%);
 width: 46%;
 left: 22%;
 background: #DFB961;
 padding: 2% 4%;
 text-align: center;
}

.kendamabanner_pc p{
 text-align: center;
 font-size: 123.1%;
 font-weight: bold;
 line-height: 1.8em;
}

.kendamabanner_pc img{
 width: 100%;
 padding: 2% 0;
}

.kendamabanner_sp  {
 display: none;
}

/* メインコンテンツ */

#kendama_content {
 width: 92%;
 margin: 2% auto;
}

/* 商品コンテンツ */

#kendama_check p {
 line-height: 1.8em;
}	

.button img {
 width: 35%;
}

/* 組み合わせ */


.kendama_effect {
 padding: 2%;
 margin-top: 28px;
 width: 27%;
 float: left;
 height: 180px;
}

.backgroundcolor1 {
 background-color: #FBE8CC;
}

.backgroundcolor2 {
 background-color: #FEF9E8;
}

.kendama_effect p {
 line-height: 1.8em;
 padding-top: 4%;
}

/* ECサイト商品 */

.ec_product {
 position: relative;
 height: 320px;
}

.loading {
 position: absolute;
 top: 126px;
 left: 460px;
}

.pro_discount_rate {
 background: #CC146A;
 padding: 1%;
 color: #eee;
}

.recommend {
 float: left;
 width: 23%;
 margin: 2% 1%;
}

.recommend_itemcat {
 font-size: 85%;
 border-bottom: #999 1px dotted;
 font-weight: bold;
 padding: 3px 5px;
}

.recommend_itemimg {
 margin: 10px;
}

.text-center {
 text-align: center;
}
.mario-red {
 color: #CC146A !important;
}

.ec_product_category_sp {
 display: none;
}

.kendama_product {
 text-align: center;
 width: 100%;
 font-weight: bold;
 font-size: 131%;
 margin: 5% 0; 
}

.kendama_product a, .kendama_product a:visited {
 text-decoration: none;
 display: block;
 outline: none;
 padding: 1%;
 border: 1px solid #1E3746;
 color: #1E3746;
}

.kendama_product a:hover{
 color: #fff;
 background: #1E3746;
}

/* youtube */
.videocategory {
 float: left;
 width: 49%;
 margin-top: 5%;
}

.video  {
 position: relative;
 padding-top: 75.25%;
 width: 100%;
}

.video iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}

#movie p {
 padding: 1% 0;
 font-weight: bold;
 width: 100%;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 -webkit-text-overflow: ellipsis; /* Safari */
 -o-text-overflow: ellipsis; /* Opera */
}

@media screen and (max-width:959px){
img {
max-width: 100%;
height: auto;
width /***/:auto;　
}

#wrapper {
 width: 100%;
 margin: auto;
}
	
h4 {
 font-size: 108%;
}
	
.kendama_effect {
 height: 210px;
}
	
}	

@media screen and (max-width:767px){
.none {display:none;}
img {
max-width: 100%;
height: auto;
width /***/:auto;　
}
	
.marginright-1{
 margin-right: 0;
}
	
	
h4 {
 padding: 2px 5px;
 font-size: 116%;
}	
	
h5 {
 font-size: 93%;	
}	
	
	
/* ヘッダー */
	
.backimages {
 padding-top: 90%;
}
	
.kendamabanner_pc {
 top: 77%;
 padding: 2% 0;
 width: 80%;
 left: 10%;
 text-align: center;
}

.kendamabanner_pc p {
 font-size: 116%;
}
	
.kendamabanner_pc img{
 width: 75%;
 padding: 1% 0;
}
	
/* 商品コンテンツ */	

#kendama_content {
 width: 100%;
 margin: 0 auto;
}
	
#kendama_check p {
 width: 90%;
 margin: 0 auto;
}
	
	
/* けん玉のすごさをチェック */
	
.kendama_effect {
 padding: 5%;
 margin-top: 0; 
 width: 90%;
 float: none;
 height: 100%;
}
	
.kendama_effect p {
 padding-top: 5px;
}	

/* youtube */	
	
#moviearea {
 width: 90%;
 margin: 0 auto;
}
	
/* ECサイト商品 */
	
.ec_product {
 height: 100%;
}	
	
.ec_product_category {
 display: none;
}

.ec_product_category_sp {
 display: inline;
}

.ec_product_sp {
 margin: 4% 4% 0;
}

.product_once_waku {
 margin: 3% 1% ;
 width: 23%;
 float: left;
}

.product_img {
 overflow: hidden;
}

.free_shipping_p {
 color: #555555;
 margin-top: 1%;
 font-size: 80%;
}

.product_data {
 padding: 1% 0;
}

.shangpin_shop_ee {
 max-width: 100%;
 border-collapse: collapse;
 border-spacing: 0;
}

.product_discount_rate_td {
 text-align: left;
 font-size: 80%;
 color: #c62f64;
}

.index_pro_price {
 color: #c62f64;
 font-size: 14px;
 font-weight: 600;
 padding-top: 2%;
}

.kendama_product {
 width: 90%;
 margin: 3% auto;
}

}
	
@media screen and (max-width:417px){
.none {display:none;}
img {
max-width: 100%;
height: auto;
width /***/:auto;　
}

h2 {
 top: 10%;
 transform: translate(0%,-10%);
 width: 80%;
 left: 10%;
}	
	
h3 {
 font-size: 123.1%;
}

.marginright-2 {
 margin-right: 0;	
}


/* ヘッダー */
	
.backimages {
 background-size: cover;
 height: 150px;
 padding-top:  100%;
}

.kendamaimages {
 top: 60%;
 transform: translate(0%,-20%);
 width: 80%;
 left: 10%;
}

.kendamabanner_pc {
 display: none;
}
	
.kendamabanner_sp {
 display: block;
 background: #DFB961;
 padding: 4%;
}
	
.kendamabanner_sp p {
 text-align: center;
 font-size: 108%;
 font-weight: bold;
 line-height: 1.8em;
}
	
	
/* 動画 */	
	
.videocategory {
 width: 100%;
}	
	
/* ECサイト商品 */
	
.product_once_waku {
 width: 100%;
 padding: 3% 0;
 float: none;
 border-bottom: 1px solid #CCC;
}
	
.product_img {
 width: 30%;
 float: left;
 overflow: hidden;
}	
	
.product_data {
 width: 65%;
 float: left;
 padding: 1% 0 1% 5% ;
}	
	
.ec_product_category {
 width: 100%;
 padding: 1% 0;
}

.float_left {
 float: none;
}

.ohter_image {
 width: 43%;
}
	
.ec_product_sp {
 height: 500px;
}
	
}

/* フッタ */

fotter p{
 text-align: center;
 margin: 20px 0 0;
 color: #FFFFFF;
 background: #1E3746;
 padding: 1%;
}