@charset "utf-8";

:root {

    --vk-color-text-body:  #4c4c4c;

    --ym-base : #4c4c4c;
    --ym-redorange : #eb6100;
    --ym-orange : #f5880b;
    --ym-green : #1da111;
    --ym-lightpink : #ffede6;
    --ym-beige : #fff9e6;
    --ym-lightgreen : #cff999;
    --ym-lightpurple : #ebe6ff;
    --ym-lightgray : #f9f9f9;

    --text-color : #4c4c4c;
    --link-color : #4c4c4c;
    --link-color-visit : #4c4c4c;
    --link-color-hover : #4c4c4c;

    --header-base-color : #4c4c4c;
    --site-header-color : rgba(255,255,255,0.8) ;

    --btn--redorange : #eb6100;
    --btn--orange: #f5880b;
    --btn--green: #1da111;

    --navi-color-a : #eeeeee;
    --navi-color-a-link : #eeeeee;
    --navi-color-a-visited : #eeeeee;
    --navi-color-a-hover : #ffffff;

    --footer-height : 300px;
    --footer-base-color : #4c4c4c;
    --footer-base-copyright-color  : #4c4c4c;
    --footer-text-color  : #bbbbbc;
    --footer-menu-color : #bbbbbc;
    --footer-menu-color-a : #bbbbbc;
    --footer-menu-color-link : #bbbbbc;
    --footer-menu-color-visited : #bbbbbc;
    --footer-menu-color-hover : #dddddc;

    --label-base-color : #4c4c4c;
    --label-text-color : #ffffff;

    --form-border-color : #bbbbbc;
    --form-text-color : #4c4c4c;
    --form-border-focus-color : #bbbbbc;
    --form-submit-base-color : #46bd29;
    --form-submit-text-color : #ffffff;
    --form-btn-base-color : #999999;
    --form-btn-text-color : #ffffff;

    --table-border-color : #bbbbbc;
    --table-text-color : #4c4c4c;
    --table-midasi-base-color : #4c4c4c;
    --table-midasi-text-color : #ffffff;
    --table-midasi2-base-color : #808080;
    --table-midasi2-text-color : #ffffff;

    --table-msg-label-base-color : #808080;
    --table-msg-label-text-color : #ffffff;
    --table-msg-result-text-color : #e30000;

}


body{
  font-size:15px;
  color: var(--text-color);
  font-family:  "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Verdana, Roboto,  "Droid Sans", "Microsoft Yahei","PingHei", sans-serif;
  -webkit-text-size-adjust: 100%;

  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: unset;

  -moz-font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";

  box-sizing: border-box;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),(min-resolution: 2dppx) {
    body{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    }
}

img {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

a { color: var(--link-color-visit); }
a:hover{ color: var(--link-color-hover); }
a:visited{ color: var(--link-color-visit); }
a:link{ color: var(--link-color); }

p {
  font-size:15px;
  line-height: 2em;
  margin-bottom: 1.2em;
  max-height: 100%;
}

table {
  border-collapse: collapse;
  border: 0px solid var(--table-border-color);
  padding: 10px 10px;
  max-height: 100%;
}
table th, table td {
  border: 0px solid var(--table-border-color);
  padding: 10px 10px;
  vertical-align: top;
  max-height: 100%;
}
table td ol li {
  line-height: 2em;
  max-height: 100%;
}
ul,li {
  line-height: 1.8em;
  max-height: 100%;
}
hr { 
  border-left: 0px solid #ffffff; 
  border-top: 0px solid #ffffff;
  border-bottom: 1px solid var(--label-base-color);
}

/*PCの場合*/
.pc { display:inline !important; }
.mb { display:none !important; }
.pc-table { display:table !important; }
.mb-table { display:none !important; }
@media screen and (max-width: 639px) {
/*タブレット、スマホの場合*/
.pc { display:none !important; }
.mb { display:inline !important; }
.pc-table { display:none !important; }
.mb-table { display:table !important; }
}




#container {
    width: 100%;
}
#contents {
}
#contents table {
  width: 100%;
  font-size: 16px;
}
#contents table td.label {
  background-color: var(--label-base-color);
  color:  var(--label-text-color);
  font-size: 0.9em;
}
#contents table td.label-green {
  background-color: var(--ym-green);
  color:  var(--label-text-color);
  font-size: 0.9em;
}
#contents table td.label-redorange {
  background-color: var(--ym-redorange);
  color:  var(--label-text-color);
  font-size: 0.9em;
}


/* 線なし　左寄せ */

table.type4 {
    border-collapse: separate;
    border-spacing: 2px;
    margin: 0px 0px 0px 0px;
    padding:0px;
    width: 100%;
    line-height: 36px;
    vertical-align: top;
    text-align:left;
    color:#4c4c4c;
    font-size:16px;
    max-height: 999999px;

    border-top: 0px solid var(--table-border-color);
    border-bottom: 0px solid var(--table-border-color);
    border-left: 0px solid var(--table-border-color);
    border-right: 0px solid var(--table-border-color);
}
table.type4 th {
    padding:0px;
    color:#666666;
    font-size:16px;
    line-height: 36px;
    font-weight:normal;
    vertical-align: middle;
    border-bottom: 0px solid var(--table-border-color);
    background: #efefef;
}
table.type4 tr td {
    padding:0.2em 0.6em;
    text-align: left;
    vertical-align: middle;
    border-top: 0px solid var(--table-border-color);
    border-bottom: 0px solid var(--table-border-color);
    border-left: 0px solid var(--table-border-color);
    border-right: 0px solid var(--table-border-color);
}

table.type4 .midasi {
    padding:0.2em 0.6em;
    text-align: center;
    vertical-align: middle;
    white-space:nowrap;
    border-top: 0px solid var(--table-border-color);
    border-bottom: 0px solid var(--table-border-color);
    border-left: 0px solid var(--table-border-color);
    border-right: 0px solid var(--table-border-color);
    background: var(--table-midasi-base-color);
    color: var(--table-midasi-text-color);
}
table.type4 .midasi2 {
    text-align: center;
    background: var(--table-midasi2-base-color);
    color: var(--table-midasi2-text-color);
}

@media screen and (max-width: 480px) {
  table.type4 tr td {
    display:block;
  }
  table.type4 td:before { 
    content:attr(data-label); 
    float:left; 
    width: 100%;
  } 
  table.type4 .midasi { 
    margin-bottom: 0.5em;
  } 
}

div.submit-box {
    padding: 2em 2em;
}

/* 電話・FAX */

#contents table.contact tr td {
  font-size: 0.9em;
}
#contents table.contact td.tel {
  font-size: 1.4em;
  font-weight: bold;
}
#contents table.contact td.fax {
  font-size: 1.2em;
  font-weight: bold;
}
#contents table td.comment {
  font-size: 0.9em;
}

@media screen and (max-width: 480px) {
  #contents table.contact tr td {
    display:inline-block;
  }
  #contents table.contact tr td.comment {
    display:block;
  }
}


/* message error BOX */

table.msg {
    border-collapse: separate;
    width: 100%;
    color: var(--table-text-color);
}
table.msg th {
    text-align: center;
    vertical-align: middle;
    background: var(--table-msg-label-base-color);
    color: var(--table-msg-label-text-color);
}
table.msg td {
    text-align: center;
    color: var(--table-msg-text-color);
}
table.msg td.result {
    text-align: center;
    color: var(--table-msg-result-text-color);
    font-weight: bold;

}


/* ※こめ印 インデント */
ul.komejirusi {
    padding-left:1em !important;
}
ul.komejirusi li{
    text-indent:-1em !important;
    list-style-type:none !important;
}
.komejirusi_p {
    padding-left:1em !important;
}
.komejirusi_p p{
    text-indent:-1em !important;
    list-style-type:none !important;
}




/* for Mail Form */

input, textarea {
    font-size: 16px;
}

input[type=text]{
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   -o-border-radius: 5px;
   -ms-border-radius: 5px;
   border:1px solid var(--form-border-color);
   padding:6px;
   color:var(--form-text-color);
}
input[type=text].normallenght {
    width: 78%;
    max-width: 20em;
}

input[type=text]:focus {
   border:2px solid var(--form-border-focus-color);
}

input[type=text] { 
   outline: none;
}


input[type=tel]{
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   -o-border-radius: 5px;
   -ms-border-radius: 5px;
   border:1px solid var(--form-border-color);
   padding:6px;
   color:var(--form-text-color);
}

input[type=tel]:focus {
   border:2px solid var(--form-border-focus-color);
}

input[type=tel] { 
   outline: none;
}

input[type=email]{
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   -o-border-radius: 5px;
   -ms-border-radius: 5px;
   border:1px solid var(--form-border-color);
   padding:6px;
   color:var(--form-text-color);
}

input[type=email]:focus {
   border:2px solid var(--form-border-focus-color);
}

input[type=email] { 
   outline: none;
}

input[type=number]{
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   -o-border-radius: 5px;
   -ms-border-radius: 5px;
   border:1px solid var(--form-border-color);
   padding:6px;
   color:var(--form-text-color);
}
input[type=number].num2 {
    width: 2.6em;
}
input[type=number].num4 {
    width: 5.5em;
}

input[type=number]:focus {
   border:2px solid var(--form-border-focus-color);
}

input[type=number] { 
   outline: none;
}

textarea {
   outline: none;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   -o-border-radius: 5px;
   -ms-border-radius: 5px;
   border:1px solid var(--form-border-color);
   padding:6px;
   color:var(--form-text-color);
   width:90%;
   height: 100px;
}
textarea:focus {
   border:2px solid var(--form-border-focus-color);
}

select{
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   -o-border-radius: 5px;
   -ms-border-radius: 5px;
   border:1px solid var(--form-border-color);
   padding:8px;
   font-size:16px;
   color:var(--form-text-color);
}
select:focus{
   border:2px solid var(--form-border-focus-color);
}


input[type=submit]{
   margin: 1em 1em 1.5em 0;
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   -o-border-radius: 5px;
   -ms-border-radius: 5px;
   border:1px solid var(--form-border-color);
   background: var(--form-submit-base-color);
   padding:8px 2em;
   cursor:pointer;
   font-size:14px;
   color: var(--form-submit-text-color);
   font-weight:bold;
}
input[type=button]{
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   -o-border-radius: 5px;
   -ms-border-radius: 5px;
   border:1px solid var(--form-border-color);
   background: var(--form-btn-base-color);
   padding:8px 2em;
   cursor:pointer;
   font-size:14px;
   color:var(--form-btn-text-color);
   font-weight:bold;
}

div.inputtext {
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   -o-border-radius: 5px;
   -ms-border-radius: 5px;
   border:1px solid var(--form-border-color);
   padding:6px;
   font-size:14px;
   color:var(--form-text-color);
}

input:disabled, textarea:disabled {
    opacity: 1.0;
    font-size: 16px;
    color: #000000;
}


@media screen and (max-width: 480px) {
    input, select {
        margin-bottom:  1rem;
        max-width: 97%;
    }
}