@charset "UTF-8";
  html {
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
word-break: normal;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
}
*, :after, :before {
box-sizing: inherit;
}
:after, :before {
text-decoration: inherit;
vertical-align: inherit;
}
* {
padding: 0;
margin: 0;
}
hr {
overflow: visible;
height: 0;
color: inherit;
}
details, main {
display: block;
}
summary {
display: list-item;
}
small {
font-size: 80%;
}
[hidden] {
display: none;
}
abbr[title] {
border-bottom: 0;
text-decoration: underline;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
a {
background-color: transparent;
}
a:active, a:hover {
outline-width: 0;
}
code, kbd, pre, samp {
font-family: monospace;
}
pre {
font-size: 1em;
}
b, strong {
font-weight: bolder;
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
table {
border-color: inherit;
text-indent: 0;
border-collapse: collapse;
}
li {
list-style-type: none;
}
iframe {
border-style: none;
}
input {
border-radius: 0;
}
[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
height: auto;
}
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
textarea {
overflow: auto;
resize: vertical;
}
button, input, optgroup, select, textarea {
font: inherit;
}
optgroup {
font-weight: 700;
}
button {
overflow: visible;
}
button, select {
text-transform: none;
}
[role=button], [type=button], [type=reset], [type=submit], button {
cursor: pointer;
}
[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
border-style: none;
padding: 0;
}
[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button:-moz-focusring {
outline: 1px dotted ButtonText;
}
[type=reset], [type=submit], button, html [type=button] {
-webkit-appearance: button;
}
button, input, select, textarea {
background-color: transparent;
border-style: none;
}
a:focus, button:focus, input:focus, select:focus, textarea:focus {
outline-width: 0;
}
select {
-moz-appearance: none;
-webkit-appearance: none;
}
select::-ms-expand {
display: none;
}
select::-ms-value {
color: currentColor;
}
legend {
border: 0;
color: inherit;
display: table;
white-space: normal;
max-width: 100%;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
color: inherit;
font: inherit;
}
[disabled] {
cursor: default;
}
img {
border-style: none;
}
progress {
vertical-align: baseline;
}
[aria-busy=true] {
cursor: progress;
}
[aria-controls] {
cursor: pointer;
}
[aria-disabled=true] {
cursor: default;
} html {
scroll-padding: 45px;
scroll-behavior: smooth;
}
body {
font-family: "hiragino-kaku-gothic-pron", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
font-style: normal;
font-size: 1rem;
line-height: 1;
letter-spacing: 0.02em;
color: #231815;
}
#wrapper {
width: 100%;
padding-bottom: 20px;
}
@media (max-width: 1024px) {
#wrapper {
padding-bottom: 5px;
}
}
.inner {
max-width: 1100px;
margin-right: auto;
margin-left: auto;
}
a:focus {
outline: 0;
}
a:hover,
a:active {
outline: 0;
}
a[href^="tel:"] {
cursor: default;
}
a {
color: #fff;
text-decoration: none;
transition: opacity 0.3s;
}
a:hover {
opacity: 0.7;
}
img {
max-width: 100%;
height: auto;
vertical-align: bottom;
}
@keyframes fuwari {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
br.sp-only {
display: none;
}
@media screen and (max-width: 768px) {
br.sp-only {
display: inline;
}
br.pc-only {
display: none;
}
} #top {
padding-bottom: 80px;
}
@media (max-width: 1024px) {
#top {
padding-bottom: 50px;
}
}
#top .top-mv {
background: url(//miracolla.jp/mcwp/wp-content/themes/miracolla/itdk/assets/img/top/top-mv-bk.png) no-repeat center bottom/cover;
width: 100%;
aspect-ratio: 1918/787;
margin-bottom: 65px;
}
@media (max-width: 1280px) {
#top .top-mv {
aspect-ratio: 1918/1200;
}
}
@media (max-width: 768px) {
#top .top-mv {
background-image: url(//miracolla.jp/mcwp/wp-content/themes/miracolla/itdk/assets/img/top/top-mv-bk-sp.png);
aspect-ratio: 83/107;
margin-bottom: 35px;
margin-top: 58px;
}
}
#top .top-mv .inner {
position: relative;
height: 100%;
}
#top .top-mv .inner .top-catch {
position: absolute;
left: 9.5%;
top: 51%;
transform: translateY(-50%);
width: clamp(110px, 93.5059760956px + 3.984063745vw, 170px);
}
@media (max-width: 768px) {
#top .top-mv .inner .top-catch {
left: 4%;
top: 8%;
transform: translateY(0);
}
}
#top .top-mv .inner .top-icon {
position: absolute;
right: 4.5%;
top: 14.5%;
width: clamp(130px, 101.1354581673px + 6.9721115538vw, 235px);
}
@media (max-width: 768px) {
#top .top-mv .inner .top-icon {
right: 4%;
top: 8%;
transform: translateY(0);
}
}
#top .btn-quest {
text-align: center;
margin-bottom: 75px;
padding: 0 15px;
}
@media (max-width: 1024px) {
#top .btn-quest {
margin-bottom: 20px;
}
}
#top .btn-quest .catch {
font-size: 0.8125rem;
letter-spacing: 0.02em;
margin-top: 12px;
line-height: 1.5;
}
#top .btn-quest .catch span {
letter-spacing: -0.5em;
}
@media (max-width: 1024px) {
#top .btn-quest .catch {
margin-top: 15px;
}
}
#top .top-blks {
position: relative;
background-color: #00b9ef;
color: #fff;
display: grid;
grid-template-columns: 510px 1fr;
gap: 0 40px;
padding: 50px 20px 30px 40px;
border-radius: 6px;
margin-bottom: 70px;
}
@media (max-width: 1110px) {
#top .top-blks {
grid-template-columns: 480px 1fr;
width: calc(100% - 20px);
}
}
@media (max-width: 1024px) {
#top .top-blks {
grid-template-columns: 1fr;
width: 100%;
border-radius: 0;
padding: 42px 20px 70px;
margin-bottom: 0;
}
#top .top-blks br.pc-only {
display: none;
}
}
#top .top-blks figure {
order: 1;
grid-row: span 2;
}
#top .top-blks figure img {
border-radius: 40px;
}
@media (max-width: 1024px) {
#top .top-blks figure {
grid-row: auto;
order: 2;
margin-bottom: 28px;
text-align: center;
}
#top .top-blks figure img {
border-radius: 6px;
}
}
#top .top-blks hgroup {
order: 2;
display: flex;
align-items: center;
gap: 14px 30px;
margin-bottom: 20px;
padding-right: 14px;
}
@media (max-width: 1024px) {
#top .top-blks hgroup {
order: 1;
flex-direction: column;
margin-bottom: 34px;
padding-right: 0;
}
}
#top .top-blks hgroup h2 {
font-size: 26px;
letter-spacing: 0.05em;
}
#top .top-blks hgroup h2::before {
content: "-";
margin-right: 5px;
display: inline-block;
transform: translateY(-1px);
}
#top .top-blks hgroup h2::after {
content: "-";
margin-left: 5px;
display: inline-block;
transform: translateY(-1px);
}
@media (max-width: 1024px) {
#top .top-blks hgroup h2 {
font-size: 22px;
letter-spacing: 0.1em;
}
}
#top .top-blks hgroup p {
flex: 1;
background-color: #fff;
border-radius: 6px;
color: #7ecef4;
font-size: 1rem;
line-height: 1;
padding: 5px 0 3px 14px;
}
@media (max-width: 1024px) {
#top .top-blks hgroup p {
border-radius: 3px;
font-size: 15px;
padding: 5px 44px 3px;
margin-right: 2px;
}
}
#top .top-blks .content {
order: 3;
}
@media (max-width: 1024px) {
#top .top-blks .content {
max-width: 750px;
margin: 0 auto;
}
}
#top .top-blks .content p {
font-size: 15px;
line-height: 1.75;
margin: 0 0 17px 7px;
}
@media (max-width: 1024px) {
#top .top-blks .content p {
text-align: justify;
font-size: 16px;
margin: 0 5px 20px;
line-height: 1.8;
}
}
#top .top-blks .viewmore {
font-size: 1rem;
letter-spacing: 0.05em;
position: absolute;
right: 35px;
bottom: 15px;
background: url(//miracolla.jp/mcwp/wp-content/themes/miracolla/itdk/assets/img/top/arrow-right.svg) no-repeat right center/20px;
padding: 9px 32px 6px 0;
}
@media (max-width: 1024px) {
#top .top-blks .viewmore {
bottom: 30px;
right: 25px;
}
}
#top .top-blks.about {
background-color: #fdd000;
grid-template-columns: 1fr 540px;
gap: 0 20px;
}
@media (max-width: 1024px) {
#top .top-blks.about {
grid-template-columns: 1fr;
}
}
#top .top-blks.about figure {
order: 2;
margin-top: 8px;
}
@media (max-width: 1024px) {
#top .top-blks.about figure {
margin-top: 0;
}
}
#top .top-blks.about hgroup {
padding-right: 13px;
margin-bottom: 0;
}
#top .top-blks.about hgroup p {
color: #fdd000;
}
@media (max-width: 1024px) {
#top .top-blks.about hgroup {
margin-bottom: 34px;
}
}
#top .top-blks.about .content p {
font-size: 16px;
font-weight: bold;
line-height: 1.8;
margin: 0 0 20px 0;
}
@media (max-width: 1024px) {
#top .top-blks.about .content p {
text-align: justify;
margin: 0 5px 20px;
line-height: 1.8;
}
}
#top .top-blks.about .about-project {
margin-top: 8px;
}
@media (max-width: 1024px) {
#top .top-blks.about .about-project {
display: block;
margin: 10px auto;
}
}
#top .top-blks.about .viewmore {
right: auto;
left: 42px;
bottom: 30px;
background: url(//miracolla.jp/mcwp/wp-content/themes/miracolla/itdk/assets/img/top/arrow-right.svg) no-repeat left center/20px;
padding: 9px 0 6px 32px;
}
@media (max-width: 1024px) {
#top .top-blks.about .viewmore {
background: url(//miracolla.jp/mcwp/wp-content/themes/miracolla/itdk/assets/img/top/arrow-right.svg) no-repeat right center/20px;
padding: 9px 32px 6px 0;
bottom: 30px;
right: 25px;
left: auto;
}
} header {
background: #7ecef4;
position: fixed;
left: 0;
top: 10px;
width: 100%;
z-index: 10;
}
header .inner {
display: grid;
align-items: center;
grid-template-columns: 300px 1fr 100px;
}
header .inner h1 {
margin-bottom: 4px;
text-align: center;
}
@media screen and (max-width: 1024px) {
header .inner h1 {
text-align: left;
margin-left: clamp(12px, -0.7692307692px + 3.0769230769vw, 30px);
margin-bottom: 0;
}
header .inner h1 img {
width: 210px;
}
}
header .inner nav ul {
display: flex;
}
header .inner nav ul li {
width: 25%;
text-align: center;
}
header .inner nav ul li:first-of-type a {
border-left: 1px solid #fff;
}
header .inner nav ul li a {
display: block;
padding: 23px 0 20px;
border-right: 1px solid #fff;
font-size: 0.9375rem;
}
header .inner .insta-blk a {
display: block;
text-align: center;
}
header .ham-btn {
display: none;
}
header .sp-menu {
position: fixed;
top: 0;
right: 0;
z-index: 100;
width: 100%;
height: 100vh;
background: #7ecef4;
visibility: hidden;
opacity: 0;
transform: translateY(-100%);
transition: 0.7s ease;
}
header .sp-menu .ttl-logo {
padding: 15px 0 15px clamp(12px, -0.7692307692px + 3.0769230769vw, 30px);
border-bottom: 1px solid #fff;
}
header .sp-menu ul {
margin-top: 20px;
}
header .sp-menu ul li {
width: 95%;
margin: 0 auto;
}
header .sp-menu ul li:not(:last-of-type) {
border-bottom: 1px solid #a5ddf7;
}
header .sp-menu ul li a {
font-size: 22px;
letter-spacing: 0.1em;
display: block;
padding: 24px 0 20px;
text-align: center;
}
header .sp-menu.is-active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
@media screen and (max-width: 1024px) {
header {
top: 0;
padding: 13px 0 14px;
}
header nav {
display: none;
visibility: hidden;
}
header .insta-blk {
display: none;
visibility: hidden;
}
header .ham-btn {
display: block;
position: fixed;
right: 1px;
top: 10px;
z-index: 101;
width: 70px;
height: 40px;
}
header .ham-btn.is-active .ham-line {
background-color: transparent;
}
header .ham-btn.is-active .ham-line::before {
top: 0;
transform: rotate(15deg);
}
header .ham-btn.is-active .ham-line::after {
top: 0;
transform: rotate(-15deg);
}
header .ham-line {
display: block;
width: 100%;
height: 2px;
position: absolute;
left: 50%;
transform: translateX(-50%);
background-color: rgba(255, 255, 255, 0.9);
transition: 0.4s;
}
header .ham-line::before, header .ham-line::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.9);
transition: inherit;
}
header .ham-line::before {
top: -10px;
}
header .ham-line::after {
top: 10px;
}
} footer {
max-width: 1000px;
margin: 0 auto;
background-color: #00b9ef;
color: #fff;
border-radius: 70px;
padding: 55px 70px 35px;
}
@media (max-width: 1024px) {
footer {
border-radius: 7px;
padding: clamp(11px, -8.6819672131px + 4.7540983607vw, 40px) 10px clamp(22px, 9.7836065574px + 2.9508196721vw, 40px);
width: calc(100% - 10px);
}
}
footer .foot-top {
display: flex;
align-items: center;
gap: 0 40px;
margin-bottom: 40px;
}
@media (max-width: 1024px) {
footer .foot-top {
flex-direction: column;
margin-bottom: 32px;
}
}
footer .foot-top .tel-blk {
border: 1px solid #fff;
border-radius: 4px;
padding: 27px 22px 19px 27px;
}
@media (max-width: 1024px) {
footer .foot-top .tel-blk {
max-width: 535px;
width: 100%;
border: 2px solid #fff;
border-radius: 6px 6px 0 0;
text-align: center;
padding: 22px 18px 24px;
}
}
footer .foot-top .tel-blk .ttl {
font-size: 36px;
margin-bottom: 16px;
line-height: 1.5;
}
@media (max-width: 1024px) {
footer .foot-top .tel-blk .ttl {
font-size: 26px;
}
}
@media (max-width: 768px) {
footer .foot-top .tel-blk .ttl .nn {
display: none;
}
footer .foot-top .tel-blk .ttl .lt {
letter-spacing: -0.5em;
}
}
footer .foot-top .tel-blk .exp {
letter-spacing: 0;
line-height: 1.5;
margin-bottom: 18px;
font-size: 0.9375rem;
}
@media (max-width: 1024px) {
footer .foot-top .tel-blk .exp {
text-align: left;
margin-bottom: 24px;
}
}
footer .foot-top .tel-blk .tel {
font-size: 50px;
letter-spacing: 0.05em;
background: url(//miracolla.jp/mcwp/wp-content/themes/miracolla/itdk/assets/img/common/ico-tel.svg) no-repeat left top 6px/48px;
padding-left: 63px;
}
@media (max-width: 1024px) {
footer .foot-top .tel-blk .tel {
background: url(//miracolla.jp/mcwp/wp-content/themes/miracolla/itdk/assets/img/common/ico-tel.svg) no-repeat left top 4px/32px;
font-size: 33px;
letter-spacing: 0.02em;
padding-left: 43px;
white-space: nowrap;
}
}
footer .foot-top .form-blk {
position: relative;
background: #f39800;
padding: 20px 32px;
border-radius: 4px;
display: block;
font-size: 1rem;
line-height: 2;
}
@media (max-width: 1024px) {
footer .foot-top .form-blk {
width: 100%;
max-width: 535px;
border-radius: 0 0 6px 6px;
border: 2px solid #fff;
border-top: none;
padding: 12px 0;
}
footer .foot-top .form-blk .nn {
display: none;
}
footer .foot-top .form-blk .pc-only {
display: none;
}
footer .foot-top .form-blk .txt {
display: block;
background: url(//miracolla.jp/mcwp/wp-content/themes/miracolla/itdk/assets/img/common/ico-mail.svg) no-repeat left top 6px/30px;
font-size: 18px;
font-weight: bold;
width: -moz-fit-content;
width: fit-content;
margin: 0 auto;
padding-left: 45px;
}
}
footer .foot-top .form-blk::after {
content: "→";
position: absolute;
right: -5px;
bottom: 12px;
font-weight: bold;
font-size: 1.5rem;
}
@media (max-width: 1024px) {
footer .foot-top .form-blk::after {
display: none;
}
}
footer .foot-btm {
display: grid;
grid-template-columns: 200px 1fr;
width: -moz-fit-content;
width: fit-content;
margin: 0 auto;
gap: 28px 20px;
align-items: center;
}
@media (max-width: 1024px) {
footer .foot-btm {
display: block;
max-width: 535px;
width: 100%;
}
footer .foot-btm .foot-logo {
display: block;
margin: 0 auto 20px;
padding-right: 7px;
}
}
footer .foot-btm .link-blk {
display: flex;
gap: 15px 20px;
}
@media (max-width: 1024px) {
footer .foot-btm .link-blk {
gap: 0 50px;
display: block;
width: -moz-fit-content;
width: fit-content;
margin: 0 auto;
}
}
footer .foot-btm .link-blk ul {
display: flex;
gap: 0 20px;
margin-top: 2px;
}
@media (max-width: 1024px) {
footer .foot-btm .link-blk ul {
justify-content: center;
gap: 20px;
margin-bottom: 15px;
}
footer .foot-btm .link-blk ul:last-of-type {
margin-bottom: 40px;
}
}
footer .foot-btm .link-blk ul li a {
font-size: 14px;
}
footer .foot-btm .address {
grid-column: span 2;
padding-top: 8px;
}
@media (max-width: 1024px) {
footer .foot-btm .address {
grid-column: unset;
text-align: center;
}
}
footer .foot-btm .address .company {
margin-bottom: 18px;
}
@media (max-width: 1024px) {
footer .foot-btm .address .company {
margin-bottom: 20px;
}
}
footer .foot-btm .address .info {
display: flex;
gap: 10px 15px;
}
@media (max-width: 1024px) {
footer .foot-btm .address .info {
flex-direction: column;
font-size: 14px;
}
} #wrapper:has(#quest) {
background: url(//miracolla.jp/mcwp/wp-content/themes/miracolla/itdk/assets/img/quest/quest-bk.jpg) repeat left top 65px/80% fixed;
}
@media (max-width: 1024px) {
#wrapper:has(#quest) {
background-size: 120%;
}
}
@media (max-width: 768px) {
#wrapper:has(#quest) {
background-size: 170%;
}
}
#quest {
min-height: 75vh;
padding-top: clamp(110px, 82.8524590164px + 6.5573770492vw, 150px);
color: #231815;
}
@media (max-width: 1024px) {
#quest {
min-height: unset;
padding-bottom: 180px;
}
}
#quest h2 {
text-align: center;
margin: 0 40px 50px;
}
#quest .case-list {
max-width: 1040px;
margin: 0 auto;
padding: 0 15px;
}
#quest .case-list li a {
color: #231815;
display: flex;
align-items: center;
gap: 0 22px;
background-color: #fff;
border: 3px solid #00a0e9;
border-radius: 45px;
padding: 16px 10px 15px 35px;
}
@media (max-width: 1024px) {
#quest .case-list li a {
border-radius: 20px;
padding: 20px 10px 18px 40px;
background: #fff url(//miracolla.jp/mcwp/wp-content/themes/miracolla/itdk/assets/img/quest/arrow-right.svg) no-repeat right 20px top 32px/24px;
}
}
#quest .case-list li a .num {
width: 92px;
height: 92px;
border: 3px solid #00a0e9;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
text-align: center;
font-size: 30px;
letter-spacing: 0;
padding-top: 7px;
padding-left: 1px;
}
#quest .case-list li a .num span {
display: block;
font-size: 20px;
}
@media (max-width: 1024px) {
#quest .case-list li a .num {
position: absolute;
top: 19px;
left: 19px;
background: #00a0e9;
color: #fff;
border: none;
border-radius: 14px;
width: 61px;
height: 61px;
font-size: 24px;
font-weight: bold;
padding-left: 0;
padding-top: 4px;
gap: 5px;
}
#quest .case-list li a .num span {
font-size: 14px;
font-weight: normal;
}
}
#quest .case-list li a .content-blk {
margin-top: 4px;
}
#quest .case-list li a .content-blk .company {
font-size: 33px;
letter-spacing: 0.05em;
margin-bottom: 14px;
}
@media (max-width: 1024px) {
#quest .case-list li a .content-blk .company {
font-size: 15px;
margin-left: 65px;
margin-bottom: 22px;
color: #999;
}
#quest .case-list li a .content-blk .company .type {
margin-left: 1px;
}
}
#quest .case-list li a .content-blk .company .name {
color: #00a0e9;
position: relative;
}
#quest .case-list li a .content-blk .company .name::after {
content: ":";
display: inline-block;
color: #231815;
margin: 0 10px;
transform: translateY(-2px);
}
@media (max-width: 1024px) {
#quest .case-list li a .content-blk .company .name {
display: block;
font-size: 24px;
margin-bottom: 12px;
}
#quest .case-list li a .content-blk .company .name::after {
display: none;
}
}
#quest .case-list li a .content-blk .lead {
font-size: 15px;
line-height: 1.5;
}
#quest.case {
min-height: unset;
padding-top: 90px;
padding-bottom: 5px;
margin-bottom: 120px;
position: relative;
}
@media (max-width: 1024px) {
#quest.case {
margin-bottom: 70px;
padding-top: 75px;
padding-bottom: 60px;
max-width: 600px;
}
}
#quest.case .left-ttl {
position: absolute;
top: 105px;
left: 0;
}
@media (max-width: 1024px) {
#quest.case .left-ttl {
position: static;
}
}
#quest.case .left-ttl h2 {
text-align: left;
margin: 0 0 30px;
}
@media (max-width: 1024px) {
#quest.case .left-ttl h2 {
position: absolute;
bottom: 0;
left: 15px;
margin: 0;
}
#quest.case .left-ttl h2 img {
width: 135px;
}
}
#quest.case .left-ttl .ttl {
color: #00a0e9;
font-size: 20px;
text-align: center;
}
@media (max-width: 1024px) {
#quest.case .left-ttl .ttl {
background-color: #00a0e9;
border-radius: 3px;
color: #fff;
width: -moz-fit-content;
width: fit-content;
margin: 0 0 14px 5px;
padding: 7px 20px;
font-size: 18px;
}
}
#quest.case .btm-letter {
position: absolute;
bottom: 5px;
right: 0;
color: #231815;
background: #ffe100;
padding: 15px 8px 13px 15px;
font-size: 1.5rem;
letter-spacing: 0;
border-radius: 10px;
}
@media (max-width: 1024px) {
#quest.case .btm-letter {
font-size: 17px;
border-radius: 3px;
padding: 10px 18px 10px 20px;
right: 5px;
bottom: 0;
}
}
#quest.case .over-wrap {
position: relative;
z-index: 2;
max-width: 600px;
margin: 0 auto;
background-color: #fff;
border: 1px solid #7ecef4;
border-radius: 4px;
padding: 20px;
}
#quest.case .over-wrap .flick {
display: none;
}
@media (max-width: 1024px) {
#quest.case .over-wrap .flick {
display: block;
position: absolute;
left: calc(50% - 37px);
top: calc(50% - 37px);
z-index: 8;
animation: fuwari 1s 1.5s forwards;
}
}
@keyframes fuwari {
0% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateX(-50px);
}
}
@media (max-width: 1024px) {
#quest.case .over-wrap {
padding: 10px;
width: calc(100% - 10px);
}
}
#quest.case .over-wrap .swiper-button-prev,
#quest.case .over-wrap .swiper-button-next {
height: 60px;
width: 60px;
}
@media (max-width: 1024px) {
#quest.case .over-wrap .swiper-button-prev,
#quest.case .over-wrap .swiper-button-next {
display: none;
}
}
#quest.case .over-wrap .swiper-button-prev {
left: -85px;
}
#quest.case .over-wrap .swiper-button-next {
right: -90px;
}
#quest.case .over-wrap .swiper-button-prev::after,
#quest.case .over-wrap .swiper-button-next::after {
background-repeat: no-repeat;
background-size: contain;
content: "";
height: 60px;
margin: auto;
width: 60px;
}
#quest.case .over-wrap .swiper-button-prev::after {
background-image: url(//miracolla.jp/mcwp/wp-content/themes/miracolla/itdk/assets/img/quest/arrow-left.svg);
}
#quest.case .over-wrap .swiper-button-next::after {
background-image: url(//miracolla.jp/mcwp/wp-content/themes/miracolla/itdk/assets/img/quest/arrow-right.svg);
}
#quest.case .over-wrap .swiper-slide img {
height: auto;
width: 100%;
}