@media screen and (max-width: 767px) {
  html {
    /* ヘッダー分の高さを考慮 */
    scroll-padding-top: 12.6vw;
  }

  .pc {
    display: none;
  }

  .sp {
    font-family: "Zen Kaku Gothic New", sans-serif;
  }

  .main_margin {
    margin-top: 12.8vw;
  }

  section,
  .reservation {
    padding: 10.66vw 5.33vw 21.33vw 5.33vw;
  }

  .sp_en {
    display: none;
    font-family: "Poppins";
  }

  /* ------ loading ------ */
  .main_loading {
    display: none;
  }

  .loading {
    padding-top: 12.8vw;
    height: calc(100vh - 21.33vw);
    background-color: #466e3b;
    display: flex;
  }

  .loading img {
    margin: auto;
    width: 53.33vw;
  }

  .loading_loaded {
    display: none;
  }

  /* ------ header ------ */
  header {
    width: 100%;
    z-index: 100;
    position: fixed;
    top: 0;
    left: 0;
  }

  .header_white {
    background: #fff;
  }

  .header_logo {
    display: flex;
    align-items: center;
    padding: 1.06vw 0;
  }

  .header_logo img {
    height: 10.66vw;
    width: 10.13vw;
    margin: 0 auto;
  }

  /* チェックボックスを非表示にする */
  .drawer_hidden {
    display: none;
  }

  /* ハンバーガーアイコンの設置スペース */
  .drawer_open {
    z-index: 1001;
    height: 6.4vw;
    width: 6.4vw;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 5.33vw;
    top: 3.2vw;
  }

  /* ハンバーガーメニューのアイコン */
  .drawer_open span,
  .drawer_open span:before,
  .drawer_open span:after {
    content: "";
    display: block;
    height: 1px;
    width: 5.33vw;
    border-radius: 0.8vw;
    background: #466e3b;
    transition: 0.5s;
    position: absolute;
  }

  /* 三本線の一番上の棒の位置調整 */
  .drawer_open span:before {
    bottom: 1.9vw;
  }

  /* 三本線の一番下の棒の位置調整 */
  .drawer_open span:after {
    top: 1.9vw;
  }

  /* アイコンがクリックされたら真ん中の線を透明にする */
  .drawer_hidden:checked ~ .drawer_open span {
    background: rgba(255, 255, 255, 0);
  }

  /* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
  .drawer_hidden:checked ~ .drawer_open span::before {
    width: 6.66vw;
    bottom: 0;
    transform: rotate(45deg);
    background: #fff;
  }

  .drawer_hidden:checked ~ .drawer_open span::after {
    width: 6.66vw;
    top: 0;
    transform: rotate(-45deg);
    background: #fff;
  }

  /* ------ glonav ------ */
  .glonav {
    z-index: 1000;
    background-color: #466e3b;
    position: absolute;
    top: 0;
    left: 100%;
    width: 85.33vw;
    padding: 16vw 4.26vw 10.66vw 4.26vw;
    transition: 0.5s;
  }

  .glonav a {
    width: 100%;
    display: flex;
    padding: 5.33vw;
    justify-content: space-between;
    color: #fff;

    line-height: 6.4vw;
    font-size: 4.26vw;
    font-family: "Poppins";
  }

  .glonav img {
    width: 6.4vw;
  }

  /* アイコンがクリックされたらメニューを表示 */
  .drawer_hidden:checked ~ .glonav {
    left: 14.66vw;
  }

  /* アイコンがクリックされたらoverlayをかける */
  .overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 99;
  }

  .toggle {
    font-family: "Poppins";
    font-size: 3.73vw;
    color: #fff;
    line-height: 7.46vw;
    display: flex;
    gap: 1.06vw;
    justify-content: flex-end;
  }

  .toggle_button {
    position: relative;
    width: 13.33vw;
    height: 7.46vw;
    border-radius: 50px;
    background: #36622a;
  }

  .toggle_button::after {
    position: absolute;
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
    width: 5.33vw;
    height: 5.33vw;
    border-radius: 50%;
    background-color: #dddddd;
    content: "";
    transition: left 0.4s;
  }

  .toggle_button:has(:checked)::after {
    left: 30px;
  }

  .toggle_button input {
    display: none;
  }

  /* ------ fv ------ */
  .fv {
    position: relative;
  }

  .fv_image {
    width: 100%;
    opacity: 0.5;
  }

  .fv_logos {
    z-index: 1;
    width: 100%;
    position: absolute;
    top: 33.33vw;
    justify-content: center;
    display: flex;
    gap: 29.06vw;
  }

  .fv_logos img {
    width: 24.8vw;
  }

  /* ------ about ------ */
  .about {
    color: #fff;
    background: #466e3b;
  }

  .about_title {
    width: 14.39vw;
    margin-bottom: 10.66vw;
  }

  .about_title p {
    font-family: "Poppins";
    font-size: 4.26vw;
    line-height: 120%;
    letter-spacing: 0.42vw;
    border-bottom: 1px solid #fff;
    padding-bottom: 1.06vw;
  }

  .about_text {
    font-family: "Poppins";
    font-size: 6.4vw;
    line-height: 120%;
    margin-bottom: 8.53vw;
    font-weight: bold;
  }

  .about_text_sub {
    font-size: 3.73vw;
    line-height: 160%;
    margin-bottom: 10.66vw;
  }

  .about_logo {
    display: flex;
    justify-content: center;
    margin-bottom: 10.66vw;
  }

  .about_logo img {
    width: 45.6vw;
  }

  .about_button {
    margin: 0 auto;
    display: flex;
    padding: 3.2vw 10.66vw;
    gap: 2.66vw;
    border: 1px solid #fff;
  }

  .about_button p {
    font-family: "Poppins";
    font-size: 4.26vw;
  }

  .about_button img {
    width: 6.4vw;
  }

  /* ------ about ------ */
  .artist {
    color: #1f1f1f;
    background: white;
  }

  .artist_title {
    width: 12.8vw;
    margin-bottom: 10.66vw;
  }

  .artist_title p {
    font-family: "Poppins";
    font-size: 4.26vw;
    line-height: 120%;
    letter-spacing: 0.42vw;
    border-bottom: 1px solid #1f1f1f;
    padding-bottom: 1.06vw;
  }

  .artist_area {
    display: flex;
    flex-flow: column;
    gap: 8.53vw;
  }

  .artist_box {
    display: flex;
    flex-flow: column;
    margin: 0 auto;
    gap: 4.26vw;
    width: 53.6vw;
  }

  .artist_box a {
    margin: 0 auto;
  }

  .artist_info {
    display: flex;
    flex-flow: column;
    gap: 3.2vw;
    text-align: center;
  }

  .artist_name {
    font-family: "Poppins";
    font-size: 6.4vw;
    font-weight: bold;
    line-height: 120%;
  }

  .artist_style,
  .artist_affiliation {
    font-size: 4.26vw;
    line-height: 120%;
  }

  .artist_lang {
    font-family: "Poppins";
    font-size: 4.26vw;
    line-height: 120%;
  }

  .artist_instagram_icon {
    width: 10.66vw;
    filter: brightness(0) saturate(100%) invert(0%) sepia(2%) saturate(2630%)
      hue-rotate(318deg) brightness(97%) contrast(76%);
  }

  /* ------ price ------ */
  .price {
    background: #1f1f1f;
    color: #fff;
  }

  .price_title {
    width: 12vw;
    margin-bottom: 10.66vw;
  }

  .price_title p {
    font-family: "Poppins";
    font-size: 4.26vw;
    line-height: 120%;
    letter-spacing: 0.42vw;
    border-bottom: 1px solid #fff;
    padding-bottom: 1.06vw;
  }

  .price_area {
    display: flex;
    flex-flow: column;
    gap: 6.4vw;
    margin-bottom: 8.53vw;
  }

  .price_box {
    display: flex;
    justify-content: space-between;
    height: 5.86vw;
  }

  .price_box_menu {
    font-size: 3.73vw;
    font-weight: bold;
  }

  .price_box_price {
    font-family: "Poppins";
    font-size: 3.73vw;
    font-weight: bold;
  }

  .price_annotation_time {
    font-size: 3.2vw;
    line-height: 140%;
    margin-bottom: 4.26vw;
  }

  .price_annotation_payment {
    font-size: 3.2vw;
    line-height: 120%;
    margin-bottom: 8.53vw;
  }

  .price_annotation_person {
    padding: 4.26vw 5.33vw;
    border: 1px solid #fff;
    margin-bottom: 10.66vw;
  }

  .price_annotation_person_title {
    font-size: 3.2vw;
    line-height: 120%;
    margin-bottom: 4.26vw;
  }

  .price_annotation_person_lists {
    display: flex;
    flex-flow: column;
    gap: 2.13vw;
  }

  .price_annotation_person_lists li {
    font-size: 3.2vw;
    line-height: 120%;
  }

  .price img {
    width: 100%;
  }

  /* ------ gallery ------ */
  .gallery_title {
    width: 17.33vw;
    margin-bottom: 10.66vw;
  }

  .gallery_title p {
    font-family: "Poppins";
    font-size: 4.26vw;
    line-height: 120%;
    letter-spacing: 0.42vw;
    border-bottom: 1px solid #1f1f1f;
    padding-bottom: 1.06vw;
  }

  .gallery_tab {
    color: #36622a;
    display: flex;
    margin-bottom: 8.53vw;
  }

  .gallery_tab_hidden {
    display: none;
  }

  .gallery_tab_item {
    width: calc(100% / 2);
    color: #36622a;
    display: flex;
    float: left;
    padding: 2.13vw 2.13vw;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.53vw;
    border: 1px solid #466e3b;
    border-style: solid none solid solid;
  }

  .gallery_tab_item:last-child {
    border-style: solid;
  }

  .gallery_tab_item img {
    width: 6.4vw;
  }

  .gallery_tab_item p {
    font-family: "Poppins";
    font-size: 3.2vw;
    line-height: 120%;
    text-align: center;
  }

  .gallery_third_home_tattoo_content div,
  .gallery_gentle_ink_tattoo_content div {
    position: relative;
  }

  .gallery_third_home_tattoo_content div img:first-child,
  .gallery_gentle_ink_tattoo_content div img:first-child {
    width: 100%;
    object-fit: cover;
  }

  .gallery_third_home_tattoo_content button,
  .gallery_gentle_ink_tattoo_content button {
    display: flex;
    margin: 4.26vw auto 0;
    padding: 3.2vw 10.66vw;
    border: 1px solid #000;

    font-family: "Poppins";
    font-size: 4.26vw;
    line-height: 120%;
  }

  .gallery_gentle_pecotattoo2010_content div {
    display: grid;
    gap: 6.4vw;
  }

  .gallery_gentle_pecotattoo2010_content div iframe {
    height: 49.86vw;
    width: 100%;
  }

  .gallery_gentle_pecotattoo2010_content button {
    display: flex;
    margin: 6.4vw auto 0;
    padding: 3.2vw 10.66vw;
    border: 1px solid #000;
    gap: 2.66vw;

    font-family: "Poppins";
    font-size: 4.26vw;
    letter-spacing: 0.42vw;
  }

  .gallery_gentle_pecotattoo2010_content button img {
    width: 6.4vw;
    height: 6.4vw;
  }

  .gallery_content {
    display: none;
    margin-top: 8.53vw;
  }

  .content_wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4.27vw;
  }
  .instagram_Image {
    width: 26.93vw;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /*選択されているタブのスタイルを変える*/
  .gallery input:checked + .gallery_tab_item {
    background-color: #36622a;
    color: #fff;
  }

  .gallery_tab_hidden:checked + .gallery_tab_item img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7479%)
      hue-rotate(116deg) brightness(98%) contrast(106%);
  }

  .zoom_icon {
    position: absolute;
    top: 2.13vw;
    right: 2.13vw;
    width: 4.26vw;
    height: 4.26vw;
  }
  .gallery_overlay {
    display: none;
    z-index: 10000;
    background: rgba(31, 31, 31, 0.6);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
  }

  .gallery_modal {
    width: 85.33vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .gallery_modal_header {
    background: #fff;
    display: flex;
    align-items: center;
    height: 17.06vw;
    line-height: 17.06vw;
    padding: 0 5.33vw;
  }

  .gallery_modal_header_name {
    color: #1f1f1f;
    font-family: "Poppins";
    font-size: 4.26vw;
    margin-right: 2.13vw;
  }

  .gallery_modal_header_date {
    color: #888;
    font-family: "Poppins";
    font-size: 3.73vw;
  }

  .gallery_modal_header_icon {
    width: 6.4vw;
    height: 6.4vw;
    position: absolute;
    right: 5.33vw;
  }

  .gallery_modal_content img {
    width: 100%;
  }

  .gallery_modal_content_slider {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
  }

  .gallery_modal_content_previous_button {
    position: absolute;
    top: 50%;
    left: 4.26vw;
  }

  .gallery_modal_content_next_button {
    position: absolute;
    top: 50%;
    right: 4.26vw;
  }

  .gallery_modal_content_previous_button img,
  .gallery_modal_content_next_button img {
    width: 6.4vw;
    height: 6.4vw;
  }

  .gallery_modal_content_slider button {
    width: 2.13vw;
    height: 2.13vw;
    border-radius: 50%;
    background: white;
    border: 1px solid #1f1f1f;
  }

  .is_show {
    display: block;
  }

  /* ------ access ------ */
  .access {
    color: #1f1f1f;
  }

  .access_title {
    width: 17.33vw;
    margin-bottom: 10.66vw;
  }

  .access_title p {
    font-family: "Poppins";
    font-size: 4.26vw;
    line-height: 120%;
    letter-spacing: 0.42vw;
    border-bottom: 1px solid #1f1f1f;
    padding-bottom: 1.06vw;
  }

  .access_area {
    display: flex;
    flex-flow: column;
    gap: 10.66vw;
  }

  .access_box {
    display: flex;
    align-items: center;
    gap: 5.33vw;
  }

  .access_box img {
    width: 24vw;
    height: 100%;
  }

  .access_info {
    display: flex;
    flex-flow: column;
    gap: 4.26vw;
  }

  .access_info_name {
    font-family: "Poppins";
    font-weight: bold;
    line-height: 120%;
    font-size: 6.4vw;
  }

  .access_info_address {
    font-size: 3.73vw;
    line-height: 140%;
    letter-spacing: 0.37vw;
  }

  .access_info_tell {
    font-size: 3.73vw;
    line-height: 120%;
    letter-spacing: 0.37vw;
  }

  /* ------ reservation ------ */
  .reservation {
    color: #1f1f1f;
  }

  .reservation_title {
    width: 31.73vw;
    margin-bottom: 8.53vw;
  }

  .reservation_title p {
    font-family: "Poppins";
    font-size: 4.26vw;
    line-height: 120%;
    letter-spacing: 0.42vw;
    border-bottom: 1px solid #1f1f1f;
    padding-bottom: 1.06vw;
  }

  .reservation_subtitle {
    font-size: 4.26vw;
    font-weight: bold;
    line-height: 120%;
    margin-bottom: 10.66vw;
  }

  .reservation_step {
    display: flex;
    flex-flow: column;
    gap: 10.66vw;
  }

  .reservation_step li {
    display: flex;
    flex-flow: column;
    gap: 8.53vw;
  }

  .reservation_step_title {
    font-weight: 700;
    font-size: 4.26vw;
    line-height: 120%;
  }

  .reservation_step_description {
    font-size: 3.73vw;
    line-height: 160%;
  }

  .reservation_step_artist {
    display: flex;
    flex-direction: column;
    gap: 3.2vw;
  }

  .reservation_step_artist_wrapper {
    display: flex;
  }

  .reservation_step_artist_label {
    padding-top: 0.53vw;
    font-size: 3.73vw;
  }

  .reservation_step_artist_name {
    font-family: "Poppins";
    text-decoration-line: underline;
    text-underline-offset: 1.06vw;
    font-size: 3.73vw;
  }

  .reservation_step_artist_date {
    font-size: 3.73vw;
    width: 64vw;
  }

  .reservation_step_artist_anotation {
    line-height: 160%;
    font-size: 3.2vw;
  }

  /* ------ footer ------ */
  footer {
    background: #1f1f1f;
    text-align: center;
  }

  footer p {
    line-height: 21.33vw;
    font-family: "Poppins";
    color: #fff;
    font-size: 3.73vw;
  }

  /* modal */
  .modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
  }

  .modal-content {
    background-color: #f4f4f4;
    width: 85.33vw;
    position: relative;
  }

  .modal-header h1 {
    margin: 1rem 0;
  }

  .modal-header {
    background: #fff;
    padding: 5.33vw;
    display: flex;
    justify-content: space-between;
  }

  .modal-header_left {
    display: flex;
    align-items: center;
    gap: 2.13vw;
  }
  .modal-instagram {
    width: 6.4vw;
    height: 6.4vw;
    filter: brightness(0) saturate(100%) invert(0%) sepia(2%) saturate(2630%)
      hue-rotate(318deg) brightness(97%) contrast(76%);
  }
  .modal-instagram img {
    width: 100%;
    object-fit: cover;
  }
  .modalClose {
    display: none;
  }

  .modalClose:hover {
    cursor: pointer;
  }

  .modal-body {
    background-color: #fff;
  }

  .modal-body > img {
    width: 100%;
    object-fit: cover;
  }
  .modal-username {
    color: #1f1f1f;
    font-size: 3.73vw;
  }
  .modal-postdate {
    color: #888888;
    font-size: 3.73vw;
  }
}