img{ border:none; vertical-align:bottom; -webkit-backface-visibility: hidden; width: 100%; height: auto;} ul{ list-style:none; margin:0; padding:0;} p{ margin:0; line-height: 1.944444; color: #1a1a1a; font-weight: 400; letter-spacing: 0.012em;} body{ margin:0 auto; padding:0; font-display: auto; font-family: 'Noto Sans JP', Meiryo, sans-serif; -webkit-font-smoothing: antialiased !important; font-smoothing: antialiased !important; opacity: 0; animation: simpleFadein 0.7s ease forwards;} a{ transition: opacity 0.3s ease-out; text-decoration: underline;} /* IE8+, Chrome */ a{ outline: 0;} /* Firefox */ a::-moz-focus-inner, a::-moz-focus-inner { border: 0;} :root { --green: #3AA566; --deepgreen: #008816; --beige-pink: #F3E9EE; --comp-220: 29.7297297297297vw; --comp-200: 27.027027027027vw; --comp-195: 26.3513513513513vw; --comp-190: 25.6756756756756vw; --comp-185: 25vw; --comp-180: 24.3243243243243vw; --comp-175: 23.6486486486486vw; --comp-170: 22.9729729729729vw; --comp-165: 22.2972972972972vw; --comp-160: 21.6216216216216vw; --comp-155: 20.9459459459459vw; --comp-150: 20.2702702702702vw; --comp-145: 19.5945945945945vw; --comp-140: 18.9189189189189vw; --comp-135: 18.2432432432432vw; --comp-130: 17.5675675675675vw; --comp-125: 16.8918918918918vw; --comp-120: 16.2162162162162vw; --comp-115: 15.5405405405405vw; --comp-110: 14.8648648648648vw; --comp-105: 14.1891891891891vw; --comp-100: 13.5135135135135vw; --comp-95: 12.83783783783783vw; --comp-90: 12.1621621621621vw; --comp-85: 11.48648648648648vw; --comp-80: 10.8108108108108vw; --comp-75: 10.13513513513513vw; --comp-70: 9.459459459459459vw; --comp-65: 8.738738738738738vw; --comp-60: 8.108108108108108vw; --comp-55: 7.432432432432432vw; --comp-50: 6.756756756756756vw; --comp-45: 6.081081081081081vw; --comp-40: 5.405405405405405vw; --comp-35: 4.729729729729729vw; --comp-30: 4.054054054054054vw; --comp-25: 3.378378378378378vw; --comp-20: 2.702702702702702vw; --comp-15: 2.027027027027027vw; --comp-10: 1.351351351351351vw; --comp-5: 0.6756756756756756vw; --comp-56: 7.567567567567567vw; --comp-54: 7.297297297297297vw; --comp-52: 7.027027027027027vw; --comp-36: 4.864864864864864vw; --comp-32: 4.324324324324324vw; --comp-28: 3.783783783783783vw; --comp-26: 3.513513513513513vw; --comp-24: 3.243243243243243vw; --comp-22-5: 3.0405405405405vw; --comp-22: 2.972972972972972vw; --comp-21: 2.837837837837837vw; --comp-18: 2.432432432432432vw; --comp-17-5: 2.3648648648648vw; --comp-17: 2.297297297297297vw; --comp-16: 2.162162162162162vw; --comp-14: 1.891891891891891vw; --comp-9: 1.216216216216216vw; --lead-fontsize: 18px; } .fs-60{ font-size: 60%;} .fs-70{ font-size: 70%;} .fs-80{ font-size: 80%;} .fs-90{ font-size: 90%;} .fw-500{ font-weight: 500;} .indent-type1{ padding-left: 2.5em; text-indent: -2.5em; display: inline-block;} .indent-type2{ padding-left: 1em; text-indent: -1em; display: inline-block;} .line-through{ text-decoration: line-through;} .font-red{ color: #D63333 !important;} .red-line{ text-decoration: line-through; text-decoration-color: #D63333;} .fadein{ opacity : 0;} .fadein.scrollin { animation: fadeInUp 0.8s ease forwards; animation-delay: 0.2s;} /* ----------------------------------- CONTENTS ----------------------------------- */ /*-- CONTENTS MAIN --*/ #container{ width: 100%; min-width: 1200px; margin: 0 auto; overflow: hidden; display: block;} #content{ width: 100%; margin: 0 auto; box-sizing: content-box; } section{ width: 100%; min-width: 1200px; margin: 0 auto; padding: 120px 0;} section.bg-green{ background-color: var(--green);} section.bg-white{ background-color: #fff;} section > *{ width: 960px; margin-left: auto; margin-right: auto;} section h2{ margin: 0 auto;} section h2 img{ margin: 0 auto; display: block; width: 640px; max-width: 100%;} section h2:has( + .lead){ margin-bottom: 30px; } section h2:not(:has( + .lead)){ margin-bottom: 60px; } section .lead{ text-align: center; font-size: var(--lead-fontsize); letter-spacing: 0.04em; line-height: 1.944444; margin: 0 auto 60px;} section .map{ position: relative; height: 540px;} section .map iframe{ width: 100%; height: 100%; position: absolute; top: 0; left: 0;} section .greenTtl{ font-weight: 700; font-size: 24px; margin-bottom: 35px; color: var(--deepgreen); letter-spacing: 0.025em; line-height: 1;} section .blackTtl{ font-weight: 700; font-size: 24px; margin-bottom: 35px; letter-spacing: 0.025em; line-height: 1;} section .greenTtl:last-child, section .blackTtl:last-child{ margin-bottom: 0;} /*-- scroll --*/ .scrollBox{ background-color: #fff; padding: 60px 50px; box-sizing: border-box;} .scrollBox .innerScrollBox{ overflow-y: auto; max-height: 300px;} .fadeInDown { opacity: 0;} .fadeInDown.run { animation: fadeInDown 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;} .fadeOutDown { opacity: 1;} .fadeOutDown.run { animation: fadeOutDown 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;} @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-30px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes fadeOutDown { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(50px); } } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* ----------------------------------- FOOTER ----------------------------------- */ footer{ background-color: var(--beige-pink); padding: 80px 0; width: 100%;} footer > *{ max-width: 90%; margin-left: auto; margin-right: auto; text-align: center;} footer > *:last-child{ margin-bottom: 0;} footer p{ font-size: 14px; line-height: 1.8; margin: 0 auto 25px;} footer p small{ font-size: 12px;} /* ----------------------------------- CONTENT ----------------------------------- */ /*-- carshare-main --*/ #carshare-main{ position: relative; background-color: var(--beige-pink); min-height: 750px; padding-top: 120px;} #carshare-main::before{ content: ""; display: block; width: 920px; height: 720px; clip-path: polygon(0 0, 100% 0, 50% 100%); background-color: #fff; position: absolute; top: 0; right: calc(50% - 120px);} #carshare-main .innerMain{ display: flex; width: 1200px; margin: 0 auto; height: 100%; gap: 20px;} #carshare-main .ttlBox{ width: 520px; z-index: 1;} #carshare-main .ttlBox h1{ width: 350px; margin: 0 auto; position: relative; z-index: 1;} #carshare-main .ttlBox h1 img{ opacity: 0; transform: translateX(-30px); animation: slideFadein 0.8s ease forwards; animation-delay: 0.3s; display: block;} #carshare-main figure{ width: 520px; position: absolute; bottom: -90px;} #carshare-main figure img{ opacity: 0; transform: translateX(-30px); animation: slideFadein 0.8s ease forwards; animation-delay: 0.8s; } #carshare-main .textBox{ width: 560px; position: relative; z-index: 1;} #carshare-main .textBox .catch{ font-weight: 800; font-size: 32px; line-height: 1; margin-bottom: 50px; letter-spacing: 0.2em; overflow: hidden;} #carshare-main .textBox .catch span{ opacity: 0; transform: translateX(-30px); animation: slideFadein 0.8s ease forwards; animation-delay: 1.3s; display: inline-block;} #carshare-main .textBox .lead{ font-weight: 700; font-size: 18px; line-height: 2.5; letter-spacing: 0.15em; margin-bottom: 20px;} #carshare-main .textBox .caution{ font-weight: 400; font-size: 14px; line-height: 1.4; letter-spacing: 0.025em;} #carshare-main .textBox .catch.fadein, #carshare-main .textBox .catch.fadein.scrollin{ animation: none; opacity: 1;} /*-- carshare-news --*/ #carshare-news{ padding-top: 150px;} #carshare-news .scrollBox .innerScrollBox dl{ border-bottom: 1px solid var(--deepgreen); display: flex; justify-content: space-between; padding: 32px 0; box-sizing: border-box; width: calc(100% - 15px); line-height: 1.9; font-size: 18px;} #carshare-news .scrollBox .innerScrollBox dl:first-child{ border-top: 1px solid var(--deepgreen);} #carshare-news .scrollBox .innerScrollBox dl dt{ width: 140px; padding-right: 20px; box-sizing: border-box; font-weight: 400;} #carshare-news .scrollBox .innerScrollBox dl dd{ flex: 1;} /*-- carshare-counter --*/ #carshare-counter figure{ display: block; margin-top: 80px; } /*-- carshare-flow --*/ #carshare-flow .flowBox{ background-color: #fff; box-sizing: border-box; padding: 60px 50px 80px; } #carshare-flow .flowBox .innerFlowBox{ position: relative; display: flex; flex-wrap: wrap; gap: 75px; padding-bottom: 85px;} #carshare-flow .flowBox .innerFlowBox::before{ content: ""; display: block; width: 1px; height: 100%; position: absolute; top: 0; left: 50px; background-color: var(--green);} #carshare-flow .flowBox dl{ display: flex; justify-content: flex-end; width: 100%; position: relative; z-index: 1;} #carshare-flow .flowBox dl dt{ width: 115px; margin-right: 25px;} #carshare-flow .flowBox dl dd{ width: 720px;} #carshare-flow .flowBox dl:not(:has(> dt))::before{ content: ""; display: block; width: 70px;; height: 1px; background-color: var(--green); margin-right: 20px; margin-top: 10px;} #carshare-flow .flowBox dl dd p{ font-size: 18px;} #carshare-flow .flowBox dl dd .caution{ font-size: 16px; margin-top: 30px;} #carshare-flow .flowBox dl dd small{ font-size: 12px; transform: translateY(-3px); display: inline-block;} #carshare-flow .flowBox dl dd h4{ margin-top: 80px;} #carshare-flow .flowBox .band{ background-color: var(--beige-pink); font-weight: 700; font-size: 24px; line-height: 1; text-align: center; box-sizing: border-box; padding: 40px; width: 100%; position: relative; z-index: 1;} #carshare-flow .flowBox .innerFlowBox + *{ margin-top: -10px;} /*-- carshare-flow --*/ #carshare-booking .calendarBox{ margin-top: 75px;} #carshare-booking .calendarBox h3{ text-align: center; font-size: 32px; font-weight: 800; color: var(--deepgreen); letter-spacing: 0.025em; margin: 0 auto 35px; line-height: 1;} #carshare-booking .calendarBox .lead{ margin-bottom: 35px;} #carshare-booking .calendarBox iframe{ width: 100%; max-width: 100%;} #carshare-booking .attentionBox{ margin-top: 120px; } #carshare-booking .attentionBox > p{ font-size: 18px; margin-bottom: 80px;} #carshare-booking .attentionBox .innerAttentionBox h4{ font-size: 20px; font-weight: 700; margin: 0 auto 30px; letter-spacing: 0.025em;} #carshare-booking .attentionBox .innerAttentionBox .cautionList{ font-size: 16px; line-height: 1.875; display: flex; flex-wrap: wrap; gap: 30px;} #carshare-booking .attentionBox .innerAttentionBox .cautionList li{ width: 100%;} /*-- carshare-documents --*/ #carshare-documents .innerScrollBox{ max-height: 515px;} #carshare-documents .innerScrollBox .documentsBox:not(:first-child){ margin-top: 50px;} #carshare-documents .innerScrollBox h3{ font-size: 18px; font-weight: 700; letter-spacing: 0.025em; margin-bottom: 30px; line-height: 1.9444444;} #carshare-documents .innerScrollBox h4{ font-size: 16px; font-weight: 700; letter-spacing: 0.025em; margin: 25px auto 10px; line-height: 2.1875;} #carshare-documents .innerScrollBox h4:first-child{ margin-top: 0;} #carshare-documents .innerScrollBox p, #carshare-documents .innerScrollBox ul, #carshare-documents .innerScrollBox ol{ font-size: 14px; letter-spacing: 0.025em; line-height: 1.785714;} #carshare-documents .formChackCaution{ margin-top: 40px; color: #fff; text-align: center; font-size: 16px;} #carshare-documents .checkBtnListBox{ display: flex; justify-content: center; margin-top: 20px; color: #fff; font-size: 18px; letter-spacing: 0.025em; opacity: 1; transition: opacity ease 0.3s;} #carshare-documents input[type="checkbox"]{ width: 20px; height: 20px; background-color: #fff; position: relative; } #carshare-documents .checkBtnListBox:has(input[type="checkbox"]:disabled){ opacity: 0.6; pointer-events: none;} #carshare-documents .checkBtnListBox:has(input[type="checkbox"]:checked){ opacity: 1 !important; pointer-events: all;} #carshare-documents input[type="checkbox"]:checked:before { position: absolute; top: 50%; left: 50%; transform: rotate(50deg) translate(-121%, -20%); width: 33%; height: 60%; border-right: 2px solid #1a1a1a; border-bottom: 2px solid #1a1a1a; content: '';} #carshare-documents input.check-btn { margin: 0 auto; width: 100%; height: 100%; border: none; border-radius: 0; background: rgba(255, 255, 255, 0); padding: 0; z-index: -1; transition: 0.3s; box-sizing: border-box; -webkit-appearance: none;} #carshare-documents input.check-btn { cursor: default; z-index: +1; outline: none;} #carshare-documents input.check-btn:not(:disabled) { z-index: -1; } #carshare-documents .btnArea{ margin-top: 30px;} #carshare-documents a.btn_one { opacity: 0.6; box-sizing: border-box; width: 320px; padding: 30px 110px 30px 30px; color: var(--deepgreen); font-size: 24px; font-weight: 700; text-align: left; text-decoration: none; position: relative; transition: 0.2s; background-color: #fff; display: block; margin: 0 auto; pointer-events: none;} #carshare-documents a.btn_one .icon{ display: block; position: absolute; top: 50%; right: 30px; transform: translateY(-50%); width: 52px; height: 20px; transition: all ease 0.5s;} #carshare-documents a.btn_one .icon::before{ content: ""; display: block; position: absolute; top: calc(50% - 1px); left: 0; width: 40px; height: 2px; transition: right 0.5s; background-color: var(--deepgreen);} #carshare-documents a.btn_one .icon::after{ content: ""; display: block; position: absolute; top: calc(50% - 7px); right: 0; width: 14px; height: 14px; transform: rotate(45deg); transition: right 0.5s; border-top: 2px solid var(--deepgreen); border-right: 2px solid var(--deepgreen);} #carshare-documents input.check-btn:not(:disabled) + a.btn_one { opacity: 1; pointer-events: all;} @media (any-hover: hover) { #carshare-documents input.check-btn:not(:disabled) + a.btn_one:hover { opacity: 1; pointer-events: all;} #carshare-documents input.check-btn:not(:disabled) + a.btn_one:hover .icon{ right: 20px;} } @keyframes mainCatch{ 0% { opacity: 0; transform: translateY(110%);} 100% { transform: translateY(0); opacity: 1;} } @keyframes headBdr-pc{ 0% { opacity: 0; width: 0;} 100% { opacity: 1; width: 40px;} } @keyframes headBdr-sp{ 0% { opacity: 0; width: 0;} 100% { opacity: 1; width: var(--comp-35);} } @keyframes headBdr-recruit-sp{ 0% { opacity: 0; width: 0;} 100% { opacity: 1; height: var(--comp-40);} } @keyframes simpleFadein{ 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadein{ 0% { opacity: 0; transform: translateY(40px);} 100% { opacity: 1; transform: translateY(0);} } @keyframes fadeOut{ 0% { filter: blur(0);} 100% { filter: blur(100px);} } @keyframes fadein-bottom{ 0% { opacity: 0; transform: translateY(-40px);} 100% { opacity: 1; transform: translateY(0);} } @keyframes slideFadein{ 0% { opacity: 0; transform: translateX(-30px);} 100% { opacity: 1; transform: translateX(0);} } @keyframes slideFadein-r{ 0% { opacity: 0; transform: translateX(40px);} 100% { opacity: 1; transform: translateX(0);} } @keyframes text{ 0% { opacity: 0; transform: rotateY(90deg) translateX(20px)} 100% { opacity: 1; transform: rotateY(0) translateX(0)} } @keyframes scale01{ 0% { transform: scale(0.2); } 100% { transform: scale(1.3);} } @media screen and (min-width: 769px){ .sp{ display: none !important;} a:hover{ opacity: .7; transition: opacity 0.3s ease-out;} } @media screen and (max-width: 768px){ img{ border:none; vertical-align:bottom; -webkit-backface-visibility: hidden; width: 100%; height: auto;} ul{ list-style:none; margin:0; padding:0;} body{ margin:0 auto; padding:0; font-family: 'Noto Sans JP', sans-serif; -webkit-font-smoothing: antialiased !important; font-smoothing: antialiased !important; opacity: 0; animation: simpleFadein 0.7s ease forwards;} a{ transition: opacity 0.3s ease-out;} .pc{ display: none !important;} /* ----------------------------------- CONTENTS ----------------------------------- */ /*-- CONTENTS MAIN --*/ #container{ width: 100%; min-width: 0; margin: 0 auto; overflow: hidden; display: block;} #content{ width: 100%; margin: 0 auto; box-sizing: content-box; } section{ width: 100%; min-width: 0; margin: 0 auto; padding: var(--comp-120) 0;} section.bg-green{ background-color: var(--green);} section.bg-white{ background-color: #fff;} section > *{ width: 87.8378378378378%; margin-left: auto; margin-right: auto;} section h2{ margin: 0 auto;} section h2 img{ margin: 0 auto; display: block; width: 640px; max-width: 100%;} section h2:has( + .lead){ margin-bottom: var(--comp-35); } section h2:not(:has( + .lead)){ margin-bottom: var(--comp-60); } section .lead{ text-align: center; font-size: var(--comp-22-5); letter-spacing: 0.04em; line-height: 1.944444; margin: 0 auto var(--comp-60);} section .map{ position: relative; height: 48.64864864864vw;} section .map iframe{ width: 100%; height: 100%; position: absolute; top: 0; left: 0;} section .greenTtl{ font-weight: 700; font-size: var(--comp-30); margin-bottom: var(--comp-35); color: var(--deepgreen); letter-spacing: 0.04em; line-height: 1.666666; font-feature-settings: "palt";} section .blackTtl{ font-weight: 700; font-size: var(--comp-30); margin-bottom: var(--comp-35); letter-spacing: 0.04em; line-height: 1.666666; font-feature-settings: "palt";} section .greenTtl:last-child, section .blackTtl:last-child{ margin-bottom: 0;} /*-- scroll --*/ .scrollBox{ background-color: #fff; padding: var(--comp-60) var(--comp-50); box-sizing: border-box;} .scrollBox .innerScrollBox{ overflow-y: auto; max-height: 60vw;} .fadeInDown { opacity: 0;} .fadeInDown.run { animation: fadeInDown 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;} .fadeOutDown { opacity: 1;} .fadeOutDown.run { animation: fadeOutDown 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;} /* ----------------------------------- FOOTER ----------------------------------- */ footer{ background-color: var(--beige-pink); padding: var(--comp-80) 0; width: 100%;} footer > *{ max-width: 90%; margin-left: auto; margin-right: auto; text-align: center;} footer > *:last-child{ margin-bottom: 0;} footer p{ font-size: var(--comp-17-5); line-height: 2; margin: 0 auto var(--comp-30);} footer p small{ font-size: var(--comp-15);} /* ----------------------------------- CONTENTS ----------------------------------- */ /*-- carshare-main --*/ #carshare-main{ position: relative; background-color: var(--beige-pink); min-height: 0; padding: 16.21621621621621% 0;} #carshare-main::before{ content: ""; display: block; width: 155.4054054054054%; height: auto; aspect-ratio: 92 / 72; clip-path: polygon(0 0, 100% 0, 50% 100%); background-color: #fff; position: absolute; top: 0; right: auto; left: 50%; transform: translateX(-50%);} #carshare-main .innerMain{ display: flex; flex-wrap: wrap; width: 100%; margin: 0 auto; height: 100%; gap: 0;} #carshare-main .ttlBox{ width: 100%; z-index: 1; margin-bottom: var(--comp-120);} #carshare-main .ttlBox h1{ width: 59.12161216%; margin: 0 auto 13.5135135135135%; position: relative; z-index: 1;} #carshare-main figure{ width: 87.8378378378378%; position: relative; bottom: auto; margin: 0 auto;} #carshare-main .textBox{ width: 86.486486486486486%; position: relative; z-index: 1; margin: 0 auto;} #carshare-main .textBox .catch{ font-weight: 800; font-size: var(--comp-40); line-height: 1; margin-bottom: var(--comp-50); letter-spacing: 0.2em;} #carshare-main .textBox .lead{ font-weight: 700; font-size: var(--comp-22-5); line-height: 2.5; letter-spacing: 0.15em; margin-bottom: var(--comp-30);} #carshare-main .textBox .caution{ font-weight: 400; font-size: var(--comp-20); line-height: 2; letter-spacing: 0.025em;} /*-- carshare-news --*/ #carshare-news{ padding-top: var(--comp-120);} #carshare-news .scrollBox .innerScrollBox dl{ border-bottom: 1px solid var(--deepgreen); display: flex; justify-content: space-between; padding: var(--comp-35) 0; box-sizing: border-box; width: 100%; line-height: 1.9; font-size: var(--comp-22-5);} #carshare-news .scrollBox .innerScrollBox dl:first-child{ border-top: 1px solid var(--deepgreen);} #carshare-news .scrollBox .innerScrollBox dl dt{ width: var(--comp-160); padding-right: var(--comp-35); box-sizing: border-box; font-weight: 400;} #carshare-news .scrollBox .innerScrollBox dl dd{ flex: 1; padding-right: var(--comp-15); box-sizing: border-box;} /*-- carshare-counter --*/ #carshare-counter figure{ display: block; margin-top: var(--comp-80); } /*-- carshare-flow --*/ #carshare-flow .flowBox{ background-color: #fff; box-sizing: border-box; padding: var(--comp-60) var(--comp-50) var(--comp-80); } #carshare-flow .flowBox .innerFlowBox{ position: relative; display: flex; flex-wrap: wrap; gap: var(--comp-100); padding-bottom: var(--comp-115);} #carshare-flow .flowBox .innerFlowBox::before{ content: ""; display: block; width: 1px; height: 100%; position: absolute; top: 0; left: var(--comp-60); background-color: var(--green);} #carshare-flow .flowBox dl{ display: flex; justify-content: flex-end; width: 100%; position: relative; z-index: 1;} #carshare-flow .flowBox dl dt{ width: 18.64864864864vw; margin-right: var(--comp-20);} #carshare-flow .flowBox dl dd{ width: calc(100% - 18.64864864864vw - var(--comp-20) - 1px);} #carshare-flow .flowBox dl:not(:has(> dt))::before{ content: ""; display: block; width: var(--comp-70); height: 1px; background-color: var(--green); margin-right: var(--comp-30); margin-top: var(--comp-25);} #carshare-flow .flowBox dl dd p{ font-size: var(--comp-22-5);} #carshare-flow .flowBox dl dd .caution{ font-size: var(--comp-20); margin-top: var(--comp-45 );} #carshare-flow .flowBox dl dd small{ font-size: var(--comp-15); transform: translateY(-0.25em); display: inline-block;} #carshare-flow .flowBox dl dd h4{ margin-top: var(--comp-100);} #carshare-flow .flowBox .band{ background-color: var(--beige-pink); font-weight: 700; font-size: var(--comp-30); line-height: 1; text-align: center; box-sizing: border-box; padding: var(--comp-50) var(--comp-30); width: 100%; position: relative; z-index: 1;} #carshare-flow .flowBox .innerFlowBox + *{ margin-top: calc(var(--comp-25) * (-1));} /*-- carshare-flow --*/ #carshare-booking .calendarBox{ margin-top: var(--comp-90);} #carshare-booking .calendarBox h3{ text-align: center; font-size: var(--comp-35); font-weight: 800; color: var(--deepgreen); letter-spacing: 0.025em; margin: 0 auto var(--comp-30); line-height: 1;} #carshare-booking .calendarBox .lead{ margin-bottom: var(--comp-35);} #carshare-booking .calendarBox iframe{ width: 100%; max-width: 100%; height: 110vw; max-height: 550px;} #carshare-booking .attentionBox{ margin-top: var(--comp-120); } #carshare-booking .attentionBox > p{ font-size: var(--comp-22-5); margin-bottom: var(--comp-75);} #carshare-booking .attentionBox .innerAttentionBox h4{ font-size: var(--comp-25); font-weight: 700; margin: 0 auto var(--comp-40); letter-spacing: 0.025em;} #carshare-booking .attentionBox .innerAttentionBox .cautionList{ font-size: var(--comp-20); line-height: 1.875; display: flex; flex-wrap: wrap; gap: var(--comp-50);} #carshare-booking .attentionBox .innerAttentionBox .cautionList li{ width: 100%;} /*-- carshare-documents --*/ #carshare-documents .innerScrollBox{ max-height: 93.2432432432432vw;} #carshare-documents .innerScrollBox .documentsBox:not(:first-child){ margin-top: var(--comp-60);} #carshare-documents .innerScrollBox h3{ font-size: var(--comp-22-5); font-weight: 700; letter-spacing: 0.025em; margin-bottom: var(--comp-35); line-height: 1.9444444;} #carshare-documents .innerScrollBox h4{ font-size: var(--comp-20); font-weight: 700; letter-spacing: 0.025em; margin: var(--comp-35) auto var(--comp-15); line-height: 2.1875;} #carshare-documents .innerScrollBox h4:first-child{ margin-top: 0;} #carshare-documents .innerScrollBox p, #carshare-documents .innerScrollBox ul, #carshare-documents .innerScrollBox ol{ font-size: var(--comp-17-5); letter-spacing: 0.025em; line-height: 1.785714;} #carshare-documents .formChackCaution{ margin-top: var(--comp-50); color: #fff; text-align: left; font-size: var(--comp-20);} #carshare-documents .checkBtnListBox{ display: block; margin-top: var(--comp-30); color: #fff; font-size: var(--comp-22-5); letter-spacing: 0.025em; opacity: 1; transition: opacity ease 0.3s; line-height: 2; position: relative; padding-left: var(--comp-35);} #carshare-documents input[type="checkbox"]{ width: var(--comp-25); height: var(--comp-25); background-color: #fff; position: absolute; top: 0.4em; left: 0;} #carshare-documents .checkBtnListBox:has(input[type="checkbox"]:disabled){ opacity: 0.6; pointer-events: none;} #carshare-documents .checkBtnListBox:has(input[type="checkbox"]:checked){ opacity: 1 !important; pointer-events: all;} #carshare-documents input[type="checkbox"]:checked:before { position: absolute; top: 50%; left: 50%; transform: rotate(50deg) translate(-121%, -20%); width: 33%; height: 60%; border-right: 2px solid #1a1a1a; border-bottom: 2px solid #1a1a1a; content: '';} #carshare-documents input.check-btn { margin: 0 auto; width: 100%; height: 100%; border: none; border-radius: 0; background: rgba(255, 255, 255, 0); padding: 0; z-index: -1; transition: 0.3s; box-sizing: border-box; -webkit-appearance: none;} #carshare-documents input.check-btn { cursor: default; z-index: +1; outline: none;} #carshare-documents input.check-btn:not(:disabled) { z-index: -1; } #carshare-documents .btnArea{ margin-top: var(--comp-40);} #carshare-documents a.btn_one { opacity: 0.6; box-sizing: border-box; width: 54.054054054054vw; padding: var(--comp-40) var(--comp-120) var(--comp-40) var(--comp-40); color: var(--deepgreen); font-size: var(--comp-30); font-weight: 700; text-align: left; text-decoration: none; position: relative; transition: 0.2s; background-color: #fff; display: block; margin: 0 auto; pointer-events: none;} #carshare-documents a.btn_one .icon{ display: block; position: absolute; top: 50%; right: 30px; transform: translateY(-50%); width: 7.027027027027vw; height: var(--comp-20); transition: all ease 0.5s;} #carshare-documents a.btn_one .icon::before{ content: ""; display: block; position: absolute; top: calc(50% - 1px); left: 0; width: var(--comp-40); height: 2px; transition: right 0.5s; background-color: var(--deepgreen);} #carshare-documents a.btn_one .icon::after{ content: ""; display: block; position: absolute; top: calc(50% - 0.25vw); right: 1vw; width: var(--comp-14); height: var(--comp-14); transform: rotate(45deg) translateY(-50%); transition: right 0.5s; border-top: 2px solid var(--deepgreen); border-right: 2px solid var(--deepgreen);} #carshare-documents input.check-btn:not(:disabled) + a.btn_one { opacity: 1; pointer-events: all;} }