@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700;800;900&display=swap');

:root{
  --dj-bg-top:#213946;
  --dj-bg-bottom:#251E1C;
  --dj-panel:#24110f;
  --dj-panel-hover:#8E3B2E;
  --dj-text:#F4F6F5;
  --dj-line:rgba(244,246,245,.92);

  --dj-section-space-desktop-top:28px;
  --dj-section-space-desktop-bottom:56px;
  --dj-section-space-tablet:28px;
  --dj-section-space-mobile:20px;

  --dj-detail-copy-width:420px;
  --dj-detail-logo-width:300px;

  --dj-theme-top:#213946;
  --dj-theme-mid:#173442;
  --dj-theme-low:#112733;
  --dj-theme-bottom:#251E1C;

  --dj-profile-max-height:320px;
  --dj-profile-width-desktop:1080px;
  --dj-profile-column-gap:46px;
}

html,
body{
  min-height:100%;
  overflow-x:hidden;
}

body{
  background:#251E1C !important;
}

.djPage{
  position:relative;
  min-height:auto;
  overflow-x:hidden;
}

.djPage::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-9999;
  pointer-events:none;
  background:
    linear-gradient(
      180deg,
      var(--dj-theme-top) 0%,
      var(--dj-theme-mid) 18%,
      var(--dj-theme-low) 42%,
      #1b1f27 68%,
      var(--dj-theme-bottom) 100%
    );
  background-repeat:no-repeat;
  background-size:100% 100%;
  transition:
    background .7s ease,
    opacity .7s ease;
}

.djPage[data-dj-current="kyohey"]{
  --dj-theme-top:#213946;
  --dj-theme-mid:#173442;
  --dj-theme-low:#112733;
  --dj-theme-bottom:#251E1C;
}

.djPage[data-dj-current="takuto"]{
  --dj-theme-top:#3a2034;
  --dj-theme-mid:#31192f;
  --dj-theme-low:#221425;
  --dj-theme-bottom:#1f1717;
}

.djPage[data-dj-current="tatsuya"]{
  --dj-theme-top:#203540;
  --dj-theme-mid:#1f4a45;
  --dj-theme-low:#142c2d;
  --dj-theme-bottom:#221c18;
}

.djHero{
  position:relative;
  padding-top:var(--dj-section-space-desktop-top);
  padding-bottom:var(--dj-section-space-desktop-bottom);
  margin-bottom:0;
}

.djHero__inner,
.djDetail{
  min-height:auto;
  margin-bottom:0;
}

/* =========================
   LIST PAGE
========================= */

.djHero--list .djHero__inner{
  display:grid;
  grid-template-columns:520px minmax(420px, 520px);
  column-gap:48px;
  align-items:center;
  justify-content:space-between;
  width:min(100%, 1120px);
  margin:0 auto;
  padding-top:0;
}

.djHero__lead{
  padding-top:0;
  min-width:0;
  display:flex;
  align-items:center;
  min-height:100%;
}

.djHero__title{
  margin:0;
  width:100%;
  max-width:520px;
  font-family:"Jost", sans-serif;
  font-weight:900;
  font-style:normal;
  line-height:.88;
  letter-spacing:-0.015em;
  color:var(--dj-text);
  text-transform:uppercase;
}

.djHero__title > span{
  display:block;
  white-space:nowrap;
}

.djHero__line{
  display:block;
  white-space:nowrap;
}

.djHero__line--1{
  font-size:118px;
  letter-spacing:-0.04em;
}

.djHero__line--2{
  font-size:89px;
  letter-spacing:-0.032em;
}

.djHero__line--3{
  font-size:60px;
  letter-spacing:-0.015em;
}

.djList{
  display:flex;
  flex-direction:column;
  gap:48px;
  padding-top:0;
  width:100%;
  max-width:520px;
  min-width:0;
  margin-bottom:0;
}

.djListCard{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, 1fr) 220px;
  align-items:stretch;
  width:100%;
  min-height:150px;
  height:150px;
  background-color:var(--dj-panel);
  background-image:url("./sangoPattern2.png");
  background-repeat:repeat;
  background-position:center;
  background-size:auto;
  overflow:visible;
  text-decoration:none;
  transition:
    background-color .22s ease,
    transform .22s ease,
    opacity .22s ease,
    filter .22s ease;
}

.djListCard:hover{
  background-color:var(--dj-panel-hover);
  background-image:url("./sangoPattern.png");
  background-repeat:repeat;
  background-position:center;
  background-size:auto;
  transform:translateY(-2px);
  opacity:1;
}

.djListCard__logoWrap{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:18px 28px;
  min-width:0;
  position:relative;
  z-index:2;
}

.djListCard__logo{
  display:block;
  max-width:100%;
  max-height:74px;
  width:auto;
  height:auto;
  object-fit:contain;
  transition:
    filter .28s ease,
    opacity .28s ease,
    transform .28s ease;
}

.djListCard__photoWrap{
  position:relative;
  overflow:visible;
  z-index:2;
}

.djListCard__photo{
  position:absolute;
  right:24px;
  bottom:-2px;
  width:auto;
  height:110%;
  max-width:none;
  object-fit:contain;
  object-position:right bottom;
  display:block;
  pointer-events:none;
  filter:grayscale(1);
  transition:
    filter .28s ease,
    opacity .28s ease,
    transform .28s ease;
}

.djListCard:hover .djListCard__photo{
  filter:grayscale(0);
}

.djListCard--takuto .djListCard__logo{
  filter:grayscale(1);
}

.djListCard--takuto:hover .djListCard__logo{
  filter:grayscale(0);
}

.djListCard--kyohey .djListCard__photo{
  right:18px;
  height:120%;
}

.djListCard--takuto .djListCard__photo{
  right:10px;
  height:124%;
}

.djListCard--tatsuya .djListCard__photo{
  right:12px;
  height:122%;
}

.djListCard--kyohey .djListCard__logo{
  max-height:68px;
}

.djListCard--takuto .djListCard__logo{
  max-height:62px;
}

.djListCard--tatsuya .djListCard__logo{
  max-height:84px;
}

/* =========================
   DETAIL PAGE
========================= */

.djHero--detail{
  padding-top:20px;
  padding-bottom:44px;
}

.djDetail{
  width:min(100%, 1180px);
  margin:0 auto;
  padding-top:0;
}

.djDetail__heroTop{
  display:grid;
  grid-template-columns:minmax(360px, 430px) minmax(420px, 1fr);
  gap:40px;
  align-items:end;
}

.djDetail__content{
  align-self:start;
  padding-top:24px;
  max-width:430px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  position:relative;
  z-index:10;
}

.djHero__title--detail{
  width:var(--dj-detail-copy-width);
  max-width:100%;
  line-height:.88;
  letter-spacing:-0.03em;
  text-align:center;
}

.djHero__title--detail > span:nth-child(1){
  font-size:112px;
  letter-spacing:-0.05em;
}

.djHero__title--detail > span:nth-child(2){
  font-size:85px;
  letter-spacing:-0.045em;
}

.djHero__title--detail > span:nth-child(3){
  font-size:58px;
  letter-spacing:-0.03em;
}

.djDetail__line{
  width:var(--dj-detail-copy-width);
  max-width:100%;
  height:7px;
  margin:24px auto 24px;
  background:var(--dj-line);
}

.djDetail__nameLogoWrap{
  display:flex;
  justify-content:center;
  align-items:center;
  width:var(--dj-detail-copy-width);
  max-width:100%;
  margin:0 0 18px;
}

.djDetail__nameLogo{
  display:block;
  width:100%;
  max-width:var(--dj-detail-logo-width);
  height:auto;
  margin:0 auto;
  object-fit:contain;
  object-position:center;
}

.djDetail__sns{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
  margin-bottom:0;
  width:var(--dj-detail-copy-width);
  max-width:100%;
  position:relative;
  z-index:50;
  pointer-events:auto;
}

.djDetail__snsIcon{
  width:34px;
  height:34px;
  background:transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 34px;
  box-sizing:border-box;
  transition:
    transform .22s ease,
    background .22s ease,
    opacity .22s ease;
  opacity:.95;
  text-decoration:none;
  position:relative;
  z-index:51;
  pointer-events:auto;
  -webkit-tap-highlight-color:transparent;
}

.djDetail__snsIcon:hover{
  transform:translateY(-2px);
  background:rgba(244,246,245,.08);
  opacity:1;
}

.djDetail__snsIconImage{
  display:block;
  width:18px;
  height:18px;
  object-fit:contain;
  pointer-events:none;
}

.djDetail__profile{
  position:relative;
  width:100%;
  max-width:100%;
  margin-top:18px;
  padding:0;
}

.djDetail__profile::before{
  content:"DJ\00A0\00A0KYOHEY";
  display:block;
  width:min(100%, var(--dj-profile-width-desktop));
  margin:0 auto 14px;
  color:var(--dj-text);
  font-family:"Jost", sans-serif;
  font-size:22px;
  font-weight:800;
  line-height:1;
  letter-spacing:-0.02em;
  text-transform:uppercase;
}

.djDetail__profile--dynamic::before{
  content:attr(data-dj-name);
}

.djDetail__profile p{
  margin:0 auto;
  color:var(--dj-text);
  font-family:"LINE Seed JP", "LINE Seed Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-size:14px;
  font-weight:500;
  line-height:1.78;
  letter-spacing:.01em;
  word-break:break-word;
}

.djDetail__visual{
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  min-height:760px;
  z-index:1;
}

.djDetail__image{
  display:block;
  width:100%;
  max-width:690px;
  height:auto;
  object-fit:contain;
  object-position:right bottom;
  transform:none;
}

/* =========================================
   DJ PROF SLIDER
========================================= */

.djHero--slider{
  overflow:hidden;
}

.djProfWrap{
  width:min(100%, 1260px);
  margin:0 auto;
}

.djSliderShell{
  position:relative;
  display:block;
}

.djSliderViewport{
  position:relative;
  overflow:hidden;
  width:100%;
  height:auto;
  min-height:0;
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
}

.djSliderViewport.is-dragging{
  cursor:grabbing;
}

.djSliderViewport.is-dragging img{
  pointer-events:none;
}

.djSliderViewport.is-dragging .djDetail__sns,
.djSliderViewport.is-dragging .djDetail__sns a,
.djSliderViewport.is-dragging .djDetail__snsIcon{
  pointer-events:auto;
}

.djSliderTrack{
  position:relative;
  width:100%;
  height:auto;
  min-height:0;
}

.djSlide{
  position:absolute;
  inset:0;
  width:100%;
  opacity:0;
  pointer-events:none;
  transform:translateX(10%) scale(.965);
  filter:blur(8px);
  transition:
    transform .82s cubic-bezier(.22,.8,.18,1),
    opacity .55s ease,
    filter .55s ease;
  will-change:transform, opacity, filter;
}

.djSlide .djDetail__content{
  opacity:0;
  transform:translateY(24px);
  transition:
    opacity .55s ease .16s,
    transform .8s cubic-bezier(.22,.8,.18,1) .16s;
}

.djSlide .djDetail__visual{
  opacity:0;
  transition:opacity .5s ease .1s;
}

.djSlide .djDetail__image{
  opacity:0;
  transform:translateX(44px) scale(.985);
  transition:
    opacity .62s ease .12s,
    transform .9s cubic-bezier(.22,.8,.18,1) .12s;
}

.djSlide .djDetail__profile{
  opacity:0;
  transform:translateY(20px);
  transition:
    opacity .52s ease .26s,
    transform .72s cubic-bezier(.22,.8,.18,1) .26s;
}

.djSlide.is-current{
  opacity:1;
  pointer-events:auto;
  transform:translateX(0) scale(1);
  filter:blur(0);
  z-index:3;
}

.djSlide.is-prev{
  opacity:.1;
  transform:translateX(-12%) scale(.955);
  filter:blur(4px);
  z-index:2;
}

.djSlide.is-next{
  opacity:.1;
  transform:translateX(12%) scale(.955);
  filter:blur(4px);
  z-index:2;
}

.djSlide.is-out-left{
  opacity:0;
  transform:translateX(-26%) scale(.93);
  filter:blur(8px);
  z-index:1;
}

.djSlide.is-out-right{
  opacity:0;
  transform:translateX(26%) scale(.93);
  filter:blur(8px);
  z-index:1;
}

.djSlide.is-current .djDetail__content,
.djSlide.is-current .djDetail__visual,
.djSlide.is-current .djDetail__image,
.djSlide.is-current .djDetail__profile{
  opacity:1;
}

.djSlide.is-current .djDetail__content,
.djSlide.is-current .djDetail__profile{
  transform:translateY(0);
}

.djSlide.is-current .djDetail__image{
  transform:translateX(0) scale(1);
}

.djSlide.is-enter-from-right{
  animation:djEnterFromRight .82s cubic-bezier(.22,.8,.18,1);
}

.djSlide.is-enter-from-left{
  animation:djEnterFromLeft .82s cubic-bezier(.22,.8,.18,1);
}

.djSlide.is-leave-to-left{
  animation:djLeaveToLeft .82s cubic-bezier(.22,.8,.18,1);
}

.djSlide.is-leave-to-right{
  animation:djLeaveToRight .82s cubic-bezier(.22,.8,.18,1);
}

@keyframes djEnterFromRight{
  0%{
    transform:translateX(18%) scale(.95);
    opacity:0;
    filter:blur(8px);
  }
  100%{
    transform:translateX(0) scale(1);
    opacity:1;
    filter:blur(0);
  }
}

@keyframes djEnterFromLeft{
  0%{
    transform:translateX(-18%) scale(.95);
    opacity:0;
    filter:blur(8px);
  }
  100%{
    transform:translateX(0) scale(1);
    opacity:1;
    filter:blur(0);
  }
}

@keyframes djLeaveToLeft{
  0%{
    transform:translateX(0) scale(1);
    opacity:1;
    filter:blur(0);
  }
  100%{
    transform:translateX(-14%) scale(.95);
    opacity:.1;
    filter:blur(4px);
  }
}

@keyframes djLeaveToRight{
  0%{
    transform:translateX(0) scale(1);
    opacity:1;
    filter:blur(0);
  }
  100%{
    transform:translateX(14%) scale(.95);
    opacity:.1;
    filter:blur(4px);
  }
}

.djSwipeHint{
  position:absolute;
  top:58%;
  left:50%;
  transform:translate(-50%, -50%);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
  user-select:none;
  pointer-events:none;
  z-index:6;
  width:auto;
}

.djSwipeHint__chevrons{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
}

.djSwipeHint__chevrons img{
  display:block;
  width:42px;
  height:auto;
  opacity:.16;
  animation:djArrowBlink 1.15s ease-in-out infinite;
}

.djSwipeHint__chevrons img:nth-child(2){
  animation-delay:.16s;
}

.djSwipeHint__chevrons img:nth-child(3){
  animation-delay:.32s;
}

.djSwipeHint.is-reverse .djSwipeHint__chevrons img{
  transform:scaleX(-1);
  animation-name:djArrowBlinkReverse;
}

@keyframes djArrowBlink{
  0%, 100%{
    opacity:.14;
    transform:translateX(0);
  }
  50%{
    opacity:1;
    transform:translateX(12px);
  }
}

@keyframes djArrowBlinkReverse{
  0%, 100%{
    opacity:.14;
    transform:scaleX(-1) translateX(0);
  }
  50%{
    opacity:1;
    transform:scaleX(-1) translateX(12px);
  }
}

@media (min-width: 1101px){
  .djDetail__profile{
    max-width:100%;
  }

  .djDetail__profile p{
    width:min(100%, var(--dj-profile-width-desktop));
    column-count:2;
    column-gap:var(--dj-profile-column-gap);
    column-fill:auto;
    max-height:var(--dj-profile-max-height);
    overflow-y:auto;
    padding-right:14px;
  }

  .djSwipeHint{
    position:static;
    top:auto;
    left:auto;
    transform:none;
    width:var(--dj-detail-copy-width);
    max-width:100%;
    margin:18px auto 0;
    z-index:auto;
  }

  .djSwipeHint__chevrons{
    gap:12px;
  }

  .djSwipeHint__chevrons img{
    width:34px;
  }

  .djDetail__heroTop{
    grid-template-columns:minmax(380px, 430px) minmax(520px, 690px);
    justify-content:center;
    gap:12px;
    align-items:center;
  }

  .djDetail__content{
    min-height:100%;
    padding-top:0;
    align-self:center;
    align-items:flex-end;
    justify-content:center;
    text-align:center;
  }

  .djHero__title--detail,
  .djDetail__line,
  .djDetail__nameLogoWrap,
  .djDetail__sns,
  .djSwipeHint{
    margin-left:auto;
    margin-right:0;
  }

  .djDetail__visual{
    justify-content:flex-start;
    align-items:center;
    min-height:760px;
  }
}

@media (max-width: 1280px){
  .djHero{
    padding-top:var(--dj-section-space-tablet);
    padding-bottom:48px;
  }

  .djHero--list .djHero__inner{
    grid-template-columns:460px minmax(360px, 500px);
    column-gap:40px;
    align-items:center;
  }

  .djHero__line--1{
    font-size:104px;
  }

  .djHero__line--2{
    font-size:80px;
  }

  .djHero__line--3{
    font-size:54px;
  }

  .djList{
    gap:42px;
  }

  .djListCard{
    height:146px;
    min-height:146px;
    grid-template-columns:minmax(0, 1fr) 205px;
  }

  .djListCard--kyohey .djListCard__photo{
    height:116%;
  }

  .djListCard--takuto .djListCard__photo{
    height:120%;
  }

  .djListCard--tatsuya .djListCard__photo{
    height:118%;
  }

  .djDetail__heroTop{
    grid-template-columns:minmax(320px, 390px) minmax(360px, 1fr);
    gap:30px;
  }

  .djDetail__content{
    max-width:390px;
    padding-top:18px;
  }

  .djHero__title--detail{
    --dj-detail-copy-width:370px;
  }

  .djHero__title--detail > span:nth-child(1){
    font-size:96px;
  }

  .djHero__title--detail > span:nth-child(2){
    font-size:73px;
  }

  .djHero__title--detail > span:nth-child(3){
    font-size:50px;
  }

  .djDetail__line{
    height:6px;
    margin:22px auto 22px;
  }

  .djDetail__nameLogo{
    max-width:260px;
  }

  .djDetail__profile p{
    font-size:13px;
  }

  .djDetail__visual{
    min-height:660px;
  }

  .djDetail__image{
    max-width:610px;
  }

  .djSwipeHint__chevrons img{
    width:38px;
  }
}

@media (min-width: 920px) and (max-width: 1100px){

  .djHero--list .djHero__inner{
    grid-template-columns:minmax(320px, 1fr) minmax(320px, 430px);
    column-gap:28px;
    align-items:center;
  }

  .djHero__lead{
    padding-top:0;
  }

  .djHero__line--1{
    font-size:84px;
  }

  .djHero__line--2{
    font-size:66px;
  }

  .djHero__line--3{
    font-size:44px;
  }

  .djList{
    gap:38px;
    padding-top:0;
  }

  .djListCard{
    height:136px;
    min-height:136px;
    grid-template-columns:minmax(0, 1fr) 180px;
  }

  .djListCard__logoWrap{
    padding:16px 22px;
  }

  .djListCard--kyohey .djListCard__photo{
    right:10px;
    height:112%;
  }

  .djListCard--takuto .djListCard__photo{
    right:4px;
    height:116%;
  }

  .djListCard--tatsuya .djListCard__photo{
    right:8px;
    height:114%;
  }

  .djHero--detail{
    padding-top:20px;
    padding-bottom:40px;
  }

  .djDetail{
    width:min(100%, 1120px);
    padding:0 20px;
  }

  .djDetail__heroTop{
    grid-template-columns:minmax(360px, 430px) minmax(360px, 430px);
    justify-content:center;
    gap:16px;
    align-items:center;
  }

  .djDetail__content{
    max-width:100%;
    min-height:100%;
    padding-top:0;
    align-self:center;
    align-items:flex-end;
    justify-content:center;
    text-align:center;
  }

  .djHero__title--detail{
    width:100%;
    max-width:380px;
    margin-left:auto;
    margin-right:0;
  }

  .djDetail__line{
    width:100%;
    max-width:320px;
    margin:16px 0 16px auto;
  }

  .djDetail__nameLogoWrap,
  .djDetail__sns,
  .djSwipeHint{
    width:100%;
    max-width:320px;
    margin-left:auto;
    margin-right:0;
  }

  .djDetail__visual{
    min-height:auto;
    justify-content:flex-start;
    align-items:center;
  }

  .djDetail__image{
    width:clamp(340px, 38vw, 420px);
    max-width:none;
    min-width:340px;
  }

  .djDetail__snsIconImage{
    width:15px;
    height:15px;
  }

  .djSwipeHint{
    top:60%;
  }

  .djSwipeHint__chevrons{
    gap:12px;
  }

  .djSwipeHint__chevrons img{
    width:32px;
  }

  .djSwipeHint{
    position:static;
    top:auto;
    left:auto;
    transform:none;
    width:100%;
    max-width:320px;
    margin:14px auto 0;
    z-index:auto;
  }

  .djSwipeHint__chevrons{
    gap:12px;
    justify-content:center;
  }

  .djSwipeHint__chevrons img{
    width:32px;
  }

}

@media (min-width: 769px) and (max-width: 919px){

  .djHero--list .djHero__inner{
    grid-template-columns:1fr;
    gap:26px;
    width:100%;
    max-width:100%;
    padding:0 24px;
    align-items:start;
  }

  .djHero__lead{
    padding-top:0;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:auto;
    text-align:center;
  }

  .djHero__title{
    max-width:100%;
    width:100%;
    text-align:center;
  }

  .djHero__title > span,
  .djHero__line{
    text-align:center;
  }

  .djHero__line--1{
    font-size:78px;
  }

  .djHero__line--2{
    font-size:60px;
  }

  .djHero__line--3{
    font-size:40px;
  }

  .djList{
    max-width:100%;
    gap:42px;
    padding-top:0;
    padding-bottom:8px;
  }

  .djListCard{
    height:144px;
    min-height:144px;
    grid-template-columns:minmax(0, 1fr) 190px;
    overflow:visible;
  }

  .djListCard__logoWrap{
    padding:16px 24px;
  }

  .djListCard--kyohey .djListCard__photo{
    right:10px;
    height:112%;
  }

  .djListCard--takuto .djListCard__photo{
    right:2px;
    height:116%;
  }

  .djListCard--tatsuya .djListCard__photo{
    right:8px;
    height:114%;
  }

  .djHero--detail{
    padding-top:18px;
    padding-bottom:34px;
  }

  .djDetail{
    width:100%;
    padding:0 18px;
  }

  .djDetail__heroTop{
    grid-template-columns:1fr;
    grid-template-areas:
      "visual"
      "content";
    gap:0;
    align-items:start;
  }

  .djDetail__visual{
    grid-area:visual;
    min-height:auto;
    justify-content:center;
    align-items:flex-end;
    margin:0 0 6px;
  }

  .djDetail__image{
    width:min(100%, 420px);
    max-width:420px;
    min-width:0;
  }

  .djDetail__content{
    grid-area:content;
    max-width:none;
    width:100%;
    padding-top:0;
    margin-top:-72px;
    position:relative;
    z-index:10;
    align-items:center;
    text-align:center;
  }

  .djHero__title--detail{
    width:min(100%, 360px);
    max-width:100%;
  }

  .djHero__title--detail > span:nth-child(1){
    font-size:66px;
  }

  .djHero__title--detail > span:nth-child(2){
    font-size:50px;
  }

  .djHero__title--detail > span:nth-child(3){
    font-size:34px;
  }

  .djDetail__line{
    width:min(100%, 320px);
    height:5px;
    margin:14px auto;
  }

  .djDetail__nameLogoWrap{
    width:min(100%, 320px);
    margin:0 auto 12px;
  }

  .djDetail__nameLogo{
    max-width:184px;
  }

  .djDetail__sns{
    width:min(100%, 320px);
    gap:10px;
    margin:0 auto;
  }

  .djDetail__snsIcon{
    width:28px;
    height:28px;
    flex-basis:28px;
  }

  .djDetail__snsIconImage{
    width:14px;
    height:14px;
  }

  .djDetail__profile{
    width:100%;
    max-width:680px;
    margin-top:16px;
    text-align:left;
  }

  .djDetail__profile::before{
    width:min(100%, 680px);
    margin:0 auto 10px;
    font-size:18px;
  }

  .djDetail__profile p{
    width:min(100%, 680px);
    column-count:1;
    font-size:13px;
    line-height:1.72;
  }

  .djSwipeHint{
    top:60%;
  }

  .djSwipeHint__chevrons{
    gap:10px;
  }

  .djSwipeHint__chevrons img{
    width:28px;
  }
}

@media (max-width: 768px){
  .djHero{
    padding-top:var(--dj-section-space-mobile);
    padding-bottom:28px;
  }

  .djHero--list .djHero__inner{
    display:flex;
    flex-direction:column;
    gap:20px;
    width:100%;
    max-width:100%;
    padding:0 14px 0 14px;
    margin:0 auto;
    overflow:hidden;
  }

  .djHero__lead{
    width:100%;
    padding-top:6px;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:auto;
    text-align:center;
  }

  .djHero__title{
    width:100%;
    max-width:100%;
    text-align:center;
  }

  .djHero__title > span,
  .djHero__line{
    text-align:center;
  }

  .djHero__line--1{
    font-size:92px;
    letter-spacing:-0.055em;
  }

  .djHero__line--2{
    font-size:72px;
    letter-spacing:-0.04em;
  }

  .djHero__line--3{
    font-size:46px;
    letter-spacing:-0.03em;
  }

  .djList{
    width:100%;
    max-width:100%;
    gap:34px;
    padding-top:0;
    padding-bottom:8px;
    margin:0;
    overflow:visible;
  }

  .djListCard{
    width:100%;
    min-height:146px;
    height:146px;
    grid-template-columns:minmax(0, 1fr) 132px;
    overflow:visible;
  }

  .djListCard__logoWrap{
    padding:16px 18px;
  }

  .djListCard__photoWrap{
    position:relative;
    overflow:visible;
  }

  .djListCard__logo{
    max-width:100%;
    width:auto;
    height:auto;
  }

  .djListCard--kyohey .djListCard__logo{
    max-height:48px;
  }

  .djListCard--takuto .djListCard__logo{
    max-height:42px;
  }

  .djListCard--tatsuya .djListCard__logo{
    max-height:58px;
  }

  .djListCard__photo{
    right:-10px;
    bottom:0;
    height:106%;
  }

  .djListCard--kyohey .djListCard__photo{
    right:-12px;
    height:110%;
  }

  .djListCard--takuto .djListCard__photo{
    right:-14px;
    height:112%;
  }

  .djListCard--tatsuya .djListCard__photo{
    right:-10px;
    height:110%;
  }

  .djHero--detail{
    padding-top:12px;
    padding-bottom:22px;
  }

  .djDetail{
    width:100%;
  }

  .djDetail__heroTop{
    display:grid;
    grid-template-columns:1fr;
    grid-template-areas:
      "visual"
      "content";
    gap:0;
    align-items:start;
  }

  .djDetail__visual{
    grid-area:visual;
    min-height:auto;
    justify-content:center;
    align-items:flex-end;
    margin:0;
  }

  .djDetail__image{
    width:min(100%, 420px);
    max-width:100%;
  }

  .djDetail__content{
    grid-area:content;
    max-width:none;
    min-width:0;
    padding-top:0;
    margin-top:-118px;
    position:relative;
    z-index:10;
    width:100%;
    padding-left:0;
    padding-right:0;
  }

  .djHero__title--detail{
    width:min(100%, 360px);
    max-width:100%;
    margin:0 auto;
    line-height:.9;
    letter-spacing:-0.025em;
    text-align:center;
  }

  .djHero__title--detail > span:nth-child(1){
    font-size:70px;
  }

  .djHero__title--detail > span:nth-child(2){
    font-size:54px;
  }

  .djHero__title--detail > span:nth-child(3){
    font-size:36px;
  }

  .djDetail__line{
    width:min(100%, 360px);
    height:5px;
    margin:14px auto 14px;
  }

  .djDetail__nameLogoWrap{
    width:min(100%, 360px);
    justify-content:center;
    margin:0 auto 12px;
  }

  .djDetail__nameLogo{
    max-width:190px;
    margin:0 auto;
  }

  .djDetail__sns{
    width:min(100%, 360px);
    justify-content:center;
    gap:10px;
    margin:0 auto;
  }

  .djDetail__snsIcon{
    width:22px;
    height:22px;
    flex-basis:22px;
  }

  .djDetail__snsIconImage{
    width:11px;
    height:11px;
  }

  .djDetail__profile{
    width:100%;
    max-width:100%;
    margin-top:18px;
    padding:0;
  }

  .djDetail__profile::before{
    width:min(100%, calc(100% - 28px));
    margin:0 auto 10px;
    font-size:16px;
  }

  .djDetail__profile p{
    width:min(100%, calc(100% - 28px));
    margin:0 auto;
    column-count:1;
    font-size:13px;
    line-height:1.72;
  }

  .djProfWrap{
    width:100%;
  }

  .djSwipeHint{
    top:60%;
  }

  .djSwipeHint__chevrons{
    gap:8px;
  }

  .djSwipeHint__chevrons img{
    width:24px;
  }
}

@media (max-width: 560px){
  .djHero__line--1{
    font-size:72px;
  }

  .djHero__line--2{
    font-size:56px;
  }

  .djHero__line--3{
    font-size:36px;
  }

  .djList{
    gap:28px;
  }

  .djListCard{
    height:132px;
    min-height:132px;
    grid-template-columns:minmax(0, 1fr) 118px;
  }

  .djListCard__logoWrap{
    padding:14px 16px;
  }

  .djListCard--kyohey .djListCard__logo{
    max-height:42px;
  }

  .djListCard--takuto .djListCard__logo{
    max-height:36px;
  }

  .djListCard--tatsuya .djListCard__logo{
    max-height:48px;
  }

  .djListCard__photo{
    right:-8px;
    height:102%;
  }

  .djListCard--kyohey .djListCard__photo{
    right:-10px;
    height:106%;
  }

  .djListCard--takuto .djListCard__photo{
    right:-12px;
    height:108%;
  }

  .djListCard--tatsuya .djListCard__photo{
    right:-10px;
    height:106%;
  }

  .djDetail__content{
    margin-top:-96px;
  }

  .djHero__title--detail{
    width:min(100%, 320px);
  }

  .djHero__title--detail > span:nth-child(1){
    font-size:56px;
  }

  .djHero__title--detail > span:nth-child(2){
    font-size:43px;
  }

  .djHero__title--detail > span:nth-child(3){
    font-size:29px;
  }

  .djDetail__line,
  .djDetail__nameLogoWrap,
  .djDetail__sns{
    width:min(100%, 320px);
  }

  .djDetail__nameLogo{
    max-width:170px;
  }

  .djSwipeHint{
    top:61%;
  }

  .djSwipeHint__chevrons{
    gap:6px;
  }

  .djSwipeHint__chevrons img{
    width:20px;
  }
}