/* ============================
   FV
============================ */
.fv {
    position:relative;
    overflow:hidden;
}

.fv__bg {
    position:relative;
    z-index:1;
    width: 100%;
}

.fv__bg img {
    display: block;
    width: 100%;
    height: auto;
}

.fv__content {
    position: absolute;
    top: 54%;
    left: 72%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    width: 40%;
}

.fv__title {
    color: #fff;
    font-size: clamp(2rem, 4vw, 5rem);
    line-height: 1.2;
    letter-spacing: .05em;
    font-family: 'ShipporiGothic';
}

.fv__lead {
    color: #fff;
    font-size: clamp(0.5rem, 1.2vw, 1.5rem);
    line-height: 2;
    letter-spacing: .05em;
}

/* 追従：雲 */
.fv__cloud {
    position:fixed;
    z-index:99;
    pointer-events: none;
}

.cloud-top-left {
    position: fixed;
    top: 0%;
    left: 0%;
}
.cloud-top-right {
    position: fixed;
    top: 0%;
    right: 0%;
}
.cloud-bottom-left {
    position: fixed;
    bottom: 0%;
    left: 0%;
}
.cloud-bottom-right {
    position: fixed;
    bottom: 0%;
    right: 0%;
}

/* 追従：TOPに戻る */
.fv__pagetop {
    z-index:10;
}

html {
    scroll-behavior: smooth;
}
.pagetop {
    height: 80px;
    width: 80px;
    position: fixed;
    right: 5%;
    bottom: 10%;
    background: #ffffff00;
    border: solid 3px #3172FF;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.pagetop__arrow {
    height: 15px;
    width: 15px;
    border-top: 3px solid #3172FF;
    border-right: 3px solid #3172FF;
    transform: translateY(20%) rotate(-45deg);
}

@media screen and (max-width:768px) {
    .fv__content {
        width: 80%;
        top: 74%;
        left: 50%;
        transform: translate(-50%, -50%);
        align-items: center;
        text-align: center;
    }

    .fv__title {
        font-size: clamp(2rem, 8vw, 3rem);
        text-align: left
    }

    .fv__lead {
        margin-top: clamp(0.8rem,3vw,1.5rem);
        font-size: clamp(.75rem,3vw,1rem);
        line-height:1.8;
    }

    .cloud-top-left {
        transform-origin: top left;
        transform: scale(2);
    }
    .cloud-top-right {
        transform-origin: top right;
        transform: scale(2.5);
    }
    .cloud-bottom-left {
        transform-origin: bottom left;
        transform: scale(1.5);
    }
    .cloud-bottom-right {
        transform-origin: bottom right;
        transform: scale(2);
    }
}

/* ============================
   ABOUT US
============================ */
.top-about {
    padding: clamp(3.75rem, 2.5rem + 6.25vw, 7.5rem) 0;
}

.top-about__heading {
    display: flex;
    gap: clamp(1.125rem, 0.64rem + 2.07vw, 3.125rem);
    margin-bottom: clamp(2rem, 1.6rem + 2vw, 3.5rem);
}

.top-about__sub {
    display: flex;
    align-items: center;
    gap: clamp(1.125rem, 0.64rem + 2.07vw, 3.125rem);
    padding-bottom: clamp(0.2rem, 0.15rem + 0.2vw, 0.5rem);
}

.top-about__title {
    background: linear-gradient(to right, #3172FF, #319FFF);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: clamp(3.688rem, 1.913rem + 7.57vw, 11rem);
    font-weight: 400;
    font-family: 'ShipporiGothic';
    line-height: 1;
    white-space: nowrap;
    margin: 0;
}

.top-about__line {
    width: 2px;
    height: clamp(2.125rem, 1.351rem + 3.3vw, 5.313rem);
    background: #7e7e7e;
    flex-shrink: 0;
}

.top-about__subtitle {
    font-size: clamp(0.656rem, 0.33rem + 1.39vw, 2rem);
    color: #414141;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.top-about__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1.5rem, 0.5rem + 5vw, 4rem);
}

.top-about__illust {
    flex-shrink: 0;
    width: clamp(8.75rem, 1.772rem + 29.77vw, 37.5rem);
}



.top-about__card {
    width: clamp(16.75rem, 10.682rem + 25.89vw, 41.75rem);
    background: #fafafa;
    border-radius: 20px;
    padding: clamp(2.063rem, 0.788rem + 5.44vw, 7.313rem);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.top-about__text {
    color: #414141;
    font-size: clamp(0.863rem, 0.358rem + 0.87vw, 1.406rem);
    line-height: 1.9;
    letter-spacing: 0.05em;
    margin: 0 0 clamp(3.375rem, 2.222rem + 4.92vw, 6.125rem) 0;
}

.top-about__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    padding: clamp(0.875rem, 0.8rem + 0.375vw, 1.125rem) clamp(1.5rem, 1.3rem + 1vw, 2rem);
    background: linear-gradient(to right, #3172FF, #319FFF);
    color: #fff;
    font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-decoration: none;
    box-sizing: border-box;
    transition: opacity 0.3s ease;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
}

.top-about__btn:hover {
    opacity: 0.8;
}

.top-about__btn-arrow {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    flex-shrink: 0;
}

@media screen and (max-width: 768px) {
    .top-about__body {
        flex-direction: column-reverse;
        align-items: center;
        gap: 1.5rem;
    }

    .top-about__heading {
        display: flex;

        flex-direction: column;
        align-items: flex-start;
        gap: clamp(.5rem,2vw,.75rem);
    }

    .top-about__title {
        width: 100%;
    }

    .top-about__sub {
        display:flex;
        align-items:center;
        gap:.6rem;
    }

    .top-about__line {
        width:1px;
        height:1.5rem;
    }

    .top-about__subtitle {
        font-size:clamp(.75rem,3vw,1rem);
    }

    .top-about__card {
        width: 100%;
        background: #fafafa;
        border-radius: 20px;
        padding: clamp(2.813rem, 1.614rem + 5.11vw, 7.75rem);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }

    .top-about__illust {
        width: 100%;
    }

    .top-about__btn {
        max-width: 80%;
        margin: 0 auto;
    }
}


/* ============================
   NEWS
============================ */
#news {
    padding: clamp(3.75rem, 2.5rem + 6.25vw, 7.5rem) 0;
    background:#fff;
}

.news-bg {
    --bg-h: clamp(24.188rem, 19.94rem + 18.12vw, 41.688rem);
    --bg-w: calc(var(--bg-h) * 3.0788);

    background-image:url("../images/news.png");
    background-repeat:repeat-x;
    background-position: 0 top;
    background-size: var(--bg-w) var(--bg-h);
    padding-top:180px;
    padding-bottom:120px;
    animation: newsBgScroll 60s linear infinite;
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

@keyframes newsBgScroll {
    from { background-position-x: 0; }
    to { background-position-x: calc(var(--bg-w) * -1); }
}

.news-list {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:40px;
    margin-bottom:80px;
}

.news-card {
    text-align:center;
}

.news-card a {
    text-decoration:none;
    color:#333;
}

.news-card img {
    width: 100%;
    display: block;
}

.news-card-thumbnail {
    width:100%;
    aspect-ratio:5 / 3;
    overflow:hidden;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
}

.news-card-thumbnail img {
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.news-card-title {
    font-size:clamp(0.625rem, 0.413rem + 0.91vw, 1.5rem);
    line-height:1.6;
    padding: 30px 0;
}

.news-button {
    text-align:center;
}

.news-button a {
    display:inline-flex;
    justify-content:center;
    align-items:center;
    width:clamp(6.063rem, 3.013rem + 13.01vw, 18.625rem);
    height:clamp(1.188rem, 0.55rem + 2.72vw, 3.813rem);
    font-size:clamp(0.625rem, 0.413rem + 0.91vw, 1.5rem);
    background:#555;
    color:#fff;
    text-decoration:none;
    transition:.3s;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
}

.news-button a:hover {
    opacity:.8;
}

/* PC */
@media (min-width:768px) {
    .news-list {
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:40px;
    }
    /* 4件目を非表示 */
    .news-card:nth-child(4){
        display:none;
    }
}

/* SP */
@media (max-width:768px) {
    .news-list {
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:24px;
    }
    /* 4件表示 */
    .news-card:nth-child(4) {
        display:block;
    }
}

/* ============================
   SERVICE
============================ */

.top-service {
    position: relative;
}

.top-service__bg{
    width:100%;
    display:block;
}

@media (max-width:768px){

    .top-service__bg{
        content:url("../images/service_bg_sp.png");
    }

}

.top-service__overlay {
    padding: clamp(3.75rem, 2.5rem + 6.25vw, 7.5rem) 0;
    position: absolute;
    inset: 0;
}

.top-service__overlay > .container-w1440 {
    position: relative;
    height: 100%;
}

/* 見出し */
.top-service__heading {
    display: flex;
    align-items: flex-end;
    gap: clamp(18px, 2vw, 48px);
    position: absolute;
    top: 5%;
    left: 0;
}

.top-service__title {
    color: #333;
    font-size: clamp(3rem, 1.786rem + 5.18vw, 8rem);
    font-weight: 400;
    font-family: 'ShipporiGothic';
    line-height: 1;
    white-space: nowrap;
    margin: 0;
    z-index: 10;
}

.top-service__sub {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1vw, 24px);
}

.top-service__line {
    width: 2px;
    height: clamp(2.125rem, 1.351rem + 3.3vw, 5.313rem);
    background: #333;
    flex-shrink: 0;
    z-index: 10;
}

.top-service__subtitle {
    font-size: clamp(0.656rem, 0.33rem + 1.39vw, 2rem);
    color: #fff;
    letter-spacing: 0.05em;
    white-space: nowrap;
    z-index: 10;
}

/* 事業の項目 */
.top-service__list {
    position: absolute;
    inset: 0;
    width: clamp(15.938rem, 1.86rem + 60.06vw, 73.938rem);
    margin: 0 auto;
}

.top-service__item {
    position: absolute;
    display: flex;
    align-items: center;
    gap: clamp(20px, 2vw, 40px);
}

/* システム開発事業 */
.top-service__item--se {
    top: 28%;
    left: 0%;
    transform: rotate(-2deg);
}

/* デザイン事業 */
.top-service__item--de {
    top: 48%;
    right: 0%;
    transform: rotate(3deg);
}

/* こども事業 */
.top-service__item--child {
    top: 68%;
    left: 6%;
    transform: rotate(-3deg);
}

.top-service__icon {
    width: clamp(4.813rem, 1.566rem + 13.85vw, 18.188rem);
    height: auto;
}

.top-service__body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.top-service__item-title {
    color: #fff;
    font-size: clamp(1.5rem, 0.999rem + 2.14vw, 3.563rem);
    text-align: center;
    font-family: 'ShipporiGothic';
    line-height: 1.1;
    margin-bottom: 20px;
}

.top-service__button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: clamp(4.125rem, 2.654rem + 6.28vw, 10.188rem);
    height: clamp(0.938rem, 0.589rem + 1.49vw, 2.375rem);
    background: #333;
    color: #fff;
    font-size: clamp(0.375rem, 0.223rem + 0.65vw, 1rem);
    text-decoration: none;
    transition: .3s;
    box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
}

.top-service__button:hover {
    background: #fff;
    color: #333;
}
@media screen and (max-width: 768px) {
    .top-service__overlay {
        position: absolute;
        padding: 30px 0;
    }

    .top-service__overlay > .container-w1440 {
        position: relative;
        height: 100%;
    }

    .top-service__heading {
        top: 5%;
    }

    .top-service__list {
        position: absolute;
        inset: 0;
        width: 100%;
    }

    /* システム開発事業(左) */
    .top-service__item--se {
        top: 20%;
        left: 0%;
        right: auto;
        transform: rotate(-4deg);
    }

    /* デザイン事業(右) */
    .top-service__item--de {
        top: 45%;
        left: auto;
        right: 0%;
        transform: rotate(4deg);
    }

    /* こども事業(左) */
    .top-service__item--child {
        top: 65%;
        left: 6%;
        right: auto;
        transform: rotate(-3deg);
    }

    .top-service__item {
        gap: 12px;
    }

    .top-service__icon {
        width: 150px;
    }
}
/* ============================
   RECRUIT
============================ */
#recruit {
    padding: clamp(3.75rem, 2.5rem + 6.25vw, 7.5rem) 0;
}

.top-recruit__container {
    max-width: 100%;
    box-sizing: border-box;
}

/* セクションタイトル */
.top-recruit__heading {
    display: flex;
    gap: clamp(18px,2vw,50px);
    margin-bottom: clamp(50px,6vw,100px);
    align-items: center; 
    gap: clamp(1.125rem, 0.64rem + 2.07vw, 3.125rem);
}

.top-recruit__title {
    font-size: clamp(2.938rem, 1.163rem + 7.57vw, 10.25rem);
    font-family: "ShipporiGothic";
    font-weight: 400;
    line-height: 1;
    color: #555;
    margin: 0;
}

.top-recruit__sub {
    display: flex;
    align-items: center;
    gap: clamp(1.125rem, 0.64rem + 2.07vw, 3.125rem);
}

.top-recruit__line {
    width: 2px;
    height: clamp(34px,4vw,80px);
    background: #555;
}

.top-recruit__subtitle {
    font-size: clamp(0.625rem, 0.231rem + 1.68vw, 2.25rem);
    color: #888;
}

/* 背景 */
.top-recruit__bg {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.top-recruit__bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background: url("../images/recruit_bg_hand.png") no-repeat right center;
    background-size: 35%;

    filter: blur(6px);
    opacity: 0.5;
    transform: scale(1.05);
}

/* 項目 */
.top-recruit__list {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: clamp(3.125rem, -0.667rem + 16.18vw, 18.75rem);
    padding-top: clamp(40px,5vw,80px);
}

.top-recruit__item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.top-recruit__item img {
    width: clamp(8.75rem, 6.019rem + 11.65vw, 20rem);
    height: auto;
}

.top-recruit__item-title {
    font-size: clamp(1.25rem, 0.765rem + 2.07vw, 3.25rem);
    color: #555;
    margin-bottom: 25px;
    text-align: center;
    font-family: "ShipporiGothic";
}

.top-recruit__icon {
    width: clamp(120px,12vw,220px);
    height: auto;
    margin-bottom: 30px;
}

.top-recruit__button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: clamp(4.813rem, 1.885rem + 12.49vw, 16.875rem);
    height: clamp(1.25rem, 0.749rem + 2.14vw, 3.313rem);
    background: #555;
    color: #fff;
    text-decoration: none;
    font-size: clamp(0.625rem, 0.413rem + 0.91vw, 1.5rem);
    transition: .3s;
}

.top-recruit__button:hover {
    background: #3172FF;
}

/* ============================
   CONTACT
============================ */

#contact {
    padding: clamp(80px, 8vw, 140px) 0;
}

.top-contact__content{
    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

.top-contact__heading{
    position:absolute;
    top: 12%;
    left: 0;
}

.top-contact__title {
    background: linear-gradient(to right, #a4a4a4, #3f3f3f);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size:clamp(48px,8vw,164px);
    font-family:"ShipporiGothic";
    font-weight:400;
    color:#555;
    line-height:1;

    white-space: nowrap;
    margin: 0;
}

.top-contact__sub {
    display:flex;
    align-items:center;
    gap:20px;
}

.top-contact__line {
    width:2px;
    height:clamp(36px,5vw,80px);
    background:#555;
}

.top-contact__subtitle {
    font-size:clamp(10px,1.5vw,28px);
    color:#888;
}

/* 問い合わせボタン */
.top-contact__button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(10rem, 5.297rem + 20.06vw, 29.375rem);
    height: clamp(4.188rem, 2.625rem + 6.67vw, 10.625rem);
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

/* ボタン背景 */
.top-contact__button-bg{
    position: absolute;
    inset: 0;
    border-radius: 999px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,.15);
}

.top-contact__button-bg::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(255,255,255,.75);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    box-shadow:inset 0 20px 40px rgba(0,0,0,.12);
}

/* 白い枠線 ヘッダーと統一するかしないか */
/* .top-contact__button-bg::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    box-shadow:inset 0 0 0 3px rgba(255,255,255,.95);
} */

/* 中身 */
.top-contact__button-inner{
    position: relative;
    width: 100%;
    height: 100%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.top-contact__icon{
    position: absolute;
    left: clamp(20px,3vw,40px);
    top: 50%;
    transform: translateY(-50%);
    width: clamp(40px,4vw,70px);
}

.top-contact__button-text{
    color:#3172FF;
    font-family:"ShipporiGothic";
    font-size: clamp(0.875rem, 0.602rem + 1.17vw, 2rem);
    white-space: nowrap
}

.top-contact__button:hover{
    transform:translate(-50%,-50%) scale(1.05);
    transition:.3s;
}

/* 電話イラスト */
.top-contact__tel{
    position:absolute;
    top:62%;
    left:50%;
    transform:translateX(-50%);
    width:clamp(5rem, 0.752rem + 18.12vw, 22.5rem);
    height:auto;
}

/* 円 */
.top-contact__circle{
    position:relative;
    width:clamp(20.313rem,4.581rem + 67.12vw,85.125rem);
    margin:0 auto;
}

.top-contact__circle-image{
    display:block;
    width:100%;
    height:auto;
}

/* ============================
   スクロール
============================ */
.top-scroll { 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
}

/* ロゴ */
.top-scroll__logo {
    padding: clamp(80px, 8vw, 140px) 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.top-scroll__logo img {
    display: block;
    width: clamp(30px,3vw,60px);
}

/* SCROLL文字 */
.top-scroll__text{
    margin: 20px 0;
    color: #3172FF;
    font-size: clamp(12px,1vw,18px);
    letter-spacing: .3em;
    font-family: "ShipporiGothic";
    font-weight: 500;
}

.updown {
    animation-name: updown1;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes updown1 {
    0%  { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100%{ transform: translateY(0); }
}

/* スクロール縦線 */
.top-scroll__line-long {
    width: 2px;
    height: clamp(200px,30vw,520px);

    background:linear-gradient(
        to bottom,
        #3172FF,
        rgba(49,114,255,0)
    );
}

/* 吹き出しイラスト */
.top-scroll__illust img {
    padding: clamp(80px, 8vw, 140px) 0;
    display: block;
    width: 100%;
    height: auto;
}