@charset "UTF-8";
  html {
font-size: 62.5%;
width: 100%;
}
body {
font-family: "Zen Maru Gothic", serif;
color: #333;
font-weight: 400;
}
@media screen and (min-width: 768px) {
body {
font-weight: 400;
}
}
img {
max-width: 100%;
box-sizing: border-box;
width: 100%;
height: auto;
vertical-align: top;
}
::-moz-selection {
background-color: #3575B3;
color: #fff;
}
::selection {
background-color: #3575B3;
color: #fff;
}
p {
font-size: 14px;
margin: 0;
}
@media screen and (min-width: 768px) {
p {
font-size: 16px;
}
}  .l-container {
width: 89.417989418%;
margin: auto;
}
@media screen and (min-width: 992px) {
.l-container {
max-width: 1200px;
}
}
.l-container--small {
width: 93.6507936508%;
width: 92%;
margin: auto;
}
@media screen and (min-width: 992px) {
.l-container--small {
width: 100%;
max-width: 960px;
}
} .l-section {
padding: 80px 0;
}
@media screen and (min-width: 768px) {
.l-section {
padding: 100px 0;
}
} .l-main {
margin-top: 110px;
padding-bottom: 50px;
}
@media screen and (min-width: 1200px) {
.l-main {
padding-bottom: 80px;
margin-top: 150px;
}
}    .c-bg-mesh {
position: relative;
width: 100%;
height: auto;
background-color: #fff;
z-index: 1;
}
.c-bg-mesh::after {
content: "";
position: absolute;
background-image: linear-gradient(90deg, rgba(120, 196, 233, 0.07) 50%, transparent 50%), linear-gradient(rgba(120, 196, 233, 0.11) 50%, transparent 50%);
top: 0;
right: 0;
bottom: 0;
left: 0;
background-size: 20px 20px;
z-index: -1;
}
.c-bg-note {
background-image: linear-gradient(rgb(237, 245, 249) 1px, transparent 1px), linear-gradient(to right, rgb(237, 245, 249) 1px, transparent 1px);
background-size: 20px 20px;
background-color: #fff;
background-position: -14px 14px;
}
.c-bg-dots {
background-image: radial-gradient(#EDF5F9 2px, #ffffff 2px);
background-size: 8px 8px;
} .c-text-blue {
color: #3575B3;
font-weight: bold;
}
.eachTextAnime span {
display: inline-block;
transform: translateY(-1.5rem);
opacity: 0;
}
.eachTextAnime.appeartext span {
animation: text-animation 0.4s forwards;
}
@keyframes text-animation {
0% {
opacity: 0;
transform: translateY(-1.5rem);
}
100% {
opacity: 1;
transform: translateY(0rem);
}
}
.js-marker {
background: linear-gradient(transparent 70%, #F9E68A 0%);
display: inline; background-repeat: no-repeat; background-size: 0% 100%; transition: background-size 1.5s;
} .js-marker.on { background-size: 100% 100%;
}
.js-fade-in {
opacity: 0;
transform: translate(0, 15px);
transition: all 1s ease-out, opacity 0.4s linear, filter 1s linear;
animation-delay: 1.4s;
}
.js-scroll-in {
opacity: 1;
transition-duration: 1s;
transform: translate(0, 0);
}
.js-fade-in-plane-right {
opacity: 0;
transform: translate(30px, -15px);
transition: all 1s ease-out, opacity 0.9s linear, filter 1s linear;
animation-delay: 1.4s;
}
.js-scroll-in-plane-right {
opacity: 1;
transition-duration: 1.5s;
transform: translate(0, 0);
}
.js-fade-in-plane-left {
opacity: 0;
transform: translate(-30px, -20px);
transition: all 1s ease-out, opacity 0.9s linear, filter 1s linear;
animation-delay: 1.4s;
}
.js-scroll-in-plane-left {
opacity: 1;
transition-duration: 1.5s;
transform: translate(0, 0);
}
.js-fade-in-bottom-right {
opacity: 0;
transform: translate(-20px, 15px);
transition: all 1s ease-out, opacity 0.5s linear, filter 1s linear;
animation-delay: 1.4s;
}
.js-scroll-in-bottom-right {
opacity: 1;
transition-duration: 0.5s;
transform: translate(0, 0);
} .c-dataList {
margin-left: auto;
}
.c-dataList__ttl {
margin-bottom: 27px;
padding-bottom: 17px;
font-size: 18px;
font-size: 1.8rem;
line-height: 1;
}
.c-dataList dl {
margin: 0;
display: flex;
justify-content: flex-start;
margin-top: 13px;
}
.c-dataList dd,
.c-dataList dt {
font-size: 13px;
font-size: 1.3rem;
line-height: 1.5;
}
.c-dataList dt {
width: 96px;
font-weight: 400;
}
.c-dataList dd {
width: calc(100% - 96px);
margin-top: 0;
padding-left: 1em;
font-weight: 400;
}
.c-dataList__text {
font-size: 13px;
font-size: 1.3rem;
line-height: 1.84615;
} .c-form {
margin-top: 40px;
}
@media screen and (min-width: 768px) {
.c-form {
margin-top: 80px;
}
}
.c-form__box {
margin: auto;
max-width: 860px;
}
@media screen and (max-width: 767px) {
.c-form__box {
padding: 0 20px;
}
}
.c-form__head {
font-size: 1.6rem;
color: #3575B3;
font-weight: bold;
text-align: center;
}
.c-form__table {
font-size: 1.6rem;
width: 100%;
line-height: 1.4;
}
@media screen and (min-width: 768px) {
.c-form__table {
font-size: 1.6rem;
}
}
.c-form__tr {
margin-top: 40px;
vertical-align: middle;
width: 100%;
}
@media screen and (min-width: 768px) {
.c-form__tr {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 0;
padding: 30px 10px;
}
}
.c-form__th {
width: 30%;
text-align: left;
letter-spacing: 0.06em;
font-weight: bold;
position: relative;
}
@media screen and (max-width: 767px) {
.c-form__th {
width: auto;
font-size: 1.6rem;
}
}
.c-form__td {
width: 70%;
max-width: 567px;
}
@media screen and (max-width: 767px) {
.c-form__td {
width: 100%;
margin-top: 12px;
}
}
input[type=text], input[type=textarea], textarea, input[type=tel], input[type=email] {
-webkit-box-sizing: border-box;
background-color: #FAFAFA;
border: 2px solid #A2A2A2;
box-sizing: border-box;
padding: 12px;
width: 100%;
}
@media screen and (max-width: 767px) {
input[type=text], input[type=textarea], textarea, input[type=tel], input[type=email] {
padding: 10px;
}
}
input[type=textarea] {
height: 100px;
vertical-align: top;
}
input[type=checkbox] {
margin-right: 8px;
margin-bottom: 4px;
}
.c-form__radio__item {
margin-bottom: 12px;
padding-left: 2.4rem;
}
@media screen and (min-width: 768px) {
.c-form__radio__item {
font-size: 1.4rem;
padding-left: 0;
}
}
.c-form__submitBtn {
text-align: center;
margin: 0 auto;
margin-top: 50px;
max-width: 320px;
}
.c-form__submitBtn input[type=submit] {
background-color: #3575B3;
margin: 0;
color: #fff;
display: inline-block;
margin: auto;
border: 2px solid #3575B3;
transition: all 0.2s ease-in-out;
background-color: #3575B3;
width: 100%;
font-size: 1.6rem;
text-align: center;
padding: 14px;
font-weight: 700;
border-radius: 10px;
transition: all 0.3s;
}
.c-form__submitBtn input[type=submit]:hover {
color: #3575B3;
background-color: #fff;
transition: all 0.4s;
}
.c-form__require {
font-size: 1.2rem;
background-color: #EC6047;
border-radius: 2px;
padding: 1px 6px 1px;
line-height: 2;
margin-left: 1rem;
color: #fff;
}
@media screen and (min-width: 768px) {
.c-form__require {
position: absolute;
right: 20px;
}
}
.c-form__nonrequire {
font-size: 1.2rem;
padding: 1px 4px 2px;
line-height: 2;
margin-left: 1rem;
color: #BABABA;
border: 1px solid #BABABA;
}
input::-moz-placeholder, textarea::-moz-placeholder {
color: #D2D2D2;
opacity: 1;
}
input::placeholder, textarea::placeholder {
color: #D2D2D2;
opacity: 1;
}
input:focus::-moz-placeholder, textarea:focus::-moz-placeholder {
color: transparent;
}
input:focus::placeholder, textarea:focus::placeholder {
color: transparent;
} .c-pagination {
margin: 0 auto;
padding: 40px 0;
text-align: center;
}
@media screen and (min-width: 768px) {
.c-pagination {
padding: 80px 0;
}
}
.c-pagination a {
font-size: 1.7rem;
line-height: 36px;
text-align: center;
letter-spacing: 0;
display: inline-block;
height: 40px;
width: 40px;
position: relative;
background: #EDF5F9;
transition: 0.3s;
color: #3575B3;
border: 1px solid #3575B3;
border-radius: 50%;
margin: 4px;
vertical-align: middle;
}
@media screen and (min-width: 992px) {
.c-pagination a::after {
content: "";
position: absolute;
background-color: #3575B3;
right: 50%;
transform: translateX(50%);
bottom: -6px;
width: 0px;
height: 1px;
transition: all 0.3s;
}
}
@media screen and (min-width: 992px) {
.c-pagination a:hover::after {
width: 60%;
}
}
.c-pagination span {
font-weight: bold;
font-size: 1.7rem;
line-height: 36px;
text-align: center;
letter-spacing: 0;
display: inline-block;
height: 40px;
width: 40px;
vertical-align: middle;
}
.c-pagination span.dots {
background: 0;
}
.c-pagination span.current {
border: 1px solid #3575B3;
border-radius: 50%;
background: #3575B3;
color: #fff;
font-weight: bold;
}
.c-pagination--circle a {
border-radius: 50%;
}
.c-pagination--circle span {
border-radius: 50%;
}  .p-footer {
position: relative;
}
.p-footer__right {
margin-top: 40px;
}
@media screen and (min-width: 768px) {
.p-footer__right {
margin-top: 190px;
}
}
.p-footer__content {
position: relative;
padding: 40px 30px;
border-top: 1px solid #FAFAFA;
}
@media screen and (min-width: 768px) {
.p-footer__content {
display: flex;
justify-content: space-between;
padding: 60px 0 80px;
}
}
.p-footer__img {
max-width: 105px;
}
@media screen and (min-width: 768px) {
.p-footer__img {
max-width: 168px;
}
}
.p-footer-info__block {
z-index: 1;
margin-top: 20px;
position: relative;
}
@media screen and (min-width: 768px) {
.p-footer-info__block {
margin-top: 30px;
}
}
.p-footer-info__text {
line-height: 1.6;
display: block;
font-weight: 400;
font-size: 1.4rem;
margin-top: 20px;
letter-spacing: 0.06em;
}
@media screen and (min-width: 768px) {
.p-footer-info__text {
font-size: 1.6rem;
margin-top: 30px;
}
}
.p-footer-info__btn {
margin-top: 10px;
}
.p-footer-info__btn a {
display: block;
max-width: 262px;
border: 1px solid #333;
padding: 10px;
text-align: center;
font-size: 1.4rem;
max-width: 160px;
transition: all 0.4s;
}
@media screen and (min-width: 768px) {
.p-footer-info__btn a {
padding: 15px;
font-size: 1.6rem;
max-width: 200px;
}
}
@media screen and (min-width: 768px) {
.p-footer-info__btn a:hover {
color: #fff;
background-color: #333;
}
}
.p-cta {
font-family: "Zen Maru Gothic", serif;
background-color: #78C4E9;
position: relative;
z-index: 1;
padding: 80px 0 60px;
}
@media screen and (min-width: 768px) {
.p-cta {
padding: 120px 0 100px;
}
}
.p-cta h2 {
font-size: 2.4rem;
color: #fff;
font-weight: bold;
text-align: center;
position: relative;
margin: 0;
padding-top: 15px;
}
@media screen and (min-width: 768px) {
.p-cta h2 {
padding-top: 30px;
font-size: 5rem;
}
}
.p-cta h2::before {
content: "";
position: absolute;
left: 50%;
top: -40px;
background: url(//eiken-dokugaku.com/wp-content/themes/sango-theme-poripu/assets/img/common/cta-triangle.svg) no-repeat center/contain;
width: 95px;
height: 32px;
transform: translateX(-50%);
}
@media screen and (min-width: 768px) {
.p-cta h2::before {
width: 138px;
height: 45px;
}
}
.p-cta p {
text-align: center;
color: #fff;
font-weight: bold;
margin-top: 25px;
line-height: 1.6;
font-size: 1.4rem;
}
@media screen and (min-width: 768px) {
.p-cta p {
font-size: 1.6rem;
margin-top: 40px;
}
}
.p-cta .info {
display: block;
color: #fff;
margin-top: 25px;
line-height: 1.4;
font-size: 1.2rem;
color: #253452;
}
@media screen and (min-width: 768px) {
.p-cta .info {
text-align: center;
font-size: 1.3rem;
margin-top: 40px;
}
}
.p-cta .info a {
color: #3575B3;
font-weight: bold;
text-decoration: underline;
}
.p-cta .info a:hover {
opacity: 0.5;
}
.p-cta::after {
z-index: -1;
content: "";
position: absolute;
left: 0;
top: 0;
background-image: radial-gradient(rgba(255, 255, 255, 0.13) 2px, rgba(255, 255, 255, 0) 2px);
background-size: 8px 8px;
width: 100%;
height: 100%;
}
.p-cta__btn {
padding: 10px 30px 10px 40px;
margin: auto;
margin-top: 30px;
display: block;
border-radius: 10px;
background: #fac800;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
color: #3575B3;
position: relative;
font-size: 1.4rem;
display: flex;
align-items: center;
width: 93%;
transition: all 0.3s;
line-height: 1.4;
max-width: 370px;
font-weight: bold;
}
@media screen and (min-width: 768px) {
.p-cta__btn {
max-width: 700px;
margin-top: 50px;
padding: 20px 65px;
font-size: 1.8rem;
}
}
.p-cta__btn:hover {
text-decoration: none;
transform: translateY(6px);
transition: all 0.3s;
background-color: #fff;
}
@media screen and (min-width: 768px) {
.p-cta__btn {
font-size: 2.3rem;
}
}
.p-cta__btn::before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 6px 0 6px 10px;
border-color: transparent transparent transparent #3575B3;
position: absolute;
top: 50%;
right: 30px;
transform: translateY(-50%);
}
@media screen and (min-width: 768px) {
.p-cta__btn::before {
border-width: 8px 0 8px 14px;
}
}
.p-cta__inner {
position: relative;
padding-bottom: 250px;
}
@media screen and (min-width: 768px) {
.p-cta__inner {
padding-bottom: 0;
}
}
.p-cta__img01 {
position: absolute;
left: 10px;
bottom: 80px;
width: 110px;
}
@media screen and (min-width: 768px) {
.p-cta__img01 {
bottom: 20%;
width: 196px;
}
}
.p-cta__img02 {
position: absolute;
right: 20px;
bottom: 100px;
width: 125px;
}
@media screen and (min-width: 768px) {
.p-cta__img02 {
top: 0;
bottom: initial;
width: 196px;
}
}
.p-cta__img03 {
position: absolute;
right: 30%;
width: 110px;
bottom: 0;
}
@media screen and (min-width: 768px) {
.p-cta__img03 {
bottom: 0;
right: 0;
width: 150px;
}
}
.home .footer-wave,
.page-id-3923 .footer-wave,
.page-id-506 .footer-wave,
.post-type-archive-voice .footer-wave {
background-color: #78C4E9;
position: relative;
z-index: 1;
}
.home .footer-wave::after,
.page-id-3923 .footer-wave::after,
.page-id-506 .footer-wave::after,
.post-type-archive-voice .footer-wave::after {
content: "";
position: absolute;
left: 0;
top: 0;
background-image: radial-gradient(rgba(255, 255, 255, 0.13) 2px, rgba(255, 255, 255, 0) 2px);
background-size: 8px 8px;
width: 100%;
height: 100%;
z-index: -1;
} .p-breadcrumbs {
padding: 8px;
}
@media screen and (min-width: 768px) {
.p-breadcrumbs {
padding: 0 10px 20px 32px;
}
}
.p-breadcrumbs span a {
color: #666666;
}
.p-breadcrumbs span {
color: #666666;
font-size: 1.1rem;
letter-spacing: 0.06em;
}
@media screen and (min-width: 768px) {
.p-breadcrumbs span {
padding: 0 4px;
font-size: 1.4rem;
}
} .p-top-mv {
position: relative;
height: calc(100svh - 110px);
overflow: hidden;
}
@media screen and (min-width: 768px) {
.p-top-mv {
height: calc(100svh - 150px);
}
}
.p-top-mv__title {
position: absolute;
top: 28%;
left: 10%;
width: 80vw;
}
@media screen and (min-width: 1200px) {
.p-top-mv__title {
top: 50%;
left: 15%;
width: 36.4583333333vw;
transform: translateY(-50%);
}
}
@media screen and (min-width: 1400px) {
.p-top-mv__title {
transform: translateY(-40%);
left: 18%;
width: 29.0625vw;
}
}
.p-top-mv__img01 {
position: absolute;
left: 5%;
width: 90px;
bottom: 40%;
}
@media screen and (min-width: 768px) {
.p-top-mv__img01 {
left: 13%;
bottom: 150px;
width: 7.96875vw;
}
}
.p-top-mv__img02 {
position: absolute;
right: 40px;
width: 90px;
bottom: 45%;
}
@media screen and (min-width: 768px) {
.p-top-mv__img02 {
right: initial;
left: 40%;
bottom: 150px;
width: 7.96875vw;
}
}
.p-top-mv__img03 {
position: absolute;
right: 40px;
width: 120px;
top: 5%;
}
@media screen and (min-width: 768px) {
.p-top-mv__img03 {
top: 5%;
right: 10%;
width: 11.9791666667vw;
}
}
.p-top-section-heading {
text-align: center;
}
.p-top-section-heading.-left {
text-align: left;
}
.p-top-section-heading__main {
display: block;
font-size: 2.4rem;
font-weight: bold;
line-height: 1.5;
letter-spacing: 0.02em;
margin-top: 5px;
}
@media screen and (min-width: 768px) {
.p-top-section-heading__main {
margin-top: 10px;
font-size: 4rem;
}
}
.p-top-section-heading__sub {
display: block;
letter-spacing: 0.06em;
font-weight: bold;
color: #3575B3;
font-size: 1.2rem;
}
@media screen and (min-width: 768px) {
.p-top-section-heading__sub {
font-size: 1.6rem;
}
}
.p-top-section__plane01 {
position: absolute;
right: 33px;
width: 85px;
bottom: -60px;
}
@media screen and (min-width: 768px) {
.p-top-section__plane01 {
bottom: -130px;
width: 140px;
}
}
.p-top-section__plane02 {
position: absolute;
left: 0;
width: 170px;
bottom: -168px;
}
@media screen and (min-width: 768px) {
.p-top-section__plane02 {
bottom: -260px;
width: 246px;
}
}
.p-top-section-desc {
margin-bottom: 20px;
font-size: 1.4rem;
line-height: 1.6;
text-align: center;
}
@media screen and (min-width: 768px) {
.p-top-section-desc {
font-size: 1.6rem;
margin-bottom: 60px;
}
}
.p-top-section-desc.-reverse {
background-color: inherit;
color: #fff;
}
.p-top-section-desc.-left {
text-align: left;
}
.p-top-lead {
margin-top: 40px;
}
@media screen and (min-width: 768px) {
.p-top-lead {
margin-top: 25px;
}
}
@media screen and (min-width: 1400px) {
.p-top-lead {
margin-top: 100px;
}
}
.p-top-lead__wrap {
position: relative;
padding: 90px 0 150px;
}
@media screen and (min-width: 768px) {
.p-top-lead__wrap {
padding: 80px 0;
}
}
.p-top-lead__inner {
width: 93.6507936508%;
width: 92%;
margin: auto;
}
@media screen and (min-width: 992px) {
.p-top-lead__inner {
position: relative;
width: 100%;
max-width: 900px;
}
}
.p-top-lead__head {
text-align: center;
}
.p-top-lead__head span {
display: inline-block;
border-radius: 4px;
padding: 0 5px;
line-height: 1.8;
color: #3575B3;
background-color: #fff;
letter-spacing: 0.02em;
font-size: 1.7rem;
font-weight: bold;
}
@media screen and (min-width: 768px) {
.p-top-lead__head span {
padding: 0 10px;
font-size: 3rem;
}
}
.p-top-lead__head span:nth-child(n+2) {
margin-top: 10px;
}
@media screen and (min-width: 768px) {
.p-top-lead__head span:nth-child(n+2) {
margin-top: 20px;
}
}
.p-top-lead__content {
padding: 0 10px;
}
@media screen and (min-width: 768px) {
.p-top-lead__content {
padding: 0;
}
}
.p-top-lead p {
margin-top: 30px;
}
@media screen and (min-width: 768px) {
.p-top-lead p {
text-align: center;
margin-top: 60px;
}
}
.p-top-lead p:nth-child(n+2) {
margin-top: 20px;
}
@media screen and (min-width: 768px) {
.p-top-lead p:nth-child(n+2) {
margin-top: 20px;
}
}
.p-top-lead__img01 {
position: absolute;
top: -30px;
left: 20px;
width: 75px;
}
@media screen and (min-width: 768px) {
.p-top-lead__img01 {
left: 40px;
top: -140px;
width: 100px;
}
}
.p-top-lead__img02 {
position: absolute;
right: 20px;
top: 15px;
width: 85px;
}
@media screen and (min-width: 768px) {
.p-top-lead__img02 {
top: -20px;
width: 110px;
}
}
.p-top-lead__img03 {
position: absolute;
left: 35px;
width: 90px;
bottom: 45px;
}
@media screen and (min-width: 768px) {
.p-top-lead__img03 {
bottom: initial;
left: 0px;
top: 140px;
width: 127px;
}
}
.p-top-lead__img04 {
position: absolute;
right: 70px;
width: 80px;
bottom: 50px;
}
@media screen and (min-width: 768px) {
.p-top-lead__img04 {
bottom: initial;
top: 260px;
width: 125px;
}
}
.p-top-lesson {
padding: 120px 0 80px;
background: url(//eiken-dokugaku.com/wp-content/themes/sango-theme-poripu/assets/img/top/lesson-bg_sp.png) no-repeat top right/contain;
}
@media screen and (min-width: 768px) {
.p-top-lesson {
background: url(//eiken-dokugaku.com/wp-content/themes/sango-theme-poripu/assets/img/top/lesson-bg.png) no-repeat right center/auto;
padding: 130px 0 100px;
}
}
.p-top-lesson__list {
margin-top: 40px;
display: flex;
justify-content: space-between;
flex-direction: column;
position: relative;
}
@media screen and (min-width: 768px) {
.p-top-lesson__list {
margin-top: 60px;
flex-direction: row;
}
}
.p-top-lesson__img01 {
position: absolute;
right: 0px;
width: 80px;
bottom: -40px;
z-index: 1;
}
@media screen and (min-width: 768px) {
.p-top-lesson__img01 {
right: initial;
left: 40px;
top: -75px;
width: 77px;
}
}
.p-top-lesson__img02 {
position: absolute;
left: 47px;
width: 90px;
top: 20px;
}
@media screen and (min-width: 768px) {
.p-top-lesson__img02 {
bottom: initial;
top: 47px;
width: 110px;
left: -30px;
}
}
.p-top-lesson__img03 {
position: absolute;
right: 29px;
width: 120px;
bottom: -13px;
}
@media screen and (min-width: 768px) {
.p-top-lesson__img03 {
bottom: -10px;
right: -30px;
width: 152px;
}
}
@media screen and (min-width: 768px) {
.p-top-lesson-item {
width: 30.1666666667%;
}
}
.p-top-lesson-item:nth-child(n+2) {
margin-top: 40px;
}
@media screen and (min-width: 768px) {
.p-top-lesson-item:nth-child(n+2) {
margin-top: 0px;
}
}
@media screen and (min-width: 768px) {
.p-top-lesson-item:nth-of-type(odd) {
margin-top: 80px;
}
}
.p-top-lesson-item__img {
position: relative;
z-index: 1;
}
.p-top-lesson-item__content {
padding: 0 5px;
margin-top: -20px;
z-index: 2;
position: relative;
}
@media screen and (min-width: 768px) {
.p-top-lesson-item__content {
padding: 0;
}
}
.p-top-lesson-item__content a {
display: inline-block;
margin-top: 5px;
padding: 4px 50px 4px 10px;
font-size: 1.4rem;
color: #333;
border-bottom: dashed 2px #6d6a6a;
position: relative;
font-weight: bold;
}
@media screen and (min-width: 768px) {
.p-top-lesson-item__content a {
transition: all 0.3s;
margin-top: 10px;
padding: 8px 50px 8px 10px;
font-size: 1.6rem;
}
}
.p-top-lesson-item__content a::before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 9px;
border-color: transparent transparent transparent #333;
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
}
.p-top-lesson-item__content a:hover {
text-decoration: none;
transform: translateY(8px);
color: #3575B3;
transition: all 0.3s;
}
.p-top-lesson-item__head {
font-weight: bold;
font-size: 1.2rem;
}
@media screen and (min-width: 768px) {
.p-top-lesson-item__head {
font-size: 1.4rem;
}
}
.p-top-lesson-item__head h2 {
font-size: 2.2rem;
font-weight: bold;
margin-top: 0;
}
@media screen and (min-width: 768px) {
.p-top-lesson-item__head h2 {
font-size: 2.6rem;
}
}
.p-top-lesson-item__head span {
display: inline-block;
border-radius: 4px;
padding: 0 10px;
line-height: 1.8;
color: #fff;
background-color: #3575B3;
letter-spacing: 0.02em;
}
.lightblue .p-top-lesson-item__head span {
background-color: #78C4E9;
}
.p-top-lesson-item p {
margin-top: 10px;
line-height: 1.3;
font-size: 1.4rem;
}
@media screen and (min-width: 768px) {
.p-top-lesson-item p {
margin-top: 18px;
line-height: 1.5;
font-size: 1.6rem;
}
}
.p-top-lesson-item > a {
display: block;
transition: all 0.3s;
}
.p-top-lesson-item > a:hover {
transition: all 0.3s;
opacity: 0.7;
}
.p-top-insta-heading {
text-align: center;
margin-bottom: 40px;
}
@media screen and (min-width: 768px) {
.p-top-insta-heading {
margin-bottom: 60px;
}
}
.p-top-insta-heading__main {
display: inline;
font-size: 2.4rem;
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.03em;
text-align: center;
position: relative;
padding: 0 7px;
background-color: inherit;
padding-left: 40px;
color: #fff;
}
@media screen and (min-width: 768px) {
.p-top-insta-heading__main {
padding-left: 70px;
font-size: 4rem;
}
}
.p-top-insta-heading__main::after {
content: "";
position: absolute;
left: 0;
top: 50%;
background: url(//eiken-dokugaku.com/wp-content/themes/sango-theme-poripu/assets/img/top/instagram-heading.svg) no-repeat center/contain;
width: 28px;
height: 28px;
transform: translateY(-50%);
}
@media screen and (min-width: 768px) {
.p-top-insta-heading__main::after {
width: 38px;
height: 38px;
}
}
.p-top-insta-desc {
margin-top: -20px; font-size: 1.4rem;
line-height: 1.6;
padding: 0 10px;
text-align: center;
color: #fff;
}
@media screen and (min-width: 768px) {
.p-top-insta-desc {
margin-top: -30px;
font-size: 1.6rem; }
}
@media screen and (min-width: 768px) {
.p-top-insta__content {
margin-top: 20px;
}
}
@media screen and (min-width: 768px) {
.p-top-insta__content ul {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
}
.p-top-insta__content li {
width: 85%;
margin: auto;
}
@media screen and (min-width: 768px) {
.p-top-insta__content li {
width: 27.6666666667%;
}
}
.p-top-insta__content li:nth-child(n+2) {
margin-top: 15px;
}
@media screen and (min-width: 768px) {
.p-top-insta__content li:nth-child(n+2) {
margin-top: 0px;
}
}
.p-top-insta__content a {
display: block;
}
.p-top-insta {
background-color: #78C4E9;
}
.p-top-insta__inner {
background: url(//eiken-dokugaku.com/wp-content/themes/sango-theme-poripu/assets/img/top/instagram-bg_sp.svg) no-repeat top left/auto;
padding-bottom: 20px;
}
@media screen and (min-width: 768px) {
.p-top-insta__inner {
padding-top: 0;
padding-bottom: 100px;
background: url(//eiken-dokugaku.com/wp-content/themes/sango-theme-poripu/assets/img/top/instagram-bg.svg) no-repeat center/contain;
}
}
@media screen and (min-width: 1400px) {
.p-top-insta__inner {
background: url(//eiken-dokugaku.com/wp-content/themes/sango-theme-poripu/assets/img/top/instagram-bg.svg) no-repeat center/auto;
}
}
.p-top-insta__btn {
margin-top: -40px;
text-align: center;
}
@media screen and (min-width: 768px) {
.p-top-insta__btn { }
}
.p-top-insta__btn a {
display: inline-block;
margin-top: 5px;
padding: 4px 50px 4px 10px;
font-size: 1.4rem;
color: #fff;
border-bottom: dashed 2px #fff;
position: relative;
font-weight: bold;
}
@media screen and (min-width: 768px) {
.p-top-insta__btn a {
transition: all 0.3s;
margin-top: 10px;
padding: 8px 50px 8px 10px;
font-size: 1.6rem;
}
}
.p-top-insta__btn a::before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 9px;
border-color: transparent transparent transparent #fff;
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
}
.p-top-insta__btn a:hover {
text-decoration: none;
transform: translateY(8px);
transition: all 0.3s;
}
.p-top-eiken {
padding: 20px 0 0px;
}
@media screen and (min-width: 768px) {
.p-top-eiken {
padding: 40px 0 0px;
}
}
.p-top-eiken__content {
padding: 40px 0 40px;
}
@media screen and (min-width: 768px) {
.p-top-eiken__content {
padding: 60px 0;
}
}
@media screen and (min-width: 768px) {
.p-top-eiken__box {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
}
.p-top-eiken__btn {
margin-bottom: 40px;
}
@media screen and (min-width: 768px) {
.p-top-eiken__btn {
margin-bottom: 60px;
}
}
.p-top-eiken__btn a {
display: inline-block;
margin-top: 5px;
padding: 4px 50px 4px 10px;
font-size: 1.4rem;
color: #333;
border-bottom: dashed 2px #6d6a6a;
position: relative;
font-weight: bold;
}
@media screen and (min-width: 768px) {
.p-top-eiken__btn a {
margin-top: 10px;
padding: 8px 50px 8px 10px;
font-size: 1.6rem;
transition: all 0.3s;
}
}
.p-top-eiken__btn a::before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 9px;
border-color: transparent transparent transparent #333;
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
}
.p-top-eiken__btn a:hover {
text-decoration: none;
transform: translateY(8px);
transition: all 0.3s;
color: #3575B3;
}
.p-top-eiken-head {
position: relative;
padding-right: 80px;
}
@media screen and (min-width: 768px) {
.p-top-eiken-head {
padding-right: 190px;
}
}
.p-top-eiken-head__img01 {
position: absolute;
right: 35px;
top: -10px;
width: 60px;
}
@media screen and (min-width: 768px) {
.p-top-eiken-head__img01 {
right: 70px;
width: 80px;
}
}
.p-top-eiken-head__img02 {
position: absolute;
right: 0px;
top: -20px;
width: 40px;
}
@media screen and (min-width: 768px) {
.p-top-eiken-head__img02 {
top: 10px;
width: 55px;
}
}
.p-top-eiken__list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.p-top-eiken-item {
width: 48%;
}
@media screen and (min-width: 768px) {
.p-top-eiken-item {
width: 31.9166666667%;
}
}
.p-top-eiken-item a {
min-height: 95px;
padding: 15px 20px 15px 10px;
margin-top: 20px;
display: block;
border-radius: 10px;
background: #3575B3;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
color: #fff;
position: relative;
font-size: 1.3rem;
display: flex;
align-items: center;
transition: all 0.3s;
line-height: 1.4;
max-width: 370px;
font-weight: bold;
flex-direction: column;
align-items: center;
justify-content: center;
}
@media screen and (min-width: 768px) {
.p-top-eiken-item a {
justify-content: flex-start;
min-height: initial;
flex-direction: row;
margin-top: 20px;
padding: 25px 48px 25px 25px;
font-size: 1.7rem;
}
}
.p-top-eiken-item a:hover {
text-decoration: none;
transform: translateX(10px);
transition: all 0.3s;
opacity: 0.7;
}
.p-top-eiken-item a::before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 4px 0 4px 8px;
border-color: transparent transparent transparent #fff;
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
}
@media screen and (min-width: 768px) {
.p-top-eiken-item a::before {
right: 30px;
border-width: 6px 0 6px 10px;
}
}
.p-top-eiken-item a span {
font-size: 2rem;
padding: 0 2px;
display: block;
}
@media screen and (min-width: 768px) {
.p-top-eiken-item a span {
font-size: 2.4rem;
display: inline-block;
}
}
.p-top-eiken-item a span.yellow {
color: #FAC800;
}
.p-top-eiken-item a span.red {
color: #FF8C77;
}
.p-top-eiken-item a span.lightblue {
color: #A5D7EF;
}
.p-top-eiken-item a span.green {
color: #8CD583;
}
.p-page {
font-family: "Zen Maru Gothic", serif;
}
.p-page-mv {
position: relative;
margin: auto;
width: 100%;
padding-bottom: 20px;
}
@media screen and (min-width: 768px) {
.p-page-mv {
padding-bottom: 60px;
}
}
@media screen and (min-width: 1400px) {
.p-page-mv {
padding-bottom: 60px;
}
}
.p-page-mv__content {
position: absolute;
overflow: hidden;
z-index: 1;
height: auto;
left: 50%;
top: 15%;
transform: translateX(-50%);
width: 100%;
text-align: center;
}
@media screen and (min-width: 768px) {
.p-page-mv__content {
top: 10%;
}
}
@media screen and (min-width: 1400px) {
.p-page-mv__content {
top: 25%;
}
}
.p-page-mv__img {
margin: auto;
width: 230px;
height: auto;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
@media screen and (min-width: 768px) {
.p-page-mv__img {
width: 360px;
}
}
.p-page-mv__img .img01 {
height: 50px;
width: auto;
}
@media screen and (min-width: 768px) {
.p-page-mv__img .img01 {
height: 65px;
width: auto;
}
}
.p-lesson .p-page-mv__img .img01 {
height: 60px;
}
@media screen and (min-width: 768px) {
.p-lesson .p-page-mv__img .img01 {
height: 80px;
}
}
.p-voice .p-page-mv__img .img01 {
height: 53px;
}
@media screen and (min-width: 768px) {
.p-voice .p-page-mv__img .img01 {
height: 60px;
}
}
.p-page-mv__img .img02 {
width: 80px;
height: auto;
}
@media screen and (min-width: 768px) {
.p-page-mv__img .img02 {
width: 123px;
}
}
.p-page-mv-heading {
display: inline-block;
text-align: center;
color: #3575B3;
}
@media screen and (min-width: 768px) {
.p-page-mv-heading {
bottom: 2.0833333333vw;
bottom: 27%;
}
}
.p-page-mv-heading__main {
display: block;
font-weight: 600;
line-height: 1.5;
font-size: 24px;
letter-spacing: 0.12em;
color: #3575B3;
}
@media screen and (min-width: 768px) {
.p-page-mv-heading__main {
font-size: 40px;
}
}
.p-page-mv-heading__sub {
display: block;
font-size: 14px;
letter-spacing: 0.12em;
color: #3575B3;
}
.p-page-desc {
font-size: 1.4rem;
line-height: 1.75;
margin-top: 20px;
}
@media screen and (min-width: 768px) {
.p-page-desc {
text-align: center;
margin-top: 20px;
font-size: 1.6rem;
}
}
.p-page-heading {
text-align: center;
}
.p-page-heading__main {
display: block;
font-weight: 600;
line-height: 1.5;
letter-spacing: 0.06em;
font-size: 2.6rem;
}
@media screen and (min-width: 576px) {
.p-page-heading__main {
font-size: 4.8em;
}
}
.p-page-heading__sub {
font-size: 1.2rem;
color: #BABABA;
letter-spacing: 0.03em;
}
@media screen and (min-width: 576px) {
.p-page-heading__sub {
font-size: 1.3rem;
}
}
.p-page-section-heading {
text-align: center;
margin-bottom: 40px;
}
@media screen and (min-width: 768px) {
.p-page-section-heading {
margin-bottom: 60px;
}
}
.p-page-section-heading__main {
display: inline;
font-size: 3rem;
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.03em;
text-align: center;
font-size: 2rem;
position: relative;
background-color: #fff;
padding: 0 7px;
}
@media screen and (min-width: 768px) {
.p-page-section-heading__main {
font-size: 2.8rem;
}
}
.p-page-section-heading__main::after {
content: "";
position: absolute;
left: -37px;
top: -30px;
background: url(//eiken-dokugaku.com/wp-content/themes/sango-theme-poripu/assets/img/common/section-heading-triangle.svg) no-repeat center/contain;
width: 57px;
height: 54px;
}
@media screen and (min-width: 768px) {
.p-page-section-heading__main::after {
left: -60px;
top: -50px;
width: 84px;
height: 97px;
}
}
.-reverse .p-page-section-heading__main {
background-color: inherit;
color: #fff;
}
.p-page-section-desc {
margin-top: -20px;
margin-bottom: 20px;
font-size: 1.4rem;
line-height: 1.6;
padding: 0 10px;
text-align: center;
}
@media screen and (min-width: 768px) {
.p-page-section-desc {
margin-top: -30px;
font-size: 1.6rem;
margin-bottom: 60px;
}
}
.p-page-section-desc.-reverse {
background-color: inherit;
color: #fff;
}
.p-page-nav {
padding: 30px 0 0;
}
@media screen and (min-width: 768px) {
.p-page-nav {
padding: 60px 0 0;
}
}
.p-page-nav__inner {
display: flex;
justify-content: space-between;
flex-direction: column;
}
@media screen and (min-width: 768px) {
.p-page-nav__inner {
flex-direction: row;
}
}
.p-page-nav-block {
display: flex;
justify-content: space-between;
align-items: center;
}
@media screen and (min-width: 768px) {
.p-page-nav-block {
width: 48.3333333333%;
}
}
.p-page-nav-block__img {
max-width: 300px;
width: 50%;
}
@media screen and (min-width: 768px) {
.p-page-nav-block__img {
width: 100%;
}
}
.p-page-nav-block__content {
padding: 0 5px;
width: 50%;
}
@media screen and (min-width: 768px) {
.p-page-nav-block__content {
width: 100%;
padding: 0;
}
}
.p-page-nav-block__head {
font-weight: bold;
font-size: 1rem;
}
@media screen and (min-width: 768px) {
.p-page-nav-block__head {
font-size: 1.4rem;
}
}
.p-page-nav-block__head h2 {
font-size: 1.4rem;
font-weight: bold;
margin-top: 0;
}
@media screen and (min-width: 768px) {
.p-page-nav-block__head h2 {
font-size: 2.6rem;
}
}
.p-page-nav-block__head span {
display: inline-block;
border-radius: 4px;
padding: 0 10px;
line-height: 1.8;
color: #fff;
background-color: #3575B3;
letter-spacing: 0.02em;
}
.lightblue .p-page-nav-block__head span {
background-color: #78C4E9;
}
.p-page-nav-block p {
margin-top: 10px;
line-height: 1.3;
font-size: 1.2rem;
}
@media screen and (min-width: 768px) {
.p-page-nav-block p {
margin-top: 18px;
line-height: 1.5;
font-size: 1.6rem;
}
}
.p-page-nav-block a {
display: inline-block;
margin-top: 5px;
padding: 4px 50px 4px 10px;
font-size: 1.3rem;
color: #333;
border-bottom: dashed 2px #6d6a6a;
position: relative;
font-weight: bold;
transition: all 0.3s;
}
@media screen and (min-width: 768px) {
.p-page-nav-block a {
margin-top: 10px;
padding: 8px 50px 8px 10px;
font-size: 1.6rem;
}
}
.p-page-nav-block a::before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 9px;
border-color: transparent transparent transparent #333;
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
}
.p-page-nav-block a:hover {
text-decoration: none;
transform: translateY(5px);
color: #3575B3;
transition: all 0.3s;
}
.p-page-nav-block:nth-child(even) {
flex-direction: row-reverse;
margin-top: 30px;
}
@media screen and (min-width: 768px) {
.p-page-nav-block:nth-child(even) {
margin-top: 0;
flex-direction: row;
}
}
.p-lesson-lead {
margin-top: 50px;
}
@media screen and (min-width: 768px) {
.p-lesson-lead {
margin-top: 60px;
}
}
.p-lesson-lead__wrap {
position: relative;
padding: 90px 0 140px;
}
@media screen and (min-width: 768px) {
.p-lesson-lead__wrap {
padding: 80px 0;
}
}
.p-lesson-lead__inner {
width: 93.6507936508%;
width: 92%;
margin: auto;
}
@media screen and (min-width: 992px) {
.p-lesson-lead__inner {
position: relative;
width: 100%;
max-width: 960px;
}
}
.p-lesson-lead__head {
text-align: center;
}
.p-lesson-lead__head span {
display: inline-block;
border-radius: 4px;
padding: 0 5px;
line-height: 1.8;
color: #3575B3;
background-color: #fff;
letter-spacing: 0.02em;
font-size: 1.7rem;
font-weight: bold;
}
@media screen and (min-width: 768px) {
.p-lesson-lead__head span {
padding: 0 10px;
font-size: 3rem;
}
}
.p-lesson-lead__head span:nth-child(n+2) {
margin-top: 10px;
}
@media screen and (min-width: 768px) {
.p-lesson-lead__head span:nth-child(n+2) {
margin-top: 20px;
}
}
.p-lesson-lead__content {
padding: 0 10px;
}
@media screen and (min-width: 768px) {
.p-lesson-lead__content {
padding: 0;
}
}
.p-lesson-lead p {
margin-top: 30px;
}
@media screen and (min-width: 768px) {
.p-lesson-lead p {
text-align: center;
margin-top: 60px;
}
}
.p-lesson-lead p:nth-child(n+2) {
margin-top: 20px;
}
@media screen and (min-width: 768px) {
.p-lesson-lead p:nth-child(n+2) {
margin-top: 20px;
}
}
.p-lesson-lead__img01 {
position: absolute;
top: -30px;
left: 20px;
width: 75px;
}
@media screen and (min-width: 768px) {
.p-lesson-lead__img01 {
left: 40px;
top: -140px;
width: 100px;
}
}
.p-lesson-lead__img02 {
position: absolute;
right: 20px;
top: 15px;
width: 85px;
}
@media screen and (min-width: 768px) {
.p-lesson-lead__img02 {
top: 0px;
width: 130px;
}
}
.p-lesson-lead__img03 {
position: absolute;
left: 35px;
width: 100px;
bottom: 35px;
}
@media screen and (min-width: 768px) {
.p-lesson-lead__img03 {
bottom: 100px;
left: 0px;
width: 127px;
}
}
.p-lesson-lead__img04 {
position: absolute;
right: 40px;
width: 85px;
bottom: -20px;
}
@media screen and (min-width: 768px) {
.p-lesson-lead__img04 {
bottom: -20px;
width: 110px;
}
}
.p-lesson-different {
background: url(//eiken-dokugaku.com/wp-content/themes/sango-theme-poripu/assets/img/page/lesson-different-bg_sp.svg) no-repeat center/cover;
}
@media screen and (min-width: 768px) {
.p-lesson-different {
background: url(//eiken-dokugaku.com/wp-content/themes/sango-theme-poripu/assets/img/page/lesson-different-bg.svg) no-repeat center/cover;
}
}
@media screen and (min-width: 768px) {
.p-lesson-different p {
text-align: center;
}
}
.p-lesson-different p:nth-child(n+2) {
margin-top: 10px;
}
@media screen and (min-width: 768px) {
.p-lesson-different p:nth-child(n+2) {
margin-top: 20px;
}
}
.p-lesson-different__head {
text-align: center;
}
.p-lesson-different__head span {
font-size: 1.8rem;
padding-bottom: 12px;
border-bottom: 2px dotted #333;
}
@media screen and (min-width: 768px) {
.p-lesson-different__head span {
font-size: 2.4rem;
}
}
.p-lesson-different__content {
margin-top: 40px;
}
@media screen and (min-width: 768px) {
.p-lesson-different__content {
margin-top: 80px;
}
}
.p-lesson-different__content p {
line-height: 2;
}
.p-lesson-different__accent {
text-align: center;
color: #3575B3;
font-weight: bold;
font-size: 1.6rem;
line-height: 2;
margin: 50px auto 0;
max-width: 660px;
padding: 20px 20px;
}
@media screen and (min-width: 768px) {
.p-lesson-different__accent {
font-size: 1.8rem;
padding: 30px 10px;
}
}
.p-lesson-different__accent span {
line-height: 2;
}
.p-lesson-different__btn {
padding: 15px 20px 15px 20px;
border: 2px solid #3575B3;
margin: auto;
margin-top: 30px;
display: block;
border-radius: 10px;
background: #3575B3;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
color: #fff;
position: relative;
font-size: 1.4rem;
display: flex;
align-items: center;
width: 93%;
transition: all 0.3s;
line-height: 1.4;
max-width: 370px;
font-weight: bold;
}
@media screen and (min-width: 768px) {
.p-lesson-different__btn {
max-width: 580px;
margin-top: 50px;
padding: 20px 65px;
font-size: 1.8rem;
}
}
.p-lesson-different__btn::before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 6px 0 6px 10px;
border-color: transparent transparent transparent #fff;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 15px;
}
@media screen and (min-width: 768px) {
.p-lesson-different__btn::before {
right: 30px;
border-width: 8px 0 8px 14px;
}
}
.p-lesson-different__btn:hover {
text-decoration: none;
transform: translateY(6px);
transition: all 0.3s;
background-color: #fff;
color: #3575B3;
}
.p-lesson-different__btn:hover::before {
border-color: transparent transparent transparent #3575B3;
}
.p-lesson-course {
background-color: #78C4E9;
padding: 30px 0;
}
@media screen and (min-width: 768px) {
.p-lesson-course {
padding: 0px 0 50px;
}
}
@media screen and (min-width: 768px) {
.p-lesson-course-nav {
display: flex;
justify-content: space-between;
}
}
.p-lesson-course-nav__item {
border: #3575B3 7px solid;
background-color: #EDF5F9;
border-radius: 20px;
padding: 30px 25px 30px;
transition: all 0.3s;
color: #333;
font-weight: 500;
filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
display: flex;
flex-direction: column;
justify-content: space-between;
}
@media screen and (min-width: 768px) {
.p-lesson-course-nav__item {
padding: 35px 25px 35px;
height: 420px;
border: #3575B3 8px solid;
width: 31.25%;
}
}
.p-lesson-course-nav__item:nth-child(n+2) {
margin-top: 20px;
}
@media screen and (min-width: 768px) {
.p-lesson-course-nav__item:nth-child(n+2) {
margin-top: 0px;
}
}
.p-lesson-course-nav__item:hover {
transform: translateY(15px);
transition: all 0.3s;
text-decoration: none;
}
.p-lesson-course-nav__item:hover .p-lesson-course-nav__btn:after {
background: url(//eiken-dokugaku.com/wp-content/themes/sango-theme-poripu/assets/img/page/icon-arrow-lightblue.svg) no-repeat center/contain;
transition: all 0.3s;
}
.p-lesson-course-nav__item:hover img {
transform: rotateY(360deg);
transition: all 0.4s;
}
.p-lesson-course-nav__item img {
height: 70px;
width: 0 auto;
}
.p-lesson-course-nav__item h3 {
text-align: center;
font-size: 1.8rem;
font-weight: bold;
margin-bottom: 8px;
}
@media screen and (min-width: 768px) {
.p-lesson-course-nav__item h3 {
font-size: 2.2rem;
}
}
.p-lesson-course-nav__item span {
display: block;
text-align: center;
font-size: 1.3rem;
color: #3575B3;
}
@media screen and (min-width: 768px) {
.p-lesson-course-nav__item span {
font-size: 1.5rem;
}
}
.p-lesson-course-nav__item p {
margin-top: 20px;
font-size: 1.4rem;
}
@media screen and (min-width: 768px) {
.p-lesson-course-nav__item p {
font-size: 1.6rem;
}
}
.p-lesson-course-nav__item p:nth-child(n+2) {
margin-top: 0px;
}
@media screen and (min-width: 768px) {
.p-lesson-course-nav__item p:nth-child(n+2) {
margin-top: 5px;
}
}
.p-lesson-course-nav__item p span {
font-size: 1rem;
color: #6C6C6C;
text-align: left;
line-height: 1.3;
}
@media screen and (min-width: 768px) {
.p-lesson-course-nav__item p span {
font-size: 1.2rem;
}
}
.p-lesson-course-nav__btn {
display: inline-block;
color: #333;
margin: 20px auto 0;
font-size: 1.5rem;
font-weight: bold;
padding-right: 30px;
position: relative;
}
@media screen and (min-width: 768px) {
.p-lesson-course-nav__btn {
margin: 0 auto;
font-size: 1.8rem;
}
}
.p-lesson-course-nav__btn::after {
transition: all 0.3s;
content: "";
position: absolute;
right: 0;
top: 50%;
background: url(//eiken-dokugaku.com/wp-content/themes/sango-theme-poripu/assets/img/page/icon-arrow-blue.svg) no-repeat center/contain;
width: 16px;
height: 16px;
transform: translateY(-50%);
}
.p-lesson-fee {
margin-top: 20px;
padding: 40px 0;
}
@media screen and (min-width: 768px) {
.p-lesson-fee {
padding: 80px 0;
margin: 40px 20px 0;
}
}
.p-lesson-fee-block {
background: #fff;
border: 8px solid #c4dce7;
border-radius: 20px;
padding: 35px 0;
}
@media screen and (min-width: 768px) {
.p-lesson-fee-block {
border-radius: 50px;
padding: 65px 0;
border: 16px solid #c4dce7;
}
}
.p-lesson-fee-block:nth-child(n+2) {
margin-top: 30px;
}
@media screen and (min-width: 768px) {
.p-lesson-fee-block:nth-child(n+2) {
margin-top: 50px;
}
}
.p-lesson-fee-block__inner {
width: 92.5925925926%;
width: 90%;
margin: auto;
}
@media screen and (min-width: 992px) {
.p-lesson-fee-block__inner {
width: 100%;
max-width: 1000px;
}
}
.p-lesson-fee-block__head {
padding-bottom: 15px;
border-bottom: 2px solid #DDDDDD;
}
@media screen and (min-width: 768px) {
.p-lesson-fee-block__head {
padding-bottom: 20px;
}
}
.p-lesson-fee-block__head h3 {
font-size: 2rem;
font-weight: bold;
margin: 10px 0 0;
position: relative;
line-height: 1.4;
z-index: 1;
}
@media screen and (min-width: 768px) {
.p-lesson-fee-block__head h3 {
display: inline-block;
line-height: 1.83;
margin: 0;
font-size: 4rem;
}
}
.p-lesson-fee-block__head span {
font-size: 1.2rem;
display: inline-block;
padding: 1px 7px;
border: 1px solid #3575B3;
color: #3575B3;
border-radius: 4px;
margin-right: 10px;
}
@media screen and (min-width: 768px) {
.p-lesson-fee-block__head span {
font-size: 1.4rem;
padding: 3px 10px;
}
}
.p-lesson-fee-block__head span.lightblue {
display: inline-block;
border: 1px solid #78C4E9;
background-color: #78C4E9;
color: #fff;
}
.p-lesson-fee-block__head p {
font-weight: bold;
font-size: 1.5rem;
color: #3575B3;
margin-top: 5px;
}
@media screen and (min-width: 768px) {
.p-lesson-fee-block__head p {
margin-top: 0;
font-size: 2rem;
}
}
.p-lesson-fee-block__head img {
height: 60px;
width: auto;
position: absolute;
right: 0px;
top: 0;
opacity: 0.5;
z-index: -1;
}
@media screen and (min-width: 768px) {
.p-lesson-fee-block__head img {
opacity: 1;
height: 90px;
top: initial;
right: -100px;
}
}
@media screen and (min-width: 768px) {
.p-lesson-fee-block__content {
display: flex;
justify-content: space-between;
}
}
.p-lesson-fee-block__content h4 {
font-size: 1.6rem;
position: relative;
padding-left: 20px;
margin-bottom: 10px;
}
@media screen and (min-width: 768px) {
.p-lesson-fee-block__content h4 {
padding-left: 30px;
font-size: 2.4rem;
}
}
.p-lesson-fee-block__content h4::before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 8px 0 8px 14px;
border-color: transparent transparent transparent #78C4E9;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
@media screen and (min-width: 768px) {
.p-lesson-fee-block__content h4::before {
border-width: 10px 0 10px 16px;
}
}
@media screen and (min-width: 768px) {
.p-lesson-fee-block__left {
width: 53%;
}
}
.p-lesson-fee-block__left p:nth-child(n+2) {
margin-top: 10px;
}
@media screen and (min-width: 768px) {
.p-lesson-fee-block__left p:nth-child(n+2) {
margin-top: 20px;
}
}
.p-lesson-fee-block__left p span {
color: #3575B3;
font-weight: bold;
}
.p-lesson-fee-block__left .desc {
margin-top: 50px;
max-width: 420px;
font-size: 1.4rem;
line-height: 1.5;
color: #3575B3;
padding: 20px;
background: linear-gradient(to right, #78C4E9, #78C4E9 6px, transparent 6px, transparent 4px) repeat-x left top/10px 2px, linear-gradient(to right, #78C4E9, #78C4E9 6px, transparent 6px, transparent 4px) repeat-x left bottom/10px 2px, linear-gradient(to bottom, #78C4E9, #78C4E9 6px, transparent 6px, transparent 4px) repeat-y left top/2px 10px, linear-gradient(to bottom, #78C4E9, #78C4E9 6px, transparent 6px, transparent 4px) repeat-y right top/2px 10px;
}
@media screen and (min-width: 768px) {
.p-lesson-fee-block__left .desc {
font-size: 1.6rem;
line-height: 1.75;
}
}
@media screen and (min-width: 768px) {
.p-lesson-fee-block__right {
width: 43%;
}
}
.p-lesson-fee-block__right .info {
color: #3575B3;
margin-top: 10px;
font-size: 1.2rem;
}
@media screen and (min-width: 768px) {
.p-lesson-fee-block__right .info {
font-size: 1.4rem;
}
}
.p-lesson-fee-block__box {
padding: 15px 25px;
border-radius: 16px;
background-color: #EDF5F9;
line-height: 1.625;
}
@media screen and (min-width: 768px) {
.p-lesson-fee-block__box {
padding: 20px 35px;
}
}
.p-lesson-fee-block__box:nth-child(n+2) {
margin-top: 10px;
}
@media screen and (min-width: 768px) {
.p-lesson-fee-block__box:nth-child(n+2) {
margin-top: 15px;
}
}
.p-lesson-fee-block__box h5 {
font-size: 1.5rem;
font-weight: bold;
margin: 0;
}
@media screen and (min-width: 768px) {
.p-lesson-fee-block__box h5 {
font-size: 2rem;
}
}
.p-lesson-fee-block__box p {
font-weight: bold;
color: #3575B3;
margin-top: 2px;
}
@media screen and (min-width: 768px) {
.p-lesson-fee-block__box p {
margin-top: 6px;
}
}
.p-lesson-fee-block__box span {
display: block;
font-size: 1.3rem;
line-height: 1.3;
color: #6C6C6C;
margin-top: 4px;
}
@media screen and (min-width: 768px) {
.p-lesson-fee-block__box span {
font-size: 1.4rem;
}
}
.p-lesson-schedule {
padding: 60px 0 30px;
}
@media screen and (min-width: 768px) {
.p-lesson-schedule {
padding: 120px 0 40px;
}
}
.p-lesson-schedule .text {
color: #3575B3;
font-size: 1.3rem;
margin-top: 10px;
}
@media screen and (min-width: 768px) {
.p-lesson-schedule .text {
font-size: 1.4rem;
}
}
.p-lesson-schedule__wrap {
margin-top: 40px;
}
.p-lesson-schedule__inner {
overflow-x: scroll;
}
@media screen and (min-width: 1400px) {
.p-lesson-schedule__inner {
overflow-x: initial;
}
}
.p-lesson-schedule__inner table {
border-collapse: collapse;
margin: 0 auto;
padding: 0;
table-layout: fixed;
width: 960px;
}
.p-lesson-schedule__inner table tr {
background-color: #F4F4F4;
padding: 0.35em;
border-bottom: 3px solid #fff;
}
.p-lesson-schedule__inner table th,
.p-lesson-schedule__inner table td {
padding: 12px 22px;
border-right: 3px solid #fff;
}
.p-lesson-schedule__inner table th {
font-size: 1.6rem;
}
.p-lesson-schedule__inner table th:first-child {
position: sticky;
left: 0;
}
.p-lesson-schedule__inner table th:first-child:before {
content: "";
position: absolute;
top: -1px;
left: -1px;
width: 100%;
height: 100%;
border: 1px solid #ccc;
}
.p-lesson-schedule__inner table td {
font-size: 1.6rem;
}
.p-lesson-schedule__inner table td:first-child {
background-color: #78C4E9;
position: sticky;
left: 0;
}
.p-lesson-schedule__inner table td:first-child:before {
content: "";
position: absolute;
top: -1px;
left: -1px;
width: 100%;
height: 100%;
border: 1px solid #fff;
}
.p-lesson-schedule__inner table thead tr {
background-color: #78C4E9;
color: #fff;
}
.p-lesson-schedule__inner table tbody th {
background: #3575B3;
color: #fff;
}
.p-lesson-schedule__inner .available {
background-color: #F8D74C;
color: #EC6047;
font-weight: bold;
}
.p-profile .bold {
font-weight: bold;
}
.p-profile .blue {
color: #3575B3;
font-weight: bold;
font-size: 120%;
display: inline;
}
.p-profile .red {
color: #EC6047;
font-weight: bold;
font-size: 120%;
}
.p-profile .quote {
display: inline-block;
padding: 20px;
background-color: #F7FBFD;
color: #3575B3;
line-height: 1.625;
font-size: 1.3rem;
}
@media screen and (min-width: 768px) {
.p-profile .quote {
font-size: 1.6rem;
}
}
.p-profile-nav {
margin: 40px auto;
}
@media screen and (min-width: 768px) {
.p-profile-nav {
margin: 60px auto 80px;
max-width: 872px;
}
}
.p-profile-nav__list {
display: flex;
justify-content: space-between;
align-items: center;
text-align: center;
flex-direction: column;
}
@media screen and (min-width: 768px) {
.p-profile-nav__list {
flex-direction: row;
}
}
.p-profile-nav__item a {
display: block;
color: #333;
font-size: 1.4rem;
font-weight: bold;
padding-right: 12px;
position: relative;
}
@media screen and (min-width: 768px) {
.p-profile-nav__item a {
padding-right: 25px;
font-size: 1.6rem;
}
}
.p-profile-nav__item a::after {
content: "";
position: absolute;
right: 0;
top: 50%;
background: url(//eiken-dokugaku.com/wp-content/themes/sango-theme-poripu/assets/img/page/icon-arrow-blue.svg) no-repeat center/contain;
width: 16px;
height: 16px;
transform: translatey(-50%);
}
@media screen and (min-width: 768px) {
.p-profile-nav__item a::after {
right: 0;
}
}
.p-profile-nav__item a:hover {
text-decoration: none;
}
.p-profile-nav__item {
margin: 10px 0;
width: 100%;
max-width: 233px;
transition: all 0.3s;
}
@media screen and (min-width: 768px) {
.p-profile-nav__item {
max-width: 250px;
width: initial;
}
}
.p-profile-nav__item:nth-child(even) a::after {
background: url(//eiken-dokugaku.com/wp-content/themes/sango-theme-poripu/assets/img/page/icon-arrow-lightblue.svg) no-repeat center/contain;
}
.p-profile-nav__item:hover {
transform: translateY(6px);
transition: all 0.3s;
}
.p-profile-greeting__wrap {
background-color: #fff;
padding: 20px 0;
}
@media screen and (min-width: 768px) {
.p-profile-greeting__wrap {
padding: 40px 0;
}
}
.p-profile-greeting__photo {
position: relative;
}
.p-profile-greeting-block:nth-child(n+2) {
margin-top: 60px;
}
@media screen and (min-width: 768px) {
.p-profile-greeting-block:nth-child(n+2) {
margin-top: 100px;
}
}
.p-profile-greeting-block--01 {
display: flex;
flex-direction: column-reverse;
}
@media screen and (min-width: 768px) {
.p-profile-greeting-block--01 {
flex-direction: row;
}
}
@media screen and (min-width: 768px) {
.p-profile-greeting-block--01 div:first-child {
width: 56%;
}
}
@media screen and (min-width: 768px) {
.p-profile-greeting-block--01 div:nth-child(2) {
width: 44%;
}
}
.p-profile-greeting-block--02 {
position: relative;
z-index: 1;
}
@media screen and (min-width: 768px) {
.p-profile-greeting-block--02::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
background: url(//eiken-dokugaku.com/wp-content/themes/sango-theme-poripu/assets/img/page/profile-greeting-bg01.png) no-repeat;
background-position: right bottom;
background-size: auto;
width: 100%;
height: 100%;
z-index: -1;
}
}
.p-profile-greeting-block--02 img {
width: 90%;
margin: auto;
}
.p-profile-greeting-block--03 {
position: relative;
z-index: 1;
}
@media screen and (min-width: 768px) {
.p-profile-greeting-block--03::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
background: url(//eiken-dokugaku.com/wp-content/themes/sango-theme-poripu/assets/img/page/profile-greeting-bg02.png) no-repeat;
background-position: right top 30%;
background-size: auto;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.6;
}
}
.p-profile-greeting-block--03 img {
width: 80%;
margin: auto;
}
.p-profile-greeting-block--04 {
position: relative;
z-index: 1;
}
@media screen and (min-width: 768px) {
.p-profile-greeting-block--04::after {
content: "";
position: absolute;
right: 0;
bottom: 20%;
background: url(//eiken-dokugaku.com/wp-content/themes/sango-theme-poripu/assets/img/page/profile-greeting-bg03.png) no-repeat;
background-position: right bottom;
background-size: auto;
width: 100%;
height: 100%;
z-index: -1;
}
}
.p-profile-greeting-block--04 img {
width: 90%;
margin: auto;
}
.p-profile-greeting-block h3 {
position: relative;
font-size: 1.6rem;
padding: 10px;
padding-left: 1.5rem;
padding-right: 5px;
border-top: 2px dashed #78C4E9;
border-bottom: 2px dashed #78C4E9;
display: inline-block;
margin: 0;
line-height: 1.5;
}
@media screen and (min-width: 768px) {
.p-profile-greeting-block h3 {
padding-left: 2.5rem;
font-size: 2rem;
}
}
.p-profile-greeting-block h3::after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 7px 0 7px 11px;
border-color: transparent transparent transparent #78C4E9;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
@media screen and (min-width: 768px) {
.p-profile-greeting-block h3::after {
border-width: 10px 0 10px 16px;
}
}
.p-profile-greeting-block p {
margin-top: 20px;
line-height: 1.6875;
}
@media screen and (min-width: 768px) {
.p-profile-greeting-block p {
margin-top: 30px;
}
}
.p-profile-achievements {
padding: 40px 0;
margin: 0 0 20px;
}
@media screen and (min-width: 768px) {
.p-profile-achievements {
padding: 80px 0;
margin: 0;
}
}
.p-profile-achievements__wrap {
background-color: #fff;
padding: 20px 10px;
}
@media screen and (min-width: 768px) {
.p-profile-achievements__wrap {
padding: 40px 0;
}
}
.p-profile-achievements__inner {
margin: auto;
}
@media screen and (min-width: 768px) {
.p-profile-achievements__inner {
max-width: 800px;
}
}
.p-profile-achievements__list span {
color: #3575B3;
font-weight: bold;
font-size: 1.5rem;
display: inline-block;
position: relative;
padding-left: 15px;
line-height: 1.8;
}
@media screen and (min-width: 768px) {
.p-profile-achievements__list span {
padding-left: 25px;
letter-spacing: 0.06em;
font-size: 120%;
}
}
.p-profile-achievements__list span::after {
content: "";
position: absolute;
left: 0;
top: 10px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #FAC800;
}
@media screen and (min-width: 768px) {
.p-profile-achievements__list span::after {
top: 50%;
width: 14px;
height: 14px;
transform: translateY(-50%);
}
}
.p-profile-achievements p {
margin-top: 20px;
line-height: 1.6875;
}
@media screen and (min-width: 768px) {
.p-profile-achievements p {
margin-top: 30px;
}
}
.p-profile-achievements-heading {
text-align: center;
margin-bottom: 40px;
position: relative;
overflow: hidden;
}
@media screen and (min-width: 768px) {
.p-profile-achievements-heading {
margin-bottom: 60px;
}
}
.p-profile-achievements-heading::after {
content: "";
position: absolute;
right: 65%;
top: 45%;
background: url(//eiken-dokugaku.com/wp-content/themes/sango-theme-poripu/assets/img/page/profile-achievment-heading.svg) no-repeat center/contain;
width: 270px;
height: 11px;
}
@media screen and (min-width: 768px) {
.p-profile-achievements-heading::after {
width: 270px;
height: 11px;
right: 0;
top: 50%;
}
}
.p-profile-achievements-heading::before {
content: "";
position: absolute;
left: 65%;
top: 45%;
background: url(//eiken-dokugaku.com/wp-content/themes/sango-theme-poripu/assets/img/page/profile-achievment-heading.svg) no-repeat center/contain;
width: 270px;
height: 11px;
}
@media screen and (min-width: 768px) {
.p-profile-achievements-heading::before {
width: 270px;
height: 11px;
left: 0;
top: 50%;
}
}
.p-profile-achievements-heading__main {
display: inline;
font-size: 3rem;
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.03em;
text-align: center;
font-size: 2rem;
background-color: #fff;
padding: 0 7px;
}
@media screen and (min-width: 768px) {
.p-profile-achievements-heading__main {
font-size: 2.8rem;
}
}
.p-profile-teacher {
background-color: #78C4E9;
padding: 30px 0;
}
@media screen and (min-width: 768px) {
.p-profile-teacher {
padding: 0px 0 50px;
}
}
.p-profile-teacher__content {
display: flex;
flex-direction: column;
align-items: center;
}
@media screen and (min-width: 768px) {
.p-profile-teacher__content {
align-items: flex-start;
flex-direction: row;
}
}
.p-profile-teacher__photo {
color: #fff;
text-align: center;
font-weight: bold;
font-size: 1.5rem;
max-width: 200px;
}
@media screen and (min-width: 768px) {
.p-profile-teacher__photo {
margin-top: 20px;
width: 20.1041666667%;
font-size: 1.6rem;
}
}
.p-profile-teacher__list {
border-radius: 25px;
background-color: #fff;
padding: 30px 20px;
margin-top: 20px;
}
@media screen and (min-width: 768px) {
.p-profile-teacher__list {
margin-top: 0;
border-radius: 40px;
padding: 40px 55px;
width: 73.5416666667%;
}
}
.p-profile-teacher__list dl {
margin-top: 0;
}
.p-profile-teacher__list dl:nth-child(n+2) {
margin-top: 20px;
}
@media screen and (min-width: 768px) {
.p-profile-teacher__list dl:nth-child(n+2) {
margin-top: 25px;
}
}
.p-profile-teacher__list dt {
padding-left: 15px;
color: #3575B3;
font-weight: bold;
position: relative;
font-size: 1.4rem;
width: 38%;
}
@media screen and (min-width: 768px) {
.p-profile-teacher__list dt {
padding-left: 20px;
font-size: 1.6rem;
width: 35%;
}
}
.p-profile-teacher__list dt::after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 6px 0 6px 10px;
border-color: transparent transparent transparent #78C4E9;
position: absolute;
top: 5px;
left: 0;
}
@media screen and (min-width: 768px) {
.p-profile-teacher__list dt::after {
border-width: 8px 0 8px 13px;
}
}
.p-profile-teacher__list dd {
font-size: 1.4rem;
color: #333;
width: 62%;
line-height: 1.4;
}
@media screen and (min-width: 768px) {
.p-profile-teacher__list dd {
width: 65%;
font-size: 1.6rem;
}
}
.p-profile-teacher__list dd span {
margin-top: 8px;
display: block;
color: #3575B3;
font-size: 1.2rem;
line-height: 1.3;
}
@media screen and (min-width: 768px) {
.p-profile-teacher__list dd span {
font-size: 1.4rem;
}
}
.p-profile-blog__wrap {
display: flex;
flex-direction: column-reverse;
}
@media screen and (min-width: 768px) {
.p-profile-blog__wrap {
flex-direction: row;
justify-content: space-between;
}
}
.p-profile-blog__content {
margin-top: 20px;
}
@media screen and (min-width: 768px) {
.p-profile-blog__content {
margin-top: 0px;
width: 64.1666666667%;
}
}
.p-profile-blog__img {
max-width: 90%;
margin: auto;
}
@media screen and (min-width: 768px) {
.p-profile-blog__img {
max-width: initial;
width: 29.1666666667%;
}
}
.p-profile-blog__btn a {
display: block;
margin-top: 20px;
font-weight: bold;
color: #fff;
background-color: #3575B3;
padding: 15px 56px 15px 26px;
border-radius: 10px;
font-size: 1.4rem;
position: relative;
}
.p-profile-blog__btn a::before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 7px;
border-color: transparent transparent transparent #fff;
position: absolute;
top: 50%;
right: 30px;
transform: translateY(-50%);
}
.p-profile-blog p:nth-child(n+2) {
margin-top: 20px;
}
@media screen and (min-width: 768px) {
.p-profile-blog p:nth-child(n+2) {
margin-top: 25px;
}
}
.p-voice__content {
padding-top: 40px;
}
@media screen and (min-width: 768px) {
.p-voice__content {
padding-top: 80px;
}
}
.p-voice-desc {
margin: 20px auto 0;
max-width: 660px;
}
@media screen and (min-width: 768px) {
.p-voice-desc {
margin: 40px auto 0;
padding: 30px 10px;
}
}
.p-voice-desc__text {
color: #3575B3;
padding: 20px;
background-color: #F7FBFD;
color: #3575B3;
line-height: 1.625;
font-size: 1.3rem;
}
@media screen and (min-width: 768px) {
.p-voice-desc__text {
text-align: center;
font-size: 1.6rem;
}
}
.p-voice__list {
padding: 40px 0 0;
}
@media screen and (min-width: 768px) {
.p-voice__list {
padding: 100px 0 0;
}
}
.p-voice-item {
background-color: #fff;
padding: 12px;
position: relative;
}
@media screen and (min-width: 768px) {
.p-voice-item {
padding: 20px;
}
}
.p-voice-item:nth-child(n+2) {
margin-top: 30px;
}
@media screen and (min-width: 768px) {
.p-voice-item:nth-child(n+2) {
margin-top: 50px;
}
}
.p-voice-item::after {
content: "";
position: absolute;
right: 0;
top: 0;
background: url(//eiken-dokugaku.com/wp-content/themes/sango-theme-poripu/assets/img/page/voice-item-triangle.svg) no-repeat center/contain;
width: 68px;
height: 53px;
}
@media screen and (min-width: 768px) {
.p-voice-item::after {
width: 157px;
height: 119px;
}
}
.p-voice-item__inner {
border: 2px dashed #3575B3;
padding: 25px 20px;
}
@media screen and (min-width: 768px) {
.p-voice-item__inner {
padding: 60px;
}
}
.p-voice-item__title {
font-size: 1.7rem;
margin-top: 6px;
font-weight: 700;
padding-bottom: 10px;
border-bottom: 1px solid #DDDDDD;
}
@media screen and (min-width: 768px) {
.p-voice-item__title {
padding-bottom: 20px;
font-size: 3.2rem;
}
}
.p-voice-item__name {
font-size: 1.3rem;
color: #737373;
}
@media screen and (min-width: 768px) {
.p-voice-item__name {
width: 164px;
font-size: 1.8rem;
}
}
.p-voice-item__course {
padding: 3px 6px;
font-size: 1.3rem;
margin-left: 10px;
font-weight: bold;
}
@media screen and (min-width: 768px) {
.p-voice-item__course {
margin-left: 25px;
font-size: 1.8rem;
}
}
.p-voice-item__content {
margin-top: 20px;
}
@media screen and (min-width: 768px) {
.p-voice-item__content {
margin-top: 40px;
}
}
.p-voice-item__bottom {
margin-top: 25px;
}
@media screen and (min-width: 768px) {
.p-voice-item__bottom {
margin-top: 50px;
}
}
.p-voice-item__subtitle {
font-size: 1.5rem;
color: #3575B3;
font-weight: bold;
position: relative;
display: inline-block;
margin: 0;
}
@media screen and (min-width: 768px) {
.p-voice-item__subtitle {
font-size: 2.4rem;
}
}
.p-voice-item__subtitle::after {
content: "";
position: absolute;
right: -56px;
top: 50%;
background: url(//eiken-dokugaku.com/wp-content/themes/sango-theme-poripu/assets/img/page/voice-item-balloon.svg) no-repeat center/contain;
width: 35px;
height: 22px;
transform: translate(-50%, -50%);
}
@media screen and (min-width: 768px) {
.p-voice-item__subtitle::after {
right: -76px;
width: 48px;
height: 30px;
}
}
.p-voice-item__message {
margin-top: 12px;
}
@media screen and (min-width: 768px) {
.p-voice-item__message {
margin-top: 24px;
}
}
.p-voice-noitem {
font-size: 1.4rem;
text-align: center;
}
@media screen and (min-width: 768px) {
.p-voice-noitem {
font-size: 1.6rem;
}
}
.p-policy__content h2 {
text-align: center;
font-size: 2.2rem;
}
@media screen and (min-width: 768px) {
.p-policy__content h2 {
font-size: 3rem;
}
}
.p-policy__content h3 {
font-size: 2rem;
color: #3575B3;
}
@media screen and (min-width: 768px) {
.p-policy__content h3 {
font-size: 2.8rem;
}
}
.p-policy__content h3:nth-child(n+2) {
margin-top: 40px;
}
@media screen and (min-width: 768px) {
.p-policy__content h3:nth-child(n+2) {
margin-top: 80px;
}
} .sp-only {
display: block;
}
@media screen and (min-width: 768px) {
.sp-only {
display: none !important;
}
}
.pc-only {
display: none;
}
@media screen and (min-width: 768px) {
.pc-only {
display: block;
}
}
.u-visually-hidden {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
margin: -1px;
padding: 0;
width: 1px;
height: 1px;
border: 0;
white-space: nowrap;
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
}
.u-line-clamp-1 {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden; line-height: 1.5em;
max-height: 4.5em;
}
.u-line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden; line-height: 1.5em;
max-height: 4.5em;
}