/*
 * 【はじめに】
 * 最終的には可能な限り、コメントは削除してください。
 * ここに記載しているコメントもほぼ不要です(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";
.federal img {
  max-width: 100%;
  height: auto; }

.federal header .top_img {
  width: 100%;
  display: flex;
  margin: 0 0 30px 0; }

.federal header .top_img .logo {
  width: 80%;
  padding: 15% 10%;
  background: url("/asp/photo/auction/brand/federal/img/top_img.jpg") no-repeat center/cover; }

.federal .gv_menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 50px;
  position: relative; }

.federal .gv_menu li {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  margin-left: 5px;
  margin-right: 5px;
  position: relative; }

.federal .gv_menu li::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #009844;
  transform: skew(-10deg);
  z-index: -10; }

.federal .gv_menu li a {
  font-size: 22px;
  font-weight: bold;
  font-style: italic;
  color: #fff;
  padding: 15px 0 15px 5px;
  width: 140px;
  line-height: 1;
  letter-spacing: 0.1em; }

.federal .gv_menu li a::before, .federal .gv_menu li a::after {
  content: "";
  width: calc((100vw - 170px) / 2);
  height: 5px;
  background-color: #ea0a2a;
  transform: skew(-10deg); }

.federal .gv_menu li a::before {
  position: absolute;
  top: 50%;
  left: calc((100vw - 150px) / -2); }

.federal .gv_menu li a::after {
  position: absolute;
  top: 50%;
  right: calc((100vw - 150px) / -2); }

.federal .gv_menu li a span {
  font-size: 0.6em;
  font-weight: normal;
  font-style: normal; }

.federal header h2 {
  color: #009844;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1.8;
  margin-bottom: 50px;
  position: relative; }

.federal header h2 > span {
  color: #ea0a2a;
  font-size: 2em;
  line-height: 1.5;
  letter-spacing: 0em;
  font-style: italic;
  display: block; }

.federal header h2 span sup {
  font-size: 0.5em; }

.federal header h2::after {
  content: "";
  width: 100%;
  height: 1px;
  background-color: #009844;
  position: absolute;
  bottom: -20px;
  left: 0; }

.federal header p {
  margin: 0 10px 15px;
  text-align: justify;
  line-height: 1.8;
  letter-spacing: 0.05em;
  font-size: 16px;
  font-weight: normal; }

.federal header p:last-of-type {
  margin-bottom: 50px; }

.federal section h3 {
  font-size: 28px;
  color: #fff;
  font-style: italic;
  letter-spacing: 0.1em;
  padding: 10px;
  margin-bottom: 50px;
  text-align: center;
  background-color: #009844;
  position: relative; }

.federal section h3::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -70px;
  border: 70px solid transparent;
  border-top: 15px solid #009844; }

.federal #lineup nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 100px; }

.federal #lineup .lineup_box {
  width: 165px;
  text-align: center;
  margin-right: 2%;
  margin-left: 2%;
  margin-bottom: 5vh;
  border-bottom: 4px solid #ea0a2a; }

.federal #lineup .lineup_box img:first-of-type {
  height: 220px;
  width: auto;
  margin-bottom: 20px; }

.federal #lineup .lineup_box img:last-of-type {
  height: 22px;
  width: auto;
  padding-bottom: 3px; }

.federal #lineup .pattern .picture img {
  display: block;
  height: 60vw;
  margin: 0 auto 30px;
  padding-top: 50px; }

.federal #lineup .pattern .pattern_name {
  width: 80%;
  margin: 0 auto 30px;
  padding-bottom: 5px;
  border-bottom: 7px solid #ea0a2a;
  text-align: center; }

.federal #lineup .pattern .pattern_name small p {
  color: #009844;
  font-weight: bold;
  margin-bottom: 5px; }

.federal #lineup .pattern .pattern_name img {
  height: 10vw; }

.federal #lineup .pattern .pattern_name + p {
  margin: 0 10px 30px;
  font-size: 16px;
  line-height: 1.8;
  font-weight: bold;
  text-align: justify; }

.federal #lineup .pattern a.btn_link {
  display: block;
  font-size: 18px;
  width: 250px;
  height: 50px;
  margin: 0 auto 100px;
  text-align: center;
  line-height: 50px;
  border: none;
  border-radius: 25px;
  background-color: #009844;
  color: #fff;
  font-weight: bold;
  letter-spacing: 0.1em; }

.federal #lineup .pattern a.coming_soon {
  text-decoration: line-through; }

.federal section#sale h3 {
  background-color: #ea0a2a; }

.federal section#sale h3::after {
  border-top: 15px solid #ea0a2a; }

.federal #sale .picture img {
  display: block;
  margin: 0 auto 100px;
  width: 95%; }

.federal footer .gv_menu li:first-of-type a::after {
  content: none; }

.federal footer .gv_menu li:last-of-type a::before {
  content: none; }

.federal footer .gv_menu li a::before, .federal footer .gv_menu li a::after {
  width: calc((100vw - 320px) / 2); }

.federal footer .gv_menu li a::before {
  left: calc((100vw - 305px) / -2); }

.federal footer .gv_menu li a::after {
  right: calc((100vw - 305px) / -2); }

.federal footer .partner {
  text-align: center;
  max-width: 300px;
  margin: 0 auto 50px; }

.federal footer .partner span {
  display: block;
  margin: 20px 0; }

.federal footer nav {
  background-color: #009844; }

.federal footer nav ul {
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  justify-content: center;
  padding: 20px 0; }

.federal footer nav ul li {
  margin-left: 10px;
  margin-right: 10px;
  line-height: 1.8; }

.federal footer nav ul li a {
  color: #fff; }

.federal footer small {
  display: block;
  color: #fff;
  text-align: center;
  background-color: #009844;
  padding-bottom: 20px; }

.federal #pagetop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 66px;
  height: 66px;
  /*@media screen and (min-width: 550px){
  .federal #lineup .lineup_box:nth-of-type(1){
    margin-right: 2%;
    margin-left: 15%;
  }
  .federal #lineup .lineup_box:nth-of-type(2){
    margin-right: 15%;
    margin-left: 2%;
  }
}*/ }

@media screen and (min-width: 768px) {
  .federal header .top_img .logo {
    width: 615px;
    padding: 115px calc((100vw - 615px) / 2); }

  .federal .gv_menu li a::before, .federal .gv_menu li a::after {
    content: "";
    width: calc((100vw - 220px) / 2); }

  .federal .gv_menu li a::before {
    left: calc((100vw - 200px) / -2); }

  .federal .gv_menu li a::after {
    right: calc((100vw - 200px) / -2); }

  .federal .gv_menu li a {
    font-size: 26px;
    width: 180px;
    padding: 20px 0 20px 5px; }

  .federal header h2 {
    font-size: 24px; }

  .federal #lineup .lineup_box {
    width: 32%;
    margin-right: 10px;
    margin-left: 10px; }

  .federal #lineup .lineup_box img:first-of-type {
    height: 30vw; }

  .federal #lineup .lineup_box img:last-of-type {
    height: 3vw; }

  .federal #lineup .pattern {
    display: flex;
    flex-wrap: wrap;
    position: relative; }

  .federal #lineup .pattern::after {
    content: "";
    background-color: #009844;
    width: 95vw;
    height: 100px;
    position: absolute;
    bottom: 155px;
    right: 2.5%;
    z-index: -10;
    transform: skew(-10deg); }

  .federal #lineup .pattern .picture {
    width: 37.5%;
    margin: 0 0 0 2.5%; }

  .federal #lineup .pattern .picture img {
    height: 40vw;
    margin: 0 auto; }

  .federal #lineup .pattern .picture + div {
    width: 55%;
    margin: 80px 2.5%; }

  .federal #lineup .pattern .pattern_name {
    width: 100%;
    margin: 0 0 40px;
    text-align: left; }

  .federal #lineup .pattern .pattern_name img {
    height: 5vw; }

  .federal #lineup .pattern .pattern_name + p {
    margin: 0 10px 6vw; }

  .federal footer .gv_menu li a::before, .federal footer .gv_menu li a::after {
    width: calc((100vw - 410px) / 2); }

  .federal footer .gv_menu li a::before {
    left: calc((100vw - 390px) / -2); }

  .federal footer .gv_menu li a::after {
    right: calc((100vw - 390px) / -2); }

  .federal footer .partner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    max-width: 100%; }

  .federal footer .partner img {
    max-width: 300px; }

  .federal footer .partner span {
    margin: 0 20px; }

  .federal #lineup .pattern a.btn_link {
    background-color: #fff;
    color: #009844; } }

@media screen and (min-width: 960px) {
  .federal #lineup nav ul {
    width: 960px;
    margin-left: auto;
    margin-right: auto; }

  .federal .gv_menu li a::before, .federal .gv_menu li a::after {
    content: "";
    width: calc((100vw - 260px) / 2); }

  .federal .gv_menu li a::before {
    left: calc((100vw - 240px) / -2); }

  .federal .gv_menu li a::after {
    right: calc((100vw - 240px) / -2); }

  .federal .gv_menu li a {
    font-size: 32px;
    width: 220px;
    padding: 25px 0 25px 5px; }

  .federal header h2 {
    font-size: 32px;
    line-height: 1.8; }

  .federal header p {
    width: 960px;
    margin: 0 auto 15px;
    letter-spacing: 0em; }

  .federal #lineup .lineup_box img:first-of-type {
    height: 288px; }

  .federal #lineup .lineup_box img:last-of-type {
    height: 28px; }

  .federal #lineup .pattern {
    width: 960px;
    margin-left: auto;
    margin-right: auto; }

  .federal #lineup .pattern::after {
    width: 920px; }

  .federal #lineup .pattern .picture img {
    height: 390px; }

  .federal #lineup .pattern .pattern_name img {
    height: 50px; }

  .federal #lineup .pattern .pattern_name + p {
    margin: 0 10px 60px;
    font-size: 18px; }

  .federal #sale .picture img {
    width: 960px; }

  .federal footer .gv_menu li a::before, .federal footer .gv_menu li a::after {
    width: calc((100vw - 490px) / 2); }

  .federal footer .gv_menu li a::before {
    left: calc((100vw - 470px) / -2); }

  .federal footer .gv_menu li a::after {
    right: calc((100vw - 470px) / -2); }

  .federal footer nav ul {
    width: 960px;
    margin: 0 auto; }

  .federal #pagetop:hover {
    cursor: pointer;
    opacity: 0.7; } }

@media screen and (min-width: 1024px) {
  .federal header .top_img {
    background-color: #009844; }

  .federal header .top_img .logo {
    width: 615px;
    padding: 115px 204.5px;
    margin: 0 auto; }

  .federal .gv_menu li a::before, .federal .gv_menu li a::after {
    width: 380px; }

  .federal .gv_menu li a::before {
    left: -390px; }

  .federal .gv_menu li a::after {
    right: -390px; }

  .federal header h2::after {
    width: 1024px;
    left: calc(50vw - 512px); }

  .federal footer .gv_menu li a::before, .federal footer .gv_menu li a::after {
    width: 260px; }

  .federal footer .gv_menu li a::before {
    left: -270px; }

  .federal footer .gv_menu li a::after {
    right: -270px; } }