@charset "utf-8";

#pagetitle {
        display:none;
}

section {
        .wrap {
                .contents {
                        h2 {
                                font-size:3.0rem;
                                &::before {
                                        content:'';
                                        display:grid;
                                        width:4em;
                                        height:2.4em;
                                        background:url(../img/rice/rice_ttl1.png) no-repeat center center/contain;
                                }
                        }
                }
        }
}

#rice {
        .wrap {
                .mv {
                        position:relative;
                        height:400px;
                        background-color:#FFFFFF;
                        margin-bottom:90px;
                        .contents {
                                position:relative;
                                z-index:1;
                                padding-top:30px;
                                h1 {
                                        max-width:600px;
                                }
                        }
                        & > img {
                                display:block;
                                position:absolute;
                                left:0;
                                top:0;
                                width:100%;
                                height:100%;
                                object-fit:cover;
                                z-index:0;
                                opacity:.6;
                        }
                }
                .contents {
                        .contents_inner {
                                display:grid;
                                grid-template-columns:40% 1fr;
                                align-items:start;
                                grid-gap:50px;
                                .smenu {
                                        display:grid;
                                        grid-template-columns:repeat(2,1fr);
                                        grid-gap:30px;
                                        a {
                                                font-size:1.4rem;
                                                display:grid;
                                                align-items:center;
                                                justify-content:center;
                                                height:3.4em;
                                                width:100%;
                                                border:2px solid #DA0B14;
                                                border-radius:4px;
                                        }
                                }
                        }
                }
        }
}

#rice1 {
        .wrap {
                padding-top:90px;
                .contents {
                        background:url(../img/rice/rice_img2.png) no-repeat center center/contain;
                        aspect-ratio:10.7/6;
                        display:grid;
                        align-items:center;
                        text-align:center;
                        position:relative;
                        .contents_inner {
                                width:84%;
                                margin:0 auto;
                                position:relative;
                                z-index:1;
                                h2 {
                                        &::before {
                                                content:none;
                                        }
                                }
                        }
                        &::before {
                                content:'';
                                display: block;
                                width: 100%;
                                height: 100%;
                                position: absolute;
                                left: 0;
                                top:0;
                                background-color: rgba(255,255,255,.15);
                                z-index: 0;
                        }
                }
        }
}

#rice2 {
        .wrap {
                padding-top:120px;
                overflow:hidden;
                .contents {
                        .contents_inner {
                                display:grid;
                                grid-template-columns:45% 1fr;
                                grid-gap:50px;
                                align-items:center;
                                .img {
                                        margin-right:-30%;
                                        img {
                                                display:block;
                                                border-radius:120px;
                                        }
                                }
                        }
                }
        }
}

#rice3 {
        .wrap {
                padding-top:120px;
                .contents {
                        margin-bottom:50px;
                        p {
                                text-align:center;
                        }
                }
                .imgs {
                        overflow:hidden;
                        .rice_slider {
                                margin-bottom:0;
                                .img {
                                        padding:0 20px;
                                        img {
                                                display:block;
                                                width:280px;
                                        }
                                }
                        }
                }
        }
}

#rice4 {
        .wrap {
                padding-top:120px;
                padding-bottom:90px;
                overflow:hidden;
                .contents {
                        .contents_inner {
                                display:grid;
                                grid-template-columns:1fr 45%;
                                grid-gap:50px;
                                align-items:center;
                                .detail {
                                        order:1;
                                }
                                .img {
                                        margin-left:-30%;
                                        img {
                                                display:block;
                                                border-radius:120px;
                                        }
                                }
                        }
                }
        }
}

#rice8 {
        .wrap {
                padding:90px 0;
                background:url(../img/rice/gankomai_mv.jpg) no-repeat center center/cover;
                position:relative;
                &::before {
                        content:'';
                        display:block;
                        width:100%;
                        height:100%;
                        position:absolute;
                        top:0;
                        left:0;
                        z-index:0;
                        background-color:rgba(255,255,255,.5);
                }
                .contents {
                        position:relative;
                        z-index:1;
                        h2 {
                                display:grid;
                                grid-template-columns:repeat(2,auto);
                                align-items:end;
                                justify-content:center;
                                margin-bottom:2em;
                                &::before {
                                        order:1;
                                        width: 5em;
                                        height:3.6em;
                                }
                        }
                        .contents_inner {
                                display:grid;
                                grid-template-columns:repeat(3,1fr);
                                max-width:1000px;
                                margin:0 auto;
                                grid-gap:50px;
                                .btn {
                                        width:100%;
                                        &::after {
                                                content:none;
                                        }
                                        border:1px solid #DA0B14;
                                        background-color:#DA0B14;
                                        color:#FFFFFF;
                                        font-size:2.0rem;
                                }
                        }
                }
        }
}

#rice5 {
        .wrap {
                padding-top:120px;
                overflow:hidden;
                .contents {
                        .contents_inner {
                                display:grid;
                                grid-template-columns:repeat(3,1fr);
                                grid-gap:50px;
                                padding-top:1em;
                                .item {
                                        position:relative;
                                        &:not(:nth-child(3n)) {
                                                &::after {
                                                        content:'';
                                                        display:block;
                                                        width:18px;
                                                        height:45px;
                                                        background-color:#DA0B14;
                                                        clip-path:polygon(0 0,100% 50%,0 100%);
                                                        position:absolute;
                                                        right:-34px;
                                                        top:50%;
                                                        transform:translateY(-50%);
                                                }
                                        }
                                        .img {
                                                position:relative;
                                                img {
                                                        display:block;
                                                        width:100%;
                                                        aspect-ratio:2/1;
                                                        object-fit:cover;
                                                        border-radius:30px;
                                                }
                                                span {
                                                        font-size:2.8rem;
                                                        color:#DA0B14;
                                                        font-weight:600;
                                                        position:absolute;
                                                        left:0;
                                                        top:-.66em;
                                                }
                                        }
                                        h3 {
                                                font-size:2.0rem;
                                                padding:.75em 0 .5em;
                                                line-height:1.5;
                                        }
                                }
                        }
                }
        }
}

#rice6 {
        .wrap {
                padding-top:90px;
                overflow:hidden;
                .contents {
                        .contents_inner {
                                display:grid;
                                grid-template-columns:1fr 47.5%;
                                grid-gap:50px;
                                align-items:center;
                                .img {
                                        margin-right:-30%;
                                        img {
                                                display:block;
                                                width:100%;
                                                aspect-ratio:2.5/1;
                                                border-radius:100px;
                                                object-fit:cover;
                                        }
                                }
                                .detail {
                                        h3 {
                                                font-size:3.0rem;
                                                margin-bottom:.75em;
                                                span {
                                                        margin-right:1em;
                                                }
                                        }
                                }
                                &:nth-child(even){
                                        grid-template-columns:47.5% 1fr;
                                        .detail {
                                                order:2;
                                        }
                                        .img {
                                                margin-right:0;
                                                margin-left:-30%;
                                        }
                                }
                                &:not(:last-child) {
                                        margin-bottom:30px;
                                }
                        }
                }
        }
}

#rice7 {
        .wrap {
                padding-top:150px;
                .contents {
                        max-width:940px;
                        background:url(../img/rice/rice_img19.png) no-repeat center center/contain;
                        aspect-ratio:9.4/6.2;
                        display:grid;
                        align-content:center;
                        text-align:center;
                        position:relative;
                        h2 {
                                margin-bottom:2em;
                                position:relative;
                                z-index:1;
                                &::before {
                                        content:none;
                                }
                        }
                        p {
                                font-weight:600;
                                margin-bottom:5em;
                                position:relative;
                                z-index:1;
                        }
                        .contact {
                                display:grid;
                                grid-template-columns:repeat(2,auto);
                                align-items:center;
                                justify-content:center;
                                grid-gap:100px;
                                position:relative;
                                z-index:1;
                                a {
                                        font-size:3.0rem;
                                        font-weight:600;
                                }
                        }
                        &::before {
                                content:'';
                                display: block;
                                width: 100%;
                                height: 100%;
                                position: absolute;
                                left: 0;
                                top:0;
                                background-color: rgba(255,255,255,.5);
                                z-index: 0;
                        }
                }
        }
}

@media ( hover:hover ) {
        
        #rice8 {
                .wrap {
                        .contents {
                                .contents_inner {
                                        .btn {
                                                &:hover {
                                                        background-color:#FFFFFF;
                                                        color:#DA0B14;
                                                }
                                        }
                                }
                        }
                }
        }
        
}

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

}

@media screen and (max-width:1024px){
        
        section {
                .wrap {
                        .contents {
                                h2 {
                                        font-size:2.6rem;
                                }
                        }
                }
        }
        
        #rice {
                .wrap {
                        .contents {
                                .contents_inner {
                                        grid-gap:30px;
                                        .smenu {
                                                grid-gap:20px;
                                        }
                                }
                        }
                }
        }
        
        #rice1 {
                .wrap {
                        .contents {
                                width:100%;
                                background:url(../img/rice/rice_img2.png) no-repeat center center/auto 100%;
                                padding:10vw 30px;
                                .contents_inner {
                                        width:100%;
                                }
                        }
                }
        }
        
        #rice2 {
                .wrap {
                        .contents {
                                .contents_inner {
                                        grid-template-columns:50% 1fr;
                                        grid-gap:30px;
                                }
                        }
                }
        }
        
        #rice4 {
                .wrap {
                        .contents {
                                .contents_inner {
                                        grid-template-columns:1fr 50%;
                                        grid-gap:30px;
                                }
                        }
                }
        }
        
        #rice8 {
                .wrap {
                        .contents {
                                .contents_inner {
                                        grid-gap:30px;
                                }
                        }
                }
        }
        
        #rice6 {
                .wrap {
                        .contents {
                                .contents_inner {
                                        grid-template-columns:1fr 50%;
                                        grid-gap:30px;
                                        .img {
                                                img {
                                                        aspect-ratio:2/1;
                                                }
                                        }
                                        .detail {
                                                h3 {
                                                        font-size:2.6rem;
                                                }
                                        }
                                        &:nth-child(even){
                                                grid-template-columns:50% 1fr;
                                        }
                                }
                        }
                }
        }
        
        #rice7 {
                .wrap {
                        .contents {
                                .contact {
                                        grid-gap:50px;
                                        a {
                                                font-size:2.6rem;
                                        }
                                }
                        }
                }
        }
                
}

@media screen and (max-width:768px){
        
        section {
                .wrap {
                        .contents {
                                h2 {
                                        font-size:2.0rem;
                                }
                        }
                }
        }
        
        #rice {
                .wrap {
                        .mv {
                                height:auto;
                                margin-bottom:60px;
                                width:100%;
                                aspect-ratio:2/1;
                                .contents {
                                        padding-top:30px;
                                        h1 {
                                                max-width:400px;
                                        }
                                }
                        }
                        .contents {
                                .contents_inner {
                                        grid-template-columns:1fr;
                                        grid-gap:20px;
                                        .smenu {
                                                grid-gap:10px;
                                                a {
                                                        font-size:min(3.3vw,1.5rem);
                                                }
                                        }
                                        .img {
                                                order:1;
                                                max-width:400px;
                                                margin:0 auto;
                                        }
                                }
                        }
                }
        }
        
        #rice1 {
                .wrap {
                        padding-top:45px;
                        .contents {
                                background:url(../img/rice/rice_img2.png) no-repeat center center/auto 150%;
                                padding:30px 20px;
                                aspect-ratio:unset;
                                .contents_inner {
                                        margin:0 auto;
                                        p {
                                                text-align:left;
                                                display:grid;
                                                justify-content:center;
                                        }
                                }
                        }
                }
        }
        
        #rice2 {
                .wrap {
                        padding-top:45px;
                        .contents {
                                .contents_inner {
                                        display:grid;
                                        grid-template-columns:1fr;
                                        grid-gap:30px;
                                        align-items:center;
                                        .img {
                                                margin-right:0;
                                                width:calc(100% + 40px);
                                                margin:0 -20px;
                                                img {
                                                        display:block;
                                                        border-radius:0;
                                                }
                                        }
                                }
                        }
                }
        }
        
        #rice3 {
                .wrap {
                        padding-top:45px;
                        .contents {
                                margin-bottom:30px;
                                p {
                                        text-align:left;
                                }
                        }
                        .imgs {
                                .rice_slider {
                                        .img {
                                                img {
                                                        width:150px;
                                                }
                                        }
                                }
                        }
                }
        }
        
        #rice4 {
                .wrap {
                        padding-top:45px;
                        padding-bottom:45px;
                        .contents {
                                .contents_inner {
                                        grid-template-columns:1fr;
                                        grid-gap:30px;
                                        .detail {
                                                order:1;
                                        }
                                        .img {
                                                order:1;
                                                margin-left:0;
                                                width:calc(100% + 40px);
                                                margin:0 -20px;
                                                img {
                                                        border-radius:0;
                                                }
                                        }
                                }
                        }
                }
        }
        
        #rice8 {
                .wrap {
                        padding:30px 0 45px;
                        .contents {
                                h2 {
                                        margin-bottom:1em;
                                        grid-auto-columns:
                                        &::before {
                                                width:5em;
                                                height:3.0em;
                                        }
                                }
                                .contents_inner {
                                        grid-template-columns:1fr;
                                        grid-gap:10px;
                                        .btn {
                                                font-size:1.8rem;
                                        }
                                }
                        }
                }
        }
        
        #rice5 {
                .wrap {
                        padding-top:45px;
                        overflow:hidden;
                        .contents {
                                .contents_inner {
                                        grid-template-columns:repeat(2,1fr);
                                        grid-gap:40px 20px;
                                        padding-top:1em;
                                        .item {
                                                position:relative;
                                                &::after {
                                                        content:'';
                                                        display:block;
                                                        width:10px;
                                                        height:30px;
                                                        background-color:#DA0B14;
                                                        clip-path:polygon(0 0,100% 50%,0 100%);
                                                        position:absolute;
                                                        right:-14px;
                                                        top:50%;
                                                        transform:translateY(-50%);
                                                }
                                                &:not(:nth-child(3n)) {
                                                        &::after {
                                                        width:10px;
                                                        height:30px;
                                                        right:-14px;
                                                        }
                                                }
                                                &:not(:nth-child(odd)) {
                                                        &::after {
                                                                content:none;
                                                        }
                                                }
                                                .img {
                                                        img {
                                                                border-radius:20px;
                                                        }
                                                        span {
                                                                font-size:2.4rem;
                                                        }
                                                }
                                                h3 {
                                                        font-size:1.6rem;
                                                }
                                        }
                                }
                        }
                }
        }
        
        #rice6 {
                .wrap {
                        padding-top:45px;
                        .contents {
                                .contents_inner {
                                        grid-template-columns:1fr;
                                        grid-gap:20px;
                                        .img {
                                                order:2;
                                                img {
                                                        aspect-ratio:2.5/1;
                                                        border-radius:50px;
                                                }
                                        }
                                        .detail {
                                                h3 {
                                                        font-size:2.4rem;
                                                        span {
                                                                margin-right:.5em;
                                                        }
                                                }
                                        }
                                        &:nth-child(even){
                                                grid-template-columns:1fr;
                                        }
                                        &:not(:last-child) {
                                                margin-bottom:40px;
                                        }
                                }
                        }
                }
        }
        
        #rice7 {
                .wrap {
                        padding-top:60px;
                        .contents {
                                background:url(../img/rice/rice_img19.png) no-repeat center center/150% auto;
                                aspect-ratio:unset;
                                padding:30px 20px;
                                width:100%;
                                h2 {
                                        margin-bottom:1em;
                                }
                                p {
                                        margin-bottom:2em;
                                        text-align:left;
                                        display:grid;
                                        justify-content:center;
                                }
                                .contact {
                                        grid-template-columns:1fr;
                                        align-items:center;
                                        justify-content:center;
                                        grid-gap:20px;
                                        a {
                                                font-size:2.4rem;
                                        }
                                }
                        }
                }
        }
        
}