@charset "UTF-8";

@media screen and (max-width: 768px) {
}

/*-----------------------------------------------------*/
/*------------------ページタイトル--------------------*/
/*-----------------------------------------------------*/
.p_title{
background-image: url(../img/page_title_img.webp);
background-size: cover;
}



/*-----------------------------------------------------*/
/*------------------OP--------------------*/
/*-----------------------------------------------------*/
.live-op{
margin-top: 100px;
position: relative;
}
@media screen and (max-width: 1000px) {
.live-op{
margin-top: 50px;
}
}

.live-op-content .content{
position: relative;
}
.live-op-content .wrap{
width: 50%;
}
@media screen and (max-width: 1000px) {
.live-op-content .wrap{
width: 100%;
}
}

.live-op-content .img{
position:absolute;
top:-3vw;
right: 0;
width: 45%;
height: min(25vw, 320px);
background-image: url(../img/live_op_ph.webp);
background-size: cover;
background-position: center;
}
@media screen and (max-width: 1000px) {
.live-op-content .img{
position:initial;
width: 100%;
margin-top: 30px;
height: 40vw;
}
}

.live-op .txt-en{
color: var(--color-gray-light);
font-size: var(--s150);
font-weight: 600;
position: absolute;
top:-5vw;
z-index: -1;
}
@media screen and (max-width: 1000px) {
.live-op .txt-en{
font-size: var(--s60);
top:-40px;
}
}

@media screen and (max-width: 1000px) {
.live-op-content p br{
display: none;
}
}




/*-----------------------------------------------------*/
/*------------------ポイント--------------------*/
/*-----------------------------------------------------*/

.live-point{
margin-top: 100px;
}
.live-point .content{
background-color: var(--color-blue-thin);
padding: 70px 30px 30px 30px;
}

.live-point-wrap{
display:grid;
grid-template-columns: 1fr 1fr;
column-gap: 30px;
}
@media screen and (max-width: 768px) {
.live-point-wrap{
display:block;
}
}

.live-point-wrap .point-box{
background-color: var(--color-white);
display: grid;
}
@media screen and (max-width: 768px) {
.live-point-wrap .point-box:first-child{
margin-bottom: 60px;
}
}

.live-point-wrap .point-box .wrap{
padding: 30px;
position: relative;
}

.live-point-wrap .point-box .wrap .number{
color: var(--color-blue);
font-size: var(--s60);
position: absolute;
top:-50px;
}
.live-point-wrap .point-box .wrap .number .txt-en{
color: var(--color-blue);
font-size: var(--s30);
}

.live-point-wrap .point-box .img{
  align-self: end;
}



/*-----------------------------------------------------*/
/*------------------ケース--------------------*/
/*-----------------------------------------------------*/
.live-case{
margin-top: 100px;
}

.live-case .live-case-op{
display: grid;
grid-template-columns: 200px 1fr;
}
@media screen and (max-width: 768px) {
.live-case .live-case-op{
display:block;
}
.live-case .live-case-op p{
margin: -20px 0 20px 0;
}
}

.live-case .live-case-list{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
@media screen and (min-width: 1080px) {
.live-case .live-case-list{
grid-template-columns: repeat(3, 33.3%);
}
}
@media screen and (max-width: 590px) {
.live-case .live-case-list{
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
}



.live-case .live-case-list .item{
height: 20vw;
background-size: cover;
background-position: center;
padding-top: 30px;
}
@media screen and (max-width: 900px) {
.live-case .live-case-list .item{
height: 30vw;
}
}
@media screen and (max-width: 400px) {
.live-case .live-case-list .item{
height: 35vw;
padding-top: 20px;
}
}

.live-case .live-case-list .item.case01{
background-image: url(../img/live_case_01.webp);
}
.live-case .live-case-list .item.case02{
background-image: url(../img/live_case_02.webp);
}
.live-case .live-case-list .item.case03{
background-image: url(../img/live_case_03.webp);
}
.live-case .live-case-list .item.case04{
background-image: url(../img/live_case_04.webp);
}
.live-case .live-case-list .item.case05{
background-image: url(../img/live_case_05.webp);
}
.live-case .live-case-list .item.case06{
background-image: url(../img/live_case_06.webp);
}

.live-case .live-case-list .item .txt-ja{
background-color: var(--color-yellow);
padding: 2px 7px;
}
@media screen and (max-width: 768px) {
.live-case .live-case-list .item .txt-ja{
font-size: var(--s12);
}
}


/*-----------------------------------------------------*/
/*------------------plan--------------------*/
/*-----------------------------------------------------*/

.live-plan{
margin-top: 100px;
}

.live-plan .live-plan-wrap{
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 60px;
}
@media screen and (max-width: 768px) {
.live-plan .live-plan-wrap{
display:block;
}
}

/*全体囲み */
.live-plan .live-plan-wrap .box{
background-color: var(--color-blue-thin);
border: 2px solid var(--color-blue);
position: relative;
}
@media screen and (max-width: 768px) {
.live-plan .live-plan-wrap .box{
margin-bottom: 50px;
}
}

.live-plan .live-plan-wrap .box:first-child:after{
content: "";
background-image: url(../../common/img/icon/icon-plus.svg);
display: block;
width: 30px;
height: 30px;
position: absolute;
right: -48px;
top:55%;
}
@media screen and (max-width: 768px) {
.live-plan .live-plan-wrap .box:first-child:after{
right: 0;
left: 0;
top:auto;
bottom: -40px;
margin: 0 auto;
}
}



.live-plan .live-plan-wrap .title{
background-color: var(--color-blue);
color: var(--color-white);
padding: 10px;
text-align: center;
font-size: var(--s20);
}

.live-plan .live-plan-wrap .wrap{
padding: 30px;
}

/* 値段 */
.live-plan .live-plan-wrap .price-box{
text-align: center;
margin-bottom: 10px;
}
.live-plan .live-plan-wrap .txt-ja{
background-color: var(--color-blue);
color: var(--color-white);
padding: 2px 7px;
border-radius: 3px;
}
.live-plan .live-plan-wrap .price{
color: var(--color-blue);
margin-left: 5px;
font-size: var(--s40);
}


.live-plan .live-plan-wrap dl{
display: grid;
grid-template-columns: 70px 1fr;
margin-bottom: 10px;
}
.live-plan .live-plan-wrap dt{
color: var(--color-blue);
font-weight: 500;
}

.live-plan .live-plan-wrap .title05{
font-size: var(--s20);
}

/* 注意 */
.caution{
border: 2px solid var(--color-red);
color: var(--color-red);
padding: 20px;
margin-top: 50px;
}