@charset "utf-8";
/*----------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@font-face {
  font-family: 'SuzukiPROHeadline';
  src: url("/byyourside/font/SuzukiPROHeadline.ttf") format("truetype"), url("/byyourside/font/SuzukiPROHeadline.woff") format("woff");
}
@font-face {
  font-family: 'SuzukiPRORegular';
  src: url("/byyourside/font/SuzukiPRORegular.ttf") format("truetype"), url("/byyourside/font/SuzukiPRORegular.woff") format("woff");
}
@font-face {
  font-family: 'SuzukiPROBold';
  src: url("/byyourside/font/SuzukiPROBold.ttf") format("truetype"), url("/byyourside/font/SuzukiPROBold.woff") format("woff");
}
/*----------------------------------------------------------*/
:root {
  --primaryColor: #00368F;
  --offColor: #C8D7EF;
}
/*----------------------------------------------------------*/
#stage {
  overflow: inherit;
  a {
    text-decoration: none;
  }
}
#mainContents {
  padding-bottom: 100px;
  @media print, screen and (min-width: 751px) {
    padding-bottom: min(90 / 1180 * 100vw, 90px);
  }
}
#mainContents ul, #mainContents li, #mainContents p {
  letter-spacing: 0.05em;
  padding-top: 0;
}
#mainBox {
  width: calc(370 / 390 * 100vw);
  margin-left: auto;
  margin-right: auto;
  @media print, screen and (min-width: 751px) {
    width: min(1100 / 1180 * 100vw, 1100px);
    display: flex;
    justify-content: space-between;
  }
}
/*



*/
#mainBox .language {
  display: none;
  @media print, screen and (min-width: 751px) {
    display: block;
    opacity: 0;
    z-index: 0;
  }
}
#mainBox .en p {
  font-family: "Roboto", sans-serif;
}
#mainBox .active {
  display: block;
  @media print, screen and (min-width: 751px) {
    opacity: 1;
    z-index: 1;
  }
}
/*



*/
#primaryBox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  @media print, screen and (min-width: 751px) {
    position: inherit;
    width: min(460 / 1180 * 100vw, 460px);
  }
}
#stickyBox {
  width: calc(370 / 390 * 100vw);
  height: 205px;
  border-right: none;
  border-bottom: 1px solid var(--primaryColor);
  background-color: #fff;
  margin-left: auto;
  margin-right: auto;
  @media print, screen and (min-width: 751px) {
    position: sticky;
    top: min(40 / 1180 * 100vw, 40px);
    width: min(380 / 1180 * 100vw, 380px);
    height: min(636 / 1180 * 100vw, 636px);
    padding: 0 min(40 / 1180 * 100vw, 40px);
    border-right: 1px solid var(--primaryColor);
    border-bottom: none;
  }
}
/*



*/
#language {
  position: absolute;
  top: 5px;
  right: 24px;
  @media print, screen and (min-width: 751px) {
    top: min(40 / 1180 * 100vw, 40px);
    right: min(40 / 1180 * 100vw, 40px);
  }
  ul {
    position: absolute;
    text-align: center;
    width: 47px;
    top: 0;
    right: -3px;
    z-index: 1;
    @media print, screen and (min-width: 751px) {
      position: static;
      text-align: left;
      display: flex;
      width: auto;
    }
    a {
      color: var(--primaryColor);
      font-family: 'Noto Sans', sans-serif;
      font-size: 1.4rem;
      line-height: 1;
      display: none;
      padding: 7px 0;
      @media print, screen and (min-width: 751px) {
        width: auto;
        position: relative;
        font-size: min(14 / 1180 * 100vw, 14px);
        display: block;
        margin: 0 min(8 / 1180 * 100vw, 8px);
        padding: 0 min(2 / 1180 * 100vw, 2px);
      }
      &:before {
        content: '';
        position: absolute;
        left: 50%;
        bottom: max(-7 / 1180 * 100vw, -7px);
        width: 0;
        border-bottom: solid 1px var(--primaryColor);
        opacity: 0;
        transform: translateX(-50%);
      }
      &.on {
        display: block;
      }
      &.on:before {
        opacity: 0;
        @media print, screen and (min-width: 751px) {
          opacity: 1;
        }
      }
    }
  }
}
/*
hover
*/
@media print, screen and (min-width: 751px) and (hover: hover) and (pointer: fine) {
  #language a {
    &:before {
      animation: border_anm_rev .3s linear forwards;
      opacity: 0;
      transition: 0.5s;
    }
    &:hover:before {
      animation: border_anm .3s linear forwards;
      opacity: 1;
    }
    &.on:before {
      animation: none;
      width: 100%;
      opacity: 1;
    }
    &.on:hover:before {
      animation: none;
    }
  }
}
@keyframes border_anm {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@keyframes border_anm_rev {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}
/**/
#languageBtn {
  position: relative;
  width: 47px;
  cursor: pointer;
  z-index: 5;
  padding-bottom: 10px;
  &:after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 4px;
    height: 4px;
    border-right: 1px solid var(--primaryColor);
    border-top: 1px solid var(--primaryColor);
    transform: translateY(-80%) rotate(135deg);
  }
  &.on:after {
    transform: translateY(-20%) rotate(-45deg);
  }
}
#language .spOnly img {
  width: 11px;
  vertical-align: -6px;
}
/*

logo

*/
#byyourside_logo {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  @media print, screen and (min-width: 751px) {
    width: min(340 / 1180 * 100vw, 340px);
    top: 50%;
    left: min(40 / 1180 * 100vw, 40px);
    transform: translateY(-50%);
  }
}
/*

progressBar

*/
#progressBar {
  position: absolute;
  left: 50%;
  bottom: 20px;
  width: 140px;
  transform: translateX(-50%);
  border-top: 3px solid var(--offColor);
  @media print, screen and (min-width: 751px) {
    bottom: min(80 / 1180 * 100vw, 80px);
    width: min(136 / 1180 * 100vw, 136px);
    border-top: min(3 / 1180 * 100vw, 3px) solid var(--offColor);
  }
}
#progressBar #bar {
  position: absolute;
  height: 3px;
  width: auto;
  left: 0;
  top: -2.5px;
  background-color: var(--primaryColor);
  border-radius: 1.5px;
}
#progressBar ol {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0 !important;
}
#progressBar li {
  position: relative;
  text-align: center;
  flex: 2;
}
#progressBar li:first-child {
  text-align: left;
  span {
    margin-left: -1.2em;
  }
}
#progressBar li:last-child {
  text-align: right;
  span {
    margin-right: -2.5em;
  }
}
/**/
#progressBar li:after {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--offColor);
}
/**/
#progressBar li a {
  color: rgba(0, 54, 143, 0.6);
  font-family: 'SuzukiPRORegular', Arial, Helvetica, sans-serif;
  font-size: calc(14rem / 10);
  white-space: nowrap;
  position: relative;
  display: block;
  padding-top: 17px;
  @media print, screen and (min-width: 751px) {
    font-size: min(16 / 1180 * 100vw, 16px);
    padding-top: min(12 / 1180 * 100vw, 12px);
    transition: .3s;
  }
}
#progressBar li:first-child a {
  color: rgba(0, 54, 143, 1);
}
/**/
#progressBar li a:before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background-color: var(--offColor);
  border-radius: 50%;
  position: absolute;
  top: -5.5px;
  left: -4px;
  z-index: 3;
  transition: .2s;
  /*transform: scale(2);test*/
  @media print, screen and (min-width: 751px) {
    width: min(8 / 1180 * 100vw, 8px);
    height: min(8 / 1180 * 100vw, 8px);
    top: max(-5.5 / 1180 * 100vw, -5.5px);
    left: max(-4 / 1180 * 100vw, -4px);
  }
}
#progressBar li:first-child a:before {
  background-color: var(--primaryColor);
}
#progressBar li:last-child a:before {
  right: -4px;
  left: auto;
  @media print, screen and (min-width: 751px) {
    right: max(-4 / 1180 * 100vw, -4px);
  }
}
#progressBar li.is-active a {
  color: var(--primaryColor);
}
#progressBar li.is-active a:before {
  background-color: var(--primaryColor);
  border-color: var(--primaryColor);
}
/**/
#progressBar li svg {
  opacity: 0;
  position: absolute;
  width: 32.65px;
  height: 32.65px;
  top: calc(-50% + 1.5px);
  left: -23.5%;
  z-index: 3;
  transform: rotate(-90deg);
  transition: 0.5s;
  @media print, screen and (min-width: 751px) {
    top: max(-16 / 1180 * 100vw, -16px);
    left: -21%;
    width: min(28.57 / 1180 * 100vw, 28.57px);
    height: min(28.57 / 1180 * 100vw, 28.57px);
  }
  .circle_pgb {
    stroke: var(--primaryColor);
    stroke-width: 1px;
    stroke-dashoffset: 20%;
    stroke-dasharray: calc(3.14 * 100%);
    fill: transparent;
    animation: kurukuru_rev ease 0.5s forwards;
  }
}
#progressBar li.is-active svg {
  opacity: 1;
}
#progressBar li:last-child svg {
  right: -24%;
  left: auto;
  @media print, screen and (min-width: 751px) {
    right: -21%;
  }
}
/*
hover
*/
@media (hover: hover) and (pointer: fine) {
  #progressBar li a {
    transition: 0.5s;
    &:hover:before {
      transform: scale(2);
    }
    &:hover:after {
      opacity: 0;
    }
  }
  #progressBar li a:hover .circle_pgb {
    animation: kurukuru ease 0.5s forwards;
  }
}
@keyframes kurukuru {
  from {
    stroke-dashoffset: 20%;
  }
  to {
    stroke-dashoffset: calc(3.14 * 100%);
  }
}
@keyframes kurukuru_rev {
  from {
    stroke-dashoffset: calc(3.14 * 100%);
  }
  to {
    stroke-dashoffset: 20%;
  }
}
/*


secondary


*/
#secondaryBox {
  padding-top: 260px;
  @media print, screen and (min-width: 751px) {
    width: min(600 / 1180 * 100vw, 600px);
    padding-top: 0;
    padding-bottom: min(280 / 1180 * 100vw, 280px);
    margin-left: min(40 / 1180 * 100vw, 40px);
  }
}
/*

movie

*/
#movieArea {
  width: min(370 / 390 * 100vw, 370px);
  height: min(208 / 390 * 100vw, 208px);
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  @media print, screen and (min-width: 751px) {
    width: min(600 / 1180 * 100vw, 600px);
    height: min(337.5 / 1180 * 100vw, 337.5px);
    margin: 0;
    padding: min(190 / 1180 * 100vw, 190px) 0;
  }
}
#movieArea .boxYoutube {
  display: none;
}
#movieArea .boxYoutube.active {
  display: block;
}
/*

statement

*/
#statement {
  width: calc(310 / 390 * 100vw);
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding-top: 100px;
  padding-bottom: 142px;
  @media print, screen and (min-width: 751px) {
    width: auto;
    margin: 0;
    padding-top: min(80 / 1180 * 100vw, 80px);
    padding-left: min(40 / 1180 * 100vw, 40px);
    padding-bottom: min(340 / 1180 * 100vw, 340px);
  }
}
#statement .jp {
  @media print, screen and (min-width: 751px) {
    position: absolute;
  }
}
#statement p {
  color: var(--primaryColor);
  font-size: calc(14rem / 10);
  font-weight: 500;
  text-align: center;
  line-height: calc(40 / 14);
  @media print, screen and (min-width: 751px) {
    font-size: min(16 / 1180 * 100vw, 16px);
    text-align: left;
    line-height: calc(40 / 16);
  }
}
#statement .jp p {
  font-weight: 400;
}
@media print, screen and (min-width: 751px) {
  #statement .en p br {
    display: block;
  }
  #statement .en p span {
    letter-spacing: 0.04em;
  }
}
/*


youtube


*/
.boxYoutube {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding-bottom: 56.25%;
}
.boxYoutube .poster {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.boxYoutube svg {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 61.2245px;
  height: 61.2245px;
  transform: translateX(-50%) translateY(-50%) rotate(-90deg);
  z-index: 3;
  @media print, screen and (min-width: 751px) {
    width: min(79.59 / 1180 * 100vw, 79.59px);
    height: min(79.59 / 1180 * 100vw, 79.59px);
  }
}
.boxYoutube .circle_ani {
  stroke: #fff;
  stroke-width: 2px;
  stroke-dashoffset: 14%;
  stroke-dasharray: calc(3.14 * 100%);
  fill: transparent;
}
.boxYoutube iframe {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}
/*
hover
*/
@media (hover: hover) and (pointer: fine) {
  .boxYoutube .poster:hover:after {
    opacity: 0;
  }
  .boxYoutube .circle_ani {
    animation: kururi_rev ease 0.5s forwards;
  }
  .boxYoutube:hover .circle_ani {
    animation: kururi ease 0.5s forwards;
  }
}
@keyframes kururi {
  from {
    stroke-dashoffset: 14%;
  }
  to {
    stroke-dashoffset: calc(3.14 * 100%);
  }
}
@keyframes kururi_rev {
  from {
    stroke-dashoffset: calc(3.14 * 100%);
  }
  to {
    stroke-dashoffset: 14%;
  }
}
/*

hp link

*/
#hpLink ul {
  @media print, screen and (min-width: 751px) {
    display: flex;
    margin-left: min(16 / 1180 * 100vw, 16px);
  }
}
#hpLink a {
  color: var(--primaryColor);
  font-family: "SuzukiPRORegular", "Noto Sans JP", sans-serif;
  font-size: calc(16rem / 10);
  display: block;
  text-align: center;
  background-image: url("/byyourside/img/link_icon.svg");
  background-repeat: no-repeat;
  background-position: right 24px top 50%;
  background-size: 16px 16px;
  border: 1px solid var(--primaryColor);
  border-radius: 32px;
  line-height: 64px;
  width: 204px;
  margin-top: 16px;
  margin-left: auto;
  margin-right: auto;
  padding-right: 16px;
  @media print, screen and (min-width: 751px) {
    font-size: min(16 / 1180 * 100vw, 16px);
    line-height: min(64 / 1180 * 100vw, 64px);
    width: min(204 / 1180 * 100vw, 204px);
    margin-top: 0;
    margin-left: min(24 / 1180 * 100vw, 24px);
    margin-right: 0;
    padding-right: min(16 / 1180 * 100vw, 16px);
  }
}
/*
hover
*/
@media (hover: hover) and (pointer: fine) {
  #hpLink a {
    transition: 0.5s;
  }
  #hpLink a:hover {
    background-color: #F2F7FF;
  }
}