/**************************** common.css ********************************/
/* =========================================================
body
========================================================= */
body {
color: #030303;
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
-webkit-font-smoothing: antialiased;
word-break: break-word;
letter-spacing: 0.08em;
}
input,
button,
textarea,
select {
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: none;
}
*:before,
*:after {
display: block;
}
img {
max-width: 100%;
height: auto;
}
img.w100 {
width: 100%;
}
a {
text-decoration: none;
}
.en {
font-family: "Questrial", sans-serif;
font-weight: 400;
font-style: normal;
}
@media (max-width: 768px) {
.pc-br {
display: none;
}
}
@media (min-width: 769px) {
.pc-br {
display: inline;
}
}
@media (max-width: 768px) {
.sp-br {
display: inline;
}
}
@media (min-width: 769px) {
.sp-br {
display: none;
}
}
@media (max-width: 768px) {
.pc-disp {
display: none !important;
}
}
@media (min-width: 769px) {
.sp-disp {
display: none !important;
}
}
@media (hover: hover) {
.opacity-link {
-webkit-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
}
.opacity-link:hover {
opacity: 0.6;
}
}
@media (hover: hover) {
.underline-link {
-webkit-transition: 0.2s;
transition: 0.2s;
}
.underline-link:hover {
text-decoration: underline;
}
}
/* =========================================================
common parts
========================================================= */
.wrapper {
min-width: 320px;
position: relative;
}
section {
width: 100%;
}
main {
line-height: 1.4;
overflow: hidden;
position: relative;
z-index: 2;
}
/**************************** common.css End ****************************/
/**************************** reset.css End ****************************/
/* Reset box-model and set borders */
/* ============================================ */
*:not(.wysiwyg *) {
box-sizing: border-box;
border-style: solid;
border-width: 0;
}
::before,
::after {
box-sizing: border-box;
border-style: solid;
border-width: 0;
}
/* Document */
/* ============================================ */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
* 3. Remove gray overlay on links for iOS.
*/
html {
line-height: 1.15;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
-webkit-tap-highlight-color: transparent;
/* 3*/
}
/* Sections */
/* ============================================ */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/* Vertical rhythm */
/* ============================================ */
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
margin: 0;
}
/* Headings */
/* ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
margin: 0;
}
/* Lists (enumeration) */
/* ============================================ */
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}
/* Lists (definition) */
/* ============================================ */
dt {
font-weight: bold;
}
dd {
margin-left: 0;
}
/* Grouping content */
/* ============================================ */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box;
/* 1 */
height: 0;
/* 1 */
overflow: visible;
/* 2 */
border-top-width: 1px;
margin: 0;
clear: both;
color: inherit;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace;
/* 1 */
font-size: inherit;
/* 2 */
}
address {
font-style: inherit;
}
/* Text-level semantics */
/* ============================================ */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
text-decoration: none;
color: inherit;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
text-decoration: underline dotted;
/* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace;
/* 1 */
font-size: inherit;
/* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Replaced content */
/* ============================================ */
/**
* Prevent vertical alignment issues.
*/
svg,
img,
embed,
object,
iframe {
vertical-align: bottom;
}
/* Forms */
/* ============================================ */
/**
* Reset form fields to make them styleable.
* 1. Make form elements stylable across systems iOS especially.
* 2. Inherit text-transform from parent.
*/
button,
input,
optgroup,
select,
textarea {
-webkit-appearance: none;
/* 1 */
appearance: none;
vertical-align: middle;
color: inherit;
font: inherit;
background: transparent;
padding: 0;
margin: 0;
border-radius: 0;
text-align: inherit;
text-transform: inherit;
/* 2 */
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
cursor: pointer;
}
button:disabled,
[type="button"]:disabled,
[type="reset"]:disabled,
[type="submit"]:disabled {
cursor: default;
}
:-moz-focusring {
outline: auto;
}
select:disabled {
opacity: inherit;
}
option {
padding: 0;
}
fieldset {
margin: 0;
padding: 0;
min-width: 0;
}
legend {
padding: 0;
}
progress {
vertical-align: baseline;
}
textarea {
overflow: auto;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
outline-offset: -2px;
/* 1 */
}
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
[type="number"] {
-moz-appearance: textfield;
}
label[for] {
cursor: pointer;
}
details {
display: block;
}
summary {
display: list-item;
}
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
margin: 0;
/* padding: 0;*/
/* border: 0; */
font-size: 62.5%;
font: inherit;
vertical-align: baseline;
box-sizing: border-box;
border-collapse: collapse;
border-spacing: 0;
}
/**************************** reset.css End ****************************/
/**************************** form.css ********************************/
/*------------------------------------------
header,footer
------------------------------------------*/
.form__header {
width: 100%;
height: 250px;
background: url(https://www.dpcity.com/forms/silver-i/assets/images/h_bg_sp.png) no-repeat center bottom/100%;
padding: 100px 0 0;
position: relative;
overflow: hidden;
}
@media (min-width: 769px) {
.form__header {
height: 21.3762811127vw;
background: url(https://www.dpcity.com/forms/silver-i/assets/images/h_bg_pc.png) no-repeat center/100%;
padding: 8.78477306vw 0 0;
}
}
.form__header .logo {
width: 124px;
position: absolute;
top: 14px;
left: 14px;
}
@media (min-width: 769px) {
.form__header .logo {
width: 186px;
top: 32px;
left: 32px;
}
}
.form__header .logo>a {
display: block;
}
.form__header .ttl {
text-align: center;
}
.form__header .ttl>span {
display: block;
}
.form__header .ttl .en {
line-height: 1;
color: #ffffff;
font-weight: 400;
font-size: 64px;
}
@media (min-width: 769px) {
.form__header .ttl .en {
font-size: 120px;
}
}
.form__header .ttl .ja {
letter-spacing: 0.1em;
font-weight: 700;
font-size: 20px;
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
@media (min-width: 769px) {
.form__header .ttl .ja {
font-size: 24px;
-webkit-transform: translateY(-35px);
transform: translateY(-35px);
}
}
.form__footer {
width: 100%;
background: #ffffff;
padding: 64px 0 40px;
}
@media (min-width: 769px) {
.form__footer {
padding: 96px 0;
}
}
.form__footer .copyright {
text-align: center;
font-weight: 400;
font-size: 10px;
}
/*------------------------------------------
カレンダー
------------------------------------------*/
.ui-datepicker {
width: 330px;
padding: 20px 10px 24px;
background: #ffffff;
border: 1px solid #bebebe;
border-radius: 8px;
}
.ui-datepicker .ui-datepicker-header {
background-color: #ffffff;
color: #030303;
padding: 0;
margin-bottom: 16px;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-header .ui-datepicker-next {
top: 0;
width: 32px;
height: 32px;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev::before,
.ui-datepicker .ui-datepicker-header .ui-datepicker-next::before {
content: "";
width: 100%;
height: 100%;
background: url(https://www.dpcity.com/forms/silver-i/assets/images/calendar_arrow.png) no-repeat center/100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
z-index: 3;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev {
left: 0;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-next {
right: 0;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-next::before {
-webkit-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-title {
line-height: 1.6em;
font-weight: 700;
font-size: 20px;
}
.ui-datepicker .ui-datepicker-week-end {
color: #030303;
}
.ui-datepicker .ui-datepicker-week-end a.ui-state-default {
color: #030303;
}
.ui-datepicker .ui-datepicker-week-end:first-of-type {
color: #0B4FB6;
}
.ui-datepicker table {
font-weight: 700;
font-size: 12px;
}
.ui-datepicker table thead {
border-radius: 4px;
overflow: hidden;
}
.ui-datepicker table thead tr {
background-color: #F5F5F5;
}
.ui-datepicker table thead tr:hover {
background-color: #F5F5F5;
}
.ui-datepicker tr:hover {
background-color: transparent;
}
.ui-datepicker td {
text-align: center;
padding: 12px 0 0;
}
.ui-datepicker td a,
.ui-datepicker td span {
text-align: center;
}
/*------------------------------------------
main
------------------------------------------*/
.preview-notice {
width: 100%;
height: 100px;
margin: 0 auto 60px;
background: #4169e1;
font-size: 20px;
font-weight: bold;
color: #f9f9f9;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.main__form {
width: 100%;
margin: 0 auto;
}
@media (min-width: 769px) {
.main__form {
max-width: 760px;
margin: 50px auto 0;
}
}
@media (max-width: 768px) {
.main__form {
padding: 0 24px;
}
}
.main__form .lead {
line-height: 2;
font-size: 14px;
margin-bottom: 40px;
}
@media (min-width: 769px) {
.main__form .lead {
font-size: 16px;
margin-bottom: 56px;
}
}
.main__form .form__info,
.main__form .items{
width: 100%;
}
.main__form textarea{
/* width: 100% !important; */
}
.main__form .item {
margin-bottom: 40px;
display: block;
}
.main__form td {
display: block;
}
.main__form td.label {
width: 100%;
margin-bottom: 14px;
color: #030303;
font-weight: 700;
font-size: 14px;
display: flex;
gap: 6px;
align-items: center;
}
@media (min-width: 769px) {
.main__form td.label {
font-size: 16px;
}
}
/* .main__form #item_0 td.value,
.main__form #item_1 td.value {
position: relative;
}
.main__form #item_0 td.value::after,
.main__form #item_1 td.value::after {
content: "";
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
right: 20px;
width: 0;
height: 0;
border-style: solid;
border-width: 6px 6px 0 6px;
border-color: #030303 transparent transparent transparent;
} */
.main__form td.value {
width: 100%;
border-radius: 8px;
}
.main__form span.required {
font-size: 12px;
color: #ffffff;
}
.main__form span.required:after {
content: "必須";
background: #FF4343;
padding: 1px 4.8px;
border-radius: 2px;
}
.main__form select,
.main__form textarea,
.main__form input {
width: 100%;
background: #f8f8f8;
border-radius: 8px;
padding: 16px 56px 16px 16px;
}
@media (min-width: 769px) {
.main__form select,
.main__form textarea,
.main__form input {
padding: 20px;
}
}
.main__form select::-webkit-input-placeholder,
.main__form textarea::-webkit-input-placeholder,
.main__form input::-webkit-input-placeholder,
.main__form select::-moz-placeholder,
.main__form textarea::-moz-placeholder,
.main__form input::-moz-placeholder,
.main__form select:-ms-input-placeholder,
.main__form textarea:-ms-input-placeholder,
.main__form input:-ms-input-placeholder,
.main__form select::-ms-input-placeholder,
.main__form textarea::-ms-input-placeholder,
.main__form input::-ms-input-placeholder,
.main__form select::placeholder,
.main__form textarea::placeholder,
.main__form input::placeholder {
color: #bebebe;
}
.main__form input[type=radio] {
-moz-appearance: none;
appearance: none;
-webkit-appearance: none;
position: relative;
cursor: pointer;
padding: 0;
background: #ffffff;
border-radius: 50%;
border: 1px solid #e8e8e8;
width: 24px;
height: 24px;
margin-right: 6px;
}
.main__form input[type=radio]::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-radius: 50%;
background-color: #030303;
}
.main__form input[type=radio]:checked {
background: #ffffff;
}
.main__form input[type=radio]:checked::after {
width: 12px;
height: 12px;
}
.main__form input[type=checkbox] {
-moz-appearance: none;
appearance: none;
-webkit-appearance: none;
position: relative;
cursor: pointer;
padding: 0;
background: #ffffff;
border-radius: 5px;
border: 1px solid #e8e8e8;
width: 24px;
height: 24px;
margin-right: 6px;
}
.main__form input[type=checkbox]:checked {
background: #ffffff;
}
.main__form input[type=checkbox]:checked::after {
content: "";
background: url(https://www.dpcity.com/forms/silver-i/assets/images/icon_check.svg) no-repeat center/100%;
width: 10px;
height: 6px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.main__form .calender {
width: 180px;
}
@media (min-width: 769px) {
.main__form .calender {
width: 210px;
}
}
.main__form #item_14 {
text-align: center;
border-radius: 8px;
background: #f8f8f8;
padding: 32px 36px;
}
@media (min-width: 769px) {
.main__form #item_14 {
padding: 32px;
}
}
.main__form #item_14 input[type=checkbox] {
border: 1px solid #0B4FB6;
}
.main__form #item_14 td.label {
color: #0B4FB6;
position: relative;
font-size: 14px;
justify-content: center;
}
@media (min-width: 769px) {
.main__form #item_14 td.label {
font-size: 16px;
}
}
.main__form #item_14 td.label .required {
display: none;
}
.main__form td.comment {
margin-top: 16px;
font-size: 12px;
}
@media (min-width: 769px) {
.main__form td.comment {
margin-top: 24px;
font-size: 14px;
}
}
.main__form .button_area {
width: 296px;
/* height: 56px; */
margin: 0 auto;
position: relative;
}
@media (min-width: 769px) {
.main__form .button_area {
cursor: pointer;
width: 366px;
/* height: 72px; */
-webkit-transition: 0.2s;
transition: 0.2s;
}
/* .main__form .button_area:hover {
opacity: 0.4;
} */
}
.main__form .button_area::after {
content: "";
background: url(https://www.dpcity.com/forms/silver-i/assets/images/icon_arrow_w.png) no-repeat center/100%;
width: 10px;
height: 7px;
position: absolute;
top: 0;
right: 24px;
bottom: 0;
margin: auto;
z-index: 3;
}
@media (min-width: 769px) {
.main__form .button_area::after {
right: 30px;
}
}
.main__form .button_area>input {
width: 100%;
height: 56px;
background: #0B4FB6;
color: #ffffff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 14px;
border-radius: 36px;
-webkit-transition: 0.2s;
transition: 0.2s;
text-align: center;
}
@media (min-width: 769px) {
.main__form .button_area>input {
font-size: 16px;
height: 72px;
}
}
.privacy_policy {
border-radius: 8px;
background: #F8F8F8;
padding: 32px 50px;
margin: 0 auto 40px;
}
@media (min-width: 769px) {
.privacy_policy {
padding: 32px 74px;
}
}
.privacy_policy > a{
color: #0B4FB6;
text-decoration: underline;
transition: .2s;
}
.privacy_policy > a:hover{
text-decoration: none;
}
.privacy_policy .privacy-text-master{
line-height: 2;
}
/*------------------------------------------
confirmページ
------------------------------------------*/
#frm_formconfirm .main__form #item_0 td.value::after,
#frm_formconfirm .main__form #item_1 td.value::after,
#frm_formconfirm #item_14 {
display: none;
}
#frm_formconfirm .main__form td.label {
color: #464646;
font-weight: 500;
font-size: 12px;
}
@media (min-width: 769px) {
#frm_formconfirm .main__form td.label {
font-size: 14px;
}
}
#frm_formconfirm .main__form .value {
line-height: 2;
font-weight: 700;
font-size: 14px;
}
@media (min-width: 769px) {
#frm_formconfirm .main__form .value {
font-size: 16px;
}
}
#frm_formconfirm .button_area>input#button_confirm_back {
background: #bebebe;
width: 262px;
height: 56px;
margin: 16px auto;
}
@media (min-width: 769px) {
#frm_formconfirm .button_area>input#button_confirm_back {
width: 310px;
height: 56px;
margin: 32px auto;
}
}
#frm_formconfirm .button_area>input#button_confirm_back::after {
-webkit-transform: scale(-1, 1);
transform: scale(-1, 1);
right: auto;
left: 24px;
}
@media (min-width: 769px) {
#frm_formconfirm .button_area>input#button_confirm_back::after {
left: 20px;
}
}
.main__form .message {
line-height: 2;
color: #ff4343;
font-size: 12px;
margin-bottom: 12px;
}
@media (min-width: 769px) {
.main__form .message {
font-size: 14px;
}
}
/**************************** form.css End ****************************/
プライバシーポリシーに同意の上、送信してください。
同意して送信すると、Cookieにより当社のWebサイト上における閲覧履歴と個人情報を紐付けて把握、分析する場合があります。