@charset "utf-8";
#content {
	padding-top: 1rem;
}
/* @media screen and (max-width:640px) {
	#content {
		padding: 0 1rem 1rem;
	}
} */

@media screen and (max-width:640px) {
    #content {
       padding: 0 1rem 1rem;
    }
}

@media screen and (max-width:640px) {
    body {
        overflow-x: hidden;
    }
}

#header_nav_in li.header_nav10 a{
	background-color: #000;
	color: #FFF;
}


.img_area a{
	display: block;
}
.img_11_01_01{
	width: 90%;
	margin: 0 5% 0 auto;
}
@media screen and (max-width:640px) {
	.img_11_01_01{
		width: 100%;
		margin: 1rem auto 1rem;
	}
}
.img_11_01_02{
	width: 90%;
	margin: 0 5% 0 auto;
}
@media screen and (max-width:640px) {
	.img_11_01_02{
		width: 100%;
		margin: 1rem auto 1rem;
	}
}
.img_11_01_03{
	width: 90%;
	margin: 0 5% 0 auto;
}
@media screen and (max-width:640px) {
	.img_11_01_03{
		width: 100%;
		margin: 1rem auto 1rem;
	}
}
.img_11_01_04{
	width: 90%;
	margin: 0 5% 0 auto;
}
@media screen and (max-width:640px) {
	.img_11_01_04{
		width: 100%;
		margin: 1rem auto 1rem;
	}
}
.img_11_01_05{
	width: 90%;
	margin: 0 5% 0 auto;
}
@media screen and (max-width:640px) {
	.img_11_01_05{
		width: 100%;
		margin: 1rem auto 1rem;
	}
}
.img_11_01_06{
	width: 90%;
	margin: 0 5% 0 auto;
}
.img_11_01_06 img{
	width: 80%;
	margin: 0 auto;
}
@media screen and (max-width:640px) {
	.img_11_01_06{
		width: 100%;
		margin: 1rem auto 1rem;
	}
}
.img_11_01_07{
	width: 90%;
	margin: 0 5% 0 auto;
}
@media screen and (max-width:640px) {
	.img_11_01_07{
		width: 100%;
		margin: 1rem auto 1rem;
	}
}
.img_11_01_08{
	width: 90%;
	margin: 0 5% 0 auto;
}
@media screen and (max-width:640px) {
	.img_11_01_08{
		width: 100%;
		margin: 1rem auto 1rem;
	}
}
.img_11_01_09{
	width: 90%;
	margin: 0 5% 0 auto;
}
@media screen and (max-width:640px) {
	.img_11_01_09{
		width: 100%;
		margin: 1rem auto 1rem;
	}
}
.img_11_02_01{
	width: 85%;
	margin: 0 5% 2rem auto;
}
.img_11_02_02{
	width: 100%;
	margin: 0 auto 2rem;
}
.img_11_02_03{
	width: 85%;
	margin: 0 0 2rem;
}
.img_11_02_04{
	width: 75%;
	margin: 0 0 1rem;
}
.img_11_02_05{
	width: 95%;
	margin: 0 0 1rem;
}
.img_11_02_06{
	width: 95%;
	margin: 0 0 1rem;
}
.img_11_02_07{
	width: 98%;
	margin: 0 auto 1rem;
}
.img_11_02_08{
	width: 98%;
	margin: 0 auto 1rem;
}
.img_11_02_09{
	width: 80%;
	margin: 0 0 1rem;
}
.img_11_03_01,
.img_11_03_02,
.img_11_03_03,
.img_11_03_04{
	width: 100%;
	height: auto;
	margin: 0 auto 1rem;
}
.img_11_03_01 img,
.img_11_03_02 img,
.img_11_03_03 img,
.img_11_03_04 img{
	width: 80%;
	height: auto;
	margin: 0 auto;
}
.img_11_04_01 img,
.img_11_04_02 img,
.img_11_04_03 img,
.img_11_04_04 img{
	width: auto;
	height: 5rem;
	margin: 0 0 3rem;
}
.img_11_05{
	width: 100%;
	margin: 1rem auto 3rem;
}
@media screen and (max-width:640px) {
	.img_11_05{
		width: 100%;
		margin: 1rem auto 3rem;
	}
}
.img_11_06_01,
.img_11_06_02,
.img_11_06_03,
.img_11_06_04,
.img_11_06_05{
	width: 70%;
	margin: 2rem auto 2rem;
}
.img_11_07{
	width: 70%;
	margin: 2rem auto 4rem;
}
@media screen and (max-width:640px) {
	.img_11_07{
		width: 98%;
		margin: 2rem auto 2rem;
	}
}
.img_11_08{
	width: 65%;
	margin: 2rem auto 4rem;
}
@media screen and (max-width:640px) {
	.img_11_08{
		width: 98%;
		min-width: 500px;
		margin: 2rem auto 2rem;
	}
}
.img_11_09{
	width: 65%;
	margin: 2rem auto 4rem;
}
@media screen and (max-width:640px) {
	.img_11_09{
		width: 98%;
		min-width: 500px;
		margin: 2rem auto 2rem;
	}
}
.img_11_10{
	width: 65%;
	margin: 2rem auto 4rem;
}
@media screen and (max-width:640px) {
	.img_11_10{
		width: 98%;
		min-width: 500px;
		margin: 2rem auto 2rem;
	}
}
.img_11_11{
	width: 65%;
	margin: 2rem auto 4rem;
}
@media screen and (max-width:640px) {
	.img_11_11{
		width: 98%;
		min-width: 500px;
		margin: 2rem auto 2rem;
	}
}
.img_11_12{
	width: 65%;
	margin: 2rem auto 4rem;
}
@media screen and (max-width:640px) {
	.img_11_12{
		width: 98%;
		min-width: 500px;
		margin: 2rem auto 2rem;
	}
}
.img_11_13{
	width: 65%;
	margin: 2rem auto 4rem;
}
@media screen and (max-width:640px) {
	.img_11_13{
		width: 98%;
		min-width: 500px;
		margin: 2rem auto 2rem;
	}
}
.img_11_14{
	width: 65%;
	margin: 2rem auto 4rem;
}
@media screen and (max-width:640px) {
	.img_11_14{
		width: 98%;
		min-width: 500px;
		margin: 2rem auto 2rem;
	}
}
.img_11_15{
	width: 90%;
	margin: 2rem auto;
}
@media screen and (max-width:640px) {
	.img_11_15{
		width: 98%;
		margin: 2rem auto 2rem;
	}
}
.img_11_16{
	width: 90%;
	margin: 2rem auto;
}
@media screen and (max-width:640px) {
	.img_11_16{
		width: 98%;
		margin: 2rem auto 2rem;
	}
}
.img_11_17{
	width: 65%;
	margin: 2rem auto 4rem;
}
@media screen and (max-width:640px) {
	.img_11_17{
		width: 98%;
		min-width: 500px;
		margin: 2rem auto 2rem;
	}
}
.img_11_18{
	width: 35%;
	margin: 2rem auto 4rem;
}
@media screen and (max-width:640px) {
	.img_11_18{
		width: 90%;
		margin: 2rem auto 2rem;
	}
}
.img_11_19{
	width: 60%;
	margin: 2rem auto 4rem;
}
@media screen and (max-width:640px) {
	.img_11_19{
		width: 90%;
		min-width: 500px;
		margin: 2rem auto 2rem;
	}
}
.img_11_20{
	width: 65%;
	margin: 2rem auto 4rem;
}
@media screen and (max-width:640px) {
	.img_11_20{
		width: 98%;
		min-width: 500px;
		margin: 2rem auto 2rem;
	}
}
.img_11_21{
	width: 60%;
	margin: 2rem 10% 4rem 13%;
}
@media screen and (max-width:640px) {
	.img_11_21{
		width: 98%;
		margin: 2rem auto 2rem;
	}
}
.img_11_22_01{
	width: 100%;
	margin: 2rem auto 0;
}
.img_11_22_02{
	width: 100%;
	margin: 2rem auto 0;
}
.img_11_22_03{
	width: 100%;
	margin: 2rem auto 1rem;
}
.img_11_22_04{
	width: 100%;
	margin: 2rem auto 1rem;
}
.img_11_23{
	width: 80%;
	margin: 2rem auto 4rem;
}
@media screen and (max-width:640px) {
	.img_11_23{
		width: 98%;
		margin: 2rem auto 2rem;
	}
}
.img_11_24{
	width: 50%;
	margin: 2rem auto 4rem;
}
@media screen and (max-width:640px) {
	.img_11_24{
		width: 90%;
		margin: 2rem auto 2rem;
	}
}
.img_11_25{
	width: 80%;
  margin: 2rem auto 4rem 20%;
}
@media screen and (max-width:640px) {
	.img_11_25{
		width: 90%;
		margin: 2rem auto 2rem;
	}
}
.img_11_26{
	width: 60%;
  margin: 2rem auto 4rem 40%;
}
@media screen and (max-width:640px) {
	.img_11_26{
		width: 90%;
		margin: 2rem auto 2rem;
	}
}
.img_11_27{
	width: 65%;
	margin: 7rem auto 0;
}
.img_11_28{
	width: 40%;
  margin: 6rem auto 2rem;
}
.img_11_29{
	width: 80%;
  margin: 4rem auto 0;
}
.img_11_30{
	width: 90%;
  margin: 2rem auto 3rem;
}
@media screen and (max-width:640px) {
	.img_11_30{
		width: 100%;
		min-width: 500px;
		margin: 2rem auto 3rem;
	}
}
.img_11_31{
	width: 90%;
  margin: 2rem auto 1rem;
}
@media screen and (max-width:640px) {
	.img_11_31{
		width: 80%;
		margin: 2rem auto 3rem;
	}
}
.img_11_32{
	width: 40%;
  margin: 4rem auto 1rem;
}
@media screen and (max-width:640px) {
	.img_11_32{
		width: 80%;
		margin: 4rem auto 3rem;
	}
}
.img_11_33{
	width: 100%;
  margin: 4rem auto 3rem;
}
@media screen and (max-width:640px) {
	.img_11_33{
		width: 70%;
		margin: 2rem auto 3rem;
	}
}
.img_11_34{
	width: 100%;
  margin: 4rem auto 3rem;
}
@media screen and (max-width:640px) {
	.img_11_34{
		width: 70%;
		margin: 2rem auto 3rem;
	}
}
.img_11_35{
	width: 100%;
  margin: 4rem auto 3rem;
}
@media screen and (max-width:640px) {
	.img_11_35{
		width: 70%;
		margin: 2rem auto 3rem;
	}
}
.img_11_36{
	width: 100%;
  margin: 4rem auto 3rem;
}
@media screen and (max-width:640px) {
	.img_11_36{
		width: 70%;
		margin: 2rem auto 3rem;
	}
}

.purpose_area{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: center;
	align-items: center;
	-webkit-align-content: center;
	align-content: center;
	-webkit-align-self: center;
	align-self: center;
	flex-wrap: wrap;
	padding: 0.8rem;
	border: 1px solid #4472C4;
	background: #F2F2F2;
	margin-bottom: 1rem;
}
.purpose_area .title_area{
	border-right: 1px solid #4472C4;
	width: 6%;
	padding: 1rem;
}
@media screen and (max-width:640px) {
	.purpose_area .title_area{
		border-right: 0;
		border-bottom: 1px solid #4472C4;
		width: 100%;
	}
}
.purpose_area .title_area p{
	color: #4472C4;
	font-size: 1.4rem;
	font-weight: bold;
	width:2rem;
	text-align: center;
	white-space:unset;
}
@media screen and (max-width:640px) {
	.purpose_area .title_area p{
		-ms-writing-mode: unset;
		writing-mode: unset;
	}
}
.purpose_area .right_area{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	-webkit-align-items: center;
	align-items: center;
	-webkit-align-content: center;
	align-content: center;
	-webkit-align-self: center;
	align-self: center;
	flex-wrap: wrap;
	width: 92%;
}
@media screen and (max-width:640px) {
	.purpose_area .right_area{
		padding: 1rem 0 1rem 1rem;
		width: 100%;
	}
}
.purpose_area .purpose_right_box{
	width: 20%;
	padding: 0.2rem 0.5rem;
}
@media screen and (max-width:640px) {
	.purpose_area .purpose_right_box{
		width: 30%;
		margin-bottom: 0.5rem;
	}
	.purpose_area .purpose_right_box:nth-child(3n - 2){
		width: 39%;
	}
}
.purpose_area .right_inner{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: center;
	align-items: center;
	-webkit-align-content: center;
	align-content: center;
	-webkit-align-self: center;
	align-self: center;
	flex-wrap: wrap;
}
.purpose_area .img_area{
	width: 25%;
}
.purpose_area .text_area{
	width: 70%;
	color: #4472C4;
	font-size: 1.3rem;
	font-weight: bold;
	text-align: left;
}
.purpose_table{
	width: 100%;
	min-width: 900px;
	border: 1px solid #8497B0;
}
.purpose_table th,
.purpose_table td{
	font-size: 1.6rem;	
}
.purpose_table th{
	background: #8497B0;
  color: #FFF;
	font-weight: bold;
	text-align: center;
}
.purpose_table th:first-child{
	width: 11%;
}
.purpose_table th.th_r{
	background: #ADB9CA;
  color: #FFF;
}
.purpose_table .right_b{
	border-right: 1px solid #FFF;
}
.purpose_table .bottom_b{
	border-bottom: 1px solid #FFF;
}
.purpose_table td{
	background: #FFF;
	vertical-align: top;
	width: 20%;
}
.purpose_table td.td_gray{
	background: #F2F2F2;
}
.purpose_table td.td_blue{
	background: #D5EFFF;
}
.purpose_table td p{
	font-size: 1.4rem;
}
.purpose_table .right_b_b{
	border-right: 1px dashed #ADB9CA;
}
.purpose_table .bottom_b_b{
	border-bottom: 1px dashed #ADB9CA;
}
.purpose_table .inline_img {
    display: inline;
    width: auto;
    height: 2.4rem;
}
.purpose_table .min_font{
	font-size: 1.3rem;
}
.purpose_table .blue_title {
    width: 100%;
		margin: 0;
    color: #4472C4;
    font-size: 1.6rem;
    background: transparent;
    border: 0;
}


.cloud_table{
	width: 100%;
	min-width: 800px;
	border: 1px solid #8497B0;
}
.cloud_table th,
.cloud_table td{
	font-size: 1.8rem;	
}
.cloud_table th{
	background: #8497B0;
  color: #FFF;
	font-weight: bold;
	text-align: center;
}
.cloud_table th:first-child{
	width: 11%;
}
.cloud_table th.th_r{
	background: #ADB9CA;
  color: #FFF;
}
.cloud_table .right_b{
	border-right: 1px solid #8497B0;
}
.cloud_table .bottom_b{
	border-bottom: 1px solid #8497B0;
}
.cloud_table td{
	background: #CCD2D8;
	vertical-align: top;
	width: 50%;
}
.cloud_table td.td_gray{
	background: #F2F2F2;
}
.cloud_table td.td_blue{
	background: #D5EFFF;
}
.cloud_table td p{
	font-size: 1.6rem;
}
.cloud_table .right_b_b{
	border-right: 1px dashed #ADB9CA;
}
.cloud_table .bottom_b_b{
	border-bottom: 1px dashed #ADB9CA;
}
.cloud_table .inline_img {
    display: inline;
    width: auto;
    height: 2.4rem;
}
.cloud_table .min_font{
	font-size: 1.3rem;
}
.cloud_table .blue_title {
    width: 100%;
		margin: 0;
    color: #4472C4;
    font-size: 2rem;
    background: transparent;
    border: 0;
}
.flex_td{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: center;
	align-items: center;
	-webkit-align-content: center;
	align-content: center;
	-webkit-align-self: center;
	align-self: center;
	flex-wrap: wrap;
}
.flex_td .left_block{
	width: 20%;
}
.flex_td .right_block{
	width: 75%;
}
.license_table{
	width: 100%;
	min-width: 900px;
	border: 1px solid #8497B0;
}
.license_table th,
.license_table td{
	font-size: 1.6rem;
	text-align: center;
	font-weight: bold;
}
.license_table th{
	background: #8497B0;
  color: #FFF;
	font-weight: bold;
	text-align: center;
}
.license_table th:first-child{
	width: 13%;
}
.license_table th.th_r{
	background: #D6DCE5;
  color: #002060;
}
.license_table th.th_blue{
	background: #4472C4;
  color: #FFF;
}
.license_table th.th_green{
	background: #00B050;
  color: #FFF;
}
.license_table th.th_r_blue{
	background: #00B0F0;
  color: #FFF;
}
.license_table .right_b{
	border-right: 1px solid #FFF;
}
.license_table .bottom_b{
	border-bottom: 1px solid #FFF;
}
.license_table .right_b_b{
	border-right: 1px solid #8497B0;
}
.license_table .bottom_b_b{
	border-bottom: 1px solid #8497B0;
}
.license_table td{
	background: #EAEDF2;
	border-right: 1px solid #8497B0;
	border-bottom: 1px solid #8497B0;
	color: #002060;
}
.license_table td.td_blue{
	background: #DAE3F3;
	color: #4472C4;
	font-weight: normal;
}
.license_table td.td_green{
	background: #E2F0D9;
	color: #4472C4;
	font-weight: normal;
}
.license_table td.td_r_blue{
	background: #FFF;
	color: #4472C4;
	font-weight: normal;
}

.license_table td p{
	font-size: 1.6rem;
}
.license_table .right_b_b{
	border-right: 1px solid #ADB9CA;
}
.license_table .bottom_b_b{
	border-bottom: 1px solid #ADB9CA;
}
.license_table .inline_img {
    display: inline;
    width: auto;
    height: 2.4rem;
}
.license_table .min_font{
	font-size: 1.3rem;
}
.guide_table{
	width: 100%;
	min-width: 900px;
}
.guide_table th,
.guide_table td{
	font-size: 1.6rem;
	text-align: center;
	font-weight: bold;
}
.guide_table .th_r_gray{
	background: #D6DCE5;
	color: #4472C4;
	font-size: 1.4rem;
}
.guide_table .th_black{
	background: #44546A;
	color: #FFF;
	font-size: 1.8rem;
}
.guide_table .th_m_gray{
	background: #8497B0;
	color: #FFF;
	font-size: 1.8rem;
}
.guide_table .th_l_blue{
	background: #5B9BD5;
	color: #FFF;
	font-size: 1.4rem;
	width: 8.4%;
}
.guide_table .th_m_blue{
background: #DAE3F3;
	color: #5B9BD5;
	font-size: 1.4rem;
}
.guide_table .th_s_gray{
	background: #D6DCE5;
	color: #4472C4;
	font-size: 1.4rem;
	width: 8%;
}
.guide_table .th_white{
	background: #FFF;
	border: 1px solid #FFF;
}
.guide_table h4{
	border-bottom: 1px solid #FFF;
}
.guide_table .tr_01 th{
	background: #8FAADC;
	color: #FFF;
	width: 17%;
}
.guide_table .tr_01 td{
	background: #DAE3F3;
	color: #4472C4;
}
.guide_table .tr_02 th{
	background: #AF99D2;
	color: #FFF;
}
.guide_table .tr_02 td{
	background: #E4DCF0;
	color: #4472C4;
}
.guide_table .tr_03 th{
	background: #CE93CA;
	color: #FFF;
}
.guide_table .tr_03 td{
	background: #F1DFF0;
	color: #4472C4;
}
.guide_table td.td_s_gray{
	background: #F2F2F2;
}
.guide_table .blue_title{
	color: #4472C4;
	font-size: 2rem;
	text-align: center;
}
.guide_table .right_b{
	border-right: 1px solid #FFF;
}
.guide_table .bottom_b{
	border-bottom: 1px solid #FFF;
}
.guide_table .right_b_b{
	border-right: 1px solid #ADB9CA;
}
.guide_table .bottom_b_b{
	border-bottom: 1px solid #ADB9CA;
}
.guide_table tr td{
	border-right: 1px dashed #ADB9CA;
	border-bottom: 1px dashed #ADB9CA;
}
.guide_table tr td:last-child{
	border-right: 0;
}
.guide_table .min_font{
	font-size: 1.3rem;
}
.guide_table td.diagonal{
	background-image: linear-gradient(to right top, transparent calc(50% - 0.5px), #8497B0 50%, #8497B0 calc(50% + 0.5px), transparent calc(50% + 1px));
}


.inline_title {
	width: 100%;
	text-align: left;
}
.inline_title .inner_text{
	background: #DEEBF7;
	padding: 0.5rem 1rem;
	color: #5B9BD5;
	font-size: 2.2rem;
	font-weight: bold;
	display: inline-block;
	min-width: 22rem;
	text-align: center;
}
.blue_flex_outer{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	-webkit-align-items: stretch;
	align-items: stretch;
	-webkit-align-content: center;
	align-content: center;
	-webkit-align-self: center;
	align-self: center;
	flex-wrap: wrap;
	width: 74%;
	margin: 2rem auto;
}
@media screen and (max-width:640px) {
	.blue_flex_outer{
		width: 100%;
	}
}
.blue_flex_outer .blue_flex_left{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	-webkit-align-items: stretch;
	align-items: stretch;
	-webkit-align-content: center;
	align-content: center;
	-webkit-align-self: stretch;
	align-self: stretch;
	flex-wrap: wrap;
	width: 20rem;
	padding: 0.8rem 1rem 0.5rem;
	color: #4472C4;
	font-size: 1.8rem;
	font-weight: bold;
	text-align: left;
	border-top: 1px solid #4472C4;
	border-left: 1px solid #4472C4;
	border-bottom: 1px solid #4472C4;
	background: #B4C7E7;
}
.blue_flex_outer .blue_flex_right{
	width: calc(100% - 20rem);
	padding: 0.8rem 1rem 0.5rem;
	color: #4472C4;
	font-size: 1.8rem;
	font-weight: bold;
	text-align: left;
	border: 1px solid #4472C4;
	background: #F2F2F2;
}
@media screen and (max-width:640px) {
	.blue_flex_outer .blue_flex_left{
		border-bottom: 0;
		border-right: 1px solid #4472C4;
	}
	.blue_flex_outer .blue_flex_left,
	.blue_flex_outer .blue_flex_right{
		width: 100%;
	}
}
.blue_flex_outer .kome{
	font-size: 1.2rem;
}
.shelf_table{
	width: 100%;
	min-width: 600px;
	margin: 0 auto 3rem;
}
.shelf_table th,
.shelf_table td{
	text-align: center;
	font-size: 1.6rem;
}
.shelf_table th{
	color: #FFF;
	background: #8FAADC;
	font-weight: bold;
	width: 19%;
}
.shelf_table td{
	color: #000;
	background: #C2D2EC;
}
.shelf_table .b_blue{
	background: #ffffff;
}
.shelf_table .r_blue{
	background: #4472C4;
}
.shelf_table .td_blue{
	background: #DAE3F3;
}
.shelf_table .right_b{
	border-right: 1px solid #FFF;
}
.shelf_table .bottom_b{
	border-bottom: 1px solid #FFF;
}
.shelf_table .td_none{
	background: transparent;
	border: 0;
	vertical-align: bottom;
}
.shelf_table .vertical-rl{
	-ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
	white-space: unset;
	width: 4rem;
	display: table-cell;
}
.viewmore_blue_area{
	margin: 1rem auto;
	
}
.viewmore_blue_area a{
	width: 35%;
	display: block;
}
@media screen and (max-width:640px) {
	.viewmore_blue_area a{
		width: 70%;
	}
}
.viewmore_blue_area a .img_area{
	margin: 2rem auto;
}
@media screen and (max-width:640px) {
	.viewmore_blue_area a .img_area{
		margin: 1rem auto;
	}
}
.point_area .point_text .point_flex{
	-webkit-align-items: stretch;
    align-items: stretch;
}

@media screen and (max-width:640px) {
	.point_area{
		max-width: 80%;
	}
}

.strech_area{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: stretch;
	align-items: stretch;
	-webkit-align-content: space-between;
	align-content: space-between;
	-webkit-align-self: stretch;
	align-self: stretch;
	flex-wrap: wrap;
	height: 100%;
}
.width_chenge.section_block .bubble_area .in_img{
	width: 25%;
}
.width_chenge.section_block .bubble_area .in_text {
	width: 72%;
}
.flex_adp{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: center;
	align-items: center;
	-webkit-align-content: center;
	align-content: center;
	-webkit-align-self: center;
	align-self: center;
	flex-wrap: wrap;
}
.flex_adp .left_adp{
	width: 70%;
}
.flex_adp .right_adp{
	width: 30%;
}
@media screen and (max-width:640px) {
	.flex_adp .left_adp,
	.flex_adp .right_adp{
		width: 100%;
	}
}
.blue_adp_box{
	border: 1px solid #4472C4;
	background: #F2F2F2;
	padding: 1rem;
	width: 70%;
	margin: 1rem auto;
	font-size: 1.6rem;
	font-weight: bold;
	box-shadow: 2px 2px 0 0 rgb(118, 148, 243);
}
.blue_adp_box h5{
	color: #4472C4;
	text-decoration: underline;
	font-size: 1.4rem;
	text-align: center;
	margin-bottom: 2rem;
}
.blue_adp_box .min_font{
	font-size: 1.6rem;
}
.blue_adp_box p{
	color: #4472C4;
	margin-bottom: 2rem;
}
.merit_area{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: stretch;
	align-items: stretch;
	-webkit-align-content: center;
	align-content: center;
	-webkit-align-self: center;
	align-self: center;
	flex-wrap: wrap;
}
.merit_area .merit_box{
	margin-bottom: 1rem;
	width: 32%;
	border: 1px solid #4472C4;
}
@media screen and (max-width:640px) {
	.merit_area .merit_box{
		width: 100%;
	}
}
.merit_area .merit_box_inner{
display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: stretch;
	align-items: stretch;
	-webkit-align-content: center;
	align-content: center;
	-webkit-align-self: center;
	align-self: center;
	flex-wrap: wrap;
	height: 100%;
}
.merit_area .merit_box h4{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	-webkit-align-items: center;
	align-items: center;
	-webkit-align-content: center;
	align-content: center;
	-webkit-align-self: center;
	align-self: center;
	flex-wrap: wrap;
	background: #4472C4;
	padding: 0.5rem;
	width: 100%;
}
.merit_area .merit_box h4 .merit_num_area{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: center;
	align-items: center;
	-webkit-align-content: center;
	align-content: center;
	-webkit-align-self: center;
	align-self: center;
	flex-wrap: wrap;
	background: #FFF;
	color: #4472C4;
	width: 5rem;
	height: 5rem;
	margin-right: 2rem;
}
.merit_area .merit_box h4 .merit_num_area .merit_des{
	font-size: 1.1rem;
	width: 100%;
	text-align: center;
	letter-spacing: 0.01rem;
	margin-top: 0.5rem;
}
.merit_area .merit_box h4 .merit_num_area .merit_num{
	font-size: 2.2rem;
	width: 100%;
	text-align: center;
	line-height: 1.2;
}
.merit_area .merit_box h4 .title_area{
	color: #FFF;
	font-size: 1.8rem;
	width: calc(100% - 7rem);
	display: inline-block;
}
.merit_area .merit_box .merit_text{
	background: #F2F2F2;
	padding: 1rem 2rem 0;
	height: calc(100% - 6rem);
}
@media screen and (max-width:640px) {
	.merit_area .merit_box .merit_text{
		padding: 1rem 1rem 0;
	}
}
.merit_area .merit_box .merit_text p{
	font-size: 1.6rem;
	text-align: left;
}

.point_bottom.pc60 a{
	width: 35%;
}
@media screen and (max-width:640px) {
	.point_bottom.pc60 a{
		width: 80%;
		margin: 0 auto;
	}
}
.point_bottom.pc70 a{
	width: 35%;
}
@media screen and (max-width:640px) {
	.point_bottom.pc70 a{
		width: 80%;
		margin: 0 auto;
	}
}
.point_bottom.pc60 .blue_text{
	font-size: 2rem;
}
.hard_table{
	width: 100%;
	min-width: 800px;
	margin: 1rem auto 2rem;
}
.hard_table th{
	background: #4472C4;
	color: #FFF;
	font-size: 1.2rem;
	font-weight: bold;
}
.hard_table th:first-child{
	width: 5rem;
}
.hard_table .bkcolor_rightblue{
	font-size: 1.5rem;
	background: #8FAADC;
	border: 1px solid #FFF;
}
.hard_table td{
	background: #DAE3F3;
	color: #000;
	font-size: 1.5rem;
	width: 20rem;
}
.hard_table li,
.hard_table a{
	font-size: 1.2rem;
}
.hard_table .right_b{
	border-right: 1px solid #FFF;
}
.hard_table .bottom_b{
	border-bottom: 1px solid #FFF;
	border-top: 1px solid #FFF;
	
}
.hard_table .w_th{
	background: #FFF;
}
.hard_table .text_center{
	text-align: center;
}
.hard_table a{
	text-decoration: underline;
}

.hard_table .fontsize17{
	font-size: 1.7rem;
}




.recommendation_area{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	-webkit-align-items: center;
	align-items: center;
	-webkit-align-content: center;
	align-content: center;
	-webkit-align-self: center;
	align-self: center;
	flex-wrap: wrap;
	margin-bottom: 2rem;
}
.recommendation_area .recommendation_left{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-align-content: center;
	align-content: center;
	-webkit-align-self: stretch;
	align-self: stretch;
	flex-wrap: wrap;
	position: relative;
	background: #8FAADC;
	color: #FFF;
	padding: 1rem;
	width: 20%;
}
.recommendation_area .recommendation_left::after{
	content: "";
	position: absolute;
	top: 60%;
	left: 100%;
	border-top: 1rem solid transparent;
	border-right: 1rem solid transparent;
	border-bottom: 1rem solid transparent;
	border-left: 1.5rem solid #8FAADC;
}
.recommendation_area .recommendation_left p{
	color: #FFF;
	font-size: 1.6rem;
	text-align: center;
	font-weight: bold;
}
.recommendation_area .recommendation_right{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	-webkit-align-items: center;
	align-items: center;
	-webkit-align-content: center;
	align-content: center;
	-webkit-align-self: stretch;
	align-self: stretch;
	flex-wrap: wrap;
	background: #FFF;
	border: 1px solid #8FAADC;
	padding: 1rem 1rem 1rem 3rem;
	width: 80%;
}
.recommendation_area .recommendation_right li{
	color: #4472C4;
	font-size: 1.6rem;
	font-weight: bold;
}

/*
.pink_link{
	width: 100%;
	background:#FEE6F0;
	padding: 1rem 2rem;
}
@media screen and (max-width:640px) {
	.pink_link{
		padding: 1rem;
	}
}
.pink_link a:hover{
	text-decoration: none;
}
.pink_link h3{
	font-size: 2.1rem;
	text-align: center;
	color: #FF6699;
}
.pink_link h4{
	background: #FF6699;
	font-size: 1.8rem;
	color: #FFF;
	text-align: center;
	padding: 1.4rem 1rem 1rem 1rem;
}
.pink_link h4 .font_yallow{
	font-size: 2.4rem;
	color: #FFFF00;
}
.pink_link .pink_content{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: center;
	align-items: center;
	-webkit-align-content: center;
	align-content: center;
	-webkit-align-self: center;
	align-self: center;
	flex-wrap: wrap;
}
.pink_link .left_content{
	width: 35%;
}
.pink_link .right_content{
	width: 65%;
	padding: 1rem;
}

@media screen and (max-width:640px) {
	.pink_link .left_content,
	.pink_link .right_content{
		width: 100%;
	}
}
.pink_link h5{
	font-size: 1.8rem;
	text-align: center;
	border-bottom: 1px solid #FF6699;
	color: #FF6699;
}
.pink_link .right_content p{
	padding: 1rem;
	font-size: 1.6rem;
	color: #000;
}
.pink_link .right_content p .color-p{
	font-size: 1.6rem;
}
.ai_area{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: center;
	align-items: center;
	-webkit-align-content: center;
	align-content: center;
	-webkit-align-self: center;
	align-self: center;
	flex-wrap: wrap;
	width: 90%;
	margin: 3rem auto 1rem;
}
@media screen and (max-width:640px) {
	.ai_area{
		width: 100%;
	}
}
.ai_area .ai_box{
	width: 23%;
}
@media screen and (max-width:640px) {
.ai_area .ai_box{
	width: 49%;
}
}
.ai_area .ai_box p{
	padding: 1rem;
	color: #44546A;
	font-weight: bold;
	font-size: 1.6rem;
}
.ainetapp_area{
	width: 100%;
	padding: 1rem;
}
.ainetapp_area h4{
	background: #DAE3F3;
	color: #4472C4;
	font-size: 2.2rem;
	text-align: center;
	padding: 0.8rem 1rem 0.5rem;
}
.ainetapp_area .flex_th_area{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: center;
	align-items: center;
	-webkit-align-content: center;
	align-content: center;
	-webkit-align-self: center;
	align-self: center;
	flex-wrap: wrap;
	margin: 2rem auto 2rem;
}
.flex_th_box{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: stretch;
	align-items: stretch;
	-webkit-align-content: space-between;
	align-content: space-between;
	-webkit-align-self: stretch;
	align-self: stretch;
	flex-wrap: wrap;
	width: 33%;
}
@media screen and (max-width:640px) {
	.flex_th_box{
		width: 100%;
		border-bottom: 1px dashed #4472C4;
		margin-bottom: 3rem;
	}
}
.flex_th_box .flex_th_inner{
	border-right: 1px dashed #4472C4;
}
@media screen and (max-width:640px) {
	.flex_th_box .flex_th_inner{
		border-right: 0;
	}
}
.flex_th_p{
	width: 75%;
	margin: 0 auto;
}
.flex_th_box:last-child .flex_th_inner{
	border-right: 0;
	border-bottom: 0;
}
.flex_th_box .flex_th_inner h5{
	color: #4472C4;
	font-size: 2rem;
	text-align: center;
	margin-bottom: 0.5rem;
}
.flex_th_box .flex_th_inner h6{
	color: #4472C4;
	font-size: 1.6rem;
	text-align: center;
	margin-bottom: 0.5rem;
}
.flex_th_box .flex_th_inner p{
	font-size: 1.6rem;
	margin-bottom: 2rem;
}
.flex_th2_area{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: stretch;
	align-items: stretch;
	-webkit-align-content: space-between;
	align-content: space-between;
	-webkit-align-self: stretch;
	align-self: stretch;
	flex-wrap: wrap;
	width: 55%;
	margin: 3rem auto 2rem;
}
@media screen and (max-width:640px) {
	.flex_th2_area{
		width: 100%;
	}
}
.flex_th2_box{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: stretch;
	align-items: stretch;
	-webkit-align-content: space-between;
	align-content: space-between;
	-webkit-align-self: stretch;
	align-self: stretch;
	flex-wrap: wrap;
	width: 30%;
}
@media screen and (max-width:640px) {
	.flex_th2_box{
		width: 32%;
	}
}
.flex_th2_box h5{
	color: #4472C4;
	font-size: 1.8rem;
	text-align: left;
	margin-bottom: 0.5rem;
}

.ainetapp_bottom_b{
	width: 40%;
	margin: 1rem auto;
}
@media screen and (max-width:640px) {
	.ainetapp_bottom_b{
		width: 100%;
	}
}
.ainetapp_bottom_b h6{
	color: #4472C4;
	font-size: 1.8rem;
	text-align: center;
	margin-bottom: 0.5rem;
}
.ainetapp_bottom_b p{
	font-size: 1.6rem;
	margin-bottom: 2rem;
}
*/

.blue_title{
	width: 90%;
	margin: 1rem auto;
	color: #4472C4;
	font-size: 1.8rem;
	background: transparent;
	border: 0;
}

.blue_title2{
	margin: 1rem auto;
	color: #4472C4;
	font-size: 2rem;
	background: transparent;
	border: 0;
}
.qlcssd{
	position: relative;
}
.qlcssd::after{
	content: "QLC SSD";
	position: absolute;
	color: #00B0F0;
	background: #FFFF00;
	border: 1px solid #00B0F0;
	padding: 0.1rem 0.4rem 0;
	font-size: 1.1rem;
	top: 0;
	right: 1%;
}
.height_auto{
	height: 6rem;
}
td.v_bottom{
	vertical-align: bottom;
}
.sub_title_gray{
	font-size: 2rem;
	color: #FFF;
	background: #ADB9CA;
	text-align: center;
	padding: 0.6rem 1rem 0.4rem;
}
.sub_title_blue{
	font-size: 2rem;
	color: #FFF;
	background: #8FAADC;
	text-align: center;
	padding: 0.6rem 1rem 0.4rem;
}



.sp-only {
  display: none;
}

@media screen and (max-width: 640px) {
  .sp-only {
    display: inline;
  }
}


/*
.ggray_title{
	color: #44546A;
	font-size: 1.8rem;
	text-align: left;
}
.soft_table{
	width: 100%;
	min-width: 600px;
	margin: 0 0 3rem;
}
.soft_table tr{
	border-top: 1px solid #4472C4;
	border-left: 1px solid #4472C4;
}
.soft_table th,
.soft_table td{
	border-bottom: 1px solid #4472C4;
	border-right: 1px solid #4472C4;
	vertical-align: middle;
	display: table-cell;
}
.soft_table th{
	font-weight: bold;
}
.soft_table th,
.soft_table td,
.soft_table span,
.soft_table li,
.soft_table a{
	font-size: 1.6rem;
	text-align: left;
}
.soft_table a{
	text-decoration: underline;
}
.soft_table th.th_blue{
	background: #4472C4;
	color: #FFF;
}
.soft_table td.td_blue{
	background: #FFF;
	color: #000;
}
.soft_table .th_b_blue{
	background: #DAE3F3;
	color: #4472C4;
}

.gray_list_box{
	border: 1px solid #4472C4;
	background: #F2F2F2;
	padding: 1rem;
}
.gray_list_box h4{
	display: inline-block;
	font-size: 1.6rem;
	color: #4472C4;
	text-decoration: underline;
}
.gray_list_box .list_outer{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: center;
	align-items: center;
	-webkit-align-content: center;
	align-content: center;
	-webkit-align-self: center;
	align-self: center;
	flex-wrap: wrap;
}
.gray_list_box .list_outer .list_box_left{
	width: 60%;
}
.gray_list_box .list_outer .list_box_right{
	width: 30%;
}
@media screen and (max-width:640px) {
	.gray_list_box .list_outer .list_box_left,
	.gray_list_box .list_outer .list_box_right{
		width: 100%;
	}
}
.gray_list_box li{
	font-size: 1.4rem;
	color: #4472C4;
	font-weight: bold;
}

.platform_table{
	width: 100%;
	min-width: 600px;
	margin: 0 0 3rem;
}
.platform_table tr{
	border-top: 1px solid #4472C4;
	border-left: 1px solid #4472C4;
}
.platform_table th,
.platform_table td{
	border-bottom: 1px solid #4472C4;
	border-right: 1px solid #4472C4;
	vertical-align: middle;
	display: table-cell;
}
.platform_table th{
	font-weight: bold;
}
.platform_table th,
.platform_table td,
.platform_table span,
.platform_table li,
.platform_table a{
	font-size: 1.6rem;
	text-align: left;
}
.platform_table a{
	text-decoration: underline;
}
.platform_table th.th_blue{
	background: #156082;
	color: #FFF;
}
.platform_table td.td_blue{
	background: #FFF;
	color: #000;
}
.platform_table .th_b_blue{
	background: #DAE3F3;
	color: #4472C4;
}
	*/
/*
.green_area{
	background: #E2F0D9;
}
.green_area h5{
	padding: 0.5rem 1rem;
	background: #92D050;
	color: #FFF;
	text-align: left;
	font-size: 2rem;
}
.green_area p{
	color: #70AD47;
	font-size: 1.8rem;
	font-weight: bold;
}
.green_area .in_block{
	background: rgba(255,255,255,0.75);
	margin: 0 1rem 1rem;
	padding: 1rem;
	
}
.green_area .in_block p{
	color: #000;
	font-weight: normal;
}
.green_area  .view_more1{
	color: #FFF;
	background: #92D050;
	font-size: 1.8rem;
	width: calc(100% - 2rem);
	margin: 0 auto 2rem;
	padding: 1rem;
}
.green_area  .view_more1 .view_more_btn{
	text-align: right;
	
}
.green_area  .view_more1 .view_more_btn .img_view_more{
	width: 50%;
	display: inline-block;
}

 .view_more2{
	color: #4472C4;
	background: #D6DCE5;
	font-size: 1.8rem;
	width: calc(100% - 2rem);
	margin: 0 auto 2rem;
	padding: 1rem;
	font-weight: bold;
}
 .view_more2 .view_more_btn{
	text-align: right;
	width: 50%;
	display: inline-block;
	margin-left: 50%;
}


.blue_area{
	background: #DAE3F3;
}
.blue_area h5{
	padding: 0.5rem 1rem;
	background: #8FAADC;
	color: #FFF;
	text-align: left;
	font-size: 2rem;
}
.blue_area p{
	color: #4472C4;
	font-size: 1.8rem;
	font-weight: bold;
}
.blue_area .in_block{
	background: rgba(255,255,255,0.75);
	margin: 0 1rem 1rem;
	padding: 1rem;
}
.blue_area .in_block p{
	color: #000;
	font-weight: normal;
}
.blue_list_box{
	width: calc(100% - 2rem);
	margin: 0 auto 2rem;
}
.blue_list_box h4{
	padding: 0.5rem 1rem;
}

.point_area .point_text .point_flex .point_flex_box .section_block .bubble_area .in_img{
	width: 45%;
	padding: 1rem;
} 
.point_area .point_text .point_flex .point_flex_box .section_block .bubble_area .in_text{
	width: 55%;
}
.ontaplist_table{
	width: 100%;
	min-width: 900px;
	margin: 0 0 3rem;
}
.ontaplist_table tr{
	border-top: 1px solid #002060;
	border-left: 1px solid #002060;
}
.ontaplist_table th,
.ontaplist_table td{
	border-bottom: 1px solid #002060;
	border-right: 1px solid #002060;
	vertical-align: middle;
	display: table-cell;
}
.ontaplist_table th,
.ontaplist_table td,
.ontaplist_table span,
.ontaplist_table li{
	font-size: 1.6rem;
	text-align: left;
}
.ontaplist_table th{
	background: #4472C4;
	color: #FFF;
	font-weight: bold;
}
.ontaplist_table th.th_blue{
	background: #002060;
	color: #FFF;
}
.ontaplist_table td.td_blue{
	background: #DAE3F3;
	color: #4472C4;
	font-weight: bold;
}
.ontaplist_table .bluetitle{
	color: #4472C4;
	font-weight: bold;
}
.ontaplist_table .th_b_blue{
	width: 10%;
}
.ontaplist_table a{
	text-decoration: underline;
}
.data_write{
	margin: 3rem 0;
}
.gray_os_block{
	background: #D6DCE5;
	width: 96%;
	padding: 1rem;
	margin: 1rem auto;
}
.gray_os_block h4{
	color: #44546A;
	background: transparent;
	border: 0;
	font-size: 2rem;
}
.matrix_table{
	width: 100%;
	min-width: 600px;
	margin: 1rem auto;
}
.matrix_table th,
.matrix_table td{
	font-size: 1.4rem;
	text-align: center;	
}
.matrix_table th{
	font-weight: bold;
}
.matrix_table th.th_blue{
	background: #44546A;
	color: #FFF;
	text-align: center;
	border-right: 1px solid #8497B0;
}
.matrix_table th.th_b_blue{
	background: #ADB9CA;
	color: #44546A;
	text-align: center;
	border-right: 1px solid #8497B0;
}
.matrix_table .left_b{
	border-left: 1px solid #44546A;
}
.matrix_table .right_b{
	border-right: 1px solid #44546A;
}
.matrix_table .bottom_b{
	border-bottom: 1px solid #44546A;
}
.matrix_table td{
	background: #FFF;
	color: #44546A;
}
*/

.point_bottom{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: center;
	align-items: center;
	-webkit-align-content: center;
	align-content: center;
	-webkit-align-self: center;
	align-self: center;
	flex-wrap: wrap;
	background: #D6DCE5;
	padding: 2rem 2rem;
	margin: 2rem auto 0;
}
.point_bottom p{
	font-size: 2.2rem;
	font-weight: bold;
	color: #4472C4;
}
.point_bottom a{
	width: 20%;
	display: block;
}
@media screen and (max-width:640px) {
	.point_bottom a{
		width: 80%;
		margin: 1rem auto;
	}
}

.anchor_link {
	margin-top: -50px;
	padding-top: 60px;
}

/*
.pager a {
	display: block;
	border: 0.3rem solid #00B0F0;
	background: #F2F2F2;
	color: #00B0F0;
	border-radius: 4rem;
	font-size: 3rem;
	padding: 1rem 2rem;
	width: 100%;
	transition: all 0.3s;
}

.pager a:hover {
	background: #00B0F0;
	color: #FFF;
}
	*/


	:root{

      /* 左（コスパ） */
      --left-panel:#ECF1F9;
      --left-blue:#4472C4;
      --left-pink:#FD0C6D;
      --left-badge:#4472C4;

      /* 右（要件） */
      --right-panel:#EAEDF2;
      --right-text:#44546A;
      --right-badge:#44546A;

      --card-radius:18px;
      --panel-radius:14px;
      --shadow: 0 12px 28px rgba(0,0,0,.35);



    }

    /* *{ box-sizing:border-box; }
    body{
      margin:0;
      background:var(--bg);
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP",
                   "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
      color:#fff;
    } */

	.wrap{
	max-width: 1100px; /* これは残す */
	width: 85%;
	margin: 0 auto;
	}

    /* 640px境界：>=640 横並び / <640 縦並び */
    .grid{
      display:grid;
      grid-template-columns:1fr;
      gap:18px;
      align-items:start;
    }
    @media (min-width:640px){
      .grid{ 
		grid-template-columns:1fr 1fr; 
		align-items: stretch; /* start → stretch */}
    }



	.card{
	background: transparent; /* またはそのままでもOK */
	border: none;
	box-shadow: none;
	display: flex;
	flex-direction: column;
	}

    /* 人物（画像）の表示枠 */
    .hero{
      display:flex;
      justify-content:center;
      align-items:center;
      height: 180px;
      margin: 4px 0 8px;
    }
    .hero img{
      height: 180px;
      width: auto;
      display:block;
      image-rendering: auto;
    }

    /* パネル（箇条書き） */
    .panel{
      position:relative;
      margin: 0 8px;
      border-radius: 0;
      padding: 18px 18px 18px;
      line-height: 1.35;
	  flex: 1;
    }
    .panel::after{
	content:"";
	position:absolute;
	left:50%;
	transform: translateX(-50%);
	bottom: -26px;

	/* 三角のサイズ */
	width: 56px;
	height: 28px;

	/* ▼ ここがポイント：グラデーション */
	background: linear-gradient(
		to bottom,
		#ECF1F9 0%,   /* パネル背景色 */
		#AFC2E5 100% /* 三角の先端色 */
	);

	/* 三角形に切り抜く */
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	}

    .bullets{
      margin:0;
      padding:0;
      list-style:none;
      font-weight: 800;
      letter-spacing: .2px;
    }
    .bullets li{
      display:flex;
      gap:8px;
      margin: 10px 0;
      font-size: 26px;
	  align-items: flex-start;
    }
    .dot{
      width: 10px;
      height: 10px;
      border-radius: 50%;
      flex: 0 0 10px;
      margin-top: 5px;
      background: currentColor;
    }
    .txt{ flex:1; }

	.bullets .txt{
		flex: 1;
		min-width: 0;
	}

    .accent{ color: var(--left-pink); font-weight: 900; }
	.note{
		font-size: 14px;   /* 好みで 12〜16px */
		font-weight: 400;  /* 太さも通常に */
	}

    /* 下部：人物（吹き出し＋オペレーター）は画像、下の帯だけHTML */
    .bottom{
      position:relative;
      margin-top: 18px;
      padding: 10px 8px 92px; /* バッジ分の余白 */
      min-height: 320px;
    }
    .bottom .scene{
      display:flex;
      justify-content:center;
      align-items:flex-start;
      padding-top: 6px;
    }
    .bottom .scene img{
      width: min(520px, 100%);
      height: auto;
      display:block;
    }

    .badge{
		position:absolute;
		left: 18px;
		right: 18px;
		bottom: 24px;
		border-radius: 999px;
		padding: 18px 18px;
		font-size: 25px;
		font-weight:700;
		text-align:center;
		/* box-shadow: 0 12px 26px rgba(0,0,0,.28); */
		text-shadow: 0 1px 2px rgba(0,0,0,.25);
		text-decoration:none;
		color: #fff !important;        /* 文字色を白に固定 */
		text-decoration: none !important; /* 下線を完全に消す */
		font-weight: 900;              /* 文字をはっきり */
    }

    /* ===== テーマ ===== */
    .left .panel{
      background: var(--left-panel);
      color: var(--left-blue);
    }
    .left .panel::after{
      border-top-color: #AFC2E5; /* 画像の三角に近い色 */
    }
    .left .bullets li{ color: var(--left-blue); }
    .left .badge{ background: var(--left-badge); }

    .right .panel{
      background: var(--right-panel);
      color: var(--right-text);
    }
    .right .panel::after{
      border-top-color: #ACB8C4;
    }
    .right .bullets li{ color: var(--right-text); font-weight: 900; }
    .right .badge{ background: var(--right-badge); }

    /* 小さめ画面の保険 */
    @media (max-width: 420px){
      .bullets li{ font-size: 22px; }
      .badge{ font-size: 30px; }
      .hero{ height: 190px; }
      .hero img{ height: 180px; }
    }

    /* 視覚非表示見出し */
    .sr-only{
      position:absolute; width:1px; height:1px; padding:0; margin:-1px;
      overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
    }




/*  ここからテーブル*/

.root_table{
  --blue-main:   #4a74c4;
  --blue-light:  #bfd1ee;
  --blue-border: #b7c9ee;
  --cell-bg:     #F5F5F5;
}

		.table-wrap{
			overflow-x:auto;
			max-width:100%;
		}

		table.compare{
			border-collapse: collapse;
			width:95%;
			min-width:960px;
			background: var(--cell-bg);
			margin: 0 auto; 
		}

		table.compare th,
		table.compare td{
			text-align: center;
			border: 2px solid var(--blue-border);
			padding: 10px 12px;
			vertical-align: middle;
			background: var(--cell-bg);
		}

		table.compare th.head-main,
		table.compare th.head-sub{
		background: var(--blue-main);
		color: #fff;
		font-weight: 700;
		}

		.head-main,
		.head-sub{
			background: var(--blue-main);
			color: #fff;
			font-weight: 700;
		}

		.row-head{
			background: var(--blue-light);
			font-weight: 600;
			text-align: left;
			white-space: nowrap;
		}

		.slash{
			background:
			linear-gradient(
			to top right,
			transparent 49%,
			var(--blue-border) 50%,
			transparent 51%
		);
		}

		.tabel_note{
			font-size: 1rem;
			color: #ffffff;
		}

		.tabel_note_contents{
			width: 95%;
			margin: 0.5rem auto 0;
			font-size: 1.5rem;
		}

		/* 1列目（項目名）の背景を確実に反映 */
		table.compare th.row-head{
		background: var(--blue-light);
		}

		table.compare th.row-head{
		background: var(--blue-light);
		color: #000;
		border-color: #fff;
		}


		/* 比較表ヘッダーのボーダーを白にする */
		.compare th.head-main,
		.compare th.head-sub {
			border: 1px solid #fff;
		}

		/* 上段と下段の区切り線も白にする */
		.compare tr:first-child th,
		.compare tr:nth-child(2) th {
			border-color: #fff;
        }

		.compare {
			border: 1px solid #fff;
		}



		/* 斜線セル */
		.compare-diagonal{
			position: relative;
			background-color: #fff;
		}

		/* 斜線を描画 */
		.compare-diagonal::after{
			content: "";
			position: absolute;
			inset: 0;
			background-image: linear-gradient(
				to bottom right,
				transparent 49%,
				#b7c9ee 50%,
				transparent 51%
			);
			pointer-events: none;
		}



/*  ここからサポプラ*/


		.suppplus-wrap{
			overflow-x:auto;
			max-width:100%;
		}



		/* 青文字リスト用 */
		.blue_list{
			list-style: none;         /* デフォルト黒丸消す */
			padding-left: 1.5em;      /* 全体の左インデント */
			margin: 0.5rem 0;
		}

		.blue_list li{
			position: relative;
			padding-left: 1em;        /* 折り返し用スペース */
			margin-bottom: 0.5rem;
			font-size: 1.6rem;
			color: #1a4fbf;           /* 今の青に合わせて調整 */
		}

		/* 疑似要素で中黒を表示 */
		.blue_list li::before{
			content: "・";
			position: absolute;
			left: 0;
		}

		.font_small{
			font-size: 1.5rem;
		}


		.font_verysmall{
			display: block;  
			font-size: 1.2rem;
			padding-left: 1.2em;
  			text-indent: -1.2em;
		}
		
		.font_bold_blue{
			color:#4472C4;
			font-weight: 700; 
			
		}

		.suppplus-images{
		display: flex;
		gap: 2rem;
		width: 95%;
		margin: 1.5rem auto 0;
		}

		.suppplus-image{
		flex: 1;
		}





		.suppplus-image img.support-image-small{
		width: 100%;
		max-width: 250px;  /* 適宜調整 */
		margin: 0 auto;
		display: block;
		}




		.suppplus-image img{
		width: 100%;
		height: auto;
		/* display: block; */
		}



		/* 初期状態：PC */
		.pc-only{
		display: block;
		}
		.sp-only{
		display: none;
		}

		/* SP（640px以下） */
		@media screen and (max-width:640px){
			.suppplus-images{
				flex-direction: column;
				gap: 1rem;
				width: 70%;
			}

			.pc-only{
				display: none;
			}
			.sp-only{
				display: block;
			}
		}


		/* 全体：PCは4列、SPは2列 */
		.worry-grid{
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 18px;
		align-items: end;
		width: 80%;
		margin: 0 auto;   /* センター寄せ */
		}




		@media (max-width: 640px){
		.worry-grid{
			grid-template-columns: repeat(2, 1fr);
			gap: 14px;
		}
		}

		/* 1枚分 */
		.worry-card{
		display: flex;
		flex-direction: column;
		align-items: center;
		}

		/* 吹き出し（テキストで生成） */
		.worry-bubble{
		width: 100%;
		max-width: 260px;
		background: #d9dee6;              /* 吹き出しの薄グレー */
		color: #556476;                    /* 文字色 */
		border-radius: 14px;
		padding: 18px 14px;
		font-weight: 800;
		font-size: 15px;
		line-height: 1.15;
		text-align: center;
		position: relative;
		box-shadow: 10px 10px 0 rgba(0,0,0,.35); /* 右下の影っぽさ */
		}

		/* 吹き出しの三角 */
		.worry-bubble::after{
		content:"";
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: -18px;
		width: 0;
		height: 0;
		border-left: 18px solid transparent;
		border-right: 18px solid transparent;
		border-top: 18px solid #d9dee6;
		}

		/* 人画像 */
		.worry-human{
		height: auto;
		display: block;
		margin-top: 12px;
		width: 85%;        /* ← 90% / 80% などで微調整 */
		max-width: 150px;  /* ← 240px から小さく */
		height: auto;
		}

		/* SPで文字を少しだけ縮める（読みやすさ） */
		@media (max-width: 640px){
		.worry-bubble{
			font-size: 15px;
			padding: 16px 12px;
			box-shadow: 8px 8px 0 rgba(0,0,0,.35);
		}
		.worry-human{
			max-width: 200px;
		}
}

/* よくあるお悩み、NetApp サポートプラスで解決！ */

/* ===== お悩み解決（課題/解決カード） ===== */
:root{
  /* 画像から近い代表色（濃紺/ピンク、背景） */
  --case-problem-bar: #44546A;
  --case-problem-bg:  #E8ECF1;
  --case-solution-bar:#FF6699;
  --case-solution-bg: #FFEDF3;

  --case-border: #ffffff;
  --case-radius: 0px;           /* 角丸を付けたいなら 6px/10px など */
  --case-inner-radius: 28px;    /* 画像枠の角丸 */
}

.case-grid{
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

@media (max-width: 640px){
  .case-grid{
    grid-template-columns: 1fr;
    gap: 16px;
	width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* カード本体 */
.case-card{
  border: 2px solid var(--case-border);
  border-radius: var(--case-radius);
  overflow: hidden;
}

.case-card.is-problem{ background: var(--case-problem-bg); }
.case-card.is-solution{ background: var(--case-solution-bg); }

/* 上の帯 */
.case-head{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
    color: #fff;
  justify-content: flex-start;
  padding-left: 0;
  padding-right: 0;
  gap: 0;              /* タグとタイトルの隙間も0にしたい場合 */
}

.case-card.is-problem .case-head{ background: var(--case-problem-bar); }
.case-card.is-solution .case-head{ background: var(--case-solution-bar); }

.case-tag{
  margin: 0;
  background: #fff;
  color: #5c6a7b;
  font-weight: 800;
  padding: 8px 12px;
  line-height: 1;
  text-align: left;
  white-space: nowrap;
   display: inline-block;
}

.case-title{
  margin: 0;
  margin-left: 1rem;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
}

/* 中身（画像＋テキスト） */
.case-body{
  display: grid;
  grid-template-columns: 46% 1fr;
  gap: 26px;
  padding: 22px;
}

@media (max-width: 640px){
  .case-title{ font-size: 22px; }
  .case-body{
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.case-illust{
  background: #fff;
  border-radius: var(--case-inner-radius);
  padding: 26px;
}

.case-illust img{
  width: 100%;
  height: auto;
  display: block;
}

.case-text{
  margin: 0;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
  color: #000;
}


/* ================================
   NWSP（標準保守 + サポートプラス）
   ※このブロックを丸ごと管理
   ================================ */

.nwsp-figure{
  --nwsp-gray: #dbe2ea;     /* 必須側 下地 */
  --nwsp-pink: #f6e3ea;     /* 有償側 下地 */
  --nwsp-blue: #2c64c5;
  --nwsp-navy: #3d4f63;
  --nwsp-line-gray: rgba(61,79,99,.45);

  width: 95%;
  max-width: 980px;
  margin: 18px auto 32px;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;

  align-items: stretch; /* ←左右カードの高さを揃える */
}

@media (max-width: 640px){
  .nwsp-figure{
    width: 80%;
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* カード（左右の大枠） */
.nwsp-card{
  display: flex;
  flex-direction: column;

  background: transparent;
  border: 2px solid #fff;
  overflow: hidden;
  border-radius: 14px;
}

/* 左カード：下の角丸を取りたい */
.nwsp-card.is-required{
  border-radius: 0;
}

/* 右カード：下の角丸を取りたい */
.nwsp-card.is-option{
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* 上段（白帯） */
.nwsp-top{
  background:#fff;
  padding: 16px 0 10px; /* 左右0にして見出し下線をフル幅に */
}

/* 上段：ラベル行（必須 / + 有償オプション） */
.nwsp-toprow{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 14px 8px; /* 内側余白はここで作る */
}

/* pill */
.nwsp-pill{
  display:inline-block;
  padding: 8px 18px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 16px;
  color: var(--nwsp-navy);
  background: #dae3f3;
  line-height: 1;
}
.nwsp-pill.is-option{
  background:#e8f0ff;
  color: var(--nwsp-blue);
}

/* + */
.nwsp-plus{
  display:inline-block;
  line-height: 1;
  font-size: 50px;
  font-weight: 900;
  color: #DAE3F3;
  margin-right: 2px;
  text-shadow:
    1px 0 0 #DAE3F3,
   -1px 0 0 #DAE3F3,
    0 1px 0 #DAE3F3,
    0 -1px 0 #DAE3F3;
}

/* タイトル */
.nwsp-main{
  margin: 0;
  text-align: center;
  font-size: 22px;
  font-weight: 900;
  color: var(--nwsp-navy);
  letter-spacing: .04em;
  line-height: 1.35;

  position: relative;
  padding: 0 14px 12px; /* 内側余白 */
}
.nwsp-main.is-blue{ color: var(--nwsp-blue); }

/* 見出し下線（カード幅いっぱい） */
.nwsp-main::after{
  content:"";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--nwsp-line-gray);
}
.nwsp-main.is-blue::after{
  background: #4472C4;
}

/* 下段（本体） */
.nwsp-columns{
  flex: 1; /* ←カード内を伸ばして高さ揃え */
  display: grid;
  grid-template-columns: 1fr 1fr;

  margin: 0;
  padding: 0;
}

.nwsp-card.is-required .nwsp-columns{ background: var(--nwsp-gray); }
.nwsp-card.is-option  .nwsp-columns{ background: var(--nwsp-pink); }

@media (max-width: 640px){
  .nwsp-columns{ grid-template-columns: 1fr; }
}

/* カラム（中の列も高さを素直に扱えるようflex化） */
.nwsp-col{
  padding: 0 16px 18px;
  display: flex;
  flex-direction: column;
}

/* 列間のライン（PC：縦 / SP：横） */
.nwsp-col + .nwsp-col{
  border-left: 4px solid rgba(255,255,255,.65);
}
@media (max-width: 640px){
  .nwsp-col + .nwsp-col{
    border-left: 0;
    border-top: 4px solid rgba(255,255,255,.65);
  }
}

/* カラム見出し */
.nwsp-colhead{
  margin: 0 -16px 16px;
  padding: 14px 10px;
  background:#5a6a7f;
  color:#fff;
  font-weight: 900;
  font-size: 20px;
  text-align:center;
}
.nwsp-colhead.is-blue{ background:#4c95d8; }
.nwsp-colhead.is-pink{ background:#ff6fa4; }

/* 基本メニューの背景 */
.nwsp-col.is-basic{
  background:#deebf7;
}

/* メニュー箱 */
.nwsp-box{
  background:#fff;
  border-radius: 18px;
  padding: 16px 10px;
  text-align:center;
  font-weight: 900;
  color: var(--nwsp-navy);
  font-size: 18px;
  line-height: 1.15;
  margin: 0 0 14px;
  box-shadow: 7px 7px 0 rgba(61,79,99,.30);
}
.nwsp-box.is-blue{
  color: var(--nwsp-blue);
  box-shadow: 10px 10px 0 rgba(76,149,216,.30);
}
.nwsp-box.is-pink{
  color: #ff5b93;
  box-shadow: 10px 10px 0 rgba(255,111,164,.30);
}

/* アイコン＋テキスト（img{width:100%} 対策） */
.nwsp-iconrow{
  text-align:center;
  margin: 18px 0 0;
}

.nwsp-iconrow.down{
margin-top: 40px; 
margin-bottom: 20px;
}

.nwsp-ico{
  width: 48px !important;
  height: auto !important;
  display: block;
  margin: 0 auto 8px;
}
.nwsp-ico.small{
  width: 36px !important;
}
.nwsp-ico.big{
  width: 58px !important;
}
.nwsp-cap{
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--nwsp-navy);
}

/* 色指定（元のclassを尊重） */
.nwsp-iconrow .fontnavy{
  color: #44546A;
  font-weight: 600;
}
.nwsp-iconrow .fontblue{
  color: #4472C4;
  font-weight: 600;
}
.nwsp-iconrow .fontpink{
  color: #FF6699;
  font-weight: 600;
}

/* 追加メニュー注釈（←固定margin-topはやめる） */
.nwsp-note{
  font-size: 12px;
  opacity: .9;
}
.nwsp-note p{
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 1.6;
  color: #000;
}

/* 右の「追加メニュー」列だけ、注釈を最下部へ押し下げる */
.nwsp-card.is-option .nwsp-col:last-child .nwsp-note{
  margin-top: auto; /* ← これが高さ揃えに効く */
}

/* 注釈（カード下の *⑵〜*⑷） */
.nwsp-notes{
  width: 920px;
  margin: 0 auto;
}
@media (max-width: 640px){
  .nwsp-notes{
    width: 75%;
  }
}

/* 左右の .nwsp-columns の高さを揃える（PCのみ） */
@media (min-width: 641px){
  /* columns自体に同じ最低高さを持たせる */
  .nwsp-card .nwsp-columns{
    min-height: 520px;   /* ←ここを微調整（500〜560くらい） */
    align-items: stretch;
  }

  /* 各列は縦flexで、中身を自然に配置できるように */
  .nwsp-card .nwsp-col{
    display: flex;
    flex-direction: column;
  }

  /* 右の「追加メニュー」だけ、注釈を下に寄せる */
  .nwsp-card.is-option .nwsp-col:last-child .nwsp-note{
    margin-top: auto;
  }
}

/* =========================================
   NWSP 上段（必須 / 有償オプション）を左右で揃える
   ========================================= */

/* ラベル行の高さを固定して、左右の見た目を統一 */
.nwsp-toprow{
  min-height: 56px;        /* ← ここで左右を強制的に揃える */
  justify-content: flex-start; /* pillや＋を中央寄せ */
}

/* 左（必須）はpillが中央に来るだけ */
.nwsp-card.is-required .nwsp-toprow{
  gap: 0;
}

/* 右（+ 有償オプション）は見た目の間隔を一定に */
.nwsp-card.is-option .nwsp-toprow{
  gap: 14px;
}

/* + の縦位置がズレる場合に微調整（必要なら） */
.nwsp-plus{
  position: relative;
  top: 2px; /* ← 0〜4pxくらいで調整 */
}

/* タイトルの上下余白を統一（左右差が出ないように） */
.nwsp-main{
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
}



/* ワンポイントアドバイス */


.opinline_title {
	width: 100%;
	text-align: left;
}
.opinline_title .opinner_text{
	background: #DEEBF7;
	padding: 0.5rem 1rem;
	color: #5B9BD5;
	font-size: 2.2rem;
	font-weight: bold;
	display: inline-block;
	min-width: 22rem;
	text-align: center;
}

.opbg-full{
  width: 100%;
  background: #f2f4f7;   /* 画面いっぱいの背景色 */
}

.opcontent{
  max-width: 1100px;     /* 中身の最大幅 */
  margin: 0 auto;        /* 中央寄せ */
  padding: 40px 16px;    /* 左右の余白（SP対策） */
}


/* 背景を画面いっぱい */
.viewmore_blue_wrap{
  width: 100%;

}

/* 中身は中央寄せ */
.viewmore_blue_area{
  max-width: 90%;
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* IT管理者の皆様、ストレージでこんなお悩みはありませんか？ */
.onayami{
	width: 100%;
	/* background-color: #00B050; */
}



/* サポプラ3tu：ここから */
.sp3{
  width: 90%;
  margin: 0 auto;
}

.sp3-title{
  margin: 0 0 18px;
  padding: 18px 24px;
  background: #5B9BD5;     /* 画像の青帯に寄せ */
  color: #fff;
  font-weight: 800;
  font-size: 28px;
  line-height: 1.2;
}

.sp3-grid{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;                  /* 画像は隙間なし */
}

.sp3-card{
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 460px;       /* だいたいの高さ感（必要なら調整） */
  border-left: 8px solid #ffffff;
  border-right: 8px solid #ffffff;
}

.sp3-icon{
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp3-icon img{
  max-width: 120px;
  width: 60%;
  height: auto;
  display: block;
}

.nwsp-ico-large{
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nwsp-ico-large img{
  max-width: 170px;
  width: 60%;
  height: auto;
  display: block;
}

.sp3-head{
	background: #5B9BD5;
	color: #fff;
	font-weight: 800;
	font-size: 22px;
	line-height: 1.15;
	display: grid;
	min-height: 120px;
	text-align:center;
	padding:20px 0;

	align-items: center;      /* 縦中央 */
	justify-content: center;  /* 横中央 */
	text-align: center;

	
}


.sp3-head .font_adjust{
  font-size: 80%;
}

.sp3-body{
  background: #DFEAF7;     /* 薄い水色 */
  color: #000;
  font-size: 15px;
  line-height: 1.55;
  padding: 18px 18px 22px;
  flex: 1;
  border-top: 4px solid #ffffff; /* 見出し下の黒線 */
}

/* sp3：箇条書きを揃える */
.sp3-list{
  margin: 0;
  padding-left: 1.2em;          /* ●の位置（ここで揃う） */
  list-style: disc;             /* 黒丸 */
  list-style-position: outside; /* テキストの開始位置が揃う */
}

.sp3-list li{
  margin: 0.25em 0;
}


/* SP：縦積み */
@media (max-width: 640px){
  .sp3-title{
    font-size: 20px;
    padding: 14px 16px;
  }

  .sp3-grid{
    grid-template-columns: 1fr;
  }

  .sp3-card{
    min-height: auto;
    border-left: 0;
    border-right: 0;
    border-top: 10px solid #ffffff;  /* 縦積み時の区切り */
  }

  .sp3-icon{
    height: 180px;
  }

  .sp3-head{
    font-size: 22px;
  }

  .sp3-body{
    font-size: 16px;
  }
}
/* サポプラ3tu：ここまで */

/* サポプラ単体ブロック */
.sp1{
  width: 90%;
  margin: 0 auto;
}

.sp1-title{
  margin: 0 0 18px;
  padding: 18px 24px;
  background: #5B9BD5;     /* 画像の青帯に寄せ */
  color: #fff;
  font-weight: 800;
  font-size: 28px;
  line-height: 1.2;
}

.sp1-grid{
  width: 100%;
  /* display: grid; */
  grid-template-columns: repeat(3, 1fr);
  gap: 0;                  /* 画像は隙間なし */
    display: flex;
  justify-content: center; /* 横方向中央 */
}

.sp1-card{
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 460px;       /* だいたいの高さ感（必要なら調整） */
  border-left: 8px solid #ffffff;
  border-right: 8px solid #ffffff;
    width: 100%;
  max-width: 330px;
  margin: 0 auto;
}

.sp1-icon{
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp1-icon img{
  max-width: 120px;
  width: 60%;
  height: auto;
  display: block;
}

.sp1-head{
	background: #FF6699;
	color: #fff;
	font-weight: 800;
	font-size: 22px;
	line-height: 1.15;
	display: grid;
	min-height: 80px;
	text-align:center;
	padding:20px 0;

	align-items: center;      /* 縦中央 */
	justify-content: center;  /* 横中央 */
	text-align: center;	
}

.sp1-head .font_adjust{
  font-size: 80%;
}


.sp1-body{
  background: #FFEDF3;     /* 薄いPINK色 */
  color: #000;
  font-size: 15px;
  line-height: 1.55;
  padding: 18px 18px 22px;
  flex: 1;
  border-top: 4px solid #ffffff; /* 見出し下の黒線 */
}

/* sp1：箇条書きを揃える */
.sp1-list{
  margin: 0;
  padding-left: 1.2em;          /* ●の位置（ここで揃う） */
  list-style: disc;             /* 黒丸 */
  list-style-position: outside; /* テキストの開始位置が揃う */
}

.sp1-list li{
  margin: 0.25em 0;
}


/* SP：縦積み */
@media (max-width: 640px){
  .sp1-title{
    font-size: 20px;
    padding: 14px 16px;
  }

  .sp1-grid{
    grid-template-columns: 1fr;
  }

  .sp1-card{
    min-height: auto;
    border-left: 0;
    border-right: 0;
    border-top: 10px solid #ffffff;  /* 縦積み時の区切り */
	max-width: 90%;
  }

  .sp1-icon{
    height: 180px;
  }

  .sp1-head{
    font-size: 22px;
  }

  .sp1-body{
    font-size: 16px;
  }
}

/* サポプラ1tu：ここまで */

/* ネットワールド保守対象機器・サービス */

.nw-matrix-wrap{
  position: relative;
  width: 70%;
  margin: 40px auto;
}

.nw-matrix {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  margin: 40px auto;
  font-size: 16px;
}
/* 右上の注記 */
.nw-matrix-wrap .update{
  position: absolute;
  top: -22px;   /* 位置は微調整OK */
  right: 0;
  font-size: 12px;
  line-height: 1;
  color: #333;
}

.nw-matrix th,
.nw-matrix td {
  border: 1px solid #d5dbe3;
  padding: 8px 10px;
  line-height: 1.4;     /* ← 行間を詰める */
  text-align: center;
  vertical-align: middle;
}

/* 上段ヘッダ */
.nw-head {
  background: #4a5a6f;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

/* 空セル */
.nw-empty {
  background: #44546A;
  border-right: 2px solid #fff;
}

/* サブヘッダ */
.nw-subhead {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.nw-subhead.is-blue {
  background: #5fa0d8;
}

.nw-subhead.is-pink {
  background: #ff6f9c;
}

/* 左ラベル列 */
.nw-label {
  background: #ADB9CA;

  font-size: 15px;
  font-weight: 400;
  padding-left: 20px;
  width: 40%;
}

.nw-matrix .nw-label {
  text-align: left;
  border-color: #ffffff;
}


/* ○ × */
.nw-matrix td {
  font-size: 18px;
  font-weight: 600;
}

.ps-schedule__figure {
  margin: 0;
}

/* 画像は基本「はみ出さず」 */
.ps-schedule__figure img {
  display: block;
  max-width: 100%;
  height: auto;
}


/* 作業スケジュールの一例 */
/* SPだけ横スクロールにする */
@media (max-width: 640px) {
  .js-scrollable {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px; /* スクロールバーと被らないように少し余白 */
  }

  /* 画像を「一定幅以上」にして横スクロールさせる */
  .ps-schedule__figure img {
    max-width: none;
    width: 1100px; /* ここを調整：画像の見せたい横幅 */
  }
}



/* nesupp：箇条書きを揃える */
.nesupp-note-list{
  margin: 2rem;
  padding-left: 1.2em;          /* ●の位置（ここで揃う） */
  list-style: disc;             /* 黒丸 */
  list-style-position: outside; /* テキストの開始位置が揃う */
}

.nesupp-note-list li{
  margin: 0.25em 0;
}

.nesupp-note-list li .font_adjust{
  color: #FF6699;
  font-weight: 700;
}
.nesupp-note-list li a{
  color: inherit;        /* 親要素の色を使う */
  text-decoration: underline;
}

.li-sub{
  display: block;
  margin-left: 1.5em;
}

.li-sub::before{
  content: "- ";
}





/* ===== 作業内容および保守対応時間（wt3） ===== */
.wt3{
  width: 100%;
  margin: 1.5rem auto 2.5rem;
}

.wt3-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}

.wt3-card{
  background: #fff;
  border: 1px solid #d5dbe3;
  overflow: hidden;
}

/* アイコンエリアの高さを統一 */
.wt3-icon{
    height: 220px;          /* ←ここで高さを統一 */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

/* 画像サイズを統一 */
.wt3-icon img{
    max-height: 180px;      /* ←高さ基準にする */
    width: auto;
    max-width: 85%;
    object-fit: contain;
}
.wt3-head{
  color: #fff;
  font-weight: 900;
  font-size: 28px;
  text-align: center;
  padding: 16px 10px;
  letter-spacing: .02em;
}

.wt3-head.is-blue{ background: #5fa0d8; }
.wt3-head.is-pink{ background: #ff6f9c; }

.wt3-body{
  padding: 16px 16px 18px;
}

.wt3-body.is-blue{ background: #deebf7; }
.wt3-body.is-pink{ background: #ffe6f0; }

.wt3-tablewrap{
  background: rgba(255,255,255,.75);
  /* padding: 2px; */
  border: 1px solid rgba(255,255,255,.9);
  margin-bottom: 14px;
}

.wt3-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 18px;
}

.wt3-table th,
.wt3-table td{
  border: 2px solid rgba(255,255,255,.9);
  padding: 10px 10px;
  text-align: center;
  vertical-align: middle;
}

.wt3-table th{
  background: rgba(95,160,216,.35);
  color: #4472C4;
  font-weight: 900;
}

.wt3-table.is-pink th{
  background: rgba(255,111,156,.25);
  color: #ff5fa2;
}

.wt3-table td:first-child{
  background: rgba(95,160,216,.25);
  color: #4472C4;
  font-weight: 800;
  width: 45%;
}

.wt3-table.is-pink td:first-child{
  background: rgba(255,111,156,.18);
  color: #ff5fa2;
}

.wt3-small{
  font-size: 70%;
}

.wt3-list{
  margin: 0;
  padding-left: 1.6em;          /* 折り返し時もインデント維持 */
  list-style: none;
  list-style-position: outside; /* 行頭が揃う */
  line-height: 1.6;
  font-size: 18px;
}

.wt3-list li{
	position: relative;
    margin: 0.4em 0;
    line-height: 1.6;
}

/* ここが重要 */
.wt3-list li::before{
    content: "※";
    position: absolute;
    left: -1.6em;
    color: inherit;  /* 今の文字色を引き継ぐ */
    font-weight: bold;
}

.wt3-accent{
  color: #ff5fa2;
  font-weight: 900;
}

/* カード全体を縦レイアウトに */
.wt3-card{
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* bodyを均等に伸ばす */
.wt3-body{
    flex: 1;                  /* ←これが一番重要 */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;  /* ← ここを変更 */;
}


/* SP：縦積み（折り返しインデントも維持） */
@media (max-width: 640px){
  .wt3-grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .wt3-head{
    font-size: 26px;
  }

  .wt3-icon img{
    width: 78%;
  }

  .wt3-table{
    font-size: 17px;
  }

  .wt3-list{
    font-size: 17px;
  }
}







/* ===== レポート配信で役立つこと（シンプル版） ===== */

/* ===== reportaction ===== */
.reportaction{
  padding: 40px 0;
}

.reportaction-inner{
  /* max-width: 1100px; */
  margin: 0 auto;
  padding: 0 20px;
}

.reportaction-title{
  position: relative;
  margin: 0 0 22px;
  color: #ff5fa2;
  font-weight: 800;
  line-height: 1.15;
  font-size: clamp(10px, 2.2vw, 20px);
  letter-spacing: .02em;
}

/* 斜めのアクセント線（画像なしで再現） */
/* 斜めのアクセント線（画像なしで再現）※見切れない版 */
.reportaction-title{
  position: relative;
  display: inline-block;   /* タイトル幅に合わせる */
  padding: 0 110px;        /* 線を置く左右スペース */
}

/* 親で切られている可能性に備えて保険 */
.reportaction,
.reportaction-inner{
  overflow: visible;
}

.reportaction-title::before,
.reportaction-title::after{
  content: "";
  position: absolute;
  top: 50%;
  width: 70px;
  height: 3px;
  background: #ff5fa2;
  border-radius: 2px;
  opacity: .9;
  transform: translateY(50%) rotate(50deg);
}

/* 左線 */
.reportaction-title::before{
  left: 18px;   /* タイトル内側で完結させる */
}

/* 右線（向きを反転すると画像っぽくなる） */
.reportaction-title::after{
  right: 18px;
  transform: translateY(50%) rotate(-50deg);
}


.report-simple {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  margin: 0px 0;
}

/* 左側 */
.report-simple-left {
  text-align: center;
}

.report-main-img {
  max-width: 420px;
  width: 80%;
}

/* 右側カード */
.report-simple-right {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.report-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #fdecef;
  border-radius: 20px;
  padding: 20px 28px;
  min-height: 110px;
}


.report-card img {
  width: 56px;
  height: auto;
}

.report-card-title {
  font-size: 20px;
  font-weight: bold;
  color: #3a5fbf;
}

.report-icon-02 {
  transform: scale(1.3);
  transform-origin: left center;
}

/* SP */
@media (max-width: 768px) {
  .report-simple {
    grid-template-columns: 1fr;
  }

  .report-simple-left {
    order: 1;
  }

  .report-simple-right {
    order: 2;
  }
  .reportaction-title{
	font-size: 1.7rem;
  }
}

/* ===== Wellness Report サマリ ===== */

.wellness-summary{
  width: 90%;
  margin: 0 auto;
  font-family: inherit;
}

/* 上の青い帯 */
.wellness-summary__bar{
  background: #5B9BD5;
  padding: 14px 22px;
}

.wellness-summary__bar-inner{
  display: flex;
  align-items: center;
  gap: 14px;
}

.wellness-summary__badge{
  /* width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 3px solid #fff; */
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 30px;
  line-height: 1;

}

.wellness-summary__bar-title{
  color: #fff;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: .2px;
}

/* 本文背景 */
.wellness-summary__body{
  background: #DDEBF7;
  padding: 26px 0 30px;
}

.wellness-summary__inner{
  width: min(920px, 100%);
  margin: 0 auto;
  padding: 0 22px;
}

/* リード文 */
.wellness-summary__lead{
  margin: 0 0 22px;
  font-size: 2rem;
  line-height: 1.35;
  color: #000;
}

.wellness-summary__hl{
  color: #3F6FB6;
  font-size: 2rem;
  font-weight: 600;
  /* text-decoration: underline; */
  text-underline-offset: 6px;
  text-decoration-thickness: 3px;

}

/* 2×2カード */
/* 2×2カード：幅をもう少し絞って中央に */
.wellness-summary__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;

  width: min(620px, 92%);   /* ←ここが効く（max-widthより分かりやすい） */
  margin: 24px auto 0;
}



.wellness-card{
  background: #fff;
  border-radius: 22px;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 2px 0 rgba(0,0,0,.04);
}

.wellness-card__icon{
  width: 120px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.wellness-card__img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;

}

.wellness-card__img_sp{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;

}

.wellness-card__text{
  color: #3F6FB6;
  font-weight: 800;
}

.wellness-card__title{
  font-size: 18px;
  line-height: 1.05;
}

.wellness-card__sub{
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.15;
  font-weight: 800;
}

/* 個別に微調整したい場合（任意） */
.wellness-card__img.is-gear{ transform: translateY(2px) scale(1.3); }
.wellness-card__img.is-shield{ transform: translateY(2px) scale(1.03); }
.wellness-card__img.is-db{ transform: translateY(1px)scale(1.5); }
.wellness-card__img.is-ontap{ transform: translateY(1px) scale(1.02); }

/* ===== レスポンシブ ===== */
@media (max-width: 640px){
  .wellness-summary{ width: 92%; }
  .wellness-summary__bar-title{ font-size: 22px; }
  .wellness-summary__lead{ font-size: 20px; }
  .wellness-card__title{ font-size: 20px; }
  .wellness-card__sub{ font-size: 18px; }
  .wellness-card__icon{ width: 96px; height: 72px; }
  .wellness-card__img_sp{ width: 120px; }
}

@media (max-width: 640px){
  .wellness-summary__grid{ grid-template-columns: 1fr; }
}

@media screen {
	.wellness-summary__badge{
		font-size:24px;
	}
}


/* SPではみ出し防止 */
@media screen and (max-width:640px){

  .wellness-card{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  .wellness-card img{
    max-width: 100%;
    height: auto;
  }

}

/* ===== Cluster Viewer Report（上2＋下1） ===== */

/* グリッド配置：上2枚、下1枚は2列ぶち抜き */
.cluster-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "a b"
    "c c";
  gap: 18px 22px;

  /* カード群の幅を絞って中央へ（必要に応じて数値調整） */
  width: min(620px, 92%);
  margin: 24px auto 0;
}

.cluster-card--a{ grid-area: a; }
.cluster-card--b{ grid-area: b; }
.cluster-card--c{ grid-area: c; }

/* 下段（横長）のアイコン枠は少し広めに */
.cluster-icon{
  width: 120px;
  height: 90px;
}

.cluster-icon--wide{
  width: 220px;   /* 下段の絵が横に広いので枠を拡大 */
  height: 110px;
}

/* SP：1列に積む（下段も普通に1枚として並ぶ） */
@media (max-width: 640px){
  .cluster-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "a"
      "b"
      "c";
    width: 92%;
    gap: 14px;
  }

  .cluster-icon--wide{
    width: 160px;
    height: 96px;
  }
}
/* 下段カードだけ中央寄せ */
.cluster-card--c{
  flex-direction: row;      /* ← 横並びに戻す */
  justify-content: center;  /* ← 全体を中央へ */
  align-items: center;
  text-align: left;         /* ← テキストは左揃えのまま */
}

/* クラスタ全体の状態把握 */
.img-cluster-status{
  transform: scale(1.3);
}

/* ストレージ効率性の分析 */
.img-storage-analysis{
  transform: scale(1.2);
}

/* ===== サマリ03：各種OS・FWバージョン情報（修正版） ===== */

/* 説明文：今の表示に合わせて控えめに（必要なら調整） */
.wellness-summary--osfw .osfw-lead{
  margin: 0 0 22px;
  font-size: 2rem;        /* ← 44pxだとこのページではデカすぎて崩れやすい */
  line-height: 1.35;
  color: #000;
}

/* 下の2枚カード：他のブロックと同じ幅感に揃えて中央寄せ */
.wellness-summary--osfw .osfw-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* ← はみ出し防止 */
  gap: 18px 22px;

  width: min(620px, 92%);  /* ← ここが最重要（大きすぎる1320pxをやめる） */
  margin: 0 auto 10px;
}

/* カード（既存wellness-cardの見た目に寄せる） */
.wellness-summary--osfw .osfw-card{
  background: #fff;
  border-radius: 22px;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 2px 0 rgba(0,0,0,.04);
  min-height: 140px;      /* 見た目の高さを安定させる（任意） */
}

/* アイコン枠：大きすぎると回り込みの原因になるので適正化 */
.wellness-summary--osfw .osfw-icon{
  width: 120px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.wellness-summary--osfw .osfw-img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
}

/* 画像は必要なら微調整 */
.wellness-summary--osfw .osfw-img--ontap{ transform: scale(1.05); }
.wellness-summary--osfw .osfw-img--fw{ transform: scale(1.05); }

/* 文字：横に収まるサイズに */
.wellness-summary--osfw .osfw-title{
  color: #3F6FB6;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.1;
  word-break: keep-all;
}

/* SP */
@media (max-width: 640px){
  .wellness-summary--osfw .osfw-grid{
    grid-template-columns: 1fr;
    width: 92%;
    gap: 14px;
  }
}



.wellness-summary + .wellness-summary{
  margin-top: 30px;   /* ← 好みで 20〜80px 調整 */
}

/* ===== QA（完全版QA.png） ===== */

.qa3{
  width: min(1500px, 96%);
  margin: 0 auto;
}

/* 各Qブロック */
.qa3-item{
  margin: 0 0 34px;
}

/* 見出しバー */
.qa3-head{
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: center;
  background: #E9EFF6;
  border: 1px solid #D7DEE8;
}

/* ← height削除 */
.qa3-qno{
  background: #63A8FF;
  color: #fff;
  font-weight: 800;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 0;   /* ← 高さ調整はここ */
}

.qa3-title{
  color: #3F6FB6;
  font-weight: 800;
  font-size: 18px;
  padding: 5px 20px;  /* ← ここで高さ微調整 */
}


/* 本文（白背景） */
.qa3-body{
  background: #fff;
  padding: 18px 0 0;
}

.qa3-text{
  margin: 0;
  padding: 0 10px;
  font-size: 2rem;
  line-height: 1.6;
  color: #000;
}

.qa3-pink{
  color: #FF5AAE;
  font-weight: 800;
}

/* 例ブロック（中央寄せ） */
.qa3-example{
  margin-top: 18px;
  padding: 26px 0 0;
}

.qa3-example-text{
  width: min(1100px, 92%);
  margin: 0 auto;
  color: #55657A;
  font-weight: 800;
  line-height: 1.35;
}

.qa3-ex1{ font-size: 1.8rem; margin-bottom: 6px; }
.qa3-ex2{ font-size: 1.8rem; }
.qa3-ex3{ font-size: 1.8rem; margin-top: 2px; }

.qa3-blue{
  color: #63A8FF;
}

/* ボタン2つ（丸いグレー） */
.qa3-pill-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  width: min(980px, 92%);
  margin: 18px auto 24px;
}

.qa3-pill{
  background: #D7DFE8;
  color: #4D5B6E;
  font-weight: 800;
  font-size: 2rem;
  text-align: center;
  padding: 16px 12px;
  border-radius: 999px;
}

/* 図2つ */
.qa3-diagram-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  width: min(1200px, 96%);
  margin: 0 auto 6px;
}

.qa3-diagram{ margin: 0; }
.qa3-diagram-img{
  width: 100%;
  height: auto;
  display: block;
}

/* ===== レスポンシブ ===== */
@media (max-width: 900px){
  .qa3-head{ grid-template-columns: 90px 1fr; }
  .qa3-qno{ height: 62px; font-size: 26px; }
  .qa3-title{ font-size: 22px; }
  .qa3-text{ font-size: 16px; }
  .qa3-ex1{ font-size: 18px; }
  .qa3-ex2, .qa3-ex3{ font-size: 16px; }
  .qa3-pill{ font-size: 18px; }
}

@media (max-width: 640px){
  .qa3-pill-row{ grid-template-columns: 1fr; }
  .qa3-diagram-row{ grid-template-columns: 1fr; }
}

/* PCではSP用ボタンを非表示 */
.qa3-pill--sp-under{
  display: none;
}

@media (max-width: 640px){
  /* 既存の2個目ボタンをSPでは消す（qa3-pill-rowはgridです :contentReference[oaicite:3]{index=3}） */
  .qa3-pill-row .qa3-pill:nth-child(2){
    display: none !important;
  }

  /* 画像下のSP用ボタンを表示 */
  .qa3-pill--sp-under{
    display: block !important;
    margin: 14px auto 0;
    width: 92%;
    box-sizing: border-box;
  }
}