@charset "utf-8";

/* RESET
----------------------------------------------------------------------------------------------------*/
a,article,body,dd,div,dl,dt,em,form,footer,header,h1,h2,h3,h4,h5,h6,html,i,iframe,img,label,legend,li,nav,ol,p,section,main,span,table,tbody,tfoot,thead,time,tr,th,td,ul,video{font-family:inherit;font-size:100%;font-weight:inherit;font-style:inherit;vertical-align:baseline;white-space:normal;margin:0;padding:0;border:0;outline:0;background:transparent;line-height:1.6;text-align:left}textarea{font-family:inherit;font-size:100%;font-weight:inherit;font-style:inherit;vertical-align:baseline;margin:0;padding:0;border:0;outline:0;background:transparent;line-height:1.6;text-align:left}article,footer,header,nav,section,main{display:block}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}

:root{  
  --main-color:#4470db;
  --red-color:#ff0000;
  --white-color:#fff;
}
body {
  margin: 0 auto;
  padding: 0;
  font-size: 18px;
  font-family: YuGothic,'Yu Gothic','ヒラギノ角ゴシック','Hiragino Sans','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
  font-weight: 500;
  color: #333333;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  background-color: var(--white-color);
}
main#main{
  background-color: var(--white-color);
  padding-bottom: 80px;
}
@media print {
  body {
    zoom: 0.5;
    -webkit-print-color-adjust: exact;
  }
}
.pc { display: block }
.sp { display: none }
@media only screen and ( max-width : 990px ) {
  body {font-size: 16px;}
  .pc { display: none }
  .sp { display: block}
}
h3{
  font-size: 2em;
  letter-spacing: 0.1em;
}
img {
  vertical-align: middle;
  border: none;
}


/* ----------------------------------------------

 * 設定

---------------------------------------------- */
a {
  outline:none;
  color: #333;
}
a:hover {
  text-decoration: none;
}
a,a:hover,a:hover img {
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  text-decoration: none;
}
a:hover {
  filter: alpha(opacity=80);
  -moz-opacity:0.80;
  opacity:0.80;
}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.container{margin:0 auto}
.clr:after,.col:after,.container:after,.group:after,.row:after{content:"";display:table;clear:both}
.row{padding-bottom:0}
.col{display:block;float:left;width:100%}
/* @media (min-width:769px),print{.gutters .col{margin-left:2%}.gutters .col:first-child{margin-left:0}
.gutters .colR:first-child{margin-right:0}
.sp{display:none}} */
/* @media(max-width:768px){.sp_none{display:none !important;}} */
img {
    max-width: 100%;
    height: auto;
}
@media only screen and ( max-width : 990px ) {
  .container {
    padding: 0 30px;
  }
}
@media only screen and ( max-width : 480px ) {
  .container {
    padding: 0 20px;
  }
}
@media only screen and ( max-width : 374px ) {
  .container {
    padding: 0 10px;
  }
}
@media print, screen and ( min-width : 991px ) {
  .container {
    max-width: 1300px;
    padding: 0 10px;
  }
}
.m5{
  margin: 50px auto;
}

.containerM{
  max-width: 1000px;
  margin: 0 auto;
}
.mb5{
  margin-bottom: 50px;
}
.mt5{
  margin-top: 50px;
}
.mt1{
  margin-top: 10px;
}
.txtC{
  text-align: center;
}
.txtR{
  text-align: right;
}
.txtL{
  text-align: left;
  display: inline-block;
}
.txtBold{
  font-weight: bold;
}
.txtColorMain{
  color: var(--main-color);
}
.txtColorWhite{
  color: var(--white-color);
}
.txtColorRed{
  color: var(--red-color);
}
.txtSizeS{
  font-size: .9em;
  /* line-height: 1.1; */
}

.txtSizeM{
  font-size: 1.2em;
}
.w100{
  width: 100%;
}

/* ---------------------------------------------------------------------------------------------

　   HEADER

--------------------------------------------------------------------------------------------- */

#header {
  box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
  z-index: 99;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
}
@media print{
  #header {
    position: absolute;
  }
}
#gNav li  a {
  letter-spacing: 0.2em;
}

.menuNew::before{
  content: attr(data-en);
  color: var(--red-color);
  font-size: .7em;
  font-style: italic;
  letter-spacing: .1em;
  position: absolute;
  transform: rotate(-10deg);
  top: -.5em;
  left: 45px;
}
.menuNew:hover::before{
  opacity: 0;
}
/* PC */
@media print, screen and ( min-width : 991px ) {
  #header {
    padding: 20px;
  }
  .h_logo img {
    width: 200px;
  }
  #h_top {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  #gNav ul {
    position: relative;
    display: flex;
    align-items: center;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  #gNav li {
    position: relative;
    padding: 0 .1em;
  }
  #gNav li i {
    font-size: 15px;
    margin-left: 5px;
  }
  #gNav li a {
    position: relative;
    display: block;
    text-align: center;
    padding: 5px 10px;
    border-radius: 5px;
    white-space: nowrap;
    font-size: 15px;
  }
  #gNav li  li a {
    font-size: 15px;
  }
  .menuNew::before{
    left: 0;
  }
  /* サブメニュー ****************************/
  #gNav div.menu-box  {
    visibility: hidden;
    opacity: 0;
    z-index: 10;
    align-content: space-between;
    position: absolute;
    margin: 0;    
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
  }
  /* サブメニューの画像 ***********/
  .menuHeader{
    background-position:center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    width: 505px;
    background: url('../img/menuHeader.jpg') no-repeat ;
  }
  .menuHeader p{
    color: #111;
    font-size: 24px;
    line-height: 100px;
    letter-spacing: .2em;
    padding-left: 1em;
  }
  .menuHeader2{
    background: url('../img/menuHeader2.jpg') no-repeat ;
    width: 749px;
  }
  .menuHeader3{
    background: url('../img/menuHeader3.jpg') no-repeat ;
  }
  .menuHeader4{
    background: url('../img/menuHeader4.jpg') no-repeat ;
  }
  #gNav div.menu-box .sub-menu {
    display: flex;
    flex-wrap: wrap;
    align-content: baseline;
    background: #fff;
    padding: 1em 0;
    align-items: flex-start;
    min-height: 250px;
    box-shadow: 0px 3px 15px rgb(0 0 0 / 20%);
  }
  #gNav div.menu-box a {
    padding: .1em;
    border-bottom: none;
    margin: .4em;
    text-align: left;
    letter-spacing: 0;
  }
  #gNav div.menu-box .sub-menu > li  {
    padding: 0;
    margin: 0;
    width: calc( 50% - 5px );
  }
  #gNav div.menu-box .sub-menu > li > a:before {
    content: '\f054';
    font-family: "FontAwesome";
    margin: 0 0.3em;
  }
  #gNav div.menu-box li a:hover:before {
    margin-left: .7em;
  }

  /* サブメニューのさらに下 ****************************/
  #gNav div.menu-box .sub-menu > li > ol{
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0 20px 50px;
  }
  #gNav div.menu-box .sub-menu > li > ol > li{
    padding: 0;
    width: 100%;
  }
  #gNav div.menu-box .sub-menu > li > ol > li a{
    margin: 0;
  }
  #gNav div.menu-box .sub-menu > li > ol > li a:hover{
    padding-left: 1em;
  }


  /* メニューhover  ****************************/
  #gNav ul > li:hover {
    -webkit-transition: all .5s;
    transition: all .5s;
  }
  #gNav ul > li:hover > a,#gNav .current-menu-item a,#gNav .current-menu-parent a{
    color: #fff;
    background-color:var(--main-color);
  }
  #gNav li:hover div.menu-box  {
    top: 2.3rem;
    visibility: visible;
    opacity: 1;
    z-index: 9999;
  }
 #gNav li:hover ul.sub-menu a ,.mActive{
    color: var(--main-color);
    background-color: #fff;
  }
  #gNav li:hover ul.sub-menu a:hover {
    color: #fff;
    background-color:var(--main-color);
    opacity: .8;
  }
  #gNav .contact_btn a:hover {
    color: #fff;
  }

  /* 右の小メニュー  ****************************/
  #gNav  li.min-menu {
    margin: 0;
    padding: 0 1em;
    border-left: #111 1px solid;
    height: 30px;
  }
  #gNav  li.min-menu a{
    font-size: 15px;
  }
  #gNav li.ml-3{
    margin-left:3em;
    border: none;
  }
  #gNav li.min-menu a i{
    font-size: 25px;
  }
}
@media print, screen and ( min-width : 1110px ) {
  #gNav li {
    padding: 0 1em;
  }
  #gNav li a {
    font-size: 18px;
  }
  #gNav li  li a {
    font-size: 16px;
  }
}
/* ---------------------------------------------------------------------------------------------

　   FOOTER

--------------------------------------------------------------------------------------------- */
#footer {
  background: var(--red-color);
  color: var(--white-color);
  font-size: 14px;
  padding: 20px 0 5px 0;
}
.f_logo{
  margin: 2rem 0 3rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.f_logo p {
  /* text-align: center; */
  padding: 0 20px 20px 30px;
}
.copy {
  text-align: center;
}
.copy a{
  color: var(--white-color);
}
.f_logo img {
  margin-bottom: 20px;
}
@media only screen and ( max-width : 990px ) {
  .copy {
    font-size: 10px;
  }
}
/* ---------------------------------------------------------------------------------------------

　   TOPページ

--------------------------------------------------------------------------------------------- */
/* ローディング *********************:*/
#loading {
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: 99999;
  background:var(--white-color);
  text-align:center;
}
#loading_logo{
  display: none;
}
#loading_logo.start video {
  position: absolute;
  top: 45%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%, -50%);
  width: 90%;
}
#loading_logo.start{
  display: block;
}
/* loadingが画像だった場合のCSS
#loading {
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: 99999;
  background:var(--white-color);
  text-align:center;
}
#loading_logo img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%, -50%);
  width:500px;
  max-width: 80%;
}
.loadingFade{
    animation-name: loadingAnime;
    animation-duration:1.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}  
@keyframes loadingAnime{
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
*/
/* 2回目以降の場合 */
/* #loading.appear img ,#loading.appear video{
  display: none;
} */
#loading.appear{
  transform: scaleX(0);
  animation-name:PageAnime;
  animation-duration:1.2s;
  animation-fill-mode:forwards;
}  
@keyframes PageAnime{
  0% {
    transform-origin:right;
    transform:scaleX(0);
  }
  50% {
    transform-origin:right;
    transform:scaleX(1);
  }
  50.001% {
    transform-origin:left;
  }
  100% {
    transform-origin:left;
    transform:scaleX(0);
  }
}

    
/* スライドショー******************************************: */
/* スライドショー画像部分 */
.slide {
  position: relative;
  height: 100vh;
  min-height: 700px;
  overflow: hidden;
  z-index: -1;
 }
.slide div > img {
  position: fixed;
  display: none;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  object-position: 50% 0;
  animation: slideZoom 3s 0s forwards;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
@keyframes slideZoom {
  0% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

/* スライドショー文字部分 */
.slide div h1{
  font-size: 4rem;
  text-shadow: 1px 1px 1px #8ec3ea;
}
.slide div > div{
  position : fixed;
  color: var(--white-color);
  display: none;
}
.updown{
  display: flex; 
}
.updown span {
  will-change:transform,opacity;
  opacity: 0;
  animation: titleUpdownAnim 1.5s  forwards;
  -webkit-transform: translateY(-30px);
  transform: translateY(-30px);
 
}
/*** 各span(文字)に遅延時間delayを設定 ***/
.updown span:nth-child(1) {
  -moz-animation-delay:1.5s;
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}
.updown span:nth-child(2) {
  -moz-animation-delay:1.5s;
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.75s;
}
.updown span:nth-child(3) {
  -moz-animation-delay:1.5s;
  -webkit-animation-delay: 1.5s;
  animation-delay: 2s;
}
.updown span:nth-child(4) {
  -moz-animation-delay:1.5s;
  -webkit-animation-delay: 1.5s;
  animation-delay: 2.05s;
}
.updown span:nth-child(5) {
  -moz-animation-delay:1.5s;
  -webkit-animation-delay: 1.5s;
  animation-delay: 2.1s;
}
.updown span:nth-child(6) {
  -moz-animation-delay:1.5s;
  -webkit-animation-delay: 1.5s;
  animation-delay: 2.15s;
}
@keyframes titleUpdownAnim{
  0%{
    opacity: 0;
    transform: translateY(-30px);
  }
  
  50%{
    opacity: 0.3;
    transform: translateY(15px);
  } 
  100%{
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes titleUpdownAnim{
  0%{
    opacity: 0;
    -webkit-transform: translateY(-30px);
  }
  
  50%{
    opacity: 0.3;
    -webkit-transform: translateY(15px);
  } 
  100%{
    opacity: 1;
    -webkit-transform: translateY(0px);
  }
}
/* 文字部分 */
.slide div  h2{
  font-size: 1.4em;
  text-shadow: 1px 1px 1px #8ec3ea;
  opacity: 0;
  animation: typing 2.5s  forwards;
  padding: 1rem 0;
  line-height: 2.5em;
  letter-spacing: 0.1rem;
  transform: translateY(-5px);
  clip-path: inset(0 100% 0 0);
  animation-delay: 2s;
}
/* .slide div  p.scrollin {
  transform: translateY(0); 
  clip-path: inset(0);
} */
@keyframes typing{
  0% { opacity: 0;
    transform: translateY(-5px);
    clip-path: inset(0 100% 0 0);
   }
  100% {  opacity: 1;
    transform: translateY(0); 
    clip-path: inset(0);
  }
}

@media only screen and ( max-width : 990px ) {
  .slide div h2 {
    font-size: 1em;
  }
  .slide div h1{
    font-size: 2em;
  }  
}
/* スライドショー１枚目の設定 */
.slide div.slide1 div{
  top: 40%;
  left:5%;
}
.slide div.slide1 div img {
  max-width: 95%;
  width: 500px;
}
/* スライドショー２枚目の設定 */
.slide div.slide2 div{
  bottom: 20%;
  left: 10%;
}
.slide div.slide2 > img  {
  object-position: 50% 20%;
}
/* スライドショー3枚目の設定 */
.slide div.slide3  div{
  top: 25%;
  right: 10%;
}
.slide div.slide3 > img {
  object-position: 50% 0;
}
/* スライドショー4枚目の設定 */
.slide div.slide4 div{
  top: 15%;
  left: 10%;
}
.slide div.slide4 > img {
  object-position: 50% 50%;
}
/* スライドショー5枚目の設定 */
.slide div.slide5 div{
  top: 30%;
  left: 10%;
}
.slide div.slide5 > img {
  object-position: 40% 10%;
}


/* スライドショー右下にバナー */
.slideBanner{
  position: fixed;
  bottom: 1em;
  right: 1em;
  z-index: 100;
}
.slideBanner  div{
  position: relative;
  margin: 1em 0;
  background-color: var(--red-color);
  border: 1px solid #666;
  margin: 5px 0 0 0;
  display: block;
  opacity:0.9;
}
.slideBanner div a{
  color: var(--white-color);
  display: block;
}
.slideBanner div:hover a{
  color:unset;
}
.slideBanner div::before {
  position: absolute;
  top: 0;
  right: 0px;
  bottom: 0;
  left: 0px;
  z-index: -1;
  content: '';
  background-color: var(--white-color);
  transform-origin: right top;
  transform: scale(0, 1);
  -webkit-transition:  .3s;
  transition: transform .3s;
}
.slideBanner div:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}
.slideBanner  div img{
  max-width: 35%;
}
.slideBanner  div p{
  font-weight: bold;
  padding-left: 1em;
  display: inline-block;
  vertical-align: middle;
  line-height: .5;
  font-size: 20px;
  max-width: 55%;
}
.slideBanner div p span{
  font-size: 12px;
  font-weight: normal;
}

.slideBanner div p::after{
  font-family: 'FontAwesome';
  content: "\f054";
  position: absolute;
  bottom: 45%;
  right: 0;
  padding-right: 1em;
}
@media only screen and ( max-width : 990px ) {
  .slideBanner{
    max-width: 60%;
  }
  .slideBanner div p{
    font-size: 11px;
  }
  .slideBanner div p span{
    font-size: 8px;
    white-space:nowrap
  }
}
@media print {
  .slide div > img {
    position: absolute;
  }
}
/* 新着情報 **********************/
#news {
  padding: 100px 0;
  background: var(--white-color);
}
.news{
  padding: 3.5em 0 1em;
}
.news-scroll{
  height: 330px;
  overflow-y: auto;
  width: 100%;
}
.news-scroll::-webkit-scrollbar {
  background: #eee;
  width: 2px;
  height: 10px;
}
.news-scroll::-webkit-scrollbar-thumb {
  background-color: var(--main-color);
}
.news div{
  display: flex;
  flex-wrap: wrap;
  text-align: left;
  margin: 1em 0;
}
.news div dt{
  width: 150px;
}
.news div dd{
  flex: auto;
  position: relative;
  padding-right: 15px;
}
.news div dd p{
  margin-top: 10px;
}
.news div dd a{
  color: var(--main-color);
}

.news div dd a.detail{
  display: block;
  padding: 0 1.5em 0 0;
}
.news div dd a.detail:after{
  font-family: 'FontAwesome';
  content: "\f054";
  position: absolute;
  top: 0%;
  right: 15px;
  padding-right: 1em;
}
.news div a.detail:hover{
  color: var(--main-color);
  padding-left: .1em;
}

span.newIcon{
  color: var(--red-color);
  border: 1px solid var(--red-color);
  padding: 0 .3em;
  font-weight: normal;
  margin-right: .7em;
}
.sTopNews{
  width: 90%;
  margin: 0 auto;
}
.sTopNews li img{
  padding: 0 .3em;
}
.newsTitle{
  color: var(--main-color);
  border-bottom:1px solid var(--main-color);
  font-size: 1.2em;
  font-weight: bold;
}
.newsTbl{
  margin: 1em auto;
  width: 98%;
}
.newsTbl tr{
  padding: 1em;
  border: 1px solid #d7d7d7;
}
.newsTbl th{
  background-color: var(--main-color);
  color: var(--white-color);
  padding: .5em;
  vertical-align: middle;
}
.newsTbl th , .newsTbl td{
  padding: .5em 1em;
}
.newsMovieBox{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.newsMovieBox div{
  flex: 1 1 450px;
  text-align: center;
  max-width: 600px;
}
.newsMovieBox div .tvcm{
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  border: 1px solid #666;
}
/* 最新情報ページネーション */
.newsPagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 8px;
  list-style-type: none;
  padding: 0;
}
.newsPagination a {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2em;
  border-radius: 1px;
  background-color: #f2f2f2;
  color: var(--main-color);
  padding: 0 .8em;
}
.newsPagination a:not(:hover) {
  text-decoration: none;
}
.newsPagination .current a {
  background-color: var(--main-color);
  color: var(--white-color);
  pointer-events: none;
}

@media only screen and ( max-width : 800px ) {
  .newsTbl th,.newsTbl td{
    display: block;
    width: 100%;
  }
  .news div dt{
    width: 100%;
  }
  .news div dd a.detail:after{
    content: none;
  }
}
/* 会社概要など **********************/
#sec02 {
  background: var(--white-color);
}
.topBox > div{
  display: flex;
  margin: 0 auto;
  height:auto;
  overflow-x: hidden;
  justify-content:center;
  align-items:center;
}
/* 奇数番目 */
.topBox > div:nth-child(odd) {  
  flex-flow: wrap-reverse  row;
}
/* 偶数番目 */
.topBox > div:nth-child(even) {
  flex-flow: wrap-reverse row-reverse;
}
.topBox div.topBoxTxt{
  width: 100%;
  margin-right:auto;
  padding: 30px 15px;
}
.topBox div.topBoxTxt a{
  margin-left: auto;
}
.topBox .topBoxTxt p{
  text-align: left;
  margin:2em 0;
  line-height: 2.5em;
}
.topBox div img{
  width: 100%;
}

@media print, screen and (  min-width : 769px ) {
  .topBox > div{
    justify-content:center;
  }
  .topBox div.topBoxTxt{
    text-align: center;
  }
  .topBox .topBoxTxt  div{
    display: inline-block;
  }
  .topBox div.topBoxTxt a{
    margin-left: 0;
  }
  .topBox div.topBoxTxt{
    width: 45%;
  }
  .topBox .topBoxImg {
    width:55%
  }
}
#movie{
  padding: 50px 0 0;
}
.movieBox{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 50px;
}
.movieBox div{
  padding: 2em;
  flex: 1 1 450px;
  text-align: center;
  max-width: 750px;
}
.movieBox div .ytube{
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  border: 1px solid #666;
}
.movieBox div .tvcm{
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  border: 1px solid #666;
}
/* バナー部分 ***********************/
#sec03 {
  background: var(--white-color);
  padding: 50px 0;
}
.banner{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.banner li{
  padding: 10px;
}

/* ---------------------------------------------------------------------------------------------

　   CONTENTS

--------------------------------------------------------------------------------------------- */
/* list 丸 ****************************/
.circleList{
  list-style: circle;
  padding-left: 1em;
}
/* ボタン ****************************/
/* 赤ボタン */
.btn {
  display: block;
  background: var(--red-color);
  color: var(--white-color);
  padding: 0.5em 2em 0.5em 0;
  text-align: center;
  border-radius: 5px;
  width: 300px;
  max-width: 95%;
  clip-path: polygon(0% 100%, 0% 0, 85% 0% , 100% 100%);
}
.btn:hover{
  padding-left: 5px;
}
.btn::before {   
  content: '\f068';
  font-family: "FontAwesome";
  padding-right: 1em;
}
.btn::after {
  position: absolute;
  top: 0;
  right: 0px;
  bottom: 0;
  left: 0px;
  z-index: -1;
  content: '';
  background: var(--white-color);
  opacity: 0.4;
  transform-origin: right top;
  transform: scale(0, 1);
  -webkit-transition:  .3s;
  transition: transform .3s;
  border-radius: 5px;
}
/* グレイボタン */
.btnGrey {
  display: inline-block;
  background: #666666;
  color: var(--white-color);
  padding: 0.5em ;
  text-align: center;
  border-radius: 5px;
  width: 300px;
  max-width: 95%;
  position: relative; 
}
.btnGrey:hover{
  padding-left: 1.5em;
}
.btnGrey::after{
  position: absolute;
  top: 0;
  right: 0px;
  bottom: 0;
  left: 0px;
  z-index: -1;
  content: '';
  background: #111;
  opacity: 1;
  transform-origin: right top;
  transform: scale(0, 1);
  -webkit-transition: .3s;
  transition: transform .3s;
  border-radius: 5px;
}
/* 白枠ボタン */
.btnBlue {
  display: inline-block;
  /* background: ; */
  color: var(--main-color);
  border: 1px solid var(--main-color);
  padding: 0.5em ;
  text-align: center;
  /* border-radius: 5px; */
  width: 300px;
  max-width: 95%;
  position: relative; 
}
.btnBlue:hover{
  padding-left: 1.5em;
  color: var(--white-color);
}
.btnBlue::after{
  position: absolute;
  top: 0;
  right: 0px;
  bottom: 0;
  left: 0px;
  z-index: -1;
  content: '';
  background: var(--main-color);
  opacity: 1;
  transform-origin: right top;
  transform: scale(0, 1);
  -webkit-transition: .3s;
  transition: transform .3s;
  /* border-radius: 5px; */
}
.btn:hover::after ,.btnGrey:hover::after,.btnBlue:hover::after{
  transform-origin: left top;
  transform: scale(1, 1);
}

/* 黒に矢印___\ボタン */
.btnBlack {
	display: flex;
  justify-content: space-around;
  align-items: center;
	text-align: center;
	width: 320px;
  max-width: 80%;
	margin: 1em auto;
	padding: .5rem;
  font-size: 1.2em;
  letter-spacing: .2em;
	background: #111;
	color: var(--white-color);
	position: relative;
	transition: 0.5s;
}
.btnBlack::before {
	content: '';
	position: absolute;
	top: calc(55% - 3px);
	right: 1em;
	transform: translateY(calc(-50% - 3px)) rotate(35deg);
	width: 20px;
	height: 1px;
	background-color:  var(--white-color);
  transition: 0.5s;
}
.btnBlack::after {
	content: '';
	position: absolute;
	top: 55%;
	right: 1em;
	transform: translateY(-50%);
	width: 80px;
	height: 1px;
	background-color: var(--white-color);
  transition: 0.5s;
}
.btnBlack:hover::after,.btnBlack:hover::before {
  right: 0.5em;
}
.btnBack {
	display: flex;
  justify-content: space-around;
  align-items: center;
	text-align: center;
	width: 320px;
  max-width: 80%;
	margin: 1em auto;
	padding: .5rem;
  font-size: 1.2em;
  letter-spacing: .2em;
	background: #666666;
	color: var(--white-color);
	transition: 0.5s;
}
.btnBack:hover {
  opacity: .7;
}

/* 赤枠ボタン */
.red_btn {
  position: relative;
  display: block;
  color: var(--red-color);
  border: 1px solid var(--red-color);
  padding: 0.5em 2em 0.5em 0;
  text-align: center;
  width: 300px;
  max-width: 95%;
}
.red_btn:hover{
  padding-left: 5px;
  color: var(--white-color);
}
.red_btn::before {
  position: absolute;
  top: 0;
  right: 0px;
  bottom: 0;
  left: 0px;
  z-index: -1;
  content: '';
  background: var(--red-color);
  transform-origin: right top;
  transform: scale(0, 1);
  -webkit-transition:  .3s;
  transition: transform .3s;
}
.red_btn:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}

/* タイトル ****************************/
 .headerImg ,.headerImg2{
  margin-top: 80px;
  position: relative;
  height: auto;
}
.headerImg img,.headerImg2 img{
  width: 100%;
}
.headerImg h1{
  font-size: 2.4rem;
  position: absolute;
  top: 40%;
  right: 20%;
  text-shadow: 1px 1px 3px #dee9f0;
}
.headerImg2 h1{
  font-size: 2.4rem;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  padding: 1em;
  text-align: center;
  background-color: rgba(68, 112, 219, 0.8);
  color: var(--white-color);
  transform: translate(-50%, -50%);
}
h2.h2title {
  font-size: 1.6rem;
  color: var(--main-color);
  margin: 0 auto;
  padding: 85px 0 50px;
  align-items: center; /* 横線を上下中央 */
  display: flex; /* 文字と横線を横並び */
  justify-content:  space-between; /* 文字を中央寄せ */
  white-space:nowrap;
}
h2.h2title:before, h2.h2title:after {
  content: '';
  height: 1px; /* 横線の高さ */
  width: 25%; /* 横線の長さ */
  background-color: var(--main-color);
}
h2.h2title:before {
  margin-right: 15px;
}
h2.h2title:after {
  margin-left: 15px;
}

h3.h3titleLine {
  font-size: 1.3rem;
  color: var(--main-color);
  margin: 0 auto 2rem;
  padding: 85px 0 0 0;
  border-bottom: 1px solid var(--main-color);
}
h3.h3title {
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--main-color);
  padding:85px 0 0 0;
}
/* SP */
@media only screen and ( max-width : 990px ) {
  .headerImg ,.headerImg2{
    margin-top: 60px;
  }
  .headerImg h1{
    font-size: 5vw;
    right: 5%;
  }
  .headerImg2 h1{
    /* font-size: 1.5rem; */
    font-size: 5vw;
    width: 90%;
  }
  h2.h2title {
    padding: 60px 0 15px;
  }
  h2.h2title:before, h2.h2title:after {
    max-width: 15%;
  }
  h3.h3title,h3.h3titleLine{
    padding: 60px 0 0;
  }
}
@media only screen and ( max-width : 500px ) {
  h2.h2title {
    font-size:5vw;
    white-space:normal;
  }
  h2.h2title:before, h2.h2title:after {
    max-width: 5%;
  }
  h3.h3title,h3.h3titleLine{
    font-size: 4.5vw;
  }
}
/* ---------------------------------------------------------------------------------------------

　   会社概要 

--------------------------------------------------------------------------------------------- */
/* 社長ご挨拶 &　共通 */
.profileBox {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  height:auto;
  overflow-x: hidden;
  justify-content:flex-start;
}
/* 経営理念 */
.profilePhilBox{
  justify-content:flex-end;
  flex-wrap: wrap-reverse;
}
.profileBox div.contentsTxt{
  flex: 1 0 350px;
  padding: 3em 1em;
  width: 100%;
  align-self: center;
  font-size: 1.2em;
  line-height: 2;
}
.profileBox .contentsTxt p{
  text-indent: 1em;
}
.profileBox .contentsImg {
  width:100%;
}
.profileBox .contentsImg img {
  width:100%;
}
@media print, screen and (  min-width : 991px ) {
  /* 社長ご挨拶 &　共通 */
  .profileBox {
    background-color: #f3f3f4;
  }
  /* 経営理念 */
  .profilePhilBox{
    background: rgb(125,176,218);
    background: linear-gradient(0deg, rgba(125,176,218,1) 0%, rgba(125,176,218,1) 50%, rgba(88,142,200,1) 80%, rgba(75,130,194,1) 100%);
  }
  /* 行動指針 */
  .profileGuidelBox {
    background: rgb(175,219,248);
    background: linear-gradient(0deg, rgba(175,219,248,1) 0%, rgba(162,212,247,1) 30%, rgba(100,179,236,1) 60%, rgba(62,148,223,1) 100%);
  }
  .profileBox div.contentsTxt{
    max-width: 600px;
  }
  .profileBox .contentsImg {
    width:50%;
  }
  .profileBox .contentsImg img{
    width:100%;
  }
}
.fontSerif{
  font-family: 'ＭＳ Ｐ明朝','MS PMincho','ヒラギノ明朝 ProN','Hiragino Mincho ProN',serif;
}
.eTitle{
  font-size: 4em;
  font-weight: bold;
  color: var(--main-color);
  text-align: center;
  letter-spacing: 0.3em;
  margin: 50px auto;
}
.eTxt{
  font-size: 2em;
  font-weight: bold;
  color: var(--main-color);
  text-align: center;
  letter-spacing: 0.2em;
  margin: 40px auto 25px;
}
.eDetail{
  font-size: 1.2em;
  text-indent: 1em;
}
.pName{
  font-size: 1.2em;
  font-weight: bold;
  text-align: right;
  margin: 2em auto 1em;
}

.profileTbl{
  margin: 0 auto;
}
.profileTbl th{
  border-right: 1px solid #d7d7d7;
  color: var(--main-color);
  font-weight: bold;
  padding: 0 1em 0 1.5em;
}

.profileTbl td{
  position: relative;
  padding: 0 1em 2em 2em;
}

.profileTbl td::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 10px;
  height: 10px;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
  background-color: #d7d7d7;
}
.bgLogoLeft{
  background-image: url('../img/profile/bgLogo.jpg');
  background-repeat: no-repeat;
  background-position: left 20% top 20%;
  background-size: auto;
}
.bgLogoRight{
  background-image: url('../img/profile/bgLogo.jpg');
  background-repeat: no-repeat;
  background-position: right 20% bottom 20%;
  background-size: 30%;
}

.profileDl{
  display: flex;
  flex-wrap: wrap;
}
.profileDl dt{
  flex: 1 0 150px;
  color: var(--main-color);
  font-weight: bold;
  width: 20%;
  padding: 0;
}
.profileDl dd{
  flex: 1 0 auto;
  width: 80%;
  padding: 0 0 2em;
}
@media only screen and ( max-width : 990px ) {
  .profileTbl{
    border-left: 1px solid #d7d7d7;
  }
  .profileTbl th:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 10px;
    height: 10px;
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
    background-color: #d7d7d7;
  }
  .profileTbl th,.profileTbl td{
    display: block;
    width: 100%;
    position: relative;
    border: none;
  }
  .profileTbl td::before {
    content: none;
  }
  .bgLogoLeft,.bgLogoRight{
    background-size: 80%;
  }
}
/* 個人情報保護について */

/* ---------------------------------------------------------------------------------------------

　   事業内容 

--------------------------------------------------------------------------------------------- */
.contentsBox {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto 3em;
  height:auto;
  overflow-x: hidden;
  justify-content:space-around;
}
.contentsBoxImg{
  flex-grow: 1;
  flex-basis: 500px;
  padding: 1em 0;
}
.contentsBoxTxt{
  flex-grow: 1;
  flex-basis: 200px;
  padding:  1em;
}
/* スライドショー */
.sliderS {
  width:94%;
  margin:0 auto;
} 
.sliderS img {
  width:100%;/*スライダー内の画像を横幅100%に*/
  height:auto;
}
.sliderS .slick-slide {
  margin:0 10px;
}
.slick-prev, .slick-next {
  position: absolute;
  top: 42%;
  cursor: pointer;/*マウスカーソルを指マークに*/
  outline: none;
  background-color: rgba(0, 0, 0, 0.3);;
  border-radius: 50%;
  width: 55px;
  height: 55px;
  z-index: 3;
}
.slick-prev::before, .slick-next::before {
  position: absolute;
  top: 35%;
  right: 30%;
  bottom: 35%;
  left: 30%;
  content: "";
  border-top: 2px solid var(--white-color);/*矢印の色*/
  border-right: 2px solid var(--white-color);/*矢印の色*/
  height: 15px;
  width: 15px;
  z-index: 2;
}
.slick-prev {
  left:0px;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.slick-next {
  right: 0px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.detailClose{
  display: none;
}
a.dBtn span:after{
  content: '   \2b';
  font-family: "FontAwesome";
}
a.dBtn span.openBtn:after{
  content: '   \f068';
}
.sliderS div{
  margin: 1rem 0;
}
/* ---------------------------------------------------------------------------------------------

　   各事業所

--------------------------------------------------------------------------------------------- */
.officeMap {
  max-width: 100%;
  margin: 0 auto;
  width: 760px;
  max-width: 100%;
  counter-reset: number 0;
}
.officeMap dd{
  max-width: 550px;
}
.officeMap dd a {
  margin: 0.3em;
  padding: 0.3em 0.8em;
  color:var(--main-color);
  display: block;
  font-weight:bold;
}
.officeMap dd a::before{
  counter-increment: number 1;
  content: counter(number) " .　";
}
.officeMap dd:hover {
  background-color: var(--main-color);
}
.officeMap dd a:hover {
  color:var(--white-color);
}
@media print, screen and (  min-width : 991px ) {
  .officeMap {
    position:relative;
    width: 900px;
  }
  .officeMap dd {
    position:absolute;
    background-color:var(--white-color);
    border: 1px solid var(--main-color);
  }
  .officeMap dd a {
    padding: 0.1em 0.8em;
  }
  .officeMap dd a::before{
    content: none;
  }
  .mapSaitama{
    top:500px;left:655px;
  }
  .mapSeibu{
    top:500px;left:450px;
  }
  .mapHokubu{
    top:20px;left:500px;
  }
  .mapToubu{
    top:200px;left:720px;
  }
  .mapHm{
    top:195px;left:200px;
  }
  .mapKazo{
    top:25px;left:650px;
  }
}
/* ---------------------------------------------------------------------------------------------

　   採用情報 

--------------------------------------------------------------------------------------------- */
.recHeaderSlider {
  margin:60px auto 0;  
} 
.recHeaderSlider img {
  width:100%;/*スライダー内の画像を横幅100%に*/
  height:auto;
}
.recHeaderTitle{
  position: relative;
} 
.recHeaderTitle > img{
  position: absolute;
  top: 50%;
  left: 20%;
  transform: translate(-50%, -50%);
  width: 25%;
} 
.recHeaderTitle .slideBanner{
  position: absolute;
  bottom: 1em;
  right: 1em;
  z-index: 1;
}
/* Message */
.recBox {
  display: flex;
  flex-wrap: wrap;
  margin: 2rem auto;
  justify-content:center;
}
.recBox div{
  flex: 1 1 450px;
  padding-left: 1em;
  width: 100%;
  font-size: 1.2em;
  line-height: 2;
  text-align: center;
}
.recBox .recTxt {
  text-align: left;
}
.recBox .recTxt img{
  max-width: 60%;
}
.recBox .recTxt p{
  color: var(--main-color);
}
.recBox .recTxt p span{
  line-height: 2;
  font-size: 1.1em;
  display: inline-block;
  text-align: left;
}
.recBox .recImg{
  text-align: right;
  position: relative;
  align-self: self-end;
}
.recBox .recImg img{
  width: 100%;
}
.recBox .recImg p{
  position: absolute;
  white-space: nowrap;
  bottom: 2%;
  font-weight: 700;
  width: 100%;
  text-align: center;
}
.recCmt{
  text-align: center;
}
.recCmt div{
  display: inline-block;
  text-align: left;
}
.recCmt p{
  font-size: 1.1em;
  line-height: 2;
  text-indent: 1em;
  padding-bottom: 0.5em;
}
/* 令和５年度新卒採用について ******************************/
.bgRecurit{
  background-image: url('../img/recruit/bgRecruit.png');
  background-repeat: no-repeat;
  background-position: right 1% top 10%;
  background-size: auto;
}
.recNews{
  border:1px solid var(--main-color);
  padding: 2em 1em;
}
.recNews div{
  margin: 0 auto;
}
.recNews div p{
  text-align: center;
  line-height: 2;
}
/* 採用情報テーブル */
.recTbl{
  margin: 0 auto;
  width: 100%;
}
.recTbl th{
  border: 1px solid var(--white-color);
  color: var(--white-color);
  background-color: var(--main-color);
  font-weight: bold;
  padding: 1em 1em;
  text-align: center;
  width: 170px;
}
.recTbl td{
  border: 1px solid var(--white-color);
  background-color: #f5f5f5;
  padding: 1em 1em;
}
.recTbl p.recTblBox{
  padding: 1em 1em;
  background-color: var(--white-color);
}
/* 共通タイトル */
.recTitle{
  font-size: 2em;
  margin: 1.5em 0 .5em;
}
.recTitle span{
  font-size: .8em;
}
/* さいでんで、できる事 ***********************/
.recBgCanColor{
  background: rgb(0,114,202);
  background: linear-gradient(90deg, rgba(0,114,202,1) 0%, rgba(0,103,195,1) 70%, rgba(0,90,178,1) 80%);
  position: relative;
}
.bgFuture{
  position: absolute;
  left:1%;
  top: 5%;
}
.recBgCan{
  background-image: url('../img/recruit/bgCan.jpg');
  background-repeat: no-repeat;
  background-size: auto;
  background-position: left 15% bottom 0;
}
.recCanBox {
  display: flex;
  flex-wrap: wrap;
  margin: 2rem auto;
  justify-content:center;
  color: var(--white-color);
  align-items: end;
}
.recCanBox div{
  flex: 1 1 350px;
  padding: 1em;
  font-size: 1.1em;
}
.recCanBox .boxL{
  flex-basis: 55%;
  font-size: 1em;
}
.recCanTxtYellow{
  color: #ffff33;
  font-size: 1em;
}
/* さいでんで、働くということ **********************/
.bgWork{
  background-image: url('../img/recruit/bgWork.png');
  background-repeat: no-repeat;
  background-position: right 0 top 30%;
  background-size: auto;
}
.recWorkBox {
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
  font-size: 1.1em;
}
.recWorkBox div{
  flex: 1 1 450px;
  padding: 1em 1em 0;
  text-align: center;
  max-width: 750px;
}
.recWorkBox p{
  padding: 1em 0;
}
/* さいでんって、どんなところ **********************/
.bgOurStory{
  background-image: url('../img/recruit/bgOurStory.png');
  background-repeat: no-repeat;
  background-position: left -3% top 5%;
  background-size: auto;
  background-color: #82b5ff;
  min-height: 700px;
}
.recHowBox {
  display: flex;
  flex-wrap: nowrap;
  justify-content:space-around;
  color: var(--white-color);
  font-size: 1.1em;
}
.recHowBox div{
  padding: 0 1em;
  max-width: 700px;
}
.recHowBox div p{
  padding: 1em 0;
}
.recHowBox div.recHowBoxImg{
  margin-left:170px;  /* 画像分 */
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
}
.recHowBox > div img{
  width: 45%;
}
/* さいでんで、働く人たち ****************/
.recPersonTtlFlex {
  display: flex;
  flex-wrap: wrap;
  justify-content:space-around;
  margin:2em 0  0;
  align-items: end;
}
.recPersonTtlFlex div{
  flex: 1 1 450px;
  padding: 0;
  text-align: left;
  max-width: 750px;
}
.recPersonTtlFlex div img{
  max-width: 40%;
}
.recPersonBox {
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
  margin-bottom: 3em;
}
.recPersonBox div{
  flex: 1 1 420px;
  margin: 1em ;
  text-align: center;
}
.recPersonBox div dl{
  padding: 1em 0;
  color: var(--main-color);
}
.recPersonBox div dl dt{
  font-weight: 600;
}
.recPersonBox div dl dd{
  padding-left: 1em;
  padding-bottom:  .5em;
}
figure.recPersonPhoto {
  position: relative;
  overflow: hidden;
  margin: 0;
}
figure.recPersonPhoto img{
  width: 100%;
}
figcaption.photoMask {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(68,112,219,0.5);
  opacity: 0;
  color: #fff;
  font-size: 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 30px;
}
figure.recPersonPhoto:hover .photoMask {
  opacity: 1;
  transition:all 0.8s ease;
  padding-bottom: 0;  
}

@media only screen and ( max-width : 990px ) {
  .recTbl th,.recTbl td{
    display: block;
    text-align: left;
    width: 100%;
  }
  .bgRecurit{
    background-position: right 1% top 5%;
    background-size: 20%;
  }
  .bgFuture{
    width: 15%;
  }
  .recCanBox{
    padding-left: calc(15% - 1em);
  }
  .recCanBox .boxL{
    order: 4;
  }
  .bgWork{
    background-size: 20%;
  }
  .bgOurStory{
    background-size:20%;
  }
  .recHowBox{
    flex-wrap: wrap-reverse;
    justify-content:flex-end;
  }
  .recHowBox > div img{
    width: 30%;
  }
  .recHowBox div{
    margin-left:15%;  /* 画像分 */
  }
  .recHowBox div.recHowBoxImg{
    margin-left:0;
  }
  figure.recPersonPhoto .photoMask {
    opacity: 1;
    padding-bottom: 0;  
  }
}
@media print, screen and (  min-width : 991px ) {
  .recBox div{
    margin: 2rem auto;
    justify-content:center;
    padding-left: 3rem;
  }
  .recBox .recTxt img{
    margin-bottom:5rem;
    width: 500px;
    max-width: 100%;
  }
  .recBox .recTxt p{
    text-align: center;
    color: var(--main-color);
  }
  .recBox .recTxt p span{
    font-size: 1.3em;
  }
}
/* ---------------------------------------------------------------------------------------------

　   若手社員特別研修 

--------------------------------------------------------------------------------------------- */
.m-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
  /* margin-bottom: 2em; */
}
.m-flex article{
  flex: 1 1 320px;
  margin: .5em ;
}
/* 2枚並び用 */
.m-flex2 article{
  flex: 1 1 420px;
}
.m-flex__item {
  width: 100%;
  text-align: center;
}
/* 2枚並び用 幅指定　.m-flex__item_s .m-flex__item_l と併用*/
.m-flex_auto article{
  flex: 1 1 auto;
}
.m-flex__item_s {
  flex-grow: 1;
  text-align: center;
}
.m-flex__item_l {
  flex-grow: 2;
  text-align: center;
}

.m-flex__contents {
  position: relative;
  padding-bottom: 1rem;
  margin: 0;
}
.m-flex__text-box {
  width: 90%;
  padding: 0.5em;
  text-align: center;
  background: #fff;
  filter: drop-shadow(4px 4px 4px rgba(0,0,0,0.2));
  position: absolute;
  bottom: 3%;
  left: 50%;
  transform: translate(-50%);
  font-weight: 600;
}
.m-flex__head {
  font-size: 1em;
}
/* 研修の様子は社員も見学 */
.kengaku-m-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
  margin-bottom: 2em;
}
.kengaku-m-flex__photo {
  flex-grow: 2;
}
.kengaku-m-flex__photo img{
  width: 100%;
}
.kengaku-m-flex__item {
  flex-grow: 1;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0.5em 1em;
  box-sizing: border-box;
  background-color:var(--main-color);
  color: #fff;
  font-size: 1.3em;
  font-weight: 400;
  text-shadow: 2.1px 2.1px 2px rgba(0,0,0,0.35);
}
/* 所長代理からのメッセージ */
.m-wrapper {
  margin-bottom: 2.5em;
  position: relative;
}
.m-wrapper__name{
  font-weight: 600;
  font-size: 1.1em;
  padding-bottom: 1em;
  text-align: right;
}
/* 所長代理 1,3 */
.flex-wrap--right {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}
.m-wrapper__contents--right {
  padding: 6em 1em 1em;
  background-color: #fff4cc;
}
.m-wrapper__leader-photo--left {
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
}
/* 所長代理 2,4 */
.flex-wrap--left {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}
.m-wrapper__contents--left {
  padding: 6em 1em 1em;
  background-color: #ccecff;
}
.m-wrapper__leader-photo--right {
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
}
/* ３つのヨシ！ */
.f-wrapper {
  height: 21em;
  position: relative;
  overflow: hidden;
}
.f-wrapper p{
  width: 90%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--white-color);
  font-size: 1.4em;
  font-weight: bold;
  line-height: 1.7;
  text-shadow: 0.1rem 0.1rem 0 #000;
}
.f-wrapper .name{
  text-align: right;
  display: block;
  font-size: .8em;
  padding-top: 1em;
}
.paddingA{
  padding-left: 1em;
}
.paddingB{
  padding-left: 2em;
}
.bg-image {
  max-width: inherit;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48%;
}

@media (min-width: 520px){
  .m-flex__text-box {
    width: 70%;
    padding: 1em;
    right: 0;
    left: inherit;
    transform: translate(0);
  }
  .kengaku-m-flex__item {
    font-size: 1.8em;
  }
  .m-wrapper__name{
    text-align: left;
  }
  .m-wrapper__contents--right {
    width: calc(82.5% + 3.5em);
    padding: 2em 2em 2.5em 10em;
    min-height: 220px;
  }
  .m-wrapper__contents--left{
    width: calc(82.5% + 3.5em);
    padding: 2em 10em 2em 2em;
    min-height: 220px;
  }
  .m-wrapper__leader-photo--right {
    text-align: right;
    right: 0.5rem;
    left: auto;
  }
  .f-wrapper p{
    width: 80%;
    font-size: 1.9em;
  }
}

/* ---------------------------------------------------------------------------------------------

　   問い合わせ 

--------------------------------------------------------------------------------------------- */
.reqSpan{
  color: var(--red-color);
  font-size: .9em;
  padding-left: .3em;
}
.error{
  color: var(--red-color);
}
.contactTbl{
  margin: 0 auto;
  width: 100%;
}
.contactTbl th{
  color: var(--main-color);
  font-weight: bold;
  padding: 1em .5em 0;
  width: 210px;
  vertical-align: top;
}
.contactTbl td{
  padding: 1em .5em;
}
input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="date"], textarea {
  padding: 0.5em;
  border: 1px solid #bbb;
  width: 100%;
  font-size: 1em;
}
select{
  padding: 0.5em;
  border: 1px solid #bbb;
  font-size: 1em;
}
.btnBox{
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
  margin:2em 0  0;
}
.btnBox div{
  flex: 1 1 450px;
  padding: 0;
}
@media only screen and ( max-width : 990px ) {
  .contactTbl th,.contactTbl td{
    display: block;
    text-align: left;
    width: 100%;
  }
  .contactTbl td{
    padding: 0 .5em 1em;
  }
}
/* ---------------------------------------------------------------------------------------------

　    CSSアニメーション

--------------------------------------------------------------------------------------------- */

/*左から右にフェードイン***********************/
.fadeLtoR01 {
  opacity: 0;
  -webkit-transform: translateX(-20px);
  transform: translateX(-20px);
  -webkit-transition: all 1s;
  transition: all 1s ;
  clip-path: inset(0 100% 0 0);
}
.fadeLtoR01.scrollin {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  clip-path: inset(0);
}
.fadeLtoR02 {
  opacity: 0;
  -webkit-transform: translateX(-20px);
  transform: translateX(-20px);
  -webkit-transition: all 1s;
  transition: all 1s ;
}
.fadeLtoR02.scrollin {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
/*右から左にフェードイン**********************/
.fadeRtoL01 {
  opacity: 0;
  -webkit-transform: translateX(20px);
  transform: translateX(20px);
  -webkit-transition: all 1s;
  transition: all 1s ;
  clip-path: inset(0  0 100% 0);
}
.fadeRtoL01.scrollin {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  clip-path: inset(0);
}
.fadeRtoL02 {
  opacity: 0;
  -webkit-transform: translateY(20px);
  transform: translateX(20px);
  -webkit-transition: all 1s;
  transition: all 1s ;
}
.fadeRtoL02.scrollin {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
/*真ん中から上下にフェードイン**********************/
.fadeCenter{
  opacity: 0;
  -webkit-transform: translateY(-20px);
  transform: translateY(-20px);
  -webkit-transition: all 1s;
  transition: all 1s ;
  clip-path: inset(100%  0 100% 0);
}
.fadeCenter.scrollin {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  clip-path: inset(0);
}
/*真ん中から両側にフェードイン**********************/
.fadeSide{
  opacity: 0;
  -webkit-transition: all 1s;
  transition: all 1s ;
  clip-path: inset(0 100%  0  100% );
}
.fadeSide.scrollin {
  opacity: 1;
  clip-path: inset(0);
}