@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/
.loop-slider {
  display: flex;
  overflow: hidden;
  gap: 1.5rem; /* 画像間の余白を指定 */
}

.loop-slider .wp-block-group__inner-container,
.loop-slider .swell-block-columns {
  display: contents;
}

.loop-slider .swell-block-columns__inner {
  flex-wrap: nowrap;
  animation: infinity-scroll-left 60s infinite linear; /* アニメーションの時間を指定 */
}

.loop-slider .swell-block-column figure {
  width: 300px; /* 画像の横幅を指定（パソコン） */
  position: relative;
}

.loop-slider .swell-block-column figure::before {
  padding-top: 65%; /* 画像の縦横比を指定 */
  display: block;
  content: "";
}

.loop-slider .swell-block-column figure img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
}

@media screen and (max-width: 959px) {
  .loop-slider .swell-block-column figure {
    width: 200px; /* 画像の横幅を指定（スマホ） */
  }
}

@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}
/************************************
商品一覧ボックスシャドウ用
************************************/
.col-01 {
  border-radius: 3px;
  box-shadow: inset 0px 0px 1px 0px rgba(0, 0, 0, 0.25), inset 0px -3px 6px -2px rgba(0, 0, 0, 0.3);
}
/************************************
** ローディングアニメーション
************************************/
/* 画面全体の設定 */
#loader_wrap {
  z-index: 999;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  top: 0;
  background: #273357;
  pointer-events: none;
  transition: all 0.3s;
}
  .vertical-text00 {
  writing-mode: vertical-rl;
  margin: 0 auto;
  color: #fff;
}
  .vertical-title01 {
    writing-mode: vertical-rl;
    font-size: 250%;
    line-height: 3.5rem;
    margin-left: 50px;
  }
  .vertical-text01 {
    font-size: 100%;
    line-height: 2rem;
    margin-left: 50px;
    writing-mode: vertical-rl;
  }
  @media (min-width: 768px) {
  /* 縦書きテキスト */
.tate{
    height: 300px;
    display: flex;
    line-height: 2;
    letter-spacing: .25em;
    align-items: center;
    writing-mode: vertical-rl;
    width: 100%;
    text-orientation: upright;
  }
.tate_top{
    display: flex;
    line-height: 2;
    letter-spacing: .25em;
    align-items: center;
    writing-mode: vertical-rl;
    width: 100%;
    text-orientation: upright;
  }
.tate_top h2{
    margin-left: 40px;
    color: #fff;
}
.tate_ttl{
    display: flex;
    line-height: 2;
    letter-spacing: .25em;
    align-items: center;
    writing-mode: vertical-rl;
    width: 100%;
    text-orientation: upright;
  }
}
@media (max-width: 768px)  {
.col-reverse{
    flex-direction: column-reverse; 
}
#body_wrap{
    background-image: url(/wp-content/uploads/2024/07/bg1.jpg);
}
}
.wp-block-group{
  padding: 15px;
}