@charset "utf-8";
.main{
    max-width: 1200px;
    margin: 100px auto;
}

/*リンクの設定*/

.main a:hover {
    opacity: .6;
}

a:active {
    opacity: .6;
}

/*リストの点をなくす*/
#navigation ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    line-height: 0;
}

/*clearfixの設定*/
.clearfix:after {
    content: '';
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}

.clearfix {
    zoom: 1;
}

/*IE6,7用*/

.recommend_left {
    float: left;
    width: 180px;
    padding-top: 10px;
}

.recommend_right {
    float: left;
    width: 435px;
    padding: 10px;
}

.date {
    float: left;
    width: 80px;
    padding-left: 7px;
    padding-top: 3px;
}

.topic {
    width: 80%;
    float: left;
    padding-left: 7px;
    padding-top: 3px;
    text-align: left;
    margin: 0 auto;
}
.topic img{
    width: 48%;
}
.splitline {
    border-bottom: 1px dotted #525252;
    color: #333333;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

/*スクロールバーを表示する*/
html {
    overflow-y: scroll;
}


/*--▼ヘッダーの設定を開始--*/

/*ヘッダーエリアの幅を画面全体に*/
#headerArea {
    width: 100%;
    position: relative;
    min-width: 960px;
    border-bottom: 5px solid #1E2170;
    margin: 0px;
    padding: 0;
}

/*ヘッダーの中身(クラスin）の幅を940で左右マージンauto*/
div.in {
    width: 940px;
    margin: 0px auto;
    /*　左右マージンauto*/
}

/*会社名を左に*/
div.in h2.left {
    float: left;
    font-size: 130%;
    margin: 3px;
}

div#headerArea img {
    vertical-align: text-bottom;
}

/*お問い合わせを右に*/
div.in ul#utility li {
    float: right;
    margin: 50px 0 0 0;
    display: block;
}

/*ナビゲーション枠を画面全体に*/
#navigation {
    width: 100%;
    position: relative;
    background: url(../images/btn.png) 0 repeat-x;
    height: 60px;
    padding: 0;
    margin: 0;
    text-align: center;
}

/*ナビゲーションの位置を決定*/
ul#navi {
    width: 940px;
    /* ヘッダメニューの幅 */
    margin: 0 auto;
    /* センタリング */
    padding: 0px;
    text-align: center;
}

/*ナビゲーションの中身を水平にかつリンクの幅を指定*/
ul#navi li {
    float: left;
    line-height: 100%;
    padding: 0;
}

/*homeの幅とリンク設定*/
ul#navi li a#naviFarst {
    display: block;
    width: 63px;
}

/*home画像のボーダー*/
#navigation img {
    border-width: 1px 1px 0px;
    /* リンクエリアの境界線の太さ（上、左右、下） */
    border-color: #ffffff #b2b2b2 #808080 #b2b2b2;
    /* リンクエリアの境界線色（上右下左） */
    border-style: solid;
    /* リンクエリアの境界線スタイル */
}

/*その他5つの幅設定*/
ul#navi li a.navi {
    display: block;
    width: 174px;
}




/*--▲ヘッダーの終了--*/

/*--▼メインコンテンツの設定--*/

/*contentsAreaの設定-ヘッダー後の画面全体の設定*/
.main{
    margin-top: 100px;
}
#contentsArea {
    width: 100%;
    min-width: 960px;
    padding-top: 100px;
    margin-top: -100px;
}


/*--▼トップページの設定--*/

/*mainVisual(トップ画像)の設定*/
.in #mainVisual {
    margin-top: 5px;
}


/*商品ラインナップの設定*/

/*上のボックス（商品ラインナップ）の設定*/
#upperArea {
    width: 934px;
    height: auto;
    /*幅と高さ*/
    border: 3px solid #f0f0f0;
    background: #ffffff;
    /*枠線と背景の色指定*/
    margin: 1.5em 0;
    /*(上下　左右）*/
    padding-bottom: 1em;
}

div.mediumBox {
    width: 280px;
    height: auto;
    /*幅と高さ*/
    border: 3px solid #a0a0a0;
    background: #ffffff;
    /*枠線と背景の色指定*/
    float: left;
    display: inline;
    margin-left: 19px;
    /*一列に並べ、左にマージン19ｐｘ*/
    position: relative;
    overflow: hidden;
    padding: 0;
}

/*見出しの位置設定*/
div#titleBlock {
    margin-bottom: 25px;
    width: 934px;
    position: relative;
}

/*商品ラインナップ（文字）の位置設定*/
div#titleBlock h1#title {
    margin-top: 10px;
    padding-bottom: 0;
    margin-bottom: 0;
    font-size: 120%;
}

/*商品ラインアップとProductの文字位置設定とボーダー設定*/
div#title {
    float: left;
    padding: 0px;
    margin: 10px 10px 0px 10px;
    /*上右下左*/
    border-right: 2px solid #add8e6;
    padding-right: 15px;
}

/*productなど英字の文字設定*/
span.smallEn {
    margin-top: 2px;
    /* 英字部分の上マージン */
    font-size: 8px;
    /* 英字の文字サイズ */
    font-weight: normal;
    /* 文字の太さ（ノーマル） */
    padding-left: 20px;
    color: #add8e6;
}

/*説明文の設定*/
div#titleBlock p#comment {
    padding: 20px 350px 0 0;
    text-align: left;
    line-height: 100%;
    float: right;
    font-weight: bold;
    _display: inline;
    /*IE用*/

}

/*文字の設定*/
#titleBlock h1,
#underArea h1,
p {
    margin: 0px;
    padding: 0px;
    line-height: 100%;
    text-align: left;
    font-size: 100%;
}


/*画像の設定*/
div.mediumBox img.top {
    margin: 35px auto 10px auto;
}


/*3つの商品情報の見出し設定*/
h2.subtitle {
    font-family: Arial;
    width: 260px;
    font-size: 130%;
    height: 10px;
    padding: 0;
    margin: 0.5em auto 1em auto;
}

div.mediumBox p {
    width: 260px;
    text-align: justify;
    padding: 0 0 0 7px;
    line-height: 120%;
    height: 30px;
    margin-bottom: 1.5em;
}

/*リンク設定*/
a.t {
    text-decoration: none;
    height: auto;
    display: block;
    margin: 0;
    padding: 0;
}

a.t:link {
    color: #202020;
}

a.t:visited {
    color: #202020;
}

a.t:hover {
    color: #606060;
    cursor: pointer;
}

    a.t:hover img {
        opacity: 0.6;
    }

a.t:active {
    color: #202020;
}

/*商品情報のリンク設定*/
a.medibox {
    text-decoration: none;
    width: 274px;
    height: auto;
    display: block;
    margin: 0;
    padding: 0;
}

/*下のエリア（事業部・お問い合わせ）のリンク設定*/
a.small {
    text-decoration: none;
    width: 194px;
    height: 174px;
    display: block;
    margin: 0;
    padding: 0;
}

/*--下のエリア（新着・事業部・お問い合わせ）の設定--*/
#underArea {
    margin-bottom: 20px;
    margin-top: 20px;
}

/*--新着情報の設定--*/
div#leftBox {
    width: 500px;
    height: 180px;
    border: 3px solid #f0f0f0;
    background: #ffffff;
    overflow: hidden;
}

/*文字部分の設定*/
dl.news {
    width: 494px;
    height: auto;
    border: none;
    margin: 0 auto;
    /* センタリング */
    zoom: 1;
    line-height: 140%;
}




/*一覧を見る*/
#leftBox dl.news a.more {
    float: right;
    margin: 0 0 6px 0;
    text-decoration: none;
    /* テキストの下線（なし） */
    color: #666666;
    /* 文字色 */
}




/*--下3つのボックス内見出しの設定--*/
#underArea h1.title {
    padding-top: 10px;
    padding-left: 5px;
    font-size: 14px;
}

/*説明文の設定*/
#underArea p.passage {
    padding: 15px 10px;
}

/*下のボックス内文字設定*/


/*--事業部案内とお問い合わせの設定--*/

/*下２つボックスの設定*/
div.smallBox {
    width: 198px;
    height: 180px;
    border: 3px solid #f0f0f0;
    background: #ffffff;
    margin-left: 10px;
    overflow: hidden;
}

/*下2つの文字の英字の設定*/
span.smallEn {
    margin-top: 2px;
    /* 英字部分の上マージン */
    font-size: 8px;
    /* 英字の文字サイズ */
    font-weight: normal;
    /* 文字の太さ（ノーマル） */
    padding-left: 10px;
    color: #add8e6;
}

/*横に並べる*/
div#leftBox {
    float: left;
    display: inline;
}

div.smallBox {
    float: left;
    display: inline;
}



/*--▲トップページの設定終了--*/


/*--▼下層ページの設定--*/

    /* margin-top: 50px; */
/*右側コンテンツの設定*/
#sectionRight {
    float: right;
    width: 75%;
}

/*seedsの設定*/
.seeds {
    margin: 20px 0 10px 0;
}

/*ページタイトルの設定*/
div#pageTitle {
    width: 650px;
    height: 50px;
    border: 3px solid #f0f0f0;
    background-color: #ffffff;
    margin: 0;
    padding: 0.5em 10px 0.5em 20px;
}

div#pageTitle h2#pageTitle {
    border-left: 5px solid #3faea1;
    padding: 0 0 0 5px;
    margin: 0.5em 5px;
    font-size: 1.8rem;
    text-align: left;
}

/*文字の位置設定とボーダーの設定*/

/*コンテンツのボックスの設定*/
div.baseBox {
    width: 80%;
    height: auto;
    border: 3px solid #f0f0f0;
    background-color: #ffffff;
    padding: 1em 10px 1em 20px;
    margin: 2em auto 1em;
    overflow: hidden;
}

/*見出し文字の設定*/
h1.headline {
    text-align: left;
    line-height: 1.2;
    margin: 5px 0 0.5em 0;
    width: 100%;
    padding: 0 0 0.5em 0;
    border-bottom: 5px solid #3faea1;
    font-size: 2.4rem;
}
div.baseBox p {
    text-align: left;
    line-height: 1.6;
    padding: 2px 10px 0 5px;
    width: 100%;
    margin-right: 10px;
}
div.baseBox .text{
    margin-bottom: 15px;
    line-height: 1.6;
    font-size: 1.5rem;
    letter-spacing: .03em;

}
div.baseBox .text a {
    color: #3faea1;
}
p.fin {
    text-align: left;
    line-height: 150%;
    width: 550px;
    margin: 0 0 20px 10px;
}

p.access {
    text-align: left;
    line-height: 150%;
    width: 550px;
    padding-top: 2px;
    margin: 10px 0 0 10px;
}

/*p強調*/

p.strong {
    font-weight: bolder;
    margin: 0.5em 0 0.5em 10px;
}

/*新着情報・展示会情報のリスト部分設定*/
dl.list {
    width: 600px;
    height: auto;
    border: none;
    margin: 0 auto;
    /* センタリング */
    overflow: hidden;
    zoom: 1;
}

/*（商品情報）小ボックスの設定*/
div.itemBox {
    width: 200px;
    height: 290px;
    border: 2px solid #a0a0a0;
    background: #ffffff;
    position: relative;
    margin: 1em 0 1em 12px;
    float: left;
    display: inline;
    /*横に並べる*/
    overflow: hidden;
}

/*最初をそろえる*/
div.itemBox#firstBox,
#sfirstBox,
div.oblong#obFirst {
    margin-left: 5px;
}

/*横長長方形の設定*/
div.oblong {
    width: 309px;
    height: 100px;
    margin: 20px 0 20px 10px;
    padding: 0;
    border: 2px solid #a0a0a0;
    background: #ffffff;
    position: relative;
    float: left;
    display: inline;
    /*横に並べる*/
    overflow: hidden;
}

/*小ボックスの文字設定*/
div.itemBox h1.subtitle {
    margin: 0;
    padding: 5px;
    width: 186px;
    font-size: 120%;
    height: 30px;
}

/*アイテムボックス*/
div.baseBox p.item {
    width: 186px;
    height: 80px;
    margin: 0 5px 0 5px;
}

/*横長長方形の文字設定*/
.oblong h1 {
    width: 190px;
    text-align: left;
    float: right;
}

.oblong#obFirst h1 {
    margin: 10px 0 0 0;
    padding: 0;
}

.oblong h1#warifu {
    width: 175px;
    padding: 0;
    margin: 1em auto;
    text-align: left;
    font-size: 120%;
}

.oblong h1#d {
    text-align: left;
    width: 150px;
    font-size: 120%;
    float: right;
    margin: 30px 0 10px 10px;
}

/*横長長方形のリンク設定*/
.oblong a.ob {
    text-decoration: none;
    width: 305px;
    height: 96px;
    display: block;
    margin: 0;
    padding: 0;
}

/*横ボックスの中の設定*/
/*画像の設定*/
div.oblong img {
    float: left;
    margin-right: 5px;
    padding: 5px;
}

/*画像の設定*/
img.contents {
    padding: 2px;
}

img.solution {
    padding: 2px;
}

div.baseBox div.recommend_right p {
    width: 435px;
}

/*商品情報下の段ボックス内タイトル*/
div.baseBox h1.undertitle {
    width: 186px;
    height: 45px;
    padding: 5px;
    margin: 0;
    text-align: center;
    font-size: 120%;
}



/*---▼サイドメニューの設定---*/

div#sectionLeft {
    width: 20%;
    height: auto;
    padding: 0;
    margin: 0;
    float: left;
}

/*---うえのボックスの設定---*/
div#sideMenu {
    width: 100%;
    height: auto;
    border: 2px solid #e0e0e0;
    background: #ffffff;
    margin: 0;
}

div#sideMenu ul.sideBar {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: left;
    font-size: 120%;
}

/*中点なし、左揃えマージンとパディングゼロ*/
div#sideMenu ul.sideBar li {
    padding: 8px 3px;
}

/*パッディング（上下、左右）*/

/*---詳細のメニュー設定---*/
div#sideMenu ul.subMenu li {
    text-align: left;
    list-style-type: none;
    font-size: 1.4rem;
}

/*詳細のバーの設定*/
div#sideMenu ul.subMenu li a {
    display: block;
    position: relative;
    /* IE6用 */
    text-decoration: none;
    /* テキストの下線（なし） */
    border-bottom: 1px #c0c0c0 dotted;
    padding: 8px 4px;
    /* リンクエリアのパディング（上下、左右） */
    font-weight: normal;
}

div#sideMenu ul.subMenu li a#last {
    border: 2px solid #ffffff;
}

/*---全体のリンクの設定---*/
div#sideMenu ul.sideBar li a {
    display: block;
    position: relative;
    /* IE6用 */
    text-decoration: none;
    /* テキストの下線（なし） */
}
li#fast {
    border-left: 5px solid #add8e6;
    /*見出しの左ボーダー*/
    margin: 5px 0 2px 5px;
    padding: 3px 0 2px 2px;
    font-weight: bolder;
}

/*見出し文字設定*/

/*---見出し部分の文字設定--*/
/*サイドメニューの一番上の見出し設定*/
div#sideMenu span#capture {
    border-left: 5px solid #3faea1;
    /*見出しの左ボーダー*/
    margin: 2px 0 2px 3px;
    padding: 8px 0 8px 2px;
    font-size: 1.4rem;
    font-weight: bolder;
}
.empty{
    display: block;
    height: 1px;
    padding-top: 60px;
    margin-top: -60px;
}
/*見出し文字設定*/
div#sideMenu span.active {
    border-bottom: 2px solid #3faea1;
    /* アクティブ時の下境界線色 */
    background: #fff repeat-x;
    /*アクティブ時の背景*/
    display: block;
    font-size: 100%;
}

/*商品・サービス情報の中見出し（下線付き）部分の設定*/
div#sideMenu span.capture {
    border-bottom: 3px solid #add8e6;
    /*見出し下線*/
    font-weight: bolder;
    display: block;
    font-size: 100%;
    padding-left: 13px;
}


/* --- ポイント時の設定 --- */
div#sideMenu ul.sideBar li a:link,
#sideMenu ul.sideBar li a:visited {
    color: #505050;
}

/*リンク(通常）と訪問済みの設定*/
/*マウスオーバーとアクティブ時*/
div#sideMenu ul.sideBar li a:hover,
div#sideMenu ul.subMenu li a#last:hover,
div#sideMenu ul.sideBar ul.subMenu li a:hover,
div#sideMenu ul.sideBar li a:active,
div#sideMenu ul.subMenu li a#last:active div#sideMenu ul.sideBar ul.subMenu li a:active {
    /* border-bottom: 2px solid #add8e6; */
    /* ポイント時の下境界線色 */
    background-color: #f0f0f0;
    /*ポイント時の背景*/
}

/*アクティブになっている見出しメニュー*/
li.active {
    border-bottom: 2px solid #add8e6;
    /* アクティブ時の下境界線色 */
    background-color: #f0f0f0;
    /*アクティブ時の背景*/
}

/*---お問い合わせの設定---*/
div#contactMenu {
    width: 230px;
    height: auto;
    border: 2px solid #e0e0e0;
    background: #ffffff;
    padding-top: 10px;
    margin: 10px 0px;
    padding-bottom: 0.3em;
    /* セクションの下パディング */
}

div#contactMenu h1 {
    width: 220px;
    text-align: left;
    line-height: 100%;
    border-left: 5px solid #add8e6;
    padding: 0 5px;
    margin: 3px 0 10px 10px;
    font-size: 120%;
}

div#contactMenu p {
    margin-bottom: 15px;
    /* 段落の下マージン（上書き） */
    margin-left: 15px;
}

div#contactMenu p#con {
    margin-bottom: 0px;
    padding: 0;
}

div#contactMenu p.tel {
    margin-bottom: 10px;
    /* 段落の下マージン（上書き） */
    font-size: 150%;
    /* 電話番号の文字サイズ */
    font-weight: bold;
    /* 文字の太さ（太字） */
    color: #2b2b2b;
    /* 電話番号の文字色 */
}

/*----▲サイドメニューの設定---*/

/* 事業部案内の展示情報のリスト設定*/
dl.list {
    width: 600px;
    height: auto;
    border: none;
    margin: 0 auto;
    /* センタリング */
    overflow: hidden;
}

dl.list dt {
    /* 日付エリアの幅 */
    float: left;
    font-size: 1.2rem;
    padding: 4px 0 5px 3px;
    /* 日付エリアのパディング（上右下左） */
    line-height: 100%;
    /* 行の高さ */
    text-align: left;
}

/* 本文エリア */
dl.list dd {
    font-size: 1.4rem;
    padding: 4px 3px 5px 10.5em;
    /* 本文エリアのパディング（上右下左） */
    line-height: 1.5;
    /* 行の高さ*/
    margin: 0;
    border-bottom: 1px #c0c0c0 dotted;
    /* 本文エリア下境界線 */
    text-align: left;
}

/*アクセスページの設定*/

p.ac {
    margin: 30px 40px;
}

/*ページのトップに戻るの設定*/
a.return {
    float: right;
    text-decoration: none;
    color: #000000;
    margin: 0 120px 1em 0;
}


/*---▲下層ページの設定終了--*/


/*----▲記事内の設定（products.cssから引用）---*/
#detail {
    max-width: 1200px;
    margin: 0 auto;
}

.case-study {
    background-color: #f5f6f7;
    padding-bottom: 10px;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 100px;
    padding: 0px 10px;
    margin-bottom: 75px;
}

    .detail-item img,
    .case-item img {
        margin-top: 35px;
        display: block;
        width: 100%;
        object-fit: contain;
    }

    .detail-item .image01 {
        width: 60%;
        margin: 20px auto;
    }

.detail-text p .sup {
    vertical-align: super;
    font-size: 1.6rem;
}

.case-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px;
    background-color: #fff;
    margin-top: 0;
    margin-bottom: 25px;
}

    .case-item:nth-of-type(1) {
        margin-top: 100px;
    }

    .detail-item > div:first-child, .case-item > div:first-child {
        width: 58%;
    }

    .detail-item > div:last-child, .case-item > div:last-child {
        width: 38%;
    }

.detail-text h2 {
    font-size: 2.4rem;
    letter-spacing: 0.05em;
    padding-bottom: 10px;
    border-bottom: 1px solid #3faea1;
    margin-bottom: 20px;
}

.detail-text h1 {
    padding-left: 2em;
    margin-top: 1em;
    margin-bottom: 0.5em;
}

.detail-text p.list-check {
    padding-left: 2.4em; /* ← h1 と揃える */
    margin-top: 0;
    margin-bottom: 1em;
}

.detail-text span {
    display: inline-block;
    font-size: 2.4rem;
    letter-spacing: .05em;
    align-items: center;
}

.detail-text .number {
    text-align: center;
    padding-right: 10px;
    display: inline-block;
    color: #3faea1;
    font-size: 2.4rem;
}

.detail-text p {
    font-size: 1.6rem;
    line-height: 1.8;
    letter-spacing: .05em;
    margin-bottom: 25px;
    margin-top: 40px;
}

.border {
    border-top: 1px solid #3faea1;
}

.detail-text h4 {
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: .05em;
    margin: 20px 0px 40px;
    background-color: #DFF8F5;
    text-align: center;
    padding: 10px;
}

.list-8 {
    position: relative;
    padding: 1.5em 1em 1em 2.5em;
    border: 2px solid #3faea1;
}

    .list-8 > div {
        position: absolute;
        top: -.75em;
        left: 1em;
        padding: 0 .5em;
        background-color: #fff;
        color: #3faea1;
        font-weight: 600;
    }

    .list-8 ul {
        list-style-type: disc;
        margin: 0;
        padding: 0;
    }

    .list-8 li {
        padding: .3em .3em .3em 0;
    }

        .list-8 li::marker {
            color: #3faea1;
            font-size: 1.1em;
        }

.heading-27 {
    display: flex;
    align-items: center;
    column-gap: 8px;
    color: #333333;
}

    .heading-27::before {
        width: 0.8em;
        height: 0.4em;
        border-bottom: 4px solid #2589d0;
        border-left: 4px solid #2589d0;
        transform: rotate(-45deg) translate(2px, -2px);
        content: '';
    }

.list-check {
    position: relative;
    padding: 1.5em 1em 1em 2.5em;
    border: none;
    font-size: 1.6rem;
    line-height: 250%;
}

    .list-check > div {
        position: absolute;
        top: -.75em;
        left: 1em;
        padding: 0 .5em;
        background-color: #fff;
        color: #3faea1;
        font-weight: 600;
    }

    .list-check ul,
    .list-number {
        margin: 0;
        padding: 0;
        list-style-position: inside;
    }

        .list-check li,
        .list-number li {
            margin: 1em 0 0 0; /* 上部の余白（1em）を追加 */
            padding: .3em .3em .3em 0;
            font-weight: bold; /* 太字に */
            list-style-type: disc; /* ・を表示 */
            list-style-position: inside; /* ・を内側に配置（お好みで outside にも） */
        }
/* レイアウト調整 */
.toranomon-timeline dt {
  float: left;
  width: 80px;
  font-weight: bold;
}

.toranomon-timeline dd {
  margin-left: 90px;
  margin-bottom: 10px;
  line-height: 1.6;
  position: relative;
  padding-left: 20px; /* 矢印スペース */
}

/* 上昇：赤い上向き矢印 */
.toranomon-timeline dd.up::before {
  content: "▲";
  color: #d60000;
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0;
}

/* 下落：青い下向き矢印 */
.toranomon-timeline dd.down::before {
  content: "▼";
  color: #0066cc;
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0;
}

/* 横ばい：グレーの→ */
.toranomon-timeline dd.flat::before {
  content: "→";
  color: #666;
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0;
}



.list-number {
    padding-left: 0.3em; /* インデントを list-check の dt に合わせる */
    list-style-type: decimal; /* 数字リストにする */
}

    .list-number li::marker {
        color: #3faea1;
        font-weight: bold;
    }
    .list-number li p {
        margin: 0.2em 0 0 1.5em; /* 段落の余白とインデント調整 */
        font-weight: normal; /* 本文部分を通常のフォント */
    }


.content img {
    float: right; /* 画像を右側に寄せる */
    margin-left: 10px; /* 左側の余白を設定 */
    width: 40%; /* 画像の幅を調整 */
    height: auto; /* 縦横比を維持 */
}

.content p {
    text-align: justify; /* テキストを左右揃え（任意） */
}

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

/* list-check クラスのスタイル設定 */
.list-check {
    width: 494px;
    line-height: 140%;
}

/* list-check クラスのスタイル設定 */
.list-check {
    width: 100%; /* 幅を100%にして、親要素に合わせる */
    line-height: 140%;
}

    /* dtのリスト項目（・） */
    .list-check dt {
        position: relative;
        padding: 0.3em 1em 0.3em 1.5em;
        /*padding-left: 2em; /* ・を表示するためにインデントを追加 */
        font-weight: bold;
        line-height: 1.4;
        width: auto; /* 自動で広げる */
    }

        /* ・をdtの前に追加 */
        .list-check dt::before {
            content: "• "; /* ・を設定 */
            color: #3faea1; /* 色を調整 */
            font-size: 1.2em; /* サイズ調整 */
            position: absolute;
            left: 0; /* インデント分、左に位置を調整 */
            top: 0; /* 上の位置を調整 */
        }

    /* ddの説明文 */
    .list-check dd {
        margin-top: 0.5em;
        font-weight: normal;
        line-height: 1.6; /* 説明文の行間を調整 */
        padding: 0em 1em 1em 1.5em;
    }

    /*引用*/
blockquote {
    position: relative;
    padding: 10px 10px 10px 32px;
    box-sizing: border-box;
    font-style: italic;
    color: #464646;
    background: #e0e0e0;
}

    blockquote:before {
        display: inline-block;
        position: absolute;
        top: -6px;
        left: -15px;
        content: "“";
        font-family: sans-serif;
        color: #e0e0e0;
        font-size: 70px;
        line-height: 1;
        z-index: 2;
    }

    blockquote:after {
        position: absolute;
        content: '';
        left: 0;
        top: 0;
        border-width: 0 0 40px 40px;
        border-style: solid;
        border-color: transparent #ffffff;
    }

    blockquote p {
        position: relative;
        padding: 0;
        margin: 10px 0;
        z-index: 3;
        line-height: 1.2;
    }

    blockquote cite {
        display: block;
        text-align: right;
        color: #888888;
        font-size: 0.9em;
    }

mark {
    background-color: #feff9c;
}

body {
    font-family: Arial, sans-serif;
}

/*次の記事前の記事*/
.nav-container {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.nav-item {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 8px;
    transition: 0.3s;
    width: 45%;
}

    .nav-item:hover {
        background: #f5f5f5;
    }

.nav-thumb {
    width: 250px;
    height: 150px;
    object-fit: cover;
    border-radius: 5px;
    margin-right: 10px;
}

.nav-text {
    flex: 1;
}

.nav-title {
    font-size: 14px;
    font-weight: bold;
}



/* スマホ対応（縦並び） */
@media (max-width: 600px) {
    .nav-container {
        flex-direction: column;
        gap: 10px;
    }

    .nav-item {
        flex-direction: column; /* ← 画像とテキストを縦並びに */
        align-items: flex-start; /* ← 左寄せ */
        text-align: left;
        width: 100%;
    }

    .nav-thumb {
        width: 100%; /* ← 画像を親要素いっぱいに */
        height: auto;
        margin-right: 0; /* ← 画像の右マージンを削除 */
        margin-bottom: 10px; /* ← 画像とテキストの間に余白 */
    }

    .nav-text {
        width: 100%; /* ← テキスト部分をフル幅 */
    }

    .nav-title {
        font-size: 16px; /* ← 少し大きくして読みやすく */
        line-height: 1.5; /* ← 行間を広げて詰まりを防ぐ */
        word-break: break-word; /* ← 長い単語を折り返す */
    }
}

/* 記事紹介リンク */
.nav-item-single {
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.nav-item {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 8px;
    transition: 0.3s;
    width: 80%; /* 横幅を100%に変更 */
    max-width: 800px; /* 最大幅を指定 */
    margin: 0 auto;
}

    .nav-item:hover {
        background: #f5f5f5;
    }

.nav-thumb {
    width: 250px;
    height: 150px;
    object-fit: cover;
    border-radius: 5px;
    margin-right: 15px;
}

.nav-text {
    flex: 1;
}

.nav-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}
.button-item06 {
    text-align: center;
    margin-top: 100px;
}


    .button-item06 .btn {
        display: inline-block;
        font-size: 2.8rem;
        font-weight: bold;
        min-width: 45%;
        line-height: 2;
        text-align: center;
        padding: 20px 40px;
        letter-spacing: .05em;
    }

    .button-item06 .btn-06 {
        color: #fff;
        background-color: #3faea1;
        border: 1px solid #fff;
        border-radius: 60px;
        transition: .3s;
        line-height: 1.4;
    }

        .button-item06 .btn-06:hover {
            color: #3faea1;
            background-color: #fff;
            border: 1px solid #7ec8ba;
        }

.btn-06 span {
    display: block;
    font-size: 1.4rem;
    font-weight: 400;
    letter-spacing: .05em;
}

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

    .balloon1::before {
        content: "";
        position: absolute;
        top: 5px; /* 三角の縦位置 */
        left: -16px; /* 三角の横位置 */
        border: 8px solid transparent;
        border-right: 10px solid #e0edff;
    }

        /* 画像を枠内に収めるための基本設定 */
    .image-item img {
    width: 100%;
    height: auto;
    display: block;
    }

    /* モバイル：縦並び（デフォルト） */
    .image-row {
    display: flex;
    flex-direction: column; /* 縦に並べる */
    gap: 20px;            /* 画像同士の間隔 */
    }

    /* PC：横に3つ並べる（画面幅が768px以上の場合） */
    @media (min-width: 768px) {
    .image-row {
        flex-direction: row; /* 横に並べる */
    }
    .image-item {
        flex: 1;             /* 3等分にする */
    }
    }

/* ラベルのスタイル：小さく、少し薄めにするのがプロっぽく見せるコツ */
.image-label {
  font-size: 12px;      /* 小さく */
  color: #666;          /* グレーで落ち着かせる */
  margin-bottom: 5px;   /* 画像との隙間 */
  font-weight: bold;    /* 少し太くして視認性を確保 */
  text-align: left;     /* 左揃え（中央ならcenter） */
}

/* 基本設定：余計なマージンを消す */
.image-item {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.image-item img {
  width: 100%;
  height: auto;
  border: 1px solid #eee; /* 薄い枠線を入れるとデータっぽさが出る */
}

/* レイアウト：前回と同じFlexbox設定 */
.image-row {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 768px) {
  .image-row {
    flex-direction: row;
  }
  .image-item {
    flex: 1;
  }
}
/* ====================================
   ▼ スマートフォン表示の調整 (最大幅768px以下)
   ==================================== */
@media screen and (max-width: 768px) {

    /* 記事全体のコンテンツエリアの幅を100%に広げる */
    #sectionRight {
        width: 100% !important;
        float: none !important;
    }

    /* 周りの枠（フレーム）を取りたい: div.baseBoxの枠線と左右マージンを削除 */
    /* div.baseBoxはコンテンツの主要なラッパーであり、枠線を持つ要素です */
    div.baseBox {
        border: none !important; /* 枠線を削除 */
        width: 100% !important; /* 全幅にして左右の制限をなくす */
        margin: 2em 0 1em 0 !important; /* 左右のマージンを削除 */
        padding: 1em 15px 1em 15px !important; /* 記事全体に左右15pxのパディングを設定し、適度な余白を確保 */
    }

    /* リスト（.list-check）の幅を調整: 文字の列を広くする */
    .list-check {
        width: 100% !important; /* 親要素の100%に広げる */
        padding: 0 !important; /* 左右のパディングを削除 */
    }

    /* リストの各項目（dt, dd）の左右パディングを調整し、文字領域を広くする */
    .list-check dt,
    .list-check dd {
        padding-left: 5px !important; /* 左右の余白を減らす */
        padding-right: 5px !important;
    }

    /* .list-check dt::before（リストの記号「•」）の位置調整 */
    .list-check dt::before {
        left: -5px !important; /* 記号の位置を微調整 */
    }



}