@charset "utf-8";
main {
  background: #fff;
  width: 750px;
  margin-inline: auto;
  text-align: center;
  line-height: 1.333;
  font-size: 23px;
  font-weight: 500;
}
main strong {
  font-weight: 900;
}
main em {
  font-style: normal;
}
main small {
  font-size: 0.85em;
}
main .palt {
  font-feature-settings: "palt";
}
main .underline {
  text-decoration-line: underline;
  text-decoration-thickness: .15em;
}
/*===================================================

Mainvisual
===================================================*/
.area-mainvisual {
  width: 750px;
  height: 782px;
  background: url(/base/osaka/densha_festa/img/250715/top/mainvisual-bg_0703.jpg) no-repeat center top/750px auto;
  overflow: hidden;
  position: relative;
}
.area-mainvisual h1 {
  position: absolute;
  right: 65px;
  top: 170px;
  z-index: 1;
}
.area-mainvisual .train01 {
  width: 618px;
  height: 470px;
  position: absolute;
  left: 0;
  top: 0;
  clip-path: polygon(0 0, 460px 0, 602px 412px, 0 100%);
}
.area-mainvisual .train01 img {
  position: absolute;
  right: -10px;
  bottom: 75px;
}
.area-mainvisual .train02 {
  position: absolute;
  left: 0;
  bottom: 45px;
}
.area-mainvisual .train03 {
  position: absolute;
  right: 0;
  bottom: 13px;
}
/*===================================================

Intro
===================================================*/
#area-intro {
  padding-bottom: 50px;
  background: url(/base/osaka/densha_festa/img/250715/top/intro-deco.svg) no-repeat 10px 560px;
  color: #006d87;
  position: relative;
}
#area-intro:after {
  content: "";
  width: 100%;
  height: 64px;
  background: url(/base/osaka/densha_festa/img/250715/top/intro-deco02.svg) no-repeat center top/ contain;
  position: absolute;
  left: 0;
  bottom: -54px;
}
#area-intro p {
  margin: 10px 10px 0;
}
#area-intro small {
  font-weight: bold;
  font-size: 20px;
}
#area-intro em {
  display: block;
  margin-block: 20px 60px;
  padding: 10px 20px;
  background: #00adb4;
  border-radius: 999rem;
  color: #fff;
}
#area-intro p:last-of-type {
  font-size: 24px;
  line-height: 1.61;
}
/*===================================================

navi
===================================================*/
#area-navi {
  padding: 80px 15px;
  background: radial-gradient(rgba(255, 255, 255, 0.3) 38%, transparent 38%) 0 0 / 64px 64px, radial-gradient(rgba(255, 255, 255, 0.3) 38%, transparent 38%) 32px 32px / 64px 64px, linear-gradient(#d0f8de, #bff6f8);
}
#area-navi .caution {
  width: fit-content;
  margin: 10px auto;
  background: #e14f4e;
  color: #fff;
  font-size: 19px;
}
#area-navi > div {
  width: 624px;
  margin: 10px auto;
  padding: 15px;
  background: #fff;
  border-radius: 8px;
  text-align: justify;
  color: #006d87;
  font-weight: bold;
  font-size: 19px;
}
#area-navi > div strong {
  font-size: 1.4em;
}
/*===================================================

Trains
===================================================*/
#area-experiences,
#area-events,
#area-goods {
  background: url(/base/osaka/densha_festa/img/250715/top/railway.svg) repeat-y center top/720px auto, linear-gradient(#d7f5e3, #cdf5f8);
  position: relative;
}
main .train-container {
  width: 640px;
  margin: 0 auto;
  padding: 80px 0;
}
main .train-body {
  width: 640px;
  padding: 60px 55px;
  margin: 0 auto;
  border-radius: 50px;
  background: #ccc;
  color: #fff;
  position: relative;
}
main .train-body + .train-body {
  margin-top: 50px;
}
main .train-body + .train-body:before {
  content: "";
  width: 720px;
  height: 54px;
  background: #ccc;
  mask: url(/base/osaka/densha_festa/img/250715/top/railway-connection.svg) repeat-y center center / 720px auto;
  position: absolute;
  left: 50%;
  top: -52px;
  transform: translateX(-50%);
  pointer-events: none;
}
main .train-body .white-inner {
  padding: 30px 20px 50px;
  border-radius: 30px;
  background: #fff;
  font-size: 22px;
  font-feature-settings: "palt";
  position: relative;
}
main .train-body .white-inner + .white-inner {
  margin-top: 30px;
}
main .train-body h3 {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.02em;
}
main .train-body li {
  margin-top: 40px;
}
main .train-body li p {
  margin: 8px auto 15px;
}
main .train-body figure {
  margin-top: 15px;
}
main .train-body img {
  width: auto;
  max-width: 100%;
  height: auto;
}
main .train-body .btn {
  display: block;
  width: fit-content;
  margin: 30px auto 15px;
}
main .train-body .reserve h4 {
  font-size: 21px;
}
main .train-body .reserve p {
  text-align: justify;
  padding-left: 10px;
  text-indent: -10px;
  font-size: 20px;
}
main .train-body .reserve-web.blue {
  border-top: 1px solid #175ab2;
}
main .train-body .reserve-web.green {
  border-top: 1px solid #079e93;
}
main .train-body .reserve-web p {
  text-align: justify;
  padding-left: 20px;
  text-indent: -20px;
  font-size: 20px;
}
/*===================================================

Experiences
===================================================*/
#area-experiences .btn-pagetop {
  position: absolute;
  right: 30px;
  top: 0;
  z-index: 4;
}
#area-experiences .btn-pagetop.sticky {
  position: fixed;
  top: 0;
  right: calc(50% - ((750px / 2) - 30px));
}
#area-experiences .train-container {
  width: 724px;
}
#area-experiences hgroup {
  padding-top: 350px;
  width: 724px;
  min-height: 625px;
  color: #fff;
  font-size: 18px;
  position: relative;
}
#area-experiences hgroup > * {
  position: relative;
  z-index: 2;
}
#area-experiences hgroup:before {
  content: "";
  width: 640px;
  height: 100%;
  clip-path: polygon(
    0px calc(100% - 0px),
    0px 292px,
    0px 292px,
    3.80262px 244.71801px,
    14.81376px 199.83488px,
    32.43834px 157.95787px,
    56.08128px 119.69424px,
    85.1475px 85.65125px,
    119.04192px 56.43616px,
    157.16946px 32.65623px,
    198.93504px 14.91872px,
    243.74358px 3.83089px,
    291px 4.846687445968e-30px,
    calc(50% - -28px) 0px,
    calc(50% - -28px) 0px,
    calc(50% - -75.28199px) 3.83089px,
    calc(50% - -120.16512px) 14.91872px,
    calc(50% - -162.04213px) 32.65623px,
    calc(50% - -200.30576px) 56.43616px,
    calc(50% - -234.34875px) 85.65125px,
    calc(50% - -263.56384px) 119.69424px,
    calc(50% - -287.34377px) 157.95787px,
    calc(50% - -305.08128px) 199.83488px,
    calc(50% - -316.16911px) 244.71801px,
    calc(50% - -320px) 292px,
    calc(100% - 0px) calc(100% - 0px),
    0px calc(100% - 0px)
  );
  background-color: #2e7dba;
  position: absolute;
  top: 200px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
}
#area-experiences hgroup:after {
  content: "";
  width: 724px;
  height: 623px;
  background: url(/base/osaka/densha_festa/img/250715/top/exp-trainhead.svg) no-repeat center top / 724px 623px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
}
#area-experiences hgroup p {
  padding: 10px 80px 40px;
}
#area-experiences .train-body:first-of-type {
  background: linear-gradient(to bottom, #2e7dba 100px, #2e7dba 101px, #1a5eb300 50%), linear-gradient(to right, #2e7dba, #1a5eb3);
  margin-top: -70px;
}
#area-experiences .train-body,
#area-experiences .train-body + .train-body:before {
  background: linear-gradient(to right, #2e7dba, #1a5eb3);
}
#area-experiences .train-body .white-inner {
  color: #175ab2;
}
#area-experiences .train-body .dialogs:before {
  content: "";
  width: 145px;
  aspect-ratio: 154/117;
  background: url(/base/osaka/densha_festa/img/250715/top/exp-dialog01.svg) no-repeat center center/contain;
  position: absolute;
  pointer-events: none;
}
#area-experiences .train-body .dialog01:before {
  left: -35px;
  top: -15px;
}
#area-experiences .train-body .dialog02:before {
  left: -40px;
  top: -40px;
}
#area-experiences .train-body .dialog03:before {
  left: -40px;
  top: -25px;
}
[lang="en"] #area-experiences .train-body .dialog01:before {
  left: -50px;
  top: -40px;
}
[lang="en"] #area-experiences .train-body .dialog03:before {
  left: -70px;
  top: -55px;
}
/*===================================================

Events
===================================================*/
#area-events .train-body {
  background: linear-gradient(to right, transparent 10%, #7fdecd 50%, transparent 90%), url(/base/osaka/densha_festa/img/250715/top/events-bg-gradients.jpg) repeat-y center -30px / 750px auto;
}
#area-events .train-body:first-of-type {
  margin-top: 366px;
  padding-top: 20px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  background: url(/base/osaka/densha_festa/img/250715/top/events-bg-patterns.png) repeat-y center top/ 100% auto, linear-gradient(to right, transparent 10%, #7fdecd 50%, transparent 90%), url(/base/osaka/densha_festa/img/250715/top/events-bg-gradients.jpg) repeat-y center -30px / 750px auto;
}
#area-events .train-body:first-of-type:before {
  content: "";
  height: 366px;
  width: 100%;
  background: url(/base/osaka/densha_festa/img/250715/top/events-trainhead.svg) no-repeat center top/ contain, linear-gradient(to bottom, transparent 360px, #7fdecd 360px);
  position: absolute;
  left: 0;
  top: -364px;
}
#area-events .train-body + .train-body:before {
  background: linear-gradient(to right, #0b9e96 10%, #58ccbc 25%, #58ccbc 75%, #0b9e96 90%);
}
#area-events .train-body .white-inner {
  color: #079e93;
}
#area-events .fill {
  width: fit-content;
  margin: 0 auto;
  padding: 5px 20px;
  background: #079e93;
  border-radius: 999rem;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.2;
}
#area-events .train-body .white-inner .btn:nth-of-type(2) {
  margin: 5px auto 0;
}

/*===================================================

goods
===================================================*/
#area-goods .train-body:first-of-type {
  margin-top: 290px;
  padding-top: 20px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
#area-goods .train-body:first-of-type:before {
  content: "";
  height: 290px;
  width: 100%;
  background: url(/base/osaka/densha_festa/img/250715/top/goods-trainhead.svg) no-repeat center top/ contain, linear-gradient(to bottom, transparent 288px, #cdcdcb 288px);
  position: absolute;
  left: 0;
  top: -286px;
}
#area-goods .train-body {
  background: linear-gradient(#cdcdcb, #9d9c9c);
}
#area-goods .train-body + .train-body:before {
  background: linear-gradient(to right, #2e7dba, #1a5eb3);
}
#area-goods .train-body .white-inner {
  color: #175ab2;
}
#area-goods .train-body .white-inner li {
  margin: 0;
}
#area-goods .train-body .white-inner li + li {
  margin-top: 50px;
}

/*===================================================

plane
===================================================*/
#area-plane {
  background: linear-gradient(#cdf5f8, #d0f5f1);
  position: relative;
}
#area-plane:before {
  content: "";
  inset: 0;
  position: absolute;
  background: url(/base/osaka/densha_festa/img/250715/top/railway.svg) repeat-y center top / 720px auto;
  mask-image: linear-gradient(black, transparent 65%);
  pointer-events: none;
}
#area-plane .plane-container {
  padding: 80px 0;
  background: url(/base/osaka/densha_festa/img/250715/top/plane-clouds.svg) no-repeat center 100px/ 750px auto, url(/base/osaka/densha_festa/img/250715/top/plane-planewings.svg) no-repeat center center/ 750px auto;
  position: relative;
}
#area-plane .plane-container:before {
  content: "";
  display: block;
  width: 520px;
  margin: 0 auto;
  aspect-ratio: 516/478;
  background: url(/base/osaka/densha_festa/img/250715/top/plane-planehead.svg) no-repeat center top/ contain;
  pointer-events: none;
}
#area-plane .plane-body {
  width: 516px;
  min-height: 1500px;
  padding-bottom: 350px;
  margin: -90px auto 0;
  color: #0093c6;
  position: relative;
}
#area-plane .plane-body:before {
  content: "";
  width: 100%;
  height: calc(100% - 1000px);
  background: linear-gradient(to right, #fcfdfd 366px, #ddeeed 366px);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  pointer-events: none;
}
#area-plane .plane-body:after {
  content: "";
  display: block;
  width: 750px;
  aspect-ratio: 75/100;
  background: url(/base/osaka/densha_festa/img/250715/top/plane-planetail.svg) no-repeat center top/ contain;
  position: absolute;
  left: -117px;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
}
#area-plane .plane-body > * {
  position: relative;
  z-index: 1;
}
#area-plane .plane-body ul {
  padding-inline: 10px;
  letter-spacing: 0;
  font-feature-settings: "palt";
  font-size: 22px;
}
#area-plane .plane-body ul li + li {
  margin-top: 50px;
}
#area-plane .plane-body ul .col,
#area-plane .plane-body ul .reverse {
  display: flex;
  align-items: center;
  gap: 13px;
  text-align: justify;
  justify-content: center;
}
[lang="en"] #area-plane .plane-body ul .col,
[lang="en"] #area-plane .plane-body ul .reverse {
  text-align: left;
}
#area-plane .plane-body ul .reverse {
  flex-direction: row-reverse;
}
#area-plane .plane-body ul li > figure {
  flex: 0 0 auto;
  text-align: center;
}
#area-plane .plane-body ul > div {
  flex: 1 1 auto;
}

/*===================================================

Fair
===================================================*/
#area-fair {
  padding: 0 0 80px;
  background: linear-gradient(#d0f5f1, #fff);
}
#area-fair .intro {
  position: relative;
}
#area-fair .intro img {
  border-radius: 30px;
  box-shadow: 7px 7px 5px rgba(0 0 0 / 20%);
}
#area-fair .intro a {
  position: absolute;
  left: 50%;
  bottom: 85px;
  width: 377px;
  transform: translateX(-50%);
  border-radius: 999rem;
  box-shadow: 7px 7px 5px rgba(0 0 0 / 20%);
}
#area-fair p {
  width: 610px;
  margin: 50px auto 0;
  color: #056a82;
  text-align: justify;
  font-size: 20px;
  font-weight: 400;
}