@charset "Shift_JIS";

/*============================================================
 全体
============================================================*/

body {
    -webkit-text-size-adjust: 100%;-webkit-text-size-adjust: none; 
}


.topics-all {margin: 0 auto;font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 
'MS Pゴシック', Osaka, sans-serif, arial, verdana, Helvetica, Verdana, "Droid Sans", Arial;}


.searchBar-sp, .etcSearch-sp, .headerMdl-sp { display: none;}
.headerTop-pc, .headerBtm-pc, .headerBtm-sp { display: none;}
.serviceInfo-pc { display: none;}
.Header { border-bottom: 0; margin-bottom: 0; box-shadow: 0px;}

.sofmapcomRogo-sp {
height: 30px;
}

/*ヘッダー 会員メニュー等非表示用*/
.serviceInfo-pcN1 {
 display: none !important;
}

/*============================================================
 Contents全体
============================================================*/
.contents {margin-bottom:30px;}

.contents-inner { width: 100%; padding: 0px;}

/* ヘッダー画像 */
.top-img {max-width: 100%;height: auto;vertical-align: bottom;}



/*============================================================
 コンテンツの記事＜コンテンツ＞＜ガイド＞＜セール＞
============================================================*/
.idol-main h1 {font-size: 32px; margin: 5px 0;line-height:1.2em;text-align: center;}
.idol-main h2 {
margin: 20px 0 10px;
padding: 10px 0px 8px 10px;
color: #333;
background: #ececec;
border-left: 1px solid #333;
}
.idol-main h3 {
position: relative;
padding: 2px 5px 2px 30px;
font-size: 18px;
color: #000;
border-radius: 0 10px 10px 0;
margin: 0px 30px -10px;
}

.idol-main h3:before {
font-family: FontAwesome;
content: "\f041";
display: inline-block;
line-height: 40px;
position: absolute;
padding: 0em;
color: white;
background: #f06;
font-weight: normal;
width: 40px;
text-align: center;
height: 40px;
line-height: 40px;
left: -1.0em;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 50%;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.29);
z-index: 10;
}

.idol-main h4 {
font-size: 22px;
margin: 30px 0 10px;
color: #333;
line-height: 1.2em;
border-bottom: 5px solid #eee;
padding-bottom: 10px;
}

.idol-main h4:before {
color: #06f !important;
content: "\f058" !important;
font-family: "FontAwesome",sans-serif !important /*FontAwesomeをフォント指定*/;
margin-right: 5px !important;
font-size: 1.2em !important;
}

.idol-main h5 {
font-size: 20px;
margin: 30px 0 15px;
color:#000;
line-height:1.2em;
border-left: 2px solid #06f;
padding: 8px 0 8px 10px;
}

.idol-main p {max-width:100%;font-size: 16px;line-height: 1.5em;}

.idol-main p.right {text-align: right;}
.idol-main p.left {text-align: left;}
.idol-main p.center {text-align: center;}


.idol-main .lead {max-width:100%;font-size: 20px; color: #666;}
.idol-main img {max-width:100%;height: auto;}

.idol-main a{}
.idol-main a:hover {}

.idol-main a.txt-link {font-size: 1.2em; display: block; margin: 0 5px 20px 20px;}
.idol-main a.txt-link:after {
 font-family: FontAwesome /*FontAwesomeをフォント指定*/;
 margin-left: 3px;
 content: '\f08e';
}



/*関連販売のテキストリンク＜主に新品商材＞*/
.idol-main a.kanren-link {font-size: 1.2em;display: block;margin: 0 20px 30px 20px;
padding:10px; background-color:#09f; color:#fff;text-align: center;text-decoration: none;
border-radius: 10px}
.idol-main a.kanren-link:after {
font-family: FontAwesome /*FontAwesomeをフォント指定*/;
margin-left: 3px;
content: '\f08e' ;
}
.idol-main a.kanren-link:hover {background-color:#03f;}

/*関連販売のテキストリンク＜主に中古商材＞*/
.idol-main a.kanren-link-tyuko {font-size: 1.2em;display: block;margin: 0 20px 30px 20px;
padding:10px; background-color:#fbea34; color:#222;text-align: center;text-decoration: none;
border-radius: 10px}
.idol-main a.kanren-link-tyuko:after {
font-family: FontAwesome /*FontAwesomeをフォント指定*/;
margin-left: 3px;
content: '\f08e' ;
}
.idol-main a.kanren-link-tyuko:hover {background-color:#fbcf34;color:#fff;}




/*============================================================
 リスト
============================================================*/
/* ULタグの通常版 */
.idol-main ul {

}

.idol-main li {
color: #666;line-height: 1.5;
}

/* 注意書用 */
.idol-main ul.ul-caution {
list-style: none;margin:5px 10px 20px;padding: 20px 20px 10px;border: 1px solid #ddd;
}

.idol-main ul.ul-caution li {
margin-bottom: 12px;
padding-left: 1em; /*1em（1文字）分、右に動かす*/
text-indent: -1em; /*最初の行だけ1em（1文字）分、左に動かす*/
color: #666;line-height: 1.5;

}

.idol-main ul.ul-caution li:before {
content: "※" ;padding-right:3px;
}

/* OLタグの通常版＜算用数字＞ */
.idol-main ol {
list-style: decimal;margin-bottom: 20px;padding-left: 2em;
}

.idol-main cite {
font-style: italic;font-size: 0.9em;
text-align: right;
padding-top: 5px;
display: block;
}

.idol-main cite a {
font-weight: normal;
}



/*========================================================================================================================
  アコーディオン
========================================================================================================================*/

/****************** idolSche-accordion ******************/

div.idolSche-accordion {margin: 0 20px 10px;}

div.idolSche-accordion ul{list-style: none;}


/****************** 第一階層 ******************/
div.idolSche-accordion > ul > li > a {
display: block;
color: #333;
font-size: 16px;
text-decoration: none;
background-color: #ffe4ef;
cursor: pointer;
position: relative;
padding: 7px 7px 5px;
border-radius: 3px;
margin-bottom: 5px;
}

div.idolSche-accordion > ul > li > a:hover {
  background-color: #ffccee ;
  color: #333;
}

div.idolSche-accordion > ul > li > a:after, div.idolSche-accordion > ul > li > a.guide-active:after {
  font-size: 16px;
  position: absolute;
  right: 10px;
  color: #fff;
}

div.idolSche-accordion > ul > li > a:before {
  content: "\f055";
  font-family:FontAwesome;
  color: #555; padding: 0 5px ;
}

div.idolSche-accordion > ul > li > a.active:before {
  content: "\f056";
  font-family:FontAwesome; padding: 0 5px ;
}

div.idolSche-accordion > ul > li > a:after {
  content: "\f078";
  font-family:FontAwesome;
}

div.idolSche-accordion > ul > li > a.active:after {
  content: "\f077";
  font-family:FontAwesome;
}


/****************** 第二階層 ******************/
div.idolSche-accordion > ul > li > ul > li > a {
display: block;
color: #333;
font-size: 16px;
background-color: #fff;
cursor: pointer;
position: relative;
text-decoration: none;
padding: 7px 5px 5px;
border-bottom: 1px dotted #ddd;
}

div.idolSche-accordion > ul > li > ul > li > a:hover {
  background-color: #fff5f9;color:#333 ;
}

div.idolSche-accordion > ul > li > ul > li > a:before {
  content: "\f078";
  font-family:FontAwesome;
  color: #ddd; padding: 0 5px 
}

div.idolSche-accordion > ul > li > ul > li > a.active:before {
  content: "\f077";
  font-family:FontAwesome; padding: 0 5px;
}


div.idolSche-accordion > ul > li > ul > li > a:after, div.idolSche-accordion > ul > li > ul > li > a.active:after {
  font-size: 16px;
  position: absolute;
  right: 30x;
  top: 10px;
  color: #fff;
}

div.idolSche-accordion > ul > li > ul > li > a:after {

}

div.idolSche-accordion > ul > li > ul > li > a.active:after {

}

/* 曜日 */

div.idolSche-accordion > ul > li > ul > li > a > span{
padding: 1px 5px;
background-color: #7dadf6;
margin: 0 10px;
color: #fff;
font-size: 0.8em;
border-radius: 20px;
}


/* 第二階層を閉じる */
div.idolSche-accordion > ul > li > ul {
  display: none;
}

/****************** 第三階層 ******************/
div.idolSche-accordion > ul > li > ul > li > ul > li > a {
display: block;
color: #333 !important;
font-size: 14px;
background-color: #f9f9f9;
cursor: pointer;
position: relative;
text-decoration: none;
padding: 7px 5px 5px;
border-bottom: 1px dotted #ddd;
}


div.idolSche-accordion > ul > li > ul > li > ul > li > a:hover {
 color: #333 ; opacity: 0.5;
}

div.idolSche-accordion > ul > li > ul > li > ul > li > a:after, div.idolSche-accordion > ul > li > ul > li > ul > li > a.active:after{
  font-size: 21px;
  position: absolute;
  right: 30px;
  top: 10px;
  color: #fff;
}

div.idolSche-accordion > ul > li > ul > li > ul > li > a:before {

}

/* 第二階層を閉じる */
div.idolSche-accordion > ul > li > ul > li > ul  {
  display: none;
}



/****************** 第四階層 ******************/
div.idolSche-accordion > ul > li > ul > li > ul > li > ul > li > a {
display: block;
color: #333 !important;
font-size: 14px;
background-color: #f9f9f9;
cursor: pointer;
position: relative;
text-decoration: none;
padding: 7px 5px 5px;
border-bottom: 1px dotted #ddd;
}


div.idolSche-accordion > ul > li > ul > li > ul > li > ul > li > a:hover {
  background-color: #cce5ff; color: #333 !important;
}

div.idolSche-accordion > ul > li > ul > li > ul > li > ul > li > a:after, div.idolSche-accordion > ul > li > ul > li > ul > li > ul > li > a.active:after{
  font-size: 21px;
  position: absolute;
  right: 30px;
  top: 10px;
  color: #fff;
}

div.idolSche-accordion > ul > li > ul > li > ul > li > ul > li > a:before {

}

/* 第三階層を閉じる */
div.idolSche-accordion > ul > li > ul > li > ul> li > ul  {
  display: none;
}



/*============================================================
 イベントbox
============================================================*/
/* box */
.idolEvent-box {
    position: relative;
    margin: 2em 1em 1em;
    padding: 0.5em 1em;
    border: solid 1px #000;
}
.idolEvent-box .box-title {
    position: absolute;
    display: inline-block;
    top: -25px;
    left: -1px;
    padding: 0 15px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    background: #000;
    color: #fff;
    border-radius: 5px 5px 0 0;
}
.idolEvent-box　p {
    margin: 0; 
    padding: 0;
}


/* 画像&商品名 */
.idolEvent-box　img {

}

.idolEvent-box　.productname {

}

/* 情報 */
.idolEvent-box ul {

}
.idolEvent-box ul li {

}
.idolEvent-box ul li:last-of-type{

}


.idol-listFrame {
}

.idol-listFrame-img {
    float: left;
    width: 30%;
    text-align: center;
}

.idol-listSpec {
float: right;
width: 70%;
text-align: left;
}

.idol-listName {
color: #356bb3;
text-decoration: underline;
font-weight: bold;
}

.idol-listName:hover {
color: #f06;
text-decoration: none;
}

.idol-eventCategory {
background: #0af;
padding: 4px 10px 0;
margin-bottom: 5px;
font-size: 12px;
color: #fff;

}

ul.idol-eventInfo {
list-style: none;
margin-bottom: 0;
padding-left: 0;
}

.idol-eventInfo li {
float: left;
color: #000;
font-size: 11px;
background: #efefef;
line-height: 1.0em;
padding: 5px 10px;
border-radius: 10px;
margin-right: 5px;
}

/*============================================================
 目次
============================================================*/

/* 目次ナビ＜5枠-2枠＞ */
.idol-main .mokuji-navi5 , 
.idol-main .mokuji-navi4 , 
.idol-main .mokuji-navi3 , 
.idol-main .mokuji-navi2 {margin-bottom: 25px;}

.idol-main .mokuji-navi5 ul , 
.idol-main .mokuji-navi4 ul , 
.idol-main .mokuji-navi3 ul , 
.idol-main .mokuji-navi2 ul {margin-bottom: 0; padding: 0; list-style: none;}

.idol-main .mokuji-navi5 li {width: 20%    ;float: left;margin-bottom: 1px ;}
.idol-main .mokuji-navi4 li {width: 25%    ;float: left;margin-bottom: 1px ;}
.idol-main .mokuji-navi3 li {width: 33.333%;float: left;margin-bottom: 1px ;}
.idol-main .mokuji-navi2 li {width: 50%    ;float: left;margin-bottom: 1px ;}

.idol-main .mokuji-navi5 li :before, 
.idol-main .mokuji-navi4 li :before, 
.idol-main .mokuji-navi3 li :before, 
.idol-main .mokuji-navi2 li :before {font-family: "FontAwesome";content: '\f0da';  margin:0 5px;  color: #aaa;}

.idol-main .mokuji-navi5 li a, 
.idol-main .mokuji-navi4 li a, 
.idol-main .mokuji-navi3 li a, 
.idol-main .mokuji-navi2 li a {
display: block;
margin-right: 1px;
padding: 5px 10px 5px 0;
background-color: #f7f7f7;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
color: #666;
font-size: 12px;
font-weight: normal;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;}

.idol-main .mokuji-navi5 li a:hover, 
.idol-main .mokuji-navi4 li a:hover, 
.idol-main .mokuji-navi3 li a:hover, 
.idol-main .mokuji-navi2 li a:hover {background-color: #94ecf6;}

.idol-main .mokuji-navi5 ul:after, 
.idol-main .mokuji-navi4 ul:after, 
.idol-main .mokuji-navi3 ul:after, 
.idol-main .mokuji-navi2 ul:after {content: ""; display: block; clear: both;}


/*========================================================================================================================
  動画枠
========================================================================================================================*/
.movie-wrap {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.movie-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;max-width: 580px;
    height: 100%;
}

/*========================================================================================================================
  パンくず
========================================================================================================================*/

.bread-crumb{margin: 10px 5px 5px;}
.bread-crumb ol {
    margin: 0;
    padding: 0;
    list-style: none;
}
.bread-crumb li {
float: left;
width: auto;
}

/*========================================================================================================================
  イベントスケジュール
========================================================================================================================*/





/*========================================================================================================================
  イベントレポート
========================================================================================================================*/





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


/*============================================================
 メインコンテンツ記事
============================================================*/
.idol-main h1 {font-size: 24px;}

.idol-main .lead {font-size:14px;}
.idol-main p {font-size:14px;}

.idol-main .mokuji-navi5 li, 
.idol-main .mokuji-navi4 li, 
.idol-main .mokuji-navi3 li, 
.idol-main .mokuji-navi2 li {width: 100%;}

/* 情報枠　見出し */
.idolEvent-box .box-title {width: calc( 100% - 28px);}



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



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


/*============================================================
 メインコンテンツ記事
============================================================*/
.idol-main h1 {font-size: 28px;}
 
.idol-main .lead {font-size:14px;}
.idol-main p {font-size:14px;}

.idol-main .mokuji-navi5 li, 
.idol-main .mokuji-navi4 li, 
.idol-main .mokuji-navi3 li, 
.idol-main .mokuji-navi2 li {width: 100%;}

/* 情報枠　見出し */
.idolEvent-box .box-title {width: calc( 100% - 28px);}

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


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


/*============================================================
 メインコンテンツ記事
============================================================*/
.idol-main h1 {font-size: 30px;margin:0px 0px 5px;}




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


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









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



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


/*============================================================
 contents-Bodyとcontents-Leftを横に並べる設定
============================================================*/






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



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






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








/* ################### iPhone専用 ################### */

/***** 商品枠 *****/
.iphone .product-2box, .iphone .product-3box, .iphone .product-4box {display: block;}
.iphone .product-waku {width: 100% !important;float: none !important;}

/***** セール枠 *****/
.iphone .sale-waku1, .iphone .sale-waku2, .iphone .sale-waku3, .iphone .sale-waku4, .iphone .sale-waku5 {width: 100%;float: none; text-align: center;}

/*** 説明枠 ***/
.iphone .waku-leftImg, .iphone .waku-rightImg, 
.iphone .waku-leftImg40, .iphone .waku-rightImg40, 
.iphone .waku-leftImg60, .iphone .waku-rightImg60, 
.iphone .waku-leftImg50, .iphone .waku-rightImg50 {width:100%;text-align: center;}

.iphone .waku-rightSpec, .iphone .waku-leftSpec, 
.iphone .waku-rightSpec40, .iphone .waku-leftSpec40, 
.iphone .waku-rightSpec60, .iphone .waku-leftSpec60, 
.iphone .waku-rightSpec50, .iphone .waku-leftSpec50  {width:100%;}


/*** 1列商品枠の画像とスペック情報を縦に並べる ***/
.iphone .waku1-img {width:100%;}
.iphone .waku1-spec {width:100%;text-align: center;}
.iphone .waku1-img img { width: 160px;}

.iphone .product-1box .waku-img {width:100%;}
.iphone .product-1box .waku-spec {width:100%;}
.iphone .product-1box .waku-img img{ width: 160px;}
.iphone .product-1box .favoriteButton { width: calc( 100% - 30px); right: auto;}

/* ################### iPhone専用ここまで ################### */