@charset "utf-8";
/* CSS Document */
/* dianalogue_common.css */
/* 基礎的な要素はこちらに。変数にしてあるので、号ごとに色変えを行う場合は個別で変数を更新 */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Jost:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');

/* reset and settings */
html,body {
  margin: 0;
  padding: 0;
    --rate: 1;
}
.dianalogue {
  --rate: 1;
  
  --font-base: "Noto Sans JP", sans-serif;
  --font-serif: "Noto Serif JP", serif;
  --font-en: "Jost", sans-serif;
  --font-en-serif: "EB Garamond", serif;
  
  --c-base: #404040;
  --c-00: #f1f3f4;
  --c-01: #eef9ff;
  --c-02: #128dca;
  --c-03: #fcefef;
  --c-04: #81c2e6;
  --c-05: #359fd4;
  
  --fs: 24;
  --lh: 43;
  font-size: clamp(calc(var(--fs) * 0.5px * var(--rate)),calc(var(--fs) / 650 * 100vw  * var(--rate)),calc(var(--fs) * 1px * var(--rate)));
  font-family: var(--font-base);
  color:var(--c-base);
  letter-spacing: 0.08em;
  /*
  font-variant-east-asian: normal;
  font-feature-settings: "palt" 0, "chws" 0;
  */
  box-sizing: border-box;
  position: relative;
  min-height: calc(100% - 74px);
  /* Safariで背景が固定されないため無効化
  overflow: hidden;
  */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: stretch;
  align-items: stretch;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.dianalogue * {
  color:var(--c-base);
  font-size: clamp(calc(var(--fs) * 0.5px * var(--rate)),calc(var(--fs) / 650 * 100vw  * var(--rate)),calc(var(--fs) * 1px * var(--rate)));
  font-family: var(--font-base);
  letter-spacing: 0.08em;
  line-height:calc(var(--lh) / var(--fs) * 1em);
  margin: 0;
  padding: 0;
}


.dianalogue .dl-area {
  background: #fff;
  max-width: 650px;
  margin: 0 auto;
  padding: 0;
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 100%;
  position: relative;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  flex-direction: column;
}
/* Safariで背景が固定されないため、background-attachment: fixedを廃止
.dianalogue .dl-bg {
  display: block;
  position:absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  z-index: 1;
  background-image: url(../../logue2026summer/img/bg_pc.jpg);
  background-repeat: no-repeat;
  background-position: top center;
  -webkit-background-size: cover;
  background-size: cover;
  background-attachment: fixed;
} */


@media screen and (min-width:650px){
  .dianalogue .dl-area {
    box-shadow: 0px 0px clamp(10px,calc(20 / 650 * 100vw),20px) rgba(79,170,255,0.3);
  }
}
@media screen and (min-width:960px){
  .dianalogue .dl-area {
    width: 420px;
  }
  html {
   --rate:  (420 / 650);
 }
  .dianalogue {
    --rate:  (420 / 650);
  }

}
.dianalogue a {
  color: inherit;
  text-decoration: none;
  font-size: inherit;
  font-weight: inherit;
  opacity: 1;
  text-decoration: none;
  transition: all .5s ease;
}
.dianalogue a:hover {
  opacity: 0.7;
  text-decoration: none;
}

.dianalogue img {
  max-width: 100%;
  height: auto;
  width: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  vertical-align: bottom;
}

/* --------------------------------------------------------------------------*/

/* header */
.dianalogue .dl-header {
  box-sizing: border-box;
  background: #fff;
  display: block;
  width: 100%;
  padding: calc(clamp(12px,calc(24 / 650 * 100vw),24px) * var(--rate) ) 0 calc( clamp(8px,calc(16 / 650 * 100vw),16px) * var(--rate));
}
.dianalogue .dl-header__logo {
  display: block;
  width: calc(clamp(112px,calc(223 / 650 * 100vw),223px)* var(--rate));
  margin: 0 auto;
}




/* --------------------------------------------------------------------------*/
/* compornent */
.dianalogue .dl-mv h1 {
  margin: 0 auto;
}
.dianalogue .dl-box {
  box-sizing: border-box;
  display: block;
  padding: calc(clamp(25px,calc(50 / 650 * 100vw),50px) * var(--rate)) calc(clamp(30px,calc(60 / 650 * 100vw),60px) * var(--rate)); 
}
.dianalogue .dl-box--wide {
  padding: calc(clamp(25px,calc(50 / 650 * 100vw),50px) * var(--rate)) calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate)); 
}
.dianalogue .dl-box--image {
  background-image: url(../img/bg_cloud.jpg);
  -webkit-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;;
  background-position: top center;
}
.dianalogue .dl-box--grid {
  background-image: url(../img/bg_grid.jpg);
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  background-repeat: repeat-y;
  background-position: top center;
}

.dianalogue .dl-box--c-00 {
  background: var(--c-00);
}
.dianalogue .dl-box--c-01 {
  background: var(--c-01);
}
.dianalogue .dl-box--photo {
  background-image: url(../../logue2026summer/img/summer_collection_img.jpg);
  -webkit-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;;
  background-position: top center;
  padding: calc(clamp(45px,calc(90 / 650 * 100vw),90px) * var(--rate)) calc(clamp(30px,calc(60 / 650 * 100vw),60px) * var(--rate)); 
  
}

.dianalogue p {
  font-family: var(--font-base);
}
.dianalogue p  + p {
  margin-top: calc(clamp(20px,calc(40 / 650 * 100vw),40px) * var(--rate));
}
.dianalogue .dl-text--center {
  text-align: center;
}



/* button */
.dianalogue .dl-btnbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: stretch;
  align-items: stretch;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: calc(clamp(15px,calc(30 / 650 * 100vw),30px) * var(--rate));
  flex-direction: column;
  width: 100%;
}
.dianalogue * + .dl-btnbox {
  margin-top: calc(clamp(20px,calc(40 / 650 * 100vw),40px) * var(--rate));
}

.dianalogue .dl-btn--arrow {
  --buttoncolor: #ccc;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: center;
  border: calc(clamp(1px,calc(2 / 650 * 100vw),2px) * var(--rate)) solid #c6cccf;
  background: #fff;
  text-align: center;
  --fs: 22;
  --lh: 33;
  border-radius: calc(clamp(50px,calc(100 / 650 * 100vw),100px)* var(--rate));
  box-sizing: border-box;
  padding: calc(clamp(5px,calc(10 / 650 * 100vw),10px) * var(--rate)) calc(clamp(45px,calc(90 / 650 * 100vw),90px)* var(--rate)) ;
  min-height:  calc(clamp(50px,calc(100 / 650 * 100vw),100px) * var(--rate));
  margin: 0;
  position: relative;
}
.dianalogue .dl-btn--arrow:after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M0 6.79v-1.6h16.93c-1.15-1.04-2.62-2.72-3.63-4.34l1.17-.85c1.47 2.28 3.61 4.52 5.53 6-1.92 1.48-4.07 3.72-5.53 6l-1.17-.85c1.01-1.63 2.49-3.31 3.63-4.34H0Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  -webkit-background-size: calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate)) auto;
  background-size: calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate)) auto;
  background-position: 50% 50%;
  background-color: var(--buttoncolor);
  position: absolute;
  top: 50%;
  right: calc(clamp(15px,calc(30 / 650 * 100vw),30px) * var(--rate));
  z-index: 2;
  width: calc(clamp(20px,calc(40 / 650 * 100vw),40px) * var(--rate));
  height: calc(clamp(20px,calc(40 / 650 * 100vw),40px) * var(--rate));
  display: block;
  border-radius: calc(clamp(15px,calc(30 / 650 * 100vw),30px) * var(--rate));
  transform: translate3d(0,-50%,0);
}
.dianalogue .dl-btn--arrow--wh:after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath fill='%23fff' d='M0 6.79v-1.6h16.93c-1.15-1.04-2.62-2.72-3.63-4.34l1.17-.85c1.47 2.28 3.61 4.52 5.53 6-1.92 1.48-4.07 3.72-5.53 6l-1.17-.85c1.01-1.63 2.49-3.31 3.63-4.34H0Z'/%3E%3C/svg%3E");
}

.dianalogue .dl-btn--arrow.anclink:after {
  content: "";
  transform: translate3d(0,-50%,0) rotate(90deg);
}

.dianalogue .dl-btn--arrow span {
  display: block;
}
.dianalogue .dl-btn--arrow:hover {
  text-decoration: none;
}



/* title */
.dianalogue .dl-title__spell {
  margin-bottom: calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate));
}
.dianalogue .dl-title__spell span {
  font-family: var(--font-en-serif);
  --fs: 22;
  font-weight: 500;
  border-bottom: 1px solid;
}
.dianalogue .dl-title__catch {
  font-family: var(--font-serif);
  --fs: 28;
  --lh: 42;
  font-weight: 500;
  margin: calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate)) auto;
}
.dianalogue .dl-title__title {
  margin: 0;
}
.dianalogue .dl-title__title span {
  font-family: var(--font-serif);
  --fs: 50;
  --lh: 75;
  font-weight: 500;
  color: var(--c-02);
}

.dianalogue .dl-subtitle__title {
  --fs: 28;
  --lh: 42;
  font-weight: 500;
  margin: calc(clamp(5px,calc(10 / 650 * 100vw),10px)* var(--rate)) auto;
}
.dianalogue .dl-subtitle--topbar {
  margin-top: calc(clamp(5px,calc(10 / 650 * 100vw),10px)* var(--rate));
  margin-bottom: calc(clamp(20px,calc(40 / 650 * 100vw),40px)* var(--rate));
}
.dianalogue .dl-subtitle--topbar:before {
  content: "";
  display: block;
  width: calc(clamp(25px,calc(50 / 650 * 100vw),50px)* var(--rate));
  height: calc(clamp(2px,calc(4 / 650 * 100vw),4px) * var(--rate));
  background: var(--c-base);
}
.dianalogue .dl-subtitle--bottombar {
  border-bottom: 1px solid #c6cccf;
  padding-bottom: calc(clamp(7px,calc(15 / 650 * 100vw),15px) * var(--rate));
  position: relative;
  margin-bottom: calc(clamp(7px,calc(15 / 650 * 100vw),15px) * var(--rate));
}
.dianalogue .dl-subtitle--bottombar:after {
  content: "";
  display: block;
  width: calc(clamp(25px,calc(50 / 650 * 100vw),50px) * var(--rate));
  height: calc(clamp(2px,calc(4 / 650 * 100vw),4px) * var(--rate));
  background: var(--c-base);
  position: absolute;
  bottom: -1px;
  left: 0;
}
.dianalogue p + .dl-subtitle--bottombar {
  margin-top: calc(clamp(25px,calc(50 / 650 * 100vw),50px) * var(--rate));
}


.dianalogue .dl-title + .dl-subtitle--topbar {
  margin-top: calc(clamp(25px,calc(50 / 650 * 100vw),50px) * var(--rate));
}





/* box */
.dianalogue .dl-shadowbox {
  position: relative;
  display: block;
  margin: 0 auto calc(clamp(20px,calc(40 / 650 * 100vw),40px) * var(--rate));
  width: calc(clamp(215px,calc(530 / 650 * 100vw),530px) * var(--rate));
}
.dianalogue .dl-shadowbox:after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--boxcolor);
  z-index: 1;
  opacity: 0.2;
  bottom: calc((clamp(7px,calc(15 / 650 * 100vw),15px) * var(--rate)) * -1);
  right: calc((clamp(7px,calc(15 / 650 * 100vw),15px) * var(--rate)) * -1);
}
.dianalogue .dl-shadowbox__inner {
  position: relative;
  z-index: 2;
  background: #fff;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: stretch;
  align-items: stretch;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: calc(clamp(3px,calc(5 / 650 * 100vw),5px) * var(--rate));
}
.dianalogue .dl-shadowbox__title {
  background: var(--boxcolor);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: center;
  flex-direction: column;
  color: #fff;
  width: calc(clamp(25px,calc(50 / 650 * 100vw),50px) * var(--rate));
  font-family: var(--font-en);
  --fs: 40;
  font-weight: 500;
}
.dianalogue .dl-shadowbox__text {
  width: calc(100% - (clamp(40px,calc(80 / 650 * 100vw),80px) * var(--rate)));
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: flex-start;
  align-items: flex-start;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: center;
  flex-direction: column;
  box-sizing: border-box;
  padding:  calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate)) 0;
}
.dianalogue .dl-blanklist {
  list-style: none;
}
.dianalogue .dl-blanklist__item {
  --fs: 24;
  --lh: 44;
  font-weight: 400;
}
.dianalogue .dl-blanklist__item:before {
  content: "□";
  display: inline-block;
  margin-right: 0.3em;
}

.dianalogue .dl-checklist {
  display: block;
  background: var(--c-01);
  width: calc(clamp(280px,calc(560 / 650 * 100vw),560px) * var(--rate));
  box-sizing: border-box;
  padding: calc(clamp(15px,calc(30 / 650 * 100vw),30px) * var(--rate)) calc(clamp(18px,calc(35 / 650 * 100vw),35px) * var(--rate));
  margin: calc(clamp(15px,calc(30 / 650 * 100vw),30px) * var(--rate)) auto;
}
.dianalogue .dl-checklist__list {
  margin: 0 auto;
  padding: 0;
  border-left: calc(clamp(2px,calc(4 / 650 * 100vw),4px) * var(--rate))  solid var(--c-02);
  list-style: none;
  box-sizing: border-box;
  padding-left:  calc(clamp(13px,calc(26 / 650 * 100vw),26px) * var(--rate));
}
.dianalogue .dl-checklist__item {
  color: var(--c-02);
  --fs:22;
  --lh:40;
  font-weight: 500;
  
}
.dianalogue .dl-checklist__item:before {
  content: "✓ ";
}

.dianalogue .dl-numberlist {
  margin:  calc(clamp(15px,calc(30 / 650 * 100vw),30px) * var(--rate)) auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: flex-start;
  align-items: flex-start;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: flex-start;
  flex-direction: column;
  width: 100%;
  gap:calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate));
  counter-reset: listnum;
}
.dianalogue .dl-numberlist__title {
  border-bottom: 1px solid #c6cccf;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: flex-start;
  gap: calc(clamp(5px,calc(10 / 650 * 100vw),10px) * var(--rate));
  --fs: 26;
  --lh: 39;
  font-weight: 500;
  color: var(--c-02);
  box-sizing: border-box;
  padding: calc(clamp(5px,calc(10 / 650 * 100vw),10px) * var(--rate));
  background: var(--c-01);
}
.dianalogue .dl-numberlist__title span {
  color: var(--c-02);
  border-left: calc(clamp(1px,calc(2 / 650 * 100vw),2px) * var(--rate)) solid #c6cccf;
  margin: 0;
  box-sizing: border-box;
  padding-left: calc(clamp(15px,calc( 30 / 650 * 100vw),30px) * var(--rate));
  min-height: calc(clamp(30px,calc( 60 / 650 * 100vw),60px) * var(--rate));
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: flex-start;
}
.dianalogue .dl-numberlist__title:before {
  counter-increment: listnum;
  content: counter(listnum, decimal-leading-zero);
  font-family: var(--font-en-serif);
  font-size: calc(42 / 26 * 1em);
  font-weight: 500;
  color: var(--c-base);
  width:  calc(clamp(30px,calc( 60 / 650 * 100vw),60px) * var(--rate));
  text-align: center;
}

.dianalogue .dl-numberlist__box {
  background: #f1f3f4;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: stretch;
  align-items: stretch;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%;
  flex-direction: column;
  gap:calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate));
  padding: calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate));
  box-sizing: border-box;
}
.dianalogue .dl-numberlist__box--2col {
  flex-direction: row;
}

.dianalogue .dl-numberlist__box--2col .dl-numberlist__text {
  width: calc(100%  - clamp(95px,calc(190 / 650 * 100vw),190px) * var(--rate));
}
.dianalogue .dl-numberlist__box--2col .dl-numberlist__image {
  width: calc(clamp(90px,calc(180 / 650 * 100vw),180px) * var(--rate));
}
.dianalogue .dl-numberlist__text p {
  display: block;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  --fs:22;
  --lh: 40;
  padding: calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate)) calc(clamp(15px,calc(30 / 650 * 100vw),30px) * var(--rate));
  text-align: justify;
}
.dianalogue .dl-numberlist__note {
  --fs: 16;
  --lh: 24;
}
.dianalogue .dl-borderlinelist {
  margin: calc(clamp(15px,calc( 30 / 650 * 100vw),30px) * var(--rate)) auto;
  display: block;
  box-sizing: border-box;
  border: calc(clamp(1px,calc( 2 / 650 * 100vw),2px) * var(--rate)) solid #c6cccf;
  padding: calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate));
}
.dianalogue .dl-borderlinelist__item {
  display: block;
}
.dianalogue .dl-borderlinelist__item + .dl-borderlinelist__item {
  margin-top: calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate));
  padding-top: calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate));
  border-top: 1px solid #c6cccf;
  
}



.dianalogue .dl-labelbox {
  position: relative;
  display: block;
  width: 100%;
  margin: calc(clamp(35px,calc(70 / 650 * 100vw),70px) * var(--rate)) auto calc(clamp(20px,calc(40 / 650 * 100vw),40px) * var(--rate)) ;
  background-color: #fff;
  box-sizing: border-box;
  border: calc(clamp(2px,calc(4 / 650 * 100vw),4px) * var(--rate)) solid var(--boxcolor);
  padding: calc(clamp(3px,calc(6 / 650 * 100vw),6px) * var(--rate));
}
.dianalogue .dl-labelbox__label {
  width: calc(420 / 610 * 100%);
  background: var(--boxcolor);
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: center;
  gap:calc(clamp(5px,calc(10 / 650 * 100vw),10px) * var(--rate));
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate3d(-50%,-50%,0);
  min-height: calc(clamp(35px,calc(70 / 650 * 100vw),70px) * var(--rate));
}
.dianalogue .dl-labelbox__labelicon {
  --fs: 40;
  color: var(--boxcolor);
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: center;
  height: calc(1em * (50 / 40));
  width: calc(1em * (50 / 40));
  border-radius: 2em;
  font-family: var(--font-en);
  font-weight: 500;
}
.dianalogue .dl-labelbox__labeltext span {
  color: #fff;
  border-bottom: 1px solid;
  --fs: 24;
  --lh: 36;
  font-weight: 500;
  
}

.dianalogue .dl-labelbox__content {
  display: block;
  box-sizing: border-box;
  padding-top: calc(clamp(20px,calc(40 / 650 * 100vw),40px) * var(--rate));
  text-align: center;
}
.dianalogue .dl-labelbox__content hr {
  border: none;
  margin: calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate)) auto;
  display: block;
  width: 100%;
  height: 1px;
  background-color: #c6cccf;
}
.dianalogue .dl-labelbox__title {
  display: block;
  box-sizing: border-box;
  padding: calc(clamp(5px,calc(10 / 650 * 100vw),10px) * var(--rate)) 0;
}
.dianalogue .dl-labelbox__titlecatch {
  --fs: 26;
  --lh: 53;
}
.dianalogue .dl-labelbox__titletext {
  --fs: 40;
  --lh: 53;
  color: var(--boxcolor);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.dianalogue .dl-labelbox__text {
  display: block;
  box-sizing: border-box;
  padding: 0 calc(clamp(5px,calc(10 / 650 * 100vw),10px) * var(--rate));
  margin: calc(clamp(5px,calc(10 / 650 * 100vw),10px) * var(--rate)) auto;
}


/* decoration */
.dianalogue .dl-scrolldown {
  text-align: center;
  --fs: 16;
  font-family: var(--font-en);
  font-weight: 700;
  --lh: 24;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: center;
  flex-direction: column;
}
.dianalogue .dl-scrolldown:after {
  content: "";
  display: block;
  width: calc(clamp(50px,calc(100 / 650 * 100vw),100px) * var(--rate));
  height: calc(clamp(22px,calc(44 / 650 * 100vw),44px) * var(--rate));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 99.6 42.15'%3E%3Cpolyline points='97.8 2.4 49.8 38.4 1.8 2.4' fill='none' stroke='%23000' stroke-width='6' stroke-miterlimit='10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  margin-top: -0.3em;
}

.dianalogue .dl-downarrow {
  width: calc(clamp(20px,calc(40 / 650 * 100vw),40px) * var(--rate));
  display: block;
  margin: calc(clamp(15px,calc(30 / 650 * 100vw),30px) * var(--rate)) auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  flex-direction: column;
  gap:calc(clamp(5px,calc(10 / 650 * 100vw),10px) * var(--rate));
}
.dianalogue .dl-downarrow__item {
  display: block;
  width: calc(clamp(20px,calc(40 / 650 * 100vw),40px) * var(--rate));
  height: calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38.66 20.17'%3E%3Cpolyline points='37.33 1.49 19.33 17.49 1.33 1.49' fill='none' stroke='%23000' stroke-width='4' stroke-miterlimit='10'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38.66 20.17'%3E%3Cpolyline points='37.33 1.49 19.33 17.49 1.33 1.49' fill='none' stroke='%23000' stroke-width='4' stroke-miterlimit='10'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--c-04);
}



.dianalogue .dl-tilelist {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   -ms-align-items: stretch;
   align-items: stretch;
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   justify-content: flex-start;
  gap: calc(clamp(30px,calc(60 / 650 * 100vw),60px)* var(--rate)) calc(clamp(25px,calc(50 / 650 * 100vw),50px)* var(--rate));
  margin: calc(clamp(20px,calc(40 / 650 * 100vw),40px)* var(--rate)) auto ;
}
.dianalogue .dl-carditem {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: stretch;
  align-items: stretch;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: flex-start;
  width: calc((100% - (clamp(25px,calc(50 / 650 * 100vw),50px)* var(--rate))) * 0.5);
  flex-direction: column;
}

.dianalogue .dl-carditem__image {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  overflow: hidden;
  display: block;
  position: relative;
}
.dianalogue .dl-carditem__image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dianalogue .dl-carditem__title {
  --fs: 24;
  --lh: 36;
  font-weight: 700;
  margin: calc(clamp(5px,calc(10 / 650 * 100vw),10px)* var(--rate)) auto;
}
.dianalogue .dl-carditem__text {
  --fs: 22;
  --lh: 40;
  font-weight: 400;
}
.dianalogue .dl-carditem__btn {
  margin-top: auto;
  margin-bottom: 0;
  text-align: center;
  box-sizing: border-box;
  padding-top: calc(clamp(10px,calc(20 / 650 * 100vw),20px)* var(--rate));
}
.dianalogue .dl-carditem__btnitem {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: center;
  flex-direction: column;
  border: 1px solid;
  width: 100%;
  box-sizing: border-box;
  --fs:20;
  min-height: calc(clamp(30px,calc(60 / 650 * 100vw),60px)* var(--rate));
  border-radius: 100svh;
}

.dianalogue .dl-banner {
  display: block;
  border: 1px solid #404040;
  padding: calc(clamp(5px,calc(10 / 650 * 100vw),10px)* var(--rate));
  position: relative;
  box-sizing: border-box;
}
.dianalogue .dl-banner:before {
  content: "";
  display: block;
  width:  calc(clamp(16px,calc(32 / 650 * 100vw),32px)* var(--rate));
  height:  calc(clamp(18px,calc(35 / 650 * 100vw),35px)* var(--rate));
  z-index: 3;
  position: absolute;
  bottom: calc(clamp(2px,calc(4 / 650 * 100vw),4px)* var(--rate));
  right: calc(clamp(2px,calc(3 / 650 * 100vw),3px)* var(--rate));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30.937 34.13'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M562.61,6855.73l22.311-22.31,0.707,0.7-22.311,22.31ZM558,6847.65a2.927,2.927,0,0,0,1.5.01,2.653,2.653,0,0,0,1.268-.72,3.418,3.418,0,0,0,.61-0.81,3.239,3.239,0,0,0,.3-0.87,2.9,2.9,0,0,0,.027-0.88l0.871,0.87a3.31,3.31,0,0,1-.3,1.2,4.149,4.149,0,0,1-.855,1.15,3.992,3.992,0,0,1-1.268.86,3.808,3.808,0,0,1-1.451.28,3.657,3.657,0,0,1-1.474-.31,4.372,4.372,0,0,1-2.24-2.24,3.817,3.817,0,0,1-.307-1.47,3.728,3.728,0,0,1,.284-1.45,3.857,3.857,0,0,1,.855-1.27,4.1,4.1,0,0,1,1.152-.85,3.191,3.191,0,0,1,1.2-.3l0.872,0.87a2.585,2.585,0,0,0-.875.03,2.859,2.859,0,0,0-.872.3,3.394,3.394,0,0,0-.812.61,2.72,2.72,0,0,0-.724,1.27,2.962,2.962,0,0,0,.008,1.49A3.3,3.3,0,0,0,558,6847.65Zm2.1-9.77,4.823,4.82,2.139-2.14,0.622,0.62-2.8,2.8-5.445-5.44Zm4.123-4.12,5.445,5.44-0.662.66-5.444-5.44Zm6.374,1.29a2.923,2.923,0,0,0,1.5.01,2.648,2.648,0,0,0,1.268-.72,3.423,3.423,0,0,0,.611-0.81,3.2,3.2,0,0,0,.3-0.87,2.836,2.836,0,0,0,.027-0.88l0.872,0.87a3.31,3.31,0,0,1-.3,1.2,4.135,4.135,0,0,1-.856,1.15,3.977,3.977,0,0,1-1.267.86,3.812,3.812,0,0,1-1.451.28,3.654,3.654,0,0,1-1.474-.31,4.021,4.021,0,0,1-1.33-.91,4.108,4.108,0,0,1-.91-1.33,3.8,3.8,0,0,1-.307-1.47,3.71,3.71,0,0,1,.283-1.45,3.86,3.86,0,0,1,.856-1.27,4.365,4.365,0,0,1,1.151-.86,3.187,3.187,0,0,1,1.2-.29l0.871,0.87a2.586,2.586,0,0,0-.875.03,2.863,2.863,0,0,0-.871.3,3.378,3.378,0,0,0-.813.61,2.71,2.71,0,0,0-.723,1.27,2.951,2.951,0,0,0,.008,1.49A3.3,3.3,0,0,0,570.6,6835.05Zm2.1-9.77,5.445,5.44-0.661.66-5.445-5.44Zm2.956-2.96,0.194,4.91,5.367,0.42-0.817.82-5.335-.42-0.226-4.91ZM585,6845v10H575Z' transform='translate(-554.688 -6822.31)'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}
.dianalogue .dl-banner:after {
  content: "";
  display: block;
  width:  calc(clamp(30px,calc(60 / 650 * 100vw),60px)* var(--rate));
  height:  calc(clamp(30px,calc(60 / 650 * 100vw),60px)* var(--rate));
  z-index: 2;
  position: absolute;
  bottom: -1px;
  right: -1px;
  background-color: #404040;
  opacity: 0.8;
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
}
.dianalogue .dl-bannerlist__categories {
  margin: calc(clamp(5px,calc(10 / 650 * 100vw),10px)* var(--rate)) auto 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: flex-start;
  gap: calc(clamp(5px,calc(10 / 650 * 100vw),10px)* var(--rate));
}
.dianalogue .dl-bannerlist__categories span {
  --fs: 16;
  --lh: 24;
  background-color: var(--c-03);
  display: inline-block;
  padding: 0.2em 1em;
  border-radius: 2em;
}

.dianalogue .dl-bannerlist {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   -ms-align-items: stretch;
   align-items: stretch;
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   justify-content: flex-start;
  gap: calc(clamp(15px,calc(30 / 650 * 100vw),30px)* var(--rate));
  margin: calc(clamp(20px,calc(40 / 650 * 100vw),40px)* var(--rate)) auto ;
}
.dianalogue .dl-bannerlist__box {
  width: calc((100% - (clamp(15px,calc(30 / 650 * 100vw),30px)* var(--rate))) / 2);
}
.dianalogue .dl-bannerlist__box--long {
  width: 100%;
}






.dianalogue .dl-scrolllist {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
   -ms-align-items: stretch;
   align-items: stretch;
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   justify-content: flex-start;
  gap: calc(clamp(15px,calc(30 / 650 * 100vw),30px)* var(--rate)) calc(clamp(25px,calc(50 / 650 * 100vw),50px)* var(--rate));
  margin: calc(clamp(20px,calc(40 / 650 * 100vw),40px)* var(--rate)) auto 0;
}
.dianalogue .dl-scrolllist .dl-carditem {
  flex-shrink: 0;
}
.dianalogue .dl-simplebar {
  box-sizing: border-box;
  padding-bottom: calc(clamp(25px,calc(50 / 650 * 100vw),50px)* var(--rate));
  margin-bottom: calc(clamp(15px,calc(30 / 650 * 100vw),30px)* var(--rate));
}

.dianalogue .dl-simplebar  .simplebar-scrollbar:before {
  background: #404040;
  opacity: 1;
  height: calc(clamp(4px,calc(8 / 650 * 100vw),8px)* var(--rate));
  border-radius: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.dianalogue .dl-simplebar .simplebar-track {
  background-color: #c6cccf;
  height: calc(clamp(4px,calc(8 / 650 * 100vw),8px)* var(--rate));
}

.magnific__content {
  width: calc(clamp(300px,calc(600 / 650 * 100vw),600px) * var(--rate));
  margin: 0 auto;
  position: relative;
}

.dianalogue .dl-eventbanner {
  display: block;
  width: calc(clamp(190px,calc(380 / 650 * 100vw),380px) * var(--rate));
  flex-shrink: 0;
  box-sizing: border-box;
}


/* --------------------------------------------------------------------------*/
.dianalogue .dl-footer__box {
  width: calc(clamp(245px,calc(590 / 650 * 100vw),590px) * var(--rate));
  margin: 0 auto;
  border-top: 1px solid #c6cccf;
  padding: calc(clamp(15px,calc(30 / 650 * 100vw),30px) * var(--rate)) 0 0;
}
.dianalogue .dl-footer__logo {
  width: calc(clamp(156px,calc(247 / 650 * 100vw),322px) * var(--rate));
  box-sizing: border-box;
  padding-left: calc(clamp(6px,calc(13 / 650 * 100vw),13px) * var(--rate));
  margin: calc(clamp(30px,calc(60 / 650 * 100vw),60px) * var(--rate))  auto;
  text-align: center;
}
.dianalogue .dl-footer__logotext {
  --fs:22;
  display: inline-block;
  text-align: center;
  margin: calc(clamp(15px,calc(30 / 650 * 100vw),30px) * var(--rate)) auto 0;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}
.dianalogue .dl-enqbtn .dl-btn--arrow {
  background: #f7c8ce;
  border: none;
  --buttoncolor: #fcefef;
  width: calc(clamp(225px,calc(450 / 650 * 100vw),450px) * var(--rate));
  margin: 0 auto;
  min-height: calc(clamp(40px,calc(80 / 650 * 100vw),80px) * var(--rate));
  padding: calc(clamp(5px,calc(10 / 650 * 100vw),10px) * var(--rate)) calc(clamp(30px,calc(60 / 650 * 100vw),60px)* var(--rate));
}
.dianalogue .dl-footer__sns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: center;
  gap: calc(clamp(15px,calc(30 / 650 * 100vw),30px) * var(--rate));
  margin: calc(clamp(30px,calc(60 / 650 * 100vw),60px) * var(--rate))  auto;
}
.dianalogue .dl-footer__snsicon {
  display: block;
  margin: 0;
  width: calc(clamp(35px,calc(70 / 650 * 100vw),70px) * var(--rate));
}
.dianalogue .dl-copyright {
  text-align: center;
  border-top: calc(clamp(5px,calc(10 / 650 * 100vw),10px) * var(--rate)) solid #f7c8ce;
  --fs: 16;
  box-sizing: border-box;
  padding: calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate));
}

/* --------------------------------------------------------------------------*/
/* product page */
.dianalogue .dl-pagetitle {
  background: var(--c-04);
  text-align: center;
  margin: 0;
  width: 100%;
  display: block;
  box-sizing: border-box;
  padding: calc(clamp(5px,calc(10 / 650 * 100vw),10px) * var(--rate));
}
.dianalogue .dl-pagetitle__text {
  color: #fff;
  margin: 0 auto;
  --fs: 36;
  --lh: 54;
  font-family: var(--font-serif);
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  width: 100%;
  box-sizing: border-box;
  padding:  calc(clamp(15px,calc(30 / 650 * 100vw),30px) * var(--rate)) 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: center;
  flex-direction: column;
  min-height: calc(clamp(55px,calc(110 / 650 * 100vw),110px) * var(--rate));
  font-feature-settings: 'pkna' 1;
}
.dianalogue .dl-pagetitle__text span {
  color: #fff;
  --fs:24;
  font-family: var(--font-serif);
}
.dianalogue .dl-intro {
  border-bottom: calc(clamp(5px,calc(10 / 650 * 100vw),10px) * var(--rate)) solid #f1f3f4;
  padding-bottom: calc(clamp(40px,calc(80 / 650 * 100vw),80px) * var(--rate));
}
.dianalogue .dl-intro *:last-child {
  margin-bottom: 0;
}
.dianalogue .dl-intro p {
  text-align: center;
  letter-spacing: 0.08em;
}
.dianalogue .dl-image {
  display: block;
  margin: calc(clamp(20px,calc(40 / 650 * 100vw),40px) * var(--rate))  auto ;
}
.dianalogue .dl-image--mb20 {
  margin-bottom: calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate));
}
.dianalogue .dl-image--mt0 {
  margin-top: 0;
}
.dianalogue .dl-intro .dl-image {
 margin: calc(clamp(30px,calc(60 / 650 * 100vw),60px) * var(--rate)) auto calc(clamp(20px,calc(40 / 650 * 100vw),40px) * var(--rate));
 max-width: calc(clamp(215px,calc(530 / 650 * 100vw),530px) * var(--rate));
}

.dianalogue .dl-intro .dl-image--mt0 {
  margin-top: 0;
}
.dianalogue .dl-image:last-child {
 margin-bottom: calc(clamp(15px,calc(30 / 650 * 100vw),30px) * var(--rate)) ;
}
.dianalogue .dl-intro .dl-image:last-child {
  margin-bottom: 0;
}

.dianalogue .dl-box--reading > *:last-child {
  margin-bottom: calc(clamp(5px,calc(10 / 650 * 100vw),10px) * var(--rate)) ;
}
.dianalogue .dl-box--reading .dl-image {
  margin-top: calc(clamp(15px,calc(30 / 650 * 100vw),30px) * var(--rate)) ;
}
.dianalogue .dl-box--staff {
  padding-top: calc(clamp(30px,calc( 60 / 650 * 100vw),60px) * var(--rate));
}

.dianalogue .dl-product__btn + .dl-subtitle--staff {
  margin-top: calc(clamp(30px,calc( 60 / 650 * 100vw),60px) * var(--rate));
}
.dianalogue .dl-subtitle--staff {
  text-align: center;
  border-top: calc(clamp(3px,calc(5 / 650 * 100vw),5px) * var(--rate)) solid var(--c-04);
  border-bottom: calc(clamp(3px,calc(5 / 650 * 100vw),5px) * var(--rate)) solid var(--c-04);
  background-color: #fff;
  box-sizing: border-box;
  margin: 0 auto;
  padding: calc(clamp(7px,calc( 15 / 650 * 100vw),15px) * var(--rate));
}
.dianalogue .dl-subtitle--staff:first-child {
  margin-top:  calc(clamp(7px,calc( 15 / 650 * 100vw),15px) * var(--rate));
}
.dianalogue .dl-subtitle--stafftext {
  margin: 0 auto;
  --fs: 26;
  --lh: 39;
  color: var(--c-02);
}
.dianalogue .dl-comment {
  display: block;
  border-radius: calc(clamp(10px,calc( 20 / 650 * 100vw),20px) * var(--rate));
  background-color: #fff;
  width: 100%;
  margin: calc(clamp(30px,calc( 60 / 650 * 100vw),60px) * var(--rate)) auto calc(clamp(20px,calc(40 / 650 * 100vw),40px) * var(--rate));
  padding: calc(clamp(15px,calc( 30 / 650 * 100vw),30px) * var(--rate));
}
.dianalogue .dl-comment__prof {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: flex-start;
  align-items:flex-start;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: flex-start;
  gap:calc(clamp(10px,calc( 20 / 650 * 100vw),20px) * var(--rate));
  padding-bottom: calc(clamp(10px,calc( 20 / 650 * 100vw),20px) * var(--rate));
  margin: 0 auto;
}
.dianalogue .dl-comment__image {
  display: block;
  margin-top: calc(clamp(30px,calc( 60 / 650 * 100vw),60px) * var(--rate) * -1);
  position: relative;
  overflow: hidden;
  border-radius: calc(clamp(42px,calc( 85 / 650 * 100vw),85px) * var(--rate));
  background-color: #fff;
  width: calc(clamp(85px,calc( 170 / 650 * 100vw),170px) * var(--rate));
}
.dianalogue .dl-comment__position span {
  display: inline-block;
  --fs: 20;
  --lh: 30;
  background: var(--c-01);
  border-radius: 2em;
  box-sizing: border-box;
  padding: 0 calc(clamp(7px,calc( 15 / 650 * 100vw),15px) * var(--rate));
  font-weight: 500;
}
.dianalogue .dl-comment__name {
  --fs: 28;
  --lh: 42;
  font-weight: 500;
  color: var(--c-02);
}
.dianalogue .dl-comment__age {
  --fs: 16;
  --lh: 24;
  font-weight: 400;
  margin-top: calc(clamp(2px,calc( 5 / 650 * 100vw),5px) * var(--rate));
}
.dianalogue .dl-comment__text {
  border-top: 1px solid #c6cccf;
  box-sizing: border-box;
  padding-top: calc(clamp(10px,calc( 20 / 650 * 100vw),20px) * var(--rate));
  --fs: 22;
  --lh: 40;
  font-weight: 400;
  width: calc(450 / 470 * 100%);
  text-align: justify;
  margin: 0 auto;
}
.dianalogue .dl-catch {
  text-align: center;
  border-top: calc(clamp(1px,calc( 2 / 650 * 100vw),2px) * var(--rate)) solid var(--c-02);
  border-bottom: calc(clamp(1px,calc( 2 / 650 * 100vw),2px) * var(--rate)) solid var(--c-02);
  margin: calc(clamp(15px,calc( 30 / 650 * 100vw),30px) * var(--rate)) auto;
  padding: calc(clamp(10px,calc( 20 / 650 * 100vw),20px) * var(--rate)) 0;
  position: relative;
}
.dianalogue .dl-catch__label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate3d(-50%,-50%,0);
  display: inline-block;
  text-align: center;
  box-sizing: border-box;
  background: var(--c-04);
  border-radius: 3em;
  color: #fff;
  --fs:26;
  --lh:26;
  padding: calc(clamp(3px,calc( 6 / 650 * 100vw),6px) * var(--rate)) calc(clamp(15px,calc( 30 / 650 * 100vw),30px) * var(--rate)) ;
  word-break: keep-all;
}
.dianalogue .dl-catch__label + .dl-catch__text {
  margin-top: calc(clamp(5px,calc( 10 / 650 * 100vw),10px) * var(--rate)) ;
}
.dianalogue .dl-roundcatch {
  text-align: center;
  background: var(--c-04);
  position: relative;
  display: block;
  border-radius: 100vh;
  padding: calc(clamp(20px,calc( 40 / 650 * 100vw),40px) * var(--rate)) 0;
  max-width: calc(clamp(255px,calc( 510 / 650 * 100vw),510px) * var(--rate));
  box-sizing: border-box;
  display: block;
  margin: calc(clamp(15px,calc( 30 / 650 * 100vw),30px) * var(--rate)) auto;
}
.dianalogue .dl-roundcatch:after {
  content: "";
  display: block;
  position: absolute;
  top: calc(clamp(5px,calc( 10 / 650 * 100vw),10px) * var(--rate));
  bottom: calc(clamp(5px,calc( 10 / 650 * 100vw),10px) * var(--rate));
  left: calc(clamp(5px,calc( 10 / 650 * 100vw),10px) * var(--rate));
  right: calc(clamp(5px,calc( 10 / 650 * 100vw),10px) * var(--rate));
  width: calc(100% - (clamp(5px,calc( 10 / 650 * 100vw),10px)) *2 * var(--rate)));
  height: calc(100% - (clamp(5px,calc( 10 / 650 * 100vw),10px)) *2 * var(--rate)));
  border-radius: 100vh;
  box-sizing: border-box;
  border: 1px solid #fff;
  z-index: 1;
}

.dianalogue .dl-roundcatch__text {
  color: #fff;
  font-weight: 500;
  font-family: var(--font-serif);
  --fs: 30;
  --lh: 45;
  position: relative;
  z-index: 3;
}



.dianalogue .dl-box--obi {
  position: relative;
  overflow: hidden;
  display: block;
}
.dianalogue .dl-box--obi > * {
  position: relative;
  z-index: 2;
}
.dianalogue .dl-box--obi:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  padding-bottom: calc(var(--obisize) / 650 * 100%);
  background-color: var(--obicolor);
  z-index: 1;
}
.dianalogue .dl-box--mt0 {
  margin-top: 0;
}
.dianalogue .dl-box--mb120 {
  margin-bottom: calc(clamp(60px,calc( 120 / 650 * 100vw),120px) * var(--rate));
}
.dianalogue .dl-box--pt0 {
  padding-top: 0;
}
.dianalogue .dl-box--pt20 {
  padding-top: calc(clamp(10px,calc( 20 / 650 * 100vw),20px) * var(--rate));
}

.dianalogue .dl-catch h2 {
  text-align: center;
  color: var(--c-02);
  font-family: var(--font-serif);
  --fs: 30;
  --lh: 45;
  margin: 0 auto;
  padding: 0;
}

.dianalogue .dl-product {
  background-color: #fff;
  display: block;
  margin: calc(clamp(20px,calc( 40 / 650 * 100vw),40px) * var(--rate)) auto;
}
.dianalogue .dl-product__image {
  display: block;
  margin: 0 auto;
}
.dianalogue .dl-product__data {
  display: block;
  box-sizing: border-box;
  padding: calc(clamp(15px,calc( 30 / 650 * 100vw),30px) * var(--rate)) calc(clamp(20px,calc( 40 / 650 * 100vw),40px) * var(--rate));
}
.dianalogue .dl-product__data > *:first-child {
  margin-top: 0;
}
.dianalogue .dl-product__data > *:last-child {
  margin-bottom: 0;
}
.dianalogue .dl-product__name {
  border-left: calc(clamp(2px,calc( 4 / 650 * 100vw),4px) * var(--rate)) solid var(--c-02);
  box-sizing: border-box;
  padding-left: calc(clamp(12px,calc( 25 / 650 * 100vw),25px) * var(--rate));
  --fs: 24;
  --lh: 36;
  font-weight: 500;
}
.dianalogue .dl-product__name--bestprice {
  background-image: url(../img/bestprice_logo.jpg);
  -webkit-background-size: auto calc(clamp(35px,calc( 70 / 650 * 100vw),70px) * var(--rate));
  background-size: auto calc(clamp(35px,calc( 70 / 650 * 100vw),70px) * var(--rate));
  background-repeat: no-repeat;
  background-position: 100% 50%;
  min-height: calc(clamp(35px,calc( 70 / 650 * 100vw),70px) * var(--rate));
}
.dianalogue .dl-product__amount {
  --fs: 18;
  --lh: 27;
  font-weight: 400;
  margin: calc(clamp(10px,calc( 20 / 650 * 100vw),20px) * var(--rate)) auto;
}
.dianalogue .dl-product__price {
  --fs:18;
  --lh: 30;
  font-weight: 400;
  margin-top:  calc(clamp(15px,calc( 30 / 650 * 100vw),30px) * var(--rate));
}
.dianalogue .dl-product__price span {
  --fs: 30;
  --lh: 30;
  font-family: var(--font-en);
}
.dianalogue .dl-product hr {
  width: calc(480 / 530 * 100%);
  border: none;
  height: 1px;
  display: block;
  margin: 0 auto;
  background: #c6cccf;
}
.dianalogue .dl-product__note {
  --fs: 20;
  --lh: 36;
  text-align: justify;
}

.dianalogue .dl-product__att {
  --fs: 16;
  --lh: 24;
  text-align: justify;
}
.dianalogue .dl-product__point {
  background-image: url(../img/diapoint_bg.jpg);
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  background-repeat: repeat;
  background-position: top left;
  display: block;
  margin: 0 auto;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  min-height: calc(clamp(calc((var(--height) + 110 ) * 0.5px),calc((var(--height) + 110 ) / 650 * 100vw),calc((var(--height) + 110 ) * 1px)) * var(--rate));
  padding: calc(clamp(30px,calc(60 / 650 * 100vw),60px) * var(--rate)) 0 calc(clamp(40px,calc(80 / 650 * 100vw),80px) * var(--rate));
}
.dianalogue .dl-product__title {
  position: relative;
  z-index: 2;
  display: block;
  box-sizing: border-box;
  padding: 0 calc(clamp(65px,calc(130 / 650 * 100vw),130px) * var(--rate)) 0 calc(clamp(30px,calc(60 / 650 * 100vw),60px) * var(--rate));
  text-align: center;
}
.dianalogue .dl-product__title span {
  display: block;
  width: 100%;
  text-align: center;
  color: #fff;
  --fs:26;
  --lh: 39;
  background: #f3aab3;
  border-radius: 100svh;
  box-sizing: border-box;
  padding: calc(clamp(2px,calc(4 / 650 * 100vw),4px) * var(--rate)) 0 calc(clamp(4px,calc(8 / 650 * 100vw),8px) * var(--rate));
}
.dianalogue .dl-product__text {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  padding: calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate)) calc(clamp(calc(var(--right) /2 * 1px),calc(var(--right) / 650 * 100vw),calc(var(--right) * 1px)) * var(--rate)) 0 calc(clamp(30px,calc(60 / 650 * 100vw),60px) * var(--rate));
  --fs:22;
  --lh:39.6;
  text-align: justify;
}

.dianalogue .dl-product__bg {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}




.dianalogue  .dl-product__btn {
  margin:  calc(clamp(20px,calc( 40 / 650 * 100vw),40px) * var(--rate)) auto;
}
.dianalogue .dl-product__btn .dl-btn--arrow {
  position: relative;
  background-color: var(--c-05);
  color: #fff;
  width: calc(clamp(255px,calc( 510 / 650 * 100vw),510px) * var(--rate));
  box-sizing: border-box;
  border: calc(clamp(1px,calc( 2 / 650 * 100vw),2px) * var(--rate)) solid var(--c-02);
  border-radius: 0;
  --buttoncolor: var(--c-02);
  min-height: calc(clamp(40px,calc(80 / 650 * 100vw),80px) * var(--rate));
  margin-left: auto;
  margin-right: auto;
}
.dianalogue .dl-product__btn .dl-btn--arrow span {
  color: #fff;
}
.dianalogue .dl-product__btn .dl-btn--arrow:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath fill='%23fff' d='M0 6.79v-1.6h16.93c-1.15-1.04-2.62-2.72-3.63-4.34l1.17-.85c1.47 2.28 3.61 4.52 5.53 6-1.92 1.48-4.07 3.72-5.53 6l-1.17-.85c1.01-1.63 2.49-3.31 3.63-4.34H0Z'/%3E%3C/svg%3E");
}

.dianalogue .dl-product__btn--single .dl-btn--arrow {
  background-color: #fff;
  color: #404040;
  border: calc(clamp(1px,calc( 2 / 650 * 100vw),2px) * var(--rate)) solid #c6cccf;
  --buttoncolor: var(--c-01);
}
.dianalogue .dl-product__btn--single .dl-btn--arrow span {
  color: #404040;
}
.dianalogue .dl-product__btn--single .dl-btn--arrow:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath fill='%23404040' d='M0 6.79v-1.6h16.93c-1.15-1.04-2.62-2.72-3.63-4.34l1.17-.85c1.47 2.28 3.61 4.52 5.53 6-1.92 1.48-4.07 3.72-5.53 6l-1.17-.85c1.01-1.63 2.49-3.31 3.63-4.34H0Z'/%3E%3C/svg%3E");
}
.dianalogue .dl-product__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  flex-direction: column;
  width: 100%;
  gap:calc(clamp(5px,calc( 10 / 650 * 100vw),10px) * var(--rate));
  padding: 0 calc(clamp(10px,calc( 20 / 650 * 100vw),20px) * var(--rate)) calc(clamp(10px,calc( 20 / 650 * 100vw),20px) * var(--rate));
}
.dianalogue .dl-product__listitem {
  width: 100%;
  border: 1px solid var(--c-02);
  text-align: center;
  display: block;
  box-sizing: border-box;
  padding: calc(clamp(5px,calc( 10 / 650 * 100vw),10px) * var(--rate));
  --fs: 22;
  --lh: 33;
  font-weight: 400;
  color: var(--c-02);
}
.dianalogue .dl-product__listitem sub {
  color: var(--c-02);
  --fs:16;
  vertical-align: baseline;
}

.dianalogue .dl-btnlabel {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate3d(-50%,-40%,0);
  display: inline-block;
  background: #e65f70;
  color: #fff;
  --fs:18;
  padding: 0 1em;
}
.dianalogue .dl-btnlabel + span {
  padding-top: 0.5em;
}



.dianalogue .dl-blacklabel {
  margin: calc(clamp(25px,calc( 50 / 650 * 100vw),50px) * var(--rate)) auto calc(clamp(40px,calc( 80 / 650 * 100vw),80px) * var(--rate));
  width: 100%;
  position: relative;
}
.dianalogue .dl-blacklabel:after {
  content: "";
  display: block;
  position: absolute;
  top:  calc(clamp(7px,calc(15 / 650 * 100vw),15px) * var(--rate));
  right: -1px;
  width: calc(590 / 610 * 100%);
  height: 100%;
  margin: 0 auto;
  z-index: 1;
  background: var(--c-01);
  background: var(--shadowcolor);
}
.dianalogue .dl-blacklabel__box {
  position: relative;
  width: calc(590 / 610 * 100%);
  margin: 0 auto;
  z-index: 3;
  background: #fff;
  border: 1px solid #404040;
}
.dianalogue .dl-blacklabel__label {
  background: #404040;
  color: #fff;
  text-align: center;
  display: inline-block;
  box-sizing: border-box;
  padding:calc(clamp(5px,calc(10 / 650 * 100vw),10px) * var(--rate)) calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate)) calc(clamp(7px,calc(15 / 650 * 100vw),15px) * var(--rate)) ;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate3d(-50%,-40%,0);
  z-index: 3;
}
.dianalogue .dl-blacklabel__label span {
  border-bottom: 1px solid;
  color: #fff;
  text-align: center;
  display: block;
  font-family: var(--font-en-serif);
  --fs: 22;
  --lh: 24;
  font-weight: 500;
}
.dianalogue .dl-blacklabel__catch {
  margin: calc(clamp(35px,calc(70 / 650 * 100vw),70px) * var(--rate)) auto calc(clamp(12px,calc(25 / 650 * 100vw),25px) * var(--rate));
  text-align: center;
  font-family: var(--font-serif);
  --fs: 24;
  --lh: 36;
}
.dianalogue .dl-blacklabel__title {
  text-align: center;
  font-family: var(--font-serif);
  --fs: 36;
  --lh: 54;
  font-weight: 500;
  color: var(--c-02);
  border-top: calc(clamp(5px,calc(10 / 650 * 100vw),10px) * var(--rate)) solid #f1f3f4;
  border-bottom: calc(clamp(5px,calc(10 / 650 * 100vw),10px) * var(--rate)) solid #f1f3f4;
  margin: calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate)) auto;
  width: calc(570 / 590 * 100%);
  box-sizing: border-box;
  padding: calc(clamp(5px,calc(10 / 650 * 100vw),10px) * var(--rate)) 0;
}
.dianalogue .dl-blacklabel__image {
  margin: calc(clamp(15px,calc(30 / 650 * 100vw),30px) * var(--rate)) auto;
  width: calc(530 / 590 * 100%);
  display: block;
}
.dianalogue .dl-blacklabel__text {
  --fs: 24;
  --lh: 43;
  box-sizing: border-box;
  padding-bottom: calc(clamp(30px,calc(60 / 650 * 100vw),60px) * var(--rate));
}


/* --------------------------------------------------------------------------*/
/* feature */
.dianalogue .dl-featuretitle {
  display: block;
  position: relative;
  margin: 0 auto;
}
.dianalogue .dl-featuretitle__title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: center;
  flex-direction: column;
  gap: calc(clamp(5px,calc(10 / 650 * 100vw),10px) * var(--rate));
  z-index: 3;
}
.dianalogue .dl-featuretitle__comment {
  display: block;
  text-align: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='611' height='10.406' viewBox='0 0 611 10.406'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:none;stroke:%23fff;stroke-width:1px;fill-rule:evenodd;%7D%3C/style%3E%3C/defs%3E%3Cpath id='line.svg' class='cls-1' d='M20,165H317l8,8,8-8H630' transform='translate(-19.5 -164.5)'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  -webkit-background-size: auto calc(clamp(5px,calc(10 / 650 * 100vw),10px) * var(--rate)) ;
  background-size: auto calc(clamp(5px,calc(10 / 650 * 100vw),10px) * var(--rate)) ;
  background-position: bottom center;
  width: auto;
  min-width:  calc(clamp(215px,calc(430 / 650 * 100vw),430px) * var(--rate));
  box-sizing: border-box;
  padding-left: calc(clamp(5px,calc(10 / 650 * 100vw),10px) * var(--rate));
  padding-right: calc(clamp(5px,calc(10 / 650 * 100vw),10px) * var(--rate));
  padding-bottom: calc(clamp(13px,calc(25 / 650 * 100vw),25px) * var(--rate));
  font-family: var(--font-serif);
  color: #fff;
  --fs: 26;
}
.dianalogue .dl-featuretitle__text {
  display: block;
  font-family: var(--font-serif);
  color: #fff;
  --fs: 40;
  --lh:60;
  text-align: center;
}

.dianalogue .dl-index {
  margin: calc(clamp(70px,calc(70 / 650 * 100vw),70px) * var(--rate)) auto calc(clamp(30px,calc(60 / 650 * 100vw),60px) * var(--rate));
}
.dianalogue .dl-index .dl-blacklabel__box {
  box-sizing: border-box;
  padding-left:calc(clamp(5px,calc(10 / 650 * 100vw),10px) * var(--rate));
  padding-right:calc(clamp(5px,calc(10 / 650 * 100vw),10px) * var(--rate));
  padding-bottom:calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate));
  border-width:  calc(clamp(1px,calc(2 / 650 * 100vw),2px) * var(--rate));
  width:  calc(clamp(215px,calc(530 / 650 * 100vw),530px) * var(--rate));
}
.dianalogue .dl-index .dl-blacklabel__label {
  padding: calc(clamp(4px,calc(8 / 650 * 100vw),8px) * var(--rate)) calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate)) calc(clamp(5px,calc(10 / 650 * 100vw),10px) * var(--rate));
}
.dianalogue .dl-index .dl-blacklabel__label span {
  font-family: var(--font-base);
  padding-bottom: calc(clamp(3px,calc(6 / 650 * 100vw),6px) * var(--rate));
  min-width: 3.4em;
  --fs: 24;
}
.dianalogue .dl-index__catch {
  text-align: center;
  font-family: var(--font-serif);
  --fs: 30;
  --lh: 45;
  box-sizing: border-box;
  padding: calc(clamp(25px,calc(50 / 650 * 100vw),50px) * var(--rate)) 0 calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate));
  border-bottom: calc(clamp(5px,calc(10 / 650 * 100vw),10px) * var(--rate)) solid #f1f3f4;
}
.dianalogue .dl-index__link {
  box-sizing: border-box;
  padding: calc(clamp(20px,calc(40 / 650 * 100vw),40px) * var(--rate)) calc(clamp(15px,calc(30 / 650 * 100vw),30px) * var(--rate));
  
}
.dianalogue .dl-index__subtitle {
  color: var(--c-02);
  font-weight: 500;
  --fs:26;
}
.dianalogue .dl-index__linklist {
  display: block;
  box-sizing: border-box;
  padding-left: calc(clamp(5px,calc(10 / 650 * 100vw),10px) * var(--rate));
  margin-bottom: calc(clamp(20px,calc(40 / 650 * 100vw),40px) * var(--rate));
}
.dianalogue .dl-index__linkitem {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: flex-start;
  box-sizing: border-box;
  min-height: calc(clamp(30px,calc(60 / 650 * 100vw),60px) * var(--rate));
  border-bottom: 1px solid #c6cccf;
  position: relative;
}
.dianalogue .dl-index__linkitem:before {
  content: "-";
  padding-left: calc(clamp(5px,calc(10 / 650 * 100vw),10px) * var(--rate));
  padding-right: calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate));
}
.dianalogue .dl-index__linkitem:after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath fill='%23fff' d='M0 6.79v-1.6h16.93c-1.15-1.04-2.62-2.72-3.63-4.34l1.17-.85c1.47 2.28 3.61 4.52 5.53 6-1.92 1.48-4.07 3.72-5.53 6l-1.17-.85c1.01-1.63 2.49-3.31 3.63-4.34H0Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  -webkit-background-size: calc(clamp(8px,calc(16 / 650 * 100vw),16px) * var(--rate)) auto;
  background-size: calc(clamp(8px,calc(16 / 650 * 100vw),16px) * var(--rate)) auto;
  background-position: 50% 50%;
  background-color: #359fd4;
  position: absolute;
  top: 50%;
  right: calc(clamp(5px,calc(10 / 650 * 100vw),10px) * var(--rate));
  z-index: 2;
  width: calc(clamp(15px,calc(30 / 650 * 100vw),30px) * var(--rate));
  height: calc(clamp(15px,calc(30 / 650 * 100vw),30px) * var(--rate));
  display: block;
  border-radius: calc(clamp(15px,calc(30 / 650 * 100vw),30px) * var(--rate));
  transform: translate3d(0,-50%,0) rotate(90deg);
}

.dianalogue .dl-profile {
  display: block;
  width:  calc(clamp(215px,calc(530 / 650 * 100vw),530px) * var(--rate));
  margin: 0 auto 0;
}
.dianalogue .dl-profile .dl-title {
  box-sizing: border-box;
  padding-top: calc(clamp(30px,calc( 60 / 650 * 100vw),60px) * var(--rate));
  padding-bottom: calc(clamp(50px,calc( 100 / 650 * 100vw),100px) * var(--rate));
}
.dianalogue .dl-profile__item {
  display: block;
  position: relative;
  width: 100%;
}
.dianalogue .dl-profile__box {
  border-radius: calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate));
  background: var(--boxcolor);
  position: relative;
  padding-top: calc(clamp(60px,calc( 120 / 650 * 100vw),120px) * var(--rate));
  padding-bottom: calc(clamp(15px,calc( 30 / 650 * 100vw),30px) * var(--rate));
  box-sizing: border-box;
  display: block;
  width: 100%;
  z-index: 3;
}
.dianalogue .dl-profile__shadow {
  border-radius: calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate));  
  background: var(--shadowcolor);
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: block;
  width: 100%;
  z-index: 1;
  opacity: 0.2;
  top: calc(clamp(7px,calc( 15 / 650 * 100vw),15px) * var(--rate));
  left: calc(clamp(7px,calc( 15 / 650 * 100vw),15px) * var(--rate));
}
.dianalogue .dl-profile__image {
  display: block;
  overflow: hidden;
  border-radius: calc(clamp(60px,calc( 120 / 650 * 100vw),120px) * var(--rate));
  background-color: #fff;
  width: calc(clamp(120px,calc( 240 / 650 * 100vw),240px) * var(--rate));
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate3d(-50%, calc(clamp(95px,calc( 190 / 650 * 100vw),190px) * var(--rate) * -1),0);
}
.dianalogue .dl-profile__name {
  box-sizing: border-box;
  text-align: center;
  border-bottom: 1px solid #c6cccf;
  width: calc(450 / 530 * 100%);
  margin: 0 auto;
  --fs: 28;
  color: var(--c-02);
  font-weight: 500;
  padding-bottom: calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate));
  margin-bottom: calc(clamp(5px,calc(10 / 650 * 100vw),10px) * var(--rate));
}
.dianalogue .dl-profile__name span {
  --fs: 20;
  --lh: 30;
  color: #404040;
  background: #fff;
  border-radius: 100vh;
  font-weight: 400;
  box-sizing: border-box;
  display: inline-block;
  padding: 0 0.8em;
  margin-right: calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate));

}

.dianalogue .dl-profile__text {
  box-sizing: border-box;
  padding: 0 calc(clamp(20px,calc(40 / 650 * 100vw),40px) * var(--rate));
  --fs: 22;
  --lh: 40;
}
.dianalogue .dl-interviewer__item {
  display: block;
  position: relative;
  margin: calc(clamp(35px,calc(70 / 650 * 100vw),70px) * var(--rate)) auto calc(clamp(30px,calc(60 / 650 * 100vw),60px) * var(--rate)) ;
}
.dianalogue .dl-interviewer__box {
  border-radius: calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate));
  background: var(--boxcolor);
  position: relative;
  padding: calc(clamp(15px,calc( 30 / 650 * 100vw),30px) * var(--rate));
  padding-right: calc(clamp(100px,calc( 200 / 650 * 100vw),200px) * var(--rate));
  box-sizing: border-box;
  display: block;
  width: 100%;
  z-index: 3;
}
.dianalogue .dl-interviewer__shadow {
  border-radius: calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate));
  background: var(--shadowcolor);
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: block;
  width: 100%;
  z-index: 1;
  opacity: 0.2;
  top: calc(clamp(7px,calc( 15 / 650 * 100vw),15px) * var(--rate));
  left: calc(clamp(7px,calc( 15 / 650 * 100vw),15px) * var(--rate));
}
.dianalogue .dl-interviewer__image {
  display: block;
  overflow: hidden;
  border-radius: calc(clamp(60px,calc( 120 / 650 * 100vw),120px) * var(--rate));
  background-color: #fff;
  width: calc(clamp(85px,calc( 170 / 650 * 100vw),170px) * var(--rate));
  position: absolute;
  right: calc(clamp(15px,calc( 30 / 650 * 100vw),30px) * var(--rate));
  top: calc(clamp(15px,calc( 30 / 650 * 100vw),30px) * var(--rate) * -1);
  z-index: 3;
}
.dianalogue .dl-interviewer__name {
  color: var(--shadowcolor);
  --fs: 28;
  --lh: 48;
  font-weight: 500;
  border-bottom: 1px solid #c6cccf;
  box-sizing: border-box;
  padding-bottom: calc(clamp(5px,calc( 10 / 650 * 100vw),10px) * var(--rate));
}
.dianalogue .dl-interviewer__name span {
  --fs: 20;
  --lh: 30;
  color: #404040;
  background: #fff;
  border-radius: 100vh;
  font-weight: 400;
  box-sizing: border-box;
  display: inline-block;
  padding: 0 0.8em;
  margin-right: calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate));
  
}
.dianalogue .dl-interviewer__text {
  box-sizing: border-box;
  --fs: 22;
  --lh: 40;
  margin: calc(clamp(5px,calc( 10 / 650 * 100vw),10px) * var(--rate)) auto;
}



.dianalogue .dl-navigator__item {
  display: block;
  position: relative;
  margin: calc(clamp(15px,calc(30 / 650 * 100vw),30px) * var(--rate)) auto 0;
}
.dianalogue .dl-navigator__box {
  border-radius: calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate));
  background: var(--boxcolor);
  position: relative;
  padding: calc(clamp(10px,calc( 20 / 650 * 100vw),20px) * var(--rate)) calc(clamp(20px,calc( 40 / 650 * 100vw),40px) * var(--rate)) calc(clamp(15px,calc( 30 / 650 * 100vw),30px) * var(--rate)) ;
  box-sizing: border-box;
  display: block;
  width: 100%;
  z-index: 3;
}
.dianalogue .dl-navigator__shadow {
  border-radius: calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate));
  background: var(--shadowcolor);
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: block;
  width: 100%;
  z-index: 1;
  opacity: 0.2;
  top: calc(clamp(7px,calc( 15 / 650 * 100vw),15px) * var(--rate));
  left: calc(clamp(7px,calc( 15 / 650 * 100vw),15px) * var(--rate));
}
.dianalogue .dl-navigator__prof {
  box-sizing: border-box;
  padding-bottom: calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate));
  padding-right: calc(clamp(100px,calc( 200 / 650 * 100vw),200px) * var(--rate));
  border-bottom: 1px solid #c6cccf;
}
.dianalogue .dl-navigator__image {
  display: block;
  overflow: hidden;
  border-radius: calc(clamp(60px,calc( 120 / 650 * 100vw),120px) * var(--rate));
  background-color: #fff;
  width: calc(clamp(85px,calc( 170 / 650 * 100vw),170px) * var(--rate));
  position: absolute;
  right: calc(clamp(10px,calc( 20 / 650 * 100vw),20px) * var(--rate));
  top: calc(clamp(15px,calc( 30 / 650 * 100vw),30px) * var(--rate) * -1);
  z-index: 3;
}
.dianalogue .dl-navigator__name {
  color: var(--shadowcolor);
  --fs: 28;
  --lh: 48;
  font-weight: 500;
  box-sizing: border-box;
  padding-bottom: calc(clamp(5px,calc( 10 / 650 * 100vw),10px) * var(--rate));
}
.dianalogue .dl-navigator__name span {
  --fs: 20;
  --lh: 30;
  color: #404040;
  background: #fff;
  border-radius: 100vh;
  font-weight: 400;
  box-sizing: border-box;
  display: inline-block;
  padding: 0 0.8em;
  margin-right: calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate));
  
}
.dianalogue .dl-navigator__position {
  --fs: 16;
  --lh: 24;
}
.dianalogue .dl-navigator__text {
  box-sizing: border-box;
  --fs: 22;
  --lh: 40;
  margin: calc(clamp(5px,calc( 10 / 650 * 100vw),10px) * var(--rate)) auto;
}
.dianalogue .dl-profile--navigator .dl-title {
  padding-bottom: 0;
}



/* --------------------------------------------------------------------------*/
/* interview */
.dianalogue .dl-subtitle--index {
  background: var(--c-05);
  text-align: center;
  box-sizing: border-box;
  display: block;
  padding: calc(clamp(5px,calc(10 / 650 * 100vw),10px) * var(--rate));
  border-radius: calc(clamp(5px,calc(10 / 650 * 100vw),10px) * var(--rate));
  width: calc(clamp(285px,calc(570 / 650 * 100vw),570px) * var(--rate));
  margin: calc(clamp(15px,calc(30 / 650 * 100vw),30px) * var(--rate)) auto;
}
.dianalogue .dl-subtitle--indextext {
  width: 100%;
  box-sizing: border-box;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  text-align: center;
  color: #fff;
  font-family: var(--font-serif);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: center;
  flex-direction: column;
  --fs: 30;
  --lh: 45;
  min-height: calc(clamp(70px,calc(140 / 650 * 100vw),140px) * var(--rate));
}

.dianalogue .dl-subtitle--indextext .fadein {
  text-align: center;
  color: #fff;
  font-family: var(--font-serif);
  --fs: 30;
  --lh: 45;
}
.dianalogue .dl-interview__item {
  display: block;
  width: calc(clamp(215px,calc(530 / 650 * 100vw),530px) * var(--rate));
  margin: calc(clamp(15px,calc(30 / 650 * 100vw),30px) * var(--rate)) auto;
  text-align: justify;
}
.dianalogue .dl-interview__item .dl-image {
  margin: calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate)) auto;
}
.dianalogue .dl-interview__icon {
  text-align: left;
  --iconcolor: var(--c-02);
  --iconbg: var(--c-01);
  margin-bottom:  calc(clamp(5px,calc(10 / 650 * 100vw),10px) * var(--rate));
}
.dianalogue .dl-interview__icon--01 {
  --iconcolor: #e65f70;
  --iconbg: #fcefef;
}
.dianalogue .dl-interview__icon--02 {
  --iconcolor: var(--c-02);
  --iconbg: var(--c-01);
}
.dianalogue .dl-interview__icon span {
  display: inline-block;
  background: var(--iconbg);
  border: 1px solid var(--iconcolor);
  border-radius: calc(clamp(7px,calc(15 / 650 * 100vw),15px) * var(--rate)) calc(clamp(7px,calc(15 / 650 * 100vw),15px) * var(--rate)) calc(clamp(7px,calc(15 / 650 * 100vw),15px) * var(--rate)) 0;
  color: var(--iconcolor);
  --fs: 24;
  --lh: 36;
  font-weight: 500;
  box-sizing: border-box;
  padding: 0  calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate));
}
.dianalogue .dl-interview__item p {
  --fs: 24;
  --lh: 43;
}
.dianalogue .dl-marker {
 background: #FFFAD6;
  background: -webkit-linear-gradient(0deg, rgba(255, 250, 214, 0) 0%, rgba(255, 250, 214, 0) 15%, rgba(255, 250, 214, 1) 15%, rgba(255, 250, 214, 1) 84%, rgba(255, 250, 214, 0) 85%, rgba(255, 250, 214, 0) 100%);
  background: -moz-linear-gradient(0deg, rgba(255, 250, 214, 0) 0%, rgba(255, 250, 214, 0) 15%, rgba(255, 250, 214, 1) 15%, rgba(255, 250, 214, 1) 84%, rgba(255, 250, 214, 0) 85%, rgba(255, 250, 214, 0) 100%);
  background: linear-gradient(0deg, rgba(255, 250, 214, 0) 0%, rgba(255, 250, 214, 0) 15%, rgba(255, 250, 214, 1) 15%, rgba(255, 250, 214, 1) 84%, rgba(255, 250, 214, 0) 85%, rgba(255, 250, 214, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFAD6", endColorstr="#FFFAD6", GradientType=0);
  font-weight: 500;
}
.dianalogue .dl-interview__note {
  --fs: 16;
  --lh: 24;
  word-break: break-all;
  white-space: normal;
  margin-top: calc(clamp(5px,calc(10 / 650 * 100vw),10px) * var(--rate));
}

.dianalogue .dl-interview__item + .dl-subtitle--index {
  margin-top: calc(clamp(30px,calc(60 / 650 * 100vw),60px) * var(--rate));
}
.dianalogue .dl-interview__item + .dl-interview__item .dl-subtitle--bottombar {
  margin-top: calc(clamp(25px,calc(50 / 650 * 100vw),50px) * var(--rate));
}

.dianalogue .dl-review {
  margin: calc(clamp(15px,calc(30 / 650 * 100vw),30px) * var(--rate)) auto calc(clamp(40px,calc(80 / 650 * 100vw),80px) * var(--rate));
}
.dianalogue .dl-review__item {
  background: #fff;
  box-sizing: border-box;
  display: block;
  border-radius: calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate));
  margin: calc(clamp(15px,calc(30 / 650 * 100vw),30px) * var(--rate)) auto;
}
.dianalogue .dl-review__prof {
  border-bottom: 1px solid #c6cccf;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: stretch;
  align-items: stretch;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: flex-start;
  gap:calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate));
  box-sizing: border-box;
  padding: calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate));
}
.dianalogue .dl-review__image {
  width: calc(clamp(80px,calc(160 / 650 * 100vw),160px) * var(--rate));
  margin: 0;
}
.dianalogue .dl-review__data {
}
.dianalogue .dl-review__name {
  --fs: 20;
  --lh: 30;
}
.dianalogue .dl-review__name:before {
  content: "PROFILE";
  font-family: var(--font-en-serif);
  display: block;
  font-size: calc(16 / 20 * 1em);
  color: #c6cccf;
  margin-bottom: calc(clamp(2px,calc(5 / 650 * 100vw),5px) * var(--rate));
}
.dianalogue .dl-review__salon {
  --fs: 18;
  --lh: 30;
}
.dianalogue .dl-review__star {
  margin-top: calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate));
  text-align: left;
}
.dianalogue .dl-review__star span {
  display: inline-block;
  text-align: center;
  background: #fffad6;
  color: #f9cc44;
  --fs: 30;
  --lh: 38;
  box-sizing: border-box;
  padding: 1px calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate)) 2px;
  border-radius: 100svh;
}
.dianalogue .dl-review__text {
  display: block;
  box-sizing: border-box;
  padding: calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate)) calc(clamp(15px,calc(30 / 650 * 100vw),30px) * var(--rate)) calc(clamp(15px,calc(30 / 650 * 100vw),30px) * var(--rate));
  --fs: 22;
  --lh: 39.6;
  text-align: justify;
}

.dianalogue .dl-column {
  position: relative;
  margin: calc(clamp(15px,calc(30 / 650 * 100vw),30px) * var(--rate)) calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate) * -1) calc(clamp(35px,calc(70 / 650 * 100vw),70px) * var(--rate));
  width: calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate) * 2 + 100%) ;
}
.dianalogue .dl-column__item {
  display: block;
  margin: calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate)) auto;
}


/* --------------------------------------------------------------------------*/

/*-------------------------------------------
 animation
-----------------------------------------------*/
.dianalogue .fadein {
  display: block;
  opacity: 1;
  -webkit-transform:translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  -webkit-filter: blur(0);
  -o-filter: blur(0);
  filter: blur(0);
  -webkit-transition-duration: 1.2s;
  -o-transition-duration: 1.2s;
  transition-duration: 1.2s;
  -webkit-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-timing-function: ease;
  -o-transition-timing-function: ease;
  transition-timing-function: ease;
}
.dianalogue .fadein:nth-of-type(2) {
  transition-delay: .2s;
}
.dianalogue .fadein:nth-of-type(3) {
  transition-delay: .3s;
}
.dianalogue .animhide .fadein {
  display: block;
  opacity: 0;
  -webkit-transform:translate3d(0,50%,0);
  -ms-transform: translate3d(0,50%,0);
  -o-transform: translate3d(0,50%,0);
  transform: translate3d(0,50%,0);
  -webkit-filter: blur(0.5em);
  -o-filter: blur(0.5em);
  filter: blur(0.5em);
}



/*---------------------------*/
.dianalogue #fixbtn {
  position: fixed;
  bottom: -100%;
  left: 0;
  z-index: 999;
  width: 100%;
  -webkit-transition: all .8s ease;
  -o-transition: all .8s ease;
  transition: all .8s ease;
}
.dianalogue #fixbtn.fixbtn--visible {
  bottom: 0;
}
.dianalogue #fixbtn .fixbtn__box {
  position: relative;
  bottom: 0;
  display: block;
  margin: 0 auto;
  position: relative;
  max-width: 1300px;
  height: 0;
}
.dianalogue .dl-fixbtn--circle {
  width: calc(clamp(75px,calc(150 / 650 * 100vw),150px) * var(--rate));
  margin-right: 0;
  margin-left: auto;
  transform: translate3d(0,-100%,0);
}
.dianalogue .dl-floating {
  position: relative;
  display: block;
}
.dianalogue .dl-floating:after {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  background: var(--floatingcolor);
  position: absolute;
  border: calc(clamp(1px,calc(2 / 650 * 100vw),2px) * var(--rate) ) solid var(--floatingborder);
  bottom: 0;
  right: 0;
  z-index: 1;
}
.dianalogue .dl-fixbtn--circle .dl-floating:after {
  content: "";
  border-radius: 50%;
}
.dianalogue .dl-floating__image {
  position: relative;
  z-index: 2;
  width: clamp(calc(var(--imagewidth) * 0.5px * var(--rate)),calc(var(--imagewidth) / 650 * 100vw * var(--rate)),calc(var(--imagewidth) * 1px * var(--rate)));
  display: block;
  margin: 0 auto;
}
.dianalogue .dl-floating__text {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  --fs: 20;
  --lh: 26;
  display: block;
  margin: 0 auto;
  box-sizing: border-box;
  padding-top:  calc(clamp(6px,calc(12 / 650 * 100vw),12px)* var(--rate) );
  padding-bottom:  calc(clamp(24px,calc(48 / 650 * 100vw),48px)* var(--rate) );
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath fill='%23fff' d='M0 6.79v-1.6h16.93c-1.15-1.04-2.62-2.72-3.63-4.34l1.17-.85c1.47 2.28 3.61 4.52 5.53 6-1.92 1.48-4.07 3.72-5.53 6l-1.17-.85c1.01-1.63 2.49-3.31 3.63-4.34H0Z'/%3E%3C/svg%3E");
  -webkit-background-size: calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate)) auto;
  background-size: calc(clamp(10px,calc(20 / 650 * 100vw),20px) * var(--rate)) auto;
  background-position: 50% calc((100% - (clamp(12px,calc(24 / 650 * 100vw),24px)* var(--rate))) );
  background-repeat: no-repeat;
}

/* swiper */
.dl-simplebar.swiper {
  position: relative;
  padding-bottom: calc(clamp(30px,calc(60 / 650 * 100vw),60px) * var(--rate));
  overflow: visible; 
}

/* スライダー全体の高さを揃える場合 */
.dl-scrolllist.swiper-wrapper {
  display: flex;
}

.dl-carditem.swiper-slide {
  height: auto; /* 高さを揃える */
  display: block; /* リンク要素をブロック化 */
}

.dl-simplebar .swiper-scrollbar {
  bottom: 0;
  background: #c6cccf; /* バーの背景色 */
}
.dl-simplebar .swiper-scrollbar-drag {
  background: #404040; /* バーのつまみの色 */
}

.dl-simplebar .swiper-button-next,
.dl-simplebar .swiper-button-prev {
  color: transparent; /* 矢印の色 */
  width: calc(clamp(12px,calc(24 / 650 * 100vw),24px) * var(--rate));
  background: url(../img/nav_arrow.png) no-repeat 50% 50%;
  -webkit-background-size: contain;
  background-size: contain;
  transition: all .5s ease;
}
.dl-simplebar .swiper-button-prev {
  transform: translate3d( calc(clamp(25px,calc(50 / 650 * 100vw),50px) * var(--rate) * -1),-50%,0);
}
.dl-simplebar .swiper-button-next {
  transform: translate3d( calc(clamp(25px,calc(50 / 650 * 100vw),50px) * var(--rate)),-50%,0) rotate(180deg);
}
.dl-simplebar .swiper-button-disabled {
  opacity: 0;
}
.dl-simplebar .swiper-button-next svg ,
.dl-simplebar .swiper-button-prev svg {
  opacity: 0;
}

/* Safariで背景が固定されないため、stickyを使用した背景固定を追加 ▼▼ */
.ec-layoutRole__mainWithColumn {
  position: relative;
  isolation: isolate;
  overflow: visible;
}

.ec-layoutRole__mainWithColumn > .dl-bg {
  position: sticky;
  top: 0;
  height: 100vh;
  margin-bottom: -100vh;
  z-index: -1;
  pointer-events: none;
  background: url(../../logue2026summer/img/bg_pc.jpg) top center / cover no-repeat;
}

.ec-layoutRole__footer {
    position: relative;
    z-index: 1;
}

@media (min-width: 576px) {
    .mt-sm-5, .my-sm-5 {
        margin-top: 0 !important;
        padding-top: 3rem !important;
        background-color: #fff !important;
    }
}
/* Safariで背景が固定されないため、stickyを使用した背景固定を追加 ▲▲ */