@charset "utf-8";
:root{
    --gray2: rgb(242, 242, 242); /* #f2f2f2 */
    --ZenOldMincho: "Zen Old Mincho","Hiragino Mincho ProN","Noto Serif JP","Yu Mincho",serif;
    --ZenKakuGothicNew: "Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif;
}
#card .card-inner .item h3{
	font-size:var(--fs30);
}
#concept .text p,.btn-pc,.btn-sp,#card .card-inner .item p,#access .item .text p,.address-inner{
	font-family: var(--ZenKakuGothicNew);
}
html{
    font-size: 20px;
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-h);
}
.wrapper *,.wrapper *::before,.wrapper *::after{
    margin: 0;
    box-sizing: border-box;
    transition: all 0.3s;
}
body{
/*    width: 100%;
    max-width: 2560px;
    margin: 0 auto;
    height: auto;
    background: var(--white);
    color: var(--black);
    font-family: var(--ZenKakuGothicNew);
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: 0.04rem;
    text-align: left;
    overflow-x: hidden;
    overflow-y: auto; */
}
a{
    display: block;
    text-decoration: none;
}
a:hover{
    cursor: pointer;
}
.top-img a:hover{
	background: var(--white);
}
img{
/*    display: block;
    width: 100%;
    height: auto;*/
}
.red{
    color: var(--red);
}
.gray{
    color: var(--gray);
}

/* ▼ ファーストビュー */
#firstview{
    width: 100%;
    margin-bottom: 5rem;
    /* ↓ PCカンプのヘッダー高さ(124.43px) */
    padding-top: 6rem;

    h1{
        /*position: absolute;
        width: 0.05rem;
        height: 0.05rem;
        margin: -0.05rem;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;*/
    }

    .firstview-inner{
        width: 96%;
        aspect-ratio: 968/373;
        margin:  0 auto;
        display: flex;
        justify-content: flex-start;
        gap: 0.62%;

        .mainvisual-l{
            width: calc((100% - 0.62%) / 2);
            aspect-ratio: 481/373;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 0.62%;

            .top{
                width: 100%;
                aspect-ratio: 481/182;
                display: flex;
                justify-content: space-between;

                .top-img{
                    width: 49.06%;
                    aspect-ratio: 236/182;

                    a{
                        display: block;
                        position: relative;
                        picture,
                        img{
                            display: block;
                            width: 100%;
                            height: 100%;
                        }
                        &::after{
                            content: "";
                            position: absolute;
                            inset: 0;
                            background: rgba(255,255,255,.4); /* 白半透明 */
                            opacity: 0;
                            transition: opacity .3s ease;
                            pointer-events: none;
                        }
                        &:hover::after{
                            opacity: 1;
                        }
                    }
                }
            }
            .bottom{
                width: 100%;
                aspect-ratio: 481/182;
            }
        }
        .mainvisual-r{
            width: calc((100% - 0.62%) / 2);
            aspect-ratio: 481/373;
        }
    }
}

main{
    width: 100%;

    #concept{
        width: min(1300px,80%);
        margin: 0 auto 10.5rem;
        display: flex;
        justify-content: space-between;
        
        .text{
            width: 50%;
            height: 100%;
            padding-right: 5rem;

            .red-rabel{
                width: fit-content;
                padding: 0 1.75rem 0 1.25rem;
                aspect-ratio: 499/86;
                background: url(./img/honten1f/rabel-red.webp) center right/cover no-repeat;
                font-size: 1.6rem;
                font-family: var(--ZenOldMincho);
                color: var(--white);
                font-weight: 700;
                line-height: 2.4rem;
                letter-spacing: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                white-space: nowrap;
                margin-bottom: 1.5rem;
            }
            
            h2{
                font-size: 2.2rem;
                font-family: var(--ZenOldMincho);
                font-weight: 700;
                letter-spacing: 0;
                line-height: 1.2;
                margin-bottom: 2.5rem;
                white-space: nowrap;
                br{display: none;}
            }
            
            h3{
                font-size: 1.8rem;
                font-weight: 700;
                font-family: var(--ZenOldMincho);
                margin-bottom: 1.75rem;
                white-space: nowrap;
            }
            p{
                font-size: 1rem;
                text-align: justify;
                margin-bottom: 2.5rem;
            }
            
            .btn-sp{display: none;}
            .btn-pc{
                width: fit-content;
                font-size: 1.2rem;
                line-height: 3.5rem;
                color: var(--white);
                text-align: center;
                text-decoration: none;
                white-space: nowrap;
                background: var(--black);
                border-radius: 35px;
            }
            .btn-pc:hover,.btn-sp:hover{
                background: var(--hover-red);
            }
        }
        .img{
            width: 50%;
            aspect-ratio: 339/212;
            align-self: end;
        }
    }

    #card{
        width: min(1300px,80%);
        margin: 0 auto 9.38rem;

        .osusume{
            margin: 0 auto 3.44rem;
        }

        .card-inner{
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            align-items: stretch;
            gap: 4%;

            .item{
				width: 48%;
                max-width: 620px;
                background: var(--gray2);
                padding: 2.5rem 2.75rem;
                display: flex;
                flex-direction: column;
				margin-bottom: 3rem;


                h4{
                    font-size: 1.4rem;
                    /*font-family: var(--ZenOldMincho);*/
                    font-weight: 700;
                }
                
                h3{
                    /*font-size: 1.504rem;*/
                    font-family: var(--ZenOldMincho);
                    font-weight: 700;
                    line-height: 1.5;
                    margin-bottom: 1.25rem;
                }

                img{
                    aspect-ratio: 539/346;
                    margin: 0 auto;
                }

                p{
                    font-size: 1rem;
                    text-align: left;
                    padding: 1.25rem 0 0;
                    letter-spacing: 0.02em;
                }
            }
        }
    }

    #access{
        width: min(1300px,80%);
        margin: 0 auto 9.88rem;
        font-style: normal;
        text-align: center;

        .access-inner{
            h3{
                font-size: 1.8rem;
                font-family: var(--ZenOldMincho);
                font-weight: 700;
            }
            h4{
                font-size: 1.2rem;
                /*font-family: var(--ZenOldMincho);*/
                font-weight: 700;
                margin-bottom: 4.375rem;
            }
            .map{
                width: 100%; 
                height: 32rem;
                margin-bottom: 4.38rem;
    
                iframe{
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .item{
            border: 2px solid var(--gray);
            border-radius: 20px;
            padding: 1.88rem;
            text-align: left;
            display: flex;
            justify-content: space-between;

            .text{
                width: 52.31%;

                h4{
                    font-size: 1.4rem;
                    /*font-family: var(--ZenOldMincho);*/
                    font-weight: 700;
                    letter-spacing: 0;
                }
                
                h3{
                    font-size: 1.504rem;
                    font-family: var(--ZenOldMincho);
                    font-weight: 700;
                    line-height: 1.5;
                    letter-spacing: 0;
                    margin-bottom: 1.25rem;
                }

                .border{
                    width: 100%;
                    height: 2px;
                    background: var(--gray);
                }
                p{
                    font-size: 1rem;
                    text-align: left;
                    padding: 2rem 0 0;
                    letter-spacing: 0.06rem;
                }
            }
            picture{
                width: 38.62%;
                img{
                    height: 100%;
                    object-fit: cover; 
					width: 100%;
                }
            }
            /* StreetViewの枠 */
            .sv-wrap{
                width: 38.62%;
                aspect-ratio: 538/346;
                overflow:hidden;

                iframe{
                    display:block;
                    width:100%;
                    height:100%;
                    /* width:114%;
                    height:138%; */
                    transform-origin:center;
                    border:0;
                }
            }
        }

        .arrow-down{
            height: 4.38rem;
            display: flex;
            justify-content: center;
            align-items: center;
            img{
                width: 64px;
                height: auto;
                aspect-ratio: 96/44;
            }
        }
    }

    #shop-info{
        text-align: center;
        background: var(--gray2);
        padding-bottom: 11.78rem;

        hgroup{
            height: 19.13rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            h3{
                font-size: 1.8rem;
                font-family: var(--ZenOldMincho);
                font-weight: 700;
            }
            h4{
                font-size: 1.2rem;
                font-family: var(--ZenOldMincho);
                font-weight: 700;
            }
        }

        address{
            width: min(1300px,80%);
            margin: 0 auto;
            background: var(--white);
            padding-bottom: 4rem;

            h2{
                height: 16.38rem;
                display: flex;
                justify-content: center;
                align-items: center;

                picture{
                    width: max(154.38px,26.54%);
                    aspect-ratio: 345/139;
					display:flex;
                }
            }

            .address-inner{
                width: 84.85%;
                margin:  0 auto;
                position: relative;

                .gallery{
                    margin-bottom: 2.13rem;
                    position: relative;
                    overflow: hidden;

                    /* JSで生成する横並びトラック */
                    .gallery-track{
                        display: flex;
                        width: 100%;
                        height: 100%;
                        transform: translate3d(0,0,0);
                        transition: transform 0.6s ease;
                        will-change: transform;
                    }

                    picture{
                        flex: 0 0 100%;
                        display: block;
                        img{
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            display: block;
                        }
                    }

                    .btn-l{
                        width: 4.06%;
                        height: 100%;
                        background: rgba(0,0,0,0.5);
                        border: none;
                        position: absolute;
                        top: 0;
                        left: 0;
                        z-index: 5;
                        cursor: pointer;
                        img{
                            width: 50%;
                            margin: 0 auto;
                        }
                    }

                    .btn-r{
                        width: 4.06%;
                        height: 100%;
                        background: rgba(0,0,0,0.5);
                        border: none;
                        position: absolute;
                        top: 0;
                        left: calc(100% - 4.06%);
                        z-index: 5;
                        cursor: pointer;
                        img{
                            width: 50%;
                            margin: 0 auto;
                        }
                    }
                }

                dl{
                    --row-h: 6.25rem;  /* 基準高さ */
                    min-height: var(--row-h);
                    font-size: 1.104rem;
                    text-align: left;
                    font-style: normal;
                    display: flex;
                    justify-content: flex-start;
                    align-items: stretch; /* dt/dd高さ同期 */

                    dt{
                        width: max(146px,19.76%);
                        margin-right: 1.31rem;
                        font-weight: 700;
                        line-height: 1.4;
                        white-space: nowrap;
                        border-bottom: 2px solid var(--hover-red);
                        padding-top: calc((var(--row-h) - 1.4em) / 2);
                        padding-bottom: calc((var(--row-h) - 1.4em) / 2);
                    }

                    dd{
                        flex: 1;
                        line-height: 1.4;
                        border-bottom: 2px solid var(--gray);
                        padding-top: calc((var(--row-h) - 1.4em) / 2);
                        padding-bottom: calc((var(--row-h) - 1.4em) / 2);
                    }
                }
            }
        }
    }
}

@media screen and (max-width:1441px){
    main{
        #concept{
            .text{
                padding-right: 2rem;
            }
        }
    }
}
@media screen and (max-width:1025px){
    #firstview{
        padding-top: 0.5rem;
        margin-bottom: 4.9rem;

        .firstview-inner{
            width: 97.6%;
            aspect-ratio: auto;
            flex-direction: column-reverse;
            gap: 0.65%;

            .mainvisual-l{
                width:100%;
                aspect-ratio: auto;
                
                .top{
                    width: 100%;
                    aspect-ratio: auto;
                    margin-bottom: 0.5rem;
                    
                    .top-img{
                        width: 49.07%;
                    }
                }
                .bottom{
                    aspect-ratio: auto;
                }
            }
            .mainvisual-r{
                width: 100%;
                aspect-ratio: auto;
                margin-bottom: 0.5rem;
            }
        }
    }

    main{
        #concept{
            width: 100%;
            flex-direction: column;
            margin: 0 auto 15%;

            .text{
                width: 80%;
                margin: 0 auto;
                padding-right: 0;

                .btn-pc{display: none;}
                .btn-sp{
                    display: block;
                    width: 100%;
                    margin: 0 auto 3.5rem;
                    background: url(./img/honten1f/btn-black-sp.webp) center/cover no-repeat;
                    line-height: 4rem;
                    color: var(--white);
                    text-align: center;
                    text-decoration: none;
                    white-space: nowrap;
                    border-radius: 35px;
                }
            }
            .img{
                width: 100%;
				text-align: center;
				aspect-ratio:unset;
            }
			.shop-card-btn{
				width: min(300px, 100%);
    			margin: auto auto 7.5%;
			}
        }

        #card{
            margin: 0 auto 10rem;
            .card-inner{
                gap: 4rem;
				.item{
					width:100%;
					margin-bottom: unset;
				}
            }
        }

        #access{
            width: 100%;
            margin: 0 auto 5rem;
            .access-inner{
                h4{
                    margin-bottom: 4rem;
                }
                .map{
                    height: auto;
                    aspect-ratio: 4/3;
                    margin-bottom: 5rem;
                }
            }

            .item{
                width: 80%;
                margin: 0 auto;
                flex-direction: column;

                .text{
                    width: 100%;

                    p{
                        margin-bottom: 2rem;
                    }
                }

                .sv-wrap,picture{
                    width: 100%;
                    aspect-ratio: 354/204;
                }
            }
            .arrow-down{
                height: 4.9rem;
                img{
                    width: max(42px,9.37%);
                    height: auto;
                    aspect-ratio: 96/44;
                }
            }
        }

        #shop-info{
            hgroup{
                height: 16.15rem;
            }
            address{
                h2{
                    height: 15.5rem;
                }
                .address-inner{
                    dl{
                        flex-direction: column;
                        dt{
                            border: none;
                            padding-top: 1rem;
                            padding-bottom: 0;
                        }
                        dd{
                            padding-top: 0.75rem;
                            padding-bottom: 1rem;
                            border-bottom: none;
                            background: linear-gradient(
                                to right,
                                var(--red) 0 20%,
                                var(--gray) 20% 100%
                            );
                            background-repeat: no-repeat;
                            background-size: 100% 1px;
                            background-position: bottom;
                            }
                        }
                    }
                }
            }
        }
    }

@media screen and (max-width:912px){
    main{
        #shop-info{
            address{
                h2{
                    height: 8.38rem;
                }
                .address-inner{
                    .gallery{
                        .btn-l{
                            width: 22px;
                        }
                        .btn-r{
                            width: 22px;
                            left: calc(100% - 22px);
                        }
                    }    
                    dl{
                        dt,dd{font-size: 1rem;}
                    }
                }
            }
        }
    }         
}
@media screen and (max-width:767px){
	#card h3 br{display:none;}
}
@media screen and (max-width:690px){
    main #concept .text .btn-sp{
            background: url(https://202311061738m56444nv.conohawing.com/wp5/wp-content/themes/sugoi-simple/img/top/tenpo-syousai.webp) center/cover no-repeat;
        }
	
}
@media screen and (max-width:631px){
    html{
        font-size: clamp(16px, calc(3.0769vw + 0.6155px), 20px);
    }
}
@media screen and (max-width:500px){
    main{
        #concept{
            flex-direction: column;
            .text{
                padding-right: 0;

                .red-rabel{
                    font-size: 1.41rem;
                }

                h2{
                    font-size: 2rem;
                    br{display: block;}
                }
                h3{
                    font-size: 1.5rem;
                    letter-spacing: 0;
                }
                .btn-pc{display: none;}
                .btn-sp{
                    font-size: 1.08rem;
                    display: block;
                    width: 100%;
                    margin: 0 auto 4rem;
                    font-size: 1.2rem;
                    line-height: 4rem;
                    color: var(--white);
                    text-align: center;
                    text-decoration: none;
                    white-space: nowrap;
                    border-radius: 35px;
                }
            }
            .img{
                width: 100%;
            }
        }

        #card{
            .card-inner{
                .item{
                    padding: 7.08% 7.08% 10.48%;
                    h4{
                        font-size: 1.25rem;
                    }
                }
            }
        }
    }
}
@media screen and (max-width:441px){
    main{
        #concept,#card{
            margin: 0 auto 5rem;
        }
        #access .access-inner .map{
            aspect-ratio: 1025/778;
        }
		#access .item{width:90%;}
        #shop-info{
            padding-bottom: 2.56rem;
            hgroup{
                height: 8.38rem;
            }
            address{
				width:90%;
                h2{
                    picture {
                        width: 43.86%;
                    }
                }
            }
        }
    }
}
.shop-card-label{margin-bottom:5%;}