/*------------------------------*/
/* brandstory */
/*------------------------------*/
.story_bg {
  background-color: #FFE9CB;
}
.story_message {
  padding: min(35vw, 140px) 0 min(21.75vw, 87px);
}
.story_message_head {
  display: block;
  font-family: var(--f-serif);
  font-size: min(6.5vw, 26px);
  line-height: 1.5;
  letter-spacing: -0.022em;
  margin: 0 min(9.5vw, 38px) min(7.75vw, 31px) min(12vw, 48px);
  font-weight:600;
}
.story_message_txt {
  padding: 0 min(11.5vw, 46px) 0 min(12vw, 48px);
}
.story_message_txt-first {
  margin: 0 0 min(6.25vw, 25px);
}
.story_message_txt p {
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: min(3.25vw, 13px);
  line-height: 1.9;
  letter-spacing: -0.022em;
  text-align: justify;
  font-weight:600;
}
@media screen and (min-width: 500px){
  .story_message_head,
  .story_message_txt p {
    text-align: center;
  }
}
@media screen and (min-width: 768px){
  .story_message_head,
  .story_message_txt p {
    text-align: left;
  }
}

.story_message_anime {
  width: 100%;
  height: 29.5vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.story_message_anime-bottom {
  height: 32.75vw;
}
.story_message_anime svg {
  width: 100%;
  height: 100%;
}
.story_message_anime .wave-dot {
  r: var(--dot-r, min(6.5vw, 26px));            /* pxでOK。単位なしならSVGユーザー単位 */
  fill: var(--dot-fill, #efb24e);
}
@media screen and (min-width: 768px){
  .story_message_anime {
    height: min(29.5vw, 118px);
  }
  .story_message_anime-bottom {
    height: min(32.75vw, 131px);
  }
}

.story_message_illust {
  width: 30.75%;
  height: 33%;
  display: block;
  margin: min(3vw, 12px) min(6vw, 24px) min(3vw, 12px) auto;
}
.story_message_gallery_img {
  width: 100%;
  height: 95%;
  display: block
}

.story_point_item {
  padding: min(25.75vw, 103px) 0 0;
}
.story_point_item-first {
  padding: 0;
}
.story_point_head {
  width: 100%;
  display: flex;
  gap: min(4.75vw, 19px);
}
.story_point_head span {
  width: min(11.5vw, 46px);
  height: 3px;
  flex: 0 1 min(11.5vw, 46px);
  display: block;
  background-color: #EDAD18;
  margin: min(4.25vw, 17px) 0 0;
}
.story_point_catch {
  flex: 1 1 0;
}
.story_point_catch h2 {
  font-family: var(--f-serif);
  font-size: min(6.5vw, 26px);
  line-height: 1.5;
  letter-spacing: -0.022em;
  font-weight:600;
}
.story_point_catch p {
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: min(3.25vw, 13px);
  line-height: 1.9;
  letter-spacing: -0.022em;
  display: block;
  margin: min(5vw, 20px) 0 0;
  font-weight:600;
}

.story_point_person-first {
  padding: min(11.25vw, 45px) min(6.75vw, 27px) 0;
}

.story_point_person_inner {
  width: 100%;
  height: auto;
  border-radius: 20px;
  border: 2px solid #EEA836;
  position: relative;
  padding: min(10.75vw, 43px) 0 min(8vw, 32px);
}
.story_point_person_img {
  width: min(32.5vw, 130px);
  height: min(32.5vw, 130px);
  position: absolute;
  top: min(5.5vw, 22px);
  left: -4px;
}
.story_point_person_head {
  width: fit-content;
  display: flex;
  flex-direction: column;
  gap: min(2vw, 8px);
  margin: 0 min(7.75vw, 31px) min(12vw, 48px) auto;
}
@media screen and (min-width: 420px){
  .story_point_person_head {
    margin: 0 auto min(12vw, 48px) min(27.5vw, 110px);
  }
}
@media screen and (min-width: 768px){
  .story_point_person_head {
    margin: 0 min(7.75vw, 31px) min(12vw, 48px) auto;
  }
}
.story_point_person_head p {
  font-size: min(3.5vw, 14px);
  line-height: 1.5;
  letter-spacing: 0.03em;
  font-weight:700;
}
.story_point_person_head .name {
  font-size: min(4vw, 16px);
  line-height: 1.15;
  font-weight:700;
}
.story_point_person_head .name span {
  font-size: min(6vw, 24px);
  display: inline-block;
  margin: 0 min(1vw, 4px) 0 0;
}
.story_point_person_txt {
  font-size: min(3.25vw, 13px);
  line-height: 2.21;
  letter-spacing: -0.022em;
  text-align: justify;
  padding: 0 min(8vw, 32px);
}
.story_point_person_txt p {
  font-weight:500;
}
.story_point_person_txt small {
  display: block;
  font-size: min(2.5vw, 10px);
  letter-spacing: -0.022em;
  text-align: justify;
  margin: min(4.5vw, 18px) 0 0;
}

.story_point_person-bottom {
  padding: min(11.75vw, 47px) min(6.75vw, 27px) 0;
}
.story_point_person-bottom .story_point_person_inner {
  padding: min(17.75vw, 71px) 0 min(8vw, 32px);
}
.story_point_person-bottom .story_point_person_img {
  width: min(34vw, 136px);
  height: min(34vw, 136px);
  top: min(5.25vw, 21px);
  left: auto;
  right: -4px;
}
.story_point_person-bottom .story_point_person_head {
  margin: 0 auto min(12vw, 48px) min(8vw, 32px);
}
@media screen and (min-width: 420px){
  .story_point_person-bottom .story_point_person_head {
    margin: 0 min(27.5vw, 110px) min(12vw, 48px) auto;
  }
}
@media screen and (min-width: 768px){
  .story_point_person-bottom .story_point_person_head {
    margin: 0 auto min(12vw, 48px) min(8vw, 32px);
  }
}
.story_point_person-bottom .story_point_person_head .name span {
  letter-spacing: -0.04em;
}

.story_point_about {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 min(17vw, 68px);
  margin: min(11.25vw, 45px) 0 0;
}

.story_point_about_bar {
  width: 100%;
  height: 3px;
}
.story_point_about_bar-ora {
  width: 93%;
  background-color: #EDAD18;
}
.story_point_about_bar-light {
  background-color: #EDAD1866;
}
.story_point_about_inner {
  width: 100%;
  padding: min(8vw, 32px) min(5.75vw, 23px) min(5.5vw, 22px);
  background-color: var(--c-white);
}
.story_point_about_catch {
  font-size: min(5.5vw, 22px);
  line-height: 1.33;
  letter-spacing: 0.1em;
  color: #EDAD18;
  display: block;
  margin: 0 0 min(3.5vw, 14px);
  font-weight:800;
}
.story_point_about_inner p {
  font-size: min(3.25vw, 13px);
  line-height: 2.17;
  letter-spacing: -0.022em;
  text-align: justify;
  font-weight:700;
}
.story_point_about_datas {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: min(2vw, 8px);
  margin: min(4vw, 16px) 0 0;
}
.story_point_about_link {
  width: 100%;
  display: flex;
  align-items: center;
  gap: min(2vw, 8px);
  color: #EDAD18;
  transition: all 0.5s cubic-bezier(0.18, 0.06, 0.23, 1);
}
.story_point_about_link span {
  width: min(3.75vw, 15px);
  height: min(3.75vw, 15px);
  flex: 0 1 min(3.75vw, 15px);
  position: relative;
}
.story_point_about_link span::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-left: 14px solid #EDAD18;
  border-right-width: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -55% -50%;
}
.story_point_about_link p {
  flex: 1 1 0;
  font-size: min(2.75vw, 11px);
  line-height: 1.15;
  letter-spacing: -0.022em;
  text-align: justify;
}
@media screen and (min-width: 768px){
  .story_point_about_link:hover {
    opacity: 0.5;
  }
}

.story_point_about-bottom {
  margin: min(5.5vw, 22px) 0 0;
}

.story_point_feature {
  padding: 0 min(12.5vw, 50px) min(13.5vw, 54px) min(13vw, 52px);
  margin: min(11vw, 44px) 0 0;
  border-bottom: 3px solid #EFB24E;
}
.story_point_feature_catach {
  width: fit-content;
  padding: 0 min(3vw, 12px);
  margin: 0 auto min(3vw, 12px);
  position: relative;
}
.story_point_feature_catach::before,
.story_point_feature_catach::after {
  content: "";
  position: absolute;
  background-color: #EDAD18;
  width: 1.5px;
  height: min(3.75vw, 15px);
  bottom: 2px;
  left: 4px;
  rotate: -20deg;
}
.story_point_feature_catach::after {
  left: auto;
  right: 8px;
  rotate: 20deg;
}
.story_point_feature_catach p {
  font-size: min(3.5vw, 14px);
  line-height: 1.6;
  letter-spacing: 0.13em;
  text-align: center;
  color: #EDAD18;
  font-weight:800;
}
.story_point_feature .btn {
  border: 2px solid #EDAD18;
}
.story_point_feature .btn::after {
  right: min(4.5vw, 18px);
  background-color: #EDAD18;
}
.story_point_feature .btn .txt {
  width: 100%;
  font-size: min(5vw, 20px);
  letter-spacing: 0.05em;
  color: #EDAD18;
  left: 50%;
  translate: -50% -50%;
  font-weight:800;
}
@media screen and (min-width: 768px){
  .story_point_feature .btn:hover {
    background-color: #EDAD18;
  }
  .story_point_feature .btn:hover::after {
    background-color: var(--c-white);
  }
  .story_point_feature .btn:hover .txt {
    color: var(--c-white);
  }
}

.story_ceo {
  margin: min(15.5vw, 62px) 0 0;
  padding: 0 0 min(21.5vw, 86px);
}
.story_ceo_head {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: min(2.5vw, 10px);
  margin: 0 min(13.5vw, 54px) 3px auto;
  font-weight: 100;
  font-size: min(4vw, 16px);
  line-height: 1.7;
  letter-spacing: 0.14em;
  color: #EDAD18;
}
.story_ceo_head_icon {
  width: min(6.75vw, 27px);
  height: min(6.75vw, 27px);
}
.story_ceo_content {
  width: calc(100% - min(8.25vw, 33px));
  height: auto;
  background-color: #EEA836;
  padding: min(6.25vw, 25px) min(4.5vw, 18px) min(6.25vw, 25px) min(38.75vw, 155px);
  border-radius: 20px 0 0 20px;
  margin: 0 0 0 auto;
  position: relative;
}
.story_ceo_img {
  width: min(45vw, 180px);
  height: min(77vw, 308px);
  position: absolute;
  bottom: 0;
  right: 53vw;
}
@media screen and (min-width: 768px){
  .story_ceo_img {
    right: min(53vw, 212px);
  }
}
.story_ceo_txtArea {
  width: 49vw;
  font-family: var(--f-serif);
  color: var(--c-white);
  margin: 0 0 0 auto;
}
@media screen and (min-width: 768px){
  .story_ceo_txtArea {
    width: min(49vw, 196px);
  }
}
.story_ceo_txtArea h2 {
  font-size: min(4vw, 16px);
  line-height: 1.5;
  letter-spacing: -0.022em;
  display: block;
  margin: 0 0 min(2.75vw, 11px);
  font-family: var(--f-serif);
  font-weight: 700;
}
.story_ceo_txtArea p {
  font-weight: 600;
  font-size: min(2.75vw, 11px);
  line-height: 1.76;
  letter-spacing: -0.022em;
  font-family: var(--f-serif);
  text-align: justify;
  font-weight: 700;
}
.story_ceo_name {
  margin: min(4vw, 16px) 0 0;
  font-family: var(--f-serif);
  font-weight: 700;
}
.story_ceo_name p {
  font-family: var(--f-serif);
  font-weight: 600;
  font-size: min(2.5vw, 10px);
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-align: right;
  font-weight: 700;
}
.story_ceo_name p span {
  font-size: min(3.75vw, 15px);
  margin: 0 0 0 min(2.5vw, 10px);
  font-family: var(--f-serif);
  font-weight: 700;
}

/*---------- cta_bnr ----------*/
.cta_bnr {
  width: 95%;
  height: auto;
  max-width: 380px;
  display: block;
  background-color: rgba(242, 99, 77, 0.85);
  border: 1px solid #EB5E40;
  padding: min(4.75vw, 19px) min(8vw, 32px) min(4.5vw, 18px) min(3.75VW, 15px);
  border-radius: 10px;
  position: fixed;
  bottom: min(3vw, 12px);
  left: 50%;
  translate: -50% 0;
  z-index: 19;
  transition: all 0.5s cubic-bezier(0.18, 0.06, 0.23, 1);
}
@media screen and (min-width: 1200px){
  .cta_bnr {
    display: none;
    pointer-events: none;
  }
}
.cta_bnr_inner {
  width: 100%;
  display: flex;
  align-items: center;
  gap: min(2.5vw, 10px);
}
.cta_bnr_img {
  width: min(16.5vw, 66px);
  height: min(16.5vw, 66px);
  flex: 0 1 min(16.5vw, 66px);
}
.cta_bnr_txtArea {
  width: 100%;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(1.75vw, 7px);
}
.cta_bnr_head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: min(2vw, 8px);
}
.cta_bnr_head h2 {
  font-weight: 700;
  font-size: min(5vw, 20px);
  line-height: 1.5;
  letter-spacing: 0.07em;
  color: var(--c-white);
}
.cta_bnr_head img {
  width: min(6.5vw, 26px);
  height: min(6.5vw, 26px);
}
.cta_bnr_txt {
  width: 100%;
  height: min(7vw, 28px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--c-white);
  border-radius: 500px;
}
.cta_bnr_txt p {
  font-weight: 500;
  font-size: min(2.75vw, 11px);
  line-height: 1.5;
  letter-spacing: 0.07em;
  color: var(--c-font);
  display: flex;
  align-items: center;
}
.cta_bnr_txt strong {
  font-weight: 500;
  font-size: min(6vw, 24px);
  line-height: 1;
  margin: -4px 0 0 4px;
}
.cta_bnr_txt span {
  font-size: min(3vw, 12px);
}
.cta_bnr_close {
  width: min(6.25vw, 25px);
  height: min(6.25vw, 25px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 0 10px 0 0;
  position: absolute;
  top: -1px;
  right: -1px;
}
.cta_bnr_close div {
  width: min(2.5vw, 10px);
  height: min(2.5vw, 10px);
  position: relative;
}
.cta_bnr_close div span {
  display: block;
  width: min(3.5vw, 14px);
  height: 2px;
  border-radius: 500px;
  background-color: #4a4a4a;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}
.cta_bnr_close div span:first-child {
  rotate: 45deg;
}
.cta_bnr_close div span:last-child {
  rotate: -45deg;
}
.cta_bnr.is-hidden,
.cta_bnr.is_open {
  opacity: 0;
  pointer-events: none;
}