@charset "utf-8";

/* リセットcss */


html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}

body {
  line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
  display:block;
}

nav ul {
  list-style:none;
}

blockquote, q {
  quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content:'';
  content:none;
}

a {
  margin:0;
  padding:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}

/* change colours to suit your needs */
ins {
  background-color:#ff9;
  color:#000;
  text-decoration:none;
}

/* change colours to suit your needs */
mark {
  background-color:#ff9;
  color:#000; 
  font-style:italic;
   font-weight:bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom:1px dotted;
  cursor:help;
}

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

/* change border colour to suit your needs */
hr {
  display:block;
  height:1px;
  border:0;   
  border-top:1px solid #cccccc;
  margin:1em 0;
  padding:0;
}

input, select {
  vertical-align:middle;
}
/* リセットcss */



body {
    font-family: 'Noto Sans JP', sans-serif;
    
    width: 1000px;
    margin: 0 auto;
    min-height: 100vh;
    background-color: #F3F1ED;
    display: grid;
    grid-template:
        "... ...... ...... ...... ... "
        "... header header header ... " 100px
        "... ...... ...... ...... ... "
        "... left   ...... center ... " 1fr
        "... ...... ...... ...... ... "
        "... footer footer footer ... " 100px
        "... ...... ...... ...... ... "
        / auto 200px auto 1fr auto ;
}
header {
    grid-area: header;
}
header img {
  display: none;
}
main {
    width: 410px;
    background-color: #fff;
    grid-area: center;
    display: grid;
    grid-template: 
    "... ..... ..... ..... ..." 20px
    "... ..... kao kao ..." 100px
    "... yago kao kao ..." 30px
    "... ..... ..... ..... ..." 10px
    "... name ..... ..... ..." 40px
    "... ..... ..... ..... ..." 40px
    "... honbun honbun honbun ..." 
    / 21px 230px 128px 10px 10px;
}
.kao {
    grid-area: kao;
}
.yago {
    grid-area: yago;
    font-size: 15px;
}
.name {
    grid-area: name;
    font-size: 20px;
}
.honbun {
    grid-area: honbun;
    font-size: 13px;
    line-height: 30px;
}


/* フェードイン */
main {
  opacity: 0;   /* 不透明度 */
  transition: all .9s ease;
  transform: translate(0, 100px);
}

main.show {
  opacity: 1;
  transform: none;
}


ul {
  font-size: 13px;
  margin-top: 30px;
  list-style-type: none;
  line-height: 22px;
}

nav {
    grid-area: left;
    text-align: center;
    position: fixed;
    top:100px;
}
nav img {
  width: 70px;
}


nav a {
  display: block;
  font-size: 15px;
  text-decoration: none;
}
.cp_link:hover {
	color: #fff;
	background-color: #acacac;
  }

  .sinde_link {
    width: 120px;
    margin-top: 20px;
  }
  .cp_link {
    margin-top: 20px;
  }

a:link { color : #000000; }
a:visited { color : #000000; }

footer {
    grid-area: footer;
    font-size: 10px;
    margin-left: 20px;
}






@media screen and (max-width: 896px) {
    body {
        width: 100%;
        grid-template:
            "header header header" 100px
            "... center ..." 1fr
            "... left ...  " 
            "... footer ..." 
            / auto 400px auto;
    }
    header img {
      display: block;
      position: fixed;
      width: 150px;
      margin: 20px 0 0 20px;
    }
    main {
      width: 400px;
      grid-area: center;
      display: grid;
      grid-template: 
      "... ..... ..... ..... ..." 10px
      "... ..... kao kao ..." 80px
      "... yago kao kao ..." 30px
      "... ..... ..... ..... ..." 10px
      "... name ..... ..... ..." 30px
      "... ..... ..... ..... ..." 30px
      "... honbun honbun honbun ..."
      / 10px 230px 140px 10px 10px;
    }
    .kao img {
      width: 130px;
      height: auto;
    }
    .yago {
        font-size: 13px;
    }
    .name {
        font-size: 18px;
    }
    /* main img {
    width: 100%;
    }
   */
    footer {
      display: block;
      margin-bottom: 100px;
      margin-left: 20px;
    }

    nav img {
     display: none;
    }
    nav {
      position: fixed;
      top: unset;
      bottom: 0;
      width: 100%;
      height: 100px;
      background-color: white;
  }

  ul {
    font-size: 13px;
    margin: 10px 0 0 20px;
    list-style-type: none;
    line-height: 20px;
  }

    .sinde_link {
      display: flex;
      width: 400px;
      margin-top: unset;
      margin-left: auto;
      margin-right: auto;
    }
    .cp_link {
      flex: 1;
      padding: 10px 10px;

    }
    /* テキストの縦線区切り */
    .cp_link+ .cp_link {
      border-left: 1px solid rgb(126, 125, 125);
    }

  }