@charset "UTF-8";
:root {
    --Font-hinaMin : hina-mincho, sans-serif;
    --Font-Gothic : source-han-sans-japanese, sans-serif;
    --Font-Arabic: adobe-arabic, sans-serif;
    --font-Hiragino: ;
    --color-text : #665555;
    --bgcolor01 : #F5EDEE;
    --bgcolor02 : #E3DFE0;
    --bgcolor-footer : #E0ADAD;
    --color-highlight : #E66D6D;
    --color-accent : #EB8282;
    --color-primary : #C79A6F;
    --color-light : #F8F5F6;
    --side-margin : 10vw;
}
@keyframes bounce {
    0% {
        transform: translateX(-50%) translateY(0);
        opacity: 0.5;
    }
    50% {
        transform: translateX(-50%) translateY(-10px);
        opacity: 1;
    }
    100%{
        transform: translateX(-50%) translateY(0px);
        opacity: 0.5;
    }
}
@keyframes fadein {
    0%{
    }
    80% {
        opacity: 0.2;
    }
    100%{
        transform: translate(0,0);
        opacity: 1;
    }
}
@keyframes opacity {
    0%{    
    }
    100%{
        opacity: 1;
    }
}
@keyframes section02fade {
    0% {
    }
    80% {
        opacity: 0.2;
    }
    100% {
        transform: translate(0,-50%);
        opacity: 1;
    }
}
.bgcolor-01 {
    background-color: var(--bgcolor01);
}
.bgcolor-02 {
    background-color: var(--bgcolor02);
}
.text-normal {
    font-family: var(--Font-Gothic);
    font-size: clamp(0.863rem, 0.802rem + 0.25vw, 1rem);
    color: var(--color-text);
    line-height: 1.5;
}
.text-to-read {
    font-family: var(--Font-Gothic);
    font-size: clamp(0.875rem, 0.711rem + 0.67vw, 1.25rem);
    line-height: 1.5;
}
.text-to-read--regular {
    font-weight: 400;
}
.text-to-read--bold {
    font-weight: 700;
}
.text-to-read--s {
    font-size: 0.8em;
}
.text-to-read--xs {
    font-size: 0.6em;
}
.text-highlight {
    font-family: var(--Font-hinaMin);
}
.text-highlight__LL {
    font-size: clamp(1.875rem, 1.464rem + 1.69vw, 2.813rem);
}
.text-highlight__gothic {
    font-family: var(--Font-Gothic);
    font-style: normal;
    font-weight: 500;
}
.text-highlight__L {
    font-size: clamp(1.25rem, 0.976rem + 1.12vw, 1.875rem);
    line-height: 1.2;
}
.text-highlight__L--emphasis-M{
    font-size: 1.16em;
}
.text-highlight__L--emphasis-L {
    font-size: 1.3em;
}

.text-highlight__XL {
    font-size: clamp(1.875rem, 1.327rem + 2.25vw, 3.125rem);
    line-height: 1.2;
}
.text-highlight__XL--emphasis {
    font-size: 1.2em;
}
.text--gold {
    color: var(--color-primary);
}
.text--accent {
    color: var(--color-accent);
}
.text--brown {
    color: var(--color-text);
}
.text--darkpink {
    color: var(--color-highlight);
}
/* ヘッダー */
.header {
    width: 100%;
}
.header--position {
    position: relative;
}
.header__fv img {
    width: 100%;
}
.header__logo {
    width: 17.5vw;
}
.header__logo img {
    width: 100%;
}
.header__logo--position {
    position: absolute;
    left: var(--side-margin);
    top: 8vw;
}
@media screen and (max-width:770px) {
    .header__logo {
        width: 38vw;
    }
    .header__logo--position {
        left: unset;
        right: var(--side-margin);
        top: 16vw;
    }
}
.header__itemname {
    font-family: var(--Font-Gothic);
    font-weight: 400;
    color: var(--color-primary);
    font-size: 18px;
}
.header__itemname--position {
    position: absolute;
    left: var(--side-margin);
    top: 50vw;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.header__scroll-img {
    width: 20vw;
}
.header__scroll-img img {
    width: 100%;
}
.header__scroll-img--pisition {
    position: absolute;
    bottom: 1vw;
    left: 50%;
}
.header__scroll-img--animation {
    animation: bounce 1.5s ease infinite;
}
@media screen and (max-width:770px) {
    .header__itemname {
        font-size: 14px;
    }
    .header__itemname--position {
        top: 72vw;
        gap: 10px;
    }
    .header__scroll-img {
        width: 38vw;
    }
}
/* セクション01 */
.section01 {
    width: 100%;
    height: 400px;
    display: flex;
}
.section01__outer-wrapper {
    width: 100%;
    height: 325px;
    display: flex;
}
.section01__outer-wrapper--position {
    position: relative;
    margin: auto 0;
    z-index: 1;
}
.section01__leftbox {
    width: 93%;
    height: 325px;
}
.section01__leftbox--bgcolor {
    background-color: var(--bgcolor02);
}
.section01__leftbox--position {
    position: absolute;
    left: 0;
}
.section01__leftbox--before-anime {
    transform: translate(-100%, 0);
    opacity: 0;
}
.js-fadein.is-animated {
    animation: fadein 1.5s ease-out forwards;
}
.section01__inner-wrapper {
    width: 100%;
    height: 200px;
}
.section01__inner-wrapper--position {
    position: relative;
    margin: auto;
    z-index: 2;
}
.section01__rightbox {
    width: 50%;
    height: 200px;
}
.section01__rightbox--position {
    position: absolute;
    right: 0;
}
.section01__rightbox--bgcolor {
    background-color: rgba(255, 255, 255, 0.5);
    opacity: 0.5;
}
.section01__rightbox--before-anime {
    transform: translate(500px, 0);
    opacity: 0;
}
.section01__rightbox.js-fadein.is-animated {
    animation: fadein 2.5s ease-out forwards;
}
.section01__wrapper-article {
    display: flex;
}
.section01__wrapper-article--position {
    position: relative;
    margin: auto var(--side-margin);
    z-index: 3;
}
.section01__point {
    width: 19vw;
}
.section01__point img {
    width: 100%;
}
.section01__point--position {
    position: absolute;
    top: 0;
    transform: translate(-2vw, -50%);
    z-index: 4;
}
.section01__point--before-animation {
    opacity: 0;
}
.section01__point--before-animation.js-fadein.is-animated {
    animation: opacity 1s ease-in forwards;
}
.section01__article-group {
    display: flex;
    width: 100%;
    height: 200px;
}
.section01__wrapper-list {
    display: flex;
    width: 50%;
    gap: 1%;
}
.section01__wrapper-list--position {
    padding: 0 2%;
}
.section01__wrapper-list--font {
    font-family: var(--Font-hinaMin);
    font-size: clamp(1.5rem, 0.934rem + 1.18vw, 1.875rem);
    color: var(--color-text);
}
.section01__wrapper-list--before-anime {
    opacity: 0;
}
.section01__wrapper-list.js-fadein.is-animated {
    animation: opacity 1s ease-in forwards;
    animation-delay: 0.5s;
}
.section01__list {
    width: 30%;
    aspect-ratio: 1;
    text-align: center;
}
.section01__list--position {
    position: relative;
    margin: auto;
}
.section01__list p { 
    position: absolute;
    display: block;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.section01__list--circle {
    border: solid 2px #FFF;
    border-radius: 50%;
}
.section01__main-article {
    width: 50%;
    height: 200px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    text-align: center;
}
.section01__main-article--padding {
    padding: 5px;
}
.section01__main-article--before-animation {
    transform: translate(500px, 0);
    opacity: 0;
}
.section01__main-article.js-fadein.is-animated {
    animation: fadein 2s ease-in forwards;
    animation-delay: 0.3s;
}


@media screen and (max-width:770px){
    .section01__outer-wrapper {
        height: 370px;
    }
    .section01__leftbox {
        height: 370px;
    }
    .section01__inner-wrapper {
        height: 330px;
    }
    .section01__rightbox {
        width: 95%;
    }
    .section01__rightbox--position {
        bottom: 0;
    }
    .section01__point {
        width: 38vw;
    }
    .section01__point--position {
        transform: translate(-5vw, -25%);
    }
    .section01__article-group {
        height: 330px;
        flex-direction: column;
        justify-content: flex-end;
        gap: 20px;
    }
    .section01__wrapper-list {
        width: 100%;
    }
    .section01__main-article {
        width: 100%;
    }
}
/* セクション02 */
.section02 {
    width: 100%;
    height: 46vw;
    overflow-x: hidden;
}
.section02__wrapper {
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
}
.section02__wrapper--position {
    position: relative;
}
.section02__img {
    width: 56vw;
    height: 42vw;
    object-fit: cover;
}
.section02__img--position {
    margin-left: auto;
    z-index: 3;
}
.section02__img--border {
    border-radius: 30px 0 0 30px;
}
.section02__img--before-animation {
    transform: translate(56vw,0);
    opacity: 0;
}
.section02__img.js-fadein.is-animated {
    animation: fadein 2s ease-in forwards;
}
.section02__right-box {
    width: 88vw;
    height: 30vw;
}
.section02__right-box--color {
    background-color: rgba(255, 255, 255, 0.5);
}
.section02__right-box--position {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    z-index: 2;
}
.section02__right-box--before-animation {
    transform: translate(100vw,-50%);
    opacity: 0;
}
.section02__right-box.js-fadein.is-animated {
    animation: section02fade 2s ease-out forwards;
    animation-delay: 0.5s;
}
.section02__article {
    width: 100%;
}
.section02__article--position {
    margin-left: var(--side-margin);
    margin-top: 7vw;
    z-index: 3;
}
.section02__article--before-animation {
    opacity: 0;
}
.section02__article.js-fadein.is-animated {
    animation: opacity 2s ease forwards;
    animation-delay: 1s;
}
.section02__highlight--position {
    margin-bottom: 3vw;
}

@media screen and (max-width:770px) {
    .section02 {
        height: 145vw;
    }
    .section02__wrapper {
        flex-direction: column;
    }
    .section02__img{
        width: 90vw;
        height: 75vw;
    }
    .section02__right-box {
        width: 80vw;
        height: 55vw;
    }
    .section02__right-box--position {
        top: 83vw;
        transform: translateY(0);
    }
    .section02__right-box.js-fadein.is-animated {
        animation: fadein 2s ease-in forwards;
    }
}
/* セクション03 */
.section03 {
    width: 100%;
}
.section03--background {
    background-image: url(img/background_img.png);
    background-size: cover;
    background-position: center;
}
.section03--position {
    padding-bottom: 100px;
}
.section03__Wrapper-eyecatch {
    display: flex;
    flex-direction: column;
}
.section03__Wrapper-eyecatch--position {
    position: relative;
    margin: 0 var(--side-margin);
    z-index: 1;
}
.section03__Wrapper-Highlight--position {
    position: absolute;
    top: 7vw;
    z-index: 3;
} 
.section03__Wrapper-Highlight--before-animation {
    opacity: 0;
    transform: translateY(100px);
}
.section03__Wrapper-Highlight.js-fadein.is-animated {
    animation: fadein 0.5s ease-out forwards;
}
.section03__highlight-img {
    width: 86%;
}
.section03__highlight-img--position {
    position: absolute;
    top: 2vw;
    left: 5vw;
    z-index: -1;
}
.section03__eyecatch {
    width: 62vw;
}
.section03__eyecatch--position {
    margin-left: auto;
}
.section03__eyecatch--before-animation {
    opacity: 0;
    transform: translateY(100px);
}
.section03__eyecatch.js-fadein.is-animated {
    animation: fadein 0.5s ease-out forwards;
    animation-delay: 0.5s;
}
.section03__wrapper-article {
    width: 90vw;
}
.section03__wrapper-article--position {
    margin: 0 auto;
}
.section03__wrapper-article--before-animation {
    opacity: 0;
    transform: translateY(100px);
}
.section03__wrapper-article.js-fadein.is-animated {
    animation: fadein 0.5s ease-out forwards;
}
.outer-gold-frame {
    width: 100%;
    height: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    --gold: #C79A6F;
    background:
    radial-gradient(circle at bottom left,  transparent 20px, var(--gold) 20px),
    radial-gradient(circle at top left, transparent 20px, var(--gold) 20px),
    radial-gradient(circle at top right, transparent 20px, var(--gold) 20px),
    radial-gradient(circle at bottom right, transparent 20px, var(--gold) 20px);
    background-position: bottom left, top left, top right, bottom right;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}
.outer-gold-frame::after {
    content: "";
    width: calc(100% - 4px * 2);
    height: calc(100% - 4px * 2);
    position: absolute;
    background:
    radial-gradient(circle at bottom left,  transparent 19px, #FFF 19px),
    radial-gradient(circle at top left, transparent 19px,#FFF 19px),
    radial-gradient(circle at top right, transparent 19px, #FFF 19px),
    radial-gradient(circle at bottom right, transparent 19px, #FFF 19px);
    background-position: bottom left, top left, top right, bottom right;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}
.inner-gold-frame {
    width: calc(100% - 10px * 2);
    height: calc(100% - 10px * 2);
    margin: 10px 0;
    padding: 4vw 8vw;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    --gold: #C79A6F;
    background:
    radial-gradient(circle at bottom left,  transparent 20px, var(--gold) 20px),
    radial-gradient(circle at top left, transparent 20px, var(--gold) 20px),
    radial-gradient(circle at top right, transparent 20px, var(--gold) 20px),
    radial-gradient(circle at bottom right, transparent 20px, var(--gold) 20px);
    background-position: bottom left, top left, top right, bottom right;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    z-index: 2;
}
.inner-gold-frame::after {
    content: "";
    width: calc(100% - 2px * 2);
    height: calc(100% - 2px * 2);
    position: absolute;
    background:
    radial-gradient(circle at bottom left,  transparent 20px, #FFF 20px),
    radial-gradient(circle at top left, transparent 20px,#FFF 20px),
    radial-gradient(circle at top right, transparent 20px, #FFF 20px),
    radial-gradient(circle at bottom right, transparent 20px, #FFF 20px);
    background-position: bottom left, top left, top right, bottom right;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}
.section03__article{
    width: 100%;
}
.section03__article--position {
    z-index: 3;
}
.section03--text {
    display: flex;
    flex-direction: column;
    gap: 1em;
}
.section03--text__position {
    margin: 2em 0;
}
.list--check {
    text-indent: 3em;
    display: block;
    position: relative;
}
.list--check::before {
    content: "";
    position: absolute;
    display: block;
    width: 1.5em;
    height: 1.5em;
    background-image: url(img/check.png);
    background-size: 1.5em;
    background-position: left;
    background-repeat: no-repeat;
}
.section03__article-aside {
    max-width: 660px;
}
.section03__article-aside--position {
    margin-left: auto;
}
@media screen and (max-width:770px) {
    .section03__eyecatch {
        width: 95%;
    }
    .section03__eyecatch--position {
        margin-top: 100px;
        margin-bottom: 25px;
        margin-right: auto;
    }
}
/* セクション04 */
.section04--padding {
    padding-top: 100px;
}
.section04__container {
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.section-04__container--pink-shadow {
    background-color: #FFF;
    border-radius: 10px;
    box-shadow: 0px 0px 50px #E0ADAD ;
}
.section04__container--position {
    margin: 0px auto 100px;
    padding: 5% 3%;
    position: relative;
}
.section-04__container--before-animation {
    opacity: 0;
    transform: translateY(100px);
}
.seciton04__how-to-use {
    width: 21vw;
}
.section04__container.js-fadein.is-animated {
    animation: fadein 0.5s ease-out forwards;
}
.seciton04__how-to-use--positon {
    position: absolute;
    top: -4vw;
    left: -3vw;
}
.section04__wrapper-article {
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    gap: 2vw;
}
.section04__text {
    width: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.section04__text--position {
    padding-top: 2vw;
}
.section04__wrapper-night-and-day {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.section04__wrapper-night-and-day--position {
    margin-top: 3vw;
    margin-bottom: 1.2vw;
}
.section04__night {
    width: 49%;
}
.seciton04__day {
    width: 49%;
}
.section04__clock {
    width: 23vw;
    height: 23vw;
}
.section04__catchcopy {
    width: 100%;
}
.section04__catchcopy--position {
    position: relative;
}
.section04__catchcopy--before-animation {
    opacity: 0;
    transform: translateY(100px);
}
.section04__catchcopy.js-fadein.is-animated {
    animation: fadein 0.5s ease-out forwards;
}
.section04__catchcopy-background img{
    width: 100%;
}
.section04__copy {
    width: 100%;
    text-align: center;
}
.section04__copy--position {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.text-section04-copy {
    font-size: clamp(1.25rem, 0.428rem + 3.37vw, 3.125rem);
}
@media screen and (max-width:770px)  {
    .section04__container {
        width: 90%;
    }
    .seciton04__how-to-use {
        width: 43vw;
    }
    .seciton04__how-to-use--positon {
        top: -10vw;
        left: -5vw;
    }
    .section04__wrapper-article {
        flex-direction: column;
        text-align: center;
        align-items: center;
        gap: 5vw;
    }
    .section04__wrapper-article--position {
        margin-top: 5vw;
    }
    .section04__wrapper-night-and-day {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .section04__night {
        width: 90%;
    }
    .seciton04__day {
        width: 90%;
    }
    .section04__clock {
        width: 50vw;
        height: 50vw;
    }
}
/* セクション05 */
.section05 {
    width: 100%;
    height: 39vw;
    display: flex;
    align-items: center;
}
.section05__background-image {
    background-image: url(img/eyechatch2.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.section05__copy {
    font-size: clamp(1.563rem, 0.852rem + 2.84vw, 3.125rem);
}
.section05__copy--position {
    padding: 0 var(--side-margin);
    margin-left: auto;
    margin-top: 2em;
}
.section05__copy--color-shadow {
    color: #FFF;
    text-shadow: 0px 0px 10px #F57891;
}
.section05--before-animation {
    opacity: 0;
}
.section05.js-fadein.is-animated {
    animation: opacity 3s ease forwards;
}
@media screen and (max-width:770px) {
    .section05 {
        height: 76vw;
    }
    .section05__background-image {
        background-position: 30% 50%;
    }
    .section05__copy--position {
        margin-top: 6em;
    }
}
/* セクション06 */
.section06 {
    width: 100%;
    display: flex;
    flex-direction: row;
}
.item-img {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.item-description {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.item-description--position {
    padding-left: 20px;
}
.item-description--background {
    background-color: var(--color-light);
    border-radius: 20px 0 0 20px;
}
.item-copy--position {
    margin-bottom: clamp(0.625rem, -0.511rem + 4.55vw, 3.125rem);
}
.item-name {
    font-weight: 700;
    font-size: clamp(1.5rem, 1.33rem + 0.68vw, 1.875rem);
}
.item-name--position {
    margin-bottom: 10px;
}
.item-price {
    font-family: var(--Font-Arabic);
    font-weight: 700;
    font-style: normal;
    font-size: 75px;
}
.item-price__enn {
    font-family: "dnp-shuei-mincho-pr6n", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 30px;
}
.purchase-button {
    width: calc(50vw - var(--side-margin) - 20px);
    height: 50px;
    font-family: var(--Font-hinaMin);
    color: #FFF;
    font-size: clamp(1.563rem, 1.42rem + 0.57vw, 1.875rem);
    text-align: center;
    vertical-align: middle;
}
.purchase-button--position {
    margin-right: var(--side-margin);
}
.purchase-button--background {
    background-image: url(img/button_pc.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
@media screen and (max-width:770px){
    .section06 {
        flex-direction: column;
    }
    .item-img {
        width: 100%;
    }
    .item-description {
        width: 100%;
    }
    .item-description--position {
        padding: var(--side-margin);
    }
    .purchase-button {
        width: 100%;
        height: 100px;
    }
    .purchase-button--position {
        margin-right: 0;
    }
    .purchase-button--background {
        background-image: url(img/button_mb.png);
    }
}
/* セクション07 */
.secton07--position {
    padding: 40px var(--side-margin);
}
.section07__table {
    border-spacing: 0 7px;
}
.section07__table-caption {
    margin-bottom: 10px;
}
.section07__table-column01 {
    width: 5em;
    text-align: right;
}
/* フッター */
.footer-container {
    width: 100%;
    color: var(--color-text);
}
.footer-container--bgcolor {
    background-color: var(--bgcolor-footer);
}
.footer-container--position {
    padding: 4vw var(--side-margin) 2vw;
}
.footer-adress__container {
    display: flex;
    flex-direction: row;
    gap: 20px;
}
.footer-adress__container--position {
    margin-bottom: 20px;
}
.footer-adress__title {
    font-family: var(--Font-Gothic);
    font-weight: 400;
    font-family: 20px;
}
.footer-adress__name {
    font-family: var(--Font-Gothic);
    font-weight: 500;
    font-size: 25px;
}
.footer-adress__number-container--position {
    margin-top: 1em;
}
.footer-adress__number {
    font-family: var(--Font-Arabic);
    font-weight: 700;
    font-size: 70px;
    text-align: center;
    line-height: 40px;
}
.footer-adress__time {
    font-family: var(--Font-Gothic);
    font-weight: 500;
    font-size: clamp(0.875rem, 0.818rem + 0.23vw, 1rem);
    text-align: center;
}
.footer__copyright {
    text-align: center;
}
@media screen and (max-width:770px) {
    .footer-adress__container {
        flex-direction: column;
        justify-content: center;
    }
    .footer-container--position  {
        padding-top: 9vw;
    }
    .footer-adress__number-container--position {
        margin-top: 0;
    }
}