@charset "Shift_JIS";

/*============================================================
 全体
============================================================*/
/*スマホで文字が大きくなる対策*/
body{-webkit-text-size-adjust: 100%;}

/*Font-Awesome*/
.detailSearch-sp .fa, .genreSearch-sp .fa {padding-right: 2px;}

/*============================================================
 HEADER ALL
============================================================*/
.Header {
  margin-bottom:10px;
  border-bottom: 1px solid #ccc;
  box-shadow: 0px 1px 2px #ccc;
-moz-box-shadow:0px 1px 2px #ccc;
-o-box-shadow:0px 1px 2px #ccc;
-ms-box-shadow:0px 1px 2px #ccc;
}


/*============================================================
 HEADER SP
============================================================*/

/**********  HEADER TOP **********/
.headerTop-sp {width: 100%;background-color: #fff;position: relative;}

/* ロゴ */
.sofmapcomRogo-sp {text-align:center;height: 30px;}
.sofmapcomRogo-sp h1   {margin: 0;height: 30px;}
.sofmapcomRogo-sp h1 a {color: #000;text-decoration: none;height:30px;}
.sofmapcomRogo-sp img  {border: none;padding:0;height: 33px;}

/* searchBar-sp */
.searchBar-sp {
height: 40px;
overflow: visible;
font-size: 16px;
margin: 0 10px;
}

/* searchBar-sp */
.searchBox1-sp{
height: 35px;
float: left;
width: 100%;
z-index: 5;
font-size: 14px;
}

.searchBox2-sp{
height: 30px;
width: 30px;
float: right;
position: absolute;
right: 10px;
z-index: 10;
}

.searchWindow-sp {
width: calc(100% - 40px);
height: 35px;
border: 1px solid #555;
background-color: #fff;
box-shadow: 2px 2px 2px -1px #ccc inset;
box-sizing: border-box;
padding: 0 45px 0 10px;
font-family: FontAwesome;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}

.searchWindow-sp:hover, .searchWindow-sp:focus {
background-color: #ffffef;
box-shadow: 2px 2px 2px -1px #ccc inset;
border: 1px solid #000;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
height: 35px;
}

.iphone .searchWindow-sp {
font-size: 0.8em;
width: 100%;
appearance: none;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
} /*iphoneのみ*/

.iphone .searchWindow-sp:hover, .iphone .searchWindow-sp:focus {
background-color: #ffffef;
box-shadow: 2px 2px 2px -1px #ccc inset;
border: 1px solid #000;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
height: 35px;
} /*iphoneのみ*/

input[type="search"]{
-webkit-appearance: none;
} /*iphoneのみ*/
input[type="submit"]{
-webkit-appearance: none;
} /*iphoneのみ*/

input.searchWindow-sp::input-placeholder {color:#888;font-size:0.8em;height: 35px;}
input.searchWindow-sp::-webkit-input-placeholder {color:#888;font-size:0.8em;height: 35px;}
input.searchWindow-sp:-ms-input-placeholder {color:#888;font-size:0.8em;height: 35px;}
input.searchWindow-sp::-moz-placeholder {color:#888;font-size:0.8em;height: 35px;}
.iphone input.searchWindow-sp::-webkit-input-placeholder {-webkit-appearance: none;color:#888;font-size:0.8em;} /*iphoneのみ*/

.searchBtn-sp {
float: right;
height: 35px;
width: 40px;
font-size: 1.3em;
border: 1px solid #555;
background-color: #555;
box-sizing: border-box;
color: #fff;
font-family: FontAwesome;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.iphone .searchBtn-sp {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}

.searchBtn-sp:hover, .searchBtn-sp:focus {
border: 1px solid #000;
background-color: #000;
}

/* etcSearch-sp */
.etcSearch-sp{
height: 25px;
overflow: visible;
font-size: 13px;
margin: 0 10px 8px;
color:#000!important;
}

.etcSearch-sp:after {content: "";display: block;clear: both}

.genreSearch-sp, .detailSearch-sp {
float: left;
width: 19%;
color:#000!important;
text-align: center;
text-decoration:none;
box-sizing: border-box;
background-color: #eaf4ff;
margin: 0 .5%;
padding: 2px 0;
display: block;
border: 1px solid #bcddff;
border-radius: 3px;
}

.genreSearch-sp:hover, .detailSearch-sp:hover {
background-color: #09f;color:#fff!important;border: 1px solid #09f;cursor:pointer;
}

.genre-parts{
background-color: #fff;
padding: 5px;
border-top: 1px dotted #ddd;
}



/**********  HEADER MIDDLE **********/
.headerMdl-sp {font-size:11px;background-color: #666;min-height: 35px;}

/* HeaderMdl Login&Cart＆Histry&Menu */
.loginInfo-sp, .cartInfo-sp, .historyInfo-sp, .pointInfo-sp, .menuInfo-sp, .favoriteInfo-sp {
text-align:center;padding:5px 0px;color:#fff!important; text-decoration:none;box-sizing: border-box;float: left; width: 25%;
list-style: none;border-right: 1px solid #333;border-left: 1px solid #999;
}

a.loginInfo-sp, a.cartInfo-sp, a.historyInfo-sp, a.pointInfo-sp, a.menuInfo-sp, a.favoriteInfo-sp {
}

.loginInfo-sp:hover, .cartInfo-sp:hover, .historyInfo-sp:hover, .pointInfo-sp:hover, .menuInfo-sp:hover, .favoriteInfo-sp:hover {color:#fff;background-color: #000;}


/**********  HEADER BOTTOM **********/
.headerBtm-sp {width: 100%;}

.headerBtm-sp:after{content: "";display: block;clear: both;}




.clearfix {zoom:1;}
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}/*float解除*/


/* トップへもどるボタン */
.return-top a {
filter: alpha(opacity=50);
-moz-opacity: 0.50;
opacity: 0.50;
text-decoration: none;
color: #fff !important;
width: 80px !important;
text-align: center;
display: block;
border-radius: 5px 5px 0 0;
padding: 5px 0;
height: 25px;
font-size: 24px;
background-color: #06f;
}



/********** HOUJIN ***********/
/* sp */
.spHoujin {margin:0 10px 5px;}
.spHoujin a {text-decoration: none;}
.spHoujin a:hover {text-decoration: underline;color: #f00}

.houjin-title{font-size: 14px;font-weight:bold;padding: 5px 10px;background-color: #f00;color:#FFF;}
.houjin-text{font-size: 12px;padding: 5px 10px}


/********** Member-Menu ***********/

/* Member-Menu_body */
.member-mid02 {
font-size: 1.2em;
color: #333;
margin: 15px 0;
padding: 3px 10px;
text-align: left;
    border: 1px dotted #333;
}

.member-box02 {
    font-size: medium;
    text-align: right;
    padding: 3px;
    margin-bottom: 5px;
    margin-top: -5px;
}

.member-box02 a {
font-size: small;
word-break: break-all;
color: #1e50a2;
text-decoration: underline;
}

.member-box02 a:hover {
text-decoration: none;
}


.caution-red {padding:10px;border:1px solid #f00;margin-bottom: 20px;}

.caution-red {
padding: 5px;
border: 1px solid #f00;
margin-bottom: 20px;
line-height: 1.8em;
}

.caution-red ul{
font-size: 12px;
margin: 0 15px;
padding: 10px;
font-weight: bold;
}

p.caution-txt {margin:0;padding: 10px 15px;font-size:0.9em; line-height: 1.8em;}
p.caution-txt span {color: #f00;font-weight: bold;}

.caution-txt a {
color: #1e50a2;
text-decoration: underline;
}

.caution-txt a:hover {
text-decoration: none;
}

/* Member-Menu_LEFT-COLUM */

.left-Column_userGuide {
width:200px;margin-right:20px;
}

.left-Column_userGuide h2{
font-weight: normal !important;
background-color: #888;
color: #fff;padding: 5px;
border-top-left-radius : 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-top-left: 5px;
border-top-right-radius : 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-top-right: 5px;
text-align: center;
}

.left-Column_userGuide ul{
margin:0;
border: 1px solid #888;
padding: 5px;
}

.left-Column_userGuide li a{
font-size:15px;
color: #222;
text-decoration: none;
border-bottom: 1px #555 dotted;
display: block;
padding: 10px 0 8px;
line-height: 1.2em;
color: #1e50a2;
}

.left-Column_userGuide li:last-child a {
border-bottom: none;
}

.left-Column_userGuide li a:hover{
text-decoration:underline;
}






/* ################################################################## 359px以下 ################################################################## */
@media screen and (max-width: 359px) {


.genreSearch-sp span, .detailSearch-sp span {font-size: 11px;}



} /* ################################# 359px以下 ここまで */



/* ################################################################## 599px以下 ################################################################## */
@media screen and (max-width: 599px) {


.spHoujin a {font-size: 12px;}
.houjin-text{font-size: 11px;}


.bread-crumb li {font-size: 12px;}



} /* ################################# 599px以下 ここまで */



/* ################################################################## 767px以下 ################################################################## */
@media screen and (max-width: 767px) {




/*******************************
 横に並べる設定
*******************************/

/* headerMdl-spを横に並べる */
.headerMdl-sp:after {content: "";display: block;clear: both}
.loginInfo-sp, .cartInfo-sp, .historyInfo-sp, .pointInfo-sp, .menuInfo-sp, .favoriteInfo-sp {float: left; width: 25%; padding-top: 8px;}


/*******************************
 HEADER BOTTOM
*******************************/
/* ヘッダーの下部 */
.Header {margin-bottom:5px}

/*headerMdl-sp アイコン下のテキストを横に並べる */
.loginInfo-sp span:before, 
.cartInfo-sp span:before, 
.historyInfo-sp span:before, 
.pointInfo-sp span:before, 
.menuInfo-sp span:before, 
.favoriteInfo-sp span:before {content: "\A" ;white-space: pre ;}


} /* ################################# 767px以下 ここまで */



/* ################################################################## 768px以上 ################################################################## */
@media screen and (min-width: 768px) {






} /* ################################# 768px以上 ここまで */



/* ################################################################## 916px以下 ################################################################## */

@media screen and (max-width: 916px) {





} /* ################################# 916px以下 ここまで */


/* ################################################################## 1190px以下 ################################################################## */

@media screen and (max-width: 1190px) {


.detail-search{
line-height: 1.2em;
text-align: center;
}



} /* ################################# 1190px以下 ここまで */



/* ################################################################## 1190px以上 ################################################################## */
@media screen and (min-width: 1190px) {

/*  */

} /* ################################# 1190px以上 ここまで */