.pc {
    display: block;
}
@media (max-width: 768px) {
    .pc {
        display: none;
    }
}
.sp {
    display: none;
}
@media (max-width: 768px) {
    .sp {
        display: block;
    }
}
/* fv */
main {
    padding-top: 80px;
}
@media (max-width: 1300px) {
    main {
    padding-top: 62px;
}
}

#fv {
    background-image: url(../img/fv-img.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh;
    position: relative;
    max-height: 920px;
}

#fv h1 {
    font-size: clamp(30px,8vw,100px);
    color: var(--whiteColor);
    position: absolute;
    top:45%;
    left: 50%;
    transform: translate(-50%,-50%);
    white-space: nowrap;
    text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
}
#scroll {
    text-align: center;
    padding-top: 50px;
    padding-bottom: 160px;
}
#scroll img {
    width: 12%;
    height: auto;
}
@media (max-width: 800px) {
    #scroll {
        padding-top: 10px;
        padding-bottom: 100px;
    }

}
/* message */
#message {
    position: relative;
    padding-bottom: 40%;
    overflow: hidden;
}
#message h2 {
    font-size: clamp(25px,6.6vw,50px);
    padding-bottom: 50px;
}
#message p {
    font-size: 16px;
    text-align: left;
    width: 60%;
    margin-left: auto;
    margin-right: 0;
    line-height: 3em;
}
.message-text {
    text-align: right;
    padding-right: 80px;
}
.message-text p {
    font-family: var(--hiragino);
}
.sausage::before,
.yakiniku::before {
    content: "";
    position: absolute;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;
    background-image: url(../img/circle1.png);
    background-size: contain;
    border-radius: 50%;
    animation: rotate 8s linear infinite; /* 4秒かけて1回転し、無限に繰り返すアニメーション */
}

@keyframes rotate {
    to {
        transform: rotate(360deg); /* 360度回転 */
    }
}

.sausage {
    position: absolute;
    width: 30vw;
    left: 2%;
    top: 0;
    max-width: 888px;
}

.sausage img {
    width: 100%;
    height: auto;
}

.yakiniku {
    position: absolute;
    width: 28vw;
    right: 2%;
    bottom: 7vw;
    max-width: 710px;
}

.yakiniku img {
    width: 100%;
    height: auto;
}


@media (max-width: 1400px) {
    #message::before {
        width: 30%;
    }
}
@media (max-width: 1000px) {
    .message-text {
        padding-right: 10px;
    }
}
@media (max-width: 800px) {
    #message::after {
        top: 450px;
    }
    #message::before {
        top: 60px;
    }
    .sausage {
        top: 5vh;
    }
}
@media (max-width: 600px) {
    #message::after {
        top: 430px;
        width: 20%;
    }
    #message p {
        line-height: 2em;
    }
}
@media (max-width: 350px) {
    #message::after {
        top: 520px;
    }

}
/* works */
#works p {
    font-size: clamp(25px,6.6vw,30px);
    text-align: center;
    padding-bottom: 50px;
    color: rgba(111, 179, 154, 1);
}
#works .container {
    max-width: inherit;
    padding-bottom: 400px;
}
.slider1 .slider2 img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider1 .slick-slide {
    margin:0 27px;/*スライド左右の余白調整*/
    padding-bottom: 25px;
}
.slider2 .slick-slide {
    margin:0 27px;/*スライド左右の余白調整*/
    padding-bottom: 400px;
}

.works-slider1,
.works-slider2,
.slider2, .slider,
.works-slider1 .slick-list,
.works-slider2, .slick-list,
.works-slider1, .slick-track
.works-slider2, .slick-track  {
    height: 340px;
}

.works-slider1,
.works-slider2{
    max-width: inherit;
    margin: 0 auto;
}

.works-slider2 {
    margin-top: 25px;
}

ul{
  margin:0;
  padding: 0;
  list-style: none;
}
.slick-slide {
    width: 340px !important;
    cursor: pointer;
}

@media(max-width:900px) {
    .works-slider1 .slick-slide,
    .works-slider2 .slick-slide{
        width: 200px !important;
        height: 200px;
    }

    .works-slider1 .slick-slide img,
    .works-slider2 .slick-slide img{
        width: 200px !important;
        height: 200px;
    }

    #works .container {
        padding-bottom: 170px;
    }
}

@media(max-width:600px) {
    .works-slider1 .slick-slide,
    .works-slider2 .slick-slide{
        width: 120px !important;
        height: 120px;
    }

    .works-slider1 .slick-slide img,
    .works-slider2 .slick-slide img{
        width: 120px !important;
        height: 120px;
    }

    .works-slider1, .works-slider2 {
        height: 120px;
    }

    .slider1 .slick-slide {
        margin:0 17px;/*スライド左右の余白調整*/
    }
    .slider2 .slick-slide {
        margin:0 17px;/*スライド左右の余白調整*/
    }
}

.slick-slide img {
    object-fit: cover;
}

@media(max-width:400px) {
    .works-slider1 .slick-slide,
    .works-slider2 .slick-slide{
        width: 97px !important;
        height: 97px;
    }

    .works-slider1 .slick-slide img,
    .works-slider2 .slick-slide img{
        width: 97px !important;
        height: 97px;
    }

    .works-slider1, .works-slider2,
    .works-slider1 .slick-list,
    .works-slider2 .slick-list {
        height: 97px;
    }

    .slider1 .slick-slide {
        margin:0 7px;/*スライド左右の余白調整*/
    }
    .slider2 .slick-slide {
        margin:0 7px;/*スライド左右の余白調整*/
    }
}


/* instagram */
#instagram {
    background-color: var(--blackColor);
    padding-bottom: 249px;
}
.instagram-title {
    color: var(--whiteColor);
    font-size: clamp(25px,6.6vw,30px);
    max-width: 1060px;
    text-align: right;
    margin: 0 auto;
    padding-top: 170px;
    padding-bottom: 50px;
    width: 74%;
}
.post-flex {
    display: flex;
    justify-content: left;
    align-items: center;
    padding-bottom: 30px;
    gap: 5px;
}
.post-box {
    background-color: var(--whiteColor);
    max-width: 1060px;
    margin: 0 auto;
    padding: 36px 80px 0 80px;
    width: 74%;
}
#instagram .post-name p {
    color: var(--blackColor);
    font-size: clamp(16px,4.26vw,22px);
}
#instagram .follow p {
    width: 145px;
    color: var(--blackColor);
    border: 1px solid var(--blackColor);
    padding: 3% 0 2% 0;
    font-size: clamp(12px,2.2vw,18px);
}
.post-text {
    width: 90%;
}
.post-icon img {
    width: 64%;
    height: auto;
    min-width: 122px;
}
.follow {
    text-align: center;
}

.instagram-icon a img {
    margin-left: 30px;
    width: 80%;
}

.post-grid {
    display: flex;
    justify-content: center;
}
.post-picture {
    padding-bottom: 70px;
}
.item img {
    width: 100%;
    height: auto;
}

@media(max-width:900px) {
    .post-box {
        padding: 23px 29px 28px 29px;
    }
}

@media(max-width:750px) {
    .instagram-title {
        padding-top: 20px;
        padding-bottom: 50px;
    }

    .post-icon img {
        min-width: 52px;
    }

    .post-box {
        width: 94%;
    }
    .post-flex {
        padding-bottom: 10px;
        gap: 5px;
    }

    .instagram-icon a img {
        width: 30px;
        height: auto;
        margin-left: 5px;
    }

    .post-picture {
        padding-bottom: 0;
    }

    #instagram {
        padding-bottom: 30px;
    }
}

@media(max-width:400px) {
    .instagram-icon a img {
        width: 22px;
        margin-left: 2px;
    }
}

/* studio */
.studio-main p {
    font-size:clamp(25px, 6.7vw, 30px);
    color: var(--blackColor);
    padding-top: 100px;
    margin-top: 300px;
    padding-bottom: 56px;
}
.studio-main {
    max-width: 1133px;
    margin: 0 auto;
}
#studio img {
    width: 100%;
    height: 125px;
    padding-bottom: 128px;
}
#studio .container {
    max-width: 1440px;
    padding: 0;
}

.studio-slider1, .studio-slider2 {/*横幅94%で左右に余白を持たせて中央寄せ*/
    width:83%;
     margin:0 auto;
     padding-left: 10px;
     padding-right: 10px;
 }
 .studio-slider1 img, .studio-slider2 img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
    max-width: 125px;
    padding-bottom: 0 !important;
}

 /*slickのJSで書かれるタグ内、スライド左右の余白調整*/

 .studio-slider1 .slick-slide {
     margin:0 10px;
     width: 125px !important;
     height: 125px !important;
 }
 .studio-slider2 .slick-slide {
    margin:0 10px;
    width: 125px !important;
    height: 125px !important;
}

#studio .slick-slide,
#studio .slick-track,
#studio .slick-list,
#studio .slick-list {
    height: 125px;
}

 /*矢印の設定*/

 /*戻る、次へ矢印の位置*/
 .slick-prev,
 .slick-next {
     position: absolute;/*絶対配置にする*/
     top: 50%;
     cursor: pointer;/*マウスカーソルを指マークに*/
     outline: none;/*クリックをしたら出てくる枠線を消す*/
     border-top: 2px solid #666;/*矢印の色*/
     border-right: 2px solid #666;/*矢印の色*/
     height: 15px;
     width: 15px;
 }

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

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


.studio-flex {
    display: flex;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    align-items: flex-start;
}
.studio-ikejiri, .studio-hayama {
    width: 50%;
    margin-top: 110px;
    position: relative;
}
.studio-ikejiri .stu-bottom-p,
.studio-hayama .stu-bottom-p {
    font-family: var(--hiragino);
}

.studio-ikejiri .stu-bottom-p {
    font-size: 16px !important;
    color: var(--blackColor);
    padding-top: 63px;
    text-align: center;
    white-space: nowrap;
}
.studio-hayama .stu-bottom-p {
    font-size: 16px !important;
    color: var(--blackColor);
    padding-top: 55px ;
    text-align: center;
    line-height: 3em;
}
.studio-hayama .stu-bottom-p span {
    font-size: 14px !important;
	color:red;
}
#access {
    max-width: 1210px;
    width: 100%;
    margin: 0 auto;
}
.map {
    width: 100%;
    margin: 0 auto;
    max-width: 508px;
    overflow: hidden;
    padding-top: 50px;
    padding-bottom: 50px;
}
.access-txt {
    width: 50%;
    max-width: 521px;
    margin: 0 auto;
}
.access-flex {
    display: flex;
    margin: 30px  auto 0 auto;
    padding-bottom: 250px;
    max-width: 1200px;
}
.access-title {
    font-size: 25px;
    padding-top: 80px;
}
.access-text {
    font-size: clamp(16px,4.26vw,20px);
    line-height: 3em;
    text-align: left;
    padding-top: 50px;
}

.pc-main-img {
    width: 100%;
    height: auto;
    aspect-ratio: 1.8;
    background-image: url(../img/studio.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.stu-p {
    font-size: 25px ;
    padding-bottom: 70px ;
    padding-top: 0 ;
    line-height: 0 ;
    text-align: center;
}

@media(max-width:1300px) {
    .studio-main p {
        padding-top: 132px;
        padding-bottom: 50px;
        padding-left: 1em;
    }

    .studio-flex {
        flex-direction: column;
    }

    .access-flex {
        flex-direction: column;
        width: 100%;
        text-align: center;
        padding-bottom: 0;
    }

    #studio img {
        padding-bottom: 0;
    }

    .access-title {
        padding-top: 25px !important;
        padding-bottom: 35px !important;
    }

    .access-text {
        padding-top: 0 !important;
        padding-bottom: 85px !important;
        width: 80%;
        line-height: 200%;
        margin:  0 auto;
    }

    .access-txt {
        width: 90%;
    }

    .studio-ikejiri, .studio-hayama {
        width: 100%;
        margin: 0 auto;
    }

    #studio .slick-slide, #studio .slick-track, #studio .slick-list, #studio .slick-list {
        height: 150px;
    }

    .studio-slider1 .slick-slide,
    .studio-slider2 .slick-slide {
        margin: 0 10px;
        width: 150px !important;
        height: 150px !important;
    }

    .sp-main-img,
    .sp-main-img2 {
        width: 100%;
        height: auto;
        aspect-ratio: 1.8;
        background-image: url(../img/studio.png);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        margin-bottom: 60px;
    }

    .sp-main-img2 {
        background-image: url(../img/hayama1.jpg);
    }

    .studio-ikejiri .stu-bottom-p {
        padding-top: 16px !important;
    }

    .map {
    width: 67%;
    aspect-ratio: 1.21;
    padding-top: 0;
    padding-bottom: 0;
    }

    .studio-hayama .stu-bottom-p {
    padding-top: 16px !important;
    padding-bottom: 200px;
    line-height: 1.5em;
    }

    .stu-p {
        padding-bottom: 32px !important;
    }

    .studio-slider1 .slick-list,
    .studio-slider2 .slick-list {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }

    .slick-prev {/*戻る矢印の位置と形状*/
        left: 8%;
    }

    .slick-next {/*次へ矢印の位置と形状*/
        right: 8%;
    }
}

@media(max-width:700px) {
    #studio .slick-slide, #studio .slick-track, #studio .slick-list, #studio .slick-list {
        height: 52px;
    }

    .studio-slider1 .slick-slide,
    .studio-slider2 .slick-slide {
        margin: 0 3px;
        width: 52px !important;
        height: 52px !important;
    }

    .slick-prev {/*戻る矢印の位置と形状*/
        left: 4%;
    }

    .slick-next {/*次へ矢印の位置と形状*/
        right: 4%;
    }

    .studio-slider1, .studio-slider2 {
        width:82%;
         padding-left: 10px;
         padding-right: 10px;
     }
}

.photo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 1055px;
    align-items: center;
    justify-items: center;
    justify-content: center;
    column-gap: 100px;
    row-gap: 10px;
    margin: 0 auto;
  }

  .photographer-item {
    max-width: 236px;
    width: 100%;
    height: 100%;
    box-sizing: border-box; /* ボーダーボックスモデルを採用 */
  }

  .photographer-pic a {
      display: block;
    transform: translateY(50%);
  }

  /* 以下、他のスタイルも適宜追加してください */
  .photographer-pic img {
    width: 100%;
    height: auto;
    display: block; /* 画像の余白問題を解消 */
    padding: 0 15px;
    border-radius: 50%;
  }
  .photographer-flex {
    flex-direction: column;
  }
  .photographer-nameflex {
    align-items: center;
    gap: 20%;
    margin: 0 auto;
    width: 72%;
    max-width: 266px;
    padding-top: 140px;
  }
  .photographer-nameflex a {
    color: #000;
    text-decoration: #000 underline;
    transition: .5s;
  }
  .photographer-nameflex a:hover {
    opacity: .5;
    transition: .5s;
  }
  #photographer {
    background-color: var(--blackColor);
    padding-bottom: 260px;
  }
  .smalltitle {
    font-size: clamp(25px,6.6vw,30px);
    color: var(--whiteColor);
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 33px;
  }
  .smallheading {
    font-size: clamp(18px,6.2vw,22px);
    color: var(--whiteColor);
    max-width: 1200px;
    padding: 0 20px;
    margin: 0 auto;
    padding-top: 20px;
  }
  .photographer-title p {
    font-size: 16px;
  }
  .photo-name {
    background-color: var(--whiteColor);
    height: 259px;
  }
  .photographer-name {
    font-size: 18px;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 40px;
  }
  .photo-view {
    display: initial;
}
.photographer-text {
    color: var(--whiteColor);
    max-width: 1200px;
    margin: 10px auto 0;
    padding: 0 20px 20px;
}


  @media(max-width:1300px) {
    #photographer .slick-track {
        width: 5000px !important;
    }

    #photographer {
        padding-bottom: 0;
    }
    .photo-grid {
        display: none;
    }

    .photographer-item {
        margin-right: 20px;
        margin-left: 20px;
      }

      #photographer .slick-track {
        height: 300px;
      }

      #photographer .slick-list {
        margin-left: 7%;
        margin-right: 7%;
        overflow-x: hidden;
        height: 800px;
      }

      .smalltitle {
        color: rgba(111, 179, 154, 1);
        transform: translateY(-3em);
        padding: 0;
        padding-left: 1em;
      }

      .p-slick-prev,
      .p-slick-next {
        color: #000;
        background-color: #fff;
        padding: 1% 1.2%;
        position: absolute;
        bottom: 10%;
        font-size: 16px;
        font-weight: bold;
        border-radius: 50px;
        display: none !important;
      }

      .p-slick-prev {
        left: 30%;
      }

      .p-slick-next {
        right: 30%;
      }
  }

  @media(max-width:770px) {
    .p-slick-prev, .p-slick-next {
        font-size: 12px;
        padding: 1% 1.5%;
    }

    .photographer-pic img {
        width: 107px;
        height: 107px;
        padding: 0;
    }

    .photographer-nameflex {
        gap: 6px;
        width: 92%;
        padding-top: 65px;
        justify-content: space-between;
        max-width: 125px;
        margin-left: 5px;
        margin-right: 5px;
    }

    .photographer-flex {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 125px;
    }

    .photo-view {
        display: none;
    }

    .photo-name {
        height:178px;
      }

    #photographer .slick-list {
        height: 390px;
    }

    .photographer-title p {
        font-size: 14px;
      }

    .photographer-name {
        font-size: 16px;
        width: 130px;
    }

    .photographer-instagram img {
        width: 12px;
        height: 12px;
    }

    #photographer .slick-slide {
        width: 125px !important;
        height: auto;
    }

    .photographer-item {
        margin-right: 12px;
        margin-left: 12px;
    }
  }


.contact-content dd textarea {
    border: solid 1px var(--blackColor);
    height: 150px;
    width: 100%;
    background: #F2F1F1;
    font-size: 20px;
}
@media(max-width:770px) {
    .contact-content dd textarea {
        width: 73%;
        margin-bottom: 30px;
    }
}

    .check-content .first {
        margin-right: unset;
    }
    .wpcf7-list-item {
        padding: 0 10px;
    }


.modal-span {
    cursor: pointer;
    text-decoration: underline;
}
.modal-outer {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
}
.modal-inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    overflow-y: auto;
    width: 95%;
    max-width: 1000px;
    height: 90%;
    background: #fff;
    padding: 10px 20px;
}
.show {
    display: block;
}
.modal-inner-header {
    margin-bottom: 25px;
}
.close-btn-top {
    cursor: pointer;
    color: #000;
    font-size: 2em;
    position: absolute;
    top: 0;
    right: 5px;
}
.close-btn-bottom {
    margin-bottom: 0;
    width:150px;
    margin:0 auto;
    text-align: center;
}
.modal-inner-container {
    height: 90%;
    margin: auto;
}
@media(max-width:770px) {
    .modal-inner-container {
        width: 100%;
        height: auto;
        margin: auto;
    }
}
.modal-inner-container img {
    width: auto;
    height: 100%;
    margin:  0 auto;
    display: block;
}
@media(max-width:770px) {
    .modal-inner-container img {
        width: 100%;
        height: auto;
        margin: 0 auto;
        display: block;
    }
}