@charset "UTF-8";

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

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

body {
	color: #666;
}

/*hrのリセット*/
hr {
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.only-sp {
	display: none;
}

#navi .navi-in > ul li{
	height: 80px;
	line-height: 80px;
	font-size: 1.5em;
	font-family: "Times New Roman", 'ヒラギノ角ゴ ProN W3', serif;
	font-style: normal;
	font-weight: normal;
	color: #666;
}

#navi .navi-in a {
	color: #666;
}

.clear { clear: both;}

h1.site-logo{
	text-align: center;
	padding-bottom: 0.3em;
    position: fixed;
    top: 10px;
	left: calc(50% - 100px);
}

.site-name-text {
	font-family: "Times New Roman", 'ヒラギノ角ゴ ProN W3', serif !important;
	font-style: normal;
	font-weight: normal;
	color: #666;
	letter-spacing: 0.2em;
}

h2.top-midashi {
	font-size: 1.5em;
	font-family: "Times New Roman", 'ヒラギノ角ゴ ProN W3', serif;
	font-style: normal;
	font-weight: normal;
	color: #666;
	text-align:center;
	letter-spacing: 0.1em;
	padding-top: 2em;
	padding-bottom: 2em;
}

a {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

section.pickup a,
.entry-content a {
	text-decoration: none;
	color: #000;
	font-weight: bold;
}



ul.sns-icon {
	list-style: none;
    position: fixed;
    top: 10px;
    right: 10px;
}

ul.sns-icon li {
	display: inline;
}

ul.sns-icon img {
	width: 20px;
}

div.top-main-img {
	text-align: center;
	margin-top: -3em;
	padding-bottom: 1em;
}

/* TOP section内の共通 */
section.top,
section.page {
	margin-bottom: 5rem;
}

section.top p,
section.page p {
	line-height: 240%;
	font-family: yu-mincho-pr6, sans-serif;
	font-weight: 400;
	font-style: normal;
}

section.top p.text-01,
section.page p.text-01 {
	font-size: 1em;
	margin-bottom: 1rem;
}

section.page p.text-01 {
	margin-top: 1rem;
	margin-bottom: .2rem
}

section.top p.text-02,
section.top p,
section.page p.text-02,
section.page p {
	font-size: 0.8em;
}

section.top div.cont-left,
section.page div.cont-left {
	float: left;
	width: 49%;
}

section.top div.cont-right,
section.page div.cont-right {
	float: left;
	width: 49%;
}

/* TOP - PICKUP */
section.pickup {
	max-width: 540px;
	width: 95%;
	margin: 0 auto;
}

section.pickup div.content {
	padding-top: 20px;
	padding-bottom: 40px;
}

section.pickup div.pickup-each-cont-space {
	text-align: left;
}

section.pickup div.pickup-each-cont-space img {
	max-width: 500px;
	margin: auto;
	display: block;
}
/*834px以下*/
@media screen and (max-width: 834px){
	section.pickup div.pickup-each-cont-space img {
		max-width: 500px;
		width: 70%;
	}
}
section.pickup .wp-block-image img {
	display: inline;
}

section.pickup figcaption {
	text-align: center;
}


/* ページネーション関連 */
.pnavi { text-align: center;}
.page-numbers {
	border: none;
	font-size: 0.8em;
	width: 20px;
}
.pnavi a {
	text-decoration: underline;
}
.pnavi .current {
	color: #587058;
}


/* TOP - ABOUT */
section.about div.cont-left {
	padding-right: 1%;
}

section.about div.cont-right {
	width: 45%;
	margin-left: 5%;
	margin-top: 3rem;
	background-color: #f4f4f4;
	padding: 3%;
}

/* TOP - WORKSHOP & PUBLISHED */
section.workshop div.box,
section.published div.box {
	display: flex;
	flex-flow: row wrap;
}

/* 順番 */
section.workshop div.cont-left,
section.published div.cont-left {
	order: 1;
}

section.workshop div.cont-right,
section.published div.cont-right {
	order: 2;
}


section.workshop div.cont-left,
section.published div.cont-left {
	position: relative;
	width: 50%;
	height: auto;
	margin-top: 8rem;
	background-color: #f4f4f4;
	padding: 3%;
	z-index: 2;
	margin-bottom: 3rem;
}

section.workshop div.cont-right,
section.published div.cont-right {
	position: relative;
	width: 60%;
	margin-left: -10%;
	padding-right: 1%;
	z-index: 1;
}

/* TOP - LESSON MOVIE */
section.movie div.cont-left {
	position: relative;
	width: 60%;
	padding-right: 1%;
	z-index: 1;
}

section.movie div.cont-right {
	position: relative;
	width: 50%;
	margin-left: -10%;
	margin-top: 5rem;
	background-color: #f4f4f4;
	padding: 3%;
	z-index: 2;
}

/* TOP - BLOG */
section.blog div.blog_box {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

section.blog div.item {
	padding: 20px;
	width: 32%;
	font-family: yu-mincho-pr6, sans-serif;
	font-weight: 400;
	font-style: normal;
}

section.blog div.thumb {}

section.blog div.thumb img {}

section.blog div.title {
	color: #666;
	font-size: 0.8em;
	margin-top: .4rem;
}


/* TOP - INSTAGRAM */
section.instagram div.account-name {
	text-align: center;
}

section.instagram div.account-name a {
	color: #666;
	text-decoration: underline;
}

section.instagram div.account-name a:hover {
	color: #333;
	text-decoration: underline;
}

/* ボタン関係 */

div.top-btn {
	margin-top: 4rem;
	margin-bottom: 2rem;
	text-align: center;
}

.btn,
a.btn,
button.btn {
  font-size: 1.25rem;
  font-weight: 400;
	font-family: "Times New Roman", 'ヒラギノ角ゴ ProN W3', serif;
  line-height: 0.5;
  position: relative;
  display: inline-block;
  padding: 1rem 6rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.3em;
  color: #212529;
  border-radius: 0.2rem;
}

.btn--white,
a.btn--white {
  color: #666;
  background-color: #fff;
  border: 1px solid #666;
}
.btn--white:hover,
a.btn--white:hover {
  color: #333;
  background: #CCC;
  border: 1px solid #666;
}

/* footer */
.footer {
	border-top: 10px solid #ff9999;
	background-color: #f4f4f4;
	font-family: "Times New Roman", 'ヒラギノ角ゴ ProN W3', serif;
	font-style: normal;
	font-weight: normal;
}

.footer-bottom {
	margin-top: 14px; /*フッター内上部の余白を詰める*/
}
.footer-bottom-logo { /*ロゴの位置調整*/
	float: none;
	bottom: auto;
	position: static;
	margin-bottom: 40px;
}
.footer-bottom-logo .logo-image {
	padding: 0;
	max-width: 181px; /*ロゴ画像を少し大きく*/
	height: 35px;
	margin: 0 auto;
}
.footer-bottom-content { /*メニュー＆クレジットの位置調整*/
	float: none;
	text-align: center;
}
.navi-footer-in > .menu-footer { /*メニューの位置調整*/
	justify-content: center;
	margin-bottom: 1em;
}
.navi-footer-in a {
	color: #aab3b9; /*メニューの文字色*/
}
.navi-footer-in a:hover { /*メニューのマウスホバー時の指定*/
	color: #aab3b9; /*文字色を通常時と同じに*/
	background: none; /*背景色をなしに*/
	text-decoration: underline; /*アンダーラインを追加*/
}
.footer-bottom.fnm-text-width .menu-footer li {
	line-height: 1; /*メニューの区切りボーダーの高さを1文字分にする*/
}
.copyright {
	color: #aab3b9; /*クレジットの文字色*/
}

.mobile-header-menu-buttons {
	box-shadow: none;
}

ul.blogroll {
	padding: 0;
	list-style: none;
}

/* カテゴリページのタイトル関連 */
.archive-title  {
	font-size: 1.5em;
	font-family: "Times New Roman", 'ヒラギノ角ゴ ProN W3', serif;
	font-style: normal;
	font-weight: normal !important;
	color: #666;
	text-align:center;
	letter-spacing: 0.1em;
	padding-top: 2em;
	padding-bottom: 2em;
}

.archive-title .fa-folder-open:before {
	content: "";
}


/* ブログの記事関連 */
h1{
	font-size: 1.5em;
	font-family: "Times New Roman", 'ヒラギノ角ゴ ProN W3', serif;
	font-style: normal;
	font-weight: normal !important;
	color: #666;
	text-align:center;
	padding: 2rem;
}

/* SNS シェアボタン */
.sns-share {
	padding: 1em 0;
	}
	
	.sns-share-btn {
	display: inline-block;
	padding-right: 0.25em;
	}
	.sns-share-btn img {
	max-width: 30px;
	padding: 0;
	}
	

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

  .only-sp {
	  display: none;
  }
	
}

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

	.only-pc {
		display: none;
	}

	div.top-main-img {
		margin-top: 10px;
	}
	

	/* TOP section内の共通 */

	section.top div.cont-left,
	section.page div.cont-left {
		width: 100%;
		text-align: center;
	}

	section.top div.cont-right,
	section.page div.cont-right {
		width: 100%;
		text-align: center;
	}

	section.top div.cont-left p,
	section.page div.cont-left p {
		text-align: left;
	}

	section.top div.cont-right p,
	section.page div.cont-right p {
		text-align: left;
	}


	/* TOP - ABOUT */
	section.about div.cont-left {
		text-align: center;
	}

	section.about div.cont-right {
		width: 90%;
		margin: 5%;
		margin-top: 3rem;
		background-color: #f4f4f4;
		padding: 3%;
	}

	/* TOP - WORKSHOP & PUBLISHED */

	section.workshop div.box,
	section.published div.box {
		display: flex;
		flex-flow: row wrap;
	}

	/* 順番 */
	section.workshop div.cont-left,
	section.published div.cont-left {
		order: 2;
	}

	section.workshop div.cont-right,
	section.published div.cont-right {
		order: 1;
	}

	section.workshop div.cont-left,
	section.published div.cont-left {
		position: static;
		width: 90%;
		margin: 5%;
		background-color: #f4f4f4;
		padding: 3%;
	}

	section.workshop div.cont-right,
	section.published div.cont-right {
		text-align: center;
		position: static;
		padding: 0;
		margin: 0;
	}

	/* TOP - LESSON MOVIE */
	section.movie div.cont-left {
		text-align: center;
	}

	section.movie div.cont-right {
		width: 90%;
		margin: 5%;
		margin-top: 3rem;
		background-color: #f4f4f4;
		padding: 3%;
	}

	/* TOP - BLOG */

	section.blog div.item {
		width: 100%;
		display: block;
	}

	section.blog div.thumb {
		float: left;
		width: 40%;
		height: auto;
	}

	section.blog div.thumb img {
	}

	section.blog div.title {
		margin-left: 42%;;
		width: 48%;
	}

	/* footer */
	.navi-footer-in > .menu-footer li.menu-item {
		border: none; /*モバイルでメニューのボーダーを消す*/
	}

	.btn,
	a.btn,
	button.btn {
		font-size: 1rem;
		padding: 1rem 4rem;
	}

  
	
}

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

  .navi-footer-in > .menu-footer li.menu-item { /*モバイルでメニューを1カラムにする*/
	width: 100%;
	display: block;
	flex: auto;
	padding: 0.3em 0;
  }

}