@charset "UTF-8";
/* =====
 * FONTS
=================================================================== */
@keyframes rotate-left {0% {transform: rotate(360deg);}100% {transform: rotate(0deg);}}
@keyframes rotate-right {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}
@keyframes pathmove {0% {height: 0;bottom: 100%;}50% {height: 100%;bottom: 0;}100% {height: 100%;bottom: -100%;}}
/* =====
 * MODULE
=================================================================== */
/* =====
 * LAYOUT :: ALL DEVICE
=================================================================== */
#Contents {position: relative;z-index: 2;background: #fff;transition: opacity var(--easing) 1500ms;}
#Contents.staging {opacity: 1!important;}
#Main {position: relative;}
p, ul, ol, li, dl, dd, table {margin-bottom: 1em;}
* > *:last-child {margin-bottom: 0;}
sup {font-size: 62.5%;vertical-align: super;}
img {display: block;width: 100%;height: auto;}
a.btn {display: block;text-decoration: none;}
figure[data-caps] {position: relative;}
figure[data-caps]::after {content: attr(data-caps)"";position: absolute;bottom: 0;right: 0;line-height: 1;font-size: 62.5%;padding: 1em;z-index: 2;color: #fff;}
figure[data-caps].invert::after {color: #333;}
.fadeIn.observe {position: relative;opacity: 0;transform: scale(1.05) translateY(30px);transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);-webkit-backface-visibility: hidden;backface-visibility: hidden;will-change: transform;}
.fadeIn.append {opacity: 1;transform: scale(1) translateY(0);}
.appear.observe {position: relative;opacity: 0;-webkit-backface-visibility: hidden;backface-visibility: hidden;}
.appear.append {opacity: 1;transition: opacity ease-out 600ms 200ms;}
.ttl-style-01 {margin-bottom: 2em;font-size: 100%;font-family: var(--serif);text-align: center;letter-spacing: 0.3em;}
.ttl-style-01 span {display: block;margin-bottom: 0.25em;background: var(--grad-02);-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-size: 250%;line-height: 1;color: var(--color-01);}
.ttl-style-02 {position: relative;border-bottom: 1px solid #eee;margin-bottom: 1em;padding-bottom: 0.25em;font-size: 100%;font-family: var(--serif);letter-spacing: 0.3em;color: var(--color-01);}
.ttl-style-02 span {margin-right: 1em;font-size: 150%;color: var(--color-01);}
.ttl-style-02::before {content: "";position: absolute;top: 100%;left: 0;width: 1em;height: 1px;background-color: var(--color-01);}
.lead {font-family: var(--serif);line-height: 2;letter-spacing: 0.2em;}
.lead > span {display: inline-block;white-space: nowrap;}
.grad {display: inline-block;background: var(--grad-01);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.loader {position: fixed;top: calc(50% - 32px);left: calc(50% - 32px);width: 64px;height: 64px;z-index: -1;}
.loader div {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 50%;box-sizing: border-box;opacity: .8;}
.one {border-top: 1px solid #8FB259;animation: rotate-left 1s linear infinite;}
.two {border-right: 1px solid #CCCC52;animation: rotate-right 1s linear infinite;}
.three {border-bottom: 1px solid #FFD933;animation: rotate-right 1s linear infinite;}
.four {border-left: 1px solid #FF7F00;animation: rotate-right 1s linear infinite;}
.pathmove {position: relative;overflow: hidden;background-color: var(--color-02);width: 1px;height: 2em;margin: 0 auto;}
.pathmove span {animation: pathmove 1.5s both cubic-bezier(.15, .31, .24, .88) infinite;position: absolute;bottom: 0;right: 0;z-index: 2;background-color: #fff;width: 1px;text-indent: -999em;}
.venogallery {position: relative;}
.venogallery::before {content: "";position: absolute;top: 0;right: 0;width: 2em;height: 2em;background: #fff url("../img/icon_search.svg") no-repeat 50% / 50% auto;filter: invert(1);opacity: 0.8;}
.figlio {max-width: 1200px!important;margin: 0 auto;}
.pageCaption {background-color: #f9f9f9;padding: 1.5em 0;}
.pageCaption p {margin: 0;font-size: 75%;}

#Pagetop > p {position: fixed;bottom: 0;right: 0;opacity: 0;transition: opacity ease 500ms;z-index: 3;font-size: 87.5%;width: 3.5em;background: var(--grad-01);transform: rotate(-90deg);}
#Pagetop.standby > p {opacity: 1;}
#Pagetop.staging > p a {cursor: default;pointer-events: none;}
#Pagetop > p img {transform: scale(0.5);filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(48deg) brightness(108%) contrast(100%);}
#Billboard.staging + #Pagetop.standby > p {opacity: 0;}

#GlobalHeader {position: absolute;top: 0;left: 0;right: 0;padding: 1em;display: flex;justify-content: space-between;}
#GlobalHeader h1 a {background: transparent url("../img/logo_02.svg?20260803") no-repeat 0 0% / auto 18%;padding-left: 2.1em;font-family: var(--sans-serif);letter-spacing: 0.16em;line-height: 1;color: #fff;}
#GlobalHeader h1 a small {display: block;margin-bottom: 0.25em;letter-spacing: 0.16em;line-height: 1.5;font-size: 25%;}
#GlobalHeader h1 a span {display: none;font-size: 262%;margin-left: -0.85em;}
#GlobalHeader h1 a span span {font-size: 27.5%;margin: 0 0 0 0.2em;}
#GlobalHeader h1 a::after {content: "";display: block;background: transparent url("../img/logo_01.svg") no-repeat 0 0 / contain;height: 3em;margin-left: -2em;margin-top: 0.5em;}
#GlobalHeader nav a {position: relative;background: var(--grad-01);padding: 1em 3em 1em 4em;letter-spacing: 0.16em;font-weight: bold;color: #fff;}

#Billboard footer {background: #334 url("../img/bg_01.webp") no-repeat 50% / cover;background-blend-mode: soft-light;}
#Billboard footer ul {display: flex;flex-wrap: wrap;justify-content: center;gap: 1em;padding: 1.5em 0 4em;}
#Billboard footer ul li {margin: 0;padding: 1em;font-family: var(--serif);font-size: 150%;text-align: center;letter-spacing: 0.32em;line-height: 1;color: #fff;}
#Billboard footer ul li:first-child {width: 100%;opacity: 0.8;}
#Billboard footer ul li + li {position: relative;width: 17.5em;margin: 0 1em;font-size: 125%;line-height: 1.8;}
#Billboard footer ul li + li::before {content: "";position: absolute;top: 0;left: 0;width: 4em;height: 4em;background: transparent url("../img/frame.svg") no-repeat 0 0 / cover;}
#Billboard footer ul li + li::after {content: "";position: absolute;bottom: 0;right: 0;width: 4em;height: 4em;background: transparent url("../img/frame.svg") no-repeat 0 0 / cover;transform: rotate(180deg);}
#Billboard footer ul li strong {font-weight: normal;font-size: 125%;}
#Billboard footer ul li em {display: block;margin-bottom: 0.75em;font-style: normal;}
#Billboard footer ul li em::before,
#Billboard footer ul li em::after {content: "";display: inline-block;width: 3em;height: 1px;background-color: #ffffff88;margin: 0.25em 0.5em;}

#Main .block-index-01 {overflow: hidden;}
#Main .block-index-01 .swiper-wrapper {transition-timing-function: linear !important;}
#Main .block-index-01 .swiper-slide {width: 30em;background: #ccc;display: flex;align-items: center;justify-content: center;}

#Main .block-index-02 .column {position: relative;margin-top: -10em;display: flex;}
#Main .block-index-02 .column > div:nth-child(1) {display: flex;flex-direction: column;justify-content: end;}
#Main .block-index-02 .column > div:nth-child(1) figure {height: calc(100% - 11em);}
#Main .block-index-02 .column > div:nth-child(1) figure img {height: 100%;object-fit: cover;;}
#Main .block-index-02 .column > div:nth-child(2) {padding: 3em;background-color: #fff;}

#Main .block-index-03 header h3 {position: absolute;top: 0;left: 0;right: 0;padding: 0.2em 0 0.5em;background: #334 url("../img/bg_01.webp") no-repeat 50% / cover;background-blend-mode: soft-light;font-family: var(--serif);font-size: 250%;text-align: center;line-height: 1;letter-spacing: 0.16em;color: rgb(255 255 255 / 70%);}
#Main .block-index-03 header h3::first-letter {font-size: 175%;color: rgb(255 255 255 / 75%);}
#Main .block-index-03 header ul {margin: 2em 0;}
#Main .block-index-03 header ul li {position: relative;margin: 0 0 0.5em;padding-left: 7.5em;font-family: var(--serif);white-space: nowrap;}
#Main .block-index-03 header ul li strong {font-size: 250%;font-weight: normal;line-height: 1;}
#Main .block-index-03 header ul li::before {content: attr(data-label)"";position: absolute;top: 0;left: 0;}
#Main .block-index-03 header ul li:last-child::before {top: 1em;}
#Main .block-index-03 footer a {position: relative;background: var(--grad-01);margin-top: 1.5em;padding: 1.5em 3em 1.5em 4em;border-radius: 3px;letter-spacing: 0.16em;text-align: center;font-weight: bold;color: #fff;}
#Main .block-index-03 footer a::before {content: "";position: absolute;top: 0;bottom: 0;left: 1em;width: 1em;background: transparent url("../img/icon_email.svg") no-repeat 50% / auto 1em;filter: invert(99%) sepia(0%) saturate(2%) hue-rotate(307deg) brightness(110%) contrast(100%);}
#Main .block-index-03 footer .caps {font-size: 62.5%;}
#Main .block-index-03 article {position: relative;padding: 6em 3em 3em;box-shadow: 0 0 1em rgb(0 0 0 / 10%);border-radius: 1em;overflow: hidden;}
#Main .block-index-03 .body figure {max-width: 36em;margin: 0 auto 1em;}
#Main .block-index-03 .body ul {display: flex;}
#Main .block-index-03 .body ul li {margin: 0;flex: 1;}
#Main .block-index-03 .column {position: relative;display: flex;justify-content: center;gap: 1.5em;width: calc(100% - 3em);margin: 6em auto;}
#Main .block-index-03 .column > div {width: calc(50% - 0.75em);}

#Main .block-index-04 {background: #334 url("../img/bg_01.webp") no-repeat 50% / cover;background-blend-mode: soft-light;padding: 5em 1.5em 3.5em;}
#Main .block-index-04 .grid-list {justify-content: space-between;gap: 1em;margin: 0 0 1.5em;}
#Main .block-index-04 .grid-list > div {position: relative;border: 1px solid rgb(255 255 255 / 15%);box-shadow: 0 0 1em rgb(0 0 0 / 20%);box-sizing: border-box;margin: 0;width: calc((100% - 4em) / 5);padding-bottom: 1em;}
#Main .block-index-04 .grid-list > div p {text-align: center;font-family: var(--serif);font-size: 87.5%;white-space: nowrap;color: #fff;}
#Main .block-index-04 .grid-list > div img {max-width: 6em;margin: 0 auto;filter: invert(99%) sepia(0%) saturate(2%) hue-rotate(307deg) brightness(110%) contrast(100%);}
#Main .block-index-04 .grid-list > div::before {content: attr(data-num)"";position: absolute;top: 0;left: 0.5em;font-size: 200%;font-family: var(--serif);color: #fff;}
#Main .block-index-04 .column {display: flex;gap: 1em;}
#Main .block-index-04 .column > div {flex: 1;}
#Main .block-index-04 .column > div p {padding: 1em 0 2em;line-height: 1.75;text-align: center;font-family: var(--serif);font-size: 87.5%;color: #fff;}
#Main .block-index-04 .column > div figure {position: relative;border: 1px solid rgb(255 255 255 / 15%);box-shadow: 0 0 1em rgb(0 0 0 / 20%);background-color: dimgray;}
#Main .block-index-04 .column > div figure img {mix-blend-mode: multiply;min-height: 14em;object-fit: cover;}
#Main .block-index-04 .column > div figure figcaption {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center;white-space: nowrap;font-size: 125%;font-family: var(--serif);color: #fff;}
#Main .block-index-04 .column > div figure figcaption span {display: block;border-bottom: 1px solid #fff;width: 1em;margin: 0 auto 0.5em;padding: 0 0 0.5em;white-space: nowrap;line-height: 1;text-align: center;font-size: 175%;}
#Main .block-index-04 .ttl-style-01 {color: #fff;}
#Main .block-index-04 .ttl-style-01 span {background-color: #fff;background-image: none;mix-blend-mode: soft-light;}

#Main .block-index-05 {position: relative;height: 40vw;isolation: isolate;}
#Main .block-index-05 iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

#Main .block-index-06 {display: none;}
#Main .block-index-06 dl {display: flex;flex-wrap: wrap;border-top: 1px solid #eee;}
#Main .block-index-06 dt {box-sizing: border-box;border-bottom: 1px solid #eee;font-family: var(--serif);letter-spacing: 0.16em;color: var(--color-01);}
#Main .block-index-06 dd {box-sizing: border-box;margin-bottom: 0;border-bottom: 1px solid #eee;}

#Main .block-index-07 {background: gainsboro url("../img/bg_01.webp") no-repeat 50% / cover;background-blend-mode: soft-light;padding: 5em 0;}
#Main .block-index-07 .lead {text-align: center;}
#Main .block-index-07 a {position: relative;background: var(--grad-01);max-width: 16em;margin: 1.5em auto 0;padding: 1.5em 3em 1.5em 4em;border-radius: 3px;letter-spacing: 0.16em;text-align: center;font-weight: bold;color: #fff;}
#Main .block-index-07 a::before {content: "";position: absolute;top: 0;bottom: 0;right: 1em;width: 2em;background: transparent url("../img/icon_external.svg") no-repeat 50% / auto 1em;filter: invert(99%) sepia(0%) saturate(2%) hue-rotate(307deg) brightness(110%) contrast(100%);}

#GlobalFooter {border-top: 1px solid #eee;}
#GlobalFooter dl {margin: 0;}
#GlobalFooter dl dt {margin-bottom: 0.5em;font-size: 87.5%;line-height: 1.6;}
#GlobalFooter dl dd {letter-spacing: 0.16em;line-height: 1.4;}
#GlobalFooter dl dd img {display: inline-block;width: auto;height: 1.6em;margin-right: 0.5em;vertical-align: middle;}
#GlobalFooter ul {margin-top: 0.5em;}
#GlobalFooter ul li {margin-bottom: 0.25em;font-size: 62.5%;line-height: 1.6;}
#GlobalFooter ul li[data-label]::before {content: attr(data-label)"：";}
#GlobalFooter .column {display: flex;flex-wrap: wrap;}
#GlobalFooter .column > div:nth-child(1) dd img {transform: scale(0.75);transform-origin: 0 50%;}
#GlobalFooter .copyright {border-top: 1px solid #ddd;font-size: 75%;line-height: 1;margin-top: 2em;padding: 1.5em 0;}
/* =====
* LAYOUT :: PC
=================================================================== */
@media only screen and (min-width:769px) {
  body {min-width: 1080px;}
  #Contents .container {width: calc(100% - 4em);max-width: 1200px;padding: 0 2em;margin-left: auto;margin-right: auto;box-sizing: border-box;}
  a[href^="tel:"] {pointer-events: none;}
  a.btn {transition: opacity var(--easing) 200ms;cursor: pointer;}
  a.btn:hover {opacity: 0.75;}
  .cf:after,
  .cf::after {content: "";display: table;clear: both;}
  .cf > .left {float: left;}
  .cf > .right {float: right;}
  .grid-list {display: flex;align-items: stretch;flex-direction: row;flex-wrap: wrap;}

  #GlobalHeader nav a::before {content: "";position: absolute;top: 0;bottom: 0;left: 1em;width: 1em;background: transparent url("../img/icon_email.svg") no-repeat 50% / auto 1em;filter: invert(99%) sepia(0%) saturate(2%) hue-rotate(307deg) brightness(110%) contrast(100%);}

  #Main .block-index-06 {padding: 5em 0;}
  #Main .block-index-06 dt {width: 16em;padding: 1.25em 1.5em;}
  #Main .block-index-06 dd {width: calc(100% - 16em);padding: 1.25em 1.5em;}

  #GlobalFooter {padding: 1.5em 0 0;}
  #GlobalFooter .column {justify-content: space-between;gap: 2em;}
  #GlobalFooter .column > div:nth-child(1) {flex: 1;}
}
/* =====
* LAYOUT :: SP
=================================================================== */
@media only screen and (max-width:768px) {
  html,body {overflow-x: hidden;}
  body {font-size: 3.6vw;}
  
  .cf > .left, .cf > .right {float: none;}
  .lead {line-height: 2.0;}
  .scroller {overflow-x: scroll;position: relative;}
  .scroller::before {content: "";display: block;transition: opacity var(--easing) 500ms;position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: transparent url("../img/common/icon_swipe.svg") no-repeat 50% 50%;background-size: 20% auto;z-index: 3;}
  .scroller::after {content: "";display: block;transition: opacity var(--easing) 500ms;position: absolute;top: 0;left: 0;bottom: 0; background-color: rgba(0, 0, 0, 0.2);width: 150%;padding: 3%;z-index: 2;}
  .scroller.on::before,.scroller.on::after {opacity: 0;}
  .scroller img {width: 150%;padding: 3%;opacity: 0.5;transition: opacity var(--easing) 100ms;}
  .scroller.on img {opacity: 1;}
  .scroller::-webkit-scrollbar {-webkit-appearance: none !important;height: 10px !important;background: #eaeaea !important;}
  .scroller::-webkit-scrollbar-thumb {background: #cdcdcd !important;}
  .pageCaption .container {padding: 0!important;}

  #Contents .container {padding: 3em 0;margin: 0 1.5em;}
  #Pagetop > p {bottom: 0.74em;right: 0.74em;}

  #GlobalHeader nav a {position: absolute;top: 0;right: 0;padding: 1em;writing-mode: vertical-rl;text-orientation: upright;font-size: 87.5%;}
  #GlobalHeader nav a::before {content: "";display: inline-block;margin-bottom: 0.5em;width: 1.1em;height: 1em;background: transparent url("../img/icon_email.svg") no-repeat 100% 50% / contain;filter: invert(99%) sepia(0%) saturate(2%) hue-rotate(307deg) brightness(110%) contrast(100%);}

  #Billboard footer ul li,
  #Billboard footer ul li + li {font-size: 125%;white-space: nowrap;line-height: 1.7;letter-spacing: 0.16em;}
  #Billboard footer ul li + li {width: 14.5em;}
  #Billboard footer ul li em::before {display: none;}
  #Billboard footer ul li em::after {display: block;margin: 1em auto;}

  #Main .block-index-01 .swiper-slide {width: 18em;}
  #Main .block-index-02 .column {margin-top: 0;flex-direction: column;}
  #Main .block-index-02 .column > div:nth-child(1) {display: none;}

  #Main .block-index-03 {padding-bottom: 3em;}
  #Main .block-index-03 header h3 {font-size: 200%;}
  #Main .block-index-03 header ul li {padding-left: 0;text-align: center;}
  #Main .block-index-03 header ul li::before {position: relative;display: block;top: inherit!important;left: inherit;background-color: #eee;line-height: 2;text-align: center;}
  #Main .block-index-03 article {padding: 4.5em 1em 1.5em;}
  #Main .block-index-03 .column {margin: 0 auto;flex-direction: column;}
  #Main .block-index-03 .column > div {width: 100%;}
  #Main .block-index-03 .column > div:nth-child(1) .body figure {overflow: hidden;}
  #Main .block-index-03 .column > div:nth-child(1) .body figure img {margin: -32% 0;}

  #Main .block-index-04 .grid-list {display: flex;flex-wrap: wrap;}
  #Main .block-index-04 .grid-list > div {width: calc((100% - 1em) / 2);padding: 0.5em 0;}
  #Main .block-index-04 .column {flex-direction: column;}

  #Main .block-index-05 {height: 120vw;}

  #Main .block-index-06 dt {width: 100%;padding: 1em 0 0.25em;border-bottom: none;}
  #Main .block-index-06 dd {width: 100%;padding: 0 0 1em;}

  #GlobalFooter p {text-align: center;}
  #GlobalFooter dl dt {background-color: #eee;padding: 0.5em;text-align: center;}
  #GlobalFooter dl dd img {display: block;margin: 0 auto;}
  #GlobalFooter ul li {text-align: center;}
  #GlobalFooter .container {padding-bottom: 0;}
  #GlobalFooter .column {gap: 1em;}
  #GlobalFooter .column > div {width: 100%;}
  #GlobalFooter .column > div:nth-child(1) dd img {height: 1em;}
  #GlobalFooter .copyright {text-align: left;}
}
@media only screen and (max-width:768px) and (orientation: landscape) {}
@media only screen and (max-width: 640px) {}
@media only screen and (max-width: 480px) {}
/* =====
* LAYOUT :: 改行調整
=================================================================== */
#Contents br.sp,
#Contents br.pc {display: none;}
@media only screen and (min-width:769px) {#Contents br.pc { display: inherit!important; }}
@media only screen and (max-width:768px) {#Contents br.sp { display: inherit!important; }}



