@charset "UTF-8";

/*common
------------------------------------------------------------------------------------------------------------------------------------ */
#page-home #container { padding-bottom: 60px;}

@media only screen and (max-width: 767px) {
	#page-home #container { padding-bottom: 30px;}
}

/*contents
------------------------------------------------------------------------------------------------------------------------------------ */
/* block-main */
#page-home #block-main { position: relative; padding: 5px 0; background: url(/img/common/cmn_main_dot.png) left top repeat-x, url(/img/common/main_dot.png) left bottom repeat-x; background-size: 4px 5px, 4px 5px;}
#page-home #block-main li img { width: 100%; height: auto;}
#page-home #block-main .slider { margin: 0;}
#page-home #block-main .icon { position: absolute; width: 1000px; right: 0; bottom: 13px; left: 0; margin: auto; text-align: right;}

@media only screen and (max-width: 767px) {
	#page-home #block-main .icon { width: 116px; right: 20px; left: auto; bottom: 6px;}
}


/* section-topics */
#page-home #section-topics { width: 1000px; margin: 0 auto; padding: 60px 0;}
#page-home #section-topics li { margin-bottom: 20px; padding-bottom: 20px; background: url(/img/common/cmn_dot_x.png) left bottom repeat-x; background-size: 4px 1px;}
#page-home #section-topics li:last-child { margin-bottom: 30px; padding-bottom: 0; background: none;}
#page-home #section-topics li a { color: #73b566;}
#page-home #section-topics .date { float: left; width: 95px; padding-left: 50px; clear: both; font-weight: bold;}
#page-home #section-topics .new { background: url(/img/home/topics_icon_new.png) 0 3px no-repeat;}
#page-home #section-topics .txt { margin-left: 145px;}
#page-home #section-topics #block-btn { width: 620px; margin: 0 auto;}
#page-home #section-topics #block-btn p { width: 274px; padding: 10px 10px; border: solid 3px #303030; text-align: center;}
#page-home #section-topics #block-btn p a { display: block; background: url( /img/common/cmn_btn_arrow.png) right center no-repeat; background-size: 10px auto; color: #303030; text-decoration: none; font-weight: bold; font-size: 18px;}
#page-home #section-topics #block-btn #btn-topics { float: left;}
#page-home #section-topics #block-btn #btn-calendar { float: right;}

@media only screen and (max-width: 767px) {
	#page-home #section-topics { width: auto; padding: 30px 20px 40px;}
	#page-home #section-topics li { margin-bottom: 15px; padding-bottom: 15px; background: url(/img/common/cmn_dot_x.png) left bottom repeat-x; background-size: 4px 1px;}
	#page-home #section-topics .date { display: block; width:100%; margin-bottom: 3px; padding: 0;}
	#page-home #section-topics .new { padding-left: 40px; background: url(/img/home/topics_icon_new.png) 0 2px no-repeat; background-size: 37px auto; box-sizing: border-box;}
	#page-home #section-topics .txt { margin-left: 0;}
	#page-home #section-topics #block-btn { width: auto;}
	#page-home #section-topics #block-btn p { width: auto;}
	#page-home #section-topics #block-btn p a { font-size: 16px;}
	#page-home #section-topics #block-btn #btn-topics { float: none; margin-bottom: 20px;}
	#page-home #section-topics #block-btn #btn-calendar { float: none;}
}


/* section-choreography */
#page-home #section-choreography { padding: 60px 0; background: url(/img/home/choreography_bg.jpg) center center no-repeat; background-size: cover;}
#page-home #section-choreography .txt { margin-bottom: 120px; text-align: center; font-weight: bold; font-size: 18px;}
#page-home #section-choreography #block-btn { width: 274px; margin: 0 auto;}
#page-home #section-choreography #block-btn p { width: 274px; padding: 10px 10px; background: #fff; border: solid 3px #303030; text-align: center;}
#page-home #section-choreography #block-btn p a { display: block; background: url( /img/common/cmn_btn_arrow.png) right center no-repeat; background-size: 10px auto; color: #303030; text-decoration: none; font-weight: bold; font-size: 18px;}

@media only screen and (max-width: 767px) {
	#page-home #section-choreography { width: auto; padding: 30px 0; background: url(/img/home/choreography_bg_sp.jpg) center center no-repeat; background-size: cover;}
	#page-home #section-choreography .txt { margin-bottom: 100px; font-size: 4.5vw;}
	#page-home #section-choreography #block-btn { width: auto; margin: 0 20px;}
	#page-home #section-choreography #block-btn p { width: auto;}
	#page-home #section-choreography #block-btn p a { font-size: 16px;}
}


/* section-movie */
#page-home #section-movie { padding: 60px 0; background: url(/img/home/movie_bg.jpg) center center no-repeat; background-size: cover;}
#page-home #section-movie .inner { width: 1000px; margin: 0 auto;}
#page-home #section-movie .inner .boxL { float: left; width: 430px; padding-top: 50px;}
#page-home #section-movie .inner .boxL .ttl { margin-bottom: 10px; font-weight: bold; line-height: 1.7; font-size: 22px;}
#page-home #section-movie .inner #block-movie { float: right; width: 533px;}
#page-home #section-movie .inner #block-movie .sectionInner { position: relative; overflow: hidden; height: 0; padding: 0 0 56.25%;}
#page-home #section-movie .inner #block-movie .sectionInner iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

@media screen and (max-width: 800px) {
#page-home #section-movie .inner #block-movie { float: none; width: auto;}
}


@media only screen and (max-width: 767px) {
	#page-home #section-movie { padding: 30px 20px 40px; background: url(/img/home/movie_bg_sp.jpg) center center no-repeat; background-size: cover;}
	#page-home #section-movie .inner { width: auto;}
	#page-home #section-movie .inner .boxL { float: none; width: auto; margin-bottom: 30px; padding-top: 0;}
	#page-home #section-movie .inner .boxL .ttl { margin-bottom: 15px; text-align: center; line-height: 1.5; font-size: 6.1vw;}
	#page-home #section-movie .inner #blockMovie { float: none; width: auto; height: 200px;}
}


/* section-category */
#page-home #section-category { padding: 60px 0; background: url(/img/common/cmn_section_bg.gif) 0 0 repeat;}
#page-home #section-category ul { width: 1000px; margin: 0 auto;}
#page-home #section-category li { position: relative; float: left; width: 276px; padding: 16px 16px 12px; background: url(/img/home/category_bg_top.gif) 0 0 no-repeat, url(/img/home/category_bg_btm.gif) left bottom no-repeat, url(/img/home/category_bg_mdl.png) 0 0 repeat-y;}
#page-home #section-category li a { display: block; color: #303030; text-decoration: none; text-align: center;}
#page-home #section-category li:nth-child(1) { margin-bottom: 38px;}
#page-home #section-category li:nth-child(2) { margin:0 38px 38px;}
#page-home #section-category li:nth-child(3) { margin-bottom: 38px;}
#page-home #section-category li:nth-child(5) { margin: 0 38px;}
#page-home #section-category li .ph { margin-bottom: 10px;}
#page-home #section-category li div {}
#page-home #section-category li div::after { content: ""; position: absolute; width: 10px; height: 15px; bottom: 8%; right: 16px; background: url(/img/common/cmn_btn_arrow.png) right center no-repeat; background-size: 10px auto;}
#page-home #section-category li div .name { margin-bottom: 5px; font-weight: bold; line-height: 1; font-size: 14px;}
#page-home #section-category li div .en { height: 12px;}
#page-home #section-category li div .en img { vertical-align: top;}

@media only screen and (max-width: 767px) {
	#page-home #section-category { padding: 30px 20px 40px;}
	#page-home #section-category ul { width: auto;}
	#page-home #section-category li { float: none; width: auto; padding: 7px; background: #fff;}
	#page-home #section-category li:nth-child(1),
	#page-home #section-category li:nth-child(2),
	#page-home #section-category li:nth-child(3),
	#page-home #section-category li:nth-child(4),
	#page-home #section-category li:nth-child(5) { margin:0 0 15px;}
	#page-home #section-category li .ph { float: left; width: 42%; margin-bottom: 0; clear: both;}
	#page-home #section-category li div { float: none; margin-left: 42%; padding: 10% 0 0;}
	#page-home #section-category li div::after { content: ""; position: absolute; width: 16px; height: 24px; top: 40%; right: 7px; background: url(/img/common/cmn_btn_arrow.png) right center no-repeat; background-size: 16px auto;}
	#page-home #section-category li div.type2 { padding: 7% 0 0;}
	#page-home #section-category li div .name { line-height: 1.4; font-size: 4.3vw;}
	#page-home #section-category li div .en img { width: auto; height: 14px;}
}


/* section-insta */
#page-home #section-insta { width: 1000px; margin: 0 auto; padding: 60px 0 0;}
#page-home #section-insta ul { display: flex; justify-content: space-between; flex-wrap: wrap;}
#page-home #section-insta ul li { position: relative; width: 150px; height: 150px; overflow: hidden; border: solid 1px #ededed;}
#page-home #section-insta ul li img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: block; width: auto; height: 150px;}

@media only screen and (max-width: 767px) {
	#page-home #section-insta { width: auto; padding: 30px 20px 0;}
	#page-home #section-insta ul li { width: 30%; height: 100px; margin-bottom: 10px;}
	#page-home #section-insta ul li img { height: 100px;}

}


/* end css
------------------------------------------------------------------------------------------------------------------------------------ */