@charset "utf-8";

/* amim1 （透明）
---------------------------------------------------------------------------*/
@keyframes amim1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
/* amim2（透明 下フェードイン）
---------------------------------------------------------------------------*/
@keyframes amim2 {
	0% {opacity: 0;top: 10px;}
	100% {opacity: 1;top: 0px;}
}

/*--共通設定
---------------------------------------------------------------------------*/
.pc {display: block;}
.sp {display: none;}
/*--全体
---------------------------------------------------------------------------*/
html {}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form { margin: 0px; padding: 0px; font-size: 1rem; font-weight: normal; margin-block-start: 0em; margin-block-end: 0em;}
ul { list-style-type: none;}
ol { padding-left: 40px; padding-bottom: 15px;}
dl {display: block;margin-block-start: 0em;margin-block-end: 0em;margin-inline-start: 0px;margin-inline-end: 0px;}
img { border: none; max-width: 100%; height: auto; vertical-align: middle;}
table { border-collapse:collapse; font-size: 1rem; border-spacing: 0;}
video { max-width: 100%;}
iframe { width: 100%;}
.cnt { text-align: center;}
.txt_r {text-align: right;}
.f_L {font-size: 2rem;}

body {
	margin: 0px;
	padding: 0px;
	color: #eee;
	font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
  font-size: 16px;
	line-height: 2;
	-webkit-text-size-adjust: none;
	overflow-x: hidden;
}

a { color: #842a12;transition: 0.2s; text-decoration: none;}
a:hover { color: #842a12;	text-decoration: none;}

/*wrapper
---------------------------------------------------------------------------*/
#wrapper {margin: 0; padding: 0;}
#wrapper::before {
  content: "";
  display: block;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: -1;
  width: 100%;
  height: 100vh;
  background-image: url(../img/bg_pc.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}


/*contents
---------------------------------------------------------------------------*/
#contents {
	padding-top: 1rem;
	position: relative;
	animation-name: amim1;
	animation-duration: 0.5S;	
	animation-delay: 0.5s;
	animation-fill-mode: both;
}
#contents p {word-break: break-all;}

/*inner
---------------------------------------------------------------------------*/
.inner {max-width: 1800px;margin: 0 auto;}

/*section
---------------------------------------------------------------------------*/
section {overflow: hidden; margin-bottom: 8%; padding: 0 4rem;}

h1 { margin-bottom: 4rem;	font-size: 2.5rem;		text-align: center;		letter-spacing: 0.1em;}
h2 {	margin: 1rem 0;	font-size: 1rem;		text-align: center;		line-height: 1.5; color:#fff;}





/*フッター
---------------------------------------------------------------------------*/
footer {
	font-size: 0.9rem;
	color: #ccc;
	text-align: center;
 background: #000;
 padding: 1rem;
}
footer .mark {max-width: 300px; margin: 0 auto;}
footer .phone {font-size: 2em;}
footer .phone span {font-size: 2.2em;}
footer .phone a, footer .phone span a {text-decoration: none; color: #fff;}
#copyright {clear: both; text-align: center;margin-top: 1rem;}


/* Movie List
---------------------------------------------*/
ul.movie_top {display:flex; flex-wrap: wrap; justify-content:space-around; background: rgba(0,0,0,0.5); padding: 1rem 1rem;}
ul.movie_top li {width: 19%; margin-bottom: 1rem;}
ul.movie_top li a {transition: 0.2s;}
ul.movie_top li a:hover {opacity: 0.7;}
ul.movie_top li.non {width: 0; margin-left: -1rem;}
.pdb0 {padding-bottom: 0!important;}

.movieList{display:flex; flex-wrap: wrap; justify-content: space-around; margin-bottom: 4%;}
.movieList .item { width: 19%; margin-bottom: 1rem;}
.movieList .item a{transition: 0.2s;}
.movieList .item a:hover {opacity: 0.7;}



/* page top
-------------------- */
#page-top {
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 100;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #000;
  border:1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

#page-top::before {
  content: "";
  width: 12px;
  height: 12px;
  margin-bottom: -6px;
  border-top: solid 3px #fff;
  border-right: solid 3px #fff;
  transform: rotate(-45deg);
}

#page-top:hover { transform: scale(1.1);}



/*画面幅768px以上の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media(min-width: 768px){
  a[href^="tel:"]{
    pointer-events: none;
  }
}


/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:767px){
  .pc {display: none;}
  .sp {display: block;}
  /*全体
  ---------------------------------------------------------------------------*/
  html,body { font-size: 2vw;  background-size: contain;}
 
  #wrapper {margin: 0; padding: 0;}
  #wrapper::before {
   content: "";
   display: block;
   position: fixed;
   top: 0px;
   left: 0px;
   z-index: -1;
   width: 100%;
   height: 100vh;
   background-image: url(../img/bg_sp.jpg);
   background-size: cover;
   background-repeat: no-repeat;
  }

  /*ヘッダー
  ---------------------------------------------------------------------------*/
  header #logo {float: none; max-width: 90px; margin: 0 4% 20% auto; padding: 10% 0 50%; background: linear-gradient( rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);}

  /*ヘッダーメニュー
  ---------------------------------------------------------------------------*/
  #header-menu {
    display: none !important;
  }
  header #inner-header { left: 6%;}
  
  /*コンテンツ
  ---------------------------------------------------------------------------*/ 
  h2 {margin-bottom: 1rem; background-size: contain;}

  /*フッター
  ---------------------------------------------------------------------------*/


  /*その他
  ---------------------------------------------------------------------------*/
  body.s-n .sub,body.s-n #footermenu {display: none;}
 

}


/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){
  .pc {display: none;}
  .sp {display: block;}
  /*全体
  ---------------------------------------------------------------------------*/
  html,body {	font-size: 3vw; background-size: contain;}

  /*コンテンツ
  ---------------------------------------------------------------------------*/
  h1 {margin-bottom: 1rem; margin-top: 0; line-height: 1.2; font-size: 2rem;}

  #contents .list-column {	width: 100%;}
		section { padding: 0 0.2rem; margin: 0;}
  section.inner {padding:0; margin:0;}
  
  .movieList .item { width: 31%;}
  ul.movie_top {margin: 0;}
  ul.movie_top li {width: 31%; margin-bottom: 0;}
  ul.movie_top li.non {width: 30%; margin-left: -1rem;}
  
  footer .mark {max-width: 30%; margin: 0 auto;}

  /*その他
  ---------------------------------------------------------------------------*/
  .w48 {width: 100%;}
  .fl {float: none;}
  .fr {float: none;}
  .sh {display:block;}
  .pc {display:none;}
}

@media only screen and (max-width: 896px) and (orientation: landscape){
 h1 {margin-bottom: 1rem; margin-top: 0; line-height: 1.2; font-size: 2rem;}
 footer .mark {max-width: 20%; margin: 0 auto;}
 ul.movie_top li.non {display: none;}
}


/*画面幅380px以下の設定
---------------------------------------------------------------------------*/
@media screen and (max-width:380px){
  .pc {display: none;}
  .sp {display: block;}
  html,body {	font-size: 3vw; background-size: contain;}
  #contents {	}

}

@media only screen and (min-device-width : 668px) and (orientation: portrait) {
 section { padding: 0 0.2rem; margin: 0;}
 h1 {margin-bottom: 1rem; margin-top: 0; line-height: 1.2; font-size: 2rem;}
 .movieList {padding: 0 1rem;}
 .movieList .item { width: 28%;}
  ul.movie_top {margin: 0;}
  ul.movie_top li {width: 31%; margin-bottom: 0;}
  ul.movie_top li.non {width: 30%; margin-left: -1rem;}
 footer .mark {max-width: 20%; margin: 0 auto;}
}

@media screen and (min-width: 750px)  and (orientation: landscape) {
 h1 {margin-bottom: 1rem; margin-top: 0; line-height: 1.2; font-size: 2rem;}
 footer .mark {max-width: 15%; margin: 0 auto;}
}