@charset "UTF-8";
 a {
text-decoration: none;
}
:root {
--border-radius-default: 5px;
--shadow-default: 0px 6px 10px 0px rgba(0, 0, 0, 0.04);
}
@media (min-width: 768px) {
:root {
--border-radius-default: 10px;
--shadow-default: 0px 10px 15px 0px rgba(0, 0, 0, 0.04);
}
}
body {
font-family: "Noto Sans JP", sans-serif !important;
letter-spacing: 0.05em;
background: #f4f4f4;
}
.top #content {
padding-top: 0;
}
.py-section {
padding: 50px 0;
}
@media (min-width: 768px) {
.py-section {
padding: 100px 0;
}
}
.mb-m {
margin-bottom: 40px;
}
@media (min-width: 768px) {
.mb-m {
margin-bottom: 56px;
}
}
.py-container {
padding-top: 60px;
padding-bottom: 60px;
}
@media (min-width: 768px) {
.py-container {
padding-top: 100px;
padding-bottom: 100px;
}
}
.container {
max-width: 970px;
}
@media (min-width: 768px) {
a[href^="tel:"] {
pointer-events: none;
}
} .l-content {
margin: 0;
padding: 0;
}
.l-article {
max-width: none;
width: 100vw;
} .p-section-ttl {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 12px;
margin-bottom: 40px;
line-height: 1.25;
}
@media (min-width: 768px) {
.p-section-ttl {
margin-bottom: 56px;
}
}
@media (min-width: 768px) {
.p-section-ttl {
gap: 18px;
}
}
.p-section-ttl__main {
font-size: 1.625rem;
font-weight: 700;
}
@media (min-width: 768px) {
.p-section-ttl__main {
font-size: 2.5rem;
}
}
.p-section-ttl__sub {
font-size: 0.875rem;
color: #f18d00;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 12px;
}
@media (min-width: 768px) {
.p-section-ttl__sub {
gap: 18px;
}
}
.p-section-ttl__sub::after {
content: "";
height: 2px;
width: 86px;
background-color: #f18d00;
}
@media (min-width: 768px) {
.p-section-ttl__sub::after {
width: 190px;
}
}
.p-section-ttl02 {
font-size: 1.625rem;
font-weight: 700;
text-align: center;
margin-bottom: 40px;
line-height: 1.5;
}
@media (min-width: 768px) {
.p-section-ttl02 {
font-size: 2.5rem;
margin-bottom: 56px;
}
}
.p-section-ttl03 {
font-size: 1.25rem;
font-weight: 700;
line-height: 1.25;
text-align: center;
line-height: 1.5;
}
@media (min-width: 768px) {
.p-section-ttl03 {
font-size: 1.5rem;
}
}
.p-philosophy {
background: repeat-x url(//kaitori.komorebi-ouchi.jp/wp-content/themes/swell_child/asset/img/philosophy-pic-001.svg) bottom center/auto 120px;
padding-bottom: 100px !important;
}
@media (min-width: 768px) {
.p-philosophy {
padding-bottom: 230px !important;
background-size: auto 250px;
padding-top: 220px !important;
}
}
.p-philosophy__lead {
font-size: 1.06rem;
line-height: 2;
text-align: center;
}
@media (min-width: 768px) {
.p-philosophy__lead {
font-size: 1.25rem;
}
} .p-btn {
border-radius: 50vw;
padding: 18px;
width: 100%;
box-shadow: var(--shadow-default);
line-height: 1.25;
position: relative;
color: #f18d00;
border: 2px solid #f18d00;
background-color: #fff;
}
@media (min-width: 768px) {
.p-btn {
padding: 24px;
max-width: 600px;
border: 3px solid #f18d00;
}
}
.p-btn__txt {
font-size: 1.25rem;
font-weight: 700;
}
@media (min-width: 768px) {
.p-btn__txt {
font-size: 1.75rem;
}
}
.p-btn::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 20px;
width: 20px;
height: 20px;
margin: auto;
border-radius: 20px;
background-color: #f18d00;
}
@media (min-width: 768px) {
.p-btn::before {
width: 32px;
height: 32px;
right: 32px;
}
}
.p-btn::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 27px;
width: 8px;
height: 8px;
margin: auto;
border-top: 3px solid #fff;
border-right: 3px solid #fff;
transform: rotate(45deg);
box-sizing: border-box;
}
@media (min-width: 768px) {
.p-btn::after {
right: 43px;
width: 12px;
height: 12px;
}
}
.p-btn:hover {
background-color: #f18d00;
color: #fff;
}
.p-btn:hover::before {
background-color: #fff;
}
.p-btn:hover::after {
border-color: #f18d00;
}
.p-cta-btn {
display: flex;
}
.p-cta-btn a {
position: relative;
flex: 0 0 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
gap: 4px;
padding: 20px 16px;
text-align: center;
}
.p-cta-btn a::before {
content: "";
width: 30px;
aspect-ratio: 1;
background: no-repeat url(//kaitori.komorebi-ouchi.jp/wp-content/themes/swell_child/asset/img/cta-ic-001.svg) top center/contain;
}
@media (min-width: 768px) {
.p-cta-btn a::before {
width: 50px;
}
}
@media (min-width: 768px) {
.p-cta-btn a {
height: 240px;
box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.1);
padding-right: 28px;
padding-left: 28px;
padding-top: 0;
padding-bottom: 0;
}
}
.p-cta-btn a:hover {
transition: all 0.3s ease;
background-color: #ea6544;
}
.p-cta-btn__tel {
background-color: #f18d00;
color: #fff;
}
@media (min-width: 768px) {
.p-cta-btn__tel {
border-radius: 10px 0 0 10px;
}
.p-cta-btn__tel::after {
content: none !important;
}
}
.p-cta-btn__link {
background-color: #f87454;
color: #fff;
}
@media (min-width: 768px) {
.p-cta-btn__link {
border-radius: 0 10px 10px 0;
}
}
.p-cta-btn__link::before {
background-image: url(//kaitori.komorebi-ouchi.jp/wp-content/themes/swell_child/asset/img/cta-ic-002.svg) !important;
}
.p-cta-btn__main {
font-size: 1.2rem;
font-weight: 700;
letter-spacing: 0;
}
@media (min-width: 768px) {
.p-cta-btn__main {
font-size: 2rem;
}
}
.p-cta-btn__sub {
font-size: 0.9rem;
}
@media (min-width: 768px) {
.p-cta-btn__sub {
font-size: 1.2rem;
}
}
.p-cta-btn__info {
font-size: 1rem;
padding-top: 20px;
letter-spacing: 0;
}
.p-cta-btn-box {
position: relative;
z-index: 2;
}
@media (max-width: 767.98px) {
.p-cta-btn-box .container {
max-width: none;
padding: 0;
}
}
@media (min-width: 768px) {
.p-cta-btn-box--case01 {
margin-bottom: -120px;
}
}
@media (min-width: 768px) {
.p-cta-btn-box--case02 {
margin-bottom: -120px;
}
}
.p-fixed-bottom-btn {
border-radius: 5px;
line-height: 1.2;
font-weight: 700;
padding: 8px 8px 8px 45px;
width: 100%;
font-size: 1rem;
height: 100%;
display: grid;
place-content: center;
position: relative;
cursor: pointer;
}
@media (min-width: 768px) {
.p-fixed-bottom-btn {
font-size: 1.2rem;
padding: 16px 16px;
}
}
.p-fixed-bottom-btn::before {
position: absolute;
content: "";
width: 28px;
aspect-ratio: 1;
background: no-repeat url(//kaitori.komorebi-ouchi.jp/wp-content/themes/swell_child/asset/img/cta-ic-001.svg) top center/contain;
left: 14px;
top: 50%;
transform: translateY(-50%);
}
.p-fixed-bottom-btn:hover {
opacity: 0.8;
background-color: inherit !important;
color: #fff !important;
transition: 0.3s;
}
.p-fixed-bottom-btn--tel {
background-color: #f18d00;
color: #fff;
}
.p-fixed-bottom-btn--tel:hover {
background-color: #f18d00 !important;
}
@media (min-width: 768px) {
.p-fixed-bottom-btn--tel {
display: none;
}
}
.p-fixed-bottom-btn .small {
font-size: 0.75rem;
}
.p-fixed-bottom-btn--line {
background-color: #06c755;
color: #fff;
}
@media (min-width: 768px) {
.p-fixed-bottom-btn--line {
width: 130px;
aspect-ratio: 1;
border-radius: 50vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 1rem;
box-shadow: var(--shadow-default);
}
}
.p-fixed-bottom-btn--line:hover {
background-color: #06c755 !important;
}
.p-fixed-bottom-btn--line::before {
width: 45px;
left: 8px;
background-image: url(//kaitori.komorebi-ouchi.jp/wp-content/themes/swell_child/asset/img/line-ic.png);
}
@media (min-width: 768px) {
.p-fixed-bottom-btn--line::before {
position: static;
transform: none;
margin-top: -14px;
}
}
.p-fixed-bottom {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(255, 255, 255, 0.8);
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
padding: 6px 0;
z-index: 9999;
transition: 0.3s;
}
@media (min-width: 768px) {
.p-fixed-bottom {
padding: 0;
background-color: transparent;
right: 20px;
bottom: 100px;
box-shadow: none;
left: auto;
}
} .p-mv {
margin: 0px;
}
.p-mv p {
margin-bottom: 0;
}
.p-mv .p-btn {
width: 240px;
padding: 12px;
}
@media (max-width: 575.98px) {
.p-mv .p-btn {
width: 80px;
height: 80px;
padding: 8px;
display: grid;
place-content: center;
}
}
@media (max-width: 575.98px) {
.p-mv .p-btn::before {
bottom: -38px;
right: -4px;
}
}
@media (max-width: 575.98px) {
.p-mv .p-btn::after {
bottom: -36px;
right: 3px;
}
}
.p-mv .p-btn .p-btn__txt {
font-size: 1rem;
}
@media (max-width: 575.98px) {
.p-mv .p-btn .p-btn__txt {
font-size: 0.85rem;
line-height: 1.2;
letter-spacing: 0;
text-align: left;
}
}
@media (min-width: 768px) {
.p-mv .p-btn .p-btn__txt {
font-size: 1.5rem;
}
}
@media (min-width: 768px) {
.p-mv .p-btn {
width: 400px;
padding: 20px;
}
}
@media (min-width: 576px) {
.p-mv {
margin: 0px 0px 56px 18px;
}
}
@media (min-width: 768px) {
.p-mv {
margin: 24px 24px 110px 24px;
}
}
@media (min-width: 1200px) {
.p-mv {
margin: 40px 40px 120px 40px;
}
}
.p-mv__contents {
position: relative;
}
@media (max-width: 575.98px) {
.p-mv__contents {
height: 500px;
}
}
.p-mv__imgArea {
width: 80%;
margin-left: auto;
border-radius: 0 0 0 100px;
overflow: hidden;
aspect-ratio: 1;
}
@media (max-width: 575.98px) {
.p-mv__imgArea {
height: 440px;
}
}
@media (min-width: 576px) {
.p-mv__imgArea {
width: 75%;
height: 500px;
}
}
@media (min-width: 768px) {
.p-mv__imgArea {
aspect-ratio: none;
border-radius: 0 0 0 300px;
height: 670px;
width: 77%;
}
}
@media (min-width: 992px) {
.p-mv__imgArea {
height: 670px;
}
}
@media (min-width: 1200px) {
.p-mv__imgArea {
height: 720px;
}
}
@media (min-width: 1400px) {
.p-mv__imgArea {
height: 830px;
}
}
.p-mv__imgArea figure {
width: 100%;
height: 100%;
}
.p-mv__txtArea {
position: absolute;
top: 20px;
left: 0;
display: flex;
flex-direction: column;
gap: 24px;
width: 100%;
}
@media (max-width: 575.98px) {
.p-mv__txtArea {
padding-left: 18px;
padding-bottom: 32px;
}
}
@media (min-width: 576px) {
.p-mv__txtArea {
top: 10%;
}
}
@media (min-width: 768px) {
.p-mv__txtArea {
max-width: 64%;
gap: 40px;
top: 50%;
transform: translateY(-50%);
}
}
.p-mv__txt-l {
font-weight: 700;
font-size: 1.2rem;
}
@media (min-width: 768px) {
.p-mv__txt-l {
font-size: clamp(32px, 3.8vw, 56px);
}
}
.p-mv__txt-m {
font-weight: 700;
font-size: 1.1rem;
}
@media (min-width: 768px) {
.p-mv__txt-m {
font-size: clamp(24px, 2.7vw, 40px);
}
}
.p-mv__txt-s {
font-size: 0.9rem;
font-weight: 700;
}
@media (max-width: 575.98px) {
.p-mv__txt-s {
letter-spacing: 0;
}
}
@media (min-width: 768px) {
.p-mv__txt-s {
font-size: clamp(18px, 2.1vw, 24px);
}
}
.p-mv__txt-ss {
font-size: 0.85rem;
font-weight: 700;
}
@media (min-width: 768px) {
.p-mv__txt-ss {
font-size: 1.125rem;
}
}
.p-mv__number {
display: flex;
line-height: 1;
align-items: baseline;
}
.p-mv__number-01 {
font-size: 86px;
font-weight: 700;
}
@media (min-width: 768px) {
.p-mv__number-01 {
font-size: clamp(70px, 9.12vw, 160px);
}
}
.p-mv__number-02 {
font-weight: 700;
font-size: 24px;
position: relative;
}
@media (min-width: 768px) {
.p-mv__number-02 {
font-size: clamp(30px, 3.9vw, 70px);
}
}
.p-mv__number-02 span {
position: absolute;
top: 0;
right: 0;
font-size: 1rem;
font-weight: 400;
transform: translateY(-100%);
}
.p-mv__info {
font-size: 6px;
letter-spacing: 0;
text-shadow: 3px 3px 3px #fff, -3px 3px 3px #fff, 3px -3px 3px #fff, -3px -3px 3px #fff;
}
@media (min-width: 576px) {
.p-mv__info {
font-size: 10px;
}
}
.p-mv__balloon {
position: relative;
background: #fff;
padding: 8px 12px;
border-radius: 50vw;
display: inline-block;
}
@media (max-width: 575.98px) {
.p-mv__balloon {
letter-spacing: 0;
}
}
.p-mv .slick-dots {
top: auto;
bottom: -40px !important;
}
@media (min-width: 768px) {
.p-mv .slick-dots {
bottom: -60px !important;
}
}
.p-mv .slick-dots li button:before {
font-size: 0.75rem !important;
}
.p-mv .slick-arrow {
z-index: 1;
}
.p-mv .slick-next.slick-arrow {
right: 3rem;
}
.p-mv .slick-prev.slick-arrow {
left: 3rem;
}
.p-mv .slick-prev.slick-disabled:before,
.p-mv .slick-next.slick-disabled:before {
opacity: 0;
}
.p-mv .slick-track {
display: flex;
}
.p-mv .slick-slide {
height: auto !important;
}
@media (max-width: 575.98px) {
.p-mv .slick-dotted.slick-slider {
margin-bottom: 60px;
}
}
@media (max-width: 575.98px) {
.p-mv .slick-dots li button:before {
opacity: 1;
color: #737373;
}
} .p-mv__imgArea img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: bottom center;
object-position: bottom center;
}
@media (min-width: 768px) {
.p-mv__imgArea img {
-o-object-position: bottom center;
object-position: bottom center;
}
}
.img-animation {
animation: mv-pan 10s linear forwards;
}
.p-mv__contents--01 .img-animation {
animation: mv-pan-02 10s linear forwards;
}
.p-mv__contents--01 {
--text-shadw: 2px 2px 1px #fff, -2px 2px 1px #fff, 2px -2px 1px #fff,
-2px -2px 1px #fff;
}
.p-mv__contents--01 .p-mv__imgArea img {
-o-object-position: center bottom;
object-position: center bottom;
}
@media (min-width: 576px) {
.p-mv__contents--01 .p-mv__imgArea img {
-o-object-position: 27% center;
object-position: 27% center;
}
}
@media (min-width: 768px) {
.p-mv__contents--01 .p-mv__imgArea img {
-o-object-position: 20% center;
object-position: 20% center;
}
}
@media (min-width: 992px) {
.p-mv__contents--01 .p-mv__imgArea img {
-o-object-position: 40% center;
object-position: 40% center;
}
}
.p-mv__contents--01 .p-mv__txt-l {
text-shadow: var(--text-shadw);
font-size: 1.7rem;
}
@media (min-width: 768px) {
.p-mv__contents--01 .p-mv__txt-l {
font-size: clamp(32px, 3.8vw, 56px);
}
}
.p-mv__contents--01 .p-mv__number {
text-shadow: var(--text-shadw);
}
@media (min-width: 768px) {
.p-mv__contents--01 .p-mv__txtArea {
max-width: 70%;
}
}
.p-mv__contents--01 .p-mv__block-02 {
margin-top: -12px;
}
@media (min-width: 768px) {
.p-mv__contents--01 .p-mv__block-02 {
margin-top: -20px;
}
}
.p-mv__contents--01 .p-mv__block-03 {
display: inline-block;
text-shadow: var(--text-shadw);
margin-top: -12px;
}
@media (min-width: 768px) {
.p-mv__contents--01 .p-mv__block-03 {
margin-top: -20px;
}
}
.p-mv__contents--01 .p-mv__block-03__inn {
background-color: rgba(255, 255, 255, 0.7);
padding: 0.5em;
display: inline-block;
margin-bottom: 0.9em;
}
.p-mv__contents--01 .p-mv__block-03 .p-mv__txt-s {
line-height: 1.2;
}
@media (max-width: 767.98px) {
.p-mv__contents--01 .p-mv__block-03 .p-mv__txt-s {
font-size: clamp(10px, 2.44vw, 13px);
}
}
.p-mv__contents--02 .p-mv__imgArea img {
-o-object-position: bottom center;
object-position: bottom center;
}
@media (min-width: 768px) {
.p-mv__contents--02 .p-mv__imgArea img {
-o-object-position: 70% center;
object-position: 70% center;
}
}
@media (max-width: 575.98px) {
.p-mv__contents--02 .p-mv__txtArea {
top: 30px;
}
}
.p-mv__contents--02 .p-mv__block-01 {
text-shadow: 0 0 2px #fff;
}
@media (max-width: 767.98px) {
.p-mv__contents--02 .p-mv__block-01 .p-mv__txt-l {
font-size: 1.4rem;
}
}
.p-mv__contents--02 .p-mv__block-02 {
margin-top: -6px;
}
@media (min-width: 576px) {
.p-mv__contents--02 .p-mv__block-02 {
margin-top: 8px;
}
}
@media (min-width: 768px) {
.p-mv__contents--02 .p-mv__block-02 {
margin-top: 12px;
}
}
.p-mv__contents--02 .p-mv__block-03 {
margin-top: -12px;
}
@media (min-width: 768px) {
.p-mv__contents--02 .p-mv__block-03 {
margin-top: -20px;
}
}
.p-mv__contents--02 .p-mv__block-04 {
font-size: 0.9rem;
margin-top: -12px;
}
@media (min-width: 768px) {
.p-mv__contents--02 .p-mv__block-04 {
font-size: 1rem;
margin-top: -20px;
}
}
.p-mv__contents--03 .p-mv__imgArea img {
-o-object-position: 53% center;
object-position: 53% center;
}
@media (min-width: 576px) {
.p-mv__contents--03 .p-mv__imgArea img {
-o-object-position: 62% center;
object-position: 62% center;
}
}
@media (min-width: 768px) {
.p-mv__contents--03 .p-mv__imgArea img {
-o-object-position: 50% center;
object-position: 50% center;
}
}
@media (max-width: 575.98px) {
.p-mv__contents--03 .p-mv__txtArea {
gap: 20px;
top: 28px;
}
}
@media (max-width: 767.98px) {
.p-mv__contents--03 .p-mv__txtArea {
max-width: none;
}
}
@media (min-width: 768px) {
.p-mv__contents--03 .p-mv__txtArea {
max-width: 62%;
}
}
.p-mv__contents--03 .p-mv__block-01 {
display: flex;
flex-direction: column;
gap: 4px;
}
@media (max-width: 767.98px) {
.p-mv__contents--03 .p-mv__block-01 .p-mv__txt-m {
font-size: 1.4rem;
}
}
@media (max-width: 767.98px) {
.p-mv__contents--03 .p-mv__block-01 .p-mv__txt-l {
font-size: 1.5rem;
}
}
@media (min-width: 576px) {
.p-mv__contents--03 .p-mv__block-01 {
gap: 8px;
}
}
.p-mv__contents--03 .p-mv__block-02 {
display: flex;
flex-direction: column;
gap: 4px;
}
@media (min-width: 576px) {
.p-mv__contents--03 .p-mv__block-02 {
gap: 8px;
}
}
.p-mv__contents--03 .p-mv__block-02 .p-mv__txt-ss {
max-width: 100vw;
}
@media (min-width: 576px) {
.p-mv__contents--03 .p-mv__block-02 .p-mv__txt-ss {
max-width: 50vw;
}
}
@media (min-width: 768px) {
.p-mv__contents--03 .p-mv__block-02 .p-mv__txt-ss {
max-width: 100vw;
}
}
@media (max-width: 767.98px) {
.p-mv__contents--03 .p-mv__block-02 .p-mv__txt-ss:nth-child(n+5) {
max-width: 100vw;
}
}
.p-mv__contents--03 .p-mv__block-02 .p-mv__txt-ss:not(.d-none):nth-of-type(even) .p-mv__balloon {
background-color: #f7efe1;
}
.p-mv__contents--03 .p-mv__block-02 .p-mv__txt-ss:not(.d-none):nth-of-type(even) .p-mv__balloon::after {
border-color: #f7efe1;
} .p-trouble {
position: relative;
}
.p-trouble__box {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: #f4f4f4;
border-radius: var(--border-radius-default);
padding: 20px;
gap: 16px;
position: relative;
border: 1px dashed #2c362d;
}
@media (min-width: 768px) {
.p-trouble__box {
padding: 24px;
gap: 32px;
aspect-ratio: 1;
font-size: 1.125rem;
}
}
.p-trouble__ic {
width: 75px;
aspect-ratio: 1;
border-radius: 100vw;
}
@media (min-width: 768px) {
.p-trouble__ic {
width: 120px;
}
} .p-solution {
--number-width: 28px;
position: relative;
counter-reset: p-solution-number 0;
}
@media (min-width: 768px) {
.p-solution {
--number-width: 50px;
}
}
.p-solution::before {
content: "";
position: absolute;
top: 0;
left: 50%;
margin-left: -40px;
border: 40px solid transparent;
border-top: 30px solid #fff;
}
@media (min-width: 768px) {
.p-solution::before {
margin-left: -50px;
border: 50px solid transparent;
border-top: 40px solid #fff;
}
}
.p-solution__box {
margin-top: calc(var(--number-width) / 2);
display: flex;
align-items: center;
flex-direction: column;
background-color: #fff;
border-radius: var(--border-radius-default);
padding: 20px;
gap: 16px;
position: relative;
box-shadow: var(--shadow-default);
}
@media (min-width: 768px) {
.p-solution__box {
padding: 24px;
gap: 20px;
}
}
.p-solution__box::before {
counter-increment: p-solution-number 1;
content: counter(p-solution-number, decimal-leading-zero);
position: absolute;
display: block;
aspect-ratio: 1;
width: var(--number-width);
top: 0;
left: 0;
transform: translate(25%, -50%);
font-size: 0.95rem;
font-weight: 700;
background: #f87454;
line-height: 1;
color: #fff;
border-radius: var(--border-radius-default);
display: grid;
place-content: center;
}
@media (min-width: 768px) {
.p-solution__box::before {
width: var(--number-width);
font-size: 1.5rem;
}
}
.p-solution__ic {
width: 60px;
aspect-ratio: 1;
}
@media (min-width: 768px) {
.p-solution__ic {
width: 100px;
}
}
.p-solution__ttl {
font-weight: 700;
font-size: 1.375rem;
}
@media (min-width: 768px) {
.p-solution__ttl {
font-size: 1.625rem;
}
}
.p-solution-info {
background-color: #f7efe1;
border-radius: var(--border-radius-default);
display: flex;
gap: 16px;
position: relative;
padding: 24px 60px 24px 24px;
max-width: 600px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.p-solution-info {
padding: 40px 80px 40px 40px;
gap: 24px;
max-width: 680px;
}
}
.p-solution-info::before {
position: absolute;
content: "";
border: 1px dashed #2f563c;
inset: 5px;
margin: auto;
border-radius: var(--border-radius-default);
}
@media (min-width: 768px) {
.p-solution-info::before {
inset: 10px;
}
}
.p-solution-info::after {
content: "";
width: 70px;
height: 90px;
background: no-repeat url(//kaitori.komorebi-ouchi.jp/wp-content/themes/swell_child/asset/img/solution-pic−008.png) top center/contain;
position: absolute;
right: 0;
bottom: 0;
}
@media (min-width: 768px) {
.p-solution-info::after {
width: 100px;
height: 140px;
}
}
.p-solution-info__free {
background-color: #dd5044;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 8px;
gap: 4px;
position: relative;
flex: 0 0 100px;
aspect-ratio: 1;
}
@media (min-width: 768px) {
.p-solution-info__free {
flex: 0 0 100px;
padding: 12px;
}
}
.p-solution-info__free::after {
content: "";
position: absolute;
left: 0;
top: 100%;
height: 0;
width: 0;
border-left: 50px solid #dd5044;
border-right: 50px solid #dd5044;
border-bottom: 10px solid transparent;
}
@media (min-width: 768px) {
.p-solution-info__free::after {
border-left: 50px solid #dd5044;
border-right: 50ßpx solid #dd5044;
}
}
.p-solution-info__txtArea {
flex: 0 1 auto;
}
.p-solution-info__small {
line-height: 1;
color: #fff;
font-weight: 700;
font-size: 1rem;
margin: 0;
}
@media (min-width: 768px) {
.p-solution-info__small {
font-size: 1rem;
}
}
.p-solution-info__big {
line-height: 1;
color: #fff;
font-weight: 700;
font-size: 1.5rem;
margin: 0;
}
@media (min-width: 768px) {
.p-solution-info__big {
font-size: 2rem;
}
}
.p-solution-info__ttl {
font-weight: 700;
font-size: 1.25rem;
color: #2f563c;
margin-bottom: 0.4em;
}
@media (min-width: 768px) {
.p-solution-info__ttl {
font-size: 1.625rem;
}
}
.p-solution-info__txt {
font-size: 0.875rem;
font-weight: 700;
}
@media (min-width: 768px) {
.p-solution-info__txt {
font-size: 1.1rem;
}
} .p-features__set {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
max-width: 480px;
margin: 0 auto;
}
@media (min-width: 768px) {
.p-features__set {
gap: 20px;
}
}
.p-features__set img {
border-radius: var(--border-radius-default);
width: 65%;
}
@media (min-width: 768px) {
.p-features__set img {
width: 85%;
}
}
.p-features__copy {
font-size: 1.25rem;
font-weight: 700;
} .p-flow {
--number-width: 28px;
counter-reset: p-flow-number 0;
position: relative;
}
@media (min-width: 768px) {
.p-flow {
--number-width: 50px;
}
}
.p-flow__balloon {
background-color: #f87454;
color: #fff;
font-weight: 700;
border-radius: 50vw;
padding: 12px 24px;
display: inline-block;
position: relative;
}
@media (min-width: 768px) {
.p-flow__balloon {
font-size: 1.25rem;
padding: 16px 24px;
}
}
.p-flow__balloon .strong {
font-weight: 700;
font-size: 1.25rem;
}
@media (min-width: 768px) {
.p-flow__balloon .strong {
font-size: 1.5rem;
}
}
.p-flow__balloon::after {
content: "";
position: absolute;
display: block;
bottom: -20px;
left: 50%;
margin-left: -10px;
border: 10px solid transparent;
border-top: 15px solid #f87454;
}
.p-flow__catch {
font-weight: 700;
font-size: 1.3rem;
}
@media (min-width: 768px) {
.p-flow__catch {
font-size: 1.8rem;
}
}
.p-flow__catch .strong {
font-size: 1.5rem;
font-weight: 700;
color: #f87454;
}
@media (min-width: 768px) {
.p-flow__catch .strong {
font-size: 2.5rem;
}
}
.p-flow__box {
margin-top: calc(var(--number-width) / 2);
background-color: #fff;
border-radius: var(--border-radius-default);
padding: 20px;
box-shadow: var(--shadow-default);
position: relative;
}
@media (min-width: 768px) {
.p-flow__box {
padding: 48px;
}
}
.p-flow__box::before {
counter-increment: p-flow-number 1;
content: counter(p-flow-number, decimal-leading-zero);
position: absolute;
display: block;
aspect-ratio: 1;
width: var(--number-width);
top: 0;
left: 0;
transform: translate(25%, -50%);
font-size: 0.95rem;
font-weight: 700;
background: #f87454;
line-height: 1;
color: #fff;
border-radius: var(--border-radius-default);
display: grid;
place-content: center;
}
@media (min-width: 768px) {
.p-flow__box::before {
width: var(--number-width);
font-size: 1.5rem;
}
}
.p-flow__box::after {
content: "";
position: absolute;
display: block;
top: 103%;
left: 50%;
margin-left: -10px;
border: 10px solid transparent;
border-top: 15px solid #f18d00;
}
@media (min-width: 768px) {
.p-flow__box::after {
top: 110%;
}
}
.p-flow__box--last::after {
content: none;
}
.p-flow__ttl {
font-size: 1.375rem;
font-weight: 700;
color: #f18d00;
text-align: center;
margin-bottom: 16px;
}
@media (min-width: 768px) {
.p-flow__ttl {
font-size: 1.625rem;
-moz-text-align-last: left;
text-align-last: left;
margin-bottom: 20px;
}
} .p-voice {
--height: 90px;
}
@media (min-width: 768px) {
.p-voice {
padding-top: 220px;
}
}
.p-voice__box-wrap {
padding-top: calc(var(--height) / 2);
}
.p-voice__box {
background-color: #f4f4f4;
display: flex;
flex-direction: column;
gap: 16px;
border-radius: var(--border-radius-default);
padding: 24px;
position: relative;
}
@media (min-width: 768px) {
.p-voice__box {
--height: 125px;
gap: 24px;
padding: 48px;
}
}
.p-voice__figure {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
}
@media (min-width: 768px) {
.p-voice__figure {
transform: translate(0, -30%);
left: 40px;
}
}
.p-voice__ic {
width: var(--height);
aspect-ratio: 1;
border-radius: 100vw;
}
@media (min-width: 768px) {
.p-voice__ic {
width: var(--height);
}
}
.p-voice__ttl {
color: #f18d00;
font-size: 1.375rem;
font-weight: 700;
text-align: center;
padding-top: calc(var(--height) / 2);
}
@media (min-width: 768px) {
.p-voice__ttl {
font-size: 1.625rem;
-moz-text-align-last: left;
text-align-last: left;
padding-top: 0;
padding-left: calc(var(--height) + 10px);
}
}
.p-voice__info {
font-size: 1rem;
font-weight: 700;
border-top: 1px dashed #2c362d;
padding-top: 16px;
}
@media (min-width: 768px) {
.p-voice__info {
padding-top: 20px;
}
} .p-area__map {
border-radius: var(--border-radius-default);
overflow: hidden;
}
@media (max-width: 991.98px) {
.p-area__map .ratio-16x9 {
aspect-ratio: 1/0.65;
}
}
.p-area__info {
background-color: #4b4541;
color: #fff;
padding: 20px;
border-radius: var(--border-radius-default);
margin-bottom: 16px;
}
@media (min-width: 768px) {
.p-area__info {
padding: 32px;
}
}
.p-area__ttl {
font-size: 1.25rem;
font-weight: 700;
}
.p-area__small {
font-size: 1rem;
opacity: 0.8;
}
@media (min-width: 768px) {
.p-area .p-list-disc {
display: flex;
flex-wrap: wrap;
gap: 8px 32px;
}
} .p-faq__box {
box-shadow: var(--shadow-default);
border-radius: var(--border-radius-default);
}
.p-faq__q {
background-color: #f4f4f4;
font-size: 1.125rem;
margin-bottom: 0;
border-radius: 5px 5px 0 0;
box-shadow: var(--shadow-default);
font-weight: 700;
padding: 20px;
display: flex;
gap: 1rem;
align-items: baseline;
}
@media (min-width: 768px) {
.p-faq__q {
border-radius: 10px 10px 0 0;
padding: 24px;
}
}
.p-faq__q::before {
content: "Q.";
font-weight: 700;
font-size: 1.625rem;
color: #f18d00;
line-height: 1;
}
@media (min-width: 768px) {
.p-faq__q::before {
font-size: 2.5rem;
}
}
.p-faq__a {
font-size: 1.125rem;
background-color: #fff;
border-radius: 0 0 5px 5px;
padding: 20px;
display: flex;
gap: 1rem;
align-items: baseline;
}
@media (min-width: 768px) {
.p-faq__a {
border-radius: 0 0 10px 10px;
padding: 24px;
}
}
.p-faq__a::before {
color: #f18d00;
content: "A.";
font-weight: 700;
font-size: 1.625rem;
line-height: 1;
}
@media (min-width: 768px) {
.p-faq__a::before {
font-size: 2.5rem;
}
} .p-column .slick-dots li button:before {
font-size: 0.75rem;
}
.p-column .slick-prev:before,
.p-column .slick-next:before {
font-size: 30px;
opacity: 1;
color: #2c362d;
}
.p-column .slick-prev,
.p-column .slick-next {
position: absolute;
top: 30%;
z-index: 2;
}
.p-column .slick-prev {
left: 0;
transform: translate(-50%, -50%) !important;
}
.p-column .slick-next {
right: 0;
transform: translate(-50%, -50%) !important;
}
.p-column .-type-card .p-postList__item {
margin-bottom: 2em;
}
.p-bottom {
background: no-repeat url(//kaitori.komorebi-ouchi.jp/wp-content/themes/swell_child/asset/img/bg-ph-001.jpg) top center/cover;
}
@media (max-width: 575.98px) {
.p-bottom .p-section-ttl02 {
font-size: 1.4rem;
letter-spacing: 0;
}
}
@media (max-width: 575.98px) {
.p-bottom .p-cta-btn {
margin: 0 calc(50% - 50vw);
width: 100vw;
}
}
.p-list-disc {
list-style: disc !important;
padding-left: 2em;
} .c-under-dot span {
line-height: 2;
padding-bottom: 6px;
display: inline-block;
background-image: radial-gradient(circle, #2c362d 1px, transparent 1px);
background-position: bottom left;
background-size: 6px 3px;
background-repeat: repeat-x;
padding-bottom: 3px;
}
@media (min-width: 768px) {
.c-under-dot span {
padding-bottom: 10px;
display: inline-block;
background-image: radial-gradient(circle, #2c362d 2px, transparent 2px);
background-position: bottom left;
background-size: 12px 6px;
background-repeat: repeat-x;
padding-bottom: 6px;
}
}
.c-font-english {
font-family: Futura, "Century Gothic", "Franklin Gothic Bold", "Helvetica Neue", sans-serif;
}
.c-color-main {
color: #f18d00 !important;
}
.c-small {
font-size: 0.75rem;
line-height: 1;
}
.c-small--subtitle {
font-weight: 900;
letter-spacing: 0.45em;
}
.c-small--link {
color: #ccd4ff;
}
.c-small--link:hover {
color: #fff;
}
.c-small--lightgray {
color: #656565;
}
.c-marker {
background: linear-gradient(transparent 50%, #fff798 0%);
}
.c-marker-full {
background: linear-gradient(transparent 0%, #fff798 0%);
padding: 0 0.2em;
line-height: 1.6;
}
.c-marker-full--white {
background: linear-gradient(transparent 0%, #fff 0%);
}
.c-marker-full--gray {
background: linear-gradient(transparent 0%, #bcbcbc 0%);
}
.c-marker-full--orange {
background: linear-gradient(transparent 0%, #f18d00 0%);
color: #fff !important;
}
.c-marker-full--radius {
border-radius: 4px;
}
.c-rotate-box {
display: inline-block;
transform: rotate(-4deg) translateY(-0.2em);
margin-bottom: -0.2em;
line-height: 1.2;
}
.c-bg-gray {
background-color: #f4f4f4 !important;
}
.c-bg-white {
background-color: #fff !important;
}
.c-bg-brown {
background-color: #f7efe1 !important;
}
.c-bg-img {
background: no-repeat url(//kaitori.komorebi-ouchi.jp/wp-content/themes/swell_child/asset/img/bg-001.jpg) center/cover;
}
a:hover .c-microcopy::before, a:hover .c-microcopy::after {
background-color: #ffc026;
}
.c-wbr-txt {
white-space: pre-wrap;
word-break: keep-all;
}