@charset "UTF-8";
/* naasstyle.scss */
/** for header & footer overwidth color */
/*****************************************/
/*****************************************/
/* botton color */
/* Saimaru  */
/* Sansai Station */
/* Admin Update button */
/* Inquiry Confirm Page */
/* Inquiry Page */
/* Inquiry Page , Admin Create Page */
/* Inquiry Page */
/* Layout Width ===================================== */
html {
  width: 100vw;
  min-width: 310px;
  margin-left: auto;
  margin-right: auto;
  background-color: white;
}
@media screen and (min-width: 1024px) {
  html {
    max-width: 1256px;
  }
}

header {
  width: 100%;
}

/* Initial */
body {
  margin: 0;
  padding: 0;
  background-color: #fefffe;
  color: #333;
  font-size: 15px;
  line-height: 2;
}

p, h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
}

body {
  animation: anmts 1s ease-out forwards;
}

@keyframes anmts {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*=======1=========2=========3=========4=========5=========6*/
/*=======1=========2=========3=========4=========5=========6*/
.container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto auto auto auto auto auto auto auto;
}

/*
.header {
  grid-column: 1 / 7;
  grid-row: 1 / 2;
}
*/
.cntmain {
  grid-column: 1/4;
  grid-row: 1/2;
  background-color: white;
}

.item1 {
  grid-column: 1/2;
  grid-row: 2/3;
  background-color: white;
}

.item2 {
  grid-column: 2/4;
  grid-row: 2/3;
  background-color: white;
}

/*
.item3 {
  grid-column: 4 / 5;
  grid-row: 2 / 3;
  background-color: white;
}
*/
.item4 {
  grid-column: 1/2;
  grid-row: 3/4;
  background-color: white;
}

.item5 {
  grid-column: 2/3;
  grid-row: 3/4;
  background-color: white;
}

.item6 {
  grid-column: 3/4;
  grid-row: 3/4;
  background-color: white;
}

.item7 {
  grid-column: 1/4;
  grid-row: 4/5;
  background-color: white;
}

.item8 {
  grid-column: 1/2;
  grid-row: 5/6;
  background-color: white;
}

.item9 {
  grid-column: 2/3;
  grid-row: 5/6;
  background-color: white;
}

.item10 {
  grid-column: 3/4;
  grid-row: 5/6;
  background-color: white;
}

.item11 {
  grid-column: 1/2;
  grid-row: 6/7;
  background-color: white;
}

.item12 {
  grid-column: 2/4;
  grid-row: 6/7;
  background-color: white;
}

/*
.item13 {
  grid-column: 4 / 5;
  grid-row: 6 / 7;
  background-color: white;
}
*/
.item14 {
  grid-column: 1/2;
  grid-row: 7/8;
  background-color: white;
}

.item15 {
  grid-column: 2/3;
  grid-row: 7/8;
  background-color: white;
}

.item16 {
  grid-column: 3/4;
  grid-row: 7/8;
  background-color: white;
}

.item17 {
  grid-column: 1/3;
  grid-row: 8/9;
  background-color: white;
}

.item18 {
  grid-column: 3/4;
  grid-row: 8/9;
  background-color: white;
}

/* .nav {
  grid-column: 5 / 6;
  grid-row: 1 / 9;
  background-color: white;
  padding-left: 30px;
}
#footer {
  grid-column: 2 / 6;
  grid-row: 9 / 10;
  background-color: white;
}
*/
aside .aside-img {
  padding: 5px;
  width: 100%;
}

/*=======1=========2=========3=========4=========5=========6*/
.logonavi {
  padding-left: 1em;
  padding-top: 5px;
  text-align: left;
  /* background:#f4faf8;
      background color */
  width: 100%;
}

.logonavi span.remark {
  display: none;
}

.logonavi:hover span.remark {
  text-align: left;
  /* bellow for popup remark */
  /* display: block;
  line-height: 1.2em;
  margin: 0.5em;
  padding: 0.5em;
  position: absolute;
  top: 45px;
  background-color: #ddffdd22;
  color: #555; */
  /* width: 20em; */
  /* color: #9bdd9f; */
}

.orverwidth {
  margin: 0 -200%;
  padding: 0 200%;
  background-color: #fefffe;
  text-align: center;
}

.logonavi-l {
  display: inline-block;
  /* margin-left: 1em; */
  margin-top: 0px;
  /* position: fixed; */
}

@media screen and (max-width: 767px) {
  .logonavi-l {
    margin-right: 0.1em;
  }
}
@media screen and (min-width: 768px) {
  .logonavi-l {
    margin-right: 0.1em;
  }
}
@media screen and (min-width: 1024px) {
  .logonavi-l {
    margin-right: 0.1em;
  }
}
.logonavi-r {
  margin-top: 1em;
  float: right;
  text-align: left;
  /* display: inline-block; */
  margin-right: 1em;
  vertical-align: middle;
  color: #555;
}

/*=======1=========2=========3=========4=========5=========6*/
.clear {
  clear: both;
}

img {
  vertical-align: bottom;
}

ul {
  margin: 0;
  padding: 0;
}

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

a:visited {
  color: #788d98;
}

a:hover {
  text-decoration: underline;
}

header {
  max-width: 1256px;
  height: 100px;
  margin: 0 auto;
}

.logo {
  float: left;
  margin-top: 50px;
  margin-left: 20px;
}

.global-nav {
  float: right;
  margin-top: 60px;
}

.global-nav li {
  float: left;
  margin: 0 20px;
  font-size: 20px;
  list-style: none;
  font-family: "Comfortaa", cursive;
}

.global-nav li a {
  color: #ffffff;
}

.global-nav li a:hover {
  border-bottom: 2px solid #ffffff;
  padding-bottom: 3px;
  text-decoration: none;
}

#wrap {
  clear: both;
  background-color: white;
  margin-top: 220px;
  padding: 30px 0 0 0;
}

.content {
  margin: 0 auto;
}

.content i {
  margin: 0 8px 0 2px;
}

footer {
  text-align: center;
  color: #555;
  padding: 10px 0 0 0;
  background-color: #767671;
}

footer small {
  font-size: 12px;
}

#index h1 {
  font-size: 100px;
  line-height: 1;
  color: #ffffff;
  font-family: "Comfortaa", cursive;
  margin-bottom: 50px;
  border: none;
}

#btn a {
  background-color: #009cd3;
  color: #ffffff;
  font-size: 20px;
  font-family: "Comfortaa", cursive;
  width: 185px;
  display: block;
  text-align: center;
  line-height: 50px;
  margin-top: 20px;
  border-radius: 5px;
  border: 3px solid #009cd3;
}

#btn a:hover {
  text-decoration: none;
  background-color: #85d1f0;
  color: #e4edf0;
}

h1 {
  font-family: "Comfortaa", cursive;
  font-size: 36px;
  border-bottom: 1px solid #cccccc;
  margin: 1rem;
}

h2 {
  font-family: "Comfortaa", cursive;
  font-size: 24px;
}

.icon:before {
  content: "";
  padding-right: 10px;
  border-left: 7px solid #9cb4a4;
}

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

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

#index #wrap {
  background-color: transparent;
  margin-top: 0;
  padding: 0;
}

table td {
  padding: 0.3rem 1rem 0.3rem 1rem;
  background-color: #eee;
  border: solid 2px white;
}

/*****************************/
main {
  max-width: 956px;
  min-width: 350px;
  float: left;
}

aside {
  width: 300px;
  margin: 220px 0 300px 0;
  padding-top: 30px;
  float: left;
  font-family: "Comfortaa", cursive;
  background-color: white;
}

main section {
  padding-left: 10px;
  padding-right: 20px;
}

/*****************************/
.main h3 {
  margin-top: 20px;
  padding-left: 10px;
  border-left: solid 10px #4aad10;
}

.sky-blue {
  color: skyblue;
}

.sidebar {
  width: 250px;
  margin: 0 0 0 25px;
  float: right;
  font-family: "Comfortaa", cursive;
}

a img:hover {
  opacity: 0.8;
}

p.ziplist {
  margin-bottom: 5px;
  background-color: rgba(155, 224, 86, 0.5);
  padding-left: 10px;
}

.ziplist li {
  margin: 0;
  padding: 0;
  padding-left: 2em;
  list-style-position: inside;
  list-style-type: decimal;
}

.sidebar h2 {
  margin-bottom: 10px;
}

.sidebar ul {
  font-size: 16px;
  margin-left: 20px;
}

.sidebar ul a {
  color: #333333;
}

#naas {
  background-image: url("../images-naas/ike-a.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
}

#naas .touse p {
  margin-left: 20px;
}

#naas .feature p {
  margin: 0px 0px 0px 0px;
}

#naas .advantage p {
  margin: 0px 0px 0px 20px;
}

#naas .others p {
  margin: 0px 0px 0px 20px;
}

#naasdl {
  background-image: url("../images-naas/ike.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment: fixed;
  background-size: 100% auto;
}

#naasdl .excelver td {
  width: 400px;
  padding: 2px 0 2px 40px;
  border: 1px solid #cccccc;
}

.c-orange {
  color: orange;
}

.c-red {
  color: rgb(221, 107, 107);
}

.c-green {
  color: rgb(107, 221, 141);
}

span.ldsco {
  font-size: 14px;
  background: linear-gradient(transparent 60%, orange 60%);
}

span.marker {
  background: linear-gradient(transparent 60%, pink 60%);
}

#naasdl .license p {
  margin: 0 0 0 20px;
  padding-left: 1em;
  text-indent: -1em;
}

#naasdl .restrict p {
  margin: 0 0 0 20px;
  padding-left: 1em;
  text-indent: -1em;
}

.restrict1 table {
  margin-left: 25px;
  width: 550px;
}

.mode {
  width: 100px;
}

#naasdl .restrict1 p {
  margin-top: 0px;
  /*margin-left: 3em;*/
}

.descclmn img {
  vertical-align: middle;
  width: 15px;
}

.touse img {
  float: right;
  width: 700px;
  margin: 0 0 20px 0;
}

#naas p.discrip {
  text-align: center;
}

#naas .discrip img {
  width: 500px;
}

.advantage img {
  float: right;
  width: 350px;
}

/* Approve */
.content .toapprove {
  border: solid; /* borderに実線を指定 */
  padding: 12px 10px 5px 15px;
  border: 1px solid; /* 太さを指定 */
  border-color: #031de2; /* 色を指定 */
  /*border-radius: 8px; /* 矩形（四角形）の角を丸くする 半径が8pxの角丸 */
  /* border-left: transparent; /* 矩形の１辺だけ、線を見えなくする 左辺が透明 */
  display: inline-block;
}

.ml1 {
  margin-left: 1rem;
}

.ml2 {
  margin-left: 2rem;
}

.ml3 {
  margin-left: 3rem;
}

.pdglr {
  padding-left: 1rem;
  padding-right: 1rem;
}

/*=======1=========2=========3=========4=========5=========6*/
/* for footer */
footer {
  clear: both;
  position: relative;
  max-width: 1256px;
  margin-left: auto;
  margin-right: auto;
  background-color: #ffffff;
}

footer div.totop {
  text-align: right;
  font-size: 85%;
  margin-left: 100px;
  margin-right: 100px;
}

/*
div#footer {
  clear: both;
  position: relative;
  width: 960px;
  margin-left: auto;
  margin-right: auto;
  background-color: #ffffff;
}

div#footer div.totop {
  text-align: right;
  font-size: 85%;
  margin-left: 100px;
  margin-right: 100px;
}
*/
.atmark::before {
  content: "@";
}

div#fcontents {
  font-size: 0.8rem;
  background-color: #dee0e3;
}

div#flink {
  text-align: center;
  line-height: 1.8em;
  background-image: url("../images/bar.gif");
  background-repeat: repeat-x;
  background-position: left top;
}

div#fimg {
  float: left;
  position: relative;
  width: 350px;
}

div#fimg img {
  float: left;
  margin: 0px 0px 0px 10px;
}

div#fdescrip {
  float: right;
  position: relative;
  width: 420px;
  text-align: right;
  padding-right: 10px;
}

div#fdescrip p {
  line-height: 1.2em;
}

div#fmess {
  clear: both;
  position: relative;
  text-align: center;
  line-height: 2em;
  color: red;
  font-size: 0.7rem;
}

div#fcontents #flink a:link {
  color: #000066;
  text-decoration: none;
}

div#fcontents #flink a:visited {
  color: #009999;
  text-decoration: none;
}

div#fcontents #flink a:hover,
div#fcontents #flink a:active {
  color: #005577;
  text-decoration: underline;
}

/*=======1=========2=========3=========4=========5=========6*/
/**//*# sourceMappingURL=naasstyle.css.map */