﻿.friends_text1, .friends_text3, .friends_text4, .friends_text5, .friends_text6, .friends_text7, .k_text1, .k_text2, .k_text3 {
    animation-duration: 6s;
    animation-iteration-count: infinite
}

.HomeSection > div.main1 {
    width: 100%;
    display: block;
    table-layout: fixed;
    position: relative;
    overflow-x: hidden;
}

.HomeSection > div.main2 {
    display: block;
    margin-bottom: 2em
}

    .HomeSection > div.main2 > ul {
        width: 90%;
        display: inline-block;
        margin-left: 5%;
        margin-right: 5%
    }

        .HomeSection > div.main2 > ul > li {
            width: 100%;
            float: left;
            text-align: center
        }

            .HomeSection > div.main2 > ul > li > a > h2 {
                text-align: left;
                width: 100%;
                display: block;
                margin: 2em auto 1em;
                font-size: 35px
            }

            .HomeSection > div.main2 > ul > li > a > div.img {
                width: 100%;
                height: 200px;
                display: block;
                background-repeat: no-repeat;
                background-position: center center;
                background-size: cover;
                margin: 1em auto auto
            }

            .HomeSection > div.main2 > ul > li > a > div.text {
                width: 100%;
                display: block;
                margin: auto
            }

                .HomeSection > div.main2 > ul > li > a > div.text > h3, .HomeSection > div.main2 > ul > li > a > div.text > p {
                    text-align: left;
                    line-height: 1.6;
                    margin: .5em 0;
                    font-size: 16px
                }

            .HomeSection > div.main2 > ul > li:hover > a > div.text > h3 {
                text-decoration: underline
            }

            .HomeSection > div.main2 > ul > li > a > div.text > p {
                color: #666
            }

.swiper-slide img {
    max-width: 100%
}

#homelogosvg {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -232.5px;
    margin-top: -50px;
    transform: scale(1.8);
    border-radius: 1em;
    background-color: transparent
}

    #homelogosvg .k_text path {
        fill: transparent;
        stroke: #ffd30d;
        stroke-width: 1;
        stroke-miterlimit: 10
    }

    #homelogosvg .friends_text path {
        fill: transparent;
        stroke: #fff;
        stroke-width: 1;
        stroke-miterlimit: 10
    }

.k_text1 {
    stroke-dasharray: 163.881,163.881;
    animation-name: k_text1_ani
}

.k_text2 {
    stroke-dasharray: 32.9525,32.9525;
    animation-name: k_text2_ani
}

.k_text3 {
    stroke-dasharray: 87.7582,87.7582;
    animation-name: k_text3_ani
}

.friends_text1 {
    stroke-dasharray: 229.556,229.556;
    animation-name: friends_text1_ani
}

.friends_text2 {
    stroke-dasharray: 300.821,300.821;
    animation-name: friends_text2_ani;
    animation-duration: 6s;
    animation-iteration-count: infinite
}

.friends_text3 {
    stroke-dasharray: 126.016,126.016;
    animation-name: friends_text3_ani
}

.friends_text4 {
    stroke-dasharray: 287.128,287.128;
    animation-name: friends_text4_ani
}

.friends_text5 {
    stroke-dasharray: 305.15,305.15;
    animation-name: friends_text5_ani
}

.friends_text6 {
    stroke-dasharray: 307.725,307.725;
    animation-name: friends_text6_ani
}

.friends_text7 {
    stroke-dasharray: 278.365,278.365;
    animation-name: friends_text7_ani
}

@keyframes k_text1_ani {
    0%,100%,90% {
        stroke-dashoffset: 163.881;
        fill: transparent
    }

    20%,70% {
        stroke-dashoffset: 0;
        fill: transparent
    }

    45% {
        stroke-dashoffset: 0;
        fill: #ffd30d
    }
}

@keyframes k_text2_ani {
    0%,100%,90% {
        stroke-dashoffset: 32.9525;
        fill: transparent
    }

    20%,70% {
        stroke-dashoffset: 0;
        fill: transparent
    }

    45% {
        stroke-dashoffset: 0;
        fill: #ffd30d
    }
}

@keyframes k_text3_ani {
    0%,100%,90% {
        stroke-dashoffset: 87.7582;
        fill: transparent
    }

    20%,70% {
        stroke-dashoffset: 0;
        fill: transparent
    }

    45% {
        stroke-dashoffset: 0;
        fill: #ffd30d
    }
}

@keyframes friends_text1_ani {
    0%,100%,90% {
        stroke-dashoffset: 229.556;
        fill: transparent
    }

    20%,70% {
        stroke-dashoffset: 0;
        fill: transparent
    }

    45% {
        stroke-dashoffset: 0;
        fill: #fff
    }
}

@keyframes friends_text2_ani {
    0%,100%,90% {
        stroke-dashoffset: 300.821;
        fill: transparent
    }

    20%,70% {
        stroke-dashoffset: 0;
        fill: transparent
    }

    45% {
        stroke-dashoffset: 0;
        fill: #fff
    }
}

@keyframes friends_text3_ani {
    0%,100%,90% {
        stroke-dashoffset: 126.016;
        fill: transparent
    }

    20%,70% {
        stroke-dashoffset: 0;
        fill: transparent
    }

    45% {
        stroke-dashoffset: 0;
        fill: #fff
    }
}

@keyframes friends_text4_ani {
    0%,100%,90% {
        stroke-dashoffset: 287.128;
        fill: transparent
    }

    20%,70% {
        stroke-dashoffset: 0;
        fill: transparent
    }

    45% {
        stroke-dashoffset: 0;
        fill: #fff
    }
}

@keyframes friends_text5_ani {
    0%,100%,90% {
        stroke-dashoffset: 305.15;
        fill: transparent
    }

    20%,70% {
        stroke-dashoffset: 0;
        fill: transparent
    }

    45% {
        stroke-dashoffset: 0;
        fill: #fff
    }
}

@keyframes friends_text6_ani {
    0%,100%,90% {
        stroke-dashoffset: 307.725;
        fill: transparent
    }

    20%,70% {
        stroke-dashoffset: 0;
        fill: transparent
    }

    45% {
        stroke-dashoffset: 0;
        fill: #fff
    }
}

@keyframes friends_text7_ani {
    0%,100%,90% {
        stroke-dashoffset: 278.365;
        fill: transparent
    }

    20%,70% {
        stroke-dashoffset: 0;
        fill: transparent
    }

    45% {
        stroke-dashoffset: 0;
        fill: #fff
    }
}

.text_box > dl > dt > span{ color:#fff;}
.text_box > dl > dd > p > span{ color:#fff;}
#visual .text_box01{ padding:50px; width:calc(100% - 100px);}
#idx_wrap section article{ gap:30px;}
#idx_wrap section.mb03 article{ gap:16px;}

  .ma_play ul li img{ height:180px; object-fit:cover;}
  .ma_play ul li p{
	  line-height:1.6;
}
.mb02 dt{ display:flex; flex-direction: column; }
.mb02 dd > p{ display:flex; flex-direction: column; }
.mb02 dd > p > span{ color:#fff; line-height:1.4;}