@charset "utf-8";
/* 個別CSS */

/* ================================================================================
全体設定
================================================================================== */

/* カラーパレット */
:root {
--or:#ed6c00;
--be:#f5f4eb;
--wh:#fff;
--kr:#786e6a;
--ao:#7993cc;
--gr01:#016788;
--gr02:#02876e;
--ki:#fffcdb;
--nmb:#f3f1e3;
}

/* フォント */
html, h1, h2, h3, h4, h5, h6, button, input, tr, td, dt, dd, p, li, details summary { color:var(--kr); font-family:"Zen Kaku Gothic New", sans-serif;  font-optical-sizing:auto; text-align:justify; }

/* 色 */
.or { color:var(--or); }
.ao { color:var(--ao); }
.gr02 { color:var(--gr01); }
.gr02 { color:var(--gr02); }

/* 背景 */
html  { background:
url( "../img/bg.png" ) no-repeat center center / cover,
url( "../img/bg.jpg" ) no-repeat center center / cover;
background-attachment:fixed, fixed; }
div.layout { background-color:var(--wh); }

/* ================================================================================
ヘッダ
================================================================================== */

/* 見出し */
header h1 { display:flex; align-items:center; justify-content:center; height:89px; width:100%; }

@media( min-width:769px ) { 

/* 全体 */
header { padding-top:39px; }

/* 見出し */
header h1 { display:none; }

}

/* ================================================================================
スライダー
================================================================================== */

/* スライダー基本 */
/* 基本スタイル（Hopeさん記載のまま） */
ul.slide {
  aspect-ratio: 375/562.5;
  border-radius: 10px;
  list-style: none;
  padding: 0;
  overflow: hidden;
  position: relative;
  margin: 0 auto 34.5px auto;
  max-height: calc(100% - 34.5px);
  height: calc(100% - 34.5px);
  width: calc(100% - 54px);
  max-width: calc(100% - 54px);
}
ul.slide li {
  position: absolute;
  inset: 0;
  transition: opacity 2s ease; /* ← フェード追加 */
  opacity: 0;
  height: 100%;
  width: 100%;
  z-index: 0;
}
ul.slide li img {
  border-radius: 10px;
  object-fit: cover;
  height: 100%;
  width: 100%;
  transition: transform 2s ease, opacity 2s ease;
  transform: scale(1.1); /* デフォルトを少し大きめに */
}

/* アクティブ状態 */
ul.slide li.active {
  opacity: 1;
  z-index: 1;
}

/* 演出パターン */
ul.slide li.active.zoom-in img {
  transform: scale(1.2); /* さらに大きく */
}
ul.slide li.active.zoom-out img {
  transform: scale(1.0); /* 通常より小さく見せる */
}
ul.slide li.active.normal img {
  transform: scale(1.1); /* 標準状態 */
}


/* ================================================================================
メインコンテンツ
================================================================================== */

/* ベース */
main section { padding:40px 25px 0 25px; margin-bottom:13px; }

/* 見出し */
main section h2 { color:var(--gr01); font-size:16px; font-weight:500; margin-bottom:20px; }
main section h2::before { background-image:url("../img/icon-midashi.svg"); background-size:auto; background-position:center center; content:''; display:inline-block; margin-right:10px; vertical-align:middle; height:37px; width:20px; }

/* 私たちができること */
section.we ul li, p.catch, section.we ul li p { color:var(--kr); font-weight:500; }
section.we ul { display:flex; flex-direction:column; gap:10px; }
section.we ul li { font-size:15px; padding:0 30px; line-height:28px; }
section.we ul li::before { content:'・'; }
p.catch { font-size:16px; line-height:175%; padding:0 30px; margin-bottom:25px; }
section.we ul li p { font-size:13px; line-height:20px; margin:0 1rem; }

/* RECRUIT */
section.recruit { margin-bottom:40px; }
section.recruit p { color:var(--kr); font-size:14px; font-weight:500; line-height:28px; padding:0 10px 10px 10px; margin-bottom:29px; }
section.recruit details { transition:.3s; margin:auto auto 20px auto; width:300px; }
section.recruit details.last { margin:auto; }
section.recruit details summary { background-color:var(--ki); border:1px solid var(--ao); box-sizing:border-box; cursor:pointer; font-size:14px; font-weight:500; text-align:center; list-style:none; line-height:200%; padding:26px 0; position:relative; z-index:1; }
section.recruit details summary::-webkit-details-marker { display:none; }
section.recruit details summary::before, section.recruit details summary::after { background-color:var(--or); content:''; display:inline-block; top:50%; position:absolute; z-index:1; }
section.recruit details summary::before { right:15px; height:1px; width:15px; }
section.recruit details summary::after { right:15px; transform:translate(-7.5px,-50%); transition:.3s; height:15px; width:1px; }
section.recruit details[open] summary { background-color:#ccd4e5; border-bottom:none; transition:.3s; }
section.recruit details[open] summary::after { opacity:0; transform:translate(-7.5px,-50%) rotate(90deg); transition:.3s; }
section.recruit details div.opan-area { background-color:var(--wh); border:1px solid var(--ao); border-top:none; padding:35px 20px; }
section.recruit details div.opan-area div.item { margin-bottom:30px; }
section.recruit details div.opan-area div.item h3, section.recruit details div.opan-area div.item p { font-size:13px; font-weight:500; line-height:28px; }
section.recruit details div.opan-area div.item p { margin:0; padding:0; }
section.recruit details div.opan-area div.item .or { color:var(--or); }
section.recruit details div.opan-area div.item .ao { color:var(--ao); }
section.recruit details div.opan-area div.item .b { font-weight:700; }
section.recruit details div.opan-area div.item .mb-5 { margin-bottom:5px; }
section.recruit details div.opan-area div.item .mb-15 { margin-bottom:15px; }
section.recruit details div.opan-area div.item .mb-25 { margin-bottom:25px; }
section.recruit details div.opan-area div.item .mb-30 { margin-bottom:30px; }
section.recruit details div.opan-area div.item p.process { margin-bottom:5px; }
section.recruit details div.opan-area div.process p.w700 { font-weight:700; }
section.recruit details div.opan-area span.gr01 { color:var(--gr01); }

/* 数字で見るids */
section.number { background-color:var(--nmb); padding:40px 37px; }
section.number ul { max-width:100%; gap:88px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding:0; margin:0 auto; }
section.number ul li { display:flex; flex:0 0 auto; justify-content:center; align-items:center; scroll-snap-align:center; min-width:300px; width:300px; }
section.number ul li img { aspect-ratio:300/417; pointer-events:none; user-drag:none; user-select:none;  -webkit-user-drag:none; object-fit:cover; height:auto; max-width:100%; }
section.number p.check { margin-top:26px; text-align:right; }

/* COMPANY */
section.company h3, section.company p { font-size:13px; font-weight:500; line-height:28px; }
section.company h3 { color:var(--or); margin:auto; margin-bottom:5px; max-width:265px; }
section.company p { margin:auto; margin-bottom:40px; max-width:265px; }
section.company p.last-text { margin-bottom:0; }
section.company p.map a { border:1px solid var(--kr); border-radius:100px; font-size:12px; font-weight:700; display:flex; transition:.3s; justify-content:center;  line-height:normal; letter-spacing:5.64px; padding:5px 0; margin-top:10px; width:95px; }
section.company p.map a:hover { background-color:#7993cc4d; transition:.3s; }

/* 調整 */
main section .pad30 { padding:0 30px; }

@media( min-width:429px ) { 

/* 全体レイアウト */
div.layout { background-color:var(--wh); border-radius:20px 20px 0 0; position:fixed; overflow-y:overlay; top:138px; left:50%; transform:translateX(-50%); scroll-behavior:smooth; scrollbar-color:rgba(0,0,0,.3) transparent; scrollbar-width:thin; height:calc( 100vh - 138px ); width:375px; -webkit-overflow-scrolling:touch; z-index:10; }
div.layout::-webkit-scrollbar { width:6px; }
div.layout::-webkit-scrollbar-track { background:transparent; }
div.layout::-webkit-scrollbar-thumb { background:rgba(0,0,0,.3); border-radius:3px; }
}

/* ================================================================================
右側オブジェクト
================================================================================== */

/* SP版は消去 */
div.right-side-object { display:none; }

@media( min-width:961px ) { 

/* 出現 */
div.right-side-object { display:block; position:fixed; top:0; right:0; height:100vh; width:50vw; z-index:1; }
div.right-side-object div.right-side-object01 { position:absolute; top:141px; right:0; margin-right:100px; z-index:1; }
div.right-side-object div.right-side-object02 { position:absolute; bottom:100px; right:0; margin-right:103px; z-index:1; }

}

/* ================================================================================
左側オブジェクト
================================================================================== */

/* SP版は消去 */
div.left-side-object { display:none; }

@media( min-width:961px ) { 

/* 出現 */
div.left-side-object { display:flex; flex-direction:column; position:fixed; top:0; left:0; height:100vh; width:50vw; z-index:2; }
div.left-side-object div.left-side-object01 img { position:absolute; top:239px; margin-left:156px; height:64.55px; width:94.5px; }
div.left-side-object nav ul { display:flex; flex-direction:column; gap:20px; position:absolute; top:379px; margin-left:158px; }
div.left-side-object nav ul li { font-size:14px; font-weight:500; }
div.left-side-object nav ul li a:link, div.left-side-object nav ul li a:visited { color:var(--gr01); transition:.3s; }
div.left-side-object nav ul li a:active, div.left-side-object nav ul li a:hover { color:var(--or); transition:.3s; }

}

/* ================================================================================
フッタ
================================================================================== */

/* フッター全体 */
footer { width:100%; height:87px; }