/*
 * 【はじめに】
 * 最終的には可能な限り、コメントは削除してください。
 * ここに記載しているコメントもほぼ不要です(auPay start / ecd は必要)
 * 変数の使い方
 * $ec_dir ･･･ それぞれ各ECの絶対パス(現状)
 * $ec_id ･･･ それぞれ各ECのID(CSVで設定している分)
 *
 * 例：background-image: url($ec_dir + '/img/bn_main_background_sp.jpg');
 *
 * SCSSについて
 * 例：if制御
 *  @if $shop == 1 {
 * 		#pc_header.ac img {
 *			width: initial;
 *		}
 *	}
 *
 * 今分かっている問題
 * 1.rgb()について
 *   rgba()を利用してください。うまく変換されません
 */
/* auPayについては、figureタグ等利用できないタグがあり、変換して利用する事になる
 * その変換されたタグ用にCSSを設定する必要があるので、下記コメントタグを利用し、
 * 開始・終了で閉じる事
 * また、if制御を利用して切り替えると楽
 * @if $shop == 5 {
 *	.studless .recommend > h3 > img {
 *		width: 100%;
 *	}
 * } @else {
 *	.studless .recommend > div img {
 *		width: 100%;
 *	}
 * }
 */
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=Oswald:wght@500;600;700&display=swap');
.tieup {
  background-color: #fafafa;
  font-family: 'Noto Sans JP', sans-serif; }

.tieup img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto 10px;
  border: 1px solid #888; }

.tieup .wrap {
  margin: 0 15px; }

.tieup h2 {
  margin: 0 20px 30px;
  padding-top: 30px; }

.tieup h2 .picture img {
  border: none; }

.tieup h2 + section.introduction {
  margin-bottom: 40px;
  padding: 1.5em;
  font-weight: bold;
  background-color: #ffebec;
  /*.tieup h2 + section.introduction p:first-of-type{
  text-align: center;
}*/ }

.tieup section p {
  font-size: 16px;
  margin-bottom: 20px;
  line-height: 1.8;
  text-align: justify; }

.tieup section p span.underline {
  background: linear-gradient(transparent 60%, #ff6 60%); }

.tieup section p span.bold {
  font-weight: bold; }

.tieup section p span.big {
  font-size: 1.2em; }

.tieup section p span.caution {
  color: #f00; }

.tieup h2 + section.introduction p:last-of-type {
  margin-bottom: 0; }

.tieup nav#number_search {
  margin-bottom: 20px;
  padding-bottom: 10px; }

.tieup nav#number_search dl dt {
  font-size: 20px;
  padding: 0.3em 0;
  text-align: center;
  background-color: #e6373c;
  color: #fff;
  border-left: 0.5em solid #850000;
  box-shadow: inset 0 0 3px #808080;
  margin-bottom: 10px;
  line-height: 1.8;
  text-shadow: 1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, -1px -1px 1px #000;
  width: 30%; }

.tieup nav#number_search dl dt.year_2023 {
  background-color: #f6675c; }

.tieup nav#number_search dl dt.year_2024 {
  background-color: #ff6e2a; }

.tieup nav#number_search dl dt.year_2025 {
  background-color: #fa5700; }

.tieup nav#number_search dl dd:nth-of-type(n+2) {
  display: none; }

.tieup nav#number_search dl dd ul {
  font-size: 16px;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto 30px;
  justify-content: center;
  line-height: 1.8; }

.tieup nav#number_search dl dd ul li {
  display: block;
  width: 20em; }

.tieup nav#number_search dl dd ul li a {
  text-align: center;
  padding-bottom: 10px;
  display: block; }

.tieup nav#number_search dl dd ul li a h3 {
  font-size: 18px;
  font-weight: 700;
  padding: 0.3em 0;
  background-color: #ffa2a5;
  color: #fff;
  border-left: 0.5em solid #e6373c;
  box-shadow: inset 0 0 3px #808080;
  margin-top: 30px;
  line-height: 1.5;
  font-family: 'Noto Sans JP', sans-serif;
  text-shadow: 1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, -1px -1px 1px #000;
  position: relative; }

.tieup nav#number_search dl dt.year_2023 + dd ul li a h3 {
  background-color: #ff8d91; }

.tieup nav#number_search dl dt.year_2024 + dd ul li a h3 {
  background-color: #ff7a7f; }

.tieup nav#number_search dl dt.year_2025 + dd ul li a h3 {
  background-color: #f77; }

.tieup nav#number_search dl dd ul li a .img_box {
  width: 100%;
  display: block;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid #000;
  margin-bottom: 10px; }

.tieup nav#number_search dl dd ul li a .img_box img {
  margin: 0; }

.tieup nav#number_search dl dd ul li a .caption {
  color: #000;
  font-weight: 500;
  line-height: 1.5; }

.tieup nav#number_search dl dd:first-of-type ul li:last-of-type a h3::after {
  content: 'NEW!';
  position: absolute;
  right: 5px;
  top: 5px;
  font-size: 14px;
  color: #fff;
  background-color: #e6373c;
  padding: 0 0.3em;
  text-shadow: none; }

.tieup .foot_nav {
  display: flex;
  flex-wrap: wrap;
  border: double 5px #e6373c;
  margin-bottom: 20px;
  align-items: center; }

.tieup .foot_nav p {
  background-color: #e6373c;
  color: #fff;
  width: 100%;
  height: 2.8em;
  line-height: 2.8em;
  text-align: center;
  font-weight: bold; }

.tieup .foot_nav dl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%; }

.tieup .foot_nav dl dt {
  width: 25%;
  text-align: center;
  font-size: 18px;
  font-weight: 900;
  color: #012d7d;
  margin-bottom: 20px; }

.tieup .foot_nav dl dd {
  width: 75%;
  margin-bottom: 20px; }

.tieup .foot_nav dl dt:last-of-type, .tieup .foot_nav dl dd:last-of-type {
  margin-bottom: 0; }

.tieup .foot_nav ul {
  display: flex;
  flex-wrap: wrap;
  width: 75%;
  margin: 10px 0; }

.tieup .foot_nav ul li {
  width: 33.3%; }

.tieup .foot_nav ul li a, .tieup .foot_nav ul li span {
  width: 5em;
  display: block;
  text-align: center;
  margin: 0 auto;
  padding: 0.2em 0;
  color: #012d7d;
  font-weight: bold; }

.tieup .foot_nav ul li span {
  background: linear-gradient(transparent 60%, #ff6 60%, #ff6 80%, transparent 100%); }

.tieup a#page_top {
  position: fixed;
  bottom: 15px;
  right: 15px;
  width: 40px;
  height: 40px;
  background-color: #fff;
  border-radius: 50%;
  border: 2px solid #012d7d;
  opacity: 0.5;
  z-index: 100; }

.tieup a#page_top:hover {
  cursor: pointer; }

.tieup a#page_top div {
  width: 12px;
  height: 12px;
  border-top: 4px solid #012d7d;
  border-left: 4px solid #012d7d;
  transform: rotate(45deg);
  position: absolute;
  top: 10px;
  left: 12px; }

.tieup a#page_top span {
  font-size: 10px;
  color: #012d7d;
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 40px;
  display: inline-block;
  text-align: center;
  line-height: 1; }

.tieup a#page_top span > span {
  display: none; }

a#pagetop {
  display: none; }

@media screen and (min-width: 510px) {
  .tieup address {
    width: 480px;
    margin-left: auto;
    margin-right: auto; }

  .tieup section br.pc {
    display: block;
    /*.tieup h2 + section.introduction p{
    text-align: center;
  }*/ } }

@media screen and (min-width: 670px) {
  .tieup h2 + section.introduction p:last-of-type {
    text-align: center; }

  .tieup nav#number_search dl dd ul {
    justify-content: space-between; }

  .tieup nav#number_search dl dd ul li {
    width: 48%; }

  .tieup nav#number_search dl dd ul li a .img_box {
    height: 30vw;
    position: relative; }

  .tieup nav#number_search dl dd ul li a .img_box img {
    position: absolute;
    bottom: 0;
    right: 0; } }

@media screen and (min-width: 768px) {
  .tieup h2 {
    margin: 0 30px 30px; }

  .tieup nav#number_search dl dt {
    width: 30.6%;
    max-width: 288px;
    font-size: 2.5vw;
    cursor: pointer; }

  .tieup nav#number_search dl dt:hover, .tieup nav#number_search dl dd ul li:hover {
    opacity: 0.7; }

  .tieup nav#number_search dl dd ul {
    justify-content: flex-start; }

  .tieup nav#number_search dl dd ul li {
    width: 32%;
    max-width: 300px;
    margin-right: 2%; }

  .tieup nav#number_search dl dd ul li:nth-of-type(3n) {
    margin-right: 0; }

  .tieup nav#number_search dl dd ul li a h3 {
    font-size: 1.9vw; }

  .tieup nav#number_search dl dd ul li a .img_box {
    height: 23vw; }

  .tieup nav#number_search dl dd:first-of-type ul li a .img_box, .tieup nav#number_search dl dd ul li:nth-of-type(n+4) a .img_box {
    height: 20.8vw; }

  .tieup nav#number_search dl dd ul li a .caption {
    font-size: 1.62vw; }

  .tieup .foot_nav p {
    width: 20%;
    height: 15em;
    line-height: 15em; }

  .tieup .foot_nav dl {
    width: 80%; }

  .tieup .foot_nav dl dt {
    width: 20%;
    margin-bottom: 0; }

  .tieup .foot_nav dl dd {
    width: 80%;
    margin-bottom: 0; }

  .tieup .foot_nav ul {
    flex-wrap: initial; }

  .tieup .foot_nav ul li {
    width: 16.66%; }

  .tieup .foot_nav ul li a, .tieup .foot_nav ul li span {
    padding: 0.5em 0; } }

@media screen and (min-width: 960px) {
  .tieup .wrap {
    width: 960px;
    margin: 0 auto; }

  .tieup h2 + section.introduction p {
    width: 960px;
    margin: 0 auto 20px; }

  .tieup nav#number_search dl dt {
    font-size: 24px; }

  .tieup nav#number_search dl dd ul li {
    margin-right: 3%; }

  .tieup nav#number_search dl dd ul li a h3 {
    font-size: 18px; }

  .tieup nav#number_search dl dd ul li a .img_box {
    height: 200px; }

  .tieup nav#number_search dl dd:first-of-type ul li a .img_box, .tieup nav#number_search dl dd ul li:nth-of-type(n+4) a .img_box {
    height: 200px; }

  .tieup nav#number_search dl dd ul li a .caption {
    font-size: 16px; }

  .tieup nav#number_search ul li a:hover, .tieup .foot_nav ul li a:hover {
    color: #b4b4fa; }

  .tieup section small {
    font-size: 14px; }

  .tieup section .figure .figcaption p {
    font-size: 14px; } }

@media screen and (min-width: 1024px) {
  .tieup a#page_top {
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px; }

  .tieup a#page_top div {
    width: 17px;
    height: 17px;
    border-top: 7px solid #012d7d;
    border-left: 7px solid #012d7d;
    top: 14px;
    left: 18px; }

  .tieup a#page_top span {
    bottom: 11px;
    width: 60px; }

  .tieup a#page_top span > span {
    display: contents; } }