/* CSS Document */ .main-bg { padding-top: 72px; padding-bottom: 58px; background: url(../../img/articles/main-bg.jpg) no-repeat center top / cover; } .main-bg .text { width: 100%; color: #fff; } .main-bg .text .ttl { font-size: 35px; line-height: 1; font-weight: 700; letter-spacing: 0.1em; } .main-bg .text .ttl .mini-text { font-size: 17px; line-height: 1.64; display: block; margin-top: 20px; font-weight: 500; letter-spacing: 0.1em; } .navi-cont .pankuzu li a { color: #1d1d1d; } .navi-cont { padding-top: 15px; padding-bottom: 80px; background: #b7d8ee; } .category-link { margin-top: 45px; display: flex; } .category-link ul { font-size: 0; } .category-link li { display: inline-block; margin-right: 10px; margin-top: 5px; margin-bottom: 5px; } .category-link li:last-child { margin-right: 0; } .category-link li a { display: inline-block; padding: 11px 22px; font-size: 15px; border-radius: 20px; background: #59a1d9; line-height: 1; color: #fff; } .category-link li a.current { background: #0d2e9b; } .cat-ttlbox { margin-top: 55px; text-align: center; margin-bottom: 25px; } .cat-ttl { line-height: 1; color: #0d2e9b; font-size: 35px; letter-spacing: 0.1em; } .cat-tex { line-height: 1.64; color: #0d2e9b; font-size: 17px; font-weight: 500; display: block; word-break: break-all; margin-top: 20px; letter-spacing: 0.1em; } /* add banner-box 20240611 togashi */ .cat-bnrbox { margin-top: 55px; text-align: center; margin-bottom: 25px; } .cat-bnrbox img { width: 800px; } /*詳細ページ用*/ .main-bg.ex { height: 240px; } .navi-cont.ex { padding-top: 15px; padding-bottom: 110px; } .contents-bg { background: #fff; padding-top: 0px; padding-bottom: 80px; /*kato 20250128 110px --> 80px */ margin-bottom: -210px; bottom: 210px; position: relative; } .contents-bg .ttl-box { background: url(../../img/articles/ttl-bg.jpg) no-repeat center top / cover; padding-top: 12px; /*kato 20250128 0 --> 12px */ padding-bottom: 12px; /*kato 20250128 0 --> 12px */ } .contents-bg .ttl-box .flex { display: flex; justify-content: space-between; align-items: center; width: 90%; max-width: 806px; margin-left: auto; margin-right: auto; } .contents-bg .ttl-box .flex .txt { width: 80%; /*kato 20250128 68% --> 80% */ } .contents-bg .ttl-box .flex .txt dl { display: flex; align-items: center; color: #fff; } .contents-bg .ttl-box .flex .txt dl dt { margin-right: 30px; font-size: 16px; /*kato 20250128 17px --> 16px */ line-height: 1; font-weight: 700; } .contents-bg .ttl-box .flex .txt dl dd { padding-left: 30px; border-left: 2px solid #fff; font-size: 24px; /*kato 20250128 17px --> 26px */ line-height: 1; font-weight: 700; } .contents-bg .ttl-box .flex .icon { width: 20%; /*kato 20250128 32% --> 20% */ max-height: 180px; /*kato 20250212 80px --> 180px */ margin-right: -4%; } .contents-bg .ttl-box .flex .icon img { max-height: 180px; /*kato 20250212 80px --> 180px */ } .contents-bg .img-box { display: block; position: relative; } .contents-bg .img-box .ex-obi { position: absolute; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); top: 50%; left: 50%; display: inline-block; padding: 22px 27px; color: #fff; background: #a20017; line-height: 1; font-size: 15px; } .contents-bg .miniimg-box { width: 90%; max-width: 532px; /*kato 20250129 margin-left: auto; margin-right: auto; */ margin: 20px auto 0 auto; position: relative; margin-bottom: 0; /*kato 20250129 50px --> 0 */ } .contents-bg .miniimg-box .ex-tex { position: absolute; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); top: 50%; left: 50%; display: inline-block; color: #a20017; line-height: 1; font-size: 14px; } /* ↓↓↓ add PCはminiimg-boxの幅、SPは幅いっぱいの画像 20241203 togashi ↓↓↓ */ .contents-bg .contents-box .img-box-splarge { width: 90%; max-width: 532px; margin-left: auto; margin-right: auto; position: relative; margin-bottom: 50px; } /* ↑↑↑ add 20241203 togashi ↑↑↑ */ .contents-bg .contents-box { width: 90%; max-width: 806px; margin-left: auto; margin-right: auto; padding-top: 8px; /*kato 20250128 10px --> 8px */ } .contents-bg .contents-box .pankuzu { margin-bottom: 60px; } .contents-bg .contents-box .ttl-text { line-height: 1.4; /*kato 20250128 1.51 --> 1.4 */ color: #2282cc; font-size: 28px; /*kato 20250128 27px --> 28px */ margin-bottom: 2px; /*kato 20250128 10px --> 2px */ } .contents-bg .contents-box .day-text { color: #808080; font-size: 12px; /*line-height: 1; kato 20250128 1.33 --> 1 -->削除 */ margin: 0 0 20px 0 !important; } .contents-bg .contents-box .img-box { margin-bottom: 40px; /*kato 20250128 50px --> 40px */ position: relative; margin: 24px 0 0 0; } .contents-bg .contents-box .head-text { font-size: 16px; /*kato 20250128 15px --> 16px */ line-height: 2.00; /*kato 20250128 1.86 --> 2.00 */ font-weight: 700; margin-bottom: 30px; } /* add 20240627 togashi */ .contents-bg .contents-box .head-text .table-box table tr td { font-size: 14px; line-height: 1.7; font-weight: 500; } .contents-bg .contents-box h2 { line-height: 1.6; margin-top: 80px; /*kato 20250128 追加 */ margin-bottom: 0; /*kato 20250128 25px --> 0 */ padding-bottom: 12px; border-bottom: 1px solid #2282cc; font-size: 26px; /*kato 20250128 26px --> 26px */ color: #2282cc; } .contents-bg .contents-box h3 { margin-bottom: 0; /*kato 20250128 25px --> 0 */ margin-top: 32px; /* add 20240516 togashi */ /*kato 20250128 40px --> 32px */ padding: 0px 12px; border-left: 5px solid #59a1d9; font-size: 20px; color: #0d2e9b; line-height: 1.6; } .contents-bg .contents-box h4 { /*kato 20250214 制作 */ margin-top: 24px; font-size: 14px; line-height: 1.6; } .contents-bg .contents-box .list-box { /*kato 20250214 制作 */ margin-top: 16px; } .contents-bg .contents-box .mokuji-box { margin-bottom: 0; /*kato 20250128 110px --> 0 */ } .contents-bg .contents-box .mokuji-ttl { margin-bottom: 20px; margin-top: 30px; /*kato 20250212 追加 */ font-weight: 700; font-size: 20px; /*kato 20250128 21px --> 20px */ line-height: 1.0; /*kato 20250128 1.2 --> 1.0 */ color: #1a1311; } .contents-bg .contents-box .mokuji-box ul li { margin-bottom: 2px; max-width: 500px; } .contents-bg .contents-box .mokuji-box ul li:last-child { margin-bottom: 0; } .contents-bg .contents-box .mokuji-box ul li a { padding: 10px 40px 10px 18px; display: block; font-size: 14px; /*kato 20250128 15px --> 14px */ background: #deecf7; width: 100%; line-height: 1.53; color: #1d1d1d; position: relative; } .contents-bg .contents-box .mokuji-box ul li a .sankaku { width: 8px; position: absolute; top: 50%; right: 15px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } .contents-bg .contents-box .mokuji-box ul li a .sankaku img { display: block; } .contents-bg .contents-box p { margin-bottom: 14px; /* ← 50px 20240516 togashi */ /*kato 20250128 30px --> 14px */ font-size: 14px; /*kato 20250128 15px --> 14px */ line-height: 2.00; /*kato 20250128 1.86 --> 2.00 */ text-align: justify; /*kato 20250116 追加 */ margin: 16px 0 0 0; /*kato 20250128 追加 */ } .contents-bg .contents-box .tex-box { margin-bottom: 0px; /*kato 20250128 110px --> 0 */ } .contents-bg .contents-box .tex-box .link-list { /*kato 20250129 追加 */ margin: 24px 0 0 0; display: flex; flex-direction: column; } .contents-bg .contents-box .tex-box .link-list li a { /*kato 20250129 追加 */ color: #2282cc; text-decoration: underline; word-break: break-all; } .contents-bg .contents-box .tex-box .link-list li { /*kato 20250129 追加 */ margin: 12px 0 0 0; } .contents-bg .contents-box .tex-box .link-list li:first-child { /*kato 20250129 追加 */ margin: 0 0 0 0; } .contents-bg .contents-box .tex-box .point-list { /*kato 20250129 追加 */ display: flex; justify-content: flex-start; flex-wrap: wrap; width: 100%; padding: 24px 24px 4px 24px; margin: 40px 0; background: #F0F5F7; border-radius: 4px; box-sizing: border-box; } .contents-bg .contents-box .tex-box .point-list li { /*kato 20250129 追加 */ width: calc(100% / 3 - 14px); min-height: 80px; padding: 20px 30px; margin: 0 20px 20px 0; box-sizing: border-box; background: #FFFFFF; box-shadow: 0px 0px 4px 0px #00000020; display: flex; justify-content: center; align-items: center; text-align: left; border-radius: 40px; color: #333; font-size: 16px; font-weight: 700; line-height: 1.2; } .contents-bg .contents-box .tex-box .point-list li:nth-child(3n) { /*kato 20250129 追加 */ margin: 0 0 20px 0; } .contents-bg .contents-box .tex-box .point-list-wrap { /*kato 20252021 追加 */ display: flex; justify-content: flex-start; flex-wrap: wrap; width: 100%; padding: 24px 24px 4px 24px; margin: 40px 0; background: #F0F5F7; border-radius: 4px; box-sizing: border-box; } .contents-bg .contents-box .tex-box .point-list-wrap li { /*kato 20250129 追加 */ width: calc(100% / 3 - 14px); min-height: 60px; padding: 20px; margin: 0 20px 20px 0; box-sizing: border-box; background: #FFFFFF; display: flex; justify-content: center; align-items: center; text-align: left; color: #333; font-size: 16px; font-weight: 700; line-height: 1.2; position: relative; } .contents-bg .contents-box .tex-box .point-list-wrap li:nth-child(3n) { /*kato 20250129 追加 */ margin: 0 0 20px 0; } .contents-bg .contents-box .tex-box .point-list-wrap li::before { /*kato 20250129 追加 */ content: ""; width: 20px; height: 20px; display: block; border-left: #ccc solid 2px; border-top: #ccc solid 2px; position: absolute; top: 0; left: 0; } .contents-bg .contents-box .tex-box .point-list-wrap li::after { /*kato 20250129 追加 */ content: ""; width: 20px; height: 20px; display: block; border-right: #ccc solid 2px; border-bottom: #ccc solid 2px; position: absolute; bottom: 0; right: 0; } .contents-bg .contents-box .tex-box .point-list-wrap2c { /*kato 20252021 追加 */ display: flex; justify-content: flex-start; flex-wrap: wrap; width: 100%; padding: 24px 24px 4px 24px; margin: 40px 0; background: #F0F5F7; border-radius: 4px; box-sizing: border-box; } .contents-bg .contents-box .tex-box .point-list-wrap2c li { /*kato 20250129 追加 */ width: calc(100% / 2 - 14px); min-height: 80px; padding: 20px; margin: 0 20px 20px 0; box-sizing: border-box; background: #FFFFFF; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: left; color: #333; font-size: 16px; font-weight: 700; line-height: 1.2; position: relative; } .contents-bg .contents-box .tex-box .point-list-wrap2c li span { /*kato 20250129 追加 */ display: inline-block; margin: 8px 0 0 0; font-size: 12px; font-weight: 500; } .contents-bg .contents-box .tex-box .point-list-wrap2c li:nth-child(2n) { /*kato 20250129 追加 */ margin: 0 0 20px 0; } .contents-bg .contents-box .tex-box .point-list-wrap2c li::before { /*kato 20250129 追加 */ content: ""; width: 20px; height: 20px; display: block; border-left: #ccc solid 2px; border-top: #ccc solid 2px; position: absolute; top: 0; left: 0; } .contents-bg .contents-box .tex-box .point-list-wrap2c li::after { /*kato 20250129 追加 */ content: ""; width: 20px; height: 20px; display: block; border-right: #ccc solid 2px; border-bottom: #ccc solid 2px; position: absolute; bottom: 0; right: 0; } .contents-bg .contents-box .tex-box .point-list-wrap4c { /*kato 20252021 追加 */ display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px 4px; width: 100%; padding: 24px 24px 24px 24px; margin: 40px 0; background: #F0F5F7; border-radius: 4px; box-sizing: border-box; } .contents-bg .contents-box .tex-box .point-list-wrap4c li { /*kato 20250129 追加 */ min-height: 60px; padding: 20px; margin: 0 0 0 0; box-sizing: border-box; background: #FFFFFF; display: flex; justify-content: center; align-items: center; text-align: left; color: #333; font-size: 14px; font-weight: 700; line-height: 1.2; position: relative; border-bottom: 2px solid #ccc; } .contents-bg .contents-box .tex-box .point-list-wrap4c li:nth-child(3n) { /*kato 20250129 追加 */ margin: 0 0 0 0; } .contents-bg .contents-box .tex-box .number-list { /*kato 20250220 追加 */ width: 100%; padding: 24px 32px 24px 24px; background: #F0F5F7; border-radius: 4px; margin: 16px 0 0 0; box-sizing: border-box; } .contents-bg .contents-box .tex-box .number-list ol { /*kato 20250220 追加 */ counter-reset: number; /*数字をリセット*/ list-style-type: none !important; /*数字を一旦消す*/ width: 100%; } .contents-bg .contents-box .tex-box .number-list ol li { /*kato 20250220 追加 */ position: relative; line-height: 2.0; padding: 0 0 0 40px; margin: 20px 0 0 0; font-size: 16px; font-weight: 700; color: #333; } .contents-bg .contents-box .tex-box .number-list ol li:first-child { /*kato 20250220 追加 */ position: relative; line-height: 2.0; padding: 0 0 0 40px; margin: 0 0 0 0; font-size: 16px; font-weight: 700; color: #333; } .contents-bg .contents-box .tex-box .number-list ol li p { /*kato 20250220 追加 */ margin: 0; font-weight: 500; color: #333; } .contents-bg .contents-box .tex-box .number-list ol li:before { /*kato 20250220 追加 */ /* 以下数字をつける */ position: absolute; counter-increment: number; content: counter(number); /*以下数字のデザイン変える*/ display: inline-block; background: #333; color: white; font-family: 'Avenir', 'Arial', sans-serif; font-weight: 900; font-size: 14px; border-radius: 50%; left: 0; width: 30px; height: 30px; line-height: 30px; text-align: center; } .contents-bg .contents-box .tex-box .disk-list { /*kato 20250220 追加 */ width: 100%; padding: 16px 24px 24px 24px; background: #F0F5F7; border-radius: 4px; margin: 16px 0 0 0; box-sizing: border-box; } .contents-bg .contents-box .tex-box .disk-list ul li { /*kato 20250220 追加 */ position: relative; line-height: 1.6; padding: 0 0 0 14px; margin: 16px 0 0 0; font-size: 14px; font-weight: 700; color: #333; } .contents-bg .contents-box .tex-box .disk-list ul li:first-child { /*kato 20250220 追加 */ margin: 0 0 0 0; } .contents-bg .contents-box .tex-box .disk-list ul li:before { /*kato 20250220 追加 */ content: ""; position: absolute; display: block; background: #333; border-radius: 50%; left: 0; width: 8px; height: 8px; top: 11px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .contents-bg .contents-box .tex-box .disk-list ul li p { /*kato 20250220 追加 */ margin: 0; font-weight: 500; color: #333; } .contents-bg .contents-box .tex-box .number-none-list { /*kato 20250129 追加 */ margin: 16px 0 0 0; padding: 24px; box-sizing: border-box; border-radius: 4px; display: flex; justify-content: space-between; flex-direction: row; background: #F0F5F7; flex-wrap: wrap; } .contents-bg .contents-box .tex-box .number-none-list li { /*kato 20250129 追加 */ list-style: none inside; font-weight: 700; width: calc(50% - 10px); margin: 16px 0 0 0; padding: 16px 0 0 0; box-sizing: border-box; font-size: 16px; border-top: 2px solid #fff; } .contents-bg .contents-box .tex-box .number-none-list li:first-child { /*kato 20250129 追加 */ margin: 0 0 0 0; padding: 0 0 0 0; border-top: none; } .contents-bg .contents-box .tex-box .number-none-list li:nth-child(2) { /*kato 20250129 追加 */ margin: 0 0 0 0; padding: 0 0 0 0; border-top: none; } .contents-bg .contents-box .tex-box .number-none-list li p { /*kato 20250129 追加 */ margin: 4px 0 0 0; font-size: 14px; font-weight: 500; line-height: 1.6; } .contents-bg .contents-box .tex-box .grid-2col{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px 24px; margin: 32px 0 0 0; } .contents-bg .contents-box .tex-box .grid-2col div h3{ margin: 0 0 24px 0; } .contents-bg .contents-box .tex-box .grid-2col div p{ margin: 0 0 0 0; position: relative; top: -8px; } .contents-bg .contents-box .tex-box .grid-2col div ul.disc-list li{ min-height: 40px; padding: 8px 10px 8px 24px; margin: 0 0 4px 0; border-radius: 4px; box-sizing: border-box; background: #F0F5F7; display: flex; justify-content: flex-start; align-items: center; text-align: left; color: #333; font-size: 14px; font-weight: 700; line-height: 1.2; position: relative; border-bottom: 1px solid #ccc; } .contents-bg .contents-box .tex-box .grid-2col div ul.disc-list li::before{ content: ""; position: absolute; display: block; background: #333; border-radius: 50%; left: 10px; width: 8px; height: 8px; top: 19px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .contents-bg .contents-box .tex-box .flex-2col{ display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between; margin: 24px 0 0 0; } .contents-bg .contents-box .tex-box .flex-2col img, .contents-bg .contents-box .tex-box .flex-2col p{ width: calc(50% - 12px); } .contents-bg .contents-box .tex-box .flex-2col p:nth-child(2){ margin: 0; } .contents-bg .contents-box .tex-box .flex-2col p{ position: relative; top: -8px; } .contents-bg .contents-box .tex-box .flex-2col-in-h3{ display: flex; flex-wrap: wrap; justify-content: flex-start; flex-direction: column; margin: 24px 0 0 0; position: relative; } .contents-bg .contents-box .tex-box .flex-2col-in-h3 img, .contents-bg .contents-box .tex-box .flex-2col-in-h3 p, .contents-bg .contents-box .tex-box .flex-2col-in-h3 h3{ width: calc(50% - 12px); } .contents-bg .contents-box .tex-box .flex-2col-in-h3 h3:first-child{ margin: 0; } .contents-bg .contents-box .tex-box .flex-2col-in-h3 img{ position: absolute; right: 0; } @media print, screen and (max-width: 900px) { .contents-bg .contents-box .tex-box .point-list { /*kato 20250129 追加 */ margin: 40px 0; display: flex; justify-content: space-around; flex-wrap: wrap; padding: 24px; } .contents-bg .contents-box .tex-box .point-list li { /*kato 20250129 追加 */ width: 240px; min-height: 80px; padding: 20px 30px; box-sizing: border-box; background: #FFFFFF; box-shadow: 0px 0px 4px 0px #00000020; display: flex; justify-content: center; align-items: center; text-align: left; border-radius: 40px; color: #333; font-size: 16px; font-weight: 700; line-height: 1.2; margin: 14px 0 0 0; } .contents-bg .contents-box .tex-box .point-list li:first-child { /*kato 20250129 追加 */ margin: 0 0 0 0; } .contents-bg .contents-box .tex-box .point-list li:nth-child(3n) { /*kato 20250129 追加 */ margin: 14px 0 0 0; } .contents-bg .contents-box .tex-box .number-none-list { /*kato 20250129 追加 */ margin: 16px 0 0 0; padding: 16px; box-sizing: border-box; border-radius: 4px; display: flex; justify-content: space-between; flex-direction: row; background: #F0F5F7; flex-wrap: wrap; } .contents-bg .contents-box .tex-box .disk-list ul li:before { /*kato 20250220 追加 */ content: ""; position: absolute; display: block; background: #000; border-radius: 50%; left: 0; width: 8px; height: 8px; top: 11px; } .contents-bg .contents-box .tex-box .point-list-wrap li { /*kato 20250129 追加 */ width: 100%; margin: 0 0 20px 0; } .contents-bg .contents-box .tex-box .point-list-wrap li:nth-child(3n) { /*kato 20250129 追加 */ margin: 0 0 20px 0; } .contents-bg .contents-box .tex-box .point-list-wrap2c li { /*kato 20250129 追加 */ width: 100%; margin: 0 0 20px 0; } .contents-bg .contents-box .tex-box .point-list-wrap4c { /*kato 20252021 追加 */ display: grid; grid-template-columns: 1fr; gap: 2px; } .contents-bg .contents-box .tex-box .grid-2col{ grid-template-columns: 1fr; } .contents-bg .contents-box .tex-box .flex-2col{ display: flex; flex-wrap: wrap; flex-direction: column; justify-content: flex-start; margin: 24px 0 0 0; } .contents-bg .contents-box .tex-box .flex-2col h2{ text-align: left; } .contents-bg .contents-box .tex-box .flex-2col img, .contents-bg .contents-box .tex-box .flex-2col p{ width: 100%; } .contents-bg .contents-box .tex-box .flex-2col p:nth-child(2){ margin: 16px 0 0 0; } .contents-bg .contents-box .tex-box .flex-2col p{ position: relative; top: 0; } .contents-bg .contents-box .tex-box .flex-2col-in-h3{ display: flex; flex-wrap: wrap; justify-content: flex-start; flex-direction: column; margin: 16px 0 0 0; } .contents-bg .contents-box .tex-box .flex-2col-in-h3{ display: flex; flex-wrap: wrap; justify-content: flex-start; margin: 32px 0 0 0; position: relative; } .contents-bg .contents-box .tex-box .flex-2col-in-h3 img, .contents-bg .contents-box .tex-box .flex-2col-in-h3 p, .contents-bg .contents-box .tex-box .flex-2col-in-h3 h3{ width: 100%; } .contents-bg .contents-box .tex-box .flex-2col-in-h3 h3:first-child{ margin: 0; } .contents-bg .contents-box .tex-box .flex-2col-in-h3 img{ position: static; margin: 16px 0 0 0; } } .contents-bg .contents-box .tex-box .number-none-list3c { /*kato 20250129 追加 */ margin: 16px 0 0 0; padding: 24px; box-sizing: border-box; border-radius: 4px; display: flex; justify-content: flex-start; flex-direction: row; background: #F0F5F7; flex-wrap: wrap; } .contents-bg .contents-box .tex-box .number-none-list3c li { /*kato 20250129 追加 */ list-style: none inside; font-weight: 700; width: calc(33% - 10px); margin: 16px 16px 0 0; padding: 16px 0 0 0; box-sizing: border-box; font-size: 16px; border-top: 2px solid #fff; } .contents-bg .contents-box .tex-box .number-none-list3c li:first-child, .contents-bg .contents-box .tex-box .number-none-list3c li:nth-child(2), .contents-bg .contents-box .tex-box .number-none-list3c li:nth-child(3) { /*kato 20250129 追加 */ margin: 0 16px 0 0; padding: 0 0 0 0; border-top: none; } .contents-bg .contents-box .tex-box .number-none-list3c li:nth-child(3n) { margin: 16px 0 0 0; } .contents-bg .contents-box .tex-box .number-none-list3c li:nth-child(3){ margin: 0 0 0 0; } .contents-bg .contents-box .tex-box .number-none-list3c li p { /*kato 20250129 追加 */ margin: 4px 0 0 0; font-size: 14px; font-weight: 500; line-height: 1.6; } @media print, screen and (max-width: 900px) { .contents-bg .contents-box .tex-box .number-none-list3c { /*kato 20250129 追加 */ margin: 16px 0 0 0; padding: 24px; box-sizing: border-box; border-radius: 4px; display: flex; justify-content: space-between; flex-direction: row; background: #F0F5F7; flex-wrap: wrap; } .contents-bg .contents-box .tex-box .number-none-list3c li{ width: calc(50% - 8px); } .contents-bg .contents-box .tex-box .number-none-list3c li:nth-child(3){ margin: 16px 0 0 0; padding: 16px 0 0 0; border-top: 2px solid #fff; } .contents-bg .contents-box .tex-box .number-none-list3c li:nth-child(2n){ margin-right: 0; } /* .contents-bg .contents-box .tex-box .number-none-list3c li:first-child, .contents-bg .contents-box .tex-box .number-none-list3c li:nth-child(2), .contents-bg .contents-box .tex-box .number-none-list3c li:nth-child(3) { margin: 0 16px 0 0; padding: 0 0 0 0; border-top: none; } .contents-bg .contents-box .tex-box .number-none-list3c li:nth-child(3n) { margin: 16px 0 0 0; } .contents-bg .contents-box .tex-box .number-none-list3c li:nth-child(3){ margin: 16px 0 0 0; } .contents-bg .contents-box .tex-box .number-none-list3c li { list-style: none inside; font-weight: 700; width: calc(50% - 10px); margin: 16px 0 0 0; padding: 16px 0 0 0; box-sizing: border-box; font-size: 16px; border-top: 2px solid #fff; } .contents-bg .contents-box .tex-box .number-none-list3c li:nth-child(2n) { margin: 16px 0 0 0; padding: 16px 0 0 0; border-top: 2px solid #fff; } */ } .contents-bg .contents-box .tex-box blockquote { margin: 16px 0 0 0; padding: 20px 24px 18px 24px; box-sizing: border-box; background: #f9f9f9; position: relative; border: 1px #ccc solid; } .contents-bg .contents-box .tex-box blockquote h4 { margin: 0 0 14px 0; } .contents-bg .contents-box .tex-box blockquote p { margin: 0 0 0 0; } .contents-bg .contents-box .tex-box blockquote::before { content: ""; display: block; height: 40px; width: 40px; border-top: 6px #fff solid; border-left: 6px #fff solid; opacity: 1; position: absolute; top: 0; left: 0; z-index: 100; } .contents-bg .contents-box .tex-box blockquote::after { content: ""; display: block; height: 40px; width: 40px; border-bottom: 6px #fff solid; border-right: 6px #fff solid; opacity: 0.9; position: absolute; bottom: 0; right: 0; } .contents-bg .contents-box .tex-box blockquote ol { width: 100%; } .contents-bg .contents-box .tex-box blockquote ol li { margin: 16px 0 0 18px; padding: 0 0 0 0; list-style: decimal outside; } .contents-bg .contents-box .tex-box blockquote ol li:first-child { margin: 0 0 0 18px; } .contents-bg .contents-box .tex-box .bqP { margin: 2px 0 0 0; font-size: 12px; font-style: italic; color: #666; text-align: left; line-height: 1.4; } .contents-bg .contents-box .tex-box .bqP span { display: inline; margin: 0 0 0 8px; } .contents-bg .contents-box .tex-box .bqP a .icon { width: 20px; display: inline-block; margin-left: 3px; vertical-align: middle; } .contents-bg .contents-box .tex-box .bqP a .icon img { display: block; } .contents-bg .contents-box .tex-box blockquote .blockquote-table { width: 100%; overflow-x: scroll; padding: 6px 0 } .contents-bg .contents-box .tex-box blockquote .blockquote-table table{ width: 100%; } .contents-bg .contents-box .tex-box blockquote .blockquote-table table th{ white-space: nowrap; border: 1px #ccc solid; font-size: 14px; } .contents-bg .contents-box .tex-box blockquote .blockquote-table table td{ background: #FFFFFF; border: 1px #ccc solid; font-size: 14px; padding: 8px; } .contents-bg .contents-box .tex-box .textArea-outline { margin: 16px 0 0 0; padding: 16px 24px 18px 24px; box-sizing: border-box; background: #fff; border: #ccc 1px solid; } .contents-bg .contents-box .tex-box .textArea-outline p { margin: 0 0 0 0; } .contents-bg .contents-box .tex-box .textArea-dl { margin: 16px 0 0 0; padding: 0; box-sizing: border-box; background: #fff; border-bottom: #ccc 1px solid; display: grid; grid-template-columns: auto 1fr; gap: 0; } .contents-bg .contents-box .tex-box .textArea-dl dt { margin: 0 0 0 0; height: auto; padding: 20px 10px 20px 20px; box-sizing: border-box; background: #F8F9FA; border-top: #ccc 1px solid; display: inline-block; } .contents-bg .contents-box .tex-box .textArea-dl dd { margin: 0 0 0 0; height: auto; padding: 20px 20px 20px 0; box-sizing: border-box; background: #F8F9FA; border-top: #ccc 1px solid; display: block; } .contents-bg .contents-box .tex-box .textArea-dl dt::after { content: ":"; } .contents-bg .contents-box .tex-box .textArea-dl dt:nth-child(1), .contents-bg .contents-box .tex-box .textArea-dl dd:nth-child(2), .contents-bg .contents-box .tex-box .textArea-dl dt:nth-child(5), .contents-bg .contents-box .tex-box .textArea-dl dd:nth-child(6), .contents-bg .contents-box .tex-box .textArea-dl dt:nth-child(9), .contents-bg .contents-box .tex-box .textArea-dl dd:nth-child(10), .contents-bg .contents-box .tex-box .textArea-dl dt:nth-child(13), .contents-bg .contents-box .tex-box .textArea-dl dd:nth-child(14), .contents-bg .contents-box .tex-box .textArea-dl dt:nth-child(17), .contents-bg .contents-box .tex-box .textArea-dl dd:nth-child(18) { background: #F0F5F7; } .contents-bg .contents-box p.big { font-size: 17px; line-height: 1.4; } .contents-bg .contents-box p .notes { font-size: 12px; } .contents-bg .contents-box p .bold { font-weight: 700; color: #000; } .contents-bg .contents-box p a { color: #2282cc; text-decoration: underline; word-break: break-all; /*kato 20250116 追加 */ } .contents-bg .contents-box .link { color: #2282cc; text-decoration: underline; display: block; } .contents-bg .contents-box .link-btn /*kato 20250129 追加 */ { color: #fff; font-size: 16px; font-weight: 700; text-decoration: none; display: flex; justify-content: center; align-items: center; background: #2282CC; margin: 24px auto 0 auto; height: auto; width: 100%; border-radius: 4px; padding: 20px; box-sizing: border-box; transition: all 0.2s; } .contents-bg .contents-box .link .icon { width: 20px; display: inline-block; margin-left: 3px; vertical-align: middle; } .contents-bg .contents-box .link .icon img { display: block; } .contents-bg .contents-box a .icon { width: 20px; display: inline-block; margin-left: 3px; vertical-align: middle; } .contents-bg .contents-box a .icon img { display: block; } .contents-bg .contents-box .link::before { content: ""; display: inline-block; vertical-align: middle; text-decoration: none; width: 8px; height: 8px; border-top: 2px solid #2282cc; border-right: 2px solid #2282cc; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: 0; margin-right: 5px; } .contents-bg .contents-box .link-btn::before { /*kato 20250129 追加 */ content: ""; display: inline-block; vertical-align: middle; text-decoration: none; width: 8px; height: 8px; border-top: 2px solid #fff; border-right: 2px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: 0; margin-right: 5px; } .bottom-inlist { padding-top: 40px; /*kato 20250128 50px --> 40px */ border-top: 1px solid #8e8f8f; margin-top: 80px; margin-bottom: 80px; /*kato 20250128 110px --> 80px */ } .bottom-inlist li { display: flex; justify-content: space-between; margin-bottom: 23px; } .bottom-inlist li:last-child { margin-bottom: 0; } .bottom-inlist li .pic { width: 10%; } .bottom-inlist li .textbox { width: 86%; } .bottom-inlist li .textbox .ttl { margin-top: 0; font-size: 13px; font-weight: 700; } .bottom-inlist li .textbox .ttl p { margin: 0; } .bottom-inlist li .textbox .text { margin-top: 0; font-size: 12px; line-height: 1.9; } .bottom-inlist li .textbox .text p { margin: 0; } .shere-list { text-align: right; } .shere-list li { display: inline-block; width: 40px; margin-right: 18px; line-height: 1; vertical-align: middle; } .shere-list li.text { width: 150px; margin-right: 14px; } .shere-list li:last-child { margin-right: 0; } .kanren-slide { margin-top: 44px; } .waku { padding: 5px 20px; /* 5px 5px → 5px 20px 吉川修正 */ border: 1px solid #000; } .inyo { font-style: italic; position: relative; background: #eee; /*kato 20250130 追加 */ border-radius: 4px; /*kato 20250130 追加 */ box-sizing: border-box; /*kato 20250130 追加 */ width: 100%; /*kato 20250130 追加 */ padding: 14px 20px 14px 16px; /*kato 20250130 追加 */ margin: 16px 0; } .syutten { padding: 10px 10px; } /*.inyo:before { font-family:"Font Awesome 5 Free"; content:'\f10d'; font-weight:900; position:absolute; top:10px; left:10px;}*/ @media print, screen and (min-width : 1367px) {} @media print, screen and (max-width: 900px) { .main-bg { padding-top: 32px; /*kato 20250115 9.66vw --> 32px */ padding-bottom: 24px; /*kato 20250115 8.45vw --> 24px */ background: url(../../img/articles/main-bg-sp.jpg) no-repeat center top / cover; } .main-bg .text .ttl { font-size: 24px; /*kato 20250115 5.7vw --> 24px */ line-height: 1; } .main-bg .text .ttl .mini-text { font-size: 14px; /*kato 20250114 3.6vw --> 14px */ line-height: 1.64; display: block; margin-top: 8px; /*kato 20250117 2vw --> 8px */ font-weight: 500; } .navi-cont { padding-top: 24px; /*kato 20250115 7.25vw --> 24px */ padding-bottom: 32px; /*kato 20250115 9.66vw --> 32px */ } .category-link { margin-top: 0; display: flex; } .category-link ul { font-size: 0; } .category-link li { display: inline-block; margin-right: 10px; /*kato 20250117 2.4vw --> 10px */ margin-top: 0; margin-bottom: 10px; /*kato 20250117 2.4vw --> 10px */ } .category-link li:last-child { margin-right: 0; } .category-link li a { display: inline-block; padding: 10px 16px; /*kato 20250117 2.4vw 4.7vw --> 10px 16px */ font-size: 12px; /*kato 20250114 3.1vw --> 12px */ border-radius: 16px; /*kato 20250117 4vw --> 10px */ } .cat-ttlbox { margin-top: 7.26vw; text-align: center; margin-bottom: 7.25vw; } .cat-ttl { line-height: 1; font-size: 28px; /*kato 20250117 7.2vw --> 28px*/ letter-spacing: 0.01em; } .cat-tex { line-height: 1.64; font-size: 14px; /*kato 20250117 3.8vw --> 14px */ word-break: break-all; margin-top: 16px; /*kato 20250117 4.83vw -->16px */ } #content.cat-list { margin-top: 2.4vw; } /* add banner-box 20240611 togashi */ .cat-bnrbox { margin: 7.25vw auto; width: 100%; } /*詳細ページ用*/ .main-bg.ex { height: 180px; /*kato 20250115 38.6vw --> 180px */ } .navi-cont.ex { padding-top: 15px; padding-bottom: 110px; } .contents-bg { padding-top: 0; /*kato 20250115 7.25vw --> 0 */ padding-bottom: 40px; /*kato 20250115 14.49vw --> 40px */ margin-bottom: -186px; /*kato 20250115 -41.8vw --> -186px */ bottom: 186px; /*kato 20250115 41.8vw --> 186px */ position: relative; } .contents-bg .ttl-box { background: url(../../img/articles/ttl-bg.jpg) no-repeat center top / cover; padding-top: 8px; /*kato 20250115 3.4vw --> 8px */ padding-bottom: 8px; /*kato 20250115 3.4vw --> 8px */ } .contents-bg .ttl-box .flex { display: flex; justify-content: space-between; align-items: center; width: 90%; max-width: 806px; margin-left: auto; margin-right: auto; } .contents-bg .ttl-box .flex .txt { width: 76%; /*kato 20250114 72% --> 76% */ } .contents-bg .ttl-box .flex .txt dl { display: block; align-items: center; color: #fff; } .contents-bg .ttl-box .flex .txt dl dt { margin-right: 0px; margin-bottom: 2.4vw; font-size: 14px; /*kato 20250114 3.1vw --> 14px */ line-height: 1; } .contents-bg .ttl-box .flex .txt dl dd { padding-left: 0px; border-left: 0; font-size: 20px; /*kato 20250114 4.8vw --> 20px */ line-height: 1; font-weight: 700; } .contents-bg .ttl-box .flex .icon { width: 37%; /*kato 20250114 28% --> 37% */ margin-right: -0%; } .contents-bg .img-box { display: block; position: relative; } .contents-bg .img-box .ex-obi { position: absolute; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); top: 50%; left: 50%; display: inline-block; padding: 3vw 3vw; line-height: 1; font-size: 14px; /*kato 20250114 3.0vw --> 14px */ } .contents-bg .miniimg-box { width: 100%; max-width: none; margin-left: auto; margin-right: auto; position: relative; margin-bottom: 0; /*kato 20250129 9.66vw --> 0 */ } .contents-bg .miniimg-box .ex-tex { position: absolute; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); top: 50%; left: 50%; display: inline-block; color: #a20017; line-height: 1; font-size: 16px; /*kato 20250114 3.6vw --> 16px */ } /* ↓↓↓ add PCはminiimg-boxの幅、SPは幅いっぱいの画像 20241203 togashi ↓↓↓ */ .contents-bg .contents-box .img-box-splarge { margin-bottom: 7.25vw; position: relative; width: 109%; margin-left: -1em; } /* ↓↓↓ add 画像scroll 20241121 togashi ↓↓↓ */ .scroll { overflow-x: auto; } .scroll .scroll-img { max-width: none; width: 600px; } /* ↑↑↑ add 画像scroll 20241121 togashi ↑↑↑ */ .contents-bg .contents-box { width: 90%; max-width: none; margin-left: auto; margin-right: auto; padding-top: 20px; /*kato 20250115 7.25vw --> 20px */ } .contents-bg .contents-box .ttl-text { line-height: 1.51; font-size: 20px; /*kato 20250114 4.8vw --> 20px */ margin-bottom: 16px; /*kato 20250115 2.4vw --> 16px */ text-align: justify; /*kato 20250117 追加 */ } .contents-bg .contents-box .day-text { font-size: 14px; /*kato 20250114 3vw --> 14px */ line-height: 1.33; margin-bottom: 20px !important; /*kato 20250115 4.83vw --> 20px */ } .contents-bg .contents-box .img-box { margin-bottom: 7.25vw; position: relative; } .contents-bg .contents-box .head-text { font-size: 3.86vw; line-height: 1.86; font-weight: 700; } /* add 2024627 togashi */ .contents-bg .contents-box .head-text .table-box table tr td { font-size: 14px; /*kato 20250114 3.1vw --> 14px */ line-height: 1.7; font-weight: 500; } .contents-bg .contents-box h2 { margin-bottom: 0; /*kato 20250114 4vw --> 0 */ padding-bottom: 8px; /*kato 20250114 2.42vw --> 8px */ font-size: 20px; /*kato 20250114 5.07vw --> 20px*/ text-align: left; /*kato 20250117 追加 */ } .contents-bg .contents-box h3 { margin-bottom: 0; /*kato 20250129 6vw --> 0*/ margin-top: 32px; /*kato 20250129 追加*/ padding: 0px 8px; /*kato 20250114 0px 2.4vw --> 0px 8px */ border-left: 4px solid #59a1d9; /*kato 20250114 1.2vw --> 4px */ font-size: 18px; /*kato 20250114 4.3vw --> 18px */ } .contents-bg .contents-box .mokuji-box { margin-bottom: 64px; /*kato 20250114 14.49vw --> 64px */ } .contents-bg .contents-box .mokuji-ttl { margin-bottom: 16px; /*kato 20250114 2.4vw --> 16px */ font-weight: 700; font-size: 20px; /*kato 20250114 5vw --> 20px*/ } .contents-bg .contents-box .mokuji-box ul li { margin-bottom: 1vw; max-width: none; } .contents-bg .contents-box .mokuji-box ul li:last-child { margin-bottom: 0; } .contents-bg .contents-box .mokuji-box ul li a { padding: 12px 40px 12px 20px; /*kato 20250114 3.6vw 8.4vw 3.6vw 4.8vw --> 14px 40px 14px 20px */ display: block; font-size: 14px; /*kato 20250114 3.6vw --> 14px */ } .contents-bg .contents-box .mokuji-box ul li a .sankaku { width: 8px; /*kato 20250114 2.4vw --> 8px */ position: absolute; top: 50%; right: 16px; /*kato 20250114 4.8vw --> 16px */ transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } .contents-bg .contents-box .mokuji-box ul li a .sankaku img { display: block; } .contents-bg .contents-box p { margin-bottom: 0; /*kato 20250115 9.66vw --> 0 */ font-size: 14px; /*kato 20250114 3.6vw --> 14px */ line-height: 1.86; text-align: justify; /*kato 20250114 追加 */ margin: 16px 0 0 0; /*kato 20250129 追加 */ word-break: break-all; } .contents-bg .contents-box .tex-box { margin-bottom: 0; /*kato 20250115 14.49vw --> 0 */ } .contents-bg .contents-box p.big { font-size: 16px; /*kato 20250114 3.6vw --> 16px */ } .contents-bg .contents-box p .notes { font-size: 14px; /*kato 20250114 3.0vw --> 14px */ } .contents-bg .contents-box p .bold { font-weight: 700; } .contents-bg .contents-box .link .icon { width: 4.8vw; display: inline-block; margin-left: 1vw; } .contents-bg .contents-box .link .icon img { display: block; } .contents-bg .contents-box .link a { width: 4.8vw; display: inline-block; margin-left: 1vw; } .contents-bg .contents-box .link a img { display: block; } .contents-bg .contents-box .link::before { content: ""; display: inline-block; vertical-align: middle; text-decoration: none; width: 1.44vw; height: 1.44vw; border-top: 2px solid #2282cc; border-right: 2px solid #2282cc; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: 0; margin-right: 1.2vw; } .bottom-inlist { padding-top: 64px; /*kato 20250115 14.49vw --> 64px */ border-top: 1px solid #8e8f8f; margin-bottom: 64px; /*kato 20250115 14.49vw --> 64px */ } .bottom-inlist li { display: flex; justify-content: space-between; margin-bottom: 48px; /*kato 20250115 9.66vw --> 48px */ } .bottom-inlist li:last-child { margin-bottom: 0; } .bottom-inlist li .pic { width: 25%; } .bottom-inlist li .textbox { width: 68%; } .bottom-inlist li .textbox .ttl { margin-bottom: 0; font-size: 14px; /*kato 20250114 3.1vw --> 14px */ font-weight: 700; } .bottom-inlist li .textbox .text { margin-bottom: 0; font-size: 14px; /*kato 20250115 2.9vw --> 14px */ line-height: 1.9; word-break: break-all; /*kato 20250115 追加*/ } .shere-list { text-align: right; margin-top: 48px; /*kato 20250115 14.49vw --> 48px */ } .shere-list li { display: inline-block; width: 32px; /*kato 20250115 9.6vw --> 32px */ margin-right: 12px; /*kato 20250115 3.3vw --> 16px */ line-height: 1; vertical-align: middle; } .shere-list li.text { width: 120px; /*kato 20250115 39vw --> 120px */ margin-right: 20px; /*kato 20250115 3.5vw --> 20px */ font-size: 12px; /*kato 20250114 3vw --> 12px */ } .shere-list li:last-child { margin-right: 0; } .kanren-slide { margin-top: 64px; /*kato 20250115 9.66vw --> 64px */ } .slide-box:last-of-type { margin-bottom: 0; } .waku { padding: 8px; /*kato 20250116 1vw 1vw --> 8px */ border: 1px solid #000; } .syutten { padding: 2vw 2vw; } } .contents-bg .contents-box .nobr { white-space: nowrap; } .contents-bg .contents-box h3.ptn2 { padding-left: 1.3em; text-indent: -1.3em; border-left: 0; } .contents-bg .contents-box h3.ptn2 span { color: #59a1d9; } .contents-bg .contents-box .table-box { margin-bottom: 10px; margin-top: 16px; /* kato 20250212 追加 */ } /* add table 20240627 togashi */ .contents-bg .contents-box .table-box.ptn1 { margin-bottom: 50px; } .contents-bg .contents-box .table-box.ptn2 { margin-bottom: 10px; /* ←50px; 20240627 togashi */ width: 100%; overflow-x: scroll; } .contents-bg .contents-box .table-box.ptn1 table { /*table-layout: fixed;*/ } .contents-bg .contents-box .table-box.ptn2 table { width: 1100px; /*table-layout: fixed;*/ } .contents-bg .contents-box .table-box table tr th { text-align: center; /* ←left; 20240627 togashi */ padding: 9px 12px; /* ←6px 3px; 20240627 togashi */ border-right: 1px solid #fff; border-bottom: 1px solid #fff; font-size: 14px; /* ←15px; 20240627 togashi */ /* 844ido 20240627 togashi */ background: #59a1d9; color: #fff; font-weight: 500; line-height: 1.2; white-space: nowrap; } .contents-bg .contents-box .table-box.ptn1 table tr th, .contents-bg .contents-box .table-box.ptn1 table tr td { width: auto; padding-left: 12px; padding-right: 12px; } .contents-bg .contents-box .table-box.ptn2 table tr th, .contents-bg .contents-box .table-box.ptn2 table tr td { width: auto; } .contents-bg .contents-box .table-box.ptn2 table tr th:nth-child(1) { width: auto; text-align: center; } .contents-bg .contents-box .table-box.ptn2 table tr th:nth-child(1).first { width: auto; } .contents-bg .contents-box .table-box table tr:first-child th { font-size: 14px; /* ←15px; 20240627 togashi */ text-align: center; font-weight: 500; width: auto; border-top: #FFFFFF 1px solid; } .contents-bg .contents-box .table-box.ptn3 { margin-bottom: 50px; } .contents-bg .contents-box .table-box.ptn3 table tr th { font-size: 14px; /* ←15px; 20240627 togashi */ text-align: center; font-weight: 500; } .contents-bg .contents-box .table-box table tr th.first { width: calc(10% - 20px); text-align: center; padding-left: 2px; /* ←1px; 20240627 togashi */ padding-right: 2px; /* ←1px; 20240627 togashi */ text-orientation: upright; -webkit-text-orientation: upright; } .contents-bg .contents-box .table-box table tr th.second { /* width: 7%!important; dedupe 20240627 togashi */ text-align: center; /* add 20240627 togashi */ white-space: nowrap; padding-left: 6px; padding-right: 6px; } .contents-bg .contents-box .table-box table tr th:last-child { border-right: 0; } .contents-bg .contents-box .table-box table tr td:last-child { border-right: 0; width: auto; } .contents-bg .contents-box .table-box table tr:last-child th, .contents-bg .contents-box .table-box table tr:last-child td { border-bottom: 0; /*min-width: 200px; kato 20250116 追加 */ } .contents-bg .contents-box .table-box table tr td { border-right: 1px solid #999; /* ←#fff; 20240627 togashi */ border-bottom: 1px solid #999; /* ←#fffx; 20240627 togashi */ padding: 6px 9px; /* ←12px 9px; 20240627 togashi */ font-size: 14px; /* ←12px; 20240627 togashi */ background: #F0F5F7; /* ←d3effc; 855ido 20240627 togashi */ } .contents-bg .contents-box .table-box table tr td.vatop { vertical-align: top; } .contents-bg .contents-box .table-box.ptn2 table tr td p { font-size: 12px; } /* ▼▼ add 20240808 togashi ▼▼ */ .contents-bg .contents-box .table-box.t-tx-r table tr td, .contents-bg .contents-box .table-box.tdtx-r table tr th { text-align: right; } .contents-bg .contents-box .table-box.t-tx-c table tr td { text-align: center; } .contents-bg .contents-box .table-box.t-tx-l table tr th { text-align: left; } .contents-bg .contents-box .table-box table tr.highlight-row td { background: #b7d8ee; } /* ▲▲ add 20240808 togashi ▲▲ */ /* dedupe 20240627 togashi .contents-bg .contents-box .table-box table tr th{ background: #59a1d9; color: #fff; font-weight: 500; line-height: 1.2; }*/ .contents-bg .contents-box .table-box table tr th sub { font-size: 9px; } /* dedupe 20240627 togashi .contents-bg .contents-box .table-box table tr td{ background: #d3effc; }*/ .contents-bg .contents-box .table-box table tr td p { margin-bottom: 5px !important; font-size: 12px; } .contents-bg .contents-box .table-box.ptn4 table tr td { font-size: 15px !important; } /* add 20240509 togashi */ .contents-bg .contents-box .table-box.ptn2 table tr td p.t-ttl { line-height: 1; margin-bottom: 1px; margin-top: 7px; } .contents-bg .contents-box .table-box table tr td a { color: #2282cc; } .contents-bg .contents-box .table-box table tr td p.notes { font-size: 12px; line-height: 1.3; padding-left: 1em; text-indent: -1em; margin-bottom: 2px !important; } .contents-bg .contents-box .table-box table tr td p.notebig { font-size: 12px; line-height: 1.3; margin-bottom: 0 !important; } .contents-bg .contents-box .table-box table tr td ul li { padding-left: 1em; text-indent: -1em; } .contents-bg .contents-box .table-box table tr td ul.list { margin-bottom: 4px; } .contents-bg .contents-box .table-box table tr td ul.list li { font-size: 14px; line-height: 1.35; font-weight: 700; } .contents-bg .contents-box .table-box table tr td .flex-list { display: flex; justify-content: space-between; } .contents-bg .contents-box .table-box table tr td .flex-list ul { width: 49%; } .contents-bg .contents-box .table-box table tr td .flex-list ul li { font-size: 11px; line-height: 1.36; font-weight: 700; } .contents-bg .contents-box .table-box table tr td p.big { text-align: center; font-size: 13px; font-weight: 700; margin-bottom: 1px; padding-top: 6px; } .contents-bg .contents-box .table-box table tr td .big span { font-size: 12px; } .contents-bg .contents-box .table-box table tr td .big.left { text-align: left; } .contents-bg .contents-box .table-notes { margin-top: 16px; /* add tanaka*/ margin-bottom: 0; /* ←83px; 20240911 togashi */ /*kato 20250128 30px --> 0 */ } .contents-bg .contents-box .table-notes p { font-size: 12px; line-height: 1.6; margin: 4px 0 0 0; } .contents-bg .contents-box .table-notes p.indent { padding-left: 1.7em; text-indent: -1.7em; } .contents-bg .contents-box .table-lasttext { margin-bottom: 0; /*kato 20250128 115px --> 0 */ } .contents-bg .contents-box .flex-box { margin-bottom: 0; /*kato 20250128 45px --> 0 */ display: flex; justify-content: space-between; margin: 0 0 0 0; } .contents-bg .contents-box .flex-box .f-img { width: 33%; } .contents-bg .contents-box .flex-box .f-img img { /*kato 20250129 追加 */ margin: 16px 0 0 0; } .contents-bg .contents-box .flex-box .f-text { width: 63%; margin: 0 0 0 0; /*kato 20250129 追加 */ } .navi-cont.del { padding-bottom: 0; } .navi-cont.plus { padding-top: 1px; padding-bottom: 80px; } .navi-cont.plus .wrap { width: 90%; } @media print, screen and (max-width: 900px) { .contents-bg .contents-box .table-box { margin-bottom: 4vw; /* ←1.25vw; 20240911 togashi */ width: 105%; margin-right: -5%; overflow-x: scroll; } /* add table 20240627 togashi */ .contents-bg .contents-box .table-box.ptn1 { margin-bottom: 7.25vw; width: 105%; margin-right: -5%; overflow-x: scroll; } .contents-bg .contents-box .table-box.ptn2 { margin-bottom: 7.25vw; width: 110%; overflow-x: scroll; margin-right: -5%; margin-left: -5%; } .contents-bg .contents-box .table-box.ptn3 { margin-bottom: 7.25vw; width: 105%; margin-right: -5%; overflow-x: scroll; } .contents-bg .contents-box .table-box table { width: 100%; } /* add table 20240627 235vw→100% 20240826 togashi */ .contents-bg .contents-box .table-box.ptn1 table { /*table-layout: fixed;*/ max-width: auto; /* kato 20250116 追加 */ min-width: 400px; /* kato 20250116 追加 */ /* width: 235vw; kato 20250116*/ } .contents-bg .contents-box .table-box.ptn2 table { width: 250vw; /*table-layout: fixed;*/ } .contents-bg .contents-box .table-box.ptn3 table { /*table-layout: fixed;*/ width: 235vw; } .contents-bg .contents-box .table-box table tr th { text-align: center; /* ←left; 20240627 togashi */ font-weight: 500; padding: 12px 8px; /*kato 20250214 2vw 1vw --> 12px 8px */ font-size: 14px; /*kato 20250114 3.6vw --> 14px */ } .contents-bg .contents-box .table-box table tr th, .contents-bg .contents-box .table-box table tr td { width: auto; box-sizing: border-box; /*kato 20250117 追加 */ padding: 8px 12px; /*kato 20250114 2vw 4vw --> 12px 16px */ } /* add table 20240627 togashi */ .contents-bg .contents-box .table-box.ptn1 table tr th, .contents-bg .contents-box .table-box.ptn1 table tr td { width: auto; /*min-width: 200px; kato 20250116 追加 */ padding: 12px 16px; /*kato 20250114 2vw 4vw --> 12px 16px */ } .contents-bg .contents-box .table-box.ptn2 table tr th, .contents-bg .contents-box .table-box.ptn2 table tr td { width: auto; } .contents-bg .contents-box .table-box.ptn2 table tr th:nth-child(1) { width: auto; text-align: center; } .contents-bg .contents-box .table-box.ptn2 table tr th:nth-child(1).first { width: auto; } .contents-bg .contents-box .table-box table tr:first-child th { font-size: 14px; /*kato 20250114 3.6vw --> 14px */ text-align: center; font-weight: 500; } .contents-bg .contents-box .table-box.ptn3 table tr th { font-size: 14px; /*kato 20250114 3.6vw --> 14px */ text-align: center; font-weight: 500; /*min-width: 200px; kato 20250117 追加 */ /*max-width: 300px; kato 20250117 追加 */ box-sizing: border-box; /*kato 20250117 追加 */ } .contents-bg .contents-box .table-box table tr th.first { width: calc(10% - 4vw); text-align: center; padding-left: 2px; /* ←1px; 20240627 togashi */ padding-right: 2px; /* ←1px; 20240627 togashi */ text-orientation: upright; -webkit-text-orientation: upright; } .contents-bg .contents-box .table-box table tr th.second { /* width: 7%!important; dedupe 20240627 togashi */ text-align: center; /* add 20240627 togashi */ white-space: nowrap; padding-left: 6px; padding-right: 6px; } /* dedupe 20240812 togashi .contents-bg .contents-box .table-box table tr th:last-child{ border-right: 0; } .contents-bg .contents-box .table-box table tr td:last-child{ border-right: 0; } .contents-bg .contents-box .table-box table tr:last-child th,.contents-bg .contents-box .table-box table tr:last-child td{ border-bottom: 0; }*/ .contents-bg .contents-box .table-box table tr td { border-right: 1px solid #999; /* ←fff; 20240627 togashi */ border-bottom: 1px solid #999; /* ←fff; 20240627 togashi */ /* padding: 1vw 1vw; dedupe 20240627 togashi */ font-size: 12px; /*kato 20250218 3.1vw --> 12px */ } .contents-bg .contents-box .table-box table tr td.vatop { vertical-align: top; min-width: 300px; /*kato 20250116 追加 */ } .contents-bg .contents-box .table-box.ptn2 table tr td p { font-size: 14px; /*kato 20250114 3.0vw --> 14px */ } .contents-bg .contents-box .table-box table tr th { font-weight: 500; line-height: 1.2; } .contents-bg .contents-box .table-box table tr th sub { font-size: 2.3vw; } .contents-bg .contents-box .table-box table tr td { background: #F0F5F7; /* ←d3effc; 20240627 togashi */ } .contents-bg .contents-box .table-box table tr td p { margin-bottom: 1vw !important; font-size: 2.9vw; } .contents-bg .contents-box .table-box.ptn2 table tr td p.t-ttl { margin-top: 2vw; } .contents-bg .contents-box .table-box table tr td p.notes { font-size: 14px; /*kato 20250114 3.0vw --> 14px */ line-height: 1.3; } .contents-bg .contents-box .table-box table tr td p.notebig { font-size: 14px; /*kato 20250114 3.0vw --> 14px */ line-height: 1.3; } .contents-bg .contents-box .table-box table tr td ul li { padding-left: 1em; text-indent: -1em; } .contents-bg .contents-box .table-box table tr td ul.list li { font-size: 16px; /*kato 20250114 3.3vw --> 16px */ line-height: 1.35; font-weight: 700; } .contents-bg .contents-box .table-box table tr td .flex-list { display: flex; justify-content: space-between; } .contents-bg .contents-box .table-box table tr td .flex-list ul { width: 49%; } .contents-bg .contents-box .table-box table tr td .flex-list ul li { font-size: 16px; /*kato 20250114 2.6vw --> 16px */ line-height: 1.36; font-weight: 700; } .contents-bg .contents-box .table-box table tr td p.big { text-align: center; font-size: 14px; /*kato 20250114 3.1vw --> 14px */ font-weight: 700; margin-bottom: 1px; } .contents-bg .contents-box .table-box table tr td .big span { font-size: 14px; /*kato 20250114 3.0vw --> 14px */ } .contents-bg .contents-box .table-notes { margin-bottom: 8vw; /* ←20px; 20240911 togashi */ } .contents-bg .contents-box .table-notes p { font-size: 12px; /*kato 20250114 3.0vw --> 12px */ line-height: 1.4; margin-bottom: 0; } .contents-bg .contents-box .table-lasttext { margin-bottom: 14.49vw; } .contents-bg .contents-box .flex-box { margin-bottom: 0px; /*kato 20250114 7.25vw --> 0 */ margin-top: 20px; display: block; } .contents-bg .contents-box .flex-box .f-img { width: 100%; margin-bottom: 5vw; text-align: center; } .contents-bg .contents-box .flex-box .f-text { width: 100%; margin: 0; /*kato 20250129 追加 */ } .navi-cont.del { padding-bottom: 0; } .navi-cont.plus { padding-top: 1px; padding-bottom: 32px; /*kato 20250114 9.66vw --> 32px */ } .navi-cont.plus .wrap { width: 90%; } } /************************* BIL add **************************/ /* 20240306 No49 スマホ用画像調整 竹内*/ @media print, screen and (max-width: 900px) { .articles-scroll-img { width: 100%; overflow-x: scroll; } .articles-scroll-img img { max-width: none; width: 1000px; } } /* add list-style 20240516 togashi*/ .list-box ul, .list-box ol { margin: 10px 10px 30px; padding-left: 1em; font-size: 14px; /*kato 20250214 15px --> 14px */ } .list-box ul li { list-style: disc; } .list-box ol li { list-style: decimal; } .list-box ul > li > ul, .list-box ol > li > ul { margin: 5px 0; } .list-box ul > li > ul > li { list-style: "- "; } .list-box ol > li > ul > li { list-style: disc; } /* add title-text 20250107 togashi */ .contents-bg .contents-box .list-box-ttl { /* ←.list-ttl; 202450130 togashi クラス名重複のため */ padding-left: 1.3em; text-indent: -1.3em; margin-bottom: 0; /* ← 5px; 202450130 togashi */ color: #0d2e9b; font-weight: 700; } .contents-bg .contents-box .list-box-ttl span { /* ←.list-ttl; 202450130 togashi クラス名重複のため */ color: #59a1d9; margin-right: 5px; /* add 202450130 togashi */ } /* add banner-box 20240611 togashi */ .con-bnrbox-l { display: block; position: relative; margin-bottom: 50px; } .con-bnrbox-s { display: block; position: relative; width: 90%; max-width: 532px; margin: 50px auto; } /* add interview 20241206 togashi */ .contents-bg .contents-box .prof-obi { padding: 20px 40px; background: #eee; } .contents-bg .contents-box .prof-obi .ttl { margin-bottom: 0; padding-left: 1em; font-size: 13px; font-weight: 700; border-bottom: 1px solid #8e8f8f; } .contents-bg .contents-box .prof-obi p.ttl { margin: 0; } .contents-bg .contents-box .prof-obi .text { margin-bottom: 0; margin-top: 10px; padding-left: 1em; font-size: 13px; line-height: 1.5; } .contents-bg .contents-box .interview p { margin-bottom: 20px; } .contents-bg .contents-box .interview .interview-q { font-weight: 700; font-size: 16px; color: #119c9f; margin-top: 30px; } .contents-bg .contents-box .tx-c { text-align: center; } /* ▼▼▼ add flow-box 20250130 togashi ▼▼▼ */ .flow-box01 { display: flex; justify-content: left; margin-bottom: 30px; } .flow-box01 ul { padding: 0; } .flow-box01 li { list-style-type: none; } .flow01 > li { position: relative; list-style: none; } .flow01 > li:not(:last-child) { margin-bottom: 40px; } .flow01 > li dl { box-sizing: border-box; width: 100%; padding: 20px 30px; display: flex; align-items: center; border: 2px solid #119c9f; border-radius: 10px; position: relative; } .flow01 > li:not(:last-child) dl::before, .flow01 > li:not(:last-child) dl::after { content: ""; border: solid transparent; position: absolute; top: 100%; left: 22%; transform: translateX(-50%); } .flow01 > li:not(:last-child) dl::before { border-width: 22px; border-top-color: #119c9f; } .flow01 > li:not(:last-child) dl::after { border-width: 20px; border-top-color: #fff; } .flow01 > li dl dt { font-size: 1.2em; font-weight: 600; flex-basis: 40%; margin-right: 2vw; text-align: center; line-height: 1.5em; white-space: nowrap; } .flow01 > li dl dt .icon01 { font-size: 0.8em; color: #fff; background: #119c9f; padding: 5px 10px; margin-bottom: 10px; display: block; position: relative; } .flow01 > li dl .dd-container { display: flex; flex-direction: column; flex-basis: 60%; margin-left: 10px; } .flow01 > li dl dd { margin-left: 0; list-style: none; padding-left: 1em; position: relative; } .flow01 > li dl dd::before { content: "•"; position: absolute; left: 0; color: #333; } /* ▲▲▲ add flow-box 20250130 togashi ▲▲▲ */ /* add SP code */ @media print, screen and (max-width: 900px) { .list-box ul, .list-box ol { margin-bottom: 20px; /*kato 20250213 9.66vw --> 20px */ font-size: 14px; /*kato 20250114 3.6vw --> 14px */ line-height: 1.86; } .con-bnrbox-l { width: 100%; margin: 0 auto; } .con-bnrbox-s { width: 100%; max-width: none; margin: 7.25vw auto; } .contents-bg .contents-box .prof-obi { padding: 3.2vw 5.3vw; } .contents-bg .contents-box .prof-obi .ttl { font-size: 14px; /*kato 20250114 3.1vw --> 14px */ } .contents-bg .contents-box .prof-obi .text { font-size: 2.9vw; } .contents-bg .contents-box .interview .interview-q { font-size: 3.8vw; } /* ▼▼▼ add flow-box 20250130 togashi ▼▼▼ */ .flow-box01 { justify-content: center; } .flow01 > li:not(:last-child) { margin-bottom: 30px; } .flow01 > li dl { display: block; padding: 20px 30px 10px; } .flow01 > li:not(:last-child) dl::before, .flow01 > li:not(:last-child) dl::after { top: 100%; left: 50%; transform: translateX(-50%); } .flow01 > li dl dt { margin-right: 0; display: flex; align-items: center; white-space: normal; text-align: left; margin-bottom: 15px; } .flow01 > li dl dt .icon01 { margin-right: 10px; margin-bottom: 0; padding: 15px 10px; } .flow01 > li dl .dd-container { flex-basis: 100%; margin-bottom: 10px; } .flow01 > li dl dd { padding-left: 0; margin-left: 0; } .flow01 > li dl dd::before { left: -0.5em; /* ポイントの位置を調整 */ position: relative; } /* ▲▲▲ add flow-box 20250130 togashi ▲▲▲ */ } /* ▲▲▲ add flow-box f-item-half 20250205 togashi ▲▲▲ */ .contents-bg .contents-box .flex-box.f-item-half .f-img { width: 48%; } .contents-bg .contents-box .flex-box.f-item-half .f-text { width: 48%; } @media print, screen and (max-width: 900px) { .contents-bg .contents-box .flex-box.f-item-half .f-img { width: 100%; } .contents-bg .contents-box .flex-box.f-item-half .f-text { width: 100%; } } /* ▲▲▲ add flow-box f-item-half 20250205 togashi ▲▲▲ */ /*202501 kato追加 新規テーブルスタイル-------------------------------------*/ .contents-bg .contents-box .head-text .table-area01 td { font-size: 14px; font-weight: 500; } .contents-bg .contents-box .head-text .table-area01 th { font-size: 14px; color: #333; line-height: 1.6; } .contents-bg .contents-box .head-text .table-area01 thead th { font-size: 14px; color: #FFF; line-height: 1.6; } .table-area01 { width: 100%; margin: 24px 0 0 0; } .table-area01 h3 { margin-bottom: 20px !important; margin-top: 0 !important; padding: 0px !important; font-size: 20px; color: #59a1d9 !important; line-height: 1.5; border: none !important; } .table-area01 table { width: 100%; table-layout: auto; } .table-area01 tr th:first-child { width: auto; } .table-area01 tr { border-bottom: none; } .table-area01 thead th { text-align: center; background: #59a1d9; color: #FFFFFF; border-right: 1px solid #fff; border-bottom: 1px solid #fff; white-space: nowrap; } .table-area01 tbody th { white-space: nowrap; } .table-area01 tr th:last-child, .table-area01 tr td:last-child { border-right: none; } .table-area01 th, .table-area01 td { padding: 8px 12px; text-align: left; background: #bdd9f0; border-right: 1px solid #999; border-bottom: 1px solid #999; } .table-area01 td { background: #F0F5F7; line-height: 1.6; } .table-area01 td div { font-size: 12px; color: #666; text-align: justify; } .table-area01 td a { color: #2282cc; } .table-area01 th span, .table-area01 td span { font-size: 12px; color: #59a1d9; } /*202501 kato追加 「table-list-box」 テーブル内でテーブルを入れ子して、表を設ける場合に使用*/ .table-area01 td div.table-list-box { font-size: 14px; color: #333; margin: 8px 0 4px 0; } .table-area01 td div.table-list-box table { table-layout: fixed; } .table-area01 td div.table-list-box th { font-size: 14px; color: #333; min-width: 110px; width: auto; box-sizing: border-box; padding: 4px 0 4px 16px; border: none; border-top: 1px solid #ccc; margin: 0; line-height: 1.8; background: #ddd; white-space: nowrap; } .table-area01 td div.table-list-box td { font-size: 14px; color: #333; width: auto; box-sizing: border-box; padding: 4px 0; border: none; border-top: 1px solid #ccc; margin: 0; background: #ddd; } .table-area01 td div.table-list-box02 { font-size: 14px; color: #333; margin: 8px 0 4px 0; } .table-area01 td div.table-list-box02 table { table-layout: fixed; } .table-area01 td div.table-list-box02 th { font-size: 14px; color: #333; min-width: 110px; width: auto; box-sizing: border-box; padding: 4px 0 4px 16px; border: none; border-top: 1px solid #ccc; margin: 0; line-height: 1.8; background: #ddd; white-space: nowrap; } .table-area01 td div.table-list-box02 td { font-size: 14px; color: #333; width: auto; box-sizing: border-box; padding: 4px 0 4px 0; border: none; border-top: 1px solid #ccc; margin: 0; background: #ddd; } /* テーブル内でのリストを表的なレイアウトに */ .table-area01 td dl{ white-space: nowrap; display: grid; grid-template-columns: auto 1fr; /* 2カラムに分ける */ gap: 0 0; /* カラム間のスペース */ margin: 8px 0 0 0; } .table-area01 td dl dt:first-child, .table-area01 td dl dd:nth-child(2){ border-top: none; } .table-area01 td dl dt, .table-area01 td dl dd{ border-top: 1px solid #ccc; } .table-area01 td dl dt{ padding: 4px 8px 4px 0; border-left: none; } .table-area01 td dl dd{ padding: 4px 0 4px 8px; } .table-area01 td dl dd.in-dl{ padding: 0 0 0 8px; } .table-area01 td dl dd.in-dl dl{ margin: 0; } /*202501 kato追加 「ol li」で、リストを作った場合、色●に数字で表現されます*/ .table-area01 ol { counter-reset: number; /*数字をリセット*/ list-style-type: none !important; /*数字を一旦消す*/ padding: 4px 0 0 0; margin: 4px 0 0 0; border-top: #ccc 1px solid; width: 100%; } .table-area01 ol li { position: relative; line-height: 1.2em; padding: 0.25em 0.25em 0.25em 20px; font-size: 14px; color: #59a1d9; } .table-area01 ol li:before { /* 以下数字をつける */ position: absolute; counter-increment: number; content: counter(number); /*以下数字のデザイン変える*/ display: inline-block; background: #59a1d9; color: white; font-family: 'Avenir', 'Arial', sans-serif; font-weight: 200; font-size: 10px; border-radius: 50%; left: 0; width: 15px; height: 15px; line-height: 15px; text-align: center; /*以下 上下中央寄せのため*/ top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .table-area01 ul { padding: 0 0 0 14px; width: 100%; } .table-area01 ul li { list-style-type: disc; list-style: outside; margin: 4px 0 0 0; } /*202501 kato追加 「table-area01」の、スマホ表現 */ @media screen and (max-width: 900px) { .contents-bg .contents-box .head-text .table-area01 tbody th { font-size: 14px; color: #FFF; line-height: 1.6; } .table-area01 thead { display: none; } .table-area01 td.nobr { white-space: wrap !important; } .table-area01 tr { background-color: unset; border-bottom: 6px solid #FFFFFF; } .table-area01 tr th:first-child { width: 100%; border-bottom: 1px solid #fff; } .table-area01 th { background: #59a1d9; color: #FFFFFF; padding: 8px 16px; } .table-area01 tbody th { white-space: normal; } .table-area01 th span { font-size: 12px; color: #bdd9f0; } /* display: block;でテーブル要素の横並びを解除 */ .table-area01 th, .table-area01 td { display: block; width: 100%; border: 0; border-bottom: 1px solid #ccc; } .table-area01 td dl{ white-space: wrap; display: grid; grid-template-columns: auto 1fr; /* 2カラムに分ける */ gap: 0 0; /* カラム間のスペース */ } /* 縦に並べる */ .table-area01 tbody tr td { display: flex; flex-direction: column; } .table-area01 td { padding: 16px; font-size: 14px; } /* tdにつけている「data-label」の値を表示(ちなみに、data-以降は任意の名前です)*/ .table-area01 tbody tr td::before { content: attr(data-label); font-size: 14px; font-weight: bold; color: #59a1d9; margin: 0 0 4px 0; } /* thにつけている「data-label」の値を表示 */ .table-area01 tbody tr th::before { content: attr(data-label); font-size: 14px; font-weight: bold; color: #fff; display: block; } .table-area01 tbody tr th::before { content: attr(data-title); font-size: 14px; font-weight: bold; color: #fff; line-height: 2.4; } .table-area01 td div.table-list-box tr { border: none; } .table-area01 td div.table-list-box th { display: table-cell; padding: 4px 0 4px 4px; width: auto; white-space: normal; } .table-area01 td div.table-list-box td { display: table-cell; padding: 4px 4px 4px 0; } .table-area01 div.table-list-box02 tr { display: block; width: 100%; border: 0; border-bottom: none; background: #ddd; } .table-area01 div.table-list-box02 th { border: none; padding: 4px 0 0 14px !important; } .table-area01 div.table-list-box02 td { border: none !important; padding: 0 0 4px 14px !important; } /* 縦に並べる */ .table-area01 div.table-list-box02 tbody tr td { display: flex; flex-direction: column; } /* テーブル内でのリストを表的なレイアウトに */ .table-area01 td dl{ white-space: normal; display: grid; grid-template-columns: auto 1fr; /* 2カラムに分ける */ gap: 0 0; /* カラム間のスペース */ margin: 8px 0 0 0; } .table-area01 td dl dt:first-child, .table-area01 td dl dd:nth-child(2){ border-top: none; } .table-area01 td dl dt, .table-area01 td dl dd{ border-top: 1px solid #ccc; } .table-area01 td dl dt{ padding: 4px 8px 4px 0; border-left: none; } .table-area01 td dl dd{ padding: 4px 0 4px 8px; } .table-area01 td dl dd.in-dl{ padding: 0 0 0 8px; } .table-area01 td dl dd.in-dl dl{ white-space: normal; display: grid; grid-template-columns: auto; gap: 0; /* カラム間のスペース */ margin: 0; } .table-area01 td dl dd.in-dl dl dt, .table-area01 td dl dd.in-dl dl dd{ padding: 0; } .table-area01 td dl dd.in-dl dl dt{ padding: 4px 0 0 0; } .table-area01 td dl dd.in-dl dl dd{ border: none; padding: 0 0 4px 0; } } /*テーブルタイトルが左にのみついている場合-------------------------------------*/ .table-area02 { width: 100%; margin: 24px 0 0 0; } .table-area02 table { width: 100%; table-layout: fixed; } .table-area02 tr th:first-child { width: 25%; } .table-area02 th { padding: 4px 12px; text-align: left; background: #59a1d9; border-right: 1px solid #fff; border-bottom: 1px solid #fff; color: #FFFFFF; } .table-area02 tr:last-child th { border-bottom: 1px solid #999; } .table-area02 td { padding: 4px 12px; text-align: left; background: #F0F5F7; border-right: 1px solid #999; border-bottom: 1px solid #999; line-height: 1.6; } .table-area02 td div { font-size: 12px; color: #666; } .table-area02 td div.table-list-box { font-size: 14px; color: #333; margin: 8px 0 4px 0; } .table-area02 td div.table-list-box table { table-layout: fixed; } .table-area02 td div.table-list-box th { font-size: 14px; color: #333; width: 110px; box-sizing: border-box; padding: 4px 0 4px 16px; border: none; border-top: 1px solid #ccc; margin: 0; line-height: 1.8; background: #ddd; } .table-area02 td div.table-list-box td { font-size: 14px; color: #333; width: auto; box-sizing: border-box; padding: 4px 0; border: none; border-top: 1px solid #ccc; margin: 0; background: #ddd; } .table-area02 td a { color: #2282cc; } .table-area02 tr { border-bottom: none; } .table-area02 thead th { text-align: center; background: #59a1d9; color: #FFFFFF; border-right: 1px solid #fff; } .table-area02 tr th:last-child, .table-area02 tr td:last-child { border-right: none; } .table-area02 th span, .table-area02 td span { font-size: 12px; color: #59a1d9; } .table-area02 ol { counter-reset: number; /*数字をリセット*/ list-style-type: none !important; /*数字を一旦消す*/ padding: 4px 0 0 0; margin: 4px 0 0 0; border-top: #ccc 1px solid; width: 100%; } .table-area02 ol li { position: relative; line-height: 1.2em; padding: 0.25em 0.25em 0.25em 20px; font-size: 14px; color: #59a1d9; } .table-area02 ol li:before { /* 以下数字をつける */ position: absolute; counter-increment: number; content: counter(number); /*以下数字のデザイン変える*/ display: inline-block; background: #59a1d9; color: white; font-family: 'Avenir', 'Arial', sans-serif; font-weight: 200; font-size: 10px; border-radius: 50%; left: 0; width: 15px; height: 15px; line-height: 15px; text-align: center; /*以下 上下中央寄せのため*/ top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .table-area02 ul { padding: 0 0 0 14px; width: 100%; } .table-area02 ul li { list-style-type: disc; list-style: outside; margin: 4px 0 0 0; } @media screen and (max-width: 900px) { .table-area02 thead { display: none; } .table-area02 tr { background-color: unset; border-bottom: 6px solid #FFFFFF; } .table-area02 tr th:first-child { width: 100%; } .table-area02 th { background: #59a1d9; color: #FFFFFF; white-space: nowrap; padding: 8px 16px; } .table-area02 th span { font-size: 12px; color: #bdd9f0; } .table-area02 tr:last-child th { border-bottom: 1px solid #FFF; } .table-area02 th, .table-area02 td { display: block; width: 100%; border: 0; border-bottom: 1px solid #ccc; } .table-area02 td { padding: 16px; } .table-area02 tbody tr td { display: flex; flex-direction: column; } .table-area02 tbody tr td::before { content: attr(data-label); font-size: 14px; font-weight: bold; color: #59a1d9; } .table-area02 td div.table-list-box tr { border: none; } .table-area02 td div.table-list-box th { display: table-cell; padding: 4px 0 4px 4px; width: 90px; } .table-area02 td div.table-list-box td { display: table-cell; padding: 4px 4px 4px 0; } } /*テーブルタイトルが上部にのみついている場合(横スクロールでおおむね問題ない)-------------------------------------*/ .table-area03 { width: 100%; overflow-x: hidden; margin: 24px 0 0 0; } .table-area03 table { width: 100%; } .table-area03 table th { text-align: center; background: #59a1d9; color: #FFFFFF; border-right: 1px solid #fff; border-bottom: 1px solid #fff; white-space: nowrap; padding: 4px 12px; } .table-area03 td { padding: 4px 12px; text-align: left; border-right: 1px solid #999; border-bottom: 1px solid #999; background: #F0F5F7; line-height: 1.6; } .table-area03 td:last-child { border-right: none; } @media screen and (max-width: 900px) { .table-area03 { width: 100%; overflow-x: scroll; } .table-area03 table { width: 100%; } .table-area03 table td { padding: 16px; } } .table-area03vartical { width: 100%; overflow-x: hidden; margin: 24px 0 0 0; } .table-area03vartical table { width: 100%; border-collapse: collapse; } .table-area03vartical table th { text-align: center; background: #59a1d9; color: #FFFFFF; border-right: 1px solid #fff; border-bottom: 1px solid #fff; white-space: nowrap; padding: 4px 12px; } .table-area03vartical td { padding: 4px 12px; text-align: left; border-right: 1px solid #999; border-bottom: 1px solid #999; background: #F0F5F7; line-height: 1.6; } .table-area03vartical td:last-child { border-right: none; } @media screen and (max-width: 900px) { .table-area03vartical { width: 100%; overflow-x: hidden; margin: 24px 0 0 0; } .table-area03vartical thead{ display: none; } .table-area03vartical tbody tr{ margin: 16px 0 0 0; display: flex; flex-direction: column; } .table-area03vartical td::before{ content: attr(data-label); display: block; color: #fff; background: #59a1d9; padding: 4px 4px 4px 10px; margin: 0 0 4px 0; position: relative; left: -12px; width: 110%; } .table-area03vartical tbody td{ border-right: none; padding-top:0; } } .flow-area01 { width: 600px; margin: 0 auto; } .flow-area01 ul, .flow-area01 li, .flow-area01 dl { width: 100%; margin: 0 auto; line-height: 1.0; } .flow-area01 dl { display: flex; flex-direction: column; align-items: center; } .flow-area01 dl dt { width: 100%; display: flex; justify-content: center; align-items: center; line-height: 1.0; } .flow-area01 dl dt span { line-height: 1.0; display: block; padding: 10px 20px; background: #ccc; font-size: 10px; font-weight: 700; margin: 0 16px; } .flow-area01 dl dt p { line-height: 1.0; font-size: 14px; margin: 0 16px !important; } .flow-area01 .dd-ctr { width: auto; } .flow-area01 .dd-ctr {} /*既存tableとの調整用*/ .table-area00 { width: 100%; margin: 24px 0 0 0; } .table-area00 h3 { margin-bottom: 20px !important; margin-top: 0 !important; padding: 0px !important; font-size: 20px; color: #59a1d9 !important; line-height: 1.5; border: none !important; text-align: left; } .table-area01 caption , .table-area02 caption , .table-area03 caption , .table-area03vartical caption , .table-area00 caption { width: 100%; margin-bottom: 16px; margin-top: 32px; padding: 0px 12px 0px 16px; font-size: 18px; font-weight: 700; color: #0d2e9b; line-height: 1.6; text-align: left; } .table-area01 caption::before , .table-area02 caption::before , .table-area03 caption::before , .table-area03vartical caption::before , .table-area00 caption::before{ content: ""; display: block; width: 12px; height: 12px; background: #59a1d9; border-radius: 6px; position: relative; top: 22px; left: -16px; } .table-area00 table { width: 100%; } .table-area00 tr th:first-child { } .table-area00 tr { border-bottom: none; } .table-area00 thead th { text-align: center; background: #59a1d9; color: #FFFFFF; border-right: 1px solid #fff; border-bottom: 1px solid #fff; white-space: nowrap; } .table-area00 tbody th { white-space: nowrap; } .table-area00 tr th:last-child, .table-area00 tr td:last-child { border-right: none; } .table-area00 th, .table-area00 td { padding: 4px 12px; text-align: left; background: #bdd9f0; border-right: 1px solid #999; border-bottom: 1px solid #999; } .table-area00 td { background: #F0F5F7; line-height: 1.6; } .table-area00 td div { font-size: 12px; color: #666; text-align: justify; } .table-area00 td a { color: #2282cc; } .table-area00 th span, .table-area00 td span { font-size: 12px; color: #30648D; } /*202501 kato追加 「ol li」で、リストを作った場合、色●に数字で表現されます*/ .table-area00 ol { counter-reset: number; /*数字をリセット*/ list-style-type: none !important; /*数字を一旦消す*/ padding: 4px 0 0 0; margin: 4px 0 0 0; border-top: #ccc 1px solid; width: 100%; } .table-area00 ol li { position: relative; line-height: 1.2em; padding: 0.25em 0.25em 0.25em 20px; font-size: 14px; color: #30648D; } .table-area00 ol li:before { /* 以下数字をつける */ position: absolute; counter-increment: number; content: counter(number); /*以下数字のデザイン変える*/ display: inline-block; background: #30648D; color: white; font-family: 'Avenir', 'Arial', sans-serif; font-weight: 200; font-size: 10px; border-radius: 50%; left: 0; width: 15px; height: 15px; line-height: 15px; text-align: center; /*以下 上下中央寄せのため*/ top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } @media screen and (max-width: 900px) { .table-area00 { overflow-x: scroll; overflow-y: scroll; width: 105%; height: 70vh; margin: 24px 0 0 0; } .table-area00 table{ width: 200%; } .table-area00 thead th{ position: -webkit-sticky; position: sticky; top: 0; /* tbody内のセルより手前に表示する */ z-index: 2; } .table-area00 thead th:first-child{ z-index: 2; } .table-area00 tbody th{ vertical-align: top; } .table-area01 caption , .table-area02 caption , .table-area00 caption{ width: 80vw; } } .photo-text-box01 { width: 100%; padding: 24px 24px 16px 24px; background: #F0F5F7; border-radius: 4px; margin: 16px 0 0 0; box-sizing: border-box; } .photo-text-box01 .photo-text-g { display: flex; justify-content: space-between; align-items: flex-start; /* 高さを合わせない */ flex-direction: row; padding: 24px 0 0 0; margin: 14px 0 0 0; border-top: 2px solid #FFFFFF; } .photo-text-box01 .photo-text-g:first-child { padding: 0 0 0 0; margin: 0 0 0 0; border-top: none; } .photo-text-box01 .photo-text-g .imgBox { width: 320px; box-sizing: border-box; padding: 0; } .photo-text-box01 .photo-text-g .imgBox img { width: 320px; height: auto; border: 1px solid #CCC; } .photo-text-box01 .photo-text-g .imgBox p { margin: 8px 0 0 0; font-size: 12px; } .photo-text-box01 .photo-text-g .textBox { width: calc(100% - 340px); } .photo-text-box01 .photo-text-g .textBox p { position: relative; top: -8px; } .photo-text-box01 .photo-text-g .textBox p:first-child { margin: 0; } @media screen and (max-width: 900px) { .photo-text-box01 { width: 100%; padding: 24px 24px 16px 24px; background: #F0F5F7; border-radius: 4px; margin: 16px 0 0 0; box-sizing: border-box; } .photo-text-box01 .photo-text-g { display: flex; justify-content: space-between; flex-direction: column; padding: 24px 0 0 0; margin: 14px 0 0 0; border-top: 2px solid #FFFFFF; } .photo-text-box01 .photo-text-g:first-child { padding: 0 0 0 0; margin: 0 0 0 0; border-top: none; } .photo-text-box01 .photo-text-g .imgBox { width: 100%; order: 1; padding: 0; } .photo-text-box01 .photo-text-g .imgBox img { width: 100%; height: auto; border: 1px solid #CCC; } .photo-text-box01 .photo-text-g .imgBox p { margin: 8px 0 0 0; font-size: 12px; } .photo-text-box01 .photo-text-g .textBox { width: 100%; order: 2; } .photo-text-box01 .photo-text-g .textBox p { position: relative; top: 0; } .photo-text-box01 .photo-text-g .textBox p:first-child { margin: 16px 0 0 0; } } .photo-text-box50-50 { width: 100%; padding: 24px 24px 16px 24px; background: #F0F5F7; border-radius: 4px; margin: 16px 0 0 0; box-sizing: border-box; } .photo-text-box50-50 .photo-text-g { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; align-items: start; padding: 24px 0 0 0; margin: 24px 0 0 0; border-top: 2px solid #FFFFFF; } .photo-text-box50-50 .photo-text-g:first-child { padding: 0 0 0 0; margin: 0 0 0 0; border-top: none; } .photo-text-box50-50 .photo-text-g .imgBox { box-sizing: border-box; padding: 0; } .photo-text-box50-50 .photo-text-g .imgBox img { height: auto; border: 1px solid #CCC; } .photo-text-box50-50 .photo-text-g .imgBox p { margin: 8px 0 0 0; font-size: 12px; } .photo-text-box50-50 .photo-text-g .textBox p { position: relative; top: -8px; } .photo-text-box50-50 .photo-text-g .textBox p:first-child { margin: 0; } @media screen and (max-width: 900px) { .photo-text-box50-50 .photo-text-g { display: grid; grid-template-columns: 1fr; gap: 0; align-items: start; padding: 8px 0 0 0; margin: 24px 0 0 0; border-top: 2px solid #FFFFFF; } .photo-text-box50-50 .photo-text-g .imgBox:last-child { margin: 16px 0 8px 0; } .photo-text-box50-50 .photo-text-g .imgBox img { height: auto; } .photo-text-box50-50 .photo-text-g .imgBox p { margin: 8px 0 0 0; font-size: 12px; } .photo-text-box50-50 .photo-text-g .textBox { } .photo-text-box50-50 .photo-text-g .textBox p { position: relative; top: 0; } .photo-text-box50-50 .photo-text-g .textBox p:first-child { margin: 16px 0 0 0; } } .list-text-box01 { width: 100%; padding: 24px 24px 24px 24px; background: #F0F5F7; border-radius: 4px; margin: 16px 0 0 0; box-sizing: border-box; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .contents-box .list-text-box01 p:nth-child(2){ margin: 0; position: relative; top: -8px; } .list-text-box01 li { min-height: 40px; padding: 8px 10px 8px 24px; margin: 0 0 4px 0; border-radius: 4px; box-sizing: border-box; background: #FFFFFF; display: flex; justify-content: flex-start; align-items: center; text-align: left; color: #333; font-size: 14px; font-weight: 700; line-height: 1.2; position: relative; border-bottom: 1px solid #ccc; } .list-text-box01 li::before{ content: ""; position: absolute; display: block; background: #333; border-radius: 50%; left: 10px; width: 8px; height: 8px; top: 18px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } @media screen and (max-width: 900px) { .list-text-box01 { width: 100%; padding: 24px 24px 24px 24px; background: #F0F5F7; border-radius: 4px; margin: 16px 0 0 0; box-sizing: border-box; display: grid; grid-template-columns: 1fr; gap:0; } .contents-box .list-text-box01 p:nth-child(2){ margin: 16px 0 0 0; position: relative; top: 0; } }