@charset "UTF-8";



/* 肩書と写真 */
.testimonial {
    display: flex;                /* 横並びに配置 */
    align-items: flex-start;      /* 上寄せ(テキストを上揃え) */
    margin: 20px 0;
  }
  
  .thumbnail {
    flex-shrink: 0;              /* 画像が小さくならないように固定 */
    margin-right: 30px;          /* テキストとの隙間 */
  }
  
  .thumbnail img {
    width: 140px !important;
    height: 140px !important;
    object-fit: cover;
    border-radius: 50%;
  }
  
  
  .testimonial-content p {
    margin: 0 0 1em 0;           /* 段落間の余白 */
    line-height: 1.6;
  }

  



.custom-table2 {
    width: 100%;
    border-collapse: collapse;
}
.custom-table2 td {
    padding: 10px;
    vertical-align: middle;
}
.custom-table2 .image-cell {
    width: 30%;
    text-align: center;
    padding: 0px 20px 0px 0px;
    vertical-align: top;
}
.custom-table2 .image-cell img {
    width: 100%;
    height: auto;
}
.custom-table2 .text-cell {
    width: 50%;
    padding: 0px;
}



/* フォーム全体のデザイン */
.hs-form {
    background-color: #f7f7f7;  /* 薄いグレー */
    border-radius: 8px;         /* 角を少し丸くする */
    padding: 15%;               /* 余白を10%にする */
  }
  
/* タイトルのカスタマイズ */
.hs-form .hs-form-heading h2 {
    visibility: hidden; /* 元のタイトルを隠す */
    position: relative; /* ::afterを相対位置に配置するため */
    margin-bottom: 1em; /* 必要に応じて調整 */
}


/* フォーム全体を相対位置に設定 */
.hs-form {
    position: relative;
}

/* 新しいタイトルをフォームの先頭に追加 */
.hs-form::before {
    content: '開発のご相談'; /* 表示したいタイトル */
    display: block;
    ;
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 1em;
    color: #ff2200;
    text-align: center; /* タイトルを中央揃えに設定 */
}


.hs-form .hs-form-heading h2::after {
    content: '開発に関するご相談'; /* 表示したい文字列 */
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
    color: #333; /* テキストの色 */
    font-size: 1.5em; /* フォントサイズ */
    font-weight: bold; /* フォントの太さ */
}


.width-primary {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }

.footer-cta-container {
    width: 100%;
    height: 320px;
    background-color: #FF2200;
    background-image: url('https://wasshoi.sun-asterisk.com/wp-content/uploads/2024/11/asterisk-back.png');
    background-position: left center;
    background-repeat: no-repeat;
    background-size: auto;
    display: flex;
    align-items: center;
    color: #FFFFFF;
    padding: 0; /* ここ重要：paddingは中の .width-primary に任せる */
}

/* コンテンツのレイアウト設定 */
.footer-cta-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-left: 20px; /* ロゴに合わせて微調整 */
    padding-right: 20px;
}

.footer-cta-text h2 {
    margin: 0;
    font-weight: 600;
    letter-spacing: 0.2em;
    font-size: 36px;
}

.footer-cta-text p {
    margin-top: 10px;
    font-weight: 300;
    font-size: 14px;
    line-height: 1.5;
}

/* ボタンコンテナ */
.footer-cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* ボタンスタイル */
.footer-cta-button {
    background-color: rgba(255, 255, 255, 1);
    color: #FF0000;
    padding: 20px 40px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.3s ease;
}

/* ホバー時のスタイル */
.footer-cta-button:hover {
    background-color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    color: #FF0000;
}

/* 資料ダウンロードボタンの設定 */
.download-button::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #FF2200;
    background-image: url('https://wasshoi.sun-asterisk.com/wp-content/uploads/2024/11/cta-icon-1.png');
    background-size: 15px 15px;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 8px;
}

/* ご相談・お問い合わせボタンの設定 */
.contact-button {
    padding: 20px 40px 20px 0px;
}

.contact-button::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('https://wasshoi.sun-asterisk.com/wp-content/uploads/2024/11/cta-icon-arrow.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 8px;
}

.round-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #FF2200;
    background-image: url('https://wasshoi.sun-asterisk.com/wp-content/uploads/2024/11/cta-icon-2.png');
    background-size: 16px 16px;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 8px;
    align-self: center;
}

/* 上のボタン */
.footer-cta-button.download-button {
    padding: 20px 40px 20px 32px;
}

/* スマホ用のスタイル */
@media (max-width: 768px) {
    .footer-cta-container {
        flex-direction: column;
        height: auto;
        padding: 20px;
    }
    .footer-cta-content {
        display: flex;
        flex-direction: column; /* テキストの下にボタンを表示 */
        text-align: left;
        width: 100%;
    }
    .footer-cta-buttons {
        display: flex;
        flex-direction: column; /* スマホでもボタンを縦に並べる */
        gap: 15px;
        width: 100%;
        margin-top: 20px; /* ボタンの上にスペースを追加 */
    }
    .footer-cta-button {
        width: 100%; /* ボタンをコンテナの幅いっぱいに */
        box-sizing: border-box;
    }
}


#main-footer {
    font-size: 14px; /* フッター全体のテキストサイズ */
}

#main-footer a {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 12px; /* リンクテキストをさらに小さくする場合 */
}

#main-footer a:hover {
    color: #FFFFFF;
    text-decoration: underline;
}


.separator {
    border-top: 1px solid #ccc;  /* 上に薄いグレーの罫線 */
    margin-top: 50px;  /* 上に50pxの余白 */
    margin-bottom: 50px;  /* 下に50pxの余白 */
  }

.profile-txt {
    font-size: 12px !important;
    color: #666;  
    line-height: 1.8;
    margin-bottom: 50px !important;
    display: block !important;
  }


.caption {
    font-size: 12px !important;
    color: #666;  
    margin-bottom: 50px !important;
    display: block !important;
  }

  .caption-pic {
    font-size: 14px !important;
    color: #666;  
    margin-top: 10px !important;
    margin-bottom: 50px !important;
    display: block !important;
    text-align: center;
    font-weight: 300;
  }


.review-image-inner {
    float: left;
    margin-right: 30px;
    margin-bottom: 20px;
  }

  .review-image {
    width: 200px !important;
    height: auto !important;
  }
  
/* スマホ用のスタイル */
@media (max-width: 600px) {
    .review-image {
      width: 120px !important; /* スマホでは画像を小さく表示 */
      height: auto !important;
    }
  }

  .text-content {
    /* 追加のスタイルは不要です */
  }
  

.topics-categories {
    display: flex;
    flex-wrap: wrap; /* 折り返し可能にする */
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 20px;
}

.topics-categories a {
    display: inline-block; /* インラインブロックに変更 */
    text-decoration: none;
    color: #555555;
    padding: 2px 8px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
}

.topics-categories a:hover {
    background-color: #555555;
    color: #ffffff;
}


  .agile-table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed; /* Ensure columns are of fixed width */
    }
    .agile-table th, .agile-table td {
      border: 1px solid #ddd; /* Light gray border for clarity */
      padding: 10px; /* Space inside cells */
      text-align: left; /* Left align text */
      vertical-align: top; /* Align text to the top */
    }
    .agile-table td:first-child {
      width: 35%; /* Set the width of the first column to 40% */
    }
    .agile-table td {
      word-wrap: break-word; /* Ensure long text wraps */
    }



 .clean-table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed; /* Ensure columns are of fixed width */
    }
    .clean-table th, .clean-table td {
      border: 1px solid #ddd; /* Light gray border for clarity */
      padding: 10px; /* Space inside cells */
      text-align: left; /* Left align text */
      vertical-align: top; /* Align text to the top */
    }
    .clean-table td:first-child {
      width: 30%; /* Set the width of the first column to 30% */
    }
    .clean-table td {
      word-wrap: break-word; /* Ensure long text wraps */
    }


    .container {
      display: flex;
    }
    .image-container img {
      max-width: 675px; /* 1.5 times the original size of 450px */
      border: none; /* Remove border around the image */
    }
    .table-container {
      margin-left: 20px; /* Adjust the spacing between the image and the table as needed */
    }
    .book-info-table {
      width: 100%;
      border-collapse: collapse;
    }
    .book-info-table th, .book-info-table td {
      border: none; /* Remove all borders */
      padding: 8px;
      text-align: left;
      vertical-align: top;
    }
    .book-info-table .dashed-border td {
      border-top: 1px dashed lightgray; /* Add dashed border on top */
      border-bottom: 1px dashed lightgray; /* Add dashed border on bottom */
    }
    .book-info-table td:first-child {
      width: 30%; /* Make the first column 30% of the table width */
    }

  .custom-table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 2%;
    }
    .custom-table, .custom-table th, .custom-table td {
      border: 1px solid black;
    }
    .custom-table th, .custom-table td {
      padding: 8px;
    }
    .custom-table th {
      background-color: #f2f2f2;
      text-align: center;
    }
    .custom-table td {
      text-align: center;
    }
    .custom-table td:first-child {
      text-align: left;
    }



.cta-section {
    display: flex;
    justify-content: space-between;
	margin-top: 50px;
}
.cta-column {
    width: 48%;
    background: white;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    text-align: center;
}
.cta-column img {
    max-width: 100%;
    height: auto;
}z
.cta-button {
    margin-top: 20px;
}
.cta-button a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 20px;
    background: #ff2200;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    line-height: 1;
    margin-bottom: 15px;
}
.cta-button a .fa-arrow-circle-right {
    margin-right: 10px;
    vertical-align: middle; /* アイコンを中央揃え */
}


.cta-section2 {
    display: flex;
    justify-content: space-between;
	margin-bottom: 50px;
}
.cta-column2 {
    width: 48%;
    background: white;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    text-align: center;
}
.cta-column2 img {
    max-width: 100%;
    height: auto;
}



.title2 {
   font-size: 1.4rem;
   margin: 0;
   text-align: center;
}




/* 2列関連記事 */
.related_posts2 ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 30px;
    gap: 20px;
}

.post_list_item2 {
    flex: 0 0 48%;
    box-sizing: border-box;
    padding: ５px;
    display: flex;
    align-items: flex-start; /* テキストを上揃えに */
	margin-bottom: 12px;
}

.post_list_item2 .imgarea {
    flex: 0 0 38%; /* 画像エリアの幅を設定 */
    margin-right: 10px; /* 画像とテキストの間のマージン */
}

.post_list_item2 .imgarea img {
    width: 100%;
    height: auto;
    display: block; /* 画像をブロックレベル要素に */
}

.post_list_item2 .textarea {
    flex: 1; /* テキストエリアが残りのスペースを占有 */
}

.post_list_item2 .textarea h2.list_item_title {
    font-size: 0.8em !important; /* タイトルのフォントサイズを0.8emに設定 */
    color: #333 !important;
    margin: 0; /* タイトルのマージンをリセット */
    line-height: 1.2; /* タイトルの行間を調整 */
}

.post_list_item2 .textarea p {
    font-size: 14px;
    color: #666;
    margin: 0; /* 残りのテキストのマージンをリセット */
    padding-top: 5px; /* パディングで上部にスペースを確保 */
}

/* リンクのデフォルトとホバースタイルを一貫性を持たせる */
.post_list_item2 a,
.post_list_item2 a:hover,
.post_list_item2 a:focus,
.post_list_item2 a:active {
    color: #ff2200;
    text-decoration: none; /* すべての状態でアンダーラインを非表示に */
}

@media (max-width: 768px) {
    .post_list_item2 {
        flex: 0 0 100%;  /* 小さい画面で1列にする */
    }
}





.related_posts .related_post_list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* カラム間の隙間 */
    list-style: none; /* リストマーカーを削除 */
    padding: 0; /* リストのパディングを削除 */
    margin: 0; /* リストのマージンを削除 */
}

.related_posts .related_post_list_item {
    flex: 1 1 calc(50% - 20px); /* 2列分の幅を設定し、間隔を考慮 */
    box-sizing: border-box; /* パディングとボーダーを含めて計算 */
    margin-bottom: 20px; /* 下の隙間 */
    border: 1px solid #e0e0e0; /* ボーダーの追加 */
    padding: 10px; /* 内側の余白 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* スマホの対応 */
@media (max-width: 768px) {
    .related_posts .related_post_list_item {
        flex: 1 1 100%; /* モバイルでは1列 */
    }
}






.related_post_list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* カラム間の隙間 */
    list-style: none; /* リストマーカーを削除 */
    padding: 0; /* リストのパディングを削除 */
    margin: 0; /* リストのマージンを削除 */
}

.related_post_list_item {
    flex: 1 1 calc(50% - 20px); /* 2列分の幅を設定し、間隔を考慮 */
    box-sizing: border-box; /* パディングとボーダーを含めて計算 */
    margin-bottom: 20px; /* 下の隙間 */
    border: 1px solid #e0e0e0; /* ボーダーの追加 */
    padding: 10px; /* 内側の余白 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* スマホの対応 */
@media (max-width: 768px) {
    .related_post_list_item {
        flex: 1 1 100%; /* モバイルでは1列 */
    }
}

/* カテゴリーと日付の表示を調整 */
.textarea {
    display: flex;
    flex-direction: column;
}

.textarea p.post_date,
.textarea p.post_category {
    display: inline-block;
    margin: 0;
    padding: 0.2em 0.5em;
}

.textarea p.post_date {
    text-align: right;
    margin-left: auto;
}



/* 共通のカテゴリスタイル */
.post_category {
    font-size: 0.9em;
    font-weight: bold;
    color: #333; /* ボタンのテキストカラー */
    padding: 5px 10px; /* ボタンの内側余白 */
    border-radius: 5px; /* ボタンの角を丸める */
    display: inline-block; /* ボタン風に表示 */
    text-align: center; /* テキストを中央揃え */
    margin-right: auto; /* 左寄せ */
    margin-bottom: 10px; /* 下の余白 */
}

.post_category a {
    color: #333; /* ボタンのテキストカラー */
    text-decoration: none; /* リンクの下線を削除 */
}

/* page-template-page-topics にのみ適用する場合 */
.page-template-page-topics .post_category {
    color: #555; /* グレーカラー */
}

/* テキストエリアのスタイル */
.textarea p.post_date {
    text-align: right;
    margin-left: auto;
    margin: 0;
    padding: 0.2em 0.5em;
}

.textarea p.post_category {
    margin: 0;
    padding: 0.2em 0.5em;
    background-color: #f0f0f0;
    color: #555;
    border-radius: 3px;
    font-size: 0.9em;
    font-weight: bold;
}






/* カテゴリーと日付を同じ行に配置するためのスタイル */
.textarea .meta-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px; /* カテゴリーと日付の間に余白 */
}



.post_list_item .post_date {
    font-size: 0.8em !important;
    color: #888 !important; /* グレーカラー */
    margin-left: auto !important; /* 右寄せ */
}

/* メタ情報を同じ行に配置するためのスタイル */
.textarea .meta-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

/* スマホ対応のスタイル */
@media (max-width: 768px) {
    .post_list_item .imgarea img {
        width: 100%;
        height: auto;
    }
}




/* page-topics.php のみで適用されるスタイル */
.page-template-page-topics .side_on {
    display: flex;
    flex-direction: column;
}

.page-template-page-topics .side_on .left {
    width: 100%;
}

.page-template-page-topics .post_list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* カラム間の隙間 */
    list-style: none; /* リストマーカーを削除 */
    padding: 0; /* リストのパディングを削除 */
    margin: 0; /* リストのマージンを削除 */
}

/* 各記事のスタイルを調整 */
.page-template-page-topics .post_list_item {
    flex: 1 1 calc(33.333% - 20px); /* 3列分の幅を設定し、間隔を考慮 */
    box-sizing: border-box; /* パディングとボーダーを含めて計算 */
    margin-bottom: 20px; /* 下の隙間 */
    border: 1px solid #e0e0e0; /* ボーダーの追加 */
    padding: 10px; /* 内側の余白 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.page-template-page-topics .post_list .post_list_item:first-child {
    margin-top: 0px; 
}

.page-template-page-topics .imgarea {
    display: block;
    width: 100%;
    margin-bottom: 10px; /* 画像とテキストの間の余白 */
    text-align: center; /* 画像を中央揃え */
}

.page-template-page-topics .post_thumbnail {
    width: 100%; /* 画像をコンテナに合わせてリサイズ */
    height: auto;
}

.page-template-page-topics .textarea {
    display: flex;
    flex-direction: column;
    gap: 10px; /* 各テキスト要素間の隙間 */
}

.page-template-page-topics .post_date {
    font-size: 0.8em;
    color: #888; /* グレーカラー */
}


.page-template-page-topics .list_item_title {
    font-size: 1.2em;
    color: #333; /* ダークカラー */
}

.page-template-page-topics .bassui {
    font-size: 0.8em;
    color: #666; /* グレーカラー */
    flex-grow: 1;
}

.page-template-page-topics .readmore a {
    font-size: 0.9em;
    color: #0073aa; /* リンクカラー */
    text-decoration: underline; /* 下線 */
}

/* レスポンシブ対応 */
@media (max-width: 992px) {
    .page-template-page-topics .post_list_item {
        flex: 1 1 50%; /* タブレットでは2列 */
    }
}

@media (max-width: 768px) {
    .page-template-page-topics .post_list_item {
        flex: 1 1 100%; /* モバイルでは1列 */
    }
}



/* 親要素にフレックスボックスを使用して3列レイアウトを作成 */
.post_container .post_list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px !important; /* カラム間の隙間 */
    list-style: none !important; /* リストマーカーを削除 */
    padding: 0 !important; /* リストのパディングを削除 */
    margin: 0 0 20px 0 !important; /* リストのマージンを下部のみに適用 */
    margin-top: 30px !important; /* リストの上部に30pxの余白を追加 */
}


/* 各記事のスタイルを調整 */
.post_container .post_list_item {
    flex: 1 1 calc(33.333% - 20px) !important; /* 3列分の幅を設定し、間隔を考慮 */
    box-sizing: border-box !important; /* パディングとボーダーを含めて計算 */
    margin-bottom: 20px !important; /* 下の隙間 */
    border: 1px solid #e0e0e0 !important; /* ボーダーの追加 */
    padding: 14px !important; /* 内側の余白 */
    display: flex !important;
    flex-direction: column !important; /* 縦並びに変更 */
    align-items: flex-start !important;
}

.post_container .imgarea {
    display: block !important;
    width: 100% !important;
    text-align: center !important; /* 画像を中央揃え */
}

.post_container .post_thumbnail {
    width: 100% !important; /* 画像をコンテナに合わせてリサイズ */
    height: auto !important;
}

.post_container .textarea {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important; /* 各テキスト要素間の隙間 */
    width: 100% !important;
}

.post_container .post_date {
    font-size: 0.8em !important;
    color: #888 !important; /* グレーカラー */
	text-align: right;
}


.post_container .list_item_title {
    font-size: 1.2em !important;
    color: #333 !important; /* ダークカラー */
}

.post_container .bassui {
    color: #666 !important; /* グレーカラー */
}

.post_container .readmore a {
    font-size: 0.9em !important;
    color: #0073aa !important; /* リンクカラー */
    text-decoration: underline !important; /* 下線 */
}

/* レスポンシブ対応 */
@media (max-width: 992px) {
    .post_container .post_list_item {
        flex: 1 1 50% !important; /* タブレットでは2列 */
    }
}

@media (max-width: 768px) {
    .post_container .post_list_item {
        flex: 1 1 100% !important; /* モバイルでは1列 */
    }
}


.center-text {
    text-align: center;
}

.highlight {
    background: linear-gradient(transparent 50%,yellow 50%);
}

.external-link {
  color: gray;      /* テキストの色をグレーに設定 */
  font-size: 0.9em; /* テキストのサイズを小さめに設定 */
  text-decoration: none; /* デフォルトの下線を消す */
}

/* 外部リンクにホバー効果を追加 */
.external-link:hover {
  text-decoration: underline; /* ホバー時に下線を表示 */
}


/* ページネーションコンテナ */
body .nav-links {
    text-align: center;
    padding: 20px 0;
    margin-top: 40px;
}

/* 全てのページネーションリンク */
body .nav-links a, 
body .nav-links .page-numbers.current {
    display: inline-block;
    padding: 8px 16px;
    margin: 0 4px;
    background-color: #f4f4f4;
    color: #333;
    border: 1px solid #ddd;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

/* 現在のページ */
body .nav-links .page-numbers.current {
    background-color: #c3c3c3;  /* アクティブなページの背景色 */
    color: #fff;                /* アクティブなページの文字色 */
    border-color: #c3c3c3;      /* アクティブなページのボーダー色 */
}

/* ホバーとフォーカス時 */
body .nav-links a:hover,
body .nav-links a:focus,
body .nav-links .page-numbers.current:hover,
body .nav-links .page-numbers.current:focus {
    background-color: #e9ecef; /* ホバー時の背景色 */
    color: #000;               /* ホバー時の文字色 */
}

/* 無効なリンク（通常は「...」） */
body .nav-links .dots {
    color: #666;
}

/* 前へ、次へのテキスト */
body .nav-links .prev,
body .nav-links .next {
    font-weight: bold;
}





.related_posts ul {
    margin-top: 20px; /* 上部のマージンを20pxに設定 */
}


.banner {
    text-align: center; /* バナーを中央に配置 */
    margin-bottom: 10%; /* 下に5%のマージンを追加 */
}

.banner a {
    text-decoration: none; /* リンクの下線を削除 */
    border: none; /* リンクの枠線を削除 */
    outline: none; /* フォーカス時の枠線を削除 */
}

.banner img {
    max-width: 100%; /* バナー画像の最大幅を100%に設定 */
    height: auto; /* 高さを自動調整 */
    border-radius: 5px; /* 角を丸くする */
    display: block; /* 画像をブロック要素に設定 */
}

.banner a:hover img {
    border: none; /* マウスオーバー時に枠線を削除 */
    outline: none; /* マウスオーバー時にアウトラインを削除 */
}



.banner_square {
    text-align: center; /* バナーを中央に配置 */
    margin-bottom: 10%; /* 下に5%のマージンを追加 */
    margin-top: 10%; /* 下に5%のマージンを追加 */
}

.banner_square a {
    text-decoration: none; /* リンクの下線を削除 */
    border: none; /* リンクの枠線を削除 */
    outline: none; /* フォーカス時の枠線を削除 */
}

.banner_square img {
    max-width: 100%; /* バナー画像の最大幅を100%に設定 */
    height: auto; /* 高さを自動調整 */
    display: block; /* 画像をブロック要素に設定 */
}

.banner_square a:hover img {
    border: none; /* マウスオーバー時に枠線を削除 */
    outline: none; /* マウスオーバー時にアウトラインを削除 */
}




.category-title {
    margin-top: 5%;  /* 上に5%の余白 */
    margin-bottom: 5%;  /* 下に5%の余白 */
    font-size: 2em; /* デフォルトのフォントサイズ */
}

.category-description p {
    margin-bottom: 5%;  /* 下に5%の余白 */
    font-size: 1em; /* デフォルトのフォントサイズ */
}

.custom-sidebar {
    width: 25%;
    flex: none; /* サイドバーのサイズを固定 */
    margin-bottom: 5%;
}

.main-content {
    flex: 0 0 calc(100% - 300px); /* メインコンテンツの幅を調整 */
    max-width: calc(100% - 300px); /* メインコンテンツの最大幅を調整 */
}

@media (max-width: 768px) {
    .side_on {
        display: flex;
        flex-direction: column; /* 縦並びに変更 */
    }
    
    .category-title {
        margin-top: 5%;  /* 上に5%の余白 */
        margin-bottom: 5%;  /* 下に5%の余白 */
        font-size: 1.5em; /* スマホ用のフォントサイズを小さく */
    }

    .category-description p {
        margin-bottom: 5%;  /* 下に5%の余白 */
        font-size: 0.875em; /* スマホ用のフォントサイズを小さく */
    }

    .custom-sidebar {
        width: 100%;  /* サイドバーを全幅に */
        order: 2; /* サイドバーを2番目に表示 */
        margin-bottom: 2em; /* 下に余白 */
    }

    .main-content {
        width: 100%; /* メインコンテンツを全幅に */
        flex: none; /* フレックスの設定をリセット */
        max-width: 100%; /* 最大幅を全幅に */
        order: 1; /* メインコンテンツを1番目に表示 */
        margin-bottom: 2em; /* 下に余白 */
    }
}


/* カテゴリ一覧 */
.post-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.post_list_item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
}

.post_list_item .imgarea {
    margin-right: 15px;
}

.post_list_item .post_thumbnail {
    width: 280px;
    height: auto;
    object-fit: cover;
}

.post_list_item .textarea {
    flex: 1;
}

.post_list_item .list_item_title {
    font-size: 20px;
    margin: 0 0 10px;
    color: #333;
	line-height: 27px;
}

.post_list_item .bassui {
    font-size: 12px;
    color: #666;
}




/* Improved TOC CSS with !important */

/* TOC Container */
#toc_container {
    background: #fff;
    padding: 10px;
    margin-bottom: 1.5em;
    width: 100%;
    display: block;
    font-size: 16px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border: none;
}

/* TOC Title */
#toc_container p.toc_title,
.single-page-content #toc_container .toc_title {
    text-align: left;
    display: block;
    width: 100%;
    align-items: flex-start;
    color: #555555;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    margin-bottom: 12px;
    padding: 0;
    position: relative;
}

/* TOC List (top-level) */
#toc_container ul.toc_list {
    margin-left: 10px;
    list-style-type: none;
    margin-bottom: 0;
    margin-top: 7px;
    padding: 0;
    line-height: 1.6;
    letter-spacing: 0.05rem;
    color: #555555;
}

#toc_container ul.toc_list > li {
    font-size: 16px;
    font-weight: bold;
    position: relative;
    border-top: 1px solid rgba(47, 47, 47, 0.1);
    padding-bottom: 5px;
    padding-top: 5px;
}

/* TOC List (top-level) links */
#toc_container ul.toc_list > li > a {
    color: #555555;
    text-decoration: none;
    transition: font-weight 0.3s, text-decoration 0.3s;
    display: inline-block;
    width: 100%;
    padding: 2px 5px;
    box-sizing: border-box;
}

#toc_container ul.toc_list > li > a:hover {
    font-weight: bold;
    text-decoration: underline;
}

/* Nested TOC List */
#toc_container ul ul {
    margin-left: 10px;
}

#toc_container ul ul li {
    margin-bottom: 0;
    padding-top: 5px;
    padding-bottom: 5px;
    border-top: none;
    padding-left: 10px;
    position: relative;
    font-size: 14px;
    font-weight: normal;
    color: #555;
}

#toc_container ul ul li a {
    padding: 2px 12px;
    color: #555;
}

/* Bullet icon on nested list items only */
#toc_container ul ul li::before {
    content: '•';
    font-family: Arial, sans-serif;
    color: #000;
    margin-right: 8px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
}

/* Hide original TOC+ toggle if it exists */
#toc_container .toc_toggle {
    display: none;
}

/* Hidden part (for the “4 items + show more” approach) */
#toc_container .toc-hidden {
    display: none;
}

/* Fading overlay at the bottom */
#toc_container .toc-fade-overlay {
    height: 40px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    pointer-events: none;
    margin-top: -40px;
}

/* Center container for the toggle button */
#toc_toggle_btn_container {
    width: 100%;
    text-align: center;
    margin: 0 auto;
    position: relative;
}

/* “More/Close” toggle button */
#toc_toggle_btn_container .p-toc__expandBtn {
    background-color: #f7f7f7;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 5em;
    box-shadow: 0 0 0 1px #e3e3e3;
    color: #333;
    display: inline-block;
    font-size: 14px;
    line-height: 1.5;
    margin: 0.75em auto;
    min-width: 6em;
    padding: 0.5em 1em;
    position: static;
    text-align: center;
    cursor: pointer;
}

#toc_toggle_btn_container .p-toc__expandBtn:hover {
    box-shadow: 0 0 0 1px #999;
}

#toc_container ul.toc_list li a,
#toc_container ul.toc_list li a:link,
#toc_container ul.toc_list li a:visited,
#toc_container ul.toc_list li a:hover,
#toc_container ul.toc_list li a:active {
    color: #555;
    text-decoration: none;
}

#toc_container ul.toc_list > li {
  border-top: 1px solid rgba(47, 47, 47, 0.1);
  ...
}

/* 折りたたみ部分が ul.toc-hidden などの場合 */
#toc_container ul.toc-hidden > li {
  border-top: 1px solid rgba(47, 47, 47, 0.1);
  ...
}


#toc_container .toc-hidden > li {
    border-top: 1px solid rgba(47,47,47,0.1);
    padding: 10px 0;
    list-style-type: none; /* あるいは付けたいなら “disc” など */
    ...
  }
  
  #toc_container .toc-fade-overlay {
    position: relative;
    height: 120px;  /* フェードさせたい高さに調整 */
    margin-top: -120px;  /* リストの末端に重ねるために高さ分マイナス */
    pointer-events: none;  /* ユーザー操作を透過 */
    background: linear-gradient(
        to bottom, 
        rgba(255, 255, 255, 0),  /* 上端：透明（0） */
        rgba(255, 255, 255, 1)   /* 下端：白（1） */
    );
    /* 必要に応じて width:100%; なども設定 */
}


/* 特異性アップの例（#toc_container等のIDも絡める） */
#toc_container p.toc_title {
    text-align: center !important;
  }
  


  
  

/* CSS Document */
ul,ol{
    list-style-type:none;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px; 
    margin-inline-end: 0px;
    padding-inline-start: 0px;
}
li{
	list-style:none;
}

body.page,
body.archive,
body.single{
	background-color:#fff !important;
}
body.page-id-117,	
body.home{
	background-color:#fff !important;
}
body.is-active {
	overflow: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6,
p{
    display: block;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
.btn_a{
    background-color: #ff2301;
    position: relative;
    overflow: hidden;
    color: #fff;
    text-align: center;
    display: inline-block;
    text-align: center;
    margin: 0 auto;
    padding: 1em 3em;
    /* width: 300px; */
    max-width: 100%;
    color: #fff;
    font-size: 1em;
    z-index: 10;
}
.btn_a span{
    z-index: 12;
    position: relative;
}
.btn_a:after {
    content: "";
    position: absolute;
    right: -1em;
    height: 100%;
    width: 2.5em;
    display: block;
    background-color: #998675;
    mix-blend-mode: multiply;
    transform: skew(-10deg,0);
    top: 0;
    z-index: 11;
    transition: .2s;
}
.btn_a:hover{
	color:#fff;
	text-decoration:none;
}
.btn_a:hover:after {
    width: 150%;
}


#topics .btn {
    margin: 0 auto;
    display: block;
    max-width: 400px;
    padding: .6em;
}
#topics .btn{
    border-radius: 100px;
}
#topics{
	background-color:#f1f1f1;
}

#topics .container{
	padding:5rem 15px;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;}
#topics .title{
    text-align: center;
    margin: 0 auto 2rem auto;
    font-size: 2.4em;
}
#topics .post_list{
    margin-bottom: 4em;
}
.contents_title{
	display:flex;
	justify-content:center;
	align-items:center;
	background-color:#000;
    background: linear-gradient(135deg,#ee2660 0,#ed5347 31%,#ff6d07 100%);
	height:120px;
	color:#fff;
    font-size: 1.4em;
	margin-bottom:0;
    font-family: inherit;
    font-weight: 300;
	line-height:1;
	
    padding-top: 68px;
}
.post_container{
	margin:auto;
	max-width:1100px;
    padding: 3em 1.4em;
	box-sizing:border-box;
	padding-top:0;
	text-align:left;
}
.post_list{
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-start;
	font-size:16px;
	margin-bottom:0;
}
.post_list .post_list_item{
	width:calc(50% - 20px);*
	margin-right:40px;*
	margin-top:3em;
	width:100%;
	padding: 1em; 
}

/*.post_list li:nth-child(-n + 2){
	margin-top:0px;
}
.post_list li:nth-child(2n){
	margin-right:0;
}*/



.post_list_item {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
    justify-content: space-between;
    flex-direction: row; /* 初期設定では横並び */
    align-items: flex-start;
}

.list_item_title {
    font-size: 1.5em;
    margin-bottom: 0.5em;
    font-weight: 700;
    text-align: left; /* タイトルを左揃えに */
}

.post_thumbnail {
    width: 100%;
    display: block;
}

.post_list_item .imgarea {
    width: 280px;
    margin-right: 1em; /* 画像エリアとテキストの間に余白を追加 */
}

.post_list_item .textarea {
    width: calc(100% - 280px);
    box-sizing: border-box;
    padding: 0em;
}

.post_list_item .post_list_item_title {
    font-size: 1.6em;
    margin-bottom: .3em;
    border-bottom: solid 1px;
    padding-bottom: 0.2em;
    line-height: 1.6;
}

.post_list_item .post_tags {
    max-height: calc(.8em * 1.7 * 3 + 0.5em * 3);
    min-height: calc(10px * 1.7 * 3 + 0.5em * 3);
    overflow: hidden;
}

@media (max-width: 767.98px) {
    .post_list_item {
        flex-direction: column; /* 縦並びに変更 */
        align-items: flex-start; /* 縦並びでも左揃えに */
    }

    .post_list_item .imgarea {
        width: 100% !important; /* 画像エリアを全幅に */
        margin-right: 0; /* 縦並びでは余白をリセット */
    }

    .post_thumbnail {
        width: 100% !important; /* 画像を全幅に */
        height: auto !important; /* 高さを自動に */
    }

    .post_list_item .textarea {
        width: 100% !important; /* テキストエリアも全幅に */
        padding: 1em;
        text-align: left; /* テキストを左揃えに */
    }

    .list_item_title {
        font-size: 1.3em; /* スマホでフォントサイズを少し小さく */
    }
}




.post_list_item a,
.post_list_item a:hover,
.post_list_item a:visited,
.post_list_item a:link,
.post_list_item a:active{
	color:inherit;
	text-decoration:none;
}
.post_list_item p{
    font-size: 0.9em;
	line-height:1.4em;
	color: #666;
}
.screen-reader-text{
	display:none;
}
.side_on{
	display:flex;
	justify-content:space-between;
}
.side_on > .left{
	width:calc(100% - 340px);
}
.side_on > .right{
	width:300px;
}
.single_title,
.archive_title{
	line-height:1.4em;
	padding-bottom:10px;
	margin-bottom:0.5em;
	border-bottom:solid 1px;
	color:#000;
	/*font-size:2.5em;*/
}
.archive_title{
	margin-bottom:2em;
}
.post-categories{
	display:flex;
	justify-content:flex-start;
	flex-wrap:wrap;
}
.post_tags{
	display:flex;
	justify-content:flex-start;
	flex-wrap:wrap;
}
.post_tags li{
	margin-right:0.5em;
	margin-bottom:0.5em;
	color:#fff;
}
.post_tags a{
	display:block;
	color:#fff;
	background-color:#ff2100;
	border-radius:5px;
    display: block;
    font-size: 0.8em;
    padding: 0 0.5em;
	line-height:1.8;
}
.post_tags a:hover{
	text-decoration:none;
}
.post-categories{
	display:flex;
	justify-content:flex-start;
	flex-wrap:wrap;
	padding-inline-start: 0px;

}
.post-categories li{
	margin-right:0.5em;
	margin-bottom:0.5em;
}
.post-categories a{
	display:block;
    line-height: 1.4;
}
.bassui {
    height: calc(1em * 1.2);
    overflow: hidden;
    display: block;
    margin-bottom: 0;
    font-size: 0.9em; /* フォントサイズを小さく */
    color: #666; /* グレーカラー */
}

.readmore{
	display:flex;
	justify-content:flex-end;
    margin-top: 0.5em;
    margin-bottom: 0;
	color:#ff2100;
}
.post_list_item .readmore a{
	text-decoration:none;
	position:relative;
	display:block;
	padding-left:1em;
}
.post_list_item .readmore a:before{
	content:"";
    border-top: .3em solid transparent;
    border-right: .3em solid transparent;
    border-bottom: .3em solid transparent;
    border-left: 0.5em solid #ff2100;
	top:0;
	bottom:0;
	left:0;
	height:0;
	display:block;
	margin:auto;
	position:absolute;
}
.post_list_item .readmore a:hover{
	text-decoration:none;	
}

.section-topics .post_list{
	display:flex;
	justify-content:space-between;
	align-items:stretch;
}
.section-topics .post_list li{
	width:calc(33.33% - 60px / 3);
}
.section-topics .post_list li .post_tags{
	display:none;
}
.section-topics .post_list li{
	margin-top:30px;
	display:block;
}
.section-topics .post_list li:nth-child(-n + 3){
	margin-top:0px;
}
.section-topics .post_list_item .list_item_title{
    font-size: 1.3em;
    line-height: 1.4;
}
.section-topics .post_list_item .textarea{
	width:100%;
}
.section-topics .post_list_item .imgarea {
    width: 100%;
    position: relative;
    height: 0;
    padding-top: 55%;
    display: block;
	overflow:hidden;
}
.section-topics .post_thumbnail {
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
}


.post_container{
	font-size:16px;
}
.post_content {
	background-color:#fff;
	padding:1.0em;
}

.post_head{
	margin:auto;
	background-color:#fff;
	max-width:1200px;
	box-sizing:border-box;
	font-size:16px;
	padding:1em 0em  0em 1em;
}
.post_head .post-categories{
	margin-bottom:0;
}
.post_main p{
	margin-bottom:1em;
	line-height:1.8em;
    font-size: 16px;
    letter-spacing: 0.05em;
}
.post_main p:last-child{
	margin-bottom:0;
}
.post_main h2{
position: relative;
    font-size: 1.6em;
    font-weight: 900;
    line-height: 1.5em;
    margin-top: 2.5em;
    margin-bottom: 1em;
    background: #f5f5f5;
    padding: .65em 0.8em;
    color: #000;
    border-left: 5px solid #ff2200;
}

.post_main h2::before {
 position: absolute;
    content: "";
    top: -4px;
    left: 0;
    width: 100%;
    height: 10px; // 具体的な高さでテスト
    background-color: red; // ここを再度使用して視認性を確認
}

@media (max-width: 768px) {
    .post_main h2 {
        font-size: 1.4em;
        line-height: 1.5em;
        border-left: 1px solid #ff2200;
        background: #ffffff;
        padding: .4em 0.8em;
        margin-top: 2em;
    }
}


.post_content h3 {
    color: #000000;
    font-weight: 500;
    font-size: 1.6em;
    position: relative;
    border: none;
    padding-bottom: 0.5em;
}


.post_main h4{
	font-size:1.4em;
	line-height:1.4em;
	margin-top:1.5em;
	margin-bottom:0.75em;
	color:#ff2100;
    font-weight: 400;
}
.post_main h5{
	font-size:1.2em;
	line-height:1.4em;
	font-weight: 600;
	margin-top:1.5em;
	margin-bottom:1em;
	padding-left:0.5em;
	border-left:0.2em solid;
}
.post_main h6{
	font-weight:900;
	font-size:1.2em;
	line-height:1.4em;
	margin-top:1.5em;
	margin-bottom:1em;
}
.post_main h2:first-child,
.post_main h3:first-child,
.post_main h4:first-child,
.post_main h5:first-child,
.post_main h6:first-child{
	margin-top:0;
}
.post_main ul,
.post_main ol{
	margin-bottom:2em;
    margin-left: 2em;
}
.post_main li{
	margin-bottom:0.5em;
}
.post_main ul li:last-child{
	margin-bottom:0;
}
.post_main ul li{
	list-style:disc;
}
.post_main ol li{
	list-style:decimal;
}

.recommend_area_title{
	line-height:1.4em;
	padding-bottom:0.5em;
	margin-bottom:2em;
	margin-top:4em;
	border-bottom:solid 1px;
	color:#000;
	font-size:1.8em;
}


/* Updated CSS */
.side_contents {
    position: -webkit-sticky;
    position: sticky;
    top: 90px;
	 width: 100%;
}

.side_navi {
    padding: 1em;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	 margin-bottom: 20%;
     margin-top: 5%;
}

.side_navi a,
.side_navi a:visited,
.side_navi a:link,
.side_navi a:active {
    color: #555;
    text-decoration: none;
    display: block;
    position: relative;
    transition: color 0.1s, background-color 0.1s, box-shadow 0.1s;
    padding: 2px 12px; /* Default padding */
}

.side_navi a:hover {
    color: #555 !important; /* Ensure text color remains the same on hover */
    background-color: #e9ecef; /* Background color on hover */
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 -1px 3px rgba(0, 0, 0, 0.1); /* Add top and bottom shadow */
}

.side_navi dt {
    margin-bottom: 0.5em;
    margin-top: 2em;
    font-weight: bold;
    color: #333;
}

.side_navi dt:first-child {
    margin-top: 0em;
}

.side_navi dd {
    line-height: 1.6;
    padding-left: 1em;
    margin-bottom: 1em;
}

.side_navi dd.side_tags {
    padding-left: 0;
    margin-bottom: 20px;
}

.side_navi li {
    list-style-type: none;
}

.side_navi p {
    font-size: 12px;
    color: #555;
	 margin-left: 12px;
}




.nav-links{
	display:flex;
	margin-top:4em;
}
.nav-links > div{
	width:100%;
	flex-shrink:1;
	display:flex;
}
.nav-links > div.nav-previous{
	padding-right:2em;
	padding-bottom:2em;
	justify-content:flex-start;
}
.nav-links > div.nav-next{
	padding-left:2em;
	padding-bottom:2em;
	justify-content:flex-end;
}

.navigation{
	color:#000;
}
.navigation a,
.navigation a:visited,
.navigation a:link,
.navigation a:active,
.navigation a:hover{
	color:inherit;
}
.single_date{
}
.single_title, .archive_title {
    font-size: 2.2em;
    font-weight: 600;
    border-bottom: solid 1px #dedede;
    padding: 0 0 0.5em;
}

@media (max-width: 768px) {
    .single_title, .archive_title {
        font-size: 1.5em;
    }
}

.pnkz{
	 color:#555;
	 display:flex;
	 justify-content:flex-start;
	 flex-wrap:wrap;
    padding: .5em 0;
	font-size: 12px
}
.pnkz a,
.pnkz p{
	margin-right:0.5em;
	margin-bottom:0;
}
.pnkz a,
.pnkz a:hover,
.pnkz a:active,
.pnkz a:visited,
.pnkz a:link{
	color:inherit;
	text-decoration:none;
}
.pnkz a{
	text-decoration:line-through;
}
.post_head .post-categories{
display:none;
}
.post_container{
max-width:1200px;
}
.post_content{
  position:relative;
}
.post_content img{
   width:100%;
   height:auto;
   margin-top: 2%;
}

.post_content h3{
color:#000000;
font-weight:500;
font-size:1.6em;
position:relative;
border:none;
padding-bottom:0.6em;
margin-top:1.5em;
	margin-bottom:0.9em;
}
@media (max-width: 768px) {
    .post_content h3 {
        font-size: 1.5em;
		   margin-top:0.8em;
		   margin-bottom:0.8em;
    }
}


.post_content h3::before {
    content: "";
    height: 2px;
    width: 100%; /* 横幅を100%に設定して、要素の幅全体に適用 */
    display: block;
    position: absolute;
    bottom: 0;
    background: linear-gradient(
        90deg, 
        #ff2100 0%,      /* 赤色部分開始 */
        #ff2100 10%,     /* 赤色の終わり、10%に変更 */
        rgba(102, 102, 102, 0.2) 10% /* グレー色の開始、透明度を0.2に設定 */
    );
}


.toukoubi,.updatebi{
font-size:0.8em;
font-weight:400;
color:#9c9c9c;
margin-bottom:0;
}
.toukoubi{
margin-right:0px;
}
.dateposition{
display:flex;
justify-content:flex-end;
}


.side_download{
    position: relative;
    background-color: #FF2200;
    padding:1em;
	color:#fff;
	margin-top:16px;
    font-size: 0.9em;
}
.side_download .download_btn{
    position: relative;
    overflow: hidden;
    z-index: 10;
    display: block;
    background-color: #fff;
    color: #ff2100;
	max-width:100%;
    font-weight: 700;
    text-align: center;
    margin-top: 2em;
    padding: 1em;
    box-sizing: border-box;
    background-image: url(images/icon_dl2.png);
    background-position: left 1em bottom -2px;
    background-repeat: no-repeat;
    background-size: auto 75%;
}
.side_download .download_btn span{
    z-index: 12;
    position: relative;
}

.side_download .download_btn:after {
    content: "";
    position: absolute;
    right: -30px;
    height: 100%;
    width: 50px;
    display: block;
    background-color: #998675;
    mix-blend-mode: multiply;
    transform: skew(-10deg, 0);
    top: 0;
    z-index: 11;
    transition: 0.2s;
}

.side_download .download_btn:hover {
    color: #fff;
	text-decoration:none;
}

.side_download .download_btn:hover:after {
    width: 150%;
}
.contact_area{
	display:flex;
	justify-content:space-around;
	align-items:center;
	flex-wrap:wrap;
	margin-top:2em;
}
.contact_area .left{
	text-align:center;
	width:50%;
	padding-right:2em;
	box-sizing:border-box;
}
.contact_area .right{
	text-align:center;
	width:50%;
    min-width: 330px;
}
.contact_area .right .btn_a{
	margin-top:2em;
	margin-bottom:2em;
    padding: 1em 2em;
	width:100%;
	word-break:keep-all;
}
@media (max-width:768px){
.contact_area .right{
    min-width: 0px;
}
}
@media (max-width:500px){
	.contact_area{
		display:block;
	}
.contact_area .left{
	width:100%;
}
.contact_area .right{
	width:100%;
}
.contact_area .right .btn_a{
	margin-bottom:0;
	width:auto;
    padding: 1em 3em;
}
}


.updatebi,
.toukoubi{
	position:relative;
	padding-left:1.5em;
}
.updatebi:before,
.toukoubi:before{
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	margin:auto;
	content:"";
	width:1em;
	height:1em;
	display:block;
	background-color:#9c9c9c;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: url(images/icons/pen.svg);
    mask-image: url(images/icons/pen.svg);
 -webkit-mask-position: center;
 mask-position: center;
}

.updatebi:before{
    -webkit-mask-image: url(images/icons/update.svg);
    mask-image: url(images/update.svg);
}

.nav-links .nav-previous{
	position:relative;
	padding-left:1.5em;
	font-weight:700;
}

.nav-links .nav-next{
	position:relative;
	padding-right:1.5em;
	font-weight:700;
}
.nav-links .nav-next:before{
	right:0;
    -webkit-mask-image: url(images/icons/next.svg);
    mask-image: url(images/icons/next.svg);
}
.post_tags a{
	padding-left:1.6em;
	position:relative;
}
.single_title{
    font-weight: 600;
}
.post_tags a:before{
	position:absolute;
	top:0;
	left:0.5em;
	bottom:0;
	margin:auto;
	content:"";
	width:0.8em;
	height:0.8em;
	display:block;
	background-color:#fff;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: url(images/icons/tag.svg);
    mask-image: url(images/icons/tag.svg);
 -webkit-mask-position: center;
 mask-position: center;
}
.post_main h4.check{
    position: relative;
    font-size: 1.2em;
    line-height: 1.4em;
    margin-top: 1.5em;
    margin-bottom: .75em;
    color: #000;
    font-weight: 600;
    padding-left: 30px;
}
h4.check:before{
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	margin:auto;
	content:"";
	width:1.4em;
	height:1.4em;
	display:block;
	background-color:red;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: url(images/icons/check.svg);
    mask-image: url(images/icons/check.svg);
 -webkit-mask-position: center;
 mask-position: center;
}
.twocolumn{
    display: flex;
    justify-content: space-between;
    align-items:flex-start;
    margin-bottom: 10px;
}
.twocolumn div.left{
    width: 30%;
}
.twocolumn div.right{
    width: 65%;
}
blockquote {
    margin: 0 0 0rem;
    background: #f1f1f1;
    padding: 1.5em;
    border-radius: 5px;
    margin-bottom: 1em;
    color: #8c8c8c;
	position:relative;
}
blockquote {
	position:relative;
	z-index:10;
}
blockquote:after,
blockquote:before{
content:"";
color:#DDDDDD;
	position:absolute;
	z-index:1;
	background-image:url(images/inyou.png);
	background-position:center;
	background-size:contain;
	background-repeat:no-repeat;
	opacity:0.1;
    height: 5em;
    width: 5em;
}
blockquote:before{
	top:2em;
	left:2em;
}
blockquote:after{
	bottom:2em;
	right:2em;
	transform:rotate(180deg);
}


@media (max-width: 768px) {
    .side_on {
        display: block !important;
        padding: 0% !important; /* 親要素のパディングをリセット */
        margin:0 !important; /* 親要素の余白をリセット */
    }
    .side_on > .left, .side_on > .right {
        width: 100% !important;
        margin: 0 !important; /* 子要素の余白をリセット */
        padding: 0 !important; /* 子要素のパディングをリセット */
    }
    .side_on > .right {
        margin-top: 5em !important;
    }
    .side_download {
        margin-bottom: 2em !important;
    }
    .side_contents {
        position: relative !important;
        top: auto !important;
    }
}


@media (max-width: 767.98px){
.post_container{
    padding-left: 3px;
    padding-right: 3px;
}
.post_head,
.post_container,
.post_list_item{
    /*font-size: 10px;*/
}


.post_list_item .imgarea {
    max-width: 180px;
	width:calc(50% - 20px);
	flex-shrink:0;
}
.post_list_item .textarea {
    width:100%;
	padding-left:20px;
	box-sizing:border-box;
}
.section-topics {
    margin-bottom: 4rem;
}
.section-topics .title{
		font-size:1.2rem;
    margin-bottom: 1rem;
	}
.section-topics .container{
    padding: 3rem 15px 2rem;
}
.section-topics .post_list_item .imgarea{
	max-width:100%;
}
.section-topics .post_list{
    margin-bottom: 1rem;
}
.section-topics .list_item_title{
	font-size:1.3em;
}
.section-topics .post_list li.post_list_item{
	margin-bottom:1rem;
	width:100%;
    font-size: 0.8em;
}
.section-topics .post_list li.post_list_item:last-child{
	margin-bottom:0px;
}
 .post_list_item .textarea {
	padding:1em;
}

/** brタグをどんな場合でも表示 */
br{
　display: block !important;
}


.wp-embed {
  padding: 15px;
  background: #eee;
  max-width: 640px;
}
.wp-embed-featured-image img {
  object-fit: cover;
  width: 120px;
  height: 120px;
}
p.wp-embed-heading {
  font-size: 18px;
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.wp-embed-site-icon {
  width: 15px;
  height: 15px;
}
.wp-embed-site-title a {
  padding-left: 20px;
  font-size: 12px;
}
.wp-embed-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.wp-embed-featured-image {
  margin-bottom: 10px;
}
.wp-embed-footer {
  margin-top: 10px;
}
@media screen and (max-width: 639px) {
  .wp-embed {
    padding: 10px;
  }
  .wp-embed-featured-image img {
    object-fit: cover;
    width: 80px;
    height: 80px;
  }
  p.wp-embed-heading {
    font-size: 14px;
  }
  .wp-embed-excerpt {
    font-size: 12px;
  }
  .wp-embed-site-icon {
    width: 12px;
    height: 12px;
  }
  .wp-embed-site-title a {
    padding-left: 15px;
    font-size: 10px;
  }
}



.wp-embed {
    padding: 15px;
    background: #eee;
    max-width: 640px;
  }
  .wp-embed-featured-image img {
    object-fit: cover;
    width: 120px;
    height: 120px;
  }
  p.wp-embed-heading {
    font-size: 18px;
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .wp-embed-site-icon {
    width: 15px;
    height: 15px;
  }
  .wp-embed-site-title a {
    padding-left: 20px;
    font-size: 12px;
  }
  .wp-embed-excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .wp-embed-featured-image {
    margin-bottom: 10px;
  }
  .wp-embed-footer {
    margin-top: 10px;
  }
  @media screen and (max-width: 639px) {
    .wp-embed {
      padding: 10px;
    }
    .wp-embed-featured-image img {
      object-fit: cover;
      width: 80px;
      height: 80px;
    }
    p.wp-embed-heading {
      font-size: 14px;
    }
    .wp-embed-excerpt {
      font-size: 12px;
    }
    .wp-embed-site-icon {
      width: 12px;
      height: 12px;
    }
    .wp-embed-site-title a {
      padding-left: 15px;
      font-size: 10px;
    }
  }