*,
*::before,
*::after {
box-sizing: border-box;
min-inline-size: 0;
}
:root {
--font-size-12: .75rem;
--font-size-14: .875rem;
--font-size-16: 1rem;
--font-size-18: 1.125rem;
--font-size-21: 1.3125rem;
--font-size-24: 1.5rem;
--font-size-26: 1.625rem;
--font-size-32: 2rem;
--font-size-40: 2.5rem;
--font-size-48: 3rem;
--font-size-56: 3.5rem;
--font-size-64: 4rem;
--font-size-72: 4.5rem;
--font-size-80: 5rem;
--font-size-88: 5.5rem;
--font-size-128: 8rem;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
margin: 0;
}
body {
color: #111;
font-size: var(--font-size-18);
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: 500;
line-height: 1.8;
min-height: 100vh;
overflow-x: clip;
overflow-wrap: anywhere;
word-break: normal;
line-break: strict;
}
@media not all and (min-width: 768px){
body {
font-size: var(--font-size-15);
}
}
.__serif {
font-family: "Zen Old Mincho", serif;
}
h1, h2, h3, h4 {
font-family: "Zen Old Mincho", serif;
font-weight: 500;
}
:where(ul, ol) {
list-style: none;
list-style-type: '';
padding: unset;
margin: 0;
}
h1, h2, h3, h4, button, input, label {
line-height: 1.4;
}
img, picture {
display: block;
max-width: 100%;
height: auto;
}
:where(:any-link, button, [type='button'], [type='reset'], [type='submit'], label[for], select, summary, [role='tab'], [role='button']) {
cursor: pointer;
}
:where(button, [type='button'], [type='reset'], [type='submit']) {
touch-action: manipulation;
}
legend, fieldset {
all: unset;
}
input, button, textarea, select {
font: inherit;
}
:target {
scroll-margin-block: 5ex;
}
:focus:not(:focus-visible) {
outline: none;
}
@media (prefers-reduced-motion: reduce) {
*, ::before, ::after, ::backdrop {
background-attachment: scroll !important;
transition-delay: 0s !important;
transition-duration: 1ms !important;
animation-duration: 1ms !important;
animation-delay: 0s !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
}
a {
color: #111;
text-decoration: none;
transition: .3s;
}
a:hover {
color: #111;
text-decoration: none;
}
strong {
color: #3077CB;
}  .header {
position: fixed;
top: 20px;
left: 20px;
width: calc(100% - 40px);
z-index: 100;
}
.header__wrap {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-inline: auto;
padding: 20px 40px;
width: 1300px;
background-color: #fff;
box-shadow: 0 4px 10px rgb(170 201 237 / .7);
border-radius: 8px;
}
@media not all and (min-width: 1340px){
.header__wrap {
padding: 20px;
width: 100%;
}
}
.header__gnav-list {
display: flex;
justify-content: flex-end;
align-items: center;
flex-wrap: wrap;
gap: 0 40px;
font-weight: 700;
font-family: "Zen Old Mincho", serif;
}
.header__gnav-list .__contact a {
display: block;
padding: 8px 24px;
color: #fff;
background-image: radial-gradient(#31A2E2 0%, #186A99 100%);
border-radius: 50vh;
transition: .3s;
}
@media (any-hover: hover) {
.header__gnav-list .__contact a:hover {
text-decoration: none;
background-image: radial-gradient(#2189c4 0%, #04314b 100%);
}
}
.header__gnav-list .__contact a:focus-visible {
text-decoration: none;
background-image: radial-gradient(#2189c4 0%, #04314b 100%);
}
@media not all and (min-width: 940px){
.header__gnav-list .__text {
display: block !important;
position: absolute;
margin: -1px;
padding: 0;
width: 1px;
height: 1px;
white-space: nowrap;
border: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
contain: strict !important;
opacity: 0 !important;
}
}  .hotels-lp-section {
margin-bottom: 160px;
}
@media not all and (min-width: 768px){
.hotels-lp-section {
margin-bottom: 80px;
}
}
.hotels-lp-section__area {
margin-inline: auto;
padding-inline: 20px;
max-width: 1200px;
}
.hotels-lp-section__hgroup {
display: flex;
flex-direction: column;
margin-bottom: 80px;
}
@media not all and (min-width: 768px){
.hotels-lp-section__hgroup {
margin-bottom: 40px;
}
}
.hotels-lp-section__heading {
order: 2;
margin-bottom: 40px;
font-size: var(--font-size-56);
font-weight: 500;
line-height: 1.2;
}
@media not all and (min-width: 940px){
.hotels-lp-section__heading {
margin-bottom: 30px;
font-size: var(--font-size-40);
}
}
@media not all and (min-width: 768px){
.hotels-lp-section__heading {
font-size: var(--font-size-32);
}
.hotels-lp-section__heading br {
display: none;
}
}
.hotels-lp-about__heading {
color: #3077CB;
}
.hotels-lp-section__heading-en {
order: 1;
margin-bottom: 10px;
color: #C8AD37;
font-family: "Zen Old Mincho", serif;
}
.hotels-lp-section__text {
order: 3;
} .hotels-lp-mv {
position: relative;
margin-bottom: 200px;
padding-top: 120px;
}
@media not all and (min-width: 768px){
.hotels-lp-mv {
margin-bottom: 100px;
padding-top: 100px;
}
}
.hotels-lp-mv::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100vh;
background-color: #E1EFFF;
z-index: -1;
}
@media not all and (min-width: 768px){
.hotels-lp-mv::after {
top: auto;
bottom: -40px;
right: 0;
width: 50%;
height: 50vh;
}
}
.hotels-lp-mv__wrap {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.hotels-lp-mv__contents {
display: flex;
flex-direction: column;
width: 35%;
margin-top: 40px;
}
.hotels-lp-mv__image {
width: 60%;
}
@media not all and (min-width: 1100px){
.hotels-lp-mv__contents {
width: 40%;
}
.hotels-lp-mv__image {
width: 55%;
}
}
@media not all and (min-width: 768px){
.hotels-lp-mv__contents {
margin-bottom: 40px;
width: 100%;
}
.hotels-lp-mv__image {
width: 100%;
}
}
.hotels-lp-mv__heading {
order: 2;
margin-bottom: 40px;
font-size: var(--font-size-56);
font-weight: 500;
line-height: 1.2;
}
.hotels-lp-mv__heading-en {
order: 1;
margin-bottom: 20px;
color: #3077CB;
font-weight: 600;
text-transform: uppercase;
}
.hotels-lp-mv__text {
order: 3;
margin-bottom: 40px;
font-size: var(--font-size-21);
}
@media not all and (min-width: 1100px){
.hotels-lp-mv__heading {
margin-bottom: 40px;
font-size: var(--font-size-48);
}
}
@media not all and (min-width: 768px){
.hotels-lp-mv__heading {
margin-bottom: 30px;
}
.hotels-lp-mv__heading-en {
margin-bottom: 20px;
}
.hotels-lp-mv__text {
margin-bottom: 30px;
font-size: var(--font-size-18);
}
}
@media not all and (min-width: 390px){
.hotels-lp-mv__heading {
font-size: var(--font-size-40);
}
.hotels-lp-mv__heading-en {
font-size: var(--font-size-14);
}
.hotels-lp-mv__text {
font-size: var(--font-size-16);
}
}
.hotels-lp-mv__button {
order: 4;
}
.hotels-lp-mv__button a {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
padding: 20px 30px;
color: #fff;
font-size: var(--font-size-21);
font-weight: 700;
background-color: #316199;
border-radius: 8px;
}
.hotels-lp-mv__button a::after {
content: '';
display: inline-block;
width: 23px;
height: 15px;
background-image: url(//mmin-net.co.jp/wmmip/wp-content/themes/mmi/image/hotel-cleaning2601/hotels-lp-arrow.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
@media (any-hover: hover) {
.hotels-lp-mv__button a:hover {
background-color: #113155;
}
}
.hotels-lp-mv__button a:focus-visible {
background-color: #113155;
}
@media not all and (min-width: 768px){
.hotels-lp-mv__button a {
padding: 20px;
font-size: var(--font-size-18);
}
}
.hotels-lp-mv__image img {
border-radius: 8px;
}
.hotels-lp-about__text {
margin-bottom: 120px;
max-width: 800px;
font-size: var(--font-size-21);
}
.hotels-lp-about__text p {
margin-bottom: 40px;
}
@media not all and (min-width: 768px){
.hotels-lp-about__text {
margin-bottom: 60px;
font-size: var(--font-size-16);
}
.hotels-lp-about__text p {
margin-bottom: 30px;
}
}
.hotels-lp-about__flow-list {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
position: relative;
margin-bottom: 80px;
padding-bottom: 30px;
}
@media not all and (min-width: 768px){
.hotels-lp-about__flow-list {
margin-bottom: 40px;
padding-left: 20px;
}
}
.hotels-lp-about__flow-list::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 943px;
height: 47px;
background-image: url(//mmin-net.co.jp/wmmip/wp-content/themes/mmi/image/hotel-cleaning2601/hotels-lp-flow-arrow02.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
z-index: 1;
}
@media not all and (min-width: 1000px){
.hotels-lp-about__flow-list::after {
width: 90%;
}
}
@media not all and (min-width: 768px){
.hotels-lp-about__flow-list::after {
top: 50%;
bottom: auto;
left: 20px;
transform: translateX(-50%) translateY(-50%) rotate(90deg);
width: 600px;
}
}
@media not all and (min-width: 568px){
.hotels-lp-about__flow-list::after {
width: 500px;
}
}
.hotels-lp-about__flow-list li {
position: relative;
padding: 0 10px 40px;
width: 24%;
text-align: center;
border-radius: 8px;
}
@media not all and (min-width: 768px){
.hotels-lp-about__flow-list li {
padding: 0 10px 30px;
width: 100%;
}
}
.hotels-lp-about__flow-list li:nth-child(1){
background-color: #EEF5FC;
}
.hotels-lp-about__flow-list li:nth-child(2){
background-color: #D6E8FE;
}
.hotels-lp-about__flow-list li:nth-child(3){
background-color: #BDDBFF;
}
.hotels-lp-about__flow-list li:nth-child(4){
background-color: #AAD0FE;
}
.hotels-lp-about__flow-list li:not(:last-child)::after {
content: '';
position: absolute;
top: 50%;
right: -30px;
transform: translateY(-50%);
width: 41px;
height: 64px;
background-image: url(//mmin-net.co.jp/wmmip/wp-content/themes/mmi/image/hotel-cleaning2601/hotels-lp-flow-arrow01.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
z-index: 1;
}
@media not all and (min-width: 768px){
.hotels-lp-about__flow-list li:not(:last-child)::after {
display: none;
}
}
.hotels-lp-about__flow-list .__num {
margin-block: -50px 10px;
color: #3077CB;
font-size: var(--font-size-48);
}
.hotels-lp-about__flow-list .__heading {
margin-bottom: 20px;
font-size: var(--font-size-26);
}
@media not all and (min-width: 1000px){
.hotels-lp-about__flow-list .__num {
margin-block: -30px 10px;
font-size: var(--font-size-32);
}
.hotels-lp-about__flow-list .__heading {
font-size: var(--font-size-21);
}
.hotels-lp-about__flow-list .__text {
font-size: var(--font-size-16);
}
}
.hotels-lp-about__box {
padding: 40px;
border: 8px solid #3077CB;
border-radius: 8px;
}
.hotels-lp-about__box-heading {
margin-bottom: 30px;
font-size: var(--font-size-26);
text-align: center;
}
.hotels-lp-about__box-text {
font-size: var(--font-size-32);
font-weight: 700;
line-height: 1.4;
text-align: center;
}
@media not all and (min-width: 768px){
.hotels-lp-about__box {
padding: 30px 20px;
}
.hotels-lp-about__box-heading {
margin-bottom: 20px;
font-size: var(--font-size-21);
}
.hotels-lp-about__box-text {
font-size: var(--font-size-26);
}
}
@media not all and (min-width: 568px){
.hotels-lp-about__box-text {
text-align: left;
}
.hotels-lp-about__box-text br {
display: none;
}
}
.hotels-lp-problem__section {
padding-block: 160px;
background-color: #092545;
}
@media not all and (min-width: 768px){
.hotels-lp-problem__section {
padding-block: 80px;
}
}
.hotels-lp-problem__hgroup {
margin-inline: auto;
max-width: 800px;
color: #fff;
}
.hotels-lp-problem__contents {
margin-inline: auto;
max-width: 1000px;
}
.hotels-lp-problem__contents li {
padding: 40px 80px;
background-color: #EEF5FC;
border-radius: 8px;
}
@media not all and (min-width: 768px){
.hotels-lp-problem__contents li {
padding: 30px 20px;
background-color: #EEF5FC;
border-radius: 8px;
}
}
.hotels-lp-problem__contents li:not(:last-child) {
margin-bottom: 20px;
}
.hotels-lp-problem__contents-heading {
display: flex;
align-items: flex-end;
flex-wrap: wrap;
gap: 0 10px;
margin-bottom: 20px;
color: #316199;
}
.hotels-lp-problem__contents-heading .__num {
font-size: var(--font-size-21);
}
.hotels-lp-problem__contents-heading .__text {
font-size: var(--font-size-32);
}
@media not all and (min-width: 768px){
.hotels-lp-problem__contents-heading {
align-items: flex-start;
margin-bottom: 10px;
}
.hotels-lp-problem__contents-heading .__num {
margin-top: 10px;
width: 20px;
font-size: var(--font-size-14);
}
.hotels-lp-problem__contents-heading .__text {
width: calc(100% - 30px);
font-size: var(--font-size-24);
}
}
.hotels-lp-problem__contents-text {
padding-inline: 35px;
}
@media not all and (min-width: 768px){
.hotels-lp-problem__contents-text {
padding-inline: 30px 0;
}
}
.hotels-lp-cta__section {
padding: 80px 0;
background-image: url(//mmin-net.co.jp/wmmip/wp-content/themes/mmi/image/hotel-cleaning2601/hotels-lp-cta-bg.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
@media not all and (min-width: 468px){
.hotels-lp-cta__section {
padding: 40px 0;
}
}
.hotels-lp-cta-section__area {
margin-inline: auto;
padding-inline: 20px;
max-width: 1000px;
}
.hotels-lp-cta__button a {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
padding: 40px 80px;
width: 100%;
font-size: var(--font-size-32);
background-color: #fff;
border: 4px solid #fff;
border-radius: 8px;
}
.hotels-lp-cta__button a::after {
content: '';
display: inline-block;
width: 80px;
height: 68px;
background-image: url(//mmin-net.co.jp/wmmip/wp-content/themes/mmi/image/hotel-cleaning2601/hotels-lp-arrow-button.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
@media (any-hover: hover) {
.hotels-lp-cta__button a:hover {
border: 4px solid #316199;
}
}
.hotels-lp-cta__button a:focus-visible {
border: 4px solid #316199;
}
@media not all and (min-width: 940px){
.hotels-lp-cta__button a {
padding: 40px;
font-size: var(--font-size-26);
}
}
@media not all and (min-width: 768px){
.hotels-lp-cta__button a {
padding: 30px 20px;
font-size: var(--font-size-21);
line-height: 1.4;
}
.hotels-lp-cta__button a::after {
width: 47px;
height: 40px;
}
}
@media not all and (min-width: 568px){
.hotels-lp-cta__button a {
font-size: var(--font-size-18);
}
.hotels-lp-cta__button a .__text {
width: calc(100% - 67px);
}
.hotels-lp-cta__button a br {
display: none;
}
}
@media not all and (min-width: 390px){
.hotels-lp-cta__button a .__text {
margin-bottom: 20px;
width: 100%;
}
.hotels-lp-cta__button a br {
display: none;
}
.hotels-lp-cta__button a::after {
margin-inline: auto;
}
}
.hotels-lp-core-value__wrap {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
position: relative;
}
.hotels-lp-core-value__item {
display: flex;
flex-direction: column;
position: relative;
padding: 80px;
width: 46%;
background-image: linear-gradient(#F1F7FF 0, #B3D5FE 100%);
border-radius: 48px;
}
.hotels-lp-core-value__icon {
display: grid;
place-content: center;
width: 8%;
color: #C8AD37;
font-size: var(--font-size-56);
}
@media not all and (min-width: 940px){
.hotels-lp-core-value__item {
padding: 40px;
}
}
@media not all and (min-width: 768px){
.hotels-lp-core-value__item {
padding: 40px;
width: 100%;
border-radius: 24px;
}
.hotels-lp-core-value__icon {
width: 100%;
font-size: var(--font-size-32);
}
}
.hotels-lp-core-value__item .__heading {
order: 2;
margin-bottom: 40px;
font-size: var(--font-size-56);
text-align: center;
}
@media not all and (min-width: 940px){
.hotels-lp-core-value__item .__heading {
margin-bottom: 30px;
font-size: var(--font-size-40);
}
}
@media not all and (min-width: 768px){
.hotels-lp-core-value__item .__heading {
margin-bottom: 20px;
font-size: var(--font-size-32);
}
}
.hotels-lp-core-value__item .__heading-en {
order: 1;
margin-bottom: 10px;
color: #3077CB;
text-align: center;
}
.hotels-lp-core-value__item .__text {
order: 3;
}
.hotels-lp-technique__wrap {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row-reverse;
flex-wrap: wrap;
}
@media not all and (min-width: 568px){
.hotels-lp-technique__wrap {
align-items: flex-start;
flex-direction: column;
}
}
.hotels-lp-technique__wrap:not(:last-child) {
margin-bottom: 40px;
}
@media not all and (min-width: 568px){
.hotels-lp-technique__wrap:not(:last-child) {
margin-bottom: 64px;
}
}
.hotels-lp-technique__contents {
width: 65%;
}
.hotels-lp-technique__image {
width: 30%;
}
.hotels-lp-technique__heading {
margin-bottom: 30px;
font-size: var(--font-size-32);
}
@media not all and (min-width: 768px){
.hotels-lp-technique__contents {
width: 55%;
}
.hotels-lp-technique__image {
margin-bottom: 30px;
width: 40%;
}
.hotels-lp-technique__heading {
margin-bottom: 20px;
font-size: var(--font-size-24);
}
}
@media not all and (min-width: 568px){
.hotels-lp-technique__contents {
display: contents;
width: 100%;
}
.hotels-lp-technique__image {
order: 2;
width: 100%;
}
.hotels-lp-technique__heading {
order: 1;
}
.hotels-lp-technique__text {
order: 3;
}
}
.hotels-lp-technique__image img {
width: 100%;
border-radius: 8px;
}
.hotels-lp-partner {
position: relative;
padding-top: 80px;
}
@media not all and (min-width: 768px){
.hotels-lp-partner {
margin-bottom: 0;
padding-top: 0;
}
}
.hotels-lp-partner::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 40%;
height: 100%;
background-image: url(//mmin-net.co.jp/wmmip/wp-content/themes/mmi/image/hotel-cleaning2601/hotels-lp-partner-image.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: -1;
}
.hotels-lp-partner__box {
margin-left: auto;
padding: 80px;
width: 70%;
background-color: #fff;
}
@media not all and (min-width: 1100px){
.hotels-lp-partner__box {
padding: 64px 0 64px 40px;
}
}
@media not all and (min-width: 768px){
.hotels-lp-partner__box {
padding: 0;
width: 100%;
}
.hotels-lp-partner::after {
display: block;
position: relative;
top: auto;
left: auto;
width: 100%;
height: 480px;
}
}
.hotels-lp-partner__heading {
margin-bottom: 20px;
font-size: var(--font-size-26);
}
.hotels-lp-partner__list {
margin-bottom: 80px;
}
@media not all and (min-width: 768px){
.hotels-lp-partner__heading {
font-size: var(--font-size-21);
}
.hotels-lp-partner__list {
margin-bottom: 40px;
}
}
.hotels-lp-partner__list li {
margin-bottom: 4px;
}
.hotels-lp-contact {
padding-block: 160px;
background-color: #092545;
}
@media not all and (min-width: 768px){
.hotels-lp-contact {
padding-block: 80px;
}
}
.hotels-lp-contact .hotels-lp-section__hgroup {
margin-inline: auto;
width: 800px;
color: #fff;
}
@media not all and (min-width: 868px){
.hotels-lp-contact .hotels-lp-section__hgroup {
width: 100%;
}
}
.hotels-lp-contact__form {
margin-inline: auto;
padding: 80px 0;
max-width: 1000px;
background-color: #fff;
border-radius: 8px;
}
@media not all and (min-width: 768px){
.hotels-lp-contact__form {
padding: 40px 0;
}
}
.hotels-lp-contact__form-inner {
margin-inline: auto;
padding-inline: 20px;
max-width: 800px;
} .footer__company {
padding: 60px 10px;
color: #fff;
text-align: center;
background-color: #333;
}
.footer__company--title {
font-size: 14px;
}
.footer__company a {
display: block;
margin-inline: auto;
width: fit-content;
color: #fff;
text-decoration: underline;
}
.footer__company a:hover {
text-decoration: none;
}
.footer__company p {
margin-bottom: 20px;
font-size: 16px;
}
.footer__company p span {
font-weight: bold;
}
@media not all and (min-width: 768px){
.footer__company {
padding: 40px 10px;
}
}
.footer__group {
padding: 60px 10px;
}
.footer__group--title {
margin-bottom: 20px;
text-align: center;
}
.footer__group ul {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.footer__group li:not(:last-child) {
margin-right: 40px;
}
@media not all and (min-width: 568px){
.footer__group li {
width: 100%;
text-align: center;
}
.footer__group li:not(:last-child) {
margin-right: 0;
margin-bottom: 20px;
}
}
.copyright {
padding-bottom: 40px;
font-size: 12px;
text-align: center;
}
.totop {
position: fixed;
bottom: 210px;
right: 10px;
width: 40px;
z-index: 100;
}
.totop a {
display: block;
}
.totop img {
display: block;
width: 100%;
height: auto;
}
.footer__section {
position: relative;
background-color: #fff;
}
.footer__ban {
position: absolute;
bottom: 0;
right: 0;
}
.overlay,
.drawer-menu-container {
display: none;
}
@media not all and (min-width: 868px){
.overlay,
.drawer-menu-container {
display: block;
}
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
}
.drawer-menu-container {
position: fixed;
left: 1rem;
bottom: 1rem;
z-index: 2;
}
.toggle-button {
display: grid;
place-content: center;
width: 128px;
height: 48px;
color: #ffffff;
background-image: radial-gradient(#31A2E2 0%, #186A99 100%);
border: none;
border-radius: 9999px;
cursor: pointer;
transition: background-color 0.3s;
}
.drawer-menu {
display: none;
position: absolute;
bottom: 100%;
left: 0;
margin-bottom: 0.5rem;
padding: 32px;
width: 240px;
background-color: white;
border-radius: 8px;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.drawer-menu li {
margin-bottom: 0.5rem;
}
.drawer-menu a {
display: block;
padding: 0.5rem 1rem;
text-decoration: none;
transition: background-color 0.3s;
}
} .hotels-lp-problem__resolve {
margin-top: 56px;
padding: 40px 48px;
background: #1e2a4a;
border-radius: 4px;
text-align: center;
position: relative;
overflow: hidden;
}
.hotels-lp-problem__resolve::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 80% at 10% 50%, rgba(59,130,246,.18) 0%, transparent 70%),
radial-gradient(ellipse 50% 70% at 90% 50%, rgba(59,130,246,.12) 0%, transparent 70%);
pointer-events: none;
}
.hotels-lp-problem__resolve-label {
position: relative;
display: inline-block;
font-size: 13px;
font-weight: 700;
letter-spacing: .2em;
color: #60a5fa;
margin-bottom: 20px;
padding-bottom: 20px;
}
.hotels-lp-problem__resolve-label::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 24px;
height: 1px;
background: rgba(96,165,250,.5);
}
.hotels-lp-problem__resolve-text {
position: relative;
font-size: clamp(17px, 2.4vw, 22px);
font-weight: 700;
color: #fff;
line-height: 1.75;
letter-spacing: .02em;
}
@media (max-width: 768px) {
.hotels-lp-problem__resolve {
margin-top: 40px;
padding: 32px 24px;
}
}  .diag-section {
background: #f1f5f9;
padding: 64px 0;
}
.diag-wrap {
max-width: 760px;
margin: 0 auto;
padding: 0 24px;
} .diag-screen { display: none; }
.diag-screen.active { display: block; } .diag-start-inner {
background: linear-gradient(135deg, #1e2a4a 0%, #2d3f6e 100%);
border-radius: 20px;
padding: 52px 32px 48px;
text-align: center;
color: #fff;
}
.diag-badge {
display: inline-block;
background: rgba(59,130,246,.25);
border: 1px solid rgba(59,130,246,.5);
color: #93c5fd;
font-size: 12px;
padding: 4px 14px;
border-radius: 20px;
margin-bottom: 20px;
letter-spacing: .1em;
}
.diag-start-title {
font-size: clamp(22px, 4vw, 34px);
font-weight: 700;
line-height: 1.5;
margin-bottom: 16px;
}
.diag-start-title em {
color: #60a5fa;
font-style: normal;
}
.diag-start-lead {
font-size: 15px;
color: rgba(255,255,255,.75);
line-height: 1.75;
max-width: 480px;
margin: 0 auto 32px;
}
.diag-btn-start {
display: inline-block;
background: #3b82f6;
color: #fff;
font-size: 17px;
font-weight: 700;
padding: 18px 52px;
border-radius: 50px;
border: none;
cursor: pointer;
box-shadow: 0 4px 20px rgba(59,130,246,.45);
transition: all .2s;
font-family: inherit;
}
.diag-btn-start:hover { background: #2563eb; transform: translateY(-2px); }
.diag-start-meta {
font-size: 12px;
color: rgba(255,255,255,.45);
margin-top: 14px;
} .diag-q-header {
background: #1e2a4a;
border-radius: 14px 14px 0 0;
padding: 14px 20px 18px;
}
.diag-prog-info {
display: flex;
justify-content: space-between;
color: rgba(255,255,255,.6);
font-size: 12px;
margin-bottom: 8px;
}
.diag-prog-label { font-weight: 700; color: #60a5fa; }
.diag-prog-wrap { height: 6px; background: rgba(255,255,255,.15); border-radius: 3px; overflow: hidden; }
.diag-prog-fill { height: 100%; background: #3b82f6; border-radius: 3px; transition: width .4s; }
.diag-q-body {
background: #fff;
border-radius: 0 0 14px 14px;
padding: 28px 24px 32px;
margin-bottom: 0;
}
.diag-q-cat {
font-size: 11px;
font-weight: 700;
letter-spacing: .1em;
color: #3b82f6;
margin-bottom: 8px;
}
.diag-q-title {
font-size: clamp(18px, 3.5vw, 22px);
font-weight: 700;
line-height: 1.5;
margin-bottom: 6px;
color: #1e293b;
}
.diag-q-desc {
font-size: 13px;
color: #64748b;
line-height: 1.65;
margin-bottom: 20px;
}
.diag-q5-note {
background: rgba(59,130,246,.08);
border: 1px solid rgba(59,130,246,.25);
border-radius: 8px;
padding: 10px 14px;
font-size: 12px;
color: #1e2a4a;
line-height: 1.6;
margin-bottom: 18px;
}
.diag-check-list {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 20px;
}
.diag-check-item {
display: flex;
align-items: center;
gap: 14px;
background: #fff;
border: 2px solid #e2e8f0;
border-radius: 12px;
padding: 15px 18px;
cursor: pointer;
transition: all .15s;
user-select: none;
}
.diag-check-item:hover { border-color: #93c5fd; background: #f0f7ff; }
.diag-check-item.checked { border-color: #3b82f6; background: #eff6ff; }
.diag-cb {
width: 22px; height: 22px;
border: 2px solid #cbd5e1;
border-radius: 6px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
transition: all .15s;
}
.diag-check-item.checked .diag-cb { background: #3b82f6; border-color: #3b82f6; }
.diag-cb svg { display: none; }
.diag-check-item.checked .diag-cb svg { display: block; }
.diag-check-text { font-size: 15px; line-height: 1.4; color: #1e293b; }
.diag-none-hint { text-align: center; font-size: 13px; color: #64748b; margin-bottom: 14px; }
.diag-nav {
display: flex;
gap: 12px;
margin-top: 8px;
}
.diag-btn-back {
flex: 0 0 auto;
background: #f1f5f9;
color: #64748b;
border: 2px solid #e2e8f0;
border-radius: 12px;
padding: 15px 20px;
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: all .15s;
font-family: inherit;
display: inline-flex;
align-items: center;
}
.diag-btn-back:hover { background: #e2e8f0; }
.diag-btn-next {
flex: 1;
background: #3b82f6;
color: #fff;
border: none;
border-radius: 12px;
padding: 15px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: background .2s;
font-family: inherit;
}
.diag-btn-next:hover { background: #2563eb; } .diag-form-hd {
background: #1e2a4a;
border-radius: 14px 14px 0 0;
padding: 28px 20px;
color: #fff;
text-align: center;
}
.diag-form-hd-title { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.diag-form-hd-lead { font-size: 13px; color: rgba(255,255,255,.65); }
.diag-form-body {
background: #fff;
border-radius: 0 0 14px 14px;
padding: 28px 24px 32px;
}
.diag-fg { margin-bottom: 20px; }
.diag-fl {
display: block;
font-size: 13px;
font-weight: 700;
margin-bottom: 6px;
color: #1e293b;
}
.diag-req { color: #ef4444; margin-left: 4px; font-size: 12px; }
.diag-opt { color: #64748b; font-weight: 400; font-size: 11px; margin-left: 4px; }
.diag-fi {
width: 100%;
border: 2px solid #e2e8f0;
border-radius: 10px;
padding: 13px 16px;
font-size: 16px;
font-family: inherit;
background: #fff;
transition: border-color .15s;
color: #1e293b;
appearance: auto;
}
.diag-fi:focus { outline: none; border-color: #3b82f6; }
.diag-fi.error { border-color: #ef4444; }
.diag-ferr { color: #ef4444; font-size: 12px; margin-top: 4px; display: none; }
.diag-ferr.show { display: block; }
.diag-consent {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 14px 16px;
font-size: 12px;
color: #64748b;
line-height: 1.75;
margin-bottom: 22px;
}
.diag-btn-submit {
width: 100%;
background: #3b82f6;
color: #fff;
border: none;
border-radius: 12px;
padding: 17px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: background .2s;
font-family: inherit;
}
.diag-btn-submit:hover:not(:disabled) { background: #2563eb; }
.diag-btn-submit:disabled { background: #94a3b8; cursor: not-allowed; } .diag-result-hd {
background: linear-gradient(135deg, #1e2a4a 0%, #2d3f6e 100%);
border-radius: 14px;
padding: 36px 20px 32px;
color: #fff;
text-align: center;
margin-bottom: 20px;
}
.diag-result-hd-label {
font-size: 12px;
font-weight: 600;
letter-spacing: .12em;
color: rgba(255,255,255,.55);
margin-bottom: 18px;
}
.diag-rank-badge {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 108px; height: 108px;
border-radius: 50%;
font-weight: 900;
margin-bottom: 18px;
}
.diag-rank-letter { font-size: 54px; line-height: 1; }
.diag-rank-sub { font-size: 11px; font-weight: 700; opacity: .85; }
.diag-rank-s { background: #3b82f6; box-shadow: 0 0 32px rgba(59,130,246,.45); }
.diag-rank-a { background: #2563eb; box-shadow: 0 0 32px rgba(37,99,235,.45); }
.diag-rank-b { background: #1d4ed8; box-shadow: 0 0 32px rgba(29,78,216,.45); }
.diag-rank-c { background: #1e2a4a; box-shadow: 0 0 32px rgba(30,42,74,.6); border: 2px solid rgba(255,255,255,.2); }
.diag-rank-title { font-size: 22px; font-weight: 700; margin-bottom: 10px; }
.diag-rank-msg {
font-size: 14px;
color: rgba(255,255,255,.8);
line-height: 1.75;
max-width: 500px;
margin: 0 auto;
}
.diag-rank-total { font-size: 12px; color: rgba(255,255,255,.45); margin-top: 14px; }
.diag-result-body { padding-bottom: 8px; }
.diag-score-card,
.diag-checked-card {
background: #fff;
border-radius: 14px;
padding: 22px 24px;
margin-bottom: 16px;
box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.diag-score-card-title {
font-size: 12px;
font-weight: 700;
color: #64748b;
margin-bottom: 18px;
letter-spacing: .05em;
}
.diag-score-rows { display: flex; flex-direction: column; gap: 14px; }
.diag-score-row { display: flex; align-items: center; gap: 12px; }
.diag-score-name { font-size: 13px; width: 90px; flex-shrink: 0; color: #1e293b; }
.diag-sbar-wrap { flex: 1; height: 8px; background: #f1f5f9; border-radius: 4px; overflow: hidden; }
.diag-sbar-fill { height: 100%; border-radius: 4px; background: #3b82f6; transition: width .9s ease; }
.diag-score-val { font-size: 13px; font-weight: 700; width: 44px; text-align: right; flex-shrink: 0; color: #1e293b; }
.diag-checked-list {
list-style: none;
padding: 0;
margin: 12px 0 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.diag-checked-list li {
font-size: 13px;
color: #1e293b;
line-height: 1.5;
padding-left: 18px;
position: relative;
}
.diag-checked-list li::before {
content: '✓';
position: absolute;
left: 0;
color: #3b82f6;
font-weight: 700;
}
.diag-checked-cat {
display: inline-block;
font-size: 10px;
font-weight: 700;
color: #3b82f6;
margin-right: 6px;
letter-spacing: .05em;
}
.diag-warn-card {
background: rgba(239,68,68,.06);
border: 1px solid rgba(239,68,68,.3);
border-radius: 14px;
padding: 20px 24px;
margin-bottom: 16px;
box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.diag-warn-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.diag-warn-tag {
font-size: 10px;
font-weight: 700;
letter-spacing: .05em;
padding: 3px 8px;
border-radius: 4px;
background: rgba(239,68,68,.12);
color: #b91c1c;
}
.diag-warn-name { font-size: 16px; font-weight: 700; color: #1e293b; }
.diag-warn-text { font-size: 13px; line-height: 1.75; color: #1e293b; }
.diag-cta-card {
background: linear-gradient(135deg, #1e2a4a 0%, #2d3f6e 100%);
border-radius: 14px;
padding: 30px 24px;
text-align: center;
color: #fff;
margin-bottom: 8px;
}
.diag-cta-title { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.diag-cta-text { font-size: 13px; color: rgba(255,255,255,.7); line-height: 1.75; margin-bottom: 22px; }
.diag-btn-cta {
display: inline-block;
background: #3b82f6;
color: #fff;
font-size: 15px;
font-weight: 700;
padding: 14px 38px;
border-radius: 50px;
border: none;
cursor: pointer;
text-decoration: none;
transition: background .2s;
}
.diag-btn-cta:hover { background: #2563eb; } @media (max-width: 600px) {
.diag-section { padding: 40px 0; }
.diag-start-inner { padding: 40px 20px 36px; }
.diag-btn-start { padding: 16px 36px; font-size: 15px; }
.diag-q-body, .diag-form-body { padding: 24px 16px 28px; }
.diag-score-card, .diag-checked-card { padding: 18px 16px; }
.diag-warn-card { padding: 18px 16px; }
.diag-cta-card { padding: 24px 16px; }
}