Information

© Link It Co.,ltd
Bab

2025 Bab SUMMER STYLING BOOK

<body>


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2025 summer styling</title>
    <meta name="description" content="">
    <!-- resrt css -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css">
    <!-- font -->
    <!-- en -->
    <link rel="stylesheet" href="https://use.typekit.net/ifz1dax.css">
    <!-- ja -->
    <script>
      (function(d) {
        var config = {
          kitId: 'cyb6wol',
          scriptTimeout: 3000,
          async: true
        },
        h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
      })(document);
    </script>
  

  
    <style>
      /* じわっと画像が表示される */
      .first-view-img{
           animation: fadeIn 4s ease 3s 1 normal;
        -webkit-animation: fadeIn 5s ease 0s 1 normal;
      }
      /* じわっと画像が表示される ---------　一度追加していたら不要*/
      @keyframes fadeIn { /*上のbody内で呼び出しているアニメーションと名前をそろえる*/
         0% {opacity: 0} /* 始め */
         100% {opacity: 1} /* 終わり */
      }
      /*古いブラウザ用　---------　一度追加していたら不要*/
      @-webkit-keyframes fadeIn {
         0% {opacity: 0}
         100% {opacity: 1}
      }
      /* じわっとここまで */

      /* 下からフェードイン */
      .js-fade-bottom {
        opacity: 0;
        visibility: hidden;
        transform: translateY(50px);
        transition: opacity 1s,visibility 1s, transform 1s;
      }
      .scroll {
        opacity: 1;
        visibility: visible;
        transform: translateY(0px);
      }
      /* 右からフェードイン */
      .js-fade-right {
        opacity: 0;
        visibility: hidden;
        transform: translateX(80px);
        transition: opacity 1s,visibility 1s, transform 1s;
      }
      .scroll {
        opacity: 1;
        visibility: visible;
        transform: translateX(0px);
      }
      /* 左からフェードイン */
      .js-fade-left {
        opacity: 0;
        visibility: hidden;
        transform: translateX(-80px);
        transition: opacity 1s,visibility 1s, transform 1s;
      }
      .scroll {
        opacity: 1;
        visibility: visible;
        transform: translateX(0px);
      }
        
      /* スライダー */
      /* .slide1 {
        margin: auto ;
        width: 100%;
      }
      .slick-img img {
        height: auto;
        width: 100%;
      } */

      /* フェードスライダー */
      .slide2 img {
        width: 100%;
        height: 100%;
      }

      @keyframes progressbar-anime {
        from {
          width: 0%;
        }
        to {
          width: 100%;
        }
      }
      /* スライダーここまで */

 

      /* 共通部分 */
       a{
        text-decoration: none;
      }
      li{
        list-style: none;
      }
      img{
        width: 100%;
        display: block;
        margin: auto;
      }
      body{
        margin: auto;
      }
      hr{
        width: 80%;
        margin: 20% auto !important;
      }
      /* 共通部分ここまで */

      /* ファーストビュー */
      .first-view-img{
           animation: fadeIn 4s ease 3s 1 normal;
        -webkit-animation: fadeIn 5s ease 0s 1 normal;
      }
      /* じわっと画像が表示される ---------　一度追加していたら不要*/
      @keyframes fadeIn { /*上のbody内で呼び出しているアニメーションと名前をそろえる*/
        0% {opacity: 0} /* 始め */
        100% {opacity: 1} /* 終わり */
      }
      /*古いブラウザ用　---------　一度追加していたら不要*/
      @-webkit-keyframes fadeIn {
        0% {opacity: 0}
        100% {opacity: 1}
      }
      /* ---------------------------- */
      .apple-detail-first{
        font-size: 1rem;
        text-align: center;
        padding: 20% 0;
        width: 80% !important;
        margin: auto;
      }
     
      /* ファーストビューここまで */

      /* apple */
      .style-number{
        font-size: 1.6rem;
        text-align: center;
        line-height: 1;
      }
      .style-number-span{
        font-size: 0.8rem;
        text-align: center;
      }
      .apple-slide2{
        width: 70%;
        margin: auto;
        padding: 8% 0;
      }
      .apple-detail{
        font-size: 1rem;
        text-align: center;
        padding-bottom: 10%;
        width: 80%;
        margin: auto;
      }
      a{
        text-decoration: underline;
        line-height: 1.8;
      }
      a:hover{
        color: #a1a1a1;
        border-bottom: 1px solid #a1a1a1;
      }
      .fruit-link-apple{
        padding: 0 0 0% 15% ;
      }
      /* appleここまで */

      .last-space{
        padding: 20% !important;
      }
      
      

      /* 言語 */
      .en{
        font-family: "amiri", sans-serif;
        font-style: normal;
      }
      .ja{
        font-family: "biz-udmincho", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 100%;
        text-align: center;
        font-size: 0.8rem;
      }
      /* 言語ここまで */

 

      /*　調整付けたし */
      .link, .prose a:not(.h1,.h2,.h3,.h4,.h5,.h6,.button,.link-faded,.link-faded-reverse) {
        text-underline: none;
        background: none;
      }
      .prose :is(.link,img) {
        display: block;
      }
      .prose :is(ol,ul) {
       display: flex;
       margin: auto;
      }
      .section-header{
        display: none;
      }
      .border{
        border-width: 0px;
      }
      .link, .prose a:not(.info-sub-title,.info-paragraph,.remind-paragraph,.h4,.h5,.h6,.button,.link-faded,.link-faded-reverse) {
        background: none;
      }
      .prose :where(:not(meta,span)+*) {
        margin-block-start: 0rem;
      }
      body{
        --background: none;
      }
      @media screen and (min-width: 1000px) {
        .prose:not(.prose--tight) :where(:not(meta,span)+*) {
          margin-block-start: 0rem;
        }
      }
      .prose :is(p img:not([style*=float]):only-child,div img:not([style*=float]):only-child,figure,video,object,blockquote,table) {
        margin-block: none;
      }
      .prose :is(ol,ul) {
        row-gap: none;
        display: none;
      }
      .prose :is(p img:not([style*=float]):only-child,div img:not([style*=float]):only-child,figure,video,object,blockquote,table) {
        margin-block: 0rem;
      }
      .h2{
        display: none;
      }


      @media screen and (max-width: 600px) {
      }

    </style>

    <main>
      <section class="first-view-box">
        <img class="first-view-img" src="https://cdn.shopify.com/s/files/1/0688/8243/2288/files/sns_9de6c506-d4b6-4dc1-a244-c8e403fc92a9.jpg?v=1746086113" alt="2025 summer styling">
        <div class="apple-detail-first ja js-fade-bottom ">
          Babが提案する今から取り入れたい、夏のコーディネート。コーディネートで存分にこの夏を楽しんで
        </div>
      </section>


      <!-- 1 クロシェ -->
      <div class="apple">

        <div class="style-number en js-fade-bottom">
          STYLE.1 <br>
          <span class="style-number-span en">
            Bab SUMMER STYLING
          </span>
        </div>

        <!-- スライド -->
        <div class="slide2 apple-slide2 js-fade-bottom">
          <img src="https://cdn.shopify.com/s/files/1/0688/8243/2288/files/5410282_050_09_de7306ed-5623-457a-a1c0-0434057a1bb4.jpg?v=1746082018" alt="2025 summer styling">
          <img src="https://cdn.shopify.com/s/files/1/0688/8243/2288/files/5410282_050_01_3c9ddbb9-c66b-4d84-a211-27868ea86ad1.jpg?v=1746082019" alt="2025 summer styling">
          <img src="https://cdn.shopify.com/s/files/1/0688/8243/2288/files/5410282_050_07_8f24d5d2-670e-4188-8a39-723ab7ee693a.jpg?v=1746086098" alt="2025 summer styling">
        </div>

        <!-- コメント -->
        <div class="apple-detail ja js-fade-bottom">
          ハッとするような、ニュアンスブルーが目を惹くクロシェワンピース。
          コットンクロシェ素材は1つは持っておきたいアイテム！
        </div>

        <!-- 商品リンク -->
        <div class="fruit-link fruit-link-apple js-fade-bottom">
          <a class="en" href="https://www.boujeloud.com/products/5410282">
            one piece _ ¥7,700
          </a>
        </div>
      </div>

      <hr class="js-fade-bottom">
      

      <!-- 2ドッキングトップス -->
      <div class="apple">

        <div class="style-number en js-fade-bottom">
          STYLE.2 <br>
          <span class="style-number-span en">
            Bab SUMMER STYLING
          </span>
        </div>

        <!-- スライド -->
        <div class="slide2 apple-slide2 js-fade-bottom">
          <img src="https://cdn.shopify.com/s/files/1/0688/8243/2288/files/5521112_002_19.jpg?v=1746082019" alt="2025 summer styling">
          <img src="https://cdn.shopify.com/s/files/1/0688/8243/2288/files/5521112_002_24.jpg?v=1746086099" alt="2025 summer styling">
          <img src="https://cdn.shopify.com/s/files/1/0688/8243/2288/files/5521112_002_20.jpg?v=1746082019" alt="2025 summer styling">
          <img src="https://cdn.shopify.com/s/files/1/0688/8243/2288/files/5521112_002_17.jpg?v=1746086098" alt="2025 summer styling">
        </div>

        <!-- コメント -->
        <div class="apple-detail ja js-fade-bottom">
          タンクトップのフェイクレイヤードトップスが今年らしい一枚。
          ベーシックカラーには、上品な光沢感が特徴的なメタリックスカートを合わせてマンネリ防止に。
        </div>

        <!-- 商品リンク -->
        <div class="fruit-link fruit-link-apple js-fade-bottom">
          <a class="en" href="https://www.boujeloud.com/products/5521112?_pos=1&amp;_sid=2b78b9d77&amp;_ss=r">
            tops _ ¥4,400
          </a><br>
          <a class="en" href="https://www.boujeloud.com/products/7515032?_pos=1&amp;_sid=dd3917d20&amp;_ss=r">
            skirt _¥5,940
          </a>
          <!-- <p class="en">
            allin one _ coming soon
          </p> -->
        </div>
      </div>

      <hr class="js-fade-bottom">

      <!-- 3フリンジトップス -->
      <div class="apple">

        <div class="style-number en js-fade-bottom">
          STYLE.3 <br>
          <span class="style-number-span en">
            Bab SUMMER STYLING
          </span>
        </div>

        <!-- スライド -->
        <div class="slide2 apple-slide2 js-fade-bottom">
          <img src="https://cdn.shopify.com/s/files/1/0688/8243/2288/files/5511212_067_21.jpg?v=1746082018" alt="2025 summer styling">
          <img src="https://cdn.shopify.com/s/files/1/0688/8243/2288/files/5511212_067_20.jpg?v=1746082018" alt="2025 summer styling">
          <img src="https://cdn.shopify.com/s/files/1/0688/8243/2288/files/5511212_067_18.jpg?v=1746082017" alt="2025 summer styling">
          <img src="https://cdn.shopify.com/s/files/1/0688/8243/2288/files/5511212_067_19.jpg?v=1746082018" alt="2025 summer styling">
        </div>

        <!-- コメント -->
        <div class="apple-detail ja js-fade-bottom">
          着るだけでおしゃれ、リラックス、着映えるといえばこのベスト。
          オールシーズンで着れて、トレンド廃れしない秀逸品。
        </div>

        <!-- 商品リンク -->
        <div class="fruit-link fruit-link-apple js-fade-bottom">
          <a class="en" href="https://www.boujeloud.com/products/5511212">
            vest _ ¥4,950
          </a><br>
          <a class="en" href="https://www.boujeloud.com/products/5511152">
            pants _¥4,950
          </a>
          <!-- <p class="en">
            allin one _ coming soon
          </p> -->
        </div>
      </div>

      <hr class="js-fade-bottom">

      <!-- 4コードあうたー -->
      <div class="apple">

        <div class="style-number en js-fade-bottom">
          STYLE.4 <br>
          <span class="style-number-span en">
            Bab SUMMER STYLING
          </span>
        </div>

        <!-- スライド -->
        <div class="slide2 apple-slide2 js-fade-bottom">
          <img src="https://cdn.shopify.com/s/files/1/0688/8243/2288/files/7511022_080_10_c232b0cc-8f48-4e51-8cb4-2318c22fb234.jpg?v=1746082018" alt="2025 summer styling">
          <img src="https://cdn.shopify.com/s/files/1/0688/8243/2288/files/7511022_002_05_36716b5c-94aa-46f4-89f9-2ea37312a03b.jpg?v=1746082018" alt="2025 summer styling">
          <img src="https://cdn.shopify.com/s/files/1/0688/8243/2288/files/7511022_002_08_6320d1e8-fb4e-4f68-ba43-69e2e8476a32.jpg?v=1746082018" alt="2025 summer styling">
          <img src="https://cdn.shopify.com/s/files/1/0688/8243/2288/files/7511022_002_01_0abe76b8-7e4b-4f9a-8a1e-bb2ec8ef69ed.jpg?v=1746082018" alt="2025 summer styling">
        </div>

        <!-- コメント -->
        <div class="apple-detail ja js-fade-bottom">
          熱い夏にも冷房対策の羽織り欠かせない！
          トレンドのテープジャガードが贅沢にあしらわれたカーディガン。
          隙間から見えるインナーのカラーで気分を変えて楽しんで
        </div>

        <!-- 商品リンク -->
        <div class="fruit-link fruit-link-apple js-fade-bottom">
          <a class="en" href="https://www.boujeloud.com/products/7511022?_pos=1&amp;_sid=442fc8105&amp;_ss=r&amp;sci_pk=83">
            outer _ ¥6,930
          </a><br>
          <a class="en" href="https://www.boujeloud.com/products/5520112?_pos=1&amp;_sid=16dab9073&amp;_ss=r&amp;sci_pk=83">
            tank tops _¥2,970
          </a><br>
          <a class="en" href="https://www.boujeloud.com/products/5521022?_pos=1&amp;_sid=a86c1ac4b&amp;_ss=r&amp;sci_pk=83">
            pants _¥6,270
          </a>
        </div>
      </div>

      <hr class="js-fade-bottom">

      <!-- 5インド綿 -->
      <div class="apple">

        <div class="style-number en js-fade-bottom">
          STYLE.5 <br>
          <span class="style-number-span en">
            Bab SUMMER STYLING
          </span>
        </div>

        <!-- スライド -->
        <div class="slide2 apple-slide2 js-fade-bottom">
          <img src="https://cdn.shopify.com/s/files/1/0688/8243/2288/files/5520042_080_27_8c158e05-7ee4-407f-a48c-872fd7a8725a.jpg?v=1746082018" alt="2025 summer styling">
          <img src="https://cdn.shopify.com/s/files/1/0688/8243/2288/files/5520042_080_01_99c66c5a-ef03-4bd5-9cf4-090240e267ec.jpg?v=1746082018" alt="2025 summer styling">
          <img src="https://cdn.shopify.com/s/files/1/0688/8243/2288/files/5520042_080_07_f3fe90ac-b76b-4918-8313-6eef2914a723.jpg?v=1746082018" alt="2025 summer styling">
        </div>

        <!-- コメント -->
        <div class="apple-detail ja js-fade-bottom">
          胸元に施された刺繍が魅力的なワンピース。
          全体的にゆったりとしたシルエットでリラックス感がありつつ女性らしい雰囲気に。
        </div>

        <!-- 商品リンク -->
        <div class="fruit-link fruit-link-apple js-fade-bottom">
          <a class="en" href="https://babshowroom.com/products/5520042">
            one piece _ ¥6,930
          </a><br>
        </div>
      </div>

      <hr class="js-fade-bottom">

      <!-- 6ペプラムクロシェ -->
      <div class="apple">

        <div class="style-number en js-fade-bottom">
          STYLE.6 <br>
          <span class="style-number-span en">
            Bab SUMMER STYLING
          </span>
        </div>

        <!-- スライド -->
        <div class="slide2 apple-slide2 js-fade-bottom">
          <img src="https://cdn.shopify.com/s/files/1/0688/8243/2288/files/5520082_002_02_d7c453af-c9ae-49a6-8f01-0fb4c0924711.jpg?v=1746082019" alt="2025 summer styling">
          <img src="https://cdn.shopify.com/s/files/1/0688/8243/2288/files/5520082_002_01_474f4f87-0349-4265-87f6-eed8b3693bf3.jpg?v=1746086097" alt="2025 summer styling">
          <img src="https://cdn.shopify.com/s/files/1/0688/8243/2288/files/5520082_002_10_74eff96e-c294-47bc-85a6-acca469af962.jpg?v=1746082019" alt="2025 summer styling">
          <img src="https://cdn.shopify.com/s/files/1/0688/8243/2288/files/5520082_002_03_b6f6348a-978f-4812-a771-aa854c7071ce.jpg?v=1746086098" alt="2025 summer styling">
        </div>

        <!-- コメント -->
        <div class="apple-detail ja js-fade-bottom">
          繊細なクロシェ編みに、女性らしいペプラムシルエットが映える主役級ワンピース。
          ペプラムが、体のラインを美しく見せつつ、可憐な印象をプラス。
        </div>

        <!-- 商品リンク -->
        <div class="fruit-link fruit-link-apple js-fade-bottom">
          <a class="en" href="https://babshowroom.com/products/5520082">
            one piece _ ¥7,700
          </a><br>
        </div>
      </div>

      <div class="last-space">
    
    


    
    
    <!-- jquery -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <!-- スライダー -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css">
    <!-- <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css"> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
        

    <!-- 下からフェードイン -->
    <script>
    $(function(){
      $(window).scroll(function (){
        $('.js-fade-bottom').each(function(){
          var pos = $(this).offset().top;
          var scroll = $(window).scrollTop();
          var windowHeight = $(window).height();
          if (scroll > pos - windowHeight + 100){
            $(this).addClass('scroll');
          }
        });
      });
    });
    // 右
    $(function(){
      $(window).scroll(function (){
        $('.js-fade-right').each(function(){
          var pos = $(this).offset().top;
          var scroll = $(window).scrollTop();
          var windowHeight = $(window).height();
          if (scroll > pos - windowHeight + 100){
            $(this).addClass('scroll');
          }
        });
      });
    });
    // 左
    $(function(){
      $(window).scroll(function (){
        $('.js-fade-left').each(function(){
          var pos = $(this).offset().top;
          var scroll = $(window).scrollTop();
          var windowHeight = $(window).height();
          if (scroll > pos - windowHeight + 100){
            $(this).addClass('scroll');
          }
        });
      });
    });
    </script>

    <!-- スライダー -->
    <script>
    //   $(function () {
    //     $(".slide1").slick({
    //       autoplay: true,
    //       dots: true,
    //     });
    //   });
    // </script>

    <!-- フェードスライダー -->
    <script>
      var $slide = $(".slide2")
      .slick({
        fade: true,
        speed: 1400,
        autoplaySpeed: 1500,
        arrows: false,
        autoplay: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        infinite: true
      });
    </script>


    <script>
      js/jquery.inview.min.js
    </script>
  
</div></main>
</body>