@import url(css/reset.css);
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Georgian:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Adamina&display=swap');


body{
    font-family: 'Noto Sans jp', 'Adamina' ;
    font-size: 16px;
    background-color: #E7F7F8;
    color: #532D2D;
}

.inner{
    width: 100%; 
    max-width: 1200px;
    margin-inline: auto;
}

img{
    width: 100%;
}

/*ヘッダー*/
#header{
    background-image: url(img/header.jpg);
    background-size:cover;
    padding: 15px;
}

.nav_menu{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img{
    width: 42px;
    height: 48px;
}

.nav_1{
    display: flex;
}

.nav_1 li{
    margin-left: 70px;
}

.nav_1 li a{
    text-decoration: unset;
    color: #ffffff;
    font-family: 'Noto Sans Georgian';
    letter-spacing: 0.1em;
}

.nav_1 li a:hover{
    opacity: 0.5;
}

/*ハンバーガーメニュー*/

.menu-icon{
    position: fixed;
    top: 12px;
    right: 32px;
    font-size: 45px;
    color: #ffffff;
    cursor: pointer;
    z-index: 1001;
    display: none;
}

.menu-icon .hamburger {
    display: inline;
}

.menu-icon .close {
    display: none;
}

.side-menu {
    position: fixed;
    top: 0;
    right: -250px; /* 初期状態で右に隠す */
    width: 250px;
    height: 100%;
    background-color: #2a1717;
    color: #fff;
    transition: right 0.3s ease;
    z-index: 1000;
    padding-top: 60px;
    display: none;
}

.side-menu ul {
    list-style: none;
    padding: 0;
}

.side-menu li {
    padding: 1rem;
    border-bottom: 1px solid #444;
}

.side-menu a {
    color: white;
    text-decoration: none;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 999;
    display: none;
}

/* チェック時にメニュー表示 */
#menu-toggle:checked ~ .side-menu {
    right: 0;
}

/* チェック時にオーバーレイ表示 */
#menu-toggle:checked ~ .overlay {
    opacity: 1;
    pointer-events: auto;
}

/* チェック時：✕表示、ハンバーガー非表示 */
#menu-toggle:checked + .menu-icon .hamburger {
    display: none;
}

#menu-toggle:checked + .menu-icon .close {
    display: inline;
}

/*main_v*/

.name{
    font-family: 'Adamina';
    font-size: 91px;
    line-height: 1.2em;
    margin-top: 170px;
}

.portfolio_1{
    font-size: 28px;
    font-family: 'Adamina';
    letter-spacing: 0.1em;
    text-align: right;
    padding-bottom: 5px;
}

.img_main{
    text-align: center;
}

#main img{
    max-width: 1200px;
}

#main{
    margin-bottom: 220px;
}

/*works*/

/* 画像の背景ボックスの白背景を透明にする */
#lightbox {
    background: transparent !important;
    box-shadow: none !important;
}

/* 外枠コンテナの背景も透明にする */
.lb-outerContainer {
    background: transparent !important;
}

/* 画像の下の説明テキストボックスも透明にする */
.lb-dataContainer {
    background: transparent !important;
    color: white; /* 文字が見えない場合の対策（任意） */
}


.inner .title h2{
    font-size: 55px;
    font-family: 'Adamina';
    font-weight: lighter;
    padding-right: 35px;
}

.inner .title p{
    font-family:'Noto Sans JP';
    padding-top: 38px;
}

#works .inner .title{
    display: flex;
    justify-content: left;
    padding-bottom: 100px;
}

.production{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
}

.production li{
    width: 33%;/*100%の三分の1*/
}

.production li .imgbox{
    background-image: url(img/post_it\ 1.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: contain;/*箱の中に納める*/
    padding-right: 6px;
}/*ポストイットを背景にした*/

.production li h3{
    font-family: 'Noto Sans JP';
    font-weight: 400;
    margin-top: 5px;
}

.portfolio li p{
    font-family: 'Noto Sans Georgian';
}

#works .production .imgbox .img_sp{
    display: none;
}

/*about*/

#about{
    margin-top: 198px;
    margin-bottom: 60px;
}

#about .inner .title{
    display: flex;
    justify-content: flex-start;
    padding-bottom: 50px;
}

#about .seif_introduction{
    display: flex;
    justify-content: space-between;
}

#about .seif_introduction .img_box .main_img_sp{
    display: none;
}

#about .img_box{
    padding: 0 33px;
}

#about .about_text .name3{
    font-family: 'Noto Sans JP';
    font-size: 28px;
    letter-spacing: 0.1em;
    margin-bottom: 25px;
    border-bottom: 1px solid #532D2D ;
}


#about .about_text .text{
    line-height: 3em;
    padding-left: 20px;
}


#about .seif_introduction li{
    width: 50%;
}

/*skillーlikes*/

#nav4 .nav_g{
    display: flex;
    letter-spacing: 0.1em;
    padding: 5px 0;
    margin-bottom: 100px;
    border-bottom: 1px solid #532D2D;
}

#nav4 h3{
    font-family: 'Adamina';
    font-size: 30px;
    font-weight: lighter;
    padding-right: 35px;
    padding-top: 10px;
}

#nav4 .nav_g  p{
    font-family: 'Noto Sans JP';
    font-size: 14px;
    padding-top: 24px;
}

#nav4 .skill{
    width: 50%;
}

#nav4 .skill_box th{
    width: 50%;
    text-align: left;
    vertical-align: middle;
    padding: 10px 0;
    font-size: 25px;
    font-family: 'Noto Sans Georgian';
    font-weight: normal;
}

#nav4 .skill_box td{
    width: 50%;
    vertical-align: middle;
    padding: 22px 0;
}

#nav4 .skill_img {
    line-height: 3em;
}


#nav4 .skill_likes{
    display: flex;
    justify-content: space-between;
}

#nav4 .likes{
    width: 50%;
    margin-left: 57px;
}

#nav4 .likes_img_text{
    display: flex;
    justify-content: space-evenly;
    padding-top: 25px;
}

#nav4 .likes_img_text2{
    display: flex;
    justify-content: space-evenly;
    flex-direction: row-reverse;
    padding-top: 34px;
}

#nav4 .likes_img{
    width: 45%;
}

#nav4 .likes_text{
    width: 45%;
    display: flex;
    align-items: center;
}

#nav4 .likes_text p{
    line-height: 2.5em;
}


.rotate__cont{
    position: relative;
    width: 200px;
    height: 200px;
    margin-top: 110px;
    margin-bottom: -80px;
    margin-left: auto;
    overflow: hidden;
}

.rotate__inner-txt{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    font-size: 30px;
    text-align: center;
    z-index: 1;/* 読み上げ機能などに反応するように円より上に配置するため */
}

.rotate__cont a{
    text-decoration: unset;
    color: #532D2D
}

.rotate__float{
    animation: rotate 12s infinite linear;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/*contact*/

#contact .title{
    margin-top: 90px;
}

#contact .title p{
    font-family: 'Noto Sans JP';
    text-align: center;
    padding-top: 0;
}

#contact .title h2{
    font-size: 55px;
    font-family: 'Adamina';
    font-weight: lighter;
    text-align: center;
    padding-right: 0px;
}

#contact .contact_text{
    font-family: 'Noto Sans JP';
    font-size: 18px;
    text-align: center;
    margin-top: 35px;
    margin-bottom: 80px;
}

#contact .contact_img{
    display: flex;
    justify-content: center;
    text-align: center;
    column-gap: 50px;
    margin: 0 auto;
}

#contact .contact_img a {
    background-image: url(img/icon_back1.png);
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    border-radius: 40px;
    text-decoration: none;
    padding: 15px 50px;
}

#contact .contact_img li {
    background-image: url(img/icon_back2.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 20px 20px;
    border-radius: 40px;
}

#contact .contact_img p {
    font-size: 18px;
    text-align: center;
    color: #532D2D;
}

#contact .contact_img .icon_img{
    width: 70%;
    margin-inline: auto;
}


/*footer*/

#footer{
    background-image: url(img/footer.jpg);
    background-repeat: no-repeat;
    background-size:cover;
    position: relative;
    z-index: 2;
}

#footer .inner .name2{
    display: flex;
    justify-content: flex-start;
    text-align: center;
    padding-top: 52px;
}

#footer .inner .name2 p{
    font-size: 28px;
    font-family: 'Adamina';
    letter-spacing: 0.1em;
    color: #ffffff;
    padding-left: 23px;
}

#footer .inner .nav_2{
    display: flex;
    justify-content:flex-end;
    align-items: center;
    padding-top: 26px;
    padding-bottom: 127px;

}

#footer .inner .nav_2 li{
    margin-left: 70px;
}

#footer .inner .nav_2 a{
    text-decoration: unset;
    color: #ffffff;
    font-family: 'Noto Sans Georgian';
    letter-spacing: 0.1em;
}

#footer .inner .nav_2 a:hover{
    opacity: 0.5;
}

#footer .inner .copyright{
    font-family: 'Noto Sans Georgian';
    font-size: 10px;
    color: #ffffff;
    letter-spacing: 0.1em;
    padding-bottom: 29px;
}

/*レスポンシブ*/
@media screen and (max-width: 1200px){
    .inner{
        padding: 0 20px;
    }

    #about .seif_introduction li .text{
        padding-left: 0;
    }

    #about .img_box{
        padding: 0 15px;
    }

    #about .about_text .text .br_none1200{
        display: none;
    }

    #nav4 .likes_box .br_none1200{
        display: none;
    }

    #about .about_text .text{
        line-height: 2.5em;
    }
}

@media screen and (max-width: 1025px){

#about{
        margin-top: 100px;
    }

#about .about_text .name3{
    margin-bottom: 10px;
}

#about .about_text .name3{
    font-size: 22px;
}

#nav4 .skill_box th{
    font-size: 23px;
}
}

@media screen and (max-width: 1000px){

    #main{
        margin-bottom: 190px;
    }

    #contact .contact_img .icon_img{
        width: 50%;
    }

        #contact .contact_img a{
        padding: 0;
    }    
}

@media screen and (max-width: 860px){

    #main{
        margin-bottom: 130px;
    }

    #main .inner .name{
        font-size: 80px;
    }

    #header .nav_1{
        display: none;
    }

    #header .menu-icon,
    #header .side-menu,
    #header .overlay{
        display: block;
    }

    .production li{
        width: 50%;
    }

    .inner .title h2{
        font-size: 50px;
    }

    .inner .title p{
        padding-top: 32px;
    }

    #about .seif_introduction{
        display: block;
    }

    #about .seif_introduction .img_box{
        width: 100%;
        margin-bottom: 10px
    }

    #about .seif_introduction .img_box .main_img_sp{
        display: block;
    }

    #about .seif_introduction .img_box .main_img_pc{
        display: none;
    }

    #about .seif_introduction li{
        width: 100%;
    }

    #nav4 .skill_likes{
        display: block;
    }

    #nav4 .skill{
        width: 100%;
    }

    #nav4 .likes{
        width: 100%;
        margin-left: 0;
    }

    #nav4 .skill_box{
        margin-bottom: 30px;
    }

    #nav4 .skill_box td{
        padding: 22px 22px;
    }
    
    #contact .title h2{
        font-size: 50px;
    }

    #contact .contact_img{
        column-gap: 30px;
        flex-wrap: wrap;
    }

    .rotate__cont{
        width: 150px;
        height: 150px;
    }

    .rotate__inner-txt{
        padding-bottom: 40px;
        font-weight: 300;
        font-size: 22px;
    }
}

@media screen and (max-width: 770px){

#main .portfolio_1{
    font-size: 20px;

}

    #contact .contact_img li{
        margin: 15px 0;
    }

    #contact .contact_img .icon_img{
        width: 45%;
    } 

}

@media screen and (max-width: 652px){

    .production li{
        width: 100%;
    }

    #main{
        margin-bottom: 75px;
    }

    #header .menu-icon{
        font-size: 40px;
    }

    #works .inner .title{
        padding-bottom: 60px;
    }

    #works .production .imgbox .img_sp{
    display: block;
}

    #works .production .imgbox .img_pc{
    display: none;
}

    #works .production li{
        padding: 0 30px;
        margin-bottom: 30px;
    }

    #main .inner .name{
        font-size: 70px;
    }

    .inner .title h2{
        font-size: 40px;
    }

    .inner .title p{
        padding-top: 23px;
    }

    #contact .title h2{
        font-size: 40px;
    }

    #contact .contact_text{
        font-size: 15px;
    }

    #contact .contact_img p{
        font-size: 14px;
    }

    #footer .inner .nav_2 li{
        margin-left: 0;
    }

    #footer .inner .nav_2{
        justify-content: space-around;
    }

    #footer .inner .name2 p{
        padding-left: 0;
    }

    #footer .inner .name2{
        display: block;
    }

    #header .menu-icon{
        font-size: 40px;
    }
}

@media screen and (max-width: 500px){

#nav4 .nav_g{
    margin-bottom: 50px;
}

#nav4 .skill_box th{
    font-size: 20px;
}

    #nav4 .likes{
        margin-top: 55px;
    }

    #nav4 .likes_img_text{
        display: block;
    }

    #nav4 .likes_img{
        width: 100%;
    }

    #nav4 .likes_text{
        width: 100%;
    }

    #nav4 .likes_img_text2{
        display: block;
    }

    #nav4 .likes_box .br_none500{
        display: none;
    }

    #nav4 .likes_box{
        padding: 0 10px;
    }

    #contact .contact_img .icon_img{
        width: 35%;
    }
}