@charset "utf-8";
body{ background: #222; height: 100vh; overflow: hidden;}
body.opBody2{ height: auto;}
html, body{ overflow-y: visible !important; overflow-x: hidden !important;}
.overray{ width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: -1; pointer-events: none; background: url("../img/mv.jpg") 50% 50% no-repeat; background-size: cover;}
.jpn {font-family: "Dela Gothic One", sans-serif; font-weight: 400; font-style: normal;}
.jpn2 { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 300; font-style: normal;}
.jpn3 { font-family: "Stick", sans-serif; font-weight: 400; font-style: normal;}

article, 
article .section { width: 100%; display: flex; flex-direction: column; align-items: center; position: relative;}
article .inner{ width: 94%; max-width: 800px; margin: 0 2%;}
article .warpBox { width: 100%; display: block; position: relative; z-index: 1;}
/**/
.title-image{ width: 100%; height: 100%; position: fixed; z-index: 10000000000000000000011111111; display: flex; justify-content: center; align-items: center; background: #0e0e19; transition: 0.6s; pointer-events: none;}
.title-image img{ width: auto; max-width: 90%; height: auto; max-height: 80%; transition: 0.6s;}
.opBody2 .title-image{opacity: 0;}
.opBody2 .title-image img{ margin-left: 20vw;}

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

-----------------------------------*/
#main1 { background: url("../img/img0.jpg") 50% 50% no-repeat; background-size: cover; position: relative; padding-bottom: 10px;}
#main1::before{ width: 100%; height: 100%; display: block; position: absolute; left: 0; top: 0; z-index: 1;content: ""; background: rgba(0,17,9,.95); transition:3.6s 2.0s; pointer-events: none;}
.opBody2 #main1::before{ opacity: 0;}

#main1 .bottomline{ width: 100%; height: 10px; position: absolute; left: 0; bottom: 0; background:rgba(10,10,10,1); transition: 1.4s;}
#main1 .bottomline.setView{ background:rgba(0,255,108,.5); box-shadow: 0 0 10px rgba(0,255,108,.8);}

#main1 .logo1{ display: block; text-align: center; height: 60px; margin: 20px 0 0; position: relative; z-index: 1000000000;}
#main1 .logo1 img{  height: 100%; width: auto;}
/**/
#main1 .inner{ display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
#main1 h1{ color: #fff; font-size: 44px; text-align: center; padding:15px 20px 30px; margin-top: 40px; animation: text-shadow1 3s infinite alternate; position: relative; border: solid 5px rgba(255,255,255,.2); transition:1.0s 2.0s; border-radius: 16px; z-index: 1; display: flex; flex-direction: column; align-items: center; }

#main1 h1 b{ color: #fff; font-size: 40px; text-align: center; padding:0 5px 30px; margin-bottom: 10px; animation: text-shadow1 3s infinite alternate; position: relative; border-bottom: solid 5px rgba(255,255,255,.05); transition:1.0s 2.0s; border-radius: 0px; z-index: 1;}

#main1 h1 span{ display: block; width: 100%; height: 100%; position: absolute; left: 0; bottom: 0; z-index: 10000; border-radius: 16px; background: none; transition:0.8s 2.8s; animation: box-shadow1 30s infinite alternate; opacity: 0; font-weight: 200 !important; letter-spacing: 2px;}

#main1 h1 span::after, 
#main1 h1 span::before{ content: ""; width: 100%; height: 100%; position: absolute; left: 0; bottom: 0; z-index: 10000; border-radius: 16px; box-shadow: 0 0 12px rgba(0,255,108,1) inset; }

#main1 h1 span{ display: block; width: 100%; height: 100%; position: absolute; left: 0; bottom: 0; z-index: 10000; border-radius: 16px; background: none; transition:0.8s 2.8s; animation: box-shadow1 30s infinite alternate; opacity: 0; font-weight: 200 !important; letter-spacing: 2px;}

#main1 h1 b::after{ content: ""; display: block; width: 100%; height: 5px; position: absolute; left: 0; bottom: 0; z-index: 10000; transition:0.8s 2.8s; animation: box-shadow1 30s infinite alternate; opacity: 0; font-weight: 200 !important; letter-spacing: 2px;}

#main1 h1 b::before{ content: ""; display: block; width: 100%; height: 5px; position: absolute; left: 0; bottom: 0; z-index: 10000; box-shadow: 0 0 12px rgba(0,255,108,1) inset; transition:0.8s 2.8s; opacity: 0;}

.opBody2 #main1 h1{ border: solid 5px rgba(255,255,255,.0);}
.opBody2 #main1 h1 b::before, 
.opBody2 #main1 h1 b::after{ opacity: 1;}
.opBody2 #main1 h1 span{ opacity: 1;}

@keyframes text-shadow1 {
100% { text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 9px #fff, 0 0 12px rgba(0,255,108,.4), 0 0 18px rgba(0,255,108,.4), 0 0 22px rgba(0,255,108,.4), 0 0 30px rgba(0,255,108,.4), 0 0 40px rgba(0,255,108,.4);}
90%  { text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff, 0 0 8px rgba(0,255,108,.0), 0 0 12px rgba(0,255,108,.0), 0 0 14px rgba(0,255,108,.0), 0 0 18px rgba(0,255,108,.0), 0 0 20px rgba(0,255,108,.0);}
85%  { text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 9px #fff, 0 0 12px rgba(0,255,108,.4), 0 0 18px rgba(0,255,108,.4), 0 0 22px rgba(0,255,108,.4), 0 0 30px rgba(0,255,108,.4), 0 0 40px rgba(0,255,108,.4);}
68%  { text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff, 0 0 8px rgba(0,255,108,.0), 0 0 12px rgba(0,255,108,.0), 0 0 14px rgba(0,255,108,.0), 0 0 18px rgba(0,255,108,.0), 0 0 20px rgba(0,255,108,.0);}
59%  { text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 9px #fff, 0 0 12px rgba(0,255,108,.4), 0 0 18px rgba(0,255,108,.4), 0 0 22px rgba(0,255,108,.4), 0 0 30px rgba(0,255,108,.4), 0 0 40px rgba(0,255,108,.4);}
0%   { text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #fff, 0 0 8px rgba(0,255,108,.7), 0 0 12px rgba(0,255,108,.7), 0 0 14px rgba(0,255,108,.7), 0 0 18px rgba(0,255,108,.7), 0 0 20px rgba(0,255,108,.7);}
}
@keyframes box-shadow1 {
100% { box-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 4px #fff, 0 0 7px rgba(0,255,108,.4), 0 0 9px rgba(0,255,108,.4), 0 0 13px rgba(0,255,108,.4), 0 0 14px rgba(0,255,108,.4), 0 0 15px rgba(0,255,108,.4);
	   box-shadow: 0 0 1px #fff inset, 0 0 2px #fff inset, 0 0 4px #fff inset, 0 0 7px rgba(0,255,108,.4) inset, 0 0 9px rgba(0,255,108,.4) inset, 0 0 13px rgba(0,255,108,.4) inset inset, 0 0 14px rgba(0,255,108,.4) inset, 0 0 15px rgba(0,255,108,.4) inset;}
90%  { box-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px #fff, 0 0 5px rgba(0,255,108,.0), 0 0 7px rgba(0,255,108,.0), 0 0 10px rgba(0,255,108,.0), 0 0 11px rgba(0,255,108,.0), 0 0 13px rgba(0,255,108,.0);
	   box-shadow: 0 0 1px #fff inset, 0 0 5px #fff inset, 0 0 5px #fff inset, 0 0 7px rgba(0,255,108,.4) inset, 0 0 10px rgba(0,255,108,.4) inset, 0 0 13px rgba(0,255,108,.4) inset inset, 0 0 14px rgba(0,255,108,.4) inset, 0 0 15px rgba(0,255,108,.4) inset;}

85%  { box-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 4px #fff, 0 0 7px rgba(0,255,108,.4), 0 0 9px rgba(0,255,108,.4), 0 0 13px rgba(0,255,108,.4), 0 0 14px rgba(0,255,108,.4), 0 0 15px rgba(0,255,108,.4);}
68%  { box-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px #fff, 0 0 5px rgba(0,255,108,.0), 0 0 7px rgba(0,255,108,.0), 0 0 10px rgba(0,255,108,.0), 0 0 11px rgba(0,255,108,.0), 0 0 13px rgba(0,255,108,.0);}
59%  { box-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 4px #fff, 0 0 7px rgba(0,255,108,.4), 0 0 9px rgba(0,255,108,.4), 0 0 13px rgba(0,255,108,.4), 0 0 14px rgba(0,255,108,.4), 0 0 15px rgba(0,255,108,.4);}
0%   { box-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 5px #fff, 0 0 5px rgba(0,255,108,.7), 0 0 7px rgba(0,255,108,.7), 0 0 10px rgba(0,255,108,.7), 0 0 11px rgba(0,255,108,.7), 0 0 13px rgba(0,255,108,.7);}
}

/**/
#main1 .txt1{ display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 0 100px;}
#main1 .txt1 > span{ overflow: hidden; display: block; text-align: center; line-height: 1em; margin: 12px 0; text-shadow: 0 0px 3px #fff; position: relative;}
#main1 .txt1 > span::after { background: #000; position: absolute; bottom: 0; left: 0; content: ''; display: block; right: 0; top: 0; transform: translate(101%, 0); z-index: 1;}
#main1 .txt1 > span.setView::after { animation: mask-bg 1.2s cubic-bezier(0.8, 0, 0.170, 1);}
#main1 .txt1 > span br{ display: none;}

@keyframes mask-bg {
0% { transform: translate(-100%, 0);}
40%, 60% {transform: translate(0, 0%);}
100% { transform: translate(101%, 0);}
}
#main1 .txt1 > span span{ font-size: 30px; color:#fff; font-weight: 300; opacity: 0; transition: 0.1s 0.8s; z-index: 100; text-shadow:0 0 6px rgba(0,255,108,1);}
#main1 .txt1 > span.setView span{ opacity: 1;}


@media screen and (max-width:800px) {
#main1 { overflow: hidden;}
#main1 .txt1 > span br{ display: block;}
}
@media screen and (max-width:700px) {
#main1 { overflow: hidden;}
#main1 .title-inner{ flex-direction: row; height: 80vh; min-height: 400px; align-items: center; justify-content: center;}
#main1 h1{ font-size: 7.0vw; padding:5vh 20px 8vh; margin-top: 0; margin-bottom: 40px;}
#main1 h1 b{ font-size: 9.5vw; font-weight: 500;}

#main1 .txt1{ padding: 0px 0 120px;}
#main1 .txt1 > span span{ font-size: 5.4vw;}

	
	
}















/*----------------------
#main2
-----------------------*/
#main2{ position: relative; z-index: 10000; padding-top: 60px;}
#main2 .inner{ min-height: 200px; }
#main2 .list{ width: 100%; max-width: 800px; height: 155px; display: flex; justify-content: space-between; top: -100px;}
/**/
article.main1 #main2 .list{ position: sticky; top: 0;}
article.main2 #main2 .list, 
article.main3 #main2 .list, 
article.main4 #main2 .list, 
article.main5 #main2 .list, 
article.main6 #main2 .list, 
article.main7 #main2 .list, 
article.main8 #main2 .list, 
article.main9 #main2 .list, 
article.main10 #main2 .list{ position: fixed; top: 20px; left: 50%; margin-left: -400px;}

article.main11 #main2 , 
article.main12 #main2 , 
article.main13 #main2 , 
article.main14 #main2 , 
article.main15 #main2 ,
article.main11 #main2 .inner, 
article.main12 #main2 .inner, 
article.main13 #main2 .inner, 
article.main14 #main2 .inner, 
article.main15 #main2 .inner{ position: static !important;}

article.main11 #main2 .list, 
article.main12 #main2 .list, 
article.main13 #main2 .list, 
article.main14 #main2 .list, 
article.main15 #main2 .list{ position: absolute; top: calc(100% - 200px); left: 50%; margin-left: -400px;}

@media screen and (max-width:852px) {
article.main2 #main2 .list, 
article.main3 #main2 .list, 
article.main4 #main2 .list, 
article.main5 #main2 .list, 
article.main6 #main2 .list, 
article.main7 #main2 .list, 
article.main8 #main2 .list, 
article.main9 #main2 .list, 
article.main10 #main2 .list{ width: 94%; max-width: 94%; position: fixed; top: 20px; left:2%; margin-left:0;}
}
@media screen and (max-width:600px) {
	#main2 .list li{ width: 7%;}
}

/*-list-------*/
#main2 .list li{ width: 6%; height:150px; position: absolute; top: 0; display: flex; transition: 1.4s; z-index: 100; }
#main2 .list li .jp2{ width: 100%; height: 100%; display: flex; justify-content: flex-start; align-items: center; font-size: 14px; font-weight: bold; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; padding-top: 10px; background: rgba(0,0,0,.5); border-radius: 4px; transition:1.8s; color: #555;}

#main2 .list li.setView .jp2{ text-shadow:0 0 8px rgba(0,255,108,1); color: #fff; background: rgba(0,0,0,.9);}
#main2 .list li .jp2::after{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; border-radius: 4px; content: ""; transition: 1.8s 0.4s; border: solid 1px rgba(0,255,108,.1); text-shadow:0 0 8px rgba(0,255,108,0); opacity: 0; pointer-events: none; z-index: -1;}
#main2 .list li.setView .jp2::after{ animation: box-shadow2 30s infinite alternate; border: solid 1px rgba(0,255,108,.8); text-shadow:0 0 8px rgba(0,255,108,1); color: #fff; background: rgba(0,0,0,.9); opacity: 1;}

@keyframes box-shadow2 {
100% { box-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 8px rgba(0,255,108,.4), 0 0 10px rgba(0,255,108,.4), 0 0 14px rgba(0,255,108,.4);}
90%  { box-shadow: 0 0 1px #fff, 0 0 3px #fff, 0 0 5px rgba(0,255,108,.4), 0 0 6px rgba(0,255,108,.4), 0 0 9px rgba(0,255,108,.4);}
85%  { box-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 8px rgba(0,255,108,.4), 0 0 10px rgba(0,255,108,.4), 0 0 14px rgba(0,255,108,.4);}
68%  { box-shadow: 0 0 1px #fff, 0 0 3px #fff, 0 0 5px rgba(0,255,108,.4), 0 0 6px rgba(0,255,108,.4), 0 0 9px rgba(0,255,108,.4);}
59%  { box-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 8px rgba(0,255,108,.4), 0 0 10px rgba(0,255,108,.4), 0 0 14px rgba(0,255,108,.4);}
0%   { box-shadow: 0 0 1px #fff, 0 0 3px #fff, 0 0 5px rgba(0,255,108,.4), 0 0 6px rgba(0,255,108,.4), 0 0 9px rgba(0,255,108,.4);}
}
/**/
#main2 .list li .tips{ width: 240%; position: absolute; left: -70%; bottom: 90%; background:#008344; padding: 4px; border-radius: 4px; font-size: 10px; line-height: 1.4em; color: #fff;  font-weight: 300; letter-spacing: 0; justify-content: center; align-items: center; opacity: 0; transition: 0.8s; pointer-events: none; display: none;}
#main2 .list li:hover .tips{ bottom: 110%; opacity: 1;}
.main1 #main2 .list li .tips, 
.main2 #main2 .list li .tips{ display: flex;}


/**/
#main2 .list li.team1{ left: 0;}
#main2 .list li.team2{ left: 13.42857143%;}
#main2 .list li.team3{ left: 26.85714286%;}
#main2 .list li.team4{ left: 40.28571429%;}
#main2 .list li.team5{ right: 40.28571429%;}
#main2 .list li.team6{ right: 26.85714286%;}
#main2 .list li.team7{ right: 13.42857143%;}
#main2 .list li.team8{ right: 0;}

/**退場**/
article.main4 .list li.out2, 
article.main5 .list li.out2, 
article.main6 .list li.out2, 
article.main7 .list li.out2, 
article.main8 .list li.out2, 
article.main9 .list li.out2,
article.main10 .list li.out2, 
article.main11 .list li.out2, 
article.main12 .list li.out2, 
article.main13 .list li.out2, 
article.main14 .list li.out2, 
article.main15 .list li.out2{ color: #ccc !important;  border: solid 1px #ccc !important; top: -200px !important; opacity: 0;} 
article.main6 .list li.out3, 
article.main7 .list li.out3, 
article.main8 .list li.out3, 
article.main9 .list li.out3, 
article.main10 .list li.out3, 
article.main11 .list li.out3, 
article.main12 .list li.out3, 
article.main13 .list li.out3, 
article.main14 .list li.out3, 
article.main15 .list li.out3{ color: #ccc !important;  border: solid 1px #ccc !important; top: -200px !important; opacity: 0;} 
article.main9 .list li.out4, 
article.main10 .list li.out4, 
article.main11 .list li.out4, 
article.main12 .list li.out4, 
article.main13 .list li.out4, 
article.main14 .list li.out4, 
article.main15 .list li.out4{ color: #ccc !important;  border: solid 1px #ccc !important; top: -200px !important; opacity: 0;} 


/*広報*/
article.main4 #main2 .list li.team1, 
article.main5 #main2 .list li.team1{ left:6.4%;}
article.main6 #main2 .list li.team1, 
article.main7 #main2 .list li.team1, 
article.main8 #main2 .list li.team1, 
article.main9 #main2 .list li.team1, 
article.main10 #main2 .list li.team1{ left:19%;}


/*労務*/
article.main4 #main2 .list li.team3,
article.main5 #main2 .list li.team3, 
article.main6 #main2 .list li.team3{ left:33.4%;}


/*人事*/
article.main4 #main2 .list li.team6,
article.main5 #main2 .list li.team6{ right:33.4%;}
article.main6 #main2 .list li.team6, 
article.main7 #main2 .list li.team6{ right:19%;}
article.main8 #main2 .list li.team6, 
article.main9 #main2 .list li.team6, 
article.main10 #main2 .list li.team6, 
article.main11 #main2 .list li.team6, 
article.main12 #main2 .list li.team6, 
article.main13 #main2 .list li.team6, 
article.main14 #main2 .list li.team6, 
article.main15 #main2 .list li.team6{ right:47%;}

/*福乃*/
article.main4 #main2 .list li.team8,
article.main5 #main2 .list li.team8, 
article.main6 #main2 .list li.team8{ right:6.4%;}




/*----------------------
#main3
-----------------------*/
#main3{ position: relative; z-index: 20;}
#main3 .inner{}




/*----------------------
#main4
-----------------------*/
#main4{ position: relative; z-index: 19;}

/*----------------------
#main5
-----------------------*/
#main5{ position: relative; z-index: 18;}

/*----------------------
#main6
-----------------------*/
#main6{ position: relative; z-index: 17;}

/*----------------------
#main9
-----------------------*/
#main9{ position: relative; z-index: 10;}

/*----------------------
#main10
-----------------------*/
#main10{ position: relative; z-index: 100;}
/*----------------------
#main11
-----------------------*/
#main11{ position: relative; z-index: 9;}
/*----------------------
#main12
-----------------------*/
#main12{ position: relative; z-index: 110;}
#main12 .win { width: 100%; height: 140px; display: flex; justify-content: center; align-items: center; position: relative; z-index: 100000;}
#main12 .win img { width: auto; max-width: none; height: 100%; display: block;}

#main12 .congratulations { width: 100%; height: auto; position: relative; z-index: 10000; margin-top: -20px; clip-path: inset(0 100% 0 0); transition: 1.8s; box-shadow: 0 4px 14px rgba(0,0,0,.2);}
#main12 .congratulations img{ width: 80%; height: auto; margin: 0 10%; display: block;}
#main12 .congratulations.setView{ clip-path: inset(0 0% 0 0); }



#main12 .endinfo{ display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 0 100px;}

#main12 .endinfo > span{ overflow: hidden; display: block; text-align: center; line-height: 1em; margin: 12px 0; text-shadow: 0 0px 3px #fff; position: relative;}

#main12 .endinfo > span::after { background: #000; position: absolute; bottom: 0; left: 0; content: ''; display: block; right: 0; top: 0; transform: translate(101%, 0); z-index: 1;}
#main12 .endinfo > span.setView::after { animation: mask-bg 1.2s cubic-bezier(0.8, 0, 0.170, 1);}
@keyframes mask-bg {
0% { transform: translate(-100%, 0);}
40%, 60% {transform: translate(0, 0%);}
100% { transform: translate(101%, 0);}
}

#main12 .endinfo > span span{ font-size: 20px; color:#fff; font-weight: 300; opacity: 0; transition: 0.1s 0.8s; z-index: 100; text-shadow:0 0 6px rgba(0,255,108,1);}
#main12 .endinfo > span.setView span{ opacity: 1;}

@media screen and (max-width: 600px) {
#main12 .endinfo{ padding: 60px 0 0;}
#main12 .endinfo > span { width: 100%;}
#main12 .endinfo > span span{ font-size: 3.8vw; text-align: left; display: flex;}
}







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

---------------------*/
#info { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 100px; overflow: hidden;}
#info .inner { width: 90%; background: #fff; animation: box-shadow2 30s infinite alternate; border: solid 3px rgba(0,220,120,.8);}
#info h2 span{ background: #10B145;}

#info h2 span{ text-shadow:0 0 8px rgba(0,255,108,1); color: #fff; background: rgba(0,0,0,.9);}
#info h2 span::after{ width: 99%; height: 98%; position: absolute; left: 0; top: 0; content: ""; animation: box-shadow2 30s infinite alternate; border: solid 1px rgba(0,255,108,.8); text-shadow:0 0 8px rgba(0,255,108,1); color: #fff; pointer-events: none; z-index: -1;}

#info h2, 
#info h2 span, 
#info h2 span::after{ border-radius: 4px;}

@media screen and (max-width: 600px) {
#info .inner {padding: 40px 15px 10px; margin: 0 5% 60px;}
}

#end *{ color: #fff;}

.pageTop a{ color: rgba(0,220,120,.8); box-shadow: 0 0 0 1px rgba(0,220,120,.8) inset;}
.pageTop a span, 
.pageTop a span::before{ color: rgba(0,220,120,.8);}













/*-------------------------
 modal
---------------------------*/

#modal-area { opacity: 0; pointer-events: none; z-index: 100001000010000; position:fixed; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; cursor: pointer;}
.fixed #modal-area { opacity: 1; pointer-events: all; z-index: 10000;}
#modal-area .back-div{ position:fixed; left: 0; top: 0; width: 100%; height: 100%; background:rgba(0,0,0,.85); z-index: 1;}

/*-----*/
#modal-area .modal-item{ display: none;}
.fixed #modal-area .modal-item.open{ display: flex;}
/**/
#modal-area .modal-item{ width: 90%; max-width: 700px; height: 90vh; background: #fff; padding: 30px; border-radius: 4px; justify-content: space-between; flex-wrap: wrap; border: solid 1px #ccc; box-shadow: 0 8px 14px rgba(0,0,0,.2); overflow-x: auto; z-index: 1000; position: relative;}
#modal-area .modal-item::-webkit-scrollbar {width: 8px;}
#modal-area .modal-item::-webkit-scrollbar-track { background-color:#ccc; border-radius:0px;}
#modal-area .modal-item::-webkit-scrollbar-thumb { background-color:#0D8F50; border-radius:0px; border-radius: 10px;}
/*btn*/
#modal-area .modal-item .close-btn{ width:50px; height: 50px; box-shadow: 0 0 0 50px #3E604B inset; display: flex; justify-content: center; align-items: center; border-radius: 100%; color: #fff; font-size: 30px; font-weight: bold; position: fixed; right: 50%; top: 6vh; margin-right: -340px; line-height: 1em; padding-bottom: 5px; transition: 0.5s; cursor: pointer;}
#modal-area .modal-item .close-btn:hover{ box-shadow: 0 0 0 4px #3E604B inset; color: #3E604B;}
/*txt*/
#modal-area .modal-item h2{ width: 100%; display: flex;flex-direction: column; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 15px;}
#modal-area .modal-item h2 span{ font-size: 16px; display: flex; justify-content: center; align-items: center; padding: 2px 10px; background: #222; color: #fff; border-radius: 30px;}
#modal-area .modal-item .image{ display: flex; flex-direction: column;}
#modal-area .modal-item .image img{ width: 100%; display: block; margin: 10px 0;}


@media screen and (max-width: 900px) {
#modal-area .modal-item{ margin-left: -7vw;}
#modal-area .modal-item .close-btn{ width:100px; height: 100px; border-radius: 0 0 0 20px; right: 5%; top: 5vh; margin: 0;}

#modal-area .modal-item.com{ margin-left: 0;}
#modal-area .modal-item.com .close-btn{ margin-right: -10px;}

}
@media screen and (max-width: 700px) {
#modal-area .modal-item{ margin-left: 0;  border: none; padding:70px 0 0;}
#modal-area .modal-item .close-btn { width: 90%; height: 50px; border-radius: 0; margin: 0;}
}







/*========================================================================================
modal-gallery
====================================================*/
#lastgallery{ width: 96%; margin: 0 2% 50px; display: flex; flex-direction: column; justify-content: center; align-items: center;}


#lastgallery h2{ color: rgba(0,255,108,1); font-size: 28px; text-align: center; padding:15px 20px; margin-bottom: 30px; animation: text-shadow1 3s infinite alternate; position: relative; border: solid 5px rgba(255,255,255,.2); transition:1.0s 2.0s; border-radius: 16px; z-index: 1; display: flex; flex-direction: column; align-items: center; }

#lastgallery h2 span{ display: block; width: 100%; height: 100%; position: absolute; left: 0; bottom: 0; z-index: 10000; border-radius: 16px; background: none; transition:0.8s 2.8s; animation: box-shadow1 30s infinite alternate; opacity: 0; font-weight: 200 !important; letter-spacing: 2px;}

#lastgallery h2 span::after, 
#lastgallery h2 span::before{ content: ""; width: 100%; height: 100%; position: absolute; left: 0; bottom: 0; z-index: 10000; border-radius: 16px; box-shadow: 0 0 12px rgba(0,255,108,1) inset; }

#lastgallery h2 span{ display: block; width: 100%; height: 100%; position: absolute; left: 0; bottom: 0; z-index: 10000; border-radius: 16px; background: none; transition:0.8s 2.8s; animation: box-shadow1 30s infinite alternate; opacity: 0; font-weight: 200 !important; letter-spacing: 2px;}

#lastgallery h2.setView{ border: solid 5px rgba(255,255,255,.0);}
#lastgallery h2.setView, 
#lastgallery h2.setView span{ opacity: 1 !important;}


#lastgallery .modal-gallery ul li{ background: #000;}
#lastgallery .modal-gallery ul li img{ transition: 0.4s; opacity: 0.5;}
.modalon #lastgallery .modal-gallery ul li img, 
#lastgallery .modal-gallery ul li:hover img{ opacity: 1 !important;}











.modalon{ overflow: hidden;}
.modalon *{ z-index:auto !important;}

/**/
.modal-gallery{ display: block;}
.modal-gallery ul{ display: flex; flex-direction: row; flex-wrap: wrap;}
.modal-gallery ul li { display: block; overflow: hidden; margin:0.1%; background: #000; cursor: pointer;}
.edit-modal-gallery li{ background: none !important;}/*管理画面用*/
.modalon .modal-gallery ul li{ background: none;}
.modal-gallery ul li img{ width: 100%; height: 100%; object-fit:cover; transition: 0.2s;}
.modal-gallery ul li:hover img{ opacity: 0.7;}
.modalon .modal-gallery ul li:hover img{ opacity: 1;}
.modal-gallery.img-row1 ul li{ width: 99.8%;}
.modal-gallery.img-row2 ul li{ width: 49.8%;}
.modal-gallery.img-row3 ul li{ width: 33.13%;}
.modal-gallery.img-row4 ul li{ width: 24.8%;}
.modal-gallery.img-row5 ul li{ width: 19.8%;}
.modal-gallery.img-row6 ul li{ width: 16.4%;}
/*　開いた時　*/
.modal-gallery.current{ width: 100%; height: 100%; position: fixed; left: 0; top: 0; display: flex; flex-direction: row; align-content: center; align-items: center; justify-content: center;}
.modal-gallery.current{ z-index: 9999999 !important;}
.modal-gallery.current ul{ width: 80%; height: 80%; display: flex; margin: 10%; align-content: center; align-items: center; justify-content: center; position: relative; z-index: 100 !important;}
.modal-gallery.current ul li{ width: 100% !important; height: 100%; display: none; align-content: center; align-items: center; justify-content: center;}
.modal-gallery.current ul li.viewImg{  display: flex;}
.modal-gallery.current ul li.viewImg img { width: 100%; height: 100%; max-width: 100%; object-fit: contain;}
/*　オーバーレイ　*/
.modal-gallery .modal-gallery-overray{ display: none;}
.modal-gallery.current .modal-gallery-overray.partsON{ display: block; width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 1; background: rgba(0,0,0,.8); transition: 0.2s; cursor: pointer;}
.modalon .modal-gallery .modal-gallery-overray:hover{ background: rgba(0,0,0,.9);}

/*　ボタン　*/
.modal-gallery .modal-btn-close, 
.modal-gallery .modal-btn-next, 
.modal-gallery .modal-btn-prev { display: none;}

.modal-gallery.current .modal-btn-close.partsON, 
.modal-gallery.current .modal-btn-next.partsON, 
.modal-gallery.current .modal-btn-prev.partsON { display: block; cursor: pointer;}

.modal-gallery .modal-btn-close{ width: 80px; height: 80px; position: fixed; right: 15px; top: 15px; border-radius: 6px; border: solid 1px #fff; z-index: 1000000 !important; transition: 0.2s;}
.modal-gallery .modal-btn-close::after, 
.modal-gallery .modal-btn-close::before{ content: ""; width: 50px; height: 2px; background: #fff; left: 15px; top: 48%; position: absolute; transition: 0.2s; cursor: pointer;}
.modal-gallery .modal-btn-close::after{ transform:rotate(45deg);} 
.modal-gallery .modal-btn-close::before{ transform:rotate(-45deg);}

.modal-gallery .modal-btn-close.hover{ background: rgba(255,255,255,.2);}
.modal-gallery .modal-btn-close.hover:hover{ background: rgba(0,0,0,.4);}
.modal-gallery .modal-btn-close.hover::after, 
.modal-gallery .modal-btn-close.hover::before { width: 30px; left: 25px;} 
.modal-gallery-height{}
/**/
.modal-gallery .modal-btn-next, 
.modal-gallery .modal-btn-prev{ width: 40%; height: 80%; position:absolute; top: 10%; z-index: 100 !important; }
.modal-gallery .modal-btn-next{ right: 10%;}
.modal-gallery .modal-btn-prev{ left: 10%;}
.modal-gallery .modal-btn-next::after, 
.modal-gallery .modal-btn-next::before, 
.modal-gallery .modal-btn-prev::after, 
.modal-gallery .modal-btn-prev::before{ width: 30px; height: 2px; content:""; background: #fff; position: absolute; top: 50%; opacity: 0.05; transition: 0.3s; cursor: pointer;}
.modal-gallery .modal-btn-next::after{ right: -35px; transform:rotate(45deg); margin-top: -10px;} 
.modal-gallery .modal-btn-next::before{ right: -35px; transform:rotate(-45deg); margin-top: 10px;} 
.modal-gallery .modal-btn-prev::after{ left: -35px; transform:rotate(-45deg); margin-top: -10px;} 
.modal-gallery .modal-btn-prev::before{ left: -35px; transform:rotate(45deg); margin-top: 10px;}
.modal-gallery .modal-btn-next:hover::after, 
.modal-gallery .modal-btn-next:hover::before{ right: -40px; opacity: 1;}
.modal-gallery .modal-btn-prev:hover::after, 
.modal-gallery .modal-btn-prev:hover::before{ left: -40px; opacity: 1;}





@media screen and (max-width: 800px) {
.modal-gallery.img-row6 ul li{width: 24.8% !important;}
.modalon .modal-gallery.img-row6 ul li{width: 100% !important;}
	.modal-gallery.current ul{ width: 100%; height: 100%; margin: 0;}
}
@media screen and (max-width: 600px) {
.modal-gallery.img-row6 ul li{width: 49.8% !important;}
.modalon .modal-gallery.img-row6 ul li{width: 100% !important;}
}