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

/************************************
** 子テーマ用のスタイルを書く
************************************/

/*---------------------------*/
/* リストの点を青く */
/*---------------------------*/
.wp-block-list li::marker {
    color: #2196f3;
}

/*---------------------------*/
/* 本文の見出しデザイン */
/*---------------------------*/

.article h2 {
  position: relative;
  background: #fff7d1;
  padding: 0.7em 0.5em;
  border-left: solid 2em #ffb135;
  font-size:1.3em;
	margin:100px 0 30px;
}

.article h2:before {
  font-family: "Font Awesome 5 Free";
  content: "\f144";
  position: absolute;
  padding: 0em;
  color: white;
  font-weight: 700;
  left: -1.5em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.article h3 {
  border: none; /* テーマ設定解除 */
  padding: 0.5em 0.6em;
  background: #fbfbfb;
  border-left: solid 10px #ffb135;
  border-bottom: solid 2px #d7d7d7;
  font-size:20px;
	margin:100px 0 30px;
}

.article h4 {
  border: none; /* テーマ設定解除 */
  padding: 0.25em 0.5em;
  background: transparent;
  border-left: solid 7px #939393;
  font-size: 18px;
}

.sidebar h2, .sidebar h3 {
    background-color: #ffb135;
    padding: 8px;
    color: #fff;
    text-align: center;
}

/* カテゴリ一覧の表記 */
.archive-title {
    display: none;
}


/* cocoon標準ボタン マウスオーバー*/
.wp-block-buttons>.wp-block-button .wp-block-button__link {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.wp-block-buttons>.wp-block-button .wp-block-button__link:hover {
    background-color: orange !important;
    color: white !important;
    border-color: orange !important;
}


/*---------------------------*/
/* レスポンシブテーブル */
/*---------------------------*/
  .responsive-table {
    width: 100%;
    border-collapse: collapse;
  }
  .responsive-table th,
  .responsive-table td {
    border: 1px solid #ccc;
    padding: 20px 15px;
    text-align: center;
  }
  .responsive-table th {
    width: 25%;
    background-color: #f4f4f4;
  }
  .responsive-table td {
    width: 75%;
  }

  /* スマホ表示（768px以下） */
  @media screen and (max-width: 768px) {
    .responsive-table,
    .responsive-table tbody,
    .responsive-table tr,
    .responsive-table th,
    .responsive-table td {
      display: block;
      width: 100%;
			font-size: 0.9rem;
    }
    .responsive-table th {
      background-color: #f4f4f4;
      text-align: center;
			padding: 8px;
    }
    .responsive-table td {
      border-top: none;
			text-align: center;
    }
  }

/*---------------------------*/
/*もくじデザイン*/
/*---------------------------*/

/* もくじ全体デザイン */
.toc-center {
margin-bottom: 70px !important;
}

/* 全体の最小幅を50%に */
.toc {
  min-width: 50%;
  width: auto; /* 自動調整を許可 */
  max-width: 100%; /* はみ出し防止 */
}

/* もくじアイコン */
.toc-title:before {
width: 50px;
height: 50px;
font-family: "Font Awesome 5 Free";
content : "\f03c";
font-size:22px;
margin-right:8px;
color:#FFF;
}

.toc-title{
background-color:#ffb135;
font-size: 19px;
padding: 0.1em;
font-weight: 600; 
color: #ffffff;
font-family: "Font Awesome 5 Free";
content : "\f03c";
margin-bottom: 10px
}

/*見出し2（H2）の設定*/
.toc-content > .toc-list > li:before { 
font-family: "Font Awesome 5 Free";
content: "\f144";
font-weight: 900;
color: #ffb135;
padding-right:8px;
}
.toc-content .toc-list li {
font-weight:600;
}
/*H3以降の文字サイズ*/
.toc-content .toc-list li li {
font-weight:normal;
}
.toc .toc-list ul, .toc .toc-list ol {
padding-left: 1.25em;
}

/************************************
** サイドバー追尾目次
************************************/
.sidebar-scroll{
  top:15px !important;
}
.sidebar h3{
  font-size:0.9em;
  padding: 7px 12px;
}
.sidebar .widget_toc{
   box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}
.sidebar .toc-widget-box{
  margin-top: -0.9em;
}
.sidebar .toc{
  padding: 0;
  width:100%;
}
.sidebar .toc-content {
  overflow-y: scroll;
  max-height: 390px;
  background: #fff;
  padding: 0.5em 1.5em;
}
.sidebar .toc li{
  line-height:1.6;
  margin-bottom: 1em;
  font-size:0.85rem;
  color:#3cb8f1;
}
.sidebar .toc-content > ol  > li,.sidebar .toc-content > ul  > li{
  font-weight:600;
  padding-left: 0.5em;
}
.sidebar .toc-content a{
  letter-spacing:0.5px;
}
.sidebar .toc .toc-list ul, .sidebar .toc .toc-list ol {
  margin: 1em 0;
  list-style-type:none;
  font-weight:500;
}
@media screen and (max-width: 768px){
  .sidebar-menu-button .widget_toc{
    display:none;
  }
}


/*---------------------------*/
/*PCアピールエリアをフルワイドに*/
/*---------------------------*/
@media screen and (min-width: 835px) {
#appeal { 
    height: calc(100vw / 3);
}
}

/*---------------------------
* サイドバー プロフ背景画像＆SNSアイコン　*/
/*---------------------------*/
.nwa .author-box {
max-width:none;
padding: 0;
margin-bottom:0;
}
aside#author_box-2.widget.widget-sidebar.widget-sidebar-standard.widget_author_box{
padding: 0!important;
border-radius: 10px;
}
@media (max-width: 1023px){
aside {
padding: 0 .5em;
}
}
.nwa .author-box .author-thumb {
width: 100%;
height:9em;
margin:0 0 5em 0;
}
.author-box figure.author-thumb{
float: none;
text-align: center;
background: url(http://a4-mkt.com/wp-content/uploads/2025/03/prfe-1.jpg) center no-repeat;
background-size: cover;
position: relative;
z-index: 0;
}
.author-box img.avatar.photo{
background-image: none;
padding: 0!important;
box-shadow:none;
}
.author-box figure.author-thumb img{
width: 40%;
max-width:180px;
margin-top:5em;
}
@media (min-width:1023px){
.nwa .author-box .author-thumb {
height:8em;
}
.author-box figure.author-thumb img{
max-width:120px;
}}
@media (max-width:480px){
.nwa .author-box .author-thumb {
height:8em;
}
.author-box figure.author-thumb img{
max-width:130px;
}}
.author-box .author-name {
margin: 0 0 1.5em 0;
}
.author-box .author-content .author-name a{
text-decoration: none;
font-size:1.2em;
color:#555;
}
.nwa .author-box .author-description {
margin-bottom:1.6em
}
.author-box .author-content .author-description p{
font-size:13px;
color:#555;
line-height:1.7em!important;
margin:0.18em;
}
#author_box-2 p{
margin:1em 2.5em;
}
div.author-follows{
padding-bottom:2em;
}
.author-box .author-content .author-description p a{ text-decoration: none; }
.author-box .author-content .author-description p a:hover{ text-decoration: underline; }
.author-box .author-content .author-follows .sns-buttons{ justify-content: center; }
.author-box .author-content .author-follows .sns-buttons a.follow-button{
border-radius: 50%;
border: none;
width: 40px;
height: 40px;
color: #fff!important;
margin: 7px !important;
transition: .5s;
}
div.author-follows a.follow-button.website-button.website-follow-button-sq{background-color: #268aff!important;}
div.author-follows a.follow-button.twitter-button.twitter-follow-button-sq{background-color: #000000!important;}
div.author-follows a.follow-button.facebook-button.facebook-follow-button-sq{background-color: #0866ff!important;}
div.author-follows a.follow-button.hatebu-button.hatebu-follow-button-sq{background-color: #2c6ebd!important;}
div.author-follows a.follow-button.instagram-button.instagram-follow-button-sq{background: linear-gradient(165deg, #427eff 5%, #f13f79 50%) no-repeat !important;}
div.author-follows a.follow-button.pinterest-button.pinterest-follow-button-sq{background-color: #bd081c!important;}
div.author-follows a.follow-button.youtube-button.youtube-follow-button-sq{background-color: #cd201f!important;}
div.author-follows a.follow-button.tiktok-button.tiktok-follow-button-sq{background-color: #000000!important;}
div.author-follows a.follow-button.linkedin-button.linkedin-follow-button-sq{background-color: #0A66C2!important;}
div.author-follows a.follow-button.note-button.note-follow-button-sq{background-color: #41C9B4!important;}
div.author-follows a.follow-button.soundcloud-button.soundcloud-follow-button-sq{background-color: #FF5500!important;}
div.author-follows a.follow-button.flickr-button.flickr-follow-button-sq{background-color: #111!important;}
div.author-follows a.follow-button.line-button.line-follow-button-sq{background-color: #00c300!important;}
div.author-follows a.follow-button.amazon-button.amazon-follow-button-sq{background-color: #ff9900!important;}
div.author-follows a.follow-button.twitch-button.twitch-follow-button-sq{background-color: #5C16C5!important;}
div.author-follows a.follow-button.rakuten-room-button.rakuten-room-follow-button-sq{background-color: #C61E79!important;}
div.author-follows a.follow-button.slack-button.slack-follow-button-sq{background-color: #4A154B!important;}
div.author-follows a.follow-button.github-button.github-follow-button-sq{background-color: #4078c0!important;}
div.author-follows a.follow-button.codepen-button.codepen-follow-button-sq{background-color: #47CF73!important;}
div.author-follows a.follow-button.feedly-button.feedly-follow-button-sq{background-color: #2bb24c!important;}
div.author-follows a.follow-button.rss-button.rss-follow-button-sq{background-color: #f26522!important;}
.author-box .author-content .author-follows .sns-buttons a.follow-button span{ line-height: 40px; }
.author-box .author-content .author-follows .sns-buttons a.follow-button span::before{ font-size: 20px !important; }
@media (max-width:1023px){
.nwa .author-box .author-thumb {
height:11em;
margin:0 0 2em 0;
}
.author-name{
font-size:16px!important;
}
.author-description{
line-height: 1.5 !important;
text-align:center;
margin:0 auto;
}
}
@media screen and (max-width: 1023px){/*スマホ画面でサイドバーを非表示*/
div.sidebar {
display: none;
}
}

/* ホームアイコンをヒトアイコンに変更 */
.author-box .author-content .author-follows .sns-buttons a.website-button.website-follow-button-sq span::before {
    content: "\f007"; 
    font-family: "Font Awesome 5 Free";
    font-weight: 500; 
}

/*---------------------------　
/* 通知エリアの流れるテキスト 　*/
/*---------------------------*/
.notice-area {
	overflow: hidden;
	white-space: nowrap;
	padding: 0.4em;
  font-size: 1.9em;
}
.notice-area-message {
	display: inline-block;
	padding-left: 100%; 
	animation: slideMessage 12s linear infinite; 
}
@keyframes slideMessage {
	to {
		transform: translateX(-100%); 
	}
}
@media screen and (min-width: 1023px) {
	.notice-area-message {
		animation-duration: 25s;
	}
}

/*---------------------------
** スマホ追尾目次　*/
/*---------------------------*/
#mobile-toc-widget-wrap .menu-trigger,
#mobile-toc-widget-wrap .menu-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
#mobile-toc-widget-wrap .menu-trigger {
  position: relative;
  width: 25px;
  height: 35px;
}
#mobile-toc-widget-wrap .menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #fff; /* 三本線色 */
  border-radius: 4px;
}
#mobile-toc-widget-wrap .menu-trigger span:nth-of-type(1) {
  top: 13px;
}
#mobile-toc-widget-wrap .menu-trigger span:nth-of-type(2) {
  top: 20px;
}
#mobile-toc-widget-wrap .menu-trigger span:nth-of-type(3) {
  top: 27px;
}
#mobile-toc-widget-wrap .menu-trigger.active {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}
#mobile-toc-widget-wrap .menu-trigger.active span:nth-of-type(1) {
  -webkit-transform: translateY(20px) rotate(-45deg);
  transform: translateY(20px) rotate(-45deg);
  top:0;
}
#mobile-toc-widget-wrap .menu-trigger.active span:nth-of-type(2) {
  -webkit-transform: translateY(0) rotate(45deg);
  transform: translateY(0) rotate(45deg);
}
#mobile-toc-widget-wrap .menu-trigger.active span:nth-of-type(3) {
  opacity: 0;
}
#mobile-toc-widget-wrap{
  position: fixed;
  bottom: 55px; /* アイコン下からの位置 */
  right: 10px;/* アイコン右からの位置 */
  margin: 0;
  padding: 0;
  z-index:5;
  counter-reset: mobile-toc;
}
#mobile-toc-widget-wrap label .mobile-toc-button {
  width: 58px;
  height: 58px;
  border-radius:50%;
  background: #ffb135; /* ボタン色 */
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.16);
  transition: ease-out 0.3s;
  text-align:center;
  position:relative;
  z-index: 3;
}
#mobile-toc-widget-wrap label .mobile-toc-button .mobile-toc-button-title {
  color: #fff; /* ボタン文字色 */
  font-size: 0.65em;
  letter-spacing: 0;
  position: absolute;
  bottom: 7px;
  left: 0;
  right: 0;
  margin: auto;
}
#mobile-toc-widget-wrap label:hover {
  background: #efefef;
}
#mobile-toc-widget-wrap input {
  display: none;
}
#mobile-toc-widget-wrap .mobile-toc-show {
  display:none;
}
#mobile-toc-widget-wrap input:checked ~ .mobile-toc-show {
  background:#fff;
  position: absolute;
  top: 0;
  left: 0;
  padding: 2.5em 1em;
  opacity:0.97; /* 20190924数値変更 */
  position:fixed;
  width:100%;
  height:100%;
  display:block;
  animation: 0.5s fade-in;
  -webkit-animation: 0.5s fade-in;
  overflow-y:scroll;
}
@-webkit-keyframes fadeIn { 
  0% {display: none;opacity: 0;}
  1% {display: block;opacity: 0;}
  100% {display: block;opacity: 0.93;}
}
@keyframes fade-in {
  0% {display: none;opacity: 0;}
  1% {display: block;opacity: 0;}
  100% {display: block;opacity: 0.93;}
}
#mobile-toc-widget-wrap .widgettitle{
  text-align: center;
  margin: 0 0 1em; /* 20190924数値変更 */
  color: #f6a068; /* 目次名の色 */
  font-size: 1.1em;
  letter-spacing:2px;
  font-weight:400; /* 20190924追記 */
}
#mobile-toc-widget-wrap .mobile-toc-show .toc{
  border:none;
  margin: 0 !important;
  padding: 0 !important;
}
#mobile-toc-widget-wrap .toc .toc-list > li {
  list-style-type: none !important;
  position: relative;
  margin-left: 13px;
  margin-right: 25px;
  padding-left: 32px;
  margin-bottom: 15px;
  padding-bottom: 0px;
  font-size: 1.1em;
  line-height: 1.8;
}
#mobile-toc-widget-wrap .toc a {
  font-size: 0.8em;
  font-weight:500;/* 20190924追記 */
}
#mobile-toc-widget-wrap .toc-list{
  padding:0 !important;
}
#mobile-toc-widget-wrap .toc-list > li:before{
  counter-increment: mobile-toc;
  content: counter(mobile-toc);
  position: absolute;
  left: 5px;
  top: 3px;
  background: none;
	font-family: "Font Awesome 5 Free";
	content: "\f144";
	font-weight: 900;
	color: #ffb135;
	padding-right:8px;
}
#mobile-toc-widget-wrap .toc_widget_list > li ol {
  margin-top: 5px;
  padding-left: 20px;
}
#mobile-toc-widget-wrap .toc-list ol{
  list-style:none;
}
#mobile-toc-widget-wrap .toc-list > li > ol > li a {
  position: relative;
  text-decoration: none !important;
  font-weight:400;/* 20190924追記 */
}
#mobile-toc-widget-wrap .toc-list > li ol li a:before {
  position: absolute;
  content: "・";
  font-size: 1.4em;
  left: -20px;
  top: -10px;
  color: #f6a068; /* 点の色 */
}

/*---------------------------*/
/* フッターモバイルボタン透明背景色 */
/*---------------------------*/
.mobile-footer-menu-buttons {
background: rgba(1,1,1,0.6); 
}
.mobile-footer-menu-buttons .menu-button,
.home-menu-button menu-button,
.mobile-menu-buttons .home-menu-button > a,
.mobile-menu-buttons .top-menu-button > a {
  color: #fff;
}

/******************************************************************
** レスポンシブデザイン用のメディアクエリ
******************************************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
	
/*---------------------------
* モバイル 左スライドメニュー　*/
/*---------------------------*/
.menu-close-button {
 display:none;
}
.menu-content {
background:rgba( 255, 255, 255, 0.93 ); 
}

ul.menu-drawer:before {
content: "MENU"; 
display: block;
background-color: #888;
color: #fff; 
font-size: 1.1em;
font-weight: bold;
text-align: center;
padding: 7px;
margin: 15px 0;
}
ul.menu-drawer:after {
background-color: #fff;
}
.menu-drawer a {
color: #555 !important;/* 文字色 */
font-size: 1em;
font-weight: 600;
}
.menu-drawer a:hover {
background-color: #eff8f9;
}
.menu-drawer a .fas, .menu-drawer a .far,.menu-drawer a .fa,.menu-drawer a .fab {
margin-right: 3px;
}
.sub-menu li {
font-size: 0.8em;
}


/*---------------------------
*　スマホメニューを横スクロール　*/
/*---------------------------*/
#header-container .navi-in > ul li {
   height: auto;
   font-weight: 500;
   line-height: 1.2;
}
#header-container #navi a {
   color: #237fc2 !important; /* 文字色 */
   padding: 0.4em 1em;
   background: #f2f6ff;
}
#header-container .navi-in > ul > .menu-item-has-children > a::after {
   top: 0.8em;
   font-size: 0.8em !important;
   font-weight: 700;
}
#header-container .sub-menu .caption-wrap {
   padding-left: 1em;
}
.navi-in > ul .menu-item-has-description > a > .caption-wrap {
   height: auto;
}
@media screen and (max-width: 1030px) {
  .menu-mobile {
    display: none;
  }
  .navi-in > .menu-mobile {
    display: flex;
    overflow-x: scroll;
    white-space: nowrap; /* 横スクロールを維持 */
    justify-content: flex-start;
    flex-wrap: nowrap; /* 2段にならないようにする */
  }
  #header-container #navi a {
    font-size: 0.77em;
    padding: 0.7em 0.8em;
  }
  #header-container .navi-in > ul > .menu-item-has-children > a::after {
    display: none; /* アイコンを非表示 */
  }
  .navi-in > .menu-mobile li {
    height: auto;
    line-height: 0;
  }
  .mblt-header-mobile-buttons {
    margin-top: 53px;
  }
}
}/*1023以下の閉じタグ*/



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

.information-box:before, .question-box:before, .alert-box:before {
	padding-right:.15em;
	line-height:1em;
	position: absolute;
	top:50%;
	margin-top:-.5em;
}
.information-box {
	background:rgba(135,206,250,.1);
	border:1px solid rgba(135,206,250,.5);
}
.information-box:before {
	color:#87cefa;
	border-right: 1px solid rgba(135,206,250,.5);
}
.question-box:before {
	color:gold;
	border-right: 1px solid rgba(255,215,0,.5);
}
.question-box  {
	background:rgba(255,215,0,.2);
	border: 1px solid rgba(255,215,0,.5);
}
.alert-box{
	background:rgba(240,128,128,.1);
	border:1px solid rgba(240,128,128,.5);
}
.alert-box:before {
	border-right: 1px solid rgba(240,128,128,.5);
}


	
/* メインカラム 上下余白 */
.main {
	padding: 15px!important;
}
	
/*---------------------------*/
/*モバイル アピールエリア*/
/*---------------------------*/
.appeal, .appeal-in {
	height: 85vh;
	background-size: cover;}

.appeal {background-image: url("http://a4-mkt.com/wp-content/uploads/2025/08/spmain.jpg");}

	
/*---------------------------*/
/*モバイル ブログ記事一覧の文字サイズ*/
/*---------------------------*/
.related-entry-card-title, .entry-card-title {
    font-size: 14px !important;
	font-weight: 500;
}

/*---------------------------*/
/*モバイル ブログページのタイトル余白 */
/*---------------------------*/
.entry-title {
padding:0 0 10px;		
	}
	
/*---------------------------*/
/*モバイル サイドバー検索非表示 */
/*---------------------------*/
aside#search-5 {
   display: none;
    }

/*---------------------------*/
/*モバイル 本文SNSアイコン6列表示 */
/*---------------------------*/
/* sns-shareの共通設定 */
.sns-share.ss-top.ss-col-6 a, 
.sns-share.ss-bottom.ss-col-6 a, 
.sns-share.ss-top.ss-col-5 a, 
.sns-share.ss-bottom.ss-col-5 a {
    width: 15%;
}
/* sns-buttonsの共通設定 */
.sns-share.ss-top.ss-col-6 .sns-buttons,
.sns-share.ss-bottom.ss-col-6 .sns-buttons, 
.sns-share.ss-top.ss-col-5 .sns-buttons, 
.sns-share.ss-bottom.ss-col-5 .sns-buttons {
    column-gap: 1.75%;
}
/* sns-share-buttonsの共通設定 */
.ss-top .sns-share-buttons a, 
.ss-bottom .sns-share-buttons a {
    font-size: 18px;
}
/* ボタンキャプションの非表示 */
.ss-top .sns-share-buttons a .button-caption, 
.ss-bottom .sns-share-buttons a .button-caption {
    display: none;
}
/* sns-buttonsの高さ設定 */
.sns-buttons a {
    height: 40px;
}

	
	
}




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



/*---------------------------*/
/* アイコンボックススタイル */
/*---------------------------*/

/*アイコン変更（メモアイコン） */
.memo-box::before {
	content: "\f304"; /* アイコンをメモに変更 */
}
/* 丸み設定 */
.wp-block-cocoon-blocks-icon-box:where(.is-style-icon1, .is-style-icon2, .is-style-icon3,.is-style-icon4, .is-style-icon5, .is-style-icon6,.is-style-icon7) {
	border-radius: 0; /* 角を四角く */
}
.wp-block-cocoon-blocks-icon-box:where(.is-style-icon1-radius, .is-style-icon2-radius, .is-style-icon3-radius, .is-style-icon6-radius, .is-style-icon7-radius) {
	border-radius: 8px; /* 角を丸く */
}



/* スタイル1・2・3の設定 ----------------------------------------------- */

/* アイコンボックス（スタイル1・2・3） */
.wp-block-cocoon-blocks-icon-box:where(.is-style-icon1, .is-style-icon2, .is-style-icon3, .is-style-icon1-radius, .is-style-icon2-radius, .is-style-icon3-radius) {
	padding: 1.2em 1.5em 1.2em 4em; /* 内側余白（上・右・下・左） */
}
/* スタイル2：外枠なしのボックス */
.wp-block-cocoon-blocks-icon-box:where(.is-style-icon2, .is-style-icon2-radius) {
	border-width: 0; /* 外枠なし */
}
/* スタイル3：背景色なしで外枠の太さを設定 */
.wp-block-cocoon-blocks-icon-box:where(.is-style-icon3, .is-style-icon3-radius) {
	border-width: 2px; /* 外枠の太さ */
	background-color: transparent; /* 背景色なし */
}
/* スタイル1・2・3 - アイコンのサイズ設定 */
.wp-block-cocoon-blocks-icon-box:where(.is-style-icon1, .is-style-icon2, .is-style-icon3, .is-style-icon1-radius, .is-style-icon2-radius, .is-style-icon3-radius)::before {
	font-size: 1.3em; /* アイコンのフォントサイズ */
	padding:0;
}

/* スタイル4・5の設定 ----------------------------------------------- */
/* アイコンボックス（スタイル4・5） */
.wp-block-cocoon-blocks-icon-box:where(.is-style-icon4, .is-style-icon5) {
	border-width: 5px; /* 外枠の太さ */
	padding: 1em 1.5em 1em 3em; /* 内側余白（上・右・下・左） */
}
/* スタイル4：左・下・右の枠線を非表示 */
.wp-block-cocoon-blocks-icon-box.is-style-icon4 {
	border-right: none;
	border-left: none;
	border-bottom: none;
}
/* スタイル5：上・右・下の枠線を非表示 */
.wp-block-cocoon-blocks-icon-box.is-style-icon5 {
	border-top: none;
	border-right: none;
	border-bottom: none;
}
/* スタイル4・5 - アイコンのサイズとスタイル */
.wp-block-cocoon-blocks-icon-box:where(.is-style-icon4, .is-style-icon5)::before {
	font-size: 1.3em; /* アイコンのフォントサイズ */
	border-right: 0;
	padding:0;
}

/* スタイル6・7の設定 ------------------------------------------------ */

/* アイコンボックスの基本スタイル（スタイル6・7） */
.wp-block-cocoon-blocks-icon-box:where(.is-style-icon6,.is-style-icon7, .is-style-icon6-radius, .is-style-icon7-radius){
	border-width: 2px; /* 外枠の太さ */
}
/* スタイル6：ボックスの位置調整 */
.wp-block-cocoon-blocks-icon-box:where(.is-style-icon6,.is-style-icon6-radius){
	margin-left: 10px; /* 左側に余白 */
}
/* スタイル7：背景色なし */
.wp-block-cocoon-blocks-icon-box:where(.is-style-icon7, .is-style-icon7-radius){
	background-color: initial; /* 背景色なし */
}
/* スタイル7：ボックスの余白 */
.wp-block-cocoon-blocks-icon-box:where(.is-style-icon6,.is-style-icon7, .is-style-icon6-radius, .is-style-icon7-radius) {
	padding: 1.5em; /* 内側余白（上下左右） */
}
/* スタイル6・7 - アイコンのスタイル調整 */
.wp-block-cocoon-blocks-icon-box:where(.is-style-icon6,.is-style-icon7, .is-style-icon6-radius, .is-style-icon7-radius)::before {
	display:grid; /* アイコンを中央揃え */
	place-content:center; /* アイコンの配置を中央揃え */
	margin: 0; /* 余白なし */
	padding:0; /* パディングなし */
	width: 2em; /* アイコンの幅 */
	height:2em; /* アイコンの高さ */
	border-right: 0; /* 右側のボーダーなし */
	border-radius: 99px; /* アイコン背景の角を丸く */
	font-size: .9em; /* アイコンのフォントサイズ */
	color: #fff; /* アイコンの色 */
	box-shadow: 0 0 0 2px #fff;
}

/* スタイル6：アイコンの位置調整 */
.wp-block-cocoon-blocks-icon-box:where(.is-style-icon6, .is-style-icon6-radius)::before {
	top: -15px; /* アイコンの上位置 */
	left: -10px; /* アイコンの左位置 */
}
/* スタイル7：アイコンの位置調整 */
.wp-block-cocoon-blocks-icon-box:where(.is-style-icon7, .is-style-icon7-radius)::before {
	top: -1em; /* アイコンの上位置 */
	left: .75em; /* アイコンの左位置 */
}

/* 種類別のアイコン背景色設定（スタイル6・7） */
.information-box:where(.is-style-icon6,.is-style-icon7, .is-style-icon6-radius, .is-style-icon7-radius)::before {
    background-color: #87cefa; /* 情報(i)の背景色 */
	content: "\f129";/*アイコン変更*/
}
.question-box:where(.is-style-icon6,.is-style-icon7, .is-style-icon6-radius, .is-style-icon7-radius)::before {
    background-color: gold; /* 質問(?)の背景色 */
	content: "\3f";/*アイコン変更*/
}
.alert-box:where(.is-style-icon6,.is-style-icon7, .is-style-icon6-radius, .is-style-icon7-radius)::before {
    background-color: #f3aca9; /* アラート(!)の背景色 */
	content: "\21";/*アイコン変更*/
}
.memo-box:where(.is-style-icon6,.is-style-icon7, .is-style-icon6-radius, .is-style-icon7-radius)::before {
    background-color: #7ad0b6; /* メモの背景色 */
}
.comment-box:where(.is-style-icon6,.is-style-icon7, .is-style-icon6-radius, .is-style-icon7-radius)::before {
    background-color: #999; /* コメントの背景色 */
}
.ok-box:where(.is-style-icon6,.is-style-icon7, .is-style-icon6-radius, .is-style-icon7-radius)::before {
    background-color: #3cb2cc; /* OKの背景色 */
}
.ng-box:where(.is-style-icon6,.is-style-icon7, .is-style-icon6-radius, .is-style-icon7-radius)::before {
    background-color: #dd5454; /* NGの背景色 */
}
.good-box:where(.is-style-icon6,.is-style-icon7, .is-style-icon6-radius, .is-style-icon7-radius)::before {
    background-color: #98e093; /* GOODの背景色 */
}
.bad-box:where(.is-style-icon6,.is-style-icon7, .is-style-icon6-radius, .is-style-icon7-radius)::before {
    background-color: #eb6980; /* BADの背景色 */
}
.profile-box:where(.is-style-icon6,.is-style-icon7, .is-style-icon6-radius, .is-style-icon7-radius)::before {
    background-color: #999; /* プロフィールの背景色 */
}

/* コメント・プロフィールボックス背景色設定 --------------------------------- */
:where(.comment-box, .profile-box):where(.is-style-icon2, .is-style-icon4, .is-style-icon5) {
	background-color: #f8f8f8; /* 背景色をグレーに設定 */
}

/* モバイル調整 -------------------------------------------------------- */

/* 480px以下の画面幅用設定 */
@media screen and (max-width: 480px) {
	/* スタイル2・3の内側余白（モバイル用） */
	.wp-block-cocoon-blocks-icon-box:where(.is-style-icon1,.is-style-icon2, .is-style-icon3, .is-style-icon1-radius, .is-style-icon2-radius, .is-style-icon3-radius) {
		padding: 1em 1.5em 1em 3.5em; /* 内側余白（上・右・下・左） */
	}
	/* スタイル4・5の内側余白（モバイル用） */
	.wp-block-cocoon-blocks-icon-box:where(.is-style-icon4, .is-style-icon5) {
		padding: 1em 1.5em 1em 3em; /* 内側余白（上・右・下・左） */
	}
	/* アイコン位置（モバイル用） */
	.wp-block-cocoon-blocks-icon-box:where(.is-style-icon1,.is-style-icon2, .is-style-icon3, .is-style-icon1-radius, .is-style-icon2-radius, .is-style-icon3-radius, .is-style-icon4, .is-style-icon5)::before {
		top: 50%; /* 縦の中央揃え */
		left: 5px; /* 左位置調整 */
		margin-left: 0;
		width: 35px; /* アイコンの幅 */
	}
	/* スタイル1・2・3 - アイコン横の線（モバイル用） */
	.wp-block-cocoon-blocks-icon-box:where(.is-style-icon1,.is-style-icon2, .is-style-icon3, .is-style-icon1-radius, .is-style-icon2-radius, .is-style-icon3-radius)::before {
		border-right: 1px solid; /* アイコン横に線を追加 */
	}
}