@charset "UTF-8";

body {
  margin: 0;
}

/* web font */
.noto-sans-jp-regular {
    font-family: "Noto Sans JP", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.noto-sans-jp-bold {
    font-family: "Noto Sans JP", serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: bold;
}

DIV#mainBg,
DIV#contents {
  width: 100%;
  overflow-x: hidden;
}

DIV#asahi {
    /* color */
    --clr-wh: #FFF;
    --clr-bk: #222;
    --clr-bl: #004EA2;
    --clr-re: #DF2625;
    --clr-gr: #00A29A;
    --clr-yg: #89BE44;
    --clr-ye: #F39800;
    --clr-ye-back: #FBF7DF;
    --clr-re-back: #FBEDED;
    --clr-gr-back: #E2F3F2;
    --clr-bl-back: #E6F7FF;
    --clr-nt: #808080;
    --clr-bu-bl: #DFEBF6;
    --clr-bu-ye: #FFF097;
    /* font size */
    --fs84: clamp(0vw, 84 / 1440 * 100vw, 84px);
    --fs72: clamp(0vw, 72 / 1440 * 100vw, 72px);
    --fs70: clamp(0vw, 70 / 1440 * 100vw, 70px);
    --fs60: clamp(0vw, 60 / 1440 * 100vw, 60px);
    --fs56: clamp(0vw, 56 / 1440 * 100vw, 56px);
    --fs52: clamp(0vw, 52 / 1440 * 100vw, 52px);
    --fs48: clamp(0vw, 48 / 1440 * 100vw, 48px);
    --fs42: clamp(0vw, 42 / 1440 * 100vw, 42px);
    --fs40: clamp(0vw, 40 / 1440 * 100vw, 40px);
    --fs36: clamp(0vw, 36 / 1440 * 100vw, 36px);
    --fs32: clamp(0vw, 32 / 1440 * 100vw, 32px);
    --fs31: clamp(0vw, 31 / 1440 * 100vw, 31px);
    --fs30: clamp(0vw, 30 / 1440 * 100vw, 30px);
    --fs28: clamp(0vw, 28 / 1440 * 100vw, 28px);
    --fs26: clamp(0vw, 26 / 1440 * 100vw, 26px);
    --fs24: clamp(0vw, 24 / 1440 * 100vw, 24px);
    --fs22: clamp(0vw, 22.5 / 1440 * 100vw, 22.5px);
    --fs22: clamp(0vw, 22 / 1440 * 100vw, 22px);
    --fs21: clamp(0vw, 21 / 1440 * 100vw, 21px);
    --fs20: clamp(0vw, 20 / 1440 * 100vw, 20px);
    --fs18: clamp(0vw, 18 / 1440 * 100vw, 18px);
    --fs16: clamp(0vw, 16 / 1440 * 100vw, 16px);
    --fs15: clamp(0vw, 15 / 1440 * 100vw, 15px);
    --fs14: clamp(0vw, 14 / 1440 * 100vw, 14px);
    --fs13: clamp(0vw, 13 / 1440 * 100vw, 13px);
    --fs12: clamp(0vw, 12 / 1440 * 100vw, 12px);
    --fs10: clamp(0vw, 10 / 1440 * 100vw, 10px);
    /* block size */
    --bs: clamp(0vw, 4 / 1440 * 100vw, 4px);
    font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", sans-serif;
    font-weight: 400;
    font-style: normal;
    position: relative;
    color: var(--clr-bk);
}

DIV#asahi .sp {
    display: none;
}

DIV#asahi p {
    color: var(--clr-bk);
    margin: 0;
    font-weight: normal;
}
DIV#asahi a {
    text-decoration: none;
    color: var(--clr-bk);
}
DIV#asahi img {
    width: 100%;
    vertical-align: top;
}
.flex-box {
    display: flex;
}

/*----------------------------------------
    スマドリ文字色共通設定
----------------------------------------*/
DIV#asahi .clr-re {
    color: var(--clr-re);
}
DIV#asahi .clr-gr {
    color: var(--clr-gr);
}
DIV#asahi .clr-yg {
    color: var(--clr-yg);
}
DIV#asahi .clr-ye {
    color: var(--clr-ye);
}

/*----------------------------------------
    h1
----------------------------------------*/
DIV#contentsTitle h1 {
    width: 960px;
    margin: 0 auto;
}

/*----------------------------------------
    h2共通設定
----------------------------------------*/
DIV#asahi h2 {
    position: absolute;
    top: calc(var(--bs)* -16);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--clr-bk);
    text-align: center;
    border: none;
    margin: 0 auto;
}
DIV#asahi h2 img {
    width: calc(var(--bs)* 15);
}
DIV#asahi h2 .en {
    position: relative;
    font-size: var(--fs24);
    margin-top: calc(var(--bs)* 1.5);
}
DIV#asahi h2 .en .small {
    font-size: var(--fs18);
}
DIV#asahi h2 .en::before,
DIV#asahi h2 .en::after {
    position: absolute;
    content: "";
    top: calc(var(--bs)* 1.5);
    
    width: calc(var(--bs)* 2.55);
    height: calc(var(--bs)* 4.5);
}
DIV#asahi h2 .en::before {
    left: calc(var(--bs)* -3.25);
    background: 0 0 / calc(var(--bs)* 2.55) calc(var(--bs)* 4.5) no-repeat url(/contents/special_contents/asahi202503/img/head_text_decoration_left.svg);
}
DIV#asahi h2 .en::after {
    right: calc(var(--bs)* -3.25);
    background: 0 0 / calc(var(--bs)* 2.55) calc(var(--bs)* 4.5) no-repeat url(/contents/special_contents/asahi202503/img/head_text_decoration_right.svg);
}
DIV#asahi h2 .head-text {
    position: relative;
    font-size: var(--fs36);
    margin-top: calc(var(--bs)* 6);
    padding-bottom: calc(var(--bs)* 9);
}
DIV#asahi h2 .head-text::before {
    position: absolute;
    content: "";
    bottom: 0;
    background: center / calc(var(--bs)* 23.25) calc(var(--bs)* 2.25) no-repeat url(/contents/special_contents/asahi202503/img/head_text_decoration_bottom.svg);
    width: 100%;
    height: calc(var(--bs)* 2.25);
}
DIV#asahi h2 .head-text .small {
    font-size: var(--fs30);
    display: inline-block;
}

/*----------------------------------------
    波画像の共通設定
----------------------------------------*/
DIV#asahi .wave {
    position: relative;
}
DIV#asahi .wave::after {
    position: absolute;
    content: "";
    width: 100%;
    height: calc(var(--bs)* 18);
    bottom: 0;
}

/*----------------------------------------
    .cta
----------------------------------------*/
DIV#asahi .cta {
    margin: calc(var(--bs)* 24) 0;
}
DIV#asahi .cta a {
    position: relative;
    top: 0;
    left: 0;
    box-sizing: border-box;
    border-width: calc(var(--bs)* .5);
    border-color: var(--clr-bl);
    border-style: solid;
    border-radius: calc(var(--bs)* 18);
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--bs)* 140);
    height: calc(var(--bs)* 19.5);
    color: var(--clr-bl);
    font-size: var(--fs20);
    font-weight: bold;
    font-weight: 700;
    box-shadow: calc(var(--bs)* 1.5) calc(var(--bs)* 1.5) 0 var(--clr-bl);
    margin: 0 auto;
    transition: all .15s ease-out;
}
DIV#asahi .cta a:hover {
    top: calc(var(--bs)* 1.5);
    left: calc(var(--bs)* 1.5);
    box-shadow: calc(var(--bs)* 0) calc(var(--bs)* 0) 0 var(--clr-bl);
}
DIV#asahi .cta a::after {
    position: absolute;
    content: "";
    right: calc(var(--bs)* 6.25);;
    background: center / calc(var(--bs)* 6.5) calc(var(--bs)* 6.5) repeat-x url(/contents/special_contents/asahi202503/img/arrow_1.svg);
    width: calc(var(--bs)* 6.5);
    height: calc(var(--bs)* 6.5);
}
DIV#asahi .cta a span{
    font-size: var(--fs24);
}

/*----------------------------------------
    .kv
----------------------------------------*/
DIV#asahi .kv.wave {
    margin-top: calc(var(--bs)* 12);
}
DIV#asahi .kv.wave::before {
    position: absolute;
    content: "";
    width: 100%;
    height: calc(var(--bs)* 18);
    top: calc(var(--bs)* 60.75);
    background: center / calc(var(--bs)* 162) calc(var(--bs)* 18) repeat-x url(/contents/special_contents/asahi202503/img/wave_yellow.svg);
    z-index: -1;
}
DIV#asahi .kv.wave::after {
    background: center bottom / calc(var(--bs)* 162) calc( var(--bs)* 18) repeat-x url(/contents/special_contents/asahi202503/img/wave_white.svg);
}
DIV#asahi .kv .pr {
    position: absolute;
    content: "";
    bottom: calc(var(--bs)* 28);
    left: 50%;
    transform: translateX(-50%) !important;
    width: calc(var(--bs)* 200);
    text-align: right;
    font-size: var(--fs12);
}
DIV#asahi .kv .pr span {
    display: inline-block;
    border-radius: calc(var(--bs)* .5);
    background: var(--clr-bk);
    color: var(--clr-wh);
    margin-right: calc(var(--bs)* 2);
    padding: calc(var(--bs)* .5) calc(var(--bs)* 2.5);
}
DIV#asahi .kv .kv-image {
    position: relative;
    width: calc(var(--bs)* 199.5);
    height: calc(var(--bs)* 90.5);
    margin: 0 auto;
}
DIV#asahi .kv .kv-image img {
    width: calc(var(--bs)* 199.5);
    height: calc(var(--bs)* 90.5);
}
DIV#asahi .kv .kv-image::before {
    position: absolute;
    content: "";
    top: calc(var(--bs)* 78.6);
    left: -50vw;
    right: -50vw;
    bottom: 0;
    z-index: -1;
    background: var(--clr-ye-back);
    width: auto;
}
DIV#asahi .kv .read-text {
    background: var(--clr-ye-back);
}
DIV#asahi .kv .read-text p {
    position: relative;
    width: calc( var(--bs)* 200);
    font-size: var(--fs18);
    line-height: 1.8;
    margin: 0 auto;
    padding-left: calc( var(--bs)* 10);
    padding-right: calc( var(--bs)* 10);
    padding-bottom: calc( var(--bs)* 36);
}
DIV#asahi .kv .read-text p::before,
DIV#asahi .kv .read-text p::after {
    position: absolute;
    content: "";
    width: calc( var(--bs)* 60);
    height: calc( var(--bs)* 60);
}
DIV#asahi .kv .read-text p::before {
    top: calc( var(--bs)* 20);
    left: calc( var(--bs)* -60);
    background: center bottom / calc(var(--bs)* 60) repeat-x url(/contents/special_contents/asahi202503/img/kv_pc_decoration_left.svg);
    -webkit-animation: 5s Roll ease-in-out infinite;
    animation: 5s Roll ease-in-out infinite
}
DIV#asahi .kv .read-text p::after {
    top: calc( var(--bs)* -8);
    right: calc( var(--bs)* -60);
    background: center bottom / calc(var(--bs)* 60) repeat-x url(/contents/special_contents/asahi202503/img/kv_pc_decoration_right.webp);
    -webkit-animation: 3.5s Roll ease-in-out infinite;
    animation: 3.5s Roll ease-in-out infinite
}

/*--------------------
    .question
--------------------*/
DIV#asahi .question {
    padding-top: calc(var(--bs)* 67.25);
    padding-bottom: calc(var(--bs)* 24);
}

/* questionの波画像の色 */
DIV#asahi .question.wave::after {
    position: absolute;
    content: "";
    background: center / calc(var(--bs)* 162) calc(var(--bs)* 18) repeat-x url(/contents/special_contents/asahi202503/img/wave_pink.svg);
}
DIV#asahi .question h2 .en {
    color: var(--clr-bl);
}
DIV#asahi .question .text-area p {
    text-align: center;
    font-size: var(--fs30);
    font-weight: bold;
    font-weight: 700;
    color: var(--clr-re);
}
DIV#asahi .question .flex-box {
    flex-direction: column;
    align-items: center;
    margin-top: calc(var(--bs)* 20);
}
DIV#asahi .question .flex-box .item {
    width: calc(var(--bs)* 139);
}
DIV#asahi .question .flex-box .flex-box.inner-1 {
    flex-direction: row;
    justify-content: center;
    gap: calc(var(--bs)* 14.5);
    margin-top: calc(var(--bs)* -18);
}
DIV#asahi .question .flex-box .flex-box.inner-1 .inner-item-1,
DIV#asahi .question .flex-box .flex-box.inner-1 .inner-item-2 {
    position: relative;
    width: calc(var(--bs)* 67.5);
    height: calc(var(--bs)* 134.25);
    box-sizing: border-box;
}
DIV#asahi .question .flex-box .flex-box.inner-1 .inner-item-2 {
    margin-top: calc(var(--bs)* 39.5);
}
DIV#asahi .question .flex-box .flex-box.inner-1 .inner-item-1::after,
DIV#asahi .question .flex-box .flex-box.inner-1 .inner-item-2::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    z-index: -1;
    width: calc(var(--bs)* 67.5);
    height: calc(var(--bs)* 67.5);
    -webkit-animation: 3.5s Roll ease-in-out infinite;
    animation: 3.5s Roll ease-in-out infinite
}
DIV#asahi .question .flex-box .flex-box.inner-1 .inner-item-1::after {
    background: center / calc(var(--bs)* 67.5) repeat-x url(/contents/special_contents/asahi202503/img/balloon_1.svg);
}
DIV#asahi .question .flex-box .flex-box.inner-1 .inner-item-2::after {
    background: center / calc(var(--bs)* 67.5) repeat-x url(/contents/special_contents/asahi202503/img/balloon_2.svg);
}

/*--------------------
    .research 共通設定
--------------------*/
DIV#asahi .research-slider {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--bs)* 20);
    width: calc(var(--bs)* 210);
    margin: 0 auto;
}
DIV#asahi .research-slider-item {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: calc(var(--bs)* 12);
    width: calc(var(--bs)* 95);
    height: auto;
    outline: 0;
}
DIV#asahi .research-slider-item p {
    display: flex;
    align-items: baseline;
    gap: calc(var(--bs)* 2.5);
    width: calc(var(--bs)* 95);
    font-size: var(--fs24);
    font-weight: bold;
    font-weight: 700;
    line-height: 1.4;
}
DIV#asahi .research-slider-item p span {
    display: block;
    font-size: var(--fs40);
}
DIV#asahi .research-slider-item img {
    width: calc(var(--bs)* 95);
    height: calc(var(--bs)* 95);
}
DIV#asahi .research-1 .note-wrap,
DIV#asahi .research-2 .note-wrap {
    width: calc(var(--bs)* 420);
    margin: calc(var(--bs)* 12) auto 0;
}
DIV#asahi .research-1 .note,
DIV#asahi .research-2 .note {
    text-align: center;
    font-size: var(--fs12);
}

/*--------------------
    .research-1
--------------------*/
DIV#asahi .research-1 {
    position: relative;
    padding-top: calc(var(--bs)* 64);
    padding-bottom: calc(var(--bs)* 36);
    background-color: var(--clr-re-back);
}
DIV#asahi .research-1 h2 .en {
    color: var(--clr-re);
}
DIV#asahi .research-1 h2 .en::before {
    position: absolute;
    content: "";
    left: calc(var(--bs)* -5);
    background: 0 0 / calc(var(--bs)* 2.55) calc(var(--bs)* 4.5) no-repeat url(/contents/special_contents/asahi202503/img/head_text_decoration_research01_left.svg);
}
DIV#asahi .research-1 h2 .en::after {
    position: absolute;
    content: "";
    right: calc(var(--bs)* -5);
    background: 0 0 / calc(var(--bs)* 2.55) calc(var(--bs)* 4.5) no-repeat url(/contents/special_contents/asahi202503/img/head_text_decoration_research01_right.svg);
}

/* research-1の波画像の色 */
DIV#asahi .research-1.wave::after {
    position: absolute;
    content: "";
    background: center / calc(var(--bs)* 162) calc(var(--bs)* 18) repeat-x url(/contents/special_contents/asahi202503/img/wave_green.svg);
}

/*--------------------
    .research-2
--------------------*/
DIV#asahi .research-2 {
    position: relative;
    padding-top: calc(var(--bs)* 64);
    padding-bottom: calc(var(--bs)* 36);
    background-color: var(--clr-gr-back);
}
DIV#asahi .research-2 h2 .en {
    color: var(--clr-gr);
}
DIV#asahi .research-2 h2 .en::before {
    left: calc(var(--bs)* -5);
    background: 0 0 / calc(var(--bs)* 2.55) calc(var(--bs)* 4.5) no-repeat url(/contents/special_contents/asahi202503/img/head_text_decoration_research02_left.svg);
}
DIV#asahi .research-2 h2 .en::after {
    right: calc(var(--bs)* -5);
    background: 0 0 / calc(var(--bs)* 2.55) calc(var(--bs)* 4.5) no-repeat url(/contents/special_contents/asahi202503/img/head_text_decoration_research02_right.svg);
}
DIV#asahi .research-slider-2-item p span {
    color: #00A29A;
}
/* research-2の波画像の色 */
DIV#asahi .research-2.wave::after {
    background: center / calc(var(--bs)* 162) calc(var(--bs)* 18) repeat-x url(/contents/special_contents/asahi202503/img/wave_white.svg);
}

/*--------------------
    .smart-drinking
--------------------*/
DIV#asahi .smart-drinking {
    position: relative;
    padding-top: calc(var(--bs)* 63.25);
    padding-bottom: calc(var(--bs)* 36);
}
/* smart-drinkingの波画像の色 */
DIV#asahi .smart-drinking.wave::after {
    background: center / calc(var(--bs)* 162) calc(var(--bs)* 18) repeat-x url(/contents/special_contents/asahi202503/img/wave_yellow.svg);
}
DIV#asahi .smart-drinking h2 .en {
    color: var(--clr-bl);
}
DIV#asahi .smart-drinking .head-text {
    font-size: var(--fs60);
    color: var(--clr-bl);
}
DIV#asahi .smart-drinking .text-area {
    width: calc(var(--bs)* 180);
    margin: 0 auto;
}

DIV#asahi .smart-drinking .text-area p {
    font-size: var(--fs18);
    line-height: 1.8;
    box-sizing: border-box;
    padding: 0 calc(var(--bs)* 10);
}

DIV#asahi .smart-drinking .text-area p .large {
    font-size: var(--fs22.5);
    font-weight: bold;
    font-weight: 700;
}
/* How to */
DIV#asahi .smart-drinking .how-to {
    background-color: var(--clr-bl-back);
    border-radius: calc(var(--bs)* 4);
    width: calc(var(--bs)* 180);
    margin: 0 auto;
    padding: calc(var(--bs)* 20) 0 calc(var(--bs)* 16);
}
DIV#asahi .smart-drinking .how-to h3 {
    position: relative;
    box-sizing: border-box;
    border-radius: calc(var(--bs)* 3);
    background: var(--clr-wh);
    width: calc(var(--bs)* 120);
    height: calc(var(--bs)* 20);
    color: var(--clr-bk);
    font-size: var(--fs30);
    line-height: calc(var(--bs)* 20);
    margin: 0 auto;
    padding: 0 0 0 calc(var(--bs)* 44);
}
DIV#asahi .smart-drinking .how-to h3::before {
    position: absolute;
    content: "";
    top: calc(var(--bs)* -5);
    left:  calc(var(--bs)* 17.5);
    background: center / calc(var(--bs)* 22.5) no-repeat url(/contents/special_contents/asahi202503/img/logo_smartdrinking.svg);
    width: calc(var(--bs)* 22.5);
    height: calc(var(--bs)* 22.5);
}
DIV#asahi .smart-drinking .how-to h3 span {
    font-size: var(--fs36);
}
DIV#asahi .smart-drinking .how-to .text-area p {
    text-align: center;
    font-size: var(--fs21);
    font-weight: bold;
    font-weight: 700;
    color: var(--clr-bl);
    width: calc(var(--bs)* 120);
    margin: calc(var(--bs)* 8) auto 0;
    padding: 0;
}

DIV#asahi .smart-drinking .how-to .animation-area {
    width: calc(var(--bs)* 133);
    margin:  calc(var(--bs)* 18) auto 0;
}
DIV#asahi .smart-drinking .how-to .animation-area,
DIV#asahi .smart-drinking .how-to .animation-illustration {
    position: relative;
}

/* 缶ビール */

DIV#asahi .smart-drinking .how-to .animation-area .item-area {
    position: absolute;
    content: "";
    top: calc(var(--bs)* -4);
    width: calc(var(--bs)* 37.5);
    height: calc(var(--bs)* 37.5);
    z-index: 10;
}

/* 缶ビール_左 */
DIV#asahi .smart-drinking .how-to .animation-area .item-1 {
    left: calc(var(--bs)* 11.25);
}
DIV#asahi .smart-drinking .how-to .animation-area .item-1 .m-illust-1 {
    -webkit-animation: 2.5s Roll1 linear infinite;
    animation: 2.5s Roll1 linear infinite;
}

/* 缶ビール_右 */
DIV#asahi .smart-drinking .how-to .animation-area .item-2 {
    right: calc(var(--bs)* 11.25);
}
DIV#asahi .smart-drinking .how-to .animation-area .item-2 .m-illust-2 {
    -webkit-animation: 2.5s Roll2 linear infinite;
    animation: 2.5s Roll2 linear infinite;
}


/* イラスト */

DIV#asahi .smart-drinking .how-to .animation-area .illustration {
    background-size: cover;
    background-position: center center;
}
DIV#asahi .smart-drinking .how-to .animation-area .src1 {
    width: calc(var(--bs)* 133);
    height: calc(var(--bs)* 91.75);
    background: center / cover no-repeat url(/contents/special_contents/asahi202503/img/illustration_4.webp);
}
DIV#asahi .smart-drinking .how-to .animation-area .src2 {
    width: calc(var(--bs)* 133);
    height: calc(var(--bs)* 91.75);
    background: center / cover no-repeat url(/contents/special_contents/asahi202503/img/illustration_4_2.webp);
}


DIV#asahi .smart-drinking .how-to .flex-box {
    flex-direction: row;
    justify-content: center;
    gap: calc(var(--bs)* 19);
    margin-top: calc(var(--bs)* 9);
}
DIV#asahi .smart-drinking .how-to .item-3,
DIV#asahi .smart-drinking .how-to .item-4 {
    position: relative;
    z-index: 1;
    width: calc(var(--bs)* 58.25);
    height: calc(var(--bs)* 119.25);
}
DIV#asahi .smart-drinking .how-to .item-3::after,
DIV#asahi .smart-drinking .how-to .item-4::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    z-index: -1;
    width: calc(var(--bs)* 58.25);
    height: calc(var(--bs)* 58.25);
}
DIV#asahi .smart-drinking .how-to .item-3::after {
    background: center / calc(var(--bs)* 58.25) repeat-x url(/contents/special_contents/asahi202503/img/balloon_3.svg);
    -webkit-animation: 3.5s Roll ease-in-out infinite;
    animation: 3.5s Roll ease-in-out infinite;
}
DIV#asahi .smart-drinking .how-to .item-4::after {
    background: center / calc(var(--bs)* 58.25) repeat-x url(/contents/special_contents/asahi202503/img/balloon_4.svg);
    -webkit-animation: 3.5s Roll ease-in-out infinite;
    animation: 3.5s Roll ease-in-out infinite;
}

/* 締め括り */
DIV#asahi .smart-drinking .how-to .conclusion {
    position: relative;
    background-color: var(--clr-wh);
    border-width: calc(var(--bs)* 1.5);
    border-style: solid;
    border-color: var(--clr-bl);
    border-radius: calc(var(--bs)* 5);
    margin: calc(var(--bs)* 12) calc(var(--bs)* 20) 0;
    padding: calc(var(--bs)* 16.5) 0 calc(var(--bs)* 12);
}
DIV#asahi .smart-drinking .how-to .conclusion::before {
    position: absolute;
    content: "";
    top: 0;
    left: 50%;
    transform: translatex(-50%) translateY(-50%);
    background: 0 0 / calc(var(--bs)* 15) no-repeat url(/contents/special_contents/asahi202503/img/arrow_2.svg);
    width: calc(var(--bs)* 15);
    height: calc(var(--bs)* 15);
}
DIV#asahi .smart-drinking .how-to .conclusion p {
    font-size: var(--fs24);
    font-weight: bold;
    font-weight: 700;
    line-height: 2;
    text-align: center;
}
DIV#asahi .smart-drinking .how-to .conclusion p .large {
    font-size: var(--fs36);
}

/*--------------------
    .product
--------------------*/
DIV#asahi .product {
    position: relative;
    padding-top: calc(var(--bs)* 54.75);
    padding-bottom: calc(var(--bs)* 48);
    background-color: var(--clr-ye-back);
}
/* productの波画像の色 */
DIV#asahi .product.wave::after {
    background: center / calc(var(--bs)* 162) calc(var(--bs)* 18) repeat-x url(/contents/special_contents/asahi202503/img/wave_white.svg);
}
DIV#asahi .product h2 .en {
    color: var(--clr-bl);
}
DIV#asahi .product .note {
    text-align: center;
    font-size: var(--fs12);
    margin-top: calc(var(--bs)* 6);
}


/*--------------------
    .asahi-bottom
--------------------*/
DIV#asahi .asahi-bottom {
    position: relative;
    padding-top: calc(var(--bs)* 18);
}
DIV#asahi .asahi-bottom p {
    text-align: center;
    color: var(--clr-bl);
    font-size: var(--fs24);
    font-weight: bold;
    font-weight: 700;
    line-height: 1.6;
}
DIV#asahi .asahi-bottom .logo-area {
    width: calc(var(--bs)* 89.625);
    margin: calc(var(--bs)* 8) auto 0;
}
DIV#asahi .asahi-bottom .bottom-area {
    background-color: var(--clr-bl);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: calc(var(--bs)* 29.25);
}
DIV#asahi .asahi-bottom .bottom-area img {
    width: calc(var(--bs)* 126.395);
    height: calc(var(--bs)* 14.25);
}


/*--------------------
    フローティングバナー
--------------------*/

DIV#asahi .floating {
    width: auto;
    height: auto;
    border-radius: calc(var(--bs)* 1);
    position: fixed;
    right: calc(var(--bs)* 5);
    bottom: calc(var(--bs)* 5);
    opacity: 0;
    visibility: hidden;
    transition: all .4s;
    background-color: var(--clr-bl);
    text-align: center;
    z-index: 9999;
    -webkit-box-shadow: 2px 2px 2px rgb(0 0 0 / 20%);
    box-shadow: 2px 2px 2px rgb(0 0 0 / 20%);
    padding: calc(var(--bs)* 6) calc(var(--bs)* 8) calc(var(--bs)* 8);
}
DIV#asahi .floating.is-active {
    opacity: 1;
    visibility: visible;
}
DIV#asahi .floating .head-text {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: calc(var(--bs)* 84);
    height: calc(var(--bs)* 11);
    background-color: var(--clr-wh);
    border-radius: calc(var(--bs)* 1);
    color: var(--clr-bl);
    font-size: var(--fs22);
    font-weight: bold;
    font-weight: 700;
}
DIV#asahi .floating .head-text small {
    font-size: var(--fs18);
}
DIV#asahi .floating .text {
    color: var(--clr-wh);
    font-size: var(--fs18);
    font-weight: bold;
    font-weight: 700;
    line-height: 1.6;
    margin-top: calc(var(--bs)* 4);
}
DIV#asahi .floating .text small {
    font-size: var(--fs16);
    font-weight: normal;
    font-weight: 400;
}
DIV#asahi .floating .btn {
    margin-top: calc(var(--bs)* 6);
    text-align: center;
}
DIV#asahi .floating .btn a {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--clr-wh);
    color: var(--clr-bl);
    font-size: var(--fs18);
    font-weight: bold;
    font-weight: 700;
    width: calc(var(--bs)* 40);
    height: calc(var(--bs)* 12);
    box-sizing: border-box;
    border-color: (--clr-wh);
    border-style: solid;
    border-width: calc(var(--bs)* .3);
    border-radius: calc(var(--bs)* 12);
    margin: 0 auto;
    transition: all .15s ease-in-out;
}
DIV#asahi .floating .btn a:hover {
    background-color: var(--clr-bl);
    color: var(--clr-wh);
}
DIV#asahi .floating .close-button {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(var(--bs)* 10);
    height: calc(var(--bs)* 10);
    font-size: var(--fs20);
    top: calc(var(--bs)* -12);
    right: calc(var(--bs)* 0);
    z-index: 99999;
    border-color: #ccc;
    border-style: solid;
    border-width: calc(var(--bs)* .25);
    border-radius: calc(var(--bs)* 16);
    color: var(--clr-bl);
    background-color: #fff;
    cursor: pointer;
    -webkit-box-shadow: 2px 2px 2px rgb(0 0 0 / 20%);
    box-shadow: 2px 2px 2px rgb(0 0 0 / 20%);
}
.floating.js_close {
    display: none;
}

/*--------------------
    バブルの設定
--------------------*/
DIV#asahi .bubble-wrap .circle {
    display: block;
    border-color: var(--clr-bl);
    border-width: calc(var(--bs)* 1);
    border-style: solid;
    border-radius: calc(var(--bs)* 10);
}
.m-cube {
    position: absolute;
    content: "";
    z-index: 1;
    -webkit-animation: 3.5s Roll ease-in-out infinite;
    animation: 3.5s Roll ease-in-out infinite
}
.m-cube .bubble-inner {
    display: block
}

/*.m-cube1*/
.m-cube1 .bubble-inner {
    -webkit-animation: fuwaH 12s ease-in-out infinite alternate;
    animation: fuwaH 12s ease-in-out infinite alternate
}
.m-cube1 .circle {
    width: calc(var(--bs)* 7.5);
    height: calc(var(--bs)* 7.5);
    -webkit-animation: huwaV 6s ease-in-out infinite alternate;
    animation: huwaV 6s ease-in-out infinite alternate
}
.m-cube1 .kv .circle {
    width: calc(var(--bs)* 10);
    height: calc(var(--bs)* 10);
    -webkit-animation: huwaV 6s ease-in-out infinite alternate;
    animation: huwaV 6s ease-in-out infinite alternate
}

/*.m-cube2*/
.m-cube2 .bubble-inner {
    -webkit-animation: fuwaH 7s ease-in-out infinite alternate;
    animation: fuwaH 7s ease-in-out infinite alternate
}
.m-cube2 .circle {
    width: calc(var(--bs)* 3);
    height: calc(var(--bs)* 3);
    -webkit-animation: huwaV 3s ease-in-out infinite alternate;
    animation: huwaV 3s ease-in-out infinite alternate
}
.m-cube2 .kv .circle {
    width: calc(var(--bs)* 4);
    height: calc(var(--bs)* 4);
    -webkit-animation: huwaV 3s ease-in-out infinite alternate;
    animation: huwaV 3s ease-in-out infinite alternate
}

/*.m-cube3*/
.m-cube3 .bubble-inner {
    -webkit-animation: fuwaH 7s ease-in-out infinite alternate;
    animation: fuwaH 7s ease-in-out infinite alternate
}
.m-cube3 .circle {
    width: calc(var(--bs)* 3.25);
    height: calc(var(--bs)* 3.25);
    -webkit-animation: huwaV 5s ease-in-out infinite alternate;
    animation: huwaV 5s ease-in-out infinite alternate
}
.m-cube3 .kv .circle {
    width: calc(var(--bs)* 5);
    height: calc(var(--bs)* 5);
    -webkit-animation: huwaV 5s ease-in-out infinite alternate;
    animation: huwaV 5s ease-in-out infinite alternate
}

/* .kvのバブルの位置 */
DIV#asahi .kv .bubble-wrap {
    position: absolute;
    content: "";
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(var(--bs)* 200);
}
DIV#asahi .product .bubble-wrap {
    position: absolute;
    content: "";
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(var(--bs)* 200);
}
DIV#asahi .kv .bubble-wrap-1 .bubble1 {
    top: calc(var(--bs)* 26.75);
    left: calc(var(--bs)* -16.25);
}
DIV#asahi .kv .bubble-wrap-1 .bubble2 {
    top: calc(var(--bs)* 44.75);
    left: calc(var(--bs)* -18.25);
}
DIV#asahi .kv .bubble-wrap-1 .bubble3 {
    top: calc(var(--bs)* 55.75);
    left: calc(var(--bs)* -10);
}

/* .smart-drinkingのバブルの位置 */
DIV#asahi .smart-drinking .how-to .conclusion .circle {
    border-color: var(--clr-bu-bl);
}
DIV#asahi .smart-drinking .how-to .conclusion .bubble-wrap-1 .bubble1 {
    top: calc(var(--bs)* 8);
    left: calc(var(--bs)* 13.5);
}
DIV#asahi .smart-drinking .how-to .conclusion .bubble-wrap-1 .bubble2 {
    top: calc(var(--bs)* 21.5);
    left: calc(var(--bs)* 12);
}
DIV#asahi .smart-drinking .how-to .conclusion .bubble-wrap-1 .bubble3 {
    top: calc(var(--bs)* 29.75);
    left: calc(var(--bs)* 15.375);
}
DIV#asahi .smart-drinking .how-to .conclusion .bubble-wrap-2 .bubble1 {
    bottom: calc(var(--bs)* 50.25);
    right: calc(var(--bs)* 13.5);
}
DIV#asahi .smart-drinking .how-to .conclusion .bubble-wrap-2 .bubble2 {
    bottom: calc(var(--bs)* 41.25);
    right: calc(var(--bs)* 12);
}
DIV#asahi .smart-drinking .how-to .conclusion .bubble-wrap-2 .bubble3 {
    bottom: calc(var(--bs)* 32.25);
    right: calc(var(--bs)* 15.375);
}

/* .productのバブルの位置 */
DIV#asahi .product .circle {
    border-color: var(--clr-bu-ye);
}
DIV#asahi .product .bubble-wrap-1 .bubble1 {
    top: calc(var(--bs)* 8);
    left: calc(var(--bs)* 17);
}
DIV#asahi .product .bubble-wrap-1 .bubble2 {
    top: calc(var(--bs)* 26);
    left: calc(var(--bs)* 15);
}
DIV#asahi .product .bubble-wrap-1 .bubble3 {
    top: calc(var(--bs)* 37);
    left: calc(var(--bs)* 19.5);
}
div#asahi .product .bubble-wrap-2 .bubble1 {
    top: calc(var(--bs)* 164);
    right: calc(var(--bs)* 17);
}
DIV#asahi .product .bubble-wrap-2 .bubble2 {
    top: calc(var(--bs)* 182);
    right: calc(var(--bs)* 15);
}
DIV#asahi .product .bubble-wrap-2 .bubble3 {
    top: calc(var(--bs)* 193);
    right: calc(var(--bs)* 19.5);
}


/*----------------------------------------
    アニメーション
----------------------------------------*/
@-webkit-keyframes Roll {
    0% {
      -webkit-transform: rotateZ(5deg) scale(.9);
      transform: rotateZ(5deg) scale(.9)
    }
    50% {
      -webkit-transform: rotateZ(-5deg) scale(1);
      transform: rotateZ(-5deg) scale(1)
    }
    100% {
      -webkit-transform: rotateZ(5deg) scale(.9);
      transform: rotateZ(5deg) scale(.9)
    }
}
@keyframes Roll {
    0% {
      -webkit-transform: rotateZ(5deg) scale(.9);
      transform: rotateZ(5deg) scale(.9)
    }
    50% {
      -webkit-transform: rotateZ(-5deg) scale(1);
      transform: rotateZ(-5deg) scale(1)
    }
    100% {
      -webkit-transform: rotateZ(5deg) scale(.9);
      transform: rotateZ(5deg) scale(.9)
    }
}
@-webkit-keyframes fuwaH {
    0% {
      -webkit-transform: translate3d(.3vw,0,0);
      transform: translate3d(.3vw,0,0)
    }
    50% {
      -webkit-transform: translate3d(-.3vw,0,0);
      transform: translate3d(-.3vw,0,0)
    }
    100% {
      -webkit-transform: translate3d(.3vw,0,0);
      transform: translate3d(.3vw,0,0)
    }
}
@keyframes fuwaH {
    0% {
      -webkit-transform: translate3d(.3vw,0,0);
      transform: translate3d(.3vw,0,0)
    }
    50% {
      -webkit-transform: translate3d(-.3vw,0,0);
      transform: translate3d(-.3vw,0,0)
    }
    100% {
      -webkit-transform: translate3d(.3vw,0,0);
      transform: translate3d(.3vw,0,0)
    }
}
@-webkit-keyframes huwaV {
    0% {
      -webkit-transform: translate3d(0,.3vw,0);
      transform: translate3d(0,.3vw,0)
    }
    50% {
      -webkit-transform: translate3d(0,-.3vw,0);
      transform: translate3d(0,-.3vw,0)
    }
    100% {
      -webkit-transform: translate3d(0,.3vw,0);
      transform: translate3d(0,.3vw,0)
    }
}
@keyframes huwaV {
    0% {
      -webkit-transform: translate3d(0,.3vw,0);
      transform: translate3d(0,.3vw,0)
    }
    50% {
      -webkit-transform: translate3d(0,-.3vw,0);
      transform: translate3d(0,-.3vw,0)
    }
    100% {
      -webkit-transform: translate3d(0,.3vw,0);
      transform: translate3d(0,.3vw,0)
    }
}
@-webkit-keyframes reflX {
    0% {
        transform: scale(-1, 1);
    }
    50% {
        transform: scale(1, 1);
    }
    100% {
        transform: scale(-1, 1);
    }
}
@keyframes reflX {
    0% {
        transform: scale(-1, 1);
    }
    50% {
        transform: scale(1, 1);
    }
    100% {
        transform: scale(-1, 1);
    }
}
@-webkit-@keyframes Roll1 {
    0% {
        -webkit-transform: rotateZ(-15deg) scale(1);
        transform: rotateZ(-15deg) scale(1)
      }
      50% {
        -webkit-transform: rotateZ(5deg) scale(.5);
        transform: rotateZ(5deg) scale(.5)
      }
      100% {
        -webkit-transform: rotateZ(-15deg) scale(1);
        transform: rotateZ(-15deg) scale(1)
      }
}
@keyframes Roll1 {
    0% {
        -webkit-transform: rotateZ(-15deg) scale(1);
        transform: rotateZ(-15deg) scale(1)
      }
      50% {
        -webkit-transform: rotateZ(5deg) scale(.5);
        transform: rotateZ(5deg) scale(.5)
      }
      100% {
        -webkit-transform: rotateZ(-15deg) scale(1);
        transform: rotateZ(-15deg) scale(1)
      }
}
@-webkit-@keyframes Roll2 {
    0% {
        -webkit-transform: rotateZ(-5deg) scale(.5);
        transform: rotateZ(-5deg) scale(.5)
      }
      50% {
        -webkit-transform: rotateZ(15deg) scale(1);
        transform: rotateZ(15deg) scale(1)
      }
      100% {
        -webkit-transform: rotateZ(-5deg) scale(.5);
        transform: rotateZ(-5deg) scale(.5)
      }
}
@keyframes Roll2 {
    0% {
        -webkit-transform: rotateZ(-5deg) scale(.5);
        transform: rotateZ(-5deg) scale(.5)
      }
      50% {
        -webkit-transform: rotateZ(15deg) scale(1);
        transform: rotateZ(15deg) scale(1)
      }
      100% {
        -webkit-transform: rotateZ(-5deg) scale(.5);
        transform: rotateZ(-5deg) scale(.5)
      }
}