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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
body {
	padding-top: 80px;
}

.spOnly {
	display: none;
}

#go-to-top:hover {
	opacity: 0.7;
    transform: translateY(-10px);
}

.wp-post-image,
.wp-block-embed__wrapper > .video-container > .video,
.toc,
.card-thumb img,
.ect-vertical-card .entry-card-wrap {
	border-radius: 5px;
}

article h2.wp-block-heading {
	border-left: 5px solid #ff7900;
	padding: 0 .7em!important;
	background-color: transparent!important;
	border-radius: inherit;
}

#header-container {
  box-shadow: 0 0 10px rgba(30, 30, 30, .1);
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  z-index: 10;
  padding: 10px 0;
}

[id^="toc"]:target {
  padding-top: 85px;
  margin-top: -85px;
}

/* トップに戻るボタン */
.go-to-top-button {
	border-radius: 50px;
}

.mobile-footer-menu-buttons {
	z-index: 10;
}

.menu-drawer li {
    border-bottom: 1px solid #efefef;
}
.menu-drawer a {
    padding: 10px;
}
.menu-close-button {
    color: #ff7900;
    padding: .5em 0;
    margin-bottom: .5em;
    background-color: #efefef;
}

#main article p {
    text-align: justify;
    text-justify: inter-ideograph;
}
.is-layout-flex {
	gap: .5em;
}

.wp-block-button__link {
	background-color: #ff7900;
	transition: .3s;
}
.wp-block-button__link:hover {
	color: #fff;
	opacity: .7;
}

.navi-in a:hover {
	color: #ff7900;
	background-color: inherit;
}

.sidebar h3 {
    text-align: center;
    border-bottom: 3px solid #ff7900;
    padding: 0!important;
    background-color: transparent !important;
    border-radius: inherit;
}

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

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

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