.effect{
padding-top: 100px;
background-color: #f0f0f0;
padding-bottom: 80px;
}
@media screen and (max-width: 767px){
.effect{
width: auto;
background-color: #f0f0f0;
}
}
#effect04{
margin-bottom: 20px;
}
.effect_kv{
width: 1100px;
height: 540px;
margin:0 auto;
background-color: #66b5bf;
color:#fff;
background-image: url(//www.hotyoga-loive.com/images/program/effect_ph_01.jpg);
background-size: auto 480px;
background-repeat: no-repeat;
background-position: top 30px right 30px;
}
@media screen and (max-width: 767px){
.effect_kv{
width: auto;
height: auto;
margin-left: 6vw;
margin-right: 6vw;
background-size: 76vw auto;
background-repeat: no-repeat;
background-position: bottom 6vw left 6vw;
}
}
.effect_kv_inner{
padding:68px 78px;
height: 100%;
box-sizing:border-box;
display: flex;
flex-direction: column;
}
@media screen and (max-width: 767px){
.effect_kv_inner{
padding:8vw 6vw 54vw;
}
}
.effect_kv_ttl{
font-size:26px;
line-height: 1.5;
margin-bottom: 20px;
margin-top: auto;
}
@media screen and (max-width: 767px){
.effect_kv_ttl{
font-size:20px;
}
}
.effect_kv_inner p{
text-justify:inter-word;
text-align: justify;
font-size:14px;
line-height: 1.9;
}
.effect_lead_01{
display: flex;
flex-wrap:nowrap;
align-items: center; margin:0 40px 60px;
}
@media screen and (max-width: 767px){
.effect_lead_01{
flex-direction: column;
padding:9vw 0;
margin:0;
}
}
.effect_lead_01_ph{ width: 180px;
margin-right: 30px;
}
@media screen and (max-width: 767px){
.effect_lead_01_ph{
width: 31vw;
margin-right: 0;
margin-bottom: 6vw;
}
}
.effect_lead_01_text{
width: auto;
font-size:16px;
line-height: 2.2;
flex:1;
}
@media screen and (max-width: 767px){
.effect_lead_01_text{
line-height: 1.6;
}
}
.effect_inner{
padding:50px;
width: 1100px;
background-color: #fff;
margin:0 auto;
box-sizing:border-box;
}
@media screen and (max-width: 767px){
.effect_inner{
width: auto;
background-color: #fff;
margin:0 6vw;
padding:0 2vw;
}
}
.effect_innerLink{
display: flex;
justify-content: space-between;
margin-bottom: 100px;
}
@media screen and (max-width: 767px){
.effect_innerLink{
flex-direction: column;
border-top: solid 1px #67b5bf;
}
}
.effect_innerLink:after{
content:none !important;
}
.effect_innerLink li{
width: 235px;
border: solid 1px #67b5bf;
box-sizing:border-box;
display: flex;
align-items: center;
text-align: center;
}
@media screen and (max-width: 767px){
.effect_innerLink li{
width: 100%;
border-left: solid 1px #67b5bf;
border-right: solid 1px #67b5bf;
border-bottom: solid 1px #67b5bf;
border-top: none;
}
}
.effect_innerLink li a{
font-size:16px;
line-height: 1.8;
text-align: center;
display: block;
width: 100%;
height: 160px;
padding-bottom: 20px;
box-sizing:border-box;
display: flex;
justify-content: center;
align-items: center;
color: #67b5bf;
position: relative;
}
@media screen and (max-width: 767px){
.effect_innerLink li a{
height: auto;
line-height: 40px;
padding-bottom: 0;
text-align: left;
justify-content: flex-start;
padding-left: 4vw;
}
.effect_innerLink li br{
display: none;
}
}
.effect_innerLink li a:after{
content:"";
background-image: url(//www.hotyoga-loive.com/images/program/ico_arrow_under.png);
background-repeat: no-repeat;
background-size: 20px auto;
position: absolute;
width: 20px;
height: 20px;
bottom:20px;
left:0;
right:0;
margin:0 auto;
}
@media screen and (max-width: 767px){
.effect_innerLink li a:after{
right:10px;
left:auto;
top:10px;
bottom:auto;
}
}
.effect_section{
margin-bottom: 100px;
}
@media screen and (max-width: 767px){
.effect_section{
margin-bottom: 50px;
}
}
.effect_ttl_01{
font-size:20px;
line-height: 70px;
background-color: #66b5bf;
color:#fff;
padding-left: 34px;
margin-bottom: 40px;
}
@media screen and (max-width: 767px){
.effect_ttl_01{
padding-left: 0;
text-align: center;
}
}
.effect_ttl_02{
font-size:18px;
color:#3c3c3c;
padding-bottom: 20px;
border-bottom: solid 2px #d9d9d9;
position: relative;
line-height: 1;
padding-left: 18px; margin-bottom: 20px;
}
@media screen and (max-width: 767px){
.effect_ttl_02{
padding-left: 0;
line-height: 1.4;
}
}
.effect_ttl_02:after{
content:"";
position: absolute;
bottom:-2px;
left:0;
height: 2px;
width: 300px;
background-color: #66b5bf;
}
@media screen and (max-width: 767px){
.effect_ttl_02:after{
width: 100px;
}
}
.effect_text_01{
font-size:16px;
line-height: 2;
margin-bottom: 50px;
letter-spacing:1.6px;
}
@media screen and (max-width: 767px){
.effect_text_01{
line-height: 1.6;
}
}
.effect_text_01 strong{
font-weight: 900;
}
.effect_pause{
display: flex;
justify-content: space-between;
flex-wrap:wrap; }
.effect_pause__purpose .effect_pause_item:last-child{
margin-right: auto;
margin-left: 20px;
}
@media screen and (max-width: 767px){
.effect_pause__purpose .effect_pause_item:last-child{
margin-left: 0;
}
}
.effect_pause_ttlSet{ padding:30px 18px 24px;
box-sizing:border-box;
background-color: #66b5bf;
color:#fff;
position: relative;
margin-bottom: 10px;
}
@media screen and (max-width: 767px){
.effect_pause_ttlSet{
}
}
.effect_pause_ttlSet:after{
content:"";
position: absolute;
bottom:-6px;
left:0;
right:0;
margin:0 auto;
width: 0;
height: 0;
border-style: solid;
border-width: 6px 6px 0 6px;
border-color: #66b5bf transparent transparent transparent;
}
.effect_pause__purpose .effect_pause_ttlSet{
padding-bottom: 10px;
}
.effect_pause__purpose .effect_pause_ttlSet p{
height:calc(1.8em * 3) !important;
}
.effect_pause__purpose .effect_pause_ttlSet:after{
border: none;
}
.effect_pause__purpose .effect_pause_item{
background-color: #66b5bf;
padding-bottom: 0px;
margin-bottom: 20px;
}
.effect_pause__purpose .effect_pause_ph{
margin-bottom: 5px;
}
@media screen and (max-width: 767px){
.effect_pause__purpose .effect_pause_ph{
margin-bottom: 2vw;
}
}
.effect_pause_ttlSet p{
font-size:14px;
line-height: 1.8;
text-justify:inter-word;
text-align: justify;
height:calc(1.8em * 4);
}
.effect_pause:after{
content:none !important;
}
.effect_pause_item{
width: 320px;
background-color: #f0f0f0;
padding-bottom: 20px;
margin-bottom: 20px;
}
@media screen and (max-width: 767px){
.effect_pause_item{
width: auto;
}
}
.effect_pause_ttl{
font-size:18px;
margin-bottom: 16px;
text-align: center;
line-height: 18px;
margin-left: 20px;
}
.effect_pause_ttl span{
display: inline-block;
position: relative;
}
.effect_pause_ttl span:before{
content:"";
position: absolute;
width: 16px;
height: 16px;
background-image: url(//www.hotyoga-loive.com/images/program/ico_check.png);
background-size: contain;
background-repeat: no-repeat;
left:-24px;
}
.effect_pause_ph{
width: 310px;
height: 232px;
margin:0 5px 14px;
}
@media screen and (max-width: 767px){
.effect_pause_ph{
width: auto;
height: 60vw;
margin:0 2vw 14px;
}
}
.effect_pause_ph img{
object-fit: contain;
width: 310px;
height: 232px;
}
@media screen and (max-width: 767px){
.effect_pause_ph img{
width: 100%;
height: auto;
}
}
.effect_pause_list{
counter-reset: list_count;
margin:0 20px 0 38px;
}
.effect_pause_list li{
position: relative;
font-size:12px;
line-height: 1.6;
margin-bottom: 6px;
}
.effect_pause_list li:last-child{
margin-bottom: 0;
}
.effect_pause_list li:before{
position: absolute;
left:-20px;
top:2px;
margin-right: .25em;
counter-increment: list_count;
content: counter(list_count);
display: inline-block;
line-height: 14px;
text-align: center;
height: 14px;
width: 14px;
border-radius: 50%;
font-size: 0.8em;
background-color: #66b5bf;
color:#fff; }
.effect_table_01{
width: 100%;
margin-bottom: 32px;
}
.effect_table_01 th{
background-color: #66b5bf;
text-align: center;
color:#fff;
line-height: 50px;
}
.effect_table_01 td{
width: 20%;
border: solid 1px #66b5bf;
text-align: center;
padding:20px 0;
font-size:12px;
}
@media screen and (max-width: 767px){
.effect_table_01 td{
width: 100%;
display: block;
padding:10px 0;
box-sizing:border-box;
border-top: none;
border-bottom: solid 1px #66b5bf;
border-left: solid 1px #66b5bf;
border-right: solid 1px #66b5bf;
}
}
.effect_table_01 td strong{
font-size:16px;
}
.effect_text_01_02{
font-size:14px;
}
.effect_programLink{
display: flex;
margin-bottom: 40px;
}
@media screen and (max-width: 767px){
.effect_programLink{
flex-direction: column;
border-top: solid 5px #66b5bf;
}
}
.effect_programLink li{
width: 20%;
box-sizing:border-box;
border-right: solid 5px #66b5bf;
border-top: solid 5px #66b5bf;
border-bottom: solid 5px #66b5bf;
height: 114px;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
color:#222;
font-weight: bold;
text-shadow:0px 0px 10px #fff,0px 0px 10px #fff,0px 0px 10px #fff,0px 0px 10px #fff,0px 0px 10px #fff,0px 0px 10px #fff,0px 0px 10px #fff,0px 0px 10px #fff,0px 0px 10px #fff,0px 0px 10px #fff;
}
@media screen and (max-width: 767px){
.effect_programLink li{
width: auto;
box-sizing:border-box;
border-left: solid 5px #66b5bf;
border-top: none;
}
}
.effect_programLink li:first-child{
border-left: solid 5px #66b5bf;
background-image: url(//www.hotyoga-loive.com/images/program/effect_program_ph_01.jpg);
}
.effect_programLink li:nth-child(2){
background-image: url(//www.hotyoga-loive.com/images/program/effect_program_ph_02.jpg);
}
.effect_programLink li:nth-child(3){
background-image: url(//www.hotyoga-loive.com/images/program/effect_program_ph_03.jpg);
}
.effect_programLink li:nth-child(4){
background-image: url(//www.hotyoga-loive.com/images/program/effect_program_ph_04.jpg);
}
.effect_programLink li:nth-child(5){
background-image: url(//www.hotyoga-loive.com/images/program/effect_program_ph_05.jpg);
} .effect_happy{
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 50px;
}
@media screen and (max-width: 767px){
.effect_happy{
flex-direction: column;
border-bottom: solid 1px #ccc;
}
}
.effect_happy:after{
content:none !important;
}
.effect_happy_item{
width: 316px;
}
@media screen and (max-width: 767px){
.effect_happy_item{
width: auto;
margin-bottom: 20px;
}
}
.effect_happy_item_ttl{
font-size:17px;
line-height: 1.3;
height:calc(1.3em * 3);
font-weight: bold;
margin-bottom: 20px;
padding-left: 24px;
position: relative;
}
@media screen and (max-width: 767px){
.effect_happy_item_ttl{
height: auto;
}
}
.effect_happy_item_ttl:after{
content:"";
position: absolute;
width: 16px;
height: 16px;
background-image: url(//www.hotyoga-loive.com/images/program/ico_check_02.png);
-webkit-background-size: contain;
background-size: contain;
top:2px;
left:0;
}
.effect_happy_item_text{
font-size:14px;
line-height: 1.8;
}
.effect_voice{
padding:68px 40px 170px;
background-color: #999;
margin-bottom: 32px;
background-image: url(//www.hotyoga-loive.com/images/program/effect_voice_ph_01.jpg);
-webkit-background-size: cover;
background-size: cover;
}
@media screen and (max-width: 767px){
.effect_voice{
padding:40px 4vw 0;
background-image: linear-gradient( to top, #7ab2be,#7ab2be 70%,transparent 80% ),url(//www.hotyoga-loive.com/images/program/effect_voice_ph_01.jpg);
background-repeat: no-repeat;
background-size: auto,auto 450px;
background-position: 0 0,top 0 right -200px;
}
}
.effect_voice_ttl{
text-align: center;
color:#fff;
position: relative;
font-size:24px;
line-height: 1;
margin-bottom: 40px;
}
.effect_voice_ttl:after{
content:"";
width: 70px;
height: 1px;
background-color: #fff;
position: absolute;
bottom:-24px;
left:0;
right:0;
margin:0 auto;
}
.effect_text_01.effect_text_01__white{
color:#fff;
letter-spacing:1.2px;
margin-bottom: 20px;
}
.effect_voice_list{
display: flex;
justify-content: space-between;
width: 100%;
}
@media screen and (max-width: 767px){
.effect_voice_list{
flex-direction: column;
}
}
.effect_voice_list:after{
content:none !important;
}
.effect_voice_list_item{
width: 292px;
background-color: #fff;
padding:20px;
box-sizing:border-box;
position: relative;
}
@media screen and (max-width: 767px){
.effect_voice_list_item{
width: auto;
margin-bottom: 38vw;
}
}
.effect_voice_list_item:after{
content:"";
position: absolute;
bottom:-6px;
left:0;
right:0;
margin:0 auto;
width: 0;
height: 0;
border-style: solid;
border-width: 6px 6px 0 6px;
border-color: #fff transparent transparent transparent;
}
.effect_voice_list_item:before{
content:"";
position: absolute;
bottom:-120px;
width: 100px;
height: 100px;
-webkit-background-size: contain;
background-size: contain;
left:0;
right:0;
margin:0 auto;
}
.effect_voice_list_item:first-child:before{
background-image: url(//www.hotyoga-loive.com/images/program/effect_voice_01.png);
}
.effect_voice_list_item:nth-child(2):before{
background-image: url(//www.hotyoga-loive.com/images/program/effect_voice_02.png);
}
.effect_voice_list_item:nth-child(3):before{
background-image: url(//www.hotyoga-loive.com/images/program/effect_voice_03.png);
}
.effect_voice_list_item p{
font-size:14px;
line-height: 1.8;
}
.effect_phSet{
display: flex;
justify-content: space-between;
align-items: center;
}
@media screen and (max-width: 767px){
.effect_phSet{
flex-direction: column;
}
}
.effect_phSet_ph{
width: 400px;
height: 300px;
margin-right: 50px;
}
@media screen and (max-width: 767px){
.effect_phSet_ph{
width: 100%;
height: 63vw;
margin-right: 0;
margin-bottom: 4vw;
}
}
.effect_phSet_ph img{
width: 100%;
height: auto;
}
.effect_phSet_text{
flex:1;
}
.effect_phSet_text_01{
font-size:16px;
line-height: 2;
margin-bottom: 20px;
}
.btn_both_gren{
}
.mb10{
margin-bottom: 10px;
}
.mb20{
margin-bottom: 20px;
}
.mb30{
margin-bottom: 30px;
}
.mb40{
margin-bottom: 40px;
}
.mb60{
margin-bottom: 60px;
}
.mb80{
margin-bottom: 80px;
}
.mb100{
margin-bottom: 100px;
}
@media screen and (max-width: 767px){
.mb40{
margin-bottom: 30px;
}
.mb60{
margin-bottom: 40px;
}
.mb80{
margin-bottom: 50px;
}
.mb100{
margin-bottom: 60px;
}
}
.btn__programSearch{
}
.btn__programSearch a{
height: 60px;
padding:0 80px;
}
@media screen and (max-width: 767px){
.btn__programSearch a{
width: 95% !important;
}
}
@media screen and (min-width: 768px){
.is_sp{
display: none;
}
}
@media screen and (max-width: 767px){
.is_pc{
display: none;
}
}