@charset "UTF-8";

/*==========================================
 PC  1920px-1024px
 TAB 1024px-768px
 SP  768px-
===========================================*/

/*-----------
共通
-----------*/
:root {
  /* z-index */
  --z-index-header: 50;

  /* color */
  --color-lt-yellow: #fdf6de;
  --color-yellow: #fff034;
  --color-m-yellow: #f7ab00;
  /* メインカラー */
  --color-navy: #003364;
  --color-site-orange: #ed6c00;
  /* 背景色 */
  --color-lt-navy: #f0f2f7;
  --color-red: #e60012;
  --color-white: #fff;
  --color-lt-gray: #cdcdcd;
  --color-gray: #acacac;
  --color-black: #333;

  /* transition */
  --transition-default: 0.5s;

  /* width */
  --contents-max-width: min(100%, 1560px);
  --contents-width: min(100%, 1040px);

  /* font */
  --base-font-family: "YakuHanJP", "Zen Kaku Gothic New", sans-serif;
}

/* font */
/* zen-kaku-gothic-new-regular - japanese */
@font-face {
  font-display: swap;
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/zen-kaku-gothic-new-v18-japanese-regular.woff2') format('woff2');
}

/* zen-kaku-gothic-new-700 - japanese */
@font-face {
  font-display: swap;
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/zen-kaku-gothic-new-v18-japanese-700.woff2') format('woff2');
}

/* keyframes フェードイン */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* keyframes スライドイン */
@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*-----------
共通（color,テキスト,ボタン,inner,共通boxなど）
-----------*/
html {
  scroll-behavior: smooth;
}

body {
  position: relative;
  width: 100%;
  margin: 0;
  color: var(--color-black);
  font-family: var(--base-font-family);
  font-size: clamp(1rem, 0.94rem + 0.25vw, 1.125rem);
  /* 16-18px 幅390〜1200px */
  font-weight: 400;
  font-style: normal;
  line-height: 2.2;
  letter-spacing: 0.01em;
  font-feature-settings: "palt";
  word-break: normal;
  overflow-wrap: anywhere;
  line-break: strict;
  -webkit-text-size-adjust: 100%;
  -webkit-animation: fadeIn 1.5s ease 0s 1 normal;
  animation: fadeIn 1.5s ease 0s 1 normal;
  background-color: var(--color-lt-navy);
}

/* ブロック */
main {
  position: relative;
  overflow: clip;
}

.wrapper {
  padding-inline: 20px;
  width: var(--contents-width);
  margin-inline: auto;
}

.group {
  margin-block: 2.5rem;
}

.pc-on {
  display: none;
}

.tab-on,
.sp-on {
  display: block;
}

.block {
  display: block;
}

.mb-none {
  margin-bottom: 0;
}

.mb-1 {
  margin-bottom: 1em;
}

.space {
  padding-right: 0.5em;
}

/* 見出し・テキスト */
.headline-main {
  height: fit-content;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  color: var(--color-white);
}

.headline-main:not(.headline-main.yellow) {
  background-color: var(--color-navy);
}

.headline-main.yellow {
  background-color: var(--color-m-yellow);
}

.headline-sub {
  display: flex;
  justify-content: center;
  position: relative;
  margin-block-end: 0.5em;
}

.headline-sub span {
  position: relative;
  z-index: 1;
  display: block;
  width: fit-content;
  padding-inline: 1em;
  background-color: var(--color-lt-navy);
}

.headline-sub::after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-navy);
}

h2,
h3,
h4,
h5 {
  font-weight: 700;
  line-height: 1.4;
  margin-block: 0;
}

h1 {
  margin-block: 0;
}

h2 {
  padding-inline: 1em;
  padding-block: 0.25em;
  text-align: center;
  font-size: clamp(1.375rem, 1.074rem + 1.23vw, 2rem);
  /* 22-32px */
  letter-spacing: 0.1em;
}

h3 {
  color: var(--color-main);
  font-size: clamp(1.375rem, 1.255rem + 0.49vw, 1.625rem);
  /* 22-26px */
}

h4 {
  font-size: clamp(1.25rem, 1.19rem + 0.25vw, 1.375rem);
  /* 20-22px */
}

main p {
  margin-block-end: 1.5em;
}

strong,
.text-strong {
  font-weight: 700;
}

small,
.text-small {
  font-weight: 400;
  font-size: 0.875rem;
}

.text-large {
  font-size: 170%;
  font-weight: 700;
  line-height: initial;
}

.text-medium {
  font-size: 130%;
  line-height: initial;
}

.text-center {
  text-align: center;
}

.text-red {
  color: var(--color-red);
}

.text-orange {
  color: var(--color-navy);
}

/* リスト */
ul:is(main ul):not(table td ul):not(dl dd > ul):not(.detailContents ul):not(.slider-wrapper li){
  margin-block: 1.5em;
}
/* スライドショーと景品のところだけ「・」がつかないように制御 */
ul:is(main ul) li:not(.slider-wrapper li):not(.prizeList li),
.prizeList li p{
  position: relative;
  margin-inline-start: 1.2rem;
}

ul:is(main ul) li:not(ul:is(main ul) li:last-of-type):not(.awardItem ul li):not(ul.note li):not(.slider-wrapper li):not(.prizeList li){
  margin-block-end: 1.5em;
}

ul:is(main ul):not(ul.note):not(.prizeList)>li::before
,.prizeList li>p::before{
  content: '';
  display: block;
  position: absolute;
  top: calc(0.75rem + 2.5px);
  left: -1rem;
  width: 10px;
  height: 10px;
  background-color: var(--color-navy);
  border-radius: 50%;
}

_::-webkit-full-page-media,
_:future,
:root ul:is(main ul):not(ul.note)>li::before {
  top: 0.75rem;
}

ul.note li::before {
  content: '※';
  display: block;
  position: absolute;
  top: 0;
  left: -1.2rem;
}

ol:not(ol.flowList) {
  list-style: decimal;
  margin-block: 1.5rem;
}

ol:not(ol.flowList)>li {
  position: relative;
  margin-block-end: 0.5rem;
}

/* リンク・ボタン */
* a,
a img,
a::before,
a::after,
button,
button::after {
  -webkit-transition: var(--transition-default);
  transition: var(--transition-default);
}

a[href^=https]::after,
a[href^=http]::after,
a[href^="//"]::after {
  content: "";
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  margin-left: 0.25em;
  vertical-align: middle;
  -webkit-mask-image: url(../images/icon-external.svg);
  mask-image: url(../images/icon-external.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: var(--color-black);
}

a[href^="https://www.sanrikutetsudou.com/"]::after,
a[href^="http://www.sanrikutetsudou.com/"]::after,
a[href^="https://test.media-crew.co.jp/sanrikutetsudou/"]::after,
a[href^="http://test.media-crew.co.jp/sanrikutetsudou/"]::after {
  display: none;
}

header a:focus {
  color: var(--color-navy);
}

main a:not(.button a) {
  text-decoration: underline;
}

main a:focus {
  color: var(--color-navy);
}

/* ボタン */
.button {
  width: min(95%, 400px);
  margin-inline: auto;
  margin-block-end: 1em;
}

.button a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  width: 100%;
  padding-block: 1em;
  padding-inline: 1em;
  border-radius: 3em;
  font-weight: 700;
  border: 2px solid var(--color-navy);
  background-color: var(--color-white);
}

.button a:focus {
  color: var(--color-white);
  background-color: var(--color-navy);
}

.button a:focus::after {
  background-color: var(--color-white);
}

/* 画像 */
picture {
  display: block;
}

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

/* アニメーション */

/* スライドショーアニメーション */
/* ===================================================
   スライダー全体のデザインと設定
   =================================================== */
.slider {
  overflow: hidden; /* 画面外の画像を隠す */
  width: 100%;      /* 横幅いっぱいに表示 */
  margin: 0 auto;

  /* 背景を黒、ドットを白っぽくする場合 */
  background-color: #333; 
  padding-top: 30px;
  padding-bottom: 30px;

  background-image: 
    radial-gradient(#ddd 20%, transparent 26%), 
    radial-gradient(#ddd 20%, transparent 26%); 
  background-size: 15px 15px;
  background-repeat: repeat-x;
  background-position: 0 2.5%, 0 calc(100% - 2.5%);
}

/* 2つの ul を横並びにするラッパー */
.slider-wrapper {
  display: flex;
  width: max-content; /* 中身（ul 2つ分）の総幅に合わせる */
  animation: infinite-loop 30s linear infinite; /* 30秒で1周（遅くしたい場合は数値を大きく） */
}

/* ===================================================
   画像リスト（ul / li / img）の調整
   =================================================== */
main .slider-wrapper ul{
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none!important;
  list-style-type:none;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.slider-wrapper li {
  /* width: 300px; 【重要】画像の横幅（デザインに合わせて自由に調整） */
  padding: 0 1vw; /* 画像と画像の間のすき間（上下 0、左右 10px） */
  box-sizing: border-box;
}

.slider-wrapper img {
  width: 20vw;
  height: auto; /* 【重要】画像の縦幅（揃えるときれいに見えます） */
  object-fit: cover; /* 縦横比を保ったままエリアを埋める（画像が歪まない） */
  display: block;
}

@media screen and (max-width:600px){
    .slider-wrapper li {
    padding: 0 2vw; /* 画像と画像の間のすき間（上下 0、左右 10px） */
  }
    .slider-wrapper img {
    width: 50vw;
  }
}


/* ===================================================
   無限ループのアニメーション（左へ流れる）
   =================================================== */
@keyframes infinite-loop {
  0% {
    transform: translateX(0);
  }
  100% {
    /* 1つ目の ul（全体の半分）が左に消え去った瞬間に位置を 0 に戻す */
    transform: translateX(-50%); 
  }
}


.js-fadeup {
  opacity: 0;
}

.fadeup--show {
  -webkit-animation: fadeUpAnime 1.5s forwards;
  animation: fadeUpAnime 1.5s forwards;
  opacity: 1;
}

.js-extend {
  position: relative;
  z-index: 1;
  background: -webkit-gradient(linear, left top, right top, from(rgb(255, 240, 52)), to(rgb(255, 240, 52)));
  background: linear-gradient(90deg, rgb(255, 240, 52) 0%, rgb(255, 240, 52) 100%);
  background-size: 0 30%;
  background-position: 0 100%;
  background-repeat: no-repeat;
  -webkit-transition: 2.5s;
  transition: 2.5s;
}

.extend--show {
  background-size: 100% 30%;
}


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

  /* ブロック */
  .tab-on {
    display: none;
  }

}

@media print,
screen and (min-width: 1024px) {
  .pc-on {
    display: block;
  }

  .sp-on {
    display: none;
  }

  .group {
    margin-block: 5rem;
    /* 100px */
  }

  /* 見出し・テキスト */
  .text-lead {
    text-align: center;
  }
}

@media (any-hover: hover) {
  main a:not(.button a):hover {
    color: var(--color-navy);
  }

  main a:not(.button a):hover::after {
    background-color: var(--color-navy);
  }

  a:hover img {
    opacity: 0.7;
  }

  .button a:hover {
    color: var(--color-white);
    background-color: var(--color-navy);
  }

  .button a:hover::after {
    background-color: var(--color-white);
  }
}

/*-----------
header
-----------*/
header {
  background-color: var(--color-site-orange);
}

#skipLink a {
  position: absolute;
  z-index: var(--z-index-header);
  top: -3rem;
  left: 0;
  display: block;
  padding-inline: 10px;
  padding-block: 2px;
  color: var(--color-white);
  text-align: left;
  font-size: clamp(0.75rem, 0.69rem + 0.25vw, 0.875rem);
  /*12-14px*/
  overflow: hidden;
  background-color: var(--color-black);
  -webkit-transition: top 0.5s ease;
  transition: top 0.5s ease;
}

#skipLink a:focus {
  top: 0;
}

.headerWrapper {
  display: flex;
  align-items: center;
  gap: 1em;
  width: var(--contents-max-width);
  padding-inline: 15px;
  padding-block: 10px;
  margin-inline: auto;
}

.siteName {
  display: block;
  width: min(35%, 195px);
}

@media print,
screen and (min-width: 1024px) {

  .headerWrapper {
    gap: 20px;
    padding-inline: 20px;
    padding-block: 15px;
  }

}

/*-----------
コンテンツ - 共通
-----------*/
.mv h1 {
  width: var(--contents-max-width);
  margin-inline: auto;
}

.detail {
  padding-block: 3.75rem;
  background-color: var(--color-lt-navy);
}

.liNote{
  font-weight: 400;
  font-size: 0.938rem;
}

.detail::before {
  content: "";
  display: block;
  width: 100%;
  height: 50px;
  position: absolute;
  top: calc(8% - 50px);
  left: 0;
  z-index: -1;
  -webkit-mask-image: url(../images/mask-arc.svg);
  mask-image: url(../images/mask-arc.svg);
  -webkit-mask-position: top center;
  mask-position: top center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 400%;
  mask-size: 400%;
  background-color: var(--color-lt-navy);
}

.detailContents {
  padding-inline: 1rem;
  padding-block: 1rem;
  background-color: var(--color-white);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
}

.period p {
  text-align: center;
  font-weight: 700;
  line-height: 1.4;
}

.period .ja {
  font-size: 90%;
}

.theme-title{
  text-align: center;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 2rem;
}

.themeLead {
  font-size: 140%;
  font-weight: 700;
  margin-block-end: 1em;
}

.themeImageBox {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.themeImageBox img {
  border-radius: 10px;
}

#flow .detailContents {
  background-color: var(--color-lt-yellow);
}

ol.flowList {
  counter-reset: my-counter;
  margin-block: 1.5rem;
}

ol.flowList li {
  list-style: none;
  display: grid;
  grid-template-columns: 2em minmax(0, 1fr);
  gap: 0.5rem;
  position: relative;
  padding-block: 1rem;
  font-weight: 700;
  border-bottom: 2px dotted var(--color-m-yellow);
}

ol.flowList li:first-of-type {
  border-top: 2px dotted var(--color-m-yellow);
}

ol.flowList li:before {
  content: counter(my-counter);
  counter-increment: my-counter;
  display: block;
  color: var(--color-red);
  padding-block-start: 0.25em;
  text-align: center;
  font-size: clamp(1.5rem, 1.139rem + 1.48vw, 2.25rem);
  /* 24-36px */
  font-weight: 700;
  line-height: 1rem;
}

.prizeList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.allgoodsImg{
  max-width: 580px;
  width: 90%;
  margin: 1rem auto;

}
.prizeList li img{
  border-radius: 10px;
}
.prizeList li p{
  margin-block-end: 0;
}


/* .awardItem .headline-sub span {
  padding-inline: 0.5em;
  background-color: var(--color-white);
} */

/* .awardItem ul {
  margin-block-end: 1rem;
} */

.scroll {
  padding-inline-end: 0.75rem;
  overflow-y: scroll;
  height: min(40vh, 400px);
}

.scroll::-webkit-scrollbar {
  width: 12px;
}

.scroll::-webkit-scrollbar-thumb {
  background-color: var(--color-gray);
  border-radius: 6px;
}

.rule p {
  padding-block-end: 1.5em;
  border-block-end: 2px dotted var(--color-navy);
}

@media print,
screen and (min-width: 1024px) {

  .detailContents {
    padding-inline: 2.5rem;
    padding-block: 2rem;
  }

  .themeImageBox {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
  }

  ol.flowList li {
    grid-template-columns: 4em minmax(0, 1fr);
    align-items: center;
  }

  ol.flowList li::before {
    padding-block-start: 0;
  }

  .prizeList {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
  }

  .awardItem {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-inline: 1.5rem;
    padding-block: 0;
    border-block-end: none;
    border-inline-end: 1px solid var(--color-black);
  }

  .awardItem:nth-of-type(odd){
    border-block-start: none;
    border-inline-start: 1px solid var(--color-black);
  }
}


/*-----------
footer
-----------*/
footer {
  position: relative;
  background-color: var(--color-site-orange);
}

.footerWrapper {
  padding-block: 2.5rem;
  /* 40px */
}

footer .siteName {
  margin-inline: auto;
  margin-block-end: 1rem;
}

.copyRight {
  text-align: center;
}

.copyRight small {
  color: var(--color-white);
  letter-spacing: 0.05em;
}

@media print,
screen and (min-width: 1024px) {
  .footerWrapper {
    padding-block: 5rem;
    /* 80px */
  }

  .footerSns {
    margin-block: 2.5rem;
    /* 40px */
  }
}