@charset "utf-8";

/*------------------------------------------------
Variables
------------------------------------------------*/

:root {
  /* Color */
  --primary-color: #4394d0;
  --primary-rgb-color: rgba(67, 147, 208, 0.7);
  --secondary-color: #004471;
  --tertiary-color: #00498a;
  --accent-color: #FFF569;
  --sub-color: #FDBA50;
  --bg-extra-light: #eeeeee;
  --bg-pretty-light: #d5d4d5;
  --bg-light: #c9c9c9;
  --bg-dark: #626262;
  --bg-extra-dark: #434343;
  --primary-text-color: #000;
  --secondary-text-color: #333;

  /* Layout */
  --header-size-sp: 55px;
  --header-size-pc: 110px;
  --layout-gap: 40px;
}

/*------------------------------------------------
基本
------------------------------------------------*/


html {
  font-size: 62.5%;  /* フォントサイズを10pxに設定 */
}

body {
  color: var(--primary-text-color);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;  /* 14px */
  line-height: 2;
  position: relative;
}

@media print, screen and (min-width: 769px) {
  html {
    /* min-width: 1024px; */
  }

  body {
    font-size: 1.6rem;  /* 16px */
    /* min-width: 1024px; */
  }
}


/*----- コンテンツが少ない場合に、フッターを最下部に固定 -----*/

html {
  display: flex;
  flex-direction: column;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex-grow: 1;
  min-height: 1%;
}

@media print, screen and (min-width: 769px) {
  body {
    min-height: 100vh;
  }
}


/*----- リンクホバー -----*/
a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  opacity: .7;
}

/*----- PCで電話番号リンク無効 -----*/
@media print, screen and (min-width: 769px) {
  a[href^="tel:"] {
    /*    color: inherit;*/
    text-decoration: none;
    pointer-events: none;
  }
}

/*----- イメージ下スペース削除 右クリック禁止 -----*/
img {
  vertical-align: middle;
  width: 100%;
}

/*----- テーブルスタイル削除 -----*/
table {
  border-collapse: collapse;
}

/*----- リストスタイル削除 -----*/
ul, ol {
  list-style: none;
}


/*----- 可変BRタグ -----*/
.br-sp {
  display: inline-block;
}

@media print, screen and (min-width: 667px) {
  .br-sp {
    display: none;
  }
}

.br-tb {
  display: none;
}

@media print, screen and (min-width: 667px) {
  .br-tb {
    display: inline-block;
  }
}

.br-pc {
  display: none;
}

@media print, screen and (min-width: 769px) {
  .br-pc {
    display: inline-block;
  }
}

/*------------------------------------------------
ヘッダー
------------------------------------------------*/
#header {
  z-index: 1000;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-width: 320px;
  background-color: var(--secondary-color);
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

.header-inner {
  width: 100%;
  height: var(--header-size-sp);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-left: 15px;
}

.header-title {
  height: var(--header-size-sp);
  z-index: 10;
  width: 235px;
}

.header-title-button {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: var(--header-size-sp);
}

@media print, screen and (min-width: 960px) {
  .header-inner {
    height: var(--header-size-pc);
    padding: 0 20px;
  }
  .header-title {
    /* width: calc(100% - 600px); */
    width: calc(100% - 540px);
    max-width: 483px;
  }
}

@media print, screen and (min-width: 1170px) {
  .header-inner {
    padding: 0 40px;
  }
}

/*========== ヘッダーナビゲーション ==========*/

/*----- nav-open Style -----*/
.nav-open .header-nav {
  display: block;
  animation-name: header-nav-fade-in;
  animation-duration: .3s;
}

@keyframes header-nav-fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.header-nav {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.header-nav-list {
  width: 100%;
  height: 100%;
  margin-top: var(--header-size-sp);
  background-color: var(--secondary-color);
  border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.header-nav-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: auto;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.5);
}
.header-nav-item > a {
  color: #fff;
  width: 100%;
  height: 60px;
  text-align: left;
  display: flex;
  align-items: center;
  line-height: 1;
  padding: 0 calc(var(--layout-gap)/2);
}

.header-nav-item.item-tel {}
.header-nav-item.item-fax {
  display: none;
}

@media print, screen and (min-width: 960px) {
  .nav-open .header-nav {
    background-color: inherit;
  }
  .header-nav {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    overflow-y: inherit;
    height:var(--header-size-pc);
    /* width: 555px; */
    width: 485px;
  }
  .header-nav-list {
    height:var(--header-size-pc);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-top: 0;
    border: none;
    padding: 15px 0;
  }
  .header-nav-item {
    width:auto;
    margin: 0;
    border: none;
  }
  .header-nav-item:nth-of-type(1) {
    order: 3;
  }
  .header-nav-item:nth-of-type(2) {
    order: 4;
  }
  .header-nav-item:nth-of-type(3) {
    order: 5;
  }
  .header-nav-item:nth-of-type(4) {
    order: 6;
  }
  .header-nav-item.item-tel {
    order: 1;
    line-height: 1;
  }
  .header-nav-item.item-fax {
    display: block;
    order: 2;
    line-height: 1;
  }
  .header-nav-item > a {
    color: #fff;
    width: 100%;
    height: 100%;
    font-size: 1.7rem;
    font-weight: 700;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
  .header-nav-item.item-tel > a,
  .header-nav-item.item-fax > a {
    font-size: 2.4rem;
  }
  .header-nav-item-title {
    color: var(--secondary-color);
    background-color: #fff;
    padding:2px 5px;
    margin-right: 10px;
    font-size: 2.1rem;
  }
  .header-contact-item-no {
    letter-spacing: 0.05em;
    vertical-align: text-top;
  }
  .header-contact-item-no .suppression {
    font-size: 1.9rem;
  }
}

/*========== header-contact ==========*/

.header-contact {
  display: none;
}

@media print, screen and (min-width: 960px) {
  .header-contact {
    display: block;
  }
  .header-contact-button {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    pointer-events: auto;
  }
  .header-contact-text {
    color: #fff;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
  }
}

/*========== ナビゲーショントリガー ==========*/

.nav-trigger {
  background-color: var(--primary-color);
  position: relative;
  width: var(--header-size-sp);
  height: var(--header-size-sp);
}

@media print, screen and (min-width: 960px) {
  .nav-trigger {
    display: none;
  }
}

/*========== ハンバーガーアイコン ==========*/

.humberger-icon {
  margin: 14px auto 15px;
}

.humberger-icon,
.humberger-icon::before,
.humberger-icon::after {
  display: block;
  position: relative;
  height: 1px;
  width: 20px;
  background-color: #fff;
}

.humberger-icon::before,
.humberger-icon::after {
  content: "";
  position: absolute;
  transition: transform .3s;
}

.humberger-icon::before {
  transform: translateY(-7px);
}

.humberger-icon::after {
  transform: translateY(7px);
}

.nav-open .humberger-icon {
  background-color: rgba(255, 255, 255, 0);
}

.nav-open .humberger-icon::before {
  transform: rotate(-45deg);
}

.nav-open .humberger-icon::after {
  transform: rotate(45deg);
}

/*========== グローバルナビゲーションオープン時のスクロールロック ==========*/

.no-scroll {
  position: fixed;
  width: 100%;
  height: 100%;
}

/*------------------------------------------------
フッター
------------------------------------------------*/

.footer {
  width: 100%;
  background-color: var(--bg-pretty-light);
}

.footer-container {
  padding: calc(var(--layout-gap) / 2);
}
.footer-main {
  width: 100%;
  margin: calc(var(--layout-gap) / 4) 0;
}
.footer-logo {
  width: 80%;
  max-width: 351px;
}
.footer-logo > a {}
.footer-address {
  line-height: 1.5;
  margin: calc(var(--layout-gap) / 4) 0;
}
.footer-nav {}
.footer-nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  /* justify-content: flex-start; */
  justify-content: flex-end;
}

.footer-nav-item {
  font-weight: 700;
  position: relative;
  padding: 0 calc(var(--layout-gap) / 2) ;
  /* padding-left: calc(var(--layout-gap) / 2) ; */
  margin: calc(var(--layout-gap) / 7) 0;
  /* width: 50%; */
}

.footer-nav-item::before {
  content: "";
  background-image: url(../../image/common/icon_arrow.svg);
  background-size: contain;
  display: block;
  position: absolute;
  width: 14px;
  height: 14px;
  left: 0;
  top: calc(50% - 7px);
}


.footer-sub-container {
  background-color: var(--secondary-color);
  padding: calc(var(--layout-gap) / 4);
}

.footer-copyright {
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  text-align: center;
}

@media print, screen and (min-width: 769px) {
  .footer-container {
    padding: calc(var(--layout-gap) / 2);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .footer-main {
    max-width: 360px;
    margin: 0;
  }
  .footer-logo {
    width: 100%;
  }
  .footer-address {
    margin: calc(var(--layout-gap) / 4) 0 0;
  }
  .footer-nav {
    width: calc(100% - 390px);
  }
}

@media print, screen and (min-width: 1170px) {
  .footer-container {
    padding: calc(var(--layout-gap) / 1.5) 0;
    max-width: 1020px;
    margin: auto;
  }
  .footer-nav {
    width: 560px;
  }
  .footer-nav-list {
    align-items: center;
    justify-content:space-between;
  }
  .footer-nav-item {
    width: auto;
    font-size: 1.7rem;
  }
}

/*------------------------------------------------
ページトップボタン
------------------------------------------------*/

.pagetop-button {
  border-radius:50%;
  bottom: 70px;
  right: 15px;
  width: 40px;
  height: 40px;
  background-image: url(../../image/common/symbol_page_top.svg);
  background-size: contain;
  position: fixed;
}

@media print, screen and (min-width: 769px) {
  .pagetop-button {
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 20px;
  }
}

/*------------------------------------------------
ページヘッダー
------------------------------------------------*/
.page-header {
  background-position: center;
  background-size: cover;
  width: 100%;
  margin-top: var(--header-size-sp);
}

.page-header-inner {
  width: 100%;
  height: 125px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(var(--primary-color-rgb), 0.25);
}

.page-header-title {
  color: #fff;
  line-height: 1;
  text-shadow: 0 0 5px rgba(0,0,0,0.2), 0 0 15px rgba(0,0,0,0.2), 0 0 25px rgba(0,0,0,0.2);
}

/*事業内容*/
.page-header.business-bg {
  background-image: url(../../image/business/page_header_business_bg.jpg);
}
/*会社情報*/
.page-header.company-bg {
  background-image: url(../../image/company/page_header_company_bg.jpg);
}
/*ウエイトレンタル*/
.page-header.weight-rental-bg {
  background-image: url(../../image/weight-rental/page_header_weight_bg.jpg);
}
/*採用情報*/
.page-header.recruit-bg {
  background-image: url(../../image/recruit/page_header_recruit_bg.jpg);
}


@media print, screen and (min-width: 960px) {
  .page-header {
    margin-top: var(--header-size-pc);
    height: 350px;
  }
  .page-header-inner {
    height: 350px;
  }
  .page-header-title {
    font-size:4.5rem;
  }
}


/*------------------------------------------------
セクション
------------------------------------------------*/

.section {}
.section-container {
  padding: calc(var(--layout-gap)/2) calc(var(--layout-gap)/2) calc(var(--layout-gap)/1);
}
.section-inner {
  margin: 0 auto;
  max-width: 1020px;
}
.section-title {
  line-height: 1;
  font-weight: 900;
  text-align: center;
  width: 100%;
  border-bottom: 10px solid var(--bg-dark);
  padding-top: calc(var(--layout-gap)/2);
}
.section-inner-title {
  color: #fff;
  background-color: var(--tertiary-color);
  font-size: 2rem;
  line-height: 1;
  text-align: center;
  padding: 10px 0;
}
.section-text {
  text-align: left;
}

@media print, screen and (min-width: 960px) {
  .section-title {
    text-align: left;
    margin: auto;
    padding-left: calc(var(--layout-gap)*1.25);
    padding-top: calc(var(--layout-gap)/1.5);
  }
  .section-inner-title {
    font-size: 2.5rem;
    padding: 12.5px 0;
  }
  .section-container {
    padding: calc(var(--layout-gap)*1.5) calc(var(--layout-gap)*1.25);
  }

  .section-text {
    text-align: center;
  }
}

@media print, screen and (min-width: 1170px) {
  .section-title {
    padding-left: calc(50% - 510px);
    padding-top: calc(var(--layout-gap)*1.25);
  }
  .section-container {
    padding: calc(var(--layout-gap)*1.5) 0;
  }
}