@charset "utf-8";

html {
  word-break: break-word;
  line-break: strict;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-size: 62.5%;
  letter-spacing: 0.04em;
}

@media screen and (max-width: 728px) {
  html {
    font-size: 9px;
  }
}

@font-face {
  font-family: 'Mobo-Font';
  src: local('../font/MOBO.otf') format(".otf");
}

@font-face {
  font-family: 'A-OTF-Font';
  src: local('../font/A-OTF-ShinGoPr6-Regular.otf') format(".otf");
}


.white {
  color: #cfcfcf;
  text-shadow: 3px 1px 0px rgba(0, 0, 0, 0.9);
}

.black {
  color: #2c2f2f;
  text-shadow: 3px 1px 0px rgba(255, 255, 255, 0.9);
}

.gray {
  color: #9e9590;
  text-shadow: 3px 1px 0px rgba(255, 255, 255, 0.9);
}

.brown {
  color: #906538;
  text-shadow: 3px 1px 0px rgba(255, 255, 255, 0.9);
}

body {
  font-family: "Sawarabi Mincho", "Helvetica Neue", "Segoe UI", "Yu Gothic", YuGothic, sans-serif;
  color: #fff;
}

main {
  margin: 80px auto 0;
  padding: 64px 10px 4px;
}

article {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

a {
  color: #fff;
}

h2 {
  text-align: center;
  line-height: 4.8rem;
  font-size: 4.4rem;
}
h2 span{
  display: block;
  font-size: 2.3rem;
  line-height: 3.5rem;
}

h2 ruby {
  font-size: 4.8rem;
}

ruby {
  ruby-position: under;
}

rt {
  transform: translateY(0.5em);
}

rt::before,
rt::after {
  content: "-";
}

.hide {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.giza {
  width: 90vw;
  height: 20px;
  background-image: url(../img/giza.png);
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: contain;
  margin: 64px auto;
}

.sp_on {
  display: none;
}

/* header --------------------------------------------------------------------------------------------------- */
#header {
  position: fixed;
  height: 120px;
  z-index: 1000;
  top: 0px;
}

nav {
  display: flex;
  justify-content: space-between;
  background-color: rgba(0, 0, 0, 0.7);
  width: 100vw;
  height: 80px;
  padding-left: 16px;
}

.sns_nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: auto 0;
}

.sns_nav img {
  width: 32px;
  aspect-ratio: 1/1;
}

.global {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}

.global li {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 0 8px;
  padding: 0 8px;
  position: relative;
}

.global li:last-child {
  background-color: rgba(255, 242, 0, 0.8);
  margin-right: 0;
  padding-right: 16px;
}

.global li:last-child a {
  display: flex;
  align-items: center;
  gap: 8px;
}

.global li a {
  display: block;
}

.global li:hover {
  border-bottom: 2px solid #fff;
}

.global li a ruby {
  font-size: clamp(16px, (100vw - 1028px) * 10 / 905 + 16px, 24px);
  font-weight: bold;
  line-height: 2.8rem;
}



/* hamburger-menu --------------------------------------------------------------------------------------------------- */
#menu-btn-check {
  display: none;
}

@media screen and (max-width: 1028px) {
  .header nav ul li {
    text-align: center;
  }

  .menu-btn {
    position: fixed;
    top: 6px;
    right: 15px;
    display: flex;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    z-index: 9000;
  }

  .menu-btn span,
  .menu-btn span:before,
  .menu-btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #ffffff;
    position: absolute;
  }

  #menu-btn-check:checked~.menu-btn span {
    background-color: rgba(255, 255, 255, 0);
    /*メニューオープン時は真ん中の線を透明にする*/
  }

  #menu-btn-check:checked~.menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
  }

  #menu-btn-check:checked~.menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
  }

  .menu-btn span:before {
    bottom: 8px;
  }

  .menu-btn span:after {
    top: 8px;
  }

  .global {
    padding: 24px 0;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 100%;
    /*leftの値を変更してメニューを画面外へ*/
    z-index: 100;
    background-color: rgba(142, 142, 142, 0.8);
    transition: all 0.5s;
    /*アニメーション設定*/
    align-items: center;
  }

  .global li {
    width: 70%;
    height: calc((100vh - 24px) / 9);
    display: flex;
    justify-content: center;
    margin: 0;
  }

  .global li a ruby {
    font-size: 2.0rem;
  }

  #menu-btn-check:checked~.global {
    left: 0;
    /*メニューを画面内へ*/
  }

  #header rt {
    transform: translateY(0em);
  }
}

/* visual --------------------------------------------------------------------------------------------------- */

.visual {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-image: url(../img/bg.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -100;
  max-inline-size: 100%;
}

@media screen and (max-width: 728px) {
  .visual {
    background-image: url(../img/bg.jpg);
  }
}

/* slider --------------------------------------------------------------------------------------------------- */
.slider {
  position: relative;
  top: 80px;
  z-index: 1;
  /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
  /*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}

/*　背景画像設定　*/

.slider-item {
  width: 100%;
  /*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
  height: auto;
}

.slider-item img {
  width: 100vw;
  margin: 0 auto;
}

.slider-item img:nth-child(1) {
  display: block;
}

.slider-item img:nth-child(2) {
  display: none;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev,
.slick-next {
  position: absolute;
  z-index: 3;
  top: 42%;
  cursor: pointer;
  outline: none;
  border-top: 8px solid #ccc;
  border-right: 8px solid #ccc;
  height: 50px;
  width: 50px;
}

.slick-prev {
  /*戻る矢印の位置と形状*/
  left: 2.5%;
  transform: rotate(-135deg);
}

.slick-next {
  /*次へ矢印の位置と形状*/
  right: 2.5%;
  transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
  position: relative;
  z-index: 3;
  text-align: center;
  margin: -20px auto 0;
  background-color: rgba(00, 00, 00, 0.8);
}

.slick-dots li {
  display: inline-block;
  margin: 0 10px;
  padding: 5px 0;
}

.slick-dots button {
  color: transparent;
  outline: none;
  width: 20px;
  /*ドットボタンのサイズ*/
  height: 20px;
  /*ドットボタンのサイズ*/
  display: block;
  border-radius: 50%;
  background: #ccc;
  /*ドットボタンの色*/
}

.slick-dots .slick-active button {
  background: #333;
  /*ドットボタンの現在地表示の色*/
}

@media screen and (max-width: 728px) {
  .slider-item img:nth-child(1) {
    display: none;
  }

  .slider-item img:nth-child(2) {
    display: block;
  }

  .slick-prev,
  .slick-next {
    border-top: 4px solid #ccc;
    border-right: 4px solid #ccc;
  }
}

/* movie --------------------------------------------------------------------------------------------------- */

iframe {
  width: 100%;
  max-width: 1100px;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
}

/* about --------------------------------------------------------------------------------------------------- */
.about-container {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 90%;
  margin: 0 auto;
}

.about-container li figure {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.about-container li figure figcaption span {
  font-family: 'Libre Baskerville', serif;
  display: block;
  font-size: 6.4rem;
  min-width: fit-content;
}

.about-container li figure figcaption {
  display: flex;
  align-items: center;
  font-size: 2.5rem;
  gap: 8px;
}

.about-container li figure img {
  width: calc((100% - 240px) / 2);
  height: 100%;
}

@media screen and (max-width: 728px) {
  .about-container li figure {
    flex-direction: column;
  }

  .about-container li figure {
    align-items: normal;
  }

  .about-container li figure figcaption {
    margin-bottom: 16px;
  }

  .about-container li figure img {
    width: 80%;
    margin: 0 auto;
  }

}


/* detail --------------------------------------------------------------------------------------------------- */
.detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 80%;
  margin: 0 auto;
}

.detail li {
  list-style-type: disc;
  font-size: 2.5rem;
  line-height: 2.8rem;
}

.material {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.material li {
  width: calc((100% / 4) - 80px);
}

@media screen and (max-width: 980px) {
  .material {
    justify-content: space-around;
    gap: 16px;
    row-gap: 56px;
  }

  .material li {
    width: calc((100% / 2) - 80px);
    min-width: 160px;
  }

  #detail .material {
    display: grid;
    grid-template-columns: 2fr 2fr;
    justify-items: center;
  }

  #detail .material li {
    width: 50%;
    min-width: 160px;
  }
}

.material li img {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
}

.material figcaption {
  font-size: 2rem;
  line-height: 2.8rem;
  margin-top: 8px;
  text-align: center;
}

#detail table {
  margin: 0 auto 40px;
  border-collapse: collapse;
}

#detail td,
#detail th {
  border: 3px solid #fff;
}

#detail td,
#detail th {
  font-size: 3rem;
  line-height: 4rem;
  padding: 1.5rem 1rem;
  text-align: center;
}

.detail-table_padding span{
  display: block;
  font-size: 12px;
  line-height: 2rem;
}
#detail rt::before,
#detail rt::after {
  content: "";
}

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

  .sp_on {
    display: block;
  }

  #detail table tr {
    width: 100%;
  }

  #detail table {
    margin: 0 auto 40px;
  }
  .detail li {
    list-style-type: disc;
    font-size: 2rem;
    line-height: 2.8rem;
  }
}

@media screen and (max-width: 728px) {
  #detail .material li {
    width: calc((100% / 2) - 220px);
  }

  #detail td,
  #detail th {
    font-size: 17px;
    line-height: 3rem;
    padding: 2rem 1rem;
    text-align: center;
  }
}

/* color --------------------------------------------------------------------------------------------------- */
.color_botton {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}

.color_botton figcaption {
  font-size: 2.4rem;
  text-align: center;
  font-family: "myfont", sans-serif;
  font-weight: bold;
}

.color_botton li {
  width: calc((100% / 4) - 40px);
  min-width: 180px;
}


.color_botton li:hover {
  opacity: 0.6;
}


.color_botton img {
  display: block;
  margin: 8px auto;
  width: 40%;
  height: auto;
  box-shadow: 0px 0px 0px 2px #ffffff;
  border-radius: 50%;
}
.color_shop{
  display: flex;
      justify-content: center;
      gap: 2px;
      margin-top: 20px;
      align-items: baseline;
}
.shop_box{
  width: calc((100% - 190px) / 2);
}
.shop_box img{
  width: auto !important;
  height: 300px;
}
.shop_box:nth-of-type(1) img{
  margin-left: 6%;
}
.shop_box:nth-of-type(2) img{
  margin-left: 14%;
}
.shop_box a{
  width: 63%;
  margin: 0 auto;
  padding: 1rem 1.3rem;
  border: 3px solid #fff;
  border-radius: 10px;
  font-weight: bold;
  display: block;
  display: flex
;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.shop_box a p{
  font-size: 21px !important;
  text-align: center;
}
.color-explanation,
.example-explanation {
  display: flex;
  gap: 40px;
  flex-direction: column;
  margin: 0 auto;
}

.color-explanation img,
.example-explanation img {
  width: 100%;
  height: auto;
  margin-bottom: 16px;
}

.color-explanation li p{
  font-size: 2.5rem;
  line-height: 3.4rem;
  width: 67%;
}
.table-left,
.table-right,
.table-50 {
  font-size: 3.2rem;
  line-height: 3.4rem;
  padding: 0.8rem 0;
}

.table-left {
  width: 27%;
  min-width: 235px;
  font-weight: bold;
}
.color-explanation li p{
  font-size: 3rem;
  line-height: 3.4rem;
  width: 73%;
}
.color_list{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.color-explanation li{

}
.color-explanation li h3{
  font-size: 3.2rem;
  line-height: 3.4rem;
  width: 27%;
}
.color-explanation li h3 span{
  font-size: 3.8rem;
  line-height: 3.4rem;
  display: block;
  margin-bottom: 5px;
}

@media screen and (max-width: 728px) {
  .color-explanation {
    width: 100%;
  }

  .color_botton figcaption {
    font-size: 2.5rem;
    text-align: center;
    line-height: 3.2rem;
  }

  .color_botton {
    display: grid;
    grid-template-columns: 2fr 2fr;
    justify-items: center;
    align-items: end;
    gap: 8px;
    row-gap: 24px;
  }

  .color_botton li {
    width: calc(100% / 2);
    min-width: 150px;
  }

  .table-right {
    font-size: 2rem;
  }
.color-explanation li p{
  font-size: 2rem;
  line-height: 3.4rem;
  margin-top: 5px;
  width: 100%;
}
.color-explanation li{

}
.color-explanation li h3{
  font-size: 2.2rem;
  line-height: 3.4rem;
  width: 100%;
}
.color_list{
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}
.color-explanation li h3 span{
  font-size: 3.2rem;
  line-height: 3.4rem;
  display: block;
}

  .color-explanation_container .table-left:nth-child(1) {
    min-width: 120px;
  }

  .color-explanation_container .table-left:nth-child(2) {
    text-align: end;
    min-width: 200px;
  }

  .table-50 {
    font-size: 2.4rem;
  }
  .color_shop{
    display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 20px;
            align-items: baseline;
            flex-direction: column;
  }
  .shop_box{
    width: 100%;
  }
  .shop_box img{
    width: auto !important;
    height: 210px;
  }
  .shop_box:nth-of-type(1) img{
    margin-left: 11%;
  }
  .shop_box:nth-of-type(2) img{
    margin-left: 21%;
  }
  .shop_box a{
    width: 57%;
    margin: 0 auto;
    padding: 1rem 1.3rem;
    border: 3px solid #fff;
    border-radius: 10px;
    font-weight: bold;
    display: block;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
  }
  .shop_box a p{
    font-size: 19px !important;
    text-align: center;
  }
}

/* example --------------------------------------------------------------------------------------------------- */

.example-explanation_container {
  width: 100%;
}

.table-50 {
  width: 50%;
}

.table-50:nth-child(even) {
  text-align: end;
}

.example-color_icon {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.example-color_icon img {
  width: 4.0rem;
  height: 100%;
  box-shadow: 0px 0px 0px 2px #ffffff;
  border-radius: 50%;
  margin: 0;
}
.ex_list{
  display: flex;
  justify-content: center;
  gap: 20px;
}
.ex_list li{

}
.ex_list li a{

}
.ex_list li a img{
  width: auto;
  height: 300px;
}
.ex_list li:first-child img{
  margin-left: -15%;
}
.ex_list li:last-child img{
  margin-left: 13%;
}
.ex_sho_link{
    width: fit-content;
    margin: 30px auto 0px auto;
    padding: 1rem 3rem 1rem 1.3rem;
    border: 3px solid #fff;
    border-radius: 10px;
    font-weight: bold;
    font-size: 2rem;
    position: relative;
}
.ex_sho_link::after{
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  content: "";
  width: 12px;
  height: 12px;
  margin: auto;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  bottom: 0;
  right: 15px;
  z-index: 1;
}
@media screen and (max-width: 728px) {
  .example-color_icon {
    align-items: flex-end;
    justify-content: flex-end;
    flex-direction: column;
  }
  .ex_list li a img {
    width: auto;
    height: 240px;
}
.ex_list li:first-child img {
  margin-left: 8%;
}
.ex_list li:last-child img {
  margin-left: 22%;
}
.ex_list {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-direction: column;
}
}

/* Pattern --------------------------------------------------------------------------------------------------- */

#pattern .material li img {
  aspect-ratio: 16/9;
}

/* how to --------------------------------------------------------------------------------------------------- */
.how_to-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.how_to-container li:nth-child(odd) {
  width: calc((100% / 3) - 60px);
}

.how_to-container li:nth-child(even) {
  width: 40px;
  margin: auto 0;
}

.how_to-container li img {
  width: 100%;
  height: auto;
}

.how_to-container li figcaption {
  font-size: 1.6rem;
  margin-top: 8px;
}

@media screen and (max-width: 728px) {
  .how_to-container {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .how_to-container li:nth-child(odd) {
    width: 90%;
  }

  .how_to-container li:nth-child(even) {
    width: 40px;
  }

  .how_to-container li:nth-child(even) img {
    transform: rotate(90deg);
  }

  .how_to-container li figcaption {
    font-size: 2.4rem;
  }
  .about-container li figure figcaption {
    display: flex;
    align-items: center;
    font-size: 2rem;
    gap: 8px;
  }
}

/* shop --------------------------------------------------------------------------------------------------- */
.shop_logo {
  margin: 0 auto;
}

.shop_logo figcaption {
  font-size: 3.5rem;
  font-weight: bold;
  text-align: center;
}

.shop_logo img {
  width: 60%;
  margin: 16px auto -48px;
}

.shop_container {
  display: flex;
  justify-content: space-around;
}

.shop_container-box {
  width: calc((100% - 100px) / 2);
}

.shop_container figure img {
  width: auto;
  height: 300px;
}

.shop_container-box:first-child img {
  margin-left: 8%;
}

.shop_container-box:last-child img {
  margin-left: 20%;
}

.shop_container figcaption {
  font-size: 3.2rem;
  font-weight: bold;
  text-align: center;
  margin: 15px 0px;
}

.shop_botton {
  width: fit-content;
  margin: 0 auto;
  padding: 1rem 1.3rem;
  border: 3px solid #fff;
  border-radius: 10px;
  font-weight: bold;
}

.shop_botton a {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.shop_botton p {
  font-size: clamp(16px, (100vw - 728px) * 10 / 905 + 16px, 24px);
  text-align: center;
}


.cart {
  background-image: url(../img/icon_cart.png);
  background-size: contain;
  width: 43px;
  height: 31px;
  background-repeat: no-repeat;
  margin: auto 0;
}


@media screen and (max-width: 980px) {
  .shop_container-box {
    width: calc((100% - 40px) / 2);
  }

  .shop_container figure img {
    height: 240px;
  }
}

@media screen and (max-width: 728px) {
  .shop_container {
    flex-direction: column;
  }

  .shop_container-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto 24px;
  }

  .shop_container-box:first-child img {
    margin-left: -20%;
  }

  .shop_container-box:last-child img {
    margin-left: 14%;
  }
}


/* footer --------------------------------------------------------------------------------------------------- */

footer {
  text-align: center;
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: #fff;
  margin-top: 64px;
}

footer hr {
  position: initial;
}

footer ul,
.nav2 ul {
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
}

footer a,
.nav2 a {
  display: block;
  box-sizing: border-box;
  width: 43px;
  height: 43px;
  border-radius: 3px;
  transition: 0.3s;
}

footer .link_fb,
.nav2 .link_fb {
  background: url(../img/icon_fb.svg) no-repeat center/contain;
}

footer .link_ig,
.nav2 .link_ig {
  margin-right: 30px;
  background: url(../img/icon_ig.svg) no-repeat center/contain;
}

footer .link_yt,
.nav2 .link_yt {
  background: url(../img/icon_yt.svg) no-repeat center/contain;
  margin-right: 30px;
}

footer .foo_text {
  font-size: 12px;
  margin-bottom: 10px;
  color: #000;
}

footer .last_text {
  font-size: 10px;
  color: #000;
}

footer .nho_t {
  font-size: 12px;
  margin: 30px 0 10px;
  color: #000;
}

footer .nho_link a {
  display: -ms-flexbox;
  width: 100%;
  height: 100%;
  flex-direction: column;
  max-height: 34px;
  max-width: 300px;
  margin: 0 auto 20px;
  padding: 0 10px;
}

footer .nho_link img {
  width: 100%;
  max-width: 300px;
  margin: 5px auto;
  ;
}

footer .pw_link a {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 58px;
  max-width: 240px;
  margin: 0 auto 40px;
  padding: 0 10px;
}

/* example01kg --------------------------------------------------------------------------------------------------- */
.example_h1{
  text-align: center;
  line-height: 4.8rem;
  font-size: 4.4rem;
  margin-top: 150px;
  margin: 150px 0px 100px 0px;
}
.example_h1 span{
  display: block;
  font-size: 2.3rem;
  line-height: 3.5rem;
  margin-top: 10px;
}
section{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0px 10px;
}
section h2{
  text-align: center;
  line-height: 4.8rem;
  font-size: 30px;
}
section h2 img{
  display: block;
  max-width: 180px;
  margin: 10px auto 0px auto;
}
#kyatatsu h2 span{
  display: flex;
  max-width: 420px;
  margin: 0 auto;
}
.zaku_works_img{
  max-width: 1100px;
  margin: 50px auto;
}
.zaku_works_img img{

}

section p{
  font-size: 2.5rem;
  line-height: 3.4rem;
  font-weight: bold;
  margin: 50px 0px;
}
#shop_jirei{
  margin-top: 50px;
}
.zaku_shop_img{
  display: flex;
  justify-content: center;
  gap: 20px;
}
#shop_jirei p{
  font-size: 3.2rem;
  font-weight: bold;
  text-shadow: 2px 4px 2px rgb(0 0 0);
  text-align: center;
}
#shop_jirei p span{
  font-size: 2rem;
  font-weight: bold;
}
#shop_jirei a{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  color: #000;
  position: relative;
  /* width: fit-content; */
  padding: 10px 30px;
  margin: 15px auto 0px auto;
  width: fit-content;
  font-weight: bold;
  font-size: 1.5rem;
}
#shop_jirei a::before{
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  content: "";
  width: 10px;
  height: 10px;
  margin: auto;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  bottom: 0;
  right: 15px;
  z-index: 1;
}
img {
  border: none;
  vertical-align: bottom;
  max-width: 100%;
  max-height: 100%;
}
@media screen and (max-width: 728px) {
  .zaku_shop_img{
    align-items: center;
  }
  .zaku_shop_img img{
    width: 48%;
  }
  section{
    width: 92%;
  }
  section h2 img{
    max-width: 150px;
  }
  .zaku_works_img {
    max-width: 1100px;
    margin: 20px auto;
}
section p {
  font-size: 1.8rem;
  line-height: 3.4rem;
  font-weight: bold;
  margin: 20px 0px;
}
.giza {
  width: 90vw;
  height: 20px;
  background-image: url(../img/giza.png);
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: contain;
  margin: 40px auto;
}
.example_h1 {
  text-align: center;
  line-height: 4.8rem;
  font-size: 4rem;
  margin-top: 150px;
  margin: 130px 0px 40px 0px;
}
}