@charset "utf-8";

/* ---------------------------------------------------------
  reset
---------------------------------------------------------  */
html,body,h1,h2,h3,h4,h5,h6,p,
blockquote,pre,a,abbr,acronym,address,cite,code,
del,dfn,em,img,q,s,samp,small,strike,strong,sub,sup,tt,var,
dd,dl,dt,li,ol,ul,fieldset,form,label,legend,button,
table,caption,tbody,tfoot,thead,tr,th,td {
    margin: 0;
    padding: 0;
    border: 0;
}

a {
    text-decoration: none;
}
a:hover img {
  opacity: 0.8;
  transition: 0.2s;
}

li { 
  list-style-type: none;
}

/* clearfix */
/* before擬似要素の設定により上マージンの崩れを防ぐ */
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
} 

body {
    font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Helvetica, Arial, Meiryo, sans-serif;
    color: #333333;
    font-size: 16px;
}

/* ---------------------------------------------------------
  レイアウト
---------------------------------------------------------  */
.contents-box {
    width: 700px;
    margin: 0 auto;
    /*background-color: rgba(255,0,0,0.17);*/
}


/* ---------------------------------------------------------
  商品詳細（イメージギャラリー：横長画像）
---------------------------------------------------------  */
.prod-gallery-main {
    width: 700px;
    margin: 0 auto;
}
.prod-gallery-main img {
    vertical-align: bottom;
}
.prod-gallery-main p {
    font-size: 14px;
}

.prod-gallery-sub {
    width: 700px;
    margin: 0 auto;
    /*background-color: rgba(0,0,255,0.2);*/
}
.prod-gallery-sub ul {
    font-size: 0; /*display: inline-block の隙間を詰める方法*/
}
.prod-gallery-sub li {
    display: inline-block;
    margin: 0 5px 5px 0;
}
.prod-gallery-sub li:nth-child(7) {
    margin-right: 0;
}
.prod-gallery-sub li img:hover {
    cursor: pointer;
}


/* ---------------------------------------------------------
  商品詳細（イメージギャラリー：縦長画像）
---------------------------------------------------------  */
.contents-box-vertical {
    width: 700px;
    margin: 0 auto;
}
.prod-gallery-main-vertival {
    width: 525px;
    float: left;
}
.prod-gallery-main-vertival p {
    font-size: 14px;
}

.prod-gallery-sub-vertical {
    width: 175px;
    float: right;
    /*background-color: rgba(0,0,255,0.2);*/
}

.prod-gallery-sub-vertical ul {
    font-size: 0; /*display: inline-block の隙間を詰める方法*/
}
.prod-gallery-sub-vertical li {
    display: inline-block;
    margin: 0 5px 5px 0;
}
.prod-gallery-sub-vertical li:nth-child(even) {
    display: inline-block;
    margin-right: 0;
}
.prod-gallery-sub-vertical li img:hover {
    cursor: pointer;
}


/* ---------------------------------------------------------
  その他コンテンツ
---------------------------------------------------------  */
.mBtom5 {
    margin-bottom: 5px;
}
.mBtom20 {
    margin-bottom: 20px;
}
.mBtom25 {
    margin-bottom: 25px;
}
.mBtom30 {
    margin-bottom: 30px;
}
.mBtom50 {
    margin-bottom: 50px;
}

.contents-box-ttl,
.contents-box-hl,
.taiken-flow-hl,
.circle {
    font-family: "Georgia","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","HGS明朝E","ＭＳ Ｐ明朝",serif;

}

.contents-box-ttl {
    font-size: 30px;
    margin-bottom: 15px;
    padding-left: 5px;
    border-left: 7px solid #165e83;
}
.contents-box-txt {
    font-size: 15px;
    line-height: 1.4;
    margin-bottom: 10px;
}

.contents-box-hl {
    font-size: 25px;
    padding-left: 5px;
    border-left: 5px solid #165e83;
}