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

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

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

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

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

/************************************
** 検索窓CSS
************************************/
.header-in .search-and-history {
  position: absolute; 
  right: 5%;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* 検索フォーム全体 */
.header-in .search-box {
  position: relative;
  width: 280px;
}

/* 入力欄 */
.header-in .search-box input[type="text"] {
  width: 100%;
  padding: 8px 14px 8px 40px; /* ←虫眼鏡の分の余白 */
  font-size: 14px;
  background: #fff;
  border: 3px solid #cccccc;
  box-sizing: border-box;
}

/* 虫眼鏡ボタンを左端に内包させる */
.header-in .search-box .search-submit {
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  font-size: 20px;
  padding: 10px;
  cursor: pointer;
  color: #000;
}
.header-in .history-link-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;        /* 検索フォームの高さと合わせる */
  aspect-ratio: 1 / 1; /* 正円にする場合 */
  font-size: 20px;
  border-radius: 50%;
  border: 2px solid #0070cc;
  color: #0070cc;
  text-decoration: none;
}
.header-in .search-submit {
    left: 3px;
    right: auto;
    color: #000;
}

/* 1023px以上 */
@media screen and (max-width: 1023px) {
    .header-in .search-box{
        display: none;
    }
}
/* 1023px以上 */
@media screen and (max-width: 1023px) {
    .header-in .history-link-button{
        display: none;
    }
}



/* database用 */
.categoryid-3 .logo > a img {
visibility: hidden;
}

.categoryid-3 .logo > a .site-name-text {
display: inline-block;
background: url("http://kariya.jp/wp-content/uploads/kariya_logo3.png") no-repeat;
background-size: contain;
background-position: center;
	animation: skew 1s infinite linear alternate-reverse;	  
}

.categoryid-3 .navi {
    display: none;
}

a{
text-decoration: none;
}
li.has-small-font-size :hover{
	color: #000; 
	text-decoration: underline;
}
a.group-link :hover{ 
	color: #000; 
	text-decoration: underline;
}
/* グリッチテスト用 */
.categoryid-3 .entry-title{
	animation: skew 1s infinite linear alternate-reverse;
}

.categoryid-3 .wp-block-heading{
	animation: skew 1s infinite linear alternate-reverse;
}

.categoryid-3 .wp-block-image{
	
}

@keyframes skew {
  0% {
	opacity: 1;
    transform: none;
  }
  33% {
    transform: none;
  }
  33.3% {
    transform: skewX(30deg);
  }
  33.6% {
    transform: skewX(-30deg);
  }
  33.9% {
    transform: none;
  }
  66% {
    transform: none;
  }
  66.3% {
    transform: skewX(5deg);
  }
  66.6% {
    transform: skewX(-5deg);
  }
  66.9% {
    transform: none;
  }
  77% {
    transform: none;
  }
  77.3% {
    transform: skewX(15deg);
  }
  77.6% {
    transform: skewX(-15deg);
  }
  77.9% {
	opacity: .8;
    transform: none;
  }
}

@keyframes flash {
  0% {
    opacity: 1;
  }
  100% {
    opacity: .8;
  }
}

/************************************
** ページをフェードイン表示する
************************************/

.body {
	animation: fadein 1s forwards; /*アニメーション指定*/
}

@keyframes fadein {
	0% {opacity: 0.5} /*アニメーション開始時*/
	100% {opacity: 1} /*アニメーション終了時*/
}

.post-password-form {
  display: grid;
  grid-template-columns: 1fr 150px;
  grid-template-rows: 50px;
}
.post-password-form input[type="password"] {
  border:1px solid #39FF14;
  padding: 0 1em;
}
.post-password-form input[type="submit"] {
  border:none;
  color:#ffffff;
  background:#39FF14;
}
/************************************
** クラウドフォルダ用CSS
************************************/

.custom-login-container {
    background: rgba(255, 255, 255, 0.15);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
    text-align: center;
    max-width: 600px;
    width: 100%;
}
.custom-login-container h2 {
    margin-bottom: 20px;
}
.custom-input-group {
    margin-bottom: 15px;
}
.custom-input-group input {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
    outline: none;
    font-size: 16px;
}
.custom-input-group input::placeholder {
    color: #eee;
}
.custom-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #ff7849, #ff5722);
    border: none;
    border-radius: 5px;
    color: white;
    font-size: 18px;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 4px 10px rgba(255, 87, 34, 0.3);
}
.custom-btn:hover {
    background: linear-gradient(135deg, #ff5722, #e64a19);
}
.custom-error-message {
    color: #ff4444;
    margin-top: 10px;
}
/************************************
** クラウドフォルダ用CSS(icon)
************************************/
.custom-cloud-icons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 20px;
    padding: 20px;
    background: #f4f4f4;
    border-radius: 10px;
    max-width: 600px;
    margin: 0 auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.icon {
    text-align: center;
    background: white;
    padding: 15px;
    border-radius: 8px;
    transition: 0.3s;
}

.icon:hover {
    background: #e0e0e0;
}

.icon a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #333;
}

.icon img {
    width: 64px;
    height: 64px;
    margin-bottom: 8px;
}

.icon span {
    font-size: 14px;
    font-weight: bold;
}

/************************************
** メール検索フォーム 用CSS（改善版）
************************************/
.custom-mail-container {
    background: rgba(0, 0, 0, 0.5);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    text-align: center;
    max-width: 500px;
    width: 100%;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* タイトル */
.custom-mail-container div b {
    font-size: 20px;
    color: #ffffff;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
    display: block;
    margin-bottom: 15px;
}

/* 入力フィールド */
.custom-mail-input-group {
    margin-bottom: 15px;  /* 下にスペースを追加 */
}

.custom-mail-input-group input {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    outline: none;
    font-size: 16px;
    text-align: center;
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.2);
}

.custom-mail-input-group input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

/* ボタンデザイン */
.custom-mail-btn {
    width: 80%;
    padding: 14px;
    height: 50px;  /* 高さを調整 */
    background: linear-gradient(135deg, #1e88e5, #1565c0);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 18px;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 4px 15px rgba(30, 136, 229, 0.4);
    font-weight: bold;
    text-transform: uppercase;
}

.custom-mail-btn:hover {
    background: linear-gradient(135deg, #1565c0, #1e88e5);
    box-shadow: 0 6px 20px rgba(30, 136, 229, 0.6);
}

/* メールアドレスの出力エリア */
.custom-mail-result-box {
    margin-top: 20px;  /* ボタンとの間隔を広げる */
    padding: 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    color: #4db6ff;
    font-weight: bold;
    font-size: 18px;
    text-shadow: 0 0 5px rgba(77, 182, 255, 0.8);
    font-family: monospace;
    border: 1px solid rgba(77, 182, 255, 0.5);
    box-shadow: 0 0 10px rgba(77, 182, 255, 0.3);
    display: inline-block;
    max-width: 90%;
    text-align: center;
    transition: 0.3s;
}

/* ホバー時のエフェクト */
.custom-mail-result-box:hover {
    color: #80d8ff;
    text-shadow: 0 0 8px rgba(128, 216, 255, 1);
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 15px rgba(77, 182, 255, 0.5);
}

/************************************
** 削除データ復旧ツール専用CSS
** 
************************************/

.custom-restoration-container {
    background: linear-gradient(135deg, #1b2a40, #283e5b);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 140, 255, 0.3);
    text-align: center;
    max-width: 600px;
    width: 100%;
    color: #d6e6ff;
}

/* タイトルのスタイル */
.custom-restoration-container b {
    font-size: 20px;
    color: #ffffff;
    letter-spacing: 1px;
}

/* 入力グループの設定 */
.custom-restoration-container .custom-input-group {
    margin-bottom: 15px;
}

/* 入力フィールドのデザイン */
.custom-restoration-container .custom-input-group input {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 5px;
    background: rgba(0, 120, 255, 0.2);
    color: #ffffff;
    outline: none;
    font-size: 16px;
    text-align: center;
    transition: 0.3s;
}

.custom-restoration-container .custom-input-group input::placeholder {
    color: #b0c4de;
}

/* 入力欄のフォーカス時のエフェクト */
.custom-restoration-container .custom-input-group input:focus {
    background: rgba(0, 140, 255, 0.4);
    box-shadow: 0 0 10px rgba(0, 140, 255, 0.5);
}

/* 実行ボタンのデザイン */
.custom-restoration-container .custom-btn {
    width: 50%;
    padding: 12px;
    background: linear-gradient(135deg, #0057b8, #008cff);
    border: none;
    border-radius: 5px;
    color: white;
    font-size: 18px;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 4px 10px rgba(0, 140, 255, 0.3);
}

.custom-restoration-container .custom-btn:hover {
    background: linear-gradient(135deg, #008cff, #00a2ff);
    box-shadow: 0 4px 15px rgba(0, 140, 255, 0.5);
}

/* エラーメッセージのデザイン */
.custom-restoration-container #result {
    color: #ff4444;
    margin-top: 10px;
    font-size: 14px;
}

/* フォーム内の配置調整 */
.custom-restoration-container form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/************************************
** プログラム実行ツール専用CSS
************************************/

.custom-submit-container {
    background: linear-gradient(135deg, #0d0d0d, #1a1a1a);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.3);
    text-align: center;
    max-width: 500px;
    width: 100%;
    color: #d0d0d0;
    font-family: 'Courier New', Courier, monospace;
    position: relative;
    border: 2px solid rgba(255, 0, 0, 0.5);
}

/* タイトルのスタイル */
.custom-submit-container b {
    font-size: 20px;
    color: #ff4444;
    letter-spacing: 1px;
    text-shadow: 0 0 5px rgba(255, 0, 0, 0.8);
}

/* 入力グループの設定 */
.custom-submit-container .custom-input-group {
    margin-bottom: 15px;
}

/* 入力フィールドのデザイン */
.custom-submit-container .custom-input-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid rgba(255, 0, 0, 0.3);
    border-radius: 5px;
    background: rgba(30, 30, 30, 0.8);
    color: #ff4444;
    outline: none;
    font-size: 16px;
    text-align: center;
    transition: 0.3s;
    box-shadow: inset 0 0 10px rgba(255, 0, 0, 0.3);
    font-family: 'Courier New', Courier, monospace;
}

.custom-submit-container .custom-input-group input::placeholder {
    color: #8b0000;
}

/* 入力欄のフォーカス時のエフェクト */
.custom-submit-container .custom-input-group input:focus {
    background: rgba(50, 0, 0, 0.8);
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.7);
}

/* 実行ボタンのデザイン */
.custom-submit-container .custom-btn {
    width: 60%;
    padding: 12px;
    background: linear-gradient(135deg, #550000, #990000);
    border: none;
    border-radius: 5px;
    color: white;
    font-size: 18px;
    cursor: pointer;
    transition: 0.3s;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 10px rgba(255, 0, 0, 0.3);
    font-family: 'Courier New', Courier, monospace;
}

.custom-submit-container .custom-btn:hover {
    background: linear-gradient(135deg, #990000, #cc0000);
    box-shadow: 0 4px 15px rgba(255, 0, 0, 0.5);
}

/* エラーメッセージのデザイン */
.custom-submit-container #result {
    color: #ff4444;
    margin-top: 10px;
    font-size: 14px;
    text-shadow: 0 0 3px rgba(255, 0, 0, 0.6);
}

/* フォーム内の配置調整 */
.custom-submit-container form {
    display: flex;
    flex-direction: column;
    align-items: center;
}


/*ポップアップkeyword用CSS*/
/* WordPressカスタムCSS */
.custom-cloud-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.custom-folder_keyword {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(255, 255, 255, 0.2);
    cursor: pointer;
}

.custom-folder_keyword img {
    width: 80px;
    height: 80px;
    margin-bottom: 10px;
}

.custom-folder_keyword span {
    font-size: 16px;
    color: #000000;
}

.custom-popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
}

.custom-popup-container {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.95);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
    text-align: center;
    width: 90%;
    max-width: 400px;
    color: #000;
}

.custom-popup-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 16px;
    margin-bottom: 10px;
}

.custom-popup-button1 {
    width: 100%;
    padding: 10px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
}

.custom-popup-button1:hover {
    background: #0056b3;
}
.custom-popup-button2 {
    width: 100%;
    padding: 10px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
}

.custom-popup-button2:hover {
    background: #0056b3;
}

.custom-popup-button {
    width: 100%;
    padding: 10px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
}

.custom-popup-button:hover {
    background: #0056b3;
}

/* WordPressカスタムCSS */
.custom-cloud-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.custom-folder_treasure {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(255, 255, 255, 0.2);
    cursor: pointer;
}

.custom-folder_treasure img {
    width: 80px;
    height: 80px;
    margin-bottom: 10px;
}

.custom-folder_treasure span {
    font-size: 16px;
    color: #000000;
}

.custom-popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
}

.custom-popup-container {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.95);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
    text-align: center;
    width: 90%;
    max-width: 400px;
    color: #000;
}

.custom-popup-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 16px;
    margin-bottom: 10px;
}

.custom-popup-button {
    width: 100%;
    padding: 10px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
}

.custom-popup-button:hover {
    background: #0056b3;
}

/*クラウドフォルダのアイコン調整*/
.custom-cloud-icons {
    display: flex;
    flex-wrap: wrap; /* アイコンを折り返す */
    gap: 10px; /* アイコン間の余白 */
    justify-content: flex-start; /* 左寄せ */
}

.custom-cloud-icons .icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 120px; /* アイコンの幅 */
    margin: 5px;
}

.custom-cloud-icons .icon a {
    text-decoration: none;
    color: inherit;
}

.custom-cloud-icons .icon img {
    max-width: 100px; /* 画像の最大幅 */
    height: auto;
}

.custom-cloud-icons .icon span {
    color: #333 !important; /* 濃いグレー（元の色に近いはず） */
    opacity: 1; /* 透明度が影響しないように */
    filter: none; /* 不要なフィルターの影響をなくす */
}