@charset "UTF-8";

/* img
-----------------------*/
img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}
.img_wrap {
    width: 100%;
    max-width: 800px;
    margin: auto;
    position: relative;
}

/* list
-----------------------*/
ul li{
	list-style-type: none;
}

/* Slick
------------------------*/
#howto,#faq,#sns{
	width: 100%;
	max-width: 800px;
}

.slider_area .slick-prev, 
.slider_area .slick-next {
    position: absolute;
    top: 50%;
    outline: none;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    height: 15px;
    width: 15px;
	z-index: 1;
}
.slider_area .slick-prev {
    left: 2%;
    transform: rotate(-135deg);
}
.slider_area .slick-next {
    right: 2%;
    transform: rotate(45deg);
}
.slider_area .slick-prev:before,
.slider_area .slick-next:before{
	color: transparent;
}

/* 間隔調整
------------------------*/
section{
	margin: 10% auto;
}
.mt3{
	margin-top: 3%;
}
.mt5{
	margin-top: 5%;
}
.mt10{
	margin-top: 10%;
}
.mt13 {
    margin-top: 13%;
}
.inform01 .inform01_02{
	margin-top: -5%;
}
.point01_05_wrap{
	text-align: right;
}
.point01_05_wrap img{
	width: 60%;
	margin-top: -5%;
}
.about02{
	margin-top: -2%;
}

/* flex
------------------------*/

.flex{
	display: flex;
	margin-top: 5%;
}

.flex .flex_box{
	width: 50%;
}

/* プライスゾーン
------------------------*/
#price{
	margin-top: 5%;
}

.link_btn {
    display: block;
    width: 38%;
    height: 12%;
    position: absolute;
    bottom: 43%;
    right: 9%;
    border-radius: 10px;
}
.link_btn:hover {
    background-color: transparent;
}
.link_btn2 {
    bottom: 6%;
}
.link_btn3{
	width: 100%;
	height: 20%;
	bottom: 0;
	right: 0;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.link_btn3:hover,
.link_btn4:hover {
    opacity: 0.9;
    transform: translateY(-4px);
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.link_btn4{
    width: 100%;
	height: 20%;
    bottom: 12%;
    right: 0;
}
.link_btn4_C1{
    height: 16%;
    bottom: 0;
}
.link_btn5 {
    width: 60%;
    height: 12%;
    bottom: 8%;
    right: 20%;
}
.price_link{
	text-align: center;
	padding-left: 3%;
	margin-top: 1em;
    margin-bottom: 1em;
}
.price_link a:hover{
	opacity: 0.85;
}
.price_link a img {
    animation: float 2s ease-in-out infinite;
    display: inline-block;
}
.price_link a:hover img {
    animation-play-state: paused;
    opacity: 0.85;
}

/* ボタン浮き上がりアニメーション
----------------------------------*/
@keyframes float {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-8px); }
    100% { transform: translateY(0px); }
}

/* キャンペーン終了
-------------------------------*/

.end{
    color: #EE6897;
    margin: 0 auto;
    max-width: 800px;
    text-align: center;
    font-weight: bold;
}

.end_price{
    font-size: 1.2em;
    margin: 30px auto;
}

@media screen and (min-width:769px) {
    .sp{
        display: none;
    }
}

@media screen and (max-width:768px) {
    .end{
        font-size: 0.8em;
    }
    .end_price{
        font-size: 0.8em;
    }
}
/* contact
-----------------------------*/

.contact{
    text-align: center;
    margin: 2% 0 8%;
}
.contact_container{
    width: 100%;
    padding: 15px;
}
.contact .container01{
    background-color: #CBE8EE;
    margin-bottom: 5%;
    padding: 15px;
}
.contact_shopname{
    margin: 0 auto 4%;
    display: block;
}
.contact_time{
    font-size: 2rem;
    margin-top: 2%;
}
@media screen and (max-width:768px){
    .contact_shopname{
        width: 80%;
    }
    .contact_time{
        font-size: 4vw;
        margin-top: 4%;
    }
}

/* YouTube動画
----------------------------------*/
.yt{
    text-align: center;
}
.yt iframe{
    width: 640px;
    height: 400px;
}
@media screen and (max-width:768px){
    .yt iframe{
        width: 90%;
        height: 50vw;
    }
}

/* 期間表示テキスト追加
----------------------------------*/
.period_text{
    text-align: center;
    font-size: 1.8em;
    font-weight: bold;
    color: #c30d23;
    margin-bottom: 40px;
    line-height: 1.4;
}
@media screen and (max-width:768px){
    .period_text{
        font-size: 1.4em;
    }
}
@media screen and (min-width:769px) {
    .period_text.large{
        font-size: 2.4em;
    }
}

/* about */
.about_text {
    text-align: center;
    font-size: 40px;
    font-weight: bold;
    border-bottom: 6px solid #000;
    width: fit-content;
    margin: 0 auto 24px;
}

@media screen and (max-width:768px) {
    .about_text {
        font-size: 32px;
    }
}

/* sns */
.sns_text {
    font-size: 90%;
    margin-top: 5%;
    padding-inline: 3%;
}

@media screen and (max-width:768px) {
    .sns_text {
        font-size: 40%;
    }
}

/* shine */

.shine {
    overflow: hidden;
    z-index: 3;
    display: block;
}

.shine:before {
    content: "";
    width: 200%;
    height: 200%;
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 1) 45%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 55%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%);
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 1) 45%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 55%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 1) 45%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 55%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#00ffffff', GradientType=0);
    position: absolute;
    top: -50%;
    left: -50%;
    -webkit-animation-name: shine;
    -moz-animation-name: shine;
    -o-animation-name: shine;
    animation-name: shine;
    -webkit-animation-duration: 1.2s;
    -moz-animation-duration: 1.2s;
    -o-animation-duration: 1.2s;
    animation-duration: 1.2s;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@-webkit-keyframes shine {

    from,
    0% {
        -webkit-transform: translate3d(-100%, 0, 0) rotate(45deg);
        -ms-transform: translate3d(-100%, 0, 0) rotate(45deg);
        -o-transform: translate3d(-100%, 0, 0) rotate(45deg);
        transform: translate3d(-100%, 0, 0) rotate(45deg);
        opacity: 0;
    }

    20% {
        -webkit-transform: translate3d(-100%, 0, 0) rotate(45deg);
        -ms-transform: translate3d(-100%, 0, 0) rotate(45deg);
        -o-transform: translate3d(-100%, 0, 0) rotate(45deg);
        transform: translate3d(-100%, 0, 0) rotate(45deg);
        opacity: 1;
    }

    70% {
        -webkit-transform: translate3d(100%, 0, 0) rotate(45deg);
        -ms-transform: translate3d(100%, 0, 0) rotate(45deg);
        -o-transform: translate3d(100%, 0, 0) rotate(45deg);
        transform: translate3d(100%, 0, 0) rotate(45deg);
        opacity: 1;
    }

    80% {
        -webkit-transform: translate3d(100%, 0, 0) rotate(45deg);
        -ms-transform: translate3d(100%, 0, 0) rotate(45deg);
        -o-transform: translate3d(100%, 0, 0) rotate(45deg);
        transform: translate3d(100%, 0, 0) rotate(45deg);
        opacity: 0;
    }

    to,
    100% {
        -webkit-transform: translate3d(-100%, 0, 0) rotate(45deg);
        -ms-transform: translate3d(-100%, 0, 0) rotate(45deg);
        -o-transform: translate3d(-100%, 0, 0) rotate(45deg);
        transform: translate3d(-100%, 0, 0) rotate(45deg);
        opacity: 0;
    }
}

/***************************************************
 テキスト化に伴う追加（20250203）
 **************************************************/

/* 汎用
------------------------------------*/
p {
    letter-spacing: 0.08em;
}
.section_inner{
    position: relative;
 }

 .text_wrap{
    width: 100%;
    max-width: 800px;
    margin: auto;
    position: absolute;
 }

 .underline{
    padding-bottom: 1%;
	background-repeat: repeat-x;
    background-size: 0.6em 0.2em,1.6em 0.2em,3.4em 0.2em,3.6em 0.2em;
    background-position: right bottom;
    background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(230,22,115,0)), color-stop(0.1, rgba(230,22,115,0.02)), color-stop(0.5, rgba(230,22,115,1)), color-stop(0.98, rgba(230,22,115,0)), to(rgba(230,22,115,0)) );
    background-image:
            -webkit-radial-gradient(center center,0.2em 0.1em,rgba(230,22,115,1) 0,rgba(230,22,115,0) 0.1em,rgba(230,22,115,0) 0.2em),
            -webkit-radial-gradient(center center,0.4em 0.1em,rgba(230,22,115,1) 0,rgba(230,22,115,0) 0.3em,rgba(230,22,115,0) 0.4em),
            -webkit-radial-gradient(center center,0.7em 0.1em,rgba(230,22,115,1) 0,rgba(230,22,115,0) 0.6em,rgba(230,22,115,0) 0.7em),
            -webkit-radial-gradient(center center,7.1em 0.1em,rgba(230,22,115,1) 0,rgba(230,22,115,0) 7em,rgba(230,22,115,0) 7.1em);
    background-image:
            radial-gradient(0.2em 0.1em at center center,rgba(230,22,115,1),rgba(230,22,115,0)),
            radial-gradient(0.4em 0.1em at center center,rgba(230,22,115,1),rgba(230,22,115,0)),
            radial-gradient(0.7em 0.1em at center center,rgba(230,22,115,1),rgba(230,22,115,0)),
            radial-gradient(7.1em 0.1em at center center,rgba(230,22,115,1),rgba(230,22,115,0));
 }

 .underline_02 {
    border-bottom: 3px solid #d70051;
 }

@media screen and (max-width:768px) {
    .underline_02 {
        border-bottom: 2px solid #d70051;
    }
}

 .text_min {
    font-family: "游明朝", "YuMincho", "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.text_large {
    font-size: 140%;
    font-weight: bold;
}

.text_small {
    font-size: 12px;
}

@media screen and (max-width:768px) {
    .text_small {
        font-size: 7px;
    }
}

.text_center {
    text-align: center;
}

.text_right {
    text-align: right;
}

 /* section02
------------------------------------*/
 .section02_text{
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.7;
    margin-left: 4.510416666666667vw;
 }
 @media screen and (max-width:768px){
    .section02_text{
        font-size: 3.2552083333333335vw;
    }
}

 .text_wrap:has(.section02_text){
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
 }
 @media screen and (max-width:768px){
    .text_wrap:has(.section02_text){
        bottom: 2.510416666666667vw;
    }
}

 /* section03
------------------------------------*/
.section03_title{
    font-size: 32px;
    font-weight: 500;
    text-align: center;
    padding-bottom: 20px;
    position: relative;
}
@media screen and (max-width:768px){
    .section03_title{
        font-size: 4.166666666666666vw;
        padding-bottom: 2.604166666666667vw;
    }
}
.section03_title::before{
    position: absolute;
    content: "";
    border-bottom: 5px solid #CBC265;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
}
@media screen and (max-width:768px){
    .section03_title::before{
        width: 13.0208333333333345vw;
        border-bottom: 0.6510416666666667vw solid #CBC265;
    }
}
.text_wrap:has(.section03_title){
    top: 60px;
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
 }
 @media screen and (max-width:768px){
    .text_wrap:has(.section03_title){
        top: 7.8125vw;
    }
}

 .section03_text{
    font-size: 38px;
    line-height: 1.4;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
	text-shadow: 0 0 15px #fff,0 0 15px #fff,0 0 15px #fff,0 0 15px #fff,0 0 15px #fff,0 0 15px #fff,0 0 15px #fff,0 0 15px #fff,0 0 15px #fff,0 0 15px #fff,0 0 15px #fff,0 0 15px #fff,0 0 15px #fff,0 0 15px #fff,0 0 15px #fff,0 0 15px #fff,0 0 15px #fff,0 0 15px #fff;
 }
 @media screen and (max-width:768px){
    .section03_text{
        font-size: 4.947916666666666vw;
    }
}
 .text_wrap:has(.section03_text){
    bottom: 160px;
    z-index: 1;
    left: 24%;
 }

/***************************************
 日付テキスト化 250729
***************************************/
.day_1 {
        color: #C00F23;
        font-size: 20px;
        font-family: serif;
        font-weight: 800;
        position: relative;
        top: -460px;
        display: inline-block;
        left: 7%;
    }
.day_2 {
    font-size: 56px;
    font-weight: 600;
    color: #fff;
    position: absolute;
    top: 740px;
    left: 50%;
    transform: translateX(-50%);
    text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.3);
}

.day_2_sub {
    font-size: 36px;
}

.day_2_sub_2 {
    font-size: 30px;
    display: inline-block;
    margin-left: 1rem;

}
.day_3 {
    font-family: 'Arial', sans-serif;
    color: #C80000;
    font-weight: bold;
    display: flex;
    align-items: flex-end;
    font-size: 100px;
    justify-content: center;
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
}

.month {
    font-size: 110px;
    margin-right: 10px;
    position: relative;
    top: -100px;
}

.slash {
    width: 3px;
    height: 240px;
    background-color: #C80000;
    transform: rotate(42deg);
    margin-right: 10px;
    margin-bottom: 10px;
}

.day {
    font-size: 140px;
}
.text_wrap{
    position: absolute;
    font-family: "Zen Maru Gothic", sans-serif;
    top: 350px;
    text-align: center;
    font-weight: 600;
}
.text_wrap .text{
    font-size: 24px;
    margin-bottom: 24px;
}
.text_wrap .text_2{
    font-size: 34px;
}
.text_wrap .bg{
    line-height: 1.8;
    background-color: rgba(228, 0, 127, 0.2);
    display: inline-block;
    padding: 0 1%;
}
.text_wrap .text_3{
    font-size: 24px;
    margin-bottom: 24px;
}
.text_wrap .text_4{
    font-size: 34px;
}
.text_wrap .text_4 .nomal{
    font-size: 24px;
}

.campaign_text{
    color: #fff;
    font-size: 56px;
    font-family: serif;
    font-weight: 700;
    position: absolute;
    top: 630px;
    left: 50%;
    transform: translateX(-50%);
    text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.3);
    line-height: 1;
    white-space: nowrap;
}
@media screen and (max-width:800px) {
    .day_1 {
        top: -57.49999999999999vw;
        font-size: 2.8vw;
    }
    .day_2 {
        font-size: 7vw;
        top: 92vw;
    }

    .day_2_sub {
        font-size: 3.75vw;
    }

    .day_2_sub_2 {
        font-size: 3.75vw;
        margin-left: 1vw;
    }
    .day_3 {
        bottom: 6.25vw;
    }
    .month{
        top: -12.5vw;
        font-size: 13.75vw;
    }
    .slash{
        height: 30vw;
    }
    .day{
        font-size: 17.5vw;
    }
    .text_wrap{
        top: 43.75vw;
    }
    .text_wrap .text{
        font-size: 3vw;
        margin-bottom: 3vw;
    }
    .text_wrap .text_2{
        font-size: 4.25vw;
    }
    .text_wrap .text_3{
        font-size: 3vw;
        margin-bottom: 3vw;
    }
    .text_wrap .text_4{
        font-size: 4.25vw;
    }
    .text_wrap .text_4 .nomal{
        font-size: 3vw;
    }
    .campaign_text{
        font-size: 7vw;
        top: 78.75vw;
    }
}