@charset "uft-8";

html{
    font-size:100%;
}

.header{
    height:100vh;
    position:relative;
}


.form-header{
    height:20vh;
    position:relative;
}

/* トップタイトル */
.logo{
    position:absolute;
    top:20px;
    left:20px;
    width:400px;
    height:200px;
    z-index:10;
}

.logo img{
    width:100%;
}

/* 背景 */
.back-bg{
    position:absolute;
    width:100%;
    height:90vh;
    background:#888;
    bottom:30px;
}

.back-bg img{
    width:100%;
    height:100%;
    object-fit: cover;
}

/* メニューアイコン */
.menu-icon{
    position:fixed;
    top:20px;
    right:30px;
    width:30px;
    height:30px;
    z-index:110;
}

.menu-icon-frame{
    position:relative;
    width:100%;
    height:100%;
    cursor: pointer;
}

.menu-icon-frame span{
    position:absolute;
    width:100%;
    height:4px;
    background: rgb(50,50,50);
    transition:.2s;
    box-shadow: 1px 1px 1px rgba(255,255,255,.5);
}

.menu-icon-frame span:first-child{
    top:0;
}

.menu-icon-frame span:nth-child(2){
    top:42%;
}

.menu-icon-frame span:last-child{
    bottom:0%;
}

.menu-hover span:first-child{
    position:absolute;
    background:rgb(255,255,255);
    transform:rotate(225deg);
    top:42%;
}

.menu-hover span:nth-child(2){
    display:none;
}

.menu-hover span:last-child{
    position:absolute;
    background:rgb(255,255,255);
    transform:rotate(-225deg);
    top:42%;
}


/* ナビメニュー */
.top-nav{
    position:fixed;
    top:0;
    right:-400px;
    border-bottom: 100vh solid rgb(0,0,0);
	border-left: 150px solid transparent;
	height: 0;
	width: 400px;
    z-index:100;
    transition:.4s;
}

.open-nav.top-nav{
    right:0;
}

.top-nav ul{
    margin-top:100px;
    margin-left:30px;
    list-style: none;
}

.top-nav li{
    margin:50px 0;
    color:rgb(255,255,255);
}

.top-nav li::before{
    white-space: pre;
    font-size:.8rem;
}

.top-nav li:nth-child(2){
    transform:translateX(-4%);
}

.top-nav li:nth-child(2)::before{
    content:'TOP\A';
}

.top-nav li:nth-child(3){
    transform:translateX(-4%);
}

.top-nav li:nth-child(3)::before{
    content:'WORKS\A';
}

.top-nav li:nth-child(4){
    transform:translateX(-8%);
}

.top-nav li:nth-child(4)::before{
    content:'SCHOOL\A';
}

.top-nav li:nth-child(5){
    transform:translateX(-12%);
}

.top-nav li:nth-child(5)::before{
    content:'CONTACT\A';
}

.top-nav a{
    color:rgb(255,255,255);
    text-decoration: none;
    font-size:1.2rem;
    font-weight: bold;
    transition:transform 0.6s !important;
}

.top-nav a:hover{
    display: block;
    color:rgb(240, 202, 13);
    transform: translateX(-1%);
    transition:transform 0.6s !important;
}

/* トップへ戻るメニュー */
.to-top{
    position:fixed;
    right:10px;
    bottom:10px;
    width:50px;
    height:50px;
    background: rgb(240,240,240);
    color:rgb(0,0,0);
    z-index:110;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 5px;
    transition: .6s;
    opacity:0;
    transform:translateY(50px);
}

.to-top:hover{
    transform: translateY(-5%);
    background: rgb(230,230,230);
}

.to-top p{
    text-align: center;
    font-size:.8rem;
    line-height: 1.3;
}

.come.to-top{
    animation:coming 1s forwards;
}

.hidden.to-top{
    animation:hidden 1s forwards;
}

@keyframes coming{
    0%{
        opacity:0;
        transform:translateY(50px);
    }
    100%{
        opacity:1;
        transform: translateY(0);
    }
}

@keyframes hidden{
    0%{
        opacity:1;
        transform:translateY(0);
    }
    100%{
        opacity:0;
        transform: translateY(50px);
    }
}



.hidden.to-top{
}

.container{
    margin:100px 0;
}

/*ニュース*/
.news{
    /* height:800px; */
}

.news h2{
    text-align:center;
    font-size:2.4em;
}

.news .content{
    max-width:1200px;
    min-width:800px;
    height:100%;
    margin:0 auto;
}

.news ul{
    list-style:none;
    margin:80px 0;
}

.news li{
    margin:20px 0;
    padding: 20px 20px;
    border-top:1px #888 solid;
}

.news li:last-child{
    border-bottom:1px #888 solid;
}

.news li div:nth-child(2){
    display: grid;
    grid-template-columns:240px auto;
    gap:40px;
}

.news img{
    width:100%;
    aspect-ratio: 5/3;
    object-fit: cover;
}





/* コンテンツ */
.works{
    height:800px;
    position:relative;
    background: rgb(13, 16, 16);
}

.bg.works{
        width:100%;
        background-image: linear-gradient(rgb(47, 50, 101) 1px, transparent 0),
                          linear-gradient(90deg, rgb(47, 50, 101) 1px, transparent 0);
        background-size: 40px 40px;
        /* border-bottom:rgb(150,150,180) 1px solid; */
}

.content-title{
    padding:10px;
}

.works h2{
    margin-left:100px;
    padding-top:10px;
    text-align:center;
    font-size:2.4rem;
    color:rgb(255,255,255);
}

.works-list{
    position:absolute;
    top:0;
    left:0;
    border-top: 800px solid rgb(49, 49, 84);
	border-right: 100px solid transparent;
	height:800px;
	width:300px;
    z-index:100;
    transition:.4s;
    z-index:100;
}

.works-nav{
    position:absolute;
    top:0;
    left:0;
    z-index:110;
}

.works-nav ul{
    margin-top:80px;
    margin-left:30px;
    list-style: none;
}

.works-nav li{
    margin:36px 0 0;
    color:rgb(255,255,255);
    font-size:1.2rem;
    font-weight: bold;
}

.works-nav li:first-child{
    font-size:1.3rem;
    color:rgb(240, 202, 13);
}

.works-nav li:nth-child(2){
    margin-top:50px;
}

.slider{
    position:absolute;
    width:100%;
    height:600px;
    top:55%;
    left:0;
    transform:translateY(-50%);
}

.slider-box{
    width:300px;
    height:600px;
    background: rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border: 2px solid rgba(128, 126, 126, 0.2);
    border-right-color: rgba(255, 255, 255, 0.2);
    border-bottom-color: rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    margin:0 20px;
    padding:40px;
}

.slider-box h3{
    font-size:1.1rem;
    padding:10px;
    margin-bottom:20px;
    text-align: center;
    color:rgb(255,255,255);
}

.works-img{
    width:100%;
    height:400px;
    background: grey;
}

.slider-box img{
    width:100%;
    height:100%;
    object-fit: cover;
}

.slider-box p{
    text-align: center;
    margin-top:20px;
    font-size:.8rem;
    color:rgb(255,255,255);
}

/*プロフィール*/
.about{
    background:rgb(0,0,30);
    /* height:480px; */
    padding:40px;
}

.about .content{
    max-width:1200px;
    min-width:800px;
    height:100%;
    margin:0 auto;
    display: grid;
    grid-template-columns: 180px 500px auto;
    gap:40px;
    align-items: center;
}

.profile{
    color:rgb(255,255,255);
    height:280px;
    margin:auto 0;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: space-between;
    text-align: center;
}

.profile .my-face{
    width:180px;
    height:180px;
    margin:0 auto 20px;
    border-radius: 50%;
    background: gray;
}

.profile img{
    width:180px;
    height:180px;
    border-radius: 50%;
    object-fit: cover;
}

.profile p:nth-child(3){
    width:180px;
    margin:0 auto;
    font-size:.7rem;
    line-height: 1.5;
}

.past-service ul{
    color:white;
    list-style: none;
    padding:0 40px;
}

.past-service li{
    margin:5px 0;
}

.holder{
    color:rgb(255,255,255);
    /* position:relative; */
}

.holder h3{
    text-align: center;
    font-weight: normal;
    padding:10px;
    background: white;
    color:black;
}

.holder ul{
    margin-top:40px;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    gap:20px 40px;
}

.holder-img{
    width:60px;
    height:60px;
    /* background: gray; */
}

.holder-img img{
    width:100%;
    height:100%;
}

.holder p{
    text-align:center;
    font-size:.8rem;
    margin-top:5px;
    line-height:1.3;
    height:48px;
}

/* スクール */
.school{
    margin-top:200px;
}

.school h2{
    padding-top:10px;
    text-align:center;
    font-size:2.4rem;
}

.introduction{
    max-width:1200px;
    min-width:800px;
    margin:100px auto 0;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap:10px;
}

.introduction div{
    width:280px;
    height:280px;
    margin:0 auto;
    text-align: center;
}

.introduction a{
    display:block;
    width:100%;
    height:100%;
    background: #aaa;
    border-radius: 50%;
    overflow: hidden;
}

.introduction a img{
    width:100%;
    height:100%;
    object-fit: cover;
}

.introduction div:first-child a{
    border:10px solid yellow;
}

.introduction div:nth-child(2) a{
    border:10px solid rgb(0, 208, 255);
}

.introduction div:nth-child(3) a{
    border:10px solid rgb(108, 241, 108);
}

.introduction div:nth-child(4) a{
    border:10px solid rgb(248, 193, 248);
}

.introduction p{
    margin-top:30px;
    font-size:1.2em;
    font-weight: bold;
    height:36px;
    line-height: 1.2;
}

.introduction p span{
    margin-top:20px;
    display:block;
    font-size: .8em;
    font-weight: normal;
    color:brown;
}

/* 問い合わせ */
.contact{
    margin-top:400px;   
}

.contact-box{
    max-width:1200px;
    min-width:800px;
    margin:0 auto;
    display: grid;
    grid-template-columns:auto minmax(400px,auto);
    gap:40px;
    justify-content: space-between;
}

.contact-form [type="text"],.contact-form [type="email"],.contact-form [type="tel"],.contact-form .message{
    display:block;
    padding:10px;
    font-size:1.1em;
    border:1px solid rgb(200,200,200);
    border-radius: 5px;
}

.contact-form label{
    display:block;
    margin:0 0 3px 5px ;
    font-size:.8rem;
}

.form-set1{
    width:100%;
    margin-bottom:15px;
}

.form-set1 [type="text"],.form-set1 [type="email"]{
    width:100%;
}

.form-set1 [type="tel"]{
    width:60%;
}

.form-set2{
    width:40%;
    display:inline-block;
    margin-bottom:15px;
}

.form-set2 [type="text"]{
    width:80%;
}

.contact-form form{
    padding:50px 0; 
}

.contact-form [type="submit"]{
    display:block;
    margin-top:30px;
    padding:16px 30px;
    border-radius: 5px;
    color:rgb(255,255,255);
    background:rgb(80,80,80);
}

.message{
    width:100%;
    height:150px;
    resize:none;
}

.form-send{
    margin:20px 0;
    border-top:dashed 1px #888;
    border-bottom:dashed 1px #888;
}

.form-send p{
    padding-left:16px;
    color:brown;
}


/* SNS */
.sns-box{
    width:100%;
    display:grid;
    /* grid-template-columns: repeat(2,1fr); */
    grid-template-columns: 400px;
    /* grid-template-rows: 350px auto 50px; */
    grid-template-rows: auto 50px;
    gap:40px 30px;
    padding:60px 0;
}

.youtube{
    /* grid-column: 1/3; */
    width:100%;
    background:rgb(255,0,0)
}

.line,.x{
    background:gray;
}

.button{
    /* grid-column:2/3; */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap:20px;
}

.youtube-btn,.line-btn,.x-btn{
    /* width:40px;
    height:40px;
    background: gray; */
}

/* フッター */
.footer{
    margin-top:200px;
    background: rgb(40,40,40);
    height:500px;
    padding:60px 0 20px;
}

.footer .container{
    height:100%;
    margin:0;
}

.footer .content{
    height:100%;
}

.footer-inner{
    min-width:800px;
    max-width:1000px;
    height:100%;
    margin:0 auto;
    color:rgb(255,255,255);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.footer-info{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap:60px;
}

.address ul:first-child{
    list-style: none;
}

.address ul:first-child li:first-child{
    color:rgb(240, 202, 13);
    margin-bottom:20px;
}

.address ul:nth-child(2){
    margin:20px 0 0 20px;
}

.page-link ul{
    list-style: none;
}

.page-link li{
    margin:16px 0;
}
.page-link a{
    color:rgb(255,255,255);
    text-decoration: none;
}

.partner ul{
    list-style: none;
}

.partner a{
    width:300px;
    height:80px;
}

.partner img{
    width:100%;
    height:100%;
    /* background: gray; */
    object-fit: contain;
}

.footer-sns{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap:10px;
}

.footer-sns a:first-child{
    width:100px;
}



.copy-right{
    text-align: center;
    font-size:.8rem;
    color:rgb(240, 202, 13);
}