#header.home_logo h1 { max-width: 325px;}
#header.home_logo h1 { top:20px;}
#header.home_logo h1 a {
    display: block;
    width:100%; height:auto; aspect-ratio: 325/ 191;
    display: block;
    text-indent: -9999px;
    background: url("../images/logo.png") no-repeat center center;
    background-size: 100% auto;
}
@media only screen and (max-width:1180px){
    #header.home_logo h1 { width:180px;}
    #header.home_logo h1 a { background: url("../images/logo3.png") no-repeat center center; }
}
@media only screen and (max-width:1000px){
    #header.home_logo h1 { position: static; top: 0; left: 0; width:400px; max-width:inherit; padding: 12px 10px 0;}
    #header.home_logo h1 a {
        display: block;
        width:100%; height:auto; aspect-ratio: 988 / 138;
        display: block;
        text-indent: -9999px;
        background: url("../images/logo2.png") no-repeat center center;
        background-size: 100% auto;
    }
}
@media only screen and (max-width:468px){
    #header.home_logo h1 { width:calc(100% - 70px - 10px);}
}



#toppage {
    background: url("../images/bg1.png") no-repeat center 26%;
}
@media only screen and (max-width:820px){
    #toppage {
        background-position: center 18%;
        background-size: 120% auto;
    }
}
@media only screen and (max-width:468px){
    #toppage {
        background: url("../images/bg1_sp.png") no-repeat center 10%;
        background-size: 100% auto;
    }
}



/* =========================================
 Mainimg
===========================================*/
#toppage .mainimg { position: relative;}
#toppage .mainimg h2 {
    position: absolute; top: 45%; left:0; right: 0; z-index: 99;
    margin: auto; width:80%;
}
#toppage .mainimg h2 span {
    display: block;
    width: 100%; height: auto; max-width: 566px; aspect-ratio: 566 / 208;
    text-indent: -9999px;
    background: url("../images/catch.svg") no-repeat left center;
    background-size: 100% auto !important;
}
#toppage .mainimg .main_slide {
    margin-left: 22%;
    width:78%;
}
#toppage .mainimg .main_slide img {
    width: 100%; height:720px;
    object-fit: cover;
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
}
@media only screen and (max-width:1500px){
    #toppage .mainimg h2 { width: 90%; max-width: 1200px;}

}
@media only screen and (max-width:820px){
    #toppage .mainimg h2 span { width: 65%;}
    #toppage .mainimg .main_slide img {
        height:auto; aspect-ratio: 1170 / 820;
        border-top-left-radius: 80px;
        border-bottom-left-radius: 80px;
    }
}
@media only screen and (max-width:468px){
    #toppage .mainimg h2 { top: inherit; bottom: -5%;}
    #toppage .mainimg h2 span { width:100%;}
    #toppage .mainimg h2 span {
        max-width: 280px; aspect-ratio: 411 / 199;
        background: url("../images/catch_sp.svg") no-repeat left center;
    }
    #toppage .mainimg .main_slide { margin-left: 0; width:100%;}
    #toppage .mainimg .main_slide img {
        aspect-ratio: 1170 / 1170;
        border-top-left-radius: 60px;
        border-bottom-left-radius: 60px;
    }
}



/* =========================================
 About
===========================================*/
#toppage .about .inner { display:flex; flex-direction: column; gap:150px;}
#toppage .about .box { display:flex; gap:30px 10%;}
#toppage .about .box .photo { width: 52%; font-size:112.5%; }
#toppage .about .box .cont {
    position: relative;
    display: flex; flex-direction: column; gap:40px;
    padding-top: 70px;
    width:calc( 100% - 52% - 10%);
}
#toppage .about .box.row_re { flex-direction: row-reverse;}
#toppage .about .box.row_re .cont::before {
    display:block; clear: both; content:"";
    position: absolute; right: -70px; bottom:-50px; z-index: 9;
    width:100%; height:auto; max-width:210px; aspect-ratio: 420 / 320;
    background: url("../images/illust/illust01.png") no-repeat;
    background-size: 100% auto;
}
#toppage .about .box:nth-child(2)  { gap:30px 0;}
#toppage .about .box:nth-child(2) .photo { position: relative; left: -10%; width: 62%;}
#toppage .about .box:nth-child(2) .cont { width:calc(100% - 52%);}
@media only screen and (max-width:1020px){
    #toppage .about .box.row_re .cont::before { right: -120px; bottom:-80px; max-width:190px;}
}
@media only screen and (max-width:820px){
    #toppage .about .inner { gap:80px;}
    #toppage .about .box { gap:30px 5%;}
    #toppage .about .box .photo { width: 50%;}
    #toppage .about .box .cont { gap:30px; padding-top:0; width:calc(100% - 50% - 5%);}
    #toppage .about .box.row_re .cont::before {  right: -140px; bottom: -40px;}
    #toppage .about .box:nth-child(2) .photo { left: -5%; width: 55%;}
    #toppage .about .box:nth-child(2) .cont { width:calc(100% - 50%);}
}
@media only screen and (max-width:468px){
    #toppage .about .inner { gap:80px;}
    #toppage .about .box { flex-direction: column !important;}
    #toppage .about .box .photo,
    #toppage .about .box .cont { width:100% !important;;}
    #toppage .about .box .photo { position: static !important;}
    #toppage .about .box .cont { gap:20px;}
    #toppage .about .box h3 { text-align: center;}
    #toppage .about .box .btn { margin: 15px auto 0;}
    #toppage .about .box.row_re .cont::before { right: -20px; bottom: -120px; max-width:160px;}
}



/* =========================================
 Goods
===========================================*/
#toppage .goods { position: relative; margin: 90px auto 0;}
#toppage .goods .inner { position: relative; padding:100px 0; max-width: none;}
#toppage .goods::before {
    display:block; clear: both; content:"";
    position: absolute; top:0; left: 0; right: 0;
    margin:0 50px;
    width:calc(100% - 100px); height: 100%;;
    background:#EDDEB6;
    border-radius: 70px;
}
#toppage .goods h3 {
    position:absolute; top:-30px; left: 0; right: 0;
    margin: auto;
    width: 100%; max-width: 400px;
    text-align: center;
    color:#533D33;
    -webkit-text-stroke: 10px #fff;
    paint-order: stroke;
}
#toppage .goods h3::before,
#toppage .goods h3::after {
    display:block; clear: both; content:"";
    position: absolute; bottom:-20px; z-index: 9;
    width:100%; height:auto;
    background-size: 100% auto !important;
}
#toppage .goods h3::before {
    left:-130px; 
     max-width:210px; aspect-ratio: 420 / 320;
    background: url("../images/illust/illust02.png") no-repeat;
}
#toppage .goods h3::after {
    right:-120px;
    max-width:110px; aspect-ratio: 210 / 320;
    background: url("../images/illust/illust03.png") no-repeat;
}
#toppage .goods .goods_list { margin:0 auto; width:100%; max-width: 1300px;}
#toppage .goods .goods_list li { margin: 0 15px;}
#toppage .goods .goods_list img { max-width:100%; height:auto; border-radius: 30px;}
#toppage .goods .goods_list .slick-list { overflow:visible;}
#toppage .goods .btn { position:absolute; bottom:-30px; left: 0; right: 0; margin: auto;}
@media only screen and (max-width:820px){
    #toppage .goods::before { margin:0 40px; width:calc(100% - 80px); border-radius: 50px;}
    #toppage .goods .inner { padding:80px 0;}
    #toppage .goods h3::before { left:-60px; max-width:190px;}
    #toppage .goods h3::after { right:-50px; max-width:100px;}
    #toppage .goods .goods_list li { margin: 0 10px;}
    #toppage .goods .goods_list img { border-radius:20px;}
}
@media only screen and (max-width:468px){
    #toppage .goods .inner { padding:60px 0;}
    #toppage .goods h3::before { left:40px; bottom:20px; max-width:160px;}
    #toppage .goods h3::after { right:40px; bottom:20px; max-width:80px;}
    #toppage .goods::before { margin:0; width:100%; border-radius: 30px;}
    #toppage .goods .goods_list li { margin: 0 5px;}
    #toppage .goods .goods_list img { border-radius:15px;}
}



/* =========================================
 News
===========================================*/
#toppage .news { padding-top: 100px; background:url("../images/bg2.png") no-repeat center top;}
#toppage .news .news_list { margin: auto; max-width: 800px;}
#toppage .news h3 {
    position: relative;
    margin: 0 auto 40px;
    width: 80%; max-width: 322px;
    text-align: center;
    background: url("../images/fukidasi01.png") no-repeat center bottom;
    background-size:100% auto;
}
#toppage .news h3::before {
    display:block; clear: both; content:"";
    position: absolute; top: -120px; left: 0; right: 0; z-index: 9;
    margin: auto;
    width:100%; height: auto; max-width:180px; aspect-ratio: 420 / 320;
    background: url("../images/illust/illust04.png") no-repeat;
    background-size: 100% auto;
}
@media only screen and (max-width:820px){
    #toppage .news { background-size: 120% auto;}
}
@media only screen and (max-width:468px){
    #toppage .news h3::before { top: -100px; max-width:160px;}
}