body{
-webkit-text-size-adjust: 100%;
}
#topBanner {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 10000;
background-color: rgba(255, 255, 255, 0.9);
}
#topBanner .image img {
max-width: 950px;
max-height: 450px;
margin: auto;
}
#topBanner .image .mode_pc {
display: block;
}
#topBanner .image .mode_sp {
display: none;
}
#topBanner .closeButton {
position: absolute;
top: 50px;
right: 50px;
width: 50px;
height: 50px;
}
#topBanner .closeButton span {
position: absolute;
left: 0;
right: 0;
height: 2px;
background-color: #000000;
margin: auto;
}
#topBanner .closeButton span:nth-of-type(1) {
top: 0;
bottom: 0;
left: 0;
transform: translateY(50%) translateY(-1px) rotate(-45deg);
}
#topBanner .closeButton span:nth-of-type(2) {
top: 0;
bottom: 0;
left: 0;
transform: translateY(-50%) translateY(1px) rotate(45deg);
}
@media screen and (max-width: 767px) {
#topBanner .image img {
max-width: 80vh;
max-height: 80vh;
}
#topBanner .image .mode_pc {
display: none;
}
#topBanner .image .mode_sp {
display: block;
}
#topBanner .closeButton {
top: 10px;
right: 10px;
}
}
#top_wrapper {
background: #fff;
position: relative;
} #mv_both {
opacity: 0;
filter: blur(8px);
transition: all .4s ease-out;
-ms-filter: blur(8px);
-ms-transition: all .4s ease-out;
-webkit-filter: blur(8px);
-webkit-transition: all .4s ease-out;
z-index: -1;
display: none; width: 100vw;
height: 113vw !important;
margin-bottom: 30px;
}
#mv_both .inner {
position: relative;
}
#maximage {
width: 100% !important;
position: static !important;
}
#maximage a{
width: 100vw;
height: 113vw;
display: block;
}
#maximage li{
height: 113vw;
}  .before_border_sp {
display: none;
}
#mv_ttl {
padding: 40px 0 45px;
}
#mv_ttl h2 {
display: block;
text-align: center;
font-size: 16px;
line-height: 32px;
font-weight: 100;
} #mv-pc1020un { min-height: 36vw;
position: relative;
overflow: hidden;
margin-bottom: 50px;
}
#mv-pc1020un div {
display: none;
}
#mv-pc1020un div p {
position: absolute;
top: 0;
}
#mv-pc1020un #sld1 {
background: #d9dfeb url(/images/top/pc1.jpg?2103) no-repeat top center; min-height: 100%;
background-size: 100vw;
position: absolute;
width: 100vw;
}
#mv-pc1020un #sld1 span {
position: absolute;
bottom: 42%;
left: 65px; width: 19vw;
display: block;
}
#mv-pc1020un #sld2 {
background: #d9dfeb url(/images/top/pc2.jpg) no-repeat top center; min-height: 100%;
background-size: 100vw;
position: absolute;
width: 100vw;
}
#mv-pc1020un #sld2 span {
position: absolute;
bottom: 45%;
left: 65px; width: 17vw;
display: block;
} .before_border {
font-size: 14px; position: relative;
text-align: center;
padding-left: 75px;
height: 125px;
margin: 20px 0 40px;
line-height: 15px;
overflow: hidden;
opacity: 0;
display: none;
}
.before_border::before {
content: " ";
display: inline-block;
background: #3c3c3c;
width: 2px;
height: 260px;
position: absolute;
top: -110px;
left: 50%;
-webkit-animation: scroll-line_ty03 5.5s infinite;
animation: scroll-line_ty03 5.5s infinite;
-webkit-transition: all cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition: all cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
#contents_handrail dl dt {
padding: 0 0 35px;
} #contents_topics {
padding-top: 60px;
position: relative;
margin-bottom: 100px;
} #contents_topics > span.mask {
height: 90px;
overflow: hidden;
position: absolute;
top: 0;
left: 50%;
width: 4px;
opacity: 0;
}
#contents_topics > span.mask::before {
content: " ";
display: inline-block;
background: #3c3c3c;
width: 2px;
height: 260px;
position: absolute;
top: -130px;
left: 50%;
-webkit-animation: scroll-line_ty02 5.5s infinite;
animation: scroll-line_ty02 5.5s infinite;
-webkit-transition: all cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition: all cubic-bezier(0.785, 0.135, 0.15, 0.86);
} #contents_topics ol{
display: flex;
flex-wrap: wrap;
margin-top: 20px;
}
#contents_topics ol li{
width: 49%;
margin-top: 20px;
}
#contents_topics ol li:nth-of-type(odd){
margin-right: 22px;
} #contents_news {
position: relative;
}
#contents_news > span.mask {
height: 105px;
overflow: hidden;
position: absolute;
top: 0;
left: 50%;
width: 4px;
opacity: 0;
}
#contents_news > span.mask::before {
content: " ";
display: inline-block;
background: #3c3c3c;
width: 2px;
height: 105px;
position: absolute;
top: 20px;
left: 50%;
-webkit-animation: playscroll_ty02 5.5s infinite;
animation: playscroll_ty02 5.5s infinite;
-webkit-transition: all cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition: all cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
#contents_news h3 {
font-size: 18px;
margin-bottom: 5px;
}
#contents_news .news_area {
position: relative; }
#contents_news .news_area > div {
width: 860px;
border-top: #3c3c3c 2px solid;
border-bottom: #3c3c3c 2px solid;
background: #F0F0F0;
padding: 20px 20px 10px 20px;
margin-bottom: 5px;
}
#contents_news .news_area > div dl {
overflow: hidden;
font-size: 18px;
margin-bottom: 10px;
}
#contents_news .news_area > div dl dt {
float: left;
}
#contents_news .news_area > div dl dd {
margin-left: 110px;
}
#contents_news .news_area > div dl dd a {
color: #525252;
}
#contents_news .news_area > div dl dd a:hover {
color: #67b5bf;
text-decoration: underline;
}
#contents_news .news_area .btn_arrow {
text-align: right;
font-size: 18px;
}
#contents_news .news_area .btn_arrow::before {
font-size: 10px !important;
}
#contents_news .news_area span.mask {
height: 133px;
overflow: hidden;
position: absolute;
top: 135px;
left: 50%;
width: 4px;
opacity: 0;
}
#contents_news .news_area span.mask::after {
content: " ";
display: inline-block;
background: #3c3c3c;
width: 2px;
height: 110px;
position: absolute;
top: 0;
left: 50%;
-webkit-animation: playscroll_ty02 5.5s infinite;
animation: playscroll_ty02 5.5s infinite;
-webkit-transition: all cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition: all cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
#contents_news h4 {
width: 260px;
font-size: 25px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
border: 4px #000 solid;
background: #fff;
margin: 0 auto 15px;
}
#contents_news .sp_shopimg {
display: none;
}
#contents_news div.btn a {
position: relative;
width: 300px;
font-size: 18px !important;
height: 50px;
color: #fff;
box-shadow: 3px 3px 4px #5b5a5a;
-ms-box-shadow: 3px 3px 4px #5b5a5a;
-webkit-box-shadow: 3px 3px 4px #5b5a5a;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
margin: 0 auto 50px;
} #contents_feature01 {
position: relative;
padding-top: 50px;
}
#contents_feature01 > span.mask_f01 {
height: 133px;
overflow: hidden;
position: absolute;
top: -10px;
left: 50%;
width: 2px;
}
#contents_feature01 > span.mask_f01::after {
content: " ";
display: inline-block;
background: #000;
width: 1px;
height: 263px;
position: absolute;
top: -110px;
left: 50%;
-webkit-animation: scroll-line_ty02 5.5s infinite;
animation: scroll-line_ty02 5.5s infinite;
-webkit-transition: all cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition: all cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
#contents_feature01 .ttl_ext {
font-size: 20px;
margin: 0 auto 20px;
text-align: center;
position: relative;
padding-bottom: 100px;
}
#contents_feature01 .top_both_ttl {
background: #fff;
margin-bottom: 10px;
}
#contents_feature01 .top_both_ttl span {
margin-top: 30px;
}
#contents_feature01 span.mask_f02 {
height: 133px;
overflow: hidden;
position: absolute;
top: 230px;
left: 50%;
width: 2px;
}
#contents_feature01 span.mask_f02::after {
content: " ";
display: inline-block;
background: #000;
width: 1px;
height: 133px;
position: absolute;
top: 0;
left: 50%;
-webkit-animation: playscroll_ty02 5.5s infinite;
animation: playscroll_ty02 5.5s infinite;
-webkit-transition: all cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition: all cubic-bezier(0.785, 0.135, 0.15, 0.86);
} #contents_feature02 {
position: relative;
padding-top: 80px;
}
#contents_feature02 h3 {
padding-top: 10px;
}
#contents_feature02 span.mask_f03 {
height: 100px;
overflow: hidden;
position: absolute;
top: 0;
left: 50%;
width: 4px;
opacity: 0;
}
#contents_feature02 span.mask_f03::after {
content: " ";
display: inline-block;
background: #3c3c3c;
width: 2px;
height: 263px;
position: absolute;
top: -130px;
left: 50%;
-webkit-animation: scroll-line_ty02 5.5s infinite;
animation: scroll-line_ty02 5.5s infinite;
-webkit-transition: all cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition: all cubic-bezier(0.785, 0.135, 0.15, 0.86);
} #contents_feature_popu {
background: #F0F0F0;
overflow: hidden;
padding: 40px 0 40px 0;
position: relative;
margin-bottom: 35px;
}
#contents_feature_popu h3 {
position: absolute;
top: 0;
left: 0;
width: 28%;
}
#contents_feature_popu h3 span {
position: relative;
background: #3c3c3c;
padding: 20px 10px 20px 20px;
text-align: right;
color: #fff;
font-size: 20px;
font-weight: 600;
display: block;
}
#contents_feature_popu h3:after {
position: absolute;
content: '';
right: -43px;
top: 0px;
border: none;
border-left: solid 2.5em #3c3c3c;
border-bottom: solid 3.7em transparent;
}
.rankfirstbox {
overflow: hidden;
margin-bottom: 40px;
}
.rankfirstbox dt {
float: left;
}
.rankfirstbox dt img {
display: block;
}
.rankfirstbox dd {
margin-left: 580px;
}
.rankfirstbox dd strong {
display: block;
margin-bottom: 20px;
}
.rankfirstbox dd h4 {
font-size: 28px;
font-weight: 600;
margin-bottom: 20px;
}
.rankfirstbox dd h4 span {
margin-left: 10px;
vertical-align: 5px;
}
.rankfirstbox dd .tabbox {
margin-bottom: 20px;
overflow: hidden;
}
.rankfirstbox dd .tabbox li {
float: left;
border-radius: 10px;
padding: 0 10px;
font-size: 13px;
line-height: 20px;
text-align: center;
color: #fff;
background: #3c3c3c;
margin-right: 10px !important;
}
.rankfirstbox dd p {
font-size: 14px;
line-height: 26px;
margin-bottom: 20px;
}
.rankfirstbox dd div.btn,
#contents_feature_popu .sidebox li div.btn {
background: #fff;
width: 300px;
}
.rankBottom img{
width: 270px;
}
#contents_feature_popu .sidebox li {
float: left;
width: 565px;
margin-right: 10px;
}
#contents_feature_popu .sidebox li:last-child {
margin-right: 0;
}
.rankunderbox {
overflow: hidden;
margin-bottom: 10px;
}
.rankunderbox dt {
float: left;
}
.rankunderbox dt iframe {
width: 270px;
height: 152px;
}
.rankunderbox dd {
margin-left: 285px;
}
.rankunderbox dd strong {
display: block;
margin-bottom: 10px;
width: 120px;
}
.rankunderbox dd h4 {
font-size: 20px;
line-height: 20px;
font-weight: 600;
margin-bottom: 5px;
}
.rankunderbox dd h4 span {
margin-left: 10px;
vertical-align: 0;
}
.rankunderbox dd h4 span img {
width: 20px;
height: auto;
vertical-align: -1px;
}
.rankunderbox dd h4 strong {
display: inline-block;
margin: 0 0 0 10px;
font-size: 12px;
color: #fff;
background: #3c3c3c;
padding: 0 5px;
line-height: 22px;
vertical-align: 3px;
width: auto !important;
}
.rankunderbox dd .tabbox {
overflow: hidden;
margin-bottom: 20px;
}
.rankunderbox dd .tabbox li {
float: left;
border-radius: 10px;
padding: 0 10px;
font-size: 13px;
line-height: 20px;
text-align: center;
color: #fff;
background: #3c3c3c;
width: auto !important;
margin-right: 10px !important;
}
#contents_feature_popu .sidebox li p {
font-size: 13px;
line-height: 22px;
letter-spacing: 0;
margin-bottom: 14px;
}
.rankfirstbox dd div a {
width: 290px;
margin: 0;
}
#contents_feature_popu .sidebox li div a {
width: 260px;
margin: 0;
} #contents_quality {
position: relative;
padding-top: 70px;
margin: 50px 0 155px;
}
#contents_quality span.mask {
height: 133px;
overflow: hidden;
position: absolute;
top: 0;
left: 50%;
width: 4px;
opacity: 0;
}
#contents_quality span.mask::after {
content: " ";
display: inline-block;
background: #3c3c3c;
width: 2px;
height: 263px;
position: absolute;
top: -140px;
left: 50%;
-webkit-animation: scroll-line_ty02 5.5s infinite;
animation: scroll-line_ty02 5.5s infinite;
-webkit-transition: all cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition: all cubic-bezier(0.785, 0.135, 0.15, 0.86);
} .featbox {
position: relative;
}
.featbox p {
font-size: 18px;
line-height: 32px;
color: #fff;
text-align: center;
position: relative;
z-index: 1;
padding-top: 28px;
margin-bottom: 20px;
}
.featbox.type02 p{
padding-top: 49px;
margin-bottom: 15px;
}
.featbox span {
display: block;
position: absolute;
top: 0;
left: 0;
}
.featbox span img {
width: 100%;
}
.featbox div a {
z-index: 1;
}
.featbox div.btn_both_gren a {
box-shadow: 4px 4px #3a6166;
-ms-box-shadow: 4px 4px #3a6166;
-webkit-box-shadow: 4px 4px #3a6166;
}
.featbox div.btn_both_gren a:hover {
background: #a8e2ea;
opacity: 1 !important;
} #contents_movie {
position: relative;
padding-top: 40px;
margin-bottom: 40px;
}
#contents_movie span.mask {
height: 105px;
overflow: hidden;
position: absolute;
top: 0;
left: 50%;
width: 2px;
}
#contents_movie span.mask::after {
content: " ";
display: inline-block;
background: #000;
width: 1px;
height: 263px;
position: absolute;
top: -120px;
left: 50%;
-webkit-animation: scroll-line_ty02 5.5s infinite;
animation: scroll-line_ty02 5.5s infinite;
-webkit-transition: all cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition: all cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
#contents_movie h3 {
font-size: 40px;
text-align: center;
margin: 20px auto 30px;
position: relative;
font-weight: 400;
font-family: schoolbook;
font-style: italic;
}
#contents_movie .ytbox {
position: relative;
padding-top: 56.25%;
margin: 0 auto;
border: #000 solid 1px;
padding: 5px;
width: 875px;
height: 480px;
}
#contents_movie .ytbox iframe {
position: absolute;
top: 5px;
left: 5px;
width: 875px !important;
height: 480px !important;
} #contents_insta {
position: relative;
padding-top: 50px;
margin-bottom: 40px;
}
#contents_insta span.mask {
height: 100px;
overflow: hidden;
position: absolute;
top: 0;
left: 50%;
width: 2px;
}
#contents_insta span.mask::after {
content: " ";
display: inline-block;
background: #000;
width: 1px;
height: 263px;
position: absolute;
top: -130px;
left: 50%;
-webkit-animation: scroll-line_ty02 5.5s infinite;
animation: scroll-line_ty02 5.5s infinite;
-webkit-transition: all cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition: all cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
#contents_insta h3 {
font-size: 40px;
text-align: center;
margin: 20px auto 30px;
position: relative;
font-weight: 400;
font-family: schoolbook;
font-style: italic;
}
#contents_insta .sidebox {
overflow: hidden;
margin-bottom: 45px;
text-align: center;
}
.media-grid .media-list-item {
border: #000 solid 1px;
padding: 5px;
width: 180px;
height: 180px;
display: inline-block;
margin: 0 5px;
} #contents_insta h4 {
font-size: 24px;
text-align: center;
margin: 0 auto 20px;
}
#contents_insta .in_sidebox {
text-align: center;
margin-bottom: 50px;
}
#contents_insta .in_sidebox li {
display: inline-block;
padding: 0 5px;
width: 40px;
height: 40px;
} #contents_related {
background: #E6E6E6;
padding: 50px 0 30px;
}
#contents_related ol.sidebox {
margin-bottom: 40px;
}
#contents_related ol.sidebox li {
position: relative;
width: 560px;
height: 150px;
border: #C8C8C8 solid 1px;
}
#contents_related ol.sidebox li p {
font-size: 15px;
line-height: 30px;
color: #fff;
position: relative;
z-index: 1;
width: 120px;
height: 40px;
border: #fff solid 1px;
display: flex;
justify-content: center;
align-items: center;
margin: 55px auto 0;
}
#contents_related ol.sidebox li span {
display: block;
position: absolute;
top: 0;
left: 0;
}
#contents_related ol.sidebox li span img {
width: 100%;
}
#contents_related ol.sidebox li:first-child {
float: left;
}
#contents_related ol.sidebox li:last-child {
float: right;
}
#contents_related h5 {
font-size: 26px;
text-align: center;
margin: 0 auto 20px;
font-weight: 400;
}
#contents_related ul.sidebox li {
float: left;
width: 270px;
height: 170px;
margin-right: 20px;
}
#contents_related ul.sidebox li:nth-of-type(3n) {
margin-right: 0;
}
@media screen and (min-width:768px) {
ul.sidebox {
display: flex;
justify-content: center;
}
} .area_emphasis-modifier {
font-size: 24px;
line-height: 44px;
margin-bottom: 20px;
font-weight: 500;
text-align: center;
font-weight: 700;
}
.area_description-modifier {
font-size: 16px;
line-height: 32px;
margin-bottom: 30px;
text-align: center;
}/*/*//**//*/*//**//*/*//**/ .mc-hide-scrolls {
overflow: hidden;
}
body .mc-cycle {
height: 100%;
left: 0;
overflow: hidden; position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
li.mc-image { -webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;  -webkit-background-size: 100% auto;
background-size: 100% auto;
background-position: center top;
background-repeat: no-repeat; overflow: hidden;
width: 100%;
}
.mc-old-browser .mc-image {
overflow: hidden;
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
#mv-pc1020un {
min-height: 430px;
}
#mv-pc1020un #sld1 {
min-height: 580px;
background-size: 100%; width: 1200px;
}
#mv-pc1020un #sld1 span {
left: 65px;
width: 225px !important; bottom: 57%;
}
#mv-pc1020un #sld2 {
min-height: 580px;
background-size: 100%; width: 1200px;
}
#mv-pc1020un #sld2 span {
left: 65px;
width: 205px !important;
bottom: 59%; }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
#mv-pc1020un #sld1,
#mv-pc1020un #sld2 {
min-width: 1200px !important;
}
#mv_ttl {
margin: 0 auto;
}
li.mc-image {
min-width: 1140px;
}
#maximage li:first-child::before {
bottom: 45%;
left: 20px;
}
#maximage li:last-child::before {
bottom: 45%;
left: 20px;
}
}
@media screen and (max-width: 767px) {
.sp-free-box {
width: 90%;
margin: 0 auto;
}
#top_wrapper {
position: relative;
}
.sp-ls035 {
letter-spacing: -0.35vw;
}
.sp-txt-left {
text-align: left !important;
} #mv_both {
display: block !important;
}
#mvbox {
background-position: 35%;
}
#mvbox h2 {
font-size: 3vh;
line-height: 5vh;
left: 8%;
margin-left: 0;
margin-top: 40px;
letter-spacing: 4px;
}
#maximage li:first-child::before {
content: ''; display: block;
width: 22vw;
height: 53vw;
background-size: contain;
position: absolute;
bottom: 80vw;
left: 6.5vw;
margin-top: 0;
}
#maximage li:last-child::before {
content: ''; display: block;
width: 22vw;
height: 53vw;
background-size: contain;
position: absolute;
bottom: 80vw;
left: 9.5vw;
margin-top: 0;
} #mv_ttl {
width: 90%;
margin: 0 auto;
padding: 6vw 0 10vw 0;
}
#mv_ttl h2 {
font-size: 3.9vw;
line-height: 6.8vw;
}
.before_border_sp {
display: block;
position: relative;
text-align: center;
padding-left: 75px;
height: 85px;
margin: 0 0 10px;
line-height: 15px;
overflow: hidden;
display: none;
}
.before_border_sp .reinb {
font-size: 3.5vw;
line-height: 6vw;
margin-left: -10px;
}
.before_border_sp::before {
content: " ";
display: inline-block;
background: #3c3c3c;
width: 1px;
height: 85px;
position: absolute;
top: 0;
left: 50%;
-webkit-animation: scroll-line_ty06 5.5s infinite;
animation: scroll-line_ty06 5.5s infinite;
-webkit-transition: all cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition: all cubic-bezier(0.785, 0.135, 0.15, 0.86);
} #mv-pc1020un {
display: none !important;
} .before_border {
padding-left: 65px;
height: 75px;
margin: 0;
}
.before_border::before {
height: 105px;
top: -30px;
width: 1px;
-webkit-animation: scroll-line_ty07 5.5s infinite;
animation: scroll-line_ty07 5.5s infinite;
-webkit-transition: all cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition: all cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.before_border .reinb {
display: none;
}
.handrailbox {
padding: 11% 0 8%;
margin-top: -15px;
}
.handrailbox > dt {
display: none;
}
.handrailbox > dd {
margin-left: 0;
position: relative;
}
.onecoin_icon_box {
margin-bottom: 5%;
padding: 0 0 0 8%;
background: url(/images/top/beginner_img01.jpg) no-repeat;
background-size: 55%;
background-position: top right;
}
.onecoin_icon_box span.def-min img {
width: 80%;
}
.onecoin_icon_box span {
display: block;
margin-right: 0;
text-align: center;
width: 34%;
margin-bottom: 3%;
}
.begi_txt {
width: 88%;
margin: 0 auto;
}
.begi_txt > dt {
font-weight: bold;
font-size: 3.6vh;
line-height: 5vh;
margin-bottom: 2%;
}
.begi_txt > dd {
font-size: 2.5vh;
line-height: 3.5vh;
margin-bottom: 5%;
}
.handrailbox > dd > span {
display: none;
}
.handrailbox div.btn {
background: none;
width: 86%;
margin: 0 auto;
}
.handrailbox div a {
width: 100%;
font-size: 2.9vh !important;
height: auto;
padding: 4% 0;
} #contents_topics {
padding-top: 34px;
margin-bottom: 45px;
}
#contents_topics > span.mask {
height: 60px;
width: 2px;
}
#contents_topics > span.mask::before {
height: 60px;
top: 0;
-webkit-animation: scroll-line_ty05 5.5s infinite;
animation: scroll-line_ty05 5.5s infinite;
} #contents_topics ol{
margin-top: 7px;
}
#contents_topics ol li{
width: 100%;
margin: 10px 0 0;
}
#contents_topics ol li:nth-of-type(odd){
margin-right: 0;
} #contents_news {
position: relative;
}
#contents_news > span.mask {
height: 105px;
overflow: hidden;
position: absolute;
top: 0;
left: 50%;
width: 2px;
}
#contents_news > span.mask::before {
content: " ";
display: inline-block;
background: #000;
width: 1px;
height: 105px;
position: absolute;
top: 0;
left: 50%;
-webkit-animation: playscroll_ty02 5.5s infinite;
animation: playscroll_ty02 5.5s infinite;
-webkit-transition: all cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition: all cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
#contents_news h3 {
font-size: 5vw;
margin-bottom: 2%;
padding-left: 6%;
}
#contents_news .news_area {
padding-bottom: 8%;
}
#contents_news .news_area > div {
width: 90%;
padding: 4% 5% 2%;
margin-bottom: 1%;
}
#contents_news .news_area > div dl {
font-size: 3.4vw;
margin-bottom: 3%;
}
#contents_news .news_area > div dl dt {
float: none;
}
#contents_news .news_area > div dl dd {
margin-left: 0;
}
#contents_news .news_area > div dl dd a:hover {
color: #000;
}
#contents_news .news_area .btn_arrow {
text-align: right;
padding-right: 1%;
font-size: 4vw;
}
#contents_news .news_area .btn_arrow::before {
font-size: 1.2vh !important;
vertical-align: 0px;
margin-right: 1%;
}
#contents_news .news_area span.mask {
height: 90px;
top: 80.5%;
z-index: 0;
}
#contents_news .news_area span.mask:after {
width: 1px;
}
#contents_news h4 {
width: 82%;
font-size: 3.1vh;
height: auto;
padding: 3.1% 0;
border: 3px #000 solid;
margin: 0 auto 3%;
}
#contents_news p {
width: 86%;
margin: 0 auto;
text-align: left;
}
#contents_news .txt-center br {
display: none;
}
#contents_news .sp_shopimg {
display: block;
width: 100%;
margin-bottom: 5%;
}
#contents_news div.btn a {
width: 87%;
font-size: 2.8vh !important;
height: auto;
padding: 4% 0;
margin: 0 auto 10%;
} #contents_feature01 {
padding-top: 10px;
}
#contents_feature01 > span.mask_f01 {
height: 60px;
top: -10px;
}
#contents_feature01 > span.mask_f01::after {
height: 60px;
top: 0px;
-webkit-animation: scroll-line_ty05 5.5s infinite;
animation: scroll-line_ty05 5.5s infinite;
}
#contents_feature01 .top_both_ttl {
margin-bottom: 18vw;
}
#contents_feature01 .ttl_ext {
font-size: 2.4vh;
margin: 0 auto 5%;
padding-bottom: 12%;
}
#contents_feature01 span.mask_f02 {
height: 70px;
top: 120px;
}
#contents_feature01 span.mask_f02::after {
height: 70px;
} #contents_feature02 {
padding-top: 0;
}
#contents_feature02 span.mask_f03 {
height: 65px;
}
#contents_feature02 span.mask_f03::after {
height: 73px;
top: 0;
width: 1px;
-webkit-animation: scroll-line_ty05 5.5s infinite;
animation: scroll-line_ty05 5.5s infinite;
} #contents_feature_popu {
padding: 10% 5% 0;
margin-bottom: 10%;
}
#contents_feature_popu h3 {
width: 48% !important;
padding: 0 13.5vw 0 0;
}
#contents_feature_popu h3 span {
padding: 1.5vw 0 1.5vw 6.5%;
text-align: left;
font-size: 4.5vw;
line-height: 5.5vw;
height: 11vw;
}
#contents_feature_popu h3:after {
right: 0;
border-left: solid 13.5vw #3c3c3c;
border-bottom: solid 14vw transparent;
}
.rankfirstbox {
margin-bottom: 40px;
overflow: unset;
}
.rankfirstbox dt {
float: none;
margin-bottom: 3%;
}
.rankfirstbox dt img {
width: 100%;
}
.rankfirstbox dd {
margin: 0 auto 15%;
}
.rankfirstbox dd strong {
margin-bottom: 2%;
width: 36%;
}
.rankfirstbox dd h4 { margin-bottom: 4%;
text-size-adjust: none;
}
.rankfirstbox dd h4 span {
margin-left: 10px;
vertical-align: 5px;
}
.rankfirstbox dd .tabbox {
margin-bottom: 2%;
}
.rankfirstbox dd .tabbox li {
float: left;
border-radius: 10px;
padding: 0 10px;
font-size: 3vw;
line-height: 6vw;
text-align: center;
color: #fff;
background: #3c3c3c;
margin: 0 3% 3% 0 !important;
}
.rankfirstbox dd p {
font-size: 4.2vw;
line-height: 7.5vw;
margin-bottom: 4vw;
}
.rankfirstbox dd p br {
display: none !important;
}
.rankfirstbox dd div.btn,
#contents_feature_popu .sidebox li div.btn {
background: none;
margin: 0 auto;
width: 100%;
}
.rankfirstbox dd div a {
width: 98% !important;
height: auto;
padding: 5% 0;
}
.rankBottom img{
width: 100%;
}
#contents_feature_popu .sidebox li {
float: none;
width: 96%;
margin: 0 auto 15%;
}
#contents_feature_popu .sidebox li:last-child {
margin: 0 auto 15%;
}
.rankunderbox {
overflow: unset;
margin-bottom: 0;
}
.rankunderbox dt {
float: none;
margin-bottom: 2%;
}
.rankunderbox dt iframe {
width: 100%;
max-width: 100%;
}
.rankunderbox dd {
margin: 0 auto 1%;
}
.rankunderbox dd strong {
display: block;
margin-bottom: 2%;
width: 37%;
}
.rankunderbox dd h4 {
font-size: 28px; line-height: 4.8vh;
margin-bottom: 2%;
}
.rankunderbox dd h4 strong {
display: inline;
line-height: 0;
padding: 1vw;
font-size: 3.3vw;
vertical-align: 0.8vw;
}
.rankunderbox dd h4 span img {
width: auto;
vertical-align: -4px;
}
.rankunderbox dd .tabbox {
margin-bottom: 2%;
}
.rankunderbox dd .tabbox li {
float: left !important;
border-radius: 10px;
padding: 0 10px;
font-size: 3vw;
line-height: 6vw;
text-align: center;
color: #fff;
margin: 0 3% 3% 0 !important;
width: auto !important;
}
#contents_feature_popu .sidebox li p {
font-size: 4.2vw;
line-height: 7.5vw;
margin-bottom: 3vw;
width: 100%;
}
#contents_feature_popu .sidebox p br {
display: none;
}
#contents_feature_popu .sidebox li div a {
width: 100%;
height: auto;
padding: 5% 0;
} #contents_quality {
position: relative;
padding-top: 35px;
margin: 7% 0 10%;
}
#contents_quality .inner{
width: 90%;
}
#contents_quality span.mask {
height: 80px;
width: 2px;
}
#contents_quality span.mask::after {
height: 80px;
top: -5px;
-webkit-animation: scroll-line_ty05 5.5s infinite;
animation: scroll-line_ty05 5.5s infinite;
}
#contents_quality .sidebox {
overflow: unset;
margin: 0 auto;
width: 86%;
} .featbox span {
width: 100%;
position: static;
}
.featbox .inner{
max-width: 100%;
width: 90%;
}
.featbox p { font-size: 3.8vw;
line-height: 7vw; padding: 6.7vw 0 6vw;
margin-bottom: 0;
color: #3c3c3c;
letter-spacing: 0.09em;
}
.featbox.type02{
background-image: url(//www.hotyoga-loive.com/images/top/voice_img.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
padding-bottom: 22px;
}
.featbox.type02 p{
font-size: 12px;
letter-spacing: 0.09em;
line-height: 1.41;
color: #fff;
margin-bottom: 0;
padding: 25px 0 9px;
}
.featbox span.mode_pc{
display: none;
}
#page_top .featbox .btn_both_gren a{
margin-bottom: 0;
}
.featbox div.btn_both_gren a {
box-shadow: 4px 4px #b2dbdf !important;
-ms-box-shadow: 4px 4px #b2dbdf !important;
-webkit-box-shadow: 4px 4px #b2dbdf !important;
} #contents_movie {
padding-top: 0;
margin-bottom: -2%;
}
#contents_movie .top_both_ttl span {
margin: 13vw 0 2.5vw 0;
}
#contents_movie span.mask {
height: 60px;
}
#contents_movie span.mask::after {
height: 70px;
top: 0;
-webkit-animation: scroll-line_ty05 5.5s infinite;
animation: scroll-line_ty05 5.5s infinite;
}
#contents_movie h3 {
font-size: 3.9vh;
margin: 20px auto 3%;
}
#contents_movie .ytbox {
position: relative;
padding-bottom: 56.25%;
height: auto;
overflow: unset;
width: 84% !important;
border: none;
}
#contents_movie .ytbox iframe {
position: absolute;
top: 1%;
left: 49%;
margin-left: -49% !important;
width: 98% !important;
height: 80% !important;
border: #000 solid 1px;
padding: 1%;
} #contents_insta {
position: relative;
padding-top: 0;
margin-bottom: 40px;
}
#contents_insta span.mask {
height: 60px;
}
#contents_insta span.mask::after {
height: 60px;
top: 0;
-webkit-animation: playscroll_ty02 5.5s infinite;
animation: playscroll_ty02 5.5s infinite;
}
#contents_insta h3 {
font-size: 3.9vh;
margin: 10px auto 3%;
}
#contents_insta .top_both_ttl span {
margin: 13vw 0 2.5vw 0;
}
#contents_insta .sidebox {
margin: 0 auto 7%;
width: 88%;
height: 220px !important;
} .snapwidget-widget {
height: 220px !important;
}
.media-image-wrapper {
margin: 0 !important;
}
.media-grid {
height: auto;
width: 100%;
padding: 0 0 0 1%;
}
.media-grid .media-list-item {
border: #000 solid 1px;
padding: 3px;
width: 31% !important;
height: 31% !important;
display: block;
float: left;
margin: 0 1% 2% 1%;
}
#contents_insta .sidebox li:nth-child(3),
#contents_insta .sidebox li:last-child {
margin-right: 0 !important;
}
#contents_insta h4 { margin: 0 auto 6px;
}
#contents_insta .in_sidebox {
text-align: center;
margin-bottom: 50px;
}
#contents_insta .in_sidebox li {
display: inline-block;
padding: 0 2%;
width: 10%;
}
#contents_insta .in_sidebox li img {
width: 100%;
} #contents_related {
padding: 5%;
width: 90%;
margin: auto;
box-sizing: border-box;
}
#contents_related ol.sidebox {
margin-bottom: 3%;
}
#contents_related ol.sidebox li {
width: 100%;
height: auto;
border: #E6E6E6 solid 1px;
margin-bottom: 10vw;
}
#contents_related ol.sidebox li p {
font-size: 4vw;
line-height: 4vw;
width: 21vw;
height: 30px;
margin: 10% auto 0;
}
#contents_related ol.sidebox li span {
display: block;
position: absolute;
top: 0;
left: 0;
border: #C8C8C8 solid 1px;
}
#contents_related ol.sidebox li span img {
width: 100%;
}
#contents_related ol.sidebox li:first-child {
float: none;
}
#contents_related ol.sidebox li:last-child {
float: none;
}
#contents_related h5 {
font-size: 5vw;
margin: 0 auto 3vw;
}
#contents_related ul.sidebox li {
width: 48%;
height: auto;
margin: 0 0 3vw 0;
}
#contents_related ul.sidebox li:first-child {
float: left;
}
#contents_related ul.sidebox li:nth-child(2) {
float: right;
}
#contents_related ul.sidebox li:nth-child(3) {
float: left;
}
#contents_related ul.sidebox li:nth-child(4) {
float: right;
}
#contents_related ul.sidebox li dl dt {
padding: 1% 0;
font-size: 1.5vh;
line-height: 2.2vh;
}
#contents_related ul.sidebox li:nth-of-type(2n) {
margin-right: 0;
} .area_emphasis-modifier {
font-size: 4.7vw;
line-height: 8vw;
margin-bottom: 4%;
font-weight: 700;
}
.area_description-modifier {
font-size: 4.1vw;
line-height: 7.3vw;
margin-bottom: 7.5%;
text-align: left;
}
}
@media screen and (max-width: 375px) {
#contents_feature_popu h3 {
width: 38%;
}
} .bnTemp {
margin-bottom: 20px;
}
.bnTemp img {
margin: 0 auto;
}
@media screen and (max-width: 767px) {
.bnTemp {
padding: 0 30px;
}
} .pc_area {
display: block;
}
.sp_area {
display: none;
} @media screen and (max-width: 768px) {
.pc_area {
display: none;
}
.sp_area {
display: block;
}
} #mv .slick-prev:before,
.slick-next:before {
display: none;
}
#mv .slick-slide {
height: auto;
}
#mv .slick-dots {
position: static;
height: 10px;
margin: 12px 0 60px;
}
#mv .slick-dots li {
margin: 0 7px;
background: #c8c8c8;
content: '' !important;
width: 54px !important;
height: 8px;
}
#mv .slick-dots li button:before {
content: '' !important;
width: 54px !important;
height: 8px;
}
#mv .slick-dots li.slick-active button:before {
background: #3c3c3c;
}
@media screen and (max-width: 767px) {
#mv .slick-dots li {
margin: 0 6px;
width: 38px !important;
height: 6px;
}
#mv .slick-dots li button:before {
width: 38px !important;
height: 6px;
}
#mv .slick-dots {
margin: 10px 0 28px;
}
} .top_btn_banner {
display: flex;
justify-content: center;
}
.top_btn_banner li:first-of-type {
margin-right: 25px;
}
.top_btn_banner li.btn_both_pink a,
.top_btn_banner li.btn_both_gren a{
width: 340px;
height: 70px;
}
#contents_handrail .inner {
padding-top: 20px;
}
#contents_bnr {
margin: 80px auto 42px;
} @media screen and (min-width: 768px) and (max-width: 1024px) {
.top_btn_banner {
display: flex;
}
.btn_both_gren.type01 a {
margin-top: 0;
margin-bottom: 10px;
height: 70px;
}
.btn_both_gren.type01 a::before {
content: "";
display: inline-block;
background-image: url(//www.hotyoga-loive.com/images/studio/tel_icon.png);
width: 23px;
height: 23px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin-right: 8px;
}
.btn_both_gren.type01 a span {
font-size: 19px !important;
}
.btn_both_gren.type01 a span span {
display: block;
font-size: 11px !important;
line-height: 1;
}
}
@media screen and (max-width: 767px) {
.top_btn_banner {
display: block;
}
#contents_bnr {
margin: 73px 0 62px;
}
#contents_handrail .top_btn_banner li a::after{
display: none;
}
.top_btn_banner li:first-of-type{
margin-right: 0;
}
.top_search_text{
margin: 0px auto 12px;
}
.top_search_text h2{
margin-bottom: 0;
}
#contents_handrail .btn_both_pink a,
#contents_handrail .btn_both_gren a{
width: 80%;
}
} #top_wrapper .map_search_inner .inner{
padding-top: 40px;
max-width: 900px;
width: 900px;
margin: 0 auto;
}
.map_search_inner{
background: #F0F0F0;
overflow: hidden;
padding: 50px 0 50px 0;
position: relative;
margin-bottom: 20px;
}
.bk_map_search{
background: #ffffff;
width: 74%;
margin: 0 auto;
overflow: hidden;
padding: 50px 0 0px 0;
position: relative;
}
.top_search_text{ position: relative;
vertical-align: middle;
margin: 0 auto 20px;
}
.top_search_text h2{
font-size: 24px;
font-weight: 600;
text-align: center; } a.search_icon::before{
content: '';
display: inline-block;
margin-right: 10px;
background-image: url(//www.hotyoga-loive.com/images/common/point_icon.png);
background-size: contain;
background-repeat: no-repeat;
width: 20px;
height: 20px;
}
@media screen and (max-width: 767px){
#contents_search .inner{ }
.wrap_search{
background: #F0F0F0;
padding: 20px 20px;
margin: 30px;
border-radius: 20px;
}
.experience_text{
border-bottom: solid 2px #333;
margin: 0px 20px 20px 20px;
}
.experience_text p{
margin-bottom: 10px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.experience_text p::before{
content: '';
display: inline-block;
margin: 0 5px 0 0;
background-image: url(//www.hotyoga-loive.com/images/common/btn-icon03.png);
background-size: contain;
width: 19px;
height: 22px;
}
#contents_search .btngren{
width: 90%;
height: auto;
padding: 3% 0;
border-radius: 50px;
position: relative;
background: #67b5bf;
margin: 0 auto 20px;
}
#contents_search .btngren a{
color: #fff;
display: flex;
justify-content: center;
align-items: center;
position: relative;
font-size: 4.5vw;
}
#contents_search .btngren a::before{
content: '';
display: inline-block;
margin-right: 10px;
background-image: url(//www.hotyoga-loive.com/images/common/btn-icon03.png);
background-size: contain;
width: 19px;
height: 22px;
}
#contents_search .btngren a::after{
content: "＞";
display: inline-block;
font-size: 15px;
margin-left: 5px;
vertical-align: 2px;
}
.gps_text p{
text-align: center;
}
#top_wrapper .map_search_inner .inner{
max-width: 100%;
width: 100%;
}
.top_search_text{ margin-bottom: 12px;
}
.top_search_text h2{
font-size: 18px;
margin-bottom: 0;
text-align: center;
}
.map_search_inner{
padding: 26px 0 26px 0;
}
#top_wrapper .map_search_inner .inner{
padding-top: 23px;
width: 90%;
}
#contents_handrail .btn_both_gren a{
margin-bottom: 6px;
}
.btn_both_gren .btn_both_gren_btn{
margin: 0 auto 14px;
}
#contents_handrail  .btn_both_pink a{
margin: 0 auto 20px;
}
.inner.bk_map_search{
width: 90%
}
} #lesson_program  {
margin-bottom: 120px;
}
#lesson_program .contents-enttl {
margin-bottom: 0;
}
#lesson_program .lesson_program {
margin: 50px 0 40px;
text-align: center;
}
.lesson_program h5{
text-align: center;
font-weight: bold;
font-size: 24px;
letter-spacing: 0.09em; border-bottom: 3px solid #67b5bf;
display: inline-block;
margin-bottom: 35px;
}
#lesson_program .lesson_program p{
font-size: 18px;
letter-spacing: 0.09em;
}
#lesson_program .lesson_program p,
#lesson_program .lesson_program span{
text-align: center;
}
#lesson_program .lesson_program span{
font-size: 14px;
letter-spacing: 0.09em;
display: block;
margin-top: 8px;
}
.program_slider-content{
padding: 28px 0 0 60px;
}
#lesson_program ol li {
margin-bottom: 3px;
position: relative;
border: none;
}
#lesson_program ol li .acod {
background-color: #67b5bf;
padding: 11px 22px;
color: #fff;
}
#lesson_program ol li .acod-in {
padding: 19px 0;
}
#lesson_program .accordion_icon span,
#lesson_program .accordion_icon-up span {
background-color: #fff;
}
.ranking{
position: relative;
padding: 36px 0 54px;
}
.program_recommend .label,
.ranking .label{
position: absolute;
top: 0;
width: 100%;
background: #3c3c3c;
max-width: 298px;
z-index: 1;
}
.program_recommend .label::before,
.ranking .label::before{
content: '';
position: absolute;
left: -100%;
bottom: 0;
top: 0;
width: 100%;
height: 100%;
background: #3c3c3c;
z-index: 0;
}
.program_recommend .label::after,
.ranking .label::after{
position: absolute;
top: 0;
right: -45px;
width: 0;
height: 0;
content: '';
border-width: 62px 45px 0 0;
border-style: solid;
border-color: #3c3c3c transparent transparent;
}
.program_recommend .label p,
.ranking .label p{
font-size: 20px;
color: #fff;
font-weight: bold;
letter-spacing: 0.09em;
line-height: 1.6; padding: 16px 10px 14px 21px;
}
.lesson_program .ranking .ranking_slider {
padding: 0 0 60px;
margin-bottom: 27px;
}
.ranking_slider-item {
width: 100%;
max-width: 980px;
padding: 0 30px;
float: left;
outline: none;
}
.ranking_slider-inner {
display: flex;
background: #fff; padding: 10px;
}
.ranking_slider-photo {
width: 52%;
}
.ranking .ranking_slider-photo img {
max-width: 503px;
width: 100%;
height: auto;
margin: 0;
}
.ranking_slider-photo img.mode_sp {
display: none;
}
.ranking_slider-content {
width: 100%;
max-width: 395px;
box-sizing: border-box;
padding: 40px 0 0 60px;
}
.ranking_slider-content .btn_both_pink a {
margin: 0;
font-size: 3vw;
}
.ranking_slider-title {
font-size: 27px;
line-height: 1.5;
margin: 0 0 25px;
letter-spacing: .1em;
}
.ranking_slider-description {
font-size: 14px;
line-height: 1.8;
letter-spacing: .05em;
margin: 0 0 20px;
}
.program_recommend{
padding: 40px 0 34px;
position: relative;
}
.program_recommend,
.ranking{
background: #f0f0f0;
margin-bottom: 0;
}
.program_recommend .slick-slider,
.ranking .slick-slider {
background: none;
}
.program_recommend .slick-slider .slick-list,
.program_recommend .slick-slider .slick-track,
.ranking .slick-slider .slick-list,
.ranking .slick-slider .slick-track {
background: none;
}
#studio .program_recommend .slick-prev,
#studio .program_recommend .slick-next,
#studio .ranking .slick-prev,
#studio .ranking .slick-next{
display: block !important;
}
.program_recommend .slick-next,
.program_recommend .slick-prev,
.ranking .slick-next,
.ranking .slick-prev {
width: 24px;
height: 46px;
transition: all .3s;
}
.program_recommend .slick-next::before,
.program_recommend .slick-prev::before,
.ranking .slick-next::before,
.ranking .slick-prev::before {
content: '';
display: inline-block;
width: 100%;
height: 100%;
background: url(//www.hotyoga-loive.com/images/program/sld_arw.png) center center no-repeat;
background-size: contain;
}
.program_recommend .slick-next:hover,
.program_recommend .slick-prev:hover,
.ranking .slick-next:hover,
.ranking .slick-prev:hover {
opacity: .8;
}
.program_recommend .slick-next,
.ranking .slick-next {
right: auto;
left: 46%;
transform: translate3d(565px, -100%, 0);
}
.program_recommend .slick-prev,
.ranking .slick-prev {
left: auto;
right: 46%;
transform: translate3d(-565px, -100%, 0) rotate3d(0, 0, 1, 180deg);
}
.ranking_slider-item a.mover:hover .ranking_slider-content{
opacity: 0.6;
}
.ranking_slider-content .ranking_slider-title{
font-size: 20px;
font-weight: bold;
letter-spacing: 0.09em;
color: #3c3c3c;
margin: 0 0 15px;
}
.ranking_slider-content li{
margin-top: 5px;
}
.ranking_slider-content li p{
color: #3c3c3c;
font-size: 16px;
letter-spacing: 0.09em;
position: relative;
padding-left: 25px;
}
.ranking_slider-content li p::before{
content: '';
position: absolute;
left: 0;
bottom: 0;
top: 0;
margin: auto;
width: 16px;
height: 16px;
background-image: url(//www.hotyoga-loive.com/images/studio/pdf_btn_icon01.png);
background-size: contain;
background-repeat: no-repeat;
transform: rotate(90deg);
}
.ranking_icon{
display: flex;
align-items: flex-end;
margin-bottom: 16px;
}
.ranking_icon .icon{
max-width: 96px;
margin-right: 20px;
}
.ranking_slider-item .ranking_icon p{
font-size: 38px;
font-weight: bold;
letter-spacing: 0.09em;
margin-bottom: 15px;
line-height: 1;
}
.ranking_slider-item.slide01 .ranking_icon p{
color: #d2ab2e;
}
.ranking_slider-item.slide02 .ranking_icon p{
color: #8f8f8f;
}
.ranking_slider-item.slide03 .ranking_icon p{
color: #a37862;
}
.ranking_slider-item p{
color: #3c3c3c;
font-size: 18px;
letter-spacing: 0.09em;
line-height: 1.66;
}
.program_slider-content li p{
font-size: 18px;
}  @media screen and (max-width: 768px) {
.program_recommend .label::after,
.ranking .label::after {
right: -10vw;
border-width: 12vw 10vw 0 0;
}
}
@media screen and (max-width: 767px) {
#lesson{
margin-bottom: 74px;
}
#lesson_program{
margin-bottom: 90px;
}
#lesson_program .lesson_program{
margin: 20px 0 15px;
}
.program_slider-content{
padding-left: 0;
}
.program_slider-item{
padding: 0 15px;
margin: 0 4px;
}
.ranking_slider-item{
padding: 0;
margin: 0 18px;
}
.lesson_program .ranking .ranking_slider {
margin-bottom: 0;
}
.program_slider-content li p{ font-size: 3.8vw;
line-height: 7vw;
}
.ranking_slider-photo{
width: 100%;
}
.ranking_slider-content{
width: 100%;
padding: 15px 0 0;
}
.ranking_slider-inner{
flex-direction: column;
padding: 10px 8px 30px;
}
.ranking_slider-photo img.mode_sp {
display: block;
}
.ranking_slider-photo img.mode_pc {
display: none;
}
.ranking_slider-content li{ margin-top: 0;
}
.ranking_slider-content li p::before{
width: 14px;
height: 14px;
}
.ranking_slider-content .ranking_slider-title{
font-size: 17px;
margin-bottom: 9px;
text-align: center;
line-height: 1.2;
}
.ranking .slick-dots{
bottom: 28px;
}
.program_slider{
padding-bottom: 56px;
}
.program_slider .slick-dots{
bottom: 25px;
}
.program_slider-content .program_slider-title{
margin-bottom: 5px;
}
.program_recommend,
.ranking {
width: 100%;
overflow: hidden;
}
.program_recommend{
padding: 7vw 0 0;
}
.ranking{
padding: 10vw 0 13px;
}
.program_recommend .slick-next,
.program_recommend .slick-prev,
.ranking .slick-next,
.ranking .slick-prev {
width: 5vw;
height: 5vw;
}
.program_recommend .slick-next,
.ranking .slick-next{
right: 3vw;
left: auto;
transform: translate3d(0, -50%, 0);
}
.program_recommend .slick-prev,
.ranking .slick-prev {
left: 3vw;
right: auto;
transform: translate3d(0, -50%, 0) rotate3d(0, 0, 1, 	180deg);
}
.ranking_slider-content li p{
font-size: 13px;
} .lesson_program h5{
font-size: 16px;
margin-bottom: 20px;
}
#lesson_program .lesson_program p{
text-align: left; font-size: 3.8vw;
line-height: 7vw;
}
.ranking_icon{
display: none;
}
.ranking_slider-photo img.mode_pc{
display: none;
}
.ranking_slider-photo img.mode_sp{
display: block;
}
.program_recommend .label,
.ranking .label{
max-width: 36%;
}
.program_recommend .label p,
.ranking .label p{
font-size: 15px;
letter-spacing: 0.05em;
text-align: left;
line-height: 1.3; padding: 5% 10px 4%;
}
.program_recommend .label p{
padding: 5% 0px 4% 9px;
}
.program_recommend .label:after,
.ranking .label::after{
right: -44px; border-width: 51px 44px 0 0;
}
.ranking_slider-item p{ font-size: 3.8vw;
line-height: 7vw;
}
}
.voice_banner{
clear: both;
width: 100%;
}
@media screen and (max-width: 768px) {
.small{
text-align: center;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.1em;
color: #3c3c3c;
margin-bottom: 21px;
}
.login_text{
text-align: center; font-size: 3.8vw;
line-height: 7vw;
letter-spacing: 0.03em;
margin-bottom: 20px;
}
.login_text a{
text-decoration: underline;
color: #3c3c3c;
display: block;
text-align: center;
}
.login_text a::before{
content: "＞";
display: inline-block;
font-size: 13px;
color: #3c3c3c;
line-height: 1;
text-decoration: underline;
}
} .reason{
padding-top: 70px;
margin-bottom: 120px;
}
.reason .flexBox{
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
margin-bottom: 30px;
}
.reason .flexBox:first-of-type{
margin-top: 40px;
}
.reason .flexBox:nth-of-type(2){
flex-direction: row;
}
.reason .flexBox:last-of-type{
margin-bottom: 0;
}
.reason .flexBox .textArea{
margin-left: 50px;
max-width: 600px;
width: 100%;
padding-top: 58px;
}
.reason .flexBox:nth-of-type(2) .textArea{
margin: 0 50px 0 0;
}
.reason .flexBox dt{
display: flex;
align-items: center;
margin-bottom: 34px;
}
.reason .flexBox dt span{
margin-right: 30px;
}
.reason .flexBox dt p{
font-size: 30px;
letter-spacing: 0.09em;
font-weight: bold;
color: #ee8081;
line-height: 1.1;
}
.reason .flexBox dd{
}
.reason .flexBox dd p{
font-size: 18px;
line-height: 1.77;
letter-spacing: 0.09em;
}
.reason .flexBox dd p:first-of-type{
margin-bottom: 20px;
}
.reason .flexBox dd p a{
text-decoration: underline;
color: #3c3c3c;
display: block;
}
.reason .flexBox dd p a:hover{
opacity: 0.7;
}
.reason .flexBox dd p a span{
position: relative;
}
.reason .flexBox dd p a span::before{
content: "＞";
display: inline-block;
font-size: 18px;
color: #3c3c3c;
line-height: 1;
text-decoration: underline;
}
.reason .flexBox .img{
max-width: 450px;
width: 100%;
background:linear-gradient(90deg, #fdf1f2 0%, #fdf1f2 85%, #fff 85%, #fff 100%);
padding: 40px 0;
position: relative;
}
.reason .flexBox .img img{
position: relative;
z-index: 1;
}
.reason .flexBox:nth-of-type(2) .img{
background:linear-gradient(90deg, #fff 0%, #fff 15%, #fdf1f2 15%, #fdf1f2 100%);
}
.reason .flexBox .img:after{
content: '';
position: absolute;
left: -80%;
bottom: 0;
top: 0;
width: 100%;
height: 100%;
background: #fdf1f2;
z-index: 0;
}
.reason .flexBox:nth-of-type(2) .img:after{
left: inherit;
right: -80%;
}
@media screen and (max-width: 767px) {
.reason{
padding-top: 34px;
margin-bottom: 75px;
}
.reason .flexBox,
.reason .flexBox:nth-of-type(2){
flex-direction: column;
}
.reason .flexBox{
margin-bottom: 40px;
}
.reason .flexBox:first-of-type{
margin-top: 28px;
}
.reason .flexBox .textArea{
max-width: 100%;
margin-left: 0;
padding-top: 0;
}
.reason .flexBox dt{
margin-bottom: 14px;
}
.reason .flexBox dt span{
max-width: 67px;
margin-right: 20px;
}
.reason .flexBox:first-of-type dt span{
max-width: 55px;
}
.reason .flexBox dt p{
font-size: 19px;
}
.reason .flexBox dd p:first-of-type{ font-size: 3.8vw;
line-height: 7vw;
margin-bottom: 7px;
}
.reason .flexBox .img{
background: none;
padding: 0;
}
.reason .flexBox:nth-of-type(2) .img{
background:none
}
.reason .flexBox .img:after{
display: none;
}
.reason .flexBox dd p,
.reason .flexBox dd p a span::before{
font-size: 13px;
}
.reason .flexBox dd p:last-of-type{
margin-bottom: 15px;
}
} #lesson{
margin-bottom: 130px;
}
.banner{
margin: 40px 0 50px;
}
.banner img{
margin: auto;
}
@media screen and (max-width: 767px) {
#lesson{
margin-bottom: 74px;
}
.banner{
margin: 20px 0;
}
} #price{
margin-bottom: 80px;
}
#price .price_cont{
margin: 40px 0 25px;
text-align: center;
}
#price .price_cont p{
font-size: 18px;
letter-spacing: 0.09em;
line-height: 1.77;
text-align: center;
margin-bottom: 15px;
}
#price .price_cont h3{
text-align: center;
font-weight: bold;
font-size: 24px;
letter-spacing: 0.09em;
display: inline-block;
padding-bottom: 5px;
}
#price .price_cont h3:after{
content: '';
border-bottom: 3px solid #67b5bf;
display: block;
width: 96%;
}
#price .img{
margin: 0 0 40px;
}
#price .note{
text-align: center;
margin-top: 25px;
font-size: 16px;
letter-spacing: 0.09em;
line-height: 2;
}
#price .btn_both_gren a:after{
display: none;
}
@media screen and (max-width: 767px) {
#price{
margin-bottom: 57px;
}
#price .price_cont{
margin:25px 0 14px;
}
#price .price_cont p{
font-size: 3.8vw;
line-height: 7vw;
margin-bottom: 5px;
}
#price .price_cont h3{
font-size: 16px;
}
#price .img {
margin-bottom: 24px;
}
#price .img img{
margin: auto;
}
#price .note{
margin-top: 20px;
font-size: 12px;
text-align: left;
line-height: 1.83;
}
} .title_area h2.top{
display: inline-block;
}
.title_area h2.stdio{
display: none;
}