@charset "utf-8";
/**************************
  reset :start 
*************************/

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    line-height: 1;
    vertical-align: baseline;
    background: transparent;
}

ul {
    list-style-type: none;
}

button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
}

a {
    text-decoration: none !important;
}

/**************************
  reset :end 
*************************/

html {
    box-sizing: border-box;
    /* scroll-behavior: smooth; */
    font-size: 62.5%;
}

@media screen and (min-width: 821px) and (max-width: 1536px) {
    html {
        font-size: 0.65vw;
    }
}

@media screen and (max-width: 820px) {
    html {
        font-size: 1.3vw;
    }
}

@media screen and (max-width: 640px) {
    html {
        font-size: 1.3vw;
    }
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    height: 100%;
    -webkit-text-size-adjust: 100%;
    font-size: 100%;
    line-height: 1;
    list-style: none;
    font-feature-settings: "palt";
    font-family: "メイリオ", Meiryo, "ヒラギノ角ゴシック", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
        "ヒラギノ角ゴ ProN W3", sans-serif;
    font-weight: 400;
}

#GoutisEstate {
    margin: 0 auto;
    height: 100%;
    overflow: hidden;
}

#GoutisEstate img {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.container {
    width: 153.6rem;
    margin: 0 auto;
}

@media screen and (max-width: 1536px) {
    .container {
        width: 100%;
        margin: 0 auto;
    }
}

@media screen and (max-width: 820px) {
    .container {
        width: 100%;
        margin: 0 auto;
    }
}

.a-underline {
    text-decoration: underline;
}

.color-pink {
    color: #e5004d;
}

.color-green {
    color: #579d36;
}

.color-b {
    color: #011b1c;
}

.st-sp {
    display: none;
}

@media screen and (max-width: 820px) {
    .st-sp {
        display: block;
    }
}

/**************************
  header :start 
*************************/

header {
    position: absolute;
    z-index: 2;
    max-width: 1536px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 auto;
    width: 100%;
}

.headerLogo {
    padding: 2.3rem 0 0 5.6rem;
}

@media screen and (max-width: 820px) {
    .headerLogo {
        padding: 1.4rem 0 0 1.8rem;
    }

    .headerLogo img {
        width: 12.2rem;
    }

}

/**************************
  header :end
*************************/

/**************************
  Mainvisual :start 
*************************/

#Mainvisual .M-Box {
    position: relative;
    overflow: hidden;
}

#Mainvisual .M-Image img {
    display: block;
    width: 100%;
    height: auto;
}

/**************************
  Mainvisual :end
*************************/

/**************************
  ProductContent :start 
*************************/

.ProductContent {
    overflow: hidden;
    position: relative;
    z-index: 2;
}

@media screen and (max-width: 820px) {
    .ProductContent {
        overflow: auto;
        position: static;
    }
}

.ProductContent .PC-Wrapper {
    width: 860px;
    margin: 0 auto;
}

@media screen and (max-width: 820px) {
    .ProductContent .PC-Wrapper {
        width: 100%;
        margin: 0 auto;
    }
}

#sakura .PC-Visual-bg {
    padding: 28.9rem 0 22rem;
    background: url(./../img02/sakura-bg.png) no-repeat;
    background-size: cover;
}

@media screen and (max-width: 820px) {
    #sakura .PC-Visual-bg {
        padding: 11.9rem 0 12.8rem;
        background: url(./../img02/sakura-bg_sp.jpg) no-repeat;
        background-size: cover;
    }
}

/* #sakura .PC-Bg-ProductDescription {
  position: absolute;
  z-index: 2;
  top: 23.8rem;
  right: 0;
  width: 19.5rem;
  height: 43.6rem;
} */

.PC-Title {
    position: absolute;
    top: 12.5rem;
    left: 18.5rem;
}

.PC-TitleImage img {
    width: 48.1rem;
    height: 14.8rem;
}


@media screen and (max-width: 820px) {
    .PC-Title {
        position: static;
        padding: 0 5.6%;
    }

    .PC-TitleImage {
        margin: 5.4rem 0 6.4rem;
    }

    .PC-TitleImage img {
        width: 48.2rem;
        height: 13.7rem;
    }
}

.PC-Images-Outer {
    position: absolute;
    top: 11.6rem;
    right: 0;
}

@media screen and (max-width: 820px) {
    .PC-Images-Outer {
        position: static;
    }
}

.PC-Images {
    position: relative;
    z-index: 1;
    width: 70rem;
    height: 35.6rem;
}

.PC-Images img {
    width: 100%;
    height: auto;
}

@media screen and (max-width: 820px) {
    .PC-Images {
        position: relative;
        z-index: 1;
        margin-left: auto;
        width: 56.2rem;
        height: 45.8rem;
    }
}

.PC-Images::before {
    content: "";
    display: block;
    position: absolute;
    width: 20.8rem;
    height: 17.4rem;
    top: -2.8rem;
    left: -9.6rem;
    z-index: 2;
    background: url(./../img02/icon_limited-sakura.png) no-repeat;
    background-size: contain;
}

@media screen and (max-width: 820px) {
    .PC-Images::before {
        width: 18.3rem;
        height: 13.5rem;
        top: -3.9rem;
        left: -8rem;
    }
}

.PC-Images img {
    width: 100%;
    height: auto;
}

/* .PC-Catch {} */

@media screen and (max-width: 820px) {
    .PC-Catch {
        padding: 0 5.6%;
    }
}

.PC-CatchText {
    font-size: 2.8rem;
    line-height: 1.96;
    color: #db2e2e;
    margin: 0 22rem;
}

@media screen and (max-width: 820px) {
    .PC-CatchText {
        margin: 0;
        padding-left: 2.3rem;
        font-size: 3rem;
        line-height: 2.06;
        color: #db2e2e;
        letter-spacing: .037em;
    }

    .PC-CatchText .color-pink {
        font-size: 3.6rem;
        line-height: 1.83;
    }
}

.PC-CatchTextBlock {
    display: block;
}

.PC-Detaile {
    margin-top: 11.8rem;
    padding: 0 2rem;
}

@media screen and (max-width: 820px) {
    .PC-Detaile {
        position: relative;
        margin-top: 7rem;
        padding: 0 0 0 5.6%;
    }
}

.PC-DetaileBox {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

@media screen and (max-width: 820px) {
    .PC-DetaileBox {
        display: block;
    }
}

.PC-DetaileImage {
    width: 30.5rem;
    height: 30.5rem;
}

@media screen and (max-width: 820px) {
    .PC-DetaileImage {
        position: absolute;
        top: 0;
        right: 0;
        width: 30.6rem;
        height: 30.4rem;
    }
}

.PC-DetaileDescription {
    margin-top: -0.8rem;
    margin-bottom: -0.8rem;
    margin-left: 3.8rem;
    width: 46rem;
    font-size: 2rem;
    line-height: 1.8;
    color: #dc2f2f;
    letter-spacing: 0.01em;
}

@media screen and (max-width: 820px) {
    .PC-DetaileDescription {
        margin-top: 0;
        margin-bottom: 0;
        margin-left: 2.3rem;
        max-width: 45rem;
        font-size: 2.4rem;
        line-height: 1.83;
        letter-spacing: 0.08em;
    }

    .PC-DetaileDescription br {
        display: none;
    }

    .PC-DetaileDescription br.st-sp {
        display: block;
    }
}

.PC-DetaileDescription-s {
    display: inline-block;
    font-size: 1.6rem;
}

@media screen and (max-width: 820px) {
    .PC-DetaileDescription-s {
        margin-top: 0;
        font-size: 2.2rem;
        line-height: 2;
        letter-spacing: 0.08em;
    }
}

.PC-Cart {
    margin-top: 10rem;
}

@media screen and (max-width: 820px) {
    .PC-Cart {
        margin-top: 13rem;
    }
}

/**************************
  ProductContent :end
*************************/

/**************************
  ProductInformation :start 
*************************/

.ProductInformation {
    position: relative;
    z-index: 1;
}

.SeasonCatch {
    pointer-events: none;
    z-index: 10;
    position: absolute;
    width: 2.6rem;
    top: calc((54.5rem) + (-7.5rem));
    right: 10.2rem;
}

@media screen and (max-width: 820px) {
    .SeasonCatch {
        top: -24rem;
        right: 5.6%;
        width: 3.7rem;
    }

    .SeasonCatch img {
        width: 100%;
        height: auto;
    }
}

.PI-bg {
    margin-top: -54.5rem;
    padding-top: 54.5rem;
    padding-bottom: 15.8rem;
    background: url(./../img02/pi-bg.jpg) no-repeat;
    background-size: cover;
    background-position: 0 bottom;
}

@media screen and (max-width: 820px) {
    .PI-bg {
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 50.7rem;
        background: url(./../img02/pi-bg_sp.jpg) no-repeat;
        background-position: inherit;
        background-size: contain;
        background-position: bottom;
    }
}

.PI-Description-top {
    display: flex;
    justify-content: flex-start;
    margin-top: 4rem;
    margin-right: 10rem;
}

@media screen and (max-width: 820px) {
    .PI-Description-top {
        display: block;
        margin-top: 0;
        margin-right: 0;
    }
}

.PI-Image-Outer {
    padding: 9rem 0 0 0;
}

.PI-Image {
    width: 53.9rem;
    height: 25.7rem;
}

@media screen and (max-width: 820px) {
    .PI-Image-Outer {
        padding: 0;
        margin-bottom: 6rem;
    }
}

.PI-TextGroup {
    margin-left: 4.3rem;
}

@media screen and (max-width: 820px) {
    .PI-TextGroup {
        margin: 0;
        padding: 0 5.6%;
    }
}

.PI-Text {
    font-size: 1.8rem;
    line-height: 1.88;
    letter-spacing: 0.01em;
    color: #000000;
}

.PI-Head-Outer {
    margin-bottom: 4.4rem;
}

@media screen and (max-width: 820px) {
    .PI-Head-Outer {
        margin-bottom: 4rem;
    }
}

@media screen and (max-width: 820px) {
    .PI-Head {
        letter-spacing: 0.13em;
    }
}

.PI-HeadText {
    letter-spacing: 0.01em;
    font-size: 2.4rem;
}

@media screen and (max-width: 820px) {
    .PI-HeadText {
        font-size: 3.2rem;
    }
}

.PI-HeadText-s,
.PI-HeadText-m,
.PI-HeadText-b {
    display: block;
}

.PI-HeadText-s {
    font-size: 1.8rem;
    line-height: 1.8;
}

@media screen and (max-width: 820px) {
    .PI-HeadText-s {
        font-size: 2.4rem;
        line-height: 1.83;
    }
}

.PI-HeadText-m,
.PI-HeadText-b {
    font-size: 2.4rem;
    line-height: 1.88;
}

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

    .PI-HeadText-m,
    .PI-HeadText-b {
        font-size: 3.2rem;
        line-height: 1.375;
    }
}

.PI-HeadTextBig {
    font-size: 2.8rem;
}

@media screen and (max-width: 820px) {
    .PI-HeadTextBig {
        font-size: 3.8rem;
        line-height: 1.39;
        letter-spacing: 0.13em;
    }
}

/* .PI-Text:not(:first-of-type){} */

.PI-Description-bottom {
    margin: 4rem 0 0 23rem;
}

@media screen and (max-width: 820px) {
    .PI-Description-bottom {
        margin: 6.6rem 0 0 0;
        padding: 0 5.6%;
    }
}

.PI-TextParagraph {
    font-size: 1.8rem;
    line-height: 1.88;
    color: #000000;
    letter-spacing: 0.01em;
}

@media screen and (max-width: 820px) {
    .PI-TextParagraph {
        font-size: 2.4rem;
        line-height: 1.83;
        letter-spacing: 0.08em;
    }

    .PI-TextParagraph br {
        display: none;
    }

    .PI-TextParagraph br.st-sp {
        display: block;
    }
}

.PI-TextParagraph .PI-TextBig {
    font-size: 3.2rem;
    letter-spacing: 0.15em;
    line-height: 1.56;
}

.PI-TextParagraph-Big {
    font-size: 2.4rem;
    padding-right: .5em;
}

@media screen and (max-width: 820px) {
    .PI-TextParagraph-Big {
        padding-right: 0;
    }
}



@media screen and (max-width: 820px) {
    .PI-TextParagraph .PI-TextBig {
        font-size: 4rem;
        letter-spacing: 0.15em;
        line-height: 1.5;
    }
}

.PI-TextBig {
    display: block;
}

.PI-TextParagraph:not(:first-of-type) {
    margin-top: 2em;
}

@media screen and (max-width: 820px) {
    .PI-TextParagraph:not(:first-of-type) {
        margin-top: 2em;
    }
}

.PI-CourseList {
    margin-top: 5.2rem;
}

@media screen and (max-width: 820px) {
    .PI-CourseList {
        margin-top: 6rem;
    }
}

.PI-Course {
    position: relative;
    display: inline-block;
    z-index: 1;
    vertical-align: top;
    width: 10rem;
    height: 8.3rem;
    background-size: cover;
    background: #062626;
    border-radius: 6px;
    transition: background .6s ease;
}

.PI-Course::after {
    content: "";
    display: block;
    position: absolute;
    z-index: 2;
    bottom: 0;
    right: 0;
    width: 10rem;
    height: 8.3rem;
    background: url(https://shop.j-oil.com/s/goutis_estate/img/pi-course.png) no-repeat;
    background-size: cover;
    pointer-events: none;
}

.PI-Course:hover {
    background: #262626;
}

@media screen and (max-width: 820px) {
    .PI-Course {
        display: inline-block;
        vertical-align: top;
        width: 12rem;
        height: 12rem;

    }
}

.PI-Course a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 2rem;
    line-height: 1.2;
    color: #fff;
    letter-spacing: 0.08em;

}

@media screen and (max-width: 820px) {
    .PI-Course a {
        font-size: 2.4rem;
        line-height: 1.375;
        color: #fff;
        letter-spacing: 0.08em;
    }
}

.PI-Course:not(:first-of-type) {
    margin-left: 2rem;
}

/**************************
  ProductInformation :end
*************************/

#Award {
    padding: 12rem 0 11.6rem;
    background: url(./../img03/a-bg_pc.jpg) no-repeat;
    background-size: cover;
}

@media screen and (max-width: 820px) {
    #Award {
        padding: 11rem 0 10rem;
        background: url(./../img03/a-bg_sp.jpg) no-repeat;
        background-position: center;
        background-size: cover;
    }
}

@media screen and (max-width: 820px) {
    #Award .inner {
        width: 100%;
    }
}

.A-Title {
    text-align: center;
    color: #fff;
    max-height: 1380px;
}

.A-Title::before {
    content: "";
    display: block;
}

.A-Title::before {
    width: 4.6rem;
    height: 3.4rem;
    margin: 0 auto;
    background: url(./../img02/a-title_top.png) no-repeat;
    background-size: cover;
}

@media screen and (max-width: 820px) {
    .A-Title::before {
        width: 4.6rem;
        height: 3.4rem;
        margin: 0 auto;
        background: url(./../img02/a-title_top.png) no-repeat;
        background-size: cover;
        margin-bottom: 3.5rem;
    }
}

.A-Title-decoration {
    display: flex;
    justify-content: center;
    align-items: center;
}

.A-Title-decoration::before,
.A-Title-decoration::after {
    content: "";
    display: inline-block;
}

.A-Title-decoration::before {
    width: 6.2rem;
    height: 18.4rem;
    background: url(./../img02/a-title-left.png) no-repeat;
    background-size: cover;
    margin-right: 4.2rem;
}

@media screen and (max-width: 820px) {
    .A-Title-decoration::before {
        width: 5.2rem;
        height: 15.4rem;
        background: url(./../img02/a-title-left.png) no-repeat;
        background-size: cover;
        margin-right: 8.2rem;
    }
}

.A-Title-decoration::after {
    width: 6.3rem;
    height: 18.4rem;
    background: url(./../img02/a-title-right.png) no-repeat;
    background-size: cover;
    margin-left: 4.2rem;
}

@media screen and (max-width: 820px) {
    .A-Title-decoration::after {
        width: 5.3rem;
        height: 15.5rem;
        background: url(./../img02/a-title-right.png) no-repeat;
        background-size: cover;
        margin-left: 8.2rem;
    }
}

.A-TitleBox {
    padding: 3rem 0 0 0;
    height: 184px;
}

@media screen and (max-width: 820px) {
    .A-TitleBox {
        padding: 3.6rem 0 0 0;
        height: auto;
    }
}

.A-TitleText {
    position: relative;
    display: block;
    font-size: 3.4rem;
    line-height: 1.52;
    letter-spacing: 0.01em;
    padding: 0 2.5rem 1.9rem;
    margin-bottom: 1.2rem;
}

@media screen and (max-width: 820px) {
    .A-TitleText {
        position: relative;
        display: block;
        font-size: 3.2rem;
        padding: 0 0 2.2rem 0;
        margin-bottom: 1.2rem;
    }
}

.A-TitleText::before {
    content: "";
    display: block;
    width: 100%;
    height: 0.2rem;
    background: #fff;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

@media screen and (max-width: 820px) {
    .A-TitleText::before {
        content: "";
        width: 37.2rem;
        height: 0.2rem;
        background: #fff;
        position: absolute;
    }
}

.A-TitleText-sub {
    display: block;
    line-height: 1;
    font-size: 2.6rem;
}

@media screen and (max-width: 820px) {
    .A-TitleText-sub {
        display: block;
        line-height: 1;
        font-size: 2.8rem;
    }
}

.A-Title::after {
    margin: 2.2rem auto 0;
    width: 68.5rem;
    height: 5rem;
    background: url(./../img02/a-title_bottom.png) no-repeat;
}

@media screen and (max-width: 820px) {
    .A-Title::after {
        margin: 3.8rem auto 0;
        width: 70rem;
        height: 5rem;
        background: url(./../img02/a-title_bottom_sp.png) no-repeat;
        background-size: cover;
    }
}

.A-Block {
    width: 86rem;
    margin: 0 auto;
    text-align: center;
}

@media screen and (max-width: 820px) {
    .A-Block {
        width: 100%;
    }
}

.A-List {
    list-style-type: none;
    display: inline-block;
    padding: 5rem 0 0;
}

.A-listItem {
    font-size: 2rem;
    line-height: 2;
    letter-spacing: -0.04em;
    text-align: left;
    color: #fff;
    vertical-align: middle;
    text-align: center;
}

@media screen and (max-width: 820px) {
    .A-listItem {
        text-align: center;
        font-size: 2.4rem;
        letter-spacing: 0.06em;
    }

    .A-listItem .sp-bold {
        font-weight: bold;
    }
}

.A-listItem .-block {
    display: inline-block;
}

.A-listItem-caution {
    margin-top: 2rem;
}

.A-listItem-caution span {
    display: block;
    text-align: right;
    font-size: 80%;
}

@media screen and (max-width: 820px) {
    .A-listItem-caution {
        padding: 0 5.6%;
    }
}

@media screen and (max-width: 820px) {
    .A-Img {
        padding: 0 5.6%;
    }
}

.A-Img {
    text-align: center;
}

.A-Img img {
    display: block;
    margin: 0 auto;
    width: 88.2rem;
    height: auto;
}

@media screen and (max-width: 820px) {
    .A-Img img {
        display: block;
        margin: 0 auto;
        width: 100%;
        height: auto;
    }
}

.A-Img::after {
    content: "";
    display: block;
    width: 68.5rem;
    height: 5rem;
    background: url(./../img02/a-title_bottom.png);
    background-size: cover;
    margin: 4.7rem auto 6rem;
}

@media screen and (max-width: 820px) {
    .A-Img::after {
        content: "";
        display: block;
        width: 70rem;
        height: 5rem;
        background: url(./../img02/a-title_bottom.png);
        background-size: cover;
        margin: 5.9rem auto 7.9rem;
    }
}

.CommonCart {
    text-align: center;
    transition: opacity .4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.CommonCart:hover {
    opacity: 0.8;
}

.CommonCart a {
    display: block;
    margin: 0 auto;
    color: #fff;
}

@media screen and (max-width:820px) {
    .CommonCart a {
        width: 47.4rem;
        height: 7.4rem;
    }
}

/**************************
  Award :end
*************************/

/**************************
  manage :start 
*************************/

#Manage {
    position: relative;
}

#Manage .inner {
    width: 860px;
    margin: 0 auto;
    padding: 0 2rem;
}

@media screen and (max-width: 820px) {
    #Manage .inner {
        width: 100%;
        padding: 0;
    }
}

.Manage-bg {
    padding: 11rem 0 12rem;
    background: url(./../img02/manage-bg.jpg) no-repeat;
    background-size: cover;
}

@media screen and (max-width: 820px) {
    .Manage-bg {
        padding: 11rem 0 10.6rem;
        background: url(./../img02/manage-bg-sp.jpg) no-repeat;
        background-size: cover;
        background-position: top;
    }
}


.Manage_ttl {
    font-size: 4rem;
    text-align: center;
    font-weight: 400;
    color: #011b1c;
    letter-spacing: .13rem;
    line-height: 1.45;
    margin-bottom: 3.7rem;
}

@media screen and (max-width: 820px) {
    .Manage_ttl {
        margin-bottom: 4.2rem;
    }
}


.Manage_Info {
    margin-bottom: 7.6rem;
    font-size: 2rem;
    line-height: 2;
    letter-spacing: .13em;
    color: #011b1c;
    text-align: center;
}

@media screen and (max-width: 820px) {
    .Manage_Info {
        font-size: 2.8rem;
        line-height: 1.78;
    }
}

.Modal_list {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 10rem;
}

.Modal_l_trigger {
    text-align: center;
    cursor: pointer;
}

.Modal_l_trigger:nth-of-type(odd) {
    margin-right: 2.5rem;
}

.Modal_l_trigger:nth-of-type(even) {
    margin-left: 2.5rem;
}


.modal_img {
    width: 20.6rem;
    margin-bottom: 2.2rem;
}

@media screen and (max-width: 820px) {
    .modal_img {
        width: 26rem;
    }
}

.modal_info {
    position: relative;
    display: inline-block;
    font-size: 2rem;
    text-align: center;
    color: #3a3a3a;
}

.modal_info_text {
    padding-bottom: .025em;
    border-bottom: 1px solid #3a3a3a;
}

@media screen and (max-width: 820px) {
    .modal_info {
        display: inline-block;
        font-size: 3.2rem;
        letter-spacing: .1em;
        text-align: center;
    }
}

.Modal_button {
    position: relative;
    text-align: center;
}


.Modal_b_trigger {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    box-sizing: content-box;
    margin: 0 auto;
    width: 58rem;
    height: 15.4rem;
    background: #fff;
    border: 2px solid #011b1c;
    color: #011b1c !important;
}

.modal_info::before {
    content: "";
    display: block;
}

@media screen and (max-width: 820px) {
    .Modal_b_trigger {
        width: 67rem;
        height: 15.4rem;
    }
}

.modal_info::before,
.Modal_b_trigger::before {
    content: "";
    display: block;
    position: absolute;
    z-index: 2;
    left: 0;
    width: 4.3rem;
    height: 4.3rem;
    background: url(./../img02/plus_icon.png);
    background-repeat: no-repeat;
    background-size: cover;
    transition: transform 1.2s cubic-bezier(0.075, 0.82, 0.165, 1);
}


.Modal_b_trigger::before {
    left: 2rem;
}

@media screen and (max-width: 820px) {
    .Modal_b_trigger::before {
        left: 3.8rem;
    }
}

.Modal_b_trigger:hover::before {
    transform: scale(1.2);
}

.modal_info::before {
    position: absolute;
    left: -1.5rem;
    top: 50%;
    transform: translate(-100%, -50%);
}

.Modal_l_trigger:hover .modal_info::before {
    transform: scale(1.1) translate(-100%, -50%);
}


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

    .Modal_b_trigger::before {
        transition: none;
    }

    .Modal_b_trigger:hover::before {
        transform: scale(1) translateY(-50%);
    }

    .Modal_l_trigger .modal_info::before {
        transition: none;
    }

    .Modal_l_trigger:hover .modal_info::before {
        transform: scale(1) translate(-100%, -50%);
    }
}

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

    .Modal_b_trigger::before {
        top: 50%;
        transform: translateY(-50%);
        width: 5.3rem;
        height: 5.3rem;
    }
}

.Modal_b_trigger_text {
    width: calc(100% - (15.4rem + 5.3rem + 3.8rem));
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    font-size: 2rem;
    line-height: 2;
    letter-spacing: .1em;
    color: #3a3a3a;
    text-align: left;
}

@media screen and (max-width: 820px) {
    .Modal_b_trigger_text {
        width: calc(100% - (15.4rem + 5.3rem + 6rem));
        font-size: 2.6rem;
        align-items: flex-start;
    }

}

.Modal_b_trigger_text span {
    border-bottom: 1px solid #3a3a3a;
    padding-bottom: .25em;
}

.Modal_b_trigger_text span:not(:first-of-type) {
    margin-top: 0.75em;
}

#GoutisEstate .Modal_b_trigger_img {
    width: 15.4rem;
    height: auto;
    border-left: 2px solid #011b1c;
    margin: 0;
}


.Tradition {
    position: absolute;
    top: -32.3rem;
    left: 50%;
    transform: translateX(-50%);
    width: 123rem;
    background-color: rgb(255, 255, 255, 0.8);
    box-shadow: 0px 0px 15px 0px rgba(67, 46, 0, 0.19);
    padding: 5rem 0 7rem 5.2rem;
}

@media screen and (max-width: 820px) {
    .Tradition {
        top: -61.2rem;
        width: calc(100% - (5.6% * 2));
        padding: 5rem 0 0 0;
    }
}

.TraditionHead {
    margin-bottom: 3.6rem;
    font-size: 3.6rem;
    letter-spacing: 0.13em;
    color: #011b1c;
}

@media screen and (max-width: 820px) {
    .TraditionHead {
        margin-bottom: 3.8rem;
        font-size: 4rem;
        letter-spacing: 0.13em;
        padding: 0 3.4rem 0 4rem;
    }
}

.TraditionBox {
    display: flex;
    justify-content: flex-end;
    flex-direction: row-reverse;
}

@media screen and (max-width: 820px) {
    .TraditionBox {
        flex-wrap: wrap;
        justify-content: center;
        flex-direction: column-reverse;
    }
}

.TraditionImage {
    position: relative;
    margin-left: 3rem;
    width: 35.6rem;
    height: 26.4rem;
}

@media screen and (max-width: 820px) {
    .TraditionImage {
        position: relative;
        margin-top: 10.5rem;
        margin-left: auto;
        width: 52rem;
        height: 36rem;
    }

    .TraditionImage img {
        object-fit: cover;
    }
}

.TraditionImage::before {
    content: "";
    display: block;
    width: 28.2rem;
    height: 6.2rem;
    background: url(./../img02/tradition_deco.png) no-repeat;
    background-size: cover;
    position: absolute;
    top: -5rem;
    left: -8.5rem;
}

@media screen and (max-width: 820px) {
    .TraditionImage::before {
        content: "";
        display: block;
        width: 37.7rem;
        height: 8.4rem;
        background: url(./../img02/tradition_deco.png) no-repeat;
        background-size: cover;
        position: absolute;
        top: -5.3rem;
        left: -10.6rem;
    }
}

.TraditionImage img {
    display: block;
}

.TraditionDesctiption {
    width: calc(100% - (35.6rem + 3rem));
    font-size: 1.8rem;
    line-height: 1.7;
    letter-spacing: 0.01em;
    text-align: left;
    color: #011b1c;
    white-space: nowrap;
}

@media screen and (max-width: 820px) {
    .TraditionDesctiption {
        width: 100%;
        font-size: 2.4rem;
        line-height: 1.83;
        letter-spacing: 0.08em;
        text-align: left;
        padding: 0 3.4rem 0 4rem;
        white-space: inherit;
    }

    .TraditionDesctiption br {
        display: none;
    }

    .TraditionDesctiption br.st-sp {
        display: block;
    }
}


.Quality-Outer {
    position: relative;
}

.Quality {
    display: flex;
    align-items: flex-start;
    margin-bottom: 7.5rem;
}

.Manage-more {
    position: absolute;
    top: -10.7rem;
    left: calc(50% - 7.6rem);
    font-size: 4.8rem;
    font-weight: bold;
    letter-spacing: .13em;
    line-height: 1;
    color: #011b1c;
}

@media screen and (max-width: 820px) {
    .Manage-more {
        position: static;
        width: 100%;
        font-size: 7rem;
        letter-spacing: .13em;
        line-height: 1;
        padding: 0;
        text-align: center;
        margin: 0 auto 7.8rem;
    }
}

@media screen and (max-width: 820px) {
    .Quality {
        display: block;
        margin-bottom: 0;
        padding: 7.2rem 2.4rem 9.3rem;
    }
}

.Q-Image {
    position: absolute;
    top: 7rem;
    right: 0;
    width: 42.2rem;
}

@media screen and (max-width: 820px) {
    .Q-Image {
        position: static;
        width: 66.9rem;
        height: auto;
        margin: 8rem auto 6rem;
    }
}


.Q-Block {
    width: 100%;
    padding: 6rem 0 6rem 5.2rem;
}

@media screen and (max-width: 820px) {
    .Q-Block {
        margin: 0;
        padding: 6rem 0;
    }
}

.Q-Head {
    font-size: 3rem;
    letter-spacing: 0.013em;
    color: #011b1c;
    line-height: 1.611;
    text-align: left;
    font-weight: 400;
}

@media screen and (max-width: 820px) {
    .Q-Head {
        font-size: 4rem;
        line-height: 1.45;
        letter-spacing: 0.013em;
        color: #011b1c;
        text-align: center;
    }
}

.Q-Text {
    width: 50rem;
    margin-top: 1.08rem;
    font-size: 1.8rem;
    color: #011b1c;
    line-height: 1.8;
    text-align: left;
    letter-spacing: 0.01em;
}

@media screen and (max-width: 820px) {
    .Q-Text {
        width: 100%;
        margin-top: 0;
        font-size: 2.4rem;
        line-height: 1.833;
        text-align: left;
        letter-spacing: 0.01em;
        text-align: center;
    }

    .Q-Text br {
        display: none;
    }

    .Q-Text br.st-sp {
        display: block;
    }
}

.Step {
    max-width: 92rem;
    margin: 0 auto 17rem;
}

@media screen and (max-width: 820px) {
    .Step {
        max-width: inherit;
        position: relative;
        margin-top: 32.7rem;
        background-color: rgb(181, 207, 71);
        width: calc(100% - 5.6%);
        margin-left: auto;
        padding: 35.7rem 4rem 4.8rem;
        margin: 0 auto 7rem;
    }
}

.StepHead {
    font-size: 4rem;
    color: #011b1c;
    line-height: 1.56;
    text-align: left;
    margin-bottom: 3rem;
    font-weight: 400;
}

@media screen and (max-width: 820px) {
    .StepHead {
        font-size: 4rem;
        color: #011b1c;
        line-height: 1.45;
        text-align: left;
        margin-bottom: 3rem;
    }
}

.Process {
    position: relative;
    padding: 6rem 8.6rem 6rem 4.3rem;
    background-color: rgb(181, 207, 71);
}

@media screen and (max-width: 820px) {
    .Process {
        position: static;
        padding: 0;
        background-color: transparent;
    }
}

.ProcessImage {
    position: absolute;
    top: 6.2rem;
    right: 0rem;
    width: 32.5rem;
    height: 22rem;
}

@media screen and (max-width: 820px) {
    .ProcessImage {
        top: 0;
        left: 0;
        display: block;
        width: 42rem;
        height: 28rem;
    }
}

.ProcessText {
    width: 49.5rem;
    font-size: 1.8rem;
    color: #011b1c;
    line-height: 1.8;
    text-align: left;
}

@media screen and (max-width: 820px) {
    .ProcessText {
        width: 100%;
        font-size: 2.4rem;
        color: #011b1c;
        line-height: 1.833;
        text-align: left;
    }
}

.ProcessList {
    margin: 4rem 0 0 0;
}

.ProcessContent {
    font-size: 0;
}

.ProcessContent:not(:first-of-type) {
    margin-top: 4rem;
}

.ProcessContentBox {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - (8rem + 2.3rem));
}

.ProcessContent::before {
    content: "";
    display: inline-block;
    vertical-align: top;
    width: 8rem;
    height: 8rem;
    margin-right: 2.3rem;
}

.ProcessContent:nth-of-type(1)::before {
    background: url(./../img02/processcontent01.png) no-repeat;
    background-size: 100%;
}

.ProcessContent:nth-of-type(2)::before {
    background: url(./../img02/processcontent02.png) no-repeat;
    background-size: 100%;
}

.ProcessContent:nth-of-type(3)::before {
    background: url(./../img02/processcontent03.png) no-repeat;
    background-size: 100%;
}

.ProcessContent:nth-of-type(4)::before {
    background: url(./../img02/processcontent04.png) no-repeat;
    background-size: 100%;
}

.ProcessContentTitle {
    font-size: 2rem;
    line-height: 1.4;
    letter-spacing: 0.01em;
    font-weight: bold;
    color: #011b1c;
}

@media screen and (max-width: 820px) {
    .ProcessContentTitle {
        font-size: 2.4rem;
        line-height: 1.5;
        letter-spacing: 0.01em;
        font-weight: bold;
        color: #011b1c;
    }
}

.ProcessContentText {
    font-size: 1.6rem;
    color: #011b1c;
    line-height: 1.75;
    text-align: left;
}

@media screen and (max-width: 820px) {
    .ProcessContentText {
        font-size: 2rem;
        color: #011b1c;
        letter-spacing: 0.01em;
        line-height: 1.8;
        text-align: left;
    }

    .ProcessContentText br {
        display: none;
    }

    .ProcessContentText br.st-sp {
        display: block;
    }
}

.Licence {
    margin-top: 3rem;
}

@media screen and (max-width: 820px) {
    .Licence {
        margin-top: 4rem;
    }
}

.LicenceList {
    margin: 0 0 4rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width: 820px) {
    .LicenceList {
        margin: 0 auto 4rem;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }
}

.LicenceItem {
    width: 24.7rem;
    height: 24.6rem;
}

.LicenceItem:not(:first-of-type) {
    margin-left: 4rem;
}

.LicenceText {
    font-size: 1.8rem;
    color: #011b1c;
    line-height: 1.77;
    text-align: center;
}

@media screen and (max-width: 820px) {
    .LicenceText {
        font-size: 2.4rem;
        line-height: 1.833;
        color: #011b1c;
        line-height: 1.8;
    }

    .LicenceText br {
        display: none;
    }

    .LicenceText br.st-sp {
        display: block;
    }
}

.Original-Outer {
    padding: 13.6rem 0 19.2rem;
}

@media screen and (max-width: 820px) {
    .Original-Outer {
        position: static;
        width: calc(100% - (5.6% * 2));
        padding: 21.7rem 0 19.2rem;
        margin: 0 auto;
        bottom: 0;
        left: 0;
        transform: translateX(0);
    }
}

.Original {
    position: relative;
    color: #011b1c;
    text-align: left;
    width: 86rem;
    height: 30.6rem;
    margin: 0 auto;
    box-shadow: 0px 0px 15px 0px rgba(67, 46, 0, 0.19);
    background: url(./../img02/original_bg.png) no-repeat;
    background-size: cover;
    padding: 6rem 6rem 5.1rem;
}

@media screen and (max-width: 820px) {
    .Original {
        position: relative;
        color: #011b1c;
        text-align: left;
        width: 100%;
        height: auto;
        margin: 0 auto;
        box-shadow: 0px 0px 15px 0px rgba(67, 46, 0, 0.19);
        background: url(./../img02/original_bg-sp2205.png) no-repeat;
        background-size: cover;
        background-position: right;
        padding: 7rem 4.1rem 5.7rem;
    }
}

.Original::before {
    content: "";
    display: block;
    position: absolute;
    top: -5.5rem;
    left: -4.6rem;
    width: 17.6rem;
    height: 11.4rem;
    background: url(./../img02/original_deco.png) no-repeat;
    background-size: contain;
}

@media screen and (max-width: 820px) {
    .Original::before {
        content: "";
        display: block;
        position: absolute;
        top: -5.5rem;
        left: -4.6rem;
        width: 19.6rem;
        height: 12.7rem;
        background: url(./../img02/original_deco.png) no-repeat;
        background-size: contain;
    }
}

.OriginalHead {
    margin-bottom: 2rem;
    font-size: 3.6rem;
    line-height: 1.5;
    font-weight: normal;
    letter-spacing: 0.01em;
}

@media screen and (max-width: 820px) {
    .OriginalHead {
        margin-bottom: 4rem;
        font-size: 3rem;
        line-height: 1.5;
        letter-spacing: 0.01em;
        text-align: left;
    }
}

.OriginalText {
    font-size: 1.8rem;
    line-height: 1.7;
    letter-spacing: 0.01em;
}

@media screen and (max-width: 820px) {
    .OriginalText {
        font-size: 2.4rem;
        letter-spacing: 0.08em;
        line-height: 1.833;
        text-align: left;
        letter-spacing: 0.01em;
    }

    .OriginalText br {
        display: none;
    }

    .OriginalText br.st-sp {
        display: block;
    }
}

/**************************
  manage :end
*************************/

/**************************
  ProductDescription :start 
*************************/

#ProductDescription {
    margin-top: -13rem;
    overflow: hidden;
}

#ProductDescription .PD-Container {
    margin: 0 auto;
    padding: 17.5rem 0 24.5rem;
}

@media screen and (max-width: 820px) {
    #ProductDescription .PD-Container {
        width: 100%;
        margin: 0 auto;
        padding: 11.4rem 0 8.5rem;
    }
}

.PD-Title {
    text-align: center;
    margin-bottom: 10rem;
}

@media screen and (max-width: 820px) {
    .PD-Title {
        text-align: center;
        margin-bottom: 8.5rem;
    }
}

.PD-Image {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 6rem;
    width: 88rem;
    height: 11.4rem;
    text-align: center;
    background: #fff;
}

.PD-Image img {
    width: 79.3rem;
    height: auto;
}

@media screen and (max-width: 820px) {
    .PD-Image {
        margin-bottom: 5.4rem;
        width: 100%;
        height: 9.6rem;
        text-align: center;
        background: #fff;
    }

    .PD-Image img {
        display: block;
        margin: 0 auto;
        width: 66rem;
        height: auto;
    }
}

.ProductDescriptionTitleText {
    margin-bottom: 3rem;
    font-size: 3.2rem;
    line-height: 1.68;
    letter-spacing: 0.13em;
    text-align: center;
    color: #000000;
    font-weight: normal;
}

@media screen and (max-width: 820px) {
    .ProductDescriptionTitleText {
        font-size: 4rem;
        line-height: 1.5;
        letter-spacing: 0.13em;
        text-align: center;
        color: #000000;
    }
}



.ProductDescriptionParagraph {
    font-size: 2rem;
    line-height: 1.8;
    text-align: center;
    letter-spacing: .08em;

}

@media screen and (max-width: 820px) {
    .ProductDescriptionParagraph {
        padding: 0 4rem;
        font-size: 2.4rem;
        line-height: 1.83;
    }
}

.PD-Bg::before {
    margin-bottom: -1px;
}

.PD-Bg::after {
    margin-top: -1px;
}


/* SAKURA  */

.PD-Bg[data-currslide="SAKURA"]::before {
    content: "";
    transition: border-color cubic-bezier(0.075, 0.82, 0.165, 1) 0.4s;
    display: block;
    border-color: transparent #edbec6 transparent transparent;
    border-style: solid;
    border-width: 13rem 153.6rem 0 0;
}

.PD-Bg[data-currslide="SAKURA"]::after {
    content: "";
    display: block;
    transition: border-color cubic-bezier(0.075, 0.82, 0.165, 1) 0.4s;
    border-color: transparent transparent transparent #edbec6;
    border-style: solid;
    border-width: 0 0 13rem 153.6rem;
}

.PD-Bg[data-currslide="SAKURA"] .ProductDescription-bg {
    transition: background-color cubic-bezier(0.075, 0.82, 0.165, 1) 0.4s;
    background: #edbec6;
}

/* SAKURA  */

/* BREEZ */

.PD-Bg[data-currslide="BREEZ"]::before {
    content: "";
    display: block;
    transition: border-color cubic-bezier(0.075, 0.82, 0.165, 1) 0.4s;
    border-color: transparent #8bbfce transparent transparent;
    border-style: solid;
    border-width: 13rem 153.6rem 0 0;
}

.PD-Bg[data-currslide="BREEZ"]::after {
    content: "";
    display: block;
    transition: border-color cubic-bezier(0.075, 0.82, 0.165, 1) 0.4s;
    border-color: transparent transparent transparent #8bbfce;
    border-style: solid;
    border-width: 0 0 13rem 153.6rem;
}

.PD-Bg[data-currslide="BREEZ"] .ProductDescription-bg {
    background: #8bbfce;
    transition: background-color cubic-bezier(0.075, 0.82, 0.165, 1) 0.4s;
}

/* BREEZ */

/* MILLERS_BREND */


.PD-Bg[data-currslide="MILLERS_BREND"]::before {
    content: "";
    display: block;
    border-color: transparent #d7cbb9 transparent transparent;
    transition: border-color cubic-bezier(0.075, 0.82, 0.165, 1) 0.4s;
    border-style: solid;
    border-width: 13rem 153.6rem 0 0;
}

.PD-Bg[data-currslide="MILLERS_BREND"]::after {
    content: "";
    display: block;
    border-color: transparent transparent transparent #d7cbb9;
    transition: border-color cubic-bezier(0.075, 0.82, 0.165, 1) 0.4s;
    border-style: solid;
    border-width: 0 0 13rem 153.6rem;
}

.PD-Bg[data-currslide="MILLERS_BREND"] .ProductDescription-bg {
    background: #d7cbb9;
    transition: background-color cubic-bezier(0.075, 0.82, 0.165, 1) 0.4s;
}

/* MILLERS_BREND */

/* BITTER_GRAY */

.PD-Bg[data-currslide="BITTER_GRAY"]::before {
    content: "";
    display: block;
    border-color: transparent #b0b0b2 transparent transparent;
    transition: border-color cubic-bezier(0.075, 0.82, 0.165, 1) 0.4s;
    border-style: solid;
    border-width: 13rem 153.6rem 0 0;
}

.PD-Bg[data-currslide="BITTER_GRAY"]::after {
    content: "";
    display: block;
    border-color: transparent transparent transparent #b0b0b2;
    transition: border-color cubic-bezier(0.075, 0.82, 0.165, 1) 0.4s;
    border-style: solid;
    border-width: 0 0 13rem 153.6rem;
}

.PD-Bg[data-currslide="BITTER_GRAY"] .ProductDescription-bg {
    background: #b0b0b2;
    transition: background-color cubic-bezier(0.075, 0.82, 0.165, 1) 0.4s;
}

/* BITTER_GRAY */

#ProductDescription .PackageArea {
    margin: 0 auto;
}

.PackageArea .slick-list {
    overflow: inherit;
}

.PackageSlider .slick-prev {
    background: url(./../img02/arrow-l.png) no-repeat;
    background-size: cover;
    left: 40rem;
    margin: 0 auto;
    width: 16px;
    height: 28px;
}

.PackageSlider .slick-next {
    background: url(./../img02/arrow-r.png) no-repeat;
    background-size: cover;
    right: 40rem;
    margin: 0 auto;
    width: 17px;
    height: 28px;
}

@media screen and (max-width: 820px) {
    .PackageSlider .slick-prev {
        left: 30px;
        width: 9px;
        height: 15px;
    }

    .PackageSlider .slick-next {
        right: 30px;
        width: 9px;
        height: 15px;
    }
}

.PackageThumbnail {
    position: relative;
}

.PackageSliderContent.SAKURA .PackageThumbnail::before {
    content: "";
    display: block;
    position: absolute;
    top: -4.5rem;
    left: -5rem;
    width: 38.2rem;
    height: 24rem;
    background: url(./../img02/spring.png) no-repeat;
    background-size: contain;
}

.PackageSliderContent.BREEZ .PackageThumbnail::before {
    content: "";
    display: block;
    position: absolute;
    top: -4.5rem;
    left: -5rem;
    width: 46rem;
    height: 24.6rem;
    background: url(./../img02/summer.png) no-repeat;
    background-size: contain;
}

.PackageSliderContent.MILLERS_BREND .PackageThumbnail::before {
    content: "";
    display: block;
    position: absolute;
    top: -4.5rem;
    left: -5rem;
    width: 54.8rem;
    height: 24rem;
    background: url(./../img02/autamun.png) no-repeat;
    background-size: contain;
}

.PackageSliderContent.BITTER_GRAY .PackageThumbnail::before {
    content: "";
    display: block;
    position: absolute;
    top: -4.5rem;
    left: -5rem;
    width: 40rem;
    height: 20rem;
    background: url(./../img02/winter.png) no-repeat;
    background-size: contain;
}

@media screen and (max-width: 820px) {
    .PackageSliderContent {
        width: 100%;
        margin: 0 auto;
    }
}

.ProductFeature {
    position: relative;
}




@media screen and (max-width: 820px) {
    .ProductFeature {
        position: relative;
        padding: 0 5.6%;
    }
}

.Variety {
    text-align: center;
    margin-top: 3rem;
}

/* @media screen and (max-width: 820px) {
    .Variety {}
} */

.VarietyCategoryList {
    font-size: 0;
}

.VarietyCategory {
    display: inline-block;
    padding: .8rem 1.2rem;
    font-size: 2rem;
    letter-spacing: .13em;
    color: #fff;
    line-height: 1;
}

@media screen and (max-width: 820px) {
    .VarietyCategory {
        display: inline-block;
        padding: 1.1rem 1.5rem;
        font-size: 2.6rem;
        letter-spacing: .13em;
    }
}

.VarietyCategory:not(:first-of-type) {
    margin-left: .9rem;
}

@media screen and (max-width: 820px) {
    .VarietyCategory:not(:first-of-type) {
        margin-left: 1.1rem;
    }
}

.vc-sakura {
    background-color: #d7939c;
}

.vc-breeze {
    background-color: #3198b5;
}

.vc-brend {
    background-color: #a39a8c;
}

.vc-winter {
    background-color: #7f7f8f;
}

.ProductFeatureBlock {
    width: 86rem;
    margin: 4.3rem auto 0;
    color: #000000;
    /* height: 43rem; */
    height: auto;
    overflow: hidden;
    position: relative;
    padding: 0 5.7rem 0 5.4rem;
}

@media screen and (max-width: 820px) {
    .ProductFeatureBlock {
        width: 100%;
        padding: 0;
    }
}


.PackageThumbnail {
    width: 60rem;
    height: 60rem;
    text-align: center;
    margin: 0 auto;
}

.PackageThumbnail img {
    margin: 0 auto;
}

.PackageName {
    margin: 3rem auto 0;
    text-align: center;
    height: 9rem;
    display: flex;
    justify-content: center;
    align-items: center;
}


.PackageName img {
    margin: 0 auto;
}

.PackageSliderContent.SAKURA .PackageName img {
    width: 31.6rem;
    height: 9rem;
}

.PackageSliderContent.BREEZ .PackageName img {
    width: 11.1rem;
    height: 7.9rem;
}

.PackageSliderContent.MILLERS_BREND .PackageName img {
    width: 36.5rem;
    height: 4.5rem;
}

.PackageSliderContent.BITTER_GRAY .PackageName img {
    width: 20.2rem;
    height: 10rem;
}



@media screen and (max-width: 820px) {
    .PackageThumbnail {
        width: 60rem;
        height: 60rem;
        text-align: center;
        margin: 0 auto;
    }
}

/* READ MORE */

.ProductFeatureBlock::before {
    content: "";
    display: none;
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    width: 100%;
    content: "";
    height: 5rem;
    background: -webkit-linear-gradient(top,
            rgba(255, 255, 255, 0) 0%,
            rgba(237, 215, 218, 0.8) 50%,
            rgba(237, 215, 218, 0.8) 50%,
            #edd7da 100%);
}

.readmore-check {
    display: none;
}

.readmore-label {
    position: absolute;
    z-index: 2;
    box-sizing: border-box;
    cursor: pointer;
    bottom: 2rem;
    left: 0px;
    right: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(255, 255, 255);
    width: 40rem;
    height: 4.6rem;
    font-size: 2rem;
    letter-spacing: 0.01em;
    color: #000000;
    border-radius: 2.3rem;
    margin: 0 auto;
}

.readmore-check:checked~.ProductFeatureBlock {
    height: auto;
}

.readmore-check:checked~.ProductFeatureBlock::before {
    opacity: 0;
    display: none;
}

.readmore-check:checked~.readmore-label {
    position: static;
    transform: translateX(0);
    -webkit-transform: translateX(0);
    /* 「続きを読む」を押した後、元に戻す必要がない場合は、上のオプションを消してこの1行だけにする */
    /* display: none; */
}

.readmore-label::after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 1.2rem;
    height: 1.8rem;
    background: url(./../img02/more-arrow.png) no-repeat;
    background-size: 100%;
    background-position: 50%;
    margin-left: 1.8rem;
}

.ProductFeatureHead {
    font-size: 2.8rem;
    line-height: 1.28;
    letter-spacing: 0.01em;
    font-weight: bold;
}

@media screen and (max-width: 820px) {
    .ProductFeatureHead {
        font-size: 3.6rem;
        line-height: 1.2;
        letter-spacing: 0.013em;
    }
}

.ProductFeatureHead:not(:first-of-type) {
    margin-top: 1em;
}

.ProductFeatureText {
    font-size: 0;
}

.ProductFeatureText-Block {
    display: inline-block;
    font-size: 1.8rem;
    line-height: 1.8;
    letter-spacing: -0.01em;
}

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

    .ProductFeatureText {
        font-size: 100%;
        min-height: 28em;
    }

    .ProductFeatureText-Block {
        display: inline;
        font-size: 2.6rem;
        line-height: 1.69;
        letter-spacing: 0.013em;
    }
}

.RecipeImage {
    margin-top: 6rem;
    text-align: center;
    cursor: pointer;
}

@media screen and (max-width: 820px) {
    .RecipeImage {
        margin-top: 6rem;
    }
}

.RecipeImage img {
    margin: 0 auto;
    width: 60rem;
    height: 39.9rem;
}

.RecipeImageCaption {
    margin-top: 2.3rem;
    font-size: 2.6rem;
    line-height: 1.692;
    text-align: center;
}

.RecipeImageCaption,
.RecipeImageCaption a {
    color: #011b1c;
}

.RecipeButton {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 6rem auto 0;
    width: 34.6rem;
    height: 5.2rem;
    font-size: 2.4rem;
    letter-spacing: 0.01em;
}

.RecipeButton,
.RecipeButton a {
    background: #3a3a3a !important;
    color: #fff !important;
}

/**************************
  ProductDescription :end 
*************************/

/**************************
  Recommendation :start 
*************************/

/* #Recommendation {} */

.R-bg {
    background: url(./../2025/millers-blend/r-bg.jpg) no-repeat;
    background-size: cover;
    background-position: top center;
}

@media screen and (max-width: 820px) {
    .R-bg {
        background: url(./../2025/millers-blend/r-bg-sp.jpg) no-repeat;
        background-size: cover;
    }
}

#Recommendation .inner {
    margin: 0 auto;
    /* max-width: 120rem; */
    width: 100%;
    padding: 12.1rem 6.4rem 11.4rem;
}

@media screen and (max-width: 820px) {
    #Recommendation .inner {
        max-width: 120rem;
        width: 100%;
        padding: 6.5rem 0 9rem;
    }
}

.R-HeadTitle {
    text-align: center;
}

@media screen and (max-width: 820px) {
    .R-HeadTitle::before {
        display: none;
    }
}

#Recommendation .R-HeadTitle img {
    width: 39.3rem;
    height: auto;
}

@media screen and (max-width: 820px) {
    #Recommendation .R-HeadTitle img {
        width: 51.8rem;
        height: auto;
    }
}

.R_catch {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
    background: #2c2e32;
    height: 35.4rem;
    background: url(./../img02/r_catch-pc.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

@media screen and (max-width: 820px) {
    .R_catch {
        background: url(./../img02/r_catch-sp01.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        height: 43rem;
    }
}

.R_c_txt {
    width: 103.4rem;
    margin: 0 auto;
    font-size: 3rem;
    line-height: 1.6;
    letter-spacing: .25em;
    text-align: center;
    color: #fff;
}

@media screen and (max-width: 820px) {
    .R_c_txt {
        width: 100%;
        padding: 0 4rem;
    }
}

.R_c_txt .TextBlock {
    display: inline-block;
    font-size: 1.8rem;
    line-height: 1.7;
    letter-spacing: .13em;

}

@media screen and (max-width: 820px) {
    .R_c_txt .TextBlock {
        display: inline;
        font-size: 2.4rem;
        line-height: 1.83;
    }
}

.R_c_txt .R_c_txt-bold {
    display: block;
    font-size: 3rem;
    letter-spacing: .13em;
    line-height: 1;
    color: #fad053;
    font-weight: bold;
    margin-bottom: 3rem;
}

@media screen and (max-width: 820px) {
    .R_c_txt .R_c_txt-bold {
        display: none;
        margin-bottom: 4.2rem;
    }
}

.R_catch .CommonCart {
    margin-top: 6rem;
}

#Recommendation .R-HeadTitle .R-HeadTitleText {
    display: block;
    margin-top: 3rem;
    font-size: 3rem;
    line-height: 1.3;
    color: #201a1a;
    letter-spacing: 0.13em;
    text-align: center;
    font-weight: normal;
}

@media screen and (max-width: 820px) {
    #Recommendation .R-HeadTitle .R-HeadTitleText {
        font-size: 2.6rem;
        line-height: 1.6;
    }
}

.R-Target {
    margin: 6rem auto 8.4rem;
}

@media screen and (max-width: 820px) {
    .R-Target {
        margin: 8rem auto 6rem;
    }
}

.R-TargetList {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
}

@media screen and (max-width: 820px) {
    .R-TargetList {
        display: block;
        padding: 0;
    }
}

.R-Target .R-Content {
    width: 34rem;
    text-align: center;
    margin: 0 4.3rem;
}

@media screen and (max-width: 820px) {
    .R-Target .R-Content {
        width: 100%;
        display: flex;
        align-items: center;
        margin: 0;
    }

    .R-Target .R-Content:nth-of-type(even) {
        flex-direction: row-reverse;
    }

    .R-Target .R-Content:not(:first-of-type) {
        margin-top: 5rem;
    }

}


.R-ContentImg.circle {
    border-radius: 50%;
    width: 100%;
}


.R-Target .R-ContentImg {
    margin: 0 auto;
    width: 28.8rem;
    height: auto;
}

@media screen and (max-width: 820px) {
    .R-Target .R-ContentImg {
        width: 34rem;
    }
}


.R-Target .R-ContentText {
    margin-top: 3rem;
    color: #011b1c;
    font-size: 1.6rem;
    height: auto;
    line-height: 1.6;
    letter-spacing: .08em;
    white-space: nowrap;
}

@media screen and (max-width: 820px) {
    .R-Target .R-ContentText {
        width: calc(100% - (34rem + 6rem));
        margin: 0 3rem 0 3rem;
        font-size: 2.4rem;
        line-height: 1.8;
        text-align: left;
        letter-spacing: .08em;
        white-space: inherit;
    }

    .R-Target .R-ContentText br {
        display: none;
    }

    .R-Target .R-ContentText .st-sp {
        display: block;
    }

    .R-Target .R-Content:nth-of-type(even) .R-ContentText {
        margin: 0 3rem 0 3rem;
    }
}

.R-Target .R-ContentText .R-ContentText-head {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    height: 2.5em;
    font-size: 2.4rem;
    letter-spacing: .1em;
    line-height: 1.5;
    margin-bottom: 2rem;
    color: #011b1c;
    font-weight: bold;
}

.R-Target .R-ContentText .R-ContentText-head-small {
    font-size: 2.2rem;
}

@media screen and (max-width: 820px) {
    .R-Target .R-ContentText .R-ContentText-head {
        height: auto;
        font-size: 2.8rem;
        line-height: 1.8;
        align-items: center;
        justify-content: flex-start;
        flex-direction: inherit;
    }
}


/**************************
  Recommendation :end
*************************/

/**************************
  Product :start 
*************************/

#Product {
    color: #011b1c;
    padding: 10rem 0 15rem;
}

@media screen and (max-width: 820px) {
    #Product {
        padding: 10rem 0 12rem;
    }
}

#Product .inner {
    width: 120rem;
    margin: 0 auto;
}

@media screen and (max-width: 820px) {
    #Product .inner {
        width: 100%;
        padding: 0 5.6%;
    }
}

.P-Title {
    text-align: center;
}

.P-Title-ja,
.P-Title-en {
    display: block;
    text-align: center;
}

.P-Title-ja {
    font-size: 4rem;
    letter-spacing: 0.13em;
    text-align: center;
}

@media screen and (max-width: 820px) {
    .P-Title-ja {
        font-size: 4.4rem;
        line-height: 1.3;
    }
}

.P-Title-en {
    margin-top: 2.2rem;
}

@media screen and (max-width: 820px) {
    .P-Title-en {
        margin-top: 1.3rem;
    }
}

.P-Title-en img {
    display: block;
    margin: 0 auto;
    width: 10.8rem;
    height: 4.1rem;
}

.P-Group:first-of-type {
    padding-top: 6.4rem;
}

.P-Group:not(:first-of-type) {
    padding-top: 12.3rem;
}

.P-Top {
    text-align: center;
    margin-bottom: 5rem;
}

.P-TopHead {
    position: relative;
    display: inline-block;
    margin-bottom: 1.8rem;
    padding-bottom: 1.1rem;
    font-size: 4rem;
    letter-spacing: 0.13em;
}

@media screen and (max-width: 820px) {
    .P-TopHead {
        margin-bottom: 1rem;
        padding-bottom: 1.3rem;
        font-size: 4.4rem;
        letter-spacing: 0.13em;
    }
}

.P-TopHead::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 38rem;
    height: 1px;
    background: #3a3a3a;
}

.P-TopDescripton {
    font-size: 2.6rem;
    line-height: 1.3;
    letter-spacing: 0.13em;
}

.P-Shipping {
    text-align: center;
    margin: 2rem 0 2.5rem;
}

.P-Shippingfree .P-ShippingText {
    width: 16.4rem;
    height: 5rem;
    line-height: 5rem;
}

@media screen and (max-width: 820px) {
    .P-Shipping {
        margin: 4rem 0 3.8rem;
    }

    .P-Shippingfree .P-ShippingText {
        width: 21rem;
        height: 6.4rem;
        line-height: 6.4rem;
    }

}

.P-ShippingText {
    display: inline-block;
    width: 28.5rem;
    height: 5rem;
    line-height: 5rem;
    background: #000000;
    font-size: 2.4rem;
    letter-spacing: 0.13em;
    color: #fff;
    text-align: center;
}

@media screen and (max-width: 820px) {
    .P-ShippingText {
        font-size: 3.2rem;
        width: 37rem;
        height: 6.4rem;
        line-height: 6.4rem;
    }
}

.P-Target {
    text-align: center;
}

.P-TargetList {
    display: inline-block;
}

.P-TargetListItem {
    text-align: left;
    font-size: 2rem;
    line-height: 1.65;
    color: #011b1c;
    letter-spacing: 0.13em;
}

@media screen and (max-width: 820px) {
    .P-TargetListItem {
        font-size: 2.6rem;
        line-height: 1.7;
    }
}

.P-TargetListItem::before {
    content: "\2713";
}

.P-List {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.P-List-Normal {
    width: 86rem;
    margin: 0 auto;
}

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

    .P-List-Normal,
    .P-List-Distribution,
    .P-List-Gift {
        width: 100%;
        margin: 0 auto;
        padding: 0 12.5%;
    }
}

/* .P-List-Distribution {} */

.p-Box {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    flex-wrap: wrap;
    width: 37rem;
    padding-bottom: 5.6rem;
    background: #fff;
    box-shadow: 0px 2px 15px 0px rgba(67, 46, 0, 0.08);
}

@media screen and (max-width: 820px) {
    .p-Box {
        max-width: 500px;
        width: 100%;
        padding-bottom: 5.6rem;
    }
}

.P-List-Normal .p-Box {
    margin: 0 1rem;
}

@media screen and (max-width: 820px) {
    .P-List-Normal .p-Box {
        margin: 0;
    }
}

.P-List-Normal .p-Box:nth-of-type(n + 3) {
    margin-top: 1.7rem;
}

@media screen and (max-width: 820px) {
    .P-List-Normal .p-Box:nth-of-type(n + 3) {
        margin-top: 0;
    }

    .P-List-Normal .p-Box:not(:first-of-type) {
        margin-top: 6rem;
    }
}

.P-List-Distribution .p-Box,
.P-List.P-List-Gift .p-Box {
    margin: 0 1rem;
}

.P-List-Gift .slick-arrow {
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.P-List-Gift:not(:first-of-type) {
    margin-top: 6rem;
}

@media screen and (max-width: 820px) {
    .P-List-Gift:not(:first-of-type) {
        margin-top: 3rem;
    }
}

.P-List-Gift .slick-prev {
    left: -3rem;
    background: url(./../img02/gf-arrow-l.png) no-repeat;
    background-size: cover;
}

.P-List-Gift .slick-next {
    right: -3rem;
    background: url(./../img02/gf-arrow-r.png) no-repeat;
    background-size: cover;
}

@media screen and (max-width: 820px) {
    .P-List-Gift .slick-prev {
        left: 0;
    }

    .P-List-Gift .slick-next {
        right: 0;
    }
}

.P-Thumbnail {
    text-align: center;
    margin-bottom: 2.7rem;
}

@media screen and (max-width: 820px) {
    .P-List-Distribution .p-Box {
        margin: 0;
    }

    .P-List-Distribution .p-Box:not(:first-of-type) {
        margin: 6rem 0 0 0;
    }
}

@media screen and (max-width: 820px) {
    .P-Thumbnail {
        text-align: center;
        margin-bottom: 4.5rem;
    }
}

.P-Brand {
    margin-bottom: 0.7rem;
    text-align: center;
}

@media screen and (max-width: 820px) {
    .P-Brand {
        margin-bottom: 0;
    }
}

.P-BrandText {
    font-size: 1.2rem;
    color: #011b1c;
    line-height: 2.2;
    letter-spacing: 0.04em;
}

@media screen and (max-width: 820px) {
    .P-BrandText {
        font-size: 2rem;
        letter-spacing: 0.04em;
        text-align: center;
    }
}

.P-Name {
    height: 9.9em;
    padding: 0 3rem;
    text-align: center;
    margin-bottom: 1.8rem;
}

@media screen and (max-width: 820px) {
    .P-Name {
        height: auto;
        padding: 0 3rem;
        text-align: center;
        margin-bottom: 3rem;
    }
}

.P-NameText {
    font-size: 2.2rem;
    letter-spacing: 0.13em;
    line-height: 1.5;
    text-align: center;
    word-break: keep-all;
}

.P-NameText-kana {
    display: block;
    font-size: 1.2rem;
    color: #011b1c;
    letter-spacing: .04em;
    line-height: 1;
}

@media screen and (max-width: 820px) {
    .P-NameText {
        font-size: 3.6rem;
        line-height: 1.6;
    }
}

.P-Price.P-Price-Normal {
    margin: 0 0 0.6rem;
}

@media screen and (max-width: 820px) {
    .P-Price.P-Price-Normal {
        margin: 0 0 0.9rem;
    }
}

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

.P-Price {
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
    letter-spacing: 0.01em;
    text-align: center;
}

@media screen and (max-width: 820px) {
    .P-Price {
        margin-bottom: 4.4rem;
        font-size: 3.2rem;
        letter-spacing: 0.013em;
    }
}

.Set-off {
    display: inline-block;
    vertical-align: middle;
    width: 7.6rem;
    height: 2.4rem;
    margin-right: 1rem;
    line-height: 2.4rem;
    font-size: 1.4rem;
    letter-spacing: 0.08em;
    background: #e94545;
    border-radius: 2px;
    color: #fff;
}

@media screen and (max-width: 820px) {
    .Set-off {
        width: 11.5rem;
        height: 4rem;
        margin-right: 1.3rem;
        line-height: 4rem;
        font-size: 2.4rem;
        letter-spacing: 0.08em;
    }
}

.P-PriceTax {
    font-size: 1.4rem;
}

@media screen and (max-width: 820px) {
    .P-PriceTax {
        font-size: 2.4rem;
    }
}

.P-Aside {
    margin-top: 3.2rem;
    text-align: center;
    font-size: 0;
}

.P-Aside .P-AsideBlock {
    display: inline-block;
    font-size: 2rem;
    line-height: 2;
    color: #5e7337;
    letter-spacing: 0.01em;
    text-align: center;
}

@media screen and (max-width: 820px) {
    .P-Aside .P-AsideBlock {
        font-size: 2.8rem;
        line-height: 1.4;
        letter-spacing: 0.04em;
    }
}


.P-Aside-more .P-AsideBlock-Big {
    font-size: 2.6rem;
    letter-spacing: .01em;
    line-height: 2.3;
}

.P-Aside-more .P-AsideBlock-Big .color-b {
    color: #011b1c;
}

.P-Aside-sp {
    display: none;
}

@media screen and (max-width: 820px) {
    .P-Group .P-Aside .P-Aside-pc {
        display: none;
    }

    .P-Aside-sp {
        display: table;
        width: calc(100% - (4rem * 2));
        margin: 3.6rem auto 3rem;
    }

    .P-Aside-sp td {
        display: table-cell;
        font-size: 2.8rem;
        color: #5e7337;
        line-height: 1.429;
        text-align: center;
    }

    .P-Aside-sp td {
        text-align: left;
    }

    .P-Aside-sp .thead {
        text-align: center;
    }
}

@media screen and (max-width: 820px) {
    .P-Aside {
        margin-top: 3rem;
    }
}

.P-Aside .a-underline {
    color: #5e7337;
}


.P-Order {
    display: flex;
    justify-content: center;
}

.P-Cart a,
button.P-Cart {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 21rem;
    height: 4.87rem;
    margin: 0 auto;
    background: url(./../img02/cart_button.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    font-size: 0;
}

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

    .P-Cart a,
    button.P-Cart {
        width: 30.6rem;
        height: 7rem;
        position: relative;

    }
}

button.P-Cart {
    margin: 0;
}

.P-Cart a::after,
button.P-Cart::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 1.6rem;
    transform: translateY(-50%);
    width: 1.1rem;
    height: 0.6rem;
    background: url(./../img02/p-arrow-w.png) no-repeat;
    background-size: 100%;
}

.P-List-Normal .P-Cart::after,
.P-List-Distribution .P-Cart::after,
.P-List-Gift .P-Cart::after,
.P-List-Gift .P-Cart a::after {
    display: none;
}

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

    .P-Cart a::after,
    button.P-Cart::after {
        right: 2.6rem;
        transform: translateY(-50%);
        width: 1.7rem;
        height: 1.4rem;
    }
}

.P-Quantity {
    display: flex;
    align-items: center;
}

.P-QuantityText {
    font-size: 1.4rem;
    color: #011b1c;
    letter-spacing: 0.1em;
}

@media screen and (max-width: 820px) {
    .P-QuantityText {
        font-size: 2.8rem;
        color: #011b1c;
        letter-spacing: 0.1em;
        margin-right: 0.6rem;
    }
}

.P-QuantitySelect {
    padding: 0 .5rem;
    width: 4.4rem;
    height: 3.8rem;
    font-size: 1.8rem;
    color: #011b1c;
    border: 1px solid #000001 !important;
    margin-right: 0.9rem;
    background-size: 1.5rem !important;
}

@media screen and (max-width: 820px) {
    .P-QuantitySelect {
        width: 6.4rem;
        height: 4.8rem;
        font-size: 2.8rem;
        color: #011b1c;
        border: 1px solid #000001 !important;
        margin-right: 0.9rem;
        background: url(https://joilmills.itembox.design/item/img/select_d.png) no-repeat right 6px center #fff !important;
    }
}

.P-SpecTable {
    margin: 8.5rem auto 0;
    text-align: center;
}

@media screen and (max-width: 820px) {
    .P-SpecTable {
        margin-top: 12.4rem;
        width: 100%;
        text-align: center;
    }
}

.P-SpecTable .SpecTablethead {
    border-bottom: none !important;
    text-align: center;
}

.P-SpecTable th,
.P-SpecTable td {
    font-size: 1.8rem;
    color: #5e7337;
    font-weight: normal;
    text-align: left;
    padding: 0.8rem 1.6rem;
}

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

    .P-SpecTable th,
    .P-SpecTable td {
        font-size: 2.8rem;
        padding: 1.5rem 3.8rem 1.5rem 2.5rem;
    }
}

.P-SpecTable tr:not(:last-of-type) th,
.P-SpecTable tr:not(:last-of-type) td {
    border-bottom: 2px solid #5e7337;
}

.P-SpecTable th {
    border-right: 2px solid #5e7337;
}

.P-Spec+.P-Aside {
    text-align: center;
}

@media screen and (max-width: 820px) {
    .P-Spec+.P-Aside {
        text-align: left;
    }

    .P-Spec+.P-Aside .P-AsideBlock {
        text-align: left;
    }
}

/**************************
  Product :end
*************************/

.Tel-Order {
    margin-top: 4.5rem;
    font-style: normal;
    text-align: center;
}

@media screen and (max-width: 820px) {
    .Tel-Order {
        margin-top: 8rem;
        font-style: normal;
        text-align: center;
    }

    .Tel-Order img {
        display: block;
        width: 100%;
    }
}

.Tel-OrderTime {
    margin-top: 2rem;
    font-size: 2rem;
    letter-spacing: 0.01em;
    line-height: 1.45;
    color: #5e7337;
    text-align: center;
}

@media screen and (max-width: 820px) {
    .Tel-OrderTime {
        margin-top: 1.5rem;
        font-size: 3.6rem;
        letter-spacing: 0.01em;
        line-height: 1;
    }
}

/**************************
  footer :start 
*************************/

footer {
    background: #363636;
    padding: 6.5rem 0 2rem;
    text-align: center;
}

footer .copyright {
    font-size: 1.2rem;
    line-height: 1;
    color: #fff;
}

@media screen and (max-width: 820px) {
    footer .copyright {
        font-size: 2.4rem;
    }

}

/**************************
  footer :end
*************************/

/**************************
  Modal :start 
*************************/
.mfp-container {
    padding: 0 !important;
}

/**************************
  Anime :start 
*************************/
.PC-Images-Outer.anime {
    opacity: 0;
    transform: translateX(100%);
    transition: all cubic-bezier(0.455, 0.03, 0.515, 0.955) 1s;
}

.PC-Images-Outer.anime.start {
    opacity: 1;
    transform: translateX(0);
}


.PC-Images::before {
    opacity: 0;
    transition: opacity cubic-bezier(0.455, 0.03, 0.515, 0.955) 1s;
    transition-delay: 1.5s;
}

.PC-Images.anime.start::before {
    opacity: 1;
}


/*******************************
<!-- ProductInformation :start -->
********************************/

.PI-Image {
    opacity: 0;
    transition: opacity cubic-bezier(0.455, 0.03, 0.515, 0.955) 2s;
}

.PI-Image.anime.start {
    opacity: 1;
}

.PI-Head,
.PI-TextParagraph {
    opacity: 0;
    transform: matrix(1, 0, 0, 1, 0, 100);
    transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.PI-Head.anime.start,
.PI-TextParagraph.anime.start {
    opacity: 1;
    transform: matrix(1, 0, 0, 1, 0, 0);
}

.PI-CourseList {
    opacity: 0;
}

.PI-CourseList.anime.start {
    animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}

@keyframes fadeup {
    0% {
        transform: translateY(30px);
        opacity: 0;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/************************
 <!-- manage:start --> 
 *************************/
/* レコメンデーション */
.R-Content.anime {
    opacity: 0;
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
    animation-fill-mode: forwards;
    /*2で解説*/
    animation-duration: 1s;
    /*3で解説*/
    animation-iteration-count: 1;
    /*4で解説*/
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1);
    /*5で解説*/
    animation-direction: normal;
    /*7で解説*/

}

.R-Content.anime.start:nth-of-type(1) {
    animation-delay: 1s;
}

.R-Content.anime.start:nth-of-type(2) {
    animation-delay: 2s;
}

.R-Content.anime.start:nth-of-type(3) {
    animation-delay: 3s;
}

.R-Content.anime.start:nth-of-type(4) {
    animation-delay: 4s;
}

@keyframes zoomIn {
    from {
        opacity: 0;
        visibility: hidden;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    100% {
        opacity: 1;
        visibility: visible;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

/* 商品詳細 */

.P-List-Normal .p-Box,
.P-List-Distribution .p-Box {
    /* モーション用の指定 */
    transition: all 0.5s;
    transform: translate(0px, 30px);
    opacity: 0;
}

.P-List-Normal .p-Box.anime.start,
.P-List-Distribution .p-Box.anime.start {
    transition: all 0.75s;
    transform: translate(0, 0);
    opacity: 1;
}

.P-List-Normal .p-Box.anime.start:nth-of-type(1),
.P-List-Distribution .p-Box.anime.start:nth-of-type(1) {
    transition-delay: 330ms;
}

.P-List-Normal .p-Box.anime.start:nth-of-type(2),
.P-List-Distribution .p-Box.anime.start:nth-of-type(2) {
    transition-delay: 360ms;
}

.P-List-Normal .p-Box.anime.start:nth-of-type(3),
.P-List-Distribution .p-Box.anime.start:nth-of-type(3) {
    transition-delay: 390ms;
}

.P-List-Normal .p-Box.anime.start:nth-of-type(4) {
    transition-delay: 410ms;
}

.P-List-Gift.anime {
    transition: all 0.5s;
    transform: translate(0px, 30px);
    opacity: 0;
}

.P-List-Gift.anime.start {
    transition: all 0.75s;
    transform: translate(0, 0);
    opacity: 1;
}


/* PageTop */


#PageTop {
    position: fixed;
    z-index: 10;
    bottom: 16.5rem;
    left: calc(48.7rem + 50%);
    width: 9rem;
    height: 9rem;
    z-index: 20;
}

#PageTop img {
    display: block;
    width: 100%;
    height: auto;
}

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

    /* PageTop */
    #PageTop {
        z-index: 10;
        bottom: 15rem;
        left: auto;
        right: 5.6%;
        z-index: 20;
    }
}

.mfp-close {
    position: fixed;
    top: 5px;
    right: 5px;
}


/* 220325 頒布会追加 */
@media screen and (max-width:820px) {
    .P-Aside-more .P-AsideBlock-Big {
        font-size: 2.8rem;
        line-height: 1.6;
    }

    .P-Aside-more .P-AsideBlock-Big:nth-of-type(2) {
        margin: 4rem 0 0;
    }
}

@media screen and (max-width:820px) {
    .DistributionDescription {
        margin: 0 auto;
        padding: 0;
    }
}

.x-scroll {
    overflow-x: scroll;
    width: 120rem;
    margin: 0 auto;
}

@media screen and (max-width:820px) {
    .x-scroll {
        overflow: scroll hidden !important;
        width: 100%;
        margin: 0 auto;
    }
}

.TableDescription {
    margin: 5rem auto 2.2rem;
    font-size: 2rem;
    color: #011b1c;
    letter-spacing: .01em;
    text-align: center;
    white-space: nowrap;
}

@media screen and (max-width:820px) {
    .TableDescription {
        margin: 6rem auto 3rem;
        font-size: 2.6rem;
    }
}

.DistributionTable {
    table-layout: fixed;
    border-collapse: collapse;
    width: 189.5rem;
    border-spacing: 0;
    border: 2px solid #011b1c;
    border-left: hidden;
}

@media screen and (max-width:820px) {
    .DistributionTable {
        width: 282.5rem;
    }
}

.DistributionTable th,
.DistributionTable td {
    vertical-align: middle;
    text-align: center;
    padding: 1.4rem 0;
    font-size: 1.6rem;
    color: #011b1c;
    border: 2px solid #011b1c;
    font-weight: normal;
}

.DistributionTable thead tr th:first-of-type,
.DistributionTable tbody tr th {
    border-right: hidden;
}

.DistributionTable tbody tr td {
    width: 11.8rem;
}

@media screen and (max-width:820px) {
    .DistributionTable tbody tr td {
        width: 17.5rem;
    }
}

.sticky {
    width: 12.5rem;
    background: #fff;
    position: sticky;
    left: 0;
}

@media screen and (max-width:820px) {
    .sticky {
        width: 20rem;
    }

}

.sticky::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: calc(100% + 1px);
    background: #011b1c;
}

.sticky::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    height: 100%;
    width: 2px;
    background: #011b1c;
}

.DistributionTable .bg-color-pink,
.PackageTableCell .bg-color-pink {
    color: #fff;
    background-color: #edd7da;
}

.DistributionTable .bg-color-blue,
.PackageTableCell .bg-color-blue {
    color: #fff;
    background-color: #8bbfce;
}

.DistributionTable .bg-color-brown,
.PackageTableCell .bg-color-brown {
    color: #fff;
    background-color: #d7cbb9;
}

.DistributionTable .bg-color-gray,
.PackageTableCell .bg-color-gray {
    color: #fff;
    background-color: #b0b0b2;
}

.P-Aside .P-AsideBlock.color-b {
    color: #011b1c;
}

.Packagetable.x-scroll {
    overflow: hidden;
    width: 100%;
}

@media screen and (max-width:820px) {
    .Packagetable.x-scroll {
        overflow: inherit;
    }
}

.PackageTableList {
    display: flex;
    justify-content: center;
}

@media screen and (max-width:820px) {
    .PackageTableList {
        flex-wrap: wrap;
    }
}

.PackageTableCell {
    position: relative;
    width: 24rem;
}

@media screen and (max-width:820px) {
    .PackageTableCell {
        width: 31.2rem;
    }
}

.PTC_Image {
    margin-bottom: 2rem;
}

.PackageTableCell:not(:first-of-type) {
    margin-left: 2.5rem;
}

@media screen and (max-width:820px) {
    .PackageTableCell:not(:first-of-type) {
        margin-left: 0;
    }
}

.PackageTableCell:not(:last-of-type)::after {
    content: "";
    display: block;
    width: 2.5rem;
    height: 3rem;
    position: absolute;
    top: 13.5rem;
    right: -2rem;
    background: url(./../img02/ptc-arrow.png) no-repeat;
    background-size: cover;
    z-index: 2;
}

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

    .PackageTableCell:not(:last-of-type)::after {
        top: 19.5rem;
    }

    .PackageTableCell:nth-of-type(2)::after {
        display: none;
    }
}

.PTC_Season {
    margin-bottom: 1rem;
    text-align: center;
    font-size: 2rem;
    color: #011b1c;
    line-height: 1;
}

@media screen and (max-width:820px) {
    .PTC_Season {
        margin-bottom: 1.3rem;
        text-align: center;
        font-size: 2.6rem;
    }
}

.PTC_Name {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 19.5rem;
    height: 4.6rem;
    font-size: 1.6rem;
    color: #fff;
    text-align: center;
}

@media screen and (max-width:820px) {
    .PTC_Name {
        width: 25.3rem;
        height: 5.9rem;
        font-size: 2.6rem;
    }
}

@media screen and (max-width:820px) {
    .DistributionCaution.P-Aside {
        margin-top: 6rem;
    }

    .DistributionCaution.P-Aside .P-AsideBlock {
        font-size: 2.6rem;
        line-height: 1.8;
        letter-spacing: .01em;
    }
}

.P-Aside .a-underline {
    text-decoration: underline !important;
}

.scroll-hint-icon {
    z-index: 10;
}


/* 220325 頒布会追加 */
.Distribution-aside {
    margin-top: 2rem;
    text-align: center;
    font-size: 1.4rem;
}

@media screen and (max-width:820px) {
    .Distribution-aside {
        font-size: 1.6rem;
    }
}



/* Modal-window */
#overray {
    display: none;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 10;
    transform: translate(0, 0);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.modal-content {
    display: none;
}

.modal-content.is-active {
    animation: fadeIn 0.3s ease-in 0s forwards;
    display: block;
    position: fixed;
    z-index: 10;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    z-index: 11;
}

@media screen and (max-width:820px) {
    .modal-content.is-active {
        width: 100%;
        height: 100%;
        padding: 5rem 1.5rem;
    }
}


.modal-content_inner {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}


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

    .modal-content_inner {
        overflow-y: scroll;
        margin: 0;
    }

}


.modal-content_inner_box {
    position: static;
    overflow: hidden;
    transform: translate(0, 0);
}

@media screen and (max-width:820px) {
    .modal-content_inner_box {
        width: 100%;
        position: absolute;
        z-index: 11;
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
        overflow: visible;
    }

}

.modal-content_inner_box>div {
    position: relative;
    width: 100%;
    top: auto;
    left: auto;
    transform: translate(0, 0);
    margin: auto;
}


@media screen and (max-width:820px) {
    .modal-content_inner_box>div {
        position: static;
        transform: translate(0, 0);
        margin: 0 auto;
    }
}


.modal-content_inner_box>.Tradition,
.modal-content_inner_box>.Quality-Outer {
    background: #fff;
    width: 104rem;
    margin: 0 auto;
}

.modal-content_inner_box .Step {
    width: 92rem;
    max-height: 80rem;
    overflow-y: scroll;
}

@media screen and (max-width:820px) {
    .modal-content_inner_box .Step {
        max-height: inherit;
        width: 100%;
        overflow: visible;
    }

}

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

    .modal-content_inner_box>.Tradition,
    .modal-content_inner_box>.Quality-Outer {
        width: 100%;
    }

}

.modal-content_inner_box .close {
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
    width: 4.4rem;
    height: 4.4rem;
    cursor: pointer;
}




@keyframes fadeIn {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}


@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        display: none;
    }
}


/*------------------------------------------------------------------*
    BREEZE SEASON　add
*------------------------------------------------------------------ */
/*---------------------------------*
    Purchasing_method 
*--------------------------------- */

.Purchasing_method {
    margin-bottom: 11rem;
}

.Pm_head {
    font-size: 3.6rem;
    letter-spacing: .13em;
    color: #011b1c;
    text-align: center;
    margin-bottom: 3rem;
}

@media screen and (max-width: 820px) {
    .Pm_head {
        font-size: 4.4rem;
    }
}

.Pm_list {
    font-size: 0;
}

.Pm_l_method {
    position: relative;
    display: block;
    width: 50rem;
    height: 6.4rem;
    border: 2px solid #011b1c;
    margin: 0 auto;
}


.Pm_l_method::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 2.1rem 2.1rem;
    border-color: transparent transparent #011b1c transparent;
    transform: translate(-1rem, -1rem);
    transition: transform .4s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.Pm_l_method:hover::after {
    transform: translate(0, 0);
}

.Pm_l_method:not(:last-of-type) {
    margin-bottom: 1.6rem;
}



.Pm_l_method a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 2.4rem;
    letter-spacing: .13em;
    color: #011b1c;
}

@media screen and (max-width: 820px) {
    .Pm_l_method a {
        font-size: 3.2rem;
    }

}

/*------------------------------------------------------------------*
    BREEZE SEASON　add
*------------------------------------------------------------------ */

@media screen and (min-width: 821px) and (max-height:900px) {
    .modal-content .modal-content_inner_box>div {
        max-height: calc(100vh - 10rem);
    }
}

/*------------------------------------------------------------------*
    MILLERS_BREND　add
*------------------------------------------------------------------ */
.A-Catch {
    margin: 0 auto 4rem;
}

@media screen and (max-width: 820px) {
    .A-Catch {
        margin: 6rem auto;
    }
}

.A-Catch .A-Catch-Ranking {
    display: inline-block;
    position: relative;
    font-size: 3.4rem;
    line-height: 1.85;
    letter-spacing: .16em;
    font-weight: bold;
    color: #fff;
}

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

    .A-Catch .A-Catch-Ranking {
        font-size: 3.8rem;
        line-height: 1.8;
    }
}

.A-Catch .A-Catch-Ranking::after {
    content: "";
    background: url(./../img03/a-catach-attention.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 12px;
    height: 13px;
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(100%, -250%);
}

@media screen and (max-width: 820px) {
    .A-Catch .A-Catch-Ranking::after {
        content: "";
        background: url(./../img03/a-catach-attention.png);
        background-repeat: no-repeat;
        background-size: cover;
        width: 12px;
        height: 13px;
        display: block;
        position: absolute;
        bottom: 0;
        right: 0;
        transform: translate(100%, -150%);
    }
}

.A-Catch .A-Catch-Ranking i {
    margin-left: -.25em;
    display: inline-block;
    font-family: Meiryo, "メイリオ", sans-serif;
    -webkit-transform: skewX(-15deg);
    -moz-transform: skewX(-15deg);
    -o-transform: skewX(-15deg);
    transform: skewX(-15deg);
}


.A-Catch .A-Catch-Ranking .A-Catch-Ranking-First {
    font-size: 140%;
    letter-spacing: .16em;
    font-weight: bold;
    color: #ffdf79;
}

.A-Catch .A-Catch-Ranking .A-Catch-Ranking-Attention {
    font-size: 80%;
}

.A-Catch .A-Catch-Txt {
    display: block;
    font-size: 2rem;
    line-height: 2.2;
    color: #fff;
}

.A-Catch .A-Catch-Txt .A-Catch-Txt-Block {
    display: block;
    line-height: 2.2
}

.A-Catch .A-Catch-Txt .A-Catch-Txt-Block .bold {
    font-weight: bold;
}

.A-Catch .A-Catch-Txt .A-Catch-Txt-Block .Yellow {
    color: #ffdf79;
}

.A-Catch .A-Catch-Txt .A-Catch-Txt-Block .bold.Yellow {
    font-size: 140%;
}

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

    #Distribution .P-Aside-more .P-AsideBlock {
        font-size: 2.6rem;
        line-height: 2;
    }

    #Distribution .P-Aside-more .P-AsideBlock:last-of-type {
        white-space: nowrap;
    }

    #Distribution .DistributionWrapper .P-Aside-example .P-AsideBlock {
        line-height: 1.8;
    }

}

select{
    height: auto !important;
}
.formWrap{
    display: flex;
    justify-content: center;
    margin: 30px 0 0;
    align-items: center;
    gap: 5px;
}
.fs-c-productSelection__label{
    font-size: 1.3rem;
}
.fs-c-productSelection{
    font-size: 1.6rem;
}
.quantity_txt{
    font-size: 1.6rem;
}