@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700');

/* -----------------------------------------
 NEWS
------------------------------------------- */
.news-nav ul {
  display: -webkit-flex;
  display: flex;
}
.news-nav ul li {
  display: -webkit-flex;
  display: flex;
  width: calc((100% - 7.5rem) / 6);
  margin-right: 1.5rem;
}
.news-nav ul li:last-child {
  margin-right: 0;
}
.news-nav ul li a {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  width: 100%;
  color: #1C2660;
  padding: .7rem 0;
  border: .1rem solid #1C2660;
  font-weight: bold;
  box-sizing: border-box;
}
.news-nav ul li a.active {
  background: #283895;
  border: .1rem solid #283895;
  color: #fff;
}
.news-nav ul li a:hover {
  background: #283895;
  border: .1rem solid #283895;
  opacity: 1;
  color: #fff;
}
.news-box {
  margin-top: 4rem;
  margin-bottom: 4rem;
}
.news-list li {
  display: table;
  width: 100%;
  box-sizing: border-box;
  text-overflow: ellipsis;
}
.news-list li:nth-of-type(odd) {
  background: #f3f3f3;
}
.news-list li a,
.news-list li div{
  display: block;
  padding: 1.5rem;
  position: relative;
}
.news-list li a:hover{
  background-color: #e2e6f8;
}
.news-list li a{
  display: -webkit-flex;
  display: flex;
  align-items: center;
}
.news-list li span {
  display: inline-block;
  vertical-align: middle;
}
.news-list li .genre {
  width: 14.5rem;
  margin-right: 2rem;
  border: 1px solid #1C2660;
  text-align: center;
  padding: .2rem 0;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.news-list li a:hover .genre{
  background-color: #4F85C0;
  border: 1px solid #4F85C0;
  color: #fff;
}
.news-list li .date {
  margin-right: 1rem;
  min-width: 14rem;
}
.news-list li .over-txt {
  overflow: hidden;
  white-space: nowrap;
  width: 62rem;
  text-overflow: ellipsis;
}
.news-list li .over-txt.nodate{
  width: 88rem;
}
.news-list li a::before {
  position: absolute;
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  border-top: .2rem solid #1C2660;
  border-right: .2rem solid #1C2660;
  transform: rotate(45deg);
  right: 1.5rem;
  top: 0;
  bottom:0;
  margin: auto;
}
.main-contents.news {
  padding-top: 4rem;
}
.news-title {
  padding-top: 1.5rem;
  margin-bottom: 3.2rem;
}
.news-title .title {
  margin: 1em auto;
  line-height: 1.3;
  color: #1C2660;
  font-size: 3.2rem;
  font-weight: bold;
  text-align: center;
}
.news-title p {
  font-size: 1.6rem;
  margin-bottom: 2rem;
}
.news-title .title-img {
  text-align: center;
}
.btm-box {
  margin-bottom: 3rem;
}
.news .txt-block {
  padding: 0 3rem;
}
.txt-block img.bottom-img,.bottom-img {
  margin-top: 3rem;
}
.di-data {
  padding-bottom: 3rem;
}
.di-data dt {
  float: left;
}
.di-data dd {
  padding-left: 7em;
  text-indent: -1em;
}
.news-btn {
  text-align: center;
}
.news-btn .btn {
  padding-right: 3rem;
}
.btn.arrow {
  padding: .4em 1.7em;
}

/* -----------------------------------------
 D&Iについて
------------------------------------------- */
.di-nav {
  width: 84rem;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4.8rem;
}
.di-nav ul {
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  display: flex;
  justify-content: space-between;
}
.di-nav ul li {
  width: calc((100% - 4rem) / 5);
  margin-right: .5rem;
  letter-spacing: normal;
  text-align: center;
  font-size: 1.4rem;
  height: 5rem;
  position: relative;
}
.di-nav.news ul li{
  width: calc((100% - 4rem) / 5);
}
.di-nav ul li:last-child {
  margin-right: 0;
}
.di-nav ul li a {
  display: block;
  height: 100%;
  color: #1D2B7C;
  /*font-weight: bold;*/
  font-size: 1.6rem;
  line-height: 50px;
  background: #fff;
  box-sizing: border-box;
  position: relative;
  top: 50%;
  transform: translateY(-35%);
  /*backface-visibility: hidden;
  -webkit-backface-visibility: hidden;*/
  -webkit-transition: all .3s;
  transition: all .3s;
}
.di-nav ul li a:hover {
  text-decoration: none;
  transform: translateY(-45%);
  /*backface-visibility: hidden;
  -webkit-backface-visibility: hidden;*/
}
.di-nav ul li.active {
  position: relative;
}
.di-nav ul li.active::before {
  position: absolute;
  content: "";
  display: block;
  height: .4rem;
  background: #FFE100;
  bottom: 0;
  left: 51%;
  right: 51%;
  margin: auto;
  z-index: 2;
  -webkit-transition: all .3s;
  transition: all .3s;
  -webkit-transition-property: left, right;
  transition-property: left, right;
  -webkit-animation-name: categoryLine;
  animation-name: categoryLine;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: .7s;
  animation-duration: .7s;
  -webkit-animation-delay: 1000ms;
  animation-delay: 1000ms;
}
.di-nav ul li a:hover {
  opacity: 1;
}
.di-mv {
  background-image: url(../../res/about/about_mv01.jpg);
  height: 20rem;
  position: relative;
}
.di-mv.summary {
  background-image: url(../../res/about/about_mv02.jpg);
}
.di-mv.access {
  background-image: url(../../res/about/about_mv03.jpg);
}
.di-mv.office {
  background-image: url(../../res/about/about_mv04.jpg);
}
.di-title {
  font-size: 3.2rem;
  font-weight: bold;
  color: #fff;
  background: #202F69;
  display: inline-block;
  padding: 1.2rem 0;
  width: 30rem;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: -3rem;
  z-index: 2;
}
.vision-box {
  background: #F2F3F6;
  padding: 5rem 0;
  text-align: center;
  margin-bottom: 5rem;
}
.vision-box .vision-title {
  color: #1C2660;
  font-size: 6.4rem;
  font-family: 'Roboto Condensed';
  line-height: 1;
  border-bottom: .4rem solid #FFE100;
  display: inline-block;
  padding-bottom: 1rem;
  margin-bottom: 4rem;
}
.vision-box .sub-title {
  font-size: 2.4rem;
  margin-bottom: 1rem;
}
.vision-box .sub-title.en {
  font-family: 'Roboto Condensed';
  line-height: 1;
  font-weight: normal;
  font-size: 2.4rem;
}
.about-txt{
  font-size: 2.1rem;
}
.di-txtblock {
  max-width: 100rem;
  margin: 0 auto;
}
.di-txtblock .left-side,.di-txtblock .right-side {
  float: left;
  box-sizing: border-box;
}
.di-txtblock .left-side {
  width: 30rem;
}
.di-txtblock .left-side h3 {
  color: #1C2660;
  font-size: 6rem;
  font-family: 'Roboto Condensed';
  font-weight: normal;
  text-align: center;
}
.di-txtblock .left-side h3.logo {
  width: 15.6rem;
  margin: 0 auto;
}
.di-txtblock .right-side {
  width: calc(100% - 30rem);
}
.members-top .right-side-title {
  font-size: 2.4rem;
  padding: 0 0 3rem;
  line-height: 1.5;
}
.di-link-list {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  flex-wrap: wrap;
}
.di-link-list li {
  -webkit-align-self: stretch;
  align-self: stretch;
  width: 47%;
  margin: auto 6rem 6rem auto;
}
.di-link-list li:nth-of-type(even) {
  margin-right: auto;
}
.di-link-list li a {
  display: block;
  position: relative;
  height: 100%;
  color: #1C2660;
  background-color: #fff;
}
.di-link-list img {
  display: block;
}
.di-link-list .caption p {
  font-size: 2.8rem;
  text-align: center;
  padding: 2rem 0;
  position: relative;
  font-weight: bold;
  background: #E5E8EF;
}
.di-link-list .caption p::before {
  position: absolute;
  content: "";
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  border-top: .3rem solid #1C2660;
  border-right: .3rem solid #1C2660;
  transform: rotate(45deg);
  right: 1em;
  top: 0;
  bottom: 0;
  margin: auto;
}
.message-box {
  margin-bottom: 7rem;
  padding-bottom: 5rem;
  /*border-bottom: solid .1rem #ccc;*/
}
.message-box:last-child {
  margin-bottom: auto;
  padding-bottom: 0;
  border-bottom: none;
}
.message-box .di-txtblock .right-side {
  width: 72%;
  padding-left: 8rem;
  margin-bottom: 2rem;
}
.message-box .di-txtblock .left-side {
  width: 25%;
  padding-right: 1rem;
  padding-left: 2rem;
}
.person-right.message-box .di-txtblock .left-side img{
  width: 90%;
}
.person-right.message-box .di-txtblock .left-side{
  float: right;
}
.person-right.message-box .di-txtblock .right-side{
  padding-left: 0;
  padding-right: 8rem;
}
.president {
  font-size: 2.1rem;
  font-weight: bold;
  text-align: right;
}
.president span {
  font-size: 1.6rem;
  font-weight: normal;
  display: block;
  padding-bottom: 2rem;
}
.message-profile-box {
  max-width: 75rem;
  width:100%;
  padding: 2rem;
  box-sizing: border-box;
  float: right;
  border: solid .1rem #ccc;
}
.message-profile-box p {
  font-size: 1.4rem;
  line-height: 1.5;
}
.summary-inner {
  max-width: 100rem;
  margin: 0 auto;
  padding-top: 1rem;
}
.development .summary-inner {
  max-width: 100rem;
}
.summary-box .heading-b:first-child {
  margin-top: 0;
}
.summary-box > ul > li {
  display: table;
  padding: 1.5rem 0;
  width: 100%;
  border-bottom: .1rem solid #CCC;
  box-sizing: border-box;
}
.summary-box > ul > li:last-child {
  border-bottom: none;
}
.summary-box:not(.development) > ul > li:first-child {
  padding-top: 0;
}
.summary-box > ul > li > div {
  display: table-cell;
}
.summary-box ul li .left-side {
  /*font-size: 1.8rem;*/
  padding-left: 9rem;
  width: 11rem;
  font-weight: bold;
  vertical-align: middle;
}
.summary-box.seminar ul li .left-side {
  width: 15rem;
  margin-left: 3em;
  margin-right: 2em;
}
.summary-box ul li .right-side {
  padding-left: 8rem;
  line-height: 1.7;
}
.summary-box.seminar ul li .right-side {
  padding-left: 3em;
}
.summary-box .disc + p {
  margin-top: 1em;
}
/*.summary-box ul li .right-side ul li {
  text-indent: -1em;
  padding-left: 1em;
}*/
.summary-box.development > ul > li {
  border-bottom: none;
  min-height: 8.2rem;
  padding: 1.6rem 0 1.2rem;
}
.summary-box.development > ul > li:nth-of-type(odd) {
  background: #F2F3F6;
}
.summary-box.development ul li .left-side {
  width: 11rem;
  vertical-align: middle;
  font-size: 1.6rem;
  font-weight: normal;
  padding-left: 11rem;
}
.summary-box.development ul li .right-side {
  vertical-align: middle;
}
.access-box {
  max-width: 100rem;
  margin: 0 auto;
}
.access-box dl {
  margin-bottom: 3rem;
}
.access-box dl dt,.access-box dl dd {
  float: left;
  line-height: 1.75;
}
.access-box dl dt {
  font-weight: bold;
  padding-left: 9rem;
}
.access-box dl dd {
  padding-left: 14rem;
}
.access-map {
  margin-bottom: 3rem;
}
.map-list-wrap {
  max-width: 62rem;
  /*margin: 0 auto;*/
  padding-left: 28rem;
}
.map-list li {
  float: left;
  /*width: 31rem;*/
  padding-left: 2.4rem;
  box-sizing: border-box;
  position: relative;
  margin-bottom: 1rem;
}
.map-list li::before {
  position: absolute;
  content: "";
  display: block;
  border: .4rem solid #000;
  height: .8rem;
  width: .8rem;
  border-radius: 50%;
  left: 0;
  top: .25em;
}
.map-list li.tozai::before {
 border: .4rem solid #00ADE7;
}
.map-list li.shinjuku::before {
  border: .4rem solid #7AB629;
}
.map-list li.hanzoumon::before {
  border: .4rem solid #8f76d6;
}
.map-list li.mita::before {
  border: .4rem solid #0072bd;
}
.map-list li.marunouchi::before {
  border: .4rem solid #E60012;
}
.map-list li.chiyoda::before {
  border: .4rem solid #009B53;
}
.map-list li.jr::before {
  border: .4rem solid #221815;
}
.map-list-wrap .notes {
  text-indent: -1em;
  padding-left: 1em;
  line-height: 1.5;
  font-size: 1.4rem;
}
.map-list-wrap .notes + .map-list {
  margin-top: 1em;
}
.access-logo {
  margin-top: 4rem;
  text-align: center;
}
.access-logo + .heading-b {
  margin-top: 2rem;
}
.googleMapArea{
  min-height: 300px;
}
.googleMapArea iframe{
  width: 100%;
}

/* members */
.back-box {
  padding: 9.5rem 0;
  position: relative;
}
.back-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: url(../../res/about/members_img01.jpg) no-repeat center center;
  background-size: cover;
  width: 100%;
  height: 100%;
}
.back-box.members {
  padding: 24rem 0;
}
.back-box.members::before {
  background: url(../../res/about/members_img03.jpg) no-repeat center center;
  background-size: cover;
}
.back-box.members2 {
  padding: 22rem 0;
}
.back-box.members2::before {
  background: url(../../res/about/members_bg02.jpg) no-repeat center center;
  background-size: cover;
  background-position-y: 30%;
}
.back-box.ft {
  padding: 15rem 0;
}
.back-box.ft::before {
  background: url(../../res/about/members_bg03.jpg) no-repeat center center;
  background-size: cover;
}
.members-top {
  padding: 5rem 0 5rem 25rem;
  position: relative;
}
.members-top::before {
  content: "";
  display: block;
  position: absolute;
  height: 100rem;
  width: 100%;
  left: 0;
  top: -15rem;
}
.members-top.sugimoto::before {
  background: url(../../res/about/sugimoto.png) no-repeat;
  width: 22rem;
  background-size: contain;
  background-position: 0 8rem;
}
.members-top.kobayashi::before {
  background: url(../../res/about/kobayashi.png) no-repeat;
  width: 18rem;
  background-size: contain;
  top: -8rem;
}
.members-top.takahashi::before {
  background: url(../../res/about/members_img02.png) no-repeat;
  width: 20rem;
  background-size: contain;
  background-position: 0 8rem;
}
.members-top p{
 position: relative;
}
.members-jobs {
  display: flex;
  padding: 6rem 0;
}
.members-jobs p{
  line-height: 1.5;
}
.members-jobs li {
  width: 33%;
}
.members-jobs li + li {
  margin-left: 6rem;
}
.members-jobs li span {
  font-weight: bold;
}
.members-detail {
  padding-top: 7rem;
  -webkit-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 5rem;
  column-gap: 5rem;
}
.members-detail li {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  width: 30rem;
}
.members-detail li:nth-of-type(2),.members-detail li:nth-of-type(4) {
  margin-bottom: 4rem;
}
.members-detail li p:first-child {
  margin-bottom: 1rem;
}
.members-detail li p span {
  font-weight: bold;
}

/* 2024-03-05 */
/* 	https://d-and-i.jp/about/outline/
	https://d-and-i.jp/about/message/
	https://d-and-i.jp/about/philosophy/
	https://d-and-i.jp/about/history/
 */
@media (min-width: 800px) {
	ul.cf.custom-about-outline-cf,
	ul.cf.custom-about-message-cf,
	ul.cf.custom-about-philosophy-cf,
	ul.cf.custom-about-history-cf {
		justify-content:unset !important;
		margin:0 auto;
	}
}

.di-nav.custom-about-outline-di-nav ul li,
.di-nav.custom-about-message-di-nav ul li,
.di-nav.custom-about-philosophy-di-nav ul li,
.di-nav.custom-about-history-di-nav ul li {
	width: calc((100% - 4rem) / 4) !important;
}

@media screen and (max-width: 800px) {
	.di-nav.custom-about-outline-di-nav ul li,
	.di-nav.custom-about-message-di-nav ul li,
	.di-nav.custom-about-philosophy-di-nav ul li,
	.di-nav.custom-about-history-di-nav ul li {
		width: 50% !important;
	}

	.di-nav.custom-about-outline-di-nav ul li:nth-of-type(3),
	.di-nav.custom-about-message-di-nav ul li:nth-of-type(3),
	.di-nav.custom-about-philosophy-di-nav ul li:nth-of-type(3),
	.di-nav.custom-about-history-di-nav ul li:nth-of-type(3) {
    		border-right: 1px solid #0E174B !important;
  	}
}