/*! HTML5 Boilerplate v6.1.0 | MIT License | https://html5boilerplate.com/ */

.fadein {
  opacity : 0;
  transform : translate(0, 100px);
  transition: 0.9s cubic-bezier(.86,0,.07,1);
  will-change: transform;
}
.fadein-pos0 { transform : translate(0, 0px);}
.fadein.scrollin {
  opacity : 1;
  transform : translate(0, 0);
}
.fadein-1{ transition-delay: 0.5s }
.fadein-2{ transition-delay: 1s }
.fadein-3{ transition-delay: 1.05s ;}
.fadein-4{ transition-delay: 1.1s }
.fadein-5{ transition-delay: 1.15s}
.fadein-6{ transition-delay: 1.2s }
.fadein-7{ transition-delay: 1.25s ;}
.fadein-8{ transition-delay: 1.3s }

.mainsld-texts { position: absolute; bottom: 0; left: 0; width: 100%}
.mainsld-texts_transition { transform: translateX(0) translateZ(0); will-change: opacity, transform; animation: textOut cubic-bezier(.55, .085, .68, .53) .75s forwards; opacity: 1}
.mainsld-texts_transition-0 { animation-delay: 0s}
.mainsld-texts_transition-1 { animation-delay: .05s}
.mainsld-texts_transition-2 { animation-delay: .1s}
.mainsld-texts_transition-3 { animation-delay: .15s}
.mainsld-texts_transition-4 { animation-delay: .2s}
.mainsld-texts_transition-5 { animation-delay: .25s}
.mainsld-texts_transition-6 { animation-delay: .3s}

.swiper-slide-active .mainsld-texts .mainsld-texts_transition { animation: textIn cubic-bezier(.165, .84, .44, 1) .75s forwards; opacity: 0}
.swiper-slide-active .mainsld-texts .mainsld-texts_transition-0 { animation-delay: 1s }
.swiper-slide-active .mainsld-texts .mainsld-texts_transition-1 { animation-delay: 1.05s }
.swiper-slide-active .mainsld-texts .mainsld-texts_transition-2 { animation-delay: 1.1s }
.swiper-slide-active .mainsld-texts .mainsld-texts_transition-3 { animation-delay: 1.15s}
.swiper-slide-active .mainsld-texts .mainsld-texts_transition-4 { animation-delay: 1.2s }
.swiper-slide-active .mainsld-texts .mainsld-texts_transition-5 { animation-delay: 1.25s }
.swiper-slide-active .mainsld-texts .mainsld-texts_transition-6 { animation-delay: 1.3s }

@keyframes textIn {
0% { transform: translateY(40px) translateZ(0); opacity: 0 }
to { transform: translateY(0) translateZ(0); opacity: 1}
}

@keyframes textOut {
0% { transform: translateY(0) translateZ(0); opacity: 1 }
to { transform: translateY(-40px) translateZ(0); opacity: 0}
}

@keyframes blink{
0%{ opacity:1 } 50%{ opacity:.2 } to { opacity:1 }
}







.js-loader { position: fixed; width: 100%; height: 100%; top: 0; left: 0; visibility: visible; opacity: 1; background: #f0f0f0; transition: opacity .8s, visibility .8s; z-index: 10000;}

.is-loaded .js-loader{ visibility: hidden; opacity: 0;}

.js-loader-progress { position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: 1px;}
.js-loader-progress .is-loaded { visibility: hidden; opacity: 0;}
.js-loader-progress-bar { background: #000; height: 100%; width: 0; transition: width .4s;}
.js-loader-progress-bar.on{ width: 100%;}
.js-loader-progress-number { text-align: center; font-size: 10px; width: 100%; margin-top: 10px;}



/***all***/

body{
  font-size: 16px; background: #fffef2; line-height: 1.7;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  font-feature-settings: "palt";
}

img{ width: 100%; height: auto;}

.pc{ display: none;}

.center{ text-align: center;}
.pc{ display: none;}
.bgWhite{ background: #fff;}
.bgGray{ background: #dfdfdf;}
.bgOrange{ background: #f77750;}
.bgWOrange{ background: #fedec5; }
.bgGreen{ background:#c5e0d4;}
.bold{ font-weight: bold;}
.blue{ color: #2254b9;}
.orange{ color: #f77750;}

.underLine{ text-decoration: underline;}

.pageArea{ padding-top: 14.5vw;}
.topPage .pageArea{ padding-top: 0;}

.mainVisial{ position: relative;}
.mainVisialImgBox{width: 100%; height: 100vw; overflow: hidden; position: relative;}
.mainVisialImg{ height: 100%;}
.mainVisial .mainVisialImg img{ height: 100%; width: auto; position: absolute; top: 50%; left: 50%; transform: translate( -50%, -50%) ;}

.siteTitle{ text-align: center; width: 72%; position: absolute; top: 50%; left: 14%; transform: translate( 0%, -50%);}
.siteTitle .logoHinta{ width: 30%; margin: 0.8em auto 0; display: block;}
.siteTitle .logoHintaTxt{ width: 40%; margin: 0.6em auto 0;}
.mainReadTxt{width: 90%; margin: 1.6em auto 0;}

.snsBox{ width: 100%; text-align: center;}

.siteHeader .snsBox{ position: absolute; bottom: 12vw;}

.boxFB{display: inline-block; width: 13%; height: auto;}
.snsBox li{display: inline-block; width: 13%; height: auto; margin: 0 3%;}
.boxFB a {
  display: block;
  width: 98%;
  height: 0;
  background: url(../img/iconFB.png) center center / 100% auto no-repeat;
  padding-bottom: 100%;
}
.boxTW a{
  display: block;
  width: 98%;
  height: 0;
  background: url(../img/iconTW.png) center center / 100% auto no-repeat;
  padding-bottom: 100%;
}
.boxIG a{
  display: block;
  width: 98%;
  height: 0;
  background: url(../img/iconIG.png) center center / 100% auto no-repeat;
  padding-bottom: 100%;
}
.boxLINE a{
  display: block;
  width: 98%;
  height: 0;
  background: url(../img/iconLine.png) center center / 100% auto no-repeat;
  padding-bottom: 100%;
}

@media screen and (max-width: 900px) {
  @media (orientation: landscape) {
  }
}
@media screen and (min-width: 560px) {

  body{ font-size: 14px; }
  .pageArea{ padding-top: 56px;}
  .topPage .pageArea{ padding-top: 0;}
  .mainVisial .mainVisialImg img { height: auto; width: 100%; position: relative; top: auto; left: auto; transform: translate( 0, 0);}
  .mainVisialImgBox { width: 100%; height: auto; position: relative; font-size: 0;}
  .siteTitle { width: 32%; position: absolute; top: 50%; left: 50%; transform: translate( -50%, -50%);}
  .mainReadTxt .sp{ display: none;}
  .mainReadTxt .pc{ display: block;}

  .centerPc{ text-align: center;}

  .sp{ display: none;}
  .pc{ display: block;}
  .siteHeader .snsBox { position: absolute; bottom: 17%; width: 26%; text-align: center; right: 0%;}
}
.contentsInner625 + .contentsInner625{
  margin-top: 6rem;
}
@media screen and (min-width: 900px) {
  body{ font-size: 1.111vw; }
  .contentsInner583{ max-width: 840px ; width: 84%; margin: 0 auto; position: relative;}
  .contentsInner625{ max-width: 900px ; width: 84%; margin: 0 auto;}
  .contentsInner743{ max-width: 1070px ; width: 84%; margin: 0 auto;}
  .contentsInner8263{ max-width: 1190px ; width: 90%; margin: 0 auto;}
  .contentsInner8750{ max-width: 1260px ; width: 90%; margin: 0 auto;}
  .contentsInner9375{ max-width: 1350px ; width: 90%; margin: 0 auto;}
  .pageArea{padding-top: 6.35vw;}
  .topPage .pageArea{ padding-top: 0;}
}
@media screen and (min-width: 1400px) {
  .contentsInner583{ width: 58.3%; max-width: none;}
  .contentsInner625{ width: 62.5%; max-width: none;}
  .contentsInner743{ width: 74.3%; max-width: none;}
  .contentsInner8263{ width: 82.63%; max-width: none;}
  .contentsInner8750{ width: 87.5%; max-width: none ; }
  .contentsInner9375{ width: 93.75%; max-width: none;}
}


.siteHeader{ position: fixed; top: 0; left: 0; width: 100%; background: #fffef2; padding: 0.6em; z-index: 4000;}
.topPage .siteHeader{ position: absolute; top: 100vw; background: none;}
.topPage .siteHeader .siteHeaderInner{opacity: 0; transition: 0.6s;}

.topPage .siteHeader.fixed{ position: fixed; top: 0; opacity: 1; background: #fffef2; }
.topPage .siteHeader.fixed .siteHeaderInner{opacity: 1;}

.siteLogo{ width: 28%; font-size: 0; position: relative; z-index: 10;}
.siteLogo span{display: inline-block;}

.hinataLogo{ margin-top: 5%;}
.hinataLogoGr{ display: inline-block; width: 24%; vertical-align: middle;}
.hinataLogoTxt{ display: inline-block; width: 68%; margin-left: 8%; vertical-align: middle;}

.siteMenu{
  /*border-top: 0.1em solid #d6d5cc; */padding-top: 3.4em;
  position: absolute; top: 0; left: 0; height: 100vh; width: 100%; background: #fffef2;
  display: none; opacity: 0; transition: 0.3s;
}
.siteMenu.on{ display: block; }
.siteMenu.on.vit{ opacity: 1;}
.siteMenuInner{border-top: 0.1em solid #d6d5cc; }
.siteMenu nav{ text-align: center; position: absolute; left: 50%; top: 17%; transform: translate( -50%, 0%); font-size: 1.15rem; line-height: 1.4;}
.siteMenu a{ color: #333;}
.siteMenu nav li + li{ margin-top: 1.05em;}

.headTelBox{
  background: #f77750; padding: 0.6em; border-radius: 0.2em; margin-bottom: 0.4em; margin-top: 2em;
  width: 94vw; position: absolute; left: 3vw; bottom: 3vw;
}
/*.headTelBox time{ width: 80%; margin: 0.4em auto 0; position: absolute; bottom: 0; left: 50%; transform: translate( -50%, 50%);}*/
.headTelBox time{ width: 90%; margin: 0.2em auto 0; display: block;}
.telBox{ padding:0.3em 1.5em 0.4em; border-bottom: 0.1em solid #fff; position: relative;}

.contactBtn{}
.contactBtn a{ display: block; padding: 1em 6em 0.4em;}

.spBottomFit{ position: fixed; left: 0; bottom: 0;margin: 0; width: 100%;  display: flex; border-radius: 0; z-index: 1000;}
.spBottomFit .telBox{width: 62%; padding: 0; border: none; border-right:1px solid #fff ; padding-right: 0.6em; }
.spBottomFit.headTelBox time { width: 84%; margin: -1.5% auto 0; display: block; font-size: 0;}
.spBottomFit .contactBtn{ width: 38%; position: relative;}
.spBottomFit .contactBtn a {display: block;padding: 0.4em 0.4em 0.6em;}
.spBottomFit .contactBtn a img{ position: absolute; display: block; width: 80%; top: 50%; left: 53%; transform: translate(-50%, -50%);}

.hmbMenu{ display: block; width: 10vw; height: 10vw; background:none; position: absolute; top: 2.2vw; right: 0.6em; z-index: 10;}
.hmbMenu span{ width: 100%; background: #333; display: block; height: 2px; position: absolute; top: 50%; transform: translateY(-50%); transition: 0.4s;}
.hmbMenu span:before,
.hmbMenu span:after{ content: ""; width: 100%; background: #333; display: block; height: 2px; position: absolute;transition: 0.4s; }

.hmbMenu span:before{ top: -6px;}
.hmbMenu span:after{ bottom: -6px;}

.hmbMenu.on span{ background: none; }
.hmbMenu.on span:before {top: 0;transform: rotate(45deg);}
.hmbMenu.on span:after {bottom: 0;transform: rotate(-45deg);}


@media screen and (min-width: 560px) {
  .spBottomFit{ display: none;}
  .siteHeader{ border-bottom: 1px solid #d6d5cc;}
  .topPage .siteHeader{border-bottom: none;}
  .topPage .siteHeader.fixed{border-bottom: 1px solid #d6d5cc;}

  .topPage .siteHeader{ position: absolute; top: 51.38vw;}
  .topPage .siteHeader .siteHeaderInner{opacity: 0; transition: 0.6s;}

  .topPage .siteHeader.fixed{ position: fixed; top: 0; opacity: 1;}
  .topPage .siteHeader.fixed .siteHeaderInner{opacity: 1;}


  .hmbMenu{ display: none;}
  .siteLogo{ width: 110px;}
  .hinataLogo{ margin-top: 6px;}
  .siteMenu{ display: block; position: absolute; width: calc(100% - 110px - 1.2em); padding: 0; vertical-align: top; right: 0.6em; top: 0; left: auto; height: 100%;  opacity: 1;}
  .siteMenuInner{ border: none; height: 100%;}
  .siteMenu nav { text-align: left; position: relative; left: auto; font-size: 1.3rem; width: 60%; top: 50%; transform: translate( 0%, -50%); padding-left: 2%;}
  .siteMenuInner li{ display: inline-block; font-size: 0.7rem; margin-left: 3%;}
   .siteMenuInner li.sp{ display: none; }
  .siteMenu nav li + li { margin-top: 0;}
  .headTelBox { padding: 0; border-radius: 0.2em; margin-bottom: 0; margin-top: 0; width: 240px; left: auto; bottom: 0.2em; right: -0.3em; height: auto%;}
  .headTelBox img{ display: block;}
  .telBox { padding: 0.88em 0.6em; border-bottom: none; position: relative; border-right: 1px solid #fff; width: 64%; display: inline-block; vertical-align: middle;}
  .contactBtn{ display: inline-block; width: 30%; vertical-align: middle; padding: 0 0 0 0.8%;}
  .contactBtn a { display: block; padding: 0 0 0 2%; font-size: 0;}
  .headTelBox time { width: 94%; margin:  1.4% auto 0 -1%; display: block; height: auto; font-size: 0; position: absolute;}
}
@media screen and (min-width: 900px) {
  .siteHeader{ padding: 1.25vw 2.1vw;}
  .siteLogo{ width: 12.4%;}
  .siteMenu { width: calc(100% - 2.1vw - 12.4%); padding: 0; right: 0;}
  .siteMenuInner li{ font-size: 0.8em;}
  .headTelBox { width: 28.8%; top: 1.25vw; right: 2.1vw; bottom: auto; left: auto;}
  .headTelBox time { margin: 2.4% auto 0 -2%;}
  .telBox { padding: 1em 0.6em;}

  .siteTitle { width: 46.52%; top: 40%;}
  .mainReadTxt { width: 70%;}
  .siteTitle span{ width: 55.67%; display: block; margin: 0 auto;}
  .siteTitle .logoHinta { width: 16.41%;}
  .siteTitle .logoHintaTxt { width: 23.1%;}

  .siteMenuInner li{ margin-left: 2.4%;}
  
}
@media screen and (min-width: 1400px) {
	.siteMenu nav { padding-left: 5%; }
.siteMenuInner li{ font-size: 1rem;}
}

.contentsAreaAbout{ margin-top: 8vw;}
/*contentsArea*/
.contentsArea{ padding: 16vw 2vw; position: relative;  }
/*.contentsArea + .contentsArea{ margin-top: 24vw;}*/

.contentsTitle{ height: 9.4vw; padding: 1vw 0; text-align: center; margin-bottom: 1em;}
.contentsTitle img{ height: 100%; width: auto; vertical-align: middle}
.titleAdd{ display: inline-block; height: 10vw; vertical-align: middle; margin-right: 1ch;}

.contentsBoxTitle{ height: 7.2vw; padding: 1vw 0; margin-bottom: 0.6em;}
.contentsBoxTitle img{ height: 100%; width: auto; vertical-align: middle}

.contensVisial{ margin-top: 4vw;  position: relative;}
.aboutFig{padding: 0 21vw 0 3vw;}
.aboutPageFig{padding: ;}
.contensVisial .readTxt{
  font-size: 1.4rem; line-height: 1.7; font-weight: bold;
  position: absolute; right: 4vw; top: 38vw;
}
.txtBgOrange{ color: #fff; background: #f77750; display: inline-block;}
.txtBgBlue{ color: #fff; background: #2c4e76; display: inline-block;}

.contensVisial .readTxt span{ height: 9vw; padding: 1.4vw 2.8vw; font-size: 0;}
.contensVisial .readTxt span img{ height: 100%; width: auto;}

.contensVisial .txt{ text-align: center; margin: 10px auto 0; width: 90%;}

.conceptHighlightArea{margin-top: 5.333vw;}
.conceptHighlightImg01{ width: 50%; margin: 0 0 0 auto;}
.conceptHighlightImg02{ width: 60%; margin: -7.4666vw auto 0 0;}
.conceptHighlightImg03{ width: 38%; margin-left: 53%; margin-top: -25vw;}
.conceptHighlight{ margin-top: -10.666vw; position: relative; }
.conceptHighlight li{
  background: #f77750; color: #fff; font-size: 1.05em; margin-bottom: 2.666vw;
  padding: 0.35em 1em; border-radius: 2.2em; display: inline-block; line-height: 1;
}
.conceptHighlight li.greenBk{
  background: #6cc3c6;
  background: #00c1c6;
}


.moreBtn{ text-align: center; margin-top: 5.333vw;}
.moreBtn a{
  display: inline-block; background: #f77750; color: #fff;
  line-height: 1; padding: 0.5em 1em; border-radius: 0.1em;
}
.moreBtnBlue a{ background: #2c4e76;}
.moreBtn a .arrow{ width: 1em; height: 100%; display: inline-block;}
.arrowOrange{}

.bgOrange .moreBtn a{ color: #f77750; background: #fff;}

.conceptHighlightArea .moreBtn{ margin: -16vw auto 21.333vw;}

.greeting{ padding: 10.666vw 5.333vw;}
.humanFig{ width: 60%; border-radius: 50%; background: #fffef2 ; padding-bottom: 60%; margin: 0 auto 5.333vw;}


@media screen and (min-width: 560px) {
  .contentsAreaAbout{ margin-top: 4vw;}
  .contentsArea { padding: 6vw 2vw;}
  .aboutFig{padding: 0; width: 100%;}
  .contensVisial { width: 68.8%; width: 74.1%; margin-top: 2vw;}
  .contensVisial .readTxt{ width: 56.9%; width: 59%; top: 23%; right: 0;}
  .contensVisial .readTxt span{ padding: 2.4% 6%; line-height: 0; height: auto; display: block;}
  .readTxt01{ width: 90.5%; width: 63.46%;}
  .readTxt02{width: 66.52%; width: 92.3%; margin: 2% 0 0 auto; display: block;}
  .contensVisial .readTxt span img{ height: auto; width: 100%;}

  .contentsTitle { height: 5vw;}
  .titleAdd { height: 130%;}
  .conceptHighlightArea{ width: 63.41%; margin: -27vw 0 0 auto;}
  .conceptHighlightArea{ width: 100%; margin: -27vw 0 0 auto;}

  .conceptHighlightImg01 { width: 34.1%;}
  .conceptHighlightImg02 { width: 26.5%;}

  .conceptHighlightImg01 { width: calc( 508 / 2340 * 100%);}
  .conceptHighlightImg02 { width: calc( 370 / 2340 * 100%); margin: -5vw auto 0 0;}
  .conceptHighlightImg03 { width: calc( 255 / 2340 * 100%); margin-left: 44%; margin-top: -12.5vw;}

  .conceptHighlight { margin-top: 2vw; padding-left: 34%; padding-left: calc( 1350 / 2340 * 100%);}
  .conceptHighlight li { font-size: 1em; margin-bottom: 0.6em;}

  .conceptHighlightArea .moreBtn { margin: 2vw 0 5.2vw 0; text-align: center; padding-left: 0;}

  .contentsBoxTitle{ height: 5vw;}
  .greeting { padding: 6vw 4vw;}

  .moreBtn { margin-top: 2.4vw;}

}

@media screen and (min-width: 900px) {
  .contentsArea { padding: 6vw 0;}
  .aboutFig { width: 100%; width: 91.926%;}
  .conceptHighlight { width: 90%;}
  .conceptHighlight li{ font-size: 1.31em;}
  .moreBtn a { padding: 0.75em 1.25em 0.75em 1.46em;}
  .conceptHighlightArea .moreBtn { padding-left: 12%;}

  .contentsTitle { height: 2.6vw; padding: 0;}
  .greeting { width: 82%; padding: 3.4vw; margin: 0 auto;}
}

@media screen and (min-width: 1400px) {
  .conceptHighlight { width: 100%;}
}

.ServiceBox{ position:relative; text-align: center; width: 100%; margin: 0 auto;}
.ServiceBox + .ServiceBox{ margin-top: 5.333vw;}
.ServiceBoxBg{ width: 90%; margin: 0 auto;}
.ServiceBox03 .ServiceBoxBg{ width: 100%; margin: 0 auto;}
.ServiceBoxInner{ position: absolute; top: 7.2vw; width: 100%; padding: 0 4vw; color: #2c4e76;}
.ServiceBox02 .ServiceBoxInner{ width: 80%; margin: 0 auto; left: 10%;}
.ServiceBox03 .ServiceBoxInner{ width: 80%; margin: 0 auto; left: 10%;}
.ServiceBoxInner p{ text-align: left;}
.ServiceBox h3{ text-align: center; font-size: 1.2rem; margin-bottom: 0.6em;}
.ServiceBox h3 span{
  background: #2c4e76; color: #fff; display: inline-block;
  padding: 0.3em 0.6em ; line-height: 1;
}
.ServiceBox ul{ display: inline-block; text-align: left;}
.ServiceBox ul li{ padding-left: 4%; text-indent: -5%; line-height: 1.4}
.ServiceBox ul li + li{ margin-top: 2% }

.ServiceBoxFig01{ width: 28%; position: absolute; right: 6%; top: 28vw;}
.ServiceBoxFig02{ width: 20%; left: 0; position: absolute; top: 10.666vw;}
.ServiceBoxFig03{ width: 36%; position: absolute; right: 14%; top: 30vw;}
.ServiceBoxFig04{ width: 18%; right: 0%; position: absolute; top: 27vw; }
.ServiceBoxFig05 { width: 17%; left: 60%; position: absolute; top: 57vw;}



@media screen and (min-width: 560px) {
  .Service{ font-size: 0;}
  .ServiceBox { width: 33.3%; margin: 0 auto; display: inline-block; vertical-align: top;}
  .ServiceBox + .ServiceBox { margin-top: 0;}
  .ServiceBoxInner { padding: 5% 0 0; top: 0; font-size: 13px;}
  .ServiceBox h3 { font-size: 1.05rem; margin-bottom: 0.4em;}
  .ServiceBoxBg { width: 96%;}

  .ServiceBox h3 span{ padding: 0.23em 1.07em ;}

  .ServiceBox03 .ServiceBoxInner { width: 88%;}
  .ServiceBox03 .ServiceBoxInner ul{ padding-right: 18%;}
  

  .ServiceBox01 .ServiceBoxBg { width: 102%; margin: 0 auto 0 -1%;}
  .ServiceBox03 .ServiceBoxBg { width: 105%; margin: 0 auto 0 -1.5%;}
  .ServiceBoxFig01 { width: 34%; right: auto; top: -40%; left: 5%;}
  .ServiceBoxFig02 { width: 25%; left: -5%; top: 32%; z-index: 10;}
  .ServiceBoxFig03 { width: 36%; top: auto; bottom: 0;}
  .ServiceBoxFig04 { width: 25%; right: -5%; position: absolute; top: 32%;}
  .ServiceBoxFig05{ width: 18%; left: 60%; top: auto; bottom: -15%;}
}

@media screen and (min-width: 900px) {
  .contentsAreaService{ overflow: hidden;}
  .Service{ margin-top: 4.1vw;}
  .ServiceBoxInner { padding: 11% 0 0; font-size: 0.8125rem;}
  .ServiceBox01 .ServiceBoxBg { width: 90.38%; margin: 0 auto 0 0%;}
  .ServiceBox02 .ServiceBoxBg{ width: 79.61%;}
  .ServiceBox03 .ServiceBoxBg { width: 93.71%; margin: 4% auto 0 auto;}

  .ServiceBox02 .ServiceBoxInner { width: 70%; margin: 0 auto; left: 15%;}
  .ServiceBox03 .ServiceBoxInner { width: 68%; left: 16%;}
  .ServiceBox03 .ServiceBoxInner ul{ padding: 0;}

  .ServiceBoxFig01 { width: 44.1%; top: -42%; left: 8%;}
  .ServiceBoxFig02 { width: 33.46%; left: -16%; top: -19%;}
  .ServiceBoxFig03 { width: 33.71%; bottom: -15%; right: 18%;}
  .ServiceBoxFig04 { width: 32.948%; right: -24%; top: -28%;}
  .ServiceBoxFig05 { width: 19.74%; left: 60%; bottom: -5%;}
}
@media screen and (min-width: 1400px) {
    .ServiceBoxInner { font-size: 1rem;}
}

.contentsAreaQA{ background: url(../img/top-qaimg.jpg) right top / auto 108%;}
.contentsAreaQATitleBox{
  background: url(../img/svg/qaTlBg.svg) center center / auto 100% no-repeat;
  padding: 14vw 10vw; margin: 0 3vw;
}

.contentsAreaRecruit{ background: url(../img/recruitBg.jpg) right 68% top / auto 100% no-repeat;}
.contentsAreaRecruitTitleBox{
  margin-right: 30%; text-align: left; margin-left: 3%;
  background: url(../img/fig-img08leaf.png) left top / 14% auto no-repeat;
}
.contentsAreaRecruitTitleBox .moreBtn,
.contentsAreaRecruitTitleBox .contentsTitle{ text-align: left;}
.contentsAreaRecruitTitleBox .contentsTitle{ padding-left: 20%;}

.contentsAreaContact .telBox{ border: none; text-align: center;}
.contentsAreaContact .telBox time{ width: 80%; display: inline-block;}


@media screen and (min-width: 560px) {
  .contentsAreaQA { background: url(../img/top-qaimg.jpg) left 10% top / auto 108%;}
  .contentsAreaQATitleBox { padding: 6% 8% 27.5%; margin: 0 0 0 auto; width: 50%; height: 0; }

  .contentsAreaHalf{ display: inline-block; width: 50%; vertical-align: top;}
  .contentsAreaRecruit{
    background: url(../img/recruitBg.jpg) right top / 100% auto no-repeat;
    padding: 0 0 32%; position: relative;
  }
  .contentsAreaContact{
    text-align: center;
    padding: 0 0 32%; position: relative;
  }
  .contentsAreaRecruitTitleBox{
    position: absolute; top: 50%; left: 10%; transform: translate(0%, -50%);
    margin: 0;
    background: url(../img/fig-img08leaf.png) left top 3% / 15% auto no-repeat;
  }
  .contentsAreaContactInner{ position: absolute;  top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%;}
  .contentsAreaContact .telBox { padding: 0 0.6em; width: 100%;}
  .contentsAreaContact .telBox time { width: 64%;}
}

@media screen and (min-width: 900px) {
  .contentsAreaQA { padding: 0;}
  .contentsAreaQATitleBox { padding: 6% 5% 21.47% 4%; margin: 0 12.5% 0 auto; width: 33.9236%; height: 0;}
  .contentsAreaQAInner{ padding: 5.76% 0 5.2%;}
  .contentsAreaQA .contentsTitle{ margin-bottom: 3.19vw;}
  .contentsAreaQA .moreBtn{ margin-top: 3.19vw; }

  .contentsAreaHalf{ padding: 0 0 34.2%; }

  .contentsAreaRecruitTitleBox{ width: 70%; padding-left: 15%;}
  .contentsAreaRecruitTitleBox .contentsTitle { padding-left: 0;}
  .contentsAreaRecruitTitleBox .moreBtn{ margin-top: 2.1vw;}

  .contentsAreaContactInner { width: 54%;}
  .contentsAreaContactInner .contentsTitle { margin-bottom: 3.125vw;}
  .contentsAreaContact .telBox time { margin-top: 1.4vw;}
}


.saiteFooter{ background: #fedec5; padding: 16vw 2vw 0;}
.lineBox{ background: #fff; padding: 6vw 8vw; }
.lineColor{ color: #00c200; font-weight: bold;}
.lineBoxTxt{ }
.lineBox h3{ width:12%; font-weight: bold; font-size: 0.9rem; line-height: 1.4; margin-bottom: 0.2em; display: inline-block; vertical-align: middle;}
.lineBox figure{ font-size: 0;}
.lineBox .telBox{ padding: 0; margin-top:0.3rem; width: 100%; font-size: 0;}
.lineBox p{
  font-size: 0.8em;  display: block; width: 100%;
  border-bottom: 1px solid #333; padding-top: 0.3em; padding-bottom: 1em; font-weight: 100;
}
.snsArea{ margin-top: 1em;}
.lineBox .snsBox{ display: inline-block; width: 88%; vertical-align: middle; text-align: right;}
.lineBox .snsBox li{ margin: 0 0 0 5%; width: 15%; position: relative;}
.snsBox li{ margin: 0 0 0 5%; width: 13%; position: relative;}
.lineBox .snsBox li a.pc,
.snsBox li a.pc{ display: none;}


.companyDate .siteLogo{ width: 42%; margin-top: 5.333vw;}
.companyDate p{ font-size: 0.9em; margin-top: 2vw; line-height: 1.6;}


.copywight{ background: #fffef2; font-size: 0.8em; line-height: 1.3; margin: 6vw -2vw 0vw; padding: 2vw 2vw 19.5vw; padding: 2vw 2vw 2vw;}
.copywight p span.twoLine{ display: inline-block; vertical-align: middle; font-size: 0.64em; line-height: 0.9; margin: 0 1%;}

.snsPopup{ display: none;}

@media screen and (min-width: 560px) {
  .saiteFooterInner{ /*overflow: hidden;*/}
  .saiteFooter { padding: 6vw 2vw 0;}
  .lineBox { width: 50%; float: right; padding: 2%;}
  .fotterLeft{ width: 50%;}
  .companyDate{ width: 60%; display: inline-block; vertical-align: top;}
  .companyDate .siteLogo { width: 50%; margin-top: 5.333vw; background: #fff; padding: 1.2%; margin: 0;}
  .siteFooterNav{ font-size: 0.9em; display: inline-block; vertical-align: top;}
  .siteFooterNav li{ margin-bottom: 0.5em;}
  .siteFooterNav li p{ padding-left: 1.5em; font-size: 0.9em; margin-top: 0.2em;}
  .siteFooterNav a{ color: #000;}
  .copywight{ padding: 2vw 2vw;}
  
}

@media screen and (min-width: 900px) {
  .lineBox { width: 29.36%; margin-right: 3.33%; padding: 1.6% 2.7%;}
  .lineBox .snsBox li a.sp,
  .snsBox li a.sp{ display: none;}
  .lineBox .snsBox li a.pc,
  .snsBox li a.pc{ display: block;}
  .lineBox figure { font-size: 0;}
  .lineBox h3 { font-size: 1rem; padding-top: 1.2%; margin-left: 0}
  .lineBox p { font-size: 0.875em; margin-left: 0;}
  .lineBox .telBox{ margin-left: 0;}
  .lineBoxTxt{ padding: 2%;}
  .fotterLeft { width: 50%; margin-left: 3.33%;}
  .companyDate { width: 50%;}
  .siteFooterNav li { font-size: 1em;}
  .companyDate .siteLogo { width: 68.8%; padding: 4.72% 11.54%; border-radius: 4%;}

  .snsPopup{ position: absolute; width: 12vw; top: -12.5vw; right: -0.2vw; border: 2px solid #ffdec5; padding: 18%; background: #fff; box-shadow: 2px 4px 10px 0px rgba(0, 0, 0, 0.1);}
  .snsPopup:before{
    content: ""; display: block; width: 0; height: 0; background: transparent;
    border-style: solid; border-width: calc(0.8vw + 4px) 8px 0px 8px; border-color: #ffdec5 transparent  transparent ;
    position: absolute; right: 10px; bottom: calc( -0.8vw - 4px);
  }
  .snsPopup:after{
    content: ""; display: block; width: 0; height: 0; background: transparent;
    border-style: solid; border-width: calc(0.8vw) 6px 0px 6px; border-color: #fff transparent  transparent ;
    position: absolute; right: 12px; bottom: calc( -0.8vw);
  }
  .siteHeader .snsPopup{ top: auto; bottom: -13vw; right: -0.2vw;}
  .siteHeader .snsPopup figure{ font-size: 0;}
  .siteHeader .snsPopup:before{
    content: ""; display: block; width: 0; height: 0; background: transparent;
    border-style: solid; border-width:  0px 8px calc(0.8vw + 4px) 8px; border-color:  transparent  transparent #ffdec5 ;
    position: absolute; right: 10px; top: calc( -0.8vw - 4px); bottom: auto;
  }
  .siteHeader .snsPopup:after{
    content: ""; display: block; width: 0; height: 0; background: transparent;
    border-style: solid; border-width:  0px 6px calc(0.8vw) 6px; border-color:  transparent  transparent #fff ;
    position: absolute; right: 12px; top: calc( -0.8vw); bottom: auto;
  }

  .onPop + .snsPopup{ display: block;}

  
}

@media screen and (min-width: 1400px) {
  .lineBox {}
  .fotterLeft{ }
}



.lowpageMainVisialArea{ padding: 5vw 20vw; }
.AboutlowpageMainVisialArea{ background: url(../img/aboutMainVisial.jpg) left -24vw top / auto 100%; padding: 5vw 20vw;}
.pageTitle{
  background: #fff; border-radius: 50%; padding: 12.5% 9% 8%;
  height: 0; padding-bottom: 26%; position: relative;
}
.pageTitle h1{ position: absolute; top: 50%; left: 50%; transform: translate( -50%, -50%); font-size: 0;}
.AboutlowpageMainVisialArea .pageTitle h1{ width: 74.18%;}
.boxTl{
  position: relative; background: #f36438; color: #fff; line-height: 1;
  padding: 0.285em 1em 0.285em 1.62em;
  padding: 0.285em 0.6em 0.285em 1.2em;
  font-size: 1.3em; font-size: 1.05em;  border-radius: 2px; 
  display: inline-block;
}
.boxTlBlue {
    background: #2c4e76;
    color: #fff;
    padding: 0.285em 1em 0.285em 1.62em;
    padding: 0.285em 0.3em 0.285em 1.2em;
}

.boxTl:before{ 
  content: ""; display: block; background: #fff; border-radius: 50%; width: 0.34em; height: 0.34em;
  top: 50%; left: 0.6em; transform: translate(-50%, -50%); position: absolute;
}
.boxTl span{ font-size: 0.84em;}

@media screen and (min-width: 560px) {
  .lowpageMainVisialArea{ padding: 4.86% 0;}
  .AboutlowpageMainVisialArea { padding: 4.86% 0; background: url(../img/aboutMainVisial.jpg) left 20% top / auto 120%; }
  .pageTitle { padding: 3.4722%; padding: 0 0 12.36% 0; width: 32%; margin: 0 auto;}
  .aboutPageFig{ width: 70%; margin: 0 auto;}
  .boxTl{ padding: 0.285em 0.5em 0.285em 1.2em; font-size: 1.2em; }
}
@media screen and (min-width: 900px) {
  .AboutlowpageMainVisialArea { padding: 4.86% 0; background: url(../img/aboutMainVisial.jpg) left top / 100% auto; }
  /*.pageTitle { padding: 3.4722%; width: 28.333%; margin: 0 auto;}*/
}

.contentsAreaAboutS01 .readTxt{ text-align: center; width: 80%; margin: 0 auto 8vw; }
.contentsAreaAboutS01 .readTxt span{ padding: 2.244% 6.4%; font-size: 0;}
.contentsAreaAboutS01 .readTxt .readTxt01{ width: 100%; margin-bottom: 4.5333%; }
.contentsAreaAboutS01 .readTxt .readTxt02{ width: 75.333%; }

.featureArea{ margin-top: 8vw; position: relative;}
.featureBox{ background: #fedec5; padding: 5.7%; padding: 6% 4.2% 4.2%; position: relative; border-radius: 0.4%;}
.featureBox + .featureBox{ margin-top: 6vw;}
.featureAreaInner + .featureAreaInner{ margin-top: 6vw;}
.featureBox.bgGreen{ margin-top: 12vw;}

.featureBox h3{
  position: absolute; top: 0; transform: translate(0, -40%); max-width: calc(100% - 8%) ;}

.featureBox.bgGreen{ background: #c5e0d4; }
.featureBox.bgGreen h3{
  transform: translate(0, -80%); 
  line-height: 1.15; background: #00c1c6;
}

.featureAreaFig{ width: 60%; margin: -4vw 0 0 auto; position: relative;}
.featureAreaFig{ width: 45%; margin: -13vw 0 0 auto;position: relative;}

.msgTxtFig{ width: 50%; margin: 6vw auto 0 8vw;}
.msgTxtFig{ width: 40%; margin: 6vw auto 0 4vw;}

.featureAreaFigBodyCare{
  width: 24%; margin: -32vw 4vw 0 auto;
}
.msgTxt{
  background: -moz-radial-gradient(#ffa472 10%, #fffef2 70%);
  background: -webkit-radial-gradient(#ffa472 10%, #fffef2 70%);
  background: -ms-radial-gradient(#ffa472 10%, #fffef2 70%); padding: 16vw 8vw 16vw 10vw;
  margin-top: -8vw;
}

@media screen and (min-width: 560px) {
  .contentsAreaAboutS01 .readTxt{ text-align: center; width: 35%; margin: 0 auto 3.47vw;}
  .contentsAreaAboutS01 .readTxt .readTxt02{margin: 0 auto;}
  .featureArea{ margin: calc(3.47vw + 1.4%) -1.4% 0; }
  .featureBox { padding: 2.85%;margin: 0 1.4% 2.8%; width: calc( 49% - 2.8%); display: inline-block; vertical-align: top; }
  .featureBox + .featureBox{ margin-top: 0;}
  .featureAreaInner + .featureAreaInner{ margin-top: 0;}
  .featureAreaInner{ display: flex; }
  .featureBox:nth-child(5){ width: 72.8%;}
  .featureBox.bgGreen{ margin-top: 0; width: 72.8%;}

  .featureAreaFig { width: 21.5%; margin: 0; position: absolute; right: 1.4%; bottom: 5%;position: relative; margin: -8vw 4vw 0 auto;}
  .msgTxtFig{ width: 21.5%; margin: 0; display: inline-block; position: relative; z-index: 10;}
  .msgTxt{
    width: 64.4%; display: inline-block; padding: 10.47% 6.54% 7.47% 13.28%; margin-left: -5%; position: relative;
    margin: -25vw 0 0 19vw;
  }

  .featureAreaFigBodyCare{ width: 12.188%; margin: -16vw 0 0 auto;}

  .featureBox.bgGreen h3 { transform: translate(0, -40%);line-height: 1;}
}
@media screen and (min-width: 900px) {
.featureAreaFig { width: 28.5%; margin: -23.5% -9.81% 0 auto;  margin: -5vw 0 0 auto;}
.msgTxtFig { width: 25%; vertical-align: middle; padding-bottom: 2%; margin-top: 5vw;}
.msgTxt{padding: 7.47% 8.54% 7.47% 15.28%; vertical-align: middle; width: 70%; margin: -11vw 0 0 14vw;}
.featureAreaFigBodyCare{ width: 12.188%; margin: -22vw -4vw 0 auto;}

}

.linkArea{ background: #dcefeb; padding: ; overflow: hidden;}
.linkAreaInner{ padding: 0 2vw;}
.linkBnrBox{ font-size: 0;}
.linkBnrBox + .linkBnrBox{ margin-top: 4vw;}

@media screen and (min-width: 560px) {
  .linkAreaInner{ margin: 0 -1.4%; }
  .linkBnrBox{ width: calc( 49% - 2.8%); margin: 0 1.4%; display: inline-block; vertical-align: top;}
  .linkBnrBox + .linkBnrBox { margin-top: 0;}
}

.sectionTitle{ text-align: center; margin-bottom: 2.77vw;}
.sectionTitle span { font-size: 1.8em; padding: 0.1em 0.8em; line-height: 1.25;}
.sectionTitle span span.sub{ font-size: 0.65em; display: block;}


.greetingTxt{ margin-bottom: 6.25%;}
.greetingTxt p + p{ margin-top: 4vw;}
.signature{ text-align: right;}
.signature span{font-weight: bold;}
.greetingCareer{ background: #fedec5; padding: 6.25% 6.25% 4.16%; border-radius: 4px;}

.prof{ margin: 2vw 0;}
.prof dt{ font-weight: bold;}
.prof dt span{ font-size: 0.84em;}

.greetingActivities{ background: #fcc69c; padding: 4.16% 6.25% 6.25% ;}
.greetingActivities .boxTl + p{ margin-top: 2vw;}
.greetingActivities p + .boxTl{ margin-top: 8vw;}
.boxTl.line2{ line-height: 1.4;}

.bookLinkArea{ background: #fff; padding: 7.14%; margin-top: 4vw;}
.bookLinkBox figure{width: 38%; float: left; margin-right: 4%; margin-bottom: 4%; font-size: 0; border: 1px solid #eee;}
.bookName{ font-weight: bold; line-height: 1.4;}
.bookAuthor{ font-size: 0.814rem;}
.bookAuthor{ font-size: 0.94rem;}
.bookName .txtM{ font-size: 0.814em; line-height: 1.3; display: block; margin-bottom: 1.5%;}
.bookName .txtS{ font-size: 0.814em; line-height: 1.3; display: block;margin-top: 1%;}

.shopLink{ clear: both; margin-top: 4vw;}
.shopLinkBtn{ position: relative; display: block; padding-bottom: calc(14.22% - 2px); height: 0; width: 100%;}
.shopLinkBtn + .shopLinkBtn{ margin-top: 2.5%;} 
.shopLinkBtnGakken{border: 1px solid #008837;}
.shopLinkBtnGakken img{ width: 28%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.shopLinkBtn:after{
  content: ""; width: 4%; height: 0; padding-bottom: 3.1111%; display: block;
  background: url(/img/svg/atherLinkG.svg) center center / 100% auto  no-repeat;
  top: 50%; right: 3%; transform: translate( 0, -50%); position: absolute;
}

.shopLinkBtnChuou{border: 1px solid #2f8bda;}
.shopLinkBtnChuou img{ width: 36%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.shopLinkBtnChuou:after{background: url(/img/svg/atherLinkB.svg) center center / 100% auto  no-repeat;}


.shopLinkBtnAmazon{border: 1px solid #f79901; background: #f79901;}
.shopLinkBtnAmazon img{ width: 24%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.shopLinkBtnAmazon:after{ background: url(/img/svg/atherLinkW.svg) center center / 100% auto  no-repeat;}

.bookLinkBox + .bookLinkBox{ margin-top: 8vw;}


.cLinkArea{ background: #f6f6f6; text-align: center; padding: 10px 20px; font-size: 0.9em; }
.cLinkArea p{ display: inline-block; }
.cLinkImg{display: inline-block; max-width: 368px;}
.cLinkImg a{ display: inline-block;}
.cLinkImg a img{ display: inline-block; }
.cLinkImg a > img:first-child{ width: 90%; vertical-align: middle;}
.cLinkImg a span { display: inline-block; width: 3.5%; margin-left: 3%; vertical-align: middle; font-size: 0; padding-top: 1.1%;}

@media screen and (min-width: 560px) {
  .greetingCareer { background: url(../img/fig-img09binder.png) top 4vw right 4.7vw / 16.541% auto no-repeat, #fedec5;}
  .prof{ margin: 1.04vw 0 2.7vw;}
  .greetingActivities .boxTl + p { margin-top: 1.04vw;}
  .greetingActivities p + .boxTl { margin-top: 2.7vw;}
  .bookLinkArea{ margin-top: 1.04vw; padding: 3.57%; font-size: 0; width: 70%;}
  .bookLinkBox{ width: 50%; display: inline-block; vertical-align: top;}
  .bookLinkBox{ width: 100%; display: inline-block; vertical-align: top;}
  
  .bookLinkBox figure { width: 25.64%; float: none; display: inline-block; margin-right: 3.57%;}
  /*.bookLinkBox figure { width: 21%; }*/
  .bookDate{ display: inline-block; width: calc(100% - 33.57%); vertical-align: top; position: relative; height: 0; padding-bottom: 57%;}
  .bookDate{ width: calc(100% - 33.57%); margin-bottom: 0.4em; padding-bottom: 50%;}
  .bookName{ font-size: 1.1rem; margin-bottom: 0.5em;}

  .bookLinkBox + .bookLinkBox { margin-top: 0;}
  .bookLinkBox + .bookLinkBox figure{ margin-left: 3.57%; }

  .shopLink { margin-top: 0; bottom: 0; position: absolute; width: 100%;}
  .greetingTxt p + p{ margin-top: 2em;}

  .cLinkArea{ padding: 15px 20px; }
  .cLinkArea p{ margin: 0 0.5%; }
  .cLinkImg{ margin: 0 0.5%; }
}

@media screen and (min-width: 900px) {
  .greetingCareer{ margin: 0 -6.25%;}
  .greetingActivities{ margin: 0 -6.25%;}
  .bookName{ font-size: 1rem;}
  .bookLinkBox figure { margin-right: 7.69%; margin-bottom: 0;}
  .bookDate { width: calc(100% - 25.64% - 7.69% - 7.69%); padding-bottom: 43%; padding-bottom: 39%;}
  .bookLinkBox + .bookLinkBox figure { margin-left: 7.69%;}
  .bookAuthor { line-height: 1.3; margin-top: 1.3%;}
  .bookName .txtM { }
  .bookName .txtS { font-size: 0.78em;}
  .bookLinkBox figure { width: 27.64%;}
}



.info{
  background: #fff;
  border: 1px solid #999;
  box-shadow: 3px 3px 8px 6px rgba(0, 0, 0, 0.08) inset;
  border-radius: 0.4em;
  padding: 1.2em;
  margin-bottom: 4em;
}

.info .contentsTitle{
  height: 7.8vw;
}

@media screen and (min-width: 560px) {
  .info{
    padding: 1.5em 3em 2.5em;
    margin: 0 auto 8em;
    width: 71.8%;

  }
  .info .contentsTitle{
    height: 1.73vw;
  }
}


.contentsAreaGs{
   background: #FFFEF2;
}

.contentsAreaGsInner {
  max-width: 960px;
  margin:  40px auto 0;
  padding: 0 15px;
}
.contentsAreaGsInner .flexBlock {
  text-align: left;
  width: 100%;
  font-size: 0;
}
.contentsAreaGsInner .flexBlock p{
  font-size: 1rem;
}
.contentsAreaGsInner .flexBlock h3 {
  font-size: 1.5rem;
  line-height: 1.2;
  margin-bottom: 10px;
  padding-top: 20px;
}
.contentsAreaGsInner .flexBlock h3 span {
  font-size: 1rem;
}
.contentsAreaGsInner .flexBlock p {
  margin-bottom: 15px;
}
.contentsAreaGsInner .flexBlock .btn {
  text-align: center;
  text-decoration: none;
  background: #EB8E2D;
}
.flexBlock figure{
  overflow: hidden;
  border-radius: 4px;
  border:  solid 1px #ccc;
}

.btn {
  width: 100%;
  max-width: 420px;
  height: 60px;
  line-height: 60px;
  background: var(--deepGray);
  display: block;
  margin: 0;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 16px;
  color: #fff;
}

@media screen and (min-width: 768px) {
  .contentsAreaGsInner .flexBlock .btnNode {
    position: absolute;
    bottom: 0;
    right: 0;
    width: calc(50% - 40px);
  }
  .btn {
    height: 72px;
    line-height: 72px;
  }
  .contentsAreaGsInner {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    position: relative;
  }
  .contentsAreaGsInner .flexBlock {
    text-align: left;
    width: 50%;
    font-size: 0;
  }
  .contentsAreaGsInner .flexBlock + .flexBlock {
    padding-right: 0px;
    padding-left: 40px;
  }
  .contentsAreaGsInner .flexBlock h3 {
    padding-top: 0px;
  }
}

.gsImg img {
  border-radius: 8px;
}

@media screen and (min-width: 900px) {

}