/* ============================================================================
benefitsSection
============================================================================*/

/* benefitsWrap 
-----------------------------------------------------------*/
	.benefitsSection .benefitsWrap {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.benefitsSection .benefitsWrap .txtBox {
		width: 37.73%;
	}
	.benefitsSection	.benefitsWrap .picBox {
		width: 58.49%;
		max-width:930px;
	}

	.benefitsSection .benefitsWrap.benefitsWrap.even {
		flex-direction: row-reverse;
	}



/* txtBox ----------------------------*/
/* h2 */
	.benefitsSection .benefitsWrap .txtBox .headTitle h2 .headingTtl-lg {
		padding-bottom: 0.2em;
		white-space: nowrap;
	}
	.benefitsSection .benefitsWrap .txtBox .headTitle .subTtl {
		padding-bottom: 4em;
	}

/* txtUnit-------- */
	.benefitsSection .benefitsWrap .txtBox .txtUnit {

	}

/* even */
	.benefitsSection .benefitsWrap.even .txtBox .txtUnit {
		margin-right:0;
		margin-left: auto;
	}



/* ttl*/
	.benefitsSection .benefitsWrap .txtBox .txtUnit .ttl {
		display: flex;
		align-items: center;
		border-bottom: 1px solid var(--color-bl-02);
	}
	.benefitsSection .benefitsWrap .txtBox .txtUnit .ttl .numElement .en,
	.benefitsSection .benefitsWrap .txtBox .txtUnit .ttl .numElement .num {
		display: block;
		font-family: var(--fontFamily-en_01);
		color: var(--color-bl-02);
	}
	.benefitsSection .benefitsWrap .txtBox .txtUnit .ttl .numElement .en {
		text-align: center;
		font-size: clamp(2.2rem, 2vw, 2.4rem);
		font-weight: 500;
		letter-spacing: 0.05em;
		line-height: 0.5;
	}
	.benefitsSection .benefitsWrap .txtBox .txtUnit .ttl .numElement .num {
		font-size: clamp(8rem, 9vw, 10rem);
		font-weight: 600;
		letter-spacing: -0.05em;
		line-height: 1;

	}

	.benefitsSection .benefitsWrap .txtBox .txtUnit .ttl .ttlElement {
		display: block;
		line-height: 1.3;
	}

	.benefitsSection .benefitsWrap .txtBox .txtUnit .ttl .ttlElement.headingTtl-md {
		padding-left: 0.6em;
		padding-bottom: 0;
	}

/* functionElement*/
	.benefitsSection .benefitsWrap .txtBox .functionElement {
		padding-top: 1em;

	}
	.benefitsSection .benefitsWrap .txtBox .functionElement .f-ttl {
		display: inline-block;
		padding:0.5em 2em 0.6em;
		font-weight: 600;
		color:#fff;
		line-height: 1;
		border-radius: 100px;
		background: var(--color-bl-02);
	}
	.benefitsSection .benefitsWrap .txtBox .functionElement .f-txt {
		position: relative;
		margin-top:0.5em;
		padding-left: 1em;
		font-size: 1.7rem;
		font-weight: 900;
		line-height: 1.4;
		color: var(--color-bl-01);
	}
	.benefitsSection .benefitsWrap .txtBox .functionElement .f-txt::before {
		content: "・";
		position: absolute;
		top:0.25em;
		left: 0;
		line-height: 1;
	}
	.benefitsSection .benefitsWrap .txtBox .functionElement .f-txt:nth-of-type(1) {
		margin-top: 1em;
	}

/* detailTxt */
	.benefitsSection .benefitsWrap .txtBox .detailTxt {
		padding-top:1em;
	}


@media (max-width:1199px){
	.benefitsSection .benefitsWrap .txtBox {
		width: 47.61%;
	}
	.benefitsSection	.benefitsWrap .picBox {
		width: 47.61%;
	}
}

@media (max-width:991px){
	.benefitsSection .benefitsWrap .txtBox {
		width: 100%;
	}
	.benefitsSection	.benefitsWrap .picBox {
		width: 100%;
		max-width:600px;
	}
	.benefitsSection .benefitsWrap {
		width: 90%;
		margin-right: auto;
		margin-left: auto;
	}
	.benefitsSection .benefitsWrap.fullbleed-left {
		padding-left: 0;
	}
	.benefitsSection .benefitsWrap.fullbleed-right {
		padding-right: 0;
	}
/* txtUnit-------- */
	.benefitsSection .benefitsWrap .txtBox .txtUnit {
		width: 100%;
		max-width: none;
	}

}

/* picBox ----------------------------*/
	.benefitsSection .benefitsWrap .picBox {
		text-align: center;
	}
/* even */
	.benefitsSection .benefitsWrap.even .picBox {
		left:0;
	}
@media (min-width:992px){
	/* 画像サイズ調整個別 */
		.benefitsSection .benefitsWrap.r02 .picBox img{width: 90%;}
		.benefitsSection .benefitsWrap.r03 .picBox img{width: 80%;}
}

@media (max-width:991px){
	.benefitsSection	.benefitsWrap .picBox {
		position: relative;
		margin: 0 auto;
		width: 100%;
		max-width: 700px;
	}
}


/* supportSopra 
---------------------*/
	.supportSopra {
		width: 90%;
		max-width: 500px;
		margin: 0 auto;
		padding-top:3rem;
	}


	/* comparisonSection 
-----------------------------------------------------------*/
	.comparisonSection {
		background: url(../images/benefits/02_bg.png) top center /100% no-repeat;
	}
	.comparisonSection .comparisonWrap {
		margin-top: 1em;
	}
	.comparisonSection table.comparisonTable {
		border-collapse: separate;
		border-spacing: 3px 0;
	}

	.comparisonSection table.comparisonTable,
	.comparisonSection .comparisonTable th,
	.comparisonSection .comparisonTable td {
		border-width: 0 0 0 0;
		padding:0;
		margin: 0 0;
	}		
	.comparisonSection .comparisonTable th,
	.comparisonSection .comparisonTable td {
		text-align: center;
	}

/* thead */
	.comparisonSection .comparisonTable thead .corner {
		background: transparent;
		border: none;
	}
	.comparisonSection .comparisonTable thead th.isCompany {
		border-style: solid;
		border-color: var(--color-bl-01);
		border-width: 3px 3px 0;
		border-radius: 13px 13px 0 0;
	}
	.comparisonSection .comparisonTable thead th.isCompany .companyLabel {
		display: inline-block;
		width: 100%;
		padding: .8em 0;
		border-radius: 10px 10px 0 0;
		background: linear-gradient(to right, #003896, #003896);
		color: #fff;
	}
	.comparisonSection .comparisonTable thead th.isCompany .companyLabel img {
		width: min(60%, 90px);
	}
	.comparisonSection .comparisonTable thead th.isOthers {
		position: relative;
	}
	.comparisonSection .comparisonTable thead th.isOthers .othersLabel {
		position: absolute;
		bottom: 0;
		display: block;
		width: 100%;
		padding: 1em 0;
		background: #B3C4E5;
	}



/* tbody */
	.comparisonSection .comparisonTable tbody th {
		padding:1em;
		line-height: 1.4;
		font-weight: 600;
		color: #fff;
		border-bottom: 1px solid #fff;
		background: var(--color-bl-03);
	}
	.comparisonSection table.comparisonTable tbody tr td:first-of-type {
		border-left: 3px solid var(--color-bl-01);
		border-right: 3px solid var(--color-bl-01);
	}
	.comparisonSection table.comparisonTable tbody tr:last-of-type td:first-of-type {
		border-bottom: 3px solid var(--color-bl-01);
	}

	.comparisonSection table.comparisonTable tbody tr td { width: 22%; padding: 10px; background: #F0F5FA; }
	.comparisonSection table.comparisonTable tbody tr:nth-child(even) td {background: #DFE8F0;}
	.comparisonSection table.comparisonTable tbody tr td:nth-of-type(1){ width: 23%;background: #E6F3FF;}
	.comparisonSection table.comparisonTable tbody tr:nth-child(even) td:nth-of-type(1){ background: #D0E7FA;}

	.comparisonSection .comparisonTable tbody	.icon_status { 
		display: block;
		margin: 0 auto;
		width: 26px;
	}

	.comparisonSection .comparisonTable tbody .txt-dis {
		display: block;
		padding-top:5px;
		font-size:0.9rem;
		line-height: 1.3;
	}
	.comparisonSection table.comparisonTable tbody tr td:nth-of-type(1) .txt-dis {
		font-size: 1.1rem;
		font-weight: 800;
		color: var(--color-bl-01);
	}


@media (max-width: 767px) {
	.comparisonSection .comparisonWrap {
		position: relative;
		overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
	}
	.comparisonSection .comparisonTable {
		min-width: 760px; /* 表に合わせて調整 */
  }
}


/* scrollGuide */
	.comparisonSection .comparisonWrap {
		position: relative;
	}
.comparisonSection .comparisonWrap .scrollGuide {
	display: none;
}
@media (max-width: 767px) {

	.comparisonSection .comparisonWrap .scrollGuide {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgb(0, 0, 0, 0.6);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 2;
		opacity: 1;
		pointer-events: none;
		transition: opacity 0.3s ease-in-out;
	}


	.comparisonSection .comparisonWrap .scrollGuide .iconBox .icon,	
	.comparisonSection .comparisonWrap .scrollGuide .iconBox .txt	{
		display: block;
	}
	.comparisonSection .comparisonWrap .scrollGuide .iconBox .icon {
		margin: 0 auto;
		width: 100px;
		animation: guideMove 1.8s ease-in-out infinite;
	}
	@keyframes guideMove {
    0%,100% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(10px);
    }
  }
	.comparisonSection .comparisonWrap .scrollGuide .iconBox .txt {
		padding-top:20px;
		font-size: 1.8rem;
		font-weight: 700;;
		color:#fff;
	}

	.comparisonSection .comparisonWrap .scrollGuide.isHide {
		opacity: 0;
		pointer-events: none;
	}
}