@import url('sub.css'); 


.layout_table {display:flex; flex-wrap:nowrap;}
.layout_table+.layout_table {margin:100px 0 0;}
.layout_table .tab_tit {width:405px; flex-shrink: 0;}
.layout_table .fs40 {position: sticky; top:150px; left: 0;}
.layout_table .tab_cont {flex:1;}
.layout_table .tab_cont .grayBox {background:var(--grayBg); padding:30px; box-sizing:border-box;}
.layout_table .tab_cont .grayBox .fs20 {margin:20px 0 4px;}
.layout_table .tab_cont .grayBox .fs20:first-of-type {margin-top:0;}
.layout_table .tab_cont .grayBox .fs18+.fs18 {margin:4px 0 0;}
.layout_table .tab_cont .grayBox .num {counter-increment: item; padding-left:22px; box-sizing:border-box; position:relative;}
.layout_table .tab_cont .grayBox .num::before {content: counter(item); width:14px; aspect-ratio: 1 / 1; border:1px solid var(--basic); box-sizing:border-box; display:block; border-radius:100%; line-height:12px; font-size:10px; text-align:center; font-weight:bold; color:var(--basic); position:absolute; left:0; top:7px;}


.layout_table .tab_cont .borderBox {border:1px solid var(--border); padding:50px; box-sizing:border-box;}
.dia_box {max-width:650px; aspect-ratio: 650 / 628; width:100%; margin:0 auto;}
.dia_box ul {width:100%; height:100%; position:relative;}
.dia_box ul::after {content:''; width:38%; max-width:236px; aspect-ratio: 1 / 1;  background:url("/excellent/img/dia_logo.png")no-repeat center / 100% auto;  position:absolute; top:53%; left:50%; transform:translate(-50%,-50%);}
.dia_box ul li {position:absolute; max-width:256px; width:40%; aspect-ratio: 1 / 1; border-radius:100%; mix-blend-mode: multiply; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align:center;}
.dia_box ul li .fs18 {color:var(--white); font-weight: 600;}
.dia_box ul li .fs18::before {content:''; width:40px; aspect-ratio: 1 / 1;  background:url("/excellent/img/check_ico.svg")no-repeat center / 100% auto; display:block; position:relative; margin:0 auto 15px;}

.dia_box ul li.one {background:#20A8AA; top:0; left:50%; transform:translateX(-50%);}
.dia_box ul li.two {background:#03A6B8;  right:0; top:42%; transform:translateY(-50%);}
.dia_box ul li.three {background:#037FB8; bottom:2%; left:48%;}
.dia_box ul li.four {background:#033CB8; bottom:2%; right:48%;}
.dia_box ul li.five {background:var(--main); left:0; top:42%; transform:translateY(-50%);}



.purchase_list {}
.purchase_list dl {display:flex; flex-wrap:wrap; align-items:center; gap:0 50px; counter-increment: item2; }
.purchase_list dl+dl {margin:30px 0 0;}
.purchase_list dl dt {max-width:510px; width:44%; flex-shrink: 0; position:relative;}
.purchase_list dl dt img {width:100%;}
.purchase_list dl dt::after {content:''; width:100%; height:100%; border:1px solid var(--border); box-sizing:border-box; position:absolute; top:0; left:0;}
.purchase_list dl dd {flex:1;}
.purchase_list dl dd::before {content: counter(item2); width:30px; line-height:30px; aspect-ratio: 1 / 1; box-sizing:border-box; display:block; border-radius:100%; font-size:0.888rem; text-align:center; font-weight:bold; color:var(--white); background:var(--main); border-radius:100%;  font-weight: 700; font-family:var(--eng); margin:0 0 10px;}




/*******************************************************************************
	@media ~1500px
*******************************************************************************/
@media all and (max-width:1500px) { 


}
/*******************************************************************************
	@media ~1300px
*******************************************************************************/
@media all and (max-width:1300px) { 

.layout_table .tab_tit {width:300px;}

.purchase_list dl {gap:0 4%;}
.purchase_list dl br {display:none;}

}
/*******************************************************************************
	@media 769~980px
*******************************************************************************/
@media all and (max-width:980px) { 

.layout_table {flex-wrap:wrap;}
.layout_table .tab_tit {width:100%; margin:0 0 35px;}
.layout_table .tab_tit br {display:none;}
.layout_table .fs40 {position: relative; top:0 !important; left: 0;}
.layout_table .tab_cont {flex:none; width:100%;}


.layout_table .tab_cont .borderBox {padding:30px;}
.dia_box ul::after {width:35%;}
.dia_box ul li .fs18 {font-size:2.2vw;}
.dia_box ul li .fs18::before {width:4.5vw; margin:0 auto 2vw;}

}
/*******************************************************************************
	@media 481~680px
*******************************************************************************/
@media all and (max-width:680px) { 

.layout_table+.layout_table {margin:50px 0 0;}
.layout_table .tab_tit {width:100%; margin:0 0 20px;}
.layout_table .tab_cont .grayBox {padding:15px;}
.layout_table .tab_cont .grayBox .num::before {top:5px;}
.layout_table .tab_cont .grayBox .fs20 {margin:10px 0 4px;}


.purchase_list dl dt {max-width:100%; width:100%; margin:0 0 20px;}
.purchase_list dl dd {display:flex; align-items:flex-start; flex-wrap:wrap; gap:0 10px; flex:none; width:100%; }
.purchase_list dl dd::before {flex-shrink: 0; margin:0; width:24px; line-height:24px;}
.purchase_list dl dd .fs20 {flex:1;}

.layout_table .tab_cont .borderBox {padding:15px;}
.dia_box ul li .fs18 {font-size:2.6vw;}
}