@charset 'utf-8';

/* common
------------------------------------------------ */
@media screen and (max-width: 768px) {
  #main { padding-top: 0; }
}

/* case
------------------------------------------------ */
.case { position: relative; }

/* header
------------------------------------------------ */
.case-hd { position: relative; background-color: #f1ede9; }
.case-hd-content { position: relative; padding: 100px 0 55px; }
.case-hd-title { position: relative; }
.case-hd-title--en,
.case-hd-title--ja { line-height: 1.2; }
.case-hd-title--en { font-family: 'Overpass', sans-serif; font-size: 3.7rem; font-weight: 600; }
.case-hd-title--ja { font-size: 1.2rem; font-weight: 700; }
.case-hd-detail { position: relative; }
.case-hd-detail--photo { position: relative; }
.case-hd-detail__info { position: relative; }
.case-hd-detail--cat { display: inline-block; margin-bottom: 16px; padding: 6px 20px; background-color: #534741; vertical-align: top; font-size: 1.6rem; font-weight: 700; line-height: 1.2; color: #fff; }
.case-hd-detail--cat > span { font-size: 1.28rem; }
.case-hd-detail--title { font-size: 1.9rem; font-weight: 700; line-height: 1.63157894737; }
.case-hd-scroll { position: absolute; right: 25px; bottom: -100px; transform-origin: top right; transform: rotate(90deg); font-family: 'Overpass', sans-serif; font-size: 1rem; font-weight: 600; line-height: 1.2; }
.case-hd-scroll > a { display: block; position: relative; padding-right: 75px; }
.case-hd-scroll > a::after { content: ''; position: absolute; top: 4px; left: calc(100% - 66px); width: 0; height: 1px; background-color: #534741; }

.case-hd-title--ja.lazy { transition-delay: 0.2s; }
.case-hd-detail--cat.lazy { transition-delay: 0.4s; }
.case-hd-detail--title.lazy { transition-delay: 0.6s; }
.case-hd-detail--photo.lazy { transition-delay: 1s; }

.case-hd-scroll.lazy-done > a::after { animation: caseScroll cubic-bezier(0.4,0.15,0.12,1) 1.25s forwards; }

@keyframes caseScroll {
  0% {
    width: 0;
  }
  100% {
    width: 65px;
  }
}

@media screen and (max-width: 768px) {
  .case-hd-title { margin-bottom: 30px; padding: 0 30px; }
  .case-hd-detail__info { margin-top: 20px; text-align: center; }
}

@media screen and (min-width: 769px) {
  .case-hd-content { padding: 60px 0 80px; }
  .case-hd-title { position: absolute; top: 40px; left: 20px; }
  .case-hd-title--en { font-size: 5.6rem; }
  .case-hd-title--ja { font-size: 1.6rem; }
  .case-hd-detail { display: flex; flex-flow: row-reverse; align-items: flex-end; }
  .case-hd-detail--photo { width: 67.409948542%; }
  .case-hd-detail__info { width: 32.590051458%; }
  .case-hd-detail--cat { margin-bottom: 20px; padding: 6px 20px; font-size: 2rem; }
  .case-hd-detail--cat > span { font-size: 1.6rem; }
  .case-hd-detail--title { white-space: nowrap; font-size: 2.2rem; line-height: 2; }
  .case-hd-scroll { right: 40px; bottom: -77px; font-size: 1.4rem; }
  .case-hd-scroll > a { padding-right: 154px; }
  .case-hd-scroll > a::after { top: 5px; left: calc(100% - 130px); }

  @keyframes caseScroll {
    0% {
      width: 0;
    }
    100% {
      width: 130px;
    }
  }
}

/* content
------------------------------------------------ */
.case-content { position: relative; }

/* thoughts
------------------------------------------------ */
.case-thoughts { position: relative; margin-top: 45px; }
.case-thoughts-copy { margin-top: 35px; font-size: 1.9rem; font-weight: 700; line-height: 1.75; }
.case-thoughts-text { margin-top: 18px; font-size: 1.1rem; letter-spacing: 0; line-height: 2.18181818182; color: #736357; }

@media screen and (max-width: 768px) {
  .case-thoughts { padding: 0 30px; }
}

@media screen and (min-width: 769px) {
  .case-thoughts { margin-top: 80px; }
  .case-thoughts > .wrap { max-width: 1030px; }
  .case-thoughts-copy { margin-top: 60px; font-size: 3.4rem; line-height: 1.94117647059; }
  .case-thoughts-text { margin-top: 40px; font-size: 1.6rem; line-height: 2.75; }
}

/* interview
------------------------------------------------ */
.case-interview { position: relative; margin-top: 35px; }
.case-interview > .wrap > .frame { background-color: #efebe6; border-radius: 11px 0 0 11px; }
.case-interview-title { position: relative; margin: 0 0 20px -50px; padding: 30px 0 0 32px; height: 108px; z-index: 1; }
.case-interview-title::after { content: ''; position: absolute; top: 0; left: 0; width: 305px; height: 100%; background: url(../../img/case/balloon.svg) no-repeat center center; background-size: 100% 100%; z-index: -1; }
.case-interview-title--en,
.case-interview-title--ja { line-height: 1.2; color: #fff; }
.case-interview-title--en { font-family: 'Overpass', sans-serif; font-size: 3.2rem; font-weight: 600; }
.case-interview-title--ja { font-size: 1.5rem; font-weight: 700; }
.case-interview-text { font-size: 1.2rem; line-height: 2; color: #736357; }
.case-interview-introduce { position: relative; margin-top: 35px; }
.case-interview-introduce--title { display: flex; align-items: center; font-family: 'Overpass', sans-serif; font-size: 2.3rem; font-weight: 600; line-height: 0.12em; line-height: 1.2; color: #736357; }
.case-interview-introduce--title > i { display: inline-block; margin: -3px 15px 0 0; vertical-align: top; }
.case-interview-introduce--title > .i-tableware { width: 21px; height: 28px; }
.case-interview-introduce--text { margin-top: 10px; font-size: 1.1rem; line-height: 2; color: #736357; }

@media screen and (max-width: 768px) {
  .case-interview { padding-left: 30px; }
  .case-interview > .wrap > .frame { padding: 20px 30px 40px; }
}

@media screen and (min-width: 769px) {
  .case-interview { margin-top: 110px; overflow: hidden; }
  .case-interview::after { content: ''; position: absolute; top: 0; right: 0; width: calc((100vw - 1166px) / 2); height: 100%; background-color: #efebe6; z-index: -1; }
  .case-interview > .wrap > .frame { margin-left: 55px; padding: 24px 0 120px; border-radius: 22px 0 0 22px; }
  .case-interview-title { margin: 0 0 60px -72px; padding: 42px 0 0 40px; height: 147px; }
  .case-interview-title::after { width: 418px; }
  .case-interview-title--en { font-size: 4.4rem; }
  .case-interview-title--ja { font-size: 2rem; }
  .case-interview-text,
  .case-interview-introduce { margin-left: 140px; }
  .case-interview-text { font-size: 1.6rem; line-height: 2.0625; }
  .case-interview-introduce { margin-top: 35px; }
  .case-interview-introduce--title { font-size: 2rem; }
  .case-interview-introduce--title > i { margin-right: 15px; }
  .case-interview-introduce--title > .i-tableware { width: 18px; height: 24px; }
  .case-interview-introduce--text { margin-top: 20px; font-size: 1.4rem; line-height: 1.85714285714; }
}

@media screen and (min-width: 769px) and (max-width: 1206px) {
  .case-interview::after { width: 20px; }
}

/* owners */
.case-interview-owners { position: relative; margin-top: 50px; }
.case-interview-owners__block { position: relative; padding: 24px 0; background-color: #fff; border-radius: 13px; }
.case-interview-owners__block:not(:last-child)::before,
.case-interview-owners__block:not(:last-child)::after { content: ''; position: absolute; width: 40px; height: 1px; background-color: #736357; }
.case-interview-owners__block:not(:last-child)::before { transform: rotate(45deg); }
.case-interview-owners__block:not(:last-child)::after { transform: rotate(-45deg); }
.case-interview-owners__info { position: relative; }
.case-interview-owners--company { margin-bottom: 4px; font-size: 1.2rem; font-weight: 700; line-height: 1.2; color: #736357; }
.case-interview-owners--name { font-size: 1.6rem; font-weight: 700; line-height: 1.2; }
.case-interview-owners--name > span { display: inline-block; padding-right: 0.3em; vertical-align: baseline; font-size: 1rem; }
.case-interview-owners--text { margin-top: 10px; text-align: justify; font-size: 1.1rem; line-height: 1.75; color: #736357; }
.case-interview-owners--photo { position: absolute; bottom: 0; }

.case-1 .case-interview-owners__block.owner-1 .case-interview-owners__info { padding: 0 145px 0 18px; }
.case-1 .case-interview-owners__block.owner-1 .case-interview-owners--photo { right: -14px; width: 157px; }
.case-1 .case-interview-owners__block.owner-2 .case-interview-owners__info { padding: 0 18px 0 130px; }
.case-1 .case-interview-owners__block.owner-2 .case-interview-owners--photo { left: -17px; width: 150px; }

.case-2 .case-interview-owners__block.owner-1 .case-interview-owners__info { padding: 0 18px; }
.case-2 .case-interview-owners__block.owner-2 .case-interview-owners__info { padding: 0 18px; }

.case-3 .case-interview-owners__block.owner-1 .case-interview-owners__info { padding: 0 145px 0 18px; }
.case-3 .case-interview-owners__block.owner-1 .case-interview-owners--photo { bottom: -26px; right: -21px; width: 224px; }
.case-3 .case-interview-owners__block.owner-2 .case-interview-owners__info { padding: 0 18px 0 140px; }
.case-3 .case-interview-owners__block.owner-2 .case-interview-owners--photo { left: -18px; width: 158px; }

@media screen and (max-width: 768px) {
  .case-interview-owners__block:not(:first-child) { margin-top: 60px; }
  .case-interview-owners__block:not(:last-child)::before,
  .case-interview-owners__block:not(:last-child)::after { bottom: -30px; left: 50%; margin-left: -20px; }
}

@media screen and (min-width: 769px) {
  .case-interview-owners { display: flex; margin: 80px 0 0 130px; }
  .case-interview-text + .case-interview-owners { margin-top: 108px; }
  .case-interview-owners__block { border-radius: 27px; }
  .case-interview-owners__block:first-child { margin-right: 108px; }
  .case-interview-owners__block:not(:last-child)::before,
  .case-interview-owners__block:not(:last-child)::after { top: 50%; right: -75px; }
  .case-interview-owners--company { margin-bottom: 4px; font-size: 1.6rem; }
  .case-interview-owners--name { font-size: 2rem; }
  .case-interview-owners--name > span { font-size: 1.4rem; }
  .case-interview-owners--text { margin-top: 20px; font-size: 1.4rem; line-height: 1.85714285714; }

  .case-1 .case-interview-owners__block.owner-1 { width: 44.6058091286%; }
  .case-1 .case-interview-owners__block.owner-1 .case-interview-owners__info { padding: 0 47.6744186047% 0 5.81395348837%; }
  .case-1 .case-interview-owners__block.owner-1 .case-interview-owners--photo { right: -6.97674418605%; width: 52.7906976744%; }
  .case-1 .case-interview-owners__block.owner-2 { width: 44.2330809129%; }
  .case-1 .case-interview-owners__block.owner-2 .case-interview-owners__info { padding: 0 5.86854460094% 0 48.8262910798%; }
  .case-1 .case-interview-owners__block.owner-2 .case-interview-owners--photo { left: -2.34741784038%; width: 53.5211267606%; }
  
  .case-2 .case-interview-owners__block { display: flex; align-items: center; }
  .case-2 .case-interview-owners__block.owner-1 { width: 44.6058091286%; }
  .case-2 .case-interview-owners__block.owner-1 .case-interview-owners__info { padding: 0 54px; }
  .case-2 .case-interview-owners__block.owner-2 { width: 44.2330809129%; }
  .case-2 .case-interview-owners__block.owner-2 .case-interview-owners__info { padding: 0 54px; }
  
  .case-3 .case-interview-owners__block.owner-1 { width: 44.6058091286%; }
  .case-3 .case-interview-owners__block.owner-1 .case-interview-owners__info { padding: 0 47.6744186047% 0 5.81395348837%; }
  .case-3 .case-interview-owners__block.owner-1 .case-interview-owners--photo { right: -6.5%; bottom: -18.4%; width: 68.9976689977%; }
  .case-3 .case-interview-owners__block.owner-2 { width: 44.2330809129%; }
  .case-3 .case-interview-owners__block.owner-2 .case-interview-owners__info { padding: 0 5.86854460094% 0 48.8262910798%; }
  .case-3 .case-interview-owners__block.owner-2 .case-interview-owners--photo { left: -2.34741784038%; width: 50.234741784%; }
}

@media screen and (min-width: 769px) and (max-width: 1206px) {
  .case-interview-owners__block.owner-1 .case-interview-owners--photo { right: -20px; }
}

/* qa */
.case-interview-qa { position: relative; margin-top: 40px; }
.case-interview-qa__block { margin-top: 40px; }
.case-interview-qa__block:first-child { margin-top: 0; }
.case-interview-qa__box__top { display: flex; position: relative; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #534741; z-index: 1; }
.case-interview-qa__box__top::before,
.case-interview-qa__box__top::after { content: ''; position: absolute; left: 50%; margin-left: -10px; width: 0; height: 0; border: 10px solid transparent; border-bottom: none; }
.case-interview-qa__box__top::before { bottom: -9px; border-top-color: #efebe6; z-index: -1; }
.case-interview-qa__box__top::after { bottom: -10px; border-top-color: #534741; z-index: -2; }
.case-interview-qa--num { padding-right: 15px; font-family: 'Overpass', sans-serif; font-size: 2.4rem; font-weight: 600; line-height: 1.2; }
.case-interview-qa--title { font-size: 1.7rem; font-weight: 700; line-height: 1.41176470588; }
.case-interview-qa--copy { margin-bottom: 15px; font-size: 1.5rem; font-weight: 700; line-height: 1.4; }
.case-interview-qa__talk { position: relative; }
.case-interview-qa__talk dl { position: relative; }
.case-interview-qa__talk dl + dl { margin-top: 20px; }
.case-interview-qa__talk dt { margin-bottom: 8px; font-size: 1.2rem; font-weight: 700; line-height: 1.2; }
.case-interview-qa__talk dt > span { display: inline-block; padding: 2px 16px; vertical-align: top; color: #fff; }
.case-interview-qa__talk dt > .owner-1 { background-color: #af9a81; }
.case-interview-qa__talk dt > .owner-2 { background-color: #736357; }
.case-interview-qa__talk dd { font-size: 1.1rem; line-height: 2; color: #736357; }
.case-interview-qa__talk .q { position: relative; margin: 40px 0 18px; font-size: 1.5rem; font-weight: 700; line-height: 1.6; }
.case-interview-qa__talk .q::before { content: ''; display: inline-block; width: 18px; height: 1px; background-color: #534741; vertical-align: middle; }
.case-interview-qa--photo { position: relative; }

.case-interview-bonus { position: relative; margin-top: 50px; }
.case-interview-bonus .case-interview-qa__box__top { align-items: center; margin-bottom: 32px; }
.case-interview-bonus .case-interview-qa--num { padding: 4px 0 0; width: 94px; background-color: #534741; border-radius: 15px; text-align: center; font-size: 2.15rem; line-height: 1.2; color: #fff; }
.case-interview-bonus .case-interview-qa--num span { display: inline-block; margin: 2px 0 0 2px; vertical-align: top; font-family: '游ゴシック体', YuGothic, '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック', 'Yu Gothic', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Meiryo', 'メイリオ', 'ＭＳ Ｐゴシック', 'MS P Gothic', Osaka, Arial, Helvetica, Verdana, sans-serif; font-size: 1.5rem; font-weight: 700; }
.case-interview-bonus .case-interview-qa--title { margin-left: 6px; width: calc(100% - 100px); }

@media screen and (max-width: 768px) {
  .case-interview-qa__box { position: relative; }
  .case-interview-qa__talk dt { margin-bottom: 8px; }
  .case-interview-qa--photo { display: block !important; margin-top: 40px; opacity: 1 !important;}
  .case-interview-qa__talk .q::before { margin-right: 6px; }
}

@media screen and (min-width: 769px) {
  .case-interview-qa { margin-top: 120px; }
  .case-interview-qa__block { margin-top: 90px; padding-left: 42.4460431655%; }
  .case-interview-qa__box__top { justify-content: center; margin-bottom: 40px; padding-bottom: 16px; }
  .case-interview-qa__box__top::before,
  .case-interview-qa__box__top::after { margin-left: -18px; border-top-width: 18px; border-right-width: 18px; border-left-width: 18px; }
  .case-interview-qa__box__top::before { bottom: -17px; }
  .case-interview-qa__box__top::after { bottom: -18px; }
  .case-interview-qa--num { margin-top: 6px; padding-right: 15px; font-size: 3.1rem; }
  .case-interview-qa--title { font-size: 2.2rem; line-height: 2; }
  .case-interview-qa--copy { margin-bottom: 35px; font-size: 2rem; line-height: 1.25; }
  .case-interview-qa__talk dl + dl { margin-top: 45px; }
  .case-interview-qa__talk dt { margin-bottom: 25px; font-size: 1.8rem; }
  .case-interview-qa__talk dt > span { padding: 3px 25px; }
  .case-interview-qa__talk dd { font-size: 1.4rem; line-height: 2.42857142857; }
  .case-interview-qa__talk .q { margin: 50px 0; padding-left: 24px; font-size: 1.6rem; line-height: 1.5625; }
  .case-interview-qa__talk .q::before { position: absolute; top: 12px; left: 0; width: 12px; height: 2px; }
  .case-interview-qa--photo { display: none; pointer-events: none; position: absolute; top: auto; bottom: 0; left: calc((1071px - 100vw) / 2); width: 39.8243045388vw; /*max-width: 544px;*/ }
  .case-interview-qa--photo.fixed { position: fixed; top: 93px; left: 0; }

  .case-3 .case-interview-qa__block:nth-of-type(2) .case-interview-qa--title { letter-spacing: 0.04em; }

  .case-interview-bonus { margin: 110px 0 0 100px; }
  .case-interview-bonus .case-interview-qa__box__top { margin-bottom: 77px; max-width: 638px; }
  .case-interview-bonus .case-interview-qa--num { padding: 7px 0 1px; width: 136px; border-radius: 22px; font-size: 3.11805rem; }
  .case-interview-bonus .case-interview-qa--num span { margin: 3px 0 0 3px; font-size: 2.2rem; }
  .case-interview-bonus .case-interview-qa--title { margin-left: 24px; width: calc(100% - 160px); }

}

@media screen and (min-width: 769px) and (max-width: 1200px) {
  .case-interview-qa--photo.fixed { top: 7.75vw; }
}

@media screen and (min-width: 769px) and (max-width: 1206px) {
  .case-interview-qa--photo { left: -75px; }
}

/* other
------------------------------------------------ */
.case-other { position: relative; margin-top: 60px; }
.case-other .title-group { text-align: center; }
.case-other-lists--photo { width: 100%; overflow: hidden; }
.case-other-lists--photo > a { display: block; width: 100%; }
.case-other-lists--cat { display: flex; flex-wrap: wrap; margin-bottom: 15px; font-size: 1.7rem; font-weight: 700; line-height: 1.2; }
.case-other-lists--cat > span { display: inline-block; padding: 5px 18px; background-color: #534741; vertical-align: top; color: #fff; }
.case-other-lists--title { font-size: 1.6rem; font-weight: 700; line-height: 1.5; }
.case-other-lists .btn-1 { margin-top: 45px; }

.device-click .case-other-lists--photo img { transition: ease 0.4s; }
.device-click .case-other-lists--photo > a:hover img { transform: scale(1.03); }

@media screen and (max-width: 768px) {
  .case-other .title-group { margin-bottom: 20px; }
  .case-other-lists--photo { margin-bottom: 20px; }
  .case-other-lists--cat { justify-content: center; }
  .case-other-lists--title { text-align: center; }
  .case-other-slide .slide-1-direct { top: 61vw; }
  .case-other-slide .slide-1-direct--prev { left: 52px; }
  .case-other-slide .slide-1-direct--next { right: 52px; }
  .case-other-slide .slide-1-bullets { position: absolute; bottom: 70px; left: 0; }
}

@media screen and (min-width: 769px) {
  .case-other { margin-top: 120px; }
  .case-other-lists--item { display: flex; align-items: center; }
  .case-other-lists--photo { margin: 0 20px 0 60px; width: calc(100% - 568px); }
  .case-other-lists__info { margin-right: 128px; width: 360px; }
  .case-other-lists--cat { margin-bottom: 28px; font-size: 2.4rem; }
  .case-other-lists--cat > span { padding: 6px 20px; }
  .case-other-lists--title { font-size: 1.8rem; line-height: 1.61111111111; }
  .case-other-lists .btn-1 { margin-top: 50px; }
  .case-other-slide .slide-1-direct { bottom: 2px; }
  .case-other-slide .slide-1-direct--prev { left: 50%; margin-left: -144px; }
  .case-other-slide .slide-1-direct--next { right: 50%; margin-right: -144px; }
  .case-other-slide .slide-1-bullets { margin-top: 50px; }
}