@charset "UTF-8";

/* **********************************************************************
 *
 *       Title:   Site-Shokunin CMS
 *       Notes:   Hand-crafted by WebLab Corporation in Tokyo.
 *
 ********************************************************************** */


/* IE用印刷設定CSS ###################### */

@media print{

body {
_zoom: 67%; /*WinIE only */
}


#top-a {_zoom: 95%; /*WinIE only */
}
}


/* BLOCK内スタイル設定 ###################### */

p { margin: 0; line-height: 1.5; }

span.texts { font-size: xx-small; line-height: 1.3; }
html>body span.texts { font-size: x-small; }

span.textn { font-size: x-small; line-height: 1.5; }
html>body span.textn { font-size: small; }

span.textl { font-size: small; line-height: 1.5; }
html>body span.textl { font-size: medium; }

span.textll { font-size: 200%; line-height: 1.5; }

span.textxl { font-size: 350%; line-height: 1.5; }

span.textxxl { font-size: 500%; line-height: 1.5; }

table.nbr,
table.tbr table.nbr {
       border-top: none;
       border-left: none;
       border-collapse: collapse;
       }

table.nbr th,
table.tbr table.nbr th {
       padding: 0;
       border-right: none;
       border-bottom: none;
       color: #333;
       font-size: x-small;
       line-height: 1.5;
       }
html>body table.nbr th,
table.tbr table.nbr th { font-size: small; }

table.nbr td,
table.tbr table.nbr td {
       padding: 0;
       border-right: none;
       border-bottom: none;
       color: #333;
       font-size: x-small;
       line-height: 1.5;
       }
html>body table.nbr td,
table.tbr table.nbr td { font-size: small; }

table.tbr,
table.nbr table.tbr {
       border-top: 1px solid #999;
       border-left: 1px solid #999;
       border-collapse: collapse;
       }

table.tbr th,
table.nbr table.tbr th {
       padding: 10px;
       border-right: 1px solid #999;
       border-bottom: 1px solid #999;
       background: #f1f1f1;
       color: #333;
       font-size: x-small;
       line-height: 1.5;
       }
html>body table.tbr th,
table.nbr table.tbr th { font-size: small; }

table.tbr td,
table.nbr table.tbr td {
       padding: 10px;
       border-right: 1px solid #999;
       border-bottom: 1px solid #999;
       color: #333;
       font-size: x-small;
       line-height: 1.5;
       }
html>body table.tbr td,
table.nbr table.tbr td { font-size: small; }

th.nbr {
       font-size: x-small;
       line-height: 1.5;
       color: #333;
       }
html>body th.nbr { font-size: small; }

td.nbr {
       font-size: x-small;
       line-height: 1.5;
       color: #333;
       }
html>body td.nbr { font-size: small; }

th.tbr {
       padding: 10px;
       border-right: 1px solid #999;
       border-bottom: 1px solid #999;
       font-size: x-small;
       line-height: 1.5;
       color: #333;
       }
html>body th.tbr { font-size: small; }

td.tbr {
       padding: 10px;
       border-right: 1px solid #999;
       border-bottom: 1px solid #999;
       font-size: x-small;
       line-height: 1.5;
       color: #333;
       }
html>body td.tbr { font-size: small; }

blockquote {
       clear: both;
       margin: 0;
       padding: 10px;
       border: 1px solid #cfcfcf;
       background: #f3f3f3;
       font-size: x-small;
       line-height: 1.4;
       text-align: left;
       }
html>body blockquote { font-size: small; }

form {
       margin: 0;
       padding: 0;
       }

form dt{
       font-size: x-small;
       font-weight: bold;
       line-height: 1.4;
       }
html>body form dt { font-size: small; }

form dd{
       margin: 0 0 5px 0;
       font-size: x-small;
       line-height: 1.4;
       }
html>body form dd { font-size: small; }

img { border: 0; }

.photo-r {
       float:right;
       margin: 3px 0 15px 15px;
       font-size: xx-small;
       line-height: 1.3;
       color: #333;
       }
html>body div.photo-r { font-size: x-small; }

.photo-l {
       float:left;
       margin: 3px 15px 15px 0;
       font-size: xx-small;
       line-height: 1.3;
       color: #333;
       }
html>body div.photo-l { font-size: x-small; }

.photo-c {
       margin: 3px auto 15px auto;
       font-size: xx-small;
       line-height: 1.3;
       color: #333;
       }
html>body div.photo-c { font-size: x-small; }

.photo-r img, .photo-l img, .photo-c img {
       margin-bottom: 3px;
       }

/* 入力項目グループ */
.contactform {
    background: linear-gradient(90deg, #f1f1f1 25%, #fff 25%);
}
fieldset {
    display: inline;
    padding: 3px;
}
fieldset.error {
    background: #fff3f3;
}
.contactform fieldset:first-of-type {
    border-top: 1px solid #ccc;
}
.contactform fieldset {
    width: 100%;
    border: none;
    border-bottom: 1px solid #ccc;
    padding: 15px 0;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
    vertical-align: bottom;
}
.contactform fieldset legend {
    float: left;
    width: 25%;
    position: relative;
    padding: 0 50px 0 10px;
    text-align: left;
    line-height: 1.5;
    font-weight: bold;
    box-sizing: border-box;
}
.contactform fieldset .inputarea {
    float: right;
    width: 70%;
    padding: 0 10px 0 0;
}
.contactform fieldset .inputarea .tit {
    font-size: 12px;
}
.contactform fieldset .inputarea ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.contactform i {
    position: absolute;
    font-size: 12px;
    font-weight: bold;
    font-style: normal;
    line-height: 1;
    padding: 5px 7px;
    color: #fff;
    top: calc(50% - 11px);
    right: 10px;
}
.contactform span {
    flex: 1;
}
.contactform i.required {
    background: #e05250;
}
.contactform i.any {
    color: #666;
    background: #EBEBEB;
}
.contactform label {
    cursor: pointer;
}

/* 入力項目テーブル */
form table.tbr th {
    width: 28%;
}
form table.tbr th span {
    float: right;
    color: #fff;
    font-size: 12px;
    background: #c00;
    padding: 2px 7px;
}
form table.tbr td ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/* 入力項目 */
.contactform input[type='text'],
.contactform input[type='email'],
.contactform input[type='tel'],
.contactform input[type='url'],
.contactform textarea,
.contactform select {
    box-sizing: border-box;
    font-size: 16px;
    border: 1px solid #d5d5d5;
    padding: 10px;
}
.contactform input[type='text'],
.contactform input[type='email'],
.contactform input[type='url'],
.contactform textarea {
    width: 100%;
}
.contactform input[type='tel'] {
    width: 30%;
}
.contactform input#zip1,
.contactform input#zip2 {
    width: 40%;
}

/* エラーメッセージ */
.err_block {
    clear: both;
    padding: 12px;
    margin: 0 0 20px;
    background: #fff3f3;
}
.err_block p {
    color: #e00000;
}
.err_block p.err_tit {
    font-weight: bold;
    margin: 0 0 5px;
    padding: 2px 0 2px 10px;
    color: #fff;
    background: #e00000;
}

/* タグ エラー */
.contactform label.error {
    border: 1px solid #ff8383;
    background: #fff3f3;
    display: inline-block;
}
.contactform input.error {
    border: 1px solid #ff8383;
    background: #fff3f3;
}
.contactform select.error {
    border: 1px solid #ff8383;
    background: #fff3f3;
}
.contactform textarea.error {
    border: 1px solid #ff8383;
    background: #fff3f3;
}

/* 送信ボタン */
form > div:last-of-type {
    margin: 30px 0 0 0;
    text-align: center;
}
form > div input[type=""button""] {
    background: #f5f5f5;
    border: 1px solid #d9d9d9;
    padding: 4px 10px;
}
form > div .btn {
    border: none;
    background: #090;
    color: #fff;
    padding: 20px 60px;
    margin: 0 0 20px;
    cursor: pointer;
    transition: opacity .2s;
}
form > div .btn:hover {
    opacity: .6;
    transition: opacity .2s;
}

.annotation {
    font-size: 12px;
}