@charset "utf-8";

:root{
    --base-color-01:#fff;
    --font-color:#333;
    --arai-yellow:#ffff08;
    --accent-color01:#34588d;
    --accent-color02:#70d2da;
    --font-ja:'Noto Sans JP', sans-serif;
    --font-en:'Josefin Sans', sans-serif;
}

*,*::before,*::after {box-sizing: inherit;}

html{
    font-size: 62.5%;/* 10px */
    box-sizing: border-box;
}

body{
    margin:0;
    padding:0;
    background:#fff;
    /* font関係 */
    font-family: var(--font-ja);
    color:var(--font-color);
    letter-spacing: 1px;
    width:100%;
}

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

ul,li{
    margin:0;
    padding:0;
    list-style-type: none;
}

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

table{border-collapse:collapse;}

/* メールリンク */
.mail-link{
    display: inline;
    text-decoration: underline;
    color:var(--accent-color01);
    font-weight: bold;
    &:hover{text-decoration: none;}
}

/* ==============
フォント設定
============== */
@font-face { /*英字*/
    font-family: 'Josefin Sans';
    font-weight: bold;
    src: url(../font/JosefinSans-SemiBoldItalic.ttf) format('truetype');
}
@font-face { /*ゴシック*/
    font-family: 'Noto Sans JP';
    font-weight: normal;
    src: url(../font/NotoSansJP-Regular.ttf) format('truetype');
}
@font-face { /*ゴシック*/
    font-family: 'Noto Sans JP';
    font-weight: bold;
    src: url(../font/NotoSansJP-Bold.ttf) format('truetype');
}
@font-face { /*ゴシック*/
    font-family: 'Noto Sans JP';
    font-weight: 900;
    src: url(../font/NotoSansJP-Black.ttf) format('truetype');
}
@font-face { /*明朝*/
    font-family: 'ShipporiMincho';
    font-weight: bold;
    src: url(../font/ShipporiMincho-Regular.ttf) format('truetype');
}

/* ==============
共通CSS
============== */
main, main img{z-index: 1;}
header,main,footer{box-sizing: content-box; font-size:1.6rem;}
main{overflow: hidden;}

.wrapper{
    max-width: 1000px;
    width:calc(100% - 40px);
    margin-inline:auto;
    padding:0 20px;
}

/*
sectionタイトル
*/
.sec-title{
    margin-bottom:40px;
    & .en{
        margin:0;
        font-size:5rem;
        font-family: var(--font-en);
        font-style: italic;
        font-weight: bold;
    }
    & .ja{
        margin:0;
        font-size:2.4rem;
        position: relative;
        margin-left:2.25em;
        &::before{
            content:"";
            width:1.5em;
            height:1px;
            background-color: var(--font-color);
            position: absolute;
            top:50%;
            translate: -150% 0;
        }
    }
}

/*
moreボタン
*/
.more-btn{
    text-align: right;
    margin-top:40px;
    & a{
        font-size: 1.8rem;
        font-weight: bold;
        display: inline-block;
        vertical-align: middle;
        margin-right: 1.5em;
        letter-spacing: 0.1em;
        color: var(--font-color);
        text-decoration: underline;
        transition: all 0.3s;
        position: relative;
        &:hover{text-decoration: none;}
        &:after{ /* > */
            content:"";
            border-top:3px solid var(--font-color);
            border-right:3px solid var(--font-color);
            width:8px;
            height:8px;
            position: absolute;
            top:50%;
            right:-1em;
            rotate: 45deg;
            translate: 0 -50%;
            transition: 0.3s;
        }
        &:hover:after{right:-1.25em;}
    }
}

/*トップのは青*/
#TOP-Page .more-btn{
    & a{
        color:var(--accent-color01);
        &:after{border-color:var(--accent-color01);} /* > */
    }
}

/*
テーブル (会社概要、採用情報)
*/
:where(#company-table, #company-history, #recruit-table){
    & .wrapper{max-width: 800px;}
    & table{
        width: 100%;
        border:1px solid var(--font-color);
        border-collapse: collapse;
        font-size:1.6rem;
    }
    & tr{display: flex;}
    & th{
        background-color: var(--font-color);
        color:#fff;
        width:calc(30% - 20px );
        padding:10px;
        display: flex;
        align-items: center;
        justify-content: center;    
    }
    & td{
        width:calc( 70% - 20px );
        background-color: #fff;
        padding:10px;
    }
    & tr:nth-child(even) td{background-color: #eee;}
}

/* ==============
JS関係
============== */
/*
ふわっと出現
*/
.fade-in{/*スクロールCSS*/
    opacity: 0;
    transition-duration: 1s;
    transition-property: opacity, translate;
}

.fade-in-up{translate:0 50px;} /*下から上*/
.fade-in-down{translate:0 -50px;} /*上から下*/
.fade-in-left{translate:-50px 0;} /*右から左*/
.fade-in-right{translate:50px 0;} /*左から右*/
  
.scroll-in{
    opacity: 1;
    translate:0;
}

/* ==============
各種CSS
============== */

/*
ローディング
*/
/*ロード中*/
.loading-mask{
    z-index: 100;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100svh;
    visibility: visible;
    z-index: 10;
    background-color: #f7f7f7;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeOut 1.5s 2.5s forwards;
    user-select: none;
    overflow: hidden;
}
@keyframes fadeOut {
    0% {} 
    100% {
      visibility: hidden;
      height:0vh;
    }
}

.loading__logo { /*ロゴ*/
    opacity: 0;
    animation: logo_fade 2s 0.5s forwards;
    /* width: 175px; ※通常ロゴ */
    width: 225px; /* 50th用 */
}
@keyframes logo_fade {
    0% {
      opacity: 0;
      translate: 0 20px;
    }
    60% {
      opacity: 1;
      translate: 0;
    }
    100% {opacity: 0;}
}

/*ロード後*/
.loading-show{
    opacity: 0;
    visibility: hidden;
    user-select: none;
    overflow: hidden;
    height:100vh;
    animation: ShowPage 1.0s 2.0s forwards;
}
@keyframes ShowPage {
    0% {
      opacity: 0;
      visibility: hidden;
      user-select: none;
      height:100vh;
    }
    100% {
      opacity: 1;
      visibility: visible;
      user-select:auto;
      height:100%;
    }
}

/* --------
header
-------- */
#header{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    z-index: 100;
    transition: 0.3s;
    background-color:rgba(0,0,0,0.2);
    box-shadow: none;
    color:#fff;
    &.is-active{
        background-color:rgba(255,255,255,1);
        box-shadow: 0 1px 5px #f0f0f0;
        color:var(--font-color);
        text-shadow:none;
    }
    & .wrapper{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

/*
ロゴ
*/
#header .logo{
    & h1{
        margin:0;
        line-height: 1;
        font-size:2.25rem;
        transition: 0.3s;
        &:hover{opacity: 0.6;}
    }
    & .en{height:1em;}
    & .ja{
        margin-left:2.5px;
        height:0.45em;
    }
}

#header .logo :where(.en, .ja){
    filter: invert(100%) sepia(3%) saturate(1%) hue-rotate(239deg) brightness(120%) contrast(100%); /* #fff */
    object-fit: contain;
    transition: 1s;
}
#header.is-active .logo :where(.en, .ja){filter: invert(12%) sepia(62%) saturate(20%) hue-rotate(324deg) brightness(93%) contrast(79%);} /* #333 */

/*
ナビ
*/
.header-nav-area{line-height: 1;}

.header-nav-area ul{
    display: flex;
    &>li :where(a, span){
        display: block;
        line-height: 1;
        font-weight: bold;
        text-align: center;
        padding:25px 20px;
        cursor: pointer;
        position: relative;
        &::after{
            content:"";
            width:0%;
            height:8px;
            background-color: var(--arai-yellow);
            position: absolute;
            bottom:0;
            left:50%;
            translate: -50% 0;
            pointer-events: none;
            transition: 0.3s;
        }
        &:hover::after{width:100%;}
    }
}

.header-nav-area .sub-navi{
    background-color: rgba(0,0,0,0.6);
    display: flex;
    justify-content: center;
    width: 100vw;
    padding:10px 0;
    transition: 0.3s;
}
#header.is-active .header-nav-area .sub-navi{color:#fff;}

.main-navi-Trigger span + .sub-navi{
    user-select: none;
    opacity: 0;
    position: absolute;
    left:0;
    bottom:calc(-100% - 20px);
    translate: 0 -200%;
    transition: .5s;
    & li{display: none;}
    & a{display: none;}
}
.main-navi-Trigger span.open + .sub-navi{
    user-select: auto;
    opacity: 1;
    translate: 0;
    & li{display: block;}
    & a{display: block;}
}

/*ハンバーガー*/
.nav-hamburger-btn{display: none;}

/* --------
mainvisual
-------- */
#mainvisual{
    overflow: hidden;
    position: relative;
}

/*
スライダー
*/
.mv-slide{
    width:100%;
    aspect-ratio: 16 / 9 ;
    max-height:100svh;
    position: relative;
}

/*スライダー中身*/
.img-frame{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0 auto;
}
.img-01, .img-02, .img-03{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    filter:brightness(110%);
}
.img-01{
    background-position: right center;
    background-image: url('../img/mv/top1_L.jpg');
    animation: slide-animation-01 24s infinite;
}
.img-02{
    background-image: url('../img/mv/top2_L.jpg');
    animation: slide-animation-02 24s infinite;
}
.img-03{
    background-position: bottom;
    background-image: url('../img/mv/top3_L.jpg');
    animation: slide-animation-03 24s infinite;
}
@keyframes slide-animation-01 {
    0% {opacity: 1; scale: 1.0;}
    30% {opacity: 1;}
    40% {opacity: 0; scale: 1.15;}
    90% {opacity: 0}
    100% {opacity: 1; scale: 1.0;}
}
@keyframes slide-animation-02 {
    0% {opacity: 0;}
    30% {opacity: 0; scale: 1.1;}
    40% {opacity: 1;}
    60% {opacity: 1;}
    70% {opacity: 0; scale: 1.0;}
    100% {opacity: 0;}
}
@keyframes slide-animation-03 {
    0% {opacity: 0;}
    60% {opacity: 0;  scale: 1.0;}
    70% {opacity: 1;}
    90% {opacity: 1;}
    100% {opacity: 0; scale: 1.1;}
}

/*
文字
*/
/*-- 文字設定 --*/
.mv-text{
    position: absolute;
    top:50%;
    left:50%;
    translate:-50% -50%;
    text-align: center;
    & :where(h2, p){
        margin:0;
        text-shadow: 2.5px 2.5px 2.5px rgba(0,0,0,0.4);
        color:#fff;
    } 
    & h2{
        font-family: var(--font-en);
        font-style: italic;
        font-size: 7.2rem;
        line-height: 1;
        margin-bottom:20px;
    }
    & p{font-size: 2.8rem;}
}
@media screen and (max-width: 800px){
    .mv-text{
        & h2{font-size: 6.2rem;}
        & p{font-size: 2.0rem;}
    }
}

/*-- 文字アニメーション --*/
/* スクロールをしたら出現する要素にはじめに透過0を指定 */
.mv-text :where(.bgappearTrigger, .bgLRextendTrigger){opacity: 0;}

/* 全共通 */
.mv-text .bgextend{
    animation-name:bgextendAnimeBase;
    animation-duration:1s;
    animation-fill-mode:forwards;
    position: relative;
    overflow: hidden; /* はみ出た色要素を隠す */
    opacity:0;
}
@keyframes bgextendAnimeBase{
    from {opacity:0;}
    to {opacity:1;}
}
  
/* 中の要素 */
.mv-text .bgappear{
    animation-name:bgextendAnimeSecond;
    animation-duration:1s;
    animation-delay: 0.6s;
    animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes bgextendAnimeSecond{
    from {opacity:0;}
    to {opacity:1;}
}
  
/* 左から右 */
.mv-text .bgLRextend::before{
    animation-name:bgLRextendAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: var(--arai-yellow);/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime{
    0% {
      transform-origin:left;
      transform:scaleX(0);
    }
    50% {
      transform-origin:left;
      transform:scaleX(1);
    }
    50.001% {
      transform-origin:right;
    }
    100% {
      transform-origin:right;
      transform:scaleX(0);
    }
}

/* --------
共通(.top-sec-item)
(#company、#survey、#bowlrix)
-------- */
.top-sec-item{
    & .wrapper{position: relative;}
    & .text-area{
        background-color: rgba(255,255,255,0.6);
        padding:60px;
        backdrop-filter: blur(5px);
        border-radius: 5px;
        & .sec-content{
            width:90%;
            margin:auto;
        }
    }
    & .sec-content-body>p{line-height:1.75;}
}
@media screen and (max-width: 860px){
    .top-sec-item{
        & .text-area{
            padding:45px;
            & .sec-content{width:95%;}
        }
    }
}

/*「#company」と「#survey」*/
:where(#company, #survey){
    & .image-area{
        width:50%;
        height:100%;
        & img{
            object-fit: cover;
            width:100%;
            height: 700px;
        }
    }
    & .text-area{
        width:40%;
        position: absolute;
        translate: 0 50%;
    }
}

/* --------
company
-------- */
#company{
    padding:80px 0 80px;
    & .text-area{
        bottom:50%;
        right:10%;
    }
}

/* --------
survey
-------- */
#survey{
    padding:80px 0 80px;
    background-color: #f5f5f5;
    & .image-area{
        margin-left:50%;
        & img{object-position: 50% center;}
    }
    & .text-area{
        bottom:50%;
        left:10%;
    }
}

/* --------
bowlrix
-------- */
#bowlrix{
    padding:0 0 40px;
    & .wrapper{
        display: flex;
        justify-content: center;
    }
    & .image-area{
        width:100%;
        height:100%;
        & img{
            object-fit: cover;
            object-position: center 20%;
            width:100%;
            height: 400px;
        }    
    }
    & .text-area{
        margin-top:-20%;
        width:60%;
        & img{
            width:60%;
            object-fit: contain;
            display: block;
            margin: auto;
        }    
    }
}

/* --------
contact
-------- */
#contact{
    padding:80px 0 120px;
    background-color: #f5f5f5;
    & .link-btn-area{
        display: flex;
        justify-content: space-between;
    }
    & .link-btn{
        &:not(:first-child){margin:0 0 0 20px;}
        & a{
            color:var(--accent-color01);
            & .image-inner{overflow: hidden;}
            & img{
                width:100%;
                height:100%;
                object-fit: cover;
                transition: 0.5s;
            }
            & .text-area{
                text-decoration: underline;
                font-size: 1.8rem;
                vertical-align: middle;
                text-align: right;
                margin-right: 2.5em;
                margin-top:5px;
                position: relative;
                &:after{ /* > */
                    content:"";
                    border-top:3px solid var(--accent-color01);
                    border-right:3px solid var(--accent-color01);
                    width:8px;
                    height:8px;
                    position: absolute;
                    top:50%;
                    right:-1em;
                    rotate: 45deg;
                    translate: 0 -50%;
                    transition: 0.3s;
                }
            }
            &:hover{
                & img{scale: 1.08;}
                & .text-area{
                    text-decoration: none;
                    &:after{right:-1.25em;}
                }
            }
        }
    }
}

/* --------
footer
-------- */
#footer{
    background-color: #333;
    color:#fff;
    & .wrapper{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding-top:40px;
        padding-bottom:40px;
    }
}

/*
トップへジャンプ
*/
/*リンクの形状*/
#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	border-radius: 5px;
	width: 60px;
	height: 60px;
	color: #fff;
    border: 1px solid #fff;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:1rem;
	background-color:var(--accent-color01);
	transition:all 0.3s;
    &:hover{background-color: gray;}
}

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 20px;
	z-index: 10;
	opacity: 0; /*はじめは非表示*/
    translate: 0 100px;
    &::after{ /*ボタンの中身*/
        content:"";
        border-top:solid 2px #fff;
        border-right:solid 2px #fff;
        width:10px;
        height:10px;
        position: absolute;
        top:50%;
        left:50%;
        rotate: -45deg;
        translate: -50% -25%;
    }
}

/* アニメーション */
#page-top.UpMove{animation: UpAnime 0.5s forwards;} /* 上に上がる動き */
@keyframes UpAnime{
    from {
        opacity: 0;
        translate: 0 100px;
    }
    to {
        opacity: 1;
        translate: 0;
    }
}
#page-top.DownMove{animation: DownAnime 0.5s forwards;} /* 下に下がる動き */
@keyframes DownAnime{
    from {
        opacity: 1;
        translate: 0;
    }
    to {
        opacity: 1;
        translate: 0 100px;
    }
}

/* 
ロゴ 
*/
#footer .logo{
    &>p{
        font-size:2.0rem;
        line-height: 1;
        transition: 0.3s;
        & a{
            margin:0 0 1em;
            &:hover{opacity: 0.6;}
        }
    }
    & :where(.en, .ja){
        filter: invert(100%) sepia(3%) saturate(1%) hue-rotate(239deg) brightness(120%) contrast(100%); /* #fff */
        object-fit: contain;
        transition: 0.3s;
    }
    & .en{height:1em;}
    & .ja{
        margin-left:2.5px;
        height:0.45em;
    }
    & p{
        margin:0 0 5px;
        &:last-child{margin:20px 0 0;}
    }
    & .call-img{width: 22px; margin:0 2px 0 0;}
}
.logo-phone{font-weight: bold; font-size:1.6rem;}

/*
フッターナビ
*/
.footer-nav{
    display: flex;
    & ul:first-child{margin:0 40px 0 0;}
    & .sub-navi{
        margin:5px 0 0 1em;
        & li{
            display: flex;
            &::before{
                content:">";
                margin-right:0.5em;
            }
        }
    }
    & li{
        position: relative;
        &:not(:first-child){margin-top:5px;}
    }
    & a{
        &::after{
            content:"";
            position: absolute;
            left:0;
            bottom:0;
            width:0%;
            height:2px;    
            background-color: #fff;
            transition: 0.3s;
        }
        &:hover::after{width:100%;}
    }
}

/* 
コピーライト 
*/
.copyright p{
    margin:0;
    text-align: center;
    padding:10px 0;
    font-size:1.2rem;
}

/*==============
ナビ変化
==============*/
@media screen and (max-width: 920px){
    /* --------
    header
    -------- */
    #header{ &.is-active{color:#fff;} } /* 色変化しない */

    /*
    ナビ
    */
    .header-nav{ /* 閉 */
        position: absolute;
        top:-100vh;
        left:0;
        width: 100%;
        height:100vh;
        background-color:#333;
        transition: 0.3s;
        opacity: 0;
        user-select: none;
        &.active{ /* 開 */
            top:0vh;
            user-select:auto;
            opacity: 1;
        }
    }

    /*
    ナビ
    */
    .header-nav-area ul{
        flex-direction: column;
        align-items: center;
        padding-top:60px;
        &>li :where(a, span){
            display: inline-block;
            padding:15px 0;
            margin-bottom:0;
            font-size:1.8rem;
            &::after{
                height:5px;
                bottom:-.25rem;
            }
        }
    }

    .header-nav-area .sub-navi{
        display: flex;
        justify-content: center;
        width:auto;
        padding:0;
        background-color: rgba(255,255,255,0.2);
        & li{width:100vw;}    
    }

    .main-navi-Trigger{ /*SP独自*/
        text-align: center;
        position: relative;
        transition: .3s;
        & span::before{
            content: "";
            width:0.75em;
            height:0.75em;
            border-top:solid 3px #fff;
            border-right:solid 3px #fff;
            position: absolute;
            right:0;
            top:0;
            transition: .3s;
            rotate: 135deg;
            translate:calc(0.75em + 1em) 75%;
        }
        & span.open::before{
            rotate: -45deg;
            translate:calc(0.75em + 1em) 125%;
        }
    }

    .main-navi-Trigger span + .sub-navi{
        user-select: none;
        opacity: 0;
        translate: 0;
        position: static;
        transition: .5s;
        margin-top:0;
        & li{
            display: none;
            &:not(:first-child){border-top:none;}
        }
        & a{display: none;}
    }
    .main-navi-Trigger span.open + .sub-navi{
        margin-top:10px;
        & li{
            display: block;
            &:not(:first-child){border-top:2px solid #333;}
        }
        & a{display: inline-block;}
    }

    /*
    ハンバーガーメニュー
    */
    .nav-hamburger-btn{
        margin-right:-20px;
        display: block; /* 表示 */
    }
    
    .hamburger-btn{
        width:60px;
        height:60px;
        position: relative;
        cursor: pointer;
    }
    /* ■の色 */
    #header .hamburger-btn{background-color: rgba(51,51,51,0); transition: 0.3s;}
    #header.is-active .hamburger-btn{background-color: rgba(51,51,51,1);}

    .hamburger-btn span{
        background-color:#fff;
        width:40px;
        height:2px;
        position: absolute;
        left:10px;
        transition: 0.3s;
        /* 閉 */
        &:nth-child(1){ top:15px; }
        &:nth-child(2){ top:29px; }
        &:nth-child(3){ bottom:15px; }
    }
    .hamburger-btn.active span{ /* 開 */
        &:nth-child(1){ top:29px; rotate:45deg; }
        &:nth-child(2){ opacity: 0; }
        &:nth-child(3){ bottom:29px; rotate:-45deg; }
    }
}/* ナビ変化 */

/*==============
SP(中)
==============*/
@media screen and (max-width: 768px){
    /* ==============
    共通CSS
    ============== */
    header,main,footer{font-size:1.4rem;}

    /*
    sectionタイトル
    */
    .sec-title{
        margin-bottom:20px;
        letter-spacing: 3px;
        & .en{font-size:3.5rem;}
        & .ja{font-size:1.8rem;}
    }

    /* moreボタン */
    .more-btn{margin-top:25px;}

    /* ==============
    各種CSS
    ============== */
    /* --------
    mainvisual
    -------- */
    /* スライダー */
    .mv-slide{aspect-ratio: 4 / 3 ;}
    /*スライダー中身*/
    .img-02{background-image: url('../img/mv/top2_M.jpg');}

    /*
    文字
    */
    .mv-text{
        & h2{ font-size: 5.2rem; }
        & p{font-size: 1.8rem; text-wrap:nowrap;}
    }

    /* --------
    共通(.top-sec-item)
    (#company、#survey、#bowlrix)
    -------- */
    .top-sec-item{
        & .wrapper{position: relative;}
        & .text-area{padding:25px 0;}
        & .sec-content-body>p{line-height:1.75;}
    }
    
    /*「#company」と「#survey」*/
    :where(#company, #survey){
        & .image-area{
            width:100%;
            & img{height:450px;}
        }
        & .text-area{
            position: static;
            width:95%;
            translate: 0;
            margin-top:-30px;
        }
    }

    /* --------
    company
    -------- */
    #company{
        padding:60px 0 25px;
        & .image-area { & img{object-position: center bottom;} }
        & .text-area{
            margin-left:5%;
            padding-right:10%;
        }
    }

    /* --------
    survey
    -------- */
    #survey{
        padding:60px 0 40px;
        & .image-area{
            margin-left:0;
            & img{object-position: left bottom;}
        }
        & .text-area{
            margin-left:-10%;
            padding-left:10%;
        }
    }

    /* --------
    bowlrix
    -------- */
    #bowlrix{
        padding:0 0 25px;
        & .image-area{ & img{
            height: 400px;
            object-position: center 40%;
        } }
        & .text-area{
            margin-top:-30px;
            width:90%;
        }
    }

    /* --------
    contact
    -------- */
    #contact{
        padding:40px 0 120px;
        & .link-btn { & a { & .text-area{font-size: 1.6rem;} } }
    }

    /* --------
    footer
    -------- */
    #footer{
        & .wrapper{
            padding-bottom:25px;
            flex-direction: column-reverse;
            align-items: center;
        }
    }

    /* トップへジャンプ */
    #page-top a{
        width: 50px;
        height: 50px;
    }

    /* ロゴ */
    #footer .logo{margin-top: 40px; text-align: center;}

    /* フッターナビ */
    .footer-nav{ & li{font-size:1.6rem;} }

}/* SP(中) */

/*==============
SP(小)
==============*/
@media screen and (max-width: 425px){
    .wrapper {
        width: calc(100% - 20px);
        padding: 0 10px;
    }

    /*
    sectionタイトル
    */
    .sec-title{
        margin-bottom: 10px;
        & .en{
            letter-spacing: 1px;
            font-size:3.0rem;
            line-height: 1;
        }
        & .ja{letter-spacing: 1px;}
    }

    /* moreボタン */
    .more-btn{margin-top: 0;}

    /* ローディング */
    /* .loading__logo {width: 135px;} ※通常ロゴ */
    .loading__logo {width: 150px;} /* 50th用 */

    /* ==============
    各種CSS
    ============== */
    /* --------
    header
    -------- */
    /* ロゴ */
    #header .logo {& .en{letter-spacing: 0;}}

    /* ハンバーガーメニュー */
    .nav-hamburger-btn{margin-right:-10px;}

    /* --------
    mainvisual
    -------- */
    .mv-text{
        top:55%;
        & h2{
            font-size: 3.25rem;
            margin-bottom:10px;
        }
        & p{font-size: 1.4rem;}    
    }

    /* --------
    共通(.top-sec-item)
    (#company、#survey、#bowlrix)
    -------- */
    .top-sec-item{ & .text-area{
        background-color: rgba(255,255,255,0);
        backdrop-filter: blur(0);
    } }

    /*「#company」と「#survey」*/
    :where(#company, #survey){
        & .image-area{ & img{height:250px;} }
        & .text-area{
            width:100%;
            margin-top:0;
        }
    }

    /* --------
    company
    -------- */
    #company{
        padding:25px 0 20px;
        & .text-area{
            margin-left:0;
            padding-right:0;
        }
    }

    /* --------
    survey
    -------- */
    #survey{
        padding:25px 0 20px;
        & .text-area{
            margin-left:0;
            padding-left:0;
        }
    }

    /* --------
    bowlrix
    -------- */
    #bowlrix{
        padding:0 0 20px;
        & .image-area{ & img{
            height: 250px;
            object-position: center 20%;
        } }
        & .text-area{
            width:100%;
            margin-top:0;        
            & img{width:75%;}
        }
    }

    /* --------
    contact
    -------- */
    #contact{
        padding:20px 0 40px;
        & .link-btn-area{flex-direction: column;}
        & .link-btn{
            &:not(:first-child){margin:20px 0 0 0;}
            & a{ & img{
                    max-height: 150px;
                    object-position: center 20%;
            } }
        }
    }

    /* --------
    footer
    -------- */
    /* トップへジャンプ */
    #page-top{display:none;}

    /*
    フッターナビ
    */
    .footer-nav{
        flex-direction: column;
        & ul:first-child{margin:0 0 5px;}
    }
}/* SP(小) */