@charset "UTF-8";
/**************************************************************
	original.css
	企業固有のスタイルを指定
***************************************************************/
/************************************************
//
//　foundation
//
************************************************/
:root {
  /* font-family */
  --ff-go: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --ff-lato: "Lato", sans-serif;
  --icon-font: "recop-iconfont";
  /* color */
  --color-white: #fff;
  --color-black: #000;
  --color-text: #333;
  --color-gray-01: #999;
  --color-gray-02: #888;
  --color-gray-03: #efefef;
  --color-gray-04: #ccc;
  --color-orange-01: #e2750f;
  --color-orange-02: #e9974b;
  --color-orange-03: #eb6700;
  --color-orange-04: #ce680f;
  --color-orange-05: #e57200;
  --color-orange-06: #e2450f;
  --color-yellow-01: #fff9e9;
  --color-peach-01: #fdf4ee;
  --color-green-01: #3a9e7f;
  --color-green-02: #009e92;
  /* opacity */
  --opacity: 0.7;
  /* contents-wrapper */
  --original-width-contents-wrapper: 1020px;
  --module-padding-contents-wrapper-sp: 10px;
  --module-padding-contents-wrapper-pc: 50px;
  /* scrollbar */
  --sb: 0;
}

body {
  -webkit-text-size-adjust: 100% !important;
  font-size: min(1rem, 4.2666666667vw);
  font-weight: 400;
  line-height: 1.875;
  color: #333;
}

:focus {
  outline-color: #333;
}

#header,
body#pagetop {
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

@font-face {
  font-family: recop-iconfont;
  src: url("option/font/recop-iconfont.eot?") format("eot"), url("option/font/recop-iconfont.woff") format("woff"), url("option/font/recop-iconfont.ttf") format("truetype");
}
@font-face {
  font-family: "Lato";
  font-weight: 500;
  font-style: normal;
  src: url("option/font/Lato-Medium.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Lato";
  font-weight: 700;
  font-style: normal;
  src: url("option/font/Lato-Bold.woff") format("woff");
  font-display: swap;
}
#header,
#footer,
#header *,
#footer * {
  box-sizing: border-box;
}

#header img,
#footer img {
  width: 100%;
  height: auto;
}

img[loading=lazy] {
  width: auto;
  max-width: 100%;
  height: auto;
}

/* regular contents reset
--------------------------------------- */
#header,
#header .content,
#header .content .free,
#main,
#main .content,
#main .content .free,
#footer .content,
#footer .content .free {
  width: auto;
}

div#container,
#footer {
  width: 100%;
}

/*コンテンツ幅設定用*/
#main .content {
  max-width: var(--original-width-contents-wrapper);
}

/*404エラー画面*/
#errorContent {
  box-sizing: border-box;
  max-width: var(--original-width-contents-wrapper);
  padding: 0 0.625rem;
  margin: 0 auto;
  font-size: 0.875rem;
}
#errorContent a {
  color: inherit;
}

@media only screen and (max-width: 767px) {
  #errorContent {
    padding: 0 0.9375rem;
  }
}
/************************************************
//
//　自由ヘッダー
//
************************************************/
.l-header {
  margin: 0 auto;
  max-width: var(--original-width-contents-wrapper);
  padding: 1.25rem 0.625rem;
}
.l-header__left {
  display: flex;
  flex-direction: column-reverse;
}
@media screen and (min-width: 768px) {
  .l-header__left {
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
  }
}
.l-header__logo {
  width: min(13.75rem, 58.6666666667vw);
  margin: auto;
  flex-shrink: 0;
}
@media screen and (min-width: 768px) {
  .l-header__logo {
    margin: 0 1.25rem 0 0;
  }
}
.l-header__logo-link {
  transition: opacity 0.3s ease;
  display: block;
}
.l-header__logo-link:hover {
  opacity: var(--opacity);
}
.l-header__text {
  font-size: 0.875rem;
  line-height: 2;
  margin-top: 0.625rem;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .l-header__text {
    margin-top: 0;
    text-align: right;
  }
}
.l-header__text span {
  display: inline-block;
}

/************************************************
//
//　自由フッター
//
************************************************/
#footer .content .free,
#footer {
  height: 6.1875rem;
}
@media screen and (min-width: 768px) {
  #footer .content .free,
  #footer {
    height: 5.875rem;
  }
}

#footer {
  min-height: auto;
}

#main .space {
  padding-bottom: 6.1875rem;
}
@media screen and (min-width: 768px) {
  #main .space {
    padding-bottom: 5.875rem;
  }
}

.l-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding-inline: 0.625rem;
  background-color: var(--color-orange-01);
  font-size: min(0.75rem, 3.2vw);
  line-height: 2;
  color: var(--color-white);
  text-align: center;
}
@media screen and (min-width: 768px) {
  .l-footer {
    padding-top: 0.5625rem;
  }
}
.l-footer p small {
  font-size: 100%;
}
.l-footer a:link, .l-footer a:active, .l-footer a:visited {
  color: var(--color-white) !important;
}