/* ===============================================### 
//////////////// base style //////////////// 
###=============================================== */
:root {
  --color-black: #231815;
  --pc-width: 1400;
  --tb-width: 768;
  --sp-width: 375;
}
#lp_main_area * {
  box-sizing: border-box;
}
#lp_main_area {
  width: 100%;
  /* font-feature-settings: "palt"; */
}
#lp_main_area img {
  width: 100%;
  height: auto;
}
#lp_main_area a {
  display: block;
  text-decoration: none;
}
#lp_main_area picture {
  display: block;
}
#lp_main_area p, #lp_main_area ul, #lp_main_area ol, #lp_main_area dl {
  list-style: none;
}

#lp_main_area .hidden-desktop {
  display: none;
}
#lp_main_area .hidden-mobile {
  display: block;
}
@media only screen and (max-width: 767px) {
  #lp_main_area .hidden-desktop {
    display: block;
  }
  #lp_main_area .hidden-mobile {
    display: none;
  }
}


/* ===============================================### 
//////////////// パンくず //////////////// 
###=============================================== */



/* ===============================================### 
//////////////// fade animation //////////////// 
###=============================================== */
.js-fadeIn-load {
  filter: blur(5px);
  opacity: 0;
  transition: all 1.1s ease;
}
.js-fadeIn-load--02 {
  opacity: 0;
  transition: opacity 1s 0.8s;
}
.js-fadeIn-load.js-active, .js-fadeIn-load--02.js-active {
  filter: blur(0);
  opacity: 1;
}

.js-fadeUp-load {
  opacity: 0;
  transition: opacity 1s, transform 1s;
  transform: translateY(10px);
}
.js-fadeUp-load.js-active {
  opacity: 1;
  transform: translateY(0);
}

.js-fadeUp {
  opacity: 0;
  transition: all 1s ease;
  transform: translateY(30px);
}
.js-fadeUp.js-active {
  opacity: 1;
  transform: translateY(0);
}

.js-fadeIn {
  opacity: 0;
  transition: all 1s ease;
}
.js-fadeIn.js-active {
  opacity: 1;
}

/* ===============================================### 
//////////////// モーダルウィンドウ //////////////// 
###=============================================== */
/* ====== モーダル背景 ====== */
.js-lp_modalOverlay {
  position: fixed;
  inset: 0;
  background: rgba(35, 24, 21, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 999;
}

/* ====== モーダル本体 ====== */
.js-lp_modal-content {
  background: url(../img/lp_modal_contents_bg01.jpg);
  background-position: center;
  background-size: cover;
  border: solid 10px #fff;
  border-radius: 15px;
  max-width: 1000px;
  max-height: 575px;
  width: 80%;
  height: 80%;
  position: relative;
  transform: scale(0.95);
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0;
}

/* ====== 閉じるボタン ====== */
.js-lp_close-btn {
  position: absolute;
  width: 135px;
  bottom: -75px;
  left: 50%;
  transform: translate(-50% , 0);
  cursor: pointer;
  transition: .3s;
}
.js-lp_close-btn:hover {
  opacity: 0.6;
}

/* ====== 表示状態 ====== */
.js-lp_modalOverlay {
  pointer-events: none;
}
.js-lp_modalOverlay.show {
  opacity: 1;
  pointer-events: auto;
}

.js-lp_modalOverlay.show .js-lp_modal-content {
  transform: scale(1);
  opacity: 1;
}



/* ===============================================### 
//////////////// lp_sanrio_about_us //////////////// 
###=============================================== */

.c-breadcrumb {
  display: none;
}

.lp_sanrio_about_us {
  display: block;
  width: 100%;
  --lp_yellow: #F7F9DF;
  --text_pink: #f6aca0;
  margin-top: 4.5rem;
}

/* lp_sanrio_about_us--top */
.lp_sanrio_about_us--top {
  position: relative;
  width: 100%;
  height: 295px;
  background-position: top;
}
.lp_sanrio_about_us--top:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: var(--lp_yellow);
  width: 100%;
  height: 282px;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  display: flex;
  justify-content: center;
  z-index: 0;
}
.lp_sanrio_about_us--top_text_box {
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 3;
}
.lp_sanrio_about_us--top_text_box__ttl {
  width: 50.9rem;
  margin: 0 auto 3.5rem;
}
.lp_sanrio_about_us--top_text_box__subttl {
  font-size: 2.4rem;
  font-weight: var(--fontweight-bold);
  letter-spacing: 0.25em;
  text-align: center;
}
.lp_sanrio_about_us--top_deco {
  width: 28rem;
  position: absolute;
  top: 4.7rem;
  right: 10.8rem;
  z-index: 3;
}

/* lp_sanrio_about_us--inner */
.lp_sanrio_about_us--inner {
  width: 100%;
  background-color: var(--lp_yellow);
  padding-top: 6.5rem;
  padding-bottom: 17.6rem;
  position: relative;
}
.lp_sanrio_about_us--inner_deco {
  width: 20.2rem;
  position: absolute;
  top: 37.2rem;
  left: 17.7rem;
  z-index: 3;
}

/* lp_sanrio_about_us--inner_middle_text_box */
.lp_sanrio_about_us--inner_middle_text_box {
  width: 100%;
  margin: 5.3rem auto 13.7rem;
  text-align: center;
  font-feature-settings: normal;
}
.inner_middle_text_box_jp {
  margin-bottom: 10.2rem;
}
.inner_middle_text_box_top_ttl {
  font-size: 2.8rem;
  line-height: 1.5;
  margin-bottom: 1.8rem;
  letter-spacing: 0.15em;
  font-weight: var(--fw-bold);
  position: relative;
  left: 0.1rem;
}
.inner_middle_text_box_top_ttl span {
  font-size: 4.5rem;
  color: var(--text_pink);
  font-family: var(--font-en);
  font-weight: var(--fw-bold);
  letter-spacing: 0.2em;
}
.inner_middle_text_box_lead {
  font-size: 1.8rem;
  line-height: 1.5;
  font-weight: var(--fw-bold);
  letter-spacing: 0.15em;
}
.inner_middle_text_box_lead span {
  font-size: 2.8rem;
  color: var(--text_pink);
  font-weight: var(--fw-bold);
  letter-spacing: 0.19em;
  font-feature-settings: "palt";
}
.inner_middle_text_box_lead.lead01 {
  margin-bottom: 1.8rem;
}
.inner_middle_text_box_lead.lead02 {
  margin-bottom: 2rem;
}
.inner_middle_text_box_lead.lead03 {
  margin-bottom: 0.8rem;
}
.inner_middle_text_box_lead.lead04 {
  margin-bottom: 1rem;
}
.inner_middle_text_box_lead.lead05 {
  margin-bottom: 3.9rem;
}
.inner_middle_text_box_lead.lead04 span {
  font-family: var(--font-en);
}
.inner_middle_text_box__bottom_box {
  width: 61.4rem;
  position: relative;
  left: -0.1rem;
  padding: 1.4rem 0 1rem;
  margin: 0 auto;
  border: solid 1px #000;
  outline: solid 2px #000;
  outline-offset: 5px;
}
.inner_middle_text_box__bottom_box p {
  font-size: 1.2rem;
  line-height: 2.08333;
  letter-spacing: 0.15em;
  font-weight: var(--fw-bold);
}

.inner_middle_text_box_en {
  margin-bottom: 0;
}
.inner_middle_text_box_en .inner_middle_text_box_top_ttl {
  font-family: var(--font-en);
  letter-spacing: 0.15em;
  margin-bottom: 1.5rem;
  font-size: 2.8rem;
}
.inner_middle_text_box_en .inner_middle_text_box_top_ttl span {
  font-size: 4.5rem;
  letter-spacing: 0.15em;
}
.inner_middle_text_box_en .inner_middle_text_box__bottom_box p {
  font-family: var(--font-en);
  letter-spacing: 0.1em;
}
.inner_middle_text_box_en .inner_middle_text_box_lead {
  font-family: var(--font-en);
  letter-spacing: 0.15em;
  font-size: 2rem;
}
.inner_middle_text_box_en .inner_middle_text_box_lead span {
  letter-spacing: 0.12em;
  font-feature-settings: normal;
  font-size: 2.8rem;
}
.inner_middle_text_box_en .inner_middle_text_box_lead.lead01 {
  margin-bottom: 1.6rem;
  position: relative;
  left: 0.5rem;
}
.inner_middle_text_box_en .inner_middle_text_box_lead.lead02 {
  margin-bottom: 1.2rem;
}
.inner_middle_text_box_en .inner_middle_text_box_lead.lead03 {
  margin-bottom: 1rem;
}
.inner_middle_text_box_en .inner_middle_text_box_lead.lead05 {
  margin-bottom: 4.8rem;
  position: relative;
  left: 0.7rem;
}


/* lp_sanrio_about_us--inner_top_illust_box */
.lp_sanrio_about_us--inner_top_illust_box {
  width: 120rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.inner_top_illust_box_side {
  width: 34.7rem;
  height: 25.8rem;
  position: relative;
  margin-top: 1.5rem;
}
.inner_top_illust_box_side .inner_top_illust_box_side_bg {
  width: 30rem;
  height: 19.5rem;
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}
.inner_top_illust_box_side .window_panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.character_panel {
  position: absolute;
}
/* ポムポムプリン */
.character_panel.pompom {
  width: 15.8rem;
  bottom: -5.6rem;
  left: 11.3rem;
}

.inner_top_illust_box_center {
  width: 47.5rem;
  height: 27.5rem;
  position: relative;
  overflow: hidden;
  margin-top: 0.3rem;
}
.inner_top_illust_box_center .inner_top_illust_box_center_bg {
  width: 30.7rem;
  height: 23rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}
.inner_top_illust_box_center_bg_curtain {
  position: absolute;
  top: 0;
  left: 0.5rem;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.inner_top_illust_box_center .window_panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* バツ丸 */
.character_panel.badtzmaru {
  width: 12.6rem;
  top: 2rem;
  left: 3.1rem;
}
/* ポチャッコ */
.character_panel.pochacco {
  width: 17rem;
  top: 0.2rem;
  right: -0.7rem;
}
/* けろけろけろっぴ */
.character_panel.keroppi {
  width: 11.6rem;
  bottom: -2.7rem;
  left: 4.8rem;
}
/* あひるのペックル */
.character_panel.pekkle {
  width: 15.5rem;
  bottom: -5.8rem;
  right: 2.4rem;
}

.inner_top_illust_box_side.right .inner_top_illust_box_side_bg {
  width: 30rem;
  height: 19.5rem;
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}
/* タキシードサム */
.character_panel.tuxedosam {
  width: 14.3rem;
  bottom: -5.6rem;
  right: 10.9rem;
}

/* lp_sanrio_about_us--inner_bottom_illust_box */
.lp_sanrio_about_us--inner_bottom_illust_box {
  width: 120rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.inner_bottom_illust_box_side {
  width: 34.7rem;
  height: 25.8rem;
  position: relative;
}
.inner_bottom_illust_box_side .inner_bottom_illust_box_side_bg {
  width: 30rem;
  height: 19.5rem;
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}
.inner_bottom_illust_box_side .window_panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* クロミ */
.character_panel.kuromi {
  width: 11.7rem;
  bottom: -3.4rem;
  right: 2.5rem;
}
/* ハローキティ */
.character_panel.kitty {
  width: 12.6rem;
  bottom: -4.5rem;
  right: 13.4rem;
}
/* マイメロディ */
.character_panel.mymelody {
  width: 17rem;
  bottom: -4.2rem;
  right: 11.8rem;
}


/* ===========### SP ###=========== */
@media only screen and (max-width: 767px) {
  .lp_sanrio_about_us--top {
    margin-top: calc(0* (100vw /375));
    width: 100%;
    height: calc(80* (100vw /375));
  }
  .lp_sanrio_about_us--top:after {
    width: 100%;
    height: 100%;
    bottom: calc(-60* (100vw /375));
  }
  .lp_sanrio_about_us--top_text_box {
    position: relative;
    margin-bottom: calc(27* (100vw /375));
    bottom: 0;
  }
  .lp_sanrio_about_us--top_text_box__ttl {
    width: calc(237* (100vw /375));
    margin: 0 auto calc(16* (100vw /375));
  }
  .lp_sanrio_about_us--top_text_box__subttl {
    font-size: calc(14* (100vw /375));
    letter-spacing: 0.23em;
  }

  /*  */

  .lp_sanrio_about_us--inner_top_illust_box {
    width: calc(529* (100vw /375));
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
  .lp_sanrio_about_us--inner {
    width: 100%;
    padding-top: calc(16* (100vw /375));
    padding-bottom: calc(62* (100vw /375));
    overflow: hidden;
    margin-top: calc(60* (100vw /375));
  }
  .inner_top_illust_box_side {
    width: calc(167* (100vw /375));
    height: calc(124* (100vw /375));
    margin-top: calc(7* (100vw /375));
  }
  .inner_top_illust_box_center {
    width: calc(230* (100vw /375));
    height: calc(133* (100vw /375));
    margin-top: calc(0* (100vw /375));
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
  }
  /* ボムボム */
  .character_panel.pompom {
    width: calc(69* (100vw /375));
    bottom: calc(-21* (100vw /375));
    left: calc(58* (100vw /375));
  }
  /* キキララ */
  .lp_sanrio_about_us--top_deco {
    width: calc(118* (100vw /375));
    top: calc(62* (100vw /375));
    right: calc(15* (100vw /375));
  }
  /* バツ丸 */
  .character_panel.badtzmaru {
    width: calc(55* (100vw /375));
    top: calc(11* (100vw /375));
    left: calc(21* (100vw /375));
  }
  /* ケロッピ */
  .character_panel.keroppi {
    width: calc(50* (100vw /375));
    bottom: calc(-10* (100vw /375));
    left: calc(27* (100vw /375));
  }
  /* ポチャッコ */
  .character_panel.pochacco {
    width: calc(73* (100vw /375));
    top: calc(2* (100vw /375));
    right: calc(7* (100vw /375));
  } 
  /* ぺっクル */
  .character_panel.pekkle {
    width: calc(65* (100vw /375));
    bottom: calc(-16* (100vw /375));
    right: calc(24* (100vw /375));
  }
  /* タキシードサム */
  .character_panel.tuxedosam {
    width: calc(60* (100vw /375));
    bottom: calc(-19* (100vw /375));
    right: calc(63* (100vw /375));
  }
  /* シナモン */
  .lp_sanrio_about_us--inner_deco {
    width: calc(87* (100vw /375));
    top: calc(225* (100vw /375));
    left: calc(38* (100vw /375));
    rotate: -3deg;
    z-index: 40;
  }
  /* クロミ */
  .character_panel.kuromi {
    width: calc(51* (100vw /375));
    bottom: calc(-11* (100vw /375));
    right: calc(-13* (100vw /375));
  }
  /* キティ */
  .character_panel.kitty {
    width: calc(55* (100vw /375));
    bottom: calc(-15* (100vw /375));
    right: calc(67* (100vw /375));
    rotate: -4deg;
  }
  /* マイメロ */
  .character_panel.mymelody {
    width: calc(73* (100vw /375));
    bottom: calc(-17* (100vw /375));
    right: calc(87* (100vw /375));
  }




  /* lp_sanrio_about_us--inner_middle_text_box */
  .lp_sanrio_about_us--inner_middle_text_box {
    margin: calc(49* (100vw /375)) auto calc(83* (100vw /375));
  }
  .inner_middle_text_box_jp {
    margin-bottom: calc(74* (100vw /375));
  }
  .inner_middle_text_box_top_ttl {
    font-size: calc(16* (100vw /375));
    line-height: 1.5;
    margin-bottom: calc(11* (100vw /375));
    letter-spacing: 0.15em;
    left: calc(1* (100vw /375));
  }
  .inner_middle_text_box_top_ttl span {
    font-size: calc(28* (100vw /375));
    letter-spacing: 0.15em;
  }
  .inner_middle_text_box_lead {
    font-size: calc(11* (100vw /375));
    line-height: 1.818;
    letter-spacing: 0.15em;
  }
  .inner_middle_text_box_lead span {
    font-size: calc(16* (100vw /375));
    letter-spacing: 0.15em;
  }
  .inner_middle_text_box_lead.lead01 {
    margin-bottom: calc(6* (100vw /375));
    line-height: 1.5;
  }
  .inner_middle_text_box_lead.lead02 {
    margin-bottom: calc(5* (100vw /375));
  }
  .inner_middle_text_box_lead.lead03 {
    margin-bottom: calc(-1* (100vw /375));
  }
  .inner_middle_text_box_lead.lead04 {
    margin-bottom: calc(5* (100vw /375));
  }
  .inner_middle_text_box_lead.lead05 {
    margin-bottom: calc(27* (100vw /375));
    line-height: 1.5;
  }
  .inner_middle_text_box_lead.lead04 span {
    font-family: var(--font-en);
  }
  .inner_middle_text_box__bottom_box {
    width: calc(313* (100vw /375));
    left: calc(-1* (100vw /375));
    padding: calc(12* (100vw /375)) 0 calc(10* (100vw /375));
    border: solid 1px #000;
    outline: solid 2px #000;
    outline-offset: 3px;
  }
  .inner_middle_text_box__bottom_box p {
    font-size: calc(9* (100vw /375));
    line-height: 2;
    letter-spacing: 0.12em;
    position: relative;
    left: calc(3* (100vw /375));
  }

  .inner_middle_text_box_en {
    margin-bottom: 0;
  }
  .inner_middle_text_box_en .inner_middle_text_box_top_ttl {
    font-family: var(--font-en);
    letter-spacing: 0.15em;
    margin-bottom: calc(22* (100vw /375));
    font-size: calc(20 * (100vw / 375));
  }
  .inner_middle_text_box_en .inner_middle_text_box__bottom_box p {
    font-family: var(--font-en);
    letter-spacing: 0.12em;
    font-size: calc(10 * (100vw / 375));
    line-height: 1.9;
    position: relative;
    left: calc(1 * (100vw / 375));
  }
  .inner_middle_text_box_en .inner_middle_text_box_lead {
    font-family: var(--font-en);
    letter-spacing: 0.15em;
    font-size: calc(13* (100vw /375));
  }
  .inner_middle_text_box_en .inner_middle_text_box_top_ttl span {
    font-size: calc(28 * (100vw / 375));
    letter-spacing: 0.1em;
  }
  .inner_middle_text_box_en .inner_middle_text_box_lead span {letter-spacing: 0.07em;font-feature-settings: normal;font-size: calc(20* (100vw /375));}
  .inner_middle_text_box_en .inner_middle_text_box_lead.lead01 {
    margin-bottom: calc(-1* (100vw /375));
    line-height: 1.4;
    left: calc(5* (100vw /375));
  }
  .inner_middle_text_box_en .inner_middle_text_box_lead.lead01_2 {
    margin-bottom: calc(3* (100vw /375));
    line-height: 1.4;
  }
  .inner_middle_text_box_en .inner_middle_text_box_lead.lead02 {
    margin-bottom: calc(-5* (100vw /375));
  }
  .inner_middle_text_box_en .inner_middle_text_box_lead.lead03 {
    margin-bottom: calc(3* (100vw /375));
  }
  .inner_middle_text_box_en .inner_middle_text_box_lead.lead05 {
    margin-bottom: calc(31* (100vw /375));
    left: 0;
  }

  .inner_top_illust_box_side .inner_top_illust_box_side_bg {
    width: calc(149* (100vw /375));
    height: calc(96* (100vw /375));
  }
  .inner_top_illust_box_center .inner_top_illust_box_center_bg {
    width: calc(151* (100vw /375));
    height: calc(110* (100vw /375));
    top: 51%;
  }
  .inner_top_illust_box_side.right .inner_top_illust_box_side_bg {
    width: calc(149* (100vw /375));
    height: calc(96* (100vw /375));
  }
  .lp_sanrio_about_us--inner_bottom_illust_box {
    width: calc(529* (100vw /375));
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
  .inner_bottom_illust_box_side {
    width: calc(167* (100vw /375));
    height: calc(124* (100vw /375));
  }
  .inner_bottom_illust_box_side .inner_bottom_illust_box_side_bg {
    width: calc(149* (100vw /375));
    height: calc(96* (100vw /375));
    top: 50%;
    left: 48.5%;
  }

  .lp_sanrio_about_us {
    margin-top: 0;
  }
  .inner_top_illust_box_center_bg_curtain {
    left: calc(4 * (100vw / 375));
    width: 100%;
  }

  .inner_top_illust_box_side.left {

  }
  .inner_top_illust_box_side.right {
    
  }
  .inner_middle_text_box_en .inner_middle_text_box_lead.lead05 span {
    letter-spacing: 0.08em;
    line-height: 1.25;
  }
  .inner_middle_text_box_en .inner_middle_text_box__bottom_box {
    padding: calc(13 * (100vw / 375)) 0 calc(12 * (100vw / 375));
  }

}

/* ===============================================### 
//////////////// アニメーション //////////////// 
###=============================================== */
/* ゆらゆら */
.anime_yurayura {
  transform-origin: center bottom;/* 足を原点に */
  animation: yurayura 2.5s linear infinite;
}
@keyframes yurayura {
  0% , 100%{
    transform: rotate(8deg);
  }
  50%{
    transform: rotate(-8deg);
  }
}

/* 上下にふわふわ */
.anime_fuwafuwa {
  transform-origin: center bottom;
  animation: fuwafuwa 2.5s linear infinite;
}
@keyframes fuwafuwa {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ぴょこぴょこ */
.anime_pyoko {
  transform-origin: center bottom;
  animation: pyokopyoko 3.0s infinite;
}

@keyframes pyokopyoko {
  0% { transform:translateY(0px); }
  50% { transform:translateY(50px); }
  100% { transform:translateY(0px); }
}

/* delay */
.delay01 {
  animation-delay: 0.5s;
  transition-delay: 0.5s;
}
.delay02 {
  animation-delay: 1s;
  transition-delay: 1s;
}

/* ===========### SP ###=========== */
@media only screen and (max-width: 767px) {
/* ぴょこぴょこ */
.anime_pyoko {
  transform-origin: center bottom;
  animation: pyokopyoko 3.0s infinite;
}

@keyframes pyokopyoko {
  0% { transform:translateY(0px); }
  50% { transform:translateY(30px); }
  100% { transform:translateY(0px); }
}

}