@charset "utf-8";

/* all
--------------------------------------------------------------*/
* {
  margin:0;
  padding:0;
}

html{
  font-size: 62.5%;/*10px*/
  overflow-x: hidden;
  position: relative;
}
body{
  font-size: 1.6rem;
  line-height:1.6;
  font-family: "游ゴシック Medium", "Yu Gothic UI", "Yu Gothic Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meriryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
  color: #333;
}
_:-ms-lang(x)::-ms-backdrop, html,body {/* IE11のみ */
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}

/* link */
a {
  text-decoration:underline;
  color:#0068b2;
  transition: all 0.5s;
}
a img {transition: all 0.5s;}
a:hover {color:#666;}
a:hover img {opacity: 0.8;}
a.blank::after{
  margin-left:0.3em;
  content:'';
  display:inline-block;
  width:16px;
  height:15px;
  background:url(../img/icon_window.svg) left center no-repeat;
}

/* img */
img, svg {
  line-height: normal;
  vertical-align: bottom;
}

/* list */
ul,ol {list-style: none;}

/* h */
h1, h2, h3, h4, h5, h6 {font-weight:bold;}

/* sup & sub */
sup,sub {font-size: small;}
sub {vertical-align: baseline;}

/* clear */
.clear{clear:both;}
.clear::after{
  content:".";
  height:0px;
  clear:both;
  display: block;
  visibility:hidden;
}

/* float */
.floatLeft{float:left;}
.floatRight{float:right;}

/* text */
.textLeft{text-align:left;}
.textRight{text-align:right;}
.textCenter{text-align:center;}

/* color */
.red{color:#f00;}

/* font weight */
.bold{font-weight:bold;}

/* br pc/tb/sp */
br.pc{display:block;}
br.tb{display:none;}
br.sp{display:none;}
br.pc_tb{display:block;}
br.pc_sp{display:block;}
br.tb_sp{display:none;}

/* table */
.table table {
  width:100%;
  border-collapse:collapse;
  border-spacing:0;
  border-top:solid #ccc 1px;
}
.table table th,
.table table td{
  padding:7px 10px;
  border-bottom:solid #ccc 1px;
  line-height:normal;
}
.table table th{
  background-color:#eee;
  font-weight:normal;
  width:30%;
}
.table table td{
  text-align:left;
  background-color:#fff;
}

@media only screen and (max-width:768px) {
  .floatLeft,
  .floatRight{float: none;}
  br.pc{display:none;}
  br.tb{display:block;}
  br.sp{display:none;}
  br.pc_tb{display:block;}
  br.pc_sp{display:none;}
  br.tb_sp{display:block;}
}
@media only screen and (max-width:480px) {
  .table table th,
  .table table td{
	font-size:14px;
	display:block;
	width:calc(100% - 20px);
  }
  br.pc{display:none;}
  br.tb{display:none;}
  br.sp{display:block;}
  br.pc_tb{display:none;}
  br.pc_sp{display:block;}
  br.tb_sp{display:block;}
}


/* wrapper
--------------------------------------------------------------*/
#wrapper{
  position:relative;
  height:100%;
}


/* header
--------------------------------------------------------------*/
header{
  width:1100px;
  margin:20px auto;
  height:40px;
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  z-index:100;
}
header .logo{
  width:360px;
  float:left;
}
header .logo img{width:100%;}
nav{
  float:right;
  width:calc(100% - 360px);
}
nav ul{
  display:flex;
  justify-content:flex-end;
  margin-top:10px;
}
nav ul li{margin-left:2em;}
nav ul li a{
  display:block;
  text-align:center;
  padding:5px;
  width:100%;
  color:#fff;
  text-decoration:none;
}
nav ul li a:hover{color:#003067;}

@media only screen and (max-width:1100px) {
  header{width:90%;}
  header .logo{width:280px;}
  nav{width:calc(100% - 280px);}
  nav ul{margin-top:5px;}
  nav ul li{margin-left:0.5em;}
}
@media only screen and (max-width:480px) {
  nav{display:none;}
}


/* mainimage
--------------------------------------------------------------*/
.mainimage{
  position:relative;
  background:url(../img/mainimage.jpg) center no-repeat;
  background-size:cover;
  height:250px;
  padding-top:100px;
}
.mainimage h1{
  position:absolute;
  width:100%;
  top:50%;
  transform:translateY(-50%);
  text-align:center;
  font-size:3.6rem;
  line-height:1.3;
  color:#003067;
}
.mainimage h1 span{
  background-color:rgba(255,255,255,.5);
  padding:0.2em 0.5em;
  display:inline-block;
  text-align:center;
}
@media only screen and (max-width:480px) {
  .mainimage h1{font-size:3.2rem;}
}


/* contents
--------------------------------------------------------------*/
.contents{
  padding-bottom:100px;
  background:url(../img/bg_contents.jpg) center bottom no-repeat;
  background-size:contain;
  background-attachment:fixed;
  padding-top:1px;
}


/* sdgs image
--------------------------------------------------------------*/
.sdgsBox{
  background-color:#fff;
  margin:80px 0;
}
.sdgsImage{
  width:90%;
  max-width:1000px;
  margin:0 auto;
}
.sdgsImage img{
  width:100%;
  margin-top:4em;
}
.sdgsImage .textLead{
  text-align:center;
  font-size:1.8rem;
}
.sdgsImage .textLead h2{
  font-size:2.4rem;
  color:#003067;
}
.sdgsImage .textLead p{margin-top:1.2em;}
.sdgsImage .textLead .link_and_harmony,
.sdgsImage .textLead .liveware{
  width:25%;
  margin:0.7em auto;
}
.sdgsImage .textLead .link_and_harmony img,
.sdgsImage .textLead .liveware img{margin:0;}
@media only screen and (max-width:480px) {
  .sdgsImage .textLead .link_and_harmony,
  .sdgsImage .textLead .liveware{width:50%;}
}


/* section
--------------------------------------------------------------*/
.section{
  width:90%;
  max-width:1100px;
  margin:auto;
  position:relative;
  margin-top:100px;
  /*background-color:#fafcfc;*/
  background-color:rgba(248,251,251,.8);
  padding:50px;
  box-sizing:border-box;
}
.section h2{
  text-align:center;
  font-size:3.0rem;
  font-weight:normal;
  color:#003067;
}
.section h2 span{
  position:relative;
  padding:1em 2em;
  display:inline-block;
}
.section h2 span:before,
.section h2 span:after{
  position:absolute;
  content:'';
  width:50px;
  height:50px;
}
.section h2 span:after{
  top:0;
  left:0;
  border-top:solid 1px #ced1d0;
  border-left:solid 1px #ced1d0;
}
.section h2 span:before{
  right:0;
  bottom:0;
  border-right:solid 1px #ced1d0;
  border-bottom:solid 1px #ced1d0;
}
.section .sectionLead{
  margin-top:50px;
  text-align:center;
  font-size:1.8rem;
}
.section .sectionGoal{
  margin-top:2em;
  text-align:center;
  font-size:2.0rem;
}
.iconList{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:0.5em;
}
.iconList li{
  width:9.1%;
  margin-right:1%;
  margin-top:1%;
}
.iconList li:last-child{margin-right:0;}
.iconList li img{width:100%;}
.wrapBox{margin-top:50px;}
.wrapBox:not(:last-child){
  border-bottom:solid 1px #e8eaea;
  padding-bottom:50px;
}
.wrapBox h3{
  font-size:2.4rem;
  font-weight:normal;
  border-left:solid 4px #0068b2;
  padding-left:0.3em;
  line-height:1.3;
}
.wrapBox h3:not(:first-child){margin-top:50px;}
.wrapBox .linkBtn{margin-top:30px;}
.wrapBox .linkBtn a{
  background-color:#59c8dd;
  display:inline-block;
  height:50px;
  line-height:50px;
  color:#fff;
  padding:0 2em;
  text-decoration:none;
}
.wrapBox .linkBtn a:hover{background-color:#a9c0c0;}
.wrapBox .linkText{margin-top:1em;}
.innerBox{
  display:flex;
  justify-content:space-between;
  margin-top:20px;
}
.innerBox .textBox{
  width:100%;
  clear:both;
  line-height:1.7;
}
.innerBox .textBox img{
  float:left;
  width:30%;
  margin:0 1.5em 1.5em 0;
}
.innerBox .imageBox{width:42%;}
.innerBox .imageBox img{width:100%;}

@media only screen and (max-width:768px) {
  .iconList li{
	width:18.4%;
	margin-right:2%;
	margin-top:2%;
  }
  .iconList li:nth-child(5){margin-right:0;}
  .iconList li:last-child{margin-right:0;}
  .innerBox{display:block;}
  .innerBox .textBox{
    width:100%;
    line-height:1.6;
  }
  .innerBox .imageBox{
    width:100%;
	margin-top:20px;
  }
}
@media only screen and (max-width:480px) {
  .section{
    margin-top:80px;
    padding:3em 1.5em;
  }
  .iconList li{
	width:22%;
	margin-right:4%;
	margin-top:4%;
  }
  .iconList li:nth-child(5){margin-right:4%;}
  .iconList li:nth-child(4n){margin-right:0;}
  .section h2{
    font-size:2.4rem;
	margin-bottom:2em;
  }
  .section h2 span:before,
  .section h2 span:after{
	width:40px;
	height:40px;
  }
  .wrapBox h3{font-size:2.0rem;}
  .innerBox .textBox img{
	float:none;
	width:65%;
	margin:0 auto 1.5em;
	display:block;
  }
}


/* pagetop
--------------------------------------------------------------*/
#pagetop{
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100;
  width: 50px;
  height: 50px;
  background: rgba(0,104,178,0.8);
  border-radius:100%;
}
#pagetop a{
  display: block;
  width: 50px;
  height: 50px;
}
#pagetop:before,
#pagetop:after{
  width: 16px;
  height: 2px;
  border-radius: 5px;
  position: absolute;
  display: block;
  background: #fff;
  content: '';
}
#pagetop:before{
  transform: rotate(45deg);
  top: 22px;
  right: 12px;
}
#pagetop:after{
  transform: rotate(-45deg);
  top: 22px;
  left: 12px;
}
#pagetop span{display: none;}

@media only screen and (max-width:480px) {
  #pagetop{
    position: inherit;
    bottom: auto;
    right: auto;
    background: transparent;
    width: auto;
    height: auto;
    text-align: center;
    border-radius:0;
  }
  #pagetop:before,
  #pagetop:after{display: none;}
  #pagetop a{
    width: 100%;
	height:50px;
    line-height: 50px;
	background-color:rgba(0,104,178,0.8);
  }
  #pagetop span{
    display: block;
    font-size: 16px;
    color: #fff;
  }
}


/* footer
--------------------------------------------------------------*/
footer{
  background-color:#f5f9f9;
  border-bottom:solid 5px #0068b2;
}
.footer{
  width:90%;
  max-width:1100px;
  height:80px;
  margin:0 auto;
  position:relative;
  font-size:1.4rem;
}
.footer .company,
.footer .copy{
  position:absolute;
  bottom:10px;
}
.footer .company{left:0;}
.footer .copy{right:0;}
.footer .logo{width:250px;}
.footer .logo img{width:100%;}
.footer .address{margin-top:5px;}
@media only screen and (max-width:480px) {
  .footer{
	height:auto;
	padding:10px 0 5px;
  }
  .footer .company,
  .footer .copy{
    position:relative;
	bottom:auto;
	padding:5px 0;
	text-align:center;
  }
  .footer .logo{margin:0 auto;}
}


/* for print
--------------------------------------------------------------*/
@media print {
  body{
    width: 1280px;
    min-width: 1280px;
    max-width: 1280px;
    transform: scale(1);
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    transform-origin: 0 0;
    zoom:1;
    -webkit-print-color-adjust: exact;
  }
  #pagetop{display:none;}
  .contents{background:none;}
}