@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Noto+Sans+JP:wght@100..900&family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&family=Zen+Old+Mincho:wght@400;500;600;700;900&display=swap');
.cate_wrap{
    overflow: hidden;
}
.newstop_b {
  align-items: flex-start;
}
.newstop_b .webgene-blog .webgene-item a .catelabel {
  border-radius: 1px;
  padding: 3px 10px;
}
.newstop_b .webgene-blog .webgene-item {

  border-bottom: none;
}
.newstop_b .webgene-blog .webgene-item a h3{
  flex: 1;        /* ← 残り全部 */
  width: auto;    /* ← calc不要 */
}
@media screen and (max-width: 1080px) {
.newstop_b .webgene-blog .webgene-item a h3 {
    width: calc(100% - 250px);
    }}
@media screen and (max-width: 576px) {
  .newstop_b .webgene-blog .webgene-item a .catelabel {
    padding: 2px 6px;
  }
}

 .webgene-pagination {
  width: 100%;
}
 .webgene-pagination ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: -webkit-flexbox;
  display: -moz-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap: 30px;
}
 .webgene-pagination ul a {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: -webkit-flexbox;
  display: -moz-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  color: #333;
  text-align: center;
  letter-spacing: 0;
  background-color: #fff;
  width: 46px;
  aspect-ratio: 1 / 1;

}
 .webgene-pagination ul a:hover {}
 .webgene-pagination ul .selected a {
  pointer-events: none;
  background-color:#F2EEED;
  border-color: #503F36;
  border: none;
}

.catebox{
  background: #f3efec; /* 見本の薄ベージュ */
  padding: 60px 20px 70px;
}
.catebox .txt-center{
  text-align: center;
  margin: 0 0 40px;
  letter-spacing: .12em;
  position: relative;
}

/* 見出しの下の青い線 */
.catebox .txt-center::after{
  content:"";
  display: block;
  width: 120px;
  height: 3px;
  background: #7ea0a6;     /* 見本の青っぽい線 */
  margin: 10px auto 0;
}
.catebox .webgene-blog {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: -webkit-flexbox;
  display: -moz-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap: 20px;
}
.catebox .webgene-blog .webgene-item a{
  display: inline-flex;     /* 中央揃え */
  align-items: center;
  justify-content: center;

  min-width: 120px;        /* 見本っぽい横幅 */
  height: 56px;            /* 見本っぽい高さ */

  border: none;            /* 黒枠を消す */
  background: #fff;        /* 未選択は白 */

  padding: 0 26px;
  border-radius: 999px;

  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06); /* ほんのり影 */
}
.catebox .webgene-blog .webgene-item a.on{
  background: #b48f97;  /* 見本のくすみピンク */
  box-shadow: none;  pointer-events: none;
}
.catebox .webgene-blog .webgene-item a.on p {
  color: #fff;
}
.catebox .webgene-blog .webgene-item a p {
  font-weight: 500;
}
@media screen and (max-width: 576px) {
  .catebox .webgene-blog .webgene-item a {
    padding: 3px 12px;
  }
}
.news_e {
  gap: 50px;
  align-items: center;
}
.news_e .contents {}
.news_e .contents .webgene-blog {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: -webkit-flexbox;
  display: -moz-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap: 80px clamp(10px, 3vw, 40px);
}
.news_e .contents .webgene-blog .webgene-item {
  width: calc((100% - clamp(10px, 3vw, 40px) * 3) / 4);
}
/* カード */
.news_e .contents .webgene-blog .webgene-item > a {
  display: block;
  border-radius: 16px;
  text-decoration: none;
}
/* 画像 */
.news_e .contents .webgene-blog .webgene-item .imgbox {
  border-radius: 2px;
}
.news_e .contents .webgene-blog .webgene-item .imgbox img {
  width: 100%;
  height: auto;
  display: block;
}
.news_e .webgene-blog .webgene-item .date {
  line-height: 1;
  font-size: 15px;
}
/* カテゴリ（白いピル） */
.news_e .contents .webgene-blog .webgene-item .catename {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  padding: 3px 16px;
  background: #fff;
  color: #838383;
  border: 1px solid #838383;
  font-weight: 700;
}
/* ---------- responsive ---------- */
@media screen and (max-width: 1080px) {
  .news_e {
    width: 80%;
    margin-right: auto;
    margin-left: auto;
  }
  .news_e .contents .webgene-blog {
    gap: 50px 30px;
  }
  /* 2列 */
  .news_e .contents .webgene-blog .webgene-item {
    width: calc((100% - 30px) / 2);
  }
}
@media screen and (max-width: 576px) {
  .news_e {
    width: 100%;
  }
  .news_e .contents .webgene-blog {
    gap: 30px 20px;
  }
}

.staff_b .messagebox_wrap {
  align-items: stretch;
    max-width: 1280px;
}
.staff_b .messagebox_wrap .boxitem {
    gap: 10px;}
    
.staff_b .messagebox_wrap .boxitem .box {
  width: 100%;
}
.staff_b .messagebox_wrap .boxitem .box .imgbox {}
.staff_b .imgbox {
  aspect-ratio: 1; /* 正方形にする（不要なら消してOK） */
  overflow: hidden;
  clip-path: polygon(18% 0%, /* 左上のカット開始 */ 100% 0%, 100% 82%, /* 右下のカット開始 */ 82% 100%, 0% 100%, 0% 18%);
}
/* 中の画像を枠いっぱいに */
.staff_b .imgbox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.staff_b .messagebox_wrap .boxitem .namebox {

    gap: 8px;}
.staff_b .messagebox_wrap .boxitem .namebox h3{
    line-height: 1.6;
}

.staff_b .namebox .en1 {
  display: inline-block;
  padding: 0px 18px;
  color: #fff;
  background: #CDB0B8;
  letter-spacing: .15em;
  font-size: 14px;
  white-space: nowrap; /* 改行防止 */
}
.staff_b .messagebox_wrap .boxitem .txtbox .red_t::before {
  left: 0px;
  border-left: 6px solid #AF818E;
}

.color1 {
  color: #69A0AE;
}
.color2 {
  color: #838383;
}
.color3 {
  color: #AF818E;
}
.color4 {
  color: #9084AA;
}

.bg1{
     background: #EAE8DF; 
}
.bg2{
    background: #F2EEED;
}
.bg3{
   background:  #AF818E;
}
.font400{
    font-weight: 400;
}


.header_d .logo_w{ display:none; }
/* =====================================
   pagetitle1 (flex)
   ===================================== */


.pagetitle1{
       margin-top: 50px;
  position: relative;
  width: 100%;

  display: flex;
  align-items: center;
  gap: clamp(24px, 6vw, 90px);

  overflow: hidden;
}

/* 左右の比率（1 : 1.4） */
.pagetitle1 .leftbox{
  flex: 1 1 0;
  position: relative;
  z-index: 1;
}

.pagetitle1 .rightbox{
  flex: 1.4 1 0;
  position: relative;
  z-index: 1;
}

/* 背景英字 */
.pagetitle1 .en{
  position: absolute;
top: clamp(60px, 10vw, 120px);
  left: clamp(12px, 2vw, 20px);

  font-family: "EB Garamond", serif;
  font-weight: 400;
  letter-spacing: .05em;
  line-height: 1;
  white-space: nowrap;
  color: rgba(0,0,0,.12);

  font-size: clamp(65px, 7vw, 150px);

  z-index: 50;
}
.pagetitle1 .en1{
  font-family: "EB Garamond", serif;
  font-weight: 400;
  letter-spacing: .05em;
  line-height: 1;
  white-space: nowrap;
  color: rgba(0,0,0,.12);
  font-size: clamp(80px, 7vw, 150px);
  z-index: 50;
 
}

    
/* テキスト間隔（フォントサイズは触らない） */
.pagetitle1 .txtbox p{
  margin: 0;
}
.pagetitle1 .txtbox p + p{
  margin-top: 14px;
}
.pagetitle1{
  position: relative;
}

.pagetitle1::after{
  content: "";
  position: absolute;

  top: 0px;
  right: 0;

  height: 100%;
  width: auto;
  aspect-ratio: 528 / 567;

  background: url("https://sd-quindim.com/system_panel/uploads/images/pagetitle1.png") no-repeat right top / contain;

  /* ▼ マスク（縦＋横） */
  -webkit-mask-image:
    linear-gradient(to bottom,
      rgba(0,0,0,1) 80%,
      rgba(0,0,0,0)),
    linear-gradient(to left,
      rgba(0,0,0,1) 80%,
      rgba(0,0,0,0));

  mask-image:
    linear-gradient(to bottom,
      rgba(0,0,0,1) 80%,
      rgba(0,0,0,0)),
    linear-gradient(to left,
      rgba(0,0,0,1) 80%,
      rgba(0,0,0,0));
}


.pagetitle1 .txtbox h1{
  position: relative; /* ← 必須 */
}

.pagetitle1 .txtbox h1::before{
  content: "";
  position: absolute;

  top: 0;
  left: -50px;

  width: 80px;   /* ← 画像サイズ調整 */
  height: 80px;

  background: url("https://sd-quindim.com/system_panel/uploads/images/pagetitle2.png") no-repeat center / contain;
}
/* 右：ピンク面（同形を左下にずらす） */
.pagetitle1 .rightbox::before{
  content:"";
  position:absolute;
  inset:0;

  background:#DCA08C;
  border-radius: 0 160px 0 160px;

  transform: translate(-12px, 10px);
  z-index: 0;
  pointer-events:none;
}

/* 画像枠（切り抜き） */
.pagetitle1 .imgbox{
  position: relative;
  z-index: 1;

  overflow: hidden;
  border-radius: 0 160px 0 160px;
  aspect-ratio: 743 / 500;

  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.pagetitle1 .imgbox::after{
  content:"";
  position:absolute;
  inset:0;

  background: rgba(0,0,0,0.2);  /* ← 濃さ調整 */

  pointer-events:none;
}
.pagetitle1 .imgbox img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =====================================
   SP
   ===================================== */
@media (max-width: 768px){
  .pagetitle1{
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
      margin-top: 0;
  }

  /* SPは英字を通常位置に戻して被り防止 */
  .pagetitle1 .en{

    margin-top: clamp(10px, 5vw, 40px);
color: rgba(255,255,255,0.7);
mix-blend-mode: overlay;
left: clamp(20px, 8vw, 70px);
      
  }

  .pagetitle1 .rightbox::before{
    border-radius: 0 120px 0 120px;
    transform: translate(-10px, 10px);
  }

  .pagetitle1 .imgbox{
    border-radius: 0 120px 0 120px;
  }
    .pagetitle1 .txtbox{
        max-width: 700px;
        margin: 0 auto;
    }
}


.more a {
  padding: 8px 50px;
  background-color: #000;
  border-radius: 200px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.more p {
	font-family: "EB Garamond", "Zen Old Mincho", "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";

 font-size: clamp(18px, 2vw, 26px);
  letter-spacing: 0.1em;
  color: #fff;
    text-align: center;
}
.more a > div {
  gap: 15px;
}
.more a > div .icon {
  background-color: #fff;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: -webkit-flexbox;
  display: -moz-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width: 30px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  transition: ease 0.3s;
}
.more a:hover > div .icon {
  transform: translateX(3px);
}
.more a > div .icon img {
  width: 40%;
}
.more.more2 a {
  background-color:#69A0AE;
}
.more.more3 a {
  background-color: #fff;
}
.more3 a p {
  color: #01418E;
}
.more_aw > a{
	border: #fff solid 1px;
    background-color: transparent;
}
.more_aw a > div p {
    color: #fff;
}
.titleboxwrap{
    justify-content: space-between;
}

.titleboxwrap .txtbox{
  position:relative;
  padding-left: clamp(20px,3vw,40px);
  max-width: 520px;
}

/* 縦線 */
.titleboxwrap .txtbox::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:2px;
  height:100%;
  background:#cfcfcf;
}
.titlebox1 .entitle1{
    line-height: 1;}

.tbline{
  position: relative;
  display: inline-block;
  padding: 6px 0;
  margin: 0;
  text-align: center;
}

.tbline::before,
.tbline::after{
  content:"";
  position:absolute;
  left:0;
  width:100%;
  height:1px;
  background:#333;
}
/* 上 */
.tbline::before{
  top:0;
}

/* 下 */
.tbline::after{
  bottom:0;
}



/* ---------- nav dot ---------- */
.header_d{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
height: clamp(70px, 15vw, 100px);

  z-index: 9999;
    background: #fff;
}
.header_d .leftbox .logo img {
  width: clamp(140px, 36vw, 260px);
}
.header_d .leftbox {
    position: fixed;
    top: auto;
    left: 20px;
    z-index: 10;
    height: auto;
}
.header_d .leftbox .logo img {
  padding-right: 14px;
}


.header_d .rightbox {
    right: 0px;
}

.header_d .li.contact{
  height: 100%;
  display: flex;
}
.header_d .li.contact a{
width: 150px;
  padding: auto 50px;
height: 100%;
  background: #69A0AE;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);

  transition: .35s ease;
}
.header_d .li.contact a p{
    color: #fff;}
    .header_d .menu-bt .line > div {
        background-color: #313131;

    }
}


@media screen and (max-width: 576px) {
.header_d{
    height: 100px;!important}
        
  .header_d .menu-bt {
    width: 45px;
    border: none;
  }
}
/* =========================================================
   burgermenu_b1 : BASE / LAYOUT
   ========================================================= */

/* base */
.menu-wrap.burgermenu_b1{
  display: none;
  position: fixed;
  z-index: 98;
  inset: 0;
}

/* overlay */
.menu-wrap.burgermenu_b1::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: #2C2C2C;
  opacity: 0.6;
}

/* panel */
.menu-wrap.burgermenu_b1 .mene_box{
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 500px;
  max-width: 100%;
  margin: 0;
  background: #fff;
  overflow-y: auto;
  z-index: 2;
  box-shadow: -4px 0 20px rgba(0, 0, 0, .15);
}

.menu-wrap.burgermenu_b1 .mene_box p{
  font-family: "EB Garamond", serif;
}

/* =========================================================
   NAV AREA
   ========================================================= */

.menu-wrap.burgermenu_b1 .mene_box .nav_box{
  padding: clamp(80px, 12vw, 150px) clamp(40px, 8vw, 110px) clamp(80px, 12vw, 100px);
  background-color: #fff;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.menu-wrap.burgermenu_b1 .mene_box .nav_box .ul{
  margin: 0 auto 20px;
  padding-left: 20px;
  flex-direction: column;
  align-items: flex-start;
  max-width: 250px;
}

/* li */
.menu-wrap.burgermenu_b1 .mene_box .nav_box .ul .li{
  padding: 0;
}

/* link layout: icon + text */
.menu-wrap.burgermenu_b1 .mene_box .nav_box .ul .li a{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 12px;
  justify-content: flex-start;
  position: relative;
  padding: 0;
}

/* icon */
.menu-wrap.burgermenu_b1 .mene_box a .icon{
  width: 21px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px solid #d9d9d9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-wrap.burgermenu_b1 .mene_box a .icon img{
  width: 16px;
  transition: transform .3s ease;
  margin-left: -18px;
}

.menu-wrap.burgermenu_b1 .mene_box a:hover .icon img{
  transform: translateX(5px);
}

/* JP/EN overlay animation */
.menu-wrap.burgermenu_b1 .mene_box .nav_box .ul .li a p{
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  white-space: nowrap;
  transition: opacity .28s ease, transform .28s ease;
}

/* 初期：JP表示 / EN非表示 */
.menu-wrap.burgermenu_b1 .mene_box .nav_box .ul .li a p.jp{
  opacity: 1;
  transform: translateY(0);
}

.menu-wrap.burgermenu_b1 .mene_box .nav_box .ul .li a p.en{
  opacity: 0;
  transform: translateY(6px);
}

/* hover / focus で切り替え */
.menu-wrap.burgermenu_b1 .mene_box .nav_box .ul .li a:hover p.jp,
.menu-wrap.burgermenu_b1 .mene_box .nav_box .ul .li a:focus-visible p.jp{
  opacity: 0;
  transform: translateY(-6px);
}

.menu-wrap.burgermenu_b1 .mene_box .nav_box .ul .li a:hover p.en,
.menu-wrap.burgermenu_b1 .mene_box .nav_box .ul .li a:focus-visible p.en{
  opacity: 1;
  transform: translateY(0);
}



/* =========================================================
   SNS
   ========================================================= */

.menu-wrap.burgermenu_b1 .mene_box .sns-icons{
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 20px;
}

.menu-wrap.burgermenu_b1 .sns-icons a{
  display: inline-flex;
  transition: transform .28s ease, opacity .28s ease;
}

.menu-wrap.burgermenu_b1 .sns-icons a:hover,
.menu-wrap.burgermenu_b1 .sns-icons a:focus-visible{
  transform: translateY(-3px);
  opacity: .85;
}

.menu-wrap.burgermenu_b1 .mene_box .sns-icons a img{
  width: 24px;
  height: 24px;
}

/* =========================================================
   LANG BUTTON
   ========================================================= */

.menu-wrap.burgermenu_b1 .mene_box .lang-buttons{
  border-top: 1px solid #eee;
  padding-top: 30px;
  margin-top: 10px;
}

.menu-wrap.burgermenu_b1 .mene_box .lang-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 6px 20px;
  border-radius: 200px;
  border: none;
  font-size: 14px;
  cursor: pointer;
  background-color: #bfa256;
  color: #fff;

  transition: transform .28s ease, opacity .28s ease, filter .28s ease;
}

.menu-wrap.burgermenu_b1 .mene_box .lang-btn p{
  color: #fff;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media screen and (max-width: 1280px){
  .menu-wrap.burgermenu_b1 .mene_box .nav_box{
    padding: clamp(80px, 12vw, 150px) 30px clamp(80px, 12vw, 100px);
  }

  .menu-wrap.burgermenu_b1 .mene_box .nav_box .ul{
  gap: clamp(16px, 2vw, 24px);
    padding: 0 30px 0 10px;
  }

  /* hamburger active line color */
  .header_d .menu-bt.active .line > div:nth-of-type(1),
  .header_d .menu-bt.active .line > div:nth-of-type(3){
    background-color: #373B3E;
  }
}

@media screen and (max-width: 576px){
  .menu-wrap.burgermenu_b1 .mene_box .nav_box{
    padding: 80px 20px 60px 0px;
  }

  .menu-wrap.burgermenu_b1 .mene_box .nav_box .ul{
 
    padding: 0 0px 0 20px;
  }
}
/* ---------- onlineshop_d1 ---------- */

.onlineshop_d1 a {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  height: clamp(420px, 25vw, 560px);
  border-radius: 20px;
  max-width: 1280px;
}
.onlineshop_d1 a.bg_img_wrap2 > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.onlineshop_d1 a .box{
  position: absolute;
  z-index: 50;
  flex-direction: column;
  pointer-events: none;

  width: 60%;
  min-width: 400px;

  top: 50%;
  transform: translateY(-50%);  /* ← 縦だけ中央 */
}
.onlineshop_d1 a .box .en {
  font-size: 15px;
  font-family: "EB Garamond", sans-serif;
  padding-bottom: 12px;
}
.onlineshop_d1 a .box h2 {}
.onlineshop_d1 a:hover .more i {
  transform: translate(3px, -50%);
}
.onlineshop_d1 a:hover {
  color: inherit;
  text-decoration: none;
}
.onlineshop_d1 .more {
  padding: 8px 50px;
  background-color: #000;
  border-radius: 200px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.onlineshop_d1 .more p {
  font-size: clamp(16px, 2vw, 18px);
}
.onlineshop_d1 .imgbox {
  width: 200px;
  height: auto;
}
.onlineshop_d1 .contact_subtitle {
  display: inline-flex;
  align-items: center;
  gap: 0.6em; /* 文字との間隔 */
}
.onlineshop_d1 .contact_subtitle::before, .onlineshop_d1 .contact_subtitle::after {
  content: "";
  width: 1.5em; /* 線の長さ */
  height: 1px; /* 線の太さ */
  background: #2f2f2f; /* 線の色 */
  display: block;
}
@media (max-width: 1080px) {
  .onlineshop_d1 a .box {
    width: 80%;
  }
.onlineshop_d1 a.bg_img_wrap2::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;

  background: linear-gradient(
    to left,
    rgba(255,255,255,0.6) 0%,
    rgba(255,255,255,0.7) 20%,
    rgba(255,255,255,0.5) 40%,
    rgba(255,255,255,0.2) 65%
  );

  pointer-events:none;
}
}
/* ---------- 768px以下（スマホ） ---------- */
@media (max-width: 768px) {
  .onlineshop_d1 a {
    height: auto; /* 文字量で伸びる */
    min-height: 500px;
    border-radius: 16px;
  }
  .onlineshop_d1 a .box {
    width: 100%;
    padding: 22px 18px;
      min-width: 300px;
  }
  .onlineshop_d1 .contact_subtitle::before, .onlineshop_d1 .contact_subtitle::after {
    width: 1.1em;
  }
  .onlineshop_d1 .more {
    padding: 10px 34px;
  }
}
.footer_d{
  margin-top: 0;
  background-color: #FAF8F7;
  position: relative;
}

/* 上の線 */
.footer_d::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);

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

  height: 1px;
  background: #313131;   /* 線の色 */
}
.footer_d .top_footer .rightbox .footer_list a {
  width: calc(100% / 3 - 60px / 3);
  border-bottom: none;
  padding-bottom: 0px;
}
.footer_d .top_footer .rightbox .footer_list {
  justify-content: flex-start;
}
.footer_d .top_footer .rightbox .footer_list p {
  letter-spacing: 0.15em;
  font-size: 17px;
}
.footer_d .online_bt_link a {
  padding: 10px 20px;
  border: 1px solid #FFF;
  gap: 10px;
  border-radius: 0px;
  background-color: inherit;
}
.footer_d .online_bt_link img {
  width: 20px;
}
.footer_d .snsbox a {
  width: 30px;
  border-radius: 0%;
  background-color: inherit;
}
.footer_d .snsbox a i {
  font-size: 25px;
}
.footer_d .top_footer .leftbox .logo {
  max-width: 250px;
}
.footer_d .top_footer .leftbox .logo img {
  width: 180px;
}
.footer_d .top_footer .rightbox .footer_list a p {
    color: #313131;
}
.footer_d .top_footer .rightbox .footer_list {
    gap: 20px 30px;
}
.footer_d .snsbox a i {
    color: #313131;}
@media screen and (max-width: 1080px) {

  .footer_d .top_footer {
    padding-top: 10%;
    padding-bottom: 7%;
  }
    .footer_d .top_footer .leftbox {
    max-width: 70%;
}
}
@media screen and (max-width: 576px) {
  .footer_d .top_footer .leftbox .logo img {
    width: 140px;
  }
  .footer_d .top_footer .leftbox {
    max-width: 80%;
  }
}
html{
}
body{
	font-family: "Zen Old Mincho", "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
	background-color:#FAF8F7;
	color: #333333;
}

body .bg_img_wrap {
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}
body.on .bg_img_wrap .bg_img{
	display: none;
}
body .bg_img_wrap2 {
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}
body.on .bg_img_wrap2 > img{
	display: none;
}

body.gjs-dashed{}

a{
	display: inline-block;
	transition: ease 0.3s;
}
a:hover{
	opacity: 0.5;
}
a p,a,a i{
	color: #000000;
}
.font-sans-serif{
	font-family: "Zen Kaku Gothic New", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
}
.font-serif{
	font-family: "Zen Old Mincho", "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
}
.fonteb{
	font-family: "EB Garamond", "Zen Old Mincho", "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
}
.fontnoto{
    	font-family: "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
    font-weight: 400;
}


.pd_wrap{
	padding: 150px 80px 0;
}
.pd_wrap_all{
	padding: 150px 80px 150px;
}
.pd_wrap_side{
	padding-left: 80px;
	padding-right: 80px;
}
.pd_wrap_t{
	padding-top: 150px;
}
.pd_wrap_b{
	padding-bottom: 150px;
}

.cate_wrap > .cate{
	padding-top: 150px;
}

.mg_b_1{margin-bottom: 150px;}
.mg_b_2{margin-bottom: 100px;}
.mg_b_3{margin-bottom: 80px;}
.mg_b_4{margin-bottom: 50px;}
.mg_b_5{margin-bottom: 30px;}

.entitle1{
    	font-family: "EB Garamond", "Zen Old Mincho", "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
font-size: clamp(28px, 5vw, 80px);
    letter-spacing: 0.15em;
    font-weight: 400;
    line-height: 1.2;
}
.entitle2{
    	font-family: "EB Garamond", "Zen Old Mincho", "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
    font-size: clamp(28px, 5vw, 50px);
     letter-spacing: 0.1em;
     font-weight: 400;
}
.entxt{
    	font-size: clamp(20px,1.6vw,22px);
    	font-family: "EB Garamond", "Zen Old Mincho", "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
    letter-spacing: 0.09em;
    line-height: 1.6;
}
.entxt2{
        	font-size: clamp(14px,1.6vw,16px);
    	font-family: "EB Garamond", "Zen Old Mincho", "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
    letter-spacing: 0.09em;
    font-weight: 400;
    line-height: 1.6;
}


.default_title1{
	font-size: clamp(26px,3.0vw,42px);
    letter-spacing: 0.09em;
}
.default_title2{
	font-size: clamp(24px,2.2vw,34px);
    letter-spacing: 0.09em;
}
.default_title3{
	font-size: clamp(22px,2.2vw,28px);
    letter-spacing: 0.09em;
}
.default_title4{
  font-size: clamp(18px, 1.8vw, 26px);
    letter-spacing: 0.09em;
}
.default_txt1{
	font-size: clamp(14px,1.6vw,18px);
}
.default_txt2{
	font-size: clamp(13px,1.4vw,16px);
}
.default_txt3{
	font-size: clamp(12px,1.2vw,14px);
}
.default_txt4{
	font-size: clamp(16px,2.0vw,22px);
}

.font-light{font-weight: lighter;}
.font-normal{font-weight: normal;}
.font-medium{font-weight: 500;}
.font-semibold{font-weight: 600;}
.font-bold{font-weight: bold;}
.font-black{font-weight: 900;}


/* ---------- common ---------- */

/* ---------- header ---------- */
.header{
}

/* ---------- footer ---------- */

/* ANIME */
.sc-anime.topin.on{
	opacity:0;
	transform: translateY(-50px);
}
.sc-anime.topin.on.active{
	animation-name: topin;
	animation-duration: 1.2s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
.sc-anime.bottomin.on{
	opacity:0;
	transform: translateY(50px);
}
.sc-anime.bottomin.on.active{
	animation-name: bottomin;
	animation-duration: 1.2s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
.sc-anime.leftin.on{
	opacity:0;
	transform: translateX(-50px);
}
.sc-anime.leftin.on.active{
	animation-name: leftin;
	animation-duration: 1.2s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
.sc-anime.rightin.on{
	opacity:0;
	transform: translateX(50px);
}
.sc-anime.rightin.on.active{
	animation-name: rightin;
	animation-duration: 1.2s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
.sc-anime.fadein.on{
	opacity:0;
}
.sc-anime.fadein.on.active{
	animation-name: fadein;
	animation-duration: 1.2s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
.sc-anime.blurin.on{
	opacity:0;
	-ms-filter: blur(6px);
	filter: blur(6px);
}
.sc-anime.blurin.on.active{
	animation-name: blurin;
	animation-duration: 1.2s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}
.sc-anime.blurin2.on{
	opacity:0;
	transform: translateY(50px);
	-ms-filter: blur(6px);
	filter: blur(6px);
}
.sc-anime.blurin2.on.active{
	animation-name: blurin2;
	animation-duration: 1.2s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;
}

@keyframes topin {
	0% {
		opacity:0;
		transform: translateY(-50px);
	}
	100% {
		opacity:1;
		transform: translateY(0px);
	}
}
@keyframes bottomin {
	0% {
		opacity:0;
		transform: translateY(50px);
	}
	100% {
		opacity:1;
		transform: translateY(0px);
	}
}
@keyframes leftin {
	0% {
		opacity:0;
		transform: translateX(-50px);
	}
	100% {
		opacity:1;
		transform: translateX(0px);
	}
}
@keyframes rightin {
	0% {
		opacity:0;
		transform: translateX(50px);
	}
	100% {
		opacity:1;
		transform: translateX(0px);
	}
}
@keyframes upin {
	0% {
		transform: translateY(100%);
	}
	100% {
		transform: translateY(0);
	}
}
@keyframes fadein {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}
@keyframes fadeout {
	0% {
		opacity:1;
	}
	100% {
		opacity:0;
	}
}
@keyframes blurin {
	0% {
		opacity: 0;
		-ms-filter: blur(6px);
		filter: blur(6px);
	}
	100% {
		opacity:1;
		-ms-filter: blur(0px);
		filter: blur(0px);
	}
}
@keyframes blurin2 {
	0% {
		opacity: 0;
		transform: translateY(50px);
		-ms-filter: blur(6px);
		filter: blur(6px);
	}
	100% {
		opacity:1;
		transform: translateY(0px);
		-ms-filter: blur(0px);
		filter: blur(0px);
	}
}

/* color */
.txt-color-normal{color: #333;}
.txt-white{color: #ffffff;}
.txt-red{color: red;}
.txt-color1{color: #FFE93C}
.txt-color2{color: #F1F1E9}
.txt-color3{color: #021745}
.txt-color4{color: #EBF5E5}
.bg-white{background-color: #ffffff;}
.bg-black{background-color: black}
.bg-color1{background-color: #FFE93C}
.bg-color2{background-color: #F1F1E9}
.bg-color3{background-color: #021745}
.bg-color4{background-color: #EBF5E5}
.border-color1{border-color: #FFE93C}
.border-color2{border-color: #F1F1E9}
.border-color3{border-color: #021745}
.border-color4{border-color: #EBF5E5}

.hvr-txt-color-normal:hover{color: #000000;}
.hvr-txt-white:hover{color: #ffffff;}
.hvr-txt-red:hover{color: red;}
.hvr-txt-color1:hover{color: #FFE93C}
.hvr-txt-color2:hover{color: #F1F1E9}
.hvr-txt-color3:hover{color: #021745}
.hvr-txt-color4:hover{color: #EBF5E5} 
.hvr-bg-white:hover{background-color: #ffffff;}
.hvr-bg-black:hover{background-color: black}
.hvr-bg-color1:hover{background-color: #FFE93C}
.hvr-bg-color2:hover{background-color: #F1F1E9}
.hvr-bg-color3:hover{background-color: #021745}
.hvr-bg-color4:hover{background-color: #EBF5E5}
.hvr-border-color1:hover{border-color: #FFE93C}
.hvr-border-color2:hover{border-color: #F1F1E9}
.hvr-border-color3:hover{border-color: #021745}
.hvr-border-color4:hover{border-color: #EBF5E5}

/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
}

/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px){
	.pd_wrap{
		padding: 150px 60px 0;
	}
	.pd_wrap_all{
		padding: 150px 60px 150px;
	}
	.pd_wrap_side{
		padding-left: 60px;
		padding-right: 60px;
	}
/* ---------- common ---------- */
/* ---------- header ---------- */
/* ---------- footer ---------- */
}
/* ---------- 1080px ~ ---------- */
@media screen and (max-width: 1080px){
	.mg_b_1{margin-bottom: 100px;}
	.mg_b_2{margin-bottom: 80px;}
	.mg_b_3{margin-bottom: 60px;}
	.mg_b_4{margin-bottom: 40px;}
	.mg_b_5{margin-bottom: 30px;}
/* ---------- common ---------- */
/* ---------- header ---------- */
/* ---------- footer ---------- */
}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px){
	.pd_wrap{
		padding: 100px 50px 0;
	}
	.pd_wrap_all{
		padding: 100px 50px 100px;
	}
	.pd_wrap_side{
		padding-left: 50px;
		padding-right: 50px;
	}
	.pd_wrap_t{
		padding-top: 100px;
	}
	.pd_wrap_b{
		padding-bottom: 100px;
	}
	.cate_wrap > .cate{
		padding-top: 100px;
	}
/* ---------- common ---------- */
/* ---------- header ---------- */
/* ---------- footer ---------- */
}
/* ---------- スマートフォン ---------- */
/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px){
	.pd_wrap{
		padding: 80px 20px 0;
	}
	.pd_wrap_all{
		padding: 80px 20px 80px;
	}
	.pd_wrap_side{
		padding-left: 20px;
		padding-right: 20px;
	}
	.pd_wrap_t{
		padding-top: 80px;
	}
	.pd_wrap_b{
		padding-bottom: 80px;
	}
	.cate_wrap > .cate{
		padding-top: 80px;
	}
	.mg_b_1{margin-bottom: 80px;}
	.mg_b_2{margin-bottom: 60px;}
	.mg_b_3{margin-bottom: 50px;}
	.mg_b_4{margin-bottom: 30px;}
	.mg_b_5{margin-bottom: 20px;}
/* ---------- common ---------- */
/* ---------- header ---------- */
/* ---------- footer ---------- */
}
/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px){
}