@charset "UTF-8"; @import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@100&family=Roboto:wght@300&display=swap'); #tiger-bottle{ font-feature-settings: "palt"; overflow: hidden; } #tiger-bottle .defs{ position: absolute; z-index: -9999; width: 0; height: 0; overflow: hidden; } #tiger-bottle p{ color: #535152; margin: 0; } #tiger-bottle img{ width: 100%; height: auto; } #tiger-bottle ul, #tiger-bottle li, #tiger-bottle ol{ list-style: none; margin: 0; padding: 0; } #tiger-bottle .pc{ display: block; } #tiger-bottle .sp{ display: none; } #tiger-bottle .base-body{ max-width: 1100px; margin: 0 auto; position: relative; } #tiger-bottle .hero{ position: relative; } #tiger-bottle .hero .bg-fill{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(to right, #f8f4f2 4%, #f6f7ee 63%, #dfd9cc 100%); } #tiger-bottle .hero .bg-fill::before{ content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 365px; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%); } #tiger-bottle .hero .visual{ max-width: 1075px; margin: 0 auto; position: relative; } #tiger-bottle .hero .deco{ position: absolute; width: 462px; } #tiger-bottle .hero .deco01{ left: 50%; margin: -1.56px 0 0 -757.60px; } #tiger-bottle .hero .deco02{ right: 50%; margin: 286.43px -820.39px 0 0; } #tiger-bottle .hero .photo{ position: absolute; } #tiger-bottle .hero .photo01{ right: 50%; width: 187px; margin: -3px -579px 0 0; } #tiger-bottle .hero .photo02{ right: 50%; width: 139px; margin: 269px -506px 0 0; } #tiger-bottle .hero .photo03{ left: 50%; width: 176px; margin: 295px 0 0 -580px; } #tiger-bottle .hero .intro{ max-width: 1075px; padding: 80px 0 210px; margin: 0 auto; position: relative; z-index: 50; } #tiger-bottle .hero .wave-mask{ position: absolute; background: linear-gradient(to right, #f8f4f2 4%, #f6f7ee 63%, #dfd9cc 100%); clip-path: url(#wave-path01); width: 100%; height: 291px; margin-top: -65px; } #tiger-bottle .hero .wave-mask::before{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(255,255,255,0.7) 22%, rgba(255,255,255,0) 100%); } #tiger-bottle .hero .intro .txt{ text-align: center; font-size: 19px; line-height: 2.52; color: #707070; } #tiger-bottle .hero .intro .txt .marker{ font-size: 126.31%; margin-top: 10px; display: block; } #tiger-bottle .hero .intro .navi{ margin: 90px auto 0; padding: 0; width: 350px; } #tiger-bottle .hero .intro .navi a{ display: block; background-color: #f59349; color: #ffffff; text-align: center; font-size: 18px; line-height: 1.5; border: 2px solid #ffffff; padding: 15px 0; border-radius: 30px; position: relative; box-shadow: 0 0 10px rgba(141,128,111,0.4); } #tiger-bottle .hero .intro .navi a::before{ content: ""; position: absolute; margin-right: 10%; right: 0; top: 50%; width: 10px; height: 10px; border: solid #ffffff; border-width: 0 1px 1px 0; transform: translateY(-50%) translateY(-25%) rotate(45deg); } #tiger-bottle .bottle-quality{ padding-top: 85px; } #tiger-bottle .bottle-quality .quality-head{ text-align: center; padding-bottom: 75px; position: relative; z-index: 100; } #tiger-bottle .bottle-quality .quality-head::before{ content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: 50px; background-color: #535152; } #tiger-bottle .bottle-quality .quality-head .ttl{ font-family: "Roboto", sans-serif; font-weight: 300; font-size: 27px; line-height: 1.5; letter-spacing: 0.3em; padding-left: 0.3em; color: #989797; } #tiger-bottle .bottle-quality .quality-head .copy{ font-size: 35px; line-height: 1.2; margin-top: 30px; } #tiger-bottle .bottle-quality .quality-head .copy .marker{ font-size: 128.57%; } #tiger-bottle .bottle-quality .quality .section-ttl{ width: 194px; color: #ffffff; margin: 0 auto; text-align: center; border-radius: 5px; border: 2px solid transparent; padding: 15px 0 20px; position: relative; z-index: 20; } #tiger-bottle .bottle-quality .quality .section-ttl .num{ font-family: "Roboto Flex", sans-serif; font-weight: 100; display: block; padding-bottom: 7px; font-size: 62px; line-height: 1; position: relative; color: #ffffff; } #tiger-bottle .bottle-quality .quality .section-ttl .num::before{ content: ""; position: absolute; left: 50%; bottom: 0; width: 24px; height: 1px; background-color: #ffffff; transform: translateX(-50%); } #tiger-bottle .bottle-quality .quality .section-ttl .word{ font-size: 23px; line-height: 1; letter-spacing: 0.1em; padding-left: 0.1em; display: block; margin-top: 10px; color: #ffffff; } #tiger-bottle .bottle-quality .quality .intro{ margin-top: 50px; text-align: center; } #tiger-bottle .bottle-quality .quality .intro .head{ font-size: 52px; line-height: 1.2; font-weight: 300; } #tiger-bottle .bottle-quality .quality .intro .txt{ font-size: 16px; line-height: 1.56; margin: 25px auto 0; } #tiger-bottle .bottle-quality .quality01{ padding-top: 62px; position: relative; } #tiger-bottle .bottle-quality .quality01 .bg{ position: absolute; left: 0; top: -302px; padding-bottom: 302px; width: 100%; height: 100%; box-sizing: content-box; } #tiger-bottle .bottle-quality .quality01 .bg .wave-mask{ position: absolute; background: url("/contents/feature/vacuum-insulated-products/assets/img/quality-bg01.webp") center 0 no-repeat; background-size: 100% auto; clip-path: url(#wave-path02); width: 100%; height: 422px; margin-top: -130px; } #tiger-bottle .bottle-quality .quality01 .bg .fill{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url("/contents/feature/vacuum-insulated-products/assets/img/quality-bg01.webp") center -130px no-repeat; background-size: 100% calc(100% + 130px); } #tiger-bottle .bottle-quality .quality01 .bg .fill::before{ content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 365px; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%); } #tiger-bottle .bottle-quality .quality01 .bg .deco{ position: absolute; left: 50%; top: 0; } #tiger-bottle .bottle-quality .quality01 .bg .deco01{ width: 333px; margin: 433px 0 0 -856px; } #tiger-bottle .bottle-quality .quality01 .bg .deco02{ width: 764px; margin: 316px 0 0 341px; } #tiger-bottle .bottle-quality .quality01 .section-ttl{ background: linear-gradient(45deg, #85c874 0%, #e7f4e3 100%); border-color: #e7f4e3; } #tiger-bottle .bottle-quality .quality01 .deco-ttl{ position: absolute; left: 50%; width: 282px; margin: -202px 0 0 -238px; } #tiger-bottle .bottle-quality .quality01 .intro .head{ color: #89cf76; } #tiger-bottle .bottle-quality .quality01 .content{ height: 736px; position: relative; overflow: hidden; /*background-color: #d00;*/ } #tiger-bottle .bottle-quality .quality01 .content .photo{ position: absolute; left: 0; top: 0; width: 450px; margin: 46px 0 0 316px; z-index: 20; } #tiger-bottle .bottle-quality .quality01 .content .info{ position: absolute; left: 0; top: 0; width: 560px; padding: 25px 0 25px 30px; background: linear-gradient(30deg, #edf7ea 0%, #ffffff 15%); border-radius: 5px; box-shadow: 0 0 10px rgba(54,60,69,0.2); margin: 144px 0 0 25px; border: 2px solid #ffffff; } #tiger-bottle .bottle-quality .quality01 .content .info .copy{ font-size: 24px; line-height: 0; } #tiger-bottle .bottle-quality .quality01 .content .info .copy .word{ line-height: 1.5; color: #85c874; display: inline-block; background-color: #f0f8ee; font-weight: 500; padding: 5px 30px 5px 10px; } #tiger-bottle .bottle-quality .quality01 .content .info .copy .word+.word{ display: block; margin-top: 5px; } #tiger-bottle .bottle-quality .quality01 .content .info .txt{ width: 302px; font-size: 18px; line-height: 1.61; color: #85c874; margin-top: 10px; } #tiger-bottle .bottle-quality .quality01 .content .info .txt .marker{ font-size: 111.11%; font-weight: 500; } #tiger-bottle .bottle-quality .quality01 .content .note{ position: absolute; left: 0; top: 0; display: flex; display: -ms-flex; align-items: center; width: 386px; z-index: 50; } #tiger-bottle .bottle-quality .quality01 .content .note .illust-body{ width: 175px; text-align: center; } #tiger-bottle .bottle-quality .quality01 .content .note .illust-body .illust{ position: relative; } #tiger-bottle .bottle-quality .quality01 .content .note .illust-body .illust::before, #tiger-bottle .bottle-quality .quality01 .content .note .illust-body .illust::after{ content: ""; position: absolute; right: 100%; top: 45%; background-color: #85c874; transform: translateY(-50%); } #tiger-bottle .bottle-quality .quality01 .content .note .illust-body .illust::before{ height: 3px; margin-right: -12px; } #tiger-bottle .bottle-quality .quality01 .content .note .illust-body .illust::after{ width: 7px; height: 7px; border-radius: 50%; } #tiger-bottle .bottle-quality .quality01 .content .note .illust-body .caption{ font-size: 11px; line-height: 1.5; margin-top: -5px; } #tiger-bottle .bottle-quality .quality01 .content .note .txt-body{ flex: 1; } #tiger-bottle .bottle-quality .quality01 .content .note .txt-body .bubble{ font-size: 20px; line-height: 1.5; color: #ffffff; background-color: #85c874; display: inline-block; padding: 0 30px; border-radius: 15px; font-weight: 500; } #tiger-bottle .bottle-quality .quality01 .content .note .txt-body .copy{ margin: 10px 0 0; font-size: 22px; line-height: 1.5; color: #85c874; font-weight: 500; } #tiger-bottle .bottle-quality .quality01 .content .note .txt-body .caption{ font-size: 13px; line-height: 1.38; margin-top: 15px; } #tiger-bottle .bottle-quality .quality01 .content .note01{ margin: 47px 0 0 662px; } #tiger-bottle .bottle-quality .quality01 .content .note01 .illust::before{ width: 60px; } #tiger-bottle .bottle-quality .quality01 .content .note01 .illust::after{ margin-right: 48px; } #tiger-bottle .bottle-quality .quality01 .content .note02{ margin: 266px 0 0 690px; } #tiger-bottle .bottle-quality .quality01 .content .note02 .illust::before{ width: 46px; } #tiger-bottle .bottle-quality .quality01 .content .note02 .illust::after{ margin-right: 34px; } #tiger-bottle .bottle-quality .quality02{ padding-top: 150px; position: relative; z-index: 50; } #tiger-bottle .bottle-quality .quality02 .bg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: content-box; } #tiger-bottle .bottle-quality .quality02 .bg .wave-mask{ position: absolute; background: url("/contents/feature/vacuum-insulated-products/assets/img/quality-bg05.webp") center 0 no-repeat; background-size: 100% auto; clip-path: url(#wave-path02); width: 100%; height: 422px; margin-top: -130px; } #tiger-bottle .bottle-quality .quality02 .bg .fill{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url("/contents/feature/vacuum-insulated-products/assets/img/quality-bg05.webp") center -130px no-repeat; background-size: 100% calc(100% + 130px); } #tiger-bottle .bottle-quality .quality02 .bg .fill::before{ content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 365px; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%); } #tiger-bottle .bottle-quality .quality02 .bg .deco{ position: absolute; left: 50%; top: 0; } #tiger-bottle .bottle-quality .quality02 .bg .deco01{ width: 144px; margin: 116px 0 0 -503px; } #tiger-bottle .bottle-quality .quality02 .bg .deco02{ width: 185px; margin: 247px 0 0 368px; } #tiger-bottle .bottle-quality .quality02 .section-ttl{ background: linear-gradient(45deg, #6daad4 0%, #e2eef6 100%); border-color: #e2eef6; } #tiger-bottle .bottle-quality .quality02 .deco-ttl{ position: absolute; left: 50%; width: 282px; margin: -242px 0 0 -8px; } #tiger-bottle .bottle-quality .quality02 .intro .head{ color: #6daad4; } #tiger-bottle .bottle-quality .quality02 .content{ height: 745px; margin-top: -85px; position: relative; overflow: hidden; /*background-color: #d00;*/ } #tiger-bottle .bottle-quality .quality02 .content .photo{ position: absolute; left: 0; top: 0; width: 559px; margin: 0 0 0 10px; z-index: 20; } #tiger-bottle .bottle-quality .quality02 .content .info{ position: absolute; left: 0; top: 0; width: 574px; padding: 30px 0 30px 70px; background: linear-gradient(30deg, #edf5fa 0%, #ffffff 15%); border-radius: 5px; box-shadow: 5px 5px 5px rgba(109,170,212,0.2); margin: 124px 0 0 290px; border: 2px solid #ffffff; } #tiger-bottle .bottle-quality .quality02 .content .info .copy{ font-size: 24px; line-height: 0; } #tiger-bottle .bottle-quality .quality02 .content .info .copy .word{ line-height: 1.5; color: #6daad4; display: inline-block; background-color: #e9f2f9; font-weight: 500; padding: 2px 40px; } #tiger-bottle .bottle-quality .quality02 .content .info .txt{ font-size: 18px; line-height: 1.61; color: #6daad4; margin-top: 10px; } #tiger-bottle .bottle-quality .quality02 .content .info .txt .marker{ font-size: 111.11%; font-weight: 500; } #tiger-bottle .bottle-quality .quality02 .content .note{ position: absolute; left: 0; top: 0; margin: 307px 0 0 633px; z-index: 50; } #tiger-bottle .bottle-quality .quality02 .content .note .illust-body{ position: relative; } #tiger-bottle .bottle-quality .quality02 .content .note .illust-body .deco{ width: 364px; position: absolute;right: 100%; top: 0; margin: 75px -10px 0 0; } #tiger-bottle .bottle-quality .quality02 .content .note .illust-body .illust{ width: 184px; position: relative; } #tiger-bottle .bottle-quality .quality02 .content .note .illust-body .caption{ font-size: 11px; line-height: 1.5; position: absolute; left: 100%; bottom: 7px; white-space: nowrap; transform: translateX(-40%); } #tiger-bottle .bottle-quality .quality02 .content .note .txt-body{ position: absolute; left: 50%; top: 100%; white-space: nowrap; transform: translateX(-50%); margin-top: 10px; } #tiger-bottle .bottle-quality .quality02 .content .note .txt-body .copy{ font-size: 17px; line-height: 1.23; text-align: center; } #tiger-bottle .bottle-quality .quality02 .content .note .txt-body .copy .marker{ font-size: 123.52%; color: #6daad4; display: block; } #tiger-bottle .bottle-quality .quality02 .content .note .txt-body .copy .marker .num{ font-size: 138.09%; } #tiger-bottle .bottle-quality .quality03{ padding: 160px 0 320px; position: relative; z-index: 50; } #tiger-bottle .bottle-quality .quality03 .bg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: content-box; } #tiger-bottle .bottle-quality .quality03 .bg .wave-mask{ position: absolute; background: url("/contents/feature/vacuum-insulated-products/assets/img/quality-bg08.webp") center 0 no-repeat; background-size: 100% auto; clip-path: url(#wave-path02); width: 100%; height: 422px; margin-top: -130px; } #tiger-bottle .bottle-quality .quality03 .bg .fill{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url("/contents/feature/vacuum-insulated-products/assets/img/quality-bg08.webp") center -130px no-repeat; background-size: 100% calc(100% + 130px); } #tiger-bottle .bottle-quality .quality03 .bg .fill::before{ content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 365px; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%); } #tiger-bottle .bottle-quality .quality03 .bg .deco{ position: absolute; left: 50%; top: 0; } #tiger-bottle .bottle-quality .quality03 .bg .deco01{ width: 122px; margin: 115px 0 0 -488px; } #tiger-bottle .bottle-quality .quality03 .bg .deco02{ width: 72px; margin: 84px 0 0 -354px; } #tiger-bottle .bottle-quality .quality03 .bg .deco03{ width: 72px; margin: 1190px 0 0 486px; } #tiger-bottle .bottle-quality .quality03 .section-ttl{ background: linear-gradient(45deg, #988ecb 0%, #d6d2ea 100%); border-color: #eae8f5; padding: 5px 0 10px; } #tiger-bottle .bottle-quality .quality03 .deco-ttl{ position: absolute; left: 50%; width: 282px; margin: -202px 0 0 -238px; } #tiger-bottle .bottle-quality .quality03 .intro .head{ color: #988ecb; } #tiger-bottle .bottle-quality .quality03 .content{ width: 1050px; padding: 34px 0 24px; background: linear-gradient(30deg, #f1eff8 0%, #ffffff 40%); border-radius: 5px; box-shadow: 5px 5px 5px rgba(152,142,203,0.2); margin: 28px auto 0; border: 2px solid #ffffff; position: relative; } #tiger-bottle .bottle-quality .quality03 .content .info{ text-align: center; } #tiger-bottle .bottle-quality .quality03 .content .info .copy{ font-size: 24px; line-height: 0; } #tiger-bottle .bottle-quality .quality03 .content .info .copy .word{ line-height: 1.5; color: #988ecb; display: inline-block; background-color: #f0eef7; font-weight: 500; padding: 2px 90px; } #tiger-bottle .bottle-quality .quality03 .content .info .txt{ font-size: 18px; line-height: 1.61; color: #988ecb; margin-top: 10px; } #tiger-bottle .bottle-quality .quality03 .content .info .txt .marker{ font-size: 111.11%; font-weight: 500; } #tiger-bottle .bottle-quality .quality03 .content .photo{ position: absolute; left: 0; top: 0; width: 420px; margin: 166px 0 0 316px; z-index: 50; } #tiger-bottle .bottle-quality .quality03 .content .note-list{ display: flex; display: -ms-flex; justify-content: space-between; width: 814px; margin: 56px auto 0; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note{ width: 170px; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note .processed .head{ width: 375px; background-color: #988ecb; border: 3px solid #988ecb; border-radius: 20px; position: relative; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note .processed .head .bubble{ position: absolute; top: 0; border: 2px solid #988ecb; background-color: #ffffff; width: 72px; height: 72px; display: flex; display: -ms-flex; align-items: center; justify-content: center; border-radius: 50%; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note .processed .head .bubble .word{ font-size: 16px; line-height: 1.18; color: #988ecb; text-align: center; font-weight: bold; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note .processed .head .txt{ font-size: 14px; line-height: 1.21; color: #ffffff; font-weight: 500; padding: 7px 70px; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note .processed .head .txt .marker{ font-size: 121.42%; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note .processed .copy{ font-size: 17px; line-height: 1.41; font-weight: 500; white-space: nowrap; margin-top: 10px; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note .processed .caption02{ font-size: 11px; line-height: 1.5; margin-top: 5px; text-align: right; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note .processed .copy .marker{ color: #988ecb; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note01 .processed .head .bubble{ left: 0; margin: -10px 0 0 -20px; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note01 .processed .head .illust{ overflow: hidden; border-radius: 0 0 0 18px; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note01 .processed .copy{ text-align: right; width: 190px; margin-left: -20px; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note02 .processed .head{ text-align: right; margin-left: -205px; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note02 .processed .head .bubble{ right: 0; margin: -10px -20px 0 0; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note02 .processed .head .illust{ overflow: hidden; border-radius: 0 0 18px 0; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note01 .processed .caption{ position: absolute; left: 0; top: 0; font-size: 10px; line-height: 1.3; margin: 589px 0 0 308px; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note .raw{ margin-top: 14px; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note .raw .head{ background-color: #a1a1a1; border: 2px solid #a1a1a1; border-radius: 12px; overflow: hidden; text-align: center; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note .raw .head .txt{ font-size: 15px; line-height: 1.2; color: #ffffff; font-weight: 500; padding: 2px 0 5px; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note .raw .head .illust{ background-color: #ffffff; padding-right: 7.1%; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note .raw .caption{ text-align: right; font-size: 11px; line-height: 1.5; margin-top: 5px; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note .raw .copy{ font-size: 13px; line-height: 1.30; margin-top: 5px; } #tiger-bottle .bottle-quality .quality03 .quality-caption{ font-size: 15px; line-height: 1.6; margin-top: 110px; text-align: center; } #tiger-bottle .bottle-movie{ padding: 60px 0 250px; position: relative; z-index: 50; } #tiger-bottle .bottle-movie .bg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: content-box; } #tiger-bottle .bottle-movie .bg .wave-mask{ position: absolute; background: url("/contents/feature/vacuum-insulated-products/assets/img/movie-bg01.webp") center 0 no-repeat; background-size: 100% auto; clip-path: url(#wave-path02); width: 100%; height: 422px; margin-top: -130px; } #tiger-bottle .bottle-movie .bg .fill{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url("/contents/feature/vacuum-insulated-products/assets/img/movie-bg01.webp") center -130px no-repeat; background-size: 100% calc(100% + 130px); } #tiger-bottle .bottle-movie .movie-head{ text-align: center; padding-bottom: 75px; position: relative; } #tiger-bottle .bottle-movie .movie-head::before{ content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: 50px; background-color: #ffffff; } #tiger-bottle .bottle-movie .movie-head .ttl{ font-family: "Roboto", sans-serif; font-weight: 300; font-size: 27px; line-height: 1.5; letter-spacing: 0.3em; padding-left: 0.3em; color: #ffffff; } #tiger-bottle .bottle-movie .movie-head .copy{ font-size: 50px; line-height: 1.2; margin-top: 30px; color: #ffffff; } #tiger-bottle .bottle-movie .movie-frame{ width: 795px; margin: 12px auto 0; position: relative; } #tiger-bottle .bottle-movie .movie-frame .overlay{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0); z-index: 100; } #tiger-bottle .bottle-movie .movie-frame .photo{ border: 4px solid #ffffff; background-color: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 0 30px rgba(223,90,36,0.3); } #tiger-bottle .bottle-movie .movie-frame .btn{ position: absolute; width: 157px; left: 0; top: 0; margin: 342px 0 0 -38px; padding: 0; } #tiger-bottle .bottle-other{ padding: 150px 0 290px; position: relative; z-index: 50; } #tiger-bottle .bottle-other .bg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: content-box; } #tiger-bottle .bottle-other .bg .wave-mask{ position: absolute; background-color: #ffffff; clip-path: url(#wave-path02); width: 100%; height: 422px; margin-top: -130px; } #tiger-bottle .bottle-other .bg .fill{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #ffffff; } #tiger-bottle .bottle-other .bg .deco{ position: absolute; left: 50%; top: 0; } #tiger-bottle .bottle-other .bg .deco01{ width: 690px; margin: 72px 0 0 -862px; } #tiger-bottle .bottle-other .bg .deco02{ width: 568px; margin: 1287px 0 0 270px; } #tiger-bottle .bottle-other .bg .deco03, #tiger-bottle .bottle-other .bg .deco04{ display: none; } #tiger-bottle .bottle-other .base-body{ max-width: 1050px; } #tiger-bottle .bottle-other .other-head{ text-align: center; position: relative; } #tiger-bottle .bottle-other .other-head .ttl{ font-family: "Roboto", sans-serif; font-weight: 300; font-size: 27px; line-height: 1.5; letter-spacing: 0.3em; padding-left: 0.3em; color: #878586; } #tiger-bottle .bottle-other .other-head .copy{ font-size: 50px; line-height: 1.2; margin-top: 30px; font-weight: 500; } #tiger-bottle .bottle-other .other-head .txt{ font-size: 16px; line-height: 1.6; margin: 20px auto 0; } #tiger-bottle .bottle-other .other-head .caption{ font-size: 16px; line-height: 1.6; margin: 20px auto 0; background-color: #7e7e7e; color: #ffffff; display: inline-block; padding: 4px 50px; border-radius: 17px; } #tiger-bottle .bottle-other .other{ box-sizing: border-box; width: 840px; padding: 45px 0; position: relative; } #tiger-bottle .bottle-other .other01{ margin-left: auto; margin-top: 70px; } #tiger-bottle .bottle-other .other02{ margin-top: 60px; } #tiger-bottle .bottle-other .other::before{ content: ""; position: absolute; width: 100vw; height: 100%; background-color: #ffffff; left: 0; top: 0; box-shadow: 0 0 40px rgba(232,196,114,0.4); opacity: 0.85; border-radius: 134px 0 0 134px; } #tiger-bottle .bottle-other .other02::before{ left: auto; right: 0; border-radius: 0 134px 134px 0; } #tiger-bottle .bottle-other .other .other-body{ position: relative; z-index: 5; } #tiger-bottle .bottle-other .other01 .other-body{ padding-left: 90px; padding-right: 10px; } #tiger-bottle .bottle-other .other02 .other-body{ padding-right: 90px; padding-left: 10px; } #tiger-bottle .bottle-other .other .other-body .ttl{ font-size: 35px; line-height: 1.2; color: #f59349; font-weight: normal; margin: 0; } #tiger-bottle .bottle-other .other .other-body .copy{ font-size: 17px; line-height: 1.5; font-weight: 500; } #tiger-bottle .bottle-other .other .other-body .copy .marker{ background: linear-gradient(transparent 50%, #fdf2d9 50%); } #tiger-bottle .bottle-other .other .other-body .copy .marker .en{ font-size: 129.41%; } #tiger-bottle .bottle-other .other .other-body .caption{ font-size: 12px; line-height: 1.5; text-align: right; } #tiger-bottle .bottle-other .other .other-body .split-view{ display: flex; display: -ms-flex; justify-content: space-between; } #tiger-bottle .bottle-other .other .other-body .split-view .item{ width: 341px; position: relative; } #tiger-bottle .bottle-other .other .other-body .split-view .item .txt{ font-size: 15px; line-height: 1.6; margin-top: 10px; } #tiger-bottle .bottle-other .other .other-body .split-view .item .caption{ text-align: right; width: 100%; } #tiger-bottle .bottle-other .other .other-body .split-view{ margin-top: 5px; } #tiger-bottle .bottle-other .other01 .other-body .split-view .item .photo{ border: 1px solid #fac9a4; border-radius: 5px; overflow: hidden; } #tiger-bottle .bottle-other .other01 .other-body .split-view .item .head{ width: 180px; background-color: #f59349; margin: 10px auto 0; font-size: 16px; line-height: 1.2; padding: 6px 0; text-align: center; border-radius: 15px; color: #ffffff; } #tiger-bottle .bottle-other .other02 .other-body .split-view{ margin-top: 20px; } #tiger-bottle .bottle-other .other02 .other-body .split-view .item .photo{ border-radius: 5px; overflow: hidden; } #tiger-bottle .bottle-other .other02 .other-body .split-view .item .head{ margin: 10px auto 0; font-size: 17px; line-height: 1.47; text-align: center; font-weight: 500; } #tiger-bottle .bottle-other .other02 .other-body .split-view .item .head .sub{ display: block; } #tiger-bottle .bottle-other .other02 .other-body .split-view .item .head .marker{ font-size: 129.41%; background: linear-gradient(transparent 50%, #fdf2d9 50%); } #tiger-bottle .bottle-other .other02 .other-body .split-view .item .photo-s{ position: absolute; left: 100%; top: 0; margin: 240px 0 0 7px; width: 216px; } #tiger-bottle .bottle-other .other02 .other-body .split-view .item .photo-s .logo{ width: 79px; position: absolute; left: 0; top: 0; margin: -10px 0 0 100px; transform: translateY(-100%); } #tiger-bottle .bottle-about{ padding: 93px 0 196px; position: relative; z-index: 50; } #tiger-bottle .bottle-about .bg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: content-box; padding-bottom: 130px; } #tiger-bottle .bottle-about .bg .wave-mask{ position: absolute; background: url("/contents/feature/vacuum-insulated-products/assets/img/about-bg01.webp") center 0 no-repeat; background-size: 100% auto; clip-path: url(#wave-path02); width: 100%; height: 422px; margin-top: -130px; } #tiger-bottle .bottle-about .bg .fill{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url("/contents/feature/vacuum-insulated-products/assets/img/about-bg01.webp") center -130px repeat-y; background-size: 100% auto; } #tiger-bottle .bottle-about .bg .photo{ position: absolute; top: 0; border-radius: 5px; overflow: hidden; } #tiger-bottle .bottle-about .bg .photo01{ width: 337px; margin: 40px 0 0 -680px; left: 50%; } #tiger-bottle .bottle-about .bg .photo02{ width: 204px; margin: 47px -604px 0 0; right: 50%; } #tiger-bottle .bottle-about .bg .photo03{ width: 188px; margin: 325px 0 0 -465px; left: 50%; } #tiger-bottle .bottle-about .bg .photo04{ width: 235px; margin: 358px -545px 0 0; right: 50%; } #tiger-bottle .bottle-about .base-body{ max-width: 1200px; } #tiger-bottle .bottle-about .about-intro{ text-align: center; } #tiger-bottle .bottle-about .about-intro .ttl{ font-size: 50px; line-height: 1.63; color: #ffffff; text-shadow: 0 0 20px rgba(91,52,26,0.6); font-weight: 500; } #tiger-bottle .bottle-about .about-intro .txt{ font-size: 17px; line-height: 2.35; color: #f77b21; margin-top: 30px; } #tiger-bottle .bottle-about .about-intro .txt .line{ display: inline-block; background-color: rgba(255,255,255,0.9); line-height: 1; padding: 2px 5px; } #tiger-bottle .bottle-about .search-body{ width: auto; padding: 65px 0 70px; margin: 50px auto 0; background-color: rgba(255,255,255,0.85); border-radius: 10px; box-shadow: 0 0 15px rgba(0,0,0,0.2); } #tiger-bottle .bottle-about .search-body .search-ttl{ text-align: center; font-size: 35px; line-height: 1.2; font-weight: 500; letter-spacing: 0.1em; padding-left: 0.1em; } #tiger-bottle .bottle-about .search-body .search-ttl .s-size{ font-size: 71.43%; } #tiger-bottle .bottle-about .search-body .search-ttl .icon{ width: 34px; } #tiger-bottle .bottle-about .search-body .category-navi{ width: 45%; margin: 2.83% auto 2.08%; display: flex; display: -ms-flex; justify-content: space-between; } #tiger-bottle .bottle-about .search-body .category-navi .navi{ width: 48.52%; border: 1px solid #707070; text-align: center; padding: 10px 0; border-radius: 27px; box-sizing: border-box; font-size: 16px; line-height: 1.2; letter-spacing: 0.1em; padding-left: 0.1em; cursor: pointer; transition: background 0.3s; } #tiger-bottle .bottle-about .search-body .category-navi .navi-feature.active{ border: none; background-color: #6daad4; color: #ffffff; } #tiger-bottle .bottle-about .search-body .category-navi .navi-scene.active{ border: none; background-color: #85c874; color: #ffffff; } #tiger-bottle .bottle-about .search-body .category-navi .navi .s-size{ font-size: 81.25%; } #tiger-bottle .bottle-about .search-body .navi-switch{ margin: 0 auto; display: flex; display: -ms-flex; justify-content: space-between; align-content: center; opacity: 0; height: 0; overflow: hidden; } #tiger-bottle .bottle-about .search-body .navi-switch.active{ opacity: 1; height: auto; overflow: visible; } #tiger-bottle .bottle-about .search-body .navi-switch .navi{ height: 118px; background-color: #ffffff; display: flex; display: -ms-flex; justify-content: center; align-content: center; text-align: center; border-radius: 5px; box-shadow: 0 0 4px rgba(54,60,69,0.3); cursor: pointer; transition: background 0.3s; } #tiger-bottle .bottle-about .search-body .navi-switch .navi .txt{ font-size: 14px; line-height: 1.21; margin: auto; } #tiger-bottle .bottle-about .search-body .navi-switch .navi .txt.line1{ line-height: 2.42; } #tiger-bottle .bottle-about .search-body .navi-switch .navi.scene-all .txt, #tiger-bottle .bottle-about .search-body .navi-switch .navi.feature-all .txt{ font-size: 23px; } #tiger-bottle .bottle-about .search-body .navi-switch .navi .icon-body{ margin: auto; width: 100%; } #tiger-bottle .bottle-about .search-body .navi-switch .navi .icon-body .icon{ padding-top: 50px; position: relative; margin: 0 auto; } #tiger-bottle .bottle-about .search-body .navi-switch .navi .icon-body .icon svg{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; } #tiger-bottle .bottle-about .search-body .navi-switch .navi .icon-body .txt{ margin-top: 8%; } #tiger-bottle .bottle-about .search-body .navi-switch .navi .icon-body .txt.line3{ margin-top: 0; } #tiger-bottle .bottle-about .search-body .navi-switch .navi.active .icon-body .icon svg, #tiger-bottle .bottle-about .search-body .navi-switch .navi:hover .icon-body .icon svg{ fill: #ffffff; } #tiger-bottle .bottle-about .search-body .navi-switch .navi.active .txt, #tiger-bottle .bottle-about .search-body .navi-switch .navi:hover .txt{ color: #ffffff; } #tiger-bottle .bottle-about .search-body .feature-navi{ width: 1050px; } #tiger-bottle .bottle-about .search-body .feature-navi .navi{ width: 9.5238%; } #tiger-bottle .bottle-about .search-body .feature-navi .navi .icon-body .icon{ width: 54px; } #tiger-bottle .bottle-about .search-body .feature-navi .navi .icon-body .icon svg{ fill: #6daad4; } #tiger-bottle .bottle-about .search-body .feature-navi .navi.active, #tiger-bottle .bottle-about .search-body .feature-navi .navi:hover{ background-color: #6daad4; } #tiger-bottle .bottle-about .search-body .scene-navi{ width: 730px; } #tiger-bottle .bottle-about .search-body .scene-navi .navi{ width: 13.6986%; } #tiger-bottle .bottle-about .search-body .scene-navi .navi .icon-body .icon{ width: 64px; } #tiger-bottle .bottle-about .search-body .scene-navi .navi .icon-body .icon svg{ fill: #85c874; } #tiger-bottle .bottle-about .search-body .scene-navi .navi.active, #tiger-bottle .bottle-about .search-body .scene-navi .navi:hover{ background-color: #85c874; } #tiger-bottle .bottle-about .search-body .search-list{ width: 1050px; margin: 50px auto 0; display: flex; display: -ms-flex; flex-wrap: wrap; } #tiger-bottle .bottle-about .search-body .search-list .item{ width: 31.4286%; background-color: #ffffff; background-color: #ffffff; border-radius: 20px; box-shadow: 0 0 10px rgba(54,60,69,0.4); box-sizing: border-box; position: relative; } #tiger-bottle .bottle-about .search-body .search-list .item.active{ margin-left: 2.8571%; } #tiger-bottle .bottle-about .search-body .search-list .item.active:nth-child(3n+1){ margin-left: 0; } #tiger-bottle .bottle-about .search-body .search-list .item.active:nth-child(n+4){ margin-top: 4.7619%; } #tiger-bottle .bottle-about .search-body .search-list .item .item-inner{ padding: 8px 8px 14px 8px; } #tiger-bottle .bottle-about .search-body .search-list .item .photo{ border-radius: 16px 16px 0 0; overflow: hidden; } #tiger-bottle .bottle-about .search-body .search-list .item .size-list{ display: flex; display: -ms-flex; padding: 0 7px; margin-top: 7px; } #tiger-bottle .bottle-about .search-body .search-list .item .size-list .txt{ font-size: 13px; line-height: 1.3; padding: 1px 7px; border: 1px solid #535152; border-radius: 10px; } #tiger-bottle .bottle-about .search-body .search-list .item .size-list .txt:nth-child(n+2){ margin-left: 5px; } #tiger-bottle .bottle-about .search-body .search-list .item .size-list .txt .slim{ font-size: 10px; } #tiger-bottle .bottle-about .search-body .search-list .item .copy{ font-size: 21px; line-height: 1.23; font-weight: 700; padding: 0 7px; margin-top: 7px; } #tiger-bottle .bottle-about .search-body .search-list .item .name{ font-size: 12px; line-height: 1.5; color: #878586; padding: 0 7px; margin-top: 7px; } #tiger-bottle .bottle-about .search-body .search-list .item .feature-list{ display: flex; display: -ms-flex; padding: 0 7px; margin-top: 7px; } #tiger-bottle .bottle-about .search-body .search-list .item .feature-list .txt{ width: 60px; height: 40px; background-color: #e7e9ed; display: flex; display: -ms-flex; text-align: center; justify-content: center; align-items: center; border-radius: 6px; } #tiger-bottle .bottle-about .search-body .search-list .item .feature-list .txt:nth-child(n+2){ margin-left: 7px; } #tiger-bottle .bottle-about .search-body .search-list .item .feature-list .txt .word{ font-size: 12px; line-height: 1.25; color: #858797; } #tiger-bottle .bottle-about .search-body .search-list .item .feature-list .txt .word .slim{ display: inline-block; width: 142.85%; transform: scaleX(0.7); transform-origin: 0 0; } #tiger-bottle .bottle-about .search-body .search-list .item .caption{ font-size: 12px; line-height: 1.5; color: #878586; padding: 0 7px; margin-top: 7px; } #tiger-bottle .bottle-about .search-body .search-list .item .btn{ position: absolute; right: 0; bottom: 0; width: 44px; height: 44px; background-color: #f59349; margin: 0 3px 3px 0; border-radius: 16px; } #tiger-bottle .bottle-about .search-body .search-list .item .btn::before{ content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border: solid #ffffff; border-width: 1px 1px 0 0; transform: translateX(-25%) translate(-50%,-50%) rotate(45deg); } #tiger-bottle .bottle-about .search-body .search-list .item a{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(255,255,255,0); display: block; z-index: 100; } #tiger-bottle .bottle-about .search-body .add-btn{ margin: 50px auto 0; padding: 0; width: 270px; } #tiger-bottle .bottle-about .search-body .add-btn a{ display: block; background-color: #f59349; color: #ffffff; text-align: center; font-size: 18px; line-height: 1.5; border: 2px solid #ffffff; padding: 15px 0; border-radius: 30px; position: relative; box-shadow: 0 0 10px rgba(141,128,111,0.4); } #tiger-bottle .bottle-about .search-body .add-btn a::before, #tiger-bottle .bottle-about .search-body .add-btn a::after{ content: ""; position: absolute; left: 82.962%; top: 50%; transform: translate(-50%,-50%); background-color: #ffffff; } #tiger-bottle .bottle-about .search-body .add-btn a::before{ width: 23px; height: 1px; } #tiger-bottle .bottle-about .search-body .add-btn a::after{ width: 1px; height: 23px; } #tiger-bottle .bottle-about .search-body .search-list .item{ opacity: 0; height: 0; overflow: hidden; } #tiger-bottle .bottle-about .search-body .search-list .item.show{ opacity: 1; height: auto; transition: opacity 0.5s; } #tiger-bottle .bottle-about .search-body .search-list .item.active:nth-child(n){ margin-top: 0; } #tiger-bottle .bottle-about .search-body .search-list .item.show:nth-child(n+4){ margin-top: 4.7619%; } #tiger-bottle .bottle-about .search-body .add-btn{ display: none; } #tiger-bottle .bottle-about .search-body .add-btn.show{ display: block; } #tiger-bottle .bottle-about .about-caption{ font-size: 12px; line-height: 1.5; margin-top: 25px; } #tiger-bottle .bottle-end{ padding: 80px 0 160px; position: relative; z-index: 50; } #tiger-bottle .bottle-end .bg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: content-box; } #tiger-bottle .bottle-end .bg .wave-mask{ position: absolute; background-color: #fbf6ea; clip-path: url(#wave-path02); width: 100%; height: 422px; margin-top: -130px; } #tiger-bottle .bottle-end .bg .fill{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #fbf6ea; } #tiger-bottle .bottle-end .bg .deco{ position: absolute; left: 50%; top: 0; width: 698px; } #tiger-bottle .bottle-end .bg .deco01{ margin: -60px 0 0 -766px; } #tiger-bottle .bottle-end .bg .deco02{ margin: 637px 0 0 70px; } #tiger-bottle .bottle-end .topics .head, #tiger-bottle .bottle-end .column .head{ text-align: center; padding-bottom: 75px; position: relative; } #tiger-bottle .bottle-end .topics .head::before, #tiger-bottle .bottle-end .column .head::before{ content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: 50px; background-color: #707070; } #tiger-bottle .bottle-end .topics .head .ttl, #tiger-bottle .bottle-end .column .head .ttl{ font-family: "Roboto", sans-serif; font-weight: 300; font-size: 27px; line-height: 1.5; letter-spacing: 0.3em; padding-left: 0.3em; color: #878586; } #tiger-bottle .bottle-end .topics .head .copy, #tiger-bottle .bottle-end .column .head .copy{ font-size: 50px; line-height: 1.2; margin-top: 20px; } #tiger-bottle .bottle-end .column .head{ margin-top: 120px; } #tiger-bottle .bottle-end .topics .slide-list{ width: 885px; margin: 24px auto 0; } #tiger-bottle .bottle-end .topics .slide-list .list-item .slick-arrow{ position: absolute; width: 50px; height: 50px; background-color: #f59349; border-radius: 20px; border: 2px solid #ffffff; cursor: pointer; top: 0; margin-top: 16.8361%; transform: translateY(-50%); z-index: 10; } #tiger-bottle .bottle-end .topics .slide-list .list-item .prev-arrow{ left: 0; margin-left: -50px; } #tiger-bottle .bottle-end .topics .slide-list .list-item .next-arrow{ right: 0; margin-right: -50px; } #tiger-bottle .bottle-end .topics .slide-list .list-item .slick-arrow::before{ content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border: solid #ffffff; } #tiger-bottle .bottle-end .topics .slide-list .list-item .next-arrow::before{ border-width: 1px 1px 0 0; transform: translateX(-25%) translate(-50%,-50%) rotate(45deg); } #tiger-bottle .bottle-end .topics .slide-list .list-item .prev-arrow::before{ border-width: 0 0 1px 1px; transform: translateX(25%) translate(-50%,-50%) rotate(45deg); } #tiger-bottle .bottle-end .topics .slide-list .list-item .item .inner{ margin: 0 7.63%; position: relative; } #tiger-bottle .bottle-end .topics .slide-list .list-item .item .inner .overlay{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(255,255,255,0); z-index: 10; } #tiger-bottle .bottle-end .topics .slide-list .list-item .item .photo{ border-radius: 15px; overflow: hidden; box-shadow: 0 0 10px rgba(0,0,0,0.3); } #tiger-bottle .bottle-end .topics .slide-list .list-item .item .txt{ margin-top: 20px; font-size: 20px; line-height: 1.8; font-weight: 500; text-align: center; } #tiger-bottle .bottle-end .topics .slide-list .list-item .item .txt .sub{ font-size: 90%; font-weight: normal; } #tiger-bottle .bottle-end .topics .slide-list .list-item .item .txt .word{ position: relative; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: #f59349; text-decoration-skip-ink: none; text-underline-offset: 0.3ex; } /*#tiger-bottle .bottle-end .topics .slide-list .list-item .item .txt .word{ position: relative; } #tiger-bottle .bottle-end .topics .slide-list .list-item .item .txt .word::before{ content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #f59349; }*/ #tiger-bottle .bottle-end .column .list-item{ width: 840px; margin: 24px auto 0; padding: 30px 0; background-color: rgba(255,255,255,0.8); border-radius: 10px; } #tiger-bottle .bottle-end .column .list-item .item{ width: 710px; padding: 0 5px; margin: 0 auto; position: relative; } #tiger-bottle .bottle-end .column .list-item .item:nth-child(n+2){ margin-top: 40px; } #tiger-bottle .bottle-end .column .list-item .item:nth-child(n+2)::before{ content: ""; position: absolute; left: 0; top: 0; margin-top: -20px; width: 100%; height: 1px; background-color: #a9a8a8; } #tiger-bottle .bottle-end .column .list-item .item:last-child{ margin-bottom: 0; } #tiger-bottle .bottle-end .column .list-item .item .overlay{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(255,255,255,0); z-index: 10; } #tiger-bottle .bottle-end .column .list-item .item .split-view{ display: flex; display: -ms-flex; align-items: flex-start; } #tiger-bottle .bottle-end .column .list-item .item .split-view .photo{ width: 119px; border-radius: 20px; overflow: hidden; margin-right: 30px; } #tiger-bottle .bottle-end .column .list-item .item .split-view .txt-body{ padding-right: 87px; flex: 1; } #tiger-bottle .bottle-end .column .list-item .item .split-view .txt-body .category{ line-height: 0; } #tiger-bottle .bottle-end .column .list-item .item .split-view .txt-body .category .word{ font-size: 12px; line-height: 1.6; background-color: #707070; color: #ffffff; padding: 0 16px; display: inline-block; border-radius: 10px; vertical-align: top; } #tiger-bottle .bottle-end .column .list-item .item .split-view .txt-body .txt{ font-size: 18px; line-height: 1.38; font-weight: 500; margin-top: 10px; } #tiger-bottle .bottle-end .column .list-item .item .icon{ position: absolute; right: 0; top: 50%; width: 41px; height: 41px; background-color: #f59349; border: 2px solid #ffffff; border-radius: 20px; transform: translateY(-50%); } #tiger-bottle .bottle-end .column .list-item .item .icon::before{ content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border: solid #ffffff; border-width: 1px 1px 0 0; transform: translateX(-25%) translate(-50%,-50%) rotate(45deg); } #tiger-bottle .bottle-end .column .navi{ margin: 30px auto 0; padding: 0; width: 270px; } #tiger-bottle .bottle-end .column .navi a{ display: block; background-color: #f59349; color: #ffffff; text-align: center; font-size: 18px; line-height: 1.5; border: 2px solid #ffffff; padding: 15px 0; border-radius: 30px; position: relative; box-shadow: 0 0 10px rgba(141,128,111,0.4); } @media (max-width: 1360px){ #tiger-bottle .hero .bg-fill{ width: 1360px; left: 50%; transform: translateX(-50%); } #tiger-bottle .hero .wave-mask{ width: 1360px; left: 50%; transform: translateX(-50%); } #tiger-bottle .bottle-quality .quality01 .bg .wave-mask{ width: 1360px; left: 50%; transform: translateX(-50%); } #tiger-bottle .bottle-quality .quality01 .bg .fill{ background-size: 1360px calc(100% + 130px); } #tiger-bottle .bottle-quality .quality02 .bg .wave-mask{ width: 1360px; left: 50%; transform: translateX(-50%); } #tiger-bottle .bottle-quality .quality02 .bg .fill{ background-size: 1360px calc(100% + 130px); } #tiger-bottle .bottle-quality .quality03 .bg .wave-mask{ width: 1360px; left: 50%; transform: translateX(-50%); } #tiger-bottle .bottle-quality .quality03 .bg .fill{ background-size: 1360px calc(100% + 130px); } #tiger-bottle .bottle-movie .bg .wave-mask{ width: 1360px; left: 50%; transform: translateX(-50%); } #tiger-bottle .bottle-movie .bg .fill{ background-size: 1360px calc(100% + 130px); } #tiger-bottle .bottle-about .bg .wave-mask{ width: 1360px; left: 50%; transform: translateX(-50%); } #tiger-bottle .bottle-about .bg .fill{ background-size: 1360px calc(100% + 130px); } #tiger-bottle .bottle-about .bg .photo01{ width: 337px; margin: 40px 0 0 0; left: 0; } #tiger-bottle .bottle-about .bg .photo02{ width: 204px; margin: 47px 5.5882% 0 0; right: 0; } #tiger-bottle .bottle-about .bg .photo03{ width: 188px; margin: 325px 0 0 15.8088%; left: 0; } #tiger-bottle .bottle-about .bg .photo04{ width: 235px; margin: 358px 9.92645% 0 0; right: 0; } #tiger-bottle .bottle-other .bg .wave-mask{ width: 1360px; left: 50%; transform: translateX(-50%); } #tiger-bottle .bottle-end .bg .wave-mask{ width: 1360px; left: 50%; transform: translateX(-50%); } } @media (max-width: 1210px){ #tiger-bottle .hero .deco01{ left: 0; margin: -1.56px 0 0 -152.60px; } #tiger-bottle .hero .deco02{ right: 0; margin: 286.43px -215.3px 0 0; } #tiger-bottle .hero .photo01{ right: 0; margin: -3px 26px 0 0; } #tiger-bottle .hero .photo02{ right: 0; margin: 269px 99px 0 0; } #tiger-bottle .hero .photo03{ left: 0; margin: 295px 0 0 25px; } #tiger-bottle .bottle-about .base-body{ margin: 0 2%; } } @media (max-width: 1180px){ #tiger-bottle .bottle-about .bg .photo{ border-radius: 0.4237vw; } #tiger-bottle .bottle-about .bg .photo01{ width: 27.2569%; margin: 7.529% 0 0 0; } #tiger-bottle .bottle-about .bg .photo02{ width: 16.5%; margin: 8.14% 5.588% 0 0; } #tiger-bottle .bottle-about .bg .photo03{ width: 15.2053%; margin: 32.676% 0 0 15.808%; } #tiger-bottle .bottle-about .bg .photo04{ width: 19.0069%; margin: 35.587% 9.926% 0 0; } #tiger-bottle .bottle-about .about-intro .ttl{ font-size: 4.24vw; text-shadow: 0 0 1.69vw rgba(91,52,26,0.6); } #tiger-bottle .bottle-about .about-intro .txt{ font-size: 1.44vw; margin-top: 2.54vw; } #tiger-bottle .bottle-about .about-intro .txt .line{ padding: 0.17vw 0.42vw; } #tiger-bottle .bottle-about .search-body{ padding: 5.51vw 0 5.93vw; margin: 4.24vw auto 0; border-radius: 0.85vw; box-shadow: 0 0 1.27vw rgba(0,0,0,0.2); } #tiger-bottle .bottle-about .search-body .search-ttl{ font-size: 2.97vw; } #tiger-bottle .bottle-about .search-body .search-ttl .icon{ width: 2.88vw; } #tiger-bottle .bottle-about .search-body .category-navi .navi{ border-width: 0.08vw; padding: 0.85vw 0; border-radius: 2.29vw; font-size: 1.36vw; } #tiger-bottle .bottle-about .search-body .category-navi .navi .s-size{ font-size: 81.25%; } #tiger-bottle .bottle-about .search-body .navi-switch .navi{ height: 10vw; border-radius: 0.42vw; box-shadow: 0 0 0.34vw rgba(54,60,69,0.3); } #tiger-bottle .bottle-about .search-body .navi-switch .navi .txt{ font-size: 1.19vw; } #tiger-bottle .bottle-about .search-body .navi-switch .navi.scene-all .txt, #tiger-bottle .bottle-about .search-body .navi-switch .navi.feature-all .txt{ font-size: 1.95vw; } #tiger-bottle .bottle-about .search-body .navi-switch .navi .icon-body .icon{ padding-top: 4.24vw; } #tiger-bottle .bottle-about .search-body .feature-navi{ width: 88.98vw; } #tiger-bottle .bottle-about .search-body .feature-navi .navi .icon-body .icon{ width: 4.58vw; } #tiger-bottle .bottle-about .search-body .scene-navi{ width: 61.98vw; } #tiger-bottle .bottle-about .search-body .scene-navi .navi .icon-body .icon{ width: 5.42vw; } #tiger-bottle .bottle-about .search-body .search-list{ width: 88.98vw; margin: 4.24vw auto 0; } #tiger-bottle .bottle-about .search-body .search-list .item.active:nth-child(n){ margin-top: 0; } #tiger-bottle .bottle-about .search-body .search-list .item.show:nth-child(n+4){ margin-top: 4.7619%; } #tiger-bottle .bottle-about .search-body .search-list .item{ border-radius: 1.694vw; box-shadow: 0 0 0.847vw rgba(54,60,69,0.4); } #tiger-bottle .bottle-about .search-body .search-list .item .item-inner{ padding: 0.677vw 0.677vw 1.186vw 0.677vw; } #tiger-bottle .bottle-about .search-body .search-list .item .photo{ border-radius: 1.355vw 1.355vw 0 0; } #tiger-bottle .bottle-about .search-body .search-list .item .size-list{ padding: 0 0.593vw; margin-top: 0.593vw; } #tiger-bottle .bottle-about .search-body .search-list .item .size-list .txt{ font-size: 1.101vw; padding: 0.084vw 0.593vw; border-width: 0.084vw; border-radius: 0.847vw; } #tiger-bottle .bottle-about .search-body .search-list .item .size-list .txt:nth-child(n+2){ margin-left: 0.423vw; } #tiger-bottle .bottle-about .search-body .search-list .item .size-list .txt .slim{ font-size: 0.847vw; } #tiger-bottle .bottle-about .search-body .search-list .item .copy{ font-size: 1.779vw; padding: 0 0.593vw; margin-top: 0.593vw; } #tiger-bottle .bottle-about .search-body .search-list .item .name{ font-size: 1.016vw; padding: 0 0.593vw; margin-top: 0.593vw; } #tiger-bottle .bottle-about .search-body .search-list .item .feature-list{ padding: 0 0.593vw; margin-top: 0.593vw; } #tiger-bottle .bottle-about .search-body .search-list .item .feature-list .txt{ width: 5.084vw; height: 3.389vw; border-radius: 0.508vw; } #tiger-bottle .bottle-about .search-body .search-list .item .feature-list .txt:nth-child(n+2){ margin-left: 0.593vw; } #tiger-bottle .bottle-about .search-body .search-list .item .feature-list .txt .word{ font-size: 1.016vw; } #tiger-bottle .bottle-about .search-body .search-list .item .caption{ font-size: 1.016vw; padding: 0 0.593vw; margin-top: 0.593vw; } #tiger-bottle .bottle-about .search-body .search-list .item .btn{ width: 3.728vw; height: 3.728vw; margin: 0 0.254vw 0.254vw 0; border-radius: 1.355vw; } #tiger-bottle .bottle-about .search-body .search-list .item .btn::before{ width: 0.762vw; height: 0.762vw; border-width: 0.084vw 0.084vw 0 0; } #tiger-bottle .bottle-about .search-body .add-btn{ margin-top: 4.24vw; } #tiger-bottle .bottle-about .about-caption{ font-size: 1.02vw; line-height: 1.5; margin-top: 2.12vw; } } @media (max-width: 1100px){ #tiger-bottle .hero .deco{ width: 42%; } #tiger-bottle .hero .deco01{ margin: -0.09% 0 0 -13.81%; } #tiger-bottle .hero .deco02{ margin: 26% -19.54% 0 0; } #tiger-bottle .hero .photo01{ width: 17%; margin: -0.27% 2.36% 0 0; } #tiger-bottle .hero .photo02{ width: 12.63%; margin: 24.45% 9% 0 0; } #tiger-bottle .hero .photo03{ width: 16%; margin: 26.81% 0 0 2.27%; } #tiger-bottle .hero .intro{ padding: 7.27% 0 19.09%; } #tiger-bottle .hero .bg-fill{ width: 123.63vw; } #tiger-bottle .hero .wave-mask{ width: 123.63vw; height: 26.45vw; margin-top: -5.90vw; } #tiger-bottle .hero .wave-mask::before{ width: 123.63vw; } #tiger-bottle .hero .intro .txt{ font-size: 1.72vw; } #tiger-bottle .hero .intro .txt .marker{ margin-top: 0.90%; } #tiger-bottle .hero .intro .navi{ margin-top: 8.18%; width: 31.82%; } #tiger-bottle .hero .intro .navi a{ font-size: 1.63vw; border-width: 0.18vw; padding: 1.36vw 0; border-radius: 2.72vw; box-shadow: 0 0 0.90vw rgba(141,128,111,0.4); } #tiger-bottle .hero .intro .navi a::before{ width: 0.90vw; height: 0.90vw; border-width: 0 0.09vw 0.09vw 0; } #tiger-bottle .bottle-quality{ padding-top: 7.72%; } #tiger-bottle .bottle-quality .quality-head{ padding-bottom: 6.81%; } #tiger-bottle .bottle-quality .quality-head::before{ width: 0.09%; height: 4.54vw; } #tiger-bottle .bottle-quality .quality-head .ttl{ font-size: 2.45vw; } #tiger-bottle .bottle-quality .quality-head .copy{ font-size: 3.18vw; margin-top: 2.72%; } #tiger-bottle .bottle-quality .quality .section-ttl{ width: 17.63%; border-radius: 0.45vw; border-width: 0.18vw; padding: 1.36% 0 1.81%; } #tiger-bottle .bottle-quality .quality .section-ttl .num{ padding-bottom: 0.63vw; font-size: 5.63vw; } #tiger-bottle .bottle-quality .quality .section-ttl .num::before{ width: 2.18vw; height: 0.09vw; } #tiger-bottle .bottle-quality .quality .section-ttl .word{ font-size: 2.09vw; margin-top: 0.90vw; } #tiger-bottle .bottle-quality .quality .intro{ margin-top: 4.54%; } #tiger-bottle .bottle-quality .quality .intro .head{ font-size: 4.72vw; } #tiger-bottle .bottle-quality .quality .intro .txt{ font-size: 1.45vw; margin: 2.27% auto 0; } #tiger-bottle .bottle-quality .quality01{ padding-top: 5.63%; position: relative; } #tiger-bottle .bottle-quality .quality01 .bg{ top: -27.45vw; padding-bottom: 27.45%; } #tiger-bottle .bottle-quality .quality01 .bg .wave-mask{ width: 123.63vw; height: 38.36vw; margin-top: -11.81vw; } #tiger-bottle .bottle-quality .quality01 .bg .fill{ background-position: center -11.81vw; background-size: 123.63vw calc(100% + 11.81vw); } #tiger-bottle .bottle-quality .quality01 .bg .fill::before{ height: 33.18vw; } #tiger-bottle .bottle-quality .quality01 .bg .deco{ position: absolute; left: 50%; top: 0; } #tiger-bottle .bottle-quality .quality01 .bg .deco01{ width: 30.27%; margin: 39.36% 0 0 -77.81%; } #tiger-bottle .bottle-quality .quality01 .bg .deco02{ width: 69.45%; margin: 28.72% 0 0 31%; } #tiger-bottle .bottle-quality .quality01 .deco-ttl{ width: 25.63vw; margin: -18.36vw 0 0 -21.63vw; } #tiger-bottle .bottle-quality .quality01 .content{ height: 66.90vw; } #tiger-bottle .bottle-quality .quality01 .content .photo{ width: 40.90vw; margin: 4.18vw 0 0 28.72vw; } #tiger-bottle .bottle-quality .quality01 .content .info{ width: 50.90vw; padding: 2.27vw 0 2.27vw 2.72vw; border-radius: 0.45vw; box-shadow: 0 0 0.90vw rgba(54,60,69,0.2); margin: 13.09vw 0 0 2.27vw; border-width: 0.18vw; } #tiger-bottle .bottle-quality .quality01 .content .info .copy{ font-size: 2.18vw; } #tiger-bottle .bottle-quality .quality01 .content .info .copy .word{ padding: 0.45vw 2.72vw 0.45vw 0.90vw; } #tiger-bottle .bottle-quality .quality01 .content .info .copy .word+.word{ margin-top: 0.45vw; } #tiger-bottle .bottle-quality .quality01 .content .info .txt{ width: 27.45vw; font-size: 1.63vw; margin-top: 0.90vw; } #tiger-bottle .bottle-quality .quality01 .content .note{ width: 35.09vw; } #tiger-bottle .bottle-quality .quality01 .content .note .illust-body{ width: 15.90vw; } #tiger-bottle .bottle-quality .quality01 .content .note .illust-body .illust::before{ height: 0.27vw; margin-right: -1.09vw; } #tiger-bottle .bottle-quality .quality01 .content .note .illust-body .illust::after{ width: 0.63vw; height: 0.63vw; } #tiger-bottle .bottle-quality .quality01 .content .note .illust-body .caption{ font-size: 1vw; margin-top: -0.45vw; } #tiger-bottle .bottle-quality .quality01 .content .note .txt-body .bubble{ font-size: 1.81vw; padding: 0 2.72vw; border-radius: 1.36vw; } #tiger-bottle .bottle-quality .quality01 .content .note .txt-body .copy{ margin: 0.90vw 0 0; font-size: 2vw; } #tiger-bottle .bottle-quality .quality01 .content .note .txt-body .caption{ font-size: 1.18vw; margin-top: 1.36vw; } #tiger-bottle .bottle-quality .quality01 .content .note01{ margin: 4.27vw 0 0 60.18vw; } #tiger-bottle .bottle-quality .quality01 .content .note01 .illust::before{ width: 5.45vw; } #tiger-bottle .bottle-quality .quality01 .content .note01 .illust::after{ margin-right: 4.36vw; } #tiger-bottle .bottle-quality .quality01 .content .note02{ margin: 24.18vw 0 0 62.72vw; } #tiger-bottle .bottle-quality .quality01 .content .note02 .illust::before{ width: 4.18vw; } #tiger-bottle .bottle-quality .quality01 .content .note02 .illust::after{ margin-right: 3.09vw; } #tiger-bottle .bottle-quality .quality02{ padding-top: 13.63%; } #tiger-bottle .bottle-quality .quality02 .bg .wave-mask{ width: 123.63vw; height: 38.36vw; margin-top: -11.81vw; } #tiger-bottle .bottle-quality .quality02 .bg .fill{ background-position: center -11.81vw; background-size: 123.63vw calc(100% + 11.81vw); } #tiger-bottle .bottle-quality .quality02 .bg .fill::before{ height: 33.18vw; } #tiger-bottle .bottle-quality .quality02 .bg .deco01{ width: 13.09%; margin: 10.54% 0 0 -45.72%; } #tiger-bottle .bottle-quality .quality02 .bg .deco02{ width: 16.81%; margin: 22.45% 0 0 33.45%; } #tiger-bottle .bottle-quality .quality02 .deco-ttl{ width: 25.63vw; margin: -22vw 0 0 -0.72vw; } #tiger-bottle .bottle-quality .quality02 .content{ height: 67.72vw; margin-top: -7.72vw; } #tiger-bottle .bottle-quality .quality02 .content .photo{ width: 50.81vw; margin: 0 0 0 0.90vw; } #tiger-bottle .bottle-quality .quality02 .content .info{ width: 52.18vw; padding: 2.72vw 0 2.72vw 6.36vw; border-radius: 0.45vw; box-shadow: 0.45vw 0.45vw 0.45vw rgba(109,170,212,0.2); margin: 11.27vw 0 0 26.36vw; border-width: 0.18vw; } #tiger-bottle .bottle-quality .quality02 .content .info .copy{ font-size: 2.18vw; } #tiger-bottle .bottle-quality .quality02 .content .info .copy .word{ padding: 0.18vw 3.63vw; } #tiger-bottle .bottle-quality .quality02 .content .info .txt{ font-size: 1.63vw; margin-top: 0.90vw; } #tiger-bottle .bottle-quality .quality02 .content .note{ margin: 27.90vw 0 0 57.54vw; } #tiger-bottle .bottle-quality .quality02 .content .note .illust-body .deco{ width: 33.09vw; margin: 6.81vw -0.90vw 0 0; } #tiger-bottle .bottle-quality .quality02 .content .note .illust-body .illust{ width: 16.72vw; } #tiger-bottle .bottle-quality .quality02 .content .note .illust-body .caption{ font-size: 1vw; bottom: 0.63vw; } #tiger-bottle .bottle-quality .quality02 .content .note .txt-body{ margin-top: 0.90vw; } #tiger-bottle .bottle-quality .quality02 .content .note .txt-body .copy{ font-size: 1.54vw; } #tiger-bottle .bottle-quality .quality03{ padding: 14.54% 0 29.09%; } #tiger-bottle .bottle-quality .quality03 .bg .wave-mask{ width: 123.63vw; height: 38.36vw; margin-top: -11.81vw; } #tiger-bottle .bottle-quality .quality03 .bg .fill{ background-position: center -11.81vw; background-size: 123.63vw calc(100% + 11.81vw); } #tiger-bottle .bottle-quality .quality03 .bg .fill::before{ height: 33.18vw; } #tiger-bottle .bottle-quality .quality03 .bg .deco01{ width: 11.09%; margin: 10.45% 0 0 -44.36%; } #tiger-bottle .bottle-quality .quality03 .bg .deco02{ width: 6.54%; margin: 7.63% 0 0 -32.18%; } #tiger-bottle .bottle-quality .quality03 .bg .deco03{ width: 6.54%; margin: 108.18% 0 0 44.18%; } #tiger-bottle .bottle-quality .quality03 .section-ttl{ padding: 0.45vw 0 0.90vw; } #tiger-bottle .bottle-quality .quality03 .deco-ttl{ width: 25.63vw; margin: -18.36vw 0 0 -21.63vw; } #tiger-bottle .bottle-quality .quality03 .content{ width: 95.45vw; padding: 3.09vw 0 2.18vw; border-radius: 0.45vw; box-shadow: 0.45vw 0.45vw 0.45vw rgba(152,142,203,0.2); margin: 2.54vw auto 0; border-width: 0.18vw; } #tiger-bottle .bottle-quality .quality03 .content .info .copy{ font-size: 2.18vw; } #tiger-bottle .bottle-quality .quality03 .content .info .copy .word{ padding: 0.18vw 8.18vw; } #tiger-bottle .bottle-quality .quality03 .content .info .txt{ font-size: 1.63vw; margin-top: 0.90vw; } #tiger-bottle .bottle-quality .quality03 .content .photo{ width: 38.18vw; margin: 15.80% 0 0 28.72vw;} #tiger-bottle .bottle-quality .quality03 .content .note-list{ width: 74vw; margin: 5.09vw auto 0; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note{ width: 15.45vw; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note .processed .head{ width: 34.09vw; border-width: 0.27vw; border-radius: 1.81vw; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note .processed .head .bubble{ border-width: 0.18vw; width: 6.54vw; height: 6.54vw; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note .processed .head .bubble .word{ font-size: 1.45vw; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note .processed .head .txt{ font-size: 1.27vw; padding: 0.63vw 6.36vw; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note .processed .copy{ font-size: 1.54vw; margin-top: 0.90vw; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note01 .processed .caption{ font-size: 0.91vw; margin: 53.55vw 0 0 28vw; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note01 .processed .head .bubble{ margin: -0.90vw 0 0 -1.81vw; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note01 .processed .head .illust{ border-radius: 0 0 0 1.63vw; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note01 .processed .copy{ width: 17.27vw; margin-left: -1.81vw; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note02 .processed .head{ margin-left: -18.63vw; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note02 .processed .head .bubble{ margin: -0.90vw -1.81vw 0 0; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note02 .processed .head .illust{ border-radius: 0 0 1.63vw 0; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note .processed .caption02{ font-size: 1vw; margin-top: 0.45vw; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note .raw{ margin-top: 1.27vw; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note .raw .head{ border-width: 0.18vw; border-radius: 1.09vw; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note .raw .head .txt{ font-size: 1.36vw; padding: 0.18vw 0 0.45vw; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note .raw .caption{ font-size: 1vw; margin-top: 0.45vw; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note .raw .copy{ font-size: 1.18vw; margin-top: 0.45vw; } #tiger-bottle .bottle-quality .quality03 .quality-caption{ font-size: 1.36vw; margin-top: 10vw; } #tiger-bottle .bottle-movie{ padding: 5.45% 0 22.72%; } #tiger-bottle .bottle-movie .bg .wave-mask{ width: 123.63vw; height: 38.36vw; margin-top: -11.81vw; } #tiger-bottle .bottle-movie .bg .fill{ background-position: center -11.81vw; background-size: 123.63vw calc(100% + 11.81vw); } #tiger-bottle .bottle-movie .movie-head{ padding-bottom: 6.81%; } #tiger-bottle .bottle-movie .movie-head::before{ width: 0.09%; height: 4.54vw; } #tiger-bottle .bottle-movie .movie-head .ttl{ font-size: 2.45vw; } #tiger-bottle .bottle-movie .movie-head .copy{ font-size: 4.54vw; margin-top: 2.72%; } #tiger-bottle .bottle-movie .movie-frame .photo{ border-width: 0.42vw; border-radius: 0.85vw; box-shadow: 0 0 3.19vw rgba(223,90,36,0.3); } #tiger-bottle .bottle-other{ padding: 13.63% 0 26.36%; } #tiger-bottle .bottle-other .bg .wave-mask{ width: 123.63vw; height: 38.36vw; margin-top: -11.81vw; } #tiger-bottle .bottle-other .bg .deco01{ width: 62.72%; margin: 6.54% 0 0 -78.36%; } #tiger-bottle .bottle-other .bg .deco02{ width: 51.63%; margin: 117% 0 0 24.54%; } #tiger-bottle .bottle-other .other-head .ttl{ font-size: 2.45vw; } #tiger-bottle .bottle-other .other-head .copy{ font-size: 4.54vw; margin-top: 2.72vw; } #tiger-bottle .bottle-other .other-head .txt{ font-size: 1.45vw; margin: 1.81vw auto 0; } #tiger-bottle .bottle-other .other-head .caption{ font-size: 1.45vw; margin: 1.81vw auto 0; padding: 0.36vw 4.54vw; border-radius: 1.54vw; } #tiger-bottle .bottle-other .other{ width: 80%; padding: 4.09vw 0; } #tiger-bottle .bottle-other .other01{ margin-top: 6.36vw; } #tiger-bottle .bottle-other .other02{ margin-top: 5.45vw; } #tiger-bottle .bottle-other .other::before{ box-shadow: 0 0 3.63vw rgba(232,196,114,0.4); border-radius: 12.18vw 0 0 12.18vw; } #tiger-bottle .bottle-other .other02::before{ border-radius: 0 12.18vw 12.18vw 0; } #tiger-bottle .bottle-other .other01 .other-body{ padding-left: 10.71%; padding-right: 1.19%; } #tiger-bottle .bottle-other .other02 .other-body{ padding-right: 10.71%; padding-left: 1.19%; } #tiger-bottle .bottle-other .other .other-body .ttl{ font-size: 3.15vw; } #tiger-bottle .bottle-other .other .other-body .copy{ font-size: 1.53vw; } #tiger-bottle .bottle-other .other .other-body .caption{ font-size: 1.08vw; } #tiger-bottle .bottle-other .other .other-body .split-view .item{ width: 46.08%; } #tiger-bottle .bottle-other .other .other-body .split-view .item .txt{ font-size: 1.35vw; margin-top: 0.90vw; } #tiger-bottle .bottle-other .other .other-body .split-view{ margin-top: 0.45vw; } #tiger-bottle .bottle-other .other01 .other-body .split-view .item .photo{ border-width: 0.09vw; border-radius: 0.45vw; } #tiger-bottle .bottle-other .other01 .other-body .split-view .item .head{ width: 16.21vw; margin: 0.90vw auto 0; font-size: 1.44vw; padding: 0.54vw 0; border-radius: 1.35vw; color: #ffffff; } #tiger-bottle .bottle-other .other02 .other-body .split-view{ margin-top: 1.80vw; } #tiger-bottle .bottle-other .other02 .other-body .split-view .item .photo{ border-radius: 0.45vw; } #tiger-bottle .bottle-other .other02 .other-body .split-view .item .head{ margin: 0.90vw auto 0; font-size: 1.53vw; } #tiger-bottle .bottle-other .other02 .other-body .split-view .item .photo-s{ margin: 70.38% 0 0 2.05%; width: 63.34%; } #tiger-bottle .bottle-other .other02 .other-body .split-view .item .photo-s .logo{ width: 36.57%; margin: -4.62% 0 0 46.29%; } #tiger-bottle .bottle-about{ padding: 8.45% 0 17.82%; } #tiger-bottle .bottle-about .bg .wave-mask{ width: 123.63vw; height: 38.36vw; margin-top: -11.81vw; } #tiger-bottle .bottle-about .bg .fill{ background-position: center -11.81vw; background-size: 123.63vw auto; } #tiger-bottle .bottle-about .search-body .add-btn{ width: 24.54vw; } #tiger-bottle .bottle-about .search-body .add-btn a{ font-size: 1.63vw; border-width: 0.18vw; padding: 1.36vw 0; border-radius: 2.72vw; box-shadow: 0 0 0.90vw rgba(141,128,111,0.4); } #tiger-bottle .bottle-about .search-body .add-btn a::before{ width: 1.9491vw; height: 0.0847vw; } #tiger-bottle .bottle-about .search-body .add-btn a::after{ width: 0.0847vw; height: 1.9491vw; } #tiger-bottle .bottle-end{ padding: 7.20% 0 14.41%; } #tiger-bottle .bottle-end .bg .wave-mask{ width: 123.63vw; height: 38.36vw; margin-top: -11.81vw; } #tiger-bottle .bottle-end .topics .head, #tiger-bottle .bottle-end .column .head{ padding-bottom: 6.75%; } #tiger-bottle .bottle-end .topics .head::before, #tiger-bottle .bottle-end .column .head::before{ width: 0.09%; height: 4.50vw; } #tiger-bottle .bottle-end .topics .head .ttl, #tiger-bottle .bottle-end .column .head .ttl{ font-size: 2.45vw; } #tiger-bottle .bottle-end .topics .head .copy, #tiger-bottle .bottle-end .column .head .copy{ font-size: 4.54vw; margin-top: 1.81%; } #tiger-bottle .bottle-end .column .head{ margin-top: 10.90%; } #tiger-bottle .bottle-end .column .navi{ margin-top: 2.72%; width: 24.54%; } #tiger-bottle .bottle-end .column .navi a{ font-size: 1.63vw; border-width: 0.18vw; padding: 1.36vw 0; border-radius: 2.72vw; box-shadow: 0 0 0.90vw rgba(141,128,111,0.4); } } @media (max-width: 940px){ #tiger-bottle .bottle-movie .movie-frame{ width: 84.57%; margin: 1.27% auto 0; } #tiger-bottle .bottle-movie .movie-frame .btn{ width: 16.70vw; margin: 36.38vw 0 0 -4.04vw; } #tiger-bottle .bottle-end .bg .deco{ width: 74.25%; } #tiger-bottle .bottle-end .bg .deco01{ margin: -6.38% 0 0 -81.48%; } #tiger-bottle .bottle-end .bg .deco02{ margin: 67.76% 0 0 7.44%; } #tiger-bottle .bottle-end .topics .slide-list{ width: 85%; margin: 2.55% auto 0; } /*#tiger-bottle .bottle-end .topics .slide-list .list-item .item{ width: 29.76%; }*/ #tiger-bottle .bottle-end .topics .slide-list .list-item .item .photo{ border-radius: 1.59vw; box-shadow: 0 0 1.06vw rgba(0,0,0,0.3); } #tiger-bottle .bottle-end .topics .slide-list .list-item .item .txt{ margin-top: 2.12vw; font-size: 2.12vw; } /*#tiger-bottle .bottle-end .topics .slide-list .list-item .item .txt .word::before{ height: 0.10vw; }*/ #tiger-bottle .bottle-end .column .list-item{ width: 89.36%; margin: 2.55% auto 0; padding: 3.19% 0; border-radius: 1.06vw; } #tiger-bottle .bottle-end .column .list-item .item{ width: 84.52%; padding: 0 0.59%; } #tiger-bottle .bottle-end .column .list-item .item:nth-child(n+2){ margin-top: 4.25vw; } #tiger-bottle .bottle-end .column .list-item .item:nth-child(n+2)::before{ margin-top: -2.12vw; height: 0.10vw; } #tiger-bottle .bottle-end .column .list-item .item .split-view .photo{ width: 12.65vw; border-radius: 2.12vw; margin-right: 3.19vw; } #tiger-bottle .bottle-end .column .list-item .item .split-view .txt-body{ padding-right: 9.25vw; } #tiger-bottle .bottle-end .column .list-item .item .split-view .txt-body .category .word{ font-size: 1.27vw; padding: 0 1.70vw; border-radius: 1.06vw; } #tiger-bottle .bottle-end .column .list-item .item .split-view .txt-body .txt{ font-size: 1.91vw; margin-top: 1.06vw; } #tiger-bottle .bottle-end .column .list-item .item .icon{ width: 4.36vw; height: 4.36vw; border-width: 0.21vw; border-radius: 2.12vw; } #tiger-bottle .bottle-end .column .list-item .item .icon::before{ width: 0.95vw; height: 0.95vw; border-width: 0.10vw 0.10vw 0 0; } } @media (max-width: 750px){ #tiger-bottle .pc{ display: none; } #tiger-bottle .sp{ display: block; } #tiger-bottle .hero{ position: relative; } #tiger-bottle .hero .bg-fill{ background: linear-gradient(to right, #f5eee9 4.6%, #f6f7ee 63.5%, #e5e3d9 100%); } #tiger-bottle .hero .bg-fill::before{ height: 97.33vw; } #tiger-bottle .hero .deco{ display: none; } #tiger-bottle .hero .photo{ right: auto; left: 0; top: 0; } #tiger-bottle .hero .photo img{ transform-origin: center center; } #tiger-bottle .hero .photo01{ width: 32.58%; margin: 105.32% 0 0 71.2%; } #tiger-bottle .hero .photo02{ width: 23.55%; margin: 140.37% 0 0 65.77%; } #tiger-bottle .hero .photo02 img{ transform: rotate(2.183deg); } #tiger-bottle .hero .photo03{ width: 27.99%; margin: 220.96% 0 0 70.67%; } #tiger-bottle .hero .photo03 img{ transform: rotate(-334.601deg); } #tiger-bottle .hero .intro{ padding: 19.73% 0 40%; } #tiger-bottle .hero .wave-mask{ background: linear-gradient(to right, #f5eee9 4.6%, #f6f7ee 63.5%, #e5e3d9 100%); clip-path: url(#wave-sp-path01); height: 77.984vw; margin-top: 0; width: 100%; } #tiger-bottle .hero .wave-mask::before{ background: linear-gradient(to bottom, rgba(255,255,255,1) 56%, rgba(255,255,255,0) 100%); } #tiger-bottle .hero .intro .txt{ padding-left: 8.79%; text-align: left; font-size: 4.26vw; line-height: 2.25; color: #535152; } #tiger-bottle .hero .intro .txt .marker{ font-size: 137.5%; line-height: 1.54; margin-top: 4vw; } #tiger-bottle .hero .intro .navi{ margin: 33.86% auto 0; padding: 0; width: 66.66%; } #tiger-bottle .hero .intro .navi a{ font-size: 4.8vw; line-height: 1.3; border-width: 0.53vw; padding: 1.5vw 0; border-radius: 7.47vw; box-shadow: 0 0 2.66vw rgba(141,128,111,0.4); } #tiger-bottle .hero .intro .navi a::before{ width: 2.41vw; height: 2.41vw; border-width: 0 0.26vw 0.26vw 0; } #tiger-bottle .bottle-quality{ padding-top: 17.07%; } #tiger-bottle .bottle-quality img{ transform-origin: center center; } #tiger-bottle .bottle-quality .quality-head{ padding-bottom: 17.07%; } #tiger-bottle .bottle-quality .quality-head::before{ width: 0.27%; height: 10.67vw; } #tiger-bottle .bottle-quality .quality-head .ttl{ font-size: 5.33vw; } #tiger-bottle .bottle-quality .quality-head .copy{ font-size: 5.33vw; margin-top: 3.73%; } #tiger-bottle .bottle-quality .quality-head .copy .marker{ font-size: 265%; display: block; } #tiger-bottle .bottle-quality .quality .section-ttl{ width: 45.33%; border-radius: 1.33vw; border-width: 0.53vw; padding: 4% 0 5.33%; } #tiger-bottle .bottle-quality .quality .section-ttl .num{ padding-bottom: 1.87vw; font-size: 15.47vw; } #tiger-bottle .bottle-quality .quality .section-ttl .num::before{ width: 4.8vw; height: 0.27vw; } #tiger-bottle .bottle-quality .quality .section-ttl .word{ font-size: 5.33vw; margin-top: 2.67vw; } #tiger-bottle .bottle-quality .quality .intro{ margin-top: 16%; text-align: left; padding: 0 4%; } #tiger-bottle .bottle-quality .quality .intro .head{ font-size: 9.07vw; line-height: 1.35; } #tiger-bottle .bottle-quality .quality .intro .txt{ font-size: 4.27vw; line-height: 1.75; margin: 2.67vw auto 0; } #tiger-bottle .bottle-quality .quality01{ padding: 11.2% 0 44%; } #tiger-bottle .bottle-quality .quality01 .bg{ top: 0; margin-top: -70%; padding-bottom: 70%; } #tiger-bottle .bottle-quality .quality01 .bg .wave-mask{ clip-path: url(#wave-sp-path01); width: 100%; height: 77.984vw; margin-top: -21.33vw; background-image: url(/contents/feature/vacuum-insulated-products/assets/img/quality-sp-bg01.webp); } #tiger-bottle .bottle-quality .quality01 .bg .fill{ background-position: center -21.33vw; background-size: 100% calc(100% + 21.33vw); background-image: url(/contents/feature/vacuum-insulated-products/assets/img/quality-sp-bg01.webp); } #tiger-bottle .bottle-quality .quality01 .bg .fill::before{ height: 97.33vw; } #tiger-bottle .bottle-quality .quality01 .bg .deco{ left: 0; } #tiger-bottle .bottle-quality .quality01 .bg .deco01{ display: none; } #tiger-bottle .bottle-quality .quality01 .bg .deco02{ width: 159.8vw; margin: 119.47% 0 0 58.15%; } #tiger-bottle .bottle-quality .quality01 .bg .deco02 img{ transform: rotate(-352.835deg); } #tiger-bottle .bottle-quality .quality01 .deco-ttl{ width: 54.66%; margin: -22.960% 0 0 -4.8%; } #tiger-bottle .bottle-quality .quality01 .content{ height: auto; overflow: visible; margin-top: 8.8%; border-top: 1px solid transparent; } #tiger-bottle .bottle-quality .quality01 .content .photo{ width: 91.33%; margin: -3.47% 0 0 51.64%; } #tiger-bottle .bottle-quality .quality01 .content .photo img{ transform: rotate(-358.998deg); } #tiger-bottle .bottle-quality .quality01 .content .info{ position: relative; width: auto; padding: 5.33% 0 5.33% 2.67%; border-radius: 1.33vw; box-shadow: 0 0 2.67vw rgba(54,60,69,0.2); margin: 0 0 0 4%; border-width: 0.4vw; } #tiger-bottle .bottle-quality .quality01 .content .info .copy{ font-size: 5.07vw; } #tiger-bottle .bottle-quality .quality01 .content .info .copy .word{ line-height: 1.5; padding: 1.33vw; } #tiger-bottle .bottle-quality .quality01 .content .info .copy .word+.word{ margin-top: 1.33vw; } #tiger-bottle .bottle-quality .quality01 .content .info .txt{ width: auto; font-size: 3.73vw; line-height: 1.64; margin-top: 2.67vw; padding-right: 37.87vw; } #tiger-bottle .bottle-quality .quality01 .content .info .txt .marker{ font-size: 121.43%; } #tiger-bottle .bottle-quality .quality01 .content .note{ position: relative; flex-wrap: wrap; width: 43.47%; } #tiger-bottle .bottle-quality .quality01 .content .note .illust-body{ width: 100%; margin-top: -1.33vw; order: 2; } #tiger-bottle .bottle-quality .quality01 .content .note .illust-body .illust::before, #tiger-bottle .bottle-quality .quality01 .content .note .illust-body .illust::after{ left: 100%; top: 50%; background-color: #85c874; transform: translateY(-50%); } #tiger-bottle .bottle-quality .quality01 .content .note .illust-body .illust::before{ height: 0.8vw; margin-left: -6.75%; } #tiger-bottle .bottle-quality .quality01 .content .note .illust-body .illust::after{ width: 1.87vw; height: 1.87vw; } #tiger-bottle .bottle-quality .quality01 .content .note .illust-body .caption{ font-size: 2.93vw; margin-top: -1.33vw; } #tiger-bottle .bottle-quality .quality01 .content .note .txt-body{ flex: 1; text-align: center; order: 1; } #tiger-bottle .bottle-quality .quality01 .content .note .txt-body .bubble{ font-size: 4vw; padding: 0 5.87vw; border-radius: 3.07vw; } #tiger-bottle .bottle-quality .quality01 .content .note .txt-body .copy{ margin: 1.33vw 0 0; font-size: 4.8vw; } #tiger-bottle .bottle-quality .quality01 .content .note .txt-body .caption{ text-align: left; font-size: 2.93vw; line-height: 1.45; margin-top: 4vw; position: absolute; left: 0; top: 100%; white-space: nowrap; margin: 1.33vw 0 0 -6.67vw; } #tiger-bottle .bottle-quality .quality01 .content .note01{ margin: 6.93% 0 0 9.93%; } #tiger-bottle .bottle-quality .quality01 .content .note01 .illust-body .illust::before{ width: 54.91%; } #tiger-bottle .bottle-quality .quality01 .content .note01 .illust-body .illust::after{ margin: 0 0 0 48.16%; } #tiger-bottle .bottle-quality .quality01 .content .note02{ margin: 10.67% 0 0 27.49%; } #tiger-bottle .bottle-quality .quality01 .content .note02 .illust-body .illust::before{ width: 47.14%; padding-top: 25.02%; top: auto; bottom: 50%; transform: none; border: solid #85c874; border-width: 0 0.8vw 0.8vw 0; background-color: transparent; } #tiger-bottle .bottle-quality .quality01 .content .note02 .illust-body .illust::after{ margin: -25.02% 0 0 calc(40.39% - 0.4vw); transform: translate(-50%,-50%); } #tiger-bottle .bottle-quality .quality02{ padding: 23.47% 0 72.71%; } #tiger-bottle .bottle-quality .quality02 .bg .wave-mask{ clip-path: url(#wave-sp-path01); width: 100%; height: 77.984vw; margin-top: -21.33vw; background-image: url(/contents/feature/vacuum-insulated-products/assets/img/quality-sp-bg05.webp); } #tiger-bottle .bottle-quality .quality02 .bg .fill{ background-position: center -21.33vw; background-size: 100% calc(100% + 21.33vw); background-image: url(/contents/feature/vacuum-insulated-products/assets/img/quality-sp-bg05.webp); } #tiger-bottle .bottle-quality .quality02 .bg .fill::before{ height: 97.33vw; } #tiger-bottle .bottle-quality .quality02 .bg .deco{ left: 0; } #tiger-bottle .bottle-quality .quality02 .bg .deco01{ display: none; } #tiger-bottle .bottle-quality .quality02 .bg .deco02{ width: 23.88%; margin: 7.5% 0 0 76.57%; } #tiger-bottle .bottle-quality .quality02 .bg .deco02 img{ transform: rotate(-208.635deg); } #tiger-bottle .bottle-quality .quality02 .section-ttl{ background: linear-gradient(45deg, #6daad4 0%, #e2eef6 100%); border-color: #e2eef6; } #tiger-bottle .bottle-quality .quality02 .deco-ttl{ width: 54.66%; margin: -27.355% 0 0 0.4%; } #tiger-bottle .bottle-quality .quality02 .intro{ text-align: right; padding: 0 9.68% 0 0; } #tiger-bottle .bottle-quality .quality02 .intro .head{ color: #6daad4; } #tiger-bottle .bottle-quality .quality02 .content{ height: auto; overflow: visible; margin-top: 4.93%; border-top: 1px solid transparent; } #tiger-bottle .bottle-quality .quality02 .content .photo{ width: 139.32%; margin: -35.18% 0 0 -44.32%; } #tiger-bottle .bottle-quality .quality02 .content .info{ position: relative; left: auto; width: auto; padding: 5.33% 4.9% 5.33% 30.33%; border-radius: 1.33vw; box-shadow: 1.33vw 1.33vw 1.33vw rgba(109,170,212,0.2); margin: 0 4.53% 0 0; border-width: 0.4vw; } #tiger-bottle .bottle-quality .quality02 .content .info .copy{ font-size: 5.33vw; text-align: center; } #tiger-bottle .bottle-quality .quality02 .content .info .copy .word{ padding: 0; display: block; } #tiger-bottle .bottle-quality .quality02 .content .info .txt{ width: auto; font-size: 3.73vw; line-height: 1.64; margin-top: 1.5vw; } #tiger-bottle .bottle-quality .quality02 .content .info .txt .marker{ font-size: 121.43%; } #tiger-bottle .bottle-quality .quality02 .content .note{ position: relative; width: 40.27%; margin: 35.82% 0 0 38.07%; } #tiger-bottle .bottle-quality .quality02 .content .note .illust-body .deco{ width: 41.06%; top: 0; margin: -16.58% -4.47% 0 0; } #tiger-bottle .bottle-quality .quality02 .content .note .illust-body .illust{ width: 100%; } #tiger-bottle .bottle-quality .quality02 .content .note .illust-body .caption{ font-size: 2.93vw; bottom: 1.87vw; transform: translateX(-20%); } #tiger-bottle .bottle-quality .quality02 .content .note .txt-body{ margin-top: 2.67vw; } #tiger-bottle .bottle-quality .quality02 .content .note .txt-body .copy{ font-size: 3.55vw; line-height: 1.62; } #tiger-bottle .bottle-quality .quality02 .content .note .txt-body .copy .marker{ font-size: 130.2%; } #tiger-bottle .bottle-quality .quality02 .content .note .txt-body .copy .marker .num{ font-size: 144.86%; } #tiger-bottle .bottle-quality .quality03{ padding: 19.2% 0 37.99%; } #tiger-bottle .bottle-quality .quality03 .bg .wave-mask{ clip-path: url(#wave-sp-path01); width: 100%; height: 77.984vw; margin-top: -21.33vw; background-image: url(/contents/feature/vacuum-insulated-products/assets/img/quality-sp-bg08.webp); } #tiger-bottle .bottle-quality .quality03 .bg .fill{ background-position: center -21.33vw; background-size: 100% calc(100% + 21.33vw); background-image: url(/contents/feature/vacuum-insulated-products/assets/img/quality-sp-bg08.webp); } #tiger-bottle .bottle-quality .quality03 .bg .fill::before{ height: 97.33vw; } #tiger-bottle .bottle-quality .quality03 .bg .deco{ left: 0; } #tiger-bottle .bottle-quality .quality03 .bg .deco01{ width: 21.35%; margin: 321.97% 0 0 -2.42%; } #tiger-bottle .bottle-quality .quality03 .bg .deco02{ width: 11.8%; margin: 345.58% 0 0 16.75%; } #tiger-bottle .bottle-quality .quality03 .bg .deco03{ display: none; } #tiger-bottle .bottle-quality .quality03 .section-ttl{ padding: 1.33vw 0 2.67vw; } #tiger-bottle .bottle-quality .quality03 .deco-ttl{ width: 54.66%; margin: -54.009% 0 0 -41.650%; } #tiger-bottle .bottle-quality .quality03 .intro{ padding: 0 0 0 9.68%; } #tiger-bottle .bottle-quality .quality03 .content{ width: auto; padding: 0; background: transparent; border-radius: 0; box-shadow: none; margin: 8.8% auto 0; border: none; } #tiger-bottle .bottle-quality .quality03 .content .info{ padding: 4.8% 8.8% 4.8% 4.8%; background: linear-gradient(30deg, #f1eff8 0%, #ffffff 40%); border-radius: 1.33vw; box-shadow: 1.33vw 1.33vw 1.33vw rgba(152,142,203,0.2); border-width: 0.4vw; margin-left: 4.8%; text-align: left; } #tiger-bottle .bottle-quality .quality03 .content .info .copy{ font-size: 5.33vw; } #tiger-bottle .bottle-quality .quality03 .content .info .copy .word{ padding: 0 0 0 4.53%; display: block; } #tiger-bottle .bottle-quality .quality03 .content .info .txt{ font-size: 3.73vw; line-height: 1.71; margin-top: 1.33vw; } #tiger-bottle .bottle-quality .quality03 .content .info .txt .marker{ font-size: 121.43%; } #tiger-bottle .bottle-quality .quality03 .content .photo{ width: 92.33%; padding-top: 87.28%; margin: 59.38% 0 0 53.07%; } #tiger-bottle .bottle-quality .quality03 .content .photo img{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; } #tiger-bottle .bottle-quality .quality03 .content .note-list{ display: block; width: 100%; margin: 0; position: relative; border-top: 1px solid transparent; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note{ width: auto; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note .processed .head{ width: auto; border-width: 0.8vw; border-radius: 5.33vw 0 0 5.33vw; border-right: none; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note .processed .head .bubble{ left: 0; right: auto; margin: -1.8vw 0 0 -3.2vw; border-width: 0.53vw; width: 15.2vw; height: 15.2vw; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note .processed .head .bubble .word{ font-size: 3.47vw; line-height: 1.23; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note .processed .head .txt{ font-size: 3.2vw; line-height: 1.38; padding: 1.2vw 0 1.2vw 13.87vw; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note .processed .head .txt .narrow{ width: 133.33%; transform: scaleX(0.75); transform-origin: 0 0; display: inline-block; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note .processed .head .txt .marker{ font-size: 125%; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note .processed .copy{ font-size: 4vw; margin-top: 2.67vw; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note .processed .copy sup{ display: none; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note01 .processed .caption{ position: relative; font-size: 2.67vw; margin: 1.33vw 0 0 0; white-space: nowrap; text-indent: -1em; padding-left: 1em; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note01{ position: absolute; width: 76%; margin: 16% 0 0 4.9%; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note01 .processed .head .illust{ overflow: hidden; border-radius: 0 0 0 4.8vw; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note01 .processed .copy{ text-align: left; width: auto; margin-left: 0; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note02{ width: 45.87%; margin: 84.36% 0 0 auto; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note02 .processed .head{ text-align: left; margin-left: 0; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note02 .processed .head .bubble{ margin-top: 29.7vw; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note02 .processed .head .processed-inner{ display: -ms-flex; display: flex; flex-wrap: wrap; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note02 .processed .head .txt{ width: 100%; order: 2; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note02 .processed .head .illust{ border-radius: 4.8vw 0 0 0; width: 100%; order: 1; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note .processed .caption02{ font-size: 2.93vw; margin-top: 1.33vw; width: 37.33vw; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note .raw{ margin-top: 2.67vw; width: 37.33vw; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note .raw .head{ border-width: 0.53vw; border-radius: 4vw; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note .raw .head .txt{ font-size: 4vw; padding: 0.53vw 0 1.33vw; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note .raw .head .illust{ padding-right: 0; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note .raw .caption{ font-size: 2.93vw; margin-top: 1.33vw; } #tiger-bottle .bottle-quality .quality03 .content .note-list .note .raw .copy{ font-size: 3.47vw; line-height: 1.31; margin-top: 1.33vw; width: 110%; } #tiger-bottle .bottle-quality .quality03 .quality-caption{ width: 81.33%; font-size: 3.73vw; line-height: 1.71; margin: 18.18% auto 0; text-align: left; } #tiger-bottle .bottle-movie{ padding: 25.94% 0 45.87%; } #tiger-bottle .bottle-movie .bg .wave-mask{ clip-path: url(#wave-sp-path01); width: 100%; height: 77.984vw; margin-top: -21.33vw; background-image: url(/contents/feature/vacuum-insulated-products/assets/img/movie-sp-bg01.webp); } #tiger-bottle .bottle-movie .bg .fill{ background-position: center -21.33vw; background-size: 100% calc(100% + 21.33vw); background-image: url(/contents/feature/vacuum-insulated-products/assets/img/movie-sp-bg01.webp); } #tiger-bottle .bottle-movie .movie-head{ padding-bottom: 14.67%; } #tiger-bottle .bottle-movie .movie-head::before{ width: 0.27%; height: 9.07vw; } #tiger-bottle .bottle-movie .movie-head .ttl{ font-size: 5.33vw; } #tiger-bottle .bottle-movie .movie-head .copy{ font-size: 12vw; margin-top: 1.6%; } #tiger-bottle .bottle-movie .movie-frame{ width: 89.07%; margin-top: 4%; } #tiger-bottle .bottle-movie .movie-frame .photo{ border-width: 1.07vw; border-radius: 2.13vw; box-shadow: 0 0 2.67vw rgba(0,0,0,0.2); } #tiger-bottle .bottle-movie .movie-frame .btn{ width: 19.94vw; margin: 40.24vw 0 0 1.07vw; } #tiger-bottle .bottle-other{ padding: 24% 0 41.26%; } #tiger-bottle .bottle-other .bg .wave-mask{ clip-path: url(#wave-sp-path01); width: 100%; height: 77.984vw; margin-top: -21.33vw; } #tiger-bottle .bottle-other .bg .deco{ display: block; left: 0; width: 84.8%; transform: rotate(225deg); } #tiger-bottle .bottle-other .bg .deco01{ margin: -18.933% 0 0 -52%; } #tiger-bottle .bottle-other .bg .deco02{ display: none; } #tiger-bottle .bottle-other .bg .deco03{ margin: 127.466% 0 0 68%; } #tiger-bottle .bottle-other .bg .deco04{ margin: 275.466% 0 0 -52%; } #tiger-bottle .bottle-other .other-head .ttl{ font-size: 5.07vw; } #tiger-bottle .bottle-other .other-head .copy{ font-size: 7.47vw; line-height: 2.21; margin-top: 2.67%; padding-bottom: 10%; position: relative; } #tiger-bottle .bottle-other .other-head .copy::before{ content: ""; position: absolute; left: 50%; bottom: 0; width: 0.27%; height: 9.07vw; background-color: #535152; } #tiger-bottle .bottle-other .other-head .copy .marker{ font-size: 160.71%; line-height: 1; display: block; } #tiger-bottle .bottle-other .other-head .txt{ font-size: 4.27vw; line-height: 1.75; margin: 2.67% auto 0; } #tiger-bottle .bottle-other .other-head .caption{ font-size: 4.27vw; margin: 4.53% auto 0; padding: 1.07% 0; border-radius: 4.53vw; width: 82.13%; } #tiger-bottle .bottle-other .other{ margin: 0 auto; padding: 0; position: relative; } #tiger-bottle .bottle-other .other01{ width: 100%; margin-top: 21.33%; } #tiger-bottle .bottle-other .other02{ width: 79.73%; margin-top: 19.61%; } #tiger-bottle .bottle-other .other::before{ display: none; } #tiger-bottle .bottle-other .other .other-body{ padding: 0; } #tiger-bottle .bottle-other .other .other-body .ttl{ font-size: 7.47vw; line-height: 1.32; } #tiger-bottle .bottle-other .other .other-body .copy{ font-size: 4.53vw; line-height: 1.47; text-align: center; margin-top: 4.53vw; } #tiger-bottle .bottle-other .other .other-body .caption{ font-size: 3.2vw; text-align: center; margin-top: 1.33vw; } #tiger-bottle .bottle-other .other .other-body .split-view .item .txt{ font-size: 4vw; margin-top: 2.67vw; } #tiger-bottle .bottle-other .other01 .other-body .ttl, #tiger-bottle .bottle-other .other01 .other-body .copy, #tiger-bottle .bottle-other .other01 .other-body .caption{ width: 84.27%; margin-left: auto; margin-right: auto; } #tiger-bottle .bottle-other .other01 .other-body .scroll-wrap{ overflow-x: scroll; } #tiger-bottle .bottle-other .other01 .other-body .split-view{ width: 173.33%; margin: 0 7.865%; } #tiger-bottle .bottle-other .other01 .other-body .split-view .item{ width: 48.61%; } #tiger-bottle .bottle-other .other01 .other-body .split-view{ margin-top: 3.73vw; } #tiger-bottle .bottle-other .other01 .other-body .split-view .item .photo{ border-width: 0.27vw; border-radius: 13.33vw; box-shadow: 0 0 1.33vw rgba(0,0,0,0.2); } #tiger-bottle .bottle-other .other01 .other-body .split-view .item .head{ width: 48vw; margin: 2.67vw auto 0; font-size: 4vw; padding: 1.6vw; border-radius: 4vw; } #tiger-bottle .bottle-other .other02 .other-body .ttl{ text-align: right; } #tiger-bottle .bottle-other .other02 .other-body .split-view{ margin-top: 5.33vw; display: block; } #tiger-bottle .bottle-other .other02 .other-body .split-view .item{ width: 100%; } #tiger-bottle .bottle-other .other02 .other-body .split-view .item:nth-child(n+2){ margin-top: 20.27vw; } #tiger-bottle .bottle-other .other02 .other-body .split-view .item:nth-child(odd) .photo{ margin-left: -12.71%; border-radius: 0 13.33vw 13.33vw 0; } #tiger-bottle .bottle-other .other02 .other-body .split-view .item:nth-child(even) .photo{ margin-right: -12.71%; border-radius: 13.33vw 0 0 13.33vw; } #tiger-bottle .bottle-other .other02 .other-body .split-view .item .head{ margin: 5.33vw auto 0; font-size: 4.53vw; } #tiger-bottle .bottle-other .other02 .other-body .split-view .item .photo-s{ position: relative; left: 0; top: 0; margin: 6.4vw 0 0 auto; width: 57.59vw; } #tiger-bottle .bottle-other .other02 .other-body .split-view .item .photo-s .logo{ width: 21.06vw; margin: -1vw 0 0 0; left: auto; right: 100%; transform: none; } #tiger-bottle .bottle-about{ padding: 101.33% 0 0; } #tiger-bottle .bottle-about .bg{ padding-bottom: 21.33vw; } #tiger-bottle .bottle-about .bg .wave-mask{ clip-path: url(#wave-sp-path01); width: 100%; height: 77.984vw; margin-top: -21.33vw; background-image: url(/contents/feature/vacuum-insulated-products/assets/img/about-sp-bg01.webp); } #tiger-bottle .bottle-about .bg .fill{ background-position: center -21.33vw; background-size: 100% auto; background-image: url(/contents/feature/vacuum-insulated-products/assets/img/about-sp-bg01.webp); } #tiger-bottle .bottle-about .bg .photo{ border-radius: 1.333vw; left: 0; right: auto; } #tiger-bottle .bottle-about .bg .photo01{ width: 53.6%; margin: 3.890% 0 0 0; } #tiger-bottle .bottle-about .bg .photo01 img{ width: 122%; margin-left: -22%; } #tiger-bottle .bottle-about .bg .photo02{ width: 32%; margin: 21.333% 0 0 60.8%; } #tiger-bottle .bottle-about .bg .photo03{ width: 28.799%; margin: 57.866% 0 0 15.466%; } #tiger-bottle .bottle-about .bg .photo04{ width: 46.400%; margin: 72.293% 0 0 54.933%; } #tiger-bottle .bottle-about .base-body{ padding: 0; margin: 0; } #tiger-bottle .bottle-about .about-intro .ttl{ font-size: 8.53vw; line-height: 1.63; text-shadow: 0 0 3.47vw rgba(221,98,14,1); } #tiger-bottle .bottle-about .about-intro .ttl .marker{ font-size: 130%; } #tiger-bottle .bottle-about .about-intro .txt{ font-size: 4vw; line-height: 2.53; margin-top: 3.74vw; } #tiger-bottle .bottle-about .about-intro .txt .line{ padding: 0.53vw 1.33vw; } #tiger-bottle .bottle-about .search-body{ padding: 18.67% 6% 0; margin: 16% auto 0; border-radius: 0; box-shadow: none; } #tiger-bottle .bottle-about .search-body .search-ttl{ font-size: 9.33vw; } #tiger-bottle .bottle-about .search-body .search-ttl .icon{ width: 9.07vw; } #tiger-bottle .bottle-about .search-body .category-navi{ width: 84.53vw; margin: 8vw auto 4.8vw; } #tiger-bottle .bottle-about .search-body .category-navi .navi{ width: 48.9%; border-width: 0.27vw; padding: 2.67vw 0; border-radius: 7.2vw; font-size: 4.27vw; } #tiger-bottle .bottle-about .search-body .scroll-wrap{ margin: 0 -6%; padding: 2% 6%; overflow-x: scroll; } #tiger-bottle .bottle-about .search-body .navi-switch .navi{ width: 20vw; height: 24vw; border-radius: 1.33vw; box-shadow: 0 0 1.07vw rgba(54,60,69,0.3); } #tiger-bottle .bottle-about .search-body .navi-switch .navi .txt{ font-size: 2.93vw; } #tiger-bottle .bottle-about .search-body .navi-switch .navi.scene-all .txt, #tiger-bottle .bottle-about .search-body .navi-switch .navi.feature-all .txt{ font-size: 4.8vw; } #tiger-bottle .bottle-about .search-body .navi-switch .navi .icon-body .icon{ padding-top: 9.88vw; } #tiger-bottle .bottle-about .search-body .navi-switch .navi:active{ background-color: #6daad4; } #tiger-bottle .bottle-about .search-body .navi-switch .navi:active .icon-body .icon svg{ fill: #ffffff; } #tiger-bottle .bottle-about .search-body .navi-switch .navi:active .txt{ color: #ffffff; } #tiger-bottle .bottle-about .search-body .navi{ width: 0; } #tiger-bottle .bottle-about .search-body .feature-navi.active{ width: 214.67vw; } #tiger-bottle .bottle-about .search-body .feature-navi .navi .icon-body .icon{ width: 10.67vw; } #tiger-bottle .bottle-about .search-body .scene-navi.active{ width: 149.78vw; } #tiger-bottle .bottle-about .search-body .scene-navi .navi .icon-body .icon{ width: 12.64vw; } #tiger-bottle .bottle-about .search-body .search-list{ width: 100%; margin: 8vw auto 0; display: block; } #tiger-bottle .bottle-about .search-body .search-list .item{ width: 100%; border-radius: 5.333vw; box-shadow: 0 0 2.666vw rgba(54,60,69,0.4); } #tiger-bottle .bottle-about .search-body .search-list .item.active:nth-child(n){ margin: 0; } #tiger-bottle .bottle-about .search-body .search-list .item .item-inner{ padding: 2.133vw 2.133vw 3.733vw 2.133vw; } #tiger-bottle .bottle-about .search-body .search-list .item .photo{ border-radius: 4.266vw 4.266vw 0 0; } #tiger-bottle .bottle-about .search-body .search-list .item .size-list{ padding: 0 1.866vw; margin-top: 1.866vw; } #tiger-bottle .bottle-about .search-body .search-list .item .size-list .txt{ font-size: 3.466vw; padding: 0.266vw 1.866vw; border-width: 0.266vw; border-radius: 2.666vw; } #tiger-bottle .bottle-about .search-body .search-list .item .size-list .txt:nth-child(n+2){ margin-left: 1.333vw; } #tiger-bottle .bottle-about .search-body .search-list .item .size-list .txt .slim{ font-size: 2.666vw; } #tiger-bottle .bottle-about .search-body .search-list .item .copy{ font-size: 5.600vw; padding: 0 1.866vw; margin-top: 1.866vw; height: auto!important; } #tiger-bottle .bottle-about .search-body .search-list .item .name{ font-size: 3.2vw; padding: 0 1.866vw; margin-top: 1.866vw; } #tiger-bottle .bottle-about .search-body .search-list .item .feature-list{ padding: 0 1.866vw; margin-top: 1.866vw; } #tiger-bottle .bottle-about .search-body .search-list .item .feature-list .txt{ width: 16vw; height: 10.666vw; border-radius: 1.6vw; } #tiger-bottle .bottle-about .search-body .search-list .item .feature-list .txt:nth-child(n+2){ margin-left: 1.866vw; } #tiger-bottle .bottle-about .search-body .search-list .item .feature-list .txt .word{ font-size: 3.2vw; } #tiger-bottle .bottle-about .search-body .search-list .item .caption{ font-size: 3.2vw; padding: 0 1.866vw; margin-top: 1.866vw; } #tiger-bottle .bottle-about .search-body .search-list .item .btn{ width: 11.733vw; height: 11.733vw; margin: 0 0.8vw 0.8vw 0; border-radius: 4.266vw; } #tiger-bottle .bottle-about .search-body .search-list .item .btn::before{ width: 2.4vw; height: 2.4vw; border-width: 0.266vw 0.266vw 0 0; } #tiger-bottle .bottle-about .search-body .add-btn{ margin: 8vw auto 0; padding: 0; width: 66.66vw; } #tiger-bottle .bottle-about .search-body .add-btn a{ font-size: 4.8vw; border-width: 0.53vw; padding: 3vw 0; border-radius: 7vw; box-shadow: 0 0 2.66vw rgba(141,128,111,0.4); } #tiger-bottle .bottle-about .search-body .add-btn a::before{ width: 6.133vw; height: 0.266vw; } #tiger-bottle .bottle-about .search-body .add-btn a::after{ width: 0.266vw; height: 6.133vw; } #tiger-bottle .bottle-about .search-body .search-list .item.active:nth-child(n){ margin-top: 0; } #tiger-bottle .bottle-about .search-body .search-list .item.show:nth-child(n+2){ margin-top: 8vw; } #tiger-bottle .bottle-about .about-caption{ font-size: 3.73vw; line-height: 1.71; margin-top: 0; padding: 5.33vw 7.33vw 38.93vw; background-color: rgba(255,255,255,0.85); margin-top: -1px; } #tiger-bottle .bottle-end{ padding: 25.33% 0 40%; } #tiger-bottle .bottle-end .bg{ filter: drop-shadow(0 0 4vw rgba(54,60,69,0.2)); } #tiger-bottle .bottle-end .bg .wave-mask{ clip-path: url(#wave-sp-path01); width: 100%; height: 77.984vw; margin-top: -21.33vw; } #tiger-bottle .bottle-end .bg .deco{ left: 0; display: none; } #tiger-bottle .bottle-end .topics .head, #tiger-bottle .bottle-end .column .head{ padding-bottom: 14.67%; } #tiger-bottle .bottle-end .topics .head::before, #tiger-bottle .bottle-end .column .head::before{ width: 0.27%; height: 9.07vw; } #tiger-bottle .bottle-end .topics .head .ttl, #tiger-bottle .bottle-end .column .head .ttl{ font-size: 5.33vw; } #tiger-bottle .bottle-end .topics .head .copy, #tiger-bottle .bottle-end .column .head .copy{ font-size: 12vw; margin-top: 1.6%; } #tiger-bottle .bottle-end .column .head{ margin-top: 24.8%; } #tiger-bottle .bottle-end .topics .slide-list{ width: auto; margin: 6.4% 0 0 -20%; padding: 0 0 19.47%; position: relative; } #tiger-bottle .bottle-end .topics .slide-list .list-item{ position: static; } #tiger-bottle .bottle-end .topics .slide-list .list-item .slick-arrow{ position: absolute; left: 0; right: auto; top: auto; bottom: 0; width: 13.33vw; height: 13.33vw; background-color: #f59349; border-radius: 5.33vw; margin: 0 0 0 21%; border: 0.53vw solid #ffffff; cursor: pointer; transform: none; } #tiger-bottle .bottle-end .topics .slide-list .list-item .next-arrow{ margin-left: 34%; } #tiger-bottle .bottle-end .topics .slide-list .list-item .slick-arrow::before{ content: ""; position: absolute; left: 50%; top: 50%; width: 2.93vw; height: 2.93vw; border: solid #ffffff; } #tiger-bottle .bottle-end .topics .slide-list .list-item .next-arrow::before{ border-width: 0.27vw 0.27vw 0 0; transform: translateX(-25%) translate(-50%,-50%) rotate(45deg); } #tiger-bottle .bottle-end .topics .slide-list .list-item .prev-arrow::before{ border-width: 0 0 0.27vw 0.27vw; transform: translateX(25%) translate(-50%,-50%) rotate(45deg); } #tiger-bottle .bottle-end .topics .slide-list .list-item .item .inner{ margin: 0 4.07%; } #tiger-bottle .bottle-end .topics .slide-list .list-item .item .photo{ border-radius: 4vw; box-shadow: 0 0 2.67vw rgba(0,0,0,0.3); } #tiger-bottle .bottle-end .topics .slide-list .list-item .item .txt{ margin-top: 2.67%; font-size: 7.47vw; line-height: 1.35; } #tiger-bottle .bottle-end .topics .slide-list .list-item .item .txt .sub{ font-size: 64.29%; } #tiger-bottle .bottle-end .column .list-item{ width: 86.67%; margin: 12.53% auto 0; padding: 0; background-color: transparent; border-radius: none; } #tiger-bottle .bottle-end .column .list-item .item{ width: 100%; padding: 0; } #tiger-bottle .bottle-end .column .list-item .item:nth-child(n+2){ margin-top: 13.33vw; } #tiger-bottle .bottle-end .column .list-item .item:nth-child(n+2)::before{ margin-top: -6.67vw; } #tiger-bottle .bottle-end .column .list-item .item .split-view .photo{ width: 31.73vw; border-radius: 5.33vw; margin-right: 2.67vw; } #tiger-bottle .bottle-end .column .list-item .item .split-view .txt-body{ padding-right: 0; } #tiger-bottle .bottle-end .column .list-item .item .split-view .txt-body .category .word{ font-size: 3.2vw; padding: 0 4.27vw; border-radius: 2.67vw; } #tiger-bottle .bottle-end .column .list-item .item .split-view .txt-body .txt{ font-size: 3.73vw; line-height: 1.29; margin-top: 2.67vw; } #tiger-bottle .bottle-end .column .list-item .item .icon{ display: none; } #tiger-bottle .bottle-end .column .navi{ margin: 15.93% auto 0; padding: 0; width: 66.66%; } #tiger-bottle .bottle-end .column .navi a{ font-size: 4.8vw; border-width: 0.53vw; padding: 3vw 0; border-radius: 7vw; box-shadow: 0 0 2.66vw rgba(141,128,111,0.4); } } #tiger-bottle .modal-movie{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: -1; transition: 0.5s; } #tiger-bottle .modal-movie.is-open{ opacity: 1; z-index: 1031; transition: 0.5s; } #tiger-bottle .modal-movie .bg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #000000; opacity: 0.8; transition: 0.3s; } #tiger-bottle .modal-movie .inner{ position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 640px; } #tiger-bottle .modal-movie .inner .close-btn{ position: absolute; bottom: 100%; right: 0; transition: 0.5s; font-size: 40px; color: #fff; cursor: pointer; background-color: rgba(0,0,0,0); } #tiger-bottle .modal-movie .inner .player-body{ width: 100%; padding-top: 56.25%; position: relative; } #tiger-bottle .modal-movie .inner .player-body iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media (max-width: 750px){ #tiger-bottle .modal-movie .inner{ width: 90%; } } /*animation*/ #tiger-bottle .bottle-movie .movie-frame .btn a{ display: block; transition: 0.3s; } #tiger-bottle .bottle-movie .movie-frame .overlay:hover~.btn a, #tiger-bottle .bottle-movie .movie-frame .btn a:hover{ transform: scale(1.05); } #tiger-bottle .bottle-about .search-body .search-list .item .btn{ transition: 0.3s; } #tiger-bottle .bottle-about .search-body .search-list .item .overlay:hover~.btn{ transform: scale(1.05); } #tiger-bottle .hero .intro .navi a, #tiger-bottle .bottle-about .search-body .add-btn a, #tiger-bottle .bottle-end .column .navi a{ display: block; transition: 0.3s; } #tiger-bottle .hero .intro .navi a:hover, #tiger-bottle .bottle-about .search-body .add-btn a:hover, #tiger-bottle .bottle-end .column .navi a:hover{ transform: scale(1.05); } #tiger-bottle .bottle-end .topics .slide-list .list-item .item .inner .photo img{ transition: 0.5s; } #tiger-bottle .bottle-end .topics .slide-list .list-item .item .inner .overlay:hover~.photo img{ transform: scale(1.05); } #tiger-bottle .bottle-end .column .list-item .item .icon{ transition: 0.3s; } #tiger-bottle .bottle-end .column .list-item .item .overlay:hover~.icon{ transform: translateY(-50%) scale(1.05); } @media (max-width: 750px){ #tiger-bottle .bottle-movie .movie-frame .overlay:hover~.btn a, #tiger-bottle .bottle-movie .movie-frame .btn a:hover{ transform: scale(1); } #tiger-bottle .bottle-movie .movie-frame .overlay:active~.btn a, #tiger-bottle .bottle-movie .movie-frame .btn a:active{ transform: scale(1.05); } #tiger-bottle .bottle-about .search-body .search-list .item .overlay:hover~.btn{ transform: scale(1); } #tiger-bottle .bottle-about .search-body .search-list .item .overlay:active~.btn{ transform: scale(1.05); } #tiger-bottle .hero .intro .navi a:hover, #tiger-bottle .bottle-about .search-body .add-btn a:hover, #tiger-bottle .bottle-end .column .navi a:hover{ transform: scale(1); } #tiger-bottle .hero .intro .navi a:active, #tiger-bottle .bottle-about .search-body .add-btn a:active, #tiger-bottle .bottle-end .column .navi a:active{ transform: scale(1.05); } #tiger-bottle .bottle-end .topics .slide-list .list-item .item .inner .overlay:hover~.photo img{ transform: scale(1); } #tiger-bottle .bottle-end .topics .slide-list .list-item .item .inner .overlay:active~.photo img{ transform: scale(1.05); } /*#tiger-bottle .bottle-end .column .list-item .item .overlay:hover~.icon{ transform: translateY(-50%) scale(1); } #tiger-bottle .bottle-end .column .list-item .item .overlay:active~.icon{ transform: translateY(-50%) scale(1.05); }*/ } /*eng*/ body.lang-en #tiger-bottle .hero .intro .navi{ width: 500px; } body.lang-en #tiger-bottle .bottle-quality .quality .intro .head{ font-size: 46px; } body.lang-en #tiger-bottle .bottle-quality .quality01 .content .note01{ width: 414px; } body.lang-en #tiger-bottle .bottle-quality .quality01 .content .note .txt-body .bubble{ font-size: 16px; padding: 0 20px; } body.lang-en #tiger-bottle .bottle-quality .quality02 .content{ height: 825px; } body.lang-en #tiger-bottle .bottle-quality .quality02 .content .photo{ margin-top: 80px; } body.lang-en #tiger-bottle .bottle-quality .quality02 .content .info{ margin-top: 144px; } body.lang-en #tiger-bottle .bottle-quality .quality02 .content .note{ margin-top: 387px; } body.lang-en #tiger-bottle .bottle-quality .quality02 .content .note .txt-body{ white-space: normal; width: 250%; } body.lang-en #tiger-bottle .bottle-quality .quality02 .content .note .illust-body .caption{ transform: translateX(-20%); } body.lang-en #tiger-bottle .bottle-quality .quality .intro .txt{ padding-left: 5%; padding-right: 5%; } body.lang-en #tiger-bottle .bottle-quality .quality03 .content .info{ padding-left: 5%; padding-right: 5%; } body.lang-en #tiger-bottle .bottle-quality .quality03 .content .photo{ margin-top: 200px; } body.lang-en #tiger-bottle .bottle-quality .quality03 .content .note-list .note .processed .head .bubble{ display: block; } body.lang-en #tiger-bottle .bottle-quality .quality03 .content .note-list .note .processed .head .bubble .word{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scaleX(0.85); } body.lang-en #tiger-bottle .bottle-quality .quality03 .content .note-list .note .processed .copy{ white-space: normal; width: 260px; } body.lang-en #tiger-bottle .bottle-quality .quality03 .content .note-list .note01 .processed .copy{ margin-left: -90px; } body.lang-en #tiger-bottle .bottle-quality .quality03 .content .note-list .note01 .processed .caption{ margin-top: 640px; } body.lang-en #tiger-bottle .bottle-other .other01 .other-body .split-view .item .head{ width: 100%; } body.lang-en #tiger-bottle .bottle-about .search-body .category-navi{ width: 55%; } body.lang-en #tiger-bottle .bottle-about .search-body .category-navi .navi{ border-radius: 30px; } body.lang-en #tiger-bottle .bottle-about .search-body .category-navi .navi-feature{ padding: 19px 0; } body.lang-en #tiger-bottle .bottle-about .search-body .navi-switch .navi{ height: 138px; } body.lang-en #tiger-bottle .bottle-about .search-body .navi-switch .navi .txt{ font-size: 12px; } body.lang-en #tiger-bottle .bottle-about .search-body .search-list .item .feature-list{ flex-wrap: wrap; } body.lang-en #tiger-bottle .bottle-about .search-body .search-list .item .feature-list .txt{ width: 126px; } body.lang-en #tiger-bottle .bottle-about .search-body .search-list .item .feature-list .txt:nth-child(n){ margin-left: 0; } body.lang-en #tiger-bottle .bottle-about .search-body .search-list .item .feature-list .txt:nth-child(2n+2){ margin-left: 7px; } body.lang-en #tiger-bottle .bottle-about .search-body .search-list .item .feature-list .txt:nth-child(n+3){ margin-top: 7px; } body.lang-en #tiger-bottle .bottle-about .search-body .search-list .item .feature-list .txt .word{ font-size: 10px; } body.lang-en #tiger-bottle .bottle-about .search-body .search-list .item .caption{ margin-right: 10%; } @media (max-width: 1180px) { body.lang-en #tiger-bottle .bottle-about .bg .photo01{ width: 26%; } body.lang-en #tiger-bottle .bottle-about .bg .photo03{ margin-left: 12%; } body.lang-en #tiger-bottle .bottle-about .search-body .category-navi .navi{ border-radius: 2.54vw; } body.lang-en #tiger-bottle .bottle-about .search-body .category-navi .navi-feature{ padding: 1.61vw 0; } body.lang-en #tiger-bottle .bottle-about .search-body .navi-switch .navi{ height: 11.69vw; } body.lang-en #tiger-bottle .bottle-about .search-body .navi-switch .navi .txt{ font-size: 1.01vw; } body.lang-en #tiger-bottle .bottle-about .search-body .search-list .item .feature-list .txt{ width: 10.67vw; } body.lang-en #tiger-bottle .bottle-about .search-body .search-list .item .feature-list .txt:nth-child(n){ margin-left: 0; } body.lang-en #tiger-bottle .bottle-about .search-body .search-list .item .feature-list .txt:nth-child(2n+2){ margin-left: 0.59vw; } body.lang-en #tiger-bottle .bottle-about .search-body .search-list .item .feature-list .txt:nth-child(n+3){ margin-top: 0.59vw; } body.lang-en #tiger-bottle .bottle-about .search-body .search-list .item .feature-list .txt .word{ font-size: 0.84vw; } } @media (max-width: 1100px){ body.lang-en #tiger-bottle .hero .intro .navi{ width: 50%; } body.lang-en #tiger-bottle .bottle-quality .quality .intro .head{ font-size: 4.18vw; } body.lang-en #tiger-bottle .bottle-quality .quality01 .content .note01{ width: 37.6vw; } body.lang-en #tiger-bottle .bottle-quality .quality01 .content .note .txt-body .bubble{ font-size: 1.45vw; padding: 0 1.81vw; border-radius: 1.36vw; } body.lang-en #tiger-bottle .bottle-quality .quality02 .content{ height: 75vw; } body.lang-en #tiger-bottle .bottle-quality .quality02 .content .photo{ margin-top: 7.27vw; } body.lang-en #tiger-bottle .bottle-quality .quality02 .content .info{ margin-top: 13.09vw; } body.lang-en #tiger-bottle .bottle-quality .quality02 .content .note{ margin-top: 35.18vw; } body.lang-en #tiger-bottle .bottle-quality .quality03 .content .photo{ margin-top: 18.18vw; } body.lang-en #tiger-bottle .bottle-quality .quality03 .content .note-list .note .processed .copy{ width: 23.63vw; } body.lang-en #tiger-bottle .bottle-quality .quality03 .content .note-list .note01 .processed .copy{ margin-left: -8.18vw; } body.lang-en #tiger-bottle .bottle-quality .quality03 .content .note-list .note01 .processed .caption{ margin-top: 58.18vw; } } @media (max-width: 750px){ body.lang-en #tiger-bottle .hero .intro .navi{ width: 90%; } body.lang-en #tiger-bottle .hero .intro .navi a::before{ margin-right: 7%; } body.lang-en #tiger-bottle .bottle-quality .quality .intro .head{ font-size: 7vw; } body.lang-en #tiger-bottle .bottle-quality .quality .intro .txt{ padding-left: 0; padding-right: 0; } body.lang-en #tiger-bottle .bottle-quality .quality01 .content{ height: 234.53vw; } body.lang-en #tiger-bottle .bottle-quality .quality01 .content .photo{ margin-top: 26.53%; } body.lang-en #tiger-bottle .bottle-quality .quality01 .content .info .copy .word+.word{ display: inline-block; } body.lang-en #tiger-bottle .bottle-quality .quality01 .content .note{ position: absolute; } body.lang-en #tiger-bottle .bottle-quality .quality01 .content .note01{ width: 43.47%; margin-top: 105%; } body.lang-en #tiger-bottle .bottle-quality .quality01 .content .note02{ margin-top: 179%; } body.lang-en #tiger-bottle .bottle-quality .quality01 .content .note .txt-body .bubble{ font-size: 3.5vw; padding: 0 3vw; border-radius: 3.07vw; } body.lang-en #tiger-bottle .bottle-quality .quality01 .content .note .txt-body .copy{ font-size: 3.8vw; } body.lang-en #tiger-bottle .bottle-quality .quality01 .content .note01 .illust-body .illust::before{ width: 57.91%;} body.lang-en #tiger-bottle .bottle-quality .quality01 .content .note01 .illust-body .illust::after{ margin-left: 49.16%; } body.lang-en #tiger-bottle .bottle-quality .quality01 .content .note02 .illust-body .illust::before{ width: 47.14%; padding-top: 38.02%; } body.lang-en #tiger-bottle .bottle-quality .quality01 .content .note02 .illust-body .illust::after{ margin: -38.02% 0 0 calc(40.39% - 0.4vw); } body.lang-en #tiger-bottle .bottle-quality .quality02 .content{ height: auto; margin-top: 14.93%; } body.lang-en #tiger-bottle .bottle-quality .quality02 .content .photo{ margin-top: -11.18%; } body.lang-en #tiger-bottle .bottle-quality .quality02 .content .info{ margin-top: 0; } body.lang-en #tiger-bottle .bottle-quality .quality02 .content .note{ margin-top: 45.82%; } body.lang-en #tiger-bottle .bottle-quality .quality02 .content .note .illust-body .caption{ transform: translate(-30%,50%); } body.lang-en #tiger-bottle .bottle-quality .quality02 .content .note .txt-body{ width: 150%; } body.lang-en #tiger-bottle .bottle-quality .quality02 .content .note .txt-body .copy{ font-size: 3.1vw; } body.lang-en #tiger-bottle .bottle-quality .quality03 .bg .deco01{ margin-top: 382.97%; } body.lang-en #tiger-bottle .bottle-quality .quality03 .bg .deco02{ margin-top: 406.58%; } body.lang-en #tiger-bottle .bottle-quality .quality03 .content .photo{ margin-top: 82.18vw; } body.lang-en #tiger-bottle .bottle-quality .quality03 .content .note-list .note02{ margin-top: 85%; } body.lang-en #tiger-bottle .bottle-quality .quality03 .content .note-list .note .processed .copy{ width: 44.06vw; } body.lang-en #tiger-bottle .bottle-quality .quality03 .content .note-list .note01 .processed .copy{ margin-left: 0; } body.lang-en #tiger-bottle .bottle-quality .quality03 .content .note-list .note01 .processed .caption{ margin-top: 0; } body.lang-en #tiger-bottle .bottle-about .bg .photo01{ width: 53.6%; } body.lang-en #tiger-bottle .bottle-about .bg .photo03{ margin-left: 15.466%; } body.lang-en #tiger-bottle .bottle-about .about-intro .ttl{ font-size: 6.53vw; } body.lang-en #tiger-bottle .bottle-about .about-intro .txt{ font-size: 3.2vw; } body.lang-en #tiger-bottle .bottle-about .search-body .search-ttl{ font-size: 8.33vw;} body.lang-en #tiger-bottle .bottle-about .search-body .category-navi { width: 84.53vw; } body.lang-en #tiger-bottle .bottle-about .search-body .category-navi .navi-feature{ padding: 7.61vw 0; } body.lang-en #tiger-bottle .bottle-about .search-body .navi-switch .navi{ height: 29vw; } body.lang-en #tiger-bottle .bottle-about .search-body .navi-switch .navi .txt{ font-size: 2.5vw; } body.lang-en #tiger-bottle .bottle-about .search-body .search-list .item .feature-list .txt{ width: 33vw; } body.lang-en #tiger-bottle .bottle-about .search-body .search-list .item .feature-list .txt:nth-child(n){ margin-left: 0; } body.lang-en #tiger-bottle .bottle-about .search-body .search-list .item .feature-list .txt:nth-child(2n+2){ margin-left: 1vw; } body.lang-en #tiger-bottle .bottle-about .search-body .search-list .item .feature-list .txt:nth-child(n+3){ margin-top: 1vw; } body.lang-en #tiger-bottle .bottle-about .search-body .search-list .item .feature-list .txt .word{ font-size: 2.2vw; } } /*ja・eng切替*/ body.lang-ja .is-jp{ display: block; } body.lang-en .is-jp{ display: none; } body.lang-ja .is-en{ display: none; } body.lang-en .is-en{ display: block; } /* 12/17 変更 */ #tiger-bottle .hero.ext01 .visual .navi-list{ position: absolute; right: 0; top: 0; margin: 68.7674% 4.6511% 0 0; display: flex; display: -ms-flex; justify-content: space-between; align-items: center; } #tiger-bottle .hero.ext01 .visual .navi-list .navi{ position: relative; } #tiger-bottle .hero.ext01 .visual .navi-list .navi:nth-child(n+2){ margin-left: 30px; } #tiger-bottle .hero.ext01 .visual .navi-list .navi a{ font-size: 16px; line-height: 1.5; color: #717071; padding-bottom: 22px; position: relative; display: block; text-decoration: underline; } #tiger-bottle .hero.ext01 .visual .navi-list .navi a .arrow{ position: absolute; left: 50%; bottom: 0; width: 18px; height: 18px; background-color: #f59349; transform: translateX(-50%); border-radius: 50%; } #tiger-bottle .hero.ext01 .visual .navi-list .navi a .arrow::before{ content: ""; position: absolute; left: 50%; top: 50%; width: 27.7777%; height: 0; line-height: 0; padding-top: 27.7777%; border: solid #ffffff; border-width: 0 1px 1px 0; transform: translate(-50%,-50%) translateY(-25%) rotate(45deg); box-sizing: content-box; } #tiger-bottle .hero.ext01 .visual .bnr{ width: 32.5581%; position: absolute; left: 0; top: 0; margin: 63.8139% 0 0 3.5348%; } #tiger-bottle .hero.ext01 .visual .bnr .overlay{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0); z-index: 10; } #tiger-bottle .hero.ext01 .visual .bnr .icon{ position: absolute; left: 0; top: 0; width: 13.4286%; transform: translate(-50%,-50%); } #tiger-bottle .hero.ext01 .visual .bnr .bnr-body{ padding-top: 29.1429%; background-color: #f5a669; border-radius: 10px; box-shadow: 0 0 5px rgba(0,0,0,0.24); } #tiger-bottle .hero.ext01 .visual .bnr .bnr-body .illust{ width: 61.1429%; position: absolute; left: 50%; top: 0; transform: translateX(-50%); line-height: 0; margin-top: 3.2857%; } #tiger-bottle .hero.ext01 .visual .bnr .bnr-body .txt{ font-size: 16px; line-height: 1.25; color: #ffffff; width: 100%; position: absolute; left: 0; top: 0; text-align: center; margin-top: 13.7142%; } #tiger-bottle .hero.ext01 .visual .bnr .bnr-body::before{ content: ""; position: absolute; right: 0; bottom: 0; width: 2.8571%; padding-top: 2.8571%; border: solid #ffffff; border-width: 0 1px 1px 0; transform: rotate(45deg); margin: 0 5.7143% 5% 0; } #tiger-bottle .hero.ext01 .intro{ padding-bottom: 320px; } @media (max-width: 1100px){ #tiger-bottle .hero.ext01 .visual .navi-list .navi:nth-child(n+2){ margin-left: 2.7272vw; } #tiger-bottle .hero.ext01 .visual .navi-list .navi a{ font-size: 1.4545vw; padding-bottom: 2vw; } #tiger-bottle .hero.ext01 .visual .navi-list .navi a .arrow{ width: 1.6363vw; height: 1.6363vw; } #tiger-bottle .hero.ext01 .visual .bnr .bnr-body{ border-radius: 0.9090vw; } #tiger-bottle .hero.ext01 .visual .bnr .bnr-body .txt{ font-size: 1.4545vw; } #tiger-bottle .hero.ext01 .intro{ padding-bottom: 29.0909%; } } @media (max-width: 750px){ #tiger-bottle .hero.ext01 .visual .navi-list{ right: auto; left: 0; width: 85.3333%; margin: 125.3333% 0 0 7.3333%; border: solid #d4d4d4; border-width: 1px 0; } #tiger-bottle .hero.ext01 .visual .navi-list .navi{ position: relative; text-align: center; margin-left: 0; } #tiger-bottle .hero.ext01 .visual .navi-list .navi:nth-child(n+2){ margin-left: 0; } #tiger-bottle .hero.ext01 .visual .navi-list .navi01{ flex: 1; } #tiger-bottle .hero.ext01 .visual .navi-list .navi02{ flex: 1; } #tiger-bottle .hero.ext01 .visual .navi-list .navi03{ flex: 1.5; } #tiger-bottle .hero.ext01 .visual .navi-list .navi a{ font-size: 3.7333vw; padding: 1.8666vw 0 6.9333vw; text-decoration: none; } #tiger-bottle .hero.ext01 .visual .navi-list .navi a .arrow{ width: 4.5333vw; height: 4.5333vw; margin-bottom: 1.6vw; } #tiger-bottle .hero.ext01 .visual .bnr{ width: 85.3333%; margin: 149.6691% 0 0 7.3333%; } #tiger-bottle .hero.ext01 .visual .bnr .icon{ width: 14.6875%; } #tiger-bottle .hero.ext01 .visual .bnr .bnr-body{ padding-top: 31.25%; border-radius: 2.6666vw; box-shadow: 0 0 1.3333vw rgba(0,0,0,0.24); } #tiger-bottle .hero.ext01 .visual .bnr .bnr-body .illust{ width: 66.9586%; } #tiger-bottle .hero.ext01 .visual .bnr .bnr-body .txt{ font-size: 4.2666vw; } #tiger-bottle .hero.ext01 .visual .bnr .bnr-body::before{ width: 3.125%; padding-top: 3.125%; margin: 0 6.875% 6.875% 0; } #tiger-bottle .hero.ext01 .wave-mask{ margin-top: -21%; background: none; } #tiger-bottle .hero.ext01 .photo01{ margin: 192.32% 0 0 71.2%; } #tiger-bottle .hero.ext01 .photo02{ margin: 227.37% 0 0 65.77%; } #tiger-bottle .hero.ext01 .photo03{ margin: 307.96000000000004% 0 0 70.67%; } #tiger-bottle .hero.ext01 .intro{ padding: 0 0 58.13%; } } #tiger-bottle .hero.ext01 .navi-list .navi a{ transition: color 0.3s; } #tiger-bottle .hero.ext01 .navi-list .navi a:hover{ color: #f59349; } #tiger-bottle .hero.ext01 .navi-list .navi a:hover::before{ border-color: #f59349; } #tiger-bottle .hero.ext01 .visual .bnr .icon{ animation: icon_animation 2s infinite ease; z-index: 5; } #tiger-bottle .hero.ext01 .visual .bnr .bnr-body{ transition: 0.3s; } #tiger-bottle .hero.ext01 .visual .bnr .overlay:hover~.bnr-body{ transform: scale(1.02); } @media (max-width: 750px){ #tiger-bottle .hero.ext01 .navi-list .navi a:hover{ color: #717071; } #tiger-bottle .hero.ext01 .navi-list .navi a:hover::before{ border-color: #717071; } #tiger-bottle .hero.ext01 .visual .bnr .overlay:hover~.bnr-body{ transform: scale(1); } #tiger-bottle .hero.ext01 .navi-list .navi a:active{ color: #f59349; } #tiger-bottle .hero.ext01 .navi-list .navi a:active::before{ border-color: #f59349; } #tiger-bottle .hero.ext01 .visual .bnr .overlay:active~.bnr-body{ transform: scale(1.02); } } @keyframes icon_animation{ 0%{ transform: translate(-50%,-50%) scale(1); } 50%{ transform: translate(-50%,-50%) scale(1.05); } 100%{ transform: translate(-50%,-50%) scale(1); } }