@charset "utf-8";
main{
    width:960px;
    margin:0 auto;
    padding:0 7px;
}
h1{
    display:block;
    padding:8px;
    padding-left:30px;
}
h2{
    font-size: 29px;
    font-weight: bold;
    padding:30px 0;
}
p{
    font-size: 16px;
}
/* hamburger menu ------------------------------- */
.menu-btn{
    position:fixed;
    top:52px;
    right:47px;
    width:50px;
    height:50px;
    display:flex;
    justify-content: center;
    align-items: center;
    z-index: 210;
    transition: 300ms;
}
.menu-btn:hover{
    top:57px;
}
.hamburger-menu .menu-btn span,
.hamburger-menu .menu-btn span::after,
.hamburger-menu .menu-btn span::before{
    content: "";
    display:block;
    background-color: rgb(48,47,46);
    width:44px;
    height:2px;
    border-radius: 20px;
    position:absolute;
    transition:300ms;
}
.hamburger-menu .menu-btn span::before{
    bottom:11px;
}
.hamburger-menu .menu-btn span::after{
    top:11px;
}
#menu-btn-check:checked ~ .menu-btn span{
    background-color: rgba(255,255,255,0);
}
#menu-btn-check:checked ~ .menu-btn span::before{
    bottom:0;
    transform:rotate(-225deg);
}
#menu-btn-check:checked ~ .menu-btn span::after{
    top:0;  
    transform:rotate(225deg);
}
#menu-btn-check{
    display:none;
}
/* メニュースタイル */
nav.nav-menu{
    width:25%;
    height:100%;
    background-color: rgba(244,244,246,0.9);
    /* position:fixedは必須*/
    position:fixed;
    top:0;
    right:-25%; 
    z-index: 200;
    transition: 300ms;
}
nav.nav-menu ul{
    padding-top: 100px;
}
nav.nav-menu ul li{
    display: block;
    padding:18px;
    font-size: 18px;
    padding-left:46px;
    transition: 300ms;
}
nav.nav-menu ul li:hover{
    padding-left: 53px;
}
nav.nav-menu ul li a{
    font-weight: bold;
    display: block;
    transition: 300ms;
}
nav.nav-menu ul li a:hover{
    text-decoration: underline;
    text-decoration-thickness: 2px;
}
#menu-btn-check:checked ~ .nav-menu{
    right:0;
}
/* メニュースタイルここまで */
/* hamburger menuここまで -------------------------------*/
/* homeスタイル----------------------------------------- */
#home div.main-img{
    width:100%;
    padding:112px;
    aspect-ratio: 1/1;
    margin:0 auto;
    position:relative;
}
#home .main-img img{
    width:100%;
}
#home .main-img .titleLogo{
    width:43%;
    position:absolute;
    top:50%;
    left:50%;
    transform: translateX(-50%) translateY(-50%);
    filter: drop-shadow(5px 5px 8px rgba(19,23,25,0.9));
    display:none;
}
#home .main-img .titleLogo img{
    animation: fuwafuwa 1500ms infinite;
    animation-delay: 1200ms;
}
@keyframes fuwafuwa{
    0%,100%{transform: translateY(0);}
    50%{transform: translateY(-10px);}
    100%{transform: translateY(0);}
}
/* homeスタイルここまで----------------------------------- */
/* aboutスタイル----------------------------------------- */
#about .main-content h3{
    font-size: 26px;
    padding:5px 0 0;
}
#about .main-content h3 span{
    font-size: 13px;
}
#about .main-content .artphoto{
    width:100%;
}
#about .main-content .artphoto img{
    width:100%;
}
#about .main-content .member{
    padding:15px 0;
}
#about .main-content .member li{
    padding:1px 0;
}
/* aboutスタイルここまで----------------------------------- */
/* discスタイル------------------------------------------ */
#disc .main-content .item{
    display:flex;
    padding-bottom:61px;
}
#disc .main-content .item .jacket{
    padding:18px;
    flex-basis: 50%;
}
#disc .main-content .item .truckList{
    flex-basis: 50%;
    padding:18px;
    padding-left: 22px;
    position: relative;
}
#disc .main-content .item .truckList h3{
    font-size: 19px;
    padding-bottom:12px;
}
#disc .main-content .item .truckList h3+p{
    display:block;
    text-align: center;
    padding-bottom:18px;
    font-size: 17px;
}
#disc .main-content .item .truckList h4{
    font-weight: bold;
    color:rgb(54,96,170);
    padding-bottom:6px;
}
#disc .main-content .item .truckList ol{
    padding-left:18px;
    padding-bottom:23px;
}
#disc .main-content .item .truckList ol li{
    list-style-type: decimal;
    padding-bottom:4px;
}
#disc .main-content .item .truckList ol+p{
    text-align: center;
    position:absolute;
    bottom:25px;
    left:25%;
}
#disc .main-content .item .jacket img{
    width:100%;
}
/* discスタイルここまで------------------------------------ */
/* videoスタイル------------------------------------------ */
#video .main-content .item{
    padding-bottom:53px;
}
#video .main-content .item h3{
    font-size: 21px;
    padding-bottom: 9px;
}
#video .item .video iframe{
    aspect-ratio: 16/9;
}
/* videoスタイルここまで----------------------------------- */
/* liveスタイル------------------------------------------- */
#live .main-content{
    padding:60px 0;
}
#live .main-content p{
    text-align: center;
}
/* liveスタイルここまで------------------------------------- */
/* contectスタイル----------------------------------------- */
#contact .main-content{
    padding:60px 0;
}
#contact .main-content p{
    padding:23px;
    text-align: center;
}
#contact .main-content address{
    display: block;
    text-align: center;
}
/* contactスタイルここまで---------------------------------- */
/* footerスタイル---------------------------------------- */
footer{
    width:100%;
    aspect-ratio: 6/1;
    padding:60px;
}
footer p{
    text-align: center;
    padding-top: 30px;
}
/* footerスタイルここまで--------------------------------- */