@charset "utf-8";
/* 
	
CSS base.css */


/* 
base : #0d0d0d
gold : #ceb823
bggrey : #f5f5f5
red : #d60a0f
yellow : #ffff00

*/




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


body


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

body::before,
body::after { content: ''; position: fixed; top: 0; width: 100%; height: 100%; background: #0d0d0d; z-index: 9999; pointer-events: none; left: -100%; transition: left 1.2s cubic-bezier(0.4, 0, 0.2, 1); }
body::after { left: 0; transition: left 1.2s cubic-bezier(0.4, 0, 0.2, 1); }
body.outslide::before { left: 0; }
body.inslide::after { left: 100%; }


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


Nav


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

#gnav {z-index: 99;height: 100%;position: fixed;top: 0;right: 0;bottom: 0;left: 0;/* display: flex; */justify-content: center;align-items: center;box-sizing: border-box;flex-direction: row-reverse;}
#gnav .bg { background: #fff; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: -1; height: 100vh;}
#gnav .inwrap {overflow-y: scroll;height: 100vh;overflow-y: scroll;width: 100%;justify-content: center;align-items: center;box-sizing: border-box;flex-direction: column;display: flex;}
#gnav .innav { -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; margin-bottom: 60px; }
#gnav .navlogo { width: 70px; margin-left: 80px; transition: 0.3s; opacity:0; }
#gnav .navlogo img { width: 70px; height: 365px; }
#gnav.is-open .navlogo { opacity: 1; }
#gnav::after { content: "."; display: block; clear: both; height: 0; visibility: hidden; overflow:hidden; line-height:0; font-size: 0; }
#gnav ul.main { margin-top: 140px; }
#gnav ul.main>li { position: relative; text-align: left; transition: 0.3s; opacity:0; }
#gnav ul.main>li:first-child { display: none; }
#gnav ul.main>li::after { content: "";  }
#gnav ul.main>li a { text-decoration: none; position: relative; vertical-align: middle; }
#gnav ul.main>li a:hover { opacity: 1; }
#gnav ul.main>li a:hover span { background: #0d0d0d; color: #fff!important; }
#gnav ul.main { position: static; display: block; text-align: center; }
#gnav ul.main>li { display: block!important; margin: 0 12px; float: none; font-size: 18px;}
#gnav.is-open { pointer-events: auto; opacity: 1; }
#gnav.is-open ul.main>li { opacity:1;  }
#gnav .snsbox {margin-top: 40px; opacity:0; }
#gnav.is-open .snsbox { opacity: 1; }
@media screen and (max-width: 1280px){
	#gnav .navlogo { margin-left: 60px; }
	#gnav ul.main>li { margin: 0 6px; }
}
@media screen and (max-width: 1040px){
	#gnav ul.main>li {margin: 0 -2px;}
	#gnav ul.main { margin-top: 130px; }
	#gnav .navlogo { width: 65px; margin-left: 30px; }
	#gnav .navlogo img { width: 65px; height: 352px; }
}
@media screen and (max-width: 820px){
	#gnav ul.main>li {margin: 0 -4px;}
}
@media screen and (max-width: 767px){
	#gnav { flex-direction: column; align-items: flex-start; }
	#gnav .inwrap {/* flex-direction: column; */display: block;/* align-items: flex-start; */}
	#gnav .innav { -webkit-writing-mode: horizontal-tb; -ms-writing-mode: lr-tb; writing-mode: horizontal-tb; padding: 0 13%; margin-bottom: 0; }
	#gnav ul.main { margin: 30px 0 0; }
	#gnav ul.main>li {font-size: 16px; }
	#gnav ul.main>li a:hover span { background: none; color: #0d0d0d!important; }
	#gnav .navlogo { width: 60px; margin:60px 0 0; }
	#gnav .navlogo img { width: 60px; height: 200px; }
    #gnav .snsbox { margin: 0; padding: 40px 13% 80px; }
}
#gnav.is-open ul.main>li span { opacity:0; transition: 0.6s; animation: navfadein 1.0s cubic-bezier(.8,0,.5,1) forwards; opacity:0; }
#gnav.is-open ul.main>li span:before {
  animation: maskout 1.0s cubic-bezier(.8,0,.5,1) forwards;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: #0d0d0d;
  opacity:0;
}
#gnav.is-open ul.main>li:nth-child(1) span { animation-delay: 0.2s; }
#gnav.is-open ul.main>li:nth-child(2) span { animation-delay: 0.35s; }
#gnav.is-open ul.main>li:nth-child(3) span { animation-delay: 0.5s; }
#gnav.is-open ul.main>li:nth-child(4) span { animation-delay: 0.65s; }
#gnav.is-open ul.main>li:nth-child(5) span { animation-delay: 0.8s; }
#gnav.is-open ul.main>li:nth-child(6) span { animation-delay: 0.95s; }
#gnav.is-open ul.main>li:nth-child(7) span { animation-delay: 1.1s; }
#gnav.is-open ul.main>li:nth-child(8) span { animation-delay: 1.25s; }
#gnav.is-open ul.main>li:nth-child(9) span { animation-delay: 1.4s; }
#gnav.is-open ul.main>li:nth-child(10) span { animation-delay: 1.55s; }
#gnav.is-open ul.main>li:nth-child(11) span { animation-delay: 1.7s; }
#gnav.is-open ul.main>li:nth-child(12) span { animation-delay: 1.85s; }
#gnav.is-open ul.main>li:nth-child(1) span:before { animation-delay: 0.2s; }
#gnav.is-open ul.main>li:nth-child(2) span:before { animation-delay: 0.35s; }
#gnav.is-open ul.main>li:nth-child(3) span:before { animation-delay: 0.5s; }
#gnav.is-open ul.main>li:nth-child(4) span:before { animation-delay: 0.65s; }
#gnav.is-open ul.main>li:nth-child(5) span:before { animation-delay: 0.8s; }
#gnav.is-open ul.main>li:nth-child(6) span:before { animation-delay: 0.95s; }
#gnav.is-open ul.main>li:nth-child(7) span:before { animation-delay: 1.1s; }
#gnav.is-open ul.main>li:nth-child(8) span:before { animation-delay: 1.25s; }
#gnav.is-open ul.main>li:nth-child(9) span:before { animation-delay: 1.4s; }
#gnav.is-open ul.main>li:nth-child(10) span:before { animation-delay: 1.55s; }
#gnav.is-open ul.main>li:nth-child(11) span:before { animation-delay: 1.7s; }
#gnav.is-open ul.main>li:nth-child(12) span:before { animation-delay: 1.85s; }
@keyframes maskout {
	0% { transform-origin: left top; transform: scale(1, 0); opacity:1;}
	45% { transform-origin: left top; transform: scale(1, 1);}
	50% { transform-origin: left bottom; transform: scale(1, 1);}
	100% { transform-origin: left bottom; transform: scale(1, 0); opacity:1;}
}
@keyframes navfadein {
	0% { color:#fff; opacity:1;}
	45% { color:#fff;}
	50% { color:#000; }
	100% { color:#000; opacity:1;}
}




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


Menubtn


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

#menubtn { z-index: 100; }
#menubtn { position: fixed; top: 0; right: 0; display: block; background: transparent; width: 94px; height: 94px; transition : 0; cursor: pointer; background: #0d0d0d; }
#menubtn a { text-decoration: none; position: relative; display: block; height: 100%; width: 100%; color: #fff; }
#menubtn a .line {
	width: 50px; height: 1px; background: #fff; position: absolute; left: 50%; margin-left: -25px; transition: all 0.5s cubic-bezier(0, 0, 0, 1);
}
#menubtn a #line1 { top: 36px; }
#menubtn a #line2 { top: 44px; }
#menubtn a #line3 { top: 52px; }
#menubtn a .txt.menu,
#menubtn a .txt.close { font-size: 13px; text-align: center; position: absolute; left: 0; width: 100%; top: 54px; transition: all 0.6s; }
#menubtn a .txt.close { opacity: 0; }
#menubtn a:hover #line1 { top: 44px; }
#menubtn a:hover #line3 { top: 44px; }
#menubtn.active a .txt.menu { opacity: 0; }
#menubtn.active a .txt.close { opacity: 1; color: #0d0d0d; }
#menubtn.active a .line { width: 50px; background: #0d0d0d; }
#menubtn.active { background: none; }
#menubtn.active a #line1 {
	top: 42px;
	-webkit-transform:translateY(2px) translateX(0) rotate(-160deg);
	transform:translateY(2px) translateX(0) rotate(-160deg);
}
#menubtn.active a #line2 { opacity: 0; width: 0; margin-left: 0; }
#menubtn.active a #line3 { 
	top: 42px;
	-webkit-transform:translateY(2px) translateX(0) rotate(160deg); 
	transform:translateY(2px) translateX(0) rotate(160deg);
}
@media screen and (max-width: 767px){
	#menubtn { width: 60px; height: 60px; }
	#menubtn a .line { width: 30px; margin-left: -15px; }
    #menubtn a #line1 { top: 18px; }
    #menubtn a #line2 { top: 24px; }
    #menubtn a #line3 { top: 30px; }
    #menubtn a:hover #line1 { top: 18px; }
    #menubtn a:hover #line3 { top: 30px; }
    #menubtn.active a .line { width: 30px; }
    #menubtn.active a #line1 { top: 24px; }   
    #menubtn.active a #line3 { top: 24px; }
    #menubtn a .txt.menu,
    #menubtn a .txt.close { top: 30px; }
}







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


Mainv.index


//////////////////*/
#mainv.index { position: relative; display: flex; justify-content: center; align-items: center; }
#mainv.index .inbox { margin: 0 15%; display: flex; justify-content: space-between; align-items: center; width: 70%; }
#mainv.index .txt { background: #ceb823; padding: 20px 10px; line-height: 1; width: 23px; }
#mainv.index .txt img { width: 100%; }
#mainv.index .logo { width: 100px; }
#mainv.index .logo img { width: 100px; }
@media screen and (max-width: 1280px){
}
@media screen and (max-width: 1040px){
	#mainv.index {  }
}
@media screen and (max-width: 767px){
	#mainv.index { }
	#mainv.index .txt { padding: 12px 6px; width: 19px; }
    #mainv.index .logo { width: 80px; }
}
@media screen and (max-width: 639px){
	#mainv.index { align-items: center; }
	#mainv.index .txt { padding: 12px 6px; width: 16px; }
    #mainv.index .logo { width: 60px; }
}

/* slidebox */
#mainv.index .bglist{  position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -2;}
#mainv.index .bglist:before{ content: ""; background: url(../img/index/mv_overlay.png) rgba(13, 13, 13, 0.2); width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2; }
#mainv.index .bglist .video-wrap{ height: 100%; position: relative; z-index: 1; width: 100%;  }
#mainv.index .bglist .video-wrap>video{ background: url('/video_bg.jpg') no-repeat; background-attachment: fixed;  background-position: center center; background-size: cover; left: 0; min-height: 100%; min-width: 100%; position: absolute; top: 0; left: 0; z-index: 1; }
#mainv.index .bglist .video-wrap>p{ font-family: serif; color: #fff; font-size: 400%; position: absolute; left: 30%; top: 200px; z-index: 1; width: 100%; }
#mainv.index .slidebox{ display: none; }
#mainv.index .slidebox { z-index: -2; }
#mainv.index .slidebox,
#mainv.index .slidebox div,
#mainv.index .slidebox li { width: 100%; height: 100%; }
#mainv.index .slidebox li .bg { width: 100%; height: 100%; object-fit: cover; font-family: 'object-fit: cover;'; }
#mainv.index .slidebox li.slick-current .bg,
#mainv.index .slidebox li.slick-slide[tabindex="0"] .bg { animation: zoomout 12s linear 0s 1 normal both; }
#mainv.index .slidebox li.slick-slide[tabindex="-1"] .bg { width: 100%; height: 100%; }
@keyframes zoomout {
	0% { transform: scale(1);}
	100% { transform: scale(1.1); }
}

@media screen and (max-width: 1040px){
	#mainv.index .bglist .video-wrap{ display: none; }
	#mainv.index .slidebox{ display: block; }
}

#mainv.index .scrollbtn:after,
#mainv.index .scrollbtn:before { left: 50%; display: block; content: ''; width: 1px; position: absolute; }
#mainv.index .scrollbtn:before { bottom: 0; background: rgba(255,255,255,.3); z-index: 0; height: 100px; }
#mainv.index .scrollbtn:after { bottom: 100px; background: rgba(255,255,255,.5); z-index: 1; height: 0; animation: scrollBar 2.5s cubic-bezier(.165,.84,.44,1) infinite; }
#mainv.index .scrollbtn { bottom: 0; left: 50%; z-index: 5; height: 125px; margin-left: -40px; }
#mainv.index .scrollbtn,
#mainv.index .scrollbtn a { position: absolute; display: block; font-size: 14px; width: 80px; color: #fff; line-height: 1; text-align: center; }
@keyframes scrollBar {
	0%{ bottom: 100px; height: 0; }
	5%{ bottom: 50px; height: 50px; }
	100%{ bottom: -50px; height: 50px; }
}




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


Mainv.under


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


#mainv.under { height: calc(15vw + 550px); width: 100%; position: relative; display: flex; justify-content: center; align-items: center; }
#mainv.under .bg { object-fit: cover; font-family: 'object-fit: cover;'; /*IE対策*/ display: block; width: 100%; height: 100%; position: absolute; z-index: -1; left: 0; top: 0; }
#mainv.under .logo { position: absolute; top: 60px; left: 80px; width: 80px; }
@media screen and (max-width: 1040px){
	#mainv.under { height: 700px; }
}
@media screen and (max-width: 767px){
	#mainv.under .logo { top: 40px; left: 40px; width: 70px; }
	#mainv.under { height: 550px; }
}
@media screen and (max-width: 639px){
	#mainv.under .logo { top: 20px; left: 30px; width: 50px; }
	#mainv.under { height: 480px; }
}
@media screen and (max-width: 500px){
	#mainv.under { height: 400px; }
}














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


Pankuzu


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

#pankuzu { position: absolute; top: 0; right: 40px; line-height: 1; padding:0; height: 100%; display: flex; justify-content: center; align-items: center; }
#pankuzu ol { -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; display: inline-block;}
#pankuzu ol li { display:inline; color: #fff; }
#pankuzu ol li a { color: #fff; text-decoration: none; }
#pankuzu ol li:before { content:">"; display: inline-block; margin: 4px 0; transform: scale(1.2, 0.6); }
#pankuzu ol li:first-child:before { display: none; }
#pankuzu ol li a:hover { opacity: 0.7; transition: 0.3s; }
@media screen and (max-width: 767px) { 
	#pankuzu{ display: none; }
	#pankuzu ol { margin: 0 6%; }
}






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


Content


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

#main { margin-top: 160px; }
@media screen and (max-width: 767px) { 
	#main { margin-top: 80px;  }
}

#content { display: flex; justify-content: space-between; flex-direction: row-reverse; }
#content #base { flex: 1; margin-left: 80px; }
#content #side { width: 240px; }
@media screen and (max-width: 1040px) { 
	#content { display: block; }
	#content #base { margin-left: 0px; }
	#content #side { width: 100%; margin-top: 100px; }
}
@media screen and (max-width: 767px) { 
}








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


Cntside


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

#side {  }













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


Footer


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

#footer { margin-top: 200px; }
#index #footer { margin-top: 0px; }
#about.index #footer,
#prayer.index #footer,
#prayer.iron #footer { margin-top: 120px; }
@media screen and (max-width: 1040px) {
}
@media screen and (max-width: 767px) {
	#footer { margin-top: 80px; }
	#about.index #footer,
	#prayer.index #footer,
	#prayer.iron #footer { margin-top: 0px; }
}

/* contactbox */
#footer .fnavbox { margin-bottom: 100px; padding: 80px 0; background: #f5f5f5; }
#footer .fnavbox ul.fnav { text-align: center; }
#footer .fnavbox ul.fnav li { display: inline-block; font-size: 18px; margin: 5px; }
#footer .fnavbox ul.fnav li a { text-decoration: none; }
#footer .fnavbox ul.fnav li a:hover { text-decoration: underline; }
@media screen and (max-width: 1040px) {
    #footer .fnavbox ul.fnav li { font-size: 16px; }
}
@media screen and (max-width: 767px) {
    #footer .fnavbox { display: none; }
}

/* footerinfo */
#footer .footerinfo { position: relative; }
#footer .footerinfo:after { content: ""; display: block; clear: both; height: 0; visibility: hidden; overflow:hidden; line-height:0; font-size: 0; }
#footer .footerinfo .map { width: 85%; height: 850px; margin-left: 15%; position: relative; overflow: hidden; z-index: -1; }
#footer .footerinfo .map iframe { position: absolute; top: -150px; left: 0; width: 100%; height: calc(100% + 150px + 150px); pointer-events: none; }
#footer .footerinfo .infobox { position: absolute; top: 80px; left: 0; width: 250px; padding: 0 80px; height: 810px; display: flex; justify-content: center; align-items: center; background: #f5f5f5; }
#footer .footerinfo .inbox { text-align: left;font-size: 15px; }
#footer .footerinfo .inbox .txt1 { margin-bottom: 10px; }
#footer .footerinfo .inbox .telbox { font-size: 20px; }
#footer .footerinfo .logo { width: 70px; margin: 0 auto 40px; }
#footer .footerinfo .btnbox { margin-bottom: 30px; }
#footer .footerinfo .btnbox2 { display: none; }
#footer .footerinfo .btnbox svg,
#footer .footerinfo .btnbox2 svg { width: 15px; height: 15px; vertical-align: -2px; margin-left: 3px;}
#footer .footerinfo .btnbox svg .st0,
#footer .footerinfo .btnbox2 svg .st0 { stroke:#fff; stroke-width: 1px;}
@media screen and (max-width: 1040px) {
    #footer .footerinfo .map { width: 100%; height: 600px; margin-left: 0; }
    #footer .footerinfo .infobox { display: block; height: auto; position: static; width: 84%; padding: 80px 8%; } 
    #footer .footerinfo .logo { width: 60px; margin: 0 auto 30px; }
    #footer .footerinfo .btnbox { display: none; }
    #footer .footerinfo .btnbox2 { display: block; margin-top: 30px; text-align: center; }
    #footer .footerinfo .btnbox2 p:first-child { margin-bottom: 10px; }
    #footer .footerinfo .inbox .txt1 { text-align: center; }
    #footer .footerinfo .inbox .telbox { text-align: center; }
}
@media screen and (max-width: 500px) {
    #footer .footerinfo .infobox { padding: 60px 8%; }
    #footer .footerinfo .map { height: 400px;}
}

#footer .crbox { padding: 90px 0; }
#footer .crbox .incnt { display: flex; justify-content: space-between; align-items: center;}
@media screen and (max-width: 1040px){
    #footer .crbox .snsbox { margin-right: 20px; }
}
@media screen and (max-width: 767px){
    #footer .crbox .snsbox { margin: 0;  }
}
@media screen and (max-width: 500px){
    #footer .crbox .incnt { display: block; }
    #footer .crbox .snsbox { margin-bottom: 20px; }
}

#footer .footergallerybox { }
#footer .footergallerybox ul.list { display: flex; flex-wrap: wrap; }
#footer .footergallerybox ul.list li { width: calc(100% / 6); height: 16.66vw; }
*::-ms-backdrop, #footer .footergallerybox ul.list li { width: 16.66%; height: 16.66vw; } /* IE11 */
#footer .footergallerybox ul.list li div { display: none; }
#footer .footergallerybox ul.list li a { background: #000; overflow: hidden; width: 100%; height: 100%; display: block; position: relative; }
#footer .footergallerybox ul.list li a img { transition: 0.6s; object-fit: cover; font-family: 'object-fit: cover;'; /*IE対策*/ display: block; width: 100%; height: 100%; }
#footer .footergallerybox ul.list li a:after { content: url(../img/common/arr1.svg); position: absolute; bottom: 20px; left: calc(100% - 60px); display: block; font-size: 0; border: 1px solid #fff; line-height: 1; width: 4px; height: 8px; padding: 14px 16px; border-radius: 50%; transition: 0.6s; }
#footer .footergallerybox ul.list li a:hover:after { content: url(../img/common/arr1_b.svg);background: #fff; color: #0d0d0d; }
#footer .footergallerybox ul.list li a:hover img { opacity: 0.5; transform: scale(1.05); }
@media screen and (max-width: 1280px) {
	#footer .footergallerybox ul.list li { width: calc(100% / 4); height: 25vw; }
	*::-ms-backdrop, #footer .footergallerybox ul.list li { width: 25%; height: 25vw; } /* IE11 */
}
@media screen and (max-width: 1040px) {
	#footer .footergallerybox ul.list li { width: calc(100% / 3); height: 33.3vw; }
	*::-ms-backdrop, #footer .footergallerybox ul.list li { width: 33.33%; height: 33.3vw; } /* IE11 */
}
@media screen and (max-width: 767px) {
	#footer .footergallerybox ul.list li { width: 100%; height: 100%; }
	#footer .footergallerybox ul.list li a { height: auto; pointer-events: none; }
	#footer .footergallerybox ul.list li a:after { display: none; }
}
@media screen and (max-width: 639px) {
}
@media screen and (max-width: 500px) {
}