/* ranbu stylesheet */

*{
  margin:0; padding:0;
  color:#333;font-family:sans-serif,'Osaka', system-ui;
}

@media (min-width:960px) { /* for PC*/
  html{font-size:16px;}
  .top_photo .title_area{font-size:3.2rem;}
  .top_photo .text_area{font-size:1.2rem;width:40%;}
}

@media (min-width:820px) and (max-width:960px) { /* for tablet */
  html{font-size:18px;}
  .top_photo .title_area{font-size:2.0rem;font-weight:bold;}
  .top_photo .text_area{font-size:1.0rem;width:40%;}
}

@media (min-width:820px) { /* for tab + PC */
  .pankuzu, .pankuzu a{font-size:0.8rem;}
  h1{font-size:1.2rem;}
  h2{font-size:1.1rem;}
  footer{font-size:0.8rem;}

  .nav{
    top:0;left:0;
    position:fixed;
    width:100%;
    height:60px;
    background:#fff;
    z-index:50;
  }

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

   /* set menu content */
  .nav_content {
    top:25px;right:90px;
    position: fixed;
    z-index: 99;
  }
  .nav_list {
    list-style: none;
  }
  .nav_item{
    display:inline-block;
  }
  .nav_item a{
    padding:5px 5px 0px 5px;
    text-decoration:none;
    text-shadow:1px 1px 3px lightsteelblue;
    color:#444;
    display:block;
  }
  .nav_item a:hover{
    color:orange;
  }

  body{
  background:url("/fig/wader_foots.png") repeat-y bottom right,  linear-gradient(to right, #fcfcfc,lightsteelblue);
  }

  main{
   margin: 60px 90px 0px 60px;
   padding:0px 0px 20px 0px;
   border:0px solid #999;
  }
}

@media (max-width:820px) { /* for phone */
  html{font-size:20px;}
  .top_photo .title_area{font-size:1.2rem;font-weight:bold;}
  .top_photo .text_area{font-size:1rem;width:80%;}

 .nav{
    top:0;left:0;
    position:fixed;
    width:100%;
    height:60px;
    background:#fff;
    z-index:50;
  }
  
  .pankuzu, .pankuzu a{font-size:0.8rem;}
  h1{font-size:1.1rem;}
  h2{font-size:1rem;} 
  footer{font-size:0.8rem;}

  /* 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:#2e456d;
    border-bottom:1px solid #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;
    background: #f0f0f0;
    transition: 0.5s;
    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_content {
    top: 60px;
    position: fixed;
    left: -200px;top:60px;
    width: 150px;height: 100%;
    z-index: 200;
    transition: .5s;
    /*  background:linear-gradient(to left ,#abdcff,#0396ff);*/
    background:#2e456d;
  }

  .nav_list {
    list-style: none;
  }
  .nav_item{
    border-bottom:1px solid #f0f0f0;
  }
  .nav_item:first-child{
    border-top:1px solid #2e456d;
  }
  .nav_item a{
    padding:10px;
    text-decoration:none;
    color:#f0f0f0;
    background:#2e456d;
    display:block;
  }
  .nav_item a:hover{
    color:#2e456d;
    background:#f0f0f0;
  }

  body{
    margin:10px;
    background:linear-gradient(to right, #fcfcfc,lightsteelblue);
  }

  main{
   margin-top:60px;
   padding:10px;
  }
}

img{max-width:100%;}

.header {
  display: flex;
  width:100%;
  height:100%;
  justify-content: space-between;
  align-items: center;
}

.logo{
  position:fixed;
  top:0;left:75px;
  font-weight:bold;
  text-shadow:1px 1px 2px lightsteelblue;
  z-index:150;
  padding:25px 0 0 60px;
}

.logo li{
  list-style:none;
  margin: -5px 0px 0px 0px;
}

.logo_fig{
  margin:0;
  position:fixed;
  top:0;left:60px;
  z-index:150;
}

.logo_main{
  font-size:18px;
  margin:0;
  padding:0px;
}

.logo_sub{
  font-size:10px;
  margin:0;
  padding:0px;
}

/* 全体 */
/*
main {
   margin: 60px 90px 0px 60px;
   padding:0px 0px 20px 0px;
   }
*/
section{
  margin:10px 0px 10px 0px;
  padding:10px 10px 10px 0px;
  /*background:#ccc; */
}

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

.text_section{
  position:relative;
  margin: 0.5em 1em 1em 1.5em;
  padding: 0.5em 0em 0.5em 0em;
  background-color:#f0f0f0;
  box-shadow: 2px 2px 3px lightsteelblue;
  border-radius: 0px 5px 0px 5px;
}

.text_nosection{
  position:relative;
  margin: 0em 1em 1em 0.5em;
  padding: 0.5em 0em 0.5em 0em;
  background-color:#f0f0f0;
  box-shadow: 2px 2px 3px lightsteelblue;
  border-radius: 0px 5px 0px 5px;
}

.text_nosection hr, .text_section hr{
  margin:-0.25em 0em;
  clear:both;
  border:0;
}

main h1{
  margin: 0em 1em 0em 0.5em;
  padding:0.5em 1em 0em 0.5em;
  text-align:left;
  font-size:1.5em;
  font-weight: normal;
  color: navy;
  text-shadow: 1px 2px 3px #808080; 
  border-bottom: 2px solid #153FA1;
}

/* しおり風
main h2{
  margin: 1em 0em 1em 1em;
  padding:0em 1em 0em 0.5em;
  font-size:1em;
  font-weight:bold;
  border-left:6px solid #153FA1;
}
*/

h2 {
  margin: 1em 0em 0.5em 1em;
  padding:0em 1em 0em 0.25em;
  width:80%;
  background: linear-gradient(transparent 65%, #9ad0e3 60%);
}

main p{
  padding:0.5em 0.5em 0.5em 0.5em;
  margin: 0em 0.5em 0em 0.5em;
  border-style: none;
  line-height:1.4rem;
}

/* リスト */
main ul{
  padding:0em 1em 0em 0.5em;
  margin:0em 0.5em 0.5em 0em;
  list-style-type:none;
  line-height:1.4rem;
}

main ul.no-list li{
  padding:0em 0em 0em 0em;
  margin:0em 0.5em 0em 0em;
  list-style:none;width:180px;
  border-bottom:1px dashed #999;
  display: inline-block;
  background:none;
}

main li{
  margin:0em 0em 0.5em 0.5em;
  padding:0.25em 0em 0em 1em;
  background:url("/fig/triangle_blue.gif") no-repeat 0 0.6em;
}
.normal li{
  margin: 0em 0em 0em 0.5em;
}
.small li{
  font-size: 0.9em;
  margin: 0em 0em 0em 0.5em;
}

.noicon li{
  margin: 0em 1.5em 0em 3em;
  text-indent:-0.5em;
  background:none;
}

/* profileページの表内リスト */
.list_prof li{
  margin:0px -20px 5px 0px;
  padding:0;
}
main dt{
  color:#153FA1;
}
main dl{
  margin:0em 1em 0.5em 0.5em;
}
main dt{
  margin:0.25em 0.5em 0em 0em;
  font-weight:bold;
  padding-left:0.5em;
}
main dd{
  margin:0em 1em 0em 1em;  
  padding:2px 0 0 1em;
  background:url("/fig/triangle_blue.gif") no-repeat 0 0.5em;
}

/*リンク*/
main a{
  text-decoration: underline;
  color:navy;
}
main a:link{
  color:navy;
}
main a:visited{
  color:steelblue;
}
main a:active{
  color:orange;
}
main a:hover{
  color:orange;
}

hr{
  border:1px solid #2e456d;
  /*margin:15px 15px 10px 0px;*/
  margin:0em 2em 1em 1em;
}

footer{
  padding-right:10px;
  height:1.2rem;
  text-align:right;
  background:#2e456d;
  color:#f0f0f0;
  clear:both;
}

.pankuzu, .pankuzu a{
  color:#000080;
  text-align:left;
  margin: 0px 5px;
}
.pankuzu {
  padding: 2px 20px 0px 0px;
}

.clear-both{clear:both;}

/* トップページのコンテンツロゴ */
.contents_logos {
  position:relative;
  width:55%;
  margin:10px auto;
  min-width:500px;
}

.contents_logo {
  margin:5px 0px 0px 0px;
  text-align:center;
  position: relative;
  width:100%;
}

.contents_logo img{
/*  max-width:100%; */
}

.logo_items{
  display:flex;
  flex-wrap:wrap;
  justify-content: left;
  padding:10px;
}

.contents_logos .items{
  width:200px;
  margin:5px;
  background:#f0f0f0;
  box-shadow:2px 2px 3px lightsteelblue;
  border-top:0px solid #999;
  border-left:0px solid #999;
  
}

.contents_logos .items a{
    text-decoration:none;
}
.contents_logos .item0,.contents_logos .item1,.contents_logos .item2,.contents_logos .item3,.contents_logos .item4,.contents_logos .item5{
  position:relative;
/*
  width:132px;
  height:112px;
  */
  width:172px;
  height:140px;
  margin:8px 0px 0px 8px;
  padding: 5px 0px 0px 11px;
  font-size:1.3em;
}
.contents_logos .item0::before,.contents_logos .item1::before,.contents_logos .item2::before,.contents_logos .item3::before,.contents_logos .item4::before,.contents_logos .item5::before{
  position:absolute;
  line-height:0;
  content:'';
  border-top:10px solid #2e456d;
  border-right:10px solid transparent;
  border-bottom:10px solid transparent;
  border-left:10px solid #2e456d;  
  width:0;height:0;
  top:-2px;left:-2px;
 }
.contents_logos .item0{
  color:#f0f0f0;text-shadow:1px 1px 1px #666;
  background:url("/fig/menu_profile.jpg") no-repeat;
  box-shadow: 2px 2px 3px lightsteelblue;
}
.contents_logos .item1{
  color:#f0f0f0;text-shadow:1px 1px 1px #666;
  background:url("/fig/menu_bird.jpg") no-repeat;
  box-shadow: 2px 2px 3px lightsteelblue;
}
.contents_logos .item2{
  color:navy;text-shadow:1px 1px 1px #666;
  background:url("/fig/menu_bike.jpg") no-repeat;
  box-shadow: 2px 2px 3px lightsteelblue;
}
.contents_logos .item3{
  color:#f0f0f0;text-shadow:2px 2px 2px #666;
  background:url("/fig/menu_travel.jpg") no-repeat;
  box-shadow: 2px 2px 3px lightsteelblue;
}
.contents_logos .item4{
  color:#f0f0f0;text-shadow:1px 1px 1px #666;
  background:url("/fig/menu_diary.png") no-repeat;
  box-shadow: 2px 2px 3px lightsteelblue;
}
.contents_logos .item5{
  color:#f0f0f0;text-shadow:1px 1px 1px #000;
  background:url("/fig/menu_hime.jpg") no-repeat;
  box-shadow: 2px 2px 3px lightsteelblue;
}
.contents_logos .items .item{
  text-align:left;
  overflow-wrap:break-word;
}

/* トップページタイトル画像 */
.top_photo {
  position: relative;
  max-width: 100%;
  height: 350px;
  margin: 0rem 0rem 1rem 0rem;
  background: url("/fig/ranbutop.jpg") no-repeat center center/cover;/*画像を背景に*/
  min-height:100px;
  min-width:500px;
}
.top_photo p {
  position: absolute;
  z-index: 1;/*文字の重なりを全面に*/
  color: #FFF;
  top:30%;
  left: 25%;
  transform: translate(-50%,-50%);
  width: 100%;
  text-align: center;
}
.top_photo li{
  position: absolute;
  z-index: 1;/*文字の重なりを全面に*/
  color: #FFF;
  list-style:none;
  background:none;
  padding:0;
  margin:0;
}
.top_photo .title_area{
  top: 25%;
  left: 5%;
}
.top_photo .text_area{
  top: 45%;
  left: 5%;
}
.overtext::after {/*0.4に透過した黒を画像の上に重ねる*/
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.2);
}

@media screen and (max-width: 800px){
  .top_photo{
    width: 100%;
    height: 0;/*縦幅は固定できないので0にしてpadding-topで高さを取る*/
    padding-top: 30.75%;/*高さの％は画像の高さ÷横幅x100*/
  } 
  .top_photo p{
    font-size: 1.6rem;
  }
}

/* humberger menu */
/* no display checkbox */
.drawer_hidden {
  display: none;
}
/* onclick -> display menu */
#drawer_input:checked ~ .nav_content {
  left: 0;
}

/* 近況報告 */
.box_frame {
  width:100%;
  display:flex;
  flex-wrap:wrap;
  justify-content: center;
}

.box_news {
  position: relative;
  width:40%;
  margin: 1em;
  padding: 0.5em;
  background-color:#f0f0f0;
  box-shadow: 2px 2px 3px lightsteelblue;
  min-width:480px;
}

.box_news .box_news_title {
  position: absolute;
  display: inline-block;
  top: -5px;
  left: -5px;
  padding: 0em 1em;
  height: 33px;
  line-height: 35px;
  font-size: 1em;
  background: #2e456d;
  color: #ffffff;
}
.box_news p {  
  margin: 0; 
  padding:0em 1em 0em 1em;
}
.box_news img{
  float:none;
  margin:2em 1em 0em 1em;
  box-shadow:1px 1px 5px #666;
}

.box_update{
  margin-top:20px;
  padding:10px;
  border-top:3px solid lightsteelblue;

}


table{
  width: 90%;
  border-collapse: collapse;
  margin:10px 0px 0px 20px;
}
table tr:first-child{
  border-top: solid 2px #f0f0f0;
}
table tr:nth-child(odd){
  background-color: #f0f0f0;
  border-right: solid 2px #f0f0f0;
}
table tr:nth-child(even){
  background-color: #fff;
  border-right: solid 2px #fff;
}
table th{
  position: relative;
  width: 20%;
  background-color: steelblue;
  color: white;
  text-align: center;
  padding: 10px 10px;
}
table tr{
  border-bottom: solid 2px #f0f0f0;
}

/* 自転車 */

.bike tr:first-child{
  border-top: solid 2px steelblue;
}
.bike tr:nth-child(odd){
  background-color: #f0f0f0;
  border-right: solid 0px;
}
.bike tr:nth-child(even){
  background-color: #fff;
  border-right: solid 0px;
}
.bike th{
  text-align: center;
  width:10%;
  background-color: steelblue;
  color: white;
  padding: 5px 5px;
}
.bike td{
  text-align: center;
  border: none;
  padding: 2px 2px;
}


/* 画像 */
img.right{
  /* border:1px solid #666; */
  float:right;
  margin:0.5em 1em 0.5em 0.5em;
  box-shadow:1px 1px 5px #666;
  width:300px;
  max-width:100%;
}
img.left{
  /* border:1px solid #666; */
  float:left;
  margin:0.5em 1em 0.5em 0.5em;
  box-shadow:1px 1px 5px #666;
  width:300px;
  max-width:100%;
}
.center_nobox{
  display: flex;
  justify-content: center;
}
.center_nobox img{
  width: 80%;
  max-width: 450px;
}

/* 画像二枚横並べ */
.two_images{
  width:100%;
  display:flex;
  flex-wrap:wrap;
  justify-content: center;
  align-items: flex-end;
}
.two_images img{
  margin:0em 1em 0.5em 0.5em;
  box-shadow:1px 1px 5px #666;
  max-width:300px;
}

/* img.{left,right} で回り込ませるテキストが短い場合の clear-both 方法わからず悪手 */
hr.clear-both{
  opacity:0;
  clear:both;
}

/* 旅行記トップに記載する各日へのリンクなどの可変二列表示 */
.flexbox{
  flex-wrap: wrap;
  display: flex;
  justify-content: left;
  background: rgb(225, 228, 228);
  width: 86%;
  margin: 2% 0% 0% 5%;
  border-radius: 5px;
}
.flexbox .item{
  margin: 0em;
}
/* 下部のマージンを減らして、1行表示をスムーズにする */
.flexbox .item ul{
  text-align: left;
  margin: -0.75em 0em -0.25em 0em;
}


/* 旅行記などにおけるページ移動ガイド */
.mv_page{
  margin:0 0.5em 0 00.5em;
  text-align:right;
  font-size:0.9rem;
}
span.mv_page_top{
  margin:0 0.5em;  
  padding:2px 0 0 1em;
  background:url("/fig/triangle_blue_up.gif") no-repeat 0 0.5em;
}
span.mv_page_back{
  margin:0 0.5em;  
  padding:1px 0 0 1em;
  background:url("/fig/triangle_blue_back.gif") no-repeat 0 0.5em;
}
span.mv_page_next{
  margin:0 0.5em;  
  padding:1px 0 0 1em;
  background:url("/fig/triangle_blue.gif") no-repeat 0 0.5em;
}


/* 各コーナーの入口ページなどで使用　*/
#photo_landscape{
  float:right;
  margin:0 1em 0 0.5em;
  width:400px;
  max-width:100%;
  text-align:right;
  font-size:0.9em;
}
#photo_landscape img{
  margin:0 5px;
  border:0px solid #666;
  box-shadow:1px 1px 5px #666;
}

#photo_portrait{
  float:right;
  margin:0 1em 0 0.5em;
  width:250px;
  max-width:100%;
  text-align:right;
  font-size:0.9em;
}
#photo_portrait img{
  margin:0 5px;
  border:0px solid #666;
  box-shadow:1px 1px 5px #666;
}