@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,700,800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&family=Poppins:wght@400;700&display=swap");
@import url("https://use.typekit.net/sdu4tkp.css");
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none; }

/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer; }

input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none; }

input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px; }

input[type="text"],
input[type="button"],
input[type="email"],
input[type="submit"],
textarea {
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; }

body {
  position: relative;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  font-family: 'Poppins', "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", sans-serif;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: #333;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "palt" on; }

html {
  font-size: 18px; }

@media screen and (max-width: 1440px) {
  html {
    font-size: 16px; } }
@media screen and (max-width: 800px) {
  html {
    font-size: 14px; } }
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box; }

/************************************************************

    Genaral Settings

************************************************************/
.svgLoad {
  display: none; }

/*
    Links
******************************/
a {
  color: #333;
  text-decoration: none;
  -webkit-transition: all .2s ease-out;
  -moz-transition: all .2s ease-out;
  -ms-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  transition: all .2s ease-out; }
  a img {
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -ms-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out; }
  a:hover {
    color: #f8B500; }
    a:hover img {
      -webkit-opacity: 0.5;
      -moz-opacity: 0.5;
      -o-opacity: 0.5;
      filter: alpha(opacity=50);
      -ms-filter: "alpha(opacity=50)";
      opacity: 0.5; }

/*
    Images
******************************/
img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
  margin: 0 auto; }


    Other
******************************/
.__sp {
  display: none; }

.__pc {
  display: block; }

.object-fit {
  width: 100%;
  height: 100%;
  object-fit: cover;
  font-family: "object-fit: cover;"; }

/************************************************************

     Wrapper

************************************************************/
#wrapper {
  width: 100%;
  position: relative; }

/************************************************************

     Breadcrumb

************************************************************/
.breadcrumbs {
  position: relative;
  margin: 3.2vw 0;
  padding: 0 6.4vw;
  z-index: 50; }

.breadcrumbs ul li {
  display: inline-block; }

.breadcrumbs ul li span {
  font-size: 0.85em;
  letter-spacing: 0.05em; }

.breadcrumbs ul li a {
  position: relative;
  margin: 0 1.5em 0 0;
  color: #222; }

.breadcrumbs ul li a:hover {
  color: #f8B500; }

.breadcrumbs ul li a::after {
  content: ">";
  position: absolute;
  top: 50%;
  margin-top: -0.4em;
  right: -1.25em;
  color: #222; }

/************************************************************

     Footer

************************************************************/
.footer {
  position: relative;
  margin: 3.2vw 0 0;
  padding-left: 6.4vw;
  padding-right: 6.4vw;
  padding-top: calc( 72px + 2.4vw );
  padding-bottom: calc( 72px + 2.4vw );
  background: #1a1a1a;
  z-index: 50; }

.footer .f-logo {
  width: 203px;
  height: 40px;
  overflow: hidden; }

.footer .f-logo a {
  display: block;
  width: 203px;
  height: 40px;
  text-indent: -9999px;
  background-image: url(../images/asset/footer_logo.png);
  background-repeat: no-repeat;
  background-size: 100%; }

/*
    footer -> Navigation
******************************/
.f-nav {
  margin: 1.5em 0 0; }

.f-nav ul li {
  display: inline-block;
  margin: 0 0.5em; }

.f-nav ul li:first-child {
  margin-left: 0; }

.f-nav ul li:last-child {
  margin-right: 0; }

.f-nav a {
  display: inline-block;
  color: #fff;
  font-size: 0.8em; }

/*
    footer -> Follow Us
******************************/
.f-sns {
  position: absolute;
  top: calc( 72px + 2.4vw );
  right: 6.4vw; }

.f-sns ul li {
  display: inline-block;
  width: 50px;
  height: 50px; }

.f-sns ul li a {
  display: block;
  width: 50px;
  height: 50px; }

.f-sns ul li a:hover {
  background-color: #444; }

.f-sns ul li.__fb a,
.f-sns ul li.__tw a,
.f-sns ul li.__ig a,
.f-sns ul li.__yt a {
  background-image: url(../images/asset/footer_ico.png);
  background-repeat: no-repeat;
  background-size: cover;
  text-indent: -9999px;
  border-radius: 100%; }

.f-sns ul li.__fb a {
  background-position: 0px 0px; }

.f-sns ul li.__tw a {
  background-position: -50px 0px; }

.f-sns ul li.__ig a {
  background-position: -100px 0px; }

.f-sns ul li.__yt a {
  background-position: -150px 0px; }

/*
    footer -> Copyright
******************************/
.footer .f-copyright {
  position: absolute;
  font-size: 0.7em;
  color: #999;
  bottom: calc( 72px + 2.4vw );
  right: 6.4vw; }

/*
    footer -> Page Top
******************************/
.f-pagetop {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 900;
  display: none; }

.f-pagetop a {
  width: 6vw;
  height: 6vw;
  min-width: 54px;
  min-height: 54px;
  max-width: 72px;
  max-height: 72px;
  position: relative;
  display: block;
  background: #333;
  text-indent: -9999px; }

.f-pagetop a::after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 4px 8px 4px;
  border-color: transparent transparent #fff transparent;
  top: 50%;
  left: 50%;
  margin-top: -4px;
  margin-left: -4px; }

.f-pagetop a:hover {
  background: #f8B500; }

/* ---------------------------------------
	max-width: 800px
--------------------------------------- */
@media screen and (max-width: 640px) {
  html {
    font-size: 14px;
  }
  /************************************************************

      Breadcrumb

  ************************************************************/
  .breadcrumbs {
    margin: 4.8vw 0; }

  .breadcrumbs ul li {
    display: inline-block; }

  .breadcrumbs ul li span {
    font-size: 0.8em; }

  /************************************************************

      Footer

  ************************************************************/
  .footer {
    margin: 3.2vw 0 0;
    padding-top: 6.4vw;
    padding-bottom: calc( 64px + 2.4vw );
  }
  .f-nav ul li {
    margin: 0 0.25em;
  }
  .f-sns {
    position: relative;
    margin: 1em 0;
    top: auto;
    right: auto;
  }
  .footer .f-copyright {
    position: relative;
    font-size: 0.7em;
    bottom: auto;
    right: auto;
  }
}
/* max-width: 800px */
@media screen and (max-width: 600px) {
  /*
      Other
  ******************************/
  .__sp {
    display: block; }

  .__pc {
    display: none; }

  /************************************************************

        Footer

  ************************************************************/
  .footer {
    margin: 4.8vw 0 0;
    padding-top: 9.6vw;
    padding-bottom: calc( 56px + 2.4vw ); }

  .footer .f-logo {
    width: 144px;
    height: 28px; }

  .footer .f-logo a {
    width: 144px;
    height: 28px; }

  .f-nav ul {
    border-top: 1px solid #333; }

  .f-nav ul li {
    display: block;
    margin: 0;
    border-bottom: 1px solid #333; }

  .f-nav ul li a {
    display: block;
    padding: 2.8vw; }

  .footer .f-copyright {
    font-size: 0.65em; } }
/* max-width: 600px */
/* ---------------------------------------
	max-width: 320px
--------------------------------------- */
@media screen and (max-width: 320px) {
  html {
    font-size: 13px;
  }
/* max-width: 320px */