@charset "UTF-8";
/* --------------------------------------------------
general
 --------------------------------------------------- */
html[lang="ja"] body {
  font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, verdana, ＭＳ\ Ｐゴシック, Osaka, sans-serif;
}
html.ja body {
  font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, verdana, ＭＳ\ Ｐゴシック, Osaka, sans-serif;
}
html[lang="en"] body {
  font-family: "Myriad Pro", "Myriad Pro Web", "Droid Sans", "Helvetica", "Arial", "HiraKakuProN-W3", "HiraKakuPro-W3", "ヒラギノ角ゴ ProN W3", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", "Trebuchet MS", "ＭＳ\ Ｐゴシック", "MS PGothic", sans-serif;
}
html.en body {
  font-family: "Myriad Pro", "Myriad Pro Web", "Droid Sans", "Helvetica", "Arial", "HiraKakuProN-W3", "HiraKakuPro-W3", "ヒラギノ角ゴ ProN W3", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", "Trebuchet MS", "ＭＳ\ Ｐゴシック", "MS PGothic", sans-serif;
}

div#header, header .max-inner {
  max-width: 100%;
}
a:focus, input:focus, area:focus, button:focus, select:focus, [tabindex]:focus, textarea:focus {
    outline: 2px solid #b2b2b2!important;
}
.dummy{
  position:absolute;
  opacity:0;
  top:-9999px;
}

/* --------------------------------------------------
.oytg-main
 --------------------------------------------------- */
.oytg-main .inner {
  position: relative;
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
}
.oytg-main{
  border-top: #dcdcdc 1px solid;
}
.oytg-main .anm{
  opacity:0;
  vertical-align: -webkit-baseline-middle;
}
.oytg-main span.hidden{
  display:inline-block;
  overflow:hidden;
  vertical-align: top;
  width:100%;
}
/* --------------------------------------------------
.oytg-cts-mainvisual
 --------------------------------------------------- */
.oytg-cts-mainvisual {
  overflow: hidden;
  height: 0;
  padding-bottom: 36.98%;
  position: relative;
  margin-left: 8px;
  background-position: 30% 50%;
}
.oytg-cts-mainvisual .inner {
  width: 100%;
  max-width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.oytg-cts-mainvisual .spinner{
  position:absolute;
  width:30px;
  height:auto;
  z-index:1;
  top: 47%;
  left:50%;
  margin:-15px;
}
.oytg-cts-mainvisual .bg-animation{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  overflow: hidden;
  pointer-events: none;
  min-width: 1003px;
}
.oytg-cts-mainvisual .bg-animation .cover{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:#fff;
}
.oytg-cts-mainvisual .bg-animation img{
  position:absolute;
  width: 100%;
  top:0;
  left:0;
  -webkit-transition:-webkit-transform 3s cubic-bezier(0.53, 0.62, 0.64, 1);
  transition:-webkit-transform 3s cubic-bezier(0.53, 0.62, 0.64, 1);
  -o-transition:transform 3s cubic-bezier(0.53, 0.62, 0.64, 1);
  transition:transform 3s cubic-bezier(0.53, 0.62, 0.64, 1);
  transition:transform 3s cubic-bezier(0.53, 0.62, 0.64, 1), -webkit-transform 3s cubic-bezier(0.53, 0.62, 0.64, 1);
}
.oytg-cts-mainvisual .bg-animation .bg01{
  -webkit-transform: translate(1.5%, 0.7%);
  -ms-transform: translate(1.5%, 0.7%);
  transform: translate(1.5%, 0.7%);
  top: -14.5%;
  width: 102.09%;
  max-width: 200%;
  left: auto;
  right: 0;
}
.oytg-cts-mainvisual .bg-animation .bg02{
  -webkit-transform: translate(-1.8%, -1%);
  -ms-transform: translate(-1.7%, -1%);
  transform: translate(-1.8%, -1%);
  top: 11.4%;
  left: -0.4%;
  width: 102.51%;
  max-width: 200%;
}
.oytg-cts-mainvisual.fix .bg-animation .bg01,
.oytg-cts-mainvisual.fix .bg-animation .bg02{
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
          transform: translate(0, 0);
}
.oytg-cts-mainvisual .bg-animation .bg03{
  -webkit-transition:opacity 0.5s;
  -o-transition:opacity 0.5s;
  transition:opacity 0.5s;
  -webkit-transition-delay:2.5s;
       -o-transition-delay:2.5s;
          transition-delay:2.5s;
  opacity:0;
}
.oytg-cts-mainvisual.fix .bg-animation .bg03{
  opacity: 1;
}
.oytg-cts-mainvisual h1 {
  position: relative;
  padding: 1.1% 0 0 1.12%;
  width: 54%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  min-width: 620px;
}
.oytg-cts-mainvisual h1 img{
  width:100%;
}
.oytg-cts-mainvisual h1 .hidden img{
  max-width:inherit;
  width: 100%;
}
.oytg-cts-mainvisual .copy {
  position: absolute;
  right: 10.55%;
  top: 71%;
  width: 15.9%;
  max-width: 100%;
  min-width: 240px;
}
.oytg-cts-mainvisual .copy:after {
  content: "";
  width: 160%;
  height: 2px;
  background: #fff;
  position: absolute;
  bottom: -1px;
  opacity: 0.72;
  left: 160%;
  -webkit-transition: left 0.8s cubic-bezier(0.5, 0.2, 0.2, 1);
  -o-transition: left 0.8s cubic-bezier(0.5, 0.2, 0.2, 1);
  transition: left 0.8s cubic-bezier(0.5, 0.2, 0.2, 1);
  -webkit-transition-delay:1.2s;
  -o-transition-delay:1.2s;
  transition-delay:1.2s;
}
.oytg-cts-mainvisual .copy .hidden img {
  position:relative;
  top:30px;
  top: 2.2em;
  -webkit-transition: top 0.74s cubic-bezier(0.2, 0.83, 0.56, 1);
  -o-transition: top 0.74s cubic-bezier(0.2, 0.83, 0.56, 1);
  transition: top 0.74s cubic-bezier(0.2, 0.83, 0.56, 1);
  -webkit-transition-delay: 1.7s;
  -o-transition-delay: 1.7s;
  transition-delay: 1.7s;
}
.oytg-cts-mainvisual.fix .copy:after {
  left: -3px;
}
.oytg-cts-mainvisual.fix .copy .hidden img {
  top: 0;
  width: 100%;
}
.oytg-cts-mainvisual .scroll {
  position: absolute;
  left: 1.05%;
  top: 72.6%;
  width: 1.1%;
  max-width: 16px;
  z-index: 1;
  -webkit-transition:opacity 0.5s;
  -o-transition:opacity 0.5s;
  transition:opacity 0.5s;
  -webkit-transition-delay: 2.9s;
  -o-transition-delay: 2.9s;
  transition-delay: 2.9s;
  opacity:0;
}
.oytg-cts-mainvisual.fix .scroll {
  opacity:1;
}
.oytg-cts-mainvisual .scroll:after {
  content: "";
  width: 1px;
  height: 0%;
  background: #073190;
  position: absolute;
  top: 0;
  right: 0;
  -webkit-transition:height 2s;
  -o-transition:height 2s;
  transition:height 2s;
  -webkit-transition-delay:2.4s;
  -o-transition-delay:2.4s;
  transition-delay:2.4s;
  -webkit-animation-delay:3.4s;
  animation-delay:3.4s;
  -webkit-animation-name: line-anm-v;
  animation-name: line-anm-v;
  -webkit-animation-duration: 1.1s;
  animation-duration: 1.1s;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0.7, 0.5, 1);
  animation-timing-function: cubic-bezier(0.4, 0.7, 0.5, 1);
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.oytg-cts-mainvisual .scroll img{
  position:relative;
  -webkit-transition:left 0.5s;
  -o-transition:left 0.5s;
  transition:left 0.5s;
  -webkit-transition-delay: 2.9s;
       -o-transition-delay: 2.9s;
          transition-delay: 2.9s;
  left:100%;
}
.oytg-cts-mainvisual.fix .scroll .hidden{
  width:100%;
}
.oytg-cts-mainvisual.fix .scroll img{
  left:0%;
  width: 100%;
  max-width: 100%;
}
@-webkit-keyframes line-anm-v {
  0% {
  height: 14vw;
  top:0;
  }
  50% {
  height: 14vw;
  top:14vw;
  }
  50.1% {
  height: 0vw;
  top:0vw;
  }
  100% {
  height: 14vw;
  top:0;
  }
}
.oytg-cts-mainvisual.fix .scroll:after {
  height: 14vw;
}
.oytg-cts-mainvisual:before {
  content: "";
  width: 3.23%;
  height: 46.7%;
  margin-bottom: -1%;
  background: #ffffff;
  -webkit-transform: skewY(8.3deg);
  -ms-transform: skewY(8.3deg);
  transform: skewY(8.3deg);
  position: absolute;
  bottom: 1%;
  -webkit-transition:bottom 2s;
  -o-transition:bottom 2s;
  transition: bottom 2s linear;
  left: 0;
  z-index: 1;
}
.oytg-cts-mainvisual.fix:before {
  bottom:0;
}
.oytg-cts-mainvisual:after {
  content: "";
  width: 1.15%;
  height: 94.9%;
  margin-top: -0.95%;
  background: #ffffff;
  -webkit-transform: skewY(8.5deg);
  -ms-transform: skewY(8.5deg);
  transform: skewY(8.5deg);
  position: absolute;
  top: 0;
  right: 0;
}
/* --------------------------------------------------
.oytg-cts-title
 --------------------------------------------------- */
.oytg-cts-title{
  overflow:hidden;
}
.oytg-cts-title .inner {
  padding: 70px 0 68px;
}
.oytg-cts-title h2 {
  width: 38.575%;
  margin: 5.5% 0 0 13.45%;
  display: inline-block;
}
.oytg-main .logo-area {
  display: inline-block;
  width: 28.15%;
  vertical-align: top;
  margin: -0.2% 0 -0.2% 34.4%;
}
.oytg-main h2 + .logo-area {
 width: 31.25%;
  margin:0 0 0 4.8%;
}
.oytg-main .logo-area p {
  width: 70.314%;
  margin: 3.8% 0 0 12.7%;
}
.oytg-main .logo-tokyo2020 {
  width: 33.75%;
  border-right: #979595 1px solid;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  padding-right: 5.2%;
}
.oytg-main .logo-ana {
  margin-left: -1px;
  width: 51.7%;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  padding: 18.05% 0 0 4.7%;
}
/* --------------------------------------------------
.oytg-cts-statement
 --------------------------------------------------- */
.oytg-cts-statement {
  background: url(/hbhf/promotion/1yeartogo/images/bg_statement_pc.jpg?2) no-repeat;
  background-size: cover;
  background-position: 96% 100%;
  width: 96.875%;
  margin-left: 0.5%;
}
.oytg-cts-statement .inner {
  padding: 0 0 96px;
  left: 1.1%;
}
.oytg-cts-statement .statement{
  padding-top: 9.8%;
  width: 34.571%;
  margin-left: 32.4%;
}
.oytg-cts-statement p + p{
  margin-top: 11.3%;
}
.oytg-cts-statement hr{
  width: 51.7%;
  display:inline-block;
  margin: 12% 0 20.4% -0.8%;
  border: none;
  border-top: #fff 1px solid;
}
.oytg-cts-statement p img {
  margin-bottom: 8.9%;
}

.oytg-cts-statement a {
  display: block;
  position: relative;
  width: 25.65em;
  margin: 3.7% auto 0;
  background: #00459b;
  color: #fff;
  border: #fff 1px solid;
  text-decoration: none;
  padding: 1.07em 1.2em;
  font-size: 1.32em;
  letter-spacing: 0.09em;
  -webkit-transition: background .2s;
  -o-transition: background .2s;
  transition: background .2s;
}
.oytg-cts-statement a:after {
  content: "";
  border: #fff 1.3px solid;
  width: 0.65em;
  height: 0.65em;
  position: absolute;
  display: inline-block;
  border-left: 0;
  border-bottom: 0;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  margin: 4.45% 4.5% 0 0;
  -webkit-transition: margin .08s;
  -o-transition: margin .08s;
  transition: margin .08s;
  right: 0;
  top: 0;
}
/* --------------------------------------------------
.oytg-cts-gallery
 --------------------------------------------------- */
.oytg-cts-gallery .clm-movie {
  background: url(/hbhf/promotion/1yeartogo/images/bg_gallery_movie_pc.png) no-repeat;
  background-size: contain;
  background-size: 100% 100%;
  position: relative;
  z-index: 1;
  margin-bottom: -243px;
}
.oytg-cts-gallery .clm-movie.add-info{
  background: url(/hbhf/promotion/1yeartogo/images/bg_gallery_movie_2_pc.png) no-repeat;
  background-size: 100% 100%;
  color: #fff;
  padding-bottom: 215px;
  margin-bottom: -280px;
}
.oytg-cts-gallery .movie-holder {
  padding: 14.2% 0 3.7%;
  position: relative;
}
.oytg-cts-gallery .embed {
  width: 100%;
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
  background: #000;
  -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0 20px 5px;
          box-shadow: rgba(0, 0, 0, 0.4) 0 0 20px 5px;
}
.oytg-cts-gallery .embed .holder{
  background: #000;
  display:none;
  opacity:0;
}
.oytg-cts-gallery .embed .holder,
.oytg-cts-gallery .embed iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.oytg-cts-gallery .thumbnail {
  opacity: 0.5;
  width: 100%;
  cursor: pointer;
  -webkit-transition: opacity .4s;
  -o-transition: opacity .4s;
  transition: opacity .4s;
}
.oytg-cts-gallery .playmark {
  position: absolute;
  top: 0;
  left: 0;
  width: 9.571%;
  margin: 22.6% 0 0 45.2%;
  pointer-events: none;
  -webkit-transition: -webkit-transform .4s;
  transition: -webkit-transform .4s;
  -o-transition: transform .4s;
  transition: transform .4s;
  transition: transform .4s, -webkit-transform .4s;
}

.oytg-cts-gallery .clm-movie h3{
  font-size: 1.8em;
  line-height:1.4;
  letter-spacing:0.1em;
}
.oytg-cts-gallery .clm-movie p{
  font-size: 1.15em;
  line-height:1.75;
  letter-spacing: 0.07em;
  margin-top: 1.3%;
  display: inline-block;
  vertical-align: bottom;
}
.oytg-cts-gallery .clm-movie a.icon-info{
  display: inline-block;
  vertical-align: bottom;
  margin-bottom: 9px;
  transition:opacity .2s;
}
.oytg-cts-gallery .clm-movie a.icon-info:hover,
.oytg-cts-gallery .clm-movie a.icon-info:focus{
  opacity:0.6;
}
.oytg-cts-gallery .clm-ad {
  background: url(/hbhf/promotion/1yeartogo/images/bg_gallery_ad_pc.jpg) no-repeat;
  background-position: 50% 100%;
  background-size: 100% 100%;
}
.oytg-cts-gallery .clm-ad h3 {
  position: relative;
  margin-top: 6.4%;
  margin-left: -0.1%;
  width: 26.856%;
  padding-top: 20.6%;
}
.oytg-cts-gallery .clm-ad h3 span img{
  position:relative;
  top: 3em;
  -webkit-transition: 0s;
  -o-transition: 0s;
  transition: 0s;
}
.oytg-cts-gallery .clm-ad h3.end span img{
  -webkit-transition:top 0.6s;
  -o-transition:top 0.6s;
  transition:top 0.6s;
  -webkit-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  transition-delay: 0.4s;
  top: 0;
  width: 100%;
}
.oytg-cts-gallery .clm-ad h3 span{
  height: 0;
  padding-bottom: 15.2%;
  -webkit-transition: 0s;
  -o-transition: 0s;
  transition: 0s;
}
.oytg-cts-gallery .clm-ad h3.end span{
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  -webkit-transition-delay: 0.8s;
       -o-transition-delay: 0.8s;
          transition-delay: 0.8s;
  padding-bottom: 18.8%;
  margin-bottom: -3.5%;
}
.oytg-cts-gallery .clm-ad h3:after {
  content: "";
  width: 270%;
  height: 2px;
  background: #fff;
  position: absolute;
  bottom: 0;
  right: 5%;
}
.oytg-cts-gallery .clm-ad ul {
  margin: 8.8% 0 0;
  width: 100.1%;
  padding-bottom: 7.15%;
}
.oytg-cts-gallery .clm-ad li {
  background:#fff;
  display: inline-block;
  margin-right: 4.6%;
  vertical-align: top;
  width: 30.244%;
  cursor: pointer;
  margin-bottom: 4.6%;
  -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0 20px -1px;
          box-shadow: rgba(0, 0, 0, 0.4) 0 0 20px -1px;
}
.oytg-cts-gallery .clm-ad li img{
  -webkit-transition:opacity .2s;
  -o-transition:opacity .2s;
  transition:opacity .2s;
  opacity:1;    
}
.oytg-cts-gallery .clm-ad li:hover img,
.oytg-cts-gallery .clm-ad a:focus img{
  opacity:0.7;
}
.oytg-cts-gallery .clm-ad li:nth-child(3n) {
  margin-right: 0;
  margin-top: -13.7%;
}
.oytg-cts-gallery .clm-ad li:nth-child(3n-1) {
  margin-top: -6.8%;
}
/* --------------------------------------------------
.oytg-cts-links
 --------------------------------------------------- */
.oytg-cts-links .inner {
  padding: 110px 0 116px;
}
.oytg-cts-links .banner {
  width: 100%;
  display: block;
  margin-bottom: 30px;
}
.oytg-cts-links .banner img{
  -webkit-transition: opacity .2s;
  -o-transition: opacity .2s;
  transition: opacity .2s;
}
.oytg-cts-links .copy {
  width: 85.06%;
  margin: 10.6% 0 9.9% 7.45%;
}
.oytg-cts-links .logo-area {
  width: 23.95%;
  margin-left: 38.6%;
}
/* --------------------------------------------------
footer
 --------------------------------------------------- */
.l-footer {
  position: relative;
  width: 100%;
}
.l-footer--lower {
  background: #002063;
  font-size: 1.2rem;
  position: relative;
}
.l-footer--lower__inner {
  margin: 0 auto;
  max-width: 1280px;
  padding: 20px 10px;
}
.p-footer--lower__link ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  margin-right: -15px;
  font-size: 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.p-footer--lower__link ul li {
  display: inline-block;
  margin-right: 15px;
  font-size: 1.2rem;
}
.p-footer--lower__link a {
  color: #fff !important;
}
.p-footer--lower__link a:hover, .p-footer--lower__link a:focus {
  text-decoration: none;
}
.p-footer--lower__star:hover, .p-footer--lower__star:focus {
  outline-color: #fff;
}
.p-footer--lower__copy, .p-footer--lower__link {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 10px;
}
.u-basefont {
  color: #fff !important;
}
.blank {
  display: inline-block;
  margin-left: 5px;
}
.blank img {
  vertical-align: middle;
  width: auto!important;
  max-width: 100%!important;
}
/*pagetop*/
.js-pagetop {
  position: relative;
  z-index: 5;
  display: block !important;
}
.js-pagetop p {
  position: fixed;
  bottom: 20px;
  right: 20px;
  visibility: hidden;
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
  opacity:0;
}
.reach .js-pagetop p {
  position: absolute;
}
.scrolled .js-pagetop p {
  visibility: visible;
  opacity:1;
}
.js-pagetop a {
  display: inline-block;
  background: #438dae;
}
/* --------------------------------------------------
.oytg-modal
 --------------------------------------------------- */
.oytg-modal {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 11;
  max-width: 100vw;
}
.oytg-modal.open {
  display: block;
  opacity: 1;
}
.oytg-modal .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
}
.oytg-modal .cts-modal {
  position: absolute;
  left: 50%;
  top: 53%;
  width: 88%;
  max-width: 1024px;
  margin:0 auto;
  -ms-transform: translate(-50%,-50%);
      transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%, -50%);
  background: #fff;
  -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0 20px -1px;
          box-shadow: rgba(0, 0, 0, 0.4) 0 0 20px -1px;
}

@media (min-aspect-ratio: 6/5) {
  .oytg-modal .cts-modal {
   max-width: 110vh;
  }
}
.oytg-modal .cts-modal img{
  pointer-events:none;
  -ms-user-select: none; /* IE 10+ */
  -moz-user-select: -moz-none;
  -webkit-user-select: none;
  user-select: none;
}
.oytg-modal .cts-modal .embed {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 0;
  padding-bottom: 70.997%;
}
.oytg-modal .cts-modal .embed .adimg{
  position: absolute;
  top: 0;
  left: 0;
  width:100%;
  height:100%;
  opacity: 0;
}
.oytg-modal .cts-modal .embed .spinner{
  position:absolute;
  width:40px;
  height:40px;
  top:50%;
  left:50%;
  margin:-20px;
}
.oytg-modal .close {
  position: absolute;
  top: 0;
  right: -25px;
  margin: -80px 0 0 0;
  width: 80px;
  height: 80px;
  opacity: 1;
  cursor: pointer;
  -webkit-transition: opacity .2s;
  -o-transition: opacity .2s;
  transition: opacity .2s;
  background: url(/hbhf/promotion/1yeartogo/images/button_close_modal.png) no-repeat center;
  background-size:31px;
  background: none;
}   
.oytg-modal .close a {
  display: block;
  width: 50%;
  height: 50%;
  margin:25%;
  z-index:0;   
}
.oytg-modal .prev a {
  display: block;
  width: 10%;
  height: 10%;
  margin:64% 0 0 -12%;
  z-index:0;   
}
.oytg-modal .next a {
  display: block;
  width: 10%;
  height: 10%;
  margin:64% 0 0 102%;
  z-index:0;   
}
.oytg-modal .close img{
  position:absolute;
  width:31px;
  bottom: 24px;
  right: 24px;
}
.oytg-modal .button {
  position: absolute;
  top: 0;
  left: -4.85%;
  padding-left: 4.85%;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  margin: 0;
  width: 50%;
  height: 100%;
  opacity: 1;
  cursor: pointer;
  -webkit-transition: opacity .2s;
  -o-transition: opacity .2s;
  transition: opacity .2s;
  background: url(/hbhf/promotion/1yeartogo/images/button_prev_modal.png) no-repeat left center;
  background-size: 4.45%;
  z-index: 1;
  background: none !important;
}
.oytg-modal .button.enable,
.oytg-modal .button.enable:hover {
  opacity:0.1;
  cursor: default;
}
.oytg-modal .next {
  left:auto;
  padding-left: 0;
  right: -4.85%;
  padding-left: 0;
  padding-right: 4.85%;
  background: url(/hbhf/promotion/1yeartogo/images/button_next_modal.png) no-repeat right center;
  background-size: 4.45%;
}
.oytg-modal .button img{
  width:4.45%;
  top: 46.8%;
  position: absolute;
}
.oytg-modal .next img{
  right:0%;
}
.oytg-modal .prev img{
  left:0%;
}


/* --------------------------------------------------
.oytg-modal-info
 --------------------------------------------------- */
.oytg-modal-info {
  visibility: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 11;
  max-width: 100vw;
  opacity:0;
  transition: .5s;
}
.oytg-modal-info.open {
  visibility: visible;
  opacity: 1;
}
.oytg-modal-info .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity:0.8;
}
.oytg-modal-info .cts-info {
  position: absolute;
  left: 50%;
  top: 46.4%;
  width: 84%;
  max-width: 768px;
  padding: 40px;
  margin:0 auto;
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%, -50%);
  background: #fff;
  -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0 20px -1px;
  box-shadow: rgba(0, 0, 0, 0.4) 0 0 20px -1px;
}
.oytg-modal-info .cts-info p{
  font-size: 1.6rem;
  line-height: 1.6;
}
.oytg-modal-info .cts-info p + p{
  margin-top: 0.8em;
}
.oytg-modal-info .cts-info .close a{
  position:absolute;
  top:0;
  right:0;
  margin: -34px -30px 0 0;
  background: #fff;
  line-height: 1;
  text-indent: 100%;
  display: block;
  overflow: hidden;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  white-space: nowrap;
  text-decoration:none !important;
}
.oytg-modal-info .cts-info .close a:after,
.oytg-modal-info .cts-info .close a:before{
  content:"";
  position:absolute;
  width: 3px;
  height: 19px;
  background:#000;
  top: 3.5px;
  left: 11.5px;
  transform:rotate(45deg);
}
.oytg-modal-info .cts-info .close a:focus,
.oytg-modal-info .cts-info .close a:hover{
  background-color: #034ea2;
}
.oytg-modal-info .cts-info .close a:focus:after,
.oytg-modal-info .cts-info .close a:focus:before,
.oytg-modal-info .cts-info .close a:hover:after,
.oytg-modal-info .cts-info .close a:hover:before{
  background:#fff;
}
.oytg-modal-info .cts-info .close a:after{
  transform: rotate(-45deg);
}

@media (min-width: 1920px) {
  .oytg-cts-mainvisual .scroll {
  max-width: 0.9%;
  }
}

@media (max-width: 1600px) {
  .oytg-main .inner.wide {
    width: 64.947%;
  }
  .oytg-cts-title .inner {
    padding: 3.65% 0 3.5%;
  }
  .oytg-cts-links .inner {
    padding: 6.95% 0 6.1%;
  }
}

@media (max-width: 1140px) {
  .oytg-main .inner {
    width: 91.8667%;
  }
  .oytg-cts-mainvisual .inner{
    width:100%;
  }
  .oytg-main .inner.wide {
      width: 730px;
  }
  .oytg-cts-title .inner {
    padding: 37px 0 35px;
  }
  .oytg-cts-statement{
    font-size: 1.23vw;
  }
  .oytg-cts-statement .inner {
    padding: 0 0 8.8%;
  }
  .oytg-cts-links .inner {
    padding: 78px 0 68px;
  }
  .oytg-cts-gallery .clm-movie {
    margin-bottom: -21.5%;
  }
}
@media (max-width: 1024px) {
  .oytg-cts-mainvisual {
    padding-bottom: 0;
    height: 410px;
  }
  .oytg-cts-mainvisual:before {
    width: 33px;
    height: 182.9px;
    margin-bottom: 5%;
    bottom: -65px !important;
    left: 0;
    z-index: 1;
    -webkit-transition: 0s;
    -o-transition: 0s;
    transition: 0s;
  }
  .oytg-cts-mainvisual .bg-animation .images{
    display: block;
    margin-left: calc(-410px + 40vw);
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .oytg-cts-mainvisual .bg-animation .bg01{
    top: -5.2%;
  }
  .oytg-cts-mainvisual .bg-animation .bg02{
    top: 18.2%;
  }
  .oytg-cts-mainvisual.fix .bg-animation .bg03{
    top: 8.1%;
  }
  .oytg-cts-mainvisual:after {
    width: 11px;
    height: 377px;
    margin-top: 8%;
    left:auto;
    top: -79.2px;
    right: 0;
  }
  .oytg-cts-mainvisual .copy {
    top: 4vw;
    margin-top: 247px;
    min-width: 200px;
    width: 24%;
  }
  .oytg-cts-mainvisual .scroll {
    left: 8px;
    width: 1.2%;
    top: 70.6%;
  }
  /* --------------------------------------------------
    footer
    --------------------------------------------------- */
  .l-footer--lower__inner {
    max-width: 100%;
    padding: 10px;
  }
  .p-footer--lower__top {
    margin-bottom: 10px;
    text-align: center;

  }
  .p-footer--lower__toplink {
    text-align: center;
  }
  .p-footer--lower__copy, .p-footer--lower__link {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .p-footer--lower__link {
    margin-top: 0;
  }
  .p-footer--lower__link ul {
    margin-right: 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .p-footer--lower__link ul li {
    margin-right: 0;
    margin-bottom: 10px;
  }
  .p-footer--lower__logo {
    padding-top: 10px;
  }
}
@media (max-width: 986px) {
  .oytg-cts-statement .inner {
    padding: 0 0 83px;
  }
  .oytg-cts-statement .statement {
    position: relative;
    width: 23.6em;
    margin: 0 auto;
    left: -0.5%;
  }
  .oytg-cts-statement a {
  }
  .oytg-cts-statement{
    font-size: 12.15px;
  }
}
@media (min-width: 768px) {
  .for-sp {
    display:none !important;
  }
  .oytg-cts-statement a:hover,
  .oytg-cts-statement a:focus {
    background: #0e58b5;
  }
  .oytg-cts-statement a:hover:after,
  .oytg-cts-statement a:focus:after {
    margin-right: 4.2%;
  }
  .oytg-cts-gallery .embed:hover img,
  .oytg-cts-gallery .embed a:focus img {
    opacity:0.8
  }
  .oytg-cts-gallery .embed:hover .playmark,
  .oytg-cts-gallery .embed a:focus .playmark {
    -webkit-transform:scale(1.1);
        -ms-transform:scale(1.1);
            transform:scale(1.1);
  }
  .oytg-cts-links .banner:hover img,  
  .oytg-cts-links .banner a:focus img{
    opacity: 0.75;
  }
  .js-pagetop a:hover, .js-pagetop a:focus {
    background: #7cb8d2;
  }   
  .oytg-modal .close:hover,
  .oytg-modal .button:hover {
    opacity: 0.5;
  }
}
@media screen and (max-width: 767px){
  .for-pc {
    display:none !important;
  }
  /* --------------------------------------------------
  .oytg-main
   --------------------------------------------------- */
  .oytg-main{
    border-top: #dcdcdc 0.5px solid;
  }
  .oytg-main .inner,
  .oytg-main .inner.wide {
    width: 100%;
    max-width: 1024px;
  }
  /* --------------------------------------------------
  .oytg-cts-mainvisual
   --------------------------------------------------- */
  .oytg-cts-mainvisual {
    padding-bottom: 106.1%;
    height: 0;
    margin-left: 0;
    background-position: center bottom;
    padding-top: 1%;
  }
  .oytg-cts-mainvisual .inner {
    max-width: 100%;
  }
  .oytg-cts-mainvisual .spinner{
    width:6vw;
    margin:-3vw;
  }
  .oytg-cts-mainvisual .bg-animation{
    min-width: 0;
    width: 98.934%;
    left: 0.666%;
    top: 1.5vw;
  }
  .oytg-cts-mainvisual .bg-animation .images{
    margin-left: -0.4%;
    width: 100.405%;
  }
  .oytg-cts-mainvisual .bg-animation .bg01{
    -webkit-transform: translate(3.4%, 0.06%);
    -ms-transform: translate(3.4%, 0.06%);
    transform: translate(3.4%, 0.06%);
    top: -2.3%;
    left: -2.95%;
    width: 100.94%;
  }
  .oytg-cts-mainvisual .bg-animation .bg02{
    -webkit-transform: translate(-4%, -0.8%);
    -ms-transform: translate(-4%, -0.8%);
    transform: translate(-4%, -0.8%);
    top: 37.1%;
    left: 0.5%;
    width: 102.552%;
    max-width: 200%;
  }
  .oytg-cts-mainvisual.fix .bg-animation .bg01,
  .oytg-cts-mainvisual.fix .bg-animation .bg02{
    -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  .oytg-cts-mainvisual.fix .bg-animation .bg03{
    top:0;
    left: 0.4%;
  }
  .oytg-cts-mainvisual h1 {
    padding: 3.8% 0 0 4.52%;
    width: 51.2%;
    min-width: 0;
  }
  .oytg-cts-mainvisual .copy {
    right: auto;
    left: 14.5%;
    top: 85.5%;
    width: 30.5%;
    line-height: 0;
    max-width: 301px;
    min-width: 0;
    margin-top: 0;
  }
  .oytg-cts-mainvisual .copy .hidden img {
    top: 3vw;
  }
  .oytg-cts-mainvisual .copy:after {
    left: auto;
    width: 140%;
    height: 1px;
    bottom: -1px;
    -webkit-transform: scaleY(0.5);
        -ms-transform: scaleY(0.5);
            transform: scaleY(0.5);
    opacity: 1;
    right: 140%;
    -webkit-transition: right 1s cubic-bezier(0.4, 0.15, 0.2, 1);
    -o-transition: right 1s cubic-bezier(0.4, 0.15, 0.2, 1);
    transition: right 1s cubic-bezier(0.4, 0.15, 0.2, 1);
    -webkit-transition-delay: 1s;
         -o-transition-delay: 1s;
            transition-delay: 1s;
  }
  .oytg-cts-mainvisual.fix .copy:after {
    right: -1%;
    left: auto;
  }
  .oytg-cts-mainvisual .scroll {
    left: auto;
    right: 2.6%;
    top: 84.9%;
    width: 2%;
    z-index: 1;
  }
  .oytg-cts-mainvisual .scroll:after {
    width: 1px;
    height: 340%;
    top: -1px;
    right: -0.6px;
    -webkit-transform: scaleX(0.5);
        -ms-transform: scaleX(0.5);
            transform: scaleX(0.5);
  }
  @-webkit-keyframes line-anm-v {
    0% {
      height: 18vw;
      top:0;
    }
    50% {
      height: 18vw;
      top:18vw;
    }
    50.1% {
      height: 0vw;
      top:0vw;
    }
    100% {
      height: 18vw;
      top:0;
    }
  }
  .oytg-cts-mainvisual.fix .scroll:after {
    height: 168%;
    -webkit-transition: height 2s;
    -o-transition: height 2s;
    transition: height 2s;
    -webkit-transition-delay: 2s;
         -o-transition-delay: 2s;
            transition-delay: 2s;
    -webkit-animation-delay: 2.4s;
            animation-delay: 2.4s;
  }
  .oytg-cts-mainvisual:before{
    width: 4.5%;
    margin-bottom: -2.7%;
    height: 34.5%;
    bottom: 0 !important;
  }
  .oytg-cts-mainvisual:after {
    width: 2.4%;
    margin-top: -1%;
    height: 81.4%;
    top: 0;
  }
  /* --------------------------------------------------
  .oytg-cts-title
   --------------------------------------------------- */
  .oytg-cts-title .inner {
    padding: 4.1% 0 2.2%;
  }
  .oytg-cts-title h2 {
    width: 36.637%;
    margin: 5.7% 0 0 14.55%;
  }
  .oytg-cts-title h2 img{
    /* height: 2.3em; */
  }
  .oytg-main .logo-area {
    width: 27.1%;
    margin: 0.1% 0 -0.9% 36.7%;
  }
  .oytg-main h2 + .logo-area {
    width: 30.15%;
    margin: 0 0 0 3.6%;
  }
  .oytg-main .logo-area p {
    width: 73.125%;
    margin: 4.4% 0 0 13.2%;
  }
  .oytg-main .logo-tokyo2020 {
    width: 35.313%;
    border-right: #979595 0.5px solid;
    padding-right: 5.2%;
  }
  .oytg-main .logo-ana {
    margin-left: -1px;
    width: 53.75%;
    padding: 18.95% 0 0 5.1%;
  }
  /* --------------------------------------------------
  .oytg-cts-statement
   --------------------------------------------------- */
  .oytg-cts-statement {
    background: url(/hbhf/promotion/1yeartogo/images/bg_statement_sp.jpg?2) no-repeat;
    background-size: cover;
    background-position: 96% 100%;
    width: 96.7%;
    margin-left: 0.8%;
  }
  .oytg-cts-statement .inner {
    padding: 0 0 15.3%;
    left: 1.8%;
  }
  .oytg-cts-statement .statement {
    width: 43.9%;
    width: 12.74em;
    margin: 0 auto;
    left: -0.7%;
    position: relative;
    padding-top: 13.9%;
  }
  .oytg-cts-statement p img {
    margin-bottom: 1.17em;
    height: 0.99em;
    width: 100%;
  }
  .oytg-cts-statement hr{
    width: 51.7%;
    margin: 11.8% 0 19.5% -0.8%;
    border-top: #fff 0.05em solid;
  }
  .oytg-cts-statement a {
    width: 17.05em;
    margin: 5.2% auto 0;
    left: -1.4%;
    border: #fff 0.5px solid;
    padding: 0.67em 0em 0.37em 0.8em;
    font-size: 0.72em;
    line-height: 1.49;
    letter-spacing: 0em;
  }
  .oytg-cts-statement a:after {
    content: "";
    position: relative;
    border: #fff 0.5px solid;
    width: 0.53em;
    height: 0.53em;
    border-left: 0;
    border-bottom: 0;
    margin: 0 0 0.65% 0.9%;
  }
  /* --------------------------------------------------
  .oytg-cts-gallery
   --------------------------------------------------- */
  .oytg-cts-gallery .clm-movie {
    background: url(/hbhf/promotion/1yeartogo/images/bg_gallery_movie_sp.png) no-repeat;
    background-size: 100% 100%;
    z-index: 1;
  }
  .oytg-cts-gallery .clm-movie.add-info{
    background: url(/hbhf/promotion/1yeartogo/images/bg_gallery_movie_2_sp.png) no-repeat;
    background-size: 100% 100%;
    padding-bottom: 18.8%;
    margin-bottom: -9.6%;
  }
  .oytg-cts-gallery .movie-holder {
    padding: 10.2% 0 2.4%;
    width: 86.8%;
    margin: 0 auto;
  }
  .oytg-cts-gallery .embed {
    width: 100%;
    -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0 0.6em 0.1em;
            box-shadow: rgba(0, 0, 0, 0.4) 0 0 0.6em 0.1em;
  }
  .oytg-cts-gallery .thumbnail {
    width: 100%;
  }
  .oytg-cts-gallery .playmark {
    width: 5.1%;
    margin: 25.1% 0 0 48.2%;
  }

  .oytg-cts-gallery .clm-movie h3{
    font-size: 1em;
    margin-left: 6.8%;
    line-height: 1.45;
    letter-spacing:0.1em;
  }
  .oytg-cts-gallery .clm-movie p{
    font-size: 0.73em;
    line-height:1.75;
    letter-spacing: 0;
    margin-top: 1%;
    margin-left: 5.3%;
    text-indent: 0.5em;
  }
  .oytg-cts-gallery .clm-movie a.icon-info{
    margin: 2.7% 46.6% 0%;
    width: 6.6%;
    text-align: center;
  }

  .oytg-cts-gallery .clm-ad {
    background: url(/hbhf/promotion/1yeartogo/images/bg_gallery_ad_sp.jpg) no-repeat;
    background-position: 50% 100%;
    background-size: cover;
  }
  .oytg-cts-gallery .clm-ad h3 {
    margin-top: 0;
    margin-left: 6.7%;
    width: 40.1%;
    padding-top: 13.5%;
  }
  .oytg-cts-gallery .clm-ad h3:after {
    width: 115%;
    height: 1px;
    bottom: 0;
    right: 5%;
  }
  .oytg-cts-gallery .clm-ad h3 span{
    padding-bottom: 15.2%;
    -webkit-transition: 0s;
    -o-transition: 0s;
    transition: 0s;
  }
  .oytg-cts-gallery .clm-ad h3.end span{
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    -webkit-transition-delay: 1s;
         -o-transition-delay: 1s;
            transition-delay: 1s;
    padding-bottom: 18.8%;
    margin-bottom: -3.6%;
  }
  .oytg-cts-gallery .clm-ad ul {
    margin: 11.6% 0 0 6.7%;
    width: 86.8%;
    padding-bottom: 8.95%;
  }
  .oytg-cts-gallery .clm-ad li {
    margin-right: 7.9%;
    width: 46.044%;
    margin-bottom: 7%;
    -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0 0.6em 0.1em;
            box-shadow: rgba(0, 0, 0, 0.4) 0 0 0.6em 0.1em;
  }
  .oytg-cts-gallery .clm-ad li:nth-child(3n) {
    margin-right: 7.9%;
    margin-top: 0;
  }
  .oytg-cts-gallery .clm-ad li:nth-child(2n) {
    margin-right: 0;
    margin-top: -10.6%;
  }
  .oytg-cts-gallery .clm-ad li:nth-child(3n-1) {
     margin-top: 0;
  }
  .oytg-cts-gallery .clm-ad li:nth-child(2) {
    margin-top: -10.6%;
  }
  /* --------------------------------------------------
  .oytg-cts-links
   --------------------------------------------------- */
  .oytg-cts-links .inner {
    padding: 12.1% 0 11.5%;
  }
  .oytg-cts-links .banner {
    width: 79.9%;
    display: block;
    margin: 0 auto 30px;
  }
  .oytg-cts-links .copy {
    width: 80.26%;
    margin: 17.4% 0 10.4% 9.75%;
  }
  .oytg-cts-links .logo-area {
    width: 35.95%;
    margin-left: 32.1%;
  }
  /* --------------------------------------------------
  .oytg-modal
   --------------------------------------------------- */

  .oytg-modal .cts-modal {
    width: 94.4%;
    top: 49%;
  }
  .oytg-modal .cts-modal .embed {
    padding-bottom: 70.997%;
  }
  .oytg-modal .cts-modal .embed .spinner{
    width:6vw;
    height:auto;
    margin:-3vw;
  }
  .oytg-modal .close {
    right: -3.7%;
    margin: -12.6% 0 0 0;
    width: 12.1vw;
    height: 12.1vw;
    background-size: 40.6%;
  }
  .oytg-modal .close img {
      width: 40.6%;
      bottom: 29%;
      right: 29%;
  }
  @media (min-aspect-ratio: 6/5) {
    .oytg-modal .close {
      width: 13%;
      height: 0;
      padding-bottom: 14%;
    }
  }
  .oytg-modal .button {
    left: -4.85%;
    height: 120%;
    padding-left: 4.85%;
    background-position: 79% 94.7%;
    background-size: 6.95%;
  }
  .oytg-modal .next {
    left: auto;
    right: -4.85%;
    padding-left: 0;
    padding-right: 4.85%;
    background-position: 21.8% 94.7%;
    background-size: 6.95%;
  }
  .oytg-modal .button img{
    width:6.95%;
    top: auto;
    bottom: 5%;
  }
  .oytg-modal .next img{
    right: 72.7%;
  }
  .oytg-modal .prev img{
    left: 72.7%;
  }

  .oytg-modal-info .cts-info {
    top: 50%;
    padding: 1.7em 0.3em 1.7em 1.1em;
    font-size: 3.8vw;
  }
  .oytg-modal-info .cts-info p{
    font-size: 0.88em;
    line-height: 1.6;
  }
  .oytg-modal-info .cts-info p + p{
    margin-top: 0.8em;
  }
  .oytg-modal-info .cts-info .close a{
    margin: -34px 0px 0 0;
  }
}
@media screen and (min-width: 380px) and (max-width: 767px){
  .oytg-cts-statement{
    font-size: 3.65vw;
  }
}