/*=======================================================================
TOP
=======================================================================*/
/*---------------------------------------------------------------------------
コンテナー（サイト全体を囲むブロック）
---------------------------------------------------------------------------*/
#container {
  height: 100%;
  display: flex; /*flexボックスを使う指定*/
  flex-direction: column; /*子要素を縦並びにする*/
  justify-content: space-between; /*並びかたの種類の指定*/
  /*max-width: 1800px; /*サイトの最大幅。これ以上広がらない。*/
  margin: 0 auto;
}

/*---------------------------------------------------------------------------
スライドショー
---------------------------------------------------------------------------*/
#mainimg-box {
  width: 100%;
  position: relative;
  z-index: -1;
  margin-bottom: 48px;
}
.slider {
  position: relative;
  overflow: hidden;
}
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.slide img {
  width: 100%;
  height: auto;
  display: block;
}
.slide.active {
  opacity: 1;
  z-index: 1;
}
.slide-text {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translate(-50%, -50%);
  color: #fff;
  font-weight: 600;
  line-height: 2;
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 3rem) /*24-48|320-1920*/;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
}
@media screen and (min-width: 601px) {
  .slide-text {
    text-align: center;
  }
}
@media screen and (max-width: 600px) {
  .slide {
    height: 80vh;
  }
  .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .slide:nth-child(2) img {
    object-position: left top;
  }
  .slide-text {
    width: 90%;
    word-wrap: break-word;
  }
}
/*---------------------------------------------------------------------------
強み
---------------------------------------------------------------------------*/
/*円タイトル*/
.circle_ti {
  width: 240px;
  height: 240px;
  margin: 0 auto 24px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #222;
  border-radius: 100vh;
  color: #fff;
}
/*強み*/
@media screen and (min-width: 961px) {
  .feautures div {
    width: 30%;
  }
}
@media screen and (max-width: 960px) {
  .feautures div {
    margin-bottom: 32px;
  }
}
/*=======================================================================
コンテンツ
=======================================================================*/
/*---------------------------------------------------------------------------
コンテンツブロック
---------------------------------------------------------------------------*/
#contents {
  flex: 1;
  padding: 0; /*コンテンツ内の余白*/
}
.content_wrap {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}
/*トップページ以外のコンテンツブロック*/
body:not(.home) #contents {
  padding-top: 0; /*上にとる余白。headerがfixedなので、ここの設定がないとheaderに重なってしまいます。*/
}
@media screen and (max-width: 600px) {
  /*トップページ以外のコンテンツブロック*/
  body:not(.home) #contents {
    padding-top: 0; /*上にとる余白*/
  }
}
/*---------------------------------------------------------------------------
box1設定（2カラム時のsubブロックでのみ使用）
---------------------------------------------------------------------------*/
/*ボックス全体の設定*/
.box1 {
  background: rgba(0, 0, 0, 0.05); /*背景色。0,0,0は黒の事で0.05は色が5%出た状態。*/
  padding: 10px; /*ボックス内の余白*/
  border-radius: 5px; /*角を丸くする指定*/
  margin-bottom: 1rem; /*ボックスの下に空けるスペース*/
}
@media screen and (min-width: 960px) {
  .box1 {
    position: sticky;
    top: 100px;
  }
}
/*box1内で使った場合、下のマージンをなくす*/
.sub .box1 .submenu {
  margin-bottom: 0;
}
/*---------------------------------------------------------------------------
.listブロック共通
---------------------------------------------------------------------------*/
.list {
  position: relative;
}
/*figure画像*/
.list figure {
  margin-bottom: 2rem;
}
/*---------------------------------------------------------------------------
3列タイプのボックス
---------------------------------------------------------------------------*/
/*ボックス1個あたり*/
.list-grid .list {
  margin-bottom: 1rem; /*ボックス同士の上下間に空けるスペース*/
  padding: 20px; /*ボックス内の余白*/
  background: #fff; /*背景色*/
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1); /*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.1は色が10%出た状態。*/
  position: relative;
}
.list-grid .list:has(a):hover,
.list-grid .list.has-link:hover {
  background: #28ab92;
  animation: opa1 0.6s;
}
.list-grid a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.list-grid .list figure {
  position: relative;
}
.coming-soon {
  position: absolute;
  background: rgba(255, 255, 255, 0.7);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 80%;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/*ボックス内のh4タグ*/
.list-grid .list h4 {
  margin: 0;
}
.list-grid .list h4 a {
  text-decoration: none;
}
.list-grid .list:has(a):hover h4,
.list-grid .list:has(a):hover .text p {
  color: #fff;
}
/*ボックス内のpタグ*/
.list-grid .list p {
  margin: 0 !important;
  font-size: 0.8em; /*文字サイズを80%に*/
  line-height: 1.5; /*行間を少し狭く*/
}
/*ボックス内のfigure画像*/
.list-grid .list figure {
  margin-bottom: 1rem; /*下に空けるスペース*/
}
@media screen and (min-width: 900px) {
  /*listブロック全体を囲むブロック*/
  .list-grid {
    display: flex; /*flexボックスを使う指定*/
    flex-wrap: wrap; /*折り返す指定*/
  }

  /*1個あたりのボックス設定*/
  .list-grid .list {
    width: 32%; /*幅。3列になります。*/
    margin-right: 2%; /*右側へのマージン。ボックス同士の左右の余白です。*/
  }

  /*3の倍数目のボックスの右側のマージンをなくす*/
  .list-grid .list:nth-of-type(3n) {
    margin-right: 0;
  }

  /*ボックス内のtextブロック*/
  .list-grid .list .text {
    flex: 1;
  }
}
/*---------------------------------------------------------------------------
お知らせ
---------------------------------------------------------------------------*/
.new {
  margin: 0;
  display: flex; /*flexボックスを使う指定*/
  flex-wrap: wrap; /*折り返す指定*/
  padding: 0 1rem; /*上下、左右へのボックス内の余白*/
}
/*日付(dt)、記事(dd)共通設定*/
.new dt,
.new dd {
  padding: 5px 0; /*上下、左右へのボックス内の余白*/
}
/*日付(dt)設定*/
.new dt {
  width: 8em; /*幅。8文字(em)分*/
}
/*日付の横のマーク（共通設定）*/
.new dt span {
  display: none; /*小さな端末では非表示にしておく。*/
}
/*記事(dd)設定*/
.new dd {
  width: calc(100% - 8em); /*「8em」は上の「.new dt」のwidthの値です*/
}
@media screen and (min-width: 900px) {
  /*日付(dt)設定*/
  .new dt {
    width: 14em; /*幅。14文字(em)分。アイコン分も含んだ幅にします。*/
    display: flex; /*flexボックスを使う指定*/
    justify-content: space-between; /*日付とアイコンをそれぞれ端に寄せる*/
  }
  /*日付の横のマーク（共通設定）*/
  .new dt span {
    display: inline-block; /*表示させる*/
    width: 7em; /*幅。7文字(em)分。*/
    background: #999; /*背景色*/
    color: #fff; /*文字色*/
    font-size: 0.8em; /*文字サイズを80%に。*/
    text-align: center; /*文字をセンタリング*/
    margin-right: 1em; /*アイコンの右側に空けるスペース*/
    align-self: flex-start; /*高さを間延びさせない指定*/
    line-height: 1.8; /*行間を少し狭く*/
    position: relative;
    top: 0.4em; /*上下の配置バランスの微調整*/
    border-radius: 2px; /*角を丸くする指定*/
  }
  /*icon-bg1設定。サンプルテンプレートでは「●●●重要」と書いてあるマーク*/
  .new dt span.icon-bg1 {
    background: #28ab92; /*背景色*/
  }
  /*icon-bg2設定。サンプルテンプレートでは「●●●サービス」と書いてあるマーク*/
  .new dt span.icon-bg2 {
    background: #555; /*背景色*/
  }
  /*記事(dd)設定*/
  .new dd {
    width: calc(100% - 14em); /*「14em」は上の「.new dt」のwidthの値です。*/
  }
}
/*---------------------------------------------------------------------------
FAQ
---------------------------------------------------------------------------*/
/*FAQボックス全体*/
.faq {
  padding: 0 1rem; /*上下、左右へのボックス内の余白*/
}
/*質問*/
.faq dt {
  border-radius: 3px; /*枠を角丸にする指定*/
  margin-bottom: 1rem; /*下に空けるスペース*/
  background: #fff; /*背景色*/
  border: 1px solid #ccc; /*枠線の幅、線種、色*/
  text-indent: -2rem; /*テキストのインデント。質問が複数行になった際に、テキストの冒頭を揃える為に設定しています。*/
  padding: 5px 1em 5px 3em; /*ボックス内の余白。ここを変更する場合、上のtext-indentも調整します。*/
}
/*アイコン（Font Awesome）*/
.faq dt::before {
  font-family: "Font Awesome 5 Free"; /*Font Awesomeを使う指定*/
  content: "\f059"; /*アイコンのコード*/
  color: #28ab92; /*アイコンの色*/
  padding-right: 1rem; /*アイコンとテキストとの間のスペース*/
}
/*回答*/
.faq dd {
  padding: 5px 1rem 30px 3rem; /*ボックス内の余白**/
}
/*opencloseを適用した要素のカーソル*/
.openclose {
  cursor: pointer; /*カーソルの形状。リンクと同じスタイルにしてクリックできると認識してもらう。*/
}
/*=======================================================================
商品ページ用
=======================================================================*/
.pointbox {
  position: relative;
  margin: 2em 0 4em 0;
  padding: 0.5em 1em;
  border: solid 3px #166355;
}
.pointbox .box-title {
  position: absolute;
  display: inline-block;
  top: -27px;
  left: -3px;
  padding: 2px 9px;
  height: 25px;
  line-height: 25px;
  font-size: 17px;
  background: #166355;
  color: #ffffff;
  font-weight: bold;
  border-radius: 5px 5px 0 0;
}
.pointbox p {
  padding: 0;
}
.item_outline div dt,
.item_outline li {
  display: flex;
  align-items: center;
}
.item_outline div dt {
  margin-bottom: 8px;
}
.item_outline li {
  margin-bottom: 24px;
}
.item_outline dt div,
.item_outline li div {
  width: 100%;
  margin-right: 16px;
  padding: 2px;
}
.item_outline dt,
.item_outline li,
.check_point dt,
.check_point div p {
  font-size: clamp(1.25rem, 1.2rem + 0.25vw, 1.5rem) /*20-24|320-1920*/;
  font-weight: 600;
}
.check_point dt,
.check_point div p {
  padding-left: 48px;
  margin-bottom: 16px;
}
.item_outline dt::before,
.item_outline li::before {
  font-size: 60px;
  font-style: italic;
  color: #28ab92;
  margin-right: 16px;
}
.item_outline div:first-of-type dt::before,
.item_outline li:first-child::before {
  content: "1";
}
.item_outline div:nth-of-type(2) dt::before,
.item_outline li:nth-child(2)::before {
  content: "2";
}
.item_outline div:nth-of-type(3) dt::before {
  content: "3";
}
.check_point dt::before,
.check_point div p::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f00c";
  margin-right: 10px;
  background: #28ab92;
  color: #fff;
  border-radius: 100vh;
  padding: 10px;
  margin-left: -48px;
}
.item_outline dd {
  padding-left: 54px;
}
/*---------------------------------------------------------------------------
3列タイプのボックスパターン2（商品ページ用）
---------------------------------------------------------------------------*/
.list-grid02 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.list-grid02 .list {
  border: 1px solid #ccc;
  padding: 24px;
  border-radius: 16px;
}
.list-grid02 .list h4 {
  font-size: clamp(1.25rem, 1.2rem + 0.25vw, 1.5rem) /*20-24|320-1920*/;
}
.list-grid02 .list div {
  background: rgba(40, 171, 146, 0.3);
  padding: 8px;
  margin-bottom: 8px;
}
.list-grid02 .list dl {
  margin-bottom: 8px;
}
.list-grid02 .list dt {
  color: #166355;
  font-weight: 600;
}
.list-grid02 .list p {
  margin: 0 !important;
}
@media (min-width: 1280px) {
  .list-grid02 {
    grid-template-columns: repeat(3, 1fr);
  }
}
/*---------------------------------------------------------------------------
区別アイコン装飾（商品ページ用）
---------------------------------------------------------------------------*/
.pattern_icon {
  display: flex;
  gap: 8px;
}
.pattern_icon li {
  padding: 4px;
  min-width: 60px;
  text-align: center;
}
.inner {
  background: darkorange;
  color: #fff;
}
.outer {
  background: deepskyblue;
  color: #fff;
}
/*---------------------------------------------------------------------------
階段形状（item02）
---------------------------------------------------------------------------*/
.shape {
  -webkit-display: flex;
  display: flex;
  flex-wrap: wrap;
}
.shape li {
  width: 48%;
  text-align: center;
  font-size: 87.5%;
}
@media (min-width: 1280px) {
  .shape li {
    width: auto;
    max-width: 200px;
  }
}