@charset "utf-8";
/*****************************************************

全ての要素をリセット
各ブラウザの表示を統一するための設定です

*****************************************************/
html {overflow-y: scroll;scroll-behavior: smooth;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin: 0;padding: 0;outline:0;}
address,caption,cite,code,dfn,em,strong,th,var {font-style: normal;}
table {	border-collapse: collapse;border-spacing: 0;}
caption,p {text-align: left;}
h1,h2,h3,h4,h5,h6 {font-size: 100%;text-align:left;}
img,abbr,acronym,fieldset {border: 0;}
li {list-style-type: none;}
img{vertical-align:middle;}
.line {font-size:1px;line-height:1px;}

/*--- default ---*/
body {color: #231815;font-family:"Zen Old Mincho","Noto Sans JP","メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "ＭＳ Ｐゴシック", "MS P Gothic", Verdana, Arial, Helvetica, sans-serif;line-height:2em;letter-spacing:0.05em;-webkit-text-size-adjust: 100%;}
table{border-collapse:collapse;}

.float_left {
display: block;
float: left;
}
.float_right {
display: block;
float: right;
}
.float_left_space {
display: block;
float: left;
margin-right:30px;
}
.float_right_space {
display: block;
float: right;
margin-left:30px;
}
.clear{clear:both;}
.w90{width:90%;}
.w80{width:80%;}
.w75{width:75%;}
.w70{width:70%;}
.w65{width:65%;}
.w60{width:60%;}
.w55{width:55%;}
.w50{width:50%;}
.w45{width:45%;}
.w40{width:40%;}
.w35{width:35%;}
.w30{width:30%;}
.w25{width:25%;}
.w20{width:20%;}
.min{font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
.f-g{
		font-family:"Noto Sans JP","メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "ＭＳ Ｐゴシック", "MS P Gothic", Verdana, Arial, Helvetica, sans-serif;

}
/*****************************************************

コンテンツ

*****************************************************/
#wrap{
width: 100%;
height: auto;
margin:0 auto;
}
a:link {
color:#fff;
text-decoration:none;
}

a:visited{
color:#fff;
text-decoration:none;
}

a:hover{text-decoration: none;color:rgba(11, 65, 52);}
a:active{text-decoration:none;color:rgba(11, 65, 52);}

.clear:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clear            { zoom: 1; } /* IE6 */
*:first-child+html .clear { zoom: 1; } /* IE7 */
a,a img {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
a img:hover,.shopnav a:hover,.foot-nav a:hover  {
opacity: 0.6;
filter: alpha(opacity=60);
color:rgba(11, 65, 52);	
} 
a[href^="tel:"] {
pointer-events: none;
}
@media screen and (max-width:768px)	{
a[href^="tel:"] {
pointer-events: auto!important;}
}
.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
border:0px solid #fff;
	margin:5rem 0;
}

.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.bt-a{
text-align:center;
margin:20px auto;

}

.bt-a a{
display:inline-block;
text-align:center;
border:2px solid #231815;
background:#fff;
box-sizing:border-box;
padding:5px 4em;
font-size:90%;
border-radius:50px;
box-shadow: 2px 2px 0px 0px #231815;
-webkit-transition: 0.3s ease-in-out;
   -moz-transition: 0.3s ease-in-out;
     -o-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out;
}
.bt-a a:hover{
box-shadow: 5px 5px 0px 0px #231815;
}
.nen{
	font-size:0.8em;
}
/*****************************************************

メインヘッダー

*****************************************************/
header.scrolled {
	background:#013f80c4;
   box-shadow: 0px 6px 8px -5px rgba(0, 0, 0, 0.22);
}
.front header{
	width:100%;
	margin:0 auto;
	position:fixed;
	top:0;z-index:2;background:#00000073;}
.front header.scrolled {
   box-shadow: 0px 6px 8px -5px rgba(0, 0, 0, 0.22);
}
header{
	width:100%;
	margin:0 auto;
	position:fixed;
	top:0;
	z-index: 5;
	
	}
header:after{
	position:absolute;
	content:'';
	width:110%;
	height:170px;
	top:-15px;
	left:-5%;
	background: rgba(0,0,0,0.4);
	 -ms-filter: blur(20px);
  filter: blur(20px);
}
header.page{
	position:relative;
	top:0;
	z-index: 5;
	background:#fff;
	}
header.page:after{

	width:0%;
	height:0px;
	
}
header .header-contents{
	width: 100%;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: baseline;
	align-items: center;
	position:relative;
	z-index:1;
	/* max-width: 1400px; */
	margin:0 auto;
	padding: 2rem 4rem;
	top:0;
	left:0;
	box-sizing: border-box;
	}
@media (max-width: 1600px) {
	header .header-contents{
	padding: 2rem 2rem;
	
	}
}
@media (max-width: 600px) {
	header .header-contents{
	padding: 2rem 1rem;
	
	}
}
header .head-logo{
	width:100%;
	max-width:200px;
}
header .head-logo a{
	
}

header .head-logo a img{
	width: 100%;
	height:auto;
}

@media screen and (max-width:600px)	{

header .head-logo a .img-box{
	width: 80%;
}
header .head-logo a .logo-tx{
	width:100%;
	font-size:0.8em;
	line-height:1.5em;
	margin: 0.5rem 0 0;
}
}

/*****************************************************

ドロワーメニュー

*****************************************************/
.overlay-contents{
	/* width: calc(100% - 300px); */
}
.menu-content{
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
}
.menu-content ul.dr-menu{
	/* width:100%; */
	/* max-width: 600px; */
	margin: 0;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: flex-start;
	-webkit-align-items: stretch;
	align-items: center;
}
@media screen and (max-width:800px)	{
.menu-content ul.dr-menu{
	display:block;
}
}
.menu-content ul.dr-menu li{
	font-size: 100%;
	line-height:1.5em;
	/* width:20%; */
	font-weight:500;
	margin: 0 0 0 3rem;
}

.menu-content ul.dr-menu li a{
	display:block;
	border:0;
	padding: 1rem 0;
	text-align:center;
	color:#fff;
	position:relative;
}
.page .menu-content ul.dr-menu li a{
	color:#111;
}
.menu-content ul.dr-menu li a:after{
	content:"";
	  -webkit-transition: 0.3s ease-in-out;
	  -moz-transition: 0.3s ease-in-out;
	  -o-transition: 0.3s ease-in-out;
	  transition: 0.3s ease-in-out;
	  position:absolute;
	  width:0%;bottom:0;left:50%;
	  border-bottom:0px solid #fff;
}
.menu-content ul.dr-menu li a:hover:after{
 content:"";
	width:100%;
	left:0;
	border-bottom:0px solid #fff;
}




@media screen and (max-width:800px)	{
.menu-content{
	float:right;
	width: 100%;
	max-width: 100%;
}
.openbtn{
	position:fixed;
	top: 1.5rem;
	right: 1.5rem;
	cursor: pointer;
	width: 55px;
	height:55px;
	background: rgba(39,69,60,1);
	border-radius:50px;
	z-index:11;
	}
.openbtn.active{
	}
.openbtn span{display: inline-block;transition: all .4s;position: absolute;left: 14px;height: 1px;background: rgb(255 255 255);width: 50%;}
.openbtn.active span{
background: #ffffff;
}
.openbtn span:nth-of-type(1) {top:20px; }
.openbtn span:nth-of-type(2) {top:27px;}
.openbtn span:nth-of-type(3) {top:34px;}
.openbtn.active span:nth-of-type(1) {
top: 20px;
left:12px;
transform: translateY(6px) rotate(-45deg);
width: 50%;
}
.openbtn.active span:nth-of-type(2) {
opacity: 0;
}
.openbtn.active span:nth-of-type(3){
top: 32px;
left:13px;
transform: translateY(-6px) rotate(45deg);
width: 50%;
}

 
.menu-overlay {
	position: fixed;
	bottom: -99999px;
	width: 100%;
	height: 100%;background: rgba(0, 0, 0, 0.0);
	z-index: -1;
	transition: background 1s ease, z-index 0s 1s;
}

.menu-content{
	position: fixed;
	left:0;
	bottom: 100%;
	width: 100%;height: 100%;
	background:rgb(39 69 60);z-index: 10;
	-webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
	overflow-y: auto;transition: bottom 0.5s ease-in-out;
}
.menu-content.show {
   bottom: 0;
	left:0;
}
.menu-content ul.dr-menu{
	width:100%;
	max-width:900px;
	margin: 5rem 0 0;
	float:none;
}
	.menu-content ul.dr-menu a{
	color:#fff!important;
}
	.menu-content ul.dr-menu a:hover{
	color:#1c463d!important;
}
.menu-overlay.show {
	left:0;
	background-color: rgba(0, 0, 0, 0.6);
	 z-index: 10;transition: background-color 1s ease, z-index 0s; /* アニメーションの設定 */
}

.menu-content .head-rogo{width: 220px;margin:20px auto;}
.menu-content .head-rogo a{display:block;width:220px;}
.menu-content ul{
margin:20px;
font-size:90%;
}

.menu-content ul.dr-menu li{
	width:90%!important;
	line-height:1.5em;
	text-align:left;
	margin: 0 auto;
	padding:0 ;
	border-bottom:0.5px dashed #fff;
}
.menu-content ul.dr-menu li a{
	display:block;
	padding:1.5rem 0;
	text-align:left;
	padding-left:2rem;
}
.menu-content ul.dr-menu li span{
	display:contents;
}

.menu-content ul.dr-menu li a:hover,
.menu-content ul.dr-menu li:last-child a:hover{
	background:#ccc;
	border-radius:0;
	color:#231815;
	border:0;
}

.menu-content ul.overlay-menu{
display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: flex-start;justify-content: flex-start;-webkit-align-items: stretch;align-items: stretch;
width:90%;
margin: 5% auto 20%;
}
.overlay-menu li{
width:30%;
margin: 1.666%;
}
}

@media screen and (max-width:600px)	{
.overlay-menu li{
width:44%;
margin: 2% 3%;
font-size:85%;
line-height:1.5em;
}	
.menu-content ul.overlay-privacy li{
width: 100%;
}
.menu-content ul.overlay-privacy li:first-child{
padding:0 0 10px;
border-right:0px solid ;
margin-right:0%;
}

}
@media only screen and ( max-width :600px ) {
.openbtn{
	transform: scale(0.9);
	top: 1rem;
	right: 0.75rem;
}
}
/*****************************************************

フッター

*****************************************************/

footer{
	width:100%;
	bottom:0;
	margin: 0rem auto 0;
	padding: 5rem 0;
	background:#fff;
	border-top:0.5px solid #111;
}
footer .foot-inner{
	padding:0 4rem;
	width: 100%;
	/* max-width: 1500px; */
	margin:0 auto;
	box-sizing:border-box;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
@media (max-width: 1600px) {
	footer .foot-inner{
	padding:0 2rem;
	
}
	}
.ft-info{
	/* width:50%; */
	font-size:1rem;
}
.foot-menu a{
	color:#111;
	font-size:0.9rem;
}
.foot-menu a:hover{
	color:#1c463c;
}
.foot-menu ul{
	width:100%;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
	-webkit-align-items: stretch;
	align-items: stretch;
}
.foot-menu ul li{
	margin:0 1rem 0 1rem ;
}
.foot-menu ul li a{
	display:block;
	padding:0.5rem 0;
}
.foot-menu ul li:last-child{
	margin:0 0 0 1rem ;
}
.other-m{
	text-align:right;
	font-size: 0.8rem;
}
footer .ft-logo{
	width: 300px;
	margin: 0 0 30px;
}
footer .ft-logo img{
	width:100%;
}
.ft-info p span{
	font-size:1.1rem;
	
}
.ft-info p{
	font-size:0.9rem;
	
}
.ft-info p{
	font-size:0.9rem;
	
}
.copyright{
	text-align:right;
	margin-top: 7rem;
	font-size:0.8rem;
}
.lang-menu a{
	color:#111;
	font-size:0.9rem;
}
.lang-menu a:hover{
	color:#1c463c;
}
@media only screen and (max-width: 900px) {
.ft-info{
	width:100%;
	text-align:center;
	margin: 0 0 3rem;
}
.ft-info p{
	text-align:center;
}
footer .ft-logo{
	width: 220px;
	margin: 0 auto 30px;
}
.foot-menu{
	width:100%;
	margin-left:0%;
}
	.foot-menu ul{
	width:100%;
	margin-left:0%;
	margin:0 0 1rem;
}
.foot-menu ul li{
	width:100%;
	text-align:center;
	border-bottom:1px dashed #bfbdbd;
}

.copyright{
	text-align:center;
	margin-top:2rem;
}
}
/*****************************************************

動画

*****************************************************/

.bg-box{
	width:100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -5;
}
.bg-box.bg-on{
	position: absolute;
}

.bg-video video {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

.bg-box.bg-on .bg-video video {
  width: 100%;
  height: 50vh;
  object-fit: cover;
}
.green {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(28, 70, 60, 0.85);
	opacity: 0;
	z-index: 2!important;
	transition: opacity 0.4s ease;
	pointer-events: none;
}
.green .active{
	z-index: 2;
}

.bg-gazo {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;left: 0;
  z-index: 0;
  background: url("../image/common/mori.jpg") no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease;
}

.bg-gazo.ph-on {
  opacity: 1;
}
/*****************************************************
	
	フロント動画エリア
	
*****************************************************/

/* 全体の背景用ラッパー */
.youtube-contents {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #000;
  z-index: -1; /* 背景にするなら */
}

/* 背景画像（オプション） */
.youtube-contents::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width:100vw;
  height:100vh;
  transform: translate(-50%, -50%);
  background: url("https://noridouraku.itembox.design/item/image/top/youtube-bg.jpg") no-repeat center center;
  background-size: cover;
  z-index: -1;
}

/* YouTubeプレイヤー全画面 */
#youtube {
  position: absolute;
  top: 50%;
  left: 50%;
  width:3000px;
  height: 120vh;
  transform: translate(-50%, -50%);
  pointer-events: none; 
}

#youtube-mask{
    position: absolute;
    z-index: 2;/*下から2番目に表示*/
    top:0;
    width:100%;
    height: 100%;
}

/*****************************************************

メインコンテンツ

*****************************************************/
.content {
	width:100%;
	position:relative!important;
}
.main-logo{
	height: 100vh;
	
}
.main-logo .box{
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	position: sticky;
	top:43vh;
}
.main-logo img{
	width:80%;
	max-width:500px;
	animation: fadeInBlur 1.5s ease-out 1s forwards;
	opacity:0;
}
@keyframes fadeInBlur {
	from {
		opacity: 0;
		filter: blur(10px);
	}
	to {
		opacity: 1;
		filter: blur(0);
	}
}
.policyarea {
  width: 100%;
  height: 110vh;
  /*! background: #ccc; */
  position: relative;padding-top:75vh;
}

.policyarea .box {
  position: sticky;
  top: 35vh;
  width: 100%;
  max-width: 350px;
  margin: 0 auto;
	display: flex;
  justify-content: center;
}


.policyarea .tate {
  writing-mode: vertical-rl;
  text-orientation: upright;
  color: #fff;
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1.8;
  position: sticky;
  top: 45vh;
}


.policyarea .box .tate span.small {
  writing-mode: vertical-rl;
  text-orientation: mixed;
   font-size: clamp(0.95rem, 3vw, 1.5rem);
	margin-left: clamp(0.9rem, 3vw, 1rem);
}

.policyarea .box .tate span {
  display: block;
writing-mode: vertical-rl;
  text-orientation: mixed;
}
.policyarea.enbox .box .tate span,
.policyarea.enbox .box .tate span.small ,
.policyarea.enbox .tate {
	writing-mode:horizontal-tb;
	margin-left:0;
}
.policyarea .box .yoko {
	display: none;
}

.worksarea {
	width: 90%;
	max-width: 1200px;
	margin:40vh auto 0;
	padding: 8rem 0;
	border-top:0.5px solid #fff;
	position:relative;
}
.worksarea .textbox{
	margin:0 auto 5rem;
	padding: 0;
}
.worksarea .textbox p{
	text-align:center;
	font-size: 2.0rem;
	color:#fff;
}
.kantoku .ph,.seisaku .ph{
	margin:0 0 0.5rem;
}
.kantoku img,.seisaku img{
	width:100%;
}
.sliderarea .leftbox .kantoku p{
	line-height:1.7rem;
	padding:0 0 0.5rem;
}
.bt-hp,.bt-info{
	width:100%;
	line-height:1.5em;
	margin:0 0 0.5rem;
	font-size:0.9rem;
}
.bt-hp a,.bt-info a{
	color:#fff;
}
.bt-hp a:hover,.bt-info a:hover{
	opacity:0.7;
}
.bt-hp:before{
	content:"";
	margin-right:0.5rem;
	padding:0px 10px;
	background:url(../image/common/ic-outside.svg)no-repeat center;
	background-size:15px;
}
.bt-info:before{
	content:"";
	margin-right:0.5rem;
	padding:0px 10px;
	background:url(../image/common/ic-film.svg)no-repeat center;
	background-size:15px;
}
.popup-content {
  padding: 20px;
  background-color: white;
  color: #333;
}
.popup-content h2 {
  font-size: 24px;
  margin-bottom: 10px;
}


.ichiran{
	width:100%;
	border:1px solid #fff;
	margin:5rem 0;
}
.ichiran a{
	width:100%;
	text-align:center;
	color:#fff;
	display:block;
	padding:1rem 0
}
.ichiran a:hover{
	background:#fff;
	color:rgba(11, 65, 52);
}
.ichiran a:after{
	content:">";
	float:right;
	padding-right:2rem;
}
@media only screen and (max-width: 700px) {
.sticky-box{
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}
.sticky-box .box{
	width:90%;
	max-width:250px;
	height:auto;
}
.policyarea .box{
	width:100%;
	max-width: 200px;
}
.policyarea.enbox .box{
	width:100%;
	max-width: 310px;
}
.policyarea .box .yoko{
	display:block;
}
.worksarea .textbox .lbox{
	width: 100%;
	max-width:500px;
	margin:0 auto;
}
.worksarea .textbox .rbox{
	width: 100%;
	max-width: 80px;
	margin:0 auto;
}
.worksarea {
	padding: 5rem 0 5rem;
}
.ichiran{
	margin:5rem 0 0;
}
}



/* オリジナルボックス */
.films-contents {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0;
  align-items: center;
  overflow-y: auto;
  transition: opacity 0.3s ease-in-out, z-index 0s 1s; /* アニメーションの設定 */
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
}

.films-contents.show {
  z-index: 5;
  opacity: 1;
  transition: opacity 0.3s ease-in-out, z-index 0s; /* アニメーションの設定 */
}
.worksarea .modal-overlay.show{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(0 0 0 / 88%);
	z-index: 5;
	transition: background-color 0.3s ease, z-index 0s 0s; /* アニメーションの設定 */
}
.worksarea .overlay-contents{
	width:100%;
}

.films-contents .films-inner{
 background: #fff;
 padding: 40px 40px 80px;
 max-width: 1000px;
 width: 100%;
 box-sizing: border-box;
 top: 5rem;
 z-index:6;
}

.films-contents .films-inner .films-title{
	width: 100%;
	margin:0 auto;
	color:#1c463c;
	font-size: 2.5em;
	padding: 0 0 1.5rem;
	line-height:1.3em;
}
.films-contents .films-inner dl.films-cat {
	width:100%;
	margin: 0 auto 3rem;
	display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: flex-start;justify-content: flex-start;-webkit-align-items: stretch;align-items: stretch;
}
.films-contents .films-inner dl.films-cat dt{
	width: 160px;
	text-align:center;
	background:#1c463c;
	color:#fff;
}
.films-contents .films-inner dl.films-cat dd{
	width:calc(100% - 160px);
	padding-left:1rem;
	box-sizing:border-box;
}

.slide-waku{
	width: 100%;
	margin:0 auto;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: stretch;
	align-items: stretch;
}
.slide-waku .lefts{
	width:100%;
	max-width:500px;
}
.slide-waku .rights{
	width:calc(100% - 500px);
	padding-left:1rem;
	box-sizing:border-box;
}
.slide-waku .slick-slide {margin: 0;}
.slide-waku ul li.slick-slide {
	transition: opacity 0.3s ease;
}
.slide-waku ul li.slick-slide{
	width:100%;
	max-width:500px;
	height:100%;
}
.slide-waku ul li img{width:100%;}

.slide-waku .rights ul{
	margin: 0 auto 1rem;
	display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: flex-start;-webkit-align-items: stretch;align-items: flex-start;align-content: flex-start;
}
.slide-waku .rights ul .thumbnail-item{
	width: 30%;
	height:auto;
	margin: 1.66%;
	box-sizing: border-box;
	position: relative;
}
.thumbnail-item:after {
	content: '';
	background: rgba(0, 0, 0, 0.6);
	position: absolute;
	display: block;
	top: 0;left: 0;
	width: 100%;height: 100%;
	opacity: 1;
	transition: opacity 0.3s ease;
}

.thumbnail-item:first-child:after {
	content:'';
	transition: opacity 0s ease;
}
.thumbnail-item.thumbnail-current:after {opacity: 0;}

.thumbnail-item.thumbnail-current{
	border: 3px solid #1c463c;
	box-sizing: border-box;
}
.thumbnail-item img {
	width: 100%;
	height:auto;
}
.thumbnail-item:hover{cursor:pointer;}




@media only screen and (max-width: 1200px) {
.films-contents .films-inner{
	width:90%;
	margin:0 auto;
		overflow-y:scroll;
	max-height:75vh;
}
.slide-waku .lefts{max-width:400px;}
.slide-waku .rights{
	width:calc(100% - 400px)
}
}
@media only screen and (max-width: 800px) {
.slide-waku .lefts{max-width:250px;}
.slide-waku .rights{width:calc(100% - 250px);}
}
@media only screen and (max-width: 600px) {
.slide-waku .lefts{
	width:100%;
	margin: 0 auto 1rem;
}
.slide-waku .rights{
	width:100%;
	padding:0;
}
}
@media only screen and (max-width: 480px) {
.films-contents .films-inner .films-title{
	font-size:1.2em;
	padding: 0 0 0.5rem;
}
.films-contents .films-inner dl.films-cat {
	margin: 0 auto 0.5rem;
	}
.films-contents .films-inner dl.films-cat dt{
	width: 100px;
	font-size:0.6em;
}
.films-contents .films-inner dl.films-cat dd{
	width:calc(100% - 100px);
	font-size:0.68em;
}
}
.slide-waku .rights .naiyo{
	font-size:1.0rem;
	line-height: 1.8;
	padding:0 0 1.5rem;
	margin:0 0 1.5rem;
	border-bottom:0.5px solid #1c463c; 
}
.naiyo,.year,.copy,.production,.starring,.delivery{color:#1c463c;}

.slide-waku .rights .year,
.slide-waku .rights .copy,
.slide-waku .rights .production,
.slide-waku .rights .starring,
.slide-waku .rights .delivery{
	font-size:0.8rem;
	line-height:1.8;
}
.round_btn {
  display: block;
  position: fixed;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #fff;
  transition: all 1s; /* アニメーション設定 */
  top:50px;
  right:50px;
  z-index: 10;
}

.round_btn::before, .round_btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 32px;
  background: #333;
}

.round_btn::before {
  transform: translate(-50%,-50%) rotate(45deg);
}

.round_btn::after {
  transform: translate(-50%,-50%) rotate(-45deg);
}

.round_btn:hover { 
    transform: rotate(360deg);
}
@media screen and (max-width:800px){
 .round_btn::before, .round_btn::after {
  content: "";
   height: 27px;
}
}
@media screen and (max-width:480px){

 .round_btn::before, .round_btn::after {
  content: "";
   height: 27px;
}
}


.pagetitle-area{
	background:#fff;
	padding:2rem 0;
}
.pagetitle-area h1{
	width: 100%;
	/* max-width: 1400px; */
	margin: 0 auto 3rem;
	font-size:4rem;
	font-weight:normal;
	letter-spacing:0.2rem;
	padding: 0 2rem;
	box-sizing: border-box;
}
.works-page .pagetitle-area h1{
	
	padding: 0 0 0 4rem;
}
@media screen and (max-width:1600px){
	.works-page .pagetitle-area h1{
	
	padding: 0 0 0 2rem;
}
}
.pagetitle-area h1 span{
	font-size:1rem;
		display:block;
		letter-spacing:0rem;
	margin:0 0 0.75rem;


}
.works-area {
	position: relative;
}


 
.works-bg{
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
background: url("../image/common/works-bg.webp") left bottom / cover no-repeat;
	 opacity: 0;
  filter: blur(10px);
  animation: bgZoomBlurFade 1.5s ease-out forwards;
	
}
@media (max-width: 1200px) {
 .works-bg{
	
background: url("../image/common/works-bg-m.webp") left bottom / cover no-repeat;
}
}
@media (max-width: 1000px) {
 .works-bg{
	
background: url("../image/common/works-bg-s.webp") left bottom / cover no-repeat;
}
}



@keyframes bgZoomBlurFade {
  0% {
    opacity: 0;
    filter: blur(10px);
	  top:3vh;
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
	  top:0;
  }
}
.works-inner {
  width:95%;
  margin: 70vh auto 50vh;
  box-sizing:border-box;
  padding:0 0 0 0%;
  color:#fff;
  max-width:800px;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(50px);
  transition: none; /* トランジションは JS に任せる */
  will-change: opacity, filter, transform;
}

@media (max-width: 1200px) {
.works-inner{
	padding:0 5%;
}
}
@media (max-width: 800px) {
.works-inner{
	width: 85%;
	padding:0 0%;
}
}
.works-inner h2{
	text-align:center;
	letter-spacing: 0.5rem;
	font-weight:normal;
	font-size:2rem;
	margin:0 auto 5rem;
}
.works-inner dl {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  visibility: hidden; /* 視覚的に非表示にする */
  height: 0;
  overflow: hidden;
  display: -webkit-flex;
	display: flex;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	-webkit-align-items: flex-start;
	align-items: flex-start;
	
}

.works-inner dl.show {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  height: auto;
  overflow: visible;
	margin:0 0 2.5rem;
}
.works-inner dt{
	width:5rem;
	padding: 1.25rem 0;
}



.works-inner dd{
	border-left: 0.5px solid;
	padding:0 0 0 2rem;
	width:calc(100% - 8rem);
}
.works-inner dd .work{
	border-bottom:1px dotted;
	padding:1rem 0 1rem;
}
.works-inner dd .work p{
	font-weight:300;
	line-height:1.7;
}
.works-inner dd .work:last-child{
	border-bottom:0px dotted;
}
@media (max-width: 800px) {
.works-inner dt{
	width:4.5rem;

}
	.works-inner dd{
	padding:0rem 0 0 1.5rem;
	width:calc(100% - 4.5rem);
}
}



.works-inner dd a:hover{
	color:#fff;
	opacity:0.4;
}
.works-inner dd .title-area{
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	-webkit-align-items: center;
	align-items: center;
}


.works-inner dd .title-area{
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	-webkit-align-items: center;
	align-items: center;
}
.works-inner dd .title-area .name{
	font-size:1.3rem;
	margin:0 1rem 0.55rem 0;
	color:#fff;
	font-weight:400;
	
}
.works-inner dd .title-area .type{
	font-size: 0.70rem;
	background:#fff;
	color:#111;
	padding:0 0.5rem;
	line-height:1.5rem;
	position:relative;
	margin:0 0 0.4rem;
	font-weight: 400;
}

.works-inner dd .link-area{
	margin:1rem 0 0 ;
}


#loadMoreBtn{
	background:#1c463c;
	border:0;
	width:20rem;
	display:block;
	margin:3.5rem auto 5rem;
	padding:1.5rem 0;
	font-size:1.0rem;
	color:#fff;
	  -webkit-transition: 0.3s ease-in-out;
       -moz-transition: 0.3s ease-in-out;
         -o-transition: 0.3s ease-in-out;
            transition: 0.3s ease-in-out;
	cursor:pointer;
	position:relative;
	
}
#loadMoreBtn:before,
#loadMoreBtn:after{
	content:'';
	width:0.5rem;
	height:0.5rem;
	border-radius:50%;
	background:#fff;
	position:absolute;
	top:-2.5rem;
	left:50%;
	margin-left:-0.5rem;
	-webkit-transition: 0.3s ease-in-out;
       -moz-transition: 0.3s ease-in-out;
         -o-transition: 0.3s ease-in-out;
            transition: 0.3s ease-in-out;
}
#loadMoreBtn:after{
	top:-4rem;
	
}
#loadMoreBtn:hover{
	background:#102f28;
	
}

.jyusyo-area{
	background:#1c463c;
	padding: 10rem 0;
}
.jyusyo-area h2{
	max-width:1500px;
	width:95%;
	margin:0 auto;
	font-size:2rem;
	font-weight:normal;
	color:#fff;
	margin:0 auto 2rem;
	text-align: center;
}
.jyusyo-area .box{
	max-width: 1000px;
	width:95%;
	margin:0 auto;
	color:#fff;
}
.jyusyo-area .box .reki{
	margin: 0 auto 3.5rem;;
}
.jyusyo-area h3 {
	font-weight:400;
	border-bottom:0.5px solid ;
	padding-bottom:1rem;
	margin:1rem 0 1rem;
	font-size:1.1rem;
}

.jyusyo-area dl {
 
  display: -webkit-flex;
	display: flex;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	-webkit-align-items: flex-start;
	align-items: flex-start;
	
}

.jyusyo-area dt{
	width:8rem;
	text-align:center;
	padding:0.5rem 0 0.5rem 0;
}



.jyusyo-area dd{
	border-left:0.5px solid;
	padding:0.5rem 0 0.5rem 2rem;
	width:calc(100% - 8rem);
	/* line-height:1.7; */
}
.jyusyo-area dd .work{
	border-bottom:1px dotted;
	padding:1rem 0 1rem;
}
.jyusyo-area dd .work:last-child{
	border-bottom:0px dotted;
}
@media (max-width: 800px) {
.jyusyo-area dt{
	width:4.5rem;

}
.jyusyo-area dd{
	padding:0.5rem 0 0.5rem 1.5rem;
	width:calc(100% - 4.5rem);
}
}
.about-area {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.about-area .bg-area {
	width: 50%;
	position: relative;
	order: 2;
}

.about-area .cover-contents {
	position: sticky;
	top: 0;
	height: 100vh;
	z-index: 0;
}

.about-area .cover-contents img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	filter: blur(10px);
	animation: bgZoomBlurFade 1.5s ease-out forwards;
}

.about-area .info-area {
	width: 50%;
	margin: 0;
	display: flex;
	justify-content: center;
}

.about-area .info-area .about-inner {
	padding-bottom: 40vh;
}

.about-sticky-container {
	position: relative;
	height: 100vh;
}

.about-sticky-wrapper {
	position: sticky;
	top: 55vh;
	z-index: -1;
	background-color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}

.about-inner .pagetitle-area {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-bottom: 5rem;
}

.about-inner .pagetitle-area h1 {
	width: auto;
	position: relative;
	top: -10vh;
}

.about-inner h2 {
	font-size: 1.8rem;
	font-weight: 400;
	margin: 0 0 4rem 0;
}

.about-inner h2 span {
	display: block;
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0.1rem;
	color: #1c463c;
}

.about-inner dl {
	margin-bottom: 2.5rem;
}

.about-inner dl dt {
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.1rem;
	color: #1c463c;
	line-height: 1.7;
	border-bottom: 0.5px solid #555;
	padding: 0 0 0.75rem;
}

.about-inner dl dd {
	margin: 0.75rem 0 0 0;
	font-weight: 400;
	letter-spacing: 0.1rem;
	line-height: 1.6;
}

.about-bt ul {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.about-bt li {
	width: 48.5%;
}

.about-bt li a {
	background: #1c463c;
	display: block;
	padding: 1rem 0rem 1rem 1.5rem;
	font-size: 0.95rem;
	position: relative;
	color: #fff;
	text-decoration: none;
}

.about-bt li a:before {
	content: '>';
	position: absolute;
	right: 0.5rem;
}

.about-bt li a:hover {
	background: #111;
	color: #fff;
}


@media (max-width: 1000px) {
.about-area .bg-area {
	width:100%;
    position: relative;
	height:45vh;
	order: 1;
	overflow:hidden;
}
.about-area .cover-contents img {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


	.about-area .info-area {
	width: 90%;
		max-width:600px;
		margin:0 auto;
		display:block;
	order: 2;
}
	.about-area .info-area .about-inner {
	padding-bottom: 10vw;
}

.about-sticky-container {
	position: relative;
	height: 45vh;display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
}

.about-sticky-wrapper {
	position:relative;
	top: 0;
	z-index: -1;
	background-color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}
.about-inner .pagetitle-area h1 {
	top: 0;
}	
}

.scroll-box{
	position:absolute;
	right:1.5rem;
	padding-top:2rem;
}
.scroll {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    color: #fff;
    position: relative;
    font-size:0.8rem;
}

/* 線のアニメーション部分 */
.scroll::before {
    background: #fff;
    bottom: -5rem;
    content: "";
    height: 4rem;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    width: 1px;
}
.scroll::after {
    content: "●";
    font-size: 0.6rem;
    color: #fff;
    position: absolute;
    left: -0.5px;
    bottom: -115px;
    animation: scroll-dotted 3s infinite;
}
.about-area .scroll-box{
	position:absolute;
	left:2rem;
	padding-top:3rem;
}
.frontscroll-box{
	position:fixed;
	left:2rem;
	bottom:7rem;
		opacity: 1;
		transition: opacity 2.5s ease;


}
.frontscroll-box.active{
	opacity: 0;
}
@media (max-width: 800px) {
	.about-area .scroll-box{
	position:absolute;
	left:1rem;
	padding-top:2rem;
	display: none;
}
}
.about-area .scroll {
       color: #111;
  
}

.about-area .scroll::before {
    background: #111;
  
}
.about-area .scroll::after {

    color: #111;
}


/* 矢印のアニメーション */
@keyframes scroll-dotted {
    0% {
        transform: translateY(-6rem);
    }
    50% {
        transform: translateY(-2rem);
    }
    51% {
        transform: translateY(-2rem);
    }
    100% {
        transform: translateY(-2rem);
    }
}
.greenphoto-bg-content{
	position: fixed;
	z-index: -1;
	top:0;
	left:0;
	width:100%;
	height:100%;
	opacity: 0;
	transition: opacity 2.5s ease;
}
.greenphoto-bg-content.active{
	opacity: 1;
}
.greenphoto-bg{
	position: relative;
	width:100%;
	height:105vh;
	background: url("../image/common/mori.jpg") center / cover no-repeat;
}
.greenphoto-bg:before{
	position: absolute;
	background: #1c463c;
	content:'';
	width:100%;
	height:100%;
	opacity: 0.7;
}



/* お問合せフォーム */
.formbox{
	background: #bcc7c4;
	padding:5rem 0 6rem;
}
.formbox h2{
	text-align:center;
}
.setsumei{
	display:block;
	box-sizing:border-box;
	width:100%!important;
	max-width:800px;
	margin:2rem auto;
}
#container{
	width:100%!important;
	max-width:800px;
	margin:0 auto;
}
.contactarea .ao{
	color: #1c463c;
	margin:0 auto 0.5rem;
	text-align:left;
}
.contactarea label{
	cursor:pointer;
}

.radiobox label{
	line-height:1.5em;
	margin-left:1.5em;
}

.contactarea label span{
	color:#009fe8;
	border-bottom:1px solid #009fe8;
	margin:0 0 0 5px;
	cursor:pointer;
}
.contactarea .waku{
	width:100%!important;
	box-sizing:border-box;
	border:2px solid #fff!important;
	padding:20px ;
	margin:0 auto 0.5rem;
}

.contactarea .hako{
	background:#fff;
	text-align:center;
	padding:20px 0;
	margin:2rem auto;
	cursor:pointer;
}
.mail-bt{
	background: #1c463c!important;
	color:#fff!important;
	width:100%!important;
	max-width:250px!important;
	text-align:center!important;
	padding:20px 0!important;
	margin:3rem auto 0!important;
	cursor:pointer!important;
	border:0!important;
	border-radius:25vh!important;
	display:block!important;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}
.mail-bt:hover{
	background:#fff!important;
	color:#1c463c!important;
}
.mfp_err{
	color:#cc0000;
}
@media screen and (max-width:900px){
.formbox h2{
	width:90%!important;
	margin:0 auto;
}
.setsumei{
	width:90%!important;
	line-height:1.5em;
}
#container{
	width:90%!important;
}
}

.thanksbox{
	width:90%;
	max-width:800px;
	margin:5rem auto 10rem;
	line-height:1.5rem;
}

#mfp_loading_screen{display:none;}

div#mfp_overlay {
	position: absolute;
	display: none;
	z-index: 10001;
}
div#mfp_overlay_inner {
	background-color: #FFF;
	padding: 15px;
	margin: 0px auto;
	border-radius: 5px;
	box-shadow: 0px 0px 10px #000;
	width: 640px;
	max-width: 90%;
}
div#mfp_overlay_background {
	background-color: #000;
	position: absolute;
	display: none;
	z-index: 10000;
}

.mfp_element_submit,.mfp_element_reset,.mfp_element_button,button.mfp_next,button.mfp_prev {
	border-radius: 5px;
	padding: 5px 10px;
	border: solid 1px #CCC;
	background: gradient(linear, center top, center bottom, from(#EEE), to(#CCC));
	background: -webkit-gradient(linear, center top, center bottom, from(#EEE), to(#CCC));
	background: -moz-linear-gradient(top, #EEE, #CCC);
	background: -ms-linear-gradient(top, #EEE 0%, #CCC 100%);
	/* text-shadow: 0px 2px 0px #FFF; */
	font-size: 18px;
	cursor: pointer;
	outline: none;
}
table#mfp_confirm_table {
	border-spacing: 0px;
	border-collapse: collapse;
	width: 100%;
}
table#mfp_confirm_table tr.mfp_colored {
	background-color: #F6F7F9;
}
table#mfp_confirm_table tr.mfp_achroma {
	background-color: #FFF;
}
table#mfp_confirm_table tr th,table#mfp_confirm_table tr td {
	text-align: left;
	font-size: 12px;
	border-top: solid 1px #CCC;
	padding: 5px 10px;
}
table#mfp_confirm_table tr th {
	white-space: nowrap;
	width: 200px;
}
table#mfp_confirm_table tr td {
	line-height: 1.5em;
	word-break: break-all;
}
div.mfp_buttons {
	clear: both;
	padding: 10px 0px;
	text-align: center;
}
.mfp_element_reset,.mfp_element_button,button.mfp_next,button.mfp_prev {
	border-radius: 5px;
	padding: 5px 10px;
	border: solid 1px #CCC;
	background: gradient(linear, center top, center bottom, from(#EEE), to(#CCC));
	background: -webkit-gradient(linear, center top, center bottom, from(#EEE), to(#CCC));
	background: -moz-linear-gradient(top, #EEE, #CCC);
	background: -ms-linear-gradient(top, #EEE 0%, #CCC 100%);
	color:#000;
	font-size: 18px;
	cursor: pointer;
	outline: none;
}
table#mfp_confirm_table {
	border-spacing: 0px;
	border-collapse: collapse;
	width: 100%;
}

#mfp_hidden{
	display:none;
}

.contactarea h1{
	text-align:center;
	margin:5rem auto;
}
@media screen and (max-width:480px){
.contactarea h1{
	font-size:3.5rem;
	line-height:1.0;
}
}
.pv-area{
	width:90%;
	max-width:1100px;
	margin:5rem auto;
}
.pv-area p{
	font-size:0.9rem;
	line-height:1.7;
}
.pv-area h2{
	font-size:1.2rem;
	line-height:1.7;
	margin:0 0 0.75rem;
}

.pv-area{
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
}
.pv-area .pv-inner{
	width:45%;
}
.pv-area .pv-info{
	width:55%;
	margin:5rem 0 ;
}
.pv-area .pv-inner h1{
	position:sticky;
	top:0;
	height:50px;
}


.pv-area .pv-inner .pagetitle-area{
    position:relative;
    height:100vh;
		padding-top:4rem;

}
.pv-area .pv-inner .pagetitle-area h1{
    position: sticky;
    top: 5rem;
    z-index: 1; 
	  font-size: clamp(3rem, 5vw, 4rem);
	line-height:1.1;
}


@media screen and (max-width:800px){
	.pv-area{
	display: block;
}
	.pv-area .pv-inner .pagetitle-area{
    position:relative;
    height:auto;
		padding-top:4rem;

}
.pv-area .pv-inner .pagetitle-area h1{
   padding:0;
}
	.pv-area .pv-inner{
	width:100%;
}
.pv-area .pv-info{
	width:100%;
	margin:5rem 0  8rem;
}
	.pv-area{
	width:90%;
	max-width:1100px;
	margin:0rem auto ;
}
}

#bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -1; /* 背景にするため、他のコンテンツの背面に */
	
}
#bg-video-bg {
   position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2;
	background: url("../image/movie/thumbnail.jpg") no-repeat;
  background-size: cover;
  background-position: center;
}
.cf-baner a{
	text-align:center;
	margin:1rem auto 10rem;
	background:#1c463c;
	border-radius:10px;
	padding:5rem 0;
	display:block;
}

.cf-baner img{
	width:80%;
	max-width:700px;
}

@media screen and (max-width:800px){
	.cf-baner a{
	margin:5vw auto 15vw;
	background:#1c463c;
	border-radius:10px;
	padding:8vw 0 9vw;
	
}
	.cf-baner img{
	width:95%;
}
}

.front-bg-color{
	width:100%;
	height:100vh;
	background:#1c463c;
	position:fixed;
	z-index:-10;
}
.thankbox{
	background: #bcc7c4;
	padding:5rem 0 6rem;
}
.thankbox .text{
	width:95%;
	max-width:800px;
	margin:0 auto;
	padding:10em 0;
}

.thankbox .text h2{
	font-size:1.2rem;
	line-height:1.7;
	margin:0 0 0.75rem;
}