@import url('sub.css'); 



.brand_subtop {padding:120px 0; position:relative; background:url('/brand/img/brand_subtop.jpg')no-repeat center / cover; overflow:visible;}
.brand_subtop .subtop_tit {margin:0 0 60px; text-align:center}
.brand_subtop .subtop_tit .fs100 {}
.brand_subtop .subtop_tit .fs100 .fs40 {display:block; color:var(--sub2); margin:0 0 30px; line-height: 100%;}
.brand_subtop .subtop_tit .fs24 {font-weight: 400; color: var(--black); margin:25px 0 0;}

.brand_diagram_wrap {width:600px; margin:223px auto 0; position:relative;}
.brand_diagram_wrap::before {content:''; width:100%; aspect-ratio: 600 / 541; background:url('/brand/img/brand_diagram.png')no-repeat center / 100% auto; display:block; position:relative;}

.brand_diagram_wrap .dia_items {position:absolute;}
.brand_diagram_wrap .dia_items dl {}
.brand_diagram_wrap .dia_items dl dt {position:absolute;}
.brand_diagram_wrap .dia_items dl dd {color: var(--white); font-family:var(--blackHan); display:inline-flex; align-items:center; gap:5px;}
.brand_diagram_wrap .dia_items dl dd .num {leading-trim: both; text-edge: cap; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: var(--white); font-family: inherit; color:transparent; font-weight:400; line-height:inherit; letter-spacing:inherit; position:relative; top:-1px;}
.brand_diagram_wrap .dia_items .tBox {position:absolute;}
.brand_diagram_wrap .dia_items .tBox * {white-space:nowrap;}
.brand_diagram_wrap .dia_items .tBox .fs30 {font-family:var(--blackHan); font-weight:400; line-height:1;}
.brand_diagram_wrap .dia_items .tBox .fs18 {margin:15px 0 0;}


.brand_diagram_wrap .dia_items.step1 {top:0; left:50%; transform:translateX(-50%); text-align:center;}
.brand_diagram_wrap .dia_items.step1 dl dt {top:234px; right:-88px;}
.brand_diagram_wrap .dia_items.step1 dl dd {padding:117px 0 0; box-sizing:border-box;}
.brand_diagram_wrap .dia_items.step1 .tBox {top:-30px; left:50%; transform:translate(-50%,-100%); }

.brand_diagram_wrap .dia_items.step2 {bottom:0; left:0; text-align:right;}
.brand_diagram_wrap .dia_items.step2 dl dt {top:-198px; right:-56px;}
.brand_diagram_wrap .dia_items.step2 dl dd {padding:0 0 72px 55px; box-sizing:border-box;}
.brand_diagram_wrap .dia_items.step2 .tBox {bottom:50px; left:-60px; transform:translate(-100%,0); }

.brand_diagram_wrap .dia_items.step3 {bottom:0; right:0; text-align:left;}
.brand_diagram_wrap .dia_items.step3 dl dt {bottom:45px; left:-143px;}
.brand_diagram_wrap .dia_items.step3 dl dd {padding:0 40px 72px 0; box-sizing:border-box;}
.brand_diagram_wrap .dia_items.step3 .tBox {bottom:50px; right:-60px; transform:translate(100%,0); }

.layout_fixed {display:flex; flex-wrap:wrap; align-items:flex-start; gap:0 50px; justify-content:space-between;}
.layout_fixed .tit_Box {width:465px; flex-shrink: 0; position:sticky; top:150px;}
.layout_fixed .tit_Box .fs16 {display:block; font-family: var(--blackHan); color: var(--main); margin:0 0 15px; letter-spacing:0; line-height:1;}
.layout_fixed .tit_Box .fs24 {font-weight: 600; margin:40px 0 15px;}
.layout_fixed .value_list {flex:1; max-width:910px;}
.layout_fixed .value_list .items {display:flex; flex-wrap:wrap;}
.layout_fixed .value_list .items+.items {margin:20px 0 0;}
.layout_fixed .value_list .items .box {position:relative; flex:1; border-radius:var(--borderR20); padding:60px 80px; box-sizing:border-box; background: var(--grayBg); }
.layout_fixed .value_list .items .box dl {display:flex; flex-wrap:wrap; align-items:center; gap:20px 40px; }
.layout_fixed .value_list .items .box dl dt {flex-shrink: 0;}
.layout_fixed .value_list .items .box dl dd {flex:1;}
.layout_fixed .value_list .items .box dl dd .fs40 {position:relative; line-height:1; z-index:10; display:inline-block;}
.layout_fixed .value_list .items .box dl dd .fs40::after {content:''; width:100%; height:12px; background:var(--sub); position:absolute; bottom:3px; left:0; opacity:0.3; z-index:-1;}
.layout_fixed .value_list .items .box dl dd .fs18 {margin:15px 0 20px;}
.layout_fixed .value_list .items .box dl dd .fs20 {margin:0 0 5px;}
.layout_fixed .value_list .items .box dl dd .check_list li {padding-left:26px; box-sizing:border-box; position:relative;}
.layout_fixed .value_list .items .box dl dd .check_list li+li {margin:3px 0 0;}
.layout_fixed .value_list .items .box dl dd .check_list li::before{content:""; width:18px;  aspect-ratio: 1 / 1; flex-shrink:0; background:url('/almond/img/check_sub.svg') center/contain no-repeat;   position: absolute; top: 5px; left:0;}

.layout_fixed .value_list .items .i_tit {width:180px; border-radius:var(--borderR20); background:var(--sub); position:relative;}
.layout_fixed .value_list .items .i_tit::after {content:''; width:60px; aspect-ratio: 1 / 1; border-radius:100%; background:var(--white); position:absolute; top:50%;right:0; transform:translate(50%,-50%);}
.layout_fixed .value_list .items .i_tit .fs24 {color:var(--white); font-family:var(--blackHan); display:inline-flex; align-items:center; gap:10px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%) rotate(-90deg); letter-spacing:0;}
.layout_fixed .value_list .items .i_tit .fs24 .num {leading-trim:both; text-edge:cap; -webkit-text-stroke-width:1px; -webkit-text-stroke-color:var(--white); font-family:inherit; color:transparent; font-weight:400; line-height:inherit; letter-spacing:inherit; position:relative; top:-1px; opacity:0.3;}

.layout_fixed .value_list .items .box::after {content:""; position:absolute; width:calc(100% - 100px); height:50px; background: url('/almond/img/ring_v.svg') left top / 43px 50px round no-repeat; pointer-events:none; position:absolute; bottom:-35px; left:50px; z-index: 99;}
.layout_fixed .value_list .items:last-of-type .box::after {display:none;}



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

.brand_diagram_wrap .dia_items .tBox br {display:none;}
.brand_diagram_wrap .dia_items .tBox * {white-space:normal;}
.brand_diagram_wrap .dia_items.step1 .tBox {width:55vw;}

.brand_diagram_wrap .dia_items.step2 .tBox, .brand_diagram_wrap .dia_items.step3 .tBox {width:calc(22vw - 60px);}

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


.layout_fixed .value_list .items .box {padding:40px 50px;}
.layout_fixed .value_list .items .box dl {}
.layout_fixed .value_list .items .box dl dd {flex:none; width:100%;}


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


.brand_diagram_wrap {width:460px;}

.brand_diagram_wrap .dia_items.step1 .tBox {width:70vw;}
.brand_diagram_wrap .dia_items.step2 .tBox, .brand_diagram_wrap .dia_items.step3 .tBox {width:calc(25vw - 40px);}
.brand_diagram_wrap .dia_items.step2 .tBox {left:-30px;}
.brand_diagram_wrap .dia_items.step3 .tBox {right:-30px;}

.brand_diagram_wrap .dia_items.step1 dl dt {top:170px; right:-64px;}
.brand_diagram_wrap .dia_items.step2 dl dt {top:-168px; right:-38px;}
.brand_diagram_wrap .dia_items.step3 dl dt {bottom:29px; left:-100px;}

.brand_diagram_wrap .dia_items.step1 dl dd {padding:78px 0 0;}
.brand_diagram_wrap .dia_items.step2 dl dd {padding: 0 0 38px 29px;}
.brand_diagram_wrap .dia_items.step3 dl dd {padding:0px 14px 38px 0;}

.brand_diagram_wrap .dia_items .tBox .fs30 {font-size:1.44rem;}
.brand_diagram_wrap .dia_items .tBox .fs18 {font-size:0.888rem; margin:10px 0 0;}


.layout_fixed .tit_Box {width:300px;}
.layout_fixed .tit_Box br {display:none;}





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


.brand_diagram_wrap {width:100%; margin:0; display:flex; flex-direction:column; gap:20px;}
.brand_diagram_wrap::before {background:url("/brand/img/brand_diagram_m.png")no-repeat center / 100% auto;  max-width:500px; margin:0 auto;}
.brand_diagram_wrap::after {content:''; width:56px; aspect-ratio: 56 / 89; background:url("/brand/img/brand_dia_character.png")no-repeat center / 100% auto; position:absolute; top:-85px; right:15px; display:none;}
.brand_diagram_wrap .dia_items, .brand_diagram_wrap .dia_items dl dt, .brand_diagram_wrap .dia_items .tBox {position:static !important; transform:none !important; top:auto !important; right:auto !important; bottom:auto !important; left:auto !important;}
.brand_diagram_wrap .dia_items {text-align:left !important; background:var(--white); padding:30px 25px; box-sizing:border-box; border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,0.06); margin:0; width:100%;}
.brand_diagram_wrap .dia_items.step1 {border-top:5px solid var(--sub);}
.brand_diagram_wrap .dia_items.step2 {border-top:5px solid var(--main2);}
.brand_diagram_wrap .dia_items.step3 {border-top:5px solid var(--sub);}
.brand_diagram_wrap .dia_items dl {display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; display:none;}
.brand_diagram_wrap .dia_items dl dt {order:2;}
.brand_diagram_wrap .dia_items dl dt img {width:55px;}
.brand_diagram_wrap .dia_items dl dd {font-size:1.333rem; order:1; color:#333;}
.brand_diagram_wrap .dia_items dl dd .num {-webkit-text-stroke-color:#333;}
.brand_diagram_wrap .dia_items .tBox {width:100%; margin-top:0;}
.brand_diagram_wrap .dia_items .tBox * {white-space:normal; word-break:keep-all;}
.brand_diagram_wrap .dia_items .tBox .fs30 {font-size:20px !important; margin:0 0 15px !important; padding-bottom:12px; border-bottom:1px solid #f0f0f0; display:block;}
.brand_diagram_wrap .dia_items.step1 .tBox .fs30, .brand_diagram_wrap .dia_items.step3 .tBox .fs30 {color:var(--sub);}
.brand_diagram_wrap .dia_items.step2 .tBox .fs30 {color:var(--main2);}
.brand_diagram_wrap .dia_items.step1 .tBox .fs30::before {content:'01. ';}
.brand_diagram_wrap .dia_items.step2 .tBox .fs30::before {content:'02. ';}
.brand_diagram_wrap .dia_items.step3 .tBox .fs30::before {content:'03. ';}
.brand_diagram_wrap .dia_items .tBox .fs18 {font-size:1rem; margin:0; color:#555; line-height:1.6;}
.brand_diagram_wrap .dia_items.step2 .tBox, .brand_diagram_wrap .dia_items.step3 .tBox {width:100% !important;}
.brand_diagram_wrap .dia_items.step1 .tBox {width:100% !important;}


.layout_fixed {display:flex; flex-wrap:wrap; align-items:flex-start; gap:50px; justify-content:space-between;}
.layout_fixed .tit_Box {width:100%; flex-shrink: 0; position:relative; top:0;}

.layout_fixed .value_list {flex:none; width:100%; max-width:100%;}
.layout_fixed .value_list .items .i_tit {width:120px;}
.layout_fixed .value_list .items .box dl dt img {width:50px;}

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

.brand_subtop {padding:60px 0;}
.brand_subtop .subtop_tit {margin:0 0 50px;}
.brand_subtop .subtop_tit .fs100 .fs40 {margin:0 0 15px;}
.brand_subtop .subtop_tit .fs24 {margin:15px 0 0;}

/* .brand_diagram_wrap::after {content:''; width:38px; top:-55px; right:10px;}
.brand_diagram_wrap .dia_items+.dia_items {margin:10px 0 0;}
.brand_diagram_wrap .dia_items {padding:20px;}
.brand_diagram_wrap .dia_items dl dt img {width:40px;} */
.brand_diagram_wrap .dia_items {padding:20px 15px;}

.layout_fixed .tit_Box .fs24 {margin:20px 0 10px;}

.layout_fixed {gap:30px;}
.layout_fixed .value_list {flex:none; width:100%; max-width:100%;}
.layout_fixed .value_list .items+.items {margin:10px 0 0;}
.layout_fixed .value_list .items .box {padding: 30px 20px;}
.layout_fixed .value_list .items .box::after {width:calc(100% - 40px); height:30px; background: url('/almond/img/ring_v.svg') left top / 30px 30px round no-repeat; pointer-events:none; position:absolute; bottom:-19px; left:20px; z-index: 99;}
.layout_fixed .value_list .items .box dl dt img {width:40px;}

.layout_fixed .value_list .items .i_tit {width:80px;}
.layout_fixed .value_list .items .i_tit::after {width:30px;}

.layout_fixed .value_list .items .box dl dt {display:none;}
.layout_fixed .value_list .items .box dl dd .fs18 {margin:10px 0 15px;}
.layout_fixed .value_list .items .box dl dd .check_list li {padding-left:22px;}
.layout_fixed .value_list .items .box dl dd .check_list li::before {width:15px; top:3px; }

}