/*
Theme Name: TechnoProducer Theme
Theme URI: https://www.techno-producer.com
Description: This is a theme created for techno-producer. The production period is about one month. I haven't been able to test. Therefore, please contact us if there is any broken part.
Version: 1
Author: S.K.
Author URI: https://www.techno-producer.com
*/


* {
    font-family: "Noto Sans JP", "Helvetica", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", YuGothic, "Yu Gothic", "メイリオ", Meiryo, sans-serif;
    line-height: 1.6;
    color: #555;
}

/* 共通-カスタマイズ */
a:hover {
    text-decoration: none;
}

/* メインカラー背景色 */
.bg-main-color {
    background: #0C1B2E;
}

/* アクセントカラー背景色 */
.accentBG {
    background: #F5F9FC;
}

/* フッター背景色 */
.footerBG {
    background: #535353;
}

/* メインカラーグラデーション背景色 */
.bg-main-color-gradient {
    background-color: #0c1b2e;
    background-image: linear-gradient(135deg, #0c1b2e 43%, #0473bb 100%);
}

/* 淡いグレーグラデーション背景色 */
.bg-lightgray-gradient {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

/* 背景色をなくす */
.no-bg {
    background: transparent !important;
}

/* フォントサイズ調節 */
.fz14 {
    font-size: 0.875rem;
}

.fz16 {
    font-size: 1rem;
}

.fz20 {
    font-size: 1.25rem;
}

.fz24 {
    font-size: 1.5rem;
}

.fz32 {
    font-size: 2rem;
}

@media screen and (max-width:768px) {
    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.25rem;
    }

    h3 {
        font-size: 1.125rem;
    }
}

/* 文字色 */
.accent-text {
    color: #013C73;
}

.base-text {
    color: #555;
}

.text-main-color {
    color: #0C1B2E;
}

/* リンク */
.link-text {
    color: #296ec5;
    text-decoration: underline;
}

/* リンク（アンダーラインなし） */
.link-text-plain {
    color: #296ec5;
    transition: color 0.3s ease;
}

.link-text-plain:hover {
    color: #1a5bb3;
    text-decoration: underline;
}

/* 背景色追加 */
.bg-gray {
    background: #DAE0E4;
}

/* メインカラーのボーダー */
.border-main-color {
    border-color: #0C1B2E !important;
}

/* 太めのボーダー（下線用） */
.border-bottom-2 {
    border-bottom-width: 2px !important;
}

/* 写真のSPサイズ調節 */
@media screen and (max-width:768px) {
    .spimg {
        width: 64px;
    }
}

.mx-500 {
    max-width: 500px;
}

.mx-1000 {
    max-width: 1000px;
}

/* Bootstrapデフォのガターを消す */
.gutterL0 {
    margin-left: -30px;
}

.gutterR0 {
    margin-right: -30px;
}

.porigonLine {
    width: 100vW;
}

/* テーブルの行間調整 */
.table th,
.table td {
    padding: 1.6rem 1rem;
}

/* テーブルの行間調整小さく、文字を上下左右中央 */
.table-sm th,
.table-sm td {
    padding: 0.5rem 1rem;
    vertical-align: middle;
    text-align: center;
}

/* アンダーライン */
.underline {
    background: linear-gradient(transparent 60%, #FFED00 60%);
}

/* btn etc. drop shadow */
.shadow {
    box-shadow: 0 0.5em 3rem -1rem rgba(0, 0, 0, 0.5);
}

/* original btn style */
.mybtn a:hover {
    color: #000;
    background: #ffffff;
    border: 2px solid #0C1B2E;
}

.mybtn a {
    padding: 1rem 2rem;
    margin: 0 1rem;
    color: #ffffff;
    background: #0C1B2E;
    border: 2px solid #0C1B2E;
}

.breakAll {
    word-break: break-all;
}

/* 」」」」」」」Nav menu style 」」」」」」」」」」*/
/* ナビバーと白ボタンの高さ固定 */
@media screen and (min-width:1199px) {

    .navbar,
    .nav-item:nth-last-of-type(-n+2) a {
        height: 103px;
    }
}

@media screen and (min-width:1423px) {

    .navbar,
    .nav-item:nth-last-of-type(-n+2) a {
        height: 78px;
    }
}

/* ロゴサイズ調整 */
.navbar-brand img {
    width: 250px;
    margin: 8px;
}

@media screen and (max-width:768px) {
    .navbar-brand img {
        width: 130px;
        margin: 8px;
    }
}

/* 紙飛行機のサイズ調節 */
.nav-item:last-child img {
    width: 40px;
}

/* サービス用サブナビゲーション調整 */
#collapseService.fixed-top {
    background: #273547;
}

@media screen and (max-width:1199px) {
    #collapseService.fixed-top {
        display: none;
    }
}

@media screen and (min-width:1199px) {
    #collapseService.fixed-top {
        top: 103px;
    }
}

@media screen and (min-width:1423px) {
    #collapseService.fixed-top {
        top: 78px;
    }
}

/* コラム用サブナビゲーション調整 */
#collapseNavbar.fixed-top {
    background: #273547;
}

@media screen and (max-width:1199px) {
    #collapseNavbar.fixed-top {
        display: none;
    }
}

@media screen and (min-width:1199px) {
    #collapseNavbar.fixed-top {
        top: 103px;
    }
}

@media screen and (min-width:1423px) {
    #collapseNavbar.fixed-top {
        top: 78px;
    }
}

/* 実績/お客様の声用サブナビゲーション調整 */
#collapseCase.fixed-top {
    background: #273547;
}

@media screen and (max-width:1199px) {
    #collapseCase.fixed-top {
        display: none;
    }
}

@media screen and (min-width:1199px) {
    #collapseCase.fixed-top {
        top: 103px;
    }
}

@media screen and (min-width:1423px) {
    #collapseCase.fixed-top {
        top: 78px;
    }
}

/* 会社案内用サブナビゲーション調整 */
#collapseCompany.fixed-top {
    background: #273547;
}

@media screen and (max-width:1199px) {
    #collapseCompany.fixed-top {
        display: none;
    }
}

@media screen and (min-width:1199px) {
    #collapseCompany.fixed-top {
        top: 103px;
    }
}

@media screen and (min-width:1423px) {
    #collapseCompany.fixed-top {
        top: 78px;
    }
}

/* SPハンバーガーメニュー調整 */
.navbar-dark .navbar-toggler {
    color: rgba(255, 255, 255, 1);
    border-color: rgba(255, 255, 255, 1);
    border-radius: 1px;
    width: 48px;
    height: 48px;
    padding: 0;
}

.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ハンバーガーメニュー調整終わり */

/* 検索ドロップダウン調整 */
#collapseSearch.fixed-top {
    background: #273547;
}

@media screen and (max-width:1199px) {
    #collapseSearch.fixed-top {
        display: none;
    }
}

@media screen and (min-width:1199px) {
    #collapseSearch.fixed-top {
        top: 103px;
    }
}

@media screen and (min-width:1423px) {
    #collapseSearch.fixed-top {
        top: 78px;
    }
}

/* 虫眼鏡(検索ボタン)のサイズ調整 */
.nav-search img {
    height: 1rem;
}

/* SP用検索窓の検索ボタン */
.nav-search button {
    border-radius: 0 0.25rem 0.25rem 0;
}

.nav-search button:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* PC用ドロップダウン検索_検索ボタン調節 */
.search img {
    height: 1.1rem;
}

.search button {
    border-radius: 0 0.25rem 0.25rem 0;
}

.search button:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* placeholderの色調節 */
input::placeholder {
    color: #bcbbc0 !important;
}

/* 検索ドロップダウン調整 ここまで */

/* 選択中のメニューを強調 */
.activebtn {
    font-weight: bold;
}

/* 」」」」」」」Hero img style 」」」」」」」」」」*/
.Hero {
    position: relative;
}

.HeroImage {
    margin-top: 4rem;
}

.HeroImage img {
    width: 100vw;
}

.HeroTopText img {
    position: absolute;
    z-index: 1000;
    top: 25%;
    left: 10%;
    max-width: 45rem;
}

.HeroBottomText img {
    max-width: 45rem;
    position: absolute;
    z-index: 1000;
    top: 55%;
    left: 10%;
}

@media (max-width: 1020px) and (min-width: 414px) {
    .HeroTopText img {
        position: absolute;
        z-index: 1000;
        top: 17%;
        left: 9%;
        max-width: 27rem;
    }

    .HeroBottomText img {
        max-width: 33rem;
        position: absolute;
        z-index: 1000;
        top: 53%;
        left: 9%;
    }

    .HeroImage {
        margin-top: 0rem;
    }

}

@media screen and (max-width:414px) {
    .sp_HeroImg img {
        width: 100vw;
        margin-top: 4vh;
    }
}

/* Hero 資料ダウンロード ボタン */
.DownloadBtn a {
    position: absolute;
    z-index: 1000;
    bottom: -3%;
    right: 4%;
    max-width: 25rem;
}

@media (max-width: 1020px) and (min-width: 414px) {
    .DownloadBtn a {
        position: absolute;
        bottom: -9%;
        right: 1%;
        max-width: 20rem;
        width: 80%;
    }
}

@media screen and (max-width:414px) {
    .DownloadBtn a {
        position: absolute;
        bottom: -20%;
        right: 0%;
        width: 90%;
    }
}

/* Hero 書籍バナー */
.DownloadBtn_book a {
    position: absolute;
    z-index: 1000;
    bottom: -3%;
    right: 4%;
    max-width: 36rem;
}

@media (max-width: 1020px) and (min-width: 414px) {
    .DownloadBtn_book a {
        position: absolute;
        bottom: -9%;
        right: 1%;
        width: 90%;
    }
}

@media screen and (max-width:414px) {
    .DownloadBtn_book a {
        position: absolute;
        bottom: -15%;
        right: 0%;
        width: 90%;
    }
}


/* 」」」」」」」Service item Image 」」」」」」」」」」*/
.service_advisory-service {
    background: url("img/advisory-service_card.jpg") center center / cover no-repeat;
}

.service_business-supporter-card {
    background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url("img/producer-corporate_title-img.jpg") center center / cover no-repeat;
}

.service_8week_pkg {
    background: url("img/8week_pkg.jpg") center center / cover no-repeat;
}

.service_technology-marketing_pkg {
    background: url("img/technology-marketing_pkg.jpg") center center / cover no-repeat;
}

.service_patent_pkg {
    background: url("img/patent_pkg.jpg") center center / cover no-repeat;
}

.service_Kigyounai {
    background: url("img/Kigyounai_hatumeijyuku.jpg") center center / cover no-repeat;
}

.service_eHatumeijyuku {
    background: url("img/eHatumeijyuku.jpg") center center / cover no-repeat;
}

.service_Dougakouza {
    background: url("img/Dougakouza.jpg") center center / cover no-repeat;
}

.service_kigyoukamukeHatumeijyuku {
    background: url("img/kigyoukamukeHatumeijyuku.jpg") center center / cover no-repeat;
}

.service_ip_landscape {
    background: url("img/ip_landscape.jpg") center center / cover no-repeat;
}

.service_investment {
    background: url("img/investment.jpg") center center / cover no-repeat;
}

.service_innovation-shikiho {
    background: url("img/service_innovation-shikiho.jpg") center center / cover no-repeat;
}

.size-thumbnail {
    width: 240px;
    height: 180px;
}

.float_wrap {
    overflow: auto;
}

/* 「おすすめ！」をつける（2023/12/08_現在不使用） */
.recommendation {
    position: relative;
}

.recommendation:after {
    font-weight: bold;
    font-size: 1rem;
    display: block;
    position: absolute;
    content: "おすすめ！";
    background: #c24760;
    color: #fff;
    padding: 5px 12px;
    height: 36px;
    line-height: 24px;
    top: 0px;
    left: 0px;
    z-index: 10;
}

/* 「王冠マーク」をつける */
.crown {
    position: relative;
}

.crown:after {
    font-weight: bold;
    font-size: 1rem;
    display: block;
    position: absolute;
    content: "\f521";
    font-family: FontAwesome;
    background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);
    color: #fff;
    padding: 5px 12px;
    height: 36px;
    line-height: 24px;
    top: 0px;
    left: 0px;
    z-index: 10;
}

/* 金色のボーダー */
.gold-border {
    border: 3px solid #B67B03;
    border-image: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);
    border-image-slice: 1;
}

/* 」」」」」」」説明会CTA 」」」」」」」」」」*/
.setumeikaiCTA {
    background: url(img/setumeikaiBG.jpg) center center / cover no-repeat fixed;
}

.arrow {
    position: absolute;
    right: 8%;
    bottom: 45%;
}

.opacity:hover {
    opacity: 0.7;
}

.setumeikaiCTA h2 {
    margin: 0 auto;
    padding: 0;
    border-bottom: none;
}

/* 」」」」」」」メルマガCTA 」」」」」」」」」」*/
.mailmagaCTA {
    background: url(img/TownBG.jpg) center center / contain no-repeat fixed;
}


/* 動画埋め込み */
.iframe-wrap {
    position: relative;
    width: 50%;
    padding-top: 28.25%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    margin: auto;
}

.iframe-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}


/* 」」」」」」」ページネーション 」」」」」」」」」」*/
.page-numbers {
    margin-right: 20px;
    padding: 10px 20px;
    color: #333;
    font-size: 1.2em;
    box-shadow: 0 1px 1px #999;
    background: #fff;
    justify-content: center;
}

.current {
    padding: 10px 20px;
    background: #0C1B2E;
    color: #fff;
}

.prev,
.next {
    background: transparent;
    box-shadow: none;
    color: #0C1B2E;
}

@media screen and (max-width:414px) {

    .prev,
    .next {
        display: none;
    }

    .dots {
        padding: 0 !important;
    }
}

.dots {
    background: transparent;
    box-shadow: none;
}

/* 」」」」」」」三角形矢印 」」」」」」」」」」*/
.arrow-right {
    position: relative;
}

.arrow-right::before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent gray;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 3px;
}

.arrow-bottom {
    position: relative;
}

.arrow-bottom::after {
    content: "";
    display: block;
    position: absolute;
    top: 25px;
    left: 50%;
    width: 30px;
    height: 30px;
    border-top: 2px solid lightgray;
    border-right: 2px solid lightgray;
    transform: translateX(-50%) rotate(135deg);
}

.arrow-down {
    position: relative;
}

.arrow-down::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 6px 0 6px;
    border-color: gray transparent transparent transparent;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 3px;
    margin-left: 0.5rem;
}

/* 実績 */
#seminar a,
#book a {
    color: #343a40 !important;
}

/* 実績数字のborder */
.border-right-thick {
    border-right: 2px solid #555;
}

@media screen and (max-width:991px) {
    .border-right-thick {
        border-right: 0;
        padding-bottom: 1.5rem;
    }
}

/* readmore */
.read-more-state {
    display: none;
}

.read-more-trigger {
    cursor: pointer;
    display: inline-block;
    text-align: center;
    margin: 0 auto;
}

.read-more-trigger::after {
    white-space: pre;
    content: "︙\A▽ 続きを見る ▽";
}

.collapse.show~.read-more-trigger::after {
    content: "△ 閉じる △";
}

/* newバッジ ※30日以内の投稿にはnewをつける */
.badge-new {
    height: 2rem;
}

/* 目次のためのCSS ※211026現在未使用 いずれTOCプラグインにて目次作成する際に利用 */
/*全体設定*/
#toc_container {
    width: 100%;
    background: #fff;
    border: 4px solid #f5f8fa !important;
    box-sizing: border-box;
    line-height: 1;
    margin: 36px auto;
    padding: 1em 2em !important;
    margin-bottom: 50px !important;
}

/*目次のタイトル*/
#toc_container .toc_title {
    text-align: center;
    margin-top: 0 0 0 35px;
    padding: 0.4em 0;
    font-size: 1.3em;
    background: #f5f8fa;
}

/*ul全体の設定*/
#toc_container ul {
    list-style: none;
    margin-bottom: 0;
}

/*li全体の設定*/
#toc_container ul li {
    margin: 0;
    padding-left: 0;
    text-indent: 0;
}

/*小見出し*/
#toc_container ul a {
    text-decoration: none;
    color: #444;
    font-size: 14px;
}

/*大見出し*/
#toc_container .toc_list>li>a {
    border-bottom: 1px solid #ccc;
    line-height: 2.2;
    font-weight: bold;
}

#toc_container ul ul {
    padding: 1em 0 1em 1em;
}

#toc_container li {
    margin-bottom: 0.8em;
    padding-bottom: 0.2em;
}

/* 閉じるボタン */
.toc_toggle {
    display: none;
    color: #f5f8fa;
    font-size: 14px;
}

/* セミナーテンプレ */
.seminarTitle {
    padding-right: 160px !important;
}

.seminarBG {
    background-image: url(/wp-content/themes/TechnoproducerTheme/img/seminar_mainbg.png);
    background-repeat: no-repeat;
    background-position: right center;
}

@media screen and (max-width:414px) {
    .seminarTitle {
        padding-right: 1rem !important;
    }

    .seminarBG {
        background-size: cover;
        background-position: left center;
    }
}

/* 弁理士会(jpaa)認定セミナーテンプレ */
.jpaa_seminarTitle {
    padding-right: 160px !important;
}

.jpaa_seminarBG {
    background-image: url(/wp-content/themes/TechnoproducerTheme/img/seminar_jpaa_mainbg.jpg);
    background-repeat: no-repeat;
    background-position: right center;
    border-bottom: 8px solid #20477a;
    ;
}

@media screen and (max-width:414px) {
    .jpaa_seminarTitle {
        padding-right: 1rem !important;
    }

    .jpaa_seminarBG {
        background-size: cover;
        background-position: left center;
    }
}

/* 有料セミナーテンプレ */
.paid_seminarTitle {
    padding-right: 160px !important;
}

.paid_seminarBG {
    background-image: url(/wp-content/themes/TechnoproducerTheme/img/seminar_paid_mainbg.png);
    background-repeat: no-repeat;
    background-position: right center;
}

@media screen and (max-width:414px) {
    .paid_seminarTitle {
        padding-right: 1rem !important;
    }

    .paid_seminarBG {
        background-size: cover;
        background-position: left center;
    }
}


/* トップページのバナー用 */
.bg-yellow {
    background: #FCF8E1;
}

.bg-green {
    background: #e5fff8;
}

.bg-dark_blue {
    background: #012d74;
}

/* バナー用グラデーション背景（バナー使用後は消してもOK） */
.bg-blue-gradient {
    background: linear-gradient(120deg, #c2e9fb 0%, #a1c4fd 100%);
}

/* トップページの書籍バナー用 */
.bg-book_banner {
    background: #e0edff;
}

/* イノベーション四季報_2023春バナー用（バナー使用後は消してもOK） */
.bg-skew {
    -webkit-transform: skew(-15deg);
    transform: skew(-15deg);
    border-radius: 0;
    background-image: -webkit-gradient(linear, left top, right top, from(#fdfbfb), to(#ebedee));
    background-image: -webkit-linear-gradient(left, #fdfbfb 0%, #ebedee 100%);
    background-image: linear-gradient(90deg, #fdfbfb 0%, #ebedee 100%);
}

/* 傾きを戻す(イノベーション四季報_2023春バナー用（バナー使用後は消してもOK）) */
.skew-none {
    -webkit-transform: skew(15deg);
    transform: skew(15deg);
}

/* 投稿 SNSボタンは右寄せ */
.addtoany_content {
    text-align: right !important;
    padding-right: 32px !important;
}

/* 1分コラム　カテゴリサムネ */
.column1min_cat:nth-child(1n) .bg_column1min_cat_image {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(/wp-content/themes/TechnoproducerTheme/img/column1min_cat1.jpg) center center no-repeat;
    background-size: cover;
    height: 130px;
}

.column1min_cat:nth-child(2n) .bg_column1min_cat_image {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(/wp-content/themes/TechnoproducerTheme/img/column1min_cat2.jpg) center center no-repeat;
    background-size: cover;
    height: 130px;
}

.column1min_cat:nth-child(3n) .bg_column1min_cat_image {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(/wp-content/themes/TechnoproducerTheme/img/column1min_cat3.jpg) center center no-repeat;
    background-size: cover;
    height: 130px;
}

.column1min_cat:nth-child(4n) .bg_column1min_cat_image {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(/wp-content/themes/TechnoproducerTheme/img/column1min_cat4.jpg) center center no-repeat;
    background-size: cover;
    height: 130px;
}

.column1min_cat:nth-child(5n) .bg_column1min_cat_image {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(/wp-content/themes/TechnoproducerTheme/img/column1min_cat5.jpg) center center no-repeat;
    background-size: cover;
    height: 130px;
}

/* メルマガバックナンバー　カテゴリサムネ */
.newsletter-bn_cat:nth-child(1n) .bg_newsletter-bn_cat_image {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(/wp-content/themes/TechnoproducerTheme/img/newsletter-bn_cat1.png) center center no-repeat;
    background-size: cover;
    height: 130px;
}

.newsletter-bn_cat:nth-child(2n) .bg_newsletter-bn_cat_image {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(/wp-content/themes/TechnoproducerTheme/img/newsletter-bn_cat2.png) center center no-repeat;
    background-size: cover;
    height: 130px;
}

.newsletter-bn_cat:nth-child(3n) .bg_newsletter-bn_cat_image {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(/wp-content/themes/TechnoproducerTheme/img/newsletter-bn_cat3.png) center center no-repeat;
    background-size: cover;
    height: 130px;
}

.newsletter-bn_cat:nth-child(4n) .bg_newsletter-bn_cat_image {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(/wp-content/themes/TechnoproducerTheme/img/newsletter-bn_cat4.jpg) center center no-repeat;
    background-size: cover;
    height: 130px;
}

/* サービスまとめページ */
/* ※bg-kigyounaiは企業内発明塾LP用で別で設定したので不要になった。削除可 */
.bg-ehatsumei,
/* .bg-kigyounai, */
.bg-8week,
.bg-videocourse,
.bg-kigyoukamuke,
.bg-ip_landscape,
.bg-investorcourse {
    width: 100%;
    height: 500px;
}

.bg-ehatsumei {
    background: url(/wp-content/themes/TechnoproducerTheme/img/e_hatsu_original.jpg) top right no-repeat;
}

/* .bg-kigyounai {
    background: url(/wp-content/themes/TechnoproducerTheme/img/kigyounai_original.jpg) top right no-repeat;
} */
.bg-8week {
    background: url(/wp-content/themes/TechnoproducerTheme/img/8week_original.jpg) top right no-repeat;
}

.bg-videocourse {
    background: url(/wp-content/themes/TechnoproducerTheme/img/videocourse_original.jpg) top right no-repeat;
}

.bg-kigyoukamuke {
    background: url(/wp-content/themes/TechnoproducerTheme/img/kigyoukamuke_original.jpg) top right no-repeat;
}

.bg-ip_landscape {
    background: url(/wp-content/themes/TechnoproducerTheme/img/ip_landscape_original.jpg) top right no-repeat;
}

.bg-investorcourse {
    background: url(/wp-content/themes/TechnoproducerTheme/img/investorcourse.jpg) top right no-repeat;
}

@media screen and (max-width:1024px) {
    .bg-ehatsumei {
        background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url(/wp-content/themes/TechnoproducerTheme/img/e_hatsu_original.jpg) top right no-repeat;
    }

    /* .bg-kigyounai {
        background-image: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), url(/wp-content/themes/TechnoproducerTheme/img/kigyounai_original.jpg);
    } */
    .bg-8week {
        background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url(/wp-content/themes/TechnoproducerTheme/img/8week_original.jpg);
    }

    .bg-videocourse {
        background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url(/wp-content/themes/TechnoproducerTheme/img/videocourse_original.jpg);
    }

    .bg-kigyoukamuke {
        background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url(/wp-content/themes/TechnoproducerTheme/img/kigyoukamuke_original.jpg);
    }

    .bg-ip_landscape {
        background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url(/wp-content/themes/TechnoproducerTheme/img/ip_landscape_original.jpg);
    }

    .bg-investorcourse {
        background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url(/wp-content/themes/TechnoproducerTheme/img/investorcourse.jpg);
    }
}

/* ページ内リンクしたときの位置調整 */
#kouza,
#soudan,
#check-8week,
#check-patent-package {
    margin-top: -100px;
    padding-top: 100px;
}

/* 吹き出し */
.balloon1-right {
    position: relative;
    display: inline-block;
    margin: 1.5em 15px 1.5em 0;
    padding: 7px 10px;
    min-width: 120px;
    max-width: 100%;
    color: #555;
    font-size: 16px;
    background: #e0edff;
    border-radius: 15px;
}

.balloon1-right:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -15px;
    border: 15px solid transparent;
    border-left: 15px solid #e0edff;
}

.balloon1-right p {
    margin: 0;
    padding: 0;
}

.balloon1-left {
    position: relative;
    display: inline-block;
    margin: 1.5em 0 1.5em 15px;
    padding: 7px 10px;
    min-width: 120px;
    max-width: 100%;
    color: #555;
    font-size: 16px;
    background: #e0edff;
    border-radius: 15px;
}

.balloon1-left:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -30px;
    margin-top: -15px;
    border: 15px solid transparent;
    border-right: 15px solid #e0edff;
}

.balloon1-left p {
    margin: 0;
    padding: 0;
}

/* タブチェンジ調整 */
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    background: #DAE0E4 !important;
}

/* サービスまとめページ共通 */
/* 文字の装飾 */
.text-shadow {
    text-shadow: 0px 1px 2px #9c9c9c;
}

.text-shadow-none {
    text-shadow: none;
}

/* 文字間隔を少し開ける */
.letter-spacing {
    letter-spacing: .1em;
}

/* 明るいテーマカラーの文字色 */
.accent-light-text {
    color: #70b0ff;
}

/* 企業内発明塾LP用 */
/* メインビジュアル */
/* 文章の背景 */
.bg-trans {
    background: rgba(255, 255, 255, 0.9);
}

@media screen and (max-width:1024px) {
    .bg-trans {
        background-color: transparent;
    }
}

/* 画像設定 */
.top-kigyounai {
    width: 100%;
    background: url(/wp-content/themes/TechnoproducerTheme/img/kigyounai_main.jpg) top right no-repeat;
}

@media screen and (max-width:1024px) {
    .top-kigyounai {
        background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2)), url(/wp-content/themes/TechnoproducerTheme/img/kigyounai_main.jpg);
    }
}

/* オレンジ色のボタン */
/* 通常のボタン色 */
.btn-orange,
.btn-orange.disabled,
.btn-orange:disabled {
    color: #fff;
    background: #ffab0f;
    border-color: #ffab0f;
    position: relative;
    /* ボタン右端に「>」をつけるため */
}

/* focusされた時の枠線の色 */
.btn-orange:focus,
.btn-orange.focus,
.btn-orange:not(:disabled):not(.disabled):active:focus,
.btn-orange:not(:disabled):not(.disabled).active:focus,
.show>.btn-orange.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 171, 15, 0.5);
}

/* hover時（マウスカーソルを重ねた時）の色（通常より濃いor暗めの色を指定） */
.btn-orange:hover {
    color: #fff;
    background: #e5960d;
    border-color: #cc850c;
}

/* active時の色（hover時と同等かさらに濃いor暗めの色を指定） */
.btn-orange:not(:disabled):not(.disabled):active,
.btn-orange:not(:disabled):not(.disabled).active,
.show>.btn-orange.dropdown-toggle {
    color: #fff;
    background: #cc850c;
    border-color: #b2740a;
}

/* オレンジ色のアウトラインボタン */
/* 通常のボタン色 */
.btn-outline-orange {
    color: #ffab0f;
    background: #fff;
    background-image: none;
    position: relative;
    /* ボタン右端に「>」をつけるため */
    /* border-color: #ffab0f;
            border: 2px solid; */
}

/* focusされた時の枠線の色 */
.btn-outline-orange:focus,
.btn-outline-orange.focus,
.btn-outline-orange:not(:disabled):not(.disabled):active:focus,
.btn-outline-orange:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-orange.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 171, 15, 0.5);
}

/* hover時（マウスカーソルを重ねた時）の色（通常より濃いor暗めの色を指定） */
.btn-outline-orange:hover,
.btn-outline-orange:not(:disabled):not(.disabled):active,
.btn-outline-orange:not(:disabled):not(.disabled).active,
.show>.btn-outline-orange.dropdown-toggle {
    color: #fff;
    background: #e5960d;
    border-color: #cc850c;
}

/* active時の色（hover時と同等かさらに濃いor暗めの色を指定） */
.btn-outline-orange.disabled,
.btn-outline-orange:disabled {
    color: #fff;
    background: transparent;
}

/* ボタン右端に「>」をつける */
.btn-orange::after,
.btn-outline-orange::after {
    position: absolute;
    content: "\f105";
    /* FontAwesomeの「>」のUnicode */
    font-family: FontAwesome;
    right: 1rem;
    transition: transform 0.3s ease;
}

.btn-orange:hover::after,
.btn-outline-orange:hover::after {
    transform: translateX(5px);
}

/* md表示時は「>」非表示にする */
@media (max-width: 768px) {

    .btn-orange::after,
    .btn-outline-orange::after {
        display: none;
    }
}

/* CTAボタン背景 */
.bg-btn {
    background: #20477A;
}

/* ポリゴン背景 */
.bg-polygon {
    width: 100%;
    background: url(/wp-content/themes/TechnoproducerTheme/img/bg-polygon.png) bottom left no-repeat;
}

@media screen and (max-width:1024px) {
    .bg-polygon {
        background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2)), url(/wp-content/themes/TechnoproducerTheme/img/bg-polygon.png);
    }
}

/* 写真にはっきりした影をつける */
.picture-shadow {
    box-shadow: 4px 4px;
}

/* 特許出願パッケージLP用 */
/* メインビジュアル */
/* 画像設定 */
.top-patent-application {
    width: 100%;
    background: url(/wp-content/themes/TechnoproducerTheme/img/patent-application_main.jpg) top right no-repeat;
}

@media screen and (max-width:1600px) {
    .top-patent-application {
        background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2)), url(/wp-content/themes/TechnoproducerTheme/img/patent-application_main.jpg);
    }
}

/* 行間を大きく */
.lh-l {
    line-height: 2;
}

/* オプション背景 */
.optionBG {
    background: #e0edff;
}

/* NEW!をつける */
.new {
    position: relative;
}

.new:after {
    font-weight: bold;
    font-size: 1rem;
    display: block;
    position: absolute;
    content: "NEW!";
    background: #c24760;
    color: #fff;
    padding: 0 12px;
    height: 24px;
    line-height: 24px;
    top: 0px;
    left: 0px;
    z-index: 10;
}

/* 技術マーケティングパッケージLP用 */
/* メインビジュアル */
/* 画像設定 */
.top-technology-marketing {
    width: 100%;
    background: url(/wp-content/themes/TechnoproducerTheme/img/technology-marketing_main.jpg) top right no-repeat;
}

@media screen and (max-width:1024px) {
    .top-technology-marketing {
        background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.6)), url(/wp-content/themes/TechnoproducerTheme/img/technology-marketing_main.jpg);
    }
}

/* サービス紹介ページ用 */
/* 弊社が提供するサービス「発明塾」　3つの形式の背景画像 */
.service_bg_e-hatsumeijuku {
    background: url("img/format_img_e-hatsumeijuku.jpg") center center / cover no-repeat;
}

.service_bg_videocourse {
    background: url("img/format_img_videocourse.jpg") center center / cover no-repeat;
}

.service_bg_discussion {
    background: url("img/format_img_discussion.jpg") center center / cover no-repeat;
}

/* バーに重ねる加工（不採用） */
.course_row {
    margin: -5rem auto 0;
    /* ここはあとでデスクトップサイズだけにする */
}

/* パッケージカード部分 */
/* カードにマウスオーバー時に画像を暗くみせる */
.overlay {
    opacity: 0.8;
    /* 最初は半透明に */
    transition: opacity 0.3s ease;
    /* opacityの変化を滑らかにする */
}

.card:hover .overlay {
    opacity: 1;
    /* マウスオーバー時に不透明に */
}

/* ボタン右端に「>」をつける */
.Btn-Icon::after {
    position: absolute;
    content: "\f105";
    /* FontAwesomeの「>」のUnicode */
    font-family: FontAwesome;
    right: 2rem;
}

.card:hover .Btn-Icon {
    color: #fff;
    /* cardにマウスオーバー時に白に */
}

.btn:hover .Btn-Icon::after {
    color: #fff;
    /* ボタンにマウスオーバー時に「>」を白に */
}

/* ランキング数字用 */
/* 写真に文字を重ねる。ランキングの数字のため */
.ranking_No {
    /*親div*/
    position: relative;
}

.ranking_No p {
    position: absolute;
    top: 0;
    left: 10px;
}

/* 背景色、金銀銅 */
.bg-gold {
    background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);
}

.bg-silver {
    background: linear-gradient(45deg, #757575 0%, #9E9E9E 45%, #E8E8E8 70%, #9E9E9E 85%, #757575 90% 100%);
}

.bg-bronze {
    background: linear-gradient(45deg, #a57e65 0%, #a57e65 45%, #f3cfb8 70%, #a57e65 85%, #a57e65 90% 100%);
}

/* カードにマウスオーバー時に画像を明るくみせる */
.overlay-light {
    opacity: 1;
    /* 最初は不透明に */
    transition: opacity 0.3s ease;
    /* opacityの変化を滑らかにする */
}

.card:hover .overlay-light {
    opacity: 0.8;
    /* マウスオーバー時に半透明に */
}

/* 新規事業担当／企画部の方へページ */
/* Backgroundに数字 */
.bg_num1,
.bg_num2 {
    padding-top: 1.5rem;
    background-repeat: no-repeat;
}

.bg_num1 {
    background-image: url(/wp-content/uploads/2020/09/num1.png);
    background-position: right top;
}

.bg_num2 {
    background-image: url(/wp-content/uploads/2020/09/num2-1.png);
    background-position: 15px 0;
}

@media screen and (max-width: 768px) {

    .bg_num1,
    .bg_num2 {
        padding-top: 0;
    }
}

/* 8週間パッケージLP */
/* メインビジュアル */
/* 画像設定 */
.top-8week {
    width: 100%;
    background: url(/wp-content/themes/TechnoproducerTheme/img/8week-top.jpg) center center no-repeat;
    background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2)), url(/wp-content/themes/TechnoproducerTheme/img/8week-top.jpg);
    background-size: cover;
}

@media screen and (max-width:1024px) {
    .top-8week {
        background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7)), url(/wp-content/themes/TechnoproducerTheme/img/8week-top.jpg);
    }
}

/* ボタン縁取り用 */
.border-orange {
    border: 2px solid #ffab0f;
}

/* シンプルなアンダーライン */
.underline-s {
    text-decoration: underline;
}

/* 明るいベースカラーの文字色 */
.light-main-text {
    color: #296ec5;
}

/* e発明塾通信 */
/* メインビジュアル */
.top-ehatsumeijuku-tsushin {
    width: 100%;
    background: url(/wp-content/themes/TechnoproducerTheme/img/ehatsumeijuku-tsushin_top.jpg) top right no-repeat;
}

/* 会社概要ページ */
/* 3つのボタン横並びを同じサイズに */
.a-row {
    width: 200px;
    height: 75px;
}

/* SNS埋め込み */
/* fecebook調整 */
.facebook_wrap {
    margin-left: auto;
    margin-right: auto;
    max-width: 500px;
    width: 100%;
}

.fb-page,
.fb-page span,
.facebook_wrap iframe {
    width: 100% !important;
}

/* fecebookロゴ表示 */
.facebook_logo {
    padding-left: 55px;
    padding-top: 12px;
    padding-bottom: 12px;
    background-image: url(/wp-content/themes/TechnoproducerTheme/img/facebook_logo.png);
    background-repeat: no-repeat;
    background-position: 0 5px;
}

/* twitter調整 */
.X_wrap {
    margin-left: auto;
    margin-right: auto;
    max-width: 500px;
    width: 100%;
}

/* twitterロゴ表示 */
.X_logo {
    padding-left: 55px;
    padding-top: 12px;
    padding-bottom: 12px;
    background-image: url(/wp-content/themes/TechnoproducerTheme/img/X_logo.png);
    background-repeat: no-repeat;
    background-position: 0 5px;
}

/* ページネーション */
.gsc-results .gsc-cursor-box .gsc-cursor-current-page,
.gsc-results .gsc-cursor-box .gsc-cursor-page {
    font-size: 15px;
    border: 1px solid #ccc;
    padding: 5px 8px;
}

.gsc-results .gsc-cursor-box .gsc-cursor-page {
    color: #777777 !important;
}

.gsc-results .gsc-cursor-box .gsc-cursor-current-page {
    color: #4F863B !important;
}

.gsc-results .gsc-cursor-box .gsc-cursor-current-page:hover {
    text-decoration: none !important;
}

/* タイトル */
.gs-webResult.gs-result a.gs-title:link,
.gs-webResult.gs-result a.gs-title:link b,
.gs-imageResult a.gs-title:link,
.gs-imageResult a.gs-title:link b,
.gsc-control-cse .gs-result .gs-title {
    font-size: 1.25rem !important;
}

/* イノベーション四季報 newバッジの背景色を控えめにするため */
.bg-dark_red {
    background: #c24760;
    color: #fff;
}

/* イノベーション四季報TOP 背景画像 */
.innovationBG {
    background: linear-gradient(to top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 1)), url(/wp-content/themes/TechnoproducerTheme/img/innovation_img.jpg) top no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

/* 書籍/ダウンロード資料ページ */
/* ナビ */
.sub-nav {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 10px;
    padding-inline-start: 0px;
    /* ユーザーエージェントスタイルシートを打ち消し */
    margin-block-start: 0em;
    /* ユーザーエージェントスタイルシートを打ち消し */
    margin-block-end: 0em;
    /* ユーザーエージェントスタイルシートを打ち消し */
}

.sub-nav li {
    width: 200px;
    text-align: center;
    height: 50px;
    line-height: 50px;
    margin-right: 2px;
    border-bottom: solid 2px #dee2e6;
    border-right: solid 2px #dee2e6;
    background-color: #fff;
    transition: all 0.1s ease;
    /* アニメーションを追加 */
}

.sub-nav li a {
    color: rgb(85, 85, 85);
    font-weight: bold;
}

/* マウスオーバー時 */
.sub-nav li:hover {
    font-weight: bold;
    border-bottom: solid 4px #364e96;
    background-color: #f8f9fa;
}

.sub-nav li:hover a {
    color: #364e96;
}

/* スクロールをなめらかに */
html {
    scroll-behavior: smooth;
}

/* スクロールを止める位置を決める */
section {
    scroll-margin-top: 50px;
}

/* ページトップへ戻るボタン */
.pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    background: #fff;
    border: solid 2px #f8f9fa;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    box-shadow: 0 2px 3px rgb(0 0 0 / 30%);
}

.pagetop__arrow {
    height: 10px;
    width: 10px;
    border-top: 3px solid #555;
    border-right: 3px solid #555;
    transform: translateY(20%) rotate(-45deg);
}

@media (hover: hover) and (pointer: fine) {

    .pagetop:hover,
    .pagetop:hover .pagetop__arrow {
        border-color: #4498ff;
    }
}

/* スクロール時に表示する内容（「ページトップへ戻るボタン」に採用） */
/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.scroll_up {
    transition: 0.8s ease-in-out;
    transform: translateY(30px);
    opacity: 0;
}

.scroll_up.on {
    transform: translateY(0);
    opacity: 1.0;
}

/* お問い合わせページ（contact-us） */
/* ボタン矢印 */
/* ボタン右端に「>」をつける */
.Btn-Icon-angle {
    position: relative;
}

.Btn-Icon-angle::after {
    position: absolute;
    content: "\f105";
    /* FontAwesomeの「>」のUnicode */
    font-family: FontAwesome;
    right: 2rem;
}

/* アコーディオン */
.accordion {
    margin: 3em auto;
    max-width: 70vw;
}

.accordion .toggle {
    display: none;
}

.accordion .option {
    position: relative;
    margin-bottom: 1em;
}

.accordion .title,
.accordion .content {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    transition: all 0.3s;
}

.accordion .title {
    border: solid 1px #ccc;
    padding: 1em;
    display: block;
    font-weight: bold;
}

.accordion .title::after,
.accordion .title::before {
    content: "";
    position: absolute;
    right: 1.25em;
    bottom: 1.25em;
    width: 2px;
    height: 0.75em;
    background-color: #999;
    transition: all 0.3s;
}

.accordion .title::after {
    transform: rotate(90deg);
}

.accordion .content {
    max-height: 0;
    overflow: hidden;
    padding: 0 1.5em;
}

.accordion .content p {
    margin: 0;
    padding: 0.5em 1em 1em;
}

.toggle:checked+.title+.content {
    max-height: 500px;
    transition: all 0.7s;
}

.toggle:checked+.title::before {
    transform: rotate(90deg) !important;
}

/* オブジェクトに合わせて写真を切り抜き */
.cover {
    object-fit: cover;
}

/* 新規事業プロデューサー養成講座（ダウンロード資料ページ用カード） */
.dl-card-producer img {
    aspect-ratio: 1.618 / 1;
    object-fit: cover;
}

/*----------------------------
汎用アニメーション
----------------------------*/
/* 下から上へ出現 */
.fadeUp {
    transform: translateY(12%);
    opacity: 0;
}

/* 右から出現 */
.fadeRight {
    transform: translateX(8%);
    opacity: 0;
}

/* 左から出現 */
.fadeLeft {
    transform: translateX(-8%);
    opacity: 0;
}

/* アニメーションの動き */
.huwa {
    animation: huwa 0.8s ease-out forwards;
}

@keyframes huwa {
    to {
        transform: initial;
        opacity: 1;
    }
}

/*----------------------------
PIFV書籍ページ用
----------------------------*/
/* 英文のあしらい - ダークグレー（デフォルト） */
.typographic-bg {
    font-size: 2.5rem;
    font-family: "Akshar", system-ui;
    font-weight: 600;
    letter-spacing: -0.05em;
    margin-bottom: -1rem;
    background: linear-gradient(to right,
            rgba(38, 38, 38, 0.5),
            /* #262626 with 70% opacity */
            rgba(40, 40, 40, 0.5),
            /* #282828 with 70% opacity */
            rgba(42, 42, 42, 0.5),
            /* #2A2A2A with 70% opacity */
            rgba(44, 44, 44, 0.5)
            /* #2C2C2C with 70% opacity */
        );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 文字色_ライトグレー */
.typographic-bg-light {
    background: linear-gradient(to right,
            rgba(240, 240, 240, 0.7),
            rgba(235, 235, 235, 0.7),
            rgba(230, 230, 230, 0.7),
            rgba(225, 225, 225, 0.7));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media (min-width: 768px) {
    .typographic-bg {
        font-size: 7rem;
        /* 画面幅が768px以上のときにサイズを7remに変更 */
        margin-bottom: -3rem;
    }
}

/* 書籍の黒の文字色 */
.text-black {
    color: #251816;
}

/* 書籍のピンクの文字色 */
.text-pink {
    color: #E6007E;
}

/* レスポンシブ対応のテキスト（responsive-text） */
/* デフォルトスタイル（768px超の画面サイズ） */
/* 40px - Bootstrap の h1 サイズ */
.rt-h1 {
    font-size: 2.5rem;
}

/* 32px - Bootstrap の h2 サイズ */
.rt-h2 {
    font-size: 2rem;
}

/* 28px - Bootstrap の h3 サイズ */
.rt-h3 {
    font-size: 1.75rem;
}

/* 24px - Bootstrap の h4 サイズ */
.rt-h4 {
    font-size: 1.5rem;
}

/* 20px - Bootstrap の h5 サイズ */
.rt-h5 {
    font-size: 1.25rem;
}

/* 16px - Bootstrap の h6 サイズ */
.rt-h6 {
    font-size: 1rem;
}

/* 16px - Bootstrap のベースフォントサイズ */
.rt-s {
    font-size: 1rem;
}

/* 768px以下の画面サイズ */
@media screen and (max-width: 768px) {

    /* 28px */
    .rt-h1 {
        font-size: 1.75rem;
    }

    /* 24px */
    .rt-h2 {
        font-size: 1.5rem;
    }

    /* 20px */
    .rt-h3 {
        font-size: 1.25rem;
    }

    /* 18px */
    .rt-h4 {
        font-size: 1.125rem;
    }

    /* 16px */
    .rt-h5 {
        font-size: 1rem;
    }

    /* 14px */
    .rt-h6 {
        font-size: 0.875rem;
    }

    /* 14px */
    .rt-s {
        font-size: 0.875rem;
    }
}

/* ピンクの文字背景 */
.mark-pink {
    background: linear-gradient(0deg, #e5005a, #ff3379) no-repeat;
    background-size: 95% 80%;
    background-position: 0% 60%;
    padding: 0.1em;
}

/* 背景画像 */
.bg-innovation01 {
    background: linear-gradient(to top,
            rgba(40, 44, 52, 0.9),
            rgba(75, 82, 99, 0.7),
            rgba(120, 130, 150, 0.5)),
        url(/wp-content/themes/TechnoproducerTheme/img/img_innovation01.jpg) top no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.bg-innovation01-lihgt {
    background: linear-gradient(to top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 1)), url(/wp-content/themes/TechnoproducerTheme/img/img_innovation01.jpg) top no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

/* ニュース_ページ内で上下スクロールするエリア */
.scroll {
    height: 260px;
    overflow-y: auto;
    /* 垂直スクロールを有効にする */
    overflow-x: hidden;
    /* 水平スクロールを無効にする */
    padding: 10px;
    /* 読みやすくするための余白 */
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

/* ニュース_スクロールバーのスタイル */
.scroll::-webkit-scrollbar {
    width: 18px;
    /* スクロールバーの幅 */
}

.scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
    /* スクロールバーのトラック部分の色 */
}

.scroll::-webkit-scrollbar-thumb {
    background-color: #5A6B8E;
    /* スクロールバーのつまみ部分の色 */
    border-radius: 10px;
    /* 角を丸くする */
    border: 3px solid #f1f1f1;
    /* つまみの周りにスペースを作るためのボーダー */
}

.scroll::-webkit-scrollbar-thumb:hover {
    background-color: #0C1B2E;
    /* マウスオーバー時のつまみ部分の色 */
}

/* メディア掲載情報_スクロールボックス */
.media-list-container {
    max-height: 120px;
    overflow-y: auto;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 10px;
    background-color: #fff;
}

.media-list-scroll {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.media-list-container::-webkit-scrollbar {
    width: 18px;
    /* スクロールバーの幅 */
}

.media-list-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    /* スクロールバーのトラック部分の色 */
}

.media-list-container::-webkit-scrollbar-thumb {
    background-color: #5A6B8E;
    /* スクロールバーのつまみ部分の色 */
    border-radius: 10px;
    /* 角を丸くする */
    border: 3px solid #f1f1f1;
    /* つまみの周りにスペースを作るためのボーダー */
}

.media-list-container::-webkit-scrollbar-thumb:hover {
    background-color: #0C1B2E;
    /* マウスオーバー時のつまみ部分の色 */
}

/* 目次用ol */
.book-chapter-list {
    list-style-type: none;
    padding-left: 0;
    counter-reset: chapter-item;
}

.book-chapter-list li {
    counter-increment: chapter-item;
    display: flex;
    align-items: flex-start;
}

.book-chapter-list li::before {
    content: counter(chapter-item, decimal-leading-zero) " \f0da";
    font-family: monospace, 'FontAwesome';
    color: #b0b0b0;
    min-width: 35px;
    /* 数字と▶の幅を固定 */
    text-align: left;
    flex-shrink: 0;
}

/* 半透明背景 */
.trans-bg {
    background-color: rgba(255, 255, 255, 0.9);
}

/* アニメーションするグラデーション */
@keyframes gradient-animation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.bg-animated-gradient {
    background: linear-gradient(-45deg, #fdf0f0, #f4eaf2, #eaf2f8, #eaf8f3);
    background-size: 400% 400%;
    animation: gradient-animation 15s ease infinite;
}

/*----------------------------
月額顧問サービスで追加（汎用OK）
----------------------------*/
/* 中間サイズのシャドウ */
.shadow-m {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 大きめのradius */
.border-radius-10 {
    border-radius: 10px;
}

/* 控えめな背景グラデーション */
.bg-light-gradient {
    background-color: #f7f9fc;
    background-image: linear-gradient(180deg, #f7f9fc 0%, #e9eff5 100%);
}

/* ページトップ背景 */
.bg-top-advisory-service {
    background-image: url('/wp-content/themes/TechnoproducerTheme/img/bg_top_advisory-service.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ページトップに画像を貼る場合、ナビバー高さの変化に対応 */
@media screen and (max-width:768px) {
    .header-img-offset {
        margin-top: 56px;
    }
}

@media screen and (min-width:769px) {
    .header-img-offset {
        margin-top: 84px;
    }
}

@media screen and (min-width:1199px) {
    .header-img-offset {
        margin-top: 103px;
    }
}

@media screen and (min-width:1423px) {
    .header-img-offset {
        margin-top: 78px;
    }
}

/* サークルアイコンのサイズ設定 */
.circle-48 {
    width: 48px;
    height: 48px;
}

.circle-24 {
    width: 24px;
    height: 24px;
}

/* FAQセクション：フォーカス枠を消すため */
.faq-btn:focus {
    box-shadow: none;
}

/* FAQセクション：アコーディオンのみmargin-top:0,margin-bottom:4em、max-widthを調整*/
.faq-accordion {
    margin: 0 auto 4em;
    max-width: none;
}

/*----------------------------
リボンを付ける
----------------------------*/
.cp_card {
    position: relative;
    /*リボンをかけたいコンテンツボックスにセット*/
}

/*リボンの位置*/
.cp_ribbon_red {
    position: absolute;
    top: 10px;
    left: -8px;
}

/*リボン内のテキスト*/
.cp_ribbon_red .cp_ribbon {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
    padding: 0 0 0 10px;
    color: #ffffff;
    background: #c24760;
}

/*擬似要素の共通設定*/
.cp_ribbon_red:before,
.cp_ribbon_red:after {
    position: absolute;
    content: '';
}

.cp_ribbon_red:before {
    /*リボンの影部分*/
    top: -8.5px;
    left: 0.1px;
    border-bottom: 9px solid #a13a4e;
    border-left: 9px solid transparent;
}

.cp_ribbon_red:after {
    /*リボン下のカット部分*/
    top: 0;
    right: -10px;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 10px solid #c24760;
}

/*----------------------------
Swiperのスタイル設定
----------------------------*/
/* 初期表示時のちらつきを防ぐ */
.banner-section .bannerSwiper {
    opacity: 0;
    /* Swiperコンテナに相対位置を設定 */
    position: relative;
    padding-bottom: 30px;
}

.banner-section .bannerSwiper.is-ready {
    opacity: 1;
    transition: opacity 0.3s;
}

/* 非アクティブスライドを半透明に */
.banner-section .swiper-wrapper .swiper-slide {
    opacity: 0.5;
}

/* アクティブスライドは完全表示 */
.banner-section .swiper-wrapper .swiper-slide-active {
    opacity: 1;
}

/* ナビゲーションボタンの基本スタイル */
.banner-section .bannerSwiper .swiper-button-next,
.banner-section .bannerSwiper .swiper-button-prev {
    width: 50px;
    height: 50px;
    background-color: rgba(133, 133, 133, 0.4);
    border-radius: 50%;
    transition: transform 0.3s ease;
    color: white;
}

/* ホバー時のエフェクト */
.banner-section .bannerSwiper .swiper-button-next:hover,
.banner-section .bannerSwiper .swiper-button-prev:hover {
    transform: scale(1.2);
}

/* 矢印のサイズ調整 */
.banner-section .bannerSwiper .swiper-button-next:after,
.banner-section .bannerSwiper .swiper-button-prev:after {
    font-size: 15px;
    font-weight: 900;
}

/* ページネーションのスタイル */
.banner-section .bannerSwiper .swiper-pagination {
    bottom: 0;
}

.banner-section .bannerSwiper .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0.1;
    margin: 0 5px;
}

.banner-section .bannerSwiper .swiper-pagination-bullet-active {
    background: #333333;
    opacity: 1;
}

/*----------------------------
汎用アクション誘導ボタン
----------------------------*/
/* アクション誘導ボタン */
.btn-action {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border: none;
    letter-spacing: 1px;
}

/* 光の波エフェクト */
.btn-action:before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, 0.2),
            transparent);
    transition: all 0.8s;
}

/* ホバー時の浮き上がり効果 */
.btn-action:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 14px rgba(0, 0, 0, 0.25) !important;
}

/* ホバー時の光の波アニメーション */
.btn-action:hover:before {
    left: 100%;
}

/* アイコン用汎用クラス */
.icon-animate {
    transition: transform 0.3s ease;
    display: inline-block;
}

/* ホバー時のアイコン移動 */
.btn-action:hover .icon-animate {
    transform: translateX(5px);
}

/* =============================================
   新規事業プロデューサー養成講座専用CSS
   ============================================= */

/* 1. 基本レイアウト・背景 */
.bg-top-supporter-training {
    background: linear-gradient(rgba(12, 27, 46, 0.7), rgba(12, 27, 46, 0.5)),
        url('/wp-content/themes/TechnoproducerTheme/img/business-supporter-course_title-img.jpg') center center / cover no-repeat;
    min-height: 70vh;
    display: flex;
    align-items: center;
}

.header-img-offset {
    margin-top: 0;
    padding-top: 100px;
}

/* 2. ファーストビュー（ヒーローセクション） */
.hero-title {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
    font-weight: 700;
}

.hero-title-large {
    font-size: 3.5rem;
}

.hero-description {
    background: rgba(255, 255, 255, 0.96);
    color: #333;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    margin-top: 20px;
}

/* 3. モダンCTAセクション */
.modern-cta-section {
    background: linear-gradient(135deg, #20477a 0%, #4a90e2 100%);
    position: relative;
    overflow: hidden;
}

.modern-cta-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: rotate 20s linear infinite;
}

.floating-cta-container {
    position: relative;
    z-index: 1;
}

.cta-title-large {
    color: white;
    font-size: 2.5rem;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.cta-buttons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* 4. モダンボタンスタイル */
.modern-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border: none;
    font-size: 1rem;
}

.primary-btn {
    background: linear-gradient(135deg, #FFE135 0%, #FFC107 80%, #FFD54F 100%);
    color: #333;
}

.secondary-btn {
    background: rgba(255, 255, 255, 0.95);
    color: #20477a;
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(20px);
}

.modern-btn:hover {
    transform: translateY(-3px);
    text-decoration: none;
}

.primary-btn:hover {
    color: white;
    box-shadow: 0 15px 40px rgba(32, 71, 122, 0.6);
}

.secondary-btn:hover {
    background: rgba(255, 255, 255, 1);
    color: #20477a;
    box-shadow: 0 15px 40px rgba(255, 255, 255, 0.3);
}

/* 5. 専用アニメーションクラス */
.supporter-btn-action {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.supporter-btn-action:before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, 0.2),
            transparent);
    transition: all 0.8s;
}

.supporter-btn-action:hover:before {
    left: 100%;
}

.supporter-icon-animate {
    transition: transform 0.3s ease;
    display: inline-block;
}

.supporter-btn-action:hover .supporter-icon-animate {
    transform: translateX(5px);
}

/* 6. 成果セクション */
.bg-outcomes-supporter {
    background: linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.92)),
        url('/wp-content/themes/TechnoproducerTheme/img/business-supporter-course_outcomes-bg.jpg') center center / cover no-repeat;
    background-attachment: fixed;
}

.outcome-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.outcome-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.outcome-number {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* 7. プログラム・ステップカード */
.step-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.step-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* 8. 学習スキームセクション */
.learning-card-modern {
    border: 1px solid #e9ecef;
}

.learning-number-modern {
    background: linear-gradient(135deg, #20477a 0%, #4a90e2 100%);
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.5rem;
    font-family: 'Arial', sans-serif;
    line-height: 1;
}

.learning-icon {
    font-size: 2.5rem;
    color: #20477a;
    margin-bottom: 1.5rem;
}

/* 9. 対象者セクション */
.target-job,
.target-recommend {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.target-job:hover,
.target-recommend:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.recommend-item {
    transition: transform 0.2s ease;
}

.recommend-item:hover {
    transform: translateX(5px);
}

.recommend-icon {
    font-size: 1.2rem;
    margin-top: 0.2rem;
}

/* 10. 料金セクション */
.pricing-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pricing-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.additional-discounts {
    border: 1px solid #e9ecef;
}

.discount-item {
    transition: transform 0.2s ease;
}

.discount-item:hover {
    transform: translateX(5px);
}

.payment-info {
    border: 1px solid #e9ecef;
}

/* 11. アニメーションキーフレーム */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* 12. レスポンシブデザイン */
@media (max-width: 768px) {
    .header-img-offset {
        padding-top: 80px;
    }

    .bg-top-supporter-training {
        min-height: 60vh;
    }

    .hero-title-large {
        font-size: 2.5rem;
    }

    .hero-description {
        padding: 15px;
    }

    .cta-buttons-grid {
        grid-template-columns: 1fr;
    }

    .cta-title-large {
        font-size: 2rem;
    }

    .outcome-number {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    .learning-number-modern {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }

    .learning-icon {
        font-size: 2rem;
    }
}

@media (max-width: 576px) {
    .discount-item .d-flex {
        flex-direction: column;
        text-align: center;
    }
}

/* =============================================
   サービス紹介ページ - プロデューサー養成講座リンク用CSS
   ============================================= */

/* 1. カード画像部分の高さ統一 */
.card-img-unified {
    height: 240px;
}

/* 2. スマホ表示時の高さ調整 */
@media screen and (max-width:768px) {
    .card-img-unified {
        height: 180px;
    }
}

/* 3. プロデューサー養成講座カード用背景画像 */
.service_business-supporter {
    background: linear-gradient(rgba(12, 27, 46, 0.8), rgba(12, 27, 46, 0.6)),
        url('/wp-content/themes/TechnoproducerTheme/img/producer-corporate_title-img.jpg') center center / cover no-repeat;
}

/* =============================================
   AIレポート専用の表スタイル
   ============================================= */
/* AIレポートの個別記事ページ */
.single-ai-report table {
    border-collapse: collapse;
    width: 100%;
    max-width: 1000px;
    margin: 2rem auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

/* テーブルセル */
.single-ai-report table td {
    padding: 12px 15px;
    border-bottom: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
}

.single-ai-report table td:last-child {
    border-right: none;
}

/* 縞模様 */
.single-ai-report table tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}

/* 最終行のボーダー削除 */
.single-ai-report table tbody tr:last-child td {
    border-bottom: none;
}

/* =============================================
   新規事業プロデューサー養成講座（企業内開催）専用CSS
   ============================================= */

/* =============================================
   1. ファーストビュー
   ============================================= */
.bg-top-producer-corporate {
    background: linear-gradient(rgba(12, 27, 46, 0.7), rgba(12, 27, 46, 0.5)),
        url('/wp-content/themes/TechnoproducerTheme/img/producer-corporate_title-img.jpg') center center / cover no-repeat;
    min-height: 70vh;
    display: flex;
    align-items: center;
}

.producer-hero-title {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
    font-weight: 700;
}

.producer-hero-title-main {
    font-size: 3.5rem;
    line-height: 1.3;
}

.producer-hero-subtitle {
    font-size: 1.4rem;
    letter-spacing: 0.1em;
}

.producer-hero-description {
    background: rgba(255, 255, 255, 0.96);
    color: #333;
    padding: 30px 48px;
    border-radius: 10px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    margin-top: 20px;
    border-left: 6px solid #f6ad55;
}

@media (max-width: 768px) {
    .producer-hero-title-main {
        font-size: 2.2rem;
    }

    .producer-hero-subtitle {
        font-size: 1.1rem;
    }

    .producer-hero-description {
        padding: 20px 25px;
    }
}

/* =============================================
   2. CTA共通スタイル
   ============================================= */
.producer-cta-container {
    position: relative;
    z-index: 1;
}

.producer-cta-title {
    color: white;
    font-size: 2rem;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.producer-cta-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 768px) {
    .producer-cta-buttons {
        grid-template-columns: 1fr;
    }
}

/* =============================================
   3. ボタンスタイル
   ============================================= */
.producer-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border: none;
    font-size: 1rem;
}

.producer-btn-primary {
    background: linear-gradient(135deg, #FFE135 0%, #FFC107 80%, #FFD54F 100%);
    color: #333;
}

.producer-btn-secondary {
    background: rgba(255, 255, 255, 0.95);
    color: #20477a;
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(20px);
}

.producer-btn:hover {
    transform: translateY(-3px);
    text-decoration: none;
}

.producer-btn-primary:hover {
    color: white;
    box-shadow: 0 15px 40px rgba(32, 71, 122, 0.6);
}

.producer-btn-secondary:hover {
    background: rgba(255, 255, 255, 1);
    color: #20477a;
    box-shadow: 0 15px 40px rgba(255, 255, 255, 0.3);
}

/* =============================================
   4. SECTION 1: 課題提起
   ============================================= */

/* チャートボックス */
.chart-box {
    background: #fff;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    height: 100%;
}

/* 円グラフ */
.producer-pie-chart {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: conic-gradient(#2d3748 0% 5%,
            #4a5568 5% 21%,
            #718096 21% 37%,
            #ed8936 37% 67%,
            #cbd5e0 67% 78%,
            #e2e8f0 78% 100%);
    position: relative;
}

.producer-pie-chart::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background: #fff;
    border-radius: 50%;
}

/* 凡例 */
.chart-legend {
    font-size: 0.85rem;
}

.legend-group-wrap {
    margin-bottom: 8px;
}

.legend-group-header {
    font-weight: bold;
    font-size: 0.8rem;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
}

.legend-group-gray {
    background: #4a5568;
    color: #fff;
}

.legend-group-orange {
    background: #ed8936;
    color: #fff;
}

.legend-group-other {
    background: #e2e8f0;
    color: #666;
}

.legend-items {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}

.legend-item {
    display: inline-flex;
    align-items: center;
    color: #555;
    font-size: 0.8rem;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 5px;
    display: inline-block;
}

.legend-dot-1 {
    background: #2d3748;
}

.legend-dot-2 {
    background: #4a5568;
}

.legend-dot-3 {
    background: #718096;
}

.legend-dot-4 {
    background: #ed8936;
}

.legend-dot-5 {
    background: #cbd5e0;
}

.legend-dot-6 {
    background: #e2e8f0;
}

/* つまりボックス */
.producer-summary-box {
    background: #fdf2f4;
    border-radius: 8px;
    padding: 20px 25px;
    margin-top: 1.5rem;
}

.producer-summary-box p {
    margin-bottom: 0;
    line-height: 1.7;
}

/* テキストカラー：濃い赤 */
.text-dark-red {
    color: #c24760;
}

/* 棒グラフ */
.bar-chart-row {
    margin-bottom: 15px;
}

.bar-label {
    font-size: 0.9rem;
    margin-bottom: 5px;
    font-weight: bold;
}

.bar-container {
    background: #e2e8f0;
    height: 24px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.bar-fill {
    height: 100%;
    border-radius: 12px;
}

.bar-fill-1 {
    width: 92%;
    background: #2980b9;
}

.bar-fill-2 {
    width: 83%;
    background: #2980b9;
}

.bar-fill-3 {
    width: 71%;
    background: #2980b9;
}

.bar-fill-4 {
    width: 58%;
    background: #cbd5e0;
}

.bar-fill-5 {
    width: 50%;
    background: #cbd5e0;
}

.bar-num {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold;
    font-size: 0.85rem;
    color: #333;
}

/* シンプルリスト */
.simple-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.simple-list li {
    position: relative;
    padding-left: 1.2em;
    margin-bottom: 0.4em;
    color: #4a5568;
}

.simple-list li::before {
    content: "・";
    position: absolute;
    left: 0;
    color: #718096;
}

@media (max-width: 768px) {
    .producer-pie-chart {
        width: 160px;
        height: 160px;
    }

    .producer-pie-chart::after {
        width: 80px;
        height: 80px;
    }

    .chart-legend {
        font-size: 0.75rem;
    }

    .legend-group-header {
        font-size: 0.7rem;
    }

    .legend-item {
        font-size: 0.7rem;
    }

    .bar-label {
        font-size: 0.8rem;
    }
}

/* =============================================
   5. SECTION 2: 支援者が育てば
   ============================================= */

/* セクションタイトル */
.section-title-wrap {
    text-align: center;
    margin-bottom: 2rem;
}

.section-title-wrap h2 {
    font-weight: bold;
    color: #0C1B2E;
    display: inline-block;
    position: relative;
    padding-bottom: 1rem;
}

.section-title-wrap h2::after {
    content: "";
    display: block;
    width: 60px;
    height: 4px;
    background: #ffab0f;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

/* サポーターカード */
.supporter-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.supporter-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12) !important;
}

.supporter-card-icon {
    font-size: 2.5rem;
    color: #a0aec0;
    margin-bottom: 1rem;
}

.supporter-card-list li {
    position: relative;
    padding-left: 1.5em;
    margin-bottom: 0.5em;
    font-size: 0.9rem;
    color: #4a5568;
}

.supporter-card-list li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    color: #a0aec0;
}

.supporter-card-highlight {
    background: #f7f7f7;
    border: 4px solid #4a5568;
}

/* =============================================
   6. SECTION 3: 特徴カード
   ============================================= */
.feature-card {
    background: #fff;
    border-radius: 8px;
    border: 1px solid #f0f0f0;
    padding: 3rem 2rem;
    position: relative;
    overflow: hidden;
}

.feature-num-bg {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 4rem;
    font-weight: 700;
    font-family: "Akshar", sans-serif;
    color: rgba(0, 0, 0, 0.06);
    line-height: 1;
    pointer-events: none;
    z-index: 0;
}

.feature-card p {
    position: relative;
    z-index: 1;
}

.feature-example-box {
    background: #fafafa;
    padding: 1rem;
    margin-top: 1rem;
    position: relative;
    z-index: 1;
}

.feature-step-box {
    background: rgba(1, 60, 115, 0.03);
    border-left: 3px solid #4a5568;
    padding: 0.25rem 1rem;
    position: relative;
    z-index: 1;
}

.feature-step-title {
    font-weight: bold;
    color: #333;
    margin-bottom: 0.25rem;
}

.feature-check-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.feature-check-list li {
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    position: relative;
}

.feature-check-list li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    color: #4a90b8;
}

@media (max-width: 991px) {
    .feature-num-bg {
        font-size: 4rem;
    }

    .feature-card {
        padding: 1.5rem;
    }
}

/* =============================================
   7. SECTION 4: 開催形式・参加対象者
   ============================================= */
.format-target-wrap {
    overflow: hidden;
}

.format-box {
    background: #fff;
    padding: 2rem;
}

.format-box-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 1.5rem;
}

.format-box-title i {
    color: #718096;
}

.format-table {
    width: 100%;
}

.format-table th,
.format-table td {
    padding: 0.75rem 0;
    vertical-align: top;
    border-bottom: 1px solid #f0f0f0;
}

.format-table tr:last-child th,
.format-table tr:last-child td {
    border-bottom: none;
}

.format-table th {
    width: 130px;
    font-weight: bold;
    color: #4a5568;
    padding-right: 1.5rem;
}

.target-box {
    background: #f0f4f8;
    padding: 2rem;
}

.target-box-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 1rem;
}

.target-box-title i {
    color: #718096;
}

.target-dept-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.target-dept-grid span {
    color: #333;
    font-size: 1.1rem;
}

.target-dept-grid i {
    color: #f6ad55;
}

.target-note {
    color: #718096;
    font-size: 0.9rem;
    text-align: center;
    margin-bottom: 0;
    padding-top: 1rem;
    border-top: 1px solid #dce3e9;
}

@media (max-width: 991px) {
    .format-box {
        border-bottom: 1px solid #e2e8f0;
    }

    .format-table th {
        width: 110px;
        padding-right: 1rem;
    }
}

@media (max-width: 576px) {
    .target-dept-grid {
        grid-template-columns: 1fr;
    }

    .format-box,
    .target-box {
        padding: 1.5rem;
    }

    .target-dept-grid span {
        font-size: 1rem;
    }
}

/* =============================================
   8. SECTION 5: 受講により得られる主な成果
   ============================================= */
.producer-outcome-card {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 1.5rem;
    border-left: 2px solid #f6ad55;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.producer-outcome-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.producer-outcome-check-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.producer-outcome-check-list li {
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    position: relative;
    font-size: 0.95rem;
}

.producer-outcome-check-list li:last-child {
    margin-bottom: 0;
}

.producer-outcome-check-list li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    color: #f6ad55;
}

@media (max-width: 991px) {
    .producer-outcome-card {
        padding: 1.25rem;
    }
}

/* =============================================
   9. SECTION 6: 開催費用
   ============================================= */
.price-card {
    background: #fff;
    border: 2px solid #718096;
    border-radius: 4px;
    padding: 2.5rem;
    text-align: center;
}

.price-condition {
    font-size: 1rem;
    color: #555;
    margin-bottom: 1rem;
}

.price-amount {
    font-size: 4rem;
    font-weight: bold;
    color: #555;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

.price-unit {
    font-size: 1.5rem;
    font-weight: normal;
}

.price-note {
    font-size: 0.875rem;
    color: #718096;
    margin-bottom: 2rem;
}

.price-breakdown {
    background: #f8f9fa;
    border-radius: 4px;
    padding: 1.5rem;
    text-align: left;
}

.price-breakdown-title {
    font-weight: bold;
    color: #4a5568;
    margin-bottom: 0.75rem;
}

.price-breakdown-list {
    margin-bottom: 0;
    padding-left: 1.25rem;
}

.price-breakdown-list li {
    margin-bottom: 0.5rem;
    color: #555;
}

.price-breakdown-list li:last-child {
    margin-bottom: 0;
}

.price-cta-link {
    color: #6c757d;
    text-decoration: underline;
}

.price-cta-link:hover {
    color: #555;
}

@media (max-width: 768px) {
    .price-card {
        padding: 1.5rem;
    }

    .price-amount {
        font-size: 3rem;
    }

    .price-unit {
        font-size: 1.25rem;
    }
}

/* =============================================
   10. SECTION 7: よくある質問
   ============================================= */
.faq-list {
    max-width: 900px;
    margin: 0 auto;
}

.faq-item {
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    margin-bottom: 1rem;
    background: #fff;
}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1rem;
    background: none;
    border: none;
    text-align: left;
    font-size: 1rem;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    transition: background 0.2s;
}

.faq-question:hover {
    background: #f8f9fa;
}

.faq-question:focus {
    outline: none;
}

.faq-icon {
    color: #718096;
    transition: transform 0.3s;
    flex-shrink: 0;
    margin-left: 1rem;
}

.faq-question[aria-expanded="true"] .faq-icon {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 0 1rem 1.25rem 1rem;
    color: #555;
    line-height: 1.8;
}

@media (max-width: 768px) {
    .faq-question {
        padding: 1rem 0.75rem;
        font-size: 0.95rem;
    }

    .faq-answer {
        padding: 0 0.75rem 1rem 0.75rem;
    }
}