@charset "utf-8";

.bold { font-weight:bold;}
.clear { clear:both;}
.al { text-align:left;}
.ar { text-align:right;}
.ac { text-align:center;}
.clearfix:after { height:0; visibility:hidden; content:"."; display:block; clear:both;}
.clearfix { _height: 1px; min-height: 1px; /*￥*//*/ height: auto; overflow: hidden; /**/}

.menu-trigger,.menu-trigger span { display: inline-block; transition: all .4s; box-sizing: border-box;}
.menu-trigger { position: relative; width:30px; height:24px;}
.menu-trigger span { position:absolute; left:0; width:100%; height:4px; background-color:#333; border-radius:0;}
.menu-trigger span:nth-of-type(1) { top:0;}
.menu-trigger span:nth-of-type(2) { top:10px;}
.menu-trigger span:nth-of-type(3) { bottom:0;}
.menu-trigger.active span:nth-of-type(1) { -webkit-transform: translateY(10px) rotate(-45deg); transform: translateY(10px) rotate(-45deg);}
.menu-trigger.active span:nth-of-type(2) { opacity:0;}
.menu-trigger.active span:nth-of-type(3) { -webkit-transform: translateY(-10px) rotate(45deg); transform: translateY(-10px) rotate(45deg);}

* { -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
body { text-align: center; font-family:"ヒラギノ角ゴ ProN W3", "ヒラギノ角ゴ Pro W3", "ヒラギノ角ゴ W3", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "メイリオ", "Meiryo", "verdana", sans-serif;
  font-feature-settings: "palt";
  line-height:1.7; color:#000; letter-spacing:0.1em;}
img{ border:none; vertical-align:middle; max-width:100%;}
img{ width:auto\9; height:auto\9;}

svg{ vertical-align:middle; max-width:100%;}
svg{ width:auto\9; height:auto\9;}

a{ text-decoration: none; color:#333;}
a:hover{ text-decoration: none;}
header, footer, nav, section, article, aside, h1, h2, h3, h4, h5, h6, div, p, dl, dt, dd, table, th, td, a,li { box-sizing: border-box;}

#copyRight{ font-size:0.75rem; letter-spacing:0em; padding:1rem 0 1rem;}
.mincho{font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3","ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝","ＭＳ 明朝", serif;}

#loading{ position:fixed; top:0; left:0; width:100%; height:100%; background:#fff; z-index:10010;}
#hamburger{ display:none;}
.spOnly{ display:none;}

@media only screen and (max-width : 800px) {
  #hamburger{ position:fixed; top:10px; right:10px; display:block; z-index:10000;}
  .pcOnly{ display:none;}
  .spOnly{ display:block;}
}




header{ position:fixed; width:100%; height:calc(40px + 32px); text-align:left; background:#fff; z-index:9999;}
.headerWrapper{ width:100%; margin:0 auto; position:relative;}
.headerWrapper > .headerLogo{ padding:1rem 2rem;}
.headerWrapper > .headerLogo img{ height:40px; width:auto;}
.headerWrapper > nav > ul{ position:absolute; top:50%; right:2rem; transform: translate(0,-50%); line-height:1;}
.headerWrapper > nav > ul > li{ display:inline-block; padding-left:1rem; position:relative; font-size:0.9rem;}
.headerWrapper > nav > ul > li a:hover{ opacity:0.5;}

@media only screen and (max-width : 1280px) {
.headerWrapper > .headerLogo{ padding:1rem 1rem;}
.headerWrapper > nav > ul{ right:1rem;}
}

@media only screen and (max-width : 800px) {
  header{ position:relative; height:50px;}
  .headerWrapper > .headerLogo{ padding:10px;}
  .headerWrapper > .headerLogo img{ height:30px;}
  .headerWrapper > nav{ position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(132, 150, 136,0.9); padding:0 1rem; transition: all .5s; transform: translate(110%,0);}
  .headerWrapper > nav::before{ content:""; position: absolute; top:0; left:0; width:100%; height:50px; background:#fff;}
  .headerWrapper > nav::after{ content:""; position: absolute; top:10px; left:1rem; width:178px; height:30px; background:url(img/logo.png) 0 0 no-repeat; background-size: contain;}
  .headerWrapper > nav.on{transform: translate(0,0);}
  .headerWrapper > nav > ul{ top:0; left:20%; right:auto; transform: translate(0,0); padding:calc(50px + 4rem) 0 0;}
  .headerWrapper > nav > ul > li{ display:block; padding:0 1rem 2rem;}
  .headerWrapper > nav > ul > li > a{ color:#fff; font-size:1.2rem;}
  .headerWrapper > nav > ul > li span{ cursor:default; color:#fff; font-size:1.2rem;}
}




.contentWrapper{ padding-top:calc(40px + 2rem);}
.bgColor01{ background:#849688; position:relative; z-index:-1;}
.bgColor01::before{ content:"";width:100%; height:100%; position:absolute; bottom:0; left:0; background: url(img/hero03_1__pc.jpg) center center no-repeat; background-size:cover; mix-blend-mode: multiply; opacity:0.1;}

@media only screen and (max-width : 800px) {
  .contentWrapper{ padding:0; margin:0; width:100%; overflow: hidden;}

  .bgColor01::before{ background: url(img/hero03_1__sp.jpg) center center no-repeat; background-size:cover; mix-blend-mode: multiply;}
}




#mainWrapper{ width:100%; background:#EFEFEF;}
#mainInner{ position:relative; overflow: hidden;}
.mainTitle{position:absolute; bottom:10%; left:50%; z-index:9990; margin-left:calc(-500px + 1rem);}
.mainTitle > h1{ font-size:clamp(1.8rem, 3.2vw, 2.4rem); line-height:1.5; color:#fff; text-align: left; transition: all .5s;}
.mainTitle > h1.fadeOut{ opacity:0; transform: scale(1.1);}

#mainInner > ul > li:not(:last-child){ display:none; position:absolute; top:0; left:0;}
#mainInner > ul > li:last-child{ display:block; position:relative; z-index:9985;}
#mainInner > ul > li img.loopImg{ filter: blur(7px); transform: scale(1.1); transform-origin: center center; opacity:1;}
#mainInner > ul > li img.loopImg.oneFadeInStart{animation: oneFadeInAnime 7s linear 0s 1 normal forwards;}

.mainLeadInner{ width:1000px; padding:4rem 1rem; text-align: left; color:#fff; margin:0 auto;}

.mainLeadInner > h2{ font-size:1.8rem;}
.mainLeadInner > h2::before{ content:"｜";}
.mainLeadInner > h2::after{ content:"｜";}

.mainLeadInner > ul{ margin-top:2rem;}
.mainLeadInner > ul > li{ margin-top:2rem; padding:0 0 0 1em;}
.mainLeadInner > ul > li h3{position:relative; font-size:1.0rem;}
.mainLeadInner > ul > li h3::after{content:"・"; position: absolute; left:-1em; top:0;}
.mainLeadInner > ul > li p{font-size:0.8rem; margin-top:0.2em;}

@keyframes oneFadeInAnime {
  0%{ filter: blur(7px); transform: scale(1.1); opacity:1;}
  10%{ filter: blur(0);}
  100%{ filter: blur(0); transform: scale(1); opacity:1;}
}

@media only screen and (max-width : 800px) {
  .mainTitle{ bottom:1rem; left:1rem; margin-left:0;}
  .mainTitle > h1{ font-size:1.4rem; letter-spacing:0;}

  #mainInner > ul > li img.loopImg{transform: scale(1);}

  .mainLeadInner{width:100%; padding:2rem 1rem;}
  .mainLeadInner > h2{ font-size:1.4rem;}
  .mainLeadInner > ul > li h3{font-size:0.8rem; margin-bottom:1em;}
  .mainLeadInner > ul > li p br{display:none;}

  @keyframes oneFadeInAnime {
    0%{ filter: blur(7px); transform: scale(1); opacity:1;}
    10%{ filter: blur(0);}
    100%{ filter: blur(0); transform: scale(1); opacity:1;}
  }
}




.secTitle{ text-align: left;}
.secTitle > .jpn{ color:#000; display:block; font-size:1.8rem;font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3","ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝","ＭＳ 明朝", serif; line-height:1.4;}
.secTitle > .eng{ color:#000; display:block; font-size:1.8rem; font-family: 'Times New Roman', Times, serif; line-height:1.4;}

.servicesTitleWrapper{position:relative; overflow: hidden; height:300px;}
.servicesTitleWrapper .secTitle{ position: absolute; top:140px; left:50%; margin-left:calc(-500px + 1rem); z-index:9980;
text-shadow:
1px 1px 2px #fff,
-1px 1px 2px #fff,
-1px -1px 2px #fff,
1px -1px 2px #fff,
1px 1px 4px #fff,
-1px 1px 4px #fff,
-1px -1px 4px #fff,
1px -1px 4px #fff;
}
.servicesTitleWrapper > ul{ position: absolute; top:50%; left:0; width:100%; transform: translate(0,-50%);}
.servicesTitleWrapper > ul > li img.loopImg{ filter: blur(7px); transform: scale(1.1); transform-origin: center center; opacity:1;}
.servicesTitleWrapper > ul > li img.loopImg.oneFadeInStart{animation: oneFadeInAnime 7s linear 0s 1 normal forwards;}

.servicesInner{ max-width:1000px; width:100%; margin:-4rem auto 0; margin:0 auto 0; background:#fff; position:relative; overflow:hidden; padding:2rem 0 0;}
.servicesInner .detailBox{ text-align:left; padding:0 1rem; max-width:860px; width:100%; margin:0 auto;}

.decoTitleWrapper{ display: inline-block; text-align: center; margin:2rem 0;}
.decoTitleWrapper > h2{ position: relative; font-size:1.2rem; box-shadow: 0 0 3px rgba(0,0,0,0.15);padding:0.75rem 2rem;line-height:1;}


.decoType01{background: #e8e4d8;font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3","ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝","ＭＳ 明朝", serif;}
.decoType01::before{ content:"｜"; padding-right:0.5em;}
.decoType01::after{ content:"｜"; padding-left:0.5em;}

.decoType01Before::before,
.decoType01Before::after,
.decoType01After::before,
.decoType01After::after {
  opacity: 0;
  transform: scale(0.8) translateY(20px);
  transition: opacity 0.8s cubic-bezier(.77,0,.18,1), transform 0.8s cubic-bezier(.77,0,.18,1);
}

.decoType01Before::before {
  content: "";
  position: absolute;
  bottom: 0;
  left:-40px;
  width: 30px;
  height: 20px;
  background:url(img/decoBox01.svg) center center no-repeat; background-size:contain;
}
.decoType01Before::after {
  content: "";
  position: absolute;
  top: 0;
  left:-70px;
  width: 30px;
  height: 20px;
  background:url(img/decoBox01.svg) center center no-repeat; background-size:contain;transform: scaleY(-1);
}
.decoType01After::before {
  content: "";
  position: absolute;
  bottom: 0;
  right:-40px;
  width: 30px;
  height: 20px;
  background:url(img/decoBox01.svg) center center no-repeat; background-size:contain; transform: scaleX(-1);
}
.decoType01After::after {
  content: "";
  position: absolute;
  top: 0;
  right:-70px;
  width: 30px;
  height: 20px;
  background:url(img/decoBox01.svg) center center no-repeat; background-size:contain;transform: scaleX(-1) scaleY(-1);
}

.decoType01.animeStart .decoType01Before::before {
  opacity: 1;
  transform: scale(1) translateY(0);
  transition-delay: 0.1s;
}
.decoType01.animeStart .decoType01Before::after {
  opacity: 1;
  transform: scale(1) translateY(0) scaleY(-1);
  transition-delay: 0.3s;
}
.decoType01.animeStart .decoType01After::before {
  opacity: 1;
  transform: scale(1) translateY(0) scaleX(-1);
  transition-delay: 0.5s;
}
.decoType01.animeStart .decoType01After::after {
  opacity: 1;
  transform: scale(1) translateY(0) scaleX(-1) scaleY(-1);
  transition-delay: 0.7s;
}


.decoType02{background:#79BFBE; color:#fff;font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3","ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝","ＭＳ 明朝", serif;}
.decoType02::before{ content:"｜"; padding-right:0.5em;}
.decoType02::after{ content:"｜"; padding-left:0.5em;}

.decoType02Before::before,
.decoType02Before::after,
.decoType02After::before,
.decoType02After::after {
  opacity: 0;
  transform: scale(0.8) translateY(20px);
  transition: opacity 0.8s cubic-bezier(.77,0,.18,1), transform 0.8s cubic-bezier(.77,0,.18,1);
}

.decoType02Before::before {
  content: "";
  position: absolute;
  bottom: 0;
  left:-40px;
  width: 30px;
  height: 20px;
  background:url(img/decoBox02.svg) center center no-repeat; background-size:contain;
}
.decoType02Before::after {
  content: "";
  position: absolute;
  top: 0;
  left:-70px;
  width: 30px;
  height: 20px;
  background:url(img/decoBox02.svg) center center no-repeat; background-size:contain;transform: scaleY(-1);
}
.decoType02After::before {
  content: "";
  position: absolute;
  bottom: 0;
  right:-40px;
  width: 30px;
  height: 20px;
  background:url(img/decoBox02.svg) center center no-repeat; background-size:contain; transform: scaleX(-1);
}
.decoType02After::after {
  content: "";
  position: absolute;
  top: 0;
  right:-70px;
  width: 30px;
  height: 20px;
  background:url(img/decoBox02.svg) center center no-repeat; background-size:contain;transform: scaleX(-1) scaleY(-1);
}

.decoType02.animeStart .decoType02Before::before {
  opacity: 1;
  transform: scale(1) translateY(0);
  transition-delay: 0.1s;
}
.decoType02.animeStart .decoType02Before::after {
  opacity: 1;
  transform: scale(1) translateY(0) scaleY(-1);
  transition-delay: 0.3s;
}
.decoType02.animeStart .decoType02After::before {
  opacity: 1;
  transform: scale(1) translateY(0) scaleX(-1);
  transition-delay: 0.5s;
}
.decoType02.animeStart .decoType02After::after {
  opacity: 1;
  transform: scale(1) translateY(0) scaleX(-1) scaleY(-1);
  transition-delay: 0.7s;
}


.servicesList{ margin:2rem auto 0; display: flex; justify-content: space-between; gap: 1rem; align-items: stretch; position:relative; z-index:9960;}
.servicesList > li{ text-align: left; color:#fff;}
.servicesList > li:nth-child(1){ background:#818181;}
.servicesList > li:nth-child(2){ background:#5F5F5F;}
.servicesList > li:nth-child(3){ background:#484343;}

.servicesSummary{ padding:2rem;}
.servicesSummary h3{ margin:1rem 0;}
.servicesSummary h3::before{ content:"["; padding-right: 0.5em;}
.servicesSummary h3::after{ content:"]"; padding-left: 0.5em;}
.servicesSummary > ul > li{ list-style-position: outside; list-style-type: disc; margin:0 0 0 1.4em; font-size:0.8rem;}
.servicesNumber img{ height:2rem; width:auto;}

@media only screen and (max-width : 800px) {
  .secTitle > .jpn{ font-size:1.4rem;}
  .secTitle > .eng{ font-size:1.2rem;}

  .servicesTitleWrapper{height:160px;}
  .servicesTitleWrapper .secTitle{ top:80px; left:1rem; margin-left:0;}

  .servicesTitleWrapper > ul > li{ height:240px;}
  .servicesTitleWrapper > ul > li img{ object-fit:cover; width:100%; height:100%;}
  .servicesTitleWrapper > ul > li img.loopImg{ transform: scale(1);}

  .decoTitleWrapper > h2{font-size:1.0rem;}
  .servicesInner{ padding:0;}
  .servicesInner .detailBox{ font-size:0.8rem;}

  .servicesList{ flex-direction: column; padding:0 1rem; max-width:380px;max-width:none;}
  .servicesSummary{ padding:1rem 1rem;}
}




.worksWrapper{ background-color:#E0DCC8; padding-top:200px; margin-top:-4rem; position:relative; padding-bottom:10rem;}
.worksTitleWrapper{ max-width:1000px; padding:0 1rem; margin:0 auto 2rem;}
.worksTitleWrapper .secTitle{text-align: center;}

.circleBtn a{ font-weight: bold; display:inline-block; padding:1rem 0; border:2px solid #000; border-radius:100px; min-width:320px; position:relative;}
.circleBtn a::after{
  content: '';
  display: inline-block;
  position: absolute;
  right: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.6em;
  height: 0.6em;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  rotate: 45deg;
}

@media only screen and (max-width : 800px) {
  .worksWrapper{ padding-top:calc(60px + 4rem); margin-top:-4rem; padding-bottom:4rem;}
  .worksTitleWrapper{ margin:0 auto 1rem;}

  .circleBtn a{ font-size:0.8rem;}
}




#silentSystemWrapper{ width:100%; background:#EFEFEF;}
#silentSystemInner{ position:relative; overflow: hidden;}
#silentSystemInner > h2{ font-size:clamp(2.4rem, 0rem + 3.2vw, 4.8rem); line-height:1.5; color:#fff; position:absolute; top:20%; left:10%; z-index:9990; text-align: left;}
#silentSystemInner > h2{ width:34%; min-width:320px; transition: all .5s;}
#silentSystemInner > h2.fadeOut{ opacity:0; transform: scale(1.1);}
#silentSystemInner > h2 > dl > dt{ margin:0 0 2rem 1rem;}
#silentSystemInner > h2 > dl > dt img{ height:4rem; width:auto;}

#silentSystemInner > ul > li.movieSlide > a{position:relative; display:block;}
#silentSystemInner > ul > li.movieSlide > a > div{position:relative;}
#silentSystemInner > ul > li.movieSlide > a > div::after{ content:""; position: absolute; top:0; left:0; height:100%; width:100%; background: rgba(0, 0, 0, 0.6); opacity:0.5;}
#silentSystemInner > ul > li.movieSlide > a > div.blackFrameStart::after{ animation: blackFrameAnime 3s linear 0s 1 normal forwards;}

.playIcon{ position: absolute; top:50%; left:50%; height:120px; width:120px; background: url(img/icon_play.svg) center center no-repeat; background-size: contain; transform: translate(-50%,-50%); opacity:0; transition: all .5s; transition-delay:.5s;}
.playIcon.fadeIn{ opacity:1;}
#silentSystemInner > ul > li:not(:last-child){ display:none; position:absolute; top:0; left:0;}
#silentSystemInner > ul > li:last-child{ display:block; position:relative; z-index:9985;}

#silentSystemInner > ul > li img.loopImg{ filter: blur(7px); transform: scale(1.1); transform-origin: center center; opacity:1;}
#silentSystemInner > ul > li img.loopImg.mainFadeInStart{animation: mainFadeInAnime 7s linear 0s 1 normal backwards;}

@keyframes mainFadeInAnime {
  0%{ filter: blur(7px); transform: scale(1.1); opacity:1;}
  10%{ filter: blur(0);}
  90%{ opacity:1;}
  100%{ filter: blur(0); transform: scale(1); opacity:0;}
}
@keyframes blackFrameAnime {
  0%{  opacity:0.5;}
  100%{  opacity:1;}
}

@media only screen and (max-width : 800px) {
  #silentSystemInner > h2{ font-size:1.4rem; top:10%; left:50%; transform:translate(-50%,0); width:100%;}
  #silentSystemInner > h2.fadeOut{ transform:translate(-50%,0) scale(1.1);}
  #silentSystemInner > h2 > dl > dt img{ height:3rem;}

  #silentSystemInner > h2 img{ width:72%; height:auto;}
  #silentSystemInner > ul > li{ width:100%;}
  #silentSystemInner > ul > li:not(:last-child){ left:50%; transform:translate(-50%,0);}
  #silentSystemInner > ul > li img.loopImg{ object-fit: cover; transform: scale(1);}
  .playIcon{ height:60px; width:60px;}
  @keyframes mainFadeInAnime {
    0%{ filter: blur(7px); transform: scale(1); opacity:1;}
    10%{ filter: blur(0);}
    90%{ opacity:1;}
    100%{ filter: blur(0); transform: scale(1); opacity:0;}
  }
}




.silentSystemInner{ max-width:1000px; margin:0 auto; padding:2rem 0 0;}
.silentSystemList{ margin:0 auto 0; display: flex; justify-content: space-between; gap: 1rem; align-items: stretch; position:relative; z-index:9950;}
.silentSystemList > li{ text-align: left; color:#fff; flex: 1;}
.silentSystemList > li:nth-child(1){ background:#818181;}
.silentSystemList > li:nth-child(2){ background:#5F5F5F;}
.silentSystemList > li:nth-child(3){ background:#484343;}

.silentSystemSummary{ padding:2rem;}
.silentSystemSummary h3{ margin:0 0 1rem;}
.silentSystemSummary h3::before{ content:"["; padding-right: 0.5em;}
.silentSystemSummary h3::after{ content:"]"; padding-left: 0.5em;}
.silentSystemSummary p{ font-size:0.8rem;}

.silentSystemBtnWrapper{ background-color:#79BFBE; padding-top:140px; margin-top:-4rem; position:relative; padding-bottom:4rem;}
.silentSystemBtnInner{ max-width:720px; width:100%; margin: 0 auto;}
.silentSystemBtn a{ display:block; padding:1rem 0; border:1px solid #fff; border-radius:100px; position:relative; color:#fff;}
.silentSystemBtn a::after{
  content: '';
  display: inline-block;
  position: absolute;
  right: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.6em;
  height: 0.6em;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  rotate: 45deg;
}

.silentSystemBtnList{ margin:2rem auto 0; display:flex; justify-content: space-between; gap: 1rem; align-items: stretch;}
.silentSystemBtnList > li{ flex: 1;}

@media only screen and (max-width : 800px) {
  .silentSystemList{flex-direction:column; padding:0 1rem; max-width:380px;max-width:none;}
  .silentSystemSummary{ padding:1rem 1rem;}
  .silentSystemBtnWrapper{ padding:120px 1rem 4rem;}
  .silentSystemBtn a{font-size:0.8rem;}
  .silentSystemBtnList{margin:1rem auto 0; flex-direction: column;}
}




.newsWrapper{ background:#fff; padding:8rem 0;}
.newsInner{ display:flex; max-width:960px; margin:0 auto;}
.newsTitleWrapper{ flex-basis:160px; text-align:left;}
.newsListWrapper{ flex-basis:calc(100% - 160px); text-align:left; border-left:1px solid #333333; padding:0 0 0 1.5rem;}
.newsListWrapper > ul > li{ margin-bottom:1em;}
.newsListWrapper > ul > li:last-child{ margin-bottom:0;}
.newsListWrapper > ul > li > a{padding:0.5rem; line-height:1.5;}
.newsListWrapper > ul > li > a:hover{background:#efefef;}
.newsListWrapper > ul > li > a span{ display:inline-block; margin-right:1em;}

.newsContentWrapper{ flex-basis: calc(100% - 160px);text-align: left;border-left: 1px solid #333333;padding: 0 0 0 1.5rem;}

.newsMoreBtn{ font-size:0.8rem; display:inline-block; padding:0.5rem 2rem 0.5rem 1rem; border-radius:100px; border: 1px solid #333; margin-top:1rem; position:relative; line-height:1;}
.newsMoreBtn::after{
  content: '';
  display: inline-block;
  position: absolute;
  right: 1.0rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.6em;
  height: 0.6em;
  border-top: 1px solid #333;
  border-right: 1px solid #333;
  rotate: 45deg;
}
@media only screen and (max-width : 800px) {
  .newsWrapper{ padding:4rem 1rem;}
  .newsWrapper.catPage{ padding:2rem 1rem;}
  .newsWrapper.singlePage{ padding:2rem 1rem;}
  .newsTitleWrapper{ flex-basis:auto;}
  .newsListWrapper{ flex-basis:auto; border-left:none; border-top:1px solid #333333; padding:1rem 0 0; margin-top:1rem;}
  .newsInner{ flex-direction: column;}
  .newsListWrapper > ul > li > a{padding:0;font-size:0.8rem; display:block;}

  .newsContentWrapper{ flex-basis:auto; border-left:none; border-top:1px solid #333333; padding:1rem 0 0; margin-top:1rem;}
}




.aboutusTitleWrapper{position:relative; overflow: hidden; height:300px;}
.aboutusTitleWrapper .secTitle{ position: absolute; top:140px; left:50%; margin-left:calc(-500px + 1rem); z-index:9980;
text-shadow:
1px 1px 2px #fff,
-1px 1px 2px #fff,
-1px -1px 2px #fff,
1px -1px 2px #fff,
1px 1px 4px #fff,
-1px 1px 4px #fff,
-1px -1px 4px #fff,
1px -1px 4px #fff;
}
.aboutusTitleWrapper > ul{ position: absolute; top:50%; left:0; width:100%; transform: translate(0,-50%);}
.aboutusTitleWrapper > ul > li img.loopImg{ filter: blur(7px); transform: scale(1.1); transform-origin: center center; opacity:1;}
.aboutusTitleWrapper > ul > li img.loopImg.oneFadeInStart{animation: oneFadeInAnime 7s linear 0s 1 normal forwards;}

.aboutusLeadWrapper{ max-width:1000px; width:100%; margin:-4rem auto 0; margin:0 auto 0; background:#fff; position:relative; text-align:left; padding:2rem 2rem 2rem;}
.aboutusLeadWrapper::after{ content:""; height:1px; width:0px; background:#333; position:absolute; bottom:0; left:2rem; transition: all 1s;}
.aboutusLeadWrapper.animeStart::after{width:calc(100% - 4rem);}
.aboutusLeadWrapper h2{ margin: 0 0 2rem; font-weight: bold; font-size:1.4rem;font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3","ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝","ＭＳ 明朝", serif;}

.aboutusMessageWrapper{ max-width:1000px; width:100%; margin:4rem auto 4rem; text-align: left; padding:0 2rem;}
.aboutusMessageTitle{color:#849688; font-size:1.4rem;font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3","ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝","ＭＳ 明朝", serif;}

.messageFlex{ display:flex; justify-content: space-between; gap:4rem; margin:2rem auto 0;}
.messageComment{ flex-basis:70%; position:relative; padding:0 0 0 3rem;}
.messageComment::before{ content: ''; height:0%; width:1px; background:#333; position:absolute; top:0; left:1rem; transition: all 1s;}
.messageComment.animeStart::before{height:100%;}

.messageComment p{ font-size:0.8rem; margin-bottom:1rem;}
.messagePhoto{flex-basis:30%;}
.messagePhoto dl{ text-align: right; font-size:0.8rem; margin:1rem 0 0;}

@media only screen and (max-width : 800px) {
  .aboutusTitleWrapper{ height:160px;}
  .aboutusTitleWrapper .secTitle{ top:80px; left:1rem; margin-left:0;}
  .aboutusTitleWrapper > ul > li{ height:240px;}
  .aboutusTitleWrapper > ul > li img{ object-fit:cover; width:100%; height:100%;}
  .aboutusTitleWrapper > ul > li img.loopImg{ transform: scale(1);}

  .aboutusLeadWrapper{ padding:2rem 1rem 2rem;}
  .aboutusLeadWrapper::after{ width:calc(100% - 2rem); left:1rem;}
  .aboutusLeadWrapper h2{ margin: 0 0 1rem; font-size:1.2rem;}
  .aboutusLeadWrapper p{ font-size:0.8rem;}

  .aboutusMessageWrapper{ padding:0 1rem; margin:2rem auto 2rem;}
  .aboutusMessageTitle{font-size:1.2rem;}
  .messageFlex{ flex-direction: column; gap:2rem; margin:1rem auto 0;}
  .messageComment{ order:2; padding:0 0 0 1rem;}
  .messageComment::before{ left:0;}
  .messagePhoto{ order:1;}
}




.companyTitleWrapper{position:relative; overflow: hidden; height:300px;}
.companyTitleWrapper .secTitle{ position: absolute; top:140px; left:50%; margin-left:calc(-500px + 1rem); z-index:9980;
text-shadow:
1px 1px 2px #fff,
-1px 1px 2px #fff,
-1px -1px 2px #fff,
1px -1px 2px #fff,
1px 1px 4px #fff,
-1px 1px 4px #fff,
-1px -1px 4px #fff,
1px -1px 4px #fff;
}
.companyTitleWrapper > ul{ position: absolute; top:50%; left:0; width:100%; transform: translate(0,-50%);}
.companyTitleWrapper > ul > li img.loopImg{ filter: blur(7px); transform: scale(1.1); transform-origin: center center; opacity:1;}
.companyTitleWrapper > ul > li img.loopImg.oneFadeInStart{animation: oneFadeInAnime 7s linear 0s 1 normal forwards;}

.companySecTitle{color:#849688; font-size:1.4rem;font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3","ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝","ＭＳ 明朝", serif;}

.companyDetailWrapper{max-width:1000px; width:100%; margin:-4rem auto 0; margin:0 auto 0; background:#fff; position:relative; padding:2rem 2rem 2rem;}
.companyDetailInner{ max-width:720px; width:100%; text-align:left; margin:0 auto;}
.companyDetailTable{ margin:2rem auto 0; width:100%; border-top:1px solid #849688;}
.companyDetailTable th{ width:20%; font-weight: normal; text-align: right; padding:0.5rem 1rem; border-bottom:1px solid #849688; border-right:1px solid #849688;}
.companyDetailTable td{ width:80%; padding:0.5rem 1rem; border-bottom:1px solid #849688;}

.companyHistoryWrapper{ margin:4rem auto 4rem; display:flex; width:100%; justify-content: space-between; position:relative;}
.companyHistoryWrapper::after{ content:""; height:1px; width:100%; background:#849688; position: absolute; bottom:0; left:0;}
.companyHistoryTitle{ flex-basis:20%; padding:0 1rem;}
.companyHistoryDetail{ flex-basis:80%; position:relative; padding:0 1rem;}
.companyHistoryDetail::after{ content:""; height:calc(100% + 2rem); width:1px; background:#849688; position: absolute; top:0; left:0;}
.companyHistoryDetail ul{ padding-bottom:1rem;}

@media only screen and (max-width : 800px) {
  .companyTitleWrapper{ height:160px;}
  .companyTitleWrapper .secTitle{ top:80px; left:1rem; margin-left:0;}
  .companyTitleWrapper > ul > li{ height:240px;}
  .companyTitleWrapper > ul > li img{ object-fit:cover; width:100%; height:100%;}
  .companyTitleWrapper > ul > li img.loopImg{ transform: scale(1);}

  .companySecTitle{ font-size:1.2rem;}

  .companyDetailWrapper{padding:2rem 1rem 2rem;}
  .companyDetailTable{ font-size:0.8rem;}

  .companyHistoryWrapper{ margin:2rem auto 2rem;}
  .companyHistoryDetail ul{ font-size:0.8rem;}
}




.contactWrapper{ background:#839688;}
.contactInner{ padding:4rem 1rem 4rem; max-width:1000px; margin:0 auto; color:#fff;}

.contactTitleWrapper .secTitle{ text-align: center;}
.contactTitleWrapper .secTitle > .jpn{ color:#fff;}
.contactTitleWrapper .secTitle > .eng{ color:#fff;}

.contactLeadWrapper{ margin:2rem auto;}
.contactBtnWrapper a{ display:inline-block; padding:1rem 0; background:#fff; color:#849688; border-radius:100px; min-width:320px; position:relative;}
.contactBtnWrapper a::after{
  content: '';
  display: inline-block;
  position: absolute;
  right: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.6em;
  height: 0.6em;
  border-top: 1px solid #849688;
  border-right: 1px solid #849688;
  rotate: 45deg;
}

.accessWrapper{ position: relative; width:100%; display:flex; justify-content:center; position:relative;margin:4rem auto 4rem; padding:2rem 0;}
.accessWrapper::before{ content:""; position: absolute; top:0; left:0; width:100%; height:1px; background:#fff;}
.accessPrimary{ text-align: left; padding:0 3rem 0 1rem;}
.accessSecondary{ text-align: left; position:relative; padding:0 1rem 0 3rem;}
.accessSecondary::before{content:""; position: absolute; top:2rem; left:0; width:1px; height:calc(100% - 2rem); background:#fff;}

.accessPrimary dl{ margin:0 0 2rem;}
.accessPrimary dl dt{ font-weight:normal; margin:2rem 0 1rem;}
.accessPrimary dl dd{ font-size:0.8rem;}

.accessSecondary dl{ margin:0 0 2rem}
.accessSecondary dl dt{ font-weight:normal; margin:2rem 0 1rem;}
.accessSecondary dl dd{ font-size:0.8rem;}

.mapBtnWrapper a{ display:inline-block; padding:0.5rem 2rem; background:#fff; color:#849688; border-radius:100px; font-size:0.8rem; letter-spacing:0;}

@media only screen and (max-width : 800px) {
  .contactLeadWrapper{ font-size: 0.8rem; margin:1rem auto;}
  .contactBtnWrapper a{ font-size:0.8rem;}

  .accessWrapper{ flex-direction:column; margin:4rem auto 0; padding:1rem 0;}

  .accessPrimary{ padding:0;}
  .accessSecondary{ padding:0; margin-top:2rem;}
  .accessSecondary::before{ top:0; left:0; width:100%; height:1px;}
  .accessPrimary dl dt{ margin:1rem 0 1rem;}
  .accessSecondary dl dt{margin:1rem 0 1rem;}
}




.footerBannerLinkWrapper{ padding:4rem 0 4rem;}

.bannerList{ display:flex; justify-content: center; gap:4rem; align-items: center;}
.bannerList > li.ss img{ height:2.4rem; width:auto;}
.bannerList > li.tekt{ margin-top:-0.75em;}
.bannerList > li.tekt img{ height:2.2rem; width:auto;}
.bannerList > li.ria img{ height:2.2rem; width:auto;}

.footerCreditWrapper{ display:flex; justify-content: space-between; align-items:center; margin:0 auto; max-width:1000px; padding:1rem 1rem;}
.footerLogo img{ height:40px; width:auto;}
.footerCreditWrapper ul li{ display:inline-block; padding:0 0 0 2rem; font-size:0.8rem;}
.footerCreditWrapper ul li a:hover{ text-decoration: underline;}

@media only screen and (max-width : 800px) {
  .footerBannerLinkWrapper{ padding:2rem 0 2rem;}

  .bannerList > li.ss img{ height:1.6rem;}
  .bannerList > li.tekt img{ height:1.4rem;}
  .bannerList > li.ria img{ height:1.4rem;}
  .bannerList{ gap:20px;}

  .footerCreditWrapper{ flex-direction: column;}
  .footerCreditWrapper ul{ order:1;}
  .footerCreditWrapper ul li{ padding:0 1rem;}
  .footerLogo{ order:2; margin-top:1rem;}
  .footerLogo img{ height:30px;}
}




.lowerTitleWrapper{ padding:2rem 1rem 0; max-width:1000px; margin:0 auto;}

@media only screen and (max-width : 800px) {

}




.pageWrapper{max-width:1000px; padding:0 1rem; margin:0 auto; text-align:left;}
.privacyPolicySummary{ margin:2rem 0; font-size:0.8rem;}
.privacyPolicy{ margin:2rem 0;}
.privacyPolicy > dt{ font-size:1.0rem;border-bottom:1px solid #6a6a6a; padding-bottom: 4px;}
.privacyPolicy > dd{ margin:1rem 0 2rem; font-size:0.8rem;}
.privacyPolicy > dd > ol > li{ list-style-type: decimal; list-style-position: outside; margin:0 0 0 1.4em;}
.privacyPolicy > dd > ol > li > ol{ margin:1rem 0 1rem 1rem;}
.privacyPolicy > dd > ol > li > ol > li{ list-style-type: decimal; list-style-position: outside; margin:0 0 0 1.4em;}
.privacyPolicy > dd > ol > li > ol > li > ol{ margin:1rem 0 1rem 1rem;}
.privacyPolicy > dd > ol > li > ol > li > ol > li{ list-style-type: decimal; list-style-position: outside; margin:0 0 0 1.4em;}

.webAccessibility{ margin:2rem 0 4rem;}
.webAccessibility > dt{ font-size:1.0rem;border-bottom:1px solid #6a6a6a; padding-bottom: 4px;}
.webAccessibility > dd{ margin:1rem 0 2rem; font-size:0.8rem;}
.webAccessibility a{ text-decoration: underline;}
.webAccessibility a:hover{ text-decoration: none;}

@media only screen and (max-width : 800px) {
  .pageWrapper{ padding:0 1rem;}
  .privacyPolicy{ margin:2rem 0;}
  .privacyPolicy > dt{ font-size:0.8rem;}

  .webAccessibility{margin:2rem 0 2rem;}
  .webAccessibility > dt{font-size:0.8rem;}
}




.contactFormWrapper{max-width:960px; margin:2rem auto 0; text-align:left;}
.require::after{content:"必須"; display: inline-block; line-height: 1; padding: 0.25rem 0.5rem; background: #e26459; border-radius: 5px; color: #fff; font-size: 0.75rem; margin: 0.25rem 0 0 1rem; vertical-align: top;}

input[type=text]{ border:1px solid #ccc; background:#fff; padding:0.5rem; max-width:480px; width:100%;}
input[type=text].p-postal-code{ max-width:7em;}
input[type=text].sizeS{ max-width:320px;}
input[type=number]{ border:1px solid #ccc; background:#fff; padding:0.5rem; max-width:5em; width:100%;}
input[type=email]{ border:1px solid #ccc; background:#fff; padding:0.5rem; max-width:480px; width:100%;}
textarea{ border:1px solid #ccc; background:#fff; padding:0.5rem; width:100%; height:6em;}
input[type=radio],input[type=checkbox]{ display:none;}
.form-check-label{ position:relative; display:inline-block; padding:0 0 0 1.8em; cursor:pointer; line-height:1;}
.form-check-label::after{content:''; position:absolute; top:50%; left:0; display:block; line-height:1; transform: translate(0,-50%); width:16px; height:16px; border: 2px solid #333;}
.form-check-label::before { content: ""; position: absolute; top: 50%; left: 0; display: block; line-height: 1; transform: translate(0, -50%); width: 16px; height: 16px; content: ""; opacity: 0; background:#655F5F;}
input[type=radio]:checked + .form-check-label::before { opacity:1;}
input[type=radio]:checked + .form-check-label::after { border: 2px solid #655F5F;}
input[type=checkbox]:checked + .form-check-label::before { opacity:1;}
input[type=checkbox]:checked + .form-check-label::after { border: 2px solid #655F5F;}
select { appearance: none; background: none; border: none; color: #333; font-size: 1rem; width: 100%; height: 100%; padding: 0 10px;}
.selectBox{ background:#eee; height:3rem; width:100%; max-width:calc(375px - 2rem); border-radius:8px; position: relative; z-index:1;}
.selectBox::after {position: absolute;content: '';width: 8px;height: 8px;right: 10px;top: 50%;transform: translateY(-50%) rotate(45deg);border-bottom: 2px solid #333;border-right: 2px solid #333;z-index: -1;}

.formList > dt{ margin-bottom:0.5em;}
.formList > dd{ margin-bottom:02em;}

.submitWrapper > ul > li{ display:inline-block; margin:0 0.5rem 0 0;}
.contactMailAttentionTextWrapper{ font-size:0.8rem; padding:2rem 0 4rem;}

.submitBtn{ display:inline-block; line-height:1; padding:0.9rem 2rem 1rem; background: #849688; border-radius: 100px; color: #fff; font-size: 1rem;}
.submitBtn:hover{ background: hsl(133, 8%, 45%);}

.submitBtn.gray{ background:#bbbbbb;}
.submitBtn:hover.gray{ background:hsl(0, 0%, 63%);}

.beforeCheckText{ margin:0 0 2rem;}

.checkAnser{border:1px solid #ccc; min-height:1em; background:#eee; padding:0.5rem; max-width:480px; width:100%;}
.checkAnser.w100{ max-width:initial;}

.contactNoteListWrapper{ margin:2rem 0;}
.contactNoteListWrapper ul li{ list-style-type: disc; list-style-position:outside; margin:0 0 0 1.4em; font-size:0.8rem;}
.privacyText{ font-size:0.8rem; margin:0 0 2rem;}
.agreeWrapper{ padding:1rem; background-color:rgba(132, 150, 136,0.2); margin:2rem 0;}
.agreeWrapper p{ margin-bottom:1rem;}

.sendCompWrapper{margin:0 0 4rem;}
.sendCompWrapper p{ margin:0 0 1rem;}
.sendCompWrapper p.note{ font-size:0.8rem;}
.addressBox{margin-top:10px;}

#workdescWrapper{ margin-top:10px; display:none;}
#where1descWrapper{ margin:10px 0; display:none;}
#where1descWrapper p{ font-size:0.8rem; margin:0 0 10px;}
#where2descWrapper{ margin:10px 0; display:none;}
#where2descWrapper p{ font-size:0.8rem; margin:0 0 10px;}

@media only screen and (max-width : 800px) {
  .contactFormWrapper{ padding:0 1rem;}

  .sendCompWrapper{margin:0 0 2rem;}
  .sendCompWrapper p{ font-size:0.8rem;}
}




.mainLeadFadeIn{ transform: translate(0,-2rem); opacity:0;}
.mainLeadFadeIn.animeStart{ animation: mainLeadFadeInAnime 1s ease-out calc(var(--index) * 0.5s) 1 normal forwards;}

@keyframes mainLeadFadeInAnime {
  0%{ transform: translate(0,-2rem); opacity:0;}
  100%{ transform: translate(0,0); opacity:1;}
}

.defaultFadeIn{ transform: translate(0,-2rem); opacity:0;}
.defaultFadeIn.animeStart{ animation: defaultFadeInAnime 1s ease-out calc(var(--index) * 0.5s) 1 normal forwards;}

@keyframes defaultFadeInAnime {
  0%{ transform: translate(0,-2rem); opacity:0;}
  100%{ transform: translate(0,0); opacity:1;}
}

.leftFadeIn{ transform: translate(-2rem,0); opacity:0;}
.leftFadeIn.animeStart{ animation: leftFadeInAnime .5s ease-out calc(var(--index) * 0.5s) 1 normal forwards;}

@keyframes leftFadeInAnime {
  0%{ transform: translate(-2rem,0); opacity:0;}
  100%{ transform: translate(0,0); opacity:1;}
}

@media only screen and (max-width : 800px) {

}




.singleTitle{ font-size:1.4rem; color: #849688; margin-bottom:1rem;}
.singleContent{ margin-bottom:4rem;}
.singleContent p{ margin-bottom:1rem;}
.singleContent img{ margin-bottom:1rem;}
.singleContent table{ margin-bottom:1rem;}
.singleContent a{ text-decoration: underline;}
.singleContent a:hover{ text-decoration: none;}

@media only screen and (max-width : 800px) {
  .singleTitle{ font-size:1.2rem;}
  .singleContent p{ font-size:0.8rem;}
  .singleContent table{ font-size:0.8rem;}

}




.singleContent table{ width:100%; border-top:#999 1px solid; border-left:#999 1px solid;}
.singleContent table th{ padding:10px; border-bottom:#999 1px solid; border-right:#999 1px solid; background:#EFEFEF; font-weight:normal;}
.singleContent table td{ padding:10px; border-bottom:#999 1px solid; border-right:#999 1px solid;}
.singleContent strong{ color:#0099A8;}
.block{ margin:2rem 0;}
.block.mt4rem{ margin-top:4rem;}
.block.mb4rem{ margin-bottom:4rem;}
.midashi{ font-weight:bold; font-size:1.2rem;color:#0099A8;}
.komidashi{ font-weight:bold;}
.exList{ margin:2rem 0;}
.exList > li{ margin-bottom:2rem;}
.exList > li dl{ margin:1rem 0;}
.exList > li dd{ margin-bottom:1rem;}

.videoBtnWrapper a{ position:relative; display:block; margin:0 0 2rem;}
.videoBtnWrapper a > div{ position:relative;}
.videoBtnWrapper a > div::after{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.6); transition: all .5s;}
.videoBtnWrapper a:hover > div::after{ background:rgba(0, 0, 0, 0);}
.playIcon-s{ position: absolute; top:50%; left:50%; height:80px; width:80px; background: url(img/icon_play.svg) center center no-repeat; background-size: contain; transform: translate(-50%,-50%);}

@media only screen and (max-width : 800px) {
  .singleContent table th{ padding:4px;}
  .singleContent table td{ padding:4px;}
  .singleContent table.spColumn th{ display:block;}
  .singleContent table.spColumn td{ display:block;}

  .midashi{ font-size:1.0rem;}
  .komidashi{ font-size:0.8rem;}
  .block.mt4rem{ margin-top:2rem;}
  .block.mb4rem{ margin-bottom:2rem;}
  .exList > li dl{ font-size:0.8rem;}

  .playIcon-s{ height:60px; width:60px;}
}