/*
Theme Name: Lightning Child
Theme URI:
Template: lightning
Description:
Author:
Tags:
Version: 0.6.1
*/


body{
    -webkit-text-size-adjust: ('none' '100%' 'auto');
}

/* パンくずリスト非表示 */
.breadcrumb{
	display:none;
}

/* flexboxのgapを16pxにする */
.is-layout-flex{ gap:16px}

/*
header
*/
header { 
    height:96px;
}
body .header-sp{
    display:none;
}

/* 
ファーストビュー
 */
.firstView.sp{
    display: none;
}

.fv-headline{
	
    background: linear-gradient(90deg, #EA3999 30%, #EB6641 50%);
    font-size: 64px!important;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.flex-left{ 
    flex-grow:1.7!important;
}

.appeals img{
    width:224px;
}

.flex-right{ 
    flex-grow:1!important;
}

.fv-sp-content{
    position:relative;
}
.fv-sp-content .price{
    position:relative;
}

.fv-price-down{
    padding:auto 40px;
    position: relative;
}

.fv-price-down .price{
    justify-content: space-between!important;
    width:400px;
}
.fv-price-down .price > p:nth-child(1){
    font-size: 40px;
}
.fv-price-down .price > p:nth-child(2){
    font-size: 96px;
}
.fv-price-down .price > p:nth-child(2) > strong > span.small{
    font-size: 32px;
}

.fv-price-down .rightArrow{
    position: absolute;
    bottom:-5px;
    left:59%;
}

/* 9800円→0円 */
.firstView--flexLeft--placeDown{
   width:70%;
   border-bottom:solid;
   border-color:#FFFF00;
   border-width:4px;
   gap:16px!important;
}

p.fontSizeS.vk_block-margin-0--margin-bottom { 
    width:160px; 
}

.default-price{
   font-size:32px;
   font-weight:bold;
   text-decoration:solid line-through #000000 4px ;
   margin-bottom:3px!important;
}
.default-price.sp{
   font-size:12px;
   font-weight:bold;
   text-decoration:line-through;
   text-decoration-color:#333333;
   text-decoration-line:solid;
   text-decoration-style:2px;
   margin-bottom:3px!important;
}

span.tax{
	font-size:16px;
}

.strike-throught{
    position: absolute;
    top:70px;
    background-color: #000000;
    width:240px;
    height: 4px;
}

.rightArrow.sp{
   margin-bottom:8px!important;
}

.price-description{
    text-align: center;
    font-size: 16px;
    width:100%;
}

/* 今すぐ始めるボタン	 */
.trialButton strong { 
    font-size:24px;
    color:#ffffff;
}
.trialButton{
    display: flex;
    align-items: center;
	 justify-content:center;
    width:75%;
    height:80px;
    line-height:52px;    
    background-color: #ffffff;
    border-width:2px;
    border-radius:20px;
    border:solid 2px #333333;
	 z-index:10;
    transition: all 0.4s ease-out;
    background: linear-gradient(90deg, #EA3999 30%, #EB6641 50%);

}

.trialButton:hover{
    /*ボタンの形状*/
    border-color:#333333;
    color: #fff!important;
    /*背景の色と形状*/
    background: linear-gradient(270deg, #EB6641 0%, #ffe140 50%, #EA3999 100%);
    background-size: 200% auto;
    background-position: right center;
    /* ボックスの影    */
    box-shadow: 0 5px 10px rgb(250,108,159,0.4);
}
.trialButton:hover strong{
    color:#ffffff;
}

.trialButton > a{
    margin: 0 auto;
}


/* 製品画像 */
.screen-image{
   width:1600px
}


@media (max-width:991px){	
/* SP表示で表示にする	 */
   span.sp{display:block; height:8px;}
   
/* 右矢印 */
 img.wp-image-2552{ width:30px!important}
   
   
/*今だけ無料で全ての機能利用できる部分のSPでの文字サイズと改行*/
    .firstView--flexLeft--allFree{
        font-size:16px!important;
    }
    .firstView--flexLeft--allFree >strong > span.sp{
        display: block;
    }
    .firstView--flexLeft--allFree .allFreeText{
        font-size:24px!important; 	
        color:#FC138B
    }
   
    
    body	.fontSizeS>strong{ font-size:12px}
    body	.fontSizeM>strong{ font-size:20px!important}
    body .fontSizeL>strong{ font-size:32px}
    body .fontSizeLL{ font-size:64px!important}

    /* 今すぐ始めるボタン	 */
    .trialButton strong { font-size:16px }

}


span.sp{
    display:none
}

.firstView--flexLeft--allFree>strong{
	font-size:20px;
	width:110%;
    border-width: 4px;
    border-bottom: solid;
    border-color: #FFFF00;
    border-width: 4px;
    transform:translateX(-10px);
}
.underline{
    width:500px;
    border-bottom: solid;
    border-color: #FFFF00;
    border-width: 4px;
    position: relative;
}

.firstView--flexLeft--allFree .allFreeText{
	font-size:40px;
	background: linear-gradient(90deg, #EA3999 30%, #EB6641 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media (max-width:991px){
    .header-sp{
        display: block!important;
        position: relative;
        z-index: 10;
    }

    .fv-headline{
        font-size: 40px!important;
    }
    .firstView.sp{
        display: block;
    }
    .firstView.pc{
        display:none;
    }
 
    
    .fv-price-down{
        padding:0 auto;
        
    }
    
    .fv-price-down .price{
        justify-content: space-between!important;
        border-width: 4px;
        width:200px;
    }
	
	span.tax{
		font-size:10px;
	}

	.strike-throught{
    	top:35px;
    	width:125px;
    	height: 2px;
	}
	
    .underline{
        width:250px;
        margin:0 auto;
        margin-top:16px!important;
    }

	.price-description{
   		 font-size: 10px;
	}
	
    .fv-price-down .price > p:nth-child(1){
        font-size: 20px;
    }
    .fv-price-down .price > p:nth-child(2){
        font-size: 48px;
    }
    .fv-price-down .price > p:nth-child(2) > strong > span.small{
        font-size: 12px;
    }
    
    .fv-price-down .rightArrow{
        bottom:-20px;
        transform: scale(0.4);
        left:55%;
    }

}


/* 
 * インスタグラム 運用でこんなお悩みはありませんか？
 * */

 .trouble-text-list li{
	list-style:none;	
	display:flex;
	align-items:center;
	font-weight:bold;
	font-size:24px;
}

.trouble-text-list img{
	width:40px;
	height:40px;
	margin-right:8px;
}

.trouble-right{
    flex-grow: 2.2!important;
}

.trouble-left figure{
    height:300px;
}


.trouble-left figure > img{
    height:300px;
    width: auto;
}

.trouble-left figure{
    display:flex;
    justify-content:center;
}

@media (max-width:991px){
	.trouble-left{
		order: 1; 
	}
	.trouble-right{
		order: 2;
	}
	
    .trouble-headline{
        font-size:23px!important;
    }
	
	.trouble-text-list li{
		font-size:16px;
	}

    .trouble-column{
        max-width: 100%!important;
    }
}

@media (max-width:781px){
	.trouble-left{
		order: 2; 
	}
	.trouble-right{
		order: 1;
	}
	
 .trouble-headline{
	 font-size:23px!important;
 }
	
	.trouble-text-list li{
		font-size:16px;
	}
}

/* 
 * 接続
 *  */

 @media (max-width:991px){
	.connection{
		margin:32px auto!important;
	}
}


/* 
 * infini-botで解決できます！
 *  */

.solution{
    background: linear-gradient(90deg, #EA3999 30%, #EB6641 50%);
    font-size: 54px;
     -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.solution-group{
	position:relative;
}

.solution-description{
    font-size: 36px;
    line-height: 54px;
    margin-bottom: 32px!important;
}
.solution-description-small>strong{
    font-size: 28px;
    border-bottom: solid;
    border-color: #FFFF00;
    border-width: 4px;
}

.solution-image{
	position:absolute;
	right:1%;
    top:120px;
}

.solution-image img{
 height:200px;
}


@media (max-width:1200px){
    .solution-image{
        right:1%;
    }        
    .solution-description span.sp{
        display:block;
    }
    .solution-description{
        line-height: 24px;
    }
}

@media (max-width:991px){
	.solution-group{
		padding:16px!important;
	}
	.solution{
		font-size:36px!important;
		line-height:40px;
	}
    .solution > strong > span.sp{
        display: block;
    }


    .solution-description{
		font-size:20px!important;
		line-height:18px;
		margin-bottom:16px!important;
	}

    .solution-description-small>strong{
        font-size: 16px;
    }
    
    .solution-description-small>strong>span.sp{
        display: block;
    }
	.solution-image{
    	right:50%;
        top:120px;
        transform: translate(50%, 0%);
    }
	
}

/* 
 * infini-botが選ばれている3つの理由
  */

  .three-reason-headline{
	margin:24px;
}

.three-item{
	color:#EA3999;
}

.reason-group{
	margin:24px;
	padding:8px;
    padding-top:32px;
	width:296px;
	position:relative;
}

.reason-group > p:nth-child(1){
	font-size:24px;
	font-weight:bold;
	line-height:24px;
	margin-bottom:4px!important;
}

.reason-group > p:nth-child(2){
	font-size:32px;
	font-weight:bold;
    color:#EA3999;
}

.reason-group > p:nth-child(1), .reason-group > p:nth-child(2){
	transform:translateY(24px);
}


.reason-image{
    height:auto;
    padding:16px;
}

.reason-image > figure{
    height:100%;
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.reason-image > figure > img{
    height:60%;
    width:auto;
}

.reason-point{
	width:100px;
	text-align:center;
	position:absolute;
	font-size:48px;
	line-height:48px;
	font-weight:bold;
	top:-30px;
	left:50%;
	transform:translateX(-50%);
	background-color:#ffffff;
	padding:auto 20px;
	border-radius:40px;
    font-family: "Jomolhari", serif;
    font-weight: 400;
    font-style: normal;
}

.reason-group > p span.small{
	font-size:24px;
	margin-right:4px;
    font-family: "Jacques Francois", serif;
    font-weight: 400;
    font-style: normal; 
}


@media (max-width:991px){
	.reason-column{
		flex-direction:column!important;
	 	align-items:center!important;
		justify-content:center;
		gap:36px!important;
	}
	
	.three-reason-headline{
		font-size: 20px!important;
	}
	
	
	.reason-point{
		width:100px;
		font-size:36px;
		line-height:24px;
		top:-15px;
	}
	
	.reason-group > p span.small{
		font-size:20px;
}
	
	.reason-group > p:nth-child(1){
		font-size:16px;
		line-height:16px;
	}

	.reason-group > p:nth-child(2){
		font-size:24px;
	}	
	
}

/* 
 * infini-botを使う4つのメリット 
 */

/* 4つ */
.four-item{
	color:#EA3999;
}

/* タイトル下の下線(他のところも共通) */
.headline-underbar{
	width:98px;
	height:4px;
    transform: translateY(10px);
    background: linear-gradient(90deg, #EA3999 30%, #EB6641 50%);
}

.merit-headline{
			text-decoration:solid underline #FFFF00 4px;
}

.merit-headline .bg-pink{
	color:#EA3999;
}



@media (max-width:991px){
	
    .headline-underbar{
        width:46px;
    }
	
}

/* merit部分 */
.merit{
	position:relative;
	padding:40px 12px;
	max-width:100%!important;
}

.merit-title{
	position:absolute;
	text-align:center;
	width:140px;
	top:-40px;
	left:5%;
	font-size:40px;
	background-color:white;
	border-radius:40px;
    font-family: "Jomolhari", serif;
    font-weight: 400;
    font-style: normal;
}

.merit-title > span.small{
		font-size:24px;
		margin-right:4px;
        font-family: "Jacques Francois", serif;
        font-weight: 400;
        font-style: normal;          
    }

.merit p{
	margin-left:20px;
}

.merit-description{
    font-weight: bold;
}

@media (max-width:991px){
	.four-merit-headline{
		font-size:24px!important;
	}

    .merit-headline > strong > span.sp{
        display: block;
    }
	.merit-title{
		width:100px;
		font-size:36px;
		line-height:24px;
		top:-17px;
		left:7%;
	}
	.merit-title > span.small{
		font-size:20px;
		margin-right:4px;
}
	.merit-headline{
		text-align:center;
		font-size:20px!important;
		line-height:24px;
	}
	.merit-description{
		font-size:12px!important;
	}

    .merit:nth-child(1) > .merit-headline{
        font-size:19px!important;;
    }
}



/* 
 * infini-botでできること 
 */


.possible-description{
    max-width:100%!important;
}
   
.possible-description span.bg-pink{
    color:#EA3999;
}

.functions{
margin:80px 0px 32px!important;
width:100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
row-gap: 100px;
column-gap:16px;
}

.function{
position:relative;
background-color:#FDE5F1;
max-width:(100%/3-128)px;
width:360px;
height:280px;
border-radius:40px;
}

.function-image{
position:absolute;
top:-70px;
left:50%;
transform: translate(-50%, 0%);
}

.function-image>img{
width:110px;
}


.function.movie .function-text>p:nth-child(1){
margin-bottom:0px;
}
.function.movie .function-text>p:nth-child(2){
margin-bottom:8px;
}
.function.comment-keyword .function-image{
top:-60px;
}
.function.comment-keyword .function-image>img{
width:150px;
}

.function.three-arrow .function-image{
top:-40px;
}
.function.three-arrow .function-image>img{
width:130px;
}
.function.three-arrow .function-text>p:nth-child(2){
margin-bottom:24px;
}

.function.click-here .function-image{
top:-30px;
}
.function.click-here .function-image>img{
width:160px;
}
.function.click-here .function-text>p:nth-child(1){
margin-bottom:16px;
}

.function.click-here .function-text>p:nth-child(2){
margin-bottom:8px;
}



.function-text{
margin:64px auto 20px;
padding:0 5%
}

.function-text>p:nth-child(1){
text-align:center;
font-size:24px;
font-weight:bold;
}

.function-text>p:nth-child(2){
    font-size:16px;
    font-weight:bold;
}

.function-movie-button{
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.function-movie-button > button{
    margin:0 20%;
    width:200px;
    height:60px;
    background-color:#ffffff;
    color:#E5117E;
    font-weight: bold;
    font-size:16px;
    text-align:center;
    border: 1px solid #E5117E;
    border-radius:40px;
}

.modal{
    height:600px;
    width:600px;
}

.function-gif{
    background-color: #333333;
    border-radius: 20px;
    height:100%;
    width:100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.gif-description{
    background-color: #FBCAE3;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    width:100%;
    height:48px;
    font-size: 24px;
    color: #333333;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
} 
.gif-description>p{
    margin-bottom:0px;
    font-size: 16px!important;
    font-weight: bold;
}
.gif-image{
    width:100%;
    height:100%;
    background-color: #333333;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

@media (max-width:1200px){
    .function{
        width:296px;
    }
    .function-text>p:nth-child(1){
        font-size: 20px;
    }
    .function-text>p:nth-child(2){
        font-size: 14px;
    }
    .function.movie .function-text>p:nth-child(1){
        margin-bottom:16px;
    }
    .function.movie .function-text>p:nth-child(2){
        margin-bottom:0px;
    }
    .function.three-arrow .function-text>p:nth-child(2){
        margin-bottom:0px;
    }
}

@media(max-width:991px){
    .possible-headline{
        margin-bottom:32px!important;
    }

    .possible-headline p{
        font-size:24px!important;
    }

    .possible-description{
        font-size:16px!important;
        line-height: 24px!important;
    }

    .possible-description > strong > span.sp{
        display: block;
        height:0px;
    }

    .functions{
        margin:32px auto 32px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
        row-gap: 100px;
        column-gap:64px;
    }

    .function{
        width:100%;
    }

    .movie > .function-text{
        padding:0 0;
    }

    .movie > .function-text > p:nth-child(2){
        padding:0 5%;
    }

    .function.three-arrow .function-text>p:nth-child(2){
        margin-bottom:16px;
    }

    .modal{
        height:auto;
        width:80%;
        background-color: #333333;
    }


    .function-gif{
        border-radius: 20px;
        height:auto;
    }	
    .gif-description{
        background-color: #FBCAE3;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        width:100%;
        height:48px;
        font-size: 24px;
        color: #333333;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    } 
    .gif-description>p{

    }
    .gif-image{
        width:80%;
        height:80%;
    }
}


@media(max-width:768px){
    .functions{
        margin:32px auto 32px;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        row-gap: 100px;
        column-gap:64px;
    }

    .function.movie .function-text>p:nth-child(2){
        margin-bottom:16px;
    }

}
   
   
   


/* 
サービス概要
*/

.service>div{
    gap: 0px !important;
}
.service>div>figure{
    margin-bottom:32px;
}
.service p{
    text-align: center;
    font-size: 18px;
    line-height: 20px;
}


@media (max-width:1200px){
	.service p{
		font-size:16px;
        line-height: 18px;
	}	
    .service-text{
        margin-bottom: 12px!important;
    }
}


@media (max-width:991px){
	.service p{
		font-size:16px;
	}	
    .service-text > strong > span.sp{
        display: block;
    }
}

@media (max-width:768px){
	.service p{
		font-size:11px !important;
        line-height: 16px;
        -webkit-text-size-adjust: ('none' '100%' 'auto');

	}	
}

/* 
アップデート情報
*/

.update .day{
    width:110px;
}

.update-box{
    border:1px solid #333333;
    padding:24px;
}

.post-item{
    display: flex;
    gap:8px;
}
.post-item>p{
    font-size: 20px;
    margin-bottom: 0px!important;
}


@media (max-width:991px){
    .update>p{
        font-size: 20px !important;
    }
    .update>div>div p{
        font-size:12px !important;
    }
}

@media (max-width:767px){
	.update .day{
    width:70px;
   }
}


/* 
ユーザーの声
*/

.voice-section > div{
    max-width:100%!important;
}

.voice-headline p{
    font-size:48px;

}

.swiper {
    width: 100%;
    max-width:100%!important;
    height: 740px;
}

.swiper-button-next,.swiper-button-prev{
    display:none;
}

.swiper-pagination{
    width:50%!important;
    height:24px;
    padding:16px auto;
    margin:0 auto;
    background-color: #FBCAE3;
    border-radius: 20px;
    position:relative;
    transform: translateY(-30px);
}

.swiper-pagination-bullet{
    width:10px;
    height:10px;
    border-radius: 50%;
    background-color: #ffffff;
}
.swiper-pagination-bullet-active{
    background-color: #E5117E;
}

.vk_slider_item_container{
    padding:0!important;
}

.voice {
    background-color: #ffffff;
    border-radius: 40px;
    border:2px solid #2FE511;
    padding: 48px;
    margin: 10px;
    height:640px;
    display: flex;
    flex-direction: column;
    justify-content: start;
}

.voice > div:nth-child(1) >  p{
    font-size: 24px;
    font-weight: bold;
}

.voice > div:nth-child(1) > p > strong {
    border-bottom: solid;
    border-color: #FFFF00;
    border-width: 4px;

}

.voice > div:nth-child(2){
    display:flex;
    flex-direction: row;
    align-items: center;
}
.voice > div > div > img{
    max-width:none;
    padding:8px;
}
.voice > div:nth-child(2) > p{
    margin-left:8px;
    font-size: 24px;
}


@media (min-width:1200px){
    .voice{
        height:510px;
    }

    .swiper{
        height:610px;
    }
}

@media (max-width:991px){
    .voice-headline p{
        font-size:24px;
    }

    .swiper {
        height: 432px;
    }

    .voice{
        padding:32px 8px;
        position:relative;
        height:320px;
        display: block;
    }
    .voice > div:nth-child(1) > p{
        font-size: 12px;
        position: absolute;
        top:50px;
        left:96px;
        text-align: center;
    }
    .voice > div:nth-child(1) > p > strong >span.sp{
        display: block;
    }
    .voice .blank{
        display: none;
    }
    .voice > div:nth-child(2) {
        flex-direction: column;
        align-items: start;
    }
    .voice > div > div > img{
        width:90px;
        height:90px;
        margin-left: 0;
        transform:translateX(-10px);
    }
    .voice > div:nth-child(2) > p{
        font-size: 14px;
        margin:8px;
    }
}

@media (max-width:768px){
    .voice{
        height:480px;
    }

    .swiper{
        height:580px;
    }
}

@media (max-width:390px){
    .voice{
        height:510px;
    }

    .swiper{
        height:610px;
    }

    .voice > div:nth-child(1) > p{
        left:84px;
    }
}


/* 
料金プラン
*/

.plan{
    position:relative;
}

.price-headline>p>strong{
    padding:16px;
    border-radius: 20px;
    background-color: #ffffff;
}

.price-headline{
    position:relative;
    z-index: 1;
}

.price-box{
    position:absolute;
    top:24px;
    left:0;
    width:100%;
    height:100%;
    border: 2px solid #E5117E;
    border-radius: 40px;
    z-index:0;
}

.price-detail{
    margin:32px auto!important;
    position: relative;
}
.price-detail>div{
    align-items: start;
    gap:140px;
}

.initial-cost>p:nth-child(2){
    font-size:96px;
}
.initial-cost>p:nth-child(2)>strong>span{
    margin-left:8px;
    font-size: 24px;
}

.initial-cost,.usage-charge{
    gap: 0!important;
}

.initial-cost>p,.usage-charge > p{
    margin-bottom: 0!important;
}

.usage-charge>div>div>p:nth-child(1){
    font-size:32px;
}

.usage-charge>div>div>p:nth-child(2){
    font-size:128px;
}
.usage-charge>div>div>p:nth-child(2)>strong>span.small{
    font-size:24px;
}

.usage-charge .price{
    width:120%;
    justify-content: space-between!important;
    border-bottom: solid;
    border-color: #FFFF00;
    border-width: 4px;
    gap:24px;
}

.usage-charge>div{
    position:relative;
}
.usage-charge .rightArrow{
    position:absolute;
    bottom:4px;
    left:215px;
}

.trial{
    position:absolute;
    top:-50px;
    right:25px;
}
.trial-sp{
    display:none;
}



.usage-infomation>p{
    font-size: 32px;
}

.usages{
    margin:32px auto 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
	row-gap: 80px;
	column-gap:40px;
}

.usage{
	position:relative;
    margin:0 auto;
	background-color:#ffffff;
	max-width:(100%/2-480px);
	width:440px;
	height:300px;
	border-radius:40px;
}

.usage-image{
	position:absolute;
	width:96px;
	top:-50px;
	left:50%;
	transform: translate(-50%, 0%);
}

.usage-text{
	margin:80px auto 20px;
	padding:0 5%
}

.usage-text>p:nth-child(1){
	text-align:center;
	font-size:30px;
	font-weight:bold;
}

.usage-text>p:nth-child(2){
	font-size:20px;
}

.usages > .usage:nth-child(4) .usage-text > p:nth-child(2){
    text-align: center;
}


.plan .price .strike-throught{
    position: absolute;
    top:105px;
    background-color: #000000;
    width:200px;
    height: 4px;
}

.plan .price-description{
	transform:translate(35px,10px);
}

@media (max-width:1200px){
    .trial{
        top:-50px;
        right:-2%;
    }    
    .trial>figure{
        transform: scale(0.7);
    }
	
	.usage-text>p:nth-child(1){
		font-size:26px;
	}
}

@media (max-width:991px){
    .price-headline>p{
        font-size:24px!important;
    }
    .price-box{
        top:10px;
    }
    
    .price-detail>div{
        gap:32px;
    }
	
	.plan .price{
		transform:translateX(-10px);
	}
	
	.plan .price-description{
		transform:translate(35px,2px);
	}
	
    .initial-cost>p:nth-child(1){
        font-size:20px!important;
    }
    .initial-cost>p:nth-child(2){
        font-size:32px;
    }
    .initial-cost>p:nth-child(2)>strong>span.small{
        font-size:12px;
    }

    .usage-charge>p:nth-child(1){
        font-size:20px!important;
    }

    .usage-charge>div>div>p:nth-child(1){
        font-size:16px;
    }

    .usage-charge>div>div>p:nth-child(2){
        font-size:40px;
    }
    .usage-charge>div>div>p:nth-child(2)>strong>span.small{
        font-size:12px;
    }
    

    .usage-infomation>p{
        font-size: 24px;
    }


    .usage-charge .rightArrow{
        transform: scale(0.4);
        bottom:-20px;
        left:96px;
    }

    .usages{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        row-gap: 80px;
        column-gap:160px;
    }

    .usage{
        max-width: none;
        width:80%;
        height:200px;
    }

    .usage-text{
        margin:60px auto 20px;
        padding:0 5%;
        -webkit-text-size-adjust: ('none' '100%' 'auto');
    }
    
    .usage-text>p:nth-child(1){
        font-size:16px;
        font-weight:bold;
        -webkit-text-size-adjust: 100%;
    }
    
    .usage-text>p:nth-child(2){
        font-size:12px;
        -webkit-text-size-adjust: 100%;
    }

   .plan .price .strike-throught{
   		position: absolute;
    	top:29px;
    	background-color: #000000;
    	width:105px;
    	height: 2px;
	}

    .trial{
        display:none;
    }
    .trial-sp{
        display: block;
        width:130px;
        text-align: center;
        font-size:12px;
        font-weight: bold;
        background-color: #FFF844;
        border:1px solid #333333;
        border-radius: 10px;
        transform:translateX(56px);
    }
}

@media (max-width:768px){
	.plan .price-description{
		transform:translate(5px,10px);
	}
	.trialButton{
		margin-top:15px!important;
	}
	.plan .sp{
		display:block;
	}
	.plan .price-description{
		line-height:0.7rem;
	}
}

/* 
ご利用までの流れ
*/

.flow-section{
    margin:120px auto;
}


.flow-headline p{
    font-size: 48px;
}

.flows{
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:center;
}

.flow{
	margin:0 8px;
	padding:16px 8px;
	border:1px solid #E5117E;
	height:312px;
	width:280px;
	border-radius:25px;
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	align-items:center;
}

.flow-image{
    height:107px;
    width: auto;
}

.flow-step{
	font-size:32px;
	font-weight:bold;
	margin-bottom:0px!important;
}

.flow-text{
	font-size:16px;
    font-weight: bold;
}

.flow-button{
	background-color:#E5117E;
	border-radius:30px;
	padding:16px 16px;
	font-size: 16px;
    font-weight: bold;
    border:none;
}
.flow-button>a{
    color: #ffffff;
    text-decoration: none;    
}


@media (max-width:1200px){
    .flow-button > a{
        font-size: 12px;
    }
}

@media (max-width:991px){
    .flow-section{
        margin:64px auto;
    }
    .flow-headline p{
        font-size: 24px!important;
    }

    .flows{
        flex-direction: column;
        gap:24px;
    }
    
    .flow{
        height:280px;
        width:80%;
    }
    .flows .right-arrow{
        transform:rotate(90deg);
    }

    .flow-step{
        font-size: 20px;
    }

    .flow-text{
        font-size: 16px;
        margin-top:40px;
    }

    .flows > .flow:first-child > .flow-text{
        margin-top:4px;
    }
}


/* 
よくあるご質問
*/

.qa-section{
    padding-top:64px;
}
.qa-headline{
    font-size: 48px;
    margin:64px auto;
}


.other-question{
    font-size: 24px;
    padding-top:16px;
}

.official-line>a{
    font-size: 24px;
}

.question{
    font-size: 24px;
}
.answer{
    font-size: 24px;
}


@media (max-width:991px){
    .qa-section{
        padding-top:24px;
    }
    .qa-headline{
        font-size: 24px;
        margin:24px auto;
        -webkit-text-size-adjust: ('none' '100%' 'auto');

    }


    .other-question{
        font-size: 16px;
        line-height: 16px;
    }
    .other-question > span.sp {
        display: block;
    }

    .official-line>a{
        font-size: 16px;
    }

    .question{
        font-size: 16px;
    }
    .answer{
        font-size: 16px;
    }
    
}





/* フッター */
#footer{
    background: linear-gradient(120deg, #EA3999 10%, #EB6641 90%);
}

.footer{
	border-top:1px solid #ffffff;
	border-bottom:1px solid #ffffff;
	display:flex;
	flex-direction:row;
	justify-content:space-between;
}
.footer-left{
	width:440px;
    margin:16px 4px
}
.footer-left a{
	color: #ffffff;
}
.footer-left a:link{
	color:#ffffff;
}
.footer-left > .sp{
    display:none;
}
.footer-left .divide{
    color:#ffffff;
}
.footer-right{
	width:40%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.footer-right img{
	width:100%;
}
.copyright{
    color:#ffffff!important;
}

@media (max-width:991px){
    .footer{
        flex-direction:column;
        align-items: center;
    }
    .footer-left{
        margin-bottom:8px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .footer-left span.divide{
        display: none;
    }
    .footer-left > span.sp{
        display:block;
    }
    .footer-left a {
        line-height:16px;
    }
    .footer-right{
        margin-bottom:16px;
        justify-content: end;
    }
}





