@import "service.css";
@import "voice.css";

#index main p {
    color:var(--color-text-gray);
}

/* MV */
#mv {
    height:100vh;
    max-height:1000px;
    padding:0;
    background:var(--color-white);
    overflow:hidden;
}
#mv-bg {
    position:absolute;
    width:clamp(1100px, 120vw, 4000px);
    left: 50%;
    top: 50%;
    translate:-67% -26%;
}
#mv-bg img {
    width:100%;
    height:100%;
    object-fit: contain;
}
#mv .width-limiter {
    height:100%;
}
#mv article {
    margin-top:clamp(140px, 20%, 400px);
}
#mv article h1 {
    text-align:right;
    font-weight:500;
    letter-spacing: 0.3em;
}
#mv article h1 strong {
    font-size:1.5em;
    font-weight:900;
    color:var(--color-blue);
}
#mv article h1 strong:nth-of-type(1) {
    color:#3071B9;
}
#mv article h1 strong:nth-of-type(2) {
    color:#005EAD;
}
#mv article h1 strong:nth-of-type(3) {
    color:#004EA2;
}
#mv article h1 strong:not(:first-of-type) {
    margin-left:-0.2em;
}
#mv article h2 {
    text-align:right;
    margin-top:10%;
    color:var(--color-orange);
    font-weight:500;
}
#mv article h3 {
    text-align:right;
    color:var(--color-text-gray);
    margin-top:0;
    scale: 1 0.9;
}
#mv article p {
    text-align:right;
    margin-top:10px;
}

#mv .scroll {
    background:var(--color-darkgray);
    width:clamp(60px, 6vw, 80px);
    height:clamp(60px, 6vw, 80px);
    margin:0;
    padding:10px;
    aspect-ratio: 1;
    border-radius: 100%;
    position:absolute;
    bottom:var(--padding);
    right:var(--padding);
    overflow:hidden;
    font-size:0.8em;
    color:var(--color-white);
    display:flex;
    align-items: flex-end;
    justify-content: center;
    opacity:0.4;
    white-space: nowrap;
}
#mv .scroll::before {
    content:'';
    width:60%;
    aspect-ratio: 1;
    position:absolute;
    bottom:30px;
    left:calc(50% - 30%);
    background:url(../_img/index/arrow_scroll.svg);
    animation: arrowmove 1s ease-in-out infinite;
}
@keyframes arrowmove{
   0%{bottom:30px;}
   50%{bottom:35px;}
   100%{bottom:30px;}
}


/* NEWS in index */
#news h1 {
    color:var(--color-blue);
    font-weight:900;
    letter-spacing: 0.2em;
    display:flex;
    align-items: center;
    justify-content: flex-start;
    gap:10px;
}
#news hgroup span[lang="ja"] {
    padding-top:0;
    margin-top:0;
    padding-bottom:14px;
    font-size:1em;
}
#news hgroup span[lang="ja"]::before {
    bottom:0;
    top:auto;
}
#news > .flex {
    gap:var(--super-wide-gap);
}
#news h2 {
    width:320px;
}
#news .news-list {

}
#news .news-list time {
	font-weight: bold;
    font-family: "Murecho", sans-serif;
    width:7em;
}
#news .news-list li {
    padding-top:15px;
}


/* Service in index */
#service hgroup h1 {
    font-size: clamp(6em, 12cqw, 16em);
}


/* ABOUT */
#about {
    padding-bottom:0;
}
#about hgroup h1 {
    text-align-last: justify;
    font-size: clamp(6em, 12cqw, 16em);
}
#about hgroup span[lang="ja"] {
    padding-top:0;
    margin-top:0;
    padding-left:4em;
}
#about hgroup span[lang="ja"]::before {
    top:0.2em;
}

#about #about-bg {
    position:absolute;
    width:100vw;
    left:20vw;
    bottom:-8vw;
}
#about article {
    margin-top:0;
}
#about article h2 {
    font-size:1.4em;
    color:var(--color-blue);
    padding-left:80px;
    background:url(../_img/icon/pen.svg) left center / 40px no-repeat;
}
#about article h2 span {
    font-size:0.8em;
    color:var(--color-lightblue);
    display:block;
    margin-top:5px;
}
#about article h3 {
    font-size:2.4em;
    text-align:left;
    margin-top:var(--wide-padding-2);
    letter-spacing:0.2em;
    font-weight:600;
}
#about article p:first-of-type {
    line-height:2.4;
}
#about article h4 {
    color:var(--color-blue);
    font-size:2.6em;
    letter-spacing: 0.1em;
    scale: 1 0.9;
    margin-top:200px;
}
#about article h4 + p {
    color:var(--color-blue);
    font-weight:300;
    font-size:1.4em;
    text-align:left;
}

#about .about-domain a div {
    text-align:center;
    font-size:1.3em;
    line-height:1;
    color:var(--color-white);
    margin-top:10px;
}
#about .about-domain a div span {
    display:block;
    margin-top:10px;
    color:var(--color-lightblue);
    font-size:0.9em;
}
#about .about-domain a figure {
    content:'';
    width:130px;
    height:130px;
    border:solid 1px var(--color-white);
    border-radius:100%;
    background:var(--color-white);
    margin-bottom:20px;
    transition:var(--transition);
    margin-inline:auto;
}
#about .about-domain a:hover figure {
    border:solid 1px var(--color-white);
    background:none;
}
#about .about-domain a figure img {
    margin:0;
}
#about .about-domain a:not(:hover) figure img:last-of-type { display:none; }
#about .about-domain a:hover figure img:first-of-type { display:none; }

#about .about-domain + .buttons {
    margin-top:calc(var(--section-space) / 2);
}


/* WORKS */
#works {
    padding:0;
}
#works hgroup + p {
    margin-top:var(--wide-padding-2);
}
#works > .flex > article {
    padding-top:var(--section-space);
    padding-bottom:var(--section-space);
}
#works > .flex > article h2 {
    font-size:1.4em;
    font-weight:400;
    margin-top:var(--wide-padding-2);
}
#works > .flex > article ul {
    margin-top:40px;
}
#works > .flex > article li a {
    display:flex;
    align-items: center;
    justify-content: flex-start;
    gap:var(--gap);
}
#works > .flex > article li a figure {
    content:'';
    width:60px;
    height:60px;
    border:solid 1px var(--color-blue);
    border-radius:100%;
    background:var(--color-blue);
    transition:var(--transition);
}
#works > .flex > article li a:hover figure {
    background:var(--color-white);
}
#works > .flex > article li a figure img {
    margin:0;
}
#works > .flex > article li a:not(:hover) figure img:first-of-type { display:none; }
#works > .flex > article li a:hover figure img:last-of-type { display:none; }
#works > .flex > article li a div {
    font-size:1.4em;
    color:var(--color-blue);
    margin:0;
    display:flex;
    align-items: center;
    justify-content: flex-start;
    gap:calc(var(--gap) * 1.5);
}
#works > .flex > article li a div::after {
    content:'';
    display:block;
    width:16px;
    height:16px;
    background:url(../_img/icon/arrow_ctg_blue.svg) center / contain no-repeat;
    translate: 0 0;
    transition:var(--transition);
}
#works > .flex > article li a:hover div::after {
    translate: 5px 0;
}
#works > .flex > article .buttons {
    justify-content: flex-start;
    margin-top:var(--wide-padding-3);
}

#works > .flex > div {
    margin-right:calc(50% - 50vw);
    display:flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
}
#works > .flex > div a {
    flex:1;
    width:100%;
    margin:0;
    overflow:hidden;
}
#works > .flex > div a > img {
    width:100%;
    height:100%;
    object-fit: cover;
    transition: var(--transition);
}
#works > .flex > div a div {
    position: absolute;
    bottom:0;
    width:100%;
    background:rgb(0 78 162 / .8);
    padding:0 40px;
    color:var(--color-white);
    font-size:1.1em;
    display:flex;
    align-items: center;
    justify-content: space-between;
    transition: var(--transition);
}
#works > .flex > div a div img {
    width:80px;
}
#works > .flex > div a div h3 {
    margin:0;
    text-align:left;
}
#works > .flex > div a div span {
    flex:1;
    text-align:right;
    margin:0;
    font-size:1.1em;
}
#works > .flex > div a:hover > img {
    scale: 1.03;
}
#works > .flex > div a:hover div {
    background:rgb(246 171 0 / .8);
}


/* VOICE */
#voice {
    background: url(../_img/okawa_mark_bg2.svg) center / 160vw no-repeat;
}
#voice hgroup + p {
    margin-top:var(--wide-padding-2);
}
#voice .voice-list {
    margin-top:var(--wide-padding-3);
}
#voice .voice-list a {
    margin:0 20px;
}
#voice .buttons {
    margin-top:var(--wide-padding-3);
}
.slide-arrow {
    width: 80px;
    height: 80px;
    background: rgb(0 0 0 / .4);
    border-radius: 50%;
    border:solid 1px var(--color-white);
    display:flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position:absolute;
    top:50%;
    translate: 0 -50%;
    z-index:2;
    transition: var(--transition);
}
.slide-arrow:hover {
    background:var(--color-blue);
}
.slide-arrow img {
    width:30%;
}
.next-arrow {
    right:40px;
}
.prev-arrow {
    left:40px;
}
.prev-arrow img {
    transform: rotate(180deg);
}


/* INSTAGRAM */
#instagram {
    background:var(--color-blue) url(../_img/index/instagram_bg.webp) center / cover no-repeat;
}
#instagram .trisite.graph ul {
    margin-top:var(--wide-padding);
}
#instagram .trisite.graph ul li {
    width:240px;
    height:240px;
    margin:0 30px;
}
#instagram .buttons {
    margin-top:var(--wide-padding);
}


/* FAQ and RECRUIT */
#faq-recruit {
    padding:0;
}
#faq-recruit .wall {
    position:absolute;
    width:100%;
    height:100%;
}
.wall-faq {
    background:url(../_img/index/wall_faq.webp) center / cover no-repeat;
}
.wall-recruit {
    background:url(../_img/index/wall_recruit.webp) center / cover no-repeat;
}

#faq-recruit > div {
    margin-top:0;
}
#faq-recruit hgroup + p {
    margin-top:var(--wide-padding);
}
#faq-recruit hgroup + p + div {
    margin-top:30px;
}
#faq-recruit ul li {
    margin-top:15px;
}
#faq-recruit .buttons {
    justify-content: flex-start;
    flex:1;
}

#faq {
    margin-right:20%;
}
#faq hgroup {
    color:var(--color-white);
}
#faq hgroup + p {
    color:var(--color-white);
}

#recruit {
    margin-left:20%;
}
#recruit hgroup + p {
    color:var(--color-blue);
}
#recruit h2 {
    font-size:1.4em;
    color:var(--color-blue);
}
#recruit h2 + ul {
    margin-top:20px;
}


/* SUPPORT */
#support hgroup span[lang="ja"]::before {
    background:var(--color-gray);
}
#support article {
    background:var(--color-lightblue);
    padding:30px;    
}
#support article p {
    font-size:2em;
    color:var(--color-white);
    text-align: center;
}
#support article hgroup {
   container-type: unset;
}
#support article .button {
    border:solid 1px var(--color-white) !important;
    background:none;
}
#support article .button:hover {
    background:var(--color-white);
    color:var(--color-blue);
}
#support article .button:hover::after {
    background:url(../_img/icon/arrow_blue.svg) right center / contain no-repeat;
}

#support div.g1 {
    overflow:hidden;
}
#support div.g1 > img {
    object-fit: cover;
    width:100%;
    height:100%;
}


@media (max-width : 920px) {
    #mv-bg {
        translate:-67% -10%;
    }


    /* FAQ and RECRUIT */
    #faq ,
    #recruit {
        padding:var(--section-space) var(--padding);
        margin:0;
    }
}
@media (max-width : 780px) {
    #mv article {

    }


    /* NEWS */
    #news > .flex {
        gap:var(--gap);
    }
    #news :is(.news, h2) {
        width:100%;
    }
    #news h2 {
        text-align:center;
        padding-top:var(--padding);
        padding-bottom:var(--padding);
    }
    #news h2 img {
        max-width:300px;
    }


    /* WORKS */
    #works > .flex > article {
        padding-bottom:0;
    }
    #works > .flex > div {
        margin-right: 0;
        margin-bottom:var(--section-space);
    }
    #works > .flex > div a div {
        padding:0 var(--padding);
    }
    #works > .flex > div a div img {
        width: 60px;
    }
    #works > .flex > div a:not(:first-of-type) {
        margin-top:var(--padding);
    }


    /* VOICE */
    .slide-arrow {
        display:none !important;
    }

}
@media (max-width : 520px) {
    /* NEWS */
    #news {
        padding-top:var(--section-space);
    }
    #news .news-list li {
        flex-direction: column;
        gap:0;
    }
    #news .news-list li :is(time, a) {
        padding:0;
    }


    /* ABOUT */
    #about hgroup h1 + .flex {
        align-items: flex-start;
    }
    #about article h2 {
        padding-left:60px;
    }
    #about #about-bg {
        width:200vw;
        left:-20vw;
        bottom:20px;
    }
    #about article h4 + p {
        font-size:1.2em;
    }
    #about .about-domain a figure {
        width:100px;
        height:100px;
    }
    #about .about-domain a div span {
        font-size: 0.7em;
    }
    #about .about-domain + .buttons {
        margin-top: var(--section-space);
    }


    /* FAQ and RECRUIT */
    #faq-recruit .wall {
        display:none;
    }
    #faq-recruit > div:not(.wall) {
        gap:0;
    }
    #faq {
        margin:0 calc(var(--padding) * -1);
        background:url(../_img/index/wall_faq.webp) center / cover no-repeat;
    }
    #recruit {
        margin:0 calc(var(--padding) * -1);
        background:url(../_img/index/wall_recruit.webp) center / cover no-repeat;
    }

    /* SUPPORT */
    
}