@charset "UTF-8";
/* =====
 * LAYOUT :: ALL DEVICE
=================================================================== */
#Main .block-outline-01 {background: transparent url("../img/outline/bg_01.webp") no-repeat 50% / cover;}
#Main .block-outline-01 h2 {text-align: center;letter-spacing: 0.25em;font-size: 87.5%;color: #fff;transition: letter-spacing var(--easing) 1200ms 400ms;}
#Main .block-outline-01 h2 + p {text-align: center;letter-spacing: 0.25em;font-size: 200%;color: #fff;mix-blend-mode: soft-light;transition: letter-spacing var(--easing) 1200ms 400ms;}
body.loaded #Main .block-outline-01 h2.staging {letter-spacing: 0.2em;}
body.loaded #Main .block-outline-01 h2 + p.staging {letter-spacing: 0.2em;}

#Main .block-outline-02 h3 {text-align: center;font-size: 250%;}
#Main .block-outline-02 h3 span {background: var(--grad-blue);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
#Main .block-outline-02 h4 img {max-width: 21.875em;margin: 0 auto 5em;}
#Main .block-outline-02 h4 ~ p {margin-bottom: 2em;text-align: center;line-height: 2;}
#Main .block-outline-02 .container {padding: 5em 0 5em;}
#Main .block-outline-02 + .block-outline-01 {background-image: url(../img/outline/bg_02.webp);}

#Main .block-outline-03 .outline .grid-list {border-top: 1px solid #ddd;}
#Main .block-outline-03 .outline .grid-list .item {border-bottom: 1px solid #ddd;}
#Main .block-outline-03 .outline .grid-list .item > div:nth-child(1) {background-color: #f5f8f9;font-weight: bold;}
#Main .block-outline-03 .outline .grid-list .item p {margin: 0;}
#Main .block-outline-03 .outline .grid-list .item ul li {margin: 0;}
#Main .block-outline-03 .outline .grid-list .item ol {padding-left: 1.5em;}
#Main .block-outline-03 .outline .grid-list .item ol li {margin: 0;list-style: decimal;}
#Main .block-outline-03 .outline .grid-list .item.map > div:nth-child(2) {flex-direction: column;align-items: flex-start;}
#Main .block-outline-03 .outline .grid-list .item.map > div:nth-child(2) iframe {margin-top: 1em;width: 100%;height: 20em;}

#Main .block-outline-04 {overflow-x: scroll;border-bottom: 4px solid rgb(0 115 187 / 30%);}
#Main .block-outline-04 .column-list {border-bottom: 4px solid rgb(0 115 187 / 30%);}
#Main .block-outline-04::-webkit-scrollbar {-webkit-appearance: none !important;height: 1em !important;background: rgb(0 115 187 / 30%) !important;}
#Main .block-outline-04::-webkit-scrollbar-thumb {background: var(--grad-blue) !important;cursor: pointer;border-radius: 1em;}

#Main .block-outline-04 h4 {border-bottom: 1px solid rgb(255 255 255 / 50%);margin-bottom: 0.5em;padding-bottom: 0.5em;text-align: center;font-size: 200%;color: #fff;}
#Main .block-outline-04 h4 small {display: block;font-size: 50%;}
#Main .block-outline-04 p {width: 100%;text-align: center;font-size: 93.75%;color: #fff;}
#Main .block-outline-04 p span {display: inline-block;white-space: nowrap;}
#Main .block-outline-04 .column-list {position: relative;z-index: 2;display: table;border-spacing: 1em;padding: 1em 0 1em 1em;}
#Main .block-outline-04 .column-list > div {background-color: var(--yell-blue);margin: 1em;padding: 1em;border-radius: 1em;display: table-cell;}
#Main .block-outline-04 .column-list > div:nth-child(even) {background-color: var(--yell-sax);}
#Main .block-outline-04 .column-list > div > div {width: 16em;}
#Main .block-outline-04 .column-list::after {content: "";position: absolute;top: 32%;left: 0;width: 100%;bottom: 0;background: transparent url("../img/common/bg_01.webp") no-repeat 50% / cover;z-index: -1;}

#Main .block-outline-05 {background-color: #f5f8f9;padding: 3em 0;}
#Main .block-outline-05 .ttl-style-02 {padding-left: 0;}
#Main .block-outline-05 .ttl-style-02 small {margin-left: 1em;font-size: 62.5%;color: #888;}
#Main .block-outline-05 h4 {border-bottom: 1px solid #ddd;padding: 0 0.5em 0.5em;}
#Main .block-outline-05 h4 img {width: 21.25em;font-size: 100%;}
#Main .block-outline-05 section {background-color: #fff;border-radius: 0.5em;padding: 1.5em;}
#Main .block-outline-05 section + section {margin-top: 1.5em;}
#Main .block-outline-05 section > div {padding: 1.5em 1em 1em;}
#Main .block-outline-05 section > div p {font-size: 93.75%;line-height: 1.5;}
#Main .block-outline-05 section .more a::after {filter: invert(27%) sepia(92%) saturate(1468%) hue-rotate(181deg) brightness(98%) contrast(101%);}
/* =====
* LAYOUT :: PC
=================================================================== */
@media only screen and (min-width: 769px) {
  #Main .block-outline-01 h2 {max-width: 600px;width: 53.19%;}
  #Main .block-outline-01 .container {height: 30vw;display: flex;flex-direction: column-reverse;align-items: center;justify-content: center;}

  #Main .block-outline-03 .outline {padding: 3em;}
  #Main .block-outline-03 .outline .grid-list {overflow: hidden;}
  #Main .block-outline-03 .outline .grid-list .item {display: flex;flex-wrap: nowrap;align-items: stretch;width: 100%;}
  #Main .block-outline-03 .outline .grid-list .item > div:nth-child(1) {padding: 1em;width: 10em;display: flex;align-items: center;justify-content: center;}
  #Main .block-outline-03 .outline .grid-list .item > div:nth-child(2) {padding: 1em;flex: 1;display: flex;align-items: center;}
  #Main .block-outline-03 .outline .grid-list .item:nth-child(odd) {position: relative;}
  #Main .block-outline-03 .outline .grid-list .item:nth-child(odd)::before {content: "";position: absolute;bottom: -1px;left: 0;width: 200%;height: 1px;background-color: #ddd;}
  #Main .block-outline-03 .container {margin-top: -6em;background-color: #fff;}
  #Main .block-outline-05 section {position: relative;}
  #Main .block-outline-05 section .more {position: absolute;top: 2.5em;right: 1.5em;}
}
@media only screen and (min-width: 769px) and (max-width: 1128px) {}
/* =====
* LAYOUT :: SP
=================================================================== */
@media only screen and (max-width: 768px) {
  #Main .block-outline-01 h2 + p {font-size: 150%;}
  #Main .block-outline-01 .container {height: 50vw;display: flex;flex-direction: column-reverse;justify-content: center;align-items: center;}

  #Main .block-outline-02 .container {padding-bottom: 2em;}

  #Main .block-outline-03 .outline {margin: 1.5em 0;}
  #Main .block-outline-03 .outline .grid-list {display: block;}
  #Main .block-outline-03 .outline .grid-list .item {display: block;padding-bottom: 1em;}
  #Main .block-outline-03 .outline .grid-list .item:last-child {border-bottom: 0;padding-bottom: 0;}
  #Main .block-outline-03 .outline .grid-list .item > div {padding: 0.5em 1em;}

  #Main .block-outline-04 {position: relative;}
  #Main .block-outline-04 > * {opacity: 0.5;transition: opacity cubic-bezier(0.445, 0.05, 0.55, 0.95) 1000ms;}
  #Main .block-outline-04::before {content: "";display: block;transition: opacity cubic-bezier(0.445, 0.05, 0.55, 0.95) 1000ms 500ms,transform cubic-bezier(0.445, 0.05, 0.55, 0.95) 1500ms;position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: transparent url("../img/common/icon_swipe.svg") no-repeat 50% 80%;background-size: 20% auto;z-index: 3;}
  #Main .block-outline-04::after {content: "";display: block;transition: opacity cubic-bezier(0.445, 0.05, 0.55, 0.95) 1000ms 500ms;position: absolute;top: 0;left: 0;bottom: 0;background: linear-gradient(0deg, rgba(0, 115, 187,0.5) 0%, rgba(0, 115, 187,0.5) 50%, rgba(0, 115, 187,0.5) 100%);width: 250%;padding: 3%;z-index: 2;}
  #Main .block-outline-04.staging::before {opacity: 0;transform: translateX(1em);}
  #Main .block-outline-04.staging::after {opacity: 0;}
  #Main .block-outline-04.staging > * {opacity: 1;}

  #Main .block-outline-05 h4 img {width: 18em;}
  #Main .block-outline-05 section .more {border: 1px solid var(--yell-sax);border-radius: 0.5em;padding: 1em;}
}
@media only screen and (max-width: 768px) and (orientation: landscape) {}
@media only screen and (max-width: 640px) {}
@media only screen and (max-width: 480px) {}