/*common*/
#onlineshop_btn,
#footer_onlineshop_btn {
  display: none !important; }

@media screen and (max-width: 750px) {
  header {
    background: none !important; } }

@media screen and (max-width: 750px) {
  main {
    padding-top: 0 !important; } }

.cap {
  position: relative;
  font-family: "IwaUDGoHonPro-Th" !important;
  font-weight: 400;
  color: #333333;
  letter-spacing: 0.0em; }
  @media screen and (min-width: 751px) {
    .cap {
      line-height: 1.6em;
      font-size: 1.1rem; } }
  @media screen and (max-width: 750px) {
    .cap {
      line-height: 1.6em;
      font-size: 2.2rem; } }

/**/
#kv {
  position: relative;
  width: 100%;
  background: #fff;
  z-index: 3; }
  @media screen and (min-width: 751px) {
    #kv {
      height: 42rem; } }
  @media screen and (max-width: 750px) {
    #kv {
      height: 40rem; } }

#kv_bg_img {
  position: relative;
  width: 100%; }
  @media screen and (min-width: 751px) {
    #kv_bg_img {
      height: 42rem; } }
  @media screen and (max-width: 750px) {
    #kv_bg_img {
      height: 40rem; } }

#kv_bg_img img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; }

#kv #kv_product {
  position: absolute;
  display: block;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%; }
  @media screen and (min-width: 751px) {
    #kv #kv_product {
      width: 108rem; } }
  @media screen and (max-width: 750px) {
    #kv #kv_product {
      width: 75rem; } }

#kv h1 {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  font-family: "IwaUDGoDspPro-Bd" !important;
  letter-spacing: 0.05em; }
  @media screen and (min-width: 751px) {
    #kv h1 {
      width: 108rem;
      line-height: 1.5em;
      font-size: 3.6rem; } }
  @media screen and (max-width: 750px) {
    #kv h1 {
      width: 71rem;
      line-height: 1.5em;
      font-size: 4.5rem; } }

/**/
main .story_sec .inner {
  position: relative;
  margin: 0 auto; }
  @media screen and (min-width: 751px) {
    main .story_sec .inner {
      width: 108rem;
      padding: 6rem 9rem; } }
  @media screen and (max-width: 750px) {
    main .story_sec .inner {
      width: 71rem;
      padding: 6rem 0; } }

#story_02,
#story_04 {
  background: rgba(181, 151, 31, 0.1); }

main .story_sec h2 {
  position: relative;
  font-weight: 400;
  font-family: "IwaUDGoDspPro-Bd" !important;
  letter-spacing: 0.0em; }
  @media screen and (min-width: 751px) {
    main .story_sec h2 {
      line-height: 2.25em;
      font-size: 2.4rem;
      padding-bottom: 1rem; } }
  @media screen and (max-width: 750px) {
    main .story_sec h2 {
      line-height: 1.459em;
      font-size: 4.8rem;
      padding: 0 4rem 2.4rem; } }

@media screen and (max-width: 750px) {
  main .story_sec .general_txt {
    padding: 0 4rem; } }

#story_01 .inner {
  position: relative; }
  @media screen and (min-width: 751px) {
    #story_01 .inner {
      background: url("../../story/img/01_img.png") 85rem 13rem no-repeat;
      background-size: 17.5rem auto;
      padding: 6rem 25rem 6rem 9rem !important; } }
  @media screen and (max-width: 750px) {
    #story_01 .inner {
      background: url("../../story/img/01_img.png") 17rem 54rem no-repeat;
      background-size: 37rem auto;
      padding: 6rem 0 32rem !important; } }

@media screen and (min-width: 751px) {
  #story_02 figure {
    width: 62.5rem;
    margin: 4rem auto 0; } }
@media screen and (max-width: 750px) {
  #story_02 figure {
    width: 70rem;
    margin: 6rem auto 0; } }

#story_02 .cap {
  position: relative;
  text-align: right; }
  @media screen and (min-width: 751px) {
    #story_02 .cap {
      width: 62.5rem;
      margin: 0.5rem auto 0; } }
  @media screen and (max-width: 750px) {
    #story_02 .cap {
      width: 70rem;
      margin: 1rem auto 0; } }

@media screen and (min-width: 751px) {
  #story_04 figure {
    width: 72.5rem;
    margin: 4rem auto 0; } }
@media screen and (max-width: 750px) {
  #story_04 figure {
    width: 70rem;
    margin: 6rem auto 0; } }

#story_04 .cap {
  position: relative;
  text-align: right; }
  @media screen and (min-width: 751px) {
    #story_04 .cap {
      width: 72.5rem;
      margin: 0.5rem auto 0; } }
  @media screen and (max-width: 750px) {
    #story_04 .cap {
      width: 70rem;
      margin: 1rem auto 0; } }

#story_05 .inner {
  padding-bottom: 6rem; }

.detail_btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #982235;
  transition: .6s ease-out;
  overflow: hidden; }
  @media screen and (min-width: 751px) {
    .detail_btn {
      width: 21.4rem;
      height: 4.5rem;
      border-radius: 2.7rem;
      border: #982235 4px solid;
      margin: 4rem auto 0; } }
  @media screen and (max-width: 750px) {
    .detail_btn {
      width: 39rem;
      height: 10rem;
      border-radius: 5rem;
      margin: 4rem auto 0; } }

.detail_btn p {
  position: relative;
  /*@include fw(Bold);*/
  font-weight: 400;
  font-family: "IwaUDGoHonPro-Md" !important;
  color: #FFFFFF;
  letter-spacing: 0.0em; }
  @media screen and (min-width: 751px) {
    .detail_btn p {
      line-height: 1em;
      font-size: 1.4rem;
      transition: .6s ease-out; } }
  @media screen and (max-width: 750px) {
    .detail_btn p {
      line-height: 1em;
      font-size: 2.5rem; } }

.detail_btn::after {
  content: "";
  display: block;
  position: absolute;
  transition: ease-out .6s all;
  top: 0;
  height: 100%;
  background: url("../../story/img/icon_window.png") center center no-repeat;
  background-size: 100% auto; }
  @media screen and (min-width: 751px) {
    .detail_btn::after {
      width: 1.2rem;
      right: 1.8rem; } }
  @media screen and (max-width: 750px) {
    .detail_btn::after {
      width: 2.4rem;
      right: 3.6rem; } }

@media screen and (min-width: 751px) {
  .detail_btn::before {
    content: "";
    display: block;
    position: absolute;
    transition: ease-out .4s all;
    top: 50%;
    left: 0;
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    opacity: 0; } }

@media screen and (min-width: 751px) {
  .detail_btn:hover::before {
    top: 0;
    opacity: 1; } }

@media screen and (min-width: 751px) {
  .detail_btn:hover p {
    color: #982235; } }

@media screen and (min-width: 751px) {
  .detail_btn:hover::after {
    background: url("../../story/img/icon_window_hover.png") center center no-repeat;
    background-size: 100% auto; } }