@charset "UTF-8"; @import url("//fonts.googleapis.com/css?family=Noto+Sans+JP:100,300,400,500,700|Roboto:400,500,700,900"); @import url(https://fonts.googleapis.com/icon?family=Material+Icons); @import url(https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200); html { font-size:62.5%; } body { font-size:1.4rem; } /*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 共通レイアウト ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*------------------------------ ヘッダー -------------------------------*/ #headerWrap { padding:0; width:100%; display:flex; justify-content:space-between; align-items:center; min-width:1300px; } #headerWrap #headerLeftSection { position:static; margin:10px 0 0 30px; } #headerWrap #headerLeftSection div a { display:inline-block; width:222px; } #headerWrap #headerLeftSection div a img { width:100%; } #headerWrap #headerRightSection div.contact a { font-family:'Noto sans JP'; background-color:#003285; padding:20px; color:#ffffff; text-align:center; display:block; } #headerWrap #headerRightSection div.contact a > div { font-size:1.4rem; display:flex; justify-content:space-between; align-items:center; } #headerWrap #headerRightSection div.contact a > div::before { content:''; display:block; width:20px; height:15px; background:url(/common/img/common_icon_contact.png) no-repeat left center / 100% auto; margin-right:0.5em; } @media(hover:hover){ #headerWrap #headerRightSection div.contact a:hover { text-decoration:none; } #headerWrap #headerRightSection div.contact a:hover > div::before { transform:scale(1.2); opacity:1; } } /*------------------------------ フッター -------------------------------*/ #footerWrap { min-width:1300px; } #footerWrap p#pageTopBtn { transform:translateX(150%); transition:all 0.5s ease; } #footerWrap p#pageTopBtn.show { transform:translateX(0); } /*------------------------------ モーダル -------------------------------*/ #contentsWrap #modalSection { display:none; } #cboxLoadedContent { background-color:#f2f5f7; } #cboxClose { display:none; } .modalBox { width:825px; padding:50px 70px; line-height:1.8; } .modalBox h2 { font-size:1.8rem; font-weight:bold; text-align:center; } .modalBox h2 + p { margin-top:30px; } .modalBox dl.deliDestList { display:flex; flex-wrap:wrap; margin-top:30px; } .modalBox dl.deliDestList dt { width:3em; text-align:center; padding:10px 0; font-size:1.6rem; } .modalBox dl.deliDestList dd { width:calc(100% - 4em); background-color:#ffffff; border-radius:4px; padding:10px; } .modalBox dl.deliDestList dt:not(:first-child) { margin-top:20px; } .modalBox dl.deliDestList dd:not(dt:first-child + dd) { margin-top:20px; } .modalBox .close { text-align:center; margin-top:40px; } .modalBox .close button { min-width:100px; text-align:center; padding:10px; border-radius:6px; border:1px solid transparent; transition:opacity 0.3s ease-out; background-color:#ffffff; border-color:#cccccc !important; line-height:1; } @media(hover:hover){ .modalBox .close button:hover { opacity:0.7; } } /*------------------------------ レイアウト -------------------------------*/ #contentsWrap { width:1300px; margin:0 auto; padding:30px 0 100px; } body#index #contentsWrap { width:100%; padding-top:0; } .pageInner { margin-inline:50px; } .bgColorBox { background-color:#f2f5f7; padding:15px 25px; margin-top:20px; } .bgColorBox > *:first-child { margin-top:0 !important; } .bgBdBox { border:1px solid #cccccc; border-radius:6px; padding:15px 25px; margin-top:20px; } .bgBdBox > *:first-child { margin-top:0 !important; } .contentsSection { width:1100px; margin:50px auto 0; } #privacy .contentsSection h2, #siteinfo .contentsSection h2 { font-size:2.2rem !important; font-weight:normal !important; text-align:left !important; margin:40px 0 0 !important; padding:0 0 15px !important; border-bottom:2px solid #cccccc !important; } .contentsSection p, .contentsSection ul, .contentsSection ol, .contentsSection dl { margin-top:20px; } .contentsSection dl dt { margin-top:15px; } .contentsSection dl dd { margin-top:5px; } .contentsSection dl dd > *:first-child { margin-top:0; } .contentsSection > *:first-child { margin-top:0; } .contentsSection dl.dlList.type03 dt { font-weight:bold; margin-top:20px; } .contentsSection dl.dlList.type03 dt:first-child { margin-top:0; } /*------------------------------ パーツ -------------------------------*/ p.required { position:relative; padding-right:50px; } p.required::after { content:'必須'; display:inline-block; background-color:#ff7575; color:#ffffff; font-size:1.2rem; line-height:1; padding:5px; position:absolute; right:0; top:50%; transform:translateY(-50%); } /* ーーー 幅 ーーー */ .minW150 { min-width:150px; } .minW160 { min-width:160px; } .minW170 { min-width:170px; } .minW180 { min-width:180px; } .minW190 { min-width:190px; } .minW200 { min-width:200px; } /* ーーー 見出し ーーー */ #contentsWrap h2 { font-size:1.6rem; font-weight:bold; } #contentsWrap h2:not(:first-of-type) { margin-top:35px; } /* ーーー 段落 ーーー */ #contentsWrap p:not(:first-child) { margin-top:15px; } /* ーーー テーブル ーーー */ #contentsWrap table { margin-top:15px; width:100%; } /* #contentsWrap table.thColorTable { width:100%; } */ #contentsWrap table.thColorTable th, #contentsWrap table.thColorTable td { padding:13px 20px; border-top:1px solid #cdcdcd; border-bottom:1px solid #cdcdcd; vertical-align:middle; } #contentsWrap table.thColorTable th { font-weight:bold; background-color:#f2f5f7; text-align:left; } #contentsWrap table.thLineTable { width:100%; border-bottom:1px solid #cdcdcd; } #contentsWrap table.thLineTable th, #contentsWrap table.thLineTable td { padding:13px 20px; vertical-align:middle; } #contentsWrap table.thLineTable th { font-weight:bold; text-align:left; border-bottom:1px solid #cdcdcd; } table.noLineTable { table-layout:fixed; } table.noLineTable th, table.noLineTable td { padding:3px; vertical-align:middle; } table.noLineTable th { text-align:left; } table.noLineTable table { margin-top:0 !important; } table.noLineTable table th, table.noLineTable table td { padding:0 !important; } table.vTopTable th, table.vTopTable td { vertical-align:top; } /* ーーー リスト ーーー */ #contentsWrap ul:not(:first-child), #contentsWrap ol:not(:first-child) { margin-top:15px; } ul.flexList { display:flex; flex-wrap:wrap; margin:-5px 0 0 -15px; } ul.flexList li { margin:0; } ul.flexList.typeB { margin:0; } ul.flexList.typeB li { margin:0 5px 0 0; } dl.dlList01 { display:flex; flex-wrap:wrap; } dl.dlList01 dt { width:185px; line-height:2; display:flex; transform:translateY(0.3em); } dl.dlList01 dt:not(:first-child) { margin-top:15px; } dl.dlList01 dt.required { position:relative; padding-right:50px; } dl.dlList01 dt.required::after { content:'必須'; display:inline-block; background-color:#ff7575; color:#ffffff; font-size:1.2rem; line-height:1; padding:5px; position:absolute; right:0; top:10%; } dl.dlList01 dd { width:calc(100% - 225px); /* display:flex; */ margin-left:40px; } dl.dlList01 dd:not(:first-child + dd) { margin-top:15px; } dl.dlList01 dd .inputItem { margin-right:30px; display:flex; align-items:center; } dl.dlList01 dd .inputItem:last-child { margin-right:0; } dl.dlList01 dd .inputItem .subTitle + * { margin-left:15px; } dl.dlList01 dd .inputItem .subEnd { margin-left:5px; } dl.dlList01 dd .inputItem .subAtt { margin-left:10px; } dl.dlList01 dd .inputItem .subTitle:has(+ input.insideMeasure:disabled), dl.dlList01 dd .inputItem input.insideMeasure:disabled + .subEnd { opacity:0.5; } dl.dlList01 dd .inputItem .linkBtn01 { margin-top:0 !important; } dl.dlList01 dd .inputItem .linkBtn01 button:focus { border:2px solid #ea5504 !important; } dl.dlList01 dd .inputItem .subAtt + .linkBtn01 { margin-left:30px !important; } dl.dlList01.typeB dt { width:120px; } dl.dlList01.typeB dd { width:calc(100% - 160px); /* display:flex; */ margin-left:30px; } dl.dlList01.typeB dd > dl.dlList01 { margin-top:20px; } dl.dlList01.typeB dt.hasChkList { transform:none; line-height:1.5; } dl.dlList01.typeB dt.hasChkList + dd ul.chkList input[type="checkbox"] + label { width:auto !important; } ul.txtList, ol.txtList { margin-top:15px; padding-left:20px; } ul.txtList > li, ol.txtList > li { margin-top:5px; } ul.txtList > li { list-style:disc; } ol.txtList > li { list-style:decimal; } ul.txtList li:first-child, ol.txtList li:first-child { margin-top:0; } /* ステップ */ ol.stepFlowList { width:820px; display:flex; grid-column:2; } ol.stepFlowList li { position:relative; width:25%; display:flex; justify-content:center; align-items:center; padding:7px 0 9px; line-height:1.5; background:#f2f5f7; color:#aeb0b2; font-size:1.6rem; } ol.stepFlowList li:not(:last-child)::before, ol.stepFlowList li:not(:last-child)::after { content:''; position:absolute; z-index:2; top:0; bottom:0; left:100%; border:20px solid transparent; border-left:20px solid #f5f5f5; margin:auto; } ol.stepFlowList li:not(:last-child)::before { margin-left:1px; border-left-color:#ffffff; } ol.stepFlowList li.current { background-color:#666666; color:#ffffff; z-index:1; } ol.stepFlowList li.current:not(:last-child)::after { border-left-color:#666666; } ol.stepFlowList li.current:not(:last-child)::before { border-left:none; } ol.stepFlowList li > h1, ol.stepFlowList li > div { position:relative; padding-left:1.2em; } ol.stepFlowList li > * span.num { position:absolute; left:0; top:0; } /* ーーー 幅 ーーー */ #contentsWrap .wType01 { width:65px; } #contentsWrap .wType02 { width:120px; } #contentsWrap .wType03 { width:390px; } #contentsWrap .wType04 { width:180px; } #contentsWrap .wType05 { width:100%; } #contentsWrap .wType06 { width:300px; } #contentsWrap .col01 { width:150px; } #contentsWrap .col02 { width:130px; } #contentsWrap .col03 { width:50px; } /* ーーー リンクボタン ーーー */ #contentsWrap .linkBtn01 { margin-top:20px; } #contentsWrap .linkBtn01 a, #contentsWrap .linkBtn01 button, #headerWrap .linkBtn01 a, #headerWrap .linkBtn01 button { min-width:100px; text-align:center; background-color:#003285; color:#ffffff; display:inline-block; line-height:1; padding:10px; position:relative; z-index:1; box-sizing:border-box; overflow:hidden; transition:color 0.3s ease-out; border:1px solid #003285; border-radius:6px; } #contentsWrap .linkBtn01 a::before, #contentsWrap .linkBtn01 button::before, #headerWrap .linkBtn01 a::before, #headerWrap .linkBtn01 button::before { content:''; width:125%; height:100%; position:absolute; top:0; left:-135%; z-index:-1; background-color:#ffffff; transform:skew(25deg); transition:left 0.3s ease-out; } @media(hover:hover){ #contentsWrap .linkBtn01 a:hover, #contentsWrap .linkBtn01 button:hover, #headerWrap .linkBtn01 a:hover, #headerWrap .linkBtn01 button:hover { text-decoration:none; color:#003285; opacity:1; } #contentsWrap .linkBtn01 button:disabled:hover, #headerWrap .linkBtn01 button:disabled:hover { color:#ffffff; } #contentsWrap .linkBtn01 a:hover::before, #contentsWrap .linkBtn01 button:hover::before, #headerWrap .linkBtn01 a:hover::before, #headerWrap .linkBtn01 button:hover::before { left:-12.5%; } #contentsWrap .linkBtn01 button:disabled:hover::before, #headerWrap .linkBtn01 button:disabled:hover::before { left:-135%; } } #contentsWrap .linkBtn02 { margin-top:20px; } #contentsWrap .linkBtn02 a, #contentsWrap .linkBtn02 button { min-width:100px; text-align:center; background-color:#ea5504; color:#ffffff; display:inline-block; line-height:1; padding:10px; position:relative; z-index:1; box-sizing:border-box; overflow:hidden; transition:color 0.3s ease-out; border:1px solid #ea5504; border-radius:6px; } #contentsWrap .linkBtn02 a::before, #contentsWrap .linkBtn02 button::before { content:''; width:125%; height:100%; position:absolute; top:0; left:-135%; z-index:-1; background-color:#ffffff; transform:skew(25deg); transition:left 0.3s ease-out; } @media(hover:hover){ #contentsWrap .linkBtn02 a:hover, #contentsWrap .linkBtn02 button:not(:disabled):hover { text-decoration:none; color:#ea5504; opacity:1; } #contentsWrap .linkBtn02 a:hover::before, #contentsWrap .linkBtn02 button:not(:disabled):hover::before { left:-12.5%; } } #contentsWrap .linkBtn03 { margin-top:20px; } #contentsWrap .linkBtn03 a, #contentsWrap .linkBtn03 button { min-width:100px; text-align:center; background-color:#ffffff; display:inline-block; line-height:1; padding:10px; position:relative; z-index:1; box-sizing:border-box; overflow:hidden; transition:color 0.3s ease-out; border:1px solid #cccccc !important; border-radius:6px; } #contentsWrap .linkBtn03 a::before, #contentsWrap .linkBtn03 button::before { content:''; width:125%; height:100%; position:absolute; top:0; left:-135%; z-index:-1; background-color:#003285; transform:skew(25deg); transition:left 0.3s ease-out; } @media(hover:hover){ #contentsWrap .linkBtn03 a:hover, #contentsWrap .linkBtn03 button:hover { text-decoration:none; color:#ffffff; opacity:1; } #contentsWrap .linkBtn03 a:hover::before, #contentsWrap .linkBtn03 button:hover::before { left:-12.5%; } } #contentsWrap .linkBtn01.typeL a, #contentsWrap .linkBtn02.typeL a, #contentsWrap .linkBtn03.typeL a, #contentsWrap .linkBtn01.typeL button, #contentsWrap .linkBtn02.typeL button, #contentsWrap .linkBtn03.typeL button { font-size:1.6rem; min-width:230px; padding:15px; display:inline-block; text-align:center; } #contentsWrap .linkBtn03.typeL.cancel button { min-width:166px; } #contentsWrap .linkBtn01.typeL a, #contentsWrap .linkBtn01.typeL button { border:1px solid #003285; } #contentsWrap .linkBtn02.typeL a, #contentsWrap .linkBtn02.typeL button { border:1px solid #ea5504; } #contentsWrap .linkPrevBtn a { display:inline-block; position:relative; border:1px solid #cccccc; border-radius:6px; line-height:1; padding:10px 28px 10px 38px; transition:all 0.2s ease-out; } #contentsWrap .linkPrevBtn a::after { display:inline-block; content:''; width:8px; height:8px; border:1px solid; border-color:#000000 #000000 transparent transparent; position:absolute; top:50%; left:15px; transform:translateY(-50%) rotate(-135deg); transition:all 0.3s ease-out; } @media(hover:hover){ #contentsWrap .linkPrevBtn a:hover { text-decoration:none; background-color:#000000; color:#ffffff; } #contentsWrap .linkPrevBtn a:hover::after { border-color:#ffffff #ffffff transparent transparent; transform:translateY(-50%) rotate(-135deg) scale(1.3); } } #contentsWrap .rentalGuide a > div { display:flex; justify-content:space-between; align-items:center; } #contentsWrap .rentalGuide a > div::before { content:''; display:block; width:32px; height:32px; background:url(/common/img/common_icon_catalog.png) no-repeat left center / 100% auto; margin-right:0.5em; } #contentsWrap .rentalGuide a > div::after { content:''; display:block; width:8px; height:14px; background:url(/common/img/common_icon_arrow_orange_r02.png) no-repeat left center / 100% auto; margin-left:0.5em; } @media(hover:hover){ #contentsWrap .rentalGuide a:hover > div::before { background-image:url(/common/img/common_icon_catalog_blue.png); } } /* テキスト */ #contentsWrap a.txtLinkB { /* color:#0000ee; */ text-decoration:underline; } @media(hover:hover){ #contentsWrap a.txtLinkB:hover { text-decoration:none; } } /* input[type=number]スピンボタン消す */ .no-spin::-webkit-inner-spin-button, .no-spin::-webkit-outer-spin-button { -webkit-appearance: none !important; margin: 0 !important; -moz-appearance:textfield !important; } /* ーーー 検索要素 ーーー */ #contentsWrap select, #contentsWrap input, #contentsWrap textarea { appearance:none; } #contentsWrap select { width:100%; } #contentsWrap select:disabled, #contentsWrap input:disabled { background-color:#efefef !important; cursor:default; } .selectOuter:has(select:disabled) { cursor:pointer; } #contentsWrap button:disabled { opacity:0.5 !important; } @media(hover:hover){ #contentsWrap button:disabled:hover { opacity:0.5 !important; cursor:default; } } #contentsWrap select, #contentsWrap input[type="text"], #contentsWrap input[type="password"], #contentsWrap input[type="date"], #contentsWrap input[type="number"], #contentsWrap textarea { background-color:#ffffff; border:1px solid #cccccc; border-radius:6px; padding:10px; } #contentsWrap select { cursor:pointer; } #contentsWrap input[type="checkbox"], #contentsWrap input[type="radio"] { position:absolute; appearance:none; } #contentsWrap input[type="number"]::-webkit-inner-spin-button, #contentsWrap input[type="number"]::-webkit-outer-spin-button { opacity:1; } #contentsWrap textarea { width:100%; padding:15px; min-height:120px; resize:vertical; font-size:1.4rem; } #contentsWrap .selectOuter { position:relative; display:inline-block; } #contentsWrap .selectOuter::after { display:block; content:''; position:absolute; top:45%; right:16px; width:6px; height:6px; border-right:1px solid #333333; border-bottom:1px solid #333333; transform:rotate(45deg) translateY(-50%); } #contentsWrap ul.chkList { display:flex; flex-wrap:wrap; margin:-10px 0 0 -10px; } #contentsWrap ul.chkList li { margin:10px 0 0 10px; } #contentsWrap ul.chkList.aiC li { display:flex; align-items:center; } #contentsWrap ul.chkList2 { display:flex; flex-wrap:wrap; } #contentsWrap ul.chkList2 li { display:flex; align-items:center; width:48%; margin:15px 0 0 2%; } #contentsWrap ul.chkList2 li:nth-child(2n+1) { margin-left:0; } #contentsWrap ul.chkList2 li:nth-child(-n+2) { margin-top:0; } #contentsWrap .stType.center { display:flex; align-items:center; } #contentsWrap .stType input[type="checkbox"] { position:relative; width:18px; height:18px; border:1px solid #cdcdcd; border-radius:3px; cursor:pointer; } #contentsWrap .stType input[type="checkbox"]:checked { background-color:#003285; } #contentsWrap .stType input[type="checkbox"]:checked:before { content:''; position:absolute; left:50%; top:40%; transform:translate(-50%, -50%) rotate(50deg); width:4px; height:8px; border-right:2px solid #ffffff; border-bottom:2px solid #ffffff; } #contentsWrap .stType input[type="checkbox"] + label { cursor:pointer; padding-left:8px; width:calc(100% - 26px); } #contentsWrap .bgType input[type="checkbox"], #contentsWrap .bgType input[type="radio"] { opacity:0; } #contentsWrap .bgType input[type="checkbox"] + label, #contentsWrap .bgType input[type="radio"] + label { border-radius:6px; padding:8px 15px 10px; display:block; cursor:pointer; width:186px; } #contentsWrap .bgType input[type="checkbox"] + label { padding-right:30px; position:relative; } #contentsWrap .bgType input[type="radio"] + label { padding-left:35px; position:relative; } #contentsWrap .bgType input[type="radio"] + label::before { content:''; display:block; position:absolute; top:48%; left:15px; transform:translateY(-50%); width:15px; height:15px; background-color:#ffffff; border-radius:50%; border:1px solid #cccccc; box-sizing:border-box; } #contentsWrap .bgType input[type="checkbox"]:disabled + label, #contentsWrap .bgType input[type="radio"]:disabled + label { opacity:0.3; cursor:default; } @media(hover:hover){ #contentsWrap .bgType input[type="checkbox"]:not(:disabled) + label:hover, #contentsWrap .bgType input[type="radio"]:not(:disabled) + label:hover { background-color:#666666; color:#ffffff; } } #contentsWrap .bgType input[type="checkbox"]:checked + label, #contentsWrap .bgType input[type="radio"]:checked + label { background-color:#666666; color:#ffffff; } #contentsWrap .bgType input[type="checkbox"]:checked + label::before, #contentsWrap .bgType input[type="checkbox"]:checked + label::after { content:''; display:block; position:absolute; top:33%; right:15px; transform:translateY(-50%); width:1px; height:30%; background-color:#ffffff; } #contentsWrap .bgType input[type="checkbox"]:checked + label::before { transform:rotate(45deg); } #contentsWrap .bgType input[type="checkbox"]:checked + label::after { transform:rotate(-45deg); } #contentsWrap .bgType input[type="radio"]:checked + label::before { background-color:#666666; border-color:#ffffff; border-width:3px; } #contentsWrap button:not(.slick-arrow) { min-width:100px; font-size:inherit; text-align:center; padding:10px; border-radius:6px; border:1px solid transparent; transition:opacity 0.3s ease-out; } @media(hover:hover){ #contentsWrap button:hover { opacity:0.7; } } #contentsWrap button[type='reset'] { background-color:#ffffff; border-color:#cccccc; } #contentsWrap button[type='submit'] { background-color:#003285; border-color:#003285; color:#ffffff; } #contentsWrap input.addButton { border-radius:6px; } #contentsWrap input.addButton + button { border-radius:0 6px 6px 0; min-width:auto; } .btnsFlex { display:flex; justify-content:space-between; } /* ーーー タイトル ーーー */ #titleSection { padding:30px 0; border-bottom:2px solid #666666; background-color:rgba(255, 255, 255, 0.5); } #titleSection #titleArea { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; } #titleSection #titleArea > h1 { text-align:center; max-width:900px; font-size:2.8rem; grid-column:2; } #titleSection #titleArea .cartBtn { display:inline-block; grid-column:3; justify-self:end; } #titleSection #titleArea .cartBtn a { display:flex; justify-content:space-between; background-color:#003285; color:#ffffff; padding:11px 15px; line-height:1; position:relative; z-index:1; overflow:hidden; transition:color 0.3s ease-out; border:1px solid #003285; text-align:center; } #titleSection #titleArea .cartBtn a::before { content:''; width:150%; height:100%; position:absolute; top:0; left:-170%; z-index:-1; background-color:#ffffff; transform:skew(25deg); transition:left 0.3s ease-out; } #titleSection #titleArea .cartBtn a span::before { font-family:'Material Symbols Outlined'; content:'\e8cc'; display:block; font-size:2.8rem; font-variation-settings:'FILL' 0, 'wght' 100; } @media(hover:hover){ #titleSection #titleArea .cartBtn a:hover { text-decoration:none; color:#003285; } #titleSection #titleArea .cartBtn a:hover::before { left:-20%; } } #titleSection #titleArea .cartBtn a span { display:block; } #titleSection #titleArea .cartBtn a span:nth-child(2) { min-width:20px; text-align:right; margin-left:12px; } #titleSection #titleInfoArea { display:flex; justify-content:center; margin-top:10px; } #titleSection #titleInfoArea dl { display:flex; flex-wrap:wrap; font-size:1.6rem; } #titleSection #titleInfoArea dl dt::after { content:'：'; } #titleSection #titleInfoArea dl dt:not(:first-child) { margin-left:1em; } /* ーーー Slick ーーー */ .slick-prev, .slick-next { position:absolute; z-index:10; top:50%; display:block; width:19px; height:37px; transform:translate(0, -50%); cursor:pointer; color:transparent; transform-origin:center; transition:all 0.3s ease-out; } .slick-prev { left:-30px; background:url(/products/img/rental_products_btn_prev.png) no-repeat center center; } .slick-next { right:-30px; background:url(/products/img/rental_products_btn_next.png) no-repeat center center; } @media(hover:hover){ .slick-prev:hover, .slick-next:hover { opacity:0.1; } } /* ーーー カラー ーーー */ .txtColorEast { color:#0066ff; font-weight:bold; } .txtColorWest { color:#ff0000; font-weight:bold; } /* ーーー ？マーク ーーー */ #contentsWrap a.quesMark { width:24px; height:24px; display:flex; justify-content:center; align-items:center; color:#ffffff; font-size:1.8rem; font-weight:bold; position:relative; } #contentsWrap h2.displayFlex a.quesMark { margin-left:0.5em; } #contentsWrap a.quesMark::after { content:''; display:block; width:100%; height:100%; background-color:#ea5504; border-radius:50%; position:absolute; z-index:-1; } @media(hover:hover){ #contentsWrap a.quesMark:hover { text-decoration:none; } #contentsWrap a.quesMark:hover::after { /* width:110%; height:110%; */ transform:scale(1.1); } } /* ーーー 下部エリア ーーー */ body .bottomSection { margin-top:50px; padding-top:50px; border-top:1px solid #cccccc; } body#detail .bottomSection { margin-top:100px; padding-top:40px; } body#rent .bottomSection { margin-top:60px; padding-top:60px; } body#cart .bottomSection { padding-top:0; border-top:none; } .rentalBtnsSection { display:flex; justify-content:center; gap:30px; } .rentalBtnsSection.type01 { flex-direction:row-reverse; } .rentalBtnsSection.type01 div { margin-top:0 !important; } .rentalBtnsSection.type01 div:last-of-type { /* margin-left:-40px; */ margin-right:65px; } .rentalBtnsSection.type02 { flex-direction:row-reverse; } .rentalBtnsSection.type02 div { margin-top:0 !important; } /*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 固有レイアウト ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*------------------------------ 製品一覧（index） -------------------------------*/ /* ーーー 冒頭 ーーー */ #descSection { display:flex; justify-content:center; padding:50px 40px; background-color:#f2f5f7; min-width:1300px; } #descSection *:not(.head > span) { font-family:'Noto sans JP'; } #descSection .head { font-size:4.5rem; font-weight:bold; /* color:#ffffff; */ display:flex; justify-content:center; align-items:center; } #descSection .head > span.material-icons-outlined { font-size:7rem; margin-left:0.3em; color:#ea5504; line-height:1; } #descSection .head + p { font-size:3rem; text-align:center; margin-top:25px; font-weight:bold; line-height:2.3; } /* #descSection .head + p span.fLarge { font-size:3.5rem; margin-inline:5px; padding:0 6px 2px; background-color:#ea5504; color:#ffffff; line-height:1; } */ #descSection .head + p + ul { margin-top:40px; } #descSection .head + p + ul + .linkBtn01 { margin-top:40px; } /* ーーー タイトル ーーー */ body#index #titleSection { margin-top:20px; margin-inline:auto; width:1300px; } /* ーーー 検索 ーーー */ #rentalProductsSearchSection { margin:30px auto 0; width:1300px; } #rentalProductsSearchSection #rentalProductsFilterBtn { text-align:center; } #rentalProductsSearchSection #rentalProductsFilterBtn a { background-color:#2a629a; padding:12px 40px; border-radius:6px; color:#ffffff; display:inline-block; position:relative; transition:background 0.3s ease-out; } #rentalProductsSearchSection #rentalProductsFilterBtn a::after { display:inline-block; content:''; width:8px; height:8px; border:1px solid; border-color:#ffffff #ffffff transparent transparent; margin-left:10px; position:absolute; top:30%; right:15px; transform:rotate(135deg); transition:all 0.2s ease-out; } #rentalProductsSearchSection #rentalProductsFilterBtn a.open { border-radius:6px 6px 0 0; } #rentalProductsSearchSection #rentalProductsFilterBtn a.open::after { top:45%; transform:rotate(-45deg); } @media(hover:hover){ #rentalProductsSearchSection #rentalProductsFilterBtn a:hover { text-decoration:none; background-color:#003285; } #rentalProductsSearchSection #rentalProductsFilterBtn a:hover::after { transform:rotate(135deg) scale(1.3); top:30%; } #rentalProductsSearchSection #rentalProductsFilterBtn a.open:hover::after { transform:rotate(-45deg) scale(1.3); top:45%; } } #rentalProductsSearchSection #rentalProductsSearchArea { background-color:#f2f5f7; padding:50px; display:none; } #rentalProductsSearchSection #rentalProductsSearchArea .searchItems { width:1100px; margin:0 auto; padding:20px 0 20px 20px; border-top:1px solid #cccccc; display:none; } #rentalProductsSearchSection #rentalProductsSearchArea .searchItems dl { display:flex; } #rentalProductsSearchSection #rentalProductsSearchArea .searchItems dl dt { font-weight:bold; width:80px; line-height:2; display:flex; align-items:center; } #rentalProductsSearchSection #rentalProductsSearchArea .searchItems dl dd { flex:1; display:flex; margin-left:30px; } #rentalProductsSearchSection #rentalProductsSearchArea .searchItems dl dd .searchItem { margin-right:30px; display:flex; align-items:center; } #rentalProductsSearchSection #rentalProductsSearchArea .searchItems dl dd .searchItem:last-child { margin-right:0; } #rentalProductsSearchSection #rentalProductsSearchArea .searchItems dl dd .searchItem .subTitle + * { margin-left:15px; } #rentalProductsSearchSection #rentalProductsSearchArea .searchItems dl dd .searchItem .subEnd { margin-left:5px; } #rentalProductsSearchSection #rentalProductsSearchArea .searchItems dl dd .searchItem .subTitle:has(+ input.insideMeasure:disabled), #rentalProductsSearchSection #rentalProductsSearchArea .searchItems dl dd .searchItem input.insideMeasure:disabled + .subEnd { opacity:0.5; } #rentalProductsSearchSection #rentalProductsSearchArea .searchItems.classification { display:flex; justify-content:center; border-top:none; padding-top:0; } #rentalProductsSearchSection #rentalProductsSearchArea .searchItems.classification dl { display:block; } #rentalProductsSearchSection #rentalProductsSearchArea .searchItems.classification dl:nth-child(2) { margin-left:60px; } #rentalProductsSearchSection #rentalProductsSearchArea .searchItems.classification dl dd { margin-top:10px; } #rentalProductsSearchSection #rentalProductsSearchArea .searchItems.classification dl dd { display:block; margin-left:0; } #rentalProductsSearchSection #rentalProductsSearchArea .searchItems.classification dl dd .note { margin-top:5px; } #rentalProductsSearchSection #rentalProductsSearchArea .searchBtns { width:1100px; margin:0 auto; border-top:1px solid #cccccc; } #rentalProductsSearchSection #rentalProductsSearchArea .searchBtns div { margin-top:40px; display:flex; justify-content:center; } #rentalProductsSearchSection #rentalProductsSearchArea .searchBtns div > div { margin-top:0; } #rentalProductsSearchSection #rentalProductsSearchArea .searchBtns div > div:nth-child(2) { margin-left:20px; } /* ーーー 結果一覧 ーーー */ #rentalProductsListSection { margin-inline:auto; width:1300px; } /* 切り替えボタン */ #rentalProductsListSection #rentalProductsListBtnArea { display:flex; justify-content:flex-end; padding:20px 0; } #rentalProductsListSection #rentalProductsListBtnArea ul { display:flex; } #rentalProductsListSection #rentalProductsListBtnArea ul li a { padding:10px 15px; border-radius:5px; display:block; background-color:#f2f5f7; } #rentalProductsListSection #rentalProductsListBtnArea ul li.current a { background-color:#666666; background-color:#666666; color:#ffffff; } #rentalProductsListSection #rentalProductsListBtnArea ul li:nth-child(1) a { border-top-right-radius:0; border-bottom-right-radius:0; } #rentalProductsListSection #rentalProductsListBtnArea ul li:nth-child(2) a { border-top-left-radius:0; border-bottom-left-radius:0; } #rentalProductsListSection #rentalProductsListBtnArea ul li a span { position:relative; padding-bottom:3px; } #rentalProductsListSection #rentalProductsListBtnArea ul li a span::before { background-color:#000000; content:''; width:100%; height:2px; position:absolute; left:0; bottom:0; margin:auto; transform-origin:right top; transform:scale(0, 1); transition:transform 0.2s ease-out; } #rentalProductsListSection #rentalProductsListBtnArea ul li.current a span::before { background-color:#ffffff; } @media(hover:hover){ #rentalProductsListSection #rentalProductsListBtnArea ul li a:hover { text-decoration:none; } #rentalProductsListSection #rentalProductsListBtnArea ul li a:hover span::before { transform-origin:left top; transform:scale(1); } } /* タイル表示 */ #rentalProductsListSection #rentalProductsListArea.typeTile { display:flex; flex-wrap:wrap; width:1160px; margin:10px auto 0; } #rentalProductsListSection #rentalProductsListArea.typeTile .product { /* width:320px; */ width:33.33%; padding:33px 33px 70px 33px; display:flex; flex-direction:column-reverse; justify-content:flex-end; position:relative; } #rentalProductsListSection #rentalProductsListArea.typeTile .product.head { display:none; } #rentalProductsListSection #rentalProductsListArea.typeTile .product .productImg { width:320px; height:200px; text-align:center; } #rentalProductsListSection #rentalProductsListArea.typeTile .product .productImg img { object-fit:scale-down; width:100%; height:100%; } #rentalProductsListSection #rentalProductsListArea.typeTile .product .productInfo { margin-top:20px; } #rentalProductsListSection #rentalProductsListArea.typeTile .product .productInfo h2 { margin-bottom:0; text-align:left; color:#000000; font-size:1.8rem; } #rentalProductsListSection #rentalProductsListArea.typeTile .product .productInfo h2 span { display:inline-block; font-size:100%; color:#000000; letter-spacing:0.03em; margin-top:0; } #rentalProductsListSection #rentalProductsListArea.typeTile .product .productInfo p > span, #rentalProductsDetailSection #detailInfoArea .product .productInfo p > span { display:inline-block; } #rentalProductsListSection #rentalProductsListArea.typeTile .product .productInfo .txtType:nth-of-type(1), #rentalProductsDetailSection #detailInfoArea .product .productInfo .txtType:nth-of-type(1) { margin-top:5px; } #rentalProductsListSection #rentalProductsListArea.typeTile .product .productInfo .txtType > span:nth-child(1)::after, #rentalProductsDetailSection #detailInfoArea .product .productInfo .txtType > span:nth-child(1):after { content:'：'; } #rentalProductsListSection #rentalProductsListArea.typeTile .product .productInfo p.tableType, #rentalProductsDetailSection #detailInfoArea .product .productInfo p.tableType { border-bottom:1px solid #cccccc; display:flex; margin-top:0; } #rentalProductsListSection #rentalProductsListArea.typeTile .product .productInfo p.tableType:nth-of-type(1), #rentalProductsDetailSection #detailInfoArea .product .productInfo p.tableType:nth-of-type(1) { margin-top:20px; border-top:1px solid #cccccc; } #rentalProductsListSection #rentalProductsListArea.typeTile .product .productInfo p.tableType > span, #rentalProductsDetailSection #detailInfoArea .product .productInfo p.tableType > span { padding:10px; } #rentalProductsListSection #rentalProductsListArea.typeTile .product .productInfo p.tableType > span:nth-child(1), #rentalProductsDetailSection #detailInfoArea .product .productInfo p.tableType > span:nth-child(1) { background-color:#f2f5f7; width:11em; } #rentalProductsListSection #rentalProductsListArea.typeTile .product .productInfo p.tableType > span:nth-child(2), #rentalProductsDetailSection #detailInfoArea .product .productInfo p.tableType > span:nth-child(2) { width:calc(100% - 11em); } #rentalProductsListSection #rentalProductsListArea.typeTile .product .productInfo p.linkBtn01 { position:absolute; bottom:0; left:0; width:100%; padding:0 33px; margin-top:0; } #rentalProductsListSection #rentalProductsListArea.typeTile .product .productInfo p.linkBtn01 a { display:block; } /* ーーー リスト表示 ーーー */ #rentalProductsListSection #rentalProductsListArea.typeList { /* border-width:1px 0 0 1px; border-color:#000000; */ border-top:1px solid #cccccc; border-style:solid; } #rentalProductsListSection #rentalProductsListArea.typeList .product .productImg { display:none; } #rentalProductsListSection #rentalProductsListArea.typeList .product .productInfo { display:flex; } #rentalProductsListSection #rentalProductsListArea.typeList .product .productInfo > * { padding:7px; border-width:0 0 1px 0; border-color:#cccccc; border-style:solid; display:flex; justify-content:center; flex-direction:column; margin-top:0; } #rentalProductsListSection #rentalProductsListArea.typeList .product.head .productInfo > * { background-color:#f2f5f7; text-align:center; font-weight:bold; /* position:sticky; left:0; top:0; */ } #rentalProductsListSection #rentalProductsListArea.typeList .product .productInfo * > span:nth-child(1) { display:none; } #rentalProductsListSection #rentalProductsListArea.typeList .product .productInfo h2 { margin-bottom:0; text-align:left; color:#000000; font-size:1.4rem; font-weight:normal; } #rentalProductsListSection #rentalProductsListArea.typeList .product .productInfo h2 > span:nth-child(1) { display:inline-block; font-size:100%; color:#000000; margin-top:0; } #rentalProductsListSection #rentalProductsListArea.typeList .product .productInfo > *:nth-child(1) { width:85px; } #rentalProductsListSection #rentalProductsListArea.typeList .product .productInfo > *:nth-child(2) { width:130px; } #rentalProductsListSection #rentalProductsListArea.typeList .product .productInfo > *:nth-child(3) { width:130px; } #rentalProductsListSection #rentalProductsListArea.typeList .product .productInfo > *:nth-child(4) { width:130px; } #rentalProductsListSection #rentalProductsListArea.typeList .product .productInfo > *:nth-child(5) { width:85px; } #rentalProductsListSection #rentalProductsListArea.typeList .product .productInfo > *:nth-child(6) { width:110px; } #rentalProductsListSection #rentalProductsListArea.typeList .product .productInfo > *:nth-child(7) { width:110px; } #rentalProductsListSection #rentalProductsListArea.typeList .product .productInfo > *:nth-child(8) { width:130px; } #rentalProductsListSection #rentalProductsListArea.typeList .product .productInfo > *:nth-child(9) { width:130px; } #rentalProductsListSection #rentalProductsListArea.typeList .product .productInfo > *:nth-child(10) { width:65px; } #rentalProductsListSection #rentalProductsListArea.typeList .product .productInfo > *:nth-child(11) { width:97px; } #rentalProductsListSection #rentalProductsListArea.typeList .product .productInfo > *:nth-child(12) { width:97px; } #rentalProductsListSection #rentalProductsListArea.typeList .product .productInfo p.linkBtn01 { margin-top:0; } #rentalProductsListSection #rentalProductsListArea.typeList .product .productInfo p.linkBtn01 a { min-width:initial; } /* ページャー */ #rentalProductsListSection .pagerArea { display:flex; justify-content:center; align-items:center; margin-top:80px; } #rentalProductsListSection .pagerArea .prevBtn { margin-right:10px; } #rentalProductsListSection .pagerArea .nextBtn { margin-left:10px; } #rentalProductsListSection .pagerArea .prevBtn a, #rentalProductsListSection .pagerArea .nextBtn a { font-weight:bold; transition:opacity 0.3s ease-out; } #rentalProductsListSection .pagerArea .prevBtn a::before, #rentalProductsListSection .pagerArea .nextBtn a::before { font-family:'Material Symbols Outlined'; display:block; font-size:2.8rem; font-variation-settings:'FILL' 0, 'wght' 100; } #rentalProductsListSection .pagerArea .prevBtn a::before { content:'\e5c4'; } #rentalProductsListSection .pagerArea .nextBtn a::before { content:'\e5c8'; } @media(hover:hover){ #rentalProductsListSection .pagerArea .prevBtn a:hover, #rentalProductsListSection .pagerArea .nextBtn a:hover { text-decoration:none; opacity:0.7; } } #rentalProductsListSection .pagerArea ol { display:flex; margin-top:0; } #rentalProductsListSection .pagerArea ol li { margin-inline:10px; } #rentalProductsListSection .pagerArea ol li a { display:block; line-height:1; padding:10px; transition:opacity 0.3s ease-out; } #rentalProductsListSection .pagerArea ol li.current a { background-color:#003285; color:#ffffff; font-weight:bold; } @media(hover:hover){ #rentalProductsListSection .pagerArea ol li a:hover { text-decoration:none; opacity:0.7; } } /*------------------------------ 製品詳細（detail） -------------------------------*/ #rentalProductsDetailSection { display:flex; justify-content:space-between; width:1200px; margin:50px auto 0; } #rentalProductsDetailSection #detailImgArea { width:610px; margin-top:45px; } #rentalProductsDetailSection #detailImgArea #detailImgInner img { width:100%; } #rentalProductsDetailSection #detailImgArea #detailImgThumbBox { margin-top:100px; } #rentalProductsDetailSection #detailImgArea #detailImgThumbBox .thumbnailImg { cursor:pointer; margin:0 26.5px; width:100px; height:100px; transition:opacity 0.3s ease-out; } #rentalProductsDetailSection #detailImgArea #detailImgThumbBox .thumbnailImg img { object-fit:scale-down; width:100%; height:100%; } #rentalProductsDetailSection #detailImgArea #detailImgThumbBox .thumbnailImg.slick-current { position:relative; } #rentalProductsDetailSection #detailImgArea #detailImgThumbBox .thumbnailImg.slick-current::after { content:''; display:block; width:100%; height:100%; border:2px solid #6382b4; position:absolute; left:0; top:0; box-sizing:border-box; } @media(hover:hover){ #rentalProductsDetailSection #detailImgArea #detailImgThumbBox .thumbnailImg:hover { opacity:0.7; } } #rentalProductsDetailSection #detailInfoArea { width:510px; } #rentalProductsDetailSection #detailInfoArea .detailInfoInner { margin-top:15px; } #rentalProductsDetailSection #detailInfoArea .product .productInfo p.tableType > span { padding:15px; } #rentalProductsDetailSection #detailInfoArea .product .productInfo p.tableType > span:nth-child(1) { width:10em; } #rentalProductsDetailSection #detailInfoArea .product .productInfo p.tableType > span:nth-child(2) { width:calc(100% - 10em); } #rentalProductsDetailSection #detailInfoArea .product .productInfo.fee p.tableType > span:nth-child(1) { width:21em; display:flex; align-items:center; } #rentalProductsDetailSection #detailInfoArea .product .productInfo.fee p.tableType > span:nth-child(2) { /* width:calc(100% - 21em); */ display:flex; align-items:center; font-weight:bold; color:#ea5504; flex:1; font-size:1.8rem; } #rentalProductsDetailSection #detailInfoArea p.linkBtn02 { margin-top:40px; } #rentalProductsDetailSection #detailInfoArea p.linkBtn02 a { font-size:1.6rem; width:70%; padding:20px; } /*------------------------------ 製品レンタル（rent） -------------------------------*/ #rentalProductsRentSection { display:flex; justify-content:space-between; flex-wrap:wrap; width:1200px; margin:50px auto 0; } #rentalProductsRentSection #rentTitleArea { padding:20px 50px 0 0; width:600px; } #rentalProductsRentSection #rentTitleArea #rentTitleInner { display:flex; justify-content:space-between; /* align-items:center; */ } #rentalProductsRentSection #rentTitleArea #rentImgInner img { width:100%; } #rentalProductsRentSection #rentTitleArea #rentTitleInner #rentTitleBox { width:calc(100% - 10em); } #rentalProductsRentSection #rentTitleArea #rentTitleInner #rentTitleBox dl { display:flex; flex-wrap:wrap; font-size:1.8rem; font-weight:bold; } #rentalProductsRentSection #rentTitleArea #rentTitleInner #rentTitleBox dl dt { width:4.5em; text-align:right; } #rentalProductsRentSection #rentTitleArea #rentTitleInner #rentTitleBox dl dt::after { content:'：'; display:inline-block; } #rentalProductsRentSection #rentTitleArea #rentTitleInner #rentTitleBox dl dd { width:calc(100% - 4.5em); } #rentalProductsRentSection #rentTitleArea #rentTitleInner #rentRightBox { display:flex; margin-top:10px; } #rentalProductsRentSection #rentTitleArea #rentTitleInner #rentRightBox .txtStock { font-size:1.6rem; font-weight:bold; } #rentalProductsRentSection #rentTitleArea #rentTitleInner #rentRightBox .txtStock span { color:#ff0000; } #rentalProductsRentSection #rentTitleArea #rentTitleInner #rentRightBox a.quesMark { margin-left:10px; } #rentalProductsRentSection #rentTitleArea #rentImgInner { margin-top:50px; } #rentalProductsRentSection #rentInfoArea { border-left:1px solid #888888; padding:20px 0 0 50px; width:600px; } #rentalProductsRentSection #rentInfoArea #rentInfoInner .rentalPeriodBox { display:flex; } #rentalProductsRentSection #rentInfoArea #rentInfoInner .rentalPeriodBox .rentalPeriodUnit { margin-top:15px; } #rentalProductsRentSection #rentInfoArea #rentInfoInner .rentalPeriodBox .rentalPeriodUnit:not(:first-of-type) { margin-left:15px; } #rentalProductsRentSection #rentInfoArea #rentInfoInner .rentalPeriodBox .rentalPeriodUnit label, #rentalProductsRentSection #rentInfoArea #rentInfoInner .rentalPeriodBox .rentalPeriodUnit input { display:block; width:100%; } #rentalProductsRentSection #rentInfoArea #rentInfoInner .rentalPeriodBox .rentalPeriodUnit input { margin-top:10px; width:145px; } #rentalProductsRentSection #rentInfoArea #rentInfoInner .rentalPeriodBox .rentalPeriodUnit:last-of-type { position:relative; padding-left:30px; } #rentalProductsRentSection #rentInfoArea #rentInfoInner .rentalPeriodBox .rentalPeriodUnit:last-of-type::before { content:'⇒'; display:inline-block; position:absolute; left:0; top:calc(50% + 11px); transform:translateY(-50%); } #rentalProductsRentSection #rentInfoArea #rentInfoInner .rentalPeriodBox .rentalPeriodUnit:last-of-type input { background-color:#f2f5f7 !important; color:#000000; border:none; } /* ーーー 有料オプション ーーー */ #rentalProductsRentSection #rentPaidOptionArea { margin-top:40px; padding-top:40px; border-top:1px solid #888888; width:100%; } #rentalProductsRentSection #rentPaidOptionArea table.thColorTable { margin-top:30px; table-layout:fixed; } #rentalProductsRentSection #rentPaidOptionArea table.thColorTable th:nth-child(1) { width:60px; text-align:center; } #rentalProductsRentSection #rentPaidOptionArea table.thColorTable th:nth-child(2) { width:360px; } #rentalProductsRentSection #rentPaidOptionArea table.thColorTable th:nth-child(3) { width:180px; text-align:right; } #rentalProductsRentSection #rentPaidOptionArea table.thColorTable th:nth-child(4) { text-align:center; } #rentalProductsRentSection #rentPaidOptionArea table.thColorTable th:nth-child(5) { width:360px; } #rentalProductsRentSection #rentPaidOptionArea table.thColorTable td:nth-child(1) { text-align:center; } #rentalProductsRentSection #rentPaidOptionArea table.thColorTable td:nth-child(1) input { margin:4px 0 0; } #rentalProductsRentSection #rentPaidOptionArea table.thColorTable td:nth-child(3) { text-align:right; } #rentalProductsRentSection #rentPaidOptionArea table.thColorTable td:nth-child(4) { text-align:right; } #rentalProductsRentSection #rentPaidOptionArea table.thColorTable td:nth-child(4) span, #rentalProductsRentSection #rentPaidOptionArea table.thColorTable td:nth-child(4) input { width:4em; text-align:center; display:inline-block; margin-right:0.5em; } #rentalProductsRentSection #rentPaidOptionArea table.thColorTable td:nth-child(5) { padding-right:0; } /* ーーー 料金表示 ーーー */ #rentalPriceSection { width:1200px; margin:50px auto 0; } #rentalPriceSection #rentalPriceBtnArea { display:flex; justify-content:center; position:relative; } #rentalPriceSection #rentalPriceBtnArea div:nth-of-type(2) { position:absolute; left:50%; top:50%; transform:translate(125px, -50%); } #rentalPriceSection #rentalPriceBtnArea .linkBtn01 { margin-top:0; } .rentalPriceShowArea { background-color:#f2f5f7; padding:45px; margin:20px 50px 0; } body#rent .rentalPriceShowArea { display:none; } .rentalPriceShowArea .pageInner { margin-inline:25px 0; } .rentalPriceShowArea table.thLineTable { table-layout:fixed; } .rentalPriceShowArea table.thLineTable th:nth-child(1) { width:300px; } .rentalPriceShowArea table.thLineTable .txtColor { color:#ea5504; font-weight:bold; } .rentalPriceShowArea h3 { margin-top:20px; font-weight:bold; } .rentalPriceShowArea .rentalPriceShowInner { display:flex; justify-content:space-between; margin-top:20px; width:680px; } .rentalPriceShowArea .rentalPriceShowInner .rentalPriceShowBox { width:320px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #cdcdcd; padding:0 15px 10px; } .rentalPriceShowArea .rentalPriceShowInner .rentalPriceShowBox div:nth-of-type(2) { color:#ea5504; margin-left:10px; font-weight:bold; font-size:1.8rem; } .rentalPriceShowArea #rentalPriceTotalInner { margin-top:10px; display:flex; justify-content:flex-end; } .rentalPriceShowArea #rentalPriceTotalInner #rentalPriceTotalBox #rentalPriceTotalUnit { display:flex; align-items:center; padding-bottom:10px; border-bottom:1px solid #cdcdcd; } .rentalPriceShowArea #rentalPriceTotalInner #rentalPriceTotalBox #rentalPriceTotalUnit div { font-size:1.6rem; color:#ea5504; font-weight:bold; margin-left:20px; } .rentalPriceShowArea #rentalPriceTotalInner #rentalPriceTotalBox #rentalPriceTotalUnit div:nth-of-type(1) { font-size:1.8rem; } .rentalPriceShowArea #rentalPriceTotalInner #rentalPriceTotalBox #rentalPriceTotalUnit div:last-of-type { margin-left:30px; } /*------------------------------ カート内容確認（cart） -------------------------------*/ .rentalProductsCartSection { margin:50px 50px 0; border:1px solid #cccccc; padding:50px; } .rentalProductsCartSection p.subT { font-size:1.6rem; font-weight:bold; border-bottom:1px solid #cccccc; padding-bottom:10px; margin-bottom:30px; } .rentalProductsCartSection p.subT:not(:first-child) { margin-top:50px !important; } .rentalProductsCartSection .rentalCartArea .rentalCartTitleInner { display:flex; justify-content:space-between; } .rentalProductsCartSection .rentalCartArea .rentalCartTitleInner .rentalCartImgBox { width:140px; } .rentalProductsCartSection .rentalCartArea .rentalCartTitleInner .rentalCartImgBox img { width:100%; } .rentalProductsCartSection .rentalCartArea .rentalCartTitleInner .rentalCartTxtBox { width:700px; } .rentalProductsCartSection .rentalCartArea .rentalCartTitleInner .rentalCartTxtBox dl { display:flex; flex-wrap:wrap; font-size:1.6rem; } .rentalProductsCartSection .rentalCartArea .rentalCartTitleInner .rentalCartTxtBox dl dt { width:7em; font-weight:bold; margin-top:3px; } .rentalProductsCartSection .rentalCartArea .rentalCartTitleInner .rentalCartTxtBox dl dt:first-child { margin-top:0; } .rentalProductsCartSection .rentalCartArea .rentalCartTitleInner .rentalCartTxtBox dl dd { width:calc(100% - 8em); margin:3px 0 0 1em; } .rentalProductsCartSection .rentalCartArea .rentalCartTitleInner .rentalCartTxtBox dl dd.hasAttTxt { display:flex; } .rentalProductsCartSection .rentalCartArea .rentalCartTitleInner .rentalCartTxtBox dl dd.hasAttTxt span { display:inline-block; padding:5px; line-height:1; color:#ffffff; font-weight:bold; background-color:#ff0000; margin-left:1em; } .rentalProductsCartSection .rentalCartArea .rentalCartTitleInner .rentalCartTxtBox dl dt:first-child + dd { margin-top:0; } .rentalProductsCartSection .rentalCartArea .rentalCartTitleInner .rentalCartBtnBox { width:210px; } .rentalProductsCartSection .rentalCartArea .rentalCartTitleInner .rentalCartBtnBox > div { margin-top:0 !important; } .rentalProductsCartSection .rentalCartArea .rentalCartOneColOptionInner { margin-top:50px; } .rentalProductsCartSection .rentalCartArea .rentalCartTwoColOptionInner { margin-top:50px; display:flex; justify-content:space-between; } .rentalProductsCartSection .rentalCartArea .rentalCartTwoColOptionInner .rentalCartTwoColOptionLeftBox { width:360px; } .rentalProductsCartSection .rentalCartArea .rentalCartTwoColOptionInner .rentalCartTwoColOptionRightBox { width:685px; } .rentalProductsCartSection .rentalCartArea .rentalCartTwoColOptionInner * > h2:not(:first-child) { margin-top:30px; } .rentalProductsCartSection .rentalCartArea .col01 { width:200px !important; } .rentalProductsCartSection .rentalCartArea .col02 { width:180px !important; } .rentalProductsCartSection .rentalPriceShowArea { margin:40px 0 0; } /*------------------------------ 申込者情報入力（inquiry） -------------------------------*/ .rentalProductsInquirySection { margin:30px 30px 0; } .rentalProductsInquirySection:first-of-type { margin-top:50px; } .rentalProductsInquirySection h2 { font-size:1.8rem !important; } .rentalProductsInquirySection h2 span.txtSmall { font-size:1.4rem !important; font-weight:normal; } .rentalProductsInquirySection .rentalProductsInquiryArea { padding:30px; } .rentalProductsInquirySection .rentalProductsInquiryArea#inq02 { display:none; } .rentalProductsInquirySection .rentalProductsInquiryArea.bg { margin-top:20px; background-color:#f2f5f7; } .rentalProductsInquirySection .rentalProductsInquiryArea .stType input[type="checkbox"]#chkPrivacyPolicy + label { width:auto; } /*------------------------------ 内容確認（confirm） -------------------------------*/ body#cart.step3 .rentalProductsCartSection .rentalCartArea .rentalCartTitleInner .rentalCartTxtBox { width:calc(100% - 160px); margin-left:20px; } .detailBox { background-color:#ffffff; /* margin-top:30px; padding:50px 40px; */ display:flex; justify-content:space-between; } .detailBox h3 { font-size:1.6rem; font-weight:bold; } .detailBox h3:not(:first-child) { margin-top:30px; } .detailBox h3 + * { margin-top:20px; } .detailBox .detailInfoUnit, .detailBox .detailDeliUnit { width:50%; } .detailBox .detailInfoUnit { padding-right:40px; } .detailBox .detailDeliUnit { padding-left:40px; border-left:1px solid #cccccc; } body#cart.step3 #contentsWrap table.thColorTable th { font-weight:normal; } /*------------------------------ 申込完了（confirm） -------------------------------*/ #completionSection { width:1100px; margin:0 auto; } #completionSection #completionMessageArea { padding:50px; text-align:center; } #completionSection #completionMessageArea h2 { font-size:2rem; } #completionSection #completionMessageArea p.receptNo { font-size:1.4rem; display:flex; justify-content:center; align-items:center; } #completionSection #completionMessageArea p.receptNo span { font-size:2.2rem; color:#ea5504; } #completionSection #completionMessageArea p { line-height:1.8; } #completionSection .completionEtcArea.bgBdBox, #completionSection .completionEtcArea.bgColorBox { padding:40px 50px; margin-top:30px; } #completionSection .completionEtcArea h3 { font-size:1.6rem; font-weight:bold; } #completionSection .completionEtcArea h4 { font-weight:bold; margin-top:20px; }