/* CSS Document */ @-ms-viewport { width: device-width; } /*変数宣言*/ :root { --textColor: #5A5A5A; --lightGray: #F3F3F3; --bBlue: #0d2ea0; /*ブラザーブルー*/ } .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: 26px; 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: 14px; margin-left: 15px; line-height: 1.3; } .movie_box h4 { font-size: 14px; 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; max-width: 400px; 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; text-indent: -1.5em; padding-left: 1.5em; } .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%; } .documents.main-bg { background: url(/machinetool/-/media/machinery/product/machine/speedio-navi/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 !important; 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; } .documents .contents-bg .contents-box .documents-menu .documents-link ul li a { padding: 10px 25px 10px 20px; 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, .documents.con-cont .contents-bg .contents-box .documents-list > ul li .documents-list-img.vertical { padding: 0 55px; } /* カタログページ内でもサムネを横にしたい時に */ .documents.con-cont.catalog .contents-bg .contents-box .documents-list > ul li .documents-list-img.beside { padding: 0; } .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; } .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; } .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; } .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: ""; display: block; width: 30px; height: 30px; background: #fff00a; border-radius: 50px; position: absolute; left: 1px; bottom: -1px; } .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; } @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; } .documents .contents-bg .contents-box p { font-size: 16px; } .documents.main-bg { background: url(/machinetool/-/media/machinery/product/machine/speedio-navi/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 !important; } .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; } .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; } .documents .contents-bg .contents-box .documents-menu .documents-link ul li a:after { right: 13px; } .documents .contents-bg .contents-box .documents-menu .category-link ul li { width: calc((100% - 15px) / 2); padding: 10px 15px 5px 8px; font-size: 14px; } .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, .documents.con-cont .contents-bg .contents-box .documents-list > ul li .documents-list-img.vertical { 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; width: calc(100% - 26px); font-size: 13px; } .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; font-weight: normal; } .documents.dtl.main-bg .text .ttl .category-ttl { font-size: 22px; padding-left: 15px; position: relative; top: 0.1em; } .documents.dtl.main-bg .text { width: 100%; } .documents.dtl.main-bg { padding: 20px 0; } .documents.dtl .contents-bg { margin: 25px 0 0; padding: 25px; } .documents.dtl .contents-bg .contents-box { padding: 0; margin: 0; } .documents.dtl .contents-bg .contents-box h2 { font-size: 22px; } .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; } .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; } }