@charset "utf-8";

/*--------------------------------------------------------------------------------------------------

   page

--------------------------------------------------------------------------------------------------*/


/*------------------------------------------------------------------------------------------------
  index
--------------------------------------------------------------------------------------------------*/
#mv {
	background: url(../image/mv_back.png) no-repeat 50% 100%;
	background-size: cover;
	height: 490px;
	position: relative;
}

.fuwafuwa {
	position: absolute;
	top: 14%;
	right: 10%;
 animation: fuwafuwa 3s ease-in-out infinite alternate;
 background: url(../image/kumo-01.png) no-repeat center center;
 display: inline-block;
 transition: 1.5s ease-in-out;
 width: 108px;
 height: 40px;
}

.fuwafuwa2 {
	position: absolute;
	top: 50%;
	left: calc( 50% - 510px);
 animation: fuwafuwa 3s ease-in-out infinite alternate;
 background: url(../image/kumo-02.png) no-repeat center center;
 display: inline-block;
 transition: 1.5s ease-in-out;
 width: 25px;
 height: 8px;
}
 
@keyframes fuwafuwa {
 0% {
   transform:translate(0, 0) rotate(-5deg);
 }
 50% {
   transform:translate(0, -10px) rotate(0deg);
 }
 100% {
   transform:translate(0, 0) rotate(5deg);
 }
}

@keyframes rotate-y {
 0%{
		transform:rotateY(0deg);
	}
	33% {
		transform:rotateY(0deg);
	}
 100%{
		transform:rotateY(360deg);
	}
}

#mv .indexRecommend {
	position: absolute;
	width: 900px;
	margin: 0 auto;
	padding: 30px 26px;
	background-color: #FFF;
	border-radius: 10px;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
	display: flex;
	box-shadow: 0 0 10px #CCC;
}

#mv .indexRecommend:before {
	position: absolute;
	top: -30px;
	left: -30px;
	content: "";
	background: url(../image/recommend.png) no-repeat 0 0;
	width: 120px;
	height: 120px;
	animation:rotate-y 2s infinite;
	-webkit-animation:rotate-y 3s infinite;
	animation-delay: 2s;
	z-index: 10;
}

#mv .indexRecommend .visual {
	margin-right: 24px;
}

#mv .indexRecommend .text h2 {
	font-size: 24px;
	font-weight: 600;
	margin: 0 0 10px;
}

#mv .indexRecommend .text p {
	line-height: 1.8;
	margin: 0 0 10px;
}

#mv .indexRecommend .text dl {
	padding: 16px 0;
	background: url(../image/line-01.png) repeat-x 0 0;
}

#mv .indexRecommend .text dt {
	font-size: 16px;
	font-weight: 600;
}

#mv .indexRecommend .text dd {
	line-height: 1.4;
}

#indexRegular {
	background: url(../image/back-01.png) repeat center 0;
}

#indexRegular .inner {
	width: 860px;
	margin: 0 auto;
	padding: 80px 0;
}

#indexRegular .inner h2 {
	margin: 0 0 20px;
	font-size: 28px;
	font-weight: 600;
	display: inline-block;
	text-align: center;
	border: 2px solid #32b16c;
	border-radius: 8px;
	box-shadow: 6px 6px 0 #32b16c;
	background-color: #FFF;
	position: relative;
	left: 50%;
 transform: translateX(-50%);
 -webkit-transform: translateX(-50%);
 -ms-transform: translateX(-50%);
	padding: 0 16px 2px;
}

#indexRegular .inner p.lead {
	margin: 0 0 30px;
	text-align: center;
}

#indexRegular .inner .program {
	margin: 0 0 10px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

#indexRegular .inner .program .box {
	width: 400px;
	margin: 0 0 30px;
}

#indexRegular .inner .program .box img {
	border-radius: 10px 10px 0 0;
	box-shadow: 0 0 10px #CCC;
}


#indexRegular .inner .program .box .text {
	background-color: #FFF;
	padding: 20px;
	border-radius: 0 0 10px 10px;
	box-shadow: 0 0 10px #CCC;
}

#indexRegular .inner .program .box .text h3 {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 500;
}

#indexRegular .inner .program .box .text p {
	margin: 0 0 16px;
	line-height: 1.4;
}

#indexRegular .inner .program .box .text a {
	display: block;
	width: 180px;
	margin: 0 auto;
	padding: 4px 0 6px;
	text-align: center;
	color: #FFF;
	text-decoration: none;
	border-radius: 10px;
	font-size: 14px;
	background: url(../image/arrow-01.png) #32b16c no-repeat 92% center;
	background-size: 16px;
}

.btns {
	display: flex;
	justify-content: center;
}

.btns a {
	display: inline-block;
	width: 240px;
	margin: 0 10px;
	padding: 12px 20px 14px;
	text-align: center;
	color: #FFF;
	text-decoration: none;
	border-radius: 10px;
	background-color: #32b16c;
	box-shadow: 0 0 6px #CCC;
}

.btns a img {
	margin-left: 10px;
	vertical-align: -3px;
}

#indexPremium {
/*	background: url(../image/back-02.png) no-repeat 50% 0; */
	background: url(../image/back-02.png) repeat 50% 0;
}

#indexPremium .inner {
	width: 860px;
	margin: 0 auto;
	padding: 80px 0;
}

#indexPremium .inner h2 {
	margin: 0 0 20px;
	font-size: 28px;
	font-weight: 600;
	display: inline-block;
	text-align: center;
	border: 2px solid #32b16c;
	border-radius: 8px;
	box-shadow: 6px 6px 0 #32b16c;
	background-color: #FFF;
	position: relative;
	left: 50%;
 transform: translateX(-50%);
 -webkit-transform: translateX(-50%);
 -ms-transform: translateX(-50%);
	padding: 0 16px 2px;
}

#indexPremium .inner p.lead {
	margin: 0 0 30px;
	text-align: center;
}

#indexPremium .inner .program {
	margin-bottom: 50px;
}

#indexPremium .inner .program img {
	margin: 0 auto 20px;
	border-radius: 10px;
	max-width: 80%;
	display: block;
}

#indexPremium .inner .program .text {
}

#indexPremium .inner .program .text dl {
margin-bottom: 20px;
}

#indexPremium .inner .program .text dt {
	margin: 0 0 10px;
	padding: 0 0 10px;
	font-size: 22px;
	font-weight: 500;
	background: url(../image/line-01.png) repeat-x 0 100%;
	line-height: 1.4;
}

#indexProgram {
	background: url(../image/back-03.png) no-repeat center 0;
}

#indexProgram .inner {
	width: 800px;
	margin: 0 auto;
	padding: 80px 0;
}

#indexProgram .inner h2 {
	margin: 0 0 60px;
	font-size: 28px;
	font-weight: 600;
	display: inline-block;
	text-align: center;
	border: 2px solid #32b16c;
	border-radius: 8px;
	box-shadow: 6px 6px 0 #32b16c;
	background-color: #FFF;
	position: relative;
	left: 50%;
 transform: translateX(-50%);
 -webkit-transform: translateX(-50%);
 -ms-transform: translateX(-50%);
	padding: 0 16px 2px;
}

#indexProgram .inner .pList {
	display: flex;
	margin: 0 0 30px;
}

#indexProgram .inner .pList .photo {
	border-radius: 10px 0 0 10px;
	box-shadow: 0 0 10px #CCC;
	width: 280px;
}

#indexProgram .inner .pList .photo img {
	max-width: 100%;
}

#indexProgram .inner .pList .text {
	width: calc( 100% - 280px);
	padding: 20px 30px;
	border-radius: 0 10px 10px 0;
	box-shadow: 0 0 10px #CCC;
	background-color: #FFF;
	display: flex;
	align-items:center;
	border-left: 1px solid #EEE;
}

#indexProgram .inner .pList .text h3 {
	margin: 0 0 8px;
	font-weight: 500;
	font-size: 20px;
}


/*------------------------------------------------------------------------------------------------
  regular
--------------------------------------------------------------------------------------------------*/
.regularList {
	width: 860px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
}

.regularList .box {
	width: 400px;
	margin: 0 15px 30px;
	display: flex;
	flex-direction: column;
}

.regularList .box .photo img {
	border-radius: 10px 10px 0 0;
	box-shadow: 0 0 10px #CCC;
}

.regularList .box .text {
	padding: 20px;
	box-shadow: 0 0 10px #CCC;
	border-radius: 0 0 10px 10px;
	flex-grow: 1;
	background-color: #FFF;
}

.regularList .box .text h2 {
	margin: 0 0 12px;
	padding: 0 0 4px;
	font-size: 20px;
	font-weight: 500;
	position: relative;
}

.regularList .box .text h2:before {
	position: absolute;
	width: 3px;
	height: 20px;
	top: 7px;
	left: -8px;
	content: "";
	background-color: #32b16c;
}

.regularList .box .text p {
	margin: 0;
	line-height: 1.4;
}

.regularList .box .text ul {
	margin: 20px 0 0;
	padding: 10px 0 0 26px;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	position: relative;
	border-top: 1px dashed #32b16c;
}

.regularList .box .text ul:before {
	position: absolute;
	background: url(../image/icon-06.png) no-repeat 0 0;
	background-size: 20px;
	width: 20px;
	height: 20px;
	content: "";
	left: 0;
	top: 13px;
}

.regularList .box .text ul li {
	margin: 0;
	padding: 0;
	line-height: 1.4;
}

/*------------------------------------------------------------------------------------------------
  lineup
--------------------------------------------------------------------------------------------------*/
.lineupList {
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
}

.lineupList li {
 margin: 0 2% 20px;
	padding: 0;
	width: 46%;
}

.lineupList li a {
	display: block;
	padding: 8px 16px;
	font-weight: 500;
	text-decoration: none;
	border: 2px solid #32b16c;
	background: url(../image/arrow-02.png) #FFFFFF no-repeat 96% center;
	background-size: 14px;
	color: #000000;
	border-radius: 8px;
}

.lineupList li a:hover {
	background: url(../image/arrow-02.png) #E5F5F4 no-repeat 96% center;
	background-size: 14px;
	opacity: 1;
}



/*------------------------------------------------------------------------------------------------
  program
--------------------------------------------------------------------------------------------------*/
.programList {
	margin: 0 0 40px;
	border-bottom: 1px dashed #AAA;
	padding: 0;
	background-color: #FFF;
}

#second .inner .programList h2 {
	margin: 0 0 20px;
	padding: 6px 10px;
	background-color: #32b16c;
	color: #FFF;
	font-size: 24px;
	border-radius: 8px 8px 0 0;
}

#second .inner .programList h2:before {
	display: none;
}

.programList .inner {
	display: flex;
	justify-content: space-between;
	padding: 0 16px 0 20px;
}

.programList .inner .photo {
	width: 300px;
	margin: 0 0 30px;
}

.programList .inner .photo img {
	max-width: 100%;
	border: 1px solid #EEE;
	box-shadow: 4px 4px 0 #85DCAC;
}

.programList .inner .text {
	width: calc( 100% - 330px );
	line-height: 1.6;
}

.programList .inner .text .seisaku {
	display: inline-block;
	background-color: #E5F5F4;
	padding: 0 4px;
}