/* -------------------------------------------------------------------------------------- #contact -------------------------------------------------------------------------------------- */ #contact {padding: 90px 5%;position: relative; z-index: 1;} @media only screen and (max-width: 960px) { #contact {padding: 80px 5%; } } @media only screen and (max-width: 738px) { #contact {padding: 70px 5% ; } } /* .contactArea */ #contact .contactArea { position: relative; padding: 95px 5%; z-index: 1; text-align: center;} #contact .contactArea:before { position: absolute; top: 7px; right: 7px; bottom: 7px; left: 7px; content: ""; border: #111 1px solid; z-index: -1;} #contact .contactArea:after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; border: #111 3px solid; z-index: -1;} /* .deco */ #contact .contactArea .deco_t_l { position: absolute; top: -4px; left: -4px; height: 80px; width: 150px; background: url(../images/company/deco_t_l.png) top left no-repeat; background-size: contain; z-index: 2;} #contact .contactArea .deco_t_r { position: absolute; top: -4px; right: -4px; height: 80px; width: 150px; background: url(../images/company/deco_t_r.png) top right no-repeat; background-size: contain; z-index: 2;} #contact .contactArea .deco_b_l { position: absolute; bottom: -4px; left: -4px; height: 80px; width: 150px; background: url(../images/company/deco_b_l.png) bottom left no-repeat; background-size: contain; z-index: 2;} #contact .contactArea .deco_b_r { position: absolute; bottom: -4px; right: -4px; height: 80px; width: 150px; background: url(../images/company/deco_b_r.png) bottom right no-repeat; background-size: contain; z-index: 2;} #contact .contactArea .deco_t_c {width: 150px; height: 23px; background: url(../images/company/deco_t_c.png) top center no-repeat; background-size: contain; display: inline-block; position: absolute; top: -9px; left: 50%; -webkit-transform: translate(-50%, 0);transform: translate(-50%, 0); z-index:2; text-align:center; } #contact .contactArea .deco_b_c {width: 150px; height: 23px; background: url(../images/company/deco_b_c.png) top center no-repeat; background-size: contain; display: inline-block; position: absolute; bottom: -9px; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); z-index:2; text-align:center;} @media only screen and (max-width: 960px) { #contact .contactArea { padding: 85px 5%;} } @media only screen and (max-width: 738px) { #contact .contactArea { padding: 75px 8%; } #contact .contactArea:before { top: 5px; right: 5px; bottom: 5px; left: 5px; } #contact .contactArea:after { border: #111 2px solid;} /* .deco */ #contact .contactArea .deco_t_l { top: -3px; left: -3px; height: 50px; width: 94px; } #contact .contactArea .deco_t_r { top: -3px; right: -3px; height: 50px; width: 94px;} #contact .contactArea .deco_b_l { bottom: -3px; left: -3px; height: 50px; width: 94px; } #contact .contactArea .deco_b_r { bottom: -3px; right: -3px; height: 50px; width: 94px; } #contact .contactArea .deco_t_c {width: 120px; height: 18px; top: -6px;} #contact .contactArea .deco_b_c {width: 120px; height: 18px; bottom: -6px;} } /* .inner */ #contact .contactArea .inner {display: flex; flex-wrap: wrap; justify-content: space-between; position: relative; z-index: 1;} #contact .contactArea .inner:before { position: absolute; top: 0; left: 50%; bottom: 0; width: 0; content: ""; border-left: #111 1px dotted; z-index: -1;} /* h3 */ #contact .contactArea .t_ttl_sub { display: inline-block; margin: 0 auto; padding: 0 25px; font-size: 20px; font-weight: 600; letter-spacing: 0.035em; line-height: 1.7; text-indent: 0.05em; position: relative; z-index: 1;} #contact .contactArea .t_ttl_sub:before { position: absolute; top: 0; bottom: 0; left: 0; width: 5px; content: ""; border-top:#111 1px solid; border-bottom:#111 1px solid; border-left: #111 1px solid; z-index: -1;} #contact .contactArea .t_ttl_sub:after { position: absolute; top: 0; bottom: 0; right: 0; width: 5px; content: ""; border-top:#111 1px solid; border-bottom:#111 1px solid; border-right: #111 1px solid; z-index: -1;} /* .shopArea */ #contact .contactArea .shopArea, #contact .contactArea .customerArea {width: 45%;display: flex; flex-direction: column; justify-content: space-between;} /* .txtArea */ #contact .contactArea .txtArea { margin: 30px 2.5% 0; text-align: left;flex-grow: 1;} /* .linkArea */ #contact .contactArea .linkArea {margin-top: 25px;} @media only screen and (max-width: 960px) { #contact .contactArea .inner {flex-direction: column; } #contact .contactArea .inner:before { display: none; } #contact .contactArea .t_ttl_sub { padding: 0 20px; font-size: 18px; line-height: 1.6; } #contact .contactArea .shopArea, #contact .contactArea .customerArea {width: 100%; padding: 0 2.5%; display: block;} #contact .contactArea .customerArea {margin-top: 45px; padding-top: 45px; border-top: #111 1px dotted;} } @media only screen and (max-width: 738px) { #contact .contactArea .inner {flex-direction: column; } #contact .contactArea .inner:before { display: none; } #contact .contactArea .t_ttl_sub { padding: 0 14px 0 15px; font-size: 17px; letter-spacing: 1.5px; text-indent: 1.5px; line-height: 1.6; } #contact .contactArea .shopArea, #contact .contactArea .customerArea {width: 100%; padding: 0;} #contact .contactArea .customerArea { margin-top: 50px; padding-top: 50px; } #contact .shopArea .txtArea, #contact .customerArea .txtArea { margin: 15px 0 0; } } /* .noticeArea */ #contact .contactArea .noticeArea { margin: 90px auto 0; padding: 45px 7.5% 60px; max-width: 950px; position: relative; z-index: 1; text-align:left;} #contact .contactArea .noticeArea:after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; border: #111 1px dotted; z-index: -1; } @media only screen and (max-width: 960px) { #contact .contactArea .noticeArea { margin: 80px auto 0; padding: 35px 6.5% 50px; } } @media only screen and (max-width: 738px) { #contact .contactArea .noticeArea { margin: 60px auto 0; padding: 30px 0 0; } #contact .contactArea .noticeArea:after { border:none; border-top: #111 1px dotted; } } /* h3 */ #contact .contactArea .noticeArea h3 { position: absolute; top: -10px; width: 140px; left: 50%; margin-left: -70px; font-size: 20px; font-family: 'Libre Baskerville', serif; font-style: italic; font-weight: 400; letter-spacing: 1px; line-height: 20px; background: #fefefe; text-align: center;} /* .noticeBox */ #contact .contactArea .noticeBox { margin-top: 35px;} #contact .contactArea .noticeBox:first-child { margin-top: 0;} /* h4 */ #contact .contactArea .noticeBox h4 { margin-bottom: 5px; padding-left: 1.5em; font-size: 18px; font-weight: 600; letter-spacing: 0.035em; line-height: 1.7; position: relative; z-index: 1;} #contact .contactArea .noticeBox h4:before{ position:absolute; top: 0; left: 0; color: #999; font-family:themify; content: "\e64c"; z-index: -1;} @media only screen and (max-width: 960px) { #contact .contactArea .noticeArea h3 { width: 100px;margin-left: -50px; font-size: 18px; } #contact .contactArea .noticeBox { margin-top: 25px;} } @media only screen and (max-width: 738px) { #contact .contactArea .noticeArea h3 { font-size: 16px; } #contact .contactArea .noticeBox h4 {font-size: 15.5px; } } /* ul.notice */ #contact .contactArea ul.notice { margin-top: 45px; padding-top: 45px; list-style: none; border-top: #111 1px dotted; } #contact .contactArea ul.notice li {display: block; padding-left: 1.5em; font-size: 15px; font-weight: 400; line-height: 1.9; letter-spacing: 0.035em; position: relative; z-index: 1; } #contact .contactArea ul.notice li+li { margin-top: 5px;} #contact .contactArea ul.notice li:before { position: absolute; top: 0; left: 0; color: #999; content: "※"; z-index: -1;} @media only screen and (max-width: 960px) { #contact .contactArea ul.notice { margin-top: 40px; padding-top: 40px; } } @media only screen and (max-width: 738px) { #contact .contactArea ul.notice { margin-top: 35px; padding-top: 35px; } #contact .contactArea ul.notice li {padding-left: 1.25em; font-size: 16px; font-weight: 400; line-height: 1.75;} #contact .contactArea ul.notice li+li { margin-top: 10px;} } /* -------------------------------------------------------------------------------------- フォームページ -------------------------------------------------------------------------------------- */ /* .descriptionArea */ .descriptionArea { margin: 0 auto 45px; display: block;} @media only screen and (max-width: 960px) { .descriptionArea { margin: 0 auto 40px;} } @media only screen and (max-width: 738px) { .descriptionArea { margin: 0 auto 35px; text-align: left;} .descriptionArea p br {display: none;} } /* .formArea */ #contact .contactArea .formArea { display: flex; flex-wrap: wrap; justify-content: space-between; position: relative; z-index: 1; padding: 45px 0; border-top: #111 1px dotted;} /* .leftArea */ #contact .contactArea .leftArea { width: 30%; text-align: left;} #contact .contactArea .leftArea h3 { display: block; margin: 0; padding: 0; font-size: 16px; font-family: 'Shippori Mincho B1', serif; font-weight: 600; letter-spacing: 0.05em; line-height: 1.8; text-indent: 0; } #contact .contactArea .leftArea h3:before, #contact .contactArea .leftArea h3:after { display: none;} /* .rightArea */ #contact .contactArea .rightArea { width:70%; padding-left: 5%; border-left: #111 1px dotted; } @media only screen and (max-width: 960px) { #contact .contactArea .leftArea h3 { font-size: 15px;} #contact .contactArea .leftArea { width: 25%; } #contact .contactArea .rightArea { width:75%; } } @media only screen and (max-width: 738px) { #contact .contactArea .formArea { padding: 35px 0;} #contact .contactArea .leftArea { display: none;} #contact .contactArea .rightArea { width:100%; padding-left: 0; border-left: none; } } /* ol.formlist */ ol.formlist { width: 100%; margin: -25px auto 0; list-style:none;} ol.formlist li { list-style: none; margin-top: 25px; text-align: left;} @media only screen and (max-width: 738px) { ol.formlist { margin: -20px auto 0;} ol.formlist li { margin-top: 20px;} } /* form */ form { font-size: 16px; font-weight: 400; letter-spacing: 0.035em; line-height: 2;} input, button, textarea{ -webkit-appearance: none; border-radius: 0;} input, select, textarea { font-size: 100%; display: block; } input,textarea { padding: 12px; border: #ddd 1px solid; width: 100%;-webkit-transition: all 0.3s ease; transition: all 0.3s ease;} textarea {height: 15em;} input.w400 { width: 400px; max-width: 100%; } input.w150 { width: 150px; max-width: 100%; } input:focus, textarea:focus{ border: #111 1px solid; } @media only screen and (max-width: 960px) { input,textarea { padding: 10px;} textarea {height: 12em;} } /* label */ #contact label { width: 100%; display: block; margin-bottom: 5px; font-size:16px; font-weight: 600; line-height: 25px;} #contact label span { margin-left: 5px; color: #fe831f; font-size: 13px; font-weight: 500;} @media only screen and (max-width: 738px) { form { font-size: 16px;line-height: 1.9;} #contact label { font-size: 16px; margin: 0 0 3px; } } @media only screen and (max-width: 640px) { form { line-height: 1.85; } } /* .btnArea */ #contact .contactArea .btnArea { padding: 45px 0; border-top: #111 1px dotted;} #contact .contactArea .btnArea .submitbtn { display: block; width:280px; max-width:100%; padding: 0; margin:0 auto; color:#fefefe; background:#111; border:#111 2px solid; font-size: 15px; text-decoration: none; text-align:center; font-weight:400; line-height: 60px; letter-spacing: 1px; cursor: pointer; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } @media only screen and (max-width: 960px) { #contact .contactArea .btnArea { padding: 40px 0; } } @media only screen and (max-width: 738px) { #contact .contactArea .btnArea { padding: 35px 0; } #contact .contactArea .btnArea .submitbtn {line-height: 50px; } } /* .supplementArea */ #contact .contactArea .supplementArea { margin: 0 auto;} #contact .contactArea .supplementArea p { font-size: 14px;} @media only screen and (max-width: 738px) { #contact .contactArea .supplementArea { text-align: left;} #contact .contactArea .supplementArea p br {display: none;} } /* input.sebdButton, input.resetButton*/ input.sebdButton, input.resetButton { display: inline-block; width:280px; max-width:100%; margin: 0 10px; padding: 0; color:#fefefe; background:#111; border:#111 2px solid; font-size: 16px; text-decoration: none; text-align:center; font-weight:400; line-height:60px; letter-spacing: 0.05em; cursor: pointer; -webkit-transition: all 0.3s ease; transition: all 0.3s ease;} input.resetButton { color: #111; background: #fefefe;} @media (min-width: 961px) and (hover: hover) { input.sebdButton:hover { background: #fefefe; color: #111;} input.resetButton:hover {background: #111; color: #fefefe;} } @media only screen and (max-width: 738px) { input.sebdButton, input.resetButton { display: block; margin: 10px auto 0; font-size:16px;line-height: 50px; } } /* validationEngine.jquery.css */ .inputContainer { position: relative; float: left; } .formError { position: absolute; top: 300px; left: 300px; display: block; z-index: 5000; cursor: pointer; text-align: left; } .ajaxSubmit { padding: 20px; background: #55ea55; border: 1px solid #999; display: none } .formError .formErrorContent { width: 100%; background: #ffeff5; position: relative; z-index: 5001; color: #dc2b19; width: auto; width: 300px; font-size: 13px; line-height: 1.5; border: none; margin-top: 1px; padding: 5px 15px; } @media only screen and (max-width: 768px) { .formError .formErrorContent { width: auto; } } .greenPopup .formErrorContent { background: #33be40; } .blackPopup .formErrorContent { background: #393939; color: #FFF; } .formError .formErrorArrow { width: 15px; margin: -2px 0 0 13px; position: relative; z-index: 5006; } .formError .formErrorArrowBottom { margin: 0px 0 0 12px; top: 2px; } .formError .formErrorArrow div { border-left: 1px solid #fe831f; border-right: 1px solid #fe831f; font-size: 0px; height: 1px; background: #fe831f; margin: 0 auto; line-height: 0; font-size: 0; display: block; } .formError .formErrorArrowBottom div { } .greenPopup .formErrorArrow div { background: #33be40; } .blackPopup .formErrorArrow div { background: #393939; color: #FFF; } .formError .formErrorArrow .line10 { width: 15px; border: none; } .formError .formErrorArrow .line9 { width: 13px; border: none; } .formError .formErrorArrow .line8 { width: 11px; } .formError .formErrorArrow .line7 { width: 9px; } .formError .formErrorArrow .line6 { width: 7px; } .formError .formErrorArrow .line5 { width: 5px; } .formError .formErrorArrow .line4 { width: 3px; } .formError .formErrorArrow .line3 { width: 1px; border-left: 2px solid #ddd; border-right: 2px solid #ddd; border-bottom: 0 solid #ddd; } .formError .formErrorArrow .line2 { width: 3px; border: none; background: #ddd; } .formError .formErrorArrow .line1 { width: 1px; border: none; background: #ddd; }