@charset "utf-8";
/* 全てのスクリーンサイズで適用される設定・モバイルファースト */

* {
    margin: 0px;
}

html { /* スムースなスクロール */
    scroll-behavior: smooth;
}

body {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 16px;
}

img {
    max-width: 100%;
    height: auto;
    border-style: none;
    vertical-align: bottom;
}

a:link, a:visited {
    color: #0074b4;
}
a:hover, a:active {
    color: #9f004f;
    text-decoration: none;
}


####################################{}

#logo {
    float: left;
}
#menuButton {
    float: right;
}

#nav {
    display: none;
    float: right;
}
#nav ul {
    padding: 0px;
}
#nav ul li {
    list-style-type: none;
}
#nav ul li a:link {
    color: #FFFFFF; /* リンクの文字色 */
    text-decoration: none;
    display: block;
    padding-top: 15px;
    padding-right: 10px;
    padding-bottom: 15px;
    padding-left: 10px;
}
#nav ul li a:visited {
    color: #FFFFFF; /* クリック後のリンクの文字色 */
    text-decoration: none;
    display: block;
}
#nav ul li a:hover {
    color: #FFFFFF; /* マウスカーソルを合わせた時の文字色 */
    text-decoration: none;
    display: block;
}


####################################{}
/* 外枠で包んでいる系 */

header {
    background-color: #000000;
    overflow: hidden;
    position: fixed;
    top: 0;
    z-index: 3;
    opacity: 0.8; /* 1 だとベタ。0で透明 */
    width: calc(100%);
}

/* ホームで１マス目の自動切り替え画像のwrap */
#wrap_topimg {
    clear: both;
    margin-top: 60px; /*header分下げる*/
    position: relative; z-index: 1; /*header下に表示する*/
}

#wrap_aisatu {
    background-color: #000000;
    color: #ffffff;
    padding: 10px;
    text-align: center;
    font-weight: bold;
    font-family: 'Noto Serif JP', serif;
}

/* 他ページで１マス目のwrap_topimgの代わり */
#wrap1 {
    padding: 0 10px;
    clear: both;
    text-align: center;
    margin-top: 60px; /*header分下げる*/
}

#wrap2 {
    padding: 0 10px;
    clear: both;
    text-align: center;
}

footer {
    background-color: #000000;
    color: #ffffff;
    padding: 10px;
    text-align: center;
}

####################################{}
/* 内側で包んでいる系（マージン設定） */

.h1-font-size {
    font-size: 1.5rem;
    margin: 3% auto 3%;
}

.text_oshirase {
    text-align: left;
/*     padding: 5% 0; */
    margin: 0 auto;
}

/* 汎用margin機能だけbox */
.margin_box {
    margin: 3% auto 3%;
}

.text_left {
    text-align: left;
    margin: 3% auto 3%;
}

/* スマホ時は縦に並べるver */
.flexbox_sp {
    display : flex;
    flex-direction: column;
    align-content:space-around;
/*    width: col(100% - 0px);*/
    width: calc(100% - 0px);
    margin: 3% auto 3%;
/*    padding: 5px;*/
}
    .item{
        width:calc(100% - 1rem);
        padding: 0.5rem;
    }
    .item:nth-child(1){
        order: 1;
    }
    .item:nth-child(2){
        order: 2;
    }

/* スマホ時table縦に並べるver */
.tbl01 {
    border: 1px solid #ccc;
    width: 100%;
    margin: 3% auto 3%;
}
    .tbl01 th,
    .tbl01 tr,
    .tbl01 td {
        display: block;
    }
    .tbl01 th {
        background-color: #657dff;
        color: #ffffff;
        font-weight: bold;
        padding: 10px;
    }
    .tbl01 td {
        text-align: left;
        padding: 10px;
    }
####################################{}

.img_text_box {
    position: absolute;
    top: 20%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    background-color:rgba(255,255,255,0.6); /* 透明度0-1.0まで */
    border-radius: 20px;
    margin:0;
    padding:10px 30px;
    text-align: center;
    /*文字の装飾*/
    color: #906404;/*文字は白に*/
    font-weight: bold; /*太字に*/
    font-size: 0.9rem;
    font-family: ‘Sacramento’, cursive;
    line-height:initial;
    z-index: 2;
}

h1 {
    width: calc(100% - 7.5rem);
    display:inline-block;
    padding: 1rem 2rem;
    -webkit-transform: skew(-15deg);
    transform: skew(-15deg);
    color: #fff;
    background-image: -webkit-gradient(linear, left top, right top, from(#209cff), to(#68e0cf));
    background-image: -webkit-linear-gradient(left, #209cff 0%, #68e0cf 100%);
    background-image: linear-gradient(to right, #209cff 0%, #68e0cf 100%);

}

.box_gmap {
    height: 0;
    overflow: hidden;
    padding-bottom: 65%;
    position: relative;
}
.box_gmap iframe {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}

/* 普通の横並びするだけ */
#flexbox {
    display: flex; /* flexbox利用宣言 */
    justify-content: center; /* box自体の中央寄せ */
    margin: 0 auto;
}
    #flexbox .col2 {
        width: calc(100% /2);
    }


/*スポーツの解説で利用*/
.box1 {
    position: relative;
    margin: 2rem 0;
    padding: 0.5rem 1rem;
    border: solid 3px #464646;
    border-radius: 10px;
    text-align: left;
}
.box1 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 1.2rem;
    background: #FFF;
    color: #222222;
    font-weight: bold;
}




/*商品紹介のカテゴリメニュー*/
.prod_catelist {
  width: 98%;
  border-collapse:separate;
  border-spacing: 0;
    margin-bottom: 10px;
}
.prod_catelist th:first-child{
  border-radius: 5px 5px 0 0;
}
/*
.prod_catelist th:last-child{
  border-radius: 0 5px 0 0;
  border-right: 1px solid #3c6690;
}
*/
.prod_catelist th{
  text-align: center;
  color:white;
  background: linear-gradient(#829ebc,#154b81);
  border-left: 1px solid #3670aa;
  border-top: 1px solid #3670aa;
  border-bottom: 1px solid #3670aa;
  box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
  width: 25%;
  padding: 10px 0;
}
.prod_catelist td{
  text-align: center;
  border-left: 1px solid #a8b7c5;
  border-bottom: 1px solid #a8b7c5;
  border-top:none;
  box-shadow: 0px -3px 5px 1px #eee inset;
  width: 25%;
  padding: 10px 0;
}
.prod_catelist td:last-child{
  border-right: 1px solid #a8b7c5;
}
.prod_catelist tr:last-child td:first-child {
  border-radius: 0 0 5px 5px;
}
/*
.prod_catelist tr:last-child td:last-child {
  border-radius: 0 0 5px 0;
}
*/














/* スクリーンサイズ 幅 768px 以上で適用される設定・iPad版の表示 */
@media screen and (min-width: 768px) {
    #menuButton {
        display: none;
    }
    #nav {
        display: block;
        margin-top: 10px; /*PC版のメニュー位置調整*/
    }
    #nav ul li {
        float: left;
        margin-left: -1px;
        display: block;
        padding: 5px;
        margin-top: 5px;
        margin-bottom: 5px;
    }
    #nav ul li a:link {
        color: #ffffff;
        border-top-style: none;
        padding-top: 0px;
        padding-right: 10px;
        padding-bottom: 0px;
        padding-left: 10px;
        display: block;
        -webkit-transition: color 0.5s ease-in-out 0s;
        -moz-transition: color 0.5s ease-in-out 0s;
        -ms-transition: color 0.5s ease-in-out 0s;
        -o-transition: color 0.5s ease-in-out 0s;
        transition: color 0.5s ease-in-out 0s;
    }
    #nav ul li a:visited {
        color: #ffffff;
        border-top-style: none;
        display: block;
    }
    #nav ul li a:hover {
        color: #95e2dd;
        display: block;
    }

    .text_oshirase,
    .margin_box,
    .text_left,
    .flexbox_sp,
    h1,
    .box_gmap,
    table {
        max-width: 768px;
        margin-right: auto;
        margin-left: auto;
        clear: both;
    }


    .aisatu {
        font-size: 1.5rem;
    }

    .flexbox_sp {
        flex-direction:row;
        flex-wrap:wrap;
        justify-content:center;
    }
        .item {
            width:calc((100% - 2rem) / 2);
        }

    .tbl01 {
        display: table;
        border-collapse: collapse;
    }
        .tbl01 tr,
        .tbl01 th,
        .tbl01 td {
            border: 1px solid #ccc;
            border-collapse: collapse;
        }
        .tbl01 tr {
            display: table-row;
        }
        .tbl01 th,
        .tbl01 td {
            display: table-cell;
        }

    .img_text_box {
        font-size: 1.3rem;
    }







}












/* スクリーンサイズ 幅1024px 以上で適用される設定・横幅を画面の端までor1024pxまで */
/* bin/nivo-slider.cssの１箇所を変えると、自動画像も変わる */
@media screen and (min-width: 1024px) {
    #wrap_header,
    #wrap_aisatu,
    #wrap_topimg,
    #wrap1,
    #wrap2 {
        max-width: 1024px;
        margin-right: auto;
        margin-left: auto;
        clear: both;
    }
}