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

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

:root {
  --natu-color-gray: #E3DDD9;
}

.header-container, .footer {
    background-color: transparent;
}

/* 親要素：基準点として設定 */
.header-container {
  position: relative;
}
/* 子要素：中央に配置 */
.tagline {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap; /* テキストを改行させない場合 */
  z-index: 3;         /* ロゴより前面に表示 */
  margin: 0;
  pointer-events: none; /* 下にあるロゴをクリック可能にする */
  color: var(--natu-color-gray);
}

.navi {
    background-color: transparent;
	background-image: url("../../uploads/2026/01/tape.png");
}
.navi-in a {
    color: var(--cocoon-white-color);
}
.navi-in a:hover {
    background-color: transparent;
    color: var(--cocoon-white-color);
	text-decoration: underline;
}
.main {
	background-image: url("../../uploads/2026/01/grid.gif");
}

.a-wrap:hover {
    background-color: var(--cocoon-white-color);
}

.wp-block-image img {
    border: 2px solid var(--cocoon-grey-color);
    margin: 0 auto;
    width: auto;
}

.source-org.copyright {
  color: var(--natu-color-gray);
}

/* 記事内 ------------------------ */
/* PR表記 */
.pr-text {
    font-size: 70%;
    text-align: center;
}

/* 縦型ステップUIのスタイル */
.step-flow-wrapper {
  margin: 2em 0;
}

.step-flow-wrapper .step-flow {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
  counter-reset: step-counter; /* カウンターの初期化 */
  position: relative;
}

/* 左側の縦線 */
.step-flow-wrapper .step-flow .step-flow__item::after {
  content: "";
  position: absolute;
  top: 15px; /* 最初の丸の少し下から */
  bottom: 0;
  left: 14px; /* 丸の中心に合わせる */
  width: 2px;
  background-color: #e2e8f0;
}

.step-flow-wrapper .step-flow__item {
  position: relative;
  padding-left: 48px; /* 丸とテキストの余白 */
  margin-bottom: -5px;
  padding-bottom: 30px;
}

/* 最後のアイテムの下余白を消す */
.step-flow-wrapper .step-flow__item:last-child {
  margin-bottom: 0;
}
.step-flow-wrapper .step-flow__item:last-child::after {
  display: none;
}

/* 丸と数字 */
.step-flow-wrapper .step-flow__item::before {
  counter-increment: step-counter; /* カウンターを増やす */
  content: counter(step-counter);
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #333; /* サイトのテーマカラーに合わせて変えてくれ */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
  z-index: 1;
}

.step-flow-wrapper .step-flow__title {
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 0.2em;
  color: #333;
  line-height: 1.4;
}

.step-flow-wrapper .step-flow__desc {
  font-size: 0.95em;
  color: #555;
  line-height: 1.6;
  margin: 0;
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
	/*必要ならばここにコードを書く*/
	body:where(.mblt-header-mobile-buttons, .mblt-header-and-footer-mobile-buttons) {
		margin-top: 132px;
	}
	.tagline {
		position: initial;
		width: 100%;
		text-align: center;
		transform: none;
		padding: 15px;
		background-image: url("../../uploads/2026/01/tape.png");
	}
	.mobile-header-menu-buttons {
		box-shadow: none;
		background: url("../../uploads/2026/01/paper.jpg");
		color: var(--cocoon-white-color);
	}
	.home-menu-button.menu-button {
		background-image: url("../../uploads/2026/01/title_mb.png");
		width: 238px;
		height: 132px;
	}
	.home-menu-button.menu-button a {
		width: 238px;
		height: 132px;
	}
	span.home-menu-icon.menu-icon,
	span.home-menu-caption.menu-caption {
    	display: none;
	}
	.menu-content {
		background: url("../../uploads/2026/01/paper.jpg");
		color: var(--cocoon-white-color);
	}
	.menu-drawer a {
		color: var(--cocoon-white-color);
		text-decoration: none;
	}
	.menu-drawer a:hover {
		text-decoration: underline;
		background-color: transparent;
    	color: var(--cocoon-white-color);
	}
}

/*834px以下*/
@media screen and (max-width: 834px){
	/*必要ならばここにコードを書く*/
	main.main, div.sidebar {
        margin: 10px;
    }
}

/*480px以下*/
@media screen and (max-width: 480px){
	/*必要ならばここにコードを書く*/
	body:where(.mblt-header-mobile-buttons, .mblt-header-and-footer-mobile-buttons) {
		margin-top: 100px;
	}
	.tagline {
		padding: 8px;
		font-size: 11px;
	}
	.home-menu-button.menu-button {
        width: 180px;
        height: 100px;
		background-size: cover;
    }
	.home-menu-button.menu-button a {
        width: 180px;
        height: 100px;
    }
}