@charset "utf-8";

/* --------------------------------
#read リード文 画像
----------------------------------- */
#read {
    & .read01 img { max-width: 450px; }
    & .read02 img { max-width: 350px; }
}

/* ---------------------------
#website 外部サイト
------------------------------ */
#website {
    border: 1px solid var(--bg01);
    border-radius: 9999px 0 0 9999px;
    margin: 5rem -5.12rem 5rem 0;
    overflow: hidden;
    position: relative;
    text-align: center;
    /* リンクを全体に */
    & a {
        display: flex;
        gap: 2rem;
        align-items: center;
        justify-content: center;
        padding: 3rem 2rem;
        z-index: 10;
    }
    /* 右 > テキスト */
    & p {
        text-shadow: 0 0 5px var(--white);
    }
    & br   {
        display: none;
    }
    & span {
        display: block;
        font-weight: bold;
        /* 右 > アイコン */
        & img { vertical-align: sub; }
    }
    /* 背景画像 */
    &::before{    
    clip-path: inset(0);
    border-radius: 9999px 0 0 9999px;
    content: '';
    background: url(../img/about/PK2913_01-b59_w.jpg) center / 100%;
    width: 100%;
    max-width: calc(750px - 5rem);
    height: 100%;
    display: block;
    position: absolute;
    bottom: 0;
    opacity: 0.6;
    transition:  .3s;
    }
    /* 枠線 */
    &::after{
    border-radius: 9999px 0 0 9999px;
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    bottom: 0;
    position: absolute;
    border: 1.5px solid var(--bg01);
    transition:  .3s;
    }
    /* hover */
    &:hover {
    box-shadow: 1rem 1rem 1rem var(--bg01);
    /* 背景画像 > 拡大 */
    &::before {
        background-size: 110%;
    }
    /* 枠線 */
    &::after{
        border-color: var(--main);
    }
    }
}

/* ---------------------------
#cycle 循環図
------------------------------ */
#cycle {
    margin: 7rem auto 10rem;
    position: relative;
    text-align: center;
    & ul {
        display: flex;
        flex-wrap: wrap;
        position: absolute;
        margin: 0 3rem;
        inset: 0;
        gap: 6rem 0;
    }
}

#cycle ul li {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 50%;
    z-index: 0;
    /* 循環図 > h3 */
    & h3 {
        font-size: var(--fz12);
        line-height: 1.5rem;
        width: 167px;
        & span {
            color: var(--main);
            /* 循環図 > h3 頭文字 黄色 */
            &::first-letter {
                color: var(--accent);
            }
        }
    }
    /* 循環図 > h3 文字の順番変更 */
    &:nth-child(3) {
        order: 4;
        /* ※注釈※ */
        & h3::after { 
        content: "※ポリエステル繊維対象";
        font-size: 10px;
        display: block;
        line-height: .5rem;
        }
    }
    /* 循環図 > ピクトグラム 共通 */
    &:before {
        content: "";
        display: block;
        width: 110px;
        height: 200px;
        position: absolute;
        z-index: -1;
    }
    /* 循環図 > ピクトグラム URL */
    &:nth-child(1)::before { background: url(../img/about/circle01.svg) no-repeat top / cover; left:  -4rem; }
    &:nth-child(2)::before { background: url(../img/about/circle02.svg) no-repeat top / cover; right: -5rem; }
    &:nth-child(3)::before { background: url(../img/about/circle03.svg) no-repeat top / cover; right: -5rem; top: 4rem; }
    &:nth-child(4)::before { background: url(../img/about/circle04.svg) no-repeat top / cover; left:  -4rem; top: 6rem; }
}


/* 循環図 > svg 輪 */
.circle {
    max-width: 340px;
    width: 100%;
    background: url(../common/img/BRING_UNIFORM.svg) no-repeat center / 50%;
    /* 循環図 > svg 矢印 */
    & #arrow {
        fill: none;
        stroke: var(--main);
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 5px;
        stroke-dasharray: 400px;
    }
}

/* 循環図 > svg アニメーション ※外部サイトを利用 */
/***************************************************
 * Generated by SVG Artista on 9/24/2024, 10:39:52 AM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/
svg .svg-elem-1 {
stroke-dashoffset: 289.77532958984375px;
stroke-dasharray: 289.77532958984375px;
-webkit-transition: stroke-dashoffset 0.7s ease-out 0s,
                    fill 0.7s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.8s;
transition: stroke-dashoffset 0.7s ease-out 0s,
                    fill 0.7s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.8s;
}

svg.active .svg-elem-1 { stroke-dashoffset: 579.5506591796875px; }

svg .svg-elem-2 {
stroke-dashoffset: 99.5598373413086px;
stroke-dasharray: 99.5598373413086px;
fill: transparent;
-webkit-transition: stroke-dashoffset 0.7s ease-out 0.12s,
                    fill 0.7s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.9s;
transition: stroke-dashoffset 0.7s ease-out 0.12s,
            fill 0.7s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.9s;
}

svg.active .svg-elem-2 { stroke-dashoffset: 199.1196746826172px; fill: var(--main); }

svg .svg-elem-3 {
stroke-dashoffset: 289.7752990722656px;
stroke-dasharray: 289.7752990722656px;
-webkit-transition: stroke-dashoffset 0.7s ease-out 0.24s,
                    fill 0.7s cubic-bezier(0.785, 0.135, 0.15, 0.86) 1s;
transition: stroke-dashoffset 0.7s ease-out 0.24s,
            fill 0.7s cubic-bezier(0.785, 0.135, 0.15, 0.86) 1s;
}

svg.active .svg-elem-3 { stroke-dashoffset: 579.5505981445312px; }

svg .svg-elem-4 {
stroke-dashoffset: 99.57701110839844px;
stroke-dasharray: 99.57701110839844px;
fill: transparent;
-webkit-transition: stroke-dashoffset 0.7s ease-out 0.36s,
                    fill 0.7s cubic-bezier(0.785, 0.135, 0.15, 0.86) 1.1s;
transition: stroke-dashoffset 0.7s ease-out 0.36s,
            fill 0.7s cubic-bezier(0.785, 0.135, 0.15, 0.86) 1.1s;
}

svg.active .svg-elem-4 { stroke-dashoffset: 199.15402221679688px; fill: var(--main); }

svg .svg-elem-5 {
stroke-dashoffset: 289.77532958984375px;
stroke-dasharray: 289.77532958984375px;

-webkit-transition: stroke-dashoffset 0.7s ease-out 0.72s,
                    fill 0.7s cubic-bezier(0.785, 0.135, 0.15, 0.86) 1.4000000000000001s;
transition: stroke-dashoffset 0.7s ease-out 0.72s,
            fill 0.7s cubic-bezier(0.785, 0.135, 0.15, 0.86) 1.4000000000000001s;
}

svg.active .svg-elem-5 { stroke-dashoffset: 579.5506591796875px; }

svg .svg-elem-6 {
stroke-dashoffset: 99.57704162597656px;
stroke-dasharray: 99.57704162597656px;
fill: transparent;
-webkit-transition: stroke-dashoffset 0.7s ease-out 0.84s,
                        fill 0.7s cubic-bezier(0.785, 0.135, 0.15, 0.86) 1.5s;
        transition: stroke-dashoffset 0.7s ease-out 0.84s,
                fill 0.7s cubic-bezier(0.785, 0.135, 0.15, 0.86) 1.5s;
}

svg.active .svg-elem-6 { stroke-dashoffset: 199.15408325195312px; fill: var(--main); }

svg .svg-elem-7 {
stroke-dashoffset: 289.77532958984375px;
stroke-dasharray: 289.77532958984375px;
-webkit-transition: stroke-dashoffset 0.7s ease-out 0.48s,
                    fill 0.7s cubic-bezier(0.785, 0.135, 0.15, 0.86) 1.2000000000000002s;
transition: stroke-dashoffset 0.7s ease-out 0.48s,
            fill 0.7s cubic-bezier(0.785, 0.135, 0.15, 0.86) 1.2000000000000002s;
}

svg.active .svg-elem-7 { stroke-dashoffset: 579.5506591796875px; }

svg .svg-elem-8 {
stroke-dashoffset: 99.55986022949219px;
stroke-dasharray: 99.55986022949219px;
fill: transparent;
-webkit-transition: stroke-dashoffset 0.7s ease-out 0.6s,
                    fill 0.7s cubic-bezier(0.785, 0.135, 0.15, 0.86) 1.3s;
transition: stroke-dashoffset 0.7s ease-out 0.6s,
            fill 0.7s cubic-bezier(0.785, 0.135, 0.15, 0.86) 1.3s;
}

svg.active .svg-elem-8 { stroke-dashoffset: 199.11972045898438px; fill: var(--main); }


/* ==================================================
mobile（スマホ）
===================================================== */
@media screen and (max-width: 750px){
    /* --------------------------------
    #read リード文 画像
    ----------------------------------- */
    #read {
        .read01,.read02 {
        text-align: center;
        & img {
            height: auto;
            width: 100%;
            }
        }
    }
    /* ---------------------------
    #website 外部サイト
    ------------------------------ */
    #website {
        border-radius: 2rem 0 0 2rem;
        margin: 5rem -1.62rem 5rem 0;
        /* 背景画像 */
        &::before{    
            border-radius: 2rem 0 0 2rem;
            max-width: calc(750px - 1.5rem);
            }
        /* 枠線 */
        &::after{
            border-radius: 2rem 0 0 2rem;
            }
    }

    /* ---------------------------
    #cycle 循環図
    ------------------------------ */
    #cycle {
        margin: 13rem auto 15rem;
        max-width: 450px;
        padding: 0 .5rem;
        & ul {
            margin: 0 -1.5rem;
        }
    }

    /* 循環図 > ピクトグラム */
    #cycle ul li {
        /* URL */
        &:nth-child(1)::before { left:  0;    bottom: 2rem;}
        &:nth-child(2)::before { right: 1rem; bottom: 2rem;}
        &:nth-child(3)::before { right: 1rem; top: 6.5rem;}
        &:nth-child(4)::before { left:  0;    top: 9rem;}
    }
}

/* ==================================================
mobile（スマホ）
===================================================== */
@media screen and (max-width: 500px){
    /* ---------------------------
        #website > 外部サイト
    ------------------------------ */
    #website {
        /* リンクを全体に */
        & a {
            flex-wrap: wrap;
            gap: 1rem;
        }
        /* 右 > テキスト */
        & br {
            display: block;
        }
    }
    /* ---------------------------
    #cycle 循環図
    ------------------------------ */
    /* 循環図 > ピクトグラム */
    #cycle ul li {
        /* URL */
        &:nth-child(1)::before { background-size: 85%; }
        &:nth-child(2)::before { background-size: 85%; }
        &:nth-child(3)::before { background-size: 85%; }
        &:nth-child(4)::before { background-size: 85%; top: 8.5rem; }
    }
}