section,
section+section {
  margin-top: 0;
}
#footerContainer {
  background-color: #FFF;
}
.txtNowrap {
  white-space: nowrap;
}
@media print, screen and (min-width: 769px) {
  #globalNav>ul>li#newMenu>a>.title {
    border-color: transparent;
  }
  #globalNav>ul>#newMenu.current>a>.title:after {
    display: none;
  }
  #globalNav>ul>#newMenu.current>a:after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 0;
    margin-left: 0;
    margin-bottom: -4px;
    border-bottom: 4px solid #668bc9;
    bottom: 4px;
  }
  #globalNav>ul>#newMenu.current.active>a:after {
    border-color: #003da5;
  }
}
@media screen and (max-width: 768px) {
  #contentsContainer {
    padding: 62px 0 0;
  }
  #otherContentsWrap {
    margin: 0;
  }
}

@media print, screen and (min-width: 769px) {
  #snsIcons {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translate3d(0, -50%, 0);
    z-index: 2;
  }
  #snsIcons .snsWrap {
    padding: 6px 0;
    background-color: rgba(23, 62, 146, .6);
    box-shadow: .5px 1px 6px rgba(0, 0, 0, .3);
    text-align: center;
    color: #FFF;
  }
  #snsIcons .snsWrap+.snsWrap {
    margin-top: 10px;
  }
  #snsIcons .snsWrap header {
    font-family: Arial, Verdana;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: -.05em;
    transform: scale(.7, 1);
  }
  #snsIcons .snsWrap nav {
    padding: 0 6px;
  }
  #snsIcons .snsWrap nav a {
    display: block;
    width: 32px;
    margin-top: 6px;
  }
}
@media print, screen and (max-width: 768px) {
  #snsIcons {
    background-color: #FFF;
  }
  #snsIcons .shares {
    padding: 5%;
    text-align: center;
  }
  #snsIcons .shares header {
    margin-bottom: .5em;
    font-size: 1.2em;
    font-weight: bold;
  }
  #snsIcons .shares nav {
    display: flex;
    justify-content: center;
  }
  #snsIcons .shares nav a {
    display: block;
    width: 10%;
    margin: 0 3%;
  }
  #snsIcons .officials {
    display: none;
  }
}
#allContainer {
  overflow: unset;
}
#breadcrumbNav {
  position: relative;
  z-index: 2;
}
#contentsContainer {
  position: relative;
}

#brandingMain {
  font-family: 'Noto Sans JP', sans-serif;
  font-feature-settings: "palt";
  color: #031A4B;
  line-height: 1.8;
  letter-spacing: .1em;
}
.longUrl {
  word-break: break-all;
  text-align: left;
}
#brandingMain a {
  color: #173e92;
  text-decoration: none;
}
#brandingMain .contentWrap {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}
.graphicContent a:hover img {
  opacity: .6;
}
@media print, screen and (min-width: 769px) {}
@media screen and (max-width:768px) {}
/* タイトル hover アニメーション */
a.imageHover {
  position: relative;
  display: block;
}
a.imageHover img {
  -webkit-mask-size: 300%;
  mask-size: 300%;
  -webkit-mask-position: 100% center;
  mask-position: 100% center;
  transition: -webkit-mask-position .5s ease, mask-position .5s ease;
}
a.imageHover:hover img {
  -webkit-mask-position: 0% center;
  mask-position: 0% center;
}
a.imageHover img.off {
  -webkit-mask-image: linear-gradient(-60deg, #000000 50%, transparent 50%);
  mask-image: linear-gradient(-60deg, #000000 50%, transparent 50%);
}
a.imageHover img.on {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-mask-image: linear-gradient(-60deg, transparent 50%, #000000 50%);
  mask-image: linear-gradient(-60deg, transparent 50%, #000000 50%);
}
.contBody.col3Cell {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: column;
}
.contBody.col3Cell .articleDescription {
  display: contents;
}
.contBody.col3Cell .articleDescription:nth-child(3n + 1)>* {
  grid-column-start: 1;
}
.contBody.col3Cell .articleDescription:nth-child(3n + 2)>* {
  grid-column-start: 2;
}
.contBody.col3Cell .articleDescription:nth-child(3n + 3)>* {
  grid-column-start: 3;
}
.contBody.col3Cell .articleDescription .btnArea {
  margin-bottom: 80px;
}
.contBody.col3Cell .articleDescription .imageObj .category {
  position: absolute;
  display: block;
  min-width: 9em;
  padding: .2em 1em;
  background-color: #173E92;
  border-top-right-radius: .6em;
  font-size: 12px;
  line-height: 1;
  color: #FFF;
  text-align: center;
  transform: translate3d(0, calc(-100% + 1px), 0);
}
.contBody.col3Cell .articleDescription .imageObj a img {
  transition: opacity .5s ease;
}
.contBody.col3Cell .articleDescription .imageObj figure {
  border: 1px solid #d6d6d6;
}
.articleDescription .modalOpen {
  position: relative;
  display: block;
}
.articleDescription .modalOpen::after {
  content: "";
  position: absolute;
  bottom: 1em;
  left: 1em;
  display: block;
  width: 26px;
  height: 30px;
  background: transparent url(../image/icon_play.png) no-repeat center center / cover;
  z-index: 2;
  transition: opacity .5s ease;
}
.articleDescription .modalOpen::before {
  content: "";
  position: absolute;
  bottom: 1em;
  left: 1em;
  display: block;
  width: 26px;
  height: 30px;
  background: transparent url(../image/icon_play_hover.png) no-repeat center center / cover;
  z-index: 2;
}
.articleDescription .btnArea .modalOpen::after,
.articleDescription .btnArea .modalOpen::before {
  display: none;
}
.articleDescription .modalOpen:hover img {
  opacity: .6;
}
.articleDescription .modalOpen:hover::after {
  opacity: 0;
}
.contBody.col3Cell .articleDescription .textObj {
  font-size: 1.6rem;
}
.contBody.col3Cell .articleDescription .textObj .date {
  position: relative;
  margin-top: 1em;
  font-size: 1.2rem;
  color: #173E92;
  overflow: hidden;
}
.contBody.col3Cell .articleDescription .textObj .date::after {
  content: "";
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 100%;
  height: 1px;
  background-color: #173E92;
  transform: translate3d(1em, 0, 0);
}
.contBody.col3Cell .articleDescription .textObj h3 {
  height: 3.8em;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.8;
  overflow: hidden;
}
.contBody.col3Cell .articleDescription .textObj dl {
  display: flex;
}
.contBody.col3Cell .articleDescription .textObj dl dt {
  width: 4.5em;
  text-align: justify-all;
}
.contBody.col3Cell .articleDescription .textObj dl dd {
  width: 1.5em;
  text-align: center;
}
.contBody.col3Cell .articleDescription .textObj dl dd:last-child {
  flex: 1;
  text-align: left;
}
.contBody.col3Cell .articleDescription .textObj .note {
  font-size: 1rem;
}
.contBody.col3Cell .articleDescription .textObj dl+.note {
  margin-top: 1em;
}
.contBody.col3Cell .articleDescription .btnArea {}
.contBody.col3Cell .articleDescription .btnArea a,
.btnArea a.hoverAction {
  display: inline-block;
  margin-top: 2em;
  border: 1px solid #173E92;
  background-image: linear-gradient(-60deg, transparent 50%, #173E92 50%);
  background-position: right center;
  background-size: 300% 100%;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  transition: background-position .5s ease;
}
.contBody.col3Cell .articleDescription .btnArea a:hover,
.btnArea a.hoverAction:hover {
  background-position: left center;
}
.contBody.col3Cell .articleDescription .btnArea a .text,
.btnArea a.hoverAction .text {
  display: block;
  padding: 1em 0;
  background-image: linear-gradient(-60deg, #173E92 50%, #FFFFFF 50%);
  background-position: right center;
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: background-position .5s ease;
}
.contBody.col3Cell .articleDescription .btnArea a:hover .text,
.btnArea a.hoverAction:hover .text {
  background-position: left center;
}
@media print, screen and (min-width: 769px) {
  .contentBlock+.contentBlock {
    padding: 144px 0;
  }
  .contBody.col3Cell {
    column-gap: 3%;
    margin-top: calc(100% * 96 / 1200);
  }
  .contBody.col3Cell .articleDescription .btnArea {
    display: flex;
    justify-content: center;
    align-items: start;
    flex-wrap: wrap;
  }
  .contBody.col3Cell .articleDescription .btnArea a,
  .btnArea a.hoverAction {
    width: 48%;
  }
  .contBody.col3Cell .articleDescription .btnArea a:nth-child(2n) {
    margin-left: 4%;
  }
  .contBody.col3Cell.slide~.indicator {
    display: none;
  }
}
@media screen and (max-width:768px) {
  .contentBlock+.contentBlock {
    padding: 88px 24px;
    overflow: hidden;
  }
  .contBody.col3Cell {
    column-gap: 4vw;
    width: calc(100vw * 580 / 750 * 3 + 10vw);
    margin-top: calc(100vw * 100 / 750);
  }
  .contBody.col3Cell .articleDescription {
    width: calc(100vw * 580 / 750);
  }
  .contBody.col3Cell .articleDescription .btnArea {
    text-align: center;
  }
  .contBody.col3Cell .articleDescription .btnArea a,
  .btnArea a.hoverAction {
    width: calc(100vw * 400 / 750);
  }
  .contBody.col3Cell.slide {
    transition: transform .3s ease;
  }
  .contBody.col3Cell.slide.cell1 {
    transform: translate3d(0, 0, 0);
  }
  .contBody.col3Cell.slide.cell2 {
    transform: translate3d(calc(-50% + 50vw - 24px), 0, 0);
  }
  .contBody.col3Cell.slide.cell3 {
    transform: translate3d(calc(-100% + 100vw - 48px), 0, 0);
  }
  .contBody.col3Cell.slide .articleDescription .btnArea {
    margin-bottom: 0;
  }
  .contBody.col3Cell.slide~.indicator {
    position: absolute;
    top: 5px;
    right: 0;
    display: flex;
  }
  .contBody.col3Cell.slide~.indicator span {
    display: block;
    width: 10px;
    height: 10px;
    margin-left: 15px;
    background-color: #FFF;
    border: 1px solid #173E92;
    border-radius: 10px;
    transition: background-color .3s ease;
  }
  .contBody.col3Cell.slide~.indicator span.this {
    background-color: #173E92;
  }
}

/* ===========================
   TOP AREA */
#brandingMain .siteContentsWrap #mainVisual {
  position: relative;
  margin-top: 0;
  padding: 0;
}
.bgVideo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #000;
}
.bgVideo video {
  width: 100%;
}
.bgVideo img.poster {
  display: none;
  min-width: 100%;
  min-height: 100%;
  max-width: none;
}
.bgVideo .soundBtn {
  position: absolute;
  top: 16px;
  right: 8px;
  background: transparent url(../image/icon_sound_on.png) no-repeat scroll center center / 100% auto;
  cursor: pointer;
}
.bgVideo .soundBtn.mute {
  background-image: url(../image/icon_sound_off.png);
}

@media print, screen and (min-width: 769px) {
  .bgVideo .soundBtn {
    width: 36px;
    height: 36px;
  }
}
@media screen and (max-width:768px) {
  .bgVideo {
    height: auto !important;
  }
  .bgVideo .soundBtn {
    width: 24px;
    height: 24px;
  }
}

.movieThumbnail {
  position: relative;
  display: inline-block;
  width: 100%;
}
.movieThumbnail::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 160px;
  height: 160px;
  background: transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OTggNDk4Ij48Zz48Y2lyY2xlIGN4PSIyNDkiIGN5PSIyNDkiIHI9IjIzOC41IiBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojZmZmO3N0cm9rZS1taXRlcmxpbWl0OjEwO3N0cm9rZS13aWR0aDoyMXB4Ii8+PHBvbHlnb24gcG9pbnRzPSIzNzMuMTcgMjQ5LjM5IDE3OSAxMzcuMjggMTc5IDM2MS40OSAzNzMuMTcgMjQ5LjM5IiBzdHlsZT0iZmlsbDojZmZmIi8+PC9nPjwvc3ZnPg==") scroll center center / cover;
  transform: translate3d(-50%, -50%, 0);
  opacity: .8;
}
.movieThumbnail:hover::after {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OTggNDk4Ij48Zz48Y2lyY2xlIGN4PSIyNDkiIGN5PSIyNDkiIHI9IjIzOC41IiBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojNjQ4Y2UzO3N0cm9rZS1taXRlcmxpbWl0OjEwO3N0cm9rZS13aWR0aDoyMXB4Ii8+PHBvbHlnb24gcG9pbnRzPSIzNzMuMTcgMjQ5LjM5IDE3OSAxMzcuMjggMTc5IDM2MS40OSAzNzMuMTcgMjQ5LjM5IiBzdHlsZT0iZmlsbDojNjQ4Y2UzOyIvPjwvZz48L3N2Zz4=");
}
.movieThumbnail.blue::after {
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCAzMDAgMzAwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojMTczRTkyO30KPC9zdHlsZT4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTE1MCwzMDBjLTQwLjEsMC03Ny43LTE1LjYtMTA2LjEtNDMuOUMxNS42LDIyNy43LDAsMTkwLjEsMCwxNTBTMTUuNiw3Mi4zLDQzLjksNDMuOUM3Mi4zLDE1LjYsMTA5LjksMCwxNTAsMAoJczc3LjcsMTUuNiwxMDYuMSw0My45YzI4LjMsMjguMyw0My45LDY2LDQzLjksMTA2LjFzLTE1LjYsNzcuNy00My45LDEwNi4xUzE5MC4xLDMwMCwxNTAsMzAweiBNMTUwLDEyLjcKCWMtMzYuNywwLTcxLjIsMTQuMy05Ny4xLDQwLjJTMTIuNywxMTMuMywxMi43LDE1MHMxNC4zLDcxLjIsNDAuMiw5Ny4xczYwLjQsNDAuMiw5Ny4xLDQwLjJjMzYuNywwLDcxLjItMTQuMyw5Ny4xLTQwLjIKCWMyNS45LTI1LjksNDAuMi02MC40LDQwLjItOTcuMWMwLTM2LjctMTQuMy03MS4yLTQwLjItOTcuMVMxODYuNywxMi43LDE1MCwxMi43eiBNMjI0LjgsMTUwLjJsLTExNy02Ny41djEzNS4xTDIyNC44LDE1MC4yeiIvPgo8L3N2Zz4K");
}
.movieThumbnail.blue:hover::after {
  opacity: .5;
}

.modalWindow {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 150;
}
.modalWindow .wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: rgba(3, 26, 75, .9);
}
.modalWindow .wrapper .contents {
  position: relative;
  overflow: auto;
}
.modalWindow .wrapper a.close {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 30px;
  height: 30px;
}
.modalWindow .wrapper a.close::before,
.modalWindow .wrapper a.close::after {
  content: "";
  position: absolute;
  top: 50%;
  display: block;
  width: 100%;
  height: 3px;
  background-color: #fff;
  border-radius: 2px;
}
.modalWindow .wrapper a.close::before {
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.modalWindow .wrapper a.close::after {
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.modalWindow .wrapper .contents #modalMovie {
  padding: 40px 0;
}
.modalWindow .wrapper iframe {
  vertical-align: top;
  width: 80vw;
  height: calc(80vw * 9 / 16);
}

body.modalOpen {
  overflow: hidden;
}
@media screen and (max-width:768px) {
  .movieThumbnail::after {
    width: 80px;
    height: 80px;
  }
  .modalWindow .wrapper .contents #modalMovie {
    padding: 30px 0;
  }
  .modalWindow .wrapper a.close {
    width: 20px;
    height: 20px;
  }
  .modalWindow .wrapper a.close::before,
  .modalWindow .wrapper a.close::after {
    height: 2px;
  }
  #movieContent.modalWindow .wrapper .contents {
    width: 90%;
  }
}

/* ===========================
   local navi */
#localNavi {
  position: sticky;
  top: 0;
  background-color: #173E92;
  z-index: 3;
}
#localNavi .contentWrap {
  max-width: 1200px;
  margin: 0 auto;
}
#localNavi nav {
  display: flex;
  justify-content: space-around;
}
#localNavi nav a {
  position: relative;
  display: block;
  letter-spacing: .1em;
  color: #FFF;
  text-decoration: none;
}
#localNavi nav>div>a {
  padding: .7em 1em;
  font-weight: bold;
}
#localNavi nav>div>a span {
  position: relative;
  display: block;
}
#localNavi nav>div>a span::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  border-bottom: 2px solid #FFFFFF;
  transition: width .2s ease;
}
#localNavi nav>div>a.this span::after,
#localNavi nav>div>a:hover span::after {
  width: 100%;
}
#localNavi nav>div {
  position: relative;
}
#localNavi nav .draoDown {
  display: none;
  position: absolute;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  z-index: 2;
}
#localNavi nav .draoDownOpen:hover~.draoDown,
#localNavi nav .draoDown:hover {
  display: block;
}
#localNavi nav .draoDown a {
  display: block;
  margin: 0 auto;
  padding: .7em 1.5em;
  border: 2px solid #D8DFEF;
  background-color: #EFF2F7;
  font-size: .935em;
  color: #031A4B;
  text-align: center;
  white-space: nowrap;
}
#localNavi nav .draoDown a:nth-child(2n+1) {
  border-color: #D0D8E9;
  background-color: #D0D8E9;
}
#localNavi nav .draoDown a span {
  position: relative;
  display: inline-block;
}
#localNavi nav .draoDown a:hover {
  background-color: #173E92;
  color: #FFF;
}

/* ===========================
   KV */
#kvArea {
  position: relative;
  overflow: hidden;
}
#kvArea .bgMovie {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
#kvArea .bgMovie video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
}
#kvArea .bgMovie {
  width: 100%;
}
#kvArea .contentWrap {
  position: relative;
}
#kvArea .linkButton {
  position: absolute;
  bottom: 2em;
}
@media print, screen and (min-width: 769px) {
  #kvArea .contentWrap {
    height: 694px;
  }
  #kvArea {
    height: 694px;
  }
  #kvArea .linkButton {
    right: 0;
    width: calc(100% * 213 / 1200);
  }
}
@media screen and (max-width:768px) {
  #kvArea .bgMovie video {
    width: auto;
    height: 100vw;
  }
  #kvArea .contentWrap {
    height: 100vw;
  }
  #kvArea .linkButton {
    left: 50%;
    width: calc(100vw * 400 / 750);
    transform: translate3d(-50%, 0, 0);
  }
  #kvArea .linkButton .linkText {
    white-space: nowrap;
  }
}
/* ===========================
   CONCEPT */
#conceptArea {
  background-color: #173E92;
  color: #FFF;
}
#conceptArea #modalConcept {
  display: none;
}
#conceptArea .moreBtn {
  border: 1px solid #fff;
  background-image: linear-gradient(-60deg, #173E92 50%, #FFFFFF 50%);
}
#conceptArea .moreBtn .text {
  background-image: linear-gradient(-60deg, #FFFFFF 50%, #173E92 50%);
  ;
}
#modalConcept {
  background-color: #fff;
}
@media print, screen and (min-width: 769px) {
  #conceptArea {
    padding: 64px 0;
  }
  #conceptArea header h2 {
    margin-bottom: 48px;
  }
  #conceptArea header h2 img {
    width: calc(100% * 190 / 1200);
  }
  #conceptArea .contentBody {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }
  #conceptArea .logoArea {
    width: calc(100% * 280 / 1200);
  }
  #conceptArea .txtArea {
    flex: 1;
  }
  #conceptArea .txtArea img {
    margin: 0 10%;
    width: 80%;
  }
  #conceptArea .btnArea {
    margin-top: 3em;
    text-align: right;
  }
  #conceptArea .moreBtn {
    width: 14em;
    font-size: 1.2rem;
  }
  #conceptArea .moreBtn button {
    padding: 1em 3em;
  }
  #modalConcept {
    width: min(100vw, 1200px);
  }
  #modalConcept .modalWrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    max-height: 764px;
    margin-top: 40px;
    padding: 8% 10%;
  }
  #modalConcept .modalWrap .textArea {
    width: calc(100% * 514 / (1200 - 240));
  }
  #modalConcept .modalWrap .textArea img {
    width: 100%;
  }
  #modalConcept .modalWrap .logoArea {
    width: calc(100% * 380 / (1200 - 240));
  }
  #modalConcept .modalWrap .logoArea img {
    width: 100%;
  }
}
@media screen and (max-width:768px) {
  #conceptArea {
    padding: 48px 24px;
  }
  #conceptArea header h2 {
    margin-bottom: 48px;
  }
  #conceptArea header h2 img {
    width: calc(100vw * 283 / 750);
  }
  #conceptArea .logoArea {
    width: calc(100vw * 360 / 750);
    margin: 0 auto;
  }
  #conceptArea .txtArea {
    margin-top: 20px;
    width: 100%;
  }
  #conceptArea .btnArea {
    margin-top: 20px;
    text-align: center;
  }
  #conceptArea .btnArea a {
    width: calc(100vw * 400 / 750);
  }
  #modalConcept {
    margin-top: 30px;
    padding: 15vw calc(100vw * 40 / 750);
  }
  #modalConcept .modalWrap {}
  #modalConcept .modalWrap img {
    width: calc(100vw * 570 / 750);
  }
  #modalConcept .modalWrap .logoArea {
    margin-top: 20vw;
  }
}

/* ===========================
   TOPICS */
#topicsArea {
  background-color: #fff;

}
@media print, screen and (min-width: 769px) {
  #topicsArea header h2 {
    width: calc(100% * 180 / 1200);
  }
  #topicsArea .contBody.col3Cell {
    margin-bottom: -80px;
  }
}
@media screen and (max-width:768px) {
  #topicsArea header h2 {
    width: calc(100vw * 268 / 750);
  }
}
/* ===========================
   ITOCHU SDGs STUDIO */
#sdgsStudioArea {
  /*background-color: #EAECF0;*/
  background-color: #EFF2F7;
}
#sdgsStudioArea header > h3 {
  width: 100%;
  border-bottom: 4px solid #173E92;
}
@media print, screen and (min-width: 769px) {
  #sdgsStudioArea {}
  #sdgsStudioArea header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #sdgsStudioArea header h2 {
    width: calc(100% * 422 / 1200);
    line-height: 1;
  }
  #sdgsStudioArea header .about {}
  #sdgsStudioArea header .about a {
    width: auto;
    margin-top: 0;
    border: 1px solid #173E92;
    letter-spacing: .1em;
  }
  #sdgsStudioArea header .about a .text {
    padding: 1em;
    font-size: 1.2rem;
    font-weight: bold;
  }
  #sdgsStudioArea header .official {
    font-size: 1.2rem;
    font-weight: bold;
    color: #173E92;
    line-height: 40px;
  }
  #sdgsStudioArea header .official a {
    display: inline-block;
  }
  #sdgsStudioArea header .official img {
    width: 40px;
    margin-left: 20px;
  }
  #sdgsStudioArea header .official a:hover img {
    opacity: .6;
  }
  #sdgsStudioArea header .logo {
    position: relative;
    width: calc(100% * 230 / 1200);
  }
  #sdgsStudioArea header .logo img {
    position: absolute;
    top: 50%;
    max-width: none;
    width: calc(100% * 280 / 230);
    transform: translate3d(-20px, -60%, 0);
  }
  #sdgsStudioArea .contBody.col3Cell {
    margin-top: calc(100% * 50 / 1200);
  }
  #exhibition {
    margin-top: 80px;
    margin-bottom: -80px;
  }
  #exhibition header h3 a {
    width: calc(100% * 199/ 1200);
  }
  #radioStation {
    margin-top: 120px;
    margin-bottom: -80px;
  }
  #radioStation header h3 img {
    width: calc(100% * 210 / 1200);
  }
  #sdgsSpinear {
    margin-top: 45px;
  }
  #sdgsSpinear header h4 {
    width: calc(100% * 372 / 1200);
  }
  #sdgsSpinear .jWaveLogo {}
  #sdgsSpinear .jWaveLogo img {
    width: calc(100% * 190 / 580);
  }
  #sdgsSpinear .articleDescription {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
  }
  #sdgsSpinear .articleDescription>* {
    width: calc((100% - 40px) / 2);
  }
  #sdgsSpinear .articleDescription h3 {
    font-size: 2rem;
    font-weight: bold;
  }
  #sdgsSpinear .articleDescription p {
    margin-top: 2em;
    letter-spacing: 2px;
    line-height: 2;
  }
  #sdgsSpinear .articleDescription .btnArea {
    margin-top: 1em;
  }
  #sdgsSpinear .articleDescription .btnArea a {
    width: 166px;
  }
  #programArea {
    margin-top: 120px;
  }
  #programArea header h4 {
    width: calc(100% * 219/ 1200);
  }
  #specialContentsArea {
    margin-top: 40px;
  }
  #specialContentsArea::before {
    content: "";
    display: block;
    width: 90%;
    height: 0px;
    margin: 0 auto 120px;
    border-top: 1px solid #173E92;
  }
  #specialContentsArea header h4 {
    width: calc(100% * 255/ 1200);
  }

  #academy {
    margin-top: 120px;
  }

  #academy header h3 img {
    width: calc(100% * 143 / 1200);
  }
  #miraiTerrace {
    margin-top: 45px;
  }
  #miraiTerrace header h4 {
    width: calc(100% * 98 / 1200);
  }
  #miraiTerrace .articleDescription {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
  }
  #miraiTerrace .articleDescription>* {
    width: calc((100% - 40px) / 2);
  }
  #miraiTerrace .articleDescription h3 {
    font-size: 2rem;
    font-weight: bold;
  }
  #miraiTerrace .articleDescription p {
    letter-spacing: 2px;
    line-height: 2;
  }
  #miraiTerrace .articleDescription .btnArea {
    margin-top: 1em;
  }
  #miraiTerrace .articleDescription .btnArea a {
    width: 166px;
  }
  #miraiTerraceEyes {
    margin-top: 120px;
    margin-bottom: -80px;
  }
  #miraiTerraceEyes header h4 {
    width: calc(100% * 182/ 1200);
  }

  #dome {
    margin-top: 90px;
  }

  #dome header h3 img {
    width: calc(100% * 400 / 1200);
    margin-bottom: 3px;
  }
  #domeTopics {
    margin-top: 45px;
  }
  #domeTopics header h4 {
    font-weight: bold;
    color: #004097;
    font-size: 120%;
    width: calc(100% * 620 / 1200);
  }
  #domeTopics .articleDescription {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
  }
  #domeTopics .articleDescription>* {
    width: calc((100% - 40px) / 2);
  }
  #domeTopics .articleDescription h3 {
    font-size: 2rem;
    font-weight: bold;
  }
  #domeTopics .articleDescription p {
    letter-spacing: 2px;
    line-height: 2;
  }
  #domeTopics .articleDescription .btnArea {
    margin-top: 1em;
  }
  #domeTopics .articleDescription .btnArea a {
    width: 166px;
  }

  #cafe {
    margin-top: 90px;
  }

  #cafe header h3 img {
    width: calc(100% * 250 / 1200);
    margin-bottom: 3px;
  }
  #cafeTopics {
    margin-top: 45px;
  }
  #cafeTopics header h4 {
    font-weight: bold;
    color: #004097;
    font-size: 120%;
    width: calc(100% * 620 / 1200);
  }
  #cafeTopics .articleDescription {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
  }
  #cafeTopics .articleDescription>* {
    width: calc((100% - 40px) / 2);
  }
  #cafeTopics .articleDescription h3 {
    font-size: 2rem;
    font-weight: bold;
  }
  #cafeTopics .articleDescription p {
    letter-spacing: 2px;
    line-height: 2;
  }
  #cafeTopics .articleDescription .btnArea {
    margin-top: 1em;
  }
  #cafeTopics .articleDescription .btnArea a {
    width: 166px;
  }
}
@media screen and (max-width:768px) {
  #sdgsStudioArea header {
    position: relative;
  }
  #sdgsStudioArea header h2 {
    width: calc(100vw * 633 / 750);
  }
  #sdgsStudioArea header .about {
    width: calc(100vw * 345 / 750);
    margin-top: 10vw;
    margin-left: auto;
  }
  #sdgsStudioArea header .about a {
    width: 100%;
    margin-top: 0;
    border: 1px solid #173E92;
    letter-spacing: .1em;
    text-align: left;
  }
  #sdgsStudioArea header .about a .text {
    padding: .5em 1em;
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1.4;
  }
  #sdgsStudioArea header .official {
    display: flex;
    justify-content: space-between;
    width: calc(100vw * 345 / 750);
    margin-top: 5vw;
    margin-left: auto;
    font-size: 1.2rem;
    font-weight: bold;
    color: #173E92;
    line-height: 1.4;
  }
  #sdgsStudioArea header .official img {
    width: calc(100vw * 80 / 750);
  }
  #sdgsStudioArea header .logo {}
  #sdgsStudioArea header .logo img {
    position: absolute;
    top: 10vw;
    width: calc(100vw * 330 / 750);
    transform: translate3d(-15%, 0, 0);
  }
  #sdgsStudioArea .contBody.col3Cell {
    margin-top: calc(100vw * 40 / 750);
  }
  #exhibition {
    margin-top: 40px;
  }
  #exhibition header h3 a {
    width: calc(100vw * 277 / 750);
  }
  #radioStation {
    margin-top: 20vw;
  }
  #radioStation header h3 img {
    width: calc(100vw * 313 / 750);
  }
  #sdgsSpinear {
    margin-top: 7vw;
  }
  #sdgsSpinear header h4 {
    width: calc(100vw * 396 / 750);
  }
  #sdgsSpinear .imageObj {
    margin-top: 5vw;
  }
  #sdgsSpinear .jWaveLogo img {
    width: calc(100vw * 300 / 750);
  }
  #sdgsSpinear .textObj {
    margin-top: 5vw;
    letter-spacing: .2em;
  }
  #sdgsSpinear .articleDescription h3 {
    font-size: 2rem;
    font-weight: bold;
  }
  #sdgsSpinear .articleDescription h3+p {
    margin-top: 1em;
  }
  #sdgsSpinear .articleDescription p {
    font-size: 1.5rem;
  }
  #sdgsSpinear .articleDescription p .wordBlock {
    letter-spacing: .1em;
    white-space: nowrap;
  }
  #sdgsSpinear .articleDescription .btnArea {
    margin-top: 1em;
    text-align: center;
  }
  #programArea {
    margin-top: 80px;
  }
  #programArea header h4 {
    width: calc(100vw * 385 / 750);
  }
  #specialContentsArea {
    margin-top: 80px;
  }
  #specialContentsArea::before {
    content: "";
    display: block;
    width: 100%;
    height: 0px;
    margin-bottom: 60px;
    border-top: 1px solid #173E92;
  }
  #specialContentsArea header h4 {
    width: calc(100vw * 438/ 750);
  }

  #academy {
    margin-top: 80px;
  }
  #academy header h3 img {
    width: calc(100vw * 208 / 750);
  }

  #miraiTerrace {
    margin-top: 7vw;
  }
  #miraiTerrace header h4 {
    width: calc(100vw * 188 / 750);
  }
  #miraiTerrace .imageObj {
    margin-top: 5vw;
  }
  #miraiTerrace .jWaveLogo img {
    width: calc(100vw * 300 / 750);
  }
  #miraiTerrace .textObj {
    margin-top: 5vw;
    letter-spacing: .2em;
  }
  #miraiTerrace .articleDescription h3 {
    font-size: 2rem;
    font-weight: bold;
  }
  #miraiTerrace .articleDescription h3+p {
    margin-top: 1em;
  }
  #miraiTerrace .articleDescription p {
    font-size: 1.5rem;
  }
  #miraiTerrace .articleDescription p .wordBlock {
    letter-spacing: .1em;
    white-space: nowrap;
  }
  #miraiTerrace .articleDescription .btnArea {
    margin-top: 1em;
    text-align: center;
  }
  #miraiTerraceEyes {
    margin-top: 80px;
  }
  #miraiTerraceEyes header h4 {
    width: calc(100vw * 320 / 750);
  }

  #dome {
    margin-top: 80px;
  }
  #dome header h3 img {
    width: calc(100vw * 580 / 750);
  }

  #domeTopics {
    margin-top: 7vw;
  }
  #domeTopics header h4 {
    font-weight: bold;
    color: #004097;
    font-size: 120%;
    width: calc(100vw * 580 / 750);
  }
  #domeTopics .imageObj {
    margin-top: 5vw;
  }
  #domeTopics .jWaveLogo img {
    width: calc(100vw * 660 / 750);
  }
  #domeTopics .textObj {
    margin-top: 5vw;
    letter-spacing: .2em;
  }
  #domeTopics .articleDescription h3 {
    font-size: 2rem;
    font-weight: bold;
  }
  #domeTopics .articleDescription h3+p {
    margin-top: 1em;
  }
  #domeTopics .articleDescription p {
    font-size: 1.5rem;
  }
  #domeTopics .articleDescription p .wordBlock {
    letter-spacing: .1em;
    white-space: nowrap;
  }
  #domeTopics .articleDescription .btnArea {
    margin-top: 1em;
    text-align: center;
  }

  #cafe {
    margin-top: 80px;
  }
  #cafe header h3 img {
    width: calc(100vw * 360 / 750);
  }

  #cafeTopics {
    margin-top: 7vw;
  }
  #cafeTopics header h4 {
    font-weight: bold;
    color: #004097;
    font-size: 120%;
    width: calc(100vw * 580 / 750);
  }
  #cafeTopics .imageObj {
    margin-top: 5vw;
  }
  #cafeTopics .jWaveLogo img {
    width: calc(100vw * 660 / 750);
  }
  #cafeTopics .textObj {
    margin-top: 5vw;
    letter-spacing: .2em;
  }
  #cafeTopics .articleDescription h3 {
    font-size: 2rem;
    font-weight: bold;
  }
  #cafeTopics .articleDescription h3+p {
    margin-top: 1em;
  }
  #cafeTopics .articleDescription p {
    font-size: 1.5rem;
  }
  #cafeTopics .articleDescription p .wordBlock {
    letter-spacing: .1em;
    white-space: nowrap;
  }
  #cafeTopics .articleDescription .btnArea {
    margin-top: 1em;
    text-align: center;
  }

}
/* ===========================
   ARTICLE */
#articleArea {
  background-color: #fff;
}
@media print, screen and (min-width: 769px) {
  #articleArea header h2 {
    width: calc(100% * 202 / 1200);
  }
  #articleArea .contBody.col3Cell {
    margin-bottom: -80px;
  }
}
@media screen and (max-width:768px) {
  #articleArea header h2 {
    width: calc(100vw * 303 / 750);
  }
}
/* ===========================
   CONTENTS GALLERY */
#galleryArea {
  background-color: #173E92;
  color: #FFF;
}
@media print, screen and (min-width: 769px) {
  #galleryArea header {
    display: flex;
    justify-content: start;
    align-items: center;
  }
  #galleryArea header h2 {
    width: calc(100% * 438 / 1200);
    line-height: 1;
  }
  #galleryArea header p {
    flex: 1;
    margin-left: 40px;
    font-size: 1.6rem;
    letter-spacing: .2em;
    line-height: 2;
  }
  #galleryArea .contBody {
    margin-top: 5%;
    display: flex;
    justify-content: space-between;
  }
  #galleryArea .movieContent,
  #galleryArea .graphicContent {
    width: calc(100% * 580 / 1200);
  }
  #galleryArea .movieContent h3 {
    width: calc(100% * 90 / 580);
  }
  #galleryArea .graphicContent h3 {
    width: calc(100% * 128 / 580);
  }
  #galleryArea .articleDescription {
    margin-top: 5%;
  }
  #galleryArea .articleDescription p {
    margin-top: .8em;
    font-size: 1.6rem;
    color: #FFF;
    text-align: center;
  }
}
@media only screen and (max-width: 768px) {
  #galleryArea header p {
    margin-top: 10vw;
    font-size: 1.5rem;
    letter-spacing: .2em;
    line-height: 2;
  }
  #galleryArea .movieContent,
  #galleryArea .graphicContent {
    margin-top: 10vw;
  }
  #galleryArea .movieContent h3 {
    width: calc(100vw * 135 / 750);
  }
  #galleryArea .graphicContent h3 {
    width: calc(100vw * 192 / 750);
  }
  #galleryArea .articleDescription {
    margin-top: 7vw;
  }
  #galleryArea .articleDescription p {
    margin-top: .8em;
    font-size: 1.5rem;
    text-align: center;
  }
}
/* ===========================
   星の商人 */
#relatedArea {
  background-color: #fff;
}
#relatedArea .magazines .index {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
}
#relatedArea .magazines .index figure figcaption {
  margin-top: .8em;
  text-align: center;
  font-weight: bold;
}
#relatedArea .magazines .index a:hover img {
  opacity: .6;
}
@media print, screen and (min-width: 769px) {
  #relatedArea header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #relatedArea header h2 {
    width: calc(100% * 135 / 1200);
  }
  #relatedArea header p {
    flex: 1;
    margin-left: 40px;
    font-size: 1.6rem;
    letter-spacing: .2em;
    line-height: 2;
  }
  #relatedArea header .logo {
    position: relative;
    width: calc(100% * 280 / 1200);
  }
  #relatedArea header .logo img {
    position: absolute;
    top: 50%;
    transform: translate3d(0, -50%, 0);
  }
  #relatedArea .magazines {
    margin-top: 5%;
  }
  #relatedArea .magazines .index>* {
    width: 16.5%;
    margin-top: 5%;
    padding: 0 1.5%;
  }
}
@media only screen and (max-width: 768px) {
  #relatedArea header {
    position: relative;
  }
  #relatedArea header h2 {
    width: calc(100vw * 203 / 750);
  }
  #relatedArea header p {
    margin-top: 12vw;
    font-size: 1.5rem;
    letter-spacing: .15em;
    line-height: 2;
  }
  #relatedArea header .logo {
    position: absolute;
    top: -5vw;
    right: 0;
    width: calc(100vw * 218 / 750);
  }
  #relatedArea header .logo img {}
  #relatedArea .magazines .index {
    justify-content: space-between;
    ;
  }
  #relatedArea .magazines .index>* {
    width: 46%;
    margin-top: 10vw;
  }
  #relatedArea .magazines .index figure figcaption {
    font-size: 1.5rem;
  }
}

/* 小さい画面対応 */
@media only screen and (min-width: 769px) and (max-width: 1280px) {
  .contentBlock {
    padding-right: 40px !important;
    padding-left: 40px !important;
  }
  #brandingMain #articleText #cafePage.contentBlock {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .contentBlock#kvArea {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  #localNavi {
    padding-right: 0 !important;
    padding-left: 0 !important;
    font-size: min(1.2vw, 1.5rem);
  }
  #conceptArea .logoArea {
    width: calc(100vw * 280 / 1200);
  }
  #conceptArea .btnArea {
    margin-top: 1em;
  }
  .contBody.col3Cell .articleDescription .textObj h3 {
    font-size: min(1.8vw, 2rem);
  }
  .contBody.col3Cell .articleDescription .textObj {
    font-size: min(1.4vw, 1.6rem);
  }
  .contBody.col3Cell .articleDescription .btnArea a,
  .btnArea a.hoverAction {
    font-size: min(1vw, 1.2rem);
  }
  .contBody.col3Cell .articleDescription .btnArea a .text {
    white-space: nowrap;
  }
  .contBody.col3Cell .articleDescription .textObj .note {
    font-size: min(.9vw, 1rem);
  }
  #sdgsStudioArea header .about a .text {
    font-size: min(1vw, 1.2rem);
  }
  #sdgsStudioArea header .official {
    font-size: min(1vw, 1.2rem);
    line-height: 3vw;
  }
  #sdgsStudioArea header .official img {
    width: 3vw;
    margin-left: 1vw;
  }
  #sdgsSpinear .articleDescription h3 {
    font-size: min(1.8vw, 2rem);
  }
  #sdgsSpinear .articleDescription h3+p {
    font-size: min(1.4vw, 1.5rem);
  }
  #galleryArea header p {
    font-size: min(1.4vw, 1.6rem);
  }
  #relatedArea header p {
    font-size: min(1.3vw, 1.6rem);
  }
  #relatedArea .magazines .index figure figcaption {
    font-size: min(1.4vw, 1.5rem);
  }
}

/* ===========================
   カテゴリトップ */
#articleText .articleDescription .category {
  display: none;
}
#articleText #topicsPage .articleDescription .category {
  display: block;
}
.categoryTop header.sdgsHead {
  background-color: #E9EDF5 !important;
  background-image: none !important;
}
.categoryTop header.sdgsHead .logo img {
  transform: translate3d(0, -8%, 0);
}
.categoryTop header.sdgsHead .flexBox {
  display: flex;
  align-items: center;
}
@media print, screen and (min-width: 769px) {
  .categoryTop {
    padding-top: calc(100% * 100 / 1200);
  }
  #topicsPage header h2 {
    width: calc(100% * 140 / 1200);
  }
  #exhibitionPage {
    padding-top: 0;
  }
  .categoryTop header.sdgsHead {
    margin-right: -40px;
    margin-left: -40px;
  }
  .categoryTop header.sdgsHead .flexBox {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 0;
    justify-content: space-evenly;
  }
  .categoryTop header.sdgsHead .logo {
    width: calc(100% * 306 / 1200);
  }
  .categoryTop header.sdgsHead .text {
    width: calc(100% * 537 / 1200);
  }
  #exhibitionPage header h2 {
    width: calc(100% * 220 / 1200);
  }
  #programNewsPage header h2 {
    width: calc(100% * 330 / 1200);
  }
  #miraiTerraceEyesPage {
    padding-top: 0;
  }
  #miraiTerraceEyesPage header h2 {
    width: calc(100% * 266 / 1200);
  }
  #articlePage header h2 {
    width: calc(100% * 163 / 1200);
  }
  #galleryPage header h2 {
    width: calc(100% * 400 / 1200);
  }
  #brandingMain #articleText #cafePage{
    padding-top: 0;
  }
  #brandingMain #cafePage .contentWrap{
    max-width: 100%;
  }
  #cafePage header{
    background-color: #E9EDF5;
    text-align: center;
    padding: 35px 0 60px;
  }
  #cafePage header h1{
    font-weight: bold;
    font-size: 2.6em;
    color: #173E92;
    margin-bottom: 15px;
  }
  #cafePage header h2{
    max-width: 270px;
    margin: 0 auto;
  }
  #cafePage .bxslider{
    margin-left: calc(100vw / 3);
  }
  #cafePage .bxslider li{
    /*margin-right: 50vw;
    margin-left: -50vw;*/
  }
  #brandingMain #articleText #cafePage .articleBody{
    margin-bottom: 50px;
    max-width: 100%;
  }
  #brandingMain #articleText #cafePage .articleBody .mapBlock,
  #brandingMain #articleText #cafePage .articleBody .localMapBlock{
    max-width: 780px;
    margin: 0 auto;
  }
  #cafePage .textBlock01{
    margin-top: 50px;
  }
  #cafePage .textBlock01 p{
    text-align: center;
    margin-bottom: 20px;
    font-weight: bold;
    color: #173E92;
  }
  #cafePage .articleBody h3{
    text-align: center;
    margin-bottom: 30px;
    font-weight: bold;
    color: #173E92;
    font-size: 1.8em;
  }
  #cafePage .textBlock{
    width: 780px;
    margin: 0 auto;
  }
  #cafePage .menuArea h5{
    font-weight: bold;
    color: #173E92;
    font-size: 1.4em;
    margin-bottom: 5px;
  }
  #cafePage .menuArea p{
    margin: 0 20px;
  }
  #cafePage .menuArea p+p{
    margin-top: 15px;
  }
  #cafePage .menuArea p+h5,
  #cafePage .menuArea ul+h5{
    margin-top: 30px;
  }
  #cafePage .menuArea ul{
    margin-left: 25px;
    margin-bottom: 10px;
    margin-top: 5px;
  }
  #cafePage .menuArea ul li{
    margin-bottom: 5px;
  }
  #cafePage .menuArea p.small{
    margin-top: 30px;
    font-size: 0.9em;
    margin-left: 0;
  }

  #brandingMain #articleText #cafePage .col2Cell{
    display: flex;
    width: 780px;
    margin: 0 auto 30px;
  }
  #brandingMain #articleText #cafePage .img.col2Cell{
    width: 980px;
  }
  #brandingMain #articleText #cafePage .img.col2Cell img{
    width: 50%;
    height: auto;
    margin: 30px auto;
  }
  #brandingMain #articleText #cafePage .col2Cell .img{
    margin-left: 20px;
  }
  #brandingMain #articleText #cafePage .col2Cell .img img{
    margin-bottom: 20px;
  }
  #brandingMain #articleText #cafePage .img.forSP{
    display:none;
  }
  #cafePage .articleBody.about{
    background-color: #E9EDF5;
    padding: 35px 0 65px;
  }
  #cafePage .articleBody.blueback{
    background-color: #E9EDF5;
    padding: 35px 0;
  }
  #cafePage .textBlock02{
    width: 620px;
    margin: 0 auto;
    font-size: 0.9em;
  }
  #cafePage .routeArea{
    font-size: 0.8em;
    padding: 15px 0 35px;
  }
  #cafePage h4{
    margin-bottom: 10px;
    color: #173E92;
    font-size: 1.1em;
  }
  ul.iconTypeDisc li::before,
  #cafePage h4 .txt::before{
    content: "";
    display: inline-block;
    width: 1.5em;
    height: 1em;
    content: "■";
    color: #173E92;
    vertical-align: baseline;
  }
  #cafePage .mapBlock iframe {
    width: 100%;
    height: calc(240 / 780 * 100vw);
    border-radius: min(20px, calc(20 / 1200 * 100vw));
    margin-bottom: 20px;
  }
  #cafePage .localMapBlock figure img{border-radius: min(20px, calc(20 / 1200 * 100vw));margin-bottom: 20px;}
  #cafePage .movieArea{background:#fff;padding-top: min(35px, calc(35 / 780 * 100vw));max-width: 780px; margin: 20px auto 0;}  
  #cafePage .movieArea .movie {width: 100%; aspect-ratio: 16 / 9;}
  #cafePage .movieArea .movie iframe {width: 100%; height: 100%;border-radius: min(20px, calc(20 / 1200 * 100vw));}
  #cafePage .btnArea{
    text-align: center;
    margin: 0 auto;
  }
  #cafePage .btnArea .text{
    font-size: 1.4em;
    padding: 20px 0;
  }
  #cafePage .sns_link{
    text-align: center;
    padding: 60px 0 15px;
  }
  #cafePage .sns_link p{
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 15px;
  }
  #cafePage .sns_link a img {
    width: calc(100vw * 38 / 1200);
  }
}
@media screen and (max-width:768px) {
  #brandingMain #articleText #cafePage .contentWrap {
    padding: 8% 0 0;
  }
  #cafePage header{
    background-color: #E9EDF5;
    text-align: center;
    padding: 25px 0 50px;
  }
  #cafePage header h1{
    font-weight: bold;
    font-size: 2.6em;
    color: #173E92;
    margin-bottom: 5px;
  }
  #cafePage header h2{
    max-width: 220px;
    margin: 0 auto;
  }
  #cafePage .bxslider{
    margin-left: calc(100vw / 1.5);
  }
  #cafePage .bxslider li{
    margin-right: 50vw;
    margin-left: -50vw;
  }
  #brandingMain #articleText #cafePage .articleBody{
    margin-bottom: 50px;
    max-width: 100%;
  }
  #brandingMain #articleText #cafePage .articleBody .mapBlock,
  #brandingMain #articleText #cafePage .articleBody .localMapBlock{
    max-width: 780px;
    margin: 0 auto;
  }
  #cafePage .textBlock01{
    margin-top: 0;
    padding: 0 2%;
  }
  #cafePage .textBlock01 p{
    text-align: center;
    margin-bottom: 15px;
    font-weight: bold;
    color: #173E92;
    font-size: 1.1em;
  }
  #cafePage .articleBody h3{
    text-align: center;
    margin-bottom: 30px;
    font-weight: bold;
    color: #173E92;
    font-size: 1.8em;
  }
  #cafePage .textBlock{
    width: 96%;
    margin: 0 auto;
    padding: 0 2%;
    font-size: 1.1em;
  }
  #cafePage .menuArea h5{
    font-weight: bold;
    color: #173E92;
    font-size: 1.4em;
    margin-bottom: 5px;
  }
  #cafePage .menuArea p{
    margin: 0 15px;
  }
  #cafePage .menuArea p+p{
    margin-top: 15px;
  }
  #cafePage .menuArea p+h5,

  #cafePage .menuArea ul+h5{
    margin-top: 30px;
  }
  #cafePage .menuArea ul{
    margin-left: 25px;
    margin-bottom: 10px;
    margin-top: 5px;
  }
  #cafePage .menuArea ul li{
    margin-bottom: 5px;
  }
  #cafePage .menuArea p.small{
    margin-bottom: 25px;
    margin-top: 30px;
    font-size: 0.9em;
    margin-left: 0;
  }
  #brandingMain #articleText #cafePage .img.forPC{
    display:none;
  }
  #brandingMain #articleText #cafePage .col2Cell{
    margin: 0 auto 30px;
  }
  #brandingMain #articleText #cafePage .img{
    display: flex;
    width: 94%;
    margin: 0 auto 15px;
  }
  #brandingMain #articleText #cafePage .img img{
    width: 46%;
    margin: 0 2%;
  }
  #cafePage .articleBody.about{
    background-color: #E9EDF5;
    padding: 35px 5% 65px;
  }
  #cafePage .articleBody.blueback{
    background-color: #E9EDF5;
    padding: 35px 0;
  }
  #cafePage .articleBody.access{
    padding: 0 5%;
  }
  #cafePage .textBlock02{
    width: 96%;
    margin: 0 auto;
    padding: 0 2%;
    font-size: 1.1em;
  }
  #cafePage .routeArea{
    font-size: 1em;
    padding: 15px 0 35px;
  }
  #cafePage h4{
    margin-bottom: 10px;
    color: #173E92;
    font-size: 1.1em;
  }
  ul.iconTypeDisc li::before,
  #cafePage h4 .txt::before{
    content: "";
    display: inline-block;
    width: 1.5em;
    height: 1em;
    content: "■";
    color: #173E92;
    vertical-align: baseline;
  }
  #cafePage .mapBlock iframe {
    width: 100%;
    height: calc(240 / 780 * 100vw);
    border-radius: min(20px, calc(20 / 1200 * 100vw));
    margin-bottom: 20px;
  }
  #cafePage .localMapBlock figure img{border-radius: min(20px, calc(20 / 1200 * 100vw));margin-bottom: 20px;}
  #cafePage .movieArea{background:#fff;padding-top: min(35px, calc(35 / 780 * 100vw));max-width: 780px; margin: 20px auto 0;width: 90%;
    padding: 0 5%;}  
  #cafePage .movieArea .movie {width: 100%; aspect-ratio: 16 / 9;}
  #cafePage .movieArea .movie iframe {width: 100%; height: 100%;border-radius: min(20px, calc(20 / 1200 * 100vw));}
  #cafePage .btnArea{
    text-align: center;
    margin: 0 auto;
  }
  #cafePage .btnArea .text{
    font-size: 1.4em;
    padding: 20px 0;
  }
  #cafePage .sns_link{
    text-align: center;
    padding: 30px 0 15px;
  }
  #cafePage .sns_link p{
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 15px;
  }
  #cafePage .sns_link a img {
    width: calc(100vw * 38 / 360);
  }
  #articleText .contBody.col3Cell {
    display: block;
    width: 100%;
  }
  #articleText .contBody.col3Cell .articleDescription {
    display: block;
    width: 100%;
  }
  #articleText .contBody.col3Cell .articleDescription+.articleDescription {
    margin-top: 20vw;
  }
  #topicsPage {
    padding-top: calc(100vw * 20 / 750);
  }
  #topicsPage header h2 {
    width: calc(100vw * 210 / 750);
  }
  .categoryTop header.sdgsHead .contentWrap {
    padding: 0 8% !important;
  }
  .categoryTop header.sdgsHead .flexBox {
    padding: 4vw 0;
    justify-content: space-between;
  }
  .categoryTop header.sdgsHead .logo {
    width: calc(100vw * 220 / 750);
  }
  .categoryTop header.sdgsHead .text {
    width: calc(100vw * 380 / 750);
  }
  #exhibitionPage header h2 {
    width: calc(100vw * 331 / 750);
  }
  #miraiTerraceEyesPage header h2 {
    width: calc(100vw * 399 / 750);
  }
  #programNewsPage header h2 {
    width: calc(100vw * 495 / 750);
  }
  #articlePage header h2 {
    width: calc(100vw * 245 / 750);
  }
  #galleryPage header h2 {
    width: calc(100vw * 599 / 750);
  }
}

/* ===========================
   記事ページ */
#brandingMain #articleText {
  line-height: 1.8;
  text-align: justify;
  color: #02153e;
}
#brandingMain #articleText em {
  font-weight: bold;
  font-style: normal;
}
#brandingMain #articleText header.articleHead {
  background: transparent url(../image/article_top_bg.gif) scroll repeat center center;
  background-size: 17px 17px;
}

#brandingMain #articleText .articleBody {
  max-width: 680px;
  margin: 0 auto;
  font-size: 1.2em;
}
#brandingMain #articleText .articleBody p.announce {
  margin-top: -1em;
  margin-bottom: 3em;
  font-size: 1.4rem;
  text-align: right;
}
#brandingMain #articleText .articleBody>header {
  color: #173e92;
}
#brandingMain #articleText .articleBody .lectureHead {
  margin-bottom: 3em;
  text-align: center;
}
#brandingMain #articleText .articleBody .lectureHead .lectureTitle {
  margin-bottom: 2em;
}
#brandingMain #articleText .articleBody .lectureHead .lectureLead {}
#brandingMain #articleText .articleBody .articleHead img {
  width: 100%;
}
#brandingMain #articleText .articleBody .articleHead .headLead {
  margin-top: 40px;
}
#brandingMain #articleText .articleBody .articleHead .headLead+.keyVisual {
  margin-top: 40px;
}
#brandingMain #articleText .articleBody .articleHead .titleText {
  margin-top: 1em;
  font-size: 1.5em;
  font-weight: bold;
}
#brandingMain #articleText .articleBody .articleHead .leadText {
  margin-top: 1em;
  font-weight: bold;
}
#brandingMain #articleText .articleBody .articleHead .leadText+.titleText {
  margin-top: 0;
}

#brandingMain #articleText .articleBody .textBody {
  overflow: hidden;
}
#brandingMain #articleText .articleBody .textBody>h3.sectionTitle {
  margin-top: 2em;
  font-size: 2.5em;
  font-weight: normal;
  text-align: center;
}
#brandingMain #articleText .articleBody .textBody img {
  width: 100%;
}
#brandingMain #articleText .articleBody .textBody h4 {
  margin: 3em 0 1.4em;
  font-size: 1.4em;
  font-weight: bold;
  line-height: 1.4;
  color: #173e92;
}
#brandingMain #articleText .articleBody .textBody a {
  text-decoration: underline;
}
#brandingMain #articleText .articleBody .textBody p {
  margin: 1.5em 0;
}
#brandingMain #articleText .articleBody .textBody p strong {
  font-weight: bold;
}
#brandingMain #articleText .articleBody .textBody .textBlock.remark {
  margin: 2em 0;
  padding: .5em 25px;
  background-color: #f0f5fa;
}
#brandingMain #articleText .articleBody .textBody .textBlock.remark .speaker {
  font-weight: bold;
}
#brandingMain #articleText .articleBody .textBody .textBlock.remark .speaker.type1 {
  color: #00a0b4;
}
#brandingMain #articleText .articleBody .textBody .textBlock.remark .speaker.type2 {
  color: #5032a0;
}
#brandingMain #articleText .articleBody .textBody .textBlock.remark .speaker.type3 {
  color: #a05078;
}
#brandingMain #articleText .articleBody .textBody .textBlock.remark .speaker.type4 {
  color: #c57215;
}
#brandingMain #articleText .articleBody .imgBlock+.imgBlock {
  margin-top: 1.5em;
}
#brandingMain #articleText .articleBody .imgBlock figure figcaption {
  color: #6d788e;
}
#brandingMain #articleText .articleBody .imgBlock figure figcaption p {
  margin: 0;
}
#brandingMain #articleText .articleBody>footer {
  margin-top: 4em;
  font-size: .9em;
  color: #6d788e;
}
#brandingMain #articleText .articleBody .ytBlock {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}
#brandingMain #articleText .articleBody .ytBlock iframe {
  position: absolute;
  width: 100%;
  height: 100%;
}

#brandingMain #articleText .backToTop {
  margin-top: 3em;
  text-align: center;
}
#brandingMain #articleText .backToTop a {
  font-weight: bold;
  color: #173e92;
}
#brandingMain #articleText .backToTop a:hover {
  color: #6a2387;
}
#brandingMain #articleText .articleBody .textBody>h3 {
  margin: 0 0 1.4em;
  font-size: 1.4em;
  font-weight: bold;
  line-height: 1.6;
  color: #173e92;
  text-align: center;
}
#brandingMain #articleText .articleBody .imgBlock+.textBody>h3 {
  margin-top: 3em;
}
#articleText .textBlock p.indent {
  text-indent: 1em;
}
#articleText .textBlock dl.indent {
  display: flex;
  line-height: 1.4;
}
#articleText .textBlock dl.indent+dl {
  margin-top: .5em;
}
#articleText .textBlock dl.indent dt {}
#articleText .textBlock dl.indent dd {
  flex: 1;
  margin-left: .5em;
}
#brandingMain #articleText .articleBody .textBody p.attent {
  margin-left: 1em;
  text-indent: -1em;
  line-height: 1.5;
}
#articleText dl.definition {}
#articleText dl.definition dt {
  margin-top: 1em;
  font-weight: bold;
}
#articleText .attentIndent {
  display: flex;
  font-size: .9em;
  line-height: 1.5;
}
#articleText .attentIndent+.attentIndent {
  margin-top: 1em;
}
#articleText .attentIndent .indent {
  margin-right: .5em;
  white-space: nowrap;
}
#articleText .attentIndent p {
  flex: 1;
  margin: 0 !important;
}

#brandingMain .relatedLinks {
  max-width: 760px;
  margin: 0 auto;
  border: 2px solid #ebebeb;
}
#brandingMain .relatedLinks {}
#brandingMain .relatedLinks .textObj h3 {
  font-size: 1.5em;
  font-weight: bold;
}

#brandingMain #articleRecommend .contentWrap {
  max-width: 680px;
}
#brandingMain #articleRecommend {
  /*background-color: #f0f5fa;*/
}
#brandingMain #articleRecommend h2 {
  font-size: 2.5em;
  font-weight: bold;
  text-align: center;
  line-height: 1;
}
#articleRecommend .textObj {}
#articleRecommend .textObj h3 {
  font-size: 1.5em;
  font-weight: bold;
}
#articleRecommend .textObj p {
  color: #02153e;
}

@media print, screen and (min-width: 769px) {
  #brandingMain #articleText {
    padding-bottom: 80px;
  }
  #brandingMain #articleText .articleBody p.announce {
    margin-right: calc((100% - min(1020px, 100vw)) / 2 + 10%);
  }
  #brandingMain #articleText header.articleHead {
    margin-bottom: 56px;
  }
  #brandingMain #articleText header.articleHead h2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 40px;
    padding: 5% 0;
  }
  #brandingMain #articleText header.articleHead h2 .text {
    font-size: 2em;
    font-weight: bold;
    color: #173e92;
  }
  #brandingMain #articleText .articleHead h2 .logo {
    width: 45%;
  }
  #brandingMain #articleText .articleHead h2 .text {
    width: 42%;
  }
  #brandingMain #articleText header.topicHead h2 {
    margin: 0 40px;
    padding: 5% 0;
    text-align: center;
  }
  #brandingMain #articleText .articleBody .lectureHead {
    margin-bottom: 56px;
  }
  #brandingMain #articleText .articleBody .lectureHead .lectureTitle {
    margin-bottom: 48px;
  }
  #brandingMain #articleText .articleBody .titleLead {}
  #brandingMain #articleText .articleBody .titleLead .titleObj {}
  #brandingMain #articleText .articleBody .titleLead .titleObj .titleText {
    font-size: 2.3em;
  }
  #brandingMain #articleText .articleBody .titleLead .leadObj {}
  #brandingMain #articleText .articleBody:first-child .textBody:first-child {
    margin-top: 120px;
  }
  #brandingMain #articleText .articleBody .textBody h4 {}
  #brandingMain #articleText .articleBody .imgBlock figure figcaption {
    font-size: .666em;
  }
  #brandingMain #articleText .articleBody .imgBlock figure.oriSize.center {
    text-align: center;
  }
  #brandingMain #articleText .articleBody .imgBlock figure.oriSize img {
    width: auto;
    max-width: 100%;
  }
  #brandingMain #articleText .articleBody .galleryBlock {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  #brandingMain #articleText .articleBody .galleryBlock figure {
    width: 48%;
    margin-top: 4%;
  }
  #brandingMain #articleRecommend {
    padding: 80px 0 120px;
  }
  #brandingMain #articleRecommend header {}
  #brandingMain #articleRecommend h2 {}
  #brandingMain #articleText .backToTop {
    margin-top: 5em;
  }
  #articleRecommend .recommendContent,
  #articleRecommend .recommendContent a {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #articleRecommend .recommendContent .movieObj,
  #articleRecommend .recommendContent .thumbnail {
    width: 40%;
  }
  #articleRecommend .recommendContent .textObj {
    width: 55%;
  }
  #articleRecommend .recommendContent .movieObj .imageObj {
    width: 100%;
  }
  #articleRecommend .recommendContent {
    position: relative;
    margin-top: 24px;
  }
  #articleRecommend header+.recommendContent {
    margin-top: 40px;
  }
  #articleRecommend .recommendContent.titleAbsolute {
    position: relative;
    margin-top: 8em;
  }
  #articleRecommend .recommendContent.titleAbsolute .textObj h3 {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    text-align: center;
    transform: translate3d(0, -120%, 0);
  }
  #articleRecommend .textObj p {}
  #articleRecommend .movieThumbnail::after {
    width: 64px;
    height: 64px;
  }
  .relatedLinks {
    margin-top: 80px !important;
  }
  .relatedLinks .relatedContent {
    padding: 40px;
  }
  .relatedLinks .relatedContent a {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .relatedLinks .relatedContent .movieObj,
  .relatedLinks .relatedContent .thumbnail {
    width: 40%;
  }
  .relatedLinks .relatedContent .textObj {
    width: 55%;
  }
  .relatedLinks .relatedContent .movieObj .imageObj {
    width: 100%;
  }
}
@media only screen and (max-width: 768px) {
  #brandingMain #articleText {
    padding: 0;
    line-height: 2;
  }
  #brandingMain #articleText .contentWrap {
    padding: 14% 8%;
  }
  #brandingMain #articleText .articleBody p.announce {
    margin-top: -2em;
    font-size: 1.2rem;
  }
  #brandingMain #articleText header.articleHead {
    background-size: 10px auto;
  }
  #brandingMain #articleText header.articleHead h2 {
    justify-content: center;
  }
  #brandingMain #articleText header.articleHead h2 .logo {
    width: 65%;
  }
  #brandingMain #articleText header.articleHead h2 .text {
    display: block;
    margin-top: 4em;
    line-height: 1.25;
  }
  #brandingMain #articleText .topicHead .contentWrap {
    padding: 14% 8% 0;
  }
  #brandingMain #articleText header.topicHead h2 {
    width: 35%;
    margin: 0 auto;
  }
  #brandingMain #articleText .articleBody .lectureHead .lectureTitle img {
    height: 4.75em;
  }
  #brandingMain #articleText .articleBody .lectureHead .lectureTitle.line2 img {
    height: 6.75em;
  }
  #brandingMain #articleText .articleBody .lectureHead .lectureLead {
    font-size: 1.2em;
    white-space: nowrap;
  }
  #brandingMain #articleText .articleBody .titleLead .titleObj {
    padding: 25px 0;
  }
  #brandingMain #articleText .articleBody .titleLead .titleObj .titleHead {
    width: 50%;
    border-right: 2px solid #fff;
  }
  #brandingMain #articleText .articleBody .titleLead .titleObj img {
    display: block;
    width: 60%;
    margin: 20px auto;
  }
  #brandingMain #articleText .articleBody .titleLead .titleObj .titleText {
    width: 50%;
    padding: 5%;
    font-size: 1.8em;
  }
  #brandingMain #articleText .articleBody .articleHead .titleText {
    font-size: 1.8em;
  }
  #brandingMain #articleText .articleBody .articleHead .leadText {
    font-size: 1.2em;
    letter-spacing: .1em;
    line-height: 2;
  }
  #articleRecommend .textObj {
    font-size: 1.2em;
  }
  #brandingMain #articleText .articleBody .imgBlock figure figcaption {
    font-size: .75em;
    line-height: 1.5;
  }
  #brandingMain #articleText .articleBody .textBody>h3 {
    margin: 0 -.5em 1.4em;
  }
  #brandingMain #articleText .articleBody .imgBlock+.textBody>h3 {
    margin-top: 3em;
  }
  #brandingMain #articleText .articleBody .textBody p.remark {
    padding: 10% 8%;
  }
  #brandingMain #articleText .articleBody .textBody .textBlock.remark .imgBlock {
    margin: 0 -25px;
  }
  #brandingMain #articleText .articleBody .textBody iframe {
    width: 100%;
    height: calc(84vw * 9 / 16);
  }
  #brandingMain #articleText .backToTop {
    font-size: 1.2em;
    font-weight: normal;
  }
  #brandingMain #articleText .articleBody .galleryBlock figure {
    margin-top: 8%;
  }
  #brandingMain #articleRecommend h2 {
    width: 50%;
    margin: 1em auto;
  }
  #articleRecommend .textObj h3 {
    margin: 1em 0;
  }
  #articleRecommend .textObj p {
    letter-spacing: .1em;
    text-align: justify;
  }
  #articleRecommend a .textObj h3 {
    margin: .5em 0;
  }
  #articleRecommend .recommendContent+.recommendContent {
    margin-top: 3em;
  }
  #articleText .textBlock .pm2021w dl.indent.spLayout {
    display: block;
  }
  #articleText .textBlock .pm2021w dl.indent.spLayout dd {
    margin-top: .25em;
    margin-left: 3.25em;
  }
  .relatedLinks {
    margin-top: 40px !important;
  }
  .relatedLinks .relatedContent {
    padding: 8%;
  }
}

@media print, screen and (min-width: 769px) {
  #brandingMain #articleText .articleBody .imgBlock figure figcaption.rightLarge {
    font-size: .75em;
    text-align: right;
  }
}
@media only screen and (max-width: 768px) {
  #brandingMain #articleText .articleBody .imgBlock figure figcaption.rightLarge {
    font-size: .85em;
    text-align: right;
  }
}

/* ========================================= */
/* vision movie */
.movieSection {
  margin-top: 5em;
  text-align: center;
}
.movieSection h3 {
  font-size: 1.4em;
  font-weight: bold;
  text-align: left;
  color: #173e92;
}
.tabContents {
  position: relative;
  padding: 2em 5%;
}
.tabContents .switchTab {
  position: absolute;
  top: -2em;
  right: 0;
  display: flex;
}
.tabContents .switchTab a {
  display: block;
  padding: .3em 1em;
  background-color: #173e92;
  color: #fff !important;
  line-height: 1;
}
.tabContents .switchTab a.this {
  background-color: #426ebc;
}
.tabContents .switchTab a:hover,
.tabContents .switchTab a:active {
  background-color: #648ce3;
}
.tabContents .tabObj {
  display: none;
}
.tabContents .tabObj.current {
  display: block;
}
.moreBtn {
  margin-top: 1em;
  text-align: center;
}
.moreBtn button {
  position: relative;
  -webkit-appearance: none;
  padding: .7em 2em;
  border: none;
  background-color: #173e92;
  font-size: 1.5rem;
  color: #fff;
  text-align: center;
  cursor: pointer;
}
.moreBtn button:hover {
  background-color: #648ce3;
}
.moreBtn button .iconToggle {
  position: absolute;
  top: 50%;
  right: 1em;
  width: 1.5em;
}
.moreBtn button .iconToggle::before {
  content: "";
  position: absolute;
  left: 8%;
  display: block;
  width: 50%;
  height: 2px;
  background-color: #fff;
  transform: rotate(45deg);
  transition: transform .5s ease-out;
}
.moreBtn button .iconToggle::after {
  content: "";
  position: absolute;
  right: 8%;
  display: block;
  width: 50%;
  height: 2px;
  background-color: #fff;
  transform: rotate(-45deg);
  transition: transform .5s ease-out;
}
.moreBtn.close button .iconToggle::before {
  transform: rotate(-45deg);
}
.moreBtn.close button .iconToggle::after {
  transform: rotate(45deg);
}

.graphicSection {
  margin-top: 5em;
  padding-bottom: 1px;
  text-align: center;
}
.graphicSection h3 {
  font-size: 1.4em;
  font-weight: bold;
  text-align: left;
  color: #173e92;
}
.graphicSection .np_graphic_flex {
  margin-bottom: 2em;
}
.graphicSection .moreBtn {}
.graphicSection .profileDetail {
  display: none;
  text-align: left;
}
.graphicSection .profileDetail.view {
  display: block;
}
.graphicSection .profileDetail p+p {
  margin-top: 1.5em;
}
.slideContents {
  position: relative;
  padding: 2em 5%;
}
.slideContents ul.slideWrap {
  position: relative;
  z-index: 2;
}
.slideContents ul.slideWrap li {
  display: none;
}
.slideContents ul.slideWrap li.current {
  display: block;
}
.slideContents ul.slideWrap li a {
  display: block;
  cursor: zoom-in;
  padding-bottom: 2em;
}
.slideContents .slideWrap+.attent {
  position: relative;
}
.slideContents .slideWrap+.attent>p {
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 1;
}
.slideContents .slideNav {}
.slideContents .slideNav .slideLeft {
  display: block;
  position: absolute;
  top: 50%;
  transform: translate3d(0, -50%, 0);
}
.slideContents .slideNav .slideLeft::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  width: 100%;
  height: 2px;
  background-color: #173e92;
  transform-origin: bottom left;
  transform: rotate(-40deg);
}
.slideContents .slideNav .slideLeft::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  width: 100%;
  height: 2px;
  background-color: #173e92;
  transform-origin: top left;
  transform: rotate(40deg);
}
.slideContents .slideNav .slideRight {
  display: block;
  position: absolute;
  top: 50%;
  transform: translate3d(0, -50%, 0);
}
.slideContents .slideNav .slideRight::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  width: 100%;
  height: 2px;
  background-color: #173e92;
  transform-origin: bottom right;
  transform: rotate(40deg);
}
.slideContents .slideNav .slideRight::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  width: 100%;
  height: 2px;
  background-color: #173e92;
  transform-origin: top right;
  transform: rotate(-40deg);
}
.slideContents .slideNav .paging {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
}
.slideContents .slideNav .paging span {
  display;
  block;
  width: 16px;
  height: 16px;
  margin: 0 4px;
  border-radius: 16px;
  background-color: #173e92;
  opacity: .5;
}
.slideContents .slideNav .paging span.current {
  opacity: .8;
}
.slideContents .slideWrap li.current {
  position: relative;
  display: block;
  transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1), opacity .2s ease-out;
}
.slideContents .slideWrap li.nextSlide {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  opacity: 0;
  transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1), opacity .5s ease-in;
}
.slideContents .slideWrap li.nextSlide.toLeft {
  transform: translate3d(-100%, 0, 0);
}
.slideContents .slideWrap li.nextSlide.toRight {
  transform: translate3d(100%, 0, 0);
}
.slideContents .slideWrap.slideLeft li.current {
  transform: translate3d(100%, 0, 0);
  opacity: 0;
}
.slideContents .slideWrap.slideRight li.current {
  transform: translate3d(-100%, 0, 0);
  opacity: 0;
}
.slideContents .slideWrap.slideLeft li.nextSlide,
.slideContents .slideWrap.slideRight li.nextSlide {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
@media print, screen and (min-width: 769px) {
  .slideContents ul.slideWrap {
    width: 600px;
    margin: 0 auto;
  }
  .slideContents .slideNav .slideLeft {
    left: -20px;
    width: 48px;
    height: 60px;
  }
  .slideContents .slideNav .slideRight {
    right: -20px;
    width: 48px;
    height: 60px;
  }
  .moreBtn button {
    width: 320px;
  }
}
@media only screen and (max-width: 768px) {
  .contentWrap>.imgBlock {
    margin: 0 calc(100vw * -.08);
  }
  .slideContents .slideNav .slideLeft {
    left: -15px;
    width: 32px;
    height: 40px;
  }
  .slideContents .slideNav .slideRight {
    right: -15px;
    width: 32px;
    height: 40px;
  }
  .moreBtn button {
    width: 90%;
  }
}

/* ========================================= */
/* 新聞広告の */
.graphicSection a {
  position: relative;
  display: inline-block;
}
.graphicSection a button.imageOver {
  position: absolute;
  bottom: 5%;
  left: 50%;
  padding: .5em 2em;
  background-color: #FFF;
  border: none;
  font-size: 1.5rem;
  color: #173e92;
  transform: translate3d(-50%, 0, 0);
}
.graphicSection a button.imageOver.btnBorder {
  border: 2px solid #173e92;
}
.graphicList li+li {
  margin-top: 6em;
}
.np_graphic_flex {
  margin-top: 3em;
}
.np_graphic_flex .imgArea .imgBorder {
  border: 2px solid #999;
}
.np_graphic_flex .txtArea {
  text-align: left;
}
@media print, screen and (min-width: 769px) {
  .np_graphic_flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }
  .np_graphic_flex .imgArea {
    width: 60%;
  }
  .np_graphic_flex .imgArea img {
    width: 100%;
  }
  .np_graphic_flex .txtArea {
    width: 30%;
  }
}

.graphicSection .graphicArticle {
  margin-top: 60px;
  margin-bottom: 100px;
}
.graphicSection .graphicArticle .imgArea {}
.graphicSection .graphicArticle .imgArea a {
  display: inline-block;
  pointer-events: none;
}
.graphicSection .graphicArticle .imgArea figure {
  width: 60%;
  margin: 0 auto;
  pointer-events: auto;
}
.graphicSection .graphicArticle a button {
  position: relative;
  margin-top: 20px;
  padding: .5em 2em;
  background-color: #FFF;
  border: 1px solid #999;
  font-size: 1.5rem;
  color: #173e92;
  cursor: pointer;
  pointer-events: auto;
}
.graphicSection .graphicArticle .txtArea {
  margin-top: 40px;
  text-align: left;
}
.graphicSection .graphicArticle .txtArea h4 {
  font-size: 1.1em;
}


/* SPECIAL CONTENTS */
@media print, screen and (min-width: 769px) {
  #specialContentsPage header h2 {
    width: calc(100% * 383 / 1200);
  }
}
@media screen and (max-width:768px) {
  #specialContentsPage header h2 {
    width: calc(100vw * 574 / 750);
  }
}


/* IE11 */
@media all and (-ms-high-contrast: none) {
  .contBody.col3Cell {
    display: flex;
    flex-wrap: wrap;
  }
  .contBody.col3Cell .articleDescription {
    display: block;
    width: 32%;
    margin-left: 2%;
  }
  .contBody.col3Cell .articleDescription:nth-child(3n+1) {
    margin-left: 0;
  }
  .contBody.col3Cell .articleDescription .imageObj .category {
    transform: translateY(-100%) translateY(1px);
  }
  .contBody.col3Cell .articleDescription .btnArea a,
  .btnArea a.hoverAction {}
  .contBody.col3Cell .articleDescription .btnArea a .text,
  .btnArea a.hoverAction .text {
    background-image: none;
    color: #173E92;
  }
  .contBody.col3Cell .articleDescription .btnArea a:hover .text,
  .btnArea a.hoverAction:hover .text {
    color: #fff;
  }
  a.imageHover img.on {
    opacity: 0;
    width: 100%;
  }
  a.imageHover img.off {
    width: 100%;
  }
  a.imageHover:hover img.on {
    opacity: 1;
  }
  a.imageHover:hover img.off {
    opacity: 0;
  }
  .graphicSection .graphicArticle .imgArea a {
    display: block;
  }
  #modalConcept {
    max-width: 1200px;
  }
}
/* 旧edge */
@supports (-ms-ime-align:auto) {
  .contBody.col3Cell {
    display: flex;
    flex-wrap: wrap;
  }
  .contBody.col3Cell .articleDescription {
    display: block;
    width: 32%;
    margin-left: 2%;
  }
  .contBody.col3Cell .articleDescription:nth-child(3n+1) {
    margin-left: 0;
  }
  a.imageHover img.on {
    opacity: 0;
  }
  a.imageHover img.off {}
  a.imageHover:hover img.on {
    opacity: 1;
  }
  a.imageHover:hover img.off {
    opacity: 0;
  }
  #modalConcept {
    max-width: 1200px;
  }
}





/* kids park */
#kidsParkBody > .txtArea {
  font-size: 1.6rem;
}

#kidsParkBody .btnArea {
  justify-content: space-around;
  display: flex;
}
#kidsParkBody .official {
  font-size: min(1vw, 1.2rem);
  line-height: 3vw;
  font-weight: bold;
  color: #173E92;
  padding-top: 20px;
}
#kidsParkBody .official img {
  width: 3vw;
  margin-left: 1vw;
}


@media print, screen and (min-width: 769px) {
  #kidsPark {
    margin-top: 100px;
    margin-bottom: 120px;
  }
  #kidsPark h3 img {
    width: calc(100% * 150 / 1200);
  }
  #kidsParkBody {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: calc(100% * 50 / 1200);
  }
  #kidsParkBody > figure {
    width: 48%;
  }
  #kidsParkBody > .txtArea {
    width: 48%;
  }
  #kidsParkBody > .txtArea .btnArea {
    justify-content: space-around;
    display: flex;
  }
  #kidsParkBody > .txtArea .btnArea a {
    padding: 0 1em;
    width: auto;
  }

  #kidsParkBody .official {
    font-size: 1.2rem;
    font-weight: bold;
    color: #173E92;
    line-height: 40px;
  }
  #kidsParkBody .official a {
    display: inline-block;
  }
  #kidsParkBody .official img {
    width: 40px;
    margin-left: 20px;
  }
  #kidsParkBody .official a:hover img {
    opacity: .6;
  }
  
}
@media screen and (max-width:768px) {
  #kidsPark {
    margin: 5vw 0 20vw;
  }
  #kidsPark h3 {
    margin-top: 10vw;
  }
  #kidsPark h3 img {
    width: calc(100% * 222 / 750);
  }
  #kidsParkBody {
    margin-top: 5vw;
  }
  #kidsParkBody > .txtArea .btnArea {
    text-align: center;
    flex-direction: column;
    align-items: center;
  }
  #kidskidsParkBodyPark > .txtArea .btnArea a {
    width: max(70%, 10em);
  }

  #kidsParkBody .official {
    display: flex;
    justify-content: space-between;
    width: calc(100vw * 345 / 750);
    font-size: 1.2rem;
    font-weight: bold;
    color: #173E92;
    line-height: 1.4;
    margin: auto;
    padding-top: 5vw;
  }
  #kidsParkBody .official img {
    width: calc(100vw * 80 / 750);
  }
}
@media only screen and (min-width: 769px) and (max-width: 1280px) {
  #kidsParkBody > .txtArea {
    font-size: min(1.4vw, 1.6rem);
  }
  #kidsParkBody > .txtArea h3 {
    font-size: min(1.8vw, 2rem);
  }

  #kidsParkBody .official {
    font-size: min(1vw, 1.2rem);
    line-height: 3vw;
  }
  #kidsParkBody .official img {
    width: 3vw;
    margin-left: 1vw;
  }
}