@charset "UTF-8";

/*
/* common設定
/* -------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 { margin-top: initial; margin-bottom: initial; font-size: initial; font-weight: initial; }

article {
    overflow: clip;
}
[data-browse-mode=S] #datasign_cmp__host::part(floating-container) {
    bottom: 160px !important;
}


._button { border-radius: 10px; background: var(--color_1); }
._button::after { content: ""; position: absolute; top: 5px; left: 5px; width: calc(100% - 10px); border-radius: 10px; background: rgba(255,255,255,.25); pointer-events: none; }
._button a { height: 100%; color: #ffffff; font-weight: bold; text-decoration: none; }
._button a div { height: 100%; }

:root {
--color_1: #e00000;
--color_2: #fcd600;
--color_3: #67c3da;
}

@media screen and (min-width: 700px), print {
._button { width: 600px; height: 80px; }
._button._short { width: 400px; }
._button::after { height: 35px; }
._button a { font-size: 2.5em; }
}

@media only screen and (max-width: 699px) {
._button { width: 75vw; height: 15vw; }
._button._short { width: 50vw; }
._button::after { height: calc(7.5vw - 5px); }
._button a { font-size: 5vw; }
}

/*
/* section_title
/* -------------------------------------------------- */

.section_title { background: url('/contents/other/mailmag/img/section_title_bg_02.png'), url('/contents/other/mailmag/img/section_title_bg_01.png') var(--color_2); background-size: contain; background-repeat: no-repeat; background-position: top center; }
.section_title_merit { width: 100%; }
.section_title_merit_title { padding: 2rem 0; border-radius: 20px 20px 0 0; background: #90c31f; }
.section_title_merit_num_title { padding: .75em 0; border-radius: 20px 20px 0 0; }
.section_title_merit_num_title span { font-family: Oswald; }
.section_title_merit_num_catch { margin-top: 2rem; }
.section_title_merit_num_anchor { padding: .5em 0; border-radius: 0 0 20px 20px; background: var(--color_1); color: #ffffff; text-decoration: none; }
.section_title_merit_num_anchor:hover { text-decoration: none; }

@media screen and (min-width: 700px), print {
.section_title { padding-bottom: 90px; }
.section_title ._button { margin-top: 60px; }
.section_title_merit_num_img { width: 120px; height: 120px; }
}

@media only screen and (max-width: 699px) {
.section_title { padding-bottom: 20vw; }
.section_title ._button { margin-top: 5vw; }
.section_title_merit_num_img { width: 30vw; height: 30vw; }
}

/*
/* section_present
/* -------------------------------------------------- */

.section_present { background: url('/contents/other/mailmag/img/section_present_bg.svg'), linear-gradient(to right, #29a6c2, #64c1d9); background-size: contain; background-repeat: no-repeat; background-position: top center; }
.section_present_header { clip-path: polygon(0% 0%, 100% 0%, 50% 100%); width: 100%; background: var(--color_2); }
.section_present .title_marker { margin: 0 auto; background: url('/contents/other/mailmag/img/ico_marker_ffffff.svg'); background-repeat: no-repeat; background-position: bottom center; }
.section_present_limited_wrapper { outline: 1px dashed var(--color_3); outline-offset: -5px; }
.section_present_limited_title { margin-bottom: .5em; background: var(--color_2); }
.section_present_limited_dates { background: var(--color_3);  }
.section_present_limited_montyly_title { --s: 1.8em; --d: .9em; --c: .9em; margin-top: -1.35em; padding: 0 calc(var(--s) + 2em) var(--d); line-height: 2; background: conic-gradient(at left  var(--s) bottom var(--d), #0000 25%,#0008 0 37.5%,#0004 0) 0 /50% 100% no-repeat, conic-gradient(at right var(--s) bottom var(--d), #0004 62.5%,#0008 0 75%,#0000 0) 100%/50% 100% no-repeat; clip-path: polygon(0 var(--d), var(--s) var(--d),var(--s) 0,calc(100% - var(--s)) 0,calc(100% - var(--s)) var(--d),100% var(--d),calc(100% - var(--c)) calc(50% + var(--d)/2),100% 100%,calc(100% - var(--s) - var(--d)) 100%,calc(100% - var(--s) - var(--d)) calc(100% - var(--d)),calc(var(--s) + var(--d)) calc(100% - var(--d)),calc(var(--s) + var(--d)) 100%,0 100%,var(--c) calc(50% + var(--d)/2)); background-color: #d72050; width: fit-content; }

@media screen and (min-width: 700px), print {
.section_present { padding-bottom: 90px; }
.section_present_header { height: 60px; }
.section_present .title_marker { margin-top: 90px; width: 750px; background-size: contain; -webkit-text-stroke: 5px #ffffff; paint-order: stroke; }
.section_present_text { width: 750px; height: auto; }
.section_present_limited_wrapper { margin-top: 60px; width: 900px; border-radius: 40px; }
.section_present_limited_dates { width: 600px;  }
.section_present_limited_montyly { margin-top: 90px; border-radius: 40px; }
}

@media only screen and (max-width: 699px) {
.section_present { padding-bottom: 60px; }
.section_present_header { margin-top: -1px; height: 40px; }
.section_present .title_marker { margin-top: 60px; width: 80vw; background-size: contain; -webkit-text-stroke: 5px #ffffff; paint-order: stroke; }
.section_present_text { width: 80vw; height: auto; }
.section_present_limited_wrapper { margin-top: 40px; width: 85vw; border-radius: 20px; }
.section_present_limited_dates { width: 60vw;  }
.section_present_limited_montyly { margin-top: 60px; border-radius: 20px; }
}

/*
/* section_sample
/* -------------------------------------------------- */

.section_sample { background: #fef7cc; }
.section_sample_header { clip-path: polygon(0% 0%, 100% 0%, 50% 100%); width: 100%; background: linear-gradient(to right, #29a6c2, #64c1d9); }
.section_sample .title_marker { margin: 0 auto; background: url('/contents/other/mailmag/img/ico_marker_fcd600.svg'); background-repeat: no-repeat; background-position: bottom center; }
.section_sample_wrapper { background: rgba(255,255,255,.5); }
.section_sample_mail { position: relative; }
.section_sample_mail::after { content: attr(data-txt); position: absolute; top: calc(50% - .5em); color: #ffffff; font-family: Oswald; font-weight: bold; text-shadow: 0 0 .11em rgba(0,0,0,.4); transform: rotate(-10deg); }

@media screen and (min-width: 700px), print {
.section_sample { padding-bottom: 90px; }
.section_sample_header { height: 60px; }
.section_sample .title_marker { margin-top: 90px; width: 750px; background-size: contain; }
.section_sample_wrapper { margin-top: 60px; border-radius: 40px; }
.section_sample_wrapper_title { padding: 3rem; border-radius: 40px 40px 0 0; }
.section_sample_mail::after { font-size: 150px; }
.section_sample_mail_01 { margin-right: 90px; }
}

@media only screen and (max-width: 699px) {
.section_sample { padding-bottom: 60px; }
.section_sample_header { margin-top: -1px; height: 40px; }
.section_sample .title_marker { margin-top: 60px; width: 80vw; background-size: contain; }
.section_sample_wrapper { margin-top: 40px; border-radius: 20px; }
.section_sample_wrapper_title { padding: 1rem; border-radius: 20px 20px 0 0; }
.section_sample_mail::after { font-size: 25vw; }
.section_sample_mail_01 { margin-right: 1em; width: 30vw; }
.section_sample_mail_02 { width: 30vw; }
}

/*
/* section_model
/* -------------------------------------------------- */

.section_model { padding-bottom: 90px; background: var(--color_2); }
.section_model_header { clip-path: polygon(0% 0%, 100% 0%, 50% 100%); width: 100%; background: #fef7cc; }
.section_model .title_marker { margin: 0 auto; background: url('/contents/other/mailmag/img/ico_marker_ffffff.svg'); background-repeat: no-repeat; background-position: bottom center; }
.section_model_wrapper_title { position: relative; border-bottom: 2px solid var(--color_2); }
.section_model_wrapper_title::after { content:""; position: absolute; left: calc(50% - 20px); bottom: -20px; width: 40px; height: 20px; clip-path: polygon(0% 0%, 100% 0%, 50% 100%); background: var(--color_2); }
.section_model_wrapper_text { background: color-mix(in srgb, var(--color_2) 25%, transparent); }
.section_model_comingsoon { font-family: Oswald; text-shadow: 0 0 8px #fcd600, 0 0 8px #fcd600, 0 0 8px #fcd600; }

@media screen and (min-width: 700px), print {
.section_model { padding-bottom: 90px; }
.section_model_header { height: 60px; }
.section_model .title_marker { margin-top: 90px; width: 750px; background-size: contain; }
.section_model_wrapper { margin-top: 60px; border-radius: 40px; }
}

@media only screen and (max-width: 699px) {
.section_model { padding-bottom: 60px; }
.section_model_header { margin-top: -1px; height: 40px; }
.section_model .title_marker { margin-top: 60px; width: 80vw; background-size: contain; }
.section_model_wrapper { margin-top: 40px; border-radius: 20px; }
}

/*
/* section_note
/* -------------------------------------------------- */

.section_note { background: #303030; }

/*
/* section_sticky
/* -------------------------------------------------- */

.section_sticky { position: sticky; bottom: 0; background: rgba(0,0,0,.5); }