/* 変数start------------------------------- */
/* 変数start------------------------------- */
/* 変数start------------------------------- */
:root {
    --bg-jigsaw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' viewBox='0 0 192 192'%3E%3Cpath fill='%23dfdee2' fill-opacity='0.49' d='M192 15v2a11 11 0 0 0-11 11c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H145v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11 13 13 0 1 1 .02 26 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43a6.1 6.1 0 0 0-3.03 4.87V143h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 181 164a11 11 0 0 0 11 11v2a13 13 0 0 1-13-13 12 12 0 0 1 3.11-7.53l2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84a6.1 6.1 0 0 0-4.87-3.03H145v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 124 181a11 11 0 0 0-11 11h-2a13 13 0 0 1 13-13c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43a6.1 6.1 0 0 0 3.03-4.87V145h-35.02a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 107 124a11 11 0 0 0-22 0c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H49v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11A13 13 0 0 1 81 192h-2a11 11 0 0 0-11-11c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V145H11.98a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 0 1 0 177v-2a11 11 0 0 0 11-11c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H47v-35.02a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 28 109a13 13 0 1 1 0-26c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43A6.1 6.1 0 0 0 47 84.02V49H11.98a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 11 28 11 11 0 0 0 0 17v-2a13 13 0 0 1 13 13c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84A6.1 6.1 0 0 0 11.98 47H47V11.98a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 68 11 11 11 0 0 0 79 0h2a13 13 0 0 1-13 13 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43A6.1 6.1 0 0 0 49 11.98V47h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 85 68a11 11 0 0 0 22 0c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H143V11.98a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 124 13a13 13 0 0 1-13-13h2a11 11 0 0 0 11 11c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V47h35.02a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 179 28a13 13 0 0 1 13-13zM84.02 143a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 83 124a13 13 0 1 1 26 0c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84a6.1 6.1 0 0 0 4.87 3.03H143v-35.02a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 164 107a11 11 0 0 0 0-22c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V49h-35.02a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 1 1 83 68a12 12 0 0 1 3.11-7.53l2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84A6.1 6.1 0 0 0 84.02 49H49v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 28 85a11 11 0 0 0 0 22c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V143h35.02z'%3E%3C/path%3E%3C/svg%3E");
    --arrow-right: url('data:image/svg+xml,%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22126.207%22%20height%3D%2222.354%22%20viewBox%3D%220%200%20126.207%2022.354%22%3E%0A%20%20%3Cg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1-2%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%201%22%3E%0A%20%20%20%20%3Cpolygon%20points%3D%22126.207%2022.354%200%2022.354%200%2021.354%20123.793%2021.354%20103.146%20.707%20103.854%200%20126.207%2022.354%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E');
    --arrow-round: url('data:image/svg+xml,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2056.5%2022.96%22%3E%0A%20%20%3Cg%20id%3D%22arrow-layer%22%3E%0A%20%20%20%20%3Cpath%20id%3D%22arrow-round%22%20class%3D%22cls-1%22%20d%3D%22M56.5%2C0l-8.26%2C3.5%2C2.76%2C2.08c-4.78%2C5.24-10.66%2C9.49-15.81%2C11.71%2C1.64-2.15%2C2.1-4.75%2C1.28-7.57-1.24-4.25-5.3-5.62-8.79-5.09-3.5.53-7.24%2C3.07-7.17%2C7.39.09%2C5.48%2C2.55%2C7.62%2C4.67%2C8.43-7.33%2C1.42-17.14-.22-23.51-5.71-.42-.36-1.05-.31-1.41.11-.36.42-.31%2C1.05.11%2C1.41%2C5.35%2C4.6%2C12.75%2C6.7%2C19.49%2C6.7%2C4.06%2C0%2C7.88-.76%2C10.86-2.2%2C6.88-1.21%2C15.76-7.2%2C21.91-13.97l2.79%2C2.11%2C1.1-8.91ZM31.27%2C18.16c-.39.25-.8.48-1.23.7-1.55.23-2.93.17-4.05-.23-2.26-.82-3.43-3.05-3.49-6.64-.05-3.12%2C2.8-4.98%2C5.47-5.38.37-.06.75-.09%2C1.14-.09%2C2.2%2C0%2C4.61.96%2C5.43%2C3.76%2C1.17%2C4.02-1.13%2C6.5-3.27%2C7.88Z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E');
    --text-color: hsl(0, 0%, 0%);
    --fonts-en: "Poetsen One";
    --fonts-ja: "M PLUS 1";
    --blog-bg: linear-gradient(45deg,
            hsla(0, 0%, 100%, 0.25) 0%,
            hsla(9, 100%, 68%, 0.3) 70%,
            hsla(0, 0%, 100%, 0.25) 100%);
    --cw-bg: linear-gradient(45deg,
            hsla(0, 0%, 100%, 0.25) 0%,
            hsla(62, 61%, 59%, 0.3) 70%,
            hsla(0, 0%, 100%, 0.25) 100%);
    --design-bg: linear-gradient(45deg,
            hsla(0, 0%, 100%, 0.25) 0%,
            hsla(202, 81%, 68%, 0.3) 70%,
            hsla(0, 0%, 100%, 0.25) 100%);
    --box-shadow-inset: 0 0em 1em 0 inset hsl(0, 0%, 100%);
    --box-shadow-taller: 1em 1em .4em hsl(0deg 0% 30% / 40%);
    --box-shadow-gray: .7em .7em gray;
    --box-shadow2-expansion: -0.3em -0.3em 0.3em 0.3em hsla(0, 0%, 100%, 0.3), 0.3em 0.3em 0.3em 0.3em hsla(0, 0%, 30%, 0.3);
    --box-shadow3: 0 0 0.3em white, 0.1em 0.1em 0.3em hsla(0, 0%, 0%, 0.7);
    --box-shadow-md: 0 0 0.3em white, 0.2em 0.2em 0.5em inset hsla(0, 0%, 100%, 0.5), 0.2em 0.2em 0.4em hsla(0, 0%, 0%, 0.6);
    --radius-lg: 30px;
    --radius-md: 20px;
    --radius-sm: 10px;
    --radius-xs: 5px;
}

*,
::before,
::after {
    /* 文字サイズclamp関数の数式 start*/
    --clamp-root-font-size: 16;
    --clamp-slope: calc((var(--clamp-max) - var(--clamp-min)) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)));
    --clamp-y-axis-intersection: calc(var(--clamp-min) - (var(--clamp-slope) * var(--clamp-viewport-min)));
    --clamp-preffered-value: calc(var(--clamp-y-axis-intersection) * (1rem / var(--clamp-root-font-size)) + (var(--clamp-slope) * 100vi));
    --clamp: clamp(calc(var(--clamp-min) * (1rem / var(--clamp-root-font-size))),
            var(--clamp-preffered-value),
            calc(var(--clamp-max) * (1rem / var(--clamp-root-font-size))));

    font-size: var(--clamp);
    /* 文字サイズclamp関数の数式 end */
}

/* 変数end------------------------------- */
/* 変数end------------------------------- */
/* 変数end------------------------------- */



/* common setting start---------------------------*/
/* common setting start---------------------------*/
/* common setting start---------------------------*/


body {
    --clamp-viewport-min: 375;
    --clamp-viewport-max: 1200;
    --clamp-min: 13.5;
    --clamp-max: 16;
    --under-bg-color: hsla(0, 0%, 30%, 0.6);
    --bg-red: hsla(9, 100%, 68%, 0.3);
    --bg-yellow: hsla(62, 61%, 59%, 0.3);
    --bg-blue: hsla(202, 81%, 68%, 0.3);
    --white-02: hsla(0, 0%, 100%, 0.2);

    color: var(--text-color);
    background: linear-gradient(to left bottom,
            var(--white-02) 0%,
            var(--white-02) 20%,
            var(--bg-red) 60%,
            var(--white-02) 80%,
            var(--white-02) 100%),
        linear-gradient(to right,
            var(--white-02) 0%,
            var(--white-02) 20%,
            var(--bg-yellow) 50%,
            var(--white-02) 80%,
            var(--white-02) 100%),
        linear-gradient(to right bottom,
            var(--white-02) 0%,
            var(--white-02) 20%,
            var(--bg-blue) 60%,
            var(--white-02) 80%,
            var(--white-02)100%),
        var(--under-bg-color) var(--bg-jigsaw);
    min-height: 100vh;

    font-family: "M PLUS 1", "Helvetica Neue",
        Arial,
        "Hiragino Kaku Gothic ProN",
        "Hiragino Sans",
        Meiryo,
        sans-serif;
    /* テキスト折り返し指定 */
    overflow-wrap: anywhere;
    word-break: normal;
    line-break: strict;
}

@media(max-width:767px) {
    body {
        background: linear-gradient(to left bottom,
                var(--white-02) 0%,
                var(--white-02) 20%,
                var(--bg-red) 60%,
                var(--white-02) 80%,
                var(--white-02) 100%),
            linear-gradient(to right,
                var(--white-02) 0%,
                var(--white-02) 20%,
                var(--bg-yellow) 50%,
                var(--white-02) 80%,
                var(--white-02) 100%),
            linear-gradient(to right bottom,
                var(--white-02) 0%,
                var(--white-02) 20%,
                var(--bg-blue) 60%,
                var(--white-02) 80%,
                var(--white-02)100%),
            var(--under-bg-color) var(--bg-jigsaw) center/30%;
        min-height: 100vh;
    }
}

ul {
    padding: 0;
}


.d-block-pc {
    display: block;
}

@media(max-width:767px) {
    .d-block-sp {
        display: block;
    }
}

/* button誤動作制御とデフォルトスタイルの打ち消し */
:where(button, [type='button'], [type='reset'], [type='submit']) {
    touch-action: manipulation;
    background-color: none;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

@media(max-width:767px) {
    .d-none-sp {
        display: none;
    }

}

.site-wrapper {
    max-width: 1000px;
    margin-inline: auto;
    /* shadowかかってるからshadowの半分右に隙間 */
    padding-inline: 1rem calc(1rem + .35em);
}



/* index-menu */
.index-menu {
    width: fit-content;
    margin-inline: auto -3em;
}

.navbar {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 44em;
    background-color: hsla(202, 81%, 68%, 0.3);
    transform: skew(-20deg);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 0px 0 20px 200px;
    border: 1px solid hsla(0, 0%, 100%, 0.645);
    /* safariでのバグ修正 */
    border-top: none;
    padding: 2.5em 2em;
    position: relative;
    /* navbarを上にしてmenu-linkのhover有効範囲を確保 */
    z-index: 1000;
}



.menu-item {
    list-style: none;
    transform: skew(20deg);
}

.menu-link {
    --clamp-min: 14;
    --clamp-max: 16;
    text-decoration: none;
    padding: .5em 1em;
    color: white;
    font-family: var(--fonts-en);
    line-height: 1.3;
    display: block;
    position: relative;
}

@media(any-hover:hover) {
    .menu-link.ready:hover {
        color: hsl(0, 0%, 20%);
    }
}


.menu-link.ready:before {
    content: '';
    height: 1px;
    /* paddingでhover有効範囲を広げてるのでその分幅を縮小
    (2emにすると、線の幅が足りなく見えるから.5em分長く) */
    /* width: calc(100% - 1.5em); */
    width: 0;
    position: absolute;
    /* 幅を縮小した半分ズレるので左に動かす */
    left: .75em;
    bottom: 0;
    background-color: white;
    /* scale: 0 1; */
    transform-origin: center top;
    transition: width .2s;
}

@media(any-hover:hover) {
    .menu-link.ready:hover:before {
        /* skew × scaleの相性が悪くhover時にがたつくため、widthアニメーションに */
        /* scale: 1 1; */
        width: calc(100% - 1.5em);
    }
}



/* lower-header(下層ページヘッダー) start------------------*/
.lower-header {
    margin-block-end: 3em;
}

.lower-header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 5rem;
    /* リンクのパディングを左右に1em取ってるから、ピッタリ右に行かない。その分を動かす */
    margin-inline-end: -1em;
}

@media(max-width:767px) {
    .lower-header__inner {
        justify-content: center;
    }
}

.lower-heading1 {
    --clamp-viewport-min: 768;
    --clamp-viewport-max: 1200;
    --clamp-min: 20;
    --clamp-max: 24;
    font-family: var(--fonts-en);
    line-height: 1.3;
    font-weight: normal;
    width: fit-content;
    text-align: center;
}

@media(max-width:767px) {
    .lower-heading1 {
        --clamp-viewport-min: 375;
        --clamp-viewport-max: 767;
        --clamp-min: 20;
        --clamp-max: 32;
        line-height: 1.1;
        letter-spacing: 0.03em;
    }
}

.lower-menu {
    width: fit-content;
}

.lower-navbar {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

.lower-navbar>*+* {
    border-left: 2px solid;
}

.lower-menu-item {
    width: fit-content;
    list-style: none;
    display: flex;
    align-items: center;
}

.lower-menu-link {
    --clamp-viewport-min: 768;
    --clamp-viewport-max: 1200;
    --clamp-min: 13;
    --clamp-max: 15;
    text-decoration: none;
    padding: .5em 1.5em;
    color: black;
    font-family: var(--fonts-en);
    text-align: center;
    line-height: 1.3;
    display: block;
    position: relative;
}

@media(any-hover:hover) {
    .lower-menu-link.ready:hover {
        color: white;
    }
}

.lower-menu-link.ready:before {
    content: '';
    height: 2px;
    /* paddingでhover有効範囲を広げてるのでその分幅を縮小 */
    width: calc(100% - 1.5em);
    position: absolute;
    /* 幅を縮小した半分ズレるので左に動かす */
    left: .75em;
    bottom: 0px;
    background-color: black;
    scale: 0 1;
    transform-origin: center top;
    transition: scale .2s;
}

@media(any-hover:hover) {
    .lower-menu-link.ready:hover:before {
        scale: 1 1;
    }
}

/* lower-header end----------------------------*/



/* hamburger start--------------------------------------- */
/* 常にスクロールバーを表示 */
body {
    overflow-y: scroll;
    overflow-x: hidden;
}

/* 背面スクロール抑制 */
body:has(.hamburger-menu[aria-hidden='false']) {
    overflow: hidden;
}

/* header,main,footerを囲むwrapperを作る必要がある。（site-wrapper） */
.site-wrapper:has(.hamburger-menu[aria-hidden='false']) {
    overflow-y: scroll;
    /* スクロールバーのスペースを常に確保する */
    scrollbar-gutter: stable;
}

/* hamburger button */
.hamburger-button {
    width: 50px;
    height: 50px;
    background-color: black;
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 9999;
    border-radius: var(--radius-xs);
    border: none;
    cursor: pointer;
    padding: 0;
    display: grid;
    place-items: center;
}

.hamburger-line {
    height: 2px;
    width: 30px;
    border-radius: var(--radius-xs);
    background-color: white;
    position: relative;
    transition: all .1s;
}

.hamburger-line:before,
.hamburger-line:after {
    content: "";
    display: block;
    height: 2px;
    width: 30px;
    border-radius: var(--radius-xs);
    background-color: white;
    transition: all 0.3s;
    position: absolute;
}

.hamburger-line::before {
    top: -10px;
}

.hamburger-line::after {
    top: 10px;
}

.hamburger-button[aria-expanded='true'] .hamburger-line {
    height: 0;
}

.hamburger-button[aria-expanded='true'] .hamburger-line:before {
    top: 0;
    rotate: 45deg;
}

.hamburger-button[aria-expanded='true'] .hamburger-line:after {
    top: 0;
    rotate: -45deg;
}

.hamburger-button[aria-expanded='true'] {
    background: darkgray;
}

/* over lay */
.ham-light-dark[aria-hidden='false'] {
    background: black;
    opacity: 0.5;
    inset: 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9000;
    transition: all .2s;
}

.ham-light-dark[aria-hidden='true'] {
    opacity: 0;
}

/* hamburger menu  */
.hamburger-menu {
    width: 80%;
    height: 100%;
    position: fixed;
    top: 0;
    background-color: black;
    z-index: 9200;
}

.hamburger-menu nav {
    margin-top: 6rem;
}

.hamburger-menu ul {
    list-style: none;
    padding: 0;
    display: grid;
}

.hamburger-menu li {
    text-align-last: left;
    line-height: 3;
    border-bottom: .5px solid gray;
}

.hamburger-menu li:first-child {
    border-top: .5px solid gray;
}

.hamburger-menu a {
    --clamp-viewport-min: 375;
    --clamp-viewport-max: 767;
    --clamp-min: 16;
    --clamp-max: 20;
    display: block;
    text-decoration: none;
    color: white;
    font-size: 1rem;
    padding-left: 1rem;
    position: relative;
}

/* arrow */
.hamburger-menu a:before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border: 1px solid lightgray;
    border-width: 1px 1px 0 0;
    transform: rotate(45deg);
    position: absolute;
    inset: 0;
    margin: auto 1rem auto auto;
}

.hamburger-menu[aria-hidden='true'] {
    left: 100%;
    opacity: 0;
    transition: all 0.2s ease;
}

.hamburger-menu[aria-hidden='false'] {
    left: 20%;
    width: 80%;
    transition: all 0.2s ease;
    opacity: 1;
}



@media(min-width:768px) {
    .hamburger-button {
        display: none;
    }
}

@media(max-width:600px) {
    .hamburger-button {
        right: 8px;
    }
}

/* リンク先準備中 */
a.yet {
    color: gray;
    pointer-events: none;
}

/* hamburger end */
/* common heading start */
.heading2 {
    --clamp-min: 28;
    --clamp-max: 60;
    text-align: center;
    font-family: var(--fonts-en);
    line-height: 1;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 4px hsla(0, 0%, 50%, 0.5);
}

.lower-heading2 {
    --clamp-min: 48;
    --clamp-max: 72;
    margin-block-end: 1em;
}

.sub-text {
    --clamp-min: 14;
    --clamp-max: 20;
    display: block;
    text-align: center;
    font-weight: normal;
    font-family: "M PLUS 1";
    letter-spacing: 0.07em;
    margin-block-end: .3em;
}

@media(max-width:767px) {
    .sub-text {
        width: fit-content;
        margin-inline: auto;
        line-height: 1;
    }
}

/* common heading end */
/* common container start */
.container-lg {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-inline: auto;
    border-radius: var(--radius-lg);
    padding: 3rem;
    box-shadow: var(--box-shadow-inset), var(--box-shadow-gray);
}

@media(max-width:767px) {
    .container-lg {
        gap: 2rem;
        padding: 2.5rem 5%;
        border-radius: calc(var(--radius-sm) + var(--radius-xs));
    }
}

/* common container end */
/* button start */
.common-button {
    --button-shadow-inset: 0.2em 0.2em 0.3em inset hsla(0, 0%, 100%, 0.9), -0.2em -0.2em 0.3em 0 inset hsla(0, 0%, 0%, 0.3);
    --box-shadow-gray: .5em .5em gray;
    display: block;
    width: clamp(200px, 70%, 500px);
    text-decoration: none;
    font-family: var(--fonts-en);
    padding: 0.5em 0;
    margin-inline: auto;
    text-align: center;
    border-radius: var(--radius-sm);
    color: white;
    font-weight: bold;
    --clamp-min: 20;
    --clamp-max: 24;
    border-right: 1px solid hsla(0, 0%, 0%, 0.4);
    border-bottom: 1px solid hsla(0, 0%, 0%, 0.4);
    box-shadow: var(--button-shadow-inset), var(--box-shadow-gray);
    transition: all 0.3s;
}

.button-red {
    background: radial-gradient(hsl(9deg 100% 40% / 70%), hsl(9deg 100% 80% / 20%));
}

.button-yellow {
    background: radial-gradient(hsl(62deg 100% 40% / 60%), hsl(62deg 100% 20% / 30%));
}

.button-blue {
    background: radial-gradient(hsl(202deg 100% 33.86% / 80%), hsl(202deg 100% 74.05% / 30%));
}

@media(any-hover:hover) {
    .common-button:hover {
        --button-shadow-inset: 0.1em 0.1em 0.2em inset hsla(0, 0%, 100%, 0.9), -0.1em -0.1em 0.15em 0 inset hsla(0, 0%, 0%, 0.4);
        --box-shadow-gray: .25em .25em gray;
        transform: translateY(0.1em);
        box-shadow: var(--button-shadow-inset), var(--box-shadow-gray);
    }
}


.common-button:active {
    transform: translateY(0.1em);
    box-shadow: none;
}

@media(max-width:600px) {
    .common-button {
        width: 100%;
    }
}

/* button end */
/* card hover start*/
.blog-inner__link,
.cw-grid__item,
.design-grid__item {
    position: relative;
    transition: box-shadow .3s, translate .3s;
}

@media (any-hover:hover) {

    .blog-inner__link:hover,
    .cw-grid__item:hover,
    .design-grid__item:hover {
        translate: .35em .35em;
        box-shadow: none;
    }
}

.blog-inner__link:active,
.cw-grid__item:active,
.design-grid__item:active {
    translate: .35em .35em;
    box-shadow: none;
}


/* card hover end */
/* mask start*/
.hover-mask {
    position: absolute;
    inset: 0;
    margin: auto;
    color: white;
    background-color: hsla(0, 0%, 0%, 0.6);
    opacity: 0;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    transition: all .3s;
}

@media(any-hover:hover) {

    .blog-inner__link:hover .hover-mask,
    .cw-grid__item:hover>.hover-mask,
    .design-grid__item:hover .hover-mask {
        opacity: 1;
        cursor: pointer;
    }
}


.hover-mask>p {
    --clamp-min: 14;
    --clamp-max: 20;
    letter-spacing: .05em;
    transition: .3s;
}

@media(any-hover:hover) {

    .blog-inner__link:hover .hover-mask>p,
    .cw-grid__item:hover>.hover-mask>p,
    .design-grid__item:hover .hover-mask>p {
        scale: 0.8;
    }
}

@media(max-width:767px) {
    .hover-mask>p {
        --clamp-viewport-min: 375;
        --clamp-viewport-max: 767;
        --clamp-min: 12;
        --clamp-max: 24;
    }
}

/* mask end */

/* lower-footer(下層ページフッター) start------------------*/
.index-footer,
.lower-footer {
    /* site-wrapperで右のpaddingを.35em広げたから、その分右に広げる*/
    margin-inline: calc(50% - 50vw) calc(50% - (50vw + .35em));
    padding-inline: calc(50vw - 50%);
    /* height: 10rem; */
    background: black;
    color: white;
    position: relative;
}

.footer-menu {
    padding-block: 2rem;
}

.footer-navbar {
    display: flex;
    justify-content: center;
}

@media(max-width:767px) {
    .footer-navbar {
        flex-direction: column;
    }
}

.footer-navbar>*+* {
    border-left: 1px solid;
}

@media(max-width:767px) {
    .footer-navbar>*+* {
        border-left: none;
    }
}

.footer-menu-item {
    list-style: none;
}

.footer-menu-link {
    display: block;
    font-size: 0.8rem;
    color: white;
    text-decoration: none;
    padding: .5em 1em;
    position: relative;
}

@media(max-width:767px) {
    .footer-menu-link {
        text-align: center;
        width: fit-content;
        margin-inline: auto;
    }
}

.footer-menu-link.ready:before {
    content: '';
    height: 1px;
    /* paddingでhover有効範囲を広げてるのでその分幅を縮小 */
    width: calc(100% - 1.5em);
    position: absolute;
    /* 幅を縮小した半分ズレるので左に動かす */
    left: .75em;
    bottom: 0px;
    background-color: white;
    scale: 0 1;
    transform-origin: center top;
    transition: scale .2s;
}

@media(any-hover:hover) {
    .footer-menu-link.ready:hover:before {
        scale: 1 1;
    }
}


.footer__copy {
    padding-block: .5em;
    font-size: .8rem;

}

/* lower-footer(下層ページフッター) end--------------------*/


/* common setting end---------------------------*/
/* common setting end---------------------------*/
/* common setting end---------------------------*/


/* index.html start---------------------------- */
/* index.html start---------------------------- */
/* index.html start---------------------------- */
.index-main {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    position: relative;
}


/*index header start----------------------------------- */
.index-header {
    /* コンテナを幅いっぱいに（はみ出す） */
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
    color: white;
    text-align: center;
    position: relative;
}

/* jigsaw animation start */
.index-header:before,
.lower-header:before {
    content: '';
    display: block;
    /* 高さを７で割り、ちょうど画像が7つ入るアスペクト比に */
    aspect-ratio: 6/ calc(5 / 7);
    /* width: 100vw; */
    position: absolute;
    inset: 0;
    background: url(../images/assets/jigsaw-black.svg) repeat-x center top/contain;
    filter: drop-shadow(1px 0 0 black) drop-shadow(4px 4px 4px hsla(0, 0%, 0%, 0.5));
    mix-blend-mode: exclusion;
    z-index: -5;
    translate: 0 -50%;
    animation: scroll-right 4s infinite linear .5s both;
}

.lower-header:before {
    opacity: .5;
}

/* safari対応start */
_::-webkit-full-page-media,
_:future,
:root .index-header:before,
.lower-header:before {
    /* safariでdrop-shadowが汚くなるのでx座標1pxだけ入れて切れ目を消す */
    filter: drop-shadow(1px 0 0 black);
    /* mix-blend-mode: exclusion;が効かないから値を変えて対応 */
    mix-blend-mode: soft-light;
}

_::-webkit-full-page-media,
_:future,
:root .lower-header:before {
    mix-blend-mode: unset;
    opacity: .15;
}


/* safari対応end */
@keyframes scroll-right {
    from {
        /* translateでやると綺麗にリピートしない */
        background-position: 0 0;
    }

    to {
        background-position: calc(100vw / 7) 0;
    }
}

@media(max-width:767px) {

    .index-header:before,
    .lower-header:before {
        aspect-ratio: 6/ calc(5 / 3);
        animation: scroll-right 6s infinite linear .5s both;

    }

    .index-header:before {
        mix-blend-mode: unset;
    }

    @keyframes scroll-right {
        from {
            /* translateでやると綺麗にリピートしない */
            background-position: 0 0;
        }

        to {
            background-position: calc(100vw / 3) 0;
        }
    }
}

/*jigsaw animation end */
/* index title start */
.index-title {
    --clamp-min: 32;
    --clamp-max: 60;
    width: fit-content;
    margin-inline: auto;
    padding-block: 3em 2.5em;
    margin-top: -1.5em;
    line-height: 1;
    font-family: var(--fonts-en);
    text-shadow: 2px 2px 4px hsla(0, 0%, 50%, 0.5);
    position: relative;
}

@media(max-width:767px) {
    .index-title {
        margin-top: 0;
        line-height: 1.1em;
    }
}

@media(max-width:767px) {
    .my-name {
        letter-spacing: 0.05em;
    }
}

.index-title:before {
    content: "";
    width: min(200px, 30%);
    background: hsla(0, 0%, 0%, .8);
    mask-image: url(../images/assets/profile.svg);
    mask-repeat: no-repeat;
    mask-position: center top 1em;
    mask-size: 100%;
    -webkit-mask-image: url(../images/assets/profile.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center top 1em;
    -webkit-mask-size: 100%;
    position: absolute;
    inset: 0;
    translate: -82% 0;
    z-index: -10;
}

@media(max-width:767px) {
    .index-title:before {
        width: auto;
        background: hsl(0 0% 35% / 1);
        mask-position: center top;
        -webkit-mask-position: center top;
        mask-size: 95%;
        filter: unset;
        translate: -4em 0rem;
    }
}

.index-title .sub-text {
    text-align: left;
    margin-block-end: .2em;
}

/* index title end */
/* header end----------------------------------- */


/* three start-----------------------------------*/
.three {
    max-width: 1000px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 2.5%;
    position: relative;
}



@media(max-width:767px) {
    .three {
        grid-template-columns: 100%;
        row-gap: 1.5em;
    }
}

.three__item {
    --box-shadow-gray: .6em .6em gray;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    place-content: center;
    gap: 1em;
    text-decoration: none;
    border-radius: var(--radius-md);
    box-shadow: var(--box-shadow-inset), var(--box-shadow-gray);
    transition: scale 0.2s linear;
    padding: 0 8%;
}



@media (hover: hover) and (pointer: fine) {
    .three__item:hover {
        scale: 1.1;
    }
}

@media(max-width:767px) {
    .three__item {
        gap: .5em;
        border-radius: calc(var(--radius-sm) + var(--radius-xs));
        padding: 1.5em 1em;
        width: 100%;
    }
}

.three__item:nth-child(1) {
    --blog-bg: linear-gradient(45deg, hsla(0, 0%, 100%, 0.25) 0%, hsl(9 40% 70% / 1) 70%, hsla(0, 0%, 100%, 0.25) 100%);
    background-image: var(--blog-bg);
}

.three__item:nth-child(2) {
    --cw-bg: linear-gradient(45deg, hsla(0, 0%, 100%, 0.25) 0%, hsl(62 40% 70% / 1) 70%, hsla(0, 0%, 100%, 0.25) 100%);
    background-image: var(--cw-bg);
}

.three__item:nth-child(3) {
    --design-bg: linear-gradient(45deg, hsla(0, 0%, 100%, 0.25) 0%, hsl(202deg 40% 70%) 70%, hsla(0, 0%, 100%, 0.25) 100%);
    background-image: var(--design-bg);
}

.three__heading {
    --clamp-min: 20;
    --clamp-max: 24;
    text-align: center;
    font-family: var(--fonts-en);
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 4px hsla(0, 0%, 50%, 0.5);
    letter-spacing: 0.08em;
    line-height: 1.2;
    mix-blend-mode: screen;
    display: grid;
    place-items: center;
    margin-top: 15%;
}


@media(max-width:767px) {
    .three__heading {
        margin-top: 0em;
        display: inline-block;
    }
}

.three__text {
    margin-bottom: 15%;
    padding: 1.5em;
    background: linear-gradient(150deg, hsla(0, 0%, 100%, 0.4) 0%, hsla(0, 0%, 92%, 0.5) 60%, hsla(0, 0%, 100%, 0) 97%);
    border-radius: var(--radius-sm);
    box-shadow: var(--box-shadow-gray);
    text-align: justify;
    color: var(--text-color);
}

@media(max-width:767px) {
    .three__text {
        margin-bottom: 0;
        padding: 1em;
        border-radius: var(--radius-xs);
    }
}

/* three end -----------------------------------*/



/* blog start-----------------------------------*/
.blog {
    flex-direction: column;
    background: var(--blog-bg), url(../images/assets/buybig.webp) no-repeat right bottom/18%, url(../images/assets/puzzle-piece.webp) no-repeat left bottom/15%;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border: 1px solid hsla(0, 0%, 100%, 0.4);
    border-right-color: hsla(0, 0%, 100%, 0.2);
    border-bottom-color: hsla(0, 0%, 100%, 0.2);
}


.blog-inner {
    --blog-inner-gap: 1.5em;
    width: min(720px, 100%);
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--blog-inner-gap);
}



@media(max-width:767px) {
    .blog-inner {
        --blog-inner-gap: 2em;
        grid-template-columns: 100%;
        gap: 2em;
    }
}

.blog-inner__link {
    flex-grow: 1;
    flex-basis: 280px;
    display: grid;
    place-items: center;
    position: relative;
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--box-shadow-inset), var(--box-shadow-gray);
}

.blog-inner__figure {
    width: 100%;
}

.blog-inner__image {
    margin: auto;
    width: 100%;
    aspect-ratio: 3/ 2;
    height: auto;
    object-fit: cover;
    object-position: top;
    transition: all 0.3s;
}


.blog-inner__text {
    flex-grow: 1;
    flex-basis: 280px;
    text-align: justify;
    padding: 1em;
    background: linear-gradient(150deg,
            hsla(0, 0%, 100%, 0.3) 0%,
            hsla(0, 0%, 100%, 0.3) 60%,
            hsla(0, 0%, 100%, 0.1) 90%);
    border-radius: var(--radius-sm);
    border-radius: var(--radius-sm);
    box-shadow: var(--box-shadow-inset), var(--box-shadow-gray);
    backdrop-filter: contrast(1);
    -webkit-backdrop-filter: contrast(1);
    transition: all 0.5s;
    display: grid;
    place-items: center;
}


/* 簡易図 */
.marketing-figure {
    --clamp-min: 18;
    --clamp-max: 28;
    --break-point: 500px;
    width: min(720px, 100%);
    margin-inline: auto;
    display: flex;
    justify-content: space-between;
    gap: 5%;
}

@media(max-width:500px) {
    .marketing-figure {
        --clamp-min: 32;
        --clamp-max: 38;
        flex-direction: column;
        gap: 1em;
    }
}

/* arrow animation start */
.arrow-triangle {
    position: relative;
}

.arrow-triangle:before,
.arrow-triangle:after {
    --bg-red: hsl(9 100% 60% / 1);
    content: "";
    /* 正三角形の少数点比率 */
    aspect-ratio: 0.866 / 1;
    width: 5%;
    clip-path: polygon(0 0, 100% 50%, 0 100%, 10% 50%);
    background: var(--bg-red);
    position: absolute;
    inset: 0;
    margin: auto;
    animation: arrow-lr 1s ease-in-out infinite alternate;
    z-index: 100;
}

.arrow-triangle:before {
    left: -35%;
}

.arrow-triangle:after {
    right: -35%;
}

@keyframes arrow-lr {
    0% {
        translate: -30% 0;
        scale: 1;
    }

    100% {
        translate: 35% 0;
        scale: 1.3;
    }
}

@media(max-width:500px) {

    .arrow-triangle:after,
    .arrow-triangle:before {
        inset: 0;
        rotate: 90deg;
        width: 7%;
        animation: arrow-td 1s ease-in-out infinite alternate;
    }

    .arrow-triangle:before {
        top: -35%;
    }

    .arrow-triangle:after {
        bottom: -35%;
    }
}

@keyframes arrow-td {
    0% {
        translate: 0 -30%;
        scale: 1;
    }

    100% {
        translate: 0 30%;
        scale: 1.3;
    }
}

/* arrow animation end */

.marketing-figure__item {
    --bg-red: hsl(9, 100%, 90%, 0.9);
    aspect-ratio: 1;
    flex: 1;
    border-radius: var(--radius-sm);
    border: 1px solid hsla(0, 0%, 100%, 0.3);
    padding: 1em;
    background: var(--bg-red);
    box-shadow: var(--box-shadow-inset), var(--box-shadow-gray);
    display: grid;
    place-items: center;
    grid-template-rows: auto 1fr;
}

@media(max-width:500px) {
    .marketing-figure__item {
        --box-shadow-gray: 0.3em 0.3em gray;
        padding: 0;
        display: grid;
        grid-template-columns: 70% 30%;
        justify-content: center;
        aspect-ratio: unset;
        overflow: hidden;
    }
}


.marketing-figure__heading {
    color: white;
    text-shadow: 0em 0em .2em hsl(0deg 0% 0% / 30%);
    font-family: var(--fonts-en);
    font-weight: normal;
    height: 100%;
    width: 100%;
    display: grid;
    place-items: center;
}


.marketing-figure__image {
    aspect-ratio: 5/4;
    width: max(100px, 85%);
    /* filter: drop-shadow(3px 3px hsla(0, 0%, 50%, 0.3)); */
}

@media(max-width:500px) {
    .marketing-figure__image {
        --bg-red: hsl(9, 100%, 97%, 0.9);
        box-sizing: content-box;
        padding: .3em;
        background: var(--bg-red);
    }
}

/* blog end-------------------------------------- */
/* contents writing start---------------------- */
.cw {
    flex-direction: column;
    background-image: var(--cw-bg);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border: 1px solid hsla(0, 0%, 100%, 0.4);
    border-right-color: hsla(0, 0%, 100%, 0.2);
    border-bottom-color: hsla(0, 0%, 100%, 0.2);
}

.cw__text {
    padding: 1.5em;
    background: linear-gradient(45deg,
            hsla(0, 0%, 100%, 0.3) 3%,
            hsla(0, 0%, 100%, 0.4)50%,
            hsla(0, 0%, 100%, 0.2) 97%);
    border-radius: var(--radius-sm);
    box-shadow: var(--box-shadow-inset), var(--box-shadow-gray);
    text-align: justify;
    backdrop-filter: contrast(1);
    -webkit-backdrop-filter: contrast(1);
    transition: all 0.5s;
}

@media(max-width:767px) {
    .cw__text {
        padding: 1em;
    }
}

.cw-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2em;
}


@media(max-width:767px) {
    .cw-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5em;
    }
}

.cw-grid__item {
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--box-shadow-inset), var(--box-shadow-gray);
}

.cw-grid__item img {
    aspect-ratio: 1/1;
    width: 100%;
    object-fit: cover;
    object-position: top center;
    box-shadow: var(--box-shadow-gray);
    transition: all 0.3s;
}

/* contents writing end---------------------- */

/* web design start---------------------------*/
.design {
    flex-direction: column;
    background-image: var(--design-bg);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border: 1px solid hsla(0, 0%, 100%, 0.4);
    border-right-color: hsla(0, 0%, 100%, 0.2);
    border-bottom-color: hsla(0, 0%, 100%, 0.2);
    margin-block-end: 20%;
    position: relative;
}

/* @media(min-width:500px) and (max-width:767px) {
    .design {
        padding-inline: 5em;
    }
} */



.design__text {
    padding: 1.5em;
    background: linear-gradient(45deg,
            hsla(0, 0%, 100%, 0.3) 3%,
            hsla(0, 0%, 100%, 0.4)50%,
            hsla(0, 0%, 100%, 0.2) 97%);
    border-radius: var(--radius-sm);
    box-shadow: var(--box-shadow-inset), var(--box-shadow-gray);
    text-align: justify;
    backdrop-filter: contrast(1);
    -webkit-backdrop-filter: contrast(1);
}

.design-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2em;
}

@media(min-width:500px) and (max-width:767px) {
    .design-grid {
        gap: 3em;
    }
}

@media(max-width:767px) {
    .design-grid {
        grid-template-columns: auto;
    }
}

.design-grid__item {
    display: block;
    border-radius: calc(var(--radius-sm) + var(--radius-xs));
    overflow: hidden;
    box-shadow: var(--box-shadow-inset), var(--box-shadow-gray);
}

@media(max-width:767px) {
    .design-grid__item {
        border-radius: var(--radius-sm);
    }
}

.design-grid__item img {
    aspect-ratio: 4/3;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: top center;
    box-shadow: var(--box-shadow-gray);
    transition: all 0.3s;
}

@media(max-width:767px) {
    .design-grid__item img {
        aspect-ratio: 16/9;
    }
}

/* web design end---------------------------*/


/* profile start---------------------------------- */
.profile {
    /* site-wrapperで右のpaddingを.35em広げたから、その分右に広げる*/
    margin-inline: calc(50% - 50vw) calc(50% - (50vw + .35em));
    padding: 3em calc(50vw - 50%);
    color: hsl(0, 0%, 95%);
    background-color: black;
    display: grid;
    gap: 2em;
    position: relative;
    z-index: 1;
}

.profile:before {
    content: '';
    display: block;
    /* 画像のアスペクト比の高さを5で割り、ちょうど画像が5つ入るように */
    aspect-ratio: 6/ calc(5 / 5);
    width: 100vw;
    position: absolute;
    inset: 0;
    background: url(../images/assets/jigsaw-black.svg) repeat-x center top/contain;
    filter: drop-shadow(2px 0 0 black) drop-shadow(4px 4px 4px hsla(0, 0%, 0%, 0.5));
    z-index: -1;
    animation: scroll-left 4s infinite linear .5s both;
    translate: 0 -50%;
}



@keyframes scroll-left {
    from {
        background-position: 0 0;
    }

    to {
        background-position: calc(-100vw / 5) 0;
    }
}

/* jigsawアニメーションがでかくなりすぎるから対策 */
@media(min-width:2000px) {

    .profile:before {
        aspect-ratio: 6/ calc(5 / 9);

    }

    @keyframes scroll-left {
        from {
            background-position: 0 0;
        }

        to {
            background-position: calc(-100vw / 9) 0;
        }
    }

}

@media(max-width:767px) {

    .profile:before {
        aspect-ratio: 6/ calc(5 / 2.5);
        animation: scroll-left 6s infinite linear .5s both;
    }

    @keyframes scroll-left {
        from {
            /* translateでやると綺麗にリピートしない */
            background-position: 0 0;
        }

        to {
            background-position: calc(-100vw / 2.5) 0;
        }
    }
}

.profile__heading {
    --clamp-min: 24;
    --clamp-max: 48;
    font-family: var(--fonts-en);
    color: white;
    text-align: center;
    line-height: 1.3;
    font-weight: bold;
    opacity: 0;
}



.profile__inner {
    width: min(760px, 100%);
    margin-inline: auto;
    text-align: justify;
    display: grid;
    gap: 1em;
}

@media(max-width:767px) {
    .profile__inner {
        padding-inline: 1em;
    }
}

.profile-wrapper {
    margin-inline: auto;
    display: flex;
    justify-content: center;
    gap: 1em;
}

@media(max-width:767px) {
    .profile-wrapper {
        flex-direction: column;
    }
}

.myself {
    flex-basis: 20%;
    opacity: 0;
}

.myself__image {
    aspect-ratio: 108 / 308;
    width: clamp(5rem, 20%, 7rem);
    fill: hsl(0, 0%, 70%);
    /* stroke: hsl(0, 0%, 82%); */
    stroke-width: .5px;
    margin-inline: auto;
}

.introduction {
    flex-basis: 70%;
    width: min(500px, 100%);
    align-self: center;
    opacity: 0;
}

.introduction__text {
    margin-bottom: 1em;
}

/* profile-button */
.profile-button {
    display: block;
    width: fit-content;
    margin-inline: auto 2em;
    padding: 1em 2em;
    color: white;
    letter-spacing: 0.05em;
    text-decoration: none;
    border: 1px solid;
    border-radius: var(--radius-xs);
    position: relative;
}

/* button back */
.profile-button:before {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    margin: .5em -1em -.5em 1em;
    padding-block: 1.5em;
    background-color: hsla(0, 0%, 70%, 0.5);
    border-radius: var(--radius-xs);
    transition: margin .2s;
    pointer-events: none;
    z-index: -1;
}

/* arrow */
.profile-button:after {
    content: "";
    display: block;
    mask: var(--arrow-round) no-repeat center/80%;
    -webkit-mask: var(--arrow-round) no-repeat center/80%;
    background-color: white;
    aspect-ratio: 150/60;
    width: 6em;
    position: absolute;
    inset: 0;
    margin: auto -3.5em -1.5em auto;
    transition: width .2s, margin .2s;
    pointer-events: none;
}

@media(any-hover:hover) {
    .profile-button:hover:before {
        margin: 0;
    }

    .profile-button:hover:after {
        width: 4em;
        margin: auto -2.5em auto auto;
    }

}

@media(max-width:767px) {
    .profile-button:active:before {
        margin: 0;
    }

    .profile-button:active:after {
        width: 4em;
        margin: auto -2.5em auto auto;
    }
}


/* profile end---------------------------------- */




/* designs common start--------------------------- */
/* designs common start--------------------------- */
/* designs common start--------------------------- */

.designs {
    flex-direction: column;
    margin-bottom: 11rem;
    backdrop-filter: blur(2px);
}


.designs__figure {
    width: min(800px, calc(100% - 2em));
    height: auto;
    margin-inline: auto;
    filter: drop-shadow(4px 6px 6px hsl(0, 0%, 40%));
}

.designs__figure img {
    width: 100%;
    height: auto;
}

.designs__wrap {
    background: hsla(0, 0%, 100%, 0.341);
    padding: 1em;
}

@media(max-width:767px) {
    .designs__wrap {
        padding: .5em;
    }
}

.designs__title {
    font-weight: bold;
    --clamp-min: 14;
    --clamp-max: 16;
}

.designs__text {
    padding-inline-start: 1.5em;
    margin-bottom: 1em;
}

@media(max-width:767px) {
    .designs__text {
        padding-inline-start: .5em;
    }
}

.designs-link {
    color: hsl(202, 100%, 30%);
    transition: opacity .2s;
}

@media(any-hover:hover) {
    .designs-link:hover {
        opacity: .7;
    }
}


/* designs common end--------------------------- */
/* designs common end--------------------------- */
/* designs common end--------------------------- */


/* contact.html start--------------------------- */
/* contact.html start--------------------------- */
/* contact.html start--------------------------- */



.form-wrapper {
    max-width: 600px;
    margin-inline: auto;
    margin-block-end: 25%;
}

.form {
    display: grid;
    gap: 2.5em;
}

.form-title {
    display: block;
    font-weight: bold;
    margin-block-end: 0.5em;
}

.required {
    font-size: .8em;
    background-color: white;
    border-radius: 2px;
    padding: .2em .5em;
    margin-left: .5em;
}

.form-content :where(.form-oneline, .form-box) {
    background-color: hsla(0, 0%, 100%, 0.7);
    border: 1px solid hsla(0, 0%, 100%, 0.7);
    border-radius: 2px;
    padding: 0.5em;
}

.form-content :where(.form-oneline, .form-box):focus {
    outline: 2px solid hsl(201, 100%, 69%);
    outline-offset: -3px;
}

.form-content :where(.form-oneline) {
    width: min(100%, 450px);
}

.form-content :where(.form-box) {
    width: 100%;
}

.radio-items {
    padding: 0;
}

.radio-list {
    list-style: none;
    font-weight: bold;
    cursor: pointer;
    width: fit-content;
    padding-block: .2em;
}

/* ラジオボタンの位置調整 */
input[type="radio"] {
    vertical-align: middle;
    cursor: pointer;
}

.form-radio {
    accent-color: cadetblue;
}

.radio-label {
    padding-inline-start: .2em;
    cursor: pointer;
}

.form-button {
    display: block;
    background-color: hsl(200, 100%, 40%);
    color: white;
    width: 100%;
    letter-spacing: 0.05em;
    margin-inline: auto;
    padding: 1em 0;
    position: relative;
    transition: background-color .2s;
}

@media(any-hover:hover) {
    .form-button:hover {
        /* color: white; */
        background-color: hsl(200, 100%, 30%);
    }
}

.form-button:before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border: 1px solid;
    border-width: 2px 2px 0 0;
    transform: rotate(45deg);
    position: absolute;
    inset: 0;
    margin: auto 5% auto auto;
    transition: translate .2s ease-in;
}

@media(any-hover:hover) {
    .form-button:hover:before {
        translate: 5px 0px;
    }
}


/* contact.html end--------------------------- */
/* contact.html end--------------------------- */
/* contact.html end--------------------------- */