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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*____フォント____*/
body {
    font-family: 'Noto Serif JP', serif;
}

/*____テキストリンク____*/
.main a {
    color: #000;
}
.main a:hover {
    color: #333;
}

/*____PC・SP表示切り替え____*/
.pc-dis {
	display: block;
}
.sp-dis {
    display: none;
}
@media screen and (max-width: 834px){
.pc-dis {
	display: none;
	}
.sp-dis {
	display: block;
	}
}

/*____マウスオーバー____*/
a:hover,
a:hover img {
   opacity: 0.7;
   -webkit-transition: all .3s;
   transition: all .3s;
}

/*____PCヘッダーエリア____*/
#header {
	font-weight: 700!important;
}
#header-in .tagline {
    display: none;
}
#header-in #header-tel {
    display: none;
}
@media screen and (min-width:1023px) {
    #header-in {
        position: relative;
    }
    #header-in .logo-header {
        text-align: left;
    }
    #header-in #header-tel {
        text-align: center;
        position: absolute;
        right: 0;
        font-size: 200%;
        line-height: 1.45;
        background: url("") no-repeat center left;
        background-size: auto 60px;
        padding-left: 70px;
        display: block;
    }
    #header-in #header-tel span {
        display: block;
        font-size: 35%;
    }
}
@media screen and (min-width:1023px) and (max-width:1260px) {
    #header-in {
        position: relative;
       /*padding: 0 2vw;*/
        box-sizing: border-box;
    }
    #header-in #header-tel {
        right: 2vw;
    }
}
@media screen and (max-width: 1023px) {
    #header {
        display: none;
    }
}
@media screen\0 {
	#header-in #header-tel {
			position:absolute; top:20px;
    }
}

/*____ロゴマーク____*/
@media screen and (min-width: 1023px) { /*1023px以上のPCサイトの場合*/
    #header-in .logo-header {
        padding-left: 200px;
    }
}
.logo-image span, .logo-image a {
    padding: 0; /*PCロゴの位置*/
}
@media screen and (max-width: 1023px) { /*1023px以下のサイトの場合*/
	.mobile-header-menu-buttons .logo-menu-button {
		padding-right: 9%;
	}
}

/*____PCグローバルメニュー____*/
.navi-in>ul { /*PCメニューエリアの位置*/
    padding: 0 65px;
    justify-content: left;
	height: 85px;
}
.navi-in>ul li { /*PCメニューの位置*/
    height: 45px;
    margin-top: 22px;
}
.navi-in a {
    font-size: 12px;
}
#navi .navi-in>ul>li>a {
    padding: 0 20px; /*PCメニューごとの間隔*/
}

/*____マウスオーバー____*/
#navi .navi-in>ul>li>a:hover {
	background-color: #000;
}
#header-container nav ul li a {
  position: relative;
  text-decoration: none;
  padding-bottom: 5px; /*アンダーラインのスペース*/
}
#header-container nav ul li a::after {/*マウスオーバー時のアンダーライン*/
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: white; /*アンダーラインの色*/
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
}
#header-container nav ul li a:hover::after { /*マウスオーバー時のアクション*/
  transform: scaleX(1);
}

/*____スマホ・タブレットヘッダー____*/
@media screen and (max-width: 1023px){
    .mobile-header-menu-buttons {
        background-color: #000;
        color: #fff;
		box-shadow: none;
    }
	.mobile-menu-buttons .menu-caption {
		font-size: 1px;
		color: #000;
	}
	.fa {
    font-size: 25px;
	}
	#navi-menu-content { /*グローバルメニューの背景色*/
		background-color: rgb(0 0 0 / 80%);
	}
	.menu-drawer a { /*テキストリンク*/
		color: #ffffff;
	}
	.menu-drawer li { /*スマホ用のグローバルメニュー*/
		list-style: none;
		display: flex;
		align-items: center; /*縦方向の位置を中央揃え*/
		padding: 10px 15px;
		padding-left: 0;
		border-bottom: 1px solid #44403f; /*下線を追加*/
	}
	.mobile-header-menu-buttons .menu-item::before { /*グローバルメニューのリストアイコン*/
		content: "";
		display: inline-block;
		width: 4px;  /*太さ*/
		height: 25px; /*高さ*/
		background-color: #44403f; /*色*/
		margin-right: 20px; /*文字との間隔*/
	}
	.menu-item:last-child { /*最後のメニューだけ線を消す*/
		border-bottom: none;
	}
	.menu-close-button { /*クローズボタンの位置*/
		text-align: left;
		padding-left: 13px;
	}
}
@media screen and (min-width: 835px) and (max-width: 1023px){
	.menu-content { /*タブレット・グローバルメニューの表示サイズ*/
		height: 70vh;
		max-width: 430px;
	}
}
@media screen and (max-width: 834px){
	.menu-content { /*スマホ・グローバルメニューの表示サイズ*/
		height: 35vh;
		max-width: 430px;
	}
}

/*____メイン画像____*/
#min-pic {
	max-width: 1280px;
	margin: 20px auto 0;
}
@media screen and (max-width: 834px){
	#min-pic {
		margin: 80px auto 50px;
	}
}

/*____TOPページのボタン配置____*/
.image-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto; /* 画像の高さを固定 */
}
.button-container {
	position: absolute;
	bottom: 10%; /*画像の下部に配置（適宜調整）*/
	display: flex;
	gap: 124px;
}
@media screen and (max-width: 834px){
	.button-container {
		position: absolute;
		bottom: 8%; /*画像の下部に配置（適宜調整）*/
		display: flex;
		gap: 62px;
	}
	.button-container img {
		width: 174px;
		height: auto;
	}
}

/*____本文エリア____*/
/*マージン・パディングをすべてリセットし、再設定*/
.content {
    margin-top: 0;
}
.home .main {
		padding-bottom: 0;
	}
.page-id-58 .main { /*問い合わせページ*/
		padding-top: 60px;
	}
.main {
    padding: 0;
    border: 0;
    border-radius: 0;
	padding-bottom: 184px;
}
.entry-content {
    margin-top: 0;
    margin-bottom: 0;
}
.home .entry-content>*, .home .article {
	margin-bottom: 0 !important;
	background-color: #000;
}
@media screen and (min-width:1023px){
	.wrap {
		width: 1200px;
	}
}
@media screen and (max-width: 834px){
	main.main,
	div.sidebar {
    padding: 0;
	padding-bottom: 184px;
  }
}
@media screen and (min-width:1023px){
p { /*PC本文エリアテキスト*/
	width: 750px;
	margin-left: auto;
	margin-right: auto;
	}
}
@media screen and (min-width: 834px) and (max-width: 1023px){
p { /*tablet本文エリアテキスト*/
	width: 600px;
	margin-left: auto;
	margin-right: auto;
	}
}
@media screen and (max-width: 834px){
p { /*SP本文エリアテキスト*/
	margin-left: 26px;
	margin-right: 26px;
	}
}

/*____見出し____*/
.article h1 {
	font-size: 28px;
	padding: 25px;
	background-color: #e09400;
	color: #fff;
   margin-bottom: 25.2px;
	border-radius: 2px;
}
@media screen and (max-width: 834px){
	.article h1 {
		font-size: 24px;
		padding: 12px;
	}
}
.article h2 {
	margin-top: 90px;
	background: none;
	border-bottom: 10px double #e09400;
	color: #e09400;
	padding: 0 15px 5px;
}
.article h3 {
	margin-top: 50px;
	border-left: none;
	border-right: none;
	border-top: none;
	border-bottom: 3px solid #627ba7;
	color: #e09400;
	padding: 5px 10px 5px 15px;
}
.article h4 {
	margin-top: 30px;
}

/*____box設定____*/
.is-style-secondary-box, .secondary-box {
    background-color: #f5f6f7;
}
.blank-box.bb-blue, .bb-blue.is-style-blank-box-red, .bb-blue.is-style-blank-box-navy, .bb-blue.is-style-blank-box-blue, .bb-blue.is-style-blank-box-yellow, .bb-blue.is-style-blank-box-green, .bb-blue.is-style-blank-box-pink, .bb-blue.is-style-blank-box-orange, .bb-blue.is-style-sticky-gray, .bb-blue.is-style-sticky-yellow, .bb-blue.is-style-sticky-red, .bb-blue.is-style-sticky-blue, .bb-blue.is-style-sticky-green {
    border-color: #627ba7;
}

/*____ボタン設定____*/
.btn-m, .btn-wrap.btn-wrap-m > a {
    font-size: 20px;
}

/*____投稿ページ投稿日の下マージン____*/
.date-tags {
    margin-bottom: 3em;
}

/*____固定ページ・投稿の投稿日・更新日・著作者を非表示____*/
.page .date-tags,
.page .author-info,
.single .author-info{
    display: none;
}

/*____関連記事____*/
.related-entry-heading {
	margin-top: 90px;
}

/*____フッターエリア____*/
.footer {
    margin-top: 0;
	padding-top: 30px;
}
.footer-bottom {
    margin-top: 0;
}
.navi-footer {
	margin-top: 26px;
}
.footer-bottom-logo .logo-image { /*フッターロゴ*/
    padding: 0;
    max-width: 100%;
	}
.footer-bottom-logo .footer-site-logo-image {
    width: 100% !important;
    height: auto !important;
}
.footer-bottom-logo { /*ロゴの配置*/
	position: relative;
	float: none;
}
.footer-bottom-content { /*フッターエリアテキスト*/
    float: none;
    text-align: center;
	font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
.navi-footer-in>.menu-footer { /*フッターメニューの配置*/
    justify-content: center;
}
#footer a:not(.sns-button):hover { /*ロゴのマウスオーバー*/
    background-color: rgb(0 0 0 / 20%);
}
.copyright { /*コピーライト*/
	margin-top: 20px;
	font-size: .8em;
}
@media screen and (max-width: 834px) { /*スマホフッターメニュー*/
	.navi-footer-in>.menu-footer li.menu-item {
		border-left: 1px solid #ddd;
		width: 10%;
        flex: none;
    }
	.navi-footer-in>.menu-footer li.menu-item:last-child {
		border-right: 1px solid #ddd;
	}
}
/*____サイドコンテンツ____*/
#sidebar ul {
	margin-left: 10px;
	margin-right: 10px;
}
#sidebar ul li a {
	padding-left: 10px;
	padding-right: 10px;
}
#sidebar h3 {
	margin-top: 50px;
}

/*____本文フッターSNSボタン____*/
.sns-share {
	margin-top: 100px;
}

/*____画像位置スマホ設定____*/
/*@media screen and (max-width: 834px){
	img.alignright,img.alignleft,img.alignnone,	img.aligncenter {
		float:none !important;
		display: block;
		margin: 0 auto 20px !important;
	}
}*/

/*____モバイルフッター固定メニュー____*/
.mobile-footer-menu-buttons .menu-button>a {
    color: #fff;
}
.mobile-footer-menu-buttons li:nth-child(1) {
    background-color: #3C80B3;
}
.mobile-footer-menu-buttons li:nth-child(2) {
    background-color: #1693A3;
}
.mobile-footer-menu-buttons li:nth-child(3) {
    background-color: #53B22C;
}
.mobile-footer-menu-buttons .top-menu-button {
    background-color: #838383;
}
.mobile-footer-menu-buttons li { border-left:1px dotted #fff;}
.mobile-footer-menu-buttons li:first-child { border:none;}

/*____テキストカラー____*/
.black {
color: #333333;
}
.red {
color: #CC0000;
}
.green {
color: #1f8c4d;
}
.marker-under {
    background: linear-gradient(transparent 60%, #ffdc52 60%)
}

/*____テキスト設定____*/
em {
font-style: normal;
font-weight: bold;
}
.u {
text-decoration: underline;
}
.txt-r {
text-align: right;
}
.txt-l {
text-align: left;
}
.center {
text-align: center;
}

/*____余白設定____*/
.mt20 {
margin-top: 20px;
}
.mt30 {
margin-top: 30px;
}
.mt40 {
margin-top: 40px;
}
.mt50 {
margin-top: 50px;
}
.mt60 {
margin-top: 60px;
}
.mt70 {
margin-top: 60px;
}
.mt80 {
margin-top: 80px;
}
.mt90 {
margin-top: 90px;
}
.mt100 {
margin-top: 100px;
}
.mt120 {
margin-top: 120px;
}
.mb10 {
margin-bottom: 10px;
}
.mb20 {
margin-bottom: 20px;
}
.mb40 {
margin-bottom: 40px;
}
.mb50 {
margin-bottom: 50px;
}
.mb60 {
margin-bottom: 60px;
}
.mb80 {
margin-bottom: 80px;
}
.mb90 {
margin-bottom: 90px;
}
.mb100 {
margin-bottom: 100px;
}
.mb120 {
margin-bottom: 120px;
}

/*____TOPへ戻るボタン____*/
.go-to-top-button-image {
    width: 85px;
    height: auto;
}
@media screen and (max-width: 834px){
	.go-to-top-button-image {
    width: 40px;
    height: auto;
	}
}
.go-to-top:hover {
   opacity: 0.7;
   -webkit-transition: all .3s;
   transition: all .3s;
}

/*____ギャラリー（画像一覧表示）____*/
.gallery {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: auto;
	margin-top: 90px;
	padding: 0;
	list-style: none;
}
.gallery-item {
	margin: 10px;
	text-align: center;
}
.gallery-item img {
	width: 100%;
	height: auto;
	display: block;
}
.gallery .gallery-item {
    margin-top: 3.6px;
}
@media screen and (min-width: 835px) { /*834px以上の場合：4カラム*/
	.gallery-item {
		width: calc(25% - 20px); /*4カラム*/
      }
    .gallery {
      width: 750px;
    }
	.gallery-item img {
		width: 100%;
		height: 120px; /*固定の高さ（必要に応じて調整）*/
		object-fit: cover; /*中央でトリミング*/
	}
}
@media screen and (max-width: 834px) { /*834px以下の場合：2カラム*/
	.gallery-item {
		width: calc(50% - 20px); /* 2カラム */
	}
	.gallery-item img {
		width: 100%;
		height: 134px; /*固定の高さ（必要に応じて調整）*/
		object-fit: cover; /* 中央でトリミング*/
	}
	.article .gallery {
        padding: 0; /*ギャラリーの左右余白をリセット*/
	}
    .article .gallery ul {
        padding: 0; /*ギャラリー内のリストも余白をリセット*/
        list-style: none; /*リストマーカーを非表示に*/
	}
}

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

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

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