@charset "UTF-8";
/* CSS Document */
.kototoya_lp p,.kototoya_lp li{
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    font-size: 12pt;
    
}



.kototoya_lp h2{
    font-weight: bold;
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    font-size: 25pt;
    margin: 20px auto;
}

.kototoya_lp h3{
    font-weight: bold;
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    font-size: 20pt;
    margin: 20px auto;
}

    .lp_top{
    width: 100%;
    margin:0 auto;
}

.kototoya_lp .top_sub{
    width: 20%;
    margin: 10% auto;
}
.kototoya_lp .menu h3{
  text-align: center;  
}
.kototoya_lp .menu{
    width: 50%;
    margin: 15% auto;
    border: solid 1px #d5d6d5;
    padding: 5%;
    line-height: 2.5rem;
}

.kototoya_lp .contents_img{
    width: 60%;
    margin: 10% auto;
}

.kototoya_lp .contents_text{
    width: 60%;
    margin: 0 auto;
}

 .kototoya_lp .contents_item{
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 60%;
    margin: 10% auto;
    grid-gap: 10%;
}

 .kototoya_lp .item_text{
    margin-top: 15%;
}

.kototoya_lp .item_link{
    margin-top: 10%;
    color:  #959596;
    font-size: 12pt;
}
.kototoya_lp .item_link p{
    line-height: 1.5rem;
}


.kototoya_lp .contents_slide{
    margin: 30px auto;
}
/* ----------------------*
 * コンテナー
 * ----------------------*/
 .kototoya_lp .container {
    --item-width: 1100px;
    --item-height: 634px;
    width: var(--item-width);
    position: relative;
    margin-bottom: 40px;
    display: grid;
    grid-template-areas:
        "item item item"
        "left markers right";
    grid-template-columns: 1fr 2fr 1fr;
    row-gap: 16px;
}

/* ----------------------*
 * カルーセル
 * ----------------------*/
.kototoya_lp .contents_slide .carousel {
    width: 100%;
    display: grid;
    grid-auto-flow: column;
    grid-area: item;
    gap: 120px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-snap-stop: always;
    scroll-behavior: smooth;
    scroll-marker-group: after;
    scrollbar-width: none;
}

  /* 前へ・次へボタン */
.kototoya_lp .contents_slide .carousel{
        &::scroll-marker-group {
        display: flex;
        justify-content: center;
        gap: 16px;
        grid-area: markers;
        align-items: center;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
    }
        &::scroll-button(*):disabled {
        color: darkgray;
        border: 1px solid lightgray;
             }
    &::scroll-button(*) {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: none;
        background-color: #fff;
        padding: 0;
        color: black;
        border: 1px solid black;
        transition: background-color 0.2s, color 0.2s;
    }
  /* 前へボタン（左） */
 &::scroll-button(left) {
    /* 表示内容 / 代替テキスト */
    content: "◀" / "前へ";
    grid-area: left;
    justify-self: end;
  }

  /* 次へボタン（右） */
 &::scroll-button(right) {
    /* 表示内容 / 代替テキスト */
    content: "▶" / "次へ";
    grid-area: right;
    }
}

.kototoya_lp .contents_slide .slide_img {
    width: var(--item-width);
    min-width: var(--item-width);
    height: var(--item-height);
    scroll-snap-align: center;
}

.kototoya_lp .contents_slide .slide_img {
      &::scroll-marker {
        content: "";
        display: block;
        width: 16px;
        height: 16px;
        background-color: lightgray;
        border-radius: 50%;
        transition: background-color 0.2s;
        flex-shrink: 0;
    }

  /* インジケーターのカレントスタイル */
  &::scroll-marker:target-current {
    background-color: black;
  }
}


.kototoya_lp .shop_btn{
    display: block;
    width: 25%;
    margin: 15% auto;
}
.kototoya_lp .shop_btn div{
    margin: 5% auto;
}
.kototoya_lp .shop_btn a:hover{
    opacity: 0.5;
}


@media screen and (max-width:1500px) {


}


@media screen and (max-width:767px) {
    
    
    .kototoya_lp p,.kototoya_lp li{
    font-size: 10pt;
    
}
      .kototoya_lp li{
    margin-bottom: 15px;
    
    }
    
    .kototoya_lp h1{
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    font-size: 25pt;
    font-weight: bold;   
      width: 95%;
        margin: auto;
        display: block;
}
    .kototoya_lp h2 {
    font-size: 16pt;
}
    .kototoya_lp .item_link {
    font-size: 10pt;
        margin: 0 auto;

}
    .lp_top{
    margin-top: 10%;
}
    
    .kototoya_lp .top_sub {
    width: 60%;
    margin: 15% auto;
}
    .kototoya_lp .menu {
    width: 90%;
    line-height: 2rem;

}
    .kototoya_lp .contents_text {
    width: 90%;
    margin: 0 auto;
}
    .kototoya_lp .contents_img {
    width: 100%;
    margin: 10% auto;
}
    
.kototoya_lp .contents_item {
    display: block;
    width: 90%;
    margin: 10% auto;
}
     .kototoya_lp .item_text{
    display: grid;
    grid-template-columns: 20% 80%;
    width: 90%;
    margin: 10% auto;
    grid-gap: 20px;
}

.kototoya_lp .shop_btn{
    display: block;
    width: 65%;
    margin: 15% auto;
}

    
    
}