@charset "utf-8";
@media only screen and (max-width:767px) {

/*
    basic
----------------------------------------------*/
html{
    font-size: 62.5%
}
body {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	word-break: break-all;
}
*{
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    zoom:1;
	-webkit-text-size-adjust: 100%;
}
a{
    outline: none;
    -webkit-transition: 0.3s;
            transition: 0.3s;
}
a:link    { color: #0676B6; text-decoration: underline; }
a:visited { color: #0676B6; text-decoration: underline; }
a:hover,
a:focus,
a:active  { text-decoration: underline;}
a:hover{
    opacity: 0.7;
}
img{
    max-width: 100%;
    width: auto;
    height: auto;
}

.none {
display: none;
}
.pc{
    display: none;
}
.pc2{
    display: none;
}
.pc-inline{
    display: none;
}
.sp{
    display: inline;
}
.sp2{
    display: block;
}
.m0{
    margin: 0 !important;
}


header .inner:after,
.app-list:after,
#movielist .heading:after,
.icon-list:after,
.app-list:after,
.pickup-list:after,
.clearfix:after {
    display    : block;
    clear      : both;
    content    : "";
}

#container{

}
.inner{
	width: 94%;
	margin: 0 auto;
}


/************************************************
header
************************************************/
header{
	width: 100%;
	/* margin: 0 0 5% 0; */
	padding: 3% 0;
	background: #f7f7f7;
}
header .logo{
	width: 30%;
	float: left
}
header .app-list{
	width: 63%;
/*	padding: 0.5% 0 0 0;*/
	float: right
}
header .app-list li{
	width: 48%;
	margin: 0 4% 0 0;
	float: left;
}
header .app-list li:last-child{
	margin: 0;
}


/************************************************
main
************************************************/
main{
	padding: 0 0 5% 0;
	display: block;
}
.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
    bottom: -13% !important;
}
#slider {
    width: 100%;
    padding: 0 0 10% 0;
    overflow: hidden;
}

/*  帯   */
#program-belt{
  margin: 0 0 5% 0;
  padding: 2% 0;
  background: #f2e727;
  overflow: hidden;
}
#program-belt .inner{
  width: 86%;
  margin: 0 auto;
  position: relative;
}
#program-belt .txt{
  width: 100%;
}
#program-belt .btn{
  width: 37%;
  position: absolute;
  bottom: 2%;
  right: 0;
}
#program-belt .btn a{
  transition: 0.3s;
}
#program-belt .btn a:hover{
  opacity: 0.7;
}

#contents-list{
	width: 100%;
	margin: 0 0 5% 0;
	text-align: center;
	position: relative;
}
#contents-list .list{
	width: 38%;
    position: absolute;
    top: 12.8%;
    left: 1%;
}

.table-area{
  width: 94%;
  margin: 0 auto 8% auto;
}
.table-area  .table{
  margin: 0 0 5% 0;
}
.table-area p{
  padding: 0 0 0 2.6em;
  text-indent: -2.6em;
  font-size: calc(15 / 640 * 100vw);
  line-height: 1.5;
}
.table-area p.indent{
  padding: 0 0 0 1.4em;
  text-indent: -1.4em;
}
.table-area p.indent02{
  padding: 0 0 0 0.9em;
  text-indent: -0.9em;
}
.table-area p + p{
  margin: calc(5 / 640 * 100vw) 0 0 0;
}

.line{
  width: 94%;
  height: calc(290 / 640 * 100vw);
  margin: 0 auto 8% auto;
  background: #00b900;
  border-radius: 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* .line img{
  width: 100%;
  height: auto;
} */
.line .ttl{
  width: calc(450 / 640 * 100vw);
  margin: 0 auto;
}
.line a{
  display: block;
  width: calc(320 / 640 * 100vw);
  margin: calc(40 / 640 * 100vw) auto 0;
}
/* .line{
  width: 94%;
  margin: 0 auto 8% auto;
  padding: calc(40 / 640 * 100vw);
  background: #00b900;
  border-radius: calc(50 / 640 * 100vw);
}
.line .ttl{
  width: calc(451 / 640 * 100vw);
  margin: 0 auto calc(32 / 640 * 100vw) auto;
} */
/* .line .ttl img{
  width: 491px;
  grid-row: 1 / 2;
  grid-column: 1 / 2;
} */
/* .line .fukidashi{
  width: calc(471 / 640 * 100vw);
  margin: 0 auto calc(12 / 640 * 100vw) auto;
}
.line .text{
  width: calc(370 / 640 * 100vw);
  margin: 0 auto calc(28 / 640 * 100vw) auto;
}
.line .link{
  width: calc(320 / 640 * 100vw);
  margin: 0 auto;
} */

#topics{
  width: 94%;
	margin: 0 auto 8% auto;
	border-radius: 24px;
	background: #0462ca;
}
#topics h2{
	padding: 10px 5%;
}
#topics .title-area{
	margin: 0 0 5% 0;
	padding: 10px 5%;
	background: #1d71ce;
}
#topics .title-area .title{
	font-size: 15px;
	font-size: 1.5rem;
	line-height: 1.5;
	color: #fff;
}
#topics .title-area .time{
	font-size: 11px;
	font-size: 1.1rem;
	line-height: 1.3;
	color: #fff;
}
#topics .detail-area{
	padding: 0 0 5% 0;
}
#topics .detail-area .image{
	width: 60%;
    max-height: 150px;
    margin: 0 auto 5% auto;
    overflow: hidden;
}
#topics .detail-area .sentence{
	width: 80%;
	margin: 0 auto;
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 1.5;
	color: #fff;
}
#topics .detail-area .sentence a{
	font-weight: bold;
	color: #fff;
	text-decoration: none;
}
#topics .detail-area .sentence a:hover{
	text-decoration: underline;
}

.topic-detail {
   text-align: left;
   max-width: 832px;
   margin: 15% auto 19% auto;
	 padding: 24px 0;
	border-radius: 24px;
	background: #0462ca;
}
.topic-detail .title-area{
	margin: 0 0 5% 0;
	padding: 10px 5%;
	background: #1d71ce;
}
.topic-detail .title-area .title{
	font-size: 15px;
	font-size: 1.5rem;
	line-height: 1.5;
	color: #fff;
}
.topic-detail .title-area .time{
	font-size: 11px;
	font-size: 1.1rem;
	line-height: 1.3;
	color: #fff;
}
.topic-detail .detail-area .image{
	width: 60%;
	margin: 0 auto 5% auto;
	text-align: center;
}
.topic-detail .detail-area .sentence{
	width: 85%;
	margin: 0 auto;
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 1.5;
	color: #fff;
}
.topic-detail .close{
	max-width: 50px;
	position: absolute;
	top: 10px;
	left: 90%;
}

#twitter{
  width: 94%;
	margin: 0 auto 8% auto;
	padding: 0 10% 10% 10%;
	border-radius: 36px;
	background: #000000;
}
#twitter h3{
	width: 70%;
	margin: 0 auto 5% auto;
	padding: 5% 0 0 0;
	text-align: center;
}
#twitter .timeline{
	width: 100%;
	height: 400px;
	margin: 0 auto;
	overflow: hidden;
}
#twitter iframe{
	width: 100%;
}



/************************************************
movielist
************************************************/
#movielist .breadcrumb{
  margin: 0 0 5% 0;
	padding: 3% 0 0 0;
  font-size: 0;
}
#movielist .breadcrumb li{
  display: inline;
  font-size: calc(11px + 10 * ((100vw - 320px) / 704));
  position: relative;
}
#movielist .breadcrumb li a{
  color: #2766bb;
  text-decoration: none;
}
#movielist .breadcrumb li + li{
  margin: 0 0 0 3%;
}
#movielist .breadcrumb li + li:before{
  content: "<";
  margin: 0 3% 0 0;
  font-size: calc(11px + 10 * ((100vw - 320px) / 704));
  /* position: absolute;
  left: -15%;
  top: -5%; */
}
#movielist .heading{
	margin: 0 0 5% 0;
	padding: 0 0 2% 0;
	border-bottom: 2px solid #0462ca;
}
#movielist .heading h1{
	/* width: 60%; */
	font-size: calc(18px + 36 * ((100vw - 320px) / 704));
	/* float: left; */
}
#movielist .heading h1 .small{
  /* margin: 0 0 0 5%; */
	font-size: calc(10px + 20 * ((100vw - 320px) / 704));
}
#movielist .heading p{
	width: 40%;
	padding: 1% 0 0 0;
	text-align: right;
	font-size: calc(13px + 26 * ((100vw - 320px) / 704));
	float: left;
}
#movielist .heading p a{
	color: #666;
	text-decoration: none;
}
#movielist .heading p a:hover{
	text-decoration: underline;
}
.about{
  width: 94%;
  margin: 5% auto;
}

.bnr{
  margin: 0 0 7% 0;
}
.bnr img{
  width: 100%;
}
.caption{
  /* width: calc(553/768*100vw); */
  width: 100%;
  margin: calc(45/768*100vw) auto calc(20/768*100vw) auto;
  text-align: center;
}
/* .program00{
	margin: 0 0 7% 0;
	padding: 5% 3%;
	background: #ffeee3;
}
.program00 h3{
	margin: 0 0 4% 0;
	padding: 2% 3%;
	font-size: 15px;
	font-size: 1.5rem;
	font-weight: bold;
  line-height: 1.2;
	color: #fff;
	background: #666;
}
.program00 .pickup h3{
	background: #ff8037;
}
.program00 .kind .kind-left{
	margin: 0 0 7% 0;
} */
.program01{
	margin: 0 0 7% 0;
	padding: 5% 3%;
	background: #ffeef2;
}
.program01 h2{
	margin: 0 0 4% 0;
	font-size: 18px;
	font-size: 1.8rem;
	line-height: 1.5;
	font-weight: bold;
	color: #ff5a84;
}
.program01 h2 span{
	display: block;
	font-size: 13px;
	font-size: 1.3rem;
}
.program01 .kind{
	overflow: hidden;
}
.program01 .kind + .kind{
	margin: 7% 0 0 0;
}
.program01 h3{
	margin: 0 0 4% 0;
	padding: 2% 3%;
	font-size: 15px;
	font-size: 1.5rem;
	font-weight: bold;
  line-height: 1.2;
	color: #fff;
	background: #666;
}
.program01 .pickup h3{
	background: #ff5a84;
}
.program01 .kind .kind-left{
	margin: 0 0 7% 0;
}
.program01 .kind .kind-left .program-list02 li:last-child .name{
	width: 110% !important;
}
.program01 .kind .kind-right{
	position: relative;
}
.program01 .kind .kind-right .thumb{
	width: 30%;
	margin: 0 0 5px 0;
}
.program01 .kind .kind-right .balloon{
	width: 50%;
	position: absolute;
	top: 59%;
	left: 35%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
/* .program01 .kind .kind-right .balloon .b01{
	margin: 0 0 7% 0;
	padding: 5%;
	background: #27bbb9;
	border-radius: 10px;
	position: relative;
}
.program01 .kind .kind-right .balloon .b01:before{
	content: '';
	position: absolute;
	left: -22px;
	top: 50%;
	margin: -10px 0 0 0;
	border: 10px solid transparent;
	border-right: 15px solid #27bbb9;
	z-index: 100;
}
.program01 .kind .kind-right .balloon .b01 p{
	font-size: 12px;
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 1.3;
	color: #fff;
}
.program01 .kind .kind-right .balloon .b02{
	padding: 5%;
	background: #ff5a84;
	border-radius: 10px;
	position: relative;
}
.program01 .kind .kind-right .balloon .b02:before{
	content: '';
	position: absolute;
	left: -22px;
	top: 50%;
	margin: -10px 0 0 0;
	border: 10px solid transparent;
	border-right: 15px solid #ff5a84;
	z-index: 100;
}
.program01 .kind .kind-right .balloon .b02 p{
	font-size: 12px;
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 1.3;
	color: #fff;
} */
.program01 .kind .kind-right .balloon .b03{
	margin: 0 0 7% 0;
	padding: 5%;
	background: #2766bb;
	border-radius: 10px;
	position: relative;
}
.program01 .kind .kind-right .balloon .b03:before{
	content: '';
	position: absolute;
	left: -22px;
	top: 50%;
	margin: -10px 0 0 0;
	border: 10px solid transparent;
	border-right: 15px solid #2766bb;
	z-index: 100;
}
.program01 .kind .kind-right .balloon .b03 .heading{
	font-size: 12px;
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 1.3;
	color: #fff;
}
.program01 .kind .kind-right .balloon .b03 .sentence{
	font-size: 11px;
	font-size: 1.1rem;
	line-height: 1.3;
	color: #fff;
}
.program01 .kind .name{
	font-size: 13px;
	font-size: 1.3rem;
	line-height: 1.3;
	color: #000;
}
.program01 .kind .name span{
	font-size: 11px;
	font-size: 1.1rem;
	color: #fa1851;
}
.program01 .kind .origin-left{
	margin: 0 0 5% 0;
}
.program01 .kind .content{
	margin: 0 0 5px 0;
	overflow: hidden;
}
.program01 .kind .content .thumb-left{
	width: 30%;
	margin: 0 3% 0 0;
	float: left;
}
.program01 .kind .content .s-list{
	width: 55%;
	float: left;
	font-size: 0;
}
.program01 .kind .content .s-list li{
	width: 49%;
	margin: 0 2% 3% 0;
	display: inline-block;
}
.program01 .kind .content .s-list li:nth-child(2n){
	width: 49%;
	margin: 0 0 3% 0;
	display: inline-block;
}
.program01 .kind .content .s-list li{
	width: 49%;
	margin: 0 2% 3% 0;
	display: inline-block;
	vertical-align: top;
}
.program01 .kind .content .s-list li .thumb-s{
	margin: 0 0 3px 0;
	line-height: 0;
}
.program01 .kind .content .s-list li .name-s{
	font-size: 10px;
	font-size: 1.0rem;
	line-height: 1.3;
	color: #000;
}
.program01 .kind .origin-right{

}


.program02{
	margin: 0 0 7% 0;
	padding: 4% 3% 5% 3%;
	background: #dfe9f5;
}
.program02 h2{
	margin: 0 0 4% 0;
	font-size: 18px;
	font-size: 1.8rem;
	line-height: 1.5;
	font-weight: bold;
	color: #166dce;
}
.program02 h2 span{
	display: block;
	font-size: 13px;
	font-size: 1.3rem;
}

#movielist .program-list{
	margin: 0;
	font-size: 0;
}
#movielist .program-list li{
	width: 30%;
	margin: 5% 0 0 5%;
	display: inline-block;
	vertical-align: top;
}
#movielist .program-list li:nth-child(n+2):not(:nth-child(n+4)){
	margin: 0 0 0 5%;
}
#movielist .program-list li:nth-child(3n+1){
	margin: 5% 0 0 0;
}
#movielist .program-list li:nth-child(1){
	margin: 0;
}
#movielist .program-list li .thumb{
	margin: 0 0 5px 0;
	line-height: 0;
}
#movielist .program-list li .name{
	font-size: 12px;
	font-size: 1.2rem;
	line-height: 1.3;
	color: #000;
}
#movielist .program-list02 li{
	width: 30%;
	margin: 5% 0 0 5%;
	display: inline-block;
	vertical-align: top;
}



.sns-area .official-x {
	margin: 0 auto 8% auto;
	width: 94%;
}

.sns-area .official-line {
	margin: 0 auto 10.9% auto;
	width: 94%;
}

.sns-area .official-x img,
.sns-area .official-line img {
	width: 100%;
}

.dl-area{
	width: 94%;
	margin: 0 auto 8% auto;
	padding: 5%;
	background: #f9f9f9;
	border: 5px solid #ececec;
	border-radius: 15px;
}
.dl-area .dl-heading{
	margin: 0 0 5% 0;
	text-align: center;
}
.dl-area .app-list{
	width: 88%;
	margin: 0 auto;
	text-align: center;
}
.dl-area .app-list li{
	width: 48%;
  margin: 0 2.35% 0 0;
	float: left;
}
.dl-area .app-list li:last-child{
  width: 49.65%;
	margin: 0;
}
.bottom{
  width: 94%;
	margin: 0 auto 5% auto;
}
.bottom .sentence{
	width: 100%;
    margin: 0 auto 3% auto;
    padding: 0 0 0 35%;
    font-size: calc(26 / 640 * 100vw);
    font-weight: bold;
    line-height: 1.5;
    color: #333;
    background: url(../images/sp/icon_pc_02.png) no-repeat 0 10%;
    background-size: 30%;
}
.bottom02{
	margin: 0 auto;
}
.bottom02 .sentence{
	width: 100%;
    margin: 0 auto 3% auto;
    padding: 0 0 0 35%;
    font-size: calc(14px + 28 * ((100vw - 320px) / 704));
    font-weight: bold;
    line-height: 1.5;
    color: #333;
    background: url(../images/sp/icon_pc_02.png) no-repeat 0 10%;
    background-size: 30%;
}
.bnr-list{
  width: 94%;
	margin: 0 auto 5% auto;
	overflow: hidden;
}
.bnr-list li{
	width: 32%;
    margin: 0 2% 2% 0;
    float: left;
}
.bnr-list li:nth-child(3n){
	margin: 0 0 2% 0;
}
.bnr-list li a{
	-webkit-transition: 0.3s;
	transition: 0.3s;
}
.bnr-list li a:hover{
	opacity: 0.7;
}
.asterisk-list li{
	/* margin: 0 0 3px 0; */
	padding: 0 0 0 1em;
	text-indent: -1em;
	font-size: calc(15 / 640 * 100vw);
	line-height: 1.5;
}
.asterisk-list li a{
	text-decoration: none;
}
.asterisk-list li a:hover{
	text-decoration: underline;
}
.asterisk-list li:last-child{
	display: none;
}
.asterisk-list02{
  width: 94%;
	margin: 0 auto 3% auto;
}
.asterisk-list02 li{
	margin: 0 0 1px 0;
	padding: 0 0 0 1em;
	text-indent: -1em;
	font-size: 11px;
	font-size: 1.1rem;
	line-height: 1.5;
}
.copyright{
  width: 94%;
	margin: 0 auto;
	font-size: 11px;
	font-size: 1.1rem;
	line-height: 1.3;
}

/************************************************
error
************************************************/
.error{
  margin: 10% 0;
}
.error p{
  font-size: 14px;
	font-size: 1.4rem;
  line-height: 1.8;
}
.error p a{
  text-decoration: none;
}

/************************************************
footer
************************************************/

.to-top{
    width: 10%;
    max-width: 55px;
    bottom: 1.5%;
    right: 3%;
    z-index: 10000;
    position: fixed;
}

footer{
    background: #f7f7f7;
    padding: 7% 0px;
}
footer .inner{
	overflow: hidden;
}
footer .logo-list{
  margin: 0 0 calc(21 / 640 * 100vw) 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
footer .logo-list li:nth-child(1){
  width: calc(174 / 640 * 100vw);
}
footer .logo-list li:nth-child(2){
  width: calc(134 / 640 * 100vw);
}
footer .logo-list li:nth-child(3){
  width: calc(112 / 640 * 100vw);
}
footer .logo-list li + li{
  margin: 0 0 0 calc(60 / 640 * 100vw);
}
footer .right{
/*
	width: 61%;
	float: right;
*/
}
footer .right ul{
	width: 53%;
	margin: 0 0 5% 0;
	float: left;
}
footer .right ul li{
	margin: 0 0 3% 0;
}
footer .right ul li:last-child{
	margin: 0;
}
footer .right ul li a{
	font-size: calc(12px + 28 * ((100vw - 320px) / 704));
	font-weight: bold;
	line-height: 1.3;
	color: #000;
	text-decoration: none;
}
footer .right ul li a:hover{
	text-decoration: underline;
}
footer .sentence{
	margin: 0 0 5% 0;
    font-size: calc(10px + 14 * ((100vw - 320px) / 704));
    line-height: 1.5;
	clear: both;
}
footer .sentence02 a{
    font-size: calc(10px + 14 * ((100vw - 320px) / 704));
	font-weight: bold;
    line-height: 1.5;
	color: #000;
	text-decoration: none;
}
footer .sentence02 a:hover{
	text-decoration: underline;
}


}