@charset "UTF-8";
@charset "UTF-8";

 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&family=Roboto:wght@100;300;400;500;700;900&display=swap");
.m-pc-hidden {
display: none;
}
@media screen and (max-width: 768px) {
.m-pc-hidden {
display: inline-block;
}
}
.m-sp-hidden {
display: inline-block;
}
@media screen and (max-width: 768px) {
.m-sp-hidden {
display: none;
}
}
.visually-hidden { border: 0;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}   * {
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}   html {
line-height: 1.15; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }   body {
margin: 0;
} main {
display: block;
}  p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
margin: 0;
}  h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
line-height: inherit;
font-weight: inherit;
margin: 0;
}  ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}  dt {
font-weight: bold;
}
dd {
margin-left: 0;
}   hr {
box-sizing: content-box; height: 0; overflow: visible; border: 0;
border-top: 1px solid;
margin: 0;
clear: both;
color: inherit;
} pre {
font-family: monospace, monospace; font-size: inherit; }
address {
font-style: inherit;
}   a {
background-color: transparent;
text-decoration: none;
color: inherit;
} abbr[title] {
border-bottom: none; text-decoration: underline; -webkit-text-decoration: underline dotted;
text-decoration: underline dotted; } b,
strong {
font-weight: bolder;
} code,
kbd,
samp {
font-family: monospace, monospace; font-size: inherit; } small {
font-size: 80%;
} sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}   img {
border-style: none;
vertical-align: bottom;
}
embed,
object,
iframe {
border: 0;
vertical-align: bottom;
}   button,
input,
optgroup,
select,
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
vertical-align: middle;
color: inherit;
font: inherit;
border: 0;
background: transparent;
padding: 0;
margin: 0;
outline: 0;
border-radius: 0;
text-align: inherit;
} [type=checkbox] {
-webkit-appearance: checkbox;
-moz-appearance: checkbox;
appearance: checkbox;
}
[type=radio] {
-webkit-appearance: radio;
-moz-appearance: radio;
appearance: radio;
} button,
input { overflow: visible;
} button,
select { text-transform: none;
} button,
[type=button],
[type=reset],
[type=submit] {
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
button[disabled],
[type=button][disabled],
[type=reset][disabled],
[type=submit][disabled] {
cursor: default;
} button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
border-style: none;
padding: 0;
} button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
outline: 1px dotted ButtonText;
} select::-ms-expand {
display: none;
} option {
padding: 0;
} fieldset {
margin: 0;
padding: 0;
border: 0;
min-width: 0;
} legend {
color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } progress {
vertical-align: baseline;
} textarea {
overflow: auto;
} [type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto;
} [type=search] {
outline-offset: -2px; } [type=search]::-webkit-search-decoration {
-webkit-appearance: none;
} ::-webkit-file-upload-button {
-webkit-appearance: button; font: inherit; } label[for] {
cursor: pointer;
}   details {
display: block;
} summary {
display: list-item;
} [contenteditable] {
outline: none;
}  table {
border-collapse: collapse;
border-spacing: 0;
}
caption {
text-align: left;
}
td,
th {
vertical-align: top;
padding: 0;
}
th {
text-align: left;
font-weight: bold;
}   template {
display: none;
} [hidden] {
display: none;
}
html {
font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}
body {
color: #002151;
font-size: 15px;
font-size: 0.9375rem;
font-weight: 500;
line-height: 1.8;
}
@media screen and (max-width: 768px) {
body {
font-size: 14px;
font-size: 0.875rem;
}
}
a:hover {
text-decoration: none;
}
a:hover img {
opacity: 0.8;
}
a img {
transition-property: opacity;
transition-duration: 0.2s;
backface-visibility: hidden;
}
img {
max-width: 100%;
height: auto;
}
button:focus,
input:focus,
optgroup:focus,
select:focus,
textarea:focus {
outline: -webkit-focus-ring-color auto 1px;
outline-color: -webkit-focus-ring-color;
outline-style: auto;
outline-width: 1px;
}
small {
font-size: inherit;
}
.m-wrapper {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width: 1000px) {
.m-wrapper {
max-width: 91.25%;
}
}
.m-bgblue {
background-color: #58A5BF;
}
.m-bgorange {
background-color: #F29B87;
}
.m-color01 {
color: #58A5BF;
}
.m-color02 {
color: #F29B87;
}
.m-tellink {
pointer-events: none;
}
@media screen and (max-width: 768px) {
.m-tellink {
pointer-events: auto;
text-decoration: underline;
}
}
.for-ie {
display: none;
width: 100%;
color: #fff;
letter-spacing: 0.05em;
padding: 25px 4.375%;
background-color: #e83e34;
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
.for-ie .m-wrapper {
position: relative;
padding-right: 100px;
}
.for-ie a {
text-decoration: underline;
}
.for-ie a:hover {
text-decoration: none;
}
.for-ie button {
width: 120px;
text-align: center;
line-height: 1;
padding: 10px 10px 12px;
border: 1px solid #fff;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.for-ie button:focus {
outline: none;
}
.tCenter {
text-align: center !important;
}
.tRight {
text-align: right !important;
}
.tLeft {
text-align: left !important;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
.mT0 {
margin-top: 0px !important;
}
.mT5 {
margin-top: 5px !important;
}
.mT10 {
margin-top: 10px !important;
}
.mT15 {
margin-top: 15px !important;
}
.mT20 {
margin-top: 20px !important;
}
.mT25 {
margin-top: 25px !important;
}
.mT30 {
margin-top: 30px !important;
}
.mT35 {
margin-top: 35px !important;
}
.mT40 {
margin-top: 40px !important;
}
.mT45 {
margin-top: 45px !important;
}
.mT50 {
margin-top: 50px !important;
}
.mB0 {
margin-bottom: 0px !important;
}
.mB5 {
margin-bottom: 5px !important;
}
.mB10 {
margin-bottom: 10px !important;
}
.mB15 {
margin-bottom: 15px !important;
}
.mB20 {
margin-bottom: 20px !important;
}
.mB25 {
margin-bottom: 25px !important;
}
.mB30 {
margin-bottom: 30px !important;
}
.mB35 {
margin-bottom: 35px !important;
}
.mB40 {
margin-bottom: 40px !important;
}
.mB45 {
margin-bottom: 45px !important;
}
.mB50 {
margin-bottom: 50px !important;
}
.mL0 {
margin-left: 0px !important;
}
.mL10 {
margin-left: 10px !important;
}
.mL20 {
margin-left: 20px !important;
}
.mL30 {
margin-left: 30px !important;
}
.mR0 {
margin-right: 0px !important;
}
.mR10 {
margin-right: 10px !important;
}
.mR20 {
margin-right: 20px !important;
}
.mR30 {
margin-right: 30px !important;
}
.pT0 {
padding-top: 0px !important;
}
.pT5 {
padding-top: 5px !important;
}
.pT10 {
padding-top: 10px !important;
}
.pT15 {
padding-top: 15px !important;
}
.pT20 {
padding-top: 20px !important;
}
.pT25 {
padding-top: 25px !important;
}
.pT30 {
padding-top: 30px !important;
}
.pT35 {
padding-top: 35px !important;
}
.pT40 {
padding-top: 40px !important;
}
.pT45 {
padding-top: 45px !important;
}
.pT50 {
padding-top: 50px !important;
}
.pB0 {
padding-bottom: 0px !important;
}
.pB5 {
padding-bottom: 5px !important;
}
.pB10 {
padding-bottom: 10px !important;
}
.pB15 {
padding-bottom: 15px !important;
}
.pB20 {
padding-bottom: 20px !important;
}
.pB25 {
padding-bottom: 25px !important;
}
.pB30 {
padding-bottom: 30px !important;
}
.pB35 {
padding-bottom: 35px !important;
}
.pB40 {
padding-bottom: 40px !important;
}
.pB45 {
padding-bottom: 45px !important;
}
.pB50 {
padding-bottom: 50px !important;
}
.pL0 {
padding-left: 0px !important;
}
.pL10 {
padding-left: 10px !important;
}
.pL20 {
padding-left: 20px !important;
}
.pL30 {
padding-left: 30px !important;
}
.pR0 {
padding-right: 0px !important;
}
.pR10 {
padding-right: 10px !important;
}
.pR20 {
padding-right: 20px !important;
}
.pR30 {
padding-right: 30px !important;
}
body {
overflow-x: hidden;
}
body.is-fix {
height: 100vh;
overflow: hidden;
}
@media screen and (max-width: 1000px) {
.m-wrapper {
max-width: 91.6%;
}
}
@media screen and (max-width: 768px) {
.m-wrapper {
max-width: 100%;
padding: 0 20px;
}
}
.m-tablet-hidden {
display: none;
}
@media screen and (max-width: 1000px) {
.m-tablet-hidden {
display: block;
}
}
.fz-roboto {
font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}
.fz-roboto {
font-family: "Roboto", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}
.fw-900 {
font-weight: 900;
}
.fz-29 {
font-size: 29px;
font-size: 1.8125rem;
}
.fz-35 {
font-size: 35px;
font-size: 2.1875rem;
}
.fz-50 {
font-size: 50px;
font-size: 3.125rem;
}
.fz-20 {
font-size: 20px;
font-size: 1.25rem;
}
.fz-25 {
font-size: 25px;
font-size: 1.5625rem;
}
.fz-43 {
font-size: 43px;
font-size: 2.6875rem;
}
.fz-75 {
font-size: 75px;
font-size: 4.6875rem;
}
.fz-100 {
font-size: 100px;
font-size: 6.25rem;
}
.m-color-yellow {
color: #fdf107;
}
.m-bg-color {
background: #002151;
}
.m-bg-color01 {
background: #002151;
}
@media screen and (max-width: 1000px) {
.m-bg-color01 {
background: none;
}
}
.m-bg-blue {
background: #d7eefd;
}
.m-bg-blue01 {
background: #519ad7;
}
.m-bg-gray {
background: #eaeaea;
}
.border-bottom {
border-bottom: 3px solid;
padding-bottom: 5px;
}
.m-border-shadow {
border-radius: 10px;
border: 2px solid #002151;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
}
.l-header {
position: fixed;
width: 100%;
top: 0;
left: 0;
background-color: transparent;
z-index: 1999;
height: 120px;
transition: 0.2s ease-in-out;
}
@media screen and (max-width: 1000px) {
.l-header {
position: absolute;
padding-right: 60px;
}
}
@media screen and (max-width: 768px) {
.l-header {
height: 70px;
}
}
.l-header.bg-white {
background: #fff;
}
.l-header .m-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
}
@media screen and (max-width: 1000px) {
.l-header .m-wrapper {
max-width: 100%;
padding: 0 40px;
}
}
@media screen and (max-width: 768px) {
.l-header .m-wrapper {
padding: 0 0 0 20px;
}
}
.l-header .m-gnav-menu {
display: flex;
align-items: center;
}
@media screen and (max-width: 1000px) {
.l-header .m-gnav-menu {
display: none;
position: fixed;
top: 120px;
left: 0;
width: 100%;
background: #fdf107;
text-align: center;
padding-top: 70px;
padding-bottom: 65px;
overflow: auto;
max-height: 100%;
height: 100%;
}
}
@media screen and (max-width: 768px) {
.l-header .m-gnav-menu {
top: 0;
padding-top: 142px;
padding-bottom: 66px;
}
}
@media screen and (max-width: 1000px) {
.l-header .m-gnav-menu .m-gnav-item {
width: 66%;
margin: 0 auto;
}
}
.l-header .m-gnav-menu .m-gnav-item a {
font-size: 15px;
font-size: 0.9375rem;
font-weight: 700;
transition: 0.2s ease-in-out;
}
@media screen and (max-width: 1000px) {
.l-header .m-gnav-menu .m-gnav-item a {
color: #002151;
margin: 0 0 62px;
padding-bottom: 20px;
display: block;
font-size: 20px;
font-size: 1.25rem;
position: relative;
}
}
@media screen and (max-width: 1000px) and (max-width: 768px) {
.l-header .m-gnav-menu .m-gnav-item a {
padding-bottom: 10px;
margin: 0 0 50px;
font-size: 15px;
font-size: 0.9375rem;
}
}
@media screen and (max-width: 1000px) {
.l-header .m-gnav-menu .m-gnav-item a::before {
content: "";
background: #002151;
width: 53px;
height: 3px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
}
@media screen and (max-width: 1000px) and (max-width: 768px) {
.l-header .m-gnav-menu .m-gnav-item a::before {
width: 27px;
height: 2px;
}
}
.l-header .m-gnav-menu .m-gnav-item:not(:first-of-type) {
margin-left: 38px;
}
@media screen and (max-width: 1000px) {
.l-header .m-gnav-menu .m-gnav-item:not(:first-of-type) {
margin: 0 auto;
}
}
.l-header .m-gnav-menu li a {
position: relative;
}
.l-header .m-gnav-menu li a:after {
content: "";
position: absolute;
bottom: -5px;
left: 0;
right: 0;
margin: 0 auto;
height: 2px;
width: 0;
background: #002151;
transition: all 0.3s linear;
}
@media screen and (max-width: 1000px) {
.l-header .m-gnav-menu li a:after {
display: none;
}
}
.l-header .m-gnav-menu li:hover a:after {
width: 100%;
}
.l-header .m-logo {
max-width: 231px;
}
@media screen and (max-width: 768px) {
.l-header .m-logo {
max-width: 125px;
}
}
.l-header .m-gnav-btn {
display: none;
position: relative;
overflow: hidden;
}
@media screen and (max-width: 1000px) {
.l-header .m-gnav-btn {
display: block;
display: inline-block;
width: 53px;
height: 21px;
cursor: pointer;
margin-left: 40px;
position: fixed;
right: 4.375%;
z-index: 1;
}
}
@media screen and (max-width: 1000px) and (max-width: 768px) {
.l-header .m-gnav-btn {
margin-left: 20px;
}
}
@media screen and (max-width: 1000px) {
.l-header .m-gnav-btn span {
display: inline-block;
background: #002151;
position: absolute;
left: 0;
transition: 0.3s ease-in-out;
width: 53px;
height: 4px;
}
}
@media screen and (max-width: 1000px) and (max-width: 768px) {
.l-header .m-gnav-btn span {
width: 27px;
height: 2px;
}
}
@media screen and (max-width: 1000px) {
.l-header .m-gnav-btn span:nth-child(2) {
top: 15px;
}
}
@media screen and (max-width: 1000px) and (max-width: 768px) {
.l-header .m-gnav-btn span:nth-child(2) {
top: 8px;
}
}
@media screen and (max-width: 768px) {
.l-header .m-gnav-btn {
width: 27px;
height: 11px;
}
}
.l-header .m-gnav {
display: flex;
align-items: center;
flex: 1;
justify-content: flex-end;
}
@media screen and (max-width: 1000px) {
.l-header .m-gnav {
flex-direction: row-reverse;
justify-content: flex-start;
align-items: center;
}
}
.l-header .m-btn-contact {
margin-left: 19px;
transition: 0.2s ease-in-out;
max-width: 200px;
width: 100%;
height: 50px;
background: #4d64f0;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50px;
color: #fff;
}
@media screen and (max-width: 768px) {
.l-header .m-btn-contact {
margin-left: 0;
font-size: 12px;
font-size: 0.75rem;
max-width: 124px;
height: 40px;
}
}
.l-header .m-btn-contact:hover {
color: #4d64f0;
background: #fff;
border: 1px solid #4d64f0;
}
.l-header .m-close-menu {
display: none;
}
@media screen and (max-width: 1000px) {
.l-header .m-close-menu {
display: inline-block;
cursor: pointer;
}
}
@media screen and (max-width: 768px) {
.l-header .m-close-menu {
max-width: 35px;
margin-top: 42px;
}
}
.sec-worries {
position: relative;
}
@media screen and (max-width: 768px) {
.sec-worries:before {
content: "";
width: 149px;
height: 145px;
position: absolute;
bottom: -89px;
left: 0;
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/bg_worries_sp_bottom.png) top left no-repeat;
background-size: 100%;
z-index: -1;
}
}
.sec-merit {
position: relative;
}
@media screen and (max-width: 768px) {
.sec-merit:before, .sec-merit:after {
content: "";
position: absolute;
background-size: 100%;
z-index: -1;
}
.sec-merit:before {
width: 100%;
height: 644px;
top: 92px;
left: 0;
background: #d7eefd url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/bg_merit_sp_top.png) top center no-repeat;
background-size: 100%;
}
.sec-merit:after {
width: 113px;
height: 151px;
top: 144px;
right: 0;
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/bg_merit_02.png) top center no-repeat;
background-size: 100%;
}
}
.bg-content {
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/bg_sec_pc.png) top center no-repeat;
background-size: cover;
padding-top: 128px;
}
@media screen and (max-width: 768px) {
.bg-content {
padding-top: 70px;
background: none;
}
}
@media screen and (max-width: 768px) {
.m-background-blue {
background: #d7eefd;
margin: 0 -20px;
padding: 0 20px;
position: relative;
}
.m-background-blue:after {
content: "";
width: 100%;
height: 215px;
position: absolute;
bottom: -140px;
left: 0;
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/mg_merit_bottom_02.jpg) top center no-repeat;
background-size: 100%;
z-index: 1;
}
}
.m-design-image {
position: relative;
}
@media screen and (max-width: 768px) {
.m-design-image:before, .m-design-image:after {
content: "";
position: absolute;
}
.m-design-image:before {
width: 125px;
height: 164px;
top: 64px;
left: -20px;
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_design_02.png) top center no-repeat;
background-size: 100%;
z-index: -1;
}
.m-design-image:after {
width: 78px;
height: 76px;
top: 12px;
right: -20px;
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_design_01.png) top center no-repeat;
background-size: 100%;
z-index: 20;
pointer-events: none;
}
}
.m-mv {
position: relative;
}
@media screen and (max-width: 768px) {
.m-mv:before {
content: "";
width: 100%;
height: 1276px;
position: absolute;
top: 3px;
left: 0;
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/bg_top_mv_sp.png) top left no-repeat;
background-size: 100%;
z-index: -1;
}
}
.m-mv .m-wrapper {
position: relative;
}
.m-mv .m-mv-boximg {
position: absolute;
top: 0;
right: 48px;
z-index: 1;
}
@media screen and (max-width: 1000px) {
.m-mv .m-mv-boximg {
position: inherit;
margin-bottom: 30px;
}
}
@media screen and (max-width: 768px) {
.m-mv .m-mv-boximg {
position: inherit;
margin-bottom: 30px;
max-width: 297px;
margin-bottom: 0;
margin-inline: auto;
}
}
.m-mv .m-mv-text {
font-size: 22px;
font-size: 1.375rem;
line-height: 2.0454545455;
font-weight: 700;
margin-bottom: 20px;
padding-top: 13px;
letter-spacing: 0.05em;
}
@media screen and (max-width: 1000px) {
.m-mv .m-mv-text {
margin: 0 auto 54px;
max-width: 611px;
}
}
@media screen and (max-width: 768px) {
.m-mv .m-mv-text {
font-size: 15px;
font-size: 0.9375rem;
line-height: 2.2;
margin: 0 auto 20px;
max-width: 335px;
}
}
@media (max-width: 320px) {
.m-mv .m-mv-text {
font-size: 13px;
font-size: 0.8125rem;
}
}
.m-mv .m-bg-text01 {
padding-left: 28px;
}
@media screen and (max-width: 1000px) {
.m-mv .m-bg-text01 {
padding: 0 10px 0 18px;
}
}
@media screen and (max-width: 768px) {
.m-mv .m-bg-text01 {
padding: 0 16px;
}
}
.m-mv .m-bg-text02 {
margin-left: -26px;
}
@media screen and (max-width: 1000px) {
.m-mv .m-bg-text02 {
padding: 0 10px 0 18px;
margin-left: 166px;
}
}
@media screen and (max-width: 768px) {
.m-mv .m-bg-text02 {
padding: 0 11px;
margin-left: 110px;
}
}
.m-mv .m-mv-box01 {
margin-bottom: 10px;
}
@media screen and (max-width: 1000px) {
.m-mv .m-mv-box01 {
margin: 0 auto 54px;
max-width: 611px;
}
}
@media screen and (max-width: 768px) {
.m-mv .m-mv-box01 {
margin: 0 auto 26px;
max-width: 335px;
}
}
.m-mv .m-mv-text01 {
margin-left: 19px;
}
@media screen and (max-width: 768px) {
.m-mv .m-mv-text01 {
margin-left: 16px;
}
}
.m-mv .m-mv-text02 {
margin-left: 44px;
}
@media screen and (max-width: 768px) {
.m-mv .m-mv-text02 {
margin-left: 33px;
}
}
.m-mv .m-mv-title {
font-size: 63px;
font-size: 3.9375rem;
line-height: 1.8571428571;
color: #fff;
transform: skewX(-8deg);
letter-spacing: 0.05em;
position: relative;
z-index: 3;
}
@media screen and (max-width: 768px) {
.m-mv .m-mv-title {
font-size: 37px;
font-size: 2.3125rem;
line-height: 1.83;
margin-bottom: 8px;
}
.m-mv .m-mv-title .fz-50 {
font-size: 29px;
font-size: 1.8125rem;
}
}
@media (max-width: 320px) {
.m-mv .m-mv-title {
font-size: 26px;
font-size: 1.625rem;
}
}
.m-mv .m-mv-title01.m-pd-bg {
padding: 0 20px 0 18px;
}
@media screen and (max-width: 768px) {
.m-mv .m-mv-title01.m-pd-bg {
padding: 0 15px;
}
}
.m-mv .m-mv-title02.m-pd-bg {
padding: 0 10px 0 22px;
}
.m-mv .m-mv-title01 {
margin-left: 3px;
}
@media screen and (max-width: 768px) {
.m-mv .m-mv-title01 {
margin-left: 9px;
}
}
.m-mv .m-mv-title02 {
margin-left: 76px;
}
@media screen and (max-width: 768px) {
.m-mv .m-mv-title02 {
margin-left: 52px;
}
}
.m-mv .m-mv-price {
position: absolute;
top: 219px;
right: 7px;
width: 145px;
height: 145px;
border-radius: 50%;
border: 2px solid #002151;
display: flex;
justify-content: center;
background: #fdfdd7;
flex-wrap: wrap;
font-weight: 700;
flex-direction: column;
line-height: 1;
text-align: center;
padding-top: 13px;
z-index: 5;
}
@media screen and (max-width: 1000px) {
.m-mv .m-mv-price {
top: 359px;
}
}
@media screen and (max-width: 768px) {
.m-mv .m-mv-price {
top: 360px;
right: 190px;
width: 102px;
height: 102px;
padding-top: 5px;
}
}
@media screen and (max-width: 640px) {
.m-mv .m-mv-price {
right: 16px;
top: 381px;
}
}
.m-mv .m-mv-price01 {
width: 100%;
text-align: center;
font-size: 20px;
font-size: 1.25rem;
}
@media screen and (max-width: 768px) {
.m-mv .m-mv-price01 {
font-size: 14px;
font-size: 0.875rem;
}
}
.m-mv .m-mv-price02 {
font-size: 75px;
font-size: 4.6875rem;
margin-left: 15px;
}
@media screen and (max-width: 768px) {
.m-mv .m-mv-price02 {
font-size: 53px;
font-size: 3.3125rem;
}
}
.m-mv .m-mv-price03 {
font-size: 25px;
font-size: 1.5625rem;
}
@media screen and (max-width: 768px) {
.m-mv .m-mv-price03 {
font-size: 17px;
font-size: 1.0625rem;
}
}
.m-campaign-price {
margin-bottom: 25px;
text-align: center;
}
@media screen and (max-width: 768px) {
.m-campaign-price {
max-width: 310px;
text-align: center;
margin: 0 auto 31px;
}
}
.m-campaign-form .m-consultation-box {
margin-bottom: 53px;
padding-top: 80px;
}
@media screen and (max-width: 768px) {
.m-campaign-form .m-consultation-box {
margin-bottom: 50px;
}
}
.m-consultation-box {
font-size: 25px;
font-size: 1.5625rem;
font-weight: 700;
margin-bottom: 104px;
text-align: center;
}
@media screen and (max-width: 768px) {
.m-consultation-box {
font-size: 18px;
font-size: 1.125rem;
margin-bottom: 82px;
}
}
.m-consultation-text {
margin-bottom: 13px;
letter-spacing: 0.05em;
}
.icon-line-01 {
position: relative;
display: inline-block;
}
.icon-line-01:before, .icon-line-01:after {
content: "";
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_line_left.png) top left no-repeat;
position: absolute;
top: 50%;
z-index: 1;
transform: translateY(-50%);
width: 22px;
height: 35px;
background-size: 100%;
}
@media screen and (max-width: 768px) {
.icon-line-01:before, .icon-line-01:after {
width: 17px;
height: 26px;
}
}
.icon-line-01:before {
left: -30px;
}
@media screen and (max-width: 768px) {
.icon-line-01:before {
left: -31px;
}
}
.icon-line-01:after {
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_line_right.png) top left no-repeat;
right: -30px;
background-size: 100%;
}
@media screen and (max-width: 768px) {
.icon-line-01:after {
right: -31px;
}
}
.icon-arrow-03 {
position: relative;
}
.icon-arrow-03:after {
content: "";
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_arrow_03.png) top left no-repeat;
position: absolute;
top: 50%;
right: 40px;
z-index: 1;
transform: translateY(-50%);
width: 8px;
height: 12px;
background-size: 100%;
transition: 0.2s ease-in-out;
}
@media screen and (max-width: 768px) {
.icon-arrow-03:after {
width: 5px;
height: 7px;
right: 25px;
}
}
.icon-arrow-03:hover:after {
transform: translate(5px, -50%);
}
.m-consultation-btn {
max-width: 700px;
width: 100%;
height: 79px;
display: flex;
align-items: center;
justify-content: center;
background: #ff7800;
color: #fff;
border-radius: 79px;
margin: 0 auto;
transition: 0.2s ease-in-out;
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 768px) {
.m-consultation-btn {
max-width: 335px;
height: 63px;
font-size: 17px;
font-size: 1.0625rem;
}
}
@media (max-width: 320px) {
.m-consultation-btn {
font-size: 14px;
font-size: 0.875rem;
}
}
.m-circle-top {
position: relative;
}
.m-circle-top:before {
content: "";
background: #fdfdd7;
width: 270px;
height: 270px;
position: absolute;
top: -65px;
left: 50%;
transform: translateX(-50%);
border: 2px solid #002151;
border-radius: 50%;
z-index: -1;
}
@media screen and (max-width: 768px) {
.m-circle-top:before {
width: 145px;
height: 145px;
top: -37px;
}
}
.m-worries-inner {
padding: 69px 70px 48px;
background: #fdfdd7;
}
@media screen and (max-width: 1000px) {
.m-worries-inner {
padding: 61px 30px 45px;
}
}
@media screen and (max-width: 768px) {
.m-worries-inner {
padding-bottom: 50px;
}
.m-worries-inner .m-box-icon img {
max-width: 70px;
}
}
.m-box-icon {
text-align: center;
width: 100%;
background: #fdfdd7;
border-radius: 50%;
width: 270px;
height: 270px;
display: block;
position: absolute;
top: -61px;
left: 50%;
transform: translateX(-50%);
padding-top: 36px;
}
@media screen and (max-width: 768px) {
.m-box-icon {
width: 145px;
height: 145px;
top: -33px;
padding-top: 17px;
}
}
.m-text-icon {
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.m-box-title {
text-align: center;
position: relative;
z-index: 5;
letter-spacing: 0.1em;
font-weight: 700;
}
.m-subtitle-01 {
font-size: 25px;
font-size: 1.5625rem;
margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
.m-subtitle-01 {
font-size: 17px;
font-size: 1.0625rem;
margin-bottom: 25px;
}
}
.m-titl-01 {
font-size: 30px;
font-size: 1.875rem;
margin-bottom: 10px;
text-align: center;
letter-spacing: 0.1em;
font-weight: 700;
}
@media screen and (max-width: 768px) {
.m-titl-01 {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.75;
}
}
.icon-dot {
position: relative;
}
.icon-dot:before {
content: "";
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_dot.png) top center no-repeat;
position: absolute;
bottom: -12px;
left: 50%;
width: 100%;
height: 4px;
z-index: 1;
transform: translateX(-50%);
background-size: 100%;
}
@media screen and (max-width: 768px) {
.icon-dot:before {
background-image: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_dot_sp.png);
width: 97%;
height: 3px;
bottom: -7px;
}
}
.m-list-worries ul {
display: flex;
justify-content: space-between;
}
@media screen and (max-width: 768px) {
.m-list-worries ul {
display: block;
text-align: center;
}
}
.m-list-worries ul li {
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_circle.png) top center no-repeat;
background-size: 100%;
max-width: 254px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
text-align: center;
padding: 35px 0 82px;
position: relative;
z-index: 6;
}
@media screen and (max-width: 1000px) {
.m-list-worries ul li {
padding-top: 30px;
padding-bottom: 105px;
}
}
@media screen and (max-width: 768px) {
.m-list-worries ul li {
max-width: 242px;
height: 254px;
margin: 0 auto;
padding-top: 55px;
}
}
.m-list-worries ul li .m-worries-num {
font-size: 30px;
font-size: 1.875rem;
font-weight: 700;
line-height: 1.6666666667;
}
@media screen and (max-width: 1000px) {
.m-list-worries ul li .m-worries-num {
font-size: 28px;
font-size: 1.75rem;
}
}
@media screen and (max-width: 768px) {
.m-list-worries ul li .m-worries-num {
line-height: 2;
}
}
.m-list-worries ul li .m-worries-text {
font-weight: 700;
line-height: 2;
}
@media screen and (max-width: 1000px) {
.m-list-worries ul li .m-worries-text {
font-size: 13px;
font-size: 0.8125rem;
}
}
.m-list-worries ul li .m-worries-title {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.75;
font-weight: 700;
letter-spacing: 0.1em;
}
@media screen and (max-width: 1000px) {
.m-list-worries ul li .m-worries-title {
font-size: 18px;
font-size: 1.125rem;
}
}
.m-list-worries ul li.m-worries-item1 {
margin-top: 40px;
}
@media screen and (max-width: 768px) {
.m-list-worries ul li.m-worries-item1 {
margin-top: 24px;
}
}
.m-list-worries ul li.m-worries-item2 {
padding-top: 0;
}
@media screen and (max-width: 768px) {
.m-list-worries ul li.m-worries-item2 {
padding-top: 45px;
}
.m-list-worries ul li.m-worries-item2.icon-arrow-bottom:after {
display: none;
}
}
@media screen and (max-width: 768px) {
.m-list-worries ul li:not(:last-child) {
margin-bottom: 21px;
}
}
.m-list-worries ul li.m-worries-item3.icon-arrow-bottom:after {
display: none;
}
@media screen and (max-width: 768px) {
.m-list-worries ul li.m-worries-item3.icon-arrow-bottom:after {
display: block;
top: 100%;
width: 24px;
height: 153px;
background-size: 100% 100%;
}
}
.icon-people {
position: relative;
}
.icon-people:before, .icon-people:after {
content: "";
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_women.png) top center no-repeat;
position: absolute;
top: -2px;
z-index: 1;
transform: translateY(-50%);
width: 133px;
height: 177px;
background-size: 100%;
}
@media screen and (max-width: 768px) {
.icon-people:before, .icon-people:after {
top: -100px;
width: 77px;
height: 102px;
background-image: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_women_sp.png);
}
}
@media screen and (max-width: 640px) {
.icon-people:before, .icon-people:after {
top: -71px;
width: 75px;
}
}
.icon-people:before {
left: 6px;
}
@media screen and (max-width: 640px) {
.icon-people:before {
left: -24px;
}
}
.icon-people:after {
width: 139px;
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_man.png) top center no-repeat;
right: -6px;
background-size: 100%;
}
@media screen and (max-width: 768px) {
.icon-people:after {
width: 78px;
right: -24px;
background-image: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_man_sp.png);
}
}
.icon-arrow-bottom {
position: relative;
}
.icon-arrow-bottom:after {
content: "";
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_arrow_01.png) top center no-repeat;
position: absolute;
top: 87%;
left: 50%;
z-index: 1;
transform: translateX(-50%);
width: 24px;
height: 156px;
background-size: 100%;
}
@media screen and (max-width: 1000px) {
.icon-arrow-bottom:after {
top: 75%;
}
}
.m-merit-icon {
margin-right: 50px;
margin-top: -17px;
}
@media screen and (max-width: 768px) {
.m-merit-icon {
order: 2;
text-align: center;
width: 100%;
margin-right: 63px;
margin-top: 0;
}
.m-merit-icon img {
margin: 0 auto;
max-width: 185px;
position: relative;
bottom: -2px;
}
}
.m-merit-text {
padding-top: 40px;
font-size: 25px;
font-size: 1.5625rem;
font-weight: 700;
}
@media screen and (max-width: 1000px) {
.m-merit-text {
padding-top: 20px;
line-height: 1.4;
}
}
@media screen and (max-width: 768px) {
.m-merit-text {
width: 100%;
display: inline-block;
text-align: center;
font-size: 20px;
font-size: 1.25rem;
margin-bottom: 12px;
line-height: 2;
}
.m-merit-text .fz-35 {
font-size: 28px;
font-size: 1.75rem;
line-height: 1.63;
}
}
@media screen and (max-width: 768px) and (max-width: 320px) {
.m-merit-text .fz-35 {
font-size: 26px;
font-size: 1.625rem;
}
}
.m-merit-box01 {
display: flex;
align-items: center;
padding: 0 32px;
position: relative;
z-index: 10;
}
@media screen and (max-width: 768px) {
.m-merit-box01 {
padding: 0;
flex-wrap: wrap;
}
.m-merit-box01 .m-merit-ttlicon {
font-feature-settings: "palt" 1;
letter-spacing: 0.1em;
}
}
.m-bg-dot {
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/img_bg_dot.png) top -5px left 2px;
border-radius: 10px;
}
.m-merit-innner {
padding: 71px 100px 70px;
}
@media screen and (max-width: 1000px) {
.m-merit-innner {
padding: 78px 30px 70px;
}
}
@media screen and (max-width: 768px) {
.m-merit-innner {
padding: 51px 15px 34px;
}
}
.m-box-ttl01 {
text-align: center;
margin-bottom: 49px;
}
@media screen and (max-width: 768px) {
.m-box-ttl01 {
margin-bottom: 39px;
}
}
.m-merit-title {
margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
.m-merit-title {
text-align: center;
margin-bottom: 14px;
}
.m-merit-title img {
max-width: 258px;
}
}
.m-merit-subtitle {
font-weight: 700;
font-size: 30px;
font-size: 1.875rem;
line-height: 1.5;
letter-spacing: 0.1em;
}
@media screen and (max-width: 1000px) {
.m-merit-subtitle {
font-size: 20px;
font-size: 1.25rem;
}
.m-merit-subtitle .fz-50 {
font-size: 50px;
font-size: 3.125rem;
}
}
@media screen and (max-width: 768px) {
.m-merit-subtitle {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.93;
}
.m-merit-subtitle .fz-50 {
font-size: 30px;
font-size: 1.875rem;
}
.m-merit-subtitle .fz-35 {
font-size: 21px;
font-size: 1.3125rem;
}
}
.m-bottom-blue {
border-bottom: 2px solid #002151;
padding-bottom: 5px;
}
@media screen and (max-width: 768px) {
.m-bottom-blue {
padding-bottom: 2px;
}
}
.m-merit-number {
display: flex;
background: #002151;
width: 57px;
height: 57px;
color: #fff;
border-radius: 50%;
align-items: center;
justify-content: center;
flex-direction: column;
line-height: 1;
letter-spacing: 0.05em;
font-size: 25px;
font-size: 1.5625rem;
font-weight: 700;
padding-top: 5px;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
.m-merit-number {
font-size: 19px;
font-size: 1.1875rem;
line-height: 1.13;
width: 50px;
height: 50px;
}
}
.m-merit-bg-dot {
position: relative;
}
@media screen and (max-width: 768px) {
.m-merit-bg-dot {
margin-bottom: 8px;
}
}
.m-merit-bg-dot:before, .m-merit-bg-dot:after {
content: "";
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_dot.png) top center no-repeat;
position: absolute;
top: 50%;
z-index: 1;
transform: translateY(-50%);
width: 44%;
height: 4px;
background-size: 100%;
}
@media screen and (max-width: 768px) {
.m-merit-bg-dot:before, .m-merit-bg-dot:after {
width: 39%;
background-image: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_dot_sp.png);
}
}
.m-merit-bg-dot:before {
left: 0;
}
.m-merit-bg-dot:after {
right: 0;
}
.m-merit-text01 {
font-size: 10px;
font-size: 0.625rem;
letter-spacing: 0.1em;
}
@media screen and (max-width: 768px) {
.m-merit-text01 {
font-size: 8px;
font-size: 0.5rem;
letter-spacing: 0.05em;
}
}
.m-merit-content {
display: flex;
justify-content: space-between;
}
@media screen and (max-width: 768px) {
.m-merit-content {
margin: 0 15px;
flex-wrap: wrap;
}
}
.m-merit-decription {
max-width: 388px;
width: 100%;
}
@media screen and (max-width: 1000px) {
.m-merit-decription {
font-size: 14px;
font-size: 0.875rem;
margin-right: 30px;
}
}
@media screen and (max-width: 768px) {
.m-merit-decription {
font-size: 15px;
font-size: 0.9375rem;
line-height: 1.67;
margin-right: 0;
margin-bottom: 16px;
}
}
.merit-item01 {
margin-bottom: 11px;
}
@media screen and (max-width: 768px) {
.merit-item01 {
margin-bottom: 33px;
}
}
.merit-item01 .m-merit-img {
max-width: 420px;
margin-right: -13px;
padding-top: 15px;
}
@media screen and (max-width: 768px) {
.merit-item01 .m-merit-img {
text-align: center;
max-width: 100%;
margin-right: -11px;
}
}
.merit-item02 {
padding-bottom: 10px;
margin-bottom: -30px;
}
@media screen and (max-width: 768px) {
.merit-item02 {
margin-bottom: 30px;
}
}
.merit-item02 .m-merit-img {
max-width: 350px;
margin-right: -5px;
padding-top: 34px;
}
@media screen and (max-width: 768px) {
.merit-item02 .m-merit-img {
max-width: 100%;
padding-top: 0;
}
}
@media screen and (max-width: 768px) {
.merit-item02 .m-merit-bg-dot {
margin-bottom: 19px;
}
}
.merit-item02 .m-merit-decription {
margin-bottom: 48px;
}
.merit-item02 .m-rerit-des {
margin-right: -32px;
}
@media screen and (max-width: 768px) {
.merit-item02 .m-rerit-des {
margin-right: 0;
}
}
.merit-item03 .m-merit-img {
position: relative;
max-width: 346px;
width: 100%;
padding-top: 19px;
}
.merit-item03 .m-merit-img:after {
content: "";
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_arrrow_02.png) top left no-repeat;
position: absolute;
left: 51%;
top: 54%;
z-index: 1;
transform: translate(-50%, -50%);
width: 28px;
height: 16px;
background-size: 100%;
}
@media screen and (max-width: 768px) {
.merit-item03 .m-merit-img:after {
top: 55%;
width: 22px;
height: 13px;
}
}
@media screen and (max-width: 768px) {
.merit-item03 .m-merit-img {
max-width: 100%;
}
}
@media screen and (max-width: 768px) {
.merit-item03 .m-title-des {
margin-bottom: 17px;
}
.merit-item03 .m-merit-decription {
margin-bottom: 20px;
}
}
@media screen and (max-width: 768px) {
.m-merit-list li .m-merit-img {
margin: 0 auto;
}
}
.m-title-des {
font-size: 25px;
font-size: 1.5625rem;
font-weight: 700;
line-height: 1.6;
letter-spacing: 0.05em;
margin-bottom: 27px;
margin-right: -25px;
}
@media screen and (max-width: 1000px) {
.m-title-des {
font-size: 18px;
font-size: 1.125rem;
}
}
@media screen and (max-width: 768px) {
.m-title-des {
font-size: 25px;
font-size: 1.5625rem;
line-height: 1.8;
margin-bottom: 26px;
}
}
.m-sub-des {
font-size: 40px;
font-size: 2.5rem;
}
@media screen and (max-width: 1000px) {
.m-sub-des {
font-size: 30px;
font-size: 1.875rem;
}
}
@media screen and (max-width: 768px) {
.m-sub-des {
font-size: 40px;
font-size: 2.5rem;
}
}
.m-rerit-des {
font-weight: 700;
line-height: 1.6666666667;
margin-right: -25px;
}
@media screen and (max-width: 768px) {
.m-rerit-des {
margin-right: 0;
}
}
.m-merit-btn {
max-width: 161px;
width: 100%;
height: 31px;
display: flex;
align-content: center;
justify-content: center;
border: 2px solid #002151;
border-radius: 29px;
font-weight: 700;
padding-left: 8px;
margin-bottom: 10px;
background: #fff;
}
@media screen and (max-width: 768px) {
.m-merit-btn {
margin-bottom: 12px;
}
}
.fz-sub {
font-size: 10px;
font-size: 0.625rem;
display: flex;
align-items: center;
}
.m-sub-des {
position: relative;
z-index: 2;
}
.m-sub-des01 {
position: relative;
z-index: 2;
}
.icon-circle-yellow {
position: relative;
}
.icon-circle-yellow:after {
content: "";
background: #fff57d;
width: 27px;
height: 27px;
position: absolute;
top: -10px;
left: 22px;
border-radius: 50%;
z-index: 1;
}
.m-merit-boxprice {
border: 1px solid #002151;
display: flex;
flex-wrap: wrap;
justify-content: center;
text-align: center;
font-weight: 700;
}
.m-merit-boxprice:not(:last-child) {
margin-bottom: 31px;
}
.m-merit-boxprice > div {
width: 50%;
}
.m-merit-boxprice01 .m-merit-text04 {
margin-bottom: 5px;
}
.m-merit-boxprice01 .m-right-price {
padding-left: 30px;
}
@media screen and (max-width: 768px) {
.m-merit-boxprice01 .m-box-right {
padding: 2px 0 10px;
}
}
.m-bg-gray {
background: #e1e1e1;
}
.m-bg-yellow {
background: #fff57d;
}
.m-title-left {
font-size: 20px;
font-size: 1.25rem;
margin-bottom: 3px;
}
@media screen and (max-width: 768px) {
.m-title-left {
font-size: 16px;
font-size: 1rem;
margin-bottom: 0;
}
}
.m-btn01 {
max-width: 126px;
width: 100%;
height: 31px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
.m-btn01 {
font-size: 12px;
font-size: 0.75rem;
max-width: 101px;
height: 25px;
}
}
.m-merit-text04 {
font-size: 13px;
font-size: 0.8125rem;
margin-bottom: 18px;
border-bottom: 2px solid #002151;
padding-bottom: 5px;
}
@media screen and (max-width: 768px) {
.m-merit-text04 {
font-size: 10px;
font-size: 0.625rem;
margin-bottom: 10px;
border-bottom: 0;
padding-bottom: 5px;
}
.m-merit-text04 .m-border-bt {
border-bottom: 1px solid #002151;
padding-bottom: 5px;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.m-merit-text04 .m-border-bt {
font-size: 11px;
font-size: 0.6875rem;
}
}
.m-box-left {
padding: 15px 0 21px;
}
@media screen and (max-width: 768px) {
.m-box-left {
padding: 13px 20px 15px 15px;
}
}
.m-box-right {
padding: 10px 18px 0 23px;
background: #fff;
}
@media screen and (max-width: 768px) {
.m-box-right {
padding: 10px 0;
}
}
.m-box-right:first-child .m-merit-text04 {
margin-bottom: 33px;
}
.m-right-price {
display: flex;
justify-content: center;
align-items: center;
line-height: 1;
}
@media screen and (max-width: 768px) {
.m-right-price {
font-size: 12px;
font-size: 0.75rem;
}
}
@media screen and (max-width: 768px) {
.m-right-price .fz-20 {
font-size: 16px;
font-size: 1rem;
}
}
.m-right-price .dl-flex {
padding-top: 12px;
}
.m-right-subtext {
margin-right: 5px;
}
@media screen and (max-width: 768px) {
.m-right-subtext {
font-size: 12px;
font-size: 0.75rem;
}
.m-right-subtext.fz-50.fz-roboto {
font-size: 40px;
font-size: 2.5rem;
}
}
.m-text-note {
margin-top: 13px;
font-size: 13px;
font-size: 0.8125rem;
line-height: 1.9230769231;
letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
.m-text-note {
font-size: 13px;
font-size: 0.8125rem;
line-height: 1.9;
margin-top: 19px;
letter-spacing: 0.03em;
padding-left: 60px;
}
.m-text-note p {
text-indent: -35px;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.m-text-note.m-text-indent01 {
padding-left: 38px;
margin-top: 11px;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.m-text-note.m-text-indent02 {
padding-left: 35px;
margin-top: 3px;
}
}
.m-text-note02 {
margin-left: 35px;
}
.m-note-table {
margin-top: 28px;
}
@media screen and (max-width: 768px) {
.m-note-table {
margin-top: 5px;
padding-left: 46px;
font-size: 10px;
}
.m-note-table p {
text-indent: -28px;
}
}
.m-box-feature {
margin-top: 73px;
margin-bottom: 64px;
}
@media screen and (max-width: 768px) {
.m-box-feature {
margin-top: 29px;
margin-bottom: -5px;
}
}
.m-box-feature .m-text-note {
margin-top: -5px;
}
@media screen and (max-width: 768px) {
.m-box-feature .m-text-note {
margin-top: 3px;
}
}
.m-feature-title {
background: #002151;
color: #fff;
text-align: center;
font-size: 25px;
font-size: 1.5625rem;
letter-spacing: 0.1em;
font-weight: 700;
padding: 10px 0;
margin-bottom: 23px;
border-radius: 6px;
}
@media screen and (max-width: 768px) {
.m-feature-title {
font-size: 20px;
font-size: 1.25rem;
padding: 14px 0;
margin-bottom: 16px;
border-radius: 3px;
}
}
.m-feature-list ul {
display: flex;
flex-wrap: wrap;
}
.m-feature-list ul li {
width: 31.6%;
margin-right: 2.5%;
margin-bottom: 27px;
text-align: center;
border: 2px solid #002151;
border-radius: 3px;
padding: 4px 26px 30px;
font-weight: 700;
background: #fff;
}
@media screen and (max-width: 768px) {
.m-feature-list ul li:nth-child(2) .fz-sub {
position: absolute;
bottom: 0;
right: 14px;
}
}
@media screen and (max-width: 1000px) {
.m-feature-list ul li {
padding: 10px 20px 30px;
}
}
.m-feature-list ul li.padding-top {
padding-top: 14px;
}
@media screen and (max-width: 768px) {
.m-feature-list ul li.padding-top {
padding-top: 5px;
}
.m-feature-list ul li.padding-top .m-feature-titlelist {
padding-bottom: 8px;
}
}
.m-feature-list ul li:nth-child(3n+3) {
margin-right: 0;
}
@media screen and (max-width: 768px) {
.m-feature-list ul li:nth-child(3n+3) {
margin-right: 2.4%;
}
}
@media screen and (max-width: 768px) {
.m-feature-list ul li {
width: 48.7%;
margin-right: 2.4%;
padding: 2px 15px 19px;
margin-bottom: 10px;
min-height: 123px;
}
.m-feature-list ul li:nth-child(2n+2) {
margin-right: 0;
}
}
.m-feature-list .icon-arrow-bottom:after {
bottom: inherit;
top: 100%;
}
@media screen and (max-width: 1000px) {
.m-feature-list .icon-arrow-bottom:after {
display: none;
}
}
.m-feature-titlelist {
font-size: 25px;
font-size: 1.5625rem;
margin-bottom: 10px;
border-bottom: 1px solid;
width: 100%;
line-height: 3.4;
}
@media screen and (max-width: 1000px) {
.m-feature-titlelist {
font-size: 18px;
font-size: 1.125rem;
}
}
@media screen and (max-width: 768px) {
.m-feature-titlelist {
font-size: 13px;
font-size: 0.8125rem;
border-bottom: 1px solid;
margin-bottom: 10px;
line-height: 3.3;
}
}
@media (max-width: 320px) {
.m-feature-titlelist {
font-size: 11px;
font-size: 0.6875rem;
}
}
.m-feature-titlelist.fz-23 {
font-size: 23px;
font-size: 1.4375rem;
line-height: 1.3043478261;
padding-bottom: 13px;
}
@media screen and (max-width: 1000px) {
.m-feature-titlelist.fz-23 {
font-size: 17px;
font-size: 1.0625rem;
}
}
@media screen and (max-width: 768px) {
.m-feature-titlelist.fz-23 {
font-size: 12px;
font-size: 0.75rem;
line-height: 1.25;
}
}
@media (max-width: 320px) {
.m-feature-titlelist.fz-23 {
font-size: 9px;
font-size: 0.5625rem;
}
}
.m-feature-text {
font-feature-settings: "palt" 1;
}
@media screen and (max-width: 768px) {
.m-feature-text {
font-size: 10px;
font-size: 0.625rem;
line-height: 1.5;
}
}
.dl-flex {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.m-price-inclusive {
display: flex;
align-items: flex-end;
justify-content: center;
font-weight: 700;
margin-bottom: 51px;
}
@media screen and (max-width: 1000px) {
.m-price-inclusive {
justify-content: space-between;
flex-wrap: wrap;
max-width: 611px;
margin: 0 auto 93px;
}
}
@media screen and (max-width: 768px) {
.m-price-inclusive {
margin-bottom: 63px;
max-width: 400px;
}
}
.m-monthly-img {
max-width: 180px;
}
@media screen and (max-width: 1000px) {
.m-monthly-img {
order: 2;
}
}
@media screen and (max-width: 768px) {
.m-monthly-img {
margin-right: 15px;
max-width: 115px;
}
}
.m-monthly-fee {
width: 152px;
height: 152px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex-direction: column;
background: #fdfdd7;
border-radius: 50%;
line-height: 1;
text-align: center;
padding-top: 20px;
position: relative;
margin-right: 58px;
margin-left: 18px;
position: relative;
top: -4px;
}
@media screen and (max-width: 1000px) {
.m-monthly-fee {
margin-right: 0;
}
}
@media screen and (max-width: 768px) {
.m-monthly-fee {
width: 98px;
height: 98px;
padding-top: 6px;
position: relative;
top: -15px;
right: -14px;
}
}
.m-monthly-fee:before {
content: "";
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_13.png) top center no-repeat;
width: 42px;
height: 32px;
position: absolute;
bottom: 22px;
right: -21px;
background-size: 100%;
}
@media screen and (max-width: 1000px) {
.m-monthly-fee:before {
bottom: -7px;
left: 38%;
right: inherit;
transform: translateY(50%) rotate(70deg);
}
}
@media screen and (max-width: 768px) {
.m-monthly-fee:before {
width: 17px;
height: 20px;
left: 41%;
}
}
@media screen and (max-width: 640px) {
.m-monthly-fee:before {
bottom: -5px;
left: 39%;
right: inherit;
width: 20px;
height: 20px;
}
}
.m-monthly-text01 {
position: relative;
top: 6px;
left: -13px;
}
.m-monthl-text {
font-size: 20px;
font-size: 1.25rem;
}
@media screen and (max-width: 768px) {
.m-monthl-text {
font-size: 13px;
font-size: 0.8125rem;
}
}
@media screen and (max-width: 768px) {
.m-monthl-num .fz-75 {
font-size: 48px;
font-size: 3rem;
}
.m-monthl-num .fz-25.pb-bt {
font-size: 16px;
font-size: 1rem;
}
}
.pb-bt {
position: relative;
top: -5px;
}
.m-monthly-price {
font-size: 25px;
font-size: 1.5625rem;
text-align: center;
margin-right: 17px;
line-height: 1.2;
letter-spacing: 0.05em;
position: relative;
top: -3px;
}
@media screen and (max-width: 1000px) {
.m-monthly-price {
padding-top: 0;
order: 3;
margin: 45px auto 0;
}
}
@media screen and (max-width: 768px) {
.m-monthly-price {
font-size: 16px;
font-size: 1rem;
margin: 16px auto 0;
top: -11px;
left: 14px;
}
}
.m-monthly-price.icon-arrow-bottom::after {
display: none;
}
@media screen and (max-width: 1000px) {
.m-monthly-price.icon-arrow-bottom::after {
display: block;
top: -120%;
}
}
@media screen and (max-width: 768px) {
.m-monthly-price.icon-arrow-bottom::after {
top: -110%;
left: 45%;
width: 15px;
height: 97px;
}
}
.m-monthly-price01 {
position: relative;
}
.m-monthly-price01:before {
content: "";
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_06.png) top center no-repeat;
width: 52px;
height: 51px;
position: absolute;
top: -24px;
left: -46px;
background-size: 100%;
}
@media screen and (max-width: 768px) {
.m-monthly-price01:before {
width: 34px;
height: 34px;
top: -15px;
left: -29px;
}
}
.m-monthly-price01 .fz-100 {
position: relative;
z-index: 5;
}
@media screen and (max-width: 768px) {
.m-monthly-price01 .fz-100 {
font-size: 64px;
font-size: 4rem;
}
}
@media (max-width: 320px) {
.m-monthly-price01 .fz-100 {
font-size: 58px;
font-size: 3.625rem;
}
}
.m-monthly-subprice {
position: relative;
z-index: 5;
}
@media screen and (max-width: 768px) {
.m-monthly-subprice.fz-43 {
font-size: 27px;
font-size: 1.6875rem;
margin-left: -8px;
letter-spacing: 0.5em;
padding-left: 12px;
}
}
.m-monthly-sub01 {
font-size: 10px;
font-size: 0.625rem;
font-weight: 500;
position: absolute;
top: -6px;
left: 50%;
transform: translateX(-50%);
width: 100%;
letter-spacing: 0;
}
.bg-underline {
position: relative;
}
.bg-underline:after {
content: "";
background: #fdf107;
width: 97%;
height: 22px;
position: absolute;
left: 0;
top: 70%;
z-index: 1;
}
@media screen and (max-width: 768px) {
.bg-underline:after {
height: 15px;
}
}
.m-box-onlynow {
position: relative;
z-index: 10;
}
.m-box-onlynow .m-consultation-box {
margin-bottom: 121px;
}
@media screen and (max-width: 768px) {
.m-box-onlynow .m-consultation-box {
margin-bottom: 58px;
}
}
.m-onlynow-text {
max-width: 219px;
width: 100%;
height: 47px;
background: #002151;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-size: 1.25rem;
font-weight: 700;
margin: 0 auto;
position: absolute;
top: -13px;
left: 50%;
transform: translateX(-50%);
letter-spacing: 0.15em;
}
@media screen and (max-width: 768px) {
.m-onlynow-text {
font-size: 15px;
font-size: 0.9375rem;
max-width: 154px;
height: 38px;
top: -38px;
}
}
.m-design-inner a:hover {
opacity: 1;
}
.m-design-inner a:hover img {
opacity: 1;
}
.m-design-box01 {
text-align: center;
font-size: 35px;
font-size: 2.1875rem;
font-weight: 700;
letter-spacing: 0.1em;
line-height: 1;
margin-bottom: 74px;
}
@media screen and (max-width: 768px) {
.m-design-box01 {
font-size: 25px;
font-size: 1.5625rem;
margin-bottom: 48px;
line-height: 3.4;
}
}
.m-design-box01 .m-design-title {
margin-bottom: 18px;
}
@media screen and (max-width: 768px) {
.m-design-box01 .m-design-title {
margin-bottom: 16px;
line-height: 1;
}
}
.m-design-box01 .m-design__text {
font-size: 15px;
font-size: 0.9375rem;
text-align: center;
line-height: 1.6;
letter-spacing: 0.1em;
font-weight: bold;
padding-top: 25px;
}
.m-design-box01 .m-design-text {
margin-left: 32px;
}
@media screen and (max-width: 768px) {
.m-design-box01 .m-design-text {
margin-left: 20px;
line-height: 1;
}
}
.m-design-box02 {
position: relative;
max-width: 799px;
width: 100%;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
.m-design-box02 {
max-width: 642px;
}
}
@media screen and (max-width: 640px) {
.m-design-box02 {
max-width: 323px;
margin-left: -1px;
}
}
.m-design-box02 .m-img-laptop {
max-width: 767px;
}
.link-view-demo {
font-size: 20px;
font-size: 1.25rem;
border-bottom: 1px solid;
padding-bottom: 5px;
}
.link-view-demo:hover {
opacity: 0.8;
}
@media screen and (max-width: 768px) {
.link-view-demo {
font-size: 13px;
font-size: 0.8125rem;
letter-spacing: 0.05em;
padding-bottom: 1px;
}
}
.icon-view {
position: relative;
}
.icon-view:before {
content: "";
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_view.png) top center no-repeat;
width: 26px;
height: 26px;
position: absolute;
top: 50%;
left: -34px;
background-size: 100%;
transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
.icon-view:before {
width: 16px;
height: 16px;
left: -21px;
}
}
.m-img-phone {
max-width: 187px;
width: 100%;
position: absolute;
right: 0;
bottom: -27px;
z-index: 20;
}
@media screen and (max-width: 768px) {
.m-img-phone {
max-width: 160px;
right: -20px;
}
}
@media screen and (max-width: 640px) {
.m-img-phone {
max-width: 80px;
right: -13px;
bottom: -12px;
}
}
.icon-phone:before {
content: "";
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_phone.png) top center no-repeat;
width: 89px;
height: 13px;
position: absolute;
top: 12px;
left: 50%;
background-size: 100%;
transform: translateX(-50%);
z-index: 50;
}
.m-phone-scroll {
position: absolute;
right: 15px;
top: 12px;
max-width: 158px;
max-height: 338px;
overflow-x: hidden;
overflow-y: auto;
z-index: 30;
border-radius: 15px;
}
@media screen and (max-width: 640px) {
.m-phone-scroll {
max-height: 145px;
margin-left: 6px;
right: 2px;
top: 4px;
}
}
.m-laptop-scroll {
max-width: 589px;
width: 100%;
position: absolute;
top: 28px;
left: 48%;
right: 0;
bottom: 0;
z-index: 10;
transform: translateX(-50%);
max-height: 368px;
overflow-y: auto;
overflow-x: hidden;
}
@media screen and (max-width: 1000px) {
.m-laptop-scroll {
max-width: 100%;
padding: 0 105px;
}
}
@media (max-width: 850px) {
.m-laptop-scroll {
padding: 0 84px;
left: 50%;
}
}
@media screen and (max-width: 640px) {
.m-laptop-scroll {
top: 14px;
padding: 0 39px;
max-height: 154px;
}
}
.m-phone-scroll::-webkit-scrollbar-thumb,
.m-laptop-scroll::-webkit-scrollbar-thumb {
background: transparent;
}
.m-phone-scroll::-webkit-scrollbar-track,
.m-laptop-scroll::-webkit-scrollbar-track {
background: transparent;
}
.m-phone-scroll::-webkit-scrollbar,
.m-laptop-scroll::-webkit-scrollbar {
width: 4px;
height: 4px;
background: transparent;
}
.sec-merit {
margin-bottom: 153px;
position: relative;
}
@media screen and (max-width: 768px) {
.sec-merit {
margin-bottom: 66px;
}
}
@media screen and (max-width: 768px) {
.block-slider {
padding: 0 20px;
}
}
.block-slider .list-slider li {
max-width: 430px;
margin: 0 38px;
}
@media screen and (max-width: 768px) {
.block-slider .list-slider li {
max-width: 317px;
margin: 0 10px;
}
}
.m-box-slider {
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/bg_sec_02.png) top center no-repeat;
background-size: 100% 100%;
}
@media screen and (max-width: 1000px) {
.m-box-slider {
background-size: 100%;
background-position: bottom center;
}
}
@media screen and (max-width: 768px) {
.m-box-slider {
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/bg_sec02_sp.png) top center no-repeat;
background-size: 100% 100%;
}
}
.bg-content01 {
background: #fdfdd7;
}
@media screen and (max-width: 768px) {
.bg-content01 {
padding-top: 39px;
}
}
.m-slider-title {
text-align: center;
margin-bottom: 53px;
font-size: 25px;
font-size: 1.5625rem;
font-weight: 700;
letter-spacing: 0.1em;
}
@media screen and (max-width: 768px) {
.m-slider-title {
margin-bottom: 25px;
font-size: 13px;
font-size: 0.8125rem;
}
}
.icon-01 {
position: relative;
}
.icon-01:before, .icon-01:after {
content: "";
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_left.jpg) top left no-repeat;
position: absolute;
top: 50%;
z-index: 1;
transform: translateY(-50%);
width: 34px;
height: 37px;
background-size: 100%;
}
@media screen and (max-width: 768px) {
.icon-01:before, .icon-01:after {
width: 18px;
height: 20px;
}
}
.icon-01:before {
left: -63px;
}
@media screen and (max-width: 768px) {
.icon-01:before {
left: -30px;
}
}
.icon-01:after {
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_right.jpg) top left no-repeat;
right: -63px;
background-size: 100%;
}
@media screen and (max-width: 768px) {
.icon-01:after {
right: -30px;
}
}
.item-img {
text-align: center;
font-weight: 700;
letter-spacing: 0.1em;
line-height: 1.6666666667;
}
.m-title-slider {
font-size: 18px;
font-size: 1.125rem;
margin-bottom: 11px;
margin-left: 10px;
}
@media screen and (max-width: 768px) {
.m-title-slider {
font-size: 11px;
font-size: 0.6875rem;
margin-bottom: 7px;
line-height: 1.36;
margin-left: 0;
}
}
.m-box-tag {
font-size: 13px;
font-size: 0.8125rem;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 1000px) {
.m-box-tag {
font-size: 11px;
font-size: 0.6875rem;
}
}
.text-center {
text-align: center;
}
.m-tag {
border-radius: 5px;
border: 1px solid #002151;
background: #fff;
padding: 0px 11px;
margin-left: 15px;
line-height: 1.5333333333;
}
@media screen and (max-width: 1000px) {
.m-tag {
padding: 0 5px;
}
}
@media screen and (max-width: 768px) {
.m-tag {
font-size: 9px;
font-size: 0.5625rem;
margin-right: 15px;
border-radius: 2px;
margin-left: 0;
}
}
.img-slider {
margin-bottom: 29px;
}
@media screen and (max-width: 768px) {
.img-slider {
margin-bottom: 23px;
}
}
.sec-plan {
padding: 105px 0 54px;
}
@media screen and (max-width: 768px) {
.sec-plan {
padding: 37px 0 46px;
}
.sec-plan .m-circle-top {
margin-bottom: 52px;
}
}
.sec-plan .m-circle-top:before {
z-index: 1;
background: #fff;
top: -47px;
}
@media screen and (max-width: 768px) {
.sec-plan .m-circle-top:before {
top: -37px;
}
}
.sec-plan .m-box-icon {
top: -46px;
padding-top: 40px;
}
@media screen and (max-width: 768px) {
.sec-plan .m-box-icon {
top: -36px;
padding-top: 18px;
}
}
.m-plan-img {
max-width: 54px;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
.m-plan-img {
max-width: 40px;
}
}
.m-plan-inner {
padding: 77px 52px 45px;
background: #fff;
position: relative;
z-index: 5;
margin-bottom: 43px;
}
@media screen and (max-width: 1000px) {
.m-plan-inner {
padding: 93px 30px 45px;
}
}
@media screen and (max-width: 768px) {
.m-plan-inner {
padding: 49px 10px 27px;
}
}
.m-plan-inner .m-box-icon {
background: #fff;
z-index: -1;
}
.m-plan-inner .m-titl-01 {
margin-bottom: 67px;
}
@media screen and (max-width: 768px) {
.m-plan-inner .m-titl-01 {
margin-bottom: 11px;
}
}
.compare-table {
font-weight: 700;
letter-spacing: 0.1em;
line-height: 1.6666666667;
}
@media screen and (max-width: 768px) {
.compare-table {
max-width: 100%;
margin: 0 auto;
}
}
.compare-table tr th,
.compare-table tr td {
text-align: center;
vertical-align: middle;
border: 6px solid #fff;
}
@media screen and (max-width: 768px) {
.compare-table tr th.m-bg-gray,
.compare-table tr td.m-bg-gray {
display: none;
}
}
.compare-table tr td {
width: 254px;
height: 1px;
}
@media screen and (max-width: 768px) {
.compare-table tr td {
width: 246px;
font-size: 15px;
font-size: 0.9375rem;
}
}
@media screen and (max-width: 640px) {
.compare-table tr td {
width: 134px;
}
}
.compare-table tr td.m-bg-gray {
color: #333333;
}
.compare-table tr:nth-child(1) th {
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}
@media screen and (max-width: 768px) {
.compare-table tr:nth-child(1) th {
display: none;
}
}
.compare-table tr:nth-child(1) th.m-bg-gray {
background: #a0a0a0;
color: #fff;
font-size: 20px;
font-size: 1.25rem;
border-top: 0;
height: 50px;
}
.compare-table tr:nth-child(1) th.m-bg-blue {
padding: 0;
border-top: 0;
}
.compare-table tr th.m-bg-blue01 {
color: #fff;
font-size: 18px;
font-size: 1.125rem;
text-align: left;
width: 248px;
line-height: 1.7777777778;
letter-spacing: 0.01em;
font-feature-settings: "palt" 1;
padding: 15px 18px;
}
@media screen and (max-width: 1000px) {
.compare-table tr th.m-bg-blue01 {
font-size: 15px;
font-size: 0.9375rem;
}
}
@media screen and (max-width: 768px) {
.compare-table tr th.m-bg-blue01 {
width: 320px;
font-size: 14px;
font-size: 0.875rem;
padding: 10px 15px;
}
}
@media screen and (max-width: 640px) {
.compare-table tr th.m-bg-blue01 {
width: 162px;
}
}
.m-box-flex {
display: flex;
height: 100%;
}
.m-plan-icon {
border-right: 8px solid #fff;
width: 70px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
@media screen and (max-width: 768px) {
.m-plan-icon {
display: none;
}
}
.m-plan-text {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
padding: 15px;
flex-wrap: wrap;
text-align: justify;
}
@media screen and (max-width: 1000px) {
.m-plan-text {
font-size: 12px;
font-size: 0.75rem;
}
}
@media screen and (max-width: 768px) {
.m-plan-text {
font-size: 13px;
font-size: 0.8125rem;
}
.m-plan-text.sp-fz-15 {
font-size: 15px;
font-size: 0.9375rem;
line-height: 1.67;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.m-plan-text.sp-fz-15 {
font-size: 13px;
font-size: 0.8125rem;
}
}
.m-plan-text.fl-start {
justify-content: flex-start;
align-items: flex-start;
}
.m-plan-text .text-center {
width: 100%;
display: inline-block;
text-align: center;
margin-bottom: 20px;
}
.m-plan-text .m-flex-1 {
flex: 1;
}
.compare-table th.m-bg-blue .col-01 {
position: relative;
width: 100%;
display: inline-block;
top: -10px;
}
.compare-table th.m-bg-blue .col-01:before {
content: "";
background: #d7eefd;
width: 100%;
height: 75px;
position: absolute;
top: -27px;
left: 0;
z-index: 2;
border-top-left-radius: 13px;
border-top-right-radius: 13px;
}
.compare-table th.m-bg-blue .col-01 img {
position: relative;
z-index: 5;
top: -7px;
}
.max-width {
position: relative;
}
.max-width:before {
content: "";
background: #a0a0a0;
width: 100%;
height: 35px;
position: absolute;
top: -12px;
left: 0;
z-index: 2;
border-top-left-radius: 13px;
border-top-right-radius: 13px;
}
.max-width span {
position: relative;
z-index: 5;
top: -6px;
}
@media screen and (max-width: 768px) {
.m-circle-top {
margin-bottom: 86px;
}
}
.m-payment-method {
background: #fff;
padding-bottom: 26px;
}
@media screen and (max-width: 768px) {
.m-payment-method {
padding-bottom: 35px;
}
}
.m-payment-method .m-text-note {
padding-left: 33px;
font-size: 13px;
font-size: 0.8125rem;
line-height: 1.5384615385;
margin-top: 30px;
}
.m-payment-method .m-text-note .m-note-text01 {
padding-left: 34px;
}
@media screen and (max-width: 768px) {
.m-payment-method .m-text-note .m-note-text01 {
padding-left: 0;
text-indent: 0;
}
}
@media screen and (max-width: 768px) {
.m-text-note06 {
margin-left: 35px;
margin-top: 25px;
}
}
.m-payment-title {
display: flex;
justify-content: center;
align-items: center;
font-size: 25px;
font-size: 1.5625rem;
line-height: 1;
padding: 15px 0 22px;
font-weight: 700;
background: #002151;
color: #fff;
letter-spacing: 0.1em;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
margin-bottom: 20px;
padding-left: 54px;
}
@media screen and (max-width: 768px) {
.m-payment-title {
font-size: 20px;
font-size: 1.25rem;
margin-bottom: 36px;
padding: 20px 0 22px;
padding-left: 21px;
}
}
.m-payment-list ul {
display: flex;
justify-content: space-between;
font-weight: 700;
padding: 0 40px;
}
@media screen and (max-width: 1000px) {
.m-payment-list ul {
padding: 0 30px;
}
}
@media screen and (max-width: 768px) {
.m-payment-list ul {
flex-wrap: wrap;
padding: 0 21px;
}
}
.m-payment-list ul li {
max-width: 246px;
width: 100%;
position: relative;
padding: 20px 0 5px;
}
@media screen and (max-width: 1000px) {
.m-payment-list ul li {
max-width: 100%;
width: 31%;
font-size: 12px;
font-size: 0.75rem;
margin-right: 30px;
}
}
@media screen and (max-width: 768px) {
.m-payment-list ul li {
width: 100%;
margin-right: 0;
font-size: 15px;
font-size: 0.9375rem;
padding: 0 8px 25px;
margin-bottom: 42px;
}
}
@media (max-width: 320px) {
.m-payment-list ul li {
font-size: 13px;
font-size: 0.8125rem;
}
}
.m-payment-list ul li:after {
content: "";
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_dot01.png) top center no-repeat;
width: 3px;
height: 100%;
position: absolute;
top: 0;
right: -46px;
background-size: 100%;
}
@media screen and (max-width: 1000px) {
.m-payment-list ul li:after {
right: -8%;
}
}
@media screen and (max-width: 768px) {
.m-payment-list ul li:after {
right: inherit;
top: inherit;
left: 0;
bottom: 0;
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_dot01_sp.png) top center no-repeat;
width: 100%;
height: 3px;
background-size: 100%;
}
}
.m-payment-list ul li:nth-child(3n+3)::after {
display: none;
}
@media screen and (max-width: 1000px) {
.m-payment-list ul li:last-child {
margin-right: 0;
}
}
@media screen and (max-width: 768px) {
.m-payment-list ul li:last-child {
margin-bottom: 0;
padding-bottom: 0;
}
}
.m-payment-title01 {
max-width: 188px;
width: 100%;
height: 45px;
border: 2px solid #002151;
border-radius: 45px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-size: 1.25rem;
font-weight: 700;
margin: 0 auto 40px;
}
@media screen and (max-width: 1000px) {
.m-payment-title01 {
font-size: 17px;
font-size: 1.0625rem;
margin-bottom: 20px;
}
}
@media screen and (max-width: 768px) {
.m-payment-title01 {
max-width: 150px;
height: 37px;
font-size: 16px;
font-size: 1rem;
margin: 0 auto 16px;
}
}
.m-payment-text01 {
margin-bottom: 24px;
line-height: 2;
}
@media screen and (max-width: 768px) {
.m-payment-text01 {
margin-bottom: 29px;
padding: 0;
line-height: 1.8;
}
}
.m-payment-text02 {
border-top: 2px solid #002151;
border-bottom: 2px solid #002151;
margin-bottom: 15px;
padding: 2px 0;
text-align: center;
}
@media screen and (max-width: 768px) {
.m-payment-text02 {
font-size: 17px;
font-size: 1.0625rem;
padding: 2px 0;
margin-bottom: 21px;
}
}
@media screen and (max-width: 768px) {
.m-payment-des {
padding: 0 14px;
}
}
@media screen and (max-width: 640px) {
.m-payment-des {
padding: 0;
font-feature-settings: "palt" 1;
}
}
.m-payment-des dl {
display: flex;
justify-content: space-between;
font-size: 14px;
font-size: 0.875rem;
line-height: 2.1428571429;
}
@media screen and (max-width: 1000px) {
.m-payment-des dl {
font-size: 12px;
font-size: 0.75rem;
}
}
@media screen and (max-width: 768px) {
.m-payment-des dl {
font-size: 17px;
font-size: 1.0625rem;
line-height: 2.15;
}
}
@media (max-width: 320px) {
.m-payment-des dl {
font-size: 13px;
font-size: 0.8125rem;
}
}
.m-color-orange {
color: #fa7933;
}
.m-payment-price.m-bg-blue {
margin: 0 -5px;
padding: 0 5px;
margin-top: 10px;
}
@media screen and (max-width: 768px) {
.m-payment-price.m-bg-blue {
margin: 0 -7px;
padding: 0 14px;
margin-top: 10px;
}
}
.m-flow-box01 {
text-align: center;
margin-bottom: -20px;
}
.m-flow-icon {
position: relative;
top: -20px;
}
@media screen and (max-width: 768px) {
.m-flow-icon {
top: -18px;
}
}
.m-flow-icon img {
max-width: 59px;
}
@media screen and (max-width: 768px) {
.m-flow-icon img {
max-width: 42px;
margin-bottom: 6px;
}
}
.sec-flow .m-titl-01 {
margin-bottom: 55px;
font-size: 35px;
font-size: 2.1875rem;
line-height: 2.4285714286;
}
@media screen and (max-width: 768px) {
.sec-flow .m-titl-01 {
margin-bottom: 42px;
font-size: 20px;
font-size: 1.25rem;
line-height: 2.12;
}
}
.m-flow-list ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 95px;
}
@media screen and (max-width: 768px) {
.m-flow-list ul {
margin-bottom: 15px;
padding: 0 29px;
}
}
.m-flow-list ul li {
max-width: 305px;
width: 100%;
border: 5px #519ad7 solid;
border-radius: 20px;
position: relative;
background: #fff;
padding: 42px 53px 18px;
text-align: center;
font-weight: 700;
margin-bottom: 51px;
}
@media screen and (max-width: 1000px) {
.m-flow-list ul li {
max-width: 100%;
width: 48%;
}
.m-flow-list ul li:nth-child(even):before {
display: none;
}
}
@media screen and (max-width: 768px) {
.m-flow-list ul li {
width: 100%;
padding: 36px 47px 18px;
margin-bottom: 47px;
}
}
@media (max-width: 320px) {
.m-flow-list ul li {
padding: 36px 10px 18px;
}
}
@media screen and (max-width: 768px) {
.m-flow-list ul li:nth-child(1) .m-flowlist-img {
max-width: 181px;
}
}
.m-flow-list ul li:nth-child(2) .m-flowlist-img {
max-width: 181px;
}
.m-flow-list ul li:nth-child(3) .m-flowlist-img {
max-width: 124px;
}
.m-flow-list ul li:nth-child(4) .m-flowlist-img {
max-width: 154px;
}
.m-flow-list ul li:nth-child(5) .m-flowlist-img {
max-width: 197px;
}
.m-flow-list ul li:nth-child(6) .m-flowlist-img {
max-width: 126px;
}
.m-flow-list ul li:not(:last-child):before {
content: "";
background: #519ad7;
width: 17%;
height: 5px;
position: absolute;
top: 50%;
right: -17%;
z-index: 1;
transform: translateY(-50%);
}
@media screen and (max-width: 1000px) {
.m-flow-list ul li:not(:last-child):before {
width: 11%;
right: -11%;
}
}
@media screen and (max-width: 768px) {
.m-flow-list ul li:not(:last-child):before {
content: "";
background: #519ad7;
top: inherit;
bottom: -18%;
left: 50%;
right: inherit;
width: 5px;
height: 12%;
z-index: 1;
}
}
.m-flow-list ul li:nth-child(3n+3):before {
display: none;
}
@media screen and (max-width: 1000px) {
.m-flow-list ul li:nth-child(3n+3):before {
display: block;
}
}
@media screen and (max-width: 1000px) {
.m-flow-list ul li:last-child:before {
display: none;
}
}
@media screen and (max-width: 768px) {
.m-flow-list ul li:nth-child(2):before, .m-flow-list ul li:nth-child(4):before {
display: block;
}
}
.m-flow-number {
font-size: 25px;
font-size: 1.5625rem;
background: #519ad7;
width: 58px;
height: 58px;
border-radius: 50%;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: -35px;
left: 50%;
transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
.m-flow-number {
z-index: 5;
width: 52px;
height: 52px;
top: -29px;
}
}
.m-flowlist-title {
font-size: 21px;
font-size: 1.3125rem;
line-height: 1.5;
margin-bottom: 17px;
}
@media screen and (max-width: 768px) {
.m-flowlist-title {
margin: 0 -10px 8px;
}
}
.m-flowlist-img {
text-align: center;
margin: 0 auto;
min-height: 109px;
}
@media screen and (max-width: 768px) {
.m-flowlist-img {
margin-bottom: -10px;
}
}
.m-flowlist-text01 {
font-size: 13px;
font-size: 0.8125rem;
line-height: 1.9230769231;
font-feature-settings: "palt" 1;
}
.sec-form {
padding-bottom: 80px;
}
@media screen and (max-width: 768px) {
.sec-form {
padding-bottom: 70px;
padding-top: 31px;
}
.sec-form .m-circle-top {
margin-bottom: 50px;
}
}
.sec-form .m-box-icon {
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/img_bg_dot.png);
top: -45px;
}
@media screen and (max-width: 768px) {
.sec-form .m-box-icon {
top: -34px;
}
}
.sec-form .m-circle-top:before {
z-index: 1;
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/img_bg_dot.png);
top: -46px;
}
@media screen and (max-width: 768px) {
.sec-form .m-circle-top:before {
top: -36px;
}
}
.form-inner {
padding: 73px 0 54px;
position: relative;
z-index: 5;
margin-bottom: 67px;
}
@media screen and (max-width: 768px) {
.form-inner {
padding: 49px 0 42px;
margin-bottom: 49px;
}
}
.form-inner .m-box-icon {
z-index: -1;
}
@media screen and (max-width: 768px) {
.form-inner .m-box-icon .m-form-icon img {
max-width: 45px;
}
}
.m-campaign-01 {
margin-bottom: 95px;
margin-top: -10px;
}
@media screen and (max-width: 768px) {
.m-campaign-01 {
margin-top: 6px;
margin-bottom: 79px;
}
.m-campaign-01 .m-campaign-price {
margin: 0 auto;
}
}
.m-form-title.m-titl-01 {
margin-bottom: 28px;
}
@media screen and (max-width: 768px) {
.m-form-title.m-titl-01 {
margin-bottom: 25px;
}
}
.tel-wr {
max-width: 423px;
width: 100%;
margin: 0 auto 42px;
background: #d7eefd;
padding: 30px 52px 15px;
text-align: center;
border-radius: 10px;
}
@media screen and (max-width: 768px) {
.tel-wr {
margin-bottom: 35px;
max-width: 274px;
padding: 23px 0 14px;
text-align: center;
line-height: 1;
}
}
.tel-wr .fz-roboto {
display: flex;
align-items: center;
font-size: 25px;
font-size: 1.5625rem;
font-weight: 700;
line-height: 1;
}
@media screen and (max-width: 768px) {
.tel-wr .fz-roboto {
font-size: 16px;
font-size: 1rem;
justify-content: center;
margin-bottom: -4px;
}
}
.tel {
font-size: 41px;
font-size: 2.5625rem;
font-weight: 500;
margin-left: 10px;
pointer-events: none;
}
@media screen and (max-width: 768px) {
.tel {
pointer-events: inherit;
font-size: 27px;
font-size: 1.6875rem;
}
}
.time {
font-size: 12px;
font-size: 0.75rem;
font-weight: 700;
}
@media screen and (max-width: 768px) {
.time {
font-size: 8px;
font-size: 0.5rem;
}
}
.m-box-form {
max-width: 580px;
width: 100%;
margin: 0 auto;
padding-left: 10px;
}
@media screen and (max-width: 768px) {
.m-box-form {
max-width: 670px;
padding: 0 29px;
}
}
.form-wr .form-table {
width: 100%;
color: #000;
font-size: 14px;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.5;
margin-bottom: 48px;
}
@media screen and (max-width: 768px) {
.form-wr .form-table {
font-size: 15px;
font-size: 0.9375rem;
margin-bottom: 18px;
}
}
.form-wr .form-table tr th {
width: 165px;
padding-right: 45px;
font-weight: 500;
vertical-align: middle;
}
@media screen and (max-width: 768px) {
.form-wr .form-table tr th {
display: block;
width: 100%;
padding: 0;
}
}
.form-wr .form-table tr th.required {
position: relative;
}
.form-wr .form-table tr th.required:after {
content: "必須";
position: absolute;
display: inline-block;
font-size: 12px;
font-size: 0.75rem;
background: #f66236;
color: #fff;
font-weight: 500;
top: calc(50% - 11px);
right: 0;
width: 38px;
text-align: center;
line-height: 1;
padding: 5px 0;
}
@media screen and (max-width: 768px) {
.form-wr .form-table tr th.required:after {
position: static;
margin-left: 11px;
}
}
.form-wr .form-table tr th.last {
vertical-align: top;
padding-top: 15px;
}
@media screen and (max-width: 768px) {
.form-wr .form-table tr th.last {
padding-top: 0;
}
}
.form-wr .form-table tr td {
padding: 12px 0 12px 20px;
}
@media screen and (max-width: 768px) {
.form-wr .form-table tr td {
display: block;
padding: 16px 0 15px;
}
}
.form-wr .form-table input,
.form-wr .form-table textarea {
border: 1px solid #9B9B9B;
width: 100%;
background: #fff;
}
.form-wr .form-table input {
height: 33px;
padding: 0 10px;
}
@media screen and (max-width: 768px) {
.form-wr .form-table input {
height: 48px;
}
}
.form-wr .form-table textarea {
padding: 10px;
height: 93px;
overflow-y: auto;
resize: none;
}
@media screen and (max-width: 768px) {
.form-wr .form-table textarea {
height: 108px;
}
}
.anchorStyle01 {
font-size: 16px;
font-size: 1rem;
font-weight: bold;
line-height: 1;
border-bottom: 2px solid #707070;
padding-bottom: 10px;
position: relative;
display: inline-block;
color: #000;
}
@media screen and (max-width: 768px) {
.anchorStyle01 {
font-size: 10px;
font-size: 0.625rem;
padding-bottom: 5px;
}
}
.anchorStyle01:after {
content: "\f061";
font-family: "Font Awesome 5 Free";
font-weight: 900;
line-height: 1;
font-size: 16px;
font-size: 1rem;
display: block;
position: absolute;
top: 50%;
right: -43px;
transition: 0.3s linear;
transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
.anchorStyle01:after {
font-size: 10px;
font-size: 0.625rem;
right: -25px;
}
}
.anchorStyle02 {
width: 440px;
background: #000;
font-size: 20px;
font-size: 1.25rem;
line-height: 1;
font-weight: bold;
color: #fff;
border-radius: 10px;
display: block;
margin: 0 auto;
text-align: center;
position: relative;
padding: 28px 10px;
}
@media screen and (max-width: 768px) {
.anchorStyle02 {
max-width: 276px;
width: 100%;
font-size: 13px;
font-size: 0.8125rem;
padding: 17px 10px;
}
.anchorStyle02.mB20 {
margin-bottom: 26px !important;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.anchorStyle02.mB20 {
margin-bottom: 16px !important;
}
}
@media (max-width: 320px) {
.anchorStyle02 {
max-width: 176px;
}
}
.anchorStyle02:after {
content: "\f061";
display: block;
font-size: 16px;
font-size: 1rem;
color: #fff;
font-family: "Font Awesome 5 Free";
font-weight: 900;
line-height: 1;
position: absolute;
top: 50%;
right: 25px;
transition: 0.3s linear;
transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
.anchorStyle02:after {
font-size: 10px;
font-size: 0.625rem;
right: 19px;
}
}
.anchorStyle01:hover:after,
.anchorStyle02:hover:after {
transform: translate(5px, -50%);
}
.m-banner-box {
text-align: center;
}
@media screen and (max-width: 768px) {
.m-banner-box {
padding: 0 14px;
}
.m-banner-box img {
width: 100%;
}
}
.m-banner-box .img-banner {
max-width: 286px;
display: inline-block;
margin: 0 23px;
}
@media screen and (max-width: 768px) {
.m-banner-box .img-banner {
display: block;
margin: 0 auto;
max-width: 100%;
}
}
@media screen and (max-width: 768px) {
.m-banner-box .m-banner01 img {
margin-bottom: 45px;
}
}
.l-footer {
position: relative;
background: #fff;
}
.l-footer:before {
content: "";
background: #fff57d;
width: 100%;
height: 14px;
position: absolute;
bottom: 0;
left: 0;
}
@media screen and (max-width: 768px) {
.l-footer:before {
height: 13px;
bottom: -7px;
}
}
.l-footer .logo-footer {
text-align: center;
padding: 58px 0;
}
@media screen and (max-width: 768px) {
.l-footer .logo-footer {
padding: 29px 0 30px;
}
.l-footer .logo-footer img {
max-width: 148px;
}
}
.l-footer .m-back-top {
position: absolute;
height: 93px;
width: 93px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background: #002151;
color: #fff;
top: 35px;
right: 20px;
font-size: 13px;
font-size: 0.8125rem;
font-weight: 500;
border-radius: 39px;
cursor: pointer;
}
@media screen and (max-width: 768px) {
.l-footer .m-back-top {
width: 54px;
height: 54px;
font-size: 8px;
font-size: 0.5rem;
border-radius: 24px;
top: 16px;
right: 14px;
}
}
.l-footer .m-back-top i {
font-size: 24px;
font-size: 1.5rem;
transition: 0.3s linear;
}
@media screen and (max-width: 768px) {
.l-footer .m-back-top i {
font-size: 14px;
font-size: 0.875rem;
}
}
.l-footer .m-back-top:hover i {
transform: translateY(-5px);
}
.form-confirm {
background: #fdfdd7;
}
.form-confirm .l-main {
padding-top: 180px;
}
@media screen and (max-width: 768px) {
.form-confirm .l-main {
padding-top: 90px;
}
}
@media screen and (max-width: 768px) {
.form-confirm .m-img-form {
margin-bottom: 10px;
}
.form-confirm .m-img-form img {
max-width: 45px;
}
}
.form-confirm .form-inner {
padding: 40px 72px 55px;
}
@media screen and (max-width: 768px) {
.form-confirm .form-inner {
padding: 26px 30px 32px;
margin-bottom: 31px;
}
}
.form-confirm .m-box-form {
padding-left: 5px;
max-width: 440px;
}
@media screen and (max-width: 768px) {
.form-confirm .m-box-form {
padding-left: 0;
padding-right: unset;
}
}
.form-confirm .m-form-title.m-titl-01 {
margin-bottom: 24px;
}
@media screen and (max-width: 768px) {
.form-confirm .m-form-title.m-titl-01 {
margin-bottom: 28px;
}
}
.form-confirm .anchorStyle02 {
margin-bottom: 16px;
}
@media screen and (max-width: 768px) {
.form-confirm .anchorStyle02 {
margin-bottom: 12px;
}
}
.form-confirm .anchorStyle02.m-btn-back {
background: #727272;
}
.form-confirm .anchorStyle02.m-btn-back:after {
content: "\f060";
right: inherit;
left: 25px;
}
@media screen and (max-width: 768px) {
.form-confirm .anchorStyle02.m-btn-back:after {
left: 19px;
}
}
.form-confirm .anchorStyle02.m-btn-back:hover:after {
transform: translate(-5px, -50%);
}
.form-confirm .form-wr .form-table {
margin-bottom: 43px;
}
@media screen and (max-width: 768px) {
.form-confirm .form-wr .form-table {
margin-bottom: -4px;
margin-left: 5px;
font-size: 14px;
font-size: 0.875rem;
}
}
.form-confirm .form-wr .form-table tr th {
padding-left: 15px;
}
@media screen and (max-width: 768px) {
.form-confirm .form-wr .form-table tr th {
padding-left: 0;
}
}
.form-confirm .form-wr .form-table tr th.last {
padding-top: 18px;
}
@media screen and (max-width: 768px) {
.form-confirm .form-wr .form-table tr th.last {
padding-top: 0;
}
}
.form-confirm .form-wr .form-table tr td {
padding: 18px 0 18px 44px;
}
@media screen and (max-width: 768px) {
.form-confirm .form-wr .form-table tr td {
padding: 8px 0 40px;
}
}
.form-complete {
background: #fdfdd7;
}
.form-complete .l-main {
padding-top: 182px;
}
@media screen and (max-width: 768px) {
.form-complete .l-main {
padding-top: 90px;
}
}
.form-complete .form-inner {
padding: 40px 72px 64px;
margin-bottom: 73px;
}
@media screen and (max-width: 768px) {
.form-complete .form-inner {
padding: 26px 30px 29px;
margin-bottom: 41px;
}
}
.form-complete .m-complete-text {
font-size: 20px;
font-size: 1.25rem;
font-weight: 500;
line-height: 1.5;
margin-bottom: 59px;
letter-spacing: 0.1em;
color: #000;
}
@media screen and (max-width: 768px) {
.form-complete .m-complete-text {
font-size: 14px;
margin-bottom: 33px;
}
}
@media screen and (max-width: 768px) {
.form-complete .m-img-form img {
max-width: 45px;
margin-bottom: 10px;
}
}
.form-complete .m-form-title.m-titl-01 {
margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
.form-complete .anchorStyle02 {
padding-left: 19px;
}
.form-complete .anchorStyle02:after {
right: 12px;
}
}
.l-fixbutton {
display: none;
justify-content: center;
align-items: center;
text-align: center;
position: fixed;
width: min(270px, 100%);
bottom: 0;
left: 50%;
transform: translateX(-50%);
color: #fff;
font-size: 14px;
font-size: 0.875rem;
letter-spacing: 0.05em;
background-color: #ff7800;
border-radius: 15px 15px 0 0;
padding: 15px 10px 25px;
margin-inline: auto;
z-index: 30;
}
.l-fixbutton::after {
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 0 4px 5px;
border-color: transparent transparent transparent #fff;
margin-left: 5px;
position: absolute;
right: 20px;
}
@media screen and (max-width: 640px) {
.l-fixbutton {
display: flex;
}
}
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&family=Roboto:wght@100;300;400;500;700;900&display=swap");
.m-pc-hidden {
display: none;
}
@media screen and (max-width: 768px) {
.m-pc-hidden {
display: inline-block;
}
}
.m-sp-hidden {
display: inline-block;
}
@media screen and (max-width: 768px) {
.m-sp-hidden {
display: none;
}
}
.visually-hidden { border: 0;
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}   * {
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}   html {
line-height: 1.15; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }   body {
margin: 0;
} main {
display: block;
}  p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
margin: 0;
}  h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
line-height: inherit;
font-weight: inherit;
margin: 0;
}  ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}  dt {
font-weight: bold;
}
dd {
margin-left: 0;
}   hr {
box-sizing: content-box; height: 0; overflow: visible; border: 0;
border-top: 1px solid;
margin: 0;
clear: both;
color: inherit;
} pre {
font-family: monospace, monospace; font-size: inherit; }
address {
font-style: inherit;
}   a {
background-color: transparent;
text-decoration: none;
color: inherit;
} abbr[title] {
border-bottom: none; text-decoration: underline; -webkit-text-decoration: underline dotted;
text-decoration: underline dotted; } b,
strong {
font-weight: bolder;
} code,
kbd,
samp {
font-family: monospace, monospace; font-size: inherit; } small {
font-size: 80%;
} sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}   img {
border-style: none;
vertical-align: bottom;
}
embed,
object,
iframe {
border: 0;
vertical-align: bottom;
}   button,
input,
optgroup,
select,
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
vertical-align: middle;
color: inherit;
font: inherit;
border: 0;
background: transparent;
padding: 0;
margin: 0;
outline: 0;
border-radius: 0;
text-align: inherit;
} [type=checkbox] {
-webkit-appearance: checkbox;
-moz-appearance: checkbox;
appearance: checkbox;
}
[type=radio] {
-webkit-appearance: radio;
-moz-appearance: radio;
appearance: radio;
} button,
input { overflow: visible;
} button,
select { text-transform: none;
} button,
[type=button],
[type=reset],
[type=submit] {
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
button[disabled],
[type=button][disabled],
[type=reset][disabled],
[type=submit][disabled] {
cursor: default;
} button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
border-style: none;
padding: 0;
} button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
outline: 1px dotted ButtonText;
} select::-ms-expand {
display: none;
} option {
padding: 0;
} fieldset {
margin: 0;
padding: 0;
border: 0;
min-width: 0;
} legend {
color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } progress {
vertical-align: baseline;
} textarea {
overflow: auto;
} [type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto;
} [type=search] {
outline-offset: -2px; } [type=search]::-webkit-search-decoration {
-webkit-appearance: none;
} ::-webkit-file-upload-button {
-webkit-appearance: button; font: inherit; } label[for] {
cursor: pointer;
}   details {
display: block;
} summary {
display: list-item;
} [contenteditable] {
outline: none;
}  table {
border-collapse: collapse;
border-spacing: 0;
}
caption {
text-align: left;
}
td,
th {
vertical-align: top;
padding: 0;
}
th {
text-align: left;
font-weight: bold;
}   template {
display: none;
} [hidden] {
display: none;
}
html {
font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}
body {
color: #002151;
font-size: 15px;
font-size: 0.9375rem;
font-weight: 500;
line-height: 1.8;
}
@media screen and (max-width: 768px) {
body {
font-size: 14px;
font-size: 0.875rem;
}
}
a:hover {
text-decoration: none;
}
a:hover img {
opacity: 0.8;
}
a img {
transition-property: opacity;
transition-duration: 0.2s;
backface-visibility: hidden;
}
img {
max-width: 100%;
height: auto;
}
button:focus,
input:focus,
optgroup:focus,
select:focus,
textarea:focus {
outline: -webkit-focus-ring-color auto 1px;
outline-color: -webkit-focus-ring-color;
outline-style: auto;
outline-width: 1px;
}
small {
font-size: inherit;
}
.m-wrapper {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width: 1000px) {
.m-wrapper {
max-width: 91.25%;
}
}
.m-bgblue {
background-color: #58A5BF;
}
.m-bgorange {
background-color: #F29B87;
}
.m-color01 {
color: #58A5BF;
}
.m-color02 {
color: #F29B87;
}
.m-tellink {
pointer-events: none;
}
@media screen and (max-width: 768px) {
.m-tellink {
pointer-events: auto;
text-decoration: underline;
}
}
.for-ie {
display: none;
width: 100%;
color: #fff;
letter-spacing: 0.05em;
padding: 25px 4.375%;
background-color: #e83e34;
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
.for-ie .m-wrapper {
position: relative;
padding-right: 100px;
}
.for-ie a {
text-decoration: underline;
}
.for-ie a:hover {
text-decoration: none;
}
.for-ie button {
width: 120px;
text-align: center;
line-height: 1;
padding: 10px 10px 12px;
border: 1px solid #fff;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.for-ie button:focus {
outline: none;
}
.tCenter {
text-align: center !important;
}
.tRight {
text-align: right !important;
}
.tLeft {
text-align: left !important;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
.mT0 {
margin-top: 0px !important;
}
.mT5 {
margin-top: 5px !important;
}
.mT10 {
margin-top: 10px !important;
}
.mT15 {
margin-top: 15px !important;
}
.mT20 {
margin-top: 20px !important;
}
.mT25 {
margin-top: 25px !important;
}
.mT30 {
margin-top: 30px !important;
}
.mT35 {
margin-top: 35px !important;
}
.mT40 {
margin-top: 40px !important;
}
.mT45 {
margin-top: 45px !important;
}
.mT50 {
margin-top: 50px !important;
}
.mB0 {
margin-bottom: 0px !important;
}
.mB5 {
margin-bottom: 5px !important;
}
.mB10 {
margin-bottom: 10px !important;
}
.mB15 {
margin-bottom: 15px !important;
}
.mB20 {
margin-bottom: 20px !important;
}
.mB25 {
margin-bottom: 25px !important;
}
.mB30 {
margin-bottom: 30px !important;
}
.mB35 {
margin-bottom: 35px !important;
}
.mB40 {
margin-bottom: 40px !important;
}
.mB45 {
margin-bottom: 45px !important;
}
.mB50 {
margin-bottom: 50px !important;
}
.mL0 {
margin-left: 0px !important;
}
.mL10 {
margin-left: 10px !important;
}
.mL20 {
margin-left: 20px !important;
}
.mL30 {
margin-left: 30px !important;
}
.mR0 {
margin-right: 0px !important;
}
.mR10 {
margin-right: 10px !important;
}
.mR20 {
margin-right: 20px !important;
}
.mR30 {
margin-right: 30px !important;
}
.pT0 {
padding-top: 0px !important;
}
.pT5 {
padding-top: 5px !important;
}
.pT10 {
padding-top: 10px !important;
}
.pT15 {
padding-top: 15px !important;
}
.pT20 {
padding-top: 20px !important;
}
.pT25 {
padding-top: 25px !important;
}
.pT30 {
padding-top: 30px !important;
}
.pT35 {
padding-top: 35px !important;
}
.pT40 {
padding-top: 40px !important;
}
.pT45 {
padding-top: 45px !important;
}
.pT50 {
padding-top: 50px !important;
}
.pB0 {
padding-bottom: 0px !important;
}
.pB5 {
padding-bottom: 5px !important;
}
.pB10 {
padding-bottom: 10px !important;
}
.pB15 {
padding-bottom: 15px !important;
}
.pB20 {
padding-bottom: 20px !important;
}
.pB25 {
padding-bottom: 25px !important;
}
.pB30 {
padding-bottom: 30px !important;
}
.pB35 {
padding-bottom: 35px !important;
}
.pB40 {
padding-bottom: 40px !important;
}
.pB45 {
padding-bottom: 45px !important;
}
.pB50 {
padding-bottom: 50px !important;
}
.pL0 {
padding-left: 0px !important;
}
.pL10 {
padding-left: 10px !important;
}
.pL20 {
padding-left: 20px !important;
}
.pL30 {
padding-left: 30px !important;
}
.pR0 {
padding-right: 0px !important;
}
.pR10 {
padding-right: 10px !important;
}
.pR20 {
padding-right: 20px !important;
}
.pR30 {
padding-right: 30px !important;
}
body {
overflow-x: hidden;
}
body.is-fix {
height: 100vh;
overflow: hidden;
}
@media screen and (max-width: 1000px) {
.m-wrapper {
max-width: 91.6%;
}
}
@media screen and (max-width: 768px) {
.m-wrapper {
max-width: 100%;
padding: 0 20px;
}
}
.m-tablet-hidden {
display: none;
}
@media screen and (max-width: 1000px) {
.m-tablet-hidden {
display: block;
}
}
.fz-roboto {
font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}
.fz-roboto {
font-family: "Roboto", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}
.fw-900 {
font-weight: 900;
}
.fz-29 {
font-size: 29px;
font-size: 1.8125rem;
}
.fz-35 {
font-size: 35px;
font-size: 2.1875rem;
}
.fz-50 {
font-size: 50px;
font-size: 3.125rem;
}
.fz-20 {
font-size: 20px;
font-size: 1.25rem;
}
.fz-25 {
font-size: 25px;
font-size: 1.5625rem;
}
.fz-43 {
font-size: 43px;
font-size: 2.6875rem;
}
.fz-75 {
font-size: 75px;
font-size: 4.6875rem;
}
.fz-100 {
font-size: 100px;
font-size: 6.25rem;
}
.m-color-yellow {
color: #fdf107;
}
.m-bg-color {
background: #002151;
}
.m-bg-color01 {
background: #002151;
}
@media screen and (max-width: 1000px) {
.m-bg-color01 {
background: none;
}
}
.m-bg-blue {
background: #d7eefd;
}
.m-bg-blue01 {
background: #519ad7;
}
.m-bg-gray {
background: #eaeaea;
}
.border-bottom {
border-bottom: 3px solid;
padding-bottom: 5px;
}
.m-border-shadow {
border-radius: 10px;
border: 2px solid #002151;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
}
.l-header {
position: fixed;
width: 100%;
top: 0;
left: 0;
background-color: transparent;
z-index: 1999;
height: 120px;
transition: 0.2s ease-in-out;
}
@media screen and (max-width: 1000px) {
.l-header {
position: absolute;
padding-right: 60px;
}
}
@media screen and (max-width: 768px) {
.l-header {
height: 70px;
}
}
.l-header.bg-white {
background: #fff;
}
.l-header .m-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
}
@media screen and (max-width: 1000px) {
.l-header .m-wrapper {
max-width: 100%;
padding: 0 40px;
}
}
@media screen and (max-width: 768px) {
.l-header .m-wrapper {
padding: 0 0 0 20px;
}
}
.l-header .m-gnav-menu {
display: flex;
align-items: center;
}
@media screen and (max-width: 1000px) {
.l-header .m-gnav-menu {
display: none;
position: fixed;
top: 120px;
left: 0;
width: 100%;
background: #fdf107;
text-align: center;
padding-top: 70px;
padding-bottom: 65px;
overflow: auto;
max-height: 100%;
height: 100%;
}
}
@media screen and (max-width: 768px) {
.l-header .m-gnav-menu {
top: 0;
padding-top: 142px;
padding-bottom: 66px;
}
}
@media screen and (max-width: 1000px) {
.l-header .m-gnav-menu .m-gnav-item {
width: 66%;
margin: 0 auto;
}
}
.l-header .m-gnav-menu .m-gnav-item a {
font-size: 15px;
font-size: 0.9375rem;
font-weight: 700;
transition: 0.2s ease-in-out;
}
@media screen and (max-width: 1000px) {
.l-header .m-gnav-menu .m-gnav-item a {
color: #002151;
margin: 0 0 62px;
padding-bottom: 20px;
display: block;
font-size: 20px;
font-size: 1.25rem;
position: relative;
}
}
@media screen and (max-width: 1000px) and (max-width: 768px) {
.l-header .m-gnav-menu .m-gnav-item a {
padding-bottom: 10px;
margin: 0 0 50px;
font-size: 15px;
font-size: 0.9375rem;
}
}
@media screen and (max-width: 1000px) {
.l-header .m-gnav-menu .m-gnav-item a::before {
content: "";
background: #002151;
width: 53px;
height: 3px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
}
@media screen and (max-width: 1000px) and (max-width: 768px) {
.l-header .m-gnav-menu .m-gnav-item a::before {
width: 27px;
height: 2px;
}
}
.l-header .m-gnav-menu .m-gnav-item:not(:first-of-type) {
margin-left: 38px;
}
@media screen and (max-width: 1000px) {
.l-header .m-gnav-menu .m-gnav-item:not(:first-of-type) {
margin: 0 auto;
}
}
.l-header .m-gnav-menu li a {
position: relative;
}
.l-header .m-gnav-menu li a:after {
content: "";
position: absolute;
bottom: -5px;
left: 0;
right: 0;
margin: 0 auto;
height: 2px;
width: 0;
background: #002151;
transition: all 0.3s linear;
}
@media screen and (max-width: 1000px) {
.l-header .m-gnav-menu li a:after {
display: none;
}
}
.l-header .m-gnav-menu li:hover a:after {
width: 100%;
}
.l-header .m-logo {
max-width: 231px;
}
@media screen and (max-width: 768px) {
.l-header .m-logo {
max-width: 125px;
}
}
.l-header .m-gnav-btn {
display: none;
position: relative;
overflow: hidden;
}
@media screen and (max-width: 1000px) {
.l-header .m-gnav-btn {
display: block;
display: inline-block;
width: 53px;
height: 21px;
cursor: pointer;
margin-left: 40px;
position: fixed;
right: 4.375%;
z-index: 1;
}
}
@media screen and (max-width: 1000px) and (max-width: 768px) {
.l-header .m-gnav-btn {
margin-left: 20px;
}
}
@media screen and (max-width: 1000px) {
.l-header .m-gnav-btn span {
display: inline-block;
background: #002151;
position: absolute;
left: 0;
transition: 0.3s ease-in-out;
width: 53px;
height: 4px;
}
}
@media screen and (max-width: 1000px) and (max-width: 768px) {
.l-header .m-gnav-btn span {
width: 27px;
height: 2px;
}
}
@media screen and (max-width: 1000px) {
.l-header .m-gnav-btn span:nth-child(2) {
top: 15px;
}
}
@media screen and (max-width: 1000px) and (max-width: 768px) {
.l-header .m-gnav-btn span:nth-child(2) {
top: 8px;
}
}
@media screen and (max-width: 768px) {
.l-header .m-gnav-btn {
width: 27px;
height: 11px;
}
}
.l-header .m-gnav {
display: flex;
align-items: center;
flex: 1;
justify-content: flex-end;
}
@media screen and (max-width: 1000px) {
.l-header .m-gnav {
flex-direction: row-reverse;
justify-content: flex-start;
align-items: center;
}
}
.l-header .m-btn-contact {
margin-left: 19px;
transition: 0.2s ease-in-out;
max-width: 200px;
width: 100%;
height: 50px;
background: #4d64f0;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50px;
color: #fff;
}
@media screen and (max-width: 768px) {
.l-header .m-btn-contact {
margin-left: 0;
font-size: 12px;
font-size: 0.75rem;
max-width: 124px;
height: 40px;
}
}
.l-header .m-btn-contact:hover {
color: #4d64f0;
background: #fff;
border: 1px solid #4d64f0;
}
.l-header .m-close-menu {
display: none;
}
@media screen and (max-width: 1000px) {
.l-header .m-close-menu {
display: inline-block;
cursor: pointer;
}
}
@media screen and (max-width: 768px) {
.l-header .m-close-menu {
max-width: 35px;
margin-top: 42px;
}
}
.sec-worries {
position: relative;
}
@media screen and (max-width: 768px) {
.sec-worries:before {
content: "";
width: 149px;
height: 145px;
position: absolute;
bottom: -89px;
left: 0;
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/bg_worries_sp_bottom.png) top left no-repeat;
background-size: 100%;
z-index: -1;
}
}
.sec-merit {
position: relative;
}
@media screen and (max-width: 768px) {
.sec-merit:before, .sec-merit:after {
content: "";
position: absolute;
background-size: 100%;
z-index: -1;
}
.sec-merit:before {
width: 100%;
height: 644px;
top: 92px;
left: 0;
background: #d7eefd url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/bg_merit_sp_top.png) top center no-repeat;
background-size: 100%;
}
.sec-merit:after {
width: 113px;
height: 151px;
top: 144px;
right: 0;
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/bg_merit_02.png) top center no-repeat;
background-size: 100%;
}
}
.bg-content {
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/bg_sec_pc.png) top center no-repeat;
background-size: cover;
padding-top: 128px;
}
@media screen and (max-width: 768px) {
.bg-content {
padding-top: 70px;
background: none;
}
}
@media screen and (max-width: 768px) {
.m-background-blue {
background: #d7eefd;
margin: 0 -20px;
padding: 0 20px;
position: relative;
}
.m-background-blue:after {
content: "";
width: 100%;
height: 215px;
position: absolute;
bottom: -140px;
left: 0;
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/mg_merit_bottom_02.jpg) top center no-repeat;
background-size: 100%;
z-index: 1;
}
}
.m-design-image {
position: relative;
}
@media screen and (max-width: 768px) {
.m-design-image:before, .m-design-image:after {
content: "";
position: absolute;
}
.m-design-image:before {
width: 125px;
height: 164px;
top: 64px;
left: -20px;
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_design_02.png) top center no-repeat;
background-size: 100%;
z-index: -1;
}
.m-design-image:after {
width: 78px;
height: 76px;
top: 12px;
right: -20px;
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_design_01.png) top center no-repeat;
background-size: 100%;
z-index: 20;
pointer-events: none;
}
}
.m-mv {
position: relative;
}
@media screen and (max-width: 768px) {
.m-mv:before {
content: "";
width: 100%;
height: 1276px;
position: absolute;
top: 3px;
left: 0;
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/bg_top_mv_sp.png) top left no-repeat;
background-size: 100%;
z-index: -1;
}
}
.m-mv .m-wrapper {
position: relative;
}
.m-mv .m-mv-boximg {
position: absolute;
top: 0;
right: 48px;
z-index: 1;
}
@media screen and (max-width: 1000px) {
.m-mv .m-mv-boximg {
position: inherit;
margin-bottom: 30px;
}
}
@media screen and (max-width: 768px) {
.m-mv .m-mv-boximg {
position: inherit;
margin-bottom: 30px;
max-width: 297px;
margin-bottom: 0;
margin-inline: auto;
}
}
.m-mv .m-mv-text {
font-size: 22px;
font-size: 1.375rem;
line-height: 2.0454545455;
font-weight: 700;
margin-bottom: 20px;
padding-top: 13px;
letter-spacing: 0.05em;
}
@media screen and (max-width: 1000px) {
.m-mv .m-mv-text {
margin: 0 auto 54px;
max-width: 611px;
}
}
@media screen and (max-width: 768px) {
.m-mv .m-mv-text {
font-size: 15px;
font-size: 0.9375rem;
line-height: 2.2;
margin: 0 auto 20px;
max-width: 335px;
}
}
@media (max-width: 320px) {
.m-mv .m-mv-text {
font-size: 13px;
font-size: 0.8125rem;
}
}
.m-mv .m-bg-text01 {
padding-left: 28px;
}
@media screen and (max-width: 1000px) {
.m-mv .m-bg-text01 {
padding: 0 10px 0 18px;
}
}
@media screen and (max-width: 768px) {
.m-mv .m-bg-text01 {
padding: 0 16px;
}
}
.m-mv .m-bg-text02 {
margin-left: -26px;
}
@media screen and (max-width: 1000px) {
.m-mv .m-bg-text02 {
padding: 0 10px 0 18px;
margin-left: 166px;
}
}
@media screen and (max-width: 768px) {
.m-mv .m-bg-text02 {
padding: 0 11px;
margin-left: 110px;
}
}
.m-mv .m-mv-box01 {
margin-bottom: 10px;
}
@media screen and (max-width: 1000px) {
.m-mv .m-mv-box01 {
margin: 0 auto 54px;
max-width: 611px;
}
}
@media screen and (max-width: 768px) {
.m-mv .m-mv-box01 {
margin: 0 auto 26px;
max-width: 335px;
}
}
.m-mv .m-mv-text01 {
margin-left: 19px;
}
@media screen and (max-width: 768px) {
.m-mv .m-mv-text01 {
margin-left: 16px;
}
}
.m-mv .m-mv-text02 {
margin-left: 44px;
}
@media screen and (max-width: 768px) {
.m-mv .m-mv-text02 {
margin-left: 33px;
}
}
.m-mv .m-mv-title {
font-size: 63px;
font-size: 3.9375rem;
line-height: 1.8571428571;
color: #fff;
transform: skewX(-8deg);
letter-spacing: 0.05em;
position: relative;
z-index: 3;
}
@media screen and (max-width: 768px) {
.m-mv .m-mv-title {
font-size: 37px;
font-size: 2.3125rem;
line-height: 1.83;
margin-bottom: 8px;
}
.m-mv .m-mv-title .fz-50 {
font-size: 29px;
font-size: 1.8125rem;
}
}
@media (max-width: 320px) {
.m-mv .m-mv-title {
font-size: 26px;
font-size: 1.625rem;
}
}
.m-mv .m-mv-title01.m-pd-bg {
padding: 0 20px 0 18px;
}
@media screen and (max-width: 768px) {
.m-mv .m-mv-title01.m-pd-bg {
padding: 0 15px;
}
}
.m-mv .m-mv-title02.m-pd-bg {
padding: 0 10px 0 22px;
}
.m-mv .m-mv-title01 {
margin-left: 3px;
}
@media screen and (max-width: 768px) {
.m-mv .m-mv-title01 {
margin-left: 9px;
}
}
.m-mv .m-mv-title02 {
margin-left: 76px;
}
@media screen and (max-width: 768px) {
.m-mv .m-mv-title02 {
margin-left: 52px;
}
}
.m-mv .m-mv-price {
position: absolute;
top: 219px;
right: 7px;
width: 145px;
height: 145px;
border-radius: 50%;
border: 2px solid #002151;
display: flex;
justify-content: center;
background: #fdfdd7;
flex-wrap: wrap;
font-weight: 700;
flex-direction: column;
line-height: 1;
text-align: center;
padding-top: 13px;
z-index: 5;
}
@media screen and (max-width: 1000px) {
.m-mv .m-mv-price {
top: 359px;
}
}
@media screen and (max-width: 768px) {
.m-mv .m-mv-price {
top: 360px;
right: 190px;
width: 102px;
height: 102px;
padding-top: 5px;
}
}
@media screen and (max-width: 640px) {
.m-mv .m-mv-price {
right: 16px;
top: 381px;
}
}
.m-mv .m-mv-price01 {
width: 100%;
text-align: center;
font-size: 20px;
font-size: 1.25rem;
}
@media screen and (max-width: 768px) {
.m-mv .m-mv-price01 {
font-size: 14px;
font-size: 0.875rem;
}
}
.m-mv .m-mv-price02 {
font-size: 75px;
font-size: 4.6875rem;
margin-left: 15px;
}
@media screen and (max-width: 768px) {
.m-mv .m-mv-price02 {
font-size: 53px;
font-size: 3.3125rem;
}
}
.m-mv .m-mv-price03 {
font-size: 25px;
font-size: 1.5625rem;
}
@media screen and (max-width: 768px) {
.m-mv .m-mv-price03 {
font-size: 17px;
font-size: 1.0625rem;
}
}
.m-campaign-price {
margin-bottom: 25px;
text-align: center;
}
@media screen and (max-width: 768px) {
.m-campaign-price {
max-width: 310px;
text-align: center;
margin: 0 auto 31px;
}
}
.m-campaign-form .m-consultation-box {
margin-bottom: 53px;
padding-top: 80px;
}
@media screen and (max-width: 768px) {
.m-campaign-form .m-consultation-box {
margin-bottom: 50px;
}
}
.m-consultation-box {
font-size: 25px;
font-size: 1.5625rem;
font-weight: 700;
margin-bottom: 104px;
text-align: center;
}
@media screen and (max-width: 768px) {
.m-consultation-box {
font-size: 18px;
font-size: 1.125rem;
margin-bottom: 82px;
}
}
.m-consultation-text {
margin-bottom: 13px;
letter-spacing: 0.05em;
}
.icon-line-01 {
position: relative;
display: inline-block;
}
.icon-line-01:before, .icon-line-01:after {
content: "";
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_line_left.png) top left no-repeat;
position: absolute;
top: 50%;
z-index: 1;
transform: translateY(-50%);
width: 22px;
height: 35px;
background-size: 100%;
}
@media screen and (max-width: 768px) {
.icon-line-01:before, .icon-line-01:after {
width: 17px;
height: 26px;
}
}
.icon-line-01:before {
left: -30px;
}
@media screen and (max-width: 768px) {
.icon-line-01:before {
left: -31px;
}
}
.icon-line-01:after {
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_line_right.png) top left no-repeat;
right: -30px;
background-size: 100%;
}
@media screen and (max-width: 768px) {
.icon-line-01:after {
right: -31px;
}
}
.icon-arrow-03 {
position: relative;
}
.icon-arrow-03:after {
content: "";
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_arrow_03.png) top left no-repeat;
position: absolute;
top: 50%;
right: 40px;
z-index: 1;
transform: translateY(-50%);
width: 8px;
height: 12px;
background-size: 100%;
transition: 0.2s ease-in-out;
}
@media screen and (max-width: 768px) {
.icon-arrow-03:after {
width: 5px;
height: 7px;
right: 25px;
}
}
.icon-arrow-03:hover:after {
transform: translate(5px, -50%);
}
.m-consultation-btn {
max-width: 700px;
width: 100%;
height: 79px;
display: flex;
align-items: center;
justify-content: center;
background: #ff7800;
color: #fff;
border-radius: 79px;
margin: 0 auto;
transition: 0.2s ease-in-out;
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 768px) {
.m-consultation-btn {
max-width: 335px;
height: 63px;
font-size: 17px;
font-size: 1.0625rem;
}
}
@media (max-width: 320px) {
.m-consultation-btn {
font-size: 14px;
font-size: 0.875rem;
}
}
.m-circle-top {
position: relative;
}
.m-circle-top:before {
content: "";
background: #fdfdd7;
width: 270px;
height: 270px;
position: absolute;
top: -65px;
left: 50%;
transform: translateX(-50%);
border: 2px solid #002151;
border-radius: 50%;
z-index: -1;
}
@media screen and (max-width: 768px) {
.m-circle-top:before {
width: 145px;
height: 145px;
top: -37px;
}
}
.m-worries-inner {
padding: 69px 70px 48px;
background: #fdfdd7;
}
@media screen and (max-width: 1000px) {
.m-worries-inner {
padding: 61px 30px 45px;
}
}
@media screen and (max-width: 768px) {
.m-worries-inner {
padding-bottom: 50px;
}
.m-worries-inner .m-box-icon img {
max-width: 70px;
}
}
.m-box-icon {
text-align: center;
width: 100%;
background: #fdfdd7;
border-radius: 50%;
width: 270px;
height: 270px;
display: block;
position: absolute;
top: -61px;
left: 50%;
transform: translateX(-50%);
padding-top: 36px;
}
@media screen and (max-width: 768px) {
.m-box-icon {
width: 145px;
height: 145px;
top: -33px;
padding-top: 17px;
}
}
.m-text-icon {
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.m-box-title {
text-align: center;
position: relative;
z-index: 5;
letter-spacing: 0.1em;
font-weight: 700;
}
.m-subtitle-01 {
font-size: 25px;
font-size: 1.5625rem;
margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
.m-subtitle-01 {
font-size: 17px;
font-size: 1.0625rem;
margin-bottom: 25px;
}
}
.m-titl-01 {
font-size: 30px;
font-size: 1.875rem;
margin-bottom: 10px;
text-align: center;
letter-spacing: 0.1em;
font-weight: 700;
}
@media screen and (max-width: 768px) {
.m-titl-01 {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.75;
}
}
.icon-dot {
position: relative;
}
.icon-dot:before {
content: "";
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_dot.png) top center no-repeat;
position: absolute;
bottom: -12px;
left: 50%;
width: 100%;
height: 4px;
z-index: 1;
transform: translateX(-50%);
background-size: 100%;
}
@media screen and (max-width: 768px) {
.icon-dot:before {
background-image: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_dot_sp.png);
width: 97%;
height: 3px;
bottom: -7px;
}
}
.m-list-worries ul {
display: flex;
justify-content: space-between;
}
@media screen and (max-width: 768px) {
.m-list-worries ul {
display: block;
text-align: center;
}
}
.m-list-worries ul li {
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_circle.png) top center no-repeat;
background-size: 100%;
max-width: 254px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
text-align: center;
padding: 35px 0 82px;
position: relative;
z-index: 6;
}
@media screen and (max-width: 1000px) {
.m-list-worries ul li {
padding-top: 30px;
padding-bottom: 105px;
}
}
@media screen and (max-width: 768px) {
.m-list-worries ul li {
max-width: 242px;
height: 254px;
margin: 0 auto;
padding-top: 55px;
}
}
.m-list-worries ul li .m-worries-num {
font-size: 30px;
font-size: 1.875rem;
font-weight: 700;
line-height: 1.6666666667;
}
@media screen and (max-width: 1000px) {
.m-list-worries ul li .m-worries-num {
font-size: 28px;
font-size: 1.75rem;
}
}
@media screen and (max-width: 768px) {
.m-list-worries ul li .m-worries-num {
line-height: 2;
}
}
.m-list-worries ul li .m-worries-text {
font-weight: 700;
line-height: 2;
}
@media screen and (max-width: 1000px) {
.m-list-worries ul li .m-worries-text {
font-size: 13px;
font-size: 0.8125rem;
}
}
.m-list-worries ul li .m-worries-title {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.75;
font-weight: 700;
letter-spacing: 0.1em;
}
@media screen and (max-width: 1000px) {
.m-list-worries ul li .m-worries-title {
font-size: 18px;
font-size: 1.125rem;
}
}
.m-list-worries ul li.m-worries-item1 {
margin-top: 40px;
}
@media screen and (max-width: 768px) {
.m-list-worries ul li.m-worries-item1 {
margin-top: 24px;
}
}
.m-list-worries ul li.m-worries-item2 {
padding-top: 0;
}
@media screen and (max-width: 768px) {
.m-list-worries ul li.m-worries-item2 {
padding-top: 45px;
}
.m-list-worries ul li.m-worries-item2.icon-arrow-bottom:after {
display: none;
}
}
@media screen and (max-width: 768px) {
.m-list-worries ul li:not(:last-child) {
margin-bottom: 21px;
}
}
.m-list-worries ul li.m-worries-item3.icon-arrow-bottom:after {
display: none;
}
@media screen and (max-width: 768px) {
.m-list-worries ul li.m-worries-item3.icon-arrow-bottom:after {
display: block;
top: 100%;
width: 24px;
height: 153px;
background-size: 100% 100%;
}
}
.icon-people {
position: relative;
}
.icon-people:before, .icon-people:after {
content: "";
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_women.png) top center no-repeat;
position: absolute;
top: -2px;
z-index: 1;
transform: translateY(-50%);
width: 133px;
height: 177px;
background-size: 100%;
}
@media screen and (max-width: 768px) {
.icon-people:before, .icon-people:after {
top: -100px;
width: 77px;
height: 102px;
background-image: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_women_sp.png);
}
}
@media screen and (max-width: 640px) {
.icon-people:before, .icon-people:after {
top: -71px;
width: 75px;
}
}
.icon-people:before {
left: 6px;
}
@media screen and (max-width: 640px) {
.icon-people:before {
left: -24px;
}
}
.icon-people:after {
width: 139px;
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_man.png) top center no-repeat;
right: -6px;
background-size: 100%;
}
@media screen and (max-width: 768px) {
.icon-people:after {
width: 78px;
right: -24px;
background-image: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_man_sp.png);
}
}
.icon-arrow-bottom {
position: relative;
}
.icon-arrow-bottom:after {
content: "";
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_arrow_01.png) top center no-repeat;
position: absolute;
top: 87%;
left: 50%;
z-index: 1;
transform: translateX(-50%);
width: 24px;
height: 156px;
background-size: 100%;
}
@media screen and (max-width: 1000px) {
.icon-arrow-bottom:after {
top: 75%;
}
}
.m-merit-icon {
margin-right: 50px;
margin-top: -17px;
}
@media screen and (max-width: 768px) {
.m-merit-icon {
order: 2;
text-align: center;
width: 100%;
margin-right: 63px;
margin-top: 0;
}
.m-merit-icon img {
margin: 0 auto;
max-width: 185px;
position: relative;
bottom: -2px;
}
}
.m-merit-text {
padding-top: 40px;
font-size: 25px;
font-size: 1.5625rem;
font-weight: 700;
}
@media screen and (max-width: 1000px) {
.m-merit-text {
padding-top: 20px;
line-height: 1.4;
}
}
@media screen and (max-width: 768px) {
.m-merit-text {
width: 100%;
display: inline-block;
text-align: center;
font-size: 20px;
font-size: 1.25rem;
margin-bottom: 12px;
line-height: 2;
}
.m-merit-text .fz-35 {
font-size: 28px;
font-size: 1.75rem;
line-height: 1.63;
}
}
@media screen and (max-width: 768px) and (max-width: 320px) {
.m-merit-text .fz-35 {
font-size: 26px;
font-size: 1.625rem;
}
}
.m-merit-box01 {
display: flex;
align-items: center;
padding: 0 32px;
position: relative;
z-index: 10;
}
@media screen and (max-width: 768px) {
.m-merit-box01 {
padding: 0;
flex-wrap: wrap;
}
.m-merit-box01 .m-merit-ttlicon {
font-feature-settings: "palt" 1;
letter-spacing: 0.1em;
}
}
.m-bg-dot {
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/img_bg_dot.png) top -5px left 2px;
border-radius: 10px;
}
.m-merit-innner {
padding: 71px 100px 70px;
}
@media screen and (max-width: 1000px) {
.m-merit-innner {
padding: 78px 30px 70px;
}
}
@media screen and (max-width: 768px) {
.m-merit-innner {
padding: 51px 15px 34px;
}
}
.m-box-ttl01 {
text-align: center;
margin-bottom: 49px;
}
@media screen and (max-width: 768px) {
.m-box-ttl01 {
margin-bottom: 39px;
}
}
.m-merit-title {
margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
.m-merit-title {
text-align: center;
margin-bottom: 14px;
}
.m-merit-title img {
max-width: 258px;
}
}
.m-merit-subtitle {
font-weight: 700;
font-size: 30px;
font-size: 1.875rem;
line-height: 1.5;
letter-spacing: 0.1em;
}
@media screen and (max-width: 1000px) {
.m-merit-subtitle {
font-size: 20px;
font-size: 1.25rem;
}
.m-merit-subtitle .fz-50 {
font-size: 50px;
font-size: 3.125rem;
}
}
@media screen and (max-width: 768px) {
.m-merit-subtitle {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.93;
}
.m-merit-subtitle .fz-50 {
font-size: 30px;
font-size: 1.875rem;
}
.m-merit-subtitle .fz-35 {
font-size: 21px;
font-size: 1.3125rem;
}
}
.m-bottom-blue {
border-bottom: 2px solid #002151;
padding-bottom: 5px;
}
@media screen and (max-width: 768px) {
.m-bottom-blue {
padding-bottom: 2px;
}
}
.m-merit-number {
display: flex;
background: #002151;
width: 57px;
height: 57px;
color: #fff;
border-radius: 50%;
align-items: center;
justify-content: center;
flex-direction: column;
line-height: 1;
letter-spacing: 0.05em;
font-size: 25px;
font-size: 1.5625rem;
font-weight: 700;
padding-top: 5px;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
.m-merit-number {
font-size: 19px;
font-size: 1.1875rem;
line-height: 1.13;
width: 50px;
height: 50px;
}
}
.m-merit-bg-dot {
position: relative;
}
@media screen and (max-width: 768px) {
.m-merit-bg-dot {
margin-bottom: 8px;
}
}
.m-merit-bg-dot:before, .m-merit-bg-dot:after {
content: "";
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_dot.png) top center no-repeat;
position: absolute;
top: 50%;
z-index: 1;
transform: translateY(-50%);
width: 44%;
height: 4px;
background-size: 100%;
}
@media screen and (max-width: 768px) {
.m-merit-bg-dot:before, .m-merit-bg-dot:after {
width: 39%;
background-image: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_dot_sp.png);
}
}
.m-merit-bg-dot:before {
left: 0;
}
.m-merit-bg-dot:after {
right: 0;
}
.m-merit-text01 {
font-size: 10px;
font-size: 0.625rem;
letter-spacing: 0.1em;
}
@media screen and (max-width: 768px) {
.m-merit-text01 {
font-size: 8px;
font-size: 0.5rem;
letter-spacing: 0.05em;
}
}
.m-merit-content {
display: flex;
justify-content: space-between;
}
@media screen and (max-width: 768px) {
.m-merit-content {
margin: 0 15px;
flex-wrap: wrap;
}
}
.m-merit-decription {
max-width: 388px;
width: 100%;
}
@media screen and (max-width: 1000px) {
.m-merit-decription {
font-size: 14px;
font-size: 0.875rem;
margin-right: 30px;
}
}
@media screen and (max-width: 768px) {
.m-merit-decription {
font-size: 15px;
font-size: 0.9375rem;
line-height: 1.67;
margin-right: 0;
margin-bottom: 16px;
}
}
.merit-item01 {
margin-bottom: 11px;
}
@media screen and (max-width: 768px) {
.merit-item01 {
margin-bottom: 33px;
}
}
.merit-item01 .m-merit-img {
max-width: 420px;
margin-right: -13px;
padding-top: 15px;
}
@media screen and (max-width: 768px) {
.merit-item01 .m-merit-img {
text-align: center;
max-width: 100%;
margin-right: -11px;
}
}
.merit-item02 {
padding-bottom: 10px;
margin-bottom: -30px;
}
@media screen and (max-width: 768px) {
.merit-item02 {
margin-bottom: 30px;
}
}
.merit-item02 .m-merit-img {
max-width: 350px;
margin-right: -5px;
padding-top: 34px;
}
@media screen and (max-width: 768px) {
.merit-item02 .m-merit-img {
max-width: 100%;
padding-top: 0;
}
}
@media screen and (max-width: 768px) {
.merit-item02 .m-merit-bg-dot {
margin-bottom: 19px;
}
}
.merit-item02 .m-merit-decription {
margin-bottom: 48px;
}
.merit-item02 .m-rerit-des {
margin-right: -32px;
}
@media screen and (max-width: 768px) {
.merit-item02 .m-rerit-des {
margin-right: 0;
}
}
.merit-item03 .m-merit-img {
position: relative;
max-width: 346px;
width: 100%;
padding-top: 19px;
}
.merit-item03 .m-merit-img:after {
content: "";
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_arrrow_02.png) top left no-repeat;
position: absolute;
left: 51%;
top: 54%;
z-index: 1;
transform: translate(-50%, -50%);
width: 28px;
height: 16px;
background-size: 100%;
}
@media screen and (max-width: 768px) {
.merit-item03 .m-merit-img:after {
top: 55%;
width: 22px;
height: 13px;
}
}
@media screen and (max-width: 768px) {
.merit-item03 .m-merit-img {
max-width: 100%;
}
}
@media screen and (max-width: 768px) {
.merit-item03 .m-title-des {
margin-bottom: 17px;
}
.merit-item03 .m-merit-decription {
margin-bottom: 20px;
}
}
@media screen and (max-width: 768px) {
.m-merit-list li .m-merit-img {
margin: 0 auto;
}
}
.m-title-des {
font-size: 25px;
font-size: 1.5625rem;
font-weight: 700;
line-height: 1.6;
letter-spacing: 0.05em;
margin-bottom: 27px;
margin-right: -25px;
}
@media screen and (max-width: 1000px) {
.m-title-des {
font-size: 18px;
font-size: 1.125rem;
}
}
@media screen and (max-width: 768px) {
.m-title-des {
font-size: 25px;
font-size: 1.5625rem;
line-height: 1.8;
margin-bottom: 26px;
}
}
.m-sub-des {
font-size: 40px;
font-size: 2.5rem;
}
@media screen and (max-width: 1000px) {
.m-sub-des {
font-size: 30px;
font-size: 1.875rem;
}
}
@media screen and (max-width: 768px) {
.m-sub-des {
font-size: 40px;
font-size: 2.5rem;
}
}
.m-rerit-des {
font-weight: 700;
line-height: 1.6666666667;
margin-right: -25px;
}
@media screen and (max-width: 768px) {
.m-rerit-des {
margin-right: 0;
}
}
.m-merit-btn {
max-width: 161px;
width: 100%;
height: 31px;
display: flex;
align-content: center;
justify-content: center;
border: 2px solid #002151;
border-radius: 29px;
font-weight: 700;
padding-left: 8px;
margin-bottom: 10px;
background: #fff;
}
@media screen and (max-width: 768px) {
.m-merit-btn {
margin-bottom: 12px;
}
}
.fz-sub {
font-size: 10px;
font-size: 0.625rem;
display: flex;
align-items: center;
}
.m-sub-des {
position: relative;
z-index: 2;
}
.m-sub-des01 {
position: relative;
z-index: 2;
}
.icon-circle-yellow {
position: relative;
}
.icon-circle-yellow:after {
content: "";
background: #fff57d;
width: 27px;
height: 27px;
position: absolute;
top: -10px;
left: 22px;
border-radius: 50%;
z-index: 1;
}
.m-merit-boxprice {
border: 1px solid #002151;
display: flex;
flex-wrap: wrap;
justify-content: center;
text-align: center;
font-weight: 700;
}
.m-merit-boxprice:not(:last-child) {
margin-bottom: 31px;
}
.m-merit-boxprice > div {
width: 50%;
}
.m-merit-boxprice01 .m-merit-text04 {
margin-bottom: 5px;
}
.m-merit-boxprice01 .m-right-price {
padding-left: 30px;
}
@media screen and (max-width: 768px) {
.m-merit-boxprice01 .m-box-right {
padding: 2px 0 10px;
}
}
.m-bg-gray {
background: #e1e1e1;
}
.m-bg-yellow {
background: #fff57d;
}
.m-title-left {
font-size: 20px;
font-size: 1.25rem;
margin-bottom: 3px;
}
@media screen and (max-width: 768px) {
.m-title-left {
font-size: 16px;
font-size: 1rem;
margin-bottom: 0;
}
}
.m-btn01 {
max-width: 126px;
width: 100%;
height: 31px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
.m-btn01 {
font-size: 12px;
font-size: 0.75rem;
max-width: 101px;
height: 25px;
}
}
.m-merit-text04 {
font-size: 13px;
font-size: 0.8125rem;
margin-bottom: 18px;
border-bottom: 2px solid #002151;
padding-bottom: 5px;
}
@media screen and (max-width: 768px) {
.m-merit-text04 {
font-size: 10px;
font-size: 0.625rem;
margin-bottom: 10px;
border-bottom: 0;
padding-bottom: 5px;
}
.m-merit-text04 .m-border-bt {
border-bottom: 1px solid #002151;
padding-bottom: 5px;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.m-merit-text04 .m-border-bt {
font-size: 11px;
font-size: 0.6875rem;
}
}
.m-box-left {
padding: 15px 0 21px;
}
@media screen and (max-width: 768px) {
.m-box-left {
padding: 13px 20px 15px 15px;
}
}
.m-box-right {
padding: 10px 18px 0 23px;
background: #fff;
}
@media screen and (max-width: 768px) {
.m-box-right {
padding: 10px 0;
}
}
.m-box-right:first-child .m-merit-text04 {
margin-bottom: 33px;
}
.m-right-price {
display: flex;
justify-content: center;
align-items: center;
line-height: 1;
}
@media screen and (max-width: 768px) {
.m-right-price {
font-size: 12px;
font-size: 0.75rem;
}
}
@media screen and (max-width: 768px) {
.m-right-price .fz-20 {
font-size: 16px;
font-size: 1rem;
}
}
.m-right-price .dl-flex {
padding-top: 12px;
}
.m-right-subtext {
margin-right: 5px;
}
@media screen and (max-width: 768px) {
.m-right-subtext {
font-size: 12px;
font-size: 0.75rem;
}
.m-right-subtext.fz-50.fz-roboto {
font-size: 40px;
font-size: 2.5rem;
}
}
.m-text-note {
margin-top: 13px;
font-size: 13px;
font-size: 0.8125rem;
line-height: 1.9230769231;
letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
.m-text-note {
font-size: 13px;
font-size: 0.8125rem;
line-height: 1.9;
margin-top: 19px;
letter-spacing: 0.03em;
padding-left: 60px;
}
.m-text-note p {
text-indent: -35px;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.m-text-note.m-text-indent01 {
padding-left: 38px;
margin-top: 11px;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.m-text-note.m-text-indent02 {
padding-left: 35px;
margin-top: 3px;
}
}
.m-text-note02 {
margin-left: 35px;
}
.m-note-table {
margin-top: 28px;
}
@media screen and (max-width: 768px) {
.m-note-table {
margin-top: 5px;
padding-left: 46px;
font-size: 10px;
}
.m-note-table p {
text-indent: -28px;
}
}
.m-box-feature {
margin-top: 73px;
margin-bottom: 64px;
}
@media screen and (max-width: 768px) {
.m-box-feature {
margin-top: 29px;
margin-bottom: -5px;
}
}
.m-box-feature .m-text-note {
margin-top: -5px;
}
@media screen and (max-width: 768px) {
.m-box-feature .m-text-note {
margin-top: 3px;
}
}
.m-feature-title {
background: #002151;
color: #fff;
text-align: center;
font-size: 25px;
font-size: 1.5625rem;
letter-spacing: 0.1em;
font-weight: 700;
padding: 10px 0;
margin-bottom: 23px;
border-radius: 6px;
}
@media screen and (max-width: 768px) {
.m-feature-title {
font-size: 20px;
font-size: 1.25rem;
padding: 14px 0;
margin-bottom: 16px;
border-radius: 3px;
}
}
.m-feature-list ul {
display: flex;
flex-wrap: wrap;
}
.m-feature-list ul li {
width: 31.6%;
margin-right: 2.5%;
margin-bottom: 27px;
text-align: center;
border: 2px solid #002151;
border-radius: 3px;
padding: 4px 26px 30px;
font-weight: 700;
background: #fff;
}
@media screen and (max-width: 768px) {
.m-feature-list ul li:nth-child(2) .fz-sub {
position: absolute;
bottom: 0;
right: 14px;
}
}
@media screen and (max-width: 1000px) {
.m-feature-list ul li {
padding: 10px 20px 30px;
}
}
.m-feature-list ul li.padding-top {
padding-top: 14px;
}
@media screen and (max-width: 768px) {
.m-feature-list ul li.padding-top {
padding-top: 5px;
}
.m-feature-list ul li.padding-top .m-feature-titlelist {
padding-bottom: 8px;
}
}
.m-feature-list ul li:nth-child(3n+3) {
margin-right: 0;
}
@media screen and (max-width: 768px) {
.m-feature-list ul li:nth-child(3n+3) {
margin-right: 2.4%;
}
}
@media screen and (max-width: 768px) {
.m-feature-list ul li {
width: 48.7%;
margin-right: 2.4%;
padding: 2px 15px 19px;
margin-bottom: 10px;
min-height: 123px;
}
.m-feature-list ul li:nth-child(2n+2) {
margin-right: 0;
}
}
.m-feature-list .icon-arrow-bottom:after {
bottom: inherit;
top: 100%;
}
@media screen and (max-width: 1000px) {
.m-feature-list .icon-arrow-bottom:after {
display: none;
}
}
.m-feature-titlelist {
font-size: 25px;
font-size: 1.5625rem;
margin-bottom: 10px;
border-bottom: 1px solid;
width: 100%;
line-height: 3.4;
}
@media screen and (max-width: 1000px) {
.m-feature-titlelist {
font-size: 18px;
font-size: 1.125rem;
}
}
@media screen and (max-width: 768px) {
.m-feature-titlelist {
font-size: 13px;
font-size: 0.8125rem;
border-bottom: 1px solid;
margin-bottom: 10px;
line-height: 3.3;
}
}
@media (max-width: 320px) {
.m-feature-titlelist {
font-size: 11px;
font-size: 0.6875rem;
}
}
.m-feature-titlelist.fz-23 {
font-size: 23px;
font-size: 1.4375rem;
line-height: 1.3043478261;
padding-bottom: 13px;
}
@media screen and (max-width: 1000px) {
.m-feature-titlelist.fz-23 {
font-size: 17px;
font-size: 1.0625rem;
}
}
@media screen and (max-width: 768px) {
.m-feature-titlelist.fz-23 {
font-size: 12px;
font-size: 0.75rem;
line-height: 1.25;
}
}
@media (max-width: 320px) {
.m-feature-titlelist.fz-23 {
font-size: 9px;
font-size: 0.5625rem;
}
}
.m-feature-text {
font-feature-settings: "palt" 1;
}
@media screen and (max-width: 768px) {
.m-feature-text {
font-size: 10px;
font-size: 0.625rem;
line-height: 1.5;
}
}
.dl-flex {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.m-price-inclusive {
display: flex;
align-items: flex-end;
justify-content: center;
font-weight: 700;
margin-bottom: 51px;
}
@media screen and (max-width: 1000px) {
.m-price-inclusive {
justify-content: space-between;
flex-wrap: wrap;
max-width: 611px;
margin: 0 auto 93px;
}
}
@media screen and (max-width: 768px) {
.m-price-inclusive {
margin-bottom: 63px;
max-width: 400px;
}
}
.m-monthly-img {
max-width: 180px;
}
@media screen and (max-width: 1000px) {
.m-monthly-img {
order: 2;
}
}
@media screen and (max-width: 768px) {
.m-monthly-img {
margin-right: 15px;
max-width: 115px;
}
}
.m-monthly-fee {
width: 152px;
height: 152px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex-direction: column;
background: #fdfdd7;
border-radius: 50%;
line-height: 1;
text-align: center;
padding-top: 20px;
position: relative;
margin-right: 58px;
margin-left: 18px;
position: relative;
top: -4px;
}
@media screen and (max-width: 1000px) {
.m-monthly-fee {
margin-right: 0;
}
}
@media screen and (max-width: 768px) {
.m-monthly-fee {
width: 98px;
height: 98px;
padding-top: 6px;
position: relative;
top: -15px;
right: -14px;
}
}
.m-monthly-fee:before {
content: "";
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_13.png) top center no-repeat;
width: 42px;
height: 32px;
position: absolute;
bottom: 22px;
right: -21px;
background-size: 100%;
}
@media screen and (max-width: 1000px) {
.m-monthly-fee:before {
bottom: -7px;
left: 38%;
right: inherit;
transform: translateY(50%) rotate(70deg);
}
}
@media screen and (max-width: 768px) {
.m-monthly-fee:before {
width: 17px;
height: 20px;
left: 41%;
}
}
@media screen and (max-width: 640px) {
.m-monthly-fee:before {
bottom: -5px;
left: 39%;
right: inherit;
width: 20px;
height: 20px;
}
}
.m-monthly-text01 {
position: relative;
top: 6px;
left: -13px;
}
.m-monthl-text {
font-size: 20px;
font-size: 1.25rem;
}
@media screen and (max-width: 768px) {
.m-monthl-text {
font-size: 13px;
font-size: 0.8125rem;
}
}
@media screen and (max-width: 768px) {
.m-monthl-num .fz-75 {
font-size: 48px;
font-size: 3rem;
}
.m-monthl-num .fz-25.pb-bt {
font-size: 16px;
font-size: 1rem;
}
}
.pb-bt {
position: relative;
top: -5px;
}
.m-monthly-price {
font-size: 25px;
font-size: 1.5625rem;
text-align: center;
margin-right: 17px;
line-height: 1.2;
letter-spacing: 0.05em;
position: relative;
top: -3px;
}
@media screen and (max-width: 1000px) {
.m-monthly-price {
padding-top: 0;
order: 3;
margin: 45px auto 0;
}
}
@media screen and (max-width: 768px) {
.m-monthly-price {
font-size: 16px;
font-size: 1rem;
margin: 16px auto 0;
top: -11px;
left: 14px;
}
}
.m-monthly-price.icon-arrow-bottom::after {
display: none;
}
@media screen and (max-width: 1000px) {
.m-monthly-price.icon-arrow-bottom::after {
display: block;
top: -120%;
}
}
@media screen and (max-width: 768px) {
.m-monthly-price.icon-arrow-bottom::after {
top: -110%;
left: 45%;
width: 15px;
height: 97px;
}
}
.m-monthly-price01 {
position: relative;
}
.m-monthly-price01:before {
content: "";
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_06.png) top center no-repeat;
width: 52px;
height: 51px;
position: absolute;
top: -24px;
left: -46px;
background-size: 100%;
}
@media screen and (max-width: 768px) {
.m-monthly-price01:before {
width: 34px;
height: 34px;
top: -15px;
left: -29px;
}
}
.m-monthly-price01 .fz-100 {
position: relative;
z-index: 5;
}
@media screen and (max-width: 768px) {
.m-monthly-price01 .fz-100 {
font-size: 64px;
font-size: 4rem;
}
}
@media (max-width: 320px) {
.m-monthly-price01 .fz-100 {
font-size: 58px;
font-size: 3.625rem;
}
}
.m-monthly-subprice {
position: relative;
z-index: 5;
}
@media screen and (max-width: 768px) {
.m-monthly-subprice.fz-43 {
font-size: 27px;
font-size: 1.6875rem;
margin-left: -8px;
letter-spacing: 0.5em;
padding-left: 12px;
}
}
.m-monthly-sub01 {
font-size: 10px;
font-size: 0.625rem;
font-weight: 500;
position: absolute;
top: -6px;
left: 50%;
transform: translateX(-50%);
width: 100%;
letter-spacing: 0;
}
.bg-underline {
position: relative;
}
.bg-underline:after {
content: "";
background: #fdf107;
width: 97%;
height: 22px;
position: absolute;
left: 0;
top: 70%;
z-index: 1;
}
@media screen and (max-width: 768px) {
.bg-underline:after {
height: 15px;
}
}
.m-box-onlynow {
position: relative;
z-index: 10;
}
.m-box-onlynow .m-consultation-box {
margin-bottom: 121px;
}
@media screen and (max-width: 768px) {
.m-box-onlynow .m-consultation-box {
margin-bottom: 58px;
}
}
.m-onlynow-text {
max-width: 219px;
width: 100%;
height: 47px;
background: #002151;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-size: 1.25rem;
font-weight: 700;
margin: 0 auto;
position: absolute;
top: -13px;
left: 50%;
transform: translateX(-50%);
letter-spacing: 0.15em;
}
@media screen and (max-width: 768px) {
.m-onlynow-text {
font-size: 15px;
font-size: 0.9375rem;
max-width: 154px;
height: 38px;
top: -38px;
}
}
.m-design-inner a:hover {
opacity: 1;
}
.m-design-inner a:hover img {
opacity: 1;
}
.m-design-box01 {
text-align: center;
font-size: 35px;
font-size: 2.1875rem;
font-weight: 700;
letter-spacing: 0.1em;
line-height: 1;
margin-bottom: 74px;
}
@media screen and (max-width: 768px) {
.m-design-box01 {
font-size: 25px;
font-size: 1.5625rem;
margin-bottom: 48px;
line-height: 3.4;
}
}
.m-design-box01 .m-design-title {
margin-bottom: 18px;
}
@media screen and (max-width: 768px) {
.m-design-box01 .m-design-title {
margin-bottom: 16px;
line-height: 1;
}
}
.m-design-box01 .m-design__text {
font-size: 15px;
font-size: 0.9375rem;
text-align: center;
line-height: 1.6;
letter-spacing: 0.1em;
font-weight: bold;
padding-top: 25px;
}
.m-design-box01 .m-design-text {
margin-left: 32px;
}
@media screen and (max-width: 768px) {
.m-design-box01 .m-design-text {
margin-left: 20px;
line-height: 1;
}
}
.m-design-box02 {
position: relative;
max-width: 799px;
width: 100%;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
.m-design-box02 {
max-width: 642px;
}
}
@media screen and (max-width: 640px) {
.m-design-box02 {
max-width: 323px;
margin-left: -1px;
}
}
.m-design-box02 .m-img-laptop {
max-width: 767px;
}
.link-view-demo {
font-size: 20px;
font-size: 1.25rem;
border-bottom: 1px solid;
padding-bottom: 5px;
}
.link-view-demo:hover {
opacity: 0.8;
}
@media screen and (max-width: 768px) {
.link-view-demo {
font-size: 13px;
font-size: 0.8125rem;
letter-spacing: 0.05em;
padding-bottom: 1px;
}
}
.icon-view {
position: relative;
}
.icon-view:before {
content: "";
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_view.png) top center no-repeat;
width: 26px;
height: 26px;
position: absolute;
top: 50%;
left: -34px;
background-size: 100%;
transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
.icon-view:before {
width: 16px;
height: 16px;
left: -21px;
}
}
.m-img-phone {
max-width: 187px;
width: 100%;
position: absolute;
right: 0;
bottom: -27px;
z-index: 20;
}
@media screen and (max-width: 768px) {
.m-img-phone {
max-width: 160px;
right: -20px;
}
}
@media screen and (max-width: 640px) {
.m-img-phone {
max-width: 80px;
right: -13px;
bottom: -12px;
}
}
.icon-phone:before {
content: "";
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_phone.png) top center no-repeat;
width: 89px;
height: 13px;
position: absolute;
top: 12px;
left: 50%;
background-size: 100%;
transform: translateX(-50%);
z-index: 50;
}
.m-phone-scroll {
position: absolute;
right: 15px;
top: 12px;
max-width: 158px;
max-height: 338px;
overflow-x: hidden;
overflow-y: auto;
z-index: 30;
border-radius: 15px;
}
@media screen and (max-width: 640px) {
.m-phone-scroll {
max-height: 145px;
margin-left: 6px;
right: 2px;
top: 4px;
}
}
.m-laptop-scroll {
max-width: 589px;
width: 100%;
position: absolute;
top: 28px;
left: 48%;
right: 0;
bottom: 0;
z-index: 10;
transform: translateX(-50%);
max-height: 368px;
overflow-y: auto;
overflow-x: hidden;
}
@media screen and (max-width: 1000px) {
.m-laptop-scroll {
max-width: 100%;
padding: 0 105px;
}
}
@media (max-width: 850px) {
.m-laptop-scroll {
padding: 0 84px;
left: 50%;
}
}
@media screen and (max-width: 640px) {
.m-laptop-scroll {
top: 14px;
padding: 0 39px;
max-height: 154px;
}
}
.m-phone-scroll::-webkit-scrollbar-thumb,
.m-laptop-scroll::-webkit-scrollbar-thumb {
background: transparent;
}
.m-phone-scroll::-webkit-scrollbar-track,
.m-laptop-scroll::-webkit-scrollbar-track {
background: transparent;
}
.m-phone-scroll::-webkit-scrollbar,
.m-laptop-scroll::-webkit-scrollbar {
width: 4px;
height: 4px;
background: transparent;
}
.sec-merit {
margin-bottom: 153px;
position: relative;
}
@media screen and (max-width: 768px) {
.sec-merit {
margin-bottom: 66px;
}
}
@media screen and (max-width: 768px) {
.block-slider {
padding: 0 20px;
}
}
.block-slider .list-slider li {
max-width: 430px;
margin: 0 38px;
}
@media screen and (max-width: 768px) {
.block-slider .list-slider li {
max-width: 317px;
margin: 0 10px;
}
}
.m-box-slider {
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/bg_sec_02.png) top center no-repeat;
background-size: 100% 100%;
}
@media screen and (max-width: 1000px) {
.m-box-slider {
background-size: 100%;
background-position: bottom center;
}
}
@media screen and (max-width: 768px) {
.m-box-slider {
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/bg_sec02_sp.png) top center no-repeat;
background-size: 100% 100%;
}
}
.bg-content01 {
background: #fdfdd7;
}
@media screen and (max-width: 768px) {
.bg-content01 {
padding-top: 39px;
}
}
.m-slider-title {
text-align: center;
margin-bottom: 53px;
font-size: 25px;
font-size: 1.5625rem;
font-weight: 700;
letter-spacing: 0.1em;
}
@media screen and (max-width: 768px) {
.m-slider-title {
margin-bottom: 25px;
font-size: 13px;
font-size: 0.8125rem;
}
}
.icon-01 {
position: relative;
}
.icon-01:before, .icon-01:after {
content: "";
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_left.jpg) top left no-repeat;
position: absolute;
top: 50%;
z-index: 1;
transform: translateY(-50%);
width: 34px;
height: 37px;
background-size: 100%;
}
@media screen and (max-width: 768px) {
.icon-01:before, .icon-01:after {
width: 18px;
height: 20px;
}
}
.icon-01:before {
left: -63px;
}
@media screen and (max-width: 768px) {
.icon-01:before {
left: -30px;
}
}
.icon-01:after {
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_right.jpg) top left no-repeat;
right: -63px;
background-size: 100%;
}
@media screen and (max-width: 768px) {
.icon-01:after {
right: -30px;
}
}
.item-img {
text-align: center;
font-weight: 700;
letter-spacing: 0.1em;
line-height: 1.6666666667;
}
.m-title-slider {
font-size: 18px;
font-size: 1.125rem;
margin-bottom: 11px;
margin-left: 10px;
}
@media screen and (max-width: 768px) {
.m-title-slider {
font-size: 11px;
font-size: 0.6875rem;
margin-bottom: 7px;
line-height: 1.36;
margin-left: 0;
}
}
.m-box-tag {
font-size: 13px;
font-size: 0.8125rem;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 1000px) {
.m-box-tag {
font-size: 11px;
font-size: 0.6875rem;
}
}
.text-center {
text-align: center;
}
.m-tag {
border-radius: 5px;
border: 1px solid #002151;
background: #fff;
padding: 0px 11px;
margin-left: 15px;
line-height: 1.5333333333;
}
@media screen and (max-width: 1000px) {
.m-tag {
padding: 0 5px;
}
}
@media screen and (max-width: 768px) {
.m-tag {
font-size: 9px;
font-size: 0.5625rem;
margin-right: 15px;
border-radius: 2px;
margin-left: 0;
}
}
.img-slider {
margin-bottom: 29px;
}
@media screen and (max-width: 768px) {
.img-slider {
margin-bottom: 23px;
}
}
.sec-plan {
padding: 105px 0 54px;
}
@media screen and (max-width: 768px) {
.sec-plan {
padding: 37px 0 46px;
}
.sec-plan .m-circle-top {
margin-bottom: 52px;
}
}
.sec-plan .m-circle-top:before {
z-index: 1;
background: #fff;
top: -47px;
}
@media screen and (max-width: 768px) {
.sec-plan .m-circle-top:before {
top: -37px;
}
}
.sec-plan .m-box-icon {
top: -46px;
padding-top: 40px;
}
@media screen and (max-width: 768px) {
.sec-plan .m-box-icon {
top: -36px;
padding-top: 18px;
}
}
.m-plan-img {
max-width: 54px;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
.m-plan-img {
max-width: 40px;
}
}
.m-plan-inner {
padding: 77px 52px 45px;
background: #fff;
position: relative;
z-index: 5;
margin-bottom: 43px;
}
@media screen and (max-width: 1000px) {
.m-plan-inner {
padding: 93px 30px 45px;
}
}
@media screen and (max-width: 768px) {
.m-plan-inner {
padding: 49px 10px 27px;
}
}
.m-plan-inner .m-box-icon {
background: #fff;
z-index: -1;
}
.m-plan-inner .m-titl-01 {
margin-bottom: 67px;
}
@media screen and (max-width: 768px) {
.m-plan-inner .m-titl-01 {
margin-bottom: 11px;
}
}
.compare-table {
font-weight: 700;
letter-spacing: 0.1em;
line-height: 1.6666666667;
}
@media screen and (max-width: 768px) {
.compare-table {
max-width: 100%;
margin: 0 auto;
}
}
.compare-table tr th,
.compare-table tr td {
text-align: center;
vertical-align: middle;
border: 6px solid #fff;
}
@media screen and (max-width: 768px) {
.compare-table tr th.m-bg-gray,
.compare-table tr td.m-bg-gray {
display: none;
}
}
.compare-table tr td {
width: 254px;
height: 1px;
}
@media screen and (max-width: 768px) {
.compare-table tr td {
width: 246px;
font-size: 15px;
font-size: 0.9375rem;
}
}
@media screen and (max-width: 640px) {
.compare-table tr td {
width: 134px;
}
}
.compare-table tr td.m-bg-gray {
color: #333333;
}
.compare-table tr:nth-child(1) th {
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}
@media screen and (max-width: 768px) {
.compare-table tr:nth-child(1) th {
display: none;
}
}
.compare-table tr:nth-child(1) th.m-bg-gray {
background: #a0a0a0;
color: #fff;
font-size: 20px;
font-size: 1.25rem;
border-top: 0;
height: 50px;
}
.compare-table tr:nth-child(1) th.m-bg-blue {
padding: 0;
border-top: 0;
}
.compare-table tr th.m-bg-blue01 {
color: #fff;
font-size: 18px;
font-size: 1.125rem;
text-align: left;
width: 248px;
line-height: 1.7777777778;
letter-spacing: 0.01em;
font-feature-settings: "palt" 1;
padding: 15px 18px;
}
@media screen and (max-width: 1000px) {
.compare-table tr th.m-bg-blue01 {
font-size: 15px;
font-size: 0.9375rem;
}
}
@media screen and (max-width: 768px) {
.compare-table tr th.m-bg-blue01 {
width: 320px;
font-size: 14px;
font-size: 0.875rem;
padding: 10px 15px;
}
}
@media screen and (max-width: 640px) {
.compare-table tr th.m-bg-blue01 {
width: 162px;
}
}
.m-box-flex {
display: flex;
height: 100%;
}
.m-plan-icon {
border-right: 8px solid #fff;
width: 70px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
@media screen and (max-width: 768px) {
.m-plan-icon {
display: none;
}
}
.m-plan-text {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
padding: 15px;
flex-wrap: wrap;
text-align: justify;
}
@media screen and (max-width: 1000px) {
.m-plan-text {
font-size: 12px;
font-size: 0.75rem;
}
}
@media screen and (max-width: 768px) {
.m-plan-text {
font-size: 13px;
font-size: 0.8125rem;
}
.m-plan-text.sp-fz-15 {
font-size: 15px;
font-size: 0.9375rem;
line-height: 1.67;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.m-plan-text.sp-fz-15 {
font-size: 13px;
font-size: 0.8125rem;
}
}
.m-plan-text.fl-start {
justify-content: flex-start;
align-items: flex-start;
}
.m-plan-text .text-center {
width: 100%;
display: inline-block;
text-align: center;
margin-bottom: 20px;
}
.m-plan-text .m-flex-1 {
flex: 1;
}
.compare-table th.m-bg-blue .col-01 {
position: relative;
width: 100%;
display: inline-block;
top: -10px;
}
.compare-table th.m-bg-blue .col-01:before {
content: "";
background: #d7eefd;
width: 100%;
height: 75px;
position: absolute;
top: -27px;
left: 0;
z-index: 2;
border-top-left-radius: 13px;
border-top-right-radius: 13px;
}
.compare-table th.m-bg-blue .col-01 img {
position: relative;
z-index: 5;
top: -7px;
}
.max-width {
position: relative;
}
.max-width:before {
content: "";
background: #a0a0a0;
width: 100%;
height: 35px;
position: absolute;
top: -12px;
left: 0;
z-index: 2;
border-top-left-radius: 13px;
border-top-right-radius: 13px;
}
.max-width span {
position: relative;
z-index: 5;
top: -6px;
}
@media screen and (max-width: 768px) {
.m-circle-top {
margin-bottom: 86px;
}
}
.m-payment-method {
background: #fff;
padding-bottom: 26px;
}
@media screen and (max-width: 768px) {
.m-payment-method {
padding-bottom: 35px;
}
}
.m-payment-method .m-text-note {
padding-left: 33px;
font-size: 13px;
font-size: 0.8125rem;
line-height: 1.5384615385;
margin-top: 30px;
}
.m-payment-method .m-text-note .m-note-text01 {
padding-left: 34px;
}
@media screen and (max-width: 768px) {
.m-payment-method .m-text-note .m-note-text01 {
padding-left: 0;
text-indent: 0;
}
}
@media screen and (max-width: 768px) {
.m-text-note06 {
margin-left: 35px;
margin-top: 25px;
}
}
.m-payment-title {
display: flex;
justify-content: center;
align-items: center;
font-size: 25px;
font-size: 1.5625rem;
line-height: 1;
padding: 15px 0 22px;
font-weight: 700;
background: #002151;
color: #fff;
letter-spacing: 0.1em;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
margin-bottom: 20px;
padding-left: 54px;
}
@media screen and (max-width: 768px) {
.m-payment-title {
font-size: 20px;
font-size: 1.25rem;
margin-bottom: 36px;
padding: 20px 0 22px;
padding-left: 21px;
}
}
.m-payment-list ul {
display: flex;
justify-content: space-between;
font-weight: 700;
padding: 0 40px;
}
@media screen and (max-width: 1000px) {
.m-payment-list ul {
padding: 0 30px;
}
}
@media screen and (max-width: 768px) {
.m-payment-list ul {
flex-wrap: wrap;
padding: 0 21px;
}
}
.m-payment-list ul li {
max-width: 246px;
width: 100%;
position: relative;
padding: 20px 0 5px;
}
@media screen and (max-width: 1000px) {
.m-payment-list ul li {
max-width: 100%;
width: 31%;
font-size: 12px;
font-size: 0.75rem;
margin-right: 30px;
}
}
@media screen and (max-width: 768px) {
.m-payment-list ul li {
width: 100%;
margin-right: 0;
font-size: 15px;
font-size: 0.9375rem;
padding: 0 8px 25px;
margin-bottom: 42px;
}
}
@media (max-width: 320px) {
.m-payment-list ul li {
font-size: 13px;
font-size: 0.8125rem;
}
}
.m-payment-list ul li:after {
content: "";
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_dot01.png) top center no-repeat;
width: 3px;
height: 100%;
position: absolute;
top: 0;
right: -46px;
background-size: 100%;
}
@media screen and (max-width: 1000px) {
.m-payment-list ul li:after {
right: -8%;
}
}
@media screen and (max-width: 768px) {
.m-payment-list ul li:after {
right: inherit;
top: inherit;
left: 0;
bottom: 0;
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/icon_dot01_sp.png) top center no-repeat;
width: 100%;
height: 3px;
background-size: 100%;
}
}
.m-payment-list ul li:nth-child(3n+3)::after {
display: none;
}
@media screen and (max-width: 1000px) {
.m-payment-list ul li:last-child {
margin-right: 0;
}
}
@media screen and (max-width: 768px) {
.m-payment-list ul li:last-child {
margin-bottom: 0;
padding-bottom: 0;
}
}
.m-payment-title01 {
max-width: 188px;
width: 100%;
height: 45px;
border: 2px solid #002151;
border-radius: 45px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-size: 1.25rem;
font-weight: 700;
margin: 0 auto 40px;
}
@media screen and (max-width: 1000px) {
.m-payment-title01 {
font-size: 17px;
font-size: 1.0625rem;
margin-bottom: 20px;
}
}
@media screen and (max-width: 768px) {
.m-payment-title01 {
max-width: 150px;
height: 37px;
font-size: 16px;
font-size: 1rem;
margin: 0 auto 16px;
}
}
.m-payment-text01 {
margin-bottom: 24px;
line-height: 2;
}
@media screen and (max-width: 768px) {
.m-payment-text01 {
margin-bottom: 29px;
padding: 0;
line-height: 1.8;
}
}
.m-payment-text02 {
border-top: 2px solid #002151;
border-bottom: 2px solid #002151;
margin-bottom: 15px;
padding: 2px 0;
text-align: center;
}
@media screen and (max-width: 768px) {
.m-payment-text02 {
font-size: 17px;
font-size: 1.0625rem;
padding: 2px 0;
margin-bottom: 21px;
}
}
@media screen and (max-width: 768px) {
.m-payment-des {
padding: 0 14px;
}
}
@media screen and (max-width: 640px) {
.m-payment-des {
padding: 0;
font-feature-settings: "palt" 1;
}
}
.m-payment-des dl {
display: flex;
justify-content: space-between;
font-size: 14px;
font-size: 0.875rem;
line-height: 2.1428571429;
}
@media screen and (max-width: 1000px) {
.m-payment-des dl {
font-size: 12px;
font-size: 0.75rem;
}
}
@media screen and (max-width: 768px) {
.m-payment-des dl {
font-size: 17px;
font-size: 1.0625rem;
line-height: 2.15;
}
}
@media (max-width: 320px) {
.m-payment-des dl {
font-size: 13px;
font-size: 0.8125rem;
}
}
.m-color-orange {
color: #fa7933;
}
.m-payment-price.m-bg-blue {
margin: 0 -5px;
padding: 0 5px;
margin-top: 10px;
}
@media screen and (max-width: 768px) {
.m-payment-price.m-bg-blue {
margin: 0 -7px;
padding: 0 14px;
margin-top: 10px;
}
}
.m-flow-box01 {
text-align: center;
margin-bottom: -20px;
}
.m-flow-icon {
position: relative;
top: -20px;
}
@media screen and (max-width: 768px) {
.m-flow-icon {
top: -18px;
}
}
.m-flow-icon img {
max-width: 59px;
}
@media screen and (max-width: 768px) {
.m-flow-icon img {
max-width: 42px;
margin-bottom: 6px;
}
}
.sec-flow .m-titl-01 {
margin-bottom: 55px;
font-size: 35px;
font-size: 2.1875rem;
line-height: 2.4285714286;
}
@media screen and (max-width: 768px) {
.sec-flow .m-titl-01 {
margin-bottom: 42px;
font-size: 20px;
font-size: 1.25rem;
line-height: 2.12;
}
}
.m-flow-list ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 95px;
}
@media screen and (max-width: 768px) {
.m-flow-list ul {
margin-bottom: 15px;
padding: 0 29px;
}
}
.m-flow-list ul li {
max-width: 305px;
width: 100%;
border: 5px #519ad7 solid;
border-radius: 20px;
position: relative;
background: #fff;
padding: 42px 53px 18px;
text-align: center;
font-weight: 700;
margin-bottom: 51px;
}
@media screen and (max-width: 1000px) {
.m-flow-list ul li {
max-width: 100%;
width: 48%;
}
.m-flow-list ul li:nth-child(even):before {
display: none;
}
}
@media screen and (max-width: 768px) {
.m-flow-list ul li {
width: 100%;
padding: 36px 47px 18px;
margin-bottom: 47px;
}
}
@media (max-width: 320px) {
.m-flow-list ul li {
padding: 36px 10px 18px;
}
}
@media screen and (max-width: 768px) {
.m-flow-list ul li:nth-child(1) .m-flowlist-img {
max-width: 181px;
}
}
.m-flow-list ul li:nth-child(2) .m-flowlist-img {
max-width: 181px;
}
.m-flow-list ul li:nth-child(3) .m-flowlist-img {
max-width: 124px;
}
.m-flow-list ul li:nth-child(4) .m-flowlist-img {
max-width: 154px;
}
.m-flow-list ul li:nth-child(5) .m-flowlist-img {
max-width: 197px;
}
.m-flow-list ul li:nth-child(6) .m-flowlist-img {
max-width: 126px;
}
.m-flow-list ul li:not(:last-child):before {
content: "";
background: #519ad7;
width: 17%;
height: 5px;
position: absolute;
top: 50%;
right: -17%;
z-index: 1;
transform: translateY(-50%);
}
@media screen and (max-width: 1000px) {
.m-flow-list ul li:not(:last-child):before {
width: 11%;
right: -11%;
}
}
@media screen and (max-width: 768px) {
.m-flow-list ul li:not(:last-child):before {
content: "";
background: #519ad7;
top: inherit;
bottom: -18%;
left: 50%;
right: inherit;
width: 5px;
height: 12%;
z-index: 1;
}
}
.m-flow-list ul li:nth-child(3n+3):before {
display: none;
}
@media screen and (max-width: 1000px) {
.m-flow-list ul li:nth-child(3n+3):before {
display: block;
}
}
@media screen and (max-width: 1000px) {
.m-flow-list ul li:last-child:before {
display: none;
}
}
@media screen and (max-width: 768px) {
.m-flow-list ul li:nth-child(2):before, .m-flow-list ul li:nth-child(4):before {
display: block;
}
}
.m-flow-number {
font-size: 25px;
font-size: 1.5625rem;
background: #519ad7;
width: 58px;
height: 58px;
border-radius: 50%;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: -35px;
left: 50%;
transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
.m-flow-number {
z-index: 5;
width: 52px;
height: 52px;
top: -29px;
}
}
.m-flowlist-title {
font-size: 21px;
font-size: 1.3125rem;
line-height: 1.5;
margin-bottom: 17px;
}
@media screen and (max-width: 768px) {
.m-flowlist-title {
margin: 0 -10px 8px;
}
}
.m-flowlist-img {
text-align: center;
margin: 0 auto;
min-height: 109px;
}
@media screen and (max-width: 768px) {
.m-flowlist-img {
margin-bottom: -10px;
}
}
.m-flowlist-text01 {
font-size: 13px;
font-size: 0.8125rem;
line-height: 1.9230769231;
font-feature-settings: "palt" 1;
}
.sec-form {
padding-bottom: 80px;
}
@media screen and (max-width: 768px) {
.sec-form {
padding-bottom: 70px;
padding-top: 31px;
}
.sec-form .m-circle-top {
margin-bottom: 50px;
}
}
.sec-form .m-box-icon {
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/img_bg_dot.png);
top: -45px;
}
@media screen and (max-width: 768px) {
.sec-form .m-box-icon {
top: -34px;
}
}
.sec-form .m-circle-top:before {
z-index: 1;
background: url(//switch.am/cms/wp-content/themes/switch-theme/prosai/assets/img/img_bg_dot.png);
top: -46px;
}
@media screen and (max-width: 768px) {
.sec-form .m-circle-top:before {
top: -36px;
}
}
.form-inner {
padding: 73px 0 54px;
position: relative;
z-index: 5;
margin-bottom: 67px;
}
@media screen and (max-width: 768px) {
.form-inner {
padding: 49px 0 42px;
margin-bottom: 49px;
}
}
.form-inner .m-box-icon {
z-index: -1;
}
@media screen and (max-width: 768px) {
.form-inner .m-box-icon .m-form-icon img {
max-width: 45px;
}
}
.m-campaign-01 {
margin-bottom: 95px;
margin-top: -10px;
}
@media screen and (max-width: 768px) {
.m-campaign-01 {
margin-top: 6px;
margin-bottom: 79px;
}
.m-campaign-01 .m-campaign-price {
margin: 0 auto;
}
}
.m-form-title.m-titl-01 {
margin-bottom: 28px;
}
@media screen and (max-width: 768px) {
.m-form-title.m-titl-01 {
margin-bottom: 25px;
}
}
.tel-wr {
max-width: 423px;
width: 100%;
margin: 0 auto 42px;
background: #d7eefd;
padding: 30px 52px 15px;
text-align: center;
border-radius: 10px;
}
@media screen and (max-width: 768px) {
.tel-wr {
margin-bottom: 35px;
max-width: 274px;
padding: 23px 0 14px;
text-align: center;
line-height: 1;
}
}
.tel-wr .fz-roboto {
display: flex;
align-items: center;
font-size: 25px;
font-size: 1.5625rem;
font-weight: 700;
line-height: 1;
}
@media screen and (max-width: 768px) {
.tel-wr .fz-roboto {
font-size: 16px;
font-size: 1rem;
justify-content: center;
margin-bottom: -4px;
}
}
.tel {
font-size: 41px;
font-size: 2.5625rem;
font-weight: 500;
margin-left: 10px;
pointer-events: none;
}
@media screen and (max-width: 768px) {
.tel {
pointer-events: inherit;
font-size: 27px;
font-size: 1.6875rem;
}
}
.time {
font-size: 12px;
font-size: 0.75rem;
font-weight: 700;
}
@media screen and (max-width: 768px) {
.time {
font-size: 8px;
font-size: 0.5rem;
}
}
.m-box-form {
max-width: 580px;
width: 100%;
margin: 0 auto;
padding-left: 10px;
}
@media screen and (max-width: 768px) {
.m-box-form {
max-width: 670px;
padding: 0 29px;
}
}
.form-wr .form-table {
width: 100%;
color: #000;
font-size: 14px;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.5;
margin-bottom: 48px;
}
@media screen and (max-width: 768px) {
.form-wr .form-table {
font-size: 15px;
font-size: 0.9375rem;
margin-bottom: 18px;
}
}
.form-wr .form-table tr th {
width: 165px;
padding-right: 45px;
font-weight: 500;
vertical-align: middle;
}
@media screen and (max-width: 768px) {
.form-wr .form-table tr th {
display: block;
width: 100%;
padding: 0;
}
}
.form-wr .form-table tr th.required {
position: relative;
}
.form-wr .form-table tr th.required:after {
content: "必須";
position: absolute;
display: inline-block;
font-size: 12px;
font-size: 0.75rem;
background: #f66236;
color: #fff;
font-weight: 500;
top: calc(50% - 11px);
right: 0;
width: 38px;
text-align: center;
line-height: 1;
padding: 5px 0;
}
@media screen and (max-width: 768px) {
.form-wr .form-table tr th.required:after {
position: static;
margin-left: 11px;
}
}
.form-wr .form-table tr th.last {
vertical-align: top;
padding-top: 15px;
}
@media screen and (max-width: 768px) {
.form-wr .form-table tr th.last {
padding-top: 0;
}
}
.form-wr .form-table tr td {
padding: 12px 0 12px 20px;
}
@media screen and (max-width: 768px) {
.form-wr .form-table tr td {
display: block;
padding: 16px 0 15px;
}
}
.form-wr .form-table input,
.form-wr .form-table textarea {
border: 1px solid #9B9B9B;
width: 100%;
background: #fff;
}
.form-wr .form-table input {
height: 33px;
padding: 0 10px;
}
@media screen and (max-width: 768px) {
.form-wr .form-table input {
height: 48px;
}
}
.form-wr .form-table textarea {
padding: 10px;
height: 93px;
overflow-y: auto;
resize: none;
}
@media screen and (max-width: 768px) {
.form-wr .form-table textarea {
height: 108px;
}
}
.anchorStyle01 {
font-size: 16px;
font-size: 1rem;
font-weight: bold;
line-height: 1;
border-bottom: 2px solid #707070;
padding-bottom: 10px;
position: relative;
display: inline-block;
color: #000;
}
@media screen and (max-width: 768px) {
.anchorStyle01 {
font-size: 10px;
font-size: 0.625rem;
padding-bottom: 5px;
}
}
.anchorStyle01:after {
content: "\f061";
font-family: "Font Awesome 5 Free";
font-weight: 900;
line-height: 1;
font-size: 16px;
font-size: 1rem;
display: block;
position: absolute;
top: 50%;
right: -43px;
transition: 0.3s linear;
transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
.anchorStyle01:after {
font-size: 10px;
font-size: 0.625rem;
right: -25px;
}
}
.anchorStyle02 {
width: 440px;
background: #000;
font-size: 20px;
font-size: 1.25rem;
line-height: 1;
font-weight: bold;
color: #fff;
border-radius: 10px;
display: block;
margin: 0 auto;
text-align: center;
position: relative;
padding: 28px 10px;
}
@media screen and (max-width: 768px) {
.anchorStyle02 {
max-width: 276px;
width: 100%;
font-size: 13px;
font-size: 0.8125rem;
padding: 17px 10px;
}
.anchorStyle02.mB20 {
margin-bottom: 26px !important;
}
}
@media screen and (max-width: 768px) and (max-width: 768px) {
.anchorStyle02.mB20 {
margin-bottom: 16px !important;
}
}
@media (max-width: 320px) {
.anchorStyle02 {
max-width: 176px;
}
}
.anchorStyle02:after {
content: "\f061";
display: block;
font-size: 16px;
font-size: 1rem;
color: #fff;
font-family: "Font Awesome 5 Free";
font-weight: 900;
line-height: 1;
position: absolute;
top: 50%;
right: 25px;
transition: 0.3s linear;
transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
.anchorStyle02:after {
font-size: 10px;
font-size: 0.625rem;
right: 19px;
}
}
.anchorStyle01:hover:after,
.anchorStyle02:hover:after {
transform: translate(5px, -50%);
}
.m-banner-box {
text-align: center;
}
@media screen and (max-width: 768px) {
.m-banner-box {
padding: 0 14px;
}
.m-banner-box img {
width: 100%;
}
}
.m-banner-box .img-banner {
max-width: 286px;
display: inline-block;
margin: 0 23px;
}
@media screen and (max-width: 768px) {
.m-banner-box .img-banner {
display: block;
margin: 0 auto;
max-width: 100%;
}
}
@media screen and (max-width: 768px) {
.m-banner-box .m-banner01 img {
margin-bottom: 45px;
}
}
.l-footer {
position: relative;
background: #fff;
}
.l-footer:before {
content: "";
background: #fff57d;
width: 100%;
height: 14px;
position: absolute;
bottom: 0;
left: 0;
}
@media screen and (max-width: 768px) {
.l-footer:before {
height: 13px;
bottom: -7px;
}
}
.l-footer .logo-footer {
text-align: center;
padding: 58px 0;
}
@media screen and (max-width: 768px) {
.l-footer .logo-footer {
padding: 29px 0 30px;
}
.l-footer .logo-footer img {
max-width: 148px;
}
}
.l-footer .m-back-top {
position: absolute;
height: 93px;
width: 93px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background: #002151;
color: #fff;
top: 35px;
right: 20px;
font-size: 13px;
font-size: 0.8125rem;
font-weight: 500;
border-radius: 39px;
cursor: pointer;
}
@media screen and (max-width: 768px) {
.l-footer .m-back-top {
width: 54px;
height: 54px;
font-size: 8px;
font-size: 0.5rem;
border-radius: 24px;
top: 16px;
right: 14px;
}
}
.l-footer .m-back-top i {
font-size: 24px;
font-size: 1.5rem;
transition: 0.3s linear;
}
@media screen and (max-width: 768px) {
.l-footer .m-back-top i {
font-size: 14px;
font-size: 0.875rem;
}
}
.l-footer .m-back-top:hover i {
transform: translateY(-5px);
}
.form-confirm {
background: #fdfdd7;
}
.form-confirm .l-main {
padding-top: 180px;
}
@media screen and (max-width: 768px) {
.form-confirm .l-main {
padding-top: 90px;
}
}
@media screen and (max-width: 768px) {
.form-confirm .m-img-form {
margin-bottom: 10px;
}
.form-confirm .m-img-form img {
max-width: 45px;
}
}
.form-confirm .form-inner {
padding: 40px 72px 55px;
}
@media screen and (max-width: 768px) {
.form-confirm .form-inner {
padding: 26px 30px 32px;
margin-bottom: 31px;
}
}
.form-confirm .m-box-form {
padding-left: 5px;
max-width: 440px;
}
@media screen and (max-width: 768px) {
.form-confirm .m-box-form {
padding-left: 0;
padding-right: unset;
}
}
.form-confirm .m-form-title.m-titl-01 {
margin-bottom: 24px;
}
@media screen and (max-width: 768px) {
.form-confirm .m-form-title.m-titl-01 {
margin-bottom: 28px;
}
}
.form-confirm .anchorStyle02 {
margin-bottom: 16px;
}
@media screen and (max-width: 768px) {
.form-confirm .anchorStyle02 {
margin-bottom: 12px;
}
}
.form-confirm .anchorStyle02.m-btn-back {
background: #727272;
}
.form-confirm .anchorStyle02.m-btn-back:after {
content: "\f060";
right: inherit;
left: 25px;
}
@media screen and (max-width: 768px) {
.form-confirm .anchorStyle02.m-btn-back:after {
left: 19px;
}
}
.form-confirm .anchorStyle02.m-btn-back:hover:after {
transform: translate(-5px, -50%);
}
.form-confirm .form-wr .form-table {
margin-bottom: 43px;
}
@media screen and (max-width: 768px) {
.form-confirm .form-wr .form-table {
margin-bottom: -4px;
margin-left: 5px;
font-size: 14px;
font-size: 0.875rem;
}
}
.form-confirm .form-wr .form-table tr th {
padding-left: 15px;
}
@media screen and (max-width: 768px) {
.form-confirm .form-wr .form-table tr th {
padding-left: 0;
}
}
.form-confirm .form-wr .form-table tr th.last {
padding-top: 18px;
}
@media screen and (max-width: 768px) {
.form-confirm .form-wr .form-table tr th.last {
padding-top: 0;
}
}
.form-confirm .form-wr .form-table tr td {
padding: 18px 0 18px 44px;
}
@media screen and (max-width: 768px) {
.form-confirm .form-wr .form-table tr td {
padding: 8px 0 40px;
}
}
.form-complete {
background: #fdfdd7;
}
.form-complete .l-main {
padding-top: 182px;
}
@media screen and (max-width: 768px) {
.form-complete .l-main {
padding-top: 90px;
}
}
.form-complete .form-inner {
padding: 40px 72px 64px;
margin-bottom: 73px;
}
@media screen and (max-width: 768px) {
.form-complete .form-inner {
padding: 26px 30px 29px;
margin-bottom: 41px;
}
}
.form-complete .m-complete-text {
font-size: 20px;
font-size: 1.25rem;
font-weight: 500;
line-height: 1.5;
margin-bottom: 59px;
letter-spacing: 0.1em;
color: #000;
}
@media screen and (max-width: 768px) {
.form-complete .m-complete-text {
font-size: 14px;
margin-bottom: 33px;
}
}
@media screen and (max-width: 768px) {
.form-complete .m-img-form img {
max-width: 45px;
margin-bottom: 10px;
}
}
.form-complete .m-form-title.m-titl-01 {
margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
.form-complete .anchorStyle02 {
padding-left: 19px;
}
.form-complete .anchorStyle02:after {
right: 12px;
}
}
.l-fixbutton {
display: none;
justify-content: center;
align-items: center;
text-align: center;
position: fixed;
width: min(270px, 100%);
bottom: 0;
left: 50%;
transform: translateX(-50%);
color: #fff;
font-size: 14px;
font-size: 0.875rem;
letter-spacing: 0.05em;
background-color: #ff7800;
border-radius: 15px 15px 0 0;
padding: 15px 10px 25px;
margin-inline: auto;
z-index: 30;
}
.l-fixbutton::after {
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 0 4px 5px;
border-color: transparent transparent transparent #fff;
margin-left: 5px;
position: absolute;
right: 20px;
}
@media screen and (max-width: 640px) {
.l-fixbutton {
display: flex;
}
}