@charset "UTF-8";
@-ms-viewport {
  width: device-width; }

/*--------------------------------------------------------------------------
CSS　カスタム設定(style.css)ver.1 2022.10.05
--------------------------------------------------------------------------*/
/*■■■■■■ 基本設定 ■■■■■■■*/
/*■■■■■■ loading ■■■■■■■*/
#loading {
  width: 100vw;
  height: 100vh;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  background-color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999; }
  #loading img {
    margin: auto; }

.loaded {
  opacity: 0;
  visibility: hidden; }

/*■■■■■■ fadein ■■■■■■■*/
.fade-in {
  opacity: 0;
  -webkit-transition-duration: 1000ms;
  -o-transition-duration: 1000ms;
  transition-duration: 1000ms; }

.fade-in-up {
  -webkit-transform: translate(0, 60px);
  -ms-transform: translate(0, 60px);
  transform: translate(0, 60px); }

.fade-in-down {
  -webkit-transform: translate(0, -60px);
  -ms-transform: translate(0, -60px);
  transform: translate(0, -60px); }

.fade-in-left {
  -webkit-transform: translate(-60px, 0);
  -ms-transform: translate(-60px, 0);
  transform: translate(-60px, 0); }

.fade-in-right {
  -webkit-transform: translate(60px, 0);
  -ms-transform: translate(60px, 0);
  transform: translate(60px, 0); }

.scroll-in {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0); }

/*■■■■■■ 主要タグ設定 ■■■■■■■*/
a:link {
  color: #222;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s; }

a:visited {
  color: #222;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s; }

a:hover, a:active {
  color: #009fe9;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s; }

/*■■■■■■ 汎用設定 ■■■■■■■*/
.bg-main {
  background-color: #d1d8e5; }

.bg-sub {
  background-color: #009fe9; }

.relative-box {
  position: relative; }

/*■■■■■■ HEADER ■■■■■■■*/
header {
  width: 100%;
  background: -webkit-linear-gradient(45deg, #00a0e9, #7ecef4);
  background: -o-linear-gradient(45deg, #00a0e9, #7ecef4);
  background: linear-gradient(45deg, #00a0e9, #7ecef4);
  border-bottom: 2px solid #FFF;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 30; }
  header h1 {
    line-height: 0; }
    header h1 br {
      line-height: 0; }

.header-block {
  padding: 10px 0; }

.logo-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: left;
  -ms-flex-pack: left;
  justify-content: left;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }
  .logo-box img {
    margin-right: 15px;
    width: 88px; }

a.header-read:link, a.header-read:visited {
  color: #FFF;
  opacity: 1.0; }

a.header-read:hover, a.header-read:active {
  color: #FFF;
  opacity: 0.8; }

.header-read {
  font-size: 1.6rem;
  line-height: 1.4;
  color: #FFF;
  font-weight: bold; }

.contact-info-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: right;
  -ms-flex-pack: right;
  justify-content: right;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }

.bu-contact {
  margin: auto 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 230px;
  height: 46px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }

a.bu-contact:link, a.bu-contact:visited, a.bu-contact:hover, a.bu-contact:active {
  color: #FFF;
  font-weight: bold;
  font-size: 1.5rem; }

.color-catalog {
  background-color: #FFF; }

a:link.color-catalog, a:visited.color-catalog {
  background-color: #FFF;
  color: #00a0e9; }

a:hover.color-catalog, a:active.color-catalog {
  background-color: #e4f8fe;
  color: #00a0e9; }

.color-yen {
  background-color: #ffbe00; }

a:link.color-yen, a:visited.color-yen {
  background-color: #ffbe00; }

a:hover.color-yen, a:active.color-yen {
  background-color: #fbad04; }

/*■■■■■■ FOOTER section(4) ■■■■■■■*/
.section4-block {
  padding: 0;
  background: -webkit-linear-gradient(45deg, #7ecef4, #00a0e9);
  background: -o-linear-gradient(45deg, #7ecef4, #00a0e9);
  background: linear-gradient(45deg, #7ecef4, #00a0e9);
  color: #FFF; }

.ti-name {
  font-family: "Helvetica Neue",
 Arial,
 "Hiragino Kaku Gothic ProN",
 "Hiragino Sans",
 Meiryo,
 sans-serif;
  font-size: 6.5rem;
  line-height: 1.2;
  font-weight: bold; }
  .ti-name small {
    padding-left: 1.5rem;
    display: block;
    font-size: 2.3rem;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: normal; }

/*■■■■■■■ トップに戻るボタン ■■■■■■*/
.pagetop {
  cursor: pointer;
  position: fixed;
  right: 20px;
  bottom: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 30px;
  z-index: 1;
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
  background: #FFF;
  border: 1px solid #009fe9;
  /*   デフォルトは非表示 */
  opacity: 0; }

.pagetop:hover {
  -webkit-box-shadow: 0 0 10px #009fe9;
  box-shadow: 0 0 10px #009fe9; }

/*footerまでスクロールしたら消す*/
.is-hidden {
  display: none; }

/*===============================
■■　スマホ用　■■
===============================*/
/*------------(XS)------------*/
@media (min-width: 320px) {
  /*HEADER*/
  header {
    width: 100%;
    overflow: hidden; }
  .header-block {
    padding: 10px 0 0; }
  .logo-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: left;
    -ms-flex-pack: left;
    justify-content: left; }
    .logo-box img {
      margin-left: 15px;
      width: 70px; }
  .header-read {
    display: inline-block;
    font-size: 3vw; }
  .contact-info-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  header .bu-contact {
    margin: 10px auto 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 50%;
    height: 36px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  header a.bu-contact:link, header a.bu-contact:visited, header a.bu-contact:hover, header a.bu-contact:active {
    font-size: 1rem; }
  .dot-catalog {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  .dot-catalog:before {
    margin-right: 4px;
    content: "";
    display: inline-block;
    width: 25px;
    height: 17px;
    background: url(../images/common/dot-catalog.png) left center no-repeat;
    background-size: contain; }
  .dot-yen {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  .dot-yen:before {
    margin-right: 5px;
    content: "";
    display: inline-block;
    width: 23px;
    height: 23px;
    background: url(../images/common/dot-yen.png) left center no-repeat;
    background-size: contain; }
  .dot-mail {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  .dot-mail:before {
    margin-right: 5px;
    content: "";
    display: inline-block;
    width: 23px;
    height: 23px;
    background: url(../images/common/dot-mail.png) left center no-repeat;
    background-size: contain; }
  /* FOOTER section(4)*/
  .section4-block {
    padding: 40px 0 20px; }
  /*グリッドレイアウト A*/
  .grid-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    width: auto; }
  .grid-item_a {
    width: 100%; }
  .grid-item_b {
    margin: 30px 0;
    width: auto; }
  .grid-item_c {
    width: 100%; }
    .grid-item_c img {
      margin-top: -10px;
      max-width: 140px;
      width: auto; }
  /*---section(4)---*/
  .section4-block {
    padding: 0;
    margin: 0;
    line-height: 0;
    font-size: 0; }
    .section4-block .col-xs-12, .section4-block col-sm-12 {
      padding: 0; }
  .ti-name {
    font-size: 12vw;
    line-height: 1.2; }
    .ti-name small {
      padding-left: 3rem;
      font-size: 4.2vw;
      text-align: left; }
  .grid-container {
    margin-bottom: 0; }
    .grid-container .grid-item_b {
      margin: 30px 0 0;
      width: 100%; }
    .grid-container .grid-item_c {
      margin-top: -30px; }
  .foot-bt-box {
    margin: 0;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: column;
    flex-wrap: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
    .foot-bt-box a.bu-contact {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      width: 50%;
      margin: 0; }
    .foot-bt-box a.bu-contact:link, .foot-bt-box a.bu-contact:visited, .foot-bt-box a.bu-contact:hover, .foot-bt-box a.bu-contact:active {
      font-size: 1rem; }
  /*-- トップに戻るボタン --*/
  .pagetop {
    display: none; } }

/*------------(SM)------------*/
@media (min-width: 567px) {
  /*HEADER*/
  .header-block {
    padding: 10px 0 0; }
  .logo-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: left;
    -ms-flex-pack: left;
    justify-content: left; }
  .header-read {
    display: inline-block;
    font-size: 1.4rem; }
  .contact-info-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  header .bu-contact {
    margin: 10px 0 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 50%;
    height: 36px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  header a.bu-contact:link, header a.bu-contact:visited, header a.bu-contact:hover, header a.bu-contact:active {
    font-size: 1.2rem; }
  /*FOOTER  section(4)グリッドレイアウト A*/
  .section4-block {
    padding: 60px 0 0; }
  .grid-container {
    margin: auto 0 0;
    width: 100%;
    display: -ms-grid;
    display: grid;
    justify-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    place-items: center;
    -ms-grid-rows: 140px 38px;
    grid-template-rows: 140px 38px;
    -ms-grid-columns: 70% 30%;
    grid-template-columns: 70% 30%; }
  .grid-item_a {
    margin: -10px auto auto;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1/2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-column: 1/2;
    text-align: right; }
    .grid-item_a h2 {
      margin-right: 10px; }
  .grid-item_b {
    margin: 0;
    -ms-grid-row: 2;
    grid-row: 2/2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1/3; }
  .grid-item_c {
    margin: auto;
    -webkit-transform: translate(0, -50px);
    -ms-transform: translate(0, -50px);
    transform: translate(0, -50px);
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1/2;
    -ms-grid-column: 2;
    grid-column: 2/2;
    text-align: left; }
    .grid-item_c img {
      margin-left: 10px;
      width: 120px; }
  /*---section(4)---*/
  .ti-name {
    font-size: 5.4rem;
    line-height: 1.2; }
    .ti-name small {
      padding-left: 3.5rem;
      font-size: 1.9rem; }
  .foot-bt-box {
    width: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    .foot-bt-box .bu-contact {
      margin: 5px 5px 0 5px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      max-width: 50%;
      height: 36px;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center; }
    .foot-bt-box a.bu-contact:link, .foot-bt-box a.bu-contact:visited, .foot-bt-box a.bu-contact:hover, .foot-bt-box a.bu-contact:active {
      font-size: 1.2rem; } }

/*------------(MD)------------*/
@media (min-width: 768px) {
  /*HEADER*/
  .header-block {
    padding: 10px; }
  .logo-box img {
    margin-left: auto;
    width: 100px; }
  .header-read {
    font-size: 1rem; }
  .contact-info-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  header .bu-contact {
    margin: auto 5px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-width: 200px;
    height: 46px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  header a.bu-contact:link, header a.bu-contact:visited, header a.bu-contact:hover, header a.bu-contact:active {
    font-size: 1.3rem; }
  .dot-catalog {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  .dot-catalog:before {
    margin-right: 4px;
    content: "";
    display: inline-block;
    width: 25px;
    height: 17px;
    background: url(../images/common/dot-catalog.png) left center no-repeat;
    background-size: contain; }
  .dot-yen {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  .dot-yen:before {
    margin-right: 4px;
    content: "";
    display: inline-block;
    width: 23px;
    height: 23px;
    background: url(../images/common/dot-yen.png) left center no-repeat;
    background-size: contain; }
  .dot-mail {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  .dot-mail:before {
    margin-right: 4px;
    content: "";
    display: inline-block;
    width: 23px;
    height: 23px;
    background: url(../images/common/dot-mail.png) left center no-repeat;
    background-size: contain; }
  /* FOOTER section(4)グリッドレイアウト A (MD)*/
  .section4-block {
    padding: 0 0 30px; }
  .grid-container {
    margin: auto;
    width: 680px;
    display: -ms-grid;
    display: grid;
    justify-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    place-items: center;
    -ms-grid-rows: 180px 40px;
    grid-template-rows: 180px 40px;
    -ms-grid-columns: 500px 180px;
    grid-template-columns: 500px 180px; }
    .grid-container .grid-item_a {
      margin: 20px auto auto;
      -ms-grid-row: 1;
      -ms-grid-row-span: 1;
      grid-row: 1/2;
      -ms-grid-column: 1;
      -ms-grid-column-span: 1;
      grid-column: 1/2; }
      .grid-container .grid-item_a h2 {
        text-align: center; }
    .grid-container .grid-item_b {
      margin: 0 0 30px;
      -ms-grid-row: 2;
      grid-row: 2/2;
      -ms-grid-column: 1;
      -ms-grid-column-span: 1;
      grid-column: 1/2; }
    .grid-container .grid-item_c {
      -webkit-transform: translate(0, -20px);
      -ms-transform: translate(0, -20px);
      transform: translate(0, -20px);
      margin: auto;
      -ms-grid-row: 1;
      -ms-grid-row-span: 1;
      grid-row: 1/2;
      -ms-grid-column: 2;
      grid-column: 2/2; }
  .ti-name {
    font-size: 6.5rem;
    line-height: 1.2; }
    .ti-name small {
      padding-left: 1.5rem;
      font-size: 2.3rem; }
  .foot-bt-box {
    margin: 0;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: column;
    flex-wrap: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
    .foot-bt-box a.bu-contact {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      max-width: 220px;
      margin: 0 5px; }
    .foot-bt-box a.bu-contact:link, .foot-bt-box a.bu-contact:visited, .foot-bt-box a.bu-contact:hover, .foot-bt-box a.bu-contact:active {
      font-size: 1.3rem; }
  /*-- トップに戻るボタン --*/
  .pagetop {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; } }

/*------------(LG)------------*/
@media (min-width: 1024px) {
  /*HEADER*/
  .header-block {
    padding: 10px 0; }
  .logo-box img {
    margin-left: 10px; }
  .header-read {
    font-size: 1.5rem; }
  .contact-info-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: right;
    -ms-flex-pack: right;
    justify-content: right;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  header .bu-contact {
    margin: auto 5px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-width: 230px;
    height: 46px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  header a.bu-contact:link, header a.bu-contact:visited, header a.bu-contact:hover, header a.bu-contact:active {
    font-size: 1.5rem; } }

/*------------(XL)------------*/
/*------------(iphone5/SE)------------*/
@media (min-width: 320px) and (max-width: 374px) {
  /*---section(4)---*/
  .ti-name {
    font-size: 12vw;
    line-height: 1.2; }
    .ti-name small {
      padding-left: 2.5rem;
      font-size: 4.2vw; }
  .grid-item_c img {
    margin-top: -10px;
    max-width: 120px;
    width: auto; }
  .foot-bt-box a.bu-contact:link, .foot-bt-box a.bu-contact:visited, .foot-bt-box a.bu-contact:hover, .foot-bt-box a.bu-contact:active {
    font-size: 1.1rem; } }