@charset "UTF-8";
/* ===================================
タグマネージャー
=================================== */
< !-- Google Tag Manager -->< !-- End Google Tag Manager -->
/* ===================================
基本設定
=================================== */
html {
overflow-y: scroll;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
padding: 0;
margin: 0;
font-style: normal;
font-weight: normal;
}
li {
list-style: none;
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* ===================================
共通
=================================== */
/* フォント */
body {
font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
}
select,
input,
button,
textarea {
font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
}
@media all and (-ms-high-contrast: none) {
body {
font-family: "メイリオ", Meiryo, "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
}
/* ===================================
画面全体のレイアウト
=================================== */
/* 画面全体の表示設定 */
body {
color: #333;
/* フォームエリアを中央に表示 */
}
/* フォームエリア全体の設定 */
div.container {
/* フォントの初期サイズ */
margin: 0 auto;
font-size: 16px;
/* 画面の中央に表示 */
text-align: left;
/* 左寄せ */
}
/* ===================================
設問エリアのレイアウト
=================================== */
/* 設問エリア全体の設定 */
div.wrapper {
width: 870px;
/* 画面の横幅 */
margin: 0 auto;
/* 中央に表示 */
}
/* 設問の行 */
tr.item {
border-bottom: 1px solid #c9c9c9;
}
/* 必要であれば行のデザインを設定することができます */
/*設問名のセルのデザイン */
td.label {
width: 175px;
/* 実際の設問名の文字の長さに合わせて調整してください */
padding: 25px 25px 25px 0;
font-size: 14px;
font-weight: bold;
vertical-align: middle;
/* ラベルの配置 セルの上部に表示したい場合は top */
}
/* 設問の入力セルおよび表示セルのデザイン */
td.value {
width: calc(100% - 175px - 180px);
/* 入力コントロールの幅に合わせて調整してください */
padding: 25px;
}
/* 設問の入力例/説明セルのデザイン */
td.comment {
width: 180px;
color: DarkSlateGray;
font-size: 14px;
background: White;
}
/* 入力セルの「氏」「名」の文字のデザイン */
span.label_name {
padding-right: 5px;
color: DarkSlateGray;
font-size: 85%;
font-weight: bold;
}
/* 入力確認画面、完了画面の入力された文字のデザイン */
p.value {
font-size: 110%;
}
/* ボタンの表示エリアの設定 */
div.button_area {
width: 870px;
/* padding: 10px 0 10px 0; */
margin: 10px auto 100px auto;
/* ボタンとの上下の隙間のサイズ */
text-align: center;
/* 中央に表示、上下に10pxの余白 */
background: GhostWhite;
/* 中央にボタンを表示 */
}
/* 入力エラーメッセージのデザイン */
div.message {
padding: 5px 10px 5px 10px;
/* メッセージテキストと背景色の隙間のサイズ */
margin: 10px 13px 10px 13px;
color: OrangeRed;
/* 上 右 下 左 の隙間のサイズ */
font-size: 14px;
font-weight: bold;
background: LightYellow;
}
/* 公開終了メッセージのデザイン */
div.finished-message {
padding: 5px 10px 5px 10px;
/* メッセージテキストと背景色の隙間のサイズ */
margin: 10px 13px 10px 13px;
color: Crimson;
/* 上 右 下 左 の隙間のサイズ */
font-size: 14px;
font-weight: bold;
background: MistyRose;
}
/* ===================================
入力コントロールのデザイン
=================================== */
/* 確認／送信／戻る／登録ボタン */
input[type=button],
.c-btn-arrow {
font-size: 20px;
position: relative;
z-index: 1;
overflow: hidden;
transition: .3s;
border: 1px solid transparent;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
background-color: #3C6EB8;
cursor: pointer;
height: 75px;
border-radius: 75px;
font-size: 26px;
letter-spacing: 0.2em;
color: #fff;
font-weight: bold;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
a.c-btn-arrow{
text-decoration: none;
}
.c-btn-arrow.is-sky {
background: #7acff5;
text-align: center;
font-size: 20px;
}
.c-btn-arrow.is-sky:hover{
opacity: 0.7;
/* border-color: #7acff5;
background-color: #fff;
color: #7acff5; */
}
input[type=button]:hover {
cursor: pointer;
}
/* 入力中のフィールドの背景色 */
/* それぞれの入力フィールドにカーソルが移動したときに背景の色が変わります。不要な場合は削除してください。 */
input[type="text"]:focus {
background-color: LightYellow;
}
/* テキストボックス */
select:focus {
background-color: LightYellow;
}
/* プルダウン */
textarea:focus {
background-color: LightYellow;
}
/* テキストエリア */
/* ===================================
必須項目のマークおよびメッセージなど
=================================== */
/* 必須項目のマーク */
span.required {
float: right;
margin-right: 4px;
color: OrangeRed;
font-size: 60%;
font-weight: bold;
}
span.required:after {
/* ここを編集することで表示されるマークを変更できます */
content: "※必須";
}
/* 必須項目についての説明文 */
p.required_msg {
margin-right: 4px;
color: OrangeRed;
font-size: 80%;
font-weight: bold;
text-align: right;
}
p.required_msg:after {
/* ここを編集することで表示されるマークを変更できます */
content: "「※必須」となっている項目は必ず入力してください。";
}
/* メールアドレスの再入力メッセージ */
p.label_mail {
margin: 5px 0 1px 0;
color: DarkSlateGray;
font-size: 85%;
font-weight: bold;
}
p.label_mail:after {
/* ここを編集することで表示されるメッセージを変更できます */
content: "確認のため、もう一度メールアドレスを入力してください";
}
/* ===================================
上書き
=================================== */
input,
textarea,
select {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
}
input,
textarea,
select {
*font-size: 100%;
}
textarea {
max-width: 440px;
}
table.items {
width: 100%;
border-collapse: collapse;
}
input[type="text"] {
height: 36px;
max-width: 400px;
padding: 0 .5em;
border: 1px solid #c9c9c9;
border-radius: 5px;
}
input[name="person_name_last"] {
margin-right: 10px;
}
select {
height: 36px;
}
textarea {
padding: .5em .5em;
border: 1px solid #c9c9c9;
border-radius: 5px;
}
#privacy_policy {
max-width: 870px;
margin-right: auto !important;
margin-left: auto !important;
}
div.button_area {
background: transparent;
}
/* ===================================
カスタマイズ
=================================== */
/*---------------------------------------------------------------------
header
-----------------------------------------------------------------------*/
body {
background: none;
}
div.container {
border: none;
}
body>div:before {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 10px;
content: "";
background: -webkit-gradient(linear, left top, right top, from(#7ACFF5), to(#3C6EB8));
background: -o-linear-gradient(left, #7ACFF5 0%, #3C6EB8 100%);
background: linear-gradient(to right, #7ACFF5 0%, #3C6EB8 100%);
}
#header {
-webkit-align-items: center;
align-items: center;
-ms-flex-align: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
display: -ms-flexbox;
display: -webkit-box;
display: -webkit-flex;
display: flex;
padding: 40px 0;
margin-bottom: 70px;
-webkit-box-align: center;
-webkit-box-pack: center;
border-bottom: solid 2px #ECECEC;
}
#header img {
height: 100px;
}
/*----------------------------------------------------
見出し1
----------------------------------------------------*/
.c-title-top {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-bottom: 50px;
}
.c-title-top.is-center {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
}
.c-title-top.is-center ._en:before {
margin-left: auto;
margin-right: auto;
}
.c-title-top ._en {
font-family: "Roboto", sans-serif;
font-size: 36px;
letter-spacing: 0.2em;
text-align: left;
color: #3d4246;
}
.c-title-top ._en:before {
content: "";
display: block;
margin-bottom: 20px;
width: 30px;
height: 3px;
background: #3C6EB8;
}
.c-title-top ._ja {
margin-top: 16px;
font-size: 16px;
text-align: left;
color: #7a7a7a;
}
@media screen and (max-width: 767px) {
.c-title-top {
margin-bottom: 30px;
}
.c-title-top.is-center-sp {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
}
.c-title-top.is-center-sp ._en:before {
margin-left: auto;
margin-right: auto;
}
.c-title-top ._en {
font-size: 24px;
}
.c-title-top ._en:before {
margin-bottom: 15px;
width: 20px;
height: 2px;
}
.c-title-top ._ja {
margin-top: 10px;
font-size: 12px;
}
}
/*----------------------------------------------------
見出し2
----------------------------------------------------*/
.p-subtitle {
letter-spacing: 0.2em;
text-align: center;
}
.p-subtitle:after {
content: "";
display: block;
margin: 20px auto 40px;
height: 2px;
background: #6BD8CD;
}
.p-subtitle h2{
font-weight: bold;
}
@media screen and (min-width: 768px) {
.p-subtitle h2{
font-size: 30px;
}
.p-subtitle:after {
width: 40px;
}
}
@media screen and (max-width: 767px){
.p-subtitle h2 {
font-size: 24px;
}
.p-subtitle:after {
margin: 10px auto 30px;
width: 20px;
}
}
/*----------------------------------------------------
ヘッダー下部エリア
----------------------------------------------------*/
div.header-wrapper {
max-width: 1080px;
margin: 0 auto;
padding-left: 40px;
padding-right: 40px;
}
.flex{
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
justify-content: space-between;
-ms-flex-pack: justify;
margin-bottom: 80px;
}
.items-left{
flex: 1;
}
.items-left ._lead{
color: #3c6eb8;
font-weight: bold;
line-height: 2;
margin-bottom: 10px;
font-size: 28px;
}
.items-left ._txt{
line-height: 2;
}
.items-left ul{
margin-top: 35px;
}
.items-left li{
font-weight: bold;
font-size: 20px;
background: url(https://www.kbinfo.co.jp/education/assets/img/p-training-style-check.svg) no-repeat top 6px left;
padding-left: 30px;
}
.items-left li + li{
margin-top: 10px;
}
.items-right{
width: 39%;
padding-left: 4%;
text-align: center;
}
.items-right ._img{
position: relative;
z-index: 10;
pointer-events: none;
}
.cm-contact-item__body{
margin-top: -40px;
}
.caution{
background: #eef4f4;
padding: 1.5em;
font-weight: bold;
font-size: 14px;
margin-bottom: 60px;
text-align: center;
}
@media screen and (max-width: 767px) {
div.header-wrapper {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
}
.flex{
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-bottom: 40px;
}
.items-left ._lead{
font-size: 20px;
text-align: center;
}
.items-left ._txt{
font-size: 14px;
}
.items-left ul{
margin-top: 20px;
}
.items-left li{
font-size: 18px;
}
.items-right{
text-align: center;
padding-left: 0;
width: 100%;
margin-top: 20px;
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
-ms-flex-pack: center;
-ms-flex-align: center;
}
.cm-contact-item__body{
width: 80%;
}
.caution{
font-size: 10px;
}
}
/*----------------------------------------------------
プライバシーポリシー
----------------------------------------------------*/
#privacy_policy {
font-size: 14px;
}
#privacy_policy a {
color: #7ACFF5;
font-weight: bold;
-webkit-transition: color 0.3s ease-out, background 0.3s ease-out, border 0.3s ease-out, opacity 0.3s ease-out, -webkit-box-shadow 0.3s ease-out;
transition: color 0.3s ease-out, background 0.3s ease-out, border 0.3s ease-out, opacity 0.3s ease-out, -webkit-box-shadow 0.3s ease-out;
transition: color 0.3s ease-out, background 0.3s ease-out, border 0.3s ease-out, opacity 0.3s ease-out, box-shadow 0.3s ease-out;
transition: color 0.3s ease-out, background 0.3s ease-out, border 0.3s ease-out, opacity 0.3s ease-out, box-shadow 0.3s ease-out, -webkit-box-shadow 0.3s ease-out;
}
#privacy_policy a:hover {
color: #3C6EB8;
}
@media screen and (max-width: 767px) {
#privacy_policy {
font-size: 12px;
}
}
/* ===================================
スマートフォン表示用のレイアウト
=================================== */
/* スマートフォンとして認識する画面の横幅のサイズ */
@media screen and (max-width: 479px) {
/* フォームエリア全体の設定 */
div.container {
width: 100%;
}
/* 設問エリア全体の設定 */
div.wrapper {
width: 95%;
}
/* 設問の表 */
table.items {
width: 95%;
margin: 0 auto
}
/*設問名のセルのデザイン */
td.label {
float: left;
width: 95%;
height: 25px;
padding-top: 10px;
}
/* 必須項目のマーク */
span.required {
float: initial;
}
/* 設問の入力セルおよび表示セルのデザイン */
td.value {
float: left;
width: 95%;
/* 入力コントロールの幅に合わせて調整してください */
padding: 0;
}
/* 設問の入力例/説明セルのデザイン */
td.comment {
float: left;
width: 95%;
padding: 0 2px 20px 2px;
}
/* 設問の入力例/テキストボックス */
input[type="text"] {
width: 95% !important;
font-size: 120%;
}
/* 設問の入力例/テキストエリア */
textarea {
width: 95%;
height: 100px;
}
/* ボタンの表示エリアの設定 */
div.button_area {
width: 95%;
}
}
@media screen and (max-width: 479px) {
select {
border: 1px solid #c9c9c9;
}
input[type=button] {
padding: .5em 2em;
font-size: 20px;
}
td.comment {
float: left;
width: 95%;
padding: 4px 12px 10px 12px;
}
body>div:before {
height: 5px;
}
#header {
padding: 30px 0;
margin-bottom: 30px;
}
#header img {
height: 60px;
}
#privacy_policy {
width: 95%;
}
}
/*----------------------------------------------------
レスポンシブ
----------------------------------------------------*/
.pc {
display: inline;
}
.sp {
display: none;
}
@media (max-width: 767px) {
.sp {
display: inline;
}
.pc {
display: none;
}
}
/*----------------------------------------------------
フッター
----------------------------------------------------*/
.l-footer {
display: -ms-grid;
display: grid;
padding: 30px 30px;
color: #fff;
background-color: #3d4246;
grid-template-areas: "logo privacy" "logo copyright";
align-items: center;
}
@media screen and (max-width: 767px) {
.l-footer {
padding: 30px 15px;
grid-template-areas: "logo" "privacy" "copyright";
}
}
.l-footer-logo {
-ms-grid-row: 1;
-ms-grid-row-span: 2;
-ms-grid-column: 1;
grid-area: logo;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-align-items: flex-end;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.l-footer-logo ._logo img {
height: 42px;
}
.l-footer-logo ._corp-link a{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.l-footer-logo ._kbi {
margin-left: 20px;
}
.l-footer-logo ._osakagas {
margin-left: 11px;
}
@media screen and (max-width: 767px) {
.l-footer-logo {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
}
.l-footer-logo ._logo{
margin-bottom: 20px;
width: 100%;
}
.l-footer-logo ._logo img {
height: 42px;
}
.l-footer-logo ._kbi {
margin: 0 20px 0 0;
}
.l-footer-logo ._osakagas {
margin-left: 0;
}
}
.l-footer-privacy {
-ms-grid-row: 1;
-ms-grid-column: 2;
grid-area: privacy;
text-align: right;
}
@media screen and (max-width: 767px) {
.l-footer-privacy {
margin-top: 25px;
text-align: center;
}
.l-footer-privacy img {
width: 33px;
}
}
.l-footer-copyright {
-ms-grid-row: 2;
-ms-grid-column: 2;
margin-top: 10px;
grid-area: copyright;
font-weight: normal;
font-size: 10px;
line-height: 20px;
text-align: right;
color: #fff;
}
@media screen and (max-width: 767px){
.l-footer-logo {
-ms-grid-row: 1;
-ms-grid-row-span: 1;
-ms-grid-column: 1;
}
.l-footer-privacy {
-ms-grid-row: 2;
-ms-grid-column: 1;
}
.l-footer-copyright {
-ms-grid-row: 3;
-ms-grid-column: 1;
}
}
@media screen and (max-width: 767px) {
.l-footer-copyright {
margin-top: 10px;
text-align: center;
}
}
.u-link-alpha:hover {
opacity: 0.7;
}
a:hover .u-link-alpha {
opacity: 0.7;
}
a{
-webkit-transition: color 0.3s ease-out, background 0.3s ease-out, border 0.3s ease-out, opacity 0.3s ease-out, -webkit-box-shadow 0.3s ease-out;
transition: color 0.3s ease-out, background 0.3s ease-out, border 0.3s ease-out, opacity 0.3s ease-out, -webkit-box-shadow 0.3s ease-out;
transition: color 0.3s ease-out, background 0.3s ease-out, border 0.3s ease-out, opacity 0.3s ease-out, box-shadow 0.3s ease-out;
transition: color 0.3s ease-out, background 0.3s ease-out, border 0.3s ease-out, opacity 0.3s ease-out, box-shadow 0.3s ease-out, -webkit-box-shadow 0.3s ease-out;
}
#frm_formconfirm table.items,
#frm_formthanks table.items{
margin-bottom: 60px;
}
#frm_formconfirm .button_area{
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
justify-content: space-between;
-ms-flex-pack: justify;
margin-bottom: 80px;
}
#frm_formconfirm input[type=button]{
width:47%;
}
#button_confirm_back{
background-color: gray;
}
プライバシーポリシーに同意の上、送信してください。
同意して送信すると、Cookieにより当社のWebサイト上における閲覧履歴と個人情報を紐付けて把握、分析する場合があります。