@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.8;
   letter-spacing: .1rem;
   word-wrap: break-word;
   font-family: "Noto Sans JP", "ヒラギノ角ゴシック", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Yu Gothic", "Yu Gothic Medium", "游ゴシック Medium", "游ゴシック体", "メイリオ", "Meiryo", sans-serif;
}

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;
}
.pc {
   display: none !important;
}

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

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

.header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 75px;
   background: #fff;
   border-radius: 3px;
   box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.205);
   z-index: 9999;
}

.headerInner {
   position: fixed;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   padding: 10px;
   z-index: 9999;
}

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

.headerLogo {
   justify-content: flex-start;
   width: 75%;
   max-width: 400px;
   z-index: 9999;
}
.headerLogo .logo-furusawa {
   margin-right: 15px;
   max-width: 200px;
}
.headerLogo .logo-yokohama {
   padding: 3px 0;
   max-width: 150px;
}

/*
ハンバーガー　ボタン部分
---------------------------------*/
.hamburger-menu {
   position: relative;
   top: 0;
   right: 5px;
   padding: 0;
   width: 40px;
   height: 35px;
   border: none;
   appearance: none;
   cursor: pointer;
   z-index: 9999;
}

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

.hamburger-menu__bar:first-child {
   top: 4px;
}
.hamburger-menu__bar:nth-child(2) {
   top: 11px;
}
.hamburger-menu__bar:nth-child(3) {
   top: 18px;
}

.hamburger-menu p {
   position: absolute;
   top: 22px;
   left: 50%;
   transform: translateX(-50%);
   font-size: 1.1rem;
   letter-spacing: .2rem;
   font-family: "Outfit", "Hiragino Sans", "ヒラギノ角ゴシック", sans-serif;
}

.hamburger-menu.active p.txt-menu,
.hamburger-menu p.txt-close {
   display: none;
}
.hamburger-menu.active p.txt-close {
   display: block;
}

.hamburger-menu.active .hamburger-menu__bar:first-child {
   transform: translateX(-50%) translateY(9px) rotate(18deg);
}
.hamburger-menu.active .hamburger-menu__bar:nth-child(2) {
   display: none;
}
.hamburger-menu.active .hamburger-menu__bar:nth-child(3) {
   transform: translateX(-50%) translateY(-5px) rotate(-18deg);
}

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

.navigation {
   position: inherit;
   left: 0;
   top: -80%;
   width: 100%;
   height: auto;
   background-color: #fff;
   visibility: hidden;
   transition: all .5s ease;
   z-index: 9998;
}

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

.navigation__list {
   text-align: center;
   list-style: none;
   padding: 60px 25px 30px;
   margin: 0 auto;
}

.navigation__list-item:not(:last-child) {
   border-bottom: solid 1px #707070;
}

.navigation__link {
   position: relative;
   display: block;
   padding: 26px 0;
   text-align: left;
   font-weight: 900;
   font-size: 1.8rem;
   text-decoration: none;
   transition: 0s;
}

.arrow {
   display: block;
}

.arrow::before,
.arrow::after{
   content: "";
   display: block;
   width: 13px;/*線の長さ*/
   height: 1px;/*線の太さ*/
   background: #333;/*線の色*/
   position: absolute;
   top: calc(50% - .5px);
   right: 0;
   border-radius: 100px;
   transform: rotate(60deg);
   transform-origin:calc(100% - .1px) 50%;
}
.arrow::after{
   transform: rotate(-60deg);
}


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


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


h2 {
   font-weight: 900;
   line-height: 1;
   letter-spacing: .2rem;
}
h2 .cap {
   display: block;
   color: #CCCCCC;
   padding-top: 8px;
   font-family: "Outfit", "Hiragino Sans", "ヒラギノ角ゴシック", sans-serif;
   font-size: 1.4rem;
   font-weight: 500;
}

h3 {
   font-size: 2rem;
   font-weight: 900;
   line-height: 1;
}


/*-------------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 {
   text-align: center;
}

.footerLogo .logo-furusawa {
   margin: 0 auto;
   max-width: 220px;
}

.footerLogo .logo-yokohama {
   margin: 0 auto;
   max-width: 140px;
}

footer address {
   text-align: left;
   margin: 0 auto;
   max-width: 283px;
}

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

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


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

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

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

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


   /*---------------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（画面幅900px以上で読み込む）
================================================================*/

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

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

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

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

   .header {
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      width: 95%;
      max-width: 1200px;
   }

   .headerInner {
      padding: 0 0 0 10px;
      width: 95%;
      max-width: 1200px;
   }

   .headerLogo .logo-furusawa {
      max-width: 277px;
   }
   .headerLogo .logo-yokohama {
      max-width: 200px;
   }

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

   .hamburger-menu {
      display: none;
   }

   .navigation {
      position: static;
      visibility: visible;
      max-width: 550px;
      background: transparent;
   }

   .navigation__list {
      display: flex;
      justify-content: space-between;
      padding: 0 30px 0 100px;
   }

   .navigation__list-item:not(:last-child) {
      border-bottom: none;
   }

   .navigation__link {
      padding: 22px 0;
   }

   .arrow {
      display: none;
   }

   /*==========================================================
      footer
   ===========================================================*/
   .footer-wrap {
      display: flex;
    }

    .footerLogo {
      margin: 0 20px 0 0;
    }

    footer address {
      margin: 0;
    }


}