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

   *,
::before,
::after {
box-sizing: border-box;
border-style: solid;
border-width: 0;
}   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;
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-top-width: 1px;
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] {
-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;
}   svg,
img,
embed,
object,
iframe {
vertical-align: bottom;
}   button,
input,
optgroup,
textarea {
-webkit-appearance: none; -moz-appearance: none;
appearance: none;
vertical-align: middle;
color: inherit;
font: inherit;
background: transparent;
padding: 0;
margin: 0;
border-radius: 0;
text-align: inherit;
text-transform: inherit; } [type=checkbox] {
-webkit-appearance: checkbox;
-moz-appearance: checkbox;
appearance: checkbox;
}
[type=radio] {
-webkit-appearance: radio;
-moz-appearance: radio;
appearance: radio;
} button,
[type=button],
[type=reset],
[type=submit] {
cursor: pointer;
}
button:disabled,
[type=button]:disabled,
[type=reset]:disabled,
[type=submit]:disabled {
cursor: default;
} :-moz-focusring {
outline: auto;
}
select:disabled {
opacity: inherit;
} option {
padding: 0;
} fieldset {
margin: 0;
padding: 0;
min-width: 0;
}
legend {
padding: 0;
} 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]:focus {
outline: auto;
}   table {
border-color: inherit; border-collapse: collapse;
}
caption {
text-align: left;
}
td,
th {
vertical-align: top;
padding: 0;
}
th {
text-align: left;
font-weight: bold;
}
@media screen and (min-width: 0px) and (max-width: 750px) {
.tb:not(.sp) {
display: none;
}
.pc:not(.sp) {
display: none;
}
}
@media screen and (min-width: 751px) and (max-width: 1200px) {
.sp:not(.tb) {
display: none;
}
.pc:not(.tb) {
display: none;
}
}
@media screen and (min-width: 1201px) {
.sp:not(.pc) {
display: none;
}
.tb:not(.pc) {
display: none;
}
}
:root {
--color-main: #4a72e9;
--color-sub: #ebeff5;
--grad01: linear-gradient(to right, #a671cb 0%, #696ae9 30%, #4b76ea 70%, #63a9eb 100%);
}
html {
font-size: 6.25%;
}
@media (max-width: 750px) {
html {
font-size: calc(100vw / 750);
}
}
@media (min-width: 751px) and (max-width: 1200px) {
html {
font-size: calc(100vw / 750);
}
}
@media (min-width: 1201px) {
html {
font-size: 6.25%;
}
}
body {
-webkit-text-size-adjust: 100%;
font-feature-settings: "palt";
color: #111;
font-family: "Noto Sans JP", sans-serif;
font-size: 16px;
font-weight: 500;
letter-spacing: 0.1em;
}
body.nav-opened {
overflow: hidden;
}
.all-wrapper {
position: relative;
padding-top: 60px;
z-index: 0;
}
@media screen and (min-width: 0px) and (max-width: 750px) {
.all-wrapper {
padding-top: 90rem;
}
}
main {
position: relative;
z-index: 0;
}
#top main .main-visual {
position: relative;
padding: 100px 0 0;
height: 600px;
overflow: hidden;
text-align: center;
background-color: var(--color-sub);
}
#top main .main-visual::before {
content: "";
display: block;
position: absolute;
top: -21px;
left: calc(50% - 902px);
width: 1656px;
height: 621px;
background: url(//www.repeatalk-info.net/assets/images/top/mv-image.png) no-repeat center/contain;
z-index: 0;
}
#top main .main-visual > * {
position: relative;
z-index: 1;
}
#top main .main-visual .text1 {
font-size: 26px;
font-weight: bold;
line-height: 50px;
}
#top main .main-visual .repeatalk {
margin-top: 30px;
}
#top main .main-visual .repeatalk img {
width: 277px;
}
#top main .main-visual section.trial {
margin-top: 108px;
}
#top main .main-visual section.trial h2 {
position: relative;
color: var(--color-main);
font-size: 18px;
line-height: 38px;
}
#top main .main-visual section.trial h2::before, #top main .main-visual section.trial h2::after {
content: "";
display: inline-block;
width: 2px;
height: 39px;
margin: 0 15px;
vertical-align: middle;
background-color: var(--color-main);
transform: rotate(-22deg);
}
#top main .main-visual section.trial h2::after {
transform: rotate(22deg);
}
#top main .main-visual section.trial ul {
display: flex;
justify-content: center;
gap: 0 30px;
margin-top: 22px;
}
#top main .main-visual section.trial ul li a {
display: block;
width: 300px;
border-radius: 40px;
text-align: left;
color: #fff;
font-size: 20px;
font-weight: bold;
line-height: 80px;
transition: opacity 200ms;
}
#top main .main-visual section.trial ul li a:hover {
opacity: 0.7;
}
#top main .main-visual section.trial ul li a::after {
content: "";
display: inline-block;
width: 12px;
height: 10px;
margin-left: 10px;
vertical-align: 2px;
background: url(//www.repeatalk-info.net/assets/images/top/mv-arrow.png) no-repeat center/contain;
}
#top main .main-visual section.trial ul li.request a {
padding-left: 77px;
background: url(//www.repeatalk-info.net/assets/images/top/mv-icon01.png) no-repeat 21px center/44px auto, linear-gradient(to right, #25272f, #454545);
}
#top main .main-visual section.trial ul li.trial a {
padding-left: 80px;
background: url(//www.repeatalk-info.net/assets/images/top/mv-icon02.png) no-repeat 25px center/40px auto, linear-gradient(to right, #25272f, #454545);
}
#top main .results {
padding: 40px 0 30px;
}
#top main .results h2 {
text-align: center;
color: var(--color-main);
font-size: 26px;
font-weight: bold;
line-height: 44px;
}
#top main .results h2 strong {
text-decoration: underline;
text-underline-offset: 12px;
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#top main .results h2 {
font-size: 30rem;
line-height: 50rem;
}
#top main .results h2 strong {
text-underline-offset: 10rem;
}
}
#top main .results .images {
position: relative;
width: 100%;
height: 42px;
margin-top: 30px;
overflow: hidden;
}
#top main .results .images li {
position: absolute;
top: 0;
left: 0;
}
#top main .results .images li img {
width: auto;
height: 42px;
}
#top main .problems h2 {
text-align: center;
color: var(--color-main);
font-size: 26px;
font-weight: bold;
line-height: 44px;
color: #fff;
padding-top: 38px;
padding-bottom: 30px;
background-color: var(--color-main);
}
#top main .problems h2 strong {
text-decoration: underline;
text-underline-offset: 12px;
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#top main .problems h2 {
font-size: 30rem;
line-height: 50rem;
}
#top main .problems h2 strong {
text-underline-offset: 10rem;
}
}
#top main .problems dl {
padding-left: max(40px, 50vw - 545px);
padding-right: max(40px, 50vw - 545px);
display: flex;
justify-content: space-between;
padding-bottom: 54px;
position: relative;
background-color: var(--color-main);
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#top main .problems dl {
padding-left: 40rem;
padding-right: 40rem;
}
}
#top main .problems dl::after {
content: "";
display: block;
position: absolute;
left: calc(50% - 40px);
bottom: -40px;
border-top: 40px solid var(--color-main);
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: none;
}
#top main .problems dl div {
position: relative;
width: 460px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
#top main .problems dl div:first-child::before {
content: "";
display: block;
position: absolute;
top: 30px;
right: -30px;
width: 160px;
height: 248px;
background: url(//www.repeatalk-info.net/assets/images/top/problems-image01.png) no-repeat center/contain;
}
#top main .problems dl div:last-child::before {
content: "";
display: block;
position: absolute;
top: 48px;
left: -51px;
width: 145px;
height: 231px;
background: url(//www.repeatalk-info.net/assets/images/top/problems-image02.png) no-repeat center/contain;
}
#top main .problems dl div dt {
border-radius: 10px 10px 0 0;
text-align: center;
color: var(--color-main);
font-size: 22px;
font-weight: bold;
line-height: 60px;
background-color: var(--color-sub);
}
#top main .problems dl div dd {
padding: 32px 20px;
border-radius: 0 0 10px 10px;
background-color: #fff;
}
#top main .problems dl div dd ul li {
font-size: 18px;
line-height: 34px;
}
#top main .problems dl div dd ul li::before {
content: "・";
}
#top main .problems dl div:last-child dd {
padding-left: 98px;
}
#top main .problems .text1 {
text-align: center;
color: var(--color-main);
font-size: 26px;
font-weight: bold;
line-height: 44px;
padding-top: 77px;
padding-bottom: 50px;
}
#top main .problems .text1 strong {
text-decoration: underline;
text-underline-offset: 12px;
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#top main .problems .text1 {
font-size: 30rem;
line-height: 50rem;
}
#top main .problems .text1 strong {
text-underline-offset: 10rem;
}
}
@media screen and (min-width: 751px) and (max-width: 1200px) {
#top main .problems dl {
display: block;
}
#top main .problems dl::after {
left: calc(50% - 40px);
bottom: -40px;
}
#top main .problems dl div {
width: 500px;
margin: 0 auto;
}
#top main .problems dl div + div {
margin-top: 45px;
}
#top main .problems dl div:first-child::before {
top: auto;
right: 24px;
bottom: -36px;
width: 149px;
height: 231px;
}
#top main .problems dl div:last-child::before {
top: auto;
left: -20px;
bottom: -44px;
width: 149px;
height: 238px;
}
#top main .problems dl div:last-child dd {
padding-left: 160px;
}
}
#top main .about {
padding-left: max(40px, 50vw - 600px);
padding-right: max(40px, 50vw - 600px);
padding-top: 40px;
padding-bottom: 72px;
background-color: var(--color-sub);
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#top main .about {
padding-left: 40rem;
padding-right: 40rem;
}
}
#top main .about .block1 {
padding: 60px 70px;
border-radius: 10px;
background-color: #fff;
}
#top main .about .block1 h2 {
text-align: center;
font-size: 32px;
font-weight: bold;
line-height: 40px;
}
#top main .about .block1 h2 strong {
display: inline-block;
margin: 0 8px;
padding: 3px 8px 5px;
vertical-align: top;
color: #fff;
line-height: 32px;
background-color: var(--color-main);
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#top main .about .block1 h2 {
font-size: 42rem;
line-height: 60rem;
}
#top main .about .block1 h2 strong {
margin: 0 10rem;
padding: 3rem 10rem 5rem;
line-height: 42rem;
}
}
#top main .about .block1 .body {
display: flex;
justify-content: space-between;
margin-top: 60px;
}
#top main .about .block1 .body .slides {
position: relative;
width: 480px;
}
#top main .about .block1 .body .slides .images {
position: relative;
width: 100%;
height: 320px;
z-index: 0;
}
#top main .about .block1 .body .slides .images li {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 320px;
opacity: 0;
transition: opacity 1000ms;
}
#top main .about .block1 .body .slides .images li.current {
opacity: 1;
}
#top main .about .block1 .body .slides .images li img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}
#top main .about .block1 .body .slides .prev,
#top main .about .block1 .body .slides .next {
position: absolute;
top: calc(160px - 20px);
left: 10px;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.3);
cursor: pointer;
transition: background-color 200ms;
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#top main .about .block1 .body .slides .prev,
#top main .about .block1 .body .slides .next {
top: 180rem;
left: 10rem;
width: 50rem;
height: 50rem;
}
}
#top main .about .block1 .body .slides .prev::before,
#top main .about .block1 .body .slides .next::before {
content: "";
position: absolute;
top: 15px;
left: 17px;
width: 10px;
height: 10px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(45deg);
transform-origin: center;
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#top main .about .block1 .body .slides .prev::before,
#top main .about .block1 .body .slides .next::before {
top: 16rem;
left: 20rem;
width: 17rem;
height: 17rem;
}
}
#top main .about .block1 .body .slides .prev:hover,
#top main .about .block1 .body .slides .next:hover {
background-color: rgba(0, 0, 0, 0.6);
}
#top main .about .block1 .body .slides .next {
left: auto;
right: 10px;
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#top main .about .block1 .body .slides .next {
right: 10rem;
}
}
#top main .about .block1 .body .slides .next::before {
left: auto;
right: 17px;
transform: rotate(-135deg);
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#top main .about .block1 .body .slides .next::before {
right: 20rem;
}
}
#top main .about .block1 .body .slides .indicators {
margin-top: 20px;
text-align: center;
font-size: 0;
}
#top main .about .block1 .body .slides .indicators li {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 5px;
border-radius: 50%;
background-color: var(--color-sub);
}
#top main .about .block1 .body .slides .indicators li.current {
background-color: var(--color-main);
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#top main .about .block1 .body .slides .indicators {
margin-top: 35rem;
}
#top main .about .block1 .body .slides .indicators li {
width: 30rem;
height: 30rem;
margin: 0 15rem;
}
}
#top main .about .block1 .body .texts {
width: 520px;
padding-top: 10px;
}
#top main .about .block1 .body .texts p {
text-align: justify;
font-size: 16px;
line-height: 30px;
}
#top main .about .block1 .body .texts p + p {
margin-top: 20px;
}
#top main .about .graphs {
padding-top: 80px;
}
#top main .about .graphs > p {
text-align: center;
color: var(--color-main);
font-size: 26px;
font-weight: bold;
line-height: 44px;
color: #111;
}
#top main .about .graphs > p strong {
text-decoration: underline;
text-underline-offset: 12px;
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#top main .about .graphs > p {
font-size: 30rem;
line-height: 50rem;
}
#top main .about .graphs > p strong {
text-underline-offset: 10rem;
}
}
#top main .about .graphs ul {
display: flex;
justify-content: center;
gap: 0 40px;
margin-top: 40px;
}
#top main .about .graphs ul li {
width: 400px;
height: 360px;
padding: 25px 0 0 30px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
background-color: #fff;
}
#top main .about .graphs ul li img {
width: 299px;
}
#top main .about .graphs ul li:last-child {
padding: 25px 0 0 65px;
}
#top main .about .graphs ul li:last-child img {
width: 258px;
}
#top main .about .point {
padding-top: 58px;
}
#top main .about .point h3 {
text-align: center;
color: var(--color-main);
font-size: 26px;
font-weight: bold;
line-height: 44px;
font-size: 30px;
}
#top main .about .point h3 strong {
text-decoration: underline;
text-underline-offset: 12px;
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#top main .about .point h3 {
font-size: 30rem;
line-height: 50rem;
}
#top main .about .point h3 strong {
text-underline-offset: 10rem;
}
}
#top main .about .point .text1 {
width: 870px;
margin: 20px auto 0;
font-size: 20px;
font-weight: bold;
line-height: 44px;
white-space: nowrap;
}
#top main .about .point .text1 li::before {
content: "・";
}
#top main .about .point .text1 strong {
color: var(--color-main);
}
#top main .about .point .text2 {
text-align: center;
color: var(--color-main);
font-size: 26px;
font-weight: bold;
line-height: 44px;
color: #111;
position: relative;
margin-top: 100px;
}
#top main .about .point .text2 strong {
text-decoration: underline;
text-underline-offset: 12px;
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#top main .about .point .text2 {
font-size: 30rem;
line-height: 50rem;
}
#top main .about .point .text2 strong {
text-underline-offset: 10rem;
}
}
#top main .about .point .text2::before {
content: "";
position: absolute;
top: -74px;
left: calc(50% - 40px);
border-top: 40px solid var(--color-main);
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: none;
}
@media screen and (min-width: 751px) and (max-width: 1200px) {
#top main .about .block1 {
padding: 40px;
}
#top main .about .block1 .body {
gap: 0 30px;
}
#top main .about .block1 .body .slides {
width: 320px;
}
#top main .about .block1 .body .slides .images {
height: 200px;
}
#top main .about .block1 .body .slides .images li {
height: 200px;
}
#top main .about .block1 .body .texts {
width: calc(100% - 350px);
}
#top main .about .graphs ul {
flex-direction: column;
align-items: center;
gap: 40px 0;
}
#top main .about .point {
padding-top: 58px;
}
#top main .about .point h3 {
text-align: center;
color: var(--color-main);
font-size: 26px;
font-weight: bold;
line-height: 44px;
font-size: 30px;
}
#top main .about .point h3 strong {
text-decoration: underline;
text-underline-offset: 12px;
}
}
@media screen and (min-width: 751px) and (max-width: 1200px) and (min-width: 0px) and (max-width: 750px) {
#top main .about .point h3 {
font-size: 30rem;
line-height: 50rem;
}
#top main .about .point h3 strong {
text-underline-offset: 10rem;
}
}
@media screen and (min-width: 751px) and (max-width: 1200px) {
#top main .about .point .text1 {
width: 700px;
font-size: 17px;
}
}
#top main .flow1 {
padding-top: 80px;
padding-bottom: 50px;
}
#top main .flow1 hgroup p {
text-align: center;
font-size: 18px;
font-weight: bold;
line-height: 1em;
}
#top main .flow1 hgroup h2 {
text-align: center;
font-size: 32px;
font-weight: bold;
line-height: 40px;
margin-top: 30px;
}
#top main .flow1 hgroup h2 strong {
display: inline-block;
margin: 0 8px;
padding: 3px 8px 5px;
vertical-align: top;
color: #fff;
line-height: 32px;
background-color: var(--color-main);
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#top main .flow1 hgroup h2 {
font-size: 42rem;
line-height: 60rem;
}
#top main .flow1 hgroup h2 strong {
margin: 0 10rem;
padding: 3rem 10rem 5rem;
line-height: 42rem;
}
}
#top main .flow1 ol {
padding-left: max(40px, 50vw - 548.5px);
padding-right: max(40px, 50vw - 548.5px);
display: flex;
justify-content: space-between;
margin-top: 40px;
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#top main .flow1 ol {
padding-left: 40rem;
padding-right: 40rem;
}
}
@media screen and (min-width: 751px) and (max-width: 1200px) {
#top main .flow1 ol {
width: 1100px;
margin: 0 50%;
padding: 0;
transform: translate(-50%, 0) scale(0.65);
}
}
#top main .flow1 ol li {
position: relative;
}
#top main .flow1 ol li:nth-child(1):after {
content: "";
position: absolute;
top: 43px;
right: -130px;
width: 75px;
height: 68px;
background: url(//www.repeatalk-info.net/assets/images/top/flow1-arrow01.png) no-repeat center/contain;
}
#top main .flow1 ol li:nth-child(2):after {
content: "";
position: absolute;
top: 43px;
right: -150px;
width: 115px;
height: 115px;
background: url(//www.repeatalk-info.net/assets/images/top/flow1-arrow02.png) no-repeat center/contain;
}
#top main .flow1 ol li img {
width: 247px;
}
#top main .flow1 ol li p {
margin-top: 5px;
padding-left: 30px;
text-align: center;
font-size: 16px;
line-height: 30px;
}
#top main .flow1 .text1 {
max-width: 900px;
margin: 40px auto 0;
padding: 38px 56px;
border-radius: 20px;
text-align: justify;
font-size: 16px;
line-height: 30px;
background-color: var(--color-sub);
}
@media screen and (max-width: 980px) {
#top main .flow1 .text1 {
margin: 40px 40px 0;
}
}
#top main .merits {
padding-top: 50px;
padding-bottom: 50px;
}
#top main .merits h2 {
text-align: center;
font-size: 32px;
font-weight: bold;
line-height: 40px;
}
#top main .merits h2 strong {
display: inline-block;
margin: 0 8px;
padding: 3px 8px 5px;
vertical-align: top;
color: #fff;
line-height: 32px;
background-color: var(--color-main);
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#top main .merits h2 {
font-size: 42rem;
line-height: 60rem;
}
#top main .merits h2 strong {
margin: 0 10rem;
padding: 3rem 10rem 5rem;
line-height: 42rem;
}
}
#top main .merits dl {
padding-left: max(40px, 50vw - 600px);
padding-right: max(40px, 50vw - 600px);
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 25px 45px;
margin-top: 56px;
text-align: center;
font-size: 0;
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#top main .merits dl {
padding-left: 40rem;
padding-right: 40rem;
}
}
#top main .merits dl div {
width: calc((100% - 90px) / 3);
}
@media screen and (min-width: 751px) and (max-width: 1200px) {
#top main .merits dl div {
width: calc(50% - 45px);
}
}
#top main .merits dl div dt img {
width: 100%;
}
#top main .merits dl div dt span {
display: inline-block;
margin-top: 30px;
text-align: center;
font-size: 16px;
font-weight: bold;
line-height: 1em;
}
#top main .merits dl div dd {
margin-top: 24px;
text-align: left;
font-size: 14px;
line-height: 26px;
}
#top main .cases {
padding-top: 50px;
padding-bottom: 50px;
}
#top main .cases h2 {
text-align: center;
font-size: 32px;
font-weight: bold;
line-height: 40px;
}
#top main .cases h2 strong {
display: inline-block;
margin: 0 8px;
padding: 3px 8px 5px;
vertical-align: top;
color: #fff;
line-height: 32px;
background-color: var(--color-main);
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#top main .cases h2 {
font-size: 42rem;
line-height: 60rem;
}
#top main .cases h2 strong {
margin: 0 10rem;
padding: 3rem 10rem 5rem;
line-height: 42rem;
}
}
#top main .cases ul {
padding-left: max(40px, 50vw - 600px);
padding-right: max(40px, 50vw - 600px);
margin-top: 60px;
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#top main .cases ul {
padding-left: 40rem;
padding-right: 40rem;
}
}
#top main .cases .view-list {
display: flex;
justify-content: center;
margin-top: 80px;
}
#top main .cases .view-list a {
display: block;
width: 220px;
text-align: center;
color: #fff;
font-size: 16px;
font-weight: bold;
line-height: 60px;
background: var(--grad01);
transition: opacity 200ms;
}
#top main .cases .view-list a:hover {
opacity: 0.7;
}
#top main .interview {
padding-left: max(40px, 50vw - 450px);
padding-right: max(40px, 50vw - 450px);
padding-top: 50px;
padding-bottom: 50px;
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#top main .interview {
padding-left: 40rem;
padding-right: 40rem;
}
}
#top main .interview h2 {
text-align: center;
font-size: 32px;
font-weight: bold;
line-height: 40px;
}
#top main .interview h2 strong {
display: inline-block;
margin: 0 8px;
padding: 3px 8px 5px;
vertical-align: top;
color: #fff;
line-height: 32px;
background-color: var(--color-main);
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#top main .interview h2 {
font-size: 42rem;
line-height: 60rem;
}
#top main .interview h2 strong {
margin: 0 10rem;
padding: 3rem 10rem 5rem;
line-height: 42rem;
}
}
#top main .interview .movie {
display: flex;
justify-content: center;
margin-top: 45px;
}
#top main .interview p {
max-width: 800px;
margin: 30px auto 0;
font-size: 16px;
line-height: 30px;
}
#top main .flow2 {
padding-left: max(40px, 50vw - 600px);
padding-right: max(40px, 50vw - 600px);
padding-top: 115px;
padding-bottom: 80px;
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#top main .flow2 {
padding-left: 40rem;
padding-right: 40rem;
}
}
#top main .flow2 h2 {
text-align: center;
font-size: 32px;
font-weight: bold;
line-height: 40px;
}
#top main .flow2 h2 strong {
display: inline-block;
margin: 0 8px;
padding: 3px 8px 5px;
vertical-align: top;
color: #fff;
line-height: 32px;
background-color: var(--color-main);
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#top main .flow2 h2 {
font-size: 42rem;
line-height: 60rem;
}
#top main .flow2 h2 strong {
margin: 0 10rem;
padding: 3rem 10rem 5rem;
line-height: 42rem;
}
}
#top main .flow2 ol {
display: flex;
flex-wrap: wrap;
position: relative;
margin-top: 55px;
}
#top main .flow2 ol li {
display: flex;
align-items: flex-start;
position: relative;
padding-bottom: 30px;
}
#top main .flow2 ol li::before {
content: "";
position: relative;
width: 70px;
height: 70px;
background-size: contain;
z-index: 1;
}
#top main .flow2 ol li:not(:last-child)::after {
content: "";
position: absolute;
top: 0;
left: 35px;
width: 1px;
height: 100%;
background-color: var(--color-main);
z-index: 0;
}
#top main .flow2 ol li:nth-child(1)::before {
background-image: url(//www.repeatalk-info.net/assets/images/top/flow2-n1.png);
}
#top main .flow2 ol li:nth-child(2)::before {
background-image: url(//www.repeatalk-info.net/assets/images/top/flow2-n2.png);
}
#top main .flow2 ol li:nth-child(3)::before {
background-image: url(//www.repeatalk-info.net/assets/images/top/flow2-n3.png);
}
#top main .flow2 ol li:nth-child(4)::before {
background-image: url(//www.repeatalk-info.net/assets/images/top/flow2-n4.png);
}
#top main .flow2 ol li p:first-child {
width: 205px;
padding: 20px 0 0 24px;
color: var(--color-main);
font-size: 22px;
font-weight: bold;
line-height: 30px;
}
#top main .flow2 ol li p:last-child {
width: calc(100% - 70px - 205px);
padding-top: 22px;
font-size: 14px;
line-height: 26px;
}
#top main .faq {
padding-left: max(40px, 50vw - 560px);
padding-right: max(40px, 50vw - 560px);
padding-top: 80px;
padding-bottom: 80px;
background-color: var(--color-sub);
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#top main .faq {
padding-left: 40rem;
padding-right: 40rem;
}
}
#top main .faq h2 {
text-align: center;
font-size: 32px;
font-weight: bold;
line-height: 40px;
}
#top main .faq h2 strong {
display: inline-block;
margin: 0 8px;
padding: 3px 8px 5px;
vertical-align: top;
color: #fff;
line-height: 32px;
background-color: var(--color-main);
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#top main .faq h2 {
font-size: 42rem;
line-height: 60rem;
}
#top main .faq h2 strong {
margin: 0 10rem;
padding: 3rem 10rem 5rem;
line-height: 42rem;
}
}
#top main .faq dl {
display: flex;
flex-wrap: wrap;
gap: 25px 0;
margin-top: 60px;
}
#top main .faq dl div {
width: 100%;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
overflow: hidden;
background-color: #fff;
}
#top main .faq dl div dt {
min-height: 88px;
padding: 32px 40px 15px 102px;
border-bottom: 1px solid #dddddd;
font-size: 16px;
font-weight: bold;
line-height: 30px;
background: url(//www.repeatalk-info.net/assets/images/top/faq-q.png) no-repeat 29px 21px/50px;
}
#top main .faq dl div dd {
min-height: 73px;
padding: 20px 40px 20px 102px;
font-size: 14px;
line-height: 26px;
background: url(//www.repeatalk-info.net/assets/images/top/faq-a.png) no-repeat 44px 21px/22px;
}
#top main .faq dl div dd a {
color: var(--color-main);
}
#top main .faq dl div dd a:hover {
text-decoration: underline;
}
#top main .online-seminar {
padding-left: max(40px, 50vw - 600px);
padding-right: max(40px, 50vw - 600px);
padding-top: 80px;
padding-bottom: 80px;
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#top main .online-seminar {
padding-left: 40rem;
padding-right: 40rem;
}
}
#top main .online-seminar h2 {
text-align: center;
font-size: 32px;
font-weight: bold;
line-height: 40px;
}
#top main .online-seminar h2 strong {
display: inline-block;
margin: 0 8px;
padding: 3px 8px 5px;
vertical-align: top;
color: #fff;
line-height: 32px;
background-color: var(--color-main);
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#top main .online-seminar h2 {
font-size: 42rem;
line-height: 60rem;
}
#top main .online-seminar h2 strong {
margin: 0 10rem;
padding: 3rem 10rem 5rem;
line-height: 42rem;
}
}
#top main .online-seminar ul {
margin-top: 56px;
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#top main .main-visual {
padding: 372rem 0 0;
height: 985rem;
}
#top main .main-visual::before {
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(//www.repeatalk-info.net/assets/images/top/mv-image-sp.png) no-repeat center/cover;
}
#top main .main-visual .text1 {
font-size: 32rem;
line-height: 58rem;
}
#top main .main-visual .repeatalk {
margin-top: 23rem;
}
#top main .main-visual .repeatalk img {
width: 379rem;
}
#top main .main-visual section.trial {
margin-top: 40rem;
}
#top main .main-visual section.trial h2 {
font-size: 26rem;
line-height: 58rem;
}
#top main .main-visual section.trial h2::before, #top main .main-visual section.trial h2::after {
width: 2rem;
height: 58rem;
margin: 0 30rem;
}
#top main .main-visual section.trial ul {
flex-direction: column;
align-items: center;
gap: 30rem 0;
margin-top: 25rem;
}
#top main .main-visual section.trial ul li a {
width: 480rem;
border-radius: 50rem;
font-size: 30rem;
line-height: 100rem;
}
#top main .main-visual section.trial ul li.request a {
padding-left: 130rem;
background: url(//www.repeatalk-info.net/assets/images/top/mv-icon01.png) no-repeat 46rem 23rem/59rem auto, linear-gradient(to right, #25272f, #454545);
}
#top main .main-visual section.trial ul li.trial a {
padding-left: 130rem;
background: url(//www.repeatalk-info.net/assets/images/top/mv-icon02.png) no-repeat 46rem 24rem/54rem auto, linear-gradient(to right, #25272f, #454545);
}
#top main .main-visual section.trial ul li.request a::after, #top main .main-visual section.trial ul li.trial a::after {
content: "";
display: inline-block;
width: 26rem;
height: 21rem;
margin-left: 17rem;
vertical-align: 1rem;
background: url(//www.repeatalk-info.net/assets/images/top/mv-arrow.png) no-repeat center/contain;
}
#top main .results {
padding: 50rem 0 60rem;
}
#top main .results .images {
width: 100%;
margin-top: 45rem;
}
#top main .problems h2 {
padding-top: 42rem;
padding-bottom: 40rem;
}
#top main .problems dl {
display: block;
padding-bottom: 55rem;
}
#top main .problems dl::after {
left: calc(50% - 40rem);
bottom: -39rem;
border-top: 40rem solid var(--color-main);
border-left: 40rem solid transparent;
border-right: 40rem solid transparent;
}
#top main .problems dl div {
width: 100%;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
#top main .problems dl div + div {
margin-top: 45rem;
}
#top main .problems dl div:first-child::before {
top: auto;
right: 24rem;
bottom: -36rem;
width: 149rem;
height: 231rem;
}
#top main .problems dl div:last-child::before {
top: auto;
left: -20rem;
bottom: -44rem;
width: 149rem;
height: 238rem;
}
#top main .problems dl div dt {
border-radius: 10rem 10rem 0 0;
font-size: 28rem;
line-height: 80rem;
}
#top main .problems dl div dd {
padding: 26rem 30rem;
border-radius: 0 0 10rem 10rem;
}
#top main .problems dl div dd ul li {
font-size: 27rem;
line-height: 44rem;
}
#top main .problems dl div dd ul li::before {
content: "・";
}
#top main .problems dl div:last-child dd {
padding-left: 140rem;
}
#top main .problems .text1 {
padding-top: 70rem;
padding-bottom: 50rem;
}
#top main .about {
padding: 20rem;
}
#top main .about .block1 {
padding: 65rem 40rem 30rem;
border-radius: 10rem;
}
#top main .about .block1 .body {
display: block;
margin-top: 60rem;
}
#top main .about .block1 .body .slides {
width: 590rem;
margin: 0 auto;
}
#top main .about .block1 .body .slides .images {
height: 393rem;
}
#top main .about .block1 .body .slides .images li {
height: 393rem;
}
#top main .about .block1 .body .texts {
width: 100%;
padding-top: 30rem;
}
#top main .about .block1 .body .texts p {
font-size: 26rem;
line-height: 44rem;
}
#top main .about .block1 .body .texts p + p {
margin-top: 44rem;
}
#top main .about .graphs {
padding-top: 60rem;
}
#top main .about .graphs ul {
flex-direction: column;
align-items: center;
gap: 40rem 0;
margin-top: 40rem;
}
#top main .about .graphs ul li {
width: 590rem;
height: 595rem;
padding: 45rem 0 0 18rem;
border-radius: 10rem;
}
#top main .about .graphs ul li img {
width: 500rem;
}
#top main .about .graphs ul li:last-child {
padding: 45rem 0 0 87rem;
}
#top main .about .graphs ul li:last-child img {
width: 433rem;
}
#top main .about .point {
padding-top: 70rem;
padding-bottom: 65rem;
}
#top main .about .point h3 {
font-size: 38rem;
}
#top main .about .point .text1 {
width: 570rem;
margin: 50rem auto 0;
padding-left: 1em;
text-indent: -1em;
font-size: 28rem;
line-height: 50rem;
white-space: normal;
}
#top main .about .point .text2 {
text-align: center;
color: var(--color-main);
font-size: 26px;
font-weight: bold;
line-height: 44px;
color: #111;
position: relative;
margin-top: 150rem;
}
#top main .about .point .text2 strong {
text-decoration: underline;
text-underline-offset: 12px;
}
}
@media screen and (min-width: 0px) and (max-width: 750px) and (min-width: 0px) and (max-width: 750px) {
#top main .about .point .text2 {
font-size: 30rem;
line-height: 50rem;
}
#top main .about .point .text2 strong {
text-underline-offset: 10rem;
}
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#top main .about .point .text2::before {
top: -90px;
left: calc(50% - 80rem);
border-top: 80rem solid var(--color-main);
border-left: 80rem solid transparent;
border-right: 80rem solid transparent;
}
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#top main .flow1 {
padding: 65rem 20rem 40rem;
}
#top main .flow1 hgroup p {
font-size: 26rem;
line-height: 44rem;
}
#top main .flow1 hgroup h2 {
margin-top: 20rem;
}
#top main .flow1 ol {
display: flex;
flex-direction: column;
align-items: center;
gap: 170rem 0;
margin-top: 60rem;
}
#top main .flow1 ol li {
width: 346rem;
position: relative;
}
#top main .flow1 ol li:nth-child(1):after {
top: auto;
left: 160rem;
right: auto;
bottom: -122rem;
width: 102rem;
height: 100rem;
background: url(//www.repeatalk-info.net/assets/images/top/flow1-arrow01-sp.png) no-repeat center/contain;
}
#top main .flow1 ol li:nth-child(2):after {
top: auto;
left: -70rem;
right: auto;
bottom: -122rem;
width: 366rem;
height: 100rem;
background: url(//www.repeatalk-info.net/assets/images/top/flow1-arrow02-sp.png?v=2) no-repeat center/contain;
}
#top main .flow1 ol li img {
width: 346rem;
}
#top main .flow1 ol li p {
margin-top: 10rem;
padding-left: 0;
font-size: 26rem;
line-height: 44rem;
}
#top main .flow1 .text1 {
margin: 50rem auto 0;
padding: 40rem 35rem;
border-radius: 20rem;
font-size: 26rem;
line-height: 44rem;
}
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#top main .merits {
padding: 40rem 60rem;
}
#top main .merits dl {
gap: 70rem 0;
margin-top: 70rem;
}
#top main .merits dl div {
width: 100%;
}
#top main .merits dl div dt span {
margin-top: 37rem;
font-size: 28rem;
}
#top main .merits dl div dd {
margin-top: 30rem;
font-size: 26rem;
line-height: 44rem;
}
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#top main .cases {
padding: 40rem 0;
}
#top main .cases ul {
margin-top: 70rem;
}
#top main .cases .view-list {
margin-top: 60rem;
}
#top main .cases .view-list a {
width: 360rem;
font-size: 30rem;
line-height: 100rem;
}
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#top main .interview {
padding: 40rem 25rem;
}
#top main .interview .movie {
margin-top: 50rem;
}
#top main .interview p {
width: 630rem;
margin: 40rem auto 0;
font-size: 26rem;
line-height: 44rem;
}
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#top main .flow2 {
padding: 80rem 20rem 70rem;
}
#top main .flow2 ol {
gap: 40rem 0;
position: relative;
margin-top: 75rem;
}
#top main .flow2 ol li {
display: block;
min-height: 100rem;
padding: 0 30rem 0 125rem;
}
#top main .flow2 ol li::before {
position: absolute;
top: 0;
left: 0;
width: 100rem;
height: 100rem;
}
#top main .flow2 ol li:not(:last-child)::after {
left: 49rem;
height: calc(100% + 40rem);
}
#top main .flow2 ol li p:first-child {
width: auto;
padding: 8rem 0 0;
font-size: 32rem;
line-height: 1em;
}
#top main .flow2 ol li p:last-child {
width: auto;
padding-top: 15rem;
font-size: 26rem;
line-height: 44rem;
}
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#top main .faq {
padding: 60rem 20rem;
}
#top main .faq dl {
gap: 25rem 0;
margin-top: 60rem;
}
#top main .faq dl div {
width: 100%;
border-radius: 10rem;
}
#top main .faq dl div dt {
min-height: 160rem;
padding: 32rem 40rem 32rem 160rem;
font-size: 28rem;
line-height: 48rem;
background: url(//www.repeatalk-info.net/assets/images/top/faq-q.png) no-repeat 32rem 30rem/100rem;
}
#top main .faq dl div dd {
min-height: 134rem;
padding: 23rem 40rem 23rem 160rem;
font-size: 26rem;
line-height: 44rem;
background: url(//www.repeatalk-info.net/assets/images/top/faq-a.png) no-repeat 57rem 40rem/50rem;
}
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#top main .online-seminar {
padding: 80rem 20rem;
}
#top main .online-seminar ul {
margin-top: 80rem;
}
}
#company .common-lower > .body {
padding-left: max(40px, 50vw - 480px);
padding-right: max(40px, 50vw - 480px);
padding-top: 50px;
padding-bottom: 80px;
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#company .common-lower > .body {
padding-left: 40rem;
padding-right: 40rem;
}
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#company .common-lower > .body {
padding: 40rem 20rem 60rem;
}
}
#archive .common-lower > .body {
padding-top: 35px;
padding-bottom: 80px;
}
#archive .common-lower > .body .categories {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 25px;
}
#archive .common-lower > .body .categories li a {
display: block;
width: 170px;
border: 1px solid var(--color-main);
border-radius: 5px;
text-align: center;
color: var(--color-main);
font-size: 16px;
line-height: 58px;
}
#archive .common-lower > .body .categories li.current a,
#archive .common-lower > .body .categories li a:hover {
border-width: 2px;
color: #111;
font-weight: bold;
line-height: 56px;
}
#archive .common-lower > .body .articles {
margin-top: 40px;
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#archive .common-lower > .body {
padding: 40rem 20rem 60rem;
}
#archive .common-lower > .body .categories {
justify-content: left;
gap: 20rem 35rem;
padding: 0 20rem;
}
#archive .common-lower > .body .categories li {
width: calc((100% - 70rem) / 3);
}
#archive .common-lower > .body .categories li a {
width: 100%;
border: 1rem solid var(--color-main);
border-radius: 5rem;
font-size: 20rem;
line-height: 68rem;
}
#archive .common-lower > .body .categories li.current a,
#archive .common-lower > .body .categories li a:hover {
border-width: 2rem;
line-height: 66rem;
}
#archive .common-lower > .body .articles {
margin-top: 40rem;
}
}
#support .common-lower > .body {
padding-left: max(40px, 50vw - 480px);
padding-right: max(40px, 50vw - 480px);
padding-top: 44px;
padding-bottom: 80px;
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#support .common-lower > .body {
padding-left: 40rem;
padding-right: 40rem;
}
}
#support .common-lower > .body .text1 {
text-align: center;
font-size: 16px;
line-height: 30px;
}
#support .common-lower > .body .articles {
margin-top: 50px;
}
#support .common-lower > .body .articles h3 {
position: relative;
margin-bottom: 50px;
padding-bottom: 75px;
text-align: center;
font-size: 26px;
font-weight: bold;
line-height: 1em;
}
#support .common-lower > .body .articles h3::after {
content: "";
position: absolute;
bottom: 0;
left: calc(50% - 40px);
border-top: 40px solid var(--color-main);
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: none;
}
#support .common-lower > .body .articles dl {
display: flex;
flex-wrap: wrap;
gap: 40px;
}
#support .common-lower > .body .articles dl div {
width: calc(50% - 20px);
border: 2px solid var(--color-main);
border-radius: 5px;
}
#support .common-lower > .body .articles dl div dt {
border-bottom: 1px solid var(--color-main);
text-align: center;
font-size: 20px;
font-weight: bold;
line-height: 62px;
}
#support .common-lower > .body .articles dl div dd {
padding: 17px 25px;
}
#support .common-lower > .body .articles dl div dd ul li {
position: relative;
padding-left: 1em;
font-size: 16px;
line-height: 28px;
}
#support .common-lower > .body .articles dl div dd ul li::before {
content: "・";
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 1em;
}
#support .common-lower > .body .articles dl div dd ul li:not(:first-child) {
margin-top: 10px;
}
#support .common-lower > .body .articles dl div dd ul li a {
color: var(--color-main);
}
#support .common-lower > .body .articles dl div dd ul li a:hover {
text-decoration: underline;
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#support .common-lower > .body {
padding: 40rem 20rem 60rem;
}
#support .common-lower > .body .text1 {
font-size: 24rem;
line-height: 46rem;
}
#support .common-lower > .body .articles {
margin-top: 40rem;
}
#support .common-lower > .body .articles h3 {
margin-bottom: 40rem;
padding-bottom: 75rem;
font-size: 30rem;
}
#support .common-lower > .body .articles h3::after {
left: calc(50% - 40rem);
border-top: 40rem solid var(--color-main);
border-left: 40rem solid transparent;
border-right: 40rem solid transparent;
}
#support .common-lower > .body .articles dl div {
width: 100%;
border-radius: 5rem;
}
#support .common-lower > .body .articles dl div dt {
font-size: 24rem;
line-height: 80rem;
}
#support .common-lower > .body .articles dl div dd {
padding: 20rem 30rem;
}
#support .common-lower > .body .articles dl div dd ul li {
font-size: 24rem;
line-height: 46rem;
}
#support .common-lower > .body .articles dl div dd ul li:not(:first-child) {
margin-top: 20rem;
}
}
#detail main > section {
padding-bottom: 80px;
}
#detail main > section > h1:not(.title) {
padding-left: max(40px, 50vw - 480px);
padding-right: max(40px, 50vw - 480px);
padding-top: 45px;
font-size: 42px;
font-weight: bold;
line-height: 60px;
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#detail main > section > h1:not(.title) {
padding-left: 40rem;
padding-right: 40rem;
}
}
#detail main > section > .main-image {
padding-left: max(40px, 50vw - 480px);
padding-right: max(40px, 50vw - 480px);
margin-top: 45px;
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#detail main > section > .main-image {
padding-left: 40rem;
padding-right: 40rem;
}
}
#detail main > section > .main-image img {
width: 100%;
height: auto;
}
#detail main > section > .body {
padding-left: max(40px, 50vw - 480px);
padding-right: max(40px, 50vw - 480px);
margin-top: 45px;
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#detail main > section > .body {
padding-left: 40rem;
padding-right: 40rem;
}
}
#detail main > section > .back {
padding-top: 80px;
}
#detail main > section > .back a {
display: block;
width: 220px;
margin: 0 auto;
border: 1px solid var(--color-main);
border-radius: 30px;
text-align: center;
color: var(--color-main);
font-size: 16px;
font-weight: bold;
line-height: 58px;
transition: opacity 200ms;
}
#detail main > section > .back a:hover {
opacity: 0.7;
}
#detail section.case .introduction {
padding-left: max(40px, 50vw - 480px);
padding-right: max(40px, 50vw - 480px);
padding-top: 35px;
padding-bottom: 80px;
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#detail section.case .introduction {
padding-left: 40rem;
padding-right: 40rem;
}
}
#detail section.case .introduction .school {
font-size: 20px;
font-weight: bold;
line-height: 1em;
}
#detail section.case .introduction .lead {
margin-top: 30px;
font-size: 16px;
line-height: 30px;
}
#detail section.case .introduction .before-after {
display: flex;
justify-content: space-between;
position: relative;
margin-top: 50px;
}
#detail section.case .introduction .before-after > div {
position: relative;
width: 430px;
}
#detail section.case .introduction .before-after > div.before::before {
content: "";
display: block;
position: absolute;
top: calc(50% - 38px);
right: -73px;
width: 46px;
height: 77px;
background: var(--grad01);
-webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
clip-path: polygon(0 0, 100% 50%, 0 100%);
}
#detail section.case .introduction .before-after > div dt {
border-radius: 10px 10px 0 0;
text-align: center;
color: #fff;
font-size: 18px;
font-weight: bold;
line-height: 65px;
}
#detail section.case .introduction .before-after > div.before dt {
background-color: #8b9aaf;
}
#detail section.case .introduction .before-after > div.after dt {
background-color: #4a72e9;
}
#detail section.case .introduction .before-after > div dd {
height: calc(100% - 65px);
border-radius: 0 0 10px 10px;
background-color: var(--color-sub);
}
#detail section.case .introduction .before-after > div dd ul {
padding: 20px 30px;
}
#detail section.case .introduction .before-after > div dd ul li {
position: relative;
padding-left: 1em;
font-size: 16px;
line-height: 26px;
}
#detail section.case .introduction .before-after > div dd ul li:not(:first-child) {
margin-top: 15px;
}
#detail section.case .introduction .before-after > div dd ul li::before {
content: "・";
position: absolute;
top: 0;
left: 0;
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#detail main > section {
padding-bottom: 90rem;
}
#detail main > section > h1:not(.title) {
padding: 26px 40rem 0;
font-size: 42rem;
line-height: 60rem;
}
#detail main > section > .main-image {
padding: 0;
margin-top: 40rem;
}
#detail main > section > .main-image img {
width: 100%;
}
#detail main > section > .body {
padding: 0 40rem;
margin-top: 25rem;
}
#detail main > section > .back {
padding-top: 90rem;
}
#detail main > section > .back a {
width: 300rem;
font-size: 26rem;
line-height: 78rem;
}
#detail section.case .introduction {
padding: 30rem 20rem 80rem;
}
#detail section.case .introduction .school {
padding: 0 30rem;
font-size: 35rem;
line-height: 40rem;
}
#detail section.case .introduction .lead {
margin-top: 30rem;
padding: 0 35rem;
font-size: 26rem;
line-height: 44rem;
}
#detail section.case .introduction .before-after {
display: flex;
flex-direction: column;
gap: 150rem 0;
margin-top: 30rem;
}
#detail section.case .introduction .before-after > div {
width: 100%;
}
#detail section.case .introduction .before-after > div.before::before {
top: auto;
left: calc(50% - 65rem);
right: auto;
bottom: -110rem;
width: 130rem;
height: 70rem;
-webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
clip-path: polygon(0 0, 100% 0, 50% 100%);
}
#detail section.case .introduction .before-after > div dt {
border-radius: 10rem 10rem 0 0;
font-size: 28rem;
line-height: 75rem;
}
#detail section.case .introduction .before-after > div dd {
height: auto;
border-radius: 0 0 10rem 10rem;
}
#detail section.case .introduction .before-after > div dd ul {
padding: 23rem 35rem;
}
#detail section.case .introduction .before-after > div dd ul li {
font-size: 26rem;
line-height: 44rem;
}
#detail section.case .introduction .before-after > div dd ul li:not(:first-child) {
margin-top: 25rem;
}
}
#form main > section {
padding-left: max(40px, 50vw - 600px);
padding-right: max(40px, 50vw - 600px);
display: flex;
justify-content: space-between;
align-items: flex-start;
padding-top: 50px;
padding-bottom: 65px;
background-color: var(--color-sub);
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#form main > section {
padding-left: 40rem;
padding-right: 40rem;
}
}
#form main > section .contents {
width: calc(100% - 610px);
}
#form main > section .contents h1 {
font-size: 26px;
font-weight: bold;
line-height: 44px;
}
#form main > section .form {
width: 540px;
padding: 30px 30px 40px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
border-radius: 10px;
background-color: #fff;
}
@media screen and (min-width: 1201px) {
#form main > section .form {
position: sticky;
top: 100px;
}
}
#form main > section .form > h2 {
text-align: center;
color: var(--color-main);
font-size: 26px;
font-weight: bold;
line-height: 1em;
}
#form main > section .form > .text1 {
margin: 25px 0;
font-size: 14px;
line-height: 24px;
}
#form main > section .form dl {
display: flex;
flex-direction: column;
gap: 30px 0;
}
#form main > section .form dl div {
width: 100%;
}
#form main > section .form dl div dt {
height: 25px;
font-size: 14px;
font-weight: bold;
line-height: 1em;
}
#form main > section .form dl div dd input[type=text],
#form main > section .form dl div dd input[type=email],
#form main > section .form dl div dd textarea {
width: 100%;
height: 40px;
padding: 15px;
border: 1px solid #dddddd;
border-radius: 5px;
font-size: 16px;
}
#form main > section .form dl div dd textarea {
height: 120px;
}
#form main > section .form dl div dd select {
height: 40px;
padding: 0 10px;
border: 1px solid #dddddd;
border-radius: 5px;
font-size: 16px;
}
#form main > section .form dl div dd .mwform-checkbox-field {
cursor: pointer;
}
#form main > section .form dl div dd .mwform-checkbox-field:not(:first-child) {
margin-top: 10px;
}
#form main > section .form dl div dd .mwform-checkbox-field input {
vertical-align: baseline;
}
#form main > section .form dl div dd .error {
display: block;
margin-top: 10px;
color: #f00;
}
#form main > section .form .button {
margin-top: 40px;
text-align: center;
}
#form main > section .form .button input[type=submit] {
width: 250px;
height: 60px;
color: #fff;
font-size: 16px;
font-weight: bold;
background: var(--grad01);
transition: opacity 200ms;
}
#form main > section .form .button input[type=submit]:hover {
opacity: 0.7;
}
@media screen and (min-width: 751px) and (max-width: 1200px) {
#form main > section {
display: block;
}
#form main > section .contents {
width: auto;
}
#form main > section .form {
width: auto;
margin-top: 0px;
}
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#form main > section {
display: block;
padding: 40rem 40rem 60rem;
}
#form main > section .contents {
width: auto;
}
#form main > section .contents h1 {
font-size: 30rem;
line-height: 50rem;
}
#form main > section .form {
width: auto;
margin-top: 60rem;
padding: 30rem 30px 40px;
border-radius: 10rem;
}
#form main > section .form dl {
gap: 30rem 0;
}
#form main > section .form dl div dt {
height: 40rem;
font-size: 22rem;
}
#form main > section .form dl div dd input[type=text],
#form main > section .form dl div dd input[type=email],
#form main > section .form dl div dd textarea {
height: 60rem;
font-size: 16px;
}
#form main > section .form dl div dd textarea {
height: 180rem;
}
#form main > section .form dl div dd select {
height: 60rem;
padding: 0 15rem;
border-radius: 5rem;
}
#form main > section .form dl div dd .mwform-checkbox-field {
margin-top: 15rem;
font-size: 22rem;
}
#form main > section .form dl div dd .mwform-checkbox-field:not(:first-child) {
margin-top: 30rem;
}
#form main > section .form dl div dd .error {
margin-top: 10rem;
}
#form main > section .form .button {
margin-top: 40rem;
}
#form main > section .form .button input[type=submit] {
width: 350rem;
height: 80rem;
font-size: 22rem;
}
}
#form.whitepaper .slides {
position: relative;
width: 595px;
margin: 30px auto 0;
}
#form.whitepaper .slides .images {
position: relative;
width: 100%;
height: 446px;
z-index: 0;
}
#form.whitepaper .slides .images li {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 446px;
opacity: 0;
transition: opacity 1000ms;
}
#form.whitepaper .slides .images li.current {
opacity: 1;
}
#form.whitepaper .slides .images li img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}
#form.whitepaper .slides .prev,
#form.whitepaper .slides .next {
position: absolute;
top: calc(223px - 20px);
left: 10px;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.3);
cursor: pointer;
transition: background-color 200ms;
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#form.whitepaper .slides .prev,
#form.whitepaper .slides .next {
top: 180rem;
left: 10rem;
width: 50rem;
height: 50rem;
}
}
#form.whitepaper .slides .prev::before,
#form.whitepaper .slides .next::before {
content: "";
position: absolute;
top: 15px;
left: 17px;
width: 10px;
height: 10px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(45deg);
transform-origin: center;
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#form.whitepaper .slides .prev::before,
#form.whitepaper .slides .next::before {
top: 16rem;
left: 20rem;
width: 17rem;
height: 17rem;
}
}
#form.whitepaper .slides .prev:hover,
#form.whitepaper .slides .next:hover {
background-color: rgba(0, 0, 0, 0.6);
}
#form.whitepaper .slides .next {
left: auto;
right: 10px;
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#form.whitepaper .slides .next {
right: 10rem;
}
}
#form.whitepaper .slides .next::before {
left: auto;
right: 17px;
transform: rotate(-135deg);
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#form.whitepaper .slides .next::before {
right: 20rem;
}
}
#form.whitepaper .slides .indicators {
margin-top: 20px;
text-align: center;
font-size: 0;
}
#form.whitepaper .slides .indicators li {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 5px;
border-radius: 50%;
background-color: var(--color-sub);
}
#form.whitepaper .slides .indicators li.current {
background-color: var(--color-main);
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#form.whitepaper .slides .indicators {
margin-top: 35rem;
}
#form.whitepaper .slides .indicators li {
width: 30rem;
height: 30rem;
margin: 0 15rem;
}
}
#form.whitepaper .slides .indicators li {
background-color: #fff;
}
@media screen and (min-width: 0px) and (max-width: 750px) {
#form.whitepaper .slides {
width: 590rem;
margin: 40rem auto 0;
}
#form.whitepaper .slides .images {
height: 393rem;
}
#form.whitepaper .slides .images li {
height: 393rem;
}
}
#simple-form {
padding-top: 0;
}
#simple-form main > section > .body {
max-width: 560px;
margin: 0 auto;
padding: 20px 40px 80px;
}
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #fff;
z-index: 1;
}
@media screen and (min-width: 751px) {
.site-header h1 {
padding-left: 17px;
}
.site-header h1 img {
width: 134px;
}
.site-header nav {
display: flex;
gap: 0 3vw;
font-weight: bold;
font-size: 14px;
letter-spacing: 0.1em;
}
.site-header nav .inner {
display: contents;
}
}
@media screen and (min-width: 751px) and (min-width: 751px) and (max-width: 900px) {
.site-header nav {
font-size: 12px;
}
}
@media screen and (min-width: 751px) {
.site-header nav .nav1 {
display: flex;
align-items: center;
gap: 0 2vw;
width: 100%;
}
.site-header nav .nav1 li a {
color: #111111;
}
.site-header nav .nav1 li a:hover {
text-decoration: underline;
}
}
@media screen and (min-width: 751px) {
.site-header nav .nav2 {
display: flex;
}
.site-header nav .nav2 li a {
display: block;
width: 170px;
text-align: center;
color: #fff;
line-height: 60px;
background: var(--grad01);
transition: opacity 200ms;
}
}
@media screen and (min-width: 751px) and (min-width: 751px) and (max-width: 1200px) {
.site-header nav .nav2 li a {
width: 100px;
}
}
@media screen and (min-width: 751px) {
.site-header nav .nav2 li a:hover {
opacity: 0.7;
}
}
@media screen and (min-width: 0px) and (max-width: 750px) {
.site-header {
height: 90rem;
padding-left: 25rem;
padding-right: 30rem;
}
.site-header h1 {
flex-grow: 1;
padding-left: 0;
}
.site-header h1 img {
width: 134rem;
}
.site-header nav {
position: fixed;
top: 90rem;
left: 0;
width: 100%;
height: 0;
overflow-x: hidden;
overflow-y: auto;
background-color: #fff;
opacity: 0;
z-index: 2;
transition: opacity 200ms, height 1ms 200ms;
}
.nav-opened .site-header nav {
height: calc(var(--vh, 1vh) * 100 - 90rem);
opacity: 1;
transition: opacity 200ms, height 1ms;
}
.site-header nav .inner {
padding: 30rem 0 50rem;
text-align: center;
}
.site-header nav .inner .nav1 {
font-size: 30rem;
line-height: 80rem;
}
.site-header nav .inner .nav2 {
margin-top: 30rem;
font-size: 26rem;
line-height: 80rem;
}
.site-header .trial a {
display: block;
width: 200rem;
text-align: center;
color: #fff;
font-size: 22rem;
font-weight: bold;
line-height: 60rem;
background: var(--grad01);
}
.site-header .sp-nav-toggle {
margin-left: 50rem;
}
.site-header .sp-nav-toggle button {
position: relative;
width: 32rem;
height: 28rem;
}
.site-header .sp-nav-toggle button::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--grad01);
-webkit-clip-path: polygon(0 0, 100% 0, 100% 4rem, 0 4rem, 0 12rem, 100% 12rem, 100% 16rem, 0 16rem, 0 24rem, 100% 24rem, 100% 28rem, 0 28rem);
clip-path: polygon(0 0, 100% 0, 100% 4rem, 0 4rem, 0 12rem, 100% 12rem, 100% 16rem, 0 16rem, 0 24rem, 100% 24rem, 100% 28rem, 0 28rem);
}
.nav-opened .site-header .sp-nav-toggle button::before {
top: 2rem;
width: 28rem;
-webkit-clip-path: polygon(0 10%, 10% 0, 100% 90%, 90% 100%, 0 10%, 90% 0, 100% 10%, 10% 100%, 0 90%, 90% 0);
clip-path: polygon(0 10%, 10% 0, 100% 90%, 90% 100%, 0 10%, 90% 0, 100% 10%, 10% 100%, 0 90%, 90% 0);
}
}
.site-footer {
padding-left: max(40px, 50vw - 590px);
padding-right: max(40px, 50vw - 590px);
display: flex;
justify-content: space-between;
align-items: center;
height: 85px;
}
@media screen and (min-width: 0px) and (max-width: 750px) {
.site-footer {
padding-left: 40rem;
padding-right: 40rem;
}
}
.site-footer .logo {
padding-top: 7px;
}
.site-footer .logo img {
width: 134px;
}
.site-footer .nav {
display: flex;
gap: 0 64px;
}
.site-footer .nav li {
font-size: 14px;
}
.site-footer .nav li a {
text-decoration: underline;
text-underline-offset: 5px;
color: #1a0dab;
}
.site-footer .nav li a:hover {
text-decoration: none;
}
@media screen and (min-width: 0px) and (max-width: 750px) {
.site-footer {
display: block;
height: auto;
padding: 47rem 0 40rem;
}
.site-footer .logo {
padding-top: 0;
text-align: center;
}
.site-footer .logo img {
width: 160rem;
}
.site-footer .nav {
display: block;
margin-top: 25rem;
text-align: center;
font-size: 22rem;
line-height: 2.5em;
}
.site-footer .nav li {
display: inline-block;
margin: 0 30rem;
}
.site-footer .nav li a {
text-underline-offset: 5rem;
}
}
.common-post-list {
display: flex;
flex-wrap: wrap;
gap: 45px;
}
.common-post-list > * {
width: calc((100% - 90px) / 3);
}
@media screen and (min-width: 751px) and (max-width: 1200px) {
.common-post-list > * {
width: 100%;
}
.common-post-list > * a {
width: 370px;
margin: 0 auto;
}
}
.common-post-list > * a {
position: relative;
display: block;
height: 100%;
padding-bottom: 60px;
border-radius: 20px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
overflow: hidden;
background-color: #fff;
}
.common-post-list > * a::after {
content: "詳しくみる";
display: inline-block;
position: absolute;
right: 20px;
bottom: 20px;
padding-right: 40px;
color: var(--color-main);
font-size: 14px;
font-weight: bold;
line-height: 30px;
background: url(//www.repeatalk-info.net/assets/images/common/button-arrow03.png) no-repeat right center/30px;
}
.common-post-list > * a .image {
height: 220px;
overflow: hidden;
}
.common-post-list > * a .image img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
transition: transform 200ms;
}
.common-post-list > * a .school {
text-align: center;
color: #fff;
font-size: 14px;
line-height: 40px;
background-color: var(--color-main);
}
.common-post-list > * a .schedule {
display: inline-block;
margin: 25px 25px 0;
padding: 0 12px;
font-size: 14px;
font-weight: bold;
line-height: 30px;
background-color: var(--color-sub);
}
.common-post-list > * a .title {
padding: 16px 25px 0;
color: #111;
font-size: 16px;
font-weight: bold;
line-height: 30px;
}
.common-post-list > * a:hover .image img {
transform: scale(1.1);
}
.common-post-list > * a:hover .title {
text-decoration: underline;
}
.whitepaper .common-post-list > * a {
padding-bottom: 0;
}
.whitepaper .common-post-list > * a::after {
display: none;
}
.whitepaper .common-post-list > * a .title {
padding: 20px;
text-align: center;
font-size: 20px;
line-height: 35px;
}
@media screen and (min-width: 0px) and (max-width: 750px) {
.common-post-list {
gap: 50rem 0;
}
.common-post-list > * {
width: 100%;
border-radius: 10rem;
}
.common-post-list > * a {
padding-bottom: 95rem;
}
.common-post-list > * a::after {
right: 40rem;
bottom: 23rem;
padding-right: 70rem;
font-size: 26rem;
line-height: 50rem;
background-size: 50rem;
}
.common-post-list > * a .image {
height: 367rem;
}
.common-post-list > * a .school {
font-size: 22rem;
line-height: 55rem;
}
.common-post-list > * a .schedule {
display: inline-block;
margin: 35rem 40rem 0;
padding: 0 20rem;
font-size: 22rem;
line-height: 55rem;
}
.common-post-list > * a .title {
padding: 30rem 40rem 0;
font-size: 26rem;
line-height: 44rem;
}
.whitepaper .common-post-list > * a {
padding-bottom: 0;
}
.whitepaper .common-post-list > * a .title {
padding: 35rem;
font-size: 26rem;
line-height: 44rem;
}
}
.common-breadcrumb {
padding-left: max(40px, 50vw - 600px);
padding-right: max(40px, 50vw - 600px);
border-top: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
background-color: #fff;
}
@media screen and (min-width: 0px) and (max-width: 750px) {
.common-breadcrumb {
padding-left: 40rem;
padding-right: 40rem;
}
}
.common-breadcrumb ul {
display: flex;
gap: 0 28px;
}
.common-breadcrumb ul li {
position: relative;
font-size: 12px;
line-height: 28px;
}
.common-breadcrumb ul li:not(:last-child)::after {
content: "";
display: inline-block;
position: absolute;
top: calc(50% - 3px);
right: -16px;
width: 6px;
height: 6px;
border-top: 1px solid var(--color-main);
border-right: 1px solid var(--color-main);
transform: rotate(45deg);
}
.common-breadcrumb ul li a {
text-decoration: underline;
color: var(--color-main);
}
.common-breadcrumb ul li a:hover {
text-decoration: none;
}
@media screen and (min-width: 0px) and (max-width: 750px) {
.common-breadcrumb {
display: none;
}
}
.common-lower > .title {
position: relative;
overflow: hidden;
text-align: center;
color: var(--color-main);
font-size: 46px;
font-weight: bold;
line-height: 180px;
background-color: var(--color-sub);
}
.common-lower > .title::before {
content: "";
display: block;
position: absolute;
left: calc(50% - 817px);
bottom: 0;
width: 427px;
height: 148px;
background: url(//www.repeatalk-info.net/assets/images/common/lower-title-bg1.png) no-repeat center/contain;
}
.common-lower > .title::after {
content: "";
display: block;
position: absolute;
top: 0;
right: calc(50% - 744px);
width: 256px;
height: 177px;
background: url(//www.repeatalk-info.net/assets/images/common/lower-title-bg2.png) no-repeat center/contain;
}
.common-lower > .body {
padding-left: max(40px, 50vw - 600px);
padding-right: max(40px, 50vw - 600px);
}
@media screen and (min-width: 0px) and (max-width: 750px) {
.common-lower > .body {
padding-left: 40rem;
padding-right: 40rem;
}
}
.common-lower > .body .text1 {
text-align: center;
font-size: 16px;
line-height: 30px;
}
@media screen and (min-width: 0px) and (max-width: 750px) {
.common-lower > .title {
font-size: 48rem;
line-height: 220rem;
background: url(//www.repeatalk-info.net/assets/images/common/lower-title-bg-sp.png) no-repeat center/cover;
}
.common-lower > .title::before, .common-lower > .title::after {
display: none;
}
.common-lower > .body {
padding: 20rem;
}
.common-lower > .body .text1 {
font-size: 22rem;
line-height: 40rem;
}
}
.common-trial {
padding-left: max(40px, 50vw - 365px);
padding-right: max(40px, 50vw - 365px);
padding-top: 30px;
padding-bottom: 30px;
background-color: #212a45;
}
@media screen and (min-width: 0px) and (max-width: 750px) {
.common-trial {
padding-left: 40rem;
padding-right: 40rem;
}
}
.common-trial .title {
position: relative;
text-align: center;
color: #fff;
font-size: 18px;
line-height: 38px;
}
.common-trial .title::before, .common-trial .title::after {
content: "";
display: inline-block;
width: 2px;
height: 39px;
margin: 0 15px;
vertical-align: middle;
background-color: #fff;
transform: rotate(-22deg);
}
.common-trial .title::after {
transform: rotate(22deg);
}
.common-trial ul {
display: flex;
justify-content: space-between;
margin-top: 25px;
}
@media screen and (min-width: 751px) and (max-width: 1200px) {
.common-trial ul {
width: 730px;
margin: 25px 0 0 50%;
transform: scale(0.8) translate(-50%, 0);
transform-origin: 0 0;
}
}
.common-trial ul li {
border-radius: 20px;
background-color: #fff;
}
.common-trial ul li a {
display: block;
width: 340px;
padding-left: 116px;
color: #fff;
font-size: 20px;
font-weight: bold;
line-height: 115px;
transition: opacity 200ms;
}
.common-trial ul li a:hover {
opacity: 0.7;
}
.common-trial ul li:first-child a {
background: url(//www.repeatalk-info.net/assets/images/common/trial/icon01.png) no-repeat 20px 20px/76px, url(//www.repeatalk-info.net/assets/images/common/trial/link-bg.png) no-repeat center/cover;
}
.common-trial ul li:last-child a {
background: url(//www.repeatalk-info.net/assets/images/common/trial/icon02.png) no-repeat 20px 20px/76px, url(//www.repeatalk-info.net/assets/images/common/trial/link-bg.png) no-repeat center/cover;
}
@media screen and (min-width: 0px) and (max-width: 750px) {
.common-trial {
padding: 30rem;
}
.common-trial .title {
font-size: 26rem;
line-height: 58rem;
}
.common-trial .title::before, .common-trial .title::after {
width: 2rem;
height: 58rem;
margin: 0 30rem;
}
.common-trial ul {
display: flex;
justify-content: space-between;
margin-top: 30rem;
}
.common-trial ul li {
border-radius: 20rem;
}
.common-trial ul li a {
display: flex;
align-items: center;
width: 330rem;
height: 116rem;
padding-left: 116rem;
font-size: 28rem;
line-height: 38rem;
background-position: 20rem center, center !important;
background-size: 77rem auto, 100% 100% !important;
background-image: url(//www.repeatalk-info.net/assets/images/common/trial/icon01.png), url(//www.repeatalk-info.net/assets/images/common/trial/link-bg-sp.png) !important;
}
}

.editor-styles-wrapper {
font-size: 16px;
line-height: 30px;
}
.editor-styles-wrapper:not(.body) {
width: 100%;
height: auto !important;
max-width: 960px;
margin: 0 auto;
padding: 25px 0 100px;
font-family: "Noto Sans JP", sans-serif;
letter-spacing: .1em;
}
.editor-styles-wrapper h2 {
position: relative;
margin: 30px 0;
padding-bottom: 27px;
border-bottom: 3px solid #ebeff5;
font-size: 34px;
font-weight: bold;
line-height: 50px;
}
.editor-styles-wrapper h2::before {
content: "";
position: absolute;
left: 0;
bottom: -3px;
width: 110px;
height: 3px;
background-color: #4a72e9;
}
.editor-styles-wrapper h3 {
margin: 30px 0;
font-size: 18px;
line-height: 30px;
}
.editor-styles-wrapper h3::before {
content: "ー";
display: inline-block;
padding-right: 10px;
}
.editor-styles-wrapper h4 {
margin: 30px 0;
font-weight: bold;
}
.editor-styles-wrapper p {
margin: 30px 0;
}
.editor-styles-wrapper p + h2 {
margin-top: 80px;
}
.editor-styles-wrapper p + h3 {
margin-top: 50px;
}
.editor-styles-wrapper p + h4 {
margin-top: 40px;
}
.editor-styles-wrapper a {
text-decoration: underline;
color: #4a72e9;
}
.editor-styles-wrapper a:hover {
text-decoration: none;
}
.editor-styles-wrapper strong { font-weight: bold;
}
.editor-styles-wrapper .wp-block-image {
margin: 50px 0;
}
.editor-styles-wrapper .wp-block-image .components-resizable-box__container {
height: auto !important;
max-width: 100% !important;
}
.editor-styles-wrapper .wp-block-image img {
max-width: 100%;
height: auto;
}
.editor-styles-wrapper ul,
.editor-styles-wrapper ol {
margin: 30px 0;
}
.editor-styles-wrapper li ul,
.editor-styles-wrapper li ol {
margin: 10px 0 20px;
}
.editor-styles-wrapper ul li,
.editor-styles-wrapper ol li {
margin: 10px 0 0 25px;
}
.editor-styles-wrapper ul li {
list-style: disc;
}
.editor-styles-wrapper ol li {
list-style: decimal;
}
.editor-styles-wrapper .aligncenter {
text-align: center;
}
.editor-styles-wrapper .alignright {
text-align: right;
}
.editor-styles-wrapper .wp-block-table table {
width: 100%;
margin: 30px 0;
border-collapse: collapse;
}
.editor-styles-wrapper .wp-block-table td,
.editor-styles-wrapper .wp-block-table th {
padding: 14px 30px;
border: 1px solid #ddd;
font-size: 16px;
line-height: 30px;
}
.editor-styles-wrapper .wp-block-table th {
width: 200px;
text-align: left;
vertical-align: top;
font-weight: 500;
background-color: #ebeff5;
}
.editor-styles-wrapper .wp-block {
max-width: 960px;
}
.editor-styles-wrapper .block01 {
margin: 30px 0;
padding: 25px 30px;
border-radius: 10px;
font-size: 14px;
line-height: 24px;
background-color: #d4ddea;
}
.editor-styles-wrapper .block01 :first-child {
margin-top: 0;
}
.editor-styles-wrapper .block01 :last-child {
margin-bottom: 0;
}
@media screen and (max-width: 750px) {
.editor-styles-wrapper {
font-size: 26rem;
line-height: 44rem;
}
.editor-styles-wrapper h2 {
margin: 45rem 0;
padding-bottom: 30rem;
border-bottom: 2px solid #ebeff5;
font-size: 38rem;
line-height: 54rem;
}
.editor-styles-wrapper h2::before {
bottom: -2px;
width: 110rem;
height: 2px;
}
.editor-styles-wrapper h3 {
margin: 25rem 0;
font-size: 28rem;
line-height: 46rem;
}
.editor-styles-wrapper h3::before {
padding-right: 10rem;
}
.editor-styles-wrapper h4 {
margin: 25rem 0;
}
.editor-styles-wrapper p {
margin: 25rem 0;
}
.editor-styles-wrapper p + h2 {
margin-top: 60rem;
}
.editor-styles-wrapper p + h3 {
margin-top: 50rem;
}
.editor-styles-wrapper p + h4 {
margin-top: 40rem;
}
.editor-styles-wrapper .wp-block-image {
margin: 30rem 0;
}
.editor-styles-wrapper ul,
.editor-styles-wrapper ol {
margin: 30rem 0;
}
.editor-styles-wrapper li ul,
.editor-styles-wrapper li ol {
margin: 15rem 0 25rem;
}
.editor-styles-wrapper ul li,
.editor-styles-wrapper ol li {
margin: 15rem 0 0 35rem;
}
.editor-styles-wrapper .wp-block-table table {
margin: 30rem 0;
}
.editor-styles-wrapper .wp-block-table th,
.editor-styles-wrapper .wp-block-table td {
padding: 20rem 40rem;
font-size: 20rem;
line-height: 44rem;
}
.editor-styles-wrapper .wp-block-table th {
width: 30%;
}
.editor-styles-wrapper .block01 {
margin: 25rem 0;
padding: 25rem 30rem;
border-radius: 10rem;
font-size: 24rem;
line-height: 40rem;
}
}