.fv {
min-height: 60vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 5rem 3rem;
position: relative;
background: url() center/cover no-repeat;
}
.fv--pc {
background-image: var(--fv-pc);
}
.fv::before {
content: '';
position: absolute;
inset: 0;
background: rgba(245, 240, 234, .5); z-index: 1;
}
.fv > * {
position: relative;
z-index: 2;
}
.fv-logo {
width: 70px;
margin-bottom: 1rem;
opacity: 0;
animation:
pop .7s cubic-bezier(.34,1.56,.64,1) .3s forwards,
fvFloat 3s ease-in-out 1s infinite;
}
@keyframes fvFloat {
0%, 100% { transform: translateY(0); }
50%      { transform: translateY(-8px); }
}
.fv h2 {
font-family: 'Zen Maru Gothic', sans-serif;
font-weight: 700;
font-size: 2.5rem;
letter-spacing: .04em;
line-height: 1.6; opacity: 0;
animation: up .8s ease-out .6s forwards;
}
.fv .sub {
margin-top: .8rem;
font-family: 'Zen Maru Gothic', sans-serif;
font-weight: 500;
font-size: 1rem;
line-height: 2; opacity: 0;
animation: up .8s ease-out .9s forwards;
}
.fv-sc {
position: absolute;
bottom: 24px;
font-family: var(--round);
font-size: .8rem;
color: rgba(255,255,255,.5);
opacity: 0;
animation: fadeIn .5s ease-out 1.5s forwards;
}
.fv-sc span {
display: inline-block;
animation: bounce 2.5s ease-in-out 2s infinite;
} .fv--noimg {
background: var(--bg-sec);
}
.fv--noimg::before {
background: none;
}
.fv--noimg h1 {
color: var(--text);
}
.fv--noimg .sub {
color: var(--text-s);
}
.fv--noimg .fv-sc {
color: var(--text-l);
}
.fv--noimg .fv-logo {
filter: none;
} .sec-make {
padding: 5rem 0;
}
.mk-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
margin-bottom: 3rem;
}
.mk-card {
border-radius: 14px;
overflow: hidden;
background: #fff;
border: 1px solid #D8D0C7; transition: transform .3s, border-color .3s, box-shadow .3s;
display: block;
} .mk-thumb {
aspect-ratio: 4/3;
background: var(--thumb);
display: flex;
align-items: center;
justify-content: center;
font-size: .55rem;
color: var(--text-l);
letter-spacing: .1em;
overflow: hidden;
position: relative;
}
.mk-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
} .mk-body {
padding: .8rem .9rem .95rem;
}
.mk-body h3 {
text-align: center;
font-family: 'Zen Maru Gothic', sans-serif;
font-weight: 700;
font-size: 1.1rem;
line-height: 1.5;
margin-bottom: .2rem;
}
.mk-body p {
text-align: center;
font-size: .875rem;
color: #6D6058;
line-height: 1.7;
} .mk-feat-box {
padding: 2rem 0;
border-top: 1px dashed #DDD6CE;
}
.mk-feat-lbl {
font-family: 'Zen Maru Gothic', sans-serif;
font-size: .875rem;
font-weight: 600;
letter-spacing: .1em;
color: #E8956A;
display: block;
}
.mk-feat {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
border-radius: 16px;
}
.mf-card {
display: flex;
border-radius: 16px;
overflow: hidden;
background: var(--bg);
border: 1px dashed #D8D0C7; transition: transform .3s, border-color .3s, box-shadow .3s;
}
.mf-card:hover {
transform: translateY(-3px);
}
.mf-thumb {
width: 42%;
min-height: 160px;
background: var(--thumb);
display: flex;
align-items: center;
justify-content: center;
font-size: .55rem;
color: var(--text-l);
letter-spacing: .1em;
flex-shrink: 0;
position: relative;
overflow: hidden;
}
.mf-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.mf-thumb::after {
content: '';
position: absolute;
inset: 0;
background: var(--orange);
opacity: 0;
transition: opacity .3s;
} .mf-body {
display: flex;
flex-direction: column;
justify-content: center;
padding: 1.2rem 1.4rem;
}
.mf-body h3 {
font-family: 'Zen Maru Gothic', sans-serif;
font-weight: 700;
font-size: 1.25rem;
line-height: 1.5;
letter-spacing: .03em;
margin-bottom: .35rem;
}
.mf-body p {
font-size: .875rem;
color: #6D6058;
line-height: 1.7;
} .mk-also {
}
.mk-also-lbl {
font-family: var(--round);
font-size: .875rem;
font-weight: 400;
color: var(--text-l);
margin-bottom: .6rem;
display: block;
}
.also-grid {
display: flex;
gap: 10px;
}
.also-item {
display: flex;
align-items: center;
gap: .5rem;
padding: .6rem 1rem;
background: var(--bg);
border: 1px dashed var(--line);
border-radius: 100px;
font-family: var(--round);
font-size: .875rem;
font-weight: 400;
color: var(--text-s); transition: all .3s;
} .also-item .dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--text-l);
flex-shrink: 0;
transition: background .3s;
}
.also-item:hover .dot {
background: var(--orange);
} .sec-faq {
padding: clamp(60px, 8vw, 90px) 0;
background: #FFFBF2;
position: relative;
}
.faq-chara {
position: absolute;
top: -3.3rem;
right: calc((100% - min(92%, 1020px)) / 2);
width: 100px;
height: 100px;
z-index: 2;
object-fit: contain;
}
.faq-list {
margin-top: .2rem;
}
.faq {
border-bottom: 1px dashed var(--line);
}
.faq:first-child {
border-top: 1px dashed var(--line);
}
.faq-q {
display: flex;
align-items: center;
gap: .7rem;
padding: 1.1rem .5rem;
width: 100%;
font-family: var(--round);
font-size: 1rem;
font-weight: 500;
color: var(--text);
text-align: left;
line-height: 1.6;
transition: color .3s;
}
.faq-q:hover {
color: var(--orange);
}
.faq-q .q-mark {
font-family: var(--round);
font-weight: 700;
font-size: 1.05rem;
color: var(--orange);
flex-shrink: 0;
}
.faq-q .toggle {
margin-left: auto;
font-size: 1.1rem;
color: var(--text-l);
flex-shrink: 0;
transition: transform .3s;
}
.faq.is-open .faq-q .toggle {
transform: rotate(45deg);
}
.faq-a {
max-height: 0;
overflow: hidden;
transition: max-height .4s ease, padding .4s ease;
}
.faq.is-open .faq-a {
max-height: 500px;
padding-bottom: 1rem;
}
.faq-a p,
.faq-a div {
padding: 0 .5rem 0 2rem;
font-size: .875rem;
font-weight: 400;
line-height: 1.9;
} .sec-info {
padding: clamp(60px, 8vw, 90px) 0;
}
.info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(20px, 3vw, 40px);
}
.info-col h3 {
font-family: var(--round);
font-weight: 500;
font-size: 1.15rem;
letter-spacing: .03em;
margin-bottom: .8rem;
display: flex;
align-items: center;
gap: .4rem;
}
.info-col h3 .sh-en {
margin: 0;
font-size: .7rem;
}
.info-item {
display: flex;
gap: .6rem;
align-items: baseline;
padding: .6rem 0;
border-bottom: 1px dashed var(--line);
}
.info-item:first-of-type {
border-top: 1px dashed var(--line);
}
.info-date {
font-size: .875rem;
font-weight: 400;
color: var(--text-l);
flex-shrink: 0;
min-width: 5.5em;
}
.info-ttl {
font-family: var(--round);
font-size: 1rem;
font-weight: 400;
color: var(--text);
transition: color .3s;
line-height: 1.5;
}
.info-item:hover .info-ttl {
color: var(--orange);
}
.info-more {
margin-top: .8rem;
}
.info-more a {
font-family: var(--round);
font-size: .875rem;
color: var(--text-l);
transition: color .3s;
}
.info-more a:hover {
color: var(--orange);
} .sec-cta {
padding: clamp(80px, 10vw, 120px) 0;
background: url() center/cover no-repeat;
position: relative;
}
.sec-cta--bg {
background-image: url(//bighug.co.jp/wp-content/themes/BigHug/assets/img/cta-bg.jpg);
}
.sec-cta::before {
content: '';
position: absolute;
inset: 0;
background: rgba(245, 240, 234, .85);
}
.sec-cta > .w {
position: relative;
z-index: 2;
}
.cta-box {
text-align: center;
}
.cta-box h2 {
font-size: 1.6rem;
font-family: 'Zen Maru Gothic', sans-serif;
font-weight: 500;
letter-spacing: .04em;
margin-bottom: .5rem;
}
.cta-box > p {
font-size: 1rem;
font-weight: 500;
line-height: 2;
margin-bottom: 2rem;
}
.cta-methods {
display: grid;
grid-template-columns: 1fr 1fr;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
}
.cm {
display: flex;
flex-direction: column;
align-items: center;
gap: .3rem;
padding: 2rem 1.8rem;
background: #fff;
border-radius: 16px;
transition: transform .3s;
cursor: pointer;
}
.cm:hover {
transform: translateY(-2px);
}
.cm-icon {
display: flex;
align-items: center;
justify-content: center;
}
.cm-icon img {
width: 10%;
}
.cm-lbl {
font-family: 'Zen Maru Gothic', sans-serif;
font-weight: 500;
font-size: 1.2rem;
line-height: 0;
margin-left: .5rem;
}
.cm-val {
font-size: 2.5rem;
font-weight: 700;
color: #E07530;
line-height: 1.5;
}
.cm-btn {
font-weight: 500;
color: #fff;
background: linear-gradient(135deg, #E07530, #F0C044);
margin-top: .5rem;
min-width: 320px;
padding: .5rem 2rem;
border-radius: 100px;
letter-spacing: .04em;
transition: opacity .2s;
display: inline-block;
}
.cm-sub {
font-size: .875rem;
line-height: 0;
} .sec-cta--noimg {
background: var(--bg-sec);
}
.sec-cta--noimg::before {
background: none;
}
.sec-cta--noimg .cta-box h2 {
color: var(--text);
}
.sec-cta--noimg .cta-box > p {
color: var(--text-s);
} .sec-msg {
padding: 5rem 0;
}
.sec-msg-inner {
padding: 2rem 3rem;
position: relative;
} .sec-msg-inner::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 45px;
height: 45px;
background: url(//bighug.co.jp/wp-content/themes/BigHug/assets/img/tombo-tl.svg) no-repeat center / contain;
}
.sec-msg-inner::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 45px;
height: 45px;
background: url(//bighug.co.jp/wp-content/themes/BigHug/assets/img/tombo-br.svg) no-repeat center / contain;
}
.msg-inner {
display: flex;
gap: clamp(2rem, 4vw, 3.5rem);
align-items: center;
position: relative;
padding: 2rem 1rem;
}
.msg-photo-wrap {
flex-shrink: 0;
width: clamp(160px, 20vw, 220px);
position: relative;
}
.msg-photo {
border-radius: 16px;
overflow: hidden;
}
.msg-photo img {
width: 100%;
}
.msg-txt p {
}
.msg-name {
text-align: right;
font-family: 'Zen Maru Gothic', sans-serif;
font-size: .875rem;
margin-right: 2rem;
}
.msg-name span {
font-size: 1.1rem;
font-weight: 700;
margin-left: .3rem;
} .sec-corp {
padding: 5rem 0 8rem;
}
.corp-tbl {
margin-top: .2rem;
}
.corp-row {
display: flex;
gap: 1rem;
padding: .7rem 0;
border-bottom: 1px dashed #DDD6CE;
font-size: 1rem;
}
.corp-row:first-child {
border-top: 1px dashed #DDD6CE;
}
.corp-row dt {
font-family: 'Zen Maru Gothic', sans-serif;
min-width: 7em;
flex-shrink: 0;
color: #6D6058;
font-size: .875rem;
}
.corp-row dd {
line-height: 1.7;
} .bread {
background: var(--bg-sec);
padding: 0 var(--px);
}
.bread ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .3rem;
max-width: var(--mx);
margin: 0 auto;
padding: 0;
list-style: none;
}
.bread li {
font-size: .75rem;
color: var(--text-l);
font-family: var(--round);
}
.bread li + li::before {
content: "›";
margin-right: .3rem;
color: var(--line);
}
.bread a {
color: var(--text-l);
transition: color .3s;
}
.bread a:hover {
color: var(--orange);
}
.bread span {
color: var(--text-s);
} .page-hd {
padding: 100px var(--px) 40px;
background: var(--bg-sec);
text-align: center;
}
.page-hd h1 {
font-family: var(--round);
font-weight: 700;
font-size: clamp(1.4rem, 2vw, 1.8rem);
letter-spacing: .04em;
}
.page-hd .sh-en {
margin-top: .3rem;
}
.page-body {
padding: clamp(50px, 7vw, 80px) 0;
}
.page-body .w {
max-width: 800px;
}
.page-body p {
margin-bottom: 1.2rem;
line-height: 2.1;
color: var(--text-s);
}
.page-body h2 {
font-family: var(--round);
font-weight: 700;
font-size: 1.15rem;
margin: 2rem 0 .8rem;
padding-bottom: .4rem;
border-bottom: 1px dashed var(--line);
} .arc-list {
padding: clamp(50px, 7vw, 80px) 0;
}
.arc-item {
display: flex;
gap: .8rem;
align-items: baseline;
padding: .8rem 0;
border-bottom: 1px dashed var(--line);
}
.arc-item:first-child {
border-top: 1px dashed var(--line);
}
.arc-date {
font-size: .875rem;
color: var(--text-l);
flex-shrink: 0;
min-width: 6em;
}
.arc-cat {
font-family: var(--round);
font-size: .75rem;
font-weight: 500;
color: var(--orange);
background: var(--beige-l);
padding: .15rem .6rem;
border-radius: 4px;
flex-shrink: 0;
}
.arc-ttl {
font-family: var(--round);
font-size: 1rem;
color: var(--text);
transition: color .3s;
line-height: 1.5;
}
.arc-item:hover .arc-ttl {
color: var(--orange);
} .pager {
display: flex;
justify-content: center;
gap: .5rem;
margin-top: 2rem;
}
.pager a,
.pager span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 8px;
font-size: .875rem;
font-family: var(--round);
transition: all .3s;
}
.pager a {
color: var(--text-s);
border: 1px solid var(--line);
}
.pager a:hover {
background: var(--beige-l);
border-color: var(--orange-l);
color: var(--orange);
}
.pager .current {
background: var(--orange);
color: #fff;
border: 1px solid var(--orange);
} .single-hd {
padding: 100px var(--px) 30px;
background: var(--bg-sec);
}
.single-hd .w {
max-width: 800px;
}
.single-meta {
display: flex;
align-items: center;
gap: .8rem;
margin-bottom: .5rem;
}
.single-date {
font-size: .875rem;
color: var(--text-l);
}
.single-hd h1 {
font-family: var(--round);
font-weight: 700;
font-size: clamp(1.2rem, 1.8vw, 1.5rem);
line-height: 1.7;
}
.single-body {
padding: clamp(40px, 5vw, 60px) 0;
}
.single-body .w {
max-width: 800px;
}
.single-body p {
margin-bottom: 1.2rem;
line-height: 2.1;
color: var(--text-s);
}
.single-body h2 {
font-family: var(--round);
font-weight: 700;
font-size: 1.15rem;
margin: 2.5rem 0 .8rem;
padding-bottom: .4rem;
border-bottom: 1px dashed var(--line);
color: var(--text);
}
.single-body h3 {
font-family: var(--round);
font-weight: 700;
font-size: 1.05rem;
margin: 2rem 0 .6rem;
color: var(--text);
}
.single-body img {
border-radius: 12px;
margin: 1rem 0;
}
.single-body ul,
.single-body ol {
margin: 1rem 0 1rem 1.5rem;
color: var(--text-s);
}
.single-body li {
margin-bottom: .3rem;
line-height: 1.9;
}
.single-nav {
display: flex;
justify-content: space-between;
padding-top: 2rem;
border-top: 1px dashed var(--line);
margin-top: 2rem;
}
.single-nav a {
font-family: var(--round);
font-size: .875rem;
color: var(--text-l);
transition: color .3s;
}
.single-nav a:hover {
color: var(--orange);
} .form-wrap {
max-width: 640px;
margin: 0 auto;
}
.form-lead {
text-align: center;
margin-bottom: 2.5rem;
color: var(--text-s);
font-size: .95rem;
line-height: 2;
} .steps {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 2.5rem;
}
.step {
display: flex;
align-items: center;
gap: .5rem;
font-family: var(--round);
font-size: .8rem;
font-weight: 500;
color: var(--text-l);
}
.step-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
border: 1.5px solid var(--line);
font-size: .75rem;
font-weight: 700;
color: var(--text-l);
}
.step.is-active .step-num {
background: var(--orange);
color: #fff;
border-color: var(--orange);
}
.step.is-active {
color: var(--text);
}
.step.is-done .step-num {
background: var(--beige);
color: var(--text-s);
border-color: var(--beige);
}
.step-line {
width: 40px;
height: 1px;
background: var(--line);
margin: 0 .6rem;
} .form-group {
margin-bottom: 1.8rem;
}
.form-group label {
display: block;
font-family: var(--round);
font-size: .875rem;
font-weight: 500;
color: var(--text);
margin-bottom: .5rem;
}
.form-group .req {
font-size: .65rem;
color: #fff;
background: var(--orange);
padding: .15rem .5rem;
border-radius: 3px;
margin-left: .5rem;
vertical-align: middle;
}
.form-group .opt {
font-size: .65rem;
color: var(--text-l);
background: var(--beige-l);
padding: .15rem .5rem;
border-radius: 3px;
margin-left: .5rem;
vertical-align: middle;
border: 1px solid var(--line);
} .form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea,
.form-group select,
.wpcf7-form-control:not([type="submit"]):not([type="checkbox"]) {
width: 100%;
padding: .75rem 1rem;
border: 1.5px solid var(--line);
border-radius: 10px;
font-size: 1rem;
font-family: var(--sans);
background: var(--bg);
transition: border-color .3s, box-shadow .3s;
appearance: none;
-webkit-appearance: none;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus,
.wpcf7-form-control:focus {
outline: none;
border-color: var(--orange-l);
box-shadow: 0 0 0 3px rgba(224,117,48,.08);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: var(--text-l);
font-weight: 300;
}
.form-group textarea {
min-height: 180px;
resize: vertical;
line-height: 1.8;
}
.form-group select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239E9490' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
padding-right: 2.5rem;
} .form-check,
.wpcf7-acceptance {
display: flex;
align-items: flex-start;
gap: .6rem;
margin: 2rem 0;
padding: 1.2rem 1.4rem;
background: var(--beige-l);
border-radius: 10px;
border: 1px solid var(--line);
}
.form-check input[type="checkbox"],
.wpcf7-acceptance input[type="checkbox"] {
width: 18px;
height: 18px;
margin-top: 2px;
flex-shrink: 0;
accent-color: var(--orange);
cursor: pointer;
}
.form-check label,
.wpcf7-acceptance .wpcf7-list-item-label {
font-size: .875rem;
font-weight: 400;
color: var(--text-s);
line-height: 1.7;
cursor: pointer;
margin-bottom: 0;
}
.form-check a,
.wpcf7-acceptance a {
color: var(--orange);
border-bottom: 1px solid var(--orange-l);
}
.form-check a:hover,
.wpcf7-acceptance a:hover {
opacity: .7;
} .form-submit {
text-align: center;
margin-top: 2.5rem;
}
.form-submit button,
.form-submit input[type="submit"],
.wpcf7-submit {
font-family: var(--round);
font-size: 1rem;
font-weight: 700;
color: #fff;
background: var(--grad);
border: none;
padding: 1rem 4rem;
border-radius: 10px;
cursor: pointer;
transition: opacity .2s, transform .2s;
letter-spacing: .06em;
box-shadow: 0 4px 16px rgba(224,117,48,.2);
}
.form-submit button:hover,
.form-submit input[type="submit"]:hover,
.wpcf7-submit:hover {
opacity: .88;
transform: translateY(-1px);
} .wpcf7-not-valid-tip {
font-size: .8rem;
color: #d44;
margin-top: .3rem;
display: block;
}
.wpcf7-response-output {
font-size: .875rem;
text-align: center;
padding: .8rem 1rem;
border-radius: 8px;
margin-top: 1.5rem;
} .confirm-tbl {
width: 100%;
margin-bottom: 2rem;
border-collapse: collapse;
}
.confirm-tbl tr {
border-bottom: 1px dashed var(--line);
}
.confirm-tbl tr:first-child {
border-top: 1px dashed var(--line);
}
.confirm-tbl th {
text-align: left;
font-family: var(--round);
font-size: .875rem;
font-weight: 500;
color: var(--text-s);
padding: .9rem 0;
width: 30%;
vertical-align: top;
}
.confirm-tbl td {
padding: .9rem 0 .9rem 1.5rem;
font-size: 1rem;
color: var(--text);
line-height: 1.8;
}
.confirm-btns {
display: flex;
justify-content: center;
gap: 1rem;
margin-top: 2.5rem;
}
.confirm-btns .btn-back {
font-family: var(--round);
font-size: .875rem;
font-weight: 500;
color: var(--text-s);
background: var(--bg);
border: 1.5px solid var(--line);
padding: .85rem 2.5rem;
border-radius: 10px;
cursor: pointer;
transition: all .3s;
}
.confirm-btns .btn-back:hover {
border-color: var(--orange-l);
color: var(--orange);
}
.confirm-btns .btn-send {
font-family: var(--round);
font-size: 1rem;
font-weight: 700;
color: #fff;
background: var(--grad);
border: none;
padding: .85rem 3.5rem;
border-radius: 10px;
cursor: pointer;
transition: opacity .2s;
letter-spacing: .06em;
box-shadow: 0 4px 16px rgba(224,117,48,.2);
}
.confirm-btns .btn-send:hover {
opacity: .88;
} .thanks-box {
text-align: center;
padding: 3rem 0;
}
.thanks-box h2 {
font-family: var(--round);
font-weight: 700;
font-size: 1.3rem;
margin-bottom: 1rem;
}
.thanks-box p {
color: var(--text-s);
line-height: 2;
margin-bottom: 1.5rem;
}
.thanks-box a {
display: inline-block;
font-family: var(--round);
font-size: .875rem;
color: var(--orange);
border-bottom: 1px solid var(--orange-l);
padding-bottom: .1rem;
transition: opacity .3s;
}
.thanks-box a:hover {
opacity: .7;
} .faq-arc .faq {
background: var(--bg);
border-radius: 12px;
margin-bottom: .8rem;
padding: 0 1rem;
border: 1.5px solid var(--line);
}
.faq-arc .faq:first-child {
border-top: 1.5px solid var(--line);
}
.faq-arc .faq-q {
padding: 1rem .5rem;
} .pp-date {
text-align: right;
font-size: .8rem;
color: var(--text-l);
margin-bottom: 2rem;
}
.pp-lead {
margin-bottom: 2.5rem;
color: var(--text-s);
line-height: 2.1;
font-size: .95rem;
}
.pp-section {
margin-bottom: 2.5rem;
}
.pp-section h2 {
font-family: var(--round);
font-weight: 700;
font-size: 1.05rem;
color: var(--text);
padding-bottom: .5rem;
margin-bottom: 1rem;
border-bottom: 1px dashed var(--line);
}
.pp-section p {
margin-bottom: .8rem;
line-height: 2.1;
color: var(--text-s);
font-size: .95rem;
}
.pp-section ol {
margin: .5rem 0 .8rem 1.5rem;
color: var(--text-s);
font-size: .95rem;
line-height: 2.1;
}
.pp-section ol li {
margin-bottom: .3rem;
}
.pp-section ul {
margin: .5rem 0 .8rem 1.5rem;
color: var(--text-s);
font-size: .95rem;
line-height: 2.1;
list-style: disc;
}
.pp-section ul li {
margin-bottom: .3rem;
}
.pp-contact {
margin-top: 3rem;
padding: 1.5rem 2rem;
background: var(--beige-l);
border-radius: 12px;
border: 1px solid var(--line);
}
.pp-contact h2 {
font-family: var(--round);
font-weight: 700;
font-size: 1rem;
color: var(--text);
margin-bottom: .8rem;
border: none;
padding: 0;
}
.pp-contact p {
color: var(--text-s);
font-size: .9rem;
line-height: 2;
margin-bottom: 0;
} @media (max-width: 820px) {
body {
font-size: .875rem;
}
.mk-grid {
grid-template-columns: repeat(2, 1fr);
gap: .8rem;
}
.mk-body p {
font-size: .75rem;
}
.sec-msg {
padding: 5rem 0 0;
}
.sec-msg-inner::before,
.sec-msg-inner::after {
width: 90px;
}
.msg-inner {
padding: 1rem;
}
.faq-chara {
width: 65px;
height: 65px;
}
.cta-methods {
gap: 1rem;
}
.cta-box > p {
font-size: .875rem;
}
.cm-btn {
min-width: inherit;
}
.cm-val {
font-size: 2rem;
}
.sh h2 {
font-size: 1.25rem;
letter-spacing: 0;
}
.corp-row {
font-size: .875rem;
}
ft-brand img {
width: 70%;
}
.ft-brand p {
font-size: .75rem;
}
}
@media (max-width: 768px) { }
@media (max-width: 480px) {
.fv {padding: 8rem 2rem 5rem;}
.fv h2 {font-size: 1.25rem;}
.fv .sub {font-size: .875rem;}
.sec-make {padding: 3rem 0;}
.mk-grid {
display: block;
}
.mk-feat {
grid-template-columns: 1fr;
gap: 8px;
}
.mk-thumb {
aspect-ratio: 16 / 9;
}
.mk-body {padding: .8rem .9rem 0;}
.mk-body h3 {font-size: 1rem;}
.mk-card {margin-bottom: .8rem;}
.mf-card {
flex-direction: column;
margin-bottom: .5rem;
}
.mf-thumb {
width: 100%;
min-height: 120px;
}
.mf-body {
text-align: center;
padding: 1rem 1.5rem 0px;
}
.mf-body p {font-size: .75rem;}
.faq-chara {
height: 75px;
}
.info-grid {display: block;}
.info-col {margin-bottom: 3rem;}
.sec-cta {padding: 3rem 0;}
.cta-box h2 {
font-size: 1.25rem;
letter-spacing: 0;
}
.cta-box > p {
font-size: .75rem;
}
.cta-methods {display: block;}
.cm-btn {
min-width: 280px;
}
.cm-lbl {font-size: 1rem;}
.cm {margin-bottom: 1rem;}
.sec-msg {padding: 3rem 0;}
.msg-inner {
display: block;
padding: 1rem 0;
}
.sec-msg-inner {padding: 2rem;}
.sec-msg-inner::before,
.sec-msg-inner::after {
width: 60px;
height: 35px;
}
.msg-photo-wrap {
width: 75%;
margin: 0 auto;
}
.msg-txt .sh {text-align: center;}
.msg-name {margin-right: 1.5rem;}
.sec-corp {padding: 0 0 8rem;}
.confirm-tbl th,
.confirm-tbl td {
display: block;
width: 100%;
padding: .5rem 0;
}
.confirm-tbl td {
padding-left: 0;
}
}