/* 全体 */
body{
    color: #333;
    margin:0px;
    padding:0px;
    width: 100%;
    font-size:14px;
    font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    line-height: 1.8em;
    letter-spacing:0.5px;
    -webkit-text-size-adjust: 100%;
}
#wrap{
    width: 100%;
    max-width: 600px;
    background: #fff;
    margin: auto;
    padding:0;
}

/* リンク */
a { color: #e87684; text-decoration:none;}
a:hover { color: #666666; }

#pickup a { color: #696969; text-decoration:none;}
.contentPickUp a { color: #696969; text-decoration:none;}
.ranking a { color: #696969; text-decoration:none;}


/*******************
 ヘッダー
 *******************/
.header{
    margin:0;
    padding:0;
    width: 100%;
}
/* 色つきヘッダー */
.header .headerText{
    background-color: #f9ef00;
    margin:0;
    padding:0;
    width: 100%;
    height: 20px;
    text-align: center;
    padding: 16px 0px 14px 0px;
    font-weight: bold;
    font-size: 15px;
    letter-spacing: 3px;
}
.header h1{
  margin: 0;
}
.header img {
    margin: 0 auto;
    padding: 0;
    border: 0 none;
    vertical-align: bottom;
}
.header img.logo{
    margin-top: 28px;
    width: 110px;
}
.header p {
    width: 80%;
    margin: 20px auto;
    margin-bottom: 40px;
    text-align: center;
    font-size: 12px;
    /*font-weight: bold;*/
    line-height: 20px;
    /*letter-spacing: 2px;*/
    padding: 0;
    border: 0 none;
}
.header h2 {
    margin: 32px auto;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
    font-size: 16px;
    font-weight: normal;
    position: relative;
    text-align: center;
}
.header h2 span {
	position: relative;
	z-index: 2;
	display: inline-block;
	margin: 0 2.5em;
	padding: 0 1em;
	background-color: #fff;
	text-align: center;
}
/*
.header h4::before {
	position: absolute;
	top: 50%;
	z-index: 1;
	content: '';
	display: block;
	width: 100%;
	height: 1px;
	background-color: #181818;
}
*/
.header p.subInfo{
    margin: auto;
    margin-top: 0;
    padding: 0;
    width: 80%;
    color: #666;
    font-size: 10px;
    text-align: justify;
}

/*******************
 メインコンテンツ
 *******************/
.contents{
    margin: 0 16px;
    text-align:center;
}
.contents p{
    margin: 16px auto 80px;
    text-align: left;
}
.contents p.attention-text{
    font-size: 11px;
    margin: 10px auto;
    margin-bottom: 16px;
    color: #999;
}
.contents p.customer{
    margin: 30px auto;
    text-align: center;
    font-size: 80%;
    color: #999;
}
.contents h2{
    font-size: 16px;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
    text-align: center;
    font-weight: normal;
    margin: 32px 0;
}
.contents img {
    width: 100%;
    margin: auto;
}
/**** コンテンツメイン ****/
.contentsMain{
    width: 88%;
    /*margin: 32px auto;*/
    margin: 0 auto;
}
/* テーブル（基本）*/
.table{
    border: 0px;
    border-collapse: separate;
    border-spacing:10px 10px;
    width: 94%;
    margin: auto;
    text-align: center;
}
.table td{
    width: 50%;
    font-weight: normal;
    margin: 0;
    padding: 0;
}
.table td.rounded{
    background-color: #fff;
    /* 角丸 */
     border-radius: 4px; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; /* Firefox用 */  
    border: 1px solid #ccc;
}
/* アクセサリー画像 */
.box {
    margin: 0;
    text-align: center;
    padding-top: 0px; /* 32*/
    padding-bottom: 0px;
    position: relative; /* 親要素指定 */
    height: 140px; /* 高さのみ固定 */
}
.box #boximg {
    position: absolute; /* 相対配置*/
    top: 50%; /* 以下センター寄せ */
    left: 50%;
    -webkit-transform: translate(-50%, -50%); /* Safari用 */
    transform: translate(-50%, -50%);
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
    background-color: #fff;
}
.table td .accImage{
    width:auto;
    height:auto;
    max-width:120px;
    max-height:190px;
}

/*購入の流れ*/
.flow .wrap{
  display: table;
  table-layout: fixed;
  width: 100%;
  margin-bottom: 16px;
}
.flow .img,
.flow .txt{
  display: table-cell;
  vertical-align: middle;
}
.flow .img{
  width: 120px;
  padding: 0 16px 0 0;
}
.flow .txt{
  padding: 0;
}
.flow p{
  margin: 0;
}
.flow .ttl{
  width: auto;
  font-weight: bold;
  margin-bottom: 8px;
}

/* ユーザー情報 */
.table .userInfo{
    text-align: center;
    font-size: 10px;
    padding: 10px 0px;
    border-top: 0px solid #f5f5f5;
    background-color: #ccc;
    font-weight: bold;
    height: 90px;
}
.table .userInfo p{
    font-weight: normal;
    padding-bottom: 0;
    margin: auto;
    padding: 6px 0px;
    padding-bottom: 0;
    font-size: 8px;
    width: 90%;
}
.table .useInfoInner{
    padding: 0;
    margin: 0;
    vertical-align: middle;
}

/* ユーザー情報 */
/*
.partsPickUp .userInfo{
    text-align: left;
    padding-bottom: 8px;
    border-bottom: 1px solid #d2d2d2;
}
.partsPickUp .userInfo a{
    font-size: 12px;
    color: #434343;
    vertical-align: middle;
}
.partsPickUp .userInfo a.accUserName{
    padding-left: 4px;
}
.partsPickUp .userInfo img{
    width: 36px;
    height: 36px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    vertical-align: middle;
}
*/

/*このパーツでつくる*/
.contentsMain .userThis{
    text-align: center;
    margin: auto;
    margin-bottom: 62px;
}
.contentsMain .userThis a{
    margin: auto;
    color: #fff;
    background-color: #000;
    display:block;
    font-size: 14px;
    font-weight: normal;
    padding: 14px 0px;
    /* 角丸 */
     border-radius: 4px; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; /* Firefox用 */ 
}


/* ページフッター */
#pageFoot {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 0px;
    padding-top: 5px;
    padding-bottom: 10px;
}
#pageFoot #copyright small {
  font-size: 12px;
  line-height: 1.5;
  color: #999;
}


/* 以下、スマホ対応 */
img {
    max-width : 100% ;
    height : auto ;
}
@media screen and (max-width: 400px) {
body { 
 width:100%;}

@media screen and (min-width: 400px) {
body { 
 width:400px;}
}