@charset "UTF-8";

/*
このファイルの用途・使用方法
https://github.com/q-jutaku/coding_rule/blob/main/css.md#sassstylescss

各importファイルの詳細
https://github.com/q-jutaku/coding_rule/blob/main/css.md#%E5%90%84%E3%82%BB%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E8%A9%B3%E7%B4%B0
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
button,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

li,
dd {
  list-style-type: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption,
th,
td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q,
blockquote {
  quotes: none;
}

q:before,
q:after,
blockquote:before,
blockquote:after {
  content: "";
  content: none;
}

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

img {
  vertical-align: bottom;
  border: none;
}

input[type=submit],
input[type=button] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
}

input[type=submit]::-webkit-search-decoration,
input[type=button]::-webkit-search-decoration {
  display: none;
}

input[type=submit]::focus,
input[type=button]::focus {
  outline-offset: -2px;
}

/*
このファイルの用途・使用方法
https://github.com/q-jutaku/coding_rule/blob/main/css.md#variables_commonscss
*/
/*
このファイルの用途・使用方法
https://github.com/q-jutaku/coding_rule/blob/main/css.md#_fontfamilyscss-webfont1-%E3%81%AE-import%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%83%95%E3%82%A1%E3%83%9F%E3%83%AA%E3%83%BC%E5%90%8D%E3%82%92%E6%8C%87%E5%AE%9A
*/
/*
このファイルの用途・使用方法
https://github.com/q-jutaku/coding_rule/blob/main/css.md#_skinscss-%E3%82%AB%E3%83%A9%E3%83%BC%E3%82%B3%E3%83%BC%E3%83%89%E5%A4%89%E6%95%B0%E7%AD%89
*/
/*
このファイルの用途・使用方法
https://github.com/q-jutaku/coding_rule/blob/main/css.md#sassmixins
*/
/*
このファイルの用途・使用方法
https://github.com/q-jutaku/coding_rule/blob/main/css.md#mixins_responsivescss
*/
/* chrome, edge */
/*
このファイルの用途・使用方法
https://github.com/q-jutaku/coding_rule/blob/main/css.md#sassmixins
*/
/*
 +	core css
 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-family: "Zen Kaku Gothic Antique", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-feature-settings: "palt";
}

a,
button {
  transition: opacity 0.2s;
  text-decoration: none;
  cursor: pointer;
}

a:hover,
button:hover {
  opacity: 1 !important;
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.idemitsu40th-part-btn,
.idemitsu40th-right-bgDeco_navItem_link {
  display: block;
  position: relative;
  z-index: 0;
  isolation: isolate;
}

.idemitsu40th-part-btn::before,
.idemitsu40th-right-bgDeco_navItem_link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 999px;
  background-color: #8e0000;
  transform: translateY(1.0666666667vw);
  pointer-events: none;
  transition: none;
}

.idemitsu40th-part-btn::before {
  transform: translateY(calc(1 / 335 * 100%));
}

.idemitsu40th-entry_nav {
  background-color: #fff;
  padding-bottom: 36px;
}

.idemitsu40th-entry_navList_link {
  --translate-y: 3.33px;

  display: block;
  position: relative;
  z-index: 0;
  isolation: isolate;
  border-radius: 10px;

  transition: translate 120ms ease;
}

@media screen and (min-width: 768px) {
  .idemitsu40th-entry_navList_link:hover {
    opacity: 1 !important;
    translate: 0 var(--translate-y);
  }

  .idemitsu40th-entry_navList_link:hover::before {
    translate: 0 0;
  }
}

.idemitsu40th-entry_navList_link::before {
  content: '';
  background-color: #006dd8;

  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;

  transition: inherit;
  translate: 0 var(--translate-y);
}

.idemitsu40th-entry_navList_link img {
  border-radius: inherit;
}

.idemitsu40th-part-btn.mod-entryLink {
  width: 81.8%;
  margin: 5% auto 0;
}

.idemitsu40th-part-btn.mod-banner {
  width: 62.5333333333%;
}

.idemitsu40th-part-btn.mod-entry {
  width: 100%;
}

.idemitsu40th-right-bgDeco_navItem_link {
  width: 100%;
}

.idemitsu40th-right-bgDeco_navItem_link::before {
  border-radius: 1.8666666667vw;
  background-color: #1e0c00;
  transform: translateY(0.6666666667vw);
}

.idemitsu40th-right-bgDeco_navItem_link::before {
  background-color: #006dd8;
}

.idemitsu40th-right-bgDeco_navItem_link.mod-partBtn {
  border-radius: 999px;
}

.idemitsu40th-right-bgDeco_navItem_link.mod-partBtn::before {
  border-radius: 999px;
  /* background-color: #8e0000; */
  background-color: #7c140d;
  transform: translateY(1.0666666667vw);
}

html {
  scroll-behavior: smooth;
  height: auto;
}

body {
  height: auto;
  min-height: auto;
}

.idemitsu40th-wrap {
  position: relative;
}

.idemitsu40th-bg {
  display: none;
}

.idemitsu40th-pcClouds_col {
  display: none;
}

.idemitsu40th-left-bgDeco,
.idemitsu40th-right-bgDeco {
  display: none;
}

.idemitsu40th-box {
  width: 100%;
}

.idemitsu40th-kv {
  position: relative;
  width: 100%;
  background: url(../images/kv/bg.webp) no-repeat top center/cover;
}

.idemitsu40th-kv_inner {
  padding-top: 3.6%;
  padding-bottom: 1.0666666667%;
}

.idemitsu40th-kv_ttl {
  width: 90.2%;
  margin: 0 auto;
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

.idemitsu40th-kv_txt {
  width: 64.8933333333%;
  margin: -2.6666666667% auto 0;
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

.idemitsu40th-kv_subTtl {
  width: 94%;
  margin: 2.5333333333% auto 0;
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

.idemitsu40th-kv_contents {
  display: flex;
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

.idemitsu40th-kv_leftContents {
  position: relative;
  width: 50%;
  z-index: 0;
}

.idemitsu40th-kv_leftContents_deco {
  position: absolute;
  top: -9.3333333333%;
  left: 0;
  width: 100%;
  z-index: -1;
}

.idemitsu40th-kv_leftContents_ttl {
  width: 95.12%;
  margin-top: 26.4%;
}

.idemitsu40th-kv_rightContents {
  width: 50%;
}

.idemitsu40th-kv_rightContentsList {
  margin-top: -1.8666666667%;
}

.idemitsu40th-kv_rightContents_item {
  position: relative;
  width: 86.1333333333%;
  margin: 0 auto;
}

.idemitsu40th-kv_rightContents_item+.idemitsu40th-kv_rightContents_item {
  margin-top: 5.8666666667%;
}

.idemitsu40th-kv_rightContents_img {
  filter: drop-shadow(0.4vw 0.4vw 0.24vw rgba(30, 12, 0, 0.25));
}

.idemitsu40th-kv_rightContents_deco {
  position: absolute;
  bottom: -6.1919504644%;
  left: -4.9535603715%;
  width: 37.7708978328%;
  z-index: 1;
}

.idemitsu40th-kv_small {
  display: block;
  font-size: 2.4vw;
  text-align: right;
  color: #fff;
  font-weight: 400;
  line-height: 1.6666666667;
  letter-spacing: 0.05em;
  padding-right: 4.2666666667%;
  margin-top: -1.0666666667%;
}

.idemitsu40th-schedule {
  background-color: #532d13;
}

.idemitsu40th-schedule_txt {
  opacity: 0;
}


/* container-fluid */
.idemitsu40th-container-fluid {
  width: 100%;
  /* padding-inline: 5.7vw 5vw; */
  padding-inline: calc(22 / 375 * 100%) calc(20 / 375 * 100%);
}



/* entry */
.idemitsu40th-entryLink {
  background-color: #ffffed;
  padding: 4% 0 6.6666666667%;
}

.idemitsu40th-entryLink_ttl {
  display: block;
  position: relative;
  width: 44%;
  text-align: center;
  font-size: 4.2666666667vw;
  font-weight: bold;
  line-height: 1.53125;
  letter-spacing: 0em;
  color: #532d13;
  margin: 0 auto;
  opacity: 0;
}

.idemitsu40th-entryLink_ttl.add-fade+.idemitsu40th-part-btn {
  opacity: 1;
  transition: opacity 0.5s, transform 0.12s ease;
}

.idemitsu40th-entryLink_ttl+.idemitsu40th-part-btn {
  opacity: 0;
}

.idemitsu40th-entryLink_ttl::before,
.idemitsu40th-entryLink_ttl::after {
  content: "";
  position: absolute;
  top: 0%;
  width: 8.1818181818%;
  height: 4vw;
  background: url(../images/common/ttl_arrow.svg) no-repeat top center/contain;
}

.idemitsu40th-entryLink_ttl::before {
  left: 0;
  transform: translate(-112%, 30%);
}

.idemitsu40th-entryLink_ttl::after {
  right: 0;
  transform: translate(112%, 30%);
}

.idemitsu40th-entry {
  background-color: #2cc8ff;

  position: relative;
  padding-block: 2.4vw calc(36 / 335 * 100%);
  /* scroll-margin-top: 18.6666666667vw; */
  scroll-margin-top: 12cqi;
}

.idemitsu40th-entry::before {
  content: '';
  position: absolute;
  inset: 0;

  background-image: url('./../images/common/bg_pattern_01.svg');
  background-repeat: repeat;
  background-size: 10px;

  mix-blend-mode: screen;
}

.idemitsu40th-entry_inner {
  position: relative;
  z-index: 1;
}

.idemitsu40th-entry_nav {
  opacity: 0;
}

.idemitsu40th-entry_navList {
  display: flex;
  gap: 3.467%;
  justify-content: center;
}

.idemitsu40th-entry_navList_item {
  width: 28.8%;
  position: relative;
}

.idemitsu40th-entry_ttl {}

.idemitsu40th-entry_box+.idemitsu40th-entry_box {
  margin-top: calc(20 / 300 * 100%);
}

.idemitsu40th-entry_box {
  background-color: #fff;

  border-radius: 10px;
  filter: drop-shadow(0 0 2px rgba(0, 169, 167, 0.5));

  position: relative;
  z-index: 1;
  padding-block: calc(24 / 300 * 100%) calc(25 / 300 * 100%);
  padding-inline: calc(14 / 300 * 100%);
}



/* idemitsu40th-entry_chance */
.idemitsu40th-entry_chance {}

.idemitsu40th-entry_chanceTitleIcon {
  width: calc(107 / 300 * 100%);
  display: block;

  position: relative;
  left: -2px;
  margin-top: calc(-18 / 300 * 100%);
  margin-inline: auto;
}

.idemitsu40th-entry_chanceTitle {
  width: calc(288 / 300 * 100%);

  position: relative;
  left: -4px;
  margin-top: calc(10 / 300 * 100%);
  margin-inline: auto;
}

.idemitsu40th-entry_chance01 {
  margin-top: calc(17 / 300 * 100%);
}

.idemitsu40th-entry_chance01Content {
  width: calc(100% - 1px);
}

.idemitsu40th-entry_chance01Arrow {
  width: calc(227 / 300 * 100%);

  position: relative;
  top: -1px;
  left: -1px;
  margin-inline: auto;
}

.idemitsu40th-entry_chance02 {
  margin-top: calc(13 / 300 * 100%);
}

.idemitsu40th-entry_chance02Title {
  width: calc(284 / 300 * 100%);

  position: relative;
  left: -3px;
  margin-inline: auto;
}

.idemitsu40th-entry_chance02Content {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  justify-content: space-between;

  position: relative;
  left: -2px;
  margin-top: calc(5 / 300 * 100%);
  padding-right: 4px;
}

.idemitsu40th-entry_chance02Item {
  width: calc(50% - 1.5px);
}

.idemitsu40th-entry_chance02Note {
  width: calc(134 / 300 * 100%);

  margin-top: calc(6 / 300 * 100%);
  margin-inline: auto;
}

.idemitsu40th-entry_chance02More {
  margin-top: calc(-7 / 300 * 100%);
}

.idemitsu40th-entry_chance02MoreTitle {
  width: calc(289 / 300 * 100%);

  position: relative;
  margin-inline: auto;
  left: -5px;
}

.idemitsu40th-entry_chance02MoreTitle img:nth-child(2) {
  width: calc(54 / 300 * 100%);

  position: absolute;
  z-index: -1;
  top: calc(-67 / 300 * 100%);
  left: calc(-8 / 300 * 100%);
}

.idemitsu40th-entry_chance02MoreSubTitle {
  width: calc(149 / 300 * 100%);

  margin-top: 3px;
  margin-inline: auto;
}

.idemitsu40th-entry_chance02MoreLinks {
  display: flex;
  gap: calc(12 / 300 * 100%);

  margin-block: calc(29 / 300 * 100%) calc(-8 / 300 * 100%);
  padding-inline: calc(5 / 300 * 100%) calc(6 / 300 * 100%);
}

.idemitsu40th-entry_chance02MoreLink {
  --translate-y: 3px;

  width: calc(50% - calc(6 / 300 * 100%));
  position: relative;
  transition: translate 120ms ease;

  border-radius: 8px;
}

.idemitsu40th-entry_chance02MoreLink::after {
  content: '';
  background-color: #000;
  border-radius: inherit;

  position: absolute;
  z-index: -1;
  inset: 0;
  translate: 0 var(--translate-y);
  transition: inherit;
}

@media screen and (min-width: 768px) {
  .idemitsu40th-entry_chance02MoreLink:hover {
    opacity: 1 !important;
    translate: 0 var(--translate-y);
  }

  .idemitsu40th-entry_chance02MoreLink:hover::after {
    translate: 0 0;
  }
}


/* idemitsu40th-entry_step */
.idemitsu40th-entry_step {}

.idemitsu40th-entry_stepTitle {
  width: calc(262 / 300 * 100%);

  position: relative;
  left: calc(-4 / 300 * 100%);
  margin-inline: auto;
}

.idemitsu40th-entry_stepDetail {
  background-color: #d6edff;
  border-radius: 7.5967px;

  position: relative;
  margin-top: calc(22 / 300 * 100%);
  padding-block: calc(15 / 300 * 100%) calc(14 / 300 * 100%);
  padding-inline: calc(15 / 300 * 100%) calc(17 / 300 * 100%);
}

.idemitsu40th-entry_stepDetail+.idemitsu40th-entry_stepDetail {
  margin-top: calc(18 / 300 * 100%);
}

.idemitsu40th-entry_stepOrder {
  width: calc(43 / 300 * 100%);

  position: absolute;
  top: 0;
  left: calc(13 / 300 * 100%);
  translate: 0 calc(-27 / 300 * 100%);
}

.idemitsu40th-entry_stepTxt {
  width: 100%;
  max-width: 100%;
  margin-left: calc(62 / 300 * 100%);
}

.idemitsu40th-entry_stepTxt.mod-1 {
  width: calc(223 / 300 * 100%);
}

.idemitsu40th-entry_stepTxt.mod-2 {
  width: calc(240 / 300 * 100%);
}

.idemitsu40th-entry_stepTag {
  width: calc(194 / 300 * 100%);

  position: relative;
  left: 2px;
  margin-top: calc(22 / 300 * 100%);
  margin-inline: auto;
}

.idemitsu40th-entry_stepList {
  display: flex;
  gap: calc(10 / 375 * 100vw) calc(12 / 300 * 100%);
  flex-wrap: wrap;

  margin-top: calc(6 / 300 * 100%);
  padding-bottom: 3px;
}

.idemitsu40th-entry_stepItem {
  width: calc(50% - calc(6 / 300 * 100%));
  background-color: #fff;
  border-radius: 24px;

  overflow: hidden;
}

.idemitsu40th-entry_arrow {
  width: calc(62 / 300 * 100%);

  position: relative;
  left: -2px;
  margin-top: calc(11 / 300 * 100%);
  margin-inline: auto;
}

.idemitsu40th-entry_condition {
  background-color: #fffa34;
  border-radius: 10px;

  display: flex;
  gap: 10px;
  align-items: center;
  flex-direction: column;

  position: relative;
  margin-block: calc(8 / 300 * 100%) -2px;
  padding-block: calc(14 / 300 * 100%) calc(15 / 300 * 100%);

}

.idemitsu40th-entry_conditionShape {
  width: calc(61 / 300 * 100%);

  position: absolute;
  top: calc(-55 / 300 * 100%);
  right: 0;
}

.idemitsu40th-entry_conditionTitle {
  width: calc(180 / 300 * 100%);
}

.idemitsu40th-entry_conditionTxt {
  width: calc(241 / 300 * 100%);

  position: relative;
  left: -3px;
  margin-top: -2px;
}



/* idemitsu40th-course */
.idemitsu40th-course {
  background-color: #fffb87;

  position: relative;
  scroll-margin-top: 13.3333333333vw;
}

.idemitsu40th-course::before {
  content: '';
  position: absolute;
  inset: 0;

  background-image: url('./../images/common/bg_pattern_02.svg');
  background-repeat: repeat;
  background-size: 29px 29px;

  mix-blend-mode: multiply;
  opacity: 0.05;
}

.idemitsu40th-course_inner {
  position: relative;
  z-index: 1;
  padding-top: 4.467%;
  padding-bottom: 11%;
}

.idemitsu40th-course_whitebox {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 2px 0 rgba(173, 146, 0, 0.5);

  margin-top: calc(8 / 300 * 100%);
  margin-inline: auto;
  padding-block: calc(28 / 300 * 100%) calc(25 / 300 * 100%);
  padding-inline: calc(26 / 300 * 100%);
}

.idemitsu40th-course_giving {
  margin-top: calc(20 / 300 * 100%);
}

.idemitsu40th-course_givingCount {
  width: calc(149 / 300 * 100%);

  position: relative;
  left: -5px;
  margin-top: calc(24 / 300 * 100%);
  margin-inline: auto;
}

.idemitsu40th-course_slider {
  overflow: hidden;

  position: relative;
  margin-top: calc(19 / 300 * 100%);
  padding-block: calc(10 / 300 * 100%);
  margin-inline: calc(-28 / 375 * 100vw);
}

@media screen and (min-width: 768px) {
  .idemitsu40th-course_slider {
    margin-inline: clamp(-42px, -50 / 1440 * 100vw, -26px);
    margin-inline: clamp(-42px, (1024px - 100vw) * 1000, -40 / 1024 * 100vw);
    ;
  }
}

.idemitsu40th-course_slider .slick-list {
  width: 100%;
  overflow: visible;
}

.idemitsu40th-course_sliderBoard {
  width: calc(233 / 300 * 100%);

  display: flex;

  left: -1px;
  margin-inline: auto;
}

.idemitsu40th-course_sliderPhoto {
  width: 100%;
  aspect-ratio: calc(232/ 170);
  filter: drop-shadow(0 0 3px rgba(68, 17, 3, 0.3));

  margin-inline: 6px;
  border-radius: 10px;
  overflow: hidden;
}

.idemitsu40th-course_sliderPhoto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.idemitsu40th-course_sliderArrows {
  width: calc(90% + 2px);
  height: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;

  position: absolute;
  top: 50%;
  left: calc(50% - 2px);

  translate: -50% -3px;
}

.idemitsu40th-course_sliderArrowPrev,
.idemitsu40th-course_sliderArrowNext {
  width: calc(40 / 300 * 100%);
  filter: drop-shadow(1px 1px 3px rgba(47, 32, 27, 0.6));
  transition: opacity 120ms ease;
  cursor: pointer;
}

@media screen and (min-width: 768px) {

  .idemitsu40th-course_sliderArrowPrev:hover,
  .idemitsu40th-course_sliderArrowNext:hover {
    opacity: 0.8;
  }
}

.idemitsu40th-course_sliderArrowPrev {
  scale: -1 1;
}

.idemitsu40th-course_leading {
  width: calc(100% - 6px);
  margin-top: calc(14 / 300 * 100%);
}

.idemitsu40th-course_note {
  width: calc(110.8462 / 300 * 100%);
  margin-top: calc(14 / 300 * 100%);
  margin-inline: auto;
}

.idemitsu40th-course_infoArea {
  background-color: #ffec00;
  border-radius: 6px;

  position: relative;
  margin-top: calc(30 / 300 * 100%);
  margin-inline: calc(-8 / 300 * 100%);
  padding-block: calc(11 / 300 * 100%) calc(10 / 300 * 100%);
  padding-inline: calc(20 / 300 * 100%) calc(20 / 300 * 100%);
}

.idemitsu40th-course_infoIcon {
  width: calc(39 / 300 * 100%);

  position: absolute;
  top: 0;
  left: 0;
  translate: calc(-80 / 300 * 100%) calc(-64 / 300 * 100%);
}

.idemitsu40th-course_infoTitle {
  width: calc(180 / 300 * 100%);
  margin-left: calc(19 / 300 * 100%);
}

.idemitsu40th-course_infoTxt {
  width: 97%;

  margin-top: calc(14 / 300 * 100%);
  margin-left: 2%;
}

.idemitsu40th-course_infoLink {
  width: calc(130 / 300 * 100%);
  display: flex;
  border-bottom: 1px solid #808080;

  position: relative;
  right: -2px;
  margin-top: 4px;
  margin-left: auto;
  padding: 2px 2px;
}

@media screen and (min-width: 768px) {
  .idemitsu40th-course_infoLink {
    transition: border-color 120ms ease;
  }

  .idemitsu40th-course_infoLink:hover {
    opacity: 1 !important;
    border-bottom-color: #0000;
  }
}

/*  */
.idemitsu40th-flag-heading {
  width: calc(280 / 335 * 100%);

  position: relative;
  z-index: 1;
  left: 1px;
  margin-inline: auto;
  margin-bottom: calc(-26 / 335 * 100%);
}

.idemitsu40th-flag-heading+* {
  position: relative;
  z-index: 2;
}

.idemitsu40th-step {
  background-color: #aeede4;

  position: relative;
  z-index: 0;
  padding-block: calc(13 / 300 * 100%) calc(28 / 300 * 100%);

  scroll-margin-top: 22.6666666667vw;
}

.idemitsu40th-step::after {
  content: '';

  background-image: url('./../images/common/bg_pattern_01.svg');
  background-size: 10px;
  background-repeat: repeat;

  position: absolute;
  z-index: 0;
  inset: 0;
  mix-blend-mode: screen;
}

.idemitsu40th-step_inner {}

.idemitsu40th-step_box {
  background-color: #fff;

  border-radius: 10px;
  filter: drop-shadow(0 0 2px rgba(0, 169, 167, 0.5));

  position: relative;
  z-index: 1;
  margin-top: calc(7 / 300 * 100%);
  margin-inline: auto;
  padding-block: calc(30 / 300 * 100%) calc(28 / 300 * 100%);
  padding-inline: calc(20 / 300 * 100%);
}

.idemitsu40th-step_ttl {
  width: calc(220 / 300 * 100%);
  margin-inline: auto;
}

.idemitsu40th-step_list {
  margin-top: 7%;
}

.idemitsu40th-step_item {
  background-color: #dceaec;

  position: relative;
  padding: 5.4% 5% 8%;
}

.idemitsu40th-step_item+.idemitsu40th-step_item {
  margin-top: 6.4%;
}

.idemitsu40th-step_item.mod-2 {
  padding-bottom: 6.4%;
}

.idemitsu40th-step_num {
  width: 14.7%;
  position: absolute;
  top: -4%;
  left: 4.6%;
}

.idemitsu40th-step_itemTtl {
  font-size: 4.8vw;
  font-weight: bold;
  line-height: 1.18;
  letter-spacing: -0.03em;
  color: #3c3c3c;

  margin-left: 18.5%;
}

.idemitsu40th-step_txt {
  font-size: 3.2vw;
  font-weight: 400;
  line-height: 1.7125;
  letter-spacing: -0.02em;
  text-align: justify;
  color: #3c3c3c !important;

  margin-top: 5%;
}

.idemitsu40th-step_link {
  --translate-y: 3.3349px;
  width: calc(303 / 300 * 100%);
  max-width: 100%;
  border-radius: 999px;
  display: block;

  position: relative;
  margin-top: calc(14 / 300 * 100%);
  margin-inline: auto;

  transition: translate 120ms ease;
}

.idemitsu40th-step_link::before {
  content: '';
  background-color: #7c140d;
  border-radius: inherit;

  position: absolute;
  z-index: -1;
  inset: 0;
  translate: 0 var(--translate-y);

  transition: inherit;
}

@media screen and (min-width: 768px) {
  .idemitsu40th-step_link:hover {
    opacity: 1 !important;
    translate: 0 var(--translate-y);
  }

  .idemitsu40th-step_link:hover::before {
    translate: 0 0;
  }
}

.idemitsu40th-step_infoList {
  position: relative;
  margin-top: 4.347826087%;
  background-color: #fbe5e5;
  padding: 5.7971014493% 4.2028985507% 4.347826087% 5.0724637681%;
}

.idemitsu40th-step_infoList:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 0.5797101449vw;
  background: url(../images/common/step_dot.svg) no-repeat top center/contain;
}

.idemitsu40th-step_infoItem+.idemitsu40th-step_infoItem {
  margin-top: 0.5797101449%;
}

.idemitsu40th-step_infoTtl {
  display: inline-flex;
  align-items: center;
  grid-gap: 1.9083969466%;
  gap: 1.9083969466%;
  color: #d70000;
  font-size: 4vw;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.idemitsu40th-step_infoTtl::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 8.1106870229%;
  height: 2.6266666667vw;
  background: url(../images/common/step_ttl_arrow.svg) no-repeat top center/contain;
}

.idemitsu40th-step_infoTxt {
  color: #3c3c3c !important;
  font-size: 3.7333333333vw;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.06em;
}

.idemitsu40th-info {
  background-color: #ffffed;

  position: relative;
  padding-block: 13.3% 34%;
  scroll-margin-top: 13.3333333333vw;
}

.idemitsu40th-info_inner {}

.idemitsu40th-info_term {
  background-color: #d70000;
  border-radius: 999px;

  font-size: 4.8vw;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0em;
  text-align: center;
  color: #fff;

  padding-block: 3% 3.5%;
}

.idemitsu40th-info_item {
  padding-left: 3px;
}

.idemitsu40th-info_item.mod-1 .idemitsu40th-info_detailList {
  margin-top: 3.3%;
}

.idemitsu40th-info_item.mod-1 .idemitsu40th-info_detailItem {
  font-size: 4vw;
  font-weight: 600;
  line-height: 1.638;
  letter-spacing: 0.03em;
  color: #3c3c3c;
}

.idemitsu40th-info_item.mod-2 {
  margin-top: 8.4%;
}

.idemitsu40th-info_item.mod-2 .idemitsu40th-info_time {
  display: block;
  margin-top: 6.267%;
}

.idemitsu40th-info_item.mod-2 .idemitsu40th-info_txt {
  width: 85%;
  margin-top: 2.3%;
  margin-inline: auto;
}

.idemitsu40th-info_item.mod-3 {
  margin-top: 7.6%;
}

.idemitsu40th-info_item.mod-2 .idemitsu40th-info_smallList {
  width: 95%;
  margin: 2.8% auto 0;
}

.idemitsu40th-info_item.mod-3 .idemitsu40th-info_smallList {
  width: 95%;
  margin: 4.8% auto 0;

  display: flex;
  gap: 7px;
  flex-direction: column;
}

.idemitsu40th-info_item.mod-2 .idemitsu40th-info_smallTxt,
.idemitsu40th-info_item.mod-3 .idemitsu40th-info_smallTxt {
  display: block;

  font-size: 3.2vw;
  font-weight: 400;
  line-height: 1.7142857143;
  letter-spacing: 0em;
  text-align: justify;
  color: #3c3c3c;

  text-indent: -1em;
  padding-left: 1em;
}

.idemitsu40th-info_item.mod-3 .idemitsu40th-info_smallTxt {
  line-height: 1.51;
  letter-spacing: -0.11em;
}

.idemitsu40th-info_item.mod-2 .idemitsu40th-info_smallTxt::before,
.idemitsu40th-info_item.mod-3 .idemitsu40th-info_smallTxt::before {
  content: "※";
  margin-right: 0%;
}

.idemitsu40th-info_detailItem {
  line-height: 1.64;

  position: relative;
  padding-left: 0.7rem;
}

.idemitsu40th-info_detailItem::before {
  content: "●";
  line-height: 1;
  margin-right: 0.3em;
}

.idemitsu40th-info_smallLink {
  text-decoration: underline;
}

.idemitsu40th-banner {
  position: fixed;
  right: 0;
  bottom: var(--idemitsu40th-banner-bottom, 0px);
  left: 0;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  width: 100%;
  padding: 2.5333333333% 0 2.9333333333%;
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.idemitsu40th-banner.add-show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.idemitsu40th-banner_inner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.idemitsu40th-pageTop {
  position: fixed;
  right: 2.4%;
  bottom: var(--idemitsu40th-page-top-bottom, 16px);
  z-index: 20;
  width: 11.2%;
  opacity: 1;
  visibility: visible;
  cursor: pointer;
}

.idemitsu40th-main> :not(.idemitsu40th-kv) .js-observe,
.idemitsu40th-main> :not(.idemitsu40th-kv).js-observe {
  opacity: 0;
  transform: translate3d(0, 1.25rem, 0);
}

.idemitsu40th-main> :not(.idemitsu40th-kv) .js-observe.add-fade,
.idemitsu40th-main> :not(.idemitsu40th-kv).js-observe.add-fade {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.add-fade {
  opacity: 1;
  transition: opacity 0.5s;
}

/*
https://github.com/q-jutaku/coding_rule/blob/main/css.md#sass_utilscss
*/
.util-pc {
  display: none;
}

.util-sp {
  display: block;
}

@media screen and (min-width: 768px) {

  a:hover,
  button:hover {
    opacity: 0.7 !important;
  }

  .idemitsu40th-part-btn,
  .idemitsu40th-right-bgDeco_navItem_link {
    transition: transform 0.12s ease;
  }

  .idemitsu40th-part-btn::before,
  .idemitsu40th-right-bgDeco_navItem_link::before {
    transform: translateY(5.328px);
    transition: transform 0.12s ease;
  }

  .idemitsu40th-part-btn:hover,
  .idemitsu40th-right-bgDeco_navItem_link:hover {
    opacity: 1 !important;
    transform: translateY(5.328px);
  }

  .idemitsu40th-part-btn:hover::before,
  .idemitsu40th-right-bgDeco_navItem_link:hover::before {
    transform: translateY(0);
  }

  .idemitsu40th-right-bgDeco_navItem_link,
  .idemitsu40th-right-bgDeco_navItem_link::before {
    border-radius: 9.324px;
  }

  .idemitsu40th-right-bgDeco_navItem_link::before {
    transform: translateY(3.33px);
  }

  .idemitsu40th-right-bgDeco_navItem_link:hover {
    transform: translateY(3.33px);
  }

  .idemitsu40th-right-bgDeco_navItem_link:hover::before {
    transform: translateY(0);
  }

  .idemitsu40th-right-bgDeco_navItem_link.mod-partBtn,
  .idemitsu40th-right-bgDeco_navItem_link.mod-partBtn::before {
    border-radius: 999px;
  }

  .idemitsu40th-right-bgDeco_navItem_link.mod-partBtn::before {
    transform: translateY(5.328px);
  }

  .idemitsu40th-right-bgDeco_navItem_link.mod-partBtn:hover {
    opacity: 1 !important;
    transform: translateY(5.328px);
  }

  .idemitsu40th-right-bgDeco_navItem_link.mod-partBtn:hover::before {
    transform: translateY(0);
  }

  .idemitsu40th-bg {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .idemitsu40th-bg img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: auto;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center;
    max-width: none;
  }

  .idemitsu40th-pcClouds_col {
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 0;
    width: calc(50% - 20vw);
    overflow: visible;
    pointer-events: none;
    transform: scale(min(1, calc(100vw / 1200px), calc(100vh / 900px)));
    transform-origin: center center;
  }

  .idemitsu40th-pcClouds_col.mod-left {
    left: 0;
  }

  .idemitsu40th-pcClouds_col.mod-right {
    right: 0;
  }

  .idemitsu40th-left-bgDeco,
  .idemitsu40th-right-bgDeco {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 0;
    width: calc(50% - 20vw);
    overflow: visible;
    /* transform: scale(min(1, calc(100vw / 1200px), calc(100vh / 900px))); */
    transform-origin: center center;
  }

  .idemitsu40th-left-bgDeco {
    left: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    height: 100%;
    min-height: 0;
    padding: 22.5vh 0 12.8vh;
  }

  .idemitsu40th-right-bgDeco {
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    height: 100%;
    min-height: 0;
    padding: 22.2vh 0 9.5vh;
  }

  .idemitsu40th-left-bgDeco_logo {
    position: relative;
    flex-shrink: 0;
    z-index: 0;
    max-width: 352px;
    width: calc(25.1428571429vw);
    margin-top: calc(-2.7857142857vw);
    text-align: center;
  }

  .idemitsu40th-left-bgDeco_logo>img {
    opacity: 1;
    transition: opacity 0.55s ease-out;
  }

  .idemitsu40th-left-bgDeco_illust {
    width: calc(382.8192 / 1920 * 100vw);
    max-width: 382.8192px;

    position: relative;
    flex-shrink: 0;
    z-index: 0;
    margin-top: calc(86 / 1920 * 100vw);
    margin-left: calc(10 / 1920 * 100vw);
    text-align: center;
    opacity: 1;
    transition: opacity 0.55s ease-out;
    transition-delay: 0.42s;
  }

  .idemitsu40th-right-bgDeco_navList {
    position: relative;
    flex-shrink: 0;
    z-index: 0;
    max-width: 250px;
    width: calc(17.8571428571vw);
    margin-top: calc(-2.6428571429vw);
  }

  .idemitsu40th-right-bgDeco_navItem {
    width: 100%;
    text-align: center;
    opacity: 1;
    transition: opacity 0.55s ease-out;
  }

  .idemitsu40th-right-bgDeco_navItem+.idemitsu40th-right-bgDeco_navItem {
    /* margin-top: calc(1.6428571429vw); */
    margin-top: calc(1.242857vw);
  }

  .idemitsu40th-right-bgDeco_illust {
    width: calc(385.4772 / 1920 * 100vw);
    max-width: 385.4772px;
    position: relative;
    flex-shrink: 0;
    z-index: 0;
    text-align: center;
    margin-top: calc(85 / 1920 * 100vw);
    margin-left: calc(-3 / 1920 * 100vw);
    opacity: 1;
    transition: opacity 0.55s ease-out;
    transition-delay: 0.42s;
  }

  @starting-style {

    .idemitsu40th-left-bgDeco_logo>img,
    .idemitsu40th-right-bgDeco_navItem,
    .idemitsu40th-left-bgDeco_illust,
    .idemitsu40th-right-bgDeco_illust {
      opacity: 0;
    }
  }

  .idemitsu40th-bgLeftCloud,
  .idemitsu40th-bgRightCloud {
    position: absolute;
    z-index: -1;
    pointer-events: none;
    opacity: 1;
  }

  .idemitsu40th-bgLeftCloud.mod-1 {
    max-width: 379px;
    width: calc(27.0714285714vw * 0.592);
    left: calc(-17.2857142857vw * 0.592);
    top: calc(-4.9285714286vw * 0.592);
  }

  .idemitsu40th-bgLeftCloud.mod-2 {
    max-width: 379px;
    right: calc(-16.7142857143vw * 0.592);
    top: calc(17vw * 0.592);
    width: calc(27.0714285714vw * 0.592);
  }

  .idemitsu40th-bgRightCloud.mod-1 {
    max-width: 330px;
    width: calc(23.5714285714vw * 0.592);
    left: calc(-18.5714285714vw * 0.592);
    top: calc(-3.5714285714vw * 0.592);
  }

  .idemitsu40th-bgRightCloud.mod-2 {
    max-width: 501px;
    right: calc(-33.4285714286vw * 0.592);
    top: calc(7.5714285714vw * 0.592);
    width: calc(35.7857142857vw * 0.592);
  }

  .idemitsu40th-box {
    position: relative;
    z-index: 1;
    width: 40vw;
    margin: 0 auto;
  }

  .idemitsu40th-main {
    container-name: idemitsu40th;
    container-type: inline-size;
  }

  .idemitsu40th-kv_rightContents_img {
    filter: drop-shadow(0.3996cqi 0.3996cqi 0.23976cqi rgba(30, 12, 0, 0.25));
  }

  .idemitsu40th-kv_small {
    font-size: 2.3976cqi;
  }

  .idemitsu40th-entryLink_ttl {
    font-size: 4.2624cqi;
  }

  .idemitsu40th-entryLink_ttl::before,
  .idemitsu40th-entryLink_ttl::after {
    height: 3.996cqi;
  }

  .idemitsu40th-course {
    scroll-margin-top: 12cqi;
  }

  .idemitsu40th-course_ttl {
    font-size: 5.035cqi;
    line-height: 9.0576cqi;
    height: 9.0576cqi;
  }

  .idemitsu40th-step {
    scroll-margin-top: 12cqi;
  }


  .idemitsu40th-step_item {
    border-width: 0.7992cqi;
  }

  .idemitsu40th-step_itemTtl {
    font-size: 4.7952cqi;
  }

  .idemitsu40th-step_txt {
    font-size: 3.7296cqi;
  }

  .idemitsu40th-step_infoList:before {
    height: 0.5328cqi;
  }

  .idemitsu40th-step_infoTtl {
    font-size: 3.996cqi;
  }

  .idemitsu40th-step_infoTtl::before {
    height: 2.624cqi;
  }

  .idemitsu40th-step_infoTxt {
    font-size: 3.7296cqi;
  }

  .idemitsu40th-info {
    scroll-margin-top: 13.32cqi;
  }

  .idemitsu40th-info_term {
    font-size: 4.7952cqi;
  }

  .idemitsu40th-info_item.mod-1 .idemitsu40th-info_detailItem {
    font-size: 3.7296cqi;
  }

  .idemitsu40th-info_item.mod-2 .idemitsu40th-info_smallTxt,
  .idemitsu40th-info_item.mod-3 .idemitsu40th-info_smallTxt {
    font-size: 3.7296cqi;
    text-indent: -1em;
    padding-left: 1em;
    letter-spacing: 0;
  }

  .idemitsu40th-info_detailItem {
    text-indent: -1.5rem;
    padding-left: 1.5rem;
  }

  .idemitsu40th-info_detailItem::before {
    font-size: 2.664cqi;
  }

  .idemitsu40th-banner {
    margin: 0 auto;
    max-width: 40vw;
    padding: 1.01232vw 0 1.17216vw;
  }

  .idemitsu40th-pageTop {
    width: 3.4375vw;
    min-width: 40px;
    right: 3.2856vw;
    bottom: var(--idemitsu40th-page-top-bottom, 24.642px);
  }

  .util-pc {
    display: block;
  }

  .util-sp {
    display: none;
  }
}

@media screen and (min-width: 768px) and (min-width: 768px) and (max-width: 1100px) {
  .idemitsu40th-pcClouds_col {
    width: calc(50% - 25vw);
  }

  .idemitsu40th-left-bgDeco,
  .idemitsu40th-right-bgDeco {
    width: calc(50% - 25vw);
  }
}

@media screen and (max-width: 1100px),
screen and (max-height: 400px) {
  .idemitsu40th-left-bgDeco_logo>img {
    display: none;
  }

  .idemitsu40th-left-bgDeco_illust {
    display: none;
  }

  .idemitsu40th-right-bgDeco {
    display: none;
  }

  .idemitsu40th-bgLeftCloud,
  .idemitsu40th-bgRightCloud {
    display: none;
  }

  .idemitsu40th-pcClouds_col {
    display: none;
  }
}

@media screen and (prefers-reduced-motion: reduce) and (min-width: 768px) {

  .idemitsu40th-left-bgDeco_logo>img,
  .idemitsu40th-right-bgDeco_navItem,
  .idemitsu40th-left-bgDeco_illust,
  .idemitsu40th-right-bgDeco_illust {
    opacity: 1;
    transition: none;
  }
}

@media screen and (min-width: 768px) and (max-width: 1100px) {
  .idemitsu40th-box {
    width: 50vw;
  }

  .idemitsu40th-banner {
    max-width: 50vw;
    padding-top: 1.2654vw;
    padding-bottom: 1.4652vw;
  }
}

@media (prefers-reduced-motion: reduce) {

  .idemitsu40th-main> :not(.idemitsu40th-kv) .js-observe,
  .idemitsu40th-main> :not(.idemitsu40th-kv).js-observe {
    transform: none;
  }

  .idemitsu40th-main> :not(.idemitsu40th-kv) .js-observe.add-fade,
  .idemitsu40th-main> :not(.idemitsu40th-kv).js-observe.add-fade {
    transform: none;
    transition: opacity 0.35s ease;
  }

  .idemitsu40th-kv_ttl,
  .idemitsu40th-kv_txt,
  .idemitsu40th-kv_subTtl,
  .idemitsu40th-kv_contents {
    opacity: 1;
    transition: none;
  }
}

@media print {
  html {
    zoom: 0.8;
  }
}



/* MV */
.idemitsu40th-kv_purpose {
  width: calc(110.8486 / 375 * 100vw);
  top: calc(8 / 375 * 100vw);
  right: calc(8 / 375 * 100vw);
}

@media screen and (min-width: 768px) {
  .idemitsu40th-kv_purpose {
    width: calc(181.3887 / 1920 * 100vw);
    max-width: 181.3887px;
    top: calc(19 / 1920 * 100vw);
    right: calc(19 / 1920 * 100vw);
  }
}

.idemitsu40th-kv_content {
  width: 100%;
  overflow: hidden;
  position: relative;

  z-index: 1;
  background-color: #2cc8ff;
}

.idemitsu40th-kv_img {
  position: absolute;
}

.idemitsu40th-mv {
  width: 100%;
  overflow: hidden;
}

.idemitsu40th-mv_decor {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.idemitsu40th-mv_animation {
  width: 100%;
  min-height: 537px;

  position: relative;
  padding-top: 143.3vw;
}

.idemitsu40th-kv_tag {
  left: 2.9%;
  top: 1.1%;
  width: calc(162 / 375 * 100%);
}

.idemitsu40th-kv_question {
  width: calc(170 / 375 * 100%);
  /* right: 12.6%; */
  right: calc(14% - clamp(0rem, 11.236vw + -3.5112rem, 1.875rem));
  top: 27px;
  top: calc(20 / 375 * 100%);
}

.idemitsu40th-kv_circle01 {
  left: 7.4%;
  top: 12.7%;
  width: calc(92 / 375 * 100%);

}

.idemitsu40th-kv_circle02 {
  width: calc(99 / 375 * 100%);
  left: 4.8%;
  top: 38.1%;
}

.idemitsu40th-kv_circle03 {
  width: calc(162 / 375 * 100%);
  right: -13.4%;
  top: 39.9%;
}

.idemitsu40th-kv_circle04 {
  width: calc(151 / 375 * 100%);

  top: 57.8%;
  left: -6.5%;
  z-index: 1;
}

.idemitsu40th-kv_circle05 {
  width: calc(109 / 375 * 100%);

  top: 67.2%;
  right: 2%;
  z-index: 1;
}

.idemitsu40th-kv_banner {
  width: calc(308 / 375 * 100%);
  left: 52.9%;
  top: 23.3%;
  transform: translateX(-50%);
  max-width: 308px;
}

.idemitsu40th-kv_promotion {
  width: calc(168 / 375 * 100%);
  left: 50.7%;
  bottom: 45.4%;
  transform: translateX(-50%);
}

.idemitsu40th-kv_cloud01 {
  width: calc(75 / 375 * 100%);
  right: -6.1%;
  top: 16.8%;
}

.idemitsu40th-kv_cloud02 {
  width: 79.2%;
  left: 48.7%;
  bottom: 4.7%;
  transform: translateX(-50%);
  z-index: -1;
}

.idemitsu40th-kv_duration {
  margin-left: -10px;
  margin-right: -10px;
}

.idemitsu40th-champ {
  background-color: #fff;
  padding-bottom: 37px;
}

.idemitsu40th-champ_txt {
  max-width: 688px;
  margin: 0 auto;
  position: relative;
  width: 90%;
  left: 4px;
  padding: 12px 0 0;
}

.idemitsu40th-champ_btn {
  width: 82%;
  max-width: 630px;
  margin: 20px auto 0;
}



@media screen and (min-width: 768px) {
  .idemitsu40th-kv_content {
    height: auto;

  }

  .idemitsu40th-kv_tag {
    left: 2.6%;
    top: 0.8%;
    width: 17.3vw;
  }

  .idemitsu40th-kv_question {
    right: 12.6%;
    top: 54px;
    width: 18.2vw;
  }

  .idemitsu40th-kv_circle01 {
    left: 7%;
    top: 12.3%;
    width: 100%;
    max-width: 9.9vw;
    min-width: 130px;
  }

  .idemitsu40th-kv_circle02 {
    width: 100%;
    max-width: 10.7vw;
    min-width: 120px;
    top: 37.8%;
    left: 4.6%;
  }

  .idemitsu40th-kv_circle03 {
    max-width: 17.3vw;
    min-width: 170px;
    top: 39.9%;
    width: 44%;
  }

  .idemitsu40th-kv_circle04 {
    max-width: 16.3vw;
    min-width: 170px;
    top: 57.7%;
    left: -7%;
    width: 41%;
  }

  .idemitsu40th-kv_circle05 {
    width: 100%;
    max-width: 11.7vw;
    min-width: 130px;
    top: 67.4%;
  }

  .idemitsu40th-kv_banner {
    max-width: 33.1vw;
    left: 52.7%;
    top: 23.1%;
    width: 90%;
  }

  .idemitsu40th-kv_cloud01 {
    right: -5.9%;
    top: 16.7%;
    max-width: 7.9vw;
    width: 20%;
  }

  .idemitsu40th-kv_cloud02 {
    left: 48.7%;
    bottom: max(63px, 3.3vw);
    max-width: 31vw;

  }

  .idemitsu40th-kv_promotion {
    width: 46%;
    bottom: 11.5vw;
  }

  .idemitsu40th-mv_animation {
    padding-top: 57.1vw;
    min-height: 686px;
  }

  .idemitsu40th-kv_duration {}

  .idemitsu40th-champ {}

  .idemitsu40th-champ_txt {
    left: 7px;
    padding: 26px 0;
  }

  .idemitsu40th-champ_btn {}
}

/* animation */
.idemitsu40th-mv_animation {
  --bbox-width: 770;
  --bbox-height: 300;
  --screen: 375;

  --flower-duration: 6s;
  --tree-duration: 30s;
}

@media screen and (min-width: 768px) {
  .idemitsu40th-mv_animation {
    --screen: 1920;
  }
}

.idemitsu40th-mv_animation-wrap {
  width: 100%;
  width: round(100%, 2px);
  aspect-ratio: calc(var(--bbox-width) / var(--bbox-height));

  position: absolute;
  left: 0;
  bottom: 0;

  /* overflow: hidden; */
}

.idemitsu40th-mv_animation-tree {
  --bbox-org-left: 20;
  --bbox-org-bottom: 1600;

  position: absolute;
  inset: 0;
}

@media screen and (min-width: 768px) {
  .idemitsu40th-mv_animation-tree {
    --bbox-org-left: 30;
    --bbox-org-bottom: 3100;
  }
}

.idemitsu40th-mv_animation-tree img {
  --tree-width: 67.4853;
  --tree-bottom: 0;
  --tree-neg: 0;

  width: calc(var(--tree-width) / var(--screen) * 100vw);
  min-width: calc(var(--tree-width) * 0.5px);

  position: absolute;
  left: 50%;
  bottom: calc(var(--tree-bottom) / var(--bbox-width) * 100%);
  translate: -50% 0;

  transform-origin: calc(var(--bbox-org-left) / var(--screen) * 100vw) calc(var(--bbox-org-bottom) / var(--screen) * 50vw);
  animation: tree_run var(--tree-duration) linear calc(var(--tree-duration) * var(--tree-neg)) infinite both;
  /* animation-play-state: paused; */
}


.idemitsu40th-mv_animation-tree_back img:nth-child(5),
.idemitsu40th-mv_animation-tree_back img:nth-child(1) {
  --tree-width: 37.3154;
  --tree-bottom: 490;
}

@media screen and (min-width: 768px) {

  .idemitsu40th-mv_animation-tree_back img:nth-child(5),
  .idemitsu40th-mv_animation-tree_back img:nth-child(1) {
    --tree-width: 67.4853;
  }
}

.idemitsu40th-mv_animation-tree_back img:nth-child(1) {
  --tree-neg: -0.362;
}

@media screen and (min-width: 768px) {
  .idemitsu40th-mv_animation-tree_back img:nth-child(1) {
    --tree-neg: -0.365;
  }
}

.idemitsu40th-mv_animation-tree_back img:nth-child(5) {
  --tree-neg: -0.92;
}

@media screen and (min-width: 768px) {
  .idemitsu40th-mv_animation-tree_back img:nth-child(5) {
    --tree-neg: -0.88;
  }
}

.idemitsu40th-mv_animation-tree_back img:nth-child(6),
.idemitsu40th-mv_animation-tree_back img:nth-child(2) {
  --tree-width: 33.1007;
  --tree-bottom: 493;
}

@media screen and (min-width: 768px) {

  .idemitsu40th-mv_animation-tree_back img:nth-child(6),
  .idemitsu40th-mv_animation-tree_back img:nth-child(2) {
    --tree-width: 67.9068;
  }
}

.idemitsu40th-mv_animation-tree_back img:nth-child(2) {
  --tree-neg: -0.468;
}

@media screen and (min-width: 768px) {
  .idemitsu40th-mv_animation-tree_back img:nth-child(2) {
    --tree-neg: -0.467;
  }
}

.idemitsu40th-mv_animation-tree_back img:nth-child(6) {
  --tree-neg: -0.1;
}

@media screen and (min-width: 768px) {
  .idemitsu40th-mv_animation-tree_back img:nth-child(6) {
    --tree-neg: -0.99;
  }
}

.idemitsu40th-mv_animation-tree_back img:nth-child(7),
.idemitsu40th-mv_animation-tree_back img:nth-child(3) {
  --tree-width: 29.9134;
  --tree-bottom: 503;
}

@media screen and (min-width: 768px) {

  .idemitsu40th-mv_animation-tree_back img:nth-child(7),
  .idemitsu40th-mv_animation-tree_back img:nth-child(3) {
    --tree-width: 61.3679;
  }
}

.idemitsu40th-mv_animation-tree_back img:nth-child(3) {
  --tree-neg: -0.546;
}

@media screen and (min-width: 768px) {
  .idemitsu40th-mv_animation-tree_back img:nth-child(3) {
    --tree-neg: -0.554;
  }
}

.idemitsu40th-mv_animation-tree_back img:nth-child(7) {
  --tree-neg: -0.18;
}

@media screen and (min-width: 768px) {
  .idemitsu40th-mv_animation-tree_back img:nth-child(7) {
    --tree-neg: -0.08;
  }
}

.idemitsu40th-mv_animation-tree_back img:nth-child(8),
.idemitsu40th-mv_animation-tree_back img:nth-child(4) {
  --tree-width: 15.4341;
  --tree-bottom: 498;
}

@media screen and (min-width: 768px) {

  .idemitsu40th-mv_animation-tree_back img:nth-child(8),
  .idemitsu40th-mv_animation-tree_back img:nth-child(4) {
    --tree-width: 31.6633;
  }
}

.idemitsu40th-mv_animation-tree_back img:nth-child(4) {
  --tree-neg: -0.63;
}

@media screen and (min-width: 768px) {
  .idemitsu40th-mv_animation-tree_back img:nth-child(4) {
    --tree-neg: -0.64;
  }
}

.idemitsu40th-mv_animation-tree_back img:nth-child(8) {
  --tree-neg: -0.3;
}

@media screen and (min-width: 768px) {
  .idemitsu40th-mv_animation-tree_back img:nth-child(8) {
    --tree-neg: -0.2;
  }
}

/*  front */
.idemitsu40th-mv_animation-tree_front img:nth-child(1) {
  --tree-width: 31.7798;
  --tree-bottom: 422;
  --tree-neg: -0.68;
}

@media screen and (min-width: 768px) {
  .idemitsu40th-mv_animation-tree_front img:nth-child(1) {
    --tree-width: 65.1969;
    --tree-neg: -0.694;
  }
}

.idemitsu40th-mv_animation-tree_front img:nth-child(2) {
  --tree-width: 25.3498;
  --tree-bottom: 410;
  --tree-neg: -0.756;
}

@media screen and (min-width: 768px) {
  .idemitsu40th-mv_animation-tree_front img:nth-child(2) {
    --tree-width: 52.0057;
    --tree-bottom: 430;
    --tree-neg: -0.775;
  }
}

.idemitsu40th-mv_animation-tree_front img:nth-child(3) {
  --tree-width: 31.0323;
  --tree-bottom: 390;
  --tree-neg: -0.79;
}

@media screen and (min-width: 768px) {
  .idemitsu40th-mv_animation-tree_front img:nth-child(3) {
    --tree-width: 63.6634;
    --tree-bottom: 414;
    --tree-neg: -0.823;
  }
}

@keyframes tree_run {
  from {
    rotate: -20deg;
  }

  to {
    rotate: 20deg;
  }
}

.idemitsu40th-mv_animation-car {
  --car-width: 78.0449;
  --car-left: 340;
  --car-bottom: 139;

  width: calc(var(--car-width) / var(--screen) * 100vw);
  aspect-ratio: calc(160.1107 / 71.6811);

  position: absolute;
  left: calc(var(--car-left) / var(--bbox-width) * 100%);
  bottom: calc(var(--car-bottom) / var(--bbox-height) * 100%);

  animation: car_run 1.6s linear 0s infinite both;
  transform-origin: bottom;
}

@media screen and (min-width: 768px) {
  .idemitsu40th-mv_animation-car {
    --car-width: 160.1107;
    --car-left: 342;
    --car-bottom: 139;
  }
}

@keyframes car_run {

  0%,
  100% {
    translate: 0 0;
    rotate: 0deg;
  }

  25%,
  35% {
    scale: 1 1.07;
    translate: 0 -4px;
  }
}

.idemitsu40th-mv_animation-road {
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 0;
}

.idemitsu40th-mv_animation-flower {
  --flower-width: 290;
  --flower-bottom: -23;

  /* width: 100%; */
  width: calc(var(--flower-width) / var(--screen) * 200vw);
  height: 100%;

  background-image: url('./../images/kv/img_ani_flower.svg');
  background-size: calc(var(--flower-width) / var(--screen) * 100vw);
  background-repeat: repeat-x;
  background-position: 0 bottom;

  position: absolute;
  left: 0;
  bottom: calc(var(--flower-bottom) / var(--screen) * 100vw);
  animation: flower_run var(--flower-duration) linear 0s infinite both;
}

@media screen and (min-width: 768px) {
  .idemitsu40th-mv_animation-flower {
    --flower-width: 651.125;
    --flower-bottom: -59;
  }
}

@keyframes flower_run {
  from {
    background-position-x: -100%;
  }

  to {
    background-position-x: 0;
  }
}

/* .datasign__triggerAndDialogContainer--index-module */