@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
html {
  margin: 0;
}
/* ALL */
body {
  overflow: visible;
  position: relative;
  z-index: 0;
  background: #fef9f6;
  color: #263d45;
  margin: 0;
}
article {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 80px 0;
}
.entry-content > *,
.mce-content-body > *,
.article p,
.demo .entry-content p,
.article dl,
.article ul,
.article ol,
.article blockquote,
.article pre,
.article table,
.article .toc,
.body .article,
.body .column-wrap,
.body .new-entry-cards,
.body .popular-entry-cards,
.body .navi-entry-cards,
.body .box-menus,
.body .ranking-item,
.body .rss-entry-cards,
.body .widget,
.body .author-box,
.body .blogcard-wrap,
.body .login-user-only,
.body .information-box,
.body .question-box,
.body .alert-box,
.body .information,
.body .question,
.body .alert,
.body .memo-box,
.body .comment-box,
.body .common-icon-box,
.body .blank-box,
.body .button-block,
.body .micro-bottom,
.body .caption-box,
.body .tab-caption-box,
.body .label-box,
.body .toggle-wrap,
.body .wp-block-image,
.body .booklink-box,
.body .kaerebalink-box,
.body .tomarebalink-box,
.body .product-item-box,
.body .speech-wrap,
.body .wp-block-categories,
.body .wp-block-archives,
.body .wp-block-archives-dropdown,
.body .wp-block-calendar,
.body .ad-area,
.body .wp-block-gallery,
.body .wp-block-audio,
.body .wp-block-cover,
.body .wp-block-file,
.body .wp-block-media-text,
.body .wp-block-video,
.body .wp-block-buttons,
.body .wp-block-columns,
.body .wp-block-separator,
.body .components-placeholder,
.body .wp-block-search,
.body .wp-block-social-links,
.body .timeline-box,
.body .blogcard-type,
.body .btn-wrap,
.body .btn-wrap a,
.body .block-box,
.body .wp-block-embed,
.body .wp-block-group,
.body .wp-block-table,
.body .scrollable-table,
.body .wp-block-separator,
.body .wp-block,
.body .video-container,
.comment-area,
.related-entries,
.pager-post-navi,
.comment-respond {
  margin-bottom: 0;
}

.entry-content {
  margin-bottom: 0px;
}

.enactment {
  margin-top: 60px;
}

.enactment strong {
  line-height: 1.6;
}

img {
  display: block;
}
.mb-m {
  margin-bottom: 50px;
}

.mb-s {
  margin-bottom: 30px !important;
}

a:hover {
  color: #fef9f6;
  opacity: 0.8;
}

.shadow-card {
  box-shadow: 0px 0px 22px rgba(0, 0, 0, 0.1);
}

.font-bold {
  font-weight: bold;
}

.text-center {
  text-align: center;
}

.button-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}

.button-nomal {
  display: inline-block;
  font-size: 18px;
  color: #fef9f6;
  background-color: #263d45;
  padding: 18px 28px;
  border-radius: 10px;
  font-family: "Noto Sans JP";
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
}

.margin-center {
  margin: 0 auto;
}

.flex-yoko-center {
  justify-content: center;
}

.date-tags {
  display: none;
}

.article h3 {
  padding: 12px 0px;
}

.entry-title,
.archive-title {
  margin: 0px 0px 32px 0px;
}

.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
  margin-bottom: 10px;
  margin-top: 10px;
}
.article h2:first-of-type,
.article h3:first-of-type,
.article h4:first-of-type,
.article h5:first-of-type,
.article h6:first-of-type {
  margin-top: 0px;
}

.author-info {
  display: none;
}

/* header */
#site-header {
  background: #fef9f6;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.08);
  height: 80px;
  position: relative;
  z-index: 100;
}

.header-inner {
  max-width: calc(100% - 92px);
  height: 100%;
  margin: 0 auto;
  padding: 12px 0px 13px 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-branding img {
  display: block;
  width: 216px;
  height: auto;
}

.global-nav ul {
  list-style: none;
  display: flex;
  gap: 36px;
  margin: 0;
  padding: 0;
  align-items: center;
}

.global-nav a {
  text-decoration: none;
  color: #263d45;
  font-weight: bold;
  font-size: 24px;
}

.category-top-head {
  box-shadow: 0px 0px 22px rgba(0, 0, 0, 0.1);
  margin-bottom: 40px !important;
}

/* top-main */
.firstview {
  width: 100%;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.08);
  position: relative;
  z-index: 80;
}

.firstview picture,
.firstview img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 1400px;
  margin: 0 auto;
}

.section h2 {
  margin-bottom: 12px;
  padding: 0;
  font-size: 32px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
}

.h2-dot-box {
  display: flex;
  height: auto;
  justify-content: center;
  align-items: center;
  gap: 0px 5px;
  span {
    display: block;
    width: 5px;
    height: 5px;
  }
  .h2-dot-1 {
    background-color: #fc7f67;
  }
  .h2-dot-2 {
    background-color: #fca070;
  }
  .h2-dot-3 {
    background-color: #f1b8c2;
  }
  .h2-dot-4 {
    background-color: #b5aec2;
  }
  .h2-dot-5 {
    background-color: #7dc3c1;
  }
  .h2-dot-6 {
    background-color: #62b2a5;
  }
  .h2-dot-7 {
    background-color: #418faf;
  }
  .h2-dot-8 {
    background-color: #297e9e;
  }
}

.main-box {
  display: flex;
  justify-content: start;
  align-items: start;
  gap: 50px 50px;
  margin-bottom: 50px;
  flex-wrap: wrap;
}

.main-box:last-of-type {
  margin-bottom: 0px;
}

h3 {
  font-size: 24px;
  font-weight: bold;
  width: auto;
  height: auto;
  display: inline-block;
  border-bottom: solid 1px #263d45;
  margin-bottom: 30px;
  p {
    display: inline-block;
    padding: 10px;
    line-height: 1;
    border-bottom: solid 1px #263d45;
    margin-bottom: 4px;
  }
}

.text-nomal {
  margin-bottom: 30px;
}

.text-nomal:last-of-type {
  margin-bottom: 0px;
}

.text-m {
  font-size: 18px;
}

.list-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 10px;
  background-color: #263d45;
  margin: 0px 9px 3px 9px;
  line-height: 1.8;
}
.section {
  padding: 80px 0;
}

.line-section {
  width: 100%;
  height: 10px;
  background-color: #ffffff;
}

.inner {
  max-width: 1000px;
  margin: 0 auto;
  width: 80%;
}

.block-left {
  width: 35%;
  max-width: 350px;
  height: auto;
  img {
    width: 100%;
    height: auto;
  }
}

.block-right {
  width: 60%;
  max-width: 600px;
  height: auto;
}

.block-center {
  width: 100%;
  height: auto;
  img {
    width: 100%;
    height: auto;
  }
}

.block-three {
  width: calc((100% - 100px) / 3);
}

.about-us-table tr td:first-of-type {
  width: 20%;
}

/* footer */
#site-footer {
  background-color: #263d45;
  font-size: 12px;
  color: #fef9f6;
  height: 30px;
  width: 100%;
}

.footer-bottom {
  text-align: center;
  display: flex;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  align-items: center;
  justify-content: space-between;
  small {
    line-height: 1;
    padding: 0 20px 1px 20px;
  }
}

.fotter-links {
  display: flex;
  justify-content: flex-end;
  font-size: 12px;
  a {
    display: inline-block;
    padding-right: 20px;
    padding-bottom: 1px;
    color: #fef9f6;
  }
}

/* Contact Form 7 */
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea,
select,
.search-edit {
  margin-top: 12px;
  margin-bottom: 12px;
}
input[type="submit"],
#bbp_reply_submit,
.bp-login-widget-register-link a {
  width: 26%;
  display: block;
  margin: 0 auto;
  margin-top: 30px;
}

textarea.wpcf7-form-control {
  line-height: 1.8;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px) {
  /*必要ならばここにコードを書く*/
  html {
    margin: 0;
  }
  body {
    margin: 0;
  }
}

/*834px以下*/
@media screen and (max-width: 834px) {
  /*必要ならばここにコードを書く*/
  /*ヘッダーのナビの仮で隠すやつ*/
  html {
    margin: 0;
  }
  body {
    margin: 0;
  }
  article {
    width: 80%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 80px 0;
  }
  .global-nav {
    display: none;
  }
  .site-branding img {
    width: 195px;
  }
  .header-inner {
    max-width: calc(100% - 60px);
  }
  .main-box {
    display: block;
  }
  .main-box div img {
    margin: 0 auto 30px auto;
    max-width: 600px;
    width: 100%;
  }
  .block-left {
    width: 100%;
    max-width: none;
    height: auto;
    img {
      width: 100%;
      height: auto;
    }
  }
  .block-right {
    width: 100%;
    max-width: none;
    height: auto;
  }
  .block-three {
    width: 100%;
    max-width: none;
    height: auto;
  }

  .section {
    padding: 80px 16px;
  }
  .inner {
    width: 100%;
  }
  .button-nomal {
    margin-bottom: 30px !important;
  }
}

/*480px以下*/
@media screen and (max-width: 480px) {
  /*必要ならばここにコードを書く*/
  html {
    margin: 0;
  }
  body {
    margin: 0;
  }
  article {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 80px 16px;
  }
  .global-nav {
    display: none;
  }
  .site-branding img {
    width: 35vw;
  }
  #site-header {
    height: 60px;
  }
  .header-inner {
    max-width: calc(100% - 40px);
  }
  .main-box {
    display: block;
    margin-bottom: 30px;
  }
  .main-box div img {
    margin: 0 auto 30px auto;
  }
  .block-left {
    width: 100%;
    max-width: none;
    height: auto;
    img {
      width: 100%;
      height: auto;
    }
  }
  .block-right {
    width: 100%;
    max-width: none;
    height: auto;
  }
  .block-three {
    width: 100%;
    max-width: none;
    height: auto;
  }
  .section {
    padding: 40px 16px;
  }
  .inner {
    width: 100%;
  }
  .button-nomal {
    margin-bottom: 40px;
    padding: 14px 28px;
  }
  .block-three-last .button-nomal {
    margin-bottom: 0;
  }
  h3 {
    font-size: 20px;
  }
  /* footer */
  #site-footer {
    height: 60px;
  }

  .footer-bottom {
    display: block;
    small {
      line-height: 1;
      padding: 0 10px 1px 10px;
    }
  }

  .fotter-links {
    display: flex;
    justify-content: center;
    margin-top: 3px;
    a {
      padding-right: 10px;
    }
    a:last-of-type {
      padding-right: 0px;
    }
  }
}