@charset "UTF-8";
 * {
position: relative;
}
body {
margin: 0;
}
.container {
width: 100%;
max-width: 750px;
margin: auto;
}
img {
max-width: 100%;
-o-object-fit: cover;
object-fit: cover;
vertical-align: bottom;
}
.con01 {
top: -190px;
margin-bottom: -190px;
z-index: 2;
}
@media only screen and (max-width: 750px) {
.con01 {
top: -25.33vw;
margin-bottom: -25.33vw;
}
}
.con02 {
top: -190px;
margin-bottom: -190px;
}
.con02 .btn-wrap {
position: absolute;
top: 180px;
z-index: 9;
display: block;
left: 0;
right: 0;
text-align: center;
width: 82vw;
max-width: 615px;
margin: auto;
}
@media only screen and (max-width: 750px) {
.con02 {
top: -25.33vw;
margin-bottom: -25.33vw;
}
.con02 .btn-wrap {
top: 24vw;
}
}
.con03 {
top: -70px;
margin-bottom: -70px;
}
@media only screen and (max-width: 750px) {
.con03 {
top: -9.33vw;
margin-bottom: -9.33vw;
}
}
.con04 {
z-index: 1;
}
.con05 {
top: -20px;
margin-bottom: -20px;
}
@media only screen and (max-width: 750px) {
.con05 {
top: -2.67vw;
margin-bottom: -2.67vw;
}
}
.con06 {
top: -22px;
margin-bottom: -22px;
}
@media only screen and (max-width: 750px) {
.con06 {
top: -2.93vw;
margin-bottom: -2.93vw;
}
}
.con07 {
top: -20px;
margin-bottom: -20px;
}
@media only screen and (max-width: 750px) {
.con07 {
top: -2.67vw;
margin-bottom: -2.67vw;
}
}
.con09 {
top: -40px;
margin-bottom: -40px;
z-index: -1;
}
@media only screen and (max-width: 750px) {
.con09 {
top: -5.33vw;
margin-bottom: -5.33vw;
}
}
.con10 {
top: -210px;
margin-bottom: -210px;
}
@media only screen and (max-width: 750px) {
.con10 {
top: -28vw;
margin-bottom: -28vw;
}
}
.movie-wrap {
width: 90%;
max-width: 623px;
margin: auto;
}
.movie-wrap .movie {
position: absolute;
top: 200px;
left: 8px;
right: 0;
width: 80%;
margin: auto;
max-width: 400px;
}
.movie-wrap .movie video {
width: 100%;
height: auto;
-o-object-fit: cover;
object-fit: cover;
}
@media only screen and (max-width: 750px) {
.movie-wrap .movie {
top: 26.67vw;
left: 1.07vw;
max-width: 53.33vw;
}
}
.con13 {
padding: 45px 0 15px;
}
.con13 img.con13-bg {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.con13 .con13-02 {
bottom: 0;
right: 0;
width: 80%;
max-width: 600px;
margin-left: auto;
}
@media only screen and (max-width: 750px) {
.con13 {
padding: 6vw 0 2vw;
}
}
.con14 {
z-index: 2;
}
.con15 {
z-index: 1;
}
.con15 img.con15-bg {
position: absolute;
top: -190px;
}
.con15 .con15-content {
max-width: 624px;
margin: auto;
margin-top: 100px;
margin-bottom: 80px;
padding-top: 20px;
background-image: url(//hiyori-kobo.com/wp-content/themes/hiyori-kobo/lp/hiyori-yocha/img/con15-frame-body.png);
background-size: 100%;
text-align: center;
}
.con15 .con15-content:before, .con15 .con15-content:after {
content: "";
display: block;
width: 100%;
background-repeat: no-repeat;
background-size: 100%;
position: absolute;
}
.con15 .con15-content:before {
background-image: url(//hiyori-kobo.com/wp-content/themes/hiyori-kobo/lp/hiyori-yocha/img/con15-frame-head.png);
height: 66px;
top: -66px;
}
.con15 .con15-content:after {
background-image: url(//hiyori-kobo.com/wp-content/themes/hiyori-kobo/lp/hiyori-yocha/img/con15-frame-foot.png);
height: 30px;
}
.con15 .con15-content img.detail {
width: 90%;
max-width: 480px;
margin: auto;
text-align: center;
}
@media only screen and (max-width: 750px) {
.con15 img.con15-bg {
top: -25.33vw;
}
.con15 .con15-content {
width: 90%;
margin-top: 13.33vw;
margin-bottom: 10.67vw;
}
.con15 .con15-content:before {
height: 8.8vw;
top: -8.8vw;
}
.con15 .con15-content:after {
height: 4vw;
}
}
.faq {
margin-bottom: 50px;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
}
.faq img {
position: absolute;
}
.faq .faq-content {
width: 80%;
margin: auto;
margin-top: 240px;
margin-bottom: 50px;
padding: 15px;
padding-bottom: 0;
background-image: url(//hiyori-kobo.com/wp-content/themes/hiyori-kobo/lp/hiyori-yocha/img/faq-frame-body.png);
background-size: 100%;
}
.faq .faq-content:before, .faq .faq-content:after {
content: "";
display: block;
width: 100%;
background-size: 100%;
background-repeat: no-repeat;
position: absolute;
left: 0;
right: 0;
}
.faq .faq-content:before {
height: 190px;
background-image: url(//hiyori-kobo.com/wp-content/themes/hiyori-kobo/lp/hiyori-yocha/img/faq-frame-head.png);
top: -183px;
}
.faq .faq-content:after {
content: "";
display: block;
width: 100%;
height: 50px;
bottom: -50px;
background-image: url(//hiyori-kobo.com/wp-content/themes/hiyori-kobo/lp/hiyori-yocha/img/faq-frame-foot.png);
}
.faq .faq-content .faq-item {
background: #eee1af;
padding: 10px;
margin-bottom: 15px;
cursor: pointer;
}
.faq .faq-content .faq-item .question {
margin: 0;
font-size: clamp(1.375rem, 1.278rem + 0.37vw, 1.5rem);
font-weight: bold;
padding-left: 50px;
padding-right: 40px;
color: #503952;
}
.faq .faq-content .faq-item .question:before {
content: "";
display: block;
width: 38px;
height: 36px;
background-image: url(//hiyori-kobo.com/wp-content/themes/hiyori-kobo/lp/hiyori-yocha/img/q.png);
background-repeat: no-repeat;
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
}
.faq .faq-content .faq-item .question:after {
content: "";
display: block;
width: 24px;
height: 24px;
background-image: url(//hiyori-kobo.com/wp-content/themes/hiyori-kobo/lp/hiyori-yocha/img/plus.png);
background-repeat: no-repeat;
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
.faq .faq-content .faq-item .answer {
transition: all 0.5s ease;
height: 0;
overflow: hidden;
}
.faq .faq-content .faq-item .answer p {
margin: 0;
}
.faq .faq-content .archive-link {
display: block;
width: 60%;
margin: 30px auto 0;
}
.faq .faq-content .archive-link a {
display: block;
width: 100%;
text-align: center;
padding: 10px;
background-color: #503952;
color: #fff;
text-decoration: none;
}
@media only screen and (max-width: 750px) {
.faq {
margin-bottom: 6.67vw;
}
.faq .faq-content {
width: 85%;
margin-top: 32vw;
margin-bottom: 6.67vw;
padding: 2vw;
}
.faq .faq-content:before {
height: 26vw;
top: -26vw;
}
.faq .faq-content:after {
height: 6.67vw;
bottom: -6.67vw;
}
.faq .faq-content .faq-item {
padding: 1.33vw;
margin-bottom: 2vw;
}
.faq .faq-content .faq-item .question {
font-size: clamp(1rem, 0.903rem + 0.37vw, 1.125rem);
line-height: 1.4;
padding-left: 6.67vw;
padding-right: 5.33vw;
color: #503952;
}
.faq .faq-content .faq-item .question:before {
width: 5.07vw;
height: 4.8vw;
background-size: 100%;
}
.faq .faq-content .faq-item .question:after {
width: 3.2vw;
height: 3.2vw;
background-size: 100%;
}
.faq .faq-content .faq-item .answer p {
font-size: clamp(0.75rem, 0.653rem + 0.37vw, 0.875rem);
}
.faq .faq-content .archive-link {
width: 80%;
margin: 4vw auto 0;
}
} .cta01,
.cta02 {
z-index: 1;
}
.cta-content {
padding-top: 50px;
}
.cta-content img.cta-regular-bg {
position: absolute;
top: -140px;
}
@media only screen and (max-width: 750px) {
.cta-content {
padding-top: 6.67vw;
background-color: #f4f0eb;
}
.cta-content img.cta-regular-bg {
top: -18.67vw;
}
}
.regular-entry {
padding: 30px;
background-image: url(//hiyori-kobo.com/wp-content/themes/hiyori-kobo/lp/hiyori-yocha/img/cta-regular-frame-body.png);
background-size: 100% 100%;
background-repeat: no-repeat;
width: 90%;
max-width: 624px;
box-sizing: border-box;
left: 0;
right: 0;
margin: auto;
margin-top: 98px;
}
.regular-entry:before, .regular-entry:after {
content: "";
display: block;
width: 100%;
background-size: 100%;
background-repeat: no-repeat;
position: absolute;
left: 0;
}
.regular-entry:before {
background-image: url(//hiyori-kobo.com/wp-content/themes/hiyori-kobo/lp/hiyori-yocha/img/cta-regular-frame-head.png);
height: 98px;
top: -98px;
}
.regular-entry:after {
background-image: url(//hiyori-kobo.com/wp-content/themes/hiyori-kobo/lp/hiyori-yocha/img/cta-regular-frame-foot.png);
height: 20px;
bottom: 0;
}
.regular-entry .hiyori-yocha {
max-width: 440px;
left: 30px;
right: 0;
margin: auto;
}
.regular-entry .hiyori-yocha img.off {
position: absolute;
width: 114px;
height: 114px;
left: -80px;
top: 0;
bottom: 0;
margin: auto;
}
.regular-entry .teiki-message {
max-width: 520px;
margin: 15px auto;
}
.regular-entry form .form-tble {
max-width: 300px;
margin: 30px auto;
}
.regular-entry form .form-tble .tbl-row {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
margin: 1em auto;
}
.regular-entry form .form-tble .tbl-row .tbl-th {
text-align: right;
width: 40%;
font-size: clamp(1rem, 0.903rem + 0.37vw, 1.125rem);
letter-spacing: 0.2em;
}
.regular-entry form .form-tble .tbl-row .tbl-td {
width: calc(60% - 15px);
}
.regular-entry form .select-wrap:before {
content: "";
position: absolute;
right: 0px;
top: 0;
bottom: 0;
width: 40px;
height: 40px;
border-radius: 0 6px 6px 0;
background: #955257;
}
.regular-entry form .select-wrap:after {
content: "";
position: absolute;
right: 15px;
top: 0;
bottom: 5px;
width: 10px;
height: 10px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(45deg);
margin: auto;
}
.regular-entry form .select-wrap select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
z-index: 1;
background: transparent;
border: 1px solid #cccccc;
width: 100%;
height: 40px;
padding: 4px 10px;
border-radius: 6px;
font-size: clamp(1rem, 0.903rem + 0.37vw, 1.125rem);
}
.regular-entry form .select-wrap select:focus-visible {
outline: none;
}
.regular-entry form .select-wrap select::-ms-expand {
display: none;
}
.regular-entry form input#submit-image {
width: 80%;
max-width: 460px;
margin: 20px auto;
display: block;
}
@media only screen and (max-width: 750px) {
.regular-entry {
padding: 4vw;
margin-top: 13.07vw;
}
.regular-entry:before {
height: 13.07vw;
top: -13.07vw;
}
.regular-entry:after {
height: 2.67vw;
bottom: 0;
}
.regular-entry .hiyori-yocha {
max-width: 58.67vw;
left: 4vw;
}
.regular-entry .hiyori-yocha img.off {
width: 15.2vw;
height: 15.2vw;
left: -10.67vw;
}
.regular-entry .teiki-message {
max-width: 69.33vw;
margin: 2vw auto;
}
.regular-entry form .form-tble .tbl-row {
gap: 5px;
flex-wrap: wrap;
}
.regular-entry form .form-tble .tbl-row .tbl-th,
.regular-entry form .form-tble .tbl-row .tbl-td {
text-align: center;
width: 100%;
}
.regular-entry form input#submit-image {
width: 90%;
margin: 2.67vw auto;
display: block;
}
}
.cta-normal {
background: #f4f0eb;
padding: 50px 0;
}
.cta-normal .normal-entry {
padding: 20px 30px;
background-image: url(//hiyori-kobo.com/wp-content/themes/hiyori-kobo/lp/hiyori-yocha/img/cta-normal-frame-body.png);
background-size: 100% 100%;
background-repeat: no-repeat;
width: 90%;
max-width: 624px;
box-sizing: border-box;
left: 0;
right: 0;
margin: auto;
margin-top: 98px;
}
.cta-normal .normal-entry:before, .cta-normal .normal-entry:after {
content: "";
display: block;
width: 100%;
background-size: 100%;
background-repeat: no-repeat;
position: absolute;
left: 0;
}
.cta-normal .normal-entry:before {
background-image: url(//hiyori-kobo.com/wp-content/themes/hiyori-kobo/lp/hiyori-yocha/img/cta-normal-frame-head.png);
height: 98px;
top: -98px;
}
.cta-normal .normal-entry:after {
background-image: url(//hiyori-kobo.com/wp-content/themes/hiyori-kobo/lp/hiyori-yocha/img/cta-normal-frame-foot.png);
height: 20px;
bottom: 0;
}
.cta-normal .normal-entry .teiki-message {
max-width: 520px;
margin: 15px auto;
}
.cta-normal .normal-entry form input#submit-image {
width: 80%;
max-width: 460px;
margin: 20px auto;
display: block;
}
@media only screen and (max-width: 750px) {
.cta-normal {
padding: 6.67vw 0;
}
.cta-normal .normal-entry {
padding: 2.67vw 4vw;
margin-top: 13.07vw;
}
.cta-normal .normal-entry:before {
height: 13.07vw;
top: -13.07vw;
}
.cta-normal .normal-entry:after {
height: 2.67vw;
}
.cta-normal .normal-entry .teiki-message {
max-width: 69.33vw;
margin: 2vw auto;
}
.cta-normal .normal-entry form input#submit-image {
width: 90%;
margin: 2.67vw auto;
display: block;
}
} .footer-link {
margin-top: 50px;
text-align: center;
}
.footer-link a {
color: unset;
text-decoration: none;
}