/* ==================================================
  Common Styles
================================================== */
.font_0 {
  font-size: 0;
}
.sec_wrap {
  margin: 0 10%;
}

@media screen and (width <= 768px) {
  .sec_wrap {
    margin: 0 1.5rem;
  }
}

/* ==================================================
  Header Styles
================================================== */
.header_background {
  width: 100%;
}
header {
  position: relative;
}
.header_icons {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  padding: 2.1% clamp(2rem, 9vw, 13rem) 0;
  gap: 1.2rem;
  justify-content: space-between;
  align-items: center;
  height: 11.5%;
}
.header_icons .header_logo {
  max-width: 31.3rem;
}
.header_icons .header_sns {
  display: flex;
  gap: 1.2rem;
}
.header_icons .circle {
  max-width: 9.5rem;
}
.header_icons .header_btn_tel {
  max-width: 34rem;
}
.header_icons .header_btn_inquiry {
  max-width: 18.6rem;
}

@media screen and (width <= 768px) {
  .header_icons {
    padding: 2rem;
    flex-wrap: wrap;
    gap: clamp(0.4rem, 2vw, 0.8rem);
  }
  .header_icons .header_logo {
    max-width: 100%;
    width: 47%;
  }
  .header_icons .header_sns {
    max-width: 100%;
    width: 19%;
    gap: 0.3rem;
  }
  .header_icons .circle {
    max-width: 100%;
    width: calc(50% - 0.15rem);
  }
  .header_icons .header_btn_tel {
    max-width: 100%;
    width: 63%;
  }
  .header_icons .header_btn_inquiry {
    max-width: 100%;
    width: 32%;
    text-align: right;
  }
}

/* ==================================================
  Hero Styles
================================================== */
.background_hero_originality {
  background-image: url('../img/sec_bg_1.png');
  background-repeat: repeat;
  padding-bottom: 4rem;
}
#hero {
  position: relative;
}
#hero .reserve_btn {
  position: absolute;
  top: 54.3%;
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
}
#hero .reserve_btn a {
  display: inline-block;
  max-width: 56.2rem;
  width: 41.4%;
}

@media screen and (width <= 768px) {
  .background_hero_originality {
    padding-bottom: 2rem;
  }
  #hero .reserve_btn {
    top: 69.6%;
  }
  #hero .reserve_btn a {
    max-width: 100%;
    width: 82%;
  }
  #hero .reserve_btn a img {
    width: 100%;
  }
}

/* ==================================================
  Originality Styles
================================================== */
.originality_background {
  background-image: url('../img/stripe_red_green.jpg');
  background-repeat: repeat;
  background-size: 9rem;
  padding: 3rem;
}
#originality .inner {
  background-color: #f6e7c8;
  padding: 4rem 2.5rem;
}
#originality .reserve_btn {
  width: 100%;
  text-align: center;
}
#originality .reserve_btn a {
  display: inline-block;
  max-width: 56.2rem;
  width: 57%;
  margin-top: 1.5rem;
}

@media screen and (width <= 768px) {
  #originality {
    margin-top: 2rem;
  }
  .originality_background {
    background-size: 5rem;
    padding: 1rem;
  }
  #originality .inner {
    padding: 1.5rem 1rem;
  }
  #originality .reserve_btn {
    display: none;
  }
}

/* ==================================================
  Case Styles
================================================== */
.bg_case {
  background-image: url('../img/sec_bg_2.png');
  background-repeat: repeat;
  padding: 4rem 0;
  text-align: center;
}
.bg_case_inner {
  background-image: url('../img/stripe_red_green.jpg');
  background-repeat: repeat;
  background-size: 9rem;
  padding: 3rem;
}
.bg_case_inner .inner_head_wrap {
  background-color: #f6e7c8;
  padding: 2rem 2rem 0;
}
.bg_case_inner .inner_1 {
  background-color: #f6e7c8;
  padding: 0 4rem 4rem;
}
.bg_case_inner .case_1_head {
  margin-top: -5.6%;
}
.bg_case_inner .case_2_head {
  margin-top: 4rem;
}
.bg_case_inner .inner_2 {
  background-color: #edd19c;
  padding: 2rem 4rem 4rem;
}
.bg_case_inner .case_maker {
  margin-top: 0.5rem;
}
.bg_case_inner .case_3_head {
  margin-bottom: 0.5rem;
}
.bg_case_inner .inner_3 {
  background-color: #f6e7c8;
  padding: 0 4rem 4rem;
}
.bg_case_inner .case_amamori img {
  margin-top: -0.5%;
}
.bg_case_inner .inner_3 .reserve_btn {
  width: 100%;
  text-align: center;
}
.bg_case_inner .inner_3 .reserve_btn a {
  display: inline-block;
  max-width: 56.2rem;
  width: 63%;
  margin-top: 4rem;
}
.bg_showroom_inner {
  background-image: url('../img/stripe_orange_brown.jpg');
  background-repeat: repeat;
  background-size: 9rem;
  padding: 3rem;
  margin-top: 6.2%;
}
.bg_showroom_inner .inner_bg {
  background-image: url('../img/sec_bg_3.png');
  background-repeat: repeat;
}
.bg_showroom_inner .inner_bg_wrap {
  padding: 2rem 2rem 0;
}
.bg_showroom_inner .case_show_head {
  margin-top: -7.8%;
}
@media screen and (width <= 1200px) {
  .bg_showroom_inner .case_show_head {
    margin-top: -8.1%;
  }
}
@media screen and (width <= 1000px) {
  .bg_showroom_inner .case_show_head {
    margin-top: -9.5%;
  }
}
.bg_showroom_inner .case_show_cont {
  margin-top: 1rem;
}
.bg_showroom_inner .reserve_btn {
  padding: 2rem 0;
  width: 100%;
  text-align: center;
}
.bg_showroom_inner .reserve_btn a {
  display: inline-block;
  max-width: 56.2rem;
  width: 63%;
}
.bg_showroom_inner .case_show_btn_wrap {
  padding: 0 2rem;
}

@media screen and (width <= 768px) {
  .bg_case {
    padding: 2rem 0;
  }
  .bg_case_inner {
    background-size: 5rem;
    padding: 1rem;
    text-align: center;
  }
  .bg_case_inner .inner_head_wrap {
    padding: 2rem 0.5rem 0 1.5rem;
  }
  .bg_case_inner .inner_1 {
    padding: 0 1.5rem 2rem;
  }
  .bg_case_inner .case_1_head {
    padding: 4.5rem 0 2.6rem;
    margin: 0 auto;
    max-width: 70%;
  }
  .bg_case_inner .inner_2 {
    background-color: #edd19c;
    padding: 2rem 1.5rem 11%;
  }
  .bg_case_inner .case_2_head {
    padding: 4.5rem 0 2.6rem;
    margin: 0 auto;
    max-width: 70%;
  }
  .bg_case_inner .case_maker {
    margin-top: 12%;
  }
  .bg_case_inner .case_3_head {
    margin-bottom: 1rem;
  }
  .bg_case_inner .inner_3 {
    background-color: #f6e7c8;
    padding: 0;
  }
  .bg_case_inner .case_amamori {
    padding: 0 0.5rem 0 1.5rem;
  }
  .bg_case_inner .case_amamori img {
    margin-top: -3%;
  }
  .bg_case_inner .inner_3 .reserve_btn {
    width: 100%;
    text-align: center;
  }
  .bg_case_inner .inner_3 .reserve_btn a {
    margin: 2rem auto;
    max-width: 100%;
    width: 92%;
  }
  .bg_case_inner .inner_3 .reserve_btn a img {
    width: 100%;
  }
  .bg_showroom_inner {
    background-size: 5rem;
    padding: 1rem;
    margin-top: 2rem;
  }
  .bg_showroom_inner .inner_bg {
    background-image: url('../img/sec_bg_3.png');
    background-repeat: repeat;
  }
  .bg_showroom_inner .inner_bg_wrap {
    padding: 2rem 1.5rem 0;
  }
  .bg_showroom_inner .case_show_head {
    margin-top: 0;
  }
  .bg_showroom_inner .case_show_cont {
    margin-top: 1rem;
  }
  .bg_showroom_inner .reserve_btn {
    margin-top: -1.2%;
    padding: 0 0 2rem;
    width: 100%;
    text-align: center;
  }
  .bg_showroom_inner .reserve_btn a {
    max-width: 100%;
    width: 92%;
  }
  .bg_showroom_inner .case_show_btn_wrap {
    padding: 0;
  }
}

/* ==================================================
  Guarantee Styles
================================================== */
.bg_guarantee {
  background-image: url('../img/sec_bg_4.png');
  background-repeat: repeat;
  padding: 4rem 0;
  text-align: center;
}
.bg_guarantee_inner {
  background-image: url('../img/stripe_red_brown.jpg');
  background-repeat: repeat;
  background-size: 9rem;
  padding: 3rem;
}
#guarantee .inner_bg {
  background-color: #f6e7c8;
}
#guarantee .inner_bg_wrap {
  padding: 2rem 2rem 0;
}
#guarantee .guarantee {
  width: 85%;
  margin: 2rem auto 0;
}
#guarantee .guarantee_btn_wrap {
  padding: 4rem 0 6rem;
}
#guarantee .guarantee_btn_wrap .reserve_btn {
  width: 100%;
  text-align: center;
}
#guarantee .guarantee_btn_wrap .reserve_btn a {
  display: inline-block;
  max-width: 56.2rem;
  width: 63%;
}

@media screen and (width <= 768px) {
  .bg_guarantee {
    padding: 2rem 0;
  }
  .bg_guarantee_inner {
    background-size: 5rem;
    padding: 1rem;
}
  #guarantee .inner_bg_wrap {
    padding: 2rem 1.5rem 0;
  }
  #guarantee .guarantee {
    width: 100%;
    margin: 1rem auto 0;
  }
  #guarantee .guarantee_btn_wrap {
    padding: 1.5rem 0 2.5rem;
  }
  #guarantee .guarantee_btn_wrap .reserve_btn {
    width: 100%;
    text-align: center;
  }
  #guarantee .guarantee_btn_wrap .reserve_btn a {
    max-width: 100%;
    width: 92%;
  }
}

/* ==================================================
  Staff Styles
================================================== */
.bg_staff {
  background-image: url('../img/sec_bg_6.png');
  background-repeat: repeat;
  text-align: center;
  padding-bottom: 4.3%;
}
.bg_staff_inner {
  background-image: url('../img/sec_bg_5.png');
  background-repeat: repeat-x;
  background-position: top;
  background-size: 5.64% auto;
}
.bg_staff_inner .sec_wrap {
  padding-top: 8.3%;
  margin: 0 auto;
}
#staff .staff_head {
  max-width: 60.5rem;
  width: 44.2%;
  margin: 0 auto 4.3%;
}
#staff .staff_cont {
  max-width: 100.8rem;
  width: 73.7%;
  margin: 0 auto;
}
@media screen and (width <= 768px) {
  .bg_staff {
    padding-bottom: 6.4%;
  }
  .bg_staff_inner {
    background-size: 9.9% auto;
  }
  .bg_staff_inner .sec_wrap {
    padding-top: 12%;
  }
  #staff .staff_head {
    max-width: 100%;
    width: 95%;
    margin: 0 auto 5%;
  }
  #staff .staff_cont {
    max-width: 100.8rem;
    width: 95%;
    margin: 0 auto;
  }
}

/* ==================================================
  Message Styles
================================================== */
#message {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

/* ==================================================
  Footer Styles
================================================== */
.footer_imgs {
  background-color: #221714;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5.1%;
  padding: 2.5rem 0;
}
.footer_logo {
  max-width: 31.8rem;
  width: 23.2%;
}
.footer_tel {
  max-width: 44.1rem;
  width: 32.3%;
}
.footer_text {
  background-color: #f7b400;
  font-size: 1.6rem;
  padding: 1.7rem 0;
  text-align: center;
  color: #211613;
  font-weight: 700;
}

@media screen and (width <= 768px) {
  .footer_imgs {
    flex-wrap: wrap;
    gap: 2.5rem;
  }
  .footer_logo {
    max-width: 100%;
    width: 65.4%;
  }
  .footer_tel {
    max-width: 100%;
    width: 80%;
  }
}

/* ==================================================
  Absolute Position Image Styles
================================================== */
#originality .reserve_btn img.neko {
  position: absolute;
  bottom: -30%;
  right: -4%;
  width: 15.2%;
}
#originality .inner h3 img.neko {
  display: none;
}
@media (max-width: 1024px) {
  #originality .reserve_btn img.neko {
    bottom: -40%;
    right: -7%;
    width: 20%;
  }
}
@media (max-width: 768px) {
  #originality .reserve_btn img.neko {
    display: none;
  }
  #originality .inner h3 img.neko {
    display: block;
    position: absolute;
    bottom: 43%;
    right: -5%;
    width: 21%;
    transform: scale(-1, 1);
  }
}
@media (max-width: 480px) {
  #originality .inner h3 img.neko {
    right: -9%;
  }
}

.bg_case_inner .inner_head_wrap h3 img.beaker {
  position: absolute;
  top: 16%;
  right: -9%;
  width: 14.3%;
}
@media (max-width: 1024px) {
  .bg_case_inner .inner_head_wrap h3 img.beaker {
    top: 16%;
    right: -11%;
    width: 15%;
  }
}
@media (max-width: 768px) {
  .bg_case_inner .inner_head_wrap h3 img.beaker {
    top: 30%;
    right: -4%;
    width: 17%;
  }
}
@media (max-width: 480px) {
  .bg_case_inner .inner_head_wrap h3 img.beaker {
    right: -6%;
  }
}

.case_1_head img.case_men_1 {
  display: none;
}
@media (max-width: 768px) {
  .case_1_head img.case_men_1 {
    display: block;
    position: absolute;
    bottom: 9%;
    left: -30%;
    width: 28%;
  }
}
@media (max-width: 600px) {
  .case_1_head img.case_men_1 {
    left: -32%;
    width: 31%;
  }
}
@media (max-width: 480px) {
  .case_1_head img.case_men_1 {
    left: -35%;
    width: 32%;
  }
}

.case_1_cont img.drink {
  position: absolute;
  top: 8%;
  right: -17%;
  width: 15.3%;
}
@media (max-width: 768px) {
  .case_1_cont img.drink {
    top: -8%;
    right: -5%;
    width: 16%;
  }
}
@media (max-width: 600px) {
  .case_1_cont img.drink {
    top: -8.5%;
  }
}
@media (max-width: 480px) {
  .case_1_cont img.drink {
    right: -7%;
  }
}

.case_2_head img.case_men_2 {
  display: none;
}
@media (max-width: 768px) {
  .case_2_head img.case_men_2 {
    display: block;
    position: absolute;
    bottom: 10%;
    right: -30%;
    width: 40%;
  }
}
@media (max-width: 600px) {
  .case_2_head img.case_men_2 {
    bottom: 15%;
    right: -35%;
    width: 35%;
  }
}

.case_1_cont img.daruma {
  position: absolute;
  top: -3%;
  left: -20%;
  width: 19%;
}
.case_3_head img.daruma {
  display: none;
}
@media (max-width: 1024px) {
  .case_1_cont img.daruma {
    left: -22%;
  }
}
@media (max-width: 768px) {
  .case_1_cont img.daruma {
    display: none;
  }
  .case_3_head img.daruma {
    display: block;
    position: absolute;
    top: -53%;
    right: -1%;
    width: 16%;
  }
}
@media (max-width: 700px) {
  .case_3_head img.daruma {
    top: -40%;
    right: -1%;
    width: 16%;
  }
}
@media (max-width: 480px) {
  .case_3_head img.daruma {
    width: 20%;
  }
}

.case_2_cont img.uchiwa {
  position: absolute;
  top: 20%;
  left: -20%;
  width: 18.4%;
}
.case_2_head img.uchiwa {
  display: none;
}
@media (max-width: 768px) {
  .case_2_head img.uchiwa {
    display: block;
    position: absolute;
    top: 13%;
    left: -30%;
    width: 26%;
  }
  .case_2_cont img.uchiwa {
    display: none;
  }
}
@media (max-width: 480px) {
  .case_2_head img.uchiwa {
    top: 20%;
    left: -34%;
    width: 30%;
  }
}


.case_2_cont img.molecule_1 {
  position: absolute;
  bottom: -11%;
  right: -19%;
  width: 20.5%;
}
.case_3_head img.molecule_1 {
  display: none;
}
@media (max-width: 1024px) {
  .case_2_cont img.molecule_1 {
    bottom: -15%;
  }
}
@media (max-width: 768px) {
  .case_2_cont img.molecule_1 {
    display: none;
  }
  .case_3_head img.molecule_1 {
    display: block;
    position: absolute;
    top: -17%;
    left: 0%;
    width: 17%;
    transform: scale(-1, 1);
  }
}
@media (max-width: 600px) {
  .case_3_head img.molecule_1 {
    width: 19%;
  }
}
@media (max-width: 480px) {
  .case_3_head img.molecule_1 {
    width: 21%;
  }
}


.case_3_cont img.hexagon {
  position: absolute;
  top: 40%;
  left: -20%;
  width: 19%;
}
.case_maker img.hexagon {
  display: none;
}
@media (max-width: 768px) {
  .case_3_cont img.hexagon {
    display: none;
  }
  .case_maker img.hexagon {
    display: block;
    position: absolute;
    top: -15%;
    left: -5%;
    width: 17%;
    transform: scale(-1, 1);
  }
}
@media (max-width: 600px) {
  .case_maker img.hexagon {
    width: 18%;
  }
}
@media (max-width: 480px) {
  .case_maker img.hexagon {
    width: 19%;
  }
}

.inner_3 img.post_1 {
  position: absolute;
  bottom: -35%;
  left: -15%;
  width: 13.8%;
}
@media (max-width: 1024px) {
  .inner_3 img.post_1 {
    left: -17%;
  }
}
@media (max-width: 768px) {
  .inner_3 img.post_1 {
    display: none;
  }
}

.bg_showroom_inner img.ball {
  position: absolute;
  top: -10%;
  right: -5%;
  width: 14%;
}
@media (max-width: 768px) {
  .bg_showroom_inner img.ball {
    top: auto;
    right: auto;
    bottom: 14%;
    right: -2%;
    width: 18%;
  }
}
@media (max-width: 480px) {
  .bg_showroom_inner img.ball {
    bottom: 15%;
    right: -2%;
    width: 18%;
  }
}

.bg_showroom_inner img.microscope {
  position: absolute;
  bottom: -2%;
  left: -7%;
  width: 13.7%;
}
@media (max-width: 768px) {
  .bg_showroom_inner img.microscope {
    bottom: 13%;
    left: -1%;
    width: 14%;
  }
}
@media (max-width: 480px) {
  .bg_showroom_inner img.microscope {
    bottom: 15%;
    width: 17%;
  }
}

#guarantee .inner_bg img.record {
  position: absolute;
  top: 3%;
  left: 4%;
  width: 9.5%;
}
@media (max-width: 768px) {
  #guarantee .inner_bg img.record {
    top: 9%;
    left: 1%;
  }
}
@media (max-width: 480px) {
  #guarantee .inner_bg img.record {
    top: 10%;
  }
}

#guarantee .inner_bg img.molecule_2 {
  position: absolute;
  top: 18%;
  left: -5%;
  width: 14%;
}
@media (max-width: 768px) {
  #guarantee .inner_bg img.molecule_2 {
    top: 22%;
    left: -1%;
    width: 16%;
  }
}

#guarantee .inner_bg .neko_2 {
  position: absolute;
  top: 10%;
  right: -3%;
  width: 10%;
}
@media (max-width: 768px) {
  #guarantee .inner_bg .neko_2 {
    position: absolute;
    top: 22%;
    right: 3%;
    width: 15%;
  }
}

#guarantee .inner_bg img.post_2 {
  position: absolute;
  bottom: -6%;
  right: -6%;
  width: 15.5%;
}
@media (max-width: 768px) {
  #guarantee .inner_bg img.post_2 {
    position: absolute;
    right: auto;
    bottom: -2%;
    left: -3%;
    width: 18%;
    transform: scale(-1, 1);
  }
}
@media (max-width: 480px) {
  #guarantee .inner_bg img.post_2 {
    bottom: -3%;
    left: -6%;
    width: 20%;
  }
}



#staff .robo {
  position: absolute;
  top: 12%;
  left: 6%;
  width: 12.5%;
}
@media (max-width: 768px) {
  #staff .robo {
    top: 29.5%;
    left: auto;
    right: 2%;
    width: 18%;
    transform: scale(-1, 1) rotate(30deg);
  }
}

#staff .suihanki {
  position: absolute;
  top: 20%;
  right: 5%;
  width: 12%;
}
@media (max-width: 768px) {
  #staff .suihanki {
    top: auto;
    bottom: 1%;
    right: 2%;
    width: 14%;
  }
}