を消さないでください。**
* - セレクタの頭が `:is(#anats#anats,.anats.anats)` になっているのは詳細度のため。
* :is() の詳細度は「引数の中で一番強いもの」になる決まりなので、当たる相手は `.anats` の
* ままで、強さだけ id 2つぶん (2,0,0) になる。CMS テンプレート側の
* `#page .entry p { font-size:15px; color:#333; margin:1em 0 }` のような規則に
* 負けて余白・文字サイズ・色を取られるのを防ぐ(実測で確認済み)。
* - 先頭の @import で Google Fonts を読み込んでいる。テンプレート側で既に
* Noto Sans JP などを読み込んでいる場合は、この 1 行を削ってかまわない。
*/
/* ------------------------------------------------------------------
font-size はすべて rem です(px はブラウザの文字サイズ設定に追従しないため)。
1rem = 10px、つまり html { font-size: 62.5%; } が前提です。
貼付け先のテンプレートがこれを敷いていない場合(根が既定の 16px になり、文字が全体に 1.6 倍で出ます)は、
次の 1 行のコメントを外してください。
html { font-size: 62.5%; }
------------------------------------------------------------------ */
/* 書体は の
で読み込みます(README「書体の読み込み」を参照)。
https://fonts.googleapis.com/css2?family=Inter:wght@400;900&family=Noto+Sans:wght@700&family=Noto+Sans+JP:wght@400;500;700;900&family=Noto+Serif+JP:wght@400;500;700&family=Oswald:wght@600&family=Roboto+Condensed:wght@400;600&display=swap */
@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
:is(#anats#anats,.anats.anats),:is(#anats#anats,.anats.anats) *,:is(#anats#anats,.anats.anats) :before,:is(#anats#anats,.anats.anats) :after,:is(#anats#anats,.anats.anats) ::backdrop {
--tw-translate-x:0;
--tw-translate-y:0;
--tw-translate-z:0;
--tw-rotate-x:initial;
--tw-rotate-y:initial;
--tw-rotate-z:initial;
--tw-skew-x:initial;
--tw-skew-y:initial;
--tw-border-style:solid;
--tw-font-weight:initial;
--tw-shadow:0 0 #0000;
--tw-shadow-color:initial;
--tw-shadow-alpha:100%;
--tw-inset-shadow:0 0 #0000;
--tw-inset-shadow-color:initial;
--tw-inset-shadow-alpha:100%;
--tw-ring-color:initial;
--tw-ring-shadow:0 0 #0000;
--tw-inset-ring-color:initial;
--tw-inset-ring-shadow:0 0 #0000;
--tw-ring-inset:initial;
--tw-ring-offset-width:0px;
--tw-ring-offset-color:#fff;
--tw-ring-offset-shadow:0 0 #0000;
--tw-outline-style:solid
}
}
:is(#anats#anats,.anats.anats) {
--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--color-white:#fff;
--font-weight-normal:400;
--font-weight-semibold:600;
--font-weight-bold:700;
--font-weight-black:900;
--default-font-family:var(--font-sans);
--default-mono-font-family:var(--font-mono);
--font-jp:"Noto Sans JP", sans-serif;
--font-roboto-condensed:"Roboto Condensed", sans-serif;
--font-oswald:"Oswald", sans-serif;
--font-inter:"Inter", sans-serif;
--font-noto-sans:"Noto Sans", "Noto Sans JP", sans-serif;
--color-main-text:#1a1a1a;
--color-sub-text:#767676;
--color-corporate:#00146e;
--color-icon-blue:#0055ad;
--color-link:#194fe8;
--color-accent-yellow:#ffea00;
--color-accent-orange:#fb5b01;
--color-divider-point:#abc9fc;
--color-divider-point-last:#c0e4ff;
--color-plan-border:#e6e6e6;
--color-plan-tag-bg:#dceafe;
--color-plan-badge-teal:#008299;
--color-plan-badge-gold:#c3a102;
--color-plan-benefit-bg:#faf8ed;
--color-plan-rule:#c4c4c4;
--text-11:1.1rem;
--text-11--line-height:1.65rem;
--text-12:1.2rem;
--text-12--line-height:1.8rem;
--text-14:1.4rem;
--text-14--line-height:2.1rem;
--text-16:1.6rem;
--text-16--line-height:2.4rem;
--text-18:1.8rem;
--text-18--line-height:2.7rem;
--text-22:2.2rem;
--text-22--line-height:3.3rem;
--text-22--letter-spacing:-.03125rem;
--text-24:2.4rem;
--text-24--line-height:2.4rem;
--text-yen:2.4rem;
--text-yen--line-height:3rem;
--text-tilde:1.8rem;
--text-tilde--line-height:2.25rem;
--text-28:2.8rem;
--text-28--line-height:4.2rem;
--text-30:3rem;
--text-30--line-height:4.5rem;
--text-38:3.8rem;
--text-38--line-height:3.8rem;
--text-40:4rem;
--text-40--line-height:4rem;
--radius-card:20px;
--radius-plan:8px;
--radius-badge:2px;
--radius-label:8px;
--radius-chip:16px;
--radius-cta:22px;
--shadow-cta:0 2px 7px 4px #00000026
}
:is(#anats#anats,.anats.anats),:is(#anats#anats,.anats.anats) *,:is(#anats#anats,.anats.anats) :after,:is(#anats#anats,.anats.anats) :before,:is(#anats#anats,.anats.anats) ::backdrop {
box-sizing:border-box;
border:0 solid;
margin:0;
padding:0
}
:is(#anats#anats,.anats.anats) ::file-selector-button {
box-sizing:border-box;
border:0 solid;
margin:0;
padding:0
}
:is(#anats#anats,.anats.anats) {
-webkit-text-size-adjust:100%;
tab-size:4;
line-height:1.5;
font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
font-feature-settings:var(--default-font-feature-settings,normal);
font-variation-settings:var(--default-font-variation-settings,normal);
-webkit-tap-highlight-color:transparent
}
:is(#anats#anats,.anats.anats) hr {
height:0;
color:inherit;
border-top-width:1px
}
:is(#anats#anats,.anats.anats) abbr:where([title]) {
-webkit-text-decoration:underline dotted;
text-decoration:underline dotted
}
:is(#anats#anats,.anats.anats) h1,:is(#anats#anats,.anats.anats) h2,:is(#anats#anats,.anats.anats) h3,:is(#anats#anats,.anats.anats) h4,:is(#anats#anats,.anats.anats) h5,:is(#anats#anats,.anats.anats) h6 {
font-size:inherit;
font-weight:inherit
}
:is(#anats#anats,.anats.anats) a {
color:inherit;
-webkit-text-decoration:inherit;
-webkit-text-decoration:inherit;
-webkit-text-decoration:inherit;
-webkit-text-decoration:inherit;
text-decoration:inherit
}
:is(#anats#anats,.anats.anats) b,:is(#anats#anats,.anats.anats) strong {
font-weight:bolder
}
:is(#anats#anats,.anats.anats) code,:is(#anats#anats,.anats.anats) kbd,:is(#anats#anats,.anats.anats) samp,:is(#anats#anats,.anats.anats) pre {
font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
font-feature-settings:var(--default-mono-font-feature-settings,normal);
font-variation-settings:var(--default-mono-font-variation-settings,normal);
font-size:1em
}
:is(#anats#anats,.anats.anats) small {
font-size:80%
}
:is(#anats#anats,.anats.anats) sub,:is(#anats#anats,.anats.anats) sup {
vertical-align:baseline;
font-size:75%;
line-height:0;
position:relative
}
:is(#anats#anats,.anats.anats) sub {
bottom:-.25em
}
:is(#anats#anats,.anats.anats) sup {
top:-.5em
}
:is(#anats#anats,.anats.anats) table {
text-indent:0;
border-color:inherit;
border-collapse:collapse
}
:is(#anats#anats,.anats.anats) :-moz-focusring:where(:not(iframe)) {
outline:auto
}
:is(#anats#anats,.anats.anats) progress {
vertical-align:baseline
}
:is(#anats#anats,.anats.anats) summary {
display:list-item
}
:is(#anats#anats,.anats.anats) ol,:is(#anats#anats,.anats.anats) ul,:is(#anats#anats,.anats.anats) menu {
list-style:none
}
:is(#anats#anats,.anats.anats) img,:is(#anats#anats,.anats.anats) svg,:is(#anats#anats,.anats.anats) video,:is(#anats#anats,.anats.anats) canvas,:is(#anats#anats,.anats.anats) audio,:is(#anats#anats,.anats.anats) iframe,:is(#anats#anats,.anats.anats) embed,:is(#anats#anats,.anats.anats) object {
vertical-align:middle;
display:block
}
:is(#anats#anats,.anats.anats) img,:is(#anats#anats,.anats.anats) video {
max-width:100%;
height:auto
}
:is(#anats#anats,.anats.anats) button,:is(#anats#anats,.anats.anats) input,:is(#anats#anats,.anats.anats) select,:is(#anats#anats,.anats.anats) optgroup,:is(#anats#anats,.anats.anats) textarea {
font:inherit;
font-feature-settings:inherit;
font-variation-settings:inherit;
letter-spacing:inherit;
color:inherit;
opacity:1;
background-color:#0000;
border-radius:0
}
:is(#anats#anats,.anats.anats) ::file-selector-button {
font:inherit;
font-feature-settings:inherit;
font-variation-settings:inherit;
letter-spacing:inherit;
color:inherit;
opacity:1;
background-color:#0000;
border-radius:0
}
:is(#anats#anats,.anats.anats) :where(select:is([multiple],[size])) optgroup {
font-weight:bolder
}
:is(#anats#anats,.anats.anats) :where(select:is([multiple],[size])) optgroup option {
padding-inline-start:20px
}
:is(#anats#anats,.anats.anats) ::file-selector-button {
margin-inline-end:4px
}
:is(#anats#anats,.anats.anats) ::placeholder {
opacity:1
}
@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
:is(#anats#anats,.anats.anats) ::placeholder {
color:currentColor
}
@supports (color:color-mix(in lab, red, red)) {
:is(#anats#anats,.anats.anats) ::placeholder {
color:color-mix(in oklab, currentcolor 50%, transparent)
}
}
}
:is(#anats#anats,.anats.anats) textarea {
resize:vertical
}
:is(#anats#anats,.anats.anats) ::-webkit-search-decoration {
-webkit-appearance:none
}
:is(#anats#anats,.anats.anats) ::-webkit-date-and-time-value {
min-height:1lh;
text-align:inherit
}
:is(#anats#anats,.anats.anats) ::-webkit-datetime-edit {
display:inline-flex
}
:is(#anats#anats,.anats.anats) ::-webkit-datetime-edit-fields-wrapper {
padding:0
}
:is(#anats#anats,.anats.anats) ::-webkit-datetime-edit {
padding-block:0
}
:is(#anats#anats,.anats.anats) ::-webkit-datetime-edit-year-field {
padding-block:0
}
:is(#anats#anats,.anats.anats) ::-webkit-datetime-edit-month-field {
padding-block:0
}
:is(#anats#anats,.anats.anats) ::-webkit-datetime-edit-day-field {
padding-block:0
}
:is(#anats#anats,.anats.anats) ::-webkit-datetime-edit-hour-field {
padding-block:0
}
:is(#anats#anats,.anats.anats) ::-webkit-datetime-edit-minute-field {
padding-block:0
}
:is(#anats#anats,.anats.anats) ::-webkit-datetime-edit-second-field {
padding-block:0
}
:is(#anats#anats,.anats.anats) ::-webkit-datetime-edit-millisecond-field {
padding-block:0
}
:is(#anats#anats,.anats.anats) ::-webkit-datetime-edit-meridiem-field {
padding-block:0
}
:is(#anats#anats,.anats.anats) ::-webkit-calendar-picker-indicator {
line-height:1
}
:is(#anats#anats,.anats.anats) :-moz-ui-invalid {
box-shadow:none
}
:is(#anats#anats,.anats.anats) button,:is(#anats#anats,.anats.anats) input:where([type=button],[type=reset],[type=submit]) {
appearance:button
}
:is(#anats#anats,.anats.anats) ::file-selector-button {
appearance:button
}
:is(#anats#anats,.anats.anats) ::-webkit-inner-spin-button {
height:auto
}
:is(#anats#anats,.anats.anats) ::-webkit-outer-spin-button {
height:auto
}
:is(#anats#anats,.anats.anats) [hidden]:where(:not([hidden=until-found])) {
display:none!important
}
:is(#anats#anats,.anats.anats) .absolute {
position:absolute
}
:is(#anats#anats,.anats.anats) .relative {
position:relative
}
:is(#anats#anats,.anats.anats) .inset-0 {
inset:0
}
:is(#anats#anats,.anats.anats) .inset-x-0 {
inset-inline:0
}
:is(#anats#anats,.anats.anats) .top-\[-16px\] {
top:-16px
}
:is(#anats#anats,.anats.anats) .top-\[3px\] {
top:3px
}
:is(#anats#anats,.anats.anats) .right-\[50px\] {
right:50px
}
:is(#anats#anats,.anats.anats) .bottom-0 {
bottom:0
}
:is(#anats#anats,.anats.anats) .left-1\/2 {
left:50%
}
:is(#anats#anats,.anats.anats) .left-\[50px\] {
left:50px
}
:is(#anats#anats,.anats.anats) .m-0 {
margin:0
}
:is(#anats#anats,.anats.anats) .mx-auto {
margin-inline:auto
}
:is(#anats#anats,.anats.anats) .mt-\[6px\] {
margin-top:6px
}
:is(#anats#anats,.anats.anats) .mt-\[10px\] {
margin-top:10px
}
:is(#anats#anats,.anats.anats) .mt-\[32px\] {
margin-top:32px
}
:is(#anats#anats,.anats.anats) .ml-\[8px\] {
margin-left:8px
}
:is(#anats#anats,.anats.anats) .line-clamp-3 {
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
display:-webkit-box;
overflow:hidden
}
:is(#anats#anats,.anats.anats) .block {
display:block
}
:is(#anats#anats,.anats.anats) .flex {
display:flex
}
:is(#anats#anats,.anats.anats) .grid {
display:grid
}
:is(#anats#anats,.anats.anats) .hidden {
display:none
}
:is(#anats#anats,.anats.anats) .inline-flex {
display:inline-flex
}
:is(#anats#anats,.anats.anats) .h-\[6px\] {
height:6px
}
:is(#anats#anats,.anats.anats) .h-\[20px\] {
height:20px
}
:is(#anats#anats,.anats.anats) .h-\[22px\] {
height:22px
}
:is(#anats#anats,.anats.anats) .h-\[24px\] {
height:24px
}
:is(#anats#anats,.anats.anats) .h-\[37px\] {
height:37px
}
:is(#anats#anats,.anats.anats) .h-\[88px\] {
height:88px
}
:is(#anats#anats,.anats.anats) .h-\[96px\] {
height:96px
}
:is(#anats#anats,.anats.anats) .h-\[97px\] {
height:97px
}
:is(#anats#anats,.anats.anats) .h-\[107px\] {
height:107px
}
:is(#anats#anats,.anats.anats) .h-\[196px\] {
height:196px
}
:is(#anats#anats,.anats.anats) .h-full {
height:100%
}
:is(#anats#anats,.anats.anats) .w-\[6px\] {
width:6px
}
:is(#anats#anats,.anats.anats) .w-\[20px\] {
width:20px
}
:is(#anats#anats,.anats.anats) .w-\[22px\] {
width:22px
}
:is(#anats#anats,.anats.anats) .w-\[24px\] {
width:24px
}
:is(#anats#anats,.anats.anats) .w-\[31px\] {
width:31px
}
:is(#anats#anats,.anats.anats) .w-\[70px\] {
width:70px
}
:is(#anats#anats,.anats.anats) .w-\[88px\] {
width:88px
}
:is(#anats#anats,.anats.anats) .w-\[96px\] {
width:96px
}
:is(#anats#anats,.anats.anats) .w-\[97px\] {
width:97px
}
:is(#anats#anats,.anats.anats) .w-\[120px\] {
width:120px
}
:is(#anats#anats,.anats.anats) .w-fit {
width:fit-content
}
:is(#anats#anats,.anats.anats) .w-full {
width:100%
}
:is(#anats#anats,.anats.anats) .max-w-\[900px\] {
max-width:900px
}
:is(#anats#anats,.anats.anats) .flex-1 {
flex:1
}
:is(#anats#anats,.anats.anats) .shrink-0 {
flex-shrink:0
}
:is(#anats#anats,.anats.anats) .-translate-x-1\/2 {
--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);
translate:var(--tw-translate-x) var(--tw-translate-y)
}
:is(#anats#anats,.anats.anats) .-translate-y-px {
--tw-translate-y:-1px;
translate:var(--tw-translate-x) var(--tw-translate-y)
}
:is(#anats#anats,.anats.anats) .transform {
transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)
}
:is(#anats#anats,.anats.anats) .cursor-pointer {
cursor:pointer
}
:is(#anats#anats,.anats.anats) .list-none {
list-style-type:none
}
:is(#anats#anats,.anats.anats) .grid-cols-1 {
grid-template-columns:repeat(1,minmax(0,1fr))
}
:is(#anats#anats,.anats.anats) .flex-col {
flex-direction:column
}
:is(#anats#anats,.anats.anats) .flex-wrap {
flex-wrap:wrap
}
:is(#anats#anats,.anats.anats) .items-baseline {
align-items:baseline
}
:is(#anats#anats,.anats.anats) .items-center {
align-items:center
}
:is(#anats#anats,.anats.anats) .items-start {
align-items:flex-start
}
:is(#anats#anats,.anats.anats) .justify-center {
justify-content:center
}
:is(#anats#anats,.anats.anats) .gap-\[2px\] {
gap:2px
}
:is(#anats#anats,.anats.anats) .gap-\[4px\] {
gap:4px
}
:is(#anats#anats,.anats.anats) .gap-\[6px\] {
gap:6px
}
:is(#anats#anats,.anats.anats) .gap-\[8px\] {
gap:8px
}
:is(#anats#anats,.anats.anats) .gap-\[10px\] {
gap:10px
}
:is(#anats#anats,.anats.anats) .gap-\[12px\] {
gap:12px
}
:is(#anats#anats,.anats.anats) .gap-\[16px\] {
gap:16px
}
:is(#anats#anats,.anats.anats) .gap-\[20px\] {
gap:20px
}
:is(#anats#anats,.anats.anats) .gap-\[24px\] {
gap:24px
}
:is(#anats#anats,.anats.anats) .gap-\[32px\] {
gap:32px
}
:is(#anats#anats,.anats.anats) .gap-\[40px\] {
gap:40px
}
:is(#anats#anats,.anats.anats) .gap-\[64px\] {
gap:64px
}
:is(#anats#anats,.anats.anats) .gap-y-\[16px\] {
row-gap:16px
}
:is(#anats#anats,.anats.anats) .overflow-hidden {
overflow:hidden
}
:is(#anats#anats,.anats.anats) .rounded-badge {
border-radius:var(--radius-badge)
}
:is(#anats#anats,.anats.anats) .rounded-card {
border-radius:var(--radius-card)
}
:is(#anats#anats,.anats.anats) .rounded-chip {
border-radius:var(--radius-chip)
}
:is(#anats#anats,.anats.anats) .rounded-cta {
border-radius:var(--radius-cta)
}
:is(#anats#anats,.anats.anats) .rounded-full {
border-radius:2147483647px
}
:is(#anats#anats,.anats.anats) .rounded-label {
border-radius:var(--radius-label)
}
:is(#anats#anats,.anats.anats) .rounded-plan {
border-radius:var(--radius-plan)
}
:is(#anats#anats,.anats.anats) .border {
border-style:var(--tw-border-style);
border-width:1px
}
:is(#anats#anats,.anats.anats) .border-b {
border-bottom-style:var(--tw-border-style);
border-bottom-width:1px
}
:is(#anats#anats,.anats.anats) .border-corporate {
border-color:var(--color-corporate)
}
:is(#anats#anats,.anats.anats) .border-plan-border {
border-color:var(--color-plan-border)
}
:is(#anats#anats,.anats.anats) .border-plan-rule {
border-color:var(--color-plan-rule)
}
:is(#anats#anats,.anats.anats) .border-b-divider-point {
border-bottom-color:var(--color-divider-point)
}
:is(#anats#anats,.anats.anats) .border-b-divider-point-last {
border-bottom-color:var(--color-divider-point-last)
}
:is(#anats#anats,.anats.anats) .bg-accent-yellow {
background-color:var(--color-accent-yellow)
}
:is(#anats#anats,.anats.anats) .bg-corporate {
background-color:var(--color-corporate)
}
:is(#anats#anats,.anats.anats) .bg-icon-blue {
background-color:var(--color-icon-blue)
}
:is(#anats#anats,.anats.anats) .bg-plan-badge-gold {
background-color:var(--color-plan-badge-gold)
}
:is(#anats#anats,.anats.anats) .bg-plan-badge-teal {
background-color:var(--color-plan-badge-teal)
}
:is(#anats#anats,.anats.anats) .bg-plan-benefit-bg {
background-color:var(--color-plan-benefit-bg)
}
:is(#anats#anats,.anats.anats) .bg-plan-tag-bg {
background-color:var(--color-plan-tag-bg)
}
:is(#anats#anats,.anats.anats) .bg-white {
background-color:var(--color-white)
}
:is(#anats#anats,.anats.anats) .text-gradient-orange {
color:var(--color-accent-orange);
background-image:var(--gradient-accent-orange);
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
background-clip:text
}
:is(#anats#anats,.anats.anats) .text-gradient-orange-tight {
color:var(--color-accent-orange);
background-image:var(--gradient-accent-orange-tight);
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
background-clip:text
}
:is(#anats#anats,.anats.anats) .bg-\[image\:var\(--gradient-accent-orange\)\] {
background-image:var(--gradient-accent-orange)
}
:is(#anats#anats,.anats.anats) .object-cover {
object-fit:cover
}
:is(#anats#anats,.anats.anats) .p-\[10px\] {
padding:10px
}
:is(#anats#anats,.anats.anats) .p-\[24px\] {
padding:24px
}
:is(#anats#anats,.anats.anats) .px-\[4px\] {
padding-inline:4px
}
:is(#anats#anats,.anats.anats) .px-\[6px\] {
padding-inline:6px
}
:is(#anats#anats,.anats.anats) .px-\[8px\] {
padding-inline:8px
}
:is(#anats#anats,.anats.anats) .px-\[10px\] {
padding-inline:10px
}
:is(#anats#anats,.anats.anats) .px-\[12px\] {
padding-inline:12px
}
:is(#anats#anats,.anats.anats) .px-\[16px\] {
padding-inline:16px
}
:is(#anats#anats,.anats.anats) .px-\[18px\] {
padding-inline:18px
}
:is(#anats#anats,.anats.anats) .px-\[24px\] {
padding-inline:24px
}
:is(#anats#anats,.anats.anats) .py-\[1px\] {
padding-block:1px
}
:is(#anats#anats,.anats.anats) .py-\[3px\] {
padding-block:3px
}
:is(#anats#anats,.anats.anats) .py-\[4px\] {
padding-block:4px
}
:is(#anats#anats,.anats.anats) .py-\[6px\] {
padding-block:6px
}
:is(#anats#anats,.anats.anats) .py-\[8px\] {
padding-block:8px
}
:is(#anats#anats,.anats.anats) .pt-\[12px\] {
padding-top:12px
}
:is(#anats#anats,.anats.anats) .pt-\[32px\] {
padding-top:32px
}
:is(#anats#anats,.anats.anats) .pt-\[48px\] {
padding-top:48px
}
:is(#anats#anats,.anats.anats) .pb-\[0\.5px\] {
padding-bottom:.5px
}
:is(#anats#anats,.anats.anats) .pb-\[5px\] {
padding-bottom:5px
}
:is(#anats#anats,.anats.anats) .pb-\[10px\] {
padding-bottom:10px
}
:is(#anats#anats,.anats.anats) .pb-\[16px\] {
padding-bottom:16px
}
:is(#anats#anats,.anats.anats) .pb-\[32px\] {
padding-bottom:32px
}
:is(#anats#anats,.anats.anats) .pb-\[64px\] {
padding-bottom:64px
}
:is(#anats#anats,.anats.anats) .text-center {
text-align:center
}
:is(#anats#anats,.anats.anats) .text-left {
text-align:left
}
:is(#anats#anats,.anats.anats) .font-inter {
font-family:var(--font-inter)
}
:is(#anats#anats,.anats.anats) .font-jp {
font-family:var(--font-jp)
}
:is(#anats#anats,.anats.anats) .font-oswald {
font-family:var(--font-oswald)
}
:is(#anats#anats,.anats.anats) .font-roboto-condensed {
font-family:var(--font-roboto-condensed)
}
:is(#anats#anats,.anats.anats) .text-22 {
font-size:var(--text-22);
line-height:var(--tw-leading,var(--text-22--line-height));
letter-spacing:var(--tw-tracking,var(--text-22--letter-spacing))
}
:is(#anats#anats,.anats.anats) .text-11 {
font-size:var(--text-11);
line-height:var(--tw-leading,var(--text-11--line-height))
}
:is(#anats#anats,.anats.anats) .text-12 {
font-size:var(--text-12);
line-height:var(--tw-leading,var(--text-12--line-height))
}
:is(#anats#anats,.anats.anats) .text-14 {
font-size:var(--text-14);
line-height:var(--tw-leading,var(--text-14--line-height))
}
:is(#anats#anats,.anats.anats) .text-16 {
font-size:var(--text-16);
line-height:var(--tw-leading,var(--text-16--line-height))
}
:is(#anats#anats,.anats.anats) .text-18 {
font-size:var(--text-18);
line-height:var(--tw-leading,var(--text-18--line-height))
}
:is(#anats#anats,.anats.anats) .text-24 {
font-size:var(--text-24);
line-height:var(--tw-leading,var(--text-24--line-height))
}
:is(#anats#anats,.anats.anats) .text-28 {
font-size:var(--text-28);
line-height:var(--tw-leading,var(--text-28--line-height))
}
:is(#anats#anats,.anats.anats) .text-38 {
font-size:var(--text-38);
line-height:var(--tw-leading,var(--text-38--line-height))
}
:is(#anats#anats,.anats.anats) .text-40 {
font-size:var(--text-40);
line-height:var(--tw-leading,var(--text-40--line-height))
}
:is(#anats#anats,.anats.anats) .text-tilde {
font-size:var(--text-tilde);
line-height:var(--tw-leading,var(--text-tilde--line-height))
}
:is(#anats#anats,.anats.anats) .text-yen {
font-size:var(--text-yen);
line-height:var(--tw-leading,var(--text-yen--line-height))
}
:is(#anats#anats,.anats.anats) .font-black {
--tw-font-weight:var(--font-weight-black);
font-weight:var(--font-weight-black)
}
:is(#anats#anats,.anats.anats) .font-bold {
--tw-font-weight:var(--font-weight-bold);
font-weight:var(--font-weight-bold)
}
:is(#anats#anats,.anats.anats) .font-normal {
--tw-font-weight:var(--font-weight-normal);
font-weight:var(--font-weight-normal)
}
:is(#anats#anats,.anats.anats) .font-semibold {
--tw-font-weight:var(--font-weight-semibold);
font-weight:var(--font-weight-semibold)
}
:is(#anats#anats,.anats.anats) .text-corporate {
color:var(--color-corporate)
}
:is(#anats#anats,.anats.anats) .text-link {
color:var(--color-link)
}
:is(#anats#anats,.anats.anats) .text-main-text {
color:var(--color-main-text)
}
:is(#anats#anats,.anats.anats) .text-sub-text {
color:var(--color-sub-text)
}
:is(#anats#anats,.anats.anats) .text-white {
color:var(--color-white)
}
:is(#anats#anats,.anats.anats) .text-white\/80 {
color:#fffc
}
@supports (color:color-mix(in lab, red, red)) {
:is(#anats#anats,.anats.anats) .text-white\/80 {
color:color-mix(in oklab, var(--color-white) 80%, transparent)
}
}
:is(#anats#anats,.anats.anats) .underline {
text-decoration-line:underline
}
:is(#anats#anats,.anats.anats) .shadow-cta {
--tw-shadow:0 2px 7px 4px var(--tw-shadow-color,#00000026);
box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
}
:is(#anats#anats,.anats.anats) .frame-stroke-blue {
outline:3px solid var(--color-icon-blue);
outline-offset:-3px
}
:is(#anats#anats,.anats.anats) .outline {
outline-style:var(--tw-outline-style);
outline-width:1px
}
:is(#anats#anats,.anats.anats) .group-open\:line-clamp-none:is(:where(.group):is([open],:popover-open,:open) *) {
-webkit-line-clamp:unset;
-webkit-box-orient:horizontal;
display:block;
overflow:visible
}
:is(#anats#anats,.anats.anats) .group-open\:block:is(:where(.group):is([open],:popover-open,:open) *) {
display:block
}
:is(#anats#anats,.anats.anats) .group-open\:hidden:is(:where(.group):is([open],:popover-open,:open) *) {
display:none
}
:is(#anats#anats,.anats.anats) .group-open\:inline:is(:where(.group):is([open],:popover-open,:open) *) {
display:inline
}
:is(#anats#anats,.anats.anats) .group-open\:h-auto:is(:where(.group):is([open],:popover-open,:open) *) {
height:auto
}
@media (hover:hover) {
:is(#anats#anats,.anats.anats) .group-hover\:no-underline:is(:where(.group):hover *) {
text-decoration-line:none
}
:is(#anats#anats,.anats.anats) .hover\:opacity-90:hover {
opacity:.9
}
}
:is(#anats#anats,.anats.anats) .focus-visible\:outline-2:focus-visible {
outline-style:var(--tw-outline-style);
outline-width:2px
}
:is(#anats#anats,.anats.anats) .focus-visible\:outline-offset-2:focus-visible {
outline-offset:2px
}
:is(#anats#anats,.anats.anats) .focus-visible\:outline-corporate:focus-visible {
outline-color:var(--color-corporate)
}
:is(#anats#anats,.anats.anats) .focus-visible\:outline-link:focus-visible {
outline-color:var(--color-link)
}
@media not all and (width>=769px) {
:is(#anats#anats,.anats.anats) .max-md\:hidden {
display:none
}
:is(#anats#anats,.anats.anats) .max-md\:-translate-y-px {
--tw-translate-y:-1px;
translate:var(--tw-translate-x) var(--tw-translate-y)
}
:is(#anats#anats,.anats.anats) .max-md\:text-left {
text-align:left
}
@media (hover:hover) {
:is(#anats#anats,.anats.anats) .max-md\:hover\:no-underline:hover {
text-decoration-line:none
}
}
}
@media (width>=769px) {
:is(#anats#anats,.anats.anats) .md\:top-\[-21px\] {
top:-21px
}
:is(#anats#anats,.anats.anats) .md\:mt-\[44px\] {
margin-top:44px
}
:is(#anats#anats,.anats.anats) .md\:hidden {
display:none
}
:is(#anats#anats,.anats.anats) .md\:h-\[96px\] {
height:96px
}
:is(#anats#anats,.anats.anats) .md\:h-\[110px\] {
height:110px
}
:is(#anats#anats,.anats.anats) .md\:w-\[96px\] {
width:96px
}
:is(#anats#anats,.anats.anats) .md\:w-\[110px\] {
width:110px
}
:is(#anats#anats,.anats.anats) .md\:grid-cols-2 {
grid-template-columns:repeat(2,minmax(0,1fr))
}
:is(#anats#anats,.anats.anats) .md\:grid-cols-3 {
grid-template-columns:repeat(3,minmax(0,1fr))
}
:is(#anats#anats,.anats.anats) .md\:gap-\[16px\] {
gap:16px
}
:is(#anats#anats,.anats.anats) .md\:gap-\[18px\] {
gap:18px
}
:is(#anats#anats,.anats.anats) .md\:gap-\[24px\] {
gap:24px
}
:is(#anats#anats,.anats.anats) .md\:gap-\[32px\] {
gap:32px
}
:is(#anats#anats,.anats.anats) .md\:gap-\[40px\] {
gap:40px
}
:is(#anats#anats,.anats.anats) .md\:gap-y-0 {
row-gap:0
}
:is(#anats#anats,.anats.anats) .md\:border-r {
border-right-style:var(--tw-border-style);
border-right-width:1px
}
:is(#anats#anats,.anats.anats) .md\:border-r-0 {
border-right-style:var(--tw-border-style);
border-right-width:0
}
:is(#anats#anats,.anats.anats) .md\:border-b-0 {
border-bottom-style:var(--tw-border-style);
border-bottom-width:0
}
:is(#anats#anats,.anats.anats) .md\:border-r-divider-point {
border-right-color:var(--color-divider-point)
}
:is(#anats#anats,.anats.anats) .md\:px-\[16px\] {
padding-inline:16px
}
:is(#anats#anats,.anats.anats) .md\:px-\[24px\] {
padding-inline:24px
}
:is(#anats#anats,.anats.anats) .md\:px-\[40px\] {
padding-inline:40px
}
:is(#anats#anats,.anats.anats) .md\:pt-\[32px\] {
padding-top:32px
}
:is(#anats#anats,.anats.anats) .md\:pt-\[48px\] {
padding-top:48px
}
:is(#anats#anats,.anats.anats) .md\:pt-\[64px\] {
padding-top:64px
}
:is(#anats#anats,.anats.anats) .md\:pb-0 {
padding-bottom:0
}
:is(#anats#anats,.anats.anats) .md\:pb-\[24px\] {
padding-bottom:24px
}
:is(#anats#anats,.anats.anats) .md\:text-center {
text-align:center
}
:is(#anats#anats,.anats.anats) .md\:text-22 {
font-size:var(--text-22);
line-height:var(--tw-leading,var(--text-22--line-height));
letter-spacing:var(--tw-tracking,var(--text-22--letter-spacing))
}
:is(#anats#anats,.anats.anats) .md\:text-18 {
font-size:var(--text-18);
line-height:var(--tw-leading,var(--text-18--line-height))
}
:is(#anats#anats,.anats.anats) .md\:text-30 {
font-size:var(--text-30);
line-height:var(--tw-leading,var(--text-30--line-height))
}
:is(#anats#anats,.anats.anats) .md\:no-underline {
text-decoration-line:none
}
@media (hover:hover) {
:is(#anats#anats,.anats.anats) .md\:hover\:underline:hover {
text-decoration-line:underline
}
}
}
:is(#anats#anats,.anats.anats) .\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker {
display:none
}
:is(#anats#anats,.anats.anats) {
--gradient-accent-orange:linear-gradient(95deg, #fb5b01 0%, #de2c00 100%);
--gradient-accent-orange-tight:linear-gradient(105deg, #fb5b01 0%, #de2c00 100%)
}
:is(#anats#anats,.anats.anats),:is(#anats#anats,.anats.anats) #root {
margin:0;
padding:0
}
:is(#anats#anats,.anats.anats) {
transform:translateZ(0)
}
@media (forced-colors:active) {
:is(#anats#anats,.anats.anats) .text-gradient-orange,:is(#anats#anats,.anats.anats) .text-gradient-orange-tight {
-webkit-text-fill-color:currentColor;
background-image:none
}
}
:is(#anats#anats,.anats.anats) .anats-intro {
background-image:linear-gradient(#dcf0ff 0%,#d6edff 100%);
position:relative;
overflow:hidden
}
:is(#anats#anats,.anats.anats) .anats-intro__decor {
pointer-events:none;
position:absolute;
inset:0;
overflow:hidden
}
:is(#anats#anats,.anats.anats) .anats-intro__decor>* {
position:absolute
}
:is(#anats#anats,.anats.anats) .anats-intro__grid {
background-image:linear-gradient(90deg,#b2deff55 0 2px,#0000 2px),linear-gradient(#b2deff55 0 2px,#0000 2px);
background-position:calc(50% - 41.5px) calc(50% - 42px);
background-size:82px 82px;
height:472px;
top:0;
left:0;
right:0
}
:is(#anats#anats,.anats.anats) .anats-intro__plane {
width:74.5px;
top:22px;
left:17.07px
}
:is(#anats#anats,.anats.anats) .anats-intro__globe {
background-color:#b7e0fb;
border-radius:50%;
width:820px;
height:811px;
top:248px;
left:calc(50% + 1.65px);
transform:translate(-50%)
}
:is(#anats#anats,.anats.anats) .anats-intro__map {
width:676.29px;
top:262px;
left:calc(50% + .5px);
transform:translate(-50%)
}
:is(#anats#anats,.anats.anats) .anats-intro__person-l {
width:55.68px;
top:288.56px;
left:-1.45px
}
:is(#anats#anats,.anats.anats) .anats-intro__person-r {
width:105.68px;
top:280.88px;
right:-42.5px
}
@media (width>=769px) {
:is(#anats#anats,.anats.anats) .anats-intro__grid {
background-position:calc(50% - 42px) calc(50% - 42px);
height:1200px
}
:is(#anats#anats,.anats.anats) .anats-intro__plane {
width:181.58px;
top:57px;
left:88.19px
}
:is(#anats#anats,.anats.anats) .anats-intro__globe {
width:2000px;
height:1600px;
top:486.01px;
left:50%
}
:is(#anats#anats,.anats.anats) .anats-intro__map {
width:1929.99px;
top:561.43px;
left:50%
}
:is(#anats#anats,.anats.anats) .anats-intro__person-l {
width:193.1px;
top:456px;
left:32.86px
}
:is(#anats#anats,.anats.anats) .anats-intro__person-r {
width:359.09px;
top:428.88px;
right:-92.97px
}
}
:is(#anats#anats,.anats.anats) .anats-search {
background-color:#dcf0ff
}
:is(#anats#anats,.anats.anats) .anats-search__inner {
flex-direction:column;
align-items:center;
gap:40px;
width:100%;
max-width:1200px;
margin-inline:auto;
display:flex
}
:is(#anats#anats,.anats.anats) .anats-search__grid {
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
width:100%;
margin:0;
padding:0;
list-style:none;
display:grid
}
:is(#anats#anats,.anats.anats) .anats-search__card {
border:1px solid var(--color-plan-border);
border-radius:var(--radius-plan);
background-color:var(--color-white);
flex-direction:column;
height:148px;
text-decoration:none;
display:flex;
overflow:hidden
}
:is(#anats#anats,.anats.anats) .anats-search__card:hover .anats-search__label {
text-decoration:underline
}
:is(#anats#anats,.anats.anats) .anats-search__card:focus-visible {
outline:2px solid var(--color-link);
outline-offset:2px
}
:is(#anats#anats,.anats.anats) .anats-search__thumb {
width:100%;
height:106px;
display:block;
overflow:hidden
}
:is(#anats#anats,.anats.anats) .anats-search__thumb-inner {
width:max(100%,188px);
height:106px;
display:block;
position:relative;
left:50%;
transform:translate(-50%)
}
:is(#anats#anats,.anats.anats) .anats-search__thumb img {
object-fit:cover;
width:100%;
height:106px;
display:block
}
:is(#anats#anats,.anats.anats) .anats-search__thumb--flush .anats-search__thumb-inner {
left:0;
transform:none
}
:is(#anats#anats,.anats.anats) .anats-search__label {
font-family:var(--font-jp);
text-align:center;
color:var(--color-main-text);
flex:1;
justify-content:center;
align-items:center;
padding:8px 4px;
font-size:1.6rem;
font-weight:700;
line-height:2.4rem;
display:flex;
transform:translateY(-1px)
}
@media (width>=769px) {
:is(#anats#anats,.anats.anats) .anats-search__inner {
gap:32px
}
:is(#anats#anats,.anats.anats) .anats-search__grid {
grid-template-columns:repeat(6,minmax(0,1fr))
}
}
:is(#anats#anats,.anats.anats) .anats-kv {
--anats-kv-photo-pc:url(/international/theme/timesale/inttour/images/261005/kv-bg-pc.jpg);
--anats-kv-photo-sp:url(/international/theme/timesale/inttour/images/261005/kv-bg-sp.jpg);
--anats-kv-photo-sp-ratio:4096 / 2730;
background-image:linear-gradient(#0466d1 0%,#024cff 57.82% 100%);
flex-direction:column;
min-height:567px;
padding:36px 12px 32px;
display:flex;
position:relative;
overflow:hidden;
container-type:inline-size
}
:is(#anats#anats,.anats.anats) .anats-kv__photo {
display:none
}
:is(#anats#anats,.anats.anats) .anats-kv__photo-sp {
position:absolute;
inset:354.5px 0 0;
overflow:hidden
}
:is(#anats#anats,.anats.anats) .anats-kv__photo-sp-inner {
width:100%;
aspect-ratio:var(--anats-kv-photo-sp-ratio);
background-image:var(--anats-kv-photo-sp);
background-position:50%;
background-size:cover;
display:block
}
:is(#anats#anats,.anats.anats) .anats-kv__inner {
flex-direction:column;
align-items:center;
gap:16px;
width:100%;
display:flex;
position:relative
}
:is(#anats#anats,.anats.anats) .anats-kv__title {
font-family:var(--font-jp);
color:var(--color-accent-yellow);
flex-direction:column;
gap:.055556em;
margin:0;
font-size:min(5.4rem,15.3846cqw);
font-weight:700;
line-height:1;
display:flex
}
:is(#anats#anats,.anats.anats) .anats-kv__row1 {
align-self:center;
width:5.48148em;
height:1.07407em;
position:relative
}
:is(#anats#anats,.anats.anats) .anats-kv__flag {
width:1.15537em;
height:auto;
position:absolute;
top:-.182778em;
left:-.17537em
}
:is(#anats#anats,.anats.anats) .anats-kv__row1-text {
white-space:nowrap;
padding-left:.62963em;
display:block
}
:is(#anats#anats,.anats.anats) .anats-kv__row2 {
align-self:center;
gap:.055556em;
display:flex
}
:is(#anats#anats,.anats.anats) .anats-kv__row2-text {
font-family:var(--font-noto-sans);
letter-spacing:-.1em;
white-space:nowrap;
margin-right:.1em
}
:is(#anats#anats,.anats.anats) .anats-kv__period {
background-color:var(--color-accent-yellow);
width:100%;
color:var(--color-corporate);
font-family:var(--font-jp);
border-radius:30px;
align-items:center;
gap:12.5px;
margin:0;
padding:12px 16px;
display:flex
}
:is(#anats#anats,.anats.anats) .anats-kv__period-label {
flex:none;
font-size:1.4rem;
font-weight:700;
line-height:2.1rem;
transform:translateY(1px)
}
:is(#anats#anats,.anats.anats) .anats-kv__period-rule {
background-color:currentColor;
align-self:center;
width:1px;
height:27px
}
:is(#anats#anats,.anats.anats) .anats-kv__period-value {
text-align:center;
flex-direction:column;
flex:1;
justify-content:center;
height:27px;
font-size:1.4rem;
font-weight:500;
line-height:1.68rem;
display:flex
}
:is(#anats#anats,.anats.anats) .anats-kv__count {
background-color:#00146e99;
border-radius:20px;
flex-direction:column;
align-items:center;
gap:8px;
width:100%;
padding:12px;
display:flex
}
:is(#anats#anats,.anats.anats) .anats-kv__count-head {
width:100%;
font-family:var(--font-jp);
color:var(--color-white);
justify-content:center;
align-items:center;
gap:8px;
margin:0;
font-size:1.6rem;
font-weight:700;
line-height:2.4rem;
display:flex
}
:is(#anats#anats,.anats.anats) .anats-kv__count-icon {
flex:none;
width:22px;
height:22px
}
:is(#anats#anats,.anats.anats) .anats-kv__count-row {
gap:1px;
width:100%;
display:flex
}
:is(#anats#anats,.anats.anats) .anats-kv__time {
background-color:var(--color-white);
color:var(--color-corporate);
flex:1;
justify-content:center;
align-items:center;
gap:8px;
padding:8px 6px;
display:flex
}
:is(#anats#anats,.anats.anats) .anats-kv__time-num {
font-family:var(--font-roboto-condensed);
font-variant-numeric:tabular-nums;
font-size:3.6rem;
font-weight:400;
line-height:3.6rem
}
:is(#anats#anats,.anats.anats) .anats-kv__time-unit {
font-family:var(--font-jp);
text-align:center;
font-size:1.2rem;
font-weight:400;
line-height:1.8rem
}
:is(#anats#anats,.anats.anats) .anats-kv__count:not([data-ready=true]) .anats-kv__time-num {
visibility:hidden;
animation:0s linear 6s forwards anats-kv-num-reveal
}
@keyframes anats-kv-num-reveal {
to {
visibility:visible
}
}
@media (width>=769px) {
:is(#anats#anats,.anats.anats) .anats-kv {
--anats-kv-u:clamp(.0625rem, calc(100cqw / 1400), .1rem);
background-image:linear-gradient(#0466d1 0% 51.923%,#66cfff 100%);
justify-content:center;
align-items:flex-start;
min-height:0;
padding:0
}
:is(#anats#anats,.anats.anats) .anats-kv__photo-sp {
display:none
}
:is(#anats#anats,.anats.anats) .anats-kv__photo {
--anats-kv-edge:calc(100cqw * 619 / 1400);
top:calc(-50 * var(--anats-kv-u));
left:calc(var(--anats-kv-edge) - 42 * var(--anats-kv-u));
height:calc(548 * var(--anats-kv-u));
pointer-events:none;
display:block;
position:absolute;
right:0;
overflow:hidden
}
:is(#anats#anats,.anats.anats) .anats-kv__photo-inner {
top:calc(50 * var(--anats-kv-u));
right:calc(-1 * var(--anats-kv-u));
left:calc(42 * var(--anats-kv-u));
height:calc(498 * var(--anats-kv-u));
background-image:var(--anats-kv-photo-pc);
clip-path:polygon(calc(141.612 * var(--anats-kv-u)) 0, 100% 0, 100% 100%, 0 100%);
background-position:50%;
background-size:cover;
display:block;
position:absolute
}
:is(#anats#anats,.anats.anats) .anats-kv__inner {
width:calc(514 * var(--anats-kv-u));
margin-block:calc(57 * var(--anats-kv-u));
gap:calc(16 * var(--anats-kv-u));
margin-inline-start:19.8571cqw
}
:is(#anats#anats,.anats.anats) .anats-kv__title {
gap:calc(4 * var(--anats-kv-u));
font-size:calc(84 * var(--anats-kv-u))
}
:is(#anats#anats,.anats.anats) .anats-kv__row1 {
width:5.64286em;
height:1.20238em
}
:is(#anats#anats,.anats.anats) .anats-kv__flag {
width:1.01191em;
top:-.02381em;
left:0
}
:is(#anats#anats,.anats.anats) .anats-kv__row1-text {
padding-top:.110714em;
padding-left:.690476em
}
:is(#anats#anats,.anats.anats) .anats-kv__row2 {
gap:.047619em
}
:is(#anats#anats,.anats.anats) .anats-kv__period {
gap:calc(9.5 * var(--anats-kv-u));
padding:calc(6 * var(--anats-kv-u)) calc(20 * var(--anats-kv-u));
border-radius:calc(30 * var(--anats-kv-u))
}
:is(#anats#anats,.anats.anats) .anats-kv__period-rule {
height:calc(28 * var(--anats-kv-u))
}
:is(#anats#anats,.anats.anats) .anats-kv__period-value {
height:calc(24 * var(--anats-kv-u));
font-size:calc(16 * var(--anats-kv-u));
font-weight:400;
line-height:calc(24 * var(--anats-kv-u));
white-space:nowrap
}
:is(#anats#anats,.anats.anats) .anats-kv__period-label {
font-size:calc(16 * var(--anats-kv-u));
line-height:calc(24 * var(--anats-kv-u));
transform:none
}
:is(#anats#anats,.anats.anats) .anats-kv__count {
width:calc(496 * var(--anats-kv-u));
gap:calc(8 * var(--anats-kv-u));
padding:calc(8 * var(--anats-kv-u)) calc(16 * var(--anats-kv-u)) calc(16 * var(--anats-kv-u));
border-radius:calc(20 * var(--anats-kv-u))
}
:is(#anats#anats,.anats.anats) .anats-kv__count-head {
gap:calc(6 * var(--anats-kv-u));
font-size:calc(18 * var(--anats-kv-u));
line-height:calc(27 * var(--anats-kv-u))
}
:is(#anats#anats,.anats.anats) .anats-kv__count-icon {
width:calc(24 * var(--anats-kv-u));
height:calc(24 * var(--anats-kv-u))
}
:is(#anats#anats,.anats.anats) .anats-kv__time {
gap:calc(8 * var(--anats-kv-u));
padding:calc(6 * var(--anats-kv-u)) calc(24 * var(--anats-kv-u))
}
:is(#anats#anats,.anats.anats) .anats-kv__time-num {
font-size:calc(52 * var(--anats-kv-u));
line-height:calc(52 * var(--anats-kv-u))
}
:is(#anats#anats,.anats.anats) .anats-kv__time-unit {
font-size:calc(16 * var(--anats-kv-u));
line-height:calc(24 * var(--anats-kv-u))
}
:is(#anats#anats,.anats.anats) .anats-kv__time-unit--stacked {
line-height:calc(20.8 * var(--anats-kv-u))
}
}
:is(#anats#anats,.anats.anats) .anats-floating {
background-color:var(--color-white);
justify-content:center;
align-items:center;
width:100%;
padding:6px 0;
display:flex
}
:is(#anats#anats,.anats.anats) .anats-floating__lead {
display:none
}
:is(#anats#anats,.anats.anats) .anats-floating__list {
align-items:center;
gap:24px;
margin:0;
padding:0;
list-style:none;
display:flex
}
:is(#anats#anats,.anats.anats) .anats-floating__btn {
border-radius:4px;
flex-direction:column;
justify-content:center;
align-items:center;
width:84px;
text-decoration:none;
display:flex
}
:is(#anats#anats,.anats.anats) .anats-floating__btn:hover .anats-floating__label {
text-decoration:underline
}
:is(#anats#anats,.anats.anats) .anats-floating__btn:focus-visible {
outline:2px solid var(--color-link);
outline-offset:2px
}
:is(#anats#anats,.anats.anats) .anats-floating__icon {
flex-shrink:0;
width:36px;
height:36px;
display:block
}
:is(#anats#anats,.anats.anats) .anats-floating__label {
font-family:var(--font-jp);
white-space:nowrap;
text-align:center;
color:var(--color-corporate);
font-size:1.2rem;
font-weight:400;
line-height:1.8rem
}
:is(#anats#anats,.anats.anats).anats-floating-fixed {
--anats-floating-offset:var(--anats-floating-bottom-sp,57px);
z-index:var(--anats-floating-z,9990);
right:0;
bottom:var(--anats-floating-offset);
visibility:visible;
transition:transform .3s,visibility;
position:fixed;
left:0;
transform:translateY(0)
}
:is(#anats#anats,.anats.anats).anats-floating-fixed.anats-floating-hidden {
transform:translateY(calc(110% + var(--anats-floating-offset)));
visibility:hidden;
transition:transform .3s,visibility 0s .3s
}
@media (prefers-reduced-motion:reduce) {
:is(#anats#anats,.anats.anats).anats-floating-fixed,:is(#anats#anats,.anats.anats).anats-floating-fixed.anats-floating-hidden {
transition:none
}
}
@media (width>=769px) {
:is(#anats#anats,.anats.anats).anats-floating-fixed {
--anats-floating-offset:var(--anats-floating-bottom-pc,0px)
}
:is(#anats#anats,.anats.anats) .anats-floating {
box-shadow:var(--shadow-cta);
gap:16px;
padding:14px 16px
}
:is(#anats#anats,.anats.anats) .anats-floating__lead {
align-items:center;
margin:0;
display:flex
}
:is(#anats#anats,.anats.anats) .anats-floating__lead-text {
background-color:var(--color-accent-yellow);
font-family:var(--font-jp);
white-space:nowrap;
color:var(--color-main-text);
border-radius:40px;
padding:6px 10px;
font-size:1.4rem;
font-weight:700;
line-height:2.1rem
}
:is(#anats#anats,.anats.anats) .anats-floating__tail {
flex-shrink:0;
width:12px;
height:13.856px;
margin-left:-5px;
display:block
}
:is(#anats#anats,.anats.anats) .anats-floating__list {
gap:8px
}
:is(#anats#anats,.anats.anats) .anats-floating__btn {
background-color:var(--color-white);
outline:1px solid var(--color-plan-rule);
outline-offset:-1px;
flex-direction:row;
gap:8px;
width:auto;
padding:8px 12px
}
:is(#anats#anats,.anats.anats) .anats-floating__icon {
width:24px;
height:24px
}
:is(#anats#anats,.anats.anats) .anats-floating__label {
font-size:1.6rem;
line-height:2.4rem;
transform:translateY(-1px)
}
}
:is(#anats#anats,.anats.anats) .anats-floating {
background-color:var(--color-white);
justify-content:center;
align-items:center;
width:100%;
padding:6px 0;
display:flex
}
:is(#anats#anats,.anats.anats) .anats-floating__lead {
display:none
}
:is(#anats#anats,.anats.anats) .anats-floating__list {
align-items:center;
gap:24px;
margin:0;
padding:0;
list-style:none;
display:flex
}
:is(#anats#anats,.anats.anats) .anats-floating__btn {
border-radius:4px;
flex-direction:column;
justify-content:center;
align-items:center;
width:84px;
text-decoration:none;
display:flex
}
:is(#anats#anats,.anats.anats) .anats-floating__btn:hover .anats-floating__label {
text-decoration:underline
}
:is(#anats#anats,.anats.anats) .anats-floating__btn:focus-visible {
outline:2px solid var(--color-link);
outline-offset:2px
}
:is(#anats#anats,.anats.anats) .anats-floating__icon {
flex-shrink:0;
width:36px;
height:36px;
display:block
}
:is(#anats#anats,.anats.anats) .anats-floating__label {
font-family:var(--font-jp);
white-space:nowrap;
text-align:center;
color:var(--color-corporate);
font-size:1.2rem;
font-weight:400;
line-height:1.8rem
}
:is(#anats#anats,.anats.anats).anats-floating-fixed {
--anats-floating-offset:var(--anats-floating-bottom-sp,57px);
z-index:var(--anats-floating-z,9990);
right:0;
bottom:var(--anats-floating-offset);
visibility:visible;
transition:transform .3s,visibility;
position:fixed;
left:0;
transform:translateY(0)
}
:is(#anats#anats,.anats.anats).anats-floating-fixed.anats-floating-hidden {
transform:translateY(calc(110% + var(--anats-floating-offset)));
visibility:hidden;
transition:transform .3s,visibility 0s .3s
}
@media (prefers-reduced-motion:reduce) {
:is(#anats#anats,.anats.anats).anats-floating-fixed,:is(#anats#anats,.anats.anats).anats-floating-fixed.anats-floating-hidden {
transition:none
}
}
@media (width>=769px) {
:is(#anats#anats,.anats.anats).anats-floating-fixed {
--anats-floating-offset:var(--anats-floating-bottom-pc,0px)
}
:is(#anats#anats,.anats.anats) .anats-floating {
box-shadow:var(--shadow-cta);
gap:16px;
padding:14px 16px
}
:is(#anats#anats,.anats.anats) .anats-floating__lead {
align-items:center;
margin:0;
display:flex
}
:is(#anats#anats,.anats.anats) .anats-floating__lead-text {
background-color:var(--color-accent-yellow);
font-family:var(--font-jp);
white-space:nowrap;
color:var(--color-main-text);
border-radius:40px;
padding:6px 10px;
font-size:1.4rem;
font-weight:700;
line-height:2.1rem
}
:is(#anats#anats,.anats.anats) .anats-floating__tail {
flex-shrink:0;
width:12px;
height:13.856px;
margin-left:-5px;
display:block
}
:is(#anats#anats,.anats.anats) .anats-floating__list {
gap:8px
}
:is(#anats#anats,.anats.anats) .anats-floating__btn {
background-color:var(--color-white);
outline:1px solid var(--color-plan-rule);
outline-offset:-1px;
flex-direction:row;
gap:8px;
width:auto;
padding:8px 12px
}
:is(#anats#anats,.anats.anats) .anats-floating__icon {
width:24px;
height:24px
}
:is(#anats#anats,.anats.anats) .anats-floating__label {
font-size:1.6rem;
line-height:2.4rem;
transform:translateY(-1px)
}
}
@property --tw-translate-x {
syntax:"*";
inherits:false;
initial-value:0
}
@property --tw-translate-y {
syntax:"*";
inherits:false;
initial-value:0
}
@property --tw-translate-z {
syntax:"*";
inherits:false;
initial-value:0
}
@property --tw-rotate-x {
syntax:"*";
inherits:false
}
@property --tw-rotate-y {
syntax:"*";
inherits:false
}
@property --tw-rotate-z {
syntax:"*";
inherits:false
}
@property --tw-skew-x {
syntax:"*";
inherits:false
}
@property --tw-skew-y {
syntax:"*";
inherits:false
}
@property --tw-border-style {
syntax:"*";
inherits:false;
initial-value:solid
}
@property --tw-font-weight {
syntax:"*";
inherits:false
}
@property --tw-shadow {
syntax:"*";
inherits:false;
initial-value:0 0 #0000
}
@property --tw-shadow-color {
syntax:"*";
inherits:false
}
@property --tw-shadow-alpha {
syntax:"
";
inherits:false;
initial-value:100%
}
@property --tw-inset-shadow {
syntax:"*";
inherits:false;
initial-value:0 0 #0000
}
@property --tw-inset-shadow-color {
syntax:"*";
inherits:false
}
@property --tw-inset-shadow-alpha {
syntax:"";
inherits:false;
initial-value:100%
}
@property --tw-ring-color {
syntax:"*";
inherits:false
}
@property --tw-ring-shadow {
syntax:"*";
inherits:false;
initial-value:0 0 #0000
}
@property --tw-inset-ring-color {
syntax:"*";
inherits:false
}
@property --tw-inset-ring-shadow {
syntax:"*";
inherits:false;
initial-value:0 0 #0000
}
@property --tw-ring-inset {
syntax:"*";
inherits:false
}
@property --tw-ring-offset-width {
syntax:"";
inherits:false;
initial-value:0
}
@property --tw-ring-offset-color {
syntax:"*";
inherits:false;
initial-value:#fff
}
@property --tw-ring-offset-shadow {
syntax:"*";
inherits:false;
initial-value:0 0 #0000
}
@property --tw-outline-style {
syntax:"*";
inherits:false;
initial-value:solid
}
/*
* 「海外ツアーが、タイムセール限定クーポンで割引価格に！」エリアの背景
* — ANA 海外ツアータイムセールLP
* 2026-09-24 ご指示「#area-coupon に背景画像を 100% で設定」
* 2026-09-24 ご回答「背景は画像ではなくグラデーション。グラデと、地図の半分が入るはず」
* 2026-09-24 ご回答「上のエリアとの間に CMS 側の余白は入らない」「世界地図の画像は
* 上のエリアと同じものを一緒に置く」→ **下の既定値のままで確定**
*
* ■ これは何か
* Figma の該当エリア(PC `Frame 293` = 1400x2743 / SP 同 375x4249)は、
* 見出し「海外ツアーが、タイムセール限定クーポンで割引価格に！」から
* クーポン3枚・注意事項の白箱・「期間限定価格・特典付きプラン販売中！」までを
* **1 枚の帯**で囲っています。その帯の背景を再現する CSS です
* (中身の要素には一切触れません)。
*
* ■ 背景の中身は 4 枚の重ね(ご回答「グラデと、地図の半分」のとおり)
* Figma では、このエリアは**その上のエリアと同じ入れ物の中**にあり、
* 入れ物が持っている背景(下地グラデ・水色の楕円・世界地図)が
* **このエリアの中まで続いて**います。その上にこのエリア自身の
* 半透明グラデーションが重なって、見えている色になっています。
* 下から順に:
* ① 下地グラデ #d6edff → #c8e7ff(入れ物のグラデを、この位置で切った色)
* ② 水色の楕円 #b7e0fb・2000x1600・上端はこの帯の上 741px(下半分だけが入る)
* ③ 世界地図 1930x1218 の画像・上端はこの帯の上 666px(**下半分が入る**)
* ④ 半透明グラデ 白 50% → #a4d7ff 50%(このエリア自身の塗り)
* ②③は**上のエリアから続いている絵の、はみ出したぶん**です。要素の箱で
* 自動的に切られるので、上へはみ出したぶんは表示されません。
* 結果として見えている色は、装飾の無いところで **#eaf6ff → #b6dfff** です
* (Figma の書き出しを実測した値と一致しています)。
*
* ■ 使い方 — **HTML は 1 文字も変えなくて構いません**
* `` でこのファイルを読み込むだけです:
*
* エリア全体を囲っている要素の **id が `area-coupon`** であれば、それだけで帯が出ます。
* … エリアの中身(1104px のラッパを含む) …
* 背景は**この要素の幅いっぱい**に敷かれます。画面いっぱいに出したいので、
* id は**画面幅いっぱいの要素**に付いている前提です(2026-09-24 ご回答
* 「背景画像は画面いっぱい・コンテンツ幅は 1104px」)。
* 1104px のラッパにしか id が無い場合は、下の `--full` の節を読んでください。
*
* **世界地図の画像が要ります**: `images/bg-worldmap-pc.png`
* (上のエリアの断片が使っているものと同じファイルです。配信パスは
* このファイルの `--anats-bg-map` に書いてあります)。
* 2026-09-24 ご回答「画像は上のエリアのものと同じ 1 枚を一緒に置く」— **追加の支給は不要**です。
* この CSS だけを先に入れる場合(画像がまだ無い場合)は `--anats-bg-map: none;` で
* 地図なしのグラデーションだけになります。
*
* ■ 世界地図・楕円の縦位置について(**2026-09-24 のご回答で既定値のまま確定**)
* ②③は「上のエリアの続き」なので、**上のエリアの高さ**で切れる位置が決まります。
* 既定値は、こちらが納品する上のエリア(`area-intro.html`)を 1104px 幅で
* 描いたときの高さ **1227px** から逆算した値です:
* --anats-bg-map-top: -665.57px (= 上のエリアでの地図の位置 561.43px − 1227px)
* --anats-bg-globe-top: -740.99px (= 同じく 486.01px − 1227px)
* Figma そのままの値(見出しが 36px のまま = エリア高 1251px)は
* `-689.57px` / `-764.99px` です。**見出しを 28px に統一したご指示のぶん(24px)
* だけ上のエリアが短くなる**ので、既定値は絵が途切れない方(1227px 基準)にしています。
* **2026-09-24 のご回答で「上のエリアとの間に CMS 側の余白は入らない」と確定**したため、
* この既定値のままで上のエリアの絵とぴったり繋がります(調整は不要)。
* 将来 CMS 側で間に余白が入った場合だけ、その余白のぶんだけ 2 つの値を小さく
* (例: 余白 40px なら -625.57px / -700.99px)してください。
*
* ■ 上下の余白について
* Figma はこの帯に **上下 64px(SP 48px)** の内余白を持たせています。同じ値を
* 入れてありますが、CMS 側のブロックが既に余白を持っている場合は二重になります。
* その時は `--anats-bg-pad: 0;` にしてください(背景だけが残ります)。
* 左右の余白(Figma は PC 100px)は**入れていません** — 中身の幅は貼付け先の
* 1104px ラッパが決めるためです。
*
* ■ 差し替えたいとき(どれも 1 行です)
* 写真を敷きたい → `--anats-bg-map: url('…/bg.jpg');`
* + `--anats-bg-map-size: cover;`(歪ませない)
* 世界地図をやめる → `--anats-bg-map: none;`
* 楕円をやめる → `--anats-bg-globe: none;`
* グラデだけにする → `--anats-bg-map: none; --anats-bg-globe: none;`
* 地色が白でない所へ貼る → `--anats-bg-base` を貼付け先の色に合わせる
*
* ■ 単位について
* 余白は rem です(2026-09-23 ご指示に合わせています)。
* **`html { font-size: 62.5% }`(1rem = 10px)が前提**です。
* テンプレートがこれを敷いていない場合は `--anats-bg-pad` を px で書いてください。
* 世界地図・楕円の寸法は Figma の px 値そのままです(絵の大きさなので rem にしません)。
*/
#area-coupon {
/* ① 下地。上のエリアと同じ入れ物のグラデを、この帯の範囲で切った色 */
--anats-bg-base: linear-gradient(180deg, #d6edff 0%, #c8e7ff 100%);
/* ② 水色の楕円(Figma 7301:32908 / 2000x1600 / #b7e0fb)。下端 1px だけぼかして縁のギザを消す */
--anats-bg-globe: radial-gradient(farthest-side at 50% 50%, #b7e0fb 0 calc(100% - 1px), rgba(183, 224, 251, 0) 100%);
--anats-bg-globe-size: 2000px 1600px;
--anats-bg-globe-top: -740.99px;
/* ③ 世界地図(Figma 7301:32909 / 1930x1218)。上のエリアの断片と同じ画像 */
--anats-bg-map: url(/international/theme/timesale/inttour/images/261005/bg-worldmap-pc.png);
--anats-bg-map-size: 1929.99px 1218.18px;
--anats-bg-map-top: -665.57px;
/* ④ このエリア自身の塗り(Figma 7301:33133 / 白 → #a4d7ff・不透明度 50%) */
--anats-bg-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(164, 215, 255, 0.5) 100%);
/* 帯の上下の内余白(Figma: PC 64px / SP 48px) */
--anats-bg-pad: 6.4rem;
/*
* 4 枚の重ね順・位置・大きさ。background-image は**先に書いたものが上**に来る。
* ①②③④ を 1 つの要素の背景として重ねているので、擬似要素も z-index も使わず、
* はみ出しは要素の箱で自動的に切られる(= 横スクロールも起きない)。
*/
--anats-bg-layers: var(--anats-bg-overlay), var(--anats-bg-map), var(--anats-bg-globe), var(--anats-bg-base);
--anats-bg-positions: 50% 0, 50% var(--anats-bg-map-top), 50% var(--anats-bg-globe-top), 50% 0;
--anats-bg-sizes: 100% 100%, var(--anats-bg-map-size), var(--anats-bg-globe-size), 100% 100%;
}
/*
* 詳細度は id 2 つぶん (2,0,0)。CMS 側に `#page .asw-container { background: … }` 級の
* 背景指定があっても競り勝ちます(id 1 つだと相手が id + class を持つ場合に負けます)。
*/
#area-coupon#area-coupon {
background-image: var(--anats-bg-layers);
background-position: var(--anats-bg-positions);
background-size: var(--anats-bg-sizes);
background-repeat: no-repeat;
padding-top: var(--anats-bg-pad);
padding-bottom: var(--anats-bg-pad);
}
/* ── 画面幅いっぱいにする(#area-coupon が 1104px のラッパだった場合) ──────────
* `#area-coupon` が画面幅いっぱいの要素なら**この節は不要**です(上の指定だけで
* 画面の端から端まで帯になります。2026-09-24 のご回答はこちら)。
* 1104px の箱にしか id が付いていない場合だけ、`class="anats-bg--full"` を 1 語足すか、
* **下の 3 ブロックの `.anats-bg--full` を消して `#area-coupon#area-coupon` だけにして**
* ください(HTML を触らずに全幅へ切り替わります)。
* 1104px の箱の中から左右へはみ出させて、画面の端から端まで帯を伸ばします。
* 背景は擬似要素に移し、中身は z-index で前へ出します。
*
* ※ この形は「画面幅」に vw を使います。**縦スクロールバーの幅ぶんだけ
* 横に余る**ブラウザ(Windows の既定表示など)では横スクロールバーが出ることが
* あります。その場合はページ側の一番外の要素へ `overflow-x: clip;` を 1 行
* 足すか、この `--full` を使わず**画面幅いっぱいの要素へ id を付けて**ください。
*/
#area-coupon.anats-bg--full {
position: relative;
background-image: none;
}
#area-coupon.anats-bg--full::before {
content: '';
position: absolute;
z-index: 0;
top: 0;
bottom: 0;
left: calc(50% - 50vw);
width: 100vw;
background-image: var(--anats-bg-layers);
background-position: var(--anats-bg-positions);
background-size: var(--anats-bg-sizes);
background-repeat: no-repeat;
pointer-events: none;
}
#area-coupon.anats-bg--full > * {
position: relative;
z-index: 1;
}
/* ── SP(〜768px) ─────────────────────────────────────────────────
* 本体LPと同じ 768px 境界。Figma SP の上下余白は 48px。
* **SP には楕円も世界地図も入りません** — Figma の SP では絵の下端
* (楕円 = 入れ物の上から 1059px / 地図 = 711px)がこのエリアの始まり(1847px)より
* 上で終わっていて、このエリアには**グラデーションだけ**が掛かっています(API で実確認)。
*/
@media (max-width: 768px) {
#area-coupon {
--anats-bg-pad: 4.8rem;
--anats-bg-layers: var(--anats-bg-overlay), var(--anats-bg-base);
--anats-bg-positions: 50% 0, 50% 0;
--anats-bg-sizes: 100% 100%, 100% 100%;
}
}
/* ── 当てる相手が違うとき ──────────────────────────────────────────
* エリアを囲う要素の id が `area-coupon` でない場合は、このファイルの
* `#area-coupon` を**その id へ一括置換**してください(`#area-coupon#area-coupon` の
* 2 連記も同じ id に揃えます)。id ではなく class で当てたい場合は
* `#area-coupon#area-coupon` を `.そのclass.そのclass.そのclass` にしてください
* (class 3 つで id 1 つぶんよりわずかに弱いだけなので、相手に id が無ければ勝てます)。
*/
/*
* よくある質問(アコーディオン)の Q / A アイコン — ANA 海外ツアータイムセールLP
* 2026-09-23 ご依頼「テキストの前に Q と A のアイコンを表示する CSS」
* 2026-09-24 ご回答 Q4-(b) により **`.footerlink-accordion` へ直接当てる形**へ変更
* 2026-09-24 ご依頼により **Q / A を画像(icon-q.png / icon-a.png)へ差し替え**、
* **A の基準を `.asw-text` へ移動**、**開いたときの区切り線を
* Q アイコンの下端より下から始める**ように調整
*
* ■ これは何か
* CMS 側のアコーディオン部品(`asw-accordion`)のマークアップは**一切変えずに**、
* 見出しの前に「Q」、答えの前に「A」のアイコンを CSS だけで足します。
* HTML は 1 文字も触りません(class の追加も不要です)。
*
* ■ 使い方
* このファイルを読み込むだけです。ご提示のマークアップ
*