@charset "utf-8";


html {
    scroll-behavior: smooth;
}
body {
    width: 100%;
    height: 100%;
    font-family: "IM Fell Double Pica", serif;
    letter-spacing: .1em;
    background-color: #F8FAF1;
}

/* ヘッダー -------------------------*/
#mainvisual {
    width: 100%;
    height: 100vh;
    position: relative;
}
.leaf {
    position: absolute;
    top: 20%;
    right: 10%;
    width: 750px;
    height: 600px;
}
header{
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px
}
h1 a{
    text-decoration: none;
    color: #333;
    font-size: 30px;
}
nav ul{
    display: flex;
    list-style: none;
}
#mainvisual li a{
    text-decoration: none;
    color: #333;
    margin-left: 2em;
}
#mainvisual li a:hover{
    color: #749D2D;
}
h2{
    position: absolute;
    top:40%;
    left: 20%;
    font-size: 38px;
}
.slide-in_text{
    color: #B9D08B;
    margin-left: 180px;
}
/* 流れる文字 */
#mainvisual h2{
    overflow: hidden;
}
.slide-in {
    overflow: hidden;
    display: inline-block;
}
.slide-in_inner {
    display: inline-block;
}
.leftAnime{
    opacity: 0;
}
.slideAnimeLeftRight {
    animation-name:slideTextX100;
    animation-duration:3s;
    animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes slideTextX100 {
    from {
    transform: translateX(-100%);
    opacity: 0;
    }
    to {
    transform: translateX(0);
    opacity: 1;
    }
}
.slideAnimeRightLeft {
    animation-name:slideTextX-100;
    animation-duration:3s;
    animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes slideTextX-100 {
    from {
    transform: translateX(100%);
    opacity: 0;
    }
    to {
    transform: translateX(0);
    opacity: 1;
    }
}

main{
    padding: 80px;
}
section {
    margin-bottom: 120px;
}
h3{
    font-size: 64px;
    margin-bottom: 3rem;
}
/* ABOUT -------------------------*/
.about-wrapper{
    display: flex;
}
.about-img{
    width: 320px;
    height: 400px;
    box-shadow: 10px 10px 26px -5px #777777;
    transform: rotate(5deg);
    margin: 0 5rem;
    position: relative;
}
.about-content{
    display: flex;
    flex-direction: column;
}
.about-content-text{
    margin-bottom: 7rem;
}
.about-name {
    display: flex;
    align-items: center;
    padding-bottom: 3rem;
}
.about-text {
    line-height: 1.8;
}
.about-name-text {
    font-size: 30px;
    font-weight: bold;
}
.about-name-text2 {
    font-size: 12px;
    margin-left: 2rem;
    vertical-align: bottom;
}

/* ボタン */
.about-btn a {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-left: auto;
    max-width: 230px;
    padding: 10px 0px 10px 25px;
    line-height: 1.8;
    text-decoration: none;
    color: #333;
    transition: 0.3s ease-in-out;
}
.about-btn a:before, .about-btn a:after {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
}
.about-btn a:before {
    width: 0.5rem;
    height: 0.5rem;
    left: 1.1rem;
    border-top: solid 2px #333;
    border-right: solid 2px #333;
    z-index: 2;
    transform: translateY(-50%) rotate(45deg);
    transition: all 0.3s;
}
.about-btn a:after {
    left: 0;
    background: #B9D08B;
    z-index: 1;
    width: 3rem;
    height: 3rem;
    border-radius: 4rem;
    transform: translateY(-50%);
    transition: all 0.5s;
}
.about-btn a span {
    position: relative;
    transition: all 0.3s;
    z-index: 3;
}
.about-btn a:hover span {
    color: #fff;
}
.about-btn a:hover:before {
    left: 2.5rem;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
}
.about-btn a:hover:after {
    right: 0;
    width: 100%;
    background: #749D2D;
}

/* WORKS -------------------------*/
.works-wrapper{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    align-items: center;
}
.works-img{
    width: 400px;
    height: 300px;
    object-fit: cover;
    box-shadow: #777 5px 5px 5px;
}

/* CONTACT -------------------------*/
#contact p{
    text-align: center;
    margin-bottom: 20px
}
.mail{
    display: block;
    margin: 0 auto;
    text-align: center;
}

/* スクロール時にふわっと表示させる */
.fadeIn {
    opacity: 0;
    transform: translateY(50px);
    transition: 2s;
}
.fadeIn.active {
    opacity: 1;
    transform: translateY(0);
}
/* トップへ戻るボタン ----------------------*/
#page-top a {
    padding: 20px;
    position: fixed;
    bottom: 0;
    right: 0;
}
#page-top img{
    width: 100px;
    height: 100px;
    object-fit: cover;
}


/* ABOUTページ---------------------- */
.about-page{
    display: flex;
    margin-top: 5rem;
}
.about-box {
    margin-left: 5rem;
}
.img-about{
    width: 30px;
    height: 30px;
    object-fit: cover;
}
.about-box-profile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
}
.about-box-profile-text {
    display: flex;
    gap: 0 20px;
    margin-bottom: 2.5rem;
}
h6 {
    font-size: 24px;
    font-weight: normal;
}

/* 経歴 */
.timeline {
    list-style: none;
}
.timeline li {
    margin-bottom: 60px;
}
.timeline li {
    overflow: hidden;
    margin: 0;
    position: relative;
}
.timeline-date {
    width: 110px;
    float: left;
    margin-top: 20px;
}
.timeline-content {
    width: 75%;
    float: left;
    border-left: 3px #e5e5d1 solid;
    padding: 0 0 40px 30px;
}
.timeline-content:before {
    content: '';
    width: 12px;
    height: 12px;
    background: #6fc173;
    position: absolute;
    left: 106px;
    top: 24px;
    border-radius: 100%;
}
.timeline-content p{
    line-height: 1.8;
}

/* スキル */
h5{
    font-size: 25px;
}
.skill-wrapper{
    display: flex;
    justify-content: space-around;
    margin-top: 2rem;
}
.skill-design{
    width: 400px;
    text-align: center;
}
.skill-design img{
    width: 120px;
    height: 120px;
    object-fit: cover;
}
.skill-design p{
    line-height: 1.8;
    margin-top: 1.5rem;
}
/* 今後 */
.future-wrapper {
    margin-top: 2rem;
    background-color: #749d2d;
    color: #F8FAF1;
    padding: 50px;
}
.future-wrapper_box {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}
.future-wrapper_box img {
    margin-right: 50px;
}
h7 {
    font-size: 24px;
}

/* 制作物ページ---------------------- */ */
.work {
    width: 100px;
    height: 100px;
    object-fit: cover;
}
.work-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0 auto;
}
.work-text-title {
    font-size: 24px;
    font-weight: normal;
    margin-bottom: 2rem;
}
.work-text-url {
    width: 200px;
    height: 30px;
    margin-bottom: 2rem;
}
.work-text-url a{
    font-size: 18px;
    font-weight: bold;
    padding-left: 5px;
    color: #749D2D;
}
dl {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
dt {
    width: 30%;
    padding: 20px 0;
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
}
dt::after {
    content:"";
    display:inline-block;
    width:3px;
    height:50px;
    background-color:#B9D08B;
    position:absolute;
    top:8px;
    left:-5px;
}
dd {
    width: 70%;
    padding: 20px 0;
    margin-bottom: 10px;
}
.work-text-dl {
    border: none;
}
.work-text-dt {
    width: 30%;
    padding: 0;
}
.work-text-dt::after {
    display: none;
}
.work-text-dd {
    width: 70%;
    padding: 0;
}


/* 問い合わせフォーム ----------------------*/
.contact-page{
    width: 80%;
    margin: 0 auto;
    margin-top: 3rem;
    text-align: center;
    font-size: 1em;
    line-height: 2em;
}
.form-group {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.form-group label {
    width: 150px;
    margin-right: 10px;
}
.form-group input,
.form-group textarea {
    flex: 1;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    font-size: 14px;
    padding: 5px;
}
.form-group textarea {
    height: 100px;
}
.submit {
    width: 300px;
    display: inline-block;
    background-color: #749D2D;
    color: white; 
    padding: 10px 20px;
    margin: 50px 0;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.submit:hover {
    background-color: #B9D08B;
}
.submit:active {
    background-color: #B9D08B;
}

/* 送信完了ページ ----------------------*/
.contact{
    width: 960px;
    margin: 0 auto 0 20px;
    margin-top: 3rem;
}
.breadcrumb{
    display: flex;
    gap: 0 22px;
    list-style: none;
}
.breadcrumb li {
    display: flex;
    align-items: center;
    font-size: .9em;
}
.breadcrumb li:first-child::before {
    display: inline-block;
    width: 1.2em;
    height: 1em;
    margin-right: 4px;
    background-image: url(../image/home.png);
    background-repeat: no-repeat;
    content: '';
}
.breadcrumb li:not(:last-child)::after {
    display: inline-block;
    transform: rotate(45deg);
    width: .3em;
    height: .3em;
    margin-left: 10px;
    border-top: 1px solid #333333;
    border-right: 1px solid #333333;
    content: '';
}
.breadcrumb a {
    color: #333333;
    text-decoration: none;
}

/* フッター -------------------------*/
footer{
    width: 100%;
    height: 150px;
    color: #fff;
    text-align: center;
    line-height: 150px;
    margin-top: 80px;
    background-color: #749d2d;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40' width='80' height='40'%3E%3Cpath fill='%23b9d08b' fill-opacity='0.15' d='M0 40a19.96 19.96 0 0 1 5.9-14.11 20.17 20.17 0 0 1 19.44-5.2A20 20 0 0 1 20.2 40H0zM65.32.75A20.02 20.02 0 0 1 40.8 25.26 20.02 20.02 0 0 1 65.32.76zM.07 0h20.1l-.08.07A20.02 20.02 0 0 1 .75 5.25 20.08 20.08 0 0 1 .07 0zm1.94 40h2.53l4.26-4.24v-9.78A17.96 17.96 0 0 0 2 40zm5.38 0h9.8a17.98 17.98 0 0 0 6.67-16.42L7.4 40zm3.43-15.42v9.17l11.62-11.59c-3.97-.5-8.08.3-11.62 2.42zm32.86-.78A18 18 0 0 0 63.85 3.63L43.68 23.8zm7.2-19.17v9.15L62.43 2.22c-3.96-.5-8.05.3-11.57 2.4zm-3.49 2.72c-4.1 4.1-5.81 9.69-5.13 15.03l6.61-6.6V6.02c-.51.41-1 .85-1.48 1.33zM17.18 0H7.42L3.64 3.78A18 18 0 0 0 17.18 0zM2.08 0c-.01.8.04 1.58.14 2.37L4.59 0H2.07z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: repeat;
}


@media screen and (max-width: 768px) {
    
    /* ヘッダー */
    #mainvisual {
        height: 50vh;
        margin-bottom: 50px;
    }
    .leaf {
        width: 250px;
        height: 200px;
        top: 45%;
        right: 5%;
    }
    header {
        height: 60px;
        padding: 0;
    }
    h1 {
        font-size: 20px;
    }
    li a {
        font-size: 10px;
    }
    h2 {
        font-size: 30px;
        top: 20%;
        left: 10%;
    }
    .slide-in_text {
        font-size: 30px;
        margin-left: 60px;
    }

    /* メイン */
    main {
        padding: 20px;
    }
    h3 {
        font-size: 30px;
    }
    .about-wrapper {
        flex-direction: column;
    }
    .about-img {
        width: 170px;
        height: 200px;
        margin: 0 auto;
        margin-bottom: 30px;
        display: block;
    }
    .about-content-text {
        margin-bottom: 2rem;
    }
    .about-name {
        padding-bottom: 10px;
    }
    .about-name-text {
        font-size: 24px;
    }
    .about-name-text2 {
        font-size: 10px;
        margin-left: 20px;
    }
    .about-text {
        font-size: 15px;
    }
    .about-btn a {
        font-size: 15px;
    }

    .works-img {
        width: 300px;
        height: 200px;
        margin-bottom: 20px;
    }

    /* aboutページ */
    .breadcrumb li a {
        font-size: .9em;
    }
    .breadcrumb li {
        font-size: .9em;
    }
    .about-page {
        flex-direction: column;
        margin-bottom: 80px;
    }
    .about-box {
        margin-left: 0;
    }
    .about-box-profile {
        margin-top: 20px;
        grid-template-columns: 1fr;
    }
    .skill-wrapper {
        flex-direction: column;
    }
    .skill-design {
        width: 100%;
        margin-bottom: 20px;
    }
    .contact {
        width: 100%;
    }
    .future-wrapper_box {
        flex-direction: column;
    }
    .future-wrapper_box img {
        margin:0 auto 10px;
    }
    h7 {
        font-size: 18px;
    }
    .future-wrapper_box p {
        font-size: 13px;
    }
}