@charset "utf-8";

/*リセットCSS（sanitize.css）の読み込み---------------------------------------------------------------------------*/
@import url("https://unpkg.com/sanitize.css");
/*Google Fontsの読み込み---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Tangerine&display=swap');
/*slick.cssの読み込み---------------------------------------------------------------------------*/
@import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css");
/*inview.cssの読み込み---------------------------------------------------------------------------*/
@import url("inview.css");

/*全体の設定---------------------------------------------------------------------------*/
html,body {
	overflow-x: hidden;
	font-size: 14px;
}
body {
	font-family: "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	-webkit-text-size-adjust: none;
	background: #000;
	color: #E5E5E5;	
	line-height: 2;	
}
figure {
	margin: 0;
}
dd {
	margin: 0;
}
table {
	border-collapse:collapse;
}
img {
	border: none;max-width: 100%;height: auto;vertical-align: middle;
}
section + section {
	padding-top: 30px;
}

/*リンクテキスト全般の設定---------------------------------------------------------------------------*/
a {
	color: #fff;
}
a:hover {
	color: #999;
}

/*container。サイト全体を囲むブロック。---------------------------------------------------------------------------*/
#container {
	margin: 0 auto;
	max-width: 1400px;
	padding: 0 10px;
}

/*headerブロック（ロゴが入った最上段のブロック）---------------------------------------------------------------------------*/
header{
	height: 100vh;
	text-align:center;
}
.flowing {
	font-weight: bold;
	color: #fff;
        white-space: nowrap;
	overflow: hidden;
        padding-top: 150px;
	margin: 0;
	animation-name: fade;
	animation-duration:5s;
}
.flowing p {
	font-size: 12px;
}
@keyframes fade{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
.scroll {
	position: absolute;left: 50%;bottom: 20px;transform: translateX(-50%);
	width: 30px;
	opacity: 0.7;
}

/*mainブロック---------------------------------------------------------------------------*/
main {
	margin-bottom: 100px;
}
main h2 {
	opacity: 0;
	text-align: center;
	font-family: 'Tangerine', cursive, "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "メイリオ", Meiryo, Osaka;
	font-weight: normal;
	font-size: 4rem;
	margin-bottom: 80px;
}
main h2 span {
	display: block;	
	font-size: 0.8rem;
	letter-spacing: 0.2em;
}
main h2 span::before {
	content: "〜";
	padding-right: 10px;
}
main h2 span::after {
	content: "〜";
	padding-left: 10px;
}

/*３本バー（ハンバーガー）アイコン設定---------------------------------------------------------------------------*/
/*３本バーブロック*/
#menubar_hdr {
	display: block;
	position: fixed;z-index: 100;
	top: 20px;
	right: 20px;
	width: 50px;
	height: 50px;
	cursor: pointer;
	background: rgba(0,0,0,0.6) url(../images/icon_menu.png) no-repeat center top/50px;
}
#menubar_hdr.close {
	background: #ff0000 url(../images/icon_menu.png) no-repeat center bottom/50px;
}

/*メニューの設定---------------------------------------------------------------------------*/
#menubar ul {
	list-style: none;
}
#menubar {
	display: none;	
	animation-name: opa1;
	animation-duration: 1S;
	animation-fill-mode: both;
	position: fixed;overflow: auto;z-index: 99;
	left: 0px;top: 0px;
	width: 100%;
	height: 100%;
	padding: 50px;
	text-align: center;
	background: rgba(0,0,0,0.8);
	font-size: 1.2rem;
}
#menubar li {
	margin-bottom: 20px;
}
#menubar a {
	display: block;text-decoration: none;
	text-align: center;
	background: #fff;
	color: #000;
	border-radius: 5px;
	box-shadow: 0px 0px 50px 10px rgba(255,255,255,0.4);
	padding: 5px;
}
#menubar span {
	display: block;
	font-size: 0.7rem;
}

/*フッター設定---------------------------------------------------------------------------*/
footer small {
	font-size: 100%;
}
footer {
	font-size: 0.6rem;
	text-align: center;
	padding: 20px;
}
footer a {
	text-decoration: none;
}
footer .pr {
	display: block;
}

/*フッターにあるアイコン類---------------------------------------------------------------------------*/
ul.icon {
	list-style: none;
	margin: 0;padding: 0;
	margin-bottom: 30px;
}
ul.icon li {
	display: inline-block;
}
ul.icon img {
	width: 30px;
}
ul.icon img:hover {
	opacity: 0.8;
}

/*トップページのinfomation---------------------------------------------------------------------------*/
.list2 {
	display: flex;	
	flex-direction: column;
	align-items: center;
	justify-content: space-between;	
	margin-bottom: 40px;
}
.list2 figure {
	width: 90%;
	text-align: center;
}
.list2 figure img {
	padding: 10px;	
	background: #fff;
	transform: rotate(-2deg);
}
.list2 .text {
	width: 100%;
}
.list2 li {
	margin-bottom: 10px;
}
.list2 li span {
	display: block;
	font-size: 0.8rem;
	opacity: 0.5;
}

/*PAGE TOP（↑）設定---------------------------------------------------------------------------*/
.pagetop-show {
	display: block;
}
.pagetop a {
	display: block;text-decoration: none;text-align: center;
	width: 50px;
	line-height: 50px;
	position: fixed;
	right: 30px;
	bottom: 30px;
	color: #fff;
	background: rgba(0,0,0,0.4);
	border: 1px solid #fff;
}
.pagetop a:hover {
	background: rgba(0,0,0,0.8);
}

/*その他---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.color-theme, .color-theme a {color: #f1c734 !important;}
.color-check, .color-check a {color: #f00 !important;}
.c {text-align: center !important;}
.ws {width: 95%;display: block;}
.wl {width: 95%;display: block;}
.large {font-size: 2rem;}
.mb30 {margin-bottom: 30px !important;}
.look {display: inline-block;border: 1px solid #ccc;padding: 5px 20px;background: rgba(0,0,0,0.03);border-radius: 5px;margin: 5px 0;}
.ofx {overflow-x: hidden;}

/* photo.htmlの設定---------------------------------------------------------------------------*/
ul.navmenu {
	text-align: center;
	padding: 10px 0px;
	margin-bottom: 15px;
}
ul.navmenu li {
	display: inline;
}
ul.navmenu li a {
	padding-right: 10px;
	padding-left: 10px;
	text-decoration: none;
	animation-name: fade;
	animation-duration:5s;
}
ul.navmenu li.current a {
	color: #f6e62f;
}

div.photo {
	height:auto;
}
.photo h1 {								
	font-family: 'Tangerine', cursive, "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "メイリオ", Meiryo, Osaka;
	font-weight: normal;				
	font-size: 4rem;	
	text-align: center;
	animation-name: fade;
	animation-duration:5s;
}
.photo h1 span {
	display: block;	
	font-size: 0.8rem;
	letter-spacing: 0.2em;
}
.photo h1 span::before {
	content: "〜";
	padding-right: 10px;
}
.photo h1 span::after {
	content: "〜";
	padding-left: 10px;
}
.flex {
    margin: 5px 0px 30px;
    padding-left: 0;
    text-align: center;
}
.flex .box {
    border: 3px solid #d3d3d3;
    list-style: none;
    display: inline-flex;
    width: 25%;
    position: relative;
    bottom: -15px;
    margin: 3px;
    opacity: 0;
}
.flex .box img {
    max-width: 100%;
    height: auto;
}
.flex .box a:hover {
      opacity: 0.8;
}
.modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.8);
      display: none;
}
.bigimg {
      position: absolute;
      width: 80%;
      max-width: 800px;
      top: 150px;
      left: 0;
      right: 0;
      margin-right: auto;
      margin-left: auto;
}
.close-btn {
      color: #fff;
      font-size: 40px;
      position: absolute;
      right: 50px;
      top: 40px;
}
.close-btn a {
      color: #fff;
      text-decoration: none;
}
/*ふわっと表示*/
.fadeUp {
 animation-name:fadeUpAnime;
 animation-duration:0.5s;
 animation-fill-mode:forwards;
 opacity: 0;
 }
@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }
  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* movie.htmlの設定 ---------------------------------------------------------------------------*/
.list3 {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;	
	margin-bottom: 40px;
	border: 1px solid #555;
	padding: 10px;
}
.list3 figure {
	width: 90%;
	text-align: center;
}
.list3 figure a:hover {
      opacity: 0.8;
}
.list3 .text {
	width: 100%;
}
.list3 .text h4 {
    margin: 10px 0px;
}
.list3 .text h4 p {
    margin: 0px;
    font-size: 0.6rem;
}
.list3 .text p {
    margin: 5px 0px;
    font-size: 0.8rem;
}
.left {
	left: -100px;
}
.leftstyle {
	left: 0px;
}
.right {
	right: -100px;
}
.rightstyle {
	right: 0px;
}

/*ここから下は画面幅800px以上の追加指定---------------------------------------------------------------------------*/
@media screen and (min-width:800px) {

/*全体の設定---------------------------------------------------------------------------*/
html, body {
	font-size: 18px;
}
section + section {
	padding-top: 50px;
}

/*container。サイト全体を囲むブロック。---------------------------------------------------------------------------*/
#container {
	padding: 0 50px;
}	

/*トップページのロゴ---------------------------------------------------------------------------*/
.flowing h1 {
	font-size: 4em;
        padding-top: 150px;
}
.flowing p {
	font-size: 1.5em;;
}

/*トップページのinformationブロック---------------------------------------------------------------------------*/
.list2 {
	flex-direction: row;
	margin-bottom: 100px;
}
.list2 figure {
	width: 48%;
}
.list2 .text {
	width: 48%;
}
	
/* movie.htmlの設定 ---------------------------------------------------------------------------*/	
.list3 {
	flex-direction: row;
	margin-bottom: 100px;
}
.list3 figure {
	width: 48%;
}
.list3 .text {
	width: 48%;
}

/*その他---------------------------------------------------------------------------*/
.ws {width: 45%;display: inline-block;}

/*　※注意！　下の閉じカッコ　}　は800px以上の設定に必要なので、うっかり削除しないように。*/
}