@charset "UTF-8";
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-style: normal;
font-weight: normal;
font-size: 100%;
vertical-align: baseline;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
html {
overflow-y: scroll;
-webkit-text-size-adjust: 100%; /* iphoneで文字サイズが変わる対策 */
-ms-text-size-adjust: 100%;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
input,
textarea {
margin: 0;
padding: 0;
}
ol,
ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption,
th {
text-align: left;
}
a:focus {
outline: none;
}
img {
vertical-align: bottom;
max-width: 100%;
height: auto;
}
.clearfix:after {
content: " ";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.clearfix {
min-height: 1px;
}
* html .clearfix {
height: 1px; /*¥*/ /*/
height: auto;
overflow: hidden;
/**/
}
.both {
clear: both;
}
.pc {
display: block;
}
.sp {
display: none;
}
/* ここからWordpress用初期設定 */
/* 本文中の画像 */
article img {
border: none;
max-width: 100%;
height: auto;
}
/*-----------------------
COMMON
-----------------------*/
/* @media screen and (min-width: 1921px) {
.mv img {
width: 100%;
}
} */
/* リセット */
html {
font-size: 62.5%;
scroll-behavior: smooth;
overflow-x: hidden;
overflow-y: scroll;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
p {
margin: 0;
}
a {
text-decoration: none;
color: inherit;
transition: 0.3s;
}
a:hover,
a:focus {
opacity: 0.8;
text-decoration: none;
color: inherit;
}
img {
max-width: 100%;
height: auto;
vertical-align: bottom;
}
input,
textarea,
select,
button {
font-family: inherit;
}
.pc {
display: block;
}
.sp {
display: none;
}
.text-c {
text-align: center;
}
.text-l {
text-align: left;
}
.text-r {
text-align: right;
}
.text-j {
text-align: justify;
}
/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
-webkit-box-sizing: content-box;
-webkit-appearance: button;
appearance: button;
border: none;
box-sizing: border-box;
cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
outline-offset: -2px;
}
input,
button,
textarea,
select,
.entry input[type="url"],
input[type="email"],
.entry input[type="text"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 0;
}
@media only screen and (max-width: 559px) {
.pc {
display: none;
}
.sp {
display: block;
}
}
/*-----------------------
変数
-----------------------*/
:root {
--baseColor: #614c3f;
--mainColor: #a55465;
--subColor: #f36;
--accentColor: #976929;
--colorW: #fff;
}
html {
font-size: 0.5208vw;
}
@media only screen and (max-width: 559px) {
html {
font-size: 2.6667vw;
}
}
body {
color: var(--baseColor);
font-family: "Shippori Mincho B1", serif !important;
font-weight: 400;
font-style: normal;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Shippori Mincho B1", serif !important;
color: var(--baseColor);
}
/* main {
background-image: url("https://www.shoutaibutsudou.com/wp-content/uploads/2025/05/bk.svg");
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
@media only screen and (max-width: 559px) {
main {
background-image: url("https://www.shoutaibutsudou.com/wp-content/uploads/2025/05/bk_sp.svg");
}
} */
main {
position: relative;
}
main::after {
content: "";
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: url("https://www.shoutaibutsudou.com/wp-content/uploads/2025/05/bk.svg") center/cover no-repeat;
z-index: -1;
}
@media only screen and (max-width: 559px) {
main::after {
background: url("https://www.shoutaibutsudou.com/wp-content/uploads/2025/05/bk_sp.svg") center/cover no-repeat;
}
}
.wrapper {
width: 124rem;
margin-inline: auto;
padding: 0 2rem;
}
@media only screen and (max-width: 559px) {
.wrapper {
width: 100%;
}
}
.holder {
width: 100rem;
margin-inline: auto;
}
@media only screen and (max-width: 559px) {
.holder {
width: 100%;
}
}
.pink {
color: var(--mainColor);
}
.drawer-hamburger-icon {
margin-top: 0;
}
.drawer--right .drawer-hamburger,
.drawer--right.drawer-open .drawer-navbar .drawer-hamburger,
.drawer--right.drawer-open .drawer-hamburger {
top: 1.2rem;
right: 1.5rem;
}
.drawer--right .drawer-hamburger,
.drawer--right.drawer-open .drawer-navbar .drawer-hamburger {
width: 5.5rem;
}
.drawer--right .drawer-hamburger p {
font-size: 1.6rem;
}
.drawer-hamburger-icon::before {
top: 1.4rem;
}
.drawer-hamburger-icon::after {
top: 2.8rem;
}
.drawer--right .drawer-hamburger p {
margin-top: 3.5rem;
}
.drawer-open .drawer-hamburger-icon:after,
.drawer-open .drawer-hamburger-icon:before {
top: 1.5rem;
}
.drawer--right.drawer-open .drawer-nav {
padding: 1rem 1.5rem 5rem;
width: 30%;
z-index: 2000;
padding: 6rem 6.5rem;
overflow: scroll;
background: #fff;
}
@media only screen and (max-width: 559px) {
.drawer--right.drawer-open .drawer-nav {
width: 100%;
}
}
.drawer--right.drawer-open .drawer-hamburger {
right: 0;
top: 0;
z-index: 2500;
}
.o-drawer {
display: none;
}
@media only screen and (max-width: 1280px) {
.o-drawer {
display: block;
}
}
.drawer--right .drawer-hamburger,
.drawer--right.drawer-open .drawer-navbar .drawer-hamburger {
width: 7rem;
height: 7rem;
}
@media only screen and (max-width: 559px) {
.drawer--right .drawer-hamburger,
.drawer--right.drawer-open .drawer-navbar .drawer-hamburger {
width: 4rem;
height: 4rem;
}
}
.drawer-hamburger-icon {
margin-top: -15px;
}
.drawer-hamburger-icon,
.drawer-hamburger-icon:after,
.drawer-hamburger-icon:before {
background-color: var(--mainColor);
}
.drawer--right.drawer-open .drawer-hamburger {
right: 2rem;
}
.drawer--right .drawer-hamburger,
.drawer--right.drawer-open .drawer-navbar .drawer-hamburger,
.drawer--right.drawer-open .drawer-hamburger {
top: 0;
}
.drawer-hamburger-icon::before {
top: 1.3rem;
}
@media only screen and (max-width: 559px) {
.drawer-hamburger-icon::before {
top: 0.9rem;
}
}
.drawer-hamburger-icon::after {
top: 2.5rem;
}
@media only screen and (max-width: 559px) {
.drawer-hamburger-icon::after {
top: 1.8rem;
}
}
.drawer--right .drawer-hamburger,
.drawer--right.drawer-open .drawer-navbar .drawer-hamburger,
.drawer--right.drawer-open .drawer-hamburger {
z-index: 3000;
padding: 0;
right: 2rem;
top: 1rem;
}
@media only screen and (max-width: 559px) {
.drawer--right .drawer-hamburger,
.drawer--right.drawer-open .drawer-navbar .drawer-hamburger,
.drawer--right.drawer-open .drawer-hamburger {
top: 3rem;
}
}
.drawer--right.drawer-open .o-drawer .drawer-hamburger-icon {
background: transparent;
}
.drawer--right.drawer-open .o-drawer .drawer-hamburger {
background: #fff;
}
.drawer-open .drawer-hamburger-icon:after,
.drawer-open .drawer-hamburger-icon:before {
background: var(--mainColor);
}
.drawer-nav .l-header__logo {
padding: 1rem 0 0 1rem;
text-align: left;
}
@media only screen and (max-width: 559px) {
.drawer-nav .l-header__logo {
top: inherit;
left: inherit;
}
}
.drawer-menu-item {
font-size: clamp(1.8rem, 1.7029126214rem + 0.2588996764vw, 2.2rem);
font-weight: 700;
}
.drawer-menu-item a {
color: var(--baseColor);
}
.drawer-menu-item a:hover,
.drawer-menu-item:hover {
text-decoration: none;
}
.drawer--right .drawer-nav::-webkit-scrollbar {
display: none;
}
.drawer--right.drawer-open .drawer-hamburger {
right: 2rem;
}
.drawer-hamburger-icon,
.drawer-hamburger-icon:after,
.drawer-hamburger-icon:before {
height: 4px;
}
@media only screen and (max-width: 559px) {
.drawer-hamburger-icon,
.drawer-hamburger-icon:after,
.drawer-hamburger-icon:before {
height: 2px;
}
}
.drawer__logo {
margin-bottom: 3.5rem;
}
.drawer__logo img {
width: 30rem;
}
@media only screen and (max-width: 559px) {
.drawer__logo img {
width: 20rem;
}
}
.drawer-menu-item:not(:last-child) {
margin-bottom: 2rem;
}
/*swiper*/
.swiper-button-next,
.swiper-button-prev,
.swiper-pagination {
position: static;
}
.swiper-button-next,
.swiper-button-prev {
width: 4.2rem;
height: 3.9rem;
border-radius: 50%;
}
.swiper-button-next:after,
.swiper-button-prev:after {
color: var(--colorW);
font-size: 1.6rem;
font-weight: 700;
}
.swiper-pagination-bullet {
background-color: #cacaca;
}
.swiper-pagination-bullet-active {
color: var(--colorW);
position: relative;
}
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
width: auto;
bottom: 12px;
position: relative;
}
.slider-nav {
justify-content: center;
gap: 1.5rem;
align-items: center;
margin-bottom: 2rem;
}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 1rem;
}
.slider {
margin: 0;
}
.slide-link {
margin-top: 3rem;
}
.swiper-slide-active,
.swiper-slide-next,
.swiper-slide-prev {
opacity: 1;
}
.swiper-slide figure img {
width: 100%;
aspect-ratio: 700/400;
object-fit: cover;
border-radius: 2rem;
}
.swiper-pagination-bullet {
width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 10px));
height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 10px));
display: inline-block;
border-radius: 50%;
background: #cacaca;
opacity: 1;
}
.swiper-pagination-bullet-active {
background: var(--colorW);
}
.swiper-button-prev::after,
.swiper-button-next::after {
background-repeat: no-repeat;
background-size: contain;
content: "";
width: 4.2rem;
height: 3.9rem;
margin: auto;
}
.swiper-button-prev::after {
background-image: url(https://www.shoutaibutsudou.com/wp-content/uploads/2025/05/btn-icon-prev.webp);
}
.swiper-button-next::after {
background-image: url(https://www.shoutaibutsudou.com/wp-content/uploads/2025/05/btn-icon-next.webp);
}
.swiper-slide img {
height: auto;
width: 100%;
}
.swiper__cat {
margin-top: -1rem;
z-index: 10;
position: relative;
gap: 0.4rem;
display: flex;
flex-wrap: wrap;
}
.swiper__cat span {
font-size: 1.4rem;
padding: 0.4rem 0.8rem;
border-radius: 1.3rem;
background: var(--colorW);
line-height: 1;
color: var(--mainColor);
border: 1px solid var(--mainColor);
}
.swiper__ttl {
font-size: clamp(1.4rem, 1.3514563107rem + 0.1294498382vw, 1.6rem);
font-weight: 700;
overflow: hidden;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
line-height: 1.4;
margin-top: 1rem;
margin-bottom: 1rem;
}
.swiper__link {
position: relative;
}
.swiper__new {
font-size: clamp(1.2rem, 1.0786407767rem + 0.3236245955vw, 1.7rem);
background-color: var(--mainColor);
width: fit-content;
padding: 0.5rem 1.5rem;
color: #fff;
border-radius: 2rem;
line-height: 1;
position: absolute;
top: 1.2rem;
left: -1rem;
z-index: 10;
}
.swiper__date {
color: #a49582;
font-size: clamp(1.4rem, 1.3514563107rem + 0.1294498382vw, 1.6rem);
}
.swiper__link:hover {
opacity: 1;
}
.swiper__link:hover img {
transform: scale(1.1);
transition: 0.5s ease;
}
@media only screen and (max-width: 559px) {
.swiper__link:hover img {
transform: inherit;
}
}
.swiper-news {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
z-index: 1;
}
.swiper figure,
.swiper-news figure {
overflow: hidden;
border-radius: 2rem;
}
.swiper img,
.swiper-news img {
transform: scale(1);
transition: 0.5s ease;
object-fit: cover;
border-radius: 2rem;
}
@media only screen and (max-width: 559px) {
.swiper,
.swiper-news {
padding: 0 6%;
}
}
/*====================================================================
モーダル/*---------------数値など任意で書き換えを行う---------------------
====================================================================*/
.modal {
position: fixed;
top: 0;
left: 0;
z-index: 1050;
display: none;
width: 100%;
height: 100vh;
}
.modal__bg {
position: absolute;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.8);
}
.modal__content1 {
position: absolute;
top: 50%;
left: 50%;
width: 660px;
height: 90vh;
padding: 6.5rem 3.5rem 2.5rem;
overflow-y: auto;
background: #fff;
transform: translate(-50%, -50%);
}
.modal__content1 .top-close {
position: absolute;
top: -1rem;
right: 1.5rem;
}
.modal__content1 .bottom-close {
position: relative;
top: 1rem;
left: -2rem;
}
.modal__content1 .top-close a,
.modal__content1 .bottom-close a {
display: block;
font-size: 5rem;
font-weight: 400;
color: #787878;
}
/**/
.modal-window {
display: none;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 1200;
justify-content: center;
align-items: center;
}
.remodal {
width: 80%;
max-width: 60rem;
height: 90%;
overflow: auto;
margin: 0;
position: relative;
border-radius: 1rem;
padding: 3rem 3.5rem 3rem;
text-align: left;
}
@media only screen and (max-width: 559px) {
.remodal {
width: 95%;
padding: 3rem 2.5rem 3rem;
}
}
.remodal-close {
width: 6rem;
height: 5rem;
font-weight: 400;
}
.remodal-close.top {
right: 1rem;
top: 1rem;
left: inherit;
}
.remodal-close.bottom {
position: static;
margin: 4rem 0 0;
}
.remodal-close::before {
height: 7rem;
line-height: 5rem;
width: 6rem;
font-size: 7rem;
font-family: "Zen Kaku Gothic Antique", sans-serif !important;
position: static;
color: var(--baseColor);
background: linear-gradient(90deg, rgb(100, 123, 197) 0%, rgb(218, 112, 220) 50%, rgb(237, 136, 170) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/**/
.modal-area__name__wrap {
display: inline-block;
padding: 1.5rem 7.2rem;
border-radius: 5rem;
position: relative;
bottom: 5rem;
left: 50%;
transform: translateX(-50%);
}
@media only screen and (max-width: 559px) {
.modal-area__name__wrap {
padding: 1rem 5.2rem;
bottom: 3rem;
}
}
.modal-area__name {
font-size: clamp(2rem, 1.7572815534rem + 0.6472491909vw, 3rem);
display: flex;
flex-direction: column;
text-align: center;
line-height: 1.5;
}
.modal-area__name span {
font-size: clamp(1.2rem, 1.1757281553rem + 0.0647249191vw, 1.3rem);
letter-spacing: 0.2em;
}
.modal-area__ttl {
font-size: clamp(1.8rem, 1.5572815534rem + 0.6472491909vw, 2.8rem);
font-weight: 700;
line-height: 1.4;
margin-bottom: 3rem;
position: relative;
margin-top: -3rem;
}
@media only screen and (max-width: 559px) {
.modal-area__ttl {
margin-top: -2rem;
margin-bottom: 1rem;
}
}
.modal-area__ttl::after {
content: "";
background: url(https://www.shoutaibutsudou.com/wp-content/uploads/2025/05/message-img.webp) no-repeat center center/contain;
width: 31.5rem;
height: 24.9rem;
display: inline-block;
position: absolute;
top: -7rem;
right: -2rem;
}
.modal-area__textarea p {
font-size: clamp(1.4rem, 1.1572815534rem + 0.6472491909vw, 2.4rem);
line-height: 1.75;
}
.modal-area figure img {
aspect-ratio: 1/1;
object-fit: cover;
border-radius: 3rem;
}
.modal-area .ttl-secondary {
margin-bottom: 1.8rem;
}
.ttl-primary {
font-size: clamp(2.4rem, 1.8660194175rem + 1.4239482201vw, 4.6rem);
letter-spacing: 0.05em;
margin-bottom: 1.5rem;
font-weight: 700;
}
@media only screen and (max-width: 559px) {
.ttl-primary {
margin-bottom: 0.5rem;
}
}
.ttl-primary .small {
font-size: clamp(1.6rem, 1.3087378641rem + 0.7766990291vw, 2.8rem);
line-height: 1.5;
color: var(--mainColor);
font-weight: 700;
}
.ttl-primary__sub {
font-size: clamp(1.2rem, 1.054368932rem + 0.3883495146vw, 1.8rem);
text-align: center;
line-height: 1;
color: var(--main50Color);
letter-spacing: 0.2em;
font-weight: 500;
}
.ttl-primary__sub--under {
font-size: clamp(1rem, 0.8058252427rem + 0.5177993528vw, 1.8rem);
}
.ttl-primary__area {
margin-inline: auto;
width: fit-content;
text-align: center;
margin-bottom: 4.5rem;
}
@media only screen and (max-width: 559px) {
.ttl-primary__area {
margin-bottom: 3rem;
}
}
.ttl-primary__img {
margin-bottom: 1.5rem;
}
@media only screen and (max-width: 559px) {
.ttl-primary__img {
width: 9.8rem;
margin-bottom: 0.7rem;
}
}
.o-btn {
text-align: center;
}
.o-btn__link {
text-align: center;
background-color: var(--colorW);
padding: 2.5rem 5.5rem;
font-size: clamp(1.4rem, 1.254368932rem + 0.3883495146vw, 2rem);
margin: 0 auto;
display: inline-block;
width: fit-content;
letter-spacing: 0.1em;
color: var(--baseColor);
line-height: 1;
transition: 0.5s;
border: 1px solid var(--colorW);
}
@media only screen and (max-width: 559px) {
.o-btn__link {
padding: 1.5rem 2.5rem;
}
}
@media only screen and (min-width: 600px) {
.o-btn__link:hover {
background-color: var(--baseColor);
color: var(--colorW);
opacity: 1;
}
}
.o-btn__link i {
padding-left: 1.5rem;
transition: 0.5s;
}
.o-btn__link--gray {
background: #efedec;
border: 1px solid var(--baseColor);
}
@media only screen and (max-width: 559px) {
.o-btn__link--gray {
width: 90%;
margin-inline: auto;
height: 6rem;
display: flex;
align-items: center;
justify-content: center;
}
}
.o-card {
display: grid;
}
.o-card--2wrap {
grid-template-columns: repeat(2, 1fr);
gap: 6rem;
}
.o-card--3wrap {
grid-template-columns: repeat(3, 1fr);
gap: 4rem;
}
@media only screen and (max-width: 559px) {
.o-card--3wrap {
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
}
.o-card--4wrap {
grid-template-columns: repeat(4, 1fr);
gap: 3rem;
}
@media only screen and (max-width: 559px) {
.o-card--4wrap {
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
}
.o-card__img {
overflow: hidden;
border-radius: 2rem;
}
@media only screen and (max-width: 559px) {
.o-card__img {
border-radius: 1rem;
}
}
.o-card__img img {
aspect-ratio: 16/9;
object-fit: cover;
border-radius: 2rem;
transform: scale(1);
transition: 0.5s ease;
}
@media only screen and (max-width: 559px) {
.o-card__img img {
border-radius: 1rem;
}
}
.o-card__cat {
margin-top: -1rem;
z-index: 10;
position: relative;
gap: 0.4rem;
display: flex;
flex-wrap: wrap;
}
.o-card__cat span {
font-size: clamp(1.2rem, 1.1514563107rem + 0.1294498382vw, 1.4rem);
padding: 0.4rem 0.8rem;
border-radius: 1.3rem;
background: var(--mainColor);
line-height: 1;
}
.o-card__item {
position: relative;
}
.o-card__new {
display: inline-block;
padding: 0.6rem 1.5rem 0.3rem;
border-radius: 2rem;
line-height: 1;
position: absolute;
top: 1.5rem;
left: -1rem;
z-index: 10;
}
@media only screen and (max-width: 559px) {
.o-card__new {
font-size: 1rem;
padding: 0.5rem 1rem 0.1rem;
top: 0.5rem;
}
}
.o-card__link:hover {
opacity: 1;
}
.o-card__link:hover .o-card__img img {
transform: scale(1.1);
transition: 0.5s ease;
}
@media only screen and (max-width: 559px) {
.o-card__link:hover .o-card__img img {
transform: inherit;
}
}
.o-card__date {
font-size: clamp(1.2rem, 1.1514563107rem + 0.1294498382vw, 1.4rem);
line-height: 1;
margin-top: 0.7rem;
}
.o-card__ttl {
margin-top: 0.7rem;
font-size: clamp(1.4rem, 1.3514563107rem + 0.1294498382vw, 1.6rem);
line-height: 1.3;
overflow: hidden;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
}
.o-flex {
display: flex;
gap: 6rem;
}
@media only screen and (max-width: 559px) {
.o-flex {
gap: 3rem;
}
}
.o-flex--c {
justify-content: center;
}
.o-flex--b {
justify-content: space-between;
}
.o-flex--e {
justify-content: flex-end;
}
.o-flex__item {
width: calc((100% - 6rem) / 2);
}
@media only screen and (max-width: 559px) {
.o-flex__item {
width: 100%;
}
}
.o-flex__item--1 {
width: calc((100% - 6rem) / 3);
}
@media only screen and (max-width: 559px) {
.o-flex__item--1 {
width: 100%;
}
}
.o-flex__item--2 {
width: calc((100% - 6rem) / 3 * 2);
}
@media only screen and (max-width: 559px) {
.o-flex__item--2 {
width: 100%;
}
}
@media only screen and (max-width: 559px) {
.o-flex {
flex-direction: column;
}
}
/*====================================================================
.faq-wrap .accordion
====================================================================*/
.faq-wrap .accordion_one .accordion_header {
font-weight: 700;
padding: 2rem 7rem 1rem 0;
position: relative;
z-index: 1;
cursor: pointer;
transition-duration: 0.2s;
font-size: clamp(1.4rem, 1.3029126214rem + 0.2588996764vw, 1.8rem);
display: flex;
border-bottom: dotted 1px var(--mainColor);
line-height: 1.5;
letter-spacing: 0.1em;
text-align: left;
}
.faq-wrap .accordion_one .accordion_header::before {
content: "Q:";
font-size: 1.8rem;
font-weight: 500;
position: relative;
line-height: 1;
margin-top: 0.5rem;
}
@media only screen and (max-width: 559px) {
.faq-wrap .accordion_one .accordion_header::before {
margin-top: 0;
}
}
.faq-wrap .accordion_one .accordion_header:hover {
opacity: 0.8;
}
.faq-wrap .accordion_one .accordion_header.open .i_box {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.faq-wrap .accordion_one .accordion_header .i_box {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
right: 1%;
width: 4rem;
height: 4rem;
margin-top: -20px;
box-sizing: border-box;
transform-origin: center center;
transition-duration: 0.2s;
}
@media only screen and (max-width: 559px) {
.faq-wrap .accordion_one .accordion_header .i_box {
width: 2rem;
height: 2rem;
margin-top: -0.5rem;
}
}
.faq-wrap .accordion_one .accordion_header .i_box .one_i {
display: block;
width: 18px;
height: 18px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transform-origin: center center;
transition-duration: 0.2s;
position: relative;
}
.faq-wrap .accordion_one .accordion_header .i_box .one_i::before,
.faq-wrap .accordion_one .accordion_header .i_box .one_i::after {
display: flex;
content: "";
background-color: var(--mainColor);
border-radius: 10px;
width: 26px;
height: 3px;
position: absolute;
top: 7px;
left: -4px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
transform-origin: center center;
}
.faq-wrap .accordion_one .accordion_header .i_box .one_i:before {
width: 3px;
height: 26px;
top: -4px;
left: 7px;
}
.faq-wrap .accordion_one .accordion_header.open .i_box .one_i:before {
content: none;
}
.faq-wrap .accordion_one .accordion_header.open .i_box .one_i:after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.faq-wrap .accordion_one .accordion_inner {
display: none;
padding: 2rem;
background: rgba(75, 165, 170, 0.15);
border-radius: 2rem;
box-sizing: border-box;
margin-top: 0.5rem;
}
@media only screen and (max-width: 559px) {
.faq-wrap .accordion_one .accordion_inner {
padding: 1.5rem;
border-radius: 1rem;
}
}
.faq-wrap .accordion_one .accordion_inner .answer {
position: relative;
display: flex;
align-items: flex-start;
}
.faq-wrap .accordion_one .accordion_inner .answer::before {
content: "A:";
font-size: clamp(1.4rem, 1.3029126214rem + 0.2588996764vw, 1.8rem);
font-weight: 500;
position: relative;
line-height: 1;
color: var(--mainColor);
line-height: 1.5;
margin-right: 0.5rem;
}
.faq-wrap .accordion_one .accordion_inner .answer .answer-wrap p {
font-size: clamp(1.4rem, 1.3029126214rem + 0.2588996764vw, 1.8rem);
font-weight: 500;
line-height: 1.5;
}
.faq-wrap .accordion_one .accordion_inner .answer .answer-wrap p a {
text-decoration: underline;
}
/*faq*/
.o-faq {
max-width: 100rem;
margin: 0 auto;
}
.o-faq__question {
padding: 4rem 8rem 0 0;
position: relative;
border-bottom: 1px solid;
}
.o-faq__question__text {
font-size: clamp(1.6rem, 1.454368932rem + 0.3883495146vw, 2.2rem);
font-weight: 700;
display: flex;
align-items: baseline;
}
.o-faq__mark__q {
color: var(--mainColor);
font-weight: 700;
margin-right: 1rem;
}
.o-faq__answer {
font-size: clamp(1.6rem, 1.5029126214rem + 0.2588996764vw, 2rem);
background: #fff;
margin-top: 1rem;
display: none;
padding: 2.5rem 8rem 3rem 2.5rem;
}
.o-faq__answer__inner {
display: flex;
align-items: baseline;
}
.o-faq__answer__text {
font-size: clamp(1.6rem, 1.5029126214rem + 0.2588996764vw, 2rem);
}
.o-faq__mark__a {
color: var(--mainColor);
font-size: clamp(2rem, 1.6844660194rem + 0.8414239482vw, 3.3rem);
font-weight: 700;
margin-right: 1rem;
}
.o-faq__list:hover {
cursor: pointer;
}
.o-faq__question::before {
content: "";
position: absolute;
bottom: 1rem;
right: 2.9rem;
width: 2px;
height: 2rem;
background: var(--mainColor);
transition: all 0.3s ease;
}
.o-faq__question::after {
content: "";
position: absolute;
bottom: 1.9rem;
right: 2rem;
width: 2rem;
height: 2px;
background: var(--mainColor);
}
.o-faq__list.js-open .o-faq__question::before {
transform: rotate(90deg);
}
.faq-category {
margin-bottom: 1rem;
display: flex;
gap: 1rem;
}
@media only screen and (max-width: 559px) {
.faq-category {
flex-wrap: wrap;
margin-bottom: 1.5rem;
}
}
.faq-category__btn {
font-size: clamp(1.2rem, 1.1514563107rem + 0.1294498382vw, 1.4rem);
line-height: 1;
padding: 1.2rem 1.8rem;
border-radius: calc(infinity * 1px);
border: 1px solid var(--main50Color);
background: transparent;
box-sizing: border-box;
}
@media only screen and (max-width: 559px) {
.faq-category__btn {
padding: 1rem 1.4rem;
}
}
.faq-category__btn.is-active {
background-color: var(--accentColor);
color: var(--colorW);
border-color: var(--accentColor);
}
.l-hdr {
width: 100%;
position: fixed;
background: #fff;
top: 0;
left: 0;
padding-right: 15rem;
z-index: 100;
}
@media only screen and (max-width: 559px) {
.l-hdr {
padding-right: 9rem;
height: 8rem;
}
}
.l-hdr__logoarea {
padding: 2.8rem 0 1.5rem 2.8rem;
}
.l-hdr__logo img {
width: 55.9rem;
}
@media only screen and (max-width: 559px) {
.l-hdr__logoarea {
padding: 1.9rem 0 1rem 1.5rem;
}
}
ul.l-hdr__snslist {
display: flex;
gap: 3rem;
align-items: center;
margin-bottom: 0;
}
ul.l-hdr__snslist img {
width: 3.9rem;
}
@media only screen and (max-width: 559px) {
ul.l-hdr__snslist img {
width: 2.9rem;
}
}
.l-hdr__flex {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.l-hdr__flex--center {
align-items: center;
gap: 4rem;
}
@media only screen and (max-width: 559px) {
.l-hdr__flex--center {
display: none;
}
}
.l-hdr__tel {
background-color: var(--mainColor);
display: flex;
align-items: center;
width: fit-content;
padding: 0.8rem 3rem;
border-radius: 0 0 1.3rem 1.3rem;
letter-spacing: 0.2em;
}
.l-hdr__teltext {
font-size: 2.1rem;
font-weight: 500;
color: var(--colorW);
border-right: 1px solid var(--colorW);
padding-right: 1.5rem;
}
.l-hdr__teltext span {
color: #f7e7c7;
}
.l-hdr__tellink {
color: var(--colorW);
font-weight: 500;
font-size: 4.3rem;
display: flex;
align-items: center;
gap: 1rem;
padding-left: 2.5rem;
}
.l-hdr__tellink i {
font-size: 3rem;
margin-top: 1rem;
}
@media only screen and (max-width: 1680px) {
.l-hdr__tellink {
font-size: 2.5rem;
}
.l-hdr__tellink i {
font-size: 2rem;
margin-top: 0.4rem;
}
.l-hdr__teltext {
font-size: 1.4rem;
}
.l-hdr__tel {
padding: 1.3rem 1.4rem;
min-width: 48rem;
}
}
.l-hdr__float {
display: flex;
flex-direction: column;
gap: 1rem;
position: absolute;
top: 9rem;
right: 2rem;
}
@media only screen and (max-width: 559px){
.l-hdr__float{
right: 1rem;
}
}
.l-hdr__float a {
transition: 0.5s;
}
.l-hdr__float img {
width: 17.8rem;
}
@media only screen and (min-width: 600px) {
.l-hdr__float a:hover {
opacity: 1;
transform: translateY(-1.5rem);
}
}
@media only screen and (max-width: 559px) {
.l-hdr__float a img {
width: 10.6rem;
height: auto;
}
}
.l-ftr {
background-color: #fff;
}
@media only screen and (max-width: 559px) {
.l-ftr {
padding-bottom: 3rem;
}
}
.l-ftr__wrap {
padding-block: 10rem;
}
@media only screen and (max-width: 559px) {
.l-ftr__wrap {
padding-block: 5rem;
}
}
.l-ftr__logo {
text-align: center;
margin-bottom: 1rem;
}
.l-ftr__logo img {
width: 31.9rem;
}
@media only screen and (max-width: 559px) {
.l-ftr__logo {
margin-bottom: 2.5rem;
}
.l-ftr__logo img {
width: 20rem;
}
}
.l-ftr__flex {
display: flex;
align-items: center;
justify-content: center;
gap: 3.5rem;
}
.l-ftr__flex img {
width: 53.9rem;
}
@media only screen and (max-width: 559px) {
.l-ftr__flex {
flex-direction: column;
gap: 1.5rem;
padding-inline: 2rem;
}
.l-ftr__flex img {
width: 53.9rem;
}
}
.l-ftr__textarea {
margin-bottom: 2.5rem;
margin-inline: auto;
width: fit-content;
}
.l-ftr__info {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.l-ftr__info > div {
display: flex;
gap: 2.5rem;
}
@media only screen and (max-width: 559px) {
.l-ftr__info > div {
flex-direction: column;
gap: 1rem;
}
}
.l-ftr__infotext {
font-size: clamp(1.4rem, 1.3029126214rem + 0.2588996764vw, 1.8rem);
letter-spacing: 0.1em;
line-height: 1;
}
@media only screen and (max-width: 559px) {
.l-ftr__infotext {
text-align: center;
}
}
.l-ftr .l-hdr__snslist {
justify-content: center;
gap: 1.5rem;
margin-bottom: 3rem;
}
.scroll-banner {
position: fixed;
bottom: -120px;
left: 0;
width: 100%;
background-color: var(--mainColor);
color: var(--colorW);
font-weight: bold;
font-size: 1.2rem;
z-index: 9999;
transition: bottom 0.3s ease;
border-radius: 1rem 1rem 0 0;
}
.scroll-banner__item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.2rem;
gap: 1rem;
}
.scroll-banner__text {
flex: 1;
font-size: 1.1rem;
line-height: 1.4;
letter-spacing: 0.1em;
}
.scroll-banner__text span {
color: #f7e7c7;
}
.scroll-banner__tel {
font-size: 2rem;
display: flex;
align-items: center;
gap: 0.5rem;
border-left: 1px solid #fdf4ef;
padding-left: 1rem;
color: #efe8df;
letter-spacing: 0.1em;
}
.scroll-banner__mail {
font-size: 1.8rem;
border-left: 1px solid #fdf4ef;
padding-left: 1rem;
}
.banner {
background-color: var(--colorW);
}
.banner--01 {
padding: 5rem 2rem;
}
@media only screen and (max-width: 559px) {
.banner--01 {
padding: 4rem 2rem;
padding-top: 32rem;
}
}
.banner--02 {
background-color: transparent;
padding-bottom: 10rem;
}
@media only screen and (max-width: 559px) {
.banner--02 {
padding: 0 2rem 4rem 2rem;
}
}
.banner--03 {
padding: 8rem 2rem 10rem;
}
@media only screen and (max-width: 559px) {
.banner--03 {
padding: 4rem 2rem 5rem;
}
}
.banner--04 {
padding: 7.5rem 2rem 10rem;
}
@media only screen and (max-width: 559px) {
.banner--04 {
padding: 4rem 2rem;
}
}
.banner__area {
display: flex;
justify-content: center;
gap: 3rem;
align-items: baseline;
}
.banner__area img {
width: 57.4rem;
}
@media only screen and (max-width: 559px) {
.banner__area img {
width: 100%;
}
}
@media only screen and (max-width: 559px) {
.banner__area {
flex-direction: column;
gap: 2.5rem;
padding-inline: 0;
}
}
.banner__area a:last-child {
pointer-events: none;
}
@media only screen and (max-width: 559px) {
.banner__area a:last-child {
pointer-events: all;
}
}
@media only screen and (min-width: 600px) {
.banner__area a:hover {
opacity: 1;
}
.banner__area a:hover img {
transition: 0.5s;
transform: translateY(-1.5rem);
}
}
.arrow {
text-align: center;
}
.marker {
display: inline-block;
background: linear-gradient(to bottom, transparent 60%, #f6eef0 60%);
}
.marker--red {
background: linear-gradient(to bottom, transparent 60%, #8f2a3f 60%);
}
:root {
--header-height: 13.6rem;
}
html {
scroll-padding-top: var(--header-height);
}
.mv {
background: #fff url(https://www.shoutaibutsudou.com/wp-content/uploads/2025/05/mv__bg3.webp) no-repeat bottom left/cover;
/* padding-top: var(--header-height); */
padding-top: 6.85rem;
box-sizing: border-box;
transition: padding-top 0.3s ease;
}
@media only screen and (max-width: 559px) {
.mv {
background: transparent;
padding-top: 4.25rem;
}
}
.mv__catch {
padding-top: 6rem;
padding-left: 6.5rem;
margin-bottom: 2.5rem;
}
@media only screen and (max-width: 559px) {
.mv__catch {
padding: 0;
display: none;
}
}
.mv__catch img {
width: 64rem;
}
.mv__flex {
display: flex;
justify-content: center;
gap: 18rem;
}
@media only screen and (max-width: 559px) {
.mv__flex {
flex-direction: column-reverse;
position: relative;
gap: 0;
}
}
.mv__visu {
width: auto;
padding-right: 13rem;
height: 63rem;
object-fit: cover;
/* height: 30.5vw; */
}
@media only screen and (max-width: 559px) {
.mv__visu {
height: auto;
padding: 0;
}
}
.saijo {
background: url(https://www.shoutaibutsudou.com/wp-content/uploads/2025/05/saijo__bk.webp) no-repeat center center/cover;
padding: 7rem 0;
}
@media only screen and (max-width: 559px) {
.saijo {
padding: 3.5rem 3rem;
background: url(https://www.shoutaibutsudou.com/wp-content/uploads/2025/05/saijo__bk_sp.webp) no-repeat center center/cover;
}
}
.saijo__wrap {
border: 2px solid rgba(255, 255, 255, 0.7);
width: 83rem;
margin-inline: auto;
padding: 4rem 0 3rem;
}
@media only screen and (max-width: 559px) {
.saijo__wrap {
width: 100%;
}
}
p.saijo__text {
font-size: clamp(1.8rem, 1.3631067961rem + 1.1650485437vw, 3.6rem);
letter-spacing: 0.1em;
line-height: 1.5555555556;
color: var(--colorW);
text-align: center;
margin-bottom: 3.5rem;
}
@media only screen and (max-width: 559px) {
p.saijo__text {
margin-bottom: 0.5rem;
font-size: 1.7rem;
}
}
.worries {
padding-top: 10rem;
margin-bottom: 3.5rem;
}
@media only screen and (max-width: 559px) {
.worries {
padding-top: 4rem;
padding-inline: 2rem;
margin-bottom: 2rem;
}
}
.worries__wrap {
width: 111.3rem;
margin-inline: auto;
background-color: var(--colorW);
padding: 1.5rem;
position: relative;
}
@media only screen and (max-width: 559px) {
.worries__wrap {
width: 100%;
padding: 1rem;
}
}
.worries__inner,
.worries__corner {
position: relative;
}
.worries__inner::before,
.worries__inner::after,
.worries__corner::before,
.worries__corner::after {
content: "";
width: 1.5rem;
height: 1.5rem;
background-color: var(--colorW);
border: 1px solid var(--mainColor);
position: absolute;
box-sizing: border-box;
}
@media only screen and (max-width: 559px) {
.worries__inner::before,
.worries__inner::after,
.worries__corner::before,
.worries__corner::after {
width: 1rem;
height: 1rem;
}
}
.worries__inner {
border: 1px solid var(--mainColor);
}
.worries__inner::before,
.worries__inner::after {
top: -1.5rem;
}
@media only screen and (max-width: 559px) {
.worries__inner::before,
.worries__inner::after {
top: -1rem;
}
}
.worries__inner::before {
left: -1.5rem;
}
@media only screen and (max-width: 559px) {
.worries__inner::before {
left: -1rem;
}
}
.worries__inner::after {
right: -1.5rem;
}
@media only screen and (max-width: 559px) {
.worries__inner::after {
right: -1rem;
}
}
.worries__corner {
position: relative;
padding-top: 10rem;
padding-bottom: 8rem;
}
@media only screen and (max-width: 559px) {
.worries__corner {
padding-inline: 2rem;
padding-top: 5rem;
padding-bottom: 3rem;
}
}
.worries__corner::before,
.worries__corner::after {
bottom: -1.5rem;
}
@media only screen and (max-width: 559px) {
.worries__corner::before,
.worries__corner::after {
bottom: -1rem;
}
}
.worries__corner::before {
right: -1.5rem;
}
@media only screen and (max-width: 559px) {
.worries__corner::before {
right: -1rem;
}
}
.worries__corner::after {
left: -1.5rem;
}
@media only screen and (max-width: 559px) {
.worries__corner::after {
left: -1rem;
}
}
.worries__ttl {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -4rem;
}
.worries__ttl img {
width: 46.5rem;
}
@media only screen and (max-width: 559px) {
.worries__ttl {
width: 100%;
text-align: center;
top: -2rem;
}
.worries__ttl img {
width: 30rem;
}
}
@media only screen and (max-width: 559px) {
.worries__ttl img {
width: 26.7rem;
}
}
.worries__box {
width: max-content;
margin-inline: auto;
position: relative;
}
@media only screen and (max-width: 559px) {
.worries__box {
width: 100%;
}
}
.worries__box::after {
content: "";
background: url(https://www.shoutaibutsudou.com/wp-content/uploads/2025/05/worries__01.webp) no-repeat center center/contain;
width: 33.4rem;
height: 33.8rem;
position: absolute;
bottom: -5rem;
right: -8rem;
}
@media only screen and (max-width: 559px) {
.worries__box::after {
display: none;
}
}
.worries__subttl {
font-size: clamp(2.6rem, 2.3087378641rem + 0.7766990291vw, 3.8rem);
color: var(--mainColor);
text-align: center;
margin-bottom: 5rem;
font-weight: 500;
}
@media only screen and (max-width: 559px) {
.worries__subttl {
margin-bottom: 3rem;
font-weight: 400;
}
}
.worries__item {
font-size: clamp(1.8rem, 1.654368932rem + 0.3883495146vw, 2.4rem);
line-height: 1;
display: flex;
gap: 1rem;
}
@media only screen and (max-width: 559px) {
.worries__item {
line-height: 1.5;
gap: 0.5rem;
}
}
.worries__item:not(:last-child) {
margin-bottom: 3.5rem;
}
@media only screen and (max-width: 559px) {
.worries__item:not(:last-child) {
margin-bottom: 2.5rem;
}
}
.worries__item span:not(.check) {
font-size: clamp(1.8rem, 1.654368932rem + 0.3883495146vw, 2.4rem);
display: inline-block;
background: linear-gradient(to bottom, transparent 60%, #f6eef0 60%);
}
@media only screen and (max-width: 559px) {
.worries__item span:not(.check) {
display: inline;
}
}
.worries__arrow {
margin-bottom: 6rem;
}
@media only screen and (max-width: 559px) {
.worries__arrow img {
width: 7.7rem;
height: 2.2rem;
}
}
@media only screen and (max-width: 559px) {
.worries__arrow {
margin-bottom: 3rem;
}
}
.solution {
background-color: var(--colorW);
padding-block: 8rem;
margin-bottom: 3.5rem;
}
@media only screen and (max-width: 559px) {
.solution {
margin-bottom: 2rem;
padding-block: 3rem;
}
}
.solution__ttl {
font-size: clamp(2.6rem, 2.1145631068rem + 1.2944983819vw, 4.6rem);
line-height: 1.5652173913;
width: fit-content;
margin-inline: auto;
position: relative;
text-align: center;
font-weight: 500;
z-index: 10;
}
.solution__ttl::after {
content: "";
background: url(https://www.shoutaibutsudou.com/wp-content/uploads/2025/05/solution__01.webp) no-repeat center center/contain;
width: 24.8rem;
height: 24.2rem;
position: absolute;
bottom: -4.5rem;
right: -18rem;
z-index: -1;
}
@media only screen and (max-width: 559px) {
.solution__ttl::after {
width: 9.9rem;
height: 9.3rem;
bottom: -1rem;
right: -3rem;
background: url(https://www.shoutaibutsudou.com/wp-content/uploads/2025/05/solution__01_sp.webp) no-repeat center center/contain;
}
}
.solution__ttl span {
color: var(--mainColor);
}
.solution__arrow {
margin-bottom: 6rem;
}
.reason {
padding-bottom: 10rem;
}
@media only screen and (max-width: 559px) {
.reason {
padding-bottom: 5rem;
}
}
.reason__ttl {
text-align: center;
margin-bottom: 8rem;
}
.reason__ttl img {
width: 69rem;
}
@media only screen and (max-width: 559px) {
.reason__ttl {
margin-bottom: 3rem;
}
.reason__ttl img {
width: 32.6rem;
}
}
.reason__item {
padding-inline: 6rem;
padding-bottom: 6rem;
padding-top: 4rem;
display: flex;
background-color: var(--colorW);
align-items: baseline;
gap: 0.5rem;
position: relative;
}
@media only screen and (max-width: 559px) {
.reason__item {
padding-inline: 2rem;
padding-bottom: 3rem;
padding-top: 2rem;
gap: 1rem;
}
}
.reason__item::before,
.reason__item::after {
content: "";
background: url(https://www.shoutaibutsudou.com/wp-content/uploads/2025/05/corner.webp) no-repeat center center/contain;
width: 9.7rem;
height: 9.7rem;
position: absolute;
}
@media only screen and (max-width: 559px) {
.reason__item::before,
.reason__item::after {
width: 4.3rem;
height: 4.3rem;
}
}
.reason__item::before {
top: 0;
right: 0;
}
.reason__item::after {
bottom: 0;
left: 0;
transform: rotate(180deg);
}
.reason__item:not(:last-child) {
margin-bottom: 3rem;
}
@media only screen and (max-width: 559px) {
.reason__item:not(:last-child) {
margin-bottom: 2rem;
}
}
p.reason__number {
font-size: clamp(3.4rem, 2.7689320388rem + 1.6828478964vw, 6rem);
color: var(--mainColor);
line-height: 1;
}
p.reason__cont {
font-size: clamp(1.8rem, 1.4601941748rem + 0.9061488673vw, 3.2rem);
}
.reason__cont .border {
border-bottom: 1px dashed var(--baseColor);
line-height: 2;
padding-bottom: 1rem;
}
@media only screen and (max-width: 559px) {
.reason__cont .border {
line-height: 2.5;
}
}
.kiduki {
padding-block: 12rem;
background-color: var(--colorW);
}
@media only screen and (max-width: 559px) {
.kiduki {
padding-block: 5rem;
padding-inline: 2rem;
}
}
.kiduki__ttl {
font-size: clamp(2.5rem, 1.8932038835rem + 1.6181229773vw, 5rem);
font-weight: 500;
text-align: center;
margin-bottom: 2rem;
position: relative;
z-index: 10;
}
@media only screen and (max-width: 559px) {
.kiduki__ttl {
white-space: nowrap;
font-size: 2.3rem;
}
}
.kiduki__ttl::before,
.kiduki__ttl::after {
content: "";
width: 23.8rem;
height: 20.2rem;
position: absolute;
top: 0rem;
z-index: -1;
}
@media only screen and (max-width: 559px) {
.kiduki__ttl::before,
.kiduki__ttl::after {
width: 7.4rem;
height: 6.3rem;
top: -1rem;
}
}
.kiduki__ttl::before {
background: url(https://www.shoutaibutsudou.com/wp-content/uploads/2025/05/kiduki__01.webp) no-repeat center center/contain;
left: 3rem;
}
.kiduki__ttl::after {
background: url(https://www.shoutaibutsudou.com/wp-content/uploads/2025/05/kiduki__02.webp) no-repeat center center/contain;
right: 3rem;
}
.kiduki__en {
font-size: clamp(1.1rem, 0.6873786408rem + 1.1003236246vw, 2.8rem);
width: fit-content;
margin-inline: auto;
position: relative;
letter-spacing: 0.5em;
margin-bottom: 8rem;
}
@media only screen and (max-width: 559px) {
.kiduki__en {
margin-bottom: 3rem;
}
}
.kiduki__en::before,
.kiduki__en::after {
content: "";
background: url(https://www.shoutaibutsudou.com/wp-content/uploads/2025/05/kiduki__border.webp) no-repeat center center/contain;
width: 17.5rem;
height: 0.8rem;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
@media only screen and (max-width: 559px) {
.kiduki__en::before,
.kiduki__en::after {
width: 7rem;
height: 0.3rem;
}
}
.kiduki__en::before {
left: -19rem;
}
@media only screen and (max-width: 559px) {
.kiduki__en::before {
left: -8rem;
}
}
@media only screen and (max-width: 559px) {
.kiduki__en::after {
right: -8rem;
}
}
.kiduki__textarea {
width: 78.2rem;
margin-inline: auto;
}
@media only screen and (max-width: 559px) {
.kiduki__textarea {
width: 100%;
}
}
.kiduki__text {
font-size: clamp(1.4rem, 1.254368932rem + 0.3883495146vw, 2rem);
line-height: 1.75;
font-weight: 500;
}
@media only screen and (max-width: 559px) {
.kiduki__text {
display: inline-block;
}
}
.kiduki__text--b {
margin-bottom: 4rem;
}
@media only screen and (max-width: 559px) {
.kiduki__text--b {
margin-bottom: 2rem;
}
}
.kiduki__text .marker {
background: linear-gradient(to bottom, transparent 60%, #f6eef0 40%);
display: inline;
}
.catch img {
width: 100%;
}
.info {
background-color: var(--colorW);
padding-top: 10rem;
}
@media only screen and (max-width: 559px) {
.info {
padding-top: 4rem;
}
}
.info__ttlarea {
margin-bottom: 8rem;
position: relative;
z-index: 10;
}
@media only screen and (max-width: 559px) {
.info__ttlarea {
margin-bottom: 1rem;
}
}
.info__ttlarea::before {
content: "";
background: url(https://www.shoutaibutsudou.com/wp-content/uploads/2025/05/info__05.webp) no-repeat center center/contain;
width: 37.8rem;
height: 27.2rem;
position: absolute;
top: -2rem;
left: 10rem;
z-index: -1;
}
@media only screen and (max-width: 559px) {
.info__ttlarea::before {
width: 16.3rem;
height: 11.7rem;
top: 3rem;
left: 0;
}
}
.info__subttl {
width: fit-content;
margin-inline: auto;
font-size: clamp(2.7rem, 2.3844660194rem + 0.8414239482vw, 4rem);
position: relative;
}
.info__subttl::before,
.info__subttl::after {
content: "";
width: 5.3rem;
height: 0.2rem;
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: var(--baseColor);
}
@media only screen and (max-width: 559px) {
.info__subttl::before,
.info__subttl::after {
width: 3.3rem;
}
}
.info__subttl::before {
left: -10rem;
}
@media only screen and (max-width: 559px) {
.info__subttl::before {
left: -5rem;
}
}
.info__subttl::after {
right: -10rem;
}
@media only screen and (max-width: 559px) {
.info__subttl::after {
right: -5rem;
}
}
.info__ttl {
text-align: center;
font-size: clamp(2.6rem, 2.0660194175rem + 1.4239482201vw, 4.8rem);
}
.info__ttl span {
font-size: clamp(2.6rem, 2.2601941748rem + 0.9061488673vw, 4rem);
}
.info__flex {
margin-bottom: 6rem;
position: relative;
z-index: 10;
}
@media only screen and (max-width: 559px) {
.info__flex {
gap: 2.5rem;
margin-bottom: 3rem;
}
}
.info__flexttl {
color: var(--mainColor);
font-size: clamp(2rem, 1.8058252427rem + 0.5177993528vw, 2.8rem);
line-height: 1.7142857143;
margin-bottom: 4rem;
}
.info__flextext {
font-size: clamp(1.4rem, 1.3029126214rem + 0.2588996764vw, 1.8rem);
font-weight: 500;
line-height: 1.75;
}
ul.info__list {
display: flex;
justify-content: center;
gap: 1.5rem;
margin-bottom: 6rem;
}
@media only screen and (max-width: 559px) {
ul.info__list {
flex-direction: column;
}
}
.info__listitem {
background-color: var(--mainColor);
color: var(--colorW);
font-size: clamp(1.8rem, 1.654368932rem + 0.3883495146vw, 2.4rem);
font-weight: 400;
width: 50rem;
height: 5rem;
display: flex;
align-items: center;
justify-content: center;
}
@media only screen and (max-width: 559px) {
.info__listitem {
width: 100%;
height: 3.7rem;
}
}
.info__card {
gap: 4.5rem;
padding-bottom: 6rem;
}
@media only screen and (max-width: 559px) {
.info__card {
grid-template-columns: repeat(1, 1fr);
gap: 4rem;
}
}
.info__cardfigure {
margin-bottom: 2rem;
}
.info__cardfigure img {
width: 100%;
}
@media only screen and (max-width: 559px) {
.info__cardfigure {
width: 28rem;
margin-inline: auto;
}
}
.info__cardttl {
color: var(--mainColor);
font-size: clamp(2rem, 1.9514563107rem + 0.1294498382vw, 2.2rem);
line-height: 1;
margin-bottom: 2rem;
}
@media only screen and (max-width: 559px) {
.info__cardttl {
text-align: center;
margin-bottom: 1rem;
}
}
.info__cardtext {
font-size: clamp(1.4rem, 1.3514563107rem + 0.1294498382vw, 1.6rem);
line-height: 1.5625;
font-weight: 500;
margin-bottom: 2.5rem;
letter-spacing: -0.04em;
}
@media only screen and (max-width: 559px) {
.info__cardtext {
margin-bottom: 1rem;
}
}
.info__cardlistitem {
border-bottom: 1px dotted #d0c9c5;
font-size: 1.4rem;
line-height: 2.2142857143;
padding-bottom: 0.5rem;
display: grid;
gap: 2rem;
grid-template-columns: repeat(2, 1fr);
}
@media only screen and (max-width: 559px) {
.info__cardlistitem {
line-height: 1.8;
}
}
.slider {
overflow: hidden;
position: relative;
width: 100%;
height: 26.2rem;
}
@media only screen and (max-width: 559px) {
.slider {
height: 10.4rem;
}
}
.slider__track {
display: flex;
width: 456rem;
animation: scroll 100s linear infinite;
}
@media only screen and (max-width: 559px) {
.slider__track {
width: 180rem;
}
}
.slider__item {
width: 38rem;
height: 100%;
object-fit: cover;
flex-shrink: 0;
}
@media only screen and (max-width: 559px) {
.slider__item {
width: 15rem;
}
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-228rem);
}
}
.access {
background-color: var(--colorW);
padding-top: 8rem;
}
@media only screen and (max-width: 559px) {
.access {
padding-top: 4rem;
}
}
.access__flex {
gap: 6rem;
}
@media only screen and (max-width: 559px) {
.access__flex {
gap: 4rem;
}
}
.access__ttl {
font-size: clamp(2rem, 1.854368932rem + 0.3883495146vw, 2.6rem);
font-weight: 500;
line-height: 1;
margin-bottom: 2rem;
}
@media only screen and (max-width: 559px) {
.access__ttl {
margin-bottom: 1rem;
}
}
.access__address {
font-size: clamp(1.4rem, 1.254368932rem + 0.3883495146vw, 2rem);
font-weight: 500;
}
@media only screen and (max-width: 559px) {
.access__address {
margin-bottom: 3.5rem;
}
}
.access__subttl {
font-size: clamp(2rem, 1.9514563107rem + 0.1294498382vw, 2.2rem);
font-weight: 500;
line-height: 1;
margin-bottom: 2rem;
}
@media only screen and (max-width: 559px) {
.access__subttl {
margin-bottom: 0.5rem;
}
}
.access__cont {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.access__list {
display: flex;
flex-wrap: wrap;
}
.access__list dt,
.access__list dd {
height: 5.5rem;
display: flex;
align-items: center;
padding-left: 1rem;
font-size: clamp(1.4rem, 1.3029126214rem + 0.2588996764vw, 1.8rem);
font-weight: 500;
border-bottom: 1px solid #b0a59f;
}
.access__list dt:first-of-type,
.access__list dd:first-of-type {
border-top: 1px solid #b0a59f;
}
@media only screen and (max-width: 559px) {
.access__list dt,
.access__list dd {
display: flex;
align-items: center;
justify-content: center;
height: 4.7rem;
text-align: center;
}
}
.access__list dt {
background: #efedec;
border-left: 1px solid #b0a59f;
width: 38%;
}
@media only screen and (max-width: 559px) {
.access__list dt {
width: 100%;
border-right: 1px solid #b0a59f;
}
}
.access__list dd {
width: 62%;
border-right: 1px solid #b0a59f;
}
@media only screen and (max-width: 559px) {
.access__list dd:first-of-type {
border-top: none;
}
}
@media only screen and (max-width: 559px) {
.access__list dd {
width: 100%;
border-left: 1px solid #b0a59f;
}
}
.access__map iframe {
width: 100%;
}
@media only screen and (max-width: 559px) {
.access__map iframe {
aspect-ratio: 16/9;
height: auto;
}
}
.comparison {
background-color: var(--colorW);
padding-bottom: 10rem;
}
@media only screen and (max-width: 559px) {
.comparison {
padding-bottom: 5rem;
}
}
.comparison__wrap {
width: 115rem;
margin-inline: auto;
}
@media only screen and (max-width: 559px) {
.comparison__wrap {
width: 100%;
padding-inline: 2rem;
}
}
.comparison__ttl {
line-height: 1;
font-size: clamp(2rem, 1.2718446602rem + 1.9417475728vw, 5rem);
font-weight: 500;
margin-bottom: 5rem;
}
@media only screen and (max-width: 559px) {
.comparison__ttl {
margin-bottom: 2.5rem;
}
}
.comparison__text {
font-size: clamp(1.4rem, 1.254368932rem + 0.3883495146vw, 2rem);
font-weight: 500;
margin-bottom: 4rem;
}
@media only screen and (max-width: 559px) {
.comparison__text {
margin-bottom: 2rem;
}
}
.comparison__table {
margin-bottom: 4rem;
}
.comparison__table img {
width: 53.8rem;
}
@media only screen and (max-width: 559px) {
.comparison__table {
overflow-x: scroll;
padding-bottom: 2rem;
position: relative;
padding-left: 4rem;
}
.comparison__table::before {
width: 3rem;
height: 3rem;
background: url(https://www.shoutaibutsudou.com/wp-content/uploads/2025/05/arrow__04.webp) no-repeat center center/contain;
content: "";
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
}
.comparison__table table {
width: 100%;
}
@media only screen and (max-width: 559px) {
.comparison__table table {
width: 90rem;
}
}
.comparison__table tr {
border-bottom: 1px solid #d0c9c5;
border-inline: 1px solid #d0c9c5;
}
.comparison__table tr:first-of-type {
border-top: 1px solid #d0c9c5;
}
.comparison__table th {
background-color: #efedec;
font-size: clamp(1.6rem, 1.4786407767rem + 0.3236245955vw, 2.1rem);
height: 6rem;
text-align: center;
vertical-align: middle;
}
@media only screen and (max-width: 559px) {
.comparison__table th {
height: 4.9rem;
}
}
.comparison__table th:first-of-type {
width: 18rem;
}
@media only screen and (max-width: 559px) {
.comparison__table th:first-of-type {
width: 14.5rem;
}
}
.comparison__table th:nth-of-type(2) {
width: 20.5rem;
}
@media only screen and (max-width: 559px) {
.comparison__table th:nth-of-type(2) {
width: 16.5rem;
}
}
.comparison__table th:nth-of-type(3) {
width: 14.8rem;
}
@media only screen and (max-width: 559px) {
.comparison__table th:nth-of-type(3) {
width: 12rem;
}
}
.comparison__table th:not(:last-of-type) {
border-right: 1px solid #d0c9c5;
}
.comparison__table td {
text-align: center;
vertical-align: middle;
padding-block: 2rem;
}
@media only screen and (max-width: 559px) {
.comparison__table td {
padding-block: 1rem;
}
}
.comparison__table td:not(:last-of-type) {
border-right: 1px solid #d0c9c5;
}
.comparison__table td:first-child {
font-size: clamp(2rem, 1.854368932rem + 0.3883495146vw, 2.6rem);
}
.comparison__table td:nth-child(2) {
color: var(--mainColor);
font-size: clamp(3rem, 2.8300970874rem + 0.4530744337vw, 3.7rem);
text-align: right;
padding-inline: 2rem;
line-height: 0.8;
}
.comparison__table td:nth-child(2) span {
font-size: 50%;
}
.comparison__table td:nth-child(3) {
font-size: clamp(1.5rem, 1.3786407767rem + 0.3236245955vw, 2rem);
}
@media only screen and (max-width: 559px) {
.comparison__table td:nth-child(4) img {
width: 42.9rem;
height: auto;
}
}
.comparison__message {
background-color: var(--mainColor);
color: var(--colorW);
position: relative;
padding: 2rem 2.5rem;
}
@media only screen and (max-width: 559px) {
.comparison__message {
padding: 2rem;
}
}
.comparison__message::after {
content: "";
background: url(https://www.shoutaibutsudou.com/wp-content/uploads/2025/05/comparison__04.webp) no-repeat center center/contain;
width: 18.6rem;
height: 15.8rem;
position: absolute;
top: -3rem;
right: -4rem;
}
@media only screen and (max-width: 559px) {
.comparison__message::after {
width: 7.3rem;
height: 6.2rem;
top: inherit;
bottom: -2rem;
right: -2rem;
}
}
.comparison__messagetext {
font-size: clamp(1.8rem, 1.7029126214rem + 0.2588996764vw, 2.2rem);
line-height: 1.5454545455;
}
@media only screen and (max-width: 559px) {
.comparison__messagetext {
display: inline-block;
}
}
@media only screen and (max-width: 559px) {
.comparison__messagetext span {
display: inline;
}
}
.entrust {
padding: 10rem 0;
}
@media only screen and (max-width: 559px) {
.entrust {
padding: 5rem 0;
}
}
.entrust__ttl {
font-size: clamp(2.1rem, 1.3961165049rem + 1.8770226537vw, 5rem);
line-height: 1.6;
margin-bottom: 4rem;
}
@media only screen and (max-width: 559px) {
.entrust__ttl {
margin-bottom: 2rem;
}
}
.entrust__ttl span {
color: var(--mainColor);
}
.entrust__text {
font-size: clamp(1.4rem, 1.254368932rem + 0.3883495146vw, 2rem);
line-height: 1.75;
}
.entrust__textarea {
margin-bottom: 3.5rem;
}
@media only screen and (max-width: 559px) {
.entrust__textarea {
margin-bottom: 3rem;
}
}
.entrust__steps {
display: flex;
gap: 4rem;
margin-bottom: 2.5rem;
}
@media only screen and (max-width: 559px) {
.entrust__steps {
overflow-x: scroll;
gap: 2rem;
padding-bottom: 2rem;
position: relative;
padding-left: 4rem;
}
.entrust__steps::before {
width: 3rem;
height: 3rem;
background: url(https://www.shoutaibutsudou.com/wp-content/uploads/2025/05/arrow__04.webp) no-repeat center center/contain;
content: "";
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
}
.entrust__step {
padding: 3rem 2rem;
color: white;
text-align: center;
position: relative;
flex: 1;
font-size: clamp(1.2rem, 0.9572815534rem + 0.6472491909vw, 2.2rem);
writing-mode: vertical-rl;
text-orientation: upright;
display: flex;
align-items: center;
justify-content: center;
}
.entrust__step:not(:last-child)::after {
content: "";
position: absolute;
top: 50%;
right: -3rem;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 1.5rem solid transparent;
border-bottom: 1.5rem solid transparent;
border-left: 2rem solid var(--baseColor);
z-index: 1;
}
@media only screen and (max-width: 559px) {
.entrust__step:not(:last-child)::after {
border-left: 0.8rem solid var(--baseColor);
border-top: 0.5rem solid transparent;
border-bottom: 0.5rem solid transparent;
right: -1.4rem;
}
}
.entrust__step:nth-child(1) {
background-color: #a55465;
}
.entrust__step:nth-child(2) {
background-color: #a55465;
}
.entrust__step:nth-child(3) {
background-color: #97525d;
}
.entrust__step:nth-child(4) {
background-color: #91525a;
}
.entrust__step:nth-child(5) {
background-color: #835052;
}
.entrust__step:nth-child(6) {
background-color: #7c4f4e;
}
.entrust__step:nth-child(7) {
background-color: #6f4e47;
}
.entrust__step:nth-child(8) {
background-color: #614c3f;
}
.entrust__message {
background-color: var(--colorW);
border: 3px solid var(--mainColor);
padding: 2.5rem 3.5rem;
}
@media only screen and (max-width: 559px) {
.entrust__message {
padding: 1.5rem;
}
}
.entrust__messagetext {
color: var(--mainColor);
font-size: clamp(1.4rem, 1.254368932rem + 0.3883495146vw, 2rem);
line-height: 1.95;
font-weight: 500;
}
.entrust__messagetext--large {
font-size: clamp(1.8rem, 1.6058252427rem + 0.5177993528vw, 2.6rem);
font-weight: 500;
line-height: 1.7;
}
.voice {
padding: 10rem 0;
background-color: var(--colorW);
}
@media only screen and (max-width: 559px) {
.voice {
padding: 5rem 0;
}
}
.voice__ttl {
font-size: clamp(2.1rem, 1.3961165049rem + 1.8770226537vw, 5rem);
line-height: 1;
margin-bottom: 3.5rem;
}
@media only screen and (max-width: 559px) {
.voice__ttl {
text-align: center;
margin-bottom: 2.5rem;
line-height: 1.4;
}
}
.voice__text {
font-size: clamp(1.4rem, 1.254368932rem + 0.3883495146vw, 2rem);
margin-bottom: 3.5rem;
}
@media only screen and (max-width: 559px) {
.voice__text {
line-height: 2;
padding-left: 2rem;
}
}
.voice__cont {
background: #f3f3e9;
padding: 5.5rem 7.5rem;
}
@media only screen and (max-width: 559px) {
.voice__cont {
padding: 2rem 1rem;
}
}
ul.voice__list {
display: grid;
grid-template-columns: repeat(7, 1fr);
position: relative;
}
@media only screen and (max-width: 559px) {
ul.voice__list {
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem 0;
padding-top: 5rem;
}
}
.voice__listitem {
display: flex;
flex-direction: column;
gap: 1.2rem;
}
.voice__listitem img {
width: 8.9rem;
}
@media only screen and (max-width: 559px) {
.voice__listitem {
gap: 0.7rem;
align-items: center;
}
}
@media only screen and (max-width: 559px) {
.voice__listitem img {
width: 5.8rem;
height: auto;
}
}
@media only screen and (max-width: 559px) {
.voice__listitem:nth-of-type(1) {
position: absolute;
top: -35%;
right: 0;
}
}
p.voice__real {
font-size: clamp(1.2rem, 1.1029126214rem + 0.2588996764vw, 1.6rem);
line-height: 1.5;
}
@media only screen and (max-width: 559px) {
p.voice__real {
font-size: 1.1rem;
}
}
.faq {
padding: 10rem 0;
}
@media only screen and (max-width: 559px) {
.faq {
padding: 5rem 0;
}
}
.faq__ttl {
font-size: clamp(2.1rem, 1.3961165049rem + 1.8770226537vw, 5rem);
line-height: 1;
margin-bottom: 4.5rem;
}
@media only screen and (max-width: 559px) {
.faq__ttl {
text-align: center;
margin-bottom: 2rem;
}
}
.faq__wrap {
width: 115rem;
margin-inline: auto;
}
@media only screen and (max-width: 559px) {
.faq__wrap {
width: 100%;
padding-inline: 2rem;
}
}
.faq__list {
margin-bottom: 8rem;
}
@media only screen and (max-width: 559px) {
.faq__list {
margin-bottom: 4rem;
}
}
.faq__item {
margin-bottom: 2em;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.faq__item:not(:last-child) {
margin-bottom: 6rem;
}
@media only screen and (max-width: 559px) {
.faq__item:not(:last-child) {
margin-bottom: 2rem;
}
}
.faq__question {
background-color: var(--baseColor);
color: var(--colorW);
font-size: clamp(1.6rem, 1.5029126214rem + 0.2588996764vw, 2rem);
line-height: 1.2;
border: 1px solid var(--baseColor);
padding: 2.5rem 3rem;
border-radius: 0.8rem 0.8rem 0 0;
position: relative;
display: flex;
gap: 1.5rem;
}
@media only screen and (max-width: 559px) {
.faq__question {
padding: 1.5rem 2rem;
}
}
.faq__question::before {
content: "Q.";
font-weight: 500;
font-size: clamp(2rem, 1.9029126214rem + 0.2588996764vw, 2.4rem);
top: -0.5rem;
position: relative;
}
.faq__answer {
font-size: clamp(1.4rem, 1.3514563107rem + 0.1294498382vw, 1.6rem);
background: #efedec;
border: 1px solid var(--baseColor);
padding: 2.5rem 3rem;
border-radius: 0 0 0.8rem 0.8rem;
position: relative;
display: flex;
gap: 1.5rem;
}
@media only screen and (max-width: 559px) {
.faq__answer {
padding: 1.5rem 2rem;
}
}
.faq__answer::before {
content: "A.";
font-size: clamp(2rem, 1.9029126214rem + 0.2588996764vw, 2.4rem);
font-weight: 500;
top: -0.5rem;
position: relative;
}
.plan__wrap {
background-color: var(--colorW);
padding: 10rem 0 0;
margin-bottom: 10rem;
}
@media only screen and (max-width: 559px) {
.plan__wrap {
padding-top: 3rem;
margin-top: 1.2rem;
width: 100vw;
left: 50%;
transform: translateX(-50%);
position: relative;
padding-inline: 2rem;
margin-bottom: 5rem;
}
}
.plan__head {
text-align: center;
position: relative;
z-index: 10;
}
.plan__head::before {
content: "";
position: absolute;
z-index: -1;
}
.plan__copy {
line-height: 1;
font-size: 3.6rem;
font-weight: 500;
margin-bottom: 4rem;
font-size: clamp(1.8rem, 1.3631067961rem + 1.1650485437vw, 3.6rem);
}
@media only screen and (max-width: 559px) {
.plan__copy {
margin-bottom: 1.5rem;
}
}
.plan__ttl {
line-height: 1;
margin-bottom: 2.5rem;
font-size: clamp(5.2rem, 4.2776699029rem + 2.4595469256vw, 9rem);
font-weight: 500;
}
@media only screen and (max-width: 559px) {
.plan__ttl {
margin-bottom: 2rem;
}
}
.plan__text {
font-size: 2.1rem;
font-size: clamp(1.4rem, 1.2300970874rem + 0.4530744337vw, 2.1rem);
font-weight: 500;
margin-bottom: 3.5rem;
}
@media only screen and (max-width: 559px) {
.plan__text {
margin-bottom: 1.5rem;
}
}
.plan__text span {
padding-inline: 2rem;
}
p.plan__price {
font-size: clamp(3.6rem, 2.7262135922rem + 2.3300970874vw, 7.2rem);
font-weight: 500;
line-height: 1;
margin-bottom: 6rem;
line-height: 1;
color: var(--mainColor);
}
@media only screen and (max-width: 559px) {
p.plan__price {
margin-bottom: 3rem;
}
}
.plan__price span {
font-size: 50%;
}
.plan__btn {
margin-bottom: 10rem;
}
@media only screen and (max-width: 559px) {
.plan__btn {
margin-bottom: 4rem;
}
}
.plan__btnlist {
display: flex;
justify-content: center;
gap: 2.7rem;
}
@media only screen and (max-width: 559px) {
.plan__btnlist {
gap: 1rem;
flex-wrap: wrap;
}
}
.plan__btnlink {
font-size: clamp(1.4rem, 1.3029126214rem + 0.2588996764vw, 1.8rem);
line-height: 1.6111111111;
display: flex;
align-items: center;
justify-content: center;
width: 22.5rem;
height: 10rem;
border: 1px solid var(--mainColor);
text-align: center;
}
@media only screen and (max-width: 559px) {
.plan__btnlink {
width: 16rem;
height: 6.8rem;
}
}
.plan__btnitem {
transition: 0.5s;
}
@media only screen and (min-width: 600px) {
.plan__btnitem:hover {
opacity: 1;
transform: translateY(-1.5rem);
}
}
.plan__subttl {
text-align: center;
margin-bottom: 6rem;
font-size: clamp(2rem, 1.7572815534rem + 0.6472491909vw, 3rem);
position: relative;
z-index: 10;
}
@media only screen and (max-width: 559px) {
.plan__subttl {
margin-bottom: 3rem;
}
}
.plan__subttl span {
background-color: var(--colorW);
padding-inline: 2rem;
padding-block: 0.1rem;
}
.plan__subttl::before {
content: "";
width: 100%;
height: 1px;
background-color: var(--mainColor);
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
z-index: -1;
}
.plan__sec {
padding-bottom: 8rem;
}
@media only screen and (max-width: 559px) {
.plan__sec {
padding-bottom: 4rem;
}
}
.plan__sec--02 {
position: relative;
}
.plan__sec--03 {
padding-bottom: 6rem;
}
.plan__seclist {
display: flex;
gap: 2rem 1.5rem;
flex-wrap: wrap;
margin-inline: auto;
}
@media only screen and (max-width: 559px) {
.plan__seclist {
width: 34rem;
}
}
.plan__item img {
width: 18.7rem;
height: auto;
}
@media only screen and (max-width: 559px) {
.plan__item img {
width: 10.3rem;
height: auto;
}
}
.plan__cont {
width: 74rem;
margin-inline: auto;
}
@media only screen and (max-width: 559px) {
.plan__cont {
width: 100%;
}
}
.plan__listitem {
margin-bottom: 3.5rem;
}
@media only screen and (max-width: 559px) {
.plan__listitem {
margin-bottom: 3rem;
}
}
.plan__listttl {
font-size: clamp(1.8rem, 1.6786407767rem + 0.3236245955vw, 2.3rem);
line-height: 1;
margin-bottom: 1.5rem;
}
@media only screen and (max-width: 559px) {
.plan__listttl {
margin-bottom: 1.5rem;
}
}
.plan__listtext {
font-size: clamp(1.4rem, 1.3029126214rem + 0.2588996764vw, 1.8rem);
line-height: 1.5;
}
.plan__caution {
font-size: clamp(1.2rem, 1.1029126214rem + 0.2588996764vw, 1.6rem);
line-height: 1.5;
}
.plan__caution .small {
font-size: clamp(1.2rem, 1.1029126214rem + 0.2588996764vw, 1.6rem);
}
.plan__flow {
display: flex;
justify-content: space-between;
position: relative;
z-index: 10;
margin-bottom: 0 !important;
}
@media only screen and (max-width: 559px) {
.plan__flow {
flex-direction: column;
justify-content: center;
gap: 1.5rem;
}
}
.plan__flow::before {
content: "";
width: 100%;
height: 0.8rem;
background: #dfdbd9;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
z-index: -1;
}
@media only screen and (max-width: 559px) {
.plan__flow::before {
width: 0.8rem;
height: 100%;
left: 50%;
transform: translateX(-50%);
top: 0;
}
}
.plan__flowitem {
writing-mode: vertical-rl;
text-orientation: upright;
color: var(--colorW);
font-size: clamp(1.6rem, 1.2601941748rem + 0.9061488673vw, 3rem);
height: 20rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0.7rem;
width: 6rem;
}
@media only screen and (max-width: 559px) {
.plan__flowitem {
width: 30rem;
height: 3rem;
writing-mode: inherit;
text-orientation: inherit;
margin-inline: auto !important;
}
}
.plan__flowitem:last-child {
font-size: clamp(1.6rem, 1.3815533981rem + 0.5825242718vw, 2.5rem);
}
.plan__omoi {
font-size: 1.6rem;
}
.plan__omoitext {
margin-bottom: 1rem;
}
.plan__omoiitem {
display: flex;
}
.plan__omoiitem:not(:last-child) {
margin-bottom: 1.5em;
}
@media only screen and (max-width: 559px) {
#kazoku {
border-top: solid 1.2rem var(--mainColor);
}
}
#kazoku .plan__btnitem {
background: url(https://www.shoutaibutsudou.com/wp-content/uploads/2025/05/kazoku__bg.webp) no-repeat center center/cover;
}
#kazoku .plan__flowitem {
background-color: var(--mainColor);
}
#kazoku .plan__head:before {
background: url(https://www.shoutaibutsudou.com/wp-content/uploads/2025/05/kazoku__head.webp) no-repeat center center/contain;
width: 31.4rem;
height: 29.4rem;
top: 4rem;
right: 18rem;
}
@media only screen and (max-width: 559px) {
#kazoku .plan__head:before {
width: 11.3rem;
height: 10.4rem;
top: -3rem;
right: 6rem;
}
}
#kazoku .plan__sec--02::after {
content: "";
background: url(https://www.shoutaibutsudou.com/wp-content/uploads/2025/05/kazoku__after.webp) no-repeat center center/contain;
width: 24.9rem;
height: 24.9rem;
position: absolute;
bottom: 1rem;
right: 3rem;
}
@media only screen and (max-width: 559px) {
#kazoku .plan__sec--02::after {
position: relative;
display: block;
width: 20.1rem;
height: 20.1rem;
bottom: inherit;
right: inherit;
left: 50%;
transform: translateX(-50%);
margin: 2rem 0 0;
}
}
@media only screen and (max-width: 559px) {
#jitaku {
border-top: solid 1.2rem #976929;
}
}
#jitaku .plan__subttl::before {
background-color: #d5c3a9;
}
#jitaku .plan__btnitem {
background: url(https://www.shoutaibutsudou.com/wp-content/uploads/2025/05/jitaku__bg.webp) no-repeat center center/cover;
}
#jitaku .plan__flowitem {
background-color: #976929;
}
#jitaku .plan__flow::before {
background-color: #d0c9c5;
}
#jitaku .plan__head:before {
background: url(https://www.shoutaibutsudou.com/wp-content/uploads/2025/05/jitaku__head.webp) no-repeat center center/contain;
width: 31.4rem;
height: 29.4rem;
top: 4rem;
right: 18rem;
}
@media only screen and (max-width: 559px) {
#jitaku .plan__head:before {
width: 11.3rem;
height: 10.4rem;
top: -3rem;
right: 6rem;
}
}
#jitaku .plan__btnlink {
border-color: #976929;
}
#jitaku .plan__sec--02::after {
content: "";
background: url(https://www.shoutaibutsudou.com/wp-content/uploads/2025/05/jitaku__after.webp) no-repeat center center/contain;
width: 24.9rem;
height: 24.9rem;
position: absolute;
bottom: 1rem;
right: 5rem;
}
@media only screen and (max-width: 559px) {
#jitaku .plan__sec--02::after {
position: relative;
display: block;
width: 20.1rem;
height: 20.1rem;
bottom: inherit;
right: inherit;
left: 50%;
transform: translateX(-50%);
margin: 2rem 0 0;
}
}
@media only screen and (max-width: 559px) {
#jiyu {
border-top: solid 1.2rem var(--baseColor);
}
}
#jiyu .plan__subttl::before {
background-color: #c0b7b2;
}
#jiyu .plan__btnitem {
background: url(https://www.shoutaibutsudou.com/wp-content/uploads/2025/05/jiyu__bg.webp) no-repeat center center/cover;
}
#jiyu .plan__flowitem {
background-color: var(--baseColor);
}
#jiyu .plan__flow::before {
background-color: #f7e7c7;
}
#jiyu .plan__head:before {
background: url(https://www.shoutaibutsudou.com/wp-content/uploads/2025/05/jiyu__head.webp) no-repeat center center/contain;
width: 31.4rem;
height: 29.4rem;
top: 4rem;
right: 18rem;
}
@media only screen and (max-width: 559px) {
#jiyu .plan__head:before {
width: 11.3rem;
height: 10.4rem;
top: -3rem;
right: 6rem;
}
}
#jiyu .plan__btnlink {
border-color: var(--baseColor);
}
.tab {
padding-top: 12rem;
}
@media only screen and (max-width: 559px) {
.tab {
padding-top: 4rem;
}
}
.tab__buttons {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
@media only screen and (max-width: 559px) {
.tab__buttons {
gap: 0.5rem;
}
}
.tab__buttons button {
appearance: none;
padding: 0;
cursor: pointer;
}
.tab__button {
border: 4px solid var(--mainColor);
background-color: var(--mainColor);
transition: 0.5s;
}
@media only screen and (max-width: 559px) {
.tab__button {
border: 1px solid var(--mainColor);
}
}
@media only screen and (min-width: 600px) {
.tab__button:hover {
transform: translateY(1.5rem);
}
}
.tab__button.is-active {
position: relative;
}
.tab__button.is-active::after {
content: "";
width: 8rem;
height: 3rem;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
position: absolute;
left: 50%;
transform: translateX(-50%) rotate(180deg);
bottom: -3rem;
}
@media only screen and (max-width: 559px) {
.tab__button.is-active::after {
width: 2.8rem;
height: 1.3rem;
bottom: -1.3rem;
}
}
.tab__button--kazoku.is-active::after {
background-color: var(--mainColor);
}
.tab__button--jitaku {
border-color: #976929;
background-color: #976929;
}
.tab__button--jitaku.is-active::after {
background-color: #976929;
}
.tab__button--jiyu {
border-color: var(--baseColor);
background-color: var(--baseColor);
}
.tab__button--jiyu.is-active::after {
background-color: var(--baseColor);
}
.tab__content {
display: none;
}
.tab__content.is-visible {
display: block;
}
.tab__buttonarea {
background-color: var(--colorW);
color: var(--baseColor);
padding: 3rem 1.5rem 2.5rem;
}
@media only screen and (max-width: 559px) {
.tab__buttonarea {
padding: 2rem 0.5rem;
}
}
.tab__button img {
height: 24rem;
object-fit: cover;
width: 100%;
}
@media only screen and (max-width: 559px) {
.tab__button img {
height: 9rem;
}
}
.tab__buttonttl {
font-size: clamp(1.1rem, 0.8815533981rem + 0.5825242718vw, 2rem);
font-weight: 500;
display: flex;
flex-direction: column;
gap: 1rem;
text-align: center;
justify-content: center;
line-height: 1;
}
@media only screen and (max-width: 559px) {
.tab__buttonttl {
min-height: 7.1rem;
}
}
.tab__buttonttl span {
font-size: clamp(2.7rem, 1.8990291262rem + 2.1359223301vw, 6rem);
font-weight: 500;
}
p.tab__buttonprice {
font-size: clamp(2.2rem, 1.2776699029rem + 2.4595469256vw, 6rem);
color: var(--mainColor);
font-weight: 500;
}
@media only screen and (max-width: 559px) {
p.tab__buttonprice {
line-height: 1.2;
text-align: left;
width: fit-content;
margin-top: 0.5rem;
margin-inline: auto;
}
}
.tab__buttonprice span {
font-size: 50%;
line-height: 1;
}
@media only screen and (max-width: 559px) {
.tab__buttonprice span span {
font-size: 100%;
display: block;
}
}
.tab__buttonlink {
color: var(--colorW);
height: 6rem;
font-size: clamp(1.2rem, 1.1029126214rem + 0.2588996764vw, 1.6rem);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
@media only screen and (max-width: 559px) {
.tab__buttonlink {
height: 2.5rem;
}
}
.tab__buttonlink::after {
font-family: "Font Awesome 6 Free";
font-weight: 900;
content: "\f054";
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 10rem;
}
@media only screen and (max-width: 559px) {
.tab__buttonlink::after {
right: 0.5rem;
font-size: 1rem;
top: 1.3rem;
}
}
.tab__buttonlink--kazoku {
background: url(https://www.shoutaibutsudou.com/wp-content/uploads/2025/05/kazoku__btn.webp) no-repeat center center/cover;
}
.tab__buttonlink--jitaku {
background: url(https://www.shoutaibutsudou.com/wp-content/uploads/2025/05/jitaku__btn.webp) no-repeat center center/cover;
}
.tab__buttonlink--jiyu {
background: url(https://www.shoutaibutsudou.com/wp-content/uploads/2025/05/jiyu__btn.webp) no-repeat center center/cover;
}
.tab-jump__area {
display: flex;
background-color: var(--baseColor);
padding: 0.8rem;
border-radius: 1rem;
width: fit-content;
gap: 0.5rem;
margin-left: 6.5rem;
}
@media only screen and (max-width: 559px) {
.tab-jump__area {
flex-direction: column;
margin-inline: 2rem;
width: calc(100% - 4rem);
padding: 0.5rem;
transform: translateY(-4rem);
position: absolute;
}
}
.tab-jump__area button {
appearance: none;
display: block;
margin: 0;
padding: 0;
border: none;
line-height: 1;
vertical-align: top;
box-sizing: border-box;
}
button.tab-jump[data-target="kazoku"] {
background: #f7e7c7;
}
button.tab-jump[data-target="jitaku"] {
background: #976929;
}
button.tab-jump[data-target="jiyu"] {
background: var(--baseColor);
}
@media only screen and (max-width: 559px) {
.tab-jump__area button {
display: flex;
align-items: stretch;
}
}
.tab-jump__area button:hover {
opacity: 0.8;
}
.tab-jump__area button:hover .tab-jump__ttl span img {
transform: translateX(1rem);
}
.tab-jump__img {
height: 16.2rem;
width: auto;
background-color: var(--baseColor);
}
@media only screen and (max-width: 559px) {
.tab-jump__img {
width: 13.8rem;
height: 10rem;
aspect-ratio: 16 / 9;
object-fit: cover;
}
}
.tab-jump__ttl {
font-size: 1.6rem;
font-size: clamp(1.4rem, 1.3514563107rem + 0.1294498382vw, 1.6rem);
font-weight: 500;
line-height: 1.3;
padding-block: 1rem;
}
@media only screen and (max-width: 559px) {
.tab-jump__ttl {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
}
.tab-jump__ttl span {
font-size: clamp(3.4rem, 3.1815533981rem + 0.5825242718vw, 4.3rem);
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
font-weight: 500;
line-height: 1;
padding-top: 0.5rem;
}
.tab-jump__ttl span img {
transition: 0.5s;
width: 2.4rem;
height: 2.4rem;
margin-top: 0.8rem;
}
@media only screen and (max-width: 559px) {
.tab-jump__ttl span img {
width: 2rem;
height: 2rem;
margin-top: 0.5rem;
}
}
.tab-jump__ttl--kazoku {
background: #f7e7c7;
color: var(--baseColor);
}
.tab-jump__ttl--jitaku {
background: #976929;
color: #f7e7c7;
}
.tab-jump__ttl--jiyu {
background: var(--baseColor);
color: #f7e7c7;
}
.contact {
padding-block: 10rem;
}
@media only screen and (max-width: 559px) {
.contact {
padding-block: 5rem;
}
}
.contact__wrap {
background-color: var(--colorW);
padding-block: 10rem;
position: relative;
}
@media only screen and (max-width: 559px) {
.contact__wrap {
padding: 4rem 2rem;
}
}
.contact__wrap::before,
.contact__wrap::after {
content: "";
background: url(https://www.shoutaibutsudou.com/wp-content/uploads/2025/05/corner__02.webp) no-repeat center center/contain;
width: 18.5rem;
height: 18.5rem;
position: absolute;
}
@media only screen and (max-width: 559px) {
.contact__wrap::before,
.contact__wrap::after {
width: 3.4rem;
height: 3.4rem;
}
}
.contact__wrap::before {
top: 0;
right: 0;
}
.contact__wrap::after {
left: 0;
bottom: 0;
transform: rotate(180deg);
}
.contact__ttl {
font-size: clamp(2rem, 1.2718446602rem + 1.9417475728vw, 5rem);
text-align: center;
margin-bottom: 2.5rem;
line-height: 1;
}
.contact__text {
font-size: clamp(1.4rem, 1.254368932rem + 0.3883495146vw, 2rem);
text-align: center;
line-height: 1;
margin-bottom: 4.5rem;
}
@media only screen and (max-width: 559px) {
.contact__text {
margin-bottom: 2.5rem;
line-height: 1.75;
}
}
.contact__area {
width: 78.8rem;
margin-inline: auto;
}
@media only screen and (max-width: 559px) {
.contact__area {
width: 100%;
}
}
.form__group {
margin-bottom: 4rem;
display: flex;
flex-direction: column;
}
@media only screen and (max-width: 559px) {
.form__group {
margin-bottom: 2.5rem;
}
}
label {
font-weight: bold;
margin-bottom: 1rem;
font-size: clamp(1.4rem, 1.3514563107rem + 0.1294498382vw, 1.6rem);
}
.form__required {
background-color: var(--mainColor);
color: var(--colorW);
padding: 0.1rem 0.5rem;
margin-left: 0.5rem;
}
input[type="text"],
input[type="tel"],
input[type="email"],
textarea {
background-color: #f3f0ef;
border: none;
padding: 1rem;
font-size: 1.6rem;
width: 100%;
box-sizing: border-box;
outline: none;
}
input[type="text"],
input[type="tel"],
input[type="email"] {
height: 6rem;
}
@media only screen and (max-width: 559px) {
input[type="text"],
input[type="tel"],
input[type="email"] {
height: 4rem;
}
}
textarea {
resize: vertical;
min-height: 20rem;
margin-bottom: 2rem;
}
.form__group--checkbox {
font-size: clamp(1.4rem, 1.3514563107rem + 0.1294498382vw, 1.6rem);
line-height: 1.5;
border: 1px solid var(--baseColor);
padding: 1rem;
background: #fff;
}
.form__group--checkbox label {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0;
padding: 1rem;
}
@media only screen and (max-width: 559px) {
.form__group--checkbox label {
display: block;
line-height: 1.75;
}
}
.form__group--checkbox label a {
text-decoration: underline;
font-size: clamp(1.4rem, 1.3514563107rem + 0.1294498382vw, 1.6rem);
font-weight: 500;
}
.form__group--submit {
text-align: center;
}
.form__submit {
text-align: center;
background-color: var(--baseColor);
padding: 2.5rem 5.5rem;
font-size: clamp(1.4rem, 1.254368932rem + 0.3883495146vw, 2rem);
margin: 0 auto;
display: inline-block;
width: fit-content;
letter-spacing: 0.1em;
color: var(--colorW);
line-height: 1;
transition: 0.5s;
border: 1px solid var(--colorW);
cursor: pointer;
}
@media only screen and (max-width: 559px) {
.form__submit {
padding: 2rem;
width: 100%;
}
}
@media only screen and (min-width: 600px) {
.form__submit:hover {
opacity: 1;
background-color: var(--colorW);
color: var(--baseColor);
border: 1px solid var(--baseColor);
}
}
.form__submit i {
padding-left: 3rem;
}
input[type="checkbox"] {
width: 2rem;
height: 2rem;
border: 1px solid;
margin-right: 1rem;
}
input[type="checkbox"] {
appearance: none; /* デフォルトのチェックを消す */
width: 2rem;
height: 2rem;
border: 1px solid #5b3c32;
margin-right: 1rem;
position: relative;
cursor: pointer;
background-color: #fff;
transition: background-color 0.3s ease, border-color 0.3s ease;
}
@media only screen and (max-width: 559px) {
input[type="checkbox"] {
width: 1.5rem;
height: 1.5rem;
margin-right: 0;
top: 0.3rem;
}
}
/* チェックが入ったら ✅マーク風を表示！ */
input[type="checkbox"]:checked::after {
content: "";
position: absolute;
top: 0.3rem;
left: 0.6rem;
width: 0.5rem;
height: 1rem;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(45deg);
}
@media only screen and (max-width: 559px) {
input[type="checkbox"]:checked::after {
top: -0.1rem;
left: 0.4rem;
}
}
input[type="checkbox"]:checked {
background-color: #5b3c32; /* ✅入れた時の色 */
border-color: #5b3c32;
}
/*# sourceMappingURL=style.css.map */
.wpcf7-list-item {
margin: 0 !important;
}
.form__group--checkbox label {
gap: 0.5rem;
padding: 0.5rem;
}
.form__group--checkbox label a,
.plan__btnlink {
color: var(--baseColor);
}
.search-overlay,
.mobile-nav-container,
.header-wrapper,
.header,
.navigation-overlay,
.navigation-overlay,
.header-wrapper,
.butsudan-footer,
.social-footer,
.copyright-footer,
.entry-page-title,
.row.is-flex {
display: none;
}
.col-md-12 {
display: contents;
}
.hentry ul li,
.hentry ol li {
margin-left: 0;
list-style-type: none;
}
.entry-page-title + p {
display: none;
}
.l-hdr__float + p {
height: 0;
}
.container {
width: 100% !important;
}
@media only screen and (max-width: 559px) {
.content-container,
.project-content {
padding: 0 !important;
}
}
.wpcf7-not-valid-tip {
font-size: 1.4rem;
margin-top: 0.5rem;
}
/* */