@charset "UTF-8";

/*======================================================
   Original style
======================================================== */

html {
   font-size: 62.5%;
}

body {
   margin: 0;
   padding: 0;
   color: #333;
   font-size: 1.6rem;
   font-weight: 500;
   line-height: 1.7;
   word-wrap: break-word;
   font-family: "noto-sans-cjk-jp", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Yu Gothic", "Yu Gothic Medium", "游ゴシック Medium", "游ゴシック体", "メイリオ", "Meiryo", sans-serif;
   transition: .3s;
}

img {
   width: 100%;
   vertical-align: bottom;
}

li {
   list-style-type: none;
}

hr {
   display: none;
}

a {
   display: block;
}

a,
button {
   transition: .3s;
}

a:hover {
   opacity: .6;
}

.flex {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
}


/*=========================================================
   Break Point
==========================================================*/

/* スマホで見たときは"sp"のclassがついたコンテンツを表示 */
.sp {
   display: block !important;
}
.sp_only {
   display: block !important;
}
.tablet {
   display: none !important;
}
.tab_only {
   display: none !important;
}
.pc {
   display: none !important;
}
.pc_only {
   display: none !important;
}

/* 680px～の場合"tablet"のclassがついたコンテンツを表示 */
@media only screen and (min-width: 680px) {
   .sp_only {
      display: none !important;
   }
   .tablet {
      display: block !important;
   }
}

/* 768px～の場合"tab_only"と"pc"のclassがついたコンテンツを表示 */
@media only screen and (min-width: 768px) {
    .pc {
      display: block !important;
   }
   .tab_only {
      display: block !important;
   }
   .sp {
      display: none !important;
   }
}

/* タブレットで見たときは"tablet"のclassがついたコンテンツを表示 */
@media only screen and (min-width: 1080px) {
   .pc_only {
      display: block !important;
   }
   .tab_only {
      display: none !important;
   }
}

/*==========================================================
   header
===========================================================*/

.header {
   position: fixed;
   height: auto;
   z-index: 9999;
}

/*
ヘッダーロゴ
---------------------------------*/

.headerLogo {
   margin: 10px 0 0 10px;
   max-width: 56px;
   z-index: 9999;
}

/*
ハンバーガー　ボタン部分
---------------------------------*/
.hamburger-menu {
   position: relative;
   top: 2px;
   right: 15px;
   padding: 0;
   width: 55px;
   height: 55px;
   border: none;
   appearance: none;
   border-radius: 50%;
   background: linear-gradient(145deg, #ffffff, #eeeeee);
   box-shadow:  3px 3px 10px #53616dd7,
               -3px -3px 10px #ffffffd8,
               inset 3px 3px 10px transparent,
               inset -3px -3px 10px transparent;
   cursor: pointer;
   z-index: 9999;
}

.hamburger-menu:hover {
   background: #ffffff;
   box-shadow: 3px 3px 10px transparent,
               -3px -3px 10px transparent,
               inset 3px 3px 10px #53616dab,
               inset -3px -3px 10px #ffffffd8;
}

.hamburger-menu p {
   position: absolute;
   top: 10px;
   left: 50%;
   transform: translateX(-50%);
   color: #1980D8;
   font-size: 1.03rem;
   letter-spacing: .1rem;
}

.hamburger-menu__bar {
   display: inline-block;
   position: absolute;
   top: 30px;
   left: 50%;
   width: 52%;
   height: 2px;
   background: #1980D8;
   transform: translateX(-50%);
   transition: .3s;
}

.hamburger-menu__bar:last-child {
   top: 38px;
}

#js-hamburger-menu.active p {
   display: none;
}

#js-hamburger-menu.active .hamburger-menu__bar {
   transform: translateX(-50%) translateY(-4px) rotate(25deg);
}

#js-hamburger-menu.active .hamburger-menu__bar:last-child {
   transform: translateX(-50%) translateY(-12px) rotate(-25deg);
}

/*
ハンバーガー　メニューリスト部分
---------------------------------*/

.navigation {
   position: inherit;
   top: 0;
   right: -80%;
   width: 80%;
   height: 100%;
   background-color: #fff;
   visibility: hidden;
   overflow-y: auto;
   transition: all .4s ease-out;
   z-index: 9998;
   &__list {
      list-style: none;
   }
   &__item {
      border-bottom: 1px solid #F2F2F2;
      a {
         text-decoration: none;
         font-size: 1.2rem;
         color: #000;
         display: block;
         padding: 20px;
      }
   }
}

.navigation.is_active {
   visibility: visible;
   opacity: 1;
   right: 0;
}

.navigation-bg {
   opacity: 0;
   visibility: hidden;
   transition: .5s all ease-in-out;
   width: 100%;
   height: 100%;
   background-color: #70707085;
   position: fixed;
   z-index: 9997;
   top: 0;
   left: 0;
   &.nav-open {
      visibility: visible;
      opacity: 1;
   }
}

.navigation__list {
   text-align: center;
   list-style: none;
   padding: 90px 0;
   margin: 0 auto;
   width: 50%;
   max-width: 250px;
   min-width: 135px;
}

.navigation__list .logo {
   margin: 0 auto 50px;
   max-width: 70px;
}

.navigation__list-item {
   margin: 35px 0;
   border-top: solid 1px #1980D8;
   border-bottom: solid 1px #1980D8;
}

.navigation__link {
   display: block;
   padding: 5px 0;
   font-weight: 700;
   font-size: 2.2rem;
   text-decoration: none;
   transition: .5s;
}


/*==========================================================
   main
===========================================================*/

/*
background-color
---------------------------------*/
.bg-lb {
   background: #EFF7FF;
}

.bg-b {
   color: #fff;
   background: #1980D8;
}

/*
font-color
---------------------------------*/
.fc-b {
   color: #1980D8;
}

/*
text-align
---------------------------------*/
.center {
   text-align: center;
}

/*
font-family
---------------------------------*/

.ff-1 {
   font-family: "Zen Maru Gothic", "Zen Kaku Gothic New","noto-sans-cjk-jp", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Yu Gothic", "Yu Gothic Medium", "游ゴシック Medium", "游ゴシック体", "メイリオ", "Meiryo", sans-serif;
}

.ff-2 {
   font-family: "Geologica","noto-sans-cjk-jp", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Yu Gothic", "Yu Gothic Medium", "游ゴシック Medium", "游ゴシック体", "メイリオ", "Meiryo", sans-serif;
}

/*-------- h1~h3 ---------*/

h1,
h2,
h3,
h4 {
   text-align: center;
   line-height: 1;
   font-weight: 700;
   letter-spacing: .1rem;
}

h1 {
   font-size: 2.4rem;
}

h2 {
   color: #1980D8;
   font-size: 4.4rem;
   font-weight: 800;
   letter-spacing: .4rem;
}
h2 span {
   display: block;
   padding-top: 8px;
   font-size: 1.8rem;
   font-weight: 500;
}

h3 {
   font-size: 2.2rem;
}


/*-------------content box---------------*/

.inner {
   margin: auto;
   width: 92%;
   max-width: 410px;
}

/*---------------margin top-----------------*/

.mt10 {
   margin-top: 10px;
}
.mt15 {
   margin-top: 15px;
}
.mt20 {
   margin-top: 20px;
}
.mt25 {
   margin-top: 25px;
}
.mt30 {
   margin-top: 30px;
}
.mt35 {
   margin-top: 35px;
}
.mt40 {
   margin-top: 40px;
}
.mt45 {
   margin-top: 45px;
}
.mt50 {
   margin-top: 50px;
}
.mt55 {
   margin-top: 55px;
}
.mt60 {
   margin-top: 60px;
}
.mt65 {
   margin-top: 65px;
}
.mt70 {
   margin-top: 70px;
}
.mt75 {
   margin-top: 75px;
}
.mt80 {
   margin-top: 80px;
}
.mt85 {
   margin-top: 85px;
}
.mt90 {
   margin-top: 90px;
}
.mt95 {
   margin-top: 95px;
}
.mt100 {
   margin-top: 100px;
}

/*---------------margin bottom-----------------*/

.mb10 {
   margin-bottom: 10px;
}
.mb15 {
   margin-bottom: 15px;
}
.mb20 {
   margin-bottom: 20px;
}
.mb25 {
   margin-bottom: 25px;
}
.mb30 {
   margin-bottom: 30px;
}
.mb35 {
   margin-bottom: 35px;
}
.mb40 {
   margin-bottom: 40px;
}
.mb45 {
   margin-bottom: 45px;
}
.mb50 {
   margin-bottom: 50px;
}
.mb55 {
   margin-bottom: 55px;
}
.mb60 {
   margin-bottom: 60px;
}
.mb65 {
   margin-bottom: 65px;
}
.mb70 {
   margin-bottom: 70px;
}
.mb75 {
   margin-bottom: 75px;
}
.mb80 {
   margin-bottom: 80px;
}
.mb85 {
   margin-bottom: 85px;
}
.mb90 {
   margin-bottom: 90px;
}
.mb95 {
   margin-bottom: 95px;
}
.mb100 {
   margin-bottom: 100px;
}

/*---------------padding top-----------------*/
.pt10 {
   padding-top: 10px;
}
.pt15 {
   padding-top: 15px;
}
.pt20 {
   padding-top: 20px;
}
.pt25 {
   padding-top: 25px;
}
.pt30 {
   padding-top: 30px;
}
.pt35 {
   padding-top: 35px;
}
.pt40 {
   padding-top:40px;
}
.pt45 {
   padding-top: 45px;
}
.pt50 {
   padding-top: 50px;
}
.pt55 {
   padding-top: 55px;
}
.pt60 {
   padding-top: 60px;
}
.pt65 {
   padding-top: 65px;
}
.pt70 {
   padding-top: 70px;
}
.pt75 {
   padding-top: 75px;
}
.pt80 {
   padding-top: 80px;
}
.pt85 {
   padding-top: 85px;
}
.pt90 {
   padding-top: 90px;
}
.pt95 {
   padding-top: 95px;
}
.pt100 {
   padding-top: 100px;
}

/*---------------padding bottom-----------------*/
.pb10 {
   padding-bottom: 10px;
}
.pb15 {
   padding-bottom: 15px;
}
.pb20 {
   padding-bottom: 20px;
}
.pb25 {
   padding-bottom: 25px;
}
.pb30 {
   padding-bottom: 30px;
}
.pb35 {
   padding-bottom: 35px;
}
.pb40 {
   padding-bottom:40px;
}
.pb45 {
   padding-bottom: 45px;
}
.pb50 {
   padding-bottom: 50px;
}
.pb55 {
   padding-bottom: 55px;
}
.pb60 {
   padding-bottom: 60px;
}
.pb65 {
   padding-bottom: 65px;
}
.pb70 {
   padding-bottom: 70px;
}
.pb75 {
   padding-bottom: 75px;
}
.pb80 {
   padding-bottom: 80px;
}
.pb85 {
   padding-bottom: 85px;
}
.pb90 {
   padding-bottom: 90px;
}
.pb95 {
   padding-bottom: 95px;
}
.pb100 {
   padding-bottom: 100px;
}

/* footer
----------------------------------------------------------------*/

footer {
   font-weight: 700;
   background: #F4F4F4;
}

footer .logo {
   display: inline-block;
}

footer .logo .flex {
   justify-content: center;
}

footer .logo .img {
   margin-right: 9px;
   max-width: 60px;
}

footer .logo p {
   white-space: nowrap;
   font-size: 2.6rem;
}

.copyright {
   padding: 6px 0;
   background: #fff;
}

.copyright p {
   font-size: 1.2rem;
}


/*================================================================
 タブレット（画面幅768px以上で読み込む）
================================================================*/
@media screen and (min-width:768px) {

   /* main
   ----------------------------------------------------------------*/

   /*-------- h1~h3 ---------*/

   h1 {
   font-size: 3rem;
   }

   h2 {
      font-size: 5rem;
   }

   h3 {
      font-size: 2.4rem;
   }

   /*-------------content box---------------*/

   .inner {
      width: 80%;
      max-width: 780px;
   }

   /*
   ハンバーガー　メニューリスト部分
   ---------------------------------*/

   .navigation {
      width: 50%;
   }

   /*---------------margin top-----------------*/

   .mt20 {
      margin-top: 25px;
   }
   .mt25 {
      margin-top: 30px;
   }
   .mt30 {
      margin-top: 40px;
   }
   .mt35 {
      margin-top: 45px;
   }
   .mt40 {
      margin-top: 55px;
   }
   .mt45 {
      margin-top: 60px;
   }
   .mt50 {
      margin-top: 70px;
   }
   .mt55 {
      margin-top: 80px;
   }
   .mt60 {
      margin-top: 90px;
   }
   .mt65 {
      margin-top: 100px;
   }
   .mt70 {
      margin-top: 110px;
   }
   .mt75 {
      margin-top: 120px;
   }
   .mt80 {
      margin-top: 125px;
   }
   .mt85 {
      margin-top: 130px;
   }
   .mt90 {
      margin-top: 135px;
   }
   .mt95 {
      margin-top: 140px;
   }
   .mt100 {
      margin-top: 145px;
   }

   /*---------------margin bottom-----------------*/

   .mb20 {
      margin-bottom: 25px;
   }
   .mb25 {
      margin-bottom: 30px;
   }
   .mb30 {
      margin-bottom: 40px;
   }
   .mb35 {
      margin-bottom: 45px;
   }
   .mb40 {
      margin-bottom: 55px;
   }
   .mb45 {
      margin-bottom: 60px;
   }
   .mb50 {
      margin-bottom: 70px;
   }
   .mb55 {
      margin-bottom: 80px;
   }
   .mb60 {
      margin-bottom: 90px;
   }
   .mb65 {
      margin-bottom: 100px;
   }
   .mb70 {
      margin-bottom: 110px;
   }
   .mb75 {
      margin-bottom: 120px;
   }
   .mb80 {
      margin-bottom: 125px;
   }
   .mb85 {
      margin-bottom: 130px;
   }
   .mb90 {
      margin-bottom: 135px;
   }
   .mb95 {
      margin-bottom: 140px;
   }
   .mb100 {
      margin-bottom: 145px;
   }

   /*---------------padding top-----------------*/

   .pt20 {
      padding-top: 25px;
   }
   .pt25 {
      padding-top: 30px;
   }
   .pt30 {
      padding-top: 40px;
   }
   .pt35 {
      padding-top: 45px;
   }
   .pt40 {
      padding-top: 55px;
   }
   .pt45 {
      padding-top: 60px;
   }
   .pt50 {
      padding-top: 70px;
   }
   .pt55 {
      padding-top: 80px;
   }
   .pt60 {
      padding-top: 90px;
   }
   .pt65 {
      padding-top: 100px;
   }
   .pt70 {
      padding-top: 110px;
   }
   .pt75 {
      padding-top: 120px;
   }
   .pt80 {
      padding-top: 125px;
   }
   .pt85 {
      padding-top: 130px;
   }
   .pt90 {
      padding-top: 135px;
   }
   .pt95 {
      padding-top: 140px;
   }
   .pt100 {
      padding-top: 145px;
   }

   /*---------------padding bottom-----------------*/

   .pb20 {
      padding-bottom: 25px;
   }
   .pb25 {
      padding-bottom: 30px;
   }
   .pb30 {
      padding-bottom: 40px;
   }
   .pb35 {
      padding-bottom: 45px;
   }
   .pb40 {
      padding-bottom: 55px;
   }
   .pb45 {
      padding-bottom: 60px;
   }
   .pb50 {
      padding-bottom: 70px;
   }
   .pb55 {
      padding-bottom: 80px;
   }
   .pb60 {
      padding-bottom: 90px;
   }
   .pb65 {
      padding-bottom: 100px;
   }
   .pb70 {
      padding-bottom: 110px;
   }
   .pb75 {
      padding-bottom: 120px;
   }
   .pb80 {
      padding-bottom: 125px;
   }
   .pb85 {
      padding-bottom: 130px;
   }
   .pb90 {
      padding-bottom: 135px;
   }
   .pb95 {
      padding-bottom: 140px;
   }
   .pb100 {
      padding-bottom: 145px;
   }
}


/*================================================================
 PC（画面幅1080px以上で読み込む）
================================================================*/

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

   /* main
----------------------------------------------------------------*/

   /*-------------content box---------------*/

   .inner {
      width: 90%;
      max-width: 880px;
   }

   /*
   ハンバーガー　メニューリスト部分
   ---------------------------------*/

   .navigation {
      width: 35%;
   }

}