@charset "UTF-8";
/* layout
====================================================== */
/** mate_diagram.jsとセットで使用 **/
#mate_diagram {
  font-feature-settings: "palt";
}
#mate_diagram a {
  color: #585858;
}
#mate_diagram a:hover {
  color: #e7782e;
}
#mate_diagram {
  position: relative;
}
#mate_diagram:before {
  border-radius: 16px;
  content: "";
  background: #E7782E;
  opacity: 0.15;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
#mate_diagram .mate a {
  display: block;
  width: 100%;
  text-align: center;
  /*	background: #E7782E; */
  background-image: linear-gradient(to left, #F0D122 2%, #E7782E 40%, #E7782E 100%);
  background-size: 200% auto;
  color: white;
  border-radius: 16px 16px 0 0;
  font-size: 23px;
  font-weight: 700;
  line-height: 32px;
  padding: 14px 24px;
  transition: 0.3s;
  z-index: 1;
  position: relative;
}
#mate_diagram .mate a:hover, #mate_diagram .mate_frex__item .main:hover {
  background-position: right center !important;
  transition: 0.3s;
}
#mate_diagram .mate_frex {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  padding: 16px;
}
#mate_diagram .mate_frex__left {
  width: calc(100% - 207px);
}
#mate_diagram .mate_frex__right {
  width: 175px;
}
#mate_diagram .mate_frex__item {
  position: relative;
}
#mate_diagram .mate_frex__item .main {
  border-radius: 16px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 4px 24px;
  color: white;
  box-shadow: 0px 3px 6px 0 rgba(0, 0, 0, 0.16);
  cursor: pointer;
}
#mate_diagram .mate_frex__item .main img {
  margin-right: 8px;
  width: 50px;
  height: 50px;
}
#mate_diagram .mate_frex__item.metallurgy .main {
  background: #EB5F6A;
  background-image: linear-gradient(to left, #FF9D60 2%, #EB5F6A 40%, #EB5F6A 100%);
  background-size: 200% auto;
  height: 116px;
  padding-right: 240px;
  border-radius: 16px 16px 0 0;
  margin-bottom: 6px;
}
#mate_diagram .metallurgy .item_hover .list_title a, #mate_diagram .metallurgy .item_hover ul .title:before {
  color: #EB5F6A;
}
#mate_diagram .mate_frex__item.kankyo .main {
  background-image: linear-gradient(to left, #B4EB20 2%, #46BF75 40%, #46BF75 100%);
  background-size: 200% auto;
  padding-right: 240px;
  border-radius: 0 0 16px 16px;
  margin-bottom: 12px;
}
#mate_diagram .kankyo .item_hover .list_title a, #mate_diagram .kankyo .item_hover ul .title:before {
  color: #46BF75;
}
#mate_diagram .item_hover > .btn_close {
  display: none;
}
#mate_diagram .item_hover .list_title a:hover {
  opacity: 0.8;
}
#mate_diagram .mate_frex__item.kankyo:after {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  background: #E7782E;
  position: absolute;
  right: -32px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
#mate_diagram .mate_frex__item.metallurgy:after, #mate_diagram .mate_frex__item.kouza:after {
  content: "";
  display: block;
  width: 16px;
  height: 1px;
  background: #E7782E;
  position: absolute;
  right: -16px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
#mate_diagram .mate_frex__item.ugrad:before {
  content: "";
  display: block;
  width: 1px;
  height: 163px;
  background: #E7782E;
  position: absolute;
  left: -17px;
  top: 58px;
}
#mate_diagram .mate_frex__item.kouza:hover .item_hover {
  visibility: visible;
  transition: 0.3s;
}
#mate_diagram .mate_frex__item.kouza .main {
  background-image: linear-gradient(to left, #287BCE 2%, #30519E 40%, #30519E 100%);
  background-size: 200% auto;
  padding-right: 32px;
}
#mate_diagram .mate_frex__item.kouza .main p {
  position: relative;
}
#mate_diagram .mate_frex__item.kouza .main p:after {
  font-size: 20px;
  font-family: FontAwesome;
  display: inline-block;
  content: "";
  color: white;
  position: absolute;
  right: -24px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
#mate_diagram .mate_frex__item.kouza .item_hover {
  top: 48px;
}
#mate_diagram .mate_frex__item.kouza .item_hover .list_title, #mate_diagram .mate_frex__item.kouza .item_hover ul .title:before {
  color: #30519E;
}
#mate_diagram .mate_frex__item.kouza .item_hover .list_title a {
  font-weight: 700;
}
#mate_diagram .kouza .item_hover .list_title a, #mate_diagram .kouza .item_hover ul .title:before {
  color: #30519E;
}
#mate_diagram .item_hover .modal_list li {
  position: relative;
  line-height: 18px;
  padding: 8px 0 8px 20px;
}
#mate_diagram .modal_list > li:before {
  content: "●";
  color: #30519E;
  position: absolute;
  top: 8px;
  left: 0;
}
#mate_diagram .modal_list > li > span:hover {
  opacity: 0.7;
  cursor: pointer;
}
#mate_diagram .modal_list .link_none {
  pointer-events: none;
}
#mate_diagram .modal_list .link_none span {
  padding-right: 0;
}
#mate_diagram .modal_list .link_none span:after {
  display: none;
}
#mate_diagram .modal_list li span {
  color: #565656;
  position: relative;
  padding-right: 22px;
  display: table-cell;
  line-height: 18px;
}
#mate_diagram .modal_list .kouza_modal > span:after {
  content: "";
  width: 16px;
  height: 14px;
  background-image: url("../media/images/top/mate_diagram/icon_browser.svg");
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
/*
/*
#mate_diagram .modal_list li:after {
	font-family: FontAwesome;
	display: inline-block;
	margin-left: 6px;
	content: "\f2d0";
	font-size: 20px;
	line-height: 24px;
}*/
#mate_diagram .mate_frex__item.ugrad .main {
  background: #FFBB00;
  background-image: linear-gradient(to left, #FFE452 2%, #FFBB00 40%, #FFBB00 100%);
  background-size: 200% auto;
  height: 100%;
  flex-wrap: wrap;
  align-content: center;
  cursor: pointer;
}
#mate_diagram .mate_frex__item.ugrad:after {
  font-size: 20px;
  font-family: FontAwesome;
  display: inline-block;
  content: "";
  color: white;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
#mate_diagram .mate_frex__item.ugrad .main img {
  margin: 0 auto 8px auto;
}
#mate_diagram .mate_frex__item.ugrad:hover .item_hover {
  visibility: visible;
  transition: 0.3s;
}
#mate_diagram .mate_frex__item.ugrad .item_hover {
  top: 180px;
  width: 270px;
  left: -16px;
}
#mate_diagram .mate_frex__item.ugrad .item_hover ul li a:before {
  content: "●";
  position: absolute;
  left: 0;
  top: 7px;
  color: #FFBB00;
}
#mate_diagram .ugrad .item_hover .list_title a, #mate_diagram .ugrad .item_hover ul .title:before {
  color: #FFBB00;
}
#mate_diagram .mate_frex__item p, #mate_diagram .mate_frex__item span {
  color: white;
  font-size: 14px;
  margin-bottom: 0;
  line-height: 18px;
}
#mate_diagram .mate_frex__item .main {
  font-weight: 700;
}
#mate_diagram .mate_frex__item .main {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
#mate_diagram .mate_frex__item .link {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 200px;
}
#mate_diagram .mate_frex__item .link_item > a {
  padding: 0;
  display: block;
  padding: 2px 0;
}
#mate_diagram .mate_frex__item .link_item > .icon_arrow {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 3px 0;
}
#mate_diagram .mate_frex__item .link_item > .icon_arrow:hover {
  opacity: 0.7;
  cursor: pointer;
}
#mate_diagram .mate_frex__item .link_item > a:hover {
  opacity: 0.7;
  cursor: pointer;
}
#mate_diagram .mate_frex__item.ugrad {
  height: 100%;
}
/*
#mate_diagram .icon_arrow, #mate_diagram .icon_link {
	position: relative;
	padding-right: 20px;
}
#mate_diagram a.icon_next {
	position: relative;
	padding-right: 18px;
} 
*/
#mate_diagram .icon_arrow:after, #mate_diagram .icon_link:after, #mate_diagram .icon_next:after {
  /*	content: "";
	position: absolute;
	display: inline-block;
	background-repeat: no-repeat;
	background-size: contain;
	-webkit-background-size: contain;
	right: 0;
	 top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	*/
  font-size: 16px;
  font-family: FontAwesome;
  display: inline-block;
  margin-left: 6px;
}
#mate_diagram .icon_arrow:after {
  /*	width: 10px;
	height: 6px;
	background-image: url("url("../media/images/top/mate_diagram/icon_bottom.svg"); */
  content: "";
  color: white;
  font-size: 20px;
  line-height: 24px;
}
#mate_diagram .icon_link:after {
  /*	width: 16px;
	height: 16px;
	background-image: url("../media/images/top/mate_diagram/icon_link.svg"); */
  content: "";
}
#mate_diagram .icon_next:after {
  /*	width: 14px;
	height: 12px;
	background-image: url("../media/images/top/mate_diagram/icon_next.svg"); */
  content: "";
}
#mate_diagram .hover_link a.icon_next {
  margin-right: 12px;
}
#mate_diagram .link_item {
  position: relative;
}
#mate_diagram .item_hover {
  visibility: hidden;
  position: absolute;
  left: 40px;
  top: 28px;
  /*	transition: 0.3s; */
  background: white;
  color: #585858;
  z-index: 20;
  border-radius: 10px;
  padding: 24px 16px;
  width: 400px;
  box-shadow: 0px 3px 6px 0 rgba(0, 0, 0, 0.16);
}
#mate_diagram .item_hover .list_title {
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
}
#mate_diagram .item_hover p {
  color: #585858;
}
#mate_diagram .item_hover ul {
  padding-left: 0;
  margin: 8px 0 0 0;
  list-style: none;
  border-top: 1px solid #edefec;
}
#mate_diagram .item_hover ul li {
  border-bottom: 1px solid #edefec;
  padding: 4px 0 4px 20px;
  font-size: 14px;
  position: relative;
}
#mate_diagram .item_hover ul li.none_link {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
#mate_diagram .item_hover ul li.none_link .title {
  width: calc(100% - 165px);
}
#mate_diagram .item_hover ul li.none_link .hover_link {
  border-top: none;
}
#mate_diagram .item_hover ul .title {
  position: relative;
  padding: 8px 0;
}
#mate_diagram .item_hover ul .title:before {
  content: "●";
  position: absolute;
  left: -20px;
  top: 8px;
}
#mate_diagram .link_item:hover .icon_arrow {
  opacity: 0.7;
}
#mate_diagram .mate_frex__item.kouza:hover .main, #mate_diagram .mate_frex__item.ugrad:hover .main {
  background-position: right center !important;
}
#mate_diagram .link_item:hover .item_hover {
  visibility: visible;
  /* transition: 0.3s; */
}
#mate_diagram .item_hover .list_title > a:after {
  content: "";
  font-family: FontAwesome;
  display: inline-block;
  margin-left: 6px;
}
#mate_diagram .hover_link {
  padding: 8px 0;
  border-top: 1px solid #edefec;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
#mate_diagram .hover_link:last-child {
  padding-bottom: 2px;
}
/*
#mate_diagram .hover_link:last-child {
	border-bottom: 1px solid #edefec;
} 
*/
#mate_diagram .hover_link .field {
  width: calc(100% - 165px);
}
#mate_diagram .item_hover .hover_link span {
  width: 165px;
  display: block;
  text-align: right;
}
#mate_diagram .none_1200 {
  display: none;
}
#mate_diagram .flex_two {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
#mate_diagram .flex_two__item {
  width: calc(50% - 8px);
}
#mate_diagram .kouza .item_hover {
  width: 520px;
}
#mate_diagram .open_modal .kouza_modal__item {
  display: block;
}
#mate_diagram .kouza_modal__item {
  display: none;
}
#mate_diagram .kouza_modal__item.open_modal .modal_box {
  visibility: visible;
}
#mate_diagram .kouza_modal__item .modal_box {
  position: fixed;
  z-index: 10;
  max-width: 540px;
  max-height: calc(100vh - 64px);
  width: calc(100vw - 48px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background: white;
  padding: 24px;
  border-radius: 8px;
  overflow-y: auto;
}
#mate_diagram .kouza_modal__item .modal_box .list_title {
  color: #585858 !important;
  margin-bottom: 16px;
}
#mate_diagram .kouza_modal__item .modal_box .list_title:before {
  content: "●";
  color: #30519E;
  margin-right: 6px;
}
#mate_diagram .modal_box .hover_link {
  border-top: none;
  padding-bottom: 8px;
}
#mate_diagram .modal_box .hover_link span {
  padding-right: 0;
}
#mate_diagram .modal_box .hover_link span a:last-child {
  margin-left: 8px;
}
#mate_diagram .kouza_modal__item .modal_box ul li {
  padding-left: 0;
}
#mate_diagram .kouza_modal__item .modal_bg {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background: #585858;
  opacity: 0.3;
  padding: 0;
  z-index: 1;
}
#mate_diagram .btn_close {
  position: absolute;
  padding: 18px;
  width: 50px;
  height: 50px;
  top: 8px;
  right: 8px;
}
#mate_diagram .btn_close:hover {
  opacity: 0.7;
}
#mate_diagram .mate_frex__item.kouza .item_hover.keep {
  visibility: visible;
}
#mate_diagram .sp {
  display: none;
}
/*	1024px超えるとヘッダエリアサイズが変わる為対応	*/
@media (max-width: 1200px) {
  #mate_diagram .mate_frex__item .main {
    flex-wrap: wrap;
  }
  #mate_diagram .none_1200 {
    display: block;
  }
  #mate_diagram .mate_frex__left {
    width: calc(100% - 96px);
  }
  #mate_diagram .mate_frex__right {
    width: 80px;
  }
  #mate_diagram .mate_frex__item.ugrad .main {
    padding: 16px 10px;
  }
  #mate_diagram .mate_frex__item.ugrad:after {
    bottom: 40px;
    top: auto;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
  }
  #mate_diagram .mate_frex__item.ugrad:before {
    left: -8px;
  }
  #mate_diagram .mate_frex__item.metallurgy:after, #mate_diagram .mate_frex__item.kouza:after {
    width: 9px;
    right: -9px;
  }
  #mate_diagram .mate_frex__item.ugrad .item_hover {
    top: 215px;
  }
}
@media (max-width: 991px) {
  #mate_diagram .none_991 {
    display: none;
  }
  #mate_diagram .mate_frex__item.ugrad:before {
    height: 188px;
    top: 68px;
  }
  #mate_diagram .mate_frex__item .link {
    /*	width: 200px; */
    width: 100%;
    left: 22px;
    top: 46px;
  }
  #mate_diagram .mate_frex__item .main {
    padding: 12px 22px;
  }
  #mate_diagram .mate_frex__item.metallurgy .main {
    height: 134px;
  }
  #mate_diagram .mate_frex__item.kankyo .main {
    height: 82px;
  }
  #mate_diagram .mate_frex__item .main img {
    width: 32px;
    height: 32px;
  }
  #mate_diagram .mate_frex__item.metallurgy .main, #mate_diagram .mate_frex__item.kankyo .main {
    padding-right: 22px;
    align-items: flex-start;
    padding: 12px;
  }
  #mate_diagram .mate_frex__item.metallurgy .main p, #mate_diagram .mate_frex__item.kankyo .main p {
    margin-top: 6px;
  }
  #mate_diagram .icon_arrow:after {
    font-size: 16px;
  }
  #mate_diagram .mate_frex__item.ugrad:after {
    bottom: 74px;
  }
  #mate_diagram .mate_frex__item.kankyo .main {
    margin-bottom: 8px;
  }
  #mate_diagram .mate_frex__item.metallurgy .main {
    margin-bottom: 4px;
  }
  #mate_diagram .icon_arrow:after, #mate_diagram a.icon_link:after, #mate_diagram a.icon_next:after, #mate_diagram .mate_frex__item.ugrad:after {
    font-size: 16px;
    height: 22px;
  }
  #mate_diagram .mate_frex__item.kouza .main p:after {
    font-size: 16px;
    height: 16px;
  }
}
/*
#mate_diagram .metallurgy .item_hover {
	visibility: visible;
}
*/
/* Phones */
@media (max-width: 767px) {
  /* #mate_diagram .mate_frex__item .link_item > .icon_arrow {
		width: calc(100% - 40px);
	} */
  /** SPの際のオープン **/
  #mate_diagram .mate_frex__item .main {
    flex-wrap: nowrap;
  }
  #mate_diagram .btn_close {
    top: 0;
    right: 0;
  }
  #mate_diagram .mate_frex__item .main, #mate_diagram:before {
    border-radius: 8px;
  }
  #mate_diagram .mate_frex__item.metallurgy .main, #mate_diagram .mate a {
    border-radius: 8px 8px 0 0;
  }
  #mate_diagram .mate_frex__item.kankyo .main {
    border-radius: 0 0 8px 8px;
  }
  #mate_diagram .mate_frex__item.ugrad .item_hover {
    left: auto;
    right: 0;
  }
  #mate_diagram .item_hover > .btn_close {
    display: block;
  }
  #mate_diagram .item_hover, #mate_diagram .kouza .item_hover {
    width: 260px;
    /*	left: 0; */
  }
  #mate_diagram .item_hover ul li.none_link, #mate_diagram .hover_link {
    flex-wrap: wrap;
  }
  #mate_diagram .hover_link .field #mate_diagram .item_hover ul li.none_link .title, #mate_diagram .item_hover ul li.none_link .hover_link, #mate_diagram .hover_link .field, #mate_diagram .item_hover .hover_link span {
    width: 100%;
  }
  #mate_diagram .item_hover ul li.none_link .title {
    padding-top: 4px;
    padding-bottom: 0;
    margin-bottom: -2px;
    width: 100%;
  }
  #mate_diagram .hover_link .field {
    padding: 8px 0 0;
    width: 100%;
  }
  #mate_diagram .item_hover ul li.none_link .hover_link, #mate_diagram .item_hover .hover_link span {
    padding: 4px 0;
  }
  #mate_diagram .item_hover ul .title:before {
    top: 4px;
  }
  #mate_diagram .item_hover ul .title {
    padding-top: 4px;
  }
  #mate_diagram .hover_link {
    padding: 0;
  }
  #mate_diagram .item_hover {
    padding: 16px;
  }
  #mate_diagram .mate_frex__item .link_item > .icon_arrow {
    /*	pointer-events: none; */
    padding: 2px 0;
  }
  #mate_diagram .flex_two {
    flex-wrap: wrap;
  }
  #mate_diagram .item_hover ul {
    width: 100%;
  }
  #mate_diagram .item_hover .flex_two__item:last-child {
    margin-top: 0;
    border-top: none;
  }
  #mate_diagram .mate_frex__item.kouza:hover .item_hover {
    width: 260px;
    left: 0;
  }
  #mate_diagram .link_item.item_hover_open .item_hover, #mate_diagram .mate_frex__item.kouza.item_hover_open .item_hover {
    left: 0;
  }
  #mate_diagram .link_item.item_hover_open .item_hover, #mate_diagram .mate_frex__item.kouza.item_hover_open .item_hover, #mate_diagram .mate_frex__item.ugrad.item_hover_open .item_hover {
    visibility: visible;
    display: block;
  }
  #mate_diagram .link_item .item_hover, #mate_diagram .mate_frex__item.kouza .item_hover, #mate_diagram .mate_frex__item.ugrad .item_hover {
    display: none;
  }
  #mate_diagram .link_item:hover .item_hover {
    /*		display: none; */
  }
  #mate_diagram .item_hover .list_title {
    /*	margin-right: 32px; */
    font-size: 15px;
  }
  #mate_diagram .modal_box .hover_link {
    padding-bottom: 0;
  }
  #mate_diagram .item_hover > ul > li {
    padding-bottom: 0;
  }
  #mate_diagram .mate_frex__item.ugrad .item_hover ul li a {
    padding: 4px 0;
    display: block;
  }
  #mate_diagram .mate_frex__item.ugrad .item_hover ul li a:before {
    top: 8px;
  }
  #mate_diagram .sp {
    display: block;
  }
  #mate_diagram .mate_frex__item p span {
    display: inline-block;
  }
  #mate_diagram .icon_arrow:after, #mate_diagram .icon_link:after, #mate_diagram .icon_next:after, #mate_diagram .item_hover .list_title > a:after {
    margin-left: 4px;
  }
  #mate_diagram .kouza_modal__item .modal_box {
    padding: 24px 16px;
  }
}
@media (max-width: 374px) {
  #mate_diagram .mate_frex__item .main {
    padding: 12px;
  }
  #mate_diagram .mate_frex__item .link {
    left: 12px;
  }
  #mate_diagram .mate_frex__item.ugrad .main {
    padding: 6px;
  }
  #mate_diagram .mate_frex__left {
    width: calc(100% - 76px);
  }
  #mate_diagram .mate_frex__right {
    width: 60px;
  }
  #mate_diagram .mate_frex__item p, #mate_diagram .mate_frex__item span {
    font-size: 12px;
  }
  #mate_diagram .mate_frex__item .main img {
    width: 24px;
    height: 24px;
    margin-top: 4px;
    margin-bottom: 2px;
  }
  #mate_diagram .mate_frex__item.kouza .main:after {
    right: 16px;
  }
}
/*# sourceMappingURL=./mate_diagram.css.map */