@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* アプリーチ */
.appreach {
  text-align: left;
  padding: 10px;
  border: 1px solid #7C7C7C;
  overflow: hidden;
}
.appreach:after {
  content: "";
  display: block;
  clear: both;
}
.appreach p {
  margin: 0;
}
.appreach a:after {
  display: none;
}
.appreach__icon {
  float: left;
  border-radius: 10%;
  overflow: hidden;
  margin: 0 3% 0 0 !important;
  width: 25% !important;
  height: auto !important;
  max-width: 120px !important;
}
.appreach__detail {
  display: inline-block;
  font-size: 20px;
  line-height: 1.5;
  width: 72%;
  max-width: 72%;
}
.appreach__detail:after {
  content: "";
  display: block;
  clear: both;
}
.appreach__name {
  font-size: 16px;
  line-height: 1.5em !important;
  max-height: 3em;
  overflow: hidden;
}
.appreach__info {
  font-size: 12px !important;
}
.appreach__developper, .appreach__price {
  margin-right: 0.5em;
}
.appreach__posted a {
  margin-left: 0.5em;
}
.appreach__links {
  float: left;
  height: 40px;
  margin-top: 8px;
  white-space: nowrap;
}
.appreach__aslink img {
  margin-right: 10px;
  height: 40px;
  width: 135px;
}
.appreach__gplink img {
  height: 40px;
  width: 134.5px;
}
.appreach__star {
  position: relative;
  font-size: 14px !important;
  height: 1.5em;
  width: 5em;
}
.appreach__star__base {
  position: absolute;
  color: #737373;
}
.appreach__star__evaluate {
  position: absolute;
  color: #ffc107;
  overflow: hidden;
  white-space: nowrap;
}

/* 広告表示*/
.c-prNotation[data-style=small] {
	color: #333333;
	border: initial;
	font-size: 12px;
}

/* 目次ハイライト */
a.p-toc__link.current {
    background-color: #f4f3f9; /* 薄い背景 */
    color: #000000; /* 黒のテキスト */
    border-left: 2px solid #e8e6f3; /* 左側に薄い線 */
    padding-left: 4px; /* 左側の内側余白を追加 */
}
/* reCaptcha バッジを非表示 */
.grecaptcha-badge {
visibility: hidden;
}

/*ポチップ yahooショッピング非表示*/
.pochipp-box__btnwrap.-yahoo {
    display: none;
}
/*** 目次・投稿リスト・ボタン・ブログカード以外のリンク ホバー時に青色 ***/
div.post_content a:hover:not(.p-toc__link):not(.p-postList__link):not(.swell-block-button__link):not(.p-blogCard__title) {
  color: #1176d4; /* ホバー時に青色に変化 */
  text-decoration-color: #1176d4; /* 下線も青色に */
}
/* コメントエリア非表示 */
#comments {
    display: none;
}
/*moreボタン*/
.is-style-more_btn a {
    border-radius: 4px;
}
@keyframes arrowMove {
  0% {
    transform: translate(0, -50%);
  }
  50% {
    transform: translate(6px, -50%);
  }
  100% {
    transform: translate(0, -50%);
  }
}

.is-style-more_btn a:after {
    content: "\e930";
    font-family: icomoon;
    position: absolute;
    right: 1em;
    top: 50%;
    /* transformを個別に書くのではなく、アニメーションに任せる */
    animation: arrowMove 1.5s ease-in-out infinite;
}
/*FAQ アコーディオン化*/
/* 最小限のCSS - FAQブロックのアコーディオン機能 */

/* FAQ回答部分（閉じた状態） */
.faq_a {
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1); /* より滑らかなアニメーション */
    visibility: hidden;
    opacity: 0;
}

/* FAQ回答部分（開いた状態） */
.faq_a.open {
    max-height: 1000px; /* コンテンツに合わせて十分な高さ */
    visibility: visible;
    opacity: 1;
}

/* QとAマークの位置を揃える */
.swell-block-faq .faq_q:before,
.swell-block-faq .faq_a:before {
    position: absolute;
    left: 0.25em !important; /* 左側の位置を統一 */
    top: 0.75em !important;  /* 上部の位置を調整 */
}

/* 開閉アイコン（閉じた状態/プラス） */
.swell-block-faq__item .faq_q:after {
    content: "\e910"; /* プラスアイコン */
    font-family: icomoon !important;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s;
}

/* 開閉アイコン（開いた状態/マイナス） */
.swell-block-faq__item.open .faq_q:after {
    content: "\e912"; /* マイナスアイコン */
    transform: translateY(-50%) rotate(0deg);
}

/* クリック可能なスタイル */
.faq_q {
    cursor: pointer;
    position: relative;
    padding-right: 40px !important; /* テキストと開閉マークの間に余白を確保 */
}

/* FAQ質問と回答の内部テキストのパディング調整 */
.faq_q,
.faq_a {
    padding-left: 3em !important; /* QとAのアイコンの右側に十分なスペースを確保 */
}

/* レスポンシブ対応 - モバイル用 */
@media screen and (max-width: 599px) {
    /* モバイルでの開閉アイコンの位置調整 */
    .swell-block-faq__item .faq_q:after {
        right: 10px;
    }
    
    /* モバイルでのテキスト調整 */
    .faq_q {
        padding-right: 30px !important;
        word-break: break-word; /* 長い単語の改行を許可 */
    }
}