@charset "UTF-8";
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

	╔═╗╔═╗╔═╗╔═╗
	╠═╝║  ╚═╗╚═╗
	╩  ╚═╝╚═╝╚═╝ ver.0.89
	© 2007 - 2020 OAK LAWN MARKETING. INC. All Rights Reserved.
	Last modified:2021.1/

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*=========================

	Global

=========================*/
ruby rt {
  transform: translateY(0.5em);
  font-size: 25%;
}

[class*="is-pc"] {
  display: block;
}

[class*="is-sp"] {
  display: none;
}

picture.lazy {
  display: block;
  min-height: 1px;
}

picture.lazy img {
  height: auto;
  width: 100%;
}

/* 他に影響がでそうなものはこちら*/
[class*="f-page"] strong:not([class*="f-size"]),
.f-PCSS strong:not([class*="f-size"]) {
  font-size: 135%;
}

[class*="f-page"] small:not([class*="f-size"]),
.f-PCSS small:not([class*="f-size"]) {
  font-size: 65%;
}

[class*="f-page"] ul,
[class*="f-page"] ol,
.f-PCSS ul,
.f-PCSS ol {
  list-style-type: none;
}

[class*="f-page"] img,
.f-PCSS img {
  vertical-align: bottom;
}

/*===============
 Global Media query
===============*/
@media screen and (max-width: 768px) {
  [class*="f-page"] img,
  .f-PCSS img {
    height: auto;
    width: 100%;
  }
}

/* is-pc */
@media screen and (max-width: 768px) {
  .is-pc {
    display: none !important;
  }
}

@media screen and (max-width: 600px) {
  .is-pc-600 {
    display: none !important;
  }
}

@media screen and (max-width: 500px) {
  .is-pc-500 {
    display: none !important;
  }
}

@media screen and (max-width: 400px) {
  .is-pc-400 {
    display: none !important;
  }
}

/* is-sp */
@media screen and (max-width: 768px) {
  .is-sp {
    display: block !important;
  }
}

@media screen and (max-width: 600px) {
  .is-sp-600 {
    display: block !important;
  }
}

@media screen and (max-width: 500px) {
  .is-sp-500 {
    display: block !important;
  }
}

@media screen and (max-width: 400px) {
  .is-sp-400 {
    display: block !important;
  }
}

/*=========================

	Headings: h

==============================*/
[class*="f-h-"] {
  letter-spacing: 0;
  font-family: "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-size: 3rem;
  font-weight: 600 !important;
  line-height: 1.2;
}

.f-h-sub {
  font-size: 60%;
  display: block;
  font-weight: normal;
}

/*-------------------
	h 1
-------------------*/
/*-------------------
	h 2
-------------------*/
.f-h-2,
.f-h-2-1 {
  padding-left: 0.5em;
  border-left: 0.2em solid #777;
}

.f-h-2-1,
.f-h-2-2 {
  padding-bottom: 1%;
  border-bottom: 1px solid #777;
}

.f-h-2-3 {
  padding-top: 1%;
  padding-bottom: 1%;
  border-top: 1px solid #777;
  border-bottom: 1px solid #777;
}

.f-h-2-4 {
  padding: 1% 0.5em;
  border: 1px solid #777;
}


/*-------------------
	h 3
-------------------*/
[class*="f-h-3"] {
  position: relative;
  display: flex;
  align-items: center;
}

[class*="f-h-3"]::after {
  margin-left: 0.5em;
  flex-grow: 1;
  content: "";
  height: 1px;
  display: inline-block;
  background-color: #777;
}

.f-h-3-1::before,
.f-h-3-2::before,
.f-h-3-3::before {
  margin-right: 0.5em;
  flex-grow: 1;
  content: "";
  height: 1px;
  display: inline-block;
  background-color: #777;
}

.f-h-3-2 {
  justify-content: center;
}

.f-h-3-2::before, .f-h-3-2::after {
  flex-grow: 0;
  width: 1em;
}

.f-h-3-3::before {
  flex-grow: 0;
  width: 1em;
}
/*-------------------
	h 4
-------------------*/
[class*="f-h-4"] {
  position: relative;
  display: flex;
  align-items: center;
}

[class*="f-h-4"]::before {
  line-height: 1;
  margin-right: 0.7em;
  padding: 0 0.85em 0.1em;
  height: 2.2em;
  min-width: 2em;
  line-height: 1;
  border-radius: 1000px;
  letter-spacing: 0;
  content: attr(title);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.6em;
  color: #fff;
  font-weight: bold;
  background-color: #777;
}

[class*="f-h-4"] .f-h-sub {
  outline: 1px solid red;
  display: inherit;
}

.f-h-4-1::before {
  font-size: 0.7em;
}

.f-h-4-2::before {
  font-size: 0.8em;
}

.f-h-4-3::before {
  font-size: 0.9em;
}

/*-------------------
	h 5
-------------------*/
[class*="f-h-5"] {
  color: #fff;
  background-color: #777;
  padding: 0.5em 0.7em 0.6em 0.9em;
}

.f-h-5-1 {
  border: 5px double #fff;
}

.f-h-5-2,
.f-h-5-3,
.f-h-5-4 {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.2em 0.8em 0.2em 0.15em;
  vertical-align: bottom;
}

.f-h-5-2::before,
.f-h-5-3::before,
.f-h-5-4::before {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  margin: 0 0.8em 0 0.15em;
  padding: 0 0.5em;
  position: relative;
  content: attr(title);
  height: 2em;
  min-width: 2.1em;
  font-size: 0.8em;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.4);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}

.f-h-5-3,
.f-h-5-4 {
  overflow: hidden;
}

.f-h-5-3::before,
.f-h-5-4::before {
  position: static;
  margin: -0.4em 0.8em -0.4em -0.2em;
  height: 2.5em;
  min-width: 2.5em;
}

.f-h-5-3::before {
  height: 3.6em;
}

.f-h-5-4 {
  border: 5px double #fff;
}







/*-------------------
	h 6
-------------------*/
[class*="f-h-6"] {
  position: relative;
  display: flex;
  align-items: center;
}

[class*="f-h-6"]::before {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.2;
  margin-right: 0.9em;
  padding: 0.2em 0.5em;
  letter-spacing: 0.025em;
  position: relative;
  border-radius: 0.2em;
  border: 1px solid #ed0000;
  content: attr(title);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.4em;
  font-weight: bold;
  color: #ed0000;
}

.f-h-6-1::before {
  border: none;
  color: #fff;
  background-color: #ed0000;
}

/*-------------------
	h 7
-------------------*/
[class*="f-h-7"] {
  position: relative;
  letter-spacing: 0.05em;
  display: flex;
  align-items: stretch;
  padding: 0.5em 0.5em;
  font-weight: bold;
  color: #fff;
  background-color: #777;
}

[class*="f-h-7"]::before, [class*="f-h-7"]::after {
  content: "";
  display: block;
  border-bottom: 1px solid #fff;
  position: absolute;
  bottom: 2px;
  width: 100%;
}

[class*="f-h-7"]::after {
  bottom: auto;
  top: 2px;
  border-width: 1px;
}

.f-h-7__mark {
  position: relative;
  margin: -0.5em 1.2em -0.5em -0.5em;
  padding: 0.5em 0.2em 0.5em 0;
  display: inline-block;
  font-size: 100%;
  text-shadow: none;
  color: #333;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.f-h-7__mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  border-style: solid;
  border-width: 1.2em 0 1.2em 0.8em;
  border-color: transparent transparent transparent #fff;
}

/*==============================

	Blocks

==============================*/
/* f-block-steps
----------*/
[class*="f-block-steps"] {
  list-style-type: none;
  max-width: 1000px;
  margin: auto;
}

[class*="f-block-steps"] > * {
  position: relative;
}

[class*="f-block-steps"] > *:nth-child(2n)::after, [class*="f-block-steps"] > *:nth-child(3n)::after {
  position: absolute;
  z-index: 2;
  content: "";
  border-style: solid;
  width: 0;
  height: 0;
}

[class*="f-block-steps"] > *:nth-child(2n)::after {
  transform: translateY(-50%);
  top: 50%;
  left: -40px;
  border-width: 2.5vw 0 2.5vw 2.5vw;
  border-color: transparent transparent transparent #ccc;
}

[class*="f-block-steps"] > *:nth-child(3n)::after {
  transform: translate(50%, -50%);
  top: -16%;
  right: -40px;
  border-width: 3.4vw 0 0 3.4vw;
  border-color: transparent transparent transparent #ccc;
}

[class*="f-block-steps"].f-col-3 > *:nth-child(n + 2)::after {
  transform: translateY(-50%);
  top: 50%;
  left: -28px;
  border-width: 1.5vw 0 1.5vw 1.5vw;
  border-color: transparent transparent transparent #ccc;
}

.f-block-steps-1 > *:nth-child(n)::after {
  border-color: transparent transparent transparent #f00000;
}

.f-block-steps-2 > *:nth-child(n)::after {
  border-color: transparent transparent transparent #faa537;
}

.f-block-steps-3 > *:nth-child(n)::after {
  border-color: transparent transparent transparent #96c33c;
}

.f-block-steps-4 > *:nth-child(n)::after {
  border-color: transparent transparent transparent #f087b4;
}

.f-block-steps-5 > *:nth-child(n)::after {
  border-color: transparent transparent transparent #6eaae1;
}

.f-block-steps-6 > *:nth-child(n)::after {
  border-color: transparent transparent transparent #666;
}

@media screen and (min-width: 1080px) {
  [class*="f-block-steps"]:not(.f-col-3) > *:nth-child(2n)::after {
    border-width: 27px 0 27px 27px;
  }
  [class*="f-block-steps"]:not(.f-col-3) > *:nth-child(3n)::after {
    border-width: 37px 0 0 37px;
  }
  [class*="f-block-steps"]:not(.f-col-3).f-col-3 > *:nth-child(n + 2)::after {
    border-width: 27px 0 27px 27px;
  }
}

@media screen and (max-width: 560px) {
  [class*="f-block-steps"]:nth-child(n) > * + *:nth-child(n)::after {
    transform: translateX(-50%);
    top: -10%;
    left: 50%;
    border-width: 15px 15px 0 15px;
    border-color: #e60000 transparent transparent transparent;
  }
}

/*==============================

	Images: img

==============================*/
[class*="f-img"] {
  display: inline-block;
}

[class*="f-img"] img {
  height: auto;
  width: 100%;
}

/*-------------------
	img
-------------------*/
.f-img-flex {
  height: auto;
  width: 100%;
}

.f-IMG-flex img {
  height: auto;
  width: 100%;
}

.f-img-noflex {
  height: auto !important;
  width: auto !important;
}

.f-IMG-noflex img {
  height: auto !important;
  width: auto !important;
}

/*-------------------
	img 1
-------------------*/
[class*="f-img-1"] {
  position: relative;
  z-index: -1;
  width: 3em;
  height: 3em;
}

[class*="f-img-1"] img {
  border-radius: 1000px;
  display: block;
  height: 100% !important;
}

[class*="f-img-1-1"] {
  width: 5.6em;
  height: 5.6em;
}

[class*="f-img-1-2"] {
  width: 9em;
  height: 9em;
}
/*-------------------
	img 2
-------------------*/
[class*="f-img-2"] {
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}

.f-img-2-1 {
  border-radius: 12px;
}

.f-img-2-2 {
  border-radius: 18px;
}

.f-img-2-3 {
  border-radius: 6px 6px 0 0;
}

.f-img-2-4 {
  border-radius: 12px 12px 0 0;
}

/* 5 */
.f-img-2-5 {
  border-radius: 18px 18px 0 0;
}


/*-------------------
	img 3
-------------------*/
.f-img-3 {
  padding: 5px;
  border-width: 1px;
  border-style: solid;
  border-color: #ddd #aaa #aaa #ddd;
  background-color: #fff;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
}

/*-------------------
	img 4
-------------------*/
.f-img-4::after {
  border-top: 2px solid rgba(0, 0, 0, 0.2);
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 0 0 0.5em 0.5em;
  display: block;
  padding: 0.6em 1.4em;
  content: attr(title);
  width: 100%;
  font-size: 1.6rem;
  letter-spacing: 0.1em;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  color: #fff;
  background-color: #777;
}

/* 1 */
.f-img-4-1::before {
  border-top: 2px solid rgba(255, 255, 255, 0.4);
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.5em 0.5em 0 0;
  display: block;
  padding: 0.6em 1.4em;
  content: attr(title);
  width: 100%;
  font-size: 1.6rem;
  letter-spacing: 0.1em;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  color: #fff;
  background-color: #777;
}

/*==============================

    PRICE

==============================*/
/*==============================
    Bomber Price Lite
==============================*/
.f-bomberPriceLite {
  margin-top: 0.5em;
  margin-bottom: 0.3em;
  text-align: center;
  font-weight: bold;
  position: relative;
  z-index: 1;
}

.f-bomberPriceLite .f-num {
  margin: 0 0.1em;
  font-size: 4rem;
}

.f-bomberPriceLite__down {
  position: relative;
  text-align: center;
  min-height: 170px;
}

.f-bomberPriceLite__price {
  transform: translateX(-50%);
  position: absolute;
  font-size: 1em;
  width: 100%;
  left: 50%;
  bottom: 0;
  color: #000;
  font-weight: bold;
}

.f-bomberPriceLite__price .f-num {
  color: red;
  font-size: 5em;
  letter-spacing: -0.05em;
}

.f-bomberPriceLite__price > * {
  display: inline-block;
}

.f-bomberPriceLite__price__beforeText {
  margin-right: 0.4em;
}

.f-bomberPriceLite__option-1,
.f-bomberPriceLite__option-2 {
  margin-bottom: 0.2em;
  padding: 0.35em 0.32em;
  line-height: 1;
  color: red;
  font-size: 1.3rem;
  border: 2px solid red;
  background-color: #fff;
  display: block;
}

.f-bomberPriceLite__off {
  padding: 0.4em 0 0.2em;
  line-height: 1;
  position: relative;
  background-color: red;
  text-align: center;
  color: #fff;
  font-size: 200%;
}

.f-bomberPriceLite__off::after {
  transform: translateX(-50%) rotate(45deg);
  content: "";
  position: absolute;
  bottom: -30%;
  left: 50%;
  width: 50px;
  height: 50px;
  z-index: -1;
  background-color: red;
}

.f-bomberPriceLite__price__value {
  padding: 0.2em 0;
}

.f-bomberPriceLite__fire {
  transform: translateX(-50%);
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 80%;
  max-width: 600px;
  fill: yellow;
  z-index: -2;
  vertical-align: bottom;
}

/*====================
Media query
====================*/
@media screen and (max-width: 320px) {
  .f-bomberPriceLite__price__num {
    font-size: 6rem !important;
  }
  .f-bomberPriceLite__beforeText .f-num {
    font-size: 3rem;
  }
  .f-bomberPriceLite__price__tax {
    display: block;
    text-align: right;
  }
}

/*==============================

	Mark: mark, icon
	
==============================*/
[class*="f-mark-"] {
  font-family: "Barlow", Helvetica, Arial, sans-serif;
  letter-spacing: 0;
  line-height: 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  vertical-align: middle;
  color: #fff;
  background-color: #777;
  overflow: hidden;
}

[class*="f-mark-"] * {
  color: inherit;
}

[class*="f-mark-"] i {
  font-style: normal;
  opacity: 0.7;
}

[class*="f-mark-"] strong strong:nth-child(n) {
  font-size: 170%;
}

[class*="f-mark-"] span {
  display: block;
  width: 100%;
}

[class*="f-mark-"] span span {
  display: inline;
}

[class*="f-mark-"] hr {
  margin: 0.1em 0 0.1em;
  width: 100%;
  height: 0;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.7);
}

[class*="f-mark-"] .f-mt-1 {
  margin-top: 0.15em;
}

[class*="f-mark-"] .f-mt-2 {
  margin-top: 0.3em;
}

[class*="f-mark-"] .f-mt-3 {
  margin-top: 0.45em;
}

[class*="f-mark-"] .f-mt-4 {
  margin-top: 0.7em;
}

[class*="f-mark-"] .f-mt-5 {
  margin-top: 1em;
}

[class*="f-mark-"] .f-mb-1 {
  margin-bottom: 0.15em;
}

[class*="f-mark-"] .f-mb-2 {
  margin-bottom: 0.3em;
}

[class*="f-mark-"] .f-mb-3 {
  margin-bottom: 0.45em;
}

[class*="f-mark-"] .f-mb-4 {
  margin-bottom: 0.7em;
}

[class*="f-mark-"] .f-mb-5 {
  margin-bottom: 1em;
}

[class*="f-mark-"] .f-p {
  padding: 0.3em;
}

[class*="f-mark-"] .f-pv {
  padding-top: 0.3em;
  padding-bottom: 0.3em;
}

/* mark 1
----------*/
.f-mark-1 {
  display: inline-block;
  padding: 0.3em 0.5em 0.1em;
  min-width: 1.8em;
  min-height: 1.8em;
}

/* mark 2
----------*/
.f-mark-2 {
  height: 4.8em;
  width: 4.8em;
}

/* mark 3
----------*/
[class*="f-mark-3"] {
  height: 6em;
  width: 6em;
  background: url(https://www.shopjapan.co.jp/files/user/style_guide/img/badge_1.svg) no-repeat center;
}

.f-mark-3-1 {
  color: #000;
  background-image: url(https://www.shopjapan.co.jp/files/user/style_guide/img/badge_2.svg);
}

.f-mark-3-2 {
  background-image: url(https://www.shopjapan.co.jp/files/user/style_guide/img/badge_3.svg);
}

/* mark 4
----------*/
[class*="f-mark-4"] {
  position: relative;
  padding: 0.4em 1.2em 0.45em;
  text-shadow: -0.05em -0.05em rgba(0, 0, 0, 0.2);
}

[class*="f-mark-4"]::before, [class*="f-mark-4"]::after {
  transform: translateY(-50%) rotate(45deg) skew(22.5deg, 22.5deg);
  content: "";
  position: absolute;
  top: 50%;
  z-index: 10;
  width: 1.5em;
  height: 1.5em;
}

[class*="f-mark-4"]::before {
  left: -0.9em;
}

[class*="f-mark-4"]::after {
  right: -0.9em;
}

.f-mark-4-1::before {
  display: none;
}

.f-mark-4-2::after {
  display: none;
}

/* mark 5
----------*/
[class*="f-mark-5"] {
  position: relative;
  z-index: 10;
  padding: 0.4em 0 0;
  margin-bottom: 2em;
  overflow: visible;
  width: 3em;
  box-shadow: 0 0.1em 0 rgba(255, 255, 255, 0.2) inset;
  border-bottom: none;
}

[class*="f-mark-5"]::before, [class*="f-mark-5"]::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -1.7em;
  background-color: #777;
  width: 2em;
  height: 2em;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.1);
}

[class*="f-mark-5"]::before {
  transform-origin: left;
  transform: rotate(-22.5deg) skew(-22.5deg, -22.5deg);
  left: 0;
}

[class*="f-mark-5"]::after {
  transform-origin: right;
  transform: rotate(22.5deg) skew(22.5deg, 22.5deg);
  right: 0;
}

/* mark 6
----------*/
[class*="f-mark-6"] {
  margin: 0 -0.6em;
  padding: 0.5em 1em 0.6em;
  position: relative;
  overflow: visible;
  text-shadow: -0.05em -0.05em rgba(0, 0, 0, 0.2);
  box-shadow: 0 0.15em 0 rgba(0, 0, 0, 0.1);
  border-style: solid;
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.4) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1);
}

[class*="f-mark-6"]::before, [class*="f-mark-6"]::after {
  content: "";
  position: absolute;
  bottom: 0;
  z-index: -1;
  background-color: #555;
  width: 1em;
  height: 1em;
}

[class*="f-mark-6"]::before {
  transform-origin: left;
  transform: rotate(22.5deg) skew(22.5deg, 22.5deg);
  left: 0;
}

[class*="f-mark-6"]::after {
  transform-origin: right;
  transform: rotate(-22.5deg) skew(-22.5deg, -22.5deg);
  right: 0;
}

/* mark 7
----------*/
[class*="f-mark-7"] {
  position: relative;
  padding: 0.2em 0;
  text-shadow: -0.05em -0.05em rgba(0, 0, 0, 0.2);
  width: 7em;
  height: 7em;
  background-color: transparent;
}

[class*="f-mark-7"]::before, [class*="f-mark-7"]::after {
  content: "";
  position: absolute;
  z-index: -1;
  background-color: #555;
}

[class*="f-mark-7"]::before {
  top: 0;
  left: 5.8em;
  width: 1em;
  height: 0.5em;
}

[class*="f-mark-7"]::after {
  top: 5.8em;
  left: 0;
  width: 0.5em;
  height: 1em;
}

[class*="f-mark-7"] > * {
  position: absolute;
  top: 1.25em;
  left: -2.5em;
  padding: 0.75em 0 0.8em;
  width: 10em !important;
  box-shadow: 0 0.15em 0 rgba(0, 0, 0, 0.1), 0 -0.1em 0 rgba(0, 0, 0, 0.1) inset;
  display: block;
  transform: rotate(-45deg);
  background-color: #777;
}

.f-mark-7.f-pos-1-2 {
  top: -0.5em;
  left: -0.5em;
}

.f-mark-7-1::before {
  left: auto;
  right: 5.8em;
}

.f-mark-7-1::after {
  left: auto;
  right: 0;
}

.f-mark-7-1 > * {
  left: auto;
  right: -2.5em;
  transform: rotate(45deg);
}

.f-mark-7-1.f-pos-3-2 {
  top: -0.5em;
  right: -0.5em;
}

/*===============
 icon
 iconのスタイルは wow_magic.js で適用されます。
 この際、f-pos が使われます。
===============*/
[class*="f-icon"] {
  position: relative;
  overflow: visible;
}

[class*="f-icon"] > [class*="f-icon__icon-"] {
  width: auto;
  z-index: 100;
}

[class*="f-icon"] > [class*="f-icon__icon-"] img {
  height: auto !important;
  width: auto !important;
  vertical-align: center;
}

[class*="f-icon"]:not(.f-mark-2) .f-icon__icon-0 {
  margin-right: 0.5em;
}

[class*="f-icon"]:not(.f-mark-2) .f-icon__icon-1 {
  margin-left: 0.5em;
}

.f-pos [class*="f-pos-"][class*="f-icon-"] {
  position: absolute;
}

/*==============================

	Lists: list

==============================*/
/*====================
	ol
====================*/
[class*="f-ol-"],
[class*="f-ul-"] {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

[class*="f-ol-"] li,
[class*="f-ul-"] li {
  margin: 0;
  padding: 0;
}

[class*="f-ol-"] li + li,
[class*="f-ul-"] li + li {
  margin-top: 0.8em;
}

/* ol 1
----------*/
[class*="f-ol-"] li {
  counter-increment: list-1;
  margin: 0;
  position: relative;
  padding-left: 1.8em;
}

[class*="f-ol-"] li::before {
  content: counter(list-1) ".";
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1;
  position: absolute;
  left: 0;
  font-weight: bold;
  font-style: italic;
  color: #aaa;
}

[class*="f-ol-1"]::before {
  font-size: 150%;
}

.f-ol-1-1 li::before {
  color: #777;
}

.f-ol-1-2 li::before {
  color: #eb9628;
}

.f-ol-1-3 li::before {
  color: #64a0d7;
}

.f-ol-1-4 li::before {
  color: #69b327;
}

/* 5 */
.f-ol-1-5 li::before {
  color: #333;
}

/* ol 2
----------*/
[class*="f-ol-2"] li,
[class*="f-ol-3"] li {
  padding-left: 2.8em;
}

[class*="f-ol-2"] li::before,
[class*="f-ol-3"] li::before {
  content: counter(list-1);
  transform: translateY(-50%);
  top: 50%;
  padding-top: 0.45em;
  border-radius: 100px;
  width: 2em;
  height: 2em;
  background-color: #ddd;
  text-align: center;
  color: #000;
  font-size: 100%;
  font-style: normal;
}

.f-ol-2-1 li::before {
  color: #fff;
  background-color: #777;
}

.f-ol-2-2 li::before {
  color: #fff;
  background-color: #eb9628;
}

.f-ol-2-3 li::before {
  color: #fff;
  background-color: #64a0d7;
}

.f-ol-2-4 li::before {
  color: #fff;
  background-color: #69b327;
}

/* 5 */
.f-ol-2-5 li::before {
  color: #fff;
  background-color: #333;
}

/* ol 3
----------*/
[class*="f-ol-3"] li::before {
  border: 1px solid #ccc;
  border-radius: 0;
  background-color: transparent;
}

.f-ol-3 li::before {
  color: #333;
}

/* 3-1 */
.f-ol-3-1 li::before {
  color: #777;
  border-color: #ffbcbc;
}

/* 3-2 */
.f-ol-3-2 li::before {
  color: #f26800;
  border-color: #f2bf85;
}

/* 3-3 */
.f-ol-3-3 li::before {
  color: #1f7fd3;
  border-color: #bad8f2;
}

/* 3-4 */
.f-ol-3-4 li::before {
  border-color: #aaea6e;
  color: #5ba01b;
}

/* 3-5 */
.f-ol-3-5 li::before {
  border: none;
  color: #fff;
  background-color: #555;
}

/* ol 4
----------*/
/* ol 5
----------*/
.f-ol-5 li {
  text-indent: -1.6em;
  counter-increment: list-1;
  margin-left: 1.5em;
  padding-left: 0;
  font-size: 1.4rem;
}

.f-ol-5 li + li {
  margin-top: 0;
}

.f-ol-5 li::before {
  position: relative;
  top: -0.1em;
  font-weight: normal;
  letter-spacing: 0.1em;
  color: #333;
  margin-right: 0.3em;
  content: "※" counter(list-1);
  font-style: normal;
  font-size: 100%;
}

/*===============
	ul
===============*/
[class*="f-ul-"] li {
  margin-left: 1.5em;
}

[class*="f-ul-"] li + li {
  margin-top: 0;
}

.f-ul-1 li {
  list-style-type: disc;
}

.f-ul-1-1 {
  line-height: 1.2;
  font-size: 1.4rem;
}

.f-ul-1-1 li {
  text-indent: -1.1em;
}

.f-ul-1-1 li::before {
  margin-right: 0.2em;
  content: "※";
}

.f-ul-1-2 li {
  list-style-type: circle;
}

.f-ul-1-3 li {
  list-style-type: square;
}

.f-ul-1-4 li {
  margin-left: 0;
}

/* dl 1
----------*/
[class*="f-dl-1"] {
  margin: 0;
  padding: 0;
}

[class*="f-dl-1"]::after {
  content: "";
  display: block;
  clear: both;
}

[class*="f-dl-1"] dt {
  padding: 1rem 0;
  float: left;
  clear: left;
  width: 23%;
  font-weight: bold;
}

[class*="f-dl-1"] dd {
  padding: 1rem 0;
  margin-left: 23%;
}

.f-dl-1-1,
.f-dl-1-2,
.f-dl-1-3 {
  border-bottom: 1px solid #ddd;
}

.f-dl-1-1 dt,
.f-dl-1-1 dd,
.f-dl-1-2 dt,
.f-dl-1-2 dd,
.f-dl-1-3 dt,
.f-dl-1-3 dd {
  border-top: 1px solid #ddd;
}

.f-dl-1-2 {
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
}

.f-dl-1-2 dt,
.f-dl-1-2 dd {
  padding: 1em;
}

.f-dl-1-2 dd {
  border-left: 1px solid #ddd;
}

@media screen and (max-width: 768px) {
  [class*="f-dl-1"] dt {
    padding: 3.5% 0 2%;
    width: 100%;
    float: none;
  }
  [class*="f-dl-1"] dd {
    padding: 0 0 3.5%;
    border-top: none;
    margin-left: 0;
  }
  .f-dl-1-2 dt,
  .f-dl-1-2 dd {
    padding-left: 6%;
    padding-right: 6%;
  }
  .f-dl-1-2 dd {
    border-left: none;
  }
}
/*===============
	Table
===============*/
[class*="f-table"] {
  width: 100%;
  overflow: auto;
  border-collapse: collapse;
  border-spacing: 0;
}

[class*="f-table"] thead {
  text-align: left;
}

[class*="f-table"] th,
[class*="f-table"] td {
  text-align: left;
  padding: 1em;
}

.f-table thead {
  border-bottom: 1px solid #ddd;
}

.f-table tr > * + * {
  padding-left: 1em;
}

.f-table tr + * {
  border-top: 1px dashed #ddd;
}

.f-table-1,
.f-table-2 {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

.f-table-1 th,
.f-table-1 td,
.f-table-2 th,
.f-table-2 td {
  border-top: 1px solid #ddd;
}

.f-table-1 th,
.f-table-2 th {
  background-color: #eee;
}

.f-table-1 tr:nth-child(even) {
  background-color: #f5f5f5;
}

.f-table-2 {
  border-left: 1px solid #ccc;
}

.f-table-2 th,
.f-table-2 td {
  border-right: 1px solid #ccc;
}

.f-table-2 th {
  background-color: #f5f5f5;
}

/*=========================

	Buttons: button

=========================*/
[class*="f-button"] {
  font-family: "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  margin: 0;
  letter-spacing: 0;
  padding: 0.5em 1em 0.55em;
  display: inline-block;
  line-height: 1;
  letter-spacing: 0.025em;
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  font-weight: bold;
  color: #fff;
  font-size: 1.5rem;
  text-decoration: none;
  border: none;
  background-color: #777;
}

[class*="f-button"]:hover {
  top: 1px;
  box-shadow: none;
  filter: saturate(110%) brightness(105%);
}

[class*="f-button"] a {
  margin: -0.5em -1em -0.55em;
  padding: 0.5em 1em 0.55em;
  color: inherit;
  text-decoration: none;
  display: block;
}

.f-button-1 {
  padding: 0.8em 0;
  width: 16em;
}

.f-button-2 {
  padding: 1em 0;
  width: 19em;
}

/*===============
	Border
===============*/
.f-bd,
[class*="f-bd-"] {
  border-width: 1px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.2);
}

.f-bd-1 {
  border-width: 3px;
}

.f-bd-2 {
  border-width: 4px;
  border-style: double;
}

.f-bd-3 {
  border-style: dashed;
}

.f-bd-4 {
  border-style: dotted;
}

/* Emboss 1 */
.f-bd-5,
.f-bd-7,
.f-bd-9 {
  border-width: 0.2em 0 0.2em 0;
}

.f-bd-6,
.f-bd-8,
.f-bd-10 {
  border-width: 0.4em 0 0.4em 0;
}

.f-bd-5,
.f-bd-6 {
  border-top-color: rgba(255, 255, 255, 0.5);
  border-bottom-color: rgba(0, 0, 0, 0.15);
}

.f-bd-7,
.f-bd-8 {
  border-top-color: rgba(0, 0, 0, 0.15);
  border-bottom-color: rgba(0, 0, 0, 0.15);
}

.f-bd-9,
.f-bd-10 {
  border-top-color: rgba(255, 255, 255, 0.5);
  border-bottom-color: rgba(255, 255, 255, 0.5);
}

.f-bd-11,
.f-bd-12 {
  border-width: 0.1em 0.1em 0.2em 0.1em;
  border-color: rgba(255, 255, 255, 0.5) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(255, 255, 255, 0.3);
  box-shadow: 0.1em 0.1em 0.1em rgba(0, 0, 0, 0.2);
  text-shadow: -1px -1px 2px rgba(0, 0, 0, 0.2);
}

.f-bd-12 {
  border-width: 0.2em 0.2em 0.25em 0.2em;
}

.f-bd-13 {
  border-width: 0.3em;
}

.f-bd-14 {
  border-width: 1px 0 0;
}

.f-bd-15 {
  border-width: 0 0 1px;
}

.f-bd-16 {
  border-width: 0 0 0 1px;
}

.f-bd-17 {
  border-width: 0 1px 0 0;
}

.f-bd-18 {
  border-width: 1px 0;
}

.f-bd-19 {
  border-width: 0 1px;
}

/*===============
	Border-Width
===============*/
.f-bd.f-bdw-1, .f-bd-1.f-bdw-1, .f-bd-2.f-bdw-1, .f-bd-3.f-bdw-1, .f-bd-4.f-bdw-1 {
  border-width: 1px;
}

.f-bd.f-bdw-2, .f-bd-1.f-bdw-2, .f-bd-2.f-bdw-2, .f-bd-3.f-bdw-2, .f-bd-4.f-bdw-2 {
  border-width: 2px;
}

.f-bd.f-bdw-3, .f-bd-1.f-bdw-3, .f-bd-2.f-bdw-3, .f-bd-3.f-bdw-3, .f-bd-4.f-bdw-3 {
  border-width: 3px;
}

.f-bd.f-bdw-4, .f-bd-1.f-bdw-4, .f-bd-2.f-bdw-4, .f-bd-3.f-bdw-4, .f-bd-4.f-bdw-4 {
  border-width: 4px;
}

.f-bd.f-bdw-5, .f-bd-1.f-bdw-5, .f-bd-2.f-bdw-5, .f-bd-3.f-bdw-5, .f-bd-4.f-bdw-5 {
  border-width: 5px;
}

.f-bd-5.f-bdw-1, .f-bd-6.f-bdw-1, .f-bd-7.f-bdw-1, .f-bd-8.f-bdw-1, .f-bd-9.f-bdw-1, .f-bd-10.f-bdw-1 {
  border-width: 0.2em 0 0.2em 0;
}

.f-bd-5.f-bdw-2, .f-bd-6.f-bdw-2, .f-bd-7.f-bdw-2, .f-bd-8.f-bdw-2, .f-bd-9.f-bdw-2, .f-bd-10.f-bdw-2 {
  border-width: 0.4em 0 0.4em 0;
}

.f-bd-5.f-bdw-3, .f-bd-6.f-bdw-3, .f-bd-7.f-bdw-3, .f-bd-8.f-bdw-3, .f-bd-9.f-bdw-3, .f-bd-10.f-bdw-3 {
  border-width: 0.6em 0 0.6em 0;
}

.f-bd-5.f-bdw-4, .f-bd-6.f-bdw-4, .f-bd-7.f-bdw-4, .f-bd-8.f-bdw-4, .f-bd-9.f-bdw-4, .f-bd-10.f-bdw-4 {
  border-width: 0.8em 0 0.8em 0;
}

.f-bd-5.f-bdw-5, .f-bd-6.f-bdw-5, .f-bd-7.f-bdw-5, .f-bd-8.f-bdw-5, .f-bd-9.f-bdw-5, .f-bd-10.f-bdw-5 {
  border-width: 1em 0 1em 0;
}

.f-bd-11.f-bdw-1 {
  border-width: 0.1em 0.1em 0.2em 0.1em;
}

.f-bd-11.f-bdw-2 {
  border-width: 0.3em 0.3em 0.4em 0.3em;
}

.f-bd-11.f-bdw-3 {
  border-width: 0.5em 0.5em 0.6em 0.5em;
}

.f-bd-11.f-bdw-4 {
  border-width: 0.7em 0.7em 0.8em 0.7em;
}

.f-bd-11.f-bdw-5 {
  border-width: 0.9em 0.9em 1em 0.9em;
}

.f-bd-12.f-bdw-1 {
  border-width: 0.2em 0.2em 0.25em 0.2em;
}

.f-bd-12.f-bdw-2 {
  border-width: 0.4em 0.4em 0.45em 0.4em;
}

.f-bd-12.f-bdw-3 {
  border-width: 0.6em 0.6em 0.65em 0.6em;
}

.f-bd-12.f-bdw-4 {
  border-width: 0.8em 0.8em 0.85em 0.8em;
}

.f-bd-12.f-bdw-5 {
  border-width: 1em 1em 1.05em 1em;
}

.f-bd-13.f-bdw-1 {
  border-width: 0.3em;
}

.f-bd-13.f-bdw-2 {
  border-width: 0.6em;
}

.f-bd-13.f-bdw-3 {
  border-width: 0.9em;
}

.f-bd-13.f-bdw-4 {
  border-width: 1.2em;
}

.f-bd-13.f-bdw-5 {
  border-width: 1.5em;
}

.f-bd-14.f-bdw-1 {
  border-width: 1px 0 0;
}

.f-bd-14.f-bdw-2 {
  border-width: 2px 0 0;
}

.f-bd-14.f-bdw-3 {
  border-width: 3px 0 0;
}

.f-bd-14.f-bdw-4 {
  border-width: 4px 0 0;
}

.f-bd-14.f-bdw-5 {
  border-width: 5px 0 0;
}

.f-bd-15.f-bdw-1 {
  border-width: 0 0 1px;
}

.f-bd-15.f-bdw-2 {
  border-width: 0 0 2px;
}

.f-bd-15.f-bdw-3 {
  border-width: 0 0 3px;
}

.f-bd-15.f-bdw-4 {
  border-width: 0 0 4px;
}

.f-bd-15.f-bdw-5 {
  border-width: 0 0 5px;
}

.f-bd-16.f-bdw-1 {
  border-width: 0 0 0 1px;
}

.f-bd-16.f-bdw-2 {
  border-width: 0 0 0 2px;
}

.f-bd-16.f-bdw-3 {
  border-width: 0 0 0 3px;
}

.f-bd-16.f-bdw-4 {
  border-width: 0 0 0 4px;
}

.f-bd-16.f-bdw-5 {
  border-width: 0 0 0 5px;
}

.f-bd-17.f-bdw-1 {
  border-width: 0 1px 0 0;
}

.f-bd-17.f-bdw-2 {
  border-width: 0 2px 0 0;
}

.f-bd-17.f-bdw-3 {
  border-width: 0 3px 0 0;
}

.f-bd-17.f-bdw-4 {
  border-width: 0 4px 0 0;
}

.f-bd-17.f-bdw-5 {
  border-width: 0 5px 0 0;
}

.f-bd-18.f-bdw-1 {
  border-width: 1px 0;
}

.f-bd-18.f-bdw-2 {
  border-width: 2px 0;
}

.f-bd-18.f-bdw-3 {
  border-width: 3px 0;
}

.f-bd-18.f-bdw-4 {
  border-width: 4px 0;
}

.f-bd-18.f-bdw-5 {
  border-width: 5px 0;
}

.f-bd-19.f-bdw-1 {
  border-width: 0 1px;
}

.f-bd-19.f-bdw-2 {
  border-width: 0 2px;
}

.f-bd-19.f-bdw-3 {
  border-width: 0 3px;
}

.f-bd-19.f-bdw-4 {
  border-width: 0 4px;
}

.f-bd-19.f-bdw-5 {
  border-width: 0 5px;
}

/*===============
	Radius
===============*/
.f-rad {
  border-radius: 0.2em;
}

.f-rad-1 {
  border-radius: 0.4em;
}

.f-rad-2 {
  border-radius: 0.6em;
}

.f-rad-3 {
  border-radius: 0.8em;
}

.f-rad-4 {
  border-radius: 1.2em;
}

.f-rad-5 {
  border-radius: 1000px;
}

/* Top */
.f-rad-6 {
  border-radius: 0.15em 0.15em 0 0;
}

.f-rad-7 {
  border-radius: 0.3em 0.3em 0 0;
}

.f-rad-8 {
  border-radius: 0.6em 0.6em 0 0;
}

.f-rad-9 {
  border-radius: 1em 1em 0 0;
}

.f-rad-10 {
  border-radius: 2em 2em 0 0;
}

.f-rad-11 {
  border-radius: 1000px 1000px 0 0;
}

/* Bottom */
.f-rad-12 {
  border-radius: 0 0 0.15em 0.15em;
}

.f-rad-13 {
  border-radius: 0 0 0.3em 0.3em;
}

.f-rad-14 {
  border-radius: 0 0 0.6em 0.6em;
}

.f-rad-15 {
  border-radius: 0 0 1em 1em;
}

.f-rad-16 {
  border-radius: 0 0 2em 2em;
}

.f-rad-17 {
  border-radius: 0 0 1000px 1000px;
}

/*--------------------
	Call
--------------------*/
[class*="f-call"] {
  position: relative;
  background-color: #eee;
  overflow: visible;
}

[class*="f-call"]::after {
  content: "";
  position: absolute;
  width: 1em;
  height: 1em;
  z-index: 0;
  background-color: #eee;
}

.f-call::after {
  top: -0.4em;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

.f-call-1::after {
  transform: translateY(-50%) skew(-45deg);
  top: 50%;
  right: -0.4em;
}

.f-call-2::after {
  bottom: -0.4em;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

.f-call-3::after {
  transform: translateY(-50%) skew(45deg);
  top: 50%;
  left: -0.4em;
}

/* Corner */
.f-call-4::after {
  border: 1px solid red;
  transform: skew(45deg) rotate(30deg);
  top: 0.3em;
  left: 0.3em;
}

.f-call-5::after {
  transform: skew(-45deg) rotate(-30deg);
  top: 0.3em;
  right: 0.3em;
}

.f-call-6::after {
  transform: skew(-45deg) rotate(-30deg);
  bottom: 0.3em;
  left: 0.3em;
}

.f-call-7::after {
  transform: skew(45deg) rotate(30deg);
  bottom: 0.3em;
  right: 0.3em;
}

/*===============
	Separator
===============*/
[class*="f-sep-1"] > * {
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}

[class*="f-sep-1"] > *:first-child {
  padding-top: 0;
  border: none;
}

[class*="f-sep-1"] > *:last-child {
  padding-bottom: 0;
}

.f-sep-1-1 > * {
  border-top-style: dashed;
}

[class*="f-sep-2"] > * {
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}

[class*="f-sep-2"] > *:last-child {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.f-sep-2-1 > * {
  border-top-style: dashed;
}

.f-sep-2-1 > *:last-child {
  border-bottom-style: dashed;
}

/*===============
	Horizontal line
===============*/
[class*="f-hr"] {
  border: none;
  margin: 5% 0 5%;
}

.f-hr {
  background-color: #ccc;
  height: 1px;
}

.f-hr-1 {
  border-top: 1px dotted #999;
}

.f-hr-2 {
  position: relative;
}

.f-hr-2::before {
  transform: translateX(-50%);
  position: absolute;
  top: 0;
  left: 0;
  left: 50%;
  content: "";
  display: block;
  height: 1px;
  width: 50%;
  background-color: #777;
}

/*===============
	Width: w
===============*/


@media screen and (min-width: 769px) {
.f-w {
  width: auto!important;
}

.f-w-1 {
  width: 10%!important;
}

.f-w-2 {
  width: 20%!important;
}

.f-w-3 {
  width: 30%!important;
}

.f-w-4 {
  width: 40%!important;
}

.f-w-5 {
  width: 50%!important;
}

.f-w-6 {
  width: 60%!important;
}

.f-w-7 {
  width: 70%!important;
}

.f-w-8 {
  width: 80%!important;
}

.f-w-9 {
  width: 90%!important;
}

.f-w-10 {
  width: 100%!important;
}
}


.f-w {
  width: auto;
}

.f-w-1 {
  width: 10%;
}

.f-w-2 {
  width: 20%;
}

.f-w-3 {
  width: 30%;
}

.f-w-4 {
  width: 40%;
}

.f-w-5 {
  width: 50%;
}

.f-w-6 {
  width: 60%;
}

.f-w-7 {
  width: 70%;
}

.f-w-8 {
  width: 80%;
}

.f-w-9 {
  width: 90%;
}

.f-w-10 {
  width: 100%;
}

/*===============
	Min width
===============*/
.f-min-w {
  min-width: 50px;
}

.f-min-w-1 {
  min-width: 100px;
}

.f-min-w-2 {
  min-width: 200px;
}

.f-min-w-3 {
  min-width: 300px;
}

.f-min-w-4 {
  min-width: 400px;
}

.f-min-w-5 {
  min-width: 500px;
}

.f-min-w-6 {
  min-width: 600px;
}

.f-min-w-7 {
  min-width: 700px;
}

.f-min-w-8 {
  min-width: 800px;
}

.f-min-w-9 {
  min-width: 900px;
}

.f-min-w-10 {
  min-width: 1000px;
}

/*===============
	Max width
===============*/
.f-max-w {
  max-width: 50px;
}

.f-max-w-1 {
  max-width: 100px;
}

.f-max-w-2 {
  max-width: 200px;
}

.f-max-w-3 {
  max-width: 300px;
}

.f-max-w-4 {
  max-width: 400px;
}

.f-max-w-5 {
  max-width: 500px;
}

.f-max-w-6 {
  max-width: 600px;
}

.f-max-w-7 {
  max-width: 700px;
}

.f-max-w-8 {
  max-width: 800px;
}

.f-max-w-9 {
  max-width: 900px;
}

.f-max-w-10 {
  max-width: 1000px;
}

@media screen and (max-width: 768px) {
  .f-tb-w-clear {
    width: auto;
    min-width: 0;
    max-width: none;
  }
}

@media screen and (max-width: 480px) {
  .f-tbsp-w-clear {
    width: auto;
    min-width: 0;
    max-width: none;
  }
}

@media screen and (max-width: 375px) {
  .f-sp-w-clear {
    width: auto;
    min-width: 0;
    max-width: none;
  }
}

/*=========================

	Background Pattern

画像格納場所: /files/user/style_guide/img/
=========================*/
[class*="f-bgi"],
[class*="f-bgiPse"]::before,
[class*="f-bgiPse"]::after {
  background-blend-mode: color-dodge;
}

.f-bgi,
.f-bgiPse::before,
.f-bgiPse::after {
  background-image: url(img/bg_00.png);
}

.f-bgi-1,
.f-bgiPse-1::before,
.f-bgiPse-1::after {
  background-image: url(img/bg_01.png);
}

.f-bgi-2,
.f-bgiPse-2::before,
.f-bgiPse-2::after {
  background-image: url(img/bg_02.png);
}

.f-bgi-3,
.f-bgiPse-3::before,
.f-bgiPse-3::after {
  background-image: url(img/bg_03.png);
}

.f-bgi-4,
.f-bgiPse-4::before,
.f-bgiPse-4::after {
  background-image: url(img/bg_04.png);
}

.f-bgi-5,
.f-bgiPse-5::before,
.f-bgiPse-5::after {
  background-image: url(img/bg_05.png);
}

.f-bgi-6,
.f-bgiPse-6::before,
.f-bgiPse-6::after {
  background-image: url(img/bg_06.png);
}

.f-bgi-7,
.f-bgiPse-7::before,
.f-bgiPse-7::after {
  background-image: url(img/bg_07.png);
}

.f-bgi-8,
.f-bgiPse-8::before,
.f-bgiPse-8::after {
  background-image: url(img/bg_08.png);
}

.f-bgi-9,
.f-bgiPse-9::before,
.f-bgiPse-9::after {
  background-image: url(img/bg_09.png);
}

.f-bgi-10,
.f-bgiPse-10::before,
.f-bgiPse-10::after {
  background-image: url(img/bg_10.png);
}

.f-bgi-11,
.f-bgiPse-11::before,
.f-bgiPse-11::after {
  background-image: url(img/bg_11.png);
}

.f-bgi-12,
.f-bgiPse-12::before,
.f-bgiPse-12::after {
  background-image: url(img/bg_12.png);
}

.f-bgi-13,
.f-bgiPse-13::before,
.f-bgiPse-13::after {
  background-image: url(img/bg_13.png);
}

.f-bgi-14,
.f-bgiPse-14::before,
.f-bgiPse-14::after {
  background-image: url(img/bg_14.png);
}

.f-bgi-15,
.f-bgiPse-15::before,
.f-bgiPse-15::after {
  background-image: url(img/bg_15.png);
}

.f-bgi-16,
.f-bgiPse-16::before,
.f-bgiPse-16::after {
  background-image: url(img/bg_16.png);
}

.f-bgi-17,
.f-bgiPse-17::before,
.f-bgiPse-17::after {
  background-image: url(img/bg_17.png);
}

.f-bgi-18,
.f-bgiPse-18::before,
.f-bgiPse-18::after {
  background-image: url(img/bg_18.png);
}

.f-bgi-19,
.f-bgiPse-19::before,
.f-bgiPse-19::after {
  background-image: url(img/bg_19.png);
}

.f-bgi-20,
.f-bgiPse-20::before,
.f-bgiPse-20::after {
  background-image: url(img/bg_20.png);
}

.f-bgi-21,
.f-bgiPse-21::before,
.f-bgiPse-21::after {
  background-image: url(img/bg_21.png);
}

.f-bgi-22,
.f-bgiPse-22::before,
.f-bgiPse-22::after {
  background-image: url(img/bg_22.png);
}

.f-bgi-23,
.f-bgiPse-23::before,
.f-bgiPse-23::after {
  background-image: url(img/bg_23.png);
}

.f-bgi-24,
.f-bgiPse-24::before,
.f-bgiPse-24::after {
  background-image: url(img/bg_24.png);
}

.f-bgi-25,
.f-bgiPse-25::before,
.f-bgiPse-25::after {
  background-image: url(img/bg_25.png);
}

.f-bgi-26,
.f-bgiPse-26::before,
.f-bgiPse-26::after {
  background-image: url(img/bg_26.png);
}

.f-bgi-27,
.f-bgiPse-27::before,
.f-bgiPse-27::after {
  background-image: url(img/bg_27.png);
}

.f-bgi-28,
.f-bgiPse-28::before,
.f-bgiPse-28::after {
  background-image: url(img/bg_28.png);
}

.f-bgi-29,
.f-bgiPse-29::before,
.f-bgiPse-29::after {
  background-image: url(img/bg_29.png);
}

.f-bgi-30,
.f-bgiPse-30::before,
.f-bgiPse-30::after {
  background-image: url(img/bg_30.png);
}

.f-bgi-31,
.f-bgiPse-31::before,
.f-bgiPse-31::after {
  background-image: url(img/bg_31.png);
}

.f-bgi-32,
.f-bgiPse-32::before,
.f-bgiPse-32::after {
  background-image: url(img/bg_32.png);
}

/*==============================

    Transform & Animations

==============================*/
/*====================
    rotation
====================*/
.f-deg {
  transform: rotate(-30deg);
}

.f-deg-1 {
  transform: rotate(-15deg);
}

.f-deg-2 {
  transform: rotate(-5deg);
}

.f-deg-3 {
  transform: rotate(5deg);
}

.f-deg-4 {
  transform: rotate(15deg);
}

.f-deg-5 {
  transform: rotate(30deg);
}

/*===============
    Fade
===============*/
[class*="(f-fade"] {
  opacity: 0;
}

.f-fade {
  animation: f_fade 1s both;
}

.f-fade-1 {
  animation: f_fade_1 1s both;
}

.f-fade-2 {
  animation: f_fade_2 1s both;
}

.f-fade-3 {
  animation: f_fade_3 1s both;
}

.f-fade-4 {
  animation: f_fade_4 1s both;
}

.f-fade-5 {
  animation: f_fade_5 1s both;
}

.f-fade-6 {
  animation: f_fade_6 1s both;
}

/*====================
    Rotate
====================*/
.f-rotate {
  animation: f_rotate 1s;
}

.f-rotate-1 {
  animation: f_rotate_1 1s;
}

.f-rotate-2 {
  animation: f_rotate_2 1s;
}

.f-rotate-3 {
  animation: f_rotate_3 1s;
}

/*------*/
.f-flash {
  animation: f_flash 1s;
}

.f-flash-1 {
  animation: f_flash_1 1s;
}

.f-flash-2 {
  animation: f_flash_2 1s;
}

.f-flash-3 {
  animation: f_flash_3 1s;
}

/*====================
    Twincle
====================*/
.f-twinkle, .wow-twinkle-1 {
  position: relative;
  overflow: hidden;
}

.f-twinkle::before, .wow-twinkle-1::before {
  transform: skew(40deg) translateX(-120%);
  animation: f_twinkle_slide 1.5s 1s;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 25%, white 75%, rgba(255, 255, 255, 0) 100%);
}

.f-twinkle > *, .wow-twinkle-1 > * {
  animation: f_flash_3 1.5s 1.5s;
}

@keyframes f_twinkle_slide {
  0% {
    transform: skew(30deg) translateX(-100%);
  }
  25% {
    transform: skew(30deg) translateX(100%);
  }
  100% {
    opacity: 0;
    transform: skew(30deg) translateX(100%);
  }
}

/*====================
    Twincle extend Twincle Reflect
====================*/
.wow-twinkle-1::before {
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 100%);
  animation: f_twinkle_slide 3s 2s;
}

.wow-twinkle-1 > * {
  animation: none;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    Keyframes

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* Fade
----------*/
@keyframes f_fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes f_fade_1 {
  0% {
    opacity: 0;
    transform: translate(0, -3em);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes f_fade_2 {
  0% {
    opacity: 0;
    transform: translate(3em, 0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes f_fade_3 {
  0% {
    opacity: 0;
    transform: translate(0, 3em);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes f_fade_4 {
  0% {
    opacity: 0;
    transform: translate(-3em, 0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes f_fade_5 {
  0% {
    opacity: 0;
    transform: scale(1.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes f_fade_6 {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Rotate
----------*/
@keyframes f_rotate {
  0% {
    opacity: 0;
    transform: rotate(45deg);
  }
  100% {
    opacity: 1;
  }
}

@keyframes f_rotate_1 {
  0% {
    opacity: 0;
    transform: rotate(-45deg);
  }
  100% {
    opacity: 1;
  }
}

@keyframes f_rotate_2 {
  0% {
    opacity: 0;
    transform: scale(0.1) rotate(45deg);
  }
  100% {
    opacity: 1;
  }
}

@keyframes f_rotate_3 {
  0% {
    opacity: 0;
    transform: scale(0.1) rotate(-45deg);
  }
  100% {
    opacity: 1;
  }
}

/* Flash
----------*/
@keyframes f_flash {
  0% {
    filter: brightness(125%);
  }
}

@keyframes f_flash_1 {
  0% {
    filter: brightness(150%);
  }
}

@keyframes f_flash_2 {
  0% {
    filter: brightness(200%);
  }
}

@keyframes f_flash_3 {
  0% {
    filter: brightness(250%);
  }
}

@keyframes f-bounce {
  0% {
    transform: scale(1, 1) translate(0%, 0%);
  }
  40% {
    transform: scale(0.95, 1.2) translate(0%, -10%);
  }
  50% {
    transform: scale(1.1, 0.9) translate(0%, 5%);
  }
  60% {
    transform: scale(0.95, 1.05) translate(0%, -3%);
  }
  70% {
    transform: scale(1.05, 0.95) translate(0%, 3%);
  }
  80% {
    transform: scale(1, 1) translate(0%, 0%);
  }
  100% {
    transform: scale(1, 1) translate(0%, 0%);
  }
}

/*=============================

	Layouts: col, flo, pos, tri

==============================*/
/*===============
	Columns: col
	IE11では wow_magic.js が IE_PCSS_GRID.js を読み込んで再現します。
===============

[class*="f-col-"],
[class*="f-pctb-col-"],
[class*="f-tb-col-"],
[class*="f-tbsp-col-"],
[class*="f-sp-col-"] {
  --G1: calc(10px * var(--G, 0));
  display: grid;
  grid: auto/var(--C1, repeat(var(--C), 1fr));
  grid-gap: var(--G1);
  grid-gap: calc(var(--G1) * var(--GCR, 1)) calc(var(--G1) * var(--GCC, 1));
  transition: all 0.6s;
}

[class*="f-col-"] > *,
[class*="f-pctb-col-"] > *,
[class*="f-tb-col-"] > *,
[class*="f-tbsp-col-"] > *,
[class*="f-sp-col-"] > * {
  --C: initial;
  --C1: initial;
  --G: initial;
  --G2: initial;
  --SC: initial;
  --SR: initial;
  --GCR: initial;
  --GCC: initial;
  grid-column: span var(--SC);
  grid-row: span var(--SR);
  place-self: var(--A, auto) var(--J, auto);
}

[class*="f-col-"] img,
[class*="f-pctb-col-"] img,
[class*="f-tb-col-"] img,
[class*="f-tbsp-col-"] img,
[class*="f-sp-col-"] img {
  height: auto;
  width: 100%;
}

[class*="f-pos"] p:not([class*="f-m"]),
[class*="f-col-"] p:not([class*="f-m"]) {
  margin: 0;
}

/*--------------------
	col 1
--------------------
.f-col-1 {
  --C: 1;
}

.f-col-2 {
  --C: 2;
}

.f-col-3 {
  --C: 3;
}

.f-col-4 {
  --C: 4;
}

.f-col-5 {
  --C: 5;
}

.f-col-6 {
  --C: 6;
}

/* 2 col ratio 
.f-col-2-1 {
  --C1: 1fr 4fr;
}

.f-col-2-2 {
  --C1: 1fr 3fr;
}

.f-col-2-3 {
  --C1: 1fr 2fr;
}

.f-col-2-4 {
  --C1: 2fr 1fr;
}

.f-col-2-5 {
  --C1: 3fr 1fr;
}

.f-col-2-6 {
  --C1: 4fr 1fr;
}

.f-col-2-l {
  --C1: auto 1fr;
}

.f-col-2-r {
  --C1: 1fr auto;
}

/*----------
    Gaps
----------*/
/* Gap */
.f-gap {
  --G: 0.5;
}

.f-gap-1 {
  --G: 1;
}

.f-gap-2 {
  --G: 2;
}

.f-gap-3 {
  --G: 3;
}

.f-gap-4 {
  --G: 4;
}

.f-gap-5 {
  --G: 5;
}

.f-gap-6 {
  --G: 6;
}

/* Gap Cut (Row | Col) */
.f-gap-cut-row {
  --GCR: 0;
}

.f-gap-cut-row-1 {
  --GCR: 0.25;
}

.f-gap-cut-row-2 {
  --GCR: 0.5;
}

.f-gap-cut-row-3 {
  --GCR: 0.75;
}

.f-gap-cut-col {
  --GCC: 0;
}

.f-gap-cut-col-1 {
  --GCC: 0.25;
}

.f-gap-cut-col-2 {
  --GCC: 0.5;
}

.f-gap-cut-col-3 {
  --GCC: 0.75;
}

/*----------
    Justfy (Left, Center, Right)
----------*/
.f-align-l {
  --J: start;
}

.f-align-c {
  --J: center;
}

.f-align-r {
  --J: end;
}


/*--------------------
	gap
	f-col- の場合の gap
--------------------*/
[class*="f-gap"]:not([class*="f-col"]):not([class*="f-inline"]) > * {
  margin-top: 0;
  margin-bottom: 0;
}

.f-gap:not([class*="f-col"]):not([class*="f-inline"]) > * + * {
  margin-top: 0.5em;
}

.f-gap-1:not([class*="f-col"]):not([class*="f-inline"]) > * + * {
  margin-top: 1%;
}

.f-gap-2:not([class*="f-col"]):not([class*="f-inline"]) > * + * {
  margin-top: 2%;
}

.f-gap-3:not([class*="f-col"]):not([class*="f-inline"]) > * + * {
  margin-top: 4%;
}

.f-gap-4:not([class*="f-col"]):not([class*="f-inline"]) > * + * {
  margin-top: 8%;
}

.f-gap-5:not([class*="f-col"]):not([class*="f-inline"]) > * + * {
  margin-top: 16%;
}

/*----------
    Align (Top, Middle, Bottom)
----------*/
.f-align-t {
  --A: start;
}

.f-align-m {
  --A: center;
}

.f-align-b {
  --A: end;
}

/* Order  */
.f-order-clear {
  order: 0;
}

.f-order-first {
  order: -1;
}

.f-order-last {
  order: 99;
}

/* Span */
.f-span-col-0 {
  --SC: 1;
}

.f-span-col-1 {
  --SC: 2;
}

.f-span-col-2 {
  --SC: 3;
}

.f-span-row-0 {
  --SR: 1;
}

.f-span-row-1 {
  --SR: 2;
}

.f-span-row-2 {
  --SR: 3;
}

/* Media query for col */
/*PC(1200px)とTablet(768px)の約中間位置*/
@media screen and (max-width: 960px) {
  [class*="f-pctb-col-"] {
    --C1: initial;
  }
  /* Col */
  .f-pctb-col-1 {
    --C: 1;
  }
  .f-pctb-col-2 {
    --C: 2;
  }
  .f-pctb-col-3 {
    --C: 3;
  }
  .f-pctb-col-4 {
    --C: 4;
  }
  .f-pctb-col-5 {
    --C: 5;
  }
  .f-pctb-col-6 {
    --C: 6;
  }
  /* Span */
  .f-pctb-span-col-0 {
    --SC: 1;
  }
  .f-pctb-span-col-1 {
    --SC: 2;
  }
  .f-pctb-span-col-2 {
    --SC: 3;
  }
  .f-pctb-span-row-0 {
    --SR: 1;
  }
  .f-pctb-span-row-1 {
    --SR: 2;
  }
  .f-pctb-span-row-2 {
    --SR: 3;
  }
  /* Order  */
  .f-pctb-order-clear {
    order: 0;
  }
  .f-pctb-order-first {
    order: -1;
  }
  .f-pctb-order-last {
    order: 99;
  }
  /* Align */
  .f-pctb-align-clear {
    --J: auto;
    --A: auto;
  }
  .f-pctb-align-l {
    --J: start;
  }
  .f-pctb-align-c {
    --J: center;
  }
  .f-pctb-align-r {
    --J: end;
  }
  .f-pctb-align-t {
    --A: start;
  }
  .f-pctb-align-m {
    --A: center;
  }
  .f-pctb-align-b {
    --A: end;
  }
}

/*Tablet*/
@media screen and (max-width: 768px) {
  /* f-col-2-1系があったら初期化 */
  [class*="f-tb-col-"] {
    --C1: initial;
  }
  /* 1 col になる */
  [class*="f-col-2"]:not(.f-bp-0):not([class*="f-col-2-"]):not([class*="f-pctb-col-"]):not([class*="f-tb-col-"]):not([class*="f-tbsp-col-"]):not([class*="f-sp-col-"]),
  .f-tb-col-1 {
    --C: 1;
  }
  /* 2 col になる */
  .f-col-4:not(.f-bp-0):not([class*="f-pctb-col-"]):not([class*="f-tb-col-"]):not([class*="f-tbsp-col-"]):not([class*="f-sp-col-"]),
  .f-col-5:not(.f-bp-0):not([class*="f-pctb-col-"]):not([class*="f-tb-col-"]):not([class*="f-tbsp-col-"]):not([class*="f-sp-col-"]),
  .f-tb-col-2 {
    --C: 2;
  }
  /* 3 col になる */
  .f-col-6:not(.f-bp-0):not([class*="f-pctb-col-"]):not([class*="f-tb-col-"]):not([class*="f-tbsp-col-"]):not([class*="f-sp-col-"]),
  .f-tb-col-3 {
    --C: 3;
  }
  .f-tb-col-4 {
    --C: 4;
  }
  .f-tb-col-5 {
    --C: 5;
  }
  .f-tb-col-6 {
    --C: 6;
  }
  [class*="f-tb-gap"] {
    --GCR: initial;
    --GCC: initial;
  }
  .f-tb-gap {
    --G: 0.5;
  }
  .f-tb-gap-0 {
    --G: 0;
  }
  .f-tb-gap-1 {
    --G: 1;
  }
  .f-tb-gap-2 {
    --G: 2;
  }
  .f-tb-gap-3 {
    --G: 3;
  }
  .f-tb-gap-4 {
    --G: 4;
  }
  .f-tb-gap-5 {
    --G: 5;
  }
  /* Order  */
  .f-tb-order-clear {
    order: 0;
  }
  .f-tb-order-first {
    order: -1;
  }
  .f-tb-order-last {
    order: 99;
  }
  /* Span */
  .f-tb-span-col-0 {
    --SC: 1;
  }
  .f-tb-span-col-1 {
    --SC: 2;
  }
  .f-tb-span-col-2 {
    --SC: 3;
  }
  .f-tb-span-col-3 {
    --SC: 4;
  }
  .f-tb-span-col-4 {
    --SC: 5;
  }
  .f-tb-span-row-0 {
    --SR: 1;
  }
  .f-tb-span-row-1 {
    --SR: 2;
  }
  .f-tb-span-row-2 {
    --SR: 3;
  }
  /* Align */
  .f-tb-align-clear {
    --J: auto;
    --A: auto;
  }
  .f-tb-align-l {
    --J: start;
  }
  .f-tb-align-c {
    --J: center;
  }
  .f-tb-align-r {
    --J: end;
  }
  .f-tb-align-t {
    --A: start;
  }
  .f-tb-align-m {
    --A: center;
  }
  .f-tb-align-b {
    --A: end;
  }
}

/*Tablet(768px)とSP(375px)の中間位置*/
@media screen and (max-width: 560px) {
  /* f-col-2-1系があったら初期化 */
  [class*="f-tbsp-col-"] {
    --C1: initial;
  }
  /* Col */
  .f-col-3:not(.f-bp-0):not([class*="f-pctb-col-"]):not([class*="f-tb-col-"]):not([class*="f-tbsp-col-"]):not([class*="f-sp-col-"]),
  .f-tbsp-col-1 {
    --C: 1;
  }
  .f-tbsp-col-2 {
    --C: 2;
  }
  .f-tbsp-col-3 {
    --C: 3;
  }
  .f-tbsp-col-4 {
    --C: 4;
  }
  .f-tbsp-col-5 {
    --C: 5;
  }
  .f-tbsp-col-6 {
    --C: 6;
  }
  /* Order  */
  .f-tbsp-order-clear {
    order: 0;
  }
  .f-tbsp-order-first {
    order: -1;
  }
  .f-tbsp-order-last {
    order: 99;
  }
  /* Span */
  .f-tbsp-span-col-0 {
    --SC: 1;
  }
  .f-tbsp-span-col-1 {
    --SC: 2;
  }
  .f-tbsp-span-col-2 {
    --SC: 3;
  }
  .f-tbsp-span-row-0 {
    --SR: 1;
  }
  .f-tbsp-span-row-1 {
    --SR: 2;
  }
  .f-tbsp-span-row-2 {
    --SR: 3;
  }
  /* Align */
  .f-tbsp-align-clear {
    --J: auto;
    --A: auto;
  }
  .f-tbsp-align-l {
    --J: start;
  }
  .f-tbsp-align-c {
    --J: center;
  }
  .f-tbsp-align-r {
    --J: end;
  }
  .f-tbsp-align-t {
    --A: start;
  }
  .f-tbsp-align-m {
    --A: center;
  }
  .f-tbsp-align-b {
    --A: end;
  }
}

/*SP*/
@media screen and (max-width: 375px) {
  /* f-col-2-1系があったら初期化 */
  [class*="f-sp-col-"] {
    --C1: initial;
  }
  /* Col */
  .f-col-4:not(.f-bp-0):not(.f-bp-0):not([class*="f-pctb-col-"]):not([class*="f-tb-col-"]):not([class*="f-tbsp-col-"]):not([class*="f-sp-col-"]),
  .f-sp-col-1 {
    --C: 1;
  }
  .f-col-6:not(.f-bp-0):not([class*="f-pctb-col-"]):not([class*="f-tb-col-"]):not([class*="f-tbsp-col-"]):not([class*="f-sp-col-"]),
  .f-sp-col-2 {
    --C: 2;
  }
  .f-sp-col-3 {
    --C: 3;
  }
  .f-sp-col-4 {
    --C: 4;
  }
  .f-sp-col-5 {
    --C: 5;
  }
  .f-sp-col-6 {
    --C: 6;
  }
  .f-sp-gap {
    --G: 0.5;
  }
  .f-sp-gap-0 {
    --G: 0;
  }
  .f-sp-gap-1 {
    --G: 1;
  }
  .f-sp-gap-2 {
    --G: 2;
  }
  .f-sp-gap-3 {
    --G: 3;
  }
  .f-sp-gap-4 {
    --G: 4;
  }
  .f-sp-gap-5 {
    --G: 5;
  }
  .f-sp-gap-6 {
    --G: 6;
  }
  /* Order  */
  .f-sp-order-clear {
    order: 0;
  }
  .f-sp-order-first {
    order: -1;
  }
  .f-sp-order-last {
    order: 99;
  }
  /* Span */
  .f-sp-span-col-0 {
    --SC: 1;
  }
  .f-sp-span-col-1 {
    --SC: 2;
  }
  .f-sp-span-col-2 {
    --SC: 3;
  }
  .f-sp-span-row-0 {
    --SR: 1;
  }
  .f-sp-span-row-1 {
    --SR: 2;
  }
  .f-sp-span-row-2 {
    --SR: 3;
  }
  /* Align */
  .f-sp-align-clear {
    --J: auto;
    --A: auto;
  }
  .f-sp-align-l {
    --J: start;
  }
  .f-sp-align-c {
    --J: center;
  }
  .f-sp-align-r {
    --J: end;
  }
  .f-sp-align-t {
    --A: start;
  }
  .f-sp-align-m {
    --A: center;
  }
  .f-sp-align-b {
    --A: end;
  }
}

/*===============
    Inline
===============*/

/*[class*="f-inline"] {
  width: 100%;
  display: flex;
  align-aligns: stretch;
}*/

[class*="f-inline"]:not(.f-inline-b) {
  width: 100%;
  display: flex;
  align-items: stretch;
}

[class*="f-inline"]:not(.f-inline-b) img {
  height: auto;
  width: 100%;
  vertical-align: bottom;
}

[class*="f-inline"]:not(.f-inline-b).f-gap > * {
  margin-right: 0.5em;
}

[class*="f-inline"]:not(.f-inline-b).f-gap-1 > * {
  margin-right: 1%;
}

[class*="f-inline"]:not(.f-inline-b).f-gap-2 > * {
  margin-right: 2%;
}

[class*="f-inline"]:not(.f-inline-b).f-gap-3 > * {
  margin-right: 4%;
}

[class*="f-inline"]:not(.f-inline-b).f-gap-4 > * {
  margin-right: 8%;
}

[class*="f-inline"][class*="f-gap"]:not([class*="f-inline-cb"]) > *:last-child {
  margin-right: 0;
}


[class*="f-inline"][class*="f-gap"] > * {
  margin-right: 0.5em;
}

[class*="f-inline"][class*="f-gap"] > *:last-child {
  margin-right: 0;
}

[class*="f-inline"].f-gap-1 > * {
  margin-right: 10px;
}

[class*="f-inline"].f-gap-2 > * {
  margin-right: 15px;
}

[class*="f-inline"].f-gap-3 > * {
  margin-right: 20px;
}

[class*="f-inline"].f-gap-4 > * {
  margin-right: 30px;
}

[class*="f-inline"].f-gap-5 > * {
  margin-right: 40px;
}

.f-inline-1 {
  flex-wrap: wrap;
}

.f-inline-1[class*="f-gap"] > * {
  margin-bottom: 5px;
}

.f-inline-2 {
  justify-content: center;
}

/*--------------------
  inline-f
--------------------*/
.f-inline-f > * {
  flex-basis: 100%;
}

/*--------------------
  inline-c
--------------------*/
.f-inline-c {
  justify-content: center;
  align-items: center;
}

/*--------------------
  inline-cb
--------------------*/
.f-inline-cb {
  margin: auto;
  justify-content: space-between;
}

/*--------------------
  inline-b
--------------------*/
.f-inline-b {
  display: inline-block;
}

/*===============
    Float: flo
===============*/
[class*="f-flo-"] > .f-flo__img {
  float: left;
  margin: 0 1.5em 0.5em 0;
  clear: both;
}

[class*="f-flo-"] > .f-flo__img img {
  height: auto;
  width: 100%;
}

[class*="f-flo-"]::after {
  content: "";
  display: block;
  clear: both;
}

.f-flo-1-1 > .f-flo__img,
.f-flo-2-1 > .f-flo__img {
  min-width: 120px;
  width: 50%;
}

.f-flo-1-2 > .f-flo__img,
.f-flo-2-2 > .f-flo__img {
  min-width: 120px;
  width: calc(100% / 3);
}

[class*="f-flo-2"] > .f-flo__img {
  float: right;
  margin: 0 0 0.5em 1.5em;
}

.f-flo-1-3 > .f-flo__img,
.f-flo-2-3 > .f-flo__img {
  width: 40%;
}

.f-flo-1-4 > .f-flo__img,
.f-flo-2-4 > .f-flo__img {
  width: 50%;
}

/* Media query for float */
@media screen and (max-width: 768px) {
  [class*="f-flo-"].f-tb-flo-clear > .f-flo__img {
    width: 100%;
    float: none;
    margin: 0 0 0.5em 0;
  }
}

@media screen and (max-width: 768px) {
  [class*="f-flo-"]:not([class*="f-bp"]) > .f-flo__img {
    width: 100%;
    float: none;
    margin: 0 0 0.5em 0;
  }
}

@media screen and (max-width: 560px) {
  [class*="f-flo-"].f-tbsp-flo-clear > .f-flo__img {
    width: 100%;
    float: none;
    margin: 0 0 0.5em 0;
  }
}

@media screen and (max-width: 480px) {
  [class*="f-flo-"]:not(.f-bp-0) > .f-flo__img {
    width: 100%;
    float: none;
    margin: 0 0 0.5em 0;
  }
}

@media screen and (max-width: 375px) {
  [class*="f-flo-"].f-sp-flo-clear > .f-flo__img {
    width: 100%;
    float: none;
    margin: 0 0 0.5em 0;
  }
}

/*===============
    Position: pos
===============*/
.f-pos {
  position: relative;
  overflow: visible;
}

[class*="f-pos-"] {
  position: absolute;
  line-height: 1;
}

/* TOP LEFT */
.f-pos-1 {
  top: 8%;
  left: 5%;
}

[class*="f-pos-1-"] {
  top: 0;
  left: 0;
}

.f-pos-1-1 {
  top: 0.5em;
  left: 0.5em;
}

.f-pos-1-3 {
  transform: translate(-15%, -15%);
}

.f-pos-1-4 {
  transform: translate(-30%, -30%);
}

.f-pos-1-5 {
  transform: translate(0, -100%);
}

/* TOP */
[class*="f-pos-2"] {
  transform: translateX(-50%);
  top: 0;
  left: 50%;
}

.f-pos-2 {
  top: 8%;
}

.f-pos-2-1 {
  top: 0.5em;
}

.f-pos-2-3 {
  transform: translate(-50%, -15%);
}

.f-pos-2-4 {
  transform: translate(-50%, -30%);
}

.f-pos-2-5 {
  transform: translate(-50%, -100%);
}

/* TOP RIGHT */
.f-pos-3 {
  top: 8%;
  right: 5%;
}

[class*="f-pos-3-"] {
  top: 0;
  right: 0;
}

.f-pos-3-1 {
  top: 0.5em;
  right: 0.5em;
}

.f-pos-3-3 {
  transform: translate(15%, -15%);
}

.f-pos-3-4 {
  transform: translate(30%, -30%);
}

.f-pos-3-5 {
  transform: translate(0, -100%);
}

/* LEFT */
[class*="f-pos-4"] {
  transform: translateY(-50%);
  top: 50%;
  left: 0;
}

.f-pos-4 {
  left: 5%;
}

.f-pos-4-1 {
  left: 0.5em;
}

.f-pos-4-3 {
  transform: translate(-15%, -50%);
}

.f-pos-4-4 {
  transform: translate(-30%, -50%);
}

.f-pos-4-5 {
  transform: translate(-100%, -50%);
}

/* CENTER */
.f-pos-5 {
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

/* RIGHT */
[class*="f-pos-6"] {
  transform: translateY(-50%);
  top: 50%;
  right: 0;
}

.f-pos-6 {
  right: 5%;
}

.f-pos-6-1 {
  right: 0.5em;
}

.f-pos-6-3 {
  transform: translate(15%, -50%);
}

.f-pos-6-4 {
  transform: translate(30%, -50%);
}

.f-pos-6-5 {
  transform: translate(100%, -50%);
}

/* BOTTOM LEFT */
.f-pos-7 {
  bottom: 8%;
  left: 5%;
}

[class*="f-pos-7-"] {
  bottom: 0;
  left: 0;
}

.f-pos-7-1 {
  bottom: 0.5em;
  left: 0.5em;
}

.f-pos-7-3 {
  transform: translate(-15%, 15%);
}

.f-pos-7-4 {
  transform: translate(-30%, 30%);
}

.f-pos-7-5 {
  transform: translate(0, 100%);
}

/* BOTTOM */
[class*="f-pos-8"] {
  transform: translateX(-50%);
  bottom: 0;
  left: 50%;
}

.f-pos-8 {
  bottom: 8%;
}

.f-pos-8-1 {
  bottom: 0.5em;
}

.f-pos-8-3 {
  transform: translate(-50%, 15%);
}

.f-pos-8-4 {
  transform: translate(-50%, 30%);
}

.f-pos-8-5 {
  transform: translate(-50%, 100%);
}

/* BOTTOM RIGHT */
.f-pos-9 {
  bottom: 8%;
  right: 5%;
}

[class*="f-pos-9-"] {
  bottom: 0;
  right: 0;
}

.f-pos-9-1 {
  bottom: 0.5em;
  right: 0.5em;
}

.f-pos-9-3 {
  transform: translate(15%, 15%);
}

.f-pos-9-4 {
  transform: translate(30%, 30%);
}

.f-pos-9-5 {
  transform: translate(0, 100%);
}

/* Media query for pos */
@media screen and (max-width: 768px) {
  .f-tb-pos-off {
    transform: none;
    position: static;
  }
}

@media screen and (max-width: 375px) {
  .f-sp-pos-off {
    transform: none;
    position: static;
  }
}

/*===============
    Center
===============*/
.f-cc {
  display: flex;
  justify-content: center;
  align-items: center;
}

/*==============================

	Font size: size

==============================*/
.f-size {
  font-size: 1.5rem;
}

.f-size-1 {
  font-size: 1rem;
}

.f-size-2 {
  font-size: 1.2rem;
}

.f-size-3 {
  font-size: 1.4rem;
}

.f-size-4 {
  font-size: 1.6rem;
}

.f-size-4-2 {
  font-size: 1.8rem;
}

.f-size-5 {
  font-size: 2rem;
}

.f-size-6 {
  font-size: 2.4rem;
}

.f-size-7 {
  font-size: 3rem;
}

.f-size-8 {
  font-size: 3.6rem;
}

.f-size-9 {
  font-size: 4.2rem;
}

.f-size-10 {
  font-size: 5.2rem;
}

.f-size-11 {
  font-size: 6rem;
}
/*-------------------
	Flexible
-------------------*/
.f-size-f {
  font-size: 2vw;
}

.f-size-1-f {
  font-size: 2.5vw;
}

.f-size-2-f {
  font-size: 3vw;
}

.f-size-3-f {
  font-size: 3.5vw;
}

.f-size-4-f {
  font-size: 4vw;
}

/*==============================

	Media Query

==============================*/
/*-------------------
	Tablet
-------------------*/
@media screen and (max-width: 768px) {
  .f-tb-size {
    font-size: 1.5rem;
  }
  .f-tb-size-1 {
    font-size: 1rem;
  }
  .f-tb-size-2 {
    font-size: 1.2rem;
  }
  .f-tb-size-3 {
    font-size: 1.4rem;
  }
  .f-tb-size-4 {
    font-size: 1.6rem;
  }
  .f-tb-size-4-2 {
    font-size: 1.8rem;
  }
  .f-tb-size-5 {
    font-size: 2rem;
  }
  .f-tb-size-6 {
    font-size: 2.4rem;
  }
  .f-tb-size-7 {
    font-size: 3rem;
  }
  .f-tb-size-8 {
    font-size: 3.6rem;
  }
  .f-tb-size-9 {
    font-size: 4.2rem;
  }
  .f-tb-size-10 {
    font-size: 5.2rem;
  }
}

/*-------------------
	SP
-------------------*/
@media screen and (max-width: 480px) {
  .f-sp-size {
    font-size: 1.5rem;
  }
  .f-sp-size-1 {
    font-size: 1rem;
  }
  .f-sp-size-2 {
    font-size: 1.2rem;
  }
  .f-sp-size-3 {
    font-size: 1.4rem;
  }
  .f-sp-size-4 {
    font-size: 1.6rem;
  }
  .f-sp-size-4-2 {
    font-size: 1.8rem;
  }
  .f-sp-size-5 {
    font-size: 2rem;
  }
  .f-sp-size-6 {
    font-size: 2.4rem;
  }
  .f-sp-size-7 {
    font-size: 3rem;
  }
  .f-sp-size-8 {
    font-size: 3.6rem;
  }
  .f-sp-size-9 {
    font-size: 4.2rem;
  }
  .f-sp-size-10 {
    font-size: 5.2rem;
  }
}

/*===============
	vw size limitter
	flex の vw　指定ではブラウザ幅によってどこまでも大きくなってしまうので、
	サイトの固定幅ラインで rem に切り替えてサイズの頭打ちをしています。
===============*/
@media screen and (min-width: 1280px) {
  .f-size-f {
    font-size: 2.57rem;
  }
  .f-size-1-f {
    font-size: 3.2rem;
  }
  .f-size-2-f {
    font-size: 3.85rem;
  }
  .f-size-3-f {
    font-size: 4.48rem;
  }
  .f-size-4-f {
    font-size: 5.12rem;
  }
}

/*=========================

	Margin & Padding
	f-gap は layout にあります。
=========================*/
/*===============
 Margin
===============*/
/* m
----------*/
.f-m-auto {
  margin-right: auto;
  margin-left: auto;
}

.f-m {
  margin: 0.5em;
}

.f-m-0 {
  margin: 0;
}

.f-m-1 {
  margin: 1%;
}

.f-m-2 {
  margin: 2%;
}

.f-m-3 {
  margin: 4%;
}

.f-m-4 {
  margin: 8%;
}

.f-m-5 {
  margin: 16%;
}

/*-------------------------
	mv: ↑↓
---------------*/
/* mt: ↑
----------*/
.f-mv,
.f-mt {
  margin-top: 0.5em;
}

.f-mv-1,
.f-mt-1 {
  margin-top: 1%;
}

.f-mv-2,
.f-mt-2 {
  margin-top: 2%;
}

.f-mv-3,
.f-mt-3 {
  margin-top: 4%;
}

.f-mv-4,
.f-mt-4 {
  margin-top: 8%;
}

.f-mv-5,
.f-mt-5 {
  margin-top: 16%;
}

/* mb: ↓
----------*/
.f-mv,
.f-mb {
  margin-bottom: 0.5em;
}

.f-mv-1,
.f-mb-1 {
  margin-bottom: 1%;
}

.f-mv-2,
.f-mb-2 {
  margin-bottom: 2%;
}

.f-mv-3,
.f-mb-3 {
  margin-bottom: 4%;
}

.f-mv-4,
.f-mb-4 {
  margin-bottom: 8%;
}

.f-mv-5,
.f-mb-5 {
  margin-bottom: 16%;
}

/*-------------------------
	mh: ←→
---------------*/
/* ml: ←
----------*/
.f-mh-auto,
.f-ml-auto {
  margin-left: auto;
}

.f-mh,
.f-ml {
  margin-left: 0.5em;
}

.f-mh-1,
.f-ml-1 {
  margin-left: 1%;
}

.f-mh-2,
.f-ml-2 {
  margin-left: 2%;
}

.f-mh-3,
.f-ml-3 {
  margin-left: 4%;
}

.f-mh-4,
.f-ml-4 {
  margin-left: 8%;
}

.f-mh-5,
.f-ml-5 {
  margin-left: 16%;
}

/* mr: →
----------*/
.f-mh-auto,
.f-mr-auto {
  margin-right: auto;
}

.f-mh,
.f-mr {
  margin-right: 0.5em;
}

.f-mh-1,
.f-mr-1 {
  margin-right: 1%;
}

.f-mh-2,
.f-mr-2 {
  margin-right: 2%;
}

.f-mh-3,
.f-mr-3 {
  margin-right: 4%;
}

.f-mh-4,
.f-mr-4 {
  margin-right: 8%;
}

.f-mh-5,
.f-mr-5 {
  margin-right: 16%;
}

/*===============
 Padding
===============*/
.f-p,
.f-P > * {
  padding: 0.5em;
}

.f-p-1,
.f-P-1 > * {
  padding: 1.5%;
}

.f-p-2,
.f-P-2 > * {
  padding: 2.4%;
}

.f-p-3,
.f-P-3 > * {
  padding: 3.8%;
}

.f-p-4,
.f-P-4 > * {
  padding: 6%;
}

.f-p-5,
.f-P-5 > * {
  padding: 9.6%;
}

/* Padding ←
----------*/
.f-pl,
.f-ph {
  padding-left: 0.5em;
}

.f-pl-1,
.f-ph-1 {
  padding-left: 1.5%;
}

.f-pl-2,
.f-ph-2 {
  padding-left: 2.4%;
}

.f-pl-3,
.f-ph-3 {
  padding-left: 3.8%;
}

.f-pl-4,
.f-ph-4 {
  padding-left: 6%;
}

.f-pl-5,
.f-ph-5 {
  padding-left: 9.6%;
}

/* Padding →
----------*/
.f-pr,
.f-ph {
  padding-right: 0.5em;
}

.f-pr-1,
.f-ph-1 {
  padding-right: 1.5%;
}

.f-pr-2,
.f-ph-2 {
  padding-right: 2.4%;
}

.f-pr-3,
.f-ph-3 {
  padding-right: 3.8%;
}

.f-pr-4,
.f-ph-4 {
  padding-right: 6%;
}

.f-pr-5,
.f-ph-5 {
  padding-right: 9.6%;
}

/* Padding ↑
----------*/
.f-pt,
.f-pv {
  padding-top: 0.5em;
}

.f-pt-1,
.f-pv-1 {
  padding-top: 1.5%;
}

.f-pt-2,
.f-pv-2 {
  padding-top: 2.4%;
}

.f-pt-3,
.f-pv-3 {
  padding-top: 3.8%;
}

.f-pt-4,
.f-pv-4 {
  padding-top: 6%;
}

.f-pt-5,
.f-pv-5 {
  padding-top: 9.6%;
}

/* Padding ↓
----------*/
.f-pb,
.f-pv {
  padding-bottom: 0.5em;
}

.f-pb-1,
.f-pv-1 {
  padding-bottom: 1.5%;
}

.f-pb-2,
.f-pv-2 {
  padding-bottom: 2.4%;
}

.f-pb-3,
.f-pv-3 {
  padding-bottom: 3.8%;
}

.f-pb-4,
.f-pv-4 {
  padding-bottom: 6%;
}

.f-pb-5,
.f-pv-5 {
  padding-bottom: 9.6%;
}

/*-------------------
	Tablet
-------------------*/
@media screen and (max-width: 768px) {
  .f-tb-m {
    margin: 5px;
  }
  .f-tb-m-0 {
    margin: 0;
  }
  .f-tb-m-1 {
    margin: 10px;
  }
  .f-tb-m-2 {
    margin: 15px;
  }
  .f-tb-m-3 {
    margin: 20px;
  }
  .f-tb-m-4 {
    margin: 25px;
  }
  .f-tb-m-5 {
    margin: 30px;
  }
  /*----------
	TB Padding
	----------*/
  .f-tb-p {
    padding: 5px;
  }
  .f-tb-p-0 {
    padding: 0;
  }
  .f-tb-p-1 {
    padding: 10px;
  }
  .f-tb-p-2 {
    padding: 15px;
  }
  .f-tb-p-3 {
    padding: 20px;
  }
  .f-tb-p-4 {
    padding: 25px;
  }
  .f-tb-p-5 {
    padding: 30px;
  }
}

/*-------------------
	SP
-------------------*/
@media screen and (max-width: 480px) {
  /*----------
	Auto Margin Fixed
	%指定が小さくなりすぎないようにSPで固定化しています*
	----------*/
  .f-m-1,
  .f-mv-1,
  .f-mt-1 {
    margin-top: 5px;
  }
  .f-m-2,
  .f-mv-2,
  .f-mt-2 {
    margin-top: 10px;
  }
  .f-m-3,
  .f-mv-3,
  .f-mt-3 {
    margin-top: 15px;
  }
  .f-m-4,
  .f-mv-4,
  .f-mt-4 {
    margin-top: 30px;
  }
  .f-m-5,
  .f-mv-5,
  .f-mt-5 {
    margin-top: 50px;
  }
  /* ↓ */
  .f-m-1,
  .f-mv-1,
  .f-mb-1 {
    margin-bottom: 5px;
  }
  .f-m-2,
  .f-mv-2,
  .f-mb-2 {
    margin-bottom: 10px;
  }
  .f-m-3,
  .f-mv-3,
  .f-mb-3 {
    margin-bottom: 15px;
  }
  .f-m-4,
  .f-mv-4,
  .f-mb-4 {
    margin-bottom: 30px;
  }
  .f-m-5,
  .f-mv-5,
  .f-mb-5 {
    margin-bottom: 50px;
  }
  /* Padding */
  /* ↑ */
  .f-p-1,
  .f-pv-1,
  .f-pt-1 {
    padding-top: 10px;
  }
  .f-p-2,
  .f-pv-2,
  .f-pt-2 {
    padding-top: 15px;
  }
  .f-p-3,
  .f-pv-3,
  .f-pt-3 {
    padding-top: 20px;
  }
  .f-p-4,
  .f-pv-4,
  .f-pt-4 {
    padding-top: 30px;
  }
  .f-p-5,
  .f-pv-5,
  .f-pt-5 {
    padding-top: 50px;
  }
  /* ↓ */
  .f-p-1,
  .f-pv-1,
  .f-pb-1 {
    padding-bottom: 10px;
  }
  .f-p-2,
  .f-pv-2,
  .f-pb-2 {
    padding-bottom: 15px;
  }
  .f-p-3,
  .f-pv-3,
  .f-pb-3 {
    padding-bottom: 20px;
  }
  .f-p-4,
  .f-pv-4,
  .f-pb-4 {
    padding-bottom: 30px;
  }
  .f-p-5,
  .f-pv-5,
  .f-pb-5 {
    padding-bottom: 50px;
  }
  /*　← */
  .f-p-1,
  .f-pl-1,
  .f-ph-1 {
    padding-left: 10px;
  }
  .f-p-2,
  .f-pl-2,
  .f-ph-2 {
    padding-left: 15px;
  }
  .f-p-3,
  .f-pl-3,
  .f-ph-3 {
    padding-left: 20px;
  }
  .f-p-4,
  .f-pl-4,
  .f-ph-4 {
    padding-left: 30px;
  }
  .f-p-5,
  .f-pl-5,
  .f-ph-5 {
    padding-left: 50px;
  }
  /*　→ */
  .f-p-1,
  .f-pr-1,
  .f-ph-1 {
    padding-right: 10px;
  }
  .f-p-2,
  .f-pr-2,
  .f-ph-2 {
    padding-right: 15px;
  }
  .f-p-3,
  .f-pr-3,
  .f-ph-3 {
    padding-right: 20px;
  }
  .f-p-4,
  .f-pr-4,
  .f-ph-4 {
    padding-right: 30px;
  }
  .f-p-5,
  .f-pr-5,
  .f-ph-5 {
    padding-right: 50px;
  }
  /*----------
	SP Margin
	----------*/
  /* ↑ */
  .f-sp-m {
    margin: 5px;
  }
  .f-sp-m-0 {
    margin: 0;
  }
  .f-sp-m-1 {
    margin: 10px;
  }
  .f-sp-m-2 {
    margin: 15px;
  }
  .f-sp-m-3 {
    margin: 20px;
  }
  .f-sp-m-4 {
    margin: 25px;
  }
  .f-sp-m-5 {
    margin: 30px;
  }
  /*----------
	SP Padding
	----------*/
  .f-sp-p {
    padding: 5px;
  }
  .f-sp-p-0 {
    padding: 0;
  }
  .f-sp-p-1 {
    padding: 10px;
  }
  .f-sp-p-2 {
    padding: 15px;
  }
  .f-sp-p-3 {
    padding: 20px;
  }
  .f-sp-p-4 {
    padding: 25px;
  }
  .f-sp-p-5 {
    padding: 30px;
  }
}

/*==============================

	Color

==============================*/
/*---------------
	Background color
	f-bgPse は疑似要素の背景色になります
---------------*/
.f-bg,
.f-bgPse::after,
.f-bgPse::before {
  color: #fff;
  background-color: #777;
}

[class*="f-bg-"],
[class*="f-bgPse-"]::after,
[class*="f-bgPse-"]::before {
  color: #fff;
}

.f-bg-1,
.f-bgPse-1::after,
.f-bgPse-1::before {
  background-color: #333;
}

.f-bg-2,
.f-bgPse-2::after,
.f-bgPse-2::before {
  background-color: #f00000;
}

.f-bg-3,
.f-bgPse-3::after,
.f-bgPse-3::before {
  background-color: #b41e28;
}

.f-bg-4,
.f-bgPse-4::after,
.f-bgPse-4::before {
  background-color: #eb9628;
}

.f-bg-5,
.f-bgPse-5::after,
.f-bgPse-5::before {
  background-color: #69b327;
}

.f-bg-6,
.f-bgPse-6::after,
.f-bgPse-6::before {
  background-color: #f0580a;
}

.f-bg-7,
.f-bgPse-7::after,
.f-bgPse-7::before {
  background-color: #366fe8;
}

.f-bg-8,
.f-bgPse-8::after,
.f-bgPse-8::before {
  color: inherit;
  background-color: #fff;
}

.f-bg-9,
.f-bgPse-9::after,
.f-bgPse-9::before {
  color: inherit;
  background-image: linear-gradient(to bottom right, #ddd, #fff);
}

.f-bg-10,
.f-bgPse-10::after,
.f-bgPse-10::before {
  background-image: linear-gradient(to bottom right, #666, #000);
}

.f-bg-11,
.f-bgPse-11::after,
.f-bgPse-11::before {
  background-image: linear-gradient(to bottom right, red, #ff8000);
}

.f-bg-12,
.f-bgPse-12::after,
.f-bgPse-12::before {
  background-image: linear-gradient(to bottom right, #b31e28, #b31e8b);
}

.f-bg-13,
.f-bgPse-13::after,
.f-bgPse-13::before {
  background-image: linear-gradient(to bottom right, #faa638, #fa3858);
}

.f-bg-14,
.f-bgPse-14::after,
.f-bgPse-14::before {
  background-image: linear-gradient(to bottom right, #96c33c, #55aa80);
}

.f-bg-15,
.f-bgPse-15::after,
.f-bgPse-15::before {
  background-image: linear-gradient(to bottom right, #f089b6, #f0b289);
}

.f-bg-16,
.f-bgPse-16::after,
.f-bgPse-16::before {
  background-image: linear-gradient(to bottom right, #6caae0, #6c70e0);
}

.f-bg-17,
.f-bgPse-17::after,
.f-bgPse-17::before {
  color: inherit;
  background-image: linear-gradient(to bottom, #eee, #fff);
}

.f-bg-18,
.f-bgPse-18::after,
.f-bgPse-18::before {
  background-color: #153054;
}

.f-bg-19,
.f-bgPse-19::after,
.f-bgPse-19::before {
  background-color: #fe912d;
}

.f-bg-20,
.f-bgPse-20::after,

.f-bgPse-20::before {
  color: #153054;
  background-image: linear-gradient(135deg, #d2dae8 20%, #98b2e0 90%);
}

.f-bg-21,
.f-bgPse-21::after,
.f-bgPse-21::before {
  background: radial-gradient(ellipse farthest-corner at right bottom, #fedb37 0%, #fdb931 8%, #9f7928 40%, #8a6e2f 50%, transparent 70%), radial-gradient(ellipse farthest-corner at left top, #ffffff 0%, #ffffac 8%, #d1b464 25%, #775919 62.5%, #775919 100%);
}

.f-bg-22,
.f-bgPse-22::after,
.f-bgPse-22::before {
  background: radial-gradient(ellipse farthest-corner at right bottom, #ccc 0%, #aaa 18%, #aaa 40%, #999 50%, transparent 70%), radial-gradient(ellipse farthest-corner at left top, #fff 0%, #eee 8%, #ccc 25%, #888 62.5%, #333 100%);
}

.f-bg-23,
.f-bgPse-23::after,
.f-bgPse-23::before {
  background-image: linear-gradient(135deg, #aa0000 20%, #ff0000 90%);
}

.f-bg-24,
.f-bgPse-24::after,
.f-bgPse-24::before {
  color: #021951;
  background-image: linear-gradient(315deg, #fbb034 0%, #ffdd00 74%);
}

.f-bg-25,
.f-bgPse-25::after,
.f-bgPse-25::before {
  background-image: linear-gradient(315deg, #f5df2e 0%, #ff7f1e 90%);
}

.f-bg-26,
.f-bgPse-26::after,
.f-bgPse-26::before {
  background-image: linear-gradient(315deg, #f2cf43 0%, #19a186 94%);
}

.f-bg-27,
.f-bgPse-27::after,
.f-bgPse-27::before {
  background-image: linear-gradient(315deg, #2876f9 0%, #6d17cb 65%);
}

.f-bg-28,
.f-bgPse-28::after,
.f-bgPse-28::before {
  background-image: linear-gradient(315deg, #09c6f9 0%, #045de9 74%);
}

.f-bg-29,
.f-bgPse-29::after,
.f-bgPse-29::before {
  background-image: linear-gradient(315deg, #3d498e 0%, #1c164c 100%);
}

.f-bg-30,
.f-bgPse-30::after,
.f-bgPse-30::before {
  background-image: linear-gradient(315deg, #026c91 0%, #021951 74%);
}

.f-bg-31,
.f-bgPse-31::after,
.f-bgPse-31::before {
  color: inherit;
  background-color: rgba(255, 255, 255, 0.2);
}

.f-bg-32,
.f-bgPse-32::after,
.f-bgPse-32::before {
  background-color: rgba(0, 0, 0, 0.2);
}

.f-bg-33,
.f-bgPse-33::after,
.f-bgPse-33::before {
  color: inherit;
  background-color: #f5f5f5;
}

.f-bg-34,
.f-bgPse-34::after,
.f-bgPse-34::before {
  color: inherit;
  background-color: #eee;
}

.f-bg-35,
.f-bgPse-35::after,
.f-bgPse-35::before {
  color: inherit;
  background-color: #ddd;
}

/*------------------*/
/* Brand color code */
/*------------------*/
/* YCN */
.f-bg-36,
.f-bgPse-36::after,
.f-bgPse-36::before {
  background-color: #81bf25;
}

.f-bg-37,
.f-bgPse-37::after,
.f-bgPse-37::before {
  background-color: #595757;
}

/* MDR */
.f-bg-38,
.f-bgPse-38::after,
.f-bgPse-38::before {
  color: inherit;
  background-color: #f1faf9;
}

.f-bg-39,
.f-bgPse-39::after,
.f-bgPse-39::before {
  background-color: #00bbb4;
}

/* YKW */
.f-bg-40,
.f-bgPse-40::after,
.f-bgPse-40::before {
  background-color: #00bec8;
}

.f-bg-41,
.f-bgPse-41::after,
.f-bgPse-41::before {
  color: inherit;
  background-color: #d2dce5;
}

/* CCH */
.f-bg-42,
.f-bgPse-42::after,
.f-bgPse-42::before {
  background-color: #003a8c;
}

.f-bg-43,
.f-bgPse-43::after,
.f-bgPse-43::before {
  background-color: #00b0e5;
}

.f-bg-44,
.f-bgPse-44::after,
.f-bgPse-44::before {
  background-color: #ffff5c;
}

/* CKP */
.f-bg-45,
.f-bgPse-45::after,
.f-bgPse-45::before {
  background-color: #292527;
}

.f-bg-46,
.f-bgPse-46::after,
.f-bgPse-46::before {
  background-color: #f65e00;
}

.f-bg-47,
.f-bgPse-47::after,
.f-bgPse-47::before {
  background-color: #fdd000;
}

.f-bg-48,
.f-bgPse-48::after,
.f-bgPse-48::before {
  background-color: #ffe787;
}

/* SLS */
.f-bg-49,
.f-bgPse-49::after,
.f-bgPse-49::before {
  background-color: #ec73a7;
}

.f-bg-50,
.f-bgPse-50::after,
.f-bgPse-50::before {
  background-color: #ffe100;
}

/* TBP */
.f-bg-51,
.f-bgPse-51::after,
.f-bgPse-51::before {
  background-color: #008fd1;
}

.f-bg-52,
.f-bgPse-52::after,
.f-bgPse-52::before {
  background-color: #2b5caa;
}

.f-bg-53,
.f-bgPse-53::after,
.f-bgPse-53::before {
  background-color: #ffff5c;
}

/* SQM */
.f-bg-54,
.f-bgPse-54::after,
.f-bgPse-54::before {
  background-color: #ea4f19;
}

.f-bg-55,
.f-bgPse-55::after,
.f-bgPse-55::before {
  background-color: #1d2421;
}

/* YRC */
.f-bg-56,
.f-bgPse-56::after,
.f-bgPse-56::before {
  background-color: #d4b5ba;
}

.f-bg-57,
.f-bgPse-57::after,
.f-bgPse-57::before {
  background-color: #653a2c;
}

.f-bg-58,
.f-bgPse-58::after,
.f-bgPse-58::before {
  background-color: #f19dae;
}

.f-bg-59,
.f-bgPse-59::after,
.f-bgPse-59::before {
  background-color: #6fadaf;
}

.f-bg-60,
.f-bgPse-60::after,
.f-bgPse-60::before {
  background-color: #c8ae7f;
}

.f-bg-61,
.f-bgPse-61::after,
.f-bgPse-61::before {
  background-color: #d98481;
}

/* RAH */
.f-bg-62,
.f-bgPse-62::after,
.f-bgPse-62::before {
  background-color: #1852a4;
}

.f-bg-63,
.f-bgPse-63::after,
.f-bgPse-63::before {
  background-color: #1fac47;
}

/*うすいの*/
.f-bg-64,
.f-bgPse-64::after,
.f-bgPse-64::before {
  background-color: #ffe0e0;
}

.f-bg-65,
.f-bgPse-65::after,
.f-bgPse-65::before {
  background-color: #fff5ce;
}

.f-bg-66,
.f-bgPse-66::after,
.f-bgPse-66::before {
  background-color: #f0ffc9;
}

.f-bg-67,
.f-bgPse-67::after,
.f-bgPse-67::before {
  background-color: #e5ffdd;
}

.f-bg-68,
.f-bgPse-68::after,
.f-bgPse-68::before {
  background-color: #e2f1ff;
}

.f-bg-69,
.f-bgPse-69::after,
.f-bgPse-69::before {
  background-color: #e5e9ff;
}

.f-bg-70,
.f-bgPse-70::after,
.f-bgPse-70::before {
  background-color: #f4e2ff;
}

.f-bg-71,
.f-bgPse-71::after,
.f-bgPse-71::before {
  background-color: #2b5caa;
}

.f-bg-72,
.f-bgPse-72::after,
.f-bgPse-72::before {
  background-color: #008fd1;
}

.f-bg-73,
.f-bgPse-73::after,
.f-bgPse-73::before {
  background-image: linear-gradient(315deg, #008fd1 0%, #2b5caa 65%);
}

.f-bg-74,
.f-bgPse-74::after,
.f-bgPse-74::before {
  background-color: #faf174;
}

.f-bg-75,
.f-bgPse-75::after,
.f-bgPse-75::before {
  background-color: #7dab02;
}

.f-bg-76,
.f-bgPse-76::after,
.f-bgPse-76::before {
  background-color: #143256;
}

.f-bg-77,
.f-bgPse-77::after,
.f-bgPse-77::before {
  background-image: linear-gradient( 125deg, #bb7f74 10%, #b57569 100%);
}

.f-bg-78,
.f-bgPse-78::after,
.f-bgPse-78::before {
  background-color: #ecf6df;
}

.f-bg-79,
.f-bgPse-79::after,
.f-bgPse-79::before {
  background-color: #fff3ee;
}

.f-bg-80,
.f-bgPse-80::after,
.f-bgPse-80::before {
  background-color: #e5591e;
}

.f-bg-81,
.f-bgPse-81::after,
.f-bgPse-81::before {
  background: rgb(232,73,33);
  background: linear-gradient(135deg, rgba(232,73,33,1) 0%, rgba(216,54,91,1) 69%);
}

.f-bg-82,
.f-bgPse-82::after,
.f-bgPse-82::before {
  background: #ffe7dd!important;
}

.f-bg-83,
.f-bgPse-83::after,
.f-bgPse-83::before {
  background: #d3d3d3!important;
}

.f-bg-84,
.f-bgPse-84::after,
.f-bgPse-84::before {
  background: #da3a00!important;
}

.f-bg-85,
.f-bgPse-85::after,
.f-bgPse-85::before {
  background: #00b7ad!important;
}

.f-bg-86,
.f-bgPse-86::after,
.f-bgPse-86::before {
  background: #e1daec!important;
}

.f-bg-87,
.f-bgPse-87::after,
.f-bgPse-87::before {
  background: #a460d6;
}

.f-bg-88,
.f-bgPse-88::after,
.f-bgPse-88::before {
  background: #bbc4e4;
}

.f-bg-89,
.f-bgPse-89::after,
.f-bgPse-89::before {
  background: #e5eafd;
}

.f-bg-90,
.f-bgPse-90::after,
.f-bgPse-90::before {
  background: #e9d0fc;
}

.f-bg-91,
.f-bgPse-91::after,
.f-bgPse-91::before {
  background: #eb5439;
}

.f-bg-92,
.f-bgPse-92::after,
.f-bgPse-92::before {
  background: #e83428;
}

.f-bg-93,
.f-bgPse-93::after,
.f-bgPse-93::before {
  background: #ffe9b5;
}

.f-bg-94,
.f-bgPse-94::after,
.f-bgPse-94::before {
  background: #6150C4;
}

.f-bg-95,
.f-bgPse-95::after,
.f-bgPse-95::before {
  background-image: linear-gradient( 90deg, #312578, #694ec4);
}

.f-bg-96,
.f-bgPse-96::after,
.f-bgPse-96::before {
  background-image: linear-gradient( 0deg, #312578, #694ec4);
}

.f-bg-97,
.f-bgPse-97::after,
.f-bgPse-97::before {
  background: #4f2b69;
}

.f-bg-98,
.f-bgPse-98::after,
.f-bgPse-98::before {
  background: #312578;
}

.f-bg-99,
.f-bgPse-99::after,
.f-bgPse-99::before {
  background: #7b1482;
}

.f-bg-100,
.f-bgPse-100::after,
.f-bgPse-100::before {
  background: #c75ece;
}

.f-bg-101,
.f-bgPse-101::after,
.f-bgPse-101::before {
  background: #601986;
}

.f-bg-102,
.f-bgPse-102::after,
.f-bgPse-102::before {
  background: #d52b3a;
}

.f-bg-103,
.f-bgPse-103::after,
.f-bgPse-103::before {
  background: #eb6100;
}

.f-bg-104,
.f-bgPse-104::after,
.f-bgPse-104::before {
  background: #f2efe8;
}

.f-bg-105,
.f-bgPse-105::after,
.f-bgPse-105::before {
  background: #f0e7cf;
}

.f-bg-106,
.f-bgPse-106::after,
.f-bgPse-106::before {
  background: #144960;
}

.f-bg-107,
.f-bgPse-107::after,
.f-bgPse-107::before {
  background: #fe912d;
}

.f-bg-108,
.f-bgPse-108::after,
.f-bgPse-108::before {
  background: #ff4886;
}

.f-bg-109,
.f-bgPse-109::after,
.f-bgPse-109::before {
  background: #fffabc;
}

.f-bg-110,
.f-bgPse-110::after,
.f-bgPse-110::before {
  background: #70c7d8;
}

/*---------------
	Foreground color
---------------*/
.f-fg,
.f-fgPse::after,
.f-fgPse::before {
  color: #777;
}

.f-fg-1,
.f-fgPse-1::after,
.f-fgPse-1::before {
  color: #333;
}

.f-fg-2,
.f-fgPse-2::after,
.f-fgPse-2::before {
  color: #f00000;
}

.f-fg-3,
.f-fgPse-3::after,
.f-fgPse-3::before {
  color: #b41e28;
}

.f-fg-4,
.f-fgPse-4::after,
.f-fgPse-4::before {
  color: #eb9628;
}

.f-fg-5,
.f-fgPse-5::after,
.f-fgPse-5::before {
  color: #69b327;
}

.f-fg-6,
.f-fgPse-6::after,
.f-fgPse-6::before {
  color: #f0580a;
}

.f-fg-7,
.f-fgPse-7::after,
.f-fgPse-7::before {
  color: #366fe8;
}

.f-fg-8,
.f-fgPse-8::after,
.f-fgPse-8::before {
  color: #fff;
}

.f-fg-9,
.f-fgPse-9::after,
.f-fgPse-9::before {
  color: #ee82b4;
}

.f-fg-10,
.f-fgPse-10::after,
.f-fgPse-10::before {
  color: #e6657f;
}

.f-fg-11,
.f-fgPse-11::after,
.f-fgPse-11::before {
  color: #e6284e;
}

.f-fg-12,
.f-fgPse-12::after,
.f-fgPse-12::before {
  color: #72b5e1;
}

.f-fg-13,
.f-fgPse-13::after,
.f-fgPse-13::before {
  color: #428dcc;
}

.f-fg-14,
.f-fgPse-14::after,
.f-fgPse-14::before {
  color: #06a7ff;
}

.f-fg-15,
.f-fgPse-15::after,
.f-fgPse-15::before {
  color: #adc300;
}

.f-fg-16,
.f-fgPse-16::after,
.f-fgPse-16::before {
  color: #81c700;
}

.f-fg-17,
.f-fgPse-17::after,
.f-fgPse-17::before {
  color: #00bf53;
}

.f-fg-18,
.f-fgPse-18::after,
.f-fgPse-18::before {
  color: #8d78df;
}

.f-fg-19,
.f-fgPse-19::after,
.f-fgPse-19::before {
  color: #a756c1;
}

.f-fg-20,
.f-fgPse-20::after,
.f-fgPse-20::before {
  color: #be2bc1;
}

.f-fg-21,
.f-fgPse-21::after,
.f-fgPse-21::before {
  color: #eee;
}

.f-fg-22,
.f-fgPse-22::after,
.f-fgPse-22::before {
  color: #ccc;
}

.f-fg-23,
.f-fgPse-23::after,
.f-fgPse-23::before {
  color: #485487;
}

.f-fg-24,
.f-fgPse-24::after,
.f-fgPse-24::before {
  color: #283261;
}

.f-fg-25,
.f-fgPse-25::after,
.f-fgPse-25::before {
  color: #1f3182;
}

.f-fg-26,
.f-fgPse-26::after,
.f-fgPse-26::before {
  color: #00bbb4;
}

.f-fg-27,
.f-fgPse-27::after,
.f-fgPse-27::before {
  color: #faf174;
}

.f-fg-28,
.f-fgPse-28::after,
.f-fgPse-28::before {
  color: #7dab02;
}

.f-fg-29,
.f-fgPse-29::after,
.f-fgPse-29::before {
  color: #143256;
}

.f-fg-30,
.f-fgPse-30::after,
.f-fgPse-30::before {
  color: #b57569;
}

.f-fg-31,
.f-fgPse-31::after,
.f-fgPse-31::before {
  color: #da3a00;
}

.f-fg-32,
.f-fgPse-32::after,
.f-fgPse-32::before {
  color: #e84920;
}

.f-fg-33,
.f-fgPse-33::after,
.f-fgPse-33::before {
  color: #d8375b;
}

.f-fg-34,
.f-fgPse-34::after,
.f-fgPse-34::before {
  color: #00b7ad;
}

.f-fg-35,
.f-fgPse-35::after,
.f-fgPse-35::before {
  color: #fe912d;
}

.f-fg-36,
.f-fgPse-36::after,
.f-fgPse-36::before {
  color: #7b1482;
}

.f-fg-37,
.f-fgPse-37::after,
.f-fgPse-37::before {
  color: #1c9134;
}

.f-fg-38,
.f-fgPse-38::after,
.f-fgPse-38::before {
  color: #a460d6;
}

.f-fg-39,
.f-fgPse-39::after,
.f-fgPse-39::before {
  color: #bbc4e4;
}

.f-fg-40,
.f-fgPse-40::after,
.f-fgPse-40::before {
  color: #eb5439;
}

.f-fg-41,
.f-fgPse-41::after,
.f-fgPse-41::before {
  color: #4f2b69;
}

.f-fg-42,
.f-fgPse-42::after,
.f-fgPse-42::before {
  color: #312578;
}

.f-fg-43,
.f-fgPse-43::after,
.f-fgPse-43::before {
  color: #5c4600;
}

.f-fg-44,
.f-fgPse-44::after,
.f-fgPse-44::before {
  color: #ffe787;
}

.f-fg-45,
.f-fgPse-45::after,
.f-fgPse-45::before {
  color: #eb6100;
}

.f-fg-46,
.f-fgPse-46::after,
.f-fgPse-46::before {
  color: #8b7246;
}

.f-fg-47,
.f-fgPse-47::after,
.f-fgPse-47::before {
  color: #144960;
}

.f-fg-48,
.f-fgPse-48::after,
.f-fgPse-48::before {
  color: #001647;
}

.f-fg-49,
.f-fgPse-49::after,
.f-fgPse-49::before {
  color: #a4863a;
}

.f-fg-50,
.f-fgPse-50::after,
.f-fgPse-50::before {
  color: #ff4886;
}

.f-fg-51,
.f-fgPse-51::after,
.f-fgPse-51::before {
  color: #eb6100;
}

.f-fg-52,
.f-fgPse-52::after,
.f-fgPse-52::before {
  color: #d93d66;
}

.f-fg-53,
.f-fgPse-53::after,
.f-fgPse-53::before {
  color: #33a4bb;
}

/*---------------
	Border color
---------------*/
.f-bdc {
  border-color: #777;
}

.f-bdc-1 {
  border-color: #333;
}

.f-bdc-2 {
  border-color: #f00000;
}

.f-bdc-3 {
  border-color: #b41e28;
}

.f-bdc-4 {
  border-color: #eb9628;
}

.f-bdc-5 {
  border-color: #69b327;
}

.f-bdc-6 {
  border-color: #f0580a;
}

.f-bdc-7 {
  border-color: #366fe8;
}

.f-bdc-8 {
  border-color: #fff;
}

/* bg のグラデーション 9 ~ 30 を飛ばす */
.f-bdc-9 {
  border-color: rgba(255, 255, 255, 0.3);
}

.f-bdc-10 {
  border-color: rgba(0, 0, 0, 0.3);
}

.f-bdc-11 {
  border-color: #eee;
}

.f-bdc-12 {
  border-color: #ddd;
}

.f-bdc-13 {
  border-color: #ccc;
}

.f-bdc-14 {
  border-color: #e6cdd2;
}

.f-bdc-15 {
  border-color: #f4bdc8;
}

.f-bdc-16 {
  border-color: #f18399;
}

.f-bdc-17 {
  border-color: #c4dae9;
}

.f-bdc-18 {
  border-color: #92bde2;
}

.f-bdc-19 {
  border-color: #6ccbff;
}

.f-bdc-20 {
  border-color: #c8e6ae;
}

.f-bdc-21 {
  border-color: #ace14b;
}

.f-bdc-22 {
  border-color: #94d9b2;
}

.f-bdc-23 {
  border-color: #dec9e5;
}

.f-bdc-24 {
  border-color: #cea1dc;
}

.f-bdc-25 {
  border-color: #da3a00;
}

.f-bdc-26 {
  border-color: #7b1482;
}

.f-bdc-27 {
  border-color: #eb5439;
}

.f-bdc-28 {
  border-color: #fff5ce;
}

.f-bdc-29 {
  border-color: #601986;
}

.f-bdc-30 {
  border-color: #8b7246;
}

.f-bdc-31 {
  border-color: #001647;
}

.f-bdc-32 {
  border-color: #fe912d;
}

.f-bdc-33 {
  border-color: #70c7d8;
}

.f-bdc-34 {
  border-color: #a7a8a9;
}

/*---------------
	hue-rotate
---------------*/
.f-hue {
  filter: hue-rotate(15deg);
}

.f-hue-1 {
  filter: hue-rotate(30deg);
}

.f-hue-2 {
  filter: hue-rotate(45deg);
}

.f-hue-3 {
  filter: hue-rotate(40deg);
}

.f-hue-4 {
  filter: hue-rotate(50deg);
}

.f-hue-5 {
  filter: hue-rotate(-15deg);
}

.f-hue-6 {
  filter: hue-rotate(-30deg);
}

.f-hue-7 {
  filter: hue-rotate(-45deg);
}

.f-hue-8 {
  filter: hue-rotate(-40deg);
}

.f-hue-9 {
  filter: hue-rotate(-50deg);
}

/*---------------
	brightness
---------------*/
.f-bri {
  filter: brightness(1.1);
}

.f-bri-1 {
  filter: brightness(1.2);
}

.f-bri-2 {
  filter: brightness(1.3);
}

.f-bri-3 {
  filter: brightness(1.4);
}

.f-bri-4 {
  filter: brightness(1.5);
}

.f-bri-5 {
  filter: brightness(0.9);
}

.f-bri-6 {
  filter: brightness(0.8);
}

.f-bri-7 {
  filter: brightness(0.7);
}

.f-bri-8 {
  filter: brightness(0.6);
}

.f-bri-9 {
  filter: brightness(0.5);
}

/*---------------
	saturate
---------------*/
.f-sat {
  filter: brightness(100%);
}

.f-sat-1 {
  filter: brightness(110%);
}

.f-sat-2 {
  filter: brightness(120%);
}

.f-sat-3 {
  filter: brightness(130%);
}

.f-sat-4 {
  filter: brightness(140%);
}

.f-sat-5 {
  filter: brightness(90%);
}

.f-sat-6 {
  filter: brightness(80%);
}

.f-sat-7 {
  filter: brightness(70%);
}

.f-sat-8 {
  filter: brightness(60%);
}

.f-sat-9 {
  filter: brightness(50%);
}

/*=========================

	Text: txt

=========================*/
/* Google font Noto Sans
----------*/
.f-NOTOSANS {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
}

.f-NOTOSANS.f-txt-b,
.f-NOTOSANS .f-txt-b-on {
  font-weight: 500;
}

.f-NOTOSANS.f-txt-b-1 {
  font-weight: 700;
}

.f-NOTOSANS.f-txt-b-2 {
  font-weight: 900;
}

/* Google font Barlow
----------*/
.f-num {
  display: inline-block;
  letter-spacing: -0.03em;
  line-height: 0.7;
  font-weight: 700;
  font-family: "Barlow", Arial, Helvetica, sans-serif;
}

.f-ruby {
  position: relative;
}

.f-ruby::before {
  display: inline-block;
  width: 100%;
  text-align: center;
  transform: translateY(-50%);
  line-height: 1;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 20%;
  content: attr(data-ruby);
}

/* txt 1 (Line H)
----------*/
[class*="f-txt-1"] {
  line-height: 1.6;
}

[class*="f-txt-1"] > * {
  line-height: inherit;
}

[class*="f-txt-1"] > * + p {
  margin-top: 0.5em;
}

.f-txt-1-1 {
  line-height: 1.2;
}

.f-txt-1-2 {
  line-height: 1.4;
}

.f-txt-1-3 {
  line-height: 1.6;
}

.f-txt-1-4 {
  line-height: 1.8;
}

.f-txt-1-5 {
  line-height: 2;
}

.f-txt-1-6 {
  line-height: 1;
}

.f-txt-1-7 {
  line-height: 0.95;
}

.f-txt-1-8 {
  line-height: 0.9;
}

.f-txt-1-9 {
  line-height: 0.7;
}

.f-txt-1-10 {
  line-height: 1.7;
}

/* txt 2 (Rich)
----------*/
[class*="f-txt-2"] {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.f-txt-2 {
  color: #c6af00;
  background-image: linear-gradient(to right, #bf953f, #fccf6f, #b38728, #fbf5b7, #ea9400);
}

.f-txt-2-1 {
  color: #c6af00;
  background-image: linear-gradient(to top left, #f7de05, #da8e00, #edac06, #f7de05, #ecb802, #daaf08, #b67b03);
}

.f-txt-2-2 {
  color: #999;
  background-image: linear-gradient(to top left, #a5a5a5, #babac2, #e8e8e8, #a5a5a5, #babac2);
}

/* txt 3 (Highlight)
----------*/
[class*="f-txt-3"] {
  position: relative;
  display: inline-block;
  margin: 0 0.1em;
  padding: 0 0.1em;
}

[class*="f-txt-3"]::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0.2em;
  height: 0.1em;
  width: 100%;
  z-index: -1;
  opacity: 0.7;
  border-radius: 1em;
  background-color: yellow;
}

.f-txt-3-1::after {
  height: 0.25em;
}

.f-txt-3-2::after {
  height: 0.5em;
}

.f-txt-3-3::after {
  height: 0.75em;
}

.f-txt-3-4::after {
  height: 1em;
}

/* txt 4 (Stroke)
----------*/
.f-txt-4 {
  text-shadow: 0.04em 0.04em 0 #fff, 0.06em 0.06em 0 #fff, -0.04em 0.04em 0 #fff, -0.06em 0.06em 0 #fff, 0.04em -0.04em 0 #fff, 0.06em -0.06em 0 #fff, -0.04em -0.04em 0 #fff, -0.06em -0.06em 0 #fff;
}

.f-txt-4-1 {
  text-shadow: 0.04em 0.04em 0 #fff, 0.06em 0.06em 0 #fff, 0.08em 0.08em 0 #fff, -0.04em 0.04em 0 #fff, -0.06em 0.06em 0 #fff, -0.08em 0.08em 0 #fff, 0.04em -0.04em 0 #fff, 0.06em -0.06em 0 #fff, 0.08em -0.08em 0 #fff, -0.04em -0.04em 0 #fff, -0.06em -0.06em 0 #fff, -0.08em -0.08em 0 #fff;
}

.f-txt-4-2 {
  color: #fff;
  text-shadow: 0.04em 0.04em 0 #000, 0.06em 0.06em 0 #000, -0.04em 0.04em 0 #000, -0.06em 0.06em 0 #000, 0.04em -0.04em 0 #000, 0.06em -0.06em 0 #000, -0.04em -0.04em 0 #000, -0.06em -0.06em 0 #000;
}

.f-txt-4-3 {
  color: #fff;
  text-shadow: 0.04em 0.04em 0 #000, 0.06em 0.06em 0 #000, 0.08em 0.08em 0 #000, -0.04em 0.04em 0 #000, -0.06em 0.06em 0 #000, -0.08em 0.08em 0 #000, 0.04em -0.04em 0 #000, 0.06em -0.06em 0 #000, 0.08em -0.08em 0 #000, -0.04em -0.04em 0 #000, -0.06em -0.06em 0 #000, -0.08em -0.08em 0 #000;
}

.f-txt-4-4 {
  color: yellow;
  text-shadow: 6px 4px 0 #000, 6px 5px 0 #000, 6px 6px 0 #000, 5px 0px 0 #000, 5px -2px 0 #000, -3px 0px 0 #000, -3px -2px 0 #000, -3px 5px 0 #000;
}

/* 5 */
.f-txt-4-5 {
  color: #fff;
  text-shadow: 0.04em 0.04em 0 red, 0.06em 0.06em 0 #ff8c00, 0.08em 0.08em 0 #ff8c00, -0.04em 0.04em 0 #ff8c00, -0.06em 0.06em 0 red, -0.08em 0.08em 0 red, 0.04em -0.04em 0 #ff8c00, 0.06em -0.06em 0 red, 0.08em -0.08em 0 #ff8c00, -0.04em -0.04em 0 red, -0.06em -0.06em 0 red, -0.08em -0.08em 0 red;
}

/* 6 */
.f-txt-4-6 {
  color: #fff;
  text-shadow: 0.04em 0.04em 0 #00bfff, 0.06em 0.06em 0 #0026ff, 0.08em 0.08em 0 #0026ff, -0.04em 0.04em 0 #0072ff, -0.06em 0.06em 0 #00bfff, -0.08em 0.08em 0 #0083ff, 0.04em -0.04em 0 #0026ff, 0.06em -0.06em 0 #00a9ff, 0.08em -0.08em 0 #0026ff, -0.04em -0.04em 0 #00bfff, -0.06em -0.06em 0 #00bfff, -0.08em -0.08em 0 #0083ff;
}

/* 7 */
.f-txt-4-7 {
  color: #fff;
  text-shadow: 0.04em 0.04em 0 #bbe500, 0.06em 0.06em 0 #28ad00, 0.08em 0.08em 0 #28ad00, -0.04em 0.04em 0 #5d9300, -0.06em 0.06em 0 #bbe500, -0.08em 0.08em 0 #bbe500, 0.04em -0.04em 0 #28ad00, 0.06em -0.06em 0 #bbe500, 0.08em -0.08em 0 #28ad00, -0.04em -0.04em 0 #8aad00, -0.06em -0.06em 0 #bbe500, -0.08em -0.08em 0 #28ad00;
}

/* 8 */
.f-txt-4-8 {
  color: #fff;
  text-shadow: 0.04em 0.04em 0 #427edd, 0.06em 0.06em 0 #0d2347, 0.08em 0.08em 0 #0d2347, -0.04em 0.04em 0 #0d2347, -0.06em 0.06em 0 #427edd, -0.08em 0.08em 0 #427edd, 0.04em -0.04em 0 #0d2347, 0.06em -0.06em 0 #427edd, 0.08em -0.08em 0 #0d2347, -0.04em -0.04em 0 #427edd, -0.06em -0.06em 0 #427edd, -0.08em -0.08em 0 #427edd;
}

/* txt 5
----------*/
/* EMPTY */
/* txt 6
----------*/
.f-txt-6 {
  letter-spacing: 0;
}

.f-txt-6-1 {
  letter-spacing: 0.025em;
}

.f-txt-6-2 {
  letter-spacing: 0.05em;
}

.f-txt-6-3 {
  letter-spacing: 0.075em;
}

.f-txt-6-4 {
  letter-spacing: 0.1em;
}

.f-txt-6-5 {
  letter-spacing: 0.2em;
}

.f-txt-6-6 {
  letter-spacing: 0.4em;
}

.f-txt-6-7 {
  letter-spacing: -0.025em;
}

.f-txt-6-8 {
  letter-spacing: -0.05em;
}

.f-txt-6-9 {
  letter-spacing: -0.075em;
}

/* Bold
----------*/
.f-txt-b {
  font-weight: bold;
}

.f-txt-b-1 {
  font-weight: 900;
}

.f-txt-b-off {
  font-weight: normal;
}

/* Italic
----------*/
.f-txt-i {
  font-style: italic;
}

.f-txt-i-off {
  font-style: normal;
}

/* Align
-------------------*/
.f-txt-l {
  text-align: left;
}

.f-txt-c {
  text-align: center!important;
}

.f-txt-r {
  text-align: right;
}

.f-txt-j {
  text-align: justify;
}

@media screen and (max-width: 768px) {
.f-txt-l-c {
  text-align: center;
}}

@media screen and (min-width: 769px) {
.f-txt-l-c {
  text-align: left;
}}

/*==============================

	Filter

=========================*/
[class*="f-fx"] {
  position: relative;
  z-index: 1;
  filter: contrast(var(--CTR, 1)) brightness(var(--BRT, 1)) saturate(var(--SAT, 1)) sepia(var(--SPI, 0)) var(--HUE);
}

[class*="f-fx"]::after,
[class*="f-fx"]::before {
  border-radius: inherit;
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  pointer-events: none;
}

[class*="f-fx"]::after {
  z-index: 3;
  mix-blend-mode: var(--BRM1, screen);
  background: var(--BG1);
  opacity: var(--OPC, 1);
}

[class*="f-fx"]::before {
  mix-blend-mode: var(--BRM2, normal);
  background: var(--BG2);
  opacity: var(--OPC, 1);
}

/* 1997 */
.f-fx {
  --CTR: 1.1;
  --BRT: 1.1;
  --SAT: 1.3;
  --BG1: rgba(243, 106, 188, 0.3);
}

/* Aden */
.f-fx-1 {
  --HUE: hue-rotate(-20deg);
  --CTR: 0.9;
  --BRT: 1.2;
  --SAT: 0.85;
  --BRM1: darken;
  --BG1: linear-gradient(to right, rgba(66, 10, 14, 0.2), transparent);
}

/* Brannan */
.f-fx-2 {
  --CTR: 1.4;
  --SPI: 0.5;
  --BRM1: lighten;
  --BG1: rgba(161, 44, 199, 0.31);
}

/* Earlybird */
.f-fx-3 {
  --CTR: 0.9;
  --SPI: 0.2;
  --BRM1: overlay;
  --BG1: radial-gradient(circle, #d0ba8e 20%, #360309 85%, #1d0210 100%);
}

/* Earlybird */
.f-fx-4 {
  --HUE: hue-rotate(-10deg);
  --BRT: 1.05;
  --BRM1: soft-light;
  --BG1: lavender;
}

/* Lark */
.f-fx-5 {
  --CTR: 0.9;
  --BG1: rgba(242, 242, 242, 0.8);
  --BG2: #22253f;
  --BRM1: darken;
  --BRM2: color-dodge;
}

/* Maven */
.f-fx-6 {
  --CTR: 0.95;
  --BRT: 0.95;
  --SAT: 1.5;
  --SPI: 0.25;
  --BG1: rgba(3, 230, 26, 0.2);
  --BRM1: hue;
}

/* Moon */
.f-fx-7 {
  --CTR: 1.1;
  --BRT: 1.1;
  --GRY: 1;
  --BG1: #a0a0a0;
  --BRM1: soft-light;
  --BG2: #383838;
  --BRM2: lighten;
}

/* Nashville */
.f-fx-8 {
  --CTR: 1.2;
  --BRT: 1.05;
  --SAT: 1.2;
  --SPI: 0.2;
  --BG1: rgba(0, 70, 150, 0.4);
  --BG2: rgba(247, 176, 153, 0.56);
  --BRM1: lighten;
  --BRM2: darken;
}

/* Perpetua */
.f-fx-9 {
  --BG1: linear-gradient(to bottom, #005b9a, #e6c13d);
  --BRM1: soft-light;
  --OPC: 0.5;
}

/* Reyes */
.f-fx-10 {
  --CTR: 0.85;
  --BRT: 1.1;
  --SAT: 0.75;
  --SPI: 0.22;
  --BG1: #efcdad;
  --BRM1: soft-light;
  --OPC: 0.5;
}

/* Slumber */
.f-fx-11 {
  --BRT: 1.05;
  --SAT: 0.66;
  --BG1: rgba(125, 105, 24, 0.5);
  --BG2: rgba(69, 41, 12, 0.4);
  --BRM1: soft-light;
  --BRM2: lighten;
}

/* Toaster */
.f-fx-12 {
  --CTR: 1.5;
  --BRT: 0.9;
  --BG1: radial-gradient(circle, #804e0f, #3b003b);
}

/* Walden */
.f-fx-13 {
  --HUE: hue-rotate(-10deg);
  --BRT: 1.1;
  --SAT: 1.6;
  --SPI: 0.3;
  --BG1: #0044cc;
  --OPC: 0.3;
}

/* Willow */
.f-fx-14 {
  --CTR: 0.95;
  --BRT: 0.9;
  --GRY: 0.5;
  --BG1: radial-gradient(40%, circle, #d4a9af 55%, black 150%);
  --BG2: #d8cdcb;
  --BRM1: overlay;
  --BRM2: color;
}

/*--------------------

Accordion

--------------------*/

.accordion1_openBtn {
    position: relative;
    width: 50%;
    margin: 0 auto 40px;
    padding: 1% 0;
    background: #153054;
    border: 2px solid #153054;
    border-radius: 50px;
    color: #fff;
    font-size: 1.8rem;
    font-weight: bold; 
    text-align: center;
    cursor: pointer;
}
.accordion1_openBtn:hover {
    opacity: 0.8;
    transition: 0.5s;
}
.accordion1_openBtn::after {
    position: absolute;
    top: 40%;
    right: 4%;
    content: '';
    display: block;
    width: 4%;
    height: 20%;
    background-image: url(/files/user/images/contents/ad/truesleeper/common_icon_200701_04.png?v=1592363110);
    background-size: contain;
    background-repeat: no-repeat;
}
.accordion1_closeBtn {
    position: relative;
    width: 50%;
    margin: 0 auto 40px;
    padding: 1% 0;
    background: #fff;
    border: 2px solid #153054;
    border-radius: 50px;
    color: #153054;
    font-size: 1.8rem;
    font-weight: bold; 
    text-align: center;
    cursor: pointer;
}
.accordion1_closeBtn:hover {
    opacity: 0.8;
    transition: 0.5s;
}
.accordion1_closeBtn::after {
    position: absolute;
    top: 40%;
    right: 4%;
    content: '';
    display: block;
    width: 4%;
    height: 20%;
    background-image: url(/files/user/images/contents/ad/truesleeper/common_icon_200701_03.png?v=1592363110);
    background-size: contain;
    background-repeat: no-repeat;
}
.hidden {
    display: none;
}

/*--------------------

.triangles-block::after {
position: absolute;
content: '';
pointer-events: none;
}

.triangles::after {
left: 50%;
width: 50px;
height: 50px;
bottom: -20px;
z-index: 10;
background: #fff;
-webkit-transform: translateX(-50%) rotate(45deg);
transform: translateX(-50%) rotate(45deg);
}

--------------------*/
.f-accordion-2 {
  margin-top: 10px; }
  .f-accordion-2__title {
    position: relative;
    padding: 5px 30px 5px 5px;
    border: solid 5px #fff;
    background-color: #f9f9f7;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    transition: 0.4s opacity; }
    .f-accordion-2__title:before {
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      display: inline-block;
      position: absolute;
      top: 50%;
      right: 10px;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
      font-family: "Font Awesome 5 Free";
      font-style: normal;
      font-variant: normal;
      font-weight: 900;
      line-height: 1;
      text-rendering: auto;
      content: ""; }
      .f-accordion-2.is-active .f-accordion-2__title:before {
        content: ""; }
    .f-accordion-2__title:hover {
      opacity: 0.7; }
  .f-accordion-2__contents {
    display: none;
    padding: 10px 5px;
    background-color: #fff;
    text-align: left;
    transition: 0.4s; }
  .f-accordion-2.is-active .f-accordion-2__contents {
    display: block; }

/*==============================

  Table02 20200805

==============================*/

.p-wrap__question{
  margin: 30px 15px;
}
.p-innerwrap{
  max-width: 910px;
  margin: 0 auto;
}
.p-innerwrap .c-table-header{
  margin: 1px 2px;
  padding: 1px 3px;
}
.p-innerwrap .c-table--dl{
  margin-bottom: 15px;
}
.p-innerwrap .c-table--dl dl:first-of-type{
  border: none;
}
.p-innerwrap dt{
  flex-wrap: wrap;
  padding: 7px 7px 7px 25px;
  border: 1px solid #fff;
  background-color: #eee;
  font-weight: bold;
}
.p-innerwrap dd{
  padding: 0;
  border: none;
}
.p-bgLightBrue,
.p-bgDarkBrue{
  display: inline-block;
  width: 50%;
  padding: 7px 0;
  border: 1px solid #fff;
  text-align: center;
}
.p-bgLightBrue.row2{
  line-height: 2.8;
  vertical-align: bottom;
}
.p-bgLightBrue.col1{
  width: 100%;
}
.p-bgLightBrue{
  background-color: #cce9f6;
}
.p-bgDarkBrue.row2{
  line-height: 1.4;
}
.p-bgDarkBrue{
  background-color: #d5deee;
}
.p-flex{
  display: flex;
  justify-content: center;
  align-items: center;
}
.p-flex span{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

 @media screen and (max-width: 768px) {
  .p-innerwrap dt{
      font-size: calc(1.8rem + ((1vw - 3.75px) * 1.5267));
      padding: 0 5px;
  }
  .p-innerwrap dt .u-fs-12{
      font-size: calc(1.8rem + ((1vw - 3.75px) * 1.5267));
  }
  .p-innerwrap dd{
      font-size: calc(1.6rem + ((1vw - 3.75px) * 2.5445));
  }
  .p-flex .p-flex-spHeight{
      line-height: 3.4;
  }

  .p-innerwrap .c-table-header {
      margin: 0 auto;
  }
}

/* ==================== 

  Table02 汎用化 20210729

====================*/
.c-table--dl__item {display: flex;}
@media screen and (max-width:768px){
  .c-table--dl__item{flex-wrap:wrap;}
  .c-table--dl__item__title{width:100%}
}

/*====================
	Triangle: tri
====================*/
[class*="f-tri-"] {
  position: relative;
}

[class*="f-tri-"]::after {
  content: "";
  display: block;
  clear: both;
}

[class*="f-tri-"] > * {
  margin: auto;
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

[class*="f-tri-"] > *:nth-child(4) {
  width: auto;
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
}

/*--------------------
	tri 1
--------------------*/
[class*="f-tri-1"] > *:first-child {
  width: 100%;
}

[class*="f-tri-1"] > *:nth-child(2) {
  float: left;
}

[class*="f-tri-1"] > *:nth-child(3) {
  float: right;
}

/* 1 */
.f-tri-1-1 > *:first-child {
  width: 50%;
}

/*--------------------
	tri 2
--------------------*/
[class*="f-tri-2"] > *:first-child {
  float: left;
}

[class*="f-tri-2"] > *:nth-child(2) {
  float: right;
}

[class*="f-tri-2"] > *:nth-child(3) {
  width: 100%;
  clear: both;
}

/* 1 */
.f-tri-2-1 > *:nth-child(3) {
  width: 50%;
}

/*||||||||||
	Media Query for tri
||||||||||*/
@media screen and (max-width: 480px) {
  [class*="f-tri-"] > *:nth-child(n) {
    width: 100%;
    float: none;
  }
  [class*="f-tri-"] > *:nth-child(4) {
    position: static;
    width: auto;
    transform: none;
  }
}

.triangles-block {
position: relative;
}

.triangles-block::after {
position: absolute;
content: '';
pointer-events: none;
}

.triangles::after {
left: 50%;
width: 50px;
height: 50px;
bottom: -20px;
z-index: 10;
background: #fff;
-webkit-transform: translateX(-50%) rotate(45deg);
transform: translateX(-50%) rotate(45deg);
}

.f-flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

.f-flex--l {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.f-flex-onimage-item {
  display: flex;
  align-items: center;
  height: 15vw;
  width: 15vw;
  max-height: 125px;
  max-width: 125px;
  margin: 0 5px;
}

.f-flex-onimage-image {
  height: 15vw;
  width: 15vw;
  max-height: 125px;
  max-width: 125px;
  overflow: hidden;
  margin: 0 5px;
}

.f-height-10 {
  height: 100%!important;
}

.f-nowrap {
  white-space: nowrap;
}

.f-wrap {
  white-space: pre-wrap;
}

.f-icon-check_item {
  margin-right: 5px;
  max-width: 28px;
}

.f-i-b {
  display: inline-block;
  vertical-align: middle;
}

.f-icon-check .f-icon-check_item {
  vertical-align: middle;
}

.f-onimage-block {
  position: absolute;
  left: 50%;
  transform: translate(-50%,-30%);
}

.f-onimage-block::after {
  content: "";
  border: transparent solid 200px;
  border-top: 25px solid;
  border-top-color: inherit;
  display: block;
  width: 100%;
  border-bottom-width: 0;
}

.f-onimage-block:not([class*="f-bdc"])::after {
  border-top-color: #ffce70;
}

.f-onimage-block-text {
  padding: 25px 0 15px;
}

.f-onimage-block-text:not([class*="f-bg"]) {
  background: #ffce70;
}

@media screen and (max-width: 768px) {
  .f-icon-check_item {
    margin-right: 5px;
    max-width: 18px;
  }
}

@media screen and (max-width: 500px) {
  .f-onimage-block {
    width: 280px;
  }

  .f-onimage-block::after {
    border-left-width: 140px;
    border-right-width: 140px;
  }

  .f-onimage-block-text {
    padding: 15px 0 8px;
    font-size: 1.4rem;
  }
}

@media screen and (max-width: 374px) {
  .f-flex-onimage-item {
    margin: 0 2px;
  }

  .f-flex-onimage-image {
    margin: 0 2px;
  }
  
  .f-onimage-block {
    transform: translate(-50%, -10%);
  }
}

/*-------------------
	h 8
-------------------*/
[class*="f-h-8"] {
  position: relative;
  display: flex;
  align-items: center;
}









/*====================
	Columns: col 210122
====================*/
[class*="f-col"] {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

[class*="f-col"] img {
  height: auto;
  width: 100%;
  vertical-align: bottom;
}

[class*="f-col-"] {
  justify-content: space-between;
}

/*--------------------
	col 1
--------------------*/
.f-col-1 > * {
  width: 100%;
}

.f-col-1.f-gap > * + * {
  margin-top: 1em;
}

.f-col-1.f-gap-1 > * + * {
  margin-top: 1%;
}

.f-col-1.f-gap-2 > * + * {
  margin-top: 2%;
}

.f-col-1.f-gap-3 > * + * {
  margin-top: 3%;
}

.f-col-1.f-gap-4 > * + * {
  margin-top: 5%;
}

/*--------------------
	col 2
--------------------*/
.f-col-2 > * {
  width: 50%;
}

.f-col-2.f-gap > * {
  width: calc(50% - 0.5em);
}

.f-col-2.f-gap > *:nth-child(n + 3) {
  margin-top: 1em;
}

.f-col-2.f-gap-1 > * {
  width: 49.5%;
}

.f-col-2.f-gap-1 > *:nth-child(n + 3) {
  margin-top: 1%;
}

.f-col-2.f-gap-2 > * {
  width: 49%;
}

.f-col-2.f-gap-2 > *:nth-child(n + 3) {
  margin-top: 2%;
}

.f-col-2.f-gap-3 > * {
  width: 48%;
}

.f-col-2.f-gap-3 > *:nth-child(n + 3) {
  margin-top: 3%;
}

.f-col-2.f-gap-4 > * {
  width: 46%;
}

.f-col-2.f-gap-4 > *:nth-child(n + 3) {
  margin-top: 5%;
}

/*--------------------
	col 3
--------------------*/
.f-col-3 > * {
  width: calc((100% / 3));
}

.f-col-3.f-gap > * {
  width: calc((100% / 3) - 0.5em);
}

.f-col-3.f-gap > *:nth-child(n + 4) {
  margin-top: 1em;
}

.f-col-3.f-gap-1 > * {
  width: calc((100% / 3) - 0.66%);
}

.f-col-3.f-gap-1 > *:nth-child(n + 4) {
  margin-top: 1%;
}

.f-col-3.f-gap-2 > * {
  width: calc((100% / 3) - 1.32%);
}

.f-col-3.f-gap-2 > *:nth-child(n + 4) {
  margin-top: 2%;
}

.f-col-3.f-gap-3 > * {
  width: calc((100% / 3) - 2.64%);
}

.f-col-3.f-gap-3 > *:nth-child(n + 4) {
  margin-top: 3%;
}

.f-col-3.f-gap-4 > * {
  width: calc((100% / 3) - 5.28%);
}

.f-col-3.f-gap-4 > *:nth-child(n + 4) {
  margin-top: 5%;
}

/*--------------------
	col 4
--------------------*/
.f-col-4 > * {
  width: calc((100% / 4));
}

.f-col-4.f-gap > * {
  width: calc((100% / 4) - 0.5em);
}

.f-col-4.f-gap > *:nth-child(n + 5) {
  margin-top: 1em;
}

.f-col-4.f-gap-1 > * {
  width: calc((100% / 4) - 0.75%);
}

.f-col-4.f-gap-1 > *:nth-child(n + 5) {
  margin-top: 1%;
}

.f-col-4.f-gap-2 > * {
  width: calc((100% / 4) - 1.5%);
}

.f-col-4.f-gap-2 > *:nth-child(n + 5) {
  margin-top: 2%;
}

.f-col-4.f-gap-3 > * {
  width: calc((100% / 4) - 3%);
}

.f-col-4.f-gap-3 > *:nth-child(n + 5) {
  margin-top: 3%;
}

.f-col-4.f-gap-4 > * {
  width: calc((100% / 4) - 4.5%);
}

.f-col-4.f-gap-4 > *:nth-child(n + 5) {
  margin-top: 5%;
}

/*||||||||||||||||||||
	Media Query for Column
||||||||||||||||||||*/
@media screen and (max-width: 768px) {
  [class*="f-col-"]:not([class*="f-bp-"]):not(.f-col-4) > * {
    width: 100%;
  }
  [class*="f-col-"]:not([class*="f-bp-"]):not(.f-col-4)[class*="f-gap"] > * + * {
    margin-top: 10px;
  }
  [class*="f-col-"]:not([class*="f-bp-"]):not(.f-col-4).f-gap-1 > * + * {
    margin-top: 10px;
  }
  [class*="f-col-"]:not([class*="f-bp-"]):not(.f-col-4).f-gap-2 > * + * {
    margin-top: 15px;
  }
  [class*="f-col-"]:not([class*="f-bp-"]):not(.f-col-4).f-gap-3 > * + * {
    margin-top: 20px;
  }
  [class*="f-col-"]:not([class*="f-bp-"]):not(.f-col-4).f-gap-4 > * + * {
    margin-top: 25px;
  }
  [class*="f-col-"]:not([class*="f-bp-"]):not(.f-col-4).f-bpCol-rev > *:nth-child(1) {
    order: 4;
  }
  [class*="f-col-"]:not([class*="f-bp-"]):not(.f-col-4).f-bpCol-rev > *:nth-child(2) {
    order: 3;
  }
  [class*="f-col-"]:not([class*="f-bp-"]):not(.f-col-4).f-bpCol-rev > *:nth-child(3) {
    order: 2;
  }
  [class*="f-col-"]:not([class*="f-bp-"]):not(.f-col-4).f-bpCol-rev > *:nth-child(4) {
    order: 1;
  }
  .f-col-3.f-bp-1 > *,
  .f-col-4 > * {
    width: 50%;
  }
  .f-col-3.f-bp-1.f-gap > *,
  .f-col-4.f-gap > * {
    width: calc(50% - 0.5em);
  }
  .f-col-3.f-bp-1.f-gap > *:nth-child(n + 3),
  .f-col-4.f-gap > *:nth-child(n + 3) {
    margin-top: 1em;
  }
  .f-col-3.f-bp-1.f-gap-1 > *,
  .f-col-4.f-gap-1 > * {
    width: 49.5%;
  }
  .f-col-3.f-bp-1.f-gap-1 > *:nth-child(n + 3),
  .f-col-4.f-gap-1 > *:nth-child(n + 3) {
    margin-top: 10px;
  }
  .f-col-3.f-bp-1.f-gap-2 > *,
  .f-col-4.f-gap-2 > * {
    width: 49%;
  }
  .f-col-3.f-bp-1.f-gap-2 > *:nth-child(n + 3),
  .f-col-4.f-gap-2 > *:nth-child(n + 3) {
    margin-top: 15px;
  }
  .f-col-3.f-bp-1.f-gap-3 > *,
  .f-col-4.f-gap-3 > * {
    width: 48%;
  }
  .f-col-3.f-bp-1.f-gap-3 > *:nth-child(n + 3),
  .f-col-4.f-gap-3 > *:nth-child(n + 3) {
    margin-top: 20px;
  }
  .f-col-3.f-bp-1.f-gap-4 > *,
  .f-col-4.f-gap-4 > * {
    width: 46%;
  }
  .f-col-3.f-bp-1.f-gap-4 > *:nth-child(n + 3),
  .f-col-4.f-gap-4 > *:nth-child(n + 3) {
    margin-top: 25px;
  }
}

@media screen and (max-width: 480px) {
  .f-col-3.f-bp-0 > *:nth-child(n),
  .f-col-4:not(.f-bp-0) > *:nth-child(n),
  [class*="f-col-"].f-bp-1:not(.f-bp-0) > *:nth-child(n) {
    width: 100%;
  }
  .f-col-3.f-bp-0[class*="f-gap"] > * + *,
  .f-col-4:not(.f-bp-0)[class*="f-gap"] > * + *,
  [class*="f-col-"].f-bp-1:not(.f-bp-0)[class*="f-gap"] > * + * {
    margin-top: 10px;
  }
  .f-col-3.f-bp-0.f-gap-1 > * + *,
  .f-col-4:not(.f-bp-0).f-gap-1 > * + *,
  [class*="f-col-"].f-bp-1:not(.f-bp-0).f-gap-1 > * + * {
    margin-top: 10px;
  }
  .f-col-3.f-bp-0.f-gap-2 > * + *,
  .f-col-4:not(.f-bp-0).f-gap-2 > * + *,
  [class*="f-col-"].f-bp-1:not(.f-bp-0).f-gap-2 > * + * {
    margin-top: 15px;
  }
  .f-col-3.f-bp-0.f-gap-3 > * + *,
  .f-col-4:not(.f-bp-0).f-gap-3 > * + *,
  [class*="f-col-"].f-bp-1:not(.f-bp-0).f-gap-3 > * + * {
    margin-top: 20px;
  }
  .f-col-3.f-bp-0.f-gap-4 > * + *,
  .f-col-4:not(.f-bp-0).f-gap-4 > * + *,
  [class*="f-col-"].f-bp-1:not(.f-bp-0).f-gap-4 > * + * {
    margin-top: 25px;
  }
  [class*="f-col-"].f-bp-1:not(.f-bp-0).f-bpCol-rev > *:nth-child(1) {
    order: 4;
  }
  [class*="f-col-"].f-bp-1:not(.f-bp-0).f-bpCol-rev > *:nth-child(2) {
    order: 3;
  }
  [class*="f-col-"].f-bp-1:not(.f-bp-0).f-bpCol-rev > *:nth-child(3) {
    order: 2;
  }
  [class*="f-col-"].f-bp-1:not(.f-bp-0).f-bpCol-rev > *:nth-child(4) {
    order: 1;
  }
}



/*--------------------
セットカート調整
--------------------*/
  @media screen and (max-width: 768px) {
  .p-productDetail__setcart__info {margin-top: 5px!important;}
  .p-productDetail__setcart__slider {margin-bottom: 32px!important;}
}

/* 2021-02-10 */
.comp02__tel__normal,
.comp02__tel__normal a {
  text-decoration: none;
  color: inherit;
}

/* 2021-5-11 */
.blockInner {
  max-width: 800px;
}

.f-double_block__title--middle {
  position: relative;
  display: inline-block;
  padding: 1% 5%;
  overflow: hidden;
}

.f-double_block__title__inner--sideframe {
  position: absolute;
}

.f-double_block__title__inner--sideframe::before,
.f-double_block__title__inner--sideframe::after {content:"";display:block;border:solid 1px #fff;position:absolute;}
.f-double_block__title__inner--sideframe::before {top: 7px; left: 4px;width: 14px;}
.f-double_block__title__inner--sideframe::after {top: 4px;left: 6px;height: 14px;}
.frame--right.f-double_block__title__inner--sideframe::before {bottom: 6px;right: 4px;top: auto;left: auto;}
.frame--right.f-double_block__title__inner--sideframe::after {bottom: 4px;right: 7px;top: auto;left: auto;}

.frame--left {
  top: 0; left:0;
}

.frame--right {
  bottom: 0; right:0;
}

.f-double_block__title--arrow {
  line-height: 1;
  position: relative;
  z-index: 1;
}

[class*="f-flo-1"] .f-double_block__title--arrow {
  padding: 0% 0% 0% 8%;
  text-align: right;
  white-space: nowrap;
}

[class*="f-flo-2"] .f-double_block__title--arrow {
  padding: 0% 2%;
}

.f-double_block__title--arrow__inner {
  display:inline-block;
  vertical-align:middle;
  padding:10px;
  width:80%;
  white-space: normal;
}

.f-double_block__title--arrow__inner__empty {
  display:inline-block;vertical-align:middle;
  border: solid 0px transparent;
  border-right: solid 15px #fff;
  border-left: solid 5px transparent;
  position: absolute;
  top: 0;
  right: 0;
}

.f-double_block__container {
  margin-top: -3rem;
}

.f-double_block__container--sub {
  margin-top: -40px;
}

.f-double_block__container--sub__contents {
  margin-top: -4rem;
  padding: 0 2%;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.f-double_block__container--sub__img__box {
  width: 20%;
  margin-right: 1.5%;
}

.u-otherheading .f-double_block__container--sub__contents {
  margin-top: 2rem;
}

.u-otherheading .f-double_block__container--sub__text {
  display: inline;
}

.f-card__container > .f-card__box:nth-child(-n+2) {
  margin-bottom: 50px;
}

.f-card__img {
  margin-top: auto;
}

.f-card__box__title__group {
  padding: 0 4%;
  margin: -0.5em auto 20px;
  line-height: 1;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
}

.f-card__box__title {
  display: inline-block;
}

.f-card__box__title::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -15px;
  display: inline-block;
  width: 76px;
  height: 3px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

@media screen and (min-width: 769px) {
  .f-double_block__title--arrow__inner {
    padding: 20px 0px;
  }

  .f-card__container__row {
    display: table;
    table-layout: fixed;
    border-spacing: 10px 15px;
  }
  
  .f-card__box {
    display: table-cell;
    width: 400px;
  }
}

@media screen and (max-width:768px){
  .blockInner {
      width: 95%;
  }

  [class*="f-flo-1"] .f-double_block__title--arrow {
    padding: 0% 0% 0% 20%;
    min-width: 98%;
  }

  [class*="f-flo-2"] .f-double_block__title--arrow {
    padding: 1.5% 2% 2% 3%;
  }
  
  .f-double_block__container--sub__img__box {
    width: 35%;
  }

  .f-double_block__container--sub__contents {
    margin-top: -8rem;
  }

  .f-double_block .f-double_block__container--sub__contents .f-double_block__container--sub__text {
    margin-top: 10rem;
  }

  .f-double_block__title--middle {
      padding: 2.5% 10%;
  }

  .f-card {
    margin-bottom: 50px;
  }

  .f-card__box__title__group {
      font-size: 2rem;
  }

  .f-card__container > .f-card__box:nth-child(-n+3) {
      margin-bottom: 36px;
  }
}

@media screen and (min-width:320px) and (max-width:768px) {
  .f-double_block__container--sub__img {
      padding-top: calc(2.5rem + ((1vw - 3.2px) * -5.58));
  }
}