@charset "utf-8";

*,
*:before,
*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; backface-visibility: hidden;}
html { margin: 0; padding: 0;}
body { font-family: "Noto Sans Japanese", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif; color: #111; font-size: 16px; line-height: 1.8; word-break: break-all; margin: 0; padding: 0;}
div, p, ul, ul li, dl, dt, dd { margin: 0; padding: 0; font-size: 100%; list-style: none; box-sizing: border-box;}
img, video, object { max-width: 100%; height: auto; border: none;}
img { image-rendering: -webkit-optimize-contrast;}
a:link { color: #222; text-decoration: none; transition: 0.3s;}
a:visited { color: #000; transition: 0.3s;}
a:hover { color: red; transition: 0.3s;}
a:hover img { opacity: 0.8; transition: 0.3s;}
a[href^="tel:"] { text-decoration: none; pointer-events: none; text-emphasis: none !important;}
a[href^="fax:"] { text-decoration: none; pointer-events: none;}
.pc { display: inherit;}
.tb { display: none;}
.sm { display: none;}

@media only screen and (max-width:820px) { .pc { display: none; }
 .tb { display: block; }
 .sm { display: none; }
}

@media only screen and (max-width:468px) { body { font-size: 15px; min-width: 375px; }
 .pc { display: none; }
 .tb { display: none; }
 .sm { display: block; }
}

:root {
    --red: #DC0605;
}
.alC { text-align: center;}
.red { color: var(--red);}


/*  */
/* Section spacing */
/*  */
/* Section spacing */
section { padding: 4rem 0; position: relative;}
.inner { max-width: 1200px; margin: 0 auto; position: relative; width: 96%;}
.inner+.inner { margin-top:2.0em; }
h1 {text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.6);}

@media (max-width: 1080px) { 
    section { padding: 3rem 0;}
}

/*  */
/* .site-header*/
/*  */
.site-header { background: #fff; position: fixed;  top: 0; left: 0; width: 100%; z-index: 9999; display: flex; align-items: center; height: 100px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);}
.header-inner { display: flex; justify-content: space-between; align-items: center;}
.site-logo { height: 40px;}
.site-logo img { height: 40px;}
/* pc-nav */
.pc-nav ul { display: flex; gap: 3em; list-style: none;}
.pc-nav li a { text-decoration: none; color: #333; text-align: center; font-weight: 500; font-size: 1.2em;}
.pc-nav li a i { font-size: 0.7em;}
.pc-nav li a:hover { color: var(--red);} 
/* ハンバーガー */
.sp-menu-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; transition: all 0.3s ease;}  
.sp-menu-toggle span { width: 27px; height: 4px; background: var(--red); border-radius: 20px; transition: all 0.3s ease; transform-origin: center;}  
/* open時のアニメーション */
.sp-menu-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px);}  
.sp-menu-toggle.open span:nth-child(2) { opacity: 0;}  
.sp-menu-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px);}  


/* スマホナビ */
.sp-nav {display: none; background: #fff; padding: 20px 0; position: absolute; top: 100%; left: 0; width: 100%; z-index: 1000; border-radius: 0 0 1em 1em; border-top: 1px solid #eee; box-shadow: 0 4px 10px rgba(0,0,0,0.1); text-align: center;}
.sp-nav ul {list-style: none; padding: 0; margin: 0;}
.sp-nav li {margin-bottom: 0; border-top: 1px solid #eee;}
.sp-nav li:first-child {border-top: none;}
.sp-nav li a {display: block; padding: 15px 20px; text-decoration: none; color: #333; font-weight: 600; font-size: 1.1em; transition: background 0.3s ease, color 0.3s ease;}
.sp-nav li a:hover {background: #f5f5f5; color: var(--red);}
.sp-nav li a i {margin-left: 5px; font-size: 0.7em;}

/* レスポンシブ切り替え */
@media (max-width: 1080px) { 
    .site-header { height: 80px;}
    .pc-nav { display: none; }
 .sp-menu-toggle { display: flex; }
}



/* title-wrap */
.title-wrap-red { background-color: var(--red); text-align: center; padding: 0.5em; margin-bottom: 4em;}
.title-wrap-red h2 { color: #fff;}

.title-wrap { margin-bottom: 3em;}
.title-wrap h2 { border-bottom: 3px solid #DC0605; width: fit-content; margin: 0 auto; font-size: clamp(1.6em, 4vw, 1.8em);}
.privacy-title-wrap { margin-bottom: 1.5em;}
.privacy-title-wrap h2.privacy_t {  width: fit-content; border: none; margin: 0 0; font-size: clamp(1.4em, 4vw, 1.6em); text-align: left;}

/* table-wrap  */
.table-wrap table{ border-bottom: solid 2px #707070; border-top: solid 2px #707070; width: 100%;}
.table-wrap table tr:not(:last-child) th, .table-wrap table tr:not(:last-child) td {border-bottom: 1px solid #C1C0C0;}
.table-wrap table tr td { padding: 1em;}

.table-wrap table tr th { width: 15%; white-space: nowrap; text-align: left; padding: 1em;}
.table-wrap h3 { font-size: 1.45em; padding-bottom: 0.5em;}
.margin-top-3em { margin-top: 4em;}

/*  */
/* main-visual
/*  */
.main-visual { padding: 0; margin-top: 100px;}
.main-visual .lead-text { position: absolute; top: 14%; left: 50%; transform: translate(-50%, -50%); z-index: 1;} 
.main-visual .lead-text h1 { position: relative; font-size: clamp(1.5em, 3.8vw, 2.0em); white-space: nowrap; text-align: center; line-height: normal;}
.main-visual .lead-text h1::after { content: ""; position: absolute; left: 50%; bottom: -20%; border-radius: 10px; transform: translateX(-50%); width: 20%; height: 4px; background-color: #DC0605;}
/* 仮 */
.main-visual img {  object-fit: cover; width: 100%;}

@media (max-width: 1080px) { 
    .main-visual { margin-top: 80px;}
}

/*  */
/* .concept
/*  */
.concept { text-align: center;}
.concept h2 { color: var(--red); font-size: clamp(1.4em, 4vw, 1.8em); font-weight: bold;}
.concept p { font-size: 1.1em;}
.concept .red-text { color: var(--red); font-size: 1.35em; font-weight: bold;}
.concept .mt-1 { margin-top: 1.5em;} 

@media (max-width: 1080px) { 
    .concept { text-align: left;}
}

/*  */
/* line-up */
/*  */
.line-up {}

.product-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: center;}
.product-list .item p { font-size: clamp(1.1em, 4vw, 1.1em); font-weight: bold; line-height: normal;}

.product-list .item img { width: 200px; height: 200px; object-fit: cover;}
.product-list .item a { display: inline-block; margin-top: 1.5em; padding: 0.3em 1em; border: 2px solid var(--red); color: #111; text-decoration: none; font-weight: 500;}
.product-list .item a i { color: var(--red); margin-left: 0.5em;}
.product-list .item a:hover { background-color: var(--red); color: #fff; }
.product-list .item a:hover i { color: #fff; }

@media (max-width: 820px) { .product-list { grid-template-columns: repeat(2, 1fr); }
}

/*  */
/* link-button */
/*  */
.link-button { margin-top: 3em;}
.link-button a { display: inline-block; padding: 0.3em 1em; border: 2px solid var(--red); color: #111; text-decoration: none; font-size: 1.3em;}
.link-button a i { color: var(--red); margin-left: 0.5em;}
.link-button a:hover { background-color: var(--red); color: #fff;}
.link-button a:hover i { color: #fff; }

/*  */
/* footer */
/*  */
footer { margin-top: 5em;}
footer .footer-inner { text-align: center;}
footer .footer-logo img { width: 60px;}
footer .copyright {  background-color: #000000; color: #fff; text-align: center; font-size: 0.7em; padding: 1em; margin-top: 5em; }


/*  */
/* 下層ページ
/*  */
.key-visual { position: relative; margin-top: 100px; padding: 0; background-image: url(../images/company/main-v.jpg); background-size: cover; background-position: bottom; background-repeat: no-repeat; display: flex; align-items: center;}  
.key-visual .lead-text { position: relative; width: 1200px; margin: 0 auto; z-index: 2; padding: 9em 0.3em;}  
.key-visual .lead-text h1 { font-size: clamp(2.0em, 4vw, 2.4em);}  

@media (max-width: 1080px) { 
.key-visual { margin-top: 80px;background-image: url(../images/index/main_v_01_sp.jpg); } 
.key-visual .lead-text { padding: 4em 0.3em 9em;}
}



.greeting-body { display: flex; align-items: center; gap: 2em;}
.greeting-body h3 { font-size: clamp(1.4em, 4vw, 1.6em); margin-bottom: 1em;}
.greeting-body .message { flex: 4;}
.greeting-body .ceo { flex: 1; text-align: center;}
.greeting-body .ceo { width: 260px;}
.greeting-body .ceo p { font-size: 1.1em; font-weight: 500;}

@media (max-width: 820px) { 
    .greeting-body {  flex-direction: column-reverse;}
}

/*  */
/* partner-section */
/*  */
.partner-section { display: flex; gap: 1em;}
.partner-section .partner-box { flex: 1; border: 5px solid #DDDDDD;}
.partner-section .partner-box h3 { background-color: var(--red); color: #fff; text-align: center; padding: 0.3em; font-size: 1.45em;}
.partner-section .partner-box ul { padding: 1em; line-height: 2;}

@media only screen and (max-width:820px) {
    .partner-section { flex-direction: column;}
}

/*  */
/* Google Mapを囲う要素 */
/*  */
.map { position: relative; width: 100%; height: 450px;}
/* Google Mapのiframe */
.map iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}


/*  */
/* .formTable */
/*  */
.formTable { width: 100%; border-collapse: collapse; color: #333; border-top: 1px solid #e0e0e0;}
.formTable th,
.formTable td { padding: 1em; border-bottom: 1px solid #e0e0e0; vertical-align: top; text-align: left;}
.formTable th { background-color: #f9f9f9; width: 30%; font-weight: 600; font-size: clamp(0.8em, 3vw, 1em); line-height: normal;}
.formTable th span { font-size: 0.7em;}

.formTable td input[type="text"],
.formTable td input[type="email"],
.formTable td input[type="tel"],
.formTable td textarea { width: 100%; padding: 0.5em; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; font-size: 15px; transition: border-color 0.3s;}
.formTable td input:focus,
.formTable td textarea:focus { border-color: #3b82f6; outline: none;}
.formTable td textarea { resize: vertical; min-height: 120px;}
.require { color: #dc2626; font-weight: bold; font-size: 14px; margin-left: 5px;}

.formTable p[align="center"] { margin-top: 30px;}


.link-button { margin-top: 3em;}
.link-button input[type="submit"] { display: inline-block; padding: 0.3em 1em; border: 2px solid var(--red); color: #111; text-decoration: none; font-size: 1.3em;}
.link-button input[type="submit"]:hover { background-color: var(--red); color: #fff;}

p+#contactForm {margin-top:2.0em;}
p a:link { color: red; text-decoration: underline; transition: 0.3s;}
p a:visited { color: red; transition: 0.3s;}
p a:hover { color: orange; transition: 0.3s;}
p a:hover img { opacity: 0.8; transition: 0.3s;}