:root {
    --font-size-main: 14px;
    --font-size-title: 28px;
    --font-size-titlesub: 12px;
    --font-size-large: 32px;
    --font-size-medium: 18px;
    --font-size-icon: 13px;
    --font-size-small: 14px;
    --font-size-price: 16px;
    --font-size-medium2: 14px;

    --color-primary:#2B551D;
    --color-secondary:#A9BF30;
    --color-gray:#646464;
    --color-bg-gray:#e0e0e0;
    --color-highlight:#70AC34;
    --color-price:#D60000;
}

html {
   
}

body {
    position: relative;
    font-family: 'Shippori Mincho', serif;
    font-weight: normal;
    background-color: #EFEFEF;
    color:#3A3A3A;
    min-width: 1024px;
    font-size: var(--font-size-main);
    /*letter-spacing: 0.05em;*/
    line-height: 1.8;

}

h1,h2,h3,h4,h5,h6,strong {
    font-weight: normal;
}

.logoImage {
    display: none;
}



main.notIndexPage{
    padding:80px 0 0;

    background-image: none;
}

a {
    transition:all 1s;
}

a:hover {
    opacity: 0.6;
    color:var(--color-secondary);

}

a:link {
    text-decoration: none;
}
a:visited {

}

small {
    font-size:0.8em;
}

.strike {
    text-decoration: line-through;
}

.textNotice {
    display: inline-block;
    font-size:var(--font-size-icon);
    padding:0.4em 0;

}

.textIcon{
    display: inline-block;
    border-radius: 5px;
    font-size: var(--font-size-icon);
    font-weight: 800;
    margin-right:0.5em;
    line-height: 1.4;
    
    letter-spacing: -0.05em;
    margin-bottom:0.2em;
}

.iconTypeA {
    position: relative;
    /*color:var(--color-price);*/
    border-color: #fff;
    text-align: center;
}
/*
.iconTypeA::before {
    position: absolute;
    left:10px;
    top: -10px;
    width: 20px;
    height: 11px;
    background-color: #ffffff;
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
    content: '';

}
*/
.iconDiscount {
    border: 1px solid #e75c5c;
    color: #e75c5c;
    display: inline-block;
    font-size: var(--font-size-icon);
    font-weight: bold;
    line-height:1.5;
    padding: 0 5px;
    vertical-align: top;
    margin-left:0.5em;
}

.dell {
    text-decoration:line-through;
}

.onlySP {
    display: none;
}




/* COMMON
========================*/


.pageNotIndex{
    padding-top:161px;

}

header {
    width:100%;
    position: relative;
    height:0;
    padding-top: 45%;

    overflow: hidden;
   

}
header::before {
   content: '';
   display: block;
   position: absolute;
   bottom:0;
   width: 100%;
   height: 100%;
   background-image: url(../img/bg_green_main.jpg) ;
   background-repeat: repeat;
   background-size: cover;
   animation: bgFade01 30s ease-in-out infinite;
   animation-direction:alternate-reverse;
}

header h2 {
    width:150px;
    height:150px;
    object-fit: contain;
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(0,-50%);
}

header h3 {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size:var(--font-size-large);
    height:max-content;
    letter-spacing: 0.2em;
    line-height: 2.0;
    color:#fff;
    position: absolute;
    top:calc(50% - 80px);
    left:8%;
    
}

header .headerBar{
    

    
}

header #headerTopBtn {
    position: absolute;
    top:30px;
    left:50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content:flex-end;
}

header #headerTopBtn a {
    width:50px;
    display: block;
    text-align: center;
}

header #headerTopBtn a img {
    display: inline-block;
}


nav {
    border-bottom:rgba(0,0,0,0.05) 1px solid;
    
}

nav a.menuLogo {
    display: none;
}

nav ul {
    display: flex;
    align-items: center;
    justify-content: center;
    

}
nav ul li{

}
nav a {
    font-weight: 800;
    padding: 2em 2.5em;
    display:block;
    transition: none;
}


.headerFixed header .headerBar {
    top:50%;
    transform: translateY(-50%);
}

.headerFixed header {
    top:0;
    height:70px;
    padding-top: 0px;
    position: fixed;
    z-index: 1000;
    animation: navIn 1s;
}

.headerFixed header h2 {
    width:50px;
    height:50px;
    z-index: 1001;
}

.headerFixed header h3 {
    display: none;
}

.headerFixed header h2 img {
    width:100%;
}

.headerFixed nav {
    width:100%;

    position: fixed;
    top:0;
    margin-top:70px;
    z-index: 1000;
    background-color: #EFEFEF;
    animation: navIn 1s;
}

.headerFixed nav a {
    padding: 1em 2.5em;
}

footer {
    padding:30px 0;
    background-color: #ECEF7F;

}

footer .footerLogo {
    
    width:80px;

}


footer .content{

    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

footer .contentRight {
    width:calc(100% - 200px);
}

footer .contentRight ul {
    display: flex;
    padding:20px 0;
    margin-left:-3em;
}

footer .contentRight ul li {
    margin-left:3em;
    font-size:var(--font-size-main);

}

footer .footerCopy{
    text-align: right;
    font-weight: 800;
    font-size:var(--font-size-titlesub);
}

.contentAreaA {
    max-width: 1200px;
    width:100%;
    margin:0 auto;

}

.contentAreaB {
    max-width: 1024px;
    width:100%;
    margin:0 auto;
}

.titleStyleA {
    margin-top: 2em;
    margin-bottom: 2em;
    font-size: var(--font-size-title);
    font-weight: normal;
}



.textCircle {
    position: relative;
    display: inline-block;

    border-radius: 100px;
    border: 1px solid #fff;
    width:105px;
    height:105px;
    
}
.textCircle > span{
    font-weight: normal;
    line-height: 1.1;
    text-align: center;
    width:60px;
    font-size: var(--font-size-title);
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    white-space:normal;
}





.titleStyleA h3,
.titleStyleA h1
{
    font-size: var(--font-size-title);
}

.titleStyleA h4 {
    font-size: var(--font-size-titlesub);
    padding-bottom:0.5em;
}



.titleStyleB {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.titleStyleB h3 {
    font-size: var(--font-size-title);
    letter-spacing: 0.2em;
}

.titleStyleB h4 {
    font-size: var(--font-size-titlesub);
    padding-bottom:0.5em;


}

.titleStyleC {

}

.titleStyleC h3 {
    font-size: var(--font-size-title);
}

.titleStyleC h4 {
    font-size: var(--font-size-titlesub);
    padding-bottom:0.5em;


}

.textEnglish {
    letter-spacing: 0;
text-align: center;

    margin: 0;
}

main {
    /*background: linear-gradient(180deg, #000 0%, #0A4033 19.27%, #057842 38.54%, #92C05D 69.27%, #ECEF7F 100%);*/
    background: linear-gradient(180deg, #000 0%, #0A4033 25.00%, #057842 40%, #92C05D 69.27%, #ECEF7F 100%);
}

main h1 {

    text-align: center;
}

.fontColorA {
    color:#fff;
}

.fontColorB {
    color:#3A3A3A;
}


.afterBorder::after {
    content:"";
    display: block;
    width:100%;
    border-top:2px dotted #fff;
    margin-top:50px;

}

.afterBorder2::after {
    content:"";
    display: block;
    width:100%;
    border-top:2px dotted #3A3A3A;
    margin-top:50px;

}

/*
背景オブジェ*/
.bgObjectA {
    position: relative;
}
.bgObjectA img {
    z-index: 2;
}
.bgObjectA::before,
.bgObjectA::after
 {
    position: absolute;
    display: block;
    mix-blend-mode: multiply;
    transform: scale(50%);
    z-index: 1;
}



.topLayout04::before {
    content:url(../img/bg_leaf_01.png);
    transform-origin: left top;
    top:-250px;
    left:0;
}

.topLayout05::before {
    content:url(../img/bg_leaf_02.png);
    transform-origin: right top;
    top:-250px;
    right:0;
}

.topLayout05::after {
    content:url(../img/bg_leaf_03.png);
    transform-origin: left top;
    top:300px;
    left:0;
}

.topNews::before {
    content:url(../img/bg_leaf_04.png);
    transform-origin: right top;
    top:-400px;
    right:0;
}



.topLayout01 .content {
    padding-top:100px;
    padding-bottom:120px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap:10px;
}

.topLayout01 .text {
    width:500px;
    padding-right:50px;
}

.topLayout01 img {
    width:500px;

}



.topLayout02 .content {
   text-align: center;

}

.topLayout02 .content > .text {
    margin-bottom:3em;
}
.topLayout02 h4  {
    font-size: var(--font-size-medium);
}


.layout02_01 {
    display: flex;
    align-items: flex-start;
    gap:50px;
    justify-content: space-around;
    max-width: 900px;
    margin:0 auto;


}

.layout02_01 > .textBox {
    display: flex;
    flex-wrap: wrap;
    width:40%;
    justify-content: center;
    gap: 30px 0;
    margin-top:80px;
    text-align: center;
    
}


.layout02_01 > .textBox h4  {
    line-height: 1.4;
    margin-bottom:1.0em;

}

.layout02_01 > div  p {
    text-align: left;

}

.layout02_01 > .imgBox {
    width:60%;
}

.layout02_01 > .imgBox img {
    width:100%;
}


.topLayout03 {
    margin:80px 0;
}


.topLayout03 > .content {

}

.topLayout03 .layout03_01 {
    display: flex;
    gap:0 100px;
    align-items: flex-start;
    
}

.topLayout03 .layout03_01 > .sideBox {
    position: sticky;
    top:250px;
    width:350px;
    white-space: nowrap;
    text-align: center;
}
.topLayout03 .layout03_01 > .sideBox > strong {
    margin-bottom:1em;

}
.topLayout03 .layout03_01 > .sideBox p {
    color: #FFF;
    font-size: 60px;
    font-weight: 400;
    line-height: 100%; /* 60px */
}

.topLayout03 .layout03_01 > .contentBox {
    width:calc(100% - 430px);
    padding-left:80px;
    border-left:1px solid rgba(255,255,255,0.2);


}



.topLayout03 .layout03_01 h4 {
    font-size:var(--font-size-medium);
    margin-bottom:0.5em;
}
.topLayout03 .layout03_01 figure {
    margin:1.5em 0 2em;

}

.topLayout03 .layout03_01 figure figcaption {
    margin-top:0.5em;

}
.topLayout03 .layout03_01 figure:last-child {
    margin-bottom:0;
}

.topLayout03 .layout03_sep {
    text-align: center;
    margin:50px 0;
    width:350px;

}
.topLayout03 .layout03_sep img {
    display: inline;
    width:100px;
    

}
/*
.topLayout04 {
    position: relative;
    background-image: :url(/assets-shop/ver07/img/bg_leaf_01.png);
}

.topLayout04::before {
    position: absolute;
    left:0;
    top:0;
    transform: scale(50%);
    content:url(/assets-shop/ver07/img/bg_leaf_01.png);
    z-index: 0;


    
}
*/
.topLayout04 .content {
    text-align: center;

}

.topLayout04 .layout04_01 {
    display: flex;
    align-items: center;
    margin-top:5em;
    gap:0 80px;

}

.topLayout04 .layout04_01 > div {
    width:50%;
}

.topLayout04 .layout04_01 > img {
    width:50%;
}

.topLayout04 h3 {
    
    font-size: var(--font-size-title);
}

.topLayout04 h4 {
    font-size: var(--font-size-medium);
    margin-bottom:0.5em;
    text-align: left;


}

.topLayout04 .layout04_01 p {

    text-align: left;
    margin-bottom:4em;
}

.topLayout04 img {
    width:100%;
}


.topLayout05 {

}
.topLayout05 .content {
    padding-top:80px;
    padding-bottom:0;
    text-align: center;
}

.topLayout05 .layout05_01 {
    display: flex;
    align-items: flex-start;
    margin-top:2em;
    gap:0 50px;

}
.topLayout05 .layout05_01 > * {
    width:33.3%;
}

.topLayout05 .layout05_01 strong {
    font-size:var(--font-size-large);
    padding-bottom:10px;
    display: inline-block;

    
}

.topLayout05 .layout05_01 p {
    text-align: left;
}
.topLayout05 h3 {
    
    font-size: var(--font-size-title);
    margin-bottom:10px;
}

.topLayout05 h4 {
    font-size: var(--font-size-medium);
    margin-bottom:0.5em;


}

.topLayout05 img {
    margin-top:3em;
    display: inline-block;
}


.topLayout06 {
}
.topLayout06 .content {
    padding-bottom:80px;
    text-align: center;
    max-width: 900px;
}

.topLayout06 .layout06_01 {
    display: flex;
    align-items: flex-start;
    margin-top:2em;
    gap:0 50px;
    align-items: center;

}
.topLayout06 .layout06_01 > * {
    width:50%;
}

.topLayout06 .layout06_01 strong {
    /*color:var(--color-price);*/
    padding-bottom:10px;
    display: inline-block;

    
}

.topLayout06 .layout06_01 p {
    text-align: left;
    font-size:var(--font-size-medium);
}
.topLayout06 h3 {
    
    font-size: var(--font-size-title);
    margin-bottom:60px;
}


/*
================== */

.layoutA {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    margin-bottom:3em;
}

.layoutA img {
    width:40%;
}

.layoutA p {
    width:60%;
    padding:30px;

}

.layoutProfile {
    margin-bottom: 50px;
    background-color: #fff;
    padding:4em;
    display: flex;
    gap:50px;
    align-items: stretch;
}

.layoutProfile .title {
    display: inline-block;
    background-color: #fff;
    position: relative;
    flex-basis: 200px;
    border-right:rgba(0,0,0,0.05) 1px solid;
}
.layoutProfile .text {
    flex-basis: calc(100% - 250px);

}

.layoutProfile h3 {
    font-size: var(--font-size-title);
   
}

.layoutProfile h4 {
    position: absolute;
    bottom:0;
    left:0;
    color:var(--color-secondary);
    font-size: var(--font-size-title);

}

.layoutProfile h5 {
    font-size: var(--font-size-title);
}

.layoutProfile h5 span {
    color:var(--color-secondary);
    padding-left:2em;
    font-size:var(--font-size-titlesub);

}
.layoutProfile strong {

}

.layoutProfile p {
    margin-top:1.5em;
    font-size: var(--font-size-small);
}

.postageBox {
    background: rgba(255, 255, 255, 0.80);    padding:1em;
    /*border:var(--color-highlight) 1px solid;*/
    
    max-width: 1020px;
    margin:2em auto;


    
}


.postageBox strong {
    display: block;
    text-align: center;
    font-size:var(--font-size-medium);
    margin-bottom:1em;
    padding-bottom:0.5em;
    border-bottom: 1px solid #DCDCDC;



}

.postageBox dl {
    display: flex;
    flex-wrap: wrap;

    margin-bottom:1em;
    gap: 0.5em 0 ;
    margin-left:-2%;



}

.postageBox dl > dt {
    width:23%;

    padding: 0.2em 0 0.2em 0;
    text-align: left;


    border-bottom:rgba(0,0,0,0.1) 1px solid;
    text-align: left;
    font-size:var(--font-size-medium2);
    margin-left:2%;
    line-height: 1.2;


}

.postageBox dl > dt.long {
    width:24.6%;
}

.postageBox dl > dd {
    width:8%;
    font-weight:bold ;
    text-align: right;
    padding: 0.2em 0.5em;
    font-size:var(--font-size-medium2);
    border-bottom:rgba(0,0,0,0.1) 1px solid;
    line-height: 1.2;

}

#pageItemDetail .postageBox {
    margin-top:1em;
   

}

#pageItemDetail .postageBox dl > dt {
    width:30%;
   

}
#pageItemDetail .postageBox dl > dt small {
    /*display: block;*/

}
.#pageItemDetail .postageBox dl > dt.long {
    width:66.6%;

}
#pageItemDetail .postageBox dl > dd {
    width:18%;

}

.btnPostage {
    display: block !important;
    text-align: center;
    padding:0.5em 1em;
    background-color: #fff;
    color:var(--color-highlight);

    border:var(--color-secondary) 1px solid;
    margin:1.5em auto 0;

}


/* TOP
========================*/


.topNews {
    padding:80px 0 0;
    
}

.topNews h3 {
   font-size:var(--font-size-title);
   text-align: center;
   margin-bottom:1em;
}

.topNews ul {
    padding:0 0 0 70px;
    width:calc(100% - 180px);
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}
.topNews ul li span {
    color:var(--color-gray);
    width: 130px;
    padding-right:30px;
}

.topNews ul li {
    
    width:100%;
    
    border-bottom:1px dotted rgba(0,0,0,0.1);

}

.topNews ul li a {
    padding:15px 0;
    display: block;
    width:100%;
}


.topConcept {
    background: url(../img/bg_green01.png) center center repeat;
    background-size: 100%;
    position: relative;
    background-attachment: fixed;
    background-position-y:center;
    animation: bgScroll01 100s linear infinite;
    animation-direction:alternate-reverse;
    overflow: hidden;
    padding:80px 0 100px;

}

.topConcept .content {
    
}
.topConcept .content::before {
    position: absolute;
    content: '';
    background-image: url(../img/bg_cloud01_1.svg);
    background-position: right bottom;
    background-repeat: no-repeat;
    bottom: 40px;
    background-size: 60%;
    right: calc(50% - 700px);
    width: 600px;
    height: 204px;
    animation: bgSwing01 10s linear infinite;
    animation-direction: alternate-reverse;
    opacity: 0.7;

}

.topConcept .content::after {
    position: absolute;
    content: '';
    background-image: url(../img/bg_cloud01_2.svg);
    background-repeat: no-repeat;
    background-size: 60%;
    background-position: top left;
    top: 50px;
    left: calc(50% - 700px);
    width: 600px;
    height: 204px;
    animation: bgSwing01 10s linear infinite;
    animation-direction: alternate-reverse;
    opacity: 0.7;

}
.topConceptTitle {
    text-align: center;

}

.topConcept h4 {
    color:#fff;
    font-size:var(--font-size-titlesub);
    padding-bottom:0.5em;

}

.topConcept h3 {
    color:#fff;
    font-size:var(--font-size-large);
}

.topConcept p {
    margin-top:3em;
    color:#fff;
    font-size:var(--font-size-main);
}



.topQuality {
    padding:80px 0 0;
    background-color: #DDE8DA;
}

.topQuality h4 {
    color:var(--color-secondary);
}

.topQuality h3 {

}


.topQuality p {
    text-align: center;
}
.topQuality .imgBox {
    text-align: center;
    margin-top:50px
}
.topQuality img {
    display: inline;
}

.topTradition {
    padding:80px 0;
}
.topTradition .title{
    text-align: left;
}
.topTradition .title h4 {
    color:var(--color-secondary);
}

.topTradition .content {
    display: flex;
    gap:0 60px;
    align-items: center;
    max-width: 950px;
}

.topTradition .textBox {
    flex-basis: 60%;
}
.topTradition .imgBox {
    flex-basis: 40%;
    display: flex;
    gap:0 10px;
}

.topTradition .content02 {
    margin-top:80px;
    flex-direction: row-reverse;    
}

.topTradition .content02 .textBox {
    flex-basis: 50%;

}

.topTradition .content02 .imgBox {
    flex-basis: 50%;
}

.topTradition .imgBox figure {
    text-align: center;
}

.topTradition .imgBox figure figcaption {
    margin:0.5em 0;
}

.topFlavor {
    padding:80px 0;
    background-color: #DDE8DA;
    position: relative;
}

.topFlavor .content::before {
    position: absolute;
    content: '';
    background-image: url(../img/bg_cloud04_2.svg);
    background-position: right bottom;
    background-repeat: no-repeat;
    bottom: 40px;
    background-size: 60%;
    right: calc(50% - 700px);
    width: 600px;
    height: 204px;
    animation: bgSwing01 10s linear infinite;
    animation-direction: alternate-reverse;
    opacity: 0.7;

}

.topFlavor .content::after {
    position: absolute;
    content: '';
    background-image: url(../img/bg_cloud04_1.svg);
    background-repeat: no-repeat;
    background-size: 60%;
    background-position: top left;
    bottom: 150px;
    left: calc(50% - 700px);
    width: 600px;
    height: 204px;
    animation: bgSwing01 10s linear infinite;
    animation-direction: alternate-reverse;
    opacity: 0.7;

}

.topFlavor h4 {
    color:var(--color-secondary);
}

.topFlavor h3 {

}


.topFlavor p {
    text-align: left;
}
.topFlavor .imgBox {
    text-align: center;
    margin-top:50px
}
.topFlavor img {
    display: inline;
}

.topItemList {
    padding:0 0 80px;
    position: relative;
}

.topItemList::before {
    position: absolute;
    top:30px;
    content:'';
    width:100%;
    height:100%;
    background: url(../img/bg_honey01.svg) center 0 no-repeat;
    background-size: contain;
    display: block;
    animation: blink01 2s ease infinite;
    animation-direction:alternate-reverse;
    z-index: -1;
}


.topItemList h3 {
    text-align: center;
}

.topItemList h4 {
    color:var(--color-secondary);
    
}

.topItemList ul {
    
    display: flex;
    flex-wrap: wrap;
    margin-left:-60px;
    justify-content:center;
    align-items: stretch;
}

.topItemList ul li {
    margin-left:60px;

}

.topItemList ul li figure {

}


.topItemList ul li figure img {
    width:280px;
    height:280px;
    object-fit: cover;
    object-position: center center;
}

.topItemList ul li figure figcaption {
    margin:10px 0;
}

.topItemList ul li figure figcaption strong {
    display: block;
    font-size: var(--font-size-medium);
    font-weight: bold;

}


.topItemList ul li figure figcaption .price {
    display: inline-block;
    /*color:var(--color-price);*/
    font-size: var(--font-size-price);
    line-height: 1.2;
}


.topItemList ul li figure figcaption .price.dell {
    font-size: var(--font-size-main);

}

.topItemList ul li figure figcaption select {
    width:100%;

}


.topItemList.topIndex {
    color:#FFF !important;
}



.price_taxin {
    font-size: var(--font-size-main);
    /*color:var(--color-price);*/
}

.topFeatures {

}

.topFeatures .content {
    display: flex;
    width:100%;
    color:#fff;
}

.topFeatures .content > div {
    
    padding:50px 0;
    position: relative;
    width:50%;
}

.topFeatures .content > div::after {
    content:'';
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 1;
}

.topFeatures .content > div.contentLeft {
    background: url(../img/bg_matcha01.jpg) left bottom no-repeat;
    background-size: cover;

}

.topFeatures .content > div.contentRight {
    background: url(../img/bg_houjicha01.jpg) right bottom no-repeat;
    background-size: cover;
   
}

.topFeatures .content > div > div {
    position: relative;
    z-index: 2;
    width:450px;

    padding:50px;
    text-shadow: 0px 0px 3px #000 ;


}

.topFeatures .content > div > div .title {
    text-align: left;
    margin-bottom:30px;
}
.topFeatures .content > div.contentLeft > div{
    margin-left:calc(100% - 450px);
}

.topFeatures .content > div > div p {

}

.topFeatures .content > div  p > small {
    margin-top:1em;
    display: block;
    line-height: 1.4;
}

.topFeatures .content .textIndent {
    text-indent: -1em;
    padding-left:1em;
}


.topCommitment {
    background: url(../img/bg_green02.png) center top repeat;
    background-size: 100%;
    animation: bgScroll01 100s linear infinite;
    animation-direction:alternate-reverse;
    background-attachment: fixed;
    padding:80px 0;
    color:#fff;
    position: relative;

}

.topCommitment .content::before {
    position: absolute;
    content: '';
    background-image: url(../img/bg_cloud01_1.svg);
    background-repeat: no-repeat;
    background-size: 60%;
    right: 0px;
    top:80px;
    width: 600px;
    height: 204px;
    animation: bgSwing01 10s linear infinite;
    animation-direction: alternate-reverse;
}

.topCommitment .content::after {
    position: absolute;
    content: '';
    background-image: url(../img/bg_cloud01_2.svg);
    background-position: top left; 
    background-repeat: no-repeat;
    background-size: 60%;
    top: 40px;
    left: 0;
    width: 600px;
    height: 204px;
    animation: bgSwing01 10s linear infinite;
    animation-direction: alternate-reverse;

}

.topCommitment .content {
    display: flex;
    flex-wrap: wrap;
    justify-content:center;
    align-items: flex-start;

}

.topCommitment  .content_coulmn {
    display: flex;
    justify-content:center;
    align-items: flex-start;
    flex-direction:row;
    gap:50px;
    position: relative;
}

.topCommitment .title {
    border-radius: 100%;
    background-color: rgba(0,0,0,0.3);
    width:200px;
    height:200px;
    position: relative;
}

.topCommitment .title > div {
    width: 100%;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

.topCommitment .textBox  {
    width:300px;
}


.topCommitment .textBoxA {
    margin-top:-130px;
}

.topCommitment .textBoxC {
    margin-top:-100px;
}

.topCommitment .textBox h5 {
    font-size:var(--font-size-medium);
    background-color: rgba(0,0,0,0.3);
    border-radius: 50px;
    text-align: center;
    padding:0.2em 1em;
}

.topCommitment .textBox > p {
    margin-top:1em;

}


.topAbout {
    display: none;
    background: url(../img/bg_green02.png) center top repeat;
    background-size: 100%;
    animation: bgScroll01 100s linear infinite;
    animation-direction:alternate-reverse;
    background-attachment: fixed;
    padding:60px 0;
    color:#fff;
    
}

.topAbout .contentAreaA {
    display: flex;
    justify-content:center;
    flex-direction: row-reverse;
}

.topAbout .title {
    padding-left: 3em;
    height: max-content;
}

.topAbout .text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 0.2em;
    line-height: 2.5;
    padding-top:3em;
    height: max-content;
}

.topWhat {
    display: none;
    background: url(../img/bg_top_maccha.jpg) center center no-repeat;
    background-size: 100%;
    position: relative;
    background-size: cover;
    color:#fff;
    height:550px;
    overflow: hidden;


}

.topWhat .content {
    display: flex;
    justify-content: flex-start;
    flex-direction: row-reverse;
    top:50%;
    position: absolute;
    right:calc(50% - 500px);
    transform: translateY(-50%);

    
    
}

.topWhat .content::before {
    position: absolute;
    content: '';
    background-image: url(../img/bg_cloud03_1.svg);
    background-repeat: no-repeat;
    background-size: 60%;
    top: -30px;
    right: calc(50% - 1000px);
    width: 500px;
    height: 140px;
    animation: bgSwing01 10s linear infinite;
    animation-direction: alternate-reverse;


}

.topWhat .content::after {
    position: absolute;
    content: '';
    background-image: url(../img/bg_cloud03_2.svg);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 60%;
    bottom: -20px;
    left: calc(50% - 300px);
    width: 500px;
    height: 132px;
    animation: bgSwing01 10s linear infinite;
    animation-direction: alternate-reverse;

}


.topWhat .title {
    padding-left: 3em;
    text-shadow: 0px 0px 3px #000 ;
}

.topWhat .text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 0.2em;
    line-height: 2.5;
    padding-top:3em;
    text-shadow: 0px 0px 50px #000 ;

}

.topRecomend {
    padding:80px 0;
    background-size: cover;
    

}

.topRecomend .content {
}

.topRecomend h4 {
    color:var(--color-secondary);
}
.topRecomend h3 {
}


.topRecomend .title {
    

}

.topRecomend .text {
    text-align: center;
    line-height: 2.0;

}

.topRecomend ul {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-left:-10px;
    margin-top:50px;
    margin-bottom:30px;
}

.topRecomend ul li {
    position: relative;
    margin-left:10px;
}

.topRecomend ul li figure img {
    width:500px;

}

.topRecomend li figure figcaption {
    position: absolute;
    writing-mode: vertical-rl;
    white-space: nowrap;
    right:-10px;
    top:-10px;

    background-color: var(--color-primary);
    padding:1em 0.4em;
    letter-spacing: 0.3em;

}

/* BLOG
========================*/
.blogListMain {


}

.blogListMain .blog_head_image.hide {
    display: none;

}
/* お問い合わせ
========================*/
.inquirySection h1 {
    display: none;
}

input,
textarea {
   background-color: var(--color-bg-gray);
   margin: 0;
	border: none;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
    padding: 0.5em 1em;
    width: 100%;
    border-radius: 5px;

   
}


textarea {
    min-height:10em;
}

select {
    background-color: #fff;  
    padding: 0.5em 1em; 
}

.inquirySection {


}

.inquirySection dl {
    width:100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
}

.inquirySection dl dt {
    
    width:300px;
    padding:1em 0 0.5em;
}

.inquirySection dl dt span {
    font-size:var(--font-size-titlesub);
    margin:0 0.5em;
}

.inquirySection dl dd {
    width:calc(100% - 300px);
    padding:0.5em 0;

}

.inquirySection dl dd.error {

    width:100%;
}

.inquirySection .error-message {
    position: relative;
    background-color: #000;
    color:#fff;
    padding:0.2em 1em;
    border-radius: 5px;
}

.inquirySection .error-message::before {
    content: "";
    position: absolute;
    top: -30px;
    left: 30px;
    margin-left: -15px;
    border: 15px solid transparent;
    border-bottom: 15px solid #000;
}

.inquirySection .control-panel {
    text-align: center;
}

*[type=submit] {
    color:#fff;
    width:100%;
    padding:0.7em 1em;
    border-radius: 30px;
    background: var(--text_black, #3A3A3A);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.40);
    font-size:var(--font-size-main);
    font-weight: bold;
    border: 0px;
    display: block;
    margin: 0.5em 0;


}


/* 特定商取引法
========================*/
#law {
    width:100%;

}

#law h2 {
    display: none;
}

#law h3 {

    padding:2em 0 0.5em;

}

#law h3
#law p
#law div

{
    display: block;
    width:100%;
    padding:1em 0 0.5em;
}


#privacy {

}
#privacy h2 {
    display: none;

}

#privacy dl,
#privacy ul

 {
    padding:1em 0 0.5em;
}

#privacy dl dt {
    padding:1em 0;
}
#privacy dl dd {
    padding: 0 0 1em;
}


#privacy ul li {
    padding:0.2em 0 0.2em 3.5em;
    text-indent: -3.5em;
}


#pageItemDetail {

}

/* 商品詳細
========================*/

#pageItemDetail .itemDetailBox {
    display: flex;
    flex-wrap: nowrap;
    
}

#pageItemDetail .itemDetailBox .item {
    width:50%;
    padding-right:50px;
}

#pageItemDetail .itemDetailBox .purchase {
    width:50%;

}



#pageItemDetail .itemImg {
    
    
}

#pageItemDetail .itemImgSlide {
    flex: 1;
}

#pageItemDetail #slideImg .imgBox {
    border-radius: 10px;
    text-align: center;
}

#pageItemDetail #slideImg .imgBox img {
    width: 100%;
    vertical-align: middle;
}

#pageItemDetail #slideImg .imgBox img.label_image {
    width: auto;
}


#pageItemDetail #slideImgPager {
    overflow: hidden;
    padding: 0 0 0 0;
    margin-top: 10px;
    display: flex;
    align-items: flex-start;
}

#pageItemDetail #slideImgPager li + li {
    margin-top: 0;
    margin-left:5px;
}

#pageItemDetail #slideImgPager .smallImgBox {
    height: 64px;
    line-height: 64px;
    text-align: center;
    width: 64px;
}

#pageItemDetail #slideImgPager .smallImgBox img {
    max-height: 64px;
    max-width: 64px;
    vertical-align: middle;
}

#pageItemDetail #slideImgPager .mCSB_inside > .mCSB_container {
    margin: 0;
    display: flex;
    align-items: flex-start;
}

#pageItemDetail .purchase {
    box-sizing: border-box;
}

#pageItemDetail h1.itemTitle {
    font-size: var(--font-size-title);
    text-align: left;
    font-weight: bold;
    margin-bottom: 20px;
}

#pageItemDetail #purchase_form {
    color: #000;
    margin-bottom: 35px;
}

#pageItemDetail #purchase_form select {
    cursor: pointer;
}

#pageItemDetail #purchase_form #purchaseSelect {
    margin: 0;
}

#pageItemDetail #purchase_form .purchaseElement {
    margin: 5px 0 15px;
    overflow: hidden;
}

#pageItemDetail #purchase_form input,
#pageItemDetail #purchase_form select {
    width: 100%;
    display: block;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
}

#pageItemDetail #purchase_form #itemSelect input::placeholder {
    font-size: 14px;
    color: #CCCCCC;
}

#pageItemDetail #purchase_form label {
    font-size: 14px;
    margin: 16px 0 8px 0;
    line-height: 1em;
    display: block;
}

#pageItemDetail #purchase_form .itemOptionElement, #variationSelectWrap {
    max-width: 100%;
}

#pageItemDetail #purchase_form .itemOption__caption {
    font-size: 12px;
    margin: 8px 0 8px 0;
    line-height: 1.5em;
    display: block;
}

#pageItemDetail #purchase_form .itemOption__bottomCaptionBlock {
    overflow: hidden;
}

#pageItemDetail #purchase_form .itemOption__caption--error {
    float: left;
    font-size: 12px;
    line-height: 1em;
    display: block;
    color: #F07F7F;
    transform-style: preserve-3d;
}

#pageItemDetail #purchase_form .itemOption__count {
    float: right;
    font-size: 12px;
    line-height: 1em;
    display: block;
    color: #777777;
}

#pageItemDetail #purchase_form .itemOption__count--error {
    color: #F07F7F;
}

#pageItemDetail #purchase_form #itemSelect .itemOption__input[data-dirty="true"][data-has-error="true"] {
    border: #F07F7F 1px solid;
}

#pageItemDetail #purchase_form #itemSelect select.itemOption__select,
#pageItemDetail #purchase_form #itemSelect #valiationSelect,
#pageItemDetail #purchase_form #itemSelect #amountSelect {
    height: auto;
    white-space: normal;
    max-width: 100%;
    min-height: 2.1em;
    appearance: none;
    padding-right: 1em;
    line-height: initial;
    background-repeat: no-repeat;
    background-position: right 0.35em center;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2210%22%20height%3D%226%22%20viewBox%3D%220%200%2010%206%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cstyle%3E%0A%20%20%20%20%20%20.cls-1%20%7B%0A%20%20%20%20%20%20%20%20fill%3A%20%23fafafa%3B%0A%20%20%20%20%20%20%20%20fill-rule%3A%20evenodd%3B%0A%20%20%20%20%20%20%20%20filter%3A%20url(%23filter)%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E%0A%20%20%20%20%3Cfilter%20id%3D%22filter%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2210%22%20height%3D%226%22%20filterUnits%3D%22userSpaceOnUse%22%3E%0A%20%20%20%20%20%20%3CfeFlood%20result%3D%22flood%22%20flood-color%3D%22%23333%22%20flood-opacity%3D%220.50%22%2F%3E%0A%20%20%20%20%20%20%3CfeComposite%20result%3D%22composite%22%20operator%3D%22in%22%20in2%3D%22SourceGraphic%22%2F%3E%0A%20%20%20%20%20%20%3CfeBlend%20result%3D%22blend%22%20mode%3D%22multiply%22%20in2%3D%22SourceGraphic%22%2F%3E%0A%20%20%20%20%3C%2Ffilter%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cpath%20id%3D%22icon-arrow-down%22%20class%3D%22cls-1%22%20d%3D%22M5%2C6l5-6H0Z%22%2F%3E%0A%3C%2Fsvg%3E");
}

#pageItemDetail #purchase_form #amountSelect {
    width: auto;
    max-width: 375px;
}

#pageItemDetail #purchase_form .purchaseElement label {
    color: #000;
    font-size: 14px;
    margin-right: 10px;
}

#pageItemDetail .report {
    text-align: left;
}

#pageItemDetail .report a {
    color: #aaa;
    display: block;
    font-size: 11px;
    margin-right: 15px;
    padding-top: 3px;
    text-align: right;
}

#pageItemDetail .report a:hover {
    text-decoration: underline;
}

#pageItemDetail .itemPrice h2 {
    color:var(--color-gray);
    font-size: var(--font-size-title);
    font-weight: normal;
    letter-spacing: 1px;
    margin: 20px 0;
    text-align: left;
}

#pageItemDetail .itemPrice h2 small{
    font-size: var(--font-size-small);
}

#pageItemDetail .itemPrice .discountPrice__default {
    color: #666;
    display: inline-block;
    font-size: 16px;
    line-height: 20px;
    margin-right: 10px;
    text-decoration: line-through;
    vertical-align: top;
}

#pageItemDetail .itemPrice .discountPrice__ratio {
    border: 1px solid #e75c5c;
    color: #e75c5c;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    line-height: 18px;
    padding: 0 5px;
    vertical-align: top;
}

#pageItemDetail .itemPrice .discountPrice__calcPrice {
    color: #e75c5c;
    display: block;
    font-weight: bold;
    line-height: 1.3;
    padding: 0 0 0;
}

#pageItemDetail .purchase .itemPrice_soldout {
    margin-top: 25px;
}

#pageItemDetail .purchase .itemPrice_soldout h2 {
    display: block;
    margin: 0;
    text-decoration: line-through;
}

#pageItemDetail .purchase .itemPrice_soldout > span {
    color: #ed4242;
    display: block;
    font-size: 16px;
    margin-bottom: 20px;
}

#pageItemDetail .purchase .comingSoon {
    color: #11beae;
    font-size: 19px;
    margin: 0 0 20px;
}

#pageItemDetail .preOrder, #pageItemDetail .lottery, #pageItemDetail .takeout, #pageItemDetail .community {
    margin: 16px 0;
}

#pageItemDetail .preOrder__label, #pageItemDetail .lottery__label, #pageItemDetail .takeout__label {
    border: 1px solid #252525;
    border-radius: 2px;
    color: #252525;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 6px 4px;
    margin: 0 0 4px 0;
}

#pageItemDetail .preOrder__data, #pageItemDetail .lottery__data {
    font-size: 12px;
    color: #252525;
}

#pageItemDetail .takeout .takeout__data  {
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

#pageItemDetail .lottery > * {
    margin-bottom: 8px;
}

#pageItemDetail #itemAttention {
    color: #868686;
    font-size: 11px;
    line-height: 1.5em;
    margin-bottom: 25px;
}

#pageItemDetail #itemAttention .attention a {
    color: #868686;
}

#pageItemDetail #itemAttention .attention a:hover {
    text-decoration: underline;
}

#pageItemDetail #itemAttention .attention.deliveryShortestDay {
    border: 1px solid #11BEAE;
    border-radius: 2px;
    color: #11BEAE;
    display: inline-block;
    font-size: 10px;
    font-weight: bold;
    margin-bottom: 25px;
    padding: 5px;
    width: 100%;
    text-align: center;
}

#pageItemDetail #itemAttention .attention.free {
    font-weight: bold;
}

#pageItemDetail #itemAttention .attention.free .free__text {
    color: #11BEAE;
    font-weight: bold;
}

#pageItemDetail #itemAttention   .takeout__text {
    color: #252525;
    cursor: pointer;
    font-weight: bold;
    margin: 0 3px;
    text-decoration: underline;
}
#pageItemDetail #itemAttention .attention .postageOpen {
    display: none;

}
#pageItemDetail #itemAttention .attention.salesPeriod--term {
    background: #ceefeb;
    border: 1px solid #11beae;
    color: #11beae;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.7;
    margin-bottom: 36px;
    padding: 10px;
}

#pageItemDetail #itemAttention .attention.salesPeriod--willStart {
    background: #ceefeb;
    border: 1px solid #11beae;
    color: #11beae;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.7;
    margin-bottom: 30px;
    padding: 10px;
    text-align: center;
}

#pageItemDetail #itemAttention .attention.salesPeriod--finish {
    border: 1px solid #999;
    color: #999;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.7;
    margin-bottom: 36px;
    padding: 10px;
    text-align: center;
}

#pageItemDetail .itemDescription {
    margin: 20px 7px 15px 0;
}

#pageItemDetail .itemDescription p {
    line-height: 24px;
}

body.shop #embedded-tag {
    font-size: 14px;
    letter-spacing: 1px;
    line-height: 24px;
    padding: 20px 0 0;
}

#pageItemDetail #embedded-tag p {
    color: #000;
    margin: 0 0 5px;
}

#pageItemDetail #embedded-tag textarea {
    border: 1px solid #e2e2e2;
    border-radius: 5px;
    color: #838383;
    padding: 5px;
    width: 100%;
}

#pageItemDetail #purchase_form .purchaseButton {
    margin: 10px 0 0;
    text-align: center;
}

#pageItemDetail #purchase_form .purchaseButton .purchaseButton__btn {
   border: none;
    width: 100%;
    padding:1em 1em;
}

#pageItemDetail #purchase_form .purchaseButton .purchaseButton__btn.purchaseButton__btn--outOfStock {
    color: #fff;
    background: #888;
}

#pageItemDetail #purchase_form .purchaseButton .purchaseButton__btn:hover {
    cursor: pointer;
    opacity: 0.7;
}

#pageItemDetail #purchase_form .purchaseButton .purchaseButton__btn.purchaseButton__btn--comingSoonStay:disabled {
    cursor: not-allowed;
    opacity: 1;
}

#pageItemDetail #purchase_form .purchaseButton .purchaseButton__btn.purchaseButton__btn--comingSoonStay {
    background: #eeeeee;
    color: #999999;
    cursor: not-allowed;
    opacity: 1;
}

#pageItemDetail #purchase_form .purchaseButton .purchaseButton__btn.purchaseButton__btn--notApplying:disabled {
    cursor: not-allowed;
    opacity: 1;
}

#pageItemDetail #purchase_form .purchaseButton .purchaseButton__btn:disabled {
    background: #eeeeee;
    color: #999999;
    cursor: not-allowed;
    opacity: 1;
}

#pageItemDetail #purchase_form .purchaseButton .purchaseButton__btn--disabled {
    background: #eeeeee;
    color: #999999;
    cursor: not-allowed;
    opacity: 1;
}

#pageItemDetail #purchase_form .purchaseButton .purchaseButton__btn:disabled:hover {
    opacity: 1;
}

#pageItemDetail #purchase_form .purchaseButton .purchaseButton__btn--disabled:hover {
    opacity: 1;
}

#pageItemDetail .shareButtons {
    display: flex;
}

#pageItemDetail .shareButtons > div{
    margin-right: 4px;
}
.itemCb #cboxPrevious {
    background: url("{BASEURL}/i/controls.png") no-repeat 0 0;
    bottom: 0;
    height: 20px;
    left: 0;
    overflow: visible;
    text-indent: -9999px;
    width: 20px;
}
.itemCb #cboxNext {
    background: url("{BASEURL}/i/controls.png") no-repeat -22px 0;
    bottom: 0;
    height: 20px;
    left: 30px !important;
    overflow: visible;
    text-indent: -9999px;
    width: 20px;
}
.itemCb #cboxClose {
    background: url("{BASEURL}/i/controls.png") no-repeat -52px 0;
    height: 20px;
    overflow: visible;
    text-indent: -9999px;
    width: 20px;
}
.itemCb #cboxContent button {
    border: none;
}
.itemCb:focus {
    outline: none;
}

#openIllegalReport {
    font-size: var(--font-size-small);
    background-color: #fff;
    padding:0.2em 1em;
    border-radius: 5px;
}

.detaiRecommend {
    background-color:#DDEAD9 ;
    padding:30px 0 !important;
    margin-top:30px !important;
}

/* ANIMTATION
========================*/
@keyframes bgFade01 {
    from { background-position: 0 0; transform: scale(1.2); } 
    to { background-position: 0 0; transform: scale(1); } 
}

@keyframes bgSwing01 {
    from { background-position-x: calc(50% - 40px); } 
    to { background-position-x: calc(50% + 40px); } 
}

@keyframes bgSwing02 {
    from { background-position-x: calc(100%); } 
    to { background-position-x:  calc(100% - 80px); } 
}


@keyframes bgScroll01 {
    from { background-position-x:  0px; } 
    to { background-position-x: 1000px; } 
}

@keyframes blink01{
    0% {opacity:0.2;}
    100% {opacity:1;}
}

@keyframes navIn {
    0% {top:-100vh;}
    100% {top:0;}
}