@font-face {
	font-family: 'myfont2';
	src: url('../font/NotoSansJP-Regular.ttf') format('truetype');
	font-display: swap;
}
@font-face {
	font-family: 'myfont';
	src: url('../font/NotoSerifJP-Regular.ttf') format('truetype');
	font-display: swap;
}

@charset "UTF-8";

:root {
  --color-primary: #ed6c00;
  --color-primary-dark: #c95000;
  --color-navy: #16263b;
  --color-text: #2c333b;
  --color-muted: #6c747c;
  --color-bg: #f5f3ef;
  --color-line: #dedede;
  --color-white: #fff;
  --container: 1000px;
  --header-height: 88px;
  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --font-en: Arial, Helvetica, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--color-text); background: #fff; font-family: var(--font-jp); font-size: 14px; line-height: 1.8; letter-spacing: .04em; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin-top: 0; }
button { font: inherit; }
.container { width: min(calc(100% - 80px), var(--container)); margin-inline: auto; }

/** breadcrumb **/
.breadcrumb {
	font-size:14px;
	max-width:1000px;
	font-family:myfont2;
	width:90%;
	margin:10px 0 10px auto;
	text-align:right;
	color: #888;
}
.breadcrumb-link {
	color: #888;
	font-size:14px;
	text-decoration:underline;
}
.breadcrumb-separator {
	margin:0 10px;
	color:#888;
}
.breadcrumb span + span:before{
    content: ">";
    margin:.5em;
}

.site-header { position: fixed; z-index: 100; top: 0; left: 0; width: 100%; height: var(--header-height); background: rgba(255,255,255,.96); border-bottom: 1px solid rgba(0,0,0,.06); backdrop-filter: blur(10px); }
.header-inner { display: flex; align-items: center; justify-content: space-between; width: min(calc(100% - 48px), 1200px); height: 100%; margin-inline: auto; }
.site-logo { display: inline-flex; align-items: center; gap: 12px; line-height: 1; }
.logo-mark { display: grid; place-items: center; width: 44px; height: 44px; color: #fff; background: var(--color-primary); font: 700 24px/1 var(--font-en); transform: skewX(-8deg); }
.logo-text { color: var(--color-navy); font-size: 25px; font-weight: 800; letter-spacing: .12em; }
.logo-text small { margin-right: 5px; font-size: 11px; letter-spacing: .08em; }
.logo-img {width:20vw;max-width:150px;}
.nav-list { display: flex; align-items: center; gap: 24px; height: 100%; }
.nav-list a { position: relative; display: flex; align-items: center; height: 100%; color: var(--color-navy); font-size: 13px; font-weight: 700; }
.nav-list a:not(.nav-contact)::after { position: absolute; right: 0; bottom: 23px; left: 0; height: 2px; content: ""; background: var(--color-primary); transform: scaleX(0); transform-origin: right; transition: transform .3s; }
.nav-list a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav-phone a { display: flex; flex-direction: column; justify-content: center; line-height: 1.2; white-space: nowrap; }
.nav-phone small { color: var(--color-muted); font-size: 9px; font-weight: 500; }
.nav-phone strong { color: var(--color-primary); font: 700 18px/1.3 var(--font-en); letter-spacing: .03em; }
.nav-phone a::after { display: none; }
.nav-list .nav-contact { height: 48px; padding: 0 25px; color: #fff; background: var(--color-primary); }
.nav-list .nav-contact:hover { background: var(--color-primary-dark); }
.nav-toggle { display: none; width: 44px; height: 44px; padding: 10px; border: 0; background: transparent; }
.nav-toggle span { display: block; height: 2px; margin: 6px 0; background: var(--color-navy); }

.section-heading { margin-bottom: 35px; }
.section-en { margin: 0 0 9px; color: var(--color-primary); font: 700 13px/1 var(--font-en); letter-spacing: .22em; }
.section-heading h2 { margin: 0; color: var(--color-navy); font-size: clamp(27px, 3vw, 38px); line-height: 1.3; letter-spacing: .06em; }
.section-heading-center { text-align: center; }
.section-heading-center > p:last-child { margin: 18px 0 0; color: var(--color-muted); }
.section-heading-light h2, .section-heading-light .section-en { color: #fff; }

.button { display: inline-flex; align-items: center; justify-content: space-between; min-width: 210px; min-height: 58px; padding: 13px 22px 13px 28px; font-size: 13px; font-weight: 700; transition: color .25s, background .25s, transform .25s; }
.button span { margin-left: 25px; font-size: 20px; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #fff; background: var(--color-primary); }
.button-primary:hover { background: var(--color-primary-dark); }
.button-outline { color: var(--color-navy); border: 1px solid var(--color-navy); }
.button-outline:hover { color: #fff; background: var(--color-navy); }
.button-white { color: var(--color-navy); background: #fff; }
.button-contact { color: #fff; background: var(--color-primary); }
.text-link { display: inline-flex; gap: 25px; align-items: center; color: var(--color-navy); font-size: 14px; font-weight: 700; border-bottom: 1px solid currentColor; }

.image-placeholder { position: relative; display: grid; place-items: center; overflow: hidden; color: rgba(255,255,255,.9); background: linear-gradient(135deg, #b9bdbe 0%, #727b7e 100%); text-align: center; }
.image-placeholder::before { position: absolute; inset: 0; content: ""; opacity: .18; background: repeating-linear-gradient(-45deg, transparent 0 15px, #fff 15px 16px); }
.image-placeholder span { position: relative; z-index: 1; font: 700 16px/1.4 var(--font-en); letter-spacing: .18em; }
.image-placeholder small { font-size: 10px; font-weight: 400; letter-spacing: .05em; }

.contact-section { padding: 95px 0; background: #edf0f2; }
.contact-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; }
.contact-inner h2 { margin: 0; color: var(--color-navy); font-size: clamp(21px, 2.5vw, 29px); line-height: 1.55; }
.contact-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.contact-tel { display: flex; flex-direction: column; justify-content: center; min-height: 130px; padding: 18px 22px; color: var(--color-navy); background: #fff; }
.contact-tel small { font-size: 11px; }
.contact-tel strong { color: var(--color-primary); font: 700 22px/1.5 var(--font-en); }
.contact-tel span { color: var(--color-muted); font-size: 9px; }
.button-contact { min-height: 130px; }

.site-footer { color: #fff; background: #101b29; }
.footer-main { display: flex; justify-content: space-between; padding-top: 75px; padding-bottom: 60px;width: min(calc(100% - 48px), 1200px);margin:0 auto;}
.site-logo-footer .logo-text { color: #fff; }
.footer-company address { margin-top: 25px; color: #acb4bd; font-size: 13px; font-style: normal; line-height: 1.8;}

.footer-nav { display: grid; grid-template-columns: repeat(4, auto); gap: 12px 42px; align-content: center; }
.footer-nav a { font-size: 13px; font-weight: 700; }
.footer-nav a:hover { color: var(--color-primary); }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 22px; padding-bottom: 22px; color: #87909b; border-top: 1px solid rgba(255,255,255,.12); font: 11px/1.5 var(--font-en); letter-spacing: .1em; width: min(calc(100% - 48px), 1200px);margin:0 auto;}

.height-30{
	height:30px;
}
@media (max-width: 960px) {
  :root { --header-height: 72px; }
  .container { width: min(calc(100% - 48px), var(--container)); }
  .nav-toggle { display: block; }
  .nav-list { position: fixed; top: var(--header-height); right: 0; display: none; width: min(360px, 100%); height: auto; padding: 25px; background: #fff; box-shadow: 0 15px 30px rgba(0,0,0,.1); }
  .nav-list.is-open { display: block; }
  .nav-list li { border-bottom: 1px solid #eee; }
  .nav-list a { height: auto; padding: 13px 8px; }
  .nav-phone a { align-items: flex-start; }
  .nav-phone strong { font-size: 17px; }
  .nav-list .nav-contact { justify-content: center; margin-top: 15px; }
  .footer-main { gap: 50px; }
	.contact-section {
		padding: 75px 0;
	}

	.contact-inner {
		grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
		gap: 45px;
	}

	.contact-actions {
		gap: 12px;
	}

	.contact-tel,
	.button-contact {
		min-height: 120px;
	}

	.contact-tel {
		padding: 16px 18px;
	}
}

@media (max-width: 640px) {
  body { font-size: 14px; }
  .container { width: min(calc(100% - 36px), var(--container)); }
  .header-inner { width: calc(100% - 24px); }
  .logo-mark { width: 38px; height: 38px; font-size: 20px; }
  .logo-text { font-size: 23px; }
	.logo-img {width:100px;}
  .section-heading { margin-bottom: 25px; }
  .section-heading h2 { font-size: 30px; }
  .footer-main { display: block; padding-top: 55px; }
  .footer-nav { grid-template-columns: repeat(2, 1fr); margin-top: 40px; gap: 12px 25px; }
  .footer-bottom { gap: 20px; align-items: flex-end; }
	.contact-section {
		padding: 55px 0;
	}

	.contact-inner {
		display: block;
	}

	.contact-inner h2 {
		font-size: 22px;
		line-height: 1.6;
	}

	.contact-actions {
		display: grid;
		grid-template-columns: 1fr;
		gap: 12px;
		margin-top: 30px;
	}

	.contact-tel,
	.button-contact {
		width: 100%;
		min-width: 0;
		min-height: 100px;
	}

	.contact-tel {
		align-items: center;
		padding: 16px;
		text-align: center;
	}

	.contact-tel small {
		font-size: 11px;
	}

	.contact-tel strong {
		font-size: 24px;
	}

	.contact-tel span {
		font-size: 10px;
	}

	.button-contact {
		justify-content: center;
		padding: 18px 20px;
	}
}
@media screen and (max-width: 430px) {
	.contact-section {
		padding: 45px 0;
	}

	.contact-inner h2 {
		font-size: 20px;
	}

	.contact-actions {
		margin-top: 25px;
	}

	.contact-tel,
	.button-contact {
		min-height: 90px;
	}

	.contact-tel strong {
		font-size: 22px;
	}
}