html {
font-family: 'Zen Kaku Gothic New', sans-serif;
color: #333;
line-height: 1;
font-weight: 700;
}
.inner {
max-width: 1190px;
width: 100%;
margin: 0 auto;
}
.sp-only {
display: none;
}
@media screen and (min-width: 768px) {
.inner {
max-width: 61.979vw;
width: 100%;
margin: 0 auto;
}
}
@media screen and (max-width: 768px) {
.inner {
max-width: 375px;
width: 100%;
padding: 0 15px;
margin: 0 auto;
}
.sp-only {
display: block;
}
.pc-only {
display: none;
}
}
@media screen and (max-width: 375px) {
.inner {
max-width: 375px;
width: 100%;
padding: 0 15px;
margin: 0 auto;
}
}
/****************************************************
fv
****************************************************/
.fv {
padding: 32px 0 44px;
background: linear-gradient(80deg, #5ab3dc 0%, #98d5f0 40%, #5ab3dc 80%);
position: relative;
}
.fv__contents {
width: 1350px;
}
h1 {
text-align: center;
}
.fv__title {
display: inline-block;
position: relative;
filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.25));
}
.fv__title img {
width: 754px;
height: auto;
object-fit: unset;
}
.fv__logo {
width: 100%;
padding: 30px 0 25px;
margin-top: 35px;
background-color: #fff;
}
.fv__logo01 img {
width: 518px;
height: auto;
object-fit: unset;
}
.fv__logo-wrap {
margin-top: 28px;
display: flex;
justify-content: center;
align-items: center;
gap: 22px;
}
.fv__logo02 img {
width: 207px;
height: auto;
object-fit: unset;
}
.fv__logo03 img {
width: 244px;
height: auto;
object-fit: unset;
}
.fv__point {
margin-top: 35px;
display: flex;
justify-content: center;
gap: 25px;
position: relative;
z-index: 10;
}
.fv__point img {
width: 279px;
height: auto;
object-fit: unset;
filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.25));
}
.fv__picture {
position: absolute;
bottom: 0;
right: 0;
}
.fv__picture img {
width: 895px;
height: auto;
object-fit: unset;
}
@media screen and (min-width: 768px) {
.fv {
padding: 1.667vw 0 2.292vw;
}
.fv__contents {
width: 70.313vw;
}
.fv__title img {
width: 39.271vw;
}
.fv__logo {
padding: 1.563vw 0 1.302vw;
margin-top: 1.823vw;
}
.fv__logo01 img {
width: 26.979vw;
}
.fv__logo-wrap {
margin-top: 1.458vw;
gap: 1.146vw;
}
.fv__logo02 img {
width: 10.781vw;
}
.fv__logo03 img {
width: 12.708vw;
}
.fv__point {
margin-top: 1.823vw;
gap: 1.302vw;
z-index: 10;
}
.fv__point img {
width: 14.531vw;
}
.fv__picture img {
width: 46.615vw;
}
}
@media screen and (max-width: 768px) {
.fv {
padding: 22px 0 50.533vw;
background: linear-gradient(80deg, #5ab3dc 0%, #98d5f0 40%, #5ab3dc 80%);
}
.fv__contents {
width: 100%;
}
h1 {
text-align: center;
}
.fv__title img {
width: 235px;
}
.fv__logo {
width: 100%;
padding: 15px 0;
margin-top: 25px;
background-color: #fff;
}
.fv__logo01 img {
width: 267px;
}
.fv__logo-wrap {
margin-top: 13px;
display: flex;
justify-content: center;
align-items: center;
gap: 22px;
}
.fv__logo02 img {
width: 107px;
}
.fv__logo03 img {
width: 127px;
}
.fv__point {
margin-top: 13px;
gap: 10px;
}
.fv__point img {
width: 105px;
}
.fv__picture {
position: absolute;
top: unset;
bottom: 0;
right: 0;
}
.fv__picture img {
width: 100%;
height: auto;
}
}
@media screen and (max-width: 375px) {
.fv__title img {
width: 62.667vw;
}
.fv__logo {
padding: 4vw 0;
margin-top: 6.667vw;
}
.fv__logo01 img {
width: 71.2vw;
height: 12.267vw;
}
.fv__logo-wrap {
margin-top: 3.467vw;
gap: 5.867vw;
}
.fv__logo02 img {
width: 28.533vw;
height: 6.933vw;
}
.fv__logo03 img {
width: 33.867vw;
height: 5.867vw;
}
.fv__point {
margin-top: 3.467vw;
gap: 2.667vw;
}
.fv__point img {
width: 28vw;
height: 31.2vw;
}
}
/****************************************************
cta
****************************************************/
.cta {
width: 100%;
padding: 20px 0 25px;
background-color: #e7f4f8;
overflow: hidden;
position: fixed;
bottom: 0;
left: 0;
z-index: 100;
}
.cta__flex {
display: flex;
justify-content: center;
gap: 35px;
}
.cta__tel {
width: 466px;
border-bottom-right-radius: 9px;
position: relative;
}
.cta__tel-wrap {
width: 466px;
padding: 19px 0 17px;
filter: drop-shadow(5px 5px 1px rgba(0, 0, 0, 0.25));
background-image: url(../images/cta/cta-tel-bg.svg);
background-repeat: no-repeat;
background-size: cover;
text-align: center;
border-radius: 14px;
border: 4px solid #fff;
}
.cta__tel-note {
position: absolute;
top: -13px;
left: 50%;
transform: translateX(-50%);
}
.cta__tel-note img {
width: 374px;
height: 36px;
}
.cta__tel-number {
padding-left: 33px;
font-size: 59px;
color: #fff;
position: relative;
display: inline-block;
}
.cta__tel-number::before {
content: "";
display: inline-block;
background-image: url(../images/cta/cta-tel.svg);
background-repeat: no-repeat;
background-size: cover;
width: 36px;
height: 40px;
position: absolute;
top: 30%;
left: -7px;
}
.cta__tel-message {
width: 191px;
padding: 4px 0 5px;
margin: 10px auto 0;
font-size: 19px;
border-radius: 4px;
letter-spacing: -0.04em;
color: #d53f45;
background-color: #fff;
}
.cta__tel-human {
position: absolute;
bottom: -25px;
left: -182px;
}
.cta__tel-human-wrap {
position: relative;
}
.cta__tel-human img {
width: 250px;
height: 161px;
}
.cta__tel-human-text {
font-size: 15px;
line-height: 1.2;
position: absolute;
top: 4px;
left: 16px;
}
.cta__tel-human-font1 {
font-size: 26px;
color: #d53f45;
}
.cta__tel-human-font2 {
font-size: 18px;
color: #d53f45;
}
.cta__tel-human-font3 {
font-size: 20px;
color: #d53f45;
}
.cta__mail {
width: 546px;
padding: 31px 0 0;
filter: drop-shadow(5px 5px 1px rgba(0, 0, 0, 0.25));
background-image: url(../images/cta/cta-mail-bg.svg);
background-repeat: no-repeat;
background-size: cover;
position: relative;
text-align: center;
border-radius: 14px;
border: 4px solid #fff;
}
.cta__mail-text {
font-size: 37px;
color: #fff;
}
.cta__mail-message-pc {
width: 74px;
padding: 4px 0 5px;
margin: 14px auto 0;
font-size: 25px;
border-radius: 4px;
letter-spacing: -0.04em;
color: #005bab;
background-color: #fff;
}
@media screen and (min-width: 768px) {
.cta {
padding: 1.042vw 0 1.302vw;
}
.cta__flex {
gap: 1.823vw;
}
.cta__tel {
width: 24.271vw;
border-bottom-right-radius: 0.469vw;
}
.cta__tel-wrap {
width: 24.271vw;
padding: 0.99vw 0 0.885vw;
filter: drop-shadow(0.26vw 0.26vw 0.052vw rgba(0, 0, 0, 0.25));
border-radius: 0.729vw;
border: 0.208vw solid #fff;
}
.cta__tel-note {
top: -0.677vw;
}
.cta__tel-note img {
width: 19.479vw;
height: 1.875vw;
}
.cta__tel-number {
padding-left: 1.719vw;
font-size: 3.073vw;
}
.cta__tel-number::before {
width: 1.875vw;
height: 2.083vw;
left: -0.365vw;
}
.cta__tel-message {
width: 9.948vw;
padding: 0.208vw 0 0.26vw;
margin: 0.521vw auto 0;
font-size: 0.99vw;
border-radius: 0.208vw;
letter-spacing: -0.04em;
}
.cta__tel-human {
position: absolute;
bottom: -1.302vw;
left: -9.479vw;
}
.cta__tel-human img {
width: 13.021vw;
height: 8.385vw;
}
.cta__tel-human-text {
font-size: 0.781vw;
top: 0.208vw;
left: 0.833vw;
}
.cta__tel-human-font1 {
font-size: 1.354vw;
}
.cta__tel-human-font2 {
font-size: 0.938vw;
}
.cta__tel-human-font3 {
font-size: 1.042vw;
}
.cta__mail {
width: 28.438vw;
padding: 1.615vw 0 0;
filter: drop-shadow(0.26vw 0.26vw 0.052vw rgba(0, 0, 0, 0.25));
border-radius: 0.729vw;
border: 0.208vw solid #fff;
}
.cta__mail-text {
font-size: 1.927vw;
}
.cta__mail-message-pc {
width: 3.854vw;
padding: 0.208vw 0 0.26vw;
margin: 0.729vw auto 0;
font-size: 1.302vw;
border-radius: 0.208vw;
letter-spacing: -0.04em;
}
}
@media screen and (max-width: 768px) {
.cta {
width: 100%;
padding: 10px 0 15px;
background-color: #e7f4f8;
overflow: hidden;
position: fixed;
bottom: 0;
left: 0;
z-index: 100;
}
.cta__flex {
gap: 5px;
}
.cta__tel {
width: 205px;
position: relative;
}
.cta__tel-wrap {
width: 205px;
padding: 11px 0 9px;
filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.25));
border-radius: 6px;
border: 3px solid #fff;
}
.cta__tel-note {
position: absolute;
top: -9px;
left: 50%;
transform: translateX(-50%);
}
.cta__tel-note img {
width: 190px;
height: auto;
}
.cta__tel-number {
padding-left: 10px;
font-size: 27px;
}
.cta__tel-number::before {
width: 14px;
height: 16px;
top: 35%;
left: -6px;
}
.cta__tel-message-sp {
margin-top: 6px;
}
.cta__tel-message-sp img {
width: 95px;
height: 17px;
}
.cta__tel-human {
display: none;
}
.cta__mail {
width: 149px;
padding: 21px 0 0;
filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.25));
background-image: url(../images/cta/cta-mail-bg.svg);
border-radius: 6px;
border: 3px solid #fff;
}
.cta__mail-text {
font-size: 16px;
padding-left: 28px;
}
.cta__mail-text::before {
content: "";
display: inline-block;
background-image: url(../images/cta/mail.svg);
background-repeat: no-repeat;
background-size: cover;
width: 18px;
height: 13px;
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
}
.cta__mail-message-pc {
display: none;
}
.cta__mail-message-sp {
position: absolute;
top: -5px;
left: 50%;
transform: translateX(-50%);
}
.cta__mail-message-sp img {
width: 32px;
height: auto;
}
}
@media screen and (max-width: 375px) {
.cta {
width: 100%;
padding: 2.667vw 0 4vw;
}
.cta__flex {
gap: 1.333vw;
}
.cta__tel {
width: 54.667vw;
}
.cta__tel-wrap {
width: 54.667vw;
padding: 2.933vw 0 2.4vw;
filter: drop-shadow(0.533vw 0.533vw 0.267vw rgba(0, 0, 0, 0.25));
border-radius: 1.6vw;
border: 0.8vw solid #fff;
}
.cta__tel-note {
top: -2.4vw;
}
.cta__tel-note img {
width: 50.667vw;
}
.cta__tel-number {
padding-left: 2.667vw;
font-size: 7.2vw;
}
.cta__tel-number::before {
width: 3.733vw;
height: 4.267vw;
left: -1.6vw;
}
.cta__tel-message-sp {
margin-top: 1.6vw;
}
.cta__tel-message-sp img {
width: 25.333vw;
height: 4.533vw;
}
.cta__mail {
width: 39.733vw;
padding: 5.6vw 0 0;
filter: drop-shadow(0.533vw 0.533vw 0.267vw rgba(0, 0, 0, 0.25));
border-radius: 1.6vw;
border: 0.8vw solid #fff;
}
.cta__mail-text {
font-size: 4.267vw;
padding-left: 7.467vw;
}
.cta__mail-text::before {
width: 4.8vw;
height: 3.467vw;
left: 2.667vw;
}
.cta__mail-message-sp {
top: -1.333vw;
}
.cta__mail-message-sp img {
width: 8.533vw;
}
}
/****************************************************
about
****************************************************/
.about {
padding: 77px 0 95px;
text-align: center;
}
.about__title {
font-size: 56px;
padding: 43px 0px;
letter-spacing: 0.06em;
color: #fff;
background: linear-gradient(90deg, #41a7d7 0%, #79c0e0 50%, #41a7d7 100%);
display: flex;
align-items: center;
justify-content: center;
}
.about__title--space1 {
letter-spacing: -0.04em;
}
.about__title--space2 {
letter-spacing: -0.2em;
}
.about__title--space3 {
font-size: 96px;
letter-spacing: -0.2em;
}
.about-point {
margin-top: 65px;
display: flex;
justify-content: center;
gap: 40px;
}
.about-point__text {
width: 368px;
height: 368px;
font-size: 32px;
line-height: 1.3;
border-radius: 50%;
color: #fff;
background-color: #005bab;
align-content: center;
}
.about-point__text:nth-of-type(2) {
line-height: 1.8;
}
.about-point__text .about-point__text--color {
font-size: 40px;
line-height: 1.6;
color: #f4ed70;
position: relative;
}
.about-point__text .about-point__text--color::before {
content: "";
display: inline-block;
background-color: #f4ed70;
width: 95%;
height: 1px;
position: absolute;
bottom: 3px;
left: 0;
}
.about-picture {
margin-top: -105px;
}
.about-picture img {
width: 480px;
height: 343px;
}
.about-text-01 {
font-size: 42px;
padding-top: 25px;
position: relative;
}
.about-text-01::before {
content: "";
display: inline-block;
background-image: url(../images/about/about-arrow.svg);
background-repeat: no-repeat;
background-size: cover;
width: 102px;
height: 53px;
position: absolute;
bottom: -75px;
left: 50%;
transform: translateX(-50%);
}
.about-text-02 {
margin-top: 90px;
font-size: 61px;
line-height: 1.6;
color: #005bab;
display: inline-block;
}
.about-text-02 .about-text-02__text {
position: relative;
}
.about-text-02 .about-text-02__text::before {
content: "";
background-color: #f4ed70;
width: 100%;
height: 24px;
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
z-index: -1;
}
.about-text-02 .about-text-02__text:nth-of-type(1):before {
width: 96%;
}
.about-text-02__text--space {
letter-spacing: -0.4em;
}
@media screen and (min-width: 768px) {
.about {
padding: 4.01vw 0 4.948vw;
}
.about__title {
font-size: 2.917vw;
padding: 2.24vw 0;
letter-spacing: 0.06em;
}
.about__title--space3 {
font-size: 5vw;
}
.about-point {
margin-top: 3.385vw;
gap: 2.083vw;
}
.about-point__text {
width: 19.167vw;
height: 19.167vw;
font-size: 1.667vw;
}
.about-point__text .about-point__text--color {
font-size: 2.083vw;
}
.about-point__text .about-point__text--color::before {
height: 0.052vw;
bottom: 0.156vw;
}
.about-picture {
margin-top: -5.469vw;
}
.about-picture img {
width: 25vw;
height: 17.865vw;
}
.about-text-01 {
font-size: 2.188vw;
padding-top: 1.302vw;
position: relative;
}
.about-text-01::before {
width: 5.313vw;
height: 2.76vw;
bottom: -3.906vw;
}
.about-text-02 {
margin-top: 4.688vw;
font-size: 3.177vw;
}
.about-text-02 .about-text-02__text::before {
height: 1.25vw;
bottom: 0.781vw;
}
}
@media screen and (max-width: 768px) {
.about {
padding: 30px 0 40px;
text-align: center;
}
.about__title {
font-size: 22px;
padding: 20px 0px;
letter-spacing: 0.03em;
}
.about__title--space3 {
font-size: 36px;
padding-bottom: 3px;
}
.about-point {
width: 375px;
margin: 20px auto 0;
display: grid;
justify-items: center;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
gap: 0;
}
.about-point__text {
width: 170px;
height: 170px;
font-size: 15px;
line-height: 1.3;
border-radius: 50%;
color: #fff;
background-color: #005bab;
align-content: center;
}
.about-point__text:nth-of-type(1) {
grid-column: 1 / -1;
margin-bottom: -8px;
}
.about-point__text:nth-of-type(2) {
line-height: 1.8;
grid-column: span 1;
}
.about-point__text:nth-of-type(3) {
grid-column: span 1;
}
.about-point__text .about-point__text--color {
font-size: 16px;
line-height: 1.6;
}
.about-point__text .about-point__text--color::before {
content: "";
display: inline-block;
background-color: #f4ed70;
width: 95%;
height: 1px;
position: absolute;
bottom: 3px;
left: 0;
}
.about-picture {
margin-top: -40px;
}
.about-picture img {
width: 250px;
height: 191px;
}
.about-text-01 {
font-size: 20px;
padding-top: 25px;
line-height: 1.4;
}
.about-text-01::before {
width: 25px;
height: 13px;
position: absolute;
bottom: -30px;
}
.about-text-02 {
margin-top: 45px;
font-size: 20px;
line-height: 1.6;
}
.about-text-02 .about-text-02__text::before {
content: "";
background-color: #f4ed70;
width: 100%;
height: 10px;
position: absolute;
bottom: 2px;
left: 50%;
transform: translateX(-50%);
z-index: -1;
}
}
@media screen and (max-width: 375px) {
.about {
padding: 8vw 0 10.667vw;
}
.about__title {
font-size: 5.867vw;
padding: 5.333vw 0;
letter-spacing: 0.03em;
}
.about__title--space3 {
font-size: 9.6vw;
padding-bottom: 0.8vw;
}
.about-point {
width: 100vw;
margin: 5.333vw auto 0;
}
.about-point__text {
width: 45.333vw;
height: 45.333vw;
font-size: 4vw;
}
.about-point__text:nth-of-type(1) {
margin-bottom: -2.133vw;
}
.about-point__text .about-point__text--color {
font-size: 4.267vw;
}
.about-point__text .about-point__text--color::before {
height: 0.267vw;
bottom: 0.8vw;
}
.about-picture {
margin-top: -10.667vw;
}
.about-picture img {
width: 66.667vw;
height: 50.933vw;
}
.about-text-01 {
font-size: 5.333vw;
padding-top: 6.667vw;
}
.about-text-01::before {
width: 6.667vw;
height: 3.467vw;
bottom: -8vw;
}
.about-text-02 {
margin-top: 12vw;
font-size: 5.333vw;
}
.about-text-02 .about-text-02__text::before {
height: 2.667vw;
bottom: 0.533vw;
}
}
/****************************************************
reason
****************************************************/
.reason {
padding: 78px 0 85px;
background-color: #e5eff7;
}
.reason-top {
text-align: center;
}
.reason-satisfaction {
display: inline-block;
position: relative;
}
.reason-satisfaction__wrap::before {
left: -90px;
}
.reason-satisfaction__wrap::after {
right: -90px;
transform: scale(-1, 1);
}
.reason-satisfaction__wrap {
font-size: 85px;
position: relative;
}
.reason-satisfaction__wrap::before,
.reason-satisfaction__wrap::after {
content: "";
display: inline-block;
background-image: url(../images/reason/reason-satisfaction-deco.svg);
background-repeat: no-repeat;
background-size: cover;
width: 80px;
height: 182px;
position: absolute;
bottom: -40px;
}
.reason-satisfaction__text {
vertical-align: text-top;
}
.reason-satisfaction__meter {
padding-left: 5px;
font-size: 164px;
color: #005bab;
}
.reason-satisfaction__unit {
font-size: 128px;
color: #005bab;
}
.reason-satisfaction__symbol {
font-size: 27px;
color: #005bab;
position: absolute;
top: 35px;
right: 85px;
}
.reason-satisfaction__note {
padding-top: 15px;
font-size: 15px;
text-align: right;
}
.reason-thoughts {
margin-top: 77px;
display: flex;
justify-content: center;
gap: 40px;
}
.reason-thoughts__text {
padding: 15px 20px 17px;
font-size: 39px;
background-color: #f3e9b0;
display: inline-block;
position: relative;
}
.reason-thoughts__text::before {
content: "";
display: inline-block;
background-image: url(../images/reason/reason-thoughts-deco.svg);
background-repeat: no-repeat;
background-size: cover;
width: 28px;
height: 29px;
position: absolute;
bottom: -2%;
right: -0.5%;
}
.reason-thoughts__text::after {
content: "";
display: inline-block;
background-image: url(../images/reason/reason-thoughts-deco.svg);
background-repeat: no-repeat;
background-size: cover;
width: 28px;
height: 29px;
position: absolute;
top: -2.5%;
left: -0.3%;
transform: rotate(180deg);
}
.reason-title {
margin-top: 45px;
font-size: 58px;
display: flex;
justify-content: center;
align-items: center;
}
.reason-title img {
width: 430px;
height: auto;
object-fit: unset;
}
.reason-title__flex {
display: flex;
align-items: center;
}
.reason-title__number {
width: 122px;
height: 122px;
padding: 3px 0 0 4px;
margin: 0 10px 0 6px;
font-size: 101px;
border-radius: 50%;
color: #fffd19;
background-color: #005bab;
font-family: 'Zen Old Mincho';
}
.reason-title--color {
font-size: 73px;
color: #005bab;
}
.reason__sub-title {
font-size: 58px;
color: #005bab;
position: relative;
}
.reason__sub-title::before {
content: "";
display: inline-block;
background-color: #005bab;
width: 111px;
height: 10px;
position: absolute;
bottom: -30px;
left: 50%;
transform: translateX(-50%);
}
.reason__read {
margin-top: 65px;
font-size: 28px;
line-height: 1.3;
letter-spacing: -0.02em;
}
.reason-label {
width: 198px;
height: 198px;
padding-bottom: 15px;
border-radius: 50%;
background-color: #005bab;
position: absolute;
top: -65px;
left: -50px;
text-align: center;
align-content: center;
}
.reason-label-1 {
font-size: 33px;
color: #fff;
}
.reason-label-2 {
font-size: 101px;
color: #fffd19;
font-family: 'Zen Old Mincho';
}
@media screen and (min-width: 768px) {
.reason {
padding: 4.063vw 0 4.427vw;
}
.reason-satisfaction__wrap::before {
width: 4.167vw;
height: 9.479vw;
left: -4.687vw;
bottom: -2.083vw;
}
.reason-satisfaction__wrap::after {
width: 4.167vw;
height: 9.479vw;
right: -4.687vw;
bottom: -2.083vw;
}
.reason-satisfaction__wrap {
font-size: 4.427vw;
}
.reason-satisfaction__meter {
padding-left: 0.26vw;
font-size: 8.542vw;
}
.reason-satisfaction__unit {
font-size: 6.667vw;
color: #005bab;
}
.reason-satisfaction__symbol {
font-size: 1.406vw;
top: 1.823vw;
right: 4.427vw;
}
.reason-satisfaction__note {
padding-top: 0.781vw;
font-size: 0.781vw;
}
.reason-thoughts {
margin-top: 4.01vw;
gap: 2.083vw;
}
.reason-thoughts__text {
padding: 0.781vw 1.042vw 0.885vw;
font-size: 2.031vw;
}
.reason-thoughts__text::before {
width: 1.458vw;
height: 1.51vw;
bottom: -2%;
right: -0.5%;
}
.reason-thoughts__text::after {
width: 1.458vw;
height: 1.51vw;
}
.reason-title {
margin-top: 2.344vw;
font-size: 3.021vw;
}
.reason-title img {
width: 22.396vw;
}
.reason-title__number {
width: 6.354vw;
height: 6.354vw;
padding: 0.156vw 0 0 0.208vw;
margin: 0 0.521vw 0 0.313vw;
font-size: 5.26vw;
}
.reason-title--color {
font-size: 3.802vw;
}
.reason__sub-title {
font-size: 3.021vw;
}
.reason__sub-title::before {
width: 5.781vw;
height: 0.521vw;
bottom: -1.562vw;
}
.reason__read {
margin-top: 3.385vw;
font-size: 1.458vw;
}
.reason-label {
width: 10.313vw;
height: 10.313vw;
top: -3.385vw;
left: -2.604vw;
}
.reason-label-1 {
font-size: 1.719vw;
}
.reason-label-2 {
font-size: 5.26vw;
}
}
@media screen and (max-width: 768px) {
.reason {
padding: 30px 0 40px;
}
.reason-satisfaction__wrap::before {
width: 23px;
height: 52px;
position: absolute;
bottom: -10px;
left: -27px;
}
.reason-satisfaction__wrap::after {
width: 23px;
height: 52px;
position: absolute;
bottom: -10px;
right: -27px;
}
.reason-satisfaction__wrap {
font-size: 24px;
position: relative;
}
.reason-satisfaction__text {
vertical-align: text-top;
}
.reason-satisfaction__meter {
padding-left: 0;
font-size: 48px;
}
.reason-satisfaction__unit {
font-size: 32px;
}
.reason-satisfaction__symbol {
font-size: 12px;
top: 8px;
right: 7%;
}
.reason-satisfaction__note {
padding-top: 5px;
font-size: 8px;
}
.reason-thoughts {
margin-top: 30px;
display: inline-flex;
flex-flow: column;
gap: 10px;
}
.reason-thoughts__text {
padding: 10px 15px 12px;
font-size: 18px;
}
.reason-thoughts__text:nth-of-type(1) {
width: 92%;
margin: 0 auto;
}
.reason-thoughts__text::before {
width: 19px;
height: 19px;
bottom: -2%;
right: -0.5%;
}
.reason-thoughts__text::after {
width: 19px;
height: 19px;
top: -2.5%;
left: -0.3%;
transform: rotate(180deg);
}
.reason-title {
margin-top: 45px;
font-size: 24px;
display: block;
}
.reason-title img {
width: 250px;
}
.reason-title__flex {
margin-top: 10px;
justify-content: center;
}
.reason-title__number {
width: 40px;
height: 40px;
padding: 0px 0 4px 2px;
margin: 0 4px 0 2px;
font-size: 34px;
text-align: center;
align-content: center;
}
.reason-title--color {
font-size: 28px;
}
.reason__sub-title {
font-size: 24px;
}
.reason__sub-title::before {
width: 60px;
height: 3px;
bottom: -15px;
}
.reason__read {
margin-top: 35px;
font-size: 16px;
line-height: 1.3;
letter-spacing: -0.02em;
}
.reason-label {
width: 80px;
height: 80px;
top: -38px;
left: -8px;
padding: 0 0 6px 6px;
}
.reason-label-1 {
font-size: 14px;
}
.reason-label-2 {
font-size: 40px;
}
}
@media screen and (max-width: 375px) {
.reason {
padding: 8vw 0 10.667vw;
}
.reason-satisfaction__wrap::before {
width: 6.133vw;
height: 13.867vw;
bottom: -2.667vw;
left: -7.2vw;
}
.reason-satisfaction__wrap::after {
width: 6.133vw;
height: 13.867vw;
bottom: -2.667vw;
right: -7.2vw;
}
.reason-satisfaction__wrap {
font-size: 6.4vw;
}
.reason-satisfaction__meter {
padding-left: 0;
font-size: 12.8vw;
}
.reason-satisfaction__unit {
font-size: 8.533vw;
}
.reason-satisfaction__symbol {
font-size: 3.2vw;
top: 2.133vw;
}
.reason-satisfaction__note {
padding-top: 1.333vw;
font-size: 2.133vw;
}
.reason-thoughts {
margin-top: 8vw;
gap: 2.667vw;
}
.reason-thoughts__text {
padding: 2.667vw 4vw 3.2vw;
font-size: 4.8vw;
}
.reason-thoughts__text::before {
width: 5.067vw;
height: 5.067vw;
}
.reason-thoughts__text::after {
width: 5.067vw;
height: 5.067vw;
}
.reason-title {
margin-top: 12vw;
font-size: 6.4vw;
}
.reason-title img {
width: 66.667vw;
}
.reason-title__flex {
margin-top: 2.667vw;
}
.reason-title__number {
width: 10.667vw;
height: 10.667vw;
padding: 0px 0 1.067vw 0.533vw;
margin: 0 1.067vw 0 0.533vw;
font-size: 9.067vw;
}
.reason-title--color {
font-size: 7.467vw;
}
.reason__sub-title {
font-size: 6.4vw;
}
.reason__sub-title::before {
width: 16vw;
height: 0.8vw;
bottom: -4vw;
}
.reason__read {
margin-top: 9.333vw;
font-size: 4.267vw;
}
.reason-label {
width: 21.333vw;
height: 21.333vw;
top: -10.133vw;
left: -2.133vw;
padding: 0 0 1.6vw 1.6vw;
}
.reason-label-1 {
font-size: 3.733vw;
}
.reason-label-2 {
font-size: 10.667vw;
}
}
/***************************
price-plan
***************************/
.price-plan {
padding: 40px 0 0;
margin-top: 81px;
border-radius: 10px;
background-color: #fff;
position: relative;
filter: drop-shadow(0 0 7px rgba(0, 0, 0, 0.3));
}
.inner2 {
max-width: 1020px;
width: 100%;
padding-bottom: 50px;
margin: 0 auto;
}
.reason__heading {
text-align: center;
}
.price-plan__link {
margin-top: 55px;
display: flex;
justify-content: space-between;
}
.price-plan__link-price {
width: 490px;
height: 104px;
padding-top: 15px;
background-image: url(../images/reason/price-plan/price-btn-bg.svg);
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.price-plan__link-price img {
width: 205px;
height: auto;
object-fit: unset;
}
.price-plan__link-plan {
width: 490px;
height: 104px;
padding-top: 10px;
background-image: url(../images/reason/price-plan/plan-btn-bg.svg);
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.price-plan__link-plan img {
width: 440px;
height: auto;
object-fit: unset;
}
.price-plan__link-price::before,
.price-plan__link-plan::before {
content: "";
display: inline-block;
background-repeat: no-repeat;
background-size: cover;
width: 20px;
height: 12px;
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
}
.price-plan__link-price::before {
background-image: url(../images/reason/price-plan/price-plan-arrow-r.svg);
}
.price-plan__link-plan::before {
background-image: url(../images/reason/price-plan/price-plan-arrow-g.svg);
}
@media screen and (min-width: 768px) {
.price-plan {
padding: 2.083vw 0 0;
margin-top: 4.219vw;
border-radius: 0.521vw;
filter: drop-shadow(0 0 0.365vw rgba(0, 0, 0, 0.3));
}
.inner2 {
max-width: 53.125vw;
padding-bottom: 2.604vw;
}
.price-plan__link {
margin-top: 2.865vw;
}
.price-plan__link-price {
width: 25.65vw;
height: 5.417vw;
padding-top: 0.781vw;
}
.price-plan__link-price img {
width: 10.677vw;
}
.price-plan__link-plan {
width: 25.521vw;
height: 5.417vw;
padding-top: 0.521vw;
}
.price-plan__link-plan img {
width: 22.917vw;
}
.price-plan__link-price::before,
.price-plan__link-plan::before {
width: 1.042vw;
height: 0.625vw;
bottom: 0.781vw;
}
}
@media screen and (max-width: 768px) {
.price-plan {
padding: 50px 0 0;
margin-top: 70px;
border-radius: 5px;
filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3));
}
.inner2 {
max-width: 100%;
width: 100%;
padding: 10px 15px 40px;
}
.price-plan__link {
margin-top: 30px;
display: inline-flex;
flex-flow: column;
gap: 10px;
}
.price-plan__link-price {
width: 285px;
height: 60px;
padding: 0 0 8px;
text-align: center;
align-content: center;
}
.price-plan__link-price img {
width: 120px;
}
.price-plan__link-plan {
width: 285px;
height: 61px;
padding-top: 10px;
background-image: url(../images/reason/price-plan/plan-btn-bg.svg);
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.price-plan__link-plan img {
width: 240px;
}
.price-plan__link-price::before,
.price-plan__link-plan::before {
width: 10px;
height: 6px;
bottom: 8px;
}
}
@media screen and (max-width: 375px) {
.price-plan {
padding: 13.333vw 0 0;
margin-top: 18.667vw;
border-radius: 1.333vw;
filter: drop-shadow(0 0 0.8vw rgba(0, 0, 0, 0.3));
}
.inner2 {
padding: 2.667vw 4vw 10.667vw;
}
.price-plan__link {
margin-top: 8vw;
gap: 2.667vw;
}
.price-plan__link-price {
width: 76vw;
height: 16vw;
padding: 0 0 2.133vw;
}
.price-plan__link-price img {
width: 32vw;
}
.price-plan__link-plan {
width: 76vw;
height: 16.267vw;
padding-top: 2.667vw;
}
.price-plan__link-plan img {
width: 64vw;
}
.price-plan__link-price::before,
.price-plan__link-plan::before {
width: 2.667vw;
height: 1.6vw;
bottom: 2.133vw;
}
}
/***************************
price
***************************/
.price-container {
max-width: 1020px;
width: 100%;
padding-bottom: 43px;
margin: 0 auto 50px;
background-color: #fbeff0;
filter: drop-shadow(0 0 7px rgba(0, 0, 0, 0.3));
}
.price-top {
margin-top: 45px;
text-align: center;
}
.price-top__title {
position: relative;
}
.price-top__title::before {
content: "";
display: inline-block;
background-color: #be423a;
width: 100%;
height: 3px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
z-index: 1;
}
.price-top__title-wrap {
width: 340px;
height: 88px;
background-image: url(../images/reason/price-plan/price/price-title-bg.svg);
background-repeat: no-repeat;
background-size: cover;
margin: 0 auto;
position: relative;
z-index: 2;
align-content: center;
}
.price-top__title img {
width: 216px;
height: auto;
object-fit: unset;
}
.price-top__text {
margin-top: 35px;
font-size: 39px;
color: #be423a;
}
.price-title {
padding: 16px 0;
margin-top: 35px;
font-size: 56px;
color: #fff;
background-color: #e27d7e;
text-align: center;
}
.price-title--color {
padding: 2px 15px 6px;
margin-right: 20px;
font-size: 53px;
color: #e27d7e;
background-color: #fff;
}
.price-discount {
padding-bottom: 40px;
display: flex;
justify-content: center;
}
.price-discount__text-box {
width: 50%;
padding: 30px 0 0 47px;
}
.price-discount__text-1 img {
width: 345px;
height: auto;
object-fit: unset;
}
.price-discount__text-wrap {
margin-top: 30px;
display: flex;
gap: 15px;
}
.price-discount__text-2 {
width: 151px;
height: 51px;
padding: 0 5px 2px 0;
font-size: 28px;
color: #e27d7e;
background-image: url(../images/reason/price-plan/price/15/price-label1-bg.svg);
background-repeat: no-repeat;
background-size: cover;
text-align: center;
align-content: center;
}
.price-discount__text-3 {
width: 179px;
height: 59px;
padding-bottom: 11px;
font-size: 25px;
letter-spacing: -0.03em;
color: #005bab;
background-image: url(../images/reason/price-plan/price/price-label2.svg);
background-repeat: no-repeat;
background-size: cover;
text-align: center;
align-content: center;
}
.price-discount__text-3--size {
font-size: 20px;
letter-spacing: -0.1em;
}
.price-discount__text-4 {
margin-top: 10px;
}
.price-discount__text-4 img {
width: 420px;
height: auto;
object-fit: unset;
}
.price-discount__main-picture {
width: 50%;
padding: 47px 0 0 13px;
}
.price-discount__main-picture img {
width: 453px;
height: 238px;
}
.price-contents {
max-width: 935px;
width: 100%;
margin: 0 auto;
background-color: #fff;
}
.price-contents-title {
font-size: 39px;
padding: 12px 0 14px;
color: #fff;
background-color: #666666;
text-align: center;
position: relative;
}
.accordion-title__symbol {
width: 37px;
height: 37px;
border-radius: 50%;
background-color: #fff;
position: relative;
position: absolute;
top: 50%;
right: 35px;
transform: translateY(-50%);
}
.accordion-title__symbol::before,
.accordion-title__symbol::after {
content: "";
display: inline-block;
width: 21px;
height: 4px;
background-color: #666;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.accordion-title__symbol::after {
transform: translate(-50%, -50%) rotate(90deg);
transition: .3s;
}
.price-contents-title.del .accordion-title__symbol::after,
.plan__contents-title.del .accordion-title__symbol::after {
transform: translate(-50%, -50%) rotate(0deg);
}
.accordion {
height: 0;
overflow: hidden;
transition: height 0.3s ease;
}
.price-contents-inner {
padding: 35px 0 40px;
border: 2px solid #666;
border-top: none;
}
.price-contents-title__text {
font-size: 31px;
text-align: center;
}
.price-contents__picture-wrap {
width: 850px;
margin: 30px auto 35px;
display: flex;
justify-content: left;
flex-wrap: wrap;
gap: 20px 25px;
text-align: center;
}
.price-contents__picture img {
width: 193px;
height: 140px;
}
.price-contents__picture-text {
padding-top: 3px;
font-size: 21px;
line-height: 1.3;
text-align: left;
}
.price-contents__picture-text--color {
color: #e27d7e;
}
.price-contents__picture-text--size {
font-size: 16px;
}
.price-contents__text {
font-size: 16px;
line-height: 1.3;
text-align: center;
}
@media screen and (min-width: 768px) {
.price-container {
max-width: 53.125vw;
padding-bottom: 2.24vw;
margin: 0 auto 2.604vw;
filter: drop-shadow(0 0 0.365vw rgba(0, 0, 0, 0.3));
}
.price-top {
margin-top: 2.344vw;
}
.price-top__title::before {
height: 0.156vw;
}
.price-top__title-wrap {
width: 17.708vw;
height: 4.7vw;
}
.price-top__title img {
width: 11.25vw;
}
.price-top__text {
margin-top: 1.823vw;
font-size: 2.031vw;
}
.price-title {
padding: 0.833vw 0;
margin-top: 1.823vw;
font-size: 2.917vw;
}
.price-title--color {
padding: 0.104vw 0.781vw 0.313vw;
margin-right: 1.042vw;
font-size: 2.76vw;
}
.price-discount {
padding-bottom: 2.083vw;
}
.price-discount__text-box {
padding: 1.563vw 0 0 2.448vw;
}
.price-discount__text-1 img {
width: 17.969vw;
}
.price-discount__text-wrap {
margin-top: 1.563vw;
gap: 0.781vw;
}
.price-discount__text-2 {
width: 7.865vw;
height: 2.656vw;
padding: 0 0.26vw 0.104vw 0;
font-size: 1.458vw;
}
.price-discount__text-3 {
width: 9.323vw;
height: 3.073vw;
padding-bottom: 0.573vw;
font-size: 1.302vw;
}
.price-discount__text-3--size {
font-size: 1.042vw;
}
.price-discount__text-4 {
margin-top: 0.521vw;
}
.price-discount__text-4 img {
width: 21.875vw;
}
.price-discount__main-picture {
padding: 2.448vw 0 0 0.677vw;
}
.price-discount__main-picture img {
width: 23.594vw;
height: 12.396vw;
}
.price-contents {
max-width: 48.698vw;
}
.price-contents-title {
font-size: 2.031vw;
padding: 0.625vw 0 0.729vw;
}
.accordion-title__symbol {
width: 1.927vw;
height: 1.927vw;
right: 1.823vw;
}
.accordion-title__symbol::before,
.accordion-title__symbol::after {
width: 1.094vw;
height: 0.208vw;
}
.price-contents-inner {
padding: 1.823vw 0 2.083vw;
border: 0.104vw solid #666;
}
.price-contents-title__text {
font-size: 1.615vw;
}
.price-contents__picture-wrap {
width: 44.271vw;
margin: 1.563vw auto 35px;
gap: 1.042vw 1.302vw;
}
.price-contents__picture img {
width: 10.052vw;
height: 7.292vw;
}
.price-contents__picture-text {
padding-top: 0.156vw;
font-size: 1.094vw;
}
.price-contents__picture-text--size {
font-size: 0.833vw;
}
.price-contents__text {
font-size: 0.833vw;
}
}
@media screen and (max-width: 768px) {
.price {
padding: 0;
}
.price-container {
max-width: 100%;
width: 100%;
padding: 0 0 43px;
margin: 0 auto 50px;
background-color: #fbeff0;
filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3));
}
.price-top {
margin-top: 45px;
text-align: center;
}
.price-top__title {
position: relative;
}
.price-top__title::before {
content: "";
display: inline-block;
background-color: #be423a;
width: 100%;
height: 3px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
z-index: 1;
}
.price-top__title-wrap {
width: 230px;
height: 64px;
padding-bottom: 5px;
}
.price-top__title img {
width: 115px;
}
.price-top__text {
margin-top: 30px;
font-size: 18px;
color: #be423a;
}
.price-title {
padding: 12px 0;
margin-top: 20px;
font-size: 20px;
color: #fff;
background-color: #e27d7e;
text-align: center;
}
.price-title--color {
padding: 2px 5px 3px;
margin-right: 5px;
font-size: 18px;
}
.price-discount {
padding-bottom: 40px;
display: flex;
justify-content: center;
flex-flow: column;
text-align: center;
}
.price-discount__text-box {
width: 100%;
padding: 30px 0 0 0px;
}
.price-discount__text-1 {
margin-right: 23px;
}
.price-discount__text-1 img {
width: 250px;
}
.price-discount__text-wrap {
margin-right: 23px;
margin-top: 15px;
display: flex;
justify-content: center;
gap: 5px;
}
.price-discount__text-2 {
width: 110px;
height: 37px;
padding: 0 5px 2px 0;
font-size: 18px;
}
.price-discount__text-3 {
width: 140px;
height: 49px;
padding-bottom: 11px;
font-size: 18px;
}
.price-discount__text-3--size {
font-size: 15px;
letter-spacing: -0.1em;
}
.price-discount__text-4 {
width: 100%;
padding: 5px 0 0;
margin-top: 0;
text-align: center;
}
.price-discount__text-4 img {
width: 280px;
}
.price-discount__main-picture {
width: 100%;
padding: 0;
margin-top: 20px;
}
.price-discount__main-picture img {
width: 295px;
height: 155px;
}
.price-contents {
max-width: 295px;
width: 100%;
margin: 0 auto;
background-color: #fff;
}
.price-contents-title {
font-size: 20px;
padding: 12px 0;
}
.accordion-title__symbol {
width: 24px;
height: 24px;
right: 10px;
}
.accordion-title__symbol::before,
.accordion-title__symbol::after {
width: 15px;
height: 2px;
}
.accordion {
height: 0;
overflow: hidden;
transition: height 0.3s ease;
}
.price-contents-inner {
padding: 20px 0 25px;
border: 1px solid #666;
border-top: none;
}
.price-contents-title__text {
font-size: 16px;
text-align: center;
}
.price-contents__picture-wrap {
width: 100%;
padding: 0 10px;
margin: 20px auto 25px;
justify-content: space-between;
flex-wrap: wrap;
gap: 15px 10px;
}
.price-contents__picture img {
width: 130px;
height: 95px;
}
.price-contents__picture-text {
padding-top: 3px;
font-size: 14px;
line-height: 1.3;
text-align: left;
}
.price-contents__picture-text--size {
font-size: 11px;
}
.price-contents__text {
font-size: 14px;
}
}
@media screen and (max-width: 375px) {
.price-container {
padding: 0 0 11.467vw;
margin: 0 auto 13.333vw;
filter: drop-shadow(0 0 0.8vw rgba(0, 0, 0, 0.3));
}
.price-top {
margin-top: 12vw;
}
.price-top__title::before {
height: 0.8vw;
}
.price-top__title-wrap {
width: 61.333vw;
height: 17.067vw;
padding-bottom: 1.333vw;
}
.price-top__title img {
width: 30.667vw;
}
.price-top__text {
margin-top: 8vw;
font-size: 4.8vw;
}
.price-title {
padding: 3.2vw 0;
margin-top: 5.333vw;
font-size: 5.333vw;
}
.price-title--color {
padding: 0.533vw 1.333vw 0.8vw;
margin-right: 1.333vw;
font-size: 4.8vw;
}
.price-discount {
padding-bottom: 10.667vw;
}
.price-discount__text-box {
width: 100%;
padding: 8vw 0 0 0;
}
.price-discount__text-1 {
margin-right: 6.133vw;
}
.price-discount__text-1 img {
width: 66.667vw;
}
.price-discount__text-wrap {
margin-right: 6.133vw;
margin-top: 4vw;
gap: 1.333vw;
}
.price-discount__text-2 {
width: 29.333vw;
height: 9.867vw;
padding: 0 1.333vw 0.533vw 0;
font-size: 4.8vw;
}
.price-discount__text-3 {
width: 37.333vw;
height: 13.067vw;
padding-bottom: 2.933vw;
font-size: 4.8vw;
}
.price-discount__text-3--size {
font-size: 4vw;
}
.price-discount__text-4 {
width: 100%;
padding: 1.333vw 0 0;
}
.price-discount__text-4 img {
width: 74.667vw;
}
.price-discount__main-picture {
margin-top: 5.333vw;
}
.price-discount__main-picture img {
width: 78.667vw;
height: 41.333vw;
}
.price-contents {
max-width: 78.667vw;
}
.price-contents-title {
font-size: 5.333vw;
padding: 3.2vw 0;
}
.accordion-title__symbol {
width: 6.4vw;
height: 6.4vw;
right: 2.667vw;
}
.accordion-title__symbol::before,
.accordion-title__symbol::after {
width: 4vw;
height: 0.533vw;
}
.price-contents-inner {
padding: 5.333vw 0 6.667vw;
border: 0.267vw solid #666;
}
.price-contents-title__text {
font-size: 4.267vw;
}
.price-contents__picture-wrap {
width: 100%;
padding: 0 2.667vw;
margin: 5.333vw auto 6.667vw;
gap: 4vw 2.667vw;
}
.price-contents__picture img {
width: 34.667vw;
height: 25.333vw;
}
.price-contents__picture-text {
padding-top: 0.8vw;
font-size: 3.733vw;
}
.price-contents__picture-text--size {
font-size: 2.933vw;
}
.price-contents__text {
font-size: 3.733vw;
}
}
/***************************
price-30
***************************/
.price-container.price-30 {
background-color: #faf0f5;
}
.price-30 .price-discount__text-2 {
color: #d785ae;
background-image: url(../images/reason/price-plan/price/30/price-label1-bg.svg);
}
.price-30 .price-discount__text-4 img {
width: 217px;
height: auto;
}
.price-30 .price-title {
background-color: #d785ae;
}
.price-30 .price-title--color {
color: #d785ae;
}
.price-30 .price-contents__picture-text--color {
font-size: 20px;
color: #d785ae;
}
.price-30 .price-contents__text {
width: 545px;
font-size: 16px;
line-height: 1.3;
text-align: left;
margin: 0 auto;
text-wrap-mode: nowrap;
}
.price-contents__picture-text--size-exception {
font-size: 16px;
line-height: 1;
}
.price-contents__picture-text--space1 {
letter-spacing: -0.3em;
}
.price-contents__picture-text--space2 {
letter-spacing: -0.4em;
}
.price-contents__picture-text--space3 {
letter-spacing: -0.6em;
}
@media screen and (min-width: 768px) {
.price-30 .price-discount__text-4 img {
width: 11.302vw;
}
.price-30 .price-contents__picture-text--color {
font-size: 1.042vw;
}
.price-30 .price-contents__text {
width: 28.385vw;
font-size: 0.833vw;
}
.price-contents__picture-text--size-exception {
font-size: 0.833vw;
line-height: 1;
}
}
@media screen and (max-width: 768px) {
.price-30 .price-discount__text-1 {
margin-right: 0;
}
.price-30 .price-discount__text-wrap {
margin-right: 0;
}
.price-30 .price-discount__text-4 img {
width: 145px;
}
.price-30 .price-contents__picture-text--color {
font-size: 14px;
}
.price-30 .price-contents__text {
width: 100%;
padding: 0 10px;
font-size: 12px;
text-wrap-mode: unset;
}
.price-contents__picture-text--size-exception {
font-size: 11px;
}
}
@media screen and (max-width: 375px) {
.price-30 .price-discount__text-wrap {
margin-right: 0;
}
.price-30 .price-discount__text-4 img {
width: 38.667vw;
}
.price-30 .price-contents__picture-text--color {
font-size: 3.733vw;
}
.price-30 .price-contents__text {
padding: 0 2.667vw;
font-size: 3.2vw;
}
.price-contents__picture-text--size-exception {
font-size: 2.933vw;
}
}
/***************************
price-45
***************************/
.price-container.price-45 {
background-color: #fcf4ed;
}
.price-45 .price-title {
background-color: #e9a269;
}
.price-45 .price-title--color {
color: #e9a269;
}
.price-45 .price-discount__text-4 img {
width: 423px;
height: auto;
}
.price-45 .price-contents__text {
width: 545px;
font-size: 16px;
line-height: 1.3;
text-align: left;
margin: 0 auto;
text-wrap-mode: nowrap;
}
.price-45 .price-contents__picture-text--color {
color: #e9a269;
}
.price-contents__picture:nth-of-type(17) {
text-align: left;
}
.price-contents__picture-text--space4 {
letter-spacing: -0.1em;
}
@media screen and (min-width: 768px) {
.price-45 .price-discount__text-4 img {
width: 22.031vw;
}
.price-45 .price-contents__text {
width: 28.385vw;
font-size: 0.833vw;
}
}
@media screen and (max-width: 768px) {
.price-45 .price-discount__text-4 img {
width: 275px;
}
.price-45 .price-contents__text {
width: 100%;
padding: 0 10px;
font-size: 12px;
text-wrap-mode: unset;
}
}
@media screen and (max-width: 375px) {
.price-45 .price-discount__text-4 img {
width: 73.333vw;
}
.price-45 .price-contents__text {
padding: 0 2.667vw;
font-size: 3.2vw;
}
}
/***************************
price-member
***************************/
.price-member {
padding: 32px 90px 0 90px;
border-radius: 10px;
background-color: #005bab;
}
.price-member__sub-title {
width: 332px;
height: 102px;
padding: 0 3px 15px 0;
margin: 0 auto;
font-size: 50px;
color: #005bab;
background-image: url(../images/reason/price-plan/price/45/sub-title-bg.svg);
background-repeat: no-repeat;
background-size: cover;
text-align: center;
align-content: center;
letter-spacing: -0.03em;
}
.price-member__sub-title--size {
font-size: 40px;
letter-spacing: -0.2em;
}
.price-member-heading {
padding-bottom: 27px;
margin: 55px 0 0;
color: #005bab;
background-color: #fff;
text-align: center;
}
.price-member-heading__title-flex {
display: flex;
justify-content: center;
gap: 15px;
}
.price-member-heading__title-01,
.price-member-heading__title-02 {
width: 345px;
padding: 8px 0 9px;
margin-top: -24px;
font-size: 27px;
border-radius: 24px;
border: 2px solid #005bab;
background-color: #e5eff7;
}
.price-member-heading__title-02 {
width: 266px;
}
.price-member-heading__main {
margin-top: 27px;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
}
.price-member-heading__main::before {
content: "";
display: inline-block;
width: 100%;
height: 50%;
background-color: #f4ed70;
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
}
.price-member-heading__main-01 img {
width: 301px;
height: 68px;
}
.price-member-heading__main-02 {
font-size: 53px;
margin-left: -20px;
}
.price-member-heading__text {
margin-top: 27px;
font-size: 32px;
line-height: 1.3;
color: #333;
}
.price-member-example {
text-align: center;
}
.price-member-example__text-01 {
margin-top: 60px;
}
.price-member-example__text-01 img {
width: 425px;
height: auto;
object-fit: unset;
}
.price-member-example__text-02 {
margin-top: 25px;
}
.price-member-example__text-02 img {
width: 512px;
height: auto;
object-fit: unset;
}
.price-member-example__text-03 {
margin-top: 25px;
}
.price-member-example__text-03 img {
width: 558px;
height: auto;
object-fit: unset;
}
.price-member-contents {
width: 805px;
padding-bottom: 15px;
margin: 40px auto 0;
border: 2px solid #fff;
border-radius: 10px;
background-color: rgba(255, 255, 255, .2);
}
.price-member-contents-flex {
display: flex;
justify-content: space-between;
}
.price-member-contents__text-flex {
padding-top: 20px;
display: flex;
align-items: flex-start;
gap: 20px;
color: #fff;
}
.price-member-contents__text-1 {
width: 167px;
padding: 11px 0 12px 30px;
margin-left: -1px;
font-size: 26px;
background-image: url(../images/reason/price-plan/price/price-member/contents__text-1-bg.svg);
background-repeat: no-repeat;
background-size: cover;
align-content: center;
}
.price-member-contents__text-2 img {
width: 221px;
height: auto;
object-fit: unset;
}
.price-member-contents__text-3 {
padding: 6px 15px 8px 30px;
margin-top: 20px;
font-size: 35px;
background-color: #f4ed70;
letter-spacing: -0.05em;
}
.price-member-contents__text-4 {
padding-left: 30px;
margin-top: 20px;
font-size: 21px;
color: #fff;
}
.price-member-contents-main-picture {
padding: 30px 25px 0 0;
}
.price-member-contents-main-picture img {
width: 304px;
height: 144px;
}
.price-member-contents__list {
padding: 0 25px;
margin-top: 25px;
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.price-member-contents__item-picture img {
width: 112px;
height: 82px;
}
.price-member-contents__item-text {
padding-top: 3px;
font-size: 13px;
line-height: 1.3;
color: #fff;
}
.price-member-contents__item-text--color {
color: #f4ed70;
}
.price__comment {
margin-top: 30px;
}
.price__comment-human {
text-align: center;
position: relative;
}
.price__comment-human img {
width: 791px;
height: 140px;
}
.price__comment-human-text-1 {
width: 120px;
padding: 3px 0 4px;
font-size: 16px;
border-radius: 24px;
border: 2px solid #005bab;
background-color: #e5eff7;
color: #005bab;
display: inline-block;
text-align: center;
position: absolute;
top: 7px;
left: 202px;
}
.price__comment-human-text-2 {
font-size: 20px;
line-height: 1.2;
text-align: left;
position: absolute;
top: 41px;
right: 53px;
}
.price__comment-human-text-2 span {
font-size: 17px;
letter-spacing: -0.01em;
}
@media screen and (min-width: 768px) {
.price-member {
padding: 1.667vw 4.688vw 0 4.688vw;
border-radius: 0.521vw;
}
.price-member__sub-title {
width: 17.292vw;
height: 5.313vw;
padding: 0 0.156vw 0.781vw 0;
font-size: 2.604vw;
}
.price-member__sub-title--size {
font-size: 2.083vw;
}
.price-member-heading {
padding-bottom: 1.406vw;
margin: 2.865vw 0 0;
}
.price-member-heading__title-flex {
gap: 0.781vw;
}
.price-member-heading__title-01,
.price-member-heading__title-02 {
width: 17.969vw;
padding: 0.417vw 0 0.469vw;
margin-top: -1.25vw;
font-size: 1.406vw;
border-radius: 1.25vw;
border: 0.104vw solid #005bab;
}
.price-member-heading__title-02 {
width: 13.854vw;
}
.price-member-heading__main {
margin-top: 1.406vw;
}
.price-member-heading__main-01 img {
width: 15.677vw;
height: 3.542vw;
}
.price-member-heading__main-02 {
font-size: 2.76vw;
margin-left: -1.042vw;
}
.price-member-heading__text {
margin-top: 1.406vw;
font-size: 1.667vw;
}
.price-member-example__text-01 {
margin-top: 3.125vw;
}
.price-member-example__text-01 img {
width: 22.135vw;
}
.price-member-example__text-02 {
margin-top: 1.302vw;
}
.price-member-example__text-02 img {
width: 26.667vw;
}
.price-member-example__text-03 {
margin-top: 1.302vw;
}
.price-member-example__text-03 img {
width: 29.063vw;
}
.price-member-contents {
width: 41.927vw;
padding-bottom: 0.781vw;
margin: 2.083vw auto 0;
border: 0.104vw solid #fff;
border-radius: 0.521vw;
}
.price-member-contents__text-flex {
padding-top: 1.042vw;
gap: 1.042vw;
}
.price-member-contents__text-1 {
width: 8.698vw;
padding: 0.573vw 0 0.625vw 1.563vw;
font-size: 1.354vw;
}
.price-member-contents__text-2 img {
width: 11.51vw;
}
.price-member-contents__text-3 {
padding: 0.313vw 0.781vw 0.417vw 1.563vw;
margin-top: 1.042vw;
font-size: 1.823vw;
}
.price-member-contents__text-4 {
padding-left: 1.563vw;
margin-top: 1.042vw;
font-size: 1.094vw;
}
.price-member-contents-main-picture {
padding: 1.563vw 1.302vw 0 0;
}
.price-member-contents-main-picture img {
width: 15.833vw;
height: 7.5vw;
}
.price-member-contents__list {
padding: 0 1.302vw;
margin-top: 1.302vw;
gap: 0.781vw;
}
.price-member-contents__item-picture img {
width: 5.833vw;
height: 4.271vw;
}
.price-member-contents__item-text {
padding-top: 0.156vw;
font-size: 0.677vw;
}
.price__comment {
margin-top: 1.563vw;
}
.price__comment-human img {
width: 41.198vw;
height: 7.292vw;
}
.price__comment-human-text-1 {
width: 6.25vw;
padding: 0.156vw 0 0.208vw;
font-size: 0.833vw;
border-radius: 1.25vw;
border: 0.104vw solid #005bab;
top: 0.365vw;
left: 10.521vw;
}
.price__comment-human-text-2 {
font-size: 1.042vw;
top: 2.135vw;
right: 2.76vw;
}
.price__comment-human-text-2 span {
font-size: 0.885vw;
}
}
@media screen and (max-width: 768px) {
.price-member {
padding: 30px 10px;
border-radius: 5px;
}
.price-member__sub-title {
width: 170px;
height: 55px;
padding: 0 3px 12px 0;
margin: 0 auto;
font-size: 22px;
}
.price-member__sub-title--size {
font-size: 18px;
letter-spacing: -0.1em;
}
.price-member-heading {
padding-bottom: 27px;
margin: 40px 0 0;
}
.price-member-heading__title-flex {
padding: 0 5px;
display: flex;
justify-content: center;
gap: 3px;
}
.price-member-heading__title-01,
.price-member-heading__title-02 {
width: 58%;
padding: 5px 0 7px;
margin-top: -20px;
font-size: 13px;
border-radius: 24px;
border: 2px solid #005bab;
background-color: #e5eff7;
letter-spacing: -0.04em;
}
.price-member-heading__title-02 {
width: 42%;
}
.price-member-heading__main {
padding-left: 20px;
margin-top: 25px;
}
.price-member-heading__main::before {
content: "";
display: inline-block;
width: 100%;
height: 50%;
background-color: #f4ed70;
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
}
.price-member-heading__main-01 img {
width: 160px;
height: 36px;
}
.price-member-heading__main-02 {
font-size: 24px;
margin-left: -10px;
}
.price-member-heading__text {
margin-top: 20px;
font-size: 16px;
}
.price-member-example {
text-align: center;
}
.price-member-example__text-01 {
margin-top: 30px;
}
.price-member-example__text-01 img {
width: 236px;
}
.price-member-example__text-02 {
margin-top: 15px;
}
.price-member-example__text-02 img {
width: 256px;
}
.price-member-example__text-03 {
margin-top: 15px;
}
.price-member-example__text-03 img {
width: 280px;
}
.price-member-contents {
width: 100%;
padding-bottom: 15px;
margin: 40px auto 0;
border: 2px solid #fff;
border-radius: 5px;
}
.price-member-contents-flex {
display: block;
}
.price-member-contents__text-flex {
padding-top: 20px;
display: block;
}
.price-member-contents__text-1 {
width: 110px;
height: 32px;
padding: 0 5px 2px 0;
font-size: 16px;
text-align: center;
}
.price-member-contents__text-2 {
text-align: center;
}
.price-member-contents__text-2 img {
width: 200px;
margin-top: 10px;
}
.price-member-contents__text-3 {
width: 100%;
height: auto;
padding: 5px;
margin-top: 20px;
font-size: 18px;
background-color: #f4ed70;
letter-spacing: -0.05em;
text-align: center;
}
.price-member-contents__text-4 {
padding-left: 0;
margin-top: 5px;
font-size: 15px;
text-align: center;
}
.price-member-contents-main-picture {
padding: 20px 0 0 0;
text-align: center;
}
.price-member-contents-main-picture img {
width: 270px;
height: 128px;
}
.price-member-contents__list {
padding: 0 10px;
margin-top: 30px;
justify-content: center;
gap: 10px;
}
.price-member-contents__item-picture img {
width: 130px;
height: 95px;
}
.price-member-contents__item-text {
padding-top: 3px;
font-size: 13px;
line-height: 1.3;
color: #fff;
}
.price-member-contents__item-text--color {
color: #f4ed70;
}
.price__comment {
margin-top: 30px;
}
.price__comment-human {
text-align: center;
position: relative;
}
.price__comment-human img {
width: 60px;
height: 68px;
position: absolute;
bottom: 0;
left: 2px;
}
.price__comment-human-text-1 {
width: 110px;
padding: 3px 0 4px;
font-size: 14px;
border-radius: 24px;
border: 2px solid #005bab;
background-color: #e5eff7;
color: #005bab;
display: inline-block;
text-align: center;
position: absolute;
top: -16px;
left: 10px;
}
.price__comment-human-text-2 {
font-size: 16px;
padding: 20px 10px 20px 60px;
line-height: 1.2;
text-align: left;
position: unset;
background-color: #fff;
}
.price__comment-human-text-2 span {
font-size: 14px;
letter-spacing: -0.01em;
}
}
@media screen and (max-width: 375px) {
.price-member {
padding: 8vw 2.667vw;
border-radius: 1.333vw;
}
.price-member__sub-title {
width: 45.333vw;
height: 14.667vw;
padding: 0 0.8vw 3.2vw 0;
font-size: 5.867vw;
}
.price-member__sub-title--size {
font-size: 4.8vw;
letter-spacing: -0.1em;
}
.price-member-heading {
padding-bottom: 7.2vw;
margin: 10.667vw 0 0;
}
.price-member-heading__title-flex {
padding: 0 1.333vw;
gap: 0.8vw;
}
.price-member-heading__title-01,
.price-member-heading__title-02 {
padding: 1.333vw 0 1.867vw;
margin-top: -5.333vw;
font-size: 3.467vw;
border-radius: 6.4vw;
border: 2px solid #005bab;
}
.price-member-heading__main {
padding-left: 5.333vw;
margin-top: 6.667vw;
}
.price-member-heading__main-01 img {
width: 42.667vw;
height: 9.6vw;
}
.price-member-heading__main-02 {
font-size: 6.4vw;
margin-left: -2.667vw;
}
.price-member-heading__text {
margin-top: 5.333vw;
font-size: 4.267vw;
}
.price-member-example__text-01 {
margin-top: 8vw;
}
.price-member-example__text-01 img {
width: 62.933vw;
}
.price-member-example__text-02 {
margin-top: 4vw;
}
.price-member-example__text-02 img {
width: 68.267vw;
}
.price-member-example__text-03 {
margin-top: 4vw;
}
.price-member-example__text-03 img {
width: 74.667vw;
}
.price-member-contents {
padding-bottom: 4vw;
margin: 10.667vw auto 0;
border: 0.533vw solid #fff;
border-radius: 1.333vw;
}
.price-member-contents__text-flex {
padding-top: 5.333vw;
}
.price-member-contents__text-1 {
width: 29.333vw;
height: 8.533vw;
padding: 0 1.333vw 0.533vw 0;
font-size: 4.267vw;
}
.price-member-contents__text-2 img {
width: 53.333vw;
margin-top: 2.667vw;
}
.price-member-contents__text-3 {
width: 100%;
padding: 1.333vw;
margin-top: 5.333vw;
font-size: 4.8vw;
}
.price-member-contents__text-4 {
margin-top: 1.333vw;
font-size: 4vw;
}
.price-member-contents-main-picture {
padding: 5.333vw 0 0 0;
}
.price-member-contents-main-picture img {
width: 72vw;
height: 34.133vw;
}
.price-member-contents__list {
padding: 0 2.667vw;
margin-top: 8vw;
gap: 2.667vw;
}
.price-member-contents__item-picture img {
width: 34.667vw;
height: 25.333vw;
}
.price-member-contents__item-text {
padding-top: 0.8vw;
font-size: 3.467vw;
}
.price__comment {
margin-top: 8vw;
}
.price__comment-human img {
width: 16vw;
height: 18.133vw;
left: 0.533vw;
}
.price__comment-human-text-1 {
width: 29.333vw;
padding: 0.8vw 0 1.067vw;
font-size: 3.733vw;
border-radius: 6.4vw;
border: 0.533vw solid #005bab;
top: -4.267vw;
left: 2.667vw;
}
.price__comment-human-text-2 {
font-size: 4.267vw;
padding: 5.333vw 2.667vw 5.333vw 16vw;
}
.price__comment-human-text-2 span {
font-size: 3.733vw;
}
}
/***************************
plan
***************************/
.plan__top {
position: relative;
}
.plan__top::before {
content: "";
display: inline-block;
background-color: #009c84;
width: 100%;
height: 3px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
z-index: 1;
}
.plan__top-wrap {
width: 845px;
height: 91px;
margin: 70px auto 0;
background-image: url(../images/reason/price-plan/plan/top-bg.svg);
background-repeat: no-repeat;
background-size: cover;
text-align: center;
align-content: center;
position: relative;
z-index: 1;
}
.plan__top img {
width: 738px;
height: auto;
object-fit: unset;
}
.plan__container {
filter: drop-shadow(0 0 7px rgba(0, 0, 0, 0.3));
}
.plan__title {
padding: 16px 0;
margin-top: 50px;
font-size: 34px;
color: #fff;
background-color: #4f8232;
text-align: center;
}
.plan__inner {
padding: 40px;
background-color: #eaf0e6;
}
.plan__heading-flex {
display: flex;
}
.plan__heading-picture {
width: 50%;
}
.plan__heading-picture img {
width: 411px;
height: 242px;
}
.plan__heading-wrap {
width: 50%;
margin-right: -15px;
}
.plan__heading-text-flex {
display: flex;
align-items: center;
gap: 5px;
text-wrap-mode: nowrap;
}
.plan__heading-text-1 {
font-size: 42px;
}
.plan__heading-text-wrap {
display: flex;
align-items: center;
gap: 5px;
}
.plan__heading-text-2,
.plan__heading-text-3 {
height: 29px;
padding: 0 5px 2px 5px;
font-size: 19px;
border-radius: 5px;
color: rgba(0, 0, 0, .6);
background-color: #fff;
border: 2px solid rgba(0, 0, 0, .6);
align-content: center;
}
.plan__heading-text-4 {
margin-top: 20px;
}
.plan__heading-text-4 img {
width: 418px;
height: auto;
object-fit: unset;
}
.plan__heading-flow {
margin-top: 25px;
display: flex;
gap: 20px;
}
.plan__heading--flow-1 {
width: 79px;
height: 79px;
font-size: 20px;
border-radius: 50%;
color: #fff;
background-color: #4f8232;
text-align: center;
align-content: center;
position: relative;
}
.plan__heading--flow-1:nth-of-type(3) {
background-color: #b9cdad;
}
.plan__heading--flow-1::before {
content: "";
background-image: url(../images/reason/price-plan/plan/heading-arrow.svg);
background-repeat: no-repeat;
background-size: cover;
width: 17px;
height: 14px;
position: absolute;
top: 50%;
right: -16px;
transform: translateY(-50%);
}
.plan__heading--flow-1:nth-of-type(5)::before {
display: none;
}
.plan__contents {
margin-top: 40px;
}
.plan__contents-title {
font-size: 39px;
padding: 12px 0 14px;
color: #fff;
background-color: #666666;
text-align: center;
position: relative;
}
.plan__contents-inner {
padding: 28px 28px 40px;
border: 2px solid #666;
border-top: none;
background-color: #fff;
}
.plan__contents-item {
margin-top: 30px;
display: flex;
flex-wrap: nowrap;
}
.plan__contents-item:nth-of-type(1) {
margin-top: 0;
}
.plan__item-title {
padding: 0 10px;
font-size: 26px;
border: 2px solid #666;
color: #666;
text-align: center;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
.plan__item-wrap {
margin: 0.1% 0;
background-color: #e6e6e6;
}
.plan__item-flex {
margin: 0 20px 0 25px;
display: flex;
gap: 20px;
}
.plan__item-flex:nth-of-type(2),
.plan__item-flex:nth-of-type(3) {
border-top: 1px solid #666;
}
.plan__item-picture {
padding: 20px 0 15px;
}
.plan__item-picture.picture-none {
width: 178px;
padding: 0;
margin: 20px 0 15px;
border-radius: 5px;
border: 2px solid #4f8232;
text-align: center;
align-content: center;
}
.picture-none__text {
font-size: 18px;
color: #4f8232;
}
.plan__item-picture img {
width: 178px;
height: 105px;
}
.plan__item-text {
font-size: 18px;
line-height: 1.2;
padding-top: 5px;
}
.plan__item--color {
color: #4f8232;
}
.plan__item--space {
letter-spacing: -0.1em;
}
.plan__contents-text {
width: 525px;
margin: 40px auto 0;
line-height: 1.3;
text-align: left;
text-wrap-mode: nowrap;
color: #666;
}
.plan__comment {
width: 100%;
padding: 24px 0 24px 170px;
margin-top: 60px;
font-size: 21px;
line-height: 1.3;
border-radius: 10px;
background-color: rgba(37, 90, 151, .1);
border: 3px solid #255a9a;
position: relative;
letter-spacing: -0.03em;
filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0.3));
}
.plan__comment::before {
content: "";
background-image: url(../images/reason/price-plan/plan/plan-human.svg);
background-repeat: no-repeat;
background-size: cover;
width: 123px;
height: 154px;
position: absolute;
bottom: 0;
left: 35px;
}
@media screen and (min-width: 768px) {
.plan__top::before {
height: 0.156vw;
}
.plan__top-wrap {
width: 44.5vw;
height: 4.74vw;
margin: 3.646vw auto 0;
}
.plan__top img {
width: 38.438vw;
}
.plan__container {
filter: drop-shadow(0 0 0.365vw rgba(0, 0, 0, 0.3));
}
.plan__title {
padding: 0.833vw 0;
margin-top: 2.604vw;
font-size: 1.771vw;
}
.plan__inner {
padding: 2.083vw;
}
.plan__heading-picture img {
width: 21.406vw;
height: 12.604vw;
}
.plan__heading-wrap {
margin-right: -0.781vw;
}
.plan__heading-text-flex {
gap: 0.26vw;
}
.plan__heading-text-1 {
font-size: 2.188vw;
}
.plan__heading-text-2,
.plan__heading-text-3 {
height: 1.51vw;
padding: 0 0.26vw 0.104vw 0.26vw;
font-size: 0.99vw;
border-radius: 0.26vw;
border: 0.104vw solid rgba(0, 0, 0, .6);
}
.plan__heading-text-4 {
margin-top: 1.042vw;
}
.plan__heading-text-4 img {
width: 21.771vw;
}
.plan__heading-flow {
margin-top: 1.302vw;
gap: 1.042vw;
}
.plan__heading--flow-1 {
width: 4.115vw;
height: 4.115vw;
font-size: 1.042vw;
}
.plan__heading--flow-1::before {
width: 0.885vw;
height: 0.729vw;
right: -0.833vw;
}
.plan__contents {
margin-top: 2.083vw;
}
.plan__contents-title {
font-size: 2.031vw;
padding: 0.625vw 0 0.729vw;
}
.plan__contents-inner {
padding: 1.458vw 1.458vw 2.083vw;
border: 0.104vw solid #666;
}
.plan__contents-item {
margin-top: 1.563vw;
}
.plan__item-title {
padding: 0 0.521vw;
font-size: 1.354vw;
border: 0.104vw solid #666;
}
.plan__item-flex {
margin: 0 1.042vw 0 1.302vw;
gap: 1.042vw;
}
.plan__heading-text-wrap {
gap: 1.042vw;
}
.plan__item-flex:nth-of-type(2),
.plan__item-flex:nth-of-type(3) {
border-top: 0.052vw solid #666;
}
.plan__item-picture {
padding: 1.042vw 0 0.781vw;
}
.plan__item-picture.picture-none {
width: 9.271vw;
padding: 0;
margin: 1.042vw 0 0.781vw;
border-radius: 0.26vw;
border: 0.104vw solid #4f8232;
}
.picture-none__text {
font-size: 0.938vw;
}
.plan__item-picture img {
width: 9.271vw;
height: 5.469vw;
}
.plan__item-text {
font-size: 0.938vw;
padding-top: 0.26vw;
}
.plan__contents-text {
width: 27.344vw;
margin: 2.083vw auto 0;
}
.plan__contents-text-1 {
font-size: 0.833vw;
}
.plan__comment {
width: 100%;
padding: 1.25vw 0 1.25vw 8.854vw;
margin-top: 3.125vw;
font-size: 1.094vw;
border-radius: 0.521vw;
border: 0.156vw solid #255a9a;
}
.plan__comment::before {
width: 6.406vw;
height: 8.021vw;
left: 1.823vw;
}
}
@media screen and (max-width: 768px) {
.plan__top {
position: relative;
}
.plan__top::before {
content: "";
display: inline-block;
background-color: #009c84;
width: 100%;
height: 3px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
z-index: 1;
}
.plan__top-wrap {
width: 285px;
height: 61px;
padding-top: 0;
margin: 50px auto 0;
background-image: url(../images/reason/price-plan/plan/top-bg-sp.svg);
}
.plan__top img {
width: 240px;
}
.plan__container {
filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3));
}
.plan__title {
padding: 13px 0;
margin-top: 30px;
font-size: 20px;
}
.plan__inner {
padding: 20px 10px;
}
.plan__heading-flex {
display: block;
}
.plan__heading-picture {
width: 100%;
}
.plan__heading-picture img {
width: 294px;
height: 174px;
}
.plan__heading-wrap {
width: 100%;
margin-right: 0;
}
.plan__heading-text-flex {
margin-top: 20px;
gap: 5px;
}
.plan__heading-text-1 {
font-size: 25px;
letter-spacing: -0.05em;
}
.plan__heading-text-2,
.plan__heading-text-3 {
height: 20px;
padding: 1px 3px;
font-size: 11px;
border-radius: 2px;
color: rgba(0, 0, 0, .6);
background-color: #fff;
border: 1px solid rgba(0, 0, 0, .6);
align-content: center;
}
.plan__heading-text-4 {
margin-top: 15px;
text-align: center;
}
.plan__heading-text-4 img {
width: 234px;
}
.plan__heading-flow {
margin-top: 25px;
display: flex;
gap: 10px;
}
.plan__heading--flow-1 {
width: 50px;
height: 50px;
font-size: 12px;
}
.plan__heading--flow-1:nth-of-type(3) {
background-color: #b9cdad;
}
.plan__heading--flow-1::before {
width: 9px;
height: 7px;
position: absolute;
top: 50%;
right: -17%;
transform: translateY(-50%);
}
.plan__contents {
margin-top: 30px;
}
.plan__contents-title {
font-size: 18px;
padding: 12px 0;
}
.plan__contents-inner {
padding: 20px 10px 25px;
border: 2px solid #666;
}
.plan__contents-item {
margin: 20px 0;
display: block;
gap: 8px;
}
.plan__contents-item:nth-of-type(1) {
margin-top: 0;
}
.plan__item-title {
padding: 7px 0;
font-size: 16px;
border: 2px solid #666;
-ms-writing-mode: unset;
writing-mode: unset;
}
.plan__item-wrap {
margin: 0.1% 0;
background-color: #e6e6e6;
}
.plan__item-flex {
padding: 15px 0;
margin: 0 10px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px 8px;
}
.plan__item-flex:nth-of-type(2),
.plan__item-flex:nth-of-type(3) {
border-top: 1px solid #666;
}
.plan__item-picture {
width: 100%;
padding: 0;
}
.plan__item-picture.picture-none {
width: 100%;
padding: 0;
margin: 0;
border-radius: 3px;
border: 2px solid #4f8232;
text-align: center;
align-content: center;
}
.picture-none__text {
font-size: 13px;
}
.plan__item-picture img {
width: 121px;
height: 74px;
}
.plan__item-text {
font-size: 11px;
line-height: 1.2;
padding-top: 5px;
}
.plan__item--color {
color: #4f8232;
}
.plan__item--space {
letter-spacing: -0.1em;
}
.plan__contents-text {
width: 100%;
margin: 40px auto 0;
line-height: 1.3;
text-align: left;
text-wrap-mode: unset;
color: #666;
}
.plan__contents-text-1 {
font-size: 12px;
}
.plan__comment {
width: 100%;
padding: 10px 10px 10px 60px;
margin-top: 20px;
font-size: 12px;
border-radius: 5px;
border: 2px solid #255a9a;
}
.plan__comment::before {
width: 55px;
height: 66px;
position: absolute;
bottom: 0;
left: 0px;
}
}
@media screen and (max-width: 375px) {
.plan__top::before {
height: 0.8vw;
}
.plan__top-wrap {
width: 76vw;
height: 16.267vw;
margin: 13.333vw auto 0;
}
.plan__top img {
width: 64vw;
}
.plan__container {
filter: drop-shadow(0 0 0.8vw rgba(0, 0, 0, 0.3));
}
.plan__title {
padding: 3.467vw 0;
margin-top: 8vw;
font-size: 5.333vw;
}
.plan__inner {
padding: 5.333vw 2.667vw;
}
.plan__heading-picture img {
width: 78.4vw;
height: 46.4vw;
}
.plan__heading-text-flex {
margin-top: 5.333vw;
gap: 1.333vw;
}
.plan__heading-text-1 {
font-size: 6.667vw;
letter-spacing: -0.05em;
}
.plan__heading-text-2,
.plan__heading-text-3 {
height: 5.333vw;
padding: 0.267vw 0.8vw;
font-size: 2.933vw;
border-radius: 0.533vw;
border: 0.267vw solid rgba(0, 0, 0, .6);
}
.plan__heading-text-4 {
margin-top: 4vw;
}
.plan__heading-text-4 img {
width: 62.4vw;
}
.plan__heading-flow {
margin-top: 6.667vw;
gap: 2.667vw;
}
.plan__heading--flow-1 {
width: 13.333vw;
height: 13.333vw;
font-size: 3.2vw;
}
.plan__heading--flow-1::before {
width: 2.4vw;
height: 1.867vw;
}
.plan__contents {
margin-top: 8vw;
}
.plan__contents-title {
font-size: 4.8vw;
padding: 3.2vw 0;
}
.plan__contents-inner {
padding: 5.333vw 2.667vw 6.667vw;
border: 0.533vw solid #666;
}
.plan__contents-item {
margin: 5.333vw 0;
gap: 2.133vw;
}
.plan__item-title {
padding: 1.867vw 0;
font-size: 4.267vw;
border: 0.533vw solid #666;
}
.plan__item-wrap {
margin: 0.1% 0;
background-color: #e6e6e6;
}
.plan__item-flex {
padding: 4vw 0;
margin: 0 2.667vw;
gap: 4vw 2.133vw;
}
.plan__item-flex:nth-of-type(2),
.plan__item-flex:nth-of-type(3) {
border-top: 0.267vw solid #666;
}
.plan__item-picture.picture-none {
border-radius: 0.8vw;
border: 0.533vw solid #4f8232;
}
.picture-none__text {
font-size: 3.467vw;
}
.plan__item-picture img {
width: 32.267vw;
height: 19.733vw;
}
.plan__item-text {
font-size: 2.933vw;
padding-top: 1.333vw;
}
.plan__contents-text {
width: 100%;
margin: 10.667vw auto 0;
}
.plan__contents-text-1 {
font-size: 3.2vw;
}
.plan__comment {
width: 100%;
padding: 2.667vw 2.667vw 2.667vw 16vw;
margin-top: 5.333vw;
font-size: 3.2vw;
border-radius: 1.333vw;
border: 0.533vw solid #255a9a;
}
.plan__comment::before {
width: 14.667vw;
height: 17.6vw;
}
}
/***************************
plan--family
***************************/
.plan--family .plan__inner {
background-color: #e0eef1;
}
.plan--family .plan__title {
background-color: #00728e;
}
.plan--family .plan__heading-text-4 img {
width: 415px;
}
.plan--family .plan__heading--flow-1 {
background-color: #00728e;
}
.plan--family .plan__item-picture.picture-none {
border: 2px solid #00728e;
}
.plan--family .picture-none__text {
color: #00728e;
}
.plan--family .plan__item--color {
color: #00728e;
}
@media screen and (min-width: 768px) {
.plan--family .plan__heading-text-4 img {
width: 21.615vw;
height: 4.271vw;
}
.plan--family .plan__item-picture.picture-none {
border: 0.104vw solid #00728e;
}
}
@media screen and (max-width: 768px) {
.plan--family .plan__heading-text-4 img {
width: 225px;
}
.plan--family .plan__item-picture.picture-none {
border: 2px solid #00728e;
}
}
@media screen and (max-width: 375px) {
.plan--family .plan__heading-text-4 img {
width: 60vw;
}
.plan--family .plan__item-picture.picture-none {
border: 0.533vw solid #00728e;
}
}
/***************************
plan--small
***************************/
.plan--small .plan__inner {
background-color: #f0f1eb;
}
.plan--small .plan__title {
background-color: #868956;
}
.plan--small .plan__heading-text-4 img {
width: 419px;
}
.plan--small .plan__heading--flow-1 {
background-color: #868956;
}
.plan--small .plan__heading--flow-1:nth-of-type(3),
.plan--small .plan__heading--flow-1:nth-of-type(4) {
background-color: #cfd0bb;
}
.plan--small .plan__item-picture.picture-none {
border: 2px solid #868956;
}
.plan--small .picture-none__text {
color: #868956;
}
.plan--small .plan__item--color {
color: #868956;
}
@media screen and (min-width: 768px) {
.plan--small .plan__heading-text-4 img {
width: 21.823vw;
height: 4.271vw;
}
.plan--small .plan__item-picture.picture-none {
border: 0.104vw solid #868956;
}
}
@media screen and (max-width: 768px) {
.plan--small .plan__heading-text-4 img {
width: 230px;
}
.plan--small .plan__item-picture.picture-none {
border: 2px solid #868956;
}
}
@media screen and (max-width: 375px) {
.plan--small .plan__heading-text-4 img {
width: 61.333vw;
}
.plan--small .plan__item-picture.picture-none {
border: 0.533vw solid #868956;
}
}
/****************************************************
relax
****************************************************/
.relax {
padding: 40px 0 0;
margin-top: 81px;
border-radius: 10px;
background-color: #fff;
position: relative;
filter: drop-shadow(0 0 7px rgba(0, 0, 0, 0.3));
}
.relax__list {
margin-top: 55px;
display: flex;
flex-wrap: wrap;
gap: 50px;
}
.relax__item {
width: 483px;
}
.relax__item-picture img {
width: 483px;
height: 244px;
}
.relax__item-title {
padding-left: 15px;
margin-top: 20px;
font-size: 33px;
border-left: 7px solid #005bab;
color: #005bab;
}
.relax__item-text {
margin-top: 13px;
font-size: 24px;
line-height: 1.3;
font-weight: 500;
}
.relax__item:nth-of-type(6) .relax__item-text {
padding: 15px 0 0 8px;
}
.relax__item-wrap {
padding: 30px 25px 35px;
border: 3px solid #005bab;
border-radius: 10px;
background-color: rgba(37, 90, 151, .1);
}
.relax__item-text-2 {
padding-bottom: 30px;
font-size: 31px;
border-bottom: 3px solid #005bab;
color: #005bab;
text-align: center;
}
.relax__item-text-3 {
padding-top: 5px;
color: #666;
text-align: center;
}
@media screen and (min-width: 768px) {
.relax {
padding: 2.083vw 0 0;
margin-top: 4.219vw;
border-radius: 0.521vw;
filter: drop-shadow(0 0 0.365vw rgba(0, 0, 0, 0.3));
}
.relax__list {
margin-top: 2.865vw;
gap: 2.604vw;
}
.relax__item {
width: 25.156vw;
}
.relax__item-picture img {
width: 25.156vw;
height: 12.708vw;
}
.relax__item-title {
padding-left: 0.781vw;
margin-top: 1.042vw;
font-size: 1.719vw;
border-left: 0.365vw solid #005bab;
}
.relax__item-text {
margin-top: 0.677vw;
font-size: 1.25vw;
}
.relax__item:nth-of-type(6) .relax__item-text {
padding: 0.781vw 0 0 0.417vw;
}
.relax__item-wrap {
padding: 1.563vw 1.302vw 1.823vw;
border: 0.156vw solid #005bab;
border-radius: 0.521vw;
}
.relax__item-text-2 {
padding-bottom: 1.563vw;
font-size: 1.615vw;
border-bottom: 0.156vw solid #005bab;
}
.relax__item-text-3 {
padding-top: 0.26vw;
font-size: 0.833vw;
}
}
@media screen and (max-width: 768px) {
.relax {
padding: 40px 0 0;
margin-top: 60px;
border-radius: 10px;
filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3));
}
.relax .reason__read {
font-size: 15px;
line-height: 1.7;
}
.relax__list {
margin-top: 40px;
flex-flow: column;
flex-wrap: nowrap;
gap: 30px;
}
.relax__item {
width: 100%;
}
.relax__item-picture img {
width: 315px;
height: 149px;
}
.relax__item-title {
padding-left: 8px;
margin-top: 10px;
font-size: 18px;
border-left: 3px solid #005bab;
}
.relax__item-text {
padding: 10px 0 0 8px;
margin-top: 0;
font-size: 16px;
}
.relax__item:nth-of-type(6) .relax__item-text {
padding: 15px 0 0 8px;
}
.relax__item-wrap {
padding: 20px 15px 25px;
border: 3px solid #005bab;
border-radius: 5px;
}
.relax__item-text-2 {
padding-bottom: 20px;
font-size: 20px;
border-bottom: 2px solid #005bab;
}
.relax__item-text-3 {
padding-top: 5px;
font-size: 12px;
text-align: left;
}
}
@media screen and (max-width: 375px) {
.relax {
padding: 10.667vw 0 0;
margin-top: 16vw;
border-radius: 2.667vw;
filter: drop-shadow(0 0 0.8vw rgba(0, 0, 0, 0.3));
}
.relax .reason__read {
font-size: 4vw;
}
.relax__list {
margin-top: 10.667vw;
gap: 8vw;
}
.relax__item-picture img {
width: 84vw;
height: 39.733vw;
}
.relax__item-title {
padding-left: 2.133vw;
margin-top: 2.667vw;
font-size: 4.8vw;
border-left: 0.8vw solid #005bab;
}
.relax__item-text {
padding: 2.667vw 0 0 2.133vw;
font-size: 4.267vw;
}
.relax__item:nth-of-type(6) .relax__item-text {
padding: 4vw 0 0 2.133vw;
}
.relax__item-wrap {
padding: 5.333vw 4vw 6.667vw;
border: 0.8vw solid #005bab;
border-radius: 1.333vw;
}
.relax__item-text-2 {
padding-bottom: 5.333vw;
font-size: 5.333vw;
border-bottom: 0.533vw solid #005bab;
}
.relax__item-text-3 {
padding-top: 1.333vw;
font-size: 3.2vw;
}
}
/****************************************************
voice
****************************************************/
.voice {
padding: 40px 0 0;
margin-top: 81px;
border-radius: 10px;
background-color: #fff;
position: relative;
filter: drop-shadow(0 0 7px rgba(0, 0, 0, 0.3));
}
.voice .reason__sub-title {
line-height: 1.2;
}
.voice__picture {
margin-top: 45px;
}
.voice__picture img {
width: 1020px;
height: 481px;
}
.voice__sub-title {
text-align: center;
position: relative;
}
.voice__sub-title-wrap {
width: 412px;
margin: 50px auto 0;
font-size: 49px;
color: #005bab;
background-color: #fff;
position: relative;
z-index: 3;
}
.voice__sub-title::before,
.voice__sub-title::after {
content: "";
width: 100%;
height: 2px;
background-color: #005bab;
position: absolute;
top: 37%;
left: 0;
transform: translateY(-50%);
}
.voice__sub-title::after {
top: 63%;
}
.voice__block {
padding: 45px 35px 50px;
margin-top: 40px;
border-radius: 10px;
border: 3px solid #005bab;
background-color: rgb(0, 180, 255, .07);
}
.voice__flex {
display: flex;
align-items: center;
gap: 25px;
}
.voice__label img {
width: 145px;
height: 165px;
}
.voice__text-1 {
font-size: 31px;
letter-spacing: -0.09em;
color: #005bab;
display: inline-block;
position: relative;
}
.voice__text-1::before {
content: "";
background-color: #f4ed70;
width: 100%;
height: 16px;
position: absolute;
bottom: -3px;
left: 0;
z-index: -1;
}
.voice__text-2 {
margin-top: 20px;
font-size: 24px;
line-height: 1.3;
letter-spacing: -0.03em;
}
.voice__message {
margin-top: 25px;
}
.voice__text-2 span {
display: unset;
}
@media screen and (min-width: 768px) {
.voice {
padding: 2.083vw 0 0;
margin-top: 4.219vw;
border-radius: 0.521vw;
filter: drop-shadow(0 0 0.365vw rgba(0, 0, 0, 0.3));
}
.voice__picture {
margin-top: 2.344vw;
}
.voice__picture img {
width: 53.125vw;
height: 25.052vw;
}
.voice__sub-title-wrap {
width: 21.458vw;
margin: 2.604vw auto 0;
font-size: 2.552vw;
}
.voice__sub-title::before,
.voice__sub-title::after {
height: 2px;
}
.voice__block {
padding: 2.344vw 1.823vw 2.604vw;
margin-top: 2.083vw;
border-radius: 0.521vw;
border: 0.156vw solid #005bab;
}
.voice__flex {
gap: 1.302vw;
}
.voice__label img {
width: 7.552vw;
height: 8.594vw;
}
.voice__text-1 {
font-size: 1.615vw;
}
.voice__text-1::before {
height: 0.833vw;
bottom: -0.156vw;
}
.voice__text-2 {
margin-top: 1.042vw;
font-size: 1.25vw;
}
.voice__message {
margin-top: 1.302vw;
}
}
@media screen and (max-width: 768px) {
.voice {
padding: 40px 0 0;
margin-top: 60px;
border-radius: 5px;
filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3));
}
.voice__picture {
margin-top: 20px;
}
.voice__picture img {
width: 314px;
height: 148px;
}
.voice .reason__sub-title {
line-height: 1.2;
text-align: left;
padding-left: 6px;
position: relative;
}
.voice__sub-title-wrap {
width: 220px;
margin: 50px auto 0;
font-size: 26px;
}
.voice__sub-title::before,
.voice__sub-title::after {
height: 1px;
top: 40%;
}
.voice__sub-title::after {
top: 60%;
}
.voice__block {
padding: 20px 10px;
margin-top: 20px;
border-radius: 5px;
border: 2px solid #005bab;
}
.voice__flex {
display: flex;
align-items: center;
gap: 10px;
position: relative;
}
.voice__label {
position: absolute;
top: -8px;
left: 4px;
}
.voice__label img {
width: 65px;
height: auto;
}
.voice__text-1 {
padding: 10px 0 0 83px;
font-size: 16px;
line-height: 1.3;
letter-spacing: -0.09em;
color: #005bab;
display: inline-block;
position: relative;
}
.voice__text-1::before,
.voice__text-1::after,
.voice__block:nth-of-type(2) .voice__text-1::before,
.voice__block:nth-of-type(2) .voice__text-1::after {
content: "";
background-color: #f4ed70;
height: 4px;
position: absolute;
bottom: 0;
left: 28%;
z-index: -1;
}
.voice__text-1::before {
width: 70%;
}
.voice__text-1::after {
width: 60%;
bottom: 22px;
}
.voice__block:nth-of-type(2) .voice__text-1::before {
width: 69%;
left: 29%;
}
.voice__block:nth-of-type(2) .voice__text-1::after {
width: 34%;
bottom: 22px;
left: 29%;
}
.voice__text-2 {
margin-top: 28px;
font-size: 14px;
}
.voice__message {
margin-top: 20px;
}
.voice__message img {
width: 290px;
height: 78px;
}
.voice__text-2 span {
display: block;
}
}
@media screen and (max-width: 375px) {
.voice {
padding: 10.667vw 0 0;
margin-top: 16vw;
border-radius: 1.333vw;
filter: drop-shadow(0 0 0.8vw rgba(0, 0, 0, 0.3));
}
.voice__picture {
margin-top: 5.333vw;
}
.voice__picture img {
width: 83.733vw;
height: 39.467vw;
}
.voice__sub-title-wrap {
width: 58.667vw;
margin: 13.333vw auto 0;
font-size: 6.933vw;
}
.voice__sub-title::before,
.voice__sub-title::after {
height: 0.267vw;
}
.voice__block {
padding: 5.333vw 2.667vw;
margin-top: 5.333vw;
border-radius: 1.333vw;
border: 0.533vw solid #005bab;
}
.voice__flex {
gap: 2.667vw;
}
.voice__label {
top: -2.133vw;
left: 1.067vw;
}
.voice__label img {
width: 17.333vw;
}
.voice__text-1 {
padding: 2.667vw 0 0 22.133vw;
font-size: 4.267vw;
}
.voice__text-1::before,
.voice__text-1::after,
.voice__block:nth-of-type(2) .voice__text-1::before,
.voice__block:nth-of-type(2) .voice__text-1::after {
height: 1.067vw;
}
.voice__text-1::after {
bottom: 5.867vw;
}
.voice__block:nth-of-type(2) .voice__text-1::after {
bottom: 5.867vw;
}
.voice__text-2 {
margin-top: 7.467vw;
font-size: 3.733vw;
}
.voice__message {
margin-top: 5.333vw;
}
.voice__message img {
width: 77.333vw;
height: 20.8vw;
}
}
/****************************************************
access
****************************************************/
.access {
padding-bottom: 85px;
}
.access__title {
font-size: 63px;
padding: 60px 0px;
letter-spacing: 0.06em;
color: #fff;
background: linear-gradient(90deg, #41a7d7 0%, #79c0e0 50%, #41a7d7 100%);
text-align: center;
}
.access__read {
margin-top: 55px;
font-size: 49px;
line-height: 1.3;
text-align: center;
}
.access__list {
margin-top: 60px;
display: flex;
flex-wrap: wrap;
gap: 35px;
}
.access__item {
background-color: #f2f2f2;
}
.access__item-title {
padding: 12px 0 12px 15px;
background-color: #005bab;
}
.access__item-furigana {
font-size: 18px;
color: rgba(255, 255, 255, .6)
}
.access__item-kanji {
font-size: 30px;
line-height: 1.3;
color: #fff;
}
.access__item-picture img {
width: 373px;
height: 208px;
}
.access__item:nth-of-type(3) .access__item-picture img,
.access__item:nth-of-type(5) .access__item-picture img {
object-position: top;
}
.access__item:nth-of-type(4) .access__item-picture img,
.access__item:nth-of-type(7) .access__item-picture img {
object-position: bottom;
}
.access__item-address {
margin: 18px 18px 0;
font-size: 25px;
line-height: 1.1;
}
.access-item-link {
width: 216px;
padding: 9px 0 10px;
margin: 15px 18px 20px;
font-size: 23px;
border-radius: 21px;
color: #fff;
background-color: #e2797d;
border: 1px solid #e2797d;
text-align: center;
transition: .3s;
}
@media screen and (min-width: 768px) {
.access {
padding-bottom: 4.427vw;
}
.access__title {
font-size: 3.281vw;
padding: 3.125vw 0px;
letter-spacing: 0.06em;
}
.access__read {
margin-top: 2.865vw;
font-size: 2.552vw;
}
.access__list {
margin-top: 3.125vw;
gap: 1.823vw;
}
.access__item-title {
padding: 0.625vw 0 0.625vw 0.781vw;
}
.access__item-furigana {
font-size: 0.938vw;
}
.access__item-kanji {
font-size: 1.563vw;
}
.access__item-picture img {
width: 19.427vw;
height: 10.833vw;
}
.access__item-address {
margin: 0.938vw 0.938vw 0;
font-size: 1.302vw;
}
.access-item-link {
width: 11.25vw;
padding: 0.469vw 0 0.521vw;
margin: 0.781vw 0.938vw 1.042vw;
font-size: 1.198vw;
border-radius: 1.094vw;
}
.access-item-link:hover {
background-color: #f2f2f2;
color: #e2797d;
}
}
@media screen and (max-width: 768px) {
.access {
padding-bottom: 40px;
}
.access .inner {
padding: 15px 25px;
}
.access__title {
font-size: 30px;
padding: 25px 0px;
}
.access__read {
margin-top: 20px;
font-size: 20px;
}
.access__list {
margin-top: 30px;
display: flex;
flex-flow: column;
flex-wrap: nowrap;
gap: 20px;
}
.access__item-title {
padding: 8px 0 8px 10px;
}
.access__item-furigana {
font-size: 12px;
}
.access__item-kanji {
font-size: 18px;
line-height: 1.5;
}
.access__item-picture img {
width: 325px;
height: 181px;
}
.access__item-address {
margin: 15px 10px 0;
font-size: 16px;
}
.access-item-link {
width: 145px;
padding: 7px 0;
margin: 10px 10px 20px;
font-size: 14px;
border-radius: 21px;
}
}
@media screen and (max-width: 375px) {
.access {
padding-bottom: 10.667vw;
}
.access .inner {
padding: 4vw 6.667vw;
}
.access__title {
font-size: 8vw;
padding: 6.667vw 0px;
}
.access__read {
margin-top: 5.333vw;
font-size: 5.333vw;
}
.access__list {
margin-top: 8vw;
gap: 5.333vw;
}
.access__item-title {
padding: 2.133vw 0 2.133vw 2.667vw;
}
.access__item-furigana {
font-size: 3.2vw;
}
.access__item-kanji {
font-size: 4.8vw;
}
.access__item-picture img {
width: 86.667vw;
height: 48.267vw;
}
.access__item-address {
margin: 4vw 2.667vw 0;
font-size: 4.267vw;
}
.access-item-link {
width: 38.667vw;
padding: 1.867vw 0;
margin: 2.667vw 2.667vw 5.333vw;
font-size: 3.733vw;
border-radius: 5.6vw;
}
}
/****************************************************
advice
****************************************************/
.advice {
padding-bottom: 80px;
}
.advice__title {
font-size: 63px;
padding: 60px 0px;
letter-spacing: 0.06em;
color: #fff;
background: linear-gradient(90deg, #41a7d7 0%, #79c0e0 50%, #41a7d7 100%);
text-align: center;
}
.advice__flex {
margin-top: 70px;
display: flex;
justify-content: space-between;
}
.advice__text-1 {
padding: 10px 20px;
font-size: 39px;
background-color: #e0f1f8;
display: inline-block;
position: relative;
}
.advice__text-1:nth-of-type(2) {
margin-top: 15px;
}
.advice__text-1::before,
.advice__text-1::after {
content: "";
display: inline-block;
background-image: url(../images/advice/title-decoration.svg);
background-repeat: no-repeat;
background-size: cover;
width: 26px;
height: 22px;
position: absolute;
}
.advice__text-1::before {
top: 0;
left: -4px;
transform: scale(-1, 1) rotate(-90deg);
}
.advice__text-1::after {
bottom: -2px;
right: -2px;
}
.advice__text-2 {
margin: 30px 0 35px;
font-size: 37px;
}
.advice__text-2 span {
color: #005bab;
position: relative;
}
.advice__text-2 span::before {
content: "";
display: inline-block;
background-color: #f4ed70;
width: 100%;
height: 20px;
position: absolute;
bottom: -3px;
left: 0;
z-index: -1;
}
.advice__text-3 {
width: 710px;
font-size: 24px;
line-height: 1.4;
}
.advice__picture img {
width: 454px;
height: auto;
}
.advice-btn {
margin-top: 70px;
display: flex;
justify-content: center;
gap: 25px;
}
.advice-mail {
width: 504px;
padding: 0;
filter: drop-shadow(5px 5px 1px rgba(0, 0, 0, 0.25));
background-image: url(../images/advice/advice-mail-bg.svg);
background-repeat: no-repeat;
background-size: cover;
position: relative;
border-radius: 14px;
border: 4px solid #fff;
display: flex;
align-items: center;
justify-content: center;
}
.advice-mail::after {
content: "";
display: inline-block;
background-image: url(../images/advice/arrow.svg);
background-repeat: no-repeat;
background-size: cover;
width: 16px;
height: 24px;
position: absolute;
top: 50%;
right: 26px;
transform: translateY(-50%);
}
.advice-mail__text {
margin-left: 30px;
font-size: 41px;
color: #fff;
position: relative;
}
.advice-mail__text::before {
content: "";
display: inline-block;
background-image: url(../images/advice/mail.svg);
background-repeat: no-repeat;
background-size: cover;
width: 52px;
height: 39px;
position: absolute;
top: 50%;
left: -60px;
transform: translateY(-50%);
}
.advice-mail__message {
width: 62px;
padding: 4px 0 5px;
margin-left: 5px;
font-size: 25px;
border-radius: 4px;
letter-spacing: -0.04em;
color: #005bab;
background-color: #fff;
text-align: center;
position: relative;
}
.advice-tel {
width: 520px;
padding: 25px 0 20px;
filter: drop-shadow(5px 5px 1px rgba(0, 0, 0, 0.25));
background-image: url(../images/advice/advice-tel-bg.svg);
background-repeat: no-repeat;
background-size: cover;
border-radius: 14px;
border: 4px solid #fff;
text-align: center;
position: relative;
}
.advice-tel::after {
content: "";
display: inline-block;
background-image: url(../images/advice/arrow.svg);
background-repeat: no-repeat;
background-size: cover;
width: 16px;
height: 24px;
position: absolute;
top: 50%;
right: 26px;
transform: translateY(-50%);
}
.advice-tel__note {
position: absolute;
top: -13px;
left: 50%;
transform: translateX(-50%);
}
.advice-tel__note img {
width: 390px;
height: 34px;
}
.advice-tel__number {
margin-left: 15px;
font-size: 60px;
letter-spacing: 0.04em;
color: #fff;
position: relative;
display: inline-block;
}
.advice-tel__number::before {
content: "";
display: inline-block;
background-image: url(../images/advice/tel.svg);
background-repeat: no-repeat;
background-size: cover;
width: 38px;
height: 42px;
position: absolute;
top: 68%;
left: -40px;
transform: translateY(-50%);
}
.advice-tel__message {
margin-top: 10px;
text-align: center;
}
.advice-tel__message img {
width: 200px;
height: 20px;
}
@media screen and (min-width: 768px) {
.advice {
padding-bottom: 4.167vw;
}
.advice__title {
font-size: 3.281vw;
padding: 3.125vw 0px;
letter-spacing: 0.06em;
}
.advice__flex {
margin-top: 3.646vw;
}
.advice__text-1 {
padding: 0.521vw 1.042vw;
font-size: 2.031vw;
}
.advice__text-1:nth-of-type(2) {
margin-top: 0.781vw;
}
.advice__text-1::before,
.advice__text-1::after {
width: 1.354vw;
height: 1.146vw;
}
.advice__text-1::before {
left: -0.208vw;
}
.advice__text-1::after {
bottom: -0.104vw;
right: -0.104vw;
}
.advice__text-2 {
margin: 1.563vw 0 1.823vw;
font-size: 1.927vw;
}
.advice__text-2 span::before {
height: 1.042vw;
bottom: -0.156vw;
}
.advice__text-3 {
width: 36.979vw;
font-size: 1.25vw;
}
.advice__picture img {
width: 23.646vw;
}
.advice-btn {
margin-top: 3.646vw;
gap: 1.302vw;
}
.advice-mail {
width: 26.25vw;
filter: drop-shadow(0.26vw 0.26vw 0.052vw rgba(0, 0, 0, 0.25));
border-radius: 0.729vw;
border: 0.208vw solid #fff;
}
.advice-mail::after {
width: 0.833vw;
height: 1.25vw;
right: 1.354vw;
}
.advice-mail__text {
margin-left: 1.563vw;
font-size: 2.135vw;
}
.advice-mail__text::before {
width: 2.708vw;
height: 2.031vw;
left: -3.125vw;
}
.advice-mail__message {
width: 3.229vw;
padding: 0.208vw 0 0.26vw;
margin-left: 0.26vw;
font-size: 1.302vw;
border-radius: 0.208vw;
}
.advice-tel {
width: 27.083vw;
padding: 1.302vw 0 1.042vw;
filter: drop-shadow(0.26vw 0.26vw 0.052vw rgba(0, 0, 0, 0.25));
border-radius: 0.729vw;
border: 0.208vw solid #fff;
}
.advice-tel::after {
width: 0.833vw;
height: 1.25vw;
right: 1.354vw;
}
.advice-tel__note {
top: -0.677vw;
}
.advice-tel__note img {
width: 20.313vw;
height: 1.771vw;
}
.advice-tel__number {
margin-left: 0.781vw;
font-size: 3.125vw;
letter-spacing: 0.04em;
}
.advice-tel__number::before {
width: 1.979vw;
height: 2.188vw;
left: -2.083vw;
}
.advice-tel__message {
margin-top: 0.521vw;
}
.advice-tel__message img {
width: 10.417vw;
height: 1.042vw;
}
}
@media screen and (max-width: 768px) {
.advice {
padding-bottom: 40px;
}
.advice__title {
font-size: 30px;
padding: 25px 0px;
}
.advice__flex {
margin-top: 20px;
display: flex;
flex-flow: column;
}
.advice__text-1 {
padding: 8px 15px;
margin-left: 30px;
font-size: 18px;
background-color: #e0f1f8;
display: inline-block;
position: relative;
}
.advice__text-1:nth-of-type(2) {
margin-top: 10px;
}
.advice__text-1::before,
.advice__text-1::after {
width: 16px;
height: 13px;
}
.advice__text-1::before {
top: 0;
left: -3px;
}
.advice__text-1::after {
bottom: -2px;
right: -2px;
}
.advice__text-2 {
margin: 10px 0 25px 30px;
font-size: 22px;
}
.advice__text-2 span::before {
height: 8px;
bottom: -3px;
}
.advice__text-3 {
width: 100%;
font-size: 16px;
line-height: 1.3;
}
.advice__picture {
margin-top: 15px;
}
.advice__picture img {
width: 344px;
height: 287px;
}
.advice-btn {
margin-top: 20px;
display: flex;
justify-content: center;
flex-flow: column;
gap: 15px;
}
.advice-mail {
width: 301px;
height: 81px;
padding: 0;
margin: 0 auto;
filter: drop-shadow(3px 3px 1px rgba(0, 0, 0, 0.25));
border-radius: 6px;
border: 3px solid #fff;
}
.advice-mail::after {
width: 12px;
height: 19px;
position: absolute;
top: 50%;
right: 15px;
}
.advice-mail__text {
padding-bottom: 2px;
margin-left: 0;
font-size: 22px;
}
.advice-mail__text::before {
width: 20px;
height: 15px;
top: 50%;
left: -26px;
}
.advice-mail__message {
width: 40px;
padding: 2px 0;
margin-left: 5px;
font-size: 14px;
border-radius: 4px;
}
.advice-tel {
width: 300px;
height: 78px;
padding: 16px 0 0px;
margin: 0 auto;
filter: drop-shadow(3px 3px 1px rgba(0, 0, 0, 0.25));
border-radius: 6px;
border: 3px solid #fff;
}
.advice-tel::after {
width: 12px;
height: 19px;
position: absolute;
top: 50%;
right: 15px;
}
.advice-tel__note {
top: -8px;
}
.advice-tel__note img {
width: 220px;
height: 18px;
}
.advice-tel__number {
margin-left: 15px;
font-size: 26px;
}
.advice-tel__number::before {
width: 16px;
height: 18px;
position: absolute;
top: 55%;
left: -19px;
}
.advice-tel__message {
margin-top: 7px;
}
.advice-tel__message img {
width: 160px;
height: 16px;
}
}
@media screen and (max-width: 375px) {
.advice {
padding-bottom: 10.667vw;
}
.advice__title {
font-size: 8vw;
padding: 6.667vw 0px;
}
.advice__flex {
margin-top: 5.333vw;
}
.advice__text-1 {
padding: 2.133vw 4vw;
margin-left: 8vw;
font-size: 4.8vw;
}
.advice__text-1:nth-of-type(2) {
margin-top: 2.667vw;
}
.advice__text-1::before,
.advice__text-1::after {
width: 4.267vw;
height: 3.467vw;
}
.advice__text-1::before {
left: -0.8vw;
}
.advice__text-1::after {
bottom: -0.533vw;
right: -0.533vw;
}
.advice__text-2 {
margin: 2.667vw 0 6.667vw 8vw;
font-size: 5.867vw;
line-height: 1.1;
}
.advice__text-2 span::before {
height: 2.133vw;
bottom: -0.8vw;
}
.advice__text-3 {
font-size: 4.267vw;
}
.advice__picture {
margin-top: 4vw;
}
.advice__picture img {
width: 91.733vw;
height: 76.533vw;
}
.advice-btn {
margin-top: 5.333vw;
gap: 4vw;
}
.advice-mail {
width: 80.267vw;
height: 21.6vw;
filter: drop-shadow(0.8vw 0.8vw 0.267vw rgba(0, 0, 0, 0.25));
border-radius: 1.6vw;
border: 0.8vw solid #fff;
}
.advice-mail::after {
width: 3.2vw;
height: 5.067vw;
right: 4vw;
}
.advice-mail__text {
padding-bottom: 0.533vw;
font-size: 5.867vw;
}
.advice-mail__text::before {
width: 5.333vw;
height: 4vw;
left: -6.933vw;
}
.advice-mail__message {
width: 10.667vw;
padding: 0.533vw 0;
margin-left: 1.333vw;
font-size: 3.733vw;
border-radius: 1.067vw;
}
.advice-tel {
width: 80vw;
height: 20.8vw;
padding: 4.267vw 0 0px;
filter: drop-shadow(0.8vw 0.8vw 0.267vw rgba(0, 0, 0, 0.25));
border-radius: 1.6vw;
border: 0.8vw solid #fff;
}
.advice-tel::after {
width: 3.2vw;
height: 5.067vw;
right: 4vw;
}
.advice-tel__note {
top: -2.133vw;
}
.advice-tel__note img {
width: 58.667vw;
height: 4.8vw;
}
.advice-tel__number {
margin-left: 4vw;
font-size: 6.933vw;
}
.advice-tel__number::before {
width: 4.267vw;
height: 4.8vw;
left: -5.067vw;
}
.advice-tel__message {
margin-top: 1.867vw;
}
.advice-tel__message img {
width: 42.667vw;
height: 4.267vw;
}
}
/****************************************************
qa
****************************************************/
.qa {
padding-bottom: 80px;
}
.qa__title {
font-size: 63px;
padding: 60px 0px;
letter-spacing: 0.06em;
color: #fff;
background: linear-gradient(90deg, #41a7d7 0%, #79c0e0 50%, #41a7d7 100%);
text-align: center;
}
.qa__list {
margin-top: 75px;
}
.qa__item {
padding: 30px 40px;
margin-top: 40px;
border: 2px solid #005bab;
border-radius: 10px;
background-color: #f2fcff;
}
.qa__question {
display: flex;
align-items: center;
gap: 10px;
position: relative;
cursor: pointer;
}
.qa__question::before {
content: "";
background-image: url(../images/qa/arrow.svg);
background-repeat: no-repeat;
background-size: cover;
width: 37px;
height: 21px;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
transition: .3s;
}
.del.qa__question::before {
transform: translateY(-50%) rotate(-180deg);
}
.qa__item:nth-of-type(1) .qa__question {
align-items: flex-start;
}
.question--label,
.answer--label {
width: 54px;
height: 54px;
padding-bottom: 5px;
font-size: 34px;
border-radius: 50%;
color: #fff;
text-align: center;
align-content: center;
}
.question--label {
background-color: #005bab;
}
.question--text {
font-size: 36px;
line-height: 1.2;
color: #005bab;
flex: 1;
letter-spacing: -0.03em;
}
.qa__answer {
padding: 40px;
margin-top: 30px;
display: flex;
align-items: flex-start;
gap: 20px;
background-color: #fbf8c6;
}
.answer--label {
background-color: #d53f45;
padding-bottom: 7px;
}
.answer--text {
font-size: 24px;
flex: 1;
line-height: 1.3;
}
@media screen and (min-width: 768px) {
.qa {
padding-bottom: 4.167vw;
}
.qa__title {
font-size: 3.281vw;
padding: 3.125vw 0px;
letter-spacing: 0.06em;
}
.qa__list {
margin-top: 3.906vw;
}
.qa__item {
padding: 1.563vw 2.083vw;
margin-top: 2.083vw;
border: 0.104vw solid #005bab;
border-radius: 0.521vw;
}
.qa__question {
gap: 0.521vw;
}
.qa__question::before {
width: 1.927vw;
height: 1.094vw;
}
.question--label,
.answer--label {
width: 2.813vw;
height: 2.813vw;
padding-bottom: 0.26vw;
font-size: 1.771vw;
}
.question--text {
font-size: 1.875vw;
}
.qa__answer {
padding: 2.083vw;
margin-top: 1.563vw;
gap: 1.042vw;
}
.answer--label {
padding-bottom: 0.365vw;
}
.answer--text {
font-size: 1.25vw;
}
}
@media screen and (max-width: 768px) {
.qa {
padding-bottom: 40px;
}
.qa__title {
font-size: 30px;
padding: 25px 0px;
}
.qa__list {
margin-top: 0;
}
.qa__item {
padding: 20px 10px;
margin-top: 20px;
border: 2px solid #005bab;
border-radius: 5px;
}
.qa__question {
display: flex;
align-items: center;
gap: 5px;
position: relative;
cursor: pointer;
}
.qa__question::before {
width: 17px;
height: 10px;
}
.del.qa__question::before {
transform: translateY(-50%) rotate(-180deg);
}
.qa__item:nth-of-type(1) .qa__question {
align-items: flex-start;
}
.question--label,
.answer--label {
width: 30px;
height: 30px;
padding-bottom: 4px;
font-size: 18px;
}
.question--label {
background-color: #005bab;
}
.question--text {
padding-right: 25px;
font-size: 16px;
line-height: 1.2;
color: #005bab;
flex: 1;
letter-spacing: -0.03em;
}
.qa__answer {
padding: 20px 10px;
margin-top: 20px;
gap: 5px;
}
.answer--label {
padding-bottom: 7px;
}
.answer--text {
font-size: 16px;
}
}
@media screen and (max-width: 375px) {
.qa {
padding-bottom: 10.667vw;
}
.qa__title {
font-size: 8vw;
padding: 6.667vw 0px;
}
.qa__item {
padding: 5.333vw 2.667vw;
margin-top: 5.333vw;
border: 0.533vw solid #005bab;
border-radius: 1.333vw;
}
.qa__question {
gap: 1.333vw;
}
.qa__question::before {
width: 4.533vw;
height: 2.667vw;
}
.question--label,
.answer--label {
width: 8vw;
height: 8vw;
padding-bottom: 1.067vw;
font-size: 4.8vw;
}
.question--text {
padding-right: 6.667vw;
font-size: 4.267vw;
}
.qa__answer {
padding: 5.333vw 2.667vw;
margin-top: 5.333vw;
gap: 1.333vw;
}
.answer--label {
padding-bottom: 1.867vw;
}
.answer--text {
font-size: 4.267vw;
}
}
/****************************************************
contact
****************************************************/
.contact__title {
font-size: 63px;
padding: 60px 0px;
letter-spacing: 0.06em;
color: #fff;
background: linear-gradient(90deg, #41a7d7 0%, #79c0e0 50%, #41a7d7 100%);
text-align: center;
}
.contact__container {
background-color: #e5eff7;
}
.contact__list {
padding: 80px 0 85px;
}
.contact__item {
margin-top: 65px;
}
.contact__item:nth-of-type(1) {
margin-top: 0;
}
.contact__item-label {
padding-bottom: 15px;
font-size: 29px;
display: flex;
align-items: center;
}
.contact__item-label--size {
font-size: 23px;
}
.required,
.any {
width: 54px;
padding: 1px 0 4px;
margin: 3px 0 0 10px;
font-size: 19px;
border-radius: 2px;
color: #fff;
background-color: #d53f45;
text-align: center;
}
.choice,
.check {
font-size: 23px;
display: inline-block;
}
.contact__item-check {
display: flex;
justify-content: space-between;
}
.contact__item-check label {
padding-bottom: 15px;
display: flex;
align-items: center;
}
.contact__item-input {
background-color: #fff;
}
.contact__item-input input {
width: 100%;
padding: 7px 15px;
font-size: 24px;
border: 1px solid #b3b3b3;
border-radius: 2px;
}
.any {
background-color: #666;
}
.contact__item-radio {
display: inline-flex;
flex-flow: column;
}
.contact__item-radio label {
padding-bottom: 15px;
display: flex;
align-items: center;
}
.contact__item:nth-of-type(8) .contact__item-radio {
display: flex;
flex-flow: unset;
align-items: center;
gap: 20px;
}
.contact__item-input textarea {
width: 100%;
height: 364px;
padding: 10px 15px;
font-size: 24px;
border: 1px solid #b3b3b3;
border-radius: 2px;
}
.privacy {
padding-top: 80px;
background-color: #fff;
}
.privacy__text {
font-size: 29px;
text-align: center;
}
.privacy__check {
text-align: center;
}
.privacy__wrap {
margin-top: 40px;
font-size: 32px;
text-align: center;
}
.privacy__wrap a {
font-size: 32px;
color: #d53f45;
}
.contact__btn {
text-align: center;
}
.contact__btn-wrap {
margin: 70px 0 75px;
display: inline-block;
position: relative;
}
.contact__btn-wrap::before {
content: "";
display: inline-block;
background-image: url(../images/contact/arrow.svg);
background-repeat: no-repeat;
background-size: cover;
width: 16px;
height: 24px;
position: absolute;
top: 50%;
right: 26px;
transform: translateY(-50%);
}
.contact__btn-wrap input {
width: 461px;
padding: 26px 0 30px;
font-size: 36px;
border-radius: 2px;
color: #fff;
background-color: #005bab;
border: 1px solid #005bab;
transition: .3s;
}
::placeholder {
font-size: 24px;
font-weight: 500;
color: #cccccc;
}
/* ラジオ、チェックボタン変更 */
.choice,
.check {
position: relative;
cursor: pointer;
padding-left: 28px;
margin-left: 13px;
display: inline-block;
}
.check::before,
.check::after {
content: "";
display: inline-block;
position: absolute;
transform: translateY(-50%);
top: 50%;
}
.check::before {
background-color: #fff;
border: 1px solid #b3b3b3;
width: 26px;
height: 26px;
left: -2px;
}
.check::after {
top: 50%;
background-image: url(../images/contact/check.svg);
background-repeat: no-repeat;
background-size: cover;
width: 18px;
height: 16px;
left: 2px;
opacity: 0;
}
.contact__item-check label:first-of-type .check,
.contact__item-privacy label .check {
margin-left: 0;
}
.choice::before,
.choice::after {
content: "";
display: inline-block;
border-radius: 50%;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.choice::before {
background-color: #fff;
border: 1px solid #b3b3b3;
border-radius: 50%;
width: 26px;
height: 26px;
left: -2px;
}
.choice::after {
background-color: #d53f45;
border-radius: 50%;
width: 16px;
height: 16px;
left: 3px;
opacity: 0;
}
input:checked+.choice::after,
input:checked+.check::after {
opacity: 1;
}
.contact__item:nth-of-type(7) .contact__item-radio label .choice,
.contact__item-radio label:first-of-type .choice {
margin-left: 0;
}
.choice-hidden {
position: absolute;
white-space: nowrap;
border: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
overflow: hidden;
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
}
.error {
padding-top: 5px;
font-size: 23px;
font-weight: 500;
color: red;
}
@media screen and (min-width: 768px) {
.contact__title {
font-size: 3.281vw;
padding: 3.125vw 0px;
}
.contact__list {
padding: 4.167vw 0 4.427vw;
}
.contact__item {
margin-top: 3.385vw;
}
.contact__item-label {
padding-bottom: 0.781vw;
font-size: 1.51vw;
}
.contact__item-label--size {
font-size: 1.198vw;
}
.required,
.any {
width: 2.813vw;
padding: 0.08vw 0 0.208vw;
margin: 0.156vw 0 0 0.521vw;
font-size: 0.99vw;
border-radius: 0.104vw;
}
.choice,
.check {
font-size: 1.198vw;
}
.contact__item-check label {
padding-bottom: 0.781vw;
}
.contact__item-input input {
padding: 0.365vw 0.781vw;
font-size: 1.25vw;
border: 0.052vw solid #b3b3b3;
border-radius: 0.104vw;
}
.contact__item-radio label {
padding-bottom: 0.781vw;
}
.contact__item:nth-of-type(8) .contact__item-radio {
gap: 1.042vw;
}
.contact__item-input textarea {
height: 18.958vw;
padding: 0.521vw 0.781vw;
font-size: 1.25vw;
border: 0.052vw solid #b3b3b3;
border-radius: 0.104vw;
}
.privacy {
padding-top: 4.167vw;
}
.privacy__text {
font-size: 1.51vw;
}
.privacy__wrap {
margin-top: 2.083vw;
font-size: 1.667vw;
}
.privacy__wrap a {
font-size: 1.667vw;
}
.contact__btn-wrap {
margin: 3.646vw 0 3.906vw;
}
.contact__btn-wrap::before {
width: 0.833vw;
height: 1.25vw;
right: 1.354vw;
}
.contact__btn-wrap input {
width: 24.01vw;
padding: 1.354vw 0 1.563vw;
font-size: 1.875vw;
border-radius: 0.104vw;
}
.contact__btn-wrap input:hover {
color: #005bab;
background-color: #fff;
}
::placeholder {
font-size: 1.25vw;
}
/* ラジオ、チェックボタン変更 */
.choice,
.check {
padding-left: 1.458vw;
margin-left: 0.677vw;
}
.check::before {
border: 0.052vw solid #b3b3b3;
width: 1.354vw;
height: 1.354vw;
left: -0.104vw;
}
.check::after {
width: 0.938vw;
height: 0.833vw;
left: 0.104vw;
}
.choice::before {
border: 0.052vw solid #b3b3b3;
width: 1.354vw;
height: 1.354vw;
left: -0.104vw;
}
.choice::after {
width: 0.833vw;
height: 0.833vw;
left: 0.157vw;
}
.choice-hidden {
height: 0.052vw;
width: 0.052vw;
margin: -0.052vw;
}
.error {
padding-top: 0.26vw;
font-size: 1.198vw;
}
}
@media screen and (max-width: 768px) {
.contact__title {
font-size: 30px;
padding: 25px 0px;
}
.contact__list {
padding: 30px 10px;
}
.contact__item {
margin-top: 20px;
}
.contact__item:nth-of-type(1) {
margin-top: 0;
}
.contact__item-label {
padding-bottom: 8px;
font-size: 18px;
display: flex;
}
.contact__item-label--size {
font-size: 16px;
}
.required,
.any {
width: 34px;
padding: 1px 0 2px;
margin: 3px 0 0 6px;
font-size: 12px;
}
.choice,
.check {
font-size: 16px;
display: inline-block;
}
.contact__item-check {
display: flex;
justify-content: space-between;
flex-flow: column;
}
.contact__item-check label {
padding-bottom: 10px;
display: flex;
align-items: center;
line-height: 1.1;
}
.contact__item-input {
background-color: #fff;
}
.contact__item-input input {
width: 100%;
padding: 4px 10px 5px 10px;
font-size: 16px;
border: 1px solid #b3b3b3;
border-radius: 2px;
}
.any {
background-color: #666;
}
.contact__item-radio {
display: inline-flex;
flex-flow: column;
}
.contact__item-radio label {
padding-bottom: 10px;
display: flex;
align-items: center;
line-height: 1.1;
}
.contact__item:nth-of-type(8) .contact__item-radio {
display: block;
}
.contact__item-input textarea {
width: 100%;
height: 200px;
padding: 4px 10px 5px 10px;
font-size: 16px;
border: 1px solid #b3b3b3;
border-radius: 2px;
}
.privacy {
padding-top: 30px;
background-color: #fff;
}
.privacy__text {
font-size: 16px;
line-height: 1.3;
text-align: center;
}
.privacy__wrap {
margin-top: 10px;
font-size: 16px;
}
.privacy__wrap a {
font-size: 18px;
color: #d53f45;
}
.contact__btn {
text-align: center;
}
.contact__btn-wrap {
margin: 30px 0;
display: inline-block;
position: relative;
}
.contact__btn-wrap::before {
width: 8px;
height: 12px;
right: 17px;
}
.contact__btn-wrap input {
width: 250px;
padding: 15px 0;
font-size: 16px;
}
::placeholder {
font-size: 14px;
}
/* ラジオ、チェックボタン変更 */
.check {
padding-left: 18px;
margin-left: 0;
}
.choice {
padding-left: 22px;
margin-left: 0;
}
.check::before,
.check::after {
content: "";
display: inline-block;
position: absolute;
transform: translateY(-50%);
top: 50%;
}
.check::before {
background-color: #fff;
border: 1px solid #b3b3b3;
width: 15px;
height: 15px;
left: -2px;
}
.check::after {
top: 50%;
background-image: url(../images/contact/check.svg);
background-repeat: no-repeat;
background-size: cover;
width: 11px;
height: 10px;
left: 0px;
opacity: 0;
}
.contact__item-check label:first-of-type .check,
.contact__item-privacy label .check {
margin-left: 0;
}
.choice::before,
.choice::after {
content: "";
display: inline-block;
border-radius: 50%;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.choice::before {
border: 1px solid #b3b3b3;
width: 16px;
height: 16px;
left: 0px;
}
.choice::after {
width: 10px;
height: 10px;
left: 3px;
}
input:checked+.choice::after,
input:checked+.check::after {
opacity: 1;
}
.contact__item:nth-of-type(7) .contact__item-radio label .choice,
.contact__item-radio label:first-of-type .choice {
margin-left: 0;
}
.choice-hidden {
position: absolute;
white-space: nowrap;
border: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
overflow: hidden;
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
}
.error {
padding-top: 5px;
font-size: 14px;
font-weight: 500;
color: red;
}
}
@media screen and (max-width: 375px) {
.contact__title {
font-size: 8vw;
padding: 6.667vw 0px;
}
.contact__list {
padding: 8vw 2.667vw;
}
.contact__item {
margin-top: 5.333vw;
}
.contact__item-label {
padding-bottom: 2.133vw;
font-size: 4.8vw;
}
.contact__item-label--size {
font-size: 4.267vw;
}
.required,
.any {
width: 9.067vw;
padding: 0.267vw 0 0.533vw;
margin: 0.8vw 0 0 1.6vw;
font-size: 3.2vw;
}
.choice,
.check {
font-size: 4.267vw;
}
.contact__item-check label {
padding-bottom: 2.667vw;
}
.contact__item-input input {
padding: 1.067vw 2.667vw 1.333vw 2.667vw;
font-size: 4.267vw;
border: 0.267vw solid #b3b3b3;
border-radius: 0.533vw;
}
.contact__item-radio label {
padding-bottom: 2.667vw;
}
.contact__item-input textarea {
height: 53.333vw;
padding: 1.067vw 2.667vw 1.333vw 2.667vw;
font-size: 4.267vw;
border: 0.267vw solid #b3b3b3;
border-radius: 0.533vw;
}
.privacy {
padding-top: 8vw;
}
.privacy__text {
font-size: 4.267vw;
}
.privacy__wrap {
margin-top: 2.667vw;
font-size: 4.267vw;
}
.privacy__wrap a {
font-size: 4.8vw;
}
.contact__btn-wrap {
margin: 8vw 0;
}
.contact__btn-wrap::before {
width: 2.133vw;
height: 3.2vw;
right: 4.533vw;
}
.contact__btn-wrap input {
width: 66.667vw;
padding: 4vw 0;
font-size: 4.267vw;
}
::placeholder {
font-size: 3.733vw;
}
/* ラジオ、チェックボタン変更 */
.check {
padding-left: 4.8vw;
}
.choice {
padding-left: 5.867vw;
}
.check::before {
border: 0.267vw solid #b3b3b3;
width: 4vw;
height: 4vw;
left: -0.533vw;
}
.check::after {
width: 2.933vw;
height: 2.667vw;
}
.choice::before {
border: 0.267vw solid #b3b3b3;
width: 4.267vw;
height: 4.267vw;
}
.choice::after {
width: 2.667vw;
height: 2.667vw;
left: 0.8vw;
}
.choice-hidden {
height: 0.267vw;
width: 0.267vw;
margin: -0.267vw;
}
.error {
padding-top: 1.333vw;
font-size: 4.267vw;
}
}
/****************************************************
footer
****************************************************/
footer {
padding: 70px 0 200px;
background-color: #e6e6e6;
}
.footer__logo img {
width: 357px;
height: 61px;
}
.footer__flex {
margin-top: 55px;
display: flex;
font-size: 18px;
}
.footer__left {
width: 440px;
}
.footer__wrap {
margin-bottom: 13px;
display: flex;
align-items: center;
}
.footer__label {
width: 112px;
padding: 5px 0 7px;
border: 1px solid #666;
display: inline-block;
text-align: center;
}
.footer__text {
padding-left: 15px;
line-height: 1.2;
}
.footer__right {
flex: 1;
}
.footer__right .footer__wrap:nth-of-type(2) {
align-items: flex-start;
}
.copyright {
padding: 80px 0 0;
font-size: 18px;
text-align: center;
color: #666;
}
@media screen and (min-width: 768px) {
footer {
padding: 3.646vw 0 10.417vw;
}
.footer__logo img {
width: 18.594vw;
height: 3.177vw;
}
.footer__flex {
margin-top: 2.865vw;
font-size: 0.938vw;
}
.footer__left {
width: 22.917vw;
}
.footer__wrap {
margin-bottom: 0.677vw;
}
.footer__label {
width: 5.833vw;
padding: 0.26vw 0 0.365vw;
border: 0.052vw solid #666;
}
.footer__text {
padding-left: 0.781vw;
}
.copyright {
padding: 4.167vw 0 0;
font-size: 0.938vw;
text-align: center;
}
}
@media screen and (max-width: 768px) {
footer {
padding: 40px 0 110px;
background-color: #e6e6e6;
}
.footer__logo img {
width: 200px;
height: 34px;
}
.footer__flex {
margin-top: 30px;
display: block;
font-size: 16px;
}
.footer__left {
width: 100%;
}
.footer__wrap {
margin-bottom: 10px;
display: flex;
gap: 10px;
}
.footer__label {
width: 85px;
padding: 2px 0 3px;
border: 1px solid #666;
font-size: 14px;
}
.footer__text {
font-size: 16px;
padding: 5px 0 0;
flex: 1;
font-size: 14px;
}
.footer__right {
width: 100%;
}
.footer__right .footer__wrap:nth-of-type(2) {
align-items: flex-start;
}
.copyright {
padding: 30px 0 0px;
font-size: 14px;
}
}
@media screen and (max-width: 375px) {
footer {
padding: 10.667vw 0 29.333vw;
background-color: #e6e6e6;
}
.footer__logo img {
width: 53.333vw;
height: 9.067vw;
}
.footer__flex {
margin-top: 8vw;
font-size: 4.267vw;
}
.footer__wrap {
margin-bottom: 2.667vw;
gap: 2.667vw;
}
.footer__label {
width: 22.667vw;
padding: 0.533vw 0 0.8vw;
border: 0.267vw solid #666;
font-size: 3.733vw;
}
.footer__text {
font-size: 4.267vw;
padding: 1.333vw 0 0;
font-size: 3.733vw;
}
.copyright {
padding: 8vw 0 0px;
font-size: 3.733vw;
}
}