.contact{ margin-right: auto; /*ここで中央寄せを指定する。*/ margin-left : auto; width: 80%; max-width: 800px; } .td_items{ width: 280px; text-align: right; } .text_item{ font-size: 16px; } .text_sub{ font-size: 12px; } input{ box-sizing: border-box; font-size: 16px; padding: 0.5em; transition: 0.3s; letter-spacing: 1px; border: 1px solid #ffffff; box-shadow: 1px 1px 2px 0 #707070 inset; border-radius: 4px; } label{ font-size: 16px; } .text_main{ font-size: 100%; font-weight: normal; } .lbl_sky{ font-size: 110%; font-weight: bold; } .a_tell{ font-size: 200%; font-weight: bold; } .business_hours{ font-size: 80%; font-weight: normal; } @media (max-width: 600px) { .td_items{ width: 170px; font-size: 10px; } .text_item{ font-size: 10px; } .text_sub{ font-size: 10px; } input{ font-size: 12px; box-sizing: border-box; padding: 0.5em; transition: 0.3s; letter-spacing: 1px; border: 1px solid #ffffff; box-shadow: 1px 1px 2px 0 #707070 inset; border-radius: 4px; } label{ font-size: 12px; } } fieldset { border: none; } div { margin : 10px; } .form-tell{ border-top: 2px solid #000000; border-bottom: 2px solid #000000; padding: 10px; display : flex; flex-wrap : wrap; justify-content: space-evenly; align-items: center; padding-top: 30px; padding-bottom: 30px; } .rivacy_policy{ border-top: 1px solid #000000; border-bottom: 1px solid #000000; padding: 10px; text-align: center; } .control-submit{ text-align: center; } .control-group{ display : flex; flex-wrap : wrap; align-items: center; } .control-label{ width: 200px; height: 15px; margin: 0 auto; transform: translateX(-20%); } .input_w{ display: block; } /*スカイロジックロゴ*/ .sl_logo{ text-align: center; margin:0 auto; background-color: #3072da; } /*スカイロジックロゴ*/ .img_sl_logo{ width: 80%; max-width: 800px; } /*背景を流れて表示させる。*/ .contact { color: #000000; /* animation: bgiLoop 50s linear infinite; */ position: relative; background: url(../img/logo5.png) no-repeat; /*背景画像指定*/ } @keyframes bgiLoop { 0% { background-position: 0 0;} 100% { background-position: 300px 234px;} } .input_required{ color: #ff0000; } .input_option{ color: #ffcc00; } /*自由記入*/ textarea{ -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; padding: 0.5em; transition: 0.3s; letter-spacing: 1px; border: 1px solid #ffffff; box-shadow: 1px 1px 2px 0 #707070 inset; border-radius: 4px; } /*インプット*/ .input_w100 { width: 100%; } /*名字*/ .last_name_w{ width: 50%; } .btn-square-slant { display: inline-block; position: relative; padding: 0.5em 1.4em; text-decoration: none; background: #668ad8;/*ボタン色*/ color: #FFF; border-bottom: solid 5px #36528c;/*ボタン色より暗めに*/ border-right: solid 5px #5375bd;/*ボタン色より暗めに*/ } .btn-square-slant:before { content: " "; position: absolute; bottom: -5px; left: -1px; width: 0; height: 0; border-width: 0 6px 6px 0px; border-style: solid; border-color: transparent; border-bottom-color: #FFF; } .btn-square-slant:after { content: " "; position: absolute; top: -1px; right: -5px; width: 0; height: 0; border-width: 0px 6px 6px 0px; border-style: solid; border-color: #FFF; border-bottom-color: transparent; } .btn-square-slant:active { /*ボタンを押したとき*/ border:none; -webkit-transform: translate(6px,6px); transform: translate(6px,6px); } .btn-square-slant:active:after, .btn-square-slant:active:before { content: none;/*ボタンを押すと線が消える*/ }