@charset "UTF-8";



body{

    overflow-x: hidden;

    background-color: var(--color-body);

}

/* ===== Scroll Animation ===== */

.fade-up {

    opacity: 0;

    transform: translateY(40px);

    transition: opacity 0.8s ease, transform 0.8s ease;

}



.fade-up.is-visible {

    opacity: 1;

    transform: translateY(0);

}



/* =========================

   TOP VIEW

========================= */

.top-view{

    position:relative;

    width:100%;

    padding-top:10vh;

}



/* =================================

   ビジュアル全体

================================= */



.hero-visual{

    width:92vw;

    height:90vh;



    margin:0 auto;



    display:flex;

    flex-direction:column;



    position:relative;

}



/* =================================

   写真80%

================================= */



.hero-photo{

    height:84%;

    position:relative;

    overflow:hidden;

}



.slider{

    width:100%;

    height:100%;

    position:relative;

}



.slide{

    position:absolute;

    inset:0;



    width:100%;

    height:100%;



    object-fit:cover;



    opacity:0;

    transition:.8s;

}



.slide.active{

    opacity:1;

}



/* =================================

   アクセント20%

================================= */

.hero-accent{

    height:16%;

    position:relative;



    background:url("../img/noise.webp");

    background-size:cover;

    background-position:center;

}



.hero-accent::before{

    content:"";

    position:absolute;

    inset:0;



    background:var(--color-primary);

    opacity:.7; /* 調整 */



    z-index:1;

}



.hero-accent > *{

    position:relative;

    z-index:2;

}

/* =================================

   コピー

================================= */



.hero-copy{

    position:absolute;



    left:60px;

    top:-25px;

    color: var(--color-text-white);

    z-index:10;

}





/* =================================

   SNS

================================= */



.top-sns{

    position:absolute;



    left:60px;

    bottom:25px;



    display:flex;

    gap:14px;

}



.top-sns a{

    width:42px;

    height:42px;



    display:flex;

    align-items:center;

    justify-content:center;

    transition:.3s;

}



.top-sns a:hover{

    transform:translateY(-4px);

    opacity:.7;

}



.top-sns img{

    width:44px;

    height:44px;

}



/* =================================

   縦英字

================================= */



.top-vertical-text{

    position:absolute;



    right:20px;

    top:55%;



    transform:translateY(-50%);



    writing-mode:vertical-rl;



    font-size:12px;

    letter-spacing:4px;



    color:var(--color-text);

}







.scroll-indicator{

    position:absolute;



    right:20px;

    bottom:10px;



    width:130px;

    height:130px;



    z-index:80;

}



/* 円文字 */



.scroll-text{

    width:100%;

    height:100%;



    animation:

    rotateScroll 14s linear infinite;

}



.scroll-text text{

    fill: var(--color-text-white);



    font-size:8px;

    letter-spacing:4px;

    font-weight: bold;

    text-transform:uppercase;

}



/* 真ん中矢印 */



.scroll-arrow{

    position:absolute;



    top:50%;

    left:50%;



    transform:

    translate(-50%,-50%);



    color: var(--color-text-white);



    font-size:22px;

    font-weight:300;



    animation:

    scrollBounce 1.8s ease-in-out infinite;

}



/* 回転 */



@keyframes rotateScroll{



    from{

        transform:rotate(0deg);

    }



    to{

        transform:rotate(360deg);

    }



}



/* 矢印 */



@keyframes scrollBounce{



    0%{

        transform:

        translate(-50%,-50%);

    }



    50%{

        transform:

        translate(-50%,-35%);

    }



    100%{

        transform:

        translate(-50%,-50%);

    }



}





/* =================================

   SP

================================= */



.sp{

    display:none;

}



@media(max-width:768px){



    .pc{

        display:none;

    }



    .sp{

        display:block;

    }



    .top-view{

        padding-top:90px;

    }



    .hero-visual{

        width:100%;

        height:auto;

    }



    .hero-photo{

        height:420px;

    }



    .hero-accent{

        height:150px;

    }



    .hero-copy{

        left:20px;

        top:-20px;

    }

    .hero-copy h1{

        font-size: 25px;

    }



    .hero-copy span{

        font-size:16px;

        padding:12px 18px;

    }



    .top-sns{

        left:20px;

        bottom:20px;

    }

    .top-sns a{

        width: 35px;

        height: 35px;

    }

.top-sns img{

    width:35px;

    height:35px;

    gap: 5px;

}

    .top-vertical-text{

        display:none;

    }

    .scroll-indicator{

    position:absolute;



    right:20px;

    bottom:10px;



    width:100px;

    height:100px;



    z-index:80;

}

}











/* =========================

   FEATURE（リニューアル）

========================= */

/* ==================================

FEATURE

================================== */



.feature{

    position:relative;

    padding:140px 20px;

    overflow:hidden;

}





.feature-header{

    max-width:800px;

    margin:0 auto 100px;

    text-align:center;

}



.feature-sub{

    display:inline-block;

    letter-spacing:.25em;

    font-size:16px;

    color: var(--color-primary);

    margin-bottom:15px;

}



.feature-header h2{

    font-size:45px;

    line-height:1;

    margin-bottom:25px;

    color: var(--color-neutral-light);

    letter-spacing:.08em;

}



.feature-header p{

    font-size:15px;

    line-height:2;

    color: var(--color-neutral-surface);

}



/* ===================== */



.feature-inner{

    max-width:1200px;

    margin:auto;

    display:flex;

    flex-direction:column;

    gap:80px;

}



/* ===================== */



.feature-item{

    display:flex;

    align-items:center;

    gap:60px;

    background: var(--color-text-white);

    border-radius:30px;

    padding:40px;

    box-shadow:

    0 20px 40px rgba(0,0,0,.04);

    transition:.4s;

}



.feature-item:hover{

    transform:translateY(-5px);

}



.feature-item:nth-child(even){

    flex-direction:row-reverse;

}



/* ===================== */

/* 写真 */

/* ===================== */



.feature-image{

    flex:1;

    position:relative;

}



.feature-image::before{

    content:"";

    position:absolute;

    inset:-10px;

    border:2px dashed var(--color-primary-light-50);

    border-radius:24px;

}



.feature-image img{

    width:100%;

    height:420px;

    object-fit:cover;

    border-radius:20px;

    display:block;

    transition:.5s;

}



.feature-item:hover img{

    transform:scale(1.04);

}



/* ===================== */

/* テキスト */

/* ===================== */



.feature-text{

    flex:1;

    position:relative;

}



.feature-number{

    display:inline-block;

    font-size:70px;

    font-weight:800;

    line-height:1;

    color: var(--color-primary-light-30);

    margin-bottom:10px;

}



.feature-tag{

    display:inline-block;

    padding:8px 16px;

    background: var(--color-primary);

    color: var(--color-text-white);

    border-radius:999px;

    font-size:15px;

    letter-spacing:.2em;

    margin-left:15px;

    transform:translateY(-18px);

}



.feature-text h3{

    font-size:34px;

    line-height:1.4;

    color: var(--color-neutral-light);

    margin-bottom:20px;

    position:relative;

}



.feature-text h3::after{

    content:"";

    display:block;

    width:80px;

    height:2px;

    background: var(--color-primary-light-50);

    margin-top:15px;

}



.feature-text p{

    font-size:15px;

    line-height:2;

    color: var(--color-neutral-surface);

}



/* ===================== */

/* SP */

/* ===================== */



@media(max-width:768px){



    .feature{

        padding:80px 20px;

    }



    .feature-header{

        margin-bottom:60px;

    }



    .feature-header h2{

        font-size:38px;

    }



    .feature-item{

        flex-direction:column;

        padding:25px;

        gap:25px;

    }



    .feature-item:nth-child(even){

        flex-direction:column;

    }



    .feature-image img{

        height:260px;

    }



    .feature-number{

        font-size:48px;

    }



    .feature-tag{

        margin-left:12px;

        transform:none;

    }



    .feature-text h3{

        font-size:24px;

    }



}



/* =========================

   SERVICE NEW

========================= */

/* ==================================

SERVICE

================================== */



.service-new{

    position:relative;

    padding:140px 20px;

    overflow:hidden;

}



/* 背景文字 */



.service-bg{

    position:absolute;

    top:60px;

    left:-40px;

    font-size:180px;

    font-weight:800;

    color: var(--color-secondary-light-30);

    line-height:1;

    pointer-events:none;

}



/* ================================== */



.service-wrap{

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:90px;

    align-items:center;

    position:relative;

    z-index:2;

}



/* ==================================

SLIDER

================================== */



.service-slider{

    position:relative;

    height:700px;

}



.service-slider::before{

    content:"";

    position:absolute;

    inset:-18px;

    border:2px dashed var(--color-secondary-light-50);

    border-radius:28px;

}



.service-slider img{

    position:absolute;

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:22px;

    opacity:0;

    transition:1s;

}



.service-slider img.active{

    opacity:1;

}



/* ==================================

CONTENT

================================== */



.service-sub{

    display:inline-block;

    margin-bottom:15px;

    font-size:12px;

    letter-spacing:.25em;

    color: var(--color-secondary);

}



.service-content h2{

    font-size:60px;

    line-height:1;

    margin-bottom:25px;

    color: var(--color-neutral-light);

}



.service-desc{

    font-size:15px;

    line-height:2;

    color: var(--color-neutral-surface);

    margin-bottom:50px;

}



/* ==================================

CARD

================================== */



.menu-card{

    display:flex;

    align-items:center;

    gap:25px;

    text-decoration:none;

    color:inherit;

    background:var(--color-text-white);

    padding:28px;

    margin-bottom:20px;

    border-radius:20px;

    border:1px solid var(--color-secondary-light-30);

    transition:.35s;

}



.menu-card:hover{

    transform:translateY(-6px);

    box-shadow:0 20px 40px rgba(0,0,0,.06);

}



.menu-number{

    min-width:70px;

    height:70px;

    border-radius:50%;

    background: var(--color-secondary);

    color: var(--color-text-white);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

    font-weight:700;

}



.menu-body{

    flex:1;

}



.menu-body h3{

    font-size:22px;

    color: var(--color-neutral-light);

    margin-bottom:10px;

}



.menu-body p{

    font-size:14px;

    line-height:1.8;

    color: var(--color-neutral-surface);

}



.menu-arrow{

    font-size:24px;

    color: var(--color-secondary-light-70);

    transition:.3s;

}



.menu-card:hover .menu-arrow{

    transform:translateX(6px);

}



/* ==================================

SP

================================== */



@media(max-width:768px){



    .service-new{

        padding:80px 20px;

    }



    .service-bg{

        font-size:90px;

        top:20px;

    }



    .service-wrap{

        grid-template-columns:1fr;

        gap:50px;

    }



    .service-visual{

        order:1;

    }



    .service-content{

        order:2;

    }



    .service-slider{

        height:320px;

    }



    .service-content h2{

        font-size:38px;

    }



    .menu-card{

        padding:20px;

        gap:15px;

    }



    .menu-number{

        min-width:55px;

        height:55px;

        font-size:16px;

    }



    .menu-body h3{

        font-size:18px;

    }



}





/* =========================

   全体

========================= */

.about-ceo{

  position:relative;

  padding:120px 0;

  background:var(--color-primary);

  overflow:hidden;

}



/* 中央レイアウト */

.about-inner{

  width:90%;

  max-width:1200px;

  margin:0 auto;



  display:flex;

  align-items:center;

  gap:80px;

}



/* =========================

   背景アクセント（でかい図形）

========================= */

.about-bg-accent{

  position:absolute;

  width:600px;

  height:600px;



  background:rgba(255,255,255,0.08);

  border-radius:60px;



  top:-150px;

  right:-100px;



  transform:rotate(15deg);

  z-index:0;

}



/* =========================

   画像

========================= */

.about-visual{

  flex:1;

  position:relative;

  z-index:2;

}



/* ★ここがデザインの肝 */

.about-visual img{

  width:100%;

  height:500px;

  object-fit:cover;



  border-radius:30px;



  /* ちょい傾ける */

  transform:rotate(-3deg);



  /* 影で浮かせる */

  box-shadow:0 30px 60px rgba(0,0,0,0.2);

}



/* 白のズレ背景（レイヤー） */

.about-visual::after{

  content:"";

  position:absolute;



  width:100%;

  height:100%;



  top:20px;

  left:-20px;



  border:2px solid rgba(255,255,255,0.4);

  border-radius:30px;



  z-index:-1;

}



/* =========================

   テキスト

========================= */

.about-content{

  flex:1;

  color:#fff;

  z-index:2;

}



/* ラベル */

.about-head{

  display:flex;

  align-items:center;

  gap:12px;

  margin-bottom:20px;

}



.about-label{

  font-size:12px;

  letter-spacing:0.2em;

  font-weight:600;



  background:#fff;

  color:var(--color-primary);



  padding:6px 12px;

  border-radius:6px;

}



.about-role{

  font-size:13px;

  color:rgba(255,255,255,0.7);

}



/* タイトル */

.about-name{

  font-size:40px;

  line-height:1.5;

  margin-bottom:25px;

  position:relative;

}



/* 下線アクセント */

.about-name::after{

  content:"";

  display:block;

  width:60px;

  height:3px;

  background:#fff;

  margin-top:15px;

  border-radius:10px;

}



/* テキスト */

.about-text{

  font-size:15px;

  line-height:2;

  color:rgba(255,255,255,0.85);

}



/* =========================

   レスポンシブ

========================= */

@media(max-width:768px){



  .about-inner{

    flex-direction:column;

    gap:40px;

  }



  .about-visual img{

    height:300px;

    transform:rotate(-2deg);

  }



  .about-name{

    font-size:28px;

  }



}





/* =========================

   全体

========================= */

.column{

  padding:140px 0 80px;

}



.column-header{

  text-align:center;

  margin-bottom:80px;

}



.column-header h2{

  font-size:48px;

  letter-spacing:0.1em;

  color:var(--color-neutral-light);

}



.column-header h5{

  font-size:25px;

  letter-spacing:0.1em;

  color:var(--color-primary);

}



/* =========================

   グリッド化

========================= */

.column-inner{

  width:90%;

  max-width:1200px;

  margin:0 auto;



  display:grid;

  grid-template-columns:repeat(3, 1fr);

  gap:40px;

}



/* =========================

   カード

========================= */

.column-item{

  background:#fff;

  border-radius:30px;

  overflow:hidden;

  transition:0.4s;



  box-shadow:0 10px 30px rgba(0,0,0,0.05);

  position:relative;

}



/* hoverで浮く */

.column-item:hover{

  transform:translateY(-15px);

  box-shadow:0 30px 60px rgba(0,0,0,0.1);

}



/* =========================

   画像

========================= */

.column-image{

  position:relative;

  height:220px;

  overflow:hidden;

}



/* ★ここがキモ */

.column-image img{

  width:110%;

  height:100%;

  object-fit:cover;



  transform:rotate(-3deg) scale(1.1);

  transition:0.6s;

}



/* ホバーで戻る */

.column-item:hover .column-image img{

  transform:rotate(0deg) scale(1.05);

}



/* 画像の上に薄いアクセント */

.column-image::after{

  content:"";

  position:absolute;

  inset:0;

  background:linear-gradient(to top, rgba(0,0,0,0.3), transparent);

}



/* =========================

   テキスト

========================= */

.column-body{

  padding:30px;

}



.column-name{

  font-size:22px;

  margin-bottom:10px;

  color:var(--color-primary);

  letter-spacing:0.05em;

}



/* 線アクセント */

.column-name::after{

  content:"";

  display:block;

  width:40px;

  height:3px;

  background:var(--color-primary);

  margin-top:10px;

  border-radius:10px;

  transition:0.3s;

}



.column-item:hover .column-name::after{

  width:60px;

}



.column-text{

  font-size:14px;

  line-height:1.8;

  color:#666;

  margin-top:15px;

}



/* =========================

   レスポンシブ

========================= */

@media(max-width:768px){



  .column{

    padding:80px 0 40px;

  }



  .column-inner{

    grid-template-columns:1fr;

  }



  .column-header h2{

    font-size:32px;

  }



}







/* ==================================

NEWS

================================== */



.news-section{

    position:relative;

    padding:140px 20px 50px;

    overflow:hidden;

}



/* 背景文字 */



.news-bg{

    position:absolute;

    right:-50px;

    top:30px;

    font-size:180px;

    font-weight:800;

    color: var(--color-primary-light-30);

    line-height:1;

    pointer-events:none;

}



/* ============================== */



.news-inner{

    max-width:1100px;

    margin:auto;

    position:relative;

    z-index:2;

}



/* ============================== */



.news-header{

    text-align:center;

    margin-bottom:80px;

}



.news-sub{

    display:inline-block;

    margin-bottom:15px;

    font-size:12px;

    letter-spacing:.3em;

    color: var(--color-primary);

}



.news-header h2{

    font-size:60px;

    color: var(--color-neutral-light);

    margin-bottom:20px;

}



.news-header p{

    color: var(--color-neutral-surface);

    line-height:2;

    max-width:600px;

    margin:auto;

}



/* ==============================

JOURNAL

============================== */



.journal-list{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}



/* ============================== */



.journal-card{

    display:block;

    text-decoration:none;

    color:inherit;

    background: var(--color-text-white);

    border-radius:24px;

    overflow:hidden;

    padding:35px;

    position:relative;

    transition:.4s;



    box-shadow:

    0 15px 35px rgba(0,0,0,.05);

}



.journal-card:hover{

    transform:translateY(-8px) rotate(-1deg);

}



/* メモ風ピン */



.journal-card::before{

    content:"";

    width:18px;

    height:18px;

    border-radius:50%;

    background: var(--color-primary-light-50);



    position:absolute;

    top:18px;

    right:18px;

}



/* ============================== */



.journal-date{

    margin-bottom:25px;

}



.day{

    display:block;

    font-size:58px;

    font-weight:800;

    line-height:1;

    color: var(--color-primary);

}



.month{

    display:block;

    margin-top:8px;

    font-size:12px;

    letter-spacing:.2em;

    color: var(--color-neutral-surface);

}



/* ============================== */



.journal-category{

    display:inline-block;

    padding:6px 14px;

    background: var(--color-primary);

    color: var(--color-text-white);

    border-radius:999px;

    font-size:11px;

    letter-spacing:.15em;

    margin-bottom:18px;

}



.journal-content h3{

    font-size:20px;

    line-height:1.7;

    color: var(--color-neutral-light);

    margin-bottom:15px;

}



.journal-content p{

    font-size:14px;

    line-height:1.9;

    color: var(--color-neutral-surface);

}



/* ============================== */



.news-footer{

    text-align:center;

    margin-top:60px;

}



.news-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:58px;

    padding:0 40px;

    border-radius:999px;



    background: var(--color-primary);

    color: var(--color-text-white);

    text-decoration:none;



    letter-spacing:.12em;



    transition:.3s;

}



.news-btn:hover{

    transform:translateY(-3px);

}



/* ==============================

SP

============================== */



@media(max-width:768px){



    .news-section{

        padding:90px 20px;

    }



    .news-bg{

        font-size:90px;

        top:20px;

        right:-20px;

    }



    .news-header{

        margin-bottom:50px;

    }



    .news-header h2{

        font-size:38px;

    }



    .journal-list{

        grid-template-columns:1fr;

        gap:20px;

    }



    .journal-card{

        padding:25px;

    }



    .day{

        font-size:42px;

    }



    .journal-content h3{

        font-size:18px;

    }



}

/* ==================================

BLOG

================================== */



.blog{

    position:relative;

    padding:140px 20px;

    background: var(--color-secondary-light-10);

    overflow:hidden;

}



/* 背景文字 */



.blog-bg{

    position:absolute;

    left:-20px;

    top:20px;

    font-size:180px;

    font-weight:800;

    color: var(--color-secondary-light-30);

    line-height:1;

    pointer-events:none;

}



/* ====================== */



.blog-header{

    text-align:center;

    margin-bottom:70px;

    position:relative;

    z-index:2;

}



.blog-sub{

    display:inline-block;

    margin-bottom:15px;

    font-size:12px;

    letter-spacing:.3em;

    color: var(--color-secondary-70);

}



.blog-header h2{

    font-size:60px;

    color: var(--color-neutral-light);

    margin-bottom:20px;

}



.blog-header p{

    max-width:600px;

    margin:auto;

    line-height:2;

    color:v var(--color-neutral-surface);

}



/* ====================== */



.blog-slider{

    overflow:hidden;

    max-width:1200px;

    margin:auto;

    position:relative;

    padding: 40px 0;

}



.blog-track{

    display:flex;

    transition:.6s;

}



.blog-group{

    min-width:100%;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}



/* ======================

CARD

====================== */



.story-card{

    display:block;

    text-decoration:none;

    color:inherit;

    background: var(--color-text-white);

    border-radius:24px;

    padding:18px;

    transition:.35s;

    box-shadow:0 15px 35px rgba(0,0,0,.05);

}



.story-card:hover{

    transform:translateY(-8px) rotate(-1deg);

}



/* ポラロイド風 */



.story-image{

    padding:10px;

    background: var(--color-text-white);

}



.story-image img{

    width:100%;

    height:260px;

    object-fit:cover;

    border-radius:14px;

    display:block;

}



/* ====================== */



.story-body{

    padding:15px 8px 8px;

}



.story-tag{

    display:inline-block;

    padding:6px 14px;

    border-radius:999px;

    background: var(--color-secondary-70);

    color: var(--color-text-white);

    font-size:11px;

    letter-spacing:.15em;

    margin-bottom:15px;

}



.story-body h3{

    font-size:20px;

    line-height:1.6;

    color: var(--color-neutral-light);

    margin-bottom:12px;

}



.story-body p{

    font-size:14px;

    line-height:1.9;

    color: var(--color-neutral-surface);

    margin-bottom:20px;

}



.story-date{

    font-size:12px;

    letter-spacing:.15em;

    color: var(--color-neutral-surface);

}



/* ======================

ARROW

====================== */



.blog-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    z-index:10;



    width:60px;

    height:60px;

    border:none;

    border-radius:50%;



    background: var(--color-text-white);

    color: var(--color-secondary-70);



    cursor:pointer;



    box-shadow:0 10px 25px rgba(0,0,0,.08);

    transition:.3s;

}



.blog-arrow:hover{

    transform:translateY(-50%) scale(1.08);

}



.blog-prev{

    left:30px;

}



.blog-next{

    right:30px;

}

/* ======================
BLOG FOOTER
====================== */

.blog-footer{

    max-width:1200px;

    margin:30px auto 0;

    display:flex;

    justify-content:flex-end;

    position:relative;

    z-index:5;

}


.blog-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:180px;

    padding:14px 24px;

    border:1px solid var(--color-secondary-70);

    background:transparent;

    color:var(--color-secondary-70);

    text-decoration:none;

    font-size:11px;

    font-weight:600;

    letter-spacing:.18em;

    transition:.3s;

}


.blog-btn:hover{

    background:var(--color-secondary-70);

    color:var(--color-text-white);

}


/* ======================
SP
====================== */

@media(max-width:768px){

    .blog-footer{

        margin-top:20px;

    }


    .blog-btn{

        min-width:160px;

        padding:13px 20px;

        font-size:10px;

    }

}

/* ======================

SP

====================== */



@media(max-width:768px){



    .blog{

        padding:90px 20px;

    }



    .blog-bg{

        font-size:90px;

    }



    .blog-header h2{

        font-size:38px;

    }



    .blog-group{

        grid-template-columns:1fr;

        gap:20px;

    }



    .story-image img{

        height:220px;

    }



    .story-body h3{

        font-size:18px;

    }



    .blog-arrow{

        top:270px;

        transform:none;

        width:48px;

        height:48px;

    }



    .blog-prev{

        left:auto;

        right:80px;

    }



    .blog-next{

        right:20px;

    }



}





/* =========================

   セクション背景アクセント

========================= */

/* ===================================

SLIDER SECTION

=================================== */



.svc-slider{

    padding:140px 20px;

    position:relative;

    overflow:hidden;

}



/* ====================== */



.svc-header{

    text-align:center;

    margin-bottom:70px;

}



.svc-subtitle{

    display:inline-block;

    margin-bottom:15px;

    font-size:12px;

    letter-spacing:.3em;

    color: var(--color-primary);

}



.svc-title{

    font-size:58px;

    line-height:1;

    color: var(--color-neutral-light);

    margin-bottom:20px;

}



.svc-sub{

    color: var(--color-neutral-surface);

    line-height:2;

}



/* ====================== */



.svc-slider-wrap{

    max-width:1360px;

    margin:auto;

    position:relative;



    padding-inline:90px;

}



/* ====================== */



.svc-slider-container{

    overflow:hidden;

}



.svc-track{

    display:flex;

    transition:.6s ease;

}



/* ====================== */



.svc-item{

    width:100%;

    flex-shrink:0;



    display:grid;

    grid-template-columns:1.15fr 1fr;

    gap:70px;

    align-items:center;



    padding:20px;

}

/* ======================

IMAGE

====================== */



.svc-image{

    position:relative;

}



.svc-image img{

    width:100%;

    height:650px;

    object-fit:cover;

    border-radius:30px;

    display:block;

}



/* ======================

BOARD

====================== */



.svc-board{

    background: var(--color-primary-30);

    color: var(--color-text-white);



    padding:60px;

    border-radius:18px;



    position:relative;



    box-shadow:

    0 25px 60px rgba(0,0,0,.15);

}



.svc-board::before{

    content:"";

    position:absolute;

    inset:-12px;



    border:12px solid var(--color-primary);

    border-radius:32px;



    pointer-events:none;

}



/* ====================== */



.svc-no{

    display:block;

    font-size:80px;

    line-height:1;

    font-weight:700;

    color:rgba(255,255,255,.12);

    margin-bottom:20px;

}



.svc-board h3{

    font-size:32px;

    line-height:1.5;

    margin-bottom:25px;

}



.svc-divider{

    width:80px;

    height:2px;

    background: var(--color-primary);

    margin-bottom:25px;

}



.svc-board p{

    line-height:2;

    color: var(--color-text-almost-white);

}



/* ======================

ARROW

====================== */



.svc-prev,

.svc-next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);



    width:64px;

    height:64px;



    border:none;

    border-radius:50%;



    background: var(--color-text-white);

    cursor:pointer;



    z-index:30;



    box-shadow:

    0 12px 30px rgba(0,0,0,.12);

}



.svc-prev{

    left:0;

}



.svc-next{

    right:0;

}



.svc-prev::before,

.svc-next::before{

    content:"";



    width:12px;

    height:12px;



    border-top:2px solid var(--color-primary);

    border-right:2px solid var(--color-primary);



    display:block;

    margin:auto;

}



.svc-prev::before{

    transform:rotate(-135deg);

}



.svc-next::before{

    transform:rotate(45deg);

}



.svc-prev:hover,

.svc-next:hover{

    transform:translateY(-50%) scale(1.08);

}



/* ======================

SP

====================== */



@media(max-width:768px){



    .svc-slider{

        padding:90px 20px;

    }



    .svc-title{

        font-size:38px;

    }



    .svc-slider-wrap{

        padding-inline:0;

    }



    .svc-item{

        grid-template-columns:1fr;

        gap:35px;

    }

    .svc-slider-container{

        overflow:hidden;

    }



    .svc-item{

        padding:12px;

    }

    .svc-image img{

        height:280px;

    }



    .svc-board{

        padding:35px 25px;

    }



    .svc-board::before{

        inset:-8px;

        border-width:8px;

    }



    .svc-no{

        font-size:48px;

    }



    .svc-board h3{

        font-size:24px;

    }



    .svc-prev,

    .svc-next{

        width:48px;

        height:48px;



        top:360px;

        transform:none;

    }



    .svc-prev{

        right:80px;

        left:auto;

    }



    .svc-next{

        right:20px;

    }



    .svc-prev:hover,

    .svc-next:hover{

        transform:scale(1.08);

    }



}

.case{

  padding:100px 20px;

  overflow:hidden;

  position:relative;

}



/* 背景テキスト */

.case::before{

  content:"SAMPLE TEXT SAMPLE TEXT SAMPLE TEXT SAMPLE TEXT";

  position:absolute;

  top:300px;

  left:0;



  white-space:nowrap;

  font-size:220px;

  font-weight:700;



  color:transparent;

  -webkit-text-stroke:1px var(--color-secondary-a30);



  animation:caseFlow 30s linear infinite;

  z-index:0;

}



@keyframes caseFlow{

  from{ transform:translateX(0); }

  to{ transform:translateX(-50%); }

}



/* ===== タイトル ===== */

.case-header{

  max-width: 1200px;

  margin: 0 auto 80px;

}



.case-header h2{

  font-size:48px;

  letter-spacing:0.1em;

  color:var(--color-neutral-light);

}



.case-header h5{

  font-size:25px;

  letter-spacing:0.1em;

  color:var(--color-secondary);

}





/* =========================

   レイアウト

========================= */

.case-slider{

  display:flex;

  gap:60px;

  max-width:1200px;

  margin:0 auto;

  position:relative;

  z-index:1;

}



/* =========================

   カード共通（元のやつ完全版）

========================= */

.case-card{

  display:flex;

  align-items:center;

  gap:25px;



  padding:25px;

  background:#fff;

  border-radius:20px;



  box-shadow:0 10px 25px rgba(0,0,0,0.1);

  transition:0.4s;



}



.case-image{

  width:55%;

  height:260px;

  overflow:hidden;

  border-radius:20px;

}



/* 画像基本 */

.case-image img{

  width:100%;

  height:100%;

  object-fit:cover;

  transition:0.5s;

}



/* モノクロ */

.case-image img.is-gray{

  filter: grayscale(100%);

  opacity:0.7;

}



/* メイン強調 */

.case-main-card{

  transform:scale(1.05);

  transition:0.4s;

}



/* サブ */

.case-sub{

  transform:scale(0.9);

  opacity:0.9;

  transition:0.4s;

}



.case-content{

  width:45%;

  display:flex;

  flex-direction:column;

  gap:12px;

}



.case-tag{

  display:inline-block;

  font-size:11px;

  font-weight:600;

  letter-spacing:0.08em;



  padding:6px 12px;

  border-radius:999px;



  color:var(--color-secondary);

  background:rgba(255,255,255,0.6);

  backdrop-filter:blur(6px);



  border:1px solid var(--color-secondary-a30);



  width:fit-content;

}



.case-content h3{

  font-size:20px;

  line-height:1.5;

}



.case-text{

  font-size:13px;

  line-height:1.7;

}



.case-link{

  margin-top:auto;

  font-size:12px;

  text-decoration:none;

  color:var(--color-secondary);

  text-align: right;

}



/* =========================

   左（メイン）

========================= */

.case-main{

  width:60%;

  display: flex;

  align-items: center;

  position:relative;

}



/* =========================

   右（サブ）

========================= */

.case-side{

  width:40%;

  display:flex;

  flex-direction:column;

  gap:20px;

}



/* サブ調整 */

.case-sub{

  padding:15px;

  gap:15px;

}



.case-sub .case-image{

  width:120px;

  height:80px;

}



.case-sub .case-content{

  width:auto;

}



/* =========================

   矢印

========================= */

.case-arrow{

  position:absolute;

  top:50%;

  transform:translateY(-50%);



  width:45px;

  height:45px;

  border-radius:50%;

  border:none;



  background:var(--color-secondary);

  color:#fff;

  font-size:24px;



  display:flex;

  align-items:center;

  justify-content:center;



  cursor:pointer;

  z-index:10;

}



.case-arrow.prev{

  right:60px;

  top: 0;

  padding-bottom: 5px;

}

.case-arrow.next{

  right:0px;

  top: 0;

  padding-bottom: 5px;

 }





/* フェードアウト */

.case-card.is-hide{

  opacity:0;

  transform:translateY(20px) scale(0.98);

}



/* フェードイン（デフォ状態を少し強化） */

.case-card{

  transition:

    opacity 0.5s ease,

    transform 0.5s ease;

}



/* メイン切り替え時ちょい強調 */

.case-main-card{

  transition:

    opacity 0.5s ease,

    transform 0.5s ease;

}



/* =========================

   SP

========================= */

@media(max-width:768px){



  .case-slider{

    flex-direction:column;

  }



  .case-main,

  .case-side{

    width:100%;

  }

.case-card{

  flex-direction: column;

  max-width: 500px;

  margin: 0 auto;

}

  .case-image{

  width:100%;

  height:260px;

  overflow:hidden;

  border-radius:20px;

}

.case-content{

  width:90%;

  display:flex;

  flex-direction:column;

  gap:12px;

}



  .case-image{

    height:180px;

  }



  .case-sub{

    flex-direction:column;

  }

  .case-arrow.prev{

  right:60px;

  top: -50px;

  padding-bottom: 5px;

}

.case-arrow.next{

  right:0px;

  top: -50px;

  padding-bottom: 5px;

 }

.case-header h2{

  font-size:32px;

  letter-spacing:0.1em;

  color:var(--color-neutral-light);

}



.case-header h5{

  font-size:20px;

  letter-spacing:0.1em;

  color:var(--color-secondary);

}





}





/* =====================

   COMPANY

===================== */

/* ==================================

COMPANY

================================== */



.company{

    padding:140px 20px;

    background: var(--color-secondary);

}



.company-inner{

    max-width:1200px;

    margin:auto;

}



/* ==========================

CARD

========================== */



.company-card{



    background: var(--color-text-white);



    border-radius:30px;



    overflow:hidden;



    display:grid;



    grid-template-columns:420px 1fr;



    box-shadow:

    0 20px 50px rgba(0,0,0,.06);



    margin-bottom:40px;

}



/* ==========================

PHOTO

========================== */



.company-photo{

    height:100%;

}



.company-photo img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}



/* ==========================

CONTENT

========================== */



.company-content{

    padding:60px;

}



.company-sub{

    display:inline-block;



    font-size:12px;



    letter-spacing:.3em;



    color: var(--color-secondary);



    margin-bottom:15px;

}



.company-content h2{

    font-size:56px;

    line-height:1;

    color: var(--color-neutral-light);

    margin-bottom:20px;

}



.company-lead{

    line-height:2;

    color: var(--color-neutral-surface);

    margin-bottom:40px;

}



/* ==========================

INFO

========================== */



.company-info{

    border-top:1px solid var(--color-secondary-a30);

}



.info-row{



    display:grid;



    grid-template-columns:140px 1fr;



    gap:20px;



    padding:24px 0;



    border-bottom:1px solid var(--color-secondary-a30);

}



.info-row span{

    font-size:12px;

    letter-spacing:.2em;

    color: var(--color-secondary);

    font-weight:600;

}



.info-row p{

    line-height:1.8;

    color: var(--color-neutral-surface);

}



/* ==========================

MAP

========================== */



.company-map{

    overflow:hidden;

    border-radius:30px;

    height:450px;

}



.company-map iframe{

    width:100%;

    height:100%;

    border:none;

    display:block;

}



/* ==========================

SP

========================== */



@media(max-width:768px){



    .company{

        padding:90px 20px;

    }



    .company-card{



        grid-template-columns:1fr;

    }



    .company-photo{

        height:280px;

    }



    .company-content{

        padding:30px 25px;

    }



    .company-content h2{

        font-size:38px;

    }



    .info-row{



        grid-template-columns:1fr;



        gap:10px;



        padding:18px 0;

    }



    .company-map{

        height:300px;

    }



}

/* テーマ色変更 */





.theme-demo{

  position: fixed;

  right: 20px;

  bottom: 20px;

  z-index: 1000;

}



/* キャラ */

.theme-character{

  cursor: pointer;

  position: absolute;

  bottom: -50px;

  right: -50px;

  z-index: 10;

  rotate: -20deg;

}



.theme-character img{

  width: 110px;

}



/* 吹き出し */

.theme-bubble{

  position: absolute;

  bottom: 0px;

  right: 0;

  background: #fff;

  padding: 15px 22px;

  border-radius: 12px;

  box-shadow: 0 5px 20px rgba(0,0,0,0.15);

  color: #333;

  width: 300px;

  font-size: 16px;

  font-weight: bold;

  animation: fadeInUp 0.3s ease;

}



/* しっぽ（キャラ方向に） */

.theme-bubble::after{

  content: '';

  position: absolute;

  bottom: -8px;

  right: 20px;

  border: 8px solid transparent;

  border-top-color: #fff;

}





/* 色ボタン */

.theme-colors{

  margin-top: 18px;

  display: flex;

  justify-content: center;

  gap: 12px;

}



.theme-colors button{

  width: 30px;

  height: 30px;

  border-radius: 50%;

  border: none;

  cursor: pointer;

}



/* 色 */

button[data-theme="default"]{

  background: #fff;

  border: 2px solid #333333;

}

button[data-theme="blue"]{ background:#6fa6c9; }

button[data-theme="green"]{ background:#d379cb; }

button[data-theme="dark"]{ background:#e6924e; }



/* 閉じる */

.theme-close{

  position: absolute;

  top: -10px;

  left: -10px;

  background: #333;

  color: #fff;

  border: none;

  border-radius: 50%;

  width: 28px;

  height: 28px;

  cursor: pointer;

  font-size: 16px;

}



/* アニメ */

@keyframes fadeInUp{

  from{

    opacity:0;

    transform:translateY(20px);

  }

  to{

    opacity:1;

    transform:translateY(0);

  }

}




.products{
    padding:90px 20px;
    text-align:center;
    position:relative;
    overflow:hidden;
}

/* =========================
背景アクセント
========================= */

.products-bg-text{
    position:absolute;
    right:-250px;
    top:120px;

    font-size:150px;
    font-weight:700;

    color:var(--color-primary-light-70);

    opacity:0.15;

    white-space:nowrap;
    pointer-events:none;
}

/* =========================
ヘッダー
========================= */

.products-header{
    margin-bottom:40px;
    position:relative;
    z-index:2;
}

.products-title{
    color:var(--color-primary);
    font-size:56px;
    line-height:1;
    margin:0 0 10px;
}

.products-sub{
    margin:0;
    font-size:15px;
    color:var(--color-text);
}

/* =========================
商品一覧
========================= */

.products-grid{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:20px;

    width:100%;
    max-width:1100px;

    margin:0 auto;
}

/* =========================
カード
========================= */

.products-card{
    background:#fff;

    border-radius:12px;

    overflow:hidden;

    box-shadow:
        0 4px 18px rgba(0,0,0,0.07);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.products-card:hover{
    transform:translateY(-5px);

    box-shadow:
        0 10px 28px rgba(0,0,0,0.10);
}

/* =========================
リンク
========================= */

.products-card__link{
    display:flex;
    flex-direction:column;

    height:100%;

    color:inherit;
    text-decoration:none;
}

/* =========================
画像
========================= */

.products-card__image{
    width:100%;
    height:170px;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;

    background:#f7f7f7;
}

.products-card__image img{
    width:100%;
    height:100%;

    object-fit:contain;

    transition:transform 0.4s ease;
}

.products-card:hover .products-card__image img{
    transform:scale(1.04);
}

.products-no-image{
    width:100%;
    height:100%;

    display:grid;
    place-items:center;

    color:#999;
    font-size:13px;
}

/* =========================
商品情報
========================= */

.products-card__body{
    display:flex;
    flex-direction:column;

    flex:1;

    padding:18px 20px 16px;

    text-align:left;
}

/* =========================
カテゴリー
========================= */

.products-tag{
    display:inline-block;
    align-self:flex-start;

    background:var(--color-primary);

    padding:4px 9px;

    color:var(--color-text-white);

    border-radius:4px;

    font-size:11px;

    line-height:1.4;

    margin-bottom:9px;
}

/* =========================
商品名
========================= */

.products-card__body h3{
    font-size:17px;
    line-height:1.45;

    margin:0 0 9px;

    color:var(--color-text);

    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
}

/* =========================
価格
========================= */

.products-price{
    display:flex;
    align-items:baseline;

    gap:5px;

    margin-bottom:8px;
}

.products-price span{
    font-size:20px;
    font-weight:700;

    color:var(--color-primary);
}

.products-price small{
    font-size:11px;
    color:var(--color-text-gray);
}

/* =========================
在庫
========================= */

.products-stock{
    display:flex;
    align-items:center;

    gap:4px;

    margin-bottom:12px;

    font-size:12px;
}

.products-stock__label{
    color:var(--color-text-gray);
}

.products-stock__status{
    font-weight:700;
}

.products-stock__status.stock-high{
    color:#299b58;
}

.products-stock__status.stock-middle{
    color:#d89b24;
}

.products-stock__status.stock-low{
    color:#d85c45;
}

.products-stock__status.stock-out{
    color:#999;
}

/* =========================
商品を見る
========================= */

.products-card__footer{
    display:flex;
    justify-content:space-between;
    align-items:center;

    width:100%;

    padding-top:11px;

    margin-top:auto;

    border-top:1px solid #eee;

    color:var(--color-text);

    font-size:12px;
}

.products-card__arrow{
    width:28px;
    height:28px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:var(--color-primary);

    color:var(--color-text-white);

    border-radius:50%;

    font-size:13px;

    transition:0.3s;
}

.products-card:hover .products-card__arrow{
    transform:translateX(3px);
}

/* =========================
商品一覧リンク
========================= */

.products-link-box{
    position:relative;
    z-index:2;

    text-align:right;

    max-width:1100px;

    margin:28px auto 0;
}

.products-link{
    display:inline-flex;

    align-items:center;

    gap:9px;

    font-size:14px;

    color:var(--color-text);

    text-decoration:none;

    transition:0.3s;
}

.products-link:hover{
    color:var(--color-primary);
}

.products-link-arrow{
    width:30px;
    height:30px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:var(--color-primary);

    color:var(--color-text-white);

    font-size:13px;

    transition:0.3s;
}

.products-link:hover .products-link-arrow{
    transform:translateX(4px);
}

/* =========================
売り切れ
========================= */

.products-card.is-soldout{
    opacity:0.6;
}

.products-card.is-soldout:hover{
    transform:none;

    box-shadow:
        0 4px 18px rgba(0,0,0,0.07);
}

.products-card.is-soldout .products-card__image{
    filter:grayscale(0.3);
}

/* =========================================================
Tablet
========================================================= */

@media(max-width:1000px){

    .products-grid{
        grid-template-columns:repeat(2, 1fr);
        max-width:750px;
    }

}

/* =========================================================
SP
========================================================= */

@media(max-width:768px){

    .products{
        padding:65px 20px;
    }

    .products-bg-text{
        font-size:80px;
        right:-100px;
        top:110px;
    }

    .products-title{
        font-size:42px;
    }

    .products-header{
        margin-bottom:32px;
    }

    .products-grid{
        grid-template-columns:1fr;
        gap:14px;

        max-width:420px;
    }

    .products-card{
        border-radius:10px;
    }

    .products-card__image{
        height:150px;
    }

    .products-card__body{
        padding:15px 17px 14px;
    }

    .products-tag{
        font-size:10px;
        padding:3px 8px;
        margin-bottom:7px;
    }

    .products-card__body h3{
        font-size:16px;
        margin-bottom:7px;
    }

    .products-price{
        margin-bottom:6px;
    }

    .products-price span{
        font-size:19px;
    }

    .products-stock{
        margin-bottom:9px;
        font-size:11px;
    }

    .products-card__footer{
        padding-top:9px;
        font-size:11px;
    }

    .products-card__arrow{
        width:26px;
        height:26px;
        font-size:12px;
    }

    .products-link-box{
        padding:0;

        margin-top:22px;

        text-align:center;
    }

}





.cta-07 {

    margin-top: 0px;

}



.cta-07-inner {

    position: relative;



    display: flex;

    align-items: center;

    justify-content: center;



    gap: 60px;



    padding: 46px 54px;



    background: #fff;



    border-radius: 30px;



}



/* =========================================

   LEFT

========================================= */



.cta-07-left {

    display: flex;

    flex-direction: column;



    justify-content: center;

}



.cta-07-logo {

    display: inline-flex;



    width: fit-content;



    margin-bottom: 24px;

}



.cta-07-logo img {

    width: 220px;

    height: auto;



    display: block;



    object-fit: contain;

}



.cta-07-text {

    font-size: 16px;

    line-height: 2;



    color: #555;

}



/* =========================================

   BUTTONS

========================================= */



.cta-07-buttons {

    display: flex;

    flex-direction: column;



    gap: 16px;



    width: 280px;



    flex-shrink: 0;

}



.cta-07-btn {

    min-height: 66px;



    border-radius: 18px;



    display: flex;

    align-items: center;

    justify-content: center;



    text-align: center;

    text-decoration: none;



    padding: 0 24px;



    font-size: 15px;

    font-weight: 700;



    transition: 0.25s;

}



/* =========================================

   PRIMARY

========================================= */



.cta-07-btn-primary {

    background-color: var(--color-secondary);

    color: #fff;



}



.cta-07-btn-primary:hover {

    transform: translateY(-4px);

}



/* =========================================

   SECOND

========================================= */



.cta-07-btn-line {

    background: #f7f7f7;



    color: #1a1a1a;



    border:

        1px solid rgba(0,0,0,0.06);

}



.cta-07-btn-line:hover {

    background: #f1f1f1;



    transform: translateY(-4px);

}



/* =========================================

   RESPONSIVE

========================================= */



@media (max-width: 900px) {



    .cta-07-inner {

        flex-direction: column;

        align-items: flex-start;



        padding: 40px 28px;

    }



    .cta-07-buttons {

        width: 100%;

    }



    .cta-07-btn {

        width: 100%;

    }



}



@media (max-width: 640px) {



    .cta-07-inner {

        border-radius: 24px;

        padding: 32px 22px;
        gap: 30px;
    }



    .cta-07-logo img {

        width: 180px;

    }



    .cta-07-text {

        font-size: 14px;

        line-height: 1.9;

    }
}







/* ここから別 */
/* =========================================================
   Instagram 13
   COMPACT SQUARE GALLERY
========================================================= */

:root {

    --ig13-text: #151515;

    --ig13-muted: #8b8b8b;

    --ig13-bg: #ffffff;

}


/* =========================================================
   Section
========================================================= */

.instagram-compact13 {

    width: 100%;

    padding:
        70px 0 60px;

    background:
        var(--ig13-bg);

    color:
        var(--ig13-text);

}


/* =========================================================
   Inner
========================================================= */

.instagram-compact13-inner {

    width:
        min(
            760px,
            calc(100% - 40px)
        );

    margin:
        0 auto;

}


/* =========================================================
   Grid
========================================================= */

.instagram-compact13-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        16px;

}


/* =========================================================
   Item
========================================================= */

.instagram-compact13-item {

    display:
        block;

    min-width:
        0;

    text-decoration:
        none;

}


/* =========================================================
   Image
========================================================= */

.instagram-compact13-image {

    position:
        relative;

    overflow:
        hidden;

    width:
        100%;

    aspect-ratio:
        1 / 1;

    border-radius:
        18px;

    background:
        #f2f2f2;

}


/* =========================================================
   Image
========================================================= */

.instagram-compact13-image img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform .5s cubic-bezier(
            .2,
            .7,
            .2,
            1
        );

}


/* =========================================================
   Hover
========================================================= */

.instagram-compact13-item:hover
.instagram-compact13-image img {

    transform:
        scale(
            1.07
        );

}


/* =========================================================
   Overlay
========================================================= */

.instagram-compact13-image::after {

    position:
        absolute;

    inset:
        0;

    background:
        rgba(
            255,
            255,
            255,
            0
        );

    content:
        "";

    transition:
        background .35s ease;

}


.instagram-compact13-item:hover
.instagram-compact13-image::after {

    background:
        rgba(
            255,
            255,
            255,
            .08
        );

}


/* =========================================================
   Video
========================================================= */

.instagram-compact13-video {

    position:
        absolute;

    right:
        12px;

    bottom:
        12px;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        30px;

    height:
        30px;

    border-radius:
        50%;

    background:
        rgba(
            0,
            0,
            0,
            .65
        );

    color:
        #fff;

    font-size:
        10px;

}


/* =========================================================
   Bottom
========================================================= */

.instagram-compact13-bottom {

    display:
        flex;

    align-items:
        center;

    gap:
        16px;

    margin-top:
        20px;

}


/* =========================================================
   Lines
========================================================= */

.instagram-compact13-line {

    flex:
        1;

    height:
        1px;

    background:
        #e8e8e8;

}


/* =========================================================
   Account
========================================================= */

.instagram-compact13-account {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    white-space:
        nowrap;

}


.instagram-compact13-instagram {

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        15px;

    font-style:
        italic;

    font-weight:
        700;

}


.instagram-compact13-account a {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        4px;

    color:
        var(--ig13-muted);

    font-family:
        "Montserrat",
        sans-serif;

    font-size:
        9px;

    font-weight:
        600;

    text-decoration:
        none;

    transition:
        color .2s ease;

}


.instagram-compact13-account a:hover {

    color:
        var(--ig13-text);

}


.instagram-compact13-account a span {

    font-size:
        12px;

}


/* =========================================================
   Fallback
========================================================= */

.instagram-compact13-name {

    color:
        var(--ig13-muted);

    font-size:
        9px;

}


/* =========================================================
   Error
========================================================= */

.instagram-compact13-error {

    padding:
        12px 15px;

    border:
        1px solid #e7caca;

    background:
        #fff7f7;

    color:
        #a34b4b;

    font-size:
        11px;

}


/* =========================================================
   Animation
========================================================= */

.instagram-compact13-item {

    opacity:
        0;

    transform:
        translateY(
            16px
        );

}


.instagram-compact13-item.is-visible {

    opacity:
        1;

    transform:
        translateY(0);

    transition:
        opacity .5s ease,
        transform .5s ease;

}


/* =========================================================
   Different Animation Delay
========================================================= */

.instagram-compact13-item-1 {

    transition-delay:
        .05s;

}


.instagram-compact13-item-2 {

    transition-delay:
        .12s;

}


.instagram-compact13-item-3 {

    transition-delay:
        .19s;

}


/* =========================================================
   Tablet
========================================================= */

@media (max-width: 700px) {

    .instagram-compact13-inner {

        width:
            calc(
                100% - 32px
            );

    }


    .instagram-compact13-grid {

        gap:
            10px;

    }


    .instagram-compact13-image {

        border-radius:
            14px;

    }

}


/* =========================================================
   Mobile
========================================================= */

@media (max-width: 500px) {

    .instagram-compact13 {

        padding:
            45px 0 42px;

    }


    .instagram-compact13-inner {

        width:
            calc(
                100% - 24px
            );

    }


    .instagram-compact13-grid {

        gap:
            7px;

    }


    .instagram-compact13-image {

        border-radius:
            11px;

    }


    .instagram-compact13-video {

        right:
            7px;

        bottom:
            7px;

        width:
            24px;

        height:
            24px;

        font-size:
            8px;

    }


    .instagram-compact13-bottom {

        gap:
            9px;

        margin-top:
            14px;

    }


    .instagram-compact13-account {

        gap:
            6px;

    }


    .instagram-compact13-instagram {

        font-size:
            12px;

    }


    .instagram-compact13-account a {

        font-size:
            8px;

    }

}