@charset "UTF-8";
/* =====
 * LAYOUT :: ALL DEVICE
=================================================================== */
#Billboard {position: relative;}
#Billboard h2 {position: absolute;top: 50%;left: 50%;z-index: 3;transform: translate(-50%, 0);font-size: 500%;font-weight: normal;font-family: 'Cinzel', serif;color: #fff;letter-spacing: 0.15em;line-height: 0.58;}
#Billboard h2 + p {position: absolute;bottom: 50%;left: 50%;z-index: 3;transform: translate(-50%, 0);font-size: 180%;font-weight: normal;font-family: 'Cinzel', serif;color: #fff;letter-spacing: 0.25em;line-height: 1;}
#Billboard::after {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 2;background-color: dimgray;mix-blend-mode: multiply;opacity: 0.6;}

#Main .block-structure-01 {position: relative;}
#Main .block-structure-01 .pathmove {position: absolute;top: 0;left: 50%;transform: translateY(-50%);}
#Main .block-structure-01 .grid-list > div:not(:first-child) figure {mix-blend-mode: multiply;border: 1px solid #b9bcc7;box-sizing: border-box;}
#Main .block-structure-01 .grid-list > div h5 {position: relative;border-bottom: 1px solid #b9bcc7;margin: 0.5em 0;padding: 0.5em 0;font-weight: normal;font-family: 'Cinzel', YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";font-size: 112.5%;letter-spacing: 0.15em;}
#Main .block-structure-01 .grid-list > div h5[data-icon] {padding-left: 1.8em;}
#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: 1.5em;background: #6e5526;display: block;text-align: center;color: #ffffff;line-height: 1.5;font-family: 'Cinzel', 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 h5 + p small {display: block;margin-top: 0.5em;font-size: 75%;line-height: 1.5;letter-spacing: 0;}
#Main .block-structure-01 .container {background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);}
#Main .block-structure-01 .pathmove {position: absolute;top: 0;left: 50%;transform: translateY(-50%);}
/* =====
* LAYOUT :: PC
=================================================================== */
@media only screen and (min-width:769px) {
  #Main .block-structure-01 .grid-list-wrap {overflow: hidden;position: relative;}
  #Main .block-structure-01 .grid-list {margin: 1em -1em;}
  #Main .block-structure-01 .grid-list > div {width: calc(50% - 2em);margin: 1em;}
  #Main .block-structure-01 .grid-list > div:first-child {width: calc(100% - 2em);}
  #Main .block-structure-01 .grid-list > div:first-child figure {width: 70%;}
  #Main .block-structure-01 .grid-list > div:last-child {position: absolute;top: 5%;right: 0;width: calc(30% - 2em);}
  #Main .block-structure-01 .grid-list > div:last-child figure {border: none;max-width: 200px;margin: 0 auto;}
  #Main .block-structure-01 .grid-list > div h5 + p span {white-space: nowrap;}
}
/* =====
* LAYOUT :: TAB
=================================================================== */
@media only screen and (min-width: 769px) and (max-width: 1260px) {}
/* =====
* LAYOUT :: SP
=================================================================== */
@media only screen and (max-width:768px) {
  #Billboard h2 {font-size: 280%;}
  #Billboard h2 + p {white-space: nowrap;font-size: 150%;}

  #Main .block-structure-01 .grid-list {margin-top: 1.5em;}
  #Main .block-structure-01 .grid-list > div {width: 100%;margin: 1.5em 0 0;}
  #Main .block-structure-01 .grid-list > div:first-child figure img {width: calc(100% + 2em);margin: 0 -1em 2em;}
  #Main .block-structure-01 .grid-list > div:first-child figure::after {bottom: -2em;}
  #Main .block-structure-01 .grid-list > div:last-child figure img {width: 45%;margin: 1em auto;}
}
@media only screen and (max-width:768px) and (orientation: landscape) {}
@media only screen and (max-width: 640px) {}
@media only screen and (max-width: 480px) {}