@charset "utf-8";
@import url(sanitize.css);

/* 変数 */

:root {
    --firstcolor: #FBC687;
    --secondcolor: #F4A392;
    --thirdcolor: #AACDBE;
    --basecolor: #F2EDE7;
    --myfont: 'Sacramento', cursive;
}

/* flexbox */

.flex {
    display: flex;
}

/* 基本設定 */

body {
    width: 100%;
    color:#333;
    font-family: "Helvetica Neue","游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}

.wrap {
    width: 1200px;
    margin: 0 auto;
}

img {
    vertical-align: bottom;
}

a {
    text-decoration: none;
    color: #000;
}

ul {
    padding: 0;
}

ul li {
    list-style: none;
}

.en {
    font-family: var(--myfont);
}

h2 {
    text-align: center;
    margin-bottom: 48px;
    margin-top: 48px;
}

h2 .en {
    font-size: 60px;
    font-weight: normal;
    margin-right: 10px;
}

h2 .ja {
    position: relative;
    font-size: 16px;
    letter-spacing: 0.2rem;
}

h2.white::before {
    content: "";
    background-image: url(img/garland.svg);
    width: 84px;
    height: 61px;
    position: absolute;
    left: 33%;
    top: 0;
    display: inline-block;
    z-index: -1;
}

h2.white::after {
    content: "";
    background-image: url(img/garland.svg);
    width: 84px;
    height: 61px;
    position: absolute;
    right: 33%;
    top: 0;
    display: inline-block;
    transform: scale(-1,1);
    z-index: -1;
}

h2.pink::before {
    content: "";
    background-image: url(img/garland_pink.svg);
    width: 84px;
    height: 61px;
    position: absolute;
    left: 33%;
    top: 0;
    display: inline-block;
    z-index: -1;
}

h2.pink::after {
    content: "";
    background-image: url(img/garland_pink.svg);
    width: 84px;
    height: 61px;
    position: absolute;
    right: 33%;
    top: 0;
    display: inline-block;
    transform: scale(-1,1);
    z-index: -1;
}

h2.green::before {
    content: "";
    background-image: url(img/garland_green.svg);
    width: 84px;
    height: 61px;
    position: absolute;
    left: 33%;
    top: 0;
    display: inline-block;
    z-index: -1;
}

h2.green::after {
    content: "";
    background-image: url(img/garland_green.svg);
    width: 84px;
    height: 61px;
    position: absolute;
    right: 33%;
    top: 0;
    display: inline-block;
    transform: scale(-1,1);
    z-index: -1;
}

#skills h2 .en::before {
    content: "";
    background-image: url(img/bb_skill.svg);
    width: 250px;
    height: 200px;
    top: 55px;
    position: absolute;
    display: inline-block;
    z-index: -5;
}

#works h2 .en::before {
    content: "";
    background-image: url(img/bb_white.svg);
    width: 300px;
    height: 200px;
    top: 55px;
    position: absolute;
    display: inline-block;
    z-index: -5;
}

#profile h2 .en::before {
    content: "";
    background-image: url(img/bb_green.svg);
    width: 300px;
    height: 200px;
    top: 55px;
    position: absolute;
    display: inline-block;
    z-index: -5;
}

#contact h2 .en::before {
    content: "";
    background-image: url(img/bb_white.svg);
    width: 300px;
    height: 200px;
    top: 55px;
    position: absolute;
    display: inline-block;
    z-index: -5;
}

h3 {
    margin-bottom: 32px;
}

h3 .en {
    font-size: 32px;
}

h3 .ja {
    margin-left: 10px;
    font-size: 16px;
}

/* 波 */

.wave {
    width: 100%;
    position: absolute;
    top: -120px;
    left: 0;
}

#mv .wave {
    bottom: 0;
    height: 150vh;
}

#message .wave {
    z-index: -9;
    height: 300vh;
}

#skills .wave {
    z-index: -8;
    top: -150px;
    height: 300vh;
}

#works .wave {
    z-index: -7;
    height: 300vh;
}

#profile .wave {
    z-index: -6;
    height: 130vh;
}

#contact .wave {
    z-index: -5;
    height: 105vh;
    overflow: hidden;
}

/* グローバルナビゲーション */

#header {
	position: fixed;
    right: 30px;
	text-align: center;
    z-index: 99;
}

#header nav ul {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

#header nav ul li {
    margin-top: 24px;
}

#header nav ul li a {
    color: #666;
    display: block;
    transition: .2s;
}

#header nav ul li a:hover {
    color: #fff;
}


/* メインビジュアル */

#mv {
    height: 100vh;
    justify-content: center;
    align-items: center;
    background: linear-gradient(-73deg, #F2EDE7 0%, #F2EDE7 50%, #EDE4CE 50%, #EDE4CE 100%);
    z-index: -20;
    position: relative;
    padding-bottom: 10vh;
}

h1 {
    text-align: center;
}

h1 .en {
    display: block;
    color: #C7B299;
    font-family: var(--myfont);
    font-size: 88px;
    font-weight: normal;
}

h1 .ja {
    font-family: "ta-kotodama-r", sans-serif;
    font-size: 24px;
    letter-spacing: 0.6em;
    position: relative;
    top: -40px;
}

.mv_line1 {
    max-width: 355px;
    margin-left: 15%;
}

.mv_line2 {
    max-width: 440px;
}

.mv_txt {
    width: 50%;
    position: absolute;
    top: 50vh;
    left: 80px;
    transform: translateY(-50%);
}

.mv_spoon {
    width: 40%;
    position: absolute;
    top: 50vh;
    left: 50vw;
    transform: translate(-10%,-50%);
}



.mv_scroll {
    position: absolute;
    right: 30px;
    bottom: 80px;
    width: 180px;
    z-index: 30;
}


/* メッセージ */

#message {
    position: relative;
    height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#message .flex {
    justify-content: center;
    align-items: center;
}

.message_yum {
    width: 600px;
}

#message .rotate1 {
    width: 100px;
    position: absolute;
    animation: rotate_anime 20s linear infinite;
}

#message .rotate2 {
    width: 50px;
    position: absolute;
    left: 20%;
    top: 40%;
    animation: rotate_anime 16s linear infinite;
}

#message .rotate3 {
    width: 30px;
    position: absolute;
    top: 30%;
    left: 45%;
    animation: rotate_anime 10s linear infinite;
}

#message .rotate4 {
    width: 120px;
    position: absolute;
    top: 10%;
    left: 35%;
    animation: rotate_anime 30s linear infinite;
}

@keyframes rotate_anime {
    0% {
        transform: rotate(0deg);
    }
    100% {
    transform: rotate(360deg);
    }
}

.message_txt {
    writing-mode: vertical-rl;
    letter-spacing: 0.3rem;
    line-height: 3rem;
}

.message_txt img {
    width: 70px;
}

.message_1 {
    margin-top: -50px;
    margin-left: -50px;
}

.message_2 {
    margin-top: 230px;
    margin-right: -30px;
}

/* skills */

#skills {
    position: relative;
    height: 900px;
}

#skills .flex {
    justify-content: center;
    height: 500px;
}

.design {
    margin-top: 24px;
    padding-right: 24px;
    position: relative;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 500px;
}


.design svg.fluid {
    position: absolute;
    z-index: -1;
    top: -160px;
    right: -200px;
    width: 800px;
    height: 850px;
    opacity: 0.6;
}

.cording {
    margin-top: 24px;
    padding-left: 24px;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 500px;
}

.cording svg.fluid {
    position: absolute;
    z-index: -1;
    top: -160px;
    left: -200px;
    width: 800px;
    height: 850px;
    opacity: 0.6;
}

#skills .skill_item {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
}

.ps {
    width: 150px;
    height: 120px;
    background: rgba(234, 144, 122, 0.6);
    font-size: 1.5rem;
    border-radius: 47% 53% 50% 50% / 48% 34% 66% 52%;
    top: 30px;
    left: -50px;
}

.ai {
    width: 200px;
    height: 150px;
    right: 30px;
    bottom: -80px;
    background: rgba(234, 144, 122, 0.6);
    border-radius: 64% 36% 49% 51% / 61% 55% 45% 39%;
    font-size: 1.7rem;
}

.xd {
    width: 100px;
    height: 100px;
    left: 30px;
    bottom: -70px;
    background: rgba(234, 144, 122, 0.6);
    border-radius: 47% 53% 50% 50% / 48% 34% 66% 52%;
    font-size: 1.8rem;
}


.html {
    width: 200px;
    height: 180px;
    left: 30%;
    bottom: -130px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 45% 55% 20% 80% / 50% 55% 45% 50% ;
    font-size: 1.4rem;
}


.css {
    width: 140px;
    height: 130px;
    left: 0;
    top: -40px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 46% 54% 64% 36% / 33% 34% 66% 67%;
    font-size: 1.3rem;
}

.js {
    width: 85px;
    height: 70px;
    right: -20px;
    bottom: 200px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 38% 62% 51% 49% / 34% 46% 54% 66% ;
}


.wp {
    width: 100px;
    height: 100px;
    right: -100px;
    top: 90px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 41% 59% 44% 56% / 54% 33% 67% 46%;
}


#skills img {
    height: 120px;
    margin: 32px 0;
}

#skills .sp_tool {
    display: none;
}

/* works */

#works {
    position: relative;
    height: 1400px;
    text-align: center;
}

#works a {
    color: #000;
    transition: 0.3s;
}

#works a:hover {
    opacity: 0.6;
}

#works ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#works ul li {
    width: 550px;
    margin-bottom: 40px;
}

.works_img img {
    width: 500px;
    box-shadow: 1px 1px 8px 2px rgba(0, 0, 0, 0.2);
}

.banner {
    max-width: 300px;
}

/* works中身 */

.works_content {
    height: 150px;
    overflow-y: scroll;
    -ms-overflow-style: none;    /* IE, Edge 対応 */
    scrollbar-width: none;       /* Firefox 対応 */
    padding: 32px;
}

.works_content::-webkit-scrollbar {  /* Chrome, Safari 対応 */
    display:none;
}

img.cap {
    width: 50%;
    height: 50%;
    margin: 0 auto;
}

.works_content .info {
    flex-basis: 45%;
}

.works_content h1 {
    text-align: left;
}

.works_content .dummy {
    font-size: 0.8rem;
    color: var(--secondcolor);
}

.works_content dl {
    flex-flow: wrap;
    text-align: left;
    background: var(--basecolor);
    padding: 16px;
    width: 100%;
    font-size: 14px;
    margin: 16px auto;
}

.works_content dl dt {
    flex-basis: 15%;
}

.works_content dl dd {
    flex-basis: 85%;
    margin: 0;
}

.works_content h1 {
    border-bottom: 3px dotted var(--secondcolor);
}

.works_content .btn {
    max-width: 300px;
    margin: 0 auto;
}

.works_content .btn a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 70px;
    background-color: #EA907A;
    box-sizing: border-box;
    color: #fff;
    font-size: 16px;
    letter-spacing: 0.1em;
    line-height: 2.0;
    text-decoration: none;
    transition-duration: 0.3s;
    position: relative;
}

.works_content .btn a:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 30px 40px 0 0;
    border-color: #ffffff transparent transparent transparent;
}

.works_content .btn a:after {
    content: "";
    position: absolute;
    top: -6px;
    left: 5px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 40px 30px;
    border-color: transparent transparent #efefef transparent;
    box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.15);
    transform: rotate(16deg);
}

.works_content .btn a:hover {
    background-color: #FBC687;
}

.works_content .btn a span {
    position: relative;
    padding-left: 16px;
    letter-spacing: 0.05em;
}

.works_content .btn a span:before {
    content: '';
    width: 6px;
    height: 6px;
    border: 0;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -4px;
}

.works_content .txt {
    text-align: left;
    line-height: 1.6rem;
}

#works .fa-angle-right {
    margin-left: 16px;
}

#works ul li span {
    font-size: 14px;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 20px;
    padding: 8px 16px;
    margin-right: 8px;
}

#works .fa-pen-nib {
    margin-right: 8px;
}


/* profile */

#profile {
    position: relative;
    height: 750px;
    justify-content: center;
    position: relative;
}

#profile .flex {
    justify-content: center;
    align-items: center;
    margin-top: 80px;
}

.profile_txt {
    letter-spacing: 0.2rem;
    line-height: 1.6rem;
}

.profile_img {
    border-radius: 50%;
    margin-right: 32px;
    width: 300px;
}

.profile_line1 {
    width: 200px;
    position: absolute;
    left: 100px;
    top: 100px;
}

.profile_line2 {
    width: 125px;
    position: absolute;
    right: 100px;
    bottom: 100px;
}

.profile_beer {
    text-align: center;
    margin: 0 auto;
    width: 150px;
}

/* contact */

#contact {
    position: relative;
    height: 700px;
    text-align: center;
}

form {
    margin-top: 64px;
}

input, textarea{
    background-color: #fff;
    width: 500px;
}

#contact label {
    text-align: left;
    width: 150px;
}

form div {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

form .btn_area {
    display: flex;
    justify-content: center;
    align-items: center;
}

form .btn_area input{
    width: 160px;
    height: 48px;
    background-color: var(--thirdcolor);
    border: 1px solid #000;
    transition: 0.3s;
}

form .btn_area input:hover{
    background-color: rgba(255, 255, 255, 0.4);

}

form span {
    color: white;
    margin-left: 4px;
    font-size: 1.5rem;
}

/* footer */

footer {
    position: fixed;
    left: -50px;
    top: 50%;
    z-index: 50;
    transform: rotate(-90deg);
    color: #666;
}

/* ------SP------ */

@media screen and (max-width:1200px) {
    .wrap {
        width: 100%;
    }
    #message {
        height: 1000px;
    }
    #message .flex{
        flex-direction: column;
    }
    #message .message_img {
        margin-bottom: 64px;
    }
    #works {
        height: 2550px;
        margin: 0 auto;
    }
    #works ul {
        flex-direction: column;
    }
    #works ul li {
        width: 100%;
    }
    #works .wave {
        z-index: -7;
        height: 3000px;
    }
    #profile {
        height: 950px;
    }
    #profile .flex {
        flex-direction: column;
        margin: 0;
    }
    .profile_img {
        margin: 0;
    }
    #profile .wave {
        height: 1500px;
    }
    #contact .wave {
        height: 900px;
    }
}

@media screen and (max-width:768px) {
    .sp_wrap {
        padding: 0 8px;
    }
    #g-nav {
        display: none;
    }
    h2.white::before {
        background-image: none;
    }
    h2.white::after {
        background-image: none;
    }
    h2.pink::before {
        background-image: none;
    }
    h2.pink::after {
        background-image: none;
    }
    h2.green::before {
        background-image: none;
    }
    h2.green::after {
        background-image: none;
    }
    #mv .mv_spoon {
        top: 40vh;
        left: 60%;
    }
    #mv .mv_txt {
        top: 50vh;
        left: 10px;
    }
    #mv h1 .en {
        font-size: 48px;
    }
    #mv h1 .ja {
        font-size: 16px;
        letter-spacing: 0.5rem;
    }
    #mv .mv_scroll {
        width: 100px;
    }
    #message .message_img {
        max-width: 100%;
    }
    #message .message_yum {
        max-width: 100%;
    }
    #message .rotate1 {
        width: 60px;
    }
    #message .rotate4{
        width: 50px;
    }
    .message_txt {
        writing-mode: inherit;
        letter-spacing: 0.2rem;
        line-height: 2.5rem;
    }
    .message_1, .message_2 {
        display: none;
    }
    #skills {
        height: 1200px;
    }
    #skills .flex {
        flex-direction: column;
    }
    #skills .skill_item {
        display: none;
    }
    #skills .sp_tool {
        display: block;
    }
    #skills .design {
        margin-top: 400px;
    }
    #skills .design svg.fluid {
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
    }
    #skills .cording svg.fluid {
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
    } 
    #works {
        height: 2700px;
    }
    .works_img img {
        max-width: 100%;
    }
    .works_content > .flex {
        flex-direction: column;
    }
    .works_content .cap {
        width: 100%;
        height: auto;
    }
    #profile .profile_txt {
        letter-spacing: 0.2rem;
    }
    #profile .profile_line1, .profile_line2 {
        display: none;
    }
    #profile .profile_txt br {
        display: none;
    }
    #contact .wave {
        height: 900px
    }
    #contact br {
        display: none;
    }
    #contact form div {
        flex-direction: column;
    }
    input, textarea {
        width: 100%;
    }
    footer {
        position: static;
        transform: none;
        text-align: center;
    }
}