@charset "utf-8";

/* �v�f�̃��Z�b�g */
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 �v�f�͕s�Ž��Ŏg�� */
hr { display: none; }

/* table �v�f�̕����T�C�Y�Œ� */
table {
 font-size: inherit;
 font: 100%;
}

/* �����T�C�Y 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;
}

/* �S�̐ݒ� */
html, body {
 font: 13px marugo,"HG�ۃS�V�b�NM-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;
 background-attachment: fixed;
}

/* �S�̃����N */
a {
 outline: medium none;
 font-size: 150%;
}

a:link {
 color: #000;
}

a:visited {
 color: #089765;
}

a:hover {
 color: #C62F64;
}

a:active {
 color: #000;
}

a:hover img.over, #questioncontents dd:hover, #questioncontents dt a:hover, .memberservice a:hover {
 opacity: 0.7;
 filter: alpha(opacity=70);
 -ms-filter: "alpha( opacity=70 )";
}

.backcolor2:after {
 background: #F1F9CF;
}

.backcolor3:after {
 background: #FAFAF5;
}

.paddingtop {
 padding-top: 3%; 
}

.grab-mv01 {
 opacity: 0;
}
.mv01 {
 opacity: 1.0;
}

.mvtransition {
 transition: .8s;
}

/* wrapper */
#wrapper{
margin: 0 auto;
}

/* hタグ */

h1{
 font-size: x-large;
 font-family: "ＭＳ 明朝",serif;
 color: #FFF;
 font-weight: bold;
 padding: 2% 0;
 text-align: center;
 background: #0C3D20;
}

h2{
 position: absolute;
 top: 50%;
 transform: translate(10%,-50%);
 width: 80%;
}

h3 {
 background: #0C3D20;
 text-align: center;
 padding: 1% 0;
}

h3 img {
 width: 60%;	
}

h4 {
 text-align: center;
}

h4 img {
 width: 62%;
}


h5 {
 display: inline-block;
 position: relative;
 top: -12px;	
 text-align: center;
 font-size: 174%;
 font-weight: bold;
 letter-spacing: 2px;
 font-family: "ＭＳ 明朝",serif;
}

h5 span {
 z-index: 1;
 position: relative;
}

h5:after {
 content: "";
 display: block;
 width: 100%;
 height: 100%;
 z-index: 0;
 position: absolute;
 padding:0 15px;
 left: -15px;
 top: 0;
}

h6{
 color: #D0111B;
 font-weight: bold;
 padding: 1% 0;
 text-align: center;
 font-size: 197%;
}
/*ヘッダー*/
header, .widthall {
 width: 960px;
 margin: auto;
}

#header_images{	
 background: url(../images/topbanner.jpg) 0 0 no-repeat;
 position: relative;
 background-size: contain;
 height: 0;
 padding-top:  74.98%; 
}

#toptext {
 position: absolute;
 top: 67%;
 left: 7%;
 transform: translate(7%,-67%);
 background: #0C3D20;
 padding:  2%;
 color: #fff;
 width: 30%;
 font-weight: bold;
 font-family: "ＭＳ 明朝",serif;
 font-size: 198%;
 margin: 2% 0 0;
}

.memberservice{
font-size: 116%;
font-weight: bold;
text-align: center;
color: #fff;
background: #F00;
padding: 1% 0;
}

/* グラブについて */

#grab_comment {
 margin: 5% auto 0;
}

.comment-title{
 display: inline-block;
 position: relative;
 top: -12px;
 letter-spacing: 5px;
 font-size: 161%;
 font-weight: 800;
 color: #d0111b;
 margin: 0 0 1%;
 text-align: center;
 font-weight: 800;
}

.comment-title span {
 position: relative;
 z-index: 1;
}

.comment-title:after {
 content: "";
 display: block;
 width: 100%;
 height: 100%;
 padding: 0 15px;
 background: #fff;
 position: absolute;
 top: 0;
 left: -15px;
 z-index: 0;
}

.grab_text{ 
 margin: 5% 0 0;
}

.comment_text {
 width: 70%;
 float: left;
 margin-right: 4%;
 margin-top: 5px;
 line-height: 1.8em;
 border-top: 3px solid #d0111b;
 text-align: center;
}

.grabimages {
 width: 25%;
 float: left;
}	
	
.grabimages img{
width: 100%;
 box-shadow: 7px 7px 2px #999;
}

/*手揉みオイル型付け作業工程*/

#grab-process , #question , #product_banner{
 margin-top: 5%; 
}

.process_contents {
 padding: 5% 0; 
}

.process_area {
 border-top: 2px solid #000;	
 text-align: center;
 margin-top: 4%;
}

.process-img {
 margin-top: 1%
}

.process-img1 {
float: left;
width: 31%;
}

.process-img2 {
float: left;
width: 22%;
}

.process-img3 {
 float: left;
 width: 47%;
}

.img1padding, .img1-2padding  {
 padding-right: 3%; 
}

.img2padding, .img2-2padding {
 padding-right: 3%; 
}

.subpreparationtext {
 line-height: 1.8em;
 margin-top: 2%; 
}

.completetext {
 line-height: 1.8em;
 margin: 3% 0 0 3%; 
 width: 43%;
 float: left;
}

/*Q&A*/

#questioncontents{
 font-size: 108%;
}

#questioncontents dd {
 border-bottom: 1px #000 dotted;
 margin: 10px 0 5px;
 padding-bottom: 3px;
 cursor: pointer;
}

#questioncontents dt {
 display: none;
 color: #D0111B;
 font-weight: 800;
}

/*バナー*/

#product_banner {
 text-align: center;
}

.banner{
 margin-top: 3%;
}

.product_text, .swk_text {
 font-size: 191%;
 font-weight: bold;
}

#product_banner ul {
 font-weight: bold;
 margin: 2% 0 5%;
}

#product_banner li {
 width: 42%;
 text-align: center;
 float: left;
 font-weight: bold;
 margin: 3% 4% 0;
}

#product_banner li a {
 display: block;
 text-decoration: none;
 outline: none;
 padding: 3%;
 background: #fff;
 color: #0C3D20;
 border: 3px solid #0C3D20;
 font-size: 131%;
}

#product_banner li a:link {
 color: #0C3D20;
}

#product_banner li a:visited {
 color: #0C3D20;
}

#product_banner li a:hover {
 border: 3px solid #0C3D20;
 background: #0C3D20;
 color: #fff;
}

#product_banner img {
 margin-top: 1%;
 width: 100%;
}

/*.memberservice{
font-size: 100%;
font-weight: bold;
text-align: center;
color: #F00;
text-shadow: 1px 1px #FFF,
    -1px 1px #FFF,
    1px -1px #FFF,
    -1px -1px #FFF;
}*/


.orderpage:hover {
filter:alpha(opacity=80);
opacity:0.5;
margin: 0 auto;
}

footer {
 background: #0C3D20;
 color: #fff;
 font-size: 85%;
 padding: 10px;
 margin-top: 3%;
}


footer p{
text-align: center ;
}

a:link {
color: #ffffff;
font-size: 85%;
}

a {
outline: medium none;
outline-color: initial;
outline-style: none;
outline-width: medium;
}

.btn-box {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin-top: 15px;
}

.btn-flat-border {
    display: inline-block;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    color:#fff;
    background: #0C3D20;
    border: solid 3px #0C3D20;
    width: 300px;
}

.btn-flat-border:link {color:#fff;background: #0C3D20;}
.btn-flat-border:visited {color:#fff;background: #0C3D20;}

.baseball-banner-box {
    margin: 0 auto;
    text-align: center;
    width: 610px;
    max-width: 100%;
}

.baseball-banner-box li  {
    display: inline-block;
    box-sizing:border-box;
    margin-bottom: 5px;
}

.baseball-banner-box img {
    width:200px; /*画像のはみだしを防ぐ*/
    height: auto; /*画像の縦横比を維持 */
}

.baseball-banner-box img:hover {opacity: 0.7;}

.index-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 15px 0;
}

.index-list img {
    width: 500px;
    height: auto;
    margin: 10px 0;
}

.index-list img:hover {opacity: 0.7;}

/*
a:-webkit-any-link {
color: -webkit-link;
cursor: pointer;
text-decoration: underline;
}*/


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

#wrapper, header{
width: 100%;
margin: auto;
}
	
.widthall {
 width: 94%;
 margin: auto;
}
}


@media screen and (max-width:767px) {
		
h1{
 font-size: 131%;
}
	
h2 {
 top: 45%;
 transform: translate(5%,-45%);
 width: 90%;
}
	
h3 img {
 width: 95%;
}
	
h4 img {
 margin-bottom: 3%;
}	
	
h4 img {
 width: 100%;
}

h5 {
 font-size: 146.5%;
}
	
h5:after {
 padding: 0 10px;
 left: -10px;
}
	
/* ヘッダー */
#toptext {
 top: 68%;
 left: 4%;
 transform: translate(7%,-68%);
 width: 35%;
 font-size: 153.9%;
}
	
.memberservice {
 font-size: 93%;
}
	
/* グラブについて */
	
.grab_text {
 margin: 7% 0 0;
}	
	
.comment_text {
 width: 100%;
 float: none;
}
	
.comment-title {
 font-size: 146.5%;
}

	
.grabimages {
 width: 100%;
 float: none;
 margin: 5% 0 0;
}
	
.grabimages img {
 box-shadow: none;
}
	
/*手揉みオイル型付け作業工程*/
	
.img1-2padding {
 padding: 0; 
}
	
.process-img2 {
 width: 48%;
 margin: 2% 0;
}
	
/*Q&A*/

#questioncontents {
 font-size: 100%;
}
	
/*バナー*/

.product_text, .swk_text {
 font-size: 100%;
}

#product_banner li {
 width: 44%;
 margin: 3% 3% 0;
}

#product_banner li a {
 font-size: 93%;
}

}

@media screen and (max-width:414px){
	
#grab-process, #question, #product_banner {
 margin-top: 10%;
}	
	
h1{
 font-size: 93%;
}


h5 {
 font-size: 116%;;
 letter-spacing: 1px;
 top: -9px;
}
	
h5:after {
 padding: 0 5px;
 left: -5px;
}
	
/* ヘッダー */
#toptext {
 top: 72%;
 left: 4%;
 transform: translate(7%,-72%);
 width: 40%;
 font-size: 123.1%;
}
	
.memberservice {
 font-size: 77%;
}
	
/* グラブについて */
	
.grab_text {
 margin: 15% 0 0;
}	
	
.comment_text {
 width: 100%;
 float: none;
}
	
.comment-title {
 font-size: 123.1%;
 letter-spacing: 3px;
}
	
.comment-title:after {
 padding: 0 10px;
 left: -10px;
}
	
/*手揉みオイル型付け作業工程*/
	
.process_area {
 border-top: 1px solid #000;
}
	
.img1padding {
 padding-right: 0%;
}
	
.process-img2 {
 width: 100%;
 margin: 5% 0;
 float: none;
}
	
.process-img1 {
 float: none;
 width: 100%;
 margin: 5% 0;
}
	
.img2padding, .img2-2padding {
 padding-left: 0;
 padding-right: 0;
}

.process-img3 {
 float: none;
 width: 100%;
 margin: 5% 0;
}
	
.completetext {
 margin: 5% 0;
 width: 100%;
 float: none;
}
	
/*バナー*/

#product_banner li {
 width: 100%;
 margin: 5% 0;
 float: none;
}

#product_banner li a {
 font-size: 116%;
}

.btn-box {
    font-size: 18px;
}

.btn-flat-border {
    width: 250px;
}

.baseball-banner-box img {
    width:150px;
}

}