.p-planContainer { width: calc(100% - var(--sticky-width)); padding-right: var(--spc-16); @media (max-width: 1280px) { width: 100%; padding-right: 0; }} .p-planHero { padding-bottom: 0;} .p-planHero-content + .p-planHero-bottom { margin-top: var(--spc-12);} .p-planHero-bottom { height: 26rem; background-size: cover; background-position: center; background-repeat: no-repeat; @media (max-width: 1024px) { height: 16rem; }} .p-planHero__desc { max-width: 64rem; & + .p-planHero__target { margin-top: var(--spc-6); }} .p-planHero__target { width: fit-content; background-color: var(--c-blue-100); border-radius: var(--spc-2); & + .p-planHero__btns { margin-top: var(--spc-4); }} .p-planHero__target-head { display: flex; align-items: center; gap: var(--spc-2); padding: var(--spc-2); color: var(--c-blue-900); span { padding: .25em .75em; border-radius: var(--spc-1); background-color: var(--c-white); color: var(--c-blue-900); }} .p-planHero__target-content { padding: var(--spc-4) var(--spc-6); border-top: solid .1rem var(--c-white); color: var(--c-blue-900)} .p-planHero__btns { display: flex; flex-direction: column; gap: var(--spc-4);} .p-planSection { padding-block: var(--spc-12); @media (max-width: 1024px) { padding-block: var(--spc-8); } &.--compare { padding-block: var(--spc-8); .p-planSection-inner { @media (max-width: 1024px) { margin-inline: calc(var(--container-padding-sp) * -1); } } .p-planSection-content { @media (max-width: 1024px) { margin-inline: calc(var(--container-padding-sp) * -1); overflow-x: scroll; } } }} .p-planSection-inner { padding: var(--spc-8) var(--container-padding-sp); border-radius: var(--spc-8); background-color: var(--c-blue-100);} .p-planSection-head { padding-bottom: var(--spc-2); border-bottom: solid .1rem var(--c-blue-900);} .p-planSection-content { padding-top: var(--spc-8);} .p-planSection__title { color: var(--c-blue-900);} .p-planFeature { display: flex; flex-direction: column; gap: var(--spc-4); max-width: 64rem; & + .p-planFeature { margin-top: var(--spc-10); padding-top: var(--spc-8); border-top: solid .1rem var(--c-gray-300); }} .p-planFeature__title,.p-planFeature__desc p { color: var(--c-blue-900);} .p-planFeature__title { grid-column: 1 / 3;} .p-planFeature__thumb { grid-column: 2 / 3; grid-row: 2 / 5;} .p-planFeature__labels { display: flex; flex-wrap: wrap; gap: var(--spc-2); & > span { padding: .5em 1em; border: solid .1rem var(--c-blue-900); color: var(--c-blue-900); }} .p-planFlow { display: flex; width: fit-content; padding: var(--spc-4); border-radius: var(--spc-4); background-color: var(--c-blue-100); @media (max-width: 768px) { flex-direction: column; }} .p-planFlow__item { position: relative; padding: var(--spc-4) var(--spc-6); background-color: var(--c-white); writing-mode: vertical-rl; text-align: center; color: var(--c-blue-900); @media (max-width: 768px) { writing-mode: horizontal-tb; } &::before { content: ''; position: absolute; inset: 0 auto 0 0; width: .8rem; height: 2rem; margin: auto; background-color: var(--c-blue-100); clip-path: polygon(0 0, 100% 50%, 0 100%); @media (max-width: 768px) { inset: 0 0 auto 0; width: 2rem; height: .8rem; clip-path: polygon(0 0, 100% 0, 50% 100%); } } &:first-of-type { border-radius: var(--spc-2) 0 0 var(--spc-2); @media (max-width: 768px) { border-radius: var(--spc-2) var(--spc-2) 0 0; } &::before { display: none; } } &:last-of-type { border-radius: 0 var(--spc-2) var(--spc-2) 0; @media (max-width: 768px) { border-radius: 0 0 var(--spc-2) var(--spc-2); } &:after { content: ''; position: absolute; inset: var(--spc-2); border-radius: var(--spc-1); background-color: var(--c-blue-700); } span { position: relative; color: var(--c-white); z-index: 1; } } & + .p-planFlow__item { border-left: solid .1rem var(--c-blue-100); @media (max-width: 768px) { border-left: none; border-top: solid .1rem var(--c-blue-100); } } &.--us { display: flex; align-items: center; gap: var(--spc-2); background-color: transparent; border-left: none; @media (max-width: 768px) { border-top: none; } &::before { background-color: var(--c-white); } span { display: block; width: fit-content; padding: .75em .25em; border-radius: var(--spc-1); background-color: var(--c-blue-500); color: var(--c-white); @media (max-width: 768px) { padding: .25em .75em; } } & + .p-planFlow__item { border-left: none; @media (max-width: 768px) { border-top: none; } } }} .p-planEntry,.p-planCompare__item,.p-planCompare__btn { @media (max-width: 1024px) { min-width: 22rem; }} .p-planEntry { display: flex; flex-direction: column; height: 100%; background: var(--c-white); border-radius: var(--spc-6) var(--spc-6) 0 0; overflow: hidden;} .p-planEntry-head { background: var(--c-gray); padding: var(--spc-2); text-align: center; color: var(--c-white);} .p-planEntry.--current .p-planEntry-head { background: var(--c-blue-700);} .p-planEntry-content { flex: 1; padding: var(--spc-6) var(--spc-8); @media (max-width: 1280px) { padding: var(--spc-4) var(--spc-5); }} .p-planEntry__subtitle { color: var(--c-blue-500);} .p-planEntry__desc { margin-top: var(--spc-4); padding-block: var(--spc-4); border-top: solid .1rem var(--c-gray-300); border-bottom: solid .1rem var(--c-gray-300); color: var(--c-blue-700); @media (max-width: 1280px) { margin-top: var(--spc-4); } & > * { color: var(--c-blue-700); }} .p-planEntry__label { margin-top: var(--spc-4);} .p-planEntry__price { margin-top: var(--spc-2);} .p-planCompare { @media (max-width: 1024px) { padding-inline: var(--container-padding-sp); }} .p-planCompare-inner { display: grid; grid-template-columns: 20rem 1fr 1fr 1fr; column-gap: .1rem; @media (max-width: 1024px) { grid-template-columns: 1fr 1fr 1fr; } & > section { &:nth-of-type(1) { grid-column: 2 / 3; @media (max-width: 1024px) { grid-column: 1 / 2; } } &:nth-of-type(2) { grid-column: 3 / 4; @media (max-width: 1024px) { grid-column: 2 / 3; } } &:nth-of-type(3) { grid-column: 4 / 5; @media (max-width: 1024px) { grid-column: 3 / 4; } } }} .p-planCompare__category { border-top: solid .1rem var(--c-white); @media (max-width: 1024px) { grid-column: 1 / 4; background-color: var(--c-blue-100); br { display: none; } } & > * { display: flex; align-items: center; justify-content: space-between; gap: var(--spc-2); padding: var(--spc-4) var(--spc-4) var(--spc-4) 0; color: var(--c-blue-700); @media (max-width: 1024px) { padding: var(--spc-1) var(--spc-2); } img { width: 2.4rem; height: 2.4rem; } &:hover { opacity: 1; img { transform: translateX(var(--spc-2)); } } }} .p-planCompare__item { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; padding: var(--spc-2); border-top: solid .1rem var(--c-gray-300); background-color: var(--c-white); & > span { display: block; & + span { width: 100%; text-align: center; color: var(--c-gray-600); } } & > span:first-of-type { width: 1.6rem; height: .2rem; background-color: var(--c-gray-600); } &.--current { & > span:first-of-type { height: 1.6rem; border: solid .3rem var(--c-blue-700); border-radius: 50%; background-color: transparent; } }} .p-planCompare__btn { padding: var(--spc-6); border-radius: 0 0 var(--spc-6) var(--spc-6); background-color: var(--c-white);} .p-planSticky { border-radius: var(--spc-4); background-color: var(--c-white); overflow: hidden; box-shadow: 0 0 var(--spc-2) 0 rgba(var(--c-blue-rgb), 0.25);} .p-planSticky-content { padding-inline: var(--spc-5);} .p-planSticky-bottom { padding: var(--spc-5);} .p-planSticky__target { padding: var(--spc-2); text-align: center; color: var(--c-white); background-color: var(--c-blue-700);} .p-planSticky__merit { padding: var(--spc-3) var(--spc-5); color: var(--c-gray); background-color: var(--c-gray-300); span { display: block; color: var(--c-gray); }} .p-planSticky__label { margin-top: var(--spc-5);} .p-planSticky__price { margin-top: var(--spc-2);} .p-planSticky__features { margin-top: var(--spc-4); padding-top: var(--spc-4); border-top: solid .1rem var(--c-gray-300);}