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

/* ==========================================
   共通設定（パーツ・ボタンなど）
   ========================================== */

/* スマホで表示しない処理 */
.sp-only {
  display: none;
}

/* ヘッダーの幅と高さを指定 */
.header-container-in {
    max-width: 1024px;
	height: 70px !important;
}

/* ロゴの高さを指定 */
.site-logo-image {
	max-height: 70px !important;
}

/* ロゴを左端に配置 */
.logo-menu-button {
	justify-content: flex-start !important;
	cursor: none !important;
}

/* ナビメニューのメインテキスト */
.nav_main_text {
	font-weight: bold;
}

/* ナビメニューのサブテキスト */
.nav_sub_text {
    opacity: 0.5;
    font-weight: 400;
    font-size: 0.75em;
}

/* ナビメニューのホバー */
.navi-in a:hover {
  color: #E6C35C !important;
}

/* スライドメニューアイコンの色 */
.navi-menu-button {
	color: #E6C35C !important;
}

/* スライドメニューアイコンの大きさ */
.navi-menu-icon {
	font-size: 22px !important;
}

/* スライドメニューアイコン下部の文字を消去 */
.navi-menu-caption {
	display: none !important;
}

/* スライドメニューの背景色と位置 */
.navi-menu-content {
	background-color: #FAF9F5 !important;
	left: unset;
	right: 0;
	-webkit-transform: translateX(105%); */
    transform: translateX(105%);
}

/* スライドメニューの幅 */
.menu-content {
	max-width: 200px !important;
}

.mobile-header-menu-buttons {
	background-color: #fffdf5;
}

/* Googleプレイストアのバッジの非表示 */
.google-play-badge {
    display: none !important;
}

/* テキストで強調したい部分の処理 */
.text_emphasis {
    font-weight: bold;
    background: linear-gradient(transparent 60%, #e6c35c 60%);
}

/* センタリング処理 */
h1, .cf-turnstile {
    text-align: center;
}

/* タイトルのデザイン */
.category-howto-post h1.entry-title, .type-page h1.entry-title {
    border: 1px solid var(--cocoon-box-border-color);
    position: relative;
    width: fit-content;
    margin: 0 auto;
    padding: 10px 20px !important;
    background-color: #e6c35c;
}

/* タイトルの疑似デザイン */
.category-howto-post h1.entry-title::after, .type-page h1.entry-title::after {
    border: 1px solid var(--cocoon-box-border-color);
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 100%;
    height: 100%;
}

/* h2タグの背景の色 */
.article:not(.post-28) h2 {
    background-color: #e6c35c !important;
}

/* 見出しタグの枠線の色 */
.article:not(.post-28) h3, .article:not(.post-28) h4, .article:not(.post-28) h5 {
    border-color: #e6c35c !important;
}

input[type=submit] {
	background-color: #e6c35c !important;
}

@media screen and (max-width: 1023px){
	.site-logo-image {
		max-height: 60px !important;
	}
	body:where(.mblt-header-mobile-buttons, .mblt-header-and-footer-mobile-buttons) {
		margin-top: 0px !important;
	}
	.header-container-in {
		height: 60px !important;
	}
}

@media screen and (max-width: 768px) {
	.pc-only {
		display: none;
	}
	.sp-only {
		display: inline;
	}
}

@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	    .navi-footer-in > .menu-footer li.menu-item {
        width: 100% !important;
    }
}


/* ==========================================
   トップページ専用
   ========================================== */

/* メインビジュアル内のメインテキスト */
.header_main_text {
    text-shadow: 1px 1px 5px rgb(239 221 82 / 50%);
}

/* メインビジュアル内のサブテキスト */
.header_sub_text {
    text-shadow: 0px 0px 10px rgb(0 0 0);
}

/* 見出しのデザイン */
.headline_text {
	font-size: 36px !important;
	padding-bottom: 0 !important;
}

/* あつレピについてのコンテントボーダー */
.about_text_border, .about_point_content{
    box-shadow: 0px 0px 7px 1px rgb(0 0 0 / 20%);
    border-radius: 10px;
    padding: 30px;
    background-color: white;
    border: none;
}

/* FAQのテキストカラー */
.faq-question-content {
    color: #333333;
}

/* FAQの開閉ボタンの色 */
.is-style-accordion > .faq > .faq-question::before {
    color: black;
}

/* 使い方の各記事の外枠 */
.article-card {
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* 使い方の各記事のリンク部分 */
.article-card a {
	color: black !important;
	text-decoration: none !important;
}

/* 使い方の各記事のリンクを全体に拡張する */
.article-card a::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
}

/* 使い方の各記事のホバー処理 */
.article-card:hover {
  transform: translateX(4px) translateY(4px);
  cursor: pointer;
	box-shadow: none !important;
}

/* 使い方の大枠ボックス */
.border-box-section {
	position: relative;
	border: 2px solid #C5A059;
	border-radius: 12px;
	padding: 60px 24px 40px 24px;
	margin-top: 30px;
}

/* 使い方のサブテキスト */
.headline_sub_text {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 5px 16px !important;
	margin: 0;
	font-size: 22px !important;
	font-weight: bold;
	color: #333333;
	white-space: nowrap;
}

@media screen and (max-width: 768px) {
	
	/* メインビジュアル内のメインテキスト */
	.header_main_text {
		font-size: 34px !important;
	}
	/* メインビジュアル内のサブテキスト */
	.header_sub_text {
		font-size: 18px !important;
	}
	/* 見出しのデザイン */
	.headline_text {
		font-size: 26px !important;
	}	
	/* 使い方のサブテキスト */
	.headline_sub_text {
		font-size: 18px !important;
	}
	
	.border-box-section {
		padding-top: 50px;
	}
}