@charset "UTF-8";
@import "tailwindcss";

:root {
  --background: #4444;
  --foreground: #171717;
  --dark-gray: #222222;
  --black: #000;
  --btn-gray: #313131;
  --light-gray: #CECECE;
  --white: #fff;
  --orange: #CE6700;
  --main-dark-blue: #0D406A;
  --main-light-blue: #0067BC;
  --bg--dark-blue: #002849;
  --bg--dark-blue02: #035FAA;
  --bg--light-blue: #023763;
  --bg--light-blue02: #0072BC;
  --title-blue01: #012F55;
  --contact-blue: #021728;
}

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

ol ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input,
select {
  vertical-align: middle;
}

img {
  vertical-align: top;
  max-width: 100%;
}


/* common */
body {
  background: linear-gradient(#002849, #005092);
  color: var(--white);
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.6;
  margin: 0;
}

.wrap {
  max-width: 1440px;
  box-sizing: border-box;
  margin: 0 auto;
}

.btn {
  background-color: var(--orange);
  height: 48px;
}

.bg_light {
  background-color: var(--bg--light-blue);
}

.bg_orange {
  background-color: var(--orange);
}

.common_orange_btn {
  background-color: var(--orange);
  color: var(--white);
  border-radius: 30px;
  height: 48px;
  max-width: 286px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 16px;
  border: 1px solid var(--white);
  text-decoration: none;
  font-size: 16px;
  width: 100%;
  flex-direction: column;
  line-height: 1.2;
}

.common_orange_btn.noicon {
  padding-right: 0;
}

.common_orange_btn>.blank {
  font-size: 12px;
  font-weight: 400;
}

.oubo {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
}

.oubo>.blank_link {
  font-size: 12px;
  font-weight: 400;
}

.common_gray_btn {
  background-color: var(--btn-gray);
  color: var(--white);
  border-radius: 30px;
  height: 48px;
  max-width: 286px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 16px;
  border: 1px solid var(--white);
  text-decoration: none;
  font-size: 16px;
  width: 100%;
}

.common_gray_btn.mini {
  max-width: 220px;
}

.common_orange_btn::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 16px;
  background-image: url("../images/common/arrow_back_icon_white.svg");
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.common_orange_btn.noicon::after {
  content: none;
}

.common_orange_btn.blank::after {
  background-image: url("../images/common/open_icon_white.svg");
}

.common_gray_btn::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 16px;
  background-image: url("../images/common/arrow_back_icon_white.svg");
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.common_gray_btn.blank::after {
  background-image: url("../images/common/open_icon_white.svg");
}

.link_blank {
  display: inline-block;
  padding-right: 30px;
  position: relative;
  color: var(--white);
  margin-bottom: 16px;
}

.link_blank::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  background-image: url("../images/common/open_icon_white.svg");
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.link_blank>span {
  text-decoration: underline;
}

.sp {
  display: none;
}

@media (max-width: 1024px) {
  .pc {
    display: none !important;
  }

  .sp {
    display: block !important;
  }
}


/* header */
#header {
  background-color: rgb(255, 255, 255, 0.3);
  border-bottom: 1px solid #fff;
  position: absolute;
  width: 100%;
}

.header_wrap {
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header_wrap>.logo {
  width: 476px;
  color: var(--white);
}

.header_wrap>.menu {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 0;
  margin: 0;
}

.header_wrap>.menu>.btn_list {
  display: flex;
  gap: 32px;
}

.header_wrap>.menu>.btn_list>.oubo {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
}

.header_wrap>.menu>.btn_list>.oubo>.blank_link {
  font-size: 12px;
  font-weight: 400;
}

.header_wrap>.menu a {
  color: var(--white);
  font-size: 14px;
  letter-spacing: 1px;
  text-decoration: none;
  font-weight: 600;
}

.header_wrap>.menu a.btn {
  background-color: var(--orange);
  color: var(--white);
  border-radius: 30px;
  height: 48px;
  width: 248px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 16px;
  border: 1px solid var(--white);
  line-height: 1.2;
  flex-direction: column;
}

.header_wrap>.menu a.btn>.blank {
  font-size: 12px;
  font-weight: 400;
}

.header_wrap>.menu a.btn.gray {
  background-color: var(--btn-gray);
}

.header_wrap>.menu a.btn::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 16px;
  background-image: url("../images/common/arrow_back_icon_white.svg");
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.header_wrap>.menu a.btn.blank::after {
  background-image: url("../images/common/open_icon_white.svg");
}

.header_wrap>.menu a.btn.gray::after {
  background-image: url("../images/common/open_icon_white.svg");
  right: 40px;
}

.hamburger {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  z-index: 120;
}

.hamburger span {
  display: block;
  width: 28px;
  height: 2px;
  background: var(--white);
  margin: 0 auto;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.hamburger span+span {
  margin-top: 7px;
}

.hamburger.active span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

@media screen and (max-width: 1400px) {
  .header_wrap {
    min-height: 72px;
    padding: 16px;
  }

  .hamburger {
    display: block;
  }

  .header_wrap>.menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    padding: 24px 20px;
    background-color: var(--bg--dark-blue);
    border-radius: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    box-sizing: border-box;
    z-index: 100;
    border-bottom: 1px solid var(--white);
  }

  .header_wrap>.menu.is-open {
    display: flex;
  }
}

@media (max-width: 1024px) {
  body {
    background: linear-gradient(#002849, #005092);
  }
}

@media (max-width: 768px) {
  .header_wrap {
    min-height: 56px;
    padding: 10px 16px;
  }

  .header_wrap>.logo {
    width: 300px;
  }

  .header_wrap>.menu>.btn_list {
    flex-direction: column;
  }

  .header_wrap>.menu a.btn {
    width: 100%;
  }
}




/* footer */

#footer {
  background-color: var(--dark-gray);
}

.footer_wrap {
  padding: 60px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer_wrap>.logo {
  width: 476px;
  color: var(--white);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer_wrap>.logo>.sns_list {
  display: flex;
  gap: 16px;
  list-style: none;
}

.footer_wrap>.logo>.sns_list>.icon {
  width: 24px;
}

.footer_wrap>.menu_wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer_wrap>.menu_wrap>.menu {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.footer_wrap>.menu_wrap>.menu a {
  color: var(--white);
  font-size: 14px;
  text-decoration: none;
}

.footer_wrap>.menu_wrap>.bnr_list {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.footer_wrap>.menu_wrap>.bnr_list>.bnr {
  width: 50px;
}

.copyright {
  background-color: var(--black);
}

.copyright_wrap {
  max-width: 1220px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 8px 32px;
  display: flex;
  justify-content: space-between;
  color: var(--light-gray);
  font-size: 12px;
}

.copyright_wrap>.menu {
  display: flex;
  gap: 40px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.copyright_wrap>.menu a {
  color: #CECECE;
  font-size: 14px;
}

.copyright_wrap>.menu a.blank {
  display: inline-block;
  position: relative;
}

.copyright_wrap>.menu a.blank::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -16px;
  background-image: url("../images/common/open_icon_white.svg");
  background-repeat: no-repeat;
  background-size: 100% auto;
}

@media (max-width: 1024px) {
  .footer_wrap {
    padding: 64px 20px;
    flex-direction: column;
  }

  .footer_wrap>.logo {
    width: 100%;
    max-width: 375px;
  }

  .footer_wrap>.logo>.sns_list {
    justify-content: center;
  }

  .footer_wrap>.menu_wrap {
    margin-top: 24px;
  }

  .footer_wrap>.menu_wrap>.menu {
    text-align: center;
  }

  .copyright_wrap {
    flex-direction: column-reverse;
    align-items: center;
    padding: 24px 0;
  }

  .copyright_wrap>.menu {
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
  }
}

/* toppage */

.kv_area {
  width: 100%;
  background-image: url("../images/top/kv_bg.png"), url("../images/top/about_bg.png");
  background-repeat: no-repeat, no-repeat;
  background-size: 100% auto, 100% auto;
  background-position: top center, bottom center;
  padding-top: 85px;
}

.kv_area>.kv_img {
  width: 100%;
  padding: 60px 0 120px;
}

.kv_area>.about {
  text-align: center;
  font-size: 20px;
  letter-spacing: 10%;
}

.kv_area>.about>.title {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 30px;
}

.kv_area>.about>p {
  margin-bottom: 30px;
  line-height: 2.4;
}

.kv_area>.about>p>.marker {
  background-color: var(--orange);
}

.kv_area>.about>.copy {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 30px;
}

.flow_banner {
  width: 100%;
  overflow: hidden;
  margin-top: 60px;
}

.flow_banner__track {
  display: flex;
  width: max-content;
  animation: flowLeft 30s linear infinite;
}

.flow_banner__item {
  flex: 0 0 auto;
}

.flow_banner__item img {
  display: block;
  width: auto;
  height: 300px;
  /* 好きな高さに調整 */
}

@keyframes flowLeft {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.story_section {
  min-height: 100vh;
  background-color: var(--bg--dark-blue);
  background-image: url(../images/top/top_bg.png);
  background-size: 100% auto;
  background-position: top 200px center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.story_section.result {
  background-color: transparent;
  background-image: url(../images/result/result_bg.png);
}

.story_layout {
  display: grid;
  grid-template-columns: 1fr 640px;
  gap: 40px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 200px 0 0;
}

.story_nav {
  position: sticky;
  top: 30px;
  align-self: start;
  padding-bottom: 64px;
}

.story_nav>ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.story_nav>ul>li+li {
  margin-top: 40px;
}

.story_nav>ul>li a {
  text-decoration: none;
  color: var(--white);
  font-size: 28px;
  transition: color 0.3s ease;
  display: block;
  padding-left: 30px;
  position: relative;
  font-weight: 600;
}

.story_nav>ul>li a::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--white);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.story_nav>ul>li a.is_active {
  color: var(--orange);
}

.story_nav>ul>li a.is_active::before {
  background-color: var(--orange);
}

.story_content {
  position: relative;
}

.story_block h2 {}

.story_block {
  padding-bottom: 180px;
}

.story_block>.sp_section_title {
  display: none;
}

.story_block>.grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.story_block>.grid>.list {
  display: flex;
  gap: 40px;
  padding: 28px 32px;
}

.story_block>.grid>.list.column {
  flex-direction: column;
  gap: 24px;
}

.story_block>.grid>.list.mini {
  padding: 16px 20px;
}

.story_block>.grid>.list.al_center {
  align-items: center;
}

.story_block>.grid>.list.coming {
  align-items: center;
  justify-content: center;
  padding: 120px 32px;
}


.story_block>.grid>.list>.title {
  font-size: 20px;
  font-weight: 400;
  width: 100px;
}

.story_block>.grid>.list.column>.title {
  font-size: 28px;
  font-weight: 600;
  color: var(--orange);
  width: 100%;
}

.story_block>.grid>.list.mini>.title {
  font-size: 16px;
}

.story_block>.grid>.list>.title.wide {
  width: auto;
}

.story_block>.grid>.list>.title.light {
  opacity: 0.7;
}

.story_block>.grid>.list>.title.w180 {
  width: 180px;
}

.story_block>.grid>.list>.in {
  font-size: 18px;
  font-weight: 500;
  flex: 1;
}

.story_block>.grid>.list>.in.wide {
  width: auto;
}

.story_block>.grid>.list>.in.right {
  text-align: right;
}

.story_block>.grid>.list.mini>.in {
  font-size: 16px;
}

.story_block>.grid>.list.column>.in {
  font-size: 16px;
  line-height: 1.9;
  font-weight: 400;
}

.story_block>.grid>.list.column>.in.mini {
  font-size: 14px;
}

.story_block>.grid>.list.coming>.in {
  text-align: center;
}

.story_block>.grid>.list>.in>.sub_title {
  font-size: 18px;
  margin-bottom: 16px;
  font-weight: 600;
}

.story_block>.grid>.list>.in>.sub_title>a {
  color: var(--white);
}

.story_content .caption {
  font-size: 12px;
  margin-top: 24px;
}

.story_block>.bnr_grid {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.story_block>.bnr_grid .bnr01 {
  width: 100%;
}

.story_block>.bnr_grid .bnr02 {
  width: calc((100% - 24px) / 2);
}

.story_panel h2 {
  margin-top: 0;
  font-size: 40px;
  line-height: 1.3;
}

.top_about_title {
  font-size: 28px;
  font-weight: 500;
  margin-bottom: 24px;
}

.sponsored_wrap {
  background-color: var(--bg--dark-blue02);
}

.sponsored_wrap>.content {
  padding: 120px 20px;
}

.sponsored_wrap>.content h2 {
  color: var(--white);
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 24px;
}

.sponsored_wrap>.content>.bnr_list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 12px;
  margin-bottom: 40px;
  justify-content: center;
}

.sponsored_wrap>.content>.bnr_list span {
  width: calc((100% - 48px) / 5);
}

.faq_wrap {
  background-color: var(--bg--light-blue02);
  padding-bottom: 120px;
}

.faq_wrap>.content {
  background-color: #F7F7F7;
  padding: 120px 80px;
}

.faq_wrap>.content>h2 {
  color: var(--title-blue01);
  font-size: 24px;
  letter-spacing: 8%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-bottom: 40px;
}

.faq_wrap>.content>h2>.en {
  width: 144px;
}

.faq_wrap>.content>.faq_list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 40px;
}

.faq_wrap>.content>.faq_list dl {
  background-color: var(--white);
  padding: 32px 40px;
  font-size: 20px;
  color: var(--title-blue01);
}

.faq_wrap>.content>.faq_list dl dt {
  font-weight: 600;
  position: relative;
  padding-left: 50px;
  padding-right: 50px;
}

.faq_wrap>.content>.faq_list dl dt::before {
  width: 35px;
  height: 34px;
  content: '';
  display: inline-block;
  position: absolute;
  left: 0;
  background-image: url(../images/top/faq_q_icon.svg);
  background-size: 100% auto;
  background-repeat: no-repeat;
  top: 50%;
  transform: translateY(-50%);
}

.faq_wrap>.content>.faq_list dl dt::after {
  width: 16px;
  height: 16px;
  content: '';
  display: inline-block;
  position: absolute;
  right: 0;
  background-image: url(../images/top/faq_arrow_icon.svg);
  background-size: 100% auto;
  background-repeat: no-repeat;
  top: 7px;
  transform: rotateX(180deg);
}

.faq_wrap>.content>.faq_list dl dt.active::after {
  transform: rotateX(0);
}

.faq_wrap>.content>.faq_list dl dd {
  font-weight: 500;
  position: relative;
  padding-left: 50px;
  margin-top: 32px;
  display: none;
}

.faq_wrap>.content>.faq_list dl dd::before {
  width: 35px;
  height: 34px;
  content: '';
  display: inline-block;
  position: absolute;
  left: 0;
  background-image: url(../images/top/faq_a_icon.svg);
  background-size: 100% auto;
  background-repeat: no-repeat;
  top: 0;
}

.faq_wrap>.content>.faq_list>.faq_close {
  display: none;
}

.faq_wrap>.content>.faq_list>.faq_close.open {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.common_contat_wrap {
  background-image: url(../images/top/top_bg.png);
  background-color: var(--bg--dark-blue);
  padding: 120px 0;
  background-size: cover;
}

.common_contat_wrap>h2 {
  color: var(--white);
  text-align: center;
  font-size: 56px;
  font-weight: 600;
  margin-bottom: 40px;
}

.common_contat_wrap>.common_contat_in {
  background-color: #021728;
  padding: 40px 64px;
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  color: var(--white);
  max-width: 750px;
  box-sizing: border-box;
  margin: 0 auto;
  text-align: center;
  gap: 40px;
}

.common_contat_wrap>.common_contat_in>div>.title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 10px;
  text-align: center;
}

.common_contat_wrap>.common_contat_in>div>.btn_list {
  display: flex;
  gap: 24px;
}

.common_contat_wrap>.common_contat_in>div>.btn_list>.oubo {
  width: calc((100% - 24px) / 2);
}

.common_contat_wrap>.common_contat_in>div>.caption {
  margin-top: 10px;
}

.common_contat_wrap>.common_contat_in>div>.mail {
  margin-top: 16px;
}

.common_contat_wrap>.common_contat_in>div>.mail a {
  color: var(--white);
}

/* result */

.result_h2 {
  display: flex;
  flex-direction: column;
  font-size: 24px;
  color: var(--orange);
  font-weight: 600;
  gap: 16px;
  margin-bottom: 64px;
}

.result_h2>.en {
  width: 200px;
}

.story_block>.result_title {
  font-size: 40px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 16px;
}

.story_block>.result_caption {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 16px;
}

.story_block>.result_caption a {
  color: var(--white);
}

.story_block>.result_caption a.blank {
  position: relative;
  display: inline-block;
}

.story_block>.result_caption a.blank::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -16px;
  background-image: url(../images/common/open_icon_white.svg);
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.story_block>.result_p {
  font-size: 20px;
  font-weight: 400;
}

.story_block>.result_p .blank {
  display: inline-block;
  position: relative;
  color: var(--white);
  text-decoration: underline;
}

.story_block>.result_p .blank::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -16px;
  background-image: url(../images/common/open_icon_white.svg);
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.story_block>.result_content {
  padding-bottom: 64px;
}

.story_block>.result_content>.story_block {
  padding-bottom: 0;
}

.story_block>.result_content>.story_block>.result_h3 {
  margin-top: 64px;
  font-size: 32px;
  font-weight: 600;
  border-bottom: 1px solid var(--white);
  color: var(--white);
  margin-bottom: 24px;
  padding-bottom: 10px;
}

.story_block>.result_content>.story_block>.youtube-variable {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.story_block>.result_content>.story_block>.youtube-variable iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.story_block>.result_content>.story_block>.award_wrap {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.story_block>.result_content>.story_block>.award_wrap+.award_wrap {
  margin-top: 64px;
}

.story_block>.result_content>.story_block>.award_wrap>.award_info {
  display: flex;
  align-items: center;
  font-size: 14px;
  gap: 24px;
}

.story_block>.result_content>.story_block>.award_wrap>.award_info>.icon {
  width: 80px;
}

.story_block>.result_content>.story_block>.award_wrap>.award_info .name {
  font-size: 24px;
  margin-top: 10px;
}

.story_block>.result_content>.story_block>.judge_list {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 24px;
}

.story_block>.result_content>.story_block>.judge_list>div {
  width: calc((100% - 24px) / 2);
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 14px;
}

.story_block>.result_content>.story_block>.judge_list>div>.name {
  font-size: 24px;
}

.story_block>.result_content>.story_block>.sponsoring_list {
  background-color: var(--white);
  padding: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
  justify-content: center;
  align-items: center;
}

.story_block>.result_content>.story_block>.sponsoring_list>.bnr {
  width: calc((100% - 80px) / 3);
}

.story_block>.result_content>.story_block>.partner_list {
  background-color: var(--white);
  padding: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px 53px;
  justify-content: center;
  align-items: center;
}

.story_block>.result_content>.story_block>.partner_list>.bnr01 {
  width: 56px;
}

.story_block>.result_content>.story_block>.partner_list>.bnr02 {
  width: 148px;
}

.story_block>.result_content>.story_block>.partner_list>.bnr03 {
  width: 74px;
}

.story_block>.result_content>.story_block>.partner_list>.bnr04 {
  width: 77px;
}

.story_block>.result_content>.story_block>.partner_list>.bnr05 {
  width: 62px;
}

.story_block>.result_content>.story_block>.partner_list>.bnr06 {
  width: 111px;
}

.story_block>.result_content>.story_block>.partner_list>.bnr07 {
  width: 92px;
}

.story_block>.result_content>.story_block>.partner_list>.bnr08 {
  width: 99px;
}

/* privacy */

.story_section.privacy {
  background-image: none;
  background-color: transparent;
}

.privacy_wrap {
  padding-top: 200px;
  padding-bottom: 120px;
  max-width: 1200px;
  margin: 0 auto;
}

.privacy_h2 {
  display: flex;
  flex-direction: column;
  font-size: 24px;
  color: var(--orange);
  font-weight: 600;
  gap: 16px;
  margin-bottom: 64px;
}

.privacy_h2>.en {
  width: 446px;
}

.privacy_h3 {
  margin-top: 64px;
  font-size: 32px;
  font-weight: 600;
  border-bottom: 1px solid var(--white);
  color: var(--white);
  margin-bottom: 24px;
  padding-bottom: 10px;
}

.privacy_p {
  margin-bottom: 64px;
  font-size: 16px;
}

.privacy_p a {
  color: var(--white);
}


/* スマホ */
@media (max-width: 1024px) {
  .kv_area {
    background-image: url(../images/top/about_bg_sp.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: bottom 240px center;
    padding-top: 0;
  }

  .kv_area>.kv_img {
    padding: 85px 0 64px;
  }

  .kv_area>.about {
    letter-spacing: 4%;
    font-size: 16px;
    width: 94%;
    margin: 0 auto;
  }

  .kv_area>.about>.title {
    font-size: 20px;
  }

  .kv_area>.about>.copy {
    line-height: 1.6;
    font-size: 20px;
  }

  .flow_banner__item img {
    height: 240px;
  }

  .story_section {
    background-size: 80%;
    background-position: top 200px right;
    background-image: url(../images/top/top_bg_sp.png);
    min-height: auto;
  }

  .story_layout {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 60px 20px 0;
  }

  .story_nav {
    position: static;
    top: 0;
    background: none;
    z-index: 10;
    padding: 12px 0;
  }

  .story_nav>ul {
    display: flex;
    gap: 0;
    overflow-x: auto;
  }

  .story_nav li+li {
    margin-top: 0;
  }

  .story_nav>ul>li+li {
    margin-top: 0;
  }

  .story_nav>ul>li a {
    font-size: 24px;
  }

  .story_nav a {
    white-space: nowrap;
    font-size: 16px;
  }

  .story_panel {
    min-height: 80vh;
    padding: 28px 20px;
  }

  .story_panel h2 {
    font-size: 28px;
  }

  .story_block {
    padding-bottom: 64px;
  }

  .story_block>.sp_section_title {
    font-size: 24px;
    color: var(--orange);
    font-weight: 600;
    margin-bottom: 24px;
    display: block;
    padding-left: 30px;
    position: relative;
  }

  .story_block>.sp_section_title::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--orange);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .story_block>.grid>.list {
    padding: 20px;
    flex-direction: column;
    gap: 16px;
  }

  .top_about_title {
    font-size: 16px;
  }

  .story_block>.grid>.list>.in.right {
    text-align: left;
  }

  .story_block>.grid>.list.column>.title {
    font-size: 20px;
  }

  .story_block>.grid>.list.al_center {
    align-items: flex-start;
  }

  .story_block>.grid>.list.coming {
    margin-bottom: 64px;
  }

  .sponsored_wrap>.content {
    padding: 64px 20px;
  }

  .sponsored_wrap>.content h2 {
    font-size: 24px;
  }

  .sponsored_wrap>.content>.bnr_list {
    gap: 12px;
    justify-content: flex-start;
  }

  .sponsored_wrap>.content>.bnr_list span {
    width: calc((100% - 12px) / 2);
  }

  .faq_wrap {
    padding-bottom: 0;
  }

  .faq_wrap>.content {
    padding: 64px 20px;
  }

  .faq_wrap>.content>h2 {
    font-size: 14px;
  }

  .faq_wrap>.content>h2>img {
    width: 80px;
  }

  .faq_wrap>.content>.faq_list dl {
    padding: 20px;
    font-size: 16px;
  }

  .faq_wrap>.content>.faq_list dl dt {
    padding-right: 30px;
  }

  .faq_wrap>.content>.faq_list dl dt::before {
    top: 0;
    transform: translateY(0);
  }

  .faq_wrap>.content>.faq_list dl dd {
    margin-top: 24px;
  }

  .faq_wrap>.content>.faq_list dl dd::before {
    top: 0;
    transform: translateY(0);
  }

  .common_contat_wrap {
    padding: 64px 20px;
    background-image: url(../images/top/top_contact_bg_sp.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top 40px center;
  }

  .common_contat_wrap>h2 {
    font-size: 24px;
  }

  .common_contat_wrap>.common_contat_in {
    padding: 20px;
  }

  .common_contat_wrap>.common_contat_in>div>.btn_list {
    flex-direction: column;
    gap: 16px;
  }

  .common_contat_wrap>.common_contat_in>div>.btn_list>.oubo {
    width: 100%;
  }

  .common_contat_wrap>.common_contat_in>div>.caption {
    font-size: 14px;
  }

  .common_contat_wrap>.common_contat_in>div>.mail {
    font-size: 14px;
  }

  .result_h2 {
    margin-top: 64px;
    font-size: 14px;
  }

  .result_h2>.en {
    width: 110px;
  }

  .story_block>.result_title {
    font-size: 24px;
  }

  .story_block>.result_content>.story_block>.result_h3 {
    font-size: 24px;
  }

  .story_block>.result_content>.story_block>.judge_list>div {
    width: 100%;
  }

  .story_block>.result_content>.story_block>.sponsoring_list {
    padding: 40px 20px;
  }

  .story_block>.result_content>.story_block>.sponsoring_list>.bnr {
    width: calc((100% - 40px) / 2);
  }

  .story_block>.result_content>.story_block>.partner_list {
    padding: 40px 20px;
  }

  .privacy_wrap {
    padding-top: 128px;
    padding-right: 20px;
    padding-left: 20px;
  }

  .privacy_h2 {
    font-size: 14px;
  }

  .privacy_h2>.en {
    width: 223px;
  }

  .privacy_h3 {
    font-size: 24px;
  }

}

@media (max-width: 768px) {
  .kv_area>.kv_img {
    padding: 65px 0 64px;
  }
}