@charset "utf-8";

/* ========BASIC======== */
body {
   margin: 10px;
   font-family: 'Noto Sans JP', sans-serif;
   background-image: url("../Sozai/bgnavy.jpg");
}

@media (max-width: 768px) {
   body {
      margin: 5px;
   }
}

a {
   text-decoration: none;
}

a:link {
   color: rgb(30, 95, 216);
}

a:visited {
   color: rgb(30, 95, 216);
}

a:hover {
   color: red;
   text-decoration: underline;
   opacity: 0.7;
}

/* ========TEMPLATE LAYOUT======== */
#top {
   max-width: 1250px;
   margin: 0 auto;
   background-color: white;
}

@media (max-width: 768px) {
   #top {
      width: 100%;
   }
}

#header {
   height: 70px;
   padding: 5px;
   display: flex;
   justify-content: center; /* 左右中央揃え */
   align-items: center;     /* 上下中央揃え */
   background-image: url("../Sozai/bghead.jpg");
}

#place {
   padding: 2px 20px;
   margin: 10px 5px;
   background-color: #e4e3e3;
   font-size: 1.2rem;
   line-height: 1.8rem;
}

#place-travel {
   padding: 2px 20px;
   margin: 15px 15px;
   background-color: #ccecff;
   font-size: 1.2rem;
   line-height: 1.8rem;
}

#title-travel {
   background-color: #3131a5;
   padding: 10px;
   color: white;
   font-size: 1.7rem;
   text-align: center;
   margin: 15px 0px;
}

#contents {
   padding: 0 5px;
}

#footer {
   height: 100px;
   padding: 0 20px;
   background-image: url("../Sozai/bghead.jpg");
}

.hashtag {
   font-weight: bold;
}

.thumbarea {
   text-align: center;
}

.thumbarea img {
   width: 30%;
   max-width: 480px;
}

/* ========MENU CUSTOMIZE======== */
#menu {
   margin: 0px auto;
   padding: 30px;
   text-indent: 20px;
   width: 75%;
   line-height: 40px;
}

@media (max-width: 768px) {
   #menu {
      width: 90%;
      line-height: 3em;
   }
}

#menu li {
   display: inline;
   padding-right: 10px;
   font-size: 1.5rem;
}

@media (max-width: 768px) {
   #menu li {
      font-size: 2rem;
   }
}

#menu li a {
   padding-left: 20px;
}

#menu li b {
   padding-left: 20px;
}

#menu li a:hover {
   background: url(../images/mark.gif) top left no-repeat;
}

/* ========MAIN CONTENTS CUSTOMIZE======== */
#contents h2 {
   margin-right: 10px;
   margin-left: 10px;
   padding-top: 30px;
   border-bottom: 5px double #000000;
}

#contents h2 a {
   padding-left: 20px;
}

#contents h2 a:hover {
   background: url(../images/mark.gif) top left no-repeat;
}

#contents h2 img {
   margin-bottom: 6px;
}

#contents .summary {
   margin: 0 auto;
   width: 90%;
   background-color: #eeeeee;
}

@media (max-width: 768px) {
   #contents .summary {
      width: 100%;
   }
}

#contents .summary td {
   padding: 15px 60px;
}

@media (max-width: 768px) {
   #contents .summary td {
      padding: 15px;
   }
}

#contents .travel {
   width: 800px;
   margin: 0 auto;
   margin-bottom: 20px;
   padding: 0;
   border: 1px solid #999;
   background-color: #eff9ff;
}

@media (max-width: 768px) {
   #contents .travel {
      width: 100%;
   }
}

#contents .travel td {
   padding: 30px 60px;
   line-height: 24px;
   text-align: center;
}

@media (max-width: 768px) {
   #contents .travel td {
      padding: 50px 10px;
      line-height: 40px;
      font-size: 32px;
   }
}

#contents .travel tr:nth-child(even) {
   background-color: #ffffff;
}

#contents .travelimg {
   width: 320px;
   display: block;
   margin: 0px auto;
   margin-bottom: 20px;
}

@media (max-width: 768px) {
   #contents .travelimg {
      width: 100%;
      max-width: 720px;
   }
}

#contents .travelimgarea {
   display: flex;
   gap: 0px 13px;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}

/* ========TOTOP CUSTOMIZE======== */
.totop {
   font-size: 34px;
   text-align: right;
   margin: 30px 110px;
}

@media (max-width: 768px) {
   .totop {
      font-size: 54px;
   }
}

.index_menubtnarea {
   margin: 1rem 0;
}

.index_menubtnarea img {
   width: 40%;
   max-width: 150px;
   margin: 1rem 2%;
}

.index_menubtnarea a:hover {
   text-decoration: none;
}

.header_img{
   width: 250px;
}