@charset "UTF-8";

*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body,
h1,
h2,
h3,
h4,
ul,
ol,
dl,
li,
dt,
dd,
p,
div,
span,
img,
a,
table,
tr,
th,
td {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}

article,
header,
footer,
main,
aside,
figure,
figcaption,
nav,
section {
    display: block;
}

body,
input,
select,
textarea {
    font-family: Helvetica, Arial, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Hiragino Sans", "メイリオ", "Meiryo", sans-serif;
}

body {
    color: #333;
    margin: 0;
    padding: 0;
    line-height: 1;
    scroll-behavior: smooth;
    text-rendering: optimizeSpeed;
    line-break: strict;
    word-break: break-word;
    overflow-wrap: break-word;
    word-wrap: break-word;
    -webkit-font-smoothing: antialiased;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    clear: both;
}

p {
    margin: 0;
}

strong {
    font-weight: bold;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
    border: 0;
    outline: 0;
    display: block;
}

figure {
    padding: 0;
    margin: 0;
}

ol,
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

table {
    border-collapse: collapse;
}

main {
    overflow: hidden;
}

a {
    text-decoration: none;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

a img {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
}

a:hover {
    opacity: 0.8;
}

/* ============================================
   レイアウト
============================================ */
.l-header {
    max-width: 750px;
    margin: 0 auto;
}

.l-container {
    max-width: 750px;
    margin: 0 auto;
}

.l-inner {
    width: 90%;
    margin: 0 auto;
}

.p-form {
    margin-bottom: 4vw;
    margin-top: 5vw;
}

@media screen and (min-width: 751px) {
    .p-form {
        margin-bottom: 30px;
        margin-top: 40px;
    }
}

.p-form img {
    width: 100%;
}

/* ============================================
   ファーストビュー
============================================ */
.fv img {
    width: 100%;
}

/* ============================================
   オファー（CTA）
   ※ オファー画像はボタン部分が空白。支給のCTAボタン
      画像を空白部に重ねて配置し、フォームへ遷移させる。
============================================ */
.offer {
    position: relative;
}

.offer img {
    width: 100%;
}

.offer__btn {
    position: absolute;
    left: 6%;
    width: 88%;
    z-index: 2;
    display: block;
    animation: btn_animation 2s infinite;
}

.offer__btn img {
    width: 100%;
    display: block;
}

/* パターンA（新聞A／単品 特別価格1,350円） */
.offer--a .offer__btn {
    top: 66%;
}

/* パターンB（新聞B／定期初回999円） */
.offer--b .offer__btn {
    top: 63.6%;
}

/* オファー画像内の電話番号にtel:リンクを重ねる（タップで発信） */
.offer__tel {
    position: absolute;
    left: 3%;
    width: 94%;
    z-index: 2;
    display: block;
}

.offer--a .offer__tel {
    top: 89.7%;
    height: 3.1%;
}

.offer--b .offer__tel {
    top: 90.6%;
    height: 2.8%;
}

@keyframes btn_animation {
    0% { transform: translate(1%, 0); }
    5% { transform: translate(-1%, 0); }
    10% { transform: translate(1%, 0); }
    15% { transform: translate(-1%, 0); }
    20% { transform: translate(1%, 0); }
    25% { transform: translate(-1%, 0); }
    30% { transform: translate(0, 0); }
}

/* ============================================
   理由02（溶けやすさ）動画比較
============================================ */
.reason02 {
    position: relative;
}

.reason02 > picture img {
    width: 100%;
}

/* 「一目でわかる溶けやすさ！」吹き出し */
.reason02__badge {
    position: absolute;
    top: 15.5%;
    right: 2.7%;
    width: min(calc(179 * 100vw / 750), 179px);
    z-index: 2;
}

/* 造粒前（左）／イージーコラーゲン（右）の溶け方動画
   下端をラベル（造粒前／イージーコラーゲン）上端にピッタリ接地させる */
.reason02__video {
    position: absolute;
    bottom: 58.72%;
    width: min(calc(288 * 100vw / 750), 288px);
    aspect-ratio: 288 / 398;
    height: auto;
    z-index: 1;
    display: block;
}

.reason02__video--left {
    left: 9.3%;
}

.reason02__video--right {
    right: 9.3%;
}