@media screen and (max-width: 768px){.desktop{display:none}}.mobile{display:none}@media screen and (max-width: 768px){.mobile{display:block}}html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;background:transparent;box-sizing:border-box;font:inherit;vertical-align:baseline;outline:0;word-break:break-word;font-feature-settings:"palt"}main,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}html{font-size:62.5%}body{font-family:"游ゴシック体",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;width:100%;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;color:#000;font-size:1.6rem;font-weight:300;word-wrap:break-word;line-height:1;font-feature-settings:"palt"}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;box-sizing:border-box;background:transparent;text-decoration:none;transition:all .2s ease}a:hover{opacity:0.7}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}hr{display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0}input,select{vertical-align:middle}input[type="text"],input[type="email"],input[type="tel"],select,textarea{width:100%;height:45px;padding:0 1em;border-radius:3px;transition:all .4s ease;box-sizing:border-box}input[type="text"]:focus,input[type="email"]:focus,input[type="tel"]:focus,select:focus,textarea:focus{outline:none}label{display:inline-flex;align-items:center;margin-right:25px}label input[type="radio"]{margin-right:5px}.oa{overflow:auto}.oh{overflow:hidden}.ti{text-indent:-9999px}.db{display:block}.dib{display:inline-block}.dn{display:none}.di{display:inline}.dt{display:table;width:100%}.dtr{display:table-row}.dtc{display:table-cell;vertical-align:top}.flL{float:left}.flR{float:right}.clr{clear:both}.clr_after:after{content:"";clear:both;display:table}.tal{text-align:left}.tar{text-align:right}.tac{text-align:center}.vat{vertical-align:top}.vam{vertical-align:middle}.vab{vertical-align:bottom}.vabl{vertical-align:baseline}.fz12{font-size:12px}.fz16{font-size:16px}.fz18{font-size:18px}.fwb{font-weight:700}.m00{margin:0}.p00{padding:0}.m05{margin:5px}.p05{padding:5px}.m10{margin:10px}.p10{padding:10px}.m15{margin:15px}.p15{padding:15px}.m20{margin:20px}.p20{padding:20px}.m25{margin:25px}.p25{padding:25px}.m30{margin:30px}.p30{padding:30px}.m35{margin:35px}.p35{padding:35px}.m40{margin:40px}.p40{padding:40px}.m45{margin:45px}.p45{padding:45px}.m50{margin:50px}.p50{padding:50px}.m55{margin:55px}.p55{padding:55px}.m60{margin:60px}.p60{padding:60px}.m65{margin:65px}.p65{padding:65px}.m70{margin:70px}.p70{padding:70px}.m75{margin:75px}.p75{padding:75px}.m80{margin:80px}.p80{padding:80px}.m85{margin:85px}.p85{padding:85px}.m90{margin:90px}.p90{padding:90px}.m95{margin:95px}.p95{padding:95px}.m100{margin:100px}.p100{padding:100px}.mt00{margin-top:0}.pt00{padding-top:0}.mt05{margin-top:5px}.pt05{padding-top:5px}.mt10{margin-top:10px}.pt10{padding-top:10px}.mt15{margin-top:15px}.pt15{padding-top:15px}.mt20{margin-top:20px}.pt20{padding-top:20px}.mt25{margin-top:25px}.pt25{padding-top:25px}.mt30{margin-top:30px}.pt30{padding-top:30px}.mt35{margin-top:35px}.pt35{padding-top:35px}.mt40{margin-top:40px}.pt40{padding-top:40px}.mt45{margin-top:45px}.pt45{padding-top:45px}.mt50{margin-top:50px}.pt50{padding-top:50px}.mt55{margin-top:55px}.pt55{padding-top:55px}.mt60{margin-top:60px}.pt60{padding-top:60px}.mt65{margin-top:65px}.pt65{padding-top:65px}.mt70{margin-top:70px}.pt70{padding-top:70px}.mt75{margin-top:75px}.pt75{padding-top:75px}.mt80{margin-top:80px}.pt80{padding-top:80px}.mt85{margin-top:85px}.pt85{padding-top:85px}.mt90{margin-top:90px}.pt90{padding-top:90px}.mt95{margin-top:95px}.pt95{padding-top:95px}.mt100{margin-top:100px}.pt100{padding-top:100px}.mb00{margin-bottom:0}.pb00{padding-bottom:0}.mb05{margin-bottom:5px}.pb05{padding-bottom:5px}.mb10{margin-bottom:10px}.pb10{padding-bottom:10px}.mb15{margin-bottom:15px}.pb15{padding-bottom:15px}.mb20{margin-bottom:20px}.pb20{padding-bottom:20px}.mb25{margin-bottom:25px}.pb25{padding-bottom:25px}.mb30{margin-bottom:30px}.pb30{padding-bottom:30px}.mb35{margin-bottom:35px}.pb35{padding-bottom:35px}.mb40{margin-bottom:40px}.pb40{padding-bottom:40px}.mb45{margin-bottom:45px}.pb45{padding-bottom:45px}.mb50{margin-bottom:50px}.pb50{padding-bottom:50px}.mb55{margin-bottom:55px}.pb55{padding-bottom:55px}.mb60{margin-bottom:60px}.pb60{padding-bottom:60px}.mb65{margin-bottom:65px}.pb65{padding-bottom:65px}.mb70{margin-bottom:70px}.pb70{padding-bottom:70px}.mb75{margin-bottom:75px}.pb75{padding-bottom:75px}.mb80{margin-bottom:80px}.pb80{padding-bottom:80px}.mb85{margin-bottom:85px}.pb85{padding-bottom:85px}.mb90{margin-bottom:90px}.pb90{padding-bottom:90px}.mb95{margin-bottom:95px}.pb95{padding-bottom:95px}.mb100{margin-bottom:100px}.pb100{padding-bottom:100px}.ml00{margin-left:0}.pl00{padding-left:0}.ml05{margin-left:5px}.pl05{padding-left:5px}.ml10{margin-left:10px}.pl10{padding-left:10px}.ml15{margin-left:15px}.pl15{padding-left:15px}.ml20{margin-left:20px}.pl20{padding-left:20px}.ml25{margin-left:25px}.pl25{padding-left:25px}.ml30{margin-left:30px}.pl30{padding-left:30px}.ml35{margin-left:35px}.pl35{padding-left:35px}.ml40{margin-left:40px}.pl40{padding-left:40px}.ml45{margin-left:45px}.pl45{padding-left:45px}.ml50{margin-left:50px}.pl50{padding-left:50px}.ml55{margin-left:55px}.pl55{padding-left:55px}.ml60{margin-left:60px}.pl60{padding-left:60px}.ml65{margin-left:65px}.pl65{padding-left:65px}.ml70{margin-left:70px}.pl70{padding-left:70px}.ml75{margin-left:75px}.pl75{padding-left:75px}.ml80{margin-left:80px}.pl80{padding-left:80px}.ml85{margin-left:85px}.pl85{padding-left:85px}.ml90{margin-left:90px}.pl90{padding-left:90px}.ml95{margin-left:95px}.pl95{padding-left:95px}.ml100{margin-left:100px}.pl100{padding-left:100px}.mr00{margin-right:0}.pr00{padding-right:0}.mr05{margin-right:5px}.pr05{padding-right:5px}.mr10{margin-right:10px}.pr10{padding-right:10px}.mr15{margin-right:15px}.pr15{padding-right:15px}.mr20{margin-right:20px}.pr20{padding-right:20px}.mr25{margin-right:25px}.pr25{padding-right:25px}.mr30{margin-right:30px}.pr30{padding-right:30px}.mr35{margin-right:35px}.pr35{padding-right:35px}.mr40{margin-right:40px}.pr40{padding-right:40px}.mr45{margin-right:45px}.pr45{padding-right:45px}.mr50{margin-right:50px}.pr50{padding-right:50px}.mr55{margin-right:55px}.pr55{padding-right:55px}.mr60{margin-right:60px}.pr60{padding-right:60px}.mr65{margin-right:65px}.pr65{padding-right:65px}.mr70{margin-right:70px}.pr70{padding-right:70px}.mr75{margin-right:75px}.pr75{padding-right:75px}.mr80{margin-right:80px}.pr80{padding-right:80px}.mr85{margin-right:85px}.pr85{padding-right:85px}.mr90{margin-right:90px}.pr90{padding-right:90px}.mr95{margin-right:95px}.pr95{padding-right:95px}.mr100{margin-right:100px}.pr100{padding-right:100px}.bdn{border:none}.bdtn{border-top:none}.bdrn{border-right:none}.bdbn{border-bottom:none}.bdln{border-left:none}.por{position:relative}.poa{position:absolute}.pof{position:fixed}.flex-wrap{display:flex;flex-wrap:wrap;justify-content:space-around}.flex-row{flex-direction:row}:root{--color-yellow: #EEB31F;--color-pink: #E58392;--color-green: #86B74A;--color-blue: #1098D0;--color-orange: #E8754D;--color-text: #2F4956}*::-moz-selection{background:rgba(0,0,0,0.08)}*::selection{background:rgba(0,0,0,0.08)}body{line-height:1.8;color:var(--color-text)}@media screen and (max-width: 768px){body{font-size:1.4rem}}a{color:var(--color-text)}input[type="text"],input[type="email"],input[type="tel"],select,textarea{display:block;min-height:70px;border:none}textarea{resize:vertical}.vt{-ms-writing-mode:tb-rl;writing-mode:vertical-rl;-webkit-text-orientation:upright;text-orientation:upright} /* 変数定義 */ :root { --main-red: #BE000F; --cta-red: #BE000F; --cta-blue: #244f8f; --line: 20px; } body{ color: #522A13; } .l-lp-body { background:url(../images/bg.png); padding-bottom: 100px; @media screen and ( min-width: 769px ){ padding-bottom: 120px; } } .l-form-body, .l-thanks-body { background: #fff; /* min-height: 100svh; border-top: 10px solid var(--main-red); border-bottom: 10px solid var(--main-red); @media screen and ( max-width: 768px ){ border-top: 5px solid var(--main-red); border-bottom: 5px solid var(--main-red); } */ } h1{ margin-bottom: 0; } p{ margin-bottom: 0; } a{ color: #00f; } picture{ display: block; } .wrap{ max-width: 550px; width: 100%; margin: auto; padding: 0 15px; } @media screen and ( min-width: 769px ){ .wrap{ max-width: 800px; padding: 0; } } .wrap.nopadding{ padding: 0; } .wrap img{ display: block; width: 100%; } .pc-wrap img{ display: block; width: 100%; } @media screen and ( min-width: 769px ){ .pc-wrap{ max-width: 800px; width: 100%; margin: auto; } } .img1{ margin: 0 auto 30px; } .mv{ background: radial-gradient(55.4% 76.33% at 51.54% 9.34%, #FFF 65.43%, #FFDBDB 100%); } .sv{ padding-bottom: 30px; } @media screen and ( min-width: 769px ){ .mv{ padding-top: 30px; } .sv{ padding-top: 50px; padding-bottom: 50px; } } .prize{ padding: 20px 15px; background: radial-gradient(53.08% 109.71% at 50% -9.71%, #D81D1D 0%, #BB1616 26.55%, #880B0B 100%); } .ctaBtn { border-top: 3px solid #BE000F; border-bottom: 3px solid #BE000F; background: #fff; } @media screen and ( min-width: 769px ){ .ctaBtn { max-width: 798px; border: 1px solid #BE000F; margin-left: auto; margin-right: auto; } } .ctaBtn h2{ padding: 20px 15px; /* border-radius: 10px 10px 0 0; */ /* background: linear-gradient(to bottom, #D8212F, #BE000F); */ /* font-size: calc(18px + 3 * ((100vw - 320px) / 600)); */ font-weight: bold; /* color: #fff; */ text-align: center; line-height: 1.2; } @media screen and ( min-width: 769px ){ .ctaBtn h2{ padding-left: 190px; background: url(../images/pc/cta.png) 80px center / 90px no-repeat; } } .ctaBtn-inner{ padding: 25px 15px ; /* border-radius: 0 0 10px 10px ; */ background: #FFF0EA; } @media screen and ( min-width: 769px ){ .ctaBtn-inner{ display: flex; align-items: center; justify-content: center; gap: 20px; } } .real-time { /* font-size: calc(40px + 3 * ((100vw - 320px) / 600)); */ font-weight: bold; /* color: #BE000F; */ } .real-time .dot{ animation: dot 1s ease 0s infinite normal; } @keyframes dot{ 0%{ opacity: 1; } 50%{ opacity: 1; } 51%{ opacity: 0; } 100%{ opacity: 0; } } .ctaBtn .message { font-size: clamp(1rem, calc(4px + 3vw ), 18px); font-weight: bold; line-height: 1.2; letter-spacing: 0.05em; padding: 0; overflow: hidden; text-align: center; } @media screen and ( min-width: 769px ){ .ctaBtn .message { overflow: visible; text-align: left; } } .big{ font-size: 22px; } .yellow{ color: #DE0010; background: #FFF500; line-height: 1.5; } .telBtn { display: flex; align-items: center; justify-content: center; gap: 20px; background: linear-gradient(180deg, #F66700 0%, #D00 100%); border: 2px solid #D10000; box-shadow: 0px 5px 0px #900000; width: 100%; height: 111px; margin-bottom: 15px; padding: 10px; border-radius: 10px; } @media screen and ( min-width: 769px ){ .telBtn { gap: 10px; width: auto; height: auto; padding: 0; border: none; box-shadow: none; background: none; color: #522A13; font-family: "Roboto Condensed", sans-serif; margin-bottom: 0; } } .telBtn svg{ min-width: 50px; max-width: 90px; width: calc( 30px + 8vw); } @media screen and ( min-width: 769px ){ .telBtn path { fill: #522A13; } .telBtn g { filter: none; } } .telBtn-text1{ margin-bottom: 7px; color: #FFF; font-feature-settings: 'fwid' on, 'palt' on; text-shadow: 0px 2.306px 2.306px rgba(0, 0, 0, 0.25); font-size: clamp(1rem, calc(14px + 5vw ), 38px); font-style: normal; font-weight: 700; line-height: 100%; /* 38px */ } @media screen and ( min-width: 769px ){ .telBtn-text1{ text-shadow: none; color: #522A13; line-height: 1; } } .telBtn-text2{ display: flex; padding: 3px 5px; justify-content: center; align-items: center; gap: 10px; align-self: stretch; margin-top: 5px; border-radius: 4px; border: 1px solid #616161; background: linear-gradient(180deg, #FFF 0%, #D5D5D5 100%); color: #232323; font-feature-settings: 'fwid' on, 'palt' on; text-shadow: 1px 1px 0px #FFF; font-family: YuGothic; font-size: clamp(1rem, calc(3vw ), 14px); font-style: normal; font-weight: 700; line-height: normal; } @media screen and ( min-width: 769px ){ .telBtn-text2{ padding: 0; border: none; background: none; color: #522A13; margin-top: 0; text-shadow: none; font-size: 16px; line-height: 1; } } .text{ font-size: 4.2vw; font-weight: bold; color: #fff; text-decoration: none; margin: 1% 5% 0 23%; } .subTxt{ color: #000; border-radius: 4px; border: 1px solid #616161; background: linear-gradient(180deg, #FFF 0%, #D5D5D5 100%); padding: 0; text-align: center; font-weight: bold; margin: 0 5% 0 25%; border: 2px solid #616161; font-size: 1.7vw; } .ctaBtn .icon_telCalling { } .icon_telCalling { float: left; position: relative; /* filter: invert(70%) sepia(89%) saturate(5135%) hue-rotate(343deg) brightness(90%) contrast(98%); */ } .denpa1, .denpa2, .denpa3{ animation: denpa 1.2s ease 0s infinite normal; } .denpa2{ animation-delay: .1s; } .denpa3{ animation-delay: .2s; } @keyframes denpa{ 0%{ opacity: 1; } 20%{ opacity: 1; } 50%{ opacity: 0; } 80%{ opacity: 1; } 100%{ opacity: 1; } } .button{ display: block; text-decoration: none; width: 100%; } @media screen and ( min-width: 769px ){ .button{ width: 335px!important; } } .ctaBtn2{ width: calc(100% - 30px ); margin: auto; border-radius: 10px; border: 2px solid #A51621; background: #FFF; } .ctaBtn2 h2{ border-radius: 8px 8px 0 0; background: linear-gradient(to bottom, #D8212F, #BE000F); color: #fff; } .ctaBtn2 .real-time{ color: #fff; } .ctaBtn2 .ctaBtn-inner{ background: transparent; } .ctaBtn2 .telBtn{ background: linear-gradient(180deg, #20C81D 0%, #138511 100%); border: 2px solid #0A7308; box-shadow: 0px 5px 0px #014900; } @media screen and ( min-width: 769px ){ .ctaBtn2 h2{ background: url(../images/pc/cta.png) 80px center / 90px no-repeat ,linear-gradient(to bottom, #D8212F, #BE000F); } .ctaBtn2 .telBtn { gap: 10px; width: auto; height: auto; padding: 0; border: none; box-shadow: none; background: none; color: #522A13; font-family: "Roboto Condensed", sans-serif; margin-bottom: 0; } } .img2{ margin-top: 50px; } @media screen and ( min-width: 769px ){ .img2{ margin-bottom: 70px; } } .img3{ margin-bottom: 30px; } @media screen and ( min-width: 769px ){ .img3-wrap{ max-width: 100%; padding: 50px 0 ; background: #6B5040; } .img3{ display: block; /* max-width: 798px; */ margin: auto; } } .img3{ margin-bottom: 30px; } .img4{ margin-bottom: 30px; } /* @media screen and ( min-width: 769px ){ .img4{ padding-top: 60px; } } */ .img5{ } .img6{ } @media screen and ( min-width: 769px ){ .img6{ margin-bottom: 70px; } } .img7{ padding: 30px 0; } @media screen and ( min-width: 769px ){ .img7{ display: block; max-width: 798px; margin: 0 auto 40px; } .img7 + .swiper{ /* margin-bottom: 50px; */ margin-bottom: 40px; } } .img7 img{ width: 100%; } .img8{ margin: 60px auto 60px; } .white{ background-color: #fff; overflow: hidden; } @media screen and ( min-width: 769px ){ .white{ padding: 40px 0 70px; } } .white .ctaBtn{ margin: 30px auto 0; } .cta{ margin-bottom: 50px; } .button-img{ margin: 50px auto 0; padding-left: 25px; padding-right: 25px; } .about{ position: relative; background-image: url(../images/about_bg.png); background-size:cover; margin: 30px 0; padding: 30px 20px; width: 100%; overflow: hidden; } @media screen and ( min-width: 769px ){ .pc-wrap:has(.about){ max-width: 100%; /* margin: 60px 0; */ padding: 60px 0; background: url(../images/pc/about_bg.png) center / cover no-repeat; } .about{ margin: auto; background: none; padding: 0; } .about .ctaBtn{ margin-top: 50px; } } .about_img{ max-width: 280px; width: 80%; margin: 0 auto 20px; } .swiper-inner{ padding: 30px 20px 40px; margin: auto; background: #fff; color: #074254; font-size: 18px; font-weight: bold; } .swiper-about { /*スライダーの幅と高さを調整*/ overflow: visible; margin-bottom: 20px; } .swiper-about .swiper-slide { /*スライド要素の幅と高さを調整*/ width: 300px; height: auto; margin: auto; border-radius: 15px; overflow: hidden; /*テキストの位置調整*/ justify-content: center; align-items: center; /*テキストの色と太さを指定*/ color: #084557; font-weight: bold; } .swiper-about .img{ } .swiper-inner dl{ display: flex; flex-wrap: wrap; padding: 3px 0 4px; border-bottom: 2.5px dotted #084557; font-size: 14px; color: #084557; } .swiper-inner dl:last-child{ border-bottom: none; padding-bottom: 0; } .swiper-inner dt{ width: 65px; font-weight: bold; color:#084557 ; } .swiper-inner dd{ flex: 2; font-weight: normal; } .swiper-about .swiper-button-next, .swiper-about .swiper-button-prev{ top: calc( 30px + 30% ); width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; background: #FFF500; border-radius: 50%; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); } .swiper-about .swiper-button-next{ right: -15px; } .swiper-about .swiper-button-prev{ left: -15px; } @media screen and ( min-width: 769px ){ .swiper-about { margin-bottom: 60px; } .swiper-about .swiper-button-next{ right: 50px; } .swiper-about .swiper-button-prev{ left: 50px; } } .swiper-about .swiper-button-next::after, .swiper-about .swiper-button-prev::after{ content: ""; width: 7px; height: 7px; border-left: 3px solid #084557; border-top: 3px solid #084557; transform: rotate(-45deg); } .swiper-about .swiper-button-next::after{ transform: rotate(135deg); } .button2{ display: block; width: 100%; margin: 30px auto 0; display: flex; padding: 5px 20px; justify-content: center; align-items: center; border-radius: 4px; border: none; background: #669CC2; box-shadow: 0px 3px 0px 0px #0E3F62; color: #fff; } .bottom{ padding: 20px 0; text-align: center; } .bottom a{ display: inline-block; margin: 0 10px; } small{ display: block; text-align: center; } .swiper-voice{ padding: 0 15px 40px; } .swiper-voice .swiper-slide{ width: 300px; height: auto; background: #F5F5F5; border-radius: 10px; padding: 15px 25px; font-size: 13px; } .swiper-voice_top{ display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 18px; font-weight: bold; color: #522A13; } .swiper-voice_top .img{ flex: none; display: block; width: 55px; height: 55px; border-radius: 50%; border: 2px solid #522A13; overflow: hidden; } .swiper-voice_top .img img{ width: 100%; border-radius: 50%; } .swiper-voice_bottom p:not(:last-child){ margin-bottom: 10px; } .swiper-voice .swiper-button-next, .swiper-voice .swiper-button-prev{ width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; background: #FFF500; border-radius: 50%; } .swiper-voice .swiper-button-next{ right: 0; } .swiper-voice .swiper-button-prev{ left: 0; } .swiper-voice .swiper-button-next::after, .swiper-voice .swiper-button-prev::after{ content: ""; width: 7px; height: 7px; border-left: 3px solid #D8212F; border-top: 3px solid #D8212F; transform: rotate(-45deg); } .swiper-voice .swiper-button-next::after{ transform: rotate(135deg); } .swiper-voice .swiper-pagination{ bottom: 10px; } .swiper-voice .swiper-pagination-bullet-active{ background: #BE000F; } .form{ max-width: 500px; width: 100%; margin: auto; } .Form { margin-top: 80px; margin-left: auto; margin-right: auto; } @media screen and (max-width: 480px) { .Form { margin-top: 40px; } } .Form-Item { border-top: 1px solid #a78f80; padding-top: 24px; padding-bottom: 24px; width: 100%; } @media screen and (max-width: 480px) { .Form-Item { padding-left: 14px; padding-right: 14px; padding-top: 16px; padding-bottom: 16px; flex-wrap: wrap; } } /* .Form-Item:nth-child(5) { border-bottom: 1px solid #a78f80; } */ .Form-Item-Label { width: 100%; max-width: 248px; margin-bottom: 15px; letter-spacing: 0.05em; font-weight: bold; font-size: 18px; } @media screen and (max-width: 480px) { .Form-Item-Label { display: flex; align-items: center; max-width: inherit; display: flex; align-items: center; font-size: 15px; } } .Form-Item-Label.isMsg { margin-top: 8px; } @media screen and (max-width: 480px) { .Form-Item-Label.isMsg { margin-top: 0; } } .Form-Item-Label-Required { border-radius: 6px; margin-right: 8px; padding-top: 8px; padding-bottom: 8px; width: 48px; display: inline-block; text-align: center; background: #DF1726; color: #fff; font-size: 14px; } @media screen and (max-width: 480px) { .Form-Item-Label-Required { border-radius: 4px; padding-top: 4px; padding-bottom: 4px; width: 32px; font-size: 10px; } } .Form-Item-Input { border: 1px solid #ddd; border-radius: 6px; padding-left: 1em; padding-right: 1em; height: 48px; flex: 1; width: 100%; /* background: #eaedf2; */ font-size: 16px; } /* @media screen and (max-width: 480px) { .Form-Item-Input { margin-left: 0; height: 40px; flex: inherit; font-size: 15px; } } */ .Form-Item-Textarea { /* border: 1px solid #ddd; */ border-radius: 6px; padding: 1em; height: 216px; flex: 1; width: 100%; /* background: #fff; */ font-size: 16px; } @media screen and (max-width: 480px) { .Form-Item-Textarea { margin-top: 18px; margin-left: 0; height: 200px; flex: inherit; font-size: 15px; } } .Form-Btn { border-radius: 6px; margin-top: 32px; margin-left: auto; margin-right: auto; padding-top: 20px; padding-bottom: 20px; width: 280px; display: block; letter-spacing: 0.05em; background: #0D99D5; color: #fff; font-weight: bold; font-size: 20px; } .Form-Btn:disabled{ opacity: .5; cursor:not-allowed; } @media screen and (max-width: 480px) { .Form-Btn { margin-top: 24px; padding-top: 8px; padding-bottom: 8px; width: 160px; font-size: 16px; } } .Form-Item label [type="radio"]{ margin: 0 5px 0 0; } .Form-Item .row{ display: flex; gap: 10px; align-items: center; margin-right: 0; } .address .row span:first-child{ width: 120px; } .Form-Item .row:not(:last-child){ margin-bottom: 15px; } .privacy{ text-align: center; } /* .privacy-box{ display: block; font-size: 2rem; } */ .iziModal{ top: 50%!important; transform: translateY( calc( -50% - 20px ))!important; bottom: auto; width: calc( 100% - 30px); } .iziModal, .iziModal.isAttached, .iziModal .iziModal-wrap{ height: 80vh!important; } .iziModal-content, .iziModal-content iframe{ height: 100%!important; } .iziModal .close [data-izimodal-close]{ position: fixed; bottom: -60px; left: 50%; transform: translateX(-50%); z-index: 9999; border-radius: 100px; border: 2px solid #fff; display: flex; justify-content: center; align-items: center; width: 100%; max-width: 200px; height: 40px; font-size: 18px; font-weight: bold; color: #fff; cursor: pointer; box-shadow: 0 5px 10px rgba(0, 0, 0, .2); } .iziModal-overlay{ background: rgba(0, 0, 0, .7)!important; } @media screen and ( min-width: 769px ){ .iziModal{ width: calc( 100% - 100px); } .iziModal, .iziModal.isAttached, .iziModal .iziModal-wrap{ } .iziModal-content, .iziModal-content iframe{ height: 100%!important; } } /* 追加 */ .c-cta { img { -webkit-max-width: 100%; max-width: 100%; height: auto; } } .c-cta__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; background: #be000f; padding: 19px 18px; border-radius: 10px; } .c-cta__inner-heading { display: flex; flex-direction: column; align-items: center; justify-content: center; } img.c-cta__icon { width: 90px; margin-bottom: 8px; } .c-cta__heading { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 16px; } img.c-cta__time-icon { width: 40px; height: 40px; /* margin-right: 8px; */ position: relative; bottom: -2px; } .c-cta__current-text { font-size: 24px; font-weight: bold; color: #fff; } .c-cta__text { font-size: 16px; font-weight: bold; color: #fff; text-align: left; line-height: 1.5; margin-bottom: 15px; } .real-time { font-size: 45px; font-weight: bold; color: #fff; display: flex; align-items: flex-end; justify-content: center; line-height: 1; gap: 3px; } .c-cta__hours, .c-cta__minutes { position: relative; bottom: -4px; font-size: 45px; font-family: "Roboto Condensed", sans-serif; } .c-cta__time-unit, .c-cta__current-text { font-size: 25px; } .c-cta__buttons { display: grid; grid-template-columns: 1fr; gap: 10px; width: 100%; max-width: 300px; } .c-cta__button { width: 100%; height: 75px; background: #fff; border-radius: 37.5px; /* padding: 8px 16px; */ display: grid; /* grid-template-columns: 61px 180px 1fr; */ grid-template-columns: 24% 1fr 14%; align-items: center; position: relative; top: 0; border-style: solid; border-width: 3px; transition: 0.3s; font-weight: 700; } .c-cta__button:hover { opacity: 1; } .c-cta__button:before { content: ""; position: absolute; top: 50%; right: 14px; transform: translateY(-50%); width: 9.5px; height: 16px; background: url(../images/arrow-right-red.png); background-size: contain; background-repeat: no-repeat; background-position: center; } .c-cta__button-icon { } .c-cta__button-text-wrapper { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; } .c-cta__button-label { font-size: 12px; font-weight: bold; color: #fff; border-radius: 11px; width: 100%; display: flex; align-items: center; justify-content: center; text-align: center; } .c-cta__button-text { font-size: 24px; font-weight: bold; line-height: 1; } .c-cta__button-text--pc { display: none; } .c-cta__button--tel { border-color: #9c000f; color: var(--cta-red); box-shadow: 0 4px 0 #9c000f; } .c-cta__button--tel:hover { box-shadow: 0 0 #9c000f; top: 4px; } .c-cta__button--tel:before { background-image: url(../images/arrow-right-red.png); } .c-cta__button--tel .c-cta__button-icon-wrapper { position: relative; /* margin-left: 6px; */ margin-left: 23px; } .c-cta__button--tel img.c-cta__button-icon { /* width: 40px; */ width: 84%; height: auto; position: relative; bottom: -3px; /* aspect-ratio: 48/49; */ } .c-cta__button--tel .c-cta__button-icon { } .c-cta__button--tel .c-cta__button-label { background: var(--cta-red); } .c-cta__button--tel .c-cta__button-text { } .c-cta__button--contact { border-color: var(--cta-blue); color: var(--cta-blue); box-shadow: 0 4px 0 var(--cta-blue); } .c-cta__button--contact:hover { box-shadow: 0 0 var(--cta-blue); top: 4px; /* opacity: 0.8; */ } .c-cta__button--contact:before { background-image: url(../images/arrow-right-blue.png); } .c-cta__button--contact .c-cta__button-icon-wrapper { position: relative; margin-left: 16px; } .c-cta__button--contact img.c-cta__button-icon { /* width: 60px; */ width: 100%; height: auto; position: relative; max-width: 60px; /* aspect-ratio: 70/60; */ } .c-cta__button--contact .c-cta__button-label { background: var(--cta-blue); } .c-cta__button-tel-icon { position: absolute; /* top: -11px; right: 70px; */ /* top: -21%; right: 137%; */ top: -21%; right: 157%; } @media (max-width: 599px) { .c-cta__button-tel-icon { top: -21%; right: 137%; } } .c-cta__button-tel-icon .c-cta__button-tel-icon-line { color: #c61627; position: absolute; border: 4px solid transparent; border-top: 2px solid #c61627; width: var(--line); height: var(--line); border-radius: 50%; transform: rotate(50deg); animation: fadeInOut 1.5s linear infinite; animation-fill-mode: both; } .c-cta__button-tel-icon .c-cta__button-tel-icon-line:nth-child(1) { --line: 20px; animation-delay: -1.08s; top: 24px; left: 35px; } .c-cta__button-tel-icon .c-cta__button-tel-icon-line:nth-child(2) { --line: 40px; animation-delay: -1.16s; top: 16px; left: 23px; } .c-cta__button-tel-icon .c-cta__button-tel-icon-line:nth-child(3) { --line: 60px; animation-delay: -1s; top: 6px; left: 12px; } @media (max-width: 599px) { .c-cta__button-tel-icon .c-cta__button-tel-icon-line { border: 5px solid transparent; border-top: 2px solid #c61627; } .c-cta__button-tel-icon .c-cta__button-tel-icon-line:nth-child(1) { left: 25px; } .c-cta__button-tel-icon .c-cta__button-tel-icon-line:nth-child(2) { left: 13px; } .c-cta__button-tel-icon .c-cta__button-tel-icon-line:nth-child(3) { left: 2px; } } @keyframes fadeInOut { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } .fixed-cta { display: none; } .fixed-cta img { max-width: 100%; height: auto; object-fit: contain; } /* 固定ボタン（SP） */ .fixed-cta-sp { position: fixed; bottom: 0; left: 0; width: 100%; height: 72px; z-index: 1000; background: #fff; display: flex; justify-content: center; align-items: center; /* height: 100px; border-top: 1px solid #b1994b; */ display: grid; grid-template-columns: 24% 1fr; } .fixed-cta-sp img { max-width: 100%; height: auto; } .fixed-cta-sp__button { color: #fff; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding-inline: 10px; } .fixed-cta-sp__text-wrapper { width: fit-content; } .fixed-cta-sp__button--contact { background: var(--cta-blue); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; } .fixed-cta-sp__button--contact .fixed-cta-sp__icon { width: 28px; /* aspect-ratio: 29/34; */ } .fixed-cta-sp__button--contact .fixed-cta-sp__text { font-size: 15px; line-height: 1; font-weight: 700; } .fixed-cta-sp__button--tel { background: var(--cta-red); gap: 8px; } .fixed-cta-sp__button--tel .fixed-cta-sp__icon { width: 26px; /* aspect-ratio: 13/23; */ } .fixed-cta-sp__button--tel .fixed-cta-sp__text--sub { font-size: 13px; line-height: 1; font-weight: 700; margin-bottom: 8px; } .fixed-cta-sp__button--tel .fixed-cta-sp__text--main { font-size: 17px; line-height: 1; text-decoration: underline; text-underline-offset: 5px; font-weight: 700; } .img11 { margin-top: 25px; padding: 0; } .img12-wrap { width: 100%; padding: 0; } .img4-wrapper { width: 100%; } .img14 { /* display: none; */ /* width: 100%; */ img { width: 100%; } } .img2 { margin-top: 35px; } .img3-wrap { background: #6b5040; } .img3 { margin-bottom: 0; } .img5 { position: relative; top: -2px; } .img13-wrapper { display: none; } .img7-wrapper { margin-bottom: 25px; } .img8 { margin-bottom: 10px; } .c-cta--only-pc { display: none; } .c-cta--only-sp { margin-bottom: 30px; } .c-cta-small { display: none; } @media screen and ( min-width: 769px ){ .mv-wrapper { width: 90%; margin-inline: auto; } .c-cta { background: var(--main-red); .wrap { /* width: 100%; max-width: 800px; */ } } /* .c-cta__arrow-wrapper { display: none; } */ .c-cta__inner { padding: 24px 30px 40px; /* border-radius: 20px; */ border-radius: 12px; align-items: flex-start; } .c-cta__inner-heading { display: grid; grid-template-columns: 135px 1fr; grid-template-columns: auto auto; column-gap: 30px; } .c-cta__icon { grid-column: 1 / 2; grid-row: 1 / 3; margin-bottom: 0; } .c-cta__heading { grid-column: 2 / 3; grid-row: 1 / 2; justify-content: flex-start; margin-bottom: 0; align-items: flex-end; gap: 6px; margin-top: 6px; } .c-cta__text { grid-column: 2 / 3; grid-row: 2 / 3; font-size: 18px; padding-left: 6px; } img.c-cta__icon { width: 136px; } .real-time { /* span { font-size: calc(40px + 3 * ((100vw - 320px) / 600)); } */ display: flex; gap: 0; } .c-cta__hours, .c-cta__minutes { bottom: -6px; font-size: 42px; } .c-cta__time-unit, .c-cta__current-text { font-size: 24px; } .c-cta__buttons { margin-top: 9px; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 100%; /* max-width: 600px; */ } .c-cta__button { max-width: 360px; height: 80px; grid-template-columns: 25% 1fr 11%; padding: unset; border-radius: 40px; } .c-cta__button-label { font-size: 14px; border-radius: 12px; } .c-cta__button-text { font-size: 24px; } .pc-wrap.img9-wrap { max-width: 100%; } .c-cta__button-tel-icon { top: -13%; right: 141%; /* top: -16%; right: 140%; */ } img.c-cta__time-icon { width: 38px; height: 38px; } .c-cta__button--tel { img.c-cta__button-icon { max-width: 46px; } .c-cta__button-icon-wrapper { margin-left: 35%; } .c-cta__button-text { font-size: 32px; font-family: "Roboto Condensed", sans-serif; } .c-cta__button-text-wrapper { gap: 2px; } } .c-cta__button--contact { img.c-cta__button-icon { } .c-cta__button-icon-wrapper { margin-left: 23%; } } .c-cta__current-text { margin-left: 4px; } .img11 { margin-top: 44px; /* display: none; */ width: 100%; margin-inline: auto; } .img14 { /* display: none; */ max-width: 880px; } .img12-wrap { width: 95%; max-width: 880px; margin-inline: auto; } .img2 { margin-top: 56px; width: 90%; margin-inline: auto; } .img3-wrap { padding-top: 10px; .img3 { width: 90%; margin-inline: auto; } } .img4-wrapper { width: 90%; margin-inline: auto; padding-top: 72px; margin-bottom: 80px; } /* .img4 { } */ .img5-wrapper { width: 100%; margin-inline: auto; } .img5 { /* position: relative; */ top: -2px; } .img5-10-wrapper { width: 90%; } .img10-wrapper { margin-top: 50px; width: 94%; margin-inline: auto; } .img13-wrapper { display: block; /* width: 90%; margin-inline: auto; */ } .img10 { max-width: 750px; margin-inline: auto; } .img7-wrapper { margin-bottom: 0; padding-bottom: 0; } .img8 { margin-bottom: 0; } .c-cta--only-pc { display: block; } .c-cta--only-sp { display: none; } .c-cta-small { display: block; width: 90%; .c-cta__inner-heading { /* column-gap: 20px; */ } .c-cta__text { font-size: clamp(16px, calc(18 / 940) * 100vw, 18px); } } .c-cta__button-text--pc { display: block; } .c-cta__button-text--sp { display: none; } /* 固定フッター（cta） */ .fixed-cta { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1000; background: #fff; padding: 10px 0; display: flex; justify-content: center; align-items: center; height: 100px; border-top: 1px solid #b1994b; .fixed-cta__item--tel { display: flex; align-items: center; justify-content: center; gap: 18px; } .fixed-cta__link-area-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding-right: 22px; border-right: 1px solid #dcd5c7; } .c-cta__icon { width: 80px; margin-bottom: 0; /* margin-right: 24px; */ } .c-cta__contact-icon { width: 70px; max-width: 70px; } .c-cta__button-icon-wrapper { margin-left: 0; } .fixed-cta__button-icon-wrapper--contact { margin-left: 25%; display: flex; align-items: center; justify-content: center; } .fixed-cta__link--tel { display: flex; align-items: center; color: var(--main-red); } .fixed-cta__link--contact { display: flex; align-items: center; margin-left: 22px; &:hover { opacity: 0.8; } } .c-cta__button-text { } .fixed-cta__item--tel { box-shadow: unset; .c-cta__button-label { font-size: clamp(12px, calc(14 / 1440) * 100vw, 14px); } .c-cta__button-text { /* font-size: 48px; */ font-size: clamp(36px, calc(48 / 1440) * 100vw, 48px); } } .c-cta__button--contact { display: grid; grid-template-columns: 31% 1fr 14.6%; border: none; } .fixed-cta__link--contact { background: var(--cta-blue); box-shadow: none; color: #fff; max-width: 320px; height: 70px; &:before { background-image: url(../images/arrow-right-white.png); } &:hover { top: 0; } .c-cta__button-text-wrapper { gap: 6px; } .c-cta__button-label { background: transparent; line-height: 1; } } .c-cta__button-tel-icon { top: -18%; right: 149%; transform: scale(0.8); } .c-cta__button-text-wrapper { gap: 2px; } } } /* .l-thanks-wrapper { min-height: 100svh; border-top: 10px solid var(--main-red); border-bottom: 10px solid var(--main-red); display: flex; flex-direction: column; align-items: center; justify-content: space-between; @media screen and ( max-width: 768px ){ border-top: 5px solid var(--main-red); border-bottom: 5px solid var(--main-red); } } .l-thanks-contents { display: flex; flex-direction: column; align-items: center; justify-content: space-between; } .l-thanks-image { flex-grow: 1 ; } */ /* body, html { margin: 0; padding: 0; height: 100%; } */ .l-form-body, .l-thanks-body { font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight: 400; } .l-form-wrapper, .l-thanks-wrapper { min-height: 100svh; border-top: 5px solid var(--main-red); border-bottom: 5px solid var(--main-red); display: flex; flex-direction: column; } .l-thanks-wrapper { .wrap.l-thanks-contents { width: 84vw; /* max-width: 630px; */ max-width: 520px; margin: auto; padding-inline: 0; } } .l-form-wrapper { >.wrap.form { width: 84vw; /* max-width: 630px; */ max-width: 520px; margin: auto; padding-inline: 0; } .bottom { padding-top: 45px; } .privacy { margin-top: 8px; } .privacy-box { margin: 0; } .Form-Item { padding-inline: 0; .Form-Item-Label { padding: 0; /* padding-left: 6px; */ font-size: 17px; margin-bottom: 12px; display: flex; align-items: center; } .Form-Item-Label-Inner { display: flex; align-items: center; } .row { width: unset; span { font-weight: 700; font-size: 16px; } } .l-form-input--grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; .row:not(:last-child){ margin-bottom: 0; } .row { display: grid; grid-template-columns: 30px 1fr; place-items: flex-end; align-items: center; } } .Form-Item-Label-Required { font-size: 14px; font-weight: 700; width: fit-content; /* height: 20px; */ line-height: 1; padding: 2px 8px; display: flex; align-items: center; justify-content: center; } } } .l-thanks-contents { flex: 1; display: flex; flex-direction: column; justify-content: space-between; } .l-thanks-image { flex-grow: 1; display: flex; align-items: flex-start; /* align-items: center; */ justify-content: center; margin-top: 24px; margin-bottom: 24px; max-width: 310px; margin-inline: auto; } .l-form-bottom, .l-thanks-bottom { margin-top: auto; padding-bottom: 20px; } @media screen and (min-width: 769px) { .l-form-wrapper, .l-thanks-wrapper { min-height: 100vh; border-top: 10px solid var(--main-red); border-bottom: 10px solid var(--main-red); } .l-thanks-wrapper { .wrap.l-thanks-contents { max-width: 800px; } .l-thanks-image { /* padding-top: 10vh; */ max-width: 689px; width: 87.5%; margin-block: 42px; } } .l-form-wrapper { input[type="text"], input[type="email"], input[type="tel"], select { } input[type="text"], input[type="email"], input[type="tel"], select, textarea { min-height: 50px; font-size: 18px; } .bottom { padding-top: 60px; } .l-form__top-image { max-width: 473px; width: 60%; /* max-width: 700px; width: 87.5%; */ padding: 0; margin-block: 42px; } .l-form-tel__wrapper { width: 95%; max-width: 760px; padding: 0; border: 2px solid #522a13; .l-form-tel__title { font-size: 18px; } .l-form-tel__title-wrapper { width: fit-content; margin-bottom: 0; grid-template-columns: 22px 1fr; height: 40px; /* border-radius: unset; */ } .l-form-tel__title-wrapper-pc { background: var(--main-red); display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; margin-bottom: 0; } .l-form-tel__text-wrapper { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 26px 32px; width: 100%; } .l-form-tel__text { order: 2; margin-bottom: 0; font-size: 16px; font-size: clamp(14px, calc(16 / 940) * 100vw, 16px); text-align: left; line-height: 1.5; } .l-form-tel__link { order: 1; grid-template-columns: auto 1fr; gap: 4px; } .l-form-tel__number-text { /* font-size: 54px; */ font-size: clamp(40px, calc(54 / 940) * 100vw, 54px); } .l-form-tel__tel-icon { /* width: 47px; */ bottom: 0; width: clamp(36px, calc(47 / 940) * 100vw, 47px); } } .l-form-step { width: 63%; max-width: 502px; padding-block: 80px 40px; } .wrap.form { max-width: 800px; } .privacy { margin-top: 56px; } .privacy-box-text { font-size: 18px; &:before { width: 24px; height: 24px; } } .privacy-text { font-size: 14px; } .Form-Item { display: grid; /* grid-template-columns: 290px 1fr; */ grid-template-columns: 36.25% 1fr; padding-block: 20px; &.is-last { border-bottom: 1px solid #a78f80; } > *:not(:first-child) { margin-inline: 32px 20px; } .row { span { font-size: 18px; font-weight: 700; } } .Form-Item-Label-Required { font-size: 14px; padding: 3px 8px; height: 24px; line-height: 24px; } .Form-Item-Input { font-size: 18px; } .Form-Item-Label { display: flex; align-items: center; /* border-right: 1px solid #a78f80; */ margin-bottom: 0; position: relative; font-size: 18px; max-width: 290px; &:before { content: ""; position: absolute; top: -20px; right: 0; height: calc(100% + 40px); width: 1px; background: #a78f80; } } .l-form-input--grid-2 { .row { grid-template-columns: 36px 1fr; } } .Form-Item-Label.isMsg { margin-top: 0; align-items: flex-start; } &.address { grid-template-rows: 1fr 1fr 1fr 1fr 1fr; .row.l-form__row--zip-code { grid-template-columns: 36px 1fr; width: 50%; input { max-width: 100%; } } .Form-Item-Label-Inner { display: flex; align-items: center; /* place-items: flex-end; */ } .Form-Item-Label:first-child { align-items: flex-start; grid-column: 1 / 2; grid-row: 1 / -1; } .row:not(:first-child) { grid-column: 2 / 3; } } } } } input[type="text"], input[type="email"], input[type="tel"], select { -webkit-appearance: none; appearance: none; -moz-appearance: none; } input[type="text"], input[type="email"], input[type="tel"], select, textarea { background-color: #ede9e7; border-radius: 6px; border: none!important; color: #522a13; &:focus { /* outline: none; */ /* background-color: #ede9e7; */ /* box-shadow: 0 0 2px 2px rgba(0,0,0,0.25); */ box-shadow: 0 0 5px 1px rgba(10,10,10,0.3); } &::placeholder { color: #977f71; } } select { position: relative; background-image: url("../images/select-arrow.png"); background-repeat: no-repeat; background-size: 15.5px 9px; background-position: right 20px center; &:before { /* content: ""; position: absolute; top: 50%; right: 12px; transform: translateY(-50%); width: 31px; height: 18px; background-image: url("../images/select-arrow.png"); background-repeat: no-repeat; background-size: contain; background-position: center; */ } } .l-form__top-image { width: 73.4vw; max-width: 277px; margin-inline: auto; padding-block: 24px 24px; } .l-form-tel__wrapper { /* width: 100%; */ /* width: 84%; */ max-width: 310px; margin-inline: auto; background: #fdf0df; border: 1px solid #522a13; border-radius: 6px; padding: 12px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .l-form-tel__title-wrapper { display: grid; grid-template-columns: 16px 1fr; align-items: center; gap: 5px; padding-inline: 10px; border-radius: 13px; height: 28px; background: var(--main-red); color: #fff; margin-bottom: 10px; } .l-form-tel__title { font-size: 15px; font-weight: 700; } .l-form-tel__text { font-size: 14px; line-height: calc(38/28); color: #522a13; text-align: center; margin-bottom: 12px; line-height: 1.4; } .l-form-tel__number-text { color: #522a13; font-size: 32px; font-weight: 700; font-family: "Roboto Condensed", sans-serif; line-height: 1; } .l-form-tel__link { display: grid; grid-template-columns: 27px 1fr; gap: 10px; align-items: center; } .l-form-tel__tel-icon { position: relative; /* bottom: -2px; */ bottom: 0; } .l-form-tel__ { } .l-form-step { width: 67vw; max-width: 250px; margin-inline: auto; padding-block: 40px 30px; } .Form-item { } .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .address { .row.l-form__row--zip-code { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 12px; /* margin-bottom: 20px; */ span { font-size: 21px; width: unset; width: 30px; } input { max-width: 165px; } } } .privacy-box-text { font-size: 16px; font-weight: 700; } .privacy-box-text { display: flex; align-items: center; cursor: pointer; } /* 元のチェックボックスを非表示にする */ .privacy-box input[type="checkbox"] { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /* カスタムチェックボックス（SVGアイコン）のスタイル */ .privacy-box-text::before { content: ""; display: inline-block; width: 20px; height: 20px; margin-right: 8px; background-image: url('../images/square-regular.svg'); background-size: contain; background-repeat: no-repeat; transition: background-image 0.2s ease; } /* チェックされた状態のスタイル */ .privacy-box input[type="checkbox"]:checked + .privacy-box-text::before { background-image: url('../images/square-check-solid.svg'); } /* フォーカス時のスタイル */ .privacy-box input[type="checkbox"]:focus + .privacy-box-text::before { outline: 2px solid #007bff; outline-offset: 2px; } /* ホバー時のスタイル */ .privacy-box:hover::before { opacity: 0.8; } .l-form-submit-button { background: #133c7a; width: 210px; margin-inline: auto; height: 50px; border-radius: 25px; display: flex; align-items: center; justify-content: center; position: relative; top: 0; border: 0; /* border-style: solid; border-width: 3px; border-color: #000; */ transition: 0.3s; padding: 0; font-size: 20px; color: #fff; font-weight: 700; box-shadow: 0 4px 0 #000; &:hover { box-shadow: 0 0 #000; top: 4px; cursor: pointer; } &:disabled { opacity: .5; cursor:not-allowed; &:hover { box-shadow: 0 4px 0 #000; top: 0; } } }