/*
  Reset
----------------------------------------------------------------------------------------------------*/
html, body,#visionPage div,#visionPage span,#visionPage object,#visionPage iframe,
#visionPage h1,#visionPage h2,#visionPage h3,#visionPage h4,#visionPage h5,#visionPage h6,#visionPage p,
#visionPage a,#visionPage address,
#visionPage img,
#visionPage sub,#visionPage sup,

#visionPage dl,#visionPage dt,#visionPage dd,#visionPage ol,#visionPage ul,#visionPage li,
#visionPage fieldset,#visionPage form,#visionPage label,#visionPage legend,
#visionPage table,#visionPage caption,#visionPage tbody,#visionPage tfoot,#visionPage thead,#visionPage tr,#visionPage th,#visionPage td,
#visionPage article,#visionPage aside,#visionPage canvas,#visionPage details,#visionPage embed,
#visionPage figure,#visionPage figcaption,
#visionPage menu,#visionPage nav,#visionPage output,#visionPage ruby,#visionPage section,#visionPage summary,
#visionPage time,#visionPage mark,#visionPage audio,#visionPage video {
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1.6;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

#visionPage article,#visionPage figcaption,#visionPage figure,
#visionPage nav,#visionPage section {
  display: block;
}

#visionPage ol,#visionPage ul {
  list-style: none;
}

:root #visionPage  ol {
  margin: 0;
  padding: 0;
}

:root #visionPage  ul {
  margin: 0;
  padding: 0;
}


#visionPage input {
  margin: 0;
  padding: 0;
  border: none;
}
#visionPage input:focus {
  /*outline: none;*/
}

#visionPage input[type="submit"] {
  cursor: pointer;
}

#visionPage table {
  border-collapse: collapse;
  border-spacing: 0;
}


#visionPage .clearfix:before,
#visionPage .clearfix:after {
  content: "";
  display: block;
  overflow: hidden;
}

#visionPage .clearfix:after {
  clear: both;
}

#visionPage .clearfix {
  *zoom: 1;
}

/*
  Base Style
----------------------------------------------------------------------------------------------------*/
#visionPage {
  color: #555566;
  font-size: 14px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  *text-align: center;
}

#visionPage a {
  text-decoration: none;
  color: #0066aa;
}

#visionPage a:visited {
  color: #552277;
}

#visionPage a:hover {
  color: #1d9bff;
}

#visionPage img {
  vertical-align: middle;
}

/** { outline: none!important; }*/
#visionPage { font-family: "Noto Sans JP","Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; }
#visionPage * { box-sizing: border-box; }

@media screen and (min-width: 768px){
    #visionPage #hero { overflow: hidden; position: relative; z-index: 1; }
    #visionPage #hero #heroInner { position: relative; }
    #visionPage #hero #heroInner::after { content: ''; display: block; position: absolute; background: #0E0D6A; opacity: .8; transform: skew(-9deg); width: 35%; top: 0; left: -2%; height: 100%; }
    #visionPage #hero #heroInner img { width: 100%; }
    #visionPage #heroInner h1 { position: absolute; width: 30%; text-align: center; top: 50%; left: 0; transform: translate(0,-50%); color: #fff; z-index: 1; font-weight: bold; font-size: 40px; }
    
    #visionPage #visionMenu { background: #0E0D6A; margin-bottom: 60px; }
    #visionPage #visionMenu ul { display: flex; text-align: center; height: 100%; }
    #visionPage #visionMenu ul li { width: 33.333333%; border-right: 1px solid #fff; background: url(/extlib/vision/img/icon_arrow-nav.png) center bottom 14px no-repeat; }
    #visionPage #visionMenu ul li a { font-size: 22px; color: #fff!important; text-decoration: none!important; padding: 30px 10px 50px; display: block; }
    #visionPage #visionMenu ul li a span { font-size: 12px; display: block; }
    #visionPage #visionMenu ul li:last-child { border-right: none; }

    #visionPage #content { color: #222; }
    #visionPage .blockOverWrap { position: relative; overflow: hidden; }
    #visionPage .blockOverWrap::before { content:''; display: block; background: #ebf6ff; position: absolute; top: 0; right: calc( 60% ); opacity: 0; transition: 1s; height: 360px; width: 100%; z-index: -1; }
    #visionPage .blockInner { max-width: 1200px; margin: 0 auto; }
    
    #visionPage .blockOverWrap.in::before { right: calc( 50% - 500px ); opacity: 1; }

    #visionPage .blockInner { max-width: 1200px; margin: 0 auto; }
    #visionPage .blockInnerIn { max-width: 1000px; margin: 0 auto; }
    #visionPage .blockInner h3,
    #visionPage .blockInnerIn h3 { font-size: 28px; font-weight: bold; margin-bottom: 40px; text-align: center; }
    #visionPage .blockInner p.heading3Lead,
    #visionPage .blockInnerIn p.heading3Lead { font-size: 15px; margin-bottom: 40px; text-align: center; line-height: 2; font-weight: normal; }
    #visionPage .blockInnerIn p.heading3Lead.large { font-size: 18px; font-weight: bold; }
    
    #visionPage .headerBox { position: relative; margin-bottom: 35px; padding-bottom: 25px;}
    #visionPage .headerBox::after { content:''; display: block; height: 0; border-bottom: 1px solid #111; position: absolute; width: 300%; left: 0; bottom: 0; }
    #visionPage .headerBox h2 { font-size: 40px; }
    #visionPage .headerBox h2 a:hover { background: url(/extlib/top_renew/img/icon_arrow-circle-on.png) no-repeat center center; background-size: 46px;  }
    #visionPage .headerBox h2 a img { width: 46px; margin-bottom: 9px; }
    #visionPage .headerBox h2 a:hover img { opacity: 0; }
    #visionPage .headerBox p { font-size: 16px; font-weight: bold; }

    #visionPage img.visionImg { width: 100%; }
    
    #visionPage .presidentBox { display: flex; align-items: center; }
    #visionPage .presidentBox > div { width: 50%; }
    #visionPage .presidentBox > div img { width: 100%; }
    #visionPage .presidentBox > div:first-child { padding-top: 40px; }
    #visionPage .presidentBox > div:last-child { font-size: 28px; font-weight: bold; text-align: left; color:#0E0D6A; padding-left: 5%; }
    #visionPage .presidentBox > div:last-child p { line-height: 1.8; }
    #visionPage .presidentBox > div:last-child a.brn { margin: 5% 0 0; }
    
    #visionPage #philosophyWrap { padding: 80px 0 140px; }
    #visionPage #brandMessageWrap { margin-top: 100px; }
    #visionPage #aimWrap { padding: 100px 0;}
    #visionPage #kddivision2030Wrap { padding: 100px 0 140px; text-align: center; }
    #visionPage #kddivision2030Wrap a { font-size: 18px; }
    #visionPage #kddivision2030Wrap div a { margin-bottom: 20px; display: inline-block; font-size: 16px; }
    #visionPage #mediumTerm { padding: 80px 0 100px; }
    #visionPage #philosophyBox { padding: 80px 0; }
    #visionPage #philosophyListBox { padding: 40px; border: 1px solid #D7DBDE; border-radius: 10px;}
    #visionPage #guidelinesWrap { padding: 80px 0; border-top: 1px solid #707070; text-align: center; }
    
    #visionPage #philosophyLead { font-size: 18px; font-weight: bold; margin-bottom: 50px; padding-left: 20px; border-left: 7px solid #0E0D6A; line-height: 2; }
    #visionPage #philosophyText { padding: 50px 0; margin-bottom: 20px; line-height: 3; border-bottom: 1px solid #D7DBDE;}
    #visionPage #philosophySignature { text-align: right; line-height: 3; }
    #visionPage #philosophySignature img { width: 160px; }

    #visionPage #brandMessageWrap { text-align: center; border-radius: 10px; border: 1px solid #D7DBDE; position: relative; padding: 50px; }
    #visionPage #brandMessageWrap h3 { display: inline-block; background: #fff url(/extlib/vision/img/decoration.png) no-repeat left 20px center; background-size: 48px; padding-left: 80px; padding-right: 10px; position: absolute; top:-24px; left: 30px; }
    #visionPage #brandMessageWrap > p { line-height: 2;}
    #visionPage #brandMessageWrap ul { display: flex; justify-content: space-between; }
    #visionPage #brandMessageWrap ul li { width: 24.6%; }
    #visionPage #brandMessageWrap ul li:nth-child(1) img { width: 70%; }
    #visionPage #brandMessageWrap ul li:nth-child(2) img { width: 60%; }
    #visionPage #brandMessageWrap ul li:nth-child(3) img { width: 90%; }
    #visionPage #brandMessageWrap ul li:nth-child(4) img { width: 60%; }
    #visionPage #brandMessageWrap ul li a div { height: 80px;}
    #visionPage #brandMessageWrap ul li a p { position: relative; text-align: center; font-size: 12px; }
    #visionPage #brandMessageWrap ul li a p::before { content:'\FF1E'; display: inline-block; transform: scale(.6,1); }

    #visionPage #aimWrap ul#aimList { display: flex; color:#0E0D6A; align-items: flex-start; justify-content: space-between; }
    #visionPage #aimWrap ul#aimList li { width: 30%; }
    #visionPage #aimWrap ul#aimList li > div { position: relative; width: 100%; text-align: center; margin-bottom: 40px; }
    #visionPage #aimWrap ul#aimList li > div > div { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; }
    #visionPage #aimWrap ul#aimList li > div::before { display: block; content: ''; width:100%; background: #fff; border-radius: 50%; padding-top: 100%; }
    #visionPage #aimWrap ul#aimList li > div p.num { position: relative; font-size: 50px; border-bottom: 3px solid #1eace5; margin-bottom: 3%; display: inline-block; margin-bottom: 8%; font-weight: bold; }
    #visionPage #aimWrap ul#aimList li > div p.catch { position: relative; font-size: 22px; margin-bottom: 10%; font-weight: bold; }

    #visionPage #sustainaWrap > div { padding: 0 20px 80px; text-align: center;}
    #visionPage #sustainaWrap img.visionImg { max-width: 860px;}

    #visionPage #materialityWrap { padding: 90px 0; }
    #visionPage #materialityWrap .visionColumn {
      display: flex;
      flex-flow: wrap;
      justify-content: center;
      gap: 33px;
    }
    #visionPage #materialityWrap .vision-button-wrap {
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		margin: 31px 0 0;
	}
	#visionPage #materialityWrap .vision-button-wrap > * {
		width: calc((100% - (33px * 2)) / 3);
	}
	#visionPage #materialityWrap .vision-button {
		display: -webkit-flex;
		margin-top: 27px;
		margin-left: 36px;
	}
	#visionPage #materialityWrap [class*="vision-button__type"] {
		position: relative;
		display: -webkit-flex;
		display: flex;
		-webkit-align-items: center;
		align-items: center;
		flex-grow: 1;
		padding: 15px 47px 15px 21px;
		border-radius: 28.5px;
		border: 1px solid #222;
		background-color: #fff;
		color: #222;
		text-align: center;
		transition: all .25s cubic-bezier(.4,0,.2,1) 0s;
	}
	#visionPage #materialityWrap [class*="vision-button__type"]:not(.vision-button__type--nolink):hover {
		border-color: #1eace5;
		color: #1eace5;
	}
	#visionPage #materialityWrap .vision-button__label {
		position: relative;
		display: inline-block;
		width: 100%;
		font-size: 19px;
		line-height: 1.4;
		text-align: center;
	}
	#visionPage #materialityWrap [class*="vision-button__type"]:not(.vision-button__type--nolink) .vision-button__label::after {
		position: absolute;
		top: 50%;
		right: -27px;
		content: "";
	}
	#visionPage #materialityWrap .vision-button__type .vision-button__label::after {
		width: 20px;
		height: 16px;
		margin-top: -8px;
		background: url(/extlib/top_renew/img/icon_arrow-b.png) no-repeat center / contain;
	}
	#visionPage #materialityWrap .vision-button__type--blank .vision-button__label::after {
		width: 13px;
		height: 11px;
		margin-top: -5.5px;
		background: url(/extlib/corporate/vision/img/cmn_ic02_01.gif) no-repeat center / contain;
	}
	#visionPage #materialityWrap .vision-button__type--pdf .vision-button__label::after {
		width: 14px;
		height: 14px;
		margin-top: -7px;
		background: url(/extlib/corporate/vision/img/cmn_ic03.gif) no-repeat center / contain;
	}
    #visionPage .materialityListScrollBarSP {text-align: center; }
    #visionPage #materialityListWrap { position: relative; }
    #visionPage #materialityList { max-width: 1140px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; }
    #visionPage #materialityList li { width: 32%;  }
    #visionPage #materialityList li > div { display: block; color: #222; /*background: url(/extlib/top_renew/img/icon_arrow-b.png) no-repeat right bottom 20px; background-size: 20px;*/ margin: 0 10px; text-align: left; }
    #visionPage #materialityList li > div > div { border-radius: 4px; overflow: hidden; }
    #visionPage #materialityList li > div > div img { width: 100%; transition: .6s; }
    #visionPage #materialityList li a:hover > div.materialityImgBox img { transform: scale(1.2); }
    #visionPage #materialityList li p { font-size: 15px; line-height: 2; padding: 10px 0; }
    #visionPage #materialityList li p.txt { font-size: 18px; line-height: 1.5; text-align: left; padding: 5px 0 30px; display: flex; align-items: center; }
    #visionPage #materialityList li p.txt span { vertical-align: middle; display: inline-block; }
    #visionPage #materialityList li p.txt span.num { font-size: 40px; font-weight: bold; width: 22%; }
    #visionPage #materialityList li p.txt span.tit { font-size: 18px; width: 77%; line-height: 1.4; font-weight: bold; }
    #visionPage #materialityList li p.materialityTag { padding: 10px 0 0; }
    #visionPage #materialityList li p.materialityTag span { display: inline-block; font-size: 12px; line-height: 1;  background: #1d9bff; border-radius: 2px; padding: 2px 5px; margin-right: 5px; margin-bottom: 0; color:#fff; }
    #visionPage #materialityList li p img { display: inline; width: 16px; margin-left: 8px; }
    #visionPage #materialityList li p.date { font-size: 12px; line-height: 1; color: #999; padding: 0;  }
    #visionPage #materialityListPagerBox { display:block; }
    #visionPage #materialityListDotBox { display: inline-block; position: relative; padding: 0 50px; margin-bottom: 30px; }
    #visionPage #materialityListDotBox .slick-dots { display: flex; height: 14px; align-items: center; }
    #visionPage #materialityListDotBox .slick-dots li { margin: 0 10px; font-size: 9px; line-height: 1; }
    #visionPage #materialityListDotBox button,
    #visionPage #materialityListPagerBox button{ background-color: transparent; border: none; cursor: pointer; /*outline: none;*/ padding: 0; appearance: none; font-size: 0; }
    #visionPage #materialityListDotBox .slick-dots li button { background: #e8e8e8; width: 8px; height: 8px; border-radius: 4px; vertical-align: top; }
    #visionPage #materialityListDotBox .slick-dots li.slick-active button { background: #1eace5; }
    
    #visionPage #materialityListPagerBox .slick-prev { display: block; position: absolute; width: 25px; left: 0; top: 35%; background: url(/extlib/top_renew/img/icon_arrow-b.svg) no-repeat center center; background-size: contain; height: 30%; transform: rotate(180deg);}
    #visionPage #materialityListPagerBox .slick-next { display: block; position: absolute; width: 25px; right: 0; top: 35%; background: url(/extlib/top_renew/img/icon_arrow-b.svg) no-repeat center center; background-size: contain; height: 30%; }
    #visionPage #materialityListPagerBox .slick-prev:hover { background-image: url(/extlib/top_renew/img/icon_arrow-b-on.svg); }
    #visionPage #materialityListPagerBox .slick-next:hover { background-image: url(/extlib/top_renew/img/icon_arrow-b-on.svg); }
    
    #visionPage #mediumTermImgBox { padding: 30px; margin-top: 30px; /*margin-bottom: 100px;*/ background: #fff; border-radius: 10px; box-shadow: 0 10px 5px 5px rgba(0,0,0,.01); }
    #visionPage #mediumTermImgBox img { max-width: 1140px; }

    #visionPage #satellitegrowthWrap { padding: 90px 0;}
    #visionPage #satellitegrowthWrap div { padding: 0 20px; margin-bottom: 70px;}

    #visionPage #basisWrap { padding: 90px 0 0;}
    #visionPage #basisColmn { display: flex; }
    #visionPage #basisColmn > div:first-child { width: 60%; }
    #visionPage #basisColmn > div:first-child img { width: 100%; }
    #visionPage #basisColmn > div:last-child { width: 40%; }
    #visionPage #basisColmn > div:last-child ul { margin-bottom: 40px;}
    #visionPage #basisColmn > div:last-child ul li { width: 80%; background: #0E0D6A; border-radius: 6px; margin: 0 auto 20px; color: #fff; padding: 15px; text-align: center; position: relative; font-size: 16px; font-weight: bold; }
    #visionPage #basisColmn > div:last-child ul li::before { content:''; display: block; width: 8px; height: 8px; border-radius: 50%; position: absolute; left: 20px; top: calc( 50% - 4px ); background: #1eace5; }

    #visionPage #motto { border: 1px solid #0E0D6A; border-radius: 10px; font-size: 28px; font-weight: bold; line-height: 1.8; padding: 70px 20px; margin-bottom: 90px; position: relative; overflow: hidden; text-align: center; }
    #visionPage #motto::before { width: 0; height: 0; border-style: solid; border-width: 152px 152px 0 0; border-color: #0E0D6A transparent transparent transparent; content:''; display: block; position: absolute; top: 0; left: 0; }
    #visionPage #motto .tit { position: absolute; left: 20px; top: 30px; color: #fff; font-size: 22px; font-weight: bold; text-align: left; line-height: 1; }

    #visionPage #philosophyListBox #philosophyListWrap { display: flex; justify-content: space-between; }
    #visionPage #philosophyListBox #philosophyListWrap > li { width: 49%; }
    #visionPage #philosophyListBox .philosophyList > li { padding-bottom: 30px; }
    /*#visionPage #philosophyListBox .philosophyList > li:nth-child(4) { width: 66%; display: flex; justify-content: space-between; flex-wrap: wrap; }*/
    #visionPage #philosophyListBox .philosophyList > li > div { display: flex; justify-content: space-between ;}
    #visionPage #philosophyListBox .philosophyList > li ul { width: 49%; }
    #visionPage #philosophyListBox #philosophyListWrap > li:nth-child(2) .philosophyList li:nth-child(2) ul {width: 100%; }
    #visionPage #philosophyListBox .philosophyList > li > p:nth-child(1) { background: #0E0D6A; color: #fff; padding: 3px; text-align: center; border-radius: 3px; margin-bottom: 20px; width: 100%; }
    #visionPage #philosophyListBox .philosophyList > li li { padding-left: 1em; text-indent: -1em;}
    
    
        #visionPage .brn { height: 58px; line-height: 56px; display: block; width: 360px; border-radius: 28px; border: 1px solid #222; font-size: 19px; background: #fff url(/extlib/top_renew/img/icon_arrow-b.png) no-repeat right 20px center; background-size: 20px; text-align: center; margin: 0 auto; color: #222!important; }
        #visionPage .brn:hover { border: 1px solid #1eace5; color:#1eace5!important; }
        #visionPage .brn img { width: 14px; margin-left: 5px;}
        #visionPage .brn.ss { height: 50px; line-height: 48px; display: block; width: 240px; border-radius: 25px; border: 1px solid #222; font-size: 16px; background: #fff url(/extlib/top_renew/img/icon_arrow-b.png) no-repeat right 16px center; background-size: 16px; text-align: center; margin: 0 auto; color: #222!important; }

        a img.blankIcon { width: 13px!important; }
        #visionPage a#kddivision2030tx { position: relative; text-align: center; font-size: 12px; }
        #visionPage a#kddivision2030tx::before { content:'\FF1E'; display: inline-block; transform: scale(.6,1); }
}
@media screen and (min-width: 767.98px) and (max-width: 1199.98px){
  #visionPage .blockOverWrap::before { content: ''; display: block; background: #ebf6ff; position: absolute; top: 0; left: 0; height: 360px; width: 90%; z-index: -1; }
  #visionPage .blockOverWrap { padding: 0 20px; }
  #visionPage #kddivision2030Wrap,
  #visionPage #aimWrap,
  #visionPage #philosophyBox,
  #visionPage #guidelinesWrap { padding-left: 20px; padding-right: 20px; }
}

@media screen and (min-width: 767.98px) and (max-width: 980px) {
  #visionPage #heroInner h1 { font-size: 3vw; }
  #visionPage .presidentBox > div:last-child { font-size: 1.8vw; }
  #visionPage #materialityList li p.txt span.tit { font-size: 16px; }
  #visionPage #aimWrap ul#aimList li > div p.catch { font-size: 19px; }
}

@media screen and (min-width: 0px) and (max-width: 767.98px) {
    #visionPage #heroInner { position: relative; z-index: 2; }
    #visionPage #heroInner img { width: 100%; }
    #visionPage #heroInner h1 { position: absolute; width: 60%; text-align: center; height: 18vw; line-height: 18vw; top: auto; bottom: 0; left: 0; transform: translate(0,0); color: #fff; z-index: 1; font-weight: bold; font-size: 7vw; }
    #visionPage #hero #heroInner::after { content: ''; display: block; position: absolute; background: #0E0D6A; opacity: .8; transform: skew(-9deg); width: 65%; top: auto; bottom: 0; left: -3%; height: 30%; }

    #visionPage #mv { position: relative; padding: 27%; }

    #visionPage #mv img { width: 160%; position: absolute; top: 0; right: 0; display: none; }
    #visionPage #mv img:nth-child(1){ display: block; }
    
    #visionPage #visionMenu { background: #0E0D6A; /*margin-bottom: 10%;*/ }
    #visionPage #visionMenu ul { display: flex; text-align: center; height: 100%; }
    #visionPage #visionMenu ul li { width: 33.333333%; border-right: 1px solid #fff; background: url(/extlib/vision/img/icon_arrow-nav.png) center bottom 2vw no-repeat; background-size: 4.2vw; }
    #visionPage #visionMenu ul li a { font-size: 4vw; color: #fff!important; text-decoration: none!important; padding: 8% 5% 24%; display: block; line-height: 1.4; }
    #visionPage #visionMenu ul li:first-child a,
    #visionPage #visionMenu ul li:last-child a { padding: 19% 5% 26%; }
    #visionPage #visionMenu ul li a span { font-size: 12px; display: none; }
    #visionPage #visionMenu ul li:last-child { border-right: none; }

    #visionPage #content { color: #222; }
    #visionPage .blockOverWrap { position: relative; overflow: hidden; }
    #visionPage .blockOverWrap::before { content:''; display: block; background: #ebf6ff; position: absolute; top: 0; left: 0; height: 80vw; width: 90%; z-index: -1; }
    #visionPage .blockInner { max-width: 1200px; margin: 0 auto; }
    
    #visionPage .blockInner h3,
    #visionPage .blockInnerIn h3 { font-size: 5vw; font-weight: bold; margin-bottom: 5%; text-align: center; }
    #visionPage .blockInner p.heading3Lead,
    #visionPage .blockInnerIn p.heading3Lead { font-size: 3.4vw; margin-bottom: 5%; text-align: left; line-height: 1.8; }
    #visionPage .blockInnerIn p.heading3Lead.large { font-weight: bold; }

    #visionPage #satellitegrowthWrap p.heading3Lead { text-align: center; }

    #visionPage .headerBox { position: relative; margin-bottom: 8%; padding: 0 5%; position: relative;}
    #visionPage .headerBox + p { padding: 0 5%; font-size: 3.4vw; margin-bottom: 5%; text-align: left; line-height: 1.8; font-weight: bold; }
    #visionPage .headerBox::after { content:''; display: block; height: 0; border-bottom: 1px solid #111; position: absolute; width: 95%; left: 5%; bottom: -2.4vw; }
    #visionPage .headerBox h2 { font-size: 7vw; line-height: 1.1; margin-bottom: 2%; }
    #visionPage .headerBox h2 a img { width: 9vw; margin-bottom: 2vw; }
    #visionPage .headerBox p { font-size: 3.4vw; font-weight: bold; padding-bottom: 3%; }
    
    #visionPage img.visionImg { width: 100%; }
    #visionPage #kddivision2030Wrap,
    #visionPage #aimWrap,
    #visionPage #philosophyBox,
    #visionPage #guidelinesWrap { padding-left: 5%; padding-right: 5%; }

    #visionPage .presidentBox > div img { width: 95%; }
    #visionPage .presidentBox > div:first-child { padding-top: 10%; text-align: left; }
    #visionPage .presidentBox > div:last-child { font-size: 4.5vw; padding: 10% 5%; font-weight: bold; text-align: center; color:#0E0D6A; }
    #visionPage .presidentBox > div:last-child p { line-height: 1.8; }
    #visionPage .presidentBox > div:last-child a.brn { margin: 5% auto 0; }
    
    #visionPage #philosophyAnc { padding-top: 10%;}
    #visionPage #philosophyWrap { padding: 10% 0; }
    #visionPage #aimWrap { padding: 10% 5%;}
    #visionPage #kddivision2030Wrap { padding: 15% 5% 5%; text-align: center; }
    #visionPage #kddivision2030Wrap a { font-size: 3.4vw; }
    #visionPage #kddivision2030Wrap div a { margin-bottom: 3%; display: block; }
    #visionPage #sustainaWrap { padding: 5% 5% 15% 5%; text-align: center; }

    #visionPage #mediumTermAnc { padding: 10% 0 0; }
    #visionPage #mediumTerm { padding: 10% 0; }
    #visionPage #philosophyBox { padding: 15% 5%; }
    #visionPage #philosophyListBox { padding: 5%; border: 1px solid #D7DBDE; border-radius: 10px;}
    #visionPage #guidelinesWrap { padding: 15% 5%; border-top: 1px solid #707070; text-align: center; }
    
    #visionPage #philosophyWrap .blockInnerIn { padding: 0 5%;}
    #visionPage #philosophyLead { font-size: 3.6vw; font-weight: bold; margin-bottom: 10%; padding-left: 5%; padding-right: 10%; border-left: 3px solid #0E0D6A; line-height: 2.2; }
    #visionPage #philosophyText { padding: 10% 0 15%; font-size: 3.4vw; margin-bottom: 5%; line-height: 2; border-bottom: 1px solid #D7DBDE;}
    #visionPage #philosophySignature { text-align: right; line-height: 1.6; font-size: 3.2vw; }
    #visionPage #philosophySignature img { width: 25%; }

    #visionPage #brandMessageWrap.blockInnerIn { text-align: center; border-radius: 3vw; border: 1px solid #D7DBDE; position: relative; padding: 8%; margin: 15% 5% 0; }
    #visionPage #brandMessageWrap h3 { display: inline-block; background: #fff url(/extlib/vision/img/decoration.png) no-repeat left 20px center; background-size: 10vw; padding-left: 18vw; padding-right: 10px; position: absolute; top:-4vw; left: 30px; }
    #visionPage #brandMessageWrap > p { line-height: 1.8; text-align: left; margin-bottom: 10%;}
    #visionPage #brandMessageWrap ul { display: flex; justify-content: space-between; flex-wrap: wrap; }
    #visionPage #brandMessageWrap ul li { width: 48%; margin-bottom: 12%; }
    #visionPage #brandMessageWrap ul li:nth-child(1) img { width: 70%; }
    #visionPage #brandMessageWrap ul li:nth-child(2) img { width: 64%; }
    #visionPage #brandMessageWrap ul li:nth-child(3) img { width: 90%; }
    #visionPage #brandMessageWrap ul li:nth-child(4) img { width: 70%; }
    #visionPage #brandMessageWrap ul li a div { height: 13vw;}
    #visionPage #brandMessageWrap ul li a p { text-align: left; position: relative; padding-left: 5vw; font-size: 2.6vw; }
    #visionPage #brandMessageWrap ul li a p::before { content:'\FF1E'; position: absolute; left: 0; top: calc( 50% - 1.3vw ); transform: scale(.6,1); line-height: 1; }

    #visionPage #aimWrap ul#aimList { color:#0E0D6A; width: 90%; margin: 10% auto; }
    #visionPage #aimWrap ul#aimList li { margin-bottom: 10%; font-size: 3.4vw;}
    #visionPage #aimWrap ul#aimList li > div { position: relative; padding: 4% 0; width: 100%; text-align: center; margin-bottom: 5%; }
    #visionPage #aimWrap ul#aimList li > div > div { display: flex; align-items: center; justify-content: center; position: relative; }
    #visionPage #aimWrap ul#aimList li > div::before { display: block; content: ''; width:100%; background: #fff; border-radius: 10vw; height: 100%; position: absolute; top: 0; left: 0; }
    #visionPage #aimWrap ul#aimList li > div p.num { display: inline-block; font-size: 10vw; border-bottom: 3px solid #1eace5; font-weight: bold; line-height: 1.3; margin-bottom: 3%; }
    #visionPage #aimWrap ul#aimList li > div p.catch { width: 58%; padding-left: 5%; text-align: left; position: relative; font-size: 3.8vw;  font-weight: bold; }

    #visionPage #kddivision2030Wrap h3 { font-size: 8vw;}

    #visionPage #sustainaWrap > div { padding: 0; text-align: center;}
    #visionPage #sustainaWrap img.visionImg { max-width: 830px;}
    
    #visionPage #mediumTermImgBox { margin: 0 5%; padding: 5%; background: #fff; border-radius: 10px; box-shadow: 0 10px 5px 5px rgba(0,0,0,.01); }
    #visionPage #mediumTermImgBox img { max-width: 1140px; }
    #visionPage #materialityWrap .visionColumn {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 14px;
    }
    #visionPage #materialityWrap .vision-button-wrap {
      display: flex;
      flex-flow: row wrap;
      margin: 14px 0 0;
      padding: 0 5%;
    }
    #visionPage #materialityWrap .vision-button-wrap > * {
      width: 100%;
  }
  #visionPage #materialityWrap .vision-button {
    display: -webkit-flex;
    display: flex;
  }
  #visionPage #materialityWrap .vision-button-wrap > *:nth-of-type(n+2) {
    margin-top: 14px;
  }
  #visionPage #materialityWrap .vision-button__type,
  #visionPage #materialityWrap .vision-button__type--blank,
  #visionPage #materialityWrap .vision-button__type--pdf {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    flex-grow: 1;
    padding: 11px 38px 11px 19.5px;
    border-radius: 28.5px;
    border: 1px solid #222;
    background-color: #fff;
    color: #222;
    text-align: center;
  }
  #visionPage #materialityWrap [class*="vision-button__type"]:active,
  #visionPage #materialityWrap [class*="vision-button__type"]:hover,
  #visionPage #materialityWrap [class*="vision-button__type"]:focus,
  #visionPage #materialityWrap [class*="vision-button__type"]:visited {
    color: #222;
  }
  #visionPage #materialityWrap .vision-button__label {
    display: inline-block;
    width: 100%;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
  }
  #visionPage #materialityWrap [class*="vision-button__type"]:not(.vision-button__type--nolink) .vision-button__label::after {
    position: absolute;
    top: 50%;
    right: 21px;
    content: "";
  }
  #visionPage #materialityWrap .vision-button__type .vision-button__label::after {
    width: 15px;
    height: 11.5px;
    margin-top: -6px;
    background: url(/extlib/top_renew/img/icon_arrow-b.png) no-repeat center / contain;
  }
  #visionPage #materialityWrap .vision-button__type--blank .vision-button__label::after {
    width: 13px;
    height: 11px;
    margin-top: -5.5px;
    background: url(/extlib/top_renew/img/icon_arrow-b.png) no-repeat center / contain;
  }
  #visionPage #materialityWrap .vision-button__type--pdf .vision-button__label::after {
    width: 9px;
    height: 9px;
    margin-top: -4.5px;
    background: url(/extlib/top_renew/img/icon_arrow-b.png) no-repeat center / contain;
  }

    #visionPage #materialityWrap { padding: 10% 0; }
    #visionPage #materialityWrap a.brn { width: 72%; }
    #visionPage .materialityListScrollBarSP {text-align: center; }
    #visionPage #materialityListWrap { position: relative; }
    #visionPage #materialityList { margin: 0 auto 5%; width: 90%; display: flex; justify-content: space-between; flex-wrap: wrap; }
    #visionPage #materialityList li { width: 49%; margin-bottom: 5%; }
    #visionPage #materialityList li > div { display: block; color: #222; background-size: 5vw; text-align: left; padding-bottom: 0; margin: 0 2%; }
    #visionPage #materialityList li > div > div { border-radius: 1vw; overflow: hidden; }
    #visionPage #materialityList li > div > div img { width: 100%; }
    #visionPage #materialityList li p { font-size: 3.6vw; line-height: 2; padding: 3% 0 0; }
    
    #visionPage #materialityList li p.txt { line-height: 1.6; text-align: left; padding: 3% 0 0; }
    #visionPage #materialityList li p.txt span { vertical-align: middle; display: inline-block; }
    #visionPage #materialityList li p.txt span.num { font-size: 6vw; font-weight: bold; width: 28%; }
    #visionPage #materialityList li p.txt span.tit { font-size: 3.1vw; width: 70%; line-height: 1.4; font-weight: bold; }

    #visionPage #materialityList li p.materialityTag { padding: 3% 0 0; }
    #visionPage #materialityList li p.materialityTag span { display: inline-block; font-size: 2.8vw; line-height: 1;  background: #1d9bff; border-radius: .5vw; padding: .5vw 1vw; margin-right: 1vw; margin-bottom: 0; color:#fff; }
    #visionPage #materialityList li p img { display: inline; width: 3vw; margin-left: 2%; }
    #visionPage #materialityList li p.date { font-size: 2.8vw; line-height: 1; color: #999; padding: 0;  }
    #visionPage #materialityListPagerBox { }
    #visionPage #materialityListDotBox { display: inline-block; margin-bottom: 5%;  }
    #visionPage #materialityListDotBox .slick-dots { display: flex; height: 14px; align-items: center; }
    #visionPage #materialityListDotBox .slick-dots li { margin: 0 10px; font-size: 9px; line-height: 1; }
    #visionPage #materialityListDotBox button,
    #visionPage #materialityListPagerBox button { background-color: transparent; border: none; cursor: pointer; /*outline: none;*/ padding: 0; appearance: none; font-size: 0; }
    #visionPage #materialityListDotBox .slick-dots li button { background: #e8e8e8; width: 8px; height: 8px; border-radius: 4px; vertical-align: top; }
    #visionPage #materialityListDotBox .slick-dots li.slick-active button { background: #1eace5; }
    #visionPage #materialityListPagerBox + a { width: 80%; margin: 0 10%;}
    
    #visionPage #materialityListPagerBox .slick-prev { display: block; position: absolute; width: 6vw; left: 2vw; top: 35%; background: url(/extlib/top_renew/img/icon_arrow-b.svg) no-repeat center center; background-size: contain; height: 30%; transform: rotate(180deg);}
    #visionPage #materialityListPagerBox .slick-next { display: block; position: absolute; width: 6vw; right: 2vw; top: 35%; background: url(/extlib/top_renew/img/icon_arrow-b.svg) no-repeat center center; background-size: contain; height: 30%; }
    #visionPage #materialityListPagerBox .slick-prev:hover { background-image: url(/extlib/top_renew/img/icon_arrow-b-on.svg); }
    #visionPage #materialityListPagerBox .slick-next:hover { background-image: url(/extlib/top_renew/img/icon_arrow-b-on.svg); }

    #visionPage #satellitegrowthWrap { padding: 10% 5%;}
    #visionPage #satellitegrowthWrap p.heading3Lead { text-align: center; }
    #visionPage #satellitegrowthWrap div { margin-bottom: 5%;}

    #visionPage #basisWrap { padding: 10% 5%;}
    #visionPage #basisWrap p.heading3Lead { text-align: center; }
    #visionPage #basisColmn > div:first-child img { width: 100%; }
    #visionPage #basisColmn > div:last-child { width: 90%; margin: 0 auto; }
    #visionPage #basisColmn > div:last-child ul { margin: 10% auto;}
    #visionPage #basisColmn > div:last-child ul li { width: 100%; background: #0E0D6A; border-radius: 1vw; margin: 0 auto 3%; color: #fff; padding: 3%; text-align: center; position: relative; font-size: 3.4vw; font-weight: bold; }
    #visionPage #basisColmn > div:last-child ul li::before { content:''; display: block; width: 2vw; height: 2vw; border-radius: 50%; position: absolute; left: 4vw; top: calc( 50% - 1vw ); background: #1eace5; }

    #visionPage #motto { border: 1px solid #0E0D6A; border-radius: 3vw; font-size: 4.6vw; font-weight: bold; line-height: 1.8; padding: 10% 3%; margin-bottom: 10%; position: relative; overflow: hidden; text-align: center; color: #0E0D6A; }
    #visionPage #motto::before { width: 0; height: 0; border-style: solid; border-width: 24vw 24vw 0 0; border-color: #0E0D6A transparent transparent transparent; content:''; display: block; position: absolute; top: 0; left: 0; }
    #visionPage #motto .tit { position: absolute; left: 3vw; top: 5vw; color: #fff; font-weight: bold; text-align: left; line-height: 1; font-size: 4vw; }

    #visionPage #philosophyListBox .philosophyList > li { padding-bottom: 10%; }
    #visionPage #philosophyListBox .philosophyList > li > p { font-size: 2.8vw;}
    #visionPage #philosophyListBox .philosophyList > li > p:nth-child(1) { background: #0E0D6A; color: #fff; padding: 2vw; text-align: center; border-radius: 1vw; margin-bottom: 5%; font-size: 3.4vw; }
    #visionPage #philosophyListBox .philosophyList > li li { padding-left: 1em; text-indent: -1em; font-size: 2.8vw; line-height: 2; }
    
    #visionPage .brn { height: 14vw; line-height: 13.6vw; display: block; width: 80%; border-radius: 7vw; border: 1px solid #222; font-size: 4vw; background: #fff url(/extlib/top_renew/img/icon_arrow-b.png) no-repeat right 5% center; background-size: 4vw; text-align: center; margin: 0 auto; color: #222!important; }
    #visionPage .brn img { width: 5%; margin-left: 1%;}

    a img.blankIcon { width: 2.8vw!important; }
}

#visionPage .view-pc { display: block!important; }
#visionPage .view-sp { display: none!important; }

@media screen and (min-width: 0px) and (max-width: 767px) {
	#visionPage .view-pc { display: none!important; }
	#visionPage .view-sp { display: block!important; }
}


.grayBG { background: #F1F2F6; }

/* 2021 3 31 */
.sldUp { opacity: 0; transform: translate( 0 ,60px ); transition: .8s; transition-delay: .2s;}
.sldUp.up { opacity: 1; transform: translate( 0 ,0 );}

/*
  BREADCRUMB
----------------------------------------------------------------------------------------------------*/

#visionPage .TOPIC-PATH{ font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; line-height: 1; padding: 11px 0; background-color: #f1f2f6; border-bottom: 1px solid #e6e9ee; }
#visionPage .TOPIC-PATH-INNER{ margin: 0 auto; font-size: 12px; line-height: 1.4; }

@media screen and (min-width: 768px) {
    #visionPage .TOPIC-PATH-INNER.LOWER-WIDE-BREADCRUMB{ max-width: 1200px; width: auto!important; padding: 0 12px;}
}

@media screen and (max-width: 768px){
	#visionPage .TOPIC-PATH .TOPIC-PATH-INNER{ width: auto; margin: 0 12px; line-height: 1.8; }
}