@charset "utf-8";

/* * {
    border: 1px blue solid;
} */


/* <!--共通cssここから--> */
img {
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
}

body {
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: 15px;
    color: #2b2b2b;
    background-image: url(../images/paper.jpg);
    background-size: cover;
}

header {
    width: 100%;
    height: 150px;
    position: fixed;
    top: 0;
    z-index: 90;
}

.header-logo {
    object-fit: contain;
    height: 90px;
    margin-left: 10px;
    margin-top: 10px;
}

.pc-logo {
    display: none;
}

.pen {
    display: none;
}

.site-menu a::after {
    content: '';
    display: block;
    width: 25px;
    height: 1.5px;
    background-color: #Fbfbf8;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
}

.menu-btn {
    position: absolute;
    top: 30px;
    right: 20px;
    width: 80px;
    object-fit: cover;
    z-index: 99;
    cursor: pointer;
}

.site-menu {
    display: none;
    background: rgba(0, 0, 0, .4);
    position: absolute;
    top: 70px;
    width: 100%;
    z-index: 90;
}

.site-menu a {
    display: block;
    color: #Fbfbf8;
    text-decoration: none;
    line-height: 3;
    transition: all 0.5s ease;
    text-align: center;
}

.footer {
    text-align: center;
    height: auto;
    padding-top: 10%;
}

.footer-logo {
    width: 50px;
    height: 40px;
}

.copyright {
    font-size: 13px;
}

h2 {
    color: #000066;
    font-weight: 500;
}

h2::after {
    content: '';
    display: block;
    width: 50px;
    height: 2px;
    background-color: #FFD800;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
}

/* <!--共通cssここまで--> */


/* <!--インデックスここから　--> */

.first-view {
    height: 50vh;
    background-image: url(../images/main.png);
    background-repeat: no-repeat;
    background-size: 100%;
    display: none;
    margin: 150px 0 0 -10px;
}

.first-view-text {
    margin-left: auto;
    margin-right: auto;
    padding: 0 10px;
    display: none;
    transform: translateY(-90px);
}

.catchcopy {
    order: 1;
    font-size: 25px;
    margin-bottom: 0;
    margin-top: 0;
}

.catchcopy-small {
    font-size: 13px;
    line-height: 1.5;
}

.main {
    padding: 0 10px 0 10px;
    margin-left: auto;
    margin-right: auto;
}

#about {
    margin-top: 10%;
    margin-bottom: 20%;
    text-align: center;
}

#about section {
    display: flex;
    flex-direction: column;
    margin-bottom: 15%;
}

#about section>* {
    order: 2;
}

#about section>h2 {
    order: 1;
}

.fig-1 {
    flex: 0 0 100px;
}

.fig-2 {
    padding-top: 5%;
    border-radius: 30px;
}

.fig-3 {
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    padding-top: 5%;
}

.profile-mantis {
    height: 200px;
    transition: transform .6s ease;
}

.profile-mantis:hover img {
    transform: scale(1.05);
}

/* <!--インデックスここまで　--> */



/* <!--プロフィールここから　--> */
.profile-wrapper {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10%;
    padding: 20% 5% 10% 5%;
}

.profile {
    margin-left: auto;
    margin-right: auto;
    margin-top: 10%;
    padding: 0 5%;
}

.profile-photo {
    width: 200px;
}

.profile-sec {
    display: flex;
    gap: 10%;
}

.profile-name {
    text-align: left;
    color: #2b2b2b;
    display: flex;
    flex-direction: column;
    transform: translateY(100px) translateX(-20px);
    font-size: 16px;
}

.profile-figcap {
    text-align: left;
    margin-top: 10%;
}

.mao {
    font-size: 18px;
}

/* <!--プロフィールここまで　--> */


/* <!--お仕事例ここから　--> */
.works-wrapper {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0%;
    padding: 20% 5% 0% 5%;
}

.kisaironbun {
    margin-top: 15%;
}

.works-fig {
    box-shadow: 2px 2px 4px #4f4f4f;
}

.gyoruishi {
    margin-top: 10%;
    display: flex;
    gap: 5%;
}
.zukan{
    margin-top: ;
    display: flex;
    gap: ;
}

.service-img-1{
    width: 70px;
}

.service-img-1{
    transform: translateX(-300%) translateY(100%) rotate(-40deg);
}

/* <!--お仕事例ここまで　--> */


/* <!--お問い合わせここから　--> */
.contact-wrapper {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10%;
    padding: 20% 5% 10% 5%;
}

.form-area {
    margin-top: 10%;
}

.form-area dt .required::after {
    content: '必須';
    font-size: 13px;
    color: #C62A2B;
    margin-left: 10px;
}

dd {
    margin: 0;
    padding: 15px 0;
}

.input-text {
    width: 100%;
    max-width: 280px;
    height: 30px;
    padding-left: 10px;
    padding-right: 10px;
}

.message {
    width: 100%;
    max-width: 500px;
    height: 200px;
    padding: 10px;
    line-height: 1.5;
}

.submit-button {
    width: 100px;
    height: 40px;
    margin: 5% 0;
    background-color: #000066;
    color: #Fbfbf8;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 400;
    letter-spacing: 2px;
    text-align: center;

}

.submit-button:hover {
    opacity: 0.6;
}

.yajirushi {
    transform: rotate(-90deg);
    width: 50px;
}

.form-area-dt {
    position: relative;
}

.namiageha {
    width: 90px;
    animation: anim 18s forwards;
    position: absolute;
    top: 10px;
    left: 50%;
}

@keyframes anim {


    0% {
        transform: translateX(0px);
    }

    100% {
        transform: translateX(130px);
    }
}

.sns {
    margin-top: 5%;
}

.insta {
    width: 30px;
    transition: 0.3s;
    cursor: pointer;
}

.insta:hover {
    transform: rotate(15deg);
}

.ashirai-4 {
    width: 50px;
}

/* <!--お問い合わせここまで　--> */

/* 制作の流れ */
.workflow-wrapper {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10%;
    padding: 20% 5% 10% 5%;
}

.ashirai-3 {
    margin: 0;
    padding: 0;
    width: 120px;
    display: none;
}

.ashirai-3-jr {
    width: 80px;
    transform: translateX(100px) translateY(-50px);
    display: none;
}

.workflow-sub {
    font-size: 20px;
    margin-top: 0;
    margin-bottom: 10%;
}

.yajirushi {
    transform: rotate(0deg);
}

.dojyou {
    width: 40%;
    margin: 0;
}

.process-1-5 {
    display: flex;
    gap: 10%;
}

.process-sec {
    margin: 0;
    width: 50%;
    text-align: left;
}

.process-title {
    font-size: 18px;
}

.item {
    margin-top: 25%;
}

.ashirai {
    width: 50px;
}

.item-contents {
    text-align: left;
}

.item-name {
    font-size: 18px;
}

.item-name-1::after {
    content: '※必須！';
    font-size: 13px;
    color: #C62A2B;
    margin-left: 10px;
}

.item-contents-sec {
    margin-top: 15%;
}

.fee {
    margin-top: 20%;
}

.fee-table {
    padding: 5%;
}





/* PCで見た場合 */
@media(min-width:800px) {


    /* 共通ページ */

    body {
        font-size: 16px;
    }

    .pc-logo {
        display: block;
        object-fit: contain;
        position: absolute;
        top: 50px;
        left: 30px;
        height: 120px;
    }

    .menu-btn {
        display: none;
    }

    .site-menu {
        display: flex;
        background-color: transparent;
        position: absolute;
        top: 150px;
        left: 80%;
    }

    .pen {
        display: block;
        width: 35px;
        margin-right: 15px;
    }

    .site-menu a {
        color: #2b2b2b;
        text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, 0px 1px 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff, 1px 0 0 #fff;
        font-weight: 600;
        line-height: 2;
    }

    .site-menu>ul li {
        list-style: none;
    }

    header {
        display: none;
    }

    .footer-logo {
        object-fit: contain;
        width: 100px;
        height: 100px;
    }

    .footer {
        padding-top: 5%;
    }

    h2 {
        font-size: 26px;
    }

    /* トップページ */
    .first-view {
        height: 100vh;
        background-size: cover;
        background-image: url(../images/main.png);
        background-repeat: no-repeat;
        margin-top: 0;
    }

    .first-view-text {
        padding-left: 50px;
        transform: translateY(-250px);
    }

    .catchcopy {
        font-size: 36px;
    }

    .catchcopy-small {
        font-size: 13px;
        line-height: 1.5;
    }


    .main {
        margin-left: 0;
        margin-right: 10%;
        padding: 0 5% 0 0;
    }

    .figcap {
        width: 550px;
    }

    #about {
        margin-top: 0;
        padding-left: 5%;
    }

    .fig-1 {
        flex-basis: 50%;
    }

    .fig-2 {
        width: 45%;
        border-radius: 70px;
    }

    .fig-3 {
        width: 100%;
    }

    .profile-mantis {
        height: 400px;
    }

    /* お仕事例ページ */
    .works-wrapper {
        margin-top: 5%;
        padding-top: 10%;
    }


    .gyoruishi {
        margin-left: auto;
        margin-right: auto;
        max-width: 800px;
    }

    .service-img-1{
        transform: translateX(-900%) translateY(100%) rotate(-40deg);
    }
    /* お問い合わせページ */
    .contact-wrapper {
        margin-top: 5%;
        padding-top: 10%;
    }

    .form-area {
        margin-top: 5%;
    }

    .form-area-dt {
        position: relative;
    }
    
    .namiageha {
        width: 90px;
        animation: anim 18s forwards;
        position: absolute;
        top: 10px;
        left: 50%;
    }

    @keyframes anim {
        0% {
            transform: translateX(0px);
        }

        100% {
            transform: translateX(150px);
        }
    }

    /* プロフィールページ */
    .profile-wrapper {
        margin-top: 5%;
        margin-left: auto;
        margin-right: auto;
        padding-top: 10%;
    }

    .profile {
        padding: 0 20%;
    }

    .profile-name {
        font-size: 18px;
    }

    /* 制作の流れページ */
    .workflow-wrapper {
        margin-top: 5%;
        padding-top: 10%;
    }

    .workflow-sub {
        font-size: 25px;
    }

    .process-title {
        font-size: 24px;
    }

    .process-1-5 {
        display: flex;
        gap: 5%;
    }

    .process-sec {
        width: 400px;
    }

    .item-contents-sec {
        padding-right: 20%;
        margin-top: 10%;
    }

    .item {
        margin-top: 15%;
    }

    .fee {
        margin-top: 10%;
    }

    .fee-table {
        padding: 5% 25% 0 25%;
    }
}