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

/************************************
** 追従メニューにロゴを表示しない
************************************/
#header a{color:#000;text-decoration:none;}
#header a:hover{color:#000;text-decoration:none;}
.hlt-top-menu .header-in{display:none;}/* 追従メニューにロゴを表示しない */
.fixed-header{
	background: #cc9;
}/* 追従メニューの色 */
.menu-header{
	background: #cc9;
}
.navi-in > ul.menu-header{
	margin-top: 0;margin-bottom: 0;margin-right: calc(50% - 50vw);margin-left: calc(50% - 50vw);
	border-top:4px solid #fff;border-bottom:4px solid #fff;
}
.navi-in > ul li a:hover{background: #FFCC00;color: white !important;}


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

.article h1,
.article h2{
	font-family: 'hirakakuW7' , "メイリオ", Meiryo, "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", sans-serif;
}
.article h3{
	font-family: "メイリオ", Meiryo, "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", sans-serif;
}
,
.article h4,
.article h5,
.article h6{
	font-family: "メイリオ", Meiryo, "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", sans-serif;
}


.gsss_font_family_gothic{font-family: "メイリオ", Meiryo, "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", sans-serif;}
.gsss_font_family{font-family: HGSminB,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;}

.background_color_uguisu_thin{background-color:#f1f4ed}
.background_color_kaki_thin{background-color:#fdf2eb}
.background_color_konruri_thin{background-color:#f3f4f8}

.background_color_uguisu{background-color:#7B9154}
.background_color_kaki{background-color:#ed6d3d}
.background_color_konruri{background-color:#164a84}


.color_uguisu{background-color:#7B9154}
.color_kaki{background-color:#ed6d3d}

/************************************
** web屋：見出し
************************************/
.article h2{
	background-color: transparent;border:none;
	font-weight:bold;
	margin:73px 0 15px;
	padding:5px 0;
	font-size:26px;
	border-bottom: 2px solid #cccc99;
}
@media screen and (max-width:768px){
	.article h2{
	background-color: transparent;border:none;
	font-weight:bold;
	margin:41px 0 22px;
	padding:8px 0;
	font-size:22px;
	line-height:1.5;
	border-bottom: 2px solid #cccc99;
	}
}
.article h3{
	background-color: transparent;border:none;
	font-weight:bold;
	margin:73px 0 15px;
	padding:5px 0;
	font-size:22px;
	border-bottom: 1px solid #cccc99;
}
@media screen and (max-width:768px){
	.article h3{
	background-color: transparent;border:none;
	font-weight:bold;
	margin:41px 0 22px;
	padding:8px 0;
	font-size:18px;
	line-height:1.5;
	border-bottom: 1px solid #cccc99;
	}
}
.article h4{
	background-color: transparent;border:none;
	margin:56px 0 16px;
	padding: 0 2rem;
	border-left: 4px solid #181818;
	border-top: 0px;
	border-bottom: 0px;
}
@media screen and (max-width:768px){
	.article h4 {
	background-color: transparent;border:none;
	margin:25px 0 14px;
	padding: 0 2rem;
	border-left: 4px solid #f3f3f3;
	border-top: 0px;
	border-bottom: 0px;
	}
}
.article h5{
	background-color: transparent;border:none;
	margin:56px 0 16px;
	padding: 0 2rem;
	border-left: 4px solid #f3f3f3;
	border-top: 0px;
	border-bottom: 0px;
}
@media screen and (max-width:768px){
	.article h5 {
	background-color: transparent;border:none;
	margin:25px 0 14px;
	padding: 0 2rem;
	border-left: 4px solid #f3f3f3;
	border-top: 0px;
	border-bottom: 0px;
	}
}
.article h6{
	background-color: transparent;border:none;
	margin:56px 0 16px;
	padding: 1rem 2rem;
	border-left: 4px solid #fff;
	border-top: 0px;
	border-bottom: 0px;
}
@media screen and (max-width:768px){
	.article h6 {
	background-color: transparent;border:none;
	margin:25px 0 14px;
	padding: 1rem 2rem;
	border-left: 4px solid #fff;
	border-top: 0px;
	border-bottom: 0px;
	}
}



/************************************
** Shortcodes Ultimateの複数タブのスタイル
************************************/
.su-tabs{
	background:#FFF !important;
}
.su-tabs * {
	color:#000 !important;
	border: 0px solid #FFF !important;
	background:#FFF !important;
	font-size:18px !important;
	line-height: 1.8 !important;
	-webkit-text-size-adjust: 100% !important;
}
.su-tabs-nav{
	text-align:center;
}
.su-tabs-nav span{
	color:#999 !important;
	border-bottom: 4px solid #fff !important;
}
.su-tabs-nav span:hover{
	color:#f08200 !important;
	border-bottom: 4px solid #f08200 !important;
}
.su-tabs-pane b{
	display:block;
	width:100%;
	text-align:center;
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
.pc_only{display:block !important;}
.sp_only{display:none !important;}

/*1023px以下*/
@media screen and (max-width: 1023px){
	/*モバイルユーザビリティの問題が検出されたとき*/
	.nt-warning{font-size:16px !important;line-height:1.2em !important;}
	.date-tags{font-size:16px !important;line-height:1.2em !important;}
	.btn-l{font-size:16px !important;line-height:1.2em !important;}
	.entry-category, .post-date, .post-update, .post-author, .amp-back{font-size:16px !important;line-height:1.2em !important;}

	.pc_only{display:none !important;}
	.sp_only{display:block !important;}
}

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

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




/************************************
** トップメニューのサンプルサイト
************************************/
.sample_site_menu{
	font-weight:bold;
}
.sample_site_menu .item-label{
	color:#7acbcd !important;
}


/************************************
** フォームとテーブルのデザイン
************************************/
form u.hissu {
	font-size:10px;
	text-decoration:none;
	display: inline-block;
	margin: 0 1em 0 1em;
	padding: .4em;
	line-height: 1;
	text-decoration: none;
	color: #fff;
	background-color: #bf0000;
	border: 1px solid #bf0000;
}
form u.nini {
	font-size:10px;
	text-decoration:none;
	display: inline-block;
	margin: 0 1em 0 1em;
	padding: .4em;
	line-height: 1;
	text-decoration: none;
	color: #fff;
	background-color: #999;
	border: 1px solid #999;
}
/* チェック・ラジオを一行ごとに */
.wpcf7-form-control .wpcf7-list-item{
	display:block;
}
/* ボタン */
input[type="submit"] {
	display:block;
  background-color: #bf0000;
  color:#fff;
  font-weight:bold;
  text-align:center;
  margin: 0 auto;
  width: 80%;
}

/************************************
** ウェブラボ weblab（やす、ヤス、yasuda）
** テーブルのデザイン
************************************/
.table{
	font-size:0.9em;
	  border-collapse: collapse;
}
.table .tr{
  display: table;
  width: 100%;

  border-collapse: collapse;
  border-spacing: 0;
}
@media screen and (max-width: 767px) {
  .table .tr{
    display: block;
    width:100%;
  }
}
.table .tr .td{
  display: table-cell;
  border: 1px solid #e5e5e5;
  padding: 8px 13px;
  vertical-align:top;
  background-color:#fff;
  border-collapse: collapse;
  border-spacing: 0;
}
@media screen and (max-width: 767px) {
  .table .tr .td{
    display: block;
    width:100%;
  }
}
.table .label{
	background    : #fcfcfc;
	width:30%;
}
.table .input{
	width:70%;
}

.table .tr .td:nth-child(2){
width:70%;
}
@media screen and (max-width: 767px) {
  .table .tr .td:nth-child(2){
    display: block;
    width:100%;
  }
}


/************************************
** ウェブラボ weblab（やす、ヤス、yasuda）
** 文字の配置center left right
************************************/
.center{
 text-align:center;
}

/************************************
** ウェブラボ weblab（やす、ヤス、yasuda）
** ダミーテキスト
************************************/
.c0{
 font-size:0%;
}



/************************************
** ウェブラボ weblab（やす、ヤス、yasuda）
** SNSアイコン等の表示
************************************/

@font-face {
  font-family: 'icomoon';
  src:  url('https://web.gsss.pro/wp-content/themes/cocoon-master/webfonts/icomoon/fonts/icomoon.eot?mgdqi2');
  src:  url('https://web.gsss.pro/wp-content/themes/cocoon-master/webfonts/icomoon/fonts/icomoon.eot?mgdqi2#iefix') format('embedded-opentype'),
    url('https://web.gsss.pro/wp-content/themes/cocoon-master/webfonts/icomoon/fonts/icomoon.ttf?mgdqi2') format('truetype'),
    url('https://web.gsss.pro/wp-content/themes/cocoon-master/webfonts/icomoon/fonts/icomoon.woff?mgdqi2') format('woff'),
    url('https://web.gsss.pro/wp-content/themes/cocoon-master/webfonts/icomoon/fonts/icomoon.svg?mgdqi2#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}
.social-icon:before {
  display: inline-block;
  font: normal normal normal 16px/1 icomoon;
  margin-right: 2px;
  position: relative;
  top: 0px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

/* Twitter */
.icon-twitter:before {
  content: '\e91c';
}

/* Facebook */
.icon-facebook:before {
  content: '\e919';
}

/* はてな */
.icon-hatena:before {
  content: '\e916';
}

/* Pocket */
.icon-pocket:before {
  content: '\e914';
}

/* LINE */
.icon-line:before {
  content: '\e915';
}

/* Push7 */
.icon-push7:before {
  content: '\e90e';
  font-size: 21px;
  top: 3.5px;
}

/* Feedly */
.icon-feedly:before {
  content: '\e92e';
  font-size: 21px;
  top: 3px;
}


/************************************
** ウェブラボ weblab（やす、ヤス、yasuda）
** SNSアイコン等の表示（著者）
************************************/
.sns-follow-buttons > a > span {
  font-size: 18px;
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
  margin-right: 2px;
  background-color: transparent;
  color: #ddd;
  border-radius: 2px;
}

.sns-follow-buttons > a > span:before {
  display: inline-block;
  font: normal normal normal 16px/1 icomoon;
  margin-right: 2px;
  position: relative;
  top: 0px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

/* homepage */
.icon-home-logo:before {
  font-size: 12px !important;
  content: 'HP';
}
.icon-home-logo:hover {
  color: #00f !important;
}
/* Twitter */
.icon-twitter-logo:before {
  content: '\e91c';
}
.icon-twitter-logo:hover {
  color: #55acee;
}
/* Facebook */
.icon-facebook-logo:before {
  content: '\e92d';
}
.icon-facebook-logo:hover {
  color: #3b5998;
}
/* はてな */
.icon-hatebu-logo:before {
  content: '\e931';
}
/* Instagram */
.icon-instagram-logo:before {
  content: '\e932';
}
.icon-instagram-logo:hover {
  color: #008fde;
}
/* Pinterest */
.icon-pinterest-logo:before {
  content: '\e936';
}
.icon-pinterest-logo:hover {
  color: #cc2127;
}
/* YouTube */
.icon-youtube-logo:before {
  content:'\e93a';
}
.icon-youtube-logo:hover {
  color: #e52d27;
}
/* Flickr */
.icon-flickr-logo:before {
  content: '\e92f';
}
.icon-flickr-logo:hover {
  color: #1d1d1b;
}
/* LINE */
.icon-line-logo:before {
  content: '\e935';
}
.icon-line-logo:hover {
  color: #00c300;
}
/* GitHub */
.icon-github-logo:before {
  content: '\eab0';
}
.icon-github-logo:hover {
  color: #24292e;
}
/* Push7 */
.icon-push7-logo:before {
  content: '\e937';
}
.icon-push7-logo:hover {
  color: #eeac00;
}
/* Feedly */
.icon-feedly-logo:before {
  content: '\e92e';
}
.icon-feedly-logo:hover {
  color: #87bd33;
}
/* RSS */
.icon-rss-logo:before {
  content: '\e938';
}
.icon-rss-logo:hover {
  color: #fe9900;
}


/************************************
** ウェブラボ weblab（やす、ヤス、yasuda）
** 著者ボックス
************************************/
.author-box{
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
font-size:90%;
}

/************************************
** ウェブラボ weblab（やす、ヤス、yasuda）
** あかねちゃん作成 サイドバーメニュー佐々木先生
************************************/
.sidebar .widget h3 {
  background-color: #cccc99;
  font-size:0.97em;
  color: #FFFFFF;
  text-align: center;
  padding: 5px;
  line-height: 2em;
  padding: 0;
  margin:0;
  font-weight:normal;
}
/** 目次 **/
.sidebar .widget_toc .toc-content{
		width:100%;
}
.sidebar .widget_toc ol{
	width:100%;
}
.sidebar .widget_toc li{
	text-align:left;
}
/** リストメニュー **/
.sidebar .widget_links{
  border-top: none;
  font-size:0.97em;
  padding-top: 8px;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;
  line-height: 2em;
}
.sidebar .widget_links ul {
  list-style: none;
  padding: 0;
}
.sidebar .widget_links li {
  padding:0;
  margin:0;
  border-bottom: 1px solid #D9D9D9;
  padding-right: 0px;
  line-height: 2em;
  border-right: 1px solid #D9D9D9;
  border-left: 1px solid #D9D9D9;border-bottom: 1px solid #D9D9D9
}

.sidebar .widget_links li::before{
  font-family: FontAwesome;
  content: "\f01d";
  font-weight: 100;
  padding-right : 6px;
  padding-left : 6px;
  color: #cccc99;
}
.sidebar .widget_links li a {
  text-decoration: none;
  color:#333333;
  font-size:0.8em;
}
.sidebar .widget_links li a:hover {
  color:#7c061e;
}

/************************************
** ウェブラボ weblab（やす、ヤス、yasuda）
** サイドバー可変スタイルシート300px固定
************************************/
#sidebar{
	max-width:330px;
}

/************************************
** 共通CSS
** フッターメニュー リンクデザイン
************************************/
.navi-footer-in a{}
.navi-footer-in a:hover{
	background-color: #EDEDDD;
	color: #54542A !important;
}
/************************************
** 共通CSS
** ラベルボックスに枠線が入ってしまう現象
************************************/
.label-box.has-ex-a-border-color{border:0;}
.label-box.has-ex-b-border-color{border:0;}
.label-box.has-ex-c-border-color{border:0;}
.label-box.has-ex-d-border-color{border:0;}
.label-box.has-ex-e-border-color{border:0;}
.label-box.has-ex-f-border-color{border:0;}
.tab-caption-box.has-ex-a-border-color{border:0;}
.tab-caption-box.has-ex-b-border-color{border:0;}
.tab-caption-box.has-ex-c-border-color{border:0;}
.tab-caption-box.has-ex-d-border-color{border:0;}
.tab-caption-box.has-ex-e-border-color{border:0;}
.tab-caption-box.has-ex-f-border-color{border:0;}




/************************************
** ウェブラボ weblab（やす、ヤス、yasuda）
** LPランディングページ横幅いっぱい
************************************/
#content{
  overflow: hidden;
}

.lp_box{
	margin: 0 calc((100% - 100vw) / 2) 1.8em calc((100% - 100vw) / 2)  !important;
	padding: 3em calc(50vw - 50% ) 3em calc(50vw - 50% ) !important;
	width: 100vw;
	overflow: hidden;
	box-sizing:border-box;
	border:0;
}
/*1023px以下*/
@media screen and (max-width: 1023px){
	.lp_box{
		margin: 0 calc((100% - 100vw) / 2) 1.8em calc((100% - 100vw) / 2) !important;
		padding: 1em calc(50vw - 50% ) 1em calc(50vw - 50% ) !important;
		width: 100vw;
		overflow: hidden;
		box-sizing:border-box;
		border:0 !important;
		border-radius: 0 !important;
	}
}
.editor-styles-wrapper .block-editor-block-list__block.lp_box{
	width: 100% !important;
	margin: 1em auto !important;
	padding: 1em 0 !important;
	border:3px dotted #ccc !important;
}

.lp_box2{
	margin: 0 calc((100% - 100vw) / 2) 1.8em calc((100% - 100vw) / 2)  !important;
	padding: 3em 3em 3em 3em !important;
	width: 100vw;
	overflow: hidden;
	box-sizing:border-box;
	border:0;
}
/*1023px以下*/
@media screen and (max-width: 1023px){
	.lp_box2{
		margin: 0 calc((100% - 100vw) / 2) 1.8em calc((100% - 100vw) / 2) !important;
		padding: 3em 1em 3em 1em !important;
		width: 100vw;
		overflow: hidden;
		box-sizing:border-box;
		border:0 !important;
		border-radius: 0 !important;
	}
}
.editor-styles-wrapper .block-editor-block-list__block.lp_box2{
	width: 100% !important;
	margin: 1em auto !important;
	padding: 1em 0 !important;
	border:3px dotted #ccc !important;
}


/************************************
** スピーチアイコン、コメント吹き出し
************************************/
.speech-icon{margin-bottom:10px;}
.speech-wrap{margin-bottom:10px !important;}
.speech-balloon{width:70% !important;}
/*1023px以下*/
@media screen and (max-width: 1023px){
	.speech-balloon{width:100% !important;}
}