@charset "UTF-8";
/* Scss Document */
/* Scss Document */
/*---------------
   追加 reset
---------------*/
/**,
*::before,
*::after {
	@include css3(box-sizing, border-box);
}*/
a {
  color: inherit;
  text-decoration: none; }
  a:visited {
    color: inherit; }

li {
  list-style: none; }

p {
  margin: 0;
  padding: 0; }

/*---------------
   共通
---------------*/
@media screen and (min-width: 1200px) {
  html {
    font-size: 62.5%; } }

body {
  width: 100%;
  overflow-x: hidden;
  color: #333;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: calc((26/750)*100vw);
  font-weight: 500;
  line-height: 1.692;
  -webkit-font-feature-settings: "palt";
  -moz-font-feature-settings: "palt";
  -ms-font-feature-settings: "palt";
  -o-font-feature-settings: "palt";
  font-feature-settings: "palt"; }
  @media screen and (min-width: 768px), print {
    body {
      font-size: calc((14/1200)*100vw);
      letter-spacing: .05em;
      line-height: 2.143; } }
  @media screen and (min-width: 1200px) {
    body {
      font-size: 1.4rem; } }

a:hover img {
  opacity: .46;
  transition: .5s; }

img {
  max-width: 100%; }

@media screen and (min-width: 768px), print {
  .sp {
    display: none; } }

.pc {
  display: none; }
  @media screen and (min-width: 768px), print {
    .pc {
      display: inherit !important; } }

.conteiner {
  margin-top: calc((-120/750)*100vw);
  padding-top: calc((120/750)*100vw); }

.content {
  position: relative; }
  .content.bg-top:before {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(0, -95%);
    content: '';
    width: 100%;
    height: calc((100/750)*100vw);
    background: url("../images/content_bg_top_sp.png") top center no-repeat;
    background-size: 100% auto; }
    @media screen and (min-width: 768px), print {
      .content.bg-top:before {
        height: calc((150/1200)*100vw);
        background: url("../images/content_bg_top_pc.png") top center no-repeat;
        background-size: 100% auto; } }
    @media screen and (min-width: 1200px) {
      .content.bg-top:before {
        height: 150px; } }
  .content.bg-top .content-lttl {
    padding-top: calc((70/750)*100vw); }
    @media screen and (min-width: 768px), print {
      .content.bg-top .content-lttl {
        padding-top: 0; } }
  .content.bg-top01:before {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(0, -100%);
    content: '';
    width: 100%;
    height: calc((100/750)*100vw);
    background: url("../images/content_bg01_top_sp.png") top center no-repeat;
    background-size: 100% auto; }
    @media screen and (min-width: 768px), print {
      .content.bg-top01:before {
        height: calc((150/1200)*100vw);
        background: url("../images/content_bg01_top_pc.png") top center no-repeat;
        background-size: 100% auto; } }
    @media screen and (min-width: 1200px) {
      .content.bg-top01:before {
        height: 150px; } }
  .content.bg-bottom {
    padding-bottom: calc((80/750)*100vw); }
    @media screen and (min-width: 768px), print {
      .content.bg-bottom {
        padding-bottom: calc((50/1200)*100vw); } }
    @media screen and (min-width: 1200px) {
      .content.bg-bottom {
        padding-bottom: 50px; } }
    .content.bg-bottom:after {
      position: absolute;
      bottom: 0;
      left: 0;
      transform: translate(0, 95%);
      content: '';
      width: 100%;
      height: calc((100/750)*100vw);
      background: url("../images/content_bg_bottom_sp.png") bottom center no-repeat;
      background-size: 100% auto;
      z-index: 99; }
      @media screen and (min-width: 768px), print {
        .content.bg-bottom:after {
          height: calc((150/1200)*100vw);
          background: url("../images/content_bg_bottom_pc.png") bottom center no-repeat;
          background-size: 100% auto; } }
      @media screen and (min-width: 1200px) {
        .content.bg-bottom:after {
          height: 150px; } }
  .content-lttl {
    margin-bottom: calc((70/750)*100vw);
    text-align: center; }
    @media screen and (min-width: 768px), print {
      .content-lttl {
        width: calc((590/1200)*100vw);
        margin: 0 auto calc((50/1200)*100vw);
        padding: calc((20/1200)*100vw); } }
    @media screen and (min-width: 1200px) {
      .content-lttl {
        width: 590px;
        margin: 0 auto 50px;
        padding-top: 20px; } }
  .content-mttl {
    margin-bottom: 1em;
    font-size: calc((34/750)*100vw);
    line-height: 1.475; }
    @media screen and (min-width: 768px), print {
      .content-mttl {
        font-size: calc((24/1200)*100vw);
        line-height: 1.5; } }
    @media screen and (min-width: 1200px) {
      .content-mttl {
        font-size: 2.4rem; } }

.inner {
  overflow: hidden;
  padding: calc((35/750)*100vw);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box; }
  @media screen and (min-width: 768px), print {
    .inner {
      padding: 0 calc((80/1200)*100vw); } }
  @media screen and (min-width: 1200px) {
    .inner {
      width: 1200px;
      margin: 0 auto;
      padding: 0 80px; } }

.btn a {
  position: relative;
  display: block;
  width: calc((500/750)*100vw);
  margin: calc((50/750)*100vw) auto calc((7/750)*100vw);
  padding: .5em;
  background: #9F8D6B;
  box-shadow: 0 0 0 2px #fff, 0 0 0 calc((7/750)*100vw) #9F8D6B;
  color: #FFF;
  text-align: center; }
  @media screen and (min-width: 768px), print {
    .btn a {
      width: calc((350/1200)*100vw);
      margin: calc((25/1200)*100vw) auto calc((7/1200)*100vw);
      box-shadow: 0 0 0 2px #fff, 0 0 0 calc((7/1200)*100vw) #9F8D6B; } }
  @media screen and (min-width: 1200px) {
    .btn a {
      width: 350px;
      margin: 25px auto 7px;
      box-shadow: 0 0 0 2px #fff, 0 0 0 7px #9F8D6B; } }
  .btn a:after {
    position: absolute;
    top: 43%;
    right: calc((20/750)*100vw);
    content: '';
    width: 0;
    height: 0;
    border: transparent calc((8/750)*100vw) solid;
    border-left: #FFF calc((8/750)*100vw) solid; }
    @media screen and (min-width: 768px), print {
      .btn a:after {
        right: 20px;
        border: transparent calc((5/1200)*100vw) solid;
        border-left: #FFF calc((5/1200)*100vw) solid; } }
    @media screen and (min-width: 1200px) {
      .btn a:after {
        border: transparent 5px solid;
        border-left: #FFF 5px solid; } }
  .btn a:hover {
    opacity: .46;
    transition: .5s; }

.menu {
  display: none; }
  .menu.fixed {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9999; }
    @media screen and (min-width: 768px), print {
      .menu.fixed {
        display: none; } }
  .menu .drawer_button {
    position: fixed;
    top: 0;
    right: 0;
    width: calc((120/750)*100vw);
    height: calc((120/750)*100vw);
    background: url("../images/menu_open.png") top center no-repeat;
    background-size: contain;
    border: none;
    cursor: pointer;
    z-index: 9999;
    outline: none; }
    .menu .drawer_button.active {
      background: url("../images/menu_close.png") top center no-repeat;
      background-size: contain; }
  .menu .drawer_menu_wrapper {
    position: fixed;
    top: 0;
    right: 0;
    transition: all 0.2s;
    transform: translate(100vw);
    width: 100vw;
    padding-top: calc((120/750)*100vw);
    background-color: #2F57DF;
    z-index: 1000; }
    .menu .drawer_menu_wrapper.open {
      transform: translate(0); }
    .menu .drawer_menu_wrapper .drawer_menu li {
      position: relative;
      width: 100%;
      border-bottom: #77BAEE 2px solid;
      color: #FFF;
      font-size: calc((25/750)*100vw); }
      .menu .drawer_menu_wrapper .drawer_menu li:first-child {
        border-top: #77BAEE 2px solid; }
      .menu .drawer_menu_wrapper .drawer_menu li:after {
        position: absolute;
        top: 43%;
        right: calc((30/750)*100vw);
        content: '';
        width: 0;
        height: 0;
        border: transparent calc((8/750)*100vw) solid;
        border-left: #FFF calc((8/750)*100vw) solid; }
      .menu .drawer_menu_wrapper .drawer_menu li a {
        display: block;
        padding: .7em 1em .5em; }
      .menu .drawer_menu_wrapper .drawer_menu li .menu_text_img {
        display: block;
        width: calc((500/750)*100vw);
        padding: .2em 0; }
  .menu .sns {
    padding: calc((40/750)*100vw);
    text-align: center; }
    .menu .sns li {
      display: inline-block;
      width: calc((60/750)*100vw);
      margin: 0 calc((10/750)*100vw); }

.mv {
  position: relative;
  background: url("../images/mv_bg_sp.jpg") top center no-repeat, #00385E;
  background-size: contain; }
  @media screen and (min-width: 768px), print {
    .mv {
      background: url("../images/mv_bg_pc.jpg") top center no-repeat, #00385E; } }
  .mv .inner {
    padding: calc((10/750)*100vw); }
    @media screen and (min-width: 768px), print {
      .mv .inner {
        padding: 0; } }
  .mv-fadein {
    opacity: 0; }
@keyframes fadein {
  100% {
    opacity: 1; } }
  .mv-changeLogo {
    width: calc((250/750)*100vw);
    margin-left: auto;
    z-index: 10000; }
    @media screen and (min-width: 768px), print {
      .mv-changeLogo {
        position: absolute;
        top: calc((7/1200)*100vw);
        left: calc((7/1200)*100vw);
        width: calc((210/1200)*100vw); } }
    @media screen and (min-width: 1200px) {
      .mv-changeLogo {
        top: 7px;
        left: 7px;
        width: 210px; } }
  .mv-catch {
    -webkit-animation: fadein 2s ease 1s forwards;
    -moz-animation: fadein 2s ease 1s forwards;
    -ms-animation: fadein 2s ease 1s forwards;
    -o-animation: fadein 2s ease 1s forwards;
    animation: fadein 2s ease 1s forwards;
    padding: 10vw 0 0;
    text-align: center; }
    @media screen and (min-width: 768px), print {
      .mv-catch {
        padding: calc((140/1200)*100vw) 0 0; } }
    @media screen and (min-width: 1200px) {
      .mv-catch {
        padding: 70px 0 0; } }
    .mv-catch img {
      width: calc((544/750)*100vw); }
      @media screen and (min-width: 768px), print {
        .mv-catch img {
          width: calc((891/1200)*100vw);
          margin: 0 auto; } }
      @media screen and (min-width: 1200px) {
        .mv-catch img {
          width: auto; } }
  .mv-character {
    -webkit-animation: fadein 2s ease 2s forwards;
    -moz-animation: fadein 2s ease 2s forwards;
    -ms-animation: fadein 2s ease 2s forwards;
    -o-animation: fadein 2s ease 2s forwards;
    animation: fadein 2s ease 2s forwards;
    text-align: center; }
    @media screen and (min-width: 768px), print {
      .mv-character {
        margin-top: calc((-280/1200)*100vw) x; } }
    @media screen and (min-width: 1200px) {
      .mv-character {
        margin-top: -280px; } }
    .mv-character img {
      width: calc((706/750)*100vw); }
      @media screen and (min-width: 768px), print {
        .mv-character img {
          width: calc((528/1200)*100vw);
          margin: 0 auto; } }
      @media screen and (min-width: 1200px) {
        .mv-character img {
          width: 528px; } }
  .mv-ttl {
    -webkit-animation: fadein 2s ease 3s forwards;
    -moz-animation: fadein 2s ease 3s forwards;
    -ms-animation: fadein 2s ease 3s forwards;
    -o-animation: fadein 2s ease 3s forwards;
    animation: fadein 2s ease 3s forwards;
    margin: -23vw auto 0;
    text-align: center; }
    @media screen and (min-width: 768px), print {
      .mv-ttl {
        margin: calc((-220/1200)*100vw) 0 0; } }
    @media screen and (min-width: 1200px), print {
      .mv-ttl {
        margin: -220px 0 0; } }
    @media screen and (min-width: 768px), print {
      .mv-ttl img {
        width: calc((640/1200)*100vw); } }
    @media screen and (min-width: 1200px) {
      .mv-ttl img {
        width: 640px; } }
  .mv-text {
    color: #FFF;
    text-align: center;
    line-height: 1.6; }
    .mv-text-wrap {
      -webkit-animation: fadein 2s ease 4s forwards;
      -moz-animation: fadein 2s ease 4s forwards;
      -ms-animation: fadein 2s ease 4s forwards;
      -o-animation: fadein 2s ease 4s forwards;
      animation: fadein 2s ease 4s forwards; }
    .mv-text-01 {
      margin-bottom: .5em; }
      @media screen and (min-width: 768px), print {
        .mv-text-01 {
          margin: -1em 0 .5em;
          font-size: calc((20/1200)*100vw); } }
      @media screen and (min-width: 1200px) {
        .mv-text-01 {
          font-size: 20px; } }
    .mv-text-02 {
      font-size: calc((22/750)*100vw); }
      @media screen and (min-width: 768px), print {
        .mv-text-02 {
          font-size: calc((16/1200)*100vw); } }
      @media screen and (min-width: 1200px) {
        .mv-text-02 {
          font-size: 16px; } }
      .mv-text-02 .name {
        font-size: calc((38/750)*100vw); }
        @media screen and (min-width: 768px), print {
          .mv-text-02 .name {
            font-size: calc((28/1200)*100vw); } }
        @media screen and (min-width: 1200px) {
          .mv-text-02 .name {
            font-size: 28px; } }
    @media screen and (min-width: 768px), print {
      .mv-text-03 {
        width: calc((570/1200)*100vw);
        margin: 0 auto; } }

.about .content {
  padding: calc((70/750)*100vw) 0 5vw;
  background: url("../images/about_content_bg_sp.png") left 94% no-repeat;
  background-size: calc((884/750)*100vw); }
  @media screen and (min-width: 768px), print {
    .about .content {
      padding: 0;
      padding-top: 0;
      background: url("../images/about_content_bg_pc.png") calc((30/1200)*100vw) center no-repeat;
      background-size: calc((1240/1200)*100vw); } }
  @media screen and (min-width: 1200px) {
    .about .content {
      background: url("../images/about_content_bg_pc.png") center 70% no-repeat;
      background-size: 1240px; } }
  .about .content:after {
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translate(0, 80%);
    content: '';
    width: 100%;
    height: calc((190/750)*100vw);
    background: url("../images/about_bg_sp.png") bottom center no-repeat;
    background-size: 100% auto;
    z-index: 99; }
    @media screen and (min-width: 768px), print {
      .about .content:after {
        background: url("../images/about_bg_pc.png") bottom center no-repeat;
        height: calc((400/1200)*100vw); } }
    @media screen and (min-width: 1200px) {
      .about .content:after {
        height: 280px; } }
  .about .content-lttl {
    -webkit-animation: fadein 2s ease 5s forwards;
    -moz-animation: fadein 2s ease 5s forwards;
    -ms-animation: fadein 2s ease 5s forwards;
    -o-animation: fadein 2s ease 5s forwards;
    animation: fadein 2s ease 5s forwards; }
  .about .content-text {
    margin-bottom: calc((90/750)*100vw);
    color: #FFF;
    line-height: 1.929; }
    @media screen and (min-width: 768px), print {
      .about .content-text {
        margin-bottom: calc((80/1200)*100vw);
        text-align: center;
        line-height: 2.357; } }
    @media screen and (min-width: 1200px) {
      .about .content-text {
        margin-bottom: 80px; } }
  .about .content .movie {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    margin: 0 auto calc((140/750)*100vw);
    margin-bottom: 13.75%;
    text-align: center; }
    @media screen and (min-width: 768px), print {
      .about .content .movie {
        width: calc((750/1200)*100vw);
        margin-bottom: 0;
        padding-top: 49.25%; } }
    @media screen and (min-width: 1200px), print {
      .about .content .movie {
        width: 750px; } }
  .about .content .movie iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%; }
    @media screen and (min-width: 768px), print {
      .about .content .movie iframe {
        width: calc((750/1200)*100vw);
        height: calc((440/1200)*100vw); } }
    @media screen and (min-width: 1200px), print {
      .about .content .movie iframe {
        width: 750px;
        height: 440px; }
       }
.about .inner {
  padding: 0 calc((35/750)*100vw);
  background: url("../images/content_bg_point_sp_01.png") top left calc((60/750)*100vw) no-repeat, url("../images/content_bg_point_sp_02.png") top right calc((30/750)*100vw) no-repeat;
  background-size: calc((66/750)*100vw), calc((98/750)*100vw); }
  @media screen and (min-width: 768px), print {
    .about .inner {
      padding: 0 calc((80/1200)*100vw);
      background: none; } }
  @media screen and (min-width: 1200px) {
    .about .inner {
      padding: 0 80px; } }

.story .content {
  padding: 25vw 0;
  background: url("../images/content_bg.png"); }
  @media screen and (min-width: 768px), print {
    .story .content {
      padding: calc((350/1200)*100vw) 0; } }
  @media screen and (min-width: 1200px) {
    .story .content {
      padding: 250px 0; } }
  .story .content-mttl {
    color: #00385E; }
  .story .content-text {
    color: #00385E; }
@media screen and (min-width: 1200px) {
  .story .inner {
    overflow: visible; } }
.story-content {
  padding-top: calc((100/750)*100vw); }
  @media screen and (min-width: 768px), print {
    .story-content {
      -webkit-display: flex;
      -moz-display: flex;
      -ms-display: flex;
      -o-display: flex;
      display: flex;
      -webkit-align-items: center;
      -moz-align-items: center;
      -ms-align-items: center;
      -o-align-items: center;
      align-items: center;
      justify-content: space-between;
      padding-top: calc((50/1200)*100vw); } }
  @media screen and (min-width: 1200px) {
    .story-content {
      padding-top: 50px; } }
  .story-content-01 {
    position: relative;
    margin-top: calc((-100/750)*100vw); }
    @media screen and (min-width: 768px), print {
      .story-content-01 {
        margin-top: calc((-50/1200)*100vw); } }
    @media screen and (min-width: 1200px) {
      .story-content-01 {
        margin-top: -50px; } }
    .story-content-01:before {
      position: absolute;
      top: 0;
      right: calc((-65/750)*100vw);
      content: '';
      width: calc((238/750)*100vw);
      height: calc((192/750)*100vw);
      background: url("../images/content_bg_point_sp_05.png") top right no-repeat;
      background-size: contain; }
      @media screen and (min-width: 768px), print {
        .story-content-01:before {
          right: calc((-85/1200)*100vw);
          width: calc((237/1200)*100vw);
          height: calc((192/1200)*100vw); } }
      @media screen and (min-width: 1200px) {
        .story-content-01:before {
          right: -85px;
          width: 237px;
          height: 192px; } }
    @media screen and (min-width: 768px), print {
      .story-content-01 {
        margin-top: calc((-50/1200)*100vw); } }
    @media screen and (min-width: 1200px) {
      .story-content-01 {
        margin-top: -50px; } }
  .story-content-02 {
    position: relative; }
    .story-content-02:before {
      position: absolute;
      top: 0;
      left: calc((-70/750)*100vw);
      content: '';
      width: calc((186/750)*100vw);
      height: calc((190/750)*100vw);
      background: url("../images/content_bg_point_sp_06.png") top right no-repeat;
      background-size: contain; }
      @media screen and (min-width: 768px), print {
        .story-content-02:before {
          top: auto;
          bottom: calc((-40/1200)*100vw);
          left: calc((-110/1200)*100vw);
          width: calc((184/1200)*100vw);
          height: calc((190/1200)*100vw); } }
      @media screen and (min-width: 1200px) {
        .story-content-02:before {
          bottom: -40px;
          left: -110px;
          width: 184px;
          height: 190px; } }
  .story-content-03 {
    position: relative; }
    .story-content-03:before {
      position: absolute;
      top: 0;
      right: calc((-75/750)*100vw);
      content: '';
      width: calc((206/750)*100vw);
      height: calc((178/750)*100vw);
      background: url("../images/content_bg_point_sp_07.png") top right no-repeat;
      background-size: contain; }
      @media screen and (min-width: 768px), print {
        .story-content-03:before {
          top: auto;
          bottom: 0;
          right: calc((-110/1200)*100vw);
          width: calc((202/1200)*100vw);
          height: calc((178/1200)*100vw); } }
      @media screen and (min-width: 1200px) {
        .story-content-03:before {
          right: -110px;
          width: 202px;
          height: 178px; } }
  .story-content-img {
    margin-bottom: calc((30/750)*100vw);
    z-index: 999; }
    @media screen and (min-width: 768px), print {
      .story-content-img {
        width: calc((520/1200)*100vw);
        margin-bottom: 0; } }
    @media screen and (min-width: 1200px) {
      .story-content-img {
        width: 520px; } }
  @media screen and (min-width: 768px), print {
    .story-content-textarea {
      width: calc((480/1200)*100vw); } }
  @media screen and (min-width: 1200px) {
    .story-content-textarea {
      width: 480px; } }
  @media screen and (min-width: 768px), print {
    .story-content:nth-of-type(even) .story-content-img {
      order: 2; } }
  @media screen and (min-width: 768px), print {
    .story-content:nth-of-type(even) .story-content-textarea {
      order: 1; } }
  @media screen and (min-width: 768px), print {
    .story-content:last-of-type {
      margin-bottom: 0; } }

.character .content {
  background: #4A92D1;
  padding-bottom: 0; }
  .character .content-mttl {
    margin-bottom: .5em;
    color: #FFFDB8;
    letter-spacing: .1em; }
    @media screen and (min-width: 768px), print {
      .character .content-mttl {
        letter-spacing: .2em; } }
  .character .content-text {
    margin-bottom: 1.5em;
    color: #FFF; }
@media screen and (min-width: 768px), print {
  .character .inner {
    padding-bottom: calc((50/1200)*100vw);
    background: url("../images/content_bg_point_pc_01.png") top 20px center no-repeat, url("../images/content_bg_point_pc_01.png") bottom 20px center no-repeat;
    background-size: calc((1114/1200)*100vw), calc((1114/1200)*100vw); } }
@media screen and (min-width: 1200px) {
  .character .inner {
    background-size: 1114px, 1114px; } }
.character .cahacter-list {
  -webkit-display: flex;
  -moz-display: flex;
  -ms-display: flex;
  -o-display: flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: space-between; }
  .character .cahacter-list:last-child {
    margin-bottom: 0; }
  .character .cahacter-list li {
    position: relative; }
    @media screen and (min-width: 768px), print {
      .character .cahacter-list li {
        width: 100%; } }
  .character .cahacter-list-01 {
    padding-bottom: calc((30/750)*100vw);
    background: url("../images/content_bg_point_sp_01.png") bottom 0 left 0 no-repeat, url("../images/content_bg_point_sp_02.png") bottom 0 right 0 no-repeat;
    background-size: calc((66/750)*100vw), calc((98/750)*100vw); }
    @media screen and (min-width: 768px), print {
      .character .cahacter-list-01 {
        margin-bottom: calc((100/1200)*100vw);
        padding-bottom: 0;
        background: none; } }
    @media screen and (min-width: 1200px) {
      .character .cahacter-list-01 {
        margin-bottom: 80px; } }
    .character .cahacter-list-01 li {
      width: 100%;
      margin-bottom: calc((80/750)*100vw);
      padding-bottom: calc((200/750)*100vw); }
      @media screen and (min-width: 768px), print {
        .character .cahacter-list-01 li {
          width: calc((300/1200)*100vw);
          margin-bottom: 0;
          padding-bottom: calc((120/1200)*100vw); } }
      @media screen and (min-width: 1200px) {
        .character .cahacter-list-01 li {
          width: 300px;
          padding-bottom: 120px; } }
  @media screen and (min-width: 768px), print {
    .character .cahacter-list-02, .character .cahacter-list-03 {
      justify-content: center;
      margin-bottom: calc((80/1200)*100vw); } }
  @media screen and (min-width: 1200px) {
    .character .cahacter-list-02, .character .cahacter-list-03 {
      margin-bottom: 80px; } }
  .character .cahacter-list-02 li, .character .cahacter-list-03 li {
    width: calc((300/750)*100vw);
    padding-bottom: calc((140/750)*100vw); }
    @media screen and (min-width: 768px), print {
      .character .cahacter-list-02 li, .character .cahacter-list-03 li {
        width: calc((300/1200)*100vw);
        margin: 0 calc((30/1200)*100vw);
        padding-bottom: calc((120/1200)*100vw); } }
    @media screen and (min-width: 1200px) {
      .character .cahacter-list-02 li, .character .cahacter-list-03 li {
        width: 300px;
        margin: 0 30px;
        padding-bottom: 120px; } }
    .character .cahacter-list-02 li .character-img, .character .cahacter-list-03 li .character-img {
      width: 100%;
      margin-bottom: calc((20/750)*100vw); }
      @media screen and (min-width: 768px), print {
        .character .cahacter-list-02 li .character-img, .character .cahacter-list-03 li .character-img {
          margin-bottom: .5em; } }
    .character .cahacter-list-02 li .character-cv, .character .cahacter-list-03 li .character-cv {
      justify-content: space-between; }
      @media screen and (min-width: 768px), print {
        .character .cahacter-list-02 li .character-cv, .character .cahacter-list-03 li .character-cv {
          justify-content: flex-start; } }
      .character .cahacter-list-02 li .character-cv-img, .character .cahacter-list-03 li .character-cv-img {
        width: calc((130/750)*100vw);
        margin: 0; }
        @media screen and (min-width: 768px), print {
          .character .cahacter-list-02 li .character-cv-img, .character .cahacter-list-03 li .character-cv-img {
            width: calc((110/1200)*100vw);
            margin: 0 calc((15/1200)*100vw) 0 0; } }
        @media screen and (min-width: 1200px) {
          .character .cahacter-list-02 li .character-cv-img, .character .cahacter-list-03 li .character-cv-img {
            width: 110px;
            margin: 0 15px 0 0; } }
      .character .cahacter-list-02 li .character-cv-text, .character .cahacter-list-03 li .character-cv-text {
        width: calc((150/750)*100vw);
        margin: 0; }
        @media screen and (min-width: 768px), print {
          .character .cahacter-list-02 li .character-cv-text, .character .cahacter-list-03 li .character-cv-text {
            width: calc((160/1200)*100vw);
            margin: 0;
            font-size: calc((14/1200)*100vw); } }
        @media screen and (min-width: 1200px) {
          .character .cahacter-list-02 li .character-cv-text, .character .cahacter-list-03 li .character-cv-text {
            width: 160px;
            font-size: 1.4rem; } }
  .character .cahacter-list-02 {
    margin-top: calc((-30/750)*100vw);
    padding-bottom: calc((150/750)*100vw);
    background: url("../images/content_bg_point_sp_03.png") bottom 0 left 0 no-repeat, url("../images/content_bg_point_sp_04.png") bottom 0 right 0 no-repeat;
    background-size: calc((98/750)*100vw), calc((66/750)*100vw); }
    @media screen and (min-width: 768px), print {
      .character .cahacter-list-02 {
        margin-top: 0;
        padding-bottom: calc((150/1200)*100vw);
        background: url("../images/content_bg_point_pc_02.png") top center no-repeat, url("../images/content_bg_point_pc_03.png") bottom center no-repeat;
        background-size: calc((984/1200)*100vw), calc((920/1200)*100vw); } }
    @media screen and (min-width: 1200px) {
      .character .cahacter-list-02 {
        padding-bottom: 150px;
        background-size: 984px; } }
  .character .cahacter-list-03 {
    margin-top: calc((-30/750)*100vw);
    margin-bottom: 0;
    padding-bottom: calc((120/750)*100vw); }
    @media screen and (min-width: 768px), print {
      .character .cahacter-list-03 {
        margin-top: calc((-150/1200)*100vw);
        padding-bottom: 0; } }
    @media screen and (min-width: 1200px) {
      .character .cahacter-list-03 {
        margin-top: -150px; } }
  .character .cahacter-list-item-01 {
    background: url("../images/content_bg_point_sp_01.png") top 0 left 3vw no-repeat;
    background-size: calc((66/750)*100vw); }
    @media screen and (min-width: 768px), print {
      .character .cahacter-list-item-01 {
        background: none; } }
  .character .cahacter-list-item-02 {
    background: url("../images/content_bg_point_sp_02.png") top 0 right 3vw no-repeat;
    background-size: calc((98/750)*100vw); }
    @media screen and (min-width: 768px), print {
      .character .cahacter-list-item-02 {
        background: none; } }
  .character .cahacter-list-item-03 {
    background: url("../images/content_bg_point_sp_03.png") top 0 left 5vw no-repeat;
    background-size: calc((98/750)*100vw); }
    @media screen and (min-width: 768px), print {
      .character .cahacter-list-item-03 {
        background: none; } }
.character-img {
  width: calc((474/750)*100vw);
  margin: 0 auto; }
  @media screen and (min-width: 768px), print {
    .character-img {
      width: 100%; } }
.character-cv {
  position: absolute;
  bottom: 0;
  left: 0;
  -webkit-display: flex;
  -moz-display: flex;
  -ms-display: flex;
  -o-display: flex;
  display: flex;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: #FFF; }
  @media screen and (min-width: 768px), print {
    .character-cv {
      justify-content: flex-start; } }
  .character-cv-img {
    width: calc((170/750)*100vw);
    margin: 0 calc((15/750)*100vw); }
    @media screen and (min-width: 768px), print {
      .character-cv-img {
        width: calc((110/1200)*100vw);
        margin: 0 calc((15/1200)*100vw) 0 0; } }
    @media screen and (min-width: 1200px) {
      .character-cv-img {
        width: 110px;
        margin: 0 15px 0 0; } }
    .character-cv-img img {
      vertical-align: bottom; }
  .character-cv-text {
    margin: 0 calc((15/750)*100vw);
    font-size: calc((22/750)*100vw);
    font-weight: 400; }
    @media screen and (min-width: 768px), print {
      .character-cv-text {
        margin: 0;
        font-size: calc((14/1200)*100vw);
        letter-spacing: .2em;
        line-height: 1.4; } }
    @media screen and (min-width: 1200px) {
      .character-cv-text {
        font-size: 1.4rem; } }
    .character-cv-text b {
      display: inline-block; }
      @media screen and (min-width: 768px), print {
        .character-cv-text b {
          letter-spacing: 0; } }
  .character-cv-name {
    display: inline-block;
    font-size: calc((32/750)*100vw);
    font-weight: 600;
    white-space: nowrap; }
    @media screen and (min-width: 768px), print {
      .character-cv-name {
        margin-top: .2em;
        font-size: calc((22/1200)*100vw); } }
    @media screen and (min-width: 1200px) {
      .character-cv-name {
        font-size: 2.2rem; } }

.song .content {
  padding: 0 0 20vw;
  background: url("../images/content_bg.png");
  color: #00385E;
  text-align: center; }
  @media screen and (min-width: 768px), print {
    .song .content {
      padding: 0 0 calc((200/1200)*100vw);
      text-align: left; } }
  @media screen and (min-width: 1200px) {
    .song .content {
      padding: 0 0 200px; } }
@media screen and (min-width: 768px), print {
  .song-content {
    -webkit-display: flex;
    -moz-display: flex;
    -ms-display: flex;
    -o-display: flex;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    justify-content: center; } }
.song-content-textarea {
  width: auto; }
.song-img01 {
  width: calc((400/750)*100vw);
  margin: 0 auto calc((30/750)*100vw); }
  @media screen and (min-width: 768px), print {
    .song-img01 {
      width: calc((270/1200)*100vw);
      margin: 0 calc((270/1200)*100vw) 0 0; } }
  @media screen and (min-width: 1200px) {
    .song-img01 {
      width: 270px;
      margin-right: 40px; } }
.song-ttl {
  margin-bottom: calc((20/750)*100vw);
  font-size: calc((34/750)*100vw);
  line-height: 1.47;
  letter-spacing: .05em; }
  @media screen and (min-width: 768px), print {
    .song-ttl {
      font-size: calc((24/1200)*100vw);
      line-height: 1.5; } }
  @media screen and (min-width: 1200px) {
    .song-ttl {
      font-size: 24px; } }
@media screen and (min-width: 768px), print {
  .song-text01 {
    letter-spacing: .05em;
    line-height: 1.571; } }

.staff .content {
  background: #4A92D1; }
  .staff .content-text {
    color: #FFF;
    font-weight: 400;
    padding-top: 5vw; }
    @media screen and (min-width: 768px), print {
      .staff .content-text {
        margin-top: 1em;
        padding-top: 0; } }
.staff .inner {
  background: url("../images/content_bg_point_sp_01.png") top calc((20/750)*100vw) left calc((60/750)*100vw) no-repeat, url("../images/content_bg_point_sp_02.png") top calc((20/750)*100vw) right calc((30/750)*100vw) no-repeat, url("../images/content_bg_point_sp_03.png") bottom calc((5/750)*100vw) left calc((60/750)*100vw) no-repeat, url("../images/content_bg_point_sp_04.png") bottom calc((5/750)*100vw) right calc((30/750)*100vw) no-repeat;
  background-size: calc((66/750)*100vw), calc((98/750)*100vw), calc((98/750)*100vw), calc((66/750)*100vw); }
  @media screen and (min-width: 768px), print {
    .staff .inner {
      background: url("../images/content_bg_point_pc_01.png") top 10px center no-repeat, url("../images/content_bg_point_pc_02.png") bottom 10px center no-repeat;
      background-size: calc((1114/1200)*100vw), calc((984/1200)*100vw); } }
  @media screen and (min-width: 1200px) {
    .staff .inner {
      background-size: 1114px, 984px; } }
.staff-table {
  width: 100%; }
  .staff-table tr {
    border-bottom: #77BAEE 2px solid; }
    @media screen and (min-width: 768px), print {
      .staff-table tr.pc-brdr0 {
        border: none; } }
  .staff-table th, .staff-table td {
    padding: .3em 0;
    color: #FFF;
    text-align: left;
    vertical-align: middle; }
  .staff-table th {
    width: calc((320/750)*100vw); }
    @media screen and (min-width: 768px), print {
      .staff-table th {
        width: calc((160/1200)*100vw); } }
    @media screen and (min-width: 1200px) {
      .staff-table th {
        width: 160px; } }
  .staff-table td {
    font-weight: 400; }
  .staff-table-wrap {
    margin-bottom: 1.5em; }
    @media screen and (min-width: 768px), print {
      .staff-table-wrap {
        -webkit-display: flex;
        -moz-display: flex;
        -ms-display: flex;
        -o-display: flex;
        display: flex;
        justify-content: space-between;
        margin-bottom: calc((80/1200)*100vw); } }
    @media screen and (min-width: 1200px) {
      .staff-table-wrap {
        margin-bottom: 80px; } }
  @media screen and (min-width: 768px), print {
    .staff-table-left, .staff-table-right {
      width: calc((494/1200)*100vw); } }
  @media screen and (min-width: 1200px) {
    .staff-table-left, .staff-table-right {
      width: 494px; } }
.staff .directorGreeting {
  margin: calc((100/750)*100vw) 0 0;
  padding: 4vw 0 10vw;
  overflow: hidden;
  background: url("../images/directorGreeting_bg_top_sp.png") top center no-repeat, url("../images/directorGreeting_bg_bottom_sp.png") bottom center no-repeat;
  background-size: contain;
  color: #FFF; }
  @media screen and (min-width: 768px), print {
    .staff .directorGreeting {
      margin: 0;
      padding: calc((15/1200)*100vw) calc((30/1200)*100vw) calc((40/1200)*100vw);
      background: url("../images/directorGreeting_bg_top_pc.png") top center no-repeat, url("../images/directorGreeting_bg_bottom_pc.png") bottom center no-repeat;
      background-size: contain; } }
  @media screen and (min-width: 1200px) {
    .staff .directorGreeting {
      margin: 0;
      padding: 15px 30px 40px; } }
  .staff .directorGreeting-ttl {
    margin-bottom: calc((50/750)*100vw);
    text-align: center; }
    @media screen and (min-width: 768px), print {
      .staff .directorGreeting-ttl {
        margin-bottom: calc((40/1200)*100vw);
        font-size: calc((24/1200)*100vw); } }
    @media screen and (min-width: 1200px) {
      .staff .directorGreeting-ttl {
        margin-bottom: 40px;
        font-size: 2.4rem; } }
  .staff .directorGreeting-img {
    float: left;
    width: calc((182/750)*100vw);
    margin: 0 calc((30/750)*100vw) calc((30/750)*100vw) 0; }
    @media screen and (min-width: 768px), print {
      .staff .directorGreeting-img {
        width: calc((178/1200)*100vw);
        margin: 0; } }
    @media screen and (min-width: 1200px) {
      .staff .directorGreeting-img {
        width: 178px; } }
  .staff .directorGreeting-catch {
    margin-bottom: 1.5em;
    color: #FFFDB8;
    font-size: calc((34/750)*100vw);
    letter-spacing: .05em; }
    @media screen and (min-width: 768px), print {
      .staff .directorGreeting-catch {
        margin-bottom: 1em;
        padding-left: calc((200/1200)*100vw);
        font-size: calc((24/1200)*100vw); } }
    @media screen and (min-width: 1200px) {
      .staff .directorGreeting-catch {
        font-size: 2.4rem;
        padding-left: 200px; } }
  .staff .directorGreeting-text {
    font-size: calc((28/750)*100vw);
    line-height: 1.929;
    letter-spacing: .05em; }
    @media screen and (min-width: 768px), print {
      .staff .directorGreeting-text {
        padding-left: calc((200/1200)*100vw);
        font-size: calc((16/1200)*100vw);
        line-height: 2.375;
        letter-spacing: .1em; } }
    @media screen and (min-width: 1200px) {
      .staff .directorGreeting-text {
        padding-left: 200px;
        font-size: 1.6rem; } }
    .staff .directorGreeting-text.sign {
      text-align: right; }
      @media screen and (min-width: 768px), print {
        .staff .directorGreeting-text.sign span {
          font-size: calc((20/1200)*100vw); } }
      @media screen and (min-width: 1200px) {
        .staff .directorGreeting-text.sign span {
          font-size: 2.0rem; } }

.scene01 .content {
  height: calc((640/750)*100vw);
  padding-bottom: 5vw;
  background: url("../images/scene_img_01_sp.jpg") top center no-repeat;
  background-size: contain; }
  @media screen and (min-width: 768px), print {
    .scene01 .content {
      height: calc((744/1200)*100vw);
      padding-bottom: calc((80/1200)*100vw);
      background: url("../images/scene_img_01_pc.jpg") top center no-repeat;
      background-size: auto 100%; } }
  @media screen and (min-width: 1200px) {
    .scene01 .content {
      height: 744px;
      padding-bottom: 80px;
      background-size: auto 100%; } }
.scene02 .content {
  height: calc((640/750)*100vw);
  padding-bottom: 5vw;
  background: url("../images/scene_img_02_sp.jpg") top center no-repeat;
  background-size: contain; }
  @media screen and (min-width: 768px), print {
    .scene02 .content {
      height: calc((744/1200)*100vw);
      padding-bottom: calc((80/1200)*100vw);
      background: url("../images/scene_img_02_pc.jpg") top center no-repeat;
      background-size: auto 100%; } }
  @media screen and (min-width: 1200px) {
    .scene02 .content {
      height: 744px;
      padding-bottom: 80px;
      background-size: auto 100%; } }

.debris .content {
  padding-bottom: 25vw;
  background: url("../images/content_bg.png"); }
  @media screen and (min-width: 768px), print {
    .debris .content {
      padding-bottom: calc((200/1200)*100vw); } }
  @media screen and (min-width: 1200px) {
    .debris .content {
      padding-bottom: 200px; } }
  .debris .content-mttl {
    color: #00385E; }
  .debris .content-text {
    color: #00385E; }
  .debris .content-text a {
    text-decoration: underline; }
.debris-content {
  position: relative;
  margin-top: calc((-80/750)*100vw);
  padding-top: calc((80/750)*100vw); }
  @media screen and (min-width: 768px), print {
    .debris-content {
      -webkit-display: flex;
      -moz-display: flex;
      -ms-display: flex;
      -o-display: flex;
      display: flex;
      justify-content: space-between; } }
  .debris-content:before {
    position: absolute;
    top: 0;
    left: calc((-70/750)*100vw);
    content: '';
    width: calc((186/750)*100vw);
    height: calc((190/750)*100vw);
    background: url("../images/content_bg_point_sp_06.png") top left no-repeat;
    background-size: contain; }
    @media screen and (min-width: 1200px) {
      .debris-content:before {
        top: auto;
        bottom: -50px;
        left: -110px;
        width: 186px;
        height: 190px; } }
.debris-img {
  margin-bottom: 2em;
  text-align: right;
  line-height: 1.0;
  z-index: 999; }
  @media screen and (min-width: 768px), print {
    .debris-img {
      order: 2;
      width: calc((520/1200)*100vw);
      margin-bottom: 0; } }
  @media screen and (min-width: 1200px) {
    .debris-img {
      width: 520px; } }
@media screen and (min-width: 768px), print {
  .debris-textarea {
    order: 1;
    width: calc((480/1200)*100vw); } }
@media screen and (min-width: 1200px) {
  .debris-textarea {
    width: 480px; } }
@media screen and (min-width: 768px), print {
  .debris .btn a {
    margin: calc((40/1200)*100vw) auto calc((7/1200)*100vw); } }
@media screen and (min-width: 1200px) {
  .debris .btn a {
    margin: 40px auto 7px; } }

.change .content {
  position: relative;
  background: #4A92D1; }
  @media screen and (min-width: 768px), print {
    .change .content {
      padding-bottom: calc((50/1200)*100vw); } }
  @media screen and (min-width: 1200px) {
    .change .content {
      padding-bottom: 50px; } }
  .change .content-mttl {
    color: #FFF; }
  .change .content-text {
    color: #FFF; }
.change .inner {
  background: url("../images/content_bg_point_sp_01.png") top calc((20/750)*100vw) left calc((60/750)*100vw) no-repeat, url("../images/content_bg_point_sp_02.png") top calc((20/750)*100vw) right calc((30/750)*100vw) no-repeat, url("../images/content_bg_point_sp_03.png") bottom calc((5/750)*100vw) left calc((60/750)*100vw) no-repeat, url("../images/content_bg_point_sp_04.png") bottom calc((5/750)*100vw) right calc((30/750)*100vw) no-repeat;
  background-size: calc((66/750)*100vw), calc((98/750)*100vw), calc((98/750)*100vw), calc((66/750)*100vw); }
  @media screen and (min-width: 768px), print {
    .change .inner {
      background: url("../images/content_bg_point_pc_01.png") top 10px center no-repeat, url("../images/content_bg_point_pc_02.png") bottom 10px center no-repeat;
      background-size: calc((1114/1200)*100vw), calc((984/1200)*100vw); } }
  @media screen and (min-width: 1200px) {
    .change .inner {
      background-size: 1114px, 984px; } }
@media screen and (min-width: 768px), print {
  .change-content {
    -webkit-display: flex;
    -moz-display: flex;
    -ms-display: flex;
    -o-display: flex;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    justify-content: space-between; } }
.change-img {
  margin-bottom: 1em; }
  @media screen and (min-width: 768px), print {
    .change-img {
      width: calc((520/1200)*100vw);
      margin-bottom: 0; } }
  @media screen and (min-width: 1200px) {
    .change-img {
      width: 520px; } }
@media screen and (min-width: 768px), print {
  .change-textarea {
    width: calc((480/1200)*100vw); } }
@media screen and (min-width: 1200px) {
  .change-textarea {
    width: 480px; } }
@media screen and (min-width: 768px), print {
  .change .btn a {
    margin: calc((40/1200)*100vw) auto calc((7/1200)*100vw); } }
@media screen and (min-width: 1200px) {
  .change .btn a {
    margin: 40px auto 7px; } }

.event .content {
  padding-top: 25vw;
  background: url("../images/event_content_bg_sp.jpg") top center no-repeat;
  background-size: cover; }
  @media screen and (min-width: 768px), print {
    .event .content {
      padding: calc((200/1200)*100vw) 0 calc((80/1200)*100vw);
      background: url("../images/event_content_bg_pc.jpg") top center no-repeat;
      background-size: cover; } }
  @media screen and (min-width: 1200px) {
    .event .content {
      padding: 200px 0 80px; } }
/* .event .inner {
  padding-bottom: 17vw; } */
  @media screen and (min-width: 768px), print {
    .event .inner {
      padding-bottom: 0; } }
@media screen and (min-width: 768px), print {
  .event-list {
    -webkit-display: flex;
    -moz-display: flex;
    -ms-display: flex;
    -o-display: flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between; } }
.event-list li {
  margin-bottom: calc((30/750)*100vw); }
  @media screen and (min-width: 768px), print {
    .event-list li {
      width: calc((504/1200)*100vw);
      margin-bottom: calc((30/1200)*100vw); } }
  @media screen and (min-width: 1200px) {
    .event-list li {
      width: 504px;
      margin-bottom: 30px; } }
  .event-list li:last-child {
    margin-bottom: 0; }
  @media screen and (min-width: 768px), print {
    .event-list li:nth-last-child(-n+2) {
      margin-bottom: 0; } }
  .event-list li a {
    position: relative;
    display: block;
    padding: calc((30/750)*100vw) calc((60/750)*100vw) calc((30/750)*100vw) calc((30/750)*100vw);
    background: #FFF;
    border: #9F8D6B 2px solid;
    color: #9F8D6B; }
    @media screen and (min-width: 768px), print {
      .event-list li a {
        padding: calc((15/1200)*100vw) calc((80/1200)*100vw) calc((15/1200)*100vw) calc((20/1200)*100vw); } }
    @media screen and (min-width: 1200px) {
      .event-list li a {
        padding: 15px 80px 15px 20px; } }
    .event-list li a:hover {
      opacity: .46;
      transition: .5s; }
    .event-list li a:after {
      position: absolute;
      top: 43%;
      right: calc((20/750)*100vw);
      content: '';
      width: 0;
      height: 0;
      border: transparent calc((8/750)*100vw) solid;
      border-left: #9F8D6B calc((8/750)*100vw) solid; }
      @media screen and (min-width: 1200px) {
        .event-list li a:after {
          right: 20px;
          border: transparent 5px solid;
          border-left: #9F8D6B 5px solid; } }
.event-list .ico_pdf {
  display: inline-block;
  padding: .2em .4em;
  background: #9F8D6B;
  color: #FFF;
  font-size: calc((18/750)*100vw);
  font-weight: 400; }
  @media screen and (min-width: 768px), print {
    .event-list .ico_pdf {
      font-size: calc((12/1200)*100vw);
      line-height: 1.2; } }
  @media screen and (min-width: 1200px) {
    .event-list .ico_pdf {
      font-size: 1.2rem; } }
.event-ttl {
  font-weight: 500; }
  @media screen and (min-width: 768px), print {
    .event-ttl {
      margin-top: -.5em; } }

.footer {
  padding: calc((30/750)*100vw) 0;
  background: #00385E;
  /* padding-top: calc((120/750)*100vw); */
 }
  @media screen and (min-width: 768px), print {
    .footer {
      padding: calc((50/1200)*100vw) 0;
      /* padding-top: calc((140/750)*100vw); */
     }
  }
  @media screen and (min-width: 1200px) {
    .footer {
      padding: 50px 0;
      /* padding-top: 210px; */
    }
  }
  .footer .inner {
    -webkit-display: flex;
    -moz-display: flex;
    -ms-display: flex;
    -o-display: flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    justify-content: space-between; }
  @media screen and (min-width: 768px), print {
    .footer-sns {
      order: 1;
      width: 30%; } }
  .footer-sns li {
    display: inline-block;
    width: calc((60/750)*100vw);
    margin-right: calc((25/750)*100vw); }
    @media screen and (min-width: 768px), print {
      .footer-sns li {
        width: calc((38/1200)*100vw);
        margin-right: calc((20/1200)*100vw); } }
    @media screen and (min-width: 1200px) {
      .footer-sns li {
        width: 38px;
        margin-right: 20px; } }
  .footer-uminohi {
    -webkit-display: flex;
    -moz-display: flex;
    -ms-display: flex;
    -o-display: flex;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    justify-content: space-between; }
    @media screen and (min-width: 768px), print {
      .footer-uminohi {
        order: 3;
        width: calc((280/750)*100vw); } }
    @media screen and (min-width: 1200px) {
      .footer-uminohi {
        width: 280px; } }
    .footer-uminohi-logo {
      width: calc((190/750)*100vw);
      margin-right: calc((10/750)*100vw); }
      @media screen and (min-width: 768px), print {
        .footer-uminohi-logo {
          width: calc((136/1200)*100vw);
          margin-right: calc((10/1200)*100vw); } }
      @media screen and (min-width: 1200px) {
        .footer-uminohi-logo {
          width: 136px;
          margin-right: 10px; } }
      .footer-uminohi-logo img {
        vertical-align: bottom; }
    .footer-uminohi-text {
      color: #FFF;
      font-size: calc((22/750)*100vw);
      line-height: 1.273;
      letter-spacing: .15em;
      white-space: nowrap; }
      @media screen and (min-width: 768px), print {
        .footer-uminohi-text {
          font-size: calc((13/1200)*100vw); } }
      @media screen and (min-width: 1200px) {
        .footer-uminohi-text {
          font-size: 1.3rem; } }
  .footer .copy {
    width: 100%;
    margin: calc((40/750)*100vw) 0 0;
    color: #FFF;
    font-size: calc((18/750)*100vw);
    font-weight: 400;
    text-align: center; }
    @media screen and (min-width: 768px), print {
      .footer .copy {
        order: 2;
        width: 30%;
        margin: 0;
        font-size: calc((11/1200)*100vw); } }
    @media screen and (min-width: 1200px) {
      .footer .copy {
        font-size: 1.1rem; } }

/*  =============================================
 フェードイン
 例）
         class="fadein"
         class="fadein-l"

===============================================*/
.fadein {
  opacity: 0;
  transition: 1.5s;
  transform: translate(0, 60px);
  -webkit-transform: translate(0, 60px); }

.inviewFadeIn {
  opacity: 1;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0); }

.fadein-l {
  opacity: 0;
  transition: 1.5s;
  transform: translate(60px, 0);
  -webkit-transform: translate(60px, 0); }

.inviewFadeIn-l {
  opacity: 1;
  margin-left: 0;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0); }

.fadein-r {
  opacity: 0;
  transition: 1.5s;
  transform: translate(-60px, 0);
  -webkit-transform: translate(-60px, 0); }

.inviewFadeIn-r {
  opacity: 1;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0); }

.fadein-scale {
  opacity: 0;
  transition: 1.5s;
  transform: scale(0.5);
  -webkit-transform: scale(0.5); }

.inviewFadeIn-scale {
  opacity: 1;
  transform: scale(1);
  -webkit-transform: scale(1); }
@media screen and (min-width: 768px), print {
  #event .content-lttl {
  width: 240px;
  }
}

#event .movie {
position: relative;
width: 100%;
padding-top: 56.25%;
margin: 0 auto calc((140/750)*100vw);
margin-bottom: 13.75%;
text-align: center; }
@media screen and (min-width: 768px), print {
  #event  .movie {
  width: calc((750/1200)*100vw);
  margin-bottom: 0;
  padding-top: 49.25%; } }
@media screen and (min-width: 1200px), print {
#event  .movie {
  width: 750px; } }
#event  .movie iframe {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%; }
@media screen and (min-width: 768px), print {
#event  .movie iframe {
  width: calc((750/1200)*100vw);
  height: calc((440/1200)*100vw); } }
@media screen and (min-width: 1200px), print {
#event  .movie iframe {
  width: 750px;
  height: 440px; }
  }