body{
position : relative;
width : 100%;
overflow-x : hidden;
}
@font-face {
font-family: 'honokaMaru';
src: url('https://lafcca.com/media/honoka_marugo.woff') format('woff')
}
*{
font-family:'honokaMaru';
color:#173329;
line-height:130%;
margin:0;
-ms-overflow-style: none;
scrollbar-width: none;
}
*::-webkit-scrollbar{
display: none;
}
iframe{
border:none;
width:100%;
}

h2{
margin:1em 0 0 0;
font-size:32px;
}

h3{
margin:0;
font-size:20px;
}
ul{
list-style:none;
padding:0;
}
ol{
padding-inline-start:32px;
}

.cent{
display:block;
text-align:center;
}

/*|___+__|>=<|__+__|>=<|     ヘッダー   |>=<|__+__|>=<|__+___|*/
/*;;:::::;"*";:::::;"*"+================+"*";:::::;"*";:::::;;*/
/*; ";;;"     ";;;"     ";;;"      ";;;"     ";;;"     ";;;" ;*/

header{
position:fixed;
top:0;
left:0;
z-index:1200;
width:100vw;
height:48px;
background-color:#173329;
border-bottom:8px solid #7afcca;
}
#headmenu{
margin:8px auto 0;
width:96%;
height:40px;
max-width:1200px;
overflow:hidden;
}
.logoMini{
height:32px;
aspect-ratio:1;
border-radius:50%;
transition:2s;
}
.logoMini:hover{
transform: rotate(360deg);
}
h1{
font-size:32px;
float:left;
color:#fff;
}

/*|___+__|>=<|__+__|>=<|    フッター    |>=<|__+__|>=<|__+___|*/
/*;;:::::;"*";:::::;"*"+================+"*";:::::;"*";:::::;;*/
/*; ";;;"     ";;;"     ";;;"      ";;;"     ";;;"     ";;;" ;*/

footer{
margin:30px 0 0 0;
background-color:#173329;
width:100%;
position:absolute;
left:0;
clear:both;
}
footer div{
margin:2em auto 3vh;
width:96%;
max-width:1200px;
color:#fff;
overflow:hidden;
}
footer ul{
float:left;
margin:0 3em 0 0;
}
footer li{
font-size:14px;
margin:0 0 17px 0;
line-height:100%;
}
footer a{
color:#fff;
text-decoration:none;
}
footer p,footer span{
float:left;
width:100%;
color:#fff;
}
.ib{
display:inline-block;
}

#logo{
float:right;
width:200px;
aspect-ratio:640/284;
margin:0 0 17 0;
}
#right{
text-align:right;
}

/*|___+__|>=<|__+__|>=<|   コンテンツ   |>=<|__+__|>=<|__+___|*/
/*;;:::::;"*";:::::;"*"+================+"*";:::::;"*";:::::;;*/
/*; ";;;"     ";;;"     ";;;"      ";;;"     ";;;"     ";;;" ;*/


.content{
margin:64px auto 0;
width:96%;
max-width:1200px;
position: relative;
clear:both;
}

/*|___+__|>=<|__+__|>=<|     トップ     |>=<|__+__|>=<|__+___|*/
/*;;:::::;"*";:::::;"*"+================+"*";:::::;"*";:::::;;*/
/*; ";;;"     ";;;"     ";;;"      ";;;"     ";;;"     ";;;" ;*/


#slide{
top:52px;
left:50%;
transform:translateX(-50%);
height:100vh;
height:calc(100vh - 52px);
width:1200px;
position:fixed;
z-index:-1024;
object-fit:cover;
}

#slideBG{
top:0;
left:0%;
width:100vw;
aspect-ratio:4/3;
position:fixed;
z-index:-1025;
filter: blur(20px);
}

#copy{
height:100%;
width:100%;
margin: -64px 0 0 0;
position: relative; 
}
#copy p{
font-size:min(48px,7vw);
background-color:rgba(255,255,255,0.8);
width:100%;
padding:1em 0;
text-align:center;
margin:auto;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}

#top h2{
margin:0 0 8px 0;
text-align:center;
}
#top hr{
margin:2em auto;
width:80%
}

.topInfo{
width:100%;
background-color:rgba(255,255,255,0.8);
padding:4em 0 ;
clear:both;
overflow:hidden;
}
.topInfo iframe{
margin:0 auto;
display:block;
width:80%
}
#news{
height:max(200px,40%);
}
.newMovie{
width:min(100%,960px);
margin:0 auto;
}

#top .movie{
width:310px;
float:left;
margin:0 5px;
text-align:center;
}
.movieCell{
aspect-ratio:16/9;
}

/*|___+__|>=<|__+__|>=<|    アバウト    |>=<|__+__|>=<|__+___|*/
/*;;:::::;"*";:::::;"*"+================+"*";:::::;"*";:::::;;*/
/*; ";;;"     ";;;"     ";;;"      ";;;"     ";;;"     ";;;" ;*/

.groupInfo{
width:60%;
min-width:600px;
max-width:100%;
margin:-1em 0 2em;
}
.groupInfo tr{
height:32px;
}

.groupInfo td, .groupInfo th{
border-bottom:solid 2px #173329;
font-size:18px;
padding:18px 4px;
vertical-align:top;
}
.groupInfo th{
text-align:left;
width:7em;
}

#about p,#about table, #about ul{
padding-inline-start:32px;
list-style:square;
}



/*|___+__|>=<|__+__|>=<|    ワークス    |>=<|__+__|>=<|__+___|*/
/*;;:::::;"*";:::::;"*"+================+"*";:::::;"*";:::::;;*/
/*; ";;;"     ";;;"     ";;;"      ";;;"     ";;;"     ";;;" ;*/

#submenu{
margin:1vh auto 0;
text-align:right;
width:calc(94% + 16px);
}
.submenu{
font-size:75%;
display:inline-block;
margin:0 4px 0 0;
color:#173329;
height:2em;
width:5em;
padding:0.25em 0.25em 0;
border-radius:1vh 1vh 0 0;
text-align:right;
filter: brightness(60%);
background-color:#fff;
border:4px solid;
border-bottom:none;
}
#all,#personal{
border-color:#7affca;
}
#unicorn{
border-color:#e999f5;
}
#wolfberry{
border-color:#7f00ff;
}
.submenu:hover{
filter: brightness(100%);
}
.worksActive{
filter: brightness(100%);
}

#works{
background-color:#7afcca;
margin:0;
padding:1em 0;
}
.workContent{
background-color:rgba(255,255,255,0.85);
width:94%;
margin:0 auto 1em;
padding:0.5em;
overflow:hidden;
}
.thumbnail{
width:max(300px , 40vmin);
height:auto;
float:left;
}
.credit{
margin:1em 0 0 0;
border-top:solid 1px #173329;
}
.credit td{
vertical-align:top;
font-size:min(0.8em,2.5vw);
}

.hide{
display:none;
}

/*|___+__|>=<|__+__|>=<|  プロフィール  |>=<|__+__|>=<|__+___|*/
/*;;:::::;"*";:::::;"*"+================+"*";:::::;"*";:::::;;*/
/*; ";;;"     ";;;"     ";;;"      ";;;"     ";;;"     ";;;" ;*/

#bg{
left: 50%;
height:100%;
width:96%;
max-width:1200px;
position:fixed;
z-index:-1200;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}
.illust{
position:absolute;
top:64;
left: -200vmax;
width:100vh;
aspect-ratio:1;
max-width:800;
z-index:-1200;
animation-name: in;
animation-fill-mode:forwards;
animation-duration:1500ms;
animation-iteration-count:1;
animation-timing-function:ease;
animation-delay: 0s;
animation-direction:normal;
}
@keyframes in{
  0% {
    left: -200vmax;
  }

  100% {
    left:-17.5vh;
  }
}
.nameArea{
width:100%;
margin:0 0 5vh 0;
padding:2vh 0 0 0;
}
.nameArea h2{
display:inline-block;
margin:0 4px 0 0;
font-size:32px;
}
.nameArea p{
display:inline-block;
margin:-4px 1.5em 0.25em 0;
}
.nameArea hr{
display:inline-block;
margin:0 0 0 0;
width:100%;
border:double 2px #1afcca;
display:inline-block;
}
.textArea{
border:solid 2px #1afcca;
padding:1em;
border-radius:2em;
background-color:rgba(255,255,255,0.8);
}
.textArea li{
margin:0 0 0.75em 0.75em;
}
.textArea h2{
margin:0;
}
.textArea .scl{
max-height:100%;
overflow:auto;
-ms-overflow-style: none;
scrollbar-width: none;
}
.textArea .scl::-webkit-scrollbar{
display: none;
}
.prof{
opacity:0;
animation-name: fade;
animation-fill-mode:forwards;
animation-duration:1000ms;
animation-iteration-count:1;
animation-timing-function:ease;
animation-delay: 0s;
animation-direction:normal;
}

.career{
opacity:0;
animation-name: fade;
animation-fill-mode:forwards;
animation-duration:1000ms;
animation-iteration-count:1;
animation-timing-function:ease;
animation-delay: 500ms;
animation-direction:normal;
}

.link{
opacity:0;
animation-name: fade;
animation-fill-mode:forwards;
animation-duration:1000ms;
animation-iteration-count:1;
animation-timing-function:ease;
animation-delay: 1000ms;
animation-direction:normal;
}

@keyframes fade{
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
.pfIcon{
height:16px;
aspect-ratio:1;
}

/*|___+__|>=<|__+__|>=<|   メンバーズ   |>=<|__+__|>=<|__+___|*/
/*;;:::::;"*";:::::;"*"+================+"*";:::::;"*";:::::;;*/
/*; ";;;"     ";;;"    "";;;"";;;;"";;;""    ";;;"     ";;;" ;*/

.col{
overflow: hidden;
}
.iconFrame{
float: left;
width: 162px;
height:189.2px;
height: calc(170px + 1.2em);
margin: 8px 8px 0 0;
position:relative;
}
.iconImage{
position:absolute;
top:0;
left:0;
z-index:16;
width:100%;
height:auto;
border-radius:50%;
transition:0.25s;
}

.iconImage:hover{
opacity:0;
}

.profText{
position:absolute;
top:0px;
left:0;
z-index:8;
width: 156px;
height: 116px;
text-align:center;
border-radius:50%;
border: 3px solid #173329;
padding:40px 0 0 0;
background-image:url(https://lafcca.com/media/icon/void.jpg);
background-size: cover; 
}
.lafcca .profText{
border-color:#7affca;
}
.UNICOrN .profText{
border-color:#e999f5;
}
.wolfberry .profText{
border-color:#7f00ff;
}
.support .profText{
border-color:#ff0000;
}
.name{
position:absolute;
top:164px;
left:0;
width:164;
text-align:center;
}

.job{
font-size:80%;
line-height:100%;
}
.w100{
width:100%;
margin:1em 0;
}

/*|___+__|>=<|__+__|>=<|   コンタクト   |>=<|__+__|>=<|__+___|*/
/*;;:::::;"*";:::::;"*"+================+"*";:::::;"*";:::::;;*/
/*; ";;;"     ";;;"     ";;;"      ";;;"     ";;;"     ";;;" ;*/

#contact h3{
margin: 1em 0 0 0;
}

#contact p,#contact ul{
padding-inline-start:32px;
list-style:square;
}

/*|___+__|>=<|__+__|>=<|    リンク    |>=<|__+__|>=<|__+___|*/
/*;;:::::;"*";:::::;"*"+================+"*";:::::;"*";:::::;;*/
/*; ";;;"     ";;;"     ";;;"      ";;;"     ";;;"     ";;;" ;*/

#links h3{
margin: 16px 0 0 0;
font-size:24px;
}

#links h4{
margin: 32px 0 0 0;
font-size:16px;
}

#links p,#links div,#links table{
padding-inline-start:32px;
list-style:square;
}

#links img{
height:64px;
aspect-ratio:1;
border-radius:50%;
}
#links table{
display:inline-block;
min-width:230px;
}

#links tr{
height:64px;
}

#link td{
height:64px;
}
/*|___+__|>=<|__+__|>=<|     ニュース   |>=<|__+__|>=<|__+___|*/
/*;;:::::;"*";:::::;"*"+================+"*";:::::;"*";:::::;;*/
/*; ";;;"     ";;;"     ";;;"      ";;;"     ";;;"     ";;;" ;*/

#news table{
width:100%;
border:none;
}

#news th{
text-align:left;
}

/*|___+__|>=<|__+__|>=<|レスポンシブ>880|>=<|__+__|>=<|__+___|*/
/*;;:::::;"*";:::::;"*"+================+"*";:::::;"*";:::::;;*/
/*; ";;;"     ";;;"     ";;;"      ";;;"     ";;;"     ";;;" ;*/


@media (min-aspect-ratio : 1){
#mainmenu{
text-align:right;
}
.menu{
display:inline-block;
margin:0 8px 0 0;
color:#173329;
height:40px;
background-color:#3d7f64;
width:5em;
padding:0.25vh 0.25em 0;
border-radius:8px 8px 0 0;
}
.active{
background-color:#7afcca;
}
.menu:hover{
background-color:#7afcca;
}
.logoMini{
float:right;
margin:0.6vh 0 0;
}
.profArea{
position:absolute;
width:67%;
right:0;
overflow:hidden;
aspect-ratio:1.5;
clear: both;
}
.prof,.link{
width:55%;
height:calc(50% - 4px - 3em);
float:left;
margin:0 0 2em 0;
}
.career{
width:30%;
height:calc(100% - 4px - 2em);
float:right;
}
}

/*|___+__|>=<|__+__|>=<|レスポンシブ<879|>=<|__+__|>=<|__+___|*/
/*;;:::::;"*";:::::;"*"+================+"*";:::::;"*";:::::;;*/
/*; ";;;"     ";;;"     ";;;"      ";;;"     ";;;"     ";;;" ;*/

@media (max-aspect-ratio : 1){
#mainmenu{
position:fixed;
z-index:512;
top:-10em;
transform:scale(1, 0);
left:0;
width:100%;
transition:1s;
}
.menu{
width:100%;
padding:1em 0 1em 1em;
background-color:#7afcca;
border-bottom:0.125em solid #173329;
}
.menu:hover{
background-color:#173329;
color:#7afcca;
}
.logoMini{
position:absolute;
top:1vh;
right:1vh;
}
#profArea{
margin:60vh auto 0;
height:auto;
width:95%;
}
.prof,.career,.link{
margin:8px 0 0 0;
width:calc(100% - 2em - 4px);
height:auto;
overflow:auto;
}
}