@charset "utf-8";

 /** ==============================
 * area color start
 * ============================== **/
.area-osaka{color:#006e99;}
.area-hyogo{color:#51c1e9;}
.area-kyoto{color:#ab7eac;}
.area-shiga{color:#369f7a;}
/** ==============================
 * area color end
 * ============================== **/

 
/*//////////PCサイズ///////////*/
/*//////////PCサイズ///////////*/
@media screen and (min-width: 641px) {

/** ==============================
 * header start
 * ============================== **/

.site-header{
width:100vw;
max-height:80px;
height:6.1538vw;
background:#ffffff;
display:flex;
align-items:center;
justify-content:flex-start;
}

.site-header img{
max-height:80px;
height:6.1538vw;
width:auto;
display:block;
margin:0;
}

/** ==============================
 * header end
 * ============================== **/

/** ==============================
 * hero start
 * ============================== **/

.hero{
width:100vw;
}

.hero-inner{
position:relative;
width:100vw;
}

.hero-grid{
display:grid;
grid-template-columns:1fr 1fr;
grid-template-rows:1fr 1fr;
}

.hero-grid picture{
display:block;
}

.hero-grid img{
width:100%;
height:auto;
display:block;
}

.hero-message{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background:#ffffff;
padding:3.5vw 0vw;
text-align:center;
width: 50vw;
}

.hero-copy-main{
font-size:3vw;
line-height:1.4;
color:#004386;
font-weight:700;
padding-bottom: 1rem;
letter-spacing: .1rem;
}

.hero-copy-main span{
font-size:2.2vw;
display:block;
margin-bottom:0.5vw;
font-weight:700;
}

.hero-copy-sub{
margin-top:1vw;
font-size:1.5vw;
line-height:1.8;
font-weight:400;
}

.hero-car{
position:absolute;
left:50%;
transform:translateX(-50%);
bottom:-9.2vw;
}

.hero-car img{
width:85vw;
height:auto;
display:block;
}

/** ==============================
 * hero end
 * ============================== **/
/** ==============================
 * 共通タイトル start
 * ============================== **/

.section-title{
width:100%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:0vw;
padding:4vw 0;
}

h2.section-title-text{
font-size:2.5vw;
font-weight:700;
color:#004386;
padding:1.8vw 0;
margin:0;
}

.title-icon img{
height:4.5vw;
}

.title-deco img{
width:2.5vw;
}

/** ==============================
 * 共通タイトル end
 * ============================== **/


/** ==============================
 * subaru-area start
 * ============================== **/

.subaru-area{
background-color:#fff;
padding:9vw 0 5vw 0;
}

/* リンクエリア */

.area-links{
width:100%;
margin-top:3vw;
}

.area-inner{
position:relative;
width:85vw;
margin:0 auto;
min-height:42vw;
}

/* 地図 */

.area-map{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:40vw;
z-index:1;
}

.area-map img{
width:100%;
height:auto;
display:block;
}

/* グリッド */

.area-grid{
display:grid;
grid-template-columns:20vw auto 20vw;
align-items:start;
position:relative;
z-index:2;
}

/* 左右リンク */

.area-left,
.area-right{
display:flex;
flex-direction:column;
gap:3vw;
}

/* カード */

.area-item{
width:20vw;
border:0.15vw solid #d8dee7;
border-radius:1vw;
background:#fff;
overflow:hidden;
transition:all .3s ease;
}

/* リンク */

.area-item a{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
text-decoration:none;
color:#000;
padding:2vw 0 2vw 0;
 }

/* サムネ */

.area-thumb{
width:100%;
overflow:hidden;
border-radius:.6vw;
}

.area-thumb img{
width:100%;
height:auto;
display:block;
transition:transform .35s ease;
}

/* テキスト */

.area-name{
font-size:1.2vw;
margin-top:1vw;
}

.area-shop{
font-size:2.4vw;
margin-top:1vw;
font-weight:700;
display:inline-block;
transform:scaleX(1.2);
transform-origin:center;
}

.area-shop span{
font-size:1.5vw;
padding:.3rem;
position:relative;
top:-0.15vw;
}

/* 矢印 */

.area-arrow img{
width:1.5vw;
margin-top:1vw;
transition:transform .3s ease;
}

/* hover */

.area-item:hover{
border-color:#004386;
box-shadow:0 1vw 2vw rgba(0,0,0,.08);
transform:translateY(-0.3vw);
}

.area-item:hover .area-thumb img{
transform:scale(1.05);
}


/** ==============================
 * subaru-area end
 * ============================== **/

 
 /** ==============================
 * corporate start
 * ============================== **/
.corporate{
background:#f5f5f4;
padding:10vw 0 10vw 0;
clip-path:polygon(50% 10vw,100% 0,100% 100%,0 100%,0 0);
}

/* コンテンツ */

.corporate-inner{
width:80vw;
margin:0 auto;
}

/* リスト */

.corporate-list{
list-style:none;
margin:0;
padding:0;
}

/* 行 */

.corporate-list li{
min-height:2vw;
padding:1vw 0;
border-bottom:.1vw solid #cfcfcf;
display:flex;
align-items:center;
}

/* 中央 */

.corporate-row{
width:45%;
max-width:40vw;
margin:0 auto;
display:flex;
align-items:flex-start;
}

/* 左ラベル */
.corporate-label{
width:10vw;
font-weight:700;
}

/* 値 */

.corporate-value{
flex:1;
}

/** ==============================
 * corporate end
 * ============================== **/
 
 /** ==============================
 * recruit-banner start
 * ============================== **/

.recruit-banner{
width:100vw;
margin:0vw 0;
}

.recruit-link{
display:block;
width:100%;
}

.recruit-img{
overflow:hidden;
}

.recruit-img img{
width:100%;
display:block;
transition:transform .5s ease;
transform-origin:bottom;
}

/* hover */

.recruit-link:hover img{
transform:scale(1.02);
}

/** ==============================
 * recruit-banner end
 * ============================== **/
 
 /** ==============================
 * sns start
 * ============================== **/

.sns{
padding:0 0 5vw 0;
background:#fbfbfb;
}

.sns-grid{
width:40vw;
margin:0 auto;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:1vw;
}

/* カード */

.sns-card{
width:13vw;
margin:0 auto;
text-align:center;
text-decoration:none;
background:#fbfbfb;
display:block;
padding:0vw 0;
transition:all .35s ease;
transform-origin:center;
}

/* アイコンエリア */

.sns-icon{
width:10vw;
height:10vw;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto;
}

.sns-icon img{
width:4vw;
height:auto;
}

/* テキスト */

.sns-name{
margin-top:1vw;
}

/* 矢印 */

.sns-arrow{
padding:1rem 0;
}

.sns-arrow img{
width:1.2vw;
}

/* hover */

.sns-card:hover{
transform:translateY(-.4vw);
box-shadow:0 .8vw 1.6vw rgba(0,0,0,.08);
background-color:rgba(255,255,255,1.00)}

/** ==============================
 * sns end
 * ============================== **/
 /** ==============================
 * footer start
 * ============================== **/

.site-footer{
width:100vw;
height:4.615vw;
background:#ffffff;
display:flex;
align-items:center;
}

.footer-inner{
width:100%;
margin:0 auto;
display:flex;
align-items:center;
justify-content:space-between;
}

.footer-left img{
height:4.615vw;
width:auto;
display:block;
}

.footer-copy{
font-size:1vw;
padding-right:1rem;
}

/** ==============================
 * footer end
 * ============================== **/
.PC {}
.SP {
display:none;
max-width:0%;
max-height:0%;
}

}

/*//////////SPサイズ///////////*/
/*//////////SPサイズ///////////*/
@media screen and (max-width:640px) {
/** ==============================
 * header start
 * ============================== **/

.site-header{
width:100vw;
height:5rem;
background:#ffffff;
display:flex;
align-items:center;
justify-content:flex-start;

}

.site-header img{
height:5rem;
width:auto;
display:block;
margin:0;
}

/** ==============================
 * header end
 * ============================== **/
/** ==============================
 * hero start
 * ============================== **/

.hero{
width:100vw;
}

.hero-inner{
position:relative;
width:100vw;
}

.hero-grid{
display:grid;
grid-template-columns:1fr 1fr;
grid-template-rows:1fr 1fr;
}

.hero-grid picture{
display:block;
}

.hero-grid img{
width:100%;
height:auto;
display:block;
}

.hero-message{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background:#ffffff;
padding:6vw 4vw;
text-align:center;
width:80vw;
}

.hero-copy-main{
font-size:5vw;
line-height:1.4;
color:#004386;
font-weight:700;
padding-bottom:0vw;
letter-spacing:.1rem;
}

.hero-copy-main span{
font-size:4vw;
display:block;
margin-bottom:1vw;
font-weight:700;
}

.hero-copy-sub{
margin-top:2vw;
font-size:3.2vw;
line-height:1.7;
font-weight:400;
}

.hero-car{
position:absolute;
left:50%;
transform:translateX(-50%);
bottom:-12vw;
}

.hero-car img{
width:100vw;
height:auto;
display:block;
}

/** ==============================
 * hero end
 * ============================== **/
/** ==============================
 * 共通タイトル start
 * ============================== **/

.section-title{
width:100%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:0vw;
padding:8vw 0;
}

h2.section-title-text{
font-size:6vw;
font-weight:700;
color:#004386;
padding:4vw 0;
margin:0;
}

.title-icon img{
height:10vw;
}

.title-deco img{
width:5vw;
}

/** ==============================
 * 共通タイトル end
 * ============================== **/


/** ==============================
 * subaru-area start
 * ============================== **/

.subaru-area{
background-color:#fff;
padding:16vw 0 10vw 0;
}

/* リンクエリア */

.area-links{
width:100%;
margin-top:6vw;
}

.area-inner{
width:90vw;
margin:0 auto;
}

/* 地図 */

.area-map{
position:static;
transform:none;
width:80%;margin: auto;
margin-bottom:6vw;
}

.area-map img{
width:100%;
height:auto;

display:block;
}

/* グリッド */

.area-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:4vw;
}

/* 左右リンク */

.area-left,
.area-right{
display:flex;
flex-direction:column;
gap:4vw;
}

/* カード */

.area-item{
width:100%;
border:0.3vw solid #d8dee7;
border-radius:2vw;
background:#fff;
overflow:hidden;
transition:all .3s ease;
}

/* リンク */

.area-item a{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
text-decoration:none;
color:#000;
padding:4vw 0;
}

/* サムネ */

.area-thumb{
width:100%;
overflow:hidden;
border-radius:1vw;
}

.area-thumb img{
width:100%;
height:auto;
display:block;
}

/* テキスト */

.area-name{
font-size:3.6vw;
margin-top:2vw;
}

.area-shop{
font-size:7vw;
margin-top:2vw;
font-weight:700;
display:inline-block;
transform:scaleX(1.2);
transform-origin:center;
}

.area-shop span{
font-size:3.5vw;
padding:.6vw;
position:relative;
top:-0.3vw;
}

/* 矢印 */

.area-arrow img{
width:4vw;
margin-top:2vw;
}

/** ==============================
 * subaru-area end
 * ============================== **/
 /** ==============================
 * corporate start
 * ============================== **/

.corporate{
background:#f5f5f4;
padding:16vw 0;
clip-path:none;
}

/* コンテンツ */

.corporate-inner{
width:100vw;
margin:0 auto;
}

/* リスト */

.corporate-list{
list-style:none;
margin:0;
padding:0;
}

/* 行 */

.corporate-list li{
min-height:8vw;
padding:3vw 0;
border-bottom:.3vw solid #cfcfcf;
display:flex;
align-items:flex-start;
}

/* 中央 */

.corporate-row{
width:85%;
margin:0 auto;
display:flex;
align-items:flex-start;
}

/* 左ラベル */

.corporate-label{
width:28vw;
font-weight:700;
font-size:3.6vw;
}

/* 値 */

.corporate-value{
flex:1;
font-size:3.6vw;
line-height:1.6;
}

/** ==============================
 * corporate end
 * ============================== **/
 
 /** ==============================
 * recruit-banner start
 * ============================== **/

.recruit-banner{
width:100vw;
margin:0vw 0;
}

.recruit-link{
display:block;
width:100%;
}

.recruit-img{
overflow:hidden;
}

.recruit-img img{
width:100%;
height:auto;
display:block;
transition:transform .5s ease;
transform-origin:bottom;
}

/* hover */

.recruit-link:hover img{
transform:scale(1.02);
}

/** ==============================
 * recruit-banner end
 * ============================== **/
 /** ==============================
 * sns start
 * ============================== **/

.sns{
padding:0 0 12vw 0;
background:#fbfbfb;
}

.sns-grid{
width:90vw;
margin:0 auto;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:4vw;
}

/* カード */

.sns-card{
width:100%;
margin:0 auto;
text-align:center;
text-decoration:none;
background:#fbfbfb;
display:block;
padding:2vw 0;
transition:all .35s ease;
transform-origin:center;
}

/* アイコンエリア */

.sns-icon{
width:22vw;
height:22vw;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto;
}

.sns-icon img{
width:10vw;
height:auto;
}

/* テキスト */

.sns-name{
margin-top:2vw;
font-size:3.6vw;
}

/* 矢印 */

.sns-arrow{
padding:3vw 0;
}

.sns-arrow img{
width:4vw;
}


/** ==============================
 * sns end
 * ============================== **/
 
 /** ==============================
 * footer start
 * ============================== **/

.site-footer{
width:100vw;
height:14vw;
background:#ffffff;
display:flex;
align-items:center;
}

.footer-inner{
width:100vw;
margin:0 auto;
display:flex;
align-items:center;
justify-content:space-between;
}

.footer-left img{
height:8vw;
width:auto;
display:block;
}

.footer-copy{
font-size:1.8vw;
padding-right:1rem;
}

/** ==============================
 * footer end
 * ============================== **/
.PC{
display:none;
max-width:0%;
max-height:0%;
}
.SP{}

}

/*//////////アニメーション///////////*/
/*//////////アニメーション///////////*/
 /** ==============================
 * animation start
 * ============================== **/
/* ==============================
   スクロール発火（小移動 0.5s）
   ※ .is-inview または .scrollin が付いたら1回だけ再生
============================== */

/* 初期値 */
.leftAnime,
.rightAnime,
.topAnime,
.bottomAnime {
  opacity: 0;
}
.leftAnime   { transform: translate3d(-50px, 0, 0); }
.rightAnime  { transform: translate3d( 50px, 0, 0); }
.topAnime    { transform: translate3d( 0, -50px, 0); }
.bottomAnime { transform: translate3d( 0,  50px, 0); }

/* 発火 */
.leftAnime.is-inview,   .leftAnime.scrollin   { animation: kf-fade-left   0.5s ease-in-out both; }
.rightAnime.is-inview,  .rightAnime.scrollin  { animation: kf-fade-right  0.5s ease-in-out both; }
.topAnime.is-inview,    .topAnime.scrollin    { animation: kf-fade-top    0.5s ease-in-out both; }
.bottomAnime.is-inview, .bottomAnime.scrollin { animation: kf-fade-bottom 0.5s ease-in-out both; }

/* ==============================
   スクロール発火（左右大移動 0.8s）
============================== */
/* ==============================
   描画ヒント（共通）
============================== */
.topLeft, .topRight, .topTop, .topBottom,
.leftAnime, .rightAnime, .topAnime, .bottomAnime,
.leftAnimeBig, .rightAnimeBig {
  will-change: opacity, transform;
  backface-visibility: hidden;
}

/* ==============================
   ファーストビュー（自動再生）
   ※ ページロード後に delay クラスで順番制御
============================== */

/* from left */
.topLeft {
  opacity: 0;
  transform: translate3d(-40px, 0, 0);
  animation: kf-fade-left 0.8s ease-in-out both;
}

/* from right */
.topRight {
  opacity: 0;
  transform: translate3d(40px, 0, 0);
  animation: kf-fade-right 0.8s ease-in-out both;
}

/* from top */
.topTop {
  opacity: 0;
  transform: translate3d(0, -50px, 0);
  animation: kf-fade-top 0.8s ease-in-out both;
}

/* from bottom */
.topBottom {
  opacity: 0;
  transform: translate3d(0, 50px, 0);
  animation: kf-fade-bottom 0.8s ease-in-out both;
}

/* ==============================
   スクロール発火（小移動 0.5s）
   ※ .is-inview または .scrollin が付いたら1回だけ再生
============================== */

/* 初期値 */
.leftAnime,
.rightAnime,
.topAnime,
.bottomAnime {
  opacity: 0;
}
.leftAnime   { transform: translate3d(-50px, 0, 0); }
.rightAnime  { transform: translate3d( 50px, 0, 0); }
.topAnime    { transform: translate3d( 0, -50px, 0); }
.bottomAnime { transform: translate3d( 0,  50px, 0); }

/* 発火 */
.leftAnime.is-inview,   .leftAnime.scrollin   { animation: kf-fade-left   0.5s ease-in-out both; }
.rightAnime.is-inview,  .rightAnime.scrollin  { animation: kf-fade-right  0.5s ease-in-out both; }
.topAnime.is-inview,    .topAnime.scrollin    { animation: kf-fade-top    0.5s ease-in-out both; }
.bottomAnime.is-inview, .bottomAnime.scrollin { animation: kf-fade-bottom 0.5s ease-in-out both; }

/* ==============================
   スクロール発火（左右大移動 0.8s）
============================== */
/* ==============================
   スクロール発火（左右大移動 0.8s）
   ※ 距離だけ大きい版
============================== */
.leftAnimeBig,
.rightAnimeBig {
  opacity: 0;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* 初期：画面外 */
.leftAnimeBig  { transform: translate3d(-110vw, 0, 0); }
.rightAnimeBig { transform: translate3d( 110vw, 0, 0); }

/* 発火（両クラス対応） */
.leftAnimeBig.is-inview,
.leftAnimeBig.scrollin {
  animation: bigInL 0.8s ease-in-out both;
}
.rightAnimeBig.is-inview,
.rightAnimeBig.scrollin {
  animation: bigInR 0.8s ease-in-out both;
}

/* キーフレーム */
@keyframes bigInL {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bigInR {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
/* ==============================
   キーフレーム
============================== */
@keyframes kf-fade-left {
  from { opacity: 0; transform: translate3d(-40px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes kf-fade-right {
  from { opacity: 0; transform: translate3d(40px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes kf-fade-top {
  from { opacity: 0; transform: translate3d(0, -50px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes kf-fade-bottom {
  from { opacity: 0; transform: translate3d(0, 50px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}


/* ==============================
   遅延ユーティリティ（0.1s〜3.5s）
============================== */
.delay01 { animation-delay: 0.1s; }
.delay02 { animation-delay: 0.2s; }
.delay03 { animation-delay: 0.3s; }
.delay04 { animation-delay: 0.4s; }
.delay05 { animation-delay: 0.5s; }
.delay06 { animation-delay: 0.6s; }
.delay07 { animation-delay: 0.7s; }
.delay08 { animation-delay: 0.8s; }
.delay09 { animation-delay: 0.9s; }
.delay10 { animation-delay: 1.0s; }
.delay11 { animation-delay: 1.1s; }
.delay12 { animation-delay: 1.2s; }
.delay13 { animation-delay: 1.3s; }
.delay14 { animation-delay: 1.4s; }
.delay15 { animation-delay: 1.5s; }
.delay16 { animation-delay: 1.6s; }
.delay17 { animation-delay: 1.7s; }
.delay18 { animation-delay: 1.8s; }
.delay19 { animation-delay: 1.9s; }
.delay20 { animation-delay: 2.0s; }
.delay21 { animation-delay: 2.1s; }
.delay22 { animation-delay: 2.2s; }
.delay23 { animation-delay: 2.3s; }
.delay24 { animation-delay: 2.4s; }
.delay25 { animation-delay: 2.5s; }
.delay26 { animation-delay: 2.6s; }
.delay27 { animation-delay: 2.7s; }
.delay28 { animation-delay: 2.8s; }
.delay29 { animation-delay: 2.9s; }
.delay30 { animation-delay: 3.5s; }

/** ==============================
 * animation end
 * ============================== **/
/** ==============================
 * hero animation start
 * ============================== **/

.hero-grid{
display:grid;
grid-template-columns:1fr 1fr;
grid-template-rows:1fr 1fr;
overflow:hidden;
position:relative;
z-index:1;
}

.hero-grid picture{
overflow:hidden;
display:block;
}

.hero-grid picture img{
width:100%;
height:auto;
display:block;
transform:scale(1.08);
opacity:0;
}

/* 背景ズーム（0.6秒） */

.hero-grid picture:nth-child(1) img{
animation:heroBgZoom .6s cubic-bezier(.22,.61,.36,1) 0s forwards;
}

.hero-grid picture:nth-child(2) img{
animation:heroBgZoom .6s cubic-bezier(.22,.61,.36,1) .08s forwards;
}

.hero-grid picture:nth-child(3) img{
animation:heroBgZoom .6s cubic-bezier(.22,.61,.36,1) .16s forwards;
}

.hero-grid picture:nth-child(4) img{
animation:heroBgZoom .6s cubic-bezier(.22,.61,.36,1) .24s forwards;
}

@keyframes heroBgZoom{

0%{
opacity:0;
transform:scale(1.08);
}

100%{
opacity:1;
transform:scale(1);
}

}

/* メッセージ */

.hero-message{
position:absolute;
z-index:2;
opacity:0;
animation:heroMessageIn .4s ease .55s forwards;
}

@keyframes heroMessageIn{

0%{
opacity:0;
}

100%{
opacity:1;
}

}

/* 車 */

.hero-car{
position:absolute;
z-index:3;
opacity:0;
animation:heroCarIn .45s ease .65s forwards;
}

@keyframes heroCarIn{

0%{
opacity:0;
}

100%{
opacity:1;
}

}

/** ==============================
 * hero animation end
 * ============================== **/