/*
 * 【はじめに】
 * 最終的には可能な限り、コメントは削除してください。
 * ここに記載しているコメントもほぼ不要です(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 nav#number_search {
  background-color: #fff;
  border: double 5px #e6373c;
  margin-bottom: 20px;
  padding-bottom: 10px; }

.tieup nav#number_search p.index {
  text-align: center;
  font-weight: bold;
  background-color: #e6373c;
  padding: 10px;
  margin-bottom: 10px; }

.tieup nav#number_search p.index a {
  color: #fff; }

.tieup nav#number_search > dl {
  height: 90px;
  overflow-y: scroll; }

.tieup nav#number_search > dl::-webkit-scrollbar {
  width: 10px; }

.tieup nav#number_search > dl::-webkit-scrollbar-track {
  background-color: #fff;
  border: 2px solid #e6373c;
  border-right: 0px solid transparent; }

.tieup nav#number_search > dl::-webkit-scrollbar-thumb {
  background-color: #e6373c; }

.tieup nav#number_search > dl > dt {
  width: 18em;
  margin: 0 auto;
  font-weight: 900;
  font-size: 18px;
  color: #012d7d; }

.tieup nav#number_search ul {
  font-size: 16px;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  justify-content: center;
  line-height: 1.8;
  width: 18em;
  font-weight: bold;
  color: #b4b4fa; }

.tieup nav#number_search ul li:nth-of-type(-n+7) a {
  color: #012d7d; }

.tieup nav#number_search ul li.active {
  color: #012d7d;
  background: linear-gradient(transparent 60%, #ff6 60%, #ff6 80%, transparent 100%); }

.tieup nav#number_search ul li:hover {
  cursor: pointer; }

.tieup nav#number_search ul li dl {
  display: flex; }

.tieup nav#number_search ul li dl dt {
  margin-right: 1em;
  width: 3em; }

.tieup nav#number_search ul li dl dd {
  width: 15em;
  position: relative; }

.tieup nav#number_search ul li dl dd span {
  display: inline-block;
  width: 9em; }

.tieup nav#number_search dd:first-of-type ul li:first-of-type dl dd::after {
  content: 'NEW!';
  position: absolute;
  right: 0;
  top: -18px;
  background-color: #e6373c;
  color: #fff;
  padding: 0 0.3em;
  font-size: 12px; }

.tieup .article.hide {
  display: none; }

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

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

.tieup section h3 {
  font-size: 18px;
  padding: 0.5em 1em;
  text-align: justify;
  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; }

.tieup section h3.year_2023 {
  background-color: #f6675c; }

.tieup section h3.year_2024 {
  background-color: #ff6e2a; }

.tieup section h3.year_2025 {
  background-color: #f7600f; }

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

.tieup section p.before_link {
  text-align: center;
  text-indent: 0; }

.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 h3 + img + p {
  margin-bottom: 5px; }

.tieup section small {
  display: block;
  font-size: 12px;
  margin-bottom: 20px;
  text-align: right; }

.tieup section h4 {
  font-size: 16px;
  padding: 0.5em 1em;
  text-align: justify;
  background-color: #ffa2a5;
  color: #fff;
  border-left: 0.5em solid #e6373c;
  box-shadow: inset 0 0 3px #808080;
  margin-top: 50px;
  margin-bottom: 10px;
  line-height: 1.8; }

.tieup section h4.year_2023 {
  background-color: #ff8d91; }

.tieup section h4.year_2024 {
  background-color: #ff7a7f; }

.tieup section h4.year_2025 {
  background-color: #f77; }

.tieup section .figure {
  padding-top: 10px;
  margin-bottom: 30px;
  width: 95%;
  margin-left: auto;
  margin-right: auto; }

.tieup section .figure .figcaption p {
  font-size: 12px;
  text-indent: 0;
  font-weight: bold;
  margin-bottom: 0; }

.tieup section .figure .link_loop strong {
  display: block;
  color: #e6373c;
  text-decoration: underline;
  margin-bottom: 10px; }

.tieup section .figure:last-of-type + p + strong, .tieup section ol li strong {
  display: block;
  color: #f00;
  margin-bottom: 30px;
  font-weight: normal; }

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

.tieup section br.pc {
  display: none; }

.tieup section ol li {
  box-shadow: 0 0 3px #a1a1a1 inset;
  border-radius: 20px;
  padding: 1em 1em 0.5em;
  margin-bottom: 30px; }

.tieup section h5 {
  text-indent: -1em;
  padding-left: 1em;
  margin-bottom: 10px; }

.tieup section ol li p, .tieup section ol li strong {
  margin-left: 1em;
  text-indent: 0; }

.tieup address p {
  font-weight: bold; }

.tieup address p a {
  text-decoration: underline; }

.tieup section:last-of-type {
  padding-bottom: 50px; }

.tieup section p .link {
  color: #e6373c;
  text-decoration: underline; }

.tieup section p .link + small {
  display: inline; }

.tieup section p.coment {
  text-indent: -1.5em;
  padding-left: 2em; }

.tieup section a.link_btn {
  display: inline-block;
  line-height: 1.2;
  font-weight: bold;
  margin: 0 auto;
  padding: 0.5em 1em;
  background-color: #e6373c;
  border-radius: 2em;
  color: #fff;
  font-size: 20px;
  border: 1px solid #000;
  border: solid 2px #850000;
  border-bottom: solid 5px #850000; }

.tieup section a.link_btn span {
  display: none; }

.tieup section a.link_report {
  display: block;
  text-align: center;
  color: #e6373c; }

.tieup section a {
  color: #e6373c; }

.tieup section table {
  margin: 0 auto;
  font-size: 14px;
  border-collapse: collapse;
  box-sizing: border-box;
  margin-bottom: 30px; }

.tieup section table th, .tieup section table td {
  border: 1px solid #888;
  padding: 0.3em;
  text-align: center; }

.tieup section table th {
  font-weight: 700; }

.tieup section table th:nth-of-type(1) {
  width: 7em; }

.tieup section table th:nth-of-type(2) {
  width: 5em; }

.tieup div.video {
  width: 95%;
  margin: 0 auto 30px; }

.tieup div.video > div > div {
  margin-bottom: 10px;
  position: relative;
  padding-top: 56.25%;
  width: 100%; }

.tieup div.video > div > div > iframe {
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.4); }

.tieup .link_page {
  width: 100%;
  margin-bottom: 30px;
  box-sizing: border-box; }

.tieup .link_page .prev, .tieup .link_page .next {
  display: block;
  width: 21em;
  margin: 0 auto; }

.tieup .link_page a {
  color: #012d7d;
  font-weight: bold; }

.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: 768px) {
  .tieup h2 {
    margin: 0 30px 30px; }

  .tieup section h3 {
    font-size: 20px; }

  .tieup h3 + img {
    margin-bottom: 20px; }

  .tieup section h4 {
    font-size: 18px; }

  .tieup section a.link_btn span {
    display: inline; }

  .tieup section p.before_link br, .tieup section a.link_btn br {
    display: none; }

  .tieup section .figure, .tieup div.video {
    width: 700px; }

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

  .tieup .link_page .prev {
    padding-right: 1em;
    border-right: 1px solid #000;
    display: inline; }

  .tieup .link_page .prev::before {
    content: '＜';
    margin-right: 1em; }

  .tieup .link_page .next {
    padding-left: 1em;
    border-left: 1px solid #000;
    display: inline; }

  .tieup .link_page .next::after {
    content: '＞';
    margin-left: 1em; }

  .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; }

  .tieup section table {
    font-size: 16px; } }

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

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

  .tieup nav#number_search ul {
    font-size: 18px; }

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

  .tieup section h3 {
    font-size: 22px; }

  .tieup section h4 {
    font-size: 20px; }

  .tieup section p, .tieup section strong, .tieup address p, .tieup section ol li h5 {
    font-size: 18px; }

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

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

  .tieup section a.link_btn:hover {
    border: solid 2px #850000;
    border-top: solid 5px #850000; } }

@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; } }