@charset "UFT-8"; /* 文字コード指定（文字化け対策） */

/* 全体 */
html {
    font-family: Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif; /* フォント指定 */
    text-align: center; /* センター揃え */
    background-color: #ffffff; /* 背景色 */
}
html * {
    box-sizing: border-box; /* ボーダー領域まで含む幅と高さに変更（スマホ向けの指示） */
}
body {
    overflow-x: hidden; /* はみ出した項目を非表示にする（横スクロール（x方向）が表示されない） */
    margin: 0; /* 画像や線を、画面の端までぴったりと */
}
.title {
    max-width: 700px;
    width: 95%;
    margin: 30px auto 15px auto; 
}
.logo {
    max-width: 300px;
    width: 80%;
    margin: 30px auto 0px auto;
}



/* 切り替えタブ */

/* タブ内のマーク・文字*/
.icon {
    font-size: 7.5em;
    padding: 12px;
    color: #fff;
}
.property {
    font-size: 1.2em;
    color: #fff;
}

/* ▼タブ(共通装飾＋非選択状態の装飾) */
.tabbox {
    max-width: 700px;
    margin: auto;
}
.tab {
    display: inline-block; /* インラインブロック化 */
    border-radius: 1em 1em 0px 0px; /* 左上と右上の角だけを丸くする */
    padding: 0.75em 1em; /* 内側の余白量 */
    font-weight: bold; /* タブの文字を太字にする */
    color: #ffffff; /* タブの文字色 */
    background-color: #bae0f5; /* タブの(非選択状態の)背景色 */
    width: 30%;
    margin-right: -2px;
    margin-left: -2px;
}
/* ▼タブにマウスポインタが載った際の装飾 */
.tab:hover {
    color: #ffffff; /* タブの文字色 */
    background-color: #86b6d0; /* タブの背景色 */
    cursor: pointer; /* マウスポインタの形状を「指(指し示す形)」にする */
}
/* ▼選択状態のタブ(＝チェックが入っているラジオボタンの隣にあるタブの装飾) */
input:checked + .tab {
    color: #ffffff; /* タブの文字色 */
    background-color: #0085cd; /* タブの背景色 */
}
/* ▼タブ機能を制御するラジオボタン(非表示にする) */
.tab-none { display: none; }

/* ▼タブの中身(共通装飾＋非選択状態の装飾) */
.tabcontent {
    display: none; /* 標準では非表示にする */
}
/* ▼チェックが入っているラジオボタンに対応するタブの中身を表示する */
#tabcheck1:checked ~ #tabcontent1 { display: block; }
#tabcheck2:checked ~ #tabcontent2 { display: block; }
#tabcheck3:checked ~ #tabcontent3 { display: block; }

/* ▼チェックが入っているラジオボタンの隣にあるタブの装飾(＝選択状態のタブ) */
input:checked + .tab {
    z-index: 10; /* ※2A */
    position: relative; /* ※3 */
}
/* ▼タブの中身(共通装飾＋非選択状態の装飾) */
.tabcontent {
    display: none; /* 標準では非表示にする */
    margin-top: -10px; /* ※1 */
    z-index: 0; /* ※2B */
    position: relative; /* ※3 */
}
/* 
※1：margin-topプロパティに値「-1」を指定することで、上方向に1ピクセルだけずらしています。
※2：重なる順序を指定するz-indexプロパティは、値が大きい方が上に重なります。選択中のタブには値「10」を指定(※2A)し、本体ボックスには値「0」を指定(※2B)しています。そのため、選択中のタブの方が上に重なって表示されます。
※3：z-indexでの重なり順序の指定が有効になるのは、positionプロパティの値が「static」以外の要素だけです。そのため、ここでは値に「relative」を指定しています。
*/




/* テキスト関係 */
span {
    display: inline-block; /* 横幅や高さを指定できるようにする */
}
.first-select {
    font-size: 21px; /* フォントの大きさ指定 */
    font-weight: bold;
    line-height: 1.3em; /* 行間調整 */
    letter-spacing: 1.5px; /* 字間調整 */
}

a {
    text-decoration: none; /* リンクの下線の削除 */
    transition: 0.5s;
}
a:link {
    color: #fff; /* 未訪問リンクの色（今回は黒（変化なし））*/
}
a:visited {
    color: #fff; /* 訪問済みリンクの色（今回は黒（変化なし））*/
}
a:hover {
    color: ##fff; /* カーソルがホバーした時の色（この時だけ赤になる）*/
}
a:active {
    color: #fff; /* クリックしている時の色（ホバーと同じ）*/
}
p {
    font-size: 14px; /* フォントの大きさ指定 */
    line-height: 2; /* 行間調整 */
}
::placeholder {
    color: #86b6d0;
}

/* バランス調整 */
footer {
    border-top: 2px solid #000000; /* 上に線 */
    margin-top: 50px; /* フッターの上に空白 */
    color: #fff;
    background-color: #000;
}
label{ /* labelで囲んだ要素（ラジオボタン・チェックボックス）に対して */
  padding-right:1em; /* 右側に１文字分スペース */
}

/* メールフォーム */
.mailform {
    font-size: 17px; /* フォントサイズ */
    width: 90%; /* 画面サイズに対し90%（左右5%ずつの空き） */
    max-width: 700px; /* 最大値 */
    margin: 10px auto; /* 左右を等間隔（auto）でセンター揃えに） */
    border-collapse: collapse; /* 隣接するボーダーラインを重ねあわせて表示 */
}
.mailform th {
    width: 150px; /* 見出しの幅を固定 */
    padding: 15px 10px; /* 空き調整 */
    border-bottom: 2px solid #6dc0ed; /* 下に線 */
}
.mailform td {
    padding: 15px; /* 空き調整 */
    border-bottom: 2px solid #6dc0ed; /* 下に線 */
    text-align: left; /* 左揃え */
}
.item { /* 見出し（物件情報・お客情報） */
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: #0085cd;
}
.textarea {
    max-width: 500px; /* 最大値 */
    width: 100%; /* 画面に合わせる */
}
.textform {
    max-width: 350px; /* 最大値 */
    width: 100%; /* 画面に合わせる */
}
.required { /* 「必須」 */
    font-size: 11px; /* フォントサイズ */
    color: #ffffff; /* 文字の色 */
    background-color: #ff7c7c; /* 背景色 */
    padding: 0.1em 0.3em; /* 間隔調整 */
    position: relative; /* 絶対値 */
	top: -0.2em; /* 絶対値から移動（ズレを修正） */
    border-radius: 5px; /* 角丸 */
}
input, textarea, select { /* 入力エリアのデザイン */
    border: none; /* 外枠削除 */
    border-radius: 0.3rem; /* 若干の角丸 */
    background-color: #e6f1f4; /* 背景の色 */
    padding: 8px; /* 枠内の空き調整 */
    -webkit-border-radius : 0;
    -webkit-tap-highlight-color : rgba(0,0,0,0);
}
input[type="radio"] {
    -webkit-appearance: none; /* デフォルトのスタイルを無効 */
    -moz-appearance: none;
    appearance: none;
    border : 1px solid #a7a7a7; /* 枠 */
    border-radius: 50%; /* 円形 */
    position: relative; /* チェックボックスの位置調整 */
    top: 3px;
    cursor: pointer; /* マウスポインタの形状を「指(指し示す形)」にする */
}
input[type="radio"]:checked{
    background-color: #0085cd;
    background-size: 50%;
}
input[type="checkbox"] {
    -webkit-appearance: none; /* デフォルトのスタイルを無効 */
    -moz-appearance: none;
    appearance: none;
    border : 1px solid #a7a7a7; /* 枠 */
    position: relative;
    top: 6px;
    cursor: pointer; /* マウスポインタの形状を「指(指し示す形)」にする */
}
input[type="checkbox"]:checked{
    background:#0085cd;
}

.pointer {
    cursor: pointer; /* マウスポインタの形状を「指(指し示す形)」にする */
    user-select: none; /* クリック時にテキストが選択されないようにする */
}

.asterisk { /* 郵便番号横の※ */
    font-size: 0.8em;
    position: relative;
    left: 8px;
    top: 10px;
}

 /* 郵便番号入力箇所を数字のみに設定した場合、右側に増減マークが出るので、それを非表示 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { /* Chrome、Safariの場合 */
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] { /* FireFox、IEの場合 */
    -moz-appearance:textfield;
}

.input_margin {
    margin-bottom: 10px; /* 住所の入力エリア同士の空き */
}

li { /* ラジオ選択肢のリスト化 */
    list-style: none; /* 「・」の削除 */
    margin-bottom: -13px; /* 間隔調整 */
}
li.indent-1 { /* インデント調整 */
	padding-left:1.85em;
	text-indent:-1.85em;
}
.annotation { /* 注釈部分 */
    font-size: 0.86em; /* 文字サイズ */
    margin-top: 15px; /* 間隔調整 */
	padding-left: 2.3em; /* インデント調整 */

}

input[type="submit"],
input[type="reset"] {
    -webkit-appearance: none; /* デフォルトデザインの無効化（iPhone対策） */
    border-radius: 0;
}

.button { /* 「送信」ボタン */
    display: inline-block;
    font-size: 11pt;        /* 文字サイズ */
    text-align: center;      /* 文字位置   */
    cursor: pointer;     /* カーソル   */
    padding: 5px 35px;   /* 余白       */
    background: #0085cd;     /* 背景色     */
    color: #ffffff;     /* 文字色     */
    line-height: 1em;         /* 1行の高さ  */
    transition: 0.3s;         /* なめらか変化 */
    border: 2px solid #0085cd;    /* 枠の指定 */
}
.button:hover { /* 「送信」ボタン　ホバー */
    color: #0085cd;     /* 背景色     */
    background: #ffffff;     /* 文字色     */
}

.button2 { /* 「取り消し」ボタン */
    display: inline-block;
    font-size: 11pt;        /* 文字サイズ */
    text-align: center;      /* 文字位置   */
    cursor: pointer;     /* カーソル   */
    padding: 5px 35px;   /* 余白       */
    background: #000;     /* 背景色     */
    color: #ffffff;     /* 文字色     */
    line-height: 1em;         /* 1行の高さ  */
    transition: 0.3s;         /* なめらか変化 */
    border: 2px solid #000;    /* 枠の指定 */
}
.button2:hover { /* 「取り消し」ボタン　ホバー */
    color: #000;     /* 背景色     */
    background: #ffffff;     /* 文字色     */
}

.totop {
    font-size: 15px;
    color: #ffffff;
    letter-spacing: 1px;
    background-color: #6dc0ed;
    padding: 0.5em 1em;
    margin: 10px 0px;
    border-radius: 5px;
    border: 2px solid #6dc0ed;    /* 枠の指定 */
    transition: 0.3s;         /* なめらか変化 */
}
.totop:hover {
    color: #6dc0ed;     /* 背景色     */
    background: #ffffff;     /* 文字色     */
}

/* 空き調整 */
.index-space {
    margin-top: 50px; /* スペースを調整 */
}

/* PC閲覧時の改行用CSS */
/* 画面横サイズ幅が601px以上の場合、<br>を適用しない
    （600px以下・スマホでは<br>が適用され、改行） */
@media screen and (min-width: 601px) {
    .sp-br {
        display: none;/* 適用しない */
    }
}

/* スマートフォン向けCSS */
/* 画面横サイズが600px以下の場合　上記より変更のある部分だけを記入 */
@media only screen and (max-width: 600px) {


.logo {
    width: 60%;
}


/* タブデザイン */
.icon {
    padding: 10px;
}
.icon-width {
    width: 100px;
}
.icon {
    font-size: 4em;
}
.property {
    width: 100px;
    font-size: 0.8em;
}
.tab {
    border-radius: 0.75em 0.75em 0px 0px; /* 左上と右上の角だけを丸くする */
    padding: 3px 1px; /* 内側の余白量 */
    width: 32%;
    margin-right: -3px;
    margin-left: -3px;
}

/* メールフォーム */
.mailform { /* 左右の空き */
    width: 95%;
}
.mailform th { /* 項目 */
    color: #ffffff; /* 文字の色 */
    background-color: #6dc0ed; /* 背景の色 */
    padding: 5px 10px; /* 空き調整 */
    text-align: left; /* 左揃え */
}
.item { /* 見出し */
    font-size: 20px; /* 文字サイズ */
}
.required { /* 必須 */
    font-size: 12px; /* フォントサイズ */
	top: -0.3em; /* 絶対値から移動（ズレを修正） */
    border-radius: 3px; /* 角丸 */
}

.asterisk {
    top: -8px;
}

 /* 項目と回答の縦並び化 */
.mailform th,
.mailform td {
    width:100%;
    display:block;
}

input[placeholder],
textarea[placeholder],
select {
    font-size:15px; /* 回答欄の文字サイズ */
}

.button { /* 「送信」ボタン */
    font-size: 14pt;        /* 文字サイズ */
    padding: 10px;   /* 余白       */
    width: 150px; /* サイズ固定 */
}
.button2 { /* 「取り消し」ボタン */
    font-size: 14pt;        /* 文字サイズ */
    padding: 10px;   /* 余白       */
    width: 150px; /* サイズ固定 */
}

/* スマートフォン向けCSSの末尾 */
}