p.section-description { font-size:16px; text-align:justify;}
@media screen and (min-width:768px) {
  p.section-description { font-size:18px; letter-spacing:0.05em;text-align: justify; font-family:"Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN","メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;font-weight: 400; }
}

/*代表メッセージ*/
.section.section--ceo {  width:100%; height:auto; background:#fff; padding:50px 0 100px 0;} 
.section--ceo .contents { width:100%; height:auto; position:relative; }

.section--ceo .contents .photo_ceo { width:80%; margin-left:20%;  }
.section--ceo .title .title_text { width:auto; }
.section--ceo .ceo_text_wrap { width:80%; background:rgba(255, 255, 255, 0.6); }
.section--ceo .ceo_text_wrap h2 { width:95%; font-size:18px; color:#B3212B; letter-spacing:0.05em; margin-top:50px; margin-left:5%; display:inline-block; }
.section--ceo .ceo_text_wrap p.section-description { width:110%; color:#000; margin-top:30px; margin-left:5%; margin-bottom:0; text-align: justify;}
.section--ceo .title_copy { width:90%; margin-left:5%; margin-bottom:0; }
.section--ceo .title .title_text { width:auto; }
.section--ceo .button_with_arrow { margin-top:40px; z-index:999999; }
.contents_wrap.ceo { padding-bottom:0; }
@media screen and (min-width:768px) {
  .section.section--ceo  { height:100vh; position:absolute; bottom:0; z-index:-10; background:#fff; padding-top:100px; }
  .section--ceo .contents { width:90%; top:20vh; position:absolute; }
  .section--ceo .contents .photo_ceo { width:860px; top:0; right:0;  position:absolute; margin-left:initial; z-index:-1; }
  .section--ceo .ceo_text_wrap { width:43%; margin-top:initial; padding-bottom:25px; margin-top:-200px; z-index:2; }
  .section--ceo .ceo_text_wrap h2 { margin-top:11vw; margin-left:0; }
  .section--ceo .title_copy { width:100%; margin-left:initial; margin-bottom:32px; letter-spacing:0.05em; }
  .section--ceo .ceo_text_wrap p.section-description { width:100%; margin-top:initial; margin-left:initial; }
  .contents_wrap.ceo { padding-bottom:100px; }
}
@media screen and (min-width:1180px) {
  .section--ceo .contents { width:1080px; top:initial; margin-top:0px; }
}


.ceo_text_wrap_sp { width:70%; display:block; background:rgba(255, 255, 255, 0.6); position:absolute; top:40vw; padding:10px 0; }
.ceo_text_wrap_sp h2 {font-size:18px; margin-left:5%; color:#B3212B;  }
.ceo_text_wrap { display:none; }
.section-description.gothic.inline_sp { width:90%; display:inline-block; color:#000; margin:30px 5% 0 5%; }

@media screen and (min-width:768px) {
  .ceo_text_wrap_sp { display:none; }
  .ceo_text_wrap { display:block; }
  .section-description.gothic.inline_sp { display:none; }
  .button_with_arrow.inline_sp { display:none; }
}




/*スタッフ*/
.staff_list { width:100%; display:flex; margin-bottom:80px;  flex-direction: column-reverse; flex-wrap:wrap; }
.staff_list .photo_staff { width:100%; }
.staff_list .copy_staff { font-size:20px; margin-bottom:64px; color:#000; }
.staff_list .bgappearTrigger { font-size:23px; margin-bottom:10px; line-height:1.3em; position:relative; z-index:1;color:#000; }
.staff_list .button_with_arrow { display:none; }
.staff_list:hover .button_with_arrow { background:none; border:2px solid #fff; color:#fff; }
.staff_list .copy_staff h2 { font-size:16px; }
.staff_text h2 { line-height:1.5em; }
@media screen and (min-width:1025px) {
    .staff_list { width:100%; position:relative; margin-bottom:150px; flex-direction: initial;}

    .staff_list .button_with_arrow { background:none; border:2px solid #fff; color:#fff; margin:30px 0 0 0; display:flex; }
    .staff_list:hover .button_with_arrow { background:none; border:2px solid #fff; color:#fff; }


    .staff_list .photo_staff { width:660px; position:absolute; right:0; z-index:0; }
    .staff_list .copy_staff { font-size:44px; line-height:1.5em; display:inline-block; position:relative; z-index:1; }
    .staff_list .bgappearTrigger { font-size:44px; margin-bottom:10px; line-height:1.3em; display:inline-block; position:relative; z-index:1;color:#000; }
    .staff_list .copy_staff h2 { font-size:18px; margin:80px 0 20px 0; display:inline-block; }
    .staff_text { position:relative; z-index:1; }
    .staff_text h2 { font-size:20px; margin:60px 0 20px 0; line-height:2em; }
    .staff_text h2 small { font-size:16px; }
    .button_with_arrow { margin-top:50px; }

    /* 偶数番目だけ左右を逆にする */
    .staff_list:nth-of-type(even) {flex-direction: row-reverse;}
    .staff_list:nth-of-type(even) .photo_staff { width:660px; position:absolute; left:0; z-index:0; }
    .staff_list:nth-of-type(even) .staff_text { text-align:right; }
    .staff_list:nth-of-type(even) .button_with_arrow { margin-right:0; margin-left:250px; /*float:right;*/ }
  
 


}



.bgextend {animation-name: bgextendAnimeBase;animation-duration: 1s;animation-fill-mode: forwards;position: relative;overflow: hidden;/*　はみ出た色要素を隠す　*/opacity: 0;padding: 10px;}
@keyframes bgextendAnimeBase {
      from {opacity: 0;}
      to {opacity: 1;}
}
/*中の要素*/
.bgappear {animation-name: bgextendAnimeSecond;animation-duration: 1.5s;animation-delay: 0.6s;animation-fill-mode: forwards;opacity: 0; color:#000; position:relative; z-index:10; }
@keyframes bgextendAnimeSecond {
      0% {opacity: 0;}
      100% {opacity: 1;}
}
/*左から右*/
.bgLRextend::before {animation-name: bgLRextendAnime;animation-duration: 1.5s;animation-fill-mode: forwards;content: "";position: absolute;width: 100%;height: 100%;background-color: #fff;/*伸びる背景色の設定*/}
@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(1);}
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,.bgLRextendTrigger {opacity: 0;}
.bgLRextend::before { padding:18px 0; }
.bgextend,.lineTrigger {padding:5px 0;box-sizing: border-box;}
@media screen and (min-width: 768px) {
      .bgLRextend::before { padding:initial; }
      .bgextend,.lineTrigger {padding:5px 0;}
}
@media screen and (min-width:1024px) {
  .bgextend,.lineTrigger {padding:20px 0;}
}

    
/*画像を下から表示*/
.reveal-from-bottom {
  opacity: 0;
  clip-path: inset(100% 0 0 0); /* 下から全体を隠す */
  transform: translateY(30px); /* ← これで少し下から入ってくる */
  transition: clip-path 1s ease-out, opacity 1s ease-out;
}

/* 表示トリガー */
.reveal-from-bottom.active {
  opacity: 1;
  transform: translateY(0);
  clip-path: inset(0 0 0 0); /* 全部見せる */
}





/*募集要項*/
.staff_wrap { width:100%; display:block; }
.staff_wrap li { width:100%; margin-bottom:20px; display:flex; border-bottom:1px solid #ccc; padding-bottom:12px; }
.staff_wrap li:last-child {  border-bottom:0; } 
.staff_wrap li a { width:100%; height:100%; }
.staff_wrap li a:link { color:#000; }
.staff_wrap li a .staff_photo { width:40%; position:relative; margin-right:5%; margin-bottom:0; display: inline-block;overflow:hidden;}
.staff_wrap li a .staff_photo img { width:100%;height:100%;object-fit: cover; /* カバー表示でトリミングされても比率維持 */display: block; transition: transform 0.5s ease; transform: scale(1);}


.staff_wrap li a .staff_photo .staff_jobtype { display:none; }
.staff_wrap li a .jobtitle { width:55%; display:block; float:right; }
.staff_wrap li a:hover { opacity:0.7; }

.staff_wrap li a .staff_photo .date { width:100%; display:block; }
.staff_wrap li a small { display:none; }
.photo_recruit { width:100%; margin:0 auto 50px auto; display:block; }
@media screen and (min-width:768px) {
    .staff_wrap { display:flex; flex-wrap:wrap; justify-content: space-between; }
    .staff_wrap li { width:31%; display:block; border-bottom:0px; margin-bottom:32px; padding-bottom:initial; }
    .photo_recruit { width:50%; margin:0 auto 50px auto; display:block; }
    .staff_wrap li a .staff_photo { width:100%; position:relative; margin-bottom:0;}
    .staff_wrap li a .staff_photo img  { width:100%; height:100%; }
    .staff_wrap li a .staff_photo .staff_jobtype { display:inline-block; position:absolute; left:0; bottom:0; background: rgba(0, 0, 0, 0.5);  color:#fff; padding:5px; z-index:1; }
    .staff_wrap li a:hover .staff_photo img  {transform: scale(1.2); display: block;width:100%; }
    .staff_wrap li a:link .jobtitle { width:100%; float:initial; }
    .staff_wrap li a small { width:100%; display:block; }
}

/*会社概要などのバナー4点*/

.img-wrap img {display: block;width:100%; }
.img-wrap .overlay {width: 100%;height: 100%;position: absolute;top: 0;left: 0;background-color: rgba(0, 0, 0, 0.32); /* 黒32% */mix-blend-mode: multiply;pointer-events: none; /* クリックできるように */}

.banner-list { width:90%; margin:40px auto 0 auto; display:flex; justify-content: space-between; flex-wrap:wrap; }
.banner-list li { width:100%; margin-bottom:20px; }
@media screen and (min-width:768px) {
  .banner-list { width:90%; max-width:1080px; margin:10vw auto 100px auto ; }
  .banner-list li { width:48%; }
}


.banner-list li a { width:100%; position:relative; }
.banner-list li a:link { color:#fff; }
.banner-list li a em { position:absolute; bottom:10px; left:10px; color:#fff; z-index:1; margin-bottom:0; }
@media screen and (min-width:768px) {
  .banner-list li a em.headline-xl {  bottom:-10px; margin-bottom:0; }
}
.banner-list li a .nav_arrow { width:45px; height:45px; position:absolute; bottom:15px; right:20px; border-radius:50%; border:2px solid #fff; z-index:1;  display:flex; align-items:center; justify-content: center; overflow:hidden; }
.banner-list li a .nav_arrow img { width:21px;}
@media screen and (min-width:768px) {
  .banner-list li a .nav_arrow { width:70px; height:70px; }
  .banner-list li a .nav_arrow img { width:32px;}
}

.banner-list li a:hover .nav_arrow img {animation: arrowLoop 1s linear infinite;}
/* アニメーション定義：右にスライドして左から再登場 */
@keyframes arrowLoop {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  49% {
    transform: translateX(70px);
    opacity: 0;
  }
  50% {
    transform: translateX(-70px);
    opacity: 0;
  }
  51% {
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.banner-list li .img-wrap img { width: 100%;display: block;transition: transform 0.5s ease; transform: scale(1); }
.banner-list li a:hover .img-wrap img {transform: scale(1.2); }
.banner-list li .img-wrap {position: relative;display: inline-block;width:100%; overflow:hidden; }


/*数字で見るアート建工*/
.section.section--data { height:100vh; background:#E5E5E5; position:relative; overflow:hidden; display:block; }
.section.section--data .title { margin-bottom:20px; }
.section--data .button_with_arrow { position:absolute; bottom:20vw; left: 50%; transform: translateX(-50%);}
.section--data p.section-description { margin:30px 0 0 0;}
@media screen and (min-width:768px) {
  .section.section--data { display:flex; height:100%;  }

  .section--data .contents { padding-top:64px; }
  .section--data .button_with_arrow { position:relative; bottom:initial; left:initial; left:0; transform:initial; }
  .section.section--data p.section-description { font-size:18px; letter-spacing:0.05em; margin:40px 0 0 0; }

}
@media screen and (min-width:1080px) {
  .section--data .title { position:absolute; top:15px; margin-bottom:initial;}
}
.section--data p.section-description { color:#000;  }


@media screen and (min-width:374px) {
  .section--data .map { width:260%; position:absolute; bottom:-80vw; left:-85vw; }
  .section--data .map_izumo { position:absolute; display:flex; bottom:40vw; left:0vw; }
  .section--data .map_izumo span { width:100%; font-size:14px; margin-right:10px; text-align:left; display:block; }
  
  .section--data .map_matsue { width:90px; position:absolute; display:flex; bottom:52vw; left:16vw; }
  .section--data .map_matsue span { font-size:14px; margin-right:10px; }
  
  .section--data .map_tottoli { width:70px; position:absolute;  bottom:60vw; left:84vw;}
  .section--data .map_tottoli span { font-size:14px; width:100%; display:inline-block; }
  
  .section--data .map_honsha { width:70px; text-align:center; position:absolute;bottom:50vw; left:45vw; }
  .section--data .map_honsha span { font-size:14px; width:100%; display:inline-block; }
  
  .section--data .map_yonago { width:90%; display:flex; position:absolute;bottom:50vw; left:58vw; }
  .section--data .map_yonago span { font-size:14px; display:block; margin-left:10px; }

  
  }

@media screen and (min-width:414px) {
.section--data .map { width:260%; position:absolute; bottom:-65vw; left:-85vw; }
.section--data .map_izumo { position:absolute; display:flex; bottom:55vw; left:0vw; }
.section--data .map_izumo span { width:100%; font-size:14px; margin-right:10px; text-align:left; display:block; }

.section--data .map_matsue { width:90px; position:absolute; display:flex; bottom:67vw; left:16vw; }
.section--data .map_matsue span { font-size:14px; margin-right:10px; }

.section--data .map_tottoli { width:70px; position:absolute;  bottom:75vw; left:84vw;}
.section--data .map_tottoli span { font-size:14px; width:100%; display:inline-block; }

.section--data .map_honsha { width:70px; text-align:center; position:absolute;bottom:66vw; left:45vw; }
.section--data .map_honsha span { font-size:14px; width:100%; display:inline-block; }

.section--data .map_yonago { width:90%; display:flex; position:absolute;bottom:65vw; left:58vw; }
.section--data .map_yonago span { font-size:14px; display:block; margin-left:10px; }
}

.map_pin { width:10px; }
.map_price { font-size:14px; color:#B3212B; }





.section--data { position:relative; }
.section--data .map_sp { width:110%; position:absolute; bottom:39vw; margin-left:-5%;  }
.section--data .map_wrap { display:none; }
@media screen and (min-width:1080px) {

  .section--data .map_sp { display:none; }
  .section--data .map_wrap { width:100%; height:50vw; position:absolute; overflow:hidden; top:0; right:-100px; display:block; }
  .map_wrap .map { width:100%; position:absolute; bottom:-25vw; left:15vw; }
  .map_wrap .map_izumo { width:90px; position:absolute; display:flex; bottom:22vw; left:49vw; }
  .map_wrap .map_izumo span { font-size:20px; margin-right:10px; }

  .map_wrap .map_matsue { width:90px; position:absolute; display:flex; bottom:26vw; left:57vw; }
  .map_wrap .map_matsue span { font-size:20px; margin-right:10px; }

  .map_wrap .map_kurayoshi { width:70px; position:absolute;  bottom:26vw; left:81vw;}
  .map_wrap .map_kurayoshi span { font-size:20px; width:100%; display:inline-block; }

  .map_wrap .map_tottoli { width:70px; position:absolute;  bottom:30.5vw; left:88vw;}
  .map_wrap .map_tottoli span { font-size:20px; width:100%; display:inline-block; }

  .map_wrap .map_honsha { width:70px; text-align:center; position:absolute;bottom:25.5vw; left:67vw; }
  .map_wrap .map_honsha span { font-size:20px; width:100%; display:inline-block; }

  .map_wrap .map_yonago { width:90%; display:flex; position:absolute;bottom:25vw; left:72vw; }
  .map_wrap .map_yonago span { font-size:20px; display:block; margin-left:10px; }
    
  .map_pin { width:20px; }
  .map_price { font-size:20px;  }

  .contents_wrap.data .section-description { margin:40px 0 0 0; font-family:"Oswald", sans-serif;font-optical-sizing: auto;font-weight:800;font-style: normal;}


  
}

.section--data .button_with_arrow.inline_pc { display:none; }
.section--data .button_with_arrow.inline_sp { display:flex; }
@media screen and (min-width:768px) {
  .section--data .button_with_arrow.inline_sp { display:none; }
  .section--data .button_with_arrow.inline_pc { display:flex; }
}

.section--last .nav_entry_button em { color:#fff; }
.section--last .nav_entry_button {transition: background 0.3s ease; }
.section--last .nav_entry_button:hover { background:#000; }
.section--last .nav_entry_button {width:90%; height:70px; position:relative; background:#B3212B; color:#fff;display: flex;align-items: center;  justify-content: center; text-decoration: none;gap: 0.5em; padding:20px 0; margin:10px auto 0 auto; }
.section--last .nav_entry_button em { font-size:21px; }
.section--last .nav_entry_button .nav_arrow { width:32px; height:32px; border-radius:50%; border:2px solid #fff; z-index:1;  display:flex; align-items:center; justify-content: center; overflow:hidden; }
.section--last .nav_entry_button .nav_arrow img { width:15px;} 
@media screen and (min-width:768px) {
  .section--last .nav_entry_button {width:600px; height:125px; padding:20px 0; margin:50px auto 0 auto; }
  .section--last .nav_entry_button em { font-size:40px; }
  .section--last .nav_entry_button .nav_arrow { width:70px; height:70px; }
  .section--last .nav_entry_button .nav_arrow img { width:32px;}
  .section--last .nav_entry_button:hover { background:#000; }
  .section--last .nav_entry_button:hover .nav_arrow img {animation: arrowLoop 1s linear infinite;}

@keyframes arrowLoop {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  49% {
    transform: translateX(70px);
    opacity: 0;
  }
  50% {
    transform: translateX(-70px);
    opacity: 0;
  }
  51% {
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
}

/* ↓ 疑似要素を使って、画面外に白い縦長を用意しておく */
.section--last .nav_entry_button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;                   /* ボタン左よりさらに外側からスタート */
  width: 50%;                   /* 幅はボタンの50%程度を目安に */
  height: 100%;
  background: rgba(255, 255, 255, 0.2); /* 半透明の白 */
  transform: skewX(-25deg);     /* 軽く斜めに傾ける */
  transition: left 0.5s ease;   /* ホバーで「left」を動かす */
  z-index: 1;                   /* ボタン文字の上に重ねたい場合は大きめにする。下げるなら 0 に */
  pointer-events: none;         /* クリックを邪魔しない */
}

.section--last .nav_entry_button:hover::before {
  left: 125%; /* ボタン右側＋さらに余白分まで移動させる */
}










.contents_wrap.last { height:auto; padding-bottom:100px; }
.contents_wrap.last .headline-lg { margin:-40px 0 40px 0; }
@media screen and (min-width:768px) {
  .contents_wrap.last { padding-bottom:150px; }
  .contents_wrap.last .headline-lg { margin-top:initial; }
}