@charset "UTF-8";
/* ---------------------------------------------
* hr
--------------------------------------------- */
hr[id^="anchor-"] {
display: block;
margin-top: -110px;
padding-top: 110px;
}
@media screen and (max-width: 750px){
hr[id^="anchor-"] {
margin-top: calc(-82 / 375 * 100vw);
padding-top: calc(82 / 375 * 100vw);
}
}
/* #anchor-04 {
margin-top: -110px;
padding-top: 110px;
} */
.c-anchor-01 {
margin-top: -180px !important;
padding-top: 180px !important;
}
@media screen and (max-width: 750px){
.c-anchor-01 {
margin-top: calc(-135 / 375 * 100vw) !important;
padding-top: calc(135 / 375 * 100vw) !important;
}
.c-anchor-02 {
margin-top: calc(-140 / 375 * 100vw) !important;
padding-top: calc(140 / 375 * 100vw) !important;
}
.c-anchor-03 {
margin-top: -21.33vw !important;
padding-top: 21.33vw !important;
}
}
/* ---------------------------------------------
* .js-fadein
--------------------------------------------- */
/* フェードイン */
.js-fadein {
opacity: 0;
}
.js-fadein.is-active {
opacity: 1;
transition: opacity 1s;
}
/* フェードインアップ */
.js-fadein-up {
opacity: 0;
transform: translateY(50px);
}
.js-fadein-up.is-active {
transform: translateY(0);
opacity: 1;
transition: transform 0.8s, opacity 1s;
}
/* 左にスライド */
.js-slidein-to-left {
opacity: 0;
transform: translateX(50px);
}
.js-slidein-to-left.is-active {
transform: translateX(0);
opacity: 1;
transition: transform 0.8s, opacity 1s;
}
/* 右にスライド */
.js-slidein-to-right {
opacity: 0;
transform: translateX(-50px);
}
.js-slidein-to-right.is-active {
transform: translateX(0);
opacity: 1;
transition: transform 0.8s, opacity 1s;
}
/* ---------------------------------------------
* .contents--top
--------------------------------------------- */
.contents--top {
margin-top: 0;
}
@media screen and (max-width: 750px){
.contents--top {
padding-top: calc(82 / 375 * 100vw);
}
}
.contents--top img {
display: block;
width: 100%;
}
/* ---------------------------------------------
* c-kv
--------------------------------------------- */
.c-kv {
width: 100%;
position: relative;
}
.c-kv__app-link {
display: inline-block;
}
.c-kv__app {
display: flex;
align-items: center;
position: absolute;
/* width: 228px; */
width: calc(228 / 1440 * 100%);
gap: 14px;
bottom: calc(70 / 400 * 100%);
right: calc(531 / 1440 * 100%);
}
.c-kv__app-link01 {
width: calc(98 / 228 * 100%);
transition: .6s;
/* width: 98px; */
}
.c-kv__app-link02 {
/* width: 121px; */
width: calc(121 / 228 * 100%);
transition: .6s;
}
@media screen and (min-width: 751px){
.c-kv__app-link01:hover,
.c-kv__app-link02:hover {
opacity: 0.7;
}
}
/* ---------------------------------------------
* c-section-catch
--------------------------------------------- */
.c-section-catch {
background: url(/msppoint/app/revision_202402/img/top_bg_02.png) center 100% no-repeat;
background-size: 1441px auto;
padding-bottom: 50px;
}
@media screen and (min-width: 1441px){
.c-section-catch {
background: url(/msppoint/app/revision_202402/img/top_bg_01.png) center 100% no-repeat;
background-size: 1920px auto;
}
}
@media screen and (min-width: 1921px){
.c-section-catch {
background: url(/msppoint/app/revision_202402/img/top_bg_01.png) center 0 no-repeat;
background-size: cover;
/* position: relative; */
/* background: none; */
}
/* .c-section-catch:after {
content: '';
position: absolute;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
background: url(/msppoint/app/revision_202402/img/top_bg_01.png) 0 0 no-repeat;
background-size: 100% auto;
width: 100vw;
height: 382px;
} */
}
@media screen and (max-width: 1024px){
.c-section-catch {
background: url(/msppoint/app/revision_202402/img/top_bg_03-top.png) center 95% no-repeat;
background-size: 1024px auto;
}
}
@media screen and (max-width: 750px){
.c-section-catch {
background: url(/msppoint/app/revision_202402/img/sp/top_bg.png) center 100% no-repeat;
background-size: 100% auto;
background-position: 20% 0;
padding-bottom: calc(80 / 375 * 100vw);
}
}
.c-section-catch__inner {
position: relative;
z-index: 9;
}
.c-section-catch__lead {
text-align: center;
font-size: 20px;
margin-top: 65px;
font-weight: bold;
line-height: calc(38 / 20);
letter-spacing: 0.15em;
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
}
@media screen and (max-width: 750px){
.c-section-catch__inner {
width: calc(340 / 375 * 100vw);
margin-inline: auto;
}
.c-section-catch__lead {
font-size: calc(14 / 375 * 100vw);
margin-top: calc(30 / 375 * 100vw);
letter-spacing: 0.05em;
}
.c-section-catch__body {
width: 100%;
}
}
/* ---------------------------------------------
* c-ttl
--------------------------------------------- */
/* c-ttl
--------------------------------------------- */
.c-ttl {
position: relative;
width: 100%;
padding-top: 50px;
padding-bottom: 31px;
}
@media screen and (max-width: 750px){
.c-ttl {
width: 100%;
/* padding-top: calc(44vw / 375 / 100); */
padding-top: calc(50 / 375 * 100vw);
padding-bottom: calc(24 / 375 * 100vw);
}
}
.c-ttl:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 12px;
background: url(/msppoint/app/revision_202402/img/ttl_bg.png) 0 0 no-repeat;
background-size: 100% auto;
}
@media screen and (max-width: 750px){
.c-ttl:before {
width: 100%;
background: url(/msppoint/app/revision_202402/img/sp/ttl_bg.png) 0 0 no-repeat;
background-size: 100% auto;
}
}
.c-ttl:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 12px;
background: url(/msppoint/app/revision_202402/img/ttl_bg.png) 0 0 no-repeat;
background-size: 100% auto;
}
@media screen and (max-width: 750px){
.c-ttl:after {
width: 100%;
background: url(/msppoint/app/revision_202402/img/sp/ttl_bg.png) 0 0 no-repeat;
background-size: 100% auto;
}
}
.c-ttl__icn-outer {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
}
.c-ttl__icn {
width: 70px;
margin-inline: auto;
border-radius: 50%;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
text-align: center;
}
@media screen and (max-width: 750px){
.c-ttl__icn {
width: calc(65 / 375 * 100vw);
}
.c-ttl__icn img{
width: 100%;
display: block;
}
}
.c-ttl__ttl {
margin-top: 3px;
font-size: 26px;
text-align: center;
font-weight: bold;
letter-spacing: 0.05em;
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
}
@media screen and (max-width: 750px){
.c-ttl__ttl {
font-size: calc(24 / 375 * 100vw);
}
}
.c-ttl__ttl-sub {
display: block;
text-align: center;
font-size: 18px;
font-weight: bold;
color: #91ACBF;
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
}
@media screen and (max-width: 750px){
.c-ttl__ttl-sub {
font-size: calc(15 / 375 * 100vw);
}
}
/* ---------------------------------------------
* c-list-icn01
--------------------------------------------- */
.c-list-icn01 {
width: 499px;
/* width: calc(499 / 997 * 100%); */
margin-inline: auto;
display: flex;
justify-content: center;
gap: 19px;
margin-top: 71px;
}
@media screen and (max-width: 750px){
.c-list-icn01 {
width: 100%;
margin-top: calc(28 / 375 * 100vw);
gap: calc(9 / 375 * 100vw);
}
}
.c-list-icn01__icn {
border-radius: 50%;
background-color: #fff;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
text-align: center;
}
.c-list-icn01__item,
.c-list-icn02__item {
transition: .6s;
}
@media screen and (max-width: 750px){
.c-list-icn01__icn {
/* width: calc(72 / 375 * 100vw); */
width: 100%;
}
.c-list-icn01__item {
width: calc(72 / 375 * 100vw);
}
}
@media screen and (min-width: 751px){
.c-list-icn01__item:hover,
.c-list-icn02__item:hover {
opacity: 0.7;
}
}
.c-list-icn01__txt {
display: block;
text-align: center;
display: block;
font-size: 13px;
color: #777777;
margin-top: 5px;
}
@media screen and (max-width: 750px){
.c-list-icn01__txt {
font-size: calc(10 / 375 * 100vw);
margin-top: calc(5 / 375 * 100vw);
}
/* .c-block__body01 .c-block__note {
margin-top: calc(5 / 375 * 100%);
} */
}
/* ---------------------------------------------
* c-list-icn02
--------------------------------------------- */
.c-list-icn02 {
width: 716px;
/* width: calc(707 / 997 * 100%); */
/* width: calc(499 / 1440 * 100%); */
margin-inline: auto;
display: flex;
justify-content: center;
margin-top: 27px;
gap: 20px;
text-align: center;
}
@media screen and (max-width: 750px){
.c-list-icn02 {
width: 100%;
flex-wrap: wrap;
column-gap: calc(20 / 375 * 100vw);
row-gap: calc(15 / 375 * 100vw);
margin-top: calc(18 / 375 * 100vw);
}
}
.c-list-icn02__icn {
width: 81px;
height: 81px;
margin-inline: auto;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
border-radius: 50%;
}
@media screen and (max-width: 750px){
.c-list-icn02__icn {
width: 100%;
height: auto;
}
}
@media screen and (max-width: 750px){
.c-list-icn02__item {
width: calc(61 / 375 * 100vw);
}
}
.c-list-icn02__txt {
display: block;
text-align: center;
font-size: 11px;
color: #777777;
margin-top: 5px;
white-space: nowrap;
}
@media screen and (max-width: 750px){
.c-list-icn02__txt {
margin-top: calc(5 / 375 * 100vw);
font-size: calc(9 / 375 * 100vw);
letter-spacing: -0.01em;
/* white-space: normal; */
}
}
/* ---------------------------------------------
* c-section-point
--------------------------------------------- */
.c-section-point {
/* width: calc(997 / 1440 * 100%); */
max-width: 997px;
margin: 75px auto 0;
padding:0 20px 41px;
}
@media screen and (max-width: 750px){
.c-section-point {
max-width: calc(340 / 375 * 100vw);
width: 100%;
margin: 0 auto 0;
padding: 0 0 calc(10 / 375 * 100vw);
}
}
.c-section-point .c-block__img {
margin-inline: auto;
}
/* ---------------------------------------------
* c-block
--------------------------------------------- */
.c-block {
display: flex;
justify-content: center;
/* gap: 76px; */
margin-top: 57px;
}
@media screen and (max-width: 750px){
.c-block {
width: calc(310 / 375 * 100vw);
margin-inline: auto;
flex-direction: column;
margin-top: 0;
}
}
.c-block__item {
width: 50%;
/* column-gap: 54px; */
column-gap: calc(54 / 997 * 100%);
}
@media screen and (max-width: 750px){
.c-block__item {
width: 100%;
margin-top: calc(42 / 375 * 100%);
}
}
.c-block__item:first-child {
border-right: 1px dashed #BED0DD;
}
@media screen and (max-width: 750px){
.c-block__item:first-child {
border-right: none;
border-bottom: 1px dashed #BED0DD;
margin-top: calc(25 / 375 * 100vw);
padding-bottom: calc(33 / 375 * 100vw);
}
}
.c-block__cat {
padding: 10px 9px 7px;
background-color: #837A5F;
border-radius: 6px;
}
@media screen and (max-width: 750px){
.c-block__cat {
padding: calc(6 / 375 * 100vw) calc(10 / 375 * 100vw) calc(5 / 375 * 100vw);
border-radius: calc(6 / 375 * 100vw);
}
}
.c-block__cat--02 {
/* padding-inline: calc(10 / 375 * 100%); */
}
/* @media screen and (max-width: 750px){
.c-block__cat--02 {
padding: calc(1 / 375 * 100vw) calc(7 / 375 * 100vw);
}
} */
.c-block__cat-txt {
display: block;
font-size: 14px;
font-weight: bold;
line-height: 1;
letter-spacing: 0.05em;
color: #fff;
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
}
@media screen and (max-width: 750px) {
.c-block__cat-txt {
font-size: calc(12 / 375 * 100vw);
line-height: 1;
}
}
.c-block__ttl {
display: inline-block;
font-size: 24px;
font-weight: bold;
color: #6E6346;
line-height: calc(32 / 24);
letter-spacing: 0.05em;
/* margin-top: 22px; */
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
}
@media screen and (max-width: 750px){
.c-block__ttl {
font-size: calc(18 / 375 * 100vw);
}
}
.c-block__cat-outer {
/* width: calc(135 / 997 * 100%); */
display: flex;
gap: 7px;
text-align: center;
justify-content: center;
}
@media screen and (max-width: 750px){
.c-block__cat-outer {
margin: 0 auto 0;
gap: calc(7 / 375 * 100vw);
}
}
.c-block__ttl-outer {
position: relative;
text-align: center;
margin-top: 16px;
padding-bottom: 14px;
}
@media screen and (max-width: 750px){
.c-block__ttl-outer {
margin: calc(10 / 375 * 100vw) auto 0;
padding-bottom: calc(11 / 375 * 100vw);
}
}
.c-block__ttl-outer::after {
position: absolute;
content: "";
display: inline-block;
width: 30px;
height: 1px;
bottom: 0;
left: 50%;
transform: translateX(-50%);
background-color: #707070;
}
@media screen and (max-width: 750px){
.c-block__ttl-outer::after {
width: calc(40 / 375 * 100vw);
height: calc(1 / 375 * 100vw);
/* content: none; */
}
}
.c-block__body {
/* margin: 46px auto 0; */
/* width: 100%; */
width: calc(280 / 997 * 100%);
flex-shrink: 0;
}
@media screen and (max-width: 750px){
.c-block__body {
margin-top: calc(17 / 375 * 100vw);
}
}
.c-block__body01 {
margin-top: calc(30 / 997 * 100%);
}
@media screen and (max-width: 750px){
.c-block__body01 {
margin-top: calc(19 / 375 * 100vw);
}
}
.c-block__img-top {
display: block;
width: calc(280 / (997 / 2) * 100%);
margin-inline: auto;
}
@media screen and (max-width: 750px){
.c-block__img-top {
width: 100%;
}
}
.c-block__txt {
padding: calc(20 / 500 * 100%) calc(40 / 500 * 100%) calc(26 / 500 * 100%);
font-size: 16px;
line-height: calc(28 / 16);
letter-spacing: 0.05em;
/* margin-top: 27px; */
}
@media screen and (max-width: 750px){
.c-block__txt {
font-size: calc(16 / 375 * 100vw);
padding: 0;
margin-top: calc(17 / 375 * 100vw);
letter-spacing: 0.001em;
}
}
.c-block__txt-marker {
background: linear-gradient(transparent 70%, #FFF49A 30%);
}
.c-block__note {
font-size: 12px;
line-height: calc(16 / 12);
letter-spacing: 0.05em;
text-align: center;
color: #666666;
padding-inline: calc(40 / 500 * 100%);
}
@media screen and (max-width: 750px){
.c-block__note {
font-size: calc(12 / 375 * 100vw);
text-align: left;
margin-top: calc(4 / 375 * 100vw);
padding-left: calc(12 / 375 * 100vw);
text-indent: calc(-12 / 375 * 100vw);
}
}
.c-block__link {
width: calc(400 / 500 * 100%);
margin: 36px auto 0;
background-color: #fff;
/* padding: calc(20 / 500 * 100%); */
}
@media screen and (max-width: 750px){
.c-block__link {
width: 100%;
margin-top: calc(25 / 375 * 100vw);
}
}
.c-block__link--w320 {
width: 320px;
margin-left: 0;
margin-top: 35px;
}
.c-block__link--pc-hide {
display: none;
}
@media screen and (max-width: 750px){
.c-block__link--w320 {
width: calc(310 / 370 * 100vw);
margin-top: calc(20 / 375 * 100vw);
margin-inline: auto;
}
.c-block__link--pc-hide {
display: block;
height: calc(55 / 375 * 100vw);
}
}
.c-block__link--online {
margin: 36px auto 0;
}
@media screen and (max-width: 750px){
.c-block__link--online {
margin-top: calc(15 / 375 * 100vw)!important;
}
}
/* ---------------------------------------------
* c-block-2
--------------------------------------------- */
.c-block-2 {
flex-direction: column;
margin-top: 63px;
}
@media screen and (max-width: 750px){
.c-block-2 {
margin-top: calc(24 / 375 * 100%);
}
.c-block-2 + .pc-hide {
margin: 0;
}
}
.c-block-2 .c-block__img {
width: calc(280 / 364 * 100%);
flex-shrink: 0;
}
.c-block-2 .c-block__txt {
padding: 0;
}
.c-block-2 .c-block__ttl-outer {
padding-bottom: 20px;
margin-bottom: 26px;
margin-top: 0;
}
@media screen and (max-width: 750px){
.c-block-2 .c-block__ttl-outer {
padding-bottom: calc(15 / 375 * 100vw);
margin-bottom: calc(22 / 375 * 100%);
}
}
.c-block-2 .c-block__ttl-outer::after {
left: 0%;
transform: translateX(0%);
}
@media screen and (max-width: 750px){
.c-block-2 .c-block__ttl-outer::after {
left: 50%;
transform: translateX(-50%);
}
}
.c-block-2 .c-block__body:last-child {
width: calc(448 / 415 * 100%);
/* margin-top: ; */
}
@media screen and (max-width: 750px){
.c-block-2 .c-block__body {
width: 100%;
margin-top: 0;
}
.c-block-2 .c-block__body:last-child {
display: block;
}
}
.c-block-2 .c-block__foot {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
@media screen and (max-width: 750px){
.c-block-2 .c-block__foot {
display: block;
}
}
.c-block-2 .c-btn__txt {
display: block;
font-size: 15px;
line-height: calc(24 / 15);
text-align: right;
display: flex;
gap: 17px;
padding: 0;
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
}
@media screen and (max-width: 750px){
.c-block-2 .c-btn__txt {
font-size: calc(14 / 375 * 100vw);
gap: calc(15 / 375 * 100vw);
line-height: calc(19 / 15);
letter-spacing: 0.01em;
}
}
.c-block-2 .c-block__note {
text-align: left;
margin-top: 14px;
padding-inline: 0;
}
@media screen and (max-width: 750px){
.c-block-2 .c-block__note {
margin-top: calc(31 / 375 * 100vw);
}
}
.c-block-2 .c-block__note img{
display: inline-block;
width: 24px;
height: 24px;
box-shadow: 0 1px 6px #A2A2A2;
border-radius: 50%;
margin-inline: 5px;
transform: translateY(15%);
}
@media screen and (max-width: 750px){
.c-block-2 .c-block__note img {
width: calc(24 / 375 * 100vw);
height: calc(24 / 375 * 100vw);
margin-inline: calc(5 / 375 * 100vw);
}
}
.c-block-2 .c-block__note:last-child {
margin-top: 12px;
}
@media screen and (max-width: 750px){
.c-block-2 .c-block__note:last-child {
margin-top: calc(12 / 375 * 100vw);
}
}
.c-block-2 .c-block__item {
border-right: none;
width: 100%;
display: flex;
align-items: flex-start;
}
@media screen and (max-width: 750px){
.c-block-2 .c-block__item {
flex-direction: column;
border: none;
padding-bottom: 0;
}
}
.c-block-2 .c-block__item:first-child {
border-right: none;
border-bottom: 1px dashed #BED0DD;
padding-bottom: calc(64 / 997 * 100%);
}
@media screen and (max-width: 750px){
.c-block-2 .c-block__item:first-child {
padding-bottom: calc(28 / 375 * 100vw);
}
}
.c-block-2 .c-block__item:last-child {
width: 100%;
margin-top: 67px;
}
@media screen and (max-width: 750px){
.c-block-2 .c-block__item:last-child {
margin-top: calc(26 / 375 * 100vw);
}
}
.c-block-2 .c-block__foot {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
@media screen and (max-width: 750px){
.c-block__item--mg0 {
margin-top: 0;
}
}
/* ---------------------------------------------
* c-block-3
--------------------------------------------- */
.c-block-3 {
/* width: 100%; */
/* width: calc(930 / 997 *100%); */
margin-inline: auto;
flex-wrap: wrap;
justify-content:space-between;
margin-top: 85px;
}
@media screen and (max-width: 750px){
.c-block-3 {
width: 100%;
display: block;
margin-top: calc(67 / 375 * 100vw);
}
}
@media screen and (max-width: 750px){
.c-block-3 .c-block__img{
/* width: 100%; */
width: calc(96 / 480 * 100%);
}
}
.c-block-3 .c-block__item {
width: calc(50% - 36px);
border-right: none;
/* display: flex;
align-items: flex-start;
column-gap: 23px; */
}
.c-block__item-inner {
display: flex;
align-items: flex-start;
column-gap: 23px;
}
@media screen and (max-width: 750px){
.c-block-3 .c-block__item {
/* flex-wrap: wrap; */
position: relative;
width: 100%;
/* width: calc(310 / 375 * 100vw); */
/* gap: calc(24 / 375 * 100vw); */
border: none;
/* margin-inline: auto; */
padding-bottom: 0;
margin-inline: auto;
}
.c-block-3 .c-block__item-inner {
position: relative;
/* width: calc(340 / 375 * 100vw); */
width: 100%;
gap: calc(18 / 375 * 100vw);
margin-inline: auto;
}
.c-block-3 .c-block__item::after {
content: '';
position: absolute;
bottom: calc(-96 / 375 * 100vw);
left: 50%;
background: url(/msppoint/app/revision_202402/img/sp/top_bg_02.png) 0 bottom space;
background-size: 100% auto;
width: 100vw;
height: calc(159 / 375 * 100vw);
transform: translateX(-50%);
z-index: -1;
}
.c-block-3 .c-block__item--bg-02::after {
bottom: calc(-29 / 375 * 100vw);
}
.c-block-3 .c-block__item--bg-03::after {
bottom: calc(7 / 375 * 100vw);
}
}
.c-block-3 .c-block__item:nth-of-type(n+4) {
margin-top: 125px;
}
@media screen and (max-width: 750px){
.c-block-3 .c-block__item:nth-of-type(n+2) {
margin-top: calc(72 / 375 * 100vw);
}
}
.c-block-3 .c-block__item:nth-of-type(n+8) {
margin-top: 138px;
}
@media screen and (max-width: 750px){
.c-block-3 .c-block__item:nth-of-type(n+8) {
margin-top: 0;
}
}
@media screen and (max-width: 750px){
.c-block-3 .c-block__item:nth-of-type(n+6) {
margin-top: calc(75 / 375 * 100vw);
}
}
.c-block-3 .c-block__item:last-of-type {
margin-top: 106px;
}
@media screen and (max-width: 750px){
.c-block-3 .c-block__item:last-of-type {
margin-top: calc(48 / 375 * 100vw);
}
}
.c-block-3 .c-block__link {
width: calc(290 / 316 * 100%);
margin-top: 21px;
margin-inline: 0 auto;
}
@media screen and (max-width: 750px){
.c-block-3 .c-block__link {
width: calc(290 / 340 * 100vw);
margin-top: calc(34 / 375 * 100%);
margin-inline: auto;
}
}
.c-block-3 .c-block__body {
width: calc(96 / 429 * 100%);
position: relative;
z-index: 2;
flex-shrink: 0;
transform: translateX(7%);
}
@media screen and (max-width: 750px){
.c-block-3 .c-block__body {
width: calc(96 / 375 * 100vw);
margin-top: 0;
transform: translateX(-5%);
}
}
.c-block-3 .c-block__icn {
position: absolute;
width: calc(65 / 95 * 100%);
top: calc(-26 / 95 * 100%);
left: calc(-60 / 197 * 100%);
/* top: -52px; */
/* left: -30px; */
z-index: -1;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
border-radius: 50%;
}
.c-block-3 .c-block__icn--02{
top: calc(-50 / 269 * 100%);
}
@media screen and (max-width: 750px){
.c-block-3 .c-block__icn {
width: calc(56 / 375 * 100vw);
top: calc(-44 / 375 * 100vw);
left: calc(-12 / 375 * 100vw);
}
}
.c-block-3 .c-block__txt {
padding: 0 0 16px;
font-size: 14px;
letter-spacing: 0.04em;
}
@media screen and (max-width: 750px){
.c-block-3 .c-block__txt {
font-size: calc(14 / 375 * 100vw);
letter-spacing: -0.03em;
padding: 0 0 calc(14 / 375 * 100vw);
margin-top: 0;
}
.c-block-3 .c-block__txt--pb-0 {
padding-bottom: 0;
}
}
.c-block-3 .c-block__ttl {
font-size: 20px;
text-align: left;
letter-spacing: 0.04em;
/* word-break: normal; */
/* white-space: nowrap; */
}
@media screen and (max-width: 750px){
.c-block-3 .c-block__ttl {
font-size: calc(20 / 375 * 100vw);
text-align: left;
}
}
.c-block-3 .c-block__ttl-outer::after {
content: none;
}
@media screen and (max-width: 750px){
.c-block-3 .c-block__ttl-outer::after {
content: none;
}
}
.c-block-3 .c-block__ttl-outer {
padding-bottom: 10px;
margin-top: 0;
}
@media screen and (max-width: 750px){
.c-block-3 .c-block__ttl-outer {
margin: 0;
}
}
.c-block-3 .c-block__note {
text-align: left;
line-height: 1.5;
letter-spacing: 0.04em;
padding-inline: 0;
padding-left: 1em;
text-indent: -1em;
}
@media screen and (max-width: 750px){
.c-block-3 .c-block__note {
line-height: 1.5;
margin-top: calc(12 / 375 * 100vw);
}
.c-block-3 .c-block__note--01 {
margin-top: calc(18 / 375 * 100vw);
}
.c-block-3 .c-block__note--02 {
margin-top: calc(4 / 375 * 100vw);
}
.c-block-3 .c-block__note--02:first-child {
margin-top: calc(15 / 375 * 100vw);
}
.c-block-3 .c-block__note--03 {
margin-top: calc(4 / 375 * 100vw);
}
}
.c-block-3 .c-block__note-mgt-5 {
margin-top: 3px;
}
@media screen and (max-width: 750px){
.c-block-3 .c-block__note-mgt-5 {
margin-top: calc(10 / 375 * 100vw);
}
}
.c-block-3 .c-block__foot {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
line-height: normal;
}
@media screen and (max-width: 750px){
.c-block-3 .c-block__foot {
text-align: left;
}
}
/* ---------------------------------------------
* c-btn
--------------------------------------------- */
.c-btn {
display: block;
border-radius: 14px;
/* box-shadow: 0 1px 6px #A2A2A2; */
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
/* width: 100%; */
/* padding: 25px 35px 25px 25px; */
padding: calc(21 / 400 * 100%) calc(35 / 400 * 100%) calc(21 / 400 * 100%) calc(25 / 400 * 100%);
position: relative;
min-width: 178px;
background-color: #fff;
}
@media screen and (min-width: 751px){
.c-btn:hover:after {
right: calc(14 / 400 * 100%);
}
}
@media screen and (max-width: 750px){
.c-btn {
padding: calc(20 / 375 * 100vw) calc(20 / 375 * 100vw) calc(20 / 375 * 100vw) 0;
/* padding: calc(30 / 400 * 100%) calc(35 / 400 * 100%) calc(30 / 400 * 100%) calc(25 / 400 * 100%); */
}
}
.c-btn::after {
content: "";
position: absolute;
top: 50%;
right: calc(20 / 400 * 100%);
background-image: url(/msppoint/app/revision_202402/img/arrow.svg);
background-size: 100% auto;
background-repeat: no-repeat;
/* width: calc(17 / 400 * 100%); */
/* height: calc(5 / 64 * 100%); */
width: 17px;
height: 5px;
transform: translateY(-50%);
transition: .3s;
}
@media screen and (max-width: 750px){
.c-btn::after {
width: calc(17 / 375 * 100vw);
height: calc(5 / 375 * 100vw);
right: calc(10 / 375 * 100vw);
}
}
.c-btn__logo {
width: 112px;
}
@media screen and (max-width: 750px){
.c-btn__logo {
width: calc(119 / 375 * 100vw);
}
}
.c-btn__logo--02 {
width: 98px;
}
@media screen and (max-width: 750px){
.c-btn__logo--02 {
width: calc(117 / 375 * 100vw);
}
}
@media screen and (max-width: 750px){
.c-btn__logo--02 {
width: calc(117 / 375 * 100vw);
}
}
.c-btn__logo--02 + .c-btn__txt{
margin-top: 5px;
}
.c-btn__logo--03 {
width: 80px;
}
@media screen and (max-width: 750px){
.c-btn__logo--03 {
width: calc(91 / 375 * 100vw);
}
}
@media screen and (max-width: 750px){
.c-btn__logo--03 {
width: calc(91 / 375 * 100vw);
}
}
.c-btn__logo--04 {
width: 104px;
}
@media screen and (max-width: 750px){
.c-btn__logo--04 {
width: calc(104 / 375 * 100vw);
}
}
@media screen and (max-width: 750px){
.c-btn__logo--04 {
width: calc(104 / 375 * 100vw);
}
}
.c-btn--02 {
/* padding: 15px 35px 15px 25px; */
padding: calc(10 / 400 * 100%) calc(35 / 400 * 100%) calc(10 / 400 * 100%) calc(25 / 400 * 100%);
margin-top: 16px;
margin-inline: auto;
}
@media screen and (max-width: 990px){
.c-btn--02 {
padding: calc(8 / 400 * 100vw);
}
}
.c-btn--03 {
padding: calc(24 / 400 * 100%) calc(35 / 400 * 100%) calc(24 / 400 * 100%) calc(25 / 400 * 100%);
}
@media screen and (max-width: 990px){
.c-btn--03 {
padding: calc(5 / 290 * 100vw);
}
}
@media screen and (max-width: 750px){
.c-btn--03 {
padding: calc( 14 / 290 * 100vw) calc( 10 / 290 * 100vw);
}
}
@media screen and (max-width: 750px){
.c-btn--01::after {
right: calc(13 / 375 * 100vw);
}
}
@media screen and (max-width: 750px){
.c-btn--02 {
padding: calc(12 / 375 * 100vw) calc(35 / 375 * 100vw) calc(12 / 375 * 100vw) calc(25 / 375 * 100vw);
margin-top: calc(16 / 375 * 100vw);
}
}
.c-btn__logo--online {
width: 108px;
padding-bottom: 4px;
}
@media screen and (max-width: 750px){
.c-btn__logo--online {
width: calc(108 / 375 * 100vw);
padding-bottom: 1vw;
}
}
.c-btn__txt {
display: block;
font-size: 15px;
text-align: center;
color: #837A60;
font-weight: bold;
line-height: 1.3;
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
}
@media screen and (max-width: 750px){
.c-btn__txt {
font-size: 15px;
letter-spacing: 0;
}
}
@media screen and (max-width: 750px){
.c-btn__txt {
font-size: calc(15 / 375 * 100vw);
white-space: nowrap;
}
}
@media screen and (max-width: 750px){
.c-btn__txt {
font-size: calc(14 / 375 * 100vw);
white-space: nowrap;
}
}
.c-btn--w320 {
padding: calc(20 / 400 * 100%) calc(35 / 400 * 100%) calc(20 / 400 * 100%) calc(50 / 400 * 100%);
display: flex;
align-items: center;
gap: 12px;
}
.c-btn--w290 {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: calc(15 / 290 * 100%) calc(35 / 290 * 100%) calc(15 / 290 * 100%) calc(20 / 290 * 100%);
}
@media screen and (max-width: 750px){
.c-btn--w320,
.c-btn--w290 {
gap: calc(6 / 375 * 100vw);
}
.c-btn--w320 {
padding: calc(13 / 375 * 100vw) calc(20 / 375 * 100vw) calc(13 / 375 * 100vw) calc(50 / 375 * 100vw);
gap: calc(14 / 375 * 100vw);
}
.c-btn--w290 {
padding: calc(12 / 375 * 100vw) calc(20 / 375 * 100vw) calc(12 / 375 * 100vw) calc(10 / 375 * 100vw);
}
}
.c-btn--w290::after {
right: calc(20 / 290 * 100%);
transition: .3s;
}
.c-btn--w290-mt5::after {
top: 53%;
}
@media screen and (max-width: 990px){
.c-btn--w290-mt5::after,
.c-btn--p0::after,
.c-btn--03::after,
.c-btn--04::after {
top: 50%;
right: calc(4 / 375 * 100vw);
}
}
@media screen and (max-width: 750px){
.c-btn--w290-mt5::after,
.c-btn--p0::after,
.c-btn--03::after,
.c-btn--04::after {
right: calc(19 / 375 * 100vw);
}
}
@media screen and (max-width: 990px){
.c-btn--w290-mt5 {
padding: calc(5 / 290 * 100%) calc(35 / 290 * 100%) calc(5 / 290 * 100%) calc(25 / 290 * 100%);
}
}
@media screen and (min-width: 751px){
.c-btn--w290:hover:after,
.c-btn--03:hover:after {
right: calc(9 / 400 * 100%);
}
}
@media screen and (max-width: 750px){
.c-btn--w290:hover:after,
.c-btn:hover:after {
right: calc(1 / 400 * 100%);
}
}
@media screen and (max-width: 750px){
.c-btn--w290::after {
right: calc(10 / 375 * 100vw);
}
.c-btn--w320::after {
right: calc(15 / 375 * 100vw);
}
}
@media screen and (max-width: 750px){
.c-btn--w290::after {
right: calc(15 / 375 * 100vw);
}
}
.c-btn--p0 {
padding: calc(8 / 290 * 100%) calc(25 / 290 * 100%);
}
@media screen and (max-width: 750px){
.c-btn--p0 {
padding: calc(3 / 375 * 100vw) calc(25 / 375 * 100vw);
}
}
.c-btn__txt-visible {
display: none;
}
@media screen and (max-width: 990px){
.c-btn__txt-visible {
display: block;
}
}
@media screen and (max-width: 750px){
.c-btn__txt-visible {
display: none;
}
}
.c-btn--online {
justify-content: start;
padding: calc(10 / 290 * 100%) calc(25 / 290 * 100%) calc(10 / 290 * 100%) calc(20 / 290 * 100%);
}
@media screen and (max-width: 750px){
.c-btn--online {
padding: calc(5 / 290* 100vw) calc(25 / 290* 100vw) calc(7 / 290* 100vw) calc(35 / 290* 100vw);
}
}
/* ---------------------------------------------
* c-section-payment
--------------------------------------------- */
.c-section-payment {
/* width: calc(997 / 1440 * 100%); */
max-width: 997px;
margin: 70px auto 0;
padding:0 20px;
}
@media screen and (max-width: 750px){
.c-section-payment {
max-width: calc(340 / 375 * 100vw);
width: 100%;
margin: calc(56 / 375 * 100vw) auto 0;
padding: 0 0 calc(10 / 375 * 100vw);
}
}
/* .c-section-payment .c-block__body {
width: calc(280 / 480 * 100%);
}
.c-section-payment .c-block__img {;
width: 100%;
} */
/* ---------------------------------------------
* c-section-coupon
--------------------------------------------- */
.c-section-coupon {
/* width: calc(997 / 1440 * 100%); */
max-width: 997px;
margin: 131px auto 0;
padding:0 20px;
}
@media screen and (max-width: 750px){
.c-section-coupon {
max-width: calc(340 / 375 * 100vw);
width: 100%;
margin: calc(56 / 375 * 100vw) auto 0;
padding-inline: 0;
}
}
.c-section-coupon .c-ttl__icn-outer {
display: flex;
justify-content: center;
gap: 10px;
}
@media screen and (max-width: 750px){
.c-section-coupon .c-ttl__icn-outer {
gap: calc(10 / 375 * 100vw) auto 0;
}
}
.c-section-coupon .c-ttl__icn {
margin: 0;
}
.c-block__body--bigger {
width: calc(448 / 997 * 100%);
}
/* ---------------------------------------------
* c-section-function
--------------------------------------------- */
.c-section-function {
position: relative;
margin-top: 96px;
/* padding-bottom: calc(223 / 997 * 100%); */
}
@media screen and (max-width: 750px){
.c-section-function {
margin-top: calc(56 / 375 * 100vw);
}
}
.c-section-function .c-ttl{
position: relative;
padding-top: 43px;
}
@media screen and (max-width: 750px){
.c-section-function .c-ttl {
padding-top: calc(23 / 375 * 100%);
}
}
.c-section-function:before,
.c-section-function:after {
content: '';
position: absolute;
left: 50%;
background: url(/msppoint/app/revision_202402/img/top_bg_03.png) 0 bottom space;
background-size: 100% auto;
width: 100vw;
height: calc(177 / 1440 * 100vw);
}
.c-section-function:before {
top: 368px;
transform: translateX(-50%) rotateY(180deg);
}
.c-section-function:after {
bottom: -29px;
transform: translateX(-50%);
}
@media screen and (max-width: 750px){
.c-section-function:before,
.c-section-function:after {
content: none;
}
}
.c-section-function__inner {
position: relative;
}
.c-section-function__inner:before,
.c-section-function__inner:after {
content: '';
position: absolute;
left: 50%;
background: url(/msppoint/app/revision_202402/img/top_bg_03.png) 0 bottom space;
background-size: 100% auto;
width: 100vw;
height: calc(177 / 1440 * 100vw);
}
.c-section-function__inner:before {
top: 728px;
transform: translateX(-50%);
}
.c-section-function__inner:after {
bottom: 293px;
transform: translateX(-50%) rotateY(180deg);
}
@media screen and (max-width: 750px){
.c-section-function__inner:before,
.c-section-function__inner:after {
content: none;
}
}
.c-section-function__box {
position: relative;
/* width: calc(997 / 1440 * 100%); */
max-width: 997px;
margin-inline: auto;
z-index: 10;
padding: 0 40px;
}
@media screen and (max-width: 750px){
.c-section-function__box {
max-width: calc(340 / 375 * 100vw);
width: 100%;
margin: calc(50 / 375 * 100vw) auto 0;
padding-inline: 0;
}
}
.c-section-function .c-block__img {
width: 100%;
}
@media screen and (max-width: 750px){
.c-section-function .c-block__img {
width: 100%;
}
}
/* c-section-function-outer
--------------------------------------------- */
@media screen and (max-width: 750px){
.c-section-function {
max-width: calc(340 / 375 * 100%);
width: 100%;
margin: calc(56 / 375 * 100vw) auto 0;
}
}
/* .c-section-function-outer {
background: url(/msppoint/app/revision_202402/img/top_bg_03.png) 0 bottom space;
background-size: 100% auto;
} */
@media screen and (max-width: 750px){
/* .c-section-function-outer {
background-image: none;
} */
}
/* mod-fixed-btn
--------------------------------------------- */
.mod-fixed-btn {
position: fixed;
right: 20px;
bottom: 30px;
z-index: 9999;
display: none;
}
@media screen and (max-width: 750px) {
.mod-fixed-btn {
width: 100%;
position: fixed;
right: 0;
bottom: 0;
z-index: 9999;
display: none;
}
}
.mod-fixed-btn.is_clicked {
display: none !important;
}
.mod-fixed-btn.js-modal-movie-playing {
display: none !important;
}
.mod-fixed-btn__wrap {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-ms-align-items: center;
align-items: center;
background-color: rgba(119, 119, 119, 0.8);
padding: 12px 18px;
border-radius: 20px;
}
@media screen and (max-width: 750px) {
.mod-fixed-btn__wrap {
width: 100vw;
justify-content: center;
background-color: rgba(119, 119, 119, 0.96);
padding: 3.2vw 0;
border-radius: 0;
}
}
@media screen and (max-width: 750px) and (orientation: landscape) {
.mod-fixed-btn__wrap {
padding: 12px 0;
}
}
.mod-fixed-btn__btn-close {
position: absolute;
top: -4px;
right: 7px;
z-index: 1;
width: 8px;
height: 8px;
cursor: pointer;
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
}
.mod-fixed-btn__btn-close:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.mod-fixed-btn__btn-close img {
width: 100%;
}
.mod-fixed-btn__app-wrap {
margin-left: 9px;
}
@media screen and (max-width: 750px) {
.mod-fixed-btn__app-wrap {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-ms-align-items: center;
align-items: center;
margin-left: 0;
}
}
.mod-fixed-btn__txt {
margin-top: 6px;
margin-bottom: 6px;
color: #fff;
font-size: 10px;
font-weight: bold;
letter-spacing: -.025em;
}
@media screen and (max-width: 750px) {
.mod-fixed-btn__txt {
margin-top: 0;
margin-bottom: 0;
margin-right: 4.27vw;
font-size: 2.93vw;
font-weight: 500;
letter-spacing: .1em;
}
}
@media screen and (max-width: 750px) and (orientation: landscape) {
.mod-fixed-btn__txt {
margin-right: 16px;
font-size: 11px;
}
}
.mod-fixed-btn__qr {
width: 64px;
}
.mod-fixed-btn__app-inner-wrap {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
gap: 6px;
}
.mod-fixed-btn__img {
display: block;
-webkit-transition: opacity .3s;
-o-transition: opacity .3s;
transition: opacity .3s;
}
@media (hover: hover) and (pointer: fine) {
.mod-fixed-btn__img:hover {
opacity: 0.8;
}
}
.mod-fixed-btn__img--app {
width: 110px;
}
@media screen and (max-width: 750px) {
.mod-fixed-btn__img--app {
width: 28.8vw;
}
.iphone .mod-fixed-btn__img--app {
display: block;
}
.android .mod-fixed-btn__img--app {
display: none;
}
}
@media screen and (max-width: 750px) and (orientation: landscape) {
.mod-fixed-btn__img--app {
width: 108px;
}
}
.mod-fixed-btn__img--google {
width: 130px;
}
@media screen and (max-width: 750px) {
.mod-fixed-btn__img--google {
width: 34.67vw;
display: none;
}
.iphone .mod-fixed-btn__img--google {
display: none;
}
.android .mod-fixed-btn__img--google {
display: block !important;
}
}
@media screen and (max-width: 750px) and (orientation: landscape) {
.mod-fixed-btn__img--google {
width: 130px;
}
}
.mod-fixed-btn__link {
display: block;
width: 146px;
-webkit-transition: opacity 300ms;
transition: opacity 300ms;
}
@media screen and (max-width: 750px) {
.mod-fixed-btn__link {
display: block;
width: 100%;
-webkit-transition: opacity 300ms;
transition: opacity 300ms;
}
}
.mod-fixed-btn__link:hover {
opacity: 0.8;
}
.ios .mod-fixed-btn__link:hover,
.android .mod-fixed-btn__link:hover {
opacity: 1;
}
.mod-fixed-btn__link img {
width: 100%;
}
/*
--------------------------------------------- */
.mod-page-top {
margin-top: 100px;
padding-bottom: 62px;
}
@media screen and (max-width: 750px) {
.mod-page-top {
margin-top: calc(60 / 375 * 100vw);
padding-bottom: calc(32 / 375 * 100vw);
}
}
.mod-page-top__link {
position: relative;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-ms-align-items: center;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
margin: 0 auto;
padding-top: 15px;
color: #597890;
font-size: 13px;
font-weight: bold;
transform: translate3d(0,0,0);
transform-origin: 0 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
letter-spacing: .2em;
text-indent: .2em;
}
.mod-page-top__link-txt {
-webkit-transition: transform .3s;
-o-transition: transform .3s;
transition: transform .3s;
}
@media (hover: hover) and (pointer: fine) {
.mod-page-top__link:hover .mod-page-top__link-txt {
font-weight: 500;
transform: scale(1.692307692307692);
}
.mod-page-top__link:hover::before {
-webkit-transform: translate(-50%, -50%) scale(0);
-ms-transform: translate(-50%, -50%) scale(0);
-o-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
}
}
@media screen and (max-width: 750px) {
.mod-page-top__link {
width: calc(80/375*100vw);
height: calc(80/375*100vw);
padding-top: calc(15/375*100vw);
font-size: calc(13/375*100vw);
}
}
.mod-page-top__link::before {
content: "";
background-color: #E9EEF2;
border-radius: 50%;
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) scale(1);
-ms-transform: translate(-50%, -50%) scale(1);
-o-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
-webkit-transition: transform .3s;
-o-transition: transform .3s;
transition: transform .3s;
z-index: -1;
}
.mod-page-top__link::after {
position: absolute;
top: 30%;
left: 41%;
display: block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 14px;
height: 14px;
border-top: 1px solid #597890;
border-left: 1px solid #597890;
content: "";
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
@media screen and (max-width: 750px) {
.mod-page-top__link::after {
width: calc(14/375*100vw);
height: calc(14/375*100vw);
}
}
/* mod-breadcrumb
--------------------------------------------- */
.mod-breadcrumb {
padding: 18px 0;
background-color: #fff;
border-top: 3px solid #EFEFEF;
}
@media screen and (max-width: 750px) {
.mod-breadcrumb {
padding: calc(20 / 375 * 100vw) 0;
border-top: calc(3 / 375 * 100vw) solid #EFEFEF;
border-bottom: calc(3 / 375 * 100vw) solid #EFEFEF;
}
}
.mod-breadcrumb__list {
max-width: 1000px;
margin: 0 auto;
padding: 0 calc(20 / 1000 * 100%);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
@media screen and (max-width: 750px) {
.mod-breadcrumb__list {
max-width: 100%;
width: calc(320 / 375 * 100%);
margin: 0 auto;
overflow-x: auto;
white-space: nowrap;
}
}
.mod-breadcrumb__item:not(:first-of-type) {
position: relative;
padding-left: 24px;
}
@media screen and (max-width: 750px) {
.mod-breadcrumb__item:not(:first-of-type) {
padding-left: calc(24 / 375 * 100vw);
}
}
.mod-breadcrumb__item:not(:first-of-type)::before {
content: "";
position: absolute;
top: 10px;
left: 4px;
display: inline-block;
background-color: #222222;
width: 14px;
height: 1px;
-webkit-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
@media screen and (max-width: 750px) {
.mod-breadcrumb__item:not(:first-of-type)::before {
top: calc(11 / 375 * 100vw);
left: calc(4 / 375 * 100vw);
width: calc(14 / 375 * 100vw);
}
}
.mod-breadcrumb__txt {
font-size: 13px;
}
@media screen and (max-width: 750px) {
.mod-breadcrumb__txt {
font-size: calc(13 / 375 * 100vw);
}
}
.mod-breadcrumb__txt[href] {
-webkit-transition: opacity .3s;
-o-transition: opacity .3s;
transition: opacity .3s;
}
@media (hover: hover) and (pointer: fine) {
.mod-breadcrumb__txt[href]:hover {
opacity: .7;
}
}