@charset "utf-8";

/*diagram_1*/
.diagram_1{display:flex;justify-content:space-between;}
.diagram_1 .gup_1,
.diagram_1 .gup_2{display:flex;justify-content:space-between;position:relative;}
.diagram_1 .gup_2{margin-top:1rem;}
.diagram_1 .item{}
.diagram_1 dl{display:flex;border-bottom:1px solid #FFF;border-top:1px solid #FFF;}
.diagram_1 dt{width:20rem;}
.diagram_1 dd{width:calc(100% - 20rem);}

.diagram_1 h3,
.diagram_1 h4,
.diagram_1 dt,
.diagram_1 dd{line-height:1.3;padding:3rem;display:flex;justify-content:center;align-items:center;text-align:center;position:relative;}
.diagram_1 dd{justify-content:flex-start;text-align:left;}
.diagram_1 h3{font-size:2.5rem;font-family:'sm';color:#FFF;background:#005b94;}
.diagram_1 h4{font-size:2rem;font-family:'sm';color:#FFF;background:#01a9e7;}
.diagram_1 dt{font-size:1.8rem;font-family:'sl';color:#FFF;background:#00ccff;}
.diagram_1 dd{font-size:1.8rem;font-family:'sl';color:#222;background:#f5f5f5;}

.diagram_1 h3{width:13rem;}
.diagram_1 .gup{width:calc(100% - 23rem);}
.diagram_1 h4{width:13rem;}
.diagram_1 .item{width:calc(100% - 18rem);}

.diagram_1 h3::before{content:"";display:block;width:20rem;height:20rem;border-top:2px solid #005b94;border-left:2px solid #005b94;position:absolute;left:16.5rem;top:calc(50% - 10rem);transform:rotate(-45deg);}
.diagram_1 .gup_1::before,
.diagram_1 .gup_2::before{content:"";display:block;width:10rem;height:10rem;border-top:2px solid #01a9e7;border-left:2px solid #01a9e7;position:absolute;left:14.5rem;top:calc(50% - 5rem);transform:rotate(-45deg);}

@media only screen and (max-width:1280px){
  .diagram_1,
  .diagram_1 .gup_1,
  .diagram_1 .gup_2{display:block;}

  .diagram_1 h3,
  .diagram_1 .gup,
  .diagram_1 h4,
  .diagram_1 .item{width:100%;}
  .diagram_1 .gup_2{margin-top:3rem;}

  .diagram_1 h3::before,
  .diagram_1 .gup_1::before,
  .diagram_1 .gup_2::before{display:none;}
  .diagram_1 .gup::before{content:"";display:block;width:0.2rem;height:2rem;background:#005b94;margin:0 auto;}
  .diagram_1 .item::before{content:"";display:block;width:0.2rem;height:2rem;background:#01a9e7;margin:0 auto;}
}
@media only screen and (max-width:768px){
  .diagram_1 dl{display:block;border-bottom-width:5px;border-top:0;}
  .diagram_1 dt,
  .diagram_1 dd{width:100%;}
  .diagram_1 h3,
  .diagram_1 h4,
  .diagram_1 dt,
  .diagram_1 dd{padding:2rem;}

  .diagram_1 dd{justify-content:center;text-align:center;}
  .diagram_1 h3{font-size:2rem;}
  .diagram_1 h4{font-size:1.8rem;}
  .diagram_1 dt{font-size:1.6rem;}
  .diagram_1 dd{font-size:1.5rem;}
}