@charset "utf-8"; $pc: 1501px; // PC $sp: 480px; // スマホ @mixin pc { @media (max-width: ($pc)) { @content; } } @mixin sp { @media (max-width: ($sp)) { @content; } } /* contact ========================================================================== */ .main{ margin-bottom: 120px; } .toiawase_item_del_button{ font-family: "Noto Sans JP", "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", "MS Pゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif; } .cart_mode1, .cart_mode2{ input[type=text]{ box-sizing: border-box; width: 50%; min-height: 30px; padding: 5px 10px; border: 1px solid #ccc; font-family: "Noto Sans JP", "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", "MS Pゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif; border-radius: 3px; } input[type=tel]{ border: 1px solid #ccc; font-family: "Noto Sans JP", "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", "MS Pゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif; border-radius: 3px; } textarea{ box-sizing: border-box; width: 100%; min-height: 200px; padding: 5px 10px; border: 1px solid #ccc; font-family: "Noto Sans JP", "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", "MS Pゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif; font-size: 14px; border-radius: 3px; } .senddatatable { margin: 0; tr{ &:first-of-type{ display: none; } } } .senddata18{ input{ font-size: 14px; } } .form_anq_21{ } .form_anq_22{ margin-bottom: 50px; } .anqtable{ margin: 0; border-top: 0; tr{ &:first-of-type{ display: none; } } } .form_40{/*プルダウン*/ .form_required{ position: relative; &::after{ content: ""; position: absolute; top: calc(50% - 2px); right: 17px; display: inline-block; width: 8px; height: 8px; border-left: 1px solid #333; border-bottom: 1px solid #333; transform: rotate(-45deg); } } select { -moz-appearance: none; -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 47%; margin: 0; padding: 10px 10px; background: none transparent; vertical-align: middle; font-family: "Noto Sans JP", "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", "MS Pゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif; font-size: 14px; line-height: 1; box-sizing: content-box; border: 1px solid #ccc; border-radius: 3px; } #koumoku_id_block_41{ display: block; margin-top: 10px; input{ box-sizing: border-box; max-width: 305px; min-height: 20px; padding: 5px; } } } .form_anq_21{ .form_36{ input{ box-sizing: border-box; width:120px; min-height: 20px; padding: 5px; } } .form_44{ } } .form_anq_22{ label{ display: flex; align-items: center; margin-top: 10px; font-size: 15px; line-height: 1; input[type="checkbox"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; position: relative; width: 18px; min-height:18px; margin: 4px 5px 0 0; border: 1px solid #aaa; background-color: #FFF; border-radius: 3px; } input[type="checkbox"]:checked { background-color: #da1515; border-radius: 3px; } input[type="checkbox"]:checked::before{ content: ""; position: absolute; top: calc(50% - 5px); left: 3px; display: inline-block; width: 10px; height: 7px; border-left: 3px solid #FFF; border-bottom: 3px solid #FFF; transform: rotate(-45deg); } } a:hover{ color:#da1515; } .form_42{ @include sp { padding-bottom: 20px; .agreement{ margin-bottom: 13px; line-height: 1.5; } } } } &>br{ display: none; } } .cart_mode3 { margin: 100px auto 50px; font-size: 14px; line-height: 1.8; text-align: center; @include sp { margin-bottom: -40px; padding: 50px 20px 0; font-size: 100%; line-height: 1.5; text-align: left; } } .cart{ .cart_mode2{ margin: 100px 0 0; } } .contact{ .senddatatable{ td.senddata1,td.senddata2,td.senddata3,td.senddata7,.senddata10,td.senddata16,td.senddata17{ font-size: 12px; input{ width: 50%; font-size: 15px; @include sp { width:75%; } } } td.senddata16{ br{ display: none; } } td.senddata4{ font-size: 12px; input{ width: 130px; font-size: 15px; @include sp { width:110px } } } } .cart_mode2{ .senddatatable{ td.senddata1,td.senddata2,td.senddata3,td.senddata7,.senddata10,td.senddata16,td.senddata17{ font-size: 14px; } td.senddata4{ font-size: 14px; } } } } input.submit_confirm_button{ background-image: url(https://27.rims-web.com/id/reprice1/file/sample/common/img/arrow_2024.svg), linear-gradient(54deg, #e60000 0%, #e73535 0%, #da1515 100%)!important; background-size: 17px auto, 100% auto; background-position: calc(50% + 70px) 50% ,0 0; &:hover{ color: #d00; background-image: url(https://27.rims-web.com/id/reprice1/file/sample/common/img/arrow_h_2024.svg), none!important; background-position: calc(50% + 70px) 50% ,0 0; background-color: #FFF; } } .cart_mode2{ input.form_submit { -moz-appearance: none; -webkit-appearance: none; appearance: none; position: relative; box-sizing: border-box; display: inline-block; width: 320px; padding: 20px 38px 20px 38px; border: 3px solid #d00; background-image: url(https://27.rims-web.com/id/reprice1/file/sample/common/img/arrow_2024.svg), linear-gradient(54deg, #e60000 0%, #e73535 0%, #da1515 100%); background-size: 17px auto,100% auto; background-repeat: no-repeat; background-position: calc(50% + 70px) 50% ,0 0; color: #fff !important; font-family: "Noto Sans JP", "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", "MS Pゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif; font-weight: bold; font-size: 15px; border-radius: 4px; line-height: 1; text-align: center; text-decoration: none !important; box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.18); cursor: pointer; &:hover { border: 3px solid #d00; background-image: url(https://27.rims-web.com/id/reprice1/file/sample/common/img/arrow_h_2024.svg), none; background-position: calc(50% + 70px) 50% ,0 0; background-color: #FFF; color: #d00 !important; } } } @include sp { .cart_mode1, .cart_mode2{ input[type=text]{ width: 95%; height: 20px; border: 1px solid #ccc; font-family: "Noto Sans JP", "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", "MS Pゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif; border-radius: 3px; } td{ display: block; width: 100%!important; padding: 13px 20px; } .form_40{/*プルダウン*/ .form_required{ position: relative; &::after{ content: ""; position: absolute; top: calc(50% - 5px); right: 15px; display: inline-block; width: 10px; height: 10px; border-left: 1px solid #333; border-bottom: 1px solid #333; transform: rotate(-45deg); } } select { -moz-appearance: none; -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 90%; min-height: 20px; margin: 0; padding: 8px 10px 3px; background: none transparent; vertical-align: middle; font-size: inherit; line-height: 1; color: inherit; box-sizing: content-box; border: 1px solid #ccc; border-radius: 3px; } #koumoku_id_block_41{ display: block; margin-top: 10px; input{ max-width: 84%; height: 30px; padding: 5px; } } } } .form_input_back{ width: 50%; min-width: 200px; } input.form_submit { background-image: url(https://27.rims-web.com/id/reprice1/file/sample/common/img/arrow_2024.svg), linear-gradient(54deg, #e60000 0%, #e73535 0%, #da1515 100%)!important; background-size: 17px auto,100% auto; background-repeat: no-repeat; background-position: calc(50% + 70px) 50% ,0 0!important; cursor: pointer; &:hover { background-image: url(https://27.rims-web.com/id/reprice1/file/sample/common/img/arrow_h_2024.svg), none!important; background-color: #FFF; } } } /* shiryoseikyu ========================================================================== */ .cart{ .inqHead{ margin-bottom: 0; th{ width: 220px; padding: 20px!important; text-align: left!important; @include sp { display: block; width: 100%; padding: 13px 20px!important; } } .inqObjs{ th{ @include sp { display: block; width: 100%!important; } } } .inqType{ td{ @include sp { width: 100%; padding: 10px 8px 0; } &:last-of-type{ padding-bottom: 10px; } } } } .cart_mode2{ .inqHead{ .inqType{ td{ @include sp { width: 100%; padding: 10px 13px; } } } td.cell-02{ text-align: center; } } } } .form_anq_9{ margin-bottom: 50px; table.anqtable{ border-left: 1px solid #ccc; border-right: 1px solid #ccc; td{ width:calc(100% - 220px); border-right: 1px solid #cccccc; @include sp { &.senddata_koumoku{ display: none; } } &.senddata_koumoku{ width:220px; } } } textarea#form_11{ width:100%; min-height:50px; max-width: 670px; @include sp { min-height:40px; } } } .shiryouseikyu{ .senddatatable{ td.senddata1,td.senddata3,td.senddata7,.senddata10,td.senddata16,td.senddata17{ font-size: 12px; input{ width: 50%; font-size: 15px; @include sp { width:75%; } } } td.senddata16{ br{ display: none; } } td.senddata4{ font-size: 12px; input{ width: 130px; font-size: 15px; @include sp { width:110px } } } } .anqtable{ &:last-of-type{ margin-bottom: 20px; } } .cart_mode1, .cart_mode2{ .form_anq_15{ margin-bottom: 50px; } .form_anq_15{ label{ display: flex; align-items: center; margin-top: 10px; font-size: 15px; line-height: 1; input[type="checkbox"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; position: relative; width: 18px; min-height:18px; margin: 4px 5px 0 0; border: 1px solid #aaa; background-color: #FFF; border-radius: 3px; } input[type="checkbox"]:checked { background-color: #da1515; border-radius: 3px; } input[type="checkbox"]:checked::before{ content: ""; position: absolute; top: calc(50% - 5px); left: 3px; display: inline-block; width: 10px; height: 7px; border-left: 3px solid #FFF; border-bottom: 3px solid #FFF; transform: rotate(-45deg); } } a:hover{ color:#da1515; } .form_33{ @include sp { padding-bottom: 20px; .agreement{ margin-bottom: 13px; line-height: 1.5; } } } } } .cart_mode2{ .senddatatable{ td.senddata1,td.senddata3,td.senddata7,.senddata10,td.senddata16,td.senddata17{ font-size: 14px; } td.senddata4{ font-size: 14px; } } } }