/* =====================================================
   style.css ― 共通の基本設定 ＋ トップページ(index.html)用

   （@importは必ず一番上に書くこと）
===================================================== */
@import url("header.css");
@import url("footer.css");

/* =====================
   基本設定
===================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:sans-serif;
}

html, body{
    overflow-x:hidden;

}

/* グレー英字サブタイトル */

.special-font{
    font-family: "Arial black", serif;
}

/* =====================
   トップ動画
===================== */

.hero{

    width:100%;
    height:100vh;

}

.hero video{

    width:100%;
    height:100%;
    object-fit:cover;

}

/* =====================
   90%幅セクションの上限（大画面で間延びしないように）
===================== */

.about-section,
.Corporate_info_group-section,
.Recruite_global-section,
.Access-section{

    max-width:1600px;

}

/* =====================
   私たちのこと
===================== */

.about-section{

    position:relative;
    width:70%;
    margin:0 auto;

}

.about-section > img{

    width:100%;
    display:block;

}

/* about-sectionを「文字サイズの基準」にする（画像と一緒に拡大縮小させるため） */

.about-section{
    container-type:inline-size;
}

.about-lead,
.about-motto{
    position:absolute;
    margin:0;
    white-space:nowrap;
    color:#000;
}

/* リード文（37px ÷ 1920 ≒ 1.94cqw） */

.about-lead{
    top:16%;
    left:9.6%;
    width:38.4%;          /* 中心が画像の28.8%（「私たちのこと」の見出しと同じ位置）になる */
    text-align:center;    /* sp-leadと同じ中央揃え */
    font-size:1.46cqw;
    line-height:1.82;
    
}

/* 「」の3行（42px ÷ 1920 ≒ 2.19cqw・明朝体・中央揃え） */

.about-motto{
    top:27%;
    left:14%;
    width:29.6%;
    text-align:center;
    font-family:"游明朝","Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif;
    font-weight:550;
    font-size:2.19cqw;
    line-height:1.38;
}

/* READ MORE */

.read-more-btn{

    position:absolute;
    top:40%;
    left:18%;
    width:22%;
    height:auto;
    aspect-ratio: 3.9 / 1;
    background:#ecebeb;
    color:#000;
    font-size:clamp(12px,1.3vw,30px);

    font-weight:normal;
    text-decoration:none;
    display:flex;
    justify-content:center;
    align-items:center;
    transition:.3s;

}

.read-more-btn:hover{

    background:#d8d8d8;

}

.detail-buttons{

    position:absolute;
    top:60%;
    left:59%;
    width:22%;

    display:flex;
    flex-direction:column;
    gap:2.05vw;

}

.detail-btn{

    width:100%;
    aspect-ratio:4.5 / 1;
    background:#213269;
    color:white;
    text-decoration:none;
    display:flex;

    justify-content:center;
    align-items:center;
    font-size:clamp(12px,1.3vw,30px);
    font-weight:normal;
    letter-spacing:normal;
    font-family:inherit;
    transition:0.3s;

}

.detail-btn:hover{

    background:#31458a;

}

/* =====================
   企業情報・各営業所・グループ企業
===================== */

.Corporate_info_group-section{

    position:relative;

    width:70%;

    margin:0 auto;

}

.Corporate_info_group-section > img{

    width:100%;

    display:block;

}

.Corporate_info_group-section .read-more-btn{

    top:37%;

    left:17%;

    background:#9ca6c7;

    color:white;

}

.Corporate_info_group-section .read-more-btn:hover{

    background:#9396a8;

}

.rink_group-image{

    position:absolute;

    top:73%;

    left:3%;

    width:97%;

    height:auto;

    z-index:10;

    transition:.3s;

}

.rink_group-image:hover{

    opacity:.8;

    transform:scale(1.02);

}

/* =====================
   採用情報/グローバル人材
===================== */

.Recruite_global-section{

    position:relative;

    width:70%;

    margin:0 auto;

}

.Recruite_global-section > img{

    width:100%;

    display:block;

}

.Recruite_global-section .detail-buttons{

    position:absolute;

    top:21.8%;
    left:74%;
    width:18%;
    display:flex;
    flex-direction:column;
    gap:1.5vw;

}

.Recruite_global-section .detail-btn{

    aspect-ratio:5.8 / 1;

    background:#ecebeb;
    color:#000;

}

.Recruite_global-section .detail-btn:hover{

    background:#bdbcbc;

}

.Recruite_global-section .read-more-btn{

    top:83%;

    left:18%;

    background:#97a2c5;

    color:white;

}

.Recruite_global-section .read-more-btn:hover{

    background:#9396a8;

}

/* =====================
   アクセス
===================== */

.Access-section{

    position:relative;

    width:70%;

    margin:0 auto;

}

.Access-section > img{

    width:100%;

    display:block;

}

/* =====================
   googleマップ埋め込み画像
===================== */

.Access-section iframe{

    position:absolute;

    top:24%;
    left:13%;

    width:77%;
    height:auto;

   aspect-ratio:2 / 1;

    border:none;

}

/* =====================
   カレンダー
===================== */

.Calender-section{

    position:relative;

    width:70.97%;

    max-width:1100px;

    margin:0 auto;

    padding:70px 0 0;

}

/* 上部の仕切り線 */

.calendar-divider{

    width:100%;

    height:1px;

    margin:0 0 30px;

    background:#c5c5c5;

}

/* カレンダー案内 ＋ ミニカレンダー（横並び） */

.calendar-top{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:5%;

}

.calendar-info{

    flex:1;

    min-width:0;

}

.calendar-info__heading{

    position:relative;

    line-height:1;

    margin-bottom:50px;

}

.calendar-info__en{

    display:block;

    font-size:clamp(36px,6vw,75px);

    color:#ececeb;

}

.calendar-info__ja{

    position:absolute;

    left:40%;

    bottom:-25%;

    font-size:clamp(13px,1.2vw,26px);

    font-weight:700;

    color:#000;

}

.calendar-info__hours{

    margin-top:25px;

    margin-left:100px;

    font-size:clamp(14px,1.6vw,20px);

    color:#000;

}

.calendar-info__legend{

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:25px;

    margin-left:100px;

    font-size:clamp(13px,1.5vw,18px);

    color:#000;

}

.calendar-info__swatch{

    width:28px;

    height:20px;

    background:#ffcccc;

    display:inline-block;

}

/* 営業日ミニカレンダー */

.mini-calendar-wrap{

    width:460px;

    max-width:100%;

    flex-shrink:0;

}

/* お知らせ */

.news-block{

    margin-top:60px;

}

.news-block__label{

    font-weight:700;

    font-size:clamp(13px,1.4vw,16px);

    color:#000;

    margin-bottom:4px;

}

.news-block__box{

    background:#636f96;

    padding:1% 1% 1.5%;

}

.news-block__title{

    display:block;

    color:#fff;

    font-size:clamp(32px,5vw,60px);

    line-height:1;

    margin-bottom:2%;

}

/* お知らせ一覧を載せる白いボックス（青ボックス幅に対して常に一定の割合になるよう%指定） */

.news-area{

    width:90%;

    margin: 0 auto;

}

.news-list{

    width: 100%;
    
    box-sizing: border-box;

    background:rgba(253,253,253,.979);

    padding:1.8%;

    z-index:20;

}

.news-list a{

    display: block;

    color: #000;

    text-decoration: none;

    font-size: clamp(7.5px, 1.3vw, 18px);

    line-height:1.8;

}

/* お知らせ一覧　CHECK MOREボタン */

.news-area__actions{

    display:flex;

    justify-content:flex-end;

    margin-top:1%;

}

.check-btn{

    padding:1.5% 3%;

    background:#fcfafa;

    color:#000;

    text-decoration:none;

    display:inline-flex;

    justify-content:center;

    align-items:center;

    font-size:clamp(11px,1.3vw,18px);

    white-space:nowrap;

    transition:.2s;

}

.Calender-section .check-btn:hover{

    background:#cccbcb;

}

/* ---- TOPへ戻るボタン ---- */

.page-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 60px;
  height: 60px;
  border: none;
  border-radius: 50%;
  background: #213269;
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.1em;
  cursor: pointer;
  z-index: 100;
  overflow: hidden;

  /* 初期状態は非表示 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s, visibility 0.4s, background 0.3s;
}

/* 一定量スクロールしたら表示 */
.page-top.is-visible {
  opacity: 1;
  visibility: visible;
}

.page-top:hover {
  background: #354788;
}




/* 以下スマホ/ウィンドウ縮小時 */

/* =====================
   レスポンシブ
===================== */

@media(max-width:1024px){

    /* スマホ・タブレットでは余白にこだわらず画面幅いっぱいに使う */

    .about-section,
.Corporate_info_group-section,
.Recruite_global-section,
.Access-section{

    width:90%;

    }

    .Calender-section{

    width:78.85%;

    }

    /* お知らせ行間の調整 */

    .news-list a{

    line-height:1.2;

    }

    /* お知らせボックスが長文で下にはみ出さないよう、箱の中でスクロールさせる */

    .news-list{

    max-height:26vw;

    overflow-y:auto;

    }

}

/* カレンダー案内とミニカレンダーを縦積みにする（狭い画面） */

@media(max-width:700px){

    .calendar-top{

        flex-direction:column;

        align-items:center;

        gap:24px;

        }

    .calendar-info{

        width:100%;

        }

    .mini-calendar-wrap{

        width:100%;

        max-width:420px;

        }

    .news-block__box{

        padding:6% 5% 7%;

        }

    .news-area{

        width:100%;

        }

}

/* 採用ボタン行間合わないので、強制 */

@media(max-width:1024px){

    .Recruite_global-section .detail-buttons{

        gap:2.2vw;

        }

}

@media(max-width:700px){

    .Recruite_global-section .detail-buttons{

        gap:2.0vw;

        }

}

@media(max-width:480px){

    .Recruite_global-section .detail-buttons{

        gap:0.8vw;

        }

}