@import url("./base.css");

a {
  font-family: sans-serif;
  text-decoration: none;
}
.humberger {
  display: block;
  height: 14.933vw;
  margin-left: auto;
  position: relative;
  z-index: 10;
  width: 16.533vw;
  border: none;
  background-color: transparent;
}
.humberger.-active .humberger__line {
  background-color: transparent;
}
.humberger.-active .humberger__line::before {
  top: 0;
  transform: rotate(45deg);
}
.humberger.-active .humberger__line::after {
  top: 0;
  transform: rotate(-45deg);
}
.humberger.-active .humberger__text::before {
  content: "閉じる";
}
.humberger__line {
  display: block;
  height: 0.8vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 8.267vw;
  background-color: #ffffff;
  transition: 0.4s;
}
.humberger__line:before,
.humberger__line:after {
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  width: 100%;
  background-color: #ffffff;
  transition: inherit;
}
.humberger__line:before {
  top: -3.2vw;
}
.humberger__line:after {
  top: 3.2vw;
}

.header {
  display: block !important;
  position: relative;
  width: 100vw;
  background-color: #172051;
}
.header .logo {
  position: absolute;
  top: 50%;
  left: 5.333vw;
  width: 22.4vw;
  left: 4.533vw;
  transform: translateY(-50%);
}
.header__nav-area {
  position: fixed;
  top: 0;
  left: -100%;
  z-index: 9;
  height: 100vh;
  width: 100vw;
  visibility: hidden;
  padding-top: 14.933vw;
  background-color: #172051;
  transition: 0.4s;
  color: #ffffff;
}
.header__nav-area.-active {
  left: 0;
  visibility: visible;
}
.global-navigation {
  padding: 0 4.267vw;
}
.global-navigation__list {
  border-top: 1px solid #dddddd;
  margin-top: 15vw;
  padding: 0;
}
.global-navigation__list > li {
  position: relative;
  line-height: 12.8vw;
  border-bottom: 1px solid #dddddd;
  width: 100%;
}
.global-navigation__list > li::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 2.667vw;
  border-top: solid 1px #ffffff;
  border-right: solid 1px #ffffff;
  width: 1.6vw;
  height: 1.6vw;
  transform: rotate(45deg) translateY(-50%);
}
.global-navigation__link {
  display: block;
  width: 100%;
  font-size: 3.2vw;
  color: #ffffff;
  padding: 0 4.267vw;
}
.global-navigation__link.-accordion {
  position: relative;
  background: none;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  padding: 0;
}

body {
  overflow: hidden;
  margin: 0;
}
#home {
  position: relative;
}
.jpn_button,
.jpn_button2 {
  position: absolute;
  top: 1.867vw !important;
  left: unset !important;
  right: 1.867vw;
  margin-top: 0 !important;
  z-index: 999;
  background-color: none;
}
.caroufredsel_wrapper {
  height: auto !important;
  aspect-ratio: 127 / 50;
}
.caroufredsel_wrapper img {
  width: 100%; /* fallback */
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 127 / 50;
}
#slide {
  display: flex;
  height: auto !important;
  aspect-ratio: 127 / 50;
}
#decoration {
  display: none;
}
h1 {
  display: none;
}

#headerbox::after {
  content: "";
  display: block;
  height: 9.6vw;
  background-image: linear-gradient(90deg, #19a949, #8ec323);
}
#gmenu ul {
  padding: 0 4.267vw;
  margin: 12.8vw 0;
}
#gmenu ul li {
  position: relative;
  list-style: none;
  border-bottom: 1px solid #172051;
}
#gmenu ul li::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 4vw;
  border-top: solid 1px #172051;
  border-right: solid 1px #172051;
  width: 1.6vw;
  height: 1.6vw;
  transform: rotate(45deg) translateY(-50%);
}
#gmenu ul li:first-child {
  border-top: 1px solid #172051;
}
#gmenu ul li a {
  display: block;
  color: #172051;
  font-size: 3.733vw;
  padding: 3.467vw;
}

#footerbox {
  background-color: #172051;
  color: #ffffff;
  padding: 6.4vw 4.267vw;
}
#footerbox #gotop_btm {
  display: none;
}
#footer h2 {
  width: 30.133vw;
  background-image: url(/img/logo_blue.gif);
  background-repeat: no-repeat;
  height: 12vw;
  margin: auto;
  text-indent: -2666.4vw;
  background-size: contain;
}
#footer #finfo {
  margin-top: 12vw;
  font-size: 3.2vw;
  line-height: 4.8vw;
}
#footer #finfo h3 {
  font-weight: bold;
}
#footer #finfo p {
  color: #ffffff;
  margin-top: 2.133vw;
}
#footer #finfo a {
  color: #ffffff !important;
}
#footer #fmenu {
  padding: 10.133vw 0;
  font-size: 3.2vw;
}
#footer #fmenu li {
  line-height: 10.133vw;
  border-top: 1px solid #ffffff;
  width: 100%;
}
#footer #fmenu li:last-child {
  border-bottom: 1px solid #ffffff;
}
#footer #fmenu a {
  display: block;
  color: unset;
  text-decoration: none;
}
#footer #copy {
  text-align: center;
  font-size: 2.133vw;
  word-break: break-all;
}
#footer #copy br {
  display: none;
}
#footer .font18 {
  font-size: 3.2vw;
}

h1 {
  display: none;
}

h2 img {
  width: 100%;
}
#contact #gmenu,
#productslist #gmenu,
#company #gmenu,
#privacy #gmenu {
  display: none;
}

#productslist,
#contact,
#company,
#privacy {
  background-color: #c9e4f1;
  background-image: url(/img/bg_sec.gif);
  background-repeat: no-repeat;
  background-position: top center;
}
#header > .mt30 {
  margin: 0;
}

#headerbox #header {
  width: 100%;
  position: relative;
}
#headerbox .center img {
  width: 12.533vw;
  height: 8.8vw;
  margin-top: 4.267vw;
  object-fit: contain;
}
#headerbox #header h2 {
  margin-top: -4.8vw;
  height: 17.6vw;
  background-color: rgba(255, 255, 255, 0.5);
}
#headerbox #header h2 img {
  object-fit: contain;
  height: 100%;
  transform: scale(1.4);
}

#pan {
  padding: 5.333vw 4.8vw;
  font-size: 2.667vw;
}
#pan a {
  color: unset;
  text-decoration: underline;
}
#pan span {
  margin: 0 1.067vw;
}

#contact #headerbox::after,
#productslist #headerbox::after,
#company #headerbox::after,
#privacy #headerbox::after {
  content: none;
}
#contact .onebox,
#privacy .onebox {
  background-color: #ffffff;
  width: calc(100vw - (4.267vw * 2));
  margin: auto;
  padding: 8.8vw 6.4vw;
  box-sizing: border-box;
  color: #172051;
}

#contact .onebox > .mt60,
#contact .onebox > .mb60 {
  margin: 0;
}

#contact .onebox > .font20 {
  font-size: 4.267vw;
  font-weight: bold;
  margin-bottom: 4.267vw;
}
#contact .onebox > .font15 {
  font-size: 3.733vw;
  margin-top: 4.267vw;
}
#contact .onebox > .alcenter img {
  width: 100%;
  margin-top: 4.267vw;
}
#productslist #wrap {
  padding: 0 4.8vw 10.667vw;
  box-sizing: border-box;
  color: #172051;
  font-size: 3.733vw;
}
#productslist #wrap .mainbox {
  background-color: #ffffff;
  padding: 4.267vw 2.133vw 6.4vw;
}

#productslist #wrap .pinfobox h4 {
  font-size: 4.8vw;
  font-style: italic;
  padding-bottom: 0.8vw;
  border-bottom: 2px solid #172051;
  border-bottom-style: solid;
}
#productslist #wrap .pinfobox .products_image {
  margin-top: 4.267vw;
}
#productslist #wrap .pinfobox .products_image img {
  width: 100%;
}
#productslist #wrap .pinfobox iframe {
  width: 100%;
}
#productslist #wrap .pinfobox .standard {
  overflow: hidden;
  margin-top: 4.267vw;
}
#productslist #wrap .pinfobox .standard img {
  height: 7.467vw;
  width: auto;
}
#productslist #wrap .pinfobox h5 {
  position: relative;
  text-align: left;
  font-size: 4.8vw;
  margin-top: 4.267vw;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  white-space: nowrap;
}

#productslist #wrap .pinfobox h5:before {
  border-top: 1px solid;
  border-color: #1d4372;
  content: "";
  width: 100%;
  display: inline-block;
}

#productslist #wrap .pinfobox h5 span {
  padding-right: 2.667vw;
}

#productslist #wrap .pinfobox .font15 {
  font-size: 3.733vw !important;
}
#productslist #wrap .pinfobox .font11 {
  font-size: 3.2vw !important;
}
#productslist #wrap .pinfobox .ml10 {
  margin-left: 0 !important;
}
#productslist #wrap .pinfobox table td {
  width: 50%;
}
#productslist #wrap .pinfobox table img {
  width: 100%;
}

#sidebar {
  margin-top: 10.667vw;
}
#sidebar .innerbox {
  background-color: #ffffff;
  padding: 4.267vw;
}
#sidebar .innerbox ul {
  border-top: 1px solid #dddddd;
}
#sidebar .innerbox li {
  position: relative;
  line-height: 10.667vw;
  border-bottom: 1px solid #dddddd;
}

#sidebar .innerbox li::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 2.667vw;
  border-top: solid 1px #172051;
  border-right: solid 1px #172051;
  width: 1.6vw;
  height: 1.6vw;
  transform: rotate(45deg) translateY(-50%);
}
#sidebar .innerbox li a {
  display: block;
  color: #172051;
  padding: 0 2.667vw;
  font-size: 3.733vw;
}
.hl_pct {
  line-height: 0;
  font-size: 1;
}
.hl_pct img {
  margin: 0;
}
#productslist #sidebar .hl_pct {
  background-color: #172051;
  overflow: hidden;
}
#productslist #sidebar .hl_pct img {
  width: auto;
  transform: translateX(-25%);
  height: 11.5vw;
}

#wrap {
  padding: 0 4.8vw 10.667vw;
}

#wrap > div {
  background-color: #ffffff;
}
#wrap .mainbox .bimg {
  width: 100%;
  height: auto;
}
.innerbox {
  padding: 0 1.6vw 6.4vw;
}
#wrap .mainbox .hl_pct {
  padding-top: 12.8vw;
  overflow: hidden;
  margin-top: 0 !important;
}
#wrap .mainbox .hl_pct img {
  width: 130%;
  height: auto;
}
.inbox01 p {
  font-size: 3.2vw;
  line-height: 5.6vw;
}
#company table {
  width: 100%;
  padding: 0 4.267vw;
}
#company table p {
  font-size: 3.2vw;
  line-height: 5.6vw;
}
.inbox01.font16.fm_min {
  padding: 0 4.267vw;
}
#company .inbox01 p img {
  width: 50%;
  height: auto;
}
#company .inbox01 p img.ml-38 {
  margin-left: 0;
  width: 100%;
}
.gotop {
  display: none;
}
.inbox04 {
  padding: 5.333vw 8vw;
  padding-bottom: 0;
  margin-bottom: 0;
}
.accessbox {
  display: flex;
  flex-direction: column;
  padding: 0 3.733vw;
}
.accessbox {
  display: flex;
  flex-direction: column;
  padding: 0 3.733vw;
}
.accessbox .btn_gmap {
  width: 70%;
  margin: 2.667vw auto;
  order: 3;
}
.accessbox .floatl.w200.mr40 {
  order: 1;
  padding-top: 2.667vw;
  width: 100%;
  margin: 0;
}

.accessbox .floatr.w303 {
  order: 2;
  margin-top: 2.667vw;
}

.accessbox .floatr.w303 .hl_large {
  font-size: 4.267vw;
  font-weight: bold;
  line-height: 1;
}

.accessbox .floatr.w303 .mt10 {
  font-size: 3.2vw;
}
#company .hl_pct2 {
  width: 100%;
  text-align: center;
  background-color: #172051;
  overflow: hidden;
}

#company .hl_pct2 img {
  width: auto;
  transform: translateX(-13.333vw);
  height: 11.5vw;
}
#contact .indenttxt {
  padding: 0;
  font-size: 3.733vw !important;
}
#contact .onebox > div:not(:first-child) {
  padding: 0 6.4vw;
}
#contact .onebox > div:nth-child(2) {
  padding-top: 12.8vw;
}
#contact .onebox > div:nth-child(2) > div {
  padding-top: 0;
}
#contact .onebox > div:nth-child(2) > div:nth-child(2) {
  padding-top: 4.267vw;
  font-size: 3.733vw;
}
#contact .onebox > div:nth-child(2) img {
  width: auto;
  height: 4.267vw;
}
#contact .onebox > div:nth-child(2) > div:nth-child(3) {
  font-weight: bold;
  font-size: 4.267vw;
}
#contact .onebox > div:nth-child(2) > div:nth-child(3) a {
  color: unset;
}
#contact .onebox > div:nth-child(2) > div:nth-child(4) {
  padding-top: 4.267vw;
  font-size: 3.733vw;
}
#contact .onebox > .separate {
  padding-top: 48px !important;
  text-align: center;
}
#contact .onebox > .separate > img {
  width: auto;
  height: 4.267vw;
}
#contact .onebox > .fm_min {
  width: auto;
}
#contact .onebox > .fm_min ul {
  padding-top: 4.267vw;
  font-size: 3.733vw;
}

#contact .onebox form tr {
  display: block;
}
#contact .onebox form .mainth {
  display: flex;
  align-items: center;
  background-color: #043459;
  padding: 1.067vw 1.6vw;
  max-width: fit-content;
  margin-top: 6.4vw;
  color: #ffffff;
  float: left;
  max-width: 70%;
}

#contact .onebox form tr:nth-child(3) .mainth::after {
  content: none;
}
#contact .onebox form .mainth img {
  width: auto;
  height: 3.733vw;
}
#contact .onebox form .need {
  color: #e90d19;
  display: inline-block;
  margin-top: 6.7vw;
  line-height: 1.4em;
  margin-left: 1vw;
}
#contact .onebox form .maintd {
  display: block;
}
#contact .onebox form .ckbox {
  font-size: 3.2vw;
}
#contact .onebox form textarea {
  height: 17.333vw;
}

.contact_tb input,
.contact_tb textarea,
.contact_tb select {
  width: 100%;
  border: 1px solid #c0ccd5;
  box-sizing: border-box;
  font-size: 16px;
}

.maintd > div {
  margin-top: 1.067vw;
  font-size: 2.667vw;
  color: #888888;
}
.maintd > div a {
  color: unset;
  pointer-events: none;
}
.contact_tb input[type="text"],
.contact_tb select {
  height: 6.5vw;
  margin-bottom: 1.067vw;
}
.contact_tb input[type="radio"] {
  width: auto !important;
}
.ckbox tr {
  margin: 0;
}
#contact .privacy {
  padding: 4vw;
  border: 1px solid #043459;
  margin-top: 6.4vw;
}
#contact .privacy .privacy2 {
  text-align: center;
  font-weight: bold;
  font-size: 3.733vw;
}
#contact .privacy .privacy3 {
  font-size: 3.2vw;
  margin-top: 3.2vw;
}
#contact .privacy .privacy3 a {
  text-decoration: underline;
  color: #8ec323;
}
#contact .privacy .privacy4 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 6.4vw;
}
#contact .privacy .privacy4 .need2 {
  display: flex;
  align-items: center;
  color: #e90d19;
}
#contact .privacy .privacy4 .need2 img {
  display: none;
}
#contact .privacy .privacy4 input,
#contact .privacy .privacy4 label {
  font-size: 3.2vw;
  line-height: 1;
}
#contact .privacy .privacy4 p:nth-child(2) {
  display: flex;
  align-items: center;
}
#contact .onebox #formWrap {
  display: block;
  padding-bottom: 6.4vw;
}
#contact .onebox #formWrap > h3 {
  text-align: center;
  font-size: 4.267vw;
  border-width: 0.533vw;
  padding-bottom: 4.267vw;
}
#contact .onebox #formWrap > .msg {
  padding: 0 6.4vw;
  font-size: 3.733vw;
}
#contact .onebox #formWrap form {
  padding-top: 0;
  padding-bottom: 0;
}
#contact .onebox #formWrap form .formTable td,
#contact .onebox #formWrap form .formTable th {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-size: 3.733vw;
  padding: 1.067vw;
  border-bottom: none;
  text-align: left;
}
#contact .onebox #formWrap form .formTable td {
  padding-top: 3.2vw;
  padding-bottom: 3.2vw;
}

#contact .onebox #formWrap form .formTable tr:last-child td {
  border-bottom: 1px solid #ccc;
}
#contact .onebox #formWrap form > p input,
#contact .onebox #formWrap > div input {
  display: block;
  margin-top: 4.267vw;
  width: 57.333vw;
  height: 11.2vw;
  font-size: 4.267vw;
}
#contact .onebox #formWrap form > p input[type="submit"] {
  color: #fff;
  background-color: #ff8c00;
  border-radius: 2em;
}

#privacy .center.sdgs {
  padding-bottom: 6.4vw;
}

#privacy .center.sdgs h2 img {
  width: calc(100vw - (4.267vw * 2));
  height: auto;
}

#privacy .center.sdgs a li img {
  width: 44.267vw;
  height: auto;
  margin: 0 !important;
}
#privacy .onebox h3 {
  font-size: 4.267vw;
  padding: 2.133vw 0;
  border-bottom: 1px solid #043459;
}

#privacy .onebox .text1,
#privacy .onebox .text2 {
  font-size: 3.733vw;
  padding: 2.667vw 0;
}
#privacy .onebox .text1 a {
  text-decoration: underline;
  color: #8ec323;
}
.ckbox {
  width: 100%;
  padding-top: 2.667vw;
}
.ckbox tr {
  display: flex !important;
  flex-direction: row;
  flex-wrap: wrap;
}
.ckbox th {
  width: 10%;
  margin-bottom: 2.667vw;
}
.ckbox td {
  width: 90%;
  text-align: left;
}

/* 較正依頼バナーのスタイル設定（スマホ用） */
.calibration-banner {
    width: 90%;            /* 左右に少し余白を持たせる */
    max-width: 400px;      /* 大きくなりすぎないように制限 */
    margin: 20px auto;     /* 上下に余白を作り、中央配置 */
    text-align: center;
}

.calibration-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #b8d24d; /* 画像に基づいたライムグリーン系 */
    color: #003366;           /* 文字色は濃いネイビー系 */
    text-decoration: none;
    padding: 15px 20px;
    border-radius: 10px;      /* 角丸 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 影をつけて立体感を出す */
    transition: background-color 0.3s;
}

.calibration-btn:active {
    background-color: #a5bd45; /* タップした時に少し色を濃くする */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transform: translateY(2px);
}

.btn-text {
    font-size: 16px;          /* スマホで読みやすいサイズ */
    font-weight: bold;
    line-height: 1.4;
    text-align: center;
}

.btn-icon {
    font-size: 20px;
    margin-left: 15px;        /* テキストと矢印の間の余白 */
}

/* 画面幅が非常に狭い場合の微調整 */
@media screen and (max-width: 350px) {
    .btn-text {
        font-size: 14px;
    }
}

/* レスポンシブ対応 */
@media (max-width: 1024px) {
	.calibration-btn {
		width: 85%;
		padding: 22px 35px;
		font-size: 16px;
	}
}

@media (max-width: 768px) {
	.calibration-btn {
		width: 90%;
		padding: 18px 30px;
		font-size: 14px;
	}
	
	.calibration-btn .btn-icon {
		margin-left: 15px;
		font-size: 18px;
	}
}