@charset "UTF-8";

.keyvisual__count {
position: absolute;
top: 53px;
left: 110px;
width: calc(100% - 110px);
display: grid;
grid-template-columns: 75% 25%;
justify-content: space-between;
}
.keyvisual__count--text {
font-size: 20px;
font-weight: 700;
letter-spacing: -0.04em;
text-align: left;
line-height: 1.3;
color: #fff;
}
.keyvisual__count--text .number {
font-family: "Noto Serif JP", serif;
font-size: 27px;
}
.keyvisual__count--text .small {
font-size: 15px;
}
.keyvisual__date {
align-self: center;
padding-right: 10px;
margin-top: 3px;
font-family: "Noto Serif JP", serif;
font-weight: 400;
font-size: 10px;
line-height: 1.2;
text-align: right;
color: #fff;
width: 6em;
}
.tvcm {
padding: 20px 10px;
background: #e4e6ef;
}
.tvcm__title {
width: 230px;
margin: 0 auto 15px;
}
.tvcm__video iframe {
width: 100%;
height: 200px;
}
.worries {
padding: 30px 0 20px;
position: relative;
z-index: 1;
}
.worries::before {
display: block;
content: "";
position: absolute;
inset: 0;
background-image: url(//lp.kaitori-daikichi.jp/ad/wp-content/themes/daikichi_lp/assets/images/worries-background-shucho.jpg);
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
z-index: -1;
}
.worries__heading .heading__text {
font-size: 27px;
letter-spacing: -0.05em;
}
.worries__illust {
margin-top: 20px;
}
.worries__bubble {
padding: 16px 10px;
position: relative;
background-color: #10016a;
border-radius: 5px;
}
.worries__bubble--text {
display: block;
color: #fff;
font-family: "Noto Serif JP", serif;
font-size: 22px;
font-weight: 700;
line-height: 1.2;
text-align: center;
}
.worries__bubble--text .color__yellow {
font-size: 30px;
}
.worries__bubble::after {
width: 40px;
height: 30px;
content: "";
position: absolute;
bottom: -18px;
left: 50%;
background-color: inherit;
clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
translate: -50% 0;
z-index: -1;
}
.worries__text {
margin-top: 24px;
padding: 0 8px;
color: #444;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
}
.worries__text .color__red {
font-weight: 500;
}
.worries .features {
margin-top: 20px;
padding: 0 15px;
}
.worries__button {
border-top: 1px solid #a6a6a6;
margin-inline: auto;
margin-top: 20px;
padding-top: 15px;
width: calc(100% - 30px);
}
.worries__button img {
margin-left: -7px;
max-width: 200%;
width: 345px;
}
.features {
line-height: 1.5;
}
.features__definition--child {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 5px;
}
.features__term {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 10px;
font-family: "Noto Serif JP", serif;
font-size: 20px;
font-weight: 600;
}
.features__term::before, .features__term::after {
display: block;
width: 100%;
height: 1px;
content: "";
background: #a6a6a6;
}
.features__term--child {
padding: 3px 8px;
background: #fff;
color: #10016a;
font-size: 15px;
font-weight: 400;
text-align: center;
}
.features__description {
margin-top: 10px;
}
.features__description--child {
display: grid;
place-items: center;
padding: 0 3px;
background-color: #10016a;
color: #fff;
font-size: 15px;
text-align: center;
}
.features__description--child .font__L {
font-size: 30px;
font-weight: 700;
}
.features__description--child .font__S {
font-size: 10px;
}
.features__description--child .number {
letter-spacing: -0.03em;
}
.features__content {
display: grid;
grid-template-rows: subgrid;
grid-row: span 2;
gap: 0;
overflow: hidden;
border: 1px solid #ccc;
border-radius: 10px;
}
.features__tag {
display: grid;
gap: 5px;
grid-template-columns: repeat(3, 1fr);
margin-top: 5px;
}
.features__tag--item {
display: flex;
justify-content: center;
align-items: center;
padding: 3px;
background: #fff;
border: 1px solid #000;
border-radius: 100vmax;
color: #000;
font-size: 15px;
font-weight: 700;
line-height: 1.1;
text-align: center;
}
.features__tag--item .font__S {
font-size: 12px;
}
.items {
padding: 35px 0 30px;
position: relative;
}
.items::before {
display: block;
position: absolute;
inset: 0;
content: "";
background-image: url(//lp.kaitori-daikichi.jp/ad/wp-content/themes/daikichi_lp/assets/images/items-background.jpg);
background-position: right top;
background-repeat: no-repeat;
background-size: cover;
z-index: -1;
}
.items__heading .heading__bubble {
background-color: #10016a;
}
.items__heading .heading__text {
line-height: 1.1;
}
.items__heading .heading__text small {
font-size: 25px;
}
.items__list {
margin-top: 20px;
display: grid;
gap: 10px;
grid-template-columns: repeat(2, 1fr);
}
.items__list li {
padding: 5px 5px 10px;
display: grid;
grid-template-rows: subgrid;
grid-row: span 2;
gap: 0;
background-color: #fff;
border: 1px solid #ccc;
line-height: 1.5;
}
.items__list li figcaption {
margin-top: 6px;
}
.items__list li figcaption h3 {
font-size: 15px;
text-align: center;
}
.items__list li p {
margin-top: 5px;
padding: 5px 2px 0;
margin-inline: auto;
font-size: 11px;
font-weight: 400;
letter-spacing: -0.05em;
text-align: center;
color: #444;
border-top: 1px solid #ccc;
}
.items__list li p span {
color: #ccc;
}
.items__textlist {
margin-top: 10px;
padding: 18px 10px 24px;
display: grid;
grid-template-columns: repeat(3, auto);
gap: 5px;
background-color: #fff;
border: 1px solid #ccc;
line-height: 1.5;
}
.items__textlist li {
padding-left: 0.8em;
text-indent: -1em;
font-size: 14px;
font-weight: 400;
}
.items__textlist li::before {
margin-right: 3px;
content: "・";
}
.items__textlist li small {
display: inline-block;
font-size: 11px;
line-height: 1.2;
text-indent: 0.1em;
color: #444;
}
.items__bottom {
margin-top: 15px;
color: #444;
font-size: 14px;
font-weight: 400;
text-align: center;
line-height: 1.5;
}
.recommendation {
background-color: #e8e9f2;
padding: 35px 0 25px;
position: relative;
}
.recommendation::before {
display: block;
width: 184px;
height: auto;
content: "";
position: absolute;
right: 1px;
bottom: -1px;
aspect-ratio: 368/412;
background-image: url(//lp.kaitori-daikichi.jp/ad/wp-content/themes/daikichi_lp/assets/images/recommendation-shucho.png);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: contain;
z-index: 1;
}
.recommendation__heading .heading__text div {
font-size: 25px;
line-height: 1.3;
letter-spacing: 0;
}
.recommendation__heading .heading__text div:first-child small {
font-size: 20px;
}
.recommendation__heading .heading__text div:last-child {
font-size: 28px;
}
.recommendation__heading .heading__text div:last-child small {
font-size: 22px;
}
.recommendation__list {
margin-top: 12px;
padding: 20px 15px;
background-color: #fff;
border-radius: 15px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15);
}
.recommendation__list li {
font-size: 15px;
font-weight: 500;
line-height: 1.5;
}
.recommendation__list li:before {
margin-right: 5px;
content: "・";
}
.recommendation__list li:nth-of-type(n + 2) {
margin-top: 5px;
}
.recommendation__bottom {
margin-top: 20px;
padding-left: 5px;
font-family: "Noto Serif JP", serif;
font-size: 16px;
font-weight: 700;
line-height: 1.3;
}
.assessment {
padding-top: 0;
}
.assessment > figure > img {
margin-left: 10px;
}
.flow {
padding: 35px 0;
position: relative;
z-index: 1;
}
.flow::before {
content: "";
position: absolute;
inset: 0;
background-color: #f8f8f8;
z-index: -1;
}
.flow__heading .heading__bubble {
padding: 4px 16px;
background-color: #aa0d33;
}
.flow__heading .heading__bubble .color__yellow {
font-family: "Heebo", sans-serif;
font-size: 20px;
}
.flow__list {
margin-top: 25px;
}
.flow__list li {
padding-left: 45px;
padding-right: 12px;
position: relative;
z-index: 1;
}
.flow__list li:not(:last-of-type) {
padding-bottom: 35px;
}
.flow__list li:not(:last-of-type)::before {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 22.5px;
content: "";
border-left: 2px dotted;
border-color: #10016a;
translate: -50% 0;
z-index: -1;
}
.flow__list li figure img {
height: 100%;
aspect-ratio: 298/160;
object-fit: cover;
}
.flow__list li h3 {
font-size: 20px;
margin-top: 8px;
font-weight: 500;
line-height: 1.5;
}
.flow__step {
width: 55px;
height: auto;
padding-top: 4px;
display: grid;
place-content: center;
place-items: center;
position: absolute;
top: -15px;
left: -5px;
aspect-ratio: 1;
background-color: #10016a;
color: #fff;
border-radius: 50%;
font-family: "Heebo", sans-serif;
font-size: 10px;
line-height: 1;
text-transform: uppercase;
z-index: 5;
}
.flow__step .number {
font-size: 22px;
font-weight: 600;
}
.flow__text {
margin-top: 6px;
color: #444;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
}
.flow__text--small {
margin-top: 12px;
color: #444;
font-size: 11px;
font-weight: 400;
line-height: 1.5;
}
.flow__prevention {
margin-top: 30px;
}
.flow__prevention--wrap {
margin-top: 20px;
padding: 20px 25px;
background-color: #fff;
}
.flow__prevention--title {
font-family: "Noto Serif JP", serif;
font-size: 18px;
text-align: center;
}
.flow__prevention--list {
margin-top: 12px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.flow__prevention--list li figure img {
width: 60px;
aspect-ratio: 1;
object-fit: contain;
}
.flow__prevention--text {
margin-top: 10px;
font-size: 12px;
font-weight: 400;
text-align: center;
line-height: 1.5;
}
.area {
padding: 35px 0 30px;
position: relative;
z-index: 1;
line-height: 1.5;
}
.area::before {
display: block;
content: "";
position: absolute;
inset: 0;
background-color: #e8e9f2;
z-index: -5;
}
.area::after {
display: block;
content: "";
position: absolute;
top: 10px;
right: 0;
left: 0;
aspect-ratio: 750/858;
background-image: url(//lp.kaitori-daikichi.jp/ad/wp-content/themes/daikichi_lp/assets/images/area-background-shucho.png);
background-position: center top;
background-repeat: no-repeat;
background-size: 100% auto;
z-index: -1;
}
.area__intro {
margin-top: 15px;
font-size: 14px;
text-align: center;
text-shadow: 2px 2px 2px #e8e9f2, -2px -2px 2px #e8e9f2, -2px 2px 2px #e8e9f2, 2px -2px 2px #e8e9f2, 2px 0 2px #e8e9f2, -2px 0 2px #e8e9f2, 0 2px 2px #e8e9f2, 0 -2px 2px #e8e9f2;
}
.area__intro .color__red {
font-weight: 500;
}
.area__accordion {
margin-top: 25px;
border-bottom: 1px solid #ccc;
}
.area__accordion li summary {
position: relative;
padding: 15px 55px 15px 15px;
border-top: 1px solid #ccc;
}
.area__accordion li summary::after {
width: 25px;
height: auto;
display: grid;
place-items: center;
position: absolute;
top: 50%;
right: 10px;
content: "＋";
aspect-ratio: 1;
background-color: #10016a;
color: #fff;
border-radius: 50%;
translate: 0 -50%;
z-index: 1;
}
.area__accordion li summary:where(details[open] *)::after {
content: "－";
}
.area__accordion li summary h3 {
font-size: 16px;
text-shadow: 2px 2px 2px #e8e9f2, -2px -2px 2px #e8e9f2, -2px 2px 2px #e8e9f2, 2px -2px 2px #e8e9f2, 2px 0 2px #e8e9f2, -2px 0 2px #e8e9f2, 0 2px 2px #e8e9f2, 0 -2px 2px #e8e9f2;
}
.area__list {
display: flex;
flex-wrap: wrap;
gap: 0 12px;
}
.area__list li {
color: #444;
font-size: 14px;
font-weight: 400;
text-shadow: 2px 2px 2px #e8e9f2, -2px -2px 2px #e8e9f2, -2px 2px 2px #e8e9f2, 2px -2px 2px #e8e9f2, 2px 0 2px #e8e9f2, -2px 0 2px #e8e9f2, 0 2px 2px #e8e9f2, 0 -2px 2px #e8e9f2;
}
.area__body {
padding: 0 15px 40px;
}
.area__body--list li:nth-of-type(n + 2) {
margin-top: 20px;
}
.area__body--list li dl dt {
padding: 4px 10px;
background: #fff;
color: #10016a;
font-size: 14px;
}
.area__body--list li dl dd {
margin-top: 10px;
color: #444;
font-size: 13px;
font-weight: 400;
text-shadow: 2px 2px 2px #e8e9f2, -2px -2px 2px #e8e9f2, -2px 2px 2px #e8e9f2, 2px -2px 2px #e8e9f2, 2px 0 2px #e8e9f2, -2px 0 2px #e8e9f2, 0 2px 2px #e8e9f2, 0 -2px 2px #e8e9f2;
}
.area__bottom {
margin-top: 10px;
color: #444;
font-size: 11px;
font-weight: 400;
text-align: center;
}
::marker {
content: none;
}
.welcome {
background-color: #10016a;
padding: 35px 0;
}
.welcome__heading .heading__text {
color: #fff;
letter-spacing: normal;
line-height: 1.5;
}
.welcome__heading .heading__text small {
display: block;
font-size: 20px;
}
.welcome__content {
margin-top: 40px;
padding: 25px 12px 15px;
background: #f8f8f8;
border-radius: 5px;
position: relative;
line-height: 1.5;
}
.welcome__strong {
width: min(305px, 100%);
padding: 4px 10px;
display: grid;
place-items: center;
position: absolute;
top: 0;
left: 50%;
background-color: #faff00;
border-radius: 100vmax;
transform: translate(-50%, -50%);
z-index: 1;
}
.welcome__strong > * {
font-size: 15px;
font-weight: 700;
color: #e60012;
}
.welcome__images {
display: grid;
gap: 3px;
grid-template-columns: repeat(3, 1fr);
}
.welcome__images li img {
height: 100%;
aspect-ratio: 108/80;
object-fit: cover;
}
.welcome__list {
margin-top: 15px;
margin-right: -5px;
display: grid;
grid-template-columns: auto auto;
gap: 2px 6px;
}
.welcome__list li {
padding-left: 8px;
font-size: 14px;
font-weight: 700;
text-indent: -0.94em;
text-shadow: 3px 3px 3px #fff, -3px -3px 3px #fff, -3px 3px 3px #fff, 3px -3px 3px #fff, 3px 0 3px #fff, -3px 0 3px #fff, 0 3px 3px #fff, 0 -3px 3px #fff;
}
.welcome__list li::before {
content: "・";
}
.welcome__text {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid;
border-color: #10016a;
color: #10016a;
font-size: 13px;
font-weight: 400;
text-align: center;
}
.welcome__button {
margin-top: 5px;
}
.welcome__button--text {
width: fit-content;
margin-top: 20px;
margin-inline: auto;
position: relative;
color: #fff;
font-size: 14px;
text-align: center;
line-height: 1.5;
}
.welcome__button--text .color__yellow {
display: block;
font-size: 18px;
}
.welcome__button--text::before, .welcome__button--text::after {
display: block;
content: "";
width: 35px;
height: 1px;
position: absolute;
bottom: 3px;
background-color: #fff;
}
.welcome__button--text::before {
left: -12px;
rotate: -120deg;
transform-origin: left center;
}
.welcome__button--text::after {
right: -10px;
rotate: 120deg;
transform-origin: right center;
}
.search__heading .heading__bubble {
background-color: #10016a;
}
.promise__heading .heading__bubble {
background-color: #10016a;
}
.promise__heading .heading__text {
letter-spacing: normal;
}
.voice__heading .heading__bubble {
background-color: #faff00;
color: #000;
}