@charset "UTF-8";

* {scroll-behavior: smooth;}

body                                   { min-width: 1200px;}
body                                   { color: #454545; background-color: #FFF;}
html                                   { font-size: 16px; line-height: 1.8em; font-family: "Noto Sans JP", serif; font-weight: 300;}
html                                   { -webkit-text-size-adjust: 100%; text-size-adjust: 100%;}
a                                      { color: #454545;}


/* font */
.noto-serif-jp                         { font-family: "Noto Serif JP", serif;}
.noto-sans-jp                          { font-family: "Noto Sans JP", serif;}

/* margin */
.mt1                                   { margin-top: 1em;}
.mt2                                   { margin-top: 2em;}
.mt3                                   { margin-top: 3em;}
.mt4                                   { margin-top: 4em;}
.mt5                                   { margin-top: 5em;}


/* common */
.pc                                    { display: block;}
.sp                                    { display: none;}
.no-text                               { font-size: 0; line-height: 0; text-indent: -9999px;}
.text-center                           { text-align: center;}
.text-right                            { text-align: right;}
.btn_common                            { border: 1px solid #5C8258; color: #3E4F3C; padding: 0.2em 1em; border-radius: 0.2em;}
.btn_common::before                    { content: "›"; color: #f00; margin-right: 0.5em;}
h3                                     { font-family: "Noto Serif JP", serif; font-size: 2rem; line-height: 1.5em; color: #5C8258; margin-bottom: 1em;}


/* flex */
.flex-c3                               { display: flex; width: 100%; justify-content: space-between; flex-wrap: wrap;}
.flex-c3 .flex-item                    { width: 28%;}

/* header */
header                                 { position: fixed; top: 0; left: 0; right: 0; z-index: 10000;}
header .container                      { display: flex; align-items: end; justify-content: space-between; position: relative; width: 100%; padding: 1em 30px;}
header .container ul                   { display: flex; gap: 2em; align-items: center;}
header .container ul li a              { color: #5C8258; display: flex; gap: 0.2em;}
header .container .btn_mail a          { background-color: #5C8258; color: #FFF; padding: 0.15em 0.5em; border-radius: 0.2em; display: flex; align-items: center;}

.icon_mypage::before                   { content: ""; width: 1.7em; height: 1.7em; display: inline-block; background: url(https://image.raku-uru.jp/01/25005/266/icon_mypage_1740509665137.png); background-size: cover;}
.icon_cart::before                     { content: ""; width: 1.7em; height: 1.7em; display: inline-block; background: url(https://image.raku-uru.jp/01/25005/267/icon_cart_1740509665332.png); background-size: cover;}
.icon_mail::before                     { content: ""; width: 1.2em; height: 1em; display: inline-block; background: url(https://image.raku-uru.jp/01/25005/265/icon_mail_1740509664914.png) center no-repeat; background-size: 100% auto;}

h1 a                                   { display: block; width: 250px; height: 50px; background: url(https://image.raku-uru.jp/01/25005/262/logo_aneesfarm_1740509091029.png); background-size: cover;}


/* FV */
#fv                                    { width: 100%; height: 100vh; background: url(https://image.raku-uru.jp/01/25005/280/fv-image_1753247107736.jpg) center bottom; background-size: cover; display: flex; justify-content: center; align-items: center; position: relative;}
#fv h2                                 { background: url(https://image.raku-uru.jp/01/25005/284/fv-message_1753247109847.png) no-repeat; background-size: contain; width: 200px; height: 336px; font-size: 0; line-height: 0; text-indent: -9999px; position: relative; top: -10vh;}
#fv::before                            { content: "Scroll"; color: #000; position: absolute; bottom: 0.5rem; left: calc(50% - 1rem); font-size: 0.8rem;}
#fv::after                             { content: ""; width: 1px; height: 100px; display: block; background-color: #333; position: absolute; left: 50%; bottom: 2rem; animation: scroll ease-in-out 2s infinite;}

@keyframes scroll {
    0%   { transform: scaleY(0%); bottom: calc(2rem + 50px);}
    50%  { transform: scaleY(100%); bottom: 2rem;}
    95%  { transform:  scaleY(0%); bottom: calc(2rem - 50px);}
    100% { transform:  scaleY(0%);}
}


/* Image Area */
#imagezone01                           { width: 100%; aspect-ratio: 3/1; background: url(https://image.raku-uru.jp/01/25005/287/image-area1_1753247110658.jpg) center; background-size: cover;}
#imagezone02                           { width: 100%; aspect-ratio: 3/1; background: url(https://image.raku-uru.jp/01/25005/283/image-area2_1753247109409.jpg) center; background-size: cover;}

/* コンセプト */
#concept                               { max-width: 1200px; margin: auto; padding: 8em 0; text-align: center;}
#concept h3                            { font-size: 2rem;}
#concept h4                            { font-size: 1.2rem; color: #5C8258;}
#concept .flex-c3                      { max-width: 1200px; margin: 3rem auto 0;}
#concept .flex-c3 .flex-item           { border: 1px solid #CCC; padding: 1.5rem; border-radius: 0.5rem;}
#concept .flex-c3 .flex-item img       { width: 100%; height: auto;}
#concept .flex-c3 .flex-item a         { display: block; background-color: #5C8258; color: #FFF; padding: 0.2rem; border-radius: 0.2rem; margin-top: 0.5rem;}


/* ITEM：レモングラスブレンド */
#item-lemongras-blend                  { max-width: 1200px; margin: auto; padding: 4em 0;}

/* ITEM：和・漢・洋ブレンド */
#item-wakanyou-blend                   { max-width: 1200px; margin: auto; padding: 4em 0;}

/* ITEM：ほうじ茶 */
#item-houjicha                         { width: 100%; padding: 50px 0; background: url(https://image.raku-uru.jp/01/25005/295/houjicha_bg_1753287263395.jpg) right center no-repeat; background-size: auto 100%;}
#item-houjicha > div                   { max-width: 800px; background-color: rgba(255,255,255,0.8); padding: 2rem 2rem 2rem 0; margin: auto; position: relative; left: -200px;}
#item-houjicha h3                      { background: url(https://image.raku-uru.jp/01/25005/285/houjicha_title_1753247110261.png); background-size: contain; width: 200px; height: 83px; font-size: 0; line-height: 0; text-indent: -9999px; margin-bottom: 2rem;}
#item-houjicha h4                      { font-size: 1.3rem; color: #5C8258; margin-top: 2rem; margin-bottom: 0.5rem; font-family: "Noto Serif JP", serif;}
#item-houjicha ul                      { display: flex; gap: 30px; margin-top: 2rem;}
#item-houjicha ul li > div             { display: flex; gap: 1rem;}
#item-houjicha ul li > div img         { height: 150px;}
#item-houjicha .price span             { font-size: 2em; font-weight: 500; margin: 0 0.2em;}
#item-houjicha .btn_cart               { width: 100%; font-weight: 500; display: flex; justify-content: center; background-color: #5C8258; color: #FFF; text-align: center; padding: 0.5em 0; border-radius: 0.2em; margin-top: 1em; border-bottom: 3px solid #3E4F3C; position: relative;}
#item-houjicha .btn_cart::before       { content: ""; width: 1.7rem; height: 1.7rem; display: block; background: url(https://image.raku-uru.jp/01/25005/267/icon_cart_1740509665332.png); background-size: cover; position: absolute; left: 0; top: 0; z-index: 100;}


/* カート関連 */
form   { border: 0;}
input[type="submit"] { border: 0;}
.cart h4 span                          { font-size: 1.3em; font-weight: 500; display: block;}
.cart h5                               { margin-top: 1.5em; font-size: 1.2em; font-family: "Noto Serif JP", serif; color: #5C8258;}
.cart img                              { width: 100%; height: auto;}
.cart .item-info                       { display: flex; gap: 5%; align-items: end;}
.cart .item-info img                   { width: 25%;}
.cart .item-info div                   { width: 70%;}
.cart .price span                      { font-size: 2em; font-weight: 500; margin: 0 0.2em;}
.cart .btn_cart                        { width: 100%; font-weight: 500; display: flex; justify-content: center; background-color: #5C8258; color: #FFF; text-align: center; padding: 0.7em 0; border-radius: 0.2em; margin-top: 1em; border-bottom: 3px solid #3E4F3C;}
.cart .btn_cart::before                { content: ""; width: 1.7em; height: 1.7em; display: inline-block; background: url(https://image.raku-uru.jp/01/25005/267/icon_cart_1740509665332.png); background-size: cover; margin-top: -0.1em;}
.cart .comment                         { margin-top: 1em;}


/* wellbeing */
#about                                 { background: url(https://image.raku-uru.jp/01/25005/294/wellbeing-bg_1753247160386.jpg) center bottom no-repeat; background-size: cover; padding: 3rem 0 15rem; margin-top: 10rem;}
#about div                             { max-width: 1200px; margin: auto; background: url(https://image.raku-uru.jp/01/25005/262/logo_aneesfarm_1740509091029.png) left top no-repeat; background-size: 250px 50px; padding-top: 80px;}
#about div h3                          { font-size: 2rem; color: #333333;}


#profile                               { max-width: 1000px; margin: 8rem auto;}
#profile h3                            { font-size: 2rem; text-align: center; margin-top: 3rem;}
#profile dl div                        { display: flex; gap: 2rem; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; padding: 1rem; margin-top: -1px;}
#profile dl div dt                     { width: 10rem;}
#profile dl div dd                     { flex: 1;}
#profile dl div dd b                   { color: #5C8258;}


/* お知らせ */
#news                                  { max-width: 1200px; margin: auto; padding: 4em 0; display: flex; gap: 100px;}
#news h3                               { width: 15%;}
#news dl                               { width: 85%;}
#news dl div                           { display: flex; gap: 2em; padding: 0.5em 0; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; margin-top: -1px;}
#news dl div dt                        { width: 10%;}
#news dl div dd                        { width: 90%;}



/* Footer */
footer                                 { background-color: #f2f2f2; padding: 2em 0; margin-top: 5em;}
footer .container                      { max-width: 1200px; margin: auto;}
footer .container h2                   { display: block; width: 250px; height: 50px; background: url(https://image.raku-uru.jp/01/25005/262/logo_aneesfarm_1740509091029.png); background-size: cover;}
footer .container h3                   { font-size: 1.2em; color: #666; margin: 0;}
footer .container .shop-info           { display: flex; gap: 2em; padding: 1em 0 0;}
footer .container .flex-c2             { display: flex; gap: 30px;}
.copyright                             { border-top: 1px solid #ccc; text-align: center; padding: 1em 0 2em; margin-top: 2em; display: flex; justify-content: space-between;}
.copyright nav                         { display: flex; gap: 1.5em;}



/* schedule-area */
.schedule-area                         { text-align: left; box-sizing: border-box;}
.schedule_wrapper                      { display: inline-block; width: auto;}
.schedule_wrapper:nth-of-type(odd)     { margin-right: 50px;}
.schedule-area h4                      { width: 295px; margin-bottom: 10px; text-align: center; color: #333; border: #333 solid 1px; border-radius: 0.2em;}
.schedule                              { display: inline-block; margin-right: ; vertical-align: top;}
.schedule table                        { width: auto; margin: 0 auto 10px;}
.schedule table th                     { padding: 4px 5px; text-align: center; color: #333;}
.schedule table td                     { padding: 4px 5px; text-align: center; color: #333;}
.schedule-date                         { line-height: 30px; display: inline-block; width: 30px; height: 30px;text-align: center;}
.e1 .schedule-date                     { color: #fff; background-color: #666666; }
/* .e2 .schedule-date                   { color: #fff; background-color: #604eb7;} */
.e3 .schedule-date                     { color: #666666; border: #666666 solid 1px;}
.event-list .event1                    { color: #fff; background-color: #666666; display: inline; padding: 0 0.5em; font-size: 0.8em}
.event-list .event2                    { display: none;}



/* 下層ページ用 */
.main-article .ttl                     { margin-top: 100px; background-color: #f2f2f2; padding: 100px 0; text-align: center; font-size: 2em; }
.main-article .about-tbl               { max-width: 1200px; margin: 4em auto; border-top: 1px solid #e5e5e5;}
.main-article .about-tbl > tbody > tr > th  { width: 20em; border-bottom: 1px solid #e5e5e5; padding: 0.5em 0;}
.main-article .about-tbl > tbody > tr > td  { width: auto; border-bottom: 1px solid #e5e5e5; padding: 0.5em 0;}

.privacy-policy,
.membership-agreement,
.shipment-explanation                  { max-width: 1200px; margin: 4em auto;}


@media screen and ( max-width: 767px) {



    html                                   { font-size: 3.5vw; min-width: auto; color: #121212;}
    body                                   { min-width: auto;}
    /* common */
    .pc                                    { display: none;}
    .sp                                    { display: block;}

    h3                                     { font-family: "Noto Serif JP", serif; font-size: 1.5em; line-height: 1.5em; color: #5C8258; margin-bottom: 1em;}

    /* flex */
    .flex-c3 .flex-item                    { width: 100%;}

    /* header */
    header .container                      { display: flex; align-items: end; justify-content: space-between; position: relative; width: 100vw; padding: 1em 5vw;}
    header .container ul                   { display: flex; gap: 0.5em; }
    header .container ul li a span         { display: none;}
    header .container .btn_mail a          { padding: 0; border-radius: 1em;}
    
    .icon_mypage::before                   { content: ""; width: 2em; height: 2em; display: inline-block; background: url(https://image.raku-uru.jp/01/25005/266/icon_mypage_1740509665137.png); background-size: cover;}
    .icon_cart::before                     { content: ""; width: 2em; height: 2em; display: inline-block; background: url(https://image.raku-uru.jp/01/25005/267/icon_cart_1740509665332.png); background-size: cover;}
    .icon_mail::before                     { content: ""; width: 2em; height: 2em; display: inline-block; background: url(https://image.raku-uru.jp/01/25005/265/icon_mail_1740509664914.png) center no-repeat; background-size: 70%;}
    
    h1 a                                   { display: block; width: 200px; height: 40px; background: url(https://image.raku-uru.jp/01/25005/262/logo_aneesfarm_1740509091029.png); background-size: cover;}
    
    
    /* FV */
    #fv                                    { width: 100vw; height: 100vh; background: url(https://image.raku-uru.jp/01/25005/280/fv-image_1753247107736.jpg) center bottom; background-size: cover; display: flex; justify-content: center; align-items: center;}
    #fv h2                                 { background: url(https://image.raku-uru.jp/01/25005/284/fv-message_1753247109847.png) no-repeat; background-size: contain; width: 200px; height: 336px; font-size: 0; line-height: 0; text-indent: -9999px; position: relative; top: -10vh;}

    #fv::before                            { content: "Scroll"; color: #000; position: absolute; bottom: 80px; left: calc(50% - 1rem); font-size: 0.8rem;}
    #fv::after                             { content: ""; width: 1px; height: 100px; display: block; background-color: #333; position: absolute; left: 50%; bottom: 100px; animation: scroll ease-in-out 2s infinite;}

    @keyframes scroll {
        0%   { transform: scaleY(0%); bottom: calc(100px + 50px);}
        50%  { transform: scaleY(100%); bottom: 100px;}
        95%  { transform:  scaleY(0%); bottom: calc(100px - 50px);}
        100% { transform:  scaleY(0%);}
    }

    /* Image Area */
    #imagezone01                           { width: 100vw; aspect-ratio: 3/2; background: url(https://image.raku-uru.jp/01/25005/287/image-area1_1753247110658.jpg) center; background-size: cover;}
    #imagezone02                           { width: 100vw; aspect-ratio: 3/2; background: url(https://image.raku-uru.jp/01/25005/283/image-area2_1753247109409.jpg) center; background-size: cover;}


    /* コンセプト */
    #concept                               { max-width: 90vw; margin: auto; padding: 4em 0; text-align: center;}
    #concept h3                            { font-size: 1.4rem; letter-spacing: -0.05rem;}
    #concept h4                            { font-size: 1rem;}
    #concept .flex-c3                      { max-width: 100%; flex-wrap: wrap; gap: 1rem 0; justify-content: space-between;}
    #concept .flex-c3 .flex-item           { width: 48%; padding: 1rem;}
    #concept .flex-c3 .flex-item a         { display: block; background-color: #5C8258; color: #FFF; padding: 0.2rem; border-radius: 0.2rem; margin-top: 0.5rem;}


    /* ITEM：レモングラスブレンド */
    #item-lemongras-blend                  { padding: 5em 0; width: 90vw;}
    
    /* ITEM：和・漢・洋ブレンド */
    #item-wakanyou-blend                   { padding: 5em 0; width: 90vw;}

    /* ITEM：ほうじ茶 */
    #item-houjicha                         { width: 100vw; padding: 70vw 0 0; background: url(https://image.raku-uru.jp/01/25005/281/houjicha_bg_1753247108539.jpg) center top no-repeat; background-size: 100% auto;}
    #item-houjicha > div                   { max-width: 90vw; background-color: rgba(255,255,255,1); padding: 2rem 0 0 0; left: 0;}
    #item-houjicha h3                      { background: url(https://image.raku-uru.jp/01/25005/285/houjicha_title_1753247110261.png) top left no-repeat; background-size: contain; width: 150px; height: 60px; margin-bottom: 1rem;}
    #item-houjicha h4                      { font-size: 1.2rem;}
    #item-houjicha ul                      { display: flex; gap: 30px; flex-wrap: wrap; margin-top: 2rem;}
    #item-houjicha ul li                   { width: 100%;}
    /* #item-houjicha ul li > div             { display: flex; gap: 1rem;}
    #item-houjicha ul li > div img         { height: 150px;}
    #item-houjicha .price span             { font-size: 2em; font-weight: 500; margin: 0 0.2em;}
    #item-houjicha .btn_cart               { width: 100%; font-weight: 500; display: flex; justify-content: center; background-color: #5C8258; color: #FFF; text-align: center; padding: 0.5em 0; border-radius: 0.2em; margin-top: 1em; border-bottom: 3px solid #3E4F3C;}
    #item-houjicha .btn_cart::before       { content: ""; width: 1.7em; height: 1.7em; display: inline-block; background: url(https://image.raku-uru.jp/01/25005/267/icon_cart_1740509665332.png); background-size: cover; margin-top: -0.1em;} */

    
    
    /* カート関連 */
    /* .cart h4 span                          { font-size: 1.3em; font-weight: 500; display: block;}
    .cart h5                               { margin-top: 1.5em; font-size: 1.2em; font-family: "Noto Serif JP", serif; color: #5C8258;}
    .cart img                              { width: 100%; height: auto;}
    .cart .item-info                       { display: flex; gap: 5%; align-items: end;}
    .cart .item-info img                   { width: 25%;}
    .cart .item-info div                   { width: 70%;}
    .cart .price span                      { font-size: 2em; font-weight: 500; margin: 0 0.2em;}
    .cart .btn_cart                        { width: 100%; font-size: 1em;; font-weight: 500; background-color: #5C8258; color: #FFF; text-align: center; padding: 0.5em 0; border-radius: 0.3em; margin-top: 1em; border: 0; border-bottom: 3px solid #3E4F3C;}
    .cart .btn_cart::before                { content: ""; width: 1.7em; height: 1.7em; display: inline-block; background: url(https://image.raku-uru.jp/01/25005/267/icon_cart_1740509665332.png); background-size: cover; margin-top: -0.1em;}
    .cart .comment                         { margin-top: 1em;} */
    .cart .comment                         { margin-bottom: 3em;}


    /* wellbeing */
    #about                                 { background: url(https://image.raku-uru.jp/01/25005/294/wellbeing-bg_1753247160386.jpg) 82% bottom no-repeat; background-size: cover; padding: 3rem 0 15rem; margin-top: 5rem;}
    #about div                             { max-width: 90vw; margin: auto; background: url(https://image.raku-uru.jp/01/25005/262/logo_aneesfarm_1740509091029.png) left top no-repeat; background-size: 150px auto; padding-top: 50px;}
    #about div h3                          { font-size: 1.5rem;}

    #profile                               { max-width: 90vw; margin: 5rem auto;}
    #profile h3             { font-size: 1.5rem; margin-top: 3rem;}
    #profile dl div         { padding: 1rem 0; margin-top: -1px; gap: 0;}
    #profile dl div dt      { width: 5rem;}


    
    
    /* お知らせ */
    
    #news                                 { max-width: 1200px; margin: auto; padding: 0 0 4em 0; display: block;}
    #news h3                              { width: 100%; text-align: center;}
    #news dl                              { width: 100%; padding: 0 5vw;}
    #news dl div                          { display: block;}
    #news dl div dt                       { width: 100%;}
    #news dl div dd                       { width: 100%;}
    
    
    /* Footer */
    footer                                { padding: 2em 5vw; }
    footer .container h2                  { display: block; width: 200px; height: 40px;}
    footer .container .shop-info          { display: block; gap: 2em; padding: 1em 0 0;}
    footer .container .flex-c2            { display: block;}
    footer .container .flex-item:last-child  { margin-top: 2em;}
    .copyright                            { text-align: center; display: block;}
    .copyright nav                        { display: block;}
    .copyright nav a     { display: inline-block; margin: 0 0.8em;}
    
    
    
    /* schedule-area */
    .schedule-area                       { text-align: left; box-sizing: border-box; display: flex; justify-content: space-between; flex-wrap: wrap;}
    .schedule_wrapper                    { display: inline-block; width: auto;}
    .schedule_wrapper:nth-of-type(odd)   { margin-right: 0;}

    .schedule-area h4                    { width: 43vw; margin-bottom: 10px; text-align: center; color: #333; border: #333 solid 1px; border-radius: 0.2em;}
    .schedule                            { display: inline-block; margin-right: 0; vertical-align: top;}
    .schedule table                      { width: 43vw; margin: 0 auto 10px;}
    .schedule table th                   { padding: 1px;}
    .schedule table td                   { padding: 1px;}
    .schedule-date                       { line-height: 1.5em; width: auto; height: auto; display: block;}
    .event-list .event1                  { color: #fff; background-color: #666666; display: inline; padding: 0 0.5em; font-size: 0.8em}
    
    
    /* 下層ページ用 */
    .main-article .ttl                           { margin-top: 70px; padding: 40px 0; font-size: 1.5em; }
    .main-article .about-tbl                     { margin: 3em 5vw 5em; }
    .main-article .about-tbl > tbody > tr > th   { width: 7em; vertical-align: top;}
    .main-article .about-tbl > tbody > tr > td   { padding-left: 1em;}
    
    .privacy-policy,
    .membership-agreement,
    .shipment-explanation                     { max-width: 1200px; margin: 3em 5vw 5em;}
    .shipment-explanation img    { width: 100%; height: auto;}
    

}
