@charset "UTF-8";
/* CSS Document */

#breadcrumb { padding-bottom: .8rem; }

#keyvisual { width: 100%; background: url("../img/visual_bg.gif") center top; background-size: 36px 100%; position: relative; }
#keyvisual h1 { width: min(96%,1130px); margin: 0 auto; }
#keyvisual h1 img { width: 100%; height: auto; }
#keyvisual h1 span { display: none; }
@media only screen and (max-width: 520px) and (orientation: portrait) {
  #keyvisual { background-size: 18px 100%; }
  #keyvisual h1 strong { display: none; }
  #keyvisual h1 span { display: block; }
}

#capsule-travel {}

#overview { width: min(92%,1130px); margin: 4rem auto 8rem auto; }
#overview h1 { font-size: 180%; line-height: 1.4; text-align: center; color: #036EB8; padding-bottom: .6em; }
#overview p#mainread { font-size: 115%; line-height: 2; text-align: center; padding-bottom: 2rem; }
#overview p#mainread span::before { content: "\A"; white-space: pre; }

#summary { margin: 2rem 0 5rem 0; display: flex; justify-content: space-between; }
#summary #outline, #summary #prize { width: 48%; }

#summary #outline { border-top: dotted 1px #CCC; }
#summary #outline li { padding: .6em 0; border-bottom: dotted 1px #CCC; }
#summary #outline li h2 { font-size: 115%; color: #008061; }
#summary #outline li ul.attention li { font-size: 93%; line-height: 1.4; text-indent: -1em; padding: 0 0 .2em 1em; border-bottom: none; }
#summary #outline li ul.attention li:last-child { padding-bottom: 0; }

#summary #prize { padding: 1.2rem 2rem; border: solid 3px #81CDDB; border-radius: 1rem; background: #D9F0F4; }
#summary #prize dt { font-size: 123%; line-height: 1.2; font-weight: bold; text-align: center; color: #036EB8; padding-bottom: .5em; }
#summary #prize dd { display: flex; flex-wrap: wrap; justify-content: space-between; }
#summary #prize dd div { width: 45%; padding: 1rem; background: #FFF; position: relative; }
#summary #prize dd div:nth-child(1)::before { content: ""; width: 14%; height: 3px; background: #036EB8; display: block; position: absolute; top: 50%; right: -18%; transform: translateY(-50%) rotate(45deg); }
#summary #prize dd div:nth-child(1)::after { content: ""; width: 14%; height: 3px; background: #036EB8; display: block; position: absolute; top: 50%; right: -18%; transform: translateY(-50%) rotate(-45deg); }
#summary #prize dd div h2 { font-size: 105%; line-height: 1.2; text-align: center; margin-bottom: .6em; padding: .4em 0; background: #D9F0F4; position: relative; }
#summary #prize dd div h2 strong { font-size: 93%; line-height: 1.2; text-align: center; color: #FFF; width: 4em; height: 3.8em; border-radius: 50%; background: #036EB8; display: flex; align-items: center; justify-content: center; position: absolute; top: -2.5em; }
#summary #prize dd div:nth-child(1) h2 strong { left: -1.5em; }
#summary #prize dd div:nth-child(2) h2 strong { right: -1.5em; }
#summary #prize dd div ul li { font-size: 105%; line-height: 1.2; text-align: right; padding: .4em 0 .4em 0; border-bottom: dotted 1px #CCC; position: relative; }
#summary #prize dd div ul li:last-child { padding-bottom: 0; border-bottom: none; }
#summary #prize dd div:nth-child(1) ul li { padding-left: 1.6em; }
#summary #prize dd div:nth-child(2) ul li { padding-left: 4em; }
#summary #prize dd div:nth-child(1) ul li.icon01::before { content: ""; width: 1.2em; height: 1.2em; background: url("../img/capsule_green.png") no-repeat; background-size: cover; position: absolute; left: 0; }
#summary #prize dd div:nth-child(1) ul li.icon02::before { content: ""; width: 1.2em; height: 1.2em; background: url("../img/capsule_blue.png") no-repeat; background-size: cover; position: absolute; left: 0; }
#summary #prize dd div:nth-child(1) ul li.icon03::before { content: ""; width: 1.2em; height: 1.2em; background: url("../img/capsule_yellow.png") no-repeat; background-size: cover; position: absolute; left: 0; }
#summary #prize dd div:nth-child(1) ul li.icon04::before { content: ""; width: 1.2em; height: 1.2em; background: url("../img/capsule_pink.png") no-repeat; background-size: cover; position: absolute; left: 0; }
#summary #prize dd div:nth-child(2) ul li.icon01::before { content: ""; width: 3.6em; height: 1.2em; background: url("../img/train_e5.png") no-repeat; background-size: cover; position: absolute; left: 0; }
#summary #prize dd div:nth-child(2) ul li.icon02::before { content: ""; width: 3.6em; height: 1.2em; background: url("../img/train_e6.png") no-repeat; background-size: cover; position: absolute; left: 0; }
#summary #prize dd div:nth-child(2) ul li.icon03::before { content: ""; width: 3.6em; height: 1.2em; background: url("../img/train_e7pink.png") no-repeat; background-size: cover; position: absolute; left: 0; }
#summary #prize dd div:nth-child(2) ul li.icon04::before { content: ""; width: 3.6em; height: 1.2em; background: url("../img/train_e7.png") no-repeat; background-size: cover; position: absolute; left: 0; }
#summary #prize dd div:nth-child(2) ul li.icon05::before { content: ""; width: 3.6em; height: 1.2em; background: url("../img/train_e2.png") no-repeat; background-size: cover; position: absolute; left: 0; }
#overview #summary #prize dd p { font-size: 115%; line-height: 1.2; font-weight: bold; text-align: center; color: #ED6D00; width: 100%; padding-top: .8em; }

#overview ul#steps { display: flex; align-items: stretch; justify-content: space-between; }
#overview ul#steps li { width: 30%; border: solid 3px #CCC; border-radius: 1rem; position: relative; }
#overview ul#steps li h2 { width: 20%; height: auto; position: absolute; top: 0; left: 50%; transform: translate(-50%,-45%); }
#overview ul#steps li h3 { font-size: 1.4vw; line-height: 1.4; text-align: center; height: 7em; padding: 14% 4% 4% 4%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#overview ul#steps li h3 span { font-size: 75%; line-height: 1.4; font-weight: normal; }
#overview ul#steps li div { padding: 4% 5%; position: relative; }
#overview ul#steps li::after { content: ""; width: 0; height: 0; border-style: solid; border-width: 2vw 2vw; border-color: transparent transparent transparent #CCC; position: absolute; top: 50%; right: -5.3vw; transform: translateY(-50%); }
#overview ul#steps li:last-child::after { border: none; }
#overview ul#steps li:first-child div { background: #F4E5C9; }
#overview ul#steps li:nth-child(2) div { background: #CFE2F1; }
#overview ul#steps li:last-child div { background: #D4E6DF; }
#overview ul#steps li div strong { width: 45%; position: absolute; top: -3%; right: 4%; transform: rotate(-8deg); }
#overview ul#steps li ul { padding: 4%; display: block; }
#overview ul#steps li ul li { line-height: 1.4;text-align: justify; text-indent: -1em; width: 100%; padding: 0 0 .2em 1em; border: none; }
#overview ul#steps li ul li::after { border: none; }
#overview ul#steps li:first-child ul li span { color: #FB7; }
#overview ul#steps li:nth-child(2) ul li span { color: #69F; }
#overview ul#steps li:last-child ul li span { color: #6C9; }
#overview ul#steps li ul li ul.attention { padding: .5em 0 0 0; }
@media only screen and (max-width: 750px) and (orientation: portrait) {
  #overview { margin: 3rem auto 6rem auto; }
  #overview h1 span::before { content: "\A"; white-space: pre; }
  #overview p#mainread { font-size: 100%; line-height: 1.6; text-align: justify; padding-bottom: 2em; }
  #overview p#mainread span::before { content: ""; }
  #summary { margin: 0 0 4rem 0; flex-direction: column; }
  #summary #outline { width: 100%; margin-bottom: 2rem; }
  #summary #prize { width: 100%; }
  #overview ul#steps { flex-direction: column; }
  #overview ul#steps li { width: 100%; margin-bottom: 10%; }
  #overview ul#steps li:last-child { margin-bottom: 0; }
  #overview ul#steps li h2 { width: 18%; top: 1%; left: -4%; transform: translate(0,0); }
  #overview ul#steps li h3 { font-size: 4.5vw; line-height: 1.4; text-align: justify; height: auto; align-items: flex-start; padding: 4% 4% 4% 18%; }
  #overview ul#steps li::after { border-width: 6vw 6vw; border-color: #CCC transparent transparent transparent; position: absolute; top: auto; right: auto; bottom: -14vw; left: 50%; transform: translate(-50%,0); }
  #overview ul#steps li ul li { margin-bottom: 0; }
}
@media only screen and (max-width: 520px) and (orientation: portrait) {
  #summary #prize dd { flex-direction: column; }
  #summary #prize dd div { width: 100%; }
  #summary #prize dd div:nth-child(1) { margin-bottom: 10%; }
  #summary #prize dd div:nth-child(1)::before { content: ""; width: 10%; height: 3px; background: #036EB8; display: block; position: absolute; top: auto; right: auto; bottom: -10.5%; left: 50%; transform: translate(0%,-50%) rotate(45deg); }
  #summary #prize dd div:nth-child(1)::after { content: ""; width: 10%; height: 3px; background: #036EB8; display: block; position: absolute; top: auto; right: auto; bottom: -10.5%; left: 50%; transform: translate(0%,-50%) rotate(-45deg); }
  #summary #prize dd div h2 strong { top: -.9em; }
  #summary #prize dd div:nth-child(1) h2 strong { right: -1.5em; left: auto; }
  #summary #prize dd div:nth-child(2) h2 strong { right: -1.5em; }
}
#shoplist { margin-bottom: 6rem; background: #F4E5C9; }
.inner-box { width: min(92%,1130px); margin: 0 auto; padding: 4rem 0 3rem 0; position: relative; }
#shoplist h1 { font-size: 150%; line-height: 1.2; text-align: center; color: #FFF; width: min(80%,20em); padding: .4em 0; border-radius: .4em; background: #036EB8; position: absolute; top: 0; left: 50%; transform: translate(-50%,-50%); }
#shoplist h2 { width: 240px; margin: 2rem auto; }
#shoplist h2 a { display: block; }
#shoplist h2 a:hover { opacity: .8; }
#shoplist-box { display: flex; flex-wrap: wrap; }
#shoplist-box dl { width: 30%; margin: 2% 5% 0 0; border-radius: .6em; background: #FFF; }
#shoplist-box dl:nth-of-type(3n) { margin-right: 0; }
#shoplist-box dl dt { font-size: 115%; line-height: 1.2; font-weight: bold; text-align: center; color: #FFF; padding: .4em 0; border-radius: .6em .6em 0 0; background: #6B9C95; }
#shoplist-box dl dd { padding: 1em; }
#shoplist-box dl dd ul li { line-height: 1.4; padding: .4em 0 .4em 6em; border-bottom: dotted 1px #999; position: relative; }
#shoplist-box dl dd ul li:first-child { padding-top: 0; }
#shoplist-box dl dd ul li:last-child { padding-bottom: 0; border-bottom: none; }
#shoplist-box dl dd ul li strong { position: absolute; left: 0;}
@media only screen and (max-width: 750px) and (orientation: portrait) {
  #shoplist { margin-bottom: 4rem; }
  #shoplist h1 { font-size: 135%; line-height: 1.2; }
  #shoplist-box dl { width: 100%; margin: 4% 0 0 0; }
}

#notes { width: min(92%,1130px); margin: 0 auto 6rem auto; }
#notes h1 { font-size: 150%; line-height: 1.2; text-align: center; margin-bottom: 1em; }
#notes h1 strong { position: relative; }
#notes h1 strong::before { content: ""; width: 2em; height: 1px; background: #999; display: block; position: absolute; top: 50%; left: -2.5em; transform: translateY(-50%); }
#notes h1 strong::after { content: ""; width: 2em; height: 1px; background: #999; display: block; position: absolute; top: 50%; right: -2.5em; transform: translateY(-50%); }
#notes ul li { line-height: 1.4; text-align: justify; text-indent: -1em; padding: 0 0 .3em 1em; }
#notes ul li span { color: #86B7DB; }
#notes h2 { font-size: 123%; line-height: 1.2; text-align: center; margin: 1em 0 .6em 0; padding: .4em; background: #CFE2F1; }
@media only screen and (max-width: 750px) and (orientation: portrait) {
  #notes { margin-bottom: 4rem; }
  #notes h2 span::before { content: "\A"; white-space: pre; }
}