@charset "UTF-8";
   *, *::before, *::after {
box-sizing: border-box;
}
* {
margin: 0;
}
html, body {
height: 100%;
}
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
input, button, textarea, select {
font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
#root, #__next {
isolation: isolate;
} html {
scroll-behavior: smooth;
height: auto;
}
#about_pages,
#voice_pages {
scroll-margin-top: 6vw;
}
@media (max-width: 500px) {
#about_pages,
#voice_pages {
scroll-margin-top: 16vw;
}
}
body {
font-family: "Work+Sans", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
height: auto;
color: #323232;
}
main {
overflow: visible;
height: auto;
}
a {
transition: 0.3s;
}
a:hover {
opacity: 0.75;
}
img {
width: 100%;
height: auto;
}
.delay03s {
animation-delay: 0.3s;
}
.fadeUp {
opacity: 0;
transform: translateY(50px);
}
.fadeUp.is-animated {
animation-name: fadeUp;
animation-duration: 1s;
animation-fill-mode: both;
}
@keyframes fadeUp {
0% {
opacity: 0;
transform: translateY(50px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
} @media (max-width: 500px) {
br.mobile_none {
display: none;
}
}
@media (min-width: 500px) {
.drawer__button,
.drawer__nav,
br.pc_none,
p.pc_none,
.mv_textbox-mobile {
display: none;
}
} header {
position: sticky;
top: 0;
height: 5.5vw;
width: 100%;
display: flex;
align-items: center;
background-color: #fff;
padding: 1vw 5vw;
z-index: 1000;
}
.logo_block {
width: 17%;
display: flex;
}
.logo_block .logo_block-logo {
width: 100%;
}
.logo_block .logo_block img {
width: 100%;
height: auto;
}
.nav_block {
width: 67%;
margin-right: 1%;
}
.nav_block ul {
display: flex;
justify-content: end;
padding-left: 0;
}
.nav_block li {
font-size: clamp(4px, 1.1vw, 14px);
list-style: none;
padding: 1vw 1vw;
}
.nav_block li a {
text-decoration: none;
font-weight: 500;
color: #505050;
padding-bottom: 0.8vw;
position: relative;
transition: 0.4s;
}
.nav_block li a:hover {
opacity: 1;
color: #FD7E14;
}
.nav_block li a::before {
background: #FD7E14;
content: "";
width: 100%;
height: 1.5px;
position: absolute;
left: 0;
bottom: 0;
transform-origin: right top;
transform: scale(0, 1);
transition: transform 0.3s;
}
.nav_block li a:hover::before {
transform-origin: left top;
transform: scale(1, 1);
}
.cta_block {
width: 15%;
display: flex;
}
.cta_block .cta_block-parts {
width: 100%;
margin: auto;
transition: 0.3s;
}
.cta_block .cta_block-parts:hover {
opacity: 0.7;
}
.cta_block .cta_block img {
width: 100%;
height: auto;
} @media (max-width: 500px) {
header {
justify-content: space-between;
height: 15vw;
background: #fff !important;
padding: 1vw 3vw;
}
.logo_block {
width: 35%;
display: flex;
}
.logo_block .logo_block-logo {
width: 100%;
margin: auto;
}
.cta_block {
width: 33%;
display: flex;
margin-left: 15%;
}
.nav_block {
display: none;
}
.drawer__button {
position: relative;
width: 12%;
height: 100%;
background-color: transparent;
border: none;
cursor: pointer;
z-index: 1000;
}
.drawer__button > span {
display: block;
position: absolute;
left: 50%;
width: 7.5vw;
height: 2.3px;
background-color: #333333;
transform: translateX(-50%);
}
.drawer__button > span:first-child {
transform: translate(-50%, calc(-50% - 0.5rem));
transition: transform 0.3s ease;
}
.drawer__button > span:nth-child(2) {
transform: translate(-50%, calc(-50% + 0.5rem));
transition: transform 0.3s ease;
}
.drawer__button.active > span:first-child {
transform: translate(-50%, -50%) rotate(-45deg);
background-color: #515151;
}
.drawer__button.active > span:nth-child(2) {
transform: translate(-50%, -50%) rotate(45deg);
background-color: #515151;
} .drawer__nav {
position: fixed;
margin-top: 15vw;
inset: 0;
z-index: 900;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
} .drawer__nav.active {
opacity: 1;
visibility: visible;
} .drawer__nav__inner {
position: relative;
width: 85%;
height: 100%;
margin-left: auto;
background-color: #F3E9D2;
display: flex;
flex-direction: column;
padding: 2vw;
transform: translateX(100%);
transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
overflow-y: auto;
} .drawer__nav.active .drawer__nav__inner {
transform: translateX(0);
} .drawer__nav__menu {
width: 90%;
list-style: none;
padding: 0;
margin: 0 auto;
display: flex;
flex-direction: column;
}
.drawer__nav__item {
width: 100%;
} .drawer__nav__link {
display: block;
font-size: 4.5vw;
font-weight: 600;
line-height: 10vw;
color: #515151;
text-decoration: none;
padding: 3vw 1vw;
border-bottom: 1px dotted #515151;
transition: opacity 0.1s;
}
.drawer__nav__link:hover {
opacity: 0.6;
}
.accordion-open-header {
display: block;
font-size: 4.5vw;
font-weight: 600;
padding: 3vw 1vw;
position: relative;
border-bottom: 1px dotted #515151;
}
.accordion-open-header span {
font-size: 3vw;
} .accordion-open-header::before,
.accordion-open-header::after {
content: "";
width: 21px;
height: 0.5vw;
background-color: #515151;
position: absolute;
top: 50%;
right: 0%;
transform: translateY(-50%);
} .accordion-open-header::after {
transform: translateY(-50%) rotate(90deg);
transition: 0.5s;
} .accordion-hidden:checked + .accordion-open-header:after {
transform: translateY(-50%) rotate(0);
} .accordion-inner-header {
display: block;
height: 0;
overflow: hidden;
padding: 0;
opacity: 0;
transition: 0.5s; cursor: pointer;
}
.accordion-hidden {
display: none;
} .accordion-hidden:checked + .accordion-open-header + .accordion-inner-header {
height: auto;
opacity: 1;
padding: 15px;
}
.accordion_qa .accordion-open-header {
padding-left: 0.5vw;
}
.accordion_qa .accordion-hidden:checked + .accordion-open-header + .accordion-inner-header {
font-size: 1.2vw;
height: auto;
opacity: 1;
padding: 0.5vw;
} .drawer__nav__item--cta .drawer__nav__link {
padding: 0;
margin: 3vw auto;
border-bottom: none;
}
.drawer__nav__item--cta img {
position: relative;
display: block;
width: 100%;
margin: 0 auto;
height: auto;
}
.drawer__nav__item--cta2 .drawer__nav__link {
padding: 4vw;
margin: 3vw auto;
border-bottom: none;
font-size: 5.5vw;
font-weight: 600;
text-align: center;
color: #fff;
background-color: #FD7E14;
} body.active {
overflow: hidden;
height: 100%;
}
} #mv_pages {
width: 100%;
padding: 3vw 0;
background-color: #F3E9D2;
}
#mv_pages .mv {
display: flex;
}
#mv_pages .mv .mv_textbox {
position: relative;
left: 10%;
width: 40%;
margin: auto;
}
#mv_pages .mv .mv_textbox p.mv_textbox-catchcopy {
width: -moz-fit-content;
width: fit-content;
font-size: clamp(6px, 2.2vw, 30px);
font-weight: 700;
letter-spacing: 2px;
text-align: justify;
padding: 0.8vw 2.2vw;
margin: 0.7vw 0;
background: #fff;
}
#mv_pages .mv .mv_textbox .mv_textbox-storename {
margin: 3vw 0 2vw;
}
#mv_pages .mv .mv_textbox .mv_textbox-storename p {
font-size: clamp(6px, 1.5vw, 20px);
}
#mv_pages .mv .mv_textbox .mv_textbox-storename h1 {
font-size: clamp(6px, 2vw, 25px);
}
#mv_pages .mv .mv_textbox .mv_textbox-banner {
width: 65%;
transition: 0.3s;
}
#mv_pages .mv .mv_textbox .mv_textbox-banner:hover {
opacity: 0.7;
}
#mv_pages .mv_images {
width: 60%;
}
#mv_pages .mv_images img {
width: 100%;
border-radius: 4vw 0 0 4vw;
}
@media (max-width: 500px) {
#mv_pages .mv {
display: flex;
flex-direction: column-reverse;
}
#mv_pages .mv .mv_textbox {
position: relative;
left: 0;
width: 100%;
margin: auto;
}
#mv_pages .mv .mv_textbox p.mv_textbox-catchcopy {
position: relative;
top: -21vw;
font-size: clamp(6px, 6vw, 80px);
padding: 2vw 4.4vw;
margin: 1.5vw 0;
}
#mv_pages .mv .mv_textbox .mv_textbox-storename {
position: relative;
display: flex;
align-items: center;
top: -20vw;
margin: 3vw 0 2vw;
padding-left: 6%;
}
#mv_pages .mv .mv_textbox .mv_textbox-storename p {
font-size: 3.2vw;
font-weight: 600;
}
#mv_pages .mv .mv_textbox .mv_textbox-storename h1 {
font-size: 3.5vw;
padding-left: 1.2vw;
}
#mv_pages .mv .mv_textbox .mv_textbox-mobile {
position: relative;
top: -13vw;
display: flex;
align-items: center;
padding-left: 6%;
}
#mv_pages .mv .mv_textbox .mv_textbox-mobile .mv_textbox-mobilebox {
width: 5%;
}
#mv_pages .mv .mv_textbox .mv_textbox-mobile p {
font-size: 4.5vw;
font-weight: 600;
color: #323232;
padding-left: 0.5vw;
}
#mv_pages .mv .mv_textbox .mv_textbox-banner {
position: relative;
top: -10vw;
width: 90%;
margin: auto;
}
#mv_pages .mv_images {
width: 94%;
margin-left: 6%;
}
#mv_pages .mv_images img {
border-radius: 12vw 0 0 0vw;
}
}
#about_pages {
width: 100%;
margin: 6vw auto;
}
#about_pages .about {
width: clamp(500px, 75%, 1200px);
display: flex;
justify-content: center;
margin: 10vw auto 0;
}
#about_pages .about .about_textbox {
width: 50%;
margin-right: 2vw;
}
#about_pages .about .about_textbox strong {
font-size: clamp(6px, 3vw, 40px);
}
#about_pages .about .about_textbox h2 {
font-size: clamp(6px, 2vw, 30px);
margin: 1.2vw 0 0.7vw;
}
#about_pages .about .about_textbox p.about_textbox-en {
font-size: clamp(6px, 0.9vw, 12px);
font-weight: 500;
text-align: justify;
letter-spacing: 1px;
color: #626262;
font-family: "Great Vibes", cursive;
}
#about_pages .about .about_textbox p.about_textbox-version {
font-size: clamp(6px, 1.1vw, 14px);
line-height: clamp(10px, 1.7vw, 24px);
letter-spacing: 1px;
text-align: justify;
margin: 2.5vw 0 1.5vw;
}
#about_pages .about .about_imagebox {
width: 30%;
margin-left: 8%;
}
#about_pages .about .about_imagebox img.about_imagebox-01 {
width: 100%;
height: auto;
}
#about_pages .about .about_imagebox img.about_imagebox-02 {
width: 70%;
position: relative;
height: auto;
top: -6vw;
left: 13vw;
}
@media (max-width: 500px) {
#about_pages .about {
width: 90%;
flex-direction: column;
margin: 16vw auto 0;
}
#about_pages .about .about_textbox {
width: 100%;
margin-right: 0;
}
#about_pages .about .about_textbox strong {
font-size: 12vw;
}
#about_pages .about .about_textbox h2 {
font-size: 6vw;
}
#about_pages .about .about_textbox p.about_textbox-en {
font-size: 3vw;
}
#about_pages .about .about_textbox p.about_textbox-version {
position: relative;
top: 108vw;
font-size: 4vw;
line-height: 7.2vw;
margin: 5vw 0 6vw;
}
#about_pages .about .about_textbox .components_textbox-viewmore {
position: relative;
top: 100vw;
}
#about_pages .about .about_imagebox {
position: relative;
top: -80vw;
width: 90%;
margin-left: -10%;
}
#about_pages .about .about_imagebox img.about_imagebox-01 {
width: 100%;
height: auto;
}
#about_pages .about .about_imagebox img.about_imagebox-02 {
width: 65%;
position: relative;
height: auto;
top: -26vw;
left: 63.3%;
}
}
#guide_pages {
width: 100%;    }
#guide_pages h2 {
width: clamp(500px, 70%, 1200px);
font-size: clamp(6px, 4vw, 40px);
font-weight: 700;
margin: -6vw auto 2vw;
}
#guide_pages .guide_block {
width: clamp(500px, 75%, 1200px);
display: flex;
align-items: flex-end;
margin: 0 auto;
}
#guide_pages .guide_block .guide_block-parts {
width: 45%;
margin: 0 2.5%;
transition: 0.3s;
}
#guide_pages .guide_block .guide_block-parts:hover {
transform: scale(1.03);
}
#guide_pages .guide_block a:hover {
opacity: 1;
}
#guide_pages .guide_back {
position: relative;
top: -5vw;
width: 100%;
height: 10vw;
background-color: #F3E9D2;
z-index: -1;
}
#guide_pages .guide_back-next {
position: relative;
top: -7.5vw;
width: 5%;
margin: auto;
}
#guide_pages .guide_back-next img {
width: 100%;
height: auto;
}
#guide_pages .guide_program {
width: clamp(500px, 65%, 1200px);
margin: -4vw auto 0;
}
#guide_pages .guide_program h2.program {
font-size: clamp(6px, 3.5vw, 35px);
letter-spacing: 0.5px;
text-align: center;
margin: 0 auto;
}
#guide_pages .guide_program h3 {
font-size: clamp(6px, 1.2vw, 14px);
text-align: center;
margin: 0 auto 1.5vw;
}
#guide_pages .guide_program p {
font-size: clamp(6px, 1.2vw, 14px);
text-align: center;
}
#guide_pages .guide_program .components_textbox-viewmore {
margin: 2vw auto;
text-align: center;
}
#guide_pages .guide__inner {
position: relative;
width: min(1200px, 80%);
margin: 6vw auto 4vw;
padding: 0 24px;
display: flex;
gap: clamp(6px, 1.5vw, 28px);
flex-wrap: wrap;
align-items: stretch;
z-index: 100;
}
#guide_pages .guide__inner__title {
margin: 0 auto 24px;
padding: 0 24px;
letter-spacing: 0.08em;
}
#guide_pages .guide-item {
flex: 0 0 calc(25% - 21px);
width: 25%;
position: relative;
}
#guide_pages summary::-webkit-details-marker {
display: none;
}
@media (min-width: 768px) {
#guide_pages .guide-item__summary {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
}
#guide_pages .guide-card {
width: 100%;
background: #fff;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}
#guide_pages .guide-card__media img {
width: 100%;
display: block;
}
#guide_pages .guide-card__body {
padding: clamp(6px, 1vw, 16px) clamp(6px, 1vw, 18px);
}
#guide_pages .guide-card__title {
font-size: clamp(6px, 1.2vw, 24px);
margin: 0;
}
#guide_pages .guide-card__sub {
font-size: clamp(6px, 0.8vw, 13px);
margin: 2px 0 clamp(2px, 0.8vw, 10px);
}
#guide_pages .guide-card__tags {
list-style: none;
padding: 0;
margin: clamp(2px, 0.8vw, 10px) 0 clamp(3px, 0.8vw, 12px);
display: flex;
flex-wrap: wrap;
gap: clamp(2px, 0.6vw, 8px);
}
#guide_pages .guide-card__tags li {
border: 1px solid #777;
border-radius: 9999px;
padding: clamp(2px, 0.6vw, 6px) clamp(3px, 0.8vw, 10px);
font-size: clamp(6px, 0.85vw, 12px);
line-height: 1;
margin: 0;
}
#guide_pages .guide-card__more {
color: #fd7e14;
text-decoration: none;
font-weight: 600;
font-size: clamp(6px, 1vw, 12px);
transition: 0.3s;
}
#guide_pages .guide-card__more::after {
content: ">";
margin-left: 4px;
}
#guide_pages .guide-card__more:hover {
opacity: 0.6;
}
#guide_pages .guide {
position: relative;
top: -8vw;
background-color: #F3E9D2;
padding: clamp(10px, 4.5vw, 100px) 0;
}
@media (max-width: 768px) {
#guide_pages {
margin: -24vw auto 0;
}
#guide_pages h2 {
width: 94%;
font-size: 12vw;
margin: -6vw auto 2vw;
}
#guide_pages .guide_block {
width: 94%;
flex-direction: column;
}
#guide_pages .guide_block .guide_block-parts {
width: 100%;
margin: 3% 0;
}
#guide_pages .guide {
padding: 0;
}
#guide_pages .guide__inner {
width: 94%;
display: block;
padding: 0;
}
#guide_pages .guide-item {
width: 96%;
margin: auto;
max-width: none;
min-width: 0;
border-top: 1px solid rgba(255, 255, 255, 0.6);
}
#guide_pages .guide-item__summary {
display: flex;
justify-content: space-between;
align-items: center;
background: #d9b57a;
color: #fff;
padding: 18px 16px;
font-weight: 700;
cursor: pointer;
}
#guide_pages .guide-item__summary .guide-item__icon {
width: 18px;
height: 18px;
position: relative;
}
#guide_pages .guide-item__summary .guide-item__icon::before, #guide_pages .guide-item__summary .guide-item__icon::after {
content: "";
position: absolute;
width: 100%;
height: 2px;
background: #fff;
top: 50%;
left: 0;
}
#guide_pages .guide-item__summary .guide-item__icon::after {
transform: rotate(90deg);
transition: 0.2s;
}
#guide_pages details[open] .guide-item__icon::after {
transform: rotate(0deg);
}
#guide_pages .guide-card {
box-shadow: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
#guide_pages .guide_back {
position: relative;
top: -15vw;
width: 100%;
height: 30vw;
background-color: #F3E9D2;
z-index: -1;
}
#guide_pages .guide_back-next {
position: relative;
top: -22vw;
width: 14%;
margin: auto;
}
#guide_pages .guide_back-next img {
width: 100%;
height: auto;
}
#guide_pages .guide_program {
width: 94%;
margin: -12vw auto 0;
}
#guide_pages .guide_program h2.program {
width: 94%;
font-size: 10vw;
}
#guide_pages .guide_program h3 {
font-size: 3.4vw;
margin: 0 auto 3vw;
}
#guide_pages .guide_program p {
font-size: 3.4vw;
padding-top: 4vw;
}
#guide_pages .guide_program .components_textbox-viewmore {
margin: 6vw auto 12vw;
}
#guide_pages .guide-card {
width: 100%;
background: #fff;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}
#guide_pages .guide-card__media img {
width: 100%;
display: block;
}
#guide_pages .guide-card__body {
padding: 3vw;
}
#guide_pages .guide-card__title {
font-size: 8vw;
}
#guide_pages .guide-card__sub {
font-size: 4vw;
margin: -1.5vw 0 3vw;
}
#guide_pages .guide-card__tags {
list-style: none;
padding: 0;
margin: 6vw auto 8vw;
display: flex;
flex-wrap: wrap;
gap: 2vw 4vw;
}
#guide_pages .guide-card__tags li {
padding: 2vw 4vw;
font-size: 3.4vw;
}
#guide_pages .guide-card__more {
color: #fd7e14;
text-decoration: none;
font-weight: 600;
font-size: 4vw;
transition: 0.3s;
}
#guide_pages .guide-card__more::after {
content: ">";
margin-left: 6px;
}
}
#store_pages {
width: clamp(500px, 70%, 1200px);
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto 8vw;
}
#store_pages .store_text {
width: 50%;
height: auto;
}
#store_pages .store_text strong {
font-size: clamp(6px, 4vw, 40px);
font-weight: 700;
letter-spacing: 2px;
}
#store_pages .store_text h2 {
font-size: clamp(6px, 1.6vw, 28px);
font-weight: 600;
margin-top: -0.8vw;
}
#store_pages .store_text h2::before {
content: "ー";
font-size: clamp(6px, 1.6vw, 28px);
font-weight: 400;
color: #d9b57a;
padding-right: 0.2vw;
}
#store_pages .store_text p.store_text-address {
font-size: clamp(6px, 1.1vw, 14px);
text-align: justify;
font-weight: 500;
margin-top: 2vw;
}
#store_pages .store_text a.store_text-map {
color: #FD7E14;
font-size: clamp(6px, 1.1vw, 14px);
text-align: justify;
font-weight: 500;
margin-top: 2vw;
transition: 0.3s;
}
#store_pages .store_text a.store_text-map:hover {
opacity: 0.6;
}
#store_pages .store_text p.store_text-time {
font-size: clamp(6px, 1.1vw, 14px);
text-align: justify;
font-weight: 500;
margin: 0.3vw 0 2vw;
}
#store_pages .store_image {
width: 50%;
height: auto;
margin: auto;
}
#store_pages .store_image img {
width: 100%;
height: auto;
}
@media (max-width: 500px) {
#store_pages {
width: 90%;
flex-direction: column;
margin: 12vw auto 24vw;
}
#store_pages .store_text {
width: 100%;
}
#store_pages .store_text strong {
font-size: 10vw;
letter-spacing: 0;
}
#store_pages .store_text h2 {
font-size: 4.8vw;
letter-spacing: 1px;
margin-top: -2.5vw;
}
#store_pages .store_text h2::before {
font-size: 4.5vw;
}
#store_pages .store_text p.store_text-address {
position: relative;
top: 50vw;
font-size: 3.6vw;
}
#store_pages .store_text a.store_text-map {
position: relative;
top: 50vw;
font-size: 3.6vw;
}
#store_pages .store_text p.store_text-time {
position: relative;
top: 50.5vw;
font-size: 3.6vw;
margin-bottom: 8vw;
}
#store_pages .components_textbox-viewmore {
margin: 0 auto;
text-align: center;
}
#store_pages .components_textbox-viewmore a {
position: relative;
top: 53vw;
}
#store_pages .store_image {
position: relative;
top: -37vw;
width: 100%;
}
}
#voice_pages {
width: clamp(500px, 70%, 1200px);
display: flex;
margin: 10vw auto;      }
#voice_pages .voice_box {
width: 20%;
}
#voice_pages .voice_box strong {
font-size: clamp(6px, 4vw, 40px);
font-weight: 700;
letter-spacing: 2px;
}
#voice_pages .voice_box h2 {
font-size: clamp(6px, 1.6vw, 28px);
font-weight: 600;
margin-top: -0.8vw;
}
#voice_pages .voice_box h2::before {
content: "ー";
font-size: clamp(6px, 1.6vw, 28px);
font-weight: 400;
color: #d9b57a;
padding-right: 0.2vw;
}
#voice_pages .voice_flex {
width: 80%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#voice_pages .accordion_voice {
width: 45%;
margin: 0 auto;
border-top: 1px solid #323232;
border-bottom: 1px solid #323232;
}
#voice_pages .accordion-hidden {
display: none;
}
#voice_pages .accordion-open {
display: flex;
font-size: 1.2vw;
padding: 1vw 4vw 1vw 0.5vw;
cursor: pointer;
position: relative;
}
#voice_pages .accordion-open img {
width: 50%;
height: 50%;
}
#voice_pages .voice_text {
font-size: 1.1vw;
padding-left: 1vw;
}
#voice_pages .accordion-open p {
font-size: clamp(6px, 0.8vw, 10px);
padding-bottom: clamp(6px, 0.7vw, 20px);
}
#voice_pages .accordion-open h3 {
font-size: clamp(6px, 1vw, 12px);
font-weight: 500;
}
#voice_pages .accordion-open::before,
#voice_pages .accordion-open::after {
content: "";
width: 1vw;
height: 0.1vw;
background: #323232;
position: absolute;
top: 50%;
right: 5%;
transform: translateY(-50%);
}
#voice_pages .accordion-open::after {
transform: translateY(-50%) rotate(90deg);
transition: 0.5s;
}
#voice_pages .accordion-hidden:checked + .accordion-open:after {
transform: translateY(-50%) rotate(0);
}
#voice_pages .accordion-inner {
display: block;
max-height: 0;
overflow: hidden;
opacity: 0;
padding: 0vw;
font-size: 1.2vw;
line-height: 2.4vw;
letter-spacing: 1px;
transition: 0.5s;
text-align: justify;
transition: max-height 0.6s ease, opacity 0.5s ease, padding 0.4s ease;
}
#voice_pages .accordion-hidden:checked + .accordion-open + .accordion-inner {
max-height: 800px;
opacity: 1;
padding: 1vw;
}
#voice_pages .accordion_qa .accordion-open {
padding-left: 0.5vw;
}
#voice_pages .accordion_qa .accordion-hidden:checked + .accordion-open + .accordion-inner {
font-size: clamp(6px, 1.2vw, 22px);
line-height: clamp(11px, 2vw, 30px);
letter-spacing: 1px;
opacity: 1;
padding: 0vw;
}
@media (max-width: 500px) {
#voice_pages {
width: 90%;
flex-direction: column;
margin: 16vw auto;  }
#voice_pages .voice_box {
width: 94%;
}
#voice_pages .voice_box strong {
font-size: 10vw;
letter-spacing: 0;
}
#voice_pages .voice_box h2 {
font-size: 4.8vw;
margin-top: -2vw;
}
#voice_pages .voice_box h2::before {
font-size: 4.5vw;
}
#voice_pages .voice_flex {
width: 100%;
margin: 8vw auto;
}
#voice_pages .accordion_voice {
width: 100%;
}
#voice_pages .accordion-open {
font-size: 12px;
padding: 4vw 14vw 1vw 1vw;
}
#voice_pages .voice_text {
font-size: 14px;
padding-left: 2vw;
}
#voice_pages .accordion-open p {
font-size: 14px;
padding-bottom: 2vw;
}
#voice_pages .accordion-open h3 {
font-size: 14px;
}
#voice_pages .accordion-open::before,
#voice_pages .accordion-open::after {
width: 5vw;
height: 0.3vw;
}
#voice_pages .accordion_qa .accordion-hidden:checked + .accordion-open + .accordion-inner {
font-size: 14px;
text-align: justify;
line-height: 30px;
padding: 1vw 3vw;
}
#voice_pages .accordion-inner {
padding: 2vw 14vw 1vw 2vw;
font-size: 3.8vw;
line-height: 7vw;
}
#voice_pages .accordion_qa .accordion-hidden:checked + .accordion-open + .accordion-inner {
font-size: 3.8vw;
line-height: 7vw;
padding: 2vw 14vw 1vw 2vw;
}
}
#news_pages .news_block {
width: clamp(500px, 70%, 1200px);
display: flex;
margin: 10vw auto 0;
}
#news_pages .news_block .news_box {
width: 20%;
}
#news_pages .news_block .news_box strong {
font-size: clamp(6px, 4vw, 40px);
font-weight: 700;
letter-spacing: 2px;
}
#news_pages .news_block .news_box h2 {
font-size: clamp(6px, 1.6vw, 28px);
font-weight: 600;
margin-top: -0.8vw;
}
#news_pages .news_block .news_box h2::before {
content: "ー";
font-size: clamp(6px, 1.6vw, 28px);
font-weight: 400;
color: #d9b57a;
padding-right: 0.2vw;
}
#news_pages .news_block .home-news {
width: 80%;
padding: 0;
margin: 0 auto;
position: relative;
}
#news_pages .news_block ul.news-list {
padding-left: 0;
}
#news_pages .news_block .home-news::before {
content: "";
width: 100%;
height: calc(100% - 18px);
background-color: #FFFFFF;
position: absolute;
bottom: 0;
right: 0;
z-index: -1;
}
#news_pages .news_block .home-news-title {
margin-top: 3vw;
margin-bottom: 1.312em;
font-size: clamp(12px, 2vw, 30px);
font-weight: 400;
color: #231815;
text-align: center;
line-height: 1.4;
letter-spacing: 0.05em;
text-indent: 0.05em;
text-transform: uppercase;
}
#news_pages .news_block .home-news .news-list .thumbnail {
width: 16%;
margin-right: 7.422%;
}
#news_pages .news_block .home-news > p {
min-height: 400px;
text-align: center;
}
#news_pages .news_block .cat-list {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
font-size: 0.8125rem;
color: #555555;
}
#news_pages .news_block li {
padding-bottom: 0.7vw;
margin: 2vw 0;
border-bottom: 1px solid #323232;
list-style: none;
}
#news_pages .news_block li a {
color: #323232;
text-decoration: none;
}
#news_pages .news_block li a .text {
font-size: clamp(6px, 1.1vw, 18px);
letter-spacing: 0.5px;
padding: 0 1vw;
}
#news_pages .news_block .home-news .cat-list > li {
display: none;
}
#news_pages .news_block .cat-list > li:not(:last-of-type) {
margin-right: 0.923em;
}
#news_pages .news_block .post-header .cat-list {
font-size: 0.875rem;
}
#news_pages .news_read {
width: clamp(100px, 12%, 300px);
margin: 0.5vw 0 10vw 30vw;
}
#news_pages .news_read a {
text-decoration: none;
}
#news_pages .news_read a .news_read-box {
width: 100%;
padding: 0.6vw 1vw;
color: #fff;
background-color: #323232;
font-size: clamp(6px, 1.2vw, 18px);
text-align: center;
}
@media (max-width: 500px) {
#news_pages .news_block {
width: 90%;
flex-direction: column;
margin: 16vw auto 0;
}
#news_pages .news_block .news_box {
width: 94%;
}
#news_pages .news_block .news_box strong {
font-size: 10vw;
letter-spacing: 0;
}
#news_pages .news_block .news_box h2 {
font-size: 4.8vw;
margin-top: -2vw;
}
#news_pages .news_block .news_box h2::before {
font-size: 4.5vw;
}
#news_pages .news_block .home-news {
width: 100%;
padding: 0;
margin: 4vw auto;
}
#news_pages .news_block .home-news::before {
content: "";
width: 100%;
height: calc(100% - 18px);
background-color: #FFFFFF;
position: absolute;
bottom: 0;
right: 0;
z-index: -1;
}
#news_pages .news_block .home-news-title {
margin-top: 3vw;
margin-bottom: 1.312em;
font-size: clamp(12px, 2vw, 30px);
font-weight: 400;
color: #231815;
text-align: center;
line-height: 1.4;
letter-spacing: 0.05em;
text-indent: 0.05em;
text-transform: uppercase;
}
#news_pages .news_block .home-news .news-list .thumbnail {
width: 16%;
margin-right: 7.422%;
}
#news_pages .news_block .home-news > p {
min-height: 400px;
}
#news_pages .news_block li {
padding-bottom: 2vw;
margin: 4vw 0;
}
#news_pages .news_block li a .text {
font-size: 3.6vw;
line-height: 6.5vw;
padding: 0 2vw;
}
#news_pages .news_read {
width: 35%;
margin: 0.5vw 0 24vw 5vw;
}
#news_pages .news_read a .news_read-box {
padding: 2vw;
font-size: 3.4vw;
}
}
#reason_pages {
width: 100%;
}
#reason_pages .reason_title {
width: clamp(600px, 70%, 1200px);
margin: 8vw auto;
}
#reason_pages .reason_title .reason_title-box {
display: flex;
align-items: center;
justify-content: center;
margin: auto;
}
#reason_pages .reason_title .reason_title-box .reason_box-icon {
position: relative;
top: 0.2vw;
width: 2%;
}
#reason_pages .reason_title .reason_title-box .reason_box-icon img {
width: 100%;
height: auto;
}
#reason_pages .reason_title .reason_title-box h2 {
font-size: clamp(10px, 2.2vw, 35px);
letter-spacing: 1px;
margin-left: 0.4vw;
}
#reason_pages .reason_title p {
font-size: clamp(6px, 1.2vw, 18px);
font-weight: 500;
line-height: clamp(10px, 2.5vw, 40px);
letter-spacing: 1px;
text-align: center;
margin: 3vw auto;
}
#reason_pages .reason_backcolor {
width: 100%;
color: #fff;
text-align: center;
overflow: hidden;
aspect-ratio: 64/4;
}
#reason_pages .reason_backcolor span {
--outsize: 20%;
display: block;
width: calc(100% + var(--outsize) * 2);
margin-left: calc(var(--outsize) * -1);
aspect-ratio: 64/18;
background-color: #F3E9D2;
border-radius: 100% 100% 0 0;
}
#reason_pages .reason_block {
width: 100%;
background-color: #F3E9D2;
text-align: center;
}
#reason_pages .reason_block strong {
font-size: clamp(6px, 1.6vw, 24px);
font-weight: 500;
color: #FD7E14;
letter-spacing: 1px;
}
#reason_pages .reason_block h2 {
font-size: clamp(10px, 3.5vw, 40px);
font-weight: 600;
letter-spacing: 1px;
}
#reason_pages .reason_block .reason_box {
width: clamp(500px, 90%, 1600px);
margin: 6vw auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
text-align: center;
}
#reason_pages .reason_block .reason_box .reason_box-card {
width: 23.5%;
margin: 0.5vw;
padding: 1vw;
background-color: #fff;
border-radius: 1.5vw;
}
#reason_pages .reason_block .reason_box .reason_box-card .reason_card-images {
width: 100%;
margin: auto;
}
#reason_pages .reason_block .reason_box .reason_box-card h3 {
font-size: clamp(10px, 1.2vw, 24px);
font-weight: 700;
text-align: justify;
margin: 1vw 0 1.5vw;
}
#reason_pages .reason_block .reason_box .reason_box-card p {
position: relative;
font-size: clamp(6px, 1vw, 18px);
line-height: clamp(10px, 2vw, 36px);
font-weight: 500;
text-align: justify;
}
#reason_pages .reason_block .cta_button {
width: clamp(100px, 25%, 500px);
margin: 4vw auto;
padding-bottom: 20vw;
}
@media (max-width: 500px) {
#reason_pages {
width: 100%;
}
#reason_pages .reason_title {
width: 90%;
margin: 12vw auto;
}
#reason_pages .reason_title .reason_title-box {
display: flex;
align-items: start;
justify-content: start;
margin: auto;
}
#reason_pages .reason_title .reason_title-box .reason_box-icon {
position: relative;
top: 3vw;
width: 6%;
}
#reason_pages .reason_title .reason_title-box .reason_box-icon img {
width: 100%;
height: auto;
}
#reason_pages .reason_title .reason_title-box h2 {
font-size: 8vw;
line-height: 10vw;
letter-spacing: 0.5px;
text-align: justify;
margin-left: 2vw;
}
#reason_pages .reason_title p {
width: 83%;
font-size: 3.6vw;
line-height: 7.4vw;
text-align: justify;
margin: 3vw auto;
}
#reason_pages .reason_backcolor {
width: 100%;
color: #fff;
text-align: center;
overflow: hidden;
aspect-ratio: 64/4;
}
#reason_pages .reason_backcolor span {
--outsize: 20%;
width: 100%;
width: calc(100% + var(--outsize) * 2);
margin-left: calc(var(--outsize) * -1);
aspect-ratio: 64/18;
}
#reason_pages .reason_block {
padding-top: 22vw;
padding-bottom: 10vw;
}
#reason_pages .reason_block strong {
position: relative;
top: -14vw;
font-size: 4vw;
}
#reason_pages .reason_block h2 {
position: relative;
top: -14vw;
font-size: 7vw;
}
#reason_pages .reason_block .reason_box {
width: 90%;
margin: -8vw auto 0;
display: flex;
flex-direction: column;
}
#reason_pages .reason_block .reason_box .reason_box-card {
width: 100%;
margin: 3vw 0;
padding: 4vw;
border-radius: 3vw;
}
#reason_pages .reason_block .reason_box .reason_box-card h3 {
font-size: 5vw;
margin: 2vw 0 5vw;
}
#reason_pages .reason_block .reason_box .reason_box-card p {
font-size: 4vw;
line-height: 7.5vw;
}
#reason_pages .reason_block .cta_button {
width: 70%;
margin: 8vw auto;
padding-bottom: 20vw;
}
}
#trial_pages {
width: 100%;
}
#trial_pages .trial_backcolor {
width: 100%;
margin-top: -16vw;
text-align: center;
overflow: hidden;
aspect-ratio: 64/4;
}
#trial_pages .trial_backcolor span {
--outsize: 20%;
display: block;
width: calc(100% + var(--outsize) * 2);
margin-left: calc(var(--outsize) * -1);
aspect-ratio: 64/18;
background-color: #fff;
border-radius: 100% 100% 0 0;
}
#trial_pages .trial_block {
width: 100%;
text-align: center;
background-color: #fff;
}
#trial_pages .trial_block strong {
font-size: clamp(6px, 1.6vw, 24px);
font-weight: 500;
color: #FD7E14;
letter-spacing: 1px;
}
#trial_pages .trial_block h2 {
font-size: clamp(10px, 3.5vw, 40px);
font-weight: 600;
letter-spacing: 1px;
}
#trial_pages .trial_block .trial_block-price {
width: clamp(500px, 65%, 1200px);
margin: 4vw auto 6vw;
}
#trial_pages .trial_block .trial_block-price .trial_block-attention {
padding-left: 0;
margin-top: 0.5vw;
text-align: justify;
}
#trial_pages .trial_block .trial_block-price .trial_block-attention li {
font-size: clamp(6px, 1.1vw, 16px);
font-weight: 500;
list-style: none;
letter-spacing: 1px;
margin: 0.3vw 0;
}
@media (max-width: 500px) {
#trial_pages {
width: 100%;
}
#trial_pages .trial_backcolor {
width: 100%;
margin-top: -16vw;
text-align: center;
overflow: hidden;
}
#trial_pages .trial_backcolor span {
--outsize: 20%;
display: block;
background-color: #fff;
border-radius: 100% 100% 0 0;
}
#trial_pages .trial_block {
padding: 16vw 0 12vw;
}
#trial_pages .trial_block strong {
font-size: 4vw;
}
#trial_pages .trial_block h2 {
font-size: 7vw;
}
#trial_pages .trial_block .trial_block-price {
width: 90%;
margin: 8vw auto;
}
#trial_pages .trial_block .trial_block-price .trial_block-attention {
margin-top: 3vw;
padding: 1vw;
}
#trial_pages .trial_block .trial_block-price .trial_block-attention li {
font-size: 3.4vw;
line-height: 5vw;
}
}
#campaign_component.campaign_reason {
background-color: #fff;
}
#campaign_component.campaign_reason .campaign_title-box {
display: flex;
align-items: center;
justify-content: center;
margin: 6vw auto 0;
}
#campaign_component.campaign_reason .campaign_title-box .campaign_title-icon {
position: relative;
top: 0.2vw;
width: 2%;
}
#campaign_component.campaign_reason .campaign_title-box h2 {
font-size: clamp(10px, 2.2vw, 35px);
letter-spacing: 1px;
margin-left: 0.4vw;
}
#campaign_component.campaign_reason p.campaign_reason-text {
font-size: clamp(6px, 1.2vw, 20px);
line-height: clamp(10px, 1.7vw, 28px);
font-weight: 500;
letter-spacing: 0.8px;
text-align: center;
margin: 1.5vw auto;
}
#campaign_component.campaign_reason .price_contents__tab {
width: 30%;
padding: 1vw;
font-size: 1.1vw;
background: #fff;
}
@media (max-width: 500px) {
#campaign_component.campaign_reason {
padding-bottom: 0;
margin: 16vw auto 0;
}
#campaign_component.campaign_reason .campaign_title-box {
margin: 12vw auto 0;
}
#campaign_component.campaign_reason .campaign_title-box .campaign_title-icon {
width: 4%;
}
#campaign_component.campaign_reason .campaign_title-box h2 {
font-size: 5vw;
margin-left: 1vw;
}
#campaign_component.campaign_reason p.campaign_reason-text {
width: 90%;
font-size: 3.6vw;
line-height: 5.8vw;
margin: 5vw auto;
}
#campaign_component.campaign_reason .price_contents__tab {
width: 40%;
padding: 2vw;
font-size: 3.4vw;
}
}
#review_pages {
width: 100%;
background-color: #F3E9D2;
padding: 6vw 0;
text-align: center;
}
#review_pages strong {
font-size: clamp(6px, 1.6vw, 24px);
font-weight: 500;
color: #FD7E14;
letter-spacing: 1px;
}
#review_pages h2 {
font-size: clamp(10px, 3.5vw, 40px);
font-weight: 600;
letter-spacing: 1px;
}
#review_pages .ti-widget.ti-goog .ti-reviews-container {
margin-top: 2vw;
}
@media (max-width: 500px) {
#review_pages {
width: 100%;
padding: 12vw 0;
}
#review_pages strong {
font-size: 4vw;
}
#review_pages h2 {
font-size: 7vw;
}
#review_pages .ti-widget.ti-goog .ti-widget-container {
margin: 4vw auto;
padding: 4vw;
}
#review_pages .ti-widget[data-layout-id="4"][data-set-id=light-background] .ti-reviews-container-wrapper {
width: 94%;
margin: 5vw auto;
}
}
#studio_pages {
width: 100%;
}
#studio_pages .studio_title {
width: clamp(600px, 70%, 1200px);
margin: clamp(10px, 8vw, 60px) auto;
}
#studio_pages .studio_title .studio_title-box {
display: flex;
align-items: center;
justify-content: center;
margin: auto;
}
#studio_pages .studio_title .studio_title-box .studio_box-icon {
position: relative;
top: 0.2vw;
width: 2%;
}
#studio_pages .studio_title .studio_title-box .studio_box-icon img {
width: 100%;
height: auto;
}
#studio_pages .studio_title .studio_title-box h2 {
font-size: clamp(10px, 2.2vw, 35px);
letter-spacing: 1px;
margin-left: 0.4vw;
}
#studio_pages .studio_title p {
font-size: clamp(6px, 1.2vw, 18px);
font-weight: 500;
line-height: clamp(10px, 2.5vw, 40px);
letter-spacing: 1px;
text-align: center;
margin: clamp(6px, 3vw, 27px) auto clamp(10px, 5vw, 50px);
}
#studio_pages .studio_backcolor {
width: 100%;
color: #fff;
text-align: center;
overflow: hidden;
aspect-ratio: 64/4;
}
#studio_pages .studio_backcolor span {
--outsize: 20%;
display: block;
width: calc(100% + var(--outsize) * 2);
margin-left: calc(var(--outsize) * -1);
aspect-ratio: 64/18;
background-color: #F3E9D2;
border-radius: 100% 100% 0 0;
}
#studio_pages .studio_block {
width: 100%;
background-color: #F3E9D2;
text-align: center;
padding-bottom: 24vw;
}
#studio_pages .studio_block strong {
font-size: clamp(6px, 1.6vw, 24px);
font-weight: 500;
color: #FD7E14;
letter-spacing: 1px;
}
#studio_pages .studio_block h2 {
font-size: clamp(10px, 3.5vw, 40px);
font-weight: 600;
letter-spacing: 1px;
}
#studio_pages .studio_block .studio_block-box {
width: clamp(500px, 65%, 1200px);
margin: 6vw auto 2vw;
display: flex;
justify-content: center;
}
#studio_pages .studio_block .studio_block-box .studio_box-image {
width: 45%;
margin-right: 5%;
}
#studio_pages .studio_block .studio_block-box .studio_box-image img {
width: 100%;
height: auto;
margin-bottom: clamp(6px, 3.5vw, 40px);
}
#studio_pages .studio_block .studio_block-box .studio_block-wrapper {
width: 50%;
padding: 24px;
font-size: clamp(6px, 1.1vw, 18px);
line-height: 1.7;
color: #323232;
}
#studio_pages .studio_block .studio_block-box .studio_block-wrapper .studio_block-section {
padding: clamp(6px, 1.2vw, 28px) 0;
border-bottom: 1px dashed #bfb8a8;
}
#studio_pages .studio_block .studio_block-box .studio_block-wrapper .studio_block-title {
font-size: clamp(6px, 1.3vw, 22px);
font-weight: bold;
margin-bottom: 8px;
}
#studio_pages .studio_block .studio_block-box .studio_block-wrapper .studio_block-text {
margin: 0;
}
#studio_pages .studio_block .studio_block-box .studio_block-wrapper .studio_block-note {
display: block;
margin-top: 4px;
font-size: clamp(6px, 1.1vw, 18px);
color: #555;
}
#studio_pages .studio_block .studio_block-box .studio_block-wrapper .studio_block-sns {
display: flex;
justify-content: center;
gap: 12px;
}
#studio_pages .studio_block .studio_block-box .studio_block-wrapper .studio_block-sns-icon {
width: 5%;
cursor: pointer;
}
#studio_pages .studio_block .studio_block-box .studio_block-wrapper .studio_block-sns-icon:hover {
opacity: 0.7;
}
#studio_pages .studio_block .studio_block-mapWrap {
padding: 1vw;
text-align: center;
}
#studio_pages .studio_block .studio_block-mapWrap .studio_block-mapFrame {
width: clamp(500px, 65%, 1200px);
margin: 0 auto;
border: 1px solid #d6d1c6;
background: #fff;
overflow: hidden;
aspect-ratio: 16/6;
position: relative;
}
#studio_pages .studio_block .studio_block-mapWrap .studio_block-mapFrame .studio_block-mapIframe {
width: 100%;
height: 100%;
border: 0;
position: absolute;
inset: 0;
}
#studio_pages .studio_block .studio_block-mapWrap .studio_block-mapLink {
display: inline-block;
margin-top: clamp(6px, 2vw, 30px);
font-size: clamp(6px, 1.3vw, 24px);
font-weight: 700;
color: #ff7a00;
text-decoration: none;
}
#studio_pages .studio_block .studio_block-mapWrap .studio_block-mapLink:hover {
opacity: 0.75;
text-decoration: underline;
}
@media (max-width: 500px) {
#studio_pages {
width: 100%;
}
#studio_pages .studio_title {
width: 90%;
margin: 12vw auto;
}
#studio_pages .studio_title .studio_title-box {
display: flex;
align-items: start;
justify-content: start;
margin: auto;
}
#studio_pages .studio_title .studio_title-box .studio_box-icon {
position: relative;
top: 3vw;
width: 6%;
}
#studio_pages .studio_title .studio_title-box .studio_box-icon img {
width: 100%;
height: auto;
}
#studio_pages .studio_title .studio_title-box h2 {
font-size: 8vw;
line-height: 10vw;
letter-spacing: 0.5px;
text-align: justify;
margin-left: 2vw;
}
#studio_pages .studio_title p {
width: 83%;
font-size: 3.6vw;
line-height: 7.4vw;
text-align: justify;
margin: 3vw auto;
}
#studio_pages .studio_backcolor {
width: 100%;
color: #fff;
text-align: center;
overflow: hidden;
aspect-ratio: 64/4;
}
#studio_pages .studio_backcolor span {
--outsize: 20%;
width: 100%;
width: calc(100% + var(--outsize) * 2);
margin-left: calc(var(--outsize) * -1);
aspect-ratio: 64/18;
}
#studio_pages .studio_block {
padding-top: 22vw;
padding-bottom: 30vw;
}
#studio_pages .studio_block strong {
position: relative;
top: -14vw;
font-size: 4vw;
}
#studio_pages .studio_block h2 {
position: relative;
top: -14vw;
font-size: 7vw;
}
#studio_pages .studio_block .studio_block-box {
width: 90%;
margin: 0 auto 2vw;
flex-direction: column;
}
#studio_pages .studio_block .studio_block-box .studio_box-image {
width: 100%;
margin-right: 0;
}
#studio_pages .studio_block .studio_block-box .studio_box-image img {
width: 100%;
margin-bottom: 3vw;
}
#studio_pages .studio_block .studio_block-box .studio_box-image img.none {
display: none;
}
#studio_pages .studio_block .studio_block-box .studio_block-wrapper {
width: 100%;
padding: 2vw 0;
font-size: 3.6vw;
line-height: 7vw;
text-align: left;
}
#studio_pages .studio_block .studio_block-box .studio_block-wrapper .studio_block-section {
padding: 3vw 0;
}
#studio_pages .studio_block .studio_block-box .studio_block-wrapper .studio_block-title {
font-size: 4vw;
margin-bottom: 1.2vw;
}
#studio_pages .studio_block .studio_block-box .studio_block-wrapper .studio_block-note {
margin-top: 1vw;
font-size: 3.2vw;
}
#studio_pages .studio_block .studio_block-box .studio_block-wrapper .studio_block-sns {
justify-content: start;
gap: 16px;
}
#studio_pages .studio_block .studio_block-box .studio_block-wrapper .studio_block-sns-icon {
width: 8%;
}
#studio_pages .studio_block .studio_block-mapWrap .studio_block-mapFrame {
width: 90%;
margin: 4vw auto;
aspect-ratio: 16/7;
}
#studio_pages .studio_block .studio_block-mapWrap .studio_block-mapLink {
margin-top: 3vw;
font-size: 3.8vw;
}
}
#campaign_pages {
width: clamp(200px, 65%, 1000px);
margin: 8vw auto;
}
#campaign_pages .campaign_block {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1vw;
}
#campaign_pages .campaign_block .campaign_block-box {
position: relative;
top: 0.2vw;
width: 2%;
}
#campaign_pages .campaign_block p {
font-size: clamp(10px, 2.2vw, 35px);
font-weight: 500;
letter-spacing: 1px;
margin-left: 0.4vw;
}
#campaign_pages .campaign_block-banner {
width: 60%;
margin: auto;
}
@media (max-width: 500px) {
#campaign_pages {
width: 90%;
margin: 16vw auto;
}
#campaign_pages .campaign_block {
margin: 0 auto 3vw;
}
#campaign_pages .campaign_block .campaign_block-box {
width: 4%;
}
#campaign_pages .campaign_block p {
font-size: 5vw;
margin-left: 1vw;
}
#campaign_pages .campaign_block-banner {
width: 85%;
}
}
#staff {
width: 100%;
background-color: #645047 !important;
padding: 8vw 0;
margin: 8vw auto 0;
}
#staff .staff_title {
margin: auto;
text-align: center;
color: #fff;
}
#staff .staff_title h2 {
font-size: clamp(6px, 4vw, 40px);
letter-spacing: 1px;
}
#staff .staff_title strong {
font-size: clamp(6px, 1.4vw, 30px);
font-weight: 400;
}
#staff .staff_flex {
width: 100%;
display: flex;
justify-content: center;
padding-top: 6vw;
margin: auto;
}
#staff .staff_flex .staff_img {
width: 30%;
}
#staff .staff_flex .staff_img img {
position: relative;
width: 70%;
height: auto;
}
#staff .staff_flex .staff_box {
width: 40%;
color: #fff;
padding: 4vw 0;
}
#staff .staff_flex .staff_box .title_box {
display: flex;
}
#staff .staff_flex .staff_box .title_box .position h4 {
font-size: 2vw;
font-weight: 300;
letter-spacing: 1.5px;
}
#staff .staff_flex .staff_box .title_box .position p {
font-size: 0.9vw;
font-weight: 300;
}
#staff .staff_flex .staff_box .title_box .position_box {
display: flex;
margin-left: 4vw;
}
#staff .staff_flex .staff_box .title_box .position_box h3 {
font-size: 1.7vw;
font-weight: 300;
border-bottom: 1px solid #fff;
padding-top: 4vw;
margin: 0 2vw;
}
#staff .staff_flex .staff_box .title_box .position_box p.name_en {
font-size: 1vw;
font-weight: 300;
padding-top: 5vw;
}
#staff .accordion_staff {
width: 100%;
margin: 2vw auto;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;      }
#staff .accordion_staff .accordion-hidden {
display: none;
}
#staff .accordion_staff .accordion-open {
display: flex;
font-size: clamp(6px, 1.2vw, 16px);
padding: 1vw 4vw 0 0.5vw;
cursor: pointer;
position: relative;
}
#staff .accordion_staff .accordion_qa .accordion-open {
padding-left: 0.5vw;
}
#staff .accordion_staff .accordion-open::before,
#staff .accordion_staff .accordion-open::after {
content: "";
width: 1vw;
height: 0.1vw;
background-color: #323232;
position: absolute;
top: 60%;
right: 5%;
transform: translateY(-50%);
}
#staff .accordion_staff .accordion-open::after {
transform: translateY(-50%) rotate(90deg);
transition: 0.5s;
}
#staff .accordion_staff .accordion-hidden:checked + .accordion-open:after {
transform: translateY(-50%) rotate(0);
}
#staff .accordion_staff .accordion-inner {
display: block;
max-height: 0;
overflow: hidden;
opacity: 0;
padding: 1vw 4vw 0 0.5vw;
font-size: clamp(6px, 1.2vw, 16px);
line-height: clamp(12px, 2.4vw, 32px);
letter-spacing: 1px;
transition: 0.5s;
text-align: justify;
transition: max-height 0.6s ease, opacity 0.5s ease, padding 0.4s ease;
}
#staff .accordion_staff .accordion-hidden:checked + .accordion-open + .accordion-inner {
max-height: 800px;
opacity: 1;
padding: 1vw;
}
#staff .accordion_staff .accordion-open::before, #staff .accordion_staff .accordion-open::after {
background: #fff;
position: absolute;
}
#staff .accordion_staff .accordion_qa .accordion-hidden:checked + .accordion-open + .accordion-inner {
font-size: clamp(6px, 1.2vw, 16px);
font-weight: 300;
letter-spacing: 1px;
line-height: 2.2vw;
height: auto;
opacity: 1;
padding: 0.5vw;
}
#staff p.message {
font-size: clamp(6px, 1.2vw, 18px);
font-weight: 300;
text-align: justify;
letter-spacing: 1px;
line-height: clamp(10px, 2.2vw, 33px);
}
@media (max-width: 500px) {
#staff {
width: 100%;
padding: 12vw 0;
}
#staff .staff_title h2 {
font-size: 7vw;
}
#staff .staff_title strong {
font-size: 4vw;
}
#staff .staff_flex {
width: 90%;
flex-direction: column;
padding-top: 12vw;
margin: auto;
}
#staff .staff_flex .staff_img {
width: 100%;
}
#staff .staff_flex .staff_img img {
width: 100%;
}
#staff .staff_flex .staff_box {
width: 100%;
padding: 8vw 0;
}
#staff .staff_flex .staff_box .title_box {
width: 100%;
display: flex;
}
#staff .staff_flex .staff_box .title_box .position {
width: 60%;
padding-left: 5vw;
}
#staff .staff_flex .staff_box .title_box .position h4 {
font-size: 5vw;
}
#staff .staff_flex .staff_box .title_box .position p {
font-size: 3vw;
}
#staff .staff_flex .staff_box .title_box .position_box {
width: 35%;
flex-direction: column;
margin-left: 0;
}
#staff .staff_flex .staff_box .title_box .position_box h3 {
font-size: 6vw;
letter-spacing: 1px;
font-weight: 500;
padding: 2vw 0 1vw;
margin: 0;
}
#staff .staff_flex .staff_box .title_box .position_box p.name_en {
font-size: 3vw;
font-weight: 300;
padding-top: 1vw;
}
#staff .accordion_staff {
width: 90%;
margin: 4vw auto;   }
#staff .accordion_staff .accordion-open {
display: flex;
font-size: 4vw;
padding: 2vw 4vw 0 1vw;
}
#staff .accordion_staff .accordion_qa .accordion-open {
padding-left: 1vw;
}
#staff .accordion_staff .accordion-open::before,
#staff .accordion_staff .accordion-open::after {
content: "";
width: 3.5vw;
height: 0.4vw;
}
#staff .accordion_staff .accordion-inner {
padding: 2vw 4vw 0 1vw;
font-size: 3.6vw;
line-height: 7vw;
letter-spacing: 1px;
}
#staff .accordion_staff .accordion-hidden:checked + .accordion-open + .accordion-inner {
padding: 2vw 4vw 0 1vw;
}
#staff .accordion_staff .accordion_qa .accordion-hidden:checked + .accordion-open + .accordion-inner {
font-size: 3.6vw;
line-height: 7vw;
}
#staff p.message {
width: 90%;
margin: auto;
font-size: 3.6vw;
letter-spacing: 0.5px;
line-height: 7vw;
}
}
#faq_pages .faq {
width: clamp(500px, 60%, 1000px);
margin: 4vw auto;
font-size: clamp(6px, 1.2vw, 20px);
color: #222;
}
#faq_pages .faq_heading {
text-align: center;
font-weight: 700;
padding: clamp(5px, 1.3vw, 18px) 0;
border-top: 1px solid #aaa;
border-bottom: 1px solid #aaa;
margin-top: clamp(12px, 5vw, 55px);
margin-bottom: clamp(5px, 1.6vw, 20px);
}
#faq_pages .faq_list {
display: flex;
flex-direction: column;
gap: 8px;
}
#faq_pages .faq_item {
background: #f0f0f0;
}
#faq_pages .faq_item[open] .faq_icon {
transform: rotate(45deg);
}
#faq_pages .faq_question {
list-style: none;
cursor: pointer;
padding: clamp(5px, 1.2vw, 16px) clamp(5px, 1.2vw, 18px);
display: flex;
justify-content: space-between;
align-items: center;
}
#faq_pages .faq_question::-webkit-details-marker {
display: none;
}
#faq_pages .faq_question-text {
font-weight: 500;
}
#faq_pages .faq_icon {
width: 14px;
height: 14px;
position: relative;
flex-shrink: 0;
}
#faq_pages .faq_icon::before, #faq_pages .faq_icon::after {
content: "";
position: absolute;
background-color: #323232;
}
#faq_pages .faq_icon::before {
width: 100%;
height: 2px;
top: 50%;
left: 0;
transform: translateY(-50%);
}
#faq_pages .faq_icon::after {
width: 2px;
height: 100%;
top: 0;
left: 50%;
transform: translateX(-50%);
}
#faq_pages .faq_answer {
text-align: justify;
padding: 16px;
padding-right: 4vw;
background: #fff;
line-height: 1.7;
}
#faq_pages .faq_answer p {
font-size: clamp(5px, 1.2vw, 18px);
margin: 0 0 8px;
}
#faq_pages .faq_answer-title {
font-size: clamp(5px, 1.2vw, 18px);
font-weight: 700;
margin-top: 12px;
}
#faq_pages .faq_note {
font-size: clamp(5px, 1vw, 14px);
color: #555;
}
@media (max-width: 500px) {
#faq_pages {
width: 100%;
}
#faq_pages .faq {
width: 90%;
margin: 16vw auto 8vw;
font-size: 4.5vw;
}
#faq_pages .faq_heading {
padding: 3vw 0;
margin-top: 16vw;
margin-bottom: 3vw;
}
#faq_pages .faq_list {
gap: 16px;
}
#faq_pages .faq_question {
padding: 4.5vw 4vw;
}
#faq_pages .faq_question-text {
font-size: 3.6vw;
padding-right: 5vw;
}
#faq_pages .faq_icon {
width: 4vw;
height: 4vw;
}
#faq_pages .faq_answer {
line-height: 6.4vw;
padding-right: 12vw;
}
#faq_pages .faq_answer p {
font-size: 3.8vw;
line-height: 7vw;
}
#faq_pages .faq_answer-title {
font-size: 3.8vw;
}
#faq_pages .faq_note {
font-size: 3.2vw;
}
}
#lesson_pages {
width: 100%;
}
#lesson_pages .lesson_title {
width: clamp(600px, 70%, 1200px);
margin: 8vw auto;
}
#lesson_pages .lesson_title .lesson_title-box {
display: flex;
align-items: center;
justify-content: center;
margin: auto;
}
#lesson_pages .lesson_title .lesson_title-box .lesson_box-icon {
position: relative;
top: 0.2vw;
width: 2%;
}
#lesson_pages .lesson_title .lesson_title-box .lesson_box-icon img {
width: 100%;
height: auto;
}
#lesson_pages .lesson_title .lesson_title-box h2 {
font-size: clamp(10px, 2.2vw, 35px);
letter-spacing: 1px;
margin-left: 0.4vw;
}
#lesson_pages .lesson_title p {
font-size: clamp(6px, 1.2vw, 18px);
font-weight: 500;
line-height: clamp(10px, 2.5vw, 40px);
letter-spacing: 0.5px;
text-align: center;
margin: 3vw auto;
}
#lesson_pages .scroll_buttons {
width: clamp(300px, 80%, 1200px);
display: flex;
justify-content: center;
margin: auto;
gap: 14px;
}
#lesson_pages .scroll_buttons .scroll_button {
width: 20%;
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
background: #eeeeee;
color: #111;
text-decoration: none;
font-size: clamp(6px, 1.2vw, 18px);
font-weight: 500;
transition: background 0.2s ease;
}
#lesson_pages .scroll_buttons .scroll_button:hover {
background: #e2e2e2;
}
#lesson_pages .scroll_buttons .scroll_button .scroll_icon {
width: 10px;
height: 10px;
border-right: 2px solid #ff7a00;
border-bottom: 2px solid #ff7a00;
transform: rotate(45deg);
flex-shrink: 0;
}
@media (max-width: 500px) {
#lesson_pages .lesson_title {
width: 90%;
margin: 16vw auto;
}
#lesson_pages .lesson_title .lesson_title-box {
justify-content: start;
}
#lesson_pages .lesson_title .lesson_title-box .lesson_box-icon {
width: 5%;
}
#lesson_pages .lesson_title .lesson_title-box h2 {
font-size: 7vw;
margin-left: 1vw;
}
#lesson_pages .lesson_title p {
font-size: 3.6vw;
font-weight: 400;
line-height: 6vw;
text-align: justify;
margin: 2vw auto 6vw;
}
#lesson_pages .scroll_buttons {
width: 90%;
flex-direction: column;
margin-bottom: 24vw;
}
#lesson_pages .scroll_buttons .scroll_button {
width: 100%;
gap: 20px;
color: #323232;
font-size: 3.4vw;
letter-spacing: 1px;
}
}
#group,
#personal,
#bodycare,
#kids {
width: 100%;
margin-top: 12vw;
}
#group .lesson_backcolor,
#personal .lesson_backcolor,
#bodycare .lesson_backcolor,
#kids .lesson_backcolor {
width: 100%;
color: #fff;
text-align: center;
overflow: hidden;
aspect-ratio: 64/4;
}
#group .lesson_backcolor span,
#personal .lesson_backcolor span,
#bodycare .lesson_backcolor span,
#kids .lesson_backcolor span {
--outsize: 20%;
display: block;
width: calc(100% + var(--outsize) * 2);
margin-left: calc(var(--outsize) * -1);
aspect-ratio: 64/18;
background-color: #F3E9D2;
border-radius: 100% 100% 0 0;
}
#group .lesson_block,
#personal .lesson_block,
#bodycare .lesson_block,
#kids .lesson_block {
width: 100%;
background-color: #F3E9D2;
text-align: center;
padding-bottom: 24vw;
}
#group .lesson_block h2,
#personal .lesson_block h2,
#bodycare .lesson_block h2,
#kids .lesson_block h2 {
font-size: clamp(5px, 2vw, 35px);
padding-top: 3vw;
margin-bottom: 0.5vw;
}
#group .lesson_block p.lesson_sub,
#personal .lesson_block p.lesson_sub,
#bodycare .lesson_block p.lesson_sub,
#kids .lesson_block p.lesson_sub {
font-size: clamp(5px, 1.1vw, 18px);
}
#group .lesson_block .lesson_block-contents,
#personal .lesson_block .lesson_block-contents,
#bodycare .lesson_block .lesson_block-contents,
#kids .lesson_block .lesson_block-contents {
width: clamp(500px, 70%, 1200px);
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 3.5vw auto 2vw;
}
#group .lesson_block .lesson_block-contents .lesson_block-box,
#personal .lesson_block .lesson_block-contents .lesson_block-box,
#bodycare .lesson_block .lesson_block-contents .lesson_block-box,
#kids .lesson_block .lesson_block-contents .lesson_block-box {
width: 45%;
margin: 4vw 1.2vw;
}
#group .lesson_block .lesson_block-contents .lesson_block-box img,
#personal .lesson_block .lesson_block-contents .lesson_block-box img,
#bodycare .lesson_block .lesson_block-contents .lesson_block-box img,
#kids .lesson_block .lesson_block-contents .lesson_block-box img {
width: 100%;
height: auto;
}
#group .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card,
#personal .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card,
#bodycare .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card,
#kids .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card {
position: relative;
width: 90%;
margin: -4vw auto;
padding: 2vw;
background-color: #fff;
box-shadow: 0px 0px 15px -5px #cbbc99;
border-radius: 0.5vw;
z-index: 100;
}
#group .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_card,
#personal .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_card,
#bodycare .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_card,
#kids .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_card {
display: flex;
align-items: center;
margin-bottom: 2vw;
}
#group .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_card h3,
#personal .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_card h3,
#bodycare .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_card h3,
#kids .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_card h3 {
font-size: clamp(5px, 1.8vw, 25px);
}
#group .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_card p.lesson_card-trial,
#personal .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_card p.lesson_card-trial,
#bodycare .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_card p.lesson_card-trial,
#kids .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_card p.lesson_card-trial {
font-size: clamp(5px, 0.8vw, 14px);
color: #fff;
background-color: #FD7E14;
border-radius: 5vw;
padding: 0.4vw 1vw;
margin-left: 1vw;
}
#group .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-text,
#group .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-item,
#personal .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-text,
#personal .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-item,
#bodycare .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-text,
#bodycare .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-item,
#kids .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-text,
#kids .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-item {
font-size: clamp(5px, 1.1vw, 19px);
font-weight: 500;
text-align: justify;
}
#group .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-item,
#personal .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-item,
#bodycare .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-item,
#kids .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-item {
font-size: clamp(5px, 1vw, 16px);
margin-top: 1vw;
}
#group .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-level,
#personal .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-level,
#bodycare .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-level,
#kids .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-level {
display: flex;
justify-content: space-evenly;
border-top: 1px solid #323232;
padding-top: 0.8vw;
margin-top: 1vw;
}
#group .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-level p,
#personal .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-level p,
#bodycare .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-level p,
#kids .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-level p {
font-size: clamp(5px, 1.2vw, 17px);
font-weight: 500;
letter-spacing: 0.7px;
margin: 0 1vw;
}
#group .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-level p span,
#personal .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-level p span,
#bodycare .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-level p span,
#kids .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-level p span {
font-size: clamp(8px, 2vw, 28px);
font-style: italic;
color: #EBC64B;
}
#group .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-level p .level_color,
#personal .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-level p .level_color,
#bodycare .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-level p .level_color,
#kids .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-level p .level_color {
font-size: clamp(5px, 1.2vw, 17px);
}
@media (max-width: 500px) {
#group .lesson_block h2,
#personal .lesson_block h2,
#bodycare .lesson_block h2,
#kids .lesson_block h2 {
font-size: 7vw;
padding-top: 12vw;
margin-bottom: 1vw;
}
#group .lesson_block p.lesson_sub,
#personal .lesson_block p.lesson_sub,
#bodycare .lesson_block p.lesson_sub,
#kids .lesson_block p.lesson_sub {
font-size: 3.4vw;
padding: 0 6vw;
margin-bottom: 12vw;
}
#group .lesson_block .lesson_block-contents,
#personal .lesson_block .lesson_block-contents,
#bodycare .lesson_block .lesson_block-contents,
#kids .lesson_block .lesson_block-contents {
width: 100%;
flex-direction: column;
margin: 6vw auto 2vw;
}
#group .lesson_block .lesson_block-contents .lesson_block-box,
#personal .lesson_block .lesson_block-contents .lesson_block-box,
#bodycare .lesson_block .lesson_block-contents .lesson_block-box,
#kids .lesson_block .lesson_block-contents .lesson_block-box {
width: 100%;
margin: 0 auto 20vw;
}
#group .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card,
#personal .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card,
#bodycare .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card,
#kids .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card {
position: relative;
width: 90%;
margin: -6vw auto;
padding: 4vw;
border-radius: 1vw;
}
#group .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_card,
#personal .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_card,
#bodycare .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_card,
#kids .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_card {
margin-bottom: 4vw;
}
#group .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_card h3,
#personal .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_card h3,
#bodycare .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_card h3,
#kids .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_card h3 {
font-size: 5vw;
}
#group .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_card p.lesson_card-trial,
#personal .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_card p.lesson_card-trial,
#bodycare .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_card p.lesson_card-trial,
#kids .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_card p.lesson_card-trial {
font-size: 3vw;
border-radius: 6vw;
padding: 0.45vw 3vw;
margin-left: 3vw;
}
#group .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-text,
#group .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-item,
#personal .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-text,
#personal .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-item,
#bodycare .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-text,
#bodycare .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-item,
#kids .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-text,
#kids .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-item {
font-size: 3.8vw;
line-height: 7vw;
font-weight: 400;
}
#group .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-item,
#personal .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-item,
#bodycare .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-item,
#kids .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-item {
font-size: 3.4vw;
margin-top: 3vw;
}
#group .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-level,
#personal .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-level,
#bodycare .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-level,
#kids .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-level {
padding-top: 2vw;
margin-top: 2vw;
}
#group .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-level p,
#personal .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-level p,
#bodycare .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-level p,
#kids .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-level p {
font-size: 3.4vw;
margin: 0 2vw;
}
#group .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-level p span,
#personal .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-level p span,
#bodycare .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-level p span,
#kids .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-level p span {
font-size: 6vw;
}
#group .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-level p .level_color,
#personal .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-level p .level_color,
#bodycare .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-level p .level_color,
#kids .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card .lesson_box-level p .level_color {
font-size: 3.6vw;
}
}
#personal,
#kids {
width: 100%;
}
#personal .lesson_backcolor,
#kids .lesson_backcolor {
width: 100%;
margin-top: -16vw;
text-align: center;
overflow: hidden;
aspect-ratio: 64/4;
}
#personal .lesson_backcolor span,
#kids .lesson_backcolor span {
background-color: #fff;
}
#personal .lesson_block,
#kids .lesson_block {
background-color: #fff;
padding-bottom: 0;
}
#personal .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card,
#kids .lesson_block .lesson_block-contents .lesson_block-box .lesson_box-card {
box-shadow: 0px 0px 15px -5px #b9b9b9;
}
#kids .lesson_block .lesson_block-contents .lesson_block-box {
width: 60%;
margin: 4vw 1.2vw;
}
@media (max-width: 500px) {
#kids .lesson_block .lesson_block-contents .lesson_block-box {
width: 100%;
margin: 6vw auto 12vw;
}
}
#schedule {
width: 100%;
}
#schedule .lesson_title {
width: clamp(600px, 60%, 1100px);
margin: 8vw auto;
}
#schedule .lesson_title .lesson_title-box {
display: flex;
align-items: center;
justify-content: center;
margin: auto;
}
#schedule .lesson_title .lesson_title-box .lesson_box-icon {
position: relative;
top: 0.2vw;
width: 2%;
}
#schedule .lesson_title .lesson_title-box .lesson_box-icon img {
width: 100%;
height: auto;
}
#schedule .lesson_title .lesson_title-box h2 {
font-size: clamp(10px, 2.2vw, 35px);
letter-spacing: 1px;
margin-left: 0.4vw;
margin: 2vw 0 2vw 0.4vw;
}
#schedule .lesson_title p {
font-size: clamp(6px, 1.2vw, 18px);
font-weight: 400;
line-height: clamp(10px, 2.5vw, 40px);
letter-spacing: 1px;
text-align: justify;
padding: 0 2vw;
margin: 1vw auto 3vw;
}
@media (max-width: 500px) {
#schedule .lesson_title {
width: 90%;
margin: 16vw auto;
}
#schedule .lesson_title .lesson_title-box {
margin-bottom: 4vw;
}
#schedule .lesson_title .lesson_title-box .lesson_box-icon {
width: 5%;
}
#schedule .lesson_title .lesson_title-box h2 {
font-size: 5vw;
letter-spacing: 1px;
margin: 2vw 0 2vw 1vw;
}
#schedule .lesson_title p {
font-size: 3.4vw;
line-height: 5.8vw;
padding: 0 4vw;
margin: 2vw auto 6vw;
}
}
#member {
width: 100%;
background-color: #F3E9D2;
padding: 4vw 0;
}
#member .lesson_title {
width: clamp(200px, 50%, 1100px);
margin: 4vw auto;
}
#member .lesson_title .lesson_title-box {
display: flex;
align-items: center;
justify-content: center;
margin: auto;
}
#member .lesson_title .lesson_title-box .lesson_box-icon {
position: relative;
top: 0.2vw;
width: 2%;
}
#member .lesson_title .lesson_title-box .lesson_box-icon img {
width: 100%;
height: auto;
}
#member .lesson_title .lesson_title-box h2 {
font-size: clamp(10px, 2.2vw, 35px);
letter-spacing: 1px;
margin-left: 0.4vw;
margin: 2vw 0 2vw 0.4vw;
}
#member .lesson_title p {
font-size: clamp(6px, 1.2vw, 18px);
font-weight: 400;
line-height: clamp(10px, 2.5vw, 40px);
letter-spacing: 1px;
text-align: justify;
padding: 0 2vw;
margin: 1vw auto 3vw;
}
#member .lesson_title ul {
padding-left: 0;
margin: 2vw auto;
font-size: clamp(6px, 1.2vw, 18px);
text-align: justify;
}
#member .lesson_title ul li {
line-height: clamp(10px, 2.5vw, 40px);
}
@media (max-width: 500px) {
#member .lesson_title {
width: 80%;
margin: 8vw auto;
}
#member .lesson_title .lesson_title-box {
display: flex;
align-items: center;
justify-content: center;
margin: auto;
}
#member .lesson_title .lesson_title-box .lesson_box-icon {
width: 5%;
}
#member .lesson_title .lesson_title-box h2 {
font-size: 5vw;
margin: 2vw 0 2vw 1vw;
}
#member .lesson_title ul {
margin: 4vw auto;
font-size: 4vw;
line-height: 10vw;
}
#member .lesson_title ul li {
line-height: 6vw;
}
}
#agreement_pages {
width: clamp(200px, 65%, 1000px);
margin: 4vw auto;
}
#agreement_pages h2 {
font-size: clamp(10px, 2vw, 36px);
border-bottom: 1px solid #323232;
padding-bottom: 0.2vw;
}
#agreement_pages p {
font-size: clamp(6px, 1.1vw, 18px);
line-height: clamp(10px, 1.7vw, 30px);
text-align: justify;
letter-spacing: 0.5px;
margin-bottom: 3vw;
padding: 1vw;
}
#agreement_pages li {
font-size: clamp(6px, 1.1vw, 18px);
line-height: clamp(10px, 1.8vw, 30px);
text-align: justify;
list-style: decimal;
}
#agreement_pages p.agreement_text {
padding: 0;
margin-top: 1.6vw;
}
#agreement_pages h3 {
font-size: clamp(8px, 1.4vw, 24px);
margin-top: 1vw;
}
@media (max-width: 500px) {
#agreement_pages {
width: 90%;
margin: 8vw auto;
}
#agreement_pages h2 {
font-size: 5vw;
padding-bottom: 0.4vw;
}
#agreement_pages p {
font-size: 3.4vw;
line-height: 6vw;
margin-bottom: 5vw;
padding: 2vw;
}
#agreement_pages li {
font-size: 3.6vw;
line-height: 6.2vw;
}
#agreement_pages p.agreement_text {
padding: 0;
margin-top: 3vw;
}
#agreement_pages h3 {
font-size: 4vw;
margin-top: 3vw;
}
}
#price_pages {
width: 100%;
margin: auto;
}
#price_pages .price_title {
width: clamp(200px, 50%, 1100px);
margin: 10vw auto 0;
}
#price_pages .price_title h2 {
font-size: clamp(6px, 2vw, 35px);
text-align: center;
border-top: 1px solid #323232;
border-bottom: 1px solid #323232;
padding: 1.5vw 0;
margin-bottom: 2vw;
}
#price_pages .price_title .price_text {
font-size: clamp(6px, 1.1vw, 18px);
line-height: clamp(10px, 1.7vw, 28px);
text-align: justify;
}
#price_pages .price_trial-box {
width: 100%;
padding: 6vw 0;
margin-top: 5vw;
background-color: #F3E9D2;
}
#price_pages .price_trial-box picture {
width: 50%;
margin: auto;
}
#price_pages .price_trial-box .trial_block-attention {
width: 50%;
margin: 1vw auto 0;
padding-left: 0;
}
#price_pages .price_trial-box .trial_block-attention li {
font-size: clamp(6px, 1.1vw, 18px);
line-height: clamp(10px, 1.7vw, 28px);
list-style: none;
margin: 0.5vw 0;
}
#price_pages .price_trial-box .cta_button {
width: 25%;
margin: 4vw auto;
}
#price_pages .monthly_box {
width: 50%;
margin: auto;
display: flex;
justify-content: space-evenly;
}
#price_pages .monthly_box img {
width: 45%;
margin: 3vw 2.5% 1vw;
}
#price_pages p.price_attention {
width: clamp(200px, 50%, 1000px);
margin: 0.5vw auto;
font-size: clamp(6px, 1.1vw, 18px);
line-height: clamp(10px, 1.7vw, 28px);
}
#price_pages .pricemenu {
width: clamp(200px, 50%, 1000px);
margin: 1vw auto;
font-size: clamp(6px, 1.2vw, 20px);
color: #222;
}
#price_pages .pricemenu_heading {
text-align: center;
font-weight: 700;
padding: clamp(5px, 1.3vw, 18px) 0;
border-top: 1px solid #aaa;
border-bottom: 1px solid #aaa;
margin-top: clamp(12px, 3vw, 40px);
margin-bottom: clamp(5px, 1.6vw, 20px);
}
#price_pages .pricemenu_list {
display: flex;
flex-direction: column;
gap: 8px;
}
#price_pages .pricemenu_item {
border: 1px solid #323232;
border-radius: 0.4vw;
}
#price_pages .pricemenu_item[open] .pricemenu_icon {
transform: rotate(45deg);
}
#price_pages .pricemenu_question {
list-style: none;
cursor: pointer;
padding: clamp(5px, 1.2vw, 16px) clamp(5px, 1.2vw, 18px);
display: flex;
justify-content: space-between;
align-items: center;
}
#price_pages .pricemenu_question::-webkit-details-marker {
display: none;
}
#price_pages .pricemenu_question-text {
font-size: clamp(5px, 1.5vw, 24px);
font-weight: 500;
letter-spacing: 0.7px;
}
#price_pages .pricemenu_icon {
width: 14px;
height: 14px;
position: relative;
flex-shrink: 0;
}
#price_pages .pricemenu_icon::before, #price_pages .pricemenu_icon::after {
content: "";
position: absolute;
background: #FD7E14;
}
#price_pages .pricemenu_icon::before {
width: 100%;
height: 1.7px;
top: 50%;
left: 0;
transform: translateY(-50%);
}
#price_pages .pricemenu_icon::after {
width: 1.7px;
height: 100%;
top: 0;
left: 50%;
transform: translateX(-50%);
}
#price_pages .pricemenu_answer {
text-align: justify;
background: #fff;
line-height: 1.7;
}
#price_pages .pricemenu_answer p {
font-size: clamp(5px, 1.2vw, 18px);
text-align: justify;
padding: 1vw 4.7vw 1vw 1.5vw;
margin: 0 0 8px;
}
#price_pages .pricemenu_answer-title {
font-size: clamp(5px, 1.2vw, 18px);
font-weight: 700;
margin-top: 12px;
}
#price_pages .pricemenu_note {
font-size: clamp(5px, 1vw, 14px);
color: #555;
}
#price_pages .price_campaign {
width: 100%;
padding: 8vw 0 0;
margin: 10vw auto 0;
background-color: #F3E9D2;
}
#price_pages .price_campaign h2 {
font-size: clamp(6px, 2vw, 35px);
letter-spacing: 0.8px;
text-align: center;
padding: 1.5vw 0;
margin-bottom: 2vw;
}
#price_pages .price_campaign-parts {
width: clamp(200px, 35%, 750px);
padding: 2vw 0;
margin: auto;
text-align: center;
border-bottom: 1px solid #323232;
}
#price_pages .price_campaign-parts h3 {
font-size: clamp(6px, 2vw, 35px);
}
#price_pages .price_campaign-parts p {
font-size: clamp(8px, 1.2vw, 20px);
}
#price_pages .price_campaign-title {
width: clamp(200px, 45%, 900px);
padding: 2vw 0 1vw;
margin: 5vw auto 0;
text-align: center;
}
#price_pages .price_campaign h3 {
font-size: clamp(6px, 2vw, 35px);
}
#price_pages .price_campaign p {
font-size: clamp(8px, 1.4vw, 22px);
padding-top: 0.6vw;
}
@media (max-width: 500px) {
#price_pages .price_title {
width: 90%;
margin: 16vw auto 0;
}
#price_pages .price_title h2 {
font-size: 6vw;
padding: 3vw 0;
margin-bottom: 4vw;
}
#price_pages .price_title .price_text {
font-size: 3.6vw;
line-height: 6vw;
}
#price_pages .price_trial-box {
padding: 12vw 0;
margin-top: 12vw;
}
#price_pages .price_trial-box picture {
width: 90%;
}
#price_pages .price_trial-box .trial_block-attention {
width: 80%;
margin: 3vw auto 0;
margin-left: 15%;
}
#price_pages .price_trial-box .trial_block-attention li {
font-size: 3.3vw;
line-height: 5.8vw;
}
#price_pages .price_trial-box .cta_button {
width: 65%;
margin: 10vw auto;
}
#price_pages .monthly_box {
width: 90%;
flex-direction: column;
justify-content: center;
}
#price_pages .monthly_box img {
width: 95%;
margin: 5vw auto;
}
#price_pages p.price_attention {
width: 90%;
margin: 1vw auto;
font-size: 3.3vw;
line-height: 5.8vw;
}
#price_pages .pricemenu {
width: 90%;
margin: 3vw auto;
}
#price_pages .pricemenu_list {
gap: 12px;
}
#price_pages .pricemenu_question {
padding: 4vw;
}
#price_pages .pricemenu_question-text {
font-size: 4vw;
padding-right: 2vw;
}
#price_pages .pricemenu_answer p {
font-size: 3.6vw;
padding: 2vw 10vw 2vw 3vw;
}
#price_pages .price_campaign {
padding: 16vw 0 8vw;
margin: 16vw auto 0;
}
#price_pages .price_campaign h2 {
font-size: 6vw;
padding: 3vw 0;
margin-bottom: 4vw;
}
#price_pages .price_campaign-parts {
width: 80%;
padding: 2vw 0;
}
#price_pages .price_campaign-title {
width: 75%;
padding: 2vw 0 1vw;
margin: 5vw auto 0;
text-align: center;
}
#price_pages .price_campaign h3 {
font-size: 5vw;
}
#price_pages .price_campaign p {
font-size: 4vw;
}
}
#trial_pages .trial_title {
width: clamp(600px, 70%, 1200px);
margin: 8vw auto 4vw;
}
#trial_pages .trial_title-box {
display: flex;
align-items: center;
justify-content: center;
margin: auto;
}
#trial_pages .trial_title-box .trial_box-icon {
position: relative;
top: 0.2vw;
width: 2%;
}
#trial_pages .trial_title-box .trial_box-icon img {
width: 100%;
height: auto;
}
#trial_pages .trial_title-box h2 {
font-size: clamp(10px, 2.2vw, 35px);
letter-spacing: 1px;
margin-left: 0.4vw;
}
#trial_pages .trial_title-text {
text-align: center;
margin: 3vw auto 0;
}
#trial_pages .trial_title p {
font-size: clamp(6px, 1.2vw, 18px);
font-weight: 500;
line-height: clamp(10px, 2.5vw, 40px);
letter-spacing: 1px;
}
#trial_pages .trial_title a {
font-size: clamp(6px, 1.2vw, 18px);
font-weight: 500;
text-align: center;
color: #06C755;
}
#trial_pages .trial_box {
width: clamp(600px, 50%, 800px);
padding: 3vw;
margin: 4vw auto;
background-color: #F3E9D2;
}
#trial_pages .trial_box p {
font-size: clamp(6px, 1.6vw, 26px);
font-weight: 700;
line-height: clamp(10px, 2.8vw, 40px);
color: #FD7E14;
text-align: center;
}
@media (max-width: 500px) {
#trial_pages .trial_title {
width: 90%;
margin: 16vw auto 10vw;
text-align: justify;
}
#trial_pages .trial_title-box {
justify-content: left;
}
#trial_pages .trial_title-box .trial_box-icon {
top: 0.45vw;
width: 4%;
}
#trial_pages .trial_title-box h2 {
font-size: 6vw;
margin-left: 1vw;
}
#trial_pages .trial_title-text {
text-align: justify;
margin: 2vw auto 0;
}
#trial_pages .trial_title p {
font-size: 3.6vw;
line-height: 6vw;
text-align: justify;
}
#trial_pages .trial_title a {
font-size: 3.6vw;
}
#trial_pages .trial_box {
width: 80%;
padding: 7vw;
margin: 4vw auto;
}
#trial_pages .trial_box p {
font-size: 4vw;
line-height: 8vw;
}
}
#form {
width: clamp(600px, 50%, 800px);
position: relative;
padding: 2.5vw 0;
margin: auto;
z-index: 100;
}
#form .form_table {
position: relative;
top: 0vw;
width: 92%;
padding-bottom: 2vw;
margin: 0 auto;
background: rgba(255, 255, 255, 0.9);
border-radius: 1.7vw;
}
#form .form_table img.flow_text {
width: 70%;
margin: 2vw auto 4vw;
}
#form #formWrap {
margin: 0 auto;
color: #555;
line-height: 120%;
font-size: 90%;
}
#form #formWrap table.formTable {
width: 100%;
margin: 0 auto;
border-collapse: collapse;
}
#form #formWrap table.formTable tr {
display: flex;
flex-direction: column;
}
#form #formWrap table.formTable tr td, #form #formWrap table.formTable tr th {
font-size: clamp(6px, 1.3vw, 22px);
font-weight: 500;
padding: 1vw 2vw;
}
#form #formWrap table.formTable tr td span, #form #formWrap table.formTable tr th span {
font-size: 0.9vw;
line-height: 1;
padding: 0.2vw 0.6vw;
margin-left: 1vw;
color: #fff;
border-radius: 0.2vw;
background-color: #FD7E14;
}
#form #formWrap table.formTable tr td {
width: 90%;
padding: 1vw 0.5vw;
margin: auto;
background-color: #fff;
font-size: clamp(6px, 1.3vw, 22px);
}
#form #formWrap table.formTable tr td .select_box,
#form #formWrap table.formTable tr td .select_type {
display: flex;
align-items: center;
justify-content: space-between;
font-size: clamp(6px, 1.3vw, 22px);
font-weight: 500;
margin-bottom: 1vw;
}
#form #formWrap table.formTable tr td .select_box #date-picker,
#form #formWrap table.formTable tr td .select_box #inquiryType,
#form #formWrap table.formTable tr td .select_type #date-picker,
#form #formWrap table.formTable tr td .select_type #inquiryType {
width: 70%;
height: 4vw;
color: #323232;
border-radius: 0px;
padding: 0.5vw;
padding-left: 2vw;
}
#form #formWrap table.formTable tr td .select_box .select_box p,
#form #formWrap table.formTable tr td .select_box .select_type p,
#form #formWrap table.formTable tr td .select_type .select_box p,
#form #formWrap table.formTable tr td .select_type .select_type p {
padding: 0.5vw 0;
line-height: 20px;
}
#form #formWrap table.formTable tr td #name, #form #formWrap table.formTable tr td #furigana, #form #formWrap table.formTable tr td #age, #form #formWrap table.formTable tr td #phone, #form #formWrap table.formTable tr td #email {
width: 100%;
height: 3vw;
padding: 0.3vw 0;
margin: 0.3vw auto;
}
#form th {
width: 90%;
margin: 0 auto;
font-weight: normal;
background: #eeeeee;
text-align: left;
}
#form .day_select {
width: 100%;
height: 3vw;
padding: 0.3vw 0;
margin-top: 0.6vw;
color: #323232;
border-radius: 0px;
}
#form .question {
width: 100%;
}
#form .btn_form {
width: 100%;
margin: 2vw auto 1vw;
text-align: center;
}
#form .submit_btn {
width: 65%;
font-size: 1.6vw;
font-weight: 600;
font-family: sans-serif;
letter-spacing: 2px;
padding: 2vw 2vw;
background-color: #ff8000;
color: #fff;
border-radius: 30vw;
border: 1px solid #323232;
box-shadow: 1.5px 3px 1px 0px rgb(0, 0, 0);
}
#form .submit_btn:hover {
transition: 0.3s;
opacity: 0.7;
}
@media (max-width: 500px) {
#form {
width: 90%;
}
#form .form_table {
width: 100%;
padding-bottom: 4vw;
}
#form .form_table img.flow_text {
width: 85%;
margin: 3vw auto 8vw;
}
#form #formWrap table.formTable {
width: 100%;
margin: 0 auto;
border-collapse: collapse;
}
#form #formWrap table.formTable tr td, #form #formWrap table.formTable tr th {
width: 100%;
font-size: 4.5vw;
padding: 3vw 5vw;
}
#form #formWrap table.formTable tr td span, #form #formWrap table.formTable tr th span {
position: relative;
top: -0.2vw;
font-size: 2.5vw;
line-height: 2;
padding: 0.5vw 2vw;
margin-left: 3vw;
border-radius: 0.8vw;
}
#form #formWrap table.formTable tr td {
width: 100%;
padding: 2vw 1vw;
font-size: 4vw;
}
#form #formWrap table.formTable tr td .select_box,
#form #formWrap table.formTable tr td .select_type {
font-size: 4vw;
margin-bottom: 2vw;
}
#form #formWrap table.formTable tr td .select_box #date-picker,
#form #formWrap table.formTable tr td .select_box #inquiryType,
#form #formWrap table.formTable tr td .select_type #date-picker,
#form #formWrap table.formTable tr td .select_type #inquiryType {
height: 10vw;
padding: 1vw;
padding-left: 4vw;
}
#form #formWrap table.formTable tr td .select_box .select_box p,
#form #formWrap table.formTable tr td .select_box .select_type p,
#form #formWrap table.formTable tr td .select_type .select_box p,
#form #formWrap table.formTable tr td .select_type .select_type p {
padding: 2vw 0;
line-height: 30px;
}
#form #formWrap table.formTable tr td #name, #form #formWrap table.formTable tr td #furigana, #form #formWrap table.formTable tr td #age, #form #formWrap table.formTable tr td #phone, #form #formWrap table.formTable tr td #email {
height: 10vw;
padding: 0.3vw 0;
margin: 0.3vw auto;
}
#form th {
width: 100%;
}
#form .day_select {
height: 10vw;
padding: 1vw 0;
margin: 2vw 0;
}
#form .question {
width: 100%;
}
#form .btn_form {
width: 100%;
margin: 8vw auto 16vw;
}
#form .submit_btn {
width: 80%;
font-size: 5vw;
padding: 6vw 2vw;
}
}
#contact_pages {
width: clamp(200px, 65%, 1000px);
margin: 3vw auto 4vw; }
#contact_pages p {
font-size: clamp(6px, 1.2vw, 20px);
line-height: clamp(10px, 2.1vw, 34px);
text-align: center;
padding: 0 1vw;
margin: 3vw auto;
}
#contact_pages .wpcf7 form {
width: 100%;
margin: 6vw auto 8vw;
padding: 2em;
background: #F3E9D2;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
#contact_pages .wpcf7 form label {
display: block;
margin-bottom: 1.5em;
font-weight: 500;
font-size: 1.3vw;
color: #323232;
}
#contact_pages .wpcf7 input[type=text],
#contact_pages .wpcf7 input[type=email],
#contact_pages .wpcf7 input[type=tel],
#contact_pages .wpcf7 textarea {
width: 100%;
padding: 0.8em 1em;
font-size: 1rem;
border: 1px solid #ccc;
border-radius: 6px;
background: #fff;
transition: border-color 0.3s, box-shadow 0.3s;
}
#contact_pages .wpcf7 textarea {
resize: vertical;
min-height: 150px;
}
#contact_pages .wpcf7 input:focus,
#contact_pages .wpcf7 textarea:focus {
outline: none;
border-color: #fd7e14;
box-shadow: 0 0 5px rgba(0, 115, 170, 0.3);
}
#contact_pages .wpcf7 input[type=submit] {
width: 50%;
display: inline-block;
background: #fd7e14;
color: #fff;
font-size: 1rem;
padding: 0.8em 2em;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background 0.3s;
}
#contact_pages .wpcf7 input[type=submit]:hover {
background: #005f8d;
}
#contact_pages .wpcf7-response-output {
margin-top: 1em;
padding: 1em;
border-radius: 5px;
}
#contact_pages .wpcf7-mail-sent-ok {
background: #e0f9e0;
border: 1px solid #5cb85c;
}
#contact_pages .wpcf7-validation-errors {
background: #ffecec;
border: 1px solid #e53935;
}
@media (max-width: 500px) {
#contact_pages {
width: 90%;
margin: 6vw auto 8vw;
}
#contact_pages p {
font-size: 4vw;
line-height: 7.5vw;
text-align: justify;
margin: 16vw auto;
}
#contact_pages .wpcf7 form {
width: 100%;
margin: 16vw auto 24vw;
padding: 1em;
border-radius: 0;
}
#contact_pages .wpcf7 form label {
font-size: 4vw;
}
#contact_pages .wpcf7 input[type=submit] {
width: 100%;
}
}
#thanks_pages {
width: clamp(200px, 50%, 1000px);
margin: 6vw auto;
}
#thanks_pages h1 {
font-size: clamp(6px, 2vw, 35px);
line-height: clamp(12px, 3vw, 58px);
text-align: center;
}
#thanks_pages p {
font-size: clamp(6px, 1.2vw, 20px);
line-height: clamp(10px, 1.7vw, 28px);
text-align: center;
margin: 2.5vw auto;
}
#thanks_pages p span {
color: #FD7E14;
}
#thanks_pages .components_textbox-viewmore {
text-align: center;
margin: auto;
}
@media (max-width: 500px) {
#thanks_pages {
width: 80%;
margin: 16vw auto;
}
#thanks_pages h1 {
font-size: 6vw;
line-height: 8vw;
}
#thanks_pages p {
font-size: 4vw;
line-height: 6.5vw;
text-align: justify;
margin: 10vw auto 16vw;
}
#thanks_pages .components_textbox-viewmore {
width: 100%;
font-size: 4.5vw;
}
}
.c-breadcrumbs {
width: 90%;
display: flex;
flex-wrap: wrap;
font-size: 0.875rem;
color: #6C6C6C;
line-height: 2;
padding-left: 0;
margin: auto;
}
.c-breadcrumbs > li {
display: inline-block;
position: relative;
}
.c-breadcrumbs > li a {
color: #323232;
text-decoration: none;
}
.c-breadcrumbs > li:not(:last-of-type)::after {
content: ">";
display: inline-block;
margin-right: 0.5em;
margin-left: 0.5em;
}
.home-news {
width: clamp(200px, 50%, 800px);
padding: 0 0 8vw;
margin: 0 auto;
position: relative;
}
.home-news::before {
content: "";
width: 100%;
height: calc(100% - 18px);
background-color: #FFFFFF;
position: absolute;
bottom: 0;
right: 0;
z-index: -1;
}
.home-news-title {
margin-top: 3vw;
margin-bottom: 1.312em;
font-size: clamp(12px, 2vw, 30px);
font-weight: 500;
color: #231815;
text-align: center;
line-height: 1.4;
letter-spacing: 0.05em;
text-indent: 0.05em;
text-transform: uppercase;
}
ul {
padding-left: 2vw;
}
ul .news-list {
padding-left: 0;
}
@media (max-width: 500px) {
ul .news-list {
padding-left: 4vw;
}
}
ul.news-list {
padding-left: 0;
}
li.list_box {
margin-bottom: 1vw;
border-bottom: 1px solid #323232;
}
@media (max-width: 500px) {
li.list_box {
margin-bottom: 6vw;
}
}
ul.news-list li a {
display: flex;
text-decoration: none;
}
.home-news .news-list .thumbnail {
width: 16%;
margin-right: 7.422%;
}
.home-news > p {
min-height: 400px;
text-align: center;
}
.box-white {
padding: 60px 6.551% 92px;
margin-top: 3vw;
margin-bottom: 12vw;
background-color: #FFFFFF;
border-radius: 3vw;
}
@media (max-width: 500px) {
.box-white {
border-radius: 0;
}
}
.box-white.is-page404 {
padding-top: 56px;
padding-bottom: 56px;
}
.text {
font-size: 1vw;
}
.cat-list {
padding-left: 0;
font-size: 0.8125rem;
color: #555555;
}
li {
margin: 1vw 0;
list-style: none;
}
li a {
color: #323232;
}
.list_box {
width: 80%;
padding-bottom: 2vw;
border-bottom: 1px solid #323232;
}
@media (max-width: 500px) {
.list_box {
width: 100%;
}
}
.home-news .cat-list > li {
position: relative;
top: 4vw;
min-width: 5vw;
padding: 5px;
margin-bottom: 0.5em;
background-color: #f1f1f1;
color: #424242;
border-radius: 5px;
text-align: center;
line-height: 1;
}
.cat-list > li:not(:last-of-type) {
margin-right: 0.923em;
}
time.date {
font-size: 1.1vw;
}
@media (max-width: 500px) {
time.date {
font-size: 3vw;
}
}
.content-title, .page-title {
font-size: 1.5rem;
font-weight: 500;
letter-spacing: 0.45em;
position: relative;
}
.content-title::before, .page-title::before {
content: attr(data-title);
display: block;
margin-bottom: 0.281em;
font-family: "Marcellus", serif;
color: #323232;
line-height: 0.8;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.page-title {
padding-top: 4vw;
margin-bottom: 6vw;
text-align: center;
}
p.title {
font-size: clamp(6px, 1.3vw, 24px);
font-weight: 500;
}
@media (max-width: 500px) {
p.title {
font-size: 3.8vw;
}
}
.page-title::before {
font-size: 2.8125rem;
}
.news-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}
@media (max-width: 500px) {
.news-wrapper {
flex-direction: column;
}
}
.news-wrapper .box-white {
padding: 26px 7.282% 50px;
}
.news-wrapper .main-content {
width: 61.551%;
margin-left: 3%;
}
@media (max-width: 500px) {
.news-wrapper .main-content {
width: 100%;
margin-left: 0;
}
}
.news-wrapper .sidebar {
width: 32.931%;
}
@media (max-width: 500px) {
.news-wrapper .sidebar {
width: 100%;
}
}
.news-title {
width: 90%;
margin: auto;
font-family: "Marcellus", serif;
font-size: 1.25rem;
font-weight: 400;
line-height: 2.25;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.post-header .cat-list {
font-size: 0.875rem;
}
.wp-pagenavi {
display: flex;
justify-content: flex-end;
margin-top: 42px;
}
.wp-pagenavi span, .wp-pagenavi a {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
border: 1px solid #444444;
font-size: 0.9375rem;
font-weight: 500;
transition: 0.3s ease-in;
}
.wp-pagenavi span:not(:last-child), .wp-pagenavi a:not(:last-child) {
margin-right: 2.622%;
}
.wp-pagenavi span:hover, .wp-pagenavi a:hover {
background-color: #FD7E14;
color: #FFFFFF;
}
.wp-pagenavi span.current {
background-color: #FD7E14;
color: #FFFFFF;
}
.wp-pagenavi a {
color: #666666;
}
.wp-pagenavi a.nextpostslink, .wp-pagenavi a.previouspostslink {
width: auto;
padding: 5px 1.2em;
}
.sidebar .box-white {
padding-right: 8.376%;
padding-left: 8.376%;
}
.sidebar .item {
padding: 0 3.773%;
padding-bottom: 36px;
}
.sidebar .item:not(:last-of-type) {
border-bottom: 1px solid #BABABA;
margin-bottom: 42px;
}
.sidebar-list {
padding: 0 7.718%;
font-weight: 500;
color: #555555;
}
.sidebar-list a {
color: #323232;
text-decoration: none;
display: inline-block;
padding-right: 1em;
line-height: 2.562;
}
.sidebar-list a ::before {
content: "-";
display: inline-block;
margin-right: 0.5em;
}
.post .box-white {
padding-right: 5.882%;
padding-left: 5.882%;
background-color: #F3E9D2;
}
@media (max-width: 500px) {
.post .box-white {
padding: 12vw 6vw 20vw;
margin: 16vw 0;
}
}
.post-header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin-bottom: 2px;
font-size: 0.875rem;
color: #555555;
}
.post-header time {
margin-bottom: 0.5em;
}
h1.post-title {
margin-bottom: 4vw;
}
@media (max-width: 500px) {
h1.post-title {
margin-bottom: 12vw;
}
}
.post-wrapper {
line-height: 1.75;
letter-spacing: 0.11em;
}
.post-wrapper .post-wrapper > * {
margin-bottom: 36px;
}
.post-wrapper h2 {
padding: 0.5vw 1.5vw;
margin: 3vw 0 1.5vw;
border-left: 3px solid #323232;
background-color: #F3E9D2;
font-size: 1.5rem;
font-weight: bold;
line-height: 1.5;
}
.post-wrapper h3 {
padding: 0.3vw 0;
margin-top: 3vw;
font-size: 1.375rem;
font-weight: bold;
line-height: 1.5;
}
.post-wrapper p {
font-size: clamp(6px, 1.2vw, 20px);
line-height: clamp(10px, 2.3vw, 38px);
text-align: justify;
letter-spacing: 0.5px;
}
@media (max-width: 500px) {
.post-wrapper p {
font-size: 3.5vw;
line-height: 7vw;
}
}
.post-wrapper .wp-block-image :where(figcaption) {
font-size: clamp(6px, 1.1vw, 18px);
}
@media (max-width: 500px) {
.post-wrapper h2 {
padding: 1.5vw 1.5vw 1.5vw 4vw;
margin: 10vw 0 3vw;
font-size: 5.5vw;
line-height: 9vw;
}
.post-wrapper h3 {
font-size: 4.5vw;
line-height: 8vw;
margin-top: 8vw;
}
.post-wrapper p {
font-size: 4vw;
line-height: 7.5vw;
}
.post-wrapper .wp-block-image :where(figcaption) {
font-size: 3.8vw;
}
}
.post-wrapper .images-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.post-wrapper .images-wrapper.col2 {
margin-bottom: 0;
}
.post-wrapper .images-wrapper.col2 > a {
width: 47.46%;
margin-bottom: 36px;
}
.post .eyecatch {
height: 0;
padding-top: 59.841%;
position: relative;
overflow: hidden;
}
.post .eyecatch img {
width: 100%;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.lb-outerContainer {
background-color: transparent;
}
.lightbox .lb-image {
border: none;
}
.page-nav {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 10px 10px;
margin-top: 28px;
border-top: 1px dashed #666666;
border-bottom: 1px dashed #666666;
font-size: 0.875rem;
font-weight: 500;
color: #666666;
}
.page-nav li {
min-width: 5em;
}
.page-nav a {
color: #FD7E14;
text-decoration: none;
display: inline-block;
min-width: 5em;
padding: 5px 14px;
position: relative;
}
.page-nav .to-archive {
font-weight: bold;
color: #323232;
text-decoration: none;
}
.box-white_achive {
padding: 26px 7.282% 50px;
}
#notfound_page {
width: 100%;
margin: 6vw auto;
}
#notfound_page .notfound {
position: relative;
top: -4vw;
width: 100%;
padding: 4vw 0 2vw;
margin: auto;
text-align: center;
letter-spacing: 1px;
}
#notfound_page .notfound strong {
font-size: clamp(10px, 3.5vw, 48px);
font-weight: 500;
}
#notfound_page .notfound h1 {
width: 34%;
font-size: clamp(10px, 1.7vw, 28px);
color: #FD7E14;
font-weight: 600;
border-top: 1.5px solid #323232;
margin: 1vw auto;
padding-top: 1vw;
}
#notfound_page .not_text {
width: clamp(200px, 50%, 1000px);
font-size: clamp(6px, 1.2vw, 20px);
line-height: clamp(10px, 1.8vw, 28px);
text-align: center;
margin: 0 auto;
}
#notfound_page .components_textbox-viewmore {
margin: 3vw auto;
text-align: center;
}
@media (max-width: 500px) {
#notfound_page {
width: 90%;
margin: 12vw auto;
}
#notfound_page .notfound {
padding: 4vw 0 2vw;
}
#notfound_page .notfound strong {
font-size: 8vw;
}
#notfound_page .notfound h1 {
width: 80%;
font-size: 4vw;
margin: 2vw auto;
padding-top: 2vw;
}
#notfound_page .not_text {
width: 80%;
font-size: 3.4vw;
line-height: 6.2vw;
text-align: justify;
}
#notfound_page .components_textbox-viewmore {
margin: 12vw auto;
text-align: center;
}
} .components_textbox-viewmore {
width: clamp(6px, 50%, 300px); }
.components_textbox-viewmore a {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: clamp(6px, 1vw, 18px) clamp(6px, 2vw, 28px);
background-color: #fff;
border: clamp(0.6px, 1vw, 2px) solid #FD7E14;
border-radius: 9999px;
color: #FD7E14;
text-decoration: none;
font-weight: 600;
letter-spacing: 0.12em;
transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; }
.components_textbox-viewmore a:hover {
background-color: #FD7E14;
color: #fff;
box-shadow: 0 8px 20px rgba(253, 126, 20, 0.35);
transform: translateY(-2px);
}
.components_textbox-viewmore .btn-viewmore__text {
font-size: clamp(6px, 1vw, 14px);
white-space: nowrap;
}
.components_textbox-viewmore .btn-viewmore__icon {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: clamp(8px, 1.4vw, 18px);
line-height: 1;
transition: transform 0.3s ease;
}
.components_textbox-viewmore a:hover .btn-viewmore__icon {
transform: translateX(4px);
}
@media (max-width: 500px) {
.components_textbox-viewmore {
width: 70%;
}
.components_textbox-viewmore a {
gap: 16px;
padding: 3vw 6vw;
}
.components_textbox-viewmore .btn-viewmore__text {
font-size: 3.8vw;
}
.components_textbox-viewmore .btn-viewmore__icon {
font-size: 4.2vw;
}
}
#flow_components {
width: 100%;
}
#flow_components .flow_block,
#flow_components .flow_box {
width: clamp(500px, 70%, 1200px);
margin: 0 auto;
}
#flow_components .flow_block strong,
#flow_components .flow_box strong {
font-size: clamp(6px, 4vw, 40px);
font-weight: 700;
letter-spacing: 2px;
}
#flow_components .flow_block h2,
#flow_components .flow_box h2 {
font-size: clamp(6px, 1.6vw, 28px);
font-weight: 600;
margin-top: -0.8vw;
}
#flow_components .flow_block h2::before,
#flow_components .flow_box h2::before {
content: "ー";
font-size: clamp(6px, 1.6vw, 28px);
font-weight: 400;
color: #d9b57a;
padding-right: 0.2vw;
}
#flow_components .flow_block p,
#flow_components .flow_box p {
font-size: clamp(6px, 1.1vw, 14px);
font-weight: 500;
margin: 2vw 0;
}
#flow_components .flow_block p span,
#flow_components .flow_box p span {
color: #FD7E14;
}
#flow_components .flow_block .slider2,
#flow_components .flow_box .slider2 {
text-align: center;
overflow: hidden;
}
#flow_components .flow_block .slides1,
#flow_components .flow_box .slides1 {
display: block;
justify-content: center;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
#flow_components .flow_block .slides2,
#flow_components .flow_box .slides2 {
display: flex;
justify-content: center;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
#flow_components .flow_block .slides2 img,
#flow_components .flow_box .slides2 img {
width: 100%;
height: auto;
}
#flow_components .flow_block .slides2 p,
#flow_components .flow_box .slides2 p {
font-size: 1vw;
line-height: 1.8vw;
margin: 1vw 0;
}
#flow_components .flow_block .slides2::-webkit-scrollbar,
#flow_components .flow_box .slides2::-webkit-scrollbar {
width: 10px;
height: 10px;
}
#flow_components .flow_block .slides2::-webkit-scrollbar-thumb,
#flow_components .flow_box .slides2::-webkit-scrollbar-thumb {
display: none;
}
#flow_components .flow_block .slides2::-webkit-scrollbar-track,
#flow_components .flow_box .slides2::-webkit-scrollbar-track {
background: transparent;
}
#flow_components .flow_block .slides2 > div,
#flow_components .flow_box .slides2 > div {
scroll-snap-align: start;
flex-shrink: 0;
width: 25%;
height: 100%;
margin-top: 2vw;
margin: 2vw 0;
transform-origin: center center;
transform: scale(1);
transition: transform 0.5s;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#flow_components .flow_back {
position: relative;
top: -17vw;
width: 100%;
height: 8vw;
background-color: #F3E9D2;
z-index: -1;
}
#flow_components .cta_button {
width: clamp(100px, 20%, 350px);
margin: -8vw auto 3vw;
transition: 0.3s;
}
#flow_components .cta_button:hover {
opacity: 0.7;
}
@media (max-width: 500px) {
#flow_components {
width: 100%;
background-color: #F3E9D2;
padding: 16vw 0;
}
#flow_components .flow_block {
width: 90%;
margin: 0 auto;
}
#flow_components .flow_block strong {
font-size: 10vw;
letter-spacing: -0.5px;
}
#flow_components .flow_block h2 {
font-size: 4.8vw;
margin-top: -2vw;
}
#flow_components .flow_block h2::before {
font-size: 4.5vw;
}
#flow_components .flow_block p {
font-size: 3.6vw;
text-align: justify;
margin: 6vw 0;
}
#flow_components .flow_block p span {
color: #FD7E14;
}
#flow_components .flow_box {
width: 96%;
margin-left: 4%;
}
#flow_components .flow_box .slides2 {
justify-content: left;
margin: 0 auto;
padding: 0;
}
#flow_components .flow_box .slides2 img {
border-radius: 3vw;
}
#flow_components .flow_box .slides2 p {
font-size: 3.6vw;
line-height: 6.8vw;
margin: 2vw 1.5vw;
}
#flow_components .flow_box .slides2::-webkit-scrollbar {
width: 10px;
height: 10px;
}
#flow_components .flow_box .slides2 > div {
scroll-snap-align: start;
flex-shrink: 0;
width: 85%;
margin: 0;
padding: 0 2vw;
border-radius: 4vw;
font-size: 14px;
}
#flow_components .flow_back {
position: relative;
top: -70vw;
height: 30vw;
}
#flow_components .cta_button {
width: 70%;
margin-top: -24vw;
}
}
#lower_mv-components {
width: 100%;
margin: 2vw auto;
}
#lower_mv-components .lower_mv-block {
width: clamp(600px, 50%, 800px);
margin: auto;
}
#lower_mv-components .lower_mv-box {
position: relative;
top: -4vw;
width: clamp(200px, 40%, 550px);
padding: 2vw;
margin: auto;
border-radius: 2vw;
background-image: linear-gradient(90deg, rgb(245, 110, 42), rgb(255, 145, 40));
color: #fff;
text-align: center;
letter-spacing: 1px;
}
#lower_mv-components .lower_mv-box strong {
font-size: clamp(6px, 1.6vw, 24px);
font-weight: 400;
padding-bottom: 0.3vw;
}
#lower_mv-components .lower_mv-box h1 {
width: 65%;
font-size: clamp(10px, 2.5vw, 35px);
font-weight: 600;
border-top: 1px solid #fff;
margin: 0 auto;
}
#lower_mv-components .lower_mv-privacybox {
position: relative;
top: -4vw;
width: clamp(200px, 45%, 550px);
padding: 3vw 2vw;
margin: auto;
border-radius: 2vw;
background-image: linear-gradient(90deg, rgb(245, 110, 42), rgb(255, 145, 40));
color: #fff;
text-align: center;
letter-spacing: 1px;
}
#lower_mv-components .lower_mv-privacybox strong {
font-size: clamp(6px, 1.6vw, 24px);
font-weight: 400;
padding-bottom: 0.3vw;
}
#lower_mv-components .lower_mv-privacybox h1 {
width: 70%;
font-size: clamp(10px, 2.5vw, 35px);
font-weight: 600;
border-top: 1px solid #fff;
margin: 0 auto;
}
@media (max-width: 500px) {
#lower_mv-components {
width: 100%;
margin: 4vw auto;
}
#lower_mv-components .lower_mv-block {
position: relative;
left: 6%;
width: 94%;
margin: 0;
}
#lower_mv-components .lower_mv-block img {
width: 100%;
}
#lower_mv-components .lower_mv-box {
top: -10vw;
width: 70%;
padding: 5vw;
margin: 0;
border-radius: 0 4vw 4vw 0;
text-align: justify;
}
#lower_mv-components .lower_mv-box strong {
font-size: 3.6vw;
margin-left: 2.3vw;
}
#lower_mv-components .lower_mv-box h1 {
width: 100%;
font-size: 6vw;
border-top: none;
margin-left: 2vw;
}
#lower_mv-components .lower_mv-privacybox {
top: -10vw;
width: 70%;
padding: 5vw;
margin: 0;
border-radius: 0 4vw 4vw 0;
text-align: justify;
}
#lower_mv-components .lower_mv-privacybox strong {
font-size: 3.6vw;
margin-left: 2.3vw;
}
#lower_mv-components .lower_mv-privacybox h1 {
width: 100%;
font-size: 5.2vw;
border-top: none;
margin-left: 2vw;
}
}
#flow_components.flow_fullback {
padding: 6vw 0;
background-color: #F3E9D2;
}
#flow_components.flow_fullback .cta_button {
margin: 0 auto 3vw;
}
@media (max-width: 500px) {
#flow_components.flow_fullback {
padding: 12vw 0;
}
#flow_components.flow_fullback .cta_button {
margin: 6vw auto;
}
}
#trial_components {
position: relative;
width: 100%;
background-color: #F3E9D2;
z-index: 101;
}
#trial_components .trial_box {
width: clamp(500px, 70%, 1200px);
display: flex;
margin: 0 auto;
padding: 8vw 0 0;
}
#trial_components .trial_box .trial_box-text {
width: 45%;
padding-right: 5%;
margin: 0.5vw auto;
text-align: center;
}
#trial_components .trial_box .trial_box-text strong {
font-size: clamp(6px, 4vw, 40px);
font-weight: 700;
text-align: center;
letter-spacing: 2px;
}
#trial_components .trial_box .trial_box-text h2 {
font-size: clamp(6px, 1.3vw, 20px);
font-weight: 500;
text-align: center;
}
#trial_components .trial_box .trial_box-text .trial_box-cta {
width: 70%;
margin: 2vw auto;
transition: 0.3s;
}
#trial_components .trial_box .trial_box-text .trial_box-cta:hover {
opacity: 0.6;
}
#trial_components .trial_box .trial_box-image {
width: 50%;
}
#trial_components .trial_box .trial_box-image img {
width: 100%;
height: auto;
}
@media (max-width: 500px) {
#trial_components .trial_box {
width: 94%;
flex-direction: column;
padding: 16vw 0 0;
}
#trial_components .trial_box .trial_box-text {
width: 100%;
padding-right: 0%;
}
#trial_components .trial_box .trial_box-text strong {
font-size: 10vw;
letter-spacing: 0;
}
#trial_components .trial_box .trial_box-text h2 {
font-size: 3.8vw;
}
#trial_components .trial_box .trial_box-text .trial_box-cta {
margin: 6vw auto;
transition: 0.3s;
}
#trial_components .trial_box .trial_box-image {
display: none;
}
}
#contents_components {
width: 100%;
padding: 6vw 0;
}
#contents_components h2 {
font-size: clamp(10px, 3.5vw, 40px);
font-weight: 600;
text-align: center;
margin-bottom: 2vw;
}
#contents_components .contents_block {
width: clamp(500px, 80%, 1200px);
display: flex;
justify-content: center;
align-items: end;
margin: 0 auto;
}
#contents_components .contents_block .contents_block-parts {
width: 33%;
margin: 0 1vw;
}
#contents_components .contents_block .contents_block-parts img {
width: 100%;
height: auto;
}
#contents_components .contents_block .contents_block-lastparts {
width: 33%;
margin: 0 1vw;
}
#contents_components .contents_block .contents_block-lastparts img {
width: 100%;
height: auto;
}
@media (max-width: 500px) {
#contents_components {
padding: 16vw 0;
}
#contents_components h2 {
font-size: 7vw;
margin-bottom: 4vw;
}
#contents_components .contents_block {
width: 90%;
flex-direction: column;
align-items: center;
margin: 0 auto;
}
#contents_components .contents_block .contents_block-parts {
width: 100%;
margin: 3vw auto;
}
#contents_components .contents_block .contents_block-parts img {
width: 100%;
height: auto;
}
#contents_components .contents_block .contents_block-lastparts {
width: 100%;
margin: 7vw auto 3vw;
}
#contents_components .contents_block .contents_block-lastparts img {
width: 100%;
height: auto;
}
}
#campaign_component {
width: 100%;
padding-bottom: 6vw;
margin: 0 auto;
background-color: #F3E9D2;
}
#campaign_component .price_contents {
width: clamp(200px, 50%, 1000px);
padding: 2vw 0 1vw;
margin: auto;
}
#campaign_component .price_contents__tabs {
display: flex;
justify-content: center;
margin: 3vw auto 0;
gap: 6px;
}
#campaign_component .price_contents__tab {
position: relative;
border: 0;
padding: 10px 14px;
cursor: pointer;
font-weight: 700;
color: #FD7E14;
border: 1px solid #FD7E14;
background: #F3E9D2;
}
#campaign_component .price_contents__tab.is-active {
width: 30%;
padding: 1vw;
background: #FD7E14;
color: #fff;
}
#campaign_component .price_contents__tab.is-active::after {
content: "";
position: absolute;
left: 50%;
bottom: -12px;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-top: 12px solid #FD7E14;
}
#campaign_component .price_contents__images {
margin-top: 3vw;
}
#campaign_component .price_contents__img {
display: none;
width: 100%;
height: auto;
}
#campaign_component .price_contents__img.is-active {
display: block;
}
#campaign_component .price_contents ul {
padding: 0 1.5vw;
margin-top: 3vw;
}
#campaign_component .price_contents ul li {
font-size: clamp(6px, 1.1vw, 18px);
line-height: clamp(10px, 1.7vw, 28px);
list-style: none;
margin: 0.5vw 0;
}
#campaign_component .price_contents .cta_button {
width: 50%;
margin: 4vw auto;
}
@media (max-width: 500px) {
#campaign_component .price_contents {
width: 90%;
padding: 4vw 0 2vw;
}
#campaign_component .price_contents__tabs {
margin: 6vw auto 0;
}
#campaign_component .price_contents__images {
margin-top: 10vw;
}
#campaign_component .price_contents ul {
padding: 0 3vw;
margin-top: 6vw;
}
#campaign_component .price_contents ul li {
font-size: 3.3vw;
line-height: 5.8vw;
margin: 0;
}
#campaign_component .price_contents .cta_button {
width: 75%;
margin: 12vw auto;
}
#campaign_component .price_contents__tab {
width: 40%;
padding: 2vw;
font-size: 3.4vw;
}
#campaign_component .price_contents__tab.is-active {
width: 40%;
padding: 2vw;
font-size: 3.4vw;
}
}
.breadcrumb-001 {
width: clamp(60px, 35%, 600px);
margin: -4vw auto 6vw;
list-style: none;
padding: 0;
font-size: clamp(6px, 0.9vw, 14px);
}
.breadcrumb-001 li {
display: flex;
align-items: center;
margin: 0;
}
.breadcrumb-001 .breadcrumb-001 li:first-child::before {
display: inline-block;
width: 1em;
height: 1em;
margin-right: clamp(6px, 1vw, 12px);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 20C20 20.5523 19.5523 21 19 21H5C4.44772 21 4 20.5523 4 20V11L1 11L11.3273 1.6115C11.7087 1.26475 12.2913 1.26475 12.6727 1.6115L23 11L20 11V20ZM11 13V19H13V13H11Z' fill='%23333333'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat;
content: "";
}
.breadcrumb-001 .breadcrumb-001 li:not(:last-child)::after {
display: inline-block;
transform: rotate(45deg);
width: 0.3em;
height: 0.3em;
margin-left: 10px;
border-top: 1px solid #333333;
border-right: 1px solid #333333;
content: "";
}
.breadcrumb-001 a {
color: #333333;
text-decoration: none;
}
.breadcrumb-001 li.breadcrumb-001_now a {
color: #FD7E14;
}
@media (max-width: 500px) {
.breadcrumb-001 {
width: 100%;
padding-left: 2vw;
margin: -10vw auto 4vw;
gap: 0 2vw;
font-size: 3vw;
}
}
@media (min-width: 500px) {
.float-button_flex,
.float-button_box {
display: none;
}
}
.float-button_flex {
width: 100%;
display: flex;
position: fixed;
background: rgba(0, 0, 0, 0.5);
bottom: 0;
z-index: 50;
}
.float-button_flex .float-button_box {
width: 90%;
margin: auto;
padding: 2vw;
} footer {
position: relative;
width: 100%;
background-color: #F3E9D2;
z-index: 101;
}
footer .section__marquee {
display: flex;
overflow: hidden;
white-space: nowrap;
}
footer .section__marquee .marquee__text {
display: inline-block;
font-size: 9vw;
color: #E2CC9F;
padding-right: 0.5em;
animation: marquee 30s linear infinite;
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
footer .footer_box {
width: clamp(500px, 70%, 1200px);
display: flex;
justify-content: space-between;
margin: 0 auto;
padding: 3vw 0;
}
footer .footer_box .footer_box-text {
width: 30%;
margin-right: 5%;
}
footer .footer_box .footer_box-text .footer_box-logo {
width: 100%;
margin: 2vw auto;
}
footer .footer_box .footer_box-text .footer_box-logo img {
width: 100%;
height: auto;
}
footer .footer_box .footer_box-text p {
font-size: clamp(6px, 0.9vw, 14px);
line-height: clamp(11px, 1.7vw, 26px);
font-weight: 500;
text-align: center;
}
footer .footer_box .footer_box-text .footer_box-sns {
display: flex;
justify-content: center;
margin: 1vw auto;
}
footer .footer_box .footer_box-text .footer_box-sns .footer_box-icon {
width: 13%;
margin: 1vw 0.8vw;
}
footer .footer_box .footer_box-menu {
width: 53%;
display: flex;
}
footer .footer_box .footer_box-menu ul {
width: 45%;
padding-left: 0;
}
footer .footer_box .footer_box-menu ul li {
font-size: clamp(6px, 1vw, 14px);
font-weight: 500;
list-style: none;
line-height: clamp(18px, 3vw, 36px);
}
footer .footer_box .footer_box-menu ul li a {
text-decoration: none;
color: #323232;
transition: 0.3s;
}
footer .footer_box .footer_box-menu ul li a:hover {
opacity: 0.6;
}
footer .footer_box .footer_box-menu .footer_box-menu02 {
line-height: 1.2;
margin: 0.8vw 0;
}
footer .copyright {
background-color: #4C4B4B;
color: #fff;
font-size: clamp(6px, 1vw, 14px);
font-weight: 500;
text-align: center;
padding: 0.7vw 0;
}
@media (max-width: 500px) {
footer .section__marquee .marquee__text {
font-size: 16vw;
}
footer .footer_box {
width: 94%;
flex-direction: column-reverse;
margin: 0 auto;
padding: 8vw 0;
}
footer .footer_box .footer_box-text {
width: 100%;
margin-right: 0%;
margin: 0 auto;
}
footer .footer_box .footer_box-text .footer_box-logo {
width: 65%;
margin: 10vw auto 3vw;
}
footer .footer_box .footer_box-text p {
font-size: 3.2vw;
line-height: 6vw;
}
footer .footer_box .footer_box-text .footer_box-sns {
display: flex;
justify-content: center;
margin: 1vw auto;
}
footer .footer_box .footer_box-text .footer_box-sns .footer_box-icon {
width: 8%;
margin: 3vw;
}
footer .footer_box .footer_box-menu {
width: 94%;
margin: auto;
margin-left: 6%;
}
footer .footer_box .footer_box-menu ul {
width: 50%;
padding-left: 0;
}
footer .footer_box .footer_box-menu ul li {
font-size: 3.6vw;
line-height: 10vw;
}
footer .footer_box .footer_box-menu ul .footer_box-menu02 {
line-height: 1.2;
margin: 2.7vw 0;
}
footer .copyright {
font-size: 3.4vw;
padding: 2.5vw 0;
}
}