@charset "UTF-8"; .mod-freeHTML{ opacity: 1; transition: opacity .5s; } .mod-freeHTML.js-page_loaded{ opacity: 1; } /* ======================================== 共通スタイル ========================================*/ .mod-freeHTML h1, .mod-freeHTML h2, .mod-freeHTML h3{ margin:0;font-size:100%; } .mod-freeHTML ul{ margin:0; padding:0; list-style:none; } .mod-freeHTML #fixedArea img{ display:block; vertical-align:bottom; } .mod-freeHTML p{ margin:0; } .mod-freeHTML img{ height: auto; max-width: 100%; width: 100%; } .mod-freeHTML img[src$=".svg"] { width: 100%; } .mod-freeHTML sup{ font-size: 0.714em; } .mod-freeHTML .iBlock{ display: inline-block; *display: inline; *zoom:1;} .mod-freeHTML *,.mod-freeHTML *::after,.mod-freeHTML *::before{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } @media screen and (min-width: 641px) { .mod-freeHTML .u-sp{ display: none; } .mod-freeHTML .inner{ width: 100%; max-width: 1000px; margin: 0 auto; } } @media screen and (max-width: 640px) { .mod-freeHTML{ font-size: 14px; } .mod-freeHTML .u-pc{ display: none; } .mod-freeHTML .inner{ width: 94%; margin: 0 auto; } } .mod-freeHTML .cmn-area{ position: relative; } .mod-freeHTML .cmn-area .link-point{ position: absolute; top: 0; left: 0;} /* ======================================== 共通パーツ .att-list ========================================*/ .mod-freeHTML .att-list li{ text-align: left; font-size: 0.857em; padding-left: 1em; text-indent: -1em; } @media screen and (max-width: 640px) { .mod-freeHTML .att-list li{ font-size: 0.714em; } .mod-freeHTML .att-list li br:not(.u-sp):not(.br-dis){ display: none; } } /* ======================================== 共通パーツ .cmn-mid-box ========================================*/ .mod-freeHTML .cmn-mid-box{ font-size: 25px; font-weight: bold; position: relative; display: inline-block; margin: 0 auto 40px; line-height: 100%; } .mod-freeHTML .cmn-mid-box span{ position: relative; z-index: 2; } .mod-freeHTML .cmn-mid-box::after{ content: ""; display: block; width: 100%; height: 19px; background: #FFF; position: absolute; left: 0; bottom: 0; margin-bottom: -5px; z-index: 1; } @media screen and (max-width: 640px) { .mod-freeHTML .cmn-mid-box{ font-size: 12px; margin: 0 auto 20px; } .mod-freeHTML .cmn-mid-box::after{ height: 8px; margin-bottom: -5px; } } /* ======================================== 共通パーツ .icon-arrow ========================================*/ .mod-freeHTML .icon-arrow{ position: relative; padding-right: 40px; } .mod-freeHTML .icon-arrow::after{ content: ""; position: absolute; top: 50%; right: 0; display: block; width: 10px; height: 10px; border-top: 1px solid #6F9BB5; border-right: 1px solid #6F9BB5; transform: translate(0,-50%) rotate(45deg); margin-right: 20px; } @media screen and (max-width: 640px) { .mod-freeHTML .icon-arrow{ padding-right: 20px; } .mod-freeHTML .icon-arrow::after{ width: 8px; height: 8px; margin-right: 10px; } } /* ======================================== 共通パーツ .fuk-type ========================================*/ .mod-freeHTML .fuk-type{ position: relative; background: #00AFD2; } .mod-freeHTML .fuk-type::after{ content: ""; width: 0; height: 0; border-style: solid; border-width: 16px 20px 0 20px; border-color: #00AFD2 transparent transparent transparent; position: absolute; bottom: 0; left: 50%; transform: translate(-50%,100%); } /* ======================================== .main-area ========================================*/ .mod-freeHTML .main-area{ margin: 0; background: #ffffff; /* Old browsers */ background: -moz-linear-gradient(left, #ffffff 0%, #ffffff 50%, #fcfcfd 51%, #fcfcfd 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #ffffff 0%,#ffffff 50%,#fcfcfd 51%,#fcfcfd 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #ffffff 0%,#ffffff 50%,#fcfcfd 51%,#fcfcfd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfd',GradientType=1 ); /* IE6-9 */ } .mod-freeHTML .main-area .inner{ max-width: none; } .mod-freeHTML .main-area .img-box{ max-width: 1800px; margin: 0 auto; } @media screen and (max-width: 640px) { .mod-freeHTML .main-area .inner{ width: 100%; } } /* ======================================== .navi-area ========================================*/ .mod-freeHTML .navi-area{ background: #6F9BB5; width: 100%; box-shadow: 0 13px 26px rgba(35,24,21,0.4); position: relative; z-index: 2; } .mod-freeHTML .navi-area .inner{ max-width:1000px; margin:0 auto; } .mod-freeHTML .navi-area ul{ display:flex; justify-content:space-around; width: 100%; padding: 10px 0; } .mod-freeHTML .navi-area ul li{ width:calc( 100% / 3 ); text-align:center; border-right:1px solid #fff; } .mod-freeHTML .navi-area ul li:last-child{ border-right:none; } .mod-freeHTML .navi-area ul li a{ display:block; padding:15px 0; font-size:20px; font-weight:bold; color: #fff; } @media screen and (max-width: 640px) { .mod-freeHTML .navi-area ul li a{ padding:10px 0; font-size:11px; } } /* ======================================== .bg ========================================*/ .mod-freeHTML .gray-bg{ background: #F0F0F0; padding: 100px 0; } .mod-freeHTML .white-bg{ background: #FFFFFF; padding: 100px 0; } .mod-freeHTML .icon-arrow-down{ max-width: 186px; margin: 20px auto; } @media screen and (max-width: 640px) { .mod-freeHTML .gray-bg{ padding: 30px 0; } .mod-freeHTML .white-bg{ padding: 30px 0; } .mod-freeHTML .icon-arrow-down{ max-width: 128px; margin: 20px auto; } } /* ======================================== .point ========================================*/ .mod-freeHTML .point-area{ } .mod-freeHTML .point-area .tit-box{ font-size: 25px; font-weight: bold; text-align: center; padding-bottom: 10px; margin-bottom: 20px; background: url(/-/media/cojp/product/printer/special/okurijo/img/pc/point_bg01.png) bottom center no-repeat; } .mod-freeHTML .point-area .list-box{ display: flex; justify-content: space-between; width: 100%; margin-bottom: 20px; } .mod-freeHTML .point-area .list-box li{ display: flex; justify-content: center; align-items: center; width: 235px; height: 235px; border:1px solid #CACACA; border-radius: 50%; background: #fff; text-align: center; font-size: 24px; } .mod-freeHTML .point-area .mid-box{ max-width: 346px; margin: 0 auto; width: 100%; margin-bottom: 20px; } .mod-freeHTML .point-area .txt-box{ font-size: 28px; text-align: center; } .mod-freeHTML .point-area .txt-box .txt-line-yellow{ position: relative; display: inline-block; } .mod-freeHTML .point-area .txt-box .txt-line-yellow::after{ content: ""; position: absolute; bottom: 0; left: 0; display: block; background: #F9CC00; width: 100%; height: 4px; } @media screen and (max-width: 1000px) { .mod-freeHTML .point-area .list-box{ flex-wrap: wrap; justify-content: center; } .mod-freeHTML .point-area .list-box li{ font-size: 2.1vw; margin: 10px; } } @media screen and (max-width: 770px) { .mod-freeHTML .point-area .txt-box .u-sp{ display: block; } } @media screen and (max-width: 640px) { .mod-freeHTML .point-area{ padding-bottom: 55px; } .mod-freeHTML .point-area .tit-box{ font-size: 13px; } .mod-freeHTML .point-area .list-box li{ width: 130px; height: 130px; font-size: 13px; margin: 10px; } .mod-freeHTML .point-area .mid-box{ max-width: 174px; } .mod-freeHTML .point-area .txt-box{ font-size: 14px; font-weight: bold; } .mod-freeHTML .point-area .txt-box .txt-line-yellow::after{ height: 2px; } } /* ======================================== .case-area ========================================*/ .mod-freeHTML .case-area .inner{ padding: 0 30px; border: 1px solid #CACACA; font-size: 13px; text-align: center; } .mod-freeHTML .case-area .tit-box{ max-width: 420px; margin: 0 auto; } .mod-freeHTML .case-area .list-box{ border-top: 1px solid #CACACA; display:flex; justify-content: flex-start; position: relative; padding-top: 20px; } .mod-freeHTML .case-area .list-box li{ display: flex; flex-direction: column; justify-content: flex-end; } .mod-freeHTML .case-area .list-box li.arrow-box{ padding-bottom: 95px; } .mod-freeHTML .case-area .list-box li.char-box{ position: absolute; right: 0; bottom: 0; margin-right: -15px; } @media screen and (max-width: 910px) { .mod-freeHTML .case-area .list-box li.u-pc{ display: none; } .mod-freeHTML .case-area .list-box{ justify-content: center; } .mod-freeHTML .case-area .list-box li{ display: inline-block; } .mod-freeHTML .case-area .list-box li .u-pc{ display: none; } .mod-freeHTML .case-area .list-box li .u-sp{ display: block; } } /* ======================================== .before-area ========================================*/ .mod-freeHTML .case-area.step-area .inner{ background-color: #DAE5EC; } .mod-freeHTML .case-area.step-area .inner, .mod-freeHTML .case-area.step-area .list-box{ border-color:#6F9BB5; } /* ======================================== .paper-wrap ========================================*/ .mod-freeHTML .paper-wrap{ text-align: center; } .mod-freeHTML .paper-wrap .inner .inner{ width: 100%; } .mod-freeHTML .paper-wrap .another-area + .txt-box{ font-size: 12px; text-align: left; margin-top: 10px; } .mod-freeHTML .paper-wrap .att-list{ font-size: 10px; text-align: left; } .mod-freeHTML .paper-wrap .att-list li{ display: inline; text-indent: 0; padding-left: 0; } @media screen and (max-width: 640px) { .mod-freeHTML .paper-wrap .another-area + .txt-box, .mod-freeHTML .paper-wrap .att-list{ font-size: 9px; } } /* ======================= w000p =========================*/ .mod-freeHTML .w100p{ width: 100% } .mod-freeHTML .w33p{ width: calc( 100% / 3 ); } .mod-freeHTML .w25p{ width: calc( 100% / 4 ); } .mod-freeHTML .w25p-add100{ width: calc( 100% / 4 + 100px ); } .mod-freeHTML .w25p-gin100{ width: calc( 100% / 4 - 100px ); } /* ======================= table =========================*/ .mod-freeHTML .paper-wrap .yusei-area{ margin-bottom: 25px; } .mod-freeHTML .paper-wrap table{ border-collapse: collapse; table-layout:auto; font-weight: bold; width: 100%; } @media all and (-ms-high-contrast:none){ *::-ms-backdrop, .mod-freeHTML .paper-wrap table{ table-layout:fixed; } /* IE11 */ } .mod-freeHTML .paper-wrap table tr th, .mod-freeHTML .paper-wrap table tr td{ border: 2px solid #717071; } @media screen and (max-width: 640px) { .mod-freeHTML .paper-wrap .yamato-area{ margin-bottom: 25px; } } /* ======================= th =========================*/ .mod-freeHTML .paper-wrap table tr th{ background: #717071; padding: 15px 10px; width: 4%; } .mod-freeHTML .paper-wrap table tr th p{ writing-mode: tb-rl; writing-mode: vertical-rl; margin: 0 auto; white-space: nowrap; width: 1em; line-height: 1em; text-orientation: upright; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; font-size: 13px; color: #fff; } /* IE11のみに対応 */ @media (-ms-high-contrast: none), (-ms-high-contrast: active) { .mod-freeHTML .paper-wrap table tr th p{ max-height: 13em; } } .mod-freeHTML .paper-wrap table tr:not(:last-of-type) th{ border-bottom: 2px solid #fff; } @media screen and (max-width: 640px) { .mod-freeHTML .paper-wrap table tr th{ background: #717071; padding: 15px 5px; width: 3%; } .mod-freeHTML .paper-wrap table tr th p{ font-size: 10px; } } /* ======================= td =========================*/ .mod-freeHTML .paper-wrap table tr td{ padding: 40px 0; font-size: 18px; background: #fff; text-align: center; } .mod-freeHTML .paper-wrap table tr.tit-box td{ padding: 15px; } .mod-freeHTML .paper-wrap .yusei-area table tr.tit-box td{ width: 96%; } .mod-freeHTML .paper-wrap .another-area table tr.tit-box td{ width: 48%; } .mod-freeHTML .paper-wrap table tr.tit-box td p{ width: 100%; position: relative; padding: 40px 0 25px; } .mod-freeHTML .paper-wrap table tr.tit-box td p::before{ position: absolute; top: 0; left: 0; content: ""; display: block; width: 100%; height: 13px; background: #F4C8BF; } .mod-freeHTML .paper-wrap table tr.tit-box td.yamato-tit p::before{ background: #F5DD7D; } .mod-freeHTML .paper-wrap table tr.tit-box td.sagawa-tit p::before{ background: #C4D0E6; } .mod-freeHTML .paper-wrap table tr.tit-box td p img{ max-width: 264px; } @media screen and (max-width: 640px) { .mod-freeHTML .paper-wrap table tr td{ font-size: 12px; padding: 20px 0; } .mod-freeHTML .paper-wrap table tr.tit-box td p::before{ height: 8px; } } /* ======================= td =========================*/ .mod-freeHTML .paper-wrap table tr.model-box td ul{ display:flex; flex-direction: column; align-items: center; margin: 0 10px; } .mod-freeHTML .paper-wrap table tr.model-box td ul li{ font-size: 13px; font-weight: normal; } .mod-freeHTML .paper-wrap table tr.model-box td ul li:nth-child(2){ margin-top: 10px; max-width: 130px; } .mod-freeHTML .paper-wrap table tr.model-box td .model-inner{ display: flex; justify-content: center; } @media screen and (max-width: 640px) { .mod-freeHTML .paper-wrap table tr.model-box td ul li{ font-size: 10px; } } /* ======================= td =========================*/ .mod-freeHTML .paper-wrap table tr.list-box td{ padding: 30px 110px; } .mod-freeHTML .paper-wrap table tr.list-box td ul{ display: flex; justify-content: flex-start; flex-wrap: wrap; text-align: left; } .mod-freeHTML .paper-wrap table tr.list-box td ul li{ } .mod-freeHTML .paper-wrap table tr.list-box td ul li:not(:last-of-type){ margin-right: 2em; } .mod-freeHTML .paper-wrap table tr.list-box td ul li::before{ content: "■"; } @media screen and (max-width: 640px) { .mod-freeHTML .paper-wrap table tr.list-box td ul li{ font-size: 11px; } .mod-freeHTML .paper-wrap table tr.list-box td ul li:not(:last-of-type){ margin-right: 1em; } .mod-freeHTML .paper-wrap table tr.list-box td{ padding: 15px; } } /* ======================================== .dl-area ========================================*/ .mod-freeHTML .dl-area{ text-align: center; } /* ======================= cmn-mid-box =========================*/ .mod-freeHTML .dl-area .cmn-mid-box::after{ background-color: #DAE5EC; } /* ======================= list-wrap =========================*/ .mod-freeHTML .dl-area .list-wrap{ border: 2px solid #6F9BB5; padding: 50px 60px; } @media screen and (max-width: 640px) { .mod-freeHTML .dl-area .list-wrap{ padding: 20px 10px; } } /* ======================= btn-box =========================*/ .mod-freeHTML .dl-area .btn-box{ margin-bottom: 60px; text-align: left; } .mod-freeHTML .dl-area .btn-box{ display: flex; justify-content: center; } .mod-freeHTML .dl-area .btn-box a.icon-arrow{ display: block; width: 100%; max-width: 400px; margin: 0 15px; background: #DAE5EC; border: 2px solid #6F9BB5; text-align: center; font-size: 21px; font-weight: bold; padding: 10px 40px; line-height: 120%; } .mod-freeHTML .dl-area .btn-box a.icon-arrow::after{ border-width: 2px; border-color: #717071; } .mod-freeHTML .dl-area .btn-box a.icon-arrow .x-small{ display: block; font-size: 18px; } @media screen and (max-width: 640px) { .mod-freeHTML .dl-area .btn-box{ margin-bottom: 20px; display: flex; flex-direction: column; } .mod-freeHTML .dl-area .btn-box a.icon-arrow{ max-width: 400px; width: 66%; margin: 0 auto; padding: 5px 20px; font-size: 12px; } .mod-freeHTML .dl-area .btn-box a.icon-arrow + a.icon-arrow{ margin-top: 10px; } .mod-freeHTML .dl-area .btn-box a.icon-arrow .x-small{ font-size: 10px; } } /* ======================= list =========================*/ .mod-freeHTML .dl-area .list-box{ display: flex; flex-wrap: wrap; justify-content: space-between; } .mod-freeHTML .dl-area .list-box > ul{ display: flex; flex-direction: column; } .mod-freeHTML .dl-area .list-box > ul:not(.img-none) .bnr-box{ margin-top: auto; } .mod-freeHTML .dl-area .list-box > ul:nth-child(n+4){ margin-top: 70px; } @media screen and (max-width: 850px) { .mod-freeHTML .dl-area .btn-box{ margin-bottom: 0; } .mod-freeHTML .dl-area .list-box{ max-width: calc( 228px * 2 + 40px ); margin: 0 auto; } .mod-freeHTML .dl-area .list-box > ul:nth-child(n+4){ margin-top: 0; } .mod-freeHTML .dl-area .list-box > ul:nth-child(n+3){ margin-top: 20px; } } .mod-freeHTML .dl-area .list-box .bnr-box a.icon-arrow{ display: block; border: 1px solid #6F9BB5; background: #FFF; font-size: 16px; font-weight: bold; text-align: center; padding: 10px 30px; color: #6F9BB5; } .mod-freeHTML .dl-area .list-box .bnr-box a.icon-arrow::after{ margin-right: 15px; } @media screen and (max-width: 640px) { .mod-freeHTML .dl-area .list-box > ul:nth-child(n+3){ margin-top: 20px; } .mod-freeHTML .dl-area .list-box > ul{ width: 46% } .mod-freeHTML .dl-area .list-box .bnr-box a.icon-arrow{ font-size: 11px; padding: 10px 20px; } } /* ======================= list =========================*/ .mod-freeHTML .dl-area .list-box .faq-box{ margin-top: 10px; } .mod-freeHTML .dl-area .list-box .faq-box + .img-box{ margin-top: 10px; } .mod-freeHTML .dl-area .list-box .faq-box a.icon-arrow{ display: block; color: #FFF; background: #6F9BB5; font-size: 12px; text-align: left; padding: 10px 15px; } .mod-freeHTML .dl-area .list-box .faq-box a.icon-arrow::after{ border-color: #FFF; margin-right: 15px; } @media screen and (max-width: 640px) { .mod-freeHTML .dl-area .list-box .faq-box{ margin-top: 5px; } .mod-freeHTML .dl-area .list-box .faq-box + .img-box{ margin-top: 20px; } .mod-freeHTML .dl-area .list-box .faq-box a.icon-arrow{ font-size: 9px; padding: 10px 15px 10px 10px; line-height: 120%; } .mod-freeHTML .dl-area .list-box .faq-box a.icon-arrow::after{ margin-right: 10px; } } /* ======================================== .works-area ========================================*/ .mod-freeHTML .works-area{ text-align: center; } .mod-freeHTML .works-area .btn-box{ display: flex; justify-content: space-between; text-align: left; padding: 30px 0; border-top: 2px solid #717071; border-bottom: 2px solid #717071; } .mod-freeHTML .works-area .btn-box a{ display: flex; align-items: center; width: 465px; } .mod-freeHTML .works-area .btn-box .img-wrap{ width: 240px; margin-right: 20px; } .mod-freeHTML .works-area .btn-box .txt-wrap{ width: calc( 100% - 240px - 20px ); } .mod-freeHTML .works-area .btn-box .txt-wrap .mid-box{ font-size: 16px; font-weight: bold; display: inline-block; margin-bottom: 10px; } .mod-freeHTML .works-area .btn-box .txt-wrap .mid-box.icon-arrow::after{ border-color: #6F9BB5; border-width:2px; } .mod-freeHTML .works-area .btn-box .txt-wrap .txt-box{ display: block; font-size: 12px; } @media screen and (max-width: 850px) and (min-width: 641px) { .mod-freeHTML .works-area .btn-box{ display: flex; flex-wrap: wrap; justify-content: center; } .mod-freeHTML .works-area .btn-box a + a{ margin-top: 40px; } } @media screen and (max-width: 640px) { .mod-freeHTML .works-area .btn-box{ display: block; padding: 20px 0; border-top: 2px solid #717071; border-bottom: 2px solid #717071; } .mod-freeHTML .works-area .btn-box a{ display: block; align-items: center; width: 100%; } .mod-freeHTML .works-area .btn-box a + a{ margin-top: 30px; } .mod-freeHTML .works-area .btn-box .img-wrap{ width: 100%; margin-right: 0; margin-bottom: 10px; } .mod-freeHTML .works-area .btn-box .txt-wrap{ width: 100%; } .mod-freeHTML .works-area .btn-box .txt-wrap .mid-box{ font-size: 14px; } .mod-freeHTML .works-area .btn-box .txt-wrap .txt-box{ font-size: 11px; } .mod-freeHTML .works-area .btn-box .txt-wrap .mid-box{ margin-bottom: 5px; } }