/* keirokuya.jp */
@charset "utf-8";

.navbar-toggler:focus {
  box-shadow: 0 0 0 .1rem
}

.accordion-body {
  text-indent: 1.6rem;
}


/* Responsive pattern
================================================== */

/*
@media (min-width:576px) {
}

@media (min-width:768px) {
}

@media (min-width:992px) {
}

@media (min-width:1200px) {
}

@media (min-width:1400px) {
}
*/


/* Property
================================================== */

body {
  background-image: url("../../images/bg.png");
  background-repeat: repeat;
  background-size: 256px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
}

h1 {
  font-size: 28px;
}

h2 {
  font-size: 26px;
}

h3 {
  font-size: 24px;
}

h4 {
  font-size: 22px;
}

h5 {
  font-size: 20px;
}

h6 {
  font-size: 18px;
}

p {
  font-size: 18px;
  font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", serif;
}

.navbar h1 {
  font-size: 1.8rem;
}

.navbar ruby rt {
  font-size: .6rem;
}


/* Navbar Header
================================================== */

#navbarHeader h2 {
  font-size: 1.6rem;
}

#navbarHeader h3 {
  font-size: 1.2rem;
  margin-left: 1rem;
}

#navbarHeader h2 img {
  width: 192px;
  height: auto;
}

#navbarHeader p {
  text-indent: 1rem;
}

#navbarHeader ul li a {
  text-decoration: none;
}

#navbarHeader ul li {
  line-height: 1.8;
  margin-left: 1.8rem;
}

#navbarHeader .bi-ear {
  color: rgba(241, 187, 147, .8);
}


/* Navbar
================================================== */

.bg-dad7d2 {
  background-color: rgba(218, 215, 210, .5);
}

.navbar img {
  width: 52px;
  height: auto;
}

.navbar h2 {
  margin-top: .8rem;
}

.topbar .navbar-toggler {
  padding: .25em 1.06rem;
}

.navbar .search-icon i {
  margin-right: 1rem;
  color: #FFF;
}

.search-icon p {
  color: #FFF;
  margin-top: .8rem;
  font-size: .96rem;
  font-family: 'Zen Maru Gothic', sans-serif;
}


/* Nav
================================================== */

.bg-958e7e {
  background-color: #958e7e;
  /* グリー・クレール / Gris Clair */
}


/* Main
================================================== */

/* Category
------------------------------ */

.category h2 {
  margin: .5em 0 1em 0;
}

.category h3, .category-column h3 {
  text-align: center;
  color: #494f54;
}

.category p, .category-column p {
  text-indent: 1rem;
  line-height: 1.4;
  color: #6c757d;
}

.category-column p {
  font-size: .96rem;
}

.go-btn a:link {
  color: #FFF;
}

.go-btn a:link {
  color: #FFF;
}

.go-btn a:visited {
  color: #DDD;
}

.go-btn a:hover {
  color: #FFF;
  background: #243829;
}

.go-btn a:active {
  color: #FF0;
}


/* Footer
================================================== */

@media (min-width:576px) {
  .footer {
    background-repeat: repeat-x;
    background-size: cover;
  }
}

@media (min-width:768px) {
  .footer {
    background-repeat: repeat-x;
    background-size: cover;
  }
}

@media (min-width:992px) {
  .footer {
    background-repeat: repeat-x;
    background-size: cover;
  }
}

@media (min-width:1200px) {
  .footer {
    background-repeat: repeat-x;
    background-size: cover;
  }
}

@media (min-width:1400px) {
  .footer {
    background-repeat: repeat-x;
    background-size: cover;
  }
}

.footer-info {
  background-color: rgba(149, 142, 126, .8);
  box-sizing: border-box;
  padding: 1rem 0;
}

.footer-info .footer-logo {
  width: 48px;
}

.footer-copyright {
  background-color: rgba(173, 173, 173, .6);
  box-sizing: border-box;
  padding: 1rem 2rem .1rem 0;
}

.footer-copyright p {
  text-align: right;
}

.footer h2 {
  margin-bottom: 1rem;
}

.footer h3 {
  margin-top: .32rem;
  margin-left: .5rem;
}

.footer h5 {
  color: #333;
}

.footer ul li {
  line-height: 1.8;
}

.footer a:link {
  color: #333;
}

.footer a:visited {
  color: #777;
}

.footer a:hover {
  color: #e2e2d9;
  background: #434427;
  padding: .1rem 0;
}

.footer a:active {
  color: #FF0;
}

/* Footer links
------------------------------ */

.footer h5 {
  color: #FFF;
}

.footer ul li {
  line-height: 2;
}

.footer a:link {
  color: #FFF;
  margin-left: .4rem;
  padding: .2em 1rem;
  border-radius: 1rem;
  text-decoration: none;
}

.footer a:visited {
  color: #DDD;
}

.footer a:hover {
  color: #FFF;
  background: #243829;
}

.footer a:active {
  color: #FF0;
}


/* Back to top
================================================== */

#btn-back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  opacity: .9;
}

.back-to-top {
  width: 64px;
  height: auto;
}


/* Bootstrap icons
================================================== */

.navbar .bi-book-half,
.footer .bi-book-half {
  font-size: 1.8rem;
}


/* 見出し装飾
================================================== */

/* h-deco-handwritten1
------------------------------------ */
.h-deco-handwritten1 {
  position: relative;
  padding-top: 12px;
  font-size: 2.5rem !important;
}

.h-deco-handwritten1 span {
  position: relative;
  z-index: 2;
}

.h-deco-handwritten1::before {
  content: attr(data-en);
  position: absolute;
  transform: rotate(-5deg);
  top: -20px;
  left: 0;
  background: repeating-linear-gradient(180deg, rgba(51, 51, 51, .3) 0, rgba(178, 178, 178, .2) 100%);
  color: transparent;
  font-size: 40px;
  font-weight: 400;
  font-family: 'Sacramento', cursive;
  font-style: italic;
  -webkit-background-clip: text;
}

@media all and (-ms-high-contrast: none) {
  .h-deco-handwritten1 {
    background: #FFF;
    color: #000;
  }
}

/* h-deco-rounded
------------------------------------ */

.h-deco-rounded {
  width: 200px;
  padding: .4rem 0 .7rem 0;
  background-color: #007493;
  border-radius: 36px;
}


/* h-deco-enline（英字とラインのCSS見出し）
---------------------------------------- */

.h-deco-enline {
  position: relative;
  padding-top: 30px;
  padding-bottom: .6rem;
  font-size: 26px;
  border-bottom: 1px solid rgba(99, 70, 6, .9);
}

.h-deco-enline span {
  position: relative;
  z-index: 2;
  color: #634606;
}

.h-deco-enline::before {
  content: attr(data-en);
  position: absolute;
  top: 0px;
  left: 0;
  color: rgba(5, 62, 98, 0.2);
  font-size: 40px;
  text-transform: uppercase;
  z-index: 1;
}


/* TAB Menu 風
---------------------------------------- */

.h-deco-tab {
  color: #645f52;
  margin: 30px 20px 10px;
  position: relative;
  padding: 1rem;
  text-align: center;
  border: 3px solid #827b6b;
  border-radius: 0 10px 10px 10px;
}

.h-deco-tab::before {
  font-family: serif;
  font-size: 20px;
  position: absolute;
  top: -25px;
  left: -3px;
  height: 25px;
  padding: 0 1rem;
  content: 'keirokuya.com';
  color: white;
  border-radius: 10px 10px 0 0;
  background: #827b6b;
}


/* Google fonts
================================================== */

.gfonts-sacramento {
  font-family: 'Sacramento', cursive;
}


/* Decoration line
================================================== */

.deco-line1 {
  height: 3px;
  background-color: #FFF;
}

.deco-line2 {
  height: 3px;
  background-color: #958e7e;
}


/* Decoration Hr
================================================== */

.deco-hr1 {
  width: 100%;
  border-top: 3px dotted #efcb00;
}


/* www/index.html
================================================== */

.card .card-body .btn-group {
  text-align: center;
}


/* www/sitemap.html
================================================== */

.sitemap h4,
.sitemap ul {
  margin-left: 1rem;
}

.color-958e7e {
  width: 60%;
  background-color: #958e7e;
}

.color-243829 {
  width: 60%;
  background-color: #243829;
}

.color-333333 {
  width: 60%;
  background-color: #333;
}


/* www/guide/privacy.html
================================================== */

/* 参照
calc() - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/calc
-------------------------------------------------- */

.privacy .gfonts-klee-one {
  font-size: calc(1.6rem + .8vw);
}

.privacy h3 {
  margin-top: 2rem;
  font-weight: 600;
  opacity: .9;
}

.privacy p {
  text-indent: 1rem;
  margin-left: 1rem;
}

.privacy h3::after {
  display: block;
  content: "";
  width: 56px;
  height: 2px;
  background-color: #b7725f;
  margin: .6rem .2rem 1rem;
}

.privacy ul li {
  font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", serif;
  line-height: 1.6;
}


/* www/guide/profile.html
================================================== */

.profile {
  padding: 3rem;
  margin: 3rem 0;
}

.bg-profile {
  background-color: rgba(248, 249, 250, .5);
  border-radius: 8px;
}

.profile hr {
  color: #f4dba6;
  height: .1rem;
}

.profile .length-left {
  background-color: #EEE;
}

.profile .length-center {
  background-color: #CCC;
}

.profile .length-right {
  background-color: #EEE;
}

.profile .length-box1 {}

.profile .length-box2 {}

.profile .length-box3 {}

.profile .length-box4 {}

.profile .length-box5 {}

.profile .length-left p {
  font-size: 40px;
}

.profile .length-center {
  line-height: 0;
  padding-top: 1rem;
}

.profile circle.circle {
  background: #FFF;
  border: 3px solid #dee0e0;
  border-radius: 50%;
  content: "";
  height: 14px;
  left: 50%;
  margin: 0 0 0 -10px;
  position: absolute;
  top: 4px;
  width: 14px;
}

.profile img {
  max-width: 164px;
  border-radius: 50%;
  box-shadow: 8px 8px 8px rgba(0, 0, 0, .3);
}

.profile .mb-space-10px {
  margin-bottom: 10px;
}

.profile .mb-space-30px {
  margin-bottom: 30px;
}

.profile .mb-space-100px {
  margin-bottom: 100px;
}

.profile .mb-space-150px {
  margin-bottom: 150px;
}

.profile .mb-space-200px {
  margin-bottom: 200px;
}

.profile .circle {
  background-image: url(../../images/profile_line.png);
  background-repeat: repeat-y;
  background-size: 12px;
  background-position: center;
  position: relative;
  top: 20px;
}

.profile h2 {
  font-size: 2rem;
  color: #AAA;
  opacity: .8;
  font-style: italic;
}

@media (max-width:767.98px) {
  .writing-story img {
    width: 128px;
    height: auto;
  }
}


/* www/works/flow.html
======================================================== */

.works-flow a:link {
  color: #833;
  font-weight: 600;
  padding: .2rem 1rem;
  border-radius: 1rem;
  text-decoration: none;
}

.works-flow a:visited {
  color: #533;
}

.works-flow a:hover {
  color: #FFF;
  background: #243829;
}

.works-flow a:active {
  color: #FF0;
}

/* Flow design 1
------------------------------------ */
.flow-design-1 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 20px;
}

.flow-design-1 ul {
  padding: 0;
}

.flow-design-1 li {
  list-style-type: none;
}

.flow-design-1 dd {
  margin-left: 0;
}

.flow-1 {
  position: relative;
}

.flow-1::before {
  content: "";
  width: 15px;
  height: 100%;
  background: #958e7e;
  margin-left: -129px;
  display: block;
  position: absolute;
  top: 0;
  left: 120px;
  border-radius: 20px;
}

.flow-1>li {
  position: relative;
}

.flow-1>li:not(:last-child) {
  margin-bottom: 60px;
}

.flow-1>li .icon-1 {
  font-size: 16px;
  width: 2rem;
  height: 2rem;
  line-height: 2;
  text-align: center;
  font-weight: bold;
  border-radius: 100vh;
  color: #FFF;
  background: #32cd32;
  display: inline-block;
  margin-right: .3rem;
  text-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.flow-1>li dl {
  padding-left: 70px;
  position: relative;
}

.flow-1>li dl::before,
.flow-1>li dl::after {
  content: "";
  display: block;
  position: absolute;
  top: 15px;
}

.flow-1>li dl::before {
  width: 7px;
  height: 7px;
  margin-top: -3px;
  background: #32cd32;
  border-radius: 50%;
  left: -4px;
}

.flow-1>li dl::after {
  width: 60px;
  border-bottom: 3px dotted #32cd32;
  position: absolute;
  left: 5px;
}

.flow-1>li dl dt {
  font-size: 1.3rem;
  font-weight: 600;
  color: #32cd32;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  text-shadow: 1px 1px 0 #FFF;
}