@charset "utf-8";


/*
  Made by Elly Loel - https://ellyloel.com/
*/
*{margin:0;padding:0;line-height:calc(0.25rem+1em+0.25rem)}*,::before,::after{box-sizing:border-box}*:where(:not(fieldset,progress,meter)){border-width:0;border-style:solid;background-origin:border-box;background-repeat:no-repeat}
html{block-size:100%;-webkit-text-size-adjust:none}
@media(prefers-reduced-motion:no-preference){html:focus-within{scroll-behavior:smooth}}
body{text-rendering:optimizeSpeed;min-block-size:100%}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,svg,video){block-size:auto;max-inline-size:100%}:where(svg){stroke:none;fill:currentColor}:where(svg):where(:not([fill])){stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}:where(svg):where(:not([width])){inline-size:5rem}:where(input,button,textarea,select),:where(input[type="file"])::-webkit-file-upload-button{color:inherit;font:inherit;font-size:inherit;letter-spacing:inherit;word-spacing:inherit}:where(textarea){resize:vertical}
@supports(resize:block){:where(textarea){resize:block}}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}
h1{font-size:2em}:where(ul,ol){list-style-position:inside}:where(ul,ol)[role="list"]{list-style:none}
a:not([class]){text-decoration-skip-ink:auto}:where(a[href],area,button,input,label[for],select,summary,textarea,[tabindex]:not([tabindex*="-"])){cursor:pointer;touch-action:manipulation}:where(input[type="file"]){cursor:auto}:where(input[type="file"])::-webkit-file-upload-button,:where(input[type="file"])::file-selector-button{cursor:pointer}
@media(prefers-reduced-motion:no-preference){:focus-visible{transition:outline-offset 145ms cubic-bezier(0.25,0,0.4,1)}:where(:not(:active)):focus-visible{transition-duration:0.25s}}:where(:not(:active)):focus-visible{outline-offset:5px}:where(button,button[type],input[type="button"],input[type="submit"],input[type="reset"]),:where(input[type="file"])::-webkit-file-upload-button,:where(input[type="file"])::file-selector-button{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;text-align:center}:where(button,button[type],input[type="button"],input[type="submit"],input[type="reset"])[disabled]{cursor:not-allowed}
a{text-decoration: none; color: #030303;}
h1,h2,h3,h4,h5,h6{font-size: unset;font-weight: unset;}
li{list-style: none;}
img{width: 100%;}

.smp{display: none !important;}

body{background-color: #030303;font-size: 16px;font-family: "Noto Sans JP", sans-serif;}

/*-----------------------------------------------------------------------------------------
base
----------------------------------------------------------------------------------------*/
#wrap{        background-position: top;
    background-image: url(https://image.wowma.click/44587948/image/rice-otomo/back.jpg?);
    background-size: 100%;
    background-attachment: fixed;}

    :hover{ animation: 1s;}

/*-----------------------------------------------------------------------------------------
text
----------------------------------------------------------------------------------------*/
p{font-size: 14px;}
.wa{         font-family: "Hina Mincho", serif;
    font-weight: 400;
    font-style: normal }
.gl{color: #b59207;}

/*-----------------------------------------------------------------------------------------
common
----------------------------------------------------------------------------------------*/

.contents_wrap{
    width: 750px;
    margin: auto;
    text-align: center;}



.sidecontens{        color: #f6f5f1;
    top: 40px;
    height: calc(100vh - 40px);
    position: fixed;}


/*-----------------------------------------------------------------------------------------
header
----------------------------------------------------------------------------------------*/
header{    
    background-color: #b59207db;
    backdrop-filter: blur(4px);
    z-index: 99;
    position: fixed;
    width: 100%;
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
header div.contents_wrap div
{    
    color: #f6f5f1;
    width: 423px;
    display: flex;
    height: 40px;    font-size: 20px;
    margin: auto;
    clip-path: polygon(14% 100%, 86% 100%, 100% 0, 0 0);
    align-items: center;
    justify-content: center;
    z-index: 99;
    position: relative;
    background-color: #977a12;}

    header a{color: ;}

/*-----------------------------------------------------------------------------------------
main
----------------------------------------------------------------------------------------*/

main #top{        height: calc(100vh);
    display: flex;
    align-items: center;
    justify-content: center;   }

main #itemarea
{    background-color: #f6f5f1a6;display: inline-block;        margin-bottom: 50px;
    padding-bottom: 50px;}

/*----項目名-----*/
main #itemarea #subtitle{
    background: #64520f;z-index: 99;
    position: sticky;
    top: 39px;
    color: #f6f5f1;
    width: 230px;
    display: flex;
    height: 40px;
    margin: auto;
    clip-path: polygon(20% 100%, 80% 100%, 100% 0, 0 0);
    align-items: center;
    justify-content: center;
}
main #itemarea #subtitle h2[class^="a_"],main #itemarea #subtitle h2[class^="b_"]
{display: none;}



/*----商品リスト-----*/

main #itemarea #itemlist ul{    display: flex;
    flex-wrap: wrap;}
main #itemarea #itemlist li.item{                
    width: calc(50% - 80px);
    background-color: #f6f5f1;
    float: left;
    margin: 40px;
    box-sizing: border-box;
      display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;}

    main #itemarea #itemlist li.item dl{        
        background-color: #f6f5f1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;}


        main #itemarea #itemlist dt h4
        {    margin: 10px;
            font-weight: 600;}
        
        main #itemarea #itemlist li.item dd p.type{
            background-color: #b7b7b7;
            padding: 5px 10px;
            width: fit-content;
            margin: auto;}
        main #itemarea #itemlist li.item:hover dl{color: #b59207;}
        main #itemarea #itemlist li.item dl dd{          padding: 0px 10px 5px; }
        main #itemarea #itemlist li.item dl dd:last-of-type{
        display: flex;
        align-items: center;
        justify-content: center;
        }

.prices{    font-size: 24px;
    color: #977a12;
    font-weight: 700;}





/*-----------------------------------------------------------------------------------------
nav
----------------------------------------------------------------------------------------*/

nav{right: calc(50% + 770px / 2);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

    nav .navi{    
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
    }
    
    nav ul{  -ms-writing-mode: tb-rl; writing-mode: vertical-rl;}
    nav ul li[id^="Key"]{  cursor: pointer;}
    nav ul li[id^="Key"]:hover{color:#b59207;}

/*-----メニュー----*/
    nav .navi_r ul.sort{   margin: 20px;padding: 20px;}
    nav .navi_r ul.sort:first-child{border-bottom: 1px solid;}
    nav .navi_r li[id^="Key"]{margin-top: 1rem;}

/*-----全てを見るボタン----*/
nav .navi .navi_l{    background-color: #f6f5f169;}

    nav .navi .navi_l li{ 
        height: 316px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 5px;}

        nav .navi .navi_l li:hover{background-color: #434a4cd5;}

/*----特集リンク-----*/

    nav .event img{width: 120px;margin: 10px;}
    nav .event{display: flex;}



    

/*-----------------------------------------------------------------------------------------
packrice
----------------------------------------------------------------------------------------*/
#packrice{
    left: calc(50% + 770px / 2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 2rem;}


    #packrice > div:first-of-type img{
        width: 244px;
        margin-bottom: -42px;
    }


    #packrice > div:nth-of-type(2){
        -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;}


    #packrice h2{font-size: 35px;margin-left: 20px;}
    #packrice p{background-color: #f6f5f1;
        color: #4c5359;
        margin-left: 7px;        margin-top: 2rem;
        height: fit-content;
        padding-top: 9px;}


        #packrice > div:nth-of-type(3){
            display: flex;        margin-top: -108px;
            flex-direction: column;
            justify-content: center;
            align-items: center;}
            .selectlink{
                background: #444c4f78;
                border: 1px solid white;
                width: 144px;
                text-align: center;
                height: 40px;
                margin-bottom: 5px;
            }
            
            .selectlink option{padding: 10px 0;}
            .selectlink option:first-of-type{background-color: #4c5359;}
            .selectlink p{padding: 0.5rem;}
        

/*-----------------------------------------------------------------------------------------
footer
----------------------------------------------------------------------------------------*/

footer{    background-color: #b59207;width: 100%;        clear: both;}
footer div.contents_wrap{        display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;}

/*-----------------------------------------------------------------------------------------
effect
----------------------------------------------------------------------------------------*/

/*====== 9-1-1 縦線が動いてスクロールを促す =======*/

/*スクロールダウン全体の場所*/
.scrolldown1{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	left:50%;
	bottom:10px;
    /*全体の高さ*/
	height:50px;
}

/*Scrollテキストの描写*/
.scrolldown1 span{
    /*描画位置*/
	position: absolute;
	left:-15px;
	top: -15px;
    /*テキストの形状*/
	color: #eee;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
}

/* 線の描写 */
.scrolldown1::after{
	content: "";
    /*描画位置*/
	position: absolute;
	top: 0;
    /*線の形状*/
	width: 1px;
	height: 30px;
	background: #eee;
    /*線の動き1.4秒かけて動く。永遠にループ*/
	animation: pathmove 1.4s ease-in-out infinite;
	opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
	0%{
		height:0;
		top:0;
		opacity: 0;
	}
	30%{
		height:30px;
		opacity: 1;
	}
	100%{
		height:0;
		top:50px;
		opacity: 0;
	}
}

/*h1*/
.blur{
	animation-name:blurAnime;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
	filter: blur(10px);
	transform: scale(1.02);
	opacity: 0;
  }

  to {
	filter: blur(0);
	transform: scale(1);
	opacity: 1;
  }
}
 
.blurTrigger{
    opacity: 0;
}

/*.fade-in-top*/
.fade-in-top {
	-webkit-animation: fade-in-top 4s cubic-bezier(0.390, 0.575, 0.565, 1.000) forwards;
	        animation: fade-in-top 4s cubic-bezier(0.390, 0.575, 0.565, 1.000) forwards;
}

@-webkit-keyframes fade-in-top {
    0% {
      -webkit-transform: translateY(-50px);
              transform: translateY(-50px);
      opacity
      : 0;
    }
    50% {
        -webkit-transform: translateY(-50px);
                transform: translateY(-50px);
        opacity: 0;
      }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes fade-in-top {
    0% {
      -webkit-transform: translateY(-50px);
              transform: translateY(-50px);
      opacity: 0;
    }
    50% {
        -webkit-transform: translateY(-50px);
                transform: translateY(-50px);
        opacity: 0;
      }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
    }
  }