@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.2
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

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

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

.post {
  .content-in {
    max-width: 1280px;
  }
}
.logo.logo-header.logo-text {
	display: none;
}

footer {
  .footer-widgets,
  .footer-widgets-mobile {
    justify-content: space-between;
  }
  .footer-left {
    .fl {
      width: 200px;
		&:hover{
			opacity: 0.8;
		}
    }
    .f-logo {
      display: flex;
      align-items: center;
      margin-top: 12px;
      gap: 12px;
      img {
        width: 32px;
      }
    }
  }
  .footer-right {
    width: 200px !important;
    .fr {
      display: flex;
      flex-direction: column;
      a {
        text-decoration: none;
        color: black;
		padding-bottom: 1.5px;
        position: relative;
		display: block;
        margin-bottom: 12px;
		  &::before{
			background: #ff701e;
  			content: '';
  			width: 100%;
  			height: 2px;
  			position: absolute;
  			left: 0;
  			bottom: 0;
  			transform-origin: right top;
  			transform: scale(0, 1);
  			transition: transform .2s;  
		  }
		  &:hover::before {
  			transform-origin: left top;
  			transform: scale(1, 1);
			}
      }
    }
  }
  .f-con {
    a {
      color: #9b9b9b;
      text-decoration: none;
      font-size: 12px;
    }
  }
}

@media screen and (max-width: 834px) {
  .footer-widgets {
    display: block !important;
  }
}

/* トップページ */
.home {
  .wp-block-button__link {
    &:hover {
      color: white;
      opacity: 0.8;
    }
  }
  .t-ab {
    max-width: 380px;
    margin-inline: auto;
    @media (width <= 430px) {
      max-width: 286px;
    }
  }
  .tc-tb {
    max-width: 800px !important;
    margin-inline: auto;
    td {
      border: none;
    }
  }
  .t-b1,
  .t-b2 {
    justify-content: center;
    @media (width <= 430px) {
      a {
        font-size: 16px;
        @media (width <= 390px) {
          font-size: 14px;
        }
      }
    }
  }
  h2#service {
    @media (width <= 430px) {
      width: 100%;
      font-size: 24px;
    }
  }
	.mdb{
		.wp-block-media-text__content{
			@media(width <= 390px){
				padding: 0px;
			}
		}
	}
}


.header-container {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}

div#navi-in {
  max-width: 1256px;
  margin: unset;
  width: unset;
  flex: 1;
}

nav#navi {
  position: unset !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  img {
    width: 120px;
  }
  .hlg-p {
    &:hover {
      opacity: 0.8;
    }
  }
  @media (width <= 1023px) {
    display: none;
  }
  .item-label {
    font-weight: 600;
  }
  li {
    padding-bottom: 5px;
    position: relative;
    &:before {
      background: #ff701e;
      content: "";
      width: 100%;
      height: 2px;
      position: absolute;
      left: 0;
      bottom: 0;
      transform-origin: center top;
      transform: scale(0, 1);
      transition: transform 0.3s;
    }
    &:hover::before {
      transform-origin: left top;
      transform: scale(1, 1);
    }
    a:hover {
      background-color: unset !important;
    }
  }
}

#menu-sp_nav {
  align-items: center;
  justify-content: space-between;
  .hlg-sp {
    width: 120px;
  }
}

.single-post{
 #sidebar{
  display: block!important;
 }
	.main {
    max-width: 860px !important;
  }
}

.blogcard-wrap {
  .blogcard-thumbnail {
    height: 90px;
    img {
      aspect-ratio: 16 / 9;
    }
  }
}

/* 目指す社会 */
.page-id-1344 {
  background-color: white;
  .content {
    @media (width <= 1280px) {
      padding: 24px;
    }
  }
  main {
    border: solid 2px #f39800;
    padding: 64px;
    border-radius: 24px;
    @media (width <= 768px) {
      padding: 32px 24px;
    }
  }
  .entry-title,
  .etl {
    font-size: 28px;
    background: none;
    width: 50%;
    margin: 0 auto;
    border-bottom: solid 2px;
    padding: 25px;
    text-align: center;
    margin-bottom: 32px;
    @media (width <= 1024px) {
      width: 100%;
    }
  }
  .bo {
    background-color: #fffbf5;
    padding: 24px;
  }
  .kwrap {
    margin-bottom: 32px;
    p {
      max-width: 800px;
      margin-inline: auto;
    }
  }
}

.sidebar {
  h2.wp-block-heading {
    background-color: #f39800;
    color: white;
    padding: 8px;
    letter-spacing: 2px;
    border-radius: 4px;
    margin-bottom: 12px;
  }
  .wp-block-latest-posts__list {
    li {
      border-bottom: dotted #fdcc78;
    }
  }
  .s-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    img {
      width: 32px;
      height: auto;
    }
  }
}

.n-meta {
  time {
    font-size: 12px;
    color: #696969;
  }
}

.page {
  .oh3 {
    position: relative;
    padding: 0.6em;
    background: #f39800;
    color: white;
    margin-left: 0px;
  }
}

/* 記事 */
body.single {
  background-color: #fbf7e8;
  h1.entry-title {
    border-bottom: solid 1px;
    padding-bottom: 8px;
  }
  #main {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
	  @media(width <= 1024px){
		  padding-top: 24px!important;
	  }
  }
  .under-entry-content {
    border-top: solid 2px #fdcc78;
    .pager-post-navi a .iconfont {
      color: white;
      background-color: #f39800;
      border-radius: 50%;
      width: 30px;
      height: 30px;
      padding: 4px;
      padding-left: 8px;
    }
  }
}

.ob {
  -webkit-appearance: none;
  border: 1px solid #ddd;
  background-color: #f39800 !important;
  color: white;
  border-radius: 24px;
  border: none !important;
  max-width: 500px;
  margin-inline: auto !important;
  display: block;
  font-weight: 600;
  letter-spacing: 1.5px;
  margin-top: 32px;
  &:hover {
    opacity: 0.7;
  }
}
.t-wrap {
  justify-content: center;
  .tv-wrap {
    margin-inline: auto;
    max-width: 780px;
  }
}


/* 採用ページ */
.page-id-1349 {
  background-color: #fbf7e8;
  h1.entry-title {
    border-bottom: solid 1px;
    padding-bottom: 8px;
    font-size: 40px;
  }
  h2.wp-block-heading {
    padding: 0.4em 0.5em; /*文字の上下 左右の余白*/
    color: #494949; /*文字色*/
    background: #fbf7e8; /*背景色*/
    border-left: solid 5px #f39800; /*左線*/
    margin: 64px 0px 32px 0px;
  }
  .s-form {
    max-width: 800px;
    margin-inline: auto;
    .al {
      color: red;
    }
    .fn {
      font-weight: 900;
    }
    input,
    textarea {
      border: 1.5px solid #000000;
    }
  }
}

/* 問い合わせページ */
.page-id-36 {
  h1 {
    text-align: center;
  }
  .entry-content.cf {
    max-width: 1000px;
    margin-inline: auto;
  }
  .tal {
    color: red;
  }
  label {
    font-weight: bold;
  }
  input,
  .wpcf7-textarea {
    border: 1.5px solid #000000;
  }
  .wpcf7-submit {
    border: unset;
  }
}

.grecaptcha-badge{
  left: 14px !important;
  bottom: 14px !important;
  max-width: 60px !important;
}