@charset "UTF-8";

/* basic setting *****************************************************************/
* {
    margin: 0;
}

html {
    scroll-behavior: smooth;
}

figure > img {
    width: 100%;
    height: auto;
}

/* ページ全体の設定 */
body {
    text-size-adjust: none;
    background-color: #F6F6F6;
    display: grid;
    grid-template-columns: 20px 1fr 20px;
    grid-template-rows: [head] 80px
                        [title] auto
                        [section] auto
                        [other] auto
                        [foot] auto;
    row-gap: 40px;

    /********** font_Ja **********/
    font-family: "ryo-gothic-plusn", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #273137;

}

/* font_En */
nav, #title, #nomal_title > h1, section h2, .bk_title, .gl_title, #other, #other > h2, .contact form, .about h3, .about .experience, .about .icon_name_en, .nomal #ds_01 .sub_title span, .hover_text{
    font-family: "objektiv-mk3", sans-serif;
    font-weight: 400;
}

/* パーツの配置 */
body > * {
    grid-column: 2 / -2;
}

/* mousehover line */
a:hover {
    text-decoration: line-through;
    text-decoration-color: #273137;
}

/* basic setting_end *****************************************************************/

/* FontSize *****************************************************************/
h1 {
    font-size: 1.2em;
}

nav ul {
    font-weight: bold;
}
nav ul li {
    font-size: 0.8em;
}
#title h1, h2 {
    font-size: 1.2em;
}
#title p, p, table td {
    font-size: 0.8em;
}
#ds_01 > .sub_title, #ds_02 > .sub_title, #ds_03 > .sub_title, #ds_04 > .sub_title, #ds_05 > .sub_title {
    font-weight: bold;
}
.about h3 {
    font-size: 1em;
}
/* Font-end *****************************************************************/

/* animation *****************************************************************/

/* blur */
.blur {
    animation-name: blurAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes blurAnime {
    from {
        filter: blur(10px);
        transform: scale(1.02);
    }
    to {
        filter: blur(0);
        transform: scale(1);
    }
}
/* animation_end *****************************************************************/

/* header *****************************************************************/
header {
    grid-row: head;
    justify-self: start;
    position: sticky;
    top: 36px;
    z-index: 2;
}

header img {
    width: 40px;
}

body::after {
    content: "";
    grid-column: 1 / -1;
    grid-row: head;
    z-index: 1;
    backdrop-filter: blur(1px);
    position: sticky;
    top: 0;
}

/* header_end *****************************************************************/

/* nav *****************************************************************/
nav {
    grid-row: head;
    justify-self: right;
    align-self: start;
    position: sticky;
    top: 40px;
    z-index: 2;
}

nav ul {
    list-style-type: none;
    padding: 0;
    display: grid;
    grid-auto-flow: column; /* グリットを横並びに自動配置 */
    column-gap: 12px;
}

nav a {
    color: #273137;
    text-decoration: none;
}

/* current maru */
/* .current_radius {
    width: 10px;
    height: 10px;
    background-color: #77A5C7;
    border-radius: 50%;
    margin-right: 8px;
}
nav ul li span {
    display: flex;
    justify-content: center;
    align-items: center;
} */

/* nav_end *****************************************************************/

/* key visual *****************************************************************/
figure.hero {
    grid-column: 1 / -1;
    width: 100%;
    grid-row: head / span 2;
    z-index: -1;
}

figure.hero img {
    height: 240px;
    vertical-align: bottom; /* 余計な余白の削除 */
    object-fit: cover; /* 画像の切り出し */
}

/* title *****************************************************************/
.top #nomal_title h1 {
    margin: 40px 0;
}
#title {
    grid-row: title;
    display: grid;
    grid-auto-flow: row;
}

#title h1 {
    text-align: center;
    padding: 8px 40px 8px 40px;
    background-color: #273137;
    color: #fff;
    justify-self: center; /* 横方向の位置 */
    align-self: end; /* 縦方向の位置 */
}

/* 制作詳細 */
#title p {
    text-align: right;
    align-self: end;
}
/* title_end *****************************************************************/

/* section *****************************************************************/
body > section {
    grid-row: section;
    display: grid;
    row-gap: 40px;
    margin-bottom: 100px;
}

section #concept_title {
    font-weight: bold;
    margin-bottom: -4px;
}

section .bk_title, .gl_title {
    background-color: #273137;
    color: #fff;
    text-align: center;
    padding: 4px;
    width: 120px;
    margin-top: 20px;
}

section .sub_title {
    margin-top: 10px;
    margin-bottom: -2px;
}
section p {
    margin-top: 8px;
}
section img {
    width: 100%;
}
.nomal .img_single_filnone {
    filter: none;
}
.nomal .mark_system {
    border-bottom: 2px solid rgba(135, 145, 151, 0.2);
    padding: 32px 0;
}
.nomal .mark_system:last-child {
    border: none;
}
/* .nomal .mark_system {
    margin-top: 32px;
} */
.nomal .mark_system .mark_name {
    margin-top: 12px;
}
.nomal .mark_system #yellow {
    color: #D9BC63;
}
.nomal .mark_system #blue {
    color: #53BDB5;
}
.nomal .mark_system #pink {
    color: #BE5FA1;
}
.nomal .mark_system #green {
    color: #85C576;
}

/* section_end *****************************************************************/

/* Other *****************************************************************/
#other {
    grid-row: other;
    margin-bottom: 40px;
}

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

#other table {
    width: 100%;
}

#other td {
    border-bottom: solid 2px #F2F1F0;
    padding: 20px 20px 20px 40px;
    text-align: left;
}
/* Other_end *****************************************************************/

/* footer *****************************************************************/
footer, body.top > footer, body.contact > footer {
    grid-row: foot;
    background-color: #395082;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 20px 1fr 1fr 20px;
}

footer .icon {
    grid-column: 2 / 4;
    align-self: center;
    margin-top: 40px;
    margin-left: 46%;
}

footer #tw_icon {
    display: block;
    width: 32px;
    float: left;
    margin-top: 36px;
}

footer #back_icon {
    margin-top: 6px;
    float: right;
}

footer #back_icon img {
    width: 80%;
}

footer #copyright {
    grid-column: 2 / 4;
    justify-self: center;
    margin-bottom: 40px;
    margin-top: 24px;
    font-size: 0.5em;
}

/* footer_end *****************************************************************/

/* top *****************************************************************/
.top .work:first-of-type{
    padding-bottom: 40px;
}
/* top_end *****************************************************************/

/* about *****************************************************************/

.about .nomal ul {
    list-style-type: none;
}

.about .nomal ul.experience {
    margin: 20px auto 40px 0;
    padding: 0;
}

.about .nomal h3 {
    margin-top: 32px;
}

.about .nomal .experience li {
    margin-top: 20px;
}

.about .nomal .experience h3 {
    margin-top: 0px;
    margin-bottom: -8px;
}

.about .nomal .icon {
    display: flex;
    text-align: center;
    padding: 0;
    margin-top: 20px;
}

.about .nomal ul.icon .icon_name_ja {
    color: #D9D9D9;
}

.about #ct_01 img, #ct_02 img {
    width: 30%;
    margin-top: 20px;
}

.about #ct_01 .icon {
    margin: 20px auto 36px 0;
}

.about #ct_01 .icon li img {
    width: 40px;
    margin-top: 0;
}

/* about_end *****************************************************************/

/* Contact *****************************************************************/

input, textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border: none;
    background-color: #E4E4E4;
    margin-top: 10px;
}

textarea {
    height: 120px;
}

input[type="submit"] {
    font-family: "objektiv-mk3", sans-serif;
    font-weight: 400;
    background-color: #273137;
    color: #fff;
    border: none;
}

/* Contact_end *****************************************************************/

/* image *****************************************************************/
.img_double{
    margin: 60px auto 0 auto;
    filter: drop-shadow(0px 5px 5px #cacaca);
    text-align: center;
}
.img_double_01, .img_double_02 {
    width: 52%;
    text-align: center;
}
.img_single {
    margin: 60px auto 0 auto;
    filter: drop-shadow(0px 5px 5px #cacaca);
}
.img_logo {
    margin: 60px auto 0 auto;
    filter: drop-shadow(0px 5px 5px #cacaca);
}

/* work-02_MOGSUKET */
.logo_system .img_logo {
    filter: none;
    width: 60%;
}

/* work-05_Figart */
.img_single_bottom {
    margin: 60px auto 60px auto;
    filter: drop-shadow(0px 5px 5px #cacaca);
}

/* work-06_WITH HELP */
.mark_system > .img_mark {
    width: 100px;
}
.img_single_filnone {
    margin: 60px auto 0 auto;
}
.img_single_filnone:first-of-type {
    margin-bottom: 60px;
}

/* image_end *****************************************************************/

/* PC版の設定 *****************************************************************/
@media (min-width: 768px) {

    /* PC版：ページ全体の設定 */
        body {
            grid-template-columns: 1fr repeat(8,1fr) 1fr;
            grid-template-rows: [head] 100px
                                [title] auto
                                [section] auto
                                [other] auto
                                [foot] auto;
        }

    /* FontSize *****************************************************************/
    /* PC版nav */
    nav ul li {
        font-size: 1.2em;
    }

    /* PC版タイトル */
    #title h1 {
        font-size: 1.8em;
        font-weight: 10;
    }

    #nomal_title h1 {
        font-size: 1.8em;
        font-weight: normal;
    }
    /* PC版：制作詳細 */
    #title p {
        font-size: 1em;
    }
    /* 各セクションのタイトル */
    section h2 {
        font-size: 1.8em;
    }
    /* Conceptのタイトル */
    p#concept_title {
        font-size: 1em;
    }
    /* bk_title gl_title */
    p.bk_title, p.gl_title {
        font-size: 1.2em;
    }
    /* 小タイトル */
    p.sub_title {
        font-size: 1em;
    }

    #ds_01 > .sub_title, #ds_02 > .sub_title, #ds_03 > .sub_title, #ds_04 > .sub_title, #ds_05 > .sub_title {
        font-weight: normal;
    }

    /* other */
    #other > h2 {
        font-size: 1.8em;
    }
    #other td {
        font-size: 1.2em;
    }
    /* FontSize_end *****************************************************************/

    /* PC版：header *****************************************************************/
    header {
        margin-top: 36px;
    }

    header img {
        width:60px;
        margin-top: -8px;
    }

    /* PC版：header_end *****************************************************************/

    /* PC版：nav *****************************************************************/
    nav {
        top: 0px;
    }
    nav ul {
        margin-top: 36px;
        column-gap: 20px;
    }

    /* PC版：nav_end *****************************************************************/

    /* PC版：hero-image *****************************************************************/
    figure.hero {
        grid-column: 2 / -2;
    }
    figure.hero img {
        height: 100%;
    }

    /* PC版：section *****************************************************************/
    body > section {
        grid-row: section;
        display: grid;
        row-gap: 124px;
        margin: 100px 0 124px 0;
    }

    /* Concept **********/
    section .nomal {
        display: grid;
        grid-template-columns: 10px 280px 1fr 10px;
    }

    section .nomal h2 {
        grid-column: 2;
    }

    section .nomal #concept_title {
        margin: 8px 0 0 14px;
    }

    section .nomal .text {
        grid-column: 3;
        margin: 2px 0 0 14px;
    }

    /* Overview **********/
    section .nomal .overview_text {
        margin: 16px 0 0 14px;
    }

    /* Approach **********/
    /* 2カラム構成 */
    section .culum {
        display: grid;
        grid-template-rows: repeat(4, 1fr);
        grid-template-columns: 10px 280px 1fr 10px;
    }

    section .culum h2 {
        grid-row: 1;
        grid-column: 2;
    }

    section .culum div#ap_01 {
        grid-row: 1;
        grid-column: 3;
    }

    section .culum div#ap_02 {
        grid-row: 2;
        grid-column: 3;
    }

    section .culum div#ap_03 {
        grid-row: 3;
        grid-column: 3;
    }

    section .culum div#ap_04 {
        grid-row: 4;
        grid-column: 3;
    }

    section .culum div {
        align-self: flex-start;
        display: flex;
    }

    section .culum .bk_title {
        align-self: start;
        width: 120px;
        margin: 4px 48px 4px 14px;
        padding: 10px;
    }

    section .culum .gl_title {
        background-color: transparent;
        color: #273137;
        text-align: left;
        width: 120px;
        margin: 4px 58px 4px 14px;
        padding: 4px;
    }

    /* Design **********/
    /* 2カラム構成 */
    .bk_culum {
        display: grid;
        row-gap: 112px;
        grid-template-rows: repeat(3);
        grid-template-columns: 10px 280px 1fr 10px;
    }
    .bk_culum h2 {
        grid-row: 1;
        grid-column: 2;
    }
    .bk_culum div {
        align-self: start;
    }
    .bk_culum div#ds_01 {
        grid-row: 1;
        grid-column: 3;
    }
    .bk_culum div#ds_02 {
        grid-row: 2;
        grid-column: 3;
    }
    .bk_culum div#ds_03 {
        grid-row: 3;
        grid-column: 3;
    }
    .bk_culum .bk_title {
        align-self: start;
        width: 100px;
        margin: 4px 48px 4px 14px;
        float: left;
        padding: 10px;
    }

    /* Cosmetic Kit bk_title：long ver */
    #ds_03 .bk_title {
        width: 160px;
    }
    .sub_title {
        margin-top: 10px;
        margin-bottom: -2px;
    }
    .bk_culum .text {
        margin-left: 180px;
        margin-top: 48px;
    }

    /* Cosmetic Kit text：long ver */
    #ds_03 .text {
        margin-left: 240px;
    }

    /* Design **********/
    /* 1カラム構成 */
    .nomal .sub_title {
        margin-left: 14px;
    }
    .nomal #ds_01 .text, .nomal #ds_02 .text, .nomal #ds_03 .text, .nomal #ds_04 .text, .nomal #ds_05 .text {
        margin-top: 40px;
        margin-left: 14px;
    }
    .nomal .sub_title {
        grid-row: 1;
        grid-column: 3;
    }

    /* PC版：image **********/
    .img_double, .nomal .img_double {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .img_double .img_double_01 {
        width: 48%;
        margin-right: 10px;
    }
    .img_double .img_double_02 {
        width: 48%;
        margin-left: 10px;
    }
    .img_single {
        width: 100%;
        margin: 112px auto 0 auto;
    }
    .img_single img {
        width: 100%;
    }
    .img_logo {
        margin: 112px auto 0 auto;
        filter: drop-shadow(0px 5px 5px #cacaca);
    }
    .img_single_filnone {
        margin: 112px auto 0 auto;
    }
    .img_single_filnone:first-of-type {
        margin-bottom: 112px;
    }

    /* PC版：section_end *****************************************************************/

    /* PC版：other *****************************************************************/
    #other h2 {
    margin-left: 10px;
    }
    #other td {
        padding: 120px 10% 24px 18%;
    }
    footer #back_icon {
        margin-right: 12%;
    }

    /* PC版：other_end *****************************************************************/

    /* PC版：footer *****************************************************************/
    footer .icon {
        margin-top: 100px;
        margin-left: 48%;
    }
    footer #tw_icon {
        width: 48px;
        margin-top: 36px;
    }
    footer #back_icon {
        margin-top: 6px;
        float: right;
    }
    footer #back_icon img {
        width:100%;
    }
    footer #copyright {
        margin-bottom: 100px;
        margin-top: 24px;
    }

    /* PC版：footer_end *****************************************************************/

    /* PC版：top *****************************************************************/
    .top {
        display: grid;
        grid-template-columns: 1fr repeat(8,1fr) 1fr;
        grid-template-rows: [head] 100px
                            [title] auto
                            [section] auto
                            [other] auto
                            [foot] auto;
        row-gap: 20px;
    }
    body.top > * {
        grid-column: 2 / -2;
    }
    .top #nomal_title h1 {
        color: #273137;
        margin: 100px auto;
        text-align: center;
    }
    .top section h2 {
        grid-column: 1;
        padding-left: 10px;
    }
    .top > section {
        grid-row: section;
        display: grid;
        gap: 40px 40px;
    }
    .top .workgroup {
        display: inline-flex;
    }
    .top .workgroup a {
        display: block;
    }
    .top .work {
        padding: 0 40px;
        position: relative;
    }
    .hover_mask {
        position: absolute;
        align-items: center;
        text-align: center;
        background: #fff;
        display: inline-block;
        height: auto;
        transition: opacity .6s ease;
        justify-content: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-68%);
        padding: 50px 0;
        margin: 0;
        width: 50%;
        filter: drop-shadow(0px 5px 5px rgba(74, 63, 63, 0.12));
        opacity: 0;
    }
    .hover_mask:hover {
        opacity: 1;
    }
    .hover_text {
        margin: 0;
        font-size: 0.8em;
        color: #d9d9d9;
    }
    .hover_text span {
        font-weight: bold;
        font-size: 1.2em;
        color: #273137;
    }

    /* Top_end *****************************************************************/

    /* Contact *****************************************************************/
    .contact {
        display: grid;
        grid-template-columns: 1fr repeat(8,1fr) 1fr;
        grid-template-rows: [head] 100px
                            [section] auto
                            [other] auto
                            [foot] auto;
        row-gap: 20px;
    }

    body.contact > * {
        grid-column: 2 / -2;
    }

    .contact section {
        grid-row: section;
        display: grid;
        grid-template-rows: repeat(3);
        grid-template-columns: 10px 280px 1fr 10px;
    }

    .contact h2 {
        grid-row: 1;
        grid-column: 2;
    }

    .contact p {
        grid-row: 1;
        grid-column: 3;
    }

    .contact form {
        grid-row: 2;
        grid-column: 3;
    }

    /* Contact_end *****************************************************************/

    /* About *****************************************************************/
    .about {
        display: grid;
        grid-template-columns: 1fr repeat(8,1fr) 1fr;
        grid-template-rows: [head] 100px
                            [section] auto
                            [other] auto
                            [foot] auto;
        row-gap: 20px;
    }

    .about .nomal h3 {
        grid-row: 1;
        grid-column: 3;
        float: left;
        font-weight: normal;
        font-size: 1.2em;
        padding-top: 10px;
        margin: 0;
    }

    .about .nomal ul.experience {
        grid-row: 2;
        grid-column: 3;
        padding: 0;
        margin: 20px auto 0 0;
    }

    .about .nomal ul.experience li {
        clear: both;
    }

    .about .nomal ul.experience h3 {
        width: 200px;
        padding-top: 0;
    }

    .about .nomal .text {
        margin: 100px auto 100px 0;
    }

    .about .bk_title {
        grid-row: 4;
        grid-column: 3;
        align-self: start;
        padding: 10px;
    }

    .about .nomal ul.icon {
        grid-row: 5;
        grid-column: 3;
    }

    .about .nomal ul.icon img {
        width: 150px;
        margin-top: 40px;
    }

    .about .nomal ul.icon .icon_name_ja {
        font-size: 0.8em;
    }

    /* skill / trying */
    .about .nomal #ct_01 {
        grid-row: 1;
        grid-column: 3;
        margin-bottom: 120px;
    }
    .about .nomal #ct_02 {
        grid-row: 2;
        grid-column: 3;
    }

    .about .nomal #ct_01 img, #ct_02 img {
        width: 150px;
        float: left;
        margin: 40px 70px auto 0;
    }

    .about .nomal #ct_01 ul {
        padding: 0;
        clear: both;
        margin: 40px auto 0 220px;
    }

    .about .nomal #ct_01 ul.icon img {
        width: 60px;
        margin: 0;
    }

    .about .nomal #ct_01 .text, #ct_02 .text {
        margin: 80px auto auto auto;
    }

    /* About_end *****************************************************************/


    /* work-02_MOGSUKET *****************************************************************/
    .nomal .logo_system .img_logo {
        margin: 20px 20px 20px auto;
        filter: none;
        width: 100%;
    }
    .logo_system {
        display: flex;
        margin-top: 100px;
    }
    .logo_system .caption p {
        font-size: 0.8em;
    }
    .logo_system .caption {
        display: flex;
        justify-content: space-between;
        flex-flow: column;
    }
    .logo_system .caption_01 {
        margin-top: 20px;
    }
    /* work-02_MOGSUKET_end *****************************************************************/

    /* work-05_figarts *****************************************************************/
    .bk_culum #ds_01 .img_single_bottom {
        margin: 112px auto 112px auto;
    }

    /* work-05_figarts_end *****************************************************************/

    /* work-06_withhelp *****************************************************************/
    .nomal .mark_system {
        display: flex;
        padding: 40px;
        width: 560px;
    }
    .nomal .mark_system .img_mark {
        margin-right: 80px;
    }
    .nomal .mark_system .mark_name {
        margin-top: 0;
    }
    /* work-06_withhelp_end *****************************************************************/
}
/* PC版の設定ここまで **********/