@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url(https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i);

.clearfix:after {
	clear:both;
	content:" ";
	display:block;
}
.none {display: none !important;}

/* animation */
.zoom {
  transform: scale(1);
  transition: 0.3s;
}
.zoom:hover {
  transform: scale(1.05);
}
.fade_up {
  display: inline-block;
  opacity: 0;
}
.fade_up.alternate {
  opacity: 1;
  animation: fade_up 1s forwards;
}
.cloud {
	-webkit-animation: cloud 2s ease infinite;
	-moz-animation: cloud 2s ease infinite;
	-ms-animation: cloud 2s ease infinite;
	animation: cloud 2s ease infinite;
}
.cloud.alternate {
	-webkit-animation: cloud 2s ease infinite alternate;
	-moz-animation: cloud 2s ease infinite alternate;
	-ms-animation: cloud 2s ease infinite alternate;
	animation: cloud 2s ease infinite alternate;
}
@keyframes fade {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes fade_up {
	0% { opacity: 0; transform: translateY(15px); }
	100% { opacity: 1; transform: translateY(0); }
}
@keyframes move {
	0% { transform: translateX(0px); }
	30% { transform: translateX(5px); }
	100% { transform: translateX(0px); }
}
@keyframes cloud {
	0% { transform: translateY(0px); }
	30% { transform: translateY(-6px); }
	100% { transform: translateY(0px); }
}


@media only screen and (max-width: 736px){
  
#main_cp .pc {
  display:none;
}
body {}

#main_cp {
	font-size: 3vw;
	font-family: 'Noto Sans Japanese', sans-serif;;
}
#main_cp img {
	width: 100%;
}


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

 cp_mv
 
------------------ */
#main_cp .cp_mv {
  background:url(../img/mv_bg.png) left top repeat-x;
  background-size:auto 100%;
}
#main_cp .cp_mv .inner {
	width:82%;
	margin:0 auto;
}
#main_cp .cp_mv h1 {
  animation-duration: 5s;
	animation: fade 1s;
}


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

 cp_date
 
------------------ */  
#main_cp .cp_date {
  overflow:hidden;
  }
#main_cp .cp_date .inner {
	width:84%;
	margin:0 auto;
}
  
  
/* ------------------

 cp_mnav
 
------------------ */    
#main_cp .cp_mnav {
  padding:4vw 0 7vw 0;
  background:url(../img/mnav_bg.png);
  background-size:20% auto;
}
#main_cp .cp_mnav .inner {
  width:96%;
  margin:0 auto;
}
#main_cp .cp_mnav ul {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}
#main_cp .cp_mnav ul li {
  width:49%;
  margin:2.5% 0 0 0;
}
#main_cp .cp_mnav ul li:last-child {
  width:100%;
}
#main_cp .cp_mnav ul li img {
  border-radius:0.4em;
  box-shadow:0.3em 0.3em 0.3em 0 rgba(0,0,0,0.3);
}
  

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

 cp_file
 
------------------ */
#main_cp .cp_bg1 {
  background:#f4e4ee;
  border-top:10px solid #fff;
}  
  
#main_cp #cp_file {
  padding:4vw 0 0 0;
}
#main_cp #cp_file .inner {
  position:relative;
  width:100%;
  margin:0 auto;
}
#main_cp #cp_file .inner .icons span {
  display:block;
  position:absolute;
  z-index:+3;
}
#main_cp #cp_file .inner .icons span:nth-child(1) {
  width:28%;
  top:22%;
  right:5%;
}
#main_cp #cp_file .inner .icons span:nth-child(2) {
  width:31%;
  bottom:1.5%;
  left:7%;
}
#main_cp #cp_file .inner h2 {
  position:absolute;
  width:100%;
  top:12.5%;
  left:0;
}
#main_cp #cp_file .inner .item {
  position:absolute;
  width:100%;
  top:23%;
  left:0;
}
#main_cp #cp_file .inner ul {
  position:absolute;
  width:90%;
  bottom:11%;
  left:5%;
  color:#76634e;
  font-size:70%;
  line-height:1.5;
}
#main_cp #cp_file .inner ul li {
  margin:0.2em 0 0 1em;
  text-indent:-1em;
}
  
/* close */
#main_cp #cp_file .inner .close {
  position: absolute;
  top:0;
  left:0;
  z-index:+2;
}


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

 cp_menu
 
------------------ */
#main_cp #cp_menu {
  padding:0 0 8vw 0;
}
#main_cp #cp_menu .inner {
  position:relative;
  width:100%;
  margin:0 auto;
}
#main_cp #cp_menu .inner h2 {
  position:absolute;
  width:89.4%;
  top:0;
  left:5.3%;
}
#main_cp #cp_menu .inner h2 img + img {
  margin:1% 0 0 0;
}
#main_cp #cp_menu .inner .item {
  position:absolute;
  width:89.4%;
  top:22%;
  left:5.3%;
}
#main_cp #cp_menu .inner .img {
  position:absolute;
  width:100%;
  bottom:0;
  left:0;
}



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

 cp_plate
 
------------------ */
#main_cp .cp_bg2 {
  border-top:10px solid #fff;  
  border-bottom:10px solid #fff;
}

#main_cp #cp_plate {}
#main_cp #cp_plate .inner {
  position:relative;
  width:100%;
  margin:0 auto;
}
#main_cp #cp_plate .inner .icons span {
  display:block;
  position:absolute;
  z-index:+1;
}
#main_cp #cp_plate .inner .icons span:nth-child(1) {
  width:26.5%;
  top:35%;
  right:4%;
}
#main_cp #cp_plate .inner .icons span:nth-child(2) {
  width:21.5%;
  bottom:5%;
  left:7%;
}
#main_cp #cp_plate .inner h2 {
  position:absolute;
  width:95%;
  top:14%;
  left:2.5%;
}
#main_cp #cp_plate .inner .item {
  position:absolute;
  width:95%;
  top:35%;
  left:2.5%;
}
#main_cp #cp_plate .inner p {
  position:absolute;
  width:86%;
  bottom:1%;
  left:7%;
  color:#76634e;
  font-size:70%;
  line-height:1.5;
  text-align:right;
}
  
/* close */
#main_cp #cp_plate .inner .close {
  position: absolute;
  top:0;
  left:0;
  z-index:+2;
}



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

 cp_howto
 
------------------ */
#main_cp #cp_howto {}
#main_cp #cp_howto .inner {
  width:100%;
  margin:0 auto;
}



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

 cp_outline
 
------------------ */
#main_cp #cp_outline {}
#main_cp #cp_outline .inner {
  position: relative;
  width:100%;
  margin:0 auto;
}
#main_cp #cp_outline .inner h3 {
  position:absolute;
  width:93.6%;
  top:0;
  left:3.2%;
}
#main_cp #cp_outline .inner .outline_in {
  position:absolute;
  overflow-y:scroll;
  width:93.6%;
  height:60%;
  top:5.8%;
  left:3.2%;
  padding:1em 2em 3em 2em;
  background:#fff;
  border:5px solid #d6e8e9;
  line-height:1.6;
}
#main_cp #cp_outline .inner .outline_in a {
  border-bottom:1px solid #6eaeb1;
  color: #6eaeb1;
  text-decoration: none;
  transition: 0.3s;
}
#main_cp #cp_outline .inner .outline_in a:hover {
  border-bottom:1px solid transparent;
}
#main_cp #cp_outline .inner .outline_in p {
  margin: 0.6em 0 0 0;
}
#main_cp #cp_outline .inner .outline_in p.article {
  margin: 1.5em 0 0 0;
  color: #6eaeb1;
  font-size: 120%;
  font-weight: 700;
}
#main_cp #cp_outline .inner .outline_in ul.dot {
  margin: 1em 0 0 0;
}
#main_cp #cp_outline .inner .outline_in ul.dot li {
  margin: 0 0 0 1em;
  padding: 0.2em 0;
  text-indent: -1em;
}
#main_cp #cp_outline .btn {
  position:absolute;
  width:70.2%;
  bottom:15%;
  left:14.4%;
}
  
/* teaser */
#main_cp #cp_outline.teaser .inner .outline_in {
  height:80%;
  top:8%;
}
  
  
/* ------------------

 cp_free
 
------------------ */
#main_cp #cp_free {
  padding:2vw 0 6vw 0;
  background:#fff7a7;
}
#main_cp #cp_free .inner {
  position: relative;
  width:93.4%;
  margin:0 auto;
}
#main_cp #cp_free .inner .icons span {
  display:block;
  position:absolute;
  z-index:+3;
}
#main_cp #cp_free .inner .icons span:nth-child(1) {
  width:27%;
  top:11.5%;
  right:3%;
}
  
/* close */
#main_cp #cp_free .inner .close {
  position: absolute;
  top:1%;
  left:0;
  z-index:+2;
}
  
  
/* ------------------

 cp_movie
 
------------------ */
#main_cp #cp_movie {
  padding:7vw 0;
}
#main_cp #cp_movie .inner {
  width:100%;
  margin:0 auto;
}
#main_cp #cp_movie .inner .btn {
  width:60.4%;
  margin:1.5em auto 0 auto;
}



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

 cp_about
 
------------------ */
#main_cp #cp_about {
  position: relative;
  padding:8vw 0;
	background:#98d7e1;
  z-index: 3;
}
#main_cp #cp_about .inner {
	position:relative;
  width: 95%;
	margin: 0 auto;
}
#main_cp #cp_about .inner .btn {
	position: absolute;
	width: 60%;
  left: 20%;
  bottom: 7.5%;
}


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

 cp_contact
 
------------------ */
#main_cp #cp_contact {
	background:#fff;
}
#main_cp #cp_contact .contact_in {
	position:relative;
  width: 90%;
  margin: 0 auto;
	padding: 40px 0 0 0;
	color:#7e634c;
  font-size:92%;
  line-height: 1.8;
	text-align:center;
}
#main_cp #cp_contact .contact_in h3 {
	margin:0 auto;
	padding: 0.2em 0;
	border: 1px solid #7e634c;
  font-size:95%;
}
#main_cp #cp_contact .contact_in p {
	margin: 0 auto;
	font-weight:700;
	text-align:center;
}
#main_cp #cp_contact .contact_in p.article {
	margin-top:0.7em;
  font-size:120% !important;
}
#main_cp #cp_contact .contact_in p.tel {
	margin-top:1em;
	padding:0 0 1em 0;
	border-bottom:1px solid #7e634c;
  letter-spacing:0.1em;
}
#main_cp #cp_contact .contact_in p.copy {
	margin-top: 1em;
	font-size: 80%;
	font-weight: 700;
}
#main_cp #col_pagetop {
	position: fixed !important;
	right: 1em !important;
	bottom: 1em !important;
  width: 20%;
	z-index: 5 !important;
}
  
#hz-content {
  padding-bottom:30px;
}


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

 cp_nav_sp
 
------------------ */

#main_cp #cp_nav_sp {
	position:fixed;
  width:93.9vw;
	right:-65.6vw;
	top:130px;
	font-size:0;
	z-index:11;
}
#main_cp #cp_nav_sp .cp_nav_btn {
	float:left;
	width:28.3vw;
	cursor:pointer;
}
#main_cp #cp_nav_sp .cp_nav_btn.active {}
#main_cp #cp_nav_sp ul {
  display:flex;
	float:left;
	width:65.6vw;
  justify-content:space-between;
  flex-wrap:wrap;
}
#main_cp #cp_nav_sp ul li {
  width:50%;
}
#main_cp #cp_nav_sp a img:hover {
 opacity:1 !important;
}
#main_cp #cp_nav_sp #cp_nav_bg_sp {
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.7);
	z-index:-1;
}
  
#main_cp #cp_nav,
#main_cp #cp_nav #cp_nav_bg {
  display:none;
}
  
  
}















@media only screen and (min-width: 737px){
  
#main_cp .sp {
  display:none;
}
body {}

#main_cp {
	font-size: 15px;
	font-family: 'Noto Sans Japanese', sans-serif;;
}
#main_cp img {
	width: 100%;
}


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

 cp_mv
 
------------------ */
#main_cp .cp_mv {
  background:url(../img/mv_bg.png) left top repeat-x;
  background-size:auto 100%;
}
#main_cp .cp_mv .inner {
	width:54%;
  max-width:700px;
	margin:0 auto;
}
#main_cp .cp_mv h1 {
  animation-duration: 5s;
	animation: fade 1s;
}


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

 cp_date
 
------------------ */  
#main_cp .cp_date {
  overflow:hidden;
  background:url(../img/date_bg.png) center top no-repeat;
  background-size:auto 100%;
}
#main_cp .cp_date .inner {
	width:54%;
  max-width:700px;
	margin:0 auto;
}


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

 cp_mnav
 
------------------ */    
#main_cp .cp_mnav {
  padding:55px 0 70px 0;
  background:url(../img/mnav_bg.png);
}
#main_cp .cp_mnav .inner {
  width:56%;
  max-width:720px;
  margin:0 auto;
}
#main_cp .cp_mnav ul {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}
#main_cp .cp_mnav ul li {
  width:49%;
  max-width:352px;
  margin:3% 0 0 0;
}
#main_cp .cp_mnav ul li:last-child {
  width:100%;
  max-width:720px;
}
#main_cp .cp_mnav ul li img {
  border-radius:0.6em;
  box-shadow:0.3em 0.3em 0.3em 0 rgba(0,0,0,0.3);
}
  

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

 cp_file
 
------------------ */
#main_cp .cp_bg1 {
  background:#f4e4ee;
  border-top:5px solid #fff;
}  
  
#main_cp #cp_file {
  padding:40px 0 0 0;
}
#main_cp #cp_file .inner {
  position:relative;
  width:70%;
  max-width:904px;
  margin:0 auto;
}
#main_cp #cp_file .inner .icons span {
  display:block;
  position:absolute;
  z-index:+3;
}
#main_cp #cp_file .inner .icons span:nth-child(1) {
  width:23.2%;
  max-width:208px;
  top:33%;
  right:-3.5%;
}
#main_cp #cp_file .inner .icons span:nth-child(2) {
  display:none;
}
#main_cp #cp_file .inner h2 {
  position:absolute;
  width:95.2%;
  max-width:860px;
  top:20%;
  left:2.4%;
}
#main_cp #cp_file .inner .item {
  position:absolute;
  width:95.2%;
  max-width:860px;
  top:37%;
  left:2.4%;
}
#main_cp #cp_file .inner ul {
  position:absolute;
  width:86%;
  max-width:780px;
  bottom:2.5%;
  left:7%;
  color:#76634e;
  font-size:80%;
  line-height:1.5;
}
#main_cp #cp_file .inner ul li {
  margin:0.2em 0 0 1em;
  text-indent:-1em;
}
  
/* close */
#main_cp #cp_file .inner .close {
  position: absolute;
  top:0;
  left:0;
  z-index:+2;
}
  

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

 cp_menu
 
------------------ */
#main_cp #cp_menu {
  padding:0 0 65px 0;
}
#main_cp #cp_menu .inner {
  position:relative;
  width:70%;
  max-width:904px;
  margin:0 auto;
}
#main_cp #cp_menu .inner .icons span {
  display:block;
  position:absolute;
  z-index:+1;
}
#main_cp #cp_menu .inner .icons span:nth-child(1) {
  width:25.6%;
  max-width:230px;
  top:2%;
  left:-4%;
}


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

 cp_plate
 
------------------ */
#main_cp .cp_bg2 {
  background:url(../img/bg02.png) left top;
  border-top:10px solid #fff;  
  border-bottom:10px solid #fff;
}

#main_cp #cp_plate {
  padding:65px 0 0 0;
}
#main_cp #cp_plate .inner {
  position:relative;
  width:70%;
  max-width:904px;
  margin:0 auto;
}
#main_cp #cp_plate .inner .icons span {
  display:block;
  position:absolute;
  z-index:+1;
}
#main_cp #cp_plate .inner .icons span:nth-child(1) {
  width:22.4%;
  max-width:202px;
  top:48%;
  right:1.5%;
}
#main_cp #cp_plate .inner .icons span:nth-child(2) {
  width:18%;
  max-width:160px;
  bottom:7%;
  left:3%;
}
#main_cp #cp_plate .inner h2 {
  position:absolute;
  width:95.2%;
  max-width:860px;
  top:21%;
  left:2.4%;
}
#main_cp #cp_plate .inner .item {
  position:absolute;
  width:95.2%;
  max-width:860px;
  top:46%;
  left:2.4%;
}
#main_cp #cp_plate .inner p {
  position:absolute;
  width:86%;
  max-width:780px;
  bottom:1%;
  left:7%;
  color:#76634e;
  font-size:80%;
  line-height:1.5;
  text-align:right;
}
  
/* close */
#main_cp #cp_plate .inner .close {
  position: absolute;
  top:0;
  left:0;
  z-index:+2;
}


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

 cp_howto
 
------------------ */
#main_cp #cp_howto {}
#main_cp #cp_howto .inner {
  width:70%;
  max-width:904px;
  margin:0 auto;
}


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

 cp_outline
 
------------------ */
#main_cp #cp_outline {
  padding:0 0 60px 0;
}
#main_cp #cp_outline .inner {
  position: relative;
  width:70%;
  max-width:904px;
  margin:0 auto;
}
#main_cp #cp_outline .inner h3 {
  position:absolute;
  width:83.6%;
  max-width:754px;
  top:0;
  left:8.2%;
}
#main_cp #cp_outline .inner .outline_in {
  position:absolute;
  overflow-y:scroll;
  width:83.6%;
  max-width:754px;
  height:65%;
  top:6%;
  left:8.2%;
  padding:1em 2em 3em 2em;
  background:#fff;
  border:5px solid #d6e8e9;
  line-height:1.6;
}
#main_cp #cp_outline .inner .outline_in a {
  border-bottom:1px solid #6eaeb1;
  color: #6eaeb1;
  text-decoration: none;
  transition: 0.3s;
}
#main_cp #cp_outline .inner .outline_in a:hover {
  border-bottom:1px solid transparent;
}
#main_cp #cp_outline .inner .outline_in p {
  margin: 0.6em 0 0 0;
}
#main_cp #cp_outline .inner .outline_in p.article {
  margin: 1.5em 0 0 0;
  color: #6eaeb1;
  font-size: 120%;
  font-weight: 700;
}
#main_cp #cp_outline .inner .outline_in ul.dot {
  margin: 1em 0 0 0;
}
#main_cp #cp_outline .inner .outline_in ul.dot li {
  margin: 0 0 0 1em;
  padding: 0.2em 0;
  text-indent: -1em;
}
#main_cp #cp_outline .btn {
  position:absolute;
  width:58.4%;
  max-width:526px;
  bottom:8.5%;
  left:20.8%;
}
  
/* teaser */
#main_cp #cp_outline.teaser .inner .outline_in {
  height:82%;
  top:8%;
}
  
  
/* ------------------

 cp_free
 
------------------ */
#main_cp #cp_free {
  padding:75px 0 60px 0;
  background:#fff7a7;
}
#main_cp #cp_free .inner {
  position: relative;
  width:70%;
  max-width:904px;
  margin:0 auto;
}
#main_cp #cp_free .inner .icons span {
  display:block;
  position:absolute;
  z-index:+3;
}
#main_cp #cp_free .inner .icons span:nth-child(1) {
  width:20.2%;
  max-width:188px;
  top:38%;
  right:-11%;
}
  
/* close */
#main_cp #cp_free .inner .close {
  position: absolute;
  top:0;
  left:0;
  z-index:+2;
}
  
  
/* ------------------

 cp_movie
 
------------------ */
#main_cp #cp_movie {
  padding:60px 0;
  background:url(../img/movie_bg.png) center top no-repeat;
  background-size:auto 100%;
}
#main_cp #cp_movie .inner {
  width:54.8%;
  max-width:710px;
  margin:0 auto;
}
#main_cp #cp_movie .inner .btn {
  width:63.8%;
  max-width:452px;
  margin:1em auto 0 auto;
}


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

 cp_about
 
------------------ */
#main_cp #cp_about {
  padding:90px 0;
	background:#98d7e1;
  z-index:3;
}
#main_cp #cp_about .inner {
	position:relative;
  width:74%;
	max-width:980px;
	margin:0 auto;
}
#main_cp #cp_about .inner .btn {
	position:absolute;
	width:44%;
  max-width:424px;
  left:28%;
  bottom:10%;
}


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

 cp_contact
 
------------------ */
#main_cp #cp_contact {
	background:#fff;
}
#main_cp #cp_contact .contact_in {
	position:relative;
	padding: 4em 0 0 0;
	color:#7e634c;
  line-height: 1.8;
	text-align:center;
}
#main_cp #cp_contact .contact_in h3 {
  width: 80%;
	max-width: 630px;
	margin:0 auto;
	padding: 0.2em 0;
	font-size: 150%;
	border: 1px solid #7e634c;
}
#main_cp #cp_contact .contact_in p {
  width: 80%;
	max-width: 630px;
	margin: 0 auto;
	font-weight:700;
	text-align:center;
}
#main_cp #cp_contact .contact_in p.article {
	margin-top: 0.3em;
	font-size: 150%;
}
#main_cp #cp_contact .contact_in p.tel {
	margin-top:6px;
	padding:0 0 1em 0;
	border-bottom:1px solid #7e634c;
  letter-spacing:0.1em;
}
#main_cp #cp_contact .contact_in p.copy {
	margin-top: 1em;
	font-size: 80%;
	font-weight: 700;
}
#main_cp #col_pagetop {
	position: fixed !important;
	right: 1em !important;
	bottom: 1em !important;
  width: 12.5%;
	width: 170px;
	z-index: 5 !important;
}
#main_cp #col_pagetop img {
	transition:0.3s;
}
#main_cp #col_pagetop img:hover {
	opacity:0.7;
}
  
#hz-content {
  padding-bottom:35px;
}
  

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

 cp_nav
 
------------------ */
#main_cp #cp_nav {
	position:fixed;
  width:634px;
	right:-444px;
	top:15%;
	font-size:0;
	z-index:11;
}
#main_cp #cp_nav .cp_nav_btn {
	float:left;
	width:190px;
	cursor:pointer;
}
#main_cp #cp_nav .cp_nav_btn.active {}
#main_cp #cp_nav ul {
  display:flex;
	float:left;
	width:444px;
  justify-content:space-between;
}
#main_cp #cp_nav ul li {
	width:50%;
}
#main_cp #cp_nav a img:hover {
 opacity:1 !important;
}
#cp_main #nav_open {
  display:none;
  border:1px solid red !important
}
#main_cp #cp_nav #cp_nav_bg {
  display: none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.7);
	z-index:-1;
}  
#main_cp #cp_nav_sp,
#main_cp #cp_nav #cp_nav_bg_sp {
  display:none;
}
  
}