@charset "UTF-8";
/***共通設定***/

html {
    font-size: 100%;
}

body {
    font-family: "Zen Maru Gothic", sans-serif;
    background-color: var(--back);
    color: var(--font);
    max-width: 100%;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    vertical-align: bottom;
}

ul {
    list-style: none;
}

ol{
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit
}

p{
    line-height:1.6;
}

:root {
    --back: #F9F5EB;
    --white: #FFF;
    --black:#000;
    --font: #754C2A;
    --participate: #C97A30;
    --organize: #53846A;
    --accent:#D78484;
    --accent2:#F6D965;
    --margin-bottom:120px;
    --header-height:120px; /*+20px*/
    --dash-border:2px dashed var(--white);
}

.container{
    padding:0 16px;
    margin:0 auto;
}

.hz-content,.purpose-text{/*マス目背景*/
    /*background*/
    /*カスタムプロパティ*/
    --masu-size:5vw;
    --masu-color:#EFF4F4;
    --masu-weight:3px;

    background-image: linear-gradient(to right, var(--masu-color) var(--masu-weight), transparent var(--masu-weight)),
    linear-gradient(to bottom, var(--masu-color) var(--masu-weight), var(--white) var(--masu-weight));
    background-size: var(--masu-size) var(--masu-size);
    background-repeat: repeat;
    background-position: calc(var(--masu-weight) / 2) 0;
}
/*PC/SP画像切り替え*/
.pc-img{
}
.sp-img{
    display: none;
}
/*文字強調*/
.big{
    font-size:1.125em;
}
.bg-noise{
    position: fixed;
    z-index: -100;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    background-image: url(../img/bg-noise.webp);
    background-repeat: repeat;
}

/***loading***/
.loading{
    background-color: var(--accent2);
    z-index: 900;
    width: 100%;
    height:100vh;
    top:0;
    left:0;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap:20px;
}
.loading p{
    font-size: 2.5rem;
    font-weight: 700;
}
.loading-box{
    max-width:220px;
    width:40%;
    overflow-y: hidden;
    animation: huwahuwa 1s ease-in-out infinite alternate ;
    height:0;
    opacity: 0;
}
@keyframes huwahuwa{
    from{
        transform: translateY(0px);
    }
    to{
        transform: translateY(15px);
    }
}
.loading-click{
    max-width:220px;
    width:40%;
    cursor: pointer;
    height:0%;
    overflow: hidden;
    animation: none 1s ease-in-out infinite alternate ;
}
.loading-box img,.loading-click img,.loading-box-fill{
    width:100%;
}
.loading-box-fill{
    max-width:220px;
    width:40%;
    overflow-y: hidden;
    height:0;
    opacity: 0;
    animation: none 1s ease-in-out infinite alternate ;
}
.loading.loaded{
    visibility: hidden;
}


/***header***/
#header {
    /* カスタムプロパティ */
    --header-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.25);

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}

.header-content {
    width: 90%;
    margin: 15px auto 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo{
    line-height: 1px;
}

.logo a {
    display: inline-block;
    width:210px;
}

.logo img {
    width: 100%;
}

.header-site-title {
    font-size: 1rem;
}

.header-nav {
    background-color: var(--white);
    border-radius: 30px;
    padding: 16px 40px;
    font-weight: 500;
    box-shadow: var(--header-shadow);
    outline: 2px dashed #ddc8b2;
    outline-offset: -8px;
}

.header-nav nav ul {
    display: flex;
    align-items: center;
    gap: 3vw;
}

.participate-color {
    color: var(--participate);
}

.organize-color {
    color: var(--organize);
}

.header-nav a {
    display: block;
    text-align: center;
    transition: all 0.3s;
}
.header-nav a:hover{
    transform: scale(107%);
}

.nav-link-title {
    font-size: 1rem;
    padding-bottom: 3px;
    font-weight: 500;
}
.header-nav .nav-link-sub{
    border-top: 1px solid #A89696;
}
.nav-link-sub {
    padding-top:3px;
    display: block;
    font-size: 0.875rem;
}

/**ハンバーガーメニュー**/
.header-sp{
    display: none;
}
.drawer{
    display: none;
}


/***index.html main***/
/*hero*/
.hero{
        /*background*/
    /*カスタムプロパティ*/
    --masu-size:130px;
    --masu-color:#ECEFEA;
    --masu-weight:3px;

    background-image: linear-gradient(to right, var(--masu-color) var(--masu-weight), transparent var(--masu-weight)),
    linear-gradient(to bottom, var(--masu-color) var(--masu-weight), var(--back) var(--masu-weight));
    background-size: var(--masu-size) var(--masu-size);
    background-repeat: repeat;
    background-position: calc(var(--masu-weight) / 2) 0;

    width:100%;
    height:100vh;
    position: relative;
    overflow: hidden;
}
.box-inside{
    /*カスタムプロパティ*/
    --box-we:5%;

    display: flex;
    justify-content: center;
    align-items: center;
    height:100vh;
    /* background-color: var(--back); */
    padding:var(--box-we);
    /* background-color: #A48466; */
    position: relative;
}
.hero-logo{
    width:60%;
    max-width:550px;
    position: relative;
    z-index: 20;
    margin-bottom: 10%;
}
.hero-logo img{
    width: 100%;
}
.top-wave1{
    position: absolute;
    bottom:0;
    left:0;
    bottom: -3px;
    width:100%;
    z-index:30;
    display: none;
}
/*トップ装飾追加*/
.box-inside-left,.box-inside-top,.box-inside-right,.box-inside-bottom{
    position: absolute;
    background: #A48466;
    z-index:5;
}
.box-inside-top,.box-inside-bottom{
    height:var(--box-we);
    width: 100%;
    left:0;
}
.box-inside-top{
    top:0;
}
.box-inside-bottom{
    bottom:0;
}
.box-inside-left,.box-inside-right{
    height:100%;
    width: var(--box-we);
    top:0;
}
.box-inside-left{
    left:0;
}
.box-inside-right{
    right:0;
}
/**/
.box-inside-left::before,
.box-inside-right::before,
.box-inside-top::before,
.box-inside-bottom::before{
    position: absolute;
    content:"";
    background-color:#B89779;
    z-index: 10;
}
.box-inside-top::before,
.box-inside-bottom::before{
    height:100%;
    width: calc(100% - var(--box-we)*2);
    left:var(--box-we);
    clip-path: polygon(0% 0%,100% 0%,calc(100% - var(--box-we)*2) 100%, calc(var(--box-we)*2) 100%);
}
.box-inside-top::before{
    bottom:calc(-100% + 1px);
}
.box-inside-bottom::before{
    top:calc(-100% + 1px);
    scale: 1 -1;
}
.box-inside-left::before,
.box-inside-right::before{
    width:100%;
    height:calc(100% - var(--box-we)*2);
    top:var(--box-we);
    clip-path: polygon(0% 0%,100% calc(var(--box-we)*2),100% calc(100% - var(--box-we)*2),0% 100%);
}
.box-inside-left::before{
    right:calc(-100% + 1px);
}
.box-inside-right::before{
    left:calc(-100% + 1px);
    scale: -1 1;
}
.box-line{
    position: absolute;
    z-index: 20;
    width:var(--box-we);
    height:var(--box-we);
    background-image: url(../img/box-line.webp);
    background-size: 100% 100%;
}
.box-line.tl{
    top:0;
    left:0;
}
.box-line.tr{
    top:0;
    right:0;
    scale: 1 -1;
}
.box-line.bl{
    left:0;
    bottom:0;
    scale: 1 -1;
}
.box-line.br{
    right:0;
    bottom: 0;
}


.inside-box-girl{
    position: absolute;
    width:50%;
    max-width: 500px;
    height: 100%;
    rotate: 15deg;
    bottom:0;
    left:50%;
    transform: translateX(-50%);
    transform-origin: bottom left;
    z-index:3;
}
.inside-box-girl img{
    width:100%;
    height:100%;
    object-fit: contain;
    object-position: bottom center;
}

.hero-huki1{
    position: absolute;
    width: 30%;
    left:5%;
    top:0%;
    height:100%;
    animation: huwahuwa-bottom 1s ease-in-out infinite alternate;
}
.hero-huki1 img,.hero-huki2 img{
    width:100%;
    height: 100%;
    object-fit: contain;
}
.hero-huki2{
    position: absolute;
    width:20%;
    right: 5%;
    top:0%;
    height:100%;
    animation: huwahuwa-bottom 1s ease-in-out infinite alternate;
}




/*catch*/
.mowamowa{
    position: relative;
}
.mowa-left,.mowa-right{
    position: absolute;
    height:100%;
    width:10%;
    top:0;
}
.mowa-left{
    left:0;
}
.mowa-right{
    transform: scale(-1, 1);
    right:0;
}

#catch{
    padding-top:130px;
    background-color: var(--white);
}
#catch .container{
    z-index: 10;
}

#catch .container,#about-fd .container{
    max-width: 900px;
}
.sect-title-group{
    text-align: center;
    margin-bottom: 20px;
}
.sect-title{
    font-size: 2.5rem;
    text-align: center;
    position: relative;
    padding-bottom: 5px;
    width:fit-content;
    margin: 0 auto;
}
.sect-title::before{
    position: absolute;
    content:"";
    height: 1px;
    width:100%;
    max-width:480px;
    bottom:0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--font);
}
.sect-subtitle{
    display: inline-block;
    margin-top: 5px;
    font-size: 1.5rem;
    font-weight: 500;
}
.sect-subtitle-top{
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1;
}
.main-catch{
    text-wrap: balance;
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 30px;
    text-align: center;
    font-weight: 900;
}
.subcatch{
    text-wrap: balance;
    text-align: center;
    font-size:1.25rem;
    line-height:1.8;
}
.subcatch .big{
    font-size:1.3em;
    font-weight: 700;
}
.spbr{
    display: none;
}


/*about-fd*/
#about-fd{
    background-color: var(--white);
    padding-bottom: var(--margin-bottom);
    padding-top: var(--header-height);
}
#about-fd p{
    text-wrap: balance;
    text-align: center;
    font-size:1.125rem;
    margin-bottom: 1em;
}
#about-fd p:last-child{
    margin-bottom: 0;
}

/*purpose*/
#purpose{
    margin-bottom: calc(var(--margin-bottom)*0.4); /*purpose-textのtransform分も入るので*/
    position: relative;
}
.top-wave2{
    position: absolute;
    left:0;
    top:-3px;
    width: 100%;
    z-index:-10
}
#purpose .container{
    max-width:1000px;
}
.purpose-wrapper{
    margin:0 auto;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap:6%;
}

.purpose-img{
    padding:5%;
    width:60%;
    max-width: 250px;
    aspect-ratio: 1/1;
    background-color: #C6D4B1;
    border-radius: 350px;
    margin:0 auto;
    border:10px solid var(--back);
    position: relative;
    z-index:2;

}

.purpose-img img{
    aspect-ratio: inherit;
    width:100%;
    height:100%;
    object-fit: contain;
}

.purpose-img h3{
    position: absolute;
    bottom:-10px;
    left: 50%;
    transform: translateX(-50%);
    font-size:3.5rem;
    line-height: 1;
}

.purpose-text{
    background-color: var(--white);
    border-radius: 70px;
    padding:70px 40px 40px;
    transform: translateY(-70px);
    flex-grow: 1; /*高さ揃え*/
}

.purpose-block{
    display: flex; /*高さ揃え*/
    flex-direction: column; /*高さ揃え*/
}

.purpose-title{
    font-size: 2rem;
    margin-bottom:20px;
    text-align: center;
    
}
.purpose-text p{
    font-weight: 500;
    font-size:1.125rem;
}


/*difference*/
.bg-cityroop{
    /*カスタムプロパティ*/
    --cityroop-height:805px;
    height:200px;
    background-image: url(../img/bg-cityroop.webp);
    background-size: auto 200px;
    background-repeat: repeat-x;
    animation: bg-roop 14s linear infinite;
}
@keyframes bg-roop{
    0%{
        background-position: 0 bottom;
    }
    100%{
        background-position: var(--cityroop-height) bottom;
    }
}
.cityroop2{
    --cityroop-height:849px;
    background-image: url(../img/bg-cityroop2.webp);
}
.cityroop-zimen{
    height:30px;
    width:100%;
    background-image: url(../img/city-roop-zimen.webp);
    background-repeat: repeat;
    background-size: 100% 100%;
}

#difference{

}
#difference .container{
    max-width:1500px;
    overflow-x: hidden;
}
.difference-main{
    padding-bottom:40px;
    margin-bottom:40px;
    background-color: var(--white);
    padding-top:100px;
}
.accent-color{
    color:var(--accent);
}
.difference-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    gap:25px;
    margin-bottom: 40px;
}
.difference-head{
    padding:0 0 20px;
    position: relative;
    z-index:2;
}
.difference-head-img{
    width: 60%;
    margin: 0 auto;
}
.difference-head-img img{
    width:100%;
    height:100%;
    object-fit: contain;
}
.difference-block{
    width:100%;
    max-width: 400px;
    text-align: center;
    flex-shrink: 1;
    position: relative;
}
.difference-head::before{
    position: absolute;
    content: "";
    width:100%;
    height:45%;
    left:0;
    bottom:0;
    background-color: var(--organize);
    z-index:-1;
    border-radius: 5px 5px 0px 0px;
    
}
.difference-text{
    background-color: var(--back);
    border-radius: 0px 0px 5px 5px;
    padding:20px 20px 30px;
}
.difference-text h3{
    font-size:1.5rem;
    margin-bottom:5px;
}
.difference-text p{
    font-weight: 500;
    font-size:1.125rem;
}
.difference-arrow{
    transform: translateY(40px);
    position: relative;
    width:fit-content;
    z-index: 2;
}
.difference-arrow img{
    position: absolute;
    right:0;
    width:50%;
    top:50%;
    transform: translateY(-50%);
    z-index: -1;
}
.difference-arrow p{
    text-wrap: nowrap;
    font-weight: 700;
    font-size:1.125rem;
    color: var(--back);
    padding:10px 15px;
    clip-path: polygon(70% 0, 100% 50%, 70% 100%, 0 100%, 0 0);
    background-color: var(--accent);
    border-radius: 5px;
}
.difference-block-charm{
    position: absolute;
    bottom:-10px;
}
.difference-block:nth-child(1) .difference-block-charm{
    left:-17px;
}
.difference-block:nth-child(3) .difference-block-charm{ /*arrowが挟まってるので3*/
    right:-19px;
}
.difference-summary{
    text-align: center;
    font-weight: 700;
    font-size:1.25rem;
    margin-bottom: 40px;
}
.difference-notes{
    font-size:1rem;
    font-weight: 500;
    text-align: right;
    margin-bottom:15px;
}
#difference .accent-color{
    font-size: 1.25em;
}
.difference-rect1{
    margin:0 auto 40px;
    width:45%;
    aspect-ratio: 5/1;
    background-color: var(--white);
    border-radius: 40px;
}
.difference-rect2{
    margin:0 auto 40px;
    width:30%;
    aspect-ratio: 6/1;
    background-color: var(--white);
    border-radius: 20px;
    
}
.ani-katakata{
    animation:katakata 1.5s steps(1,start) infinite;
}
.difference-block-charm{
    animation-delay: 0.5s;
}
@keyframes katakata{
    0%{
        rotate: 5deg;
    }
    50%{
        rotate:-5deg;
    }
    100%{
        rotate:5deg;
    }
}


/*detail*/
.nyoki{
    margin-left: 10%;
    position: relative;
    z-index: -100;
}
.nyoki img{
    width:60px;
}
#detail{
    /* margin-bottom: var(--margin-bottom); */
    margin-bottom: 30px;
    background-color: var(--white);
    border-radius: 40px 40px 0 0;
}
.detail-top{
    border-radius: 50px;
    padding-top:50px;
}
.sect-explain{
    text-align: center;
    font-size:1rem;
    margin-bottom: 40px;
}
.detail-wrapper{
    display: grid;
    grid-template-columns: repeat(2,1fr);
}
.detail-block{
    text-align: center;
}
.detail-head{
    color:var(--back);
    padding:30px;
    outline:var(--dash-border);
    outline-offset: -10px;
}
.detail-participate .detail-head{
    background-color: var(--participate);
}
.detail-organize .detail-head{
    background-color: var(--organize);
}
.detail-head h3{
    font-size:1.5rem;
    padding-bottom:10px;
    margin:0 auto 10px;
    position: relative;
    width:fit-content;
    transition: all 0.3s ease;
}
.detail-head h3::before{
    position: absolute;
    content: "";
    height: 1px;
    width:100%;
    left:0;
    bottom:0;
    background-color: var(--back);
}
.detail-head p{
    font-size:1.125rem;
    font-weight: 500;
    transition: all 0.3s ease;
}
.detail-body{
    position: relative;
    padding:250px 0 80px;
    overflow: hidden;
}
.detail-body-back{
    position: absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    object-fit: cover;
    transition: all 0.3s ease;
}
.detail-link:hover .detail-body-back{
    transform: scale(107%);
}
.detail-link:hover .radius-button img{
    transform: translateX(7px);
}
.detail-link:hover .detail-head h3{
    transform:scale(108%);
}
.detail-link:hover .detail-head p{
    transform:scale(108%);
}
.radius-button{
    padding:22px 34px;
    display: flex;
    align-items: center;
    width: fit-content;
    margin:0 auto 0;
    border-radius: 30px;
    position: relative;
    z-index:5;
    outline:var(--dash-border);
    outline-offset: -5px;
}
.detail-participate .radius-button{
    background-color: var(--participate);
}
.detail-organize .radius-button{
    background-color: var(--organize);

}
.radius-button p{
    font-size:1.125rem;
    font-weight: 700;
    color:var(--white);
    line-height: 1;
}
.radius-button img{
    margin-left:40px;
    height:1rem;
    transition:all 0.3s ease;
}


/*run-truck-area*/
.run-truck-area{
    height:130px;
    display: flex;
    gap:40%;
    justify-content: center;
    align-items: flex-end;
}
.run-truck{
    height:100%;
    width:10%;
    position: relative;
    z-index:3;
}
.run-truck-goal{
    height:80%;
    width:10%;
    position: relative;
}
.run-truck img,.run-truck-goal img{
    height:100%;
    width:100%;
    object-fit: contain;
    object-position: bottom center;
}



/*introduce*/
#introduce{
    margin-bottom:calc(var(--margin-bottom)*2);
    color:var(--white);
    border-radius: 30px;
    overflow: hidden;
}
.introduce-link{
    display: block;
    position: relative;
    padding:100px 0 70px;
}
.introduce-link:hover .introduce-back{
    scale:107%;
}
.introduce-link:hover .radius-button img{
    transform: translateX(7px);
}
.introduce-link::before{
    position: absolute;
    content:"";
    width:100%;
    height: 100%;
    background-color: rgba(96, 96, 96, 0.40);
    top:0;
    left:0;
}
#introduce .sect-explain{
    font-weight: 700;
}
.introduce-back{
    position: absolute;
    top:0;
    left:0;
    z-index:-1;
    width:100%;
    height:100%;
    object-fit: cover;
    transition:all 0.3s ease;
}
#introduce .sect-title::before{
    background-color: var(--white);
}
#introduce .container{
    max-width:1300px;
    position: relative;
    z-index:5;
}
#introduce .radius-button{
    background-color: var(--accent);
}




/***footer***/
#footer{
    background-color: var(--organize);
    text-align: center;
    padding-bottom:15px;
    position: relative;
}
.footer-content{
    padding:60px 0 20px;
}
.footer-content .logo{
    width: fit-content;
    margin:0 auto;
}
.copy{
    font-size:0.75rem;
    font-weight: 500;
    color:var(--white);
}
.totop{
    width:90px;
    position: absolute;
    top:-80px;
    right:30px;
    cursor: pointer;
    transition:top 0.2s,bottom 0.2s;
    z-index: 5;
}
.totop:hover{
    top:-85px;/*gsapの影響でtransform動かせない*/
}
.totop img{
    width:100%;
}
/*横スクないときは右下固定*/
.totop-change-posi{
    position:fixed;
    bottom:10px;
    right:5px;
    top:auto;/*初期値に変更*/
}
.totop-change-posi:hover{
    top:auto;
    bottom:15px;
}
.footer-wave{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    transform: translateY(calc(-100% + 1px));
}
.mini-deco{
    --mini-deco-height:var(--margin-bottom);

    position: absolute;
    top:calc(var(--mini-deco-height)*-1);
    left:0;
    height:var(--mini-deco-height);
}
.mini-deco>img{
    /*カスタムプロパティ*/

    width:100%;
    height:100%;
    object-fit: contain;
    object-position: bottom left;
}
.mini-deco .sub-img{
    position: absolute;
    left:0;
    top:calc(-1*var(--mini-deco-height)/2/2);
    height:calc(var(--mini-deco-height)/2);
    width:100%;
    animation: huwahuwa-bottom 1s ease-in-out infinite alternate;
}

@keyframes huwahuwa-bottom{
    from{
        transform: none;
    }
    to{
        transform: translateY(10px);
    }
}
.mini-deco .sub-img>img{
    width:100%;
    height:100%;
    object-fit: contain;
    object-position: bottom left;
}


/***introduce.html***/
#introduce-page{
    margin-top: calc(var(--margin-bottom)/2);
    margin-bottom: calc(var(--margin-bottom)*2);
}
#introduce-page .container{
    max-width: 1200px;
}
#introduce-page .sect-explain{
    margin-bottom:40px;
}
.org-list article{
    /* カスタムプロパティ */
    --article-gap:10px;

    display: flex;
    justify-content: space-between;
    align-items: start;
    padding:50px;
    background-color: var(--white);
    margin-bottom: 30px;
    border-radius: 30px;
    position: sticky;
    border: 2px solid var(--font);
}
.filing{
    width:100%;
    height:75vh;
    background-color:var(--accent2);
    position: sticky;
    border: 2px solid var(--font);
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.filing img{
    width:25%;
    height:25%;
    object-fit: contain;
}
.filing::before,.filing::after{
    /*カスタムプロパティ*/
    --tab-height:40px;
    --tab-width:20%;
    position: absolute;
    content:"";
    width:var(--tab-width);
    height:var(--tab-height);
}
.filing::before{
    top:calc(-1 * var(--tab-height) + 2px);
    left:calc(10% + 2px);
    background-color: var(--accent2);
    z-index:3;
    clip-path: polygon(0% 100%,0% 0%,calc(80% - 4px) 0%,calc(100% - 4px) 100% );
    border-radius:5px 0 0 0 ;
}
.filing::after{
    top:calc(-1 * var(--tab-height));
    left:10%;
    background-color: var(--font);
    clip-path: polygon(0% 100%,0% 0%,80% 0%,100% 100%);
    border-radius: 7px 0 0 0 ;
}
.org-list article:nth-child(1){
    top:var(--header-height);
}
.org-list article:nth-child(2){
    top:calc(var(--header-height) + var(--article-gap));
}
.filing{
    top:calc(var(--header-height) + var(--article-gap)*2);
}
.org-img{
    width:38%;
    overflow: hidden;
    border-radius: 20px;
}
.org-img img{
    width:100%;
}
.org-text{
    width:55%;
}
.org-name{
    font-size:2.25rem;
    margin-bottom:10px;
}
.org-area{
    background-color: var(--accent);
    color: var(--white);
    font-weight: 500;
    display: inline-block;
    padding:1px 15px 4px;
    border-radius: 8px;
    font-size:1rem;
    margin-bottom:40px;
}
.org-explain{
    font-size:1.125rem;
    font-weight: 700;
    margin-bottom:20px;
}
.org-detail{
    /*border*/
    --border:2px solid var(--font);

    border-spacing: 0;
    border-collapse: separate;
    border-radius: 20px;
    font-size:1rem;
    border:var(--border);
    overflow: hidden;
    font-weight: 700;
}
.org-detail td{
    padding:15px 30px;
}
.org-detail td:first-child{
    background-color: var(--accent2);
    border-right: var(--border);
    white-space: nowrap;
}
.org-detail tr:not(:last-child) td{
    border-bottom: var(--border);
}
.url{
    word-break: break-all;
}



/*****participate.html organize.html*****/
/*===カスタムプロパティ===*/
#participate-flow{
    /*カスタムプロパティ*/
    --numof-hz:4; /*横スクブロックの数*/
    --flow-theme-color:var(--participate);
    --flow-sub-color:#F0D09D;
}
#organize-flow{
    --numof-hz:5;
    --flow-theme-color:var(--organize);
    --flow-sub-color:#9DC9B1;
}
#participate-qanda{
    --qanda-theme-color:var(--participate);
}
#organize-qanda{
    --qanda-theme-color:var(--organize);
}
/***perticiapte.html #participate-flow***/
.bg-hz{
    position: fixed;
    width:100%;
    height:100vh;
    top:0;
    left:0;
    z-index: -100;
}
.bg-hz img{
    width: 100%;
    height:100%;
    object-fit: cover;
}
.flow{
    margin-bottom: var(--margin-bottom);
}
.horizontal-wrapper {
    margin-top: var(--header-height);
    overflow: hidden;
}
.horizontal {
    display: flex;
    width: calc(100% * var(--numof-hz));
    position: relative;
}
.hz{
    width: 100%;
    min-height: calc(100vh - var(--header-height));
    position: relative;
    padding-top:20px;
    padding-bottom: 80px;
    display: grid;
    place-items: center;
}
.hz::before{
    position: absolute;
    content:"";
    top:50%;
    left:0;
    translate:0 -50%;
    height:50px;
    width:100%;
    background-color:var(--flow-sub-color);
}
.hz:nth-last-of-type(1)::before{
    width:50%;
}
.hz-top {
    width: 100%;
    min-height: calc(100vh - var(--header-height));
    position: relative;
    z-index: 10;
    display: grid;
    place-items: center;
}

.hz-top h2 {
    font-size: 5rem;
    text-align: center;
    position: relative;
    font-weight: 900;
    width:100%;
    -webkit-text-stroke: 2px var(--white);
}

.hz-top h2::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    aspect-ratio: 1/1;
    max-width: 50vh;
    width:50%;
    background: var(--white);
    border-radius: 47% 53% 66% 34% / 32% 49% 51% 68%  ;
    animation:liquid 4s linear infinite;
    z-index: -100;
}
@keyframes liquid{
    0% { border-radius: 47% 53% 66% 34% / 32% 49% 51% 68%  ;}
    25% { border-radius: 44% 56% 56% 44% / 43% 38% 62% 57%  ;}
    50% { border-radius: 33% 67% 39% 61% / 52% 30% 70% 48%  ;}
    75% { border-radius: 40% 60% 49% 51% / 41% 44% 56% 59%  ;}
    100% { border-radius: 47% 53% 66% 34% / 32% 49% 51% 68%  ; }
}
.top-arrow{
    position: absolute;
    bottom:0;
    left:50%;
    height:20vh;
    translate:-50% 0;
    z-index:-10;
}

.hz-num{
    display: block;
    width:fit-content;
    transform: translate(max(-5vw,-50%),0);
    font-weight: 700;
    font-size:8rem;
    position: relative;
    z-index:10;
}
.hz-num .mini{
    font-size:0.4em;
}
.hz-frame{
    /*カスタムプロパティ*/
    --top-radius:20px;
    --top-height:30px;

    position: relative;
    margin:0 auto;
    width:72%;
    height:100%;
    max-height:650px;
    background:linear-gradient(to bottom,var(--flow-theme-color) var(--top-height),var(--white) var(--top-height));
    border-radius: var(--top-radius) var(--top-radius) 0 0 ;
}
.hz-content{
    position: absolute;
    bottom:0;
    left:0;
    width: 100%;
    overflow: auto;
    height:calc(100% - 5%);
    padding:30px 50px;
}

.hz-block{
    display: flex;
    justify-content: space-between;
    height:100%;
}
.hz-img{
    width: 43%;
    /* max-width: 300px; */
    max-height:100%;
}
.hz-table{
    /*表の図のところだけwidth変更*/
    width:60%;
    flex-shrink: 0;
}
.hz-img img{
    height:100%;
    width:100%;
    object-fit: contain;
    object-position: top center;
}
.hz-text{
    width:55%;
}
.hz-text h3{
    font-size:2.5rem;
    margin-bottom: 20px;
    border-bottom: 2px dashed var(--font);
}
.hz-text p{
    font-weight: 700;
    font-size: 1.125rem;
}

.toc{
    position: absolute;
    left:0;
    bottom:0;
    /* カスタムプロパティ */
    --mark-size:17px;
    --line-weight:5px;
    width: calc(100% / var(--numof-hz));
    padding:13px 0 14px; /*+*/
}

.toc-inner{
    margin:0 auto;
    width:50%;
    position: relative;
}
.toc-inner::before{
    position: absolute;
    content:"";
    top:calc((var(--mark-size) - var(--line-weight)) / 2);
    left: 0;
    width:100%;
    height:var(--line-weight);
    background-color: var(--font);
}
.toc-inner ol{
    display: flex;
    justify-content: space-between;
}
.toc-marker{
    z-index:10;
    position: absolute;
    content:"";
    width:100px;
    height:100px;
    translate:-50% -50%;
}
.toc-marker img{
    width:100%;
    height:100%;
    object-fit: contain;
}
.toc-inner li{
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 1px;
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
}
.toc-inner li::before{
    display: inline-block;
    content: "";
    width:var(--mark-size);
    height:var(--mark-size);
    background-color: var(--font);
    border-radius: 10px;
}
.scroll-nav{
    position: absolute;
    z-index:-10;
    width: 15%;
    top:0;
    right:5%;
    height:80px;
    animation: huwahuwa-right 1s ease-in-out infinite alternate;
}
@keyframes huwahuwa-right{
    from{
        transform: none;
    }
    to{
        transform: translateX(15px);
    }
}
.scroll-nav img{
    width: 100%;
    height:100%;
    object-fit: contain;
}


/* participate.html #participate-qanda */
.qanda-grad{
    width:100%;
    height:70px;
    background-image:url(../img/bg-noise.webp);
    background-repeat: repeat;
    mask-image: linear-gradient(0deg, white 0%, transparent);
    -webkit-mask-image:linear-gradient(0deg, white 0%, transparent);
    transform: translateY(1px);
}
.qanda-grad img{
    width:100%;
    height:100%;
    object-fit: cover;

}
.qanda{
    padding-top:30px;
    background-image: url(../img/bg-noise.webp);
    background-repeat: repeat;
    padding-bottom: var(--margin-bottom);
    background-color: var(--back);
}
.qanda .container{
    max-width: 800px;
}
.qanda .sect-explain{
    margin-bottom:50px;
}
.qanda-list{
    color:var(--white);
}
.qanda-list li{
    background-color: var(--qanda-theme-color);
    padding:20px 40px;
    border-radius: 20px;
    margin-bottom: 50px;
    cursor: pointer;
    position: relative;
}
.qanda-tri{
    position: absolute;
    height:28px;
    width:58px;
    bottom:-27px;
    left:30px;
}
.qanda-q{
    font-weight: 500;
    font-size:1.125rem;
}
.qanda-a{
    padding-top:25px;
    font-weight: 500;
    font-size:1.125rem;
}


@media screen and (max-width:1120px){
    .mowa-left,.mowa-right{
        display: none;
    }
}

@media screen and (max-width:960px){
    :root{
        --header-height:90px; /*+15px*/
    }
    /***header***/
    .header-content{
        display: none;
    }
    .header-sp{
        outline: 2px dashed #ddc8b2;
        outline-offset: -6px;
        display: flex;
        /* justify-content: space-between;
        align-items: center; */
        padding:10px 20px;
        background-color: var(--white);
        border-radius: 30px;
        width:90%;
        box-shadow: var(--header-shadow);
    }
    .header-nav-sp,.header-nav-sp ul{
        display: flex;
        align-items: center;
        gap:15px;
    }
    .header-nav-sp ul{
        margin-right: 39px;
    }
    .header-nav-sp .nav-link-title{
        font-size:0.9375rem;
    }
    .logo-sp{
        font-size:0.875rem;
        width:100px;
        height: 40px;
    }
    .logo-sp img{
        width: 100%;
        height:100%;
        object-fit: contain;
    }
    .hb{
        position: absolute;
        cursor: pointer;
        z-index:20;
        width:24px;
        height:8px;
        right: calc(5% + 20px);
        top:41px;
    }
    .hb span{
        display: block;
        width:100%;
        height:2px;
        background-color: var(--font);
        border-radius: 2px;
        transform-origin: center;
        transition:all 0.3s;
        position: absolute;
        left:0;
    }
    .hb1{
        top:0;
    }
    .hb2{
        bottom:0;
    }
    .drawer{
        display: block;
        position: fixed;
        width: 100%;
        height:100vh;
        background: var(--back);
        top:0;
        left:-100%;
        z-index:10;
        transition:all 0.3s;
        font-weight: 500;
        padding-bottom:200px;
    }
    .drawer .logo{
        width: fit-content;
        margin:10px;
        min-height: var(--header-height - 15px);
    }
    .open .drawer{
        left:0;
    }
    .drawer .nav-link-title{
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom:0;
    }
    .drawer nav li a{
        display: block;
        padding:20px 16px;
        position: relative;
        border-top: dashed 1px var(--font);
    }
    .drawer nav li a:last-child{
        border-bottom:dashed 1px var(--font);
    }
    .drawer nav li a>*{
        transition:all 0.2s;
    }
    .drawer nav li a:hover >*{
        translate:20px 0;
    }
    .drawer .mini-deco{
        --mini-deco-height:200px;
        bottom:0;
        top:auto;
        width:100%;
    }
    .mini-deco .sub-img2{
        left:auto;
        right:0;
        top:calc(-1*var(--mini-deco-height)/2);
    }
    .mini-deco .sub-img2>img{
        object-position: bottom right;
    }
    .open .hb1{
        top:50%;
        rotate: 45deg;
        translate: 0 -50%;
    }
    .open .hb2{
        rotate:-45deg;
        top:50%;
        translate:0 -50%;
    }
    .open .drawer{
        visibility: visible;
    }
}

/***レスポンシブ***/
@media screen and (max-width:768px){
    /***共通設定***/
    :root{
        --margin-bottom:100px;
    }
    .hz-content,.purpose-text{
        --masu-size:15vw;
    }
    .pc-img{
        display: none;
    }
    .sp-img{
        display: block;
    }
    


    /* index.html main */
    /*hero*/
    .hero{
        --masu-size:20vw;
    }
    .hero-logo{
        width:70%;
        max-width:350px;
    }
    .inside-box-girl{
        max-width: 350px;
        width: 70%;
    }
    .hero-huki1{
        width:40%;
    }
    .hero-huki2{
        width:30%;
    }
    .hero-huki1 img,.hero-huki2 img{
        object-position: center 30%;
    }
    /*catch*/
    #catch{
        padding-top: 40px;
    }
    .main-catch{
        margin-bottom: 25px;
        font-size:1.5rem;
    }
    .subcatch{
        font-size: 0.9375rem;
    }
    .subcatch .big{
        font-size:1.125rem;
    }
    .spbr{
        display: inline;
    }
    
    /*about-fd*/
    .sect-title-group{
        margin-bottom: 20px;
    }
    .sect-subtitle-top{
        font-size:1.25rem;
    }
    .sect-title{
        font-size:1.5rem;
    }
    .sect-subtitle{
        margin-top: 5px;
        font-size:1.25rem;
    }
    .about-fd-img{
        width:75%;
        margin: 0 auto;
    }
    #about-fd p{
        font-size:0.9375rem;
    }

    /*purpose*/
    #purpose .container{

    }
    .purpose-wrapper{
        display: block;
        position: relative;
        max-width: 600px;
    }
    .purpose-img{
        max-width: 250px;
    }
    .purpose-img h3{
        font-size:1.5rem;
    }
    .purpose-text{
        padding:30px;
        border-radius: 50px;
        transform: translateY(-30px);
    }
    .purpose-title{
        font-size:1.25rem;
        margin-bottom: 20px;
    }
    .purpose-text p{
        font-size: 0.9375rem;
    }

    /*difference*/
    .difference-main{
        margin-bottom: 20px;
    }
    .difference-wrapper{
        gap:10px;
        position: relative;
        margin-bottom: 35px;
    }
    .difference-arrow{
        position: absolute;
        scale: 60%;
        z-index:5;
        top:0;
    }
    .difference-head{
        padding-bottom: 10px;
    }
    .difference-head-img{
        height:100px;
    }
    .difference-head-img img{
        height:100%;
    }
    .difference-text{
        padding:10px;
    }
    .difference-text h3{
        font-size:1.125rem;
    }
    .difference-text p{
        font-size:0.9375rem;
    }
    .difference-summary{
        font-size: 1rem;
        margin-bottom: 35px;
    }
    .difference-summary .accent-color{
        font-size: 1.125rem;
    }
    .difference-notes{
        font-size: 0.875rem;
        text-align: start;
    }
    .difference-rect1{
        margin-bottom: 15px;
    }
    .difference-rect2{
        margin-bottom: 80px;
    }

    /*detail*/
    .nyoki img{
        width:40px;
    }
    .detail-top{
        padding-top:30px;
    }
    .sect-explain{
        margin-bottom: 30px;
        font-size: 0.9375rem;
    }
    .detail-head{
        outline-offset: -6px;
        padding:20px;
    }
    .detail-head h3{
        font-size:1.125rem;
        margin-bottom: 5px;
        padding-bottom:5px;
    }
    .detail-head p{
        font-size:0.9375rem;
    }
    .detail-body{
        padding:90px 0 25px;
    }
    .radius-button{
        padding:15px 25px;
    }
    .radius-button p{
        font-size:1rem;
    }
    .radius-button img{
        margin-left: 10px;
    }

    /*run-truck-area*/
    .run-truck-area{
        gap:35%;
    }
    .run-truck{
        width:20%;
    }
    .run-truck-goal{
        width:20%;
    }

    /*introduce*/
    #introduce{
    }

    /***footer***/
    .totop{
        width:75px;
        top:-70px;
        right:20px;
    }
    .totop:hover{
        top:-75px;
    }
    .totop-change-posi{
        position:fixed;
        bottom:10px;
        right:5px;
        top:auto;/*初期値に変更*/
    }
    .totop-change-posi:hover{
        top:auto;
        bottom:15px;
    }


    /***introduce.html***/
    #introduce-page .sect-explain{
        margin-bottom: 20px;
    }
    .org-list article{
        /* カスタムプロパティ */
        --article-gap:5px;

        padding:25px;
        flex-direction: column;
        align-items: center;
        max-width:550px;
        margin:0 auto;
    }
    .filing::before,.filing::after{
        /*カスタムプロパティ*/
        --tab-height:25px;
        --tab-width:20%;
    }
    .org-img{
        width:75%;
        max-width:300px;
        margin-bottom: 15px;
    }
    .org-text{
        width:100%;
    }
    .org-name{
        font-size: 1.25rem;
    }
    .org-area{
        font-size: 0.9375rem;
        margin-bottom: 10px;
    }
    .org-explain{
        font-size:0.9375rem;
    }
    .org-detail{
        font-size:0.9375rem;
        border-radius: 10px;
    }
    .org-detail td{
        padding:10px 15px;
    }
    .filing{
        max-width: 550px;
        margin:0 auto;
    }


    /***participate.html***/
    .horizontal-wrapper{
        margin-top:100px;
    }
    .hz-frame{
            /*カスタムプロパティ*/
        --top-radius:15px;
        --top-height:25px;
    }
    .hz-top h2{
        font-size:9vw;
        font-weight: 900;
        -webkit-text-stroke: 1px var(--white);
    }
    .hz-num{
        font-size:3.5rem;
        transform:translate(max(-5vw,-50%), 20px);
    }
    .hz-content{
        padding:5vw;
    }
    .hz-block{
        flex-direction: column;
        justify-content: flex-start;
    }
    .hz-text{
        width:100%;
        flex-shrink: 0;
        margin-bottom: 10px;
    }
    .hz-img{
        align-self: center;
        width:80%;
    }
    .hz-table{
        width: 90%;
    }
    .hz-text h3{
        font-size:2rem;
        margin-bottom: 20px;
    }
    .hz-text p{
        font-size:0.9375rem;
    }
    .toc-inner li{
        font-size:1.25rem;
    }
    .toc{
            /* カスタムプロパティ */
    --mark-size:8px;
    --line-weight:3px;
    width: calc(100% / var(--numof-hz));
    padding:13px 0 34px;
    }
    .toc-marker{
        width:50px;
        height:50px;
    }
    .qanda{
        padding-bottom: var(--margin-bottom);
    }
    .qanda .sect-explain{
        margin-bottom:40px;
    }
    .qanda-list li{
        padding:15px 30px;
        margin-bottom: 45px;
        border-radius: 10px;
    }
    .qanda-q{
        font-size:1rem;
    }
    .qanda-a{
        font-size:1rem;
    }
    .qanda-tri{
        position: absolute;
        height: 18px;
        width: 38px;
        bottom: -17px;
        left: 10px;
    }
    .scroll-nav{
        width: 23%;
        top:0;
        right:1%;
        height:80px;
    }
}