@charset "UTF-8";
/* =====
 * LAYOUT :: ALL DEVICE
=================================================================== */
#Billboard {position: relative;}
#Billboard h2 {font-size: 230%;font-weight: normal;font-family: 'Cinzel', serif;letter-spacing: 0.35em;line-height: 1;text-align: center;opacity: 0;}
#Billboard h2 span {display: inline-block;background: var(--grad-03);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
#Billboard h2 + p {font-size: 112.5%;font-family: "Cinzel", "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ 明朝", serif;letter-spacing: 0.35em;line-height: 1;text-align: center;opacity: 0;}
#Billboard h2 + p span {display: inline-block;background: var(--grad-03);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
#Billboard h2 + p::before {content: "";display: block;margin: 1em auto;max-width: 20em;width: calc(100% - 4em);height: 1px;background: linear-gradient(90deg, rgba(167, 138, 96,0.2) 0%, rgba(180, 167, 158,1) 50%, rgba(167, 138, 96,0.2) 100%);}
#Billboard h2.append,
#Billboard h2.append + p {letter-spacing: 0.3em;opacity: 1;transition: opacity cubic-bezier(0.445, 0.05, 0.55, 0.95) 2000ms,letter-spacing cubic-bezier(0.445, 0.05, 0.55, 0.95) 1500ms;}
#Billboard h2.append + p::before {max-width: 30em;transition: max-width cubic-bezier(0.445, 0.05, 0.55, 0.95) 500ms 1000ms;}
#Billboard .container {position: relative;z-index: 2;width: calc(100% - 4em);max-width: 1260px;padding: 5em 2em;margin-left: auto;margin-right: auto;box-sizing: border-box;}
#Billboard::after {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: #e6eff4 url("../img/common/bg_07.webp") no-repeat 50% 0 / 100% auto;}

#Main .introduction ul li a {display: block;color: #aaa;padding: 0.5em 1.5em;font-size: 150%;font-family: 'EB Garamond', serif;letter-spacing: 0.05em;line-height: 1;text-decoration: none;text-align: center;}
#Main .introduction ul li a small {display: block;margin-top: 0.5em;font-size: 50%;line-height: 1;}
#Main .introduction ul li.current a {color: var(--deep-blue);cursor: default;pointer-events: none;}

#Main .block-structure-01 {position: relative;background: transparent url("../img/common/bg_03.webp") no-repeat 50% 0 / 100% auto;}
#Main .block-structure-01 .pathmove {transform: translateY(-2.5em);}
#Main .block-structure-01 .pickup > div p {font-size: 93.75%;margin: 0 0 1em;letter-spacing: 0;}
#Main .block-structure-01 .pickup > div p strong {display: block;font-size: 125%;font-weight: normal;font-family: 'EB Garamond', serif;padding-bottom: 0.25em;margin-bottom: 0.25em;border-bottom: 1px solid #ddd;}
#Main .block-structure-01 .pickup > div figure::after {transform: translateY(100%);padding: 0;}
#Main .block-structure-01 .grid-list > div figure {border: 1px solid #b9bcc7;}
#Main .block-structure-01 .grid-list > div figure img {mix-blend-mode: multiply;}
#Main .block-structure-01 .grid-list > div figure + p {font-family: 'EB Garamond', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";text-align: center;margin: 0;padding: 0.5em 0;}
#Main .block-structure-01 .grid-list > div h5 {position: relative;border-bottom: 1px solid #b9bcc7;font-weight: bold;font-size: 100%;margin: 0.5em 0;padding: 0.5em 0;}
#Main .block-structure-01 .grid-list > div h5[data-icon] {padding-left: 2.5em;}
#Main .block-structure-01 .grid-list > div h5[data-icon]::before {content: attr(data-icon)"";transform: translateY(-50%);position: absolute;top: 50%;left: 0;width: 2em;background-color: #41725b;display: block;text-align: center;color: #ffffff;line-height: 2;font-family: 'EB Garamond', serif;font-weight: normal;z-index: 2;}
#Main .block-structure-01 .grid-list > div h5 + p {font-size: 87.5%;padding: 0 0 1em;}
#Main .block-structure-01 .grid-list > div p small {display: block;margin-top: 0.5em;font-size: 75%;line-height: 1.5;letter-spacing: 0;}
#Main .block-structure-01 .container {position: relative;padding-top: 1.5em;}

/* =====
* LAYOUT :: PC
=================================================================== */
@media only screen and (min-width:769px) {
  #Main .introduction ul {display: table;margin: 1.5em auto 0;}
  #Main .introduction ul li {display: table-cell;width: 25%;}
  #Main .introduction ul li a {transition: color ease 500ms;}
  #Main .introduction ul li a:hover {color: var(--deep-blue);}
  #Main .introduction ul li + li a {position: relative;}
  #Main .introduction ul li + li a::before {content: "";position: absolute;top: 0.75em;bottom: 0.75em;left: 0;width: 1px;background-color: #ddd;}

  #Main .block-structure-01 .pickup {display: table;margin: 3em auto 2em;}
  #Main .block-structure-01 .pickup > div {display: table-cell;vertical-align: top;}
  #Main .block-structure-01 .pickup > div:nth-child(1) {width: 23em;}
  #Main .block-structure-01 .pickup > div:nth-child(2) {max-width: calc(828px - 4em);padding-left: 4em;}
  #Main .block-structure-01 .grid-list-wrap {overflow: hidden;}
  #Main .block-structure-01 .grid-list {margin: 1em -1em;}
  #Main .block-structure-01 .grid-list > div {width: calc(33.33% - 2em);margin: 1em;max-width: 377px;}
  #Main .block-structure-01 .grid-list > div h5 + p span {white-space: nowrap;}
  #Main .block-structure-01 .grid-list > div.wide {width: calc(66.66% - 2em);max-width: 786px;}

}
/* =====
* LAYOUT :: TAB
=================================================================== */
@media only screen and (min-width: 769px) and (max-width: 1260px) {
  #Main .block-structure-01 .pickup > div:nth-child(1) {width: 28%;}
  #Main .block-structure-01 .pickup > div:nth-child(2) {width: 70%; max-width: calc(828px - 2em);padding-left: 2em;}
  
}
/* =====
* LAYOUT :: SP
=================================================================== */
@media only screen and (max-width:768px) {
  #Billboard .container {padding: 2.5em 0;}
  #Billboard h2 {font-size: 175%;}
  #Billboard h2 small::before {margin: 0.5em 0 0.75em;}

  #Main .introduction ul {overflow: hidden;margin-bottom: 2em;}
  #Main .introduction ul li {float: left;width: 50%;margin: 0;}
  #Main .introduction ul li a {padding: 0.5em 0;margin: 1px;border-radius: 5px; border: 1px solid rgba(18, 50, 70,0.2);font-size: 125%;}

  #Main .block-structure-01 .pickup > div:nth-child(1) {margin-bottom: 2em; display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-ms-flex-direction: column-reverse;-webkit-flex-direction: column-reverse;flex-direction: column-reverse;}
  #Main .block-structure-01 .pickup > div:nth-child(1) figure {}
  #Main .block-structure-01 .pickup > div:nth-child(1) p {margin: 1.5em 0 0;}
  #Main .block-structure-01 .pickup > div:nth-child(1) p strong {font-size: 112.5%;}
  #Main .block-structure-01 .grid-list {margin-top: 1.5em;}
  #Main .block-structure-01 .grid-list > div {width: 100%;margin: 1.5em 0 0;}

}
@media only screen and (max-width:768px) and (orientation: landscape) {}
@media only screen and (max-width: 640px) {}
@media only screen and (max-width: 480px) {}