body,
#wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  padding: 0px;
}

main {
  flex: 1;
}

ul {
  list-style: square;
}

ul > li {
  padding-top: 5px;
  margin-bottom : 5px;
}

ol > li {
  padding-top: 5px;
  margin-bottom: 5px;
}

hr {
  margin-top: 17px;
  margin-bottom: 39px;
  width:450px;
}

a:link, :visited {
  color: black;
  text-decoration: none;
}

pre {
  white-space: pre-wrap;
}

#title-div {
  text-align: center;
}

.spacer-mt14 {
  margin-bottom: 14px;
}

.spacer-mt21 {
  margin-bottom: 21px;
}

.main-contents {
  text-align: center;
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.b-radius {
  border-radius: 0px 0px 5px 5px; /* 左上・右上・右下・左下 */
}

.img-container {
  margin-top: 1rem;
  margin-bottom: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*トップへ戻るボタン*/
.topBtn {
  position:fixed; /*固定*/
  bottom:20px; /*場所を右下に移動*/
  right:20px; /*場所を右下に移動*/
  display:block; /*aタグをblock要素に変更*/
  background-color:rgba(0,0,0,0.5); /*以下、デザインはご自由に！！*/
  color:#fff;
  text-decoration:none;
  font-weight:bold;
  font-size:11px;
  width:60px;
  height:60px;
  text-align:center;
  line-height:22px;
  border-radius:30px;
  padding-top:30px;
  box-sizing:border-box;
}

.topBtn:before {
  content:'\25B2';
  position:absolute;
  top:10px;
  left:0;
  width:100%;
  text-align:center;
  font-size:20px;
}

.topBtn:hover {
  opacity:0.7;
}

.contact {
  color:white;
  font-size: small;
  text-align: center;
  background-color: #5D7B2C;
  border-radius: 0px 0px 5px 5px; /* 左上・右上・右下・左下 */
}

.contact .big {
  font-size: large;
  font-weight: bold;
}

.nowrap {
  white-space: nowrap;
}

.toggle-nav {
  background: #555;
  position: absolute;
  right: 25px;
  top: 120px;
  margin-top: 4px;
  padding: 10px 10px 5px 10px;
  cursor: pointer;
  z-index:8;
}

.toggle-nav i {
  font-size:20px; color:#ddd;
}

.full-scr-nav {
  height:100vh;
  width: 100%;
  position: fixed;
  background: #000;
  bottom:0px;
  opacity: 0.8;
  display: none;
  z-index:9;
}

.links {
  position: absolute;
  top: 50%;
  left: 47%;
  transform: translate(-50%, -50%);
}

.links > ul {
  text-align: center;
}

.links > ul li { 
  list-style:none;
  padding: 10px;
  margin: 0px;
  white-space: nowrap; 
}

.links > ul li a {
  text-decoration: none;
  color: #f0f0f0;
  font-size: 20px;
}

.dismiss{
  color: #ddd;
  font-size: 24px;
  cursor:pointer;
}

.page-title {
  text-align: center;
  margin: auto;
  font-size: 30px;
  font-family: cursive;
}

.img-div {
  width:270px;
  margin-left:auto;
  margin-right: auto;
}

.img-div .toplogo {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.text-small {
  font-size: small;
}

.footerlogo {
  text-align: left;
  width: 90%;
  padding: 20px;
}

.list-style-none {
  list-style: none;
}

.form-group {
  /* width: 630px; */
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

#submit{
  color: #000;
  width:210px;
  height:59px;
  background-color: #E1E1E1;
}

.img-margin {
  margin: 30px 30px;
}

.img-size {
  width: 100px;
  /* height: 20px; */
}

.footer {
  margin-top: auto;
  width: 100%;
  background: #A09E9E;
}

.index-img {
  width: 400px;
  margin: 20px;
  border-radius: 5px;
  opacity: 0.8;
}

.ojizousama1-img {
  width: 2px;
  margin: 2px;
  border-radius: 5px;
  opacity: 0.8;
}

.contents {
  /* text-align: center;
  margin-left: auto;
  margin-right: auto; */
  text-align: center;
}
.contents>p>img {
  margin-left: auto;
  margin-right: auto;
  width:400px;
}
.contents>p {
  display: inline-block;
  /* text-align: left; */
}
.contents>ul {
  display: table;
  margin: 0 auto;
  text-align: left;
}
.contents>ul>li {
  /* padding-top: 10px; */
  /* padding-bottom: 2px; */
}

.footer-top-margin {
  margin-top: 80px;
}

.grad-wrap {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  max-width: 780px;
  margin-bottom: 53px;
  font-family: serif;
}
.grad-btn {
  color:#E94708;
}
.grad-btn::before {
  content: "続きを読む.."
}
.grad-item {
  text-align: left;
  position: relative;
  overflow: hidden;
  height: 80px; /*隠した状態の高さ*/
  font-size: 20px;
  font-weight: lighter;
  font-family: serif;
}
.grad-item::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px; /*グラデーションで隠す高さ*/
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  content: "";
}
.grad-trigger {
  display: none; /*チェックボックスは常に非表示*/
}
.grad-trigger:checked ~ .grad-btn::before {
  content: "閉じる" /*チェックされていたら、文言を変更する*/
}
.grad-trigger:checked ~ .grad-item {
  height: auto; /*チェックされていたら、高さを戻す*/
}
.grad-trigger:checked ~ .grad-item::before {
  display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/
}

@media (min-width: 0px) {

  hr { width: 250px; }

  #toggle-nav { display: block; }
  a:link, :visited {
    color: white;
    text-decoration: none;
  }
  #title-div { display: block; }
  #head-div { display: block; }

  .contents {
    /* text-align: left; */
    padding-left: 5px;
    padding-right: 5px;
  }
  .img-div {
    width: 200px;
    text-align: center;
    margin:auto;
  }

  .index-img { width: 80%; }

} 

@media (min-width: 767px) {

  hr { width: 250px; }

  #toggle-nav { display: block; }
  a:link, :visited {
    color: white;
    text-decoration: none;
  }
  #title-div { 
    text-align: center;
    display: block;
  }
  #head-div { display: none;  }

  .contents {
    text-align: center;
  }
  .img-div {
    width: 200px;
    text-align: center;
    margin-left: 20px;
  }
  .index-img {
    width: 400px;
    margin: 20px;
  }
  /* .order1 { order: 1; } */
}

@media (min-width: 768px) {

  a[href^="tel:"]{ pointer-events: none; }

  hr { width: 250px; }

  #toggle-nav { display: none; }
  #title-div { 
    text-align: center;
    display: none;
  }
  #head-div { display: flex; }
  .contents {
    text-align: center;
  }
  .img-div {
    width: 200px;
    text-align: center;
    margin-left: 20px;
  }

  .img {
    width: 400px;
    margin: 20px;
  }

  /* .order1 { order: 1; } */
}