@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');


/*--------------------------------------------------------------------------------
 ‹¤’Ê
--------------------------------------------------------------------------------*/
.noto-sans{
  font-family: 'Noto Sans JP', sans-serif;
}
.tabSection .navTab {
  display: flex;
  align-items: flex-end;
  margin: 32px 0 0 0;
}
.tabSection .navTab li {
  flex: 1;
  cursor: pointer;
}
.tabSection .navTab li:not(:last-child) {
  margin-right: 1px;
}
.tabSection .navTab li.active a:hover{
  opacity: 1;
  cursor: default;
  color: #fff;
}
.tabSection .navTab li.active a {
  background-color: #005ab4;
  color: #fff;
  position: relative;
}
.tabSection .navTab li:not(:first-child) {
  margin-left: 1px;
}
.tabSection .navTab li a:hover {
  color: #414141;
}

.tabSection .navTab li a {
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.tabSection .tabSectionContent{
    background-color: #fff;
    margin: 40px 20px;
    text-align: center;
    position: relative;
}
.tabSection .tabSectionContent:not(.active){
  display: none;
}
.tabSection .navTab li.active a::before {
    z-index: 1;
}
.tabSection .navTab li.active a::before {
  content: "";
  width: 30px;
  height: 15px;
  position: absolute;
  bottom: -14px;
  left: 0;
  right: 0;
  margin: 0 auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='30px' height='15px'%3E%3Cpath fill-rule='evenodd' fill='rgb(0, 90, 186)' d='M15.148,14.687 L0.352,0.207 L29.943,0.207 L15.148,14.687 Z'/%3E%3C/svg%3E");
}
.tabSection .navTab li a {
  color: #414141;
  background-color: #cccccc;
  line-height: 1.3333333333;
  height: 104px;
  text-align: center;
}
.genealogy {
    font-size: 16px;
}
.genealogy > dl > dd > a:hover,
.genealogy > dl > div > dd > a:hover,
.genealogy > dl > div > div > dd > a:hover {
	color: #005ab4 !important;
	opacity: 0.6;
}
.genealogy > dl > div > dd > a > span::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: 16px;
    margin-top: -5px;
    width: 8px;
    height: 8px;
    border-top: 3px solid #005ab4;
    border-right: 3px solid #005ab4;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.genealogy > dl > div > dd > a > .anchor::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: 16px;
    margin-top: -5px;
    width: 8px;
    height: 8px;
    border-top: 3px solid #005ab4;
    border-right: 3px solid #005ab4;
    -webkit-transform: rotate(45deg);
    transform: rotate(135deg);
}
.genealogy > dl > dd > a > .anchor::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: 16px;
    margin-top: -5px;
    width: 8px;
    height: 8px;
    border-top: 3px solid #005ab4;
    border-right: 3px solid #005ab4;
    -webkit-transform: rotate(45deg);
    transform: rotate(135deg);
}

@media screen and (max-width: 767px) {

	.tabSection .tabSectionContent{
	    margin: 0;
	}
	.blue .scrollBox {
    	border: 4px solid #bfdef3;
	}
	.scrollBox {
	    position: relative;
	    padding: 10px;
	    margin-bottom: 20px;
	    background-color: #fff;
	}
	.blue .scrollBox:before {
	    border-color: #bfdef3 transparent transparent transparent;
	}
	.scrollBox:before {
	    content: "";
	    position: absolute;
	    left: 50%;
	    bottom: -10px;
	    transform: translateX(-50%);
	    width: 0;
	    height: 0;
	    border-style: solid;
	    border-width: 10px 10px 0 10px;
	}
	.pageContent .scrollBox__text {
	    text-align: center;
	    font-size: 10px;
	}
	.pageContent .scrollBox__image {
	    margin: 0 auto;
	    width: 42px;
	    margin-bottom: 0;
	}
	.scroll {
        overflow-y: scroll;
    }
    .genealogy {
        width: 920px;
    }
    .tabSection .navTab li.active a,
    .tabSection .navTab li a {
    	font-size: 10px;
    	height: 78px;
    }
    .tabSection .navTab li.active a::before {
    	bottom: -11px;
        transform: scale(0.5);
	}
}

/*--------------------------------------------------------------------------------
 operation
--------------------------------------------------------------------------------*/
#operation .genealogy > dl > dt {
    width: 270px;
    height: 78px;
    border-radius: 10px;
    box-sizing: border-box;
    text-align: center;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #005ab4;
    position: relative;
    display: grid;
    align-items: center;
}
#operation .genealogy > dl > .flexContent {
	display: flex;
	justify-content: space-between;
	margin-top: 36px;
	margin-left: 10px;
	position: relative;
}
#operation .genealogy > dl > .flexContent > .no {
	position: absolute;
    z-index: 1;
    top: 24px;
    left: 286px;
    color: #e60000;
}
#operation .genealogy > dl > .flexContent > .yes {
	position: absolute;
    z-index: 1;
    top: 150px;
    left: 70px;
    color: #005ab4;
}
#operation .genealogy > dl > .flexContent > .no,
#operation .genealogy > dl > .flexContent > .yes {
	font-size: 130%;
}
#operation .genealogy > dl > .flexContent > .flexContent_inner_right > dd {
    background-color: #c6dcf6;
    border-radius: 10px;
    box-sizing: border-box;
    text-align: center;
    font-weight: bold;
}
#operation .genealogy > dl > .flexContent > .flexContent_inner_right > dd > a {
	width: 290px;
    height: 112px;
    display: grid;
    place-items: center;
}

#operation .genealogy > dl > .flexContent > .flexContent_inner_left > .exist {
    border: 3px solid #005ab4;
    background-color: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    text-align: center;
    font-weight: bold;
    width: 274px;
    padding: 20px;
}
#operation .genealogy > dl > .flexContent > .flexContent_inner_diamond > .diamond {
    border: 3px solid #005ab4;
    background-color: #fff;
    font-weight: bold;
    height: 142px;
    width: 250px;
    padding: 20px;
    border-radius: 0;
    top: 5px;
    font-size: 16px;
}
#operation .genealogy > dl > .flexContent > .flexContent_inner_diamond > .diamond::affter {
    content: "";
    width: 5px;
    height: 46px;
    padding: 20px;
    background: #005ab4;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 20px;
    transform: translateX(-50%);
    left: 50%;
    font-size: 16px;
}
#operation .genealogy > dl > .flexContent > .flexContent_inner_right,
#operation .genealogy > dl > .flexContent > .flexContent_inner_left {
	display: grid;
    gap: 26px;
    margin-top: 20px;
}
#operation .genealogy > dl > .flexContent dd {
	height: 112px;
	line-height: 1.2;
	align-items: center;
    display: grid;
    position: relative;
}
#operation .genealogy > dl > .flexContent > .flexContent_inner_left > .exist::before {
    content: "";
    width: 166px;
    height: 3px;
    background: #005ab4;
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -177px;
}
#operation .genealogy > dl > .flexContent > .flexContent_inner_left > .exist::after {
    content: "";
    width: 0;
    height: 0;
    border: solid 10px transparent;
    border-left-color: #005ab4;
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -13px;
}
#operation .genealogy > dl > .flexContent > .flexContent_inner_diamond > .diamond::after,
#operation .genealogy > dl > .flexContent > .flexContent_inner_diamond > .diamond::before {
    content: unset;
}
#operation .genealogy > dl > .flexContent > .flexContent_inner_diamond {
	position: relative;
}
#operation .genealogy > dl > .flexContent > .flexContent_inner_diamond::after {
	content: "";
    width: 3px;
    height: 206px;
    background: #005ab4;
    display: inline-block;
    position: absolute;
    bottom: 55px;
    transform: translateX(-50%);
    left: 50%;
}
#operation .genealogy > dl > .flexContent > .flexContent_inner_right > dd > a > .anchor::after,
#operation .genealogy > dl > .flexContent > .flexContent_inner_center > dd > a > .anchor::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: 16px;
    margin-top: -5px;
    width: 8px;
    height: 8px;
    border-top: 3px solid #005ab4;
    border-right: 3px solid #005ab4;
    -webkit-transform: rotate(45deg);
    transform: rotate(135deg);
}
#operation .genealogy > dl > .flexContent > .flexContent_inner_right > dd::before {
    content: "";
    width: 40px;
    height: 3px;
    background: #000;
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -48px;
}
#operation .genealogy > dl > .flexContent > .flexContent_inner_right > .irregular::before {
    content: "";
    width: 362px;
    height: 3px;
    background: #e60000;
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -370px;
}
#operation .genealogy > dl > .flexContent > .flexContent_inner_right > .irregular::after {
    content: "";
    width: 0;
    height: 0;
    border: solid 10px transparent;
    border-left-color: #e60000;
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -10px;
}
#operation .genealogy > dl > .flexContent > .flexContent_inner_right > dd::after {
    content: "";
    width: 0;
    height: 0;
    border: solid 10px transparent;
    border-left-color: #000;
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -10px;
}
#operation .genealogy > dl > dt::before {
    content: "";
    width: 3px;
    height: 45px;
    background: #000;
    display: inline-block;
    position: absolute;
    top: 78px;
    transform: translateX(-50%);
    left: 50%;
}
#operation .genealogy > dl > dt::after {
	content: "";
    width: 0;
    height: 0;
    border: solid 10px transparent;
    display: inline-block;
    position: absolute;
	border-right: 9px solid transparent;
    border-left: 9px solid transparent;
    border-top: 10px solid #000;
    border-bottom: 0;
    top: 122px;
    left: 50%;
    transform: translateX(-50%);
}
#operation .genealogy {
	position: relative;
}
#operation .comments {
    position: absolute;
    line-height: 1.5;
    color: #e60000;
    font-weight: bold;
    width: 480px;
    height: auto;
    padding: 10px 20px;
    border: 2px solid #e60000;
    border-radius: 10px;
    box-sizing: border-box;
    text-align: left;
    top: 0;
    right: 0;
    font-size: 16px;
    display: grid;
    align-items: center;
}

/*--------------------------------------------------------------------------------
 option
--------------------------------------------------------------------------------*/
#option .genealogy > dl > dt {
    width: 252px;
    height: 64px;
    border-radius: 10px;
    box-sizing: border-box;
    text-align: center;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #005ab4;
    position: relative;
    align-items: center;
    display: grid;
}
#option .genealogy > dl > .flexContent {
	display: flex;
	justify-content: space-between;
	margin-top: 100px;
	margin-left: 120px;
}
#option .genealogy > dl > .flexContent > .flexContent_inner {
	gap: 30px;
    display: grid
}
#option .genealogy > dl > .flexContent > .flexContent_inner_right > dd,
#option .genealogy > dl > .flexContent > .flexContent_inner_center > .exist {
    background-color: #c6dcf6;
    border-radius: 10px;
    box-sizing: border-box;
    text-align: center;
    font-weight: bold;
}
#option .genealogy > dl > .flexContent > .flexContent_inner_center > .exist {
	z-index: 1;
}
#option .genealogy > dl > .flexContent > .flexContent_inner_center > .exist > a {
	width: 210px;
    height: 74px;
    display: grid;
    place-items: center;
}
#option .genealogy > dl > .flexContent > .flexContent_inner_left > dd {
    border: 3px solid #005ab4;
    background-color: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    text-align: center;
    font-weight: bold;
}
#option .genealogy > dl > .flexContent > .flexContent_inner_right,
#option .genealogy > dl > .flexContent > .flexContent_inner_left,
#option .genealogy > dl > .flexContent > .flexContent_inner_center {
	display: grid;
    gap: 26px;
}
#option .genealogy > dl > .flexContent dd {
	height: 74px;
	line-height: 1.2;
	align-items: center;
    display: grid;
    position: relative;
}
#option .genealogy > dl > .flexContent > .flexContent_inner_right dd > a {
	width: 334px;
    height: 74px;
    display: grid;
    place-items: center;
}
#option .genealogy > dl > .flexContent > .flexContent_inner_left > dd::before {
    content: "";
    width: 58px;
    height: 3px;
    background: #000;
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -69px;
}
#option .genealogy > dl > .flexContent > .flexContent_inner_left > dd::after {
    content: "";
    width: 0;
    height: 0;
    border: solid 10px transparent;
    border-left-color: #000;
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -13px;
}
#option .genealogy > dl > .flexContent > .flexContent_inner_right > dd > a > .anchor::after,
#option .genealogy > dl > .flexContent > .flexContent_inner_center > dd > a > .anchor::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: 16px;
    margin-top: -5px;
    width: 8px;
    height: 8px;
    border-top: 3px solid #005ab4;
    border-right: 3px solid #005ab4;
    -webkit-transform: rotate(45deg);
    transform: rotate(135deg);
}
#option .genealogy > dl > .flexContent > .flexContent_inner_right > dd::before {
    content: "";
    width: 276px;
    height: 3px;
    background: #000;
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -285px;
}
#option .genealogy > dl > .flexContent > .flexContent_inner_right > dd::after {
    content: "";
    width: 0;
    height: 0;
    border: solid 10px transparent;
    border-left-color: #000;
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -10px;
}
#option .genealogy > dl > dt::before {
    content: "";
    width: 3px;
    height: 739px;
    background: #000;
    display: inline-block;
    position: absolute;
    top: 63px;
    left: 53px;
}
#option .genealogy {
	position: relative;
}
#option .comments {
    position: absolute;
    line-height: 1.5;
    color: #e60000;
    font-weight: bold;
    width: 580px;
    height: auto;
    padding: 10px 20px;
    border: 2px solid #e60000;
    border-radius: 10px;
    box-sizing: border-box;
    text-align: left;
    top: 0;
    right: 0;
    font-size: 16px;
    display: grid;
    align-items: center;
}

/*--------------------------------------------------------------------------------
 maintenance
--------------------------------------------------------------------------------*/
#maintenance .genealogy {
	position: relative;
}
#maintenance .genealogy > dl {
    display: flex;
    justify-content: space-between;
    /*align-items: center;
    position: relative;*/
}
#maintenance .genealogy > dl > dt {
    width: 316px;
    height: 64px;
    border-radius: 10px;
    box-sizing: border-box;
    text-align: center;
    font-weight: bold;
    display: grid; 
    place-items: center;
    color: #FFFFFF;
    background-color: #005ab4;
    position: relative;
}
#maintenance .genealogy > dl > dd {
    background-color: #c6dcf6;
    border-radius: 10px;
    box-sizing: border-box;
    text-align: center;
    font-weight: bold;
    position: relative;
    margin-top: 180px;
    width: 316px;
}
#maintenance .genealogy > dl > dd > a {
	width: 316px;
    height: 80px;
    display: grid;
    place-items: center;
}
#maintenance .genealogy > dl > dt::before {
    content: "";
    width: 3px;
    height: 157px;
    background: #000;
    display: inline-block;
    position: absolute;
    top: 64px;
    transform: translateX(-50%);
    left: 50%;
}
#maintenance .genealogy > dl > dd::before {
    content: "";
    width: 440px;
    height: 3px;
    background: #000;
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -447px;
}
#maintenance .genealogy > dl > dd::after {
    content: "";
    width: 0;
    height: 0;
    border: solid 10px transparent;
    border-left-color: #000;
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -10px;
}
#maintenance .comments {
    line-height: 1.5;
    color: #e60000;
    font-weight: bold;
    width: 480px;
    height: auto;
    padding: 10px 20px;
    border: 2px solid #e60000;
    border-radius: 10px;
    box-sizing: border-box;
    text-align: left;
    display: grid; 
    place-items: center;
    font-size: 16px;
    position: absolute;
    top: 0;
    right: 0;
}

/*--------------------------------------------------------------------------------
 experience
--------------------------------------------------------------------------------*/
#experience .genealogy > dl {
	display: flex;
    justify-content: space-between;
}
#experience .genealogy > dl > dt {
    align-items: center;
    width: 340px;
    height: 78px;
    border-radius: 10px;
    box-sizing: border-box;
    text-align: center;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #005ab4;
    display: grid; 
    place-items: center;
    position: relative;
}
#experience .genealogy > dl > div{
	margin-top: 120px;
    display: grid;
    gap: 26px;
}
#experience .genealogy > dl > div > dd {
    position: relative;
    background-color: #c6dcf6;
    border-radius: 10px;
    box-sizing: border-box;
    text-align: center;
    font-weight: bold;
}
#experience .genealogy > dl > div > dd > a {
	padding: 12px;
    width: 360px;
    display: block;
}
#experience .genealogy > dl > div > dd::before {
    content: "";
    width: 384px;
    height: 3px;
    background: #000;
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -391px;
}
#experience .genealogy > dl > div > dd::after {
    content: "";
    width: 0;
    height: 0;
    border: solid 10px transparent;
    border-left-color: #000;
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -10px;
}
#experience .genealogy > dl > dt::before {
    content: "";
    width: 3px;
    height: 462px;
    background: #000;
    display: inline-block;
    position: absolute;
    top: 77px;
    transform: translateX(-50%);
    left: 50%;
}