@charset "UTF-8";

/* 共通部分 */
html {
  font-size: 100%;
}
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.7;
  color: #000;
}
p + p,
p + h2,
p + h3,
a + a {
  margin-top: 16px;
}
ul,ol {
  list-style-position: inside;
}
 a:hover {
  opacity: 0.6;
  text-decoration: underline;
 }
 img {
  max-width: 100%;
 }

 /* HEADER */

/* ロゴ */
 .logo {
  width: 300px;
  margin-top: 8px;
 }
 @media (max-width: 800px) {
  .logo {
    width: 200px;
  }
}


 /* ページヘッダー */
 .page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
 }

 /* 画面幅の書式 */
 .wrapper {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 4%;
 }

/* HOME */
.home-content {
  text-align: center;
}

/* 見出し */
.page-title {
  font-size: 5rem;
  color: white;
  font-family: 'Philosopher', serif;
}
@media (max-width: 800px) {
  .page-title {
    font-size: 3rem;
  }
}

/* ハンバーガーメニュー部分 */
.sp-menu {
  margin-top: 16px;
  margin-left: 8px;
}
.sp-menu #open {
  font-size: 32px;
  line-height: 64px;
  padding: 0 16px;
  background: white;
  border: solid silver 0.5px;
  border-radius: 5px;
  cursor: pointer;
}
.sp-menu #open.hide {
  display: none;
}
.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(254, 180, 83, 0.95);
  text-align: center;
  padding: 64px;
  opacity: 0;
  pointer-events: none;
  transition:  opacity .6s;
}
.overlay.show {
  opacity: 1;
  pointer-events: auto;
}
.overlay #close {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 32px;
  cursor: pointer;
}
.overlay ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.overlay li {
  margin-top: 24px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .3s, transform .3s;
}
.overlay.show li {
  opacity: 1;
  transform: none;
}
.overlay.show li:nth-child(1) {
  transition-delay: .1s;
}
.overlay.show li:nth-child(2) {
  transition-delay: .2s;
}
.overlay.show li:nth-child(3) {
  transition-delay: .3s;
}
.overlay.show li:nth-child(4) {
  transition-delay: .4s;
}
.overlay a {
  padding: 0 24px;
  line-height: 64px;
  font-size: 1.5rem;
  text-decoration: none;
  color: #333;
}
.overlay a:hover {
  opacity: 0.6;
}

/* PC版メニュー */
.pc-menu {
  display: none;
}
@media (min-width: 800px) {
  .pc-menu {
    display: flex;
    font-size: 1.25rem;
    margin-top: 34px;
  }
  .pc-menu ul {
    list-style-type: none;
    margin: 0;
  }
  .pc-menu li {
    display: inline-block;
  }
  .pc-menu a {
    display: block;
    text-decoration: none;
    color: #000;
    padding: 0 24px;
    line-height: 64px;
  }
  .pc-menu a:hover {
    opacity: 0.6;
    text-decoration: underline;
  }
  .sp-menu {
    display: none;
  }
}

/* アイキャッチ */
.top-img {
  /* max-width: 1000px; */
  text-align: center;
}
.top-img > img {
  max-width: 1200px;
}
@media (max-width: 1000px) {
  .top-img > img {
    width: 100%;
  }
 }

/* MAIN */
main {
  background-image: url(../images/background.png);
  background-repeat: repeat;
}

.main-content {
  display: flex;
  justify-content: space-between;
  padding-bottom: 50px;
}
@media (max-width: 800px) {
  .main-content {
    flex-direction: column;
  }
} 

 /* トップコンテンツ */
 .top-content {
  /*border: solid silver 1.5px;*/
  border-radius: 10px;
  background: white;
  padding: 6% 4%;
  margin-top: 16px;
}

.top-content h2 {
  text-align: center;
  font-size: 200%;
}
@media (max-width: 800px) {
  .top-content h2 {
    font-size: 150%;
  }
}

.top-item {
  border-bottom: solid silver 1.5px;
  padding: 1% 0;
}

/* 記事部分 */
article {
  width: 74%;
  background: white;
  margin-top: 32px;
  padding: 16px;
  /*画面からはみ出す文字列を折り返す*/
  word-break: break-all;
}
@media (max-width: 800px) {
  article {
    width: 100%;
  }
}

/* パンくずリスト、日付、署名 */
.bread-road {
  font-size: 0.7rem;
  color: gray;
}
.bread-road a {
  text-decoration: none;
  color: gray;
}
.bread-road a:hover {
  text-decoration: underline;
}

/* 目次部分 */
.content-index {
  background: rgba(182, 182, 182, 0.1);
  border: solid silver;
  border-radius: 8px;
  margin: 16px auto;
  padding: 8px 48px;
  max-width: 600px;
}
.content-index p {
  text-align: center;
}

/* 見出しの書式 */
.h2-title {
  font-size: 1.375rem;
  padding: 8px 8px;
  border-bottom: 2px orange solid;
  border-top: 2px orange solid;
  margin-bottom: 16px;
  background: rgba(253,149,50,0.3);
  color: rgba(242,120,75);
}
.h3-title {
  font-size: 1.375rem;
  padding: 8px 8px;
  margin: 16px 0;
  background: orange;
  color: #333;
  border-radius: 10px;
}
.h4-title {
  font-size: 1.375rem;
  padding: 8px 8px;
  margin: 16px 0;
  border-bottom: 2px orange solid;
  color: rgba(242,120,75);
}

/* 写真 */
.content-img {
  width: 90%;
}
@media (max-width: 800px) {
  .content-img {
    max-width: 100%;
  }
}


/* リスト */
.content-list {
  margin: 16px 0;
  padding: 16px 16px;
  background: #ffe7ed;
  border-radius: 10px;
}

ol.content-list {
  padding: 16px 4%;
}

/* 引用部分 */
.content-ref {
  background: #eefaff;
  border-radius: 10px;
  padding: 16px;
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
}

/* ボタンの装飾 */
.content-btn {
  background: green;
  /*color: white;
  font-size: 1.2em;*/
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,1);
  cursor:pointer;
  text-decoration: none;
  padding: 8px 32px;
}

button {
  display: block;
  margin: 16px auto;
  color: white;
  font-size: 1.2em;
}


/* 文字の装飾 */
main span {
  font-weight: bold;
  background: linear-gradient(transparent 60%, #ff6 60%);
}

/* コーディング用 */
pre {
  /*画面からはみ出す文字列を折り返す*/
  /*white-space: pre-wrap;*/
  /*画面からはみ出す文字列を横にオーバーフローさせる*/
  overflow-x: auto;
}
.coding {
  color: white;
  background-color: #333;
  margin-top: 8px;
  margin-bottom: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 8px;
}
.coding p{
  margin: 0 auto;
  padding-left: 16px;
  padding-top: 4px;
  /* padding-bottom: 4px; */
}


/* サイドバー部分 */
aside {
  width: 22%;
  /* background: gold; */
  margin-top: 32px;
}
@media (max-width: 800px) {
  aside {
    width: 100%;
  }
}

/* 自己紹介 */
.introduce {
  background: white;
  /* #F4F6FC */
  border: orange solid 3px;
  border-radius: 10px;
  padding: 16px 18px;
  max-width: 800px;
  margin: 0px auto;
}
.introduce h3 {
  border-bottom:orange solid 5px ;
  text-align: center;
  margin-bottom: 16px;
}
.introduce h4 {
  text-align: center;
}
.introduce-img {
  text-align: center;
}
.introduce-img  img{
  border-radius:50%;
  border: solid 1px black;
  max-width: 150px;
}

/* よこならび */
.yokonarabi {
  display: flex;
  justify-content: space-around;
  max-width: 800px;
  margin: 0 auto;
}
@media (max-width: 800px) {
  .yokonarabi {
    flex-direction: column;
  }
}
 



/* FOOTER */
footer {
  background: orange;
  padding-top: 32px;
}
.footer-nav {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 800px;
}
@media (max-width: 800px) {
  .footer-nav {
    flex-direction: column;
  }
}
.footer-nav ul {
  list-style: none;
}
 .footer-nav a {
  display: block;
  color: #000;
  line-height: 64px;
  padding: 0 24px;
  text-decoration: none;
 }
 .footer-nav a:hover {
  opacity: 0.6;
  text-decoration: underline;
 }
.footer-sign p {
  text-align: center;
}