/*
    Theme Name: souvenircorp2025.
    Theme URI: https://souvenircorp.com/
    Author: mikio sato
    Version: 20250919
    License:
    License URI:
    */

    @charset "UTF-8";
    @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      list-style: none;
      text-decoration: none;
      font-weight: normal;
    }
    
    html {
      overflow-y: scroll;
      height: 100%;
      font-size: 62.5%;
    }
    
    body {
    font-family: "Roboto",Noto Sans JP, Hiragino Kaku Gothic ProN, Hiragino Sans, Meiryo, MS Gothic, HiraKakuProN-W3, Droid Sans Japanese, sans-serif;
margin: 0;
      padding: 0;
      height: 100%;
      font-weight: 400;
      font-size: 18px;
      font-size: 1.8rem;
      line-height: 1.8;
      color: #333;
      background: #fff;
      overflow: hidden;
      height: auto;
    }
    body#service{
      
      
    }
.roboto,h1,h2{
  font-family: "Roboto", 'Noto Sans JP', sans-serif;
  font-weight: 500;
} 
.anton{
  font-family: "Anton", sans-serif;
}
.mincho{
  font-family :
	YuMincho,    /* Mac用 */
	'Yu Mincho', /* Windows用 */
	serif;
}
.oswald{
  font-family: 'Oswald', sans-serif;
} 
.bigger{
  font-size: 120%;
}
    h2 {
      font-size: 12rem;
      line-height: 1;
      position: relative;
    }
    
  
    h3 {
      margin: .5rem 0;
    }
    
    p {
      margin-bottom: 1em;
    }
    
    .sp-only {
      display: none;
    }
    
    img, iframe {
      max-width: 100%;
      vertical-align: bottom;
    }
    
    .container {
      width: 100%;
      max-width: 1060px;
      margin: auto;
      margin: auto;
      padding-left: 30px;
      padding-right: 30px;
    }
    
    .tc {
      text-align: center;
    }
    .tr{
      text-align: right;
    }
    .fl {
      float: left;
    }
    
    .fr {
      float: right;
    }
    
    .textRight {
      text-align: right;
    }
    
    .cl {
      clear: both;
    }
    
    .alignMiddle {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }
    
    a {
      color: #204579;
      transition: all 0.3s;
    }
    
    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
      float: left;
      padding-left: 15px;
      padding-right: 15px;
    }
    
    .col-sm-1 {
      width: 8.333333%;
    }
    
    .col-sm-2 {
      width: 16.66666%;
    }
    
    .col-sm-3 {
      width: 25%;
    }
    
    .col-sm-4 {
      width: 33.3333%;
    }
    
    .col-sm-5 {
      width: 41.6666%;
    }
    
    .col-sm-6 {
      width: 50%;
    }
    
    .col-sm-7 {
      width: 58.333333%;
    }
    
    .col-sm-8 {
      width: 66.66666%;
      margin: 0 auto;
    }
    
    .col-sm-9 {
      width: 75%;
      margin: 0 auto;
    }
    
    .col-sm-10 {
      width: 83.33333%;
    }
    
    .col-sm-12 {
      width: 100%;
    }
    
    .col-sm-offset-1 {
      margin-left: 8.333333%;
    }
    
    .col-sm-offset-2 {
      margin-left: 16.66666%;
    }
    
    .col-sm-offset-3 {
      margin-left: 25%;
    }
    
    .b {
      font-weight: bold;
    }
    
    .fwn {
      font-weight: normal;
    }
    
    .fs10 {
      font-size: 1rem;
    }
    
    .fs12 {
      font-size: 1.2rem !important;
    }
    
    .fs14 {
      font-size: 1.4rem !important;
    }
    
    .fs16 {
      font-size: 1.6rem !important;
    }
    
    .fs18 {
      font-size: 1.8rem !important;
    }
    
    .fs19 {
      font-size: 1.9rem !important;
    }
    
    .fs20 {
      font-size: 2rem;
    }
    
    .fs21 {
      font-size: 2.1rem;
    }
    .fs22 {
      font-size: 2.2rem;
    }
    
    .fs24 {
      font-size: 2.4rem;
    }
    
    .fs26 {
      font-size: 2.6rem;
    }
    
    .fs28 {
      font-size: 2.8rem;
    }
    
    .fs30 {
      font-size: 3rem;
    }
    
    .fs32 {
      font-size: 3.2rem;
    }
    
    .fs36 {
      font-size: 3.6rem;
    }
    
    .fs40 {
      font-size: 4rem;
    }
    
    .fs48 {
      font-size: 4.8rem;
    }
    
    .fs50 {
      font-size: 5rem;
    }
    
    .fs56 {
      font-size: 5.6rem;
    }
    .fs60 {
      font-size: 6rem;
    }
    .fcRed{
      color: #d7388f;
    }
    .fc036EB8{
      color: #036EB8;
    }
    .fc00377A{
      color: #00377A;
    }
    .fcfff{
        color: #fff;
    }
    .fcccc{
      color: #ccc;
    }
.transparent{
  color: transparent;
    -webkit-text-stroke: 2px white;
}
.transparent333{
  color: transparent;
    -webkit-text-stroke: 2px #333;
}
.transparent span{
  
  -webkit-text-stroke: 0;
}
.transparent333 span{
  color: #333;
  -webkit-text-stroke: 0;
}
    .mt15 {
      margin-top: 15px;
    }
    
    .mt30 {
      margin-top: 30px;
    }
    
    .mt45 {
      margin-top: 4.5rem;
    }
    
    .mt60 {
      margin-top: 60px;
    }
    
    .mb0 {
      margin-bottom: 0;
    }
    
    .mb5 {
      margin-bottom: 5px;
    }
    
    .mb15 {
      margin-bottom: 15px;
    }
    
    .mb30 {
      margin-bottom: 30px;
    }
    
    .mb45 {
      margin-bottom: 4.5rem;
    }
    
    .mb60 {
      margin-bottom: 6rem;
    }
    .mb90{
      margin-bottom: 9rem;
    }
    .pt30{
      padding-top: 3rem;
    }
    .pl15 {
      padding-left: 15px;
    }
    
    .pl30 {
      padding-left: 30px;
    }
    
    .pr15 {
      padding-right: 15px;
    }
    
    .pr30 {
      padding-right: 30px;
    }
    
    .pt60 {
      padding-top: 60px;
    }
    
    .cb {
      clear: both;
    }
    
    .oh {
      overflow: hidden !important;
    }
    
    
    .por {
      position: relative;
    }
    
    .sect, .row {
      clear: both;
      overflow: hidden;
    }
    
    .fadein00 {
      animation-name: fadein;
    }
    
    .fadein {
      opacity: 0;
    }

    .sns {
      display: flex;
      justify-content: flex-start;
    }
    
    .sns li {
      margin: 0.5rem;
    }
    
    .sns a {
      padding: 0 !important;
      font-size: 3.6rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      
      opacity: 1;
      padding: 0;
      text-align: center;
    }
    
    .sns a img {
      width: 11.5rem;
    }
    
    .sns a:hover {
      opacity: 0.7;
    }
    
    header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      display: flex;
      align-items: center;
      z-index: 99;
      height: 10rem;
      background:#fff;
    }
    header.headerFIxed{
      opacity: 0;
      top: -10rem;
      left: 0;
      transition: all 0.5s;
    }
    header.headerFIxed.fixed{
      opacity: 1;
      top: 0;
      left: 0;
    }
    
.headerLogo{
  width: 90%;
  max-width: 25rem;
  margin: auto;
}
.headerLogo a{
  position: relative;
  overflow: hidden;
  display: block;
}
.headerLogo a:hover{
}
    #acMenu {
      position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    width: 100%;
    }
    
    #acMenu dt {
      display: block;
      cursor: pointer;
    }
    
    #acMenu dd {
      padding: 3rem;
      position: absolute;
      top: 0;
      left: -100%;
      display: flex;
    justify-content: center;
    align-items: center;
      z-index: 99;
      background: rgba(255,255,255, 0.8);
      backdrop-filter: blur(10px);
      width: 100%;
      height: 100vh;
      transition: all 0.3s;
    }
    #acMenu dd.active{
      left: 0;
    }
    #acMenu dd ul{

    }
    #acMenu dd li {
    }
    
    #acMenu dd li a {
      text-align: center;
      color: #204579;
      font-size: 4.8rem;
    display: inline-block;
    font-weight: 700;
    transition: all 0.3s;
    }
    
    #acMenu dd li a:hover {
      color:#82e0da;
      -webkit-transform: scale(1.8);
      transform: scale(1.8);
      cursor: pointer;
    }
    
    #menuButton {
      display: block;
      width: 6rem;
      height: 6rem;
      position: absolute;
      top: 2rem;
      right: 2rem;
      border-radius:50%;
      z-index: 999;
      /*background-color: rgba(255,255,255,0.7);*/
    }
    
    #menuButton span {
      display: block;
      background: #204579;
      width: 45px;
      height: 5px;
      position: absolute;
      left: 7px;
      transition: all 0.4s;
      -webkit-transition: all 0.4s;
      -moz-transition: all 0.4s;
    }
    #menuButton:hover span{
      background: #82e0da;
    }
    #menuButton span:first-child {
      top: 20px;
    }
    
    #menuButton span:last-child {
      bottom: 18px;
      width: 28px;
    }
    
    #menuButton.active span:first-child {
      -webkit-transform: translateY(7px) rotate(45deg);
      -moz-transform: translateY(7px) rotate(45deg);
      -ms-transform: translateY(7px) rotate(45deg);
      transform: translateY(7px) rotate(45deg);
    }
    
    #menuButton.active span:last-child {
      width: 45px;
      -webkit-transform: translateY(-10px) rotate(-45deg);
      -moz-transform: translateY(-10px) rotate(-45deg);
      -ms-transform: translateY(-10px) rotate(-45deg);
      transform: translateY(-10px) rotate(-45deg);
    }
    
    section {
      position: relative;
      padding: 9rem 0;
      clear: both;
      overflow: hidden;
    }
    

    .arrow {
      position: absolute;
      right: 5rem;
      bottom: 20%;
      display: inline-block;
      padding: 0 0 0 16px;
      color: #000;
      vertical-align: middle;
      text-decoration: none;
      font-size: 15px;
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
    }
    
    .arrow::before, .arrow::after {
      position: absolute;
      bottom: 0;
      margin: auto;
      content: "";
      transition: all 0.5s;
    }
    
    .arrow::before {
      left: 1rem;
      width: 90px;
      height: 1px;
      background: #204579;
    }
    
    .arrow::after {
      right: -2.4rem;
      width: 14px;
      height: 3px;
      border-top: 1px solid #204579;
      -webkit-transform: rotate(45deg);
      transform: rotate(25deg);
    }
    
    .arrow:hover::before {
      left: 2rem;
    }
    
.mv{
  width: 100%;
  height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  z-index: 5;
}
.mvImg{
  width: 50%;
  float: right;
}
.mv h2{
    z-index: 3;
    color: #204579;
    font-size: 6rem;
    line-height:1.2;
display: inline-block;
}

.mv .more{
    z-index: 3;
    top: 0;
}
#indexService{
  
  
}
.more{
  font-weight: bold;
   display: flex;
  white-space: nowrap;
  align-items: center;
  margin: auto;
  color:#204579;
  font-size: 3.6rem;
  outline-offset: 0px;
  text-shadow: none;
}
.more .fa{
  margin-left: 1rem;
}
.more:hover{
  cursor: pointer;
  color: #82e0da;
}

.moreOuter{
  overflow: hidden;
  padding: 3rem;
  position: relative;
  z-index: 9;
}
#indexMember,#indexMember .container,#indexAbout,#indexAbout .container{
  display: flex;
    align-items: center;
    justify-content: space-between;
}
#indexMember{
  
  
}
#indexMember .headingOuter{
  z-index: 3;
}
/*
#indexMember::after{
  content: '';
    display: block;
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0,0,0,0.3);
    background-image: radial-gradient(#fff 19%, transparent 40%), radial-gradient(#fff 20%, transparent 40%);
    background-size: 4px 4px;
    background-position: 0 0, 2px 2px;
}*/
#indexMember video{
  position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: 0.4;
    height: 100%;
    width: 100%;
    object-fit: cover;
}
#indexRecruit{
position: relative;
text-align: center;
}
#indexRecruit video {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0.2;
}

#indexContact,#indexContact .container{
  overflow: visible;
}
#indexContact{
  padding-bottom: 0;
}
.lowerTtl{
  position: relative;
  height: 30rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #204579;
  overflow: hidden;
}
.lowerTtl h2{
  color: #fff;
  position: relative;
  z-index: 3;
}
.lowerTtl:before{
position: absolute;
    top: 0;
    z-index: 2;
    left: 50%;
    content: "";
    display: block;
    background: #204579;
    height: calc(tan(75deg) * 42rem / 2);
    width: 20%;
    clip-path: polygon(0% 0, 100% 100%, 0 100%);
}
.lowerTtl:after{
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  display: block;
  background: #83ded9;
  width: 50%;
  height: 100%;
}

#service h3{
  font-size: 12rem;
  margin-bottom: 9rem;
}
#service .lowerTtl::after {
  background: none;
}
.lowerTtl video,#recruit #wrap video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;

}
.visionImg{
  margin: auto;
}
.visionH3{
  font-weight: bold;
  font-size: 4rem;
  margin-bottom: 1.5rem;
  color: #204579;
}
.vision01{
  
}
.vision02{
  
}
.vision03{
  
}

.visionUl{
  
}

.visionUl li{
  position: relative;
  margin-bottom: 1rem;
  display: flex;
    align-items: center;
}

.visionUl li:before{
  content:"";
  display: block;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background:#82e0da ;
  margin-right: 0.5rem;
}
.missionStatementDl{
  clear: both;
}
.missionStatementDl dt{
  display: inline-block;
  
  position: relative;
  z-index: 2;
  
  line-height: 1;
  padding: 0.5rem;
  margin-bottom: -0.5rem;
}
.missionStatementDl dd{
  padding: 0.5rem 1rem;
  line-height: 1.4;
  margin-left: 2rem;
  margin-top: -1rem;
  display: inline-block;
  border: 1px solid #fff;
}

.serviceHeading{
  font-size: inherit !important;
}
.serviceHeading span{
  font-weight: bold;
  font-size: 4.2rem;
  line-height: 1.4;
    font-weight: bold;
}
.serviceTtl{
  z-index: 2;
  text-align: center;
  overflow: hidden;
  margin: 0 auto 6rem;
}
#service::selection:before{
  
  opacity: 0.4;
  position: absolute;
  z-index: -1;
   width: 100%;
   height: 100%;
}
.serviveBg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.4;
  z-index: -1;
  object-fit: cover;
}
.servicePrice{
  display: block;
  font-weight: bold;
  font-family:oswald;
  font-size: 4.2rem;
}
.servicePrice small{
  font-size: 2rem;
}
.serviceDlOuter{
  display: flex;
  justify-content: center;
  flex-flow: wrap;
}
.serviceDl{
  color: #204579;
  background: #fff;
  padding: 3rem;
  margin: 0 auto 6rem;
  width: 80%;
  max-width: 42rem;
  position: relative;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
}

.serviceDl dt{
  font-size: 2.4rem;
  font-weight: bold;
  text-align: center;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  position: relative;
}
.serviceDl dt span.fs18{
  display: block;
}
.serviceDl dt .num{
  display: block;
  font-size: 3.6rem;
  font-family: anton;
}
.serviceDl dt:after{
  content: "";
  display: block;
  width: 10rem;
  height: 0.3rem;
  background-color: #dadada;
  margin: .5rem auto 0
}
 table {
      width: 100%;
      border-collapse: collapse;
      border-spacing: 0;
    }
    
th, td {
      padding: 2rem 3rem;
      text-align: left;
    }
    th{
      white-space: nowrap;
      vertical-align: top;
    }    
    .menuTable tr:nth-child(odd) {
      background-color: #eee
    }
    
    .loopSlide {
      margin-top: 9rem;
      position: relative;
      display: flex;
      width: 300vw;
      overflow: hidden;
    }
    
    .loopSlide ul {
      padding: 0;
      width: 300vw;
      display: flex;
      flex-shrink: 0;
    }
    
    .loopSlide ul:first-child {
      animation: slide1 60s -30s linear infinite;
    }
    
    .loopSlide ul:last-child {
      animation: slide2 60s linear infinite;
    }
    
    .loopSlide ul li {
      display: inline-block;
      width: 100%;
      min-width: 150px;
      list-style: none;
      text-align: center;
      overflow: hidden;
      position: relative;
    }
    
    .loopSlide ul li img {
      transition: all 1s;
    }
    
    .loopSlide ul li:hover img {
      transform: scale(1.2, 1.2);
    }
    
    .loopSlide ul li .caption {
      color:#fff;
    }
    
    .loopSlide ul li .mask {
      width: 100%;
      height: 100%;
      position: absolute;
      /* 絶対位置指定 */
      top: 0;
      left: 0;
      opacity: 0;
      /* マスクを表示しない */
      background-color: rgba(0, 0, 0, 0.7);
      /* マスクは半透明 */
      -webkit-transition: all 0.3s ease;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .loopSlide ul li:hover .mask {
      opacity: 1;
      /* マスクを表示する */
    }
    
    .loopSlide ul img {
      display: block;
      width: 100%;
      height: auto;
    }
    
    .loopSlide:hover .loopSlide ul {
      animation-play-state: paused;
    }
    
    @keyframes slide1 {
      0% {
        transform: translateX(100%);
      }
      to {
        transform: translateX(-100%);
      }
    }
    
    @keyframes slide2 {
      0% {
        transform: translateX(0);
      }
      to {
        transform: translateX(-200%);
      }
    }
    #recruitSect01{
      /*background: #fff;*/
    }
    #contactSect01{
      
      
    }
    /*確認画面と完了画面を非表示*/
    .confirm_area,
    .thanks_area {
        display: none;
    }

    /*デフォルトのサンクスメッセージを非表示*/
    .wpcf7-response-output{
        display: none;
    }
    .submitBtn:disabled {
    cursor: not-allowed;
}
    .inputOnly,.confirmOnly{
      display: none;
    }
    .mw_wp_form_input .inputOnly,.mw_wp_form_confirm .confirmOnly{
      display: inherit;
    }
    .submitArea{
      display: flex;
      justify-content: center;
    }
    .submitBtn{
      color: #fff;
      cursor: pointer;
    margin: 1.5rem;
    text-align: center;
    display: block;
    width: 16rem;
    padding: 1rem 2rem;
    font-size: 2.4rem;
    font-weight: bold;
    background: #204579;
    border-radius: 0.3rem;
    transition: all 0.3s;
    }
    .submitBtn:hover{
      background: #83ded9;
    }
 .formTable th, .formTable td {
      text-align: left;
      vertical-align: top;
    }
    
    .formTable th {
      padding: 1.5rem 4.5rem 1.5rem 1.5rem;
      position: relative;
      white-space: nowrap;
    }
    
    .formTable th small {
      display: block;
    }
    
    .formTable td {
      padding: 1rem;
      position: relative;
    }
    
    .error {
      position: absolute;
      top: 1rem;
      padding: 0.5rem;
      border-radius: .5rem;
      line-height: 1;
      position: relative;
    }
    
    input, button, select, textarea {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background: transparent;
      border: none;
      border-radius: 0;
      font: inherit;
      outline: none;
    }
    
    input[type="text"], input[type="email"], input[type="tel"], textarea {
      padding: 0.5rem;
      border-radius: .3rem;
      width: 100%;
      border: 1px solid #204579;
    }
    
    .requird {
      position: absolute;
      top: 1.5rem;
      right: 1.5rem;
      color: #dc143c;
    }
    
    .contactUl li {
      display: flex;
      align-items: center;
      margin-bottom: 1rem;
      line-height: 1;
    }
    
    .contactUl li .fa {
      color: #036EB8;
      margin-right: 1rem;
    }
    
    .contactUl li .fa.fa-envelope {
      font-size: 2rem;
    }
    
    .contactUl li .fa.fa-skype {
      font-size: 2.8rem;
    }
    
    .contactUl li .fa.fa-facebook-square {
      font-size: 2.4rem;
    }
    
    .screen-reader-response ul {
      display: none;
    }
    
    .screen-reader-response, .wpcf7-response-output {
      text-align: center;
    }
    
    .submit {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .submit .btn {
      font-size: 1.8rem;
      padding: 1rem 2rem;
      line-height: 1;
      border-radius: .5rem;
      background-color: #036EB8;
      color: #fff !important;
      margin: 0 0 10px 0;
      -webkit-transition: all .3s;
      transition: .3s;
      margin: 1rem;
    }
    
    .wpcf7-not-valid-tip {
      display: inline-block;
      color: #dc143c;
      padding: 0 .5rem;
      line-height: 1;
      border-radius: .5rem;
    }
    
    .submit .btn:hover {
      transform: scale(1.1);
    }
     /*about*/
     #about{
      
      
     }
     #about h2 span span{
      
      -webkit-text-stroke: 0;
     }
     .abouotTtl{
      font-weight: bold;
      font-size: 4.2rem;
      margin-bottom: 6rem;
      text-align: center;
     }
    .aboutTable{
      text-align: center;
    }
    .aboutTable tr{
      border-bottom: solid 0.1rem #204579;
    }
    .aboutTable th{
      vertical-align: top;
      position: relative;
      text-align: left;
      width: 30%;
      background-color: #204579;
      color: #fff;
      vertical-align:middle;
      padding: 1rem 2rem;
    }
    .aboutTable th:after{
      display: block;
      content: "";
      width: 0px;
      height: 0px;
      position: absolute;
      top:calc(50% - 10px);
      right:-10px;
      border-left: 10px solid #204579;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
    }
    .aboutTable a{
      text-decoration: underline;
      
    }
    #aboutSect02{
      color: #222;
    background: #ccc;
    }
    .ggmap iframe{
      width: 100%;
    }
    .cliantUl{
      text-align: center;
    }
    .cliantUl li{
      display: inline-block;
    margin-right: 1.5rem;
    position: relative;
    }
    .cliantUl li:after{
      content:"/";
      margin-left: 1.5rem;
    }
    /*recruit*/
    .recruitDl{
      display: flex;
      align-items: stretch;
      max-width: 90rem;
      margin: 6rem auto;
      padding: 1rem;
      background: #fff;
      border: 0.1rem solid #dadada;
      /*box-shadow: 5px 5px 0 #dadada;*/
    }
    .recruitDl dt{
      width: 20rem;
      white-space: nowrap;
      padding: 2rem;
      position: relative;
      border-right: 2px solid #333;
    }
    
    .recruitDl dt span{
      font-weight: bold;
    font-size: 2.2rem;
    padding: 0 0.5rem;
    line-height: 1;
    letter-spacing: 0.5rem;
    }
    .recruitDl dd{
      padding:2rem 2rem 2rem 3rem;
      font-size: 2rem;
    }
/*Blog*/
#indexBlog,#indexBlog a,#blogCont,#blogCont a{
  
  
}
.blogUl{
  display: flex;
  padding: 6rem 0;
  overflow: hidden;
}
.blogUl li{
 margin-bottom: 3rem;
}
.postDate{
  line-height: 1;
  color: #204579;
  margin-bottom: .5rem;
  font-weight: bold;
}
.postTtl{
  font-weight: bold;
}
.thumbnailImg{
  margin-bottom: 1.5rem;
}
.thumbnailImg,.thumbnailImg a{
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.thumbnailImg a img{
  transition: all .3s ease-out;
}
.thumbnailImg a:hover img{
  opacity: .6;
  -moz-transform: scale(1.3);
  -webkit-transform: scale(1.3);
  -ms-transform: scale(1.3);
  transform: scale(1.3);
  filter: grayscale(0);
}
.thumbnailImg:after{
  content: "";
  position: absolute;
 padding-top: 66.66%;
}
.thumbnailImg img{
  width: 100%;
  height: 100%;
  
}
.thumbnailImg p{
  font-size: 3rem;
  font-weight: bold;
  position: absolute;
  z-index: 2;
  margin-bottom: 0;
}

/*member*/
#member{
  
}
.memberOuter{
  position: relative;
  
  margin:0 auto 6rem;
  clear: both;
    overflow: hidden;
    max-width:72rem;
 min-height: 36rem;
}
.memberOuter img{
  width: 40%;
  position: absolute;
    left: 0;
    top: 0;
  aspect-ratio: 1/1;
  max-width: 28rem;
  margin-bottom: 3rem;
  z-index: 3;
}
.memberInner{
  width: 65%;
  float: right;
  border: 5px solid #ccc;
  padding: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12rem 0 0 0;
}
.memberInner dl dt{
  border-bottom: 1px solid #ccc;
  padding-bottom: 0.8rem;
}
.memberInner dl dd{
 font-weight: bold;
 font-size: 3.6rem;
}
.memberInner dl dd span{
 opacity: 0.7;
 padding-left: 2rem;
 font-size: 2rem;
}
    /* footer */
    
    footer {
      padding: 4.5rem 0;
      overflow: hidden;
    }
    .footerLinks{
      display: flex;
      flex-wrap: wrap;
    }
    .footerLinks li{
      margin:1rem 0;
    }
    .footerLinks li a{
      font-size: 2rem;
      padding: .5rem 2rem;
      line-height: 1;
      position: relative;
    }
    footer a{
      font-size: 2rem;
      font-weight: bold;
    }
    footer a,.copy{
      
      opacity: 0.4;
    }
    footer a:hover{
      opacity: 1;
      transform: scale(1.8);
    }
    footer .container {
      text-align: right;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .footerLogo {
      max-width: 10rem;
      margin:   auto;
    }

    #page-top {
      position: fixed;
      right: 20px;
      z-index: 9;
    }
    
    #page-top p {
      cursor: pointer;
      font-size: 1.5rem;
      width: 5rem;
      height: 5rem;
      border-radius: 50%;
      display: flex;
      flex-flow: column;
      align-items: center;
      padding-top: 0.3rem;
      font-size: 4rem;
      margin: 0;
      transition: all 0.3s;
      
      background: #ccc;
    }
    
    #page-top p:hover {
      background: #036EB8;
    }
    
    .copy {
      margin:2rem 0 0;
      font-size: 1.1rem;
      white-space: nowrap;
    }
    
    @media screen and (max-width: 900px) {
      html {
        font-size: 60%;
      }
    }
    
    @media screen and (max-width: 768px) {
      html {
        font-size: 50%;
      }
      .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
        padding-left: 10px;
        padding-right: 10px;
      }
      .container {
        padding-left: 15px;
        padding-right: 15px;
      }
      section{
        padding: 4.5rem 0;
      }
      .col-xs-6 {
        width: 50%;
      }
      .col-xs-10 {
        width: 83.33333%;
      }
      .col-xs-12 {
        width: 100%;
      }
      .col-sm-offset-1{
        margin-left: 0;
      }
      .pc-only {
        display: none !important;
      }
      .sp-only {
        display: block;
      }
      h2 {
        font-size: 8rem;
      }
      #menuButton {
        width: 45px;
        height: 45px;
        top: 15px;
        right: 15px;
      }
      #menuButton span {
        height: 4px;
      }
      #menuButton span:first-child {
        top: 12px;
      }
      #menuButton span:last-child {
        bottom: 12px;
      }
      #menuButton.active span:first-child {
        -webkit-transform: translateY(9px) rotate(45deg);
        -moz-transform: translateY(9px) rotate(45deg);
        -ms-transform: translateY(9px) rotate(45deg);
        transform: translateY(9px) rotate(45deg);
      }
      #menuButton.active span:last-child {
        -webkit-transform: translateY(-8px) rotate(-45deg);
        -moz-transform: translateY(-8px) rotate(-45deg);
        -ms-transform: translateY(-8px) rotate(-45deg);
        transform: translateY(-8px) rotate(-45deg);
      }
      .progressbar-text{
        font-size: 14rem !important;
      }
      .headerLogo{
        max-width: 24rem;
      }
      .mv{
          align-items: center;
          flex-flow: column;
          height:   auto;
      }
      .mv h1{
       margin-top: 12rem;
      }
      .mv h2{
        font-size: 11vw;
      }
.mv .more{
  margin: 3rem auto;
    justify-content: center;
}
      .missionStatementDl dt{
        font-size: 2.6rem;
        line-height: 1.4;
      }
      .missionStatementDl dd {
        padding: 1.5rem 1rem;
      }

      .loopSlide,.loopSlide ul{
        width: 450vw;
      }
      .visionH3 {
        font-size: 2.9rem;
        line-height: 1.6;
    }
      .formTable th, .formTable td {
        display: block;
        width: 100%;
      }
      .formTable th {
        padding: 1.5rem 1.5rem .5rem;
      }
      .formTable td {
        padding: .5rem 1.5rem 1.5rem;
      }
      #indexMember, #indexMember .container, #indexAbout, #indexAbout .container {
        flex-flow: column;
    }
    .serviceHeading span{
      font-size: 3.2rem;
  }
  #service h3{
    font-size: 6rem;
  }
  .recruitDl{
    flex-flow: column;
    padding: 1.5rem;
  }
  .recruitDl dt{
width: 100%;
border-right:none;
border-bottom: 2px solid #204579;
  }
  .recruitDl dt,.recruitDl dd{
  padding: 1.5rem 0;
  }
  .contactTable th,.contactTable td{
    display: block;
    width: 100%;
    
  }
  .contactTable th{
    padding: 2rem 0 1rem;
  }
  .contactTable td{
    padding: 1rem 0;
  }
.memberOuter dl dd span{
  display: block;
  padding-left: 0;
 }
 .memberOuter{
  min-height: auto;
 }
 .memberOuter img {
  width: 40%;
 }
 .memberInner {
  width: 65%;
  margin: 4rem 0 0 0;
  padding: 3rem 2rem;
 }
 footer {
    padding: 3rem 0;
}
 footer .container{
display: block;
 }
      .footerLinks {
        border-right :none;
        flex-wrap: wrap;
        margin-top: 3rem;
    }
    }
    
    @media screen and (max-width: 400px) {
      #sect01 .logo h1 {
        font-size: 2.1rem;
      }
      footer .container{
        flex-flow: column;
      }
    footer {
      padding: 3rem 0;
    }
    }