/* CSS Document */ /*------------------------------------------------------ お電話でのお問い合わせ ------------------------------------------------------*/ #contact a { text-decoration: none; } #h5Contact { font-size: 24px; font-weight: bold; color: #1F6AC5; } .contactTel { text-decoration: none;} .telBig { font-size: 24px; font-weight: bold; } /* お客様専用フリーダイヤル */ .emergencyCall { text-align: left; border-radius: 10px; width: 100%; display: table !important; padding: 7px 10px 5px; text-decoration: none; background: #E02811;} .emergencyCall p { padding-bottom: 2px; display: table-cell; vertical-align: middle; } .emergencyCall .eCallText, .emergencyCall .eCallText { position: relative; width: 34%; color: #fff; font-size: 2.4rem; line-height: 1.2em; text-align: left; } .emergencyCall .eCallText:before { content: "\e900"; font-size: 2.4rem; color: #fff; font-family: 'kagiQfont' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .emergencyCall .eCallTextMini { font-size: 1.8rem; display: block; } .emergencyCall .eCallNumber { border-radius: 0 5px 5px 0; background: #fff; color: #333; font-size: 4.0rem; font-weight: bold; line-height: 1.4em; letter-spacing: 2px; padding-bottom: 3px; padding-left: 30px; padding-top: 5px;} /* .emergencyCall .eCallNumber:before { content: "\e90d"; display: inline-block; color: #62A131; font-size: 5.5rem; padding: 0 10px; vertical-align: bottom; font-family: 'kagiQfont' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} */ #contact .tel img { width: 100%; } .eCallBottom { font-weight: bold; color: #F82811; } @media (min-width: 769px){ .emergencyCall .eCallText { padding-left: 45px; } .emergencyCall .eCallText:before { position: absolute; left: 0; top: 30%;nmargin-top: -12px; } } /*-------------------------------------------------------------------- form --------------------------------------------------------------------*/ #form { } #form .heading07 {} #form .note { margin-bottom: 50px; } #form .note > div {} #form .note .text { font-size: 1.5rem; } #form .note .red { font-size: 1.6rem; color: #0086E0; font-weight: bold; padding: 10px 0; } #form .note figure {} #form .note figure img { width: 100%; max-width: 190px; } #form .required { display: inline-block; text-align: center; color: #0086E0; font-size: 1.4rem; font-weight: bold; border-radius: 12px; width: 54px; height: 25px; line-height: 25px; background-color: #ffe934; } #form .note .required { margin-right: 6px; } #form form {} #form form dl { border-left: 5px solid #0086E0; } #form form dl dt { font-size: 1.8rem; font-weight: bold; margin-bottom: 10px; } #form form dl dt .required { vertical-align: 2px; margin-left: 10px; } #form form dl dd {} #form form dl dd span { font-size: 2rem; padding: 0 5px; } #form form dl dd label {} #form form input[type='text'] , #form form input[type='tel'] { margin: 0; border: 1px solid #a8a8a8; height: 40px; padding: 5px; width: 100%; font-size: 1.6rem; } #form form input[type='checkbox'] {} #form form textarea { margin: 0; border: 1px solid #a8a8a8; padding: 5px; width: 100%; font-size: 1.6rem; } #form form .post input[type='tel'] { width: 150px; } #form .btnWrap { text-align: center; padding-top: 30px; } #form .btnWrap .btn { background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; appearance: none; background: none; color: #0086E0; border: 1px solid #0086E0; box-shadow: none; width: 100%; max-width: 280px; font-size: 2rem; padding: 19px 5px; cursor: pointer; } #form .btnWrap .return { cursor: pointer; display: inline-block; margin-top: 20px; } #form form .err { font-size: 1.4rem; color: #0086E0; background-color: pink; } @media (min-width: 768px){ #form .note > div { width: calc(100% - (190px + 40px)); } #form .note figure { width: 190px; } #form form dl { padding-left: 50px; margin-bottom: 30px; padding-top: 10px; padding-bottom: 10px; } #form form dl dd label { width: 31%; } #form form input[type='text'] , #form form input[type='tel'] { max-width: 660px; } #form form input[type='text'].w290 { max-width: 290px; } #form form textarea { height: 210px; } #form .btnWrap .btn { transition-property: background; transition-duration: 0.2s; } #form .btnWrap .btn:hover { background-color: #0086E0; color: #fff; } #form .btnWrap .return:hover { text-decoration: underline; } } @media (max-width: 767px) { #form { margin-bottom: 100px; } #form .note > div { width: 100%; margin-bottom: 15px; } #form .note figure { width: 100%; text-align: center; } #form form dl { padding-left: 30px; margin-bottom: 20px; padding-top: 5px; padding-bottom: 5px; } #form form dl dd label { width: 45%; } #form form textarea { height: 160px; } } @media (max-width: 480px) { #form form dl { padding-left: 20px; } #form form dl dd label { width: 100%; display: block;} #form form dl dd.colWrap { line-height: 0.5em; } #form form dl dd.colWrap .err { line-height: 1; } #form form .post input[type='tel'] { width: 100px; } } /*------------------------------------------------------ 送信完了画面 ------------------------------------------------------*/ .thanks { font-size: 2rem; text-align: center; padding: 40px 20px; margin-bottom: 20px; background-color: #FCFBD2; } #confirm { text-align:center; } #confirm input { margin:0 auto; width:244px; height:46px; cursor:pointer; font-size:1.4rem;} #confirm input:hover { opacity:0.8;} /*-------------------------------------------------------------------- LineContact --------------------------------------------------------------------*/ #LineContact {} #LineContact .heading07 {} #LineContact .colWrap {} #LineContact > .colWrap { /*margin-bottom: 40px;*/ } #LineContact > .colWrap figure {} #LineContact > .colWrap figure img { width: 100%; max-width: 148px; } #LineContact > .colWrap div {} #LineContact > .colWrap .title { font-weight: bold; margin-bottom: 7px; } #LineContact > .colWrap .text { font-size: 1.5rem; } #LineContact .flow {} /* #LineContact .heading03 { border-bottom: 2px solid #ef2516; margin-bottom: 18px; padding-bottom: 4px; } */ #LineContact .flow .colWrap { border-bottom: 1px solid #ddd; } #LineContact .flow dl {} #LineContact .flow dl dt { width: 87px; border: 2px solid #ef2516; height: 26px; line-height: 22px; text-align: center; font-size: 1.4rem; border-radius: 13px; margin-bottom: 10px; } #LineContact .flow dl dd { font-size: 1.5rem; } #LineContact .flow dl dd a { margin: 0 10px; vertical-align: -2px; } #LineContact .flow dl dd img { max-width: 119px; width: 100%; } #LineContact .flow figure {} #LineContact .flow figure img { width: 100%; max-width: 130px; } #LineContact .flow .colWrap:first-of-type { margin-bottom: 20px; } #LineContact .flow .colWrap:first-of-type dl {} #LineContact .flow .colWrap:first-of-type figure {} #LineContact .flow .colWrap:last-of-type { border: none; } #LineContact .flow .colWrap:last-of-type dl { margin-bottom: 20px; } #LineContact .flow .colWrap:last-of-type dl:first-child { border-bottom: 1px solid #ddd; padding-bottom: 20px; } #LineContact .flow .colWrap:last-of-type figure { border: 1px solid #eee; } #LineContact .flow .colWrap:last-of-type figure img { max-width: 244px; } #LineContact .caution {} /* #LineContact .caution .heading03 {} */ #LineContact .caution ul { list-style-type: none; margin-bottom: 0; } #LineContact .caution ul li { font-size: 1.4rem; } #LineContact .list-a { line-height: 1.4; } @media (min-width: 769px){ #LineContact { margin-bottom: 100px; } #LineContact .colWrap { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } #LineContact > .colWrap figure { width: 148px; } #LineContact > .colWrap div { width: calc(100% - (148px + 40px)); } #LineContact > .colWrap .title { font-size: 2rem; } #LineContact .flow { margin-bottom: 10px; } #LineContact .flow .colWrap:first-of-type dl { width: calc(100% - (130px + 20px)); } #LineContact .flow .colWrap:first-of-type figure { width: 130px; margin-bottom: 10px; } #LineContact .flow .colWrap:last-of-type > div { width: calc(100% - (246px + 40px)); } #LineContact .flow .colWrap:last-of-type figure { width: 246px; } } @media (max-width: 768px) { #LineContact { margin-bottom: 60px; } #LineContact > .colWrap figure { width: 100%; text-align: center; margin-bottom: 10px; } #LineContact > .colWrap div { width: 100%; } #LineContact > .colWrap .title { font-size: 1.8rem; } #LineContact .flow { margin-bottom: 15px; } #LineContact .flow .colWrap:first-of-type figure { width: 100%; text-align: center; margin-bottom: 15px; } #LineContact .flow .colWrap:last-of-type figure { width: 100%; text-align: center; } } @media (max-width: 480px) { }