/*hime.stylesheet*/

*{margin:0;padding:0;}

@media (min-width:960px){  /* for pc */
  html{font-size:16px;}
  h1{font-size:1.8rem;}
  h2{font-size:1.1rem;}
  h3{font-size:1.0rem;}
}

@media (min-width:768px) and (max-width:959px){  /* for tablet */
  html{font-size:18px;}
  h1{font-size:1.2rem;}
  h2{font-size:1.1rem;}
  h3{font-size:1.0rem;}
}

@media (min-width:768px){ /* for PC + tablet *

/* no humberger */
  .drawer_open{display:none;}

  .nav_contents{
    position:fixed;
    _position:absolute;
    top:0;
    left:0;
    width:100%;
    z-index:99;
    text-align:center;
    font-size:0.8rem;
    margin:auto;
    padding:0;
    background:#666;
    list-style:none;
  }

  .nav_contents li{
    float:left;
    display:inline-block;
  }

  .nav_contents li a{
    color:#f0f0f0;
    padding:10px 15px;
    display:block;
    font-weight:bold;
    text-decoration:none;
    text-shadow:1px 1px 1px #999;
  }

  .nav_contents li a:hover{
    color:#FF9933;
  }

} /* for PC + Tab end */

@media (max-width:767px){  /* for phone */

  html{font-size:20px;}
  h1{font-size:1.1rem;}
  h2{font-size:1.0rem;}
  h3{font-size:1.0rem;}

  /* place of humberger */
  .drawer_open {
    height: 60px;width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;top:0;left:0;
    z-index: 100;
    cursor: pointer;
    background:#f0f0f0;
  }

  /* humberger 3 line */
  .drawer_open span,
  .drawer_open span:before,
  .drawer_open span:after {
    height: 5px; width: 40px;
    content: '';
    display: block;
    border-radius: 2px;
    transition: 0.5s;
    background:#666;
    position: absolute;
  }

  .drawer_open span:before {bottom: 16px;}
  .drawer_open span:after {top: 16px;}

  /* if click then center line clear */
  #drawer_input:checked ~ .drawer_open span {
    background: rgba(255, 255, 255, 0);
  }

  /* humberger -> peke */
  #drawer_input:checked ~ .drawer_open span::before {
    bottom: 0;
    transform: rotate(45deg);
  }
  #drawer_input:checked ~ .drawer_open span::after {
    top: 0;
    transform: rotate(-45deg);
  }

  /* set menu content */
  .nav_contents{
    position:fixed;
    left:-200px;
    top:60px;
    width: 160px;
    height:400px;
    z-index: 99;
    transition:0.5s;
    background:#eee;
    list-style:none;
  }

  .nav_contents li a{
    margin:0;padding:0;
    display:block;
    text-decoration:none;
    color:#666;
    padding:2px 0 2px 10px;
    border-bottom:1px solid #999;
  }
  .nav_contents li:first-child a{
    border-top:1px solid #999;
  }

  .nav_contents li a:hover{
    color:#ff9933;
  }

} /* for phone end */

/* common */

html,body{
  color:#333;
  font-family:sans-serif,system-ui;
}

body{
  background:#f0f0f0;
}

#menu{
  display: flex;
  width:100%;
/*  height:100%;*/
  justify-content: space-between;
  align-items: center;
}

/* hidden checkbox */
.drawer_hidden {
  display: none;
}

/* onclick -> display menu */
#drawer_input:checked ~ .nav_contents{
  left:0;
}

header{ 
  margin:60px 40px 0px 40px;
}

main{
  text-align:left;
  margin:0 auto;
  padding:10px;
}

section{
  margin:10px 40px;
  padding:10px;
  background:#f9f9f9;
}

main .no-section{  /* no-h2 section */
  margin:10px 40px;
}

main p{
  padding:1em 0;
  line-height:1.4rem;
  text-indent:1em;
}

main ul{
  margin:10px 20px 10px 30px;
  line-height:1.4rem;
}

main ul.no-list li{ /* himetabisitaku */
  display:inline-block;
  list-style:none;width:200px;
  border-bottom:1px solid #999;
}

main ol{
  margin:10px 20px 10px 50px;
  line-height:1.4rem;
}

.footer{
  width:100%;
  background:#808080;
  color:#f0f0f0;
  text-align:center;
  font-size:0.8rem;
  padding:5px 0;
}

.clear-both{clear:both;}
.blue{color:#0000FF;}

/* Links */

main a{text-decoration:underline;}
main a:link{color:#000066;}
main a:visited{color:#006600;}
main a:active{color:#660000;}
main a:hover{
  text-decoration:underline;
  color:#FF6600;
}

main .link{
  text-align:center;
  padding:10px 5px;
  font-size:0.9rem;
}

/* header */
h1{
  text-align:left;
  color:#666;
  padding:10px;
  margin:0 auto;
  font-weight:bold;
}

h1.title{ /* neko title */
  text-align:right;
  margin:10px;
  height:43px;
  background:url(../gif/cat_title.gif);
  background-repeat:no-repeat;
  background-position:right bottom;
  padding:15px 80px 0px 0px;
}

h2{
  clear:both;
  color:#800000;
  background:url("../gif/nyan_or.gif") no-repeat left; 
  border-top:2px solid #ccc;
  border-bottom:2px solid #ccc;
  text-align:left;
  padding:3px 0 3px 40px;
  margin:10px 0 0 0;
}
h2.mtb{
  color:#000080;
  background:url("../gif/nyan_vi.gif") no-repeat left;
}
h2.bike{
  color:#800000;
  background:url("../gif/nyan_br.gif") no-repeat left;
}

h3{
  color:#800000;
  text-align:left;
  margin:5px 10px;
  padding-left:20px;
  border-left:8px solid #800000;
}

/* profile table */

#profile{
  border-collapse;collapse;
  width:95%;
  margin:5px auto;
}
#profile th{
  border:1px solid #999;
  font-weight:normal;
  background:antiquewhite;
}
#profile td{
  border:1px solid #999;
  background:#FDF5E6;
}
#profile ul{
  margin:0;padding:0;
}

#profile ul li{margin:0 20px;}

/* image */

img{max-width:100%;}

img#title{width:150px;}

img.space{
  margin:15px 10px;
  border:1px solid #666;
}

/* trip photo */
div.trip_img img{
  border:1px solid #666;
  margin:5px;
}

/* kako-top photo */
.kako_img img{
  border:1px solid #666;
}

section .trip_img{ /* trip lightning */
  text-align:center;
  margin:0 auto;
}

/* horizontal */
hr{
  clear:both;
  border:0;
  margin:10px 5px;
  border-top:3px solid #999;
}