img{ max-width: 100%; } .anchorllist ul li{ width: 20%; margin-right: 1%; } .anchorllist ul li a{ position: relative; font-size: 14px; padding:10px 0; display: block; color:#fff; background: #1B2D5A; text-align: center; } .anchorllist ul li a::after{ content: ""; background: url("../img/link.png") no-repeat left top; background-size:100%; position: absolute; top: 50%; right:5%; width: 13px; height: 8px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } .head-ttl{ text-align: center; width: 100%; max-width: 550px; margin-left: auto; margin-right: auto; } .head-ttl .big span { font-size: 47px; color: #1B2D5A; line-height: 1.7; font-weight: bold; background: linear-gradient(transparent 80%, #fff100 0%); } .head-ttl .sm span { font-size: 35px; color: #1B2D5A; line-height: 1.7; font-weight: bold; background: linear-gradient(transparent 80%, #fff100 0%); } .m-copy{ font-size: 16px; font-weight: 700; line-height: 1.75; color: #7796C2; } .notes { font-size: 10px; line-height: 14px!important; display: block; } .notes2 { font-size: 12px; line-height: 14px!important; display: block; } .notes.ex { font-size: 12px; line-height: 14px!important; display: block; text-align: center; } .about-box{ padding:20px 20px; background: #F8F4D4; } .about-box .box{ } .about-box .box h3{ background: #88A7CD; color: #fff; font-size: 21px; text-align: center; padding:10px 0; font-weight: 700; } .about-box .box .text{ padding:25px 25px; background: #fff; border: 2px solid #88A7CD; line-height: 1.7; } .about-box .box .text h4{ font-size: 20px; font-weight: 700; } .about-box .box .text li{ text-indent: -1em; padding-left: 1em; } .ac-head2 { font-size: 28px; line-height: 1; background: #1b2d5a; color: #fff; padding: 12px 0; margin-bottom: 20px; font-weight: bold; text-align: center; } /*貸し出し製品マップ*/ .tab_nav{ display: flex; } .tab_nav li{ width: 33%; margin-right: 0.5%; font-size: 16px; font-weight: 700; text-align: center; position: relative; border-bottom: 10px solid transparent; cursor: pointer; color: #fff; } .tab_nav li::after{ content: ""; background: url("../img/tab.png") no-repeat left top; background-size:100%; position: absolute; top: 56%; right:6%; width: 13px; height: 8px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } .tab_nav li:last-child{ margin-right: 0; } .tab_nav li:nth-child(1){ padding-top: 25px; padding-bottom: 5px; background: #80CDE8; } .tab_nav li:nth-child(2){ padding-top: 25px; padding-bottom: 5px; background: #80CDE8; } .tab_nav li:nth-child(3){ padding-top: 15px; padding-bottom: 5px; background: #60C0BD; } .tab_nav li:nth-child(1).active{ border-bottom: 10px solid #00709D; } .tab_nav li:nth-child(2).active{ border-bottom: 10px solid #00709D; } .tab_nav li:nth-child(3).active{ border-bottom: 10px solid #396E76; } .tab-box .chCont{ width: 100%; overflow-x: auto; display: none; } .tab-box .chCont .tab-area{ width: 850px; } .tab-box .chCont .tab-area .tab-table{ display: flex; } .tab-box .chCont .tab-area .tab-table .left{ width: 4%; margin-right: 1%; padding-left: 1%; padding-right: 1%; text-align: center; font-size: 16px; color:#fff; white-space: nowrap; box-sizing: border-box; -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; -webkit-text-orientation: upright; text-orientation: upright; line-height: 1; display: flex; position: relative; } .tab-box .chCont .tab-area .tab-table.ptn5 .left{ /*letter-spacing: -0.2em;*/ } .tab-box .chCont .tab-area .tab-table .left .left-tex{ display: block; position: absolute; top:50%; text-align: center; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } .tab-box .chCont .tab-area .tab-table .left .left-tex .nobasi{ transform: rotate(90deg); display: inline-block; } @media all and (-ms-high-contrast:none) { .tab-box .chCont .tab-area .tab-table .left .left-tex{ top: 25%; } .tab-box .chCont .tab-area .tab-table .left .left-tex .nobasi{ transform: rotate(0deg); display: inline-block; } } .tab-box .chCont .tab-area .tab-table.ptn1 .left{ background: #47A0D3; } .tab-box .chCont .tab-area .tab-table.ptn2 .left{ background: #6B7FBE; } .tab-box .chCont .tab-area .tab-table.ptn3 .left{ background: #00A3AB; } .tab-box .chCont .tab-area .tab-table.ptn4 .left{ background: #00AA7F; } .tab-box .chCont .tab-area .tab-table.ptn5 .left{ background: #629A5F; } .tab-box .chCont .tab-area .tab-table .right{ width: 95%; /*display: flex; align-items: center;*/ } .tab-box .chCont .tab-area .tab-table .right .item-table{ display: flex; } .tab-box .chCont .tab-area .tab-table .right .item-table .table-name{ width: 7%; margin-right: 1%; padding-left: 1%; padding-right: 1%; text-align: center; font-size: 16px; color:#fff; box-sizing: border-box; display: flex; align-items: center; } .tab-box .chCont .tab-area .tab-table .right .item-table .table-name .name-wrap{ display: block; width: 100%; text-align: center; } .tab-box .chCont .tab-area .tab-table.ptn1 .right .item-table .table-name{ background: #47A0D3; } .tab-box .chCont .tab-area .tab-table.ptn2 .right .item-table .table-name{ background: #6B7FBE; } .tab-box .chCont .tab-area .tab-table.ptn3 .right .item-table .table-name{ background: #00A3AB; } .tab-box .chCont .tab-area .tab-table.ptn4 .right .item-table .table-name{ background: #00AA7F; } .tab-box .chCont .tab-area .tab-table.ptn5 .right .item-table .table-name{ background: #629A5F; } .tab-box .chCont .tab-area .tab-table .right .item-table .table-name .name-1{ -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; -webkit-text-orientation: upright; text-orientation: upright; font-size: 10px; } .tab-box .chCont .tab-area .tab-table .right .item-table .table-name .name-1.pdl1{ padding-left: 13.5px; max-height: 8em; } .tab-box .chCont .tab-area .tab-table .right .item-table .table-name .name-1.pdl2{ padding-left: 8px; max-height: 5em; text-align: left; } .tab-box .chCont .tab-area .tab-table .right .item-table .table-name .name-1.pdl3{ padding-left: 1.6px; max-height: 8em; text-align: left; } .tab-box .chCont .tab-area .tab-table .right .item-table .table-name .name-1.pdl4{ padding-left: 13.5px; max-height: 14em; } .tab-box .chCont .tab-area .tab-table .right .item-table .table-name .name-1.pdl5{ padding-left: 13.5px; max-height: 6em; } .tab-box .chCont .tab-area .tab-table .right .item-table .table-name .name-1.pdl6{ padding-left: 13.5px; max-height: 4em; } .tab-box .chCont .tab-area .tab-table .right .item-table .table-name .name-1.pdl7{ padding-left: 13.5px; max-height: 5em; } .tab-box .chCont .tab-area .tab-table .right .item-table .table-name .name-1.pdl8{ padding-left: 8px; max-height: 7em; text-align: left; } .tab-box .chCont .tab-area .tab-table .right .item-table .table-name .name-1.pdl9{ padding-left: 1.6px; max-height: 6em; text-align: left; } .tab-box .chCont .tab-area .tab-table .right .item-table .table-name .nobasi{ transform: rotate(90deg); display: inline-block; } @media all and (-ms-high-contrast:none) { .tab-box .chCont .tab-area .tab-table .right .item-table .table-name .nobasi{ transform: rotate(0deg); display: inline-block; } } .tab-box .chCont .tab-area .tab-table .right .item-table .table-name .name-2{ font-size: 11px; line-height: 1.1; margin-top: 16px; } .tab-box .chCont .tab-area .tab-table .right .item-table .table-name .name-2 span{ font-size: 22px; } /*.tab-box .chCont .tab-area .tab-table .right .item-table .table-name .name-2 span.ex{ padding-left: 3.5px; }*/ .tab-box .chCont .tab-area .tab-table .item-list{ width: 92%; } .tab-box .chCont .tab-area .tab-table .item-list ul{ font-size: 0; } .tab-box .chCont .tab-area .tab-table.ptn1 .item-list ul li{ border-top: 2px solid #47A0D3; } .tab-box .chCont .tab-area .tab-table.ptn2 .item-list ul li{ border-top: 2px solid #6B7FBE; } .tab-box .chCont .tab-area .tab-table.ptn3 .item-list ul li{ border-top: 2px solid #00A3AB; } .tab-box .chCont .tab-area .tab-table.ptn4 .item-list ul li{ border-top: 2px solid #00AA7F; } .tab-box .chCont .tab-area .tab-table.ptn5 .item-list ul li{ border-top: 2px solid #629A5F; } .tab-box .chCont .tab-area .tab-table .item-list ul li{ margin-top: 8px; margin-right: 0.5%; width: 33%; display: inline-block; vertical-align: top; } .tab-box .chCont .tab-area .tab-table .item-list ul li:nth-child(3n){ margin-right: 0; } .tab-box .chCont .tab-area .tab-table .item-list ul li:nth-child(-n+3){ margin-top: 0; } .tab-box .chCont .tab-area .tab-table .item-list ul li .list-head{ display: flex; position: relative; z-index: 2; } .tab-box .chCont .tab-area .tab-table .item-list ul li .list-head .name{ padding-top: 20px; width: 58%; overflow: visible; } .tab-box .chCont .tab-area .tab-table .item-list ul li .list-head .name-tex{ font-size: 16px; line-height: 1.2; padding-left: 8px; } .tab-box .chCont .tab-area .tab-table .item-list ul li .list-head .img{ width: 41%; margin-right: 1%; } .tab-box .chCont .tab-area .tab-table .item-list ul li .list-head .name.ptn2{ padding-top: 0; margin-top: -1px; } .tab-box .chCont .tab-area .tab-table .item-list ul li .list-head .name .obi-1{ background: url("../img/obi_01_1.png") no-repeat left top; background-size:126px; padding:5px 18px 5px 6px; color:#fff; line-height: 1; font-size: 12px; margin-bottom: 10px; } .tab-box .chCont .tab-area .tab-table .item-list ul li .list-head .name .obi-2{ background: url("../img/obi_01_2.png") no-repeat left top; background-size:96px; padding:5px 18px 5px 6px; color:#fff; line-height: 1; font-size: 12px; margin-bottom: 10px; } .tab-box .chCont .tab-area .tab-table .item-list ul li .list-head .name .obi-3{ background: url("../img/obi_02.png") no-repeat left top; background-size:106px; padding:5px 18px 5px 6px; color:#fff; line-height: 1; font-size: 12px; margin-bottom: 10px; } .tab-box .chCont .tab-area .tab-table .item-list ul li .list-head .name .obi-4{ background: url("../img/obi_03.png") no-repeat left top; background-size:164px; display: block; width: 100%; white-space: nowrap; padding:5px 18px 5px 6px; color:#fff; line-height: 1; font-size: 12px; margin-bottom: 10px; } .tab-box .chCont .tab-area .tab-table .item-list ul li .list-bottom{ margin-top: -15px; position: relative; z-index: 1; } .tab-box .chCont .tab-area .tab-table .item-list ul li .list-bottom .bottom-ttl{ padding:5px 8px; line-height: 1; color:#fff; font-size: 11px; } .tab-box .chCont .tab-area .tab-table .item-list ul li .list-bottom .bottom-info{ padding:8px 8px; height: calc(1.27em * 3); position: relative; font-size: 10px; line-height: 1.27em; } .tab-box .chCont .tab-area .tab-table .item-list ul li .list-bottom .bottom-info p{ position: absolute; top: 50%; left: 8px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } .tab-box .chCont .tab-area .tab-table .item-list ul li .list-bottom .bottom-info .red{ color:#970B31; } .tab-box .chCont .tab-area .tab-table.ptn1 .item-list ul li .list-bottom .bottom-ttl{ background: #47A0D3; } .tab-box .chCont .tab-area .tab-table.ptn1 .item-list ul li .list-bottom .bottom-info{ background: #E4F3FE; } .tab-box .chCont .tab-area .tab-table.ptn2 .item-list ul li .list-bottom .bottom-ttl{ background: #6B7FBE; } .tab-box .chCont .tab-area .tab-table.ptn2 .item-list ul li .list-bottom .bottom-info{ background: #E9EAF3; } .tab-box .chCont .tab-area .tab-table.ptn3 .item-list ul li .list-bottom .bottom-ttl{ background: #00A3AB; } .tab-box .chCont .tab-area .tab-table.ptn3 .item-list ul li .list-bottom .bottom-info{ background: #E6F3F9; } .tab-box .chCont .tab-area .tab-table.ptn4 .item-list ul li .list-bottom .bottom-ttl{ background: #00AA7F; } .tab-box .chCont .tab-area .tab-table.ptn4 .item-list ul li .list-bottom .bottom-info{ background: #E9F3F0; } .tab-box .chCont .tab-area .tab-table.ptn5 .item-list ul li .list-bottom .bottom-ttl{ background: #629A5F; } .tab-box .chCont .tab-area .tab-table.ptn5 .item-list ul li .list-bottom .bottom-info{ background: #E9F3E5; } /*貸し出しサービスの流れ*/ .flow-box{ padding-bottom: 38px; border-bottom: #B7C4CD solid 1px; } .flow-box.last{ padding-bottom: 0; border-bottom: none; } .flow-box .flow-img{ width: 32%; margin-right: 2%; } .flow-box .flow-tex{ width: 64%; } .flow-box .flow-tex h3{ color:#1B2D5A; font-size: 27px; margin-bottom: 15px; font-weight: 700; } .flow-box .flow-tex a{ color: #7796C2; text-decoration: underline; } .flow-box .flow-tex span{ color:#7796C2; font-weight: 700; } .flow-box .flow-tex p{ line-height: 1.71; } .flow-yajirushi{ margin-bottom: 30px; width: 50%; max-width: 40px; margin-left: auto; margin-right: auto; } /*よくあるご質問*/ .faq-panel dl{ margin-bottom: 20px; } .faq-panel dl:last-child{ margin-bottom: 0px; } .faq-panel dl dt{ position: relative; padding:16px 20px; background:#CBD8EE ; color: #1B2D5A; font-weight: 700; line-height: 1; font-size: 18px; border-radius: 10px; cursor: pointer; } .faq-panel dl dt::after{ content: ""; background: url("../img/panel.png") no-repeat left top; background-size:100%; position: absolute; top: 56%; right:3%; width: 12px; height: 12px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } .faq-panel dl dt.open::after{ transform: rotate( -180deg); top: 28%; } .faq-panel dl dd{ line-height: 1.7; padding:20px 5px 10px 50px; } .faq-panel dl dd li{ padding-left: 1em; text-indent: -1em; } /*ご利用条件、規約*/ .kiyaku-box{ padding-bottom: 30px; margin-bottom: 20px; border-bottom: #B7C4CD solid 1px; line-height: 1.7; } .kiyaku-box.last{ padding-bottom: 0; border-bottom: 0; } .kiyaku-box h3{ color:#1B2D5A; font-size: 20px; margin-bottom: 15px; font-weight: 700; } .kiyaku-box a{ color: #7796C2; text-decoration: underline; } .kiyaku-box span{ color:#7796C2; font-weight: 700; } .privacy-box{ line-height: 1.85; height: 190px; overflow-y: auto; margin-bottom: 60px; padding-right: 20px; } .privacy-box .title { font-weight: 700; margin-bottom: 15px; } .privacy-box p { margin-bottom: 1em; } /*デモ機無料貸出しサービスへお申込み*/ #link5 .ac-head2{ margin-bottom: 0; } .con-box{ background: #EEEFF0; padding:40px 40px; } .con-wrap .con-div{ width: 48%; margin-right: 4%; background: #fff; } .con-wrap .con-div.last{ margin-right: 0; } .con-wrap .con-div h3{ background: #88A7CD; color:#fff; text-align: center; line-height: 1; font-size: 20px; font-weight: 700; padding:20px 20px; } .con-wrap .item-wrap{ padding:10px 30px 30px; } .con-wrap .con-div .link-box-1 a{ font-size: 13px; padding:10px 10px; display: block; width: 100%; height: 100%; box-sizing: border-box; } .con-wrap .con-div .link-box-2{ margin-top: 10px; } .con-wrap .con-div .link-box-2 a{ font-size: 18px; padding:10px 10px; display: block; width: 100%; height: 100%; background: #EF7A10; color:#fff; box-sizing: border-box; font-weight: 700; } .con-wrap .con-div .icon-1{ width: 16px; margin-right: 5px; display: inline-block; vertical-align: middle; line-height: 21px; } .con-wrap .con-div .icon-2{ width: 20px; margin-left: 10px; display: inline-block; vertical-align: middle; line-height: 21px; } .con-wrap .con-div .icon-3{ width: 16px; margin-right: 5px; display: inline-block; vertical-align: middle; line-height: 21px; } @media screen and (min-width: 641px) { .main { width: 883px; margin-right: 2px; } .wrap2 { width: 860px; } .anchorllist ul{ display: flex; } .anchorllist ul li:last-child{ margin-right: 0; } .m-copy{ text-align: center; } .flow-box{ display: flex; } .con-wrap{ display: flex; } } @media screen and (max-width: 640px) { .wrapper { padding-left: 20px; padding-right: 20px; } .anchorllist ul li{ width: 100%; margin-right: 0%; margin-bottom: 0.3vw; } .anchorllist ul li a{ position: relative; font-size: 14px; padding:3vw 0; } .anchorllist ul li a::after{ content: ""; background: url("../img/link.png") no-repeat left top; background-size:100%; position: absolute; top: 54%; right:3%; width: 13px; height: 8px; } .m-copy{ font-size: 18px; line-height: 1.5; } .about-box{ padding:15px 15px; } .about-box .box{ } .about-box .box h3{ font-size: 4.7vw; padding:3vw 0; } .about-box .box .text{ padding:3vw 3vw; } .about-box .box .text h4{ font-size: 14px; line-height: 1.5; font-weight: 700; } .ac-head2 { font-size: 16px; line-height: 1; padding: 3% 0; margin-bottom: 4%; } /*貸し出し製品マップ*/ .tab_nav{ display: flex; } .tab_nav li{ width: 33%; margin-right: 0.5%; font-size: 3.8vw; font-weight: 700; position: relative; border-bottom: 10px solid transparent; cursor: pointer; color: #fff; text-align: left; padding-left: 2vw; } .tab_nav li::after{ content: ""; background: url("../img/tab.png") no-repeat left top; background-size:100%; position: absolute; top: 48%; right:3%; width: 13px; height: 8px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } .tab_nav li:nth-child(1){ padding-top: 4vw; padding-bottom: 1vw; } .tab_nav li:nth-child(2){ padding-top: 4vw; padding-bottom: 1vw; } .tab_nav li:nth-child(3){ padding-top: 2vw; padding-bottom: 1vw; } .tab-box .chCont{ width: 100%; } .tab-table .mt1{ margin-top: 10px!important; } .tab-table .mt2{ margin-top: 10px!important; } .flow-box{ padding-bottom: 6vw; } .flow-box .flow-img{ width: 100%; margin-right:0%; margin-bottom: 7vw; } .flow-box .flow-tex{ width: 100%; } .flow-box .flow-tex h3{ font-size: 20px; margin-bottom: 3vw; } .flow-box .flow-tex p{ line-height: 1.71; } .flow-yajirushi{ margin-bottom: 7vw; width: 50%; max-width: 40px; margin-left: auto; margin-right: auto; } .mac .tab-box .chCont .tab-area .tab-table .left .left-tex .nobasi{ display: inline; } .mac .tab-box .chCont .tab-area .tab-table .right .item-table .table-name .nobasi{ display: inline; } /*よくあるご質問*/ .faq-panel dl{ margin-bottom: 20px; } .faq-panel dl:last-child{ margin-bottom: 0px; } .faq-panel dl dt{ padding:3vw 9vw 3vw 4vw; font-size: 18px; border-radius: 10px; cursor: pointer; line-height: 1.5; /*padding-left: 2em; text-indent: -2em;*/ } .faq-panel dl dt::after{ position: absolute; top: 56%; right:3%; } .faq-panel dl dt.open::after{ transform: rotate( -180deg); top: 28%; } .faq-panel dl dd{ line-height: 1.7; padding:3vw 4vw 1vw; } .faq-panel dl dd li{ padding-left: 1em; text-indent: -1em; } .kiyaku-box{ padding-bottom: 6vw; margin-bottom: 6vw; } .kiyaku-box{ width: 100%; } .kiyaku-box h3{ font-size: 17px; margin-bottom: 3vw; } .kiyaku-box p{ line-height: 1.71; } /*デモ機無料貸出しサービスへお申込み*/ .con-box{ padding:20px 20px; } .con-wrap .con-div{ width: 100%; margin-right: 0; } .con-wrap .con-div.last{ margin-right: 0; } .con-wrap .con-div h3{ font-size: 4.4vw; font-weight: 700; padding:5vw 1vw; } .con-wrap .item-wrap{ padding:4vw 6vw 6vw; } .con-wrap .con-div .link-box-1 a{ font-size: 3.3vw; padding:3vw 3vw; } .con-wrap .con-div .link-box-2{ margin-top: 10px; } .con-wrap .con-div .link-box-2 a{ font-size: 3.9vw; padding:3vw 3vw; } .con-wrap .con-div .icon-1{ width: 8%; margin-left: 2%; display: inline-block; vertical-align: middle; line-height: 21px; } .con-wrap .con-div .icon-2{ width: 10%; margin-left: 2%; display: inline-block; vertical-align: middle; line-height: 21px; } .con-wrap .con-div .icon-3{ width: 8%; margin-left: 2%; display: inline-block; vertical-align: middle; line-height: 21px; } } /*20230829追記*/ .tab-box .chCont .tab-area .tab-table .item-list ul li .list-bottom .bottom-info{ height: 52px; } .tab-box .chCont .tab-area .tab-table .item-list ul li .list-bottom .bottom-info .btn-flex{ position: absolute; top: 50%; left: 0; right:0; display: flex; justify-content: space-between; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); align-content: center; width: 88%; margin-left: auto; margin-right: auto; } .tab-box .chCont .tab-area .tab-table .item-list ul li .list-bottom .bottom-info .btn-flex li{ width: 48%; border-top: none; margin-top: 0!important; } .tab-box .chCont .tab-area .tab-table .item-list ul li .list-bottom .bottom-info .btn-flex li.left-tex a{ display: block; text-align: center; color: #fff; padding-top: 7px; padding-bottom: 7px; font-size: 13px; border-radius: 5px; background: #1B2D5A; position: relative; width: 100%; line-height: 1; } /*20241022追記*/ .tab-box .chCont .tab-area .tab-table .item-list ul li .list-bottom .bottom-info .btn-flex li.left-tex2 a{ display: block; text-align: center; color: #fff; padding-top: 7px; padding-bottom: 7px; font-size: 13px; border-radius: 5px; background: #6e7075; position: relative; width: 100%; line-height: 1; } .tab-box .chCont .tab-area .tab-table .item-list ul li .list-bottom .bottom-info .btn-flex li.left-tex a .sankaku{ width: 5px; left: 10px; position: absolute; top: 55%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } .tab-box .chCont .tab-area .tab-table .item-list ul li .list-bottom .bottom-info .btn-flex li.right-tex a{ display: block; text-align: center; padding-top: 7px; padding-bottom: 7px; font-size: 13px; position: relative; width: 100%; line-height: 1; } .tab-box .chCont .tab-area .tab-table .item-list ul li .list-bottom .bottom-info .btn-flex li.right-tex a .icon{ width: 17px; right: 2px; position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); }