@charset "utf-8";
/* CSS Document */
@media only screen and (max-width: 640px) {

/*============================
#header
============================*/
#header { position: relative; z-index: 999; }
#header .pad { min-width: inherit; position: absolute; left: 0; top: 0; }

/*============================
#pageSet
============================*/
#pageSet {}


/*============================
#mainPanelArea
============================*/
#mainPanelArea { height: 460px; min-width: inherit; background: url(../../eng_imageFile/top/mainPanelArea01_sp.png) no-repeat center top; background-size: cover; }
#mainPanelArea .catch { padding-top: 210px; margin: 0 auto; width: 100%; }
#mainPanelArea .catch .text { font-size: 2em; text-align: center; }
#mainPanelArea .catch .text br { display: none; }
#mainPanelArea .catch .text span.normalSP { display: block; margin-top: 0; font-size: 0.75em; }
#mainPanelArea .catch .text span.bigSP { display: block; margin-top: 0; }
#mainPanelArea .catch .text span.smallSP { display: block; margin-top: 5px; font-size: 0.4em; }

/*============================
#introArea
============================*/
#introArea {}
#introArea .md_contents { position: relative; }
#introArea .md_contents .md_inner {}

#introArea .md_contents .md_inner .areaBox { margin-top: 0; }

#introArea .md_contents .md_inner .areaBox .area01 { position: relative; }
#introArea .md_contents .md_inner .areaBox .area01 .rightBox { float: inherit; width: 100%; padding-left: 0; margin-top: 40px; padding-top: 0; }
#introArea .md_contents .md_inner .areaBox .area01 .rightBox .text { font-size: 0.875em; line-height: 1.75em; }
#introArea .md_contents .md_inner .areaBox .area01 .rightBox .md_button { margin-top: 20px; width: 100%; }
#introArea .md_contents .md_inner .areaBox .area01 .rightBox .md_button .text { font-size: 1em; }
#introArea .md_contents .md_inner .areaBox .area01 .rightBox .md_button a {}
#introArea .md_contents .md_inner .areaBox .area01 .leftBox { float: inherit; width: inherit; margin-top: 40px; margin-left: -20px;  margin-right: -20px; }
#introArea .md_contents .md_inner .areaBox .area01 .leftBox .images01 { background: url(../../eng_imageFile/top/thumb01_sp.png) no-repeat center; background-size: cover; width: 100%; height: 0; padding-top: 30%; }

#introArea .md_contents .md_inner .areaBox .area02 { margin-top: 0;  margin-left: -20px;
    margin-right: -20px; }
#introArea .md_contents .md_inner .areaBox .area02 ul {}
#introArea .md_contents .md_inner .areaBox .area02 ul li { display: inherit; margin-top: 40px; }
#introArea .md_contents .md_inner .areaBox .area02 ul li:first-child { margin-right: 0; }
#introArea .md_contents .md_inner .areaBox .area02 ul li .images02 { text-indent: -9999px; background: url(../../eng_imageFile/top/thumb02_sp.png) no-repeat center; background-size: cover; width: 100%; height: 0; padding-top: 30%; }
#introArea .md_contents .md_inner .areaBox .area02 ul li .images03 { text-indent: -9999px; background: url(../../eng_imageFile/top/thumb03_sp.png) no-repeat center; background-size: cover; width: 100%; height: 0; padding-top: 30%; }

#introArea .md_contents .md_inner .areaBox .area02 ul li img { width: 100%; }

/*============================
#watchingTimeArea
============================*/
#watchingTimeArea { margin-top: 50px; padding: 50px 0; min-width: inherit; }
#watchingTimeArea .md_contents {}
#watchingTimeArea .md_contents .md_inner {}
#watchingTimeArea .md_contents .md_inner .md_headline {}

#watchingTimeArea .md_contents .md_inner .boxWrap { margin-top: 30px; }
#watchingTimeArea .md_contents .md_inner .boxWrap .box { box-sizing: border-box; }
#watchingTimeArea .md_contents .md_inner .boxWrap .box .inner { padding: 10px 0 9px; text-align: center; border-right: none; }
#watchingTimeArea .md_contents .md_inner .boxWrap .box:first-child .inner { border-left: none; }

#watchingTimeArea .md_contents .md_inner .boxWrap .box.rightBox .inner { padding-left: 15px; }
#watchingTimeArea .md_contents .md_inner .boxWrap .box.leftBox { border-right: none; }
#watchingTimeArea .md_contents .md_inner .boxWrap .box.leftBox .inner { padding-right: 15px; border-right: none; }

#watchingTimeArea .md_contents .md_inner .boxWrap .box .inner .season { font-size: 0.75em; line-height: 1.25; padding: 10px 15px 9px; margin-right: 0; margin-bottom: 10px; }
#watchingTimeArea .md_contents .md_inner .boxWrap .box.leftBox .inner .season { font-size: 0.75em; line-height: 1.25; padding: 10px 20px 9px; margin-right: 0; margin-bottom: 10px; }
#watchingTimeArea .md_contents .md_inner .boxWrap .box .inner .time { display: block; font-size: 1.125em; }

#watchingTimeArea .md_contents .md_inner .caption { font-size: 0.75em; line-height: 1.5; margin-top: 20px; }

#watchingTimeArea .md_contents .md_inner .md_dividerBorder { border-top: solid 1px #b6b6b6; margin: 20px 0 19px; }

#watchingTimeArea .md_contents .md_inner .textBox {}
#watchingTimeArea .md_contents .md_inner .textBox .title { font-size: 1em; font-weight: bold; line-height: 1.5; }
#watchingTimeArea .md_contents .md_inner .textBox .text { font-size: 0.875em; line-height: 1.5; margin-top: 10px; }

/*============================
#feeArea
============================*/
#feeArea { margin-top: 50px; }
#feeArea .md_contents {}
#feeArea .md_contents .md_inner {}
#feeArea .md_contents .md_inner .md_headline {}

/* sp */
#feeArea .md_contents .md_inner .md_spOnly {}
#feeArea .md_contents .md_inner .md_spOnly table.feedTableSp { margin-top: 30px; }
#feeArea .md_contents .md_inner .md_spOnly table.feedTableSp > tbody { box-sizing: border-box; border: solid 2px #222;}
#feeArea .md_contents .md_inner .md_spOnly table.feedTableSp tbody tr {}
#feeArea .md_contents .md_inner .md_spOnly table.feedTableSp tbody tr th { background-color: #dae4e6; text-align: center; vertical-align: middle; padding: 12px 0 11px; box-sizing: border-box; border-bottom: solid 1px #222; }
#feeArea .md_contents .md_inner .md_spOnly table.feedTableSp tbody tr:first-child th { background-color: #cad4d6; }
#feeArea .md_contents .md_inner .md_spOnly table.feedTableSp tbody tr.category {}
#feeArea .md_contents .md_inner .md_spOnly table.feedTableSp tbody tr.category th { font-size: 0.875em; border-right: dashed 1px #222; width: 25%; border-bottom: 0;  }
#feeArea .md_contents .md_inner .md_spOnly table.feedTableSp tbody tr.category th:last-child { border-right: none; }
#feeArea .md_contents .md_inner .md_spOnly table.feedTableSp tbody tr td { text-align: center; vertical-align: middle; }
#feeArea .md_contents .md_inner .md_spOnly table.feedTableSp tbody tr td table { width: 100%; box-sizing: border-box;  }
#feeArea .md_contents .md_inner .md_spOnly table.feedTableSp tbody tr td table.inner {}
#feeArea .md_contents .md_inner .md_spOnly table.feedTableSp tbody tr td table.inner tbody { border-top: solid 2px #222; }
#feeArea .md_contents .md_inner .md_spOnly table.feedTableSp tbody tr td table.inner tbody tr {}
#feeArea .md_contents .md_inner .md_spOnly table.feedTableSp tbody tr td table.inner tbody tr th { font-size: 0.875em; border-bottom: solid 1px #666; }
#feeArea .md_contents .md_inner .md_spOnly table.feedTableSp tbody tr td table.inner tbody tr td { font-size: 0.75em; padding: 16px 0 15px; }
#feeArea .md_contents .md_inner .md_spOnly table.feedTableSp tbody tr td table.inner tbody tr.price td { width: 25%; border-right: dashed 1px #222; }
#feeArea .md_contents .md_inner .md_spOnly table.feedTableSp tbody tr td table.inner tbody tr.price td:last-child { border-right: none; }
#feeArea .md_contents .md_inner p.text {}

/*============================
#accessArea
============================*/
#accessArea { margin-top: 50px; padding: 50px 0; min-width: inherit; }
#accessArea .md_contents {}
#accessArea .md_contents .md_inner {}
#accessArea .md_contents .md_inner .md_button {}
#accessArea .md_contents .md_inner .md_button a {}

/*============================
#bannerArea
============================*/
#bannerArea { margin-top: 20px; }
#bannerArea .md_contents {}
#bannerArea .md_contents .md_inner {}
#bannerArea .md_contents .md_inner ul {}
#bannerArea .md_contents .md_inner ul li { width: 48%; margin-right: 2%; margin-top: 15px; }
#bannerArea .md_contents .md_inner ul li:nth-child(2) { margin-right: 0; }
#bannerArea .md_contents .md_inner ul li a {}
#bannerArea .md_contents .md_inner ul li a img { width: 100%; }

}