/* responsive */
@media screen and (max-width:1450px){
    #header.lute .inner {width:calc(100% - 4rem);}

    #container.lute .post-main .inner {width:calc(100% - 4rem);}
    #container.lute .visual-wrapper .text-wrap .title .name {font-size:6.25rem;}
    #container.lute .visual-wrapper .text-wrap .luxane {padding-left:3.75rem;}
    #container.lute .visual-wrapper .text-wrap .tehez {padding-right:3.75rem;}

    #container.lute .type-archive .inner {width:calc(100% - 4rem);}
}

@media screen and (max-width:1280px){
    #header.lute {height:80px;}
    #header.lute .inner .logo {height:50px;}
    #header.lute .inner nav {gap:1.75rem;}
    #header.lute .inner nav .nav-list {gap:1.75rem;}
    #header.lute .inner nav .nav-list .menu-item a {padding-top:2rem;}
    #header.lute .inner nav .nav-list .menu-item a::after {width:1.5rem;}
    #header.lute .inner nav .menu-button {width:80px;}
    #header.lute .inner nav .menu-button a .line.no1 {top:29px;}
    #header.lute .inner nav .menu-button a .line.no2 {top:39px;}
    #header.lute .inner nav .menu-button a .line.no3 {top:49px;}

    #container.lute .page, 
    #container.lute .post {padding:80px 0 0;}

    #container.lute .visual-wrapper .image-wrap {width:400px;}
    #container.lute .visual-wrapper .text-wrap {gap:1.75rem;}
    #container.lute .visual-wrapper .text-wrap .title .name {width:calc((100% - 2.5rem - 3.75rem * 2) / 2);font-size:5rem;}
    #container.lute .visual-wrapper .text-wrap .title .unit {width:2.5rem;font-size:3.75rem;}
    #container.lute .visual-wrapper .text-wrap .profile a {height:225px;}
    #container.lute .d-day-banner-wrap {top:2.5rem;}
    #container.lute .button-banner-wrap {bottom:1.75rem;}

    #container.lute .profile-tab-list {top:80px;}

    #container.lute .post-password-form {width:calc(100% - 2.5rem * 2);}

    #container.lute .dialogue-wrapper .dialogue-wrap .item.card {width:100%;}
}

@media screen and (max-width:1024px){
    #header.lute {height:64px;}
    #header.lute .inner {width:calc(100% - 2rem);}
    #header.lute .inner .logo {height:40px;}
    #header.lute .inner nav {gap:1rem;}
    #header.lute .inner nav .nav-list {gap:1rem;}
    #header.lute .inner nav .nav-list .menu-item a {padding-top:1.75rem;}
    #header.lute .inner nav .nav-list .menu-item a::after {width:1.25rem;}
    #header.lute .inner nav .menu-button {width:64px;}
    #header.lute .inner nav .menu-button a .line {width:24px;}
    #header.lute .inner nav .menu-button a .line.no1 {top:22px;}
    #header.lute .inner nav .menu-button a .line.no2 {top:31px;}
    #header.lute .inner nav .menu-button a .line.no3 {top:40px;}
    #header.lute .inner nav .menu-button.on a .line.no1 {transform:translate(-50%,8.75px) rotate(45deg);}
    #header.lute .inner nav .menu-button.on a .line.no3 {transform:translate(-50%,-8.75px) rotate(-45deg);}

    #container.lute {min-height:unset;}
    #container.lute .page, 
    #container.lute .post {padding:64px 0 0;}

    #container.lute .post-main .inner {display:flex;flex-flow:row wrap;justify-content:center;align-content:flex-start;gap:1rem;width:calc(100% - 2rem);}
    #container.lute .visual-wrapper {position:relative;height:55vh;}
    #container.lute .visual-wrapper .image-wrap {width:calc(240px + 320px + 1rem);}
    #container.lute .visual-wrapper .image-wrap .heart {top:2.5rem;left:calc(50% - 2rem / 2);width:2rem;}
    #container.lute .visual-wrapper .text-wrap {justify-content:flex-end;}
    #container.lute .visual-wrapper .text-wrap .title {justify-content:center;gap:1.25rem;}
    #container.lute .visual-wrapper .text-wrap .title .name {width:auto;font-size:3.75rem;}
    #container.lute .visual-wrapper .text-wrap .title .unit {width:auto;font-size:2.5rem;}
    #container.lute .visual-wrapper .text-wrap .profile {position:absolute;top:0;width:auto;}
    #container.lute .visual-wrapper .text-wrap .profile a {height:200px;}
    #container.lute .visual-wrapper .text-wrap .profile a .label {top:50%;font-size:2.5rem;}
    #container.lute .visual-wrapper .text-wrap .luxane {left:2.5rem;padding:0;}
    #container.lute .visual-wrapper .text-wrap .tehez {right:2.5rem;padding:0;}
    #container.lute .d-day-banner-wrap {position:static;}
    #container.lute .button-banner-wrap {position:static;}

    #container.lute .type-profile .inner {width:calc(100% - 2rem);}
    #container.lute .profile-name-wrap {font-size:3.75rem;margin:5rem 0 2.5rem;}
    #container.lute .profile-tab-list {top:64px;width:calc(100% - 2rem);}
    #container.lute .profile-content .intro-wrap {margin-bottom:2.5rem;}
    #container.lute .profile-content .intro-wrap .one-word {font-size:2rem;}
    #container.lute .profile-content .visual-wrap {margin-bottom:2.5rem;}
    #container.lute .profile-content .visual-wrap .img {margin-bottom:1.25rem;}
    #container.lute .profile-content .basic-wrap {gap:2rem;}
    #container.lute .profile-content .basic-wrap li .label {font-size:1rem;margin-bottom:0.5rem;}
    #container.lute .profile-content .subject {font-size:1.5rem;margin-bottom:1.25rem;}
    #container.lute .profile-content .paragraph {margin-bottom:2.5rem;}
    #container.lute .profile-content .paragraph .main {font-size:1.125rem;margin-bottom:1rem;}
    #container.lute .profile-content .paragraph span + span {margin-top:1rem;}

    #container.lute .type-archive .inner {width:calc(100% - 2rem);}
    #container.lute .type-archive .swiper-content .swipers .swiper-wrapper .swiper-slide {width:calc(50% - 2rem);}

    #container.lute .type-archive .swiper-content .prev-navigation,
    #container.lute .type-archive .swiper-content .next-navigation {top:calc((100% - 2.5rem - 0.5rem - 1.25rem - 28px) / 2);}
    #container.lute .type-archive .swiper-content .swiper-pagination {margin-top:2.5rem;}

    #container.lute .type-singular .inner {width:calc(100% - 2rem);}
    
    #container.lute .type-timeline .inner {width:calc(100% - 2rem);}
    #container.lute .timeline-wrapper .timeline-bar {top:3.5rem;height:calc(100% - 3.5rem);}
    #container.lute .timeline-wrapper .term-content {padding-bottom:5rem;}
    #container.lute .timeline-wrapper .term-content .term-name {margin-bottom:3.75rem;}
    #container.lute .timeline-wrapper .term-content .term-name .text {font-size:2.5rem;}
    #container.lute .timeline-wrapper .term-content .event-list .event-item {gap:1.25rem;}
    #container.lute .timeline-wrapper .term-content .event-list .event-item + .event-item {margin-top:3.75rem;}
    #container.lute .timeline-wrapper .term-content .event-list .event-item .luxane,
    #container.lute .timeline-wrapper .term-content .event-list .event-item .tehez {width:calc((100% - 1.25rem * 2 - 2.5rem) / 2);}

    #container.lute .type-storage .inner {width:calc(100% - 2rem);}
}

@media screen and (max-width:768px){
    #footer.lute {position:fixed;}
    
    #intro.lute .animation-wrapper a {width:100px;margin-left:100px;}

    #container.lute .post-main .inner {height:auto;padding-bottom:2.5rem;}
    #container.lute .visual-wrapper .image-wrap {width:100%;max-width:400px;}
    #container.lute .visual-wrapper .text-wrap .title .name {font-size:3rem;}
    #container.lute .visual-wrapper .text-wrap .title .unit {font-size:2rem;}
    #container.lute .visual-wrapper .text-wrap .profile {top:auto;bottom:3.75rem;}
    #container.lute .visual-wrapper .text-wrap .luxane {left:1.25rem;}
    #container.lute .visual-wrapper .text-wrap .tehez {right:1.25rem;}
    #container.lute .d-day-banner-wrap {order:1;width:100%;max-width:400px;}
    #container.lute .button-banner-wrap {width:100%;max-width:400px;}
    #container.lute .button-banner-wrap .timeline {width:100%;}
    #container.lute .button-banner-wrap .bottom {justify-content:center;margin:1.25rem 0 0.5rem;}

    #container.lute .type-archive .swiper-content {padding-bottom:calc(48px + 1.25rem);}
    #container.lute .type-archive .swiper-content .swipers .swiper-wrapper .swiper-slide {width:calc(100% - 3rem);}

    #container.lute .type-archive .swiper-content .swiper-navigation {position:absolute;bottom:0;left:0;display:flex;flex-flow:row wrap;justify-content:center;align-items:center;gap:0.75rem;width:100%;}
    #container.lute .type-archive .swiper-content .prev-navigation,
    #container.lute .type-archive .swiper-content .next-navigation {position:static;transform:translateY(0);}

    #container.lute .post-password-form {position:static;width:100%;padding:2.5rem 0;transform:translateX(0);}

    #container.lute .dialogue-wrapper .dialogue-wrap .item.title .title-text {font-size:2.5rem;}
    #container.lute .dialogue-wrapper .dialogue-wrap .item.info {font-size:1.125rem;margin-top:0.25rem;}

    #container.lute .type-storage .storage-list {gap:1rem;}
    #container.lute .type-storage .storage-list .item {width:calc(50% - 1rem / 2);}
    #container.lute .type-storage .storage-list .item a {padding:1rem 2.25rem 1rem 1rem;}
    #container.lute .type-storage .storage-list .item a::after {right:0.75rem;width:0.75rem;}
    #container.lute .type-storage .storage-list .item a .title {font-size:1rem;padding-bottom:0.75rem;margin-bottom:0.75rem;}
    #container.lute .type-storage .storage-list .item a .date {font-size:0.75rem;}
}

@media screen and (max-width:480px){
    #header.lute .inner nav .nav-list {gap:0.75rem;}
    #header.lute .inner nav .nav-list .menu-item a {font-size:0.625rem;}
    #header.lute .inner nav .menu-button {width:44px;}
    #header.lute .inner nav .menu-button a .line {width:20px;}
    #header.lute .inner nav .menu-button a .line.no1 {top:13px;}
    #header.lute .inner nav .menu-button a .line.no2 {top:21px;}
    #header.lute .inner nav .menu-button a .line.no3 {top:29px;}
    #header.lute .inner nav .menu-button.on a .line.no1 {transform:translate(-50%,7.75px) rotate(45deg);}
    #header.lute .inner nav .menu-button.on a .line.no3 {transform:translate(-50%,-7.75px) rotate(-45deg);}

    #container.lute .visual-wrapper .image-wrap .circle {top:calc(-4.25rem / 2);width:calc(100% + 4.25rem);}
    #container.lute .visual-wrapper .text-wrap .title {gap:3.5vw;}
    #container.lute .visual-wrapper .text-wrap .title .name {font-size:10vw;}
    #container.lute .visual-wrapper .text-wrap .title .unit {font-size:6vw;}
    #container.lute .visual-wrapper .text-wrap .profile a {height:30vw;}
    #container.lute .button-banner-wrap .bottom {gap:0.75rem;}

    #container.lute .profile-name-wrap {font-size:2.5rem;}
    #container.lute .profile-tab-list li a {height:44px;font-size:0.875rem;}
    #container.lute .profile-content .intro-wrap .one-word {font-size:1.375rem;}
    #container.lute .profile-content .basic-wrap {gap:1rem;}
    #container.lute .profile-content .basic-wrap li .text {font-size:0.875rem;}
    
    #container.lute .type-archive .swiper-content .swipers .swiper-wrapper .swiper-slide a .image {margin-bottom:0.75rem;}
    #container.lute .type-archive .swiper-content .swipers .swiper-wrapper .swiper-slide a .image .reflect {bottom:-2rem;height:2rem;}
    #container.lute .type-archive .swiper-content .swipers .swiper-wrapper .swiper-slide a .title {font-size:1rem;}

    #container.lute .type-archive .swiper-content {padding-bottom:calc(44px + 1.25rem);}

    #container.lute .type-archive .swiper-content .prev-navigation,
    #container.lute .type-archive .swiper-content .next-navigation {width:44px;}

    #container.lute .type-archive .swiper-content .swiper-pagination {margin-top:1.25rem;}

    #container.lute .dialogue-wrapper .dialogue-wrap .item.order {border-radius:1.25rem;}
    #container.lute .dialogue-wrapper .dialogue-wrap .item.line .chat {gap:0.625rem;}
    #container.lute .dialogue-wrapper .dialogue-wrap .item.line .chat .chat-img {width:2.75rem;border-radius:0.5rem;}
    #container.lute .dialogue-wrapper .dialogue-wrap .item.line .chat .chat-text {width:calc(100% - 2.75rem - 0.625rem);}
    #container.lute .dialogue-wrapper .dialogue-wrap .item.line .chat .chat-text .content {padding:0.75rem;}

    #container.lute .timeline-wrapper .term-content .event-list .event-item .luxane,
    #container.lute .timeline-wrapper .term-content .event-list .event-item .tehez {font-size:0.875rem;}

    #container.lute .type-storage .storage-list .item {width:100%;}

    #container.lute .storage-wrapper .storage-wrap .item.title .text {font-size:1.25rem;}
    #container.lute .storage-wrapper .storage-wrap .item.mention .owner {gap:0.625rem;}
    #container.lute .storage-wrapper .storage-wrap .item.mention .owner .owner-img {width:2.75rem;border-radius:0.5rem;}
    #container.lute .storage-wrapper .storage-wrap .item.mention .owner .owner-info {width:calc(100% - 2.75rem - 0.625rem);}
}