/* CSS Document */ @-ms-viewport { width: device-width; } /*▼▼▼ 20250304 西岡追加(変数宣言)▼▼▼*/ :root { --textColor: #5A5A5A; --lightGray: #F3F3F3; --bBlue: #0d2ea0;/*ブラザーブルー*/ } /*▲▲▲ 20250304 西岡追加(変数宣言)▲▲▲*/ .main-bg { padding-top: 72px; padding-bottom: 58px; background: #fff; } .main-bg .wrap { display: flex; justify-content: space-between; align-items: center; } .main-bg .icon { width: 9.5%; } .main-bg .text { width: 87%; color: #0d2e9b; } .main-bg .text .ttl { font-size: 35px; line-height: 1; font-weight: 700; } .main-bg .text .ttl .mini-text { font-size: 17px; line-height: 1.64; display: block; margin-top: 20px; font-weight: 500; } .con-cont { padding-top: 15px; padding-bottom: 80px; background: #d8d8d8; } @media only screen and (max-width : 900px) { .main-bg { padding-top: 6.04vw; padding-bottom: 4.35vw; } .main-bg .wrap { display: flex; justify-content: space-between; } .main-bg .icon { width: 20.8%; padding-top: 0.1vw; } .main-bg .text { width: 72.4%; } .main-bg .text .ttl { font-size: 5.8vw; line-height: 1; font-weight: 700; } .main-bg .text .ttl .mini-text { font-size: 3.6vw; line-height: 1.64; display: block; margin-top: 3.8vw; font-weight: 500; } .con-cont { padding-top: 9.66vw; padding-bottom: 9.66vw; } } .contents-bg { background: #fff; padding-top: 80px; padding-bottom: 80px; position: relative; margin-top: 40px; } .contents-bg .contents-box { width: 90%; max-width: 806px; margin-left: auto; margin-right: auto; font-size: 15px; } /*PC版のみcontents-box内の文字サイズ基準を15pxに*/ @media print, screen and (min-width: 901px) { .contents-bg .contents-box { font-size: 15px; } } .contents-bg .contents-box h2 { margin-bottom: 25px; padding-bottom: 2px; border-bottom: 1px solid #2282cc; font-size: 26px; color: #2282cc; } .contents-bg .contents-box .img-box { margin-bottom: 20px; position: relative; } .movie_box{ background: #D1E3F3; width: 100%; margin: 50px auto; position: relative; padding: 8px 20px 0; } .movie_box:before, .movie_box:after{ width: calc(100% - 20px); height: 0; display: block; position: absolute; left: 0; content: ""; } .movie_box:before{ border-bottom: solid 20px #D1E3F3; border-right: solid 20px transparent; bottom: 100%; width: 100%; } .movie_box:after{ border-top: solid 20px #D1E3F3; border-left: solid 20px transparent; top: 100%; width: 100%; } .movie_box h3 { position: relative; left: -20px; padding: 0 20px 5px 20px; margin-bottom: 20px; background: #fff; display: inline-block; } .movie_box h3:before{ width: calc(100% - 10px); height: 0; display: block; position: absolute; left: 0; content: ""; border-bottom: solid 10px #ffffff; border-right: solid 10px transparent; bottom: 100%; width: 100%; } .movie_box h3 span:nth-of-type(1){ display:inline-block; font-size:1.5em; color:#2282cc; line-height: 1em; } .movie_box h3 span:nth-of-type(1)::before{ content:"▶"; position:relative; top:-0.23em; left:-0.3em; font-size:0.6em; } .movie_box h3 span:nth-of-type(2){ display: inline-block; color: #2282cc; font-weight:normal; font-size:0.8em; margin-left: 15px; line-height: 1.3; } .movie_box h4 { line-height: 1.4; padding-left: 0.7em; margin-bottom: 10px; border-left: #2282cc solid 5px; } .movie_box h4 span{ font-weight:normal; } .youtube-box { position: relative; width: 100%; margin:0 auto;/*20250319 西岡追加*/ max-width:400px;/*20250319 西岡追加*/ padding-top: 56.25%; } .youtube-box iframe { position: absolute; top: 0; right: 0; width: 100%; height: 100%; } .contents-bg .contents-box p.notes { margin: 0 0 5px; font-size: 12px; line-height: 1.4; text-indent: -1em; padding-left: 1em; } .contents-bg .contents-box p { margin: 15px 0; } .contents-bg .contents-box a { color: #2282cc; } .contents-bg .contents-box h3.ptn2 { margin-bottom: 20px; padding: 0px 16px; border-left: 5px solid #2282cc; font-size: 20px; background: none; color: #0d2e9b; } .contents-bg .contents-box .gr-box h3.ptn2 { margin-bottom: 15px; padding-left: 10px; } .documents-flex { display: flex; justify-content: space-between; margin-top: 40px; } .documents-flex .box { margin-bottom: 10px; width: 48%; } .documents-flex ul li { list-style: disc; list-style-position: inside; line-height: 1.86; } .gr-box { margin: 20px 0; padding: 20px 26px; background: #ebebeb; } address { font-style: normal; } address dl dt { margin: 10px 0 5px; text-decoration: underline; line-height: 1.6; } address dl dd { line-height: 1.3; } .documents-flex { display: flex; justify-content: space-between; margin-top: 40px; gap: 40px;/*西岡追加 20250304*/ } .documents-flex .box { margin-bottom: 10px; width: 48%; } /*▼▼▼ 西岡追加 20250304 ▼▼▼*/ .documents.main-bg{ background: url(../../img/documents/ttl-bg.png) no-repeat left top 50% /cover; } .documents.main-bg .icon{ width: 70px; } .documents.main-bg .text{ color:#fff; } .documents.con-cont{ background:#E7E9EB; padding-top: 30px; padding-bottom: 0; } .documents .contents-bg{ padding-top: 0; padding-bottom: 40px; background: none; } .documents .contents-bg .contents-box { width: 100%; max-width: none; } .documents.catalog .contents-bg .contents-box .documents-flex .box { margin-bottom: 10px; width: 40%; } .documents.catalog .contents-bg .contents-box .documents-flex .box.last { margin-bottom: 10px; width: 60%; } .documents .contents-bg .contents-box .documents-menu { display: block; } .documents .contents-bg .contents-box .documents-menu .documents-link ul{ display:flex; padding:0 0 20px; gap: 10px; } .documents .contents-bg .contents-box .documents-menu .documents-link ul li{ width: calc((100% - 30px) / 4); padding: 10px 25px 10px 20px; border-radius: 50px; overflow:hidden; background: var(--lightGray); text-align: center; } .documents .contents-bg .contents-box .documents-menu .documents-link ul li:has(a){ padding: 0;/*20250319 西岡追加*/ } .documents .contents-bg .contents-box .documents-menu .documents-link ul li a{ padding:10px 25px 10px 20px;/*20250319 西岡追加*/ color:var(--textColor); display:block; position:relative; } .documents .contents-bg .contents-box .documents-menu .documents-link ul li a:after{ content: ""; position:absolute; top: calc(50% - 5px); right: 20px; display: inline-block; width: 8px; height: 8px; border-top: 1px solid var(--bBlue); border-right: 1px solid var(--bBlue); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .documents .contents-bg .contents-box .documents-menu .documents-link ul li.active{ padding: 10px 20px 10px; background: var(--bBlue); color:#fff; } .documents .contents-bg .contents-box .documents-menu .category-link ul{ padding:10px 0 40px; display:flex; flex-wrap:wrap; gap:15px; } .documents .contents-bg .contents-box .documents-menu .category-link ul li{ width: calc((100% - 45px) / 4);); padding:10px 15px 5px; border-bottom:1px solid #969696; } .documents .contents-bg .contents-box h2{ padding: 2px 0 2px 20px; color: var(--bBlue); border-bottom: none; border-left: 10px solid var(--bBlue); font-size: 22px; } .documents .contents-bg .contents-box .documents-menu .category-link ul li a{ display:block; position:relative; color:var(--textColor); } .documents .contents-bg .contents-box .documents-menu .category-link ul li a:after{ content: ""; position:absolute; top: calc(50% - 5px); right: -10px; display: inline-block; width: 8px; height: 8px; border-top: 1px solid var(--bBlue); border-right: 1px solid var(--bBlue); -webkit-transform: rotate(135deg); transform: rotate(135deg); } .documents .contents-bg .contents-box .documents-list{ margin: 0 0 50px; } .documents .contents-bg .contents-box .documents-list > ul{ display:flex; flex-wrap:wrap; gap: 20px; } .documents .contents-bg .contents-box .documents-list > ul li{ width: calc((100% - 40px) / 3); position: relative; background: var(--lightGray); border-radius: 8px; } .documents .contents-bg .contents-box .documents-list > ul li > a{ display:block; padding: 30px 20px calc(1em + 60px); } .documents .contents-bg .contents-box .documents-list > ul li span.model-initials { display:block; position: absolute; top: 5px; left: 20px; font-size: 32px; font-weight: bold; color: var(--textColor); opacity: .6; } /* カタログ系はイメージ周りにpadding */ .documents.con-cont.catalog .contents-bg .contents-box .documents-list > ul li .documents-list-img{ padding: 0 55px; } .documents .contents-bg .contents-box .documents-list > ul li .documents-list-title { margin: 20px 0 0; line-height: 1.4; color: var(--bBlue); font-weight: 700; } .documents .contents-bg .contents-box .documents-list > ul li .documents-list-model{ margin: 5px 0 0; font-size: 0.9em; color: #000; } .documents .contents-bg .contents-box .documents-list > ul li .point-list { margin: 10px 0 0; } .documents .contents-bg .contents-box .documents-list > ul li .point-list li{ display: inline-block; width: auto; margin-right: 5px; margin-bottom: 6px; padding: 2px 6px; background: #fff; color: var(--textColor); font-size: 0.9em; border-radius: 0; } .documents .contents-bg .contents-box .documents-list > ul li .btn-dl{ display:block; position: absolute; bottom: 20px; width: calc(100% - 40px); margin:20px 0 0; padding: 5px 15px 5px 10px; background: #fff; border-radius: 8px; border: solid 1px var(--bBlue); color: var(--bBlue); text-align:center; } .documents .contents-bg .contents-box .documents-list > ul li .btn-dl:after{ content: ""; position:absolute; top: calc(50% - 5px); right: 15px; display: inline-block; width: 8px; height: 8px; border-top: 1px solid var(--bBlue); border-right: 1px solid var(--bBlue); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .documents .contents-bg .contents-box .documents-list > ul li > a:hover .btn-dl{ opacity: 1; color:#fff; background:var(--bBlue); } .documents .contents-bg .contents-box .documents-list > ul li > a:hover .btn-dl::after{ border-top-color: #fff; border-right-color: #fff; } .documents .contents-bg .contents-box .btn-end{ display:inline-block; position: relative; bottom: 20px; margin-top:30px; padding: 5px 50px 5px 20px; background: #fff; border-radius: 8px; border: solid 1px var(--textColor); color: var(--textColor); text-align:center; } .documents .contents-bg .contents-box .btn-end:after{ content: ""; position:absolute; top: calc(50% - 5px); right: 15px; display: inline-block; width: 8px; height: 8px; border-top: 1px solid var(--textColor); border-right: 1px solid var(--textColor); -webkit-transform: rotate(45deg); transform: rotate(45deg); } /*資料詳細ページ*/ .documents.dtl.main-bg{ padding:30px 0; } .documents.dtl.main-bg .wrap { position:relative; } .documents.dtl.main-bg .wrap:before{ content:""; position:absolute; top:0; left:0; width:6px; height:100%; background:#fff; border-radius:2px; } .documents.dtl.main-bg .text .ttl{ padding: 21px 0 25px 50px; font-size:22px; } .documents.dtl.main-bg .text .ttl .category-ttl{ font-size: 30px; padding-left: 50px; } .documents.dtl .contents-bg { background: #fff; padding-top: 70px; padding-bottom: 80px; position: relative; margin-top: 40px; /* margin-bottom: 80px; 西岡コメント*/ } .documents.dtl .contents-bg .contents-box{ padding: 0 70px; margin-left: auto; margin-right: auto; } .documents.dtl .contents-bg .contents-box h2{ padding: 0; font-size: 28px; border: none; line-height: 1.4; } .documents.dtl .contents-bg .contents-box h2 .ttl-model{ display:block; margin-top: 10px; font-size:18px; font-weight:normal; color:var(--textColor); } .documents.dtl .contents-bg .contents-box .img-box { padding: 0 10px 0; text-align: center; } .documents.dtl.catalog .contents-bg .contents-box .img-box img{ } .documents.dtl.catalog .contents-bg .contents-box .img-box { padding: 0 60px 10px; } .documents.dtl .contents-bg .contents-box .point-list { margin: 10px 0 0; } .documents.dtl .contents-bg .contents-box .point-list li{ display: inline-block; width: auto; margin-right: 5px; margin-bottom: 7px; padding: 5px 10px; background: var(--lightGray); color: var(--textColor); font-size: 14px; } .documents.dtl .contents-bg .contents-box .documents-txt{ margin-top: 30px; } .documents.dtl .contents-bg .contents-box .notes-list{ margin-top: 40px; /* padding-left:1.2em; */ font-size:12px; } .documents.dtl .contents-bg .contents-box .notes-list li{ list-style:none; position:relative; line-height: 1.4; margin-bottom: 5px; color: var(--textColor); text-indent: -1.5em; padding-left: 1.5em; } .documents.dtl .contents-bg .contents-box .notes-list li.num{ text-indent: -2em; padding-left: 2em; } .documents.dtl .contents-bg .contents-box .notes-list li span { display: inline; margin-right: 0.5em; } .documents.dtl .contents-bg .contents-box .notes-list li:before{ /* content:"※"; */ position:absolute; top:0; left:-1.2em; } /*▲▲▲ 西岡追加 20250304 ▲▲▲*/ /*▼▼▼ 西岡追加 20250319 ▼▼▼*/ .documents .contents-bg .contents-box .documents-list > ul li > a{ padding: 16px 13px calc(1em + 60px); } .documents .contents-bg .contents-box .documents-list > ul li .btn-dl:after { right: 10px;/*20250319 西岡追加*/ } .documents .contents-bg .contents-box .footer-txt { background: var(--lightGray); padding: 0.5em 2em; border-radius: 8px; display: inline-block; } .documents .contents-bg .contents-box .footer-txt p { color: var(--textColor); font-size: 14px; } .documents .contents-bg .contents-box .eol-list { margin-top: 40px; } .documents .contents-bg .contents-box .eol-list ul li{ margin-bottom: 10px; padding-left: 16px; text-indent: -16px; line-height: 1.5; } .documents .contents-bg .contents-box .eol-list ul li a{ color: var(--textColor); } .documents .contents-bg .contents-box .eol-list ul li a:before{ content: ""; display: inline-block; vertical-align: middle; text-decoration: none; width: 8px; height: 8px; border-top: 2px solid var(--textColor); border-right: 2px solid var(--textColor); -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: 0; margin-right: 8px; } /*▲▲▲ 西岡追加 20250319 ▲▲▲*/ /*▼▼▼ 西岡追加 20250425 ▼▼▼*/ .documents-return { background: #E7E9EB; padding: 50px 0; } .documents-return p { /* text-align: right; */ } .documents-return p a { display: inline-block; padding-left: 40px; font-size:16px; /* color: var(--textColor); */ position:relative; } .documents-return p a:before{ content: "●"; color: #fff00a; position:absolute; left: 0; bottom: -2px; font-size: 31px; line-height: 1; } .documents-return p a:after{ content: "\f053"; font-family: FontAwesome; font-size: 13px; color: #000; position:absolute; left: 10px; top: 3px; } .footer-inquiry{ padding: 60px 25px 60px; width:100%; text-align: center; background: var(--lightGray); } .footer-inquiry p{ font-size:18px; } .footer-inquiry .btn-inquiry{ margin:20px 0 0; padding: 10px 20px; width: 50%; min-width: 560px; max-width: 700px; display:inline-block; background:var(--bBlue); color:#fff; font-size:18px; border-radius:50px; } /*▲▲▲ 西岡追加 20250425 ▲▲▲*/ @media only screen and (max-width: 900px) { .contents-bg{ padding-top: 7.25vw; padding-bottom: 7.25vw; position: relative; margin-top:4.83vw; } .contents-bg .contents-box{ font-size: 3.6vw; width: 90%; max-width: 806px; margin-left: auto; margin-right: auto; } .contents-bg .contents-box h2{ margin-bottom: 5.3vw; padding-bottom: 3.1vw; border-bottom: 1px solid #2282cc; font-size:5.07vw; } .documents-flex { display: block; margin-top: 7.25vw; } .documents-flex .box { margin-bottom: 4.83vw; width: 100%; } .documents-flex .box.last { margin-bottom: 0; } .gr-box { margin: 4vw 0; padding: 4vw 4.3vw; background: #ebebeb; } .contents-bg .contents-box p.notes { font-size: 0.9em; } .contents-bg .contents-box h3.ptn2 { padding: 0 2vw; font-size: 4.1vw; } .contents-bg .contents-box .gr-box h3.ptn2 { border-left: 0.3em solid #2282cc; } .movie_box{ margin: 10vw auto; padding-left:4vw; padding-right:4vw; } .movie_box:before { border-bottom: solid 4vw #D1E3F3; border-right: solid 4vw transparent; } .movie_box:after { border-top: solid 4vw #D1E3F3; border-left: solid 4vw transparent; } .movie_box h3 { font-size: 4.1vw; line-height: 1.2; padding: 0 3vw 2vw; left: -4vw; } .movie_box h3 span:nth-of-type(1) { font-size: 5.1vw; } .movie_box h3 span:nth-of-type(2) { font-size: 3.1vw; } /*▼▼▼ 西岡追加 20250304 ▼▼▼*/ .documents .contents-bg .contents-box p { font-size: 16px; } .documents.main-bg{ background: url(../../img/documents/ttl-bg.png) no-repeat right 100% top 50% / cover; } .documents.main-bg .icon { width: 15%; position: relative; right: -4%; } .documents.main-bg .text .ttl{ font-size: 24px; } .documents.main-bg .text .ttl .mini-text{ font-size:16px; } .documents.con-cont{ padding-top: 5px; } .pankuzu { } .documents .contents-bg{ padding-top: 0; padding-bottom: 30px; } .documents .contents-bg .contents-box .documents-menu .documents-link ul { flex-wrap: wrap; } .documents .contents-bg .contents-box .documents-menu .documents-link ul li { width: calc((100% - 10px) / 2); padding: 5px 20px 5px 10px; font-size:14px;/*20250319 西岡変更(←16px)*/ } .documents .contents-bg .contents-box .documents-menu .documents-link ul li.active{ padding: 5px 10px 5px; } .documents .contents-bg .contents-box .documents-menu .documents-link ul li a{ padding: 5px 15px 5px 10px;/*20250319 西岡追加*/ } .documents .contents-bg .contents-box .documents-menu .documents-link ul li a:after{ right:13px;/*20250319 西岡追加*/ } .documents .contents-bg .contents-box .documents-menu .category-link ul li { width: calc((100% - 15px) / 2); padding: 10px 15px 5px 8px;/*20250319 西岡追加*/ font-size: 14px;/*20250319 西岡追加*/ } .documents .contents-bg .contents-box h2{ font-size:20px; } .documents .contents-bg .contents-box .documents-list > ul li { width: calc((100% - 20px) / 2); } .documents .contents-bg .contents-box .documents-list > ul li span.model-initials { font-size: 22px; left: 8px; } .documents.con-cont.catalog .contents-bg .contents-box .documents-list > ul li .documents-list-img{ padding: 0 15%; } .documents .contents-bg .contents-box .documents-list > ul li .documents-list-title{ font-size:16px; } .documents .contents-bg .contents-box .documents-list > ul li .documents-list-model { word-wrap: break-word; font-size:16px; } .documents .contents-bg .contents-box .documents-list > ul li .point-list li{ font-size: 12px; } .documents .contents-bg .contents-box .documents-list > ul li .btn-dl{ padding: 5px 12px 5px 8px;/*20250319 西岡追加*/ width: calc(100% - 26px);/*20250319 西岡追加*/ font-size: 13px; /*20250319 西岡変更(←16px)*/ } .documents .contents-bg .contents-box .btn-end{ font-size:16px; margin-top: 20px; } /*資料詳細ページ*/ .documents.dtl.main-bg .text .ttl { padding: 5px 10px 10px 30px; font-size: 14px; /*20250319 西岡変更(←16px)*/ font-weight: normal; } .documents.dtl.main-bg .text .ttl .category-ttl { font-size: 22px;/*20250319 西岡変更(←24px)*/ padding-left: 15px;/*20250319 西岡変更(←15px)*/ position:relative; top:0.1em;/*20250319 西岡追加*/ } .documents.dtl.main-bg .text { width: 100%; } .documents.dtl.main-bg { padding: 20px 0; } .documents.dtl .contents-bg { margin: 25px 0 0;/*20250425 西岡変更(←25px 0)*/ padding: 25px; } .documents.dtl .contents-bg .contents-box { padding: 0; margin: 0; } .documents.dtl .contents-bg .contents-box h2{ font-size:22px;/*20250319 西岡追加*/ } .documents .contents-bg .contents-box .documents-flex { margin-top: 30px; } .documents .contents-bg .contents-box .documents-flex .box, .documents.catalog .contents-bg .contents-box .documents-flex .box{ margin-bottom: 10px; width: 100%; } .documents .contents-bg .contents-box .documents-flex .box.last, .documents.catalog .contents-bg .contents-box .documents-flex .box.last{ margin-bottom: 10px; width: 100%; } .documents.dtl .contents-bg .contents-box .img-box { padding-left: 0; padding-right: 0; } .documents.dtl .contents-bg .contents-box .img-box img{ width: 100%; max-width: 400px; } .documents.dtl.catalog .contents-bg .contents-box .img-box { padding: 0 20%; } .documents.dtl.catalog .contents-bg .contents-box .img-box img{ width: 100%; max-width: 300px; } .documents .contents-bg .movie_box h3 span:nth-of-type(1) { font-size: 20px; } .documents .contents-bg .movie_box h3 span:nth-of-type(2) { font-size: 14px; } .documents .contents-bg .movie_box h4 { font-size: 16px; } .documents .contents-bg .gr-box h3.ptn2 { font-size: 18px; } .documents .contents-bg .documents-flex .gr-box ul li { font-size: 15px; } .documents.dtl .contents-bg .contents-box .notes-list { margin-top: 20px; margin-bottom: 30px; } /*▲▲▲ 西岡追加 20250304 ▲▲▲*/ /*▼▼▼ 西岡追加 20250319 ▼▼▼*/ .documents-return{ padding: 35px 0; } .footer-inquiry p{ font-size: 16px; } .footer-inquiry .btn-inquiry{ margin-top: 15px; width: 100%; min-width: 250px; max-width: 500px; } .footer-inquiry{ padding: 40px 25px 40px; } /*▲▲▲ 西岡追加 20250319 ▲▲▲*/ }