@charset "UTF-8";
/* -----------------------
リセット
----------------------- */
html, body, h1, h2, h3, h4, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
list-style: none;
overflow-wrap: break-word;
word-break: break-all;
}
article, header, footer, aside, figure, figcaption, nav, section {
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
line-height: 1;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
ol, ul {
list-style: none;
list-style-type: none;
}
button {
background: none;
border: none;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
a {
text-decoration: none;
}
img {
display: block;
}
/* -----------------------
unity
----------------------- */
@media screen and (min-width: 768px) {
.sp {
display: none !important;
}
}
@media screen and (max-width: 767px) {
.pc {
display: none !important;
}
}
html {
scroll-behavior: smooth;
scroll-padding-top: 10%;
}
body {
font-family: "Noto Sans JP", sans-serif;
font-style: normal;
line-height: normal;
font-weight: 500;
color: #264670;
}
@media screen and (max-width: 767px) {
body.active {
overflow: hidden;
}
}
.whopper {
overflow: hidden;
background-image: url("/img/main-bg.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
background-repeat: repeat-y;
}
.section--whopper {
position: relative;
}
@media screen and (min-width: 768px) {
.section--whopper {
margin-top: -15.625vw;
padding: 27.34375vw 0 0vw;
}
}
@media screen and (max-width: 767px) {
.section--whopper {
margin-top: -64.1025641026vw;
padding: 74.358974359vw 0 10.2564102564vw;
}
}
.section--whopper .road--bg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
@media screen and (min-width: 768px) {
.section--whopper .road--bg {
background-image: url('data:image/svg+xml;utf-8,');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-size: 150%;
background-position: top right 60%;
}
}
@media screen and (max-width: 767px) {
.section--whopper .road--bg {
background-image: url('data:image/svg+xml;utf-8,');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-size: 200%;
background-position: top right 70%;
}
}
.section--whopper .road--on {
position: relative;
z-index: 2;
}
@media screen and (min-width: 768px) {
.section--whopper .road--on {
width: 68.75vw;
margin: 0 auto;
}
}
@media screen and (max-width: 767px) {
.section--whopper .road--on {
width: 100%;
}
}
.section--whopper .C_AboutCloud {
position: absolute;
z-index: 3;
}
@media screen and (min-width: 768px) {
.section--whopper .C_AboutCloud {
bottom: -28.125vw;
right: 0.78125vw;
}
}
@media screen and (min-width: 768px) and (max-width: 900px) and (min-width: 768px) {
.section--whopper .C_AboutCloud {
bottom: -35.15625vw;
}
}
@media screen and (max-width: 767px) {
.section--whopper .C_AboutCloud {
bottom: -66.6666666667vw;
right: 2.5641025641vw;
}
}
/* -----------------------
anime
----------------------- */
.hover-opa {
transition: 0.3s;
}
.hover-opa:hover {
opacity: 0.6;
}
.hover-scale {
transition: 0.3s;
}
.hover-scale:hover {
transform: scale(1.05);
}
.up {
opacity: 0;
}
.up.show {
opacity: 0;
animation: up 1.5s ease 1s forwards;
}
@keyframes up {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.pop {
opacity: 0;
transform: scale(0.5);
}
.pop.show {
opacity: 0;
transform: scale(0.5);
animation: pop 0.5s ease 0.5s forwards;
}
@keyframes pop {
0% {
opacity: 0;
transform: scale(0.5);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.rinrin:hover .teltel {
animation: rinrin 1s ease infinite;
}
@keyframes rinrin {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(0deg);
}
30% {
transform: rotate(30deg);
}
35% {
transform: rotate(0deg);
}
40% {
transform: rotate(30deg);
}
45% {
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}
.hover-color:hover .color-1 {
background-image: url('data:image/svg+xml;utf-8,') !important;
}
.hover-color:hover .color-2 {
background-image: url('data:image/svg+xml;utf-8,') !important;
}
.hover-puwa {
transition: 0.3s;
}
.hover-puwa:hover {
animation: hover-puwa 2s ease infinite;
}
@keyframes hover-puwa {
0% {
transform: scale(1.05);
}
25% {
transform: scale(0.95);
}
50% {
transform: scale(1.05);
}
75% {
transform: scale(0.95);
}
100% {
transform: scale(1.05);
}
}
.puwa {
animation: puwa 3s ease infinite;
}
@keyframes puwa {
0% {
transform: scale(1.05);
}
25% {
transform: scale(0.95);
}
50% {
transform: scale(1.05);
}
75% {
transform: scale(0.95);
}
100% {
transform: scale(1.05);
}
}
.roll {
opacity: 0;
transform: scale(-1, 1);
}
.roll.show {
animation: roll 1s ease 0.5s forwards;
}
@keyframes roll {
0% {
opacity: 0;
transform: scale(-1, 1);
}
100% {
opacity: 1;
transform: scale(1, 1);
}
}
.delay-1 {
animation-delay: 1s !important;
}
.delay-15 {
animation-delay: 1.5s !important;
}
.delay-2 {
animation-delay: 2s !important;
}
.delay-25 {
animation-delay: 2.5s !important;
}
.delay-3 {
animation-delay: 3s !important;
}
.delay-35 {
animation-delay: 3.5s !important;
}
.delay-4 {
animation-delay: 4s !important;
}
.delay-45 {
animation-delay: 4.5s !important;
}
.delay-5 {
animation-delay: 5s !important;
}
.time-25 {
animation-duration: 2.5s !important;
}
.loadUp {
opacity: 0;
}
.loadUp.show {
opacity: 0;
animation: loadUp 1.5s ease 0s forwards;
}
@keyframes loadUp {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.loadToDown {
opacity: 0;
transform: translateY(-100%);
}
.loadToDown.show {
opacity: 0;
animation: loadToDown 1s ease 0s forwards;
transform: translateY(-100%);
}
@keyframes loadToDown {
0% {
opacity: 0;
transform: translateY(-100%);
}
100% {
opacity: 1;
transform: translateY(0%);
}
}
.loadDelay-1 {
animation-delay: 1s !important;
}
.loadDelay-12 {
animation-delay: 1.2s !important;
}
.loadDelay-14 {
animation-delay: 1.4s !important;
}
.loadDelay-16 {
animation-delay: 1.6s !important;
}
.loadDelay-18 {
animation-delay: 1.8s !important;
}
.loadDelay-2 {
animation-delay: 2s !important;
}
.loadDelay-22 {
animation-delay: 2.2s !important;
}
.loadDelay-24 {
animation-delay: 2.4s !important;
}
.loadDelay-26 {
animation-delay: 2.6s !important;
}
.loadDelay-28 {
animation-delay: 2.8s !important;
}
.loadDelay-3 {
animation-delay: 3s !important;
}
/* -----------------------
header
----------------------- */
.header {
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #FFFFFF;
background-color: #FFFFFF;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 1000;
transition: all 0.5s;
}
@media screen and (min-width: 768px) {
.header {
padding: 0.703125vw 3.671875vw 0.9375vw 2.8125vw;
}
}
@media screen and (max-width: 767px) {
.header {
padding: 1.5384615385vw 20vw 2.3076923077vw 5.1282051282vw;
}
}
.header.active {
top: -100%;
}
@media screen and (max-width: 767px) {
.header .C_Logo {
position: relative;
z-index: 2;
}
}
@media screen and (max-width: 767px) {
.header .burger {
aspect-ratio: 54/82;
width: 13.8461538462vw;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
filter: drop-shadow(3px 2px 3px rgba(0, 0, 0, 0.25));
position: absolute;
top: 0;
right: 5.1282051282vw;
padding-top: 3.8461538462vw;
cursor: pointer;
z-index: 2;
}
}
@media screen and (max-width: 767px) {
.header .burger.active .burger--in {
aspect-ratio: 1;
width: 6.4102564103vw;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
}
@media screen and (max-width: 767px) {
.header .burger--in {
aspect-ratio: 30/18;
width: 8.9743589744vw;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
margin: 0 auto;
transition: all 0.3s;
}
}
@media screen and (max-width: 767px) {
.header .menu {
position: fixed;
top: 0;
right: -100%;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
transition: all 0.3s;
background-color: #FFFDF3;
z-index: 1;
padding: 15.3846153846vw 0;
overflow-y: scroll;
}
.header .menu.active {
right: 0;
}
}
.header .menu .table {
display: flex;
align-items: center;
}
@media screen and (min-width: 768px) {
.header .menu .table {
gap: 2.34375vw;
}
}
@media screen and (max-width: 767px) {
.header .menu .table {
flex-direction: column;
gap: 3.8461538462vw;
padding: 10.2564102564vw 0;
background-image: url("/img/rainbow-bg.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-position: top right;
}
}
@media screen and (max-width: 767px) {
.header .menu .table .list {
padding-bottom: 3.8461538462vw;
position: relative;
}
}
@media screen and (max-width: 767px) {
.header .menu .table .list::before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 30.7692307692vw;
height: 0.5128205128vw;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-repeat: repeat-x;
}
}
@media screen and (max-width: 767px) {
.header .menu .table .list:nth-last-child(-n+2)::before {
display: none;
}
}
.header .menu .table .list .link {
display: block;
width: fit-content;
}
.header .menu .table .list .link .TX {
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.header .menu .table .list .link .TX.TX--1 {
aspect-ratio: 132/30;
background-image: url('data:image/svg+xml;utf-8,');
}
@media screen and (min-width: 768px) {
.header .menu .table .list .link .TX.TX--1 {
width: max(4.6875vw, 50px);
}
}
@media screen and (max-width: 767px) {
.header .menu .table .list .link .TX.TX--1 {
width: 23.0769230769vw;
}
}
.header .menu .table .list .link .TX.TX--1:hover {
background-image: url('data:image/svg+xml;utf-8,');
}
@media screen and (min-width: 768px) {
.header .menu .table .list .link .TX.TX--1:hover {
width: max(4.6875vw, 50px);
}
}
@media screen and (max-width: 767px) {
.header .menu .table .list .link .TX.TX--1:hover {
width: 23.0769230769vw;
}
}
.header .menu .table .list .link .TX.TX--2 {
aspect-ratio: 246/32;
background-image: url('data:image/svg+xml;utf-8,');
}
@media screen and (min-width: 768px) {
.header .menu .table .list .link .TX.TX--2 {
width: max(9.375vw, 100px);
}
}
@media screen and (max-width: 767px) {
.header .menu .table .list .link .TX.TX--2 {
width: 30.7692307692vw;
}
}
.header .menu .table .list .link .TX.TX--2:hover {
background-image: url('data:image/svg+xml;utf-8,');
}
.header .menu .table .list .link .TX.TX--3 {
aspect-ratio: 230/35;
background-image: url('data:image/svg+xml;utf-8,');
}
@media screen and (min-width: 768px) {
.header .menu .table .list .link .TX.TX--3 {
width: max(7.8125vw, 85px);
}
}
@media screen and (max-width: 767px) {
.header .menu .table .list .link .TX.TX--3 {
width: 30.7692307692vw;
}
}
.header .menu .table .list .link .TX.TX--3:hover {
background-image: url('data:image/svg+xml;utf-8,');
}
.header .menu .table .list .link .TX.TX--4 {
aspect-ratio: 134/27;
background-image: url('data:image/svg+xml;utf-8,');
}
@media screen and (min-width: 768px) {
.header .menu .table .list .link .TX.TX--4 {
width: max(5.46875vw, 60px);
}
}
@media screen and (max-width: 767px) {
.header .menu .table .list .link .TX.TX--4 {
width: 20.5128205128vw;
}
}
.header .menu .table .list .link .TX.TX--4:hover {
background-image: url('data:image/svg+xml;utf-8,');
}
@media screen and (max-width: 767px) {
.header .menu .table .list .header__tel .C_Tel--bg {
width: 30.7692307692vw;
}
}
@media screen and (max-width: 767px) {
.header .menu .header--Switch {
padding: 0 5.1282051282vw;
display: flex;
align-items: center;
justify-content: space-between;
}
}
@media screen and (max-width: 767px) {
.header .menu .header--Switch .C_Switch {
width: 27.9487179487vw;
}
}
/* -----------------------
footer
----------------------- */
.footer {
background-color: #26456A;
}
@media screen and (min-width: 768px) {
.footer {
padding: 2.109375vw 0;
}
}
@media screen and (max-width: 767px) {
.footer {
padding: 3.3333333333vw 0;
}
}
.footer--inner {
display: flex;
}
@media screen and (min-width: 768px) {
.footer--inner {
width: 84.375vw;
margin: 0 auto;
justify-content: space-between;
}
}
@media screen and (max-width: 767px) {
.footer--inner {
width: 100%;
justify-content: center;
}
}
.footer--inner .logo {
display: block;
aspect-ratio: 180/45;
}
@media screen and (min-width: 768px) {
.footer--inner .logo {
width: max(14.0625vw, 150px);
}
}
@media screen and (max-width: 767px) {
.footer--inner .logo {
width: 24.6153846154vw;
}
}
.footer--inner .logo .img {
width: 100%;
height: 100%;
}
@media screen and (min-width: 768px) {
.footer--inner .nav {
padding-top: 1.171875vw;
}
}
.footer--inner .nav .table {
display: flex;
align-items: center;
}
@media screen and (min-width: 768px) {
.footer--inner .nav .table {
gap: 2.34375vw;
}
}
.footer--inner .nav .table .list .link {
display: block;
width: fit-content;
}
.footer--inner .nav .table .list .link .TX {
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.footer--inner .nav .table .list .link .TX.TX--1 {
aspect-ratio: 132/30;
background-image: url('data:image/svg+xml;utf-8,');
}
@media screen and (min-width: 768px) {
.footer--inner .nav .table .list .link .TX.TX--1 {
width: max(4.6875vw, 50px);
}
}
.footer--inner .nav .table .list .link .TX.TX--1:hover {
background-image: url('data:image/svg+xml;utf-8,');
}
.footer--inner .nav .table .list .link .TX.TX--2 {
aspect-ratio: 246/32;
background-image: url('data:image/svg+xml;utf-8,');
}
@media screen and (min-width: 768px) {
.footer--inner .nav .table .list .link .TX.TX--2 {
width: max(9.375vw, 100px);
}
}
.footer--inner .nav .table .list .link .TX.TX--2:hover {
background-image: url('data:image/svg+xml;utf-8,');
}
.footer--inner .nav .table .list .link .TX.TX--3 {
aspect-ratio: 230/35;
background-image: url('data:image/svg+xml;utf-8,');
}
@media screen and (min-width: 768px) {
.footer--inner .nav .table .list .link .TX.TX--3 {
width: max(7.8125vw, 85px);
}
}
.footer--inner .nav .table .list .link .TX.TX--3:hover {
background-image: url('data:image/svg+xml;utf-8,');
}
.footer--inner .nav .table .list .link .TX.TX--4 {
aspect-ratio: 134/27;
background-image: url('data:image/svg+xml;utf-8,');
}
@media screen and (min-width: 768px) {
.footer--inner .nav .table .list .link .TX.TX--4 {
width: max(5.46875vw, 60px);
}
}
.footer--inner .nav .table .list .link .TX.TX--4:hover {
background-image: url('data:image/svg+xml;utf-8,');
}
/* -----------------------
C_Logo
----------------------- */
.C_Logo {
aspect-ratio: 173/58;
}
@media screen and (min-width: 768px) {
.C_Logo {
width: max(13.515625vw, 130px);
}
}
@media screen and (max-width: 767px) {
.C_Logo {
width: 25.8974358974vw;
}
}
.C_Logo--link {
display: block;
width: 100%;
height: 100%;
}
.C_Logo--link .TX {
width: 100%;
height: 100%;
object-fit: contain;
}
/* -----------------------
C_Rainbow
----------------------- */
.C_Rainbow {
display: flex;
align-items: flex-end;
width: fit-content;
}
@media screen and (min-width: 768px) {
.C_Rainbow {
gap: max(0.9375vw, 8px);
}
}
@media screen and (max-width: 767px) {
.C_Rainbow {
margin: 0 auto;
gap: 1.5384615385vw;
}
}
.ni {
aspect-ratio: 56/51;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.ni {
width: max(4.375vw, 44px);
}
}
@media screen and (max-width: 767px) {
.ni {
width: 7.4358974359vw;
}
}
.ji {
aspect-ratio: 47/60;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.ji {
width: max(3.671875vw, 35px);
}
}
@media screen and (max-width: 767px) {
.ji {
width: 6.1538461538vw;
}
}
.i-V1 {
aspect-ratio: 59/38;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.i-V1 {
width: max(4.609375vw, 45px);
}
}
@media screen and (max-width: 767px) {
.i-V1 {
width: 7.6923076923vw;
}
}
.ro {
aspect-ratio: 46/60;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.ro {
width: max(3.59375vw, 35px);
}
}
@media screen and (max-width: 767px) {
.ro {
width: 6.1538461538vw;
}
}
.no {
aspect-ratio: 58/52;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.no {
width: max(4.53125vw, 45px);
}
}
@media screen and (max-width: 767px) {
.no {
width: 7.6923076923vw;
}
}
.i-V2 {
aspect-ratio: 59/38;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.i-V2 {
width: max(4.609375vw, 45px);
}
}
@media screen and (max-width: 767px) {
.i-V2 {
width: 7.6923076923vw;
}
}
.e {
aspect-ratio: 49/64;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.e {
width: max(3.828125vw, 35px);
}
}
@media screen and (max-width: 767px) {
.e {
width: 6.4102564103vw;
}
}
/* -----------------------
C_Tel
----------------------- */
.C_Tel {
display: block;
position: relative;
width: fit-content;
}
@media screen and (min-width: 768px) {
.C_Tel {
width: 31.328125vw;
}
}
@media screen and (max-width: 767px) {
.C_Tel {
width: 78.2051282051vw;
}
}
.C_Tel--bg {
aspect-ratio: 344/202;
background-image: url("/img/C_Tel-bg.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin: 0 auto;
}
@media screen and (min-width: 768px) {
.C_Tel--bg {
width: 26.875vw;
}
}
@media screen and (max-width: 767px) {
.C_Tel--bg {
width: 67.1794871795vw;
}
}
.C_Tel--content {
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
}
.C_Tel--content--text {
display: flex;
align-items: center;
justify-content: center;
}
@media screen and (min-width: 768px) {
.C_Tel--content--text {
gap: 0.78125vw;
}
}
@media screen and (max-width: 767px) {
.C_Tel--content--text {
gap: 2.0512820513vw;
}
}
.C_Tel--content--text .TelIcon {
aspect-ratio: 60/59;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.C_Tel--content--text .TelIcon {
width: 4.6875vw;
}
}
@media screen and (max-width: 767px) {
.C_Tel--content--text .TelIcon {
width: 11.7948717949vw;
}
}
.C_Tel--content--text .TelNumber {
aspect-ratio: 330/34;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.C_Tel--content--text .TelNumber {
width: 25.78125vw;
}
}
@media screen and (max-width: 767px) {
.C_Tel--content--text .TelNumber {
width: 64.6153846154vw;
}
}
.C_Tel--content--sub {
text-align: center;
}
@media screen and (min-width: 768px) {
.C_Tel--content--sub {
margin-top: -0.390625vw;
}
}
.C_Tel--content--sub .TX {
font-weight: 300;
letter-spacing: 0.06em;
color: #264670;
}
@media screen and (min-width: 768px) {
.C_Tel--content--sub .TX {
font-size: 1.25vw;
}
}
@media screen and (max-width: 767px) {
.C_Tel--content--sub .TX {
font-size: 3.5897435897vw;
}
}
@media screen and (min-width: 768px) {
.header__tel .C_Tel {
width: 11.71875vw;
}
}
@media screen and (max-width: 767px) {
.header__tel .C_Tel {
width: 37.9487179487vw;
}
}
@media screen and (min-width: 768px) {
.header__tel .C_Tel--bg {
width: 10vw;
}
}
@media screen and (max-width: 767px) {
.header__tel .C_Tel--bg {
width: 19.7435897436vw;
}
}
@media screen and (min-width: 768px) {
.header__tel .C_Tel--content--text {
gap: 0.234375vw;
}
}
@media screen and (max-width: 767px) {
.header__tel .C_Tel--content--text {
gap: 0.7692307692vw;
}
}
@media screen and (min-width: 768px) {
.header__tel .C_Tel--content--text .TelIcon {
width: 1.71875vw;
}
}
@media screen and (max-width: 767px) {
.header__tel .C_Tel--content--text .TelIcon {
width: 4.8717948718vw;
}
}
@media screen and (min-width: 768px) {
.header__tel .C_Tel--content--text .TelNumber {
width: 9.609375vw;
}
}
@media screen and (max-width: 767px) {
.header__tel .C_Tel--content--text .TelNumber {
width: 26.9230769231vw;
}
}
.header__tel .C_Tel--content--sub {
text-align: center;
}
@media screen and (min-width: 768px) {
.header__tel .C_Tel--content--sub {
margin-top: 0vw;
}
}
@media screen and (max-width: 767px) {
.header__tel .C_Tel--content--sub {
margin-top: -0.2564102564vw;
}
}
.header__tel .C_Tel--content--sub .TX {
white-space: nowrap;
}
@media screen and (min-width: 768px) {
.header__tel .C_Tel--content--sub .TX {
font-size: 0.78125vw;
}
}
@media screen and (max-width: 767px) {
.header__tel .C_Tel--content--sub .TX {
font-size: 2.5641025641vw;
}
}
@media screen and (min-width: 768px) {
.header__tel2 .C_Tel {
width: 11.71875vw;
}
}
@media screen and (min-width: 768px) {
.header__tel2 .C_Tel--bg {
width: 10vw;
}
}
@media screen and (min-width: 768px) {
.header__tel2 .C_Tel--content--text {
gap: 0.234375vw;
}
}
@media screen and (min-width: 768px) {
.header__tel2 .C_Tel--content--text .TelIcon {
width: 1.71875vw;
}
}
@media screen and (min-width: 768px) {
.header__tel2 .C_Tel--content--text .TelNumber {
width: 9.609375vw;
}
}
.header__tel2 .C_Tel--content--sub {
text-align: center;
}
@media screen and (min-width: 768px) {
.header__tel2 .C_Tel--content--sub {
margin-top: 0vw;
}
}
.header__tel2 .C_Tel--content--sub .TX {
white-space: nowrap;
}
@media screen and (min-width: 768px) {
.header__tel2 .C_Tel--content--sub .TX {
font-size: 0.78125vw;
}
}
/* -----------------------
C_KVTag
----------------------- */
.C_KVTag {
aspect-ratio: 237/65;
position: relative;
}
@media screen and (min-width: 768px) {
.C_KVTag {
rotate: 7.74deg;
width: max(18.515625vw, 200px);
}
}
@media screen and (max-width: 767px) {
.C_KVTag {
width: 42.0512820513vw;
margin: 0 auto;
}
}
.C_KVTag .TX {
text-align: center;
font-weight: 700;
color: #26466E;
position: absolute;
top: 40%;
translate: -50% -50%;
width: 100%;
z-index: 3;
}
@media screen and (min-width: 768px) {
.C_KVTag .TX {
left: 55%;
font-size: max(1.71875vw, 18px);
}
}
@media screen and (max-width: 767px) {
.C_KVTag .TX {
left: 50%;
font-size: 4.1025641026vw;
}
}
.C_KVTag .cloud {
width: 100%;
height: 60%;
background: #FFFFFF;
filter: blur(10.9328px);
position: absolute;
top: 0;
left: 50%;
translate: -50% 0;
z-index: 1;
}
.C_KVTag .brace {
aspect-ratio: 236/32;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
position: absolute;
bottom: 0;
left: 50%;
translate: -50% 0;
z-index: 2;
}
@media screen and (min-width: 768px) {
.C_KVTag .brace {
width: max(18.4375vw, 200px);
}
}
@media screen and (max-width: 767px) {
.C_KVTag .brace {
width: 41.7948717949vw;
}
}
/* -----------------------
C_KVArch
----------------------- */
.C_KVArch {
aspect-ratio: 392/81;
margin: 0 auto;
}
@media screen and (min-width: 768px) {
.C_KVArch {
width: max(30.625vw, 300px);
}
}
@media screen and (max-width: 767px) {
.C_KVArch {
width: 52.8205128205vw;
}
}
.C_KVArch .TX {
width: 100%;
height: 100%;
object-fit: contain;
}
/* -----------------------
C_KVSub
----------------------- */
.C_KVSub {
width: fit-content;
margin: 0 auto;
}
.C_KVSub .TX {
font-weight: 700;
line-height: 1.5;
text-align: center;
letter-spacing: 0.1em;
font-feature-settings: "palt" on;
}
@media screen and (min-width: 768px) {
.C_KVSub .TX {
font-size: max(1.5625vw, 15px);
}
}
@media screen and (max-width: 767px) {
.C_KVSub .TX {
font-size: 3.5897435897vw;
}
}
/* -----------------------
C_KVCounseling
----------------------- */
.C_KVCounseling {
width: fit-content;
position: relative;
}
@media screen and (min-width: 768px) {
.C_KVCounseling {
rotate: -8.85deg;
padding: 0 1.5625vw;
}
}
@media screen and (max-width: 767px) {
.C_KVCounseling {
padding: 0 5.1282051282vw;
margin: 0 auto;
}
}
.C_KVCounseling::before, .C_KVCounseling::after {
content: "";
position: absolute;
bottom: 5%;
left: 0;
rotate: -20deg;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
background-repeat: repeat-y;
}
@media screen and (min-width: 768px) {
.C_KVCounseling::before, .C_KVCounseling::after {
height: max(2.734375vw, 25px);
width: max(0.1953125vw, 1.8px);
}
}
@media screen and (max-width: 767px) {
.C_KVCounseling::before, .C_KVCounseling::after {
height: 12.3076923077vw;
width: 0.641025641vw;
}
}
.C_KVCounseling::after {
left: unset;
right: 0;
rotate: 20deg;
}
.C_KVCounseling .TX {
line-height: 169%;
text-align: center;
letter-spacing: 0.05em;
}
@media screen and (min-width: 768px) {
.C_KVCounseling .TX {
font-weight: 700;
font-size: max(1.328125vw, 12px);
}
}
@media screen and (max-width: 767px) {
.C_KVCounseling .TX {
font-size: 4.1025641026vw;
font-weight: 500;
}
}
/* -----------------------
C_Care
----------------------- */
.C_Care {
width: fit-content;
}
@media screen and (max-width: 767px) {
.C_Care {
margin: 0 auto;
}
}
.C_Care .TL {
text-align: right;
font-weight: 700;
line-height: 200%;
letter-spacing: 0.1em;
font-feature-settings: "palt" on;
}
@media screen and (min-width: 768px) {
.C_Care .TL {
font-size: max(2.34375vw, 20px);
}
}
@media screen and (max-width: 767px) {
.C_Care .TL {
text-align: center;
font-size: 5.1282051282vw;
line-height: 175%;
white-space: nowrap;
}
}
.C_Care .TL-in {
font-weight: 700;
}
@media screen and (min-width: 768px) {
.C_Care .TL-in {
font-size: max(3.125vw, 30px);
}
}
@media screen and (max-width: 767px) {
.C_Care .TL-in {
font-size: 6.4102564103vw;
letter-spacing: 0em;
}
}
/* -----------------------
C_CareContent
----------------------- */
.C_CareContent {
width: fit-content;
}
@media screen and (min-width: 768px) {
.C_CareContent {
display: flex;
flex-direction: column;
gap: 2.5vw;
}
}
@media screen and (max-width: 767px) {
.C_CareContent {
display: flex;
flex-direction: column;
gap: 7.1794871795vw;
margin: 0 auto;
}
}
.C_CareContent .title {
display: block;
}
@media screen and (min-width: 768px) {
.C_CareContent .title {
margin-left: 1.5625vw;
}
}
@media screen and (max-width: 767px) {
.C_CareContent .title {
margin: 0 auto;
}
}
.C_CareContent .title.Hello {
aspect-ratio: 216/59;
}
@media screen and (min-width: 768px) {
.C_CareContent .title.Hello {
width: max(16.875vw, 180px);
}
}
@media screen and (max-width: 767px) {
.C_CareContent .title.Hello {
width: 41.5384615385vw;
}
}
.C_CareContent .title.What {
aspect-ratio: 382/84;
}
@media screen and (min-width: 768px) {
.C_CareContent .title.What {
width: max(29.84375vw, 340px);
margin-right: 3.4375vw;
}
}
@media screen and (max-width: 767px) {
.C_CareContent .title.What {
width: 70.5128205128vw;
}
}
.C_CareContent .title.Roots {
aspect-ratio: 461/95;
}
@media screen and (min-width: 768px) {
.C_CareContent .title.Roots {
width: max(36.015625vw, 400px);
margin-left: 3.515625vw;
}
}
@media screen and (max-width: 767px) {
.C_CareContent .title.Roots {
width: 87.4358974359vw;
}
}
.C_CareContent .title .TL {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.C_CareContent .subText {
display: flex;
align-items: center;
}
@media screen and (min-width: 768px) {
.C_CareContent .subText {
justify-content: space-between;
}
}
@media screen and (max-width: 767px) {
.C_CareContent .subText {
flex-direction: column;
gap: 5.1282051282vw;
}
}
.C_CareContent .subText .cloud {
aspect-ratio: 295/139;
position: relative;
}
@media screen and (min-width: 768px) {
.C_CareContent .subText .cloud {
width: max(23.046875vw, 230px);
}
}
@media screen and (max-width: 767px) {
.C_CareContent .subText .cloud {
width: 81.5384615385vw;
}
}
.C_CareContent .subText .cloud--bg {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.C_CareContent .subText .cloud .TX {
position: absolute;
left: 50%;
top: 50%;
translate: -50% -50%;
width: 100%;
text-align: center;
font-weight: 400;
line-height: 130%;
letter-spacing: 0.03em;
font-feature-settings: "palt" on;
}
@media screen and (min-width: 768px) {
.C_CareContent .subText .cloud .TX {
font-size: max(1.40625vw, 14px);
}
}
@media screen and (max-width: 767px) {
.C_CareContent .subText .cloud .TX {
font-size: 4.1025641026vw;
}
}
@media screen and (min-width: 768px) {
.C_CareContent .text {
display: flex;
flex-direction: column;
gap: 2.5vw;
}
}
@media screen and (max-width: 767px) {
.C_CareContent .text {
display: flex;
flex-direction: column;
gap: 7.1794871795vw;
}
}
.C_CareContent .text .TX {
font-weight: 400;
line-height: 167%;
letter-spacing: 0.03em;
font-feature-settings: "palt" on;
}
@media screen and (min-width: 768px) {
.C_CareContent .text .TX {
text-align: justify;
font-size: max(1.40625vw, 14px);
}
}
@media screen and (max-width: 767px) {
.C_CareContent .text .TX {
text-align: center;
font-size: 4.1025641026vw;
}
}
/* -----------------------
C_AboutCloud
----------------------- */
.C_AboutCloud {
aspect-ratio: 510/450;
position: relative;
}
@media screen and (min-width: 768px) {
.C_AboutCloud {
width: 39.84375vw;
}
}
@media screen and (max-width: 767px) {
.C_AboutCloud {
width: 67.9487179487vw;
}
}
.C_AboutCloud--bg {
background-image: url("/img/C_AboutCloud.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.C_AboutCloud .TX {
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
line-height: 165%;
text-align: center;
letter-spacing: 0.03em;
width: 100%;
z-index: 2;
}
@media screen and (min-width: 768px) {
.C_AboutCloud .TX {
font-size: 1.953125vw;
}
}
@media screen and (max-width: 767px) {
.C_AboutCloud .TX {
font-size: 3.5897435897vw;
}
}
/* -----------------------
C_AboutSubTitle
----------------------- */
.C_AboutSubTitle {
position: relative;
width: fit-content;
margin: 0 auto;
}
.C_AboutSubTitle .TX {
text-align: center;
line-height: 164%;
letter-spacing: 0.03em;
}
@media screen and (min-width: 768px) {
.C_AboutSubTitle .TX {
font-weight: 700;
font-size: max(1.953125vw, 18px);
}
}
@media screen and (max-width: 767px) {
.C_AboutSubTitle .TX {
font-weight: 500;
font-size: 4.1025641026vw;
}
}
.C_AboutSubTitle::before {
content: "";
display: block;
position: absolute;
translate: -50% 0;
width: 108%;
}
@media screen and (min-width: 768px) {
.C_AboutSubTitle::before {
aspect-ratio: 861/91;
top: 85%;
left: 49%;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
}
@media screen and (max-width: 767px) {
.C_AboutSubTitle::before {
aspect-ratio: 306/44;
left: 47%;
top: 98%;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
}
/* -----------------------
C_AboutWindow
----------------------- */
@media screen and (min-width: 768px) {
.C_AboutWindow {
margin: 0 auto;
width: max(73.75vw, 700px);
display: flex;
flex-direction: column;
gap: 10.9375vw;
}
}
@media screen and (max-width: 767px) {
.C_AboutWindow {
width: 124.1025641026vw;
position: relative;
top: 0;
left: 50%;
translate: -50% 0;
display: flex;
flex-direction: column;
gap: 19.2307692308vw;
}
}
.C_AboutWindow .item {
width: 100%;
}
.C_AboutWindow .item .window--title {
margin: 0 auto;
}
@media screen and (min-width: 768px) {
.C_AboutWindow .item .window--title {
margin-bottom: 2.734375vw;
}
}
@media screen and (max-width: 767px) {
.C_AboutWindow .item .window--title {
margin-bottom: 13.5897435897vw;
}
}
.C_AboutWindow .item .window--title.title--2 {
aspect-ratio: 349/37;
}
@media screen and (min-width: 768px) {
.C_AboutWindow .item .window--title.title--2 {
width: max(27.265625vw, 300px);
}
}
@media screen and (max-width: 767px) {
.C_AboutWindow .item .window--title.title--2 {
width: 66.9230769231vw;
}
}
.C_AboutWindow .item .window--title.title--3 {
aspect-ratio: 364/33;
}
@media screen and (min-width: 768px) {
.C_AboutWindow .item .window--title.title--3 {
width: max(28.4375vw, 300px);
}
}
@media screen and (max-width: 767px) {
.C_AboutWindow .item .window--title.title--3 {
width: 75.3846153846vw;
}
}
.C_AboutWindow .item .window--title.title--4 {
aspect-ratio: 382/36;
}
@media screen and (min-width: 768px) {
.C_AboutWindow .item .window--title.title--4 {
width: max(29.84375vw, 300px);
}
}
@media screen and (max-width: 767px) {
.C_AboutWindow .item .window--title.title--4 {
width: 77.1794871795vw;
}
}
.C_AboutWindow .item .window--title .TL {
width: 100%;
}
.C_AboutWindow .item .window {
width: 100%;
}
@media screen and (min-width: 768px) {
.C_AboutWindow .item .window {
aspect-ratio: 944/548;
background-image: url("/img/window-pc.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
}
@media screen and (max-width: 767px) {
.C_AboutWindow .item .window {
aspect-ratio: 484/337;
background-image: url("/img/window-sp.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
}
.C_AboutWindow .item .window--in {
margin: 0 auto;
}
@media screen and (min-width: 768px) {
.C_AboutWindow .item .window--in {
width: 64.5127118644%;
height: 87.7737226277%;
transform: translateY(4.9896049896%);
}
}
@media screen and (max-width: 767px) {
.C_AboutWindow .item .window--in {
width: 64.6694214876%;
height: 89.6142433234%;
transform: translateY(3.9735099338%);
}
}
.C_AboutWindow .item .window--in--img {
width: 100%;
height: 100%;
}
@media screen and (min-width: 768px) {
.C_AboutWindow .item .window--in--img {
background-image: url("/img/window-img-1-pc.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
}
@media screen and (max-width: 767px) {
.C_AboutWindow .item .window--in--img {
background-image: url("/img/window-img-1-sp.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
}
@media screen and (min-width: 768px) {
.C_AboutWindow .item .window--in .text {
padding: 0 2.34375vw;
}
}
@media screen and (max-width: 767px) {
.C_AboutWindow .item .window--in .text {
padding: 0 3.8461538462vw;
}
}
@media screen and (min-width: 768px) {
.C_AboutWindow .item .window--in .text.text--2 {
padding-top: 8.203125vw;
}
}
@media screen and (max-width: 767px) {
.C_AboutWindow .item .window--in .text.text--2 {
padding-top: 12.8205128205vw;
}
}
@media screen and (min-width: 768px) {
.C_AboutWindow .item .window--in .text.text--3 {
padding-top: 10.546875vw;
}
}
@media screen and (max-width: 767px) {
.C_AboutWindow .item .window--in .text.text--3 {
padding-top: 14.1025641026vw;
}
}
@media screen and (min-width: 768px) {
.C_AboutWindow .item .window--in .text.text--4 {
padding-top: 9.375vw;
}
}
@media screen and (max-width: 767px) {
.C_AboutWindow .item .window--in .text.text--4 {
padding-top: 12.8205128205vw;
}
}
.C_AboutWindow .item .window--in .text .TX {
text-align: justify;
letter-spacing: 0.03em;
}
@media screen and (min-width: 768px) {
.C_AboutWindow .item .window--in .text .TX {
line-height: 167%;
font-size: max(1.40625vw, 13px);
}
}
@media screen and (max-width: 767px) {
.C_AboutWindow .item .window--in .text .TX {
line-height: 150%;
font-size: 3.0769230769vw;
}
}
/* -----------------------
C_AboutBubble
----------------------- */
.C_AboutBubble {
background-size: 100% 100% !important;
position: relative;
}
@media screen and (min-width: 768px) {
.C_AboutBubble {
background-image: url("/img/C_AboutBubble.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
}
@media screen and (max-width: 767px) {
.C_AboutBubble {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 336/85;
width: 86.1538461538vw;
margin: 0 auto;
}
}
@media screen and (min-width: 768px) {
.C_AboutBubble.ver-1 {
aspect-ratio: 361/228;
width: 28.203125vw;
}
}
@media screen and (min-width: 768px) {
.C_AboutBubble.ver-2 {
aspect-ratio: 341/240;
width: 26.640625vw;
}
}
@media screen and (min-width: 768px) {
.C_AboutBubble.rotate-1 {
rotate: 13deg;
}
}
@media screen and (min-width: 768px) {
.C_AboutBubble.rotate-2 {
rotate: -15deg;
}
}
@media screen and (min-width: 768px) {
.C_AboutBubble.rotate-3 {
rotate: 15deg;
}
}
.C_AboutBubble .TX {
font-weight: 700;
line-height: 145%;
text-align: center;
letter-spacing: 0.03em;
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
width: 100%;
}
@media screen and (min-width: 768px) {
.C_AboutBubble .TX {
font-size: 1.5625vw;
}
}
@media screen and (max-width: 767px) {
.C_AboutBubble .TX {
font-size: 3.5897435897vw;
}
}
/* -----------------------
C_Voice
----------------------- */
.C_Voice {
margin: 0 auto;
}
@media screen and (min-width: 768px) {
.C_Voice {
display: flex;
flex-direction: column;
gap: 7.421875vw;
width: 68.75vw;
}
}
@media screen and (max-width: 767px) {
.C_Voice {
display: flex;
flex-direction: column;
gap: 15.3846153846vw;
width: 75.8974358974vw;
}
}
.C_Voice .item {
display: flex;
align-items: center;
}
@media screen and (min-width: 768px) {
.C_Voice .item {
gap: 3.90625vw;
}
}
@media screen and (max-width: 767px) {
.C_Voice .item {
flex-direction: column;
gap: 2.5641025641vw;
}
}
@media screen and (min-width: 768px) {
.C_Voice .item:nth-child(even) {
flex-direction: row-reverse;
}
}
.C_Voice .item .window {
aspect-ratio: 393/318;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
flex-shrink: 0;
position: relative;
}
@media screen and (min-width: 768px) {
.C_Voice .item .window {
width: 30.703125vw;
}
}
@media screen and (max-width: 767px) {
.C_Voice .item .window {
width: 72.8205128205vw;
}
}
.C_Voice .item .window--in {
position: absolute;
}
@media screen and (min-width: 768px) {
.C_Voice .item .window--in {
bottom: 1.171875vw;
left: 5.859375vw;
}
}
@media screen and (max-width: 767px) {
.C_Voice .item .window--in {
bottom: 2.5641025641vw;
left: 50%;
translate: -50% 0;
}
}
.C_Voice .item .window--in.img--1 {
aspect-ratio: 237/249;
background-image: url("/img/C_Voice-window-img-1.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.C_Voice .item .window--in.img--1 {
width: 18.515625vw;
}
}
@media screen and (max-width: 767px) {
.C_Voice .item .window--in.img--1 {
width: 45.1282051282vw;
}
}
.C_Voice .item .window--in.img--2 {
aspect-ratio: 240/229;
background-image: url("/img/C_Voice-window-img-2.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.C_Voice .item .window--in.img--2 {
width: 18.75vw;
}
}
@media screen and (max-width: 767px) {
.C_Voice .item .window--in.img--2 {
width: 51.2820512821vw;
}
}
.C_Voice .item .window--in.img--3 {
aspect-ratio: 230/240;
background-image: url("/img/C_Voice-window-img-3.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.C_Voice .item .window--in.img--3 {
width: 17.96875vw;
}
}
@media screen and (max-width: 767px) {
.C_Voice .item .window--in.img--3 {
width: 45.3846153846vw;
}
}
@media screen and (min-width: 768px) {
.C_Voice .item .text.pad-1 {
padding-top: 3.125vw;
}
}
@media screen and (min-width: 768px) {
.C_Voice .item .text.pad-2 {
margin-bottom: -3.125vw;
}
}
@media screen and (min-width: 768px) {
.C_Voice .item .text.pad-3 {
padding-top: 1.5625vw;
}
}
.C_Voice .item .text .TX {
text-align: justify;
}
@media screen and (min-width: 768px) {
.C_Voice .item .text .TX {
font-size: max(1.40625vw, 14px);
line-height: 167%;
letter-spacing: 0.03em;
}
}
@media screen and (max-width: 767px) {
.C_Voice .item .text .TX {
font-size: 3.5897435897vw;
line-height: 179%;
letter-spacing: 0.02em;
}
}
/* -----------------------
C_TelComment
----------------------- */
.C_TelComment {
width: fit-content;
position: relative;
margin: 0 auto;
}
@media screen and (min-width: 768px) {
.C_TelComment {
padding: 0 1.5625vw;
}
}
@media screen and (max-width: 767px) {
.C_TelComment {
padding: 0 6.4102564103vw;
margin: 0 auto;
}
}
.C_TelComment::before, .C_TelComment::after {
content: "";
position: absolute;
left: 0;
translate: 0 -50%;
rotate: -25deg;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
background-repeat: repeat-y;
}
@media screen and (min-width: 768px) {
.C_TelComment::before, .C_TelComment::after {
top: 60%;
height: max(2.734375vw, 25px);
width: max(0.1953125vw, 1.8px);
}
}
@media screen and (max-width: 767px) {
.C_TelComment::before, .C_TelComment::after {
top: 63%;
height: 12.3076923077vw;
width: 0.641025641vw;
}
}
.C_TelComment::after {
left: unset;
right: 0;
rotate: 25deg;
}
.C_TelComment .TX {
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.06em;
}
@media screen and (min-width: 768px) {
.C_TelComment .TX {
font-weight: 700;
font-size: max(1.5625vw, 14px);
}
}
@media screen and (max-width: 767px) {
.C_TelComment .TX {
font-size: 5.1282051282vw;
font-weight: 500;
}
}
@media screen and (max-width: 767px) {
.C_TelComment .TX.center {
text-align: center;
letter-spacing: 0.03em;
}
}
/* -----------------------
C_AnotherClinic
----------------------- */
.C_AnotherClinic {
position: relative;
width: fit-content;
margin: 0 auto;
}
.C_AnotherClinic .TX {
font-weight: 700;
text-align: center;
line-height: 164%;
letter-spacing: 0.03em;
}
@media screen and (min-width: 768px) {
.C_AnotherClinic .TX {
font-size: max(1.953125vw, 18px);
}
}
@media screen and (max-width: 767px) {
.C_AnotherClinic .TX {
font-size: 4.1025641026vw;
}
}
.C_AnotherClinic::before {
content: "";
display: block;
position: absolute;
translate: -50% 0;
width: 108%;
}
@media screen and (min-width: 768px) {
.C_AnotherClinic::before {
aspect-ratio: 861/91;
width: 67.265625vw;
top: 65%;
left: 49%;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
}
@media screen and (max-width: 767px) {
.C_AnotherClinic::before {
aspect-ratio: 306/44;
width: 78.4615384615vw;
left: 47%;
top: 98%;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
}
/* -----------------------
C_Another
----------------------- */
.C_Another {
position: relative;
margin: 0 auto;
}
@media screen and (min-width: 768px) {
.C_Another {
width: max(68.359375vw, 650px);
padding: 2.96875vw 0;
}
}
@media screen and (max-width: 767px) {
.C_Another {
width: 89.7435897436vw;
padding: 10.2564102564vw 0;
}
}
.C_Another::before, .C_Another::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
background-position: top left;
background-repeat: repeat-x;
}
@media screen and (min-width: 768px) {
.C_Another::before, .C_Another::after {
height: 0.390625vw;
}
}
@media screen and (max-width: 767px) {
.C_Another::before, .C_Another::after {
height: 1.2820512821vw;
}
}
.C_Another::after {
top: unset;
bottom: 0;
}
.C_Another--in {
display: flex;
flex-wrap: wrap;
}
@media screen and (min-width: 768px) {
.C_Another--in {
gap: 1.015625vw 0;
}
}
@media screen and (max-width: 767px) {
.C_Another--in {
gap: 3.3333333333vw 0;
}
}
@media screen and (min-width: 768px) {
.C_Another--in .item {
width: 25%;
}
}
@media screen and (max-width: 767px) {
.C_Another--in .item {
width: 50%;
}
}
.C_Another--in .item .TX {
font-weight: 500;
line-height: 239%;
text-align: center;
letter-spacing: 0.06em;
color: #264670;
display: block;
width: fit-content;
margin: 0 auto;
}
@media screen and (min-width: 768px) {
.C_Another--in .item .TX {
font-size: max(1.25vw, 12px);
}
}
@media screen and (max-width: 767px) {
.C_Another--in .item .TX {
font-size: 3.5897435897vw;
}
}
/* -----------------------
C_Outline
----------------------- */
.Outline {
margin: 0 auto;
display: flex;
}
@media screen and (min-width: 768px) {
.Outline {
width: max(72.265625vw, 700px);
justify-content: space-between;
padding: max(17.1875vw, 150px) 0 4.6875vw;
}
}
@media screen and (max-width: 767px) {
.Outline {
width: 89.7435897436vw;
flex-direction: column;
gap: 42.3076923077vw;
padding: 42.3076923077vw 0 17.9487179487vw;
}
}
.C_Outline {
filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.25));
}
@media screen and (min-width: 768px) {
.C_Outline {
width: 48.6486486486%;
}
}
@media screen and (max-width: 767px) {
.C_Outline {
width: 100%;
}
}
.C_Outline--content {
width: 100%;
background-color: #FFFDF3;
position: relative;
z-index: 1;
height: 100%;
}
@media screen and (min-width: 768px) {
.C_Outline--content {
padding: 2.5vw 1.875vw 2.109375vw;
}
}
@media screen and (max-width: 767px) {
.C_Outline--content {
padding: 7.6923076923vw 5.1282051282vw;
}
}
.C_Outline--content--tags {
aspect-ratio: 200/160;
background-color: #FFFDF3;
position: absolute;
z-index: -1;
border-radius: 50%;
top: 0;
left: 50%;
translate: -50% -50%;
}
@media screen and (min-width: 768px) {
.C_Outline--content--tags {
width: 44.4444444444%;
}
}
@media screen and (max-width: 767px) {
.C_Outline--content--tags {
width: 44.2857142857%;
}
}
.C_Outline--content--tags .TX {
position: absolute;
left: 50%;
top: 0;
translate: -50% -60%;
}
.C_Outline--content--tags .TX.TX--1 {
aspect-ratio: 166/63;
}
@media screen and (min-width: 768px) {
.C_Outline--content--tags .TX.TX--1 {
width: 83%;
}
}
@media screen and (max-width: 767px) {
.C_Outline--content--tags .TX.TX--1 {
width: 78.7096774194%;
}
}
.C_Outline--content--tags .TX.TX--2 {
aspect-ratio: 150/62;
}
@media screen and (min-width: 768px) {
.C_Outline--content--tags .TX.TX--2 {
width: 75%;
}
}
@media screen and (max-width: 767px) {
.C_Outline--content--tags .TX.TX--2 {
width: 62.5806451613%;
}
}
.C_Outline--content--tags .tag {
position: absolute;
left: 50%;
translate: -50% 0%;
}
.C_Outline--content--tags .tag.tag--1 {
background-image: url("/img/C_Outline-tag-img-1.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 92/69;
}
@media screen and (min-width: 768px) {
.C_Outline--content--tags .tag.tag--1 {
top: 9.375%;
width: 46%;
}
}
@media screen and (max-width: 767px) {
.C_Outline--content--tags .tag.tag--1 {
top: 3.5087719298%;
width: 51.6129032258%;
}
}
.C_Outline--content--tags .tag.tag--2 {
background-image: url("/img/C_Outline-tag-img-2.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
aspect-ratio: 49/58;
}
@media screen and (min-width: 768px) {
.C_Outline--content--tags .tag.tag--2 {
top: 12.5%;
width: 24.5%;
}
}
@media screen and (max-width: 767px) {
.C_Outline--content--tags .tag.tag--2 {
top: 17.5438596491%;
width: 22.5806451613%;
}
}
.C_Outline--content--item {
width: 100%;
height: 100%;
}
@media screen and (min-width: 768px) {
.C_Outline--content--item {
display: flex;
flex-direction: column;
gap: 3.515625vw;
}
}
@media screen and (max-width: 767px) {
.C_Outline--content--item {
display: flex;
flex-direction: column;
gap: 3.8461538462vw;
}
}
@media screen and (min-width: 768px) {
.C_Outline--content--item .title {
padding: 0.9375vw 0 0;
}
}
@media screen and (max-width: 767px) {
.C_Outline--content--item .title {
padding: 2.5641025641vw 0 0;
}
}
.C_Outline--content--item .title .C_Rainbow {
margin: 0 auto;
gap: unset;
justify-content: space-between;
}
@media screen and (min-width: 768px) {
.C_Outline--content--item .title .C_Rainbow {
width: 63.184079602%;
}
}
@media screen and (max-width: 767px) {
.C_Outline--content--item .title .C_Rainbow {
width: 73.0769230769vw;
}
}
@media screen and (min-width: 768px) {
.C_Outline--content--item .title .C_Rainbow .ni {
width: 11.811023622%;
}
}
@media screen and (max-width: 767px) {
.C_Outline--content--item .title .C_Rainbow .ni {
width: 11.5789473684%;
}
}
@media screen and (min-width: 768px) {
.C_Outline--content--item .title .C_Rainbow .ji {
width: 9.842519685%;
}
}
@media screen and (max-width: 767px) {
.C_Outline--content--item .title .C_Rainbow .ji {
width: 9.8245614035%;
}
}
@media screen and (min-width: 768px) {
.C_Outline--content--item .title .C_Rainbow .i-V1 {
width: 12.2047244094%;
}
}
@media screen and (max-width: 767px) {
.C_Outline--content--item .title .C_Rainbow .i-V1 {
width: 12.2807017544%;
}
}
@media screen and (min-width: 768px) {
.C_Outline--content--item .title .C_Rainbow .ro {
width: 9.4488188976%;
}
}
@media screen and (max-width: 767px) {
.C_Outline--content--item .title .C_Rainbow .ro {
width: 9.4736842105%;
}
}
@media screen and (min-width: 768px) {
.C_Outline--content--item .title .C_Rainbow .no {
width: 12.2047244094%;
}
}
@media screen and (max-width: 767px) {
.C_Outline--content--item .title .C_Rainbow .no {
width: 12.2807017544%;
}
}
@media screen and (min-width: 768px) {
.C_Outline--content--item .title .C_Rainbow .i-V2 {
width: 12.2047244094%;
}
}
@media screen and (max-width: 767px) {
.C_Outline--content--item .title .C_Rainbow .i-V2 {
width: 12.2807017544%;
}
}
@media screen and (min-width: 768px) {
.C_Outline--content--item .title .C_Rainbow .e {
width: 10.2362204724%;
}
}
@media screen and (max-width: 767px) {
.C_Outline--content--item .title .C_Rainbow .e {
width: 10.1754385965%;
}
}
.C_Outline--content--item .content {
width: 100%;
}
@media screen and (min-width: 768px) {
.C_Outline--content--item .content .text {
margin-bottom: 0.78125vw;
}
}
@media screen and (max-width: 767px) {
.C_Outline--content--item .content .text {
margin-bottom: 3.0769230769vw;
}
}
.C_Outline--content--item .content .text .TX {
font-weight: 700;
line-height: 156%;
text-align: center;
}
@media screen and (min-width: 768px) {
.C_Outline--content--item .content .text .TX {
font-size: max(1.25vw, 12px);
}
}
@media screen and (max-width: 767px) {
.C_Outline--content--item .content .text .TX {
font-size: 3.3333333333vw;
}
}
.C_Outline--content--item .content .tel {
display: block;
}
@media screen and (min-width: 768px) {
.C_Outline--content--item .content .tel {
margin-bottom: 1.171875vw;
}
}
@media screen and (max-width: 767px) {
.C_Outline--content--item .content .tel {
margin-bottom: 11.5384615385vw;
}
}
.C_Outline--content--item .content .tel--main {
display: flex;
align-items: center;
justify-content: center;
}
@media screen and (min-width: 768px) {
.C_Outline--content--item .content .tel--main {
gap: 0.78125vw;
}
}
@media screen and (max-width: 767px) {
.C_Outline--content--item .content .tel--main {
gap: 1.7948717949vw;
}
}
.C_Outline--content--item .content .tel--main .icon {
aspect-ratio: 53/51;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.C_Outline--content--item .content .tel--main .icon {
width: 13.184079602%;
}
}
@media screen and (max-width: 767px) {
.C_Outline--content--item .content .tel--main .icon {
width: 11.7948717949vw;
}
}
.C_Outline--content--item .content .tel--main .number {
aspect-ratio: 292/30;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.C_Outline--content--item .content .tel--main .number {
width: 72.6368159204%;
}
}
@media screen and (max-width: 767px) {
.C_Outline--content--item .content .tel--main .number {
width: 65.641025641vw;
}
}
.C_Outline--content--item .content .tel--text {
text-align: center;
}
@media screen and (min-width: 768px) {
.C_Outline--content--item .content .tel--text {
margin-top: -0.390625vw;
}
}
.C_Outline--content--item .content .tel--text .TX {
font-weight: 300;
letter-spacing: 0.06em;
color: #264670;
}
@media screen and (min-width: 768px) {
.C_Outline--content--item .content .tel--text .TX {
font-size: 1.25vw;
}
}
@media screen and (max-width: 767px) {
.C_Outline--content--item .content .tel--text .TX {
font-size: 3.5897435897vw;
}
}
@media screen and (min-width: 768px) {
.C_Outline--content--item .content .add {
margin-bottom: 1.5625vw;
}
}
@media screen and (max-width: 767px) {
.C_Outline--content--item .content .add {
margin-bottom: 5.1282051282vw;
}
}
.C_Outline--content--item .content .add .TX {
font-weight: 700;
line-height: 1.5;
text-align: center;
}
@media screen and (min-width: 768px) {
.C_Outline--content--item .content .add .TX {
font-size: max(1.5625vw, 14px);
}
}
@media screen and (max-width: 767px) {
.C_Outline--content--item .content .add .TX {
font-size: 3.5897435897vw;
}
}
.C_Outline--content--item .content .closest {
display: flex;
justify-content: center;
}
@media screen and (min-width: 768px) {
.C_Outline--content--item .content .closest {
gap: 0.78125vw;
padding-bottom: 1.171875vw;
}
}
@media screen and (max-width: 767px) {
.C_Outline--content--item .content .closest {
gap: 1.2820512821vw;
padding-bottom: 3.8461538462vw;
}
}
.C_Outline--content--item .content .closest .TX {
font-weight: 700;
line-height: 1.5;
color: #264670;
}
@media screen and (min-width: 768px) {
.C_Outline--content--item .content .closest .TX {
font-size: max(1.40625vw, 14px);
}
}
@media screen and (max-width: 767px) {
.C_Outline--content--item .content .closest .TX {
font-size: 3.5897435897vw;
}
}
.C_Outline--content--item .content .closest--table .list::before {
content: "・";
}
@media screen and (min-width: 768px) {
.C_Outline--content--item .content .closest--table .list::before {
font-size: max(1.40625vw, 14px);
}
}
@media screen and (max-width: 767px) {
.C_Outline--content--item .content .closest--table .list::before {
font-size: 3.5897435897vw;
}
}
.C_Outline--content--item .content .closest--table .list .link {
text-decoration: underline;
transition: all 0.3s;
}
.C_Outline--content--item .content .closest--table .list .link:hover {
color: #FD9F85;
}
.C_Outline--content--item .map {
width: 100%;
}
@media screen and (min-width: 768px) {
.C_Outline--content--item .map {
height: 100%;
}
}
@media screen and (max-width: 767px) {
.C_Outline--content--item .map {
height: 72.3076923077vw;
}
}
.C_Outline--content--item .map iframe {
width: 100%;
height: 100%;
}
/* -----------------------
C_Switch
----------------------- */
.Switch {
position: relative;
margin: 0 auto;
}
@media screen and (min-width: 768px) {
.Switch {
width: max(68.359375vw, 650px);
padding: 2.34375vw 0 0;
}
}
@media screen and (max-width: 767px) {
.Switch {
width: 89.7435897436vw;
padding: 12.8205128205vw 0 0;
}
}
.Switch::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
background-position: top left;
background-repeat: repeat-x;
}
@media screen and (min-width: 768px) {
.Switch::before {
height: 0.390625vw;
}
}
@media screen and (max-width: 767px) {
.Switch::before {
height: 1.2820512821vw;
}
}
.Switch--inner {
display: flex;
align-items: center;
}
@media screen and (min-width: 768px) {
.Switch--inner {
padding: 0 2.5vw;
justify-content: space-between;
}
}
@media screen and (max-width: 767px) {
.Switch--inner {
gap: 4.358974359vw;
flex-direction: column;
}
}
.C_Switch {
display: block;
aspect-ratio: 209/157;
position: relative;
}
@media screen and (min-width: 768px) {
.C_Switch {
width: max(16.328125vw, 180px);
}
}
@media screen and (max-width: 767px) {
.C_Switch {
width: 53.8461538462vw;
}
}
.C_Switch .TX {
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
}
.C_Switch.instagram {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.C_Switch.instagram .TX {
width: 60%;
}
.C_Switch.event {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.C_Switch.event .TX {
width: 50%;
}
.C_Switch.counseling {
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.C_Switch.counseling .TX {
width: 70%;
}
/* -----------------------
third
----------------------- */
/* -----------------------
forth
----------------------- */
/* -----------------------
C_example
----------------------- */
/* -----------------------
KV
----------------------- */
.KV {
position: relative;
z-index: 10;
}
@media screen and (min-width: 768px) {
.KV {
height: max(55.859375vw, 500px);
padding: 7.8125vw 0 0;
}
}
@media screen and (max-width: 767px) {
.KV {
padding: 17.9487179487vw 0 0;
}
}
.KV--top {
width: fit-content;
z-index: 4;
}
@media screen and (min-width: 768px) {
.KV--top {
position: absolute;
top: 10.9375vw;
left: 11.71875vw;
}
}
@media screen and (max-width: 767px) {
.KV--top {
margin: 0 auto;
position: relative;
}
}
@media screen and (min-width: 768px) {
.KV--top .C_KVTag {
margin-left: auto;
}
}
@media screen and (min-width: 768px) {
.KV--top .C_Rainbow {
gap: 1.171875vw;
justify-content: center;
margin-top: -1.5625vw;
}
}
@media screen and (max-width: 767px) {
.KV--top .C_Rainbow {
gap: 2.0512820513vw;
margin-top: -2.5641025641vw;
}
}
@media screen and (min-width: 768px) {
.KV--top .C_KVSub {
margin-top: 1.171875vw;
}
}
@media screen and (max-width: 767px) {
.KV--top .C_KVSub {
margin-top: 2.5641025641vw;
}
}
.KV--middle {
width: fit-content;
z-index: 3;
}
@media screen and (min-width: 768px) {
.KV--middle {
position: absolute;
top: max(10.3125vw, 130px);
right: 9.765625vw;
}
}
@media screen and (max-width: 767px) {
.KV--middle {
position: relative;
margin: -2.5641025641vw 0 0 15.3846153846vw;
}
}
.KV--middle--img--1 {
aspect-ratio: 493/405;
background-image: url("/img/KV-middle-img-1.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.KV--middle--img--1 {
width: 38.515625vw;
}
}
@media screen and (max-width: 767px) {
.KV--middle--img--1 {
width: 76.4102564103vw;
}
}
.KV--middle--img--2 {
aspect-ratio: 565/332;
background-image: url("/img/KV-middle-img-2.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
}
@media screen and (min-width: 768px) {
.KV--middle--img--2 {
width: 44.140625vw;
top: 11.015625vw;
left: 4.140625vw;
}
}
@media screen and (max-width: 767px) {
.KV--middle--img--2 {
width: 80.2564102564vw;
top: 11.5384615385vw;
left: 11.5384615385vw;
}
}
.KV--bottom {
width: fit-content;
}
@media screen and (min-width: 768px) {
.KV--bottom {
position: absolute;
bottom: 0;
left: 14.0625vw;
z-index: 2;
}
}
@media screen and (max-width: 767px) {
.KV--bottom {
margin: -2.5641025641vw auto 0;
}
}
@media screen and (min-width: 768px) {
.KV--bottom .C_Tel {
margin-top: -0.390625vw;
}
}
.KV--rainbow {
aspect-ratio: 758/438;
background-image: url("/img/rainbow-bg.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
z-index: 1;
}
@media screen and (min-width: 768px) {
.KV--rainbow {
width: 59.21875vw;
top: max(11.09375vw, 140px);
left: 1.5625vw;
}
}
@media screen and (max-width: 767px) {
.KV--rainbow {
width: 120%;
top: 12.8205128205vw;
left: 50%;
translate: -50% 0;
rotate: 10deg;
}
}
/* -----------------------
subMain
----------------------- */
.subMain--title {
position: relative;
}
@media screen and (min-width: 768px) {
.subMain--title .C_Care {
margin-left: auto;
}
}
.subMain--title .subMain--img {
aspect-ratio: 318/354;
background-image: url("/img/subMain-img.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
}
@media screen and (min-width: 768px) {
.subMain--title .subMain--img {
width: 24.84375vw;
top: 50%;
translate: 0 -50%;
left: -9.765625vw;
}
}
@media screen and (max-width: 767px) {
.subMain--title .subMain--img {
width: 29.4871794872vw;
bottom: -25.641025641vw;
left: -2.5641025641vw;
}
}
/* -----------------------
greeting
----------------------- */
.greeting {
position: relative;
}
@media screen and (min-width: 768px) {
.greeting {
margin-top: 19.53125vw;
}
}
@media screen and (max-width: 767px) {
.greeting {
margin-top: 43.5897435897vw;
}
}
.greeting--img {
aspect-ratio: 252/375;
background-image: url("/img/greeting-img.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
}
@media screen and (min-width: 768px) {
.greeting--img {
width: 19.6875vw;
top: 2.34375vw;
right: -12.5vw;
}
}
@media screen and (max-width: 767px) {
.greeting--img {
width: 26.4102564103vw;
top: -20.5128205128vw;
right: 5.1282051282vw;
}
}
/* -----------------------
what
----------------------- */
.what {
position: relative;
}
@media screen and (min-width: 768px) {
.what {
margin-top: 12.5vw;
}
}
@media screen and (max-width: 767px) {
.what {
margin-top: 43.5897435897vw;
}
}
@media screen and (min-width: 768px) {
.what .C_CareContent {
margin-left: auto;
}
}
.what--img {
aspect-ratio: 431/414;
background-image: url("/img/what-img.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
}
@media screen and (min-width: 768px) {
.what--img {
width: 33.671875vw;
top: 0;
left: -16.40625vw;
}
}
@media screen and (max-width: 767px) {
.what--img {
width: 42.3076923077vw;
top: -46.1538461538vw;
right: 3.8461538462vw;
}
}
/* -----------------------
start
----------------------- */
.start {
position: relative;
}
@media screen and (min-width: 768px) {
.start {
margin-top: 20.3125vw;
}
}
@media screen and (max-width: 767px) {
.start {
margin-top: 64.1025641026vw;
}
}
.start .C_CareContent {
position: relative;
z-index: 2;
}
.start--img {
aspect-ratio: 523/368;
background-image: url("/img/start-img.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
z-index: 1;
}
@media screen and (min-width: 768px) {
.start--img {
width: 40.859375vw;
top: -19.53125vw;
right: -15.625vw;
}
}
@media screen and (max-width: 767px) {
.start--img {
width: 65.8974358974vw;
top: -61.5384615385vw;
left: -5.1282051282vw;
}
}
/* -----------------------
mainWhopper
----------------------- */
.main--whopper {
background: #faf3e3;
}
@media screen and (min-width: 768px) {
.main--whopper {
padding: 39.0625vw 0 14.6875vw;
margin-top: -7.8125vw;
}
}
@media screen and (min-width: 768px) and (max-width: 900px) and (min-width: 768px) {
.main--whopper {
padding-top: 54.6875vw;
margin-top: -15.625vw;
}
}
@media screen and (max-width: 767px) {
.main--whopper {
padding: 97.4358974359vw 0 15.3846153846vw;
margin-top: -12.8205128205vw;
}
}
.main--whopper--house {
margin: 0 auto;
background: #FFFDF3;
border-left: solid #264670;
border-right: solid #264670;
position: relative;
}
@media screen and (min-width: 768px) {
.main--whopper--house {
border-width: 0.3125vw;
width: max(85.15625vw, 730px);
}
}
@media screen and (max-width: 767px) {
.main--whopper--house {
border-width: 0.5128205128vw;
width: 89.7435897436vw;
}
}
.main--whopper--house--title {
position: absolute;
bottom: 100%;
left: 50%;
translate: -50% 0;
}
@media screen and (min-width: 768px) {
.main--whopper--house--title {
aspect-ratio: 1150/175;
width: max(89.84375vw, 750px);
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
display: flex;
align-items: center;
padding-left: 12.03125vw;
}
}
@media screen and (max-width: 767px) {
.main--whopper--house--title {
aspect-ratio: 447/103;
width: 114.6153846154vw;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
display: flex;
justify-content: center;
padding-top: 5.1282051282vw;
}
}
.main--whopper--house--title .TL {
aspect-ratio: 600/53;
}
@media screen and (min-width: 768px) {
.main--whopper--house--title .TL {
width: max(46.875vw, 400px);
}
}
@media screen and (max-width: 767px) {
.main--whopper--house--title .TL {
width: 89.7435897436vw;
}
}
.main--whopper--house--title .TL .img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* -----------------------
about
----------------------- */
.about {
position: relative;
}
@media screen and (min-width: 768px) {
.about {
padding: 4.6875vw 0 15.625vw;
display: flex;
flex-direction: column;
gap: max(7.8125vw, 80px);
}
}
@media screen and (max-width: 767px) {
.about {
padding: 7.6923076923vw 0 15.3846153846vw;
display: flex;
flex-direction: column;
gap: 19.2307692308vw;
}
}
.about::before {
content: "";
position: absolute;
background-size: cover;
bottom: 0;
left: 50%;
translate: -50% 0;
background-image: url('data:image/svg+xml;utf-8,');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-repeat: repeat-x;
}
@media screen and (min-width: 768px) {
.about::before {
width: 68.359375vw;
height: 0.390625vw;
}
}
@media screen and (max-width: 767px) {
.about::before {
width: 82.8205128205vw;
height: 0.7692307692vw;
}
}
.about .C_AboutWindow .item {
position: relative;
}
.about .C_AboutWindow .item .position-1 {
position: absolute;
}
@media screen and (min-width: 768px) {
.about .C_AboutWindow .item .position-1 {
top: -6.25vw;
right: -6.640625vw;
}
}
@media screen and (max-width: 767px) {
.about .C_AboutWindow .item .position-1 {
left: 50%;
translate: -50% 0;
top: 10.2564102564vw;
}
}
.about .C_AboutWindow .item .position-2 {
position: absolute;
}
@media screen and (min-width: 768px) {
.about .C_AboutWindow .item .position-2 {
top: -2.34375vw;
left: -3.125vw;
}
}
@media screen and (max-width: 767px) {
.about .C_AboutWindow .item .position-2 {
left: 50%;
translate: -50% 0;
top: 10.2564102564vw;
}
}
.about .C_AboutWindow .item .position-3 {
position: absolute;
}
@media screen and (min-width: 768px) {
.about .C_AboutWindow .item .position-3 {
top: -3.125vw;
right: -3.90625vw;
}
}
@media screen and (max-width: 767px) {
.about .C_AboutWindow .item .position-3 {
left: 50%;
translate: -50% 0;
top: 10.2564102564vw;
}
}
/* -----------------------
voice
----------------------- */
.voice {
position: relative;
}
@media screen and (min-width: 768px) {
.voice {
padding: 15.625vw 0 3.90625vw;
}
}
@media screen and (max-width: 767px) {
.voice {
padding: 25.641025641vw 0 34.6153846154vw;
}
}
@media screen and (min-width: 768px) {
.voice--title {
margin-bottom: 5.078125vw;
}
}
@media screen and (max-width: 767px) {
.voice--title {
margin-bottom: 10.2564102564vw;
}
}
.voice--title .TL {
aspect-ratio: 266/68;
margin: 0 auto;
}
@media screen and (min-width: 768px) {
.voice--title .TL {
width: max(20.78125vw, 200px);
}
}
@media screen and (max-width: 767px) {
.voice--title .TL {
width: 47.9487179487vw;
}
}
.voice--title .TL .img {
width: 100%;
height: 100%;
}
@media screen and (min-width: 768px) {
.voice .C_Voice {
margin-bottom: 10.9375vw;
}
}
@media screen and (max-width: 767px) {
.voice .C_Voice {
margin-bottom: 25.641025641vw;
}
}
.voice--tel {
position: relative;
z-index: 2;
}
@media screen and (min-width: 768px) {
.voice--tel {
display: flex;
flex-direction: column;
gap: 1.5625vw;
}
}
@media screen and (max-width: 767px) {
.voice--tel {
display: flex;
flex-direction: column;
gap: 1.5384615385vw;
}
}
.voice--tel .C_Tel {
margin: 0 auto;
}
.voice--img {
aspect-ratio: 1280/475;
position: absolute;
left: 50%;
translate: -50% 0;
background-image: url("/img/voice-img.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
z-index: 1;
}
@media screen and (min-width: 768px) {
.voice--img {
top: 94%;
width: 100vw;
}
}
@media screen and (max-width: 767px) {
.voice--img {
top: 97%;
width: 105.1282051282vw;
}
}
/* -----------------------
f-near
----------------------- */
.f-near {
position: relative;
}
@media screen and (min-width: 768px) {
.f-near {
padding: 21.5625vw 0 3.125vw;
}
}
@media screen and (max-width: 767px) {
.f-near {
padding: 16.9230769231vw 0 12.8205128205vw;
}
}
/* -----------------------
Another
----------------------- */
@media screen and (min-width: 768px) {
.Another {
display: flex;
flex-direction: column;
gap: 7.8125vw;
}
}
@media screen and (max-width: 767px) {
.Another {
display: flex;
flex-direction: column;
gap: 23.0769230769vw;
}
}
/*# sourceMappingURL=main.css.map */