@charset 'utf-8';

/* common
------------------------------------------------ */
#header { top: 177.866666667vw; background-color: rgba(255,255,255,0.85); }
#main { padding-top: 0; }

.body-visual-over #header { position: fixed; }

@media screen and (max-width: 768px) {
  #footer { margin-top: 140px; }
}

@media screen and (min-width: 769px) {
  #header { top: 100vh; /*top: 56.2225475842vw;*/ }
}

/* visual
------------------------------------------------ */
.top-visual { position: relative; }
.top-visual-main { position: relative; padding-bottom: 177.866666667%; width: 100%; height: 0; overflow: hidden; z-index: 1; }
.top-visual-main--copy { position: absolute; top: 57.7211394303%; left: 30px; z-index: 1; }
.top-visual-main--copy span { display: inline-block; padding: 2px 14px; background-color: #534741; vertical-align: top; font-size: 2.1rem; font-weight: 700; letter-spacing: 0.08em; line-height: 1.75556428571; color: #fff; }
.top-visual-main--photo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: -1; }
.top-visual-main--photo > .frame { position: relative; width: 100%; height: 100%; }
.top-visual-main--photo--picture { position: relative; height: 100%; }
.top-visual-main--photo--picture > picture { height: 100%; }
.top-visual-main--photo img { width: auto; height: 100%; max-width: inherit; }
.top-visual-news { position: relative; }
.top-visual-news--title { font-family: 'Overpass', sans-serif; font-size: 1.4rem; font-weight: 600; line-height: 1.2; }
.top-visual-news__lists--item { position: relative; padding-right: 25px; }
.top-visual-news__lists--date { font-family: 'Overpass', sans-serif; font-size: 1.2rem; font-weight: 600; line-height: 1.2; }
.top-visual-news__lists--title { width: 100%; text-overflow: ellipsis; white-space: nowrap; font-size: 1.35rem; font-weight: 400; line-height: 1.2; overflow: hidden; }
.top-visual-news--link { position: absolute; top: 50%; right: 26px; transform: translateY(-50%); height: 6px; }
.top-visual-news--link > a { display: inline-block; height: 100%; vertical-align: top; }

.top-visual-main--copy.lazy-done { transition-delay: 0.4s; }

@media screen and (max-width: 768px) {
  .top-visual-main--photo--picture { display: none; position: absolute; top: 0; left: 0; overflow: hidden; }
  .top-visual-main--photo--picture:first-child { display: block; }
  .top-visual-news { padding: 20px 30px; }
  .top-visual-news--title { position: absolute; top: 20px; left: 30px; }
  .top-visual-news__lists--date { margin-bottom: 8px; padding-left: 142px; }
}

@media screen and (min-width: 769px) {
  .top-visual-main { padding-bottom: 100vh; /*padding-bottom: 56.2225475842%;*/ }
  .top-visual-main--copy { top: 57.03125%; left: 7.32064421669vw; }
  .top-visual-main--copy span { padding: 0 18px; font-size: 3rem; line-height: 1.82825; }
  .top-visual-main--photo img { position: absolute; top: 0; left: 0; width: auto; height: 100%; max-width: inherit; }
  .top-visual-news { display: flex; align-items: center; position: absolute; bottom: 0; right: 0; padding: 20px 0; width: 772px; background-color: #fff; border-radius: 14.556px 0 0 0; z-index: 2; }
  .top-visual-news--title { padding: 7px 0 3px 28px; width: 170px; border-right: 1px solid #a79d96; font-size: 1.4rem; }
  .top-visual-news__lists { width: calc(100% - 170px); }
  .top-visual-news__lists--item { display: flex; align-items: center; padding: 0 77px 0 18px; }
  .top-visual-news__lists--date { padding-top: 4px; width: 110px; font-size: 1.2rem; }
  .top-visual-news__lists--title { width: calc(100% - 110px); font-size: 1.4rem; }
  .top-visual-news--link { right: 42px; height: 7px; }
  .top-visual-news--link .i-arrow { width: 34px; height: 100%; }
}

/* concept
------------------------------------------------ */
.top-concept { position: relative; margin-top: 120px; }
.top-concept-copy { position: relative; margin: 0 auto; width: 110px; height: 178px; }
.top-concept-copy > i { position: absolute; top: 104px; right: -24px; width: 48px; height: 60px; }
.top-concept-text { margin-top: 50px; text-align: justify; font-size: 1.3rem; line-height: 2; }
.top-concept-photos { position: relative; }

@media screen and (max-width: 768px) {
  .top-concept-info { margin: 0 30px; }
  .top-concept-photos { display: flex; flex-wrap: wrap; align-items: center; margin-top: 40px; }
  .top-concept-photos--item:nth-of-type(1) { margin: 0 0 25px auto; width: 67.7333333333%; }
  .top-concept-photos--item:nth-of-type(2) { margin-left: 10.9333333333%; width: 35.2%; }
  .top-concept-photos--item:nth-of-type(3) { margin-left: 7.73333333333%; width: 37.8666666667%; }
}

@media screen and (min-width: 769px) {
  .top-concept { margin-top: 220px; }
  .top-concept > .wrap { display: flex; justify-content: space-between; padding: 0 70px; }
  .top-concept-info { width: 50.5149906191%; }
  .top-concept-copy { width: 164px; height: 265px; }
  .top-concept-copy > i { top: 155px; right: -32px; width: 68px; height: 73px; }
  .top-concept-text { margin-top: 128px; padding-bottom: 54px; font-size: 1.6rem; letter-spacing: 0; line-height: 2.75; }
  .top-concept-photos { width: 42.5891181989%; }
  .top-concept-photos--item:nth-of-type(1) { width: 88.1057268722%; }
  .top-concept-photos--item:nth-of-type(2) { position: absolute; bottom: 0; left: 6.6079%; width: 41.8502202643%; }
  .top-concept-photos--item:nth-of-type(3) { position: absolute; bottom: 27.2727272727%; right: 0; width: 59.0308370044%; }
}

/* service
------------------------------------------------ */
.top-service { position: relative; }
.top-service .title-group { position: absolute; top: 42px; left: 30px; z-index: 2; }
.top-service-content { position: relative; padding: 112px 30px 65px; background-color: #f1ede9; border-radius: 11px 0 0 11px; z-index: 1; }
.top-service-lists__info { position: relative; }
.top-service-lists--cat { display: inline-flex; align-items: baseline; padding: 6px 13px 2px; background-color: #aea49d; }
.top-service-lists--cat span { display: inline-block; vertical-align: top; line-height: 1.2; color: #fff; }
.top-service-lists--cat span:nth-of-type(1) { font-family: 'Overpass', sans-serif; font-size: 1.5rem; font-weight: 600; }
.top-service-lists--cat span:nth-of-type(2) { margin-left: 2px; font-size: 1.1rem; font-weight: 700; line-height: 1.2; }
.top-service-lists--num { position: absolute; top: 4px; left: 0; width: 36px; height: 36px; text-align: center; font-family: 'Overpass', sans-serif; font-size: 2rem; font-weight: 400; line-height: 40px; }
.top-service-lists--num > svg { position: absolute; top: 0; left: -1px; transform: rotate(-35deg); stroke-dasharray: 100px; width: 100%; height: 100%; }
.top-service-lists--num > svg circle { fill: none; r: 17.5px; stroke: #aea49d; stroke-width: 1px; }
.top-service-lists--title { padding-left: 55px; font-size: 1.8rem; font-weight: 700; letter-spacing: 0.06em; line-height: 1.38888888889; }
.top-service-lists--text { margin-top: 12px; text-align: justify; font-size: 1.3rem; line-height: 1.84615384615; color: #736357; }

@media screen and (max-width: 768px) {
  .top-service { margin: 140px 0 0 30px; }
  .top-service-lists--item { margin-top: 25px; }
  .top-service-lists--item:first-child { margin-top: 0; }
  .top-service-lists--photo { margin: 0 auto 30px; width: 80%; }
  .top-service-lists--cat { margin-bottom: 18px; }
  .top-service-lists--cat + .top-service-lists--num { top: 50px; }
}

@media screen and (min-width: 769px) {
  .top-service { margin-top: 170px; overflow: hidden; }
  .top-service .title-group { top: 75px; left: 75px; }
  .top-service-content { margin-left: 146px; padding: 145px 20px 62px 86px; border-radius: 21px 0 0 21px; }
  .top-service-content::after { content: ''; position: absolute; top: 0; right: calc((1166px - 100vw) / 2); width: calc((100vw - 1166px) / 2); height: 100%; background-color: #f1ede9; }
  .top-service-lists { display: flex; }
  .top-service-lists--item { margin: 60px 6.4622124863% 0 0; width: 29.0251916758%; }
  .top-service-lists--item:nth-of-type(-n+3) { margin-top: 0; }
  .top-service-lists--item:nth-of-type(3n) { margin-right: 0; }
  .top-service-lists--photo { margin-bottom: 25px; }
  .top-service-lists__info { padding-top: 50px; }
  .top-service-lists--cat { position: absolute; top: 0; left: 0; padding: 7px 18px 5px; }
  .top-service-lists--cat span:nth-of-type(1) { font-size: 1.6rem; }
  .top-service-lists--num { top: 50px; width: 42px; height: 42px; font-size: 2.5rem; line-height: 48px; }
  .top-service-lists--num > svg { stroke-dasharray: 110px; }
  .top-service-lists--num > svg circle { r: 19.5px; }
  .top-service-lists--title { padding-left: 60px; font-size: 1.8rem; line-height: 1.44444444444; }
  .top-service-lists--text { margin-top: 20px; font-size: 1.4rem; line-height: 2.14285714286; }
}

@media screen and (min-width: 769px) and (max-width: 1206px) {
  .top-service-content::after { right: -20px; width: 20px; }
}

/* point
------------------------------------------------ */
.top-point { position: relative; overflow: hidden; }
.top-point .title-group { margin-bottom: 24px; text-align: center; }
.top-point-lists--num { margin-bottom: 10px; font-family: 'Overpass', sans-serif; font-size: 1.3rem; font-weight: 600; line-height: 1.2; color: #736357; }
.top-point-lists--title { font-size: 1.8rem; font-weight: 700; }
.top-point-lists--text { margin-top: 18px; text-align: justify; font-size: 1.3rem; line-height: 1.84615384615; color: #736357; }

@media screen and (max-width: 768px) {
  .top-point { margin-top: 65px; padding: 0 30px; }
  .top-point-lists--item { margin-bottom: 25px; }
  .top-point-lists--item:last-child { margin-bottom: 0; }
  .top-point-lists--photo { margin-bottom: 10px; }
  .top-point-lists--num,
  .top-point-lists--title { text-align: center; }
}

@media screen and (min-width: 769px) {
  .top-point { margin-top: 110px; }
  .top-point .title-group { margin-bottom: 78px; }
  .top-point-lists { margin: 0 13px 0 54px; }
  .top-point-lists--item { display: flex; justify-content: space-between; align-items: center; margin-top: 60px; }
  .top-point-lists--item:nth-of-type(even) { flex-flow: row-reverse; }
  .top-point-lists--photo,
  .top-point-lists__info { width: 46.0909090909%; }
  .top-point-lists--num { margin-bottom: 30px; font-size: 1.7rem; }
  .top-point-lists--title { font-size: 2.6rem; line-height: 1.6; }
  .top-point-lists--text { margin-top: 30px; font-size: 1.4rem; line-height: 2.42857142857; }
}

/* ordermade
------------------------------------------------ */
.top-ordermade { display: block; position: relative; margin-top: 56px; padding-bottom: 99.2%; width: 100%; height: 0; overflow: hidden; }
.top-ordermade::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(128,128,117,0.8); mix-blend-mode: multiply; z-index: -1; }
.top-ordermade-info,
.top-ordermade-photo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.top-ordermade-info { display: flex; align-items: center; padding: 0 27.5px; z-index: 1; color: #fff; }
.top-ordermade-info > .frame { position: relative; width: 100%; }
.top-ordermade-title { text-align: center; font-size: 2.1rem; font-weight: 700; line-height: 1.4880952381; }
.top-ordermade-text { margin-top: 15px; font-size: 1.3rem; line-height: 1.84615384615; }
.top-ordermade .btn-1 { margin-top: 30px; }
.top-ordermade-photo { z-index: -2; }
.top-ordermade-photo picture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.top-ordermade-name { position: absolute; top: 0; left: 27.5px; transform-origin: left top; transform: rotate(90deg); padding-left: 60px; font-family: 'Overpass', sans-serif; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.12em; line-height: 1.2; color: #fff; }
.top-ordermade-name::before { content: ''; position: absolute; top: 4px; left: 0; height: 1px; background-color: #fff; }

.top-ordermade.lazy.lazy-done .top-ordermade-name::before { width: 40px; animation: ordermade cubic-bezier(0.4,0.15,0.12,1) 1.25s forwards; }

@keyframes ordermade {
  0% {
    width: 0;
  }
  100% {
    width: 45px;
  }
}

@media screen and (max-width: 768px) {
}

@media screen and (min-width: 769px) {
  .top-ordermade { margin-top: 120px; padding-bottom: 440px; }
  .top-ordermade-title { font-size: 3rem; line-height: 1.6; }
  .top-ordermade-text { margin-top: 20px; text-align: center; font-size: 1.4rem; line-height: 2.42857142857; }
  .top-ordermade .btn-1 { margin-top: 40px; }
  .top-ordermade-name { left: 95px; padding-left: 80px; font-size: 1.6rem; }
  .top-ordermade-name::before { top: 8px; }

  @keyframes ordermade {
    0% {
      width: 0;
    }
    100% {
      width: 51.5px;
    }
  }
}

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

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

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

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

/* topics
------------------------------------------------ */
.top-topics { position: relative; margin-top: 50px; }
.top-topics .title-group { margin: 0 52.5px 35px; }
.top-topics-multi { position: relative; }
.top-topics-lists--top { display: flex; margin-bottom: 8px; min-height: 18px; }
.top-topics-lists--date { width: 95px; padding-top: 5px; font-family: 'Overpass', sans-serif; font-size: 1.1rem; font-weight: 600; line-height: 1.2; }
.top-topics-lists--cat { display: flex; flex-wrap: wrap; margin: -5px 0 0 -5px; width: calc(100% - 95px); font-size: 1rem; font-weight: 700; line-height: 1.2; }
.top-topics-lists--cat > span { display: inline-block; margin: 5px 0 0 5px; padding: 3px 10px 2px; background-color: #fff;  border: 1px solid #aea49d; border-radius: 20px; vertical-align: top; }
.top-topics-lists--title { font-size: 1.4rem; font-weight: 700; line-height: 1.57142857143; }
.top-topics-media { position: relative; }
.top-topics-media--photo { position: relative; }
.top-topics-media .btn-1 { margin-top: 35px; }

@media screen and (max-width: 768px) {
  .top-topics-lists--photo { margin-bottom: 15px; }
  .top-topics .slide-1-bullets { margin-top: 24px; }
  .top-topics-media--photo { display: none; }
}

@media screen and (min-width: 769px) {
  .top-topics { margin-top: 110px; }
  .top-topics .title-group { margin: 0 60px 8px; }
  .top-topics-multi { display: flex; flex-flow: row-reverse; justify-content: space-between; align-items: flex-end; margin: 0 60px; }
  .top-topics-slide { width: 58.0470162749%; }
  .top-topics-lists { display: block; }
  .top-topics-lists--item { padding: 36px 0 16px; border-bottom: 1px solid #a79d96; }
  .top-topics-lists--photo { display: none; }
  .top-topics-lists--top { margin-bottom: 8px; min-height: 24px; }
  .top-topics-lists--date { width: 125px; padding-top: 7px; font-size: 1.4rem; }
  .top-topics-lists--cat { margin: -6px 0 0 -6px; width: calc(100% - 125px); font-size: 1.3rem; }
  .top-topics-lists--cat > span { margin: 6px 0 0 6px; padding: 4px 12px; }
  .top-topics-lists--title { font-size: 1.6rem; line-height: 1.75; }
  .top-topics .slide-1-bullets { display: none; }
  .top-topics-media { width: 29.8372513562%; }
  .top-topics-media--photo { padding-bottom: 72.7272727273%; width: 100%; height: 0; border-radius: 6px; overflow: hidden; }
  .top-topics-media--photo img { display: none; position: absolute; top: 0; left: 0; z-index: 1; }
  .top-topics-media--photo img.active { z-index: 2; }
  .top-topics-media .btn-1 { margin-top: 60px; }
}

/* qa
------------------------------------------------ */
.top-qa { position: relative; margin-top: 70px; }
.top-qa .title-group { margin-bottom: 38px; text-align: center; }
.top-qa-lists--item { position: relative; }
.top-qa-lists--item > a { display: block; position: relative; padding: 40px 27px 25px; height: 100%; background-color: #f1ede9; border-radius: 8.5px; }
.top-qa-lists--num { position: absolute; top: 12px; left: 12px; font-family: 'Overpass', sans-serif; font-size: 2rem; font-weight: 600; line-height: 1.2; z-index: 1; }
.top-qa-lists--num::before,
.top-qa-lists--num::after { content: ''; position: absolute; top: 4px; left: 6px; width: 32px; height: 32px; background-color: #736357; border-radius: 0 0 100% 0; }
.top-qa-lists--num::before { margin: -1px 0 0 -1px; background-color: #f1ede9; z-index: -1; }
.top-qa-lists--num::after { background-color: #736357; z-index: -2; }
.top-qa-lists--photo { margin: 0 12.5px 10px; }
.top-qa-lists__info { position: relative; }
.top-qa-lists--title { font-size: 1.5rem; font-weight: 700; line-height: 1.75; }
.top-qa-lists--text { margin-top: 16px; font-size: 1.2rem; line-height: 1.79166666667; }
.top-qa .btn-1 { margin-top: 34px; }

.device-click .top-qa-lists--photo img { transition: ease 0.4s; }
.device-click .top-qa-lists--item > a:hover { opacity: 1; }
.device-click .top-qa-lists--item > a:hover .top-qa-lists--photo img { transform: scale(1.1); }

@media screen and (max-width: 768px) {
  .top-qa .slide-1-bullets { margin-top: 32px; }
  .top-qa-lists--item { transform: none; opacity: 1; }
}

@media screen and (min-width: 769px) {
  .top-qa { margin-top: 150px; }
  .top-qa .title-group { margin-bottom: 45px; }
  .top-qa-lists { display: flex; flex-wrap: wrap; margin: 0 56px; }
  .top-qa-lists--item { margin: 3.03605313095% 3.03605313095% 0 0; width: 31.3092979127%; }
  .top-qa-lists--item:nth-of-type(-n+3) { margin-top: 0; }
  .top-qa-lists--item:nth-of-type(3n) { margin-right: 0; }
  .top-qa-lists--item > a { padding: 70px 35px 25px; }
  .top-qa-lists--num  { top: 15px; left: 15px; font-size: 2.5rem; }
  .top-qa-lists--num::before,
  .top-qa-lists--num::after { top: -1px; left: 4px; width: 46px; height: 46px; }
  .top-qa-lists--photo { margin: 0 0 20px; }
  .top-qa-lists--title { font-size: 1.6rem; }
  .top-qa-lists--text { margin-top: 18px; font-size: 1.4rem; line-height: 1.82142857143; }
  .top-qa .slide-1-bullets { display: none; }
  .top-qa .btn-1 { margin-top: 60px; }
}