@charset "UTF-8";

#DEI-dialogue section { position: relative; }
#DEI-dialogue section:after { content: ''; position: absolute; bottom: 0; background: #cc1220; width: 120px; height: 2px; left: calc(50% - 60px); }
#DEI-dialogue section:nth-last-child(1){padding-bottom: 0!important;}
#DEI-dialogue section:nth-last-child(1)::after{display: none;}
#DEI-dialogue h2 { line-height: 1.6; color: #cc1220; font-weight: bold; }
#DEI-dialogue h2 + p { font-weight: bold; margin-bottom: 0; }
#DEI-dialogue h3 {color:#333; font-weight: bold; display: flex; align-items: center; }
#DEI-dialogue strong{color: #cc1220; font-weight: bold;}
#DEI-dialogue p{color:#333;}
#DEI-dialogue p.host{font-weight: bold;}
#DEI-dialogue ul.list { list-style: none; padding: 0; margin: 0; }
#DEI-dialogue ul.list li { display: flex; }
#DEI-dialogue ul.list li:nth-last-child(1) { margin-bottom: 0; }
#DEI-dialogue .text p:nth-last-child(1){margin-bottom: 0;}
#DEI-dialogue ul.list picture { display: block; }
#DEI-dialogue ul.list picture img { width: 100%; height: auto; display: block; object-fit: cover; }

#DEI-dialogue .video {position: relative; display: block; max-width: 1000px; width: 100%; margin-left: auto; margin-right: auto;}
#DEI-dialogue .video > div {padding-top: 50%;}
#DEI-dialogue .video iframe {position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;}

@media screen and (max-width:767px) {
  #DEI-dialogue picture#kv {width: calc(100% + 40px); position: relative; left:-20px; max-width:none;}
  #DEI-dialogue .--pc { display: none; }
  #DEI-dialogue section { padding: 56px 0; }
  #DEI-dialogue .inner { margin: 0 auto; padding: 0 0; }
  #DEI-dialogue h2 { font-size: 18px; margin-bottom: 24px; }
  #DEI-dialogue h2 + p { font-size: 16px; }
  #DEI-dialogue p { font-size: 14px; line-height: 1.8; margin-bottom: 24px;}
  #DEI-dialogue em{ font-size: 11px; font-style: normal;}
  #DEI-dialogue h3 { background: url(../img/h3_bg.png) 0 50% / auto 66px no-repeat; min-height: 66px; padding-left: 42px; font-size: 16px; line-height: 1.4; margin-bottom: 56px; }
  #DEI-dialogue div.text + picture,
  #DEI-dialogue picture + h3{margin-top: 56px;}
  #DEI-dialogue ul.list li { flex-direction: column; margin-bottom: 40px; }
  #DEI-dialogue ul.list .text { order: 1; padding-bottom: 56px; }
  #DEI-dialogue ul.list picture { order: 2; }
  #DEI-dialogue ul.list + div.text{margin-top: 40px;}

}

@media screen and (min-width:768px) {
  #DEI-dialogue picture#kv {width: calc(100% + 112px); position: relative; left:-56px; max-width: 1240px;}	
  #DEI-dialogue .--sp { display: none; }
  #DEI-dialogue a { transition: 0.3s; will-change: opacity; }
  #DEI-dialogue a:hover { opacity: .7; }
  #DEI-dialogue section { padding: 80px 0; }
  #DEI-dialogue .inner { margin: 0 auto; max-width: 1000px; width: 100%; }
  #DEI-dialogue h2 { font-size: 32px; margin-bottom: 32px; }
  #DEI-dialogue h2 + p { font-size: 20px; }
  #DEI-dialogue p { font-size: 18px; line-height: 2; margin-bottom: 40px;}
  #DEI-dialogue em{ font-size: 14px; font-style: normal;}
  #DEI-dialogue h3 { background: url(../img/h3_bg.png) 0 50% / auto 84px no-repeat; min-height: 84px; padding-left: 64px; font-size: 26px; line-height: 1.6; margin-bottom: 80px; }
  #DEI-dialogue div.text + picture,
  #DEI-dialogue picture + h3{margin-top: 80px;}
  #DEI-dialogue ul.list li { flex-direction: row; align-items: flex-start; justify-content: flex-end; margin-bottom: 80px; width: 100%; }
  #DEI-dialogue ul.list .text { width: 66%; flex-shrink: 0; }
  #DEI-dialogue ul.list picture { width: calc(26% + 15.5vw); max-width: 48%; min-width: 30%; flex-shrink: 0; margin-right: calc(2% + 4vw); position: relative; left: 0; }
  #DEI-dialogue ul.list picture img { width: 100%; height: auto; display: block; object-fit: cover; }
  #DEI-dialogue ul.list.--left li:nth-child(even) { flex-direction: row-reverse; }
  #DEI-dialogue ul.list.--left li:nth-child(even) picture { margin-right: 0; margin-left: calc(2% + 4vw); left: auto; right: 0; }
  #DEI-dialogue ul.list.--right li:nth-child(odd) { flex-direction: row-reverse; }
  #DEI-dialogue ul.list.--right li:nth-child(odd) picture { margin-right: 0; margin-left: calc(2% + 4vw); left: auto; right: 0; }
  #DEI-dialogue ul.list.--right li:nth-child(even) { flex-direction: row; }
  #DEI-dialogue ul.list.--right li:nth-child(even) picture { margin-left: 0; margin-right: calc(2% + 4vw); right: auto; left: 0; }
  #DEI-dialogue ul.list + div.text{margin-top: 40px;}

}

@media screen and (min-width:1201px) and (max-width:1440px) {
  #DEI-dialogue ul.list .text { width: 45.8333vw; }
  #DEI-dialogue ul.list picture { width: 33.3333vw; margin-right: 5.5555vw; }
  #DEI-dialogue ul.list.--left li:nth-child(even) picture { margin-left: 5.5555vw; }
  #DEI-dialogue ul.list.--right li:nth-child(odd) picture { margin-left: 5.5555vw; }
  #DEI-dialogue ul.list.--right li:nth-child(even) picture { margin-right: 5.5555vw; }
}

@media screen and (min-width:768px) and (max-width:1200px) {
  #DEI-dialogue .inner { max-width: 100%; padding-left: 4.1666vw; padding-right: 4.1666vw; }
  #DEI-dialogue ul.list li { justify-content: space-between; }
  #DEI-dialogue ul.list .text { width: 55%; }
  #DEI-dialogue ul.list picture { width: 40%; margin-right: 0; }
  #DEI-dialogue ul.list.--left li:nth-child(even) picture { margin-left: 0; }
  #DEI-dialogue ul.list.--right li:nth-child(odd) picture { margin-left: 0; }
  #DEI-dialogue ul.list.--right li:nth-child(even) picture { margin-right: 0; }  
}