@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://cdn.jsdelivr.net/npm/@noonnu/one-mobile-title@0.1.0/index.min.css");
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Nanum+Myeongjo&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Jua&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Gowun+Batang&display=swap");
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, etails, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, button, hr {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  font-family: inherit; }

main, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, hr {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

body {
  min-width: 360px;
  width: 100%;
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  color: #000;
  line-height: 1;
  font-weight: 400;
  box-sizing: border-box;
  word-break: keep-all; }
  body *,
  body *::before,
  body *::after {
    box-sizing: border-box; }

input, select, textarea {
  font-family: inherit;
  outline: none;
  resize: none; }

a, button {
  color: #000;
  cursor: pointer;
  border: 0;
  padding: 0;
  outline: none;
  text-decoration: none;
  background: none; }
  a:hover, button:hover {
    color: #000; }

.container {
  display: block;
  width: 100%;
  padding: 0 40px;
  margin: 0 auto; }
  @media (max-width: 1024px) {
    .container {
      padding: 0 20px; } }

.container-fluid {
  display: block;
  width: 100%;
  padding: 0 40px; }
  @media (max-width: 1024px) {
    .container-fluid {
      padding: 0 20px; } }

.visible-lg {
  display: block; }
  @media (max-width: 1024px) {
    .visible-lg {
      display: none; } }

.visible-sm {
  display: none; }
  @media (max-width: 1024px) {
    .visible-sm {
      display: block; } }

@font-face {
  font-family: 'KyoboHandwriting2019';
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@1.0/KyoboHand.woff") format("woff");
  font-weight: normal;
  font-display: swap; }
/* sub common */
body {
  padding-top: 149px; }
  @media (max-width: 1024px) {
    body {
      padding-top: 63px; } }

main {
  text-align: justify;
  word-break: break-all;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6; }
  main .container {
    max-width: 1230px;
    padding: 0 15px; }
  @media (max-width: 1024px) {
    main {
      font-size: 16px; } }

/* page-header */
.page-header {
  line-height: 1.6;
  text-align: center;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover; }
  .page-header .container {
    display: table;
    max-width: 1230px;
    min-height: 700px;
    height: calc(100vh - 149px);
    table-layout: fixed;
    padding: 100px 15px; }
    .page-header .container .v-align {
      position: relative;
      display: table-cell;
      vertical-align: middle; }
      .page-header .container .v-align small {
        display: inline-block;
        font-size: 20px;
        line-height: 48px;
        font-weight: bold;
        padding: 0 20px;
        border-radius: 100px;
        border: 1px solid #000;
        margin-bottom: 60px;
        text-shadow: 0px 0px 10px #333; }
      .page-header .container .v-align h3 {
        font-size: 50px;
        font-weight: 900;
        text-shadow: 0px 0px 10px #333; }
      .page-header .container .v-align strong {
        display: block;
        font-size: 40px;
        font-weight: bold;
        margin-top: 20px;
        text-shadow: 0px 0px 10px #333; }
      .page-header .container .v-align p {
        font-size: 18px;
        margin-top: 30px;
        text-shadow: 0px 0px 10px #333; }
      .page-header .container .v-align span {
        display: block;
        font-weight: 400;
        font-size: 16px;
        margin-top: 30px;
        text-shadow: 0px 0px 10px #333; }
        .page-header .container .v-align span b {
          display: inline-block;
          vertical-align: top;
          font-weight: bold; }
          .page-header .container .v-align span b ~ b {
            margin-left: 30px; }
  .page-header .caption {
    position: absolute;
    bottom: 30px;
    right: 15px;
    font-size: 16px;
    color: #fff; }
  .page-header.top .container .v-align {
    vertical-align: top; }
  .page-header.bottom .container .v-align {
    vertical-align: bottom; }
  @media (max-width: 1024px) {
    .page-header .container {
      min-height: 600px;
      height: calc(100vh - 63px);
      padding: 65px 15px; }
      .page-header .container .v-align small {
        font-size: 18px;
        line-height: 38px;
        padding: 0 10px;
        margin-bottom: 40px; }
      .page-header .container .v-align h3 {
        font-size: 30px; }
      .page-header .container .v-align strong {
        font-size: 26px;
        margin-top: 15px; }
      .page-header .container .v-align p {
        font-size: 16px;
        margin-top: 20px; }
      .page-header .container .v-align span {
        font-size: 14px; }
        .page-header .container .v-align span b ~ b {
          margin-left: 20px; } }

.visible-sm {
  display: none !important; }

.visible-lg {
  display: block !important; }

@media (max-width: 1024px) {
  .visible-sm {
    display: block !important; }

  .visible-lg {
    display: none !important; } }
/* section */
section {
  padding: 100px 0; }
  section .section-header {
    padding-bottom: 60px; }
    section .section-header h3 {
      font-size: 36px;
      font-weight: bold;
      margin-bottom: 40px; }
  @media (max-width: 1024px) {
    section {
      padding: 60px 0; }
      section .section-header {
        padding-bottom: 30px; }
        section .section-header h3 {
          font-size: 26px;
          margin-bottom: 20px; } }

/* height-auto */
.height-auto {
  font-size: 0;
  display: flex !important;
  gap: 30px; }
  .height-auto .caption {
    display: block;
    text-align: right;
    font-size: 16px;
    color: #666;
    margin-top: 10px; }
  .height-auto ~ .height-auto {
    margin-top: 30px; }
  @media (max-width: 1024px) {
    .height-auto {
      flex-direction: column !important; }
      .height-auto > figure {
        width: 100% !important; }
      .height-auto .caption {
        font-size: 14px;
        margin-top: 5px; } }

/* footer */
#footer {
  border-top: 1px solid #ccc;
  background-color: rgba(0, 0, 0, 0.1); }

.page-header.topik-header .container {
  text-align: left;
  max-width: 1630px;
  padding-bottom: 60px; }
  .page-header.topik-header .container .v-align {
    position: relative;
    vertical-align: bottom; }
    .page-header.topik-header .container .v-align small {
      margin-bottom: 10px; }
    .page-header.topik-header .container .v-align > div {
      position: absolute;
      bottom: 0;
      right: 0; }
.page-header.topik-header h3 {
  color: #fff; }
@media (max-width: 1024px) {
  .page-header.topik-header .container {
    text-align: center;
    padding-bottom: 65px; }
    .page-header.topik-header .container .v-align {
      vertical-align: middle; }
      .page-header.topik-header .container .v-align > div {
        position: static; } }

.dl-list dt {
  font-size: 34px;
  font-weight: bold;
  margin-bottom: 20px; }
@media (max-width: 1024px) {
  .dl-list dt {
    font-size: 24px; } }

/* topik-wrap */
.topik-wrap #header {
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1); }

/* topik */
.topik .container {
  color: #fff; }
  .topik .container .dl-list {
    margin-top: 60px;
    margin-bottom: 60px; }
    .topik .container .dl-list dt {
      color: #e684b6; }
  .topik .container .responsive-img {
    overflow-x: auto;
    padding-bottom: 5px;
    margin-bottom: 60px; }
@media (max-width: 1024px) {
  .topik .container .dl-list {
    margin: 30px 0; }
  .topik .container .responsive-img {
    margin-bottom: 30px; } }

/* topik-interview */
.topik-interview {
  padding: 100px 0;
  background-color: #e684b6; }
  .topik-interview .container .article-header {
    text-align: left;
    padding-bottom: 10px;
    border-bottom: 10px solid #fff; }
    .topik-interview .container .article-header b {
      display: block;
      font-size: 30px;
      color: #fff;
      font-weight: bold; }
  .topik-interview .container .article-content {
    padding-top: 30px; }
    .topik-interview .container .article-content > ul {
      display: table;
      table-layout: fixed;
      width: calc(100% + 30px);
      margin: 0 -15px; }
      .topik-interview .container .article-content > ul > li {
        display: table-cell;
        vertical-align: top;
        padding: 0 15px; }
        .topik-interview .container .article-content > ul > li > b {
          display: block;
          font-size: 28px;
          color: #fff78f;
          text-align: center;
          font-weight: 400;
          font-family: 'KyoboHandwriting2019'; }
        .topik-interview .container .article-content > ul > li > figure {
          margin-top: 20px; }
          .topik-interview .container .article-content > ul > li > figure img {
            display: block;
            max-width: 300px;
            margin: 0 auto; }
          .topik-interview .container .article-content > ul > li > figure figcaption {
            display: block;
            color: #fff;
            padding-top: 20px;
            border-top: 1px solid #fff; }
            .topik-interview .container .article-content > ul > li > figure figcaption span {
              display: block;
              font-size: 20px;
              font-weight: 300; }
            .topik-interview .container .article-content > ul > li > figure figcaption b {
              font-weight: bold;
              font-size: 20px; }
            .topik-interview .container .article-content > ul > li > figure figcaption p {
              margin-top: 20px; }
  @media (max-width: 1024px) {
    .topik-interview {
      padding: 60px 0; }
      .topik-interview .container .article-header {
        border-width: 4px;
        padding-bottom: 0; }
        .topik-interview .container .article-header b {
          font-size: 24px; }
      .topik-interview .container .article-content {
        padding-top: 15px; }
        .topik-interview .container .article-content > ul {
          display: block;
          width: 100%;
          margin: 0; }
          .topik-interview .container .article-content > ul > li {
            display: block;
            padding: 0; }
            .topik-interview .container .article-content > ul > li > b {
              font-size: 20px; }
            .topik-interview .container .article-content > ul > li > figure {
              margin-top: 10px; }
              .topik-interview .container .article-content > ul > li > figure figcaption {
                padding-top: 10px; }
                .topik-interview .container .article-content > ul > li > figure figcaption span {
                  font-size: 18px; }
                .topik-interview .container .article-content > ul > li > figure figcaption b {
                  font-size: 18px; }
            .topik-interview .container .article-content > ul > li ~ li {
              margin-top: 30px; } }

/* gallery-header */
.gallery-header {
  position: relative;
  overflow: hidden;
  height: calc(100vh - 150px); }
  .gallery-header .backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scale(1.6);
    -webkit-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 3s;
    transition-duration: 3s;
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover; }
    .gallery-header .backdrop img {
      display: none;
      width: 100%; }
  .gallery-header h3 {
    position: absolute;
    left: 100px;
    bottom: 100px;
    z-index: 1;
    font-size: 0; }
    .gallery-header h3 span {
      position: relative;
      left: 100%;
      opacity: 0;
      -webkit-transition-property: all;
      transition-property: all;
      -webkit-transition-duration: 0.9s;
      transition-duration: 0.9s;
      -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
      transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
      -webkit-transition-delay: 0s;
      transition-delay: 0s; }
      .gallery-header h3 span img {
        width: auto;
        height: 160px; }
  .gallery-header.show .backdrop {
    transform: scale(1); }
  .gallery-header.show h3 span {
    left: 0;
    opacity: 1; }
  @media (max-width: 1024px) {
    .gallery-header {
      height: 60vh; }
      .gallery-header h3 {
        left: 10px;
        bottom: 30px; }
        .gallery-header h3 span img {
          height: 60px; }
        .gallery-header h3 span:nth-of-type(1) {
          margin-right: 7px; }
        .gallery-header h3 span:nth-of-type(2) {
          margin-right: 7px; }
        .gallery-header h3 span:nth-of-type(3) {
          margin-right: 7px; } }

/* gallery */
.gallery img {
  max-width: 100%;
  border-radius: 10px; }
.gallery h3 {
  margin-bottom: 60px; }
  .gallery h3 img {
    display: block;
    max-width: 100%;
    border-radius: 0;
    margin: 0 auto; }
.gallery .table {
  display: table;
  width: 100%;
  margin-bottom: 60px;
  table-layout: fixed; }
  .gallery .table > div {
    display: table-cell;
    vertical-align: middle; }
  .gallery .table.type-2 .summary p {
    margin-top: 0; }
  .gallery .table.type-2 .summary strong {
    margin-top: 60px; }
.gallery .summary-bold {
  display: block;
  text-align: center;
  margin: 60px 0;
  font-size: 40px;
  letter-spacing: -1.5px;
  font-weight: bold; }
.gallery .summary {
  text-align: center;
  margin-bottom: 60px; }
  .gallery .summary strong {
    display: block;
    font-size: 40px;
    font-weight: 900; }
  .gallery .summary p {
    margin-top: 20px; }
  .gallery .summary > img {
    display: block;
    margin: 60px auto 0;
    max-width: 100%; }
  .gallery .summary ~ .summary {
    margin-top: 60px; }
    .gallery .summary ~ .summary p {
      margin-top: 0; }
    .gallery .summary ~ .summary strong {
      margin-top: 60px; }
  .gallery .summary b {
    display: block;
    font-size: 40px;
    font-weight: 900;
    margin-top: 30px;
    color: #3e594a; }
.gallery .figure {
  margin: 60px 0; }
  .gallery .figure img {
    display: block;
    max-width: 100%;
    margin: 0 auto; }
@media (max-width: 1024px) {
  .gallery .figure.space {
    margin-bottom: 30px; }
  .gallery h3 {
    padding: 0 20px;
    margin-bottom: 30px; }
  .gallery .table {
    display: block;
    margin-top: 30px;
    margin-bottom: 30px; }
    .gallery .table > div {
      display: block;
      width: 100% !important; }
      .gallery .table > div ~ div {
        margin-top: 30px; }
  .gallery .summary-bold {
    font-size: 30px;
    margin: 30px 0; }
  .gallery .summary {
    margin-bottom: 40px !important; }
    .gallery .summary strong {
      font-size: 26px; }
    .gallery .summary > img {
      margin-top: 30px; }
    .gallery .summary b {
      font-size: 26px; }
  .gallery .figure {
    margin: 30px 0 0 0; } }

/* road-header */
.page-header.road-header {
  position: relative; }
  .page-header.road-header:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    display: block;
    background-color: rgba(0, 0, 0, 0.5); }
  .page-header.road-header .container .v-align small {
    margin-bottom: 30px; }
  .page-header.road-header .container .v-align h3 {
    font-size: 40px;
    line-height: 1.4; }
  .page-header.road-header .container .v-align span {
    display: block;
    font-size: 16px;
    margin-top: 20px; }
  .page-header.road-header .container .v-align .big {
    font-size: 100px;
    line-height: 1;
    margin: 0;
    margin-bottom: 20px; }
@media (max-width: 1024px) {
  .page-header.road-header .container .v-align .big {
    font-size: 50px; }
  .page-header.road-header .container .v-align span {
    font-size: 14px; } }

/* road */
.road {
  overflow: hidden; }
  .road .caption {
    display: block;
    text-align: right;
    font-size: 16px;
    margin-top: 10px; }
  .road img {
    overflow: hidden;
    border-radius: 10px; }
  .road .dl-list {
    margin-bottom: 60px; }
    .road .dl-list dt {
      color: #e684b6; }
    .road .dl-list ~ .dl-list {
      margin-top: 60px; }
  .road .figure {
    margin-top: 60px; }
    .road .figure img {
      display: block;
      width: 100%; }
  .road .contact {
    margin-top: 20px; }
    .road .contact b {
      display: block;
      font-size: 24px;
      color: #555;
      font-weight: 400;
      font-family: ONE-Mobile-Title; }
    .road .contact p {
      margin-top: 10px;
      font-size: 18px; }
      .road .contact p span {
        display: inline-block;
        vertical-align: top;
        width: 24px;
        text-align: center;
        font-size: 15px;
        color: #fff;
        margin-top: 2px;
        margin-right: 5px;
        font-weight: bold;
        background-color: #000; }
  .road .tip ul {
    margin-top: 0; }
  .road .table {
    display: table;
    width: calc(100% + 30px);
    table-layout: fixed;
    margin: 0 -15px; }
    .road .table > div {
      display: table-cell;
      vertical-align: top;
      padding: 0 15px; }
      .road .table > div img {
        display: block;
        width: 100%; }
  @media (max-width: 1024px) {
    .road .figure {
      margin-top: 30px; }
    .road .dl-list {
      margin-bottom: 30px; }
      .road .dl-list ~ .dl-list {
        margin-top: 30px; }
    .road .table {
      display: block;
      width: 100%;
      margin: 0;
      margin-top: 30px; }
      .road .table > div {
        display: block;
        width: 100% !important;
        padding: 0; }
        .road .table > div ~ div {
          margin-top: 20px; } }

/* travel */
.travel {
  padding-top: 0;
  background-color: #e9e4d9; }
  .travel .container {
    max-width: 1030px; }
    .travel .container img {
      border-radius: 10px; }
    .travel .container .tip figure {
      position: relative; }
      .travel .container .tip figure figcaption {
        position: absolute;
        bottom: 15px;
        right: 15px;
        color: #fff; }
    .travel .container .tip > ul > li {
      font-weight: bold; }
    .travel .container .tip ~ .tip {
      margin-top: 60px; }

.tip-title {
  margin-top: 10px;
  height: 100px; }
  .tip-title strong {
    display: block;
    font-size: 24px;
    color: #666;
    font-family: ONE-Mobile-Title; }
  .tip-title p {
    position: relative;
    display: inline-block;
    margin-top: 5px;
    padding-left: 25px;
    font-weight: 700;
    vertical-align: top;
    color: #121212; }
    .tip-title p::before {
      position: absolute;
      content: 'A';
      width: 20px;
      top: 4px;
      left: 0;
      line-height: 20px;
      font-weight: 700;
      text-align: center;
      color: #fff;
      background-color: #121212; }

.tip figure {
  margin-bottom: 20px; }
  .tip figure img {
    display: block;
    width: 100%; }
.tip strong {
  display: block;
  font-size: 30px;
  color: #000;
  font-weight: bold;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 10px solid #000; }
.tip b {
  font-size: 22px;
  display: block;
  color: #888;
  margin-bottom: 10px; }
.tip em {
  font-style: normal;
  font-weight: bold; }
.tip ul {
  margin-top: 20px; }
  .tip ul li small {
    display: block;
    font-size: 24px;
    color: #555;
    font-family: ONE-Mobile-Title; }
  .tip ul li span {
    display: inline-block;
    vertical-align: top;
    width: 24px;
    text-align: center;
    font-size: 15px;
    color: #fff;
    margin-top: 2px;
    margin-right: 5px;
    font-weight: bold;
    background-color: #000; }
  .tip ul li ~ li {
    margin-top: 10px; }
@media (max-width: 1024px) {
  .tip strong {
    font-size: 26px;
    border-width: 6px; }
  .tip b {
    font-size: 20px; }
  .tip ul li {
    font-size: 15px; }
    .tip ul li span {
      font-size: 13px; } }

/* tip-list */
.tip-list {
  display: table;
  width: 100%;
  table-layout: fixed; }
  .tip-list > div {
    display: table-cell;
    vertical-align: top; }
    .tip-list > div:nth-of-type(1) {
      padding-right: 15px; }
    .tip-list > div:nth-of-type(2) {
      padding-left: 15px; }
  @media (max-width: 1024px) {
    .tip-list {
      display: block; }
      .tip-list > div {
        display: block;
        padding: 0 !important; }
        .tip-list > div ~ div {
          margin-top: 30px; } }

/* travel-header */
.page-header.travel-header {
  background-color: #e9e4d9; }
  .page-header.travel-header .container {
    min-height: auto;
    height: auto; }
    .page-header.travel-header .container small {
      text-shadow: none; }
    .page-header.travel-header .container h3 {
      text-shadow: none; }
    .page-header.travel-header .container p {
      text-shadow: none; }
    .page-header.travel-header .container span {
      text-shadow: none; }

/* voice-header */
.page-header.voice-header {
  text-align: right; }
  .page-header.voice-header .container .v-align small {
    color: #fff;
    text-shadow: none !important;
    background-color: #000; }
  .page-header.voice-header .container .v-align h3 {
    color: #000;
    text-shadow: none !important; }
  .page-header.voice-header .container .v-align strong {
    color: #000;
    text-shadow: none !important; }
  .page-header.voice-header .container .v-align p {
    color: #000;
    text-shadow: none !important; }
  .page-header.voice-header .container .v-align span {
    color: #000;
    text-shadow: none !important; }
@media (max-width: 1024px) {
  .page-header.voice-header {
    text-align: center;
    background-position: 82% 50%; } }

.voice .container > figure {
  margin-top: 60px; }
  .voice .container > figure img {
    width: 100%; }
.voice .container .dl-list {
  margin-top: 60px; }
.voice .container .height-auto {
  margin-top: 60px; }
  .voice .container .height-auto figure {
    position: relative; }
    .voice .container .height-auto figure figcaption {
      position: absolute;
      bottom: 10px;
      right: 10px;
      color: #fff;
      font-weight: 400;
      font-size: 16px; }
@media (max-width: 1024px) {
  .voice .container > figure {
    margin-top: 30px; }
  .voice .container .dl-list {
    margin-top: 30px; }
  .voice .container .height-auto {
    margin-top: 30px; } }

/* kit-header */
.page-header.kit-header {
  text-align: right;
  background-position: 100% 50%; }
  .page-header.kit-header .container {
    padding-bottom: 60px; }
    .page-header.kit-header .container .v-align {
      vertical-align: bottom; }
      .page-header.kit-header .container .v-align small {
        text-shadow: none;
        border-color: #000;
        background-color: #000; }
      .page-header.kit-header .container .v-align h3 {
        color: #000;
        line-height: 1.2;
        text-shadow: none; }
      .page-header.kit-header .container .v-align strong {
        font-size: 60px;
        font-weight: 400;
        color: #000;
        text-shadow: none; }
      .page-header.kit-header .container .v-align p {
        color: #000;
        text-shadow: none; }
      .page-header.kit-header .container .v-align span {
        color: #000;
        text-shadow: none; }
  @media (max-width: 1024px) {
    .page-header.kit-header {
      background-position: 30% 100%; }
      .page-header.kit-header .container .v-align {
        vertical-align: bottom; } }

/* kit */
.kit {
  padding-bottom: 140px;
  background-color: #fffcdb; }
  .kit .container {
    max-width: 1000px; }
    .kit .container figure img {
      display: block;
      max-width: 200px;
      margin: 0 auto; }
    .kit .container .kit-list > li .box {
      display: table;
      width: 100%;
      table-layout: fixed; }
      .kit .container .kit-list > li .box > div {
        display: table-cell;
        vertical-align: middle; }
        .kit .container .kit-list > li .box > div.details .title-area div small {
          display: inline-block;
          vertical-align: top;
          font-size: 18px;
          font-weight: 400;
          color: #fff;
          line-height: 1.6;
          padding: 0 5px;
          background-color: #ee7d5c; }
        .kit .container .kit-list > li .box > div.details .title-area div b {
          display: block;
          font-size: 40px;
          font-family: "Jua", sans-serif;
          line-height: 1;
          font-weight: 400;
          margin-top: 20px; }
        .kit .container .kit-list > li .box > div.details p {
          font-size: 18px;
          color: #333;
          margin-top: 20px; }
        .kit .container .kit-list > li .box > div.item-img {
          width: 300px; }
    .kit .container .kit-list > li ~ li {
      margin-top: 100px; }
  @media (max-width: 1024px) {
    .kit {
      padding-bottom: 90px; }
      .kit .container figure img {
        max-width: 100%; }
      .kit .container .kit-list > li .box {
        display: flex;
        flex-direction: column; }
        .kit .container .kit-list > li .box > div {
          display: block;
          width: 100% !important; }
          .kit .container .kit-list > li .box > div.details {
            margin-top: 30px; }
            .kit .container .kit-list > li .box > div.details .title-area {
              margin: 0 auto; }
            .kit .container .kit-list > li .box > div.details p {
              font-size: 16px;
              margin-top: 15px; }
      .kit .container .kit-list > li:nth-of-type(odd) .box {
        flex-direction: column-reverse; }
      .kit .container .kit-list > li ~ li {
        margin-top: 60px; } }

.kit-summary {
  padding-bottom: 60px;
  background-color: #fffcdb; }
  .kit-summary .container {
    background-color: #fff; }
  .kit-summary .summary-top {
    text-align: center;
    padding-bottom: 30px; }
    .kit-summary .summary-top h4 {
      position: relative;
      transform: rotate(-5deg);
      display: inline-block;
      font-size: 24px;
      color: #eb6682;
      font-weight: 500;
      padding: 0 20px;
      line-height: 60px;
      background-color: #fbdfdd; }
  .kit-summary ol {
    display: table;
    width: calc(100% + 30px);
    margin: 0 -15px;
    padding: 40px; }
    .kit-summary ol > li {
      display: table-cell;
      vertical-align: top;
      padding: 0 15px; }
      .kit-summary ol > li > dl > dt {
        font-size: 22px;
        color: #0a9c62;
        font-weight: 500;
        font-family: "Jua", sans-serif; }
      .kit-summary ol > li > dl dd {
        margin-top: 15px; }
  @media (max-width: 1024px) {
    .kit-summary .summary-top {
      padding-bottom: 20px; }
      .kit-summary .summary-top h4 {
        font-size: 18px;
        padding: 0 15px;
        line-height: 40px; }
    .kit-summary ol {
      display: block;
      width: 100%;
      margin: 0; }
      .kit-summary ol > li {
        display: block;
        width: 100% !important; }
        .kit-summary ol > li > dl > dt {
          font-size: 18px; }
        .kit-summary ol > li > dl > dd {
          margin-top: 0; }
        .kit-summary ol > li ~ li {
          margin-top: 20px; } }

/* taste-header */
.page-header.taste-header {
  background-position: 50% 0;
  background-color: #eef6ee; }
  .page-header.taste-header .container {
    height: auto;
    min-height: auto; }
    .page-header.taste-header .container .v-align small {
      color: #fff;
      text-shadow: none;
      border-color: #327c3b;
      background-color: #327c3b; }
    .page-header.taste-header .container .v-align h3 {
      color: #327c3b;
      text-shadow: none; }
    .page-header.taste-header .container .v-align p {
      color: #327c3b;
      text-shadow: none; }
    .page-header.taste-header .container .v-align span {
      color: #327c3b;
      text-shadow: none; }

.item-list {
  display: table;
  height: 100%;
  table-layout: fixed; }
  .item-list img {
    width: 100%; }
  .item-list > div {
    display: table-cell;
    vertical-align: top;
    height: 100%; }
    .item-list > div dt {
      font-size: 34px;
      font-weight: bold; }
      .item-list > div dt small {
        display: block;
        font-size: 24px;
        line-height: 1;
        font-weight: bold; }
    .item-list > div dd {
      margin-top: 20px; }
    .item-list > div > div {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: 10px;
      background-repeat: no-repeat;
      background-position: 50% 50%;
      background-size: cover; }
      .item-list > div > div img {
        display: none; }
    .item-list > div.col-7 {
      width: 70%; }
    .item-list > div.col-6 {
      width: 60%; }
    .item-list > div.col-3 {
      width: 30%; }
    .item-list > div.col-4 {
      width: 40%; }
    .item-list > div.col-8 {
      width: 80%; }
    .item-list > div.col-2 {
      width: 20%; }
    .item-list > div:first-child {
      padding-right: 15px; }
    .item-list > div:last-child {
      padding-left: 15px; }
  .item-list.type-2 > div {
    vertical-align: middle; }
    .item-list.type-2 > div > div {
      border-radius: 0;
      background-size: 100% auto; }
      .item-list.type-2 > div > div img {
        display: block; }
  .item-list.type-2 ~ .type-2 {
    margin-top: 100px; }
    @media (max-width: 1024px) {
      .item-list.type-2 ~ .type-2 {
        margin-top: 30px; } }
  .item-list ~ .item-list {
    margin-top: 60px; }
  @media (max-width: 1024px) {
    .item-list {
      display: block;
      height: auto; }
      .item-list > div {
        display: block;
        width: 100% !important;
        padding: 0 !important; }
        .item-list > div dt {
          font-size: 24px; }
        .item-list > div > div {
          display: none; }
      .item-list ~ .item-list {
        margin-top: 30px; } }

/* taste */
.taste {
  background-color: #eef6ee; }
  .taste .container .item-list dt {
    font-family: ONE-Mobile-Title;
    color: #327c3b;
    font-weight: bold;
    font-size: 70px; }
    .taste .container .item-list dt small {
      font-family: "Noto Sans", sans-serif; }
  .taste .container .item-list dd {
    font-weight: 400;
    color: #327c3b; }
  .taste .container .item-list:nth-of-type(2n + 1) .col-7 {
    padding-right: 60px;
    border-right: 1px solid #327c3b; }
  .taste .container .item-list:nth-of-type(2n + 2) .col-7 {
    padding-left: 60px;
    border-left: 1px solid #327c3b; }
  @media (max-width: 1024px) {
    .taste .container .item-list dl {
      margin-top: 30px; }
    .taste .container .item-list dt {
      font-size: 40px; }
    .taste .container .item-list .col-7 {
      border: 0 !important; } }

/* page-move */
.page-move {
  padding-bottom: 100px; }
  .page-move .container {
    padding-top: 30px !important;
    border-top: 1px solid #333;
    font-size: 0; }
    .page-move .container > a {
      display: inline-block;
      font-size: 18px;
      vertical-align: top; }
    .page-move .container span {
      display: inline-block;
      font-size: 16px;
      vertical-align: top;
      margin: 0 10px; }
  @media (max-width: 1024px) {
    .page-move {
      padding-bottom: 60px; }
      .page-move .container {
        overflow: hidden;
        padding-top: 15px !important; }
        .page-move .container span {
          display: none; }
        .page-move .container > a:first-child {
          float: left; }
        .page-move .container > a:last-child {
          float: right; } }

#goto-link01, #goto-link02, #goto-link03, #goto-link04, #goto-link05, #goto-link06, #goto-link07, #goto-link08, #goto-link09, #goto-link10 {
  position: absolute;
  display: block;
  left: 0;
  top: -20vh; }

/* list-33 */
.list-33 {
  text-align: center;
  width: calc(100% + 40px);
  font-size: 0;
  margin: 0 -20px; }
  .list-33 > li {
    display: inline-block;
    vertical-align: top;
    width: 33.33333%;
    padding: 0 20px; }
    .list-33 > li .item-img img {
      display: block;
      margin: 0 auto; }
    .list-33 > li .details {
      padding-top: 10px; }
      .list-33 > li .details b {
        display: block;
        font-size: 34px;
        color: #fff;
        line-height: 1;
        font-weight: bold; }
        .list-33 > li .details b small {
          font-size: 16px;
          font-weight: 300; }
      .list-33 > li .details p {
        font-size: 16px;
        color: #fff;
        font-weight: 400;
        margin-top: 10px; }
    .list-33 > li:nth-of-type(3) ~ li {
      margin-top: 60px; }
  @media (max-width: 1024px) {
    .list-33 {
      width: 100%;
      margin: 0; }
      .list-33 > li {
        width: 50%;
        padding: 0; }
        .list-33 > li .details b {
          font-size: 26px; }
        .list-33 > li:nth-of-type(2n + 1) {
          padding-right: 15px; }
        .list-33 > li:nth-of-type(2n + 2) {
          padding-left: 15px; }
        .list-33 > li:nth-of-type(2) ~ li {
          margin-top: 30px; } }

/* article-list */
.article-list {
  display: table;
  width: 100%;
  table-layout: fixed;
  padding: 60px 0;
  border-top: 1px solid #fff; }
  .article-list .summary {
    position: relative;
    display: table-cell;
    vertical-align: top;
    height: 100%;
    padding: 0; }
    .article-list .summary img {
      position: absolute;
      bottom: -60px;
      right: 20px; }
      .article-list .summary img.new {
        width: 150px; }
      .article-list .summary img.tech {
        width: 100px;
        bottom: -40px; }
    .article-list .summary .article-content ul {
      position: relative;
      z-index: 1; }
      .article-list .summary .article-content ul > li b {
        display: block;
        font-size: 28px;
        color: #fff;
        font-weight: bold; }
        .article-list .summary .article-content ul > li b small {
          font-size: 14px; }
      .article-list .summary .article-content ul > li p {
        font-weight: 500;
        line-height: 1.6; }
        .article-list .summary .article-content ul > li p span {
          font-weight: 400; }
      .article-list .summary .article-content ul > li ~ li {
        margin-top: 30px; }
    .article-list .summary:first-child {
      padding-right: 30px;
      border-right: 1px solid #fff; }
    .article-list .summary:last-child {
      padding-left: 30px; }
  @media (max-width: 1024px) {
    .article-list {
      display: block;
      padding: 0; }
      .article-list .summary {
        display: block;
        padding: 30px 0;
        border-right: 0 !important; }
        .article-list .summary img {
          right: 0 !important;
          bottom: 0 !important; }
        .article-list .summary .article-content > ul > li b {
          font-size: 22px; }
          .article-list .summary .article-content > ul > li b small {
            font-size: 12px; }
        .article-list .summary .article-content > ul > li p {
          font-size: 16px; }
        .article-list .summary .article-content > ul > li ~ li {
          margin-top: 20px; }
        .article-list .summary ~ .summary {
          border-top: 1px solid #fff; } }

/* opinion-header */
.opinion-header .container .v-align small {
  color: #000;
  text-shadow: none;
  border-color: #fff;
  background-color: #fff; }
.opinion-header .container .v-align h3 {
  color: #fff; }
.opinion-header .container .v-align strong {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  text-shadow: none; }
.opinion-header .container .v-align span {
  color: #fff; }
.opinion-header .container .v-align p {
  color: #fff; }
@media (max-width: 1024px) {
  .opinion-header {
    position: relative; }
    .opinion-header:before {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      content: '';
      background-color: rgba(0, 0, 0, 0.4); }
    .opinion-header .container {
      position: relative;
      z-index: 1; } }

/* opinion */
.opinion .dl-list dt {
  color: #033692; }
.opinion .dl-list ~ .dl-list {
  margin-top: 60px; }
@media (max-width: 1024px) {
  .opinion .dl-list ~ .dl-list {
    margin-top: 30px; } }

/* with-header */
.with-header {
  text-align: right; }
  .with-header .container .v-align small {
    color: #fff;
    border-color: #000;
    background-color: #000;
    text-shadow: none; }
  .with-header .container .v-align h3 {
    color: #000;
    text-shadow: none; }
  .with-header .container .v-align strong {
    color: #000;
    text-shadow: none; }
  .with-header .container .v-align p {
    color: #000;
    text-shadow: none; }
  .with-header .container .v-align span {
    color: #000;
    text-shadow: none; }
  @media (max-width: 1024px) {
    .with-header {
      position: relative;
      background-position: 64% 50%; }
      .with-header:before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        content: '';
        background-color: rgba(0, 0, 0, 0.4); }
      .with-header .container {
        position: relative;
        z-index: 1; }
        .with-header .container .v-align {
          vertical-align: bottom; } }

.with-wrap img {
  display: block;
  max-width: 100%;
  margin: 0 auto; }
.with-wrap figure figcaption {
  text-align: right;
  margin-top: 5px;
  font-size: 16px; }
.with-wrap .dl-list {
  margin-top: 60px; }
.with-wrap .table {
  display: table;
  width: 100%;
  height: 100%;
  table-layout: fixed;
  margin-top: 60px; }
  .with-wrap .table > div {
    display: table-cell;
    height: 100%;
    vertical-align: top;
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: 50% 50%; }
    .with-wrap .table > div.details {
      width: 60%;
      padding-left: 30px; }
.with-wrap .qna-list {
  margin: 60px 0; }
  .with-wrap .qna-list > li b {
    position: relative;
    display: block;
    font-size: 20px;
    line-height: 1.6;
    padding-left: 40px; }
    .with-wrap .qna-list > li b img {
      position: absolute;
      top: 0;
      left: 0;
      max-width: 30px;
      display: block; }
  .with-wrap .qna-list > li p {
    margin-top: 20px; }
  .with-wrap .qna-list > li ~ li {
    margin-top: 30px; }
@media (max-width: 1024px) {
  .with-wrap .dl-list {
    margin-top: 30px; }
  .with-wrap figure ~ figure {
    margin: 30px 0; }
  .with-wrap .table {
    display: block;
    height: auto;
    margin-top: 30px; }
    .with-wrap .table > div {
      display: block;
      width: 100% !important;
      padding: 0 !important; }
      .with-wrap .table > div ~ div {
        margin-top: 30px; }
  .with-wrap .qna-list {
    margin: 30px 0; }
    .with-wrap .qna-list > li b {
      font-size: 18px;
      padding-left: 40px; }
      .with-wrap .qna-list > li b img {
        width: 30px; }
    .with-wrap .qna-list > li p {
      margin-top: 10px; }
    .with-wrap .qna-list > li ~ li {
      margin-top: 20px; } }

/* sutarbucks */
.sutarbucks .dl-list {
  margin-top: 60px; }
.sutarbucks .person-list {
  margin-top: 60px; }
.sutarbucks .last-section {
  margin-top: 60px; }
@media (max-width: 1024px) {
  .sutarbucks .dl-list {
    margin-top: 30px; }
  .sutarbucks .person-list {
    margin-top: 30px; }
  .sutarbucks .last-section {
    margin-top: 30px; } }

.tech-header .container .v-align h3 img {
  display: block;
  max-width: 100%;
  margin: 10px auto 0; }
@media (max-width: 1024px) {
  .tech-header .container .v-align h3 img {
    width: 200px; } }

.tech {
  background-color: #203e6c; }
  .tech img {
    display: block;
    width: 100%; }
  .tech .dl-list {
    color: #e2a8b8; }
  .tech .white-box {
    padding: 60px 30px;
    background-color: #fff; }
    .tech .white-box .dl-list dt {
      color: #233b69; }
    .tech .white-box .dl-list dd {
      color: #000; }
    .tech .white-box .img-series {
      margin-top: 60px; }
      .tech .white-box .img-series b {
        display: block;
        font-size: 20px;
        color: #233b69;
        font-weight: 600;
        margin-bottom: 30px; }
      .tech .white-box .img-series figure img {
        display: block;
        max-width: 100%;
        margin: 0 auto; }
  .tech .attention {
    position: relative;
    display: block;
    font-size: 16px;
    color: #666;
    font-weight: 400;
    margin: 30px 0;
    padding-left: 15px; }
    .tech .attention:before {
      position: absolute;
      top: 0;
      left: 0;
      content: '*'; }
  .tech .process-list {
    padding: 60px 30px; }
    .tech .process-list .dl-list dt {
      padding-bottom: 20px;
      border-bottom: 1px solid #e2a8b8; }
    .tech .process-list .dl-list dd {
      position: relative;
      margin-top: 60px; }
      .tech .process-list .dl-list dd:before {
        position: absolute;
        top: 50%;
        left: 0;
        display: block;
        width: 100%;
        height: 5px;
        content: '';
        background-color: #e2a8b8;
        transform: translateY(-50%); }
      .tech .process-list .dl-list dd > ol {
        display: table;
        width: 100%;
        table-layout: fixed; }
        .tech .process-list .dl-list dd > ol > li {
          position: relative;
          display: table-cell;
          vertical-align: middle; }
          .tech .process-list .dl-list dd > ol > li:before {
            position: absolute;
            top: 50%;
            left: 0;
            width: 16px;
            height: 16px;
            content: '';
            border-radius: 50%;
            border: 3px solid #e2a8b8;
            background-color: #fff;
            transform: translateY(-50%); }
          .tech .process-list .dl-list dd > ol > li .details {
            display: flex;
            flex-direction: column; }
            .tech .process-list .dl-list dd > ol > li .details b {
              display: block;
              font-size: 36px;
              font-weight: bold;
              line-height: 56px;
              text-align: center; }
            .tech .process-list .dl-list dd > ol > li .details .dott {
              line-height: 28px; }
          .tech .process-list .dl-list dd > ol > li:nth-of-type(odd) .details {
            flex-direction: column-reverse; }
            .tech .process-list .dl-list dd > ol > li:nth-of-type(odd) .details b {
              margin-top: 60px; }
          .tech .process-list .dl-list dd > ol > li:nth-of-type(even) .details b {
            margin-bottom: 60px; }
  .tech .summary-list {
    overflow: hidden;
    padding: 60px 30px; }
    .tech .summary-list .dl-list dd > div {
      position: relative; }
      .tech .summary-list .dl-list dd > div .list-top {
        position: absolute;
        top: -20px;
        left: 0;
        z-index: 1; }
        .tech .summary-list .dl-list dd > div .list-top b {
          display: inline-block;
          font-size: 22px;
          line-height: 40px;
          padding: 0 20px;
          color: #203e6c;
          background-color: #e2a8b8; }
      .tech .summary-list .dl-list dd > div > ol {
        position: relative;
        overflow: hidden;
        width: calc(100% + 30px);
        font-size: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 60px 0;
        padding: 30px 0;
        margin: 0 -15px; }
        .tech .summary-list .dl-list dd > div > ol:before {
          position: absolute;
          top: 0;
          left: 15px;
          width: calc(100% - 30px);
          height: 1px;
          content: '';
          background-color: #e2a8b8; }
        .tech .summary-list .dl-list dd > div > ol > li {
          padding: 0 15px; }
          .tech .summary-list .dl-list dd > div > ol > li figure {
            margin-bottom: 20px; }
            .tech .summary-list .dl-list dd > div > ol > li figure img {
              max-width: 100%; }
          .tech .summary-list .dl-list dd > div > ol > li b {
            font-size: 16px;
            font-weight: bold; }
          .tech .summary-list .dl-list dd > div > ol > li ul {
            margin-top: 10px; }
            .tech .summary-list .dl-list dd > div > ol > li ul > li {
              position: relative;
              font-size: 14px;
              line-height: 1.6;
              padding-left: 10px;
              letter-spacing: -1px; }
              .tech .summary-list .dl-list dd > div > ol > li ul > li:before {
                position: absolute;
                top: -1px;
                left: 0;
                content: '•'; }
      .tech .summary-list .dl-list dd > div.list-1 ol:after {
        display: none; }
      .tech .summary-list .dl-list dd > div.list-1 ol > li {
        width: 33.3333333333333333%; }
      .tech .summary-list .dl-list dd > div.list-2 {
        margin-top: 50px; }
        .tech .summary-list .dl-list dd > div.list-2 > ol li {
          width: 25%; }
  @media (max-width: 1024px) {
    .tech .white-box {
      padding: 30px 15px; }
      .tech .white-box .img-series {
        margin-top: 30px; }
    .tech .attention {
      font-size: 14px; }
    .tech .summary-list {
      padding: 30px 15px; }
      .tech .summary-list .dl-list > dd > div .list-top b {
        font-size: 18px;
        padding: 0 10px; }
      .tech .summary-list .dl-list > dd > div > ol {
        display: block;
        width: 100%;
        margin: 0; }
        .tech .summary-list .dl-list > dd > div > ol > li {
          display: block;
          width: 100% !important;
          padding: 0; }
          .tech .summary-list .dl-list > dd > div > ol > li ~ li {
            margin-top: 30px !important; }
    .tech .process-list {
      padding: 30px 15px; }
      .tech .process-list .dl-list dt {
        padding-bottom: 10px; }
      .tech .process-list .dl-list dd {
        margin-top: 30px; }
        .tech .process-list .dl-list dd:before {
          width: 5px;
          height: 100%; }
        .tech .process-list .dl-list dd > ol {
          display: block; }
          .tech .process-list .dl-list dd > ol > li {
            display: block;
            padding-left: 30px; }
            .tech .process-list .dl-list dd > ol > li:before {
              top: -1px;
              left: -6px;
              transform: none; }
            .tech .process-list .dl-list dd > ol > li .details {
              flex-direction: column !important; }
              .tech .process-list .dl-list dd > ol > li .details b {
                font-size: 26px;
                text-align: left;
                line-height: normal;
                margin: 0 !important; }
              .tech .process-list .dl-list dd > ol > li .details .dott {
                margin-top: 10px; }
            .tech .process-list .dl-list dd > ol > li ~ li {
              margin-top: 30px; } }

/*# sourceMappingURL=sub.css.map */