@charset "utf-8"; @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&family=Noto+Serif:ital@0;1&display=swap'); /*tmp overwrite*/ /*-------------------------------------------------------*/ #header{ position: relative; z-index: 5001; } #footer{ z-index: 5000; position: relative; } .article{ min-height: 0; } #footer .contain{ display: none; } #footer .wrap-link-footer{ display: none; } .com-footer__main { background-color: #112f59; } .btn-top-sp{ display: none; } /*initialize*/ /*-------------------------------------------------------*/ #special-content{ overflow: hidden; position: relative; } #special-content *{ font-family: 'YakuHanJP','Noto Sans Japanese',sans-serif; } #special-content a{ display: block; } #special-content img{ width: 100%; height: auto; line-height: 0; vertical-align: middle; } #special-content .defs{ position: absolute; z-index: -9999; width: 0; height: 0; overflow: hidden; } #special-content .sp{ display: none; } @media only screen and (max-width: 767px) { #special-content .pc{ display: none; } #special-content .sp{ display: block; } #special-content img.sp{ display: inline; } } /*contetnt*/ /*-------------------------------------------------------*/ #loader{ position: fixed; width: 100%; margin-top: 63px; top: 50%; left: 0; transform: translateY(-50%); z-index: 4000; } #loader .txt{ width: 42.0588%; position: relative; left: 50%; transform: translateX(-50%); z-index: 4400; } #loader .bar{ margin-top: 2.7941%; width: 100%; position: relative; } #loader .bar .fill{ position: absolute; left: 0; width: 100%; height: 100vh; background-color: #112f59; } #loader .bar .fill-t{ bottom: 0; } #loader .bar .fill-b{ top: 0; } #loader .bar .progress{ height: 1px; background-color: #ffffff; position: relative; z-index: 4200; transform: scaleX(0); } #special-content .kv{ position: relative; width: 100%; background-color: #112f59; } #special-content .kv .logo{ position: absolute; left: 0; top: 0; width: 26.8382%; margin: 23.1164% 0 0 9.6133%; z-index: 10; } #special-content .kv .txt{ position: absolute; left: 0; top: 0; width: 10.8823%; margin: 5.7750% 0 0 17.6166%; z-index: 10; } #special-content .util-navi-wrapper{ width: 100%; } #special-content .util-navi-wrapper.fixed{ position: fixed; z-index: 2000; bottom: 0; transform: translateY(100%); margin-bottom: -13.3823%; } #special-content .util-navi-wrapper.active{ transform: translateY(0); margin-bottom: 0; } #special-content .util-navi-wrapper.end{ position: absolute; } #special-content .util-navi{ background-color: #8e8461; position: relative; width: 100%; z-index: 2000; } #special-content .util-navi .btn{ position: absolute; left: 0; bottom: 100%; width: 12.3529%; margin: 0 0 1.0294% 86.3235%; } #special-content .util-navi .btn a{ display: block; box-shadow: 0 0.3676vw 0.3676vw rgba(0,0,0,0.3); border-radius: 50%; } #special-content .util-navi .navi-list{ width: 69.8529%; margin: 0 auto; display: flex; display: -ms-flex; border: solid #cbc7bb; border-width: 0 1px; } #special-content .util-navi .navi-list .navi{ flex: 1; } #special-content .util-navi .navi-list .navi:nth-child(n+2){ border-left: 1px solid #cbc7bb; } #special-content .util-navi .navi-list .navi a{ text-decoration: none; color: #ffffff; display: flex; display: -ms-flex; justify-content: center; align-items: center; height: 3.6764vw; font-size: 1.25vw; line-height: 1.125; text-align: center; } #special-content .cp-dummy{ padding-top: 200%; position: relative; z-index: 9999; pointer-events: none; display: none; } #special-content .cp-dummy.active{ display: block; } #special-content .cp-dummy .equipment-box{ position: absolute; left: 0; top: 0; width: 100%; padding-top: 200%; } #special-content .cp-wrapper{ overflow: hidden; transform: translateY(0); } #special-content .cp-wrapper.fixed{ position: fixed; left: 0; top: 0; } #special-content .section-story{ position: relative; left: 0; top: 0; padding: 8.0882% 0 10.5882%; } #special-content .section-story .base-bg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; } #special-content .section-story .base-bg .bg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: center center no-repeat; background-size: cover; } #special-content .section-story .hero{ width: 88.6029%; /*width: 1205px;*/ margin: 0 auto; position: relative; } #special-content .section-story .hero .ttl{ position: absolute; left: 0; top: 0; width: 76.1825%; z-index: 10; margin: -3.1535% 0 0 -2.3236%; } #special-content .section-story .hero .photo .mask{ mask: center center no-repeat; -webkit-mask: center center no-repeat; } #special-content .section-story .hero .caption{ position: absolute; right: 0; top: 100%; font-size: 0.7352vw; line-height: 1.4545; color: #5c5a7c; margin-top: 0.8298%; } #special-content .section-story .intro{ position: relative; margin-top: 4.9264%; } #special-content .section-story .intro .copy{ width: 51.9117%; margin-left: 24.2647%; } #special-content .section-story .intro .txt{ width: 55.2205%; margin: 2.5735% auto 0; } #special-content .section-story .story{ position: relative; margin-top: 7.3529%; } #special-content .section-story .story .ttl{ width: 3.8235%; position: absolute; left: 0; margin: 0 0 0 78.0532%!important; } #special-content .section-story .story .txt{ position: absolute; left: 0; top: 0; z-index: 20; } #special-content .section-story .story .txt01{ width: 10.2941%; margin: 1.0792% 0 0 63.8743%; } #special-content .section-story .story .txt02{ width: 13.2352%; margin: 6.1764% 0 0 10.4308%; } #special-content .section-story .story .txt03{ width: 16.1764%; margin: 2.2438% 0 0 7.6388%; } #special-content .section-story .story .txt04{ width: 7.3529%; margin: 0.8894% 0 0 72.9460%; } #special-content .section-story .story .txt05{ width: 16.1764%; margin: -2.7765% 0 0 13.0603%; } #special-content .section-story .story .txt06{ width: 13.2352%; margin: 7.5691% 0 0 74.4576%; } #special-content .section-story .story .copy{ position: absolute; left: 0; top: 0; z-index: 30; } #special-content .section-story .story .copy01{ width: 19.2647%; margin: 23.0147% 0 0 70%; } #special-content .section-story .story .copy02{ width: 21.5441%; margin: 16.6911% 0 0 75.3676%; } #special-content .section-story .story .copy03{ width: 21.1764%; margin: 8.2352% 0 0 6.7647%; } #special-content .section-story .story .copy04{ width: 21.25%; margin: 15.8823% 0 0 73.75%; } #special-content .section-story .story .deco{ position: absolute; left: 0; top: 0; z-index: 40; } #special-content .section-story .story .deco01{ width: 17.7205%; margin: 45.2205% 0 0 11.2078%; } #special-content .section-story .story .deco02{ width: 8.8235%; margin: 13.9292% 0 0 23.8904%; } #special-content .section-story .story .scene{ position: relative; } #special-content .section-story .story .scene02{ margin-top: 2.0588%; } #special-content .section-story .story .scene03{ margin-top: 4.5588%; } #special-content .section-story .story .scene04{ margin-top: 8.0882%; } #special-content .section-story .story .scene05{ margin-top: 8.2352%; } #special-content .section-story .story .scene06{ margin-top: 9.5588%; } #special-content .section-story .story .scene .photo{ position: relative; } #special-content .section-story .story .scene .photo01{ width: 36.0294%; margin-left: 20.8093%; } #special-content .section-story .story .scene .photo02{ width: 33.4558%; margin-left: 33.5294%; } #special-content .section-story .story .scene .photo03{ width: 53.8235%; margin: 2.0588% 0 0 46.1769%; } #special-content .section-story .story .scene .photo04{ width: 28.8970%; margin: -7.1957% 0 0 35.3676%; z-index: 10; } #special-content .section-story .story .scene .photo05{ width: 44.6323%; margin-left: 27.7941%; } #special-content .section-story .story .scene .photo06{ width: 35.2941%; margin-left: 31.1029%; } #special-content .section-story .story .scene .photo07{ width: 34.0441%; margin-left: 36.6911%; } #special-content .section-story .story .scene .photo08{ width: 62.1323%; } #special-content .section-story .story .scene .caption{ font-size: 0.7352vw; line-height: 1.6; color: #736d8b; position: absolute; top: 100%; right: 0; } #special-content .section-story .story .scene03 .caption{ margin: 0.3676% 27.5736% 0 0; } #special-content .section-story .story .scene05 .caption{ margin: 0.3676% 29.2648% 0 0; } #special-content .section-story .section-equipment{ margin-top: 13.2353%; position: relative; } #special-content .section-story .section-equipment .base-box{ width: 77.7941%; /*width: 1058px;*/ margin: 0 auto; } #special-content .section-story .section-equipment .base-box .equipment{ width: 173.2514%; /*width: 1833px;*/ padding: 4.7258% 0; overflow: hidden; position: relative; } #special-content .section-story .section-equipment .base-box .equipment .ttl{ width: 30.8634%; margin: 0 0 0 2.9459%!important; position: relative; z-index: 10; } #special-content .section-story .section-equipment .base-box .equipment .bg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; } #special-content .section-story .section-equipment .base-box .equipment .bg img{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; } #special-content .section-story .section-equipment .base-box .equipment .deco{ position: relative; width: 76.9230%; padding-top: 0.0829%; margin: 0.8543% 0 0 2.9459%; } #special-content .section-story .section-equipment .base-box .equipment .deco img{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; } #special-content .section-story .section-equipment .base-box .equipment .list-item{ width: 76.9230%; /*width: 1410px;*/ display: flex; display: -ms-flex; justify-content: space-between; margin: 1.3668% 0 0 2.9459%; position: relative; z-index: 10; } #special-content .section-story .section-equipment .base-box .equipment .list-item .item{ width: 29.5035%; color: #112f59; } #special-content .section-story .section-equipment .base-box .equipment .list-item .item *{ color: inherit; } #special-content .section-story .section-equipment .base-box .equipment .list-item .item .head{ font-size: 1.3970vw; line-height: 1.5; font-weight: bold; display: flex; display: -ms-flex; align-items: center; height: 4.191vw; font-family: 'YakuHanMP',"Noto Serif", serif; } #special-content .section-story .section-equipment .base-box .equipment .list-item .item .head *{ font-family: inherit; } #special-content .section-story .section-equipment .base-box .equipment .list-item .item .photo{ margin-top: 3.125%; border-radius: 1.4705vw; overflow: hidden; } #special-content .section-story .section-equipment .base-box .equipment .list-item .item .photo-caption{ font-size: 0.8088vw; line-height: 1.5454; margin-top: 2.1875%; color: #000000; text-align: right; } #special-content .section-story .section-equipment .base-box .equipment .list-item .item .txt{ font-size: 1.1764vw; line-height: 1.6875; margin-top: 3.125%; font-family: 'YakuHanMP',"Noto Serif", serif; } #special-content .section-story .section-equipment .base-box .equipment .list-item .item .caption{ font-size: 0.8088vw; line-height: 1.5454; margin-top: 2.1875%; color: #000000; } #special-content .section-story .section-equipment .base-box .equipment .btn{ width: 14.6208%; position: absolute; left: 0; top: 0; margin: 13.7601% 0 0 82.4405%; box-shadow: 0.1470vw 0.1470vw 0.3676vw rgba(0,0,0,0.2); background-color: rgba(0,0,0,0.2); } #special-content .section-story .section-equipment .base-box .equipment .btn a{ display: block; } #special-content .section-story .another-navi{ width: 66.9118%; margin: 6.4706% auto 0; } #special-content .section-story .another-navi a{ display: block; position: relative; box-shadow: 0.4779vw 0.4779vw 0.3676vw rgba(0,62,76,0.2); border-radius: 4.0441vw; background: rgba(0,62,76,0.2); } #special-content .etc-info{ position: relative; margin-top: -1px; z-index: 500; padding: 19.4117% 0 12.9411%; } #special-content .etc-info .bg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; } #special-content .etc-info .bg *{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: center 0 no-repeat; background-size: 100% 100%; } #special-content .etc-info .section-accessory{ position: relative; } #special-content .etc-info .section-accessory .ttl{ width: 43.3088%; margin: 0 0 0 24.6335%!important; } #special-content .etc-info .section-accessory .copy{ width: 51.4705%; margin: 2.9411% auto 0; } #special-content .etc-info .section-accessory .photo-body{ width: 66.1764%; margin: 3.2352% auto 0; position: relative; } #special-content .etc-info .section-accessory .photo-body .deco{ position: absolute; left: 0; top: 0; } #special-content .etc-info .section-accessory .photo-body .deco01{ width: 101%; margin: -0.5% 0 0 -0.5%; z-index: 5; } #special-content .etc-info .section-accessory .photo-body .photo{ overflow: hidden; border-radius: 0.1470vw; position: relative; } #special-content .etc-info .section-accessory .photo-body .overlay{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 20; display: block; } #special-content .etc-info .section-accessory .photo-body .btn{ position: absolute; left: 0; top: 0; width: 33.5555%; margin: 41.7760% 0 0 75.3233%; z-index: 10; } #special-content .etc-info .section-accessory .photo-body .btn a{ display: block; } #special-content .etc-info .section-tvcm{ position: relative; margin-top: 8.2352%; } #special-content .etc-info .section-tvcm .ttl{ width: 16.8382%; margin: 0 auto!important; } #special-content .etc-info .section-tvcm .list-item{ margin-top: 3.1617%; } #special-content .etc-info .section-tvcm .list-item .item{ width: 53.8235%; /*width: 732px;*/ margin: 0 auto; } #special-content .etc-info .section-tvcm .list-item .item .txt{ width: 72.8142%; margin: 0 auto; } #special-content .etc-info .section-tvcm .list-item .item .photo-body{ margin-top: 5.3278%; position: relative; } #special-content .etc-info .section-tvcm .list-item .item .photo-body .photo{ position: relative; } #special-content .etc-info .section-tvcm .list-item .item .photo-body .overlay{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0); z-index: 10; } #special-content .etc-info .section-tvcm .list-item .item .photo-body .photo{ clip-path: url(#tvcm-mask01); } #special-content .etc-info .section-tvcm .list-item .item .photo-body .icon{ width: 18.5792%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); box-shadow: 0.2205vw 0.2205vw 0.3676vw rgba(0,0,0,0.35); border-radius: 50%; } #special-content .etc-info .section-share{ position: relative; margin-top: 8.3088%; } #special-content .etc-info .section-share .ttl{ width: 20.8088%; margin: 0 auto!important; } #special-content .etc-info .section-share .navi-list{ width: 13.6764%; margin: 3.5294% auto 0; display: flex; display: -ms-flex; justify-content: space-between; align-items: center; } #special-content .etc-info .section-share .navi-list .navi01{ width: 43.0107%; } #special-content .etc-info .section-share .navi-list .navi02{ width: 39.2473%; } #special-content .etc-info .section-share .navi-list .navi a{ display: block; } @media only screen and (max-width: 767px) { /*767px以下*/ #loader{ margin-top: 28px; } #loader .txt{ width: 63.0882%; } #special-content .kv .logo{ width: 49.5090%; margin: 49.8881% 0 0 25.2454%; } #special-content .kv .txt{ width: 25.5270%; margin: 12.0260% 0 0 37.2364%; } #special-content .util-navi-wrapper.fixed{ margin-bottom: -26.1333%; } #special-content .util-navi-wrapper.active{ margin-bottom: 0; } #special-content .util-navi .btn{ width: 24%; margin: 0 0 2.1333% 74.1333%; } #special-content .util-navi .btn a{ box-shadow: 0 0.8vw 0.8vw rgba(0,0,0,0.3); } #special-content .util-navi .navi-list{ width: 100%; border: none; } #special-content .util-navi .navi-list .navi a{ height: 14.6666vw; font-size: 3.2vw; line-height: 1.25; } #special-content .cp-dummy{ padding-top: 200vh; } #special-content .cp-dummy .equipment-box{ padding-top: 200vh; } #special-content .section-story{ padding: 13.8666% 0; } #special-content .section-story .base-bg{ background-size: 42.3627vw 42.3627vw; } #special-content .section-story .bg-deco01{ display: none; } #special-content .section-story .hero{ width: 88.9828%; } #special-content .section-story .hero .ttl{ width: 72.9439%; margin: -11.0334% 0 0 2.9606%; } #special-content .section-story .hero .photo{ clip-path: url(#hero-sp-mask01); } #special-content .section-story .hero .caption{ position: absolute; right: 0; top: auto; bottom: 0; font-size: 2.4vw; line-height: 1.6; margin: 0 3.0120% 2.1084% 0; background-color: #6c6239; color: #ffffff; padding: 0 1.3333vw; border-radius: 0.5333vw; } #special-content .section-story .intro{ margin-top: 7.4666%; } #special-content .section-story .intro .copy{ width: 74.6666%; margin-left: 12.8%; } #special-content .section-story .intro .txt{ width: 81.1000%; margin-top: 5.3642%;} #special-content .section-story .story{ margin-top: 9.8666%; } #special-content .section-story .story .ttl{ width: 8.5818%; margin: 0 0 0 83.6470%!important; } #special-content .section-story .story .txt01{ width: 21.5973%; margin: 0 0 0 57.5292%; } #special-content .section-story .story .txt02{ width: 34.067%; margin: 0 0 0 32.7719%; } #special-content .section-story .story .txt03{ width: 34.1029%; margin: 0 0 0 42.0669%; } #special-content .section-story .story .txt04{ width: 15.3583%; margin: 0 0 0 6.5372%; } #special-content .section-story .story .txt05{ width: 21.6217%; margin: 0 0 0 71.9529%; } #special-content .section-story .story .txt06{ width: 27.8424%; margin: 0 0 0 35.8671%; } #special-content .section-story .story .copy01{ width: 35.7333%; margin: 111.6675% 0 0 8.2666%; } #special-content .section-story .story .copy02{ width: 38.6666%; margin: 85.5098% 0 0 53.3333%; } #special-content .section-story .story .copy03{ width: 38.6666%; margin: 51.8336% 0 0 25.0666%; } #special-content .section-story .story .copy04{ width: 38.4%; margin: 60.0546% 0 0 27.2000%; } #special-content .section-story .story .deco01{ width: 28.0104%; margin: 160.4675% 0 0 8.6973%; } #special-content .section-story .story .deco02{ width: 15.1963%; margin: 66.7212% 0 0 76.2702%; } #special-content .section-story .story .scene{ position: relative; } #special-content .section-story .story .scene01{ padding-top: 40.8%; } #special-content .section-story .story .scene02{ padding-top: 39.4008%; margin-top: 13.4323%; } #special-content .section-story .story .scene03{ padding-top: 38.3098%; margin-top: 12.0901%; } #special-content .section-story .story .scene04{ margin-top: 25.3333%; } #special-content .section-story .story .scene05{ padding-top: 14.6666%; margin-top: 20.6745%; } #special-content .section-story .story .scene06{ padding-top: 56.8927%; margin-top: 25.7739%; } #special-content .section-story .story .scene .photo01{ width: 72.8%; margin: 0; } #special-content .section-story .story .scene .photo02{ width: 76.2666%; margin: 0 0 0 11.6000%; } #special-content .section-story .story .scene .photo03{ width: 76.8342%; margin: 18.2274% 0 0 auto; } #special-content .section-story .story .scene .photo04{ width: 54.4701%; margin: -4.5978% 0 0 41.8315%; } #special-content .section-story .story .scene .photo05{ width: 92.7993%; margin: 0; } #special-content .section-story .story .scene .photo06{ width: 73.0666%; margin: 0 0 0 auto; } #special-content .section-story .story .scene .photo07{ width: 65.8666%; margin: 0; } #special-content .section-story .story .scene .photo08{ width: 92.5333%; margin: 0; } #special-content .section-story .story .scene .caption{ top: auto; bottom: 0; font-size: 2.4vw; line-height: 1.6; padding: 0 1.3333vw; border-radius: 0.5333vw; z-index: 10; } #special-content .section-story .story .scene03 .caption{ margin: 0 0 1.8666% 1.8666%; left: 0; right: auto; background-color: #6c6239; color: #ffffff; } #special-content .section-story .story .scene05 .caption{ margin: 0 36% 1.8666% 0; left: auto; right: 0; background-color: #6c6239; color: #ffffff; } #special-content .section-story .story .sp-caption{ font-size: 2.4vw; line-height: 1.6; color: #112f5a; width: 87.0128%; margin: 6.4% auto 0; } #special-content .section-story .section-equipment{ margin-top: 17.3333%; } #special-content .section-story .section-equipment .base-box{ width: 88.5333%; /*width: 332px;*/ } #special-content .section-story .section-equipment .base-box .equipment{ width: 334.3373%; /*width: 1110px;*/ border-radius: 1.5668vw; padding: 8.7349% 0; } #special-content .section-story .section-equipment .base-box .equipment .ttl{ width: 23.3126%; margin: 0 0 0 3.0354%!important; } #special-content .section-story .section-equipment .base-box .equipment .deco{ width: 71.6216%; padding-top: 0.1138%; margin: 1.4164% 0 0 3.0354%; } #special-content .section-story .section-equipment .base-box .equipment .list-item{ width: 71.6216%; /*width: 795px;*/ margin: 1% 0 0 3.0354%; } #special-content .section-story .section-equipment .base-box .equipment .list-item .item{ width: 30.1886%; } #special-content .section-story .section-equipment .base-box .equipment .list-item .item .head{ font-size: 3.2vw; line-height: 1.4285; height: 9.1424vw; } #special-content .section-story .section-equipment .base-box .equipment .list-item .item .photo{ margin-top: 3.75%; border-radius: 3.0666vw; } #special-content .section-story .section-equipment .base-box .equipment .list-item .item .photo-caption{ font-size: 2.4vw; line-height: 1.5454; } #special-content .section-story .section-equipment .base-box .equipment .list-item .item .txt{ font-size: 2.9333vw; line-height: 1.4285; margin-top: 3.75%; } #special-content .section-story .section-equipment .base-box .equipment .list-item .item .caption{ font-size: 2.4vw; line-height: 1.5454; } #special-content .section-story .section-equipment .base-box .equipment .btn{ width: 18.3783%; margin: 18.1141% 0 0 78.0155%; box-shadow: 0.5333vw 0.5333vw 1.3333vw rgba(0,0,0,0.2); } #special-content .section-story .another-navi{ width: 81.7941%; margin-top: 11.4667%; } #special-content .section-story .another-navi a{ box-shadow: 1.8666vw 1.8666vw 1.3333vw rgba(0,60,75,0.2); border-radius: 9.5979vw; } #special-content .etc-info{ padding: 35.1999% 0 48.8%; } #special-content .etc-info .section-accessory .ttl{ width: 85.5532%; margin: 0 0 0 3.3649%!important; } #special-content .etc-info .section-accessory .copy{ width: 88%; margin: 6.6666% auto 0; } #special-content .etc-info .section-accessory .photo-body{ width: 82.6666%; margin: 8% auto 0; } #special-content .etc-info .section-accessory .photo-body .deco01{ width: 101.0451%; margin: -0.52255% 0 0 -0.52255%; } #special-content .etc-info .section-accessory .photo-body .photo{ border-radius: 1.3333vw; } #special-content .etc-info .section-accessory .photo-body .btn{ width: 51.1670%; margin: 48.9576% 0 0 53.6796%; } #special-content .etc-info .section-tvcm{ margin-top: 22.6666%; } #special-content .etc-info .section-tvcm .ttl{ width: 35.3640%; } #special-content .etc-info .section-tvcm .list-item{ margin-top: 8.7999%; } #special-content .etc-info .section-tvcm .list-item .item{ width: 80.2910%; } #special-content .etc-info .section-tvcm .list-item .item .txt{ width: 107.8479%; margin-left: -3.924%; line-height: 0; } #special-content .etc-info .section-tvcm .list-item .item .photo-body{ margin-top: 9.9637%; } #special-content .etc-info .section-tvcm .list-item .item .photo-body .photo{ clip-path: url(#tvcm-sp-mask01); } #special-content .etc-info .section-tvcm .list-item .item .photo-body .icon{ width: 19.9814%; box-shadow: 0.4vw 0.4vw 0.6vw rgba(0,0,0,0.35); } #special-content .etc-info .section-share{ margin-top: 24.5333%; } #special-content .etc-info .section-share .ttl{ width: 43.6326%; } #special-content .etc-info .section-share .navi-list{ width: 34.0649%; margin: 6.6666% auto 0; } } /*modal*/ /*-------------------------------------------------------*/ .iziModal{ background-color: transparent; box-shadow: none; } .iziModal-content *{ -webkit-font-smoothing: subpixel-antialiased; } .modal-view{ width: 90%!important; max-width: 980px!important; border-radius: 0!important; z-index: 8000!important; } .iziModal-navigate{ z-index: 8001!important; } .iziModal-overlay{ z-index: 7998!important; } .iziModal-navigate > button{ width: 64px; height: 64px; background-color: rgba(0,0,0,0.9); top: 50%; opacity: 1; transform: translateY(-50%); } .iziModal-navigate > .iziModal-navigate-prev{ left: 0; margin: 0!important; } .iziModal-navigate > .iziModal-navigate-next{ right: 0; margin: 0!important; } .modal-view .close-btn{ width: 40px; height: 40px; background-color: rgba(102,102,102,0.4); border-radius: 50%; position: fixed; right: 0; top: 0; box-sizing: border-box; margin: 5px 5px 0 0; cursor: pointer; color: transparent; z-index: 7002; } .modal-view .close-btn::before, .modal-view .close-btn::after{ content: ""; width: 50%; height: 3px; background-color: #ffffff; position: absolute; left: 50%; top: 50%; } .modal-view .close-btn::before{ transform: translate(-50%,-50%) rotate(45deg); } .modal-view .close-btn::after{ transform: translate(-50%,-50%) rotate(-45deg); } .modal-view .modal-inner{ padding: 50px 0; position: relative; } .modal-view .modal-inner .player-wrapper{ width: 100%; padding-top: 56.25%; position: relative; } #ytplayer{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; } /*animation*/ /*-------------------------------------------------------*/ #loader .bar .progress{ transition: transform 0.05s; } #loader.complete .txt, #loader.complete .bar .progress{ opacity: 0; transition: opacity 0.5s; } #loader.complete .bar .fill-t{ transform: translateY(-100%); transition: transform 1s cubic-bezier(0.455, 0.030, 0.515, 0.955); } #loader.complete .bar .fill-b{ transform: translateY(100%); transition: transform 1s cubic-bezier(0.455, 0.030, 0.515, 0.955); } #special-content .kv{ overflow: hidden; } #special-content .kv::before{ content: ""; position: absolute; left: 0; top: 0; width: 150%; height: 100%; background-color: #8e8461; z-index: 100; transform: skewX(-45deg); transform-origin: 0 0; } #special-content .kv.show::before{ transform: skewX(-45deg) translateX(-100%); transition: transform 2.4s cubic-bezier(0.215, 0.61, 0.355, 1); } #special-content .util-navi.js-inview{ opacity: 0; } #special-content .util-navi.js-inview.show{ opacity: 1; transition: opacity 1s cubic-bezier(0.473, 0.427, 0, 0.993); } #special-content .util-navi-wrapper.fixed{ transition: all 0.5s; } #special-content .section-story .hero .photo .mask{ mask-size: 50%; -webkit-mask-size: 50%; opacity: 0; } #special-content .section-story .hero.show .photo .mask{ mask-size: 100%; -webkit-mask-size: 100%; opacity: 1; transition: mask-size 2.4s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-mask-size 2.4s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 2.4s cubic-bezier(0.473, 0.427, 0, 0.993); } #special-content .section-story .hero .ttl{ transform: translateX(-30px); opacity: 0; } #special-content .section-story .hero.show .ttl{ transform: translateX(0); opacity: 1; transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 1s cubic-bezier(0.473, 0.427, 0, 0.993); transition-delay: 1.2s; } #special-content .section-story .intro .copy, #special-content .section-story .intro .txt{ opacity: 0; transform: translateY(30px); } #special-content .section-story .intro.show .copy, #special-content .section-story .intro.show .txt{ transform: translateY(0); opacity: 1; transition: transform 1s, opacity 1s; } #special-content .section-story .intro.show .txt{ transition-delay: 0.5s; } #special-content .section-story .story .ttl{ opacity: 0; transform: translateY(30px); } #special-content .section-story .story .ttl.show{ transform: translateY(0); opacity: 1; transition: transform 1s, opacity 1s; } #special-content .section-story .story .txt{ opacity: 0; transform: translateY(30px); } #special-content .section-story .story .txt.show{ transform: translateY(0); opacity: 1; transition: transform 1s, opacity 1s; } #special-content .section-story .story .ttl.show+.scene01 .txt{ transform: translateY(0); opacity: 1; transition: transform 1s, opacity 1s; transition-delay: 0.5s; } #special-content .section-story .story .deco{ opacity: 0; transform: translateY(30px); } #special-content .section-story .story .deco.show{ transform: translateY(0); opacity: 1; transition: transform 1s, opacity 1s; } #special-content .section-story .story .copy{ opacity: 0; transform: translateY(30px); } #special-content .section-story .story .copy.show{ transform: translateY(0); opacity: 1; transition: transform 1s, opacity 1s; } #special-content .etc-info .section-accessory .ttl, #special-content .etc-info .section-tvcm .ttl, #special-content .etc-info .section-share .ttl{ opacity: 0; transform: translateY(30px); } #special-content .etc-info .section-accessory .ttl.show, #special-content .etc-info .section-tvcm .ttl.show, #special-content .etc-info .section-share .ttl.show{ transform: translateY(0); opacity: 1; transition: transform 1s, opacity 1s; } #special-content .etc-info .section-accessory .copy, #special-content .etc-info .section-tvcm .list-item .item .txt{ opacity: 0; transform: translateY(30px); } #special-content .etc-info .section-accessory .ttl.show+.copy, #special-content .etc-info .section-tvcm .ttl.show+.list-item .item .txt{ transform: translateY(0); opacity: 1; transition: transform 1s, opacity 1s; transition-delay: 0.5s; } @media only screen and (max-width: 767px) { /*767px以下*/ #special-content .kv::before{ width: 300%; } #special-content .section-story .hero .caption{ opacity: 0; } #special-content .section-story .hero.show .caption{ opacity: 1; transition: opacity 1s cubic-bezier(0.473, 0.427, 0, 0.993); transition-delay: 1.2s; } } /*keyframes*/ /*-------------------------------------------------------*/ /*hover*/ /*-------------------------------------------------------*/ #special-content .util-navi .navi-list .navi a{ transition: background-color 0.5s; } #special-content .util-navi .navi-list .navi a:hover{ background-color: #696147; } #special-content .util-navi .btn a{ transition: transform 0.5s ease; } #special-content .util-navi .btn a:hover{ transform: scale(1.04); } #special-content .section-story .section-equipment .base-box .equipment .btn a{ transition: transform 0.5s ease; } #special-content .section-story .section-equipment .base-box .equipment .btn a:hover{ transform: scale(1.04); } #special-content .section-story .another-navi a{ transition: transform 0.5s ease; } #special-content .section-story .another-navi a:hover{ transform: scale(1.02); } #special-content .etc-info .section-accessory .photo-body .photo img{ transition: transform 0.5s ease; } #special-content .etc-info .section-accessory .photo-body .overlay:hover~.photo img{ transform: scale(1.04); } #special-content .etc-info .section-accessory .photo-body .btn:hover~.photo img{ transform: scale(1.04); } #special-content .etc-info .section-tvcm .list-item .item .photo-body .photo img{ transition: transform 0.5s ease; } #special-content .etc-info .section-tvcm .list-item .item .photo-body .overlay:hover~.photo img{ transform: scale(1.04); } #special-content .etc-info .section-share .navi-list .navi a{ transition: transform 0.5s ease; } #special-content .etc-info .section-share .navi-list .navi a:hover{ transform: scale(1.06); } @media only screen and (max-width: 767px) { /*767px以下*/ #special-content .util-navi .navi-list .navi a:hover{ background-color: transparent; } #special-content .util-navi .navi-list .navi a:active{ background-color: #696147; } #special-content .util-navi .btn a:hover{ transform: scale(1); } #special-content .util-navi .btn a:active{ transform: scale(1.04); } #special-content .section-story .section-equipment .base-box .equipment .btn a:hover{ transform: scale(1); } #special-content .section-story .section-equipment .base-box .equipment .btn a:active{ transform: scale(1.04); } #special-content .section-story .another-navi a:hover{ transform: scale(1); } #special-content .section-story .another-navi a:active{ transform: scale(1.02); } #special-content .etc-info .section-accessory .photo-body .overlay:hover~.photo img{ transform: scale(1); } #special-content .etc-info .section-accessory .photo-body .overlay:active~.photo img{ transform: scale(1.04); } #special-content .etc-info .section-accessory .photo-body .btn:hover~.photo img{ transform: scale(1); } #special-content .etc-info .section-accessory .photo-body .btn:active~.photo img{ transform: scale(1.04); } #special-content .etc-info .section-tvcm .list-item .item .photo-body .overlay:hover~.photo img{ transform: scale(1); } #special-content .etc-info .section-tvcm .list-item .item .photo-body .overlay:active~.photo img{ transform: scale(1.04); } #special-content .etc-info .section-share .navi-list .navi a:hover{ transform: scale(1); } #special-content .etc-info .section-share .navi-list .navi a:active{ transform: scale(1.06); } }