@charset "UTF-8";
/* nav hover
----------------------------------------- */
#gnav #nav > li.current > a {
color: #4d8cab;
}
#gnav #nav > li:last-of-type.current > a {
color: #ffffff;
}


/* genelal base
----------------------------------------- */
.container {
margin-right: auto;
margin-left: auto;
}
select {
width: 100%;
outline: none;
border: none;
background: none transparent;
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
}
select::-ms-expand {
display: none;
}
select:-moz-focusring { 
color: transparent; 
text-shadow: 0 0 0 #828c9a;
}

/* breadCrumbs
----------------------------------------- */
#breadCrumbs .wrap {
margin-right: auto;
margin-left: auto;
width: 90%;
display: block;
}
#breadCrumbs .wrap a {
margin-top: 0.5em;
margin-bottom: 0.5em;
display: inline-block;
}

/* Form
----------------------------------------- */
.formTable {
margin-top: 40px;
margin-bottom: 40px;
width: 100%;
}
.formTable input {
margin-bottom: 20px;
}
.formTable input,
.formTable textarea,
.auth-captcha input[type="text"] {
padding: 0.4em 1em;
border: 1px solid #acacac;
border-radius: 5px;
transition: all 0.5s;
}
.formTable input[type="text"]:focus,
.formTable textarea[type="text"]:focus { 
border: 1px solid #acacac;
box-shadow: 0 0 3px #0B687D;
}
.formTable select {
margin-bottom: 20px;
padding: 0.6em 1em;
display: block;
border: 1px solid #acacac;
border-radius: 5px;
}
.submit {
padding-top: 50px;
}
.submit input[type="submit"],
.submit input[type="reset"] {
margin-right: auto;
margin-left: auto;
padding: 1em;
display: block;
font-weight: bold;
text-align: center;
transition: all .3s;
}
.submit input[type="submit"] {
margin-bottom: 40px;
background: -moz-linear-gradient(90deg, rgba(228,91,239,1) 0%, rgba(112,166,238,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(228,91,239,1) 0%, rgba(112,166,238,1) 100%);
background: linear-gradient(90deg, rgba(228,91,239,1) 0%, rgba(112,166,238,1) 100%);
border: 0;
border-radius: 5px;
color: #ffffff;
}
.submit input[type="submit"]:hover {
background: #000000;
border: 0;
}
.submit .button[type="reset"]  {
background-color: rgba(204,20,75,0.3);
border: 0;
border-radius: 5px;
}
.submit #BtnMessageBack:hover,
.submit .button[type="reset"]:hover {
background: #f2f2f2;
border: 0;
}

.submit a.submit-button-link {
  margin-right: auto;
  margin-left: auto;
  padding: 1em;
  display: block;
  font-weight: bold;
  text-align: center;
  transition: all .3s;
  margin-bottom: 40px;
  background: linear-gradient(90deg, rgba(228,91,239,1) 0%, rgba(112,166,238,1) 100%);
  border: 0;
  border-radius: 5px;
  color: #ffffff;
  text-decoration: none;
}

.submit a.submit-button-link:hover {
  background: #000000;
  color: #ffffff;
}

.auth-captcha {
margin-bottom: 40px;
text-align: center;
}
.auth-captcha-image {
margin-right: auto;
display: block;
}
.g-recaptcha{
  display: flex;
  justify-content: center;
}
#MailMessageAuthCaptcha {
line-height: 2;
}
.formTable .required {
padding: 0.3em 1em;
line-height: 1;
background: -moz-linear-gradient(90deg, rgba(228,91,239,1) 0%, rgba(112,166,238,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(228,91,239,1) 0%, rgba(112,166,238,1) 100%);
background: linear-gradient(90deg, rgba(228,91,239,1) 0%, rgba(112,166,238,1) 100%);
border-radius: 3px;
color: #ffffff;
font-size: 14px;
}
.mail-description {
font-family: verdana,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
}
.mail-description ul {
margin-top: 1em;
margin-left: 1em;
}
.mail-description ul li {
margin-left: 1em;
list-style-type: disc;
}
#MessageBox {
padding: 1em;
border: 1px solid #d7004a;
border-radius: 5px;
}
.formTable .error-message,
.auth-captcha .error-message {
color: #d7004a;
}


/* 404 not found
----------------------------------------- */
#Error #header {
margin-bottom: 100px;
}
#Error .container {
margin-bottom: 100px;
}
#Error h1 {
margin-bottom: 60px;
text-align: center;
}
#Error .error {
text-align: center;
}
#Error .error dl {
margin-bottom: 40px;
}
#Error .error dt {
margin-bottom: 20px;
background-color: #e9e9e9;
font-size: min(6vw,20px);
}
#Error .error dd ul li {
margin-bottom: 15px;
}

/* Maintenance
----------------------------------------- */
#Maintenance #header {
margin-bottom: 100px;
}
#Maintenance #main {
margin-bottom: 150px;
}
#Maintenance #contentsTitle {
margin-right: auto;
margin-bottom: 50px;
margin-left: auto;
width: 80%;
text-align: center;
}
#Maintenance .container {
margin-right: auto;
margin-left: auto;
width: 80%;
text-align: center;
}

/* genelalForm
----------------------------------------- */
.generalForm h1 {
margin-bottom: 10px;
}
.generalForm .contentsWrap {
margin-right: auto;
margin-left: auto;
}

/* Budget
----------------------------------------- */
#Budget {
background-image: url("../img/service/web/display/bk_budget.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 40px 40px 0 0;
}
#ServiceWebListing #Budget {
background-image: url("../img/service/web/listing/bk_budget.jpg");
}
#ServiceWebDisplay #Budget {
background-image: url("../img/service/web/display/bk_budget.jpg");
}
#ServiceWebYoutube #Budget {
background-image: url("../img/service/web/youtube/bk_budget.jpg");
}
#ServiceWebSns #Budget {
background-image: url("../img/service/web/sns/bk_budget.jpg");
}
#Budget .contents {
margin-right: auto;
margin-left: auto;
}
#Budget .caption {
margin-bottom: 20px;
}
#Budget .simulator th {
text-align: left;
}
#Budget .simulator th .num {
margin-right: 0.4em;
}
#Budget .simulator td select {
background-color: #ffffff;
border: 0;
border-radius: 3px;
box-shadow: 0 0 8px rgba(0,0,0,0.2);
}
#Budget .simulator input[type="text"] {
margin-bottom: 20px;
padding: 1em;
width: 100%;
background-color: #ffffff;
border: 0;
border-radius: 3px;
box-shadow: 0 0 8px rgba(0,0,0,0.2);
text-align: right;
}
#Budget .simulatorBtn {
width: 100%;
position: relative;
display: block;
background-color: #3a7fde;
border: 0;
color: #ffffff;
cursor: pointer;
transition:800ms ease all;
outline:none;
}


#Budget .simulatorBtn:hover{
  background:#fff;
  color:#3a7fde;
  border-radius: 0px;
}
#Budget .simulatorBtn:before,button:after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  height:2px;
  width:0;
  background: #3a7fde;
  transition:400ms ease all;
}
#Budget .simulatorBtn:after{
  right:inherit;
  top:inherit;
  left:0;
  bottom:0;
}
#Budget .simulatorBtn:hover:before,button:hover:after{
  width:100%;
  transition:800ms ease all;
}

#Budget .Result {
background-color: #ffffff;
text-align: center;
}
#Budget .Result h2 {
margin-bottom: 20px;
}
#Budget .Result .resultList {
margin-right: auto;
margin-bottom: 40px;
margin-left: auto;
}
#Budget .Result .resultList .num {
margin-right: 0.4em;
}
#Budget .Result .selectResult {
color: #3a7fde;
display: inline-block;
}
#Budget .Result .resultText {
color: #3a7fde;
font-weight: bold;
}





/* KYOUTSU END // PC BASE ==================== */
@media only screen and (min-width: 1080px){	

/* genelal base
============================================== */
#gnav #nav > li:last-of-type.current {
background-color: #4d8cab;
}
.container {
width: 1080px;
}

.bge-ckeditor .container{
  width: 1080px !important;

}

/* breadCrumbs
============================================== */
#breadCrumbs .wrap {
margin-right: auto;
margin-left: auto;
width: 1080px;
}

/* contact
============================================== */
#contact .wrapper {
text-align: center;
}
#contact .container {
margin: 2em auto;
display: inline-block;
text-align: left;
}

/* form
============================================== */
.general form {
margin-bottom: 150px;
}
.formTable tr {
margin-bottom: 2em;
width: 100%;
display: table;
}
.formTable th {
padding-right: 20px;
width: 25%;
display: table-cell;
text-align: left;
position: relative;
}
.formTable td {
display: table-cell;
}
.formTable input {
margin-right: 0.5em;
width: 80%;
}
.formTable input,
.formTable textarea,
.auth-captcha input[type="text"] {
width: 100%;
}
.formTable input[type="text"] {
line-height: 2;
}
.formTable td input[type="radio"],
.formTable td input[type="checkbox"] {
width: auto;
vertical-align: inherit;
}
.auth-captcha {
display: flex;
flex-wrap: wrap;
}
.auth-captcha span:first-of-type {
width: 25%;
}
.auth-captcha .auth-captcha-image {
min-width: 300px;
}
#MailMessageAuthCaptcha {
margin-left: auto;
width: 75%;
}
.auth-captcha .error-message {
margin-left: auto;
width: 75%;
text-align: left;
}
.submit input[type="submit"],
.submit input[type="reset"] {
width: 50%;
font-size: min(6vw, 20px);
}
.formTable th .required {
margin-left: 1em;
}

/* genelalForm
============================================== */
.generalForm {
margin-bottom: 200px;
}
.generalForm .contentsWrap {
width: 300px;
}

/* Budget
============================================== */
#Budget {
margin-bottom: 100px;
}
#Budget .contents {
padding-top: 100px;
padding-bottom: 100px;
width: 1080px;
}
#Budget h1 {
width: 893px;
}
#Budget .caption {
margin-bottom: 70px;
width: 893px;
}
#Budget .simulator {
margin-bottom: 100px;
width: 893px;
}
#Budget .simulator th {
font-size: min(6vw,26px);
}
#Budget .simulator .level-2 {
padding-left: 5%;
overflow: hidden;
}
#Budget .simulator .level-2 th {
margin-left: 1.9em;
padding-left: 1em;
display: block;
position: relative;
}
#Budget .simulator td {
vertical-align: middle;
}
#Budget .simulator .level-2 th::before {
content: '';
width: 0.5em;
height: 1em;
display: inline-block;
border-bottom: 1px solid #0e1c22;
border-left: 1px solid #0e1c22;
position: absolute;
top: 0;
left: 0;
}
#Budget .simulator .level-2 th::after {
content: '';
width: 0.5em;
height: min(10vh,8em);
display: inline-block;
border-left: 1px solid #0e1c22;
position: absolute;
top: 0;
left: 0;
}
#Budget .simulator .level-2:nth-last-child(2) th::after {
display: none;
}
#Budget .simulator td {
width: 50%;
}
#Budget .simulator td select {
margin-bottom: 20px;
padding-top: 20px;
padding-bottom: 18px;
padding-left: 20px;
}
#Budget .simulatorBtn {
margin-bottom: 100px;
height: min(6vw,100px);
font-size: min(6vw,26px);
border-radius: 20px;
}
#Budget .Result {
padding-top: 60px;
padding-bottom: 50px;
}
#Budget .Result h2 {
font-size: min(6vw,40px);
}
#Budget .Result .contentsWrap {
margin-right: auto;
margin-left: auto;
widows: 60%;
font-size: min(6vw,26px);
}
#Budget .Result .resultList {
width: 60%;
text-align: left;
}
#Budget .Result .report .resultText {
padding-right: 0.2em;
padding-left: 0.2em;
font-size: min(6vw,40px);
}



}/* PC END // SP BASE |||||||||||||||||||||||||||||| */
@media only screen and (max-width: 1079px){

/* general base
|||||||||||||||||||||||||||||||||||||||||||||||||||| */
.container {
text-align: center;
}
#contentsTitle {
text-align: center;
}
.contentWrap {
display: inline-block;
width: 90%;
text-align: left;
}
.genelal .pageTitle {
width: 100%;
}

/* form
|||||||||||||||||||||||||||||||||||||||||||||||||||| */
.general form {
margin-bottom: 100px;
}
.mailForm {
width: 90%;
margin: 0 auto;
}
.manual {
margin-right: auto;
margin-left: auto;
width: 90%
}
.manual p {
margin-top: 1em;
display: inline-block;
}
.formTable .required {
margin-left: 1em;
}
.formTable tr {
/* margin-bottom: 2em; */
width: 100%;
display: table;
}
.formTable th {
padding: 0.5em;
width: 100%;
display: block;
text-align: left;
}
.formTable td {
padding: 0.5em;
width: 100%;
display: block;
}
.formTable td input[type="tel"],
.formTable td input[type="email"],
.formTable td input[type="text"],
.formTable td textarea { 
width: 100%;
display: block;
}
.formTable td input[type="text"] {
line-height: 2;
}
#MailMessageIndexForm input[type="submit"], 
#MailMessageIndexForm input[type="reset"] {
width: 80%;
}
.auth-captcha .auth-captcha-image {
min-width: 40%;
display: inline-block;
vertical-align: middle;
}
#MailMessageAuthCaptcha {
margin-right: auto;
margin-left: auto;
width: 60%;
display: inline-block;
}

/* genelalForm
|||||||||||||||||||||||||||||||||||||||||||||||||||| */
.generalForm {
padding-top: 15%;
padding-bottom: 15%;
}
.generalForm .contentsWrap {
/* width: 90%; */
padding: 0 20px;  
}
.generalForm h1 {
margin-bottom: 10px;
}

/* Budget
|||||||||||||||||||||||||||||||||||||||||||||||||||| */
#Budget {
margin-bottom: 50px;
}
#Budget .contents {
padding-top: 20%;
padding-bottom: 10%;
width: 90%;
}
#Budget h1 {
margin-bottom: 10px;
font-size: min(10vw,30px);
}
#Budget .caption {
margin-bottom: 35px;
}
#Budget .simulator {
width: 100%;
}
#Budget .simulator th {
font-size: min(10vw,22px);
}
#Budget .simulator th {
display: block;
}
#Budget .simulator td {
display: block;
}
#Budget .simulator .level-1 {
margin-bottom: 1em;
display: block;
}
#Budget .simulator .level-1 th {
margin-bottom: 0.5em;
}
#Budget .simulator .level-1.subSelect {
margin-bottom: 0.5em;
}
#Budget .simulator .level-1.subSelect td {
display: none;
}
#Budget .simulator .level-2 {
margin-bottom: 1em;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#Budget .simulator .level-2 th {
min-width: 20%;
padding-left: 0.5em;
display: inline-block;
font-size: min(10vw,16px);
}
#Budget .simulator .level-2 td {
min-width: 70%;
display: inline-block;
}
#Budget .simulator .level-2 select {
width: 100%;
display: block;
vertical-align: middle;
}
#Budget .simulator td select {
padding-top: 1em;
padding-bottom: 1em;
padding-left: 0.5em;
font-size: 80%;
}
#Budget .simulatorBtn {
margin-bottom: 50px;
padding: 0.8em;
font-size: min(10vw,16px);
border-radius: 5px;
}
#Budget .Result {
padding-top: 30px;
padding-bottom: 40px;
}
#Budget .Result h2 {
font-size: min(10vw,20px);
}
#Budget .Result .contentsWrap {
margin-right: auto;
margin-left: auto;
width: 70%;
font-size: min(10vw,18px);
}
#Budget .Result .resultList {
width: 90%;
text-align: left;
}
#Budget .Result .report .resultText {
padding-right: 0.2em;
padding-left: 0.2em;
font-size: min(10vw,22px);
}



}/* SP END |||||||||||||||||||||||||||||||||||||||| */