@charset "UTF-8";
/* CSS Document */

#ttl-area{
width: 100%;
height: 100%; 
background-color: rgba(0,0,0,0.3);
position: fixed;
z-index: 200;
animation: design-intro 1.2s ease 1.8s forwards;
pointer-events: none;
}
@keyframes design-intro {
0% {height: 100%; }
100% {height: 0%; }
}
#ttl-area .each-color{
width: 100%;
height: 100%; 
position: fixed;
animation: each-color 0.9s ease 1.5s forwards;
}
@keyframes each-color {
0% {height: 100%; }
100% {height: 0%; }
}
#ttl-group{
text-align: center;
color: #fff;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: design-intro-text 0.3s ease 1.8s forwards;
}
@keyframes design-intro-text {
0% {
opacity: 1;
filter:alpha(opacity=100);
display: block;
}
100% {
opacity: 0;
filter:alpha(opacity=0);
display: none;
}
}

#ttl-group h1{
font-weight: normal;
font-size: 15px;
border: 3px #fff solid;
display: inline;
padding: 10px 18px;
border-radius: 20px;
}
#ttl-group h2{
margin-top: 60px;
font-size: 36px;
line-height: 1.7;
}
#ttl-group p{
margin-top: 40px;
font-size: 13px;
color: #fff;
font-family: 'Montserrat', sans-serif;
font-weight: 500;
letter-spacing: 4px;
}
#ttl-group p span{
font-weight: 800;
}
#design-cont{
width: 100%;
height: 100%;
}

.pc-frame{
width: 1500px;
height: 660px;
background: url("../img/design/pc.png") no-repeat center top;
background-size: contain; 
position: absolute;
top: 48%;
left: 50%;
transform: translate(-50%, -50%);
}
.tab-btn-area{
position: fixed;
z-index: 10;
top:40px;
left: 50%;
transform: translateX(-50%);
padding: 0;
}
.tab-btn{
font-size: 13px;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
background: none;
border: none;
margin-right: 30px;
padding: 0 0 10 0;
letter-spacing: 2px;
transition: 0.3s ease-in-out;
border-bottom: 1px solid #fff;
}
.tab-btn:hover{
color: #69bdc2;
letter-spacing: 2px;
border-bottom: 1px solid #69bdc2;
}
.tab-btn:last-child{
margin-right: 0;
}

.design-img-area .design-img{
display: none;
margin-top: 32px;
border-radius:6px;
width: 1010px;
height: 568px;
margin-left: auto;
margin-right: auto;
overflow: scroll;
}
.design-img img{
width: 100%;
}

.comment-btn{
position: fixed;
right: 120px;
bottom: 80px;
z-index: 100;
transition: 0.4s ease-in-out;
}
.comment-btn p{
filter:alpha(opacity=0);
opacity: 0;
font-size: 11px;
margin-bottom: 0px;
text-align: center;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
letter-spacing: 3px;
transition: 0.2s ease-in;
}
.comment-btn:hover p{
filter:alpha(opacity=100);
opacity: 1;
margin-bottom: 20px;
}
.comment-btn .comment-icon{
width:100px;
height: auto;
background: none;
border: none;
cursor: pointer;
transition: 0.1s ease-in;
}
.comment-btn:hover .comment-icon{
transform: scale(1.2);
}

#design-cont #design-area .pc-frame{
transition: 0.4s ease-in-out;
}
#design-cont.design-comment #design-area .pc-frame{
left: -10%;
transform: translate(0%, -50%);
}


#design-cont #comment-area{
width: 0%;
height: 100%;
position: fixed;
z-index: 20;
right: 0;
transition: 0.4s ease-in-out;
}
#design-cont.design-comment #comment-area{
width:50%;
}
#design-cont #comment-area .inner{
filter:alpha(opacity=0);
opacity: 0;
transition: 0.25s ease-in-out 0.4s;
width: 60%;
height: 70%;
margin: 15% 20%; 
color: #fff;
overflow: scroll;
}
#design-cont.design-comment #comment-area .inner{
filter:alpha(opacity=100);
opacity: 1;
}
#comment-area .inner h2{
font-size: 36px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
}
#comment-area .inner h3{
font-size: 16px;
font-weight: normal;
margin-top: 10px;
margin-bottom: 50px;
}
#comment-area .inner h4{
font-size: 22px;
line-height: 1.6;
margin-bottom: 30px;
}
#comment-area .inner p{
color: #fff;
font-size: 14px;
margin-bottom: 80px;
}
#design-cont.design-comment .comment-btn{
right: 60px;
bottom: 60px;
}

/*　gif画像など　*/
#design-cont .img-area{
width: 100%;
max-width: 1000px;
margin: 0px auto;
padding: 120px 0px;
text-align: center;
}
#design-cont .img-area img,
#design-cont .img-area h2{
margin-bottom: 50px;
display: block;
margin-left: auto;
margin-right: auto;
}
#design-cont .img-area img{
margin-bottom: 100px;
}
#design-cont .img-area h2{
font-size:18px;
}
#design-cont .img-area p{
text-align: left;
margin-bottom: 80px;
}
#design-cont .img-area:last-child{
padding-bottom: 300px;
}

/*　各デザインカラー　*/
body#camp #ttl-area .each-color,
body#camp #comment-area{
background: linear-gradient(to bottom right, rgba(82, 214, 74, 0.94), rgba(38, 160, 29, 0.94));
}
body#cat #ttl-area .each-color,
body#cat #comment-area{
background: linear-gradient(to bottom right, rgba(233, 25, 25, 0.94), rgba(173, 1, 1, 0.94));
}
body#recruit01 #ttl-area .each-color,
body#recruit01 #comment-area{
background: linear-gradient(to bottom right, rgba(104, 161, 255, 0.94), rgba(41, 91, 222, 0.94));
}
body#rpg #ttl-area .each-color,
body#rpg #comment-area{
background: linear-gradient(to bottom right, rgba(0, 0, 0, 0.94), rgba(74, 65, 48, 0.94));
}
body#architect #ttl-area .each-color,
body#architect #comment-area{
background: linear-gradient(to bottom right, rgba(0, 0, 0, 0.94), rgba(70, 70, 70, 0.94));
}
body#farm #ttl-area .each-color,
body#farm #comment-area{
background: linear-gradient(to bottom right, rgba(233, 25, 25, 0.94), rgba(173, 1, 1, 0.94));
}
body#monster #ttl-area .each-color,
body#monster #comment-area{
background: linear-gradient(to bottom right, rgba(212, 0, 31, 0.94), rgba(255, 43, 83, 0.94));
}

body#stage #ttl-area .each-color,
body#stage #comment-area{
background: linear-gradient(to bottom right, rgba(246, 174, 68, 0.94), rgba(231, 118, 35, 0.94));
}