@charset "UTF-8";
/* base
------------------------------------*/

html{
    min-width: 320px;
    max-width: 1920px;
    font-size: 62.5%;
    box-sizing: border-box;
    margin: 0 auto;
    scroll-behavior: smooth;
}
a{
    text-decoration: none;
}
a:link,a:visited{
    color: #000;
}
a:hover{
    cursor: pointer;
}
li{
    list-style: none;
}
.font-bold{
    font-weight: bold;
}
:root{
    --bg-white: url(images/paper-bg-wh.webp);
    --bg-beige1: url(images/paper-bg-b1.webp);
    --bg-beige2: url(images/paper-bg-b2.webp);
    --bg-beige3: url(images/paper-bg-b3.webp);
    --bg-beige4: url(images/paper-bg-b4.webp);
    --bg-craftpaper: url(images/paper-bg-07.webp);
    --bg-khaki1: url(images/paper-bg-k1.webp);
    --bg-khaki2: url(images/paper-bg-k2.webp);
    --bg-khaki3: url(images/paper-bg-k3.webp);
    --bg-charcoal: url(images/paper-bg-cha.webp);
    --shadow: rgba(0,0,0,.2);
    --color-khaki: #6a645d;
    --color-khaki2: #9a978e;
}
.bg-white{
    background: var(--bg-white);
}
.bg-beige1{
    background: var(--bg-beige1);
}
.bg-beige2{
    background: var(--bg-beige2);
}
.bg-beige3{
    background: var(--bg-beige3);
}
.bg-beige4{
    background: var(--bg-beige4);
}

/* sp-Layout
------------------------------------*/
body{
    font-size: 12px;
    font-size: 1.2rem;
    line-height: 1.5;
    font-family: "a-otf-ud-reimin-pr6n", sans-serif;
    font-weight: 300;
    letter-spacing: .1rem;
}
section{
    scroll-margin-top: 60px;
    max-width: 1920px;
}
.l-container-l,.l-container-r{
    position: relative;
    width: 90%;
    padding: 5rem 9vw;
    overflow: hidden;
}
.l-container-l{
    left: 10%;
}
.l-container-r{
    right: 0%;
}
.l-wrapper{
    position: relative;
    padding: 200px 0 0;
}
.l-inner{
    display: inline-block;
    margin: 2rem 0;
}
.flex-start{
    display: flex;
    justify-content: space-between;
    align-items: start;
}
.text-area{
    display: inline-block;
    text-align: left;
    margin: 2rem 0;
}
.align-center{
    text-align: center;
}
.padding-tb1{
    padding: 1rem 0;
}
.padding-b2{
    padding: 0 0 2rem 0;
}
.margin-2{
    margin: 2rem;
}
.margin-tb2{
    margin: 2rem 0;
}
.margin-b2{
    margin: 0 0 2rem 0;
}

/* sp-Element
------------------------------------*/
 #loading{
    display: grid;
    position: fixed;
    top: 0;
    z-index: 4000;
    max-width: 1920px;
    margin: auto;
    inset: 0;
    perspective: 3000px; /* 遠近感 */
}
.loading-cover{
    position: absolute;
    top: 60px;
    left: 0;
    z-index: 5000;
    width: 100%;
    height: calc(100vh - 60px); /* naviの高さ分 */
    background: var(--bg-white);
    transform-origin: left center;
    animation: loadingCover 3s ease-in-out forwards 4.8s;
}
@keyframes loadingCover{
    0%{
        transform: rotateY(0);
    }
    100%{
        transform: rotateY(-180deg);
    }
}
#loading::after{
    position: absolute;
    content: "";
    top: 60px;
    width: 100%;
    height: calc(100vh - 60px); /* naviの高さ分 */
    background: var(--shadow);
    z-index: 4000;
    transform-origin: right center;
    animation: CoverShadow 2s ease-out forwards 5.8s;
}
@keyframes CoverShadow{
    0%{
        opacity: 1;
        width: 100%;
    }
    100%{
        opacity: 0;
        width: 0%;
    }
}
/* Copyright (c) 2023 by Animated Creativity (https://codepen.io/animatedcreativity/pen/wqmoEw) */
.loading-box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 280px;
    height: 40px;
    perspective: 280px; /* 遠近感 */
    perspective-origin: 50% 50%;
}
.loading-box div{
    position: absolute;
    left: 0;
    width: calc(280px / 7);
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 3rem;
    font-weight: bold;
    color: var(--color-khaki);
    box-sizing: border-box;
    transform-origin: left center;
    animation-duration: 4s;
    animation-delay: 1s; /* webfontが読み込まれる時間の遅延 */
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    opacity: 0;
}
.loading-box div:nth-child(1){
    left: 0;
    background: var(--bg-white);
    animation-name: foldbox1;
    z-index: 1;
}
.loading-box div:nth-child(2){
    left: calc(280px / 7);
    background: var(--bg-white);
    animation-name: foldbox2;
    z-index: 2;
}
.loading-box div:nth-child(3){
    left: calc((280px / 7) * 2);
    background: var(--bg-white);
    animation-name: foldbox3;
    z-index: 3;
}
.loading-box div:nth-child(4){
    left: calc((280px / 7) * 3);
    background: var(--bg-white);
    animation-name: foldbox4;
    z-index: 4;
}
.loading-box div:nth-child(5){
    left: calc((280px / 7) * 4);
    background: var(--bg-white);
    animation-name: foldbox5;
    z-index: 5;
}
.loading-box div:nth-child(6){
    left: calc((280px / 7) * 5);
    background: var(--bg-white);
    animation-name: foldbox6;
    z-index: 6;
}
.loading-box div:nth-child(7){
    left: calc((280px / 7) * 6);
    background: var(--bg-white);
    animation-name: foldbox7;
    z-index: 7;
}
@keyframes foldbox1{
    0%{
        opacity: 0;
        transform: rotateY(-180deg);
        transform-origin: left center;
        background: var(--bg-khaki2);
    }
    10%{
        opacity: 1;
        transform: rotateY(0deg);
        transform-origin: left center;
        background: var(--bg-khaki2);
    }
    11%{
        transform-origin: right center;
        background: var(--bg-white);
    }
    48%{
        z-index: 1;
    }
    49%{
        z-index: 14;
    }
    60%{
        opacity: 1;
        transform: rotateY(0deg);
    }
    61%{
        transform-origin: right center;
    }
    63%{
        background: var(--bg-white);
    }
    64%{
        background: var(--bg-khaki2);
    }
    65%{
        opacity: 1;
        transform: rotateY(180deg);
    }
    66%{
        opacity: 0;
    }
    100%{
        z-index: 14;
        opacity: 0;
        transform: rotateY(180deg);
        transform-origin: right center;
        background: var(--bg-white);
    }
}
@keyframes foldbox2{
    0%{
        opacity: 0;
        transform: rotateY(-180deg);
        transform-origin: left center;
        background: var(--bg-khaki2);
    }
    9%{
        opacity: 0;
    }
    10%{
        opacity: 1;
        transform: rotateY(-180deg);
    }
    15%{
        transform: rotateY(0deg);
        transform-origin: left center;
        background: var(--bg-khaki2);
    }
    16%{
        transform-origin: right center;
        background: var(--bg-white);
    }
    48%{
        z-index: 2;
    }
    49%{
        z-index: 13;
    }
    65%{
        opacity: 1;
        transform: rotateY(0deg);
    }
    67%{
        transform-origin: right center;
    }
    68%{
        background: var(--bg-white);
    }
    69%{
        background: var(--bg-khaki2);
    }
    70%{
        opacity: 1;
        transform: rotateY(180deg);
    }
    71%{
        opacity: 0;
    }
    100%{
        z-index: 13;
        opacity: 0;
        transform: rotateY(180deg);
        transform-origin: right center;
        background: var(--bg-white);
    }
}
@keyframes foldbox3{
    0%{
        opacity: 0;
        transform: rotateY(-180deg);
        transform-origin: left center;
        background: var(--bg-khaki2);
    }
    14%{
        opacity: 0;
    }
    15%{
        opacity: 1;
        transform: rotateY(-180deg);
    }
    20%{
        transform: rotateY(0deg);
        transform-origin: left center;
        background: var(--bg-khaki2);
    }
    21%{
        transform-origin: right center;
        background: var(--bg-white);
    }
    48%{
        z-index: 3;
    }
    49%{
        z-index: 12;
    }
    70%{
        opacity: 1;
        transform: rotateY(0deg);
    }
    72%{
        transform-origin: right center;
    }
    73%{
        background: var(--bg-white);
    }
    74%{
        background: var(--bg-khaki2);
    }
    75%{
        opacity: 1;
        transform: rotateY(180deg);
    }
    76%{
        opacity: 0;
    }
    100%{
        z-index: 12;
        opacity: 0;
        transform: rotateY(180deg);
        transform-origin: right center;
        background: var(--bg-white);
    }
}
@keyframes foldbox4{
    0%{
        opacity: 0;
        transform: rotateY(-180deg);
        transform-origin: left center;
        background: var(--bg-khaki2);
    }
    19%{
        opacity: 0;
    }
    20%{
        opacity: 1;
        transform: rotateY(-180deg);
    }
    26%{
        transform: rotateY(0deg);
        transform-origin: left center;
        background: var(--bg-khaki2);
    }
    27%{
        transform-origin: right center;
        background: var(--bg-white);
    }
    48%{
        z-index: 4;
    }
    49%{
        z-index: 11;
    }
    75%{
        opacity: 1;
        transform: rotateY(0deg);
    }
    77%{
        transform-origin: right center;
    }
    78%{
        background: var(--bg-white);
    }
    79%{
        background: var(--bg-khaki2);
    }
    80%{
        opacity: 1;
        transform: rotateY(180deg);
    }
    81%{
        opacity: 0;
    }
    100%{
        z-index: 11;
        opacity: 0;
        transform: rotateY(180deg);
        transform-origin: right center;
        background: var(--bg-white);
    }
}
@keyframes foldbox5{
    0%{
        opacity: 0;
        transform: rotateY(-180deg);
        transform-origin: left center;
        background: var(--bg-khaki2);
    }
    24%{
        opacity: 0;
    }
    25%{
        opacity: 1;
        transform: rotateY(-180deg);
    }
    31%{
        transform: rotateY(0deg);
        transform-origin: left center;
        background: var(--bg-khaki2);
    }
    32%{
        transform-origin: right center;
        background: var(--bg-white);
    }
    48%{
        z-index: 5;
    }
    49%{
        z-index: 10;
    }
    80%{
        opacity: 1;
        transform: rotateY(0deg);
    }
    82%{
        transform-origin: right center;
    }
    83%{
        background: var(--bg-white);
    }
    84%{
        background: var(--bg-khaki2);
    }
    85%{
        opacity: 1;
        transform: rotateY(180deg);
    }
    86%{
        opacity: 0;
    }
    100%{
        z-index: 10;
        opacity: 0;
        transform: rotateY(180deg);
        transform-origin: right center;
        background: var(--bg-white);
    }
}
@keyframes foldbox6{
    0%{
        opacity: 0;
        transform: rotateY(-180deg);
        transform-origin: left center;
        background: var(--bg-khaki2);
    }
    29%{
        opacity: 0;
    }
    30%{
        opacity: 1;
        transform: rotateY(-180deg);
    }
    36%{
        transform: rotateY(0deg);
        transform-origin: left center;
        background: var(--bg-khaki2);
    }
    37%{
        transform-origin: right center;
        background: var(--bg-white);
    }
    48%{
        z-index: 6;
    }
    49%{
        z-index: 9;
    }
    85%{
        opacity: 1;
        transform: rotateY(0deg);
    }
    87%{
        transform-origin: right center;
    }
    88%{
        background: var(--bg-white);
    }
    89%{
        background: var(--bg-khaki2);
    }
    90%{
        opacity: 1;
        transform: rotateY(180deg);
    }
    91%{
        opacity: 0;
    }
    100%{
        z-index: 9;
        opacity: 0;
        transform: rotateY(180deg);
        transform-origin: right center;
        background: var(--bg-white);
    }
}
@keyframes foldbox7{
    0%{
        opacity: 0;
        transform: rotateY(-180deg);
        transform-origin: left center;
        background: var(--bg-khaki2);
    }
    34%{
        opacity: 0;
    }
    35%{
        opacity: 1;
        transform: rotateY(-180deg);
    }
    40%{
        background: var(--bg-khaki2);
    }
    48%{
        z-index: 7;
    }
    49%{
        z-index: 8;
    }
    50%{
        transform: rotateY(0deg);
        transform-origin: left center;
        background: var(--bg-white);
    }
    51%{
        transform-origin: right center;
    }
    90%{
        opacity: 1;
        transform: rotateY(0deg);
    }
    91%{
        transform-origin: right center;
    }
    94%{
        background: var(--bg-white);
    }
    95%{
        background: var(--bg-khaki2);
    }
    100%{
        z-index: 8;
        opacity: 0;
        transform: rotateY(180deg);
        transform-origin: right center;
        background: var(--bg-white);
    }
}
.rotate{
    position: relative;
    transform-origin: top center;
    backface-visibility: hidden;
}
.updown{
    display: flex;
    justify-content: center;
    overflow: hidden;
    opacity: 0; /* LODINGの読み込み時間用 */
}
.heading{
    position: relative;
    margin: 2rem 0;
    font-size: 2.5rem;
    color: var(--color-khaki);
    letter-spacing: .5rem;
    line-height: 1;
    overflow: hidden;
}
.heading::after{
    position: absolute;
    content: "";
    top: 50%;
    width: 0;
    margin: 0 0 0 10%;
    border: 1px solid var(--color-khaki);
}
.heading-vertical-l,.heading-vertical-r{
    top: 0;
    width: 10%;
    height: 100%;
    background: var(--bg-khaki3);
}
.heading-vertical-l{
    position: absolute;
    left: 0;
}
.heading-vertical-r{
    position: absolute;
    right: 0;
}
.heading-vertical{
    position: absolute;
    top: 7rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    writing-mode: vertical-rl;
    color: #fff;
    font-weight: bold;
    line-height: 2.5;
    letter-spacing: .5rem;
}
.heading-vertical::after{
    position: absolute;
    content: "";
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    margin: 25% 0 0 0;
    border: 1px solid #fff;
}
.roop-font{
    position: absolute;
    display: inline-block;
    top: 0;
    z-index: 1;
    line-height: 1;
    font-size: 20rem;
    letter-spacing: 3rem;
    color: #fff;
}
.roop-font-l{
    left: 0;
}
.roop-font-r{
    right: 0;
}
svg{
    margin: 0 1rem;
    vertical-align: middle;
    transform: rotate(-90deg);
}
text{
    transform: rotate(90deg);
    font-weight: bold;
}
circle{
    stroke: var(--color-khaki);
    stroke-width: 2;
}
@keyframes drawCircle{
    to{
        stroke-dasharray: 628;
    }
}
.boxname-wrapper{
    text-align: center;
    margin: 2rem 0;
}
.boxname{
    display: inline-block;
    margin: 2rem 0;
    vertical-align: middle;
    letter-spacing: .3rem;
}
/* スライドするカバー */
.itembox-cover{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2000;
    width: 100%;
    height: 100%;
    background: var(--bg-craftpaper);
    transform-origin: left center;
}
.itembox-cover::after{
    position: absolute;
    content: "WORKS";
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 2.5rem;
    font-weight: bold;
    letter-spacing: .5rem;
    color: #fff;
}
.itembox{
    position: relative;
    width: 230px;
    height: 230px;
    margin: 0 auto;
    padding: 1.5rem;
    background: var(--bg-craftpaper);
    overflow: hidden;
    perspective: 230px;
}
.itembox:hover{
    transition: .5s;
    box-shadow: 0px 4px 4px #888;
}
/* hover時の出現文字 */
.itembox::before{
    position: absolute;
    content: "Click to view";
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    bottom: -3rem;
    color: #fff;
    opacity: 0;
    font-size: 1.5rem;
}
.itembox:hover::before{
    bottom: .1rem;
    opacity: 1;
    transition: .5s;
}
/* hover時の背景 */
.itembox::after{
    position: absolute;
    content: "";
    bottom: 0rem;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    opacity: 0;
    background: var(--bg-khaki3);
}
.itembox:hover::after{
    opacity: 1;
    transition: .5s;
}
#skills .itembox:hover::before{
    pointer-events: none;
    content: "";
}
#skills .itembox:hover::after{
    pointer-events: none;
    background: none;
}
#skills .itembox:hover{
    pointer-events: none; /* hoverを無効化 */
    box-shadow: none;
}
.works-text-wrapper{
    margin: 2rem 0;
    text-align: left;
    overflow: hidden;
}
/* 「about the design」の見出し */
.text-title{
    margin: 2rem 0;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--color-khaki);
    letter-spacing: .3rem;
}
.text-title::after{
    position: absolute;
    content: "";
    top: 50%;
    width: 0;
    margin: 0 0 0 8%;
    border: 1px solid var(--color-khaki);
}
.text-title-l{
    position: relative;
}
.text-title-l::after{
    animation: heading-border 6s linear infinite;
}
.text-title-c{
    position: relative;
}
.text-title-c::after{
    animation: heading-border 6s linear infinite 2s;
}
.text-title-r{
    position: relative;
}
.text-title-r::after{
    animation: heading-border 6s linear infinite 4s;
}
@keyframes heading-border{
    0%{
        width: 0;
    }
    100%{
        width: 100%;
    }
}

/* sp-header
------------------------------------*/
.l-header{
    position: fixed;
    width: 100%;
    z-index: 1000;
}
.menu-btn{
    display: inline-block;
    position: fixed;
    cursor: pointer;
}
.l-btn{
    position: absolute;
    z-index: 3000;
}
.l-btn::before,.l-btn::after{
    position: absolute;
    content: "";
    width: 60px;
    height: 60px;
    transition: .5s;
}
.l-btn::before{
    background: var(--bg-khaki3);
    clip-path: polygon(0 0,0 100%,100% 0);
}
.l-btn::after{
    background: var(--bg-beige2);
    clip-path: polygon(100% 0,0 100%,100% 100%);
}
.active.l-btn::before{
    clip-path: polygon(0 0,0 100%,100% 100%,100% 0);
    background: none;
    transition: .5s;
}
.active.l-btn::after{
    transform: matrix(0, -1, -1, 0, 0, 0);
    background: var(--bg-beige2);
    transition: .5s;
}
.l-btn .text-wave{
    position: absolute;
    z-index: 4000;
    width: 60px;
    height: 60px;
    line-height: 60px;
    font-size: 10px;
    letter-spacing: .3rem;
}
.l-btn .text-wave:nth-child(2){ /* CLOSE */
    transform: translateY(-100%);
    opacity: 0;
}
.active.l-btn .text-wave:nth-child(1){ /* MENU */
    opacity: 0;
}
.active.l-btn .text-wave:nth-child(2){ /* CLOSE */
    opacity: 1;
    transform: translateY(0);
}
.navi{
    display: none;
    position: relative;
    top: -120%;
    left: 0;
    z-index: 1000;
    padding: 60px 0;
    width: 100%;
    height: 100vh;
    text-align: center;
    background: var(--bg-khaki3);
    transition: .5s;
}
.navi-list a{
    display: inline-block;
    width: 100%;
    height: calc((100vh - 120px) / 3);
    line-height: calc((100vh - 120px) / 3);
    font-weight: bold;
    font-size: 1.5rem;
    letter-spacing: .5rem;
    transition: .5s;
}
.text-wave{
    display: flex;
    justify-content: center;
    align-items: center;
}
@keyframes wave{
    0%{
        transform: translateY(0);
    }
    100%{
        transform: translateY(-10px);
    }
}
.text-wave:hover span{
    animation: wave .2s alternate 2;
}
.text-wave:hover span:nth-child(2){
    animation-delay: .1s;
}
.text-wave:hover span:nth-child(3){
    animation-delay: .2s;
}
.text-wave:hover span:nth-child(4){
    animation-delay: .3s;
}
.text-wave:hover span:nth-child(5){
    animation-delay: .4s;
}
.text-wave:hover span:nth-child(6){
    animation-delay: .5s;
}
.text-wave:hover span:nth-child(7){
    animation-delay: .6s;
}
.active.navi{
    display: block;
    top: 0;
    animation: naviOpen .5s linear forwards;
}
@keyframes naviOpen{
    0%{
        transform: rotateX(30deg);
        transform-origin: top;
    }
    100%{
        transform: rotateX(0deg);
        transform-origin: top;
    }
} 
.navi-list a:hover{
    transform: rotateX(20deg);
    transform-origin: top;
    transition: .5s;
}

/* sp-hero
------------------------------------*/
.hero{
    position: relative;
    height: 100vh;
    z-index: 100;
    overflow: hidden;
}
.hero-title{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 3rem;
    color: var(--color-khaki);
    letter-spacing: 1rem;
}
.pagetop-icon{
    position: fixed;
    right: 0;
    z-index: 500;
    width: 60px;
    height: 60px;
    cursor: pointer;
}
.pagetop-icon.l-btn{
    transform: rotate(180deg);
}
.pagetop-icon .text-wave{
    transform: rotate(180deg);
}

/* sp-contents-about
------------------------------------*/
.about-text{
    line-height: 2.5;
}

/* sp-contents-skills
------------------------------------*/
/* ベースのボックス(design) */
.skillsbox-design{
    position: absolute;
    width: 200px;
    height: 200px;
}
/* Photoshop */
.skillsbox-design-l{
    clip-path: polygon(0 0,100% 0,0 100%);
    background: var(--bg-beige1);
}
/* Illustrator */
.skillsbox-design-r{
    clip-path: polygon(100% 0,0 100%,100% 100%);
    background: var(--bg-beige2);
}
/* ベースのボックス(coding) */
.skillsbox-coding{
    position: absolute;
    width: 200px;
    height: 200px;
}
/* CSS */
.skillsbox-coding-t{
    background: var(--bg-khaki1);
    clip-path: polygon(0 0,100% 0,50% 50%);
}
/* jQuery */
.skillsbox-coding-r{
    background: var(--bg-khaki3);
    clip-path: polygon(100% 0,50% 50%,100% 100%);
}
/* JavaScript */
.skillsbox-coding-b{
    background: var(--bg-khaki1);
    clip-path: polygon(50% 50%,0 100%,100% 100%);
}
/* PHP */
.skillsbox-coding-l{
    background: var(--bg-khaki3);
    clip-path: polygon(0 0,0 100%,50% 50%);
}
/* 名前のベース(design) */
.skillsname-design-l,.skillsname-design-r{
    position: absolute;
    color: var(--color-khaki);
    font-weight: bold;
}
/* Photoshop */
.skillsname-design-l{
    top: 25%;
    left: 15%;
}
/* Illustrator */
.skillsname-design-r{
    bottom: 25%;
    right: 15%;
}
/* HTML */
.skillsname-HTML{
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 100;
    transform: translate(-50%,-50%);
    color: #fff;
    font-weight: bold;
}
/* 名前のベース(coding) */
.skillsname-coding{
    position: absolute;
    color: #fff;
    font-weight: bold;
}
/* CSS */
.skillsname-coding-t{
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
}
/* jQuery */
.skillsname-coding-r{
    top: 50%;
    right: 10%;
    transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl;
}
/* JavaScript */
.skillsname-coding-b{
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
}
/* PHP */
.skillsname-coding-l{
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
}

/* sp-contents-works
------------------------------------*/
.works-img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 200px;
    height: 90%;
    object-fit: contain;
    cursor: pointer;
    z-index: 1;
}
.modal{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-craftpaper);
    z-index: 2000;
}
.close-btn{
    display: block;
    position: absolute;
    cursor: pointer;
    top: 30px;
    right: 30px;
    z-index: 4000;
    width: 60px;
    height: 60px;
}
.close-btn:hover{
    transition: .5s;
    box-shadow: 0px 4px 4px #888;
}
.bigimg img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 90%;
    height: 90%;
    object-fit: contain;
}

/* sp-footer
------------------------------------*/
footer{
    padding: 2rem;
    text-align: center;
    color: #fff;
    letter-spacing: .3rem;
    background: var(--bg-khaki3);
}

/*************************************/
@media screen and ( min-width: 600px ){
/*************************************/
/* tab-base
------------------------------------*/
body{
    font-size: 14px;
    font-size: 1.4rem;
}

/* tab-Layout
------------------------------------*/
.l-container-l,.l-container-r{
    padding: 5rem;
}
.flex-start-dtp{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: start;
}
.flex-box{
    max-width: calc((100% / 2) - 20px);
}
.heading{
    font-size: 3.5rem;
}

/* tab-Element
------------------------------------*/
.loading-box{
    width: 560px;
    height: 80px;
    perspective: 560px;
}
.loading-box div{
    width: calc(560px / 7);
    height: 80px;
    font-size: 5rem;
    line-height: 80px;
}
.loading-box div:nth-child(2){
    left: calc(560px / 7);
}
.loading-box div:nth-child(3){
    left: calc((560px / 7) * 2);
}
.loading-box div:nth-child(4){
    left: calc((560px / 7) * 3);
}
.loading-box div:nth-child(5){
    left: calc((560px / 7) * 4);
}
.loading-box div:nth-child(6){
    left: calc((560px / 7) * 5);
}
.loading-box div:nth-child(7){
    left: calc((560px / 7) * 6);
}
.itembox{
    width: 260px;
    height: 260px;
    margin: 0 auto;
}

/* tab-header
------------------------------------*/
.menu-btn{
    display: none;
}
.navi{
    display: flex!important;
    justify-content: end;
    top: 0;
    left: 0;
    padding: 0;
    width: 100%;
    height: 60px;
}
.navi-list a{
    width: 145px;
    height: 60px;
    line-height: 60px;
}

/* tab-hero
------------------------------------*/
.hero-title{
    font-size: 5rem;
    letter-spacing: 1.25rem;
}

/* tab-contents-skills
------------------------------------*/
.skillsbox{
    width: 230px;
    height: 230px;
}
.skillsbox-design{
    width: 230px;
    height: 230px;
}
.skillsbox-coding{
    width: 230px;
    height: 230px;
}

/* tab-contents-works
------------------------------------*/
.works-img{
    width: 230px;
}
}

/*************************************/
@media screen and ( min-width: 960px ){
/*************************************/
/* pc-base
------------------------------------*/
body{
    font-size: 16px;
    font-size: 1.6rem;  
}

/* pc-Layout
------------------------------------*/
.l-container-l,.l-container-r{
    padding: 5rem 5vw;
}
.flex-box{
    max-width: calc((100% / 3) - 20px);
}
.flex-center{
    display: flex;
    justify-content: start;
    align-items: center;
}
.margin-l5{
    margin: 0 0 0 5vw;
}

/* pc-Element
------------------------------------*/
.loading-box{
    width: 840px;
    height: 120px;
    perspective: 840px;
}
.loading-box div{
    width: calc(840px / 7);
    height: 120px;
    font-size: 7rem;
    line-height: 120px;
}
.loading-box div:nth-child(2){
    left: calc(840px / 7);
}
.loading-box div:nth-child(3){
    left: calc((840px / 7) * 2);
}
.loading-box div:nth-child(4){
    left: calc((840px / 7) * 3);
}
.loading-box div:nth-child(5){
    left: calc((840px / 7) * 4);
}
.loading-box div:nth-child(6){
    left: calc((840px / 7) * 5);
}
.loading-box div:nth-child(7){
    left: calc((840px / 7) * 6);
}
.heading{
    font-size: 4.5rem;
}
.boxname-wrapper{
    width: 260px;
}
.itembox{
    width: 260px;
    height: 260px;
    margin: 0 auto;
}

/* pc-header 
------------------------------------*/
.l-header{
    max-width: 1920px;
}

/* pc-hero
------------------------------------*/
.hero-title{
    font-size: 7rem;
    letter-spacing: 1.5rem;
}
}

/*************************************/
@media screen and ( min-width: 1200px ){
/*************************************/
.margin-lr7{
    margin: 0 7vw;
}
}
/*************************************/
@media screen and ( min-width: 1920px ){
/*************************************/
.pagetop-icon{
    right: calc((100vw - 1920px) / 2);
}
}