@charset "euc-jp";

/*--------- CSS MENU ---------*/
/*------------------------------
/*  01.  MAIN IMAGE
/*  02.  TOP PAGE - RANKING
/*  03.  TOP PAGE - ABOUT
/*  04.  TOP PAGE - RECOMMEND
/*  05.  TOP PAGE - NEWS
--------------------------------
------------------------------*/

/*  01.  MAIN IMAGE
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  MAIN IMAGE  */
#main_image {float: left; width: 100%; height: auto;}
#main_image video {width: 100%; height: auto; vertical-align: top;}
#main_image img {width: 100%; height: auto; vertical-align: top;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  MAIN IMAGE  */
#main_image {float: left; width: 100%; height: auto;}
#main_image video {width: 100%; height: auto; vertical-align: top;}
#main_image img {width: 100%; height: auto; vertical-align: top;}
}

/*  02.  TOP PAGE - RANKING
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  TOP PAGE  *//*  RANKING  */
#toppage_ranking {float: left; width: 100%; height: auto; padding-top: 50px; padding-bottom: 50px;}

#toppage_ranking ul {counter-reset: wpp-ranking; margin-top: 50px;}
#toppage_ranking ul li {padding-top: 20px;}
#toppage_ranking ul li:before {content: counter(wpp-ranking, decimal); counter-increment: wpp-ranking; position: absolute; line-height: 20px; top: 0px; left: 50%; font-size: 20px; font-weight: normal; font-family: 'Roboto Condensed', sans-serif; color: #000; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); z-index: 1;}
#toppage_ranking ul li:nth-child(1):before {color: #DBB854;}
#toppage_ranking ul li:nth-child(2):before {color: #BBBBBB;}
#toppage_ranking ul li:nth-child(3):before {color: #9A6E01;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  TOP PAGE  *//*  RANKING  */
#toppage_ranking {float: left; width: 100%; height: auto; padding-top: 50px; padding-bottom: 50px;}

#toppage_ranking ul {counter-reset: wpp-ranking; margin-top: 50px;}
#toppage_ranking ul li {padding-top: 20px;}
#toppage_ranking ul li:before {content: counter(wpp-ranking, decimal); counter-increment: wpp-ranking; position: absolute; line-height: 20px; top: 0px; left: 50%; font-size: 20px; font-weight: normal; font-family: 'Roboto Condensed', sans-serif; color: #000; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); z-index: 1;}
#toppage_ranking ul li:nth-child(1):before {color: #DBB854;}
#toppage_ranking ul li:nth-child(2):before {color: #BBBBBB;}
#toppage_ranking ul li:nth-child(3):before {color: #9A6E01;}
}

/*  03.  TOP PAGE - ABOUT
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  TOP PAGE  *//*  ABOUT  */
#toppage_about {position: relative; float: left; width: 100%; height: auto; padding: 50px; background: url("https://img21.shop-pro.jp/PA01433/072/etc/concept_image.jpg"); background-size: cover; box-sizing: border-box;}
#toppage_about_wrapper {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); background-image: radial-gradient(rgba(0,0,0,0.5) 50%, transparent 0), radial-gradient(rgba(0,0,0,0.5) 50%, transparent 0); background-position: 0px 0px, 2px 2px; background-size: 4px 4px; z-index: 1;}

#toppage_about_title {position: absolute; width: 200px; height: 200px; top: 50px; right: 50px; transform: rotate(90deg); z-index: 3;}
#toppage_about_title h2 {line-height: 100px; font-size: 100px; font-weight: bold; text-align: left; color: #FFF;}

#toppage_about_body01 {position: relative; float: left; width: 60%; height: auto; box-sizing: border-box; z-index: 2;}
#toppage_about_body01 #toppage_about_textbox {float: left; width: 100%; height: auto;}
#toppage_about_body01 #toppage_about_textbox p {line-height: 30px; margin-bottom: 20px; font-size: 14px; font-weight: normal; color: #FFF;}
#toppage_about_body01 #toppage_about_textbox p span {font-size: 16px; font-weight: bold;}

#toppage_about_body01 #toppage_about_textbox p:nth-child(4) {margin-top: 40px;}

#toppage_about_body02 {position: relative; float: right; width: 70%; height: auto; margin-right: 0px; padding: 50px; background-color: rgba(0,13,255,.8); box-sizing: border-box; z-index: 2;}
#toppage_about_body02 img {width: 100%; height: auto; vertical-align: top;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  TOP PAGE  *//*  ABOUT  */
#toppage_about {position: relative; float: left; width: 100%; height: auto; padding: 50px 20px 50px 20px; background: url("https://img21.shop-pro.jp/PA01433/072/etc/concept_image.jpg"); background-size: cover; box-sizing: border-box;}
#toppage_about_wrapper {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); background-image: radial-gradient(rgba(0,0,0,0.5) 50%, transparent 0), radial-gradient(rgba(0,0,0,0.5) 50%, transparent 0); background-position: 0px 0px, 2px 2px; background-size: 4px 4px; z-index: 1;}

#toppage_about_title {position: absolute; width: 200px; height: 100px; top: 70px; right: -40px; transform: rotate(90deg); z-index: 3;}
#toppage_about_title h2 {line-height: 50px; font-size: 50px; font-weight: bold; text-align: left; color: #FFF;}

#toppage_about_body01 {position: relative; float: left; width: calc(100% - 100px); height: auto; box-sizing: border-box; z-index: 2;}
#toppage_about_body01 #toppage_about_textbox {float: left; width: 100%; height: auto;}
#toppage_about_body01 #toppage_about_textbox p {line-height: 20px; margin-bottom: 20px; font-size: 12px; font-weight: bold; color: #FFF; word-break: break-all;}
#toppage_about_body01 #toppage_about_textbox p span {line-height: 30px; font-size: 16px; font-weight: bold;}

#toppage_about_body01 #toppage_about_textbox p:nth-child(4) {margin-top: 40px;}

#toppage_about_body02 {position: relative; float: left; width: 100%; height: auto; margin-top: 50px; z-index: 2;}
#toppage_about_body02 img {width: 100%; height: auto; vertical-align: top;}
}

/*  04.  TOP PAGE - RECOMMEND
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  TOP PAGE  *//*  RECOMMEND  */
#toppage_recommend {float: left; width: 100%; height: auto; padding-top: 50px; padding-bottom: 50px;}
#toppage_recommend ul {margin-top: 50px;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  TOP PAGE  *//*  RECOMMEND  */
#toppage_recommend {float: left; width: 100%; height: auto; padding-top: 50px; padding-bottom: 50px;}
#toppage_recommend ul {margin-top: 40px;}
}

/*  05.  TOP PAGE - NEWS
------------------------------*/
/*  pc  */
@media screen and (min-width: 980px) {
/*  TOP PAGE  *//*  NEWS  */
#toppage_news {float: left; width: 100%; height: auto; padding-top: 100px; padding-bottom: 100px;}
#toppage_news .content_title {margin-bottom: 50px;}
#toppage_news_body {width: 600px; margin: auto;}
#toppage_news_body dl {float: left; width: 100%; height: auto; padding: 20px; border-bottom: 1px dotted #AAA; box-sizing: border-box;}
#toppage_news_body dl dt {float: left; width: 150px; height: auto; line-height: 20px; font-size: 14px; font-weight: normal;}
#toppage_news_body dl dt::after {content: "¡¦¡¦¡¦";}
#toppage_news_body dl dd {float: left; width: calc(100% - 150px); height: auto; line-height: 20px; font-size: 14px; font-weight: normal;}
#toppage_news_body dl dd a {display: inline; color: #000;}
#toppage_news_body dl dd a:hover {color: #AAA;}
}

/*  sp  */
@media screen and (max-width: 979px) {
/*  TOP PAGE  *//*  NEWS  */
#toppage_news {float: left; width: 100%; height: auto; padding: 50px 20px 50px 20px; box-sizing: border-box;}
#toppage_news .content_title {margin-bottom: 50px;}
#toppage_news_body {float: left; width: 100%; height: auto;}
#toppage_news_body dl {float: left; width: 100%; height: auto; padding: 10px; border-bottom: 1px dotted #AAA; box-sizing: border-box;}
#toppage_news_body dl dt {float: left; width: 90px; height: auto; line-height: 20px; font-size: 12px; font-weight: normal;}
#toppage_news_body dl dd {float: left; width: calc(100% - 90px) ; height: auto; line-height: 20px; font-size: 12px; font-weight: normal;}
#toppage_news_body dl dd a {display: inline; color: #000;}
}