@charset "UTF-8";

/* =========================================================
CRAFT CSS
========================================================= */






#slide {
    width:960px;
    height:500px;
    margin:0 auto;
    position:relative;
}

#slide ul li{
    width:100%;
    height:100%;
}

#slide img {
    position:absolute;
    left:0;
    top:0;
}

/* CRAFT Gnav
========================================== */

div#craftGnav {
    display: block;
    position: relative;
    width: 960px;
    height: 100px;
    overflow: hidden;
}

div#craftGnav:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
    font-size: 0;
}

div#craftGnav h2 {
    width: 250px;
    float: left;
    display: inline;
    margin-top: 20px;
    margin-left: 5px;
}

div#craftGnav h2 img{
    width: 100%;
}

div#craftGnav ul.button {
    width: 600px;
    float: right;
    margin: 55px 0 0 0;
    padding: 0;
}

div#craftGnav ul.button li {
    width: 118px;
    height: 60px;
    margin-left: 1px;
    float: left;
    display: inline;
    text-align: center;
    font-weight: bold;
}

div#craftGnav ul.button li a {
    display: block;
    font-family: 'Oswald','Noto Sans Japanese',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
    font-weight: 400;
    padding-top: 11px;
padding-bottom: 25px;

    font-size: 120%;
    color: #666;
    background: #fff;
    border: 2px solid #d1d1d1;
    /*borderradius IE8以下未対応*/
    border-radius: 6px;
}

div#craftGnav ul.button li a:hover {
    margin: 2px 0 0 0;

    /*CSS3グラデーション*/
    /*Other Browser*/
    background: #fff;
    /*For Old WebKit*/
    background: -webkit-linear-gradient(
        top,
        #fff 0%,
        #dcdcdc 100%
    );
    /*For Modern Browser*/
    background: linear-gradient(
        to bottom,
        #fff 0%,
        #dcdcdc 100%
    );
}

div#craftGnav ul.button li a:active{
    margin: 2px 0 0 0;
}

div#craftGnav ul.button .current-menu-item a{
    margin: 2px 0 0 0;

    /*CSS3グラデーション*/
    /*Other Browser*/
    background: #fff;
    /*For Old WebKit*/
    background: -webkit-linear-gradient(
        top,
        #fff 0%,
        #dcdcdc 100%
    );
    /*For Modern Browser*/
    background: linear-gradient(
        to bottom,
        #fff 0%,
        #dcdcdc 100%
    );
}

div#craftGnav #shopLink{
    position: absolute;
    display: block;
    top:0px;
    right: 5px;
}




div#craftGnav  div#shop_button {
    width: 120px;
    float: right;
    display: inline;
    margin: 20px 0 0 0;
    padding: 0;
}

/*CRAFT footer
========================================== */

div#craft_footer {
    width: 960px;
    height: 100px;
    background: url(../images/craft/craft_footer_bg.png) repeat-x left top;
    position: relative;
    margin: 0 auto;
}

div#craft_footer p.copyright {
    position: absolute;
    bottom: 20px;
    left: 20px;
    font-size: 85%;
    color: #999999;
}

div#craft_footer ul#footerNav {
    font-size: 90%;
    position: absolute;
    bottom: 20px;
    right: 20px;
}

div#craft_footer ul#footerNav li {
    float: left;
    color: #999999;
}

div#craft_footer ul#footerNav li a {
    font-size: 90%;
    color: #999999;
    font-weight: bold;
}


div#contents div.go_kinou{
    width: 215px;
    float: right;
    display:block;
    position: relative;
}

div#contents div.go_kinou a{
    position: relative;

    display: block;
    margin-bottom: 10px;
}

/*CRAFT INDEX　KINOU コピー
========================================== */
#craftIndex .copyImage{
    margin-left: 65px;
}


/*CRAFT INDEX　KINOU 機能パーツ
========================================== */

div#contents div.kinou:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
    font-size: 0;
}

div#contents div.kinou dl {
    width: 430px;
    float: left;
    display: inline-block;
    margin: 10px 0 0 0;
}

div#contents div.kinou dl dt {
    width: 105px;
    float: left;
    display: inline-block;
    margin: 0 10px 0 0;
}

div#contents div.kinou dl dd {
    width: 315px;
    float: left;
    display: inline-block;
}

div#contents div.kinou dl dd h4 {
    font-size: 160%;
    font-weight: 400;
    color: #000;
    margin: -3px 0 0 0;}
div#contents div.kinou dl dd p {
    font-size: 85%;
    margin: 5px 0 0 0;
}

/*CRAFT INDEX CONTENTS
========================================== */


div#contents div.copy {
    width: 650px;
    float: left;
    display: block;
    margin-bottom: 30px;

}

/*
div#contents div.copy h2{
    font-size: 240%;
    font-weight: 400;
    color: #333333;
    display: block;
    position: relative;
    padding-bottom: 10px;
    letter-spacing: 0.00em;
}
*/

div#contents div.copy h3{
    font-weight: normal;
    position: relative;
    display: block;
    font-size: 120%;
    padding: 5px 10px 5px 10px;
    color: #ffffff;
    background-color: #000000;
}

div#contents div.copy p {
    color: #333333;
    margin: 18px 0 0px 0;
    margin: 18px 0 18px 0;
    font-weight: normal;
    line-height: 1.8em;
    font-size: 115%;
    /*text-indent: 1em;*/
}

div#contents div.copy p.pattern2 {
    line-height: 1.5em;
    font-size: 110%;
    text-align: center;
}

div#contents div.copy2 {
    width: 100%;
    display: block;

}

div#contents div.copy2 h2{
    font-size: 220%;
    font-weight: 400;
    color: #333333;
    display: block;
    position: relative;
    padding-bottom: 10px;
    letter-spacing: 0.00em;
    text-align: center;
    margin-bottom: 10px;
}

div#contents div.copy2 p {
    color: #333333;
    margin: 18px 0 0px 0;
    font-weight: normal;
    line-height: 1.8em;
    font-size: 115%;
    text-indent: 1em;
}


div#contents div.copy2 div.itemImage li{
    margin-right: 17px;
    float: left;
    display: block;
}

div#contents div.copy2 div.itemImage li.lastChild{
    margin-right: 0px;
}

div#contents div.copy2 div.itemImage img{
    margin-bottom: 30px;
}

div#contents div.swflag{
    width: 215px;
    float: right;
    display:block;
    position: relative;
    margin-bottom: 30px;
}

.windstopper{
    width: 205px;
    float: right;
    display:block;
    position: relative;
    margin-top: 20px;
    padding: 5px;
    border: 1px #000000 solid;
}

.windstopper h3{
    margin-bottom: 3px;
}

.windstopper .setsumei{
    margin-top: 2px;
    padding-top: 2px;
    border-top: 1px #cccccc dashed;
    font-size: 70%;
}

.windstopper .syouhyou1{
    margin-top: 2px;
    padding-top: 2px;
    border-top: 1px #cccccc dashed;
    font-size: 70%;
}





/*CRAFT CONC CONTENTS  機能説明ページ
========================================== */

div.conc_main {
    background: #ffffff url(../craft/img/conc/craft_conc1_bg.jpg) no-repeat left top;
    padding: 0 20px 20px 320px;
    border: 1px #cccccc solid;
}

div.conc_main h2 {
    margin-bottom: 10px;
}

div.conc_main p {
    padding-left: 5px;
    margin-bottom: 10px;
    color: #666666;
    text-align: justify;
}

div.conc_main p.lastChild {
    margin-bottom: 0px;
}

div.contbox920 {
    width: 878px;
    background: #e0e0e0 url(../craft/img/conc/craft_conc_bg200x360.jpg) repeat-x left top;
    border-left: 1px solid #d5d5d5;
    border-right: 1px solid #c0c0c0;
    border-bottom: 1px solid #c0c0c0;
    padding: 20px 20px 20px;
    margin: 0 0 20px 0;
    overflow: hidden;
}

p.leftcolum400 {
    width: 400px;
    float: left;
    display: inline;
    margin: 0 20px 0 0;
}

#contents p {
    font-weight: 90%;
    line-height: 1.5;
    text-align: justify;
    text-justify: inter-ideograph;
    margin: 10px 0 0 0;
}

div.contbox440L {
    width: 398px;
    float: left;
    display: inherit;
    background: #e0e0e0 url(../craft/img/conc/craft_conc_bg200x360.jpg) repeat-x left top;
    border-left: 1px solid #d5d5d5;
    border-right: 1px solid #c0c0c0;
    border-bottom: 1px solid #c0c0c0;
    padding: 20px;
    margin: 0 0 20px 0;
    overflow: hidden;
}

div.contbox440R {
    width: 398px;
    float: right;
    display: inherit;
    background: #e0e0e0 url(../craft/img/conc/craft_conc_bg200x360.jpg) repeat-x left top;
    border-left: 1px solid #d5d5d5;
    border-right: 1px solid #c0c0c0;
    border-bottom: 1px solid #c0c0c0;
    padding: 20px;
    margin: 0 0 20px 0;
    overflow: hidden;
}

div.contbox440L　 dl dt {
    float: left;
    width: 60px;
    display: inline;
    margin: 0 20px 0 0;
}

div.contbox440　dl dd {
    float: right;
    width: 60px;
    display: inline;
}

div#material_leftcolumn{
    width: 200px;
    display: inline;
    float: left;
    margin: 10px 20px 0 0;
}
div#material_leftcolumn h3{
    background: #666666;
    margin:20px 0;
    padding: 10px;
    color: #ffffff;
}
div#material_leftcolumn span{
    font-size: 90%;
}

div#material_rightcolumn{
    width: 640px;
    display: inline;
    float: left;
}

div#material_rightcolumn table {
    background: #ffffff;
}

div#material_rightcolumn table .tr-odd {
    background: #d8d8d8;
}


div#material_rightcolumn table td,th{
    font-size:90%;
    padding: 0;
    text-align: left;
    vertical-align: middle;
    padding:0.3em  0.5em;
}
div#material_rightcolumn table th{
    font-weight: bold;
}

div.gttbpFirst{
    margin: 10px 0 0 0;
}

div.gttbp1{
    width:100%;
    background-color: #dddddd;
}

.gttbp1 p{
    margin: 0 0 0 0;
    padding: 5px;
}

div.gttbp2{
    width:100%;
    background-color: #ffff00;
    /*border: 1px solid #cccccc;*/
}

.gttbp2 p{
    margin: 0 0 0 0;
    padding: 5px;
    font-size: 110%;
}



/*CRAFT CONC CONTENTS  機能説明ページ 機能パーツ
========================================== */

div#contents div.kinou_conc:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
    font-size: 0;
}

div#contents div.kinou_conc dl {
    width: 400px;
    float: left;
    display: inline;
    margin: 15px    0 0 0;
}

div#contents div.kinou_conc dl dt {
    width: 40px;
    float: left;
    display: inline;
    margin: 0 5px 0 0;
}

div#contents div.kinou_conc dl dd {
    font-size: 85%;
    margin: 0;
    overflow: hidden;
}

/*CRAFT CONC CONTENTS  機能説明ページ
MATERIAL
========================================== */

p.leftcolum231 {
    width: 250px;
    float: left;
    display: inline;
    margin: 0;
}

div.contbox920 table {
    margin: 10px 0 0 0px;
}

div.contbox920 table td {
    font-size: 80%;
}

/*CRAFT CONC CONTENTS  機能説明ページ
素材ロゴ解説
========================================== */

div#contents div.sozailogo {
    width: 450px;
    display: block;
    margin: 10px 60px 0 0;
    float: left;
    font-size: 85%;
}

div#contents div.sozailogo h3{
    font-size: 1.5em;
}

div#contents div.sozailogo .text{
    zoom:1;
    overflow: hidden;
}
div#contents div.sozailogo div.floatleft {
    width: 70px;
    float: left;
    display: inline;
    margin: 0 10px 0 0;
}


#contents .sozailogo .syouhyou{
    clear: both;
    padding-top: 5px;
    border-top: 1px #ccc dashed;
}

/*  CRAFT SHOP =============================

========================================== */

div#contents_shop {
    background: url(../craft/img/shop/shop_bg.gif) repeat left top;
    margin: 0;
    padding: 20px;
}

div#contents_shop h2 {
    margin: -20px 0 -20px -20px;
    width: 960px;
    height: 400px;
}

div#contents_shop h3 {
    font-weight: normal;
    font-size: 230%;
    text-align: left;
    margin: 20px 0 10px;
    color: #666666;
}

div#shopNav_header {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    text-align: center;
    font-size: 140%;
    font-weight: bold;
    color: #ffffff;
    background: #000000;
}
#shopNav_header h2{
    display: block;
    position: relative;
    padding-top: 5px;
    padding-bottom: 5px;
    font-weight:100;
    font-size: 200%;
    letter-spacing: 0.05em;
}

/*  CRAFT SHOP
SHOP NAVI
========================================== */

ul#shopNav {
    width:100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-align:center;
    margin-top: 250px;
    margin-bottom: 30px;
    display: block;
    position: relative;
    z-index: 100;

}



ul#shopNav li {
    position: relative;
    display:inline-block;
    width: 24%;
    color: #000;
    font-size: 126%;
    line-height: 40px;
    text-align:center;
    margin-left: 0.5%;
    margin-right: 0.5%;
    margin-bottom: 5px;
    background-color: #fff;
    cursor: pointer;
    border-radius: 10px;
    border-bottom: 3px solid #BBB;
    padding-top: 5px;
    padding-bottom: 5px;
}

/*ul#shopNav li a{font: 'Roboto',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif !important;}*/


ul#shopNav li#menu-zenten{
    width: 99%;
    margin-bottom: 0px;

}


ul#shopNav li:hover {
    color: #FFF;
    background-color: #CCC;

}



#shop #shop_img{
    display: block;
    position: absolute;
    z-index: 1;
}

#shop div.icon_desc{
    display: block;
    position: relative;
    margin-bottom: 30px;
    z-index: 50;
}

/*  CRAFT SHOP TABLE
========================================== */

div#contents_shop table {
    width: 920px;
    white-space: nowrap;
    background: #ffffff;
    font-size: 90%;
   /* font: 'Roboto',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;*/

}

div#contents_shop table th {
    text-align: center;
    width: 920px;
    vertical-align: middle;
    background: #000;
    color: #fff;
    /*font: 'Roboto',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif !important;*/


}

div#contents_shop table tr {
    width: 920px;
    height: 2em;
}

div#contents_shop table .tr-odd {
    background: #F0F0F0;
}

div#contents_shop table td {
    width: 920px;
    vertical-align: middle;
    text-align: left;
    /*font: 'Roboto',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif !important;*/


    padding: 0.25em 0.5em;}



/*  CRAFT SHOP icon
========================================== */

div#contents_shop table td span.xc {
    background: url(../craft/img/shop/shop_icon.png) left top;
    text-indent: -9999px;
    display: block;
    width: 30px;
    height: 30px;
    text-align: center;
    margin: 3px auto;
}

div#contents_shop table td span.ski {
    background: url(../craft/img/shop/shop_icon.png) -50px top;
    text-indent: -9999px;
    display: block;
    width: 30px;
    height: 30px;
    text-align: center;
    margin: 3px auto;
}
div#contents_shop table td span.bike {
    background: url(../craft/img/shop/shop_icon.png) -100px top;
    text-indent: -9999px;
    display: block;
    width: 30px;
    height: 30px;
    text-align: center;
    margin: 3px auto;
}
div#contents_shop table td span.od {
    background: url(../craft/img/shop/shop_icon.png) -150px top;
    text-indent: -9999px;
    display: block;
    width: 30px;
    height: 30px;
    text-align: center;
    margin: 3px auto;
}
div#contents_shop table td span.sk {
    background: url(../craft/img/shop/shop_icon.png) -200px top;
    text-indent: -9999px;
    display: block;
    width: 30px;
    height: 30px;
    text-align: center;
    margin: 3px auto;
}
div#contents_shop table td span.run {
    background: url(../craft/img/shop/shop_icon.png) -250px top;
    text-indent: -9999px;
    display: block;
    width: 30px;
    height: 30px;
    text-align: center;
    margin: 3px auto;
}
div#contents_shop table td span.bb {
    background: url(../craft/img/shop/shop_icon.png) -300px top;
    text-indent: -9999px;
    display: block;
    width: 30px;
    height: 30px;
    text-align: center;
    margin: 3px auto;
}
div#contents_shop table td span.sc {
    background: url(../craft/img/shop/shop_icon.png) -350px top;
    text-indent: -9999px;
    display: block;
    width: 30px;
    height: 30px;
    text-align: center;
    margin: 3px auto;
}

div#contents_shop table td span.tennis {
    background: url(../craft/img/shop/shop_icon.png) -400px top;
    text-indent: -9999px;
    display: block;
    width: 30px;
    height: 30px;
    text-align: center;
    margin: 3px auto;
}

div#contents_shop table td span.hr {
    background: url(../craft/img/shop/shop_icon.png) no-repeat -450px top;
    text-indent: -9999px;
    display: block;
    width: 30px;
    height: 30px;
    text-align: center;
    margin: 3px auto;
}

div#contents_shop table td span.canoe {
    background: url(../craft/img/shop/shop_icon.png) no-repeat -500px top;
    text-indent: -9999px;
    display: block;
    width: 30px;
    height: 30px;
    text-align: center;
    margin: 3px auto;
}




/*  CRAFT SIZE表========================================== */


div#size table{
    margin: 20px 0 0 0;
}

div#size table caption{
    line-height: 2em;}

div#size h4{
    font-weight: normal;
    position: relative;
    display: block;
    font-size: 120%;
    margin: 50px 0 10px 0;
    padding: 5px 0 5px 0;
}
div#size p{
    font-size: 95%;
    margin: 5px 0 0 0;
    line-height: 1.5;
}

div#size .sizeCaution{
    list-style: disc;
    list-style-position: outside;
    margin-left: 20px;
}

div#size ul.sizeCaution li{
    list-style:disc;
    list-style-position: outside;
    line-height: 1.8em;
    font-family: 'Noto Sans Japanese',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",Osaka,"ＭＳ Ｐゴシック","MS PGothic";
}

/*  CRAFT SIZE TABLE
========================================== */

div#contents_size {
    background: url(../craft/img/shop/shop_bg.gif) repeat left top;
    margin: 0;
    padding: 20px;
}

div#contents_size table {
    width: 920px;
    white-space: nowrap;
    background: #ffffff;
    font-size: 90%;
}

div#contents_size table th {
    text-align: center;
    width: 920px;
    vertical-align: middle;
    background: #000;
    color: #fff;

}

div#contents_size table tr {
    width: 920px;
    height: 2em;
}

div#contents_size table .tr-odd {
    background: #F0F0F0;
}

div#contents_size table td {
    width: 920px;
    vertical-align: middle;
    text-align: center;

    padding: 0.25em 0.5em;}




div#footLink{
display: block;
position: relative;
text-align: center;
margin-top: 40px;
background-color: #EFEFEF;
padding: 10px 0px 10px 0px;
z-index: 1000;
    border-radius: 5px;
}

div#footLink a{
    margin-left: 3px;
    padding-right: 3px;
    cursor: pointer;
}

div#footLink a img{
    width: 215px;
    width: 170px;
}

sup{
    font-size: 0.8em;
    vertical-align: super;
}

sub{
    font-size: 0.8em;
    vertical-align: sub;
}