@charset "UTF-8";

body {
   font-size: 1.6rem;
   font-family: "游ゴシック", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
   font-weight: 600;
   color: #210000;
   background-color: #EDF3FA;
}

@media screen and (max-width: 768px) {
   body {
      font-size: 1.2rem;
   }
}

.res-pc {
   display: block !important;
}

.res-sp {
   display: none !important;
}

.inner-01 {
   max-width: 960px;
   width: 90%;
   margin: auto;
}

.inner-02 {
   max-width: 1200px;
   width: 90%;
   margin: auto;
}

@media screen and (max-width: 768px) {
   .res-pc {
      display: none !important;
   }

   .res-sp {
      display: block !important;
   }
}

.mt8 {
   margin-top: 8px;
}

@media screen and (max-width: 768px) {
   .mt8 {
      margin-top: 4px;
   }
}

.mt16 {
   margin-top: 16px;
}

@media screen and (max-width: 768px) {
   .mt16 {
      margin-top: 8px;
   }
}

.mt24 {
   margin-top: 24px;
}

@media screen and (max-width: 768px) {
   .mt24 {
      margin-top: 16px;
   }
}

.mt40 {
   margin-top: 40px;
}

@media screen and (max-width: 768px) {
   .mt40 {
      margin-top: 24px;
   }
}

.bold {
   font-weight: bold;
}

.mauto {
   margin: 0 auto;
   display: inline-block;
}

.tx_white {
   color: #fff !important;
}

.center {
   text-align: center !important;
}


/*----------------------------------------------------
   header
----------------------------------------------------*/

header {
   display: flex !important;
}


/*----------------------------------------------------
   ☆spHd
----------------------------------------------------*/

.spHd .hdLogo {
   line-height: 0;
   padding: 10px 0 5px 15px;
}

.spHd .hdLogo img {
   width: 100px;
   height: auto;
   margin: inherit;
}


/*----------------------------------------------------
   ☆drawer
----------------------------------------------------*/

.drawer .drawer-nav {
   opacity: 0 !important;
}

.drawer .drawer-nav li {
   font-size: 1.1em;
   list-style-type: none;
   padding: 0;
   width: 100%;
   border-bottom: 1px double #ddd;
   text-align: center;
}

.drawer .drawer-nav li>a {
   font-size: 1.4rem;
   display: block;
   color: #000;
   padding: 1em 0;
   text-decoration: none;
   letter-spacing: 0.1em;
   font-weight: bold;
}

.drawer .drawer-open .drawer-nav {
   opacity: 1 !important;
}

.drawer .drawer-close .drawer-nav {
   opacity: 0 !important;
}

.drawer .drawer-nav li.reserve,
.drawer .drawer-nav li.contact,
.drawer .drawer-nav.tel {
   border: none;
}

.drawer .drawer-nav .reserve>a {
   background-color: #535d62;
   color: #fff;
}

.drawer .drawer-nav .blue {
   border: none;
}

.drawer .drawer-nav .blue>a {
   background-color: #1F365C;
   color: #fff;
}

.drawer .drawer-nav .blue>a span {
   padding: 5px 0 5px 20px;
   background: url("/lp/telework/lib/cmn_img/icon01.png") no-repeat center left/13px 16px;
   font-weight: bold;
}

.drawer .drawer-nav .green {
   border: none;
}

.drawer .drawer-nav .green>a {
   background-color: #85bb92;
   color: #fff;
}

.drawer .drawer-nav .green>a span {
   padding: 5px 0 5px 20px;
   background: url("/lp/telework/lib/cmn_img/icon02.png") no-repeat center left/19px 16px;
   font-weight: bold;
}

.drawer .drawer-nav .ore {
   border: none;
}

.drawer .drawer-nav .ore>a {
   background-color: #da9943;
   color: #fff;
}

.drawer .drawer-nav .ore>a span {
   padding: 5px 0 5px 24px;
   background: url("/lp/telework/lib/cmn_img/icon02.png") no-repeat center left/19px 16px;
   font-weight: bold;
}

.drawer .drawer-hamburger {
   background: #444a5a;
   padding: 13px 16px 25px;
   width: 60px;
   height: 60px;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

.drawer .drawer-hamburger-icon,
.drawer .drawer-hamburger-icon:after,
.drawer .drawer-hamburger-icon:before {
   background: #fff;
}


/*-----☆☆ dorawer MENU表記 あり ☆☆-----*/

.drawer .drawer-hamburger {
   width: 65px !important;
   height: 65px !important;
   padding: 0px 21px 30px !important;
}

.drawer .drawer-hamburger .drawer-hamburger-icon:before {
   top: -8px;
}

.drawer .drawer-hamburger .drawer-hamburger-icon:after {
   top: 8px;
}

.drawer .drawer-hamburger span.menuTx {
   color: #fff;
   font-size: 1.0rem;
   border: none;
   letter-spacing: 0.1em;
   top: 38px;
   position: absolute;
   left: 16px;
}


/*----------------------------------------------------
   ☆pcHd
----------------------------------------------------*/

.pcHd {
   width: 100%;
   font-size: 0;
   position: fixed;
   left: 0;
   top: 0;
   z-index: 9999;
   -webkit-transition: all .3s ease-in-out;
   -o-transition: all .3s ease-in-out;
   transition: all .3s ease-in-out;
}

.pcHd .logo {
   padding-left: 30px;
   padding-top: 20px;
   width: 169px;
   height: auto;
   display: inline-block;
   vertical-align: top;
   -webkit-transition: all .3s ease-in-out;
   -o-transition: all .3s ease-in-out;
   transition: all .3s ease-in-out;
}

.pcHd .gnavList {
   width: calc(100% - 169px);
   display: inline-block;
   vertical-align: top;
   font-size: 0;
   text-align: right;
}

.pcHd .gnavList>li {
   display: inline-block;
   vertical-align: middle;
}

.pcHd .gnavList>li.nav {
   margin-right: 25px;
}

.pcHd .gnavList>li.nav a {
   font-size: 1.4rem;
   position: relative;
   font-weight: bold;
}

.pcHd .gnavList>li.nav a::after {
   position: absolute;
   bottom: 2px;
   left: 0;
   content: '';
   width: 100%;
   height: 2px;
   background: #ccc;
   opacity: 0;
   visibility: hidden;
   -webkit-transition: .3s;
   -o-transition: .3s;
   transition: .3s;
}

.pcHd .gnavList>li.nav a:hover::after {
   bottom: -6px;
   opacity: 1;
   visibility: visible;
}

.pcHd .gnavList>li.cv {
   -webkit-transition: all .3s ease-in-out;
   -o-transition: all .3s ease-in-out;
   transition: all .3s ease-in-out;
}

.pcHd .gnavList>li.cv:hover {
   background-color: #aaa !important;
}

.pcHd .gnavList>li.cv a {
   display: block;
   width: 100px;
   height: 100px;
   color: #fff;
   -webkit-transition: all .3s ease-in-out;
   -o-transition: all .3s ease-in-out;
   transition: all .3s ease-in-out;
}

.pcHd .gnavList>li.cv a>p {
   display: table;
   width: 100%;
   height: 100%;
}

.pcHd .gnavList>li.cv a>p>span.in {
   display: table-cell;
   vertical-align: middle;
   font-size: 1.5rem;
   text-align: center;
   width: 100%;
   line-height: 1.4;
   padding-top: 40px;
   -webkit-transition: all .3s ease-in-out;
   -o-transition: all .3s ease-in-out;
   transition: all .3s ease-in-out;
}

.pcHd .gnavList>li.cv a>p>span.in>span.ico {
   padding-top: 40px;
   position: relative;
   font-weight: bold;
}

.pcHd .gnavList>li.cv.blue {
   background-color: #1F365C;
   margin-right: -1px;
}

.pcHd .gnavList>li.cv.blue span.ico {
   background: url("/lp/telework/lib/cmn_img/icon01.png") no-repeat center top/26px 32px;
}

.pcHd .gnavList>li.cv.green {
   background-color: #85bb92;
}

.pcHd .gnavList>li.cv.green span.ico {
   background: url("/lp/telework/lib/cmn_img/icon02.png") no-repeat center top/38px 32px;
}

.pcHd .gnavList>li.cv.ore {
   background-color: #da9943;
}

.pcHd .gnavList>li.cv.ore span.ico::before {
   content: "";
   position: absolute;
   top: 0;
   left: 50%;
   background: url("/lp/telework/lib/cmn_img/icon02.png") no-repeat center top/38px 32px;
   width: 42px;
   height: 30px;
   margin-left: -11px;
}

.pcHd.active {
   background-color: rgba(255, 255, 255, 0.8);
   -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
   box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

.pcHd.active .logo {
   padding-top: 10px;
}

.pcHd.active .gnavList>li.cv a {
   width: 90px;
   height: 90px;
}

.pcHd.active .gnavList>li.cv a>p>span.in {
   font-size: 1.3rem;
}

.pc_show {
   display: block;
}

@media screen and (max-width: 768px) {
   .pc_show {
      display: none !important;
   }
}

.sp_show {
   display: none !important;
}

@media screen and (max-width: 768px) {
   .sp_show {
      display: block !important;
   }
}


/*---------------------------------------------------------
contents
---------------------------------------------------------*/

.bgimg {
   position: relative;
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.5s;
   transition-duration: 0.5s;
   -webkit-transition-delay: 0s;
   transition-delay: 0s;
   -webkit-transition-timing-function: ease-in;
   transition-timing-function: ease-in;
   /*アニメーションがゆっくり開始される*/
}

.dark {
   background: rgba(0, 0, 0, 0.8);
}


/*====== 9-1-1 縦線が動いてスクロールを促す =======*/


/*スクロールダウン全体の場所*/

.scrolldown1 {
   /*描画位置※位置は適宜調整してください*/
   position: absolute;
   left: 9%;
   bottom: 40px;
   /*全体の高さ*/
   height: 50px;
}

@media screen and (max-width: 768px) {
   .scrolldown1 {
      bottom: 8%;
      left: 14%;
   }
}


/*Scrollテキストの描写*/

.scrolldown1 span {
   /*描画位置*/
   position: revert;
   left: -15px;
   top: -15px;
   /*テキストの形状*/
   color: #eee;
   font-size: 0.7rem;
   letter-spacing: 0.05em;
}


/* 線の描写 */

.scrolldown1::after {
   content: "";
   /*描画位置*/
   position: absolute;
   top: 0;
   left: -12px;
   /*線の形状*/
   width: 1px;
   height: 30px;
   background: #eee;
   /*線の動き1.4秒かけて動く。永遠にループ*/
   -webkit-animation: pathmove 1.4s ease-in-out infinite;
   animation: pathmove 1.4s ease-in-out infinite;
   opacity: 0;
}


/*高さ・位置・透過が変化して線が上から下に動く*/

@-webkit-keyframes pathmove {
   0% {
      height: 0;
      top: 0;
      opacity: 0;
   }

   30% {
      height: 30px;
      opacity: 1;
   }

   100% {
      height: 0;
      top: 50px;
      opacity: 0;
   }
}

@keyframes pathmove {
   0% {
      height: 0;
      top: 0;
      opacity: 0;
   }

   30% {
      height: 30px;
      opacity: 1;
   }

   100% {
      height: 0;
      top: 50px;
      opacity: 0;
   }
}


/*---------------------------------------------------------
  共通
  ---------------------------------------------------------*/

h2.midashi {
   text-align: center;
   font-size: 40px;
   letter-spacing: 0.16em;
   line-height: 48px;
   margin-bottom: 40px;
   font-family: "Noto Serif JP";
   color: #100C01;
   font-weight: normal;
}

@media screen and (max-width: 768px) {
   h2.midashi {
      font-size: 28px;
      letter-spacing: 0.16em;
      line-height: 40px;
      margin-bottom: 24px;
   }
}

h2.tx_serif {
   font-family: "Noto Serif JP";
   font-weight: 600;
   font-size: 30px;
   letter-spacing: 0.24em;
   line-height: 46px;
   text-align: left;
   color: #100C01;
   font-weight: normal;
}

@media screen and (max-width: 768px) {
   h2.tx_serif {
      font-size: 20px;
      letter-spacing: 0.16em;
      line-height: 40px;
   }
}

.top_title_h3 {
   font-weight: bold;
   font-size: 40px;
   letter-spacing: 0.04em;
   line-height: 48px;
   text-align: center;
   color: #fff;
   margin-top: 40px;
}

.top_title_h3 span {
   font-family: 'Barlow', sans-serif;
   font-weight: bold;
   font-size: 48px;
}

@media screen and (max-width: 768px) {
   .top_title_h3 {
      font-size: 28px;
      line-height: 36px;
   }

   .top_title_h3 span {
      font-size: 32px;
   }
}

.inside {
   max-width: 1152px;
   margin: 0 auto;
}

@media screen and (max-width: 1152px) {
   .inside {
      max-width: inherit;
      margin: 0 auto;
      width: 92%;
   }
}

.inside960 {
   max-width: 960px;
   margin: 0 auto;
}

@media screen and (max-width: 1152px) {
   .inside960 {
      max-width: inherit;
      margin: 0 auto;
      width: 92%;
   }
}

.table01 {
   width: 100%;
   table-layout: fixed;
}

.table01 tr {
   padding-top: 8px;
   display: block;
}

.table01 th {
   color: #fff100;
   font-size: 16px;
   width: 240px;
   text-align: left;
   vertical-align: top;
   table-layout: fixed;
}

.table01 td {
   color: #ffffff;
   font-size: 16px;
   font-weight: bold;
   table-layout: fixed;
}

ul.disc {
   list-style-type: disc !important;
   margin: 0;
   padding: 0;
}

ul.disc li {
   list-style-type: disc !important;
   margin-left: 1.5em;
}

ul.decimal {
   list-style-type: decimal !important;
   margin: 0;
   padding: 0;
}

ul.decimal li {
   list-style-type: decimal !important;
   margin-left: 1.5em;
}


/*== ボタン共通設定 */

.btn {
   font-family: "Noto Serif JP";
   font-weight: bold;
   font-size: 16px;
   letter-spacing: 0.08em;
   text-align: left;
   color: #fff;
   /*アニメーションの起点とするためrelativeを指定*/
   position: relative;
   overflow: hidden;
   /*ボタンの形状*/
   text-decoration: none;
   display: inline-block;
   border: 1px solid #ffffff;
   /* ボーダーの色と太さ */
   padding: 16px 0;
   text-align: center;
   outline: none;
   /*アニメーションの指定*/
   -webkit-transition: ease 0.2s;
   transition: ease 0.2s;
   min-width: 280px;
}

@media screen and (max-width: 768px) {
   .btn {
      font-size: 14px;
      padding: 16px 40px;
   }

   .insideNon {
      width: 100% !important;
      max-width: 100% !important;
   }
}

.btn::after {
   position: absolute;
   top: 50%;
   right: 1em;
   width: 0.5em;
   height: 0.5em;
   -webkit-transform: translateY(-50%) rotate(45deg);
   transform: translateY(-50%) rotate(45deg);
   border-right: 2px solid currentColor;
   border-top: 2px solid currentColor;
   border-color: #fff;
   content: "";
   z-index: 3;
}


/*ボタン内spanの形状*/

.btn span {
   position: relative;
   z-index: 3;
   /*z-indexの数値をあげて文字を背景よりも手前に表示*/
   color: #ffffff;
}

.btn:hover span {
   color: #010c0f;
}

.btn:hover::after {
   position: absolute;
   top: 50%;
   right: 1em;
   width: 0.5em;
   height: 0.5em;
   -webkit-transform: translateY(-50%) rotate(45deg);
   transform: translateY(-50%) rotate(45deg);
   border-right: 2px solid currentColor;
   border-top: 2px solid currentColor;
   color: #010c0f;
   content: "";
}


/*== 背景が流れる（左から右） */

.bgleft:before {
   content: "";
   /*絶対配置で位置を指定*/
   position: absolute;
   top: 0;
   left: 0;
   z-index: 2;
   /*色や形状*/
   background: #ffffff;
   /*背景色*/
   width: 100%;
   height: 100%;
   /*アニメーション*/
   -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
   transition: -webkit-transform 0.6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
   transition: transform 0.6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
   transition: transform 0.6s cubic-bezier(0.8, 0, 0.2, 1) 0s, -webkit-transform 0.6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
   -webkit-transform: scale(0, 1);
   transform: scale(0, 1);
   -webkit-transform-origin: right top;
   transform-origin: right top;
}


/*hoverした際の形状*/

.bgleft:hover:before {
   -webkit-transform-origin: left top;
   transform-origin: left top;
   -webkit-transform: scale(1, 1);
   transform: scale(1, 1);
}

.btn_black {
   color: #010c0f;
   border: 1px solid #010c0f;
   /* ボーダーの色と太さ */
}

.btn_black::after {
   border-color: #010c0f;
}


/*ボタン内spanの形状*/

.btn_black span {
   color: #010c0f;
}

.btn_black:hover span {
   color: #fff;
}

.btn_black:hover::after {
   color: #fff;
}


/*== 背景が流れる（左から右） */

.bgleft_black:before {
   content: "";
   /*絶対配置で位置を指定*/
   position: absolute;
   top: 0;
   left: 0;
   z-index: 2;
   /*色や形状*/
   background: #010c0f;
   /*背景色*/
   width: 100%;
   height: 100%;
   /*アニメーション*/
   -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
   transition: -webkit-transform 0.6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
   transition: transform 0.6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
   transition: transform 0.6s cubic-bezier(0.8, 0, 0.2, 1) 0s, -webkit-transform 0.6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
   -webkit-transform: scale(0, 1);
   transform: scale(0, 1);
   -webkit-transform-origin: right top;
   transform-origin: right top;
}


/*hoverした際の形状*/

.bgleft_black:hover:before {
   -webkit-transform-origin: left top;
   transform-origin: left top;
   -webkit-transform: scale(1, 1);
   transform: scale(1, 1);
}


/*== 背景ありテキスト */

.bgextend {
   -webkit-animation-name: bgextendAnimeBase;
   animation-name: bgextendAnimeBase;
   -webkit-animation-duration: 1s;
   animation-duration: 1s;
   -webkit-animation-fill-mode: forwards;
   animation-fill-mode: forwards;
   position: relative;
   overflow: hidden;
   /*　はみ出た色要素を隠す　*/
   opacity: 0;
}

@-webkit-keyframes bgextendAnimeBase {
   from {
      opacity: 0;
   }

   to {
      opacity: 1;
   }
}

@keyframes bgextendAnimeBase {
   from {
      opacity: 0;
   }

   to {
      opacity: 1;
   }
}


/*中の要素*/

.bgappear {
   -webkit-animation-name: bgextendAnimeSecond;
   animation-name: bgextendAnimeSecond;
   -webkit-animation-duration: 1s;
   animation-duration: 1s;
   -webkit-animation-delay: 0.6s;
   animation-delay: 0.6s;
   -webkit-animation-fill-mode: forwards;
   animation-fill-mode: forwards;
   opacity: 0;
}

@-webkit-keyframes bgextendAnimeSecond {
   0% {
      opacity: 0;
   }

   100% {
      opacity: 1;
   }
}

@keyframes bgextendAnimeSecond {
   0% {
      opacity: 0;
   }

   100% {
      opacity: 1;
   }
}


/*左から右*/

.bgLRextend::before {
   -webkit-animation-name: bgLRextendAnime;
   animation-name: bgLRextendAnime;
   -webkit-animation-duration: 1s;
   animation-duration: 1s;
   -webkit-animation-fill-mode: forwards;
   animation-fill-mode: forwards;
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: #01355b;
   /*伸びる背景色の設定*/
}

@-webkit-keyframes bgLRextendAnime {
   0% {
      -webkit-transform-origin: left;
      transform-origin: left;
      -webkit-transform: scaleX(0);
      transform: scaleX(0);
   }

   50% {
      -webkit-transform-origin: left;
      transform-origin: left;
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
   }

   50.001% {
      -webkit-transform-origin: right;
      transform-origin: right;
   }

   100% {
      -webkit-transform-origin: right;
      transform-origin: right;
      -webkit-transform: scaleX(0);
      transform: scaleX(0);
   }
}

@keyframes bgLRextendAnime {
   0% {
      -webkit-transform-origin: left;
      transform-origin: left;
      -webkit-transform: scaleX(0);
      transform: scaleX(0);
   }

   50% {
      -webkit-transform-origin: left;
      transform-origin: left;
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
   }

   50.001% {
      -webkit-transform-origin: right;
      transform-origin: right;
   }

   100% {
      -webkit-transform-origin: right;
      transform-origin: right;
      -webkit-transform: scaleX(0);
      transform: scaleX(0);
   }
}


/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.bgappearTrigger,
.bgLRextendTrigger {
   opacity: 0;
}

@media screen and (max-width: 768px) {
   .inside {
      max-width: 90%;
      margin: 0 auto;
   }

   .table01 th {
      display: block;
   }

   .table01 td {
      display: block;
   }
}

.linkbox .btn::after {
   position: absolute;
   top: 77%;
   right: 49%;
   -webkit-transform: translateY(-50%) rotate(135deg);
   transform: translateY(-50%) rotate(135deg);
}


/*---------------------------------------------------------
  mv_area
  ---------------------------------------------------------*/

.mvarea {
   position: relative;
}

.mvarea p.mainimg {
   text-align: center;
   margin-top: 120px;
}

.mvarea p.mainimg img {
   width: 720px;
}

.mvarea .img_horse {
   position: absolute;
   bottom: 340px;
   left: 0;
   width: 200px;
}

.mvarea .img_kids {
   position: absolute;
   bottom: 280px;
   right: 0;
   width: 200px;
}

@media screen and (max-width: 959px) {
   .mvarea p.mainimg {
      margin-top: 24px;
   }

   .mvarea p.mainimg img {
      width: 92%;
   }

   .mvarea .img_horse {
      display: none;
   }

   .mvarea .img_kids {
      display: none;
   }
}


/*---------------------------------------------------------
  concept
  ---------------------------------------------------------*/

.concept {
   background: #8FB7DE;
   padding-top: 340px;
   margin-top: -340px;
   padding-bottom: 260px;
   position: relative;
   z-index: -1;
}

.conceptbox {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 960px;
   margin: 80px auto 0;
}

.conceptbox .conceptImg {
   width: 480px;
}

.conceptbox .conceptTitle {
   width: 420px;
}

h2.nastatitle {
   font-family: 'Barlow', sans-serif;
   font-weight: bold;
   font-size: 76px;
   letter-spacing: 0.04em;
   line-height: 64px;
   text-align: center;
}

h2.nastatitle small {
   font-weight: bold;
   font-size: 18px;
   letter-spacing: 0.04em;
   line-height: 32px;
   text-align: center;
   color: #210000;
   font-family: "游ゴシック", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}

img.sakitate_compoimg {
   width: 320px;
}

h3.nastatitle {
   font-family: "Noto Sans JP";
   font-weight: bold;
   font-size: 24px;
   letter-spacing: 0.04em;
   line-height: 36px;
   text-align: center;
}

.concept h3.nastatitle {
   color: #00030B;
   margin-top: 40px;
}

h3.nastatitle img {
   display: inline-block;
   vertical-align: baseline;
   padding-left: 4px;
}

.concept p.tx {
   margin: 24px auto 0;
   width: 520px;
   color: #00030B;
}

@media screen and (max-width: 959px) {
   .concept {
      padding-top: 160px;
      margin-top: -160px;
      padding-bottom: 80px;
   }

   .conceptbox {
      display: block;
      width: 90%;
      margin: 64px auto 0;
   }

   .conceptbox .conceptImg {
      width: 100%;
   }

   .conceptbox .conceptTitle {
      width: 100%;
      margin-top: 40px;
   }

   h2.nastatitle {
      font-size: 44px;
      line-height: 18px;
   }

   h2.nastatitle small {
      font-size: 12px;
      line-height: 42px;
   }

   img.sakitate_compoimg {
      width: 280px;
   }

   h3.nastatitle {
      font-size: 16px;
      line-height: 24px;
   }

   .concept h3.nastatitle {
      margin-top: 16px;
      margin: 16px auto 0;
      width: 96%;
   }

   .concept p.tx {
      margin: 24px auto 0;
      width: 90%;
   }

   h3.nastatitle img {
      width: 48px;
   }
}


/*---------------------------------------------------------
  features
  ---------------------------------------------------------*/

.features {
   padding: 80px 0;
   position: relative;
}

.features .img_features_deco01 {
   position: absolute;
   top: -120px;
   left: 0;
   width: 252px;
}

.features .img_features_deco02 {
   position: absolute;
   top: -60px;
   right: 0;
   width: 252px;
}

.features .featuresTextList {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   width: 960px;
   margin: 40px auto 0;
}

.features .featuresTextList li {
   width: 48%;
   border-bottom: 2px dashed #1e0001;
   font-weight: bold;
   font-size: 20px;
   letter-spacing: 0.04em;
   line-height: 40px;
   text-align: center;
   color: #210000;
   padding-bottom: 8px;
   margin-top: 24px;
}

.features .featuresTextList li span {
   font-weight: bold;
   font-size: 16px;
   letter-spacing: 0.04em;
   line-height: 32px;
   text-align: center;
   color: #fff;
   background: #210000;
   padding: 5px 24px 4px;
   border-radius: 4px;
   margin-bottom: 8px;
}

.featuresbox {
   background: #fff;
   border: 4px solid #21476E;
   padding: 40px;
   position: relative;
   max-width: 1040px;
   margin: 80px auto 0;
}

.featuresbox .featuresNumber {
   margin-top: -80px;
}

.featuresboxIn {
   margin-top: 24px;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.featuresboxIn .set {
   width: 49%;
}

.featuresboxIn .set h3 {
   text-align: left;
}

.featuresboxIn .set p.tx {
   margin-top: 24px;
}

.featuresboxIn .onlyImg {
   width: 48%;
}

.features03Img {
   margin-top: 24px;
}

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

   .features {
      padding: 40px 0;
   }

   .features .img_features_deco01 {
      top: -56px;
      width: 120px;
   }

   .features .img_features_deco02 {
      top: -24px;
      width: 120px;
   }

   .features .featuresTextList {
      display: flex;
      width: 98%;
      margin: 24px auto 0;
   }

   .features .featuresTextList li {
      width: 48%;
      font-size: 13px;
      line-height: 20px;
      padding-bottom: 4px;
      margin-top: 16px;
   }

   .features .featuresTextList li span {
      font-weight: bold;
      font-size: 11px;
      line-height: 20px;
      padding: 5px 8px 4px;
      margin-bottom: 6px;
      display: inline-block;
   }

   .featuresbox {
      border: 4px solid #1E0001;
      padding: 16px;
      max-width: inherit;
      width: 98%;
      margin: 80px auto 0;
   }

   .featuresbox .featuresNumber {
      margin-top: -80px;
   }

   .featuresboxIn {
      margin-top: 24px;
      display: block;
   }

   .featuresboxIn .set h3 {
      text-align: center;
   }

   .featuresboxIn .set {
      width: 100%;
      margin-top: 16px;
   }

   .featuresboxIn .set p.tx {
      margin-top: 16px;
   }

   .featuresboxIn .onlyImg {
      width: 100%;
   }

   .features03Img {
      margin-top: 16px;
   }
}


/*---------------------------------------------------------
   technology
  ---------------------------------------------------------*/

.technology {
   background: #8FB7DE;
   padding: 80px 0 120px;
}

.technologyul {
   width: 1040px;
   margin: 80px auto 0;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}

.technologyul li {
   width: 32%;
}

.technologyul li:hover {
   opacity: 0.6;
   transition: 0.6s;
   -webkit-transition: 0.6s;
   -moz-transition: 0.6s;
   -o-transition: 0.6s;
}

.modal {
   display: none;
   position: fixed;
   z-index: 99999;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: auto;
   background-color: rgba(0, 0, 0, 0.7);
   transition: all 1s ease-in-out;
}

.modal-container .img {
   background: #f1f1f1;
   margin-bottom: 15px;
}

.modal-container p {
   margin-bottom: 10px;
}

.modal-container p:last-child {
   margin-bottom: 0;
}

.modal-content {
   background: #EDF3FA;
   overflow-y: auto;
   width: 100%;
   max-width: 640px;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   animation: show 0.6s linear 0s;
   filter: drop-shadow(0px 2px 6px #777);
}

/*
.modal-content2 {
   max-width: 400px;
}
*/

.modal-top {
   display: inline-block;
   position: absolute;
   right: 0;
   top: 8px;
}

.modal-close {
   color: #fff;
   text-decoration: none;
   font-size: 2rem;
   line-height: 1;
   padding: 8px;
   background: #E8953A;
}

.modal-close:hover,
.modal-close:focus {
   text-decoration: none;
   cursor: pointer;
}

.modal-title {
   color: #FFF;
}

@keyframes show {
   from {
      opacity: 0;
   }

   to {
      opacity: 1;
   }
}

@media screen and (max-width: 959px) {
   .technology {
      padding: 40px 0;
   }


   .technologyul {
      width: 96%;
      margin: 40px auto 0;
   }

   .technologyul li {
      width: 49%;
   }
}


/*---------------------------------------------------------
  whatis
  ---------------------------------------------------------*/
#whatis {
   margin-top: -160px;
}


.whatis {
   background: #21476E;
   padding: 80px 0;
   color: #fff;
   position: relative;
}

.whatis .img_whatis_deco01 {
   position: absolute;
   top: -120px;
   left: 40px;
   width: 252px;
}

.whatis .img_whatis_baby {
   position: absolute;
   top: -80px;
   right: 40px;
   width: 252px;
}

.whatis h2 {
   line-height: 56px;
}

.whatis h2.nastatitle small {
   color: #fff;
}

.whatis h3.nastatitle {
   margin-top: 40px;
   margin-bottom: 24px;
}

.whatis p.tx {
   text-align: center;
}

.section-lineup {
   overflow: hidden;
   padding: 40px 0;
}

.section-lineup .inner {
   margin: 0 auto;
   width: 80%;
   padding-left: 4rem;
   padding-right: 4rem;
}

.section-lineup .lineup {
   position: relative;
}

.section-lineup .lineup-carousel li {
   text-align: center;
   margin-right: 24px;
}

.section-lineup .lineup-carousel img {
   display: block;
   margin-bottom: 16px;
   width: 100%;
}

.section-lineup .slick-list {
   overflow: visible;
}


/*
.section-lineup .slick-nav-arrows {
    position: absolute;
    top: -40px;
    right: 0%;
}
*/

.section-lineup .slick-arrow {
   display: inline-flex;
   width: 40px;
   height: 40px;
   align-items: center;
   justify-content: center;
}

.section-lineup .slick-next {
   right: 0;
}

.section-lineup .slick-prev {
   left: 0;
}

.section-lineup .slick-next2 {
   right: 0;
}

.section-lineup .slick-prev2 {
   left: 0;
}

.section-lineup .slick-next:before,
.section-lineup .slick-prev:before {
   color: #000;
}

@media screen and (max-width: 959px) {
   #whatis {
      margin-top: -40px;
   }

   .whatis {
      padding: 40px 0 40px;
   }

   .whatis .img_whatis_deco01 {
      top: -64px;
      left: 8px;
      width: 120px;
   }

   .whatis .img_whatis_baby {
      top: -56px;
      right: 8px;
      width: 120px;
   }

   .whatis h2 {
      line-height: 40px;
   }

   .whatis h2.nastatitle small {
      color: #fff;
   }

   .whatis h3.nastatitle {
      margin-top: 24px;
      margin-bottom: 24px;
   }

   .whatis p.tx {
      text-align: center;
      width: 90%;
      margin: 0 auto;
   }

   .section-lineup {
      overflow: hidden;
      padding: 24px 0 0;
   }

   .section-lineup .inner {
      margin: 0 auto;
      width: 100%;
      padding-left: 3rem;
      padding-right: 3rem;
   }
}


/*---------------------------------------------------------
  plan
  ---------------------------------------------------------*/

.plan {
   background: #8FB7DE;
   padding: 80px 0 120px;
}

.planul {
   display: flex;
   width: 92%;
   margin: 64px auto 0;
}

.planul li {
   width: 33%;
}

.planul li a:hover {
   opacity: 0.6;
}

@media screen and (max-width: 959px) {
   .plan {
      background: #8FB7DE;
      padding: 40px 0 120px;
   }

   .planul {
      display: block;
      width: 92%;
      margin: 40px auto 0;
   }

   .planul li {
      width: 100%;
      margin-bottom: 8px;
   }
}


/*---------------------------------------------------------
  contact
  ---------------------------------------------------------*/

.contact {
   padding: 120px 0;
   text-align: center;
   background: #21476E;
   position: relative;
}

.contact h2.nastatitle {
   color: #fff;
}

.contact .img_contact_deco01 {
   position: absolute;
   top: -60px;
   left: 40px;
   width: 252px;
}

.contact .img_contact_deco02 {
   position: absolute;
   top: -20px;
   right: 40px;
   width: 252px;
}

.contact p.tx {
   margin-top: 40px;
   color: #fff;
}

.contactul {
   margin: 40px auto 0;
   display: flex;
   justify-content: center;
}

.contactul li {
   padding: 0 1%;
}

.nastabtn {
   width: 320px;
   border-radius: 80px;
   padding: 16px 0;
   font-family: "Noto Sans JP";
   font-weight: bold;
   font-size: 20px;
   letter-spacing: 0.04em;
   line-height: 32px;
   text-align: center;
   color: #fff;
   display: inline-block;
}

.nastabtn:hover {
   opacity: 0.6;
}

.btnnavy {
   background: #1F365C;
}

.btnyellow {
   background: #D48F44;
}

@media screen and (max-width: 959px) {
   .contact {
      padding: 80px 0;
   }

   .contact .img_contact_deco01 {
      position: absolute;
      top: -88px;
      left: 16px;
      width: 120px;
   }

   .contact .img_contact_deco02 {
      position: absolute;
      top: -64px;
      right: 16px;
      width: 120px;
   }

   .contact p.tx {
      margin-top: 24px;
   }

   .contactul {
      margin: 24px auto 0;
      display: block;
      width: 92%;
   }

   .contactul li {
      padding: 0;
   }

   .nastabtn {
      width: 100%;
      padding: 16px 0;
      font-size: 16px;
      line-height: 24px;
      margin-bottom: 8px;
   }
}

#footer {
   margin-top: 0 !important;
}

.contact_area ul li {
   width: 49% !important;
}


/*---------------------------------------------------------
  pickup
  ---------------------------------------------------------*/

.pickup {
   background-color: #28334D;
   padding: 120px 0;
   text-align: center;
   color: #fff;
}

.sliderArea {
   max-width: 100%;
   margin: 0 auto;
   padding: 0 25px;
   width: 1152px;
}

.sliderArea .card {
   width: 46%;
   margin: 0 auto;
   overflow: hidden;
   margin-top: 24px;
}

.sliderArea .card p {
   font-family: "Noto Serif JP";
   font-weight: 500;
   font-size: 20px;
   letter-spacing: 0.12em;
   line-height: 24px;
   text-align: left;
   color: #fff;
}

.sliderArea .card p span {
   font-family: "Noto Serif JP";
   font-weight: 500;
   font-size: 14px;
   letter-spacing: 0.16em;
   line-height: 24px;
   text-align: center;
   color: #fff;
}

.sliderArea .card a {
   overflow: hidden;
   display: inline-block;
}

.sliderArea .card img {
   -webkit-transition: 1s all;
   transition: 1s all;
}

.sliderArea .card img:hover {
   -webkit-transform: scale(1.1, 1.1);
   transform: scale(1.1, 1.1);
   -webkit-transition: 1s all;
   transition: 1s all;
}

.sliderArea.w300 {
   max-width: 300px !important;
   width: 300px !important;
}

.slick-slide {
   margin: 0 16px;
}

.slick-slide img {
   width: 100%;
   height: auto;
}

.slick-prev,
.slick-next,
.slick-prev2,
.slick-next2 {
   z-index: 1;
   top: 45% !important;
}


/*
.slick-prev {
    left: 0px !important;
}

.slick-next {
    right: 10px !important;
}

*/

.slick-prev:before,
.slick-next:before {
   color: #000;
}

.slick-slide {
   -webkit-transition: all ease-in-out 0.3s;
   transition: all ease-in-out 0.3s;
   opacity: 0.2;
}

.slick-active {
   opacity: 1;
}

.slick-current {
   opacity: 1;
}

.thumb {
   margin: 20px 0 0;
}

.thumb .slick-slide {
   cursor: pointer;
}

.thumb .slick-slide:hover {
   opacity: 0.7;
}

.slick-prev:before,
.slick-next:before {
   color: #B30931 !important;
   font-size: 32px !important;
}

.slick-dots {
   margin-top: 24px !important;
}

.slick-dots li button:before {
   color: #fff !important;
}

.slick-dots li.slick-active button:before {
   color: #fff !important;
}

@media screen and (max-width: 768px) {
   .pickup {
      padding: 80px 0;
   }
}

.slick-prev:before {
   content: url(../img/icon-arrowL.svg) !important;
}

[dir='rtl'] .slick-prev:before {
   content: url(../img/icon-arrowL.svg) !important;
}

.slick-next:before {
   content: url(../img/icon-arrowR.svg) !important;
}

[dir='rtl'] .slick-next:before {
   content: url(../img/icon-arrowR.svg) !important;
}

.slick-prev2:before {
   content: url(../img/icon-arrowL.svg) !important;
   opacity: 0.75;
}

[dir='rtl'] .slick-prev2:before {
   content: url(../img/icon-arrowL.svg) !important;
}

.slick-next2:before {
   content: url(../img/icon-arrowR.svg) !important;
   opacity: 0.75;
}

[dir='rtl'] .slick-next2:before {
   content: url(../img/icon-arrowR.svg) !important;
}

.directory_link {
   display: none;
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus,
.slick-prev2:hover,
.slick-prev2:focus,
.slick-next2:hover,
.slick-next2:focus {
   color: transparent;
   outline: none;
   background: transparent;
}

.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before,
.slick-prev2:hover:before,
.slick-prev2:focus:before,
.slick-next2:hover:before,
.slick-next2:focus:before {
   opacity: 1;
}

.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before,
.slick-prev2.slick-disabled:before,
.slick-next2.slick-disabled:before {
   opacity: .25;
}

[dir='rtl'] .slick-prev,
.slick-prev2 {
   right: -25px;
   left: auto;
}

[dir='rtl'] .slick-next,
.slick-next2 {
   right: auto;
   left: -25px;
}

.slick-nav-arrows2 {
   position: absolute;
   top: 47% !important;
   justify-content: space-between;
   display: flex;
   width: 100%;
}

@media only screen and (max-width: 959px) {
   .slick-nav-arrows2 {
      top: 42% !important;

   }
}

/*---------------------------------------------------------
  fadein
  ---------------------------------------------------------*/

.fadein {
   opacity: 0;
   -webkit-transform: translate(0, 1rem);
   transform: translate(0, 1rem);
   -webkit-transition: all 1s;
   transition: all 1s;
   -webkit-perspective: 1000;
   perspective: 1000;
}

.fadein.amin_on {
   opacity: 1;
   -webkit-transform: translate(0, 0);
   transform: translate(0, 0);
   -webkit-perspective: 1000;
   perspective: 1000;
}

.fadein02 {
   opacity: 0;
   -webkit-transform: translate(0, 1rem);
   transform: translate(0, 1rem);
   -webkit-transition: all 1.2s;
   transition: all 1.2s;
   -webkit-perspective: 1000;
   perspective: 1000;
}

.fadein02.amin_on {
   opacity: 1;
   -webkit-transform: translate(0, 0);
   transform: translate(0, 0);
   -webkit-perspective: 1200;
   perspective: 1200;
}

@media only screen and (max-width: 959px) {
   .fadein {
      opacity: 1;
      -webkit-transform: translate(0, 1rem);
      transform: translate(0, 1rem);
      -webkit-transition: all 1s;
      -moz-transform: all 1s;
      transition: all 1s;
      display: block;
      -webkit-perspective: 1000;
      perspective: 1000;
   }

   .fadein.amin_on {
      opacity: 1;
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0);
      display: block;
      -webkit-perspective: 1000;
      perspective: 1000;
   }
}


/*---------------------------------------------------------
  drawer
  ---------------------------------------------------------*/


/*!
 * jquery-drawer v3.1.0
 * Flexible drawer menu using jQuery, iScroll and CSS.
 * http://git.blivesta.com/drawer
 * License : MIT
 * Author : blivesta <design@blivesta.com> (http://blivesta.com/)
 */

.drawer-nav {
   position: fixed;
   z-index: 1000;
   top: 0;
   overflow: hidden;
   width: 25.2rem;
   height: 100%;
   color: #222;
   background-color: #fff
}

.drawer-brand {
   font-size: 1.5rem;
   font-weight: 700;
   line-height: 3.75rem;
   display: block;
   padding-right: .75rem;
   padding-left: .75rem;
   text-decoration: none;
   color: #222
}

.drawer-menu {
   margin: 0;
   padding: 0;
   list-style: none
}

.drawer-menu-item {
   font-size: 1rem;
   display: block;
   padding: .75rem;
   text-decoration: none;
   color: #222
}

.drawer-menu-item:hover {
   text-decoration: underline;
   color: #555;
   background-color: transparent
}

.drawer-overlay {
   position: fixed;
   z-index: 998;
   top: 0;
   left: 0;
   display: none;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, .2)
}

.drawer-open .drawer-overlay {
   display: block
}

.drawer--top .drawer-nav {
   top: -100%;
   left: 0;
   width: 100%;
   height: auto;
   max-height: 100%;
   -webkit-transition: top .6s cubic-bezier(.19, 1, .22, 1);
   transition: top .6s cubic-bezier(.19, 1, .22, 1)
}

.drawer--top.drawer-open .drawer-nav {
   top: 0
}

.drawer--left .drawer-nav {
   left: -16.25rem;
   -webkit-transition: left .6s cubic-bezier(.19, 1, .22, 1);
   transition: left .6s cubic-bezier(.19, 1, .22, 1)
}

.drawer--left .drawer-hamburger,
.drawer--left.drawer-open .drawer-nav,
.drawer--left.drawer-open .drawer-navbar .drawer-hamburger {
   left: 0
}

.drawer--left.drawer-open .drawer-hamburger {
   left: 16.25rem
}

.drawer--right .drawer-nav {
   right: -25.2rem;
   -webkit-transition: right .6s cubic-bezier(.19, 1, .22, 1);
   transition: right .6s cubic-bezier(.19, 1, .22, 1);
   z-index: 99999999;
}

.drawer--right .drawer-hamburger,
.drawer--right.drawer-open .drawer-nav,
.drawer--right.drawer-open .drawer-navbar .drawer-hamburger {
   right: 0;
   z-index: 9999999;
}

.drawer--right .drawer-hamburger,
.drawer--right.drawer-open .drawer-nav,
.drawer--right.drawer-open .drawer-navbar .drawer-hamburger {
   right: 0;
   z-index: 9999999;
}

.drawer--right.drawer-open .drawer-hamburger {
   right: 25.25rem
}

.drawer-hamburger {
   position: fixed;
   z-index: 9999;
   top: 0;
   display: block;
   box-sizing: content-box;
   width: 3.5rem;
   padding: 15px 0.75rem 25px;
   -webkit-transition: all .6s cubic-bezier(.19, 1, .22, 1);
   transition: all .6s cubic-bezier(.19, 1, .22, 1);
   -webkit-transform: translateZ(0);
   transform: translateZ(0);
   border: 0;
   outline: 0;
   background-color: transparent;
   background: rgba(255, 255, 255, 1.0);
}

.drawer-hamburger-icon {
   position: relative;
   display: block;
   margin-top: 10px
}

.drawer-hamburger-icon,
.drawer-hamburger-icon:after,
.drawer-hamburger-icon:before {
   width: 100%;
   height: 2px;
   -webkit-transition: all .6s cubic-bezier(.19, 1, .22, 1);
   transition: all .6s cubic-bezier(.19, 1, .22, 1);
   background-color: #333
}

.drawer-hamburger-icon:after,
.drawer-hamburger-icon:before {
   position: absolute;
   top: -10px;
   left: 0;
   content: ' '
}

.drawer-hamburger-icon:after {
   top: 10px
}

.drawer-open .drawer-hamburger-icon {
   background-color: transparent
}

.drawer-open .drawer-hamburger-icon:after,
.drawer-open .drawer-hamburger-icon:before {
   top: 0 !important
}

.drawer-open .drawer-hamburger-icon:before {
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg)
}

.drawer-open .drawer-hamburger-icon:after {
   -webkit-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   transform: rotate(-45deg)
}

.sr-only {
   position: absolute;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   width: 1px;
   height: 1px;
   margin: -1px;
   padding: 0;
   border: 0
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
   position: static;
   overflow: visible;
   clip: auto;
   width: auto;
   height: auto;
   margin: 0
}

.drawer--sidebar,
.drawer--sidebar .drawer-contents {
   background-color: #fff
}

@media (min-width:64em) {
   .drawer--sidebar .drawer-hamburger {
      display: none;
      visibility: hidden
   }

   .drawer--sidebar .drawer-nav {
      display: block;
      -webkit-transform: none;
      -ms-transform: none;
      transform: none;
      position: fixed;
      width: 12.5rem;
      height: 100%
   }

   .drawer--sidebar.drawer--left .drawer-nav {
      left: 0;
      border-right: 1px solid #ddd
   }

   .drawer--sidebar.drawer--left .drawer-contents {
      margin-left: 12.5rem
   }

   .drawer--sidebar.drawer--right .drawer-nav {
      right: 0;
      border-left: 1px solid #ddd
   }

   .drawer--sidebar.drawer--right .drawer-contents {
      margin-right: 12.5rem
   }

   .drawer--sidebar .drawer-container {
      max-width: 48rem
   }
}

@media (min-width:75em) {
   .drawer--sidebar .drawer-nav {
      width: 16.25rem
   }

   .drawer--sidebar.drawer--left .drawer-contents {
      margin-left: 16.25rem
   }

   .drawer--sidebar.drawer--right .drawer-contents {
      margin-right: 16.25rem
   }

   .drawer--sidebar .drawer-container {
      max-width: 60rem
   }
}

.drawer--navbarTopGutter {
   padding-top: 3.75rem
}

.drawer-navbar .drawer-navbar-header {
   border-bottom: 1px solid #ddd;
   background-color: #fff
}

.drawer-navbar {
   z-index: 1000;
   top: 0;
   width: 100%
}

.drawer-navbar--fixed {
   position: fixed
}

.drawer-navbar-header {
   position: relative;
   z-index: 1000;
   box-sizing: border-box;
   width: 100%;
   height: 3.75rem;
   padding: 0 .75rem;
   text-align: center
}

.drawer-navbar .drawer-brand {
   line-height: 3.75rem;
   display: inline-block;
   padding-top: 0;
   padding-bottom: 0;
   text-decoration: none
}

.drawer-navbar .drawer-brand:hover {
   background-color: transparent
}

.drawer-navbar .drawer-nav {
   padding-top: 3.75rem
}

.drawer-navbar .drawer-menu {
   padding-bottom: 7.5rem
}

@media (min-width:64em) {
   .drawer-navbar {
      height: 3.75rem;
      border-bottom: 1px solid #ddd;
      background-color: #fff
   }

   .drawer-navbar .drawer-navbar-header {
      position: relative;
      display: block;
      float: left;
      width: auto;
      padding: 0;
      border: 0
   }

   .drawer-navbar .drawer-menu--right {
      float: right
   }

   .drawer-navbar .drawer-menu li {
      float: left
   }

   .drawer-navbar .drawer-menu-item {
      line-height: 3.75rem;
      padding-top: 0;
      padding-bottom: 0
   }

   .drawer-navbar .drawer-hamburger {
      display: none
   }

   .drawer-navbar .drawer-nav {
      position: relative;
      left: 0;
      overflow: visible;
      width: auto;
      height: 3.75rem;
      padding-top: 0;
      -webkit-transform: translateZ(0);
      transform: translateZ(0)
   }

   .drawer-navbar .drawer-menu {
      padding: 0
   }

   .drawer-navbar .drawer-dropdown-menu {
      position: absolute;
      width: 16.25rem;
      border: 1px solid #ddd
   }

   .drawer-navbar .drawer-dropdown-menu-item {
      padding-left: .75rem
   }
}

.drawer-dropdown-menu {
   display: none;
   box-sizing: border-box;
   width: 100%;
   margin: 0;
   padding: 0;
   background-color: #fff
}

.drawer-dropdown-menu>li {
   width: 100%;
   list-style: none
}

.drawer-dropdown-menu-item {
   line-height: 3.75rem;
   display: block;
   padding: 0;
   padding-right: .75rem;
   padding-left: 1.5rem;
   text-decoration: none;
   color: #222
}

.drawer-dropdown-menu-item:hover {
   text-decoration: underline;
   color: #555;
   background-color: transparent
}

.drawer-dropdown.open>.drawer-dropdown-menu {
   display: block
}

.drawer-dropdown .drawer-caret {
   display: inline-block;
   width: 0;
   height: 0;
   margin-left: 4px;
   -webkit-transition: opacity .2s ease, -webkit-transform .2s ease;
   transition: opacity .2s ease, -webkit-transform .2s ease;
   transition: transform .2s ease, opacity .2s ease;
   transition: transform .2s ease, opacity .2s ease, -webkit-transform .2s ease;
   -webkit-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
   vertical-align: middle;
   border-top: 4px solid;
   border-right: 4px solid transparent;
   border-left: 4px solid transparent
}

.drawer-dropdown.open .drawer-caret {
   -webkit-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
   transform: rotate(180deg)
}

.drawer-container {
   margin-right: auto;
   margin-left: auto
}

@media (min-width:64em) {
   .drawer-container {
      max-width: 60rem
   }
}

@media (min-width:75em) {
   .drawer-container {
      max-width: 70rem
   }
}

.drawer--top.drawer-open .drawer-nav {
   top: 0 !important;
   height: auto;
   overflow: auto !important;
   overflow-x: auto !important;
   overflow-y: scroll !important;
   height: auto !important;
   background: rgba(255, 255, 255, 1) !important;
}

.contact_area {
   display: none !important;
}

.contact_area.new {
   display: block !important;
}

@media (min-width:75em) {
   .contact_area.new {
      display: none !important;
   }
}

.contact_area ul li a {
   background: #1F365C;
}

.contact_area ul li:nth-child(2) a {
   background: #D48F44;
}

#pagetop.fixed {
   bottom: 62px !important;
   opacity: 1 !important;
}

@media (min-width:75em) {
   #pagetop.fixed {
      bottom: 0 !important;
   }
}