@charset "UTF-8";
/* common
================================================== */
/*
 * media query
**/
/**
 * フォントサイズの可変
 *
 * @param {number} $fontsize 基準となるフォントサイズ
 * @param {number} $basewidth 基準となる幅
 * @param {number} $maxwidth フォントサイズの拡大をとめる幅（未指定時は上限なし）
 * @param {number} $minwidth フォントサイズの縮小をとめる幅（未指定時は下限なし）
 */
@media screen and (max-width: 767px) {
  .pc {
    display: none !important;
  }
}

@media screen and (min-width: 768px) {
  .sp {
    display: none !important;
  }
}

@media screen and (min-width: 768px) {
  .spp {
    display: none !important;
  }
}
@media screen and (max-width: 767px) {
  .spp {
    display: none !important;
  }
}
@media screen and (max-width: 374px) {
  .spp {
    display: block !important;
  }
}

html,
body {
  overscroll-behavior-y: none;
  overscroll-behavior: none;
}

.fixedBody {
  width: 100%;
}

/* header {
  text-align: center;
}
@media screen and (min-width: 768px) {
  header img {
    width: 100vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  header img {
    width: 1366px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  header img {
    width: 768px;
  }
}
@media screen and (max-width: 767px) {
  header img {
    width: 100%;
  }
} */

#main {
  font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  position: relative;
  color: #313333;
}
@media screen and (max-width: 767px) {
  #main {
    overflow: hidden;
  }
}
#main a {
  text-decoration: none;
  color: inherit;
}
#main * {
  box-sizing: border-box;
}
#main strong {
  font-weight: 700;
}
#main #mainheader {
  position: relative;
}
@media screen and (max-width: 767px) {
  #main #mainheader.fix {
    height: 10.6666666667vw;
  }
}
#main #mainheader.fix .mainheader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
#main #mainheader .mainheader-wrapper {
  z-index: 999;
  background-color: #fff;
  box-shadow: 0px 2px 2.6px 0.4px rgba(19, 0, 32, 0.1);
}
@media screen and (min-width: 768px) {
  #main #mainheader .mainheader-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
}
#main #mainheader .mainheader-wrapper .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (min-width: 768px) {
  #main #mainheader .mainheader-wrapper .container {
    height: 4.39238653vw;
    width: 68.8140556369vw;
    padding-left: 1.0980966325vw;
    padding-right: 1.0980966325vw;
    margin: 0 auto;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  #main #mainheader .mainheader-wrapper .container {
    height: 60px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #main #mainheader .mainheader-wrapper .container {
    height: 33.7335285505px;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  #main #mainheader .mainheader-wrapper .container {
    width: 940px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #main #mainheader .mainheader-wrapper .container {
    width: 528.4919472914px;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  #main #mainheader .mainheader-wrapper .container {
    padding-left: 15px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #main #mainheader .mainheader-wrapper .container {
    padding-left: 8.4333821376px;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  #main #mainheader .mainheader-wrapper .container {
    padding-right: 15px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #main #mainheader .mainheader-wrapper .container {
    padding-right: 8.4333821376px;
  }
}
@media screen and (max-width: 767px) {
  #main #mainheader .mainheader-wrapper .container {
    padding-left: 5.3333333333vw;
    padding-right: 5.3333333333vw;
    height: 10.6666666667vw;
  }
}
@media screen and (min-width: 768px) {
  #main #mainheader .mainheader-wrapper .container .mainheader-logo img {
    width: 10.3221083455vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  #main #mainheader .mainheader-wrapper .container .mainheader-logo img {
    width: 141px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #main #mainheader .mainheader-wrapper .container .mainheader-logo img {
    width: 79.2737920937px;
  }
}
@media screen and (max-width: 767px) {
  #main #mainheader .mainheader-wrapper .container .mainheader-logo img {
    width: 25.0666666667vw;
  }
}
#main #mainheader .mainheader-wrapper .container .mainheader-buy a {
  display: flex;
  align-items: center;
  justify-content: center;
}
#main #mainheader .mainheader-wrapper .container .mainheader-buy a > span {
  font-family: "Noto Sans JP", sans-serif;
  color: #ff5f00;
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  #main #mainheader .mainheader-wrapper .container .mainheader-buy a > span {
    font-size: 1.1713030747vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  #main #mainheader .mainheader-wrapper .container .mainheader-buy a > span {
    font-size: 16px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #main #mainheader .mainheader-wrapper .container .mainheader-buy a > span {
    font-size: 8.9956076135px;
  }
}
@media screen and (max-width: 767px) {
  #main #mainheader .mainheader-wrapper .container .mainheader-buy a > span {
    font-size: 3.2vw;
  }
}
@media screen and (min-width: 768px) {
  #main #mainheader .mainheader-wrapper .container .mainheader-buy a img {
    width: 1.317715959vw;
    margin-left: 0.5124450952vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  #main #mainheader .mainheader-wrapper .container .mainheader-buy a img {
    width: 18px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #main #mainheader .mainheader-wrapper .container .mainheader-buy a img {
    width: 10.1200585652px;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  #main #mainheader .mainheader-wrapper .container .mainheader-buy a img {
    margin-left: 7px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #main #mainheader .mainheader-wrapper .container .mainheader-buy a img {
    margin-left: 3.9355783309px;
  }
}
@media screen and (max-width: 767px) {
  #main #mainheader .mainheader-wrapper .container .mainheader-buy a img {
    width: 3.2vw;
    margin-left: 1.3333333333vw;
  }
}
#main #mv .mv-wrapper {
  position: relative;
}
#main #mv .mv-wrapper .mv-img img {
  width: 100%;
}
#main #mv .mv-wrapper .mv-btn {
  position: absolute;
  bottom: 0;
  left: 50%;
}
@media screen and (min-width: 768px) {
  #main #mv .mv-wrapper .mv-btn {
    margin-bottom: -2.5622254758vw;
    margin-left: -14.2386530015vw;
  }
}
@media screen and (max-width: 767px) {
  #main #mv .mv-wrapper .mv-btn {
    margin-bottom: -2.6666666667vw;
    margin-left: -38.5333333333vw;
  }
}
#main #mv .mv-wrapper .mv-btn a {
  display: block;
}
@media screen and (min-width: 768px) {
  #main #mv .mv-wrapper .mv-btn a {
    width: 28.4773060029vw;
    transition: opacity 0.2s ease-in-out;
  }
}
@media screen and (max-width: 767px) {
  #main #mv .mv-wrapper .mv-btn a {
    width: 77.0666666667vw;
  }
}
@media screen and (min-width: 768px) {
  #main #mv .mv-wrapper .mv-btn a:hover {
    opacity: 0.7;
  }
}
#main #mv .mv-wrapper .mv-btn a img {
  display: block;
  width: 100%;
}
#main #section-01 {
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(/~/Media/com/thelypo/202310/assets/bg-01.jpg);
}
@media screen and (min-width: 768px) {
  #main #section-01 {
    padding-top: 8.0527086384vw;
    padding-bottom: 7.3206442167vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  #main #section-01 {
    padding-top: 110px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #main #section-01 {
    padding-top: 61.8448023426px;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  #main #section-01 {
    padding-bottom: 100px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #main #section-01 {
    padding-bottom: 56.2225475842px;
  }
}
@media screen and (max-width: 767px) {
  #main #section-01 {
    padding-top: 12vw;
    padding-bottom: 13.3333333333vw;
    background-image: url(/~/Media/com/thelypo/202310/assets/bg-01.sp.jpg);
  }
}
#main #section-01 .container {
  position: relative;
}
#main #section-01 .container:before {
  display: block;
  position: absolute;
  content: "";
  pointer-events: none;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
@media screen and (min-width: 768px) {
  #main #section-01 .container:before {
    width: 65.8857979502vw;
    height: 56.2225475842vw;
    margin-top: -5.8565153734vw;
    background-image: url(/~/Media/com/thelypo/202310/assets/kapse.png);
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  #main #section-01 .container:before {
    width: 900px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #main #section-01 .container:before {
    width: 506.0029282577px;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  #main #section-01 .container:before {
    height: 768px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #main #section-01 .container:before {
    height: 431.7891654466px;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  #main #section-01 .container:before {
    margin-top: -80px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #main #section-01 .container:before {
    margin-top: -44.9780380673px;
  }
}
@media screen and (max-width: 767px) {
  #main #section-01 .container:before {
    width: 100%;
    height: 147.7333333333vw;
    margin-top: -18.6666666667vw;
    background-image: url(/~/Media/com/thelypo/202310/assets/kapse.sp.png);
  }
}
#main #section-01 .container h2 {
  text-align: center;
}
#main #section-01 .container h2 > span {
  display: block;
}
@media screen and (min-width: 768px) {
  #main #section-01 .container h2 > span.ttl-img img {
    width: 23.7920937042vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  #main #section-01 .container h2 > span.ttl-img img {
    width: 325px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #main #section-01 .container h2 > span.ttl-img img {
    width: 182.7232796486px;
  }
}
@media screen and (max-width: 767px) {
  #main #section-01 .container h2 > span.ttl-img img {
    width: 64.8vw;
  }
}
#main #section-01 .container .section-01-block {
  background-color: rgba(255, 255, 255, 0.75);
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 768px) {
  #main #section-01 .container .section-01-block {
    margin-top: 2.196193265vw;
    width: 57.1010248902vw;
    border-radius: 0.7320644217vw;
    padding-top: 4.0263543192vw;
    padding-bottom: 4.39238653vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  #main #section-01 .container .section-01-block {
    margin-top: 30px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #main #section-01 .container .section-01-block {
    margin-top: 16.8667642753px;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  #main #section-01 .container .section-01-block {
    width: 780px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #main #section-01 .container .section-01-block {
    width: 438.5358711567px;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  #main #section-01 .container .section-01-block {
    border-radius: 10px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #main #section-01 .container .section-01-block {
    border-radius: 5.6222547584px;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  #main #section-01 .container .section-01-block {
    padding-top: 55px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #main #section-01 .container .section-01-block {
    padding-top: 30.9224011713px;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  #main #section-01 .container .section-01-block {
    padding-bottom: 60px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #main #section-01 .container .section-01-block {
    padding-bottom: 33.7335285505px;
  }
}
@media screen and (max-width: 767px) {
  #main #section-01 .container .section-01-block {
    margin-top: 8vw;
    padding-top: 10.6666666667vw;
    padding-bottom: 10.6666666667vw;
    width: 84vw;
    border-radius: 1.3333333333vw;
  }
}
#main #section-01 .container .section-01-block p {
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.8;
  text-align: center;
  color: #222222;
  font-weight: 400;
}
@media screen and (min-width: 768px) {
  #main #section-01 .container .section-01-block p {
    font-size: 1.3909224012vw;
    margin-bottom: 0.5124450952vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  #main #section-01 .container .section-01-block p {
    font-size: 19px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #main #section-01 .container .section-01-block p {
    font-size: 10.682284041px;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  #main #section-01 .container .section-01-block p {
    margin-bottom: 7px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #main #section-01 .container .section-01-block p {
    margin-bottom: 3.9355783309px;
  }
}
@media screen and (max-width: 767px) {
  #main #section-01 .container .section-01-block p {
    font-size: 3.6vw;
    margin-bottom: 1.3333333333vw;
    line-height: 1.7;
  }
}
#main #section-01 .container .section-01-block .block-panel {
  background-color: rgba(255, 248, 139, 0.9);
  margin-left: auto;
  margin-right: auto;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
}
@media screen and (min-width: 768px) {
  #main #section-01 .container .section-01-block .block-panel {
    margin-top: 1.0980966325vw;
    padding-top: 2.196193265vw;
    padding-bottom: 2.196193265vw;
    border-radius: 0.7320644217vw;
    width: 28.9897510981vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  #main #section-01 .container .section-01-block .block-panel {
    margin-top: 15px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #main #section-01 .container .section-01-block .block-panel {
    margin-top: 8.4333821376px;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  #main #section-01 .container .section-01-block .block-panel {
    padding-top: 30px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #main #section-01 .container .section-01-block .block-panel {
    padding-top: 16.8667642753px;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  #main #section-01 .container .section-01-block .block-panel {
    padding-bottom: 30px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #main #section-01 .container .section-01-block .block-panel {
    padding-bottom: 16.8667642753px;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  #main #section-01 .container .section-01-block .block-panel {
    border-radius: 10px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #main #section-01 .container .section-01-block .block-panel {
    border-radius: 5.6222547584px;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  #main #section-01 .container .section-01-block .block-panel {
    width: 396px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #main #section-01 .container .section-01-block .block-panel {
    width: 222.6412884334px;
  }
}
@media screen and (max-width: 767px) {
  #main #section-01 .container .section-01-block .block-panel {
    margin-top: 4vw;
    padding-top: 6.4vw;
    padding-bottom: 6vw;
    border-radius: 1.3333333333vw;
    width: 68.5333333333vw;
  }
}
#main #section-01 .container .section-01-block .block-panel h3 {
  font-weight: 700;
  text-align: center;
}
@media screen and (min-width: 768px) {
  #main #section-01 .container .section-01-block .block-panel h3 {
    font-size: 1.3909224012vw;
    margin-bottom: 1.4641288433vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  #main #section-01 .container .section-01-block .block-panel h3 {
    font-size: 19px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #main #section-01 .container .section-01-block .block-panel h3 {
    font-size: 10.682284041px;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  #main #section-01 .container .section-01-block .block-panel h3 {
    margin-bottom: 20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #main #section-01 .container .section-01-block .block-panel h3 {
    margin-bottom: 11.2445095168px;
  }
}
@media screen and (max-width: 767px) {
  #main #section-01 .container .section-01-block .block-panel h3 {
    font-size: 3.6vw;
    margin-bottom: 3.3333333333vw;
  }
}
@media screen and (min-width: 768px) {
  #main #section-01 .container .section-01-block .block-panel ul {
    padding-left: 3.513909224vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  #main #section-01 .container .section-01-block .block-panel ul {
    padding-left: 48px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #main #section-01 .container .section-01-block .block-panel ul {
    padding-left: 26.9868228404px;
  }
}
@media screen and (max-width: 767px) {
  #main #section-01 .container .section-01-block .block-panel ul {
    padding-left: 6.4vw;
  }
}
#main #section-01 .container .section-01-block .block-panel ul li {
  position: relative;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  #main #section-01 .container .section-01-block .block-panel ul li {
    padding-left: 1.8301610542vw;
    font-size: 1.1713030747vw;
    margin-bottom: 0.5124450952vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  #main #section-01 .container .section-01-block .block-panel ul li {
    padding-left: 25px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #main #section-01 .container .section-01-block .block-panel ul li {
    padding-left: 14.055636896px;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  #main #section-01 .container .section-01-block .block-panel ul li {
    font-size: 16px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #main #section-01 .container .section-01-block .block-panel ul li {
    font-size: 8.9956076135px;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  #main #section-01 .container .section-01-block .block-panel ul li {
    margin-bottom: 7px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #main #section-01 .container .section-01-block .block-panel ul li {
    margin-bottom: 3.9355783309px;
  }
}
@media screen and (max-width: 767px) {
  #main #section-01 .container .section-01-block .block-panel ul li {
    font-size: 3.2vw;
    padding-left: 4vw;
    margin-bottom: 1.3333333333vw;
  }
}
#main #section-01 .container .section-01-block .block-panel ul li:last-child {
  margin-bottom: 0;
}
#main #section-01 .container .section-01-block .block-panel ul li:before {
  content: "";
  position: absolute;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(/~/Media/com/thelypo/202310/assets/check.png);
  top: 0;
  left: 0;
}
@media screen and (min-width: 768px) {
  #main #section-01 .container .section-01-block .block-panel ul li:before {
    width: 1.1713030747vw;
    height: 0.878477306vw;
    margin-top: 0.3660322108vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  #main #section-01 .container .section-01-block .block-panel ul li:before {
    width: 16px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #main #section-01 .container .section-01-block .block-panel ul li:before {
    width: 8.9956076135px;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  #main #section-01 .container .section-01-block .block-panel ul li:before {
    height: 12px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #main #section-01 .container .section-01-block .block-panel ul li:before {
    height: 6.7467057101px;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  #main #section-01 .container .section-01-block .block-panel ul li:before {
    margin-top: 5px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #main #section-01 .container .section-01-block .block-panel ul li:before {
    margin-top: 2.8111273792px;
  }
}
@media screen and (max-width: 767px) {
  #main #section-01 .container .section-01-block .block-panel ul li:before {
    background-image: url(/~/Media/com/thelypo/202310/assets/check.sp.png);
    width: 1.6105417277vw;
    height: 1.1713030747vw;
    margin-top: 0.439238653vw;
  }
}
@media screen and (max-width: 767px) and (min-width: 1366px) {
  #main #section-01 .container .section-01-block .block-panel ul li:before {
    width: 22px;
  }
}
@media screen and (max-width: 767px) and (max-width: 768px) {
  #main #section-01 .container .section-01-block .block-panel ul li:before {
    width: 12.3689604685px;
  }
}
@media screen and (max-width: 767px) and (min-width: 1366px) {
  #main #section-01 .container .section-01-block .block-panel ul li:before {
    height: 16px;
  }
}
@media screen and (max-width: 767px) and (max-width: 768px) {
  #main #section-01 .container .section-01-block .block-panel ul li:before {
    height: 8.9956076135px;
  }
}
@media screen and (max-width: 767px) and (min-width: 1366px) {
  #main #section-01 .container .section-01-block .block-panel ul li:before {
    margin-top: 6px;
  }
}
@media screen and (max-width: 767px) and (max-width: 768px) {
  #main #section-01 .container .section-01-block .block-panel ul li:before {
    margin-top: 3.3733528551px;
  }
}
#main #section-02 {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
@media screen and (min-width: 768px) {
  #main #section-02 {
    padding-top: 7.3206442167vw;
    padding-bottom: 7.3206442167vw;
    background-image: url(/~/Media/com/thelypo/202310/assets/bg-02.jpg);
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  #main #section-02 {
    padding-top: 100px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #main #section-02 {
    padding-top: 56.2225475842px;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  #main #section-02 {
    padding-bottom: 100px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #main #section-02 {
    padding-bottom: 56.2225475842px;
  }
}
#main #section-02 .container .section-02-img {
  text-align: center;
}
@media screen and (min-width: 768px) {
  #main #section-02 .container .section-02-img img {
    width: 39.2386530015vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  #main #section-02 .container .section-02-img img {
    width: 536px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #main #section-02 .container .section-02-img img {
    width: 301.3528550512px;
  }
}
@media screen and (max-width: 767px) {
  #main #section-02 .container .section-02-img img {
    width: 100%;
    display: block;
  }
}
#main #section-03 {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
@media screen and (min-width: 768px) {
  #main #section-03 {
    background-image: url(/~/Media/com/thelypo/202310/assets/bg-03.jpg);
    padding-top: 7.3206442167vw;
    padding-bottom: 7.3206442167vw;
  }
}
@media screen and (max-width: 767px) {
  #main #section-03 {
    padding-top: 13.3333333333vw;
    padding-bottom: 13.3333333333vw;
    background-image: url(/~/Media/com/thelypo/202310/assets/bg-03.sp.jpg);
  }
}
#main #section-03 .container .section-03-ttl h2 {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  text-align: center;
}
@media screen and (min-width: 768px) {
  #main #section-03 .container .section-03-ttl h2 {
    margin-bottom: 2.196193265vw;
    font-size: 1.6105417277vw;
  }
}
@media screen and (max-width: 767px) {
  #main #section-03 .container .section-03-ttl h2 {
    font-size: 4.5333333333vw;
    margin-bottom: 6vw;
  }
}
@media screen and (max-width: 767px) {
  #main #section-03 .container .section-03-txt {
    padding-left: 10.6666666667vw;
    padding-right: 10.6666666667vw;
    margin-bottom: 6vw;
  }
}
#main #section-03 .container .section-03-txt p {
  line-height: 1.7;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
}
@media screen and (min-width: 768px) {
  #main #section-03 .container .section-03-txt p {
    text-align: center;
    font-size: 1.1713030747vw;
  }
}
@media screen and (max-width: 767px) {
  #main #section-03 .container .section-03-txt p {
    font-size: 3.2vw;
  }
}
#main #section-03 .container .section-03-img {
  text-align: center;
}
@media screen and (min-width: 768px) {
  #main #section-03 .container .section-03-img img {
    width: 31.7715959004vw;
  }
}
@media screen and (max-width: 767px) {
  #main #section-03 .container .section-03-img img {
    width: 100%;
  }
}
#main #section-04 {
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(/~/Media/com/thelypo/202310/assets/bg-04.jpg);
}
@media screen and (max-width: 767px) {
  #main #section-04 {
    background-image: url(/~/Media/com/thelypo/202310/assets/bg-04.sp.jpg);
  }
}
@media screen and (min-width: 768px) {
  #main #section-04 .section-04-top {
    padding-top: 7.3206442167vw;
    padding-bottom: 10.980966325vw;
  }
}
@media screen and (max-width: 767px) {
  #main #section-04 .section-04-top {
    padding-top: 13.3333333333vw;
    padding-bottom: 24vw;
    padding-left: 10.6666666667vw;
    padding-right: 10.6666666667vw;
  }
}
#main #section-04 .section-04-top h3 {
  text-align: center;
  font-weight: 700;
  font-family: "Noto Sans JP", sans-serif;
  color: #222222;
}
@media screen and (min-width: 768px) {
  #main #section-04 .section-04-top h3 {
    font-size: 1.6105417277vw;
    margin-bottom: 2.0497803807vw;
  }
}
@media screen and (max-width: 767px) {
  #main #section-04 .section-04-top h3 {
    font-size: 4.5333333333vw;
    margin-bottom: 5.8666666667vw;
  }
}
#main #section-04 .section-04-top p {
  line-height: 1.7;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
}
@media screen and (min-width: 768px) {
  #main #section-04 .section-04-top p {
    text-align: center;
    font-size: 1.1713030747vw;
  }
}
@media screen and (max-width: 767px) {
  #main #section-04 .section-04-top p {
    font-size: 3.2vw;
  }
}
#main #section-04 .section-04-top .link {
  text-align: center;
}
@media screen and (min-width: 768px) {
  #main #section-04 .section-04-top .link {
    margin-top: 2.7818448023vw;
  }
}
@media screen and (max-width: 767px) {
  #main #section-04 .section-04-top .link {
    margin-top: 5.8666666667vw;
  }
}
#main #section-04 .section-04-top .link a {
  display: inline-block;
  color: #ff5f00;
  font-weight: 700;
  position: relative;
  font-family: "Noto Sans JP", sans-serif;
}
@media screen and (min-width: 768px) {
  #main #section-04 .section-04-top .link a {
    transition: opacity 0.2s ease-in-out;
    font-size: 1.1713030747vw;
  }
}
@media screen and (max-width: 767px) {
  #main #section-04 .section-04-top .link a {
    font-size: 3.2vw;
  }
}
@media screen and (min-width: 768px) {
  #main #section-04 .section-04-top .link a:hover {
    opacity: 0.7;
  }
}
#main #section-04 .section-04-top .link a:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(/~/Media/com/thelypo/202310/assets/arrow.png);
}
@media screen and (min-width: 768px) {
  #main #section-04 .section-04-top .link a:after {
    width: 0.6588579795vw;
    height: 1.0248901903vw;
    margin-top: -0.5124450952vw;
    margin-right: -1.0980966325vw;
  }
}
@media screen and (max-width: 767px) {
  #main #section-04 .section-04-top .link a:after {
    width: 1.8666666667vw;
    height: 2.6666666667vw;
    margin-top: -1.3333333333vw;
    margin-right: -3.2vw;
    background-image: url(/~/Media/com/thelypo/202310/assets/arrow.sp.png);
  }
}
#main #section-04 .section-04-top .link a:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #ff5f00;
}
@media screen and (min-width: 768px) {
  #main #section-04 .section-04-top .link a:before {
    width: 106%;
    height: 0.1098096633vw;
    margin-bottom: -0.3660322108vw;
  }
}
@media screen and (max-width: 767px) {
  #main #section-04 .section-04-top .link a:before {
    width: 106%;
    height: 0.2vw;
    margin-bottom: -0.6666666667vw;
  }
}
@media screen and (min-width: 768px) {
  #main #section-04 .section-04-mid {
    padding-bottom: 13.17715959vw;
  }
}
@media screen and (max-width: 767px) {
  #main #section-04 .section-04-mid {
    padding-bottom: 26.6666666667vw;
  }
}
#main #section-04 .section-04-mid h3 {
  text-align: center;
}
@media screen and (min-width: 768px) {
  #main #section-04 .section-04-mid h3 img {
    width: 28.0380673499vw;
  }
}
@media screen and (max-width: 767px) {
  #main #section-04 .section-04-mid h3 img {
    width: 100%;
    display: block;
  }
}
#main #section-04 .section-04-mid p {
  line-height: 1.7;
  font-weight: 400;
  font-family: "Noto Sans JP", sans-serif;
  color: #353536;
  text-align: center;
}
@media screen and (min-width: 768px) {
  #main #section-04 .section-04-mid p {
    font-size: 1.1713030747vw;
    margin-top: -1.0980966325vw;
  }
}
@media screen and (max-width: 767px) {
  #main #section-04 .section-04-mid p {
    font-size: 3.2vw;
  }
}
#main #section-04 .section-04-mid .img {
  text-align: center;
}
@media screen and (min-width: 768px) {
  #main #section-04 .section-04-mid .img {
    margin-top: 2.196193265vw;
  }
}
@media screen and (min-width: 768px) {
  #main #section-04 .section-04-mid .img img {
    width: 17.0571010249vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  #main #section-04 .section-04-mid .img img {
    width: 233px;
  }
}
@media screen and (min-width: 768px) and (max-width: 768px) {
  #main #section-04 .section-04-mid .img img {
    width: 130.9985358712px;
  }
}
#main #section-04 .section-04-mid .txt {
  text-align: center;
}
@media screen and (min-width: 768px) {
  #main #section-04 .section-04-mid .txt {
    margin-top: 1.4641288433vw;
  }
}
@media screen and (max-width: 767px) {
  #main #section-04 .section-04-mid .txt {
    margin-top: 9.3333333333vw;
  }
}
@media screen and (min-width: 768px) {
  #main #section-04 .section-04-mid .txt img {
    width: 44.2166910688vw;
  }
}
@media screen and (max-width: 767px) {
  #main #section-04 .section-04-mid .txt img {
    display: block;
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  #main #section-04 .section-04-bottom {
    padding-bottom: 7.1010248902vw;
  }
}
@media screen and (max-width: 767px) {
  #main #section-04 .section-04-bottom {
    padding-bottom: 12vw;
  }
}
#main #section-04 .section-04-bottom h3 {
  text-align: center;
  color: #353536;
  font-weight: 400;
  font-family: "游明朝", "Yu Mincho", "YuMincho", serif;
}
@media screen and (min-width: 768px) {
  #main #section-04 .section-04-bottom h3 {
    font-size: 2.3426061493vw;
    margin-bottom: 2.9282576867vw;
  }
}
@media screen and (max-width: 767px) {
  #main #section-04 .section-04-bottom h3 {
    font-size: 6.4vw;
    margin-bottom: 6.6666666667vw;
  }
}
#main #section-04 .section-04-bottom .section-04-bottom-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 768px) {
  #main #section-04 .section-04-bottom .section-04-bottom-flex {
    margin-bottom: 1.4641288433vw;
  }
}
@media screen and (max-width: 767px) {
  #main #section-04 .section-04-bottom .section-04-bottom-flex {
    margin-bottom: 3.3333333333vw;
  }
}
@media screen and (min-width: 768px) {
  #main #section-04 .section-04-bottom .section-04-bottom-flex .img {
    width: 16.6178623719vw;
    margin-right: 3.6603221083vw;
  }
}
@media screen and (max-width: 767px) {
  #main #section-04 .section-04-bottom .section-04-bottom-flex .img {
    width: 34.6666666667vw;
    margin-right: 3.3333333333vw;
  }
}
#main #section-04 .section-04-bottom .section-04-bottom-flex .img img {
  display: block;
  width: 100%;
}
@media screen and (min-width: 768px) {
  #main #section-04 .section-04-bottom .section-04-bottom-flex .txt {
    width: 18.3016105417vw;
  }
}
@media screen and (max-width: 767px) {
  #main #section-04 .section-04-bottom .section-04-bottom-flex .txt {
    width: 37.3333333333vw;
  }
}
#main #section-04 .section-04-bottom .section-04-bottom-flex .txt p {
  color: #ff5f00;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.8;
  text-align: center;
}
@media screen and (min-width: 768px) {
  #main #section-04 .section-04-bottom .section-04-bottom-flex .txt p {
    font-size: 1.1346998536vw;
  }
}
@media screen and (max-width: 767px) {
  #main #section-04 .section-04-bottom .section-04-bottom-flex .txt p {
    font-size: 2.6666666667vw;
  }
}
#main #section-04 .section-04-bottom .section-04-bottom-flex .txt a {
  display: block;
}
@media screen and (min-width: 768px) {
  #main #section-04 .section-04-bottom .section-04-bottom-flex .txt a {
    transition: opacity 0.2s ease-in-out;
    margin-top: 1.8301610542vw;
  }
}
@media screen and (max-width: 767px) {
  #main #section-04 .section-04-bottom .section-04-bottom-flex .txt a {
    margin-top: 5.3333333333vw;
  }
}
@media screen and (min-width: 768px) {
  #main #section-04 .section-04-bottom .section-04-bottom-flex .txt a:hover {
    opacity: 0.7;
  }
}
#main #section-04 .section-04-bottom .section-04-bottom-flex .txt a img {
  display: block;
  width: 100%;
}
@media screen and (min-width: 768px) {
  #main #section-04 .section-04-bottom .section-04-bottom-desc {
    margin-bottom: 2.5622254758vw;
  }
}
@media screen and (max-width: 767px) {
  #main #section-04 .section-04-bottom .section-04-bottom-desc {
    margin-bottom: 4.6666666667vw;
  }
}
#main #section-04 .section-04-bottom .section-04-bottom-desc p {
  color: #353536;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  text-align: center;
}
@media screen and (min-width: 768px) {
  #main #section-04 .section-04-bottom .section-04-bottom-desc p {
    font-size: 1.1713030747vw;
  }
}
@media screen and (max-width: 767px) {
  #main #section-04 .section-04-bottom .section-04-bottom-desc p {
    font-size: 2.6666666667vw;
  }
}
#main #section-04 .section-04-bottom .section-04-bottom-panel {
  background-color: rgba(255, 255, 255, 0.8);
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 768px) {
  #main #section-04 .section-04-bottom .section-04-bottom-panel {
    border-radius: 0.7320644217vw;
    width: 57.1010248902vw;
    padding-top: 2.5622254758vw;
    padding-bottom: 2.5622254758vw;
  }
}
@media screen and (max-width: 767px) {
  #main #section-04 .section-04-bottom .section-04-bottom-panel {
    border-radius: 1.3333333333vw;
    width: 89.3333333333vw;
    padding-top: 6.6666666667vw;
    padding-bottom: 6.6666666667vw;
  }
}
#main #section-04 .section-04-bottom .section-04-bottom-panel > div {
  font-family: "Noto Sans JP", sans-serif;
  text-align: center;
}
@media screen and (min-width: 768px) {
  #main #section-04 .section-04-bottom .section-04-bottom-panel > div dl {
    margin-bottom: 1.9765739385vw;
  }
}
@media screen and (max-width: 767px) {
  #main #section-04 .section-04-bottom .section-04-bottom-panel > div dl {
    margin-bottom: 4.6666666667vw;
  }
}
#main #section-04 .section-04-bottom .section-04-bottom-panel > div dl:last-child {
  margin-bottom: 0;
}
#main #section-04 .section-04-bottom .section-04-bottom-panel > div dl dt {
  color: #ff5f00;
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  #main #section-04 .section-04-bottom .section-04-bottom-panel > div dl dt {
    font-size: 1.1713030747vw;
    margin-bottom: 1.0980966325vw;
  }
}
@media screen and (max-width: 767px) {
  #main #section-04 .section-04-bottom .section-04-bottom-panel > div dl dt {
    font-size: 3.2vw;
    margin-bottom: 1.3333333333vw;
  }
}
#main #section-04 .section-04-bottom .section-04-bottom-panel > div dl dd {
  color: #222222;
  font-weight: 400;
  line-height: 1.8;
}
@media screen and (min-width: 768px) {
  #main #section-04 .section-04-bottom .section-04-bottom-panel > div dl dd {
    font-size: 1.1713030747vw;
  }
}
@media screen and (max-width: 767px) {
  #main #section-04 .section-04-bottom .section-04-bottom-panel > div dl dd {
    font-size: 3.2vw;
  }
}
@media screen and (min-width: 768px) {
  #main #section-04 .section-04-bottom .section-04-bottom-panel > div dl dd p > span {
    font-size: 0.9516837482vw;
  }
}
@media screen and (max-width: 767px) {
  #main #section-04 .section-04-bottom .section-04-bottom-panel > div dl dd p > span {
    font-size: 2.6666666667vw;
    transform: scale(0.9);
  }
}
#main #section-04 .section-04-bottom .section-04-bottom-panel > div dl dd .note {
  display: block;
  color: #5b5b5d;
}
@media screen and (min-width: 768px) {
  #main #section-04 .section-04-bottom .section-04-bottom-panel > div dl dd .note {
    font-size: 0.7320644217vw;
    margin-top: 0.3660322108vw;
  }
}
@media screen and (max-width: 767px) {
  #main #section-04 .section-04-bottom .section-04-bottom-panel > div dl dd .note {
    font-size: 2.6666666667vw;
    transform: scale(0.7);
    width: 200%;
    margin-left: -50%;
  }
}
#main #section-04 .section-04-bottom .section-04-bottom-panel a {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 768px) {
  #main #section-04 .section-04-bottom .section-04-bottom-panel a {
    transition: opacity 0.2s ease-in-out;
    margin-top: 1.8301610542vw;
    width: 28.4773060029vw;
  }
}
@media screen and (max-width: 767px) {
  #main #section-04 .section-04-bottom .section-04-bottom-panel a {
    margin-top: 5.3333333333vw;
    width: 74.6666666667vw;
  }
}
@media screen and (min-width: 768px) {
  #main #section-04 .section-04-bottom .section-04-bottom-panel a:hover {
    opacity: 0.7;
  }
}
#main #section-04 .section-04-bottom .section-04-bottom-panel a img {
  width: 100%;
  display: block;
}