@charset"utf-8";
/* CSS Document */
.spNone {
	display: block!important;
}
.pcNone {
	display: none!important;
}
/*---------------------------------------------------
 common
----------------------------------------------------*/
.bg_gradbl{
    background-image: linear-gradient(0deg, rgba(153, 211, 223, 1), rgba(220, 255, 255, 1));
}
.bg_bl02 {
background-repeat: repeat-y;
}
.title {
	padding-top: 3vw;
}
.titl_txt {
	padding: 2vw 0;
}
/*---------------------------------------------------
 feature
----------------------------------------------------*/
.featurebox {
	padding: 3vw 0;
}
.fbox {
	width: 90%;
	background: #ffffff;
	border-radius: 8px;
	margin: 2.5vw auto;
	padding: 2vw;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.fbox:first-child {
	margin-top: 0;
}
.fbox_l {
	width: 80%;
}
.fbox_l h6 {
	font-size: 1.5vw;
	font-weight: 400;
	margin-bottom: 2%;
}
.fbox_l h6 span {
	font-size: 2.1vw;
	font-weight: 700;
	color: #00A7B3;
	background: linear-gradient(transparent 65%, #FCEE21 35%);
}
.fbox_l p {
	font-size: 1.15vw;
	font-weight: 300;
}
.fbox_r {
	width: 20%;
	max-width: 170px; 
	display: grid;
}
.fbox_r img {
	width: 100%;
	height: fit-content;
    margin: auto;
    display: block;
}
.fbox_under {
	width: 100%;
	margin: 2% 0 0;
	padding: 2vw;
	background: #F2F2F2;
	border-radius: 8px;
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;
}
.fbox_under .under_l {
	width: 40%;
}
.under_l .u_titl {    
	width: fit-content;
	font-size: 1.8vw;
    font-weight: 700;
    color: #535353;
    line-height: 1.15;
    position: relative;
    margin: -0.5em auto 0.75em;
	display: block;
}
.under_l .u_titl strong {
	font-size: 4vw;
	font-family: "acumin-pro-extra-condensed", sans-serif;
}
.under_l .u_titl span {
	font-size: 2.3vw;
	font-weight: 700;
	color: #00A7B3;
}
.under_l .u_titl img {
	position: absolute;
	top: -32.5px;
    left: -43px;
}
.under_l .b_txt {
	font-size: 1.4vw;
	font-weight: 700;
    color: #535353;
	text-align: center;
}
.under_l a {
	width: 100%;
	margin: 1vw auto 0;
	padding: 1vw 0.5vw;
	color: #ffffff;
	border-radius: 50px;
	background: #FFB200;
	display: block;
	box-sizing: border-box;
}
.under_l a:hover {
	background: #FFCA4F;
}
.under_l a p {
	width: auto;
	font-size: 1.25vw;
	font-weight: 700;
	text-align: center;
	color: #ffffff;
}
.fbox_under .under_r {
	width: 50%;
	background: #ffffff;
	border: solid 10px #FFB200;
	border-radius: 8px;
	padding: 1.5vw;
	box-sizing: border-box;
}
.under_r li {
	font-size: 1.3vw;
	font-weight: 500;
	color: #535353;
	border-bottom: solid 2px #E6E6E6;
	padding-bottom: 0.5vw;
	margin-bottom: 1vw;
}
.under_r li:last-child {
	margin-bottom: 0;
}
.secarea {
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.secbox {
	width: 49.25%;
	background: #ffffff;
	border-radius: 8px;
	margin-bottom: 1vw;
	padding: 1vw;
	box-sizing: border-box;
}
.secbox .logo {
	display: flex;
	justify-content: flex-start;
	border-bottom: solid 1px #888888;
	padding-bottom: 2%;
}
.secbox .logo img {
	width: 30%;
	max-width: 148px;
	margin-right: 3%;
}
.secbox .logo p {
	font-size: 1.2vw;
	font-weight: 700;
	line-height: 1.2;	
	height: fit-content;
	margin: auto 0;
}
.secbox .logo p small {
	font-size: 0.85vw;
	font-weight: 500;	
}
.secbox .logo_txt {
	width: 95%;
	font-size: 0.95vw;
	line-height: 1.5;
	margin: 2% auto 0;
}
.secbox02 {
	width: 100%;
	margin-bottom: 0;
}
.secbox02 .logo {
	justify-content: center;
	padding-bottom: 1%;
}
.secbox02 .logo_txt {
	text-align: center;
	margin-top: 1%;
}

/*---------------------------------------------------
 comparison
----------------------------------------------------*/
.comparison .bg_bl02 {
	padding-bottom: 5%;
}
.comparison .bg_wbl {
    padding: 1px 0;
}
.comparison div p.titl_txt {
	padding: 1vw 0 0;    
	margin-bottom: 0;
}
.other_comp p.titl_txt {
	font-size: 1.5vw;
}
.comparea {
    width: 90%;
    margin: 3% auto 5%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.comparea .box {
	width: 40%;
	margin-bottom: 1%;
	padding: 1% 1.5%;
	background: #ffffff;
	border-radius: 8px;
	border: solid 3px #71D1D6;
	box-sizing: border-box;
	position: relative;
}
.comparea .box:nth-child(2n+1) {
	margin-right: 1%;
}
.comparea .box .titl {
	font-size: 1.4vw;
	font-weight: 700;
	text-align: center;
	padding: 0 88px 0.8vw;
	border-bottom: dashed 3px #71D1D6;
}
.comparea .box .txt {
    font-size: 0.95vw;
	font-weight: 300;
    text-align: center;
	margin-top: 1vw;
}
.comparea .box .icon {  
	width: 88px;
    height: 48px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    line-height: 3.5;
    margin: auto;
    border-radius: 0 8px 0 8px;
    color: #ffffff;
    background: #71D1D6;
    position: absolute;
    top: -3px;
    right: -3px;
}
/*---------------------------------------------------
  faq
----------------------------------------------------*/
.faq .bg_bl02 {
    padding-bottom: 10%;
}
.faq div .ac_box {
    border: solid 1px #00A7B3;
	border-radius: 8px;
}
/*---------------------------------------------------
  price
----------------------------------------------------*/
.price .bg_bl02 {   
    padding-bottom: 10%;
}
.price div .planbox th.pricetitl {
	width: 15%;
}
.price div .planbox td .plnbku {
	font-size:max(1.15vw,17px);
	font-weight: 300;
}
.price div .planbox td a.btn {
	width: 100%;
	height: 3em;
	margin: 2vw auto 0;
	font-size:max(1.3vw,18px);
	line-height: 2;
	color: #ffffff;
	border-radius: 50px;
	background: #FFB200;
	box-sizing: border-box;
	display: flex;
    justify-content: center;
    align-items: center;
}
.price div .planbox td a.btn:hover {
	background: #FFCA4F;
}
/*---------------------------------------------------
  example
----------------------------------------------------*/
.ex_box {
	width: 100%;
	margin: 0 auto;
	padding: 5vw 5%;
	box-sizing: border-box;    
	display: flex;
    justify-content: space-between;
}
.ex_box .lbox {
    width: 30%;
    max-width: 693px;  
	height: fit-content;
    margin-right: 3%;
}
.ex_box .rbox {
    width: 77%;
}
.rbox .titl {
    width: 60%;
    height: fit-content;
    padding: 0 0 0 2.5%;
    margin: 0 0 1vw;
	font-size:min(2.37vw,32px);
    font-weight: 700;
    line-height: 1.6;
    color: #ffffff;
    background: #00A7B3;
    border-radius: 0 50px 50px 0;
    box-sizing: border-box;
}
.rbox .txt {
	font-size:min(1.33vw,18px);
	margin-bottom: 1vw;
}
.box_txtarea .box {
    width: 100%;
    border: solid 3px #71D1D6;
    border-radius: 8px;
	background: #ffffff;
    padding: 1vw 1vw;
    margin: 0 auto 0.5vw;
	box-sizing: border-box;
}
.box_txtarea .box:last-child {
	margin-bottom: 0;
}
.box_txtarea .box h3 {
	font-size:min(1.7vw,23px);
    line-height: 1.3;
    font-weight: 700;
    color: #00A7B3;
    padding: 0;
    margin: 0 0 1%;
}
.box_txtarea .box p {
	font-size:min(1.33vw,18px);
	font-weight: 300;
    line-height: 1.3;
}
/*---------------------------------------------------
 results
----------------------------------------------------*/
.results .r_area {
	width: 90%;
	margin: 70px auto 0;
}
.r_area_content {
	margin: 0 auto 8vw;
	display: flex;
	justify-content: space-between;
}
.r_area_content .r_box {
	width: 32%;
	padding: 0;
	border: none;
	background: none;
}
.r_area_content .r_box02 {
	width: 60%;
}
.cmpname {
    font-size: 1.5vw;
    text-align: center;
    margin: 3% auto 7%;
}
.r_box ul {
	margin-top: 5%;
}
.r_box .ctgr {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    margin: 0 auto 2.5%;
}
.ctgr p {
    text-align: start;
    font-size: max(1.1vw, 16px);
    align-content: center;
}
.ctgr p.ctgrtitl {
    width: auto;    
	min-width: 3.5vw;
    height: 1.5em;
    text-align: center;
    font-size: max(1.1vw, 16px);
    margin-right: 5%;
    padding: 0 4%;
    align-content: center;
    background: #e6e6e6;
    border-radius: 50px;
}
.r_box02 .r_titl {
    font-size: max(2vw, 30px);
    line-height: 1.35;
    font-weight: 800;
    margin-bottom: 2.5%;
}
.r_box02 .r_titl span {
    color: #00a7b3;
}
.r_box02 .r_htxt {
	width: 70%;
	height: 1.75em;
	font-size: max(1.8vw, 25px);
	font-weight: 800;
	align-content: center;
	color: #FFFFFF;
	padding-left: 0.5em;
	border-radius: 0 50px 50px 0;
	background: #00a7b3;
}
.r_box02 .r_txt {
	width: 98%;
    margin: 2% auto;
    font-size: max(1.4vw, 23px);
    font-weight: unset;
}
.r_box02 .r_txtarea {
    width: 100%;
    margin: 0 auto;
    padding: 3% 2%;
	background: #FFFFFF;
    border: solid 3px #71d1d6;
    border-radius: 8px;
    box-sizing: border-box;
	display: flex;
	justify-content: flex-start;
	align-content: center;
}
.r_txtarea p {
   
	align-content: center;
    margin-right: 3%;
    color: #00a7b3;
    font-size: max(1.6vw, 23px);
    font-weight: 600;
}
.r_txtarea ul {
	align-content: center;
}
.r_txtarea ul li {
    font-size: max(1.3vw, 18px);
    font-weight: lighter;
    margin-bottom: 0.25em;
}
.r_txtarea ul li:last-child {
    margin-bottom: 0;
}
img.u_arrow {
    width: fit-content;
    margin: 1.5% auto;
    display: block;
}

.r_box02 .r_box02_02 .r_htxt {
	background: #ffb200;
}
.r_box02 .r_box02_02 .r_txtarea {
    border-color: #ffb200;
}
.r_box02 .r_box02_02 .r_txtarea p {
    color: #ffb200;
}
.r_box02_02 .r_txt span,
.r_box02_02 .r_txtarea ul li span {
    color: #ff5e6c;
    font-weight: 600;
}


@media screen and (max-width: 960px) {
/*////////////////////////////////////////////////
=pc→spに表示変更
////////////////////////////////////////////////*/
.spNone {
	display: block!important;
}
.pcNone {
	display: none!important;
}

/*---------------------------------------------------
  comparison
----------------------------------------------------*/
.comparea {
    justify-content: space-between;
}
.comparea .box {
    width: 49%;
}
.comparea .box:nth-child(2n+1) {
    margin-right: 0;
}
/*---------------------------------------------------
  results
----------------------------------------------------*/
.r_area_content {
	display: block;
} 
.r_area_content	.r_box {
	width: 100%; 
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.r_area_content	.r_box img {
	width: auto;
	height: auto;
	align-content: center;
	display: block;
}
.cmpname {
	width: 40%;
	font-size: min(23px, 3vw);
	align-content: center;
	margin: auto;
}
.r_box ul {
    margin-top: 3%;
}
.r_box ul li {
	height: 3.5em;
	font-size: min(16px, 5vw);
}
 .r_box .ctgr {
    width: 45%;
    margin: 5% 0 2%;
}   
.ctgr p {
    font-size: max(2vw, 20px);
}
.ctgr p.ctgrtitl {
	width: auto;
	height: 2em;    
	font-size: max(1.875vw, 18px);
	padding: 0 7%;
}

.r_area_content .r_box02 {
    width: 100%;
    margin: 5% auto 10%;
}
.r_box02 .r_titl {
    font-size: max(3.125vw, 30px);
}	
    
    
}
@media screen and (max-width: 767px) {
/*////////////////////////////////////////////////
=pc→spに表示変更
////////////////////////////////////////////////*/
    .spNone {
        display: none!important;
    }
    .pcNone {
        display: block!important;
    }
/*---------------------------------------------------
 common
----------------------------------------------------*/

.title {
	width: 95%;
	padding-top: 5vw;
}
.titl_txt {
	width: 95%;
	padding: 5vw 0;
}
/*---------------------------------------------------
 feature
----------------------------------------------------*/
	.fbox {
		width: 95%;
		display: block; 
		padding: 4vw 4vw;
	}
	.fbox_l {
		width: 100%;
	}
	.fbox_l h6 {
		font-size: 5vw;
	}
	.fbox_l h6 span {
		font-size: 6vw;
	}
	.fbox_l p {
		font-size: 4vw;
		margin-bottom: 4%;
	}
	.fbox_r {
		width: 100%;
		margin: 0 auto;
	}
	.fbox_under {
		display: block;  
		padding: 4vw
	}
	.fbox_under .under_l {
		width: 100%;
	}
	.under_l .u_titl {
		width: 100%;
		margin-right: auto;
		margin-left: auto;
		font-size: 6vw;
		text-align: center;
	}
	.under_l .u_titl span {
		font-size: 7vw;
	}
	.under_l .u_titl strong {
		font-size: 12vw;
	}
	.under_l .u_titl img {  
		width: 30%;
        max-width: 75px;
		position: absolute;
		top: -44%;
		left: -9%;
	}
	.under_l .b_txt {
		font-size: 5vw;
	}
	.under_l a {
		margin-top: 2.5vw;
		padding: 4vw 0.5vw;
	}
	.under_l a p {
		font-size: 5vw;
	}
	.fbox_under .under_r {
		width: 100%;
		margin: 5vw auto 0;
		border: solid 5px #FFB200;
		padding: 4vw;
	}
	.under_r li {
		font-size: max(3.5vw, 10px);
	}
	.secbox {
		width: 100%;
		border-radius: 4px;  
		margin-bottom: 4vw;
        padding: 4vw;
	}
	.secbox02 {
		margin-bottom: 0;
	}
	.secbox .logo {
		display: block;
		border-bottom: solid 1px #888888;
		padding-bottom: 2.5%;
	}
	.secbox .logo img {
		width: 60%;
		max-width: 148px;
		margin: 0 auto 5%;
		display: block;
	}
	.secbox .logo p {
		font-size: 4.5vw;
		line-height: 1;
		text-align: center;
	}
	.secbox .logo p small {
		font-size: max(2.5vw, 12px);
	}
	.secbox .logo_txt {
		width: 100%;
		font-size: max(3vw, 14px);
		line-height: 1.25;
		margin: 2.5% auto 0;
	}

/*---------------------------------------------------
 comparison
----------------------------------------------------*/   
	.comparison div p.titl_txt	{
		width: 95%;
		margin-top: 10%;
		font-size: 4.5vw;
	}
	.comparea {
        width: 95%;
		margin: 5% auto 10%;
		display: block;
    }
	.comparea .box {
        width: 100%;
        padding: 2.5vw 4vw;
        margin-bottom: 2vw;
    }
	.comparea .box .titl {
		font-size: 5vw;
		padding: 0 10vw 2vw;
	}
	.comparea .box .txt {
		font-size: 4vw;
		margin-top: 2vw;
	}
	.comparea .box .icon {
		width: fit-content;
		height: fit-content;
		font-size: 3.5vw;
		font-weight: 700;
		padding: 0vw 1.5vw;
	}
	
/*---------------------------------------------------
 faq
----------------------------------------------------*/ 
	.faq div .ac_box {
		width: 95%;
		margin: 10% auto 2%;
	}
	.faq div .ac_box02 {
		width: 95%;
		margin-top: 2%;
	}
	
/*---------------------------------------------------
 price
----------------------------------------------------*/    
	.price div .planbox td .plnbku {
		font-size:max(3.5vw,12px);
	}
	.price div .planbox td a.btn {
		font-size:max(3vw,11px);
	}
/*---------------------------------------------------
  example
----------------------------------------------------*/
	.ex_box {
		display: block;
	}
	.ex_box .lbox {
		width: 100%;
		max-width: unset;
		height: auto;
		margin-right: 0;
		margin-bottom: 5%;
	}
	.ex_box .rbox {
		width: 100%;
	}
	.rbox .titl {
		width: 100%;
		margin-bottom: 3%;
		padding: 0 0 0 3%;
		font-size: 5.5vw;
		line-height: 1.8;
	}
	.rbox .txt {
		font-size: min(4vw, 18px);
		margin-bottom: 5%;
	}
	.box_txtarea .box {
		width: 100%;
		padding: 2% 3%;
		margin: 0 auto 2%;
	}
	.box_txtarea .box h3 {
		font-size: min(5vw, 23px);
		margin: 0 0 3%;
	}
	.box_txtarea .box p {
		font-size: min(4vw, 18px);
		line-height: 1.5;
	}
	

	
/*---------------------------------------------------
 resultsarea
----------------------------------------------------*/  
	
	.r_area_content .r_box {
        justify-content: space-around;
    } 
	.r_area_content .r_box02 {
        width: 100%;
        margin-bottom: 15%;
    }
	.results .r_area {
		width: 95%;
		margin: 10% auto 0;
	}
	.r_area_content .r_box img {
        width: 45%;
		margin: auto 0;
    }
	.cmpname {
        width: auto;
        font-size: max(12px, 3.85vw);
        text-align: left;
        margin: auto 0;
    }
	.r_box .ctgr {
        width: 48.5%;
        justify-content: center;
        margin-right: 1.5%;
    }
	.r_box .ctgr:last-child {
        margin-right: 0;
    }
	.ctgr p {
        font-size: max(1.73vw, 12px);
    }
	.ctgr p.ctgrtitl {
        width: fit-content;
        font-size: max(1.73vw, 12px);
        align-content: center;
        padding: 0 4%;
        margin-right: 5%;
    }
	.r_box ul li {
        height: 3em;
        font-size: max(12px, 1.6vw);
    }
	.r_box02 .r_titl {
        font-size: max(3.2vw, 24px);
    }
	.r_box02 .r_htxt {
		width: 85%;
		font-size: max(2.66vw, 20px);
	}
	.r_box02 .r_txt {
		font-size: max(2.4vw, 18px);
	}
	.r_box02 .r_txtarea {
		display: block;  
		padding: 3% 4%;
	}
	.r_txtarea p {
		font-size: max(2.4vw, 18px);
		margin-right: 0;
	}
	.r_txtarea ul li {
		font-size: max(2.13vw, 16px);
	}
/*---------------------------------------------------
 
----------------------------------------------------*/  
    
}