@charset "UTF-8";
/* ▼▼変数▼▼ */
:root {
    --gray: #EAEBED;
    --black: #071E22;
    --green: #2EA395;
    --lightgreen: #AFE9E2;
    --red: #D64933;
    --white: #FFFFFF;
    --yellow: #DDBC30;
    --darkgreen: #207066;
    --h2_size: clamp(1.5rem, calc(1.174rem + 1.49vw), 3rem);
    --h2-before-size: clamp(4rem, calc(3.103rem + 4.1vw), 8.125rem);
    --calc-width-350: calc( calc(100vw - 350px) / calc(700px - 350px));
    --calc-width-961: calc( calc(100vw - 961px) / calc(1400px - 961px));
}
@media(min-width:1401px),(min-width:701px) and (max-width:960px){
    :root {
        --h2_size: 48px;
        --h2-before-size: 180px;
    }
}
/* ▲▲変数▲▲ */
/* ▼▼全体▼▼ */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
ul {
    list-style: none;
}

body{
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    line-height: 1.2;
    color: var(--green);
    background-color: var(--lightgreen);
    overflow-x: hidden;
}
main{
    width: 100%;
    background-color: var(--lightgreen);
    position: relative;
    z-index: 0;
}

.h2{
    font-size: var(--h2_size);
    font-weight: bold;
    position: relative;
    opacity: 0;
    transform: translateX(-50%);
    padding-left:  clamp(16px, calc(16px + calc(calc(64px - 16px) * var(--calc-width-350))), 64px);
}
.h2::before{
    content: "";
    height: auto;
    font-family: "Inter", sans-serif;
    font-size: var(--h2-before-size);
    font-weight: 300;
    color: #3CB1A4;
    position: absolute;
    top: 50%;
    left: 0;
    z-index: -1;
    transform: translateY(-50%) translateX(-30%);
}
.h2.fade-slide {
    opacity: 1;
    transform: translateX(0);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.h2.fade-slide::before  {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.h2.fade-slide::before {
    animation-delay: 0.5s;
}

@media(min-width:1401px),(min-width:701px) and (max-width:960px){
    h2::before {
        font-size: 180px;
    }
}

button, .button {
    width: 200px;
    height: 80px;
    border: none;
    display: block;
    position: relative;
    padding: 0.7em 2.4em;
    font-size: clamp(1rem, 0.889rem + 0.51vw, 1.5rem);
    background: transparent;
    cursor: pointer;
    user-select: none;
    overflow: hidden;
    color: var(--green);
    z-index: 1;
    font-family: inherit;
    font-weight: 500;
}
button span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: -1;
  border: 4px solid var(--green);
}
button span::before {
  content: "";
  display: block;
  position: absolute;
  width: 8%;
  height: 500%;
  background: var(--white);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-60deg);
  transition: all 0.3s;
}
button:hover span::before {
  transform: translate(-50%, -50%) rotate(-90deg);
  width: 100%;
  background: var(--green);
}
button:hover, .button:hover {
  color: white;
}
button:active span::before {
  background: var(--green);
}

.btn-green {
    color: var(--white);
}
.btn-green span {
    border-color: var(--white);
}
.btn-green span::before {
    background: var(--green);
}
.btn-green:hover span::before {
    background: var(--white);
}
.btn-green:hover {
    color: var(--green);
}
.btn-lightgreen span::before {
    background-color: var(--lightgreen);
}
@media(min-width:701px){
    button, .button {
        font-size: 20px;
    }
    button span{
        border: 6px solid var(--green);
    }
    button span::before {
        height: 580%;
    }
}

.icon {
    color: var(--white);
    background-color: var(--green);
    vertical-align: bottom;
    padding: clamp(4px, calc(4px + calc(8px - 4px) * var(--calc-width-350)), 8px);
}

.sp {
    display: block;
}
.tb {
    display: none;
}
.pc {
    display: none;
}
@media(min-width:961px){
    .sp {
        display: none;
    }
    .tb {
        display: block;
    }
}
@media(min-width:1401px){
    .tb {
        display: none;
    }
    .pc{
        display: block;
    }
}

.logo {
    padding-top: 16px;
    padding-left: 16px;
}
.logo img{
    width: 50px;
    height: 40px;
}
@media(min-width:1401px){
    .logo img{
        width: 107px;
        height: 85px;
    }
}
/* ▲▲全体▲▲ */
/* ▼▼ヘッダー▼▼ */
header {
    position: relative;
    z-index: 2;
}
/* ▼▼メニューボタン▼▼ */
.menu-btn {
    width: 64px;
    height: 64px;
    background-color: var(--white);
    clip-path: inset(0 0 round 60.5px);
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 2;
    transition-duration: .3s;
    transition-timing-function: cubic-bezier(0.47, 0, 0.75, 0.72);
    transition-delay: .6s;
}
.menu-btn span{
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--green);
    position: absolute;
    left: 0;
    margin: 31px 20px;
    transition-duration: .3s;
    transition-timing-function: cubic-bezier(0.47, 0, 0.75, 0.72);
    transition-delay: .6s;
}

.menu-btn span:nth-child(1) {
    top: -7px;
}
.menu-btn span:nth-child(2){
    inset: 0;
}
.menu-btn span:nth-child(3) {
    bottom: -7px;
}

.menu-btn.click{
    background-color: var(--white);
    rotate: 180deg;
    clip-path: inset(0);
    transition-property: background-color, rotate, clip-path;
    transition-duration: .2s;
    transition-timing-function: cubic-bezier(0.22, 0.28, 0.51, 1.04);
    transition-delay: 0s;
}
.menu-btn.click span{
    transition-duration: .2s;
    transition-timing-function: cubic-bezier(0.22, 0.28, 0.51, 1.04);
    transition-delay: 0s;
}
.menu-btn.click span:nth-child(1){
    transform: rotate(45deg);
    top: 0;
}
.menu-btn.click span:nth-child(2){
    opacity: 0;
}
.menu-btn.click span:nth-child(3){
    transform: rotate(-45deg);
    bottom: 0;
}
/* ▲▲メニューボタン▲▲ */
/* ▼▼メニューの中身▼▼ */
.menu-wrap{
    width: 100%;
    height: 100vh;
    background-color: var(--white);
    font-size: 16px;
    font-weight: bold;
    color: var(--green);
    display: flex;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
    clip-path: inset(100% 16px 16px 100%);
    transition: clip-path .5s cubic-bezier(0.22, 0.28, 0.51, 1.04), opacity 0s ease .5s, -webkit-clip-path .5s cubic-bezier(0.22, 0.28, 0.51, 1.04);
}
.menu-wrap.click {
    opacity: 1;
    clip-path: inset(0);
    transition: clip-path .4s cubic-bezier(0.22, 0.28, 0.51, 1.04) .25s, opacity 0s ease .25s, -webkit-clip-path .4s cubic-bezier(0.22, 0.28, 0.51, 1.04) .25s;
}
.menu-inner .logo img{
    width: 80px;
    height: 63px;
}
.menu-list {
    position: absolute;
    left: 16px;
    bottom: calc(64px + 96px);
}
.menu-list li{
    padding-top: 32px;
}
.menu-list li:first-child {
    padding-top: 0;
}
.menu-visual {
    width: calc( 200% / 3);
    min-width: 234px;
    min-height: 241px;
    margin-top: 136px;
}
.menu-visual img{
    width: 100%;
    object-fit: contain;
}
.menu-inner {
    width: 40%;
    position: relative;
}
.menu-inner .btn{
    position: absolute;
    left: 16px;
    bottom: 16px;
}
@media(min-width:701px){
    .menu-wrap {
        font-size: 32px;
    }
    .menu-list {
        left: 32px;
        bottom: calc(48px + 117px);
    }
    .menu-inner .btn{
        left: 32px;
        bottom: 24px;
    }
    .menu-inner .btn button{
        min-width: 400px;
    }
}
@media(min-width:961px){
    .menu-wrap {
        justify-content: flex-end;
        flex-direction: row-reverse;
    }
    .menu-inner {
        width: 50%;
    }
    .menu-inner .btn{
        left: 64px;
        bottom: 37px
    }
    .menu-list {
        left: 64px;
        bottom: calc(48px + 117px);
    }
    .menu-visual {
        width: 50%;
    }
    .menu-visual img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .menu-visual{
        background: linear-gradient(to left, #EDF5F4, #D2E4E2);
        margin-top: 0;
    }
    .menu-kv {
        width: 100%;
        height: 100%;
        position: relative;
    }
    .menu-kv .kv-front {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
    }
    .menu-kv .kv-text {
        width: 100%;
        max-width: calc(100% - 56px);
        height: auto;
        object-fit: contain;
        position: absolute;
        top: clamp(32px, 253px, 35%);
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
    }
}
@media(min-width:1401px){
    .menu-inner .logo {
        padding-top: 64px;
        padding-left: 64px;
    }
    .menu-inner .logo img {
        width: 120px;
        height: 95px;
    }
    .menu-list {
        left: 64px;
        bottom: calc(49px + 144px);
    }
    .menu-wrap .btn{
        left: 64px;
        bottom: 64px;
    }
    .menu-kv {
        background-image: url(./img/KV_back.png);
    }
    .menu-kv .kv-text {
        max-width: calc(100% - 104px);
        top: clamp(32px, 207px, 10%);
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
    }
}
/* ▲▲メニューの中身▲▲ */
/* ▲▲ヘッダー▲▲ */
/* ▼▼フッター▼▼ */
footer {
    width: 50%;
    background-color: transparent;
    position: relative;
    margin-left: 50%
}
.footer-bk {
    width: 100%;
    height: 100px;
    position: absolute;
}
.footer-inner {
    width: 100%;
    background-color: var(--white);
    color: var(--black);
    clip-path: polygon(0 50px, 0 100%, 100% calc(100% - 50px), 100% 0 ); 
    padding: 75px 16px 80px 16px;
    text-align: center;
}
.footer-inner .logo img{
    width: clamp(120px, calc(120px + calc(calc(200px - 120px) * var(--calc-width-350))) ,200px);
    height: clamp(95px, calc(95px + calc(calc(159px - 95px) * var(--calc-width-350))) ,159px);
}
.footer-inner p{
    padding-top: 24px;
    padding-bottom: 40px;
}
.footer-menu {
    color: var(--green);
    font-size: clamp(1rem, 0.944rem + 0.25vw, 1.25rem);
    font-weight: bold;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    column-gap: clamp(40px, calc(40px + calc(calc(48px - 40px) * var(--calc-width-350))) ,48px);
    row-gap: clamp(40px, calc(40px + calc(calc(48px - 40px) * var(--calc-width-350))) ,48px);
    border-top: 1px solid var(--green);
    border-bottom: 1px solid var(--green);
    padding: 48px 16px 48px 16px;
    margin: 0 auto;
    margin-bottom: 40px;
}
.footer-menu li {
    width: clamp(calc(calc( 100% - 96px )/ 3),calc( calc(100% - calc(80px + calc(calc(96px - 80px) * var(--calc-width-350)))) / 3) ,calc(calc( 100% - 80px )/ 3));
}
.footer-doc-menu{
    color: var(--green);
    font-size: 16px;
    font-weight: normal;
    display: flex;
    justify-content: center;
    column-gap: 48px;
    margin: 0 auto;
}
.copyright {
    font-size: clamp(0.875rem, 0.791rem + 0.38vw, 1.25rem);
    color: var(--black);
    text-align: right;
    position: absolute;
    bottom: 8px;
    right: 16px;
}
@media(min-width:701px){
    .footer-inner{
        clip-path: polygon(0 100px, 0 100%, 100% calc(100% - 100px), 100% 0 ); 
        padding: 160px 120px;
    }
    .footer-inner p{
        padding-top: 32px;
        padding-bottom: 56px;
    }
    .footer-menu{
        font-size: 20px;
        column-gap: 48px;
        row-gap: 48px;
        padding: 75px 16px 80px 16px;
        margin-bottom: 58px;
    }
    .footer-doc-menu{
        font-size: 20px;
    }
    .copyright {
        font-size: 20px;
        bottom: 24px;
        right: 24px;
    }
}
@media(max-width:960px){
    footer {
        width: 100%;
        margin: 0 auto;
    }
}
@media(min-width:961px) and (max-width:1400px){
    .footer-inner {
        padding: 120px 64px 130px 64px;
    }
}
@media(min-width:1401px),(min-width:701px) and (max-width:960px){
    .footer-menu {
        justify-content: space-between;
        padding: 56px 0 56px 0;
        margin-bottom: 56px;
    }
    .footer-menu li {
        width: auto;
        text-align: left;
    }
}

/* ▲▲フッター▲▲ */
/* ▼▼index▼▼ */
.contents {
    display: flex;
    flex-direction: column;
}
.side-bar{
    width: 100%;
}
.content-wrap {
    width: 100%;
}
@media(min-width:961px){
    .contents {
        flex-direction: row;
    }
    .side-bar{
        width: 50%;
        height: 200vh;
    }
    .content-wrap {
        width: 50%;
        position: sticky;
        top: 0;
    }
}
/* ▼▼サイトロード時▼▼ */
.loading-bk {
    width: 100%;
    height: 100vh;
    display: block;
    position: fixed;
    z-index: 2;
    pointer-events: none;
}
.loading-bk-top {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: calc((100vh - 23vw) * -0.5);
    left: 0;
    transform: translateY(0);
}
.loading-bk-top-base {
    background-color: var(--green);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 23vw),0 100%);
    animation: loading-top 1.5s ease-in;
    animation-fill-mode: forwards;
    animation-delay: 0.8s;
}
.loading-bk-top-line {
    background-color: var(--lightgreen);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 23vw),0 100%);
    animation: loading-top 1.5s cubic-bezier(0.77, -0.02, 0.29, 0.84);
    animation-fill-mode: forwards;
    animation-delay: 0.9s;
}
.loading-bk-bottom  {
    width: 100vw;
    height: 100vh;
    position: absolute;
    bottom: calc((100vh - 23vw) * -0.5);
    right: 0;

}
.loading-bk-bottom-base {
    background-color: var(--green);
    clip-path: polygon(0 23vw, 100% 0, 100% 100%, 0 100%);
    animation: loading-bottom 1.5s ease-in;
    animation-fill-mode: forwards;
    animation-delay: 0.8s;
}
.loading-bk-bottom-line {
    background-color: var(--darkgreen);
    clip-path: polygon(0 23vw, 100% 0, 100% 100%, 0 100%);
    animation: loading-bottom 1.5s cubic-bezier(0.77, -0.02, 0.29, 0.84);
    animation-fill-mode: forwards;
    animation-delay: 0.9s;
}
@keyframes loading-top {
    0%{
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%);
    }
}
@keyframes loading-bottom{
    0%{
        transform: translateY(0);
    }
    100% {
        transform: translateY(100%);
    }
}
/* ▲▲サイトロード時▲▲ */
/* ▼▼キービジュアル▼▼ */
.kv-wrap {
    width: 100%;
    height: 100vh;
    position: relative;
    background: linear-gradient(to left, #EDF5F4, #D2E4E2);
    margin: 0 auto;
    overflow: hidden;
} 
.kv-bk {
    width: 100%;
    height: 100%;
    background-image: url(img/KV_back.png);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
}
.kv-wrap .logo img{
    width: 70px;
    height: 56px;
    position: absolute;
    top: 20px;
    left: 24px;
    padding: 0;
    z-index: 2;
}
.kv-wrap .logo::before {
    content: "";
    width: 100%;
    height: calc(56px + 20px + 24px);
    display: block;
    background-color: var(--white);
    clip-path: polygon(0 0, 0 100%, 100% 0);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
 .kv-text {
    width: clamp(calc(100% - 104px), 95% ,calc(100% - 24px));
    position: absolute;
    top: clamp(138px, 30%, 253px);
    left: 50%;
    transform: translateX(-50%);
}
.kv-text img{
    width: 100%;
}
.kv-man {
    display: flex;
    justify-content: center;
    column-gap: 10%;
    position: absolute;
    top: clamp(235px, 45% ,373px);
    left: 50%;
    transform: translateX(-50%);
    padding: 0 28px;
    animation: 1.8s cubic-bezier(0.53, 0.03, 0.44, 1) 0s infinite alternate-reverse none running kv-man-animation;
}
.kv-man img:first-child {
    width: clamp(124px, 100% ,148px);
    object-fit: contain;
    padding-top: 52px;
}
.kv-man img:nth-child(2){
    width: clamp(108px, 100% ,130px);
    object-fit: contain;
    padding-bottom: 47px;
}
.kv-step {
    display: flex;
    justify-content: center;
    column-gap: 16px;
    align-items: flex-end;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
}
.kv-step img{
    width: clamp(106px , 190px, calc(calc(100% - 16px) / 3));
}
.kv-arrow {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.kv-arrow img{
    height: auto;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
.arrow-animation{
    position: absolute;
    width: 100px;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-name: move-kv-arrow-animation-01;
}
.arrow-animation-01{
    animation-delay: 1s;
    left: -100px;
    top: 20%;
}
.arrow-animation-02{
    animation-delay: 2s;
    left: -100px;
    top: 64%;
}
.arrow-animation-03{
    animation-delay: 0s;
    left: -100px;
    top: 82%;
}

@keyframes kv-man-animation {
    0% {
        transform: translate(-50%, -0.5vw);
    }
    100% {
        transform: translate(-50%, 0.5vw);
    }
}
@keyframes move-kv-arrow-animation-01{
    0% {
        opacity: 0;
        transform: translate(-100%, 200%);
    }
    10% {
        opacity: 0.5;
    }
    90% {
        opacity: 0.5;
    }
    100%{
        opacity: 0;
        transform: translate(677%, -150%);
    }
}
@media(min-width:701px){
    .kv-wrap .logo img{
        width: 107px;
        height: 85px;
    }
    .kv-wrap .logo::before {
        height: calc(85px + 20px + 32px);
    }
}
@media(min-width:961px) {
    .kv-wrap {
        width: 50%;
        position: fixed;
    }
    .kv-wrap .logo img{
        width: 70px;
        height: 56px;
    }
    .kv-wrap .logo::before {
        height: calc(56px + 20px + 32px);
    }
    .arrow-animation {
        width: 180px;
    }
    .arrow-animation-01 {
        left: -187px;
        top: 22%;
    }
    .arrow-animation-02 {
        left: -185px;
        top: 70%;
    }
    .arrow-animation-03 {
        left: -184px;
        top: 90%;
    }
}
@media(min-width:1401px){
    .kv-wrap .logo img{
        width: 107px;
        height: 85px;
    }
    .kv-wrap .logo::before {
        height: calc(85px + 20px + 32px);
    }
    .kv-wrap {
        width: 100%;
        position: relative;
    }
    .kv-wrap.fixed {
        width: 50%;
        overflow-y: scroll;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .production-wrap.fixed {
        width: 50%;
        position: fixed;
        top: 0;
        left: 0;
    }
}
/* ▲▲キービジュアル▲▲ */
/* ▼▼制作実績▼▼ */
.production-wrap {
    width: 100%;
    height: 1128px;
    background: #EDF5F4;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.production-wrap .logo {
    padding-top: 24px;
    padding-left: 24px;
}
.production-wrap .logo img{
    top: 0;
    left: 0;
    position: relative;
    z-index: 3;
}
.production-wrap .logo::before {
    content: "";
    width: 100%;
    height: 142px;
    background-color: var(--white);
    position: absolute;
    top: 0;
    left: 0;
    clip-path: polygon(0 0, 0 100%, 100% 0);
    z-index: 2;
}
.production-wrap .logo p{
    color: var(--green);
    font-size: 32px;
    position: absolute;
    top: 36px;
    left: 155px;
    z-index: 3;
}
.triangle {
    width: 58px;
    aspect-ratio: 1/cos(30deg);
    clip-path: polygon(50% 0,100% 100%,0 100%);
}
.green {
    background-color: var(--green);
}
.darkgreen {
    background-color: var(--darkgreen);
}
.lightgreen {
    background-color: var(--lightgreen);
}
.t1 {
    position: absolute;
    top: 300px;
    left: 100px;
    transform: translate(0, 0);
    opacity: 0;
    animation: bgloop02 12s ease-out infinite;
}
.t1 > .triangle {
    transform: rotate(-19.26deg);
}
.t2 {
    position: absolute;
    top: 357px;
    left: 276px;
    transform: translate(0, 0);
    opacity: 0;
    animation: bgloop03 12s ease-out infinite;
    animation-delay: 2s;
}
.t2 > .triangle {
    transform: rotate(72.69deg);
}
.t3 {
    position: absolute;
    top: 189px;
    left: 269px;
    transform: translate(0, 0);
    opacity: 0;
    animation: bgloop02 12s ease-out infinite;
    animation-delay: 8s;
}
.t3 > .triangle {
    transform: rotate(150.79deg);
}
.t4 {
    position: absolute;
    top: 671px;
    left: 67px;
    transform: translate(0, 0);
    opacity: 0;
    animation: bgloop02 12s ease-out infinite;
    animation-delay: 4s;
}
.t4 > .triangle {
    transform: rotate(7.44deg);
}
.t5 {
    position: absolute;
    top: 457px;
    left: 52px;
    transform: translate(0, 0);
    opacity: 0;
    animation: bgloop02 12s ease-out infinite;
    animation-delay: 0s;
}
.t5 > .triangle {
    transform: rotate(37.66deg);
}
.t6 {
    position: absolute;
    top: 631px;
    right: 61px;
    transform: translate(0, 0);
    opacity: 0;
    animation: bgloop03 12s ease-out infinite;
    animation-delay: 7s;
}
.t6 > .triangle {
    transform: rotate(72.69deg);
}
.t7 {
    position: absolute;
    top: 434px;
    right: 4px;
    transform: translate(0, 0);
    opacity: 0;
    animation: bgloop02 12s ease-out infinite;
    animation-delay: 3s;
}
.t7 > .triangle {
    transform: rotate(37.66deg);
}
.t8 {
    position: absolute;
    top: 806px;
    right: 20px;
    transform: translate(0, 0);
    opacity: 0;
    animation: bgloop02 12s ease-out infinite;
    animation-delay: 8s;
}
.t8 > .triangle {
    transform: rotate(37.66deg);
}
.t9 {
    position: absolute;
    bottom: 23px;
    right: 298px;
    transform: translate(0, 0);
    opacity: 0;
    animation: bgloop02 12s ease-out infinite;
    animation-delay: 11s;
}
.t9 > .triangle {
    transform: rotate(7.44deg);
}
.t10 {
    position: absolute;
    bottom: 14px;
    right: 35px;
    transform: translate(0, 0);
    opacity: 0;
    animation: bgloop03 12s ease-out infinite;
    animation-delay: 6s;
}.t10 > .triangle {
    transform: rotate(72.69deg);
}
.t11 {
    position: absolute;
    bottom: 185px;
    right: 183px;
    transform: translate(0, 0);
    opacity: 0;
    animation: bgloop02 12s ease-out infinite;
    animation-delay: 1s;
}
.t11 > .triangle {
    transform: rotate(7.44deg);
}

.item {
    width: 58%;
    height: 420px;
    background-color: var(--white);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    z-index: 1;
    clip-path: polygon(0 75px, 0 100%, 100% calc(100% - 75px), 100% 0);
    animation: bgloop01 25s linear infinite;
}
.item img{
    width: 100%;
    display: block;
    margin: 0 auto;
}
.item1 {
    background-image: url(img/item1.png);
    top: 0;
    left: calc(100% - 81px);
    animation-delay: -20s;
}
.item2 {
    background-image: url(img/item2.png);
    top: calc(100% - 141px);
    left: 0;
    animation-delay: -15s;
}
.item3 {
    background-image: url(img/msg-img-1-trim.png);
    top: -141px;
    left: calc(100% + 81px);
    animation-delay: -10s;
}
.item4 {
    background-image: url(img/msg-img-1.png);
    top: calc(100%);
    left: -81px;
    animation-delay: -5s;
}
.item5 {
    background-image: url(img/goripuri.png);
    top: 50%;
    left: 25%;
    animation-delay: 00s;
}
@keyframes bgloop01 {
    0% {
        top: calc(75% + 840px);
        left: -66%;
    }
    100% {
        top: calc(-0.6% - 840px);
        left: 100%;
    }
}
@keyframes bgloop02 {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    50% {
        transform: translate(0, -400%) rotate(45deg);
        opacity: 1;
    }
    75% {
        transition: translate(0, -400%) rotate(45deg);
        opacity: 0;
    }
    100% {
        transform: translate(0, -300%) rotate(45deg);
        opacity: 0;
    }
}
@keyframes bgloop03 {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    50% {
        transform: translate(0, -400%) rotate(-45deg);
        opacity: 1;
    }
    75% {
        transition: translate(0, -400%) rotate(-45deg);
        opacity: 0;
    }
    100% {
        transform: translate(0, -300%) rotate(-45deg);
        opacity: 0;
    }
}
/* ▲▲制作実績▲▲ */
/* ▼▼news▼▼ */
.news {
    width: 100%;
    color: var(--black);
    background-color: var(--white);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: clamp(16px, calc(16px + calc(calc(24px - 16px) * var(--calc-width-350))), 24px);
}
.news-inner{
    width: 76%;
    height: 100%;
    display: flex;
    column-gap: 16px;
    align-items: center;
}
.news-inner .thumbnail {
    width: 48px;
    height: 48px;
}
.news-meta {
    width: calc(100% - 64px);
    height: 100%;
}
.thumbnail img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: bottom;
}
.news-info {
    display: flex;
    column-gap: 8px;
    align-items: center;
    padding-bottom: clamp(0px, calc(16px * var(--calc-width-350)), 16px);
}
.news-meta .news-info time {
    font-size: 12px;
}
.news-info .icon {
    font-size: 8px;
}
.news-title{
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    font-weight: bold;
    line-height: 2;
}
.news button {
    width: clamp(67px, calc(67px + calc(calc(112px - 67px) * var(--calc-width-350))), 112px);
    height: clamp(28px, calc(28px + calc(calc(51px - 28px) * var(--calc-width-350))), 51px);
    font-size: 10px;
    padding: 8px;
}
.news button span::before {
    height: 650%;
}
@media(min-width:701px){
    .news-inner .thumbnail{
        width: 120px;
        height: 120px;
    }
    .news-meta {
        width: calc(100% - 136px);
    }
    .news-meta .news-info time{
        font-size: 16px;
    }
    .news-info .icon {
        font-size: 12px;
    }
    .news-title {
        font-size: 20px;
    }
}
@media(min-width:961px) and (max-width:1400px){
    .news-inner {
        width: 76%;
    }
    .news-info .icon{
        font-size: 12px;
    }
    .news button{
        width: 112px;
        height: 51px;
    }
}
@media(min-width:1401px),(min-width:701px) and (max-width:960px){
    .news-inner {
        width: 80%;
    }
}
@media(min-width:1401px){
    .news button {
        font-size: 16px;
    }
}
/* ▲▲news▲▲ */
/* ▼▼about▼▼ */
.about {
    color: var(--black);
    position: relative;
    padding-top: 45px;
}
.about::before {
    content: "";
    width: 100%;
    height: calc(100% + 138px);
    background-image: url(img/background.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}
.about::after {
    content: "";
    width: 100%;
    height: 100px;
    background: linear-gradient(to left, rgba(46,163,149,0.2), rgba(46,163,149,0));
    clip-path: polygon(0 50px, 0 100%, 100% calc(100% - 50px), 100% 0 ); 
    position: absolute;
    bottom: -50px;
    left: 0;
}
.about-img {
    width: 80%;
    position: relative;
    z-index: 1;
    margin: 0 auto;
}
.about-img img{
    width: 100%;
    object-fit: contain;
}
.about-img::before {
    content: "";
    width: 100%;
    height: 100%;
    background-image: url(img/back_green_square.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: -1;
}
.about-arrow img{
    width: 85px;
    position: absolute;
}
.about-arrow img:nth-child(1){
    top: 14px;
    left: -18px;
}
.about-arrow img:nth-child(2){
    bottom: -10px;
    right: -30px;
}
.about-text {
    width: 80%;
    line-height: 2;
    margin: 0 auto;
    padding-top: 48px;
    padding-bottom: 63px;
    position: relative;
    z-index: 1;
}
@media(min-width:1401px),(min-width:701px) and (max-width:960px){
    .about::after{
        height: 200px;
        clip-path: polygon(0 100px, 0 100%, 100% calc(100% - 100px), 100% 0 ); 
        bottom: -140px;
    }
    .about-img {
        width: calc(200% / 3);
    }
    .about-arrow img{
        width: 180px;
    }
    .about-arrow img:nth-child(1){
        top: 32px;
        left: -94px;
    }
    .about-arrow img:nth-child(2){
        bottom: 0;
        right: -88px;
    }
    .about-text {
        font-size: 20px;
        padding-bottom: 54px;
    }
}
/* ▲▲about▲▲ */
/* ▼▼service▼▼ */
.service {
    width: 100%;
    color: var(--white);
    background-color: var(--green);
    clip-path: polygon(0 50px, 0 100%, 100% calc(100% - 50px), 100% 0 ); 
    padding: 72px 16px 80px 16px;
}
.service h2{
    padding-top: 44px;
    padding-bottom: 55px;
}
.service h2::before{
    content: "SERVICE";
}
.service-banner{
    width: 100%;
    height: 160px;
    position: relative;
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
    margin-top: 20px;
    margin-bottom: 24px;
}
.service-banner h3{
    font-size: clamp(1.5rem, calc(1.337rem + 0.75vw), 2.25rem);
    font-weight: bold;
    position: relative;
    padding-top: 48px;
    padding-bottom: 44px;
}
.service-banner h3::after{
    content: "";
    width: 32px;
    height: 4px;
    background-color: var(--white);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
}
.service-banner p{
    font-size: clamp(0.75rem, calc(0.696rem + 0.25vw), 1rem);
    position: relative;
    z-index: 1;
    padding-bottom: 33px;
}
.service-text {
    font-size: 14px;
    font-weight: normal;
    text-align: left;
    line-height: 2;
    margin: 0 auto;
}
.service-text p:first-child {
    font-size: 16px;
    padding-bottom: 24px;
}
.service-text p:nth-child(2){
    font-weight: bold;
}
.design .service-banner {
    background-color: var(--red);
}
.design .service-banner::before {
    content: "";
    width: 319px;
    height: 100%;
    background-image: url(img/gd_bk_1.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left top;
    position: absolute;
    top: -126px;
    left: -168px;
    z-index: 0;
    transform: translate3d(0, 0, 0);;
    animation: bgdesign 20s linear infinite;
}
.design .service-banner::after {
    content: "";
    width: 321px;
    height: 100%;
    background-image: url(img/gd_bk_2.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right bottom;
    position: absolute;
    bottom: -27px;
    right: -119px;
    z-index: 0;
    transform: translate3d(0, 0, 0);;
    animation: bgdesign2 20s linear infinite;
    animation-delay: 5s;
}
.web .service-banner {
    background-color: var(--darkgreen);
}
.web .service-banner img {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    animation: bgweb 4s linear infinite;
}
.web .service-banner img:nth-of-type(1) {
    animation-delay: 0s;
}
.web .service-banner img:nth-of-type(2) {
    animation-delay: 0.8s;
}
.web .service-banner img:nth-of-type(3) {
    animation-delay: 1.6s;
}
.web .service-banner img:nth-of-type(4) {
    animation-delay: 2.4s;
}
.web .service-banner img:nth-of-type(5) {
    animation-delay: 3.2s;
}
.illust .service-banner {
    background-color: var(--yellow);
    background-image: url(img/illust_back_img.png);
    background-position: left;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
}
.illust .service-banner img{
    content: "";
    position: absolute;
    object-fit: cover;
    animation: bgillust 6s linear infinite;
}
.illust .service-banner img:nth-child(1){
    top: 18px;
    left: clamp(13px ,calc(13px + calc(34px - 13px) * var(--calc-width-350)) ,34px);
}
.illust .service-banner img:nth-child(2){
    top: clamp(58px ,calc(58px + calc(90px - 58px) * var(--calc-width-350)) ,90px);
    left: clamp(42px ,calc(42px + calc(87px - 42px) * var(--calc-width-350)) ,87px);
    animation-delay: 2s;
}
.illust .service-banner img:nth-child(3){
    bottom: clamp(15px ,calc(15px + calc(19px - 15px) * var(--calc-width-350)) ,19px);
    right: clamp(14px ,calc(14px + calc(19px - 14px) * var(--calc-width-350)) ,19px);
    animation-delay: 4s;
}
.design, .web {
    margin-bottom: 48px;
}
.illust {
    margin-bottom: 40px;
}
.service .btn-green {
    width: 100%;
    height: 80px;
    margin: 0 auto;
}
.service .btn-green span::before {
    height: 700%;
}

@media(min-width:1401px),(min-width:701px) and (max-width:960px){
    .service {
        clip-path: polygon(0 100px, 0 100%, 100% calc(100% - 100px), 100% 0 ); 
        padding: 160px 0 200px 0;
    }
    .service h2{
        padding: 80px 0 68px 64px;
    }
    .service-banner, .service-text {
        width: 90%;
    }
    .design, .web {
        margin-bottom: 80px;
    }
    .service .btn-green {
        width: 90%;
        height: 120px;
    }
    .service .btn-green span::before {
        height: 850%;
    }
    .illust {
        margin-bottom: 80px;
    }
}
@media(min-width:961px) and (max-width:1400px){
    .service {
        padding: 120px 0 160px 0;
    }
    .service h2{
        padding: 44px 0 55px 64px;
    }
    .service-banner {
        margin-top: 0;
    }
    .design, .web, .illust {
        width: calc(100% - 128px);
        margin: 0 auto;
        margin-bottom: 48px
    }
    .service .btn-green{
        width: calc(100% - 128px);
        height: 120px;
    }
}
@media(min-width:1401px){
    /* .service {
        padding: 120px 0 160px 0;
    }
    .service h2{
        padding: 44px 0 55px 64px;
    }
    .service-banner {
        margin-top: 0;
    } */
    .design, .web, .illust {
        width: calc(100% - 128px);
        margin: 0 auto;
        margin-bottom: 80px
    }
    .service .btn-green{
        width: calc(100% - 128px);
        height: 120px;
    }
}
@keyframes bgdesign{
    0% {
        transform: scale(1) translate3d(0, 0, 0) rotate(0);
    }
    50%{
        transform: scale(1.1) translate3d(24px, 32px, 0) rotate(10deg);
    }
    100% {
        transform: scale(1) translate3d(0, 0, 0) rotate(0);
    }
}
@keyframes bgdesign2{
    0% {
        transform: scale(1) translate3d(0, 0, 0) rotate(0);
    }
    50%{
        transform: scale(1.1) translate3d(-8px, 64px, 0) rotate(-10deg);
    }
    100% {
        transform: scale(1) translate3d(0, 0, 0) rotate(0);
    }
}
@keyframes bgweb{
    0%{
        opacity: 0;
    }
    100% {
        
        opacity: 1;
    }
}
@keyframes bgillust{
    0% {
        transform: rotateY(0);
    }
    50% {
        transform: rotateY(180deg);
    }
    100% {
        transform: rotateY(0);
    }
}
/* ▲▲service▲▲ */
/* ▼▼schedule▼▼ */
.schedule {
    width: 100%;
    position: relative;
    padding-top: 40px;
    padding-bottom: 115px;
}
.schedule h2{
    padding: 50px 0 49px 64px;
    margin-bottom: 20px;
}
.schedule h2::before{
    content: "SCHEDULE";
    color: #9AE2D8;
}
.schedule dl{
    width: 82%;
    background-color: var(--white);
    font-size: clamp(1rem, 0.891rem + 0.5vw, 1.5rem);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: clamp(32px, calc(32px + calc(40px - 32px) * var(--calc-width-350)) ,40px)
            clamp(24px, calc(24px + calc(40px - 24px) * var(--calc-width-350)) ,40px);
    margin-left: 16px;
}
.schedule dt {
    width: 34%;
    font-weight: bold;
    text-align: center;
    position: relative;
}
.schedule dd{
    width: 66%;
    position: relative;
    padding-left: clamp(16px, 6% ,40px);
    padding-bottom: 56px;
}
.schedule dd:last-of-type {
    padding-bottom: 0;
}
.schedule dt::before, .schedule dd::before{
    content: "";
    width: 4px;
    height: 100%;
    background-color: var(--gray);
    position: absolute;
}
.schedule dt::before{
    top: 0;
    left: 0;
}
.schedule dd::before {
    top: 0;
    left: 0;
}
.schedule dl dt:nth-of-type(2n), .schedule dl dd:nth-of-type(2n){
    color: var(--black);
}
.schedule-img{
    width: 161px;
    height: calc(100% + 155px);
    background-image: url(img/schedule_img_pc.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: 100%;
    background-position-y: 100%;
    position: absolute;
    bottom: 0;
    right: -44px;
    padding-bottom: 40px;
}
@media(min-width:701px){
    .schedule dl{
        margin-left: 64px;
    }
    .schedule-img {
        width: 47%;
    }
}
@media(min-width:961px) and (max-width:1400px){
    .schedule dl{
        width: 70%;
        margin-left: 64px;
        padding: 40px;
    }
}
@media(min-width:1401px),(min-width:701px) and (max-width:960px){
    .schedule {
        padding-bottom: 80px;
    }
    .schedule h2{
        padding: 80px 0 80px 64px;
    }
    .schedule dl{
        width: 57%;
        padding: 56px;
    }
    .schedule-img {
        right: -24px;
        padding-bottom: 64px;
    }
}
@media(min-width:1401px){
    .schedule dt{
        width: 43%;
    }
    .schedule dd{
        width: 47%;
    }
}
/* ▲▲schedule▲▲ */
/* ▼▼flow▼▼ */
.flow {
    width: 100%;
    background-color: var(--green);
    clip-path: polygon(0 50px, 0 100%, 100% calc(100% - 50px), 100% 0 ); 
    text-align: center;
    padding: 72px 16px 80px 16px;
}
.flow h2{
    color: var(--white);
    text-align: left;
    padding: 50px 0 49px 64px;
}
.flow h2::before {
    content: "FLOW";
    color: #3CB1A4;
}
.step-list {
    width: 100%;
    background-color: var(--white);
    font-size: 15px;
    line-height: 2;
    position: relative;
    padding: clamp(24px,calc(24px + calc(calc(64px - 24px) * var(--calc-width-350))) , 64px) 
        clamp(16px, calc(16px + calc(calc(64px - 16px) * var(--calc-width-350))), 64px);
    padding-bottom: 0;
    margin: 0 auto;
    margin-bottom: 36px;
}
.flow h3{
    color: var(--black);
    font-size: clamp(1.25rem, 1.083rem + 0.76vw, 2rem);
    font-weight: bold;
    padding-bottom: 32px;
}
.step {
    color: var(--green);
    font-weight: bold;
    padding-bottom: 16px;
}
.step p:nth-child(1) {
    font-size: clamp(1.125rem, 0.93rem + 0.89vw, 2rem);
}
.step p:nth-child(2) {
    font-size: clamp(2.5rem, 2.166rem + 1.53vw, 4rem);
}
.step-list li > p, .tel p{
    color:  var(--black);
}
.flow-contact {
    padding-top: 32px;
}
.step-list button {
    width: 100%;
    max-width: 400px;
    height: 80px;
    margin: 0 auto;
    margin-bottom: 32px;
}
.tel img{
    width: 48px;
    height: 48px;
    vertical-align: bottom;
    margin-right: 8px;
}
.tel a {
    font-size: clamp(2rem, 1.889rem + 0.51vw, 2.5rem);
    font-weight: bold;
    vertical-align: top;
}
.tel p{
    font-size: 14px;
    padding-top: 8px;
}
.step-list li{
    position: relative;
    margin-bottom: 68px;
}
.step-list li::after {
    content: "";
    width: 100%;
    height: 50px;
    background-image: url(img/flow-vector.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    bottom: -64px;
    left: 50%;
    transform: translateX(-50%);
}
.step-list li:last-of-type {
    padding-bottom: 9px;
    margin-bottom: 0;
}
.step-list li:last-of-type:after {
    display: none;
}
.step-list::after {
    content: "";
    width: 100%;
    height: clamp(31px ,calc(31px + calc(calc(55px - 31px) * var(--calc-width-350))) ,55px);;
    background-color: var(--white);
    position: absolute;
    bottom: clamp(-54.5px, calc(-30.5px + calc(calc(-54.5px - -30.5px) * var(--calc-width-350))) , -30.5px);;
    left: 0;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
}
.step04 {
    width: 100%;
    background-color: var(--darkgreen);
    color: var(--white);
    font-size: 16px;
    position: relative;
    padding: clamp(25px ,calc(25px + calc(calc(49px - 25px) * var(--calc-width-350))) ,49px)
        clamp(24px ,calc(24px + calc(calc(64px - 24px) * var(--calc-width-350))) ,64px)
        clamp(48px ,calc(16px + calc(calc(64px - 16px) * var(--calc-width-350))) ,64px)
        clamp(24px ,calc(24px + calc(calc(64px - 24px) * var(--calc-width-350))) ,64px);
    margin: 0 auto;
}
.step04::before, .step04::after {
    content: "";
    width: 100%;
    height: clamp(31px ,calc(31px + calc(calc(55px - 31px) * var(--calc-width-350))) ,55px);
    background-color: var(--darkgreen);
    position: absolute;
    top: clamp(-54px, calc(-30px + calc(calc(-54px - -30px) * var(--calc-width-350))) , -30px);
    left: 0;
}
.step04::before{
    clip-path: polygon(0 0, 0 100% , 50% 100%);
}
.step04::after{
    clip-path: polygon(50% 100%, 100% 100%, 100% 0);
}
.step04 .step, .step04 h3 {
    color: var(--white);
}
@media(min-width:961px) and (max-width:1400px){
    .step-list {
        padding: 64px;
        padding-bottom: 0;
    }
    .step04 {
        padding: 49px 64px 40px 64px;
    }
}
@media(min-width:1401px),(min-width:701px) and (max-width:960px){
    .flow {
         clip-path: polygon(0 100px, 0 100%, 100% calc(100% - 100px), 100% 0 ); 
         padding: 160px 0;
    }
    .step-list li{
        margin-bottom: 130px;
    }
    .step-list button {
        width: 48%;
    }
    .step-list button span::before{
        height: 700%;
    }
}
@media(min-width:701px) and (max-width:960px){
    .step04 {
        padding: 64px;
    }
}
@media(min-width:701px){
    .step-list{
        width: calc(100% - 64px);
        font-size: 16px;
        margin: 0 auto;
        margin-top: 20px;
        margin-bottom: 72px
    }
    .step04 {
        width: calc(100% - 64px);
    }
    .step-list {
        line-height: 1;
    }
    .step-list li p{
        line-height: 2;
    }
    .step-list li::after{
        width: 107%;
        height: 72px;
    }
    .flow h3{
        line-height: 1.5;
    }
}
@media(min-width:1401px){
    .flow {
        padding: 158px 0 200px 0;
    }
    .flow h2{
        padding: 80px 0 80px 64px;
    }
    .step-list::before, .step-list::after {
        height: 80px;
        bottom: -79px;
    }
    .step-list {
        width: calc(100% - 128px);
        padding-bottom: 80px;
        margin-bottom: 90px;
    }
    .step-list button{
        width: 400px;
    }
    .step04 {
        width: calc(100% - 128px);
        padding-top: 80px;
    }
    .step04::before, .step04::after {
        height: 80px;
        top: -79px;
    }
}
/* ▲▲flow▲▲ */
/* ▼▼support▼▼ */
.support {
    width: 100%;
    text-align: left;
    padding: 24px 16px 42px 16px;
}
.support h2{
    padding: 45px 0 45px 0;
}
.support h2::before {
    content: "SUPPORT";
    color: #9AE2D8;
}
.support-text {
    width: 100%;
    color: var(--black);
    font-size: clamp(0.938rem, 0.924rem + 0.06vw, 1rem);
    line-height: 2;
    margin: 0 auto;
    margin-bottom: 24px;
}
.support-inner{
    width: 100%;
    display: grid;
    grid-template-columns: 31px auto;
    border:  1px solid var(--green);
    margin: 0 auto;
    margin-bottom: 40px;
}
.support-inner h3 {
    font-size: 20px;
    line-height: 1.5;
    grid-row: 1 / 2;
    grid-column: 1 / 3;
    background-color: var(--darkgreen);
    color: var(--white);
    padding: 16px;
}
.support-inner h4{
    font-size: 15px;
    letter-spacing: 5px;
    background-color: var(--white);
    text-align: center;
    writing-mode: vertical-rl;
    align-content: center;
    padding: 0 8px;
}
.support-inner ul {
    color: var(--black);
    font-size: 15px;
    list-style: disc;
    line-height: 32px;
    position: relative;
    padding: 16px;
    margin-left: 16px;
}
.support-inner ul li::marker {
    font-size: 10px;
}
.support-inner h4:first-of-type, .support-inner ul:first-of-type {
    border-bottom: 1px solid var(--green); 
}
.support-inner ul:first-of-type::after {
    content: "";
    width: 16px;
    height: 1px;
    background-color: var(--green);
    position: absolute;
    bottom: -1px;
    left: -16px;
}
.support-flow h3{
    width: 100%;
    font-size: 20px;
    margin: 0 auto;
    margin-bottom: 16px;
}
.support-flow-grid{
    width: 100%;
    color: var(--white);
    text-align: center;
    display: grid;
    grid-template-columns: 40px calc(100% - 112px) 40px;
    row-gap: 56px;
    column-gap: 16px;
    margin: 0 auto;
}
.support-flow-grid h4:first-of-type {
    font-size: 16px;
    background-color: var(--green);
    grid-row: 1 / 3;
    grid-column: 1 / 2;
    margin: 0 auto;
}
.support-flow-grid h4:nth-of-type(2){
    font-size: 16px;
    background-color: var(--darkgreen);
    grid-row: 3 / 4;
    grid-column: 1 / 2;
    margin: 0 auto;
}
.support-flow-grid h4:last-of-type {
    font-size: clamp(1rem, 0.944rem + 0.25vw, 1.25rem);
    color: var(--green);
    position: relative;
    grid-row: 2 / 4;
    grid-column: 3 / 4;
    margin: 0 auto;
}
.support-flow-grid h4:last-of-type::before{
    content: "";
    width: 40px;
    height: 100%;
    background-color: var(--white);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    clip-path: shape(
        from 0 0,
        line to 0 calc(100% - 24px),
        line to 50% 100%,
        line to 100% calc(100% - 24px),
        line to 100% 0,
        close
    );
}
.support-flow-grid h4{
    writing-mode: vertical-rl;
    padding: 0 12px;
}
.support-step:nth-of-type(1){
    grid-row: 1 / 2;
    grid-column: 2 / 3;
}
.support-step:nth-of-type(2){
    grid-row: 2 / 3;
    grid-column: 2 / 3;
}
.support-step:nth-of-type(3){
    grid-row: 3 / 4;
    grid-column: 2 / 3;
}
.support-step {
    background-color: var(--green);
    font-size: clamp(1rem, 0.944rem + 0.25vw, 1.25rem);
    font-weight: bold;
    position: relative;
    padding: 24px 0;
    margin-bottom: 12px;
}
.support-step h5 {
    font-size: clamp(2rem, 1.75rem + 1.14vw, 2.25rem);
    padding-bottom: 0;
    padding-top: 16px;
}
.support-step:first-of-type h5 {
    padding-bottom: 16px;
}
.support-step:last-of-type {
    background-color: var(--darkgreen);
}
.support-step:last-of-type p:last-of-type {
    font-size: clamp(0.938rem, 0.924rem + 0.06vw, 1rem);
    font-weight: normal;
    line-height: 2;
    padding: 8px 16px 0 16px;
}
.support-step::after {
    content: "";
    width: 120px;
    height: 30px;
    background-color: var(--green);
    position: absolute;
    bottom: -56px;
    left: 50%;
    transform: translateX(-50%);
    clip-path: polygon(0 0, 50% 100%, 100% 0);
}
.support-step:last-of-type::after {
    display: none;
}
@media(min-width:701px){
    .support {
        padding: 42px 0px 80px 0px;
    }
    .support h2{
        padding: 50px 0 49px 64px;
        margin-bottom: 20px;
    }
    .support-text {
        width: calc(100% - 128px);
        margin-bottom: 32px;
    }
    .support-inner {
        width: calc(100% - 128px);
        grid-template-columns:13% auto;
        margin-bottom: 80px;
    }
    .support-inner h3{
        font-size: 24px;
        text-align: center;
        padding: 16px 22px;
    }
    .support-inner h4{
        font-size: 20px;
        writing-mode: horizontal-tb;
        letter-spacing: 0;
        text-align: left;
        padding: 0 24px;
    }
    .support-inner ul{
        padding: 24px;
    }
    .support-step {
        padding: 40px 40px;
        margin-bottom: 0;
    }
    .support-flow{
        width: calc(100% - 128px);
        margin: 0 auto;
    }
    .support-flow h3{
        font-size: 36px;
    }
    .support-flow .support-text {
        width: 100%;
        margin-bottom: 40px;
    }
    .support-flow-grid {
        width: calc(100% - 128px);
        row-gap: 72px;
    }
    .support-step {
        font-size: 20px;
    }
    .support-step::after{
        width: 160px;
        height: 40px;
    }
}
@media(min-width:961px) and (max-width:1400px){
    .support {
        padding-top: 100px;
    }
    .support-inner {
        grid-template-columns: 19% auto;
    }
    .support-inner ul {
        margin-left: 24px;
    }
    .support-inner ul:first-of-type::after{
        width: 24px;
        left: -24px;
    }
}
@media(min-width:1401px){
    .support h2{
        padding: 80px 0 80px 64px;
    }
}

/* ▲▲support▲▲ */
/* ▼▼voice▼▼ */
.voice {
    width: 100%;
    background-color: var(--green);
    clip-path: polygon(0 50px, 0 100%, 100% calc(100% - 50px), 100% 0 ); 
    text-align: center;
    padding-top: 72px;
    padding-bottom: 80px;
}
.voice h2{
    color: var(--white);
    text-align: left;
    padding: 44px 0 55px 64px;
}
.voice h2::before {
    content: "VOICE";
    color: #3CB1A4;
}
.voice-tab input[type="radio"] {
    display: none;
}
.voice-tab-btn {
    display: flex;
    column-gap: 12px;
}
.voice-tab-btn label {
    background-color: #9AE2D8;
    padding: 24px 16px;
}
.voice-tab-btn label:hover {
    background-color: var(--white);
}
.voice-tab-btn label img{
    width: 64px;
    height: 64px;
}
.voice-tab-btn label p{
    font-size: clamp(1rem, 0.889rem + 0.51vw, 1.5rem);
    font-weight: bold;
    margin-top: 8px;
}
.voice-tab-content{
    background-color: var(--white);
    color: var(--black);
    padding: 32px 16px;
    margin-bottom: 24px;
}
.content {
    display: none;
    text-align: left;
}
.content h3{
    color: var(--green);
    font-size: clamp(1.25rem, 1.194rem + 0.25vw, 1.5rem);
    font-weight: bold;
    padding-bottom: 16px;
}
.content p{
    font-size: 15px;
    line-height: 2;
    padding-bottom: 32px;
}
.content p:last-of-type{
    padding-bottom: 0;
}
#tab1:checked ~ .voice-tab-content #content1, 
#tab2:checked ~ .voice-tab-content #content2 {
    display: block;
}
#tab1:checked ~ .voice-tab-btn label[for="tab1"],
#tab2:checked ~ .voice-tab-btn label[for="tab2"] {
    background-color: var(--white);
}
.voice .btn-green {
    width: calc(100% - 32px);
    height: 80px;
    margin: 0 auto;
}
@media(min-width:701px){
    .voice {
        clip-path: polygon(0 100px, 0 100%, 100% calc(100% - 100px), 100% 0 );
        padding-top: 160px;
        padding-bottom: 160px;
    }
    .voice-tab-btn {
        column-gap: 32px;
    }
    .voice-tab-btn label{
        padding: 32px 24px;
    }
    .voice-tab-btn label img{
        width: 104px;
        height: 104px;
    }
    .voice-tab-content {
        padding: 64px;
        margin-bottom: 80px;
    }
    .content h3{
        padding-bottom: 24px;
    }
    .content p{
        font-size: 16px;
        padding-bottom: 56px;
    }
    .voice .btn-green {
        width: 82%;
        height: 120px;
    }
}
@media(min-width:961px) and (max-width: 1400px){
    .voice h2 {
        margin-bottom: 20px;
    }
}
@media(min-width:1401px),(min-width:701px) and (max-width:960px){
    .voice-tab-btn label{
        width: calc(calc(100% - 32px) / 2);
        display: flex;
        align-items: center;
        column-gap: 24px;
    }
    .voice .btn-green {
        width: 86%;
    }
    .voice .btn-green span::before{
        height: 800%;
    }
}
@media(min-width:1401px){
    .voice {
        padding-top: 158px;
        padding-bottom: 200px;
    }
    .voice h2{
        padding: 80px 0 80px 64px;
    }
    .voice-tab {
        margin-top: 20px;
    }
}
/* ▲▲voice▲▲ */
/* ▼▼FAQ▼▼ */
.faq{
    width: 100%;
    text-align: left;
    padding-top: 24px;
    padding-bottom: 40px;
}
.faq h2{
    padding: 24px 0 16px 16px;
}
.faq h2::before{
    content: "FAQ";
    color: #9AE2D8;
}

.faq-inner {
    width: 100%;
    padding: 42px 16px 0 16px;
    margin: 0 auto;
}
.faq-inner li:nth-of-type(n+2){
    padding-top: 24px;
}

.faq-ac-header {
    width: 100%;
    background-color: var(--green);
    position: relative;
    cursor: pointer;
    transition: .2s;
    padding: 16px 24px;
}
.faq-box {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    right: 4px;
}
.faq-box::before, .faq-box::after {
    content: "";
    width: 10px;
    height: 2px;
    background-color: var(--white);
    position: absolute;
    top: 0;
    bottom: 0;
}
.faq-box::before {
    left: 12px;
    transform: rotate(45deg);
}
.faq-box::after {
    left: 18px;
    transform: rotate(-45deg);
}
.faq-ac-header.open .faq-box::before {
    transform: rotate(-45deg);
}
.faq-ac-header.open .faq-box::after {
    transform: rotate(45deg);
}

.faq-ac-body {
    display: none;
    width: 100%;
    background-color: var(--white);
    padding: 16px 24px;
}
.faq-text-q {
    color: var(--white);
    font-size: clamp(1rem, 0.944rem + 0.25vw, 1.25rem);
    font-weight: bold;
    font-family: "Inter";
    padding-left: 40px;
    padding-right: 12px;
}
.faq-text-a {
    color: var(--green);
    font-size: clamp(0.938rem, 0.924rem + 0.06vw, 1rem);
    line-height: 1.5;
    font-family: "Inter";
    padding-left: 40px;
}
.faq-ac-headinner{
    position: relative;
}
.faq-ac-headinner::before{
    content: "Q";
    color: var(--white);
    font-size: 20px;
    font-weight: bold;
    font-family: "Inter";
    position: absolute;
    top: 0;
    left: 0;
}
.faq-ac-bodyinner{
    position: relative;
}
.faq-ac-bodyinner::before{
    content: "A";
    color: var(--green);
    font-size: 20px;
    font-weight: bold;
    font-family: "Inter";
    position: absolute;
    top: 0;
    left: 0;
}
@media(min-width:701px){
    .faq{
        padding-top: 40px;
        padding-bottom: 80px;
    }
    .faq h2{
        padding: 80px 0 80px 64px;
    }
    .faq-inner{
        width: calc(100% - 128px);
        padding: 20px 0 0 0;
        margin: 0 auto;
    }
    .faq-ac-headinner::before, .faq-ac-bodyinner::before {
        font-size: 32px;
        top: -6px;
        left: 0;
    }
    .faq-text-q {
        font-size: 20px;
    }
    .faq-text-a {
        font-size: 16px;
    }
}
@media(min-width:961px) and (max-width: 1400px) {
    .faq {
        padding-bottom: 56px;
    }
    .faq h2{
        padding: 50px 0 49px 64px;
    }
}
/* ▲▲FAQ▲▲ */
/* ▼▼ACCESS▼▼ */
.access {
    width: 100%;
    background-color: var(--green);
    color: var(--white);
    clip-path: polygon(0 50px, 0 100%, 100% calc(100% - 50px), 100% 0 ); 
    text-align: center;
    position: relative;
    z-index: 1;
    padding-top: 72px;
    padding-bottom: 126px;
}
.access h2{
    color: var(--white);
    text-align: left;
    padding: 24px 0 18px 16px;
    margin-bottom: 34px
}
.access h2::before {
    content: "ACCESS";
}
.map iframe {
    width: 100%;
    height: 216px;
    margin-bottom: 25px;
}
.address {
    font-size: clamp(0.938rem, 0.868rem + 0.32vw, 1.25rem);
    font-weight: normal;
    line-height: 1.5;
    padding: 0 64px;
    margin-bottom: 32px;
}
.access .tel {
    margin-bottom: 32px;
}
.access .tel p{
    color: var(--white);
    font-size: 14px;
}
.access-img {
    position: relative;
}
.access-img img{
    height: 147px;
    position: absolute;
    z-index: 2;
}
.access-img-1{
    top: -152px;
    left: 16px;
}
.access-img-2{
    top: -152px;
    right: 16px;
}

.access-img-middle {
    display: none;
}
.access-img-bottom {
    display: block;
}
.directions {
    width: 100%;
    border-top: 1px solid var(--white);
    border-bottom:  1px solid var(--white);
    padding: 32px 0;
    margin: 0 auto;
}
.train-inner{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 12px;
    margin: 0 auto;
    margin-bottom: 16px;
}
.train-inner img{
    width: 20px;
    height: 25px;
}
.train-inner p{
    font-size: 24px;
    font-weight: bold;
}
.station {
    display: flex;
    flex-direction: column;
    margin: 0 16px;
}
.station-name {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 8px;
}
.route {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 12px;
}
.on-foot {
    font-size: 16px;
    font-weight: normal;
}
.station li:nth-child(1){
    padding-bottom: 24px;
}
.station li:last-child{
    padding-top: 24px;
}
.station li:nth-child(n+2){
    border-top: 1px solid var(--white);
    border-left: none
}
@media(min-width:701px){
    .access {
        clip-path: polygon(0 100px, 0 100%, 100% calc(100% - 100px), 100% 0 ); 
        padding-top: 120px;
        padding-bottom: 160px;
    }
    .access h2{
        padding: 80px 0 68px 64px;
    }
    .map iframe {
        height: 594px;
    }
    .address {
        font-size: 20px;
        margin-bottom: 64px;
    }
    .access .tel {
        padding: 0 64px;
        margin-bottom: 64px;
    }
    .access .tel P{
        font-size: 16px;
    }
    .access .tel a{
        font-size: 40px;
    }
    .access-img img{
        height: 182px;
    }
    .access-img-middle {
        display: block;
    }
    .access-img-bottom {
        display: none;
    }
    .access-img-1{
        bottom: -16px;
        left: 8px;
    }
    .access-img-2{
        bottom: -16px;
        right: 8px;
    }
    .directions {
        padding: 40px 0;
    }
    .train-inner {
         margin-bottom: 41px;
    }
    .train-inner img{
        width: 28px;
        height: 34px;
    }
    .train-inner p{
        font-size: 32px;
    }
    .station-name {
        font-size: 24px;
    }
    .route {
        font-size: 16px;
        margin-bottom: 24px;
    }
    .on-foot{
        font-size: 24px;
    }
    .station {
        margin: 0;
    }
    .station li:last-child{
        padding-top: 0;
    }
    .station li:nth-child(n+2){
        border-top: none;
        border-left: 1px solid var(--white);
    }
}
@media(min-width:1401px),(min-width:701px) and (max-width:960px){
    .directions {
        width: 87%;
    }
    .station {
        flex-direction: row;
        justify-content: center;
    }
    .station li:nth-child(1) {
        padding-right: 41px;
    }
    .station li:nth-child(n+2) {
        padding-left: 41px;
    }
    .station-name {
        font-size: 24px;
    }
}
@media(min-width:961px) and (max-width:1400px){
    .access h2{
        padding: 44px 0 54px 64px;
        margin-bottom: 20px;
    }
    .access iframe {
        height: 434px;
        margin-bottom: 58px;
    }
    .access .tel {
        padding: 0 124px;
    }
    .station {
        flex-direction: row;
        justify-content: center;
    }
    .station li:nth-child(1) {
        padding-right: 21px;
    }
    .station li:nth-child(n+2) {
        padding-left: 21px;
    }
    .directions {
        width: 82%;
    }
}
@media(min-width:1401px){
    .access {
        padding-top: 160px;
        padding-bottom: 200px;
    }
    .access h2{
        margin-bottom: 26px;
    }
    .access-img img{
        height: 242px;
    }
}
/* ▲▲ACCESS▲▲ */
/* ▼▼MESSAGE▼▼ */
.message {
    padding-top: 40px;
    position: relative;
    z-index: 2;
}
.message h2{
    padding: 24px 0 16px 16px;
    margin-bottom: 24px;
}
.message h2::before {
    content: "MESSAGE";
    color: #9AE2D8;
}
.msg-container {
    width: 100%;
    position: relative;
    padding: 0 16px;
    margin: 0 auto;
}

.msg-list {
    display: flex;
    align-items: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-snap-stop: always;
    scroll-behavior: smooth;
    scroll-marker-group: before;
    scrollbar-width: none;
    scroll-snap-align: center;
    grid-area: item;
}
.msg-list::scroll-marker-group {
    width: 100%;
    height: clamp(144px ,calc(144px + calc(calc(280px - 144px) * var(--calc-width-350))) ,280px);
    display: flex;
    flex-wrap: wrap;
    column-gap: 16px;
    row-gap: 16px;
    margin-bottom: 32px;
}
@media(min-width:850px) and (max-width:960px){
    .msg-list::scroll-marker-group{
        height: 140px;
    }
}
@media(min-width:961px) and (max-width:1000px){
    .msg-list::scroll-marker-group{
        height: calc(140px * 3);
    }
}
@media(min-width:1707px){
    .msg-list::scroll-marker-group{
        height: 140px;
    }
}
.msg-item {
    min-width: 100%;
    background-color: var(--white);
    scroll-snap-align: center;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 16px;
}
.msg-item::scroll-marker {
    content: "";
    display: block;
    width: clamp(64px ,calc(64px + calc(calc(124px - 64px) * var(--calc-width-350))) ,124px);
    height: clamp(64px ,calc(64px + calc(calc(124px - 64px) * var(--calc-width-350))) ,124px);
    background-color: var(--white);
    background-image: var(--msg_img);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    opacity: 0.7;
    clip-path: circle();
}
.msg-item::scroll-marker:target-current {
    opacity: 1;
}
.msg-item img {
    display: block;
    width: 104px;
    object-fit: contain;
    margin: 0 auto;
}
.msg-text p:first-of-type {
    color: var(--black);
    font-size:  clamp(0.938rem, 0.924rem + 0.06vw, 1rem);
    line-height: 1.5;
    padding: 32px 0 20px 0;
}
.msg-text p:nth-of-type(2){
    font-size: clamp(0.875rem, 0.847rem + 0.13vw, 1rem);
    text-align: right;
    padding-bottom: 20px;
}
.msg-text p:nth-of-type(3){
    font-size:  clamp(0.938rem, 0.924rem + 0.06vw, 1rem);
    font-weight: bold;
    text-align: right;
}

@media(min-width:701px){
    .message h2{
        padding: 80px 0 68px 64px;
    }
    .msg-container {
        width: 82%;
        padding: 0;
        margin: 0 auto;
    }
    .msg-list::scroll-marker-group{
        width: 100%;
    }
    .msg-item {
        padding: 32px;
    }
    .msg-item::scroll-marker{
        display: block;
        width: 124px;
        height: 124px;
    }
    .msg-item img{
        width: 160px;
    }
    .msg-text p:first-of-type{
        font-size:16px;
    }
    .msg-text p:nth-of-type(2){
        font-size: 16px;
    }
    .msg-text p:nth-of-type(3){
        font-size: 16px;
    }
}
@media(min-width:1401px),(min-width:701px) and (max-width:960px){
    .msg-item {
        flex-direction: row;
    }
    .msg-item img{
        margin: 32px;
    }
}
@media(min-width:961px) and (max-width:1400px){
    .message h2{
        padding: 44px 0 43px 64px;
    }
}
@media(min-width:1401px){
    .message {
        padding-bottom: 20px;
    }
}
/* ▲▲MESSAGE▲▲ */
/* ▼▼OFFICE▼▼ */
.office {
    width: 100%;
    background-color: var(--green);
    color: var(--white);
    clip-path: polygon(0 50px, 0 100%, 100% calc(100% - 50px), 100% 0 ); 
    padding-top: 72px;
    padding-bottom: 70px;
}
.office h2{
    padding: 24px 0 18px 16px;
}
.office h2::before{
    content: "OFFICE";
}
.office-slick {
    width: 100%;
    padding-top: 20px;
}
.office-slick li{
    /* height: 200px; */
    margin: 0 20px;
}
.office-slick img{
    /* width: clamp(192px,calc(192px + calc(calc(400px - 192px) * var(--calc-width-350))) ,400px);
    height: clamp(96px,calc(96px + calc(calc(200px - 96px) * var(--calc-width-350))) ,200px); */
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
}
@media(min-width:701px){
    .office {
        clip-path: polygon(0 100px, 0 100%, 100% calc(100% - 100px), 100% 0 ); 
        padding-top: 120px;
        padding-bottom: 160px;
    }
    .office h2{
        padding: 80px 80px 64px;
    }
    /* .office-slick img{
        width: 400px;
        height: 200px;
    } */
}
@media(min-width:961px) and (max-width:1400px){
    .office h2{
        padding: 44px 0 43px 64px;
    }
}
@media(min-width:1401px){
    .office {
        padding-top: 160px;
        padding-bottom: 200px;
    }
}
/* ▲▲OFFICE▲▲ */
/* ▼▼CONTACT▼▼ */
.contact {
    width: 100%;
    height: 560px;
    /* height: clamp(685px, calc(685px + calc(calc(855px - 685px) * var(--calc-width-350))) ,855px); */
    position: relative;
    padding-top: 24px;
    padding-bottom: 40px;
}
.contact h2{
    padding: 24px 0 18px 16px;
}
.contact h2::before{
    content: "CONTACT";
    color: #9AE2D8;
}
.contact .mail {
    width: 90%;
    height: clamp(222px, calc(222px + calc(calc(320px - 222px) * var(--calc-width-350))) ,320px);
    background-color: var(--white);
    text-align: center;
    align-content: center;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 100px;
    /* top: clamp(125px, calc(125px + calc(calc(217px - 125px) * var(--calc-width-350))) ,217px); */
    clip-path: polygon(
        0 clamp(45px, calc(45px + calc(calc(82px - 45px) * var(--calc-width-350))) ,82px), 
        0 100%, 
        100% calc(100% - clamp(45px, calc(45px + calc(calc(82px - 45px) * var(--calc-width-350))) ,82px)), 
        100% 0 
        );
    padding: 64px 0 69px 0;
} 
.contact .tel {
    width: 90%;
    height: clamp(222px, calc(222px + calc(calc(320px - 222px) * var(--calc-width-350))) ,320px);
    background-color: var(--white);
    text-align: center;
    align-content: center;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 300px;
    /* top: clamp(323px, calc(323px + calc(calc(479px - 323px) * var(--calc-width-350))) ,479px); */
    clip-path: polygon(
        0 clamp(45px, calc(45px + calc(calc(82px - 45px) * var(--calc-width-350))) ,82px), 
        0 100%, 
        100% calc(100% - clamp(45px, calc(45px + calc(calc(82px - 45px) * var(--calc-width-350))) ,82px)), 
        100% 0 
        );
    padding: 58px 0 60px 0;
} 
.contact .mail img{
    display: block;
    width: 56px;
    height: 56px;
    margin: 0 auto;
}
.contact .mail {
    font-size: clamp(1.25rem, 1.027rem + 1.02vw, 2.25rem);
    font-weight: bold;
}
.contact .tel img{
    width: 48px;
    height: 48px;
    vertical-align: middle;
}
.contact .tel {
    font-size: clamp(2rem, 1.554rem + 2.04vw, 4rem);
    font-weight: bold;
}
.contact .tel p:first-of-type {
    font-size: clamp(1.25rem, 1.194rem + 0.25vw, 1.5rem);
    font-weight: bold;
}
.contact .tel p:nth-of-type(2){
    display: inline;
    color: var(--green);
    font-size: clamp(2rem, 1.554rem + 2.04vw, 4rem);
    font-weight: bold;
    vertical-align: middle;
}
.contact .tel p:nth-of-type(3){
    font-size: clamp(0.875rem, 0.847rem + 0.13vw, 1rem);
    font-weight: normal;
}
.contact-img {
    position: relative;
    z-index: 1;
}
.contact .mail:hover::before, .contact .tel:hover::before{
    content: "";
    width: 100%;
    height: 100%;
    background-image: url(img/contact-hover-img1.png);
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
 }
 .contact .tel:hover::before{
    background-image: url(img/contact-hover-img2.png);
 }
 .contact .mail:hover::after, .contact .tel:hover::after{
    content: "";
    width: 100%;
    height: 100%;
    background-color: var(--darkgreen);
    mix-blend-mode: multiply;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}
.contact .mail .img-green {
    display: block;
}
.contact .tel .img-green{
    display: inline;
}
.contact .mail:hover .img-green, .contact .tel:hover .img-green {
    display: none;
}
.contact .mail .img-white, .contact .tel .img-white {
    display: none;
}
.contact .mail:hover .img-white{
    display: block;
}
.contact .tel:hover .img-white {
    display: inline;
}
.contact .mail:hover p, .contact .tel:hover p {
    color: var(--white);
}
@media(min-width:701px){
    .contact {
        padding-top: 40px;
        padding-bottom: 56px;
    }
    .contact h2{
        padding: 80px 0 68px 64px;
    }
    .contact .mail{
        width: 82%;
    }
    .contact .tel{
        width: 82%;
    }
}
@media(min-width:961px) and (max-width:1400px){
    .contact {
        height: 855px;
    }
    .contact h2{
        padding: 44px 0 55px 64px;
    }
    .contact .mail {
        top: 177px;
    }
    .contact .tel {
        top: 477px;
    }
    .contact .mail, .contact .tel {
        height: 320px;
        clip-path: polygon(0 82px, 0 100%, 100% calc(100% - 82px), 100% 0 );
    }
}
@media(min-width:1401px),(min-width:701px) and (max-width:960px){
    .contact {
        height: 1087px;
    }
    .contact .mail, .contact .tel {
        height: 400px;
        clip-path: polygon(0 120px, 0 100%, 100% calc(100% - 120px), 100% 0 ); 
    }
    .contact .mail{
        top: 250px;
    }
    .contact .tel {
        top: 567px;
    }
    .contact .mail img{
        width: 120px;
        height: 120px;
    }
    .contact .mail{
        font-size: 36px;
    }
    .contact .tel img{
        width: 72px;
        height: 72px;
    }
    .contact .tel p:first-of-type {
        font-size: 24px;
    }
    .contact .tel p:nth-of-type(2){
        font-size: 64px;
    }
    .contact .tel p:nth-of-type(3){
        font-size: 16px;
    }
}
@media(min-width:1401px){
    .contact {
        padding-bottom: 80px;
    }
}
/* ▲▲CONTACT▲▲ */
/* ▲▲index▲▲ */
/* ▼▼サイドバー▼▼ */
.sub-side-bar{
    width: 100%;
}
.sub-side-bar .kv-wrap{
    height: 256px;
}
.sub-side-bar .kv-text {
    width: 100%;
    top: 120px;
    text-align: center;
}
.sub-side-bar h2{
    color: var(--darkgreen);
    font-size: 32px;
}
.breadcrumbs {
    color: var(--black);
    font-size: 10px;
    position: absolute;
    bottom: 18px;
    left: 16px;
    display: flex;
    list-style: none;
}
.breadcrumbs li:last-of-type {
    font-weight: bold;
}
.breadcrumbs li:not(:last-of-type)::after{
    content: "/";
    color: var(--black);
    margin: 0 4px;
}
@keyframes kv-man-animation-sub {
    0% {
        transform: translate(0, -0.5vw);
    }
    100% {
        transform: translate(0, 0.5vw);
    }
}
@media(min-width:961px){
    .sub-side-bar{
        width: 50%;
        height: 100vh;
    }
    .sub-side-bar .kv-text{
        text-align: left;
        top: 50%;
        left: clamp(16px, calc(16px + calc(calc(64px - 16px) * var(--calc-width-961))) ,64px);
        transform: translateY(-50%);
    }
    .sub-side-bar h2{
        font-size: 64px;
    }
    .sub-side-bar .kv-wrap{
        width: 50%;
        height: 100vh;
        position: fixed;
    }
    .breadcrumbs{
        font-size: 16px;
    }
}
@media(min-width:961px) and (max-width:1400px) {
    .sub-side-bar .kv-step {
        right: 31px;
        left: auto;
        transform: translateX(0);
    }
    .sub-side-bar .kv-step img{
        width: 60px;
    }
    .sub-side-bar .kv-man {
        top: auto;
        bottom: 64px;
        right: 30px;
        left: auto;
        transform: translateX(0);
        animation: 1.8s cubic-bezier(0.53, 0.03, 0.44, 1) 0s infinite alternate-reverse none running kv-man-animation-sub;
    }
    .sub-side-bar .kv-man img:first-child{
        width: 72px;
        height: auto;
    }
    .sub-side-bar .kv-man img:nth-child(2){
        width: 62px;
        height: auto;
    }
    .breadcrumbs {
        bottom: 32px;
        left: 64px;
    }
}
@media(min-width:1401px){
    .sub-side-bar .kv-step {
        right: 32px;
        left: auto;
        transform: translateX(0);
    }
    .sub-side-bar .kv-step img{
        width: 100px;
    }
    .sub-side-bar .kv-man {
        top: auto;
        bottom: 122px;
        right: 50px;
        left: auto;
        transform: translateX(0);
        animation: 1.8s cubic-bezier(0.53, 0.03, 0.44, 1) 0s infinite alternate-reverse none running kv-man-animation-sub;
    }
    .sub-side-bar .kv-man img:first-child{
        width: 118px;
        height: auto;
    }
    .sub-side-bar .kv-man img:nth-child(2){
        width: 104px;
        height: auto;
    }
    .breadcrumbs {
        bottom: 36px;
        left: 64px;
    }
}
/* ▲▲サイドバー▲▲ */
/* ▼▼ページネーション▼▼ */

.pagenation {
    display: flex;
    justify-content: space-between;
    padding-top: 40px;
}
.pagenation-pages {
    display: flex;
    justify-content: center;
    column-gap: 16px;
}
.show {
    visibility: visible;
}
.hidden {
    visibility: hidden;
}
.prev, .next, .btn-page{
    width: 40px;
    height: 40px;
    color: var(--white);
    background-color: var(--green);
    font-size: 16px;
    font-weight: normal;
    border: 1px solid var(--white);
    position: relative;
    padding: 0;
}
.pagenation a{
    display: block;
    width: 100%;
    height: 100%;
    align-content: center;
}
.prev:hover, .next:hover, .btn-page:hover, .current{
    color: var(--green);
    background-color: var(--white);
}
.prev::before, .next::before {
    content: "";
    width: 12px;
    height: 1px;
    border-radius: 50%;
    background-color: var(--white);
    position: absolute;
    top: calc(50% - 5px);
    left: 0;
    right: 0;
    margin: auto;
}
.prev::after, .next::after {
    content: "";
    width: 12px;
    height: 1px;
    border-radius: 50%;
    background-color: var(--white);
    position: absolute;
    bottom: calc(50% - 5px);
    left: 0;
    right: 0;
    margin: auto;
}
.prev::before, .next::after{
    transform: rotate(-45deg);
}
.prev::after, .next::before {
    transform: rotate(45deg);
}
.prev:hover::before, .prev:hover::after, .next:hover::before, .next:hover::after{
    background-color: var(--green);
}
@media(min-width:961px){
    .pagenation-pages {
        column-gap: 40px;
    }
    .prev, .next, .btn-page{
        width: 64px;
        height: 64px;
        font-size: 24px;
        border: 2px solid var(--white);
    }
    .prev::before, .next::before{
        width: 18px;
        height: 2px;
        top: calc(50% - 7px);
    }
    .prev::after, .next::after{
        width: 18px;
        height: 2px;
        bottom: calc(50% - 7px);
    }
    .pagenation {
        padding-top: 80px;
    }
}
@media(min-width:1401px){

}
/* ▲▲ページネーション▲▲ */
/* ▼▼利用者さんの声▼▼ */
.content-wrap .voice-single ul{
    width: 82%;
    margin: 0 auto;
    margin-top: clamp(40px, calc(40px + calc(calc(120px - 40px) * var(--calc-width-350))), 120px);
    margin-bottom: 40px;
}
.content-wrap .voice-single ul li{
    background-color: var(--white);
    margin-bottom: clamp(40px, calc(40px + calc(calc(64px - 40px) * var(--calc-width-350))), 64px);
}
.content-wrap .voice-single ul li:last-of-type{
    margin-bottom: 0;
}
.content-wrap .voice-single ul li .voice-img-human{
    font-size: clamp(1.25rem, 1rem + 1.14vw, 1.5rem);
    font-weight: bold;
    display: flex;
    column-gap: 24px;
    align-items: center;
    border-bottom: 1px solid var(--green);
    padding: clamp(16px, calc(16px + calc(calc(32px - 16px) * var(--calc-width-350))), 32px)
        clamp(16px, calc(16px + calc(calc(64px - 16px) * var(--calc-width-350))), 64px);
}
.content-wrap .voice-single ul li .voice-img-human img{
    width: clamp(64px, calc(64px + calc(calc(104px - 64px) * var(--calc-width-350))), 104px);
}
.content-wrap .voice-single ul li .voice-content {
    padding: clamp(32px, calc(32px + calc(calc(64px - 32px) * var(--calc-width-350))), 64px)
        clamp(16px, calc(16px + calc(calc(64px - 16px) * var(--calc-width-350))), 64px);
}
.content-wrap .voice-single ul li .voice-content h3{
    padding-top: clamp(32px, calc(32px + calc(calc(64px - 32px) * var(--calc-width-350))), 64px);
    padding-bottom: clamp(16px, calc(16px + calc(calc(24px - 16px) * var(--calc-width-350))), 24px);
}
.content-wrap .voice-single ul li .voice-content h3:first-of-type {
    padding-top: 0;
}
.content-wrap .voice-single ul li .voice-content p{
    color: var(--black);
}
/* ▲▲利用者さんの声▲▲ */
/* ▼▼求人一覧▼▼ */
.recruit-single ul{
    margin: 40px
        clamp(8px, calc(8px + calc(calc(16px - 8px) * var(--calc-width-350))) ,16px) 
        43px 
        clamp(8px, calc(8px + calc(calc(16px - 8px) * var(--calc-width-350))) ,16px);
}
.recruit .icon {
    width: 72px;
    height: 36px;
    font-size: 14px;
    font-weight: bold;
    padding: 8px;
}
.available .icon, .available .pdf {
    background-color: var(--red);
}
.not-available .icon, .not-available .pdf{
    background-color: var(--green);
}
.recruit{
    color: var(--green);
    font-size: 14px;
    font-weight: bold;
    border-top: 1px solid var(--green);
    display: flex;
    flex-direction: column;
}
.recruit:not(:last-of-type){
    margin-bottom: 40px;
}
.job-number {
    display: flex;
    font-size: 14px;
    column-gap: 14px;
    margin-top: 16px;
}
.recruit h3{
    color: var(--black);
    font-size: 20px;
    margin-top: 8px;
    margin-bottom: 16px;
}
.job-date {
    display: flex;
    align-items: center;
    column-gap: 8px;
    margin-top: 8px;
}
.job-date img{
    width: 24px;
    height: 24px;
}
.pdf {
    color: var(--white);
    font-size: 16px;
    text-align: center;
    padding: 16px;
    margin-top: 24px;
}
.pdf .pdf-item{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 8px;
}
.pdf img{
    width: 24px;
    height: 24px;
}
@media(min-width:961px){
    .recruit{
        flex-direction: row;
        justify-content: space-between;
    }
    .recruit-single ul {
        margin: 120px 64px 40px 64px;
    }
    .recruit {
        font-size: 16px;
    }
    .recruit h3{
        font-size: 32px;
        margin-bottom: 24px;
    }
    .pdf {
        font-size: 24px;
        margin-top: 0;
    }
    .pdf .pdf-item{
        flex-direction: column;
        row-gap: 8px;
    }
    .pdf img{
        width: 40px;
        height: 40px;
    }
}
/* ▲▲求人一覧▲▲ */
/* ▼▼スコア表▼▼ */
.score-wrap {
    color: var(--white);
    padding: 40px 16px;
}
.score-wrap .pdf-item{
    font-size: 15px;
    font-weight: bold;
    background-color: var(--green);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
}
.score-item {
    display: flex;
    column-gap: 16px;
    align-items: center;
}
.score-item img{
    width: 56px;
    height: 56px;
    background-color: var(--white);
    clip-path: circle();
    object-fit: contain;
    padding: 12px;
}
.checkbox {
    width: 16px;
    height: 16px;
}
.score-wrap ul li:not(:last-of-type){
    margin-bottom: 16px;
}
@media(min-width:961px){
    .score-wrap {
        width: 50%;
        padding: 120px 64px 40px 64px;
    }
    .score-wrap .pdf-item{
        font-size: 32px;
        padding: 32px 24px;
    }
    .score-item {
        column-gap: 24px;
    }
    .score-item img{
        width: 104px;
        height: 104px;
    }
    .checkbox {
        width: 32px;
        height: 32px;
    }
}
@media(min-width:1401px){
    .score-item img{
        width: 120px;
        height: 120px;
    }
}
/* ▲▲スコア表▲▲ */
/* ▼▼制作実績詳細▼▼ */
.work-single-wrap {
    font-size: 15px;
    color: var(--white);
    background-color: var(--green);
    padding: 40px 16px 44px 16px;
}
.work-single-wrap .meta {
    display: flex;
    align-items: center;
    column-gap: 8px;
    margin-bottom: 16px;
}
.work-single-wrap .meta time{
    font-size: 14px;
}
.work-single-wrap .meta .icon{
    width: fit-content;
    font-size: 10px;
}
.work-single-wrap .meta .icon-design{
    background-color: var(--red);
}
.work-single-wrap .meta .icon-illust{
    background-color: var(--yellow);
}
.work-single-wrap .meta .icon-web{
    background-color: var(--darkgreen);
}
.work-single-wrap h3{
    font-size: 34px;
}
.work-single-wrap .thumbnail {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-bottom: 1px solid var(--white);
    padding: 40px 0;
} 
.work-single-wrap .thumbnail img{
    height: auto;
}
.work-single-wrap p{
    line-height: 2;
    padding: 40px 0;
}
.work-single-wrap .btn-green span::before {
    height: 900%;
}
.work-detail-img{
    width: 100%;
    background-color: var(--white);
    display: flex;
    column-gap: 16px;
    padding: 16px;
    margin-bottom: 40px;
}
.work-detail-img li{
    width: 50%;
}
.work-detail-img img{
    width: 100%;
    object-fit: contain;
}
.work-detail-text {
    color: var(--black);
    background-color: var(--white);
    padding: 16px 24px;
    margin-bottom: 40px;
}
.work-detail-text dt{
    font-weight: bold;
    padding-bottom: 8px;
}
.work-detail-text dd{
    position: relative;
    padding-bottom: 16px;
}
.work-detail-text dd::after{
    content: "";
    width: 100%;
    height: 1px;
    background-color: var(--green);
    position: absolute;
    bottom: 0;
    left: 0;
}
.work-detail-text dd:not(:last-of-type){
    margin-bottom: 16px;
}
.work-single-wrap .btn-green{
    width: 100%;
}
@media(min-width:701px){
    .work-single-wrap .btn-green span::before {
        height: 1350%;
    }
}
@media(min-width:961px){
    .work-single-wrap {
        width: 50%;
        font-size: 16px;
        padding: 120px 64px 40px 64px;
    }
    .work-single-wrap .meta time{
        font-size: 16px;
    }
    .work-single-wrap .meta .icon {
        font-size: 12px;
    }
    .work-single-wrap h3{
        font-size: 48px;
    }
    .work-single-wrap .thumbnail {
        padding: 64px 0 80px 0;
    }
    .work-single-wrap p{
        padding: 80px 0;
    }
    .work-detail-img {
        column-gap: 24px;
        padding: 40px 42px;
        margin-bottom: 80px;
    }
    .work-detail-img li{
        width: 50%;
    }
    .work-detail-text {
        display: grid;
        grid-template-columns: 80px auto;
        column-gap: 16px;
        padding: 40px 24px;
        margin-bottom: 80px;
    }
    .work-detail-text dd{
        padding-bottom: 24px;
    }
    .work-detail-text dd:not(:last-of-type){
        margin-bottom: 24px;
    }
    .work-detail-text dd::after{
        width: calc(100% + 96px);
        left: calc(-96px);
    }
    .work-single-wrap .btn-green {
        height: 120px;
    }
    .work-single-wrap button span::before {
        height: 1100%;
    }
}
@media(min-width:1401px){
    .work-single-wrap{
        padding-bottom: 44px;
    }
    .work-detail-img {
        justify-content: center;
    }
    .work-detail-img li{
        width: 28%;
    }
}
/* ▲▲制作実績詳細▲▲ */
/* ▼▼制作実績一覧▼▼ */
.work-list-wrap{
    width: 100%;
    color: var(--white);
    background-color: var(--green);
    padding: 40px 16px;
}
.category-list{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 40px;
}
.category-list .icon {
    width: fit-content;
    height: auto;
    font-size: 16px;
    background-color: var(--white);
    padding: 16px;
}
.category-all .icon{
    color: var(--black);
}
.category-design .icon{
    color: var(--red);
}
.category-web .icon {
    color: var(--darkgreen);
}
.category-illust .icon{
    color: var(--yellow);
}
.category-all .icon:hover{
    color: var(--white);
    background-color: var(--black);
}
.category-design .icon:hover{
    color: var(--white);
    background-color: var(--red);
}
.category-web .icon:hover {
    color: var(--white);
    background-color: var(--darkgreen);
}
.category-illust .icon:hover{
    color: var(--white);
    background-color: var(--yellow);
}
.work-list li a{
    display: flex;
    column-gap: 16px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--white);
    margin-bottom: 24px;
}
.work-list .thumbnail{
    width: 72px;
    height: 72px;
    background-color: var(--white);
}
.work-list-detail {
    width: 72%;
    margin-top: 0;
}
.work-list-detail .work-meta {
    display: flex;
    align-items: center;
    column-gap: 8px;
    margin-bottom: 8px;
}
.work-list-detail .work-meta .icon {
    width: fit-content;
    height: auto;
    font-size: 12px;
    padding: 8px;
}
.work-list-detail h3{
    font-size: 15px;
    font-weight: bold;
}
.work-list-detail .work-meta .icon-web{
    background-color: var(--darkgreen);
}
.work-list-detail .work-meta .icon-design{
    background-color: var(--red);
}
.work-list-detail .work-meta .icon-illust{
    background-color: var(--yellow);
}
@media(min-width:961px){
    .work-list-wrap {
        width: 50%;
        padding: 120px 64px 40px 64px;
    }
    .category-list {
        gap: 24px;
        margin-bottom: 80px;
    }
    .category-list li {
        width: 47%;
    }
    .category-list .icon {
        width: 100%;
        font-size: 20px;
    }
    .work-list .thumbnail {
        width: 120px;
        height: 120px;
    }
    .work-list-detail h3{
        font-size: 20px;
    }
    .work-list li a{
        align-items: center;
        padding-bottom: 40px;
        margin-bottom: 40px
    }
    .work-list-detail .meta{
        column-gap: 16px;
        margin-bottom: 16px;
    }
}
@media(min-width:1401px){
    .category-list li{
        width: fit-content;
    }
}
/* ▲▲制作実績一覧▲▲ */

/* ▼▼お知らせ一覧▼▼ */
.news-list-wrap{
    width: 100%;
    color: var(--black);
    background-color: var(--lightgreen);
    padding: 40px 16px;
}
.news-list-wrap .category-list{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 40px;
}
.news-list-wrap .category-list li{
    width: calc( calc(100% - 32px) / 3);
    height: auto;
}
.news-list-wrap .category-list .icon {
    width: 100%;
    font-size: 16px;
    background-color: var(--white);
    padding: 16px;
}
.news-list-wrap .icon{
    color: var(--green);
    background-color: var(--white);
}
.news-list-wrap .icon:hover{
    color: var(--white);
    background-color: var(--green);
}
.news-list li a{
    display: flex;
    column-gap: 16px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--white);
    margin-bottom: 24px;
}
.news-list .thumbnail{
    width: 72px;
    height: 72px;
    background-color: var(--white);
}
.news-list-detail {
    width: 72%;
}
.news-list-detail .news-meta {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    column-gap: 8px;
    margin-bottom: 8px;
}
.news-list-detail h3{
    width: 100%;
    font-size: 15px;
    font-weight: bold;
    display: -webkit-box;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.news-list-detail .news-meta .icon{
    width: fit-content;
    font-size: 10px;
    color: var(--white);
    background-color: var(--green);
}
.ews-meta time {
    font-size: 14px;
}
.news-list-wrap .prev, .news-list-wrap .next, .news-list-wrap .btn-page{
    color: var(--green);
    background-color: var(--lightgreen);
    border-color: var(--green);
}
.news-list-wrap .prev:hover, .news-list-wrap .next:hover, .news-list-wrap .btn-page:hover{
    color: var(--white);
    background-color: var(--green);
}
.news-list-wrap .prev::before, .news-list-wrap .prev::after,
.news-list-wrap .next::before, .news-list-wrap .next::after{
    background-color: var(--green);
}
.news-list-wrap .prev:hover:before, .news-list-wrap .prev:hover::after,
.news-list-wrap .next:hover::before, .news-list-wrap .next:hover::after{
    background-color: var(--white);
}
@media(min-width:961px){
    .news-list-wrap {
        width: 50%;
        padding: 120px 64px 40px 64px;
    }
    .news-list-wrap .category-list {
        gap: 32px;
        margin-bottom: 80px;
    }
    .news-list-wrap .category-list li {
        width: 29%;
    }
    .news-list-wrap .category-list .icon {
        width: 100%;
        font-size: 20px;
    }
    .news-list .thumbnail {
        width: 120px;
        height: 120px;
    }
    .news-list-detail h3{
        font-size: 20px;
    }
    .news-list li a{
        align-items: center;
        padding-bottom: 40px;
        margin-bottom: 40px
    }
    .news-list-detail .news-meta{
        margin-bottom: 16px;
    }
}
@media(min-width:1401px){
    .category-list li{
        width: fit-content;
    }
}
/* ▲▲お知らせ一覧▲▲ */
/* ▼▼お知らせ詳細▼▼ */
.news-single-wrap{
    width: 100%;
    color: var(--black);
    font-size: 15px;
    padding: 40px 16px;
}
.news-single-wrap .meta{
    width: 100%;
    height: auto;
    display: flex;
    column-gap: 8px;
    justify-content: left;
    align-items: center;
    margin-bottom: 16px;
}
.news-single-wrap .meta .icon{
    font-size: 10px;
}
.news-single-wrap h3{
    font-size: 34px;
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: 40px;
}
.news-single-wrap .thumbnail{
    width: 100%;
    height: auto;
    border-bottom: 1px solid var(--green);
    padding-bottom: 40px;
    margin-bottom: 40px;
}
.news-single-wrap p{
    line-height: 2;
    margin-bottom: 24px;
}
.news-single-wrap .strong{
    color: var(--red);
    font-weight: bold;
}
.news-single-wrap .marker{
    background-color: var(--yellow);
    font-weight: bold;
}
.news-single-wrap a{
    color: var(--darkgreen);
    text-decoration: underline;
}
.news-single-wrap ul, .news-single-wrap ol {
    margin-bottom: 40px;
}
.news-single-wrap ul li{
    line-height: 2;
    position: relative;
    padding-left: 22px;
    margin-bottom: 8px;
}
.news-single-wrap ul li::before{
    content: "";
    width: 16px;
    height: 16px;
    background-color: var(--green);
    border-radius: 50%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto 0;
}
.news-single-wrap ol{
    list-style-position: inside;
}
.news-single-wrap ol li{
    line-height: 2;
    position: relative;
    padding-left: 4px;
    margin-bottom: 8px;
}
.news-single-wrap ol li::marker {
    color: var(--green);
    font-weight: bold;
}
.news-single-wrap h4{
    color: var(--darkgreen);
    font-size: 28px;
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: 24px;
}
.news-single-wrap h5{
    color: var(--darkgreen);
    font-size: 23px;
    font-weight: bold;
    line-height: 2;
    border-left: 4px solid var(--darkgreen);
    padding-left: 16px;
    margin-bottom: 24px;
}
.news-single-wrap h6{
    color: var(--darkgreen);
    font-size: 19px;
    font-weight: bold;
    line-height: 2;
    border-bottom: 4px solid var(--darkgreen);
    padding-bottom: 8px;
    margin-bottom: 24px;
}
.news-single-wrap .h7{
    color: var(--lightgreen);
    font-size: 16px;
    font-weight: bold;
    line-height: 2;
    background-color: var(--darkgreen);
    padding: 16px;
    margin-top: 40px;
    margin-bottom: 24px;
}
.news-single-wrap .h8{
    color: var(--darkgreen);
    font-size: 14px;
    font-weight: bold;
    line-height: 2;
    border-top: 2px solid var(--darkgreen);
    border-bottom: 2px solid var(--darkgreen);
    padding: 16px 0;
    margin-top: 40px;
    margin-bottom: 24px;
}
.news-single-wrap .btn-lightgreen {
    width: 100%;
    height: 80px;
    font-size: 24px;
    margin-top: 40px;
}
.news-single-wrap .btn-lightgreen span::before {
    height: 1350%;
}
@media(min-width:961px){
    .news-single-wrap{
        width: 50%;
        font-size: 16px;
        padding: 120px 64px 40px 64px;
    }
    .news-single-wrap .meta{
        column-gap: 16px;
        margin-bottom: 16px;
    }
    .news-single-wrap .meta time{
        font-size: 16px;
    }
    .news-single-wrap .meta .icon {
        font-size: 12px;
    }
    .news-single-wrap h3 {
        font-size: 48px;
        margin-bottom: 64px;
    }
    .news-single-wrap .thumbnail {
        padding-bottom: 80px;
        margin-bottom: 80px;
    }
    .news-single-wrap p{
        margin-bottom: 40px;
    }
    .news-single-wrap ul, .news-single-wrap ol{
        margin-bottom: 80px;
    }
    .news-single-wrap h4{
        font-size: 40px;
        margin-bottom: 40px;
    }
    .news-single-wrap h5{
        font-size: 33px;
        border-left: 8px solid var(--darkgreen);
        padding-left: 24px;
        margin-bottom: 40px;
    }
    .news-single-wrap h6{
        font-size: 28px;
        margin-bottom: 40px;
    }
    .news-single-wrap .h7{
        font-size: 23px;
        margin-top: 80px;
        margin-bottom: 40px;
    }
    .news-single-wrap .h8{
        font-size: 19px;
        margin-top: 80px;
        margin-bottom: 40px;
    }
    .news-single-wrap .btn-lightgreen{
        height: 120px;
        margin-top: 80px;
    }
}
/* ▲▲お知らせ詳細▲▲ */
/* ▼▼お問い合わせ▼▼ */
.contact-wrap {
    width: 100%;
}
.contact-nav{
    width: 100%;
    background-color: var(--green);
    color: var(--darkgreen);
    font-size: 18px;
    display: flex;
    list-style-position: inside;
    padding: 16px 26px;
}
.contact-nav li{
    position: relative;
    border-bottom: 1px solid var(--darkgreen);
    list-style-type: decimal-leading-zero;
    margin: 0 24px 0 10px;
}
.contact-nav .active{
    color: var(--white);
    border-bottom: 3px solid var(--white);
}
.contact-nav .done{
    color: var(--white);
    border-bottom: 1px solid var(--white);
}
.contact-nav li::before {
    content: "";
    width: 1px;
    height: 100%;
    background-color: var(--white);
    position: absolute;
    top: 0;
    left: -20px;
    transform: rotate(30deg);
}
.contact-nav li:last-of-type::after {
    content: "";
    width: 1px;
    height: 100%;
    background-color: var(--white);
    position: absolute;
    top: 0;
    right: -20px;
    transform: rotate(30deg);
}
.conntact-form{
    width: 100%;
    color: var(--black);
    padding: 40px 16px 40px 16px;
}
.required {
    color: var(--red);
}
.conntact-form .error {
    color: var(--red);
    font-size: 14px;
    margin-bottom: 0;
}
.conntact-form p{
    font-size: 15px;
    line-height: 2;
    margin-bottom: 40px;
}
.input-form {
    width: 100%;
    font-size: 15px;
}
.input-form{
    margin-bottom: 32px;
}
.conntact-form .input-form-detail{
    margin-bottom: 48px;
}
.conntact-form label{
    display: block;
    font-size: 15px;
    margin-bottom: 8px;
}
.input-form input{
    width: 100%;
    height: 50px;
    font-size: 15px;
    border: 1px solid var(--green);
    padding: 16px;
}
.input-form textarea {
    width: 100%;
    height: 192px;
    font-size: 15px;
    border: 1px solid var(--green);
    padding: 16px;
}
.privacy-policy {
    margin-bottom: 47px;
    text-align: center;
}
.privacy-policy-text {
    width: 100%;
    height: 194px;
    background-color: var(--white);
    text-align: left;
    overflow-y: scroll;
    padding: 24px;
    margin-bottom: 32px;
}
.privacy-policy-text p{
    font-size: 13px;
    line-height: 2;
}
.privacy-policy-text .title{
    font-size: 16px;
    font-weight: bold;
}
.privacy-policy-text span{
    font-weight: bold;
}
.privacy-policy-agree label{
    display: flex;
    column-gap: 8px;
    justify-content: center;
    align-items: center;
    margin-bottom: 32px;
}
.privacy-policy-agree input{
    width: 32px;
    height: 32px;
    position: relative;
    appearance: none;
    background-color: var(--lightgreen);
    border: 4px solid var(--white);
}
.privacy-policy-agree label{
    margin: 0;
}
.privacy-policy-agree span input{
    vertical-align: middle;
}
.privacy-policy-agree input:checked{
    background-color: var(--green);
    outline: 4px solid var(--white);
    outline-offset: -8px;
    border: 4px solid var(--green);
}
.privacy-policy-agree span label span{
    font-size: 15px;
}
.conntact-form button{
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    padding : 0;
    margin-bottom: 80px;
}
.conntact-form button span::before{
    background: var(--lightgreen);
    height: 1300%;
}
.conntact-form button:hover span::before{
    background: var(--green);
}
.conntact-form .button{
    width: 100%;
    height: 100%;
}
.contact-img {
    width: 100%;
}
.contact-img img{
    width: 100%;
    object-fit: contain;
}
@media(min-width:961px){
    .contact-wrap {
        width: 50%;
    }
    .contact-nav {
        font-size: 32px;
    }
    .conntact-form{
        padding: 50px 32px 56px 32px;
    }
    .conntact-form p{
        font-size: 16px;
        margin-bottom: 48px;
    }
    .input-form label{
        font-size: 16px;
        margin-bottom: 16px;
    }
    .input-form input{
        font-size: 16px;
        padding: 24px;
    }
    .input-form{
        margin-bottom: 32px;
    }
    .conntact-form .input-form-detail{
        margin-bottom: 64px;
    }
    .input-form textarea{
        height: 208px;
        font-size: 16px;
        padding: 24px;
    }
    .privacy-policy {
        margin-bottom: 72px;
    }
    .privacy-policy-text {
        height: 208px;
    }
    .privacy-policy-text p{
        font-size: 16px;
    }
    .privacy-policy-text .title{
        font-size: 20px;
    }
    .conntact-form button, .conntact-form .button{
        height: 120px;
        font-size: 24px;
        margin-bottom: 64px;
    }
}
@media(min-width:1401px){
    .contact-nav {
        font-size: 36px;
        padding: 32px 64px;
    }
    .conntact-form{
        padding: 48px 64px 40px 64px;
    }
    .privacy-policy-agree{
        margin-bottom: 16px;
    }
}
.contact-form-2 {
    padding: 40px 16px;
}
.input-data {
    padding-left: 16px;
}

.contact-form-2 .input-form {
    margin-bottom: 48px;
}
.contact-form-2 label{
    font-size: 18px;
}
.contact-form-2 .input-form-detail {
    margin-bottom: 40px;
} 
.contact-form-2 .contact-btn button{
    margin-bottom: 40px;
}
.contact-btn {
    display: flex;
    column-gap: 24px;
}
.contact-btn button {
    width: calc(calc(100% - 24px) / 2);
}
.contact-btn .btn-prev{
    color: #8DBDB7;
}
.contact-btn .btn-prev .button{
    color: #8DBDB7;
}
.contact-btn .btn-prev span{
    border-color: #8DBDB7;
}
.contact-btn .btn-prev:hover, .contact-btn .btn-prev .button:hover {
    color: var(--white);
}
.contact-btn .btn-prev:hover span::before{
    background-color: #8DBDB7;
}

@media(min-width:961px){
    .contact-form-2 {
        padding: 52px 64px 40px 64px;
    }
    .contact-form-2 .input-form .input-data {
        font-size: 16px;
    }
    .contact-form-2 .input-form-detail {
        margin-bottom: 72px;
    }
    .contact-btn {
        column-gap: 48px;
    }
    .contact-btn button {
        width: calc(calc(100% - 48px) / 2);
    }
}
@media(min-width:1401px){
    .contact-form-2 {
        padding: 48px 64px 40px 64px;
    }
    .contact-btn button span::before {
        height: 400%;
        transform: translate(-50%, -50%) rotate(-60deg);
    }
}
.contact-img-done {
    width: 280px;
    margin: 0 auto;
    margin-bottom: 40px;
}
.contact-img-done img{
    width: 100%;
    object-fit: contain;
}
.contact-done p{
    font-size: 32px;
    font-weight: bold;
    color: var(--green);
    text-align: center;
    margin-bottom: 32px;
}
.contact-done-text {
    font-size: 15px;
    line-height: 2;
    margin-bottom: 40px;
}
.contact-form-3 button{
    margin-bottom: 40px;
}
@media(min-width:961px){
    .contact-form-3{
        padding: 84px 64px 40px 64px;
    }
    .contact-img-done{
        width: 68%;
        margin-bottom: 56px;
    }
    .contact-done p{
        font-size: 36px;
    }
    .contact-done-text{
        font-size: 16px;
        text-align: center;
        margin-bottom: 80px;
    }
}
@media(min-width:1401px){
    .contact-form-3{
        padding: 80px 64px 77px 64px;
    }
    .contact-form-3 .conntact-form p{
        margin-bottom: 80px;
    }
    .contact-img-done{
        width: 480px;
    }
    .contact-form-3 button {
        margin-bottom: 77px;
    }
}
/* ▲▲お問い合わせ▲▲ */