@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Oswald:wght@300;400&family=Ubuntu:wght@700&display=swap");
/*
@mixin serif() {
    font-family: '游明朝','Yu Mincho', '游明朝体', 'YuMincho','ＭＳ Ｐ明朝', 'MS PMincho', serif;
}
@mixin sansserif() {
    font-family: 'Helvetica','Arial', "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', sans-serif;
	
	font-family: 'Avenir','Helvetica Neue','Helvetica','Arial', "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', sans-serif;
}
*/
.color_base {
  color: #000; }

*:focus {
  outline: none; }

* {
  box-sizing: border-box; }

html {
  font-size: 62.5%; }

body {
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1;
  color: #000;
  letter-spacing: .1em;
  background-color: #fff; }
  @media screen and (max-width: 599px) {
    body {
      font-size: 1.5rem; } }
  body * {
    box-sizing: inherit; }

.sp_only,
.tb_sp_only {
  display: none !important; }

@media screen and (max-width: 1024px) {
  .pc_only {
    display: none !important; }

  .pc_tb_only,
  .tb_sp_only {
    display: block !important; } }
@media screen and (max-width: 599px) {
  .pc_tb_only {
    display: none !important; }

  .sp_only {
    display: block !important; } }
.mto i {
  font-style: normal; }

.mto i:after {
  content: '@'; }

/*********************************************************/
main {
  overflow: hidden;
  min-height: 500px;
  display: block; }

img {
  width: 100%; }

a {
  transition: opacity .4s;
  display: block;
  position: relative;
  height: 100%;
  color: #000; }
  a:hover {
    opacity: 0.5; }
  a.txt_link {
    display: inline;
    color: #b5903f; }
  a.txt_link_line {
    display: inline;
    text-decoration: underline; }
    a.txt_link_line:hover {
      text-decoration: none;
      opacity: 1; }
  a.tel_link {
    display: inline; }

h1, h2, h3, h4, h5 {
  line-height: 1.5; }

p, dt, dd, li {
  line-height: 1.8; }

address {
  font-style: normal; }

figcaption {
  margin-top: .5em;
  font-size: 85%;
  line-height: 1.5;
  text-align: center;
  margin-top: .5em; }

/*********************************************************/
.txt_center {
  text-align: center; }
  @media screen and (max-width: 599px) {
    .txt_center {
      text-align: left; } }

.sign {
  text-align: right;
  margin-top: 1em; }
  .sign span {
    font-size: 70%;
    display: block; }

.fontweight_normal {
  font-weight: normal; }

.large {
  font-size: 1.2em; }

.small {
  font-size: .8em; }

.notes {
  margin-top: 1em;
  font-size: .85em;
  line-height: 1.5; }

.red {
  color: #b6282c; }

.flex_box {
  display: flex;
  flex-wrap: wrap; }

.flex_tate_center {
  align-items: center; }

.flex_tate_bottom {
  align-items: flex-end; }

.flex_yoko_center {
  justify-content: center; }

.flex_yoko_spaceb {
  justify-content: space-between; }

/*********************************************************/
main {
  margin-top: -70px; }
  @media screen and (max-width: 1024px) {
    main {
      margin-top: 0; } }

.content {
  padding: 100px 0; }
  @media screen and (max-width: 599px) {
    .content {
      padding: 80px 0; } }

.box:not(:last-child) {
  padding-bottom: 100px; }
  @media screen and (max-width: 1024px) {
    .box:not(:last-child) {
      padding-bottom: 80px; } }

.anchor_link_box {
  padding-top: 80px; }
  @media screen and (max-width: 599px) {
    .anchor_link_box {
      padding-top: 60px; } }

.inner {
  width: 90%;
  margin: 0 auto; }

.w1200 {
  max-width: 1200px; }

.w1000 {
  max-width: 1000px; }

.w800 {
  max-width: 800px; }

.title {
  font-family: 'Ubuntu', sans-serif !important;
  font-weight: 700;
  font-size: 6rem;
  line-height: 1.2; }
  @media screen and (max-width: 599px) {
    .title {
      font-size: 3rem;
      letter-spacing: .03em; } }
  .title span {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 1.8rem;
    display: block;
    margin-top: 5px;
    padding: 0 2px; }
    @media screen and (max-width: 599px) {
      .title span {
        font-size: 1.4rem; } }

.midashi {
  font-size: 3rem;
  font-weight: 500;
  margin-bottom: 1em; }
  @media screen and (max-width: 599px) {
    .midashi {
      font-size: 2rem; } }

.btn {
  width: 300px;
  height: auto;
  margin: 0 auto;
  text-align: center;
  transition: all .4s ease;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: none;
  color: #000;
  border: 1px solid #000;
  position: relative;
  display: inline-block;
  text-decoration: none;
  outline: none;
  padding: 20px 0; }
  .btn.btn_wh {
    color: #fff;
    border-color: #fff; }
  @media screen and (max-width: 599px) {
    .btn {
      width: 100%; } }
  .btn:before, .btn:after {
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    z-index: 2;
    content: '';
    transition: all .3s; }
  .btn:before {
    border-top: 1px solid #b5903f;
    border-bottom: 1px solid #b5903f;
    transform: scale(0, 1); }
  .btn:after {
    border-right: 1px solid #b5903f;
    border-left: 1px solid #b5903f;
    transform: scale(1, 0); }
  .btn:hover {
    color: #b5903f;
    opacity: 1; }
    .btn:hover:before, .btn:hover:after {
      transform: scale(1); }

.sns_pc {
  position: fixed;
  left: 15px;
  width: 35px;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100; }
  .sns_pc li:not(:last-child) {
    margin-bottom: 20px; }

.tel {
  font-family: 'Ubuntu', sans-serif !important;
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 1.3; }
  @media screen and (max-width: 599px) {
    .tel {
      font-size: 2.8rem; } }
  .tel a {
    font-family: 'Ubuntu', sans-serif !important;
    font-weight: 700; }
  .tel span {
    display: block;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 1.4rem;
    font-weight: 400;
    text-align: center; }
    @media screen and (max-width: 599px) {
      .tel span {
        font-size: 1.2rem; } }

.shop_info dt, .shop_info dd {
  border-bottom: 1px solid #ccc;
  padding-bottom: 20px;
  margin-bottom: 20px;
  padding-left: 10px;
  box-sizing: border-box; }
.shop_info dt {
  font-weight: bold;
  width: 20%;
  border-bottom-color: #999; }
  @media screen and (max-width: 599px) {
    .shop_info dt {
      width: 100%;
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 5px; } }
.shop_info dd {
  width: 80%; }
  @media screen and (max-width: 599px) {
    .shop_info dd {
      width: 100%; } }

#pagetop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  text-indent: -9999px;
  z-index: 99; }
  @media screen and (max-width: 599px) {
    #pagetop {
      bottom: 20px;
      right: 20px; } }
  #pagetop a {
    background: #b5903f;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center; }
    @media screen and (max-width: 599px) {
      #pagetop a {
        width: 50px;
        height: 50px; } }
    #pagetop a:before {
      content: '';
      display: inline-block;
      width: 20px;
      height: 20px;
      border-top: 2px solid #fff;
      border-left: 2px solid #fff;
      transform: rotate(45deg);
      margin-top: 10px; }
      @media screen and (max-width: 599px) {
        #pagetop a:before {
          width: 16px;
          height: 16px;
          margin-top: 8px; } }

/*********************************************************
　　　　　　　　　　　フォーム
*********************************************************/
form {
  margin-top: 60px; }
  @media screen and (max-width: 599px) {
    form {
      margin-top: 40px; } }
  form input[type="text"], form input[type="email"], form input[type="tel"], form textarea, form select {
    background: #f2f2f2;
    padding: 15px;
    box-sizing: border-box;
    width: 100%;
    border: none;
    font-size: 16px;
    border-radius: 0; }
  @media screen and (max-width: 599px) {
    form select {
      height: 45px;
      color: #000; } }
  form input.zip {
    width: 49%; }
  form input[type="checkbox"], form input[type="radio" i] {
    display: none; }
    form input[type="checkbox"] + label, form input[type="radio" i] + label {
      display: flex;
      align-items: center;
      cursor: pointer;
      position: relative; }
      form input[type="checkbox"] + label:before, form input[type="radio" i] + label:before {
        content: '';
        width: 1.2em;
        height: 1.2em;
        background: #f2f2f2;
        margin-right: 7px; }
        @media screen and (max-width: 599px) {
          form input[type="checkbox"] + label:before, form input[type="radio" i] + label:before {
            width: 20px;
            height: 20px; } }
    form input[type="checkbox"]:checked + label:after, form input[type="radio" i]:checked + label:after {
      content: '';
      position: absolute;
      top: 50%;
      left: 3px;
      box-sizing: border-box;
      display: block;
      width: 16px;
      height: 8px;
      margin-top: -8px;
      border-left: 3px solid #b5903f;
      border-bottom: 3px solid #b5903f;
      transform: rotate(-45deg); }
  form textarea {
    height: 15em; }
  form dl {
    justify-content: space-between; }
    form dl dt, form dl dd {
      margin-bottom: 20px; }
    form dl dt {
      width: 20em;
      padding-top: 8px; }
      @media screen and (max-width: 1024px) {
        form dl dt {
          width: 30%; } }
      @media screen and (max-width: 599px) {
        form dl dt {
          width: 100%;
          margin-bottom: 10px; } }
    form dl dd {
      width: calc(100% - 20em); }
      @media screen and (max-width: 1024px) {
        form dl dd {
          width: 68%; } }
      @media screen and (max-width: 599px) {
        form dl dd {
          width: 100%; } }
      form dl dd ul {
        justify-content: space-between; }
        form dl dd ul li {
          width: 49%; }
    form dl .checkbox {
      padding-top: 8px;
      justify-content: flex-start; }
      @media screen and (max-width: 599px) {
        form dl .checkbox {
          padding-top: 0; } }
      form dl .checkbox li {
        width: auto;
        margin-right: 20px; }
        @media screen and (max-width: 599px) {
          form dl .checkbox li {
            margin-bottom: 10px; } }
        form dl .checkbox li:not(:last-child) {
          margin-bottom: .5em; }
          @media screen and (max-width: 599px) {
            form dl .checkbox li:not(:last-child) {
              margin-bottom: 20px; } }
  form .required:after {
    content: '［必須］';
    color: #cc0a2a;
    font-size: 80%;
    vertical-align: text-bottom; }
  form .btn_wrap {
    text-align: center;
    margin-top: 50px; }
    @media screen and (max-width: 599px) {
      form .btn_wrap {
        margin-top: 30px; } }

/*********************************************************
　　　　　　　　　　　マージン・パディング
*********************************************************/
.mt1em {
  margin-top: 1em; }

.mt2em {
  margin-top: 2em; }

.mt3em {
  margin-top: 3em; }

.mb1em {
  margin-bottom: 1em; }

.mb2em {
  margin-bottom: 2em; }

.mb3em {
  margin-bottom: 3em; }

.mb4em {
  margin-bottom: 4em; }

.mb5em {
  margin-bottom: 5em; }

.mb6em {
  margin-bottom: 6em; }

.pt1em {
  padding-top: 1em; }

.pt2em {
  padding-top: 2em; }

.pt3em {
  padding-top: 3em; }

.pb1em {
  padding-bottom: 1em; }

.pb2em {
  padding-bottom: 2em; }

.pb3em {
  padding-bottom: 3em; }

.pb4em {
  padding-bottom: 4em; }

.pb5em {
  padding-bottom: 5em; }

.pb6em {
  padding-bottom: 6em; }

header {
  width: 100%;
  height: 70px;
  padding: 0 30px;
  z-index: 100;
  position: relative;
  /**************************************************************
  					ハンバーガーメニュー
  **************************************************************/
  /**************************************************************
  			ハンバーガーメニュー
  **************************************************************/ }
  header.fixed {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7); }
  @media screen and (max-width: 1024px) {
    header {
      position: fixed;
      top: 0;
      left: 0; } }
  @media screen and (max-width: 599px) {
    header {
      height: 50px;
      padding: 0 15px; } }
  header > div {
    height: 100%; }
  header .logo_header {
    max-width: 95px;
    margin-top: 4px; }
    @media screen and (max-width: 599px) {
      header .logo_header {
        max-width: 70px; } }
    header .logo_header .logo_bk {
      display: none; }
  header .nav_area {
    z-index: 100; }
    @media screen and (max-width: 1024px) {
      header .nav_area {
        width: auto;
        height: 100%;
        position: relative; } }
  header .nav {
    justify-content: flex-end; }
    header .nav li {
      margin: 0 1.5vw 0; }
      header .nav li a {
        text-align: center;
        color: #fff;
        font-family: 'Oswald', sans-serif;
        font-weight: 400; }
        header .nav li a span {
          display: block;
          font-size: 1.0rem;
          font-family: 'Noto Sans JP', sans-serif;
          font-weight: 400; }
  @media screen and (max-width: 1024px) {
    header .nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      z-index: -1;
      background: rgba(255, 255, 255, 0.95);
      display: block;
      transition: opacity .7s, visibility 0s ease .7s;
      opacity: 0;
      visibility: hidden;
      padding: 100px 30px;
      background-image: url(../img/mv.jpg);
      background-size: cover;
      background-position: 30% center; } }
  @media screen and (max-width: 1024px) and (max-width: 599px) {
    header .nav {
      padding-top: 80px; } }
  @media screen and (max-width: 1024px) {
      header .nav:before {
        content: '';
        background-color: rgba(0, 0, 0, 0.8);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1; }
      header .nav.active {
        transition-delay: 0s;
        opacity: 1;
        visibility: visible; }
      header .nav > ul {
        display: block;
        font-size: 1.8rem; } }
    @media screen and (max-width: 1024px) and (max-width: 599px) {
      header .nav > ul {
        font-size: 1.6rem; } }
  @media screen and (max-width: 1024px) {
        header .nav > ul > li {
          margin-bottom: 2em; } }
      @media screen and (max-width: 1024px) and (max-width: 599px) {
        header .nav > ul > li {
          margin-bottom: 1em; } }
  @media screen and (max-width: 1024px) {
          header .nav > ul > li:last-child {
            margin-top: 40px; }
          header .nav > ul > li a {
            text-align: center; }
            header .nav > ul > li a span {
              font-size: 1.2rem; }
      header .nav .tel {
        text-align: center;
        margin-bottom: 40px;
        color: #fff; } }
    @media screen and (max-width: 1024px) and (max-width: 599px) {
      header .nav .tel {
        font-size: 2.4rem; } }
  @media screen and (max-width: 1024px) {
      header .nav .sns_sp li {
        width: 40px;
        margin: 0 10px; } }
  header #hamburger {
    display: none; }
    @media screen and (max-width: 1024px) {
      header #hamburger {
        display: block;
        position: absolute;
        top: 50%;
        right: 0;
        width: 40px;
        height: 15px;
        cursor: pointer;
        transition: 1s;
        transform: translateY(-50%); } }
  @media screen and (max-width: 1024px) and (max-width: 599px) {
    header #hamburger {
      right: 5%;
      width: 30px;
      height: 10px; } }
    @media screen and (max-width: 1024px) {
        header #hamburger .inner_line {
          display: block;
          position: absolute;
          right: 0;
          width: 100%;
          height: 1px;
          background-color: #fff;
          transition: .5s; }
        header #hamburger #line1 {
          top: 0; }
        header #hamburger #line3 {
          bottom: 0px;
          width: 70%; }
          header #hamburger #line3.line_3 {
            width: 100%; }
        header #hamburger .line_1, header #hamburger .line_3 {
          background: #fff; }
        header #hamburger .line_1 {
          transform: rotate(-45deg);
          top: 4px !important; }
        header #hamburger .line_3 {
          transform: rotate(45deg);
          bottom: 10px !important; } }
    @media screen and (max-width: 1024px) and (max-width: 599px) {
      header #hamburger .line_3 {
        bottom: 5px !important; } }

.no_title_image header {
  background: #000; }
  .no_title_image header.fixed {
    background: rgba(0, 0, 0, 0.7); }

footer {
  background: #000;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 300;
  padding: 60px 0 20px; }
  @media screen and (max-width: 599px) {
    footer {
      padding-top: 40px; } }
  footer a {
    color: #fff; }
  footer .inner {
    max-width: 1000px;
    width: 90%; }
    @media screen and (max-width: 1024px) {
      footer .inner {
        display: block; } }
    footer .inner > .flex_box {
      align-items: flex-end; }
  footer .logo_footer {
    max-width: 95px;
    margin-bottom: 20px; }
    @media screen and (max-width: 599px) {
      footer .logo_footer {
        max-width: 70px; } }
  footer .txt_area {
    width: 30%; }
    @media screen and (max-width: 1024px) {
      footer .txt_area {
        width: 100%; } }
  footer .footer_nav {
    width: 70%;
    justify-content: flex-end;
    align-items: center; }
    @media screen and (max-width: 1024px) {
      footer .footer_nav {
        margin-top: 30px;
        width: 100%; } }
    @media screen and (max-width: 599px) {
      footer .footer_nav {
        justify-content: flex-start;
        border-top: 1px solid rgba(255, 255, 255, 0.5);
        padding-top: 30px; } }
    @media screen and (max-width: 599px) {
      footer .footer_nav .nav_area {
        width: 100%;
        margin-bottom: 10px; } }
    footer .footer_nav ul {
      justify-content: flex-end; }
      @media screen and (max-width: 1024px) {
        footer .footer_nav ul {
          justify-content: flex-start; } }
      @media screen and (max-width: 599px) {
        footer .footer_nav ul {
          display: block; } }
      footer .footer_nav ul.sub {
        font-size: 1.1rem;
        margin-top: 15px; }
        @media screen and (max-width: 599px) {
          footer .footer_nav ul.sub {
            margin-top: 30px; } }
      @media screen and (max-width: 599px) {
        footer .footer_nav ul li {
          margin-bottom: 15px; } }
      footer .footer_nav ul li:not(:last-child) {
        margin-right: 20px; }
    footer .footer_nav .pmark {
      width: 75px;
      margin-left: 20px; }
      @media screen and (max-width: 599px) {
        footer .footer_nav .pmark {
          margin-left: 0; } }
      footer .footer_nav .pmark img {
        border-radius: 10px; }
  footer .copyright {
    display: block;
    font-size: 1.1rem;
    text-align: center;
    margin-top: 60px;
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    font-weight: 300; }

#index {
  /***************************************************************/ }
  #index .mv_wrap {
    width: 100%;
    height: 100vh;
    position: relative;
    background: #000; }
    @media screen and (max-width: 1024px) {
      #index .mv_wrap {
        height: 60vh; } }
    @media screen and (max-width: 599px) {
      #index .mv_wrap {
        margin-bottom: 40px; } }
    #index .mv_wrap .title_area {
      z-index: 1;
      text-align: center;
      color: #fff;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      text-align: right;
      transform: none;
      left: unset;
      right: 5%;
      top: 30%; }
      @media screen and (max-width: 599px) {
        #index .mv_wrap .title_area {
          top: 13%; } }
      #index .mv_wrap .title_area h1.mv_title {
        font-family: 'Ubuntu', sans-serif !important;
        font-weight: 700;
        font-size: 7rem;
        opacity: 0; }
        #index .mv_wrap .title_area h1.mv_title.appear {
          opacity: 1; }
        @media screen and (max-width: 1024px) {
          #index .mv_wrap .title_area h1.mv_title {
            font-size: 5rem; } }
        @media screen and (max-width: 599px) {
          #index .mv_wrap .title_area h1.mv_title {
            font-size: 3.8rem; } }
      #index .mv_wrap .title_area p.mv_txt {
        font-size: 1.8rem;
        letter-spacing: .2em;
        opacity: 0; }
        #index .mv_wrap .title_area p.mv_txt.appear {
          animation: fadeIn 1s ease 1s 1 normal backwards;
          opacity: 1; }
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
        @media screen and (max-width: 599px) {
          #index .mv_wrap .title_area p.mv_txt {
            font-size: 1.6rem;
            text-shadow: 0 0 10px #000; } }
  #index .mv {
    background: url("../img/mv.jpg") no-repeat;
    background-position: 70% bottom;
    background-color: #000;
    background-size: cover;
    width: 100%;
    height: 100vh; }
    @media screen and (max-width: 1024px) {
      #index .mv {
        background-size: cover;
        background-position: 60% bottom;
        height: 60vh; } }
    #index .mv:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(45deg, transparent 50%, rgba(0, 0, 0, 0.3));
      z-index: 1; }
      @media screen and (max-width: 599px) {
        #index .mv:before {
          content: none; } }
  #index .content {
    padding: 0; }
    #index .content section {
      padding: 100px 0; }
      @media screen and (max-width: 599px) {
        #index .content section {
          padding: 60px 0; } }
  #index .inner {
    width: 95%; }
  #index .title {
    margin-bottom: 1em; }
  #index #stocklist .title_wrap {
    position: relative; }
    #index #stocklist .title_wrap .title {
      max-width: 1200px;
      width: 90%;
      margin-left: auto;
      margin-right: auto;
      padding: 200px 0 100px;
      text-shadow: 0 0 10px #fff; }
      @media screen and (max-width: 1024px) {
        #index #stocklist .title_wrap .title {
          padding: 130px 0 30px; } }
      @media screen and (max-width: 599px) {
        #index #stocklist .title_wrap .title {
          padding: 60px 0 20px; } }
    #index #stocklist .title_wrap .bg {
      max-width: 1400px;
      width: 80%;
      height: 340px;
      position: absolute;
      top: 0;
      right: 0;
      z-index: -1; }
      @media screen and (max-width: 1024px) {
        #index #stocklist .title_wrap .bg {
          height: 250px; } }
      @media screen and (max-width: 599px) {
        #index #stocklist .title_wrap .bg {
          height: 140px;
          width: 85%; } }
      #index #stocklist .title_wrap .bg .bg_img {
        width: 100%;
        height: 340px;
        background: url(../img/top_stocklist_ttlbg.jpg) no-repeat;
        background-size: 150%;
        background-position: 88% 20%; }
        @media screen and (max-width: 1024px) {
          #index #stocklist .title_wrap .bg .bg_img {
            height: 250px; } }
        @media screen and (max-width: 599px) {
          #index #stocklist .title_wrap .bg .bg_img {
            height: 140px;
            background-size: 180%;
            background-position: 70% 17%; } }
  #index #stocklist ul.item_list > li {
    width: calc((100% - 60px) / 3);
    position: relative;
    line-height: 0;
    margin-bottom: 30px; }
    @media screen and (max-width: 1024px) {
      #index #stocklist ul.item_list > li {
        width: calc((100% - 30px) / 2); } }
    @media screen and (max-width: 599px) {
      #index #stocklist ul.item_list > li {
        width: 100%;
        margin-bottom: 5px; } }
    #index #stocklist ul.item_list > li .item_info {
      position: absolute;
      bottom: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.5);
      width: 100%;
      padding: 12px 20px 7px;
      font-family: 'Oswald', sans-serif;
      font-weight: 400;
      color: #fff; }
      @media screen and (max-width: 599px) {
        #index #stocklist ul.item_list > li .item_info {
          position: unset;
          padding: 10px 12px 7px;
          background: #000; } }
      #index #stocklist ul.item_list > li .item_info .info_sub {
        font-weight: 300;
        font-size: 1.1rem; }
        #index #stocklist ul.item_list > li .item_info .info_sub li {
          line-height: 1; }
          #index #stocklist ul.item_list > li .item_info .info_sub li:not(:last-child):after {
            content: '/';
            margin: 0 3px;
            display: inline-block; }
            @media screen and (max-width: 599px) {
              #index #stocklist ul.item_list > li .item_info .info_sub li:not(:last-child):after {
                margin: 0 1px; } }
      #index #stocklist ul.item_list > li .item_info .info_main {
        margin-top: 0; }
        #index #stocklist ul.item_list > li .item_info .info_main .price {
          text-align: right; }
          #index #stocklist ul.item_list > li .item_info .info_main .price:before {
            content: '¥';
            margin-right: 5px; }
  #index #about {
    background: #f4f4f4; }
    #index #about .title {
      text-align: right;
      max-width: 1200px;
      width: 90%;
      margin-left: auto;
      margin-right: auto; }
      @media screen and (max-width: 599px) {
        #index #about .title {
          text-align: left; } }
    #index #about ul li {
      position: relative;
      justify-content: flex-end; }
      #index #about ul li:not(:last-child) {
        margin-bottom: 100px; }
        @media screen and (max-width: 599px) {
          #index #about ul li:not(:last-child) {
            margin-bottom: 60px; } }
      #index #about ul li .bg {
        width: 70%;
        height: 600px;
        position: absolute;
        top: 0;
        left: 0; }
        @media screen and (max-width: 1024px) {
          #index #about ul li .bg {
            width: 80%;
            height: 350px; } }
        @media screen and (max-width: 599px) {
          #index #about ul li .bg {
            width: 90%;
            height: 200px; } }
      #index #about ul li .bg_img {
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        height: 600px; }
        @media screen and (max-width: 1024px) {
          #index #about ul li .bg_img {
            height: 350px; } }
        @media screen and (max-width: 599px) {
          #index #about ul li .bg_img {
            height: 200px; } }
      #index #about ul li:nth-child(1) .bg_img {
        background-image: url("../img/top_about01.jpg"); }
      #index #about ul li:nth-child(2) .bg_img {
        background-image: url("../img/top_about02.jpg"); }
      #index #about ul li:nth-child(3) .bg_img {
        background-image: url("../img/top_about03.jpg"); }
      #index #about ul li .txt_area {
        background: rgba(0, 0, 0, 0.85);
        color: #fff;
        padding: 50px 60px;
        width: 700px;
        margin: 300px 8.75% 0 0;
        z-index: 1; }
        @media screen and (max-width: 1024px) {
          #index #about ul li .txt_area {
            padding: 40px 50px;
            width: 85%;
            margin: 250px 0 0 0; } }
        @media screen and (max-width: 599px) {
          #index #about ul li .txt_area {
            padding: 20px 35px;
            width: 95%;
            margin: 180px 0 0 0; } }
        #index #about ul li .txt_area .txt p:not(:last-child) {
          margin-bottom: 1em; }
      #index #about ul li:nth-child(even) {
        justify-content: flex-start; }
        #index #about ul li:nth-child(even) .bg {
          left: 30%; }
          @media screen and (max-width: 599px) {
            #index #about ul li:nth-child(even) .bg {
              left: 10%; } }
        #index #about ul li:nth-child(even) .txt_area {
          margin: 300px 0 0 8.75%; }
          @media screen and (max-width: 1024px) {
            #index #about ul li:nth-child(even) .txt_area {
              margin: 250px 0 0 0; } }
          @media screen and (max-width: 599px) {
            #index #about ul li:nth-child(even) .txt_area {
              margin-top: 170px; } }
  #index #news_contact {
    background: url("../img/top_contact_bg.jpg") no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    color: #fff;
    z-index: 0; }
    #index #news_contact:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.3);
      width: 100%;
      height: 100%;
      z-index: -1; }
    #index #news_contact .inner {
      width: 90%; }
    #index #news_contact .title {
      text-align: left;
      font-size: 5rem;
      margin-bottom: .5em; }
      @media screen and (max-width: 599px) {
        #index #news_contact .title {
          font-size: 3rem; } }
    #index #news_contact .news {
      width: 51%; }
      @media screen and (max-width: 1024px) {
        #index #news_contact .news {
          width: 100%; } }
      #index #news_contact .news li:not(:last-child) {
        padding-bottom: 1em;
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        margin-bottom: 1em; }
    #index #news_contact .contact {
      width: 32%; }
      @media screen and (max-width: 1024px) {
        #index #news_contact .contact {
          width: 100%;
          margin-top: 60px; } }
      #index #news_contact .contact .tel {
        margin: 30px 0; }
        #index #news_contact .contact .tel a {
          color: #fff; }
        @media screen and (max-width: 1024px) {
          #index #news_contact .contact .tel span {
            text-align: left;
            margin-left: .2em; } }
      #index #news_contact .contact .btn {
        width: 100%; }

.subpage .kv {
  width: 100%;
  height: 400px; }
  @media screen and (max-width: 1024px) {
    .subpage .kv {
      height: 300px; } }
  @media screen and (max-width: 599px) {
    .subpage .kv {
      height: 220px; } }
  .subpage .kv .kv_img {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 400px;
    color: red;
    text-align: center;
    font-size: 3rem;
    padding-top: 180px; }
    @media screen and (max-width: 1024px) {
      .subpage .kv .kv_img {
        height: 300px;
        padding-top: 150px; } }
    @media screen and (max-width: 599px) {
      .subpage .kv .kv_img {
        height: 220px;
        padding-top: 100px; } }
.subpage .title_area {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  margin-top: -50px; }
  @media screen and (max-width: 599px) {
    .subpage .title_area {
      margin-top: -40px; } }
.subpage .title_wrap {
  display: inline-block; }
  .subpage .title_wrap.bgLRextend::before {
    background-color: #fff;
    /*伸びる背景色の設定*/ }
.subpage h1.title {
  padding: 7px 25px 15px;
  background: #000;
  box-sizing: border-box;
  color: #fff; }
  @media screen and (max-width: 599px) {
    .subpage h1.title {
      padding: 5px 20px 13px;
      font-size: 4rem; } }
.subpage .content {
  padding-top: 100px; }
  @media screen and (max-width: 599px) {
    .subpage .content {
      padding-top: 60px; } }
.subpage .midashi_wrap {
  display: inline-block;
  margin-bottom: 1em; }
.subpage .midashi {
  font-weight: 700;
  margin-bottom: 0; }
  @media screen and (max-width: 599px) {
    .subpage .midashi {
      font-size: 2.6rem; } }
  .subpage .midashi span {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    font-size: 75%;
    padding-left: 3px; }
.subpage .midashi_small {
  font-size: 2rem;
  margin-bottom: 1em; }
  @media screen and (max-width: 599px) {
    .subpage .midashi_small {
      font-size: 1.8rem; } }
.subpage #contact {
  background: url("../img/top_contact_bg.jpg") no-repeat;
  background-size: cover;
  position: relative;
  color: #fff;
  z-index: 0;
  text-align: center;
  padding: 100px 0; }
  @media screen and (max-width: 1024px) {
    .subpage #contact {
      background-position: 30% center; } }
  @media screen and (max-width: 599px) {
    .subpage #contact {
      padding: 60px 0; } }
  .subpage #contact:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    z-index: -1; }
  .subpage #contact .inner {
    width: 90%; }
  .subpage #contact .title {
    text-align: center;
    font-size: 5rem;
    margin-bottom: .5em; }
    @media screen and (max-width: 599px) {
      .subpage #contact .title {
        font-size: 3rem; } }
  .subpage #contact .tel {
    margin: 30px 0; }
    @media screen and (max-width: 599px) {
      .subpage #contact .tel {
        margin: 20px 0; } }
    .subpage #contact .tel a {
      color: #fff; }
    @media screen and (max-width: 1024px) {
      .subpage #contact .tel span {
        margin-left: .2em; } }
  .subpage #contact .btn {
    max-width: 400px;
    width: 100%; }
.subpage.no_title_image main {
  margin-top: 0; }
  .subpage.no_title_image main .title_area {
    margin-top: 140px;
    width: 90%; }
    @media screen and (max-width: 599px) {
      .subpage.no_title_image main .title_area {
        margin-top: 100px; } }
.subpage.no_title_image .title_wrap.bgLRextend::before {
  background: #000; }
.subpage.no_title_image h1.title {
  padding: 7px 0;
  font-size: 4.3rem;
  color: #000;
  background: #fff; }
  @media screen and (max-width: 599px) {
    .subpage.no_title_image h1.title {
      font-size: 2.8rem; } }
@media screen and (max-width: 599px) {
  .subpage.no_title_image .content {
    padding-top: 40px; } }
.subpage .border_box {
  border: 10px solid rgba(0, 0, 0, 0.1);
  padding: 40px;
  box-sizing: border-box; }
  @media screen and (max-width: 599px) {
    .subpage .border_box {
      padding: 20px; } }
.subpage .list_maru li {
  margin-left: 1em;
  position: relative;
  padding-left: 1.5em; }
  .subpage .list_maru li:not(:last-child) {
    margin-bottom: .5em; }
  .subpage .list_maru li:before {
    content: '';
    background: rgba(181, 144, 63, 0.8);
    border-radius: 50%;
    width: 1em;
    height: 1em;
    background-size: contain;
    position: absolute;
    top: .5em;
    left: 0; }

#trade .kv_img {
  background-image: url(../img/trade_title_bg.jpg);
  background-position: center; }
#trade .intro .image {
  width: 90%;
  margin-left: 10%;
  height: 300px;
  margin-bottom: 50px; }
  @media screen and (max-width: 1024px) {
    #trade .intro .image {
      height: 200px; } }
  @media screen and (max-width: 599px) {
    #trade .intro .image {
      height: 140px;
      margin-bottom: 30px; } }
  #trade .intro .image .bgappear {
    position: relative; }
  #trade .intro .image .intro_img {
    height: 300px; }
    @media screen and (max-width: 1024px) {
      #trade .intro .image .intro_img {
        height: 200px; } }
    @media screen and (max-width: 599px) {
      #trade .intro .image .intro_img {
        height: 140px; } }
    #trade .intro .image .intro_img img {
      height: 100%;
      object-fit: cover;
      object-position: center; }
  #trade .intro .image h2 {
    position: absolute;
    top: calc(50% - 1.5rem);
    left: calc(45% - 4em);
    color: #fff;
    text-shadow: 0 0 10px #000;
    font-size: 4rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-align: center;
    font-feature-settings: 'palt'; }
    @media screen and (max-width: 599px) {
      #trade .intro .image h2 {
        font-size: 2.8rem;
        top: calc(50% - 2rem); } }
#trade .intro h3 {
  font-weight: bold;
  font-size: 2.8rem;
  text-align: center;
  margin-bottom: 1em; }
  @media screen and (max-width: 599px) {
    #trade .intro h3 {
      font-size: 2rem; } }
#trade .flow ul {
  justify-content: space-between;
  margin-top: 50px; }
  #trade .flow ul li {
    width: calc((100% - 60px) / 3); }
    @media screen and (max-width: 1024px) {
      #trade .flow ul li {
        width: 48%; }
        #trade .flow ul li:not(:last-child) {
          margin-bottom: 60px; } }
    @media screen and (max-width: 599px) {
      #trade .flow ul li {
        width: 100%; } }
    #trade .flow ul li h3 {
      color: #fff;
      background: #000;
      padding: 5px 12px 7px;
      box-sizing: border-box;
      font-size: 1.8rem;
      position: relative; }
      @media screen and (max-width: 599px) {
        #trade .flow ul li h3 {
          font-size: 1.6rem; } }
      #trade .flow ul li h3:before {
        font-size: 5rem;
        font-family: 'Ubuntu', sans-serif !important;
        font-weight: 700;
        position: absolute;
        top: -5rem;
        left: 0;
        color: #000;
        line-height: 1.3; }
    #trade .flow ul li:nth-child(1) h3:before {
      content: '01'; }
    #trade .flow ul li:nth-child(2) h3:before {
      content: '02'; }
    #trade .flow ul li:nth-child(3) h3:before {
      content: '03'; }
    #trade .flow ul li:nth-child(4) h3:before {
      content: '04'; }
    #trade .flow ul li figure {
      width: 50%;
      margin: 20px auto 10px; }
#trade .documents .border_box li span {
  display: block;
  font-size: 85%;
  color: #666; }
  #trade .documents .border_box li span.attention {
    color: #b6282c; }
#trade .faq .faq_content {
  margin-top: 20px; }
  #trade .faq .faq_content dl {
    border: 2px solid #000;
    border-radius: 3px;
    padding: 20px 30px; }
    @media screen and (max-width: 599px) {
      #trade .faq .faq_content dl {
        padding: 15px 20px; } }
    #trade .faq .faq_content dl:not(:last-child) {
      margin-bottom: 15px; }
    #trade .faq .faq_content dl dt, #trade .faq .faq_content dl dd {
      position: relative;
      padding-left: 40px;
      width: 100%; }
      @media screen and (max-width: 599px) {
        #trade .faq .faq_content dl dt, #trade .faq .faq_content dl dd {
          padding-left: 25px; } }
      #trade .faq .faq_content dl dt:before, #trade .faq .faq_content dl dd:before {
        font-size: 180%;
        font-family: 'Oswald', sans-serif;
        font-weight: 400;
        font-weight: 700;
        position: absolute;
        top: -.5em;
        left: 10px; }
        @media screen and (max-width: 599px) {
          #trade .faq .faq_content dl dt:before, #trade .faq .faq_content dl dd:before {
            left: 0; } }
    @media screen and (max-width: 599px) {
      #trade .faq .faq_content dl dt {
        padding-right: 25px; } }
    #trade .faq .faq_content dl dt:before {
      content: 'Q'; }
    #trade .faq .faq_content dl dd {
      border-top: 1px solid #000;
      padding-top: 20px;
      margin-top: 20px; }
      @media screen and (max-width: 599px) {
        #trade .faq .faq_content dl dd {
          margin-top: 15px; } }
      #trade .faq .faq_content dl dd:before {
        content: 'A';
        color: #b5903f;
        top: 0.2em; }

#company .kv_img {
  background-image: url(../img/company_title_bg.jpg);
  background-position: center; }
#company .intro .image {
  width: 90%;
  margin-left: 10%;
  height: 400px; }
  @media screen and (max-width: 1024px) {
    #company .intro .image {
      height: 300px; } }
  @media screen and (max-width: 599px) {
    #company .intro .image {
      height: 180px; } }
  #company .intro .image .intro_img {
    height: 400px; }
    @media screen and (max-width: 1024px) {
      #company .intro .image .intro_img {
        height: 300px; } }
    @media screen and (max-width: 599px) {
      #company .intro .image .intro_img {
        height: 180px; } }
    #company .intro .image .intro_img img {
      height: 100%;
      object-fit: cover;
      object-position: center; }
#company .intro .catchcopy {
  margin: 40px 0; }
  @media screen and (max-width: 599px) {
    #company .intro .catchcopy {
      margin-bottom: 20px; } }
  #company .intro .catchcopy li {
    font-weight: bold;
    font-size: 2.4rem;
    text-align: center; }
    @media screen and (max-width: 599px) {
      #company .intro .catchcopy li {
        font-size: 1.8rem; } }
    #company .intro .catchcopy li:not(:last-child) {
      margin-bottom: 10px; }
#company .message .flex_box {
  justify-content: space-between; }
#company .message figure {
  width: 40%; }
  @media screen and (max-width: 599px) {
    #company .message figure {
      width: 100%; } }
#company .message .txt_area {
  width: 55%; }
  @media screen and (max-width: 1024px) {
    #company .message .txt_area {
      width: 100%;
      margin-top: 30px; } }
  #company .message .txt_area p {
    margin-bottom: 1em; }
    #company .message .txt_area p.name {
      font-size: 1.5rem;
      text-align: right; }
      #company .message .txt_area p.name span {
        display: block; }
#company .profile dl {
  margin-top: 30px; }
  @media screen and (max-width: 599px) {
    #company .profile dl {
      margin-top: 20px; } }
  #company .profile dl .privacy_mark {
    width: 90px; }

#access .kv_img {
  background-image: url(../img/access_title_bg.jpg);
  background-position: center; }
#access .map {
  margin-top: 30px; }
  #access .map iframe {
    width: 100%;
    height: 450px; }
    @media screen and (max-width: 599px) {
      #access .map iframe {
        height: 300px; } }
#access .root {
  margin-top: 60px; }
  #access .root h2 {
    display: flex;
    align-items: center;
    margin-bottom: .5em; }
    #access .root h2:before {
      content: '';
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      width: 1.5em;
      height: 1.8em;
      margin-right: 0.5em; }
  #access .root .car h2:before {
    background-image: url("../img/icon_car.svg"); }
  #access .root .train {
    margin-top: 40px; }
    @media screen and (max-width: 599px) {
      #access .root .train {
        margin-top: 30px; } }
    #access .root .train h2:before {
      background-image: url("../img/icon_train.svg"); }

#contact_page .kv_img {
  background-image: url(../img/contact_title_bg.jpg);
  background-position: center;
  background-color: #ccc; }
#contact_page .box.gyousha {
  text-align: center; }

#privacypolicy .content p {
  margin-bottom: 2em; }
#privacypolicy .content dl dt {
  font-size: 2.8rem;
  position: relative;
  margin-bottom: 1em;
  padding-bottom: 10px; }
  @media screen and (max-width: 599px) {
    #privacypolicy .content dl dt {
      font-size: 2.2rem; } }
  #privacypolicy .content dl dt:after {
    content: '';
    width: 40px;
    height: 3px;
    background: #000;
    position: absolute;
    bottom: 0;
    left: 0; }
#privacypolicy .content dl dd:not(:last-child) {
  margin-bottom: 60px; }
#privacypolicy .content ol {
  padding-left: 2em; }
  #privacypolicy .content ol li {
    list-style: decimal; }
    #privacypolicy .content ol li:not(:last-child) {
      margin-bottom: .5em; }
    #privacypolicy .content ol li ol {
      margin-top: 1em; }
      #privacypolicy .content ol li ol li {
        list-style: lower-alpha; }

/**************************************************************
　　　　　　　　　オープニングアニメーション
**************************************************************/
#splash {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: #fff; }

#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

#splash_logo svg {
  width: 150px; }
  @media screen and (max-width: 599px) {
    #splash_logo svg {
      width: 80px; } }

/*=============== SVGアニメーション内の指定 =================*/
/*アニメーション前の指定*/
#logo_loading path {
  fill-opacity: 0;
  /*最初は透過0で見えない状態*/
  transition: fill-opacity .5s;
  /*カラーがつく際のアニメーション0.5秒で変化*/
  fill: none;
  /*塗りがない状態*/
  stroke: #434d51;
  /*線の色*/ }

/*アニメーション後に.doneというクラス名がで付与された時の指定*/
#logo_loading.done path {
  fill: #434d51;
  /*塗りの色*/
  fill-opacity: 1;
  /*透過1で見える状態*/
  stroke: none;
  /*線の色なし*/ }

/*========= 画面遷移のためのCSS ===============*/
/*画面遷移アニメーション*/
.splashbg {
  display: none; }

/*bodyにappearクラスがついたら出現*/
body.appear .splashbg {
  display: block;
  animation-name: PageAnime;
  animation-duration: 1.2s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  content: "";
  position: fixed;
  z-index: 999;
  width: 50%;
  height: 100vh;
  top: 0;
  left: 0;
  transform: translateX(-300%) skewX(-45deg);
  background-color: #000;
  /*伸びる背景色の設定*/ }
  @media screen and (max-width: 599px) {
    body.appear .splashbg {
      animation-duration: .8s; } }

@keyframes PageAnime {
  0% {
    transform-origin: left;
    transform: translateX(-300%) skewX(-45deg); }
  100% {
    transform-origin: left;
    transform: translateX(500%) skewX(-45deg); } }
/*画面遷移の後現れるコンテンツ設定*/
#index #container {
  opacity: 0; }

/*bodyにappearクラスがついたら出現*/
body.appear #container {
  animation-name: PageAnimeAppear;
  animation-duration: 1s;
  animation-delay: 0.6s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes PageAnimeAppear {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
/**************************************************************
　　　　　　　　　　　　フェードアップ
**************************************************************/
@keyframes fade_In_Up {
  0% {
    opacity: 0;
    transform: translateY(20px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }
.fade_In_Up {
  animation: fade_In_Up .6s ease;
  animation-fill-mode: both; }

.fade {
  opacity: 0; }

/**************************************************************
　　　　　　　　　　　　背景色が伸びて出現 共通
**************************************************************/
.bgextend {
  animation-name: bgextendAnimeBase;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  position: relative;
  overflow: hidden;
  /*　はみ出た色要素を隠す　*/
  opacity: 0; }

@keyframes bgextendAnimeBase {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
/*中の要素*/
.bgappear {
  animation-name: bgextendAnimeSecond;
  animation-duration: 1s;
  animation-delay: 0.6s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes bgextendAnimeSecond {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
/*--------- 左から --------*/
.bgLRextend::before {
  animation-name: bgLRextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #333;
  /*伸びる背景色の設定*/ }

@keyframes bgLRextendAnime {
  0% {
    transform-origin: left;
    transform: scaleX(0); }
  50% {
    transform-origin: left;
    transform: scaleX(1); }
  50.001% {
    transform-origin: right; }
  100% {
    transform-origin: right;
    transform: scaleX(0); } }
/*--------- 右から --------*/
.bgRLextend::before {
  animation-name: bgRLextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666;
  /*伸びる背景色の設定*/ }

@keyframes bgRLextendAnime {
  0% {
    transform-origin: right;
    transform: scaleX(0); }
  50% {
    transform-origin: right;
    transform: scaleX(1); }
  50.001% {
    transform-origin: left; }
  100% {
    transform-origin: left;
    transform: scaleX(0); } }
.bgappearTrigger,
.bgLRextendTrigger,
.bgRLextendTrigger {
  opacity: 0; }

/**************************************************************
　　　　　　　　　ページ読み込み（遷移）でフェードアップ
**************************************************************/
.loadin {
  opacity: 0; }

.load_fadeup {
  animation-name: loadFadeUp;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes loadFadeUp {
  from {
    opacity: 0;
    transform: translateY(20px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
/**************************************************************
　　　　　　　　　　　　順番に現れる
**************************************************************/
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0; }

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(10px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
/**************************************************************
　　　　　　　　　　アコーディオンメニュー
**************************************************************/
.accordion {
  position: relative;
  display: inline-block; }

.accordion:hover {
  cursor: pointer; }

.accordion:after {
  content: '';
  position: absolute;
  right: .5em;
  top: 8px;
  transition: all 0.2s ease-in-out;
  width: 8px;
  height: 8px;
  border-top: solid 2px #000;
  border-right: solid 2px #000;
  transform: rotate(135deg); }

.accordion.open:after {
  transform: rotate(-45deg);
  top: 8px; }

.accordion-content {
  display: none; }