@charset "UTF-8";
/* =====================================================================================================================
	基本
===================================================================================================================== */
/*
.container {
  padding: 0 10px;
}
*/

html {
  font-size: 2.666667vw;
  color: #fff;
  background-color: #000;
}

body {
  font-size: 1.4rem;
  line-height: 1.4;
  font-family: YakuHanJPs,'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
  background-color: #e9ecef;
  text-align: justify;
}

a, a:hover, a:active, a:visited, a:focus {
  text-decoration: none;
}

p:nth-last-child(1), ul:nth-last-child(1), li:nth-last-child(1) {
  margin-bottom: 0;
}

@media screen and (min-width: 768px) {
  html {
    font-size: 20.48px;
  }
}
/*svg ローディング*/
.loading {
  text-align: center;
}

.hide {
  display: none !important;
}

/* =====================================================================================================================
	レイアウト
===================================================================================================================== */
.layout {
  background-color: #000;
  margin: 0 auto;
  max-width: 768px;
}

.card {
  padding: 2rem 1rem;
}

.container {
  width: 100%;
  padding-right: 1rem;
  padding-left: 1rem;
  margin-right: auto;
  margin-left: auto;
}

.container-fluid {
  padding-right: 1rem;
  padding-left: 1rem;
}

section.main .container, section.main .container-fluid {
  padding-top: 1.5rem;
  padding-bottom: 4rem;
  margin-right: auto;
  margin-left: auto;
}

.footer-contents section + section {
  border-top: 0.1rem solid #ced4da;
}

/* =====================================================================================================================
	ボタン
===================================================================================================================== */
.btn {
  position: relative;
  border-width: .1rem;
}

.btn-lg, .btn-group-lg > .btn {
  padding: 1.5rem;
  font-size: 1.6rem;
}

.btn-detail {
  color: #fff;
  background-color: #007bff;
  border: 0;
  background: linear-gradient(to right, #4ca5ff 0%, #00bcd4 100%);
  box-shadow: 0px 3px 15px #4ca5ff;
  position: relative;
}
.btn-detail:after {
  content: '';
  background-image: url(../images/btn-arrow_blue.svg);
  width: 1.2em;
  height: 1.2em;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  position: absolute;
  top: 50%;
  right: .5rem;
  transform: translate(0, -50%);
}

.btn-detail:hover {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc;
  background: linear-gradient(to right, #4595E6 0%, #00A4BA 100%);
}

.btn-detail:focus, .btn-detail.focus {
  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}

.btn-detail.disabled, .btn-detail:disabled {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.btn-detail:not(:disabled):not(.disabled):active, .btn-detail:not(:disabled):not(.disabled).active, .show > .btn-detail.dropdown-toggle {
  color: #fff;
  background-color: #0062cc;
  border-color: #005cbf;
}

.btn-detail:not(:disabled):not(.disabled):active:focus, .btn-detail:not(:disabled):not(.disabled).active:focus, .show > .btn-detail.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}

.btn-go {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
  background: linear-gradient(to right, #f77062 0%, #fe5196 100%);
  box-shadow: 0px 3px 15px #fe5196;
  border: 0;
  position: relative;
}
.btn-go:after {
  content: '';
  background-image: url("../images/btn-arrow_pink.svg");
  width: 1.2em;
  height: 1.2em;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  position: absolute;
  top: 50%;
  right: .5rem;
  transform: translate(0, -50%);
}

.btn-go:hover {
  color: #fff;
  background-color: #c82333;
  border-color: #bd2130;
  background: linear-gradient(to right, #DE6659 0%, #E64988 100%);
}

.btn-go:focus, .btn-go.focus {
  box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
}

.btn-go.disabled, .btn-go:disabled {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-go:not(:disabled):not(.disabled):active, .btn-go:not(:disabled):not(.disabled).active, .show > .btn-go.dropdown-toggle {
  color: #fff;
  background-color: #bd2130;
  border-color: #b21f2d;
}

.btn-go:not(:disabled):not(.disabled):active:focus, .btn-go:not(:disabled):not(.disabled).active:focus, .show > .btn-go.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
}

.btn-outline-pink {
  color: #e83e8c;
  border-color: #e83e8c;
}
.btn-outline-pink:after {
  content: '';
  background-image: url("../images/icon-arrow_pink.svg");
  width: 1.2em;
  height: 1.2em;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  position: absolute;
  top: 50%;
  right: .5rem;
  transform: translate(0, -50%);
}

.btn-outline-pink:hover {
  color: #fff;
  background-color: #e83e8c;
  border-color: #e83e8c;
}

.btn-outline-pink:focus, .btn-outline-pink.focus {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}

.btn-outline-pink.disabled, .btn-outline-pink:disabled {
  color: #e83e8c;
  background-color: transparent;
}

.btn-outline-pink:not(:disabled):not(.disabled):active, .btn-outline-pink:not(:disabled):not(.disabled).active, .show > .btn-outline-pink.dropdown-toggle {
  color: #fff;
  background-color: #e83e8c;
  border-color: #e83e8c;
}

.btn-outline-pink:not(:disabled):not(.disabled):active:focus, .btn-outline-pink:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-pink.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}

.next-btn {
  position: relative;
  padding-bottom: 2rem;
}
.next-btn:after {
  content: '';
  background-image: url("../images/icon-arrow_wh.svg");
  width: 1.2em;
  height: 1.2em;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  position: absolute;
  bottom: .2rem;
  left: 50%;
  transform: translate(-50%, 0%) rotate(90deg);
}

.write-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #e9ecef;
  margin: 0 -1rem;
  padding: 2rem 0;
  font-size: 1.6rem;
}
.write-btn:before {
  content: '';
  background-image: url("../images/icon-pencil.svg");
  width: 1.2em;
  height: 1.2em;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  margin: 0 .5rem 0 0;
}

.sitemap a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #000;
}
.sitemap a:before {
  content: '';
  background-image: url(../images/icon-arrow.svg);
  width: .7em;
  height: .7em;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  transform: rotate(-90deg);
}

.more-btn-box {
  margin: 1.5rem 3rem 1.5rem;
  text-align: center;
}
.more-btn-box > div {
  padding: 2rem 0 0;
}

/* =====================================================================================================================
	見出し
===================================================================================================================== */
h1, h2, h3, h4, h5 {
  font-weight: 700;
}

.title {
  letter-spacing: 0.05em;
  line-height: 24px;
  color: #2b2b2b;
  font-weight: 700;
}

.title-left-bd {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}
.title-left-bd img {
  width: 1em;
}

.title {
  position: relative;
  font-weight: 700;
  display: flex;
  align-items: center;
  line-height: 1;
  letter-spacing: 0.05em;
  color: #2b2b2b;
  font-weight: 700;
}
.title span {
  padding-left: .2em;
}
.title i {
  height: 1em;
}
.title.white {
  color: #fff;
}
.title:before {
  position: relative;
  top: -1px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
}
.title.search {
  font-size: 1.6rem;
}
.title.search:before {
  content: '';
  width: 1em;
  height: 1em;
  background-image: url(../images/icon-search.svg);
  background-size: cover;
}
.title.search-icon {
  padding-bottom: .5rem;
  font-size: 1.8rem;
  color: #fff;
}
.title.search-icon:before {
  content: '';
  width: 1em;
  height: 1em;
  background-image: url(../images/icon-search-wh.svg);
  background-size: cover;
}
.title.ranking {
  color: #fff;
  font-size: 1.8rem;
}
.title.ranking:before {
  content: '';
  width: 1.5em;
  height: 1em;
  background-image: url(../images/icon-ranking.svg);
  background-size: contain;
}
.title.list {
  color: #fff;
  font-size: 1.6rem;
}
.title.list:before {
  content: '';
  width: 1.5em;
  height: 1em;
  background-image: url(../images/icon-list-wh.svg);
  background-size: contain;
}
.title.program-name {
  background-color: #fff;
  padding-bottom: 0rem;
  font-size: 1.7rem;
  margin-bottom: 10px;
  letter-spacing: 0;
  text-align: left;
}
.title.new {
  font-size: 1.8rem;
  display: flex;
  align-items: center;
}
.title.new span {
  font-size: 1.3rem;
  color: #fff;
  padding: .5rem;
  background: #fe5196;
  transform: rotate(-5deg);
  margin-right: 10px;
}
.title.new p {
  font-size: 1.2rem;
  color: #8b8b8b;
  margin-left: auto;
  font-weight: normal;
  letter-spacing: normal;
}

/* =====================================================================================================================
	パンくず
===================================================================================================================== */
.breadcrumb-nav {
  font-size: 13px;
  position: relative;
  top: 0;
  transition: all 500ms;
}

.breadcrumb {
  border-radius: 0;
  margin: 0;
  height: 33px;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  max-width: 768px;
  margin: 0 auto;
}

/* =====================================================================================================================
	グローバルナビ
===================================================================================================================== */
.global-navbar {
  position: relative;
  width: 100%;
  z-index: 99;
  background-color: rgba(0, 0, 0, 0.4);
  background-color: #fff;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.16);
  max-width: 768px;
  margin: 0 auto;
}
.global-navbar.top-nav {
  animation: navs 3s ease;
}
.global-navbar .navbar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
}
.global-navbar .navbar-inner:after {
  content: '';
  opacity: 0;
  position: absolute;
}
.global-navbar .navbar-inner .logo {
  margin: 0;
  font-size: 0;
  line-height: 1;
  position: relative;
  top: 0;
  transition: all 100ms cubic-bezier(0.42, 0, 1, 1);
}
.global-navbar .navbar-inner .logo img {
  height: 40px;
}
.global-navbar .navbar-inner .menu-list {
  position: fixed;
  left: 100%;
  width: 70%;
  height: 100vh;
  z-index: 100;
  transition: all 300ms cubic-bezier(0, 0, 0.58, 1);
}
.global-navbar .navbar-inner .menu-list:after {
  content: '';
  position: absolute;
  z-index: -1;
  background-color: rgba(0, 0, 0, 0.4);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 0;
  height: 140vh;
  opacity: 0;
}
.global-navbar .navbar-inner .menu-list > div {
  background-color: #000;
  height: 100%;
}
.global-navbar .navbar-inner .menu-list > div .menu-title {
  background-color: #e83e8c;
  color: #fff;
  text-align: center;
  padding: 1rem 0;
}
.global-navbar .navbar-inner .menu-trigger {
  cursor: pointer;
  display: flex;
  flex-flow: column;
  z-index: 105;
  align-items: center;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translate(0, -50%);
}
.global-navbar .navbar-inner .menu-trigger span {
  width: 30px;
  height: 2px;
  background-color: #2B2B2B;
  border-radius: 2px;
  transition: all 150ms;
  box-sizing: border-box;
}
.global-navbar .navbar-inner .menu-trigger span:nth-of-type(2) {
  margin: 7px 0;
}
.global-navbar .navbar-inner .menu-trigger p {
  margin: 0;
  font-size: 10px;
  line-height: 1;
  margin: 5px 0 0 0;
}

@keyframes navs {
  0% {
    opacity: 0;
    background-size: 95% auto;
  }
  30% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*  オープン時  */
.layout.fixed {
  position: fixed;
  width: 100%;
}
.layout.fixed .menu-list {
  left: 30%;
}
.layout.fixed .menu-list:after {
  content: '';
  position: absolute;
  z-index: -1;
  background-color: rgba(0, 0, 0, 0.4);
  top: 0;
  left: -43%;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 140vh;
  opacity: 1;
}
.layout.fixed .menu-trigger span:nth-of-type(1) {
  transform: translateY(9px) rotate(45deg);
}
.layout.fixed .menu-trigger span:nth-of-type(2) {
  opacity: 0;
}
.layout.fixed .menu-trigger span:nth-of-type(3) {
  transform: translateY(-9px) rotate(-45deg);
}

.nav-space {
  height: 50px;
}

.nav-space-detail {
  height: 83px;
}

.nav-group-detail.hide-up .global-navbar .navbar-inner .logo {
  top: -35px;
  opacity: 0;
  position: absolute;
}
.nav-group-detail.hide-up .breadcrumb-nav {
  top: -35px;
}
@media screen and (min-width:769px) {
	body{
		max-width: 768px;
		margin: 0 auto;
	}
	.global-navbar .navbar-inner .menu-list{
		width: 100%;
		
	}
	.layout.fixed .menu-list{
		width: 100%;
		left: 0;
	}
	.layout.fixed .menu-list > div{
		margin: 0 auto;
		max-width: 768px;
	}
}

/* =====================================================================================================================
	スライドバナー
===================================================================================================================== */
.swiper-banner-container {
  width: 100%;
  height: 6.5em;
}

.swiper-banner-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

ul.header-slider {
  overflow-x: scroll;
  white-space: nowrap;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 1rem 1rem 0rem 1rem;
}
ul.header-slider a {
  display: block;
  padding-right: 1rem;
  height: 100px;
}
ul.header-slider a img {
  border-radius: 4px;
  height: 100%;
}

/* =====================================================================================================================
	フッターバナー
===================================================================================================================== */
.footer-fixed-btn {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 999;
  padding: 0 1.5rem 1rem;
}
.footer-fixed-btn a {
  background-color: #00bcd4;
  background: linear-gradient(to right, #4ca5ff 0%, #00bcd4 100%);
  display: block;
  border-radius: .5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;
  padding: 0 2rem;
  font-size: 1.5rem;
  box-shadow: 0 3px 5px 0.2rem rgba(0, 188, 212, 0.5);
  position: relative;
  max-width: 768px;
  margin: 0 auto;
  height: 5.4rem;
}
.footer-fixed-btn a:active {
  background-color: #00a5bb;
}
.footer-fixed-btn a:after {
  content: '';
  background-image: url(../images/icon-arrow_wh.svg);
  width: 1.2em;
  height: 1.2em;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  position: absolute;
  top: 50%;
  right: .5rem;
  transform: translate(0, -50%);
}
.footer-fixed-btn a div span {
  color: #e83e8c;
  font-weight: 700;
}

/* =====================================================================================================================
	ページネーション
===================================================================================================================== */
.pagination-wraper {
  padding-top: 1.5rem;
}
.pagination-wraper .page-arrow-left {
  width: 1.5rem;
  height: 1.5rem;
  background-image: url("../images/icon-arrow_wh.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate(180deg);
}
.pagination-wraper .page-arrow-right {
  width: 1.5rem;
  height: 1.5rem;
  background-image: url("../images/icon-arrow_wh.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.pagination-wraper ul {
  display: flex;
  justify-content: center;
}
.pagination-wraper ul li {
  width: 3em;
  height: 3em;
  margin: 0 .3rem;
}
.pagination-wraper ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
  border-color: #fff;
  border: .1rem solid;
  border-radius: 100px;
  height: 100%;
  width: 100%;
  color: #fff;
  line-height: 1;
}
.pagination-wraper ul li a:active {
  background: #fff;
  color: #000;
  border-color: #fff;
}
.pagination-wraper ul li a.active {
  background: #4CA5FF;
  color: #000;
  border-color: #4CA5FF;
}
.pagination-wraper ul li span {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  height: 100%;
  width: 100%;
  line-height: 1;
}
.pagination-wraper ul li:first-child {
  width: 2rem;
  margin: 0 .3rem 0 0;
}
.pagination-wraper ul li:first-child a {
  border: 0px solid #fff;
}
.pagination-wraper ul li:last-child {
  width: 2em;
  margin: 0 0 0 .3rem;
}
.pagination-wraper ul li:last-child a {
  border: 0px solid #fff;
}

.pagination-wraper.white .page-arrow-left {
  background-image: url("../images/icon-arrow_bk.svg");
}
.pagination-wraper.white .page-arrow-right {
  background-image: url("../images/icon-arrow_bk.svg");
}
.pagination-wraper.white ul li a {
  border-color: #000;
  color: #000;
}
.pagination-wraper.white ul li a:active {
  background: #6c757d;
  color: #fff;
  border-color: #6c757d;
}
.pagination-wraper.white ul li a.active {
  background: #4CA5FF;
  color: #fff;
  border-color: #4CA5FF;
}
.pagination-wraper.white ul li:first-child a {
  border: 0px solid #000;
}
.pagination-wraper.white ul li:last-child a {
  border: 0px solid #000;
}