@charset "utf-8";
/* CSS Document */
/*-------------------
製品ページ　契約書共通パーツ用CSS 20240114
-------------------*/
/* タブレット縦サイズ 768px(16×48em)~ smサイズ */
@media screen and (min-width:48em){
}

/* タブレット横サイズ 1024px(16×64em)~ mdサイズ */
@media screen and (min-width:64em){
}

 /* ノートPC以上のサイズ 1200px(16×75em)~ lgサイズ */
 @media screen and (min-width:75em) {
 } 

#contract {
    font-size: 16px;
}

main * {
	box-sizing: border-box;
}

main p {
    line-height: 1.6;
}

main img {
  	max-width: 100%;
  	height: auto;
	-webkit-backface-visibility: hidden;
}

main a,
main button {
    -webkit-transition: all 0.2s ease-in-out 0.125s;
    transition: all 0.2s ease-in-out 0.125s;
}

main a.text-link {
 	color: #2684e2;
    text-decoration: underline;
}

main a:hover.text-link {
    text-decoration: none;
}

main a:hover, a:focus, button:focus {
	text-decoration: none;
	outline: 0;
}

section {
    position: relative;
    padding: 3rem 0;
}

@media (min-width:48em) { 
    section {
        padding: 5rem 0;
    }
	section#sec-cta{
		padding: 5rem 0 3.15rem 0;
	}
}

.contents {
    width: 90%;
    max-width: 64em;
    margin: 0 auto;
}
.lp2022 .contents {
	max-width: 75em;
}

.w-860 {
    max-width: 860px !important;
}

.pt-0 {
    padding-top: 0;
}

.pb-0 {
    padding-bottom: 0;
}

.text-center {
    text-align: center;
}   

/* flex-box */     
.d-flex {
    display: -ms-flexbox;
    display: flex;
} 
    
.flex-wrap {
    -ms-flex-wrap: wrap;
    flex-flow: wrap;
} 

/* font style and color*/ 
.font-bold {
    font-weight: bold;
 }
    
.text-underline {
    text-decoration: underline;
 }

.color-primary {
    color: #944c82;    
 }
    
.color-accent {
    color: #F8AF2B;    
 }
     
.color-red {
    color: #ff0000;    
 }

.bgcolor-secondary {
    background-color: #FFF7F9;    
}

.yellow_mark {
	 background:linear-gradient(transparent 60%, #ff6 60%);
}

.purple_mark {
	 background:linear-gradient(transparent 60%, #eadbe6 60%);
}

h2 {
	margin-bottom: 2rem;
    /*color: #944c82;*/
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 1.6;
	text-align: center;
}

h2 .sub {
	font-size: 1.0rem;
}

@media (min-width:48em) {
h2 {
	margin-bottom: 3rem;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
}
}

/* contract/css/common.css 調整 */       
#breadcrumbs.white ol li {
    color: #fff;
}

#breadcrumbs.white ol li a {
    color: #fff; 
}

/* btn */  
.cnv-btn a { 
    font-size: 16px; /* <-- 1.5em */
}
    
@media (min-width:48em) {
.cnv-btn a { 
    font-size: 20px;
}
}

/* sec-cnv01 */
.sec-cnv01 {
    background-color: #944c82;
}

.cnv01 {
	padding: 1.5rem;
	background-color: rgba(255,255,255,1);
    text-align: center;
}

.cnv01 h2 {
    margin-bottom: 2rem;
}

@media (min-width:48em) { 
.cnv01 {
	padding: 2rem;
}
}

.cnv02 {
	padding: 1.5rem;
	background-color: rgba(255,255,255,0.75);
    text-align: center;
}

.cnv02 h2 {
    margin-bottom: 2rem;
}

.sec-cnv02 .note p {
	padding-left: 1em;
    text-indent: -1em;
	font-size: .9em;
	color: #666;
	line-height: 1.4;
}

@media (min-width:48em){ 
.cnv02 {
	padding: 2rem;
}
}

/* cv_btn_wrap */	
.sec-cnv01 .cv_btn_wrap {
    display: flex;
	justify-content: center;
    flex-wrap: wrap;
} 

.sec-cnv02 .cv_btn_wrap,
.sec-cnv03 .cv_btn_wrap {
    display: flex;
	justify-content: center;
    flex-wrap: wrap;
	column-gap: 24px;
	grid-row-gap: 24px;
}

.cv_btn_item {
	width: 100%;
    border-radius: 6px;
    font-size: 14px;
    align-items: center;
}

.cv_btn_item + .cv_btn_item {
    margin-top: 0rem;
}

.cv_btn_item:nth-child(1) {
    background-color: #FDAF06;
}
	
.cv_btn_item:nth-child(2) {
    background-color: #8E7CC3;
}
	
.cv_btn_item:nth-child(3) {
    /*background-color: #727272;*/
    background-color: #008AC4;
}

.cv_btn_item a {
    display: inline-block; 
	position: relative;
    width: 100%; 
	padding: 18px 0; 
    text-align: center;
    color: #fff;
	font-size: 16px;
    font-weight: bold;
    line-height: 1em;
    border-radius: 6px; 
  	-webkit-transition: all .2s ease-in-out;
  	transition: all .2s ease-in-out;
}
    
.cv_btn_item a:after { 
    content: "";
    position: absolute;
    right: 0.8rem;
    width: 0.4em;
    height: 0.4em;
    top: 50%;
    margin-top: -0.32em;
    border-top-width: 2px;
    border-top-style: solid;
    border-right-width: 2px;
    border-right-style: solid;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}	

.cv_btn_item:nth-child(1) a:hover {
    background-color: #f1ba43;
}

.cv_btn_item:nth-child(2) a:hover {
    background-color: #a89ad0;
}

.cv_btn_item:nth-child(3) a:hover {
    background-color: #009ada;
}

.cv_btn_item.demo {
    background-color: #8E7CC3;
}

.cv_btn_item.demo a:hover {
    background-color: #a89ad0;
}

.cv_btn_item.free {
    background-color: #008AC4;
}

.cv_btn_item.free a:hover {
    background-color: #009ada;
}

@media (min-width:48em) { 
.sec-cnv01 .cv_btn_wrap .cv_btn_item,
.sec-cnv02 .cv_btn_wrap .cv_btn_item {
    width: 49%; 
}
    
.sec-cnv03 .cv_btn_wrap .cv_btn_item {
    width: 33%; 
}	

.sec-cnv03 .cv_btn_wrap .cv_btn_item + .sec-cnv03 .cv_btn_wrap .cv_btn_item {
    margin-top: 0rem;
}
    
.cv_btn_item a {
	font-size: 14px;
	}
}

@media (min-width:64em) {
.cv_btn_item a {
	font-size: 16px;
	}
}

/* btn-normal */ 
.btn-normal {
	display: inline-block;
    position: relative;
	padding: 0.8rem 3rem;
	border: 1px solid #944c82;
	border-radius: 4px; 
    background-color: #fff;
    text-decoration: none;
    outline: none; 
    text-align: center;
}

.btn-normal span {
    position: relative; 
	color: #944c82;
}
    
.btn-normal span::after {
    content: "";
    position: absolute;
    right: -2em;
    width: 0.4em;
    height: 0.4em;
    top: 50%;
    margin-top: -0.2em;
    border-top-width: 1px;
    border-top-style: solid;
    border-right-width: 1px;
    border-right-style: solid;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}   
    
a:hover.btn-normal {
    box-shadow: 0 3px 5px rgb(0 0 0 / 20%);
} 

/* sec-bnr */
.sec-bnr a:hover img {
    opacity: .6;
}

/* sns btn(if only one link) */
footer .sns_area{
	width: 2.5em;
}
footer .sns_area a:last-child{
	margin:0 auto 1em 0!important;
	float: none;
}
@media (min-width:64em) { 
  footer .sns_area a:last-child {
      margin: 0 auto 1em 0!important;
  }
}
@media (min-width:75em) { 
  footer .sns_area a:last-child {
      margin: 0 auto 1em!important;
  }
}

/*プラン二個のみ*/
@media (min-width:48em) { 
#sec-price .contents #contents2.tab_select-02 #tab2 div.cf{
	display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: flex-end;
    column-gap: 46px;
	}
#sec-price .contents #contents2.tab_select-02 #tab2 div.cf section{
	margin: 0;
	padding: 0;
	}
}