<!--#include virtual="_ssl.shtml" -->
              

                <!--#config timefmt="%Y.%m.%d %H:%M:%S %Z" -->
                
今日の日付：<!--#echo var="DATE_LOCAL" -->
              

                Options +Includes
                AddHandler server-parsed .html
              

//Font Size 05...50
$no: "";
@for $i from 5 through 50 {
  // Font Size rem .fs-16 16px = 1rem
  @if $i < 10 {
    $no: "0#{$i}";
  } @else {
    $no: $i;
  }
  .fs-#{$no} {
    font-size: #{px-rem($i)};
  }
}
              

//Responsive Font Size SP and DP
// .fs[10-11]...fs[10-50]
// .fs[11-12]...fs[11-50]
// ...
// .fs[29-30]...fs[29-50]
// .fs[30-31]...fs[30-50]
$fontsize-xs-small: 10;
$fontsize-xs-large: 30;
[class^="fs\["],
[class*=" fs\["]{
  font-size: var(--Artpro-fs);
}
@for $fs from $fontsize-xs-small through $fontsize-xs-large {
  [class*="fs\[#{$fs}-"]{
    --Artpro-fs: #{px-rem($fs)};
  }
}
$fontsize-sm-small: 11;
$fontsize-sm-large: 50;
@include media-breakpoint-up(sm) {
  @for $fs from $fontsize-sm-small through $fontsize-sm-large {
    [class*="fs\["][class*="-#{$fs}\]"]{
      --Artpro-fs: #{px-rem($fs)};
    }
  }
}
              

                .lh-none{
                  line-height: 0;
                }
                // 行間 1...5
                @for $i from 10 through 50 {
                  // .lh-20 line-height: 2
                  .lh-#{$i} {
                    line-height: #{math.div($i, 10)};
                  }
                }
                .lh-season{
                  line-height: calc(1em + #{math.div(10em, $font-size-root-num)});
                }
              

                //文字間
                .ls-none{
                  letter-spacing: 0;
                }
                //letter-spacing 0010...0300
                $no: "";
                @for $i from 1 through 30 {
                  //10 毎
                  $i: $i * 10;
                  //ゼロパディング
                  @if $i < 100 {
                    $no: "00#{$i}";
                  } @else if $i < 1000{
                    $no: "0#{$i}";
                  } @else {
                    $no: "#{$i}";
                  }
                  .ls-#{$no}{
                    letter-spacing: #{math.div($i, 1000)}em !important;
                  }
                }
              

                ::selection {
                  background-color: mix($default-text, #fff, 70%);
                  color: #fff;
                }
              

                .js-deviceTel-no{
                  a[href^="tel:"] {
                    pointer-events: none;
                  }
                }
              

                function deviceTel(){
                  return (userAgent.indexOf("iPhone") > 0 || userAgent.indexOf("Android") > 0) ? true : false;
                }
                document.addEventListener("DOMContentLoaded", () => {
                  if (deviceTel()){
                    init_body.classList.remove("js-deviceTel-no");
                  } else {
                    init_body.classList.add("js-deviceTel-no");
                  }
                });
              

                <div class="d-flex gap-10">
                  <div class="w[100] bg-accent py-20"></div>
                  <div class="w[100] bg-main py-20 empty-none"></div>
                  <div class="w[100] bg-main py-20 empty-none">.empty-none</div>
                </div>
              

                .empty-none:empty{
                  display: none;
                }
              

                //style="--line-clamp: 2;" style="--line-clamp: 3;"
                //初期値 1
                .line-clamp{
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  overflow: hidden;
                  -webkit-line-clamp: var(--line-clamp, 1);
                }
              

                //style="--text-indent:0.5em;"
                //初期値 1em
                .text-indent{
                  text-indent: calc(var(--text-indent, 1em) * -1);
                  margin-left: var(--text-indent, 1em);
                  * {
                    text-indent: initial;
                  }
                }
              

                ul,
                ol{
                  --list-mt: 0;
                  li{
                    &:not(:first-child){
                      margin-top: var(--list-mt, 0);
                    }
                  }
                }
                .list-unstyled{
                  &.list-indent{
                    li{
                      //style="--text-indent:0.5em;"
                      //初期値 1em
                      text-indent: calc(var(--list-indent, 1em) * -1);
                      margin-left: var(--list-indent, 1em);
                      * {
                        text-indent: initial;
                      }
                    }
                  }
                }
              

// ****************************************************************
// デザインサイズ（デスクトップ用）
// ****************************************************************
//アートボードサイズ
$artboards-size:        1300px;//def 1300px
//アートボードの両端空き合計（padding）
$artboards-padding: 100px;//@100px = 50px + 50px
//コンテナーサイズ（.container）
$artboards-container:   1110px;//def 1110px
//コンテナー幅
//@1140px                 = @1110px              + @30px
$artboards-container-width: $artboards-container + $artboards-gutter;

// ****************************************************************
// デザインサイズ（スマホ用）
// ****************************************************************
//アートボードサイズ
$sp-artboards-size:     390px;//（iPhone SE @375px）（iPhone 12 @390px）def 390px
//アートボードの両端空き合計（padding）
$sp-artboards-padding:  20px;//@20px = 10px + 10px（アートボードサイズの両端空き）def 20px
//コンテナーサイズ（.container）仮想
//@340px                = @390px             - @30px            - @20px
$sp-artboards-container:  $sp-artboards-size - $artboards-gutter - $sp-artboards-padding;
//コンテナー幅
//@355px                     = @325px                  + @30px
$sp-artboards-container-width: $sp-artboards-container + $artboards-gutter;