@charset "UTF-8";

#impact-process{ display:block; margin: 4rem auto 0 auto; text-align:center;}
.box-01{ border: 1px rgba(44,74,130,1.00) solid; padding: 2rem; }
.box-01 p{ line-height: 1.7; }
.box-flex{ display: flex; flex-wrap: wrap; justify-content:space-between; align-items: center; }
.box-flex-item {text-align: center; margin:auto; min-width:45%;}

.d_grid_itemcenter {justify-items: center;}
.padding-lr1{padding-right:1em;padding-left:1rem} 
.padding-lr2{padding-right:2em;padding-left:2rem}

.scene{
 position:relative ; 
}
.scene p{
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 5em;
  height: 2.5em;
  color: #fff;
  padding: 2em auto 0 auto;
 border : 1px solid #555;
 background: #555;
 z-index: 80;
}
.scene .scene01{
 position: absolute;
  bottom: -1.75rem;
  left: 16%;
}
.scene .scene02{
 position: absolute;
  bottom: -1.75rem;
  right: 6%;
}
.scene .scene03{
 position: absolute;
 bottom: -2.2rem;
  right: 8%;
}
.process-step{ display: flex; width:100%; padding-right: 2%; overflow:hidden;}
.process-step h3{  background: #01c;
  padding: 1em 0.5em 1em 2em;
  color: #fff;
  width: 25%;
}
.process-step01,.process-step02,.process-step03,.process-step04{
  display: block;
  position:relative;
  width: 25%;
  padding: 0 0 1.8em 0;
}
.process-step01 h3 + p,.process-step02 h3 + p,.process-step03 h3 + p,.process-step04 h3 + p{
  background: #d9f0f7;
  padding: .7rem 1rem .9rem 1rem;
  width: 96%;
  font-size: .9rem;
  margin: 0 auto 0 auto;
  z-index: 60;
  text-align: left;
  min-height: 70px;
}
.process-step01 h3,.process-step02 h3,.process-step03 h3,.process-step04 h3{
  background: #01c;
  padding: 1em 1.5em 1em 1em;
  color: #fff;
  width: 100%;
  text-align: center;
  display: block;
  position:relative;
}
.process-step01:before,
.process-step02:before,
.process-step03:before,
.process-step04:before{
        content: "";
        position: absolute;
        top: -10px;
        right: -29px;
        border-top: 37px solid transparent;
        border-left: 37px solid #fff;
        border-bottom: 37px solid transparent;
        z-index: 41;
}
.process-step01:after,
.process-step02:after,
.process-step03:after,
.process-step04:after {
        content: "";
        position: absolute;
        top: -1.9px;
        right: -20px;
        border-top: 30px solid transparent;
        border-left: 30px solid #01c;
        border-bottom: 30px solid transparent;
        z-index: 51;
}
.speechBubble-01 {
  position: relative;
  display: block;
/*  width: 320px; */
  margin-top: 40px;
  padding: 12px 20px 12px 24px;
  border-radius: 4px;
  background-color: #A7D6ED;
  text-align: center;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.5;
  color: #000000;
}
.speechBubble-01:after {
  content: "";
  position: absolute;
  top: 0;
  left: 30%;
  border-style: solid;
  border-width: 0 22.5px 46px 22.5px;
  border-color: transparent transparent  #A7D6ED; /*#dedede*/
  translate: -50% -100%;
  transform: skew(4deg);
  transform-origin: bottom;
}
.speechBubble-02 {
  position: relative;
  display: block;
  width: 350px;
  margin-top: 40px;
  padding: 12px 20px 12px 24px;
  border-radius: 4px;
  background-color: #A7D6ED;
  text-align: center;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.5;
  color: #000000;
}
.speechBubble-02:after {
  content: "";
  position: absolute;
  top: 0;
  left: 30%;
  border-style: solid;
  border-width: 0 22.5px 46px 22.5px;
  border-color: transparent transparent #A7D6ED;
  translate: -50% -100%;
  transform: skew(80deg);
  transform-origin: bottom;
}
.speechBubble-03 {
  position: relative;
  display: block;
/*  width: 320px; */
  margin-top: 40px;
  padding: 12px 20px 12px 24px;
  border-radius: 4px;
  background-color: #A7D6ED;
  text-align: center;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.5;
  color: #000000;
}
.speechBubble-03:after {
  content: "";
  position: absolute;
  top: 0;
  left: 30%;
  border-style: solid;
  border-width:15px 15px 71px 18px;
  border-color: transparent transparent #A7D6ED;
  translate: -50% -100%;
  transform: skew(25deg);
  transform-origin: bottom;
  z-index: 100;
}
.identifying-stage{ 
  display:flex;
  justify-content: space-between;
  width: 98%;
  margin-top: -1.8rem;
  gap:10px;
  }
.identifying-stage-01,
.identifying-stage-02,
.identifying-stage-03{
  display:block;
  position: relative;
  text-align: center;
}
.identifying-nextstage{
  display:block;
  position: relative;
  margin: 8px auto;
}
.identifying-stage-02 .identifying-nextstage{ margin: 8px 20px auto 20px;}
.identifying-nextstage p{ font-size: .85rem;}
.arrow-blue{
  display: inline-block;
  width: 36.8px;
  height: 45px;
  background: #0011cc;
  clip-path: polygon(0 59.1%, 28.2% 59.1%, 28.2% 0, 71.8% 0, 71.8% 59.1%, 100% 59.1%, 50% 100%);
  vertical-align:top;
  font-size: 1px; color:#0011cc; text-indent:-9999px;
}
.arrow-orange {
  display: inline-block;
  width: 36.8px;
  height: 45px;
  background: #ff5300;
  clip-path: polygon(0 59.1%, 28.2% 59.1%, 28.2% 0, 71.8% 0, 71.8% 59.1%, 100% 59.1%, 50% 100%);
  vertical-align:top;
  font-size: 1px; color:#ff5300; text-indent:-9999px;
}
.identifying-stage-02 .identifying-nextstage.arrow-blue{ margin-left:50px; margin-right:100px;}
.identifying-stage-02 .identifying-nextstage.arrow-orange { margin-left:80px; margin-right:0;}
.flex-box{ 
  display:flex;
  justify-content: space-between;
  width: 100%;
  gap:10px;
  }
.flex-box-item{
 display:inline-block;
}
#impactstep-03{ width: 95%; margin:0 4% 0 auto;}
#impactstep-03 h3{
  font-weight: bold;
}
#impactstep-03 h4 a:hover{
 background: #ebeeff; text-decoration:underline; color:#018; transition:.2s;
}
.care-service-example .care-service-title{
    background-color: #666;
    color: #fff;
    padding: 12px;
    display: block;
    max-width: 12em;
    text-align: left;
    margin: 0 auto 10px 0;
}
.care-service-example .grid {
   display: grid; 
/*   grid-template-columns: .2fr 1.5fr 0.8fr 0.8fr 1.6fr; */
   grid-template-columns: 0fr 1.5fr 0.8fr 0.8fr 1.6fr;
   grid-template-rows: auto auto auto;
  column-gap: 10px;
  row-gap: 10px;
}
.grid-child {
    padding: 15px;
    margin: 3px;
	position: relative;
    text-align: left;
}
.grid-child.service-01 {
    background-color: #666;  
    grid-column: 1; 
    grid-row: 1/4; 
    color:  #fff;
    padding: 5px;
   writing-mode: vertical-rl;
    vertical-align: middle;
    text-align: center;
}
.grid-child.service-02 {
    background-color:  #d9f0f7;  
    grid-column: 2; 
    grid-row: 1/3;
}
.grid-child.service-03 {
    background-color:  #d9f0f7; 
    grid-column: 3/5; 
    grid-row: 1;
}
.grid-child.service-04 {
    background-color:  #d9f0f7;
    grid-column: 5; 
    grid-row: 1;
}
.grid-child.service-05 {
    background-color:  #d9f0f7;
    grid-column: 3/6; 
    grid-row: 2;
}
.grid-child.service-06 {
    background-color: #f4f5f5;
    grid-column: 2/4; 
    grid-row: 3;
    border: solid 2px #0011cc;
    border-radius: 6px; 
}
.grid-child.service-07 {
    background-color: #f4f5f5;
    grid-column: 4/6; 
    grid-row: 3;
    border: solid 2px #ff5300; 
    border-radius: 6px; 
}
.grid-child h3{
    font-size: 1.1rem;
    font-weight: bold;
    padding: 10px;
}
.grid-child h4{
    font-size: 1rem;
    font-weight: bold;
}
.grid-child p{
    font-size:.9rem;
    margin: .25em .5em .5em 1em; 
}
.care-service-example-hikaku{
  display:block;
  color: #e10000;
  position: absolute;
  font-size: .98rem;
/*  bottom: -25px; */
    bottom: 14px;
/*  right: 2em; */
    right: .5em;
}
#process-step-img{
  display: none;
}

@media screen and (max-width: 720px) {
   .speechBubble-02{
    width: auto;
    }
	.grid-child {
	padding: 12px 4px;
    }
 }
@media screen and (max-width: 480px) {
    .box-01 {
      padding: 1.5rem;
     }
    .process-step h3{
      font-size: 1rem;
      padding: .25em .4em .25em .25em;
      width: 100%;
     }
/*    .process-step {
      display:block;
     }
    .process-step01:before,
    .process-step02:before,
    .process-step03:before,
    .process-step04:before,
    .process-step01:after,
    .process-step02:after,
    .process-step03:after,
    .process-step04:after,
    .speechBubble-01:after,
    .speechBubble-02:after,
    .speechBubble-03:after{
      display:none;
     }
   .process-step01, .process-step02, .process-step03, .process-step04 {
    width: 100%;
    padding: 0 0 1.8em 0;
    }
   .identifying-stage {
    display: block;
    }
   .scene{
    display: block;
    text-align: center;
    margin-bottom: 2rem;
    }
   .scene .scene01, .scene .scene03 {
    margin: auto;
    }
   .scene .scene02{
    bottom: 0rem;
    }
   .speechBubble-01, .speechBubble-02, .speechBubble-03,
   .process-step01 h3 + p, .process-step02 h3 + p, .process-step03 h3 + p, .process-step04 h3 + p{
    width: 100%;
    }
*/
   .care-service-example .grid {
    display: block;
    }
   .grid-child.service-01{
    writing-mode:horizontal-tb ;
    }
   .grid-child {
    padding: 10px 5px;
    margin: 14px auto;
    position: relative;
    }
   .care-service-example-hikaku {
/*    top: -1.4rem; */
    top: 5.3rem;
    }
   #impactstep-03 .padding-lr1, #impactstep-03 .padding-lr2 {
    padding-right: .5em;
    padding-left: .2rem;
   }
   #impactstep-03 .link_doc:before, #impactstep-03 .link_doc:before {
    display: none;
    }
 }
/* for Process img */
@media screen and (max-width: 1020px) {
   #impactstep-01,#impactstep-02{
    display: none;
    }
   #process-step-img{
    display: block;
    }
 }
 

/* TablePage Base  */
.database-guide-table{ width:100%; margin:auto;}
.database-guide-table table{ width:100%; margin:auto;/* border: #ccc 3px solid */}
.database-guide-table table td,
.database-guide-table table th{ border-left: #fff 3px solid; border-bottom: #fff 3px solid; padding:8px; line-height:1.35;}
.database-guide-table table tr:last-of-type th,
.database-guide-table tr:last-of-type td{ border-bottom: none;}
.database-name{ font-size:1.05rem; width:25%; text-align:left;}
.database-publisher{ width:8em;}
.database-scene02-03 .database-publisher{ width:6em; padding-left:3px; padding-right:3px;}
.database-url{ font-size:.8rem; width:20%; word-break:break-all; line-height:1.3;}
.database-url a{ display:block; margin-bottom:5px;}
.database-url a:last-child{ margin-bottom:0px;}
.database-url a:hover{background:#fff; transition:.2s;}
.database-subject{ text-align: center;}
a.go_next_DBguide:hover{ background: #ebeeff; transition:.2s;}

/* TablePage 01-02 */
.database-publisher{ width:8em;}
.database-scene02-03 .database-publisher{ width:6em; padding-left:3px; padding-right:3px;}
.database-information,
.database-example{ font-size:.95rem; vertical-align: top;}
.database-url{ font-size:.8rem; width:20%; word-break:break-all; line-height:1.3;}
.database-url a{ display:block; margin-bottom:5px;}
.database-url a:last-child{ margin-bottom:0px;}
.database-url a:hover{background:#fff; transition:.2s;}
.database-subject{ text-align: center;}
.database-type{ width:6em; padding-left:4px; padding-right:4px;font-size:.9rem; overflow-wrap:anywhere;}.database-scene01-02{ padding-bottom:3rem;}
.database-scene01-02 table tr{ background: #eceef7;}
.database-scene01-02 table tr:nth-child(odd) { background: #f6f7fb;}
.database-scene01-02 table th.th-item{background: #4472c4; color:#fff !important; font-size: 1rem; letter-spacing:.1em;}
.database-scene01-02 table th.th-item:first-child{border-left:3px fff solid;letter-spacing:0;}

 /* TablePage 02-03 */
.database-scene02-03 .database-name{ font-size:1rem; width:20%; text-align:left;}
.database-scene02-03 .database-publisher{ font-size:1rem; width:5.8em; padding-left:4px; padding-right:4px;}
.database-scene02-03 .database-information,
.database-scene02-03 .database-example{ font-size:.95rem; vertical-align: top; min-width:16em;}
.database-scene02-03 .database-url{ width:12% !important;}
.database-subject{ text-align:center; width:3em;}
.database-type{ width:6em; padding-left:4px; padding-right:4px;font-size:.9rem; overflow-wrap:anywhere;}
.database-scene02-03{ padding-bottom:3rem;}
.database-scene02-03 table tr{ background: #fcefeb;}
.database-scene02-03 table tr:nth-child(odd) { background: #fef7f6;}
.database-scene02-03 table th.th-item{background: #ed7d31; color:#fff !important; font-size: 1rem; letter-spacing:.1em;}
.database-scene02-03 table th.th-item:first-child{border-left:3px fff solid;}
.database-scene02-03 table th.th-item:nth-child(2){letter-spacing:0;}


.border-kon01{
    border: solid 2px #0011cc;
}
.border-orange01{
    border: solid 2px #ff5300;
}
.text-small{ font-size:.85rem;}
.nowrap{ white-space: nowrap;}
.scroll-info{ display:none;}

@media only screen and (max-width: 767px) {
    .database-guide-table .database-scene02-03 {
        overflow-x: auto;
        padding-bottom: 10px;
    }
    .database-guide-table .database-scene02-03 .scroll-info {
       display: block;
        text-align: right;
        font-size: .85rem;
        margin-bottom: 10px;
    }
}
 @media screen and (max-width: 47.9975rem) {
  .database-scene01-02 table th.th-item,
  .database-scene02-03 table th.th-item{letter-spacing:0 !important;}
 .database-guide-table .database-scene01-02 table td,
 .database-guide-table .database-scene01-02 table th{ padding:4px;}
  .database-guide-table .database-scene02-03 table td,
  .database-guide-table .database-scene02-03 table th{ padding:6px;}
  .table-wrap { overflow-x: scroll;}
  .database-publisher{ width:5em; font-size:.9rem;}
  .database-information,.database-example{ font-size:.8rem; vertical-align: top; min-width:15%;}
  .database-url{ font-size:.75rem; width:8.5em;}
  .database-guide-table { width:100%; margin:auto;}
  .database-guide-table .database-scene02-03 table{ width:auto; margin:auto;}
  .database-scene02-03 .database-name {
    font-size: .9rem;
    width: 18%;
    text-align: left;
    }
  .database-scene02-03 .database-publisher {
    font-size: .85rem;
    width: 5.3em;
    padding-left: 4px;
    padding-right: 4px;
    }
  .database-scene02-03 table th.th-item {
    background: #ed7d31;
    color: #fff !important;
    letter-spacing: .1em;
    font-size: .95rem;
    line-height: 1.3em;
    }
 .database-scene02-03 table td,
 .database-scene02-03 table th {
        padding: 6px;
        font-size: .9rem;
    }
  .database-scene02-03 .database-information,.database-scene02-03 .database-example, .database-scene02-03 .database-url{
    font-size: .85rem;
    min-width: 8em;
    padding-left: 4px;
    padding-right: 4px;
    }
  .database-scene02-03 .database-name,
  .database-scene02-03 .database-publisher{
    min-width: 7em;
    }
  .database-scene02-03 .database-type{
    min-width: 5em;
    }
  .database-scene02-03{
    margin-bottom: 3rem;
    }
 }

 
 
/* common */
.gap20px{ gap:20px;}
.gap30px{ gap:30px;}
.gap40px{ gap:40px;}
.gap50px{ gap:50px;}
.width-half{ min-width:50%;}
.width-48per{ min-width:48%;}
.width-45per{ min-width:45%;}
.width-40per{ min-width:40%;}
.width-80per{ min-width:80%;}
.width-90per{ min-width:90%;}
.width-98per{ min-width:98%;}
.width-full{ min-width:100%;}
.pd10px{ padding:10px;}
.pd12px{ padding:12px;}
.pd14px{ padding:14px;}
.pd16px{ padding:16px;}
.pd18px{ padding:18px;}
.pd20px{ padding:20px;}
.pd30px{ padding:30px;}
.border-radius2{ border-radius: 2px;}
.border-radius4{ border-radius: 4px;}
.border-radius6{ border-radius: 6px;}
.border-radius8{ border-radius: 8px;}
.border-radius10{ border-radius: 10px;}
.underbar_no{ text-decoration:none; }
a.underbar_no:hover { background: #ebeeff; text-decoration:underline; color:#018; transition:.2s; }

.one-indent{
  text-indent:-1em;
  padding-left:1em;
}
.onehalf-indent{
  text-indent:-1.5em;
  padding-left:1.5em;
}
span.maru{
  border : solid 1px #e10000;
  border-radius: 50%;
  padding : 1px 3px 1px 3px;
}
.mt_8 {
    margin-top: var(--spacing-8);
}
.mt_10 {
    margin-top: var(--spacing-10);
}
br.sp-only {display: none;}

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