@charset "UTF-8";
/* ---------------------------------------------
* l-wrapper
--------------------------------------------- */
/* ---------------------------------------------
* l-header
--------------------------------------------- */
.l-header {
position: fixed;
z-index: 1000;
width: 100%;
height: calc(var(--fixed-header-height) * 1px);
}
.l-header__container {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
}
.l-header__logo {
display: block;
width: 248px;
flex-shrink: 0;
filter: drop-shadow(32px 24px 64px rgba(var(--color-base-1-rgb), 0.04));
}
.l-header__logo img {
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media screen and (max-width: 750px) {
.l-header__logo {
width: 131.5417256011px;
margin-top: 13px;
margin-left: 16px;
}
}
/* ---------------------------------------------
* l-header-nav
--------------------------------------------- */
.l-header-nav {
padding: 10px 16px 11px 32px;
display: flex;
align-items: center;
justify-content: flex-end;
/*flex-wrap: wrap;*/
gap: 20px;
width: -moz-fit-content;
width: fit-content;
border-radius: 16px;
background-color: var(--color-white-1);
border: 1px solid rgba(var(--color-base-1-rgb), 0.1);
margin: 16px 16px 0 0;
filter: drop-shadow(32px 24px 64px rgba(var(--color-base-1-rgb), 0.04));
}
@media screen and (max-width: 750px) {
.l-header-nav {
display: none;
}
}
.l-header-nav__list {
display: flex;
align-items: center;
gap: 20px;
}
.l-header-nav__sub {
display: flex;
align-items: center;
gap: 20px;
}
.l-header-nav__link {
white-space: nowrap;
display: block;
font-size: 14px;
font-weight: bold;
line-height: 1.3;
}
@media (hover: hover) and (pointer: fine) {
.l-header-nav__link {
transition: opacity var(--hover-duration);
}
.l-header-nav__link:hover {
opacity: var(--hover-opacity-ratio);
}
}
@media screen and (max-width: 750px) {
.l-header-nav__list {
display: none;
}
}
.l-header-nav__btn {
/* flex-shrink: 0;*/
display: flex;
gap:10px 15px;
}
.l-header-nav__btn .c-btn-1__txt{
padding-right: 0;
}
.l-header-nav__btn .c-btn-1__txt:before{
display: none;
}
/* ---------------------------------------------
* l-header-tel
--------------------------------------------- */
.l-header-tel {
padding: 12px 16px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
background-color: var(--color-gray-2);
border-radius: 12px;
color: var(--color-black-1);
}
.l-header-tel__icon {
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
background-color: var(--color-gray-3);
width: 32px;
aspect-ratio: 1/1;
flex-shrink: 0;
}
.l-header-tel__icon img {
display: block;
width: 16px;
}
.l-header-tel__num {
display: block;
font-size: 16px;
font-weight: 400;
}
.l-header-tel__note {
display: block;
font-size: 12px;
font-weight: 400;
margin-top: -3px;
}
/* ---------------------------------------------
* l-contents
--------------------------------------------- */
/* ---------------------------------------------
* l-container
--------------------------------------------- */
.l-container {
max-width: calc(var(--contents-width) * 1px + var(--contents-side-padding) * 2px);
margin-inline: auto;
padding-inline: calc(var(--contents-side-padding) * 1px);
}
@media screen and (max-width: 750px) {
.l-container--100 {
padding-inline: 0;
}
}
/* ---------------------------------------------
* l-footer
--------------------------------------------- */
.l-footer {
padding-block: 64px;
padding-inline: calc(var(--contents-side-padding) * 1px);
background-color: var(--color-blue-1);
}
.l-footer__logo {
display: block;
}
.l-footer__logo img{
max-width: 150px;
}
.l-footer__copyright {
display: block;
color: var(--color-white-1);
font-family: var(--ff-roboto);
font-size: 16px;
font-weight: 400;
line-height: 1.5;
text-align: center;
margin-top: 16px;
}
.l-footer__menu{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
gap: 2em 3%;
margin: 0 auto;
padding: 0 3.125%;
width: 100%;
max-width: calc(1020px + 6.25%);
}
.l-footer__menu li a{
color: #fff;
}
@media screen and (max-width: 750px) {
.l-footer__menu{
flex-wrap: wrap;
}
.l-footer__logo{
width: 100%;
}
.l-footer__copyright {
font-size: calc(16 * 0.75px);
}
.l-footer__menu li a{
font-size: calc(18 * 0.75px);
}
}
/* ---------------------------------------------
* c-acc
--------------------------------------------- */
.c-acc__item {
border-radius: 24px;
background-color: var(--color-white-1);
}
.c-acc__item + .c-acc__item {
margin-top: 16px;
}
.c-acc__trigger {
padding: 40px 32px;
width: 100%;
text-align: left;
display: block;
}
@media (hover: hover) and (pointer: fine) {
.c-acc__trigger {
transition: opacity var(--hover-duration);
}
.c-acc__trigger:hover {
opacity: var(--hover-opacity-ratio);
}
}
@media screen and (max-width: 750px) {
.c-acc__trigger {
padding: 20px;
}
}
.c-acc__trigger-txt {
position: relative;
padding-inline: 50px 40px;
display: block;
color: var(--color-black-3);
font-size: 18px;
font-weight: bold;
line-height: 1.4;
}
@media screen and (max-width: 750px) {
.c-acc__trigger-txt {
padding-inline: 30px 25px;
font-size: calc(18 * 0.75px);
}
}
.c-acc__trigger-txt::before {
content: "Q.";
position: absolute;
top: 50%;
left: 0;
display: block;
color: var(--color-blue-1);
font-family: var(--ff-roboto);
font-size: 32px;
font-weight: bold;
line-height: 1;
transform: translateY(-50%);
}
@media screen and (max-width: 750px) {
.c-acc__trigger-txt::before {
font-size: calc(32 * 0.75px);
}
}
.c-acc__trigger-txt::after {
content: "";
position: absolute;
top: 50%;
right: 0;
display: block;
width: 24px;
aspect-ratio: 1/1;
/*
-webkit-mask: url(https://cosmolab.jp/wp-content/themes/cosmo-lab/assets/img/top-r/icon_arrow.svg) 0 0 no-repeat;
mask: url(https://cosmolab.jp/wp-content/themes/cosmo-lab/assets/img/top-r/icon_arrow.svg) 0 0 no-repeat;
-webkit-mask-size: 100% auto;
mask-size: 100% auto;
background-color: var(--color-black-2);*/
background: url(https://cosmolab.jp/wp-content/themes/cosmo-lab/assets/img/top-r/icon_arrow.svg) no-repeat;
background-size: contain;
height: 24px;
transform: translateY(-50%) rotate(90deg);
transition: transform 0.3s;
}
.is-acc-open .c-acc__trigger-txt::after {
transform: translateY(-50%) rotate(-90deg);
}
.c-acc__contents {
border-top: 3px dotted rgba(var(--color-base-1-rgb), 0.3);
padding-block: 32px;
margin-inline: 32px;
}
@media screen and (max-width: 750px) {
.c-acc__contents {
padding-block: 20px;
margin-inline: 20px;
}
}
.c-acc__txt {
position: relative;
padding-inline: 50px 0;
display: block;
color: var(--color-black-3);
font-size: 16px;
font-weight: 400;
line-height: 1.6;
}
@media screen and (max-width: 750px) {
.c-acc__txt {
font-size: calc(16 * 0.75px);
}
}
.c-acc__txt::before {
content: "A.";
position: absolute;
top: 50%;
left: 0;
display: block;
color: var(--color-blue-1);
font-family: var(--ff-roboto);
font-size: 32px;
font-weight: bold;
line-height: 1;
transform: translateY(-50%);
}
@media screen and (max-width: 750px) {
.c-acc__txt::before {
font-size: calc(32 * 0.75px);
}
}
/* ---------------------------------------------
* c-block-solution
--------------------------------------------- */
.c-block-solution {
padding: 46px 64px 48px 64px;
display: flex;
align-items: center;
gap: calc(48 / 1072 * 100%);
border-radius: 24px;
border: 1px solid rgba(var(--color-white-1-rgb), 0.3);
background-color: rgba(var(--color-white-1-rgb), 0.1);
}
@media screen and (max-width: 750px) {
.c-block-solution {
padding-inline: calc(var(--contents-side-padding) * 1px);
display: block;
}
}
.c-block-solution__head {
font-weight: bold;
}
.c-block-solution__ttl {
display: block;
color: var(--color-gray-1);
font-size: 36px;
line-height: 1.6;
}
@media screen and (max-width: 750px) {
.c-block-solution__ttl {
font-size: calc(36 * 0.75px);
line-height: 1.2;
}
}
.c-block-solution__sub {
display: block;
color: var(--color-white-1);
font-size: 24px;
margin-bottom: 8px;
}
@media screen and (max-width: 750px) {
.c-block-solution__sub {
font-size: calc(24 * 0.75px);
}
}
.c-block-solution__txt {
color: var(--color-white-1);
display: block;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
margin-top: 16px;
}
@media screen and (max-width: 750px) {
.c-block-solution__txt {
font-size: calc(16 * 0.75px);
}
}
.c-block-solution__body {
width: calc(310 / 1072 * 100%);
flex-shrink: 0;
}
@media screen and (max-width: 750px) {
.c-block-solution__body {
width: 100%;
margin-top: 30px;
}
}
.c-block-solution__figure {
display: block;
width: 100%;
}
/* ---------------------------------------------
* c-block-menu
--------------------------------------------- */
.c-block-menu {
margin-top: 40px;
}
.c-block-menu__ttl {
display: block;
color: var(--color-black-1);
font-size: 24px;
font-weight: bold;
line-height: 1.5;
}
@media screen and (max-width: 750px) {
.c-block-menu__ttl {
font-size: calc(24 * 0.75px);
}
}
.c-block-menu__list {
display: flex;
justify-content: space-between;
gap: 32px;
margin-top: 32px;
}
@media screen and (max-width: 750px) {
.c-block-menu__list {
display: block;
}
}
@media screen and (max-width: 750px) {
.c-block-menu__item + .c-block-menu__item {
margin-top: 32px;
}
}
.c-block-menu__button {
display: block;
width: 100%;
cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
.c-block-menu__button {
transition: opacity var(--hover-duration);
}
.c-block-menu__button:hover {
opacity: var(--hover-opacity-ratio);
}
}
.c-block-menu__figure {
display: block;
width: 100%;
}
.c-block-menu__term {
display: block;
color: var(--color-black-1);
font-size: 24px;
font-weight: bold;
line-height: 1.5;
text-align: left;
margin-top: 24px;
}
@media screen and (max-width: 750px) {
.c-block-menu__term {
font-size: calc(24 * 0.75px);
margin-top: calc(24 * 0.75px);
}
}
.c-block-menu__desc {
display: block;
color: var(--color-black-1);
font-size: 16px;
font-weight: 400;
line-height: 1.5;
margin-top: 8px;
text-align: left;
}
@media screen and (max-width: 750px) {
.c-block-menu__desc {
font-size: calc(16 * 0.75px);
}
}
/* ---------------------------------------------
* c-block-download
--------------------------------------------- */
.c-block-download {
padding-block: 130px 48px;
}
.c-block-download__inner {
padding:41px;
display: flex;
align-items: stretch;
gap: clamp(1.563rem, -1.042rem + 5.56vw, 3.125rem);
border-radius: 24px;
background-color: var(--color-gray-1);
}
@media screen and (max-width: 750px) {
.c-block-download__inner {
padding: calc(var(--contents-side-padding) * 1px);
display: block;
}
}
.c-block-download__figure {
display: block;
width: calc(493 / 1010 * 100%);
flex-shrink: 0;
background: var(--color-white-1);
border-radius: 24px;
padding: 23px 24px 10px;
display: flex;
flex-direction: column;
justify-content: center;
}
@media screen and (max-width: 750px) {
.c-block-download__figure {
width: 100%;
padding: 15px 15px 7px;
}
}
.c-block-download__txts {
color: var(--color-black-1);
width: 100%;
}
@media screen and (max-width: 750px) {
.c-block-download__txts {
margin-block: 30px 0;
}
}
.c-block-download__ttl {
display: block;
font-size: 28px;
font-weight: bold;
line-height: 1.4;
text-align: center;
}
@media screen and (max-width: 750px) {
.c-block-download__ttl {
font-size: calc(28 * 0.75px);
}
}
.c-block-download__ttl span{
display: block;
font-size: 24px;
}
@media screen and (max-width: 750px) {
.c-block-download__ttl span{
font-size: calc(24 * 0.75px);
}
}
.c-block-download__txt {
display: block;
font-size: clamp(1rem, 0.792rem + 0.44vw, 1.125rem);
font-weight: 400;
line-height: 1.5;
margin-top: 12px;
max-width: 462px;
}
@media screen and (max-width: 750px) {
.c-block-download__txt {
font-size: calc(15 * 0.75px);
}
}
.c-block-download__btn {
max-width: 360px;
margin-top: 20px;
}
@media screen and (max-width: 750px) {
.c-block-download__btn {
width: 100%;
max-width: 100%;
}
}
.c-block-download__list{
margin-top: 20px;
font-size: clamp(1rem, 0.792rem + 0.44vw, 1.125rem);
}
.c-block-download__list p{
color:var(--color-blue-1);
font-weight: 600;
font-size: 22px;
}
@media screen and (max-width: 750px) {
.c-block-download__list p{
font-size: calc(19* 0.75px);
}
}
.c-block-download__list ul li{
font-weight: 500;
position: relative;
margin-left: 20px;
margin-bottom: 5px;
}
@media screen and (max-width: 750px) {
.c-block-download__list ul li{
font-size: calc(15 * 0.75px);
margin-left: calc(15 * 0.75px + 2px);
}
}
.c-block-download__list ul li:before{
content:'';
background: url(https://cosmolab.jp/wp-content/themes/cosmo-lab/assets/img/top-r/check-circle-fill.png) center center no-repeat;
background-size: contain;
width: 18px;
height: 18px;
display: block;
position: absolute;
left: -20px;
top: 6px;
}
@media screen and (max-width: 750px) {
.c-block-download__list ul li:before{
width: calc(15 * 0.75px);
height: calc(15 * 0.75px);
left: calc(-15 * 0.75px - 2px);
top:3.5px;
}
}
/* ---------------------------------------------
* c-block-point
--------------------------------------------- */
.c-block-point__ttl {
display: block;
color: var(--color-black-1);
font-size: 28px;
font-weight: bold;
letter-spacing: 0.05em;
line-height: 1.5;
text-align: center;
}
@media screen and (max-width: 750px) {
.c-block-point__ttl {
font-size: calc(28 * 0.75px);
}
}
/* ---------------------------------------------
* c-box
--------------------------------------------- */
/* ---------------------------------------------
* c-btn-1
--------------------------------------------- */
.c-btn-1 {
padding: 16px 30px;
/*padding: 16px clamp(1rem, -1.625rem + 5.6vw, 1.875rem);*/
display: flex;
justify-content: center;
align-items: center;
background-color: var(--color-orange-1);
border-radius: 12px;
}
@media (hover: hover) and (pointer: fine) {
.c-btn-1 {
transition: opacity var(--hover-duration);
}
.c-btn-1:hover {
opacity: var(--hover-opacity-ratio);
}
}
.c-btn-1.blue{
background-color: var(--color-blue-1);
}
.c-btn-1__txt {
position: relative;
padding-right: 22px;
color: var(--color-white-1);
font-size: 16px;
/*font-size:clamp(0.75rem, 1.6vw, 1rem);*/
font-weight: bold;
line-height: 1.4;
white-space: nowrap;
}
@media screen and (max-width: 750px) {
.c-btn-1__txt {
padding-right: calc(22 * 0.75px);
font-size: calc(16 * 0.75px);
}
}
.c-btn-1__txt::before {
content: "";
position: absolute;
top: 50%;
right: -10px;
display: block;
width: 24px;
aspect-ratio: 1/1;
/*
-webkit-mask: url(https://cosmolab.jp/wp-content/themes/cosmo-lab/assets/img/top-r/img/icon_arrow.svg) 0 0 no-repeat;
mask: url(https://cosmolab.jp/wp-content/themes/cosmo-lab/assets/img/top-r/img/icon_arrow.svg) 0 0 no-repeat;
-webkit-mask-size: 100% auto;
mask-size: 100% auto;
background-color: var(--color-white-1);*/
background: url(https://cosmolab.jp/wp-content/themes/cosmo-lab/assets/img/top-r/icon_arrow.svg) no-repeat;
background-size: contain;
height: 24px;
transform: translateY(-50%);
}
.c-btn-1--large {
padding: 24px;
}
.c-btn-1--large .c-btn-1__txt {
padding-right: 18px;
font-size: 20px;
}
@media screen and (max-width: 750px) {
.c-btn-1--large .c-btn-1__txt {
padding-right: calc(18 * 0.75px);
font-size: calc(20 * 0.75px);
}
}
.c-btn-1--large .c-btn-1__txt::before {
right: -20px;
width: 24px;
}
@media screen and (max-width: 750px) {
.c-btn-1--large .c-btn-1__txt::before {
right: calc(-20 * 0.75px);
/*width: calc(24 * 0.75px);*/
}
}
/* ---------------------------------------------
* c-slider-card
--------------------------------------------- */
.c-slider-card__button {
padding: 60px 74px 64px;
background-color: var(--color-white-1);
border-radius: 24px;
border: 1px solid rgba(var(--color-base-1-rgb), 0.1);
overflow: hidden;
}
@media screen and (max-width: 750px) {
.c-slider-card__button {
padding: 20px;
}
}
.c-slider-card__top {
padding-block: 0 32px;
display: block;
}
.c-slider-card__txts {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
text-align: left;
}
@media screen and (max-width: 750px) {
.c-slider-card__txts {
display: block;
}
}
.c-slider-card__names {
color: var(--color-black-1);
}
.c-slider-card__company {
display: block;
font-size: 24px;
font-weight: bold;
line-height: 1.5;
}
@media screen and (max-width: 750px) {
.c-slider-card__company {
font-size: calc(24 * 0.75px);
}
}
.c-slider-card__name {
display: block;
font-size: 18px;
font-weight: 400;
line-height: 1.5;
margin-top: 8px;
}
@media screen and (max-width: 750px) {
.c-slider-card__name {
font-size: calc(18 * 0.75px);
margin-top: 0;
}
}
.c-slider-card__tag {
display: flex;
justify-content: center;
align-items: center;
line-height: 1;
background-color: var(--color-blue-1);
border: 1px solid var(--color-blue-1);
color: #fff;
width: -moz-fit-content;
width: fit-content;
}
@media screen and (max-width: 750px) {
.c-slider-card__tag {
margin-top: 7px;
font-size: calc(18 * 0.75px);
}
}
.c-slider-card__tag-name {
color: var(--color-blue-1);
background: #fff;
line-height: 1;
padding: 10px;
}
@media screen and (max-width: 750px) {
.c-slider-card__tag-name {
padding: 8px 10px;
}
}
.c-slider-card__tag-desc {
line-height: 1;
padding: 10px;
}
@media screen and (max-width: 750px) {
.c-slider-card__tag-desc {
padding: 8px 10px;
}
}
.c-slider-card__txt {
display: block;
color: rgba(var(--color-black-1-rgb), 0.7);
font-size: 14px;
font-weight: 400;
line-height: 1.5;
margin-top: 16px;
text-align: left;
}
@media screen and (max-width: 750px) {
.c-slider-card__txt {
font-size: calc(14 * 0.75px);
}
}
.c-slider-card__contents {
padding-block: 32px 0;
border-top: 3px dotted rgba(var(--color-base-1-rgb), 0.3);
display: flex;
align-items: flex-start;
gap: 40px;
}
@media screen and (max-width: 750px) {
.c-slider-card__contents {
display: block;
}
}
.c-slider-card__figure {
display: block;
width: 280px;
aspect-ratio: 14 / 17;
object-fit: cover;
flex-shrink: 0;
border-radius: 16px;
overflow: hidden;
}
.c-slider-card__figure img {
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media screen and (max-width: 750px) {
.c-slider-card__figure {
width: 100%;
}
}
.c-slider-card__dl {
padding-top: 16px;
display: block;
text-align: left;
}
.c-slider-card__item {
display: flex;
align-items: flex-start;
gap: 48px;
}
@media screen and (max-width: 750px) {
.c-slider-card__item {
gap:32px;
}
}
.c-slider-card__item + .c-slider-card__item {
margin-top: 24px;
}
.c-slider-card__term {
display: block;
width: 6em;
flex-shrink: 0;
color: var(--color-blue-1);
font-size: 18px;
font-weight: bold;
}
@media screen and (max-width: 750px) {
.c-slider-card__term {
font-size: calc(18 * 0.75px);
}
}
.c-slider-card__desc {
display: block;
width: 100%;
color: var(--color-black-1);
font-size: 18px;
font-weight: 400;
}
@media screen and (max-width: 750px) {
.c-slider-card__desc {
font-size: calc(18 * 0.75px);
}
}
/* ---------------------------------------------
* c-cassette
--------------------------------------------- */
/* ---------------------------------------------
* c-figure
--------------------------------------------- */
/* ---------------------------------------------
* c-form
--------------------------------------------- */
.c-form {
margin-top: 130px;
max-width: 640px;
margin-inline: auto;
padding: 66px 32px;
border-radius: 24px;
background-color: var(--color-white-1);
border: 1px solid rgba(var(--color-base-1-rgb), 0.1);
filter: drop-shadow(32px 24px 64px rgba(var(--color-base-1-rgb), 0.04));
}
@media screen and (max-width: 750px) {
.c-form {
margin-inline: calc(var(--contents-side-padding) * 1px);
border-radius: 12.729844413px;
}
}
.c-form__ttl {
display: block;
color: var(--color-black-2);
font-size: 24px;
font-weight: bold;
line-height: 1.3;
text-align: center;
margin-block: 0 24px;
}
@media screen and (max-width: 750px) {
.c-form__ttl {
font-size: calc(24 * 0.75px);
margin-block: 0 12.729844413px;
}
}
/* ---------------------------------------------
* c-img
--------------------------------------------- */
/* ---------------------------------------------
* c-kv
--------------------------------------------- */
.c-kv {
background: url(https://cosmolab.jp/wp-content/themes/cosmo-lab/assets/img/top-r/fv_bg.jpg) center center no-repeat;
background-size: cover;
height: 720px;
}
@media screen and (max-width: 750px) {
.c-kv {
background: url(https://cosmolab.jp/wp-content/themes/cosmo-lab/assets/img/top-r/sp/fv_bg.jpg) top center no-repeat;
background-size: contain;
min-height: auto;
height: auto;
}
}
.c-kv__container {
padding-top: calc(var(--contents-side-padding) * 3px + var(--fixed-header-height) * 1px);
padding-top: calc(var(--contents-side-padding) * 3px + var(--fixed-header-height) * 1px + 2px);
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: calc(64 / var(--contents-width) * 100%);
}
@media screen and (max-width: 750px) {
.c-kv__container {
padding-bottom: 0;
display: block;
padding-top: calc(80vw* 804 / 780);
}
}
.c-kv__contents {
flex-shrink: 0;
/*width: calc(640 / var(--contents-width) * 100%);*/
margin-bottom: 60px;
}
@media screen and (max-width: 750px) {
.c-kv__contents {
width: 100%;
padding-inline: calc(var(--contents-side-padding) * 1px);
background: #f8f6ef;
margin-bottom: 0;
position: relative;
}
.c-kv__contents:before {
content: '';
background-image: linear-gradient(0deg, #f8f6ef, transparent);
width: 100vw;
height: 15vw;
display: block;
position: absolute;
top:-15vw;
left: 0;
}
}
.c-kv__form {
flex-shrink: 0;
width: calc(496 / var(--contents-width) * 100%);
align-self: flex-end;
display: flex;
justify-content: right;
gap:clamp(0.75rem, -0.5rem + 2.67vw, 1.5rem);
}
@media screen and (max-width: 750px) {
.c-kv__form {
width: 100%;
padding-inline: calc(var(--contents-side-padding)* 1px);
margin-top: 0;
justify-content: center;
flex-wrap: wrap;
gap:0 10px;
background-image: linear-gradient(#f8f6ef, #ffffff);
}
}
.c-kv__form img{
width: clamp(6.25rem, -2.083rem + 17.78vw, 11.25rem);
}
@media screen and (max-width: 750px) {
.c-kv__form img{
width: calc(50% - 5px);
}
}
.c-kv__note {
display: block;
font-size: 12px;
font-weight: 400;
margin-top: 16px;
}
/* ---------------------------------------------
* c-kv-content
--------------------------------------------- */
.c-kv-content__logos {
display: flex;
justify-content: flex-start;
gap: calc(33 / 640 * 100%);
}
@media screen and (max-width: 750px) {
.c-kv-content__logos {
gap: 17.5035360679px;
}
}
.c-kv-content__item {
display: flex;
justify-content: center;
align-items: center;
width: calc(222 / 640 * 100%);
}
@media screen and (max-width: 750px) {
.c-kv-content__item {
width: 117.7510608204px;
}
}
.c-kv-content__ttl {
display: block;
font-size: 55px;
font-weight: bold;
line-height: 1.4;
white-space: nowrap;
}
@media screen and (max-width: 750px) {
.c-kv-content__ttl {
/*font-size: 14.8514851485px;*/
font-size: clamp(1.625rem, 0.276rem + 6.74vw, 3.438rem);
margin-top: 16.973125884px;
}
}
.c-kv-content__strong {
font-size: 76px;
font-weight: bold;
line-height: 1.3;
margin-top: 15px;
background: var(--color-white-1);
padding: 3px 6.5px 10px;
display: inline-block;
}
@media screen and (max-width: 750px) {
.c-kv-content__strong {
/*font-size:clamp(3.25rem, 2.413rem + 4.19vw, 4.375rem);*/
line-height: 1.2;
margin-bottom: 16.973125884px;
font-size:clamp(2.125rem, 0.172rem + 9.77vw, 4.75rem);
display: block;
margin-top: 10px;
}
}
.c-kv-content__orange {
color: var(--color-orange-1);
}
.c-kv-content__note {
display: block;
font-size: 22px;
font-weight: 400;
line-height: 1.8;
margin-top: 16px;
font-weight: bold;
}
@media screen and (max-width: 750px) {
.c-kv-content__note {
text-align: justify;
margin-top: 16.973125884px;
padding-bottom: 30px;
font-size: 16px;
}
}
.c-kv-content__white {
padding: 0 10px 3px;
background: var(--color-white-1);
}
@media screen and (max-width: 750px) {
.c-kv-content__white {
display: block;
}
}
.c-kv-content__list{
display: flex;
flex-shrink: 0;
gap: 20px;
align-items: center;
margin-top: 30px;
}
@media screen and (max-width: 750px) {
.c-kv-content__list {
flex-direction: column;
margin-top: 0;
padding-bottom: 30px;
}
}
.c-kv-content__list-item{
background: #fff;
width: 282px;
text-align: center;
border-radius: 16px;
overflow: hidden;
}
.c-kv-content__heading{
background: rgba(var( --color-blue-1-rgb),0.3);
padding: 10px 0;
font-size: 22px;
font-weight: bold;
}
.c-kv-content__text{
padding-bottom: 15px;
font-size: 30px;
font-weight: bold;
color: var(--color-blue-1);
}
.c-kv-content__text strong{
font-size: 64px;
}
/* ---------------------------------------------
* c-kv-download
--------------------------------------------- */
.c-kv-download {
margin-top: 90px;
}
@media screen and (max-width: 750px) {
.c-kv-download {
padding: 16.973125884px;
gap: 18.5643564356px;
margin-top: 16.973125884px;
}
}
.c-kv-download .c-btn-1{
margin-top: 12px;
width: clamp(22.5rem, 15rem + 16vw, 27rem);
height: 80px;
white-space: nowrap;
}
@media screen and (max-width: 750px) {
.c-kv-download .c-btn-1{
width: 100%;
height: auto;
}
}
.c-kv-download__figure {
display: block;
width: calc(248 / 640 * 100%);
flex-shrink: 0;
}
@media screen and (max-width: 750px) {
.c-kv-download__figure {
width: 131.5417256011px;
}
}
.c-kv-download__txts {
width: 100%;
}
.c-kv-download__strong {
display: block;
font-size: 24px;
font-weight: bold;
line-height: 1.4;
}
@media screen and (max-width: 750px) {
.c-kv-download__strong {
font-size: 12.729844413px;
}
}
.c-kv-download__note {
display: block;
font-size: 18px;
font-weight: 400;
line-height: 1.5;
margin-top: 16px;
white-space: nowrap;
}
@media screen and (max-width: 750px) {
.c-kv-download__note {
margin-top: 6.3649222065px;
white-space: wrap;
}
}
/* ---------------------------------------------
* c-kv-form
--------------------------------------------- */
.c-kv-form {
padding: 32px;
border-radius: 24px;
background-color: var(--color-white-1);
border: 1px solid rgba(var(--color-base-1-rgb), 0.1);
filter: drop-shadow(32px 24px 64px rgba(var(--color-base-1-rgb), 0.04));
}
@media screen and (max-width: 750px) {
.c-kv-form {
padding: 16.973125884px;
border-radius: 12.729844413px;
}
}
.c-kv-form__ttl {
display: block;
color: var(--color-black-2);
font-size: 24px;
font-weight: bold;
line-height: 1.3;
text-align: center;
margin-block: 0 24px;
}
@media screen and (max-width: 750px) {
.c-kv-form__ttl {
font-size: 12.729844413px;
margin-block: 0 12.729844413px;
}
}
/* c-modal
--------------------------------------------- */
.c-modal {
display: none;
}
.c-modal.is-open {
display: block;
}
.c-modal__overlay {
position: fixed;
inset: 0;
z-index: 10000;
background: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
padding: 16px;
overscroll-behavior-y: none;
overflow-y: auto;
scrollbar-width: none;
}
.c-modal__overlay::-webkit-scrollbar {
display: none;
}
.c-modal__inner {
position: relative;
padding: 0;
width: min(100%, 494px);
max-height: calc(100vh - 120px);
margin-inline: auto;
filter: drop-shadow(0px 16px 44px rgba(var(--color-base-1-rgb), 0.1));
}
.c-modal__container{
background-color: var(--color-gray-4);
border-radius: 16px;
overflow: hidden;
}
.c-modal__close {
position: absolute;
bottom: -42px;
right: 10px;
display: block;
width: 30px;
height: 30px;
cursor: pointer;
background: url(https://cosmolab.jp/wp-content/themes/cosmo-lab/assets/img/top-r/sec04_popup_icon_close.png)no-repeat;
background-size: contain;
}
@media (hover: hover) and (pointer: fine) {
.c-modal__close {
transition: opacity var(--hover-duration);
}
.c-modal__close:hover {
opacity: var(--hover-opacity-ratio);
}
}
.c-modal__head{
background: rgba(var(--color-blue-1-rgb),0.3);
padding: 32px;
}
.c-modal__ttl {
display: block;
color: var(--color-black-5);
font-size: 30px;
font-weight: bold;
line-height: 1.4;
text-align: center;
}
@media screen and (max-width: 750px) {
.c-modal__ttl {
font-size: calc(30 * 0.75px);
}
}
.c-modal__body {
padding: 24px 32px 34px;
border-radius: 16px;
}
@media screen and (max-width: 750px) {
.c-modal__body {
padding: 20px;
}
}
.c-modal__term {
display: block;
color: var(--color-black-5);
font-size: 16px;
font-weight: bold;
line-height: 1.4;
}
@media screen and (max-width: 750px) {
.c-modal__term {
font-size: calc(16 * 0.75px);
}
}
.c-modal__block {
padding: 24px 30px;
border-radius: 16px;
display: flex;
background-color: #fff;
gap:20px;
align-items: center;
margin-bottom: 30px;
}
@media screen and (max-width: 750px) {
.c-modal__block {
padding: 20px 20px 24px;
margin-bottom: 20px;
}
}
.c-modal__figure {
display: block;
}
.c-modal__figure img{
width: 80px;
aspect-ratio: 1 / 1;
}
.c-modal__text{
font-size: 20px;
line-height: 1.5;
}
@media screen and (max-width: 750px) {
.c-modal__text{
font-size: calc(20 * 0.75px);
}
}
.c-modal__wh-box {
padding: 24px 24px 40px;
background-color: var(--color-white-1);
border-radius: 12px;
margin-top: 16px;
}
.c-modal__wh-term {
padding-block: 0 16px;
display: block;
text-align: center;
color: var(--color-blue-4);
font-size: 16px;
font-weight: bold;
line-height: 1.5;
}
@media screen and (max-width: 750px) {
.c-modal__wh-term {
font-size: calc(16 * 0.75px);
}
}
.c-modal__wh-txt {
padding-block: 16px 0;
display: block;
color: var(--color-black-1);
font-size: 14px;
font-weight: 400;
line-height: 1.6;
border-top: 3px dotted rgba(var(--color-base-1-rgb), 0.3);
}
@media screen and (max-width: 750px) {
.c-modal__wh-txt {
font-size: calc(14 * 0.75px);
}
}
.c-modal__btn{
display: flex;
flex-direction: column;
gap:20px;
}
@media screen and (max-width: 750px) {
.c-modal__btn{
gap:10px;
}
}
/* Modal Animation Style (アニメーション不要の場合は削除)
--------------------------------------------- */
.c-modal[aria-hidden=false] .c-modal__overlay {
animation: mmfadeIn 0.5s cubic-bezier(0, 0, 0.2, 1);
}
.c-modal[aria-hidden=true] .c-modal__overlay {
animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.c-modal__overlay, .c-modal__container {
will-change: transform;
}
@keyframes mmfadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes mmfadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes mmslideIn {
from {
transform: translateY(15%);
}
to {
transform: translateY(0);
}
}
@keyframes mmslideOut {
from {
transform: translateY(0);
}
to {
transform: translateY(15%);
}
}
/* ---------------------------------------------
* c-dl-menu
--------------------------------------------- */
.c-dl-menu{
border-radius: 24px;
background-color: var(--color-gray-1);
padding: 0 40px 40px 40px;
margin-top: 48px;
}
@media screen and (max-width: 750px) {
.c-dl-menu{
padding: 0 20px 20px 20px;
}
}
.c-dl-menu__term {
padding-block: 0 24px;
display: block;
font-size: 28px;
font-weight: bold;
line-height: 1.4;
border-bottom: 2px solid rgba(var(--color-base-1-rgb), 0.3);
text-align: center;
color:var(--color-blue-1);
}
@media screen and (max-width: 750px) {
.c-dl-menu__term {
font-size: calc(28 * 0.75px);
border-width: 1px;
}
}
.c-dl-menu__item {
padding: 48px 20px 20px;
}
@media screen and (max-width: 750px) {
.c-dl-menu__item {
padding: 30px 0 0;
}
}
.c-dl-menu__desc {
margin-top: 26px;
}
.c-dl-menu__box {
background: #fff;
padding: 30px 50px;
display: flex;
gap:50px;
border-radius: 16px;
margin-bottom: 20px;
}
@media screen and (max-width: 1024px) {
.c-dl-menu__box {
display: block;
padding: 20px;
}
}
.c-dl-menu__figure{
max-width: 348px;
}
@media screen and (max-width: 1024px) {
.c-dl-menu__figure{
max-width: 100%;
margin-bottom: 16px;
}
.c-dl-menu__figure img{
width: 100%;
}
}
.c-dl-menu__txts{
width: calc(100% * 590/996);
min-width: 500px;
}
@media screen and (max-width: 1024px) {
.c-dl-menu__txts{
width: 100%;
min-width: 100%;
}
}
.c-dl-menu__txt {
display: block;
color: var(--color-black-1);
font-size: 20px;
font-weight: 400;
line-height: 1.5;
margin-bottom: 16px;
}
@media screen and (max-width: 750px) {
.c-dl-menu__txt {
font-size: calc(16 * 0.75px);
}
}
.c-dl-menu__txt-strong{
font-weight: bold;
display: block;
font-size: 24px;
margin-bottom: 16px;
}
@media screen and (max-width: 750px) {
.c-dl-menu__txt-strong{
font-size: calc(24 * 0.75px);
}
}
.c-dl-menu__txt-strong.popular:after{
content: '人気';
color:var(--color-blue-1);
background: var(--color-blue-2);
font-size: 16px;
border-radius: 4px;
padding: 0px 4px 2px;
margin-left: 20px;
}
@media screen and (max-width: 750px) {
.c-dl-menu__txt-strong.popular:after{
font-size: calc(16 * 0.75px);
margin-left: 10px;
}
}
.c-dl-menu__txt-accent{
font-weight: bold;
background: linear-gradient(transparent 75%, var(--color-orange-1) 75%);
}
.c-dl-menu__link{
display: flex;
gap:20px;
}
@media screen and (max-width: 750px) {
.c-dl-menu__link{
flex-direction: column;
gap:10px;
}
}
.c-dl-menu__link .c-btn-1{
width: 266px;
}
@media screen and (max-width: 750px) {
.c-dl-menu__link .c-btn-1{
width: 100%;
border-radius: 8px;
}
}
.c-dl-menu__list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
gap: 16px;
margin-top: 16px;
}
.c-dl-menu__list-item {
width: calc((100% - 48px) / 4);
}
@media screen and (max-width: 750px) {
.c-dl-menu__list-item {
width: calc((100% - 16px) / 2);
}
}
@media screen and (max-width: 750px) {
.c-dl-menu__list-item {
width: 100%;
}
}
.clm2 .c-dl-menu__list-item {
width: calc((100% - 16px) / 2);
}
@media screen and (max-width: 750px) {
.clm2 .c-dl-menu__list-item {
width: 100%;
}
}
.c-dl-menu__button {
position: relative;
padding: 32px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
width: 100%;
height: 100%;
cursor: pointer;
background-color: var(--color-white-1);
border-radius: 16px;
}
@media (hover: hover) and (pointer: fine) {
.c-dl-menu__button {
transition: opacity var(--hover-duration);
}
.c-dl-menu__button:hover {
opacity: var(--hover-opacity-ratio);
}
}
@media screen and (max-width: 750px) {
.c-dl-menu__button {
flex-direction: row;
justify-content: space-between;
padding: 20px;
}
}
.c-dl-menu__button-tag{
height: 62px;
display: flex;
align-items: center;
}
@media screen and (max-width: 750px) {
.c-dl-menu__button-tag{
height: auto;
}
}
.c-dl-menu__button-tag-txt {
display: block;
font-size: 22px;
font-weight: bold;
line-height: 1.4;
white-space: nowrap;
}
@media screen and (max-width: 750px) {
.c-dl-menu__button-tag-txt {
font-size: calc(22 * 0.75px);
text-align: left;
}
}
.c-dl-menu__button-img{
width: 42px;
height: auto;
}
/* ---------------------------------------------
* c-list-flow
--------------------------------------------- */
.c-list-flow {
display: flex;
justify-content: space-between;
}
@media screen and (max-width: 1024px) {
.c-list-flow {
display: block;
}
}
@media screen and (max-width: 750px) {
.c-list-flow {
max-width: 500px;
margin-inline: auto;
gap: 30px calc(30 / 375 * 100%);
}
}
.c-list-flow__item {
flex-shrink: 0;
width: calc(176 / 1200 * 100%);
}
@media screen and (max-width: 1024px) {
.c-list-flow__item {
width: 200px;
margin-inline: auto;
margin-top: 80px;
}
}
@media screen and (max-width: 1024px) {
.c-list-flow__item:not(:last-of-type) {
position: relative;
}
}
.c-list-flow__item:not(:last-of-type) .c-list-flow__circle {
position: relative;
}
.c-list-flow__item:not(:last-of-type) .c-list-flow__circle::after {
content: "";
position: absolute;
top: 50%;
right: calc(-56 / 176 * 100%);
width: calc(32 / 176 * 100%);
aspect-ratio: 1/1;
display: block;
-webkit-mask: url(https://cosmolab.jp/wp-content/themes/cosmo-lab/assets/img/top-r/icon_arrow.svg) 0 0 no-repeat;
mask: url(https://cosmolab.jp/wp-content/themes/cosmo-lab/assets/img/top-r/icon_arrow.svg) 0 0 no-repeat;
-webkit-mask-size: 100% auto;
mask-size: 100% auto;
background-color: rgba(var(--color-black-1-rgb), 0.3);
transform: translateY(-50%);
}
@media screen and (max-width: 1024px) {
.c-list-flow__item:not(:last-of-type) .c-list-flow__circle::after {
display: none;
}
}
@media screen and (max-width: 1024px) {
.c-list-flow__item:not(:last-of-type)::after {
content: "";
position: absolute;
bottom: -50px;
right: 50%;
width: 32px;
transform: translateX(50%) rotate(90deg);
aspect-ratio: 1/1;
display: block;
-webkit-mask: url(https://cosmolab.jp/wp-content/themes/cosmo-lab/assets/img/top-r/icon_arrow.svg) 0 0 no-repeat;
mask: url(https://cosmolab.jp/wp-content/themes/cosmo-lab/assets/img/top-r/icon_arrow.svg) 0 0 no-repeat;
-webkit-mask-size: 100% auto;
mask-size: 100% auto;
background-color: rgba(var(--color-black-1-rgb), 0.3);
}
}
.c-list-flow__circle {
position: relative;
display: block;
aspect-ratio: 1/1;
}
.c-list-flow__num {
position: absolute;
top: -18px;
left: 22px;
display: block;
color: var(--color-blue-1);
font-family: var(--ff-roboto);
font-size: 60px;
font-weight: 600;
line-height: 1.3;
}
@media screen and (max-width: 750px) {
.c-list-flow__num {
font-size: calc(60 * 0.75px);
}
}
.c-list-flow__figure {
border-radius: 50%;
border: 1px solid rgba(var(--color-base-1-rgb), 0.1);
overflow: hidden;
display: block;
width: 100%;
height: 100%;
}
.c-list-flow__figure img {
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.c-list-flow__term {
display: block;
color: var(--color-black-1);
font-size: 16px;
font-weight: bold;
line-height: 1.5;
text-align: center;
margin-top: 24px;
}
@media screen and (max-width: 750px) {
.c-list-flow__term {
font-size: calc(16 * 0.75px);
}
}
.c-list-flow__txt {
display: block;
color: var(--color-black-1);
font-size: 14px;
line-height: 1.5;
margin-top: 12px;
}
@media screen and (max-width: 750px) {
.c-list-flow__txt {
font-size: calc(14 * 0.75px);
}
}
/* ---------------------------------------------
* c-dl-company
--------------------------------------------- */
.c-dl-company__item {
padding-block: 40px;
display: flex;
gap: 1em;
color: var(--color-black-4);
font-size: 18px;
font-weight: 400;
line-height: 1.5;
}
@media screen and (max-width: 750px) {
.c-dl-company__item {
padding-block: calc(30 * 0.75px);
font-size: calc(18 * 0.75px);
}
}
.c-dl-company__item:not(:last-of-type) {
border-bottom: 1px solid rgba(var(--color-black-4-rgb), 0.08);
}
.c-dl-company__term {
width: 5.2em;
flex-shrink: 0;
}
.c-dl-company__desc {
width: 100%;
}
/* ---------------------------------------------
* c-section-point
--------------------------------------------- */
.c-section-point {
padding-block: 98px 130px;
background: var(--color-gray-1);
}
.c-section-point__body {
margin-top: 64px;
}
.c-section-point__list {
display: flex;
gap: 24px;
flex-wrap: wrap;
}
@media screen and (max-width: 750px) {
.c-section-point__list {
display: block;
width: 100%;
margin: 0 auto;
}
}
.c-section-point__list-item {
position: relative;
width: calc(50% - 12px);
border-radius: 16px;
background: #fff;
overflow: hidden;
display: flex;
gap:30px;
}
@media screen and (max-width: 750px) {
.c-section-point__list-item {
width: 100%;
border-radius: 8px;
gap:15px;
}
}
@media screen and (max-width: 750px) {
.c-section-point__list-item + .c-section-point__list-item {
margin-top: 24px;
}
}
.c-section-point__num {
background: var(--color-blue-1);
max-width: 200px;
width: 35%;
height: 160px;
display: flex;
align-items: center;
justify-content: center;
}
@media screen and (max-width: 750px) {
.c-section-point__num {
max-width: none;
min-width: 100px;
height: auto;
}
}
.c-section-point__num img{
padding: 0 16px;
max-height: 128px;
}
.c-section-point__term {
display: block;
font-size: clamp(1.125rem, 0.5rem + 1.33vw, 1.5rem);
font-weight: bold;
line-height: 1.5;
width: 75%;
margin-right: 20px;
align-self: center;
}
@media screen and (max-width: 750px) {
.c-section-point__term {
font-size: calc(23 * 0.75px);
line-height: 1.2;
padding: 20px 0;
margin-right: 10px;
}
}
.c-section-point__strong {
color: var(--color-blue-1);
}
.c-section-point__figure {
display: block;
width: calc(240 / 336 * 100%);
margin-inline: auto;
margin-top: 24px;
}
@media screen and (max-width: 750px) {
.c-section-point__figure {
margin-top: 0;
}
}
.c-section-point__foot {
margin-top: 64px;
}
.c-section-point__btn {
width: 480px;
margin-top: 48px;
margin-inline: auto;
}
@media screen and (max-width: 750px) {
.c-section-point__btn {
padding-inline: calc(var(--contents-side-padding) * 1px);
width: 100%;
}
}
/* ---------------------------------------------
* c-section-worry
--------------------------------------------- */
.c-section-worry {
position: relative;
background-color: var(--color-gray-1);
padding-block: 80px;
}
.c-section-worry::after {
content: "";
position: absolute;
z-index: 1;
bottom: -23px;
left: 50%;
display: block;
width: 64px;
aspect-ratio: 64/24;
transform: translateX(-50%);
-webkit-mask: url(https://cosmolab.jp/wp-content/themes/cosmo-lab/assets/img/top-r/icon_polygon.svg) 0 0 no-repeat;
mask: url(https://cosmolab.jp/wp-content/themes/cosmo-lab/assets/img/top-r/icon_polygon.svg) 0 0 no-repeat;
-webkit-mask-size: 100% auto;
mask-size: 100% auto;
background-color: var(--color-gray-1);
}
.c-section-worry__body {
margin-top: 48px;
}
.c-section-worry__list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px 16px;
}
.c-section-worry__item {
padding: 20px 32px;
border-radius: 999px;
background-color: var(--color-white-1);
}
@media screen and (max-width: 750px) {
.c-section-worry__item {
width: 100%;
}
}
@media screen and (min-width: 1025px) {
.c-section-worry__item--middle {
padding: 20px 46px;
}
}
@media screen and (min-width: 1025px) {
.c-section-worry__item--large {
padding: 20px 76px;
}
}
.c-section-worry__txt {
display: block;
font-size: 20px;
font-weight: bold;
line-height: 1.4;
}
@media screen and (max-width: 750px) {
.c-section-worry__txt {
font-size: calc(20 * 0.75px);
line-height: 1.2;
}
}
.c-section-worry__strong {
color: var(--color-blue-1);
}
/* ---------------------------------------------
* c-section-solution
--------------------------------------------- */
.c-section-solution {
position: relative;
background-color: #fff;
padding-block: 80px;
margin-block: 0 24px;
}
.c-section-solution::after {
content: "";
position: absolute;
bottom: -23px;
left: 50%;
display: block;
width: 64px;
aspect-ratio: 64/24;
transform: translateX(-50%);
-webkit-mask: url(https://cosmolab.jp/wp-content/themes/cosmo-lab/assets/img/top-r/icon_polygon.svg) 0 0 no-repeat;
mask: url(https://cosmolab.jp/wp-content/themes/cosmo-lab/assets/img/top-r/icon_polygon.svg) 0 0 no-repeat;
-webkit-mask-size: 100% auto;
mask-size: 100% auto;
background-color: var(--color-blue-1);
}
.c-section-solution__body {
margin-top: 25px;
}
.c-section-solution__foot {
width: 480px;
margin-top: 48px;
margin-inline: auto;
}
@media screen and (max-width: 750px) {
.c-section-solution__foot {
width: 100%;
}
}
/* ---------------------------------------------
* c-section-about
--------------------------------------------- */
.c-section-about {
padding-block: 56px 130px;
background-color: var(--color-blue-2);
}
.c-section-about__body {
margin-top: 32px;
}
.c-section-about__txt {
display: block;
font-size: 20px;
line-height: 1.6;
max-width: 1000px;
margin-inline: auto;
}
@media screen and (max-width: 750px) {
.c-section-about__txt {
font-size: calc(20 * 0.75px);
}
}
.c-section-about__figure {
display: block;
width: 100%;
margin-top: 48px;
background: #fff;
padding: 30px 40px;
border-radius: 24px;
}
@media screen and (max-width: 750px) {
.c-section-about__figure {
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
/*スクロールバー全体*/
/*スクロールバーの軌道*/
/*スクロールバーの動く部分*/
}
.c-section-about__figure::-webkit-scrollbar {
height: 4px;
}
.c-section-about__figure::-webkit-scrollbar-track {
border-radius: 15px;
box-shadow: inset 0 0 6px var(--color-gray-2);
}
.c-section-about__figure::-webkit-scrollbar-thumb {
background-color: var(--color-gray-3);
border-radius: 15px;
}
}
@media screen and (max-width: 750px) {
.c-section-about__figure img {
min-width: 1200px;
margin-bottom: 8px;
}
}
.c-section-about__note {
display: block;
font-size: 28px;
font-weight: bold;
line-height: 1.5;
margin-top: 40px;
text-align: center;
}
@media screen and (max-width: 750px) {
.c-section-about__note {
font-size: calc(28 * 0.75px);
}
}
.c-section-about__list {
margin-top: 26px;
max-width: 827px;
margin-inline: auto;
display: flex;
justify-content: center;
gap: 12px;
}
@media screen and (max-width: 750px) {
.c-section-about__list {
flex-wrap: wrap;
}
}
@media screen and (max-width: 750px) {
.c-section-about__item {
width: calc((100% - 20px) / 2);
}
}
@media screen and (max-width: 750px) {
.c-section-about__item img {
display: block;
max-width: 145px;
margin-inline: auto;
}
}
@media screen and (max-width: 750px) {
.c-section-about__item:nth-of-type(2n + 3) img {
margin-left: 0;
}
}
@media screen and (max-width: 750px) {
.c-section-about__item:nth-of-type(2n) img {
margin-right: 0;
}
}
.c-section-about__item:first-of-type {
position: relative;
}
@media screen and (min-width: 751px) {
.c-section-about__item:first-of-type {
margin-right: 12px;
}
}
@media screen and (max-width: 750px) {
.c-section-about__item:first-of-type {
width: 100%;
margin-bottom: 12px;
}
}
.c-section-about__item:first-of-type::after {
content: "";
position: absolute;
top: 0;
right: -12px;
display: block;
width: 1px;
height: 100%;
background-color: rgba(var(--color-base-1-rgb), 0.3);
}
@media screen and (max-width: 750px) {
.c-section-about__item:first-of-type::after {
top: auto;
bottom: -12px;
right: 0;
width: 100%;
height: 1px;
}
}
.c-section-about__foot {
width: 480px;
margin-top: 48px;
margin-inline: auto;
}
@media screen and (max-width: 750px) {
.c-section-about__foot {
width: 100%;
}
}
/* ---------------------------------------------
* c-section-reason
--------------------------------------------- */
.c-section-reason {
position: relative;
padding-block: 80px;
}
.c-section-reason__body {
margin-top: 48px;
}
.c-section-reason__item {
position: relative;
margin-top: 48px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 40px;
}
@media screen and (max-width: 750px) {
.c-section-reason__item {
flex-direction: column;
}
.c-section-reason__item.reverse{
flex-direction: column-reverse;
}
}
.c-section-reason__figure {
flex-shrink: 0;
border-radius: 16px;
display: block;
width: calc(445 / 1072 * 100%);
overflow: hidden;
}
.c-section-reason__figure img {
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media screen and (max-width: 750px) {
.c-section-reason__figure {
width: 100%;
}
}
.c-section-reason__ttl {
color: var(--color-black-1);
display: block;
font-size: 24px;
font-weight: bold;
line-height: 1.5;
}
@media screen and (max-width: 750px) {
.c-section-reason__ttl {
font-size: calc(24 * 0.75px);
line-height: 1.2;
}
}
@media screen and (min-width: 751px) {
.c-section-reason__txts {
padding-block: 20px;
}
}
.c-section-reason__txt {
color: var(--color-black-1);
display: block;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
margin-top: 11px;
}
@media screen and (max-width: 750px) {
.c-section-reason__txt {
font-size: calc(16 * 0.75px);
}
}
.c-section-reason__num {
position: absolute;
top: -45px;
left: 39px;
display: block;
color: var(--color-blue-1);
font-family: var(--ff-roboto);
font-size: 82px;
font-weight: bold;
line-height: 1.3;
}
@media screen and (max-width: 750px) {
.c-section-reason__num {
font-size: calc(82 * 0.75px);
}
}
.c-section-reason__foot {
width: 480px;
margin-top: 48px;
margin-inline: auto;
}
@media screen and (max-width: 750px) {
.c-section-reason__foot {
width: 100%;
}
}
/* ---------------------------------------------
* c-section-menu
--------------------------------------------- */
.c-section-menu {
padding-block: 130px;
}
.c-section-menu__body {
margin-top: 48px;
}
.c-section-menu__txt{
display: block;
font-size: 20px;
line-height: 1.6;
max-width: 1000px;
margin-inline: auto;
text-align: center;
}
@media screen and (max-width: 750px) {
.c-section-menu__txt{
font-size: calc(20 * 0.75px);
}
}
.c-section-menu__foot{
margin-top: 48px;
margin-inline: auto;
}
/* ---------------------------------------------
* c-section-voice
--------------------------------------------- */
.c-section-voice {
padding-block: 80px;
background-color: var(--color-blue-2);
}
.c-section-voice__body {
margin-top: 48px;
}
.c-section-voice__foot {
width: 480px;
margin-top: 48px;
margin-inline: auto;
}
@media screen and (max-width: 750px) {
.c-section-voice__foot {
width: 100%;
padding-inline: 20px;
}
}
/* ---------------------------------------------
* c-section-flow
--------------------------------------------- */
.c-section-flow {
padding-block: 0px 130px;
}
.c-section-flow__body {
margin-top: 88px;
}
/* ---------------------------------------------
* c-section-faq
--------------------------------------------- */
.c-section-faq {
padding-block: 80px;
background-color: var(--color-gray-1);
}
.c-section-faq__container {
display: flex;
gap: 20px;
}
@media screen and (max-width: 1024px) {
.c-section-faq__container {
display: block;
}
}
.c-section-faq__head {
width: 100%;
}
.c-section-faq__body {
width: calc(872 / 1200 * 100%);
flex-shrink: 0;
}
@media screen and (max-width: 1024px) {
.c-section-faq__body {
width: 100%;
margin-top: 30px;
}
}
/* ---------------------------------------------
* c-section-company
--------------------------------------------- */
.c-section-company__container {
padding-block: 100px;
display: flex;
gap: 20px;
border-bottom: 3px dotted rgba(var(--color-base-1-rgb), 0.3);
}
@media screen and (max-width: 1024px) {
.c-section-company__container {
display: block;
}
}
.c-section-company__head {
width: 100%;
}
.c-section-company__body {
width: calc(960 / 1200 * 100%);
flex-shrink: 0;
}
@media screen and (max-width: 1024px) {
.c-section-company__body {
width: 100%;
margin-top: 30px;
}
}
/* ---------------------------------------------
* c-section-contribution
--------------------------------------------- */
.c-section-contribution {
padding-block: 100px 130px;
}
.c-section-contribution__ttl {
display: block;
color: var(--color-black-1);
font-size: 32px;
font-weight: bold;
line-height: 1.5;
}
@media screen and (max-width: 750px) {
.c-section-contribution__ttl {
font-size: calc(32 * 0.75px);
line-height: 1.3;
}
}
.c-section-contribution__body {
margin-top: 56px;
}
.c-section-contribution__list {
display: flex;
flex-wrap: wrap;
gap: 40px 24px;
}
.c-section-contribution__item {
width: calc((100% - 48px) / 3);
}
@media screen and (max-width: 750px) {
.c-section-contribution__item {
width: calc((100% - 24px) / 2);
}
}
@media screen and (max-width: 400px) {
.c-section-contribution__item {
width: 100%;
}
}
.c-section-contribution__figure {
display: block;
border-radius: 16px;
}
.c-section-contribution__figure img {
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.c-section-contribution__figcaption {
display: block;
color: var(--color-black-1);
font-size: 16px;
font-weight: bold;
line-height: 1.5;
margin-top: 16px;
}
@media screen and (max-width: 750px) {
.c-section-contribution__figcaption {
font-size: calc(16 * 0.75px);
}
}
/* ---------------------------------------------
* c-slider
--------------------------------------------- */
/* .c-slider
--------------------------------------------- */
.c-slider__wrapper {
position: relative;
max-width: 1240px;
margin: 0 auto;
width: 100%;
padding: 0 20px;
}
.c-slider-card{
}
.c-slider .splide__slide {
max-width: 1200px;
transform: translate3d(0, 0, 0);
}
.c-slider .splide__arrow {
display: none;
}
.c-slider .splide__pagination {
display: none;
}
.c-slider__img img {
width: 100%;
height: auto;
vertical-align: bottom;
}
.c-slide-loop {
display: flex;
gap: 24px;
overflow: hidden;
margin-top: 22px;
}
.c-slide-loop__list {
display: flex;
gap: 24px;
animation: infiniteLoop 60s linear 0.5s infinite both;
}
.c-slide-loop__item {
flex-shrink: 0;
width: 232px;
}
.c-slide-loop__button {
display: block;
width: 100%;
cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
.c-slide-loop__button {
transition: opacity var(--hover-duration);
}
.c-slide-loop__button:hover {
opacity: var(--hover-opacity-ratio);
}
}
.c-slide-loop__figure {
display: block;
width: 100%;
border-radius: 10px;
border: 1px solid rgba(var(--color-base-1-rgb), 0.1);
aspect-ratio: 232/160;
overflow: hidden;
}
.c-slide-loop__figure img {
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.c-slide-loop__txts {
display: block;
margin-top: 14px;
}
.c-slide-loop__term {
position: relative;
padding-left: 17px;
display: block;
color: var(--color-black-2);
font-size: 18px;
font-weight: bold;
line-height: 1.4;
text-align: left;
}
@media screen and (max-width: 750px) {
.c-slide-loop__term {
font-size: calc(18 * 0.75px);
}
}
.c-slide-loop__term::before {
content: "";
position: absolute;
top: 0.5em;
left: 0.1em;
display: block;
width: 8px;
aspect-ratio: 1/1;
background-color: var(--color-blue-1);
border-radius: 50%;
}
@media screen and (max-width: 750px) {
.c-slide-loop__term::before {
top: 0.4em;
}
}
.c-slide-loop__txt {
display: block;
color: var(--color-base-1);
font-size: 14px;
font-weight: 400;
line-height: 1.4;
text-align: left;
margin-top: 8px;
}
@media screen and (max-width: 750px) {
.c-slide-loop__txt {
font-size: calc(14 * 0.75px);
}
}
@keyframes infiniteLoop {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
@keyframes infiniteLoop2 {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
.c-btn-contact{
display: flex;
max-width: 756px;
gap:40px;
width: 100%;
}
@media screen and (max-width: 750px) {
.c-btn-contact{
flex-direction: column;
}
}
.c-btn-contact__box{
text-align: center;
width: calc(50% - 20px);
}
@media screen and (max-width: 750px) {
.c-btn-contact__box{
width: 100%;
}
}
.c-btn-contact__text{
margin-bottom: 20px;
font-size: 20px;
font-weight: 500;
}
@media screen and (max-width: 750px) {
.c-btn-contact__text{
font-size: calc(20 * 0.75px);
}
}
.c-btn-contact__text span{
color:var(--color-orange-1);
font-weight: bold;
}
.c-btn-contact__text.blue span{
color:var(--color-blue-1);
}
/* ---------------------------------------------
* c-table
--------------------------------------------- */
/* ---------------------------------------------
* c-tile
--------------------------------------------- */
/* ---------------------------------------------
* c-ttl-1
--------------------------------------------- */
.c-ttl-1 {
position: relative;
padding-block: 0 30px;
display: block;
text-align: center;
font-size: 48px;
font-weight: bold;
letter-spacing: 0.05em;
line-height: 1.5;
}
@media screen and (max-width: 750px) {
.c-ttl-1 {
padding-block: 0 calc(30 * 0.75px);
font-size: calc(42 * 0.75px);
line-height: 1.2;
}
}
.c-ttl-1::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 48px;
height: 6px;
border-radius: 999px;
background-color: var(--color-blue-1);
transform: translateX(-50%);
}
@media screen and (max-width: 750px) {
.c-ttl-1::after {
width: calc(48 * 0.75px);
}
}
.c-ttl-1__sub {
display: block;
font-size: 24px;
line-height: 1.4;
margin-block: 0 8px;
}
@media screen and (max-width: 750px) {
.c-ttl-1__sub {
font-size: calc(24 * 0.75px);
}
}
.c-ttl-1--wh {
color: var(--color-white-1);
}
.c-ttl-1--wh::after {
background-color: var(--color-white-1);
}
/* ---------------------------------------------
* c-ttl-2
--------------------------------------------- */
.c-ttl-2 {
position: relative;
padding-block: 0 30px;
display: block;
font-size: 28px;
font-weight: bold;
letter-spacing: 0.05em;
line-height: 1.5;
}
@media screen and (max-width: 750px) {
.c-ttl-2 {
padding-block: 0 calc(30 * 0.75px);
font-size: calc(28 * 0.75px);
}
}
.c-ttl-2::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 48px;
height: 6px;
border-radius: 999px;
background-color: var(--color-blue-1);
}
@media screen and (max-width: 750px) {
.c-ttl-2::after {
width: calc(48 * 0.75px);
}
}
/* ---------------------------------------------
* c-txt
--------------------------------------------- */
/* ---------------------------------------------
* background-color
--------------------------------------------- */
.bg-white {
background-color: var(--color-white-1) !important;
}
/* ---------------------------------------------
* font-wight
--------------------------------------------- */
.fw-normal {
font-weight: 500 !important;
}
.fw-bold {
font-weight: 700 !important;
}
/* ---------------------------------------------
* text-align
--------------------------------------------- */
.txt-al-center {
text-align: center !important;
}
.txt-al-right {
text-align: right !important;
}
.txt-al-left {
text-align: left !important;
}
/* ---------------------------------------------
* クリックで開閉するコンテンツアコーディオン (複数開閉)
--------------------------------------------- */
.js-acc-target {
display: none;
}
/* ---------------------------------------------
* Tel-disabled
--------------------------------------------- */
.js-tel-disabled {
cursor: default;
pointer-events: none;
}
@media print and (min-width: 751px), screen and (min-width: 751px) {
.pc-hide {
display: none !important;
}
}
@media print and (max-width: 750px), screen and (max-width: 750px) {
.sp-hide {
display: none !important;
}
}
/* ---------------------------------------------
* margin-top
--------------------------------------------- */
.mgt-pc--0 {
margin-top: 0 !important;
}
.mgt-pc--5 {
margin-top: 5px !important;
}
.mgt-pc--10 {
margin-top: 10px !important;
}
.mgt-pc--15 {
margin-top: 15px !important;
}
.mgt-pc--20 {
margin-top: 20px !important;
}
.mgt-pc--25 {
margin-top: 25px !important;
}
.mgt-pc--30 {
margin-top: 30px !important;
}
.mgt-pc--35 {
margin-top: 35px !important;
}
.mgt-pc--40 {
margin-top: 40px !important;
}
.mgt-pc--45 {
margin-top: 45px !important;
}
.mgt-pc--50 {
margin-top: 50px !important;
}
.mgt-pc--55 {
margin-top: 55px !important;
}
.mgt-pc--60 {
margin-top: 60px !important;
}
.mgt-pc--65 {
margin-top: 65px !important;
}
.mgt-pc--70 {
margin-top: 70px !important;
}
.mgt-pc--75 {
margin-top: 75px !important;
}
.mgt-pc--80 {
margin-top: 80px !important;
}
.mgt-pc--85 {
margin-top: 85px !important;
}
.mgt-pc--90 {
margin-top: 90px !important;
}
.mgt-pc--95 {
margin-top: 95px !important;
}
.mgt-pc--100 {
margin-top: 100px !important;
}
.mgt-pc--105 {
margin-top: 105px !important;
}
.mgt-pc--110 {
margin-top: 110px !important;
}
.mgt-pc--115 {
margin-top: 115px !important;
}
.mgt-pc--120 {
margin-top: 120px !important;
}
.mgt-pc--125 {
margin-top: 125px !important;
}
.mgt-pc--130 {
margin-top: 130px !important;
}
.mgt-pc--135 {
margin-top: 135px !important;
}
.mgt-pc--140 {
margin-top: 140px !important;
}
.mgt-pc--145 {
margin-top: 145px !important;
}
.mgt-pc--150 {
margin-top: 150px !important;
}
.mgt-pc--155 {
margin-top: 155px !important;
}
.mgt-pc--160 {
margin-top: 160px !important;
}
.mgt-pc--165 {
margin-top: 165px !important;
}
.mgt-pc--170 {
margin-top: 170px !important;
}
.mgt-pc--175 {
margin-top: 175px !important;
}
.mgt-pc--180 {
margin-top: 180px !important;
}
.mgt-pc--185 {
margin-top: 185px !important;
}
.mgt-pc--190 {
margin-top: 190px !important;
}
.mgt-pc--195 {
margin-top: 195px !important;
}
.mgt-pc--200 {
margin-top: 200px !important;
}
.mgt-pc--205 {
margin-top: 205px !important;
}
.mgt-pc--210 {
margin-top: 210px !important;
}
.mgt-pc--215 {
margin-top: 215px !important;
}
.mgt-pc--220 {
margin-top: 220px !important;
}
.mgt-pc--225 {
margin-top: 225px !important;
}
.mgt-pc--230 {
margin-top: 230px !important;
}
.mgt-pc--235 {
margin-top: 235px !important;
}
.mgt-pc--240 {
margin-top: 240px !important;
}
.mgt-pc--245 {
margin-top: 245px !important;
}
.mgt-pc--250 {
margin-top: 250px !important;
}
@media screen and (max-width: 750px) {
.mgt-sp--0 {
margin-top: 0 !important;
}
.mgt-sp--5 {
margin-top: calc(5 / var(--design-width) * 100vw) !important;
}
.mgt-sp--10 {
margin-top: calc(10 / var(--design-width) * 100vw) !important;
}
.mgt-sp--15 {
margin-top: calc(15 / var(--design-width) * 100vw) !important;
}
.mgt-sp--20 {
margin-top: calc(20 / var(--design-width) * 100vw) !important;
}
.mgt-sp--25 {
margin-top: calc(25 / var(--design-width) * 100vw) !important;
}
.mgt-sp--30 {
margin-top: calc(30 / var(--design-width) * 100vw) !important;
}
.mgt-sp--35 {
margin-top: calc(35 / var(--design-width) * 100vw) !important;
}
.mgt-sp--40 {
margin-top: calc(40 / var(--design-width) * 100vw) !important;
}
.mgt-sp--45 {
margin-top: calc(45 / var(--design-width) * 100vw) !important;
}
.mgt-sp--50 {
margin-top: calc(50 / var(--design-width) * 100vw) !important;
}
.mgt-sp--55 {
margin-top: calc(55 / var(--design-width) * 100vw) !important;
}
.mgt-sp--60 {
margin-top: calc(60 / var(--design-width) * 100vw) !important;
}
.mgt-sp--65 {
margin-top: calc(65 / var(--design-width) * 100vw) !important;
}
.mgt-sp--70 {
margin-top: calc(70 / var(--design-width) * 100vw) !important;
}
.mgt-sp--75 {
margin-top: calc(75 / var(--design-width) * 100vw) !important;
}
.mgt-sp--80 {
margin-top: calc(80 / var(--design-width) * 100vw) !important;
}
.mgt-sp--85 {
margin-top: calc(85 / var(--design-width) * 100vw) !important;
}
.mgt-sp--90 {
margin-top: calc(90 / var(--design-width) * 100vw) !important;
}
.mgt-sp--95 {
margin-top: calc(95 / var(--design-width) * 100vw) !important;
}
.mgt-sp--100 {
margin-top: calc(100 / var(--design-width) * 100vw) !important;
}
.mgt-sp--105 {
margin-top: calc(105 / var(--design-width) * 100vw) !important;
}
.mgt-sp--110 {
margin-top: calc(110 / var(--design-width) * 100vw) !important;
}
.mgt-sp--115 {
margin-top: calc(115 / var(--design-width) * 100vw) !important;
}
.mgt-sp--120 {
margin-top: calc(120 / var(--design-width) * 100vw) !important;
}
.mgt-sp--125 {
margin-top: calc(125 / var(--design-width) * 100vw) !important;
}
.mgt-sp--130 {
margin-top: calc(130 / var(--design-width) * 100vw) !important;
}
.mgt-sp--135 {
margin-top: calc(135 / var(--design-width) * 100vw) !important;
}
.mgt-sp--140 {
margin-top: calc(140 / var(--design-width) * 100vw) !important;
}
.mgt-sp--145 {
margin-top: calc(145 / var(--design-width) * 100vw) !important;
}
.mgt-sp--150 {
margin-top: calc(150 / var(--design-width) * 100vw) !important;
}
.mgt-sp--155 {
margin-top: calc(155 / var(--design-width) * 100vw) !important;
}
.mgt-sp--160 {
margin-top: calc(160 / var(--design-width) * 100vw) !important;
}
.mgt-sp--165 {
margin-top: calc(165 / var(--design-width) * 100vw) !important;
}
.mgt-sp--170 {
margin-top: calc(170 / var(--design-width) * 100vw) !important;
}
.mgt-sp--175 {
margin-top: calc(175 / var(--design-width) * 100vw) !important;
}
.mgt-sp--180 {
margin-top: calc(180 / var(--design-width) * 100vw) !important;
}
.mgt-sp--185 {
margin-top: calc(185 / var(--design-width) * 100vw) !important;
}
.mgt-sp--190 {
margin-top: calc(190 / var(--design-width) * 100vw) !important;
}
.mgt-sp--195 {
margin-top: calc(195 / var(--design-width) * 100vw) !important;
}
.mgt-sp--200 {
margin-top: calc(200 / var(--design-width) * 100vw) !important;
}
.mgt-sp--205 {
margin-top: calc(205 / var(--design-width) * 100vw) !important;
}
.mgt-sp--210 {
margin-top: calc(210 / var(--design-width) * 100vw) !important;
}
.mgt-sp--215 {
margin-top: calc(215 / var(--design-width) * 100vw) !important;
}
.mgt-sp--220 {
margin-top: calc(220 / var(--design-width) * 100vw) !important;
}
.mgt-sp--225 {
margin-top: calc(225 / var(--design-width) * 100vw) !important;
}
.mgt-sp--230 {
margin-top: calc(230 / var(--design-width) * 100vw) !important;
}
.mgt-sp--235 {
margin-top: calc(235 / var(--design-width) * 100vw) !important;
}
.mgt-sp--240 {
margin-top: calc(240 / var(--design-width) * 100vw) !important;
}
.mgt-sp--245 {
margin-top: calc(245 / var(--design-width) * 100vw) !important;
}
.mgt-sp--250 {
margin-top: calc(250 / var(--design-width) * 100vw) !important;
}
}
/* ---------------------------------------------
* margin-bottom
--------------------------------------------- */
.mgb-pc--0 {
margin-bottom: 0 !important;
}
.mgb-pc--5 {
margin-bottom: 5px !important;
}
.mgb-pc--10 {
margin-bottom: 10px !important;
}
.mgb-pc--15 {
margin-bottom: 15px !important;
}
.mgb-pc--20 {
margin-bottom: 20px !important;
}
.mgb-pc--25 {
margin-bottom: 25px !important;
}
.mgb-pc--30 {
margin-bottom: 30px !important;
}
.mgb-pc--35 {
margin-bottom: 35px !important;
}
.mgb-pc--40 {
margin-bottom: 40px !important;
}
.mgb-pc--45 {
margin-bottom: 45px !important;
}
.mgb-pc--50 {
margin-bottom: 50px !important;
}
.mgb-pc--55 {
margin-bottom: 55px !important;
}
.mgb-pc--60 {
margin-bottom: 60px !important;
}
.mgb-pc--65 {
margin-bottom: 65px !important;
}
.mgb-pc--70 {
margin-bottom: 70px !important;
}
.mgb-pc--75 {
margin-bottom: 75px !important;
}
.mgb-pc--80 {
margin-bottom: 80px !important;
}
.mgb-pc--85 {
margin-bottom: 85px !important;
}
.mgb-pc--90 {
margin-bottom: 90px !important;
}
.mgb-pc--95 {
margin-bottom: 95px !important;
}
.mgb-pc--100 {
margin-bottom: 100px !important;
}
.mgb-pc--105 {
margin-bottom: 105px !important;
}
.mgb-pc--110 {
margin-bottom: 110px !important;
}
.mgb-pc--115 {
margin-bottom: 115px !important;
}
.mgb-pc--120 {
margin-bottom: 120px !important;
}
.mgb-pc--125 {
margin-bottom: 125px !important;
}
.mgb-pc--130 {
margin-bottom: 130px !important;
}
.mgb-pc--135 {
margin-bottom: 135px !important;
}
.mgb-pc--140 {
margin-bottom: 140px !important;
}
.mgb-pc--145 {
margin-bottom: 145px !important;
}
.mgb-pc--150 {
margin-bottom: 150px !important;
}
.mgb-pc--155 {
margin-bottom: 155px !important;
}
.mgb-pc--160 {
margin-bottom: 160px !important;
}
.mgb-pc--165 {
margin-bottom: 165px !important;
}
.mgb-pc--170 {
margin-bottom: 170px !important;
}
.mgb-pc--175 {
margin-bottom: 175px !important;
}
.mgb-pc--180 {
margin-bottom: 180px !important;
}
.mgb-pc--185 {
margin-bottom: 185px !important;
}
.mgb-pc--190 {
margin-bottom: 190px !important;
}
.mgb-pc--195 {
margin-bottom: 195px !important;
}
.mgb-pc--200 {
margin-bottom: 200px !important;
}
.mgb-pc--205 {
margin-bottom: 205px !important;
}
.mgb-pc--210 {
margin-bottom: 210px !important;
}
.mgb-pc--215 {
margin-bottom: 215px !important;
}
.mgb-pc--220 {
margin-bottom: 220px !important;
}
.mgb-pc--225 {
margin-bottom: 225px !important;
}
.mgb-pc--230 {
margin-bottom: 230px !important;
}
.mgb-pc--235 {
margin-bottom: 235px !important;
}
.mgb-pc--240 {
margin-bottom: 240px !important;
}
.mgb-pc--245 {
margin-bottom: 245px !important;
}
.mgb-pc--250 {
margin-bottom: 250px !important;
}
@media screen and (max-width: 750px) {
.mgb-sp--0 {
margin-bottom: 0 !important;
}
.mgb-sp--5 {
margin-bottom: calc(5 / var(--design-width) * 100vw) !important;
}
.mgb-sp--10 {
margin-bottom: calc(10 / var(--design-width) * 100vw) !important;
}
.mgb-sp--15 {
margin-bottom: calc(15 / var(--design-width) * 100vw) !important;
}
.mgb-sp--20 {
margin-bottom: calc(20 / var(--design-width) * 100vw) !important;
}
.mgb-sp--25 {
margin-bottom: calc(25 / var(--design-width) * 100vw) !important;
}
.mgb-sp--30 {
margin-bottom: calc(30 / var(--design-width) * 100vw) !important;
}
.mgb-sp--35 {
margin-bottom: calc(35 / var(--design-width) * 100vw) !important;
}
.mgb-sp--40 {
margin-bottom: calc(40 / var(--design-width) * 100vw) !important;
}
.mgb-sp--45 {
margin-bottom: calc(45 / var(--design-width) * 100vw) !important;
}
.mgb-sp--50 {
margin-bottom: calc(50 / var(--design-width) * 100vw) !important;
}
.mgb-sp--55 {
margin-bottom: calc(55 / var(--design-width) * 100vw) !important;
}
.mgb-sp--60 {
margin-bottom: calc(60 / var(--design-width) * 100vw) !important;
}
.mgb-sp--65 {
margin-bottom: calc(65 / var(--design-width) * 100vw) !important;
}
.mgb-sp--70 {
margin-bottom: calc(70 / var(--design-width) * 100vw) !important;
}
.mgb-sp--75 {
margin-bottom: calc(75 / var(--design-width) * 100vw) !important;
}
.mgb-sp--80 {
margin-bottom: calc(80 / var(--design-width) * 100vw) !important;
}
.mgb-sp--85 {
margin-bottom: calc(85 / var(--design-width) * 100vw) !important;
}
.mgb-sp--90 {
margin-bottom: calc(90 / var(--design-width) * 100vw) !important;
}
.mgb-sp--95 {
margin-bottom: calc(95 / var(--design-width) * 100vw) !important;
}
.mgb-sp--100 {
margin-bottom: calc(100 / var(--design-width) * 100vw) !important;
}
.mgb-sp--105 {
margin-bottom: calc(105 / var(--design-width) * 100vw) !important;
}
.mgb-sp--110 {
margin-bottom: calc(110 / var(--design-width) * 100vw) !important;
}
.mgb-sp--115 {
margin-bottom: calc(115 / var(--design-width) * 100vw) !important;
}
.mgb-sp--120 {
margin-bottom: calc(120 / var(--design-width) * 100vw) !important;
}
.mgb-sp--125 {
margin-bottom: calc(125 / var(--design-width) * 100vw) !important;
}
.mgb-sp--130 {
margin-bottom: calc(130 / var(--design-width) * 100vw) !important;
}
.mgb-sp--135 {
margin-bottom: calc(135 / var(--design-width) * 100vw) !important;
}
.mgb-sp--140 {
margin-bottom: calc(140 / var(--design-width) * 100vw) !important;
}
.mgb-sp--145 {
margin-bottom: calc(145 / var(--design-width) * 100vw) !important;
}
.mgb-sp--150 {
margin-bottom: calc(150 / var(--design-width) * 100vw) !important;
}
.mgb-sp--155 {
margin-bottom: calc(155 / var(--design-width) * 100vw) !important;
}
.mgb-sp--160 {
margin-bottom: calc(160 / var(--design-width) * 100vw) !important;
}
.mgb-sp--165 {
margin-bottom: calc(165 / var(--design-width) * 100vw) !important;
}
.mgb-sp--170 {
margin-bottom: calc(170 / var(--design-width) * 100vw) !important;
}
.mgb-sp--175 {
margin-bottom: calc(175 / var(--design-width) * 100vw) !important;
}
.mgb-sp--180 {
margin-bottom: calc(180 / var(--design-width) * 100vw) !important;
}
.mgb-sp--185 {
margin-bottom: calc(185 / var(--design-width) * 100vw) !important;
}
.mgb-sp--190 {
margin-bottom: calc(190 / var(--design-width) * 100vw) !important;
}
.mgb-sp--195 {
margin-bottom: calc(195 / var(--design-width) * 100vw) !important;
}
.mgb-sp--200 {
margin-bottom: calc(200 / var(--design-width) * 100vw) !important;
}
.mgb-sp--205 {
margin-bottom: calc(205 / var(--design-width) * 100vw) !important;
}
.mgb-sp--210 {
margin-bottom: calc(210 / var(--design-width) * 100vw) !important;
}
.mgb-sp--215 {
margin-bottom: calc(215 / var(--design-width) * 100vw) !important;
}
.mgb-sp--220 {
margin-bottom: calc(220 / var(--design-width) * 100vw) !important;
}
.mgb-sp--225 {
margin-bottom: calc(225 / var(--design-width) * 100vw) !important;
}
.mgb-sp--230 {
margin-bottom: calc(230 / var(--design-width) * 100vw) !important;
}
.mgb-sp--235 {
margin-bottom: calc(235 / var(--design-width) * 100vw) !important;
}
.mgb-sp--240 {
margin-bottom: calc(240 / var(--design-width) * 100vw) !important;
}
.mgb-sp--245 {
margin-bottom: calc(245 / var(--design-width) * 100vw) !important;
}
.mgb-sp--250 {
margin-bottom: calc(250 / var(--design-width) * 100vw) !important;
}
}