#eyecatch{position: relative;}
#eyecatch .hptitle{
  position: absolute;
  top:10%;
  bottom:10%;
  left:0;
  right:0;
  margin:auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display:flex;
  flex-direction: column;
  justify-content:center;
  align-items:center;
}
#eyecatch .hptitle div.logoimg{position:relative;}
#eyecatch .hptitle div.logoimg .back{ top:0; bottom:0; left:0; right:0; position: absolute;}
.front {animation: a1_1 ease-in 10s forwards infinite;}
.back {animation: a1_2 ease-in 10s forwards infinite;}

@keyframes a1_1 {
  0% {transform: rotateY(0deg);}
  24% {transform: rotateY(90deg); opacity:1.0;}
  25% {opacity:0.0;}
  74% {opacity:0.0;}
  75% {transform: rotateY(90deg); opacity:1.0;}
  100% {transform: rotateY(0deg);}
}
@keyframes a1_2 {
  0% { opacity:0.0;}
  24% {opacity:0.0;}
  25% {transform: rotateY(90deg); opacity:1.0;}
  50% {transform: rotateY(0deg);}
  74% {transform: rotateY(90deg); opacity:1.0;}
  75% { opacity:0.0;}
  100% { opacity:0.0;}
}

/*
#eyecatch .hptitle{
  position: absolute;
  top:10%;
  bottom:10%;
  left:0;
  right:0;
  margin:auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display:flex;
  flex-direction: column;
  justify-content:center;
  align-items:center;
}
#eyecatch .hptitle div.logoimg{
  width:100%;
	transform-style: preserve-3d;
	position: relative;
  animation: rote 10s linear infinite;
  margin:0 auto;
}
#eyecatch .hptitle,.front, .back {
	width: 300px;
	height: 210px;
}

@media (min-width:1200px) {
  #eyecatch .hptitle,.front, .back {
    width: 576px;
    height: 403px;
  }
}
@media screen and (-webkit-min-device-pixel-ratio:0){
  #eyecatch .hptitle,.front, .back  {
    width: auto !important;
    height: auto !important;
  }
}
.front, .back {
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  display:block;
  margin:auto;
  top: 0;
  bottom:0;
  right:0;
  left: 0;
}
.front {
	z-index: 2;
	transform: rotateY(0deg);
}
.back {
	transform: rotateY(180deg);
}
@keyframes rote {
  0% { transform:rotate(0deg) }
  25% { transform:rotateY(180deg) }
  50% { transform:rotateY(180deg) }
  75% { transform:rotate(0deg) }
  100% { transform:rotate(0deg) }
}
@supports (-ms-ime-align: auto) {
  #eyecatch .hptitle div.logoimg{animation: roteie 8s linear infinite;}
}
@media all and (-ms-high-contrast:none){
  #eyecatch .hptitle div.logoimg{animation: roteie 8s linear infinite;}
}
@keyframes roteie{
 from { transform: rotateY(0deg); }
 to { transform: rotateY(360deg); }
}
*/
/*Safariだけに適用されるCSSハック
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  _::-webkit-full-page-media, _:future, :root .back{display:none;}
  _::-webkit-full-page-media, _:future, :root #eyecatch .hptitle div.logoimg{animation:none 0 ease 0 1 normal; transform-style:flat;}
}*/


.iphone #eyecatch .hptitle div.logoimg{animation:none 0 ease 0 1 normal; transform-style:flat;}
.iphone #eyecatch .hptitle div.logoimg img.back{display:none;}

/*
#eyecatch .hptitle img:nth-child(2){width:40%; max-width:185px;}

@media (min-width:576px) {
  #eyecatch .hptitle{top:80px; bottom:20%;}
  #eyecatch .hptitle div.logoimg img{width:80%;}
  #eyecatch .hptitle img:nth-child(2){margin-bottom:0rem;}
}
@media (min-width: 768px) {
  #eyecatch .hptitle div.logoimg img{max-width: 400px; margin-bottom:1rem;}
  #eyecatch .hptitle img:nth-child(2){margin-bottom:1rem;}
  #eyecatch .hptitle img:nth-child(3){max-height: 80px;}
}

@media (min-width: 1200px) {
  #eyecatch .hptitle{top:80px; bottom:5%;}
  #eyecatch .hptitle div.logoimg img{max-width: 500px; margin-bottom: 3rem;}
}
*/


#index section{padding-bottom: 5em;}
#index section#program{
  background: url(/wp-content/themes/aplan/img/top_bg_03.jpg) center center no-repeat;
  background-size: cover;
}
#index section#pickup{background-color: #E5F4FF;}
#index section#news{
  background: url(/wp-content/themes/aplan/img/top_bg_04.jpg) center center no-repeat;
  background-size: cover;
}



#index .sstitle{position: relative; margin-bottom:3em; padding:0px 15px;}
#index .sstitle > div{position: absolute; display:flex; justify-content:center; align-items:center; margin:auto; text-align:center; 
  top: 0;
  left: 0;
  right: 0;
bottom:10%;}
#index .sstitle img{width:100%;}
#index .sstitle h2{color: #FFFFFF; font-size: 2rem; font-weight: 400; margin:0;}
#index .sstitle h2 span{display:block; font-size:60%; margin-top:5px; font-weight:200;}
@media (max-width: 767px) {
  #index .sstitle{max-width:none; padding:0;}
}
@media (max-width: 400px) {
  #index .sstitle{padding-top:20px;}
  #index .sstitle:before{
    position: absolute;
    content: " ";
    display: block;
    width:100%;
    height:21px;
    top:0;
    background-color:#ffffff;
  }
  #index section:first-child .sstitle:before{background-color:#81bf3b;}
  #index section:nth-child(2) .sstitle:before{background-color:#fa7a32;}
  #index section:nth-child(3) .sstitle:before{background-color:#467cce;}
  #index section:nth-child(4) .sstitle:before{background-color:#a2a2a2;}
  #index section:nth-child(5) .sstitle:before{background-color:#fe038d;}
  #index .sstitle > div{bottom:15%;}
}



/* ATTRACTION
----------------------------------------------------------------------------------------------------*/
#index .carousel-indicators li{width: 13px; height: 13px; border:2px solid #ffffff; border-radius: 100%; background-color:transparent;}
#index .carousel-indicators li.active{background-color:#ffffff ;}
#index .carousel-inner div.position{z-index:5; left:0; right:0; margin:0 auto; position: absolute;}
#index .carousel-caption{
  top:33%;
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display:flex;
  justify-content:center;
  flex-direction: column;
  background-color: rgba(0,0,0,.7);
  right:15px;
  left:15px;
  bottom: auto;
  padding:10px;
  text-align:left;
}
#index .carousel-item{
  background: url(/wp-content/themes/aplan/img/pr/pr_sp.jpg) center center no-repeat;
  background-size: cover; height:430px; width:100%;
}
#index .carousel-item.i01{background: url(/wp-content/themes/aplan/img/topslide_01.jpg) center center no-repeat; background-size: cover;}
#index .carousel-item.i02{background: url(/wp-content/themes/aplan/img/topslide_02.jpg) center center no-repeat; background-size: cover;}

@media (min-width:576px) {
  #index .carousel-caption{
    padding:20px;
  }
}
@media (min-width:768px) {
  #index .carousel-caption{
    top:35%;
    right:10%;
    left:10%;
    padding:20px;
  }
}
@media (min-width:992px) {
  #index .carousel-caption{
    top:35%;
    right:15%;
    left:0%;
    justify-content:flex-start;
  }
  #index .carousel-item{
    background:transparent;
    height:auto;
  }
  #index .carousel-item.i01 .carousel-caption, #index .carousel-item.i02 .carousel-caption{width:40%;}
}


/*
 プログラム
----------------------------------------------------------------------------------------------------*/
#program > div > div span{color: #FFFFFF;}
#program div.row div a{display: inline-block; transition: background 3s;}


/* ピックアップ
----------------------------------------------------------------------------------------------------*/
#pickup div.row{justify-content:center;}
#pickup div.row a{color: #467FDB;}
#pickup div.row a:hover{color: #333333;}
#pickup ul li:first-child{
  border-bottom: 1px solid #cccccc;
  margin-bottom: .5em;
}
#pickup .btn-default{
  width: 150px;
  background: #467CCE;
  border: 1px solid #467CCE;
  border-radius: 25px;
}
#pickup .btn-default:hover, #pickup .btn-default:focus, #pickup .btn-default:active{
  background: #ffffff;
  color:#467CCE;
}
#pickup div.row > div:nth-child(n+5){display:block;}
@media (max-width: 767px) {
  #pickup div.row > div:nth-child(n+5){display:none;}
}
#pickup div.row a:hover img{
  -webkit-backface-visibility: hidden; 
  backface-visibility: hidden;
	-webkit-transition: all .3s;
	transition: all .3s;
  will-change: transform; /* ←追記分 */
}
#pickup div.row a:hover img{opacity: 0.7;  filter: alpha(opacity=70); -ms-filter: "alpha(opacity=70)";}
.program-cat a > div{border-radius:100%; display:block; max-width:142px; width:100%; margin:0 auto; 
	-webkit-transition: all .3s;
	transition: all .3s;}

/* 新着情報
----------------------------------------------------------------------------------------------------*/
#news .topics th{
  font-weight: normal;
  width: 270px;
  color: #A0A0A0;
}
#news .topics th .badge{
  font-size: 110%;
  width: 120px;
  color: #E3E3E3;
  border: 1px solid #E3E3E3;
  border-radius: 0%;
  padding: .3rem;
  margin-right: 1.5rem;
}
#news .topics td a{color: #E3E3E3;}
#news .btn-default{
  width: 150px;
  background: #A2A2A2;
  border: 1px solid #A2A2A2;
  border-radius: 25px;
}
#news .btn-default:hover, #news .btn-default:focus, #news .btn-default:active{
  background: #ffffff;
  color:#A2A2A2;
}