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

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

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

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

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


/************************************
** サイト全体をふわっと表示させる
************************************/
body {
    -webkit-animation: fadeIn 1.5s ease 0s 1 normal;
    animation: fadeIn 1.5s ease 0s 1 normal;
  }
  @keyframes fadeIn {
    0% {
      opacity: 0
    }
    100% {
      opacity: 1
    }
  }
  @-webkit-keyframes fadeIn {
    0% {
      opacity: 0
    }
    100% {
      opacity: 1
    }
  }


/************************************
 * 見出しh1のデザインを変更
************************************/
/*
.p-title-sub-bd-lr1 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  column-gap: 20px;
  align-items: center;
}
.p-title-sub-bd-lr1::before,
.p-title-sub-bd-lr1::after {
  min-width: 30px;
  height: 2px;
  content: '';
  background-color: #fff;
}

*/





/************************************
 * コンテンツ幅
************************************/

.p-w-m820 {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  }
.p-w-m920 {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  }


/************************************
** ヘッダーロゴ下の空白削除
************************************/
.logo-image span, 
.logo-image a, 
.logo-image img {
  display: block;
  margin: auto;
}

.logo-menu-button img {
  padding-left: 10px;
  }



/************************************
** body背景
************************************/
/*カスタムhtmlで<div class="haikei"><div class="haikei-container"></div></div>を囲っていれよ　中身はカラムで囲わないと100％表示になっちゃうよ*/

body {
  background-position: left top 100px;
  }
body.home {
/*  background-image: unset!important; */
  }

.main {
  background-color: unset;
  }


/************************************
** コンテンツ部分の横100％背景
************************************/
/*カスタムhtmlで<div class="haikei"><div class="haikei-container"></div></div>を囲っていれよ　中身はカラムで囲わないと100％表示になっちゃうよ*/

.content {
  overflow: hidden;
}
.haikei {
  background: #000;
  margin: 0 calc((100% - 100vw) / 2);
  padding: 50px 0;
}
.haikei_logo {
  background: #fff url("https://sanotou.com/wp-content/uploads/2024/09/bg.jpg") no-repeat left top;
  min-height: 800px;
  background-attachment: fixed;
}

.haikei > p,
.haikei > div,
.haikei > h2,
.haikei > h3 {
  margin-left: auto;
  margin-right: auto;
  max-width: calc(1256px - 4%);
  width: 96%;
  padding: 0 2%;
}


@media screen and (max-width: 768px) {
  
  .haikei {
    padding: 30px 0;
  }
  
  .haikei .column-wrap {
    text-align: center;
  }
}


/************************************
 * footer調整
************************************/
/*.go-to-top-button {
  width: auto;
  height: auto;
}*/
@media screen and (min-width: 769px) {
	.footer-widgets {
		margin: 20px auto 0;
	}
	.footer-center {
		padding: 10px 16px 0;
	}
	.footer-bottom {
		margin-top: 0;
		padding-top: 0;
	}
	#media_image-34 {
		margin-bottom: 0;
		height: 52px;
	}
	.footer-left,
	.footer-right,
	.footer-mobile {
		padding: 0;
	}
	.copyright {
		margin-top: 0;
		line-height: 1;
	}
}
@media screen and (max-width: 480px) {
  /*.go-to-top-button {
    width: 40px;
  }*/
}


/************************************
 * アピールエリア画像の変更
************************************/
/*フロント固定ページのみアピールエリアを非表示*/
.home.page #appeal {
display: none;
}
.appeal {
  background-position: right bottom;
  background-size: cover;
  max-height: 500px;
  height: 30vw;
}
  .appeal-in {
    min-height: 100%;
  }
/*@media screen and (max-width: 1023px){
  .appeal-in {
    min-height: 400px;
  }
}

@media screen and (max-width: 834px){
  .appeal-in {
    min-height: 300px;
  }
}*/

@media screen and (max-width: 480px) {
.appeal {
  height: 100px;
  }
}
/*各ページの画像設定*/
.page-id-193 .appeal,/*お問合せ*/
.page-id-191 .appeal,/*お問合せ*/
.page-id-187 .appeal,/*お問合せ*/
.page-id-126 .appeal {/*会社概要*/
  background-image: url(https://sanotou.com/wp-content/uploads/2024/11/appeal-area2_500.jpg);
  }
.page-id-310 .appeal,/*環境への取り組み*/
.page-id-218 .appeal {/*環境への取り組み*/
  background-image: url(https://sanotou.com/wp-content/uploads/2024/11/appeal-area3_500.jpg);
  }
.page-id-385 .appeal {/*新着情報*/
  background-image: url(https://sanotou.com/wp-content/uploads/2024/11/appeal-area1_500-1.jpg);
  }
.single-works .appeal,/*実績*/
.tax-cat_works .appeal,/*実績*/
.post-type-archive-works .appeal {/*実績*/
  background-image: url(https://sanotou.com/wp-content/uploads/2024/11/appeal-area4_500.jpg);
  }



/************************************
 * 見出しh1のデザインを変更
************************************/
h1.entry-title {
text-align: center;	
padding: 10px 10px 20px 10px; 
background: url(https://sanotou.com/wp-content/uploads/2024/11/h1.png) left bottom no-repeat;
min-height: 70px;
margin-bottom: 20px;
width: 100%; 
display: inline-block;
background-color: transparent;
}
@media screen and (max-width: 480px) {
h1.entry-title{ 
  background-size: auto 100%;
  padding: 8px 10px 15px 10px; 	
  min-height: 60px;
  }
}



/************************************
**見出しh2のデザインを変更
************************************/
.article h2 {
 font-size: 28px; 
  color: #fff;
  padding: 40px 20px 0px 60px; 
	background-image: url(https://sanotou.com/wp-content/uploads/2024/11/h2.png);
	background-repeat:no-repeat;
  background-position:left bottom;
  height: 100px;
  background-color: transparent;
}
@media screen and (max-width: 480px) {
.article h2 { 
  font-size: 18px; 
  height: 50px;
  padding: 18px 0px 00px 15px; 
  background-size: auto 100%;
  }
}


/************************************
**見出しh3のデザインを変更
************************************/
.article h3 {
 font-size: 20px; 
  padding: 15px 0px 10px 15px; 
	background-image: url(https://sanotou.com/wp-content/uploads/2024/09/h3.png);
	background-repeat:no-repeat;
  background-position:left bottom;
  border: none;
}
@media screen and (max-width: 480px) {
.article h3 { 
  font-size: 16px; 
  padding: 5px 0px 5px 10px; 
  background-size: auto 30px;
  }
}


/************************************
**見出しh4のデザインを変更
************************************/
.article h4 {
  position: relative;
  line-height: 1.4;
  margin-bottom: 10px;
  padding: 8px 10px 8px 18px;
  text-align: left;
  border: none;
  display: block;
}
    .article h4::after {
      content: '';
      position: absolute;
      display: block;
      left: 0;
      top: 50%;
      width: 5px;
      height: 20px;
      margin-top: -12px;
      background-color: #22AC38;
      }

@media screen and (max-width: 480px) {
.article h4 { 
  font-size: 15px; 
  padding: 5px 3px 5px 12px; 
  }
    .article h4::after {
      width: 4px;
      height: 16px;
      margin-top: -9px;
      }
}

/************************************
** 固定ページのテーブル化レスポンシブ調整　
************************************/

.tbl-vertical tbody {
  background-color: #fff;
  }
.tbl-vertical tbody > tr > td:first-child {
  width: 20%;
  }
@media screen and (max-width: 480px) {
  .tbl-vertical tbody > tr:not(:first-child) > td:first-child {
    margin-top: 10px; 
    }
  .tbl-vertical tbody > tr > td {
    display: block;
    width: 100%!important;
    }
  .tbl-vertical tbody > tr > td:first-child {
    font-weight: bold;
    }
  .tbl-vertical tbody > tr > td:not(:first-child) {
    border-top: hidden;
    }
}

/* 受賞歴用 */
.p-tbl-reki tbody > tr > td:first-child {
  width: 70%;
  }
.p-tbl-reki tr {
  background-color: transparent!important;
  }
.p-tbl-reki td {
  border-top: none;
  border-left: none;
  border-right: none;
  }
@media screen and (max-width: 480px) {
}



/************************************
 * お問い合わせのボタン
************************************/
.form-btn {
  text-align: center;
  }
.form-btn input {
  display: inline-block;
  margin: 0 10px;
  width: 40%;
  max-width: 200px;
  height: 45px;
  box-sizing: border-box;
  background: #efefef;
  color: #666;
  border: #666 solid 2px;
  }

div.wpcf7 .ajax-loader, .wpcf7-spinner{
    display: block;
}



/************************************
 * スマホのサイドバーメニューを左から右に表示
************************************/
.navi-menu-content {
  left: auto;
  right: 0;
  transform: translateX(105%);
}



/************************************
**新着情報
************************************/
.entry-content .wp-block-latest-posts__list li {
  padding-bottom: 20px;
}

/* タイトル */
.entry-content .wp-block-latest-posts__list .wp-block-latest-posts__post-title {
  position: relative;
  line-height: 1.4;
  margin-bottom: 10px;
  padding: 6px 10px 8px 18px;
  text-align: left;
  border: none;
  display: block;
}
    .entry-content .wp-block-latest-posts__list .wp-block-latest-posts__post-title::after {
      content: '';
      position: absolute;
      display: block;
      left: 0;
      top: 50%;
      width: 5px;
      height: 20px;
      margin-top: -12px;
      background-color: #22AC38;
      }

@media screen and (max-width: 480px) {
.entry-content .wp-block-latest-posts__list .wp-block-latest-posts__post-title { 
  font-size: 15px; 
  padding: 4px 3px 5px 12px; 
  }
    .entry-content .wp-block-latest-posts__list .wp-block-latest-posts__post-title::after {
      width: 4px;
      height: 16px;
      margin-top: -9px;
      }
}

/************************************
**実績一覧ページ
************************************/
.p-worksList {
  margin-top: 20px;
  display: -webkit-grid;
  display: grid;
  -webkit-justify-content: center;
  justify-content: center;
  gap: 30px;
  grid-template-columns: repeat(auto-fit, 240px);
  }
    .p-worksList::before {
      content: "";
      display: block;
      width: 240px;
      height: 0;
      order: 1;
      }
    .p-worksList::after {
      content: "";
      display: block;
      width: 240px;
      height: 0;
      }


.p-worksthumb-ph {
  width: 100%;
  margin: 0 auto;
  }
.p-worksthumb-ph-no {
  width: 100%;
  height: 180px;
  margin: 0 auto;
  background-color: #c7c7c7!important;
  display: -webkit-box!important;
  display: -moz-box!important;
  display: -ms-flexbox!important;
  display: -webkit-flex!important;
  display: flex!important;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  }


  .p-worksthumb-category {
		display: inline-block;
    letter-spacing: 0.3px;
		text-align: center;
    font-size: 12px;
    padding: 2px 8px;
    min-width: 50px;
    height: 22px;
    line-height: 20px;
		color: #fff;
		background-color: #22AC38;
		-webkit-border-radius: 4px;
			 -moz-border-radius: 4px;
						border-radius: 4px;
				-ms-border-radius: 4px;
		}
  .p-worksthumb-category.p-worksthumb-category-term {
		background-color: #ffc9fa;
		color: #000;
  }





/************************************
**実績の写真（スライダー）
************************************/
  .c-slider{ /* スライダーリセット、slick.jsが読み込まれるで非表示にすることで一瞬縦に崩れるのを防ぐ */
    opacity: 0;
    transition: opacity .3s linear;
    }
    .c-slider.slick-initialized{
      opacity: 1;
      }

	.c-slider {
		overflow: hidden;
		width: 90%;
    max-width: 700px;
    margin: 20px auto 0 auto;
		}
  .c-slider img {
    width: 100%;
    height: auto;
    }

  .c-slider .slick-next {
    right: 20px;
    }
  .c-slider .slick-prev {
    left: 20px;
    }
  .c-slider .slick-arrow {
    z-index: 2;
    }

  .c-slider .slick-dots {
    bottom: 10px;
    }
  .c-slider .slick-dots li button:before {
    content:'';
		-webkit-border-radius: 50%;
			 -moz-border-radius: 50%;
						border-radius: 50%;
				-ms-border-radius: 50%;
    background: var(--slick-dots);
    opacity: 1;
    left: 50%;
    }
  .c-slider .slick-dots li.slick-active button:before{
    background: var(--slick-active);
    }
  .c-slider.slick-dotted.slick-slider {
    margin-bottom: 0!important;
    }



  /* 文字ありの設定 */
  .c-slider__caption {
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 90%;
    text-align: right;
    color: #fff;
    text-shadow:0 0 0.10em rgba(0,0,0,0.8),
      0 0 0.15em rgba(0,0,0,0.8),
      0 0 0.80em rgba(0,0,0,0.8),
      0 0 1.00em rgba(0,0,0,0.8);
    }




  /* サムネイルの設定 */
  .c-slider__thumb .slick-dots {
    width: 90%;
    margin: 20px auto 0 auto;
    position: static;
    display: -webkit-grid!important;
    display: grid!important;
    -webkit-justify-content: center;
    justify-content: center;
    grid-template-columns: repeat(auto-fit, 18%);
    gap: 2%;
    }
  .c-slider__thumb .slick-dots li {
    width: auto;
    height: auto;
    margin: 0;
    }
  .c-slider__thumb .slick-dots li img {
    width: 100%;
    height: auto;
    }


  .c-slider__thumb .slick-dots li:hover{
    opacity: 0.7;
    filter: alpha(opacity=70);
    -ms-filter: "alpha( opacity=70 )";
    }


/************************************
** YouTube
************************************/
	.c-frame {
		text-align: center;
		}
		.c-frame {
			position: relative;
			padding-bottom: 56.25%;
			padding-top: 30px;
			height: 0;
			overflow: hidden;
			}
		.c-frame iframe,
		.c-frame object,
		.c-frame embed {
			position: absolute;
			top: 0;
			right: 0;
			width: 100% !important;
			height: 100% !important;
			}



/************************************
**sidebar
************************************/
/* sidebarの上にマージン */
.sidebar {
  margin-top: 80px;
  }

/* sidebarの装飾 */
.sidebar h2,
.sidebar h3 {
  background-color: #22AC38;
  color: #fff;
  padding-left: 20px;
  }
.sidebar .cat-item a {
  padding-left: 20px;
  }


/* カスタム投稿（ターム）表示
.tax-cat_works .content-in {
  display: flex!important;
  }
.tax-cat_works .sidebar {
  display: block!important;
  } */

/************************************
**アイキャッチの高さ揃える
************************************/
/* インデックスアイキャッチ */
.entry-card-thumb.card-thumb{
  position: relative;
  padding-top: 56.25%; /*16:9の比率*/
  margin-bottom:8px;
}

.entry-card-thumb.card-thumb img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
/* TOPページアイキャッチ */
.wp-block-latest-posts__featured-image{
  position: relative;
  padding-top: 56.25%; /*16:9の比率*/
  margin-bottom:8px;
}

.wp-block-latest-posts__featured-image img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}



/************************************
**モバイルスライドインメニュー
************************************/
/*ヘッダーの色と高さ、アイコンの位置を調整*/
.search-menu-button.menu-button,
.navi-menu-button.menu-button{
	background-color: #ffffff;
	color: #333333;
	height: 55px;
	padding-top: 8px;
}
.logo-menu-button.menu-button{
	background-color: #ffffff;
	height: 55px;
}

/*スライドインメニューをカスタマイズ*/
.navi-menu-content{
	left: auto;
	right: 0;
	background-color: rgba(0,0,0,0.7);
	transform: translateX(101%);
}

.menu-drawer a{
	font-size: 0.9em;/*文字の大きさ*/
	color: #fff;/*文字の色*/
	height: 3em;/*行の高さ*/
}

.menu-drawer a:hover{
	color: rgba(255,255,255,0.7);
	background-color: rgba(30,124,209,0);
}

ul.menu-drawer:before{
	/*background-color: #fff;*/
	border-bottom: 1px dotted #fff;
	font-size:1.2em;
	text-align:left;
	color:#fff;
	margin-bottom:1em;
	padding-left: 7px;
	line-height:3em;
	content: "Contents";
	display: inline-block;
	width: 100%;
}
.menu-drawer li {
	padding: 2px;
	border-top:1px dotted #001319; 
}
.menu-drawer li a::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	content : "\f105";
	margin:0 .5em 0 0;
}

/* ↓↓ナビゲーションメニュー、サイドバーの×ボタン */
.menu-close-button {
  margin-right: 8%;
  text-align: right;
  color: #ffffff;
  opacity: 0.7;
}


/************************************
**カレンダー装飾
************************************/
/*投稿部分*/
/* カレンダー */
#calendar_wrap {
  margin-right: -4px;
  margin-left: -4px;
  line-height: 1.5;
}

#wp-calendar {
  margin-bottom: 5px;
  border-collapse: separate;
  border-spacing: 4px;
  border-style: none;
}

#wp-calendar caption {
  font-size: 1.2em;
  font-weight: bold;
}

#wp-calendar th {
  padding: 2px 0;
  background-color: #f5f5f5;
}

#wp-calendar td,
#wp-calendar th {
  border-style: none;
}

#wp-calendar td a,
#wp-calendar #today a,
.wp-calendar-nav a {
  border: solid 1px #ddd;
  border-radius: 4px;
  background-color: transparent;
  text-decoration: none;
  transition: all .3s;
}

#wp-calendar td a:hover,
#wp-calendar #today a:hover,
.wp-calendar-nav a:hover {
  background-color: #eee;
}

#wp-calendar #today {
  background-color: transparent;
  font-weight: bold;
}

.wp-calendar-nav {
  display: flex;
  justify-content: space-between;
  margin-right: 4px;
  margin-left: 4px;
}

.wp-calendar-nav a {
  display: inline-block;
  padding: 0 50px;
  color: inherit;
}
/*営業日部分*/
.xo-event-calendar{
	/*max-width:600px;*/
	margin:0 auto;
}
.calendar-caption{
	font-size: 22px;
	font-weight: bold;
}
.xo-event-calendar {
	font-family: initial;/*適応しない*/
}

.xo-event-calendar table.xo-month .month-event-title {
white-space: normal;
color: #0000ff !important;
background-color: #cccccc !important;
}

/* ページネーション */
.pagination-next-link,
.comment-btn {
  border: solid 2px #ddd;
  border-radius: 4px;
  background-color: #fff;
}

.pagination-next-link:hover,
.comment-btn:hover {
  background-color: #eee;
}

.pagination {
  margin-bottom: 0;
}

.pagination a {
  border-color: #ddd;
}

.pagination a:hover {
  background-color: #eee;
}

.pagination .current {
  border-color: transparent;
  background-color: #fff;
  font-weight: bold;
}

.page-numbers.dots {
  border-color: transparent;
  background-color: transparent;
}





/************************************
** カーソルを置くと画像がふわっと大きくなる
************************************/
/*ブロック→高度な設定→追加 CSS クラスに　transition-duration　を記載*/
.transition-duration img {
	 transition-duration: 0.5s;	
}
.transition-duration img:hover{
	transform: scale(1.2);
  transition-duration: 0.5s;
}
/*ページTOPへ戻るボタン*/
.go-to-top-button-image{
	 transition-duration: 0.5s;	
}
.go-to-top-button-image:hover{
	transform: scale(1.2);
  transition-duration: 0.5s;
}
/*各ページのサムネイル(アイキャッチ)*/
main .card-thumb {
	overflow:hidden;
}
main .card-thumb img{
	 transition-duration: 0.5s;
}
main .card-thumb img:hover{
	transform: scale(1.2);
  transition-duration: 0.5s;
}
/*TOPページのサムネイル(アイキャッチ)*/
.wp-block-latest-posts__featured-image {
	overflow:hidden;
}
.wp-block-latest-posts__featured-image img{
	 transition-duration: 0.5s;
}
.wp-block-latest-posts__featured-image img:hover{
	transform: scale(1.2);
  transition-duration: 0.5s;
}


/************************************
** ブロックに全幅（100％）指定　
************************************/
/*ブロック→高度な設定→追加 CSS クラスに　full-wide-screen　を記載*/
.full-wide-screen{
margin:0 calc(50% - 50vw);
}
.header-container-in.hlt-top-menu {
  width:100%;
}