@charset "UTF-8";

/* PC */
html[data-browse-mode="P"] .br-sp {
  display: none!important;
}
html[data-browse-mode="P"] #fcontact-article {
  width: 900px;
  margin: 50px auto 50px;
}
html[data-browse-mode="P"] #fcontact--form-address > dl {
  display: flex;
  align-items: center;
  gap: 14px;
}
html[data-browse-mode="P"] #fcontact--form-address > dl + dl {
  margin-top: 14px;
  margin-bottom: 14px;
}
html[data-browse-mode="P"] #fcontact--form-address > dl dd a {
  margin: 0 0 0 15px;
  padding: 4px 10px;
  font-size: 11px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #6F6F6F;
  color: #ffffff;
  border-radius: 4px;
  display: none!important;
}
html[data-browse-mode="P"] #fcontact--form-address > dl + dl {
  width: 360px;
}
html[data-browse-mode="P"] #fcontact--form-address > dl + dl dd {
  flex: 1;
}
html[data-browse-mode="P"] #fcontact--form-address > dl + dl dd input[type="text"] {
  width: 100%;
}

html[data-browse-mode="P"] #fcontact--bottom {
  margin: 34px 0 0;
}
html[data-browse-mode="P"] #fcontact--bottom > p {
  text-align: center;
  font-size: 16px;
}
html[data-browse-mode="P"] #fcontact--bottom > div {
  margin: 8px 0 0;
  text-align: center;
  font-size: 32px;
  font-weight: bold;
}
html[data-browse-mode="P"] #fcontact--bottom > div a {
  pointer-events: none;
  color: inherit;
}
html[data-browse-mode="P"] #fcontact--bottom > div a:before {
  position: relative;
  top: -2px;
  vertical-align: middle;
  display: inline-block;
  content: '';
  width: 48px;
  height: 25px;
  background: url(../../img/usr/freecontact/icon_freedial.png) 0 50% no-repeat;
}
html[data-browse-mode="P"] #fcontact--bottom > dl {
  margin: 46px 0 0;
  font-size: 11px;
  color: #808080;
  display: flex;
  justify-content: center;
}
html[data-browse-mode="P"] #fcontact--bottom > dl dt {
  width: 15em;
}
/*型紙選択*/
html[data-browse-mode="P"] #all_present--katagami dl {
  position: relative;
  margin: 0 0 10px;
  border: solid 1px #CDCDCD;
  border-radius: 4px;
}
html[data-browse-mode="P"] #all_present--katagami dl:before {
  display: block;
  content: '';
  position: absolute;
  left: -1px;
  right: -1px;
  top: -1px;
  bottom: -1px;
  border: solid 2px #014097;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
html[data-browse-mode="P"] #all_present--katagami dl.st__checked:before {
  opacity: 1;
}
html[data-browse-mode="P"] #all_present--katagami dl > dt {
  position: relative;
  padding: 18px 32px 18px 32px;
  font-size: 14px;
  cursor: pointer;
}
html[data-browse-mode="P"] #all_present--katagami dl > dt:after {
  display: block;
  content: '';
  width: 10px;
  height: 10px;
  border-top: solid 2px #999999;
  border-left: solid 2px #999999;
  transform: rotate(-135deg);
  position: absolute;
  right: 18px;
  top: calc(50% - 8px);
}
html[data-browse-mode="P"] #all_present--katagami dl > dt.st__open:after {
  transform: rotate(45deg);
  top: calc(50% - 4px);
}
html[data-browse-mode="P"] #all_present--katagami dl > dd {
  /*display: none;*/
  padding: 0 34px;
}
html[data-browse-mode="P"] #all_present--katagami dl > dd ul li {
  margin: 0 0 20px;
}
html[data-browse-mode="P"] #all_present--katagami dl > dd .katagami-item {
  cursor: pointer;
  display: flex;
  align-items: center;
}
html[data-browse-mode="P"] #all_present--katagami dl > dd .katagami-item > figure {
  margin: 0 14px;
  width: 82px;
  height: 82px;
  border: solid 1px #cdcdcd;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
html[data-browse-mode="P"] #all_present--katagami dl > dd .katagami-item .katagami-item--text__p {
  font-weight: bold;
}
html[data-browse-mode="P"] #all_present--katagami dl > dd .katagami-item .katagami-item--text__c {
  margin: 0;
}

/* SP */
html[data-browse-mode="S"] #fcontact-article {
  width: 100%;
  margin: 50px auto 50px;
}
html[data-browse-mode="S"] #fcontact--head {
  margin: 0 1.5rem 2.5rem;
}
html[data-browse-mode="S"] #fcontact--head h1 {
  margin-bottom: 1.6rem;
}
html[data-browse-mode="S"] .form-group {
  position: relative;
}
html[data-browse-mode="S"] .form-group .form-label {
  float: none;
  width: 100%;
  background: #F9F9F9;
  border-top: 1px solid #E6E6E6;
  border-bottom: 1px solid #E6E6E6;
  font-size: 1.3rem;
  font-weight: bold;
  padding: 0.8rem 1.5rem 0.8rem 1.5rem;
}
html[data-browse-mode="S"] .form-group .constraint {
  position: absolute;
  right: 1.5rem;
  top: 0.8rem;
}
html[data-browse-mode="S"] .form-control {
  padding: 1.2rem 1.6rem;
}
html[data-browse-mode="S"] .form-control input[type="text"] {
  width: 100%;
}

html[data-browse-mode="S"] .block-inquiry--name .form-control > div {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 0 2.0rem;
  font-size: 1.2rem;
}
html[data-browse-mode="S"] .block-inquiry--name .form-control > div input {
  width: 5rem;
  min-width: auto;
  flex: 1;
}
html[data-browse-mode="S"] .block-inquiry--name .form-control > div .help-block {
  position: absolute;
  left: 0;
  bottom: 0;
}
html[data-browse-mode="S"] #fcontact--form-address > dl {
  display: flex;
  align-items: center;
  gap: 1.0rem;
}
html[data-browse-mode="S"] #fcontact--form-address > dl + dl {
  margin-top: 1.5rem;
}
html[data-browse-mode="S"] #fcontact--form-address > dl dt {
  min-width: 5em;
}
html[data-browse-mode="S"] #fcontact--form-address > dl dd {
  flex: 1;
  display: flex;
  align-items: stretch;
}
html[data-browse-mode="S"] #fcontact--form-address > dl dd a {
  margin: 0 0 0 1.2rem;
  padding: 0.4rem 0.8rem;
  font-size: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #6F6F6F;
  color: #ffffff;
  border-radius: 4px;
  display: none!important;
}
html[data-browse-mode="S"] #fcontact--form-address > dl dd input[type="text"] {
  flex: 1;
}


html[data-browse-mode="S"] #fcontact--form .action-buttons {
  margin: 0 1.5rem;
}
html[data-browse-mode="S"] #fcontact--bottom {
  margin: 3.2rem 1.5rem 0;
}
html[data-browse-mode="S"] #fcontact--bottom > p {
  text-align: center;
  font-size: 1.6rem;
}
html[data-browse-mode="S"] #fcontact--bottom > div {
  margin: 0.8rem 0 0;
  text-align: center;
  font-size: 3.2rem;
  font-weight: bold;
}
html[data-browse-mode="S"] #fcontact--bottom > div a {
  color: inherit;
}
html[data-browse-mode="S"] #fcontact--bottom > div a:before {
  position: relative;
  top: -2px;
  vertical-align: middle;
  display: inline-block;
  content: '';
  width: 5.0rem;
  height: 2.4rem;
  background: url(../../img/usr/freecontact/icon_freedial_sp.png) 0 50% / contain no-repeat;
}
html[data-browse-mode="S"] #fcontact--bottom > dl {
  margin: 2.0rem 0 0;
  font-size: 1.2rem;
  color: #808080;
}
html[data-browse-mode="S"] #fcontact--bottom > dl dt {
  margin: 0 0 1.5rem;
}
/*型紙選択*/
html[data-browse-mode="S"] #all_present--katagami dl {
  margin: 0 0 10px;
  border: solid 1px #CDCDCD;
  border-radius: 4px;
  position: relative;
}
html[data-browse-mode="S"] #all_present--katagami dl:before {
  display: block;
  content: '';
  position: absolute;
  left: -1px;
  right: -1px;
  top: -1px;
  bottom: -1px;
  border: solid 2px #014097;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
html[data-browse-mode="S"] #all_present--katagami dl.st__checked:before {
  opacity: 1;
}
html[data-browse-mode="S"] #all_present--katagami dl > dt {
  position: relative;
  padding: 1.4rem 2.8rem 1.4rem 2.8rem;
  font-size: 1.4rem;
  cursor: pointer;
}
html[data-browse-mode="S"] #all_present--katagami dl > dt:after {
  display: block;
  content: '';
  width: 10px;
  height: 10px;
  border-top: solid 2px #999999;
  border-left: solid 2px #999999;
  transform: rotate(-135deg);
  position: absolute;
  right: 18px;
  top: calc(50% - 8px);
}
html[data-browse-mode="S"] #all_present--katagami dl > dt.st__open:after {
  transform: rotate(45deg);
  top: calc(50% - 4px);
}
html[data-browse-mode="S"] #all_present--katagami dl > dd {
  /*display: none;*/
  padding: 0 1.5rem;
}
html[data-browse-mode="S"] #all_present--katagami dl > dd ul li {
  margin: 0 0 2.0rem;
}
html[data-browse-mode="S"] #all_present--katagami dl > dd .katagami-item {
  cursor: pointer;
  display: flex;
  align-items: center;
}
html[data-browse-mode="S"] #all_present--katagami dl > dd .katagami-item > figure {
  margin: 0 1.2rem;
  width: 8.2rem;
  height: 8.2rem;
  border: solid 1px #cdcdcd;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
html[data-browse-mode="S"] #all_present--katagami dl > dd .katagami-item .katagami-item--text__p {
  font-weight: bold;
}
html[data-browse-mode="S"] #all_present--katagami dl > dd .katagami-item .katagami-item--text__c {
  margin: 0;
  font-size: 1.3rem;
}