@charset "UTF-8";

/* html5,body,font-size(h1-h6 p li dt dd),table. basic style setting in normalize.css */


/* common
----------------------------------------------- */
:root {
  --main_color : silver; 
}

#loading {position: fixed; width: 100%; height: 100%; z-index: 100; background: #ccccbe; text-align: center;}
#loading_logo {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 99;}
#loading_logo .fadeIn {animation-name: fadeInAnime; animation-duration: 1s; animation-delay: .5s; animation-fill-mode: forwards; opacity: 0; filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.1));}
@keyframes fadeInAnime{
  from {opacity: 0;}
  to {opacity: 1;}
}

.inner {margin: auto}

.h_title {font-size: clamp(2.4rem, 2.111rem + 1.19vw, 3rem); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 80px}
.h_title::before {content: "●";}
.h_title .en {font-size: 1.2rem; font-family: "STIX Two Text"; margin-top: 6px}

#over_wrap {position: relative; z-index: 10;}


/* hero
----------------------------------------------- */
#hero {
  position: sticky; top: 0; height: 100vh;
  .hero_haeder {position: absolute; z-index: 100; width: 100%; z-index: 100}
  .hero_haeder .inner {width: min(100%); padding: 18px 30px; display: flex; justify-content: space-between; flex-wrap: wrap; gap:30px; align-items: center}
  .hero_haeder h1 {line-height: 1}
  .hero_haeder p {margin-bottom: 0}
  .hero_haeder p a {background: white; padding: 8px 12px; font-size: 1.4rem; color: #333333; font-weight: 700; letter-spacing: 0}
  .hero_haeder p a:hover {opacity: .8}
  h2 {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 100}
  h2 img {filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.1));}

  .swiper-hero-pc, .swiper-hero-sp {width: 100%; height: 100vh;}
  .swiper-slide, .swiper-img {width: 100%; height: 100%;}
  .swiper-slide img {width: 100%; height: 100%; object-fit: cover; object-position: center; }
  .swiper-wrapper {overflow: hidden}

  /* ズーム */
  .swiper-slide-active .swiper-img,
  .swiper-slide-duplicate-active .swiper-img,
  .swiper-slide-prev .swiper-img {animation: zoomUp 7s linear 0s normal both;}
}

/* 動作のため#hero の外に出す */
@keyframes zoomUp {
  0% {transform: scale(1);}
  100% {transform: scale(1.1);}
}


/* hero_after
----------------------------------------------- */
#hero_after {
  height: 100vh; background: rgba(0, 0, 0, 0); display: flex; justify-content: space-between; flex-wrap: wrap;
  .inner {width: min(750px, 100%);}
  hgroup {color: white; margin-bottom: 60px}
  hgroup p {font-family: "STIX Two Text"; font-size: 1.2rem; margin-bottom: 60px; font-weight: 600; letter-spacing: .05em}
  hgroup h2 {font-size: 3.4rem; margin-bottom: 60px; line-height: 1}
  .detail p {color: white; font-size: 2.4rem; line-height: 2; margin-bottom: 30px}
  .detail p:nth-of-type(3) {margin-bottom: 60px} 

  /* 親要素：aタグ */
  .mail a {
    background: white;
    border: 1px solid #333333;
    line-height: 1;
    padding: 21px 70px 21px 21px; /* 右側の70pxで矢印のスペースを確保 */
    color: #333333;
    font-size: 1.6rem;
    position: relative;
    font-weight: 700;
    display: inline-block; /* もしくは block。aタグに高さを認識させるため */
    text-decoration: none;
    transition: all 0.3s;
    letter-spacing: 0;
  }
  
  /* 共通設定：::before と ::after を同じ位置に重ねる */
  .mail a::before,
  .mail a::after {
    content: "";
    position: absolute;
    top: 50%; /* 縦中央 */
    right: 21px;
    transform: translateY(-50%); /* 縦中央補正 */
    width: 16px;  /* SVGの横幅に合わせて調整してください */
    height: 16px; /* SVGの縦幅に合わせて調整してください */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: opacity 0.3s;
  }
  
  /* 通常時の矢印 (::after) */
  .mail a::after {background-image: url(../img/link_arrow.svg); opacity: 1;}
  
  /* ホバー時の矢印 (::before) */
  .mail a::before {background-image: url(../img/link_arrow_hover.svg); opacity: 0; /* 最初は隠しておく */ }
  
  /* ホバー時の挙動 */
  .mail a:hover {border-color: #0050a0; color: #0050a0;}
  .mail a:hover::after {opacity: 0; /* 通常矢印を透明にする */}
  .mail a:hover::before {opacity: 1; /* ホバー用矢印を表示する */}
}


/* header
----------------------------------------------- */
#header_main {
  position: sticky; top:0; width: 100%; z-index: 100; background: white;
  .inner {width: min(100%); padding: 18px 30px; display: flex; justify-content: space-between; flex-wrap: wrap; gap:30px; align-items: center}
  h1 {line-height: 1}
  p {margin-bottom: 0}
  p a {background: #333333; padding: 8px 12px; font-size: 1.4rem; color: white; font-weight: 700; letter-spacing: 0}
}

/* works
----------------------------------------------- */
#works {
  padding: 120px 0; background: white;
}


/* news
----------------------------------------------- */
#news {
  background: #f6f6f0; padding: 120px 0;
}


/* footer
----------------------------------------------- */
footer {
  padding: 100px 0; background: white;
  .inner {display: flex; flex-wrap: wrap; gap:50px} 
  .info li {font-size: 1.3rem; margin-bottom: 3px}
  .info li small {letter-spacing: 0}

  /* 親要素：aタグ */
  .info li:nth-of-type(6) a {
    position: relative;
    display: inline-block; /* text-decorationやpaddingを正しく効かせるため */
    padding-left: 25px;    /* アイコンの幅に合わせて調整（20pxより少し余裕を持たせています） */
    border-bottom: 1px solid white;
    color: inherit;        /* 必要に応じて色を指定 */
    text-decoration: none;
    transition: border-color 0.3s, color 0.3s;
  }
  
  /* 共通設定：通常時とホバー時のアイコンを同じ位置に固定 */
  .info li:nth-of-type(6) a::before,
  .info li:nth-of-type(6) a::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;  /* SVGのサイズに合わせて調整してください */
    height: 18px; /* SVGのサイズに合わせて調整してください */
    background-repeat: no-repeat;
    background-position: center left;
    background-size: contain;
    transition: opacity 0.3s;
  }
  
  /* 通常時のInstagramアイコン */
  .info li:nth-of-type(6) a::before {background-image: url(../img/footer_sns_instagram.svg); opacity: 1;}
  
  /* ホバー時のInstagramアイコン（最初から読み込んでおく） */
  .info li:nth-of-type(6) a::after {background-image: url(../img/footer_sns_instagram_hover.svg); opacity: 0;}
  
  /* ホバー時の挙動 */
  .info li:nth-of-type(6) a:hover {border-bottom: 1px solid #0050a0; color: #0050a0;}
  .info li:nth-of-type(6) a:hover::before {opacity: 0; /* 通常アイコンを隠す */}
  .info li:nth-of-type(6) a:hover::after {opacity: 1; /* ホバー用アイコンを表示 */}
}


/*---------------------------------------------------------------------
 jquery js 関連 css
---------------------------------------------------------------------*/




/*---------------------------------------------------------------------
 メディアクエリー Foundation 6 に準拠
---------------------------------------------------------------------*/
 /* スマホ「縦・横」対応 */
@media screen and (min-width: 320px) and (max-width: 639px) {
.no_br_sp br {display: none !important}
br.sp_non {display: none}
.inner {padding: 0 30px}

#loading_logo .fadeIn {max-width: 130px}
#hero h2 img {max-width: 130px}

#hero .hero_haeder .inner {padding: 18px}
#header_main .inner {padding: 18px}

#hero_after {height: auto; padding: 140px 0}
#hero_after .inner {width: 100%}
#hero_after hgroup h2 {line-height: 1.6}

footer {padding-bottom: 40px}
footer .inner {display: grid; grid-template-columns: 1fr; gap: 40px;}
footer .logo {text-align: center}
footer .logo img {width: 120px}
footer .info li {text-align: center}
footer .info li:nth-of-type(6) {margin-bottom: 18px}
}

 /* スマホ・タブレット「縦・横」共通対応 */
@media screen and (min-width: 320px) and (max-width: 1023px){
.no_br br {display: none !important}
#hero {height: 100svh;}
}


 /* スマホ「縦」向き対応 */
@media screen and (min-width: 320px) and (orientation:portrait) {
/* Styles */
}


 /* スマホ以降（320px 以下）iPhone SE */
@media screen and (max-width: 320px) {
/* Styles */
}


 /* スマホ以降（320px 以降） */
@media screen and (min-width: 321px) {
/* Styles */
}


 /* タブレット対応 */
@media screen and (min-width: 640px) and (max-width: 1023px) {
/* Styles */
}


 /* タブレット以降（640px 以降） */
@media screen and (min-width: 640px) {
br.tb_non {display: none}
.inner {padding: 0 40px}
}

 /* タブレット以下（1023px 以下） */
@media screen and (max-width: 1023px) {
/* Styles */
}


 /* 1024px以降 iPad 横 iPad 12.9 縦 含む */
@media screen and (min-width: 1024px) {
br.pc_non {display: none} 
/* Styles */
}

 /* 1025px以降 iPad 横 iPad 12.9 縦 以降 */
@media screen and (min-width: 1025px) {
.inner {width: min(1140px, 100%); padding: 0 50px}
}


/* PCモニター（1060px以降） */
@media only screen and (min-width : 1060px) {
/* Styles */
}

/* PCモニター（1080px以降） */
@media only screen and (min-width : 1080px) {
/* Styles */
}


/* PCモニター（1160px以降） */
@media screen and (min-width: 1160px) {
/* Styles */
}



/* PCモニター（1240px以降） */
@media screen and (min-width: 1240px) {
/* Styles */
}


/* PCモニター大（1480px以降） */
@media only screen and (min-width : 1480px) {
/* Styles */
}


/*---------------------------------------------------------------------
 print
---------------------------------------------------------------------*/
@media print {
body {-webkit-print-color-adjust: exact;} /* Chrome 背景色強制印刷 */ 
a[href]:after {content: "" !important;}
abbr[title]:after {content: "" !important;}
.show-for-small-only {display: none !important}
.pagetop.show {display: none !important}
body, h1, h2, h3, h4, h5, h6, li, dt, dd, p, th, td, .mincho {font-family: sans-serif !important}  /* Chrome印刷で日本語が表示されない対応 */
}