@charset "utf-8";

/* back ///////////////////////*/
.header .back {
display: none;
}


/* category_title ///////////////////////*/
.category_title {
padding: 0 0 1rem 0;
aspect-ratio:1/.5;
border:0px #FF0000 solid;
}

.category_title {
aspect-ratio:1/.2;
border:0px #FF0000 solid;
}

/* go_register お試し登録はこちら ///////////////////////*/
.go_register {
position: fixed;
right: -60px;
bottom: 15vh;
z-index: 2;
-webkit-transition: 0.3s;
transition: 0.3s;
}

.go_register p {
font-family: "Kosugi Maru", sans-serif;
font-weight: 400;
font-style: normal;
text-stroke-width: 0.1px;
text-stroke-color: #FFF;
-webkit-text-stroke-width: 0.1px;
-webkit-text-stroke-color: #FFF;
padding: 1.5rem 0.75rem;
font-size: 1.3rem;
line-height: 1.4rem;
background: #BB7F7F;
color: #FFF;
border-radius: 0.5rem 0 0 0.5rem;
-moz-border-radius: 0.5rem 0 0 0.5rem;
-webkit-border-radius: 0.5rem 0 0 0.5rem;
width: 2.75rem;
}

.go_register:hover p {
background: #007CFD;
}

.go_register_visible {
right: 0;
}


/* more 右寄せボタン ///////////////////////*/
.more {
text-align: right;
}

.more a,
.more button {
position: relative;
display: inline-block;
background: #262224;
border-radius: 0.5rem 0 0 0.5rem;
-moz-border-radius: 0.5rem 0 0 0.5rem;
-webkit-border-radius: 0.5rem 0 0 0.5rem;
text-decoration: none;
}

.more a:hover,
.more button:hover {
background: #007CFD;
}

.more p {
white-space: nowrap;
text-align: center;
font-family: "Kosugi Maru", sans-serif;
font-weight: 400;
font-style: normal;
text-stroke-width: 0.1px;
text-stroke-color: #FFF;
-webkit-text-stroke-width: 0.1px;
-webkit-text-stroke-color: #FFF;
color: #FFF;
font-size: 1.3rem;
line-height: 1.3rem;
padding: 1.3rem 3rem 1.3rem 2rem;
text-stroke-width: 0;
-webkit-text-stroke-width: 0;
}

.more img {
display: inline-block;
vertical-align: middle;
-webkit-filter: invert();
        filter: invert();
width: clamp(25px, 5vw, 30px);
margin: 0 5px 5px 0;
}


/* text ///////////////////////*/
.text strong {
font-weight: bold;
text-decoration: underline;
}


/* top ///////////////////////*/
.top {
position: relative;
overflow: hidden;
}

.top .title {
padding: 3rem 0 0 0;
margin: 0 auto;
width: 60%;
max-width: 300px;
border:0px #FF0000 solid;
}

.top .title img{
width: 100%;
height:auto;
}

.top .cut {
width: 120%;
max-width: 740px;
margin: 0 auto 0 -10%;
border:0px #FF0000 solid;
}

.top .cut img{
width: 100%;
height:auto;
}


@media (min-width: 740px) {
.top .cut {
margin: 0 auto;
}
}


/* info ///////////////////////*/
.info {
background: #F9F1E7;
padding: 10rem 0 5rem 0;
margin-top: -7rem;
}

.info .text_title {
padding: 2rem 0;
}

.info .text em {
font-weight: bold;
text-decoration: underline;
}

.info h1 p {
font-size: 1.75rem;
line-height: 1.75rem;
padding: 0 0 0.75rem 0;
}

.info .dl {
display: table;
width: 100%;
max-width: 470px;
margin: 1rem auto 0 auto;
}

.info .dd {
display: table-cell;
vertical-align: middle;
padding: 0;
}

.info .dd p {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0 auto;
max-width: 160px;
aspect-ratio: 1;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border: 2px #BB7F7F solid;
background: #FFF;
}

.info .dd strong {
display: block;
text-align: center;
font-family: "Kosugi Maru", sans-serif;
font-weight: 400;
font-style: normal;
text-stroke-width: 0.1px;
text-stroke-color: #FFF;
-webkit-text-stroke-width: 0.1px;
-webkit-text-stroke-color: #FFF;
font-size: 1rem;
line-height: 1.6rem;
color: #b86363;
}

.info .dd:nth-child(2) strong {
font-size: 3rem;
}


/* info text_title [ ○○○○ ] ///////////////////////*/
.info .text_title strong {
position: relative;
font-weight: normal;
text-stroke-width: 0;
text-stroke-color: #222;
-webkit-text-stroke-width: 0;
-webkit-text-stroke-color: #222;
display: block;
font-size: 1.6rem;
line-height: 1.6rem;
padding: 1rem 0 0 0;
}

.info .text_title strong:before {
content: "";
position: relative;
display: inline-block;
width: 7.5px;
height: 1.45rem;
vertical-align: top;
border-top: 1px #262224 solid;
border-bottom: 1px #262224 solid;
border-left: 2px #262224 solid;
margin: -1px 7.5px 0 0;
}

.info .text_title strong:after {
content: "";
display: inline-block;
width: 7.5px;
height: 1.45rem;
vertical-align: top;
border-top: 1px #262224 solid;
border-bottom: 1px #262224 solid;
border-right: 2px #262224 solid;
margin: -1px 0 0 7.5px;
}
@media (min-width: 740px) {
.info .text_title strong {
  font-size: 2.3rem;
  line-height: 2.3rem;
  padding: 2rem 0 0 0;
}

.info .text_title strong:before {
  height: 2rem;
}

.info .text_title strong:after {
  height: 2rem;
}
}


/* what area ///////////////////////*/
.what .area {
position: relative;
overflow: hidden;
width: 100%;
max-width: 740px;
height: 500px;
margin: 0 auto;
border:0px #FF0000 solid;
}

.what .area .char {
position: absolute;
width: 80px;
right: 20px;
z-index: 1;
}

.what .area .bg1 {
position: absolute;
width: 200px;
top: 30px;
right: 120px;
}

.what .area .bg2 {
position: absolute;
width: 200px;
bottom: 50px;
left: -5px;
}

.what .area .bg3 {
position: absolute;
width: 200px;
bottom: 60px;
right: -15px;
}

.what .area .preview {
position: absolute;
width: 45%;
min-width: 160px;
max-width: 240px;
bottom: 0;
left: 50%;
margin-left: clamp(-120px, -55%, -120px);
border:0px #FF0000 solid;
}

.what .area .phone {
position: relative;
top: 0;
left: 0;
width: 100%;
z-index: 2;
pointer-events: none;
}

.what .area .screen {
position: absolute;
z-index: 1;
width: 100%;
aspect-ratio: 0.52083333;
padding: 10px;
border:0px #FF0000 solid;
}

.what .area .preview .slider {
width: 100%;
height: 100%;
background: #FFF;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}

.what .area .preview .slider .block {
vertical-align: middle;
display: inline-block;
padding: 0;
}

.what .area .icon {
position: relative;
background: #CB9A9D;
aspect-ratio: 1/1;
border:0px #FF0000 solid;
}

.what .area .icon img {
opacity: 0;
width:100%;
}

.what .area .invitation {
-webkit-mask-image: url(../image/icon/invitation.svg);
mask-image: url(../image/icon/invitation.svg);
}

.what .area .seating {
-webkit-mask-image: url(../image/icon/seating-seat.svg);
mask-image: url(../image/icon/seating-seat.svg);
}

.what .area .food_menu {
-webkit-mask-image: url(../image/icon/food_menu.svg);
mask-image: url(../image/icon/food_menu.svg);
}

.what .area .profile {
-webkit-mask-image: url(../image/icon/profile.svg);
mask-image: url(../image/icon/profile.svg);
}

.what .area .guest {
-webkit-mask-image: url(../image/icon/guest.svg);
mask-image: url(../image/icon/guest.svg);
}

.what .area .name_card {
-webkit-mask-image: url(../image/icon/name_card.svg);
mask-image: url(../image/icon/name_card.svg);
}

.what .area .schedule {
-webkit-mask-image: url(../image/icon/schedule.svg);
mask-image: url(../image/icon/schedule.svg);
}

.what .area .calendar {
-webkit-mask-image: url(../image/icon/calendar.svg);
mask-image: url(../image/icon/calendar.svg);
}

.what .area .wrap {
display: block;
overflow: hidden;
padding: 30px 10px;
}

.what .area .wrap h3 {
text-align: center;
font-family: "Kosugi Maru", sans-serif;
font-weight: 400;
font-style: normal;
text-stroke-width: 0.1px;
text-stroke-color: #FFF;
-webkit-text-stroke-width: 0.1px;
-webkit-text-stroke-color: #FFF;
white-space: nowrap;
font-size: 1.15rem;
line-height: 1.15rem;
}

.what .area .wrap p {
padding: 10px 0;
line-height: 1.3rem;
font-size: 0.9rem;
}


/* what ///////////////////////*/
.what {
padding: 5rem 0;
background: #EDDAD3;
}

.what .text_title h2 p {
line-height: 2rem;
}

.what .more {
padding: 2rem 0 0 0;
}

.what .text em {
font-weight: bold;
text-decoration: underline;
}

.what .tab {
margin: 0 auto;
padding: 1rem 0 2rem 0;
max-width: 740px;
}

.what .tab .block {
display: inline-block;
width: 33%;
padding: clamp(2px, 0.5vw, 5px);
}

.what .tab h4 {
text-align: center;
white-space: nowrap;
background: #FEF6EC;
cursor: pointer;
aspect-ratio: 1;
width: 100%;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

.what .tab h4 p {
text-align: center;
margin: 0 auto;
line-height: 1.3rem;
font-family: "Kosugi Maru", sans-serif;
font-weight: 400;
font-style: normal;
text-stroke-width: 0.1px;
text-stroke-color: #FFF;
-webkit-text-stroke-width: 0.1px;
-webkit-text-stroke-color: #FFF;
font-size: clamp(0.8rem, 4vw, 1.15rem);
}

.what .tab h4:hover {
background: #007CFD;
}

.what .tab h4:hover p {
color: #FFF;
}

.what .tab .slick-current h4 {
background: #CB9A9D;
}

.what .tab .slick-current p {
color: #FFF;
}


@media (min-width: 740px) {
.what .area .bg1 {
position: absolute;
width: 230px;
top: 50px;
right: 120px;
}

.what .area .bg2 {
position: absolute;
width: 250px;
bottom: 20px;
left: 50px;
}

.what .area .bg3 {
position: absolute;
width: 230px;
bottom: 30px;
right: 15px;
}

.what .area .wrap {
padding: 45px 10px;
}

.what .area .wrap p {
padding: 15px;
}
}


/* .slider（機能紹介） ///////////////////////*/
.slider {
margin: 0 auto;
position: relative;
overflow: hidden;
}

.slider .wrap{
display: inline-block;
padding: 0 7.5px;
}

@media (min-width: 740px) {
.slider .wrap {
padding: 0 1rem;
}
}


/* design ///////////////////////*/
.design {
padding: 5rem 0;
}

.design .more {
padding: 2rem 0 0 0;
}

.design .cut {
position: absolute;
width: 250px;
left: -30px;
top: -140px;
aspect-ratio:1/1;
border:0px #FF0000 solid;
}


/* design exp ///////////////////////*/
.design .exp {
position: relative;
margin: 10rem 0 4rem 0;
padding: 0 1rem 2rem 1rem;
background: #F9F1E7;
border-radius: 0.5rem;
-moz-border-radius: 0.5rem;
-webkit-border-radius: 0.5rem;
}

.design .exp .text_title {
padding: 5rem 0 0 0;
}

.design .exp .text {
padding: 0 0 1rem 0;
max-width: 470px;
margin: 0 auto;
}

.design .exp .scroll {
max-width: 470px;
margin: 0 auto;
height: 5rem;
}

.design .exp .scroll p {
position: relative;
text-align: center;
width: 55%;
font-size: 1.3rem;
padding: 1rem 0 0 0;
}

.design .exp .scroll p:before {
position: absolute;
content: "";
width: 0.75rem;
height: 0.75rem;
border-bottom: 2px #262224 solid;
border-right: 2px #262224 solid;
top: 2rem;
left: 50%;
margin-left: -5px;
}

.design .exp .scroll p:before {
-webkit-animation: fadeDown 1.3s forwards infinite;
animation: fadeDown 1.3s forwards infinite;
}

@-webkit-keyframes fadeDown {
from {
-webkit-transform: translateY(0.5rem) rotate(45deg);
transform: translateY(0.5rem) rotate(45deg);
}
to {
-webkit-transform: translateY(1.5rem) rotate(45deg);
transform: translateY(1.5rem) rotate(45deg);
}
}

@keyframes fadeDown {
from {
-webkit-transform: translateY(0.5rem) rotate(45deg);
transform: translateY(0.5rem) rotate(45deg);
}
to {
-webkit-transform: translateY(1.5rem) rotate(45deg);
transform: translateY(1.5rem) rotate(45deg);
}
}

.design .exp .area::-webkit-scrollbar {
display: none;
}

.design .exp .area {
position: relative;
overflow-x: hidden;
max-width: 470px;
margin: 0 auto;
aspect-ratio:1/1.05;
border:0px #FF0000 solid;
}

.design .exp .area .frame {
position: sticky;
top: 0;
left: 0;
width: 55%;
min-width: 120px;
height: 100%;
z-index: 1;
}

.design .exp .area ul {
position: absolute;
top: 0;
width: 49%;
min-width: 120px;
margin-left: 3%;
padding: 0;
}

.design .exp .area li {
padding: 0;
}

.design .exp .area table {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
}

.design .exp .area th {
width: 49%;
}

.design .exp .area th img {
opacity: 0;
}

.design .exp .area td {
padding: 0 0 0 1rem;
}

.design .exp .area em {
text-align: left;
font-family: "Kosugi Maru", sans-serif;
font-weight: 400;
font-style: normal;
text-stroke-width: 0.1px;
text-stroke-color: #FFF;
-webkit-text-stroke-width: 0.1px;
-webkit-text-stroke-color: #FFF;
font-size: 1.1rem;
padding: 0 0 0.5rem 0;
}

.design .exp .area .text {
position: relative;
font-size: 0.85rem;
line-height: 1.3rem;
padding: 0 0 0 1rem;
}

.design .exp .area .text:before {
content: "";
width: 55px;
height: 4px;
background: #191618;
border: 4px #FFF solid;
display: block;
position: absolute;
top: 7px;
left: -50px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

.design .exp .area .text:after {
content: "";
width: 16px;
height: 16px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
background: #191618;
border: 4px #FFF solid;
display: block;
position: absolute;
top: 0;
left: -70px;
}


/* design sample ///////////////////////*/
.design .sample li a {
display: block;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
overflow: hidden;
aspect-ratio:1/1.77;
border:0px #FF0000 solid;
}

.design .sample li p {
text-align: center;
font-family: "Kosugi Maru", sans-serif;
font-weight: 400;
font-style: normal;
text-stroke-width: 0.1px;
text-stroke-color: #FFF;
-webkit-text-stroke-width: 0.1px;
-webkit-text-stroke-color: #FFF;
padding: 10px 0 0 0;
}


/* how ///////////////////////*/
.how {
padding: 5rem 0;
background: #F9F1E7;
}

.how .more {
padding: 1rem 0 0 0;
}

.how .lock {
position: relative;
display: inline-block;
}

.how .h2 p {
font-family: "Kosugi Maru", sans-serif;
font-weight: 400;
font-style: normal;
text-stroke-width: 0.1px;
text-stroke-color: #FFF;
-webkit-text-stroke-width: 0.1px;
-webkit-text-stroke-color: #FFF;
text-align: center;
font-size: 1.75rem;
line-height: 1.75rem;
padding: 3rem 0;
}

.how .lock span {
height: 1.45rem;
aspect-ratio: 1.11111111;
-webkit-mask-image: url(/image/icon/lock.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: cover;
mask-image: url(/image/icon/lock.svg);
mask-repeat: no-repeat;
mask-size: cover;
background: #CB9A9D;
display: inline-block;
vertical-align: bottom;
position: absolute;
left: -30px;
top: -7px;
}

.how .lock-off {
display: block;
width: 60px;
aspect-ratio: 1.11111111;
background: #CB9A9D;
margin: 0 auto 15px auto;
-webkit-mask-image: url(/image/icon/lock-off.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: cover;
mask-image: url(/image/icon/lock-off.svg);
mask-repeat: no-repeat;
mask-size: cover;
}


/* sec1 ///////////////////////*/
.how .sec1 {
padding: 0 0 2rem 0;
}

.how .sec1 .campaign {
background: #FFF;
border: 2px #CE9FAC solid;
border-radius: 0.5rem;
-moz-border-radius: 0.5rem;
-webkit-border-radius: 0.5rem;
}

.how .sec1 .campaign .title {
position: relative;
text-align: center;
overflow: hidden;
display: block;
padding: 1rem;
background: #CE9FAC;
color: #FFF;
line-height: 1.5rem;
}

.how .sec1 .campaign h3 {
display: block;
text-align: center;
font-family: "Kosugi Maru", sans-serif;
font-weight: 400;
font-style: normal;
text-stroke-width: 0.1px;
text-stroke-color: #FFF;
-webkit-text-stroke-width: 0.1px;
-webkit-text-stroke-color: #FFF;
font-size: 1.6rem;
line-height: 2rem;
padding: 0 0 1rem 0;
color: #FFF;
}

.how .sec1 .campaign span {
font-weight: bold;
color: #FFF;
}

.how .sec1 .title:before {
content: "";
display: block;
position: absolute;
top: -40px;
left: 1rem;
width: 120px;
height: 200px;
background: #F3E8EA;
mask-image: url('/image/material/image1.svg');
mask-repeat: no-repeat;
mask-size: cover;
-webkit-mask-image: url('/image/material/image1.svg');
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: cover;
}

.how .sec1 .title:after {
content: "";
display: block;
position: absolute;
bottom: -10px;
right: 1rem;
width: 70px;
height: 180px;
background: #F3E8EA;
mask-image: url('/image/material/image2.svg');
mask-repeat: no-repeat;
mask-size: cover;
-webkit-mask-image: url('/image/material/image2.svg');
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: cover;
}

.how .sec1 .wrap {
width: 100%;
padding: 1rem;
}

.how .sec1 hr {
border: 0;
border-top: 2px #C2C2C2 dotted;
margin: 1rem 0;
}

.how .sec1 table {
width: 100%;
max-width: 470px;
margin: 0 auto;
}

.how .sec1 td {
text-align: center;
white-space: nowrap;
}

.how .sec1 td:nth-child(1) {
width: 70%;
}

.how .sec1 td:nth-child(2) {
width: 30%;
text-align: right;
}

.how .sec1 .wrap {
display: table;
}

.how .sec1 .wrap li,
.how .sec1 .wrap p {
text-align: left;
font-size: 0.9rem;
line-height: 1.3rem;
padding: 0.3rem 0 0.3rem 0;
}

.how .sec1 .wrap li:before {
content: "";
display: inline-block;
width: 1rem;
height: 1rem;
background: url(../image/icon/check.svg) no-repeat 0 0;
background-size: cover;
margin: 0 0.2rem 0 0;
vertical-align: middle;
}

.how .sec1 em {
font-family: "Roboto", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 2.3rem;
line-height: 2.3rem;
color: #BB7F7F;
}

.how .sec1 b {
font-family: "Roboto", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 1.3rem;
line-height: 1.3rem;
color: #BB7F7F;
}


@media (max-width: 470px) {
.how .sec1 .title:before {
top: -40px;
left: -1rem;
width: 90px;
height: 160px;
}

.how .sec1 .title:after {
bottom: -40px;
right: -1rem;
width: 60px;
height: 150px;
}
}


/* sec2 これだけ揃っちゃう！ ///////////////////////*/
.how .sec2 .dl {
display: table;
margin: 0 auto;
}

.how .sec2 .dd {
position: relative;
display: table-cell;
vertical-align: top;
}

.how .sec2 .dd:first-child {
width: 40%;
}

.how .sec2 .cut {
width: 200px;
left: -40px;
position: absolute;
}

.how .sec2 h4 p {
white-space: nowrap;
font-family: "Kosugi Maru", sans-serif;
font-weight: 400;
font-style: normal;
text-stroke-width: 0.1px;
text-stroke-color: #FFF;
-webkit-text-stroke-width: 0.1px;
-webkit-text-stroke-color: #FFF;
text-align: left;
font-size: 1.15rem;
line-height: 1.45rem;
}

.how .sec2 ul {
padding: 2rem 0 0 0;
}

.how .sec2 li {
white-space: nowrap;
padding: 0 0 0.3rem 2rem;
background: url(../image/icon/check.svg) no-repeat 0 -5px;
}


/* sec3 しかし  ///////////////////////*/
.how .sec3 {
padding: 2rem 0;
}


/* sec4 ゲットさらにお得に！ ///////////////////////*/
.how .sec4 {
padding: 2rem 0.75rem;
border: 2px #EDDAD3 solid;
background: #FFF;
margin: 0 0 30px 0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

.how .sec4 h2 {
padding: 0;
}

.how .sec4 h2 p {
font-size: 1.3rem;
line-height: 2rem;
}

.how .sec4 h2 em {
display: block;
font-family: "Roboto", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 1.6rem;
line-height: 1.6rem;
color: #BB7F7F;
padding: 0.5rem 0;
}

.how .sec4 .price_down {
text-align: center;
display: table;
white-space: nowrap;
margin: 1rem auto;
padding: 0.75rem 0 0.5rem 0;
border-top: 3px #EDDAD3 solid;
border-bottom: 3px #EDDAD3 solid;
}

.how .sec4 .price_down span {
display: inline-block;
}

.how .sec4 .price_down .price {
display: block;
font-size: 2.3rem;
}

.how .sec4 .price_down .price s {
text-decoration: line-through;
}

.how .sec4 .key {
position: relative;
text-align: center;
padding: 0.75rem;
border: 3px #E6E6E6 solid;
background: #FFF;
margin: 1rem 0;
color: #838182;
}

.how .sec4 .key span {
position: absolute;
display: block;
width: 2.3rem;
top: 0.15rem;
right: 0.3rem;
aspect-ratio: 1.11111111;
background: #CB9A9D;
-webkit-mask-image: url(/image/icon/key.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: cover;
mask-image: url(/image/icon/key.svg);
mask-repeat: no-repeat;
mask-size: cover;
}


@media (min-width: 470px) {
.how .sec4 {
padding: 45px 30px;
}

.how .sec4 .key {
font-size: 1.3rem;
padding: 15px;
}

.how .sec4 .key span {
right: 5px;
width: 45px;
}
}


/* sec5 たとえば ショップ ///////////////////////*/
.how .sec5 {
padding: 0;
}

.how .sec5 .example {
padding: 0 0 2rem 0;
}

.how .sec5 .wrap {
padding: 0;
height: 100%;
border: 2px #8c9e88 solid;
background: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

.how .sec5 .memo {
padding: 0.75rem;
}

.how .sec5 h3 {
padding: 0;
background: #8c9e88;
}

.how .sec5 h3 p {
text-align: center;
font-family: "Kosugi Maru", sans-serif;
font-weight: 400;
font-style: normal;
text-stroke-width: 0.1px;
text-stroke-color: #FFF;
-webkit-text-stroke-width: 0.1px;
-webkit-text-stroke-color: #FFF;
padding: 1rem 0;
font-size: 1.05rem;
line-height: 1.05rem;
color: #FFF;
}

.how .sec5 .cut {
margin: 0 auto;
max-width: 300px;
}

.how .sec5 .wrap img {
width:100%;
aspect-ratio:1/.65;
border:0px #FF0000 solid;
}

.how .sec5 .cut img {
width:100%;
aspect-ratio:1/.7;
border:0px #FF0000 solid;
}


/* sec6 比較すると ///////////////////////*/
.how .sec6 {
/*
.sticky {
position: sticky;
top: 0;
left: 0;
border-left: none;
border-right: none;
}

.sticky::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:@pink7;
border-right: 1px solid @pink2;
z-index: -1;
}
*/
}

.how .sec6 small {
text-align: right;
padding: 0 0 5px 0;
}

.how .sec6 .table {
overflow-x: scroll;
background: #FFF;
border: 2px #CB9A9D solid;
}

.how .sec6 .table::-webkit-scrollbar {
display: inline;
}

.how .sec6 table {
width: 100%;
background: #FFF;
}

.how .sec6 td,
.how .sec6 th {
white-space: nowrap;
text-align: center;
font-size: 0.8rem;
padding: 0.5rem 0.3rem;
border: 1px #CB9A9D solid;
}

.how .sec6 tr:nth-child(1) td {
background: #CB9A9D;
color: #FFF;
font-weight: bold;
border-right: 1px #EDDAD3 solid;
}

.how .sec6 tr:nth-child(1) td:last-child {
border-right: 0;
}

.how .sec6 tr:nth-child(1) th {
background-image: linear-gradient(to right top, transparent calc(50% - 0.5px), #CB9A9D 50%, #CB9A9D calc(50% + 0.5px), transparent calc(50% + 1px));
}

.how .sec6 .total td {
text-align: right;
background: #FAF0E2;
}

.how .sec6 .total p {
color: #BF6565;
font-size: 0.8rem;
font-weight: bold;
}

.how .sec6 th {
background: #FCF4EF;
}


/* バナー ///////////////////////*/
.how .banner h3 {
padding: 3rem 0 2rem 0;
}

.how .banner .swiper-slide {
padding: 1rem;
}

.how .banner a {
display: block;
border: 2px #C2C2C2 solid;
}

.how .banner img {
width:100%;
aspect-ratio:1/.52;
border:0px #FF0000 solid;
}


/* トピックス　タイトル ///////////////////////*/
.topics {
padding: 0 0 0 0;
}

.topics .title {
padding: 4rem 0;
background: #EDDAD3;
}


/* トピックス　ニュース ///////////////////////*/
.topics .whats_new a {
display: block;
padding: 1rem 0;
border-bottom: 2px #C2C2C2 solid;
}

.topics .whats_new a p {
display: inline-block;
text-decoration: underline;
line-height: 1.5rem;
padding: 0 0 0 1.3rem;
}

.topics .whats_new a span {
display: inline-block;
font-weight: bold;
padding: 0 0 0.5rem 0;
}

.topics .whats_new span:before {
content: '';
display: inline-block;
width: 1rem;
height: 1rem;
vertical-align: top;
border: 2px #CB9A9D solid;
margin: -0.1rem 0.3rem 0 0;
border-radius: 0.2rem;
-moz-border-radius: 0.2rem;
-webkit-border-radius: 0.2rem;
}

.topics .whats_new a:hover {
border-bottom: 2px #007CFD solid;
}

.topics .whats_new a:hover span,
.topics .whats_new a:hover p {
color: #007CFD;
}

.topics .whats_new a:hover span:before {
border: 2px #007CFD solid;
}

.topics .whats_new a:hover .new_mark {
background: #007CFD;
}

.topics .whats_new .new_mark {
display: inline-block;
color: #FFF;
background: #DB8653;
padding: 0.1rem 1rem;
margin: 0 0 0 0.5rem;
font-family: "Roboto", sans-serif;
font-weight: 700;
font-style: normal;
}


/* トピックス　チップス ///////////////////////*/
.topics .tips h3 {
padding: 0 0 2rem 0;
}

.topics .tips .swiper-slide {
padding: 0 0.5rem;
}

.topics .tips a {
display: block;
text-align: center;
width: 100%;
border: 3px #8c9e88 solid;
border-radius: 0.5rem;
-moz-border-radius: 0.5rem;
-webkit-border-radius: 0.5rem;
}

.topics .tips em {
display: block;
font-family: "Kosugi Maru", sans-serif;
font-weight: 400;
font-style: normal;
text-stroke-width: 0.1px;
text-stroke-color: #FFF;
-webkit-text-stroke-width: 0.1px;
-webkit-text-stroke-color: #FFF;
padding: 1.5rem 0 0 0;
font-size: 1rem;
}

.topics .tips .image {
width: 100%;
aspect-ratio: 1.5;
overflow: hidden;
}

.topics .tips .image img {
-o-object-fit: cover;
   object-fit: cover;
-o-object-position: 50% 50%;
   object-position: 50% 50%;
width: 100%;
height: 100%;
}

.topics .tips .text {
padding: 1.5rem 0 0 0;
bottom: 0;
width: 100%;
background: #8c9e88;
}

.topics .tips h4 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
}

.topics .tips h4 p {
font-size: 1.3rem;
font-family: "Kosugi Maru", sans-serif;
font-weight: 400;
font-style: normal;
text-stroke-width: 0.1px;
text-stroke-color: #FFF;
-webkit-text-stroke-width: 0.1px;
-webkit-text-stroke-color: #FFF;
color: #FFF;
white-space: nowrap;
-webkit-box-flex: 1;
    -ms-flex-positive: 1;
        flex-grow: 1;
-ms-flex: 1;
    flex: 1;
overflow: hidden;
text-overflow: ellipsis;
width: 10px;
}

.topics .tips strong {
display: block;
white-space: nowrap;
padding: 0.5rem 0 1.5rem 0;
color: #FFF;
}

.topics .tips a:hover {
border: 3px #007CFD solid;
background: #FFF;
}

.topics .tips a:hover .text {
background: #007CFD;
}


/* register ///////////////////////*/
.register {
padding: 7rem 0 3rem 0;
background: #FFF;
}

.register h3 {
padding: 2rem 0;
}

.register ul {
display: table;
width: 100%;
}

.register li {
text-align: center;
display: table-cell;
vertical-align: bottom;
padding: 0;
}

.register li:first-child {
vertical-align: middle;
padding: 0 0 0 1rem;
}

.register .cut img {
width: 90%;
max-width: 130px;
}

.register .button a {
padding: 0;
background: #BB7F7F;
max-width: 470px;
border-radius: 0.3rem;
-moz-border-radius: 0.3rem;
-webkit-border-radius: 0.3rem;
}

.register .button p {
white-space: nowrap;
background: #BB7F7F;
font-size: 2rem;
line-height: 2.6rem;
}

.register .button:hover a,
.register .button:hover p {
background: #007CFD;
}

.register .before {
margin: 2rem 0 0 0;
padding: 3rem;
background: url(../image/cut_before.svg) no-repeat 50% 50%;
}

.register .before p {
text-align: center;
font-family: "Kosugi Maru", sans-serif;
font-weight: 400;
font-style: normal;
text-stroke-width: 0.1px;
text-stroke-color: #FFF;
-webkit-text-stroke-width: 0.1px;
-webkit-text-stroke-color: #FFF;
font-size: 1.15rem;
}


/* qa ///////////////////////*/
.qa {
padding: 7rem 0;
background: #EDDAD3;
}

.qa .text_title ul {
display: table;
width: 100%;
}

.qa .text_title li {
display: table-cell;
text-align: center;
vertical-align: bottom;
}

.qa .text_title li:last-child {
width: 45%;
}

.qa .text_title li:last-child img {
width: 100%;
min-width: 120px;
max-width: 160px;
}

.qa .text_title p {
display: table;
text-align: left;
line-height: clamp(1.75rem, 6vw, 2.6rem);
margin: -2rem auto 0 auto;
}

.qa .text_title .star1 {
width: 120px;
float: right;
}

.qa .text_title .star2 {
width: 120px;
padding: 0.5rem 0;
}

.qa .line {
border-bottom: 2px #262224 solid;
}

.qa dl {
padding: 2rem 0 0 0;
}

.qa dt p {
font-family: "Kosugi Maru", sans-serif;
font-weight: 400;
font-style: normal;
text-stroke-width: 0.1px;
text-stroke-color: #FFF;
-webkit-text-stroke-width: 0.1px;
-webkit-text-stroke-color: #FFF;
line-height: 1.6rem;
padding: 0 0 1rem 2.5rem;
}

.qa dt em {
display: inline-block;
width: 2rem;
height: 2rem;
font-size: 0.95rem;
line-height: 2rem;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
text-align: center;
color: #FFF;
background: #CB9A9D;
margin: 0 0.5rem 0 -2.5rem;
}

.qa dt:hover em {
background: #007CFD;
}

.qa dd {
display: none;
padding: 0 0 2rem 0;
}

.qa dd .text {
padding: 1rem;
background: #FFF;
border: 3px #FEF6EC solid;
}


/* wow animated /////////////////// */
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}

.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite
}

.animated.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s
}

.animated.bounceIn, .animated.bounceOut, .animated.flipOutX, .animated.flipOutY {
-webkit-animation-duration: .75s;
animation-duration: .75s
}


/* /////////////////// */
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -20%, 0);
transform: translate3d(0, -20%, 0)
}

100% {
opacity: 1;
-webkit-transform: none;
transform: none
}
}

@keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translate3d(0, -20%, 0);
transform: translate3d(0, -20%, 0)
}

100% {
opacity: 1;
-webkit-transform: none;
transform: none
}
}

.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown
}


/* /////////////////// */
@-webkit-keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translate3d(-40%, 0, 0);
transform: translate3d(-40%, 0, 0)
}

100% {
opacity: 1;
-webkit-transform: none;
transform: none
}
}

@keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translate3d(-40%, 0, 0);
transform: translate3d(-40%, 0, 0)
}

100% {
opacity: 1;
-webkit-transform: none;
transform: none
}
}

.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft
}


/* /////////////////// */
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translate3d(40%, 0, 0);
transform: translate3d(40%, 0, 0)
}

100% {
opacity: 1;
-webkit-transform: none;
transform: none
}
}

@keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translate3d(40%, 0, 0);
transform: translate3d(40%, 0, 0)
}

100% {
opacity: 1;
-webkit-transform: none;
transform: none
}
}

.fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight
}


/* /////////////////// */
@-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 20%, 0);
transform: translate3d(0, 20%, 0)
}

100% {
opacity: 1;
-webkit-transform: none;
transform: none
}
}

@keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 20%, 0);
transform: translate3d(0, 20%, 0)
}

100% {
opacity: 1;
-webkit-transform: none;
transform: none
}
}

.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp
}