@charset "UTF-8";
/* ----- reset ----- */
*,*::before,*::after { box-sizing:border-box; }
body,h1,h2,h3,h4,p,ul[class],ol[class],li,figure,figcaption,blockquote,dl,dd { margin:0; position:relative; }
body { min-height:100vh; scroll-behavior:smooth; text-rendering:optimizeSpeed; line-height:1.5; }
ul,ol { padding:0; list-style:none; }
ul[class],ol[class] { list-style:none; }
h1 { line-height:1; }
a { text-decoration:none; }
a:not([class]) { text-decoration-skip-ink:auto; }
img { max-width:100%; height:auto; /*display:block;height: fit-content;*/ }
article > * + * { margin-bottom:1em; }
input,button,textarea,select { font:inherit; }
address { text-align:center; font-style:normal; }
iframe { margin:0 auto; }
@media (prefers-reduced-motion: reduce) {
 * { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}
/* ----- root / common ----- */
:root {
  --theme-color:#E50012;
  --font-gothic:Hiragino Sans, "ヒラギノ角ゴシック", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  --font-mincho:"Shippori Mincho", serif;;
}
body {
  margin:0;padding:0; 
  color:#000;
  font-size:18px; line-height:2; font-weight: 400; font-family:var(--font-mincho); 
  -webkit-text-size-adjust: 100%; overflow-x: hidden;
}
a { color:#000; }
.shippori-mincho-regular { font-family: "Shippori Mincho", serif;font-weight: 400; font-style: normal; }
br.sp-only { display:none; }
.flex { display: flex;  align-items: flex-start; }
.col-2 { }
.col-2 .flex > * { flex-basis: 48.5%; }
.col-3 {}
.col-3 .flex > * { flex-basis: 32%; }
.col-2 .flex,
.col-3 .flex { justify-content: space-between; }

/* オーバーレイ背景 */
.overlay {
  position:fixed; height:100vh; inset:0; display:none;
  background:rgba(0,0,0,0.8); 
  pointer-events: none;
  transition: 0.4s; z-index: 100;
}
.overlay.panelactive{ display:block!important; }


/* ----- header ----- */
.header {
  container: header-g / inline-size; resize: horizontal; 
  position: fixed; top: 30px; left: 50%;
  width: 100%; max-width: 85vw;
  -webkit-transform: translateX(-50%); transform: translateX(-50%);
  z-index: 1000; 
}
.header__wrap {
  display: -webkit-box; display: -ms-flexbox; display: flex;  align-items: flex-start;
  -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; 
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  padding: 8px 15px;
  background: #fff;
}
.header__head { max-width: 265px; margin-right: 20px; }

.header__item { margin-left:auto; display:block; -ms-flex-negative: 0; flex-shrink: 0;  }
.header__item .pc-only { display: block; display: flex; }
.header__item ul:not(.pc-only ) { display:none; }
.nav__wrap { display: -webkit-box; display: -ms-flexbox; display: flex;}
.nav__links {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  margin-right: 28px;
}
.nav__links li { margin-right: 28px;}
.nav__links li a { display:block; padding: .5em 0; font-weight:bold; color: #000 !important; }
.nav__links li.sub { font-size:70%; color:#6d6b6b; }


@container header-g (max-width: 800px) {
  .header { top:0; }
  .header__item { position:relative;  }
  .nav__wrap { flex-direction:column; height: 80vh; overflow-x: auto; }
  .openbtn{
	position:fixed; z-index:9999; cursor:pointer;
	top:5px; right:10px; width:48px; height:48px;
  }
  /*×に変化*/	
  .openbtn span{
  width: 45%; display: inline-block; transition: all .4s;
  position: absolute; left: 14px; height: 3px;
  border-radius: 2px; background-color:#000;
  }
  .openbtn span:nth-of-type(1) { top:15px; }
  .openbtn span:nth-of-type(2) { top:23px; }
  .openbtn span:nth-of-type(3) { top:31px; }
  .openbtn.active span:nth-of-type(1) { width:30%; top:18px; left:18px; transform:translateY(6px) rotate(-45deg); }
  .openbtn.active span:nth-of-type(2) { opacity:0; }
  .openbtn.active span:nth-of-type(3) { top:30px; left:18px; width:30%; transform:translateY(-6px) rotate(45deg); }
 /*ナビゲーション*/
  #js-nav{
  position:fixed; z-index:99; visibility:hidden;
	inset:0; width:100%; height:80vh; border:1px solid #ddd; background:#fff;
  opacity:0; transition: opacity 0.4s ease, visibility 0.4s ease;
  }
  #js-nav.panelactive { visibility:visible; z-index:999; opacity:1; }
  #js-nav.panelactive .nav__wrap { padding:4vh 0;}
  .header__item ul { display: block; }
  #js-nav ul { display:none; position:relative; z-index:999; }
  #js-nav.panelactive ul { display:block; min-width:60%; max-width:600px; margin:0 auto; margin-top:2em; }
  #js-nav li { width:100%; margin:0; text-align:center; }
  #js-nav li:not([class]) { border-bottom:1px solid #ddd; }
  #js-nav li a{ display:block; text-transform:uppercase; letter-spacing:0.1em; }
  /*ナビゲーションの縦スクロール*/
  /* #js-nav.panelactive #js-nav-list{
  position:fixed; z-index:999; 
  width:100%; height:100vh; overflow: auto; -webkit-overflow-scrolling: touch;
  } */
}

/* .nav__contact {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-orient: vertical; -webkit-box-direction: normal;
    -ms-flex-direction: column; flex-direction: column;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    padding: 0 20px;
    font-weight: bold; color: #fff;
    background: #E50012;
} */

/* ----- footer ----- */
footer { margin:4vh 0 0; width:85vw; }
footer .flex { align-items: center; }
footer small { display:inline-block; margin-top:.5em; padding-left:2em; font-size:.6em; font-family:var(--font-gothic); }

/* ----- main ----- */
main section { margin:4vh auto 6vh; max-width:85vw; }
section { container: sec-flex / inline-size; resize: horizontal; }
@container sec-flex (max-width: 600px) {
  .flex { display: block; }
}
@media (max-width: 980px) {
  section.flex { flex-direction: column;}
  section.flex > * { display: block; flex-basis: 100%; }
}

/* headline h2 */
main h2 { 
  margin-top:2vh; 
  font-family:var(--font-mincho); font-weight:600; color:#222; 
  font-size:clamp(30px, 3vw, 46px); line-height: 1.2;
}
main h2 span { 
  position:relative; display:inline; 
  font-size: clamp(12px, 1.1vw, 14px); color:var(--theme-color); font-family:"游ゴシック体", "Yu Gothic", YuGothic; 
  padding-right:10px; width:100%;
}
main h2 i { 
  display: inline-block; position: relative; top:-.1em; right:0;
  width:60px; height:1px; 
  background-color:var(--theme-color); 
}
main h2 p { margin:.5em .5em .8em; }

/* ----- news ----- */
@scope (.news ){
  h2 { flex-basis:26% }
  div#app { flex-basis:72%; margin-bottom:3vh; }
  ul li { display: flex; width:100%; padding:2em 1em; border-bottom:1px solid #ddd; }
  li p { margin-left:2em; }
  li a { color:#000; }
  li a:hover { opacity: .7;}
}

/* ----- PHILOSOPHY ----- */
.bg_ph { 
  width:100vw; height:auto; padding:2vh 5vw 1vh;
  background:url(../img/bg_skyblue.jpg) no-repeat center 0; background-size:cover;
}
@scope (.bg_ph ) {
  .flex { flex-direction:row-reverse; justify-content:space-between; }
  .inner { flex-basis:55%; padding-bottom:2em; }
  .img { flex-basis:43%; padding:5%;}
  .txt + .txt { margin-top: .8em; }
}

/* ----- img_wrap ----- */
@scope (.img_wrap) {
  :scope { overflow: hidden; margin-bottom:1em; }
  a::before { 
  background:#0000009e; position: absolute; top:0; left:0; content:""; width:100%; height:100%; 
  }
  a {
  width:100%; height:100%; display:block; transition-duration: 0.5s; 
  display: grid; justify-items: center; align-items: center;
  }
  img { grid-row: 1 / 2; grid-column: 1 / 2; }
  a:hover img { transform: scale(1.05); transition-duration: 0.4s; }
  span {
  grid-row: 1 / 2; grid-column: 1 / 2; z-index: 10; 
  font-size: clamp(24px, 2.8vw, 36px); color:#fff; font-weight: bold; text-shadow: 0 0 8px rgb(34, 34, 34);
  }
}

/* ----- btn_mark ----- */
@scope(.btn_mark ) {
  :scope { justify-self: center; width:100%; }
  a { 
  display: block; min-height:45px; padding:1.2em; margin-bottom:.5em; line-height: 1.4; 
  color:#fff; text-align: center; font-size: clamp(24px, 2.6vw, 34px);
  background:#3a3a3a url(../img/mark.svg) no-repeat right bottom; background-size:120px; 
  }
  a:hover { 
  transition: .3s cubic-bezier(0.45, 0, 0.55, 1);
  background-color:var(--theme-color);
  }
  a ~ span { display:block; font-family: var(--font-gothic); line-height: 1.6; margin-bottom:1em; }
}

/* ----- COMPANY ----- */
.bg_com { width:100vw; height:auto; padding:4em 5vw; }
@scope (.bg_com ) {
  :scope { position:relative; }
  :scope::before{
  position: absolute; top:3em; left:-84vw; content:""; z-index:-1;
  width:100%; height:100%; background:#f2f2f2;
  }
  h2 { flex-basis:26%; }
  div.inner { flex-basis:74%; margin:3em 0; font-family:var(--font-gothic); font-weight:normal; }
  .inner .col-2 { margin-top:3em; }
  .inner .col-2 > div { flex-basis:47%; margin-left: auto; }
  h3 { font-size:clamp(24px, 2.6vw, 34px); font-family: var(--font-mincho); }
  h4 { font-size:1em; font-weight:600; display:inline-block; margin-top:1em; padding:.15em 1em; border:1px solid #000; }
  td,th { padding:1em 1.5em; border-bottom:1px solid #ddd; }
  th { font-weight:normal; text-align:left; width:8em; }
  .link_map { 
  background: #c9c6c6 url(../img/map_pin.svg) no-repeat center left; background-size:14px;
  padding: .3rem 1rem .3rem 1.3rem;
  font-size: .8em; color: #000;
  border: solid #c9c6c6; border-left-width:.8rem;
  display: inline-block; line-height: 1;
  }
  .link_map:hover { opacity: .7; }
}


/* ========= media ========== */
@media (min-width:1800px) {
  body { font-size:22px; }
  p.txt { line-height: 2.6; }
  .btn_mark a { padding:1.2em .8em;}
}
@media (max-width:900px) {
  br.sp-only { display: block; }
  br.pc-only { display: none!important; }
  /* 0.5秒間かけてフェードイン */
  .fadeIn500ms {
    animation-name: fadeIn500ms;
    animation-delay: 500ms;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    opacity: 0;
  }
  @keyframes fadeIn500ms {
      0% {}
      100% { opacity: 1;}
  }
}
@media (max-width:500px) {
  body { font-size:16px; line-height:1.8; }
  ul { margin:0; }
  .header__head img { max-width:70%; }
  .openbtn { top:0; }
  .news li { display: block; padding:1em; }
  .news li p { margin:0; }
  .bg_com::before{ height:200px!important;}
  .bg_com th,
  .bg_com td { display:block; width:100%; }
  .bg_com th { font-weight:600; border:none; padding-bottom: 0; }
  footer .flex { flex-direction: column; }
  footer img { width:150px; }
}

/* ========= mv ========== */
.main-top { text-align: center; }
@scope (.main-top ){
  :scope {
  grid-row: main; height: 80vh; width: 100vw; background:#a0a0a0;
  }
  .movie_blk {
    position: relative; height:100%; width: 100vw;
  }
  .movie_blk video {
  width: 100%; height: 100%; object-fit: cover;
  position: absolute; inset: 0;
  }
  div.catch {
  position: absolute; top:0; left:auto; 
  width:100vw; height:80vh;
  display:flex; justify-content: center; align-items: center;
  z-index:10; /*background: #00000077;*/
  }
  .catch p {
  margin-top:50px;
  font-weight:600; font-family:"Shippori Mincho", serif;
  font-size:clamp(24px, 3.6vw, 72px); text-shadow: 0 0 8px rgb(34, 34, 34);
  color:#fff; text-align:center; line-height:1.2;
  }
  .catch strong { 
  display:block; margin-left:5px; 
  font-size: clamp(34px, 5.1vw, 120px); }

}