@charset "UTF-8";
/*==========================================================================================================
 
	common font
 
===========================================================================================================*/
/*==========================================================================================================
 
	character color
 
===========================================================================================================*/
/*==========================================================================================================
    common
===========================================================================================================*/
body {
  background-image: url("../img/lp/valentine2022/main_bg_01.png");
  background-size: cover;
  background-attachment: fixed;
  position: relative;
  padding: 0; }

@media only screen and (max-width: 768px) {
  body::after {
    content: "";
    width: 100vw;
    height: 100vh;
    background-image: url("../img/lp/valentine2022/main_bg_01_sp.png");
    background-size: cover;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: -1; } }
.area_cont {
  background-color: #ffffffa1;
  width: 70%;
  margin: 10px auto;
  padding: 1%; }

#valentine2022_shindan_main {
  background-position: center center;
  background-size: cover;
  position: relative;
  overflow: hidden; }

/*
#valentine2022_shindan_main > div {
    width: 80%;
    max-width: 1400px;
    margin: 0 auto;
	text-align: center;
}
*/
#valentine2022_shindan_main_chara > img {
  max-width: 100%;
  height: auto; }

#valentine2022_shindan_main > div > #valentine2022_shindan_main_chara {
  position: relative;
  text-align: center;
  margin-top: 40px;
  z-index: 1;
  opacity: 0;
  animation: fadeIn 1s ease 1.1s 1 forwards;
  margin-bottom: 57px; }

@media only screen and (max-width: 768px) {
  #valentine2022_shindan_main > div > #valentine2022_shindan_main_chara {
    width: 95%;
    margin: 0 auto;
    margin-bottom: 23px; }

  .animation_main {
    width: 100%; } }
@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
.btn_hw,
a.btn_hw,
button.btn_hw {
  font-size: 1.6rem;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 3rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
  margin-bottom: 50px;
  min-width: 50%; }

@media only screen and (max-width: 768px) {
  .btn_hw, a.btn_hw, button.btn_hw {
    font-size: 16px;
    min-width: 70%; } }
.btn_howto,
a.btn_howto {
  color: #fff;
  background-color: #f52b70; }

.btn_howto,
a.btn_howto {
  color: #fff;
  background-color: #f52b70; }

.btn_howto:hover,
a.btn_howto:hover {
  color: #fff;
  background: #f56500; }

.result {
  margin: 0 auto;
  text-align: center; }

.sp-img-result {
  width: 60%;
  margin-bottom: 4%;
  margin-top: 5%;
  border: 4px solid #4c2007; }

@media only screen and (max-width: 768px) {
  .sp-img-result {
    width: 100%;
    margin-bottom: 10%; } }
#content {
  max-width: 100%;
  padding: 0; }
  #content .item {
    position: absolute;
    opacity: 0;
    top: 0;
    right: 0; }
    #content .item.front {
      top: 50px; }
    #content .item.front2 {
      z-index: -1;
      top: -110px; }
    #content .item.c1 {
      top: 80px; }
    #content .item.c2 {
      top: 80px; }
    #content .item.c3 {
      top: 80px; }
    #content .item.c4 {
      top: 80px; }
    #content .item.c5 {
      top: 50px; }
    #content .item.c6 {
      top: 50px; }
    #content .item.c7 {
      top: 70px; }
    #content .item.c8 {
      top: 50px; }
    #content .item.c9 {
      top: 50px; }
    #content .item.c10 {
      top: 50px; }
    #content .item.c11 {
      top: 50px; }

#character .meta {
  position: relative;
  max-width: 1360px;
  margin: 0 auto 60px;
  padding: 0 20px; }
  #character .meta h1 {
    margin-bottom: -15px;
    margin-left: 40px;
    transition: all 0.3s ease; }
  #character .meta .catch {
    margin: 0 0 40px 200px;
    font-size: 20px;
    font-family: A1 Mincho, 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "Sawarabi Mincho", “メイリオ”, Meiryo, serif;
    line-height: 1;
    letter-spacing: .1em;
    text-shadow: 2px 2px 0px #fff;
    			/*
    			text-shadow:
        #fff 2px 0px 2px, #fff -2px 0px 2px,
        #fff 0px -2px 2px, #fff -2px 0px 2px,
        #fff 2px 2px 2px, #fff -2px 2px 2px,
        #fff 2px -2px 2px, #fff -2px -2px 2px,
        #fff 1px 2px 2px, #fff -1px 2px 2px,
        #fff 1px -2px 2px, #fff -1px -2px 2px,
        #fff 2px 1px 2px, #fff -2px 1px 2px,
        #fff 2px -1px 2px, #fff -2px -1px 2px,
        #fff 1px 1px 2px, #fff -1px 1px 2px,
        #fff 1px -1px 2px, #fff -1px -1px 2px;
        */
    color: #08718f;
    transition: all 0.3s ease; }
#character .characterFront {
  margin-bottom: 25px; }
  #character .characterFront .title {
    max-width: 1100px;
    margin: 0 auto; }
    #character .characterFront .title h2 {
      margin-bottom: 5px; }
    #character .characterFront .title .catch {
      margin: 0 0 0 50px;
      font-size: 20px;
      font-family: A1 Mincho, 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "Sawarabi Mincho", “メイリオ”, Meiryo, serif;
      line-height: 1;
      letter-spacing: .1em;
      color: #000f73;
      transition: all 0.3s ease; }
#character .group1 {
  overflow: hidden;
  height: 584px;
  margin-bottom: 50px;
  background-image: url("../img/lp/valentine2022/bg-group.png");
  background-position: center top;
  background-size: cover; }
  #character .group1 .inner {
    position: relative;
    max-width: 1100px;
    height: 584px;
    margin: 0 auto; }
    #character .group1 .inner a:hover .panel {
      opacity: 1; }
    #character .group1 .inner div.current {
      z-index: 2; }
      #character .group1 .inner div.current img.over {
        opacity: 1; }
    #character .group1 .inner div.notCurrent .char {
      opacity: 0; }
    #character .group1 .inner div img {
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
    #character .group1 .inner div .over {
      position: absolute;
      opacity: 0;
      top: 0;
      left: 0; }
    #character .group1 .inner .c1 {
      position: absolute;
      z-index: 2;
      top: 10px;
      left: 546px;
      background-image: url(../img/lp/valentine2022/c1_s.png);
      background-repeat: no-repeat; }
      #character .group1 .inner .c1 .panel {
        position: absolute;
        opacity: 0;
        top: 455px;
        left: 50%;
        margin-left: -105px;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
    #character .group1 .inner .c2 {
      position: absolute;
      top: 52px;
      left: 840px;
      background-image: url(../img/lp/valentine2022/c2_s.png);
      background-repeat: no-repeat; }
      #character .group1 .inner .c2 .panel {
        position: absolute;
        opacity: 0;
        top: 413px;
        left: 50%;
        margin-left: -105px;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
    #character .group1 .inner .c3 {
      position: absolute;
      z-index: 1;
      top: 48px;
      left: 210px;
      background-image: url(../img/lp/valentine2022/c3_s.png);
      background-repeat: no-repeat; }
    #character .group1 .inner .c3_hover {
      position: absolute;
      z-index: 2;
      top: 48px;
      left: 210px;
      width: 221px;
      height: 778px; }
      #character .group1 .inner .c3_hover .panel {
        position: absolute;
        opacity: 0;
        top: 417px;
        left: 50%;
        margin-left: -105px;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
      #character .group1 .inner .c3_hover a {
        display: block;
        width: 221px;
        height: 778px; }
    #character .group1 .inner .c4 {
      position: absolute;
      z-index: 1;
      top: 112px;
      left: 346px;
      background-image: url(../img/lp/valentine2022/c4_s.png);
      background-repeat: no-repeat; }
      #character .group1 .inner .c4 .panel {
        position: absolute;
        opacity: 0;
        top: 353px;
        left: 50%;
        margin-left: -105px;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
    #character .group1 .inner .c5 {
      position: absolute;
      z-index: 1;
      top: 31px;
      left: 772px;
      background-image: url(../img/lp/valentine2022/c5_s.png);
      background-repeat: no-repeat; }
      #character .group1 .inner .c5 .panel {
        position: absolute;
        opacity: 0;
        top: 434px;
        left: 50%;
        margin-left: -105px;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
#character .group2 {
  overflow: hidden;
  height: 584px;
  margin-bottom: 90px;
  background-image: url(../img/lp/valentine2022/bg-group.png);
  background-position: center top;
  background-size: cover; }
  #character .group2 .inner {
    position: relative;
    max-width: 1100px;
    height: 584px;
    margin: 0 auto; }
    #character .group2 .inner a:hover .panel {
      opacity: 1; }
    #character .group2 .inner h3 {
      position: absolute;
      right: 0; }
    #character .group2 .inner div.current {
      z-index: 2; }
      #character .group2 .inner div.current img.over {
        opacity: 1; }
    #character .group2 .inner div.notCurrent .char {
      opacity: 0; }
    #character .group2 .inner div img {
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
    #character .group2 .inner div .over {
      position: absolute;
      opacity: 0;
      top: 0;
      left: 0; }
    #character .group2 .inner .c6 {
      position: absolute;
      z-index: 1;
      top: 60px;
      left: 378px;
      background-image: url(../img/lp/valentine2022/c6_s.png);
      background-repeat: no-repeat; }
      #character .group2 .inner .c6 .panel {
        position: absolute;
        opacity: 0;
        top: 402px;
        left: 50%;
        margin-left: -105px;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
    #character .group2 .inner .c7 {
      position: absolute;
      top: 31px;
      left: -46px;
      background-image: url(../img/lp/valentine2022/c7_s.png);
      background-repeat: no-repeat; }
    #character .group2 .inner .c7_hover {
      position: absolute;
      z-index: 2;
      top: 31px;
      left: -6px; }
      #character .group2 .inner .c7_hover .panel {
        position: absolute;
        opacity: 0;
        top: 431px;
        left: 50%;
        margin-left: -105px;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
      #character .group2 .inner .c7_hover a {
        display: block;
        width: 176px;
        height: 758px; }
    #character .group2 .inner .c8 {
      position: absolute;
      z-index: 1;
      top: 96px;
      left: 265px;
      background-image: url(../img/lp/valentine2022/c8_s.png);
      background-repeat: no-repeat; }
      #character .group2 .inner .c8 .panel {
        position: absolute;
        opacity: 0;
        top: 366px;
        left: 50%;
        margin-left: -105px;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
    #character .group2 .inner .c9 {
      position: absolute;
      top: 29px;
      left: 59px;
      background-image: url(../img/lp/valentine2022/c9_s.png);
      background-repeat: no-repeat; }
    #character .group2 .inner .c9_hover {
      position: absolute;
      z-index: 2;
      top: 29px;
      left: 139px; }
      #character .group2 .inner .c9_hover .panel {
        position: absolute;
        opacity: 0;
        top: 433px;
        left: 50%;
        margin-left: -105px;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
      #character .group2 .inner .c9_hover a {
        display: block;
        width: 176px;
        height: 758px; }
    #character .group2 .inner .c10 {
      position: absolute;
      z-index: 1;
      top: 49px;
      left: 586px;
      background-image: url(../img/lp/valentine2022/c10_s.png);
      background-repeat: no-repeat; }
      #character .group2 .inner .c10 .panel {
        position: absolute;
        opacity: 0;
        top: 414px;
        left: 50%;
        margin-left: -105px;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
    #character .group2 .inner .c11 {
      position: absolute;
      top: 27px;
      left: 770px;
      background-image: url(../img/lp/valentine2022/c11_s.png);
      background-repeat: no-repeat; }
      #character .group2 .inner .c11 .panel {
        position: absolute;
        opacity: 0;
        top: 435px;
        left: 50%;
        margin-left: -105px;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
#character .group1SP {
  display: none; }
#character .group2SP {
  display: none; }
#character .characterList {
  display: flex;
  position: relative;
  z-index: 5;
  margin: 0 -20px;
  justify-content: space-between;
  flex-wrap: wrap; }
  #character .characterList li {
    padding: 1px;
    background: linear-gradient(#acd1e9, #f6b6c2); }
    #character .characterList li .wrap {
      padding: 5px;
      background-color: #fff; }
      #character .characterList li .wrap a {
        overflow: hidden;
        display: block;
        position: relative;
        background-color: #f6f6f6;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #character .characterList li .wrap a .image {
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        #character .characterList li .wrap a .name {
          position: absolute;
          top: 0;
          left: 0; }
    #character .characterList li:hover .wrap a .image {
      transform: scale(1.1); }
  #character .characterList::after {
    display: block;
    content: '';
    width: 182px; }
#character .characterListRed li:nth-child(1) .wrap:hover a {
  background-color: #f08300; }
#character .characterListRed li:nth-child(2) .wrap:hover a {
  background-color: #e60012; }
#character .characterListRed li:nth-child(3) .wrap:hover a {
  background-color: #00afcc; }
#character .characterListRed li:nth-child(4) .wrap:hover a {
  background-color: #f7dc01; }
#character .characterListRed li:nth-child(5) .wrap:hover a {
  background-color: #8e4898; }
#character .characterListBlue li:nth-child(1) .wrap:hover a {
  background-color: #0068b7; }
#character .characterListBlue li:nth-child(2) .wrap:hover a {
  background-color: #e4007f; }
#character .characterListBlue li:nth-child(3) .wrap:hover a {
  background-color: #7d8f9b; }
#character .characterListBlue li:nth-child(4) .wrap:hover a {
  background-color: #7054a0; }
#character .characterListBlue li:nth-child(5) .wrap:hover a {
  background-color: #ece038; }
#character .characterListBlue li:nth-child(6) .wrap:hover a {
  background-color: #afd147; }
#character .characterImage .charaBg {
  overflow: hidden;
  display: block;
  position: absolute;
  width: 100%;
  height: 770px; }
  #character .characterImage .charaBg div {
    display: block;
    content: '';
    width: 100%;
    height: 770px;
    background-image: url(../img/lp/valentine2022/bg2.jpg);
    background-position: center top;
    background-size: cover;
    transform: scale(1.2); }
    #character .characterImage .charaBg div.blue {
      background-image: url(../img/lp/valentine2022/bg3.jpg); }
#character .characterImage .inner {
  position: relative;
  max-width: 1360px;
  height: 770px;
  margin: 0 auto; }
  #character .characterImage .inner .image {
    position: absolute;
    z-index: 1;
    opacity: 0;
    top: 0;
    width: 100%;
    text-align: center;
    transform: scale(0.9); }
    #character .characterImage .inner .image.c1 {
      top: -112px; }
    #character .characterImage .inner .image.c2 {
      top: -112px; }
      @media only screen and (max-width: 768px) {
        #character .characterImage .inner .image.c2 .eye {
          position: absolute;
          left: 65%;
          transform: translateX(-50%); } }
    #character .characterImage .inner .image.c3 {
      top: -47px; }
      @media only screen and (max-width: 768px) {
        #character .characterImage .inner .image.c3 .eye {
          position: absolute;
          left: 53%;
          transform: translateX(-50%); } }
    #character .characterImage .inner .image.c4 {
      top: -20px; }
      @media only screen and (max-width: 768px) {
        #character .characterImage .inner .image.c4 .eye {
          position: absolute;
          left: 53.5%;
          transform: translateX(-50%); } }
    #character .characterImage .inner .image.c5 {
      top: -82px; }
    #character .characterImage .inner .image.c6 {
      top: -82px; }
      @media only screen and (max-width: 768px) {
        #character .characterImage .inner .image.c6 .eye {
          position: absolute;
          left: 51.9%;
          transform: translateX(-50%); } }
    #character .characterImage .inner .image.c7 {
      top: -63px; }
    #character .characterImage .inner .image.c8 {
      top: 20px; }
    #character .characterImage .inner .image.c9 {
      top: -82px; }
      @media only screen and (max-width: 768px) {
        #character .characterImage .inner .image.c9 .eye {
          position: absolute;
          left: 52%;
          transform: translateX(-50%); } }
    #character .characterImage .inner .image.c10 {
      top: -82px; }
    #character .characterImage .inner .image.c11 {
      top: -180px; }
    #character .characterImage .inner .image .eye {
      position: absolute;
      opacity: 0;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      animation-name: mepachi2;
      animation-duration: 6s;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out; }
  #character .characterImage .inner .serif {
    position: absolute;
    z-index: 2;
    opacity: 0;
    top: -30px;
    left: 0;
    max-height: 770px;
    font-size: 50px;
    font-family: A1 Mincho, 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "Sawarabi Mincho", “メイリオ”, Meiryo, serif;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    color: #000f73;
    transform: translateY(25px); }
    #character .characterImage .inner .serif span {
      writing-mode: horizontal-tb;
      letter-spacing: -0.05em;
      transform: scaleX(0.8); }
  #character .characterImage .inner .serifShadow {
    display: none;
    position: absolute;
    z-index: 1;
    opacity: 0;
    top: -29px;
    left: 1px;
    max-height: 770px;
    font-size: 50px;
    font-family: A1 Mincho, 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "Sawarabi Mincho", “メイリオ”, Meiryo, serif;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    color: #fff;
    transform: translateY(25px); }
    #character .characterImage .inner .serifShadow span {
      writing-mode: horizontal-tb;
      letter-spacing: -0.05em;
      transform: scaleX(0.8); }
  #character .characterImage .inner .name {
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0; }
    #character .characterImage .inner .name img {
      opacity: 0;
      transform: translateY(-100px); }
#character .detail {
  position: relative;
  z-index: 3;
  min-height: 1120px;
  background-color: rgba(255, 255, 255, 0.94); }
  #character .detail .inner {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px; }
    #character .detail .inner .column {
      position: relative;
      margin-bottom: 80px; }
    #character .detail .inner .share {
      position: absolute;
      top: 0;
      right: 0;
      text-align: right; }
      #character .detail .inner .share p {
        display: inline-block;
        vertical-align: middle;
        color: #000f73; }
      #character .detail .inner .share .border {
        display: inline-block;
        width: 70px;
        height: 1px;
        margin-left: 5px;
        background-color: #000f73;
        vertical-align: middle; }
      #character .detail .inner .share a {
        display: inline-block;
        margin-left: 5px;
        vertical-align: middle; }
    #character .detail .inner h2 {
      position: relative;
      top: -30px;
      margin-bottom: -30px;
      font-size: 80px;
      font-family: A1 Mincho, 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "Sawarabi Mincho", “メイリオ”, Meiryo, serif;
      font-weight: normal;
      line-height: 1.2;
      color: #000f73; }
    #character .detail .inner h3 {
      margin-bottom: 20px;
      font-size: 26px;
      font-family: 'Oswald';
      font-weight: normal;
      line-height: 1.2;
      color: #000f73; }
    #character .detail .inner .kana {
      margin-bottom: 20px;
      font-size: 16px;
      color: #000f73; }
    #character .detail .inner .cv {
      margin-bottom: 20px;
      font-size: 22px;
      color: #000f73; }
    #character .detail .inner .section {
      overflow: hidden;
      display: inline-block;
      position: relative;
      min-width: 230px;
      padding: 0 5px 0 10px;
      box-sizing: border-box;
      background-color: #f08300;
      font-size: 16px;
      color: #fff; }
      #character .detail .inner .section::before {
        display: block;
        content: '';
        position: absolute;
        top: 0;
        left: 2px;
        width: 1px;
        height: 200px;
        background-color: #fff; }
      #character .detail .inner .section.c2 {
        background-color: #e60012; }
      #character .detail .inner .section.c3 {
        background-color: #8e4898; }
      #character .detail .inner .section.c4 {
        background-color: #77ccc9; }
      #character .detail .inner .section.c5 {
        background-color: #ffd131; }
      #character .detail .inner .section.c6 {
        background-color: #1459d0; }
      #character .detail .inner .section.c7 {
        background-color: #7054a0; }
      #character .detail .inner .section.c8 {
        background-color: #f14379; }
      #character .detail .inner .section.c9 {
        background-color: #7d8f9b; }
      #character .detail .inner .section.c10 {
        background-color: #ece038; }
      #character .detail .inner .section.c11 {
        background-color: #8bbb76; }
    #character .detail .inner .position {
      margin-bottom: 20px;
      font-size: 18px;
      font-weight: bold;
      color: #000f73; }
    #character .detail .inner .logo {
      position: absolute;
      bottom: -30px;
      left: 250px; }
    #character .detail .inner .about {
      margin-bottom: 20px;
      font-size: 16px;
      line-height: 1.8;
      color: #000f73; }
    #character .detail .inner .movie {
      overflow: hidden;
      position: absolute;
      right: 0;
      top: -77px;
      border: 1px solid #000f73; }
      #character .detail .inner .movie .wrap {
        padding: 5px;
        background-color: #fff; }
        #character .detail .inner .movie .wrap a {
          display: block;
          overflow: hidden;
          position: relative; }
          #character .detail .inner .movie .wrap a .image {
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
          #character .detail .inner .movie .wrap a .play {
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
          #character .detail .inner .movie .wrap a:hover .image {
            opacity: 0.8;
            transform: scale(1.05); }
          #character .detail .inner .movie .wrap a:hover .play {
            transform: scale(0.9); }
    #character .detail .inner .characterData {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap; }
      #character .detail .inner .characterData dl {
        display: flex;
        width: 50%;
        margin-bottom: 15px; }
        #character .detail .inner .characterData dl dt {
          overflow: hidden;
          float: left;
          position: relative;
          width: 25%;
          padding: 15px;
          box-sizing: border-box;
          background-color: #b2b7d5;
          font-size: 16px;
          line-height: 1.2;
          color: #fff; }
          #character .detail .inner .characterData dl dt::before {
            display: block;
            content: '';
            position: absolute;
            top: 0;
            left: 2px;
            width: 1px;
            height: 200px;
            background-color: #fff; }
        #character .detail .inner .characterData dl dd {
          float: left;
          position: relative;
          width: 75%;
          padding: 15px;
          box-sizing: border-box;
          font-size: 16px;
          line-height: 1.2;
          color: #000f73; }

@media only screen and (max-width: 1200px) {
  #character .meta h1 {
    margin-left: 0; }
  #character .meta .catch {
    margin: 0 0 40px 160px; } }
@media only screen and (max-width: 768px) {
  #content .item.front {
    top: -21vw;
    right: -12%;
    width: calc(422/640*100%); }
    #content .item.front img {
      width: 100%; }
  #content .item.front2 {
    top: -6vw;
    right: -9%;
    width: calc(478/640*100%); }
    #content .item.front2 img {
      width: 100%; }
  #content .item.c1 {
    top: -21vw;
    right: -8%;
    width: calc(435/640*100%); }
    #content .item.c1 img {
      width: 100%; }
  #content .item.c2 {
    top: -25vw;
    right: -10%;
    width: calc(457/640*100%); }
    #content .item.c2 img {
      width: 100%; }
  #content .item.c3 {
    top: -20vw;
    right: -20%;
    width: calc(460/640*100%); }
    #content .item.c3 img {
      width: 100%; }
  #content .item.c4 {
    top: -20vw;
    right: -9%;
    width: calc(255/640*100%); }
    #content .item.c4 img {
      width: 100%; }
  #content .item.c5 {
    top: -25vw;
    right: -9%;
    width: calc(480/640*100%); }
    #content .item.c5 img {
      width: 100%; }
  #content .item.c6 {
    top: -25vw;
    right: -9%;
    width: calc(410/640*100%); }
    #content .item.c6 img {
      width: 100%; }
  #content .item.c7 {
    top: -23vw;
    right: -3%;
    width: calc(337/640*100%); }
    #content .item.c7 img {
      width: 100%; }
  #content .item.c8 {
    top: -17vw;
    right: -6%;
    width: calc(371/640*100%); }
    #content .item.c8 img {
      width: 100%; }
  #content .item.c9 {
    top: -25vw;
    right: -8%;
    width: calc(312/640*100%); }
    #content .item.c9 img {
      width: 100%; }
  #content .item.c10 {
    top: -23vw;
    right: -16%;
    width: calc(450/640*100%); }
    #content .item.c10 img {
      width: 100%; }
  #content .item.c11 {
    top: -21vw;
    right: -2%;
    width: calc(346/640*100%); }
    #content .item.c11 img {
      width: 100%; }

  #character .meta {
    z-index: 5;
    margin: 0 auto 0; }
    #character .meta h1 {
      margin-bottom: -5px;
      margin-left: 0; }
      #character .meta h1 img {
        width: calc(420/640*100%); }
    #character .meta .catch {
      margin: 0 0 20px 30%;
      font-size: 20px;
      font-size: 3.2552083333vw; }
  #character .diagram {
    padding: 20px 20px 0; }
    #character .diagram .title h2 img {
      width: calc(300/640*100%); }
    #character .diagram .title .catch {
      margin: 0 0 0 10px;
      font-size: 20px;
      font-size: 3.2552083333vw; }
    #character .diagram .image img {
      width: 100%; }
    #character .diagram .pc {
      display: none; }
    #character .diagram .sp {
      display: block; }
  #character .characterFront {
    margin: 0 20px 20px; }
    #character .characterFront .title h2 img {
      width: calc(366/640*100%); }
    #character .characterFront .title .catch {
      margin: 0 0 0 10px;
      font-size: 20px;
      font-size: 3.2552083333vw; }
  #character .group1 {
    display: none; }
  #character .group2 {
    display: none; }
  #character .characterList {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    margin: 0;
    padding: 0; }
    #character .characterList li {
      width: 32%;
      margin-bottom: 10px; }
      #character .characterList li img {
        width: 100%; }
    #character .characterList::after {
      width: 32%; }
  #character .group1SP {
    display: block;
    margin-bottom: 40px;
    padding: 20px;
    background-image: url(../img/lp/valentine2022/bg-group.jpg);
    background-position: center top;
    background-size: cover; }
    #character .group1SP h3 {
      margin-bottom: 20px;
      text-align: center; }
      #character .group1SP h3 img {
        width: calc(538/640*100%); }
  #character .group2SP {
    display: block;
    padding: 20px;
    background-image: url(../img/lp/valentine2022/bg-group2.jpg);
    background-position: center top;
    background-size: cover; }
    #character .group2SP h3 {
      margin-bottom: 20px;
      text-align: center; }
      #character .group2SP h3 img {
        width: calc(578/640*100%); }
  #character .characterImage .charaBg {
    height: 120vw; }
  #character .characterImage .inner {
    height: 120vw; }
    #character .characterImage .inner .serif {
      top: -10px;
      font-size: 36px;
      font-size: 5.859375vw; }
      #character .characterImage .inner .serif .nobr {
        display: none; }
    #character .characterImage .inner .serifShadow {
      display: block;
      top: -9px;
      font-size: 36px;
      font-size: 5.859375vw; }
      #character .characterImage .inner .serifShadow .nobr {
        display: none; }
    #character .characterImage .inner .name {
      width: 100%;
      text-align: right; }
      #character .characterImage .inner .name img {
        width: calc(279/640*100%); }
    #character .characterImage .inner .image img {
      width: calc(588/640*100%); }
    #character .characterImage .inner .image.c1 {
      top: -5%; }
    #character .characterImage .inner .image.c2 {
      top: -5%; }
      #character .characterImage .inner .image.c2 img {
        width: calc(829/640*100%);
        margin-left: -10vw; }
    #character .characterImage .inner .image.c3 {
      top: -5%; }
      #character .characterImage .inner .image.c3 img {
        width: calc(529/640*100%);
        margin-right: -6vw; }
    #character .characterImage .inner .image.c4 img {
      width: calc(685/640*100%); }
    #character .characterImage .inner .image.c5 {
      top: -5%; }
      #character .characterImage .inner .image.c5 img {
        width: calc(393/640*100%); }
    #character .characterImage .inner .image.c6 {
      top: -5%; }
      #character .characterImage .inner .image.c6 img {
        width: calc(664/640*100%); }
    #character .characterImage .inner .image.c7 {
      top: -2%; }
      #character .characterImage .inner .image.c7 img {
        width: calc(628/640*100%); }
    #character .characterImage .inner .image.c8 {
      top: 1%; }
      #character .characterImage .inner .image.c8 img {
        width: calc(532/640*100%); }
    #character .characterImage .inner .image.c9 {
      top: -2%; }
      #character .characterImage .inner .image.c9 img {
        width: calc(671/640*100%); }
    #character .characterImage .inner .image.c10 {
      top: -5%; }
      #character .characterImage .inner .image.c10 img {
        width: calc(569/640*100%); }
    #character .characterImage .inner .image.c11 {
      top: -9%; }
      #character .characterImage .inner .image.c11 img {
        width: calc(412/640*100%); }
  #character .detail .inner .column {
    position: static;
    margin-bottom: 10vw; }
  #character .detail .inner .movie {
    top: -10%;
    right: 4%;
    width: 40%;
    height: auto; }
    #character .detail .inner .movie img {
      width: 100%; }
  #character .detail .inner .share {
    position: static; }
    #character .detail .inner .share p {
      font-size: 20px;
      font-size: 3.2552083333vw; }
  #character .detail .inner h2 {
    font-size: 80px;
    font-size: 13.0208333333vw; }
  #character .detail .inner .kana {
    font-size: 20px;
    font-size: 3.2552083333vw; }
  #character .detail .inner .cv {
    font-size: 30px;
    font-size: 4.8828125vw; }
  #character .detail .inner .section {
    min-width: 180px;
    font-size: 22px;
    font-size: 3.5807291667vw; }
  #character .detail .inner .logo {
    position: relative;
    bottom: auto;
    left: auto; }
    #character .detail .inner .logo img {
      position: absolute;
      bottom: -30px;
      left: 200px; }
  #character .detail .inner h3 {
    font-size: 40px;
    font-size: 6.5104166667vw; }
  #character .detail .inner .position {
    font-size: 28px;
    font-size: 4.5572916667vw; }
  #character .detail .inner .about {
    font-size: 24px;
    font-size: 3.90625vw; }
  #character .detail .inner .characterData {
    display: block; }
    #character .detail .inner .characterData dl {
      width: 100%;
      margin-bottom: 10px; }
      #character .detail .inner .characterData dl dt {
        width: 25%;
        padding: 15px 8px;
        font-size: 16px;
        font-size: 2.6041666667vw; }
      #character .detail .inner .characterData dl dd {
        width: 75%;
        font-size: 20px;
        font-size: 3.2552083333vw; } }
#unit {
  position: relative;
  z-index: 3;
  min-height: 504px;
  background-image: url(../img/lp/valentine2022/bg.jpg);
  background-size: cover; }
  #unit .inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px; }
    #unit .inner h2 {
      position: relative;
      z-index: 1;
      top: -20px;
      margin-bottom: -20px; }
    #unit .inner .catch {
      position: relative;
      z-index: 1;
      margin: 0 0 30px 130px;
      font-size: 20px;
      font-family: A1 Mincho, 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "Sawarabi Mincho", “メイリオ”, Meiryo, serif;
      line-height: 1;
      letter-spacing: .1em;
      color: #000f73; }
    #unit .inner .logo {
      position: relative;
      z-index: 1;
      margin-bottom: 10px; }
    #unit .inner .character {
      position: absolute;
      right: 0;
      bottom: 0; }
    #unit .inner .characterList {
      display: flex;
      position: relative;
      z-index: 5;
      margin: 0 -20px;
      justify-content: space-between;
      flex-wrap: wrap; }
      #unit .inner .characterList li {
        padding: 1px;
        background: linear-gradient(#acd1e9, #f6b6c2); }
        #unit .inner .characterList li .wrap {
          padding: 5px;
          background-color: #fff; }
          #unit .inner .characterList li .wrap a {
            overflow: hidden;
            display: block;
            position: relative;
            background-color: #f6f6f6;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
            #unit .inner .characterList li .wrap a .image {
              transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
            #unit .inner .characterList li .wrap a .name {
              position: absolute;
              top: 0;
              left: 0; }
        #unit .inner .characterList li:hover .wrap a .image {
          transform: scale(1.1); }
      #unit .inner .characterList::after {
        display: block;
        content: '';
        width: 182px; }
    #unit .inner .characterListRed li:nth-child(1) .wrap:hover a {
      background-color: #f08300; }
    #unit .inner .characterListRed li:nth-child(2) .wrap:hover a {
      background-color: #e60012; }
    #unit .inner .characterListRed li:nth-child(3) .wrap:hover a {
      background-color: #00afcc; }
    #unit .inner .characterListRed li:nth-child(4) .wrap:hover a {
      background-color: #f7dc01; }
    #unit .inner .characterListRed li:nth-child(5) .wrap:hover a {
      background-color: #8e4898; }
    #unit .inner .characterListBlue li:nth-child(1) .wrap:hover a {
      background-color: #0068b7; }
    #unit .inner .characterListBlue li:nth-child(2) .wrap:hover a {
      background-color: #e4007f; }
    #unit .inner .characterListBlue li:nth-child(3) .wrap:hover a {
      background-color: #7d8f9b; }
    #unit .inner .characterListBlue li:nth-child(4) .wrap:hover a {
      background-color: #7054a0; }
    #unit .inner .characterListBlue li:nth-child(5) .wrap:hover a {
      background-color: #ece038; }
    #unit .inner .characterListBlue li:nth-child(6) .wrap:hover a {
      background-color: #afd147; }

@media only screen and (max-width: 920px) {
  #unit {
    min-height: 0;
    padding-bottom: 20px; }
    #unit .inner .character {
      right: -5%;
      top: -5%;
      bottom: auto;
      width: 80%; }
      #unit .inner .character img {
        width: 100%; }
    #unit .inner .characterList {
      position: relative;
      top: auto;
      left: auto;
      width: 100%;
      margin: 0;
      padding: 0; }
      #unit .inner .characterList li {
        width: 32%;
        margin-bottom: 10px; }
        #unit .inner .characterList li img {
          width: 100%; }
      #unit .inner .characterList::after {
        width: 32%; } }
@media only screen and (max-width: 768px) {
  #unit {
    min-height: 0;
    padding-bottom: 20px; }
    #unit .inner h2 img {
      width: calc(300/640*100%); }
    #unit .inner .catch {
      margin: 0 0 50px 30%;
      font-size: 20px;
      font-size: 3.2552083333vw; }
    #unit .inner .logo img {
      width: 100%; }
    #unit .inner .character {
      right: -3%;
      top: -5%;
      bottom: auto;
      width: 80%; }
      #unit .inner .character img {
        width: 100%; }
    #unit .inner .characterList {
      position: relative;
      top: auto;
      left: auto;
      width: 100%;
      margin: 0;
      padding: 0; }
      #unit .inner .characterList li {
        width: 32%;
        margin-bottom: 10px; }
        #unit .inner .characterList li img {
          width: 100%; }
      #unit .inner .characterList::after {
        width: 32%; } }
#other {
  margin: 0 auto 100px; }
  #other .inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 20px; }
  #other h2 {
    position: relative; }
  #other .catch {
    margin: 0 0 -100px 130px;
    font-size: 20px;
    font-family: A1 Mincho, 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "Sawarabi Mincho", “メイリオ”, Meiryo, serif;
    line-height: 1;
    letter-spacing: .1em;
    color: #000f73; }
  #other .image {
    margin-bottom: 50px;
    text-align: center; }
    #other .image .pc {
      display: block; }
      #other .image .pc img {
        max-width: 100%; }
    #other .image .sp {
      display: none; }

@media only screen and (max-width: 768px) {
  #other {
    padding: 40px 0; }
    #other .inner {
      padding: 0; }
      #other .inner h2 {
        margin-left: 20px; }
        #other .inner h2 img {
          width: calc(404/640*100%); }
      #other .inner .catch {
        margin: 0 0 10px 30%;
        font-size: 20px;
        font-size: 3.2552083333vw; }
    #other .image .pc {
      display: none; }
    #other .image .sp {
      display: block; }
      #other .image .sp img {
        width: 100%; } }
#container {
  position: relative;
  height: 369px;
  margin: 10% auto;
  width: 50%;
  background-color: #fffef1cf;
  border-radius: 23px; }

.choko_box_ha {
  background-image: url("/assets/img/lp/valentine2022/box_01.png");
  background-size: cover;
  width: 355px;
  height: 345px;
  animation: wobbling_x 0.8s ease-in-out infinite alternate, wobbling_y 1.1s ease-in-out infinite alternate; }

.choko_box_ri {
  background-image: url("/assets/img/lp/valentine2022/box_02.png");
  background-size: cover;
  width: 355px;
  height: 345px;
  animation: wobbling_x 0.8s ease-in-out infinite alternate, wobbling_y 1.1s ease-in-out infinite alternate; }

.choko_box_mi {
  background-image: url("/assets/img/lp/valentine2022/box_03.png");
  background-size: cover;
  width: 355px;
  height: 345px;
  animation: wobbling_x 0.8s ease-in-out infinite alternate, wobbling_y 1.1s ease-in-out infinite alternate; }

.choko_box_lu {
  background-image: url("/assets/img/lp/valentine2022/box_04.png");
  background-size: cover;
  width: 355px;
  height: 345px;
  animation: wobbling_x 0.8s ease-in-out infinite alternate, wobbling_y 1.1s ease-in-out infinite alternate; }

.choko_box_sa {
  background-image: url("/assets/img/lp/valentine2022/box_05.png");
  background-size: cover;
  width: 355px;
  height: 345px;
  animation: wobbling_x 0.8s ease-in-out infinite alternate, wobbling_y 1.1s ease-in-out infinite alternate; }

.choko_box_ma {
  background-image: url("/assets/img/lp/valentine2022/box_06.png");
  background-size: cover;
  width: 355px;
  height: 345px;
  animation: wobbling_x 0.8s ease-in-out infinite alternate, wobbling_y 1.1s ease-in-out infinite alternate; }

.choko_box_mit {
  background-image: url("/assets/img/lp/valentine2022/box_07.png");
  background-size: cover;
  width: 355px;
  height: 345px;
  animation: wobbling_x 0.8s ease-in-out infinite alternate, wobbling_y 1.1s ease-in-out infinite alternate; }

.choko_box_aki {
  background-image: url("/assets/img/lp/valentine2022/box_08.png");
  background-size: cover;
  width: 355px;
  height: 345px;
  animation: wobbling_x 0.8s ease-in-out infinite alternate, wobbling_y 1.1s ease-in-out infinite alternate; }

.choko_box_asa {
  background-image: url("/assets/img/lp/valentine2022/box_09.png");
  background-size: cover;
  width: 355px;
  height: 345px;
  animation: wobbling_x 0.8s ease-in-out infinite alternate, wobbling_y 1.1s ease-in-out infinite alternate; }

.choko_box_neko {
  background-image: url("/assets/img/lp/valentine2022/box_10.png");
  background-size: cover;
  width: 355px;
  height: 345px;
  animation: wobbling_x 0.8s ease-in-out infinite alternate, wobbling_y 1.1s ease-in-out infinite alternate; }

.choko_box_fu {
  background-image: url("/assets/img/lp/valentine2022/box_11.png");
  background-size: cover;
  width: 355px;
  height: 345px;
  animation: wobbling_x 0.8s ease-in-out infinite alternate, wobbling_y 1.1s ease-in-out infinite alternate; }

.text {
  position: absolute;
  left: 51%;
  top: 42%;
  font-size: 29px;
  animation: wobbling_x 0.7s ease-in-out infinite alternate, wobbling_y 1.2s ease-in-out infinite alternate; }

@media only screen and (max-width: 768px) {
  #container {
    width: 94%;
    padding-top: 18%; }

  .choko_box_ha, .choko_box_ri, .choko_box_mi, .choko_box_sa, .choko_box_lu, .choko_box_ma, .choko_box_mit, .choko_box_aki, .choko_box_asa, .choko_box_neko, .choko_box_fu {
    width: 210px;
    height: 206px; }

  .text {
    left: 54%;
    top: 42%;
    font-size: 18px; } }
@keyframes wobbling_x {
  0% {
    margin-left: 8px; }
  100% {
    margin-left: 0px; } }
@keyframes wobbling_y {
  0% {
    margin-top: 0px; }
  100% {
    margin-top: 8px; } }
.bn_area {
  text-align: center;
  margin: 10% auto; }

.bn_area img {
  max-width: 338px;
  padding-right: 20px; }

@media only screen and (max-width: 768px) {
  .bn_area img {
    max-width: 338px;
    padding-right: 0px;
    padding-bottom: 20px; } }
.anime_signal {
  position: absolute;
  transform: translate(-50%, -50%);
  display: block;
  cursor: pointer;
  -webkit-animation: anime_signal 1.5s infinite;
  animation: anime_signal 1.5s infinite;
  text-align: center; }

.anime_signal:hover {
  -webkit-animation-play-state: paused;
  animation-play-state: paused; }

@-webkit-keyframes anime_signal {
  0% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8); }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-box-shadow: 0 0 0 50px rgba(233, 30, 99, 0);
    box-shadow: 0 0 0 50px rgba(233, 30, 99, 0); }
  100% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-box-shadow: 0 0 0 0 rgba(233, 30, 99, 0);
    box-shadow: 0 0 0 0 rgba(233, 30, 99, 0); } }
@keyframes anime_signal {
  0% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8); }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-box-shadow: 0 0 0 50px rgba(233, 30, 99, 0);
    box-shadow: 0 0 0 50px rgba(233, 30, 99, 0); }
  100% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-box-shadow: 0 0 0 0 rgba(233, 30, 99, 0);
    box-shadow: 0 0 0 0 rgba(233, 30, 99, 0); } }
.cha_color {
  margin-top: 7%;
  background-color: #7c3b3b !important; }

.star {
  animation: kirakira 8s linear;
  color: #fd6b8640;
  display: inline-block;
  height: 1em;
  line-height: 1em;
  position: fixed;
  top: -1em;
  z-index: 2; }

@keyframes kirakira {
  0% {
    transform: translateY(calc(100vh + 1em)) scale(0.3); }
  100% {
    transform: translateY(0) scale(1.5); } }