/*!
Theme Name: sanuma-sys
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: sanuma-sys
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

sanuma-sys is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: #4169e1;
}

a:visited {
	color: #800080;
}

a:hover,
a:focus,
a:active {
	color: #191970;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}


/*---------------------------------------
by MIYATA 
-----------------------------------------*/
/* CSS Document */
html {
  box-sizing: border-box;
}
* {
	margin: 0px;
	padding: 0px;
}
*, *::before, *::after {
  box-sizing: inherit;
}

body {
	font-family: 'Zen Maru Gothic', sans-serif;
	margin: 0;
	font-size: 18px;
	font-weight: normal;
	line-height: 180%;
	color: #3e3a39;
	letter-spacing: 0.15em;
	background-color: #ffffff;	
}
a {
	text-decoration: none;
	color: #3e3a39;
}
a:visited {
	text-decoration: none;
	color: #3e3a39;
}
/* header */

header {
	width: 100%; /* 画面幅いっぱいに変更 */
	padding: 0; 
	position: fixed;
	top: 0;
	left: 0; /* 左端基準に変更 */
	background-color: #ffffff;
	z-index: 1000;
	box-sizing: border-box;
}
.header-inner {
	width: 1440px; /* コンテンツの幅 */
	height: 110px;  /* ヘッダーの高さ */
	margin: 0 auto; /* 中央寄せ */
	position: relative; /* #nav-action の position:absolute の基準になるように */
}

header a {
	color: #3e3a39;
	display: block;
}
/* PCの場合は横並び */
header .header-logo-menu  {
	display: table;
	width: 1440px;
}
header .header-logo-menu #logo-area {
	display: table-cell;
	vertical-align: middle;
	width: 770px;
}

header .header-logo-menu #nav-drawer {
	display: table-cell;
	vertical-align: middle;
	width: 450px;
}
header .header-logo-menu #nav-action {
	display: table-cell;
	vertical-align: middle;
	width: 220px;
}

/*ロゴやサイトタイトルをセンタリング*/
header .logo-area{
	order: 1;
	height: 110px;
}
header .logo-area-inner {
	display: flex;
	align-items: center;
	font-size: 24px;
	height: 110px;
}
header .header-inner .logo-area-inner img {
	width: 50px;
	height: 60px;
	padding: 20px 25px;
	box-sizing: content-box;
}

header ul, ul li {
	margin: 0;
	padding: 0;
	list-style: none;
}
header #nav-content ul {
	display: flex;
	justify-content:center;
	align-items: center;
	font-size: 14px;
	width: 550px;
	height: 110px;
}
header #nav-content li {
	flex: 1;
	word-wrap: break-word;
	display: table-cell;
	vertical-align: middle;
}
header #nav-content li a {
/*display: block;*/
	width: 110px;
	line-height: 110px;
	text-align: center;
}
header #nav-content li a:hover {
	background-color: #ECECEC;
}
header #nav-action ul {
}
header #nav-action li {
	flex: 1;
	word-wrap: break-word;
	align-items: center;
	text-align: center;
	color: #ffffff;
	position: relative;

}
header #nav-action li a {
	display: block;
	width: 110px;
	height: 110px;
	color: #ffffff;
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(0, 30%);
}
header #nav-action a:hover {
	font-weight: bold;
	opacity:0.5;
}
header #nav-action ul {
	display: table;
	justify-content:center;
	font-size: 16px;
	width: 220px;
	height: 110px;
}
	#nav-open span img {
		display: none;
}
header #nav-action li {
	flex: 1;
	word-wrap: break-word;
	display: table-cell;
	vertical-align: middle;
	width: 110px;
	height: 110px;
	text-align: center;

}
/* RECRUIT */
header #nav-action li:first-child {
	background-color: #d63224;
	color: #ffffff;
	
}
/* CONTACT */
header #nav-action li:nth-child(2) { 
	background-color: #eb9d96;
	color: #ffffff;
	line-height: 30px;

}
header #nav-action img {
	width: 15px;
	heigh: 11px;
	display: block;
	margin: 0 auto;
}

/* TOP～NEWS */
#nav-drawer {
	position: static;
	order: 2;
}

/* RECRUIT,CONTACT */
#nav-action {
	position: static;
	order: 3;
}

#nav-input {
	display: none;
}


main {
	width: 100%;
	margin: 80px auto 0;
	background-color: #ffffff;
	    position: static;
}
main .inner {
	width: 80%;
	margin: 0 auto;
	padding-top: 20px;
	padding-bottom: 30px;
}
main .grayback {
	width: 100%;
	background-color: #f5f3f2;
	padding-top: 20px;
	padding-bottom: 30px;
}
main .grayback2 {
	width: 100%;
	background-color: #f5f3f2;
	padding-top: 20px;
	padding-bottom: 0;
}
main .imgback {
	background-image: url("/images/TOP_06.png");
	background-repeat: no-repeat;
	background-position: top center;
	min-height: 660px;
}
main span {
	color: #d63224;
	font-weight: 600;
	display: block;
	font-size: 30px;
}

main h1.top {
	/*display: none;*/
	margin-block-start: 28px;
    margin-block-end: 0;
	margin-top: 110px;
	background-color: #ececec;
}
div.vid_contents {
width: 100%;/*背景色を横幅いっぱいに広げる*/
text-align: center;
margin: auto;
}
main h1.top:after {
}
video.vid_main {
width: 100%;
max-height: 1080px;/*PC版での最大高さ*/
}
main h2 {
	font-size: 40px;
	line-height: 150%;
	text-align: left;
}
main h2.recruit-ttl {
	margin-top: 80px;
	text-align: center;
}
main h2.c-title {
	text-align: center;
	line-height: 160px;
}

main h2.centering {
	text-align: center;
}
main h3 {
	font-size: 32px;
	text-align: center;
}
main .h3-design {
	font-size: 30px;
	font-weight: bold;
}
main h3.sub-title {
	margin-top: 1.5em;
	font-size: 18px;
	line-height: 180%;
	font-weight: bold;
	color: #d63224;
	text-align: left;
}
main h3.sub-title2 {
	margin-top: 1.5em;
	font-size: 20px;
	line-height: 180%;
	font-weight: bold;
	text-align: left;
	
}
main h3.sub-title3 {
	margin-top: 1.5em;
	font-size: 20px;
	line-height: 180%;
	font-weight: bold;
	text-align: center;
	
}

ul.disc-list {
	display: block;
	margin: 0;
}
ul.disc-list li {
	list-style-type: disc;
	margin-left: 1.5em;
}
dl.link {
	display: flex;
	justify-content: center;
}
dl.link dt {
	width: 315px;
	background-color: #d63224;
	height: 2.5em;
    line-height: 2.5em;
    text-align: center;
    color: #ffffff;
}
dl.link dd {
	width: 400px;
}
ul.arrow-list {
	display: block;
	margin: 0;
	padding-left: 0;
	list-style-type: none;
}
ul.arrow-list li {
	position: relative; /* For absolute positioning of ::before */
	padding-left: 1.8em; /* Space for the arrow + some gap */
	margin-bottom: 0.5em; /* Optional: Add some space between list items */
}
ul.arrow-list li:before {
	content: '';
	position: absolute; /* Position relative to the li */
	left: 0; /* Align to the left of the li */
	top: 0.5em; /* Adjust for vertical alignment with the text, can also use calc() or other units */
	display: inline-block;
	width: 1em; /* 画像の幅 */
	height: 1em; /* 画像の高さ */
	background-image: url(/images/link-arrow.svg);
	background-size: contain;
	background-repeat: no-repeat; /* 画像を繰り返さない */
}
ul.arrow-list li span.small {
	font-size: small;
	color: inherit;
	font-weight: normal;
	display: inline;
}

ul.arrow-list li a , ul.arrow-list li span.small a {
	display: inline;
}
ul.arrow-list li a:hover, ul.arrow-list li span a:hover {
	color: #d63224;
}
.vision-wrap {
	margin: 2em auto;
}
.vision-wrap img {
	width: 100%;
	height: auto;
}
.vision-inner {
	width: 70%;
	margin: 0 auto;
}
.vision-inner p {
	margin-bottom: 3em;
}
.vision-wrap h2.c-title {
	margin-top: 110px;
	height: 200px;
}
.vision-wrap #logo {
	scroll-margin-top: 110px;
}
main h4 {
	font-size: 32px;
	text-align: center;
}
main .linkbutton {
	background-color: #d63224;
	width: 330px;
	height: 80px;
	border-radius: 40px;
	border: 2px solid #ffffff; 
	color: #ffffff;
	margin: 0 auto;
	display: flex;
    justify-content: center; /*左右中央揃え*/
    align-items: center;
}
main a.linkbutton2 {
	display: block;
	background-color: #d63224;
	width: 330px;
	height: 80px;
	border: 2px solid #ffffff; 
	border-radius: 40px;
	color: #ffffff;
	margin: 0 auto 30px;
	padding-top: 7px;
}
main span.annotation {
	font-weight: 600;
	display: inline;

	font-size: 20px;
	color: #ffffff;
}

main .linkbutton3 {
	background-color: #d63224;
	width: 260px;
	height: 70px;
	border-radius: 40px;
	border: 2px solid #ffffff; 
	color: #ffffff;
	margin: 0 auto;
	display: flex;
    justify-content: center; /*左右中央揃え*/
    align-items: center;
}
main .linkbutton a,  main .linkbutton2 a, main .linkbutton3 a {
	color: #ffffff;
	display: block;
}
main .linkbutton a:visited,  main .linkbutton2 a:visited, main .linkbutton3 a:visited {
	color: #ffffff;
}

main .linkbutton:hover {
	background-color: #ffffff;
	border: 2px solid #d63224; 
	color: #d63224;
}
main a.linkbutton2:hover {
	border: 2px solid #d63224;
	color: #d63224;
	background-color: #ffffff;
}
main a.linkbutton2:hover span.annotation {
  color: #d63224; /* a.linkbutton2 のホバー時の文字色に合わせる */
}
main .linkbutton3:hover {
	background-color: #ffffff;
	border: 2px solid #d63224; 
	color: #d63224;
}
main .pt10 {
	padding-top: 10px;
}
main .mb20 {
	margin-bottom: 20px
}
main .mb30 {
	margin-bottom: 30px;
}
main .mb50 {
	margin-bottom: 50px;
}
main .mb70 {
	margin-bottom: 70px;
}

main .column {
	display: flex;
	justify-content: center;
	align-items: top;
	gap: 20px 30px;/*縦に20px,横に30pxの余白を指定*/
}
main .column-inner {
	flex: 1;
}
main .column-inner img {
	width: 100%;
	height: auto;
}
main .aboutus-block {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 40px;
	width: 780px;
    margin: 0 auto;
}
main .aboutus-block div {
	flex: 1;
}
main .aboutus-img {
	width:420px;
}
main ul.aboutus {
	width: 280px;
	margin: 80px auto;
	border-top: 1px solid #3e3a39;
}
main ul.aboutus li {
	border-bottom: 1px solid #3e3a39;
	height:110px;
	/*background-image: url("/images/TOP_arrow.png");*/
	background-repeat: no-repeat;
	/*text-indent: 1em;*/
	font-size: 28px;
	line-height: 110px;
	text-align: center;
}
main ul.aboutus li a {
	display: block;
}
main ul.aboutus li a:hover {
		color: #d63224;
}
	main ul.news {
    width: 100%;
    margin: 0 auto 3em;
		align-items: center;
		list-style: none;
	}
	main ul.news li.newslist {
		display: flex;
		align-items: flex-start;
		gap: 20px;
		border-bottom: 1px solid #3e3a39;
		margin-top: 1.5em;
	}
	main ul.news li.newslist div.news-eyecatch {
		width: 200px;
		padding: 0 0 0.5em 0;
		border-bottom: none;
	font-size: 18px;
	color: #d63224;
	line-height: 50px;
		text-align: center;
	}
	main ul.news li.newslist img {
		width: 100%;
		height: 100%;
		padding-right: 0;
		object-fit: contain;
	}
	main ul.news li.newslist div.news-text {
	width: 715px;
	font-size: 20px;
	line-height: 50px;
		padding: 1.5em 0;
		border-bottom: none;
	}
	main ul.news li.newslist .news-test > span.ymd {
		color: #3e3a39;
		font-weight: normal;
		font-size: 0.8em;
	}


main ul.news > * {
		box-sizing: border-box;
padding: 30px;
}

main ul.news a {
	color: #3e3a39;
}
main ul.news a:hover {
		color: #d63224;
}


	main dl.news dd span.ymd {
		color: #3e3a39;
		font-weight: normal;
		font-size: 18px;
	}

main .recruit {
	background-image: url("/images/pc_recruit_top.png?1");
	background-repeat: no-repeat;
	height: 810px;
	background-size: cover;
	background-color: #ffffff;
}
main .recruit-inner {
	width: 540px;
	height: 400px;
	background-color: #ffffff;
	text-align: center;
	padding: 50px 20px;
	margin: 200px auto;
}
main .recruit-inner h2 {
	font-size: 28px;
	text-align: center;
	line-height: 320%;
}
main .recruit-inner h2 span {
	font-size: 56px;
	line-height: 100%;
}
.sp-only {
	display: none;
}
.pc-only {
	display: inline-block;
}
.pc-only-block {
	display: block;
	text-align: center;
}

footer {
	width: 100%;
	padding-bottom: 30px;
}
footer .footer-inner {
	width: 80%;
	max-width: 1440px;
	margin: 0 auto;
	padding-top: 20px;
	padding-bottom: 30px;

}
footer nav ul {
	display: flex;
	margin: 50px 0;
	gap: 20px 30px;/*縦に20px,横に30pxの余白を指定*/
}
footer nav ul li a:hover {
	border-bottom: 1px solid #3e3a39;
}
footer nav ul li img {
	width:30px;
	height: 30px;
}
footer nav ul li:last-child a:hover {
	border-bottom: none;
}
footer dl {
	display: flex;
	align-items: center;
	gap: 20px 30px;/*縦に20px,横に30pxの余白を指定*/
}
footer dl img {
	width: 100px;
	height: auto;
}
footer dl .name {
	font-size: 25px;
	line-height: 140%;
}
footer dl .address {
	font-size: 14px;
}

#contents .content-header {
	width: 100%;
	margin: 110px auto 0;
	background-image: url("/images/contents-header.png");
	background-repeat: no-repeat;
	background-position: top;
	background-size: cover;
	min-height: 540px; 
}
#contents .content-header h1 {
	font-size: 26px;
	margin-left: 70px;
	line-height: 340px;
}
#contents .content-header h1 span {
	font-size: 60px;
	display: inline;
	padding-right: 0.5em;
}
#contents .content-header-recruit {
	width: 100%;
	margin: 110px auto 0;
	background-image: url("/images/contents-header-recruit.png");
	background-repeat: no-repeat;
	background-position: top;
	background-size: cover;
	height: 280px; 
}
#contents .content-header-recruit h1 {
	font-size: 26px;
	text-align: center;
}
#contents .content-header-recruit h1 span {
	font-size: 60px;
	display: block;
	padding-top: 110px;
	margin-bottom: 30px;
}
#contents .submenu {
	width: 100%;
	background-color: #f5f3f2;
	border-bottom: 2px solid #f5ceca;
	text-align: center;
}

#contents .submenu ul {
	padding-top:10px;
	height: 70px;
	width: 80%;
	margin: 0 auto;
	display: flex;
	gap: 0 5px;
}
#contents .submenu ul li {
	width: 250px;
	height: 60px;
	background-color: #f5ceca;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	color: #ffffff;
	font-size: 22px;
	font-weight: bold;
}
#contents .submenu ul li a ,
#contents .submenu ul li a:visited {
		color: #3e3a39;
	display: block;
	width: 250px;
	height: 60px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	line-height: 60px;
}
#contents .submenu ul li a.menu-on {
	background-color: #d63224;
	color: #ffffff;
}
/* 親コンテナの基本設定 */
#contents .submenu2 {
  width: 100%;
  background-color: #f5f3f2; /* グレーの背景 */
  border-bottom: 2px solid #f5ceca;
}

/* ulタグをflexコンテナに設定 */
#contents .submenu2 ul {
  display: flex;
  justify-content: center; /* 中央に配置 */
  list-style: none;
  margin: 0 auto;
  padding: 10px 0; /* 上下の余白 */
  width: 80%;
  max-width: 1200px; /* 最大幅を指定（お好みで調整） */
}

/* liタグを均等幅に設定 */
#contents .submenu2 li {
  flex: 1; /* すべてのボタンが均等な幅になる */
  margin: 0 5px; /* ボタン間の隙間 */
}

/* aタグ（ボタン本体）のスタイリング */
#contents .submenu2 li a {
width: 250px;
    height: 60px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
	
	display: block;
	height: 60px;
  line-height: 60px;
	
  /* ボタンの見た目 */
  background-color: #f5ceca;
  color: #3e3a39;
  font-size: 22px;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  border-radius: 5px;
  min-height: 60px; /* ボタンの最小の高さを確保 */
  padding: 5px;
  box-sizing: border-box;
  transition: background-color 0.2s;
}
#contents .submenu2 li a:has(span) {
  /* 2行用のFlexbox設定を適用 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  
  /* 2行用のline-heightに変更 */
  line-height: 1.3;
  
  /* 2行になっても高さが変わらないように */
  height: auto; /* 高さを自動に */
  min-height: 60px; /* 最小の高さは維持 */
  padding: 5px; /* 上下の余白も確保 */
}

/* 現在地を示すメニューのスタイル */
#contents .submenu2 li a.menu-on,
#contents .submenu2 li a:hover {
  background-color: #d63224;
  color: #ffffff;
}

/* ★ 2行目の小さいテキスト（span）のスタイル */
#contents .submenu2 li a span {
  display: block; /* ブロック要素にして改行を実現 */
  font-size: 0.6em;  /* 親（aタグ）に対して60%の文字サイズ */
  font-weight: normal; /* 太字を解除 */
  margin-top: 2px;   /* 上の行との間に少し余白をとる */
  line-height: 1.2;
	color: #3e3a39;
}
#contents .submenu3 {
	width: 100%;
	margin-top: 80px;
	text-align: center;
}

#contents .submenu3 ul {
	padding-top:10px;
	margin: 0 auto;
	display: flex;
	gap: 0 5px;
	justify-content:center;
	flex-wrap: wrap;
}
#contents .submenu3 ul li {
	width: 250px;
	height: 60px;
	background-color: #f5ceca;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	color: #ffffff;
	font-size: 22px;
	font-weight: bold;
	border-radius: 30px;
	margin-bottom:1em
}
#contents .submenu3 ul li a ,
#contents .submenu3 ul li a:visited {
		color: #3e3a39;
	display: block;
	width: 250px;
	height: 60px;
	border-radius: 30px;
	line-height: 60px;
}
#contents .submenu3 ul li a.menu-on {
	background-color: #d63224;
	color: #ffffff;
}



/* ページ内リンクでジャンプした際の、ヘッダー分の余白を確保する */
#Production_Design,
#Construction_Drawings,
#Modeling,
#Design_Drawings,
#Work_Experience,
#office,
#condominium,
#welfare,
#educational,
#public,
#other,
#overseas {
  scroll-margin-top: 110px; /* 固定ヘッダーの高さに合わせる */
}

 

main h2.post, main h3.category {
	text-align: center;
	line-height: 150px;
}
main .post-warp-archive {
	width: 70%;
    margin: 0 auto;
    padding-top: 20px;
    padding-bottom: 30px;
}
main .post-warp-single {
	width: 60%;
    margin: 0 auto;
    padding-top: 20px;
    padding-bottom: 30px;
}

header.entry-header {
	position: relative;
}
.nav-links {
	display: flex;
	justify-content:center;
	gap: 0.5em;
}
.page-numbers {
	font-size: 18px;
    border: 1px solid #3e3a39;
	border-radius: 3px;
	padding: 0.25em;
	width: 2.5em;
    text-align: center;
}
.current {
	background-color: #f5ceca;
	color: #3e3a39;
}

.next , .prev {
	display: none;
}
.page-numbers a:hover {
	color: #d63224;
}
.post-warp-archive a:hover , .single-post-warp a:hover {
	color: #d63224;
}
.post-warp-archive .ymd , .single-post-warp .ymd {
	color: #3e3a39;
	font-size: 16px;
}
.post-warp-archive .title , single-post-warp .title {
	color: #3e3a39;
	font-size: 21px;
}
.post-warp-single .title {
	padding-bottom: 0.5em;
}
.single-post-warp {
	width: 75%;
	margin: 0 auto 10em;
}
.single-post-warp p:last-child {
	margin-top: 1em;
}
.post-wrap {
	display: flex;
	padding: 1em;
    gap: 0 50px;
    border-bottom: 1px solid #3e3a39;
    margin-bottom: 2em;
}
.post-thumbnail {
	width: 25%;
}
.post-content {
	width: 75%;
}
.single-post-wrap .post-thumbnail {
	width: 50%;
	padding: 1em;
}
.single-post-warp .post-content {
	width: 100%;
}

.post-nav-links {
	display: flex;
	justify-content: center;
    align-items: center;
	flex-wrap: wrap;
	justify-content: space-around;
	gap: 2em;
}
.nav-list-link {
	border: 1px solid #3e3a39;
	border-radius: 5px;
padding: 0 0.5em;
}
.nav-post-link {
		font-size: 18px;
padding: 0 0.35em;
}
.nav-list-link a , .nav-post-link a {
	color: #3e3a39;
}
.nav-list-link a:hover , .nav-post-link a:hover {
	color: #d63224;
}
/* contact form7用 */
.entry-content {
	width: 75%;
	margin: 0 auto 10em;
	min-height: 15em;
}

	/*業務実績の説明用*/
#contents p.c-note {
	width: 950px;
	margin: 0 auto 30px;
}

	/*業務実績のarea map用*/
    #contents .image-map {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 3em;
    }

	#contents .image-map-container {
    position: relative;
    display: block;
	width: 1000px;  /* 中にある画像の幅に合わせる */
    margin: 0 auto; /* 左右の余白を自動にして中央揃え */
	}

    #contents .image-map-container img {
      display: block;
    }

    #contents .hover-image {
      position: absolute;
      top: 0;
      left: 0;
      display: none;
      pointer-events: none;
    }

#contents .content_menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 12px;
}

#contents ul.content_menu  {
	padding-left: 0;
	margin-left: 0;
}
#contents ul.content_menu li a {
  display: block; /* aタグのクリック範囲を広げる */
  padding: 8px 16px;
  background-color: #ffffff;
  border: 1px solid #d63224;
  border-radius: 20px; /* 角を丸くする */
  color: #d63224;
  text-decoration: none;
  white-space: nowrap; /* テキストが改行されないようにする */
}
#contents ul.content_menu li a:hover {
  background-color: #d63224;
  color: #ffffff;
}
#contents .business-title-image img {
  width: 1330px; /* 幅を指定 */
  height: 200px;  /* 高さを auto から上書き */

  /* 画像が引き伸ばされるのを防ぐ（任意） */
  object-fit: cover;
object-position: left center;
}

/* --- 業務実績リスト --- */
#contents .track-record-column {
  border: 1px solid #3e3a39;
  background-color: #f9f9f9;
}


#contents .track-record-column ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#contents .track-record-column li {
	overflow-wrap: break-word;
  border-bottom: 1px solid #3e3a39;
padding-left: 1em;
}
#contents .track-record-column li.list-header {
	background-color: #dbdcdc;
	text-align: center;
}
#contents .track-record-column li:last-child {
  border-bottom: none;
}



/* --- デフォルトのスタイル（PCファースト） --- */
#contents .two-column-layout {
  display: flex; /* 最初からFlexboxを有効にして横並びにする */
  gap: 20px;     /* 列の間に20pxの隙間を設ける */
	align-items: flex-start;
}

#contents .track-record-column {
  flex: 1; /* 2つの列が均等な幅になるようにする */
min-width: 0;
}

#contents .pc70 img {
	display: block;
	width: 70%;
	margin: 0 auto 50px;
}
#contents .half-width {
	width: 50%;
}

/* 採用情報用 */
#contents h4.recruit-ttl {
	color: #d63224;
	margin: 30px auto;
	position: relative;
}
#contents h4.recruit-ttl .new-graduate {
	position: absolute;
	right: 15%;
    top: -60px;
	width: 190px;
    height: 130px;
}
#contents .intern {
	margin-bottom: 100px;
}
#contents a.mynavi {
	display: block;
	margin: 0 auto;
	background-color: #dbdcdc;
	color: #3e3a39;
	text-align: center;
	width: 200px;
	height: 40px;
	line-height: 40px;
}
#contents p.r-note {
	width: 950px;
    margin: 30px auto 50px;
	text-align: center;
}
#contents table.recruitment-guidelines {
	border-top: 1px solid #3e3a39;
	border-left: 1px solid #3e3a39;
	border-collapse:collapse;
	width: 80%;
	max-width: 1000px;
    margin: 0 auto 80px;
}
#contents table.recruitment-guidelines th {
	background-color: #f5f3f2;
	width: 150px;
	border-right: 1px solid #3e3a39;
	border-bottom: 1px solid #3e3a39;
}
#contents table.recruitment-guidelines td {
	border-right: 1px solid #3e3a39;
	border-bottom: 1px solid #3e3a39;
	padding: 5px 10px;
}

#contents table.recruitment-guidelines td ul {
	margin: 0;
	list-style-type: none;
}
#contents table.recruitment-guidelines td ul li {
	position: relative;
	padding-left: 1.5em;
	margin-bottom: 0.5em;
}
#contents table.recruitment-guidelines td ul li::before {
  content: "・"; /* 表示したい中点 */
  position: absolute;
  left: 0;       /* liの左端に配置 */
  top: 0;        /* liの上端に配置 */
  color: #333;   /* マーカーの色 */
  font-size: 1em; /* マーカーのサイズ */
  line-height: inherit; /* 親要素（li）のline-heightを継承 */
}
#contents table.recruitment-guidelines td ul.holidays {
	display: flex;
	flex-wrap: wrap;
}
#contents table.recruitment-guidelines td ul.holidays .list-group {
  display: flex;
  flex-direction: column; /* 項目を縦並びにする */
  flex: 1; /* 利用可能なスペースを均等に分配し、横幅を調整 */
  min-width: 250px; /* 必要に応じて、各グループの最小幅を設定 */
}

#contents table.recruitment-guidelines td ul.holidays .list-group li {
  margin-bottom: 5px; /* 各項目間の縦方向の隙間 */
}
#contents .nintei {
	color: #3e3a39;
    font-weight: bold;
    background-color: #f5ceca;
    width: 500px;
    height: 45px;
    margin: 0 auto 30px;
    text-align: center;
    line-height: 45px;
}
#contents .nintei-text {
	width: 26em;
    margin: 20px auto 50px;
    text-align: center;
}
#contents .initiatives_container {
  display: flex; /* Flexコンテナにする */
  justify-content: space-around; /* アイテム間の水平方向の配置（例：均等な隙間） */
  align-items: flex-start; /* アイテムを上端に揃える */
  gap: 20px; /* アイテム間の隙間 */

  /* レイアウトを見やすくするためのスタイル */
  width: 90%; /* コンテナの幅 */
  max-width: 1200px;
  margin: 20px auto; /* 中央寄せ */
	position: relative;
}

#contents .initiatives_container .item {
  flex: 1; /* 利用可能なスペースを均等に3分割する */
  padding: 15px;
  /*border: 1px solid #ccc;*/
}

#contents .initiatives_container .item h4 {
  margin-top: 0;
  color: #d63224;
	border: 1px solid #d63224;
	border-radius: 5px;
	font-size: 18px;
	height: 3em;
    line-height: 3em;
    letter-spacing: 0;
}
#contents .initiatives_container .item p {
	text-align: center;
	margin-bottom: 20px;
}
#contents .initiatives_container .item p.l-text {
	text-align: left;
	margin-bottom: 20px;
}
#contents .initiatives_container .item img {
	margin-bottom: 20px;
}
#contents .initiatives_container .item ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
#contents .initiatives_container .item ul li {
	position: relative;
	padding-left: 1.5em;
	font-size: 16px;
}
#contents .initiatives_container .item ul li::before {
  content: "●";
  position: absolute;
  left: 0;
  color: #3e3a39;

}
#contents .initiatives_container .item .fanky_MC {
	background-color: #fef2ee;
	border-radius: 10px;
	padding: 10px;
	text-align: left;
	position: absolute;
	bottom: -350px;
}
#contents .initiatives_container .item .fanky_MC h5 {
	color: #d63224;
	display: flex;
	justify-content: left;
	align-items: center;
	font-size: 18px;
}
#contents .initiatives_container .item .fanky_MC h5 .mc-logo img {
	heith: auto;
	width: 125px;
	padding: 10px;
}
#contents .initiatives_container .item .fanky_MC h5 .name {
	line-height: 130%;
	font-size: 21px
}
#contents .initiatives_container .item .fanky_MC h5 span {
	color: #3e3a39;
	font-size: 18px;
}
#contents .initiatives_container .item .fanky_MC p {
	text-align: left;
	font-size: 16px;
	margin-top: 0;
	margin-bottom: 0;
}

         /* 社内行事用スライダー */
        #contents .company_event_visual {
			width: 1000px; /* ★スライダー全体の幅。これを調整して試す */
    max-width: 100%; /* 親要素からはみ出さないように */
    margin: 30px auto 30px;

        }


         #contents .company_event_visual div {
            text-align: center; /* スライド内のコンテンツを中央揃えに */
            padding: 0 10px;
			box-sizing: border-box;
        }
       #contents .company_event_visual img {
            width: 100%; /* 画像がコンテナに収まるように */
            height: 300px;
		   object-fit: cover; /* ★高さを固定した場合、画像をトリミングしてフィットさせる */
    display: block; /* imgの下の余白をなくす */
        }

#contents .event_calender {
	display: flex;
	align-items: flex-end;
	width: 700px;
	margin: 50px auto;
	box-sizing: border-box;
}
#contents .event_calender table th {
	font-weight: 400;
	text-align: left;
	width: 6em;
	white-space: nowrap;
}
#contents .event_calender table td {
	width: 20em;
}
#contents .event_calender .flex-item {
	padding: 20px;
	box-sizing: border-box;
}
#contents .other_event {
	background-color: #f5ceca;
	text-align: center;
	width: 400px;
	height: 165px;
	border-radius: 50%;
}
#contents .interview-block {
    display: flex; /* 子要素を横並びにする */
    align-items: flex-start; /* アイテムの先頭（上）に揃える */
    gap: 40px; /* 画像エリアとテキストエリアの間の隙間 */
    width: 90%; /* 全体の幅 */
    max-width: 1000px; /* 最大幅 */
    margin: 50px auto; /* 中央寄せと上下余白 */
    padding-bottom: 20px; /* 下部コンテンツとの区切り */
    box-sizing: border-box; /* paddingとborderをwidth/heightに含める */
}

/* 画像エリア */
#contents .interview-image-area {
    flex-shrink: 0; /* 縮小させない */
    width: 200px; /* 画像エリアの固定幅 */
    text-align: center; /* 画像とキャプションを中央揃え */
    padding-top: 10px; /* 上部の余白 */
}

#contents .interview-photo {
    width: 100%; /* 親要素 (interview-image-area) の幅に合わせる */
    height: auto; /* 比率を保つ */
    display: block; /* 画像の下に余計なスペースができないように */
    border-radius: 5px; /* 角を少し丸める (任意) */
}

#contents .interview-caption {
    font-size: 14px;
    line-height: 1.5;
    color: #555;
    margin-top: 10px; /* 画像とキャプションの間隔 */
    margin-bottom: 0; /* 段落のデフォルトマージンをリセット */
    /* キャプションがない場合も高さが固定されないように */
    min-height: 1em; /* 最低限の高さがあればOK */
}

/* テキストコンテンツエリア */
#contents .interview-content-area {
    flex-grow: 1; /* 残りのスペースを全て占めるように拡張 */
    padding-top: 10px; /* 画像エリアの上部と揃える */
}

#contents .interview-title {
    font-size: 24px;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #333; /* 見出しの下線 */
    line-height: 1.2;
	text-align: left;
}

#contents .interview-text {
    font-size: 18px;
    line-height: 1.8;
    color: #333;
    margin-top: 20px;
    margin-bottom: 0; /* 段落のデフォルトマージンをリセット */
}
/* キャプションがない場合のレイアウト変更 */
#contents .interview-block.no-caption {
    flex-direction: row-reverse; /* 画像を右、テキストを左にする */
}
/* キャプションがない場合の画像エリアの幅を250pxに */
#contents .interview-block.no-caption .interview-image-area {
    width: 250px; /* 画像エリアの幅を250pxに変更 */
}
#contents .interview-graph {
	margin: 0 auto;
	text-align: center;
}
/* FAQコンテナのスタイル */
#contents .faq-container {
    width: 90%;
    max-width: 800px;
    margin: 50px auto;
}

/* 各FAQアイテムのスタイル */
#contents .faq-item {
    margin-bottom: 20px;
}

/* 質問部分のスタイル */
#contents .faq-question {
    display: flex;
    align-items: center;
    background-color: #f5f3f2; /* 赤系の背景色 */
    padding: 15px 20px;
    border-radius: 5px;
    cursor: pointer; /* クリック可能であることを示す */
    position: relative; /* 閉じるボタンの位置指定用 */
    box-sizing: border-box;
    min-height: 50px; /* 最小の高さ */
}

#contents .faq-q-label {
    font-size: 24px;
    font-weight: bold;
    color: #d63224; /* 赤色 */
    margin-right: 15px;
    flex-shrink: 0; /* 縮まないように */
}

#contents .faq-question-text {
    flex-grow: 1; /* 残りのスペースを埋める */
    font-size: 18px;
    font-weight: bold;
    color: #333;
    line-height: 1.5; /* 行の高さ */
}

#contents .faq-toggle-icon {
    font-size: 24px; /* アイコンのサイズ */
    color: #d63224; /* 赤色 */
    font-weight: bold;
    margin-left: 20px;
    flex-shrink: 0; /* 縮まないように */
    /* position: absolute; /* 親要素の右端に配置するため */
    /* right: 20px; */
    /* top: 50%; */
    /* transform: translateY(-50%); */
    /* text-align: right; /* プラス記号を右寄せにする */
    transition: transform 0.3s ease; /* アニメーション */
    user-select: none; /* テキスト選択不可 */
}

/* 回答が開いているとき（activeクラスがあるとき）のアイコンのスタイル */
#contents .faq-question.active .faq-toggle-icon {
    transform: rotate(45deg); /* プラスを回転させて×にする */
    /* または、コンテンツを直接 '×' に変更 */
    /* content: '\00D7';  これはCSSでは限界があり、JSで変更するのが確実 */
}

/* 回答部分のスタイル */
#contents .faq-answer {
    display: none; /* 初期状態では非表示 */
    padding: 20px;
    background-color: #ffffff; /* 回答の背景色 */
    /*border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;*/
    border: 1px solid #eee; /* 枠線 */
    border-top: none; /* 質問部分と結合するように上線はなし */
    box-sizing: border-box;
}

#contents .faq-a-label {
    font-size: 24px;
    font-weight: bold;
    color: #d63224; /* 赤色 */
    margin-right: 15px;
    float: left; /* コンテンツの左側に配置 */
}

#contents .faq-answer-content {
    overflow: hidden; /* float要素の回り込み解除 */
}

#contents .faq-answer-content p {
    margin-top: 0;
    margin-bottom: 1em; /* 段落ごとの下余白 */
    font-size: 18px;
    line-height: 1.8;
    color: #333;
}
#contents .faq-answer-content p:last-child {
    margin-bottom: 0; /* 最後の段落の下余白をなくす */
}

#contents .faq-answer-content ul {
    list-style: none; /* リストのデフォルトのスタイルを削除 */
    padding-left: 0;
    margin: 0 0 1.5em 1em;
}

#contents .faq-answer-content ul li {
    font-size: 18px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 5px;
	position: relative;
	padding-left:1.5em;
}
#contents .faq-answer-content ul li:last-child {
    margin-bottom: 0;
}
#contents .faq-answer-content ul li::before {
    content: "◇"; /* リストマークとして「◇」を指定 */
    position: absolute; /* 親要素（li）に対する絶対位置指定 */
    left: 0; /* liの左端に配置 */
    top: 0; /* liの上端に配置 */
    line-height: inherit; /* liのline-heightを継承して縦位置を揃える */
}
#contents .faq-answer-content p.exsample {
	background-color: #fef2ee;
	margin: 0 0 1.5em 1em;
	padding: 1em;
}
#contents .faq-answer-content span {
	font-size: 18px;
	display: inline;
	color: #3e3a39;
}

/* アクティブな状態の質問部分のスタイル */
#contents .faq-question.active {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}


#contents #company_event {
	padding-top: 400px;
}


#contents #Application_Guidelines,
#contents #Initiatives,
#contents #company_event , 
#contents #Employee_Interviews ,
#contents #Asked_Questions {
	scroll-margin-top: 110px;
}
main .linkbutton4 {
    background-color: #d63224;
    width: 260px;
    height: 70px;
    border-radius: 10px;
    border: 2px solid #ffffff;
    color: #ffffff;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* about us 企業情報 */
#contents #greeting,
#contents #profile,
#contents #history , 
#contents #access {
	scroll-margin-top: 110px;
}

    /* ご挨拶ブロックのコンテナ */
    #contents .greeting-block {
        display: flex; /* 子要素を横並びにする */
        align-items: flex-start; /* 上端揃え */
        gap: 40px; /* テキストと画像の間の隙間 */
        width: 90%; /* 全体の幅 */
        max-width: 1000px; /* 最大幅 */
        margin: 50px auto; /* 中央寄せと上下余白 */
        box-sizing: border-box;
    }

    /* ご挨拶テキストエリア */
    #contents .greeting-text-area {
        flex-grow: 1; /* 残りのスペースを全て占める */
        width: 60%; /* ★テキスト部分の幅を調整（画像とのバランスで調整） */
        font-size: 16px;
        line-height: 1.8;
        color: #333;
        padding-top: 20px; /* 上部パディング（画像の上端と合わせるため） */
    }

    #contents .greeting-text-area p {
        margin-bottom: 1.5em; /* 各段落の下余白 */
    }
    #contents .greeting-text-area p:last-of-type { /* 最後の署名pタグのデフォルトマージンを調整 */
        margin-bottom: 0;
    }

    /* 署名部分のスタイル */
    #contents .greeting-signature {
        text-align: right; /* 署名を右寄せ */
        margin-top: 30px; /* 前の段落からの余白 */
        font-size: 16px; /* 署名のフォントサイズ */
        line-height: 1.5;
    }

    /* ご挨拶画像エリア */
    #contents .greeting-image-area {
        flex-shrink: 0; /* 縮小させない */
        width: 35%; /* ★画像部分の幅を調整（テキストとのバランスで調整） */
                   /* 例: テキストが60%, 画像が35% で合計95% + gap が適切 */
        padding-top: 20px; /* 上部パディング（テキストの上端と合わせるため） */
    }

    #contents .greeting-image-area img {
        width: 100%; /* 親要素の幅に合わせて画像を表示 */
        height: auto; /* 縦横比を維持 */
        display: block; /* 画像の下の余計なスペースをなくす */
        border-radius: 5px; /* 角を少し丸める (任意) */
        /* object-fit: cover; /* 必要であれば画像をトリミングしてフィットさせる */
        /* height: 300px; /* 画像の高さを固定する場合 */
    }

/* 会社概要 */
#contents table.profile {
    width: 900px; /* PCでのテーブル全体の幅 */
    max-width: 100%; /* 親要素からはみ出さないように */
    margin: 50px auto; /* 中央寄せと上下余白 */
    border-collapse: collapse; /* セルの境界線を結合 */
    color: #3e3a39;
}
#contents table.profile th {
	background-color: #dbdcdc;
	border-bottom: 1px solid #3e3a39;
	text-align: left;
    padding: 12px 20px; /* セル内の上下左右の余白 */
    font-weight: bold; /* テキストを太字に */
    width: 180px; /* ★thの固定幅を設定 (画像の見た目に合わせて調整) */
    white-space: nowrap; /* テキストが長くなっても改行させない */
}
#contents table.profile td {
	background-color: #ffffff;
	border-bottom: 1px solid #3e3a39;
    padding: 12px 20px; /* セル内の上下左右の余白 */
    text-align: left; /* テキストを左寄せ */
}
#contents h3.graph {
	background-color: #dbdcdc;
	width: 230px;
	height: 60px;
	font-size: 18px;
	line-height: 60px;
}
/* 提携先セクションの全体コンテナ */
#contents .partners-section {
    display: flex;
    justify-content: space-between;
    width: 90%;
    max-width: 1000px;
    margin: 50px auto;
    padding: 20px 0;
    box-sizing: border-box;
}

/* 各列のコンテナ */
#contents .partners-column {
    flex: 1;
    min-width: 250px;
    padding: 0 10px;
    box-sizing: border-box;
	display: flex; /* これを追加 */
    flex-direction: column; /* これを追加 */

}

/* 各列の見出し (h4) */
#contents .partners-column h4 {
    font-size: 18px;
    font-weight: bold;
    color: #3e3a39;
    margin-top: 0;
    margin-bottom: 15px;
    text-align: left;
    position: relative; /* 擬似要素の位置指定のため */
    padding-left: 1.2em; /* 菱形マーク分のスペースを確保 */
	flex-shrink: 0; /* h4が縮まないように */
}

/* h4::before で菱形マークを挿入 */
#contents .partners-column h4::before {
    content: "◆"; /* 菱形マーク */
    color: #3e3a39; /* マークの色 */
    font-size: 0.8em; /* マークのサイズ調整 */
    position: absolute;
    left: 0; /* h4の左端に配置 */
    top: 0.2em; /* テキストのベースラインに合わせて縦位置を微調整 */
    line-height: inherit; /* 親のline-heightを継承 */
}

/* リスト (ul) */
#contents .partners-column ul {
    list-style: none; /* デフォルトのリストマークを非表示 */
    padding-left: 0; /* 左側のパディングをリセット */
    margin-top: 0;
    margin-bottom: 20px;
    flex-grow: 1; /* ★ulが残りのスペースを埋めて高さを合わせる */
    display: flex; /* ★ul内のliをさらにFlexboxで制御する場合に必要 */
    flex-direction: column; /* ★ul内のliを縦に並べる */
    justify-content: flex-start; /* ★デフォルトで上揃え */
}
#contents .partners-column ul:last-child {
    margin-bottom: 0;
}

/* リストアイテム (li) */
#contents .partners-column ul li {
    padding-left: 0; /* ★パディングを0にする */
    margin-bottom: 8px;
    font-size: 16px;
    line-height: 1.5;
    color: #3e3a39;
}
.partners-column:nth-child(3) {
    margin-top: 41px;
}
/* タイムラインコンテナ */
#contents .timeline-container {
    width: 80%; /* 全体の幅 */
    max-width: 700px; /* 最大幅 */
    margin: 50px auto; /* 中央寄せ */
    position: relative; /* 線と点の基準位置とする */
    padding-left: 0; /* 親コンテナの左パディングは0にする */
    box-sizing: border-box;
}

/* タイムラインの縦線 */
#contents .timeline-container::before {
    content: '';
    position: absolute;
    left: 95px; /* ★縦線の基準位置。timeline-yearのwidthと合わせる */
    top: 0;
    bottom: 0;
    width: 2px; /* 線の太さ */
    background-color: #3e3a39; /* 線の色 */
}

/* 各タイムラインアイテム */
#contents .timeline-item {
    display: flex; /* 年と内容を横並びにする */
    align-items: flex-start; /* 年と内容の先頭を揃える */
    margin-bottom: 30px; /* 各項目の下余白 */
    position: relative; /* 点の基準位置とする */
    margin-left: 100px; /* ★年(80px)と点からの余白(20px)の合計 */
}

/* 年の部分 */
#contents .timeline-year {
    flex-shrink: 0; /* 縮まないようにする */
    width: 80px; /* 年の固定幅 */
    font-size: 18px;
    font-weight: bold;
    color: #333;
    text-align: right; /* 年を右寄せ */
    line-height: 1.5; /* 行の高さ */
    position: absolute; /* ★点を基準線に置くために絶対位置に */
    left: -100px; /* timeline-itemのmargin-leftを相殺 */
    top: 0; /* 上からの位置調整 */

}

/* 丸い点 */
#contents .timeline-item::before {
    content: '';
    position: absolute;
    left: -10px;  /* timeline-container::before の left と合わせる */
    top: 8px; /* 年のテキストと点の縦方向の微調整 */
    width: 12px; /* 点の直径 */
    height: 12px; /* 点の直径 */
    background-color: #3e3a39; /* 点の色 */
    border-radius: 50%; /* 丸くする */
    z-index: 1; /* 線の上に表示されるように */
}

/* 内容の部分 */
#contents .timeline-content {
    flex-grow: 1; /* 残りのスペースを全て占める */
    font-size: 16px;
    color: #3e3a39;
    line-height: 1.8; /* 行の高さ */
    padding-left: 20px; /* 点からの内容の左余白 */
    /* pタグのデフォルトマージンを考慮して、もし隙間ができたら調整 */
}

#contents .timeline-content p {
    margin: 0; /* 内容内のpタグのデフォルトマージンをリセット */
}
#contents .timeline-content br {
    display: block; /* brで改行 */
    margin-bottom: 0.5em; /* 改行の行間調整 */
}

/* 最後の項目だけ下線をなくすなど、必要に応じて */
#contents .timeline-item:last-child {
    margin-bottom: 0;
}
#contents .timeline-item:last-child::before {
    /* 最後の点には特別なスタイル（例：別の色や形） */
}
#contents .timeline-container::after {
    /* 最後の項目に下向きの矢印などを追加する場合 */
    /* content: '▼';
    position: absolute;
    left: 77px;
    bottom: -20px;
    color: #333;
    font-size: 16px; */
}
/* アクセス情報セクションの全体コンテナ */
#contents .access-info-section {
    display: flex; /* 子要素を横並びにする */
    align-items: flex-start; /* 上端揃え */
    gap: 40px; /* 地図とテキストコンテンツの間の隙間 */
    width: 90%; /* 全体の幅 */
    max-width: 1200px; /* 最大幅を調整 */
    margin: 50px auto; /* 中央寄せと上下余白 */
    box-sizing: border-box;
}

/* 地図エリア */
#contents .access-map-area {
    flex-shrink: 0; /* 縮小させない */
    width: 480px; /* 地図の固定幅 */
    background-color: #e0e0e0; /* 地図が読み込まれるまでの背景色（グーグルマップが入りますの背景） */
    display: flex; /* 子要素（iframe）を中央揃えにするためにFlexboxを使用 */
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
    color: #3e3a39;
}

#contents .access-map-area iframe {
}


/* アクセス詳細情報エリア */
#contents .access-details-area {
    flex-grow: 1; /* 残りのスペースを全て占める */
    width: calc(100% - 480px - 40px); /* 全体幅 - 地図幅 - gap */
    padding-top: 0; /* 必要に応じて調整 */
}

/* 各セクションの見出し (h3.access-heading) */
#contents .access-details-area .access-heading {
    font-size: 18px;
    font-weight: bold;
    color: #3e3a39;
    margin-top: 30px; /* 前の要素からの上余白 */
    margin-bottom: 15px; /* 段落との間隔 */
    text-align: left;
    position: relative; /* 菱形マークの位置指定のため */
    padding-left: 1.2em; /* 菱形マーク分のスペースを確保 */
}
#contents .access-details-area .access-heading:first-child {
    margin-top: 0; /* 最初の見出しは上余白なし */
}


/* h3::before で菱形マークを挿入 */
#contents .access-details-area .access-heading::before {
    content: "◆"; /* 菱形マーク */
    color: #3e3a39; /* マークの色 */
    font-size: 0.8em; /* マークのサイズ調整 */
    position: absolute;
    left: 0; /* h3の左端に配置 */
    top: 0.2em; /* テキストのベースラインに合わせて縦位置を微調整 */
    line-height: inherit;
}

/* 段落 (p) */
#contents .access-details-area p {
    font-size: 16px;
    line-height: 1.8;
    color: #3e3a39;
    margin-top: 0;
    margin-bottom: 20px; /* 次の見出しやテーブルとの間隔 */
}
#contents .access-details-area p:last-of-type {
    margin-bottom: 0; /* 最後の段落の下マージンは不要 */
}

/* 所在地詳細テーブルのスタイル（企業情報テーブルのスタイルから流用し、調整） */
#contents .access-details-area .access-table {
    width: 100%; /* 親要素の幅に合わせて */
    border-collapse: collapse;
    font-size: 16px;
    line-height: 1.6;
    color: #3e3a39;
    margin-top: 20px; /* 上からの余白 */
    margin-bottom: 30px; /* 下からの余白 */
}

#contents .access-details-area table.access-table th {
    text-align: left;
    font-weight: normal;
    max-width: 120px;
    white-space: nowrap;
}

#contents .access-details-area table.access-table td {
    padding: .25em 0 .25em 1em;
    text-align: left;
}


/* --- コンタクトフォーム用 ---*/
.page-template-sanuma-contact body {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.entry-content label {
display: block;
margin-bottom: 2em;
}
.entry-content .form-item , .entry-content .form-item-radio  {
display: flex;
gap:1em;
align-items: center;
}
.entry-content .wpcf7-list-item-label {
color: #3e3a39;
font-size: 18px;
font-weight: 400;
}
.entry-content .form-item-radio {
display: flex;
margin-bottom: 2em;
height: 2em;
}
.entry-content .wpcf7-radio label {
display: flex;
align-items: center;
gap: 0.5em;
margin-bottom: 0;
}
.entry-content .wpcf7-radio label 
/* 性別のラジオボタン群 (span.wpcf7-form-control.wpcf7-radio) の設定 */
.entry-content .wpcf7-form-control-wrap[data-name="gender"] > .wpcf7-form-control.wpcf7-radio {
  display: flex; /* Flexboxコンテナにする */
  gap: 1em;      /* 各選択肢の間に1emの隙間を設ける (値は調整してください) */
  margin-left: 0;  /* 前回の左余白削除は維持 */
  padding-left: 0; /* 前回の左余白削除は維持 */
}

/* 各ラジオボタンの選択肢 (span.wpcf7-list-item) のマージンをリセット */
.entry-content .wpcf7-form-control-wrap[data-name="gender"] .wpcf7-list-item {
  margin-left: 0;
  margin-right: 0; 
  padding-left: 0;
}

/* ラジオボタン入力要素 (<input type="radio">) 自体の左マージン (必要なら維持または調整) */
.entry-content .wpcf7-form-control-wrap[data-name="gender"] input[type="radio"] {
  margin-left: 1em;
  margin-right: 0;
}

.entry-content .wpcf7-form .wpcf7-radio .wpcf7-list-item.first .wpcf7-list-item-label ,
.entry-content .wpcf7-form .wpcf7-radio .wpcf7-list-item.last .wpcf7-list-item-label {
  font-weight: normal;
}
.entry-content .wpcf7-form .wpcf7-radio .wpcf7-list-item.last .wpcf7-list-item-label {
margn-left: 1em;
}

.entry-content .item-title , entry-content .form-item-radio .item-title {
width:10em;
height: 2em;
background-color: #f5ceca;
border-radius: 1em;
text-align: center;
}
.entry-content .optional {
border: 1px solid #d63224;
background-color: #ffffff;
color: #d63224;
padding: 0 0.5em;
max-width: 4em;
height: 2em;
}
.entry-content .required {
border: 1px solid #d63224;
background-color: #d63224;
color: #ffffff;
padding: 0 0.5em;
max-width: 4em;
height: 2em;
}
.entry-content .form-item-message .item-title{
margin: 2em auto;
width: 13em;
}
.entry-content .form-item-message .required {
margin: 1em auto;
}
.entry-content input[type="submit"] {
display: block;
width: 8em;
margin: 6em auto;
background-color: #d63224;
color: #ffffff;
border-radius: 1em;
text-align: center;
font-size: 1.25em;
border: none;
}
.entry-content span.wpcf7-not-valid-tip {
	font-size: 0.5em;
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
	border: none;
	color: #d63224;
}
.entry-content .wpcf7-form input[type="submit"]:hover {
  background-color: #f5ceca; /* マウスオーバー時の色 */
}
.entry-content .goTop {
	background-color: #d63224;
        color: white;
        padding: 12px 30px;
        border: none;
        border-radius: 30px;
        font-size: 18px;
        cursor: pointer;
        transition: background-color 0.3s;
        margin: 4em auto;
}
button:active, button:focus, input[type="button"]:active, input[type="button"]:focus, input[type="reset"]:active, input[type="reset"]:focus, input[type="submit"]:active, input[type="submit"]:focus {
    border-color: #fff #fff #fff;
}
/*画面サイズが768px以下だったら*/
@media (max-width:768px),(orientation: portrait) {
	body {
		font-size: 1.1em;
	}
	header {
		height: 50px; /* スマホ時のヘッダー全体の高さ */
	}
	.header-inner {
		width: 100%; /* スマホでは幅いっぱい */
		height: 100%; /* 親の header の高さ(50px) に合わせる */
	}

	header .header-logo-menu {
		width: 100%;
		display: flex;
	}
	header .logo-area {
		width: 70%;
		display: block;
		height: 50px
	}
	header .logo-area-inner {
		font-size: 0.6em;
		height: 50px;
	}
	header .header-inner .logo-area-inner img {
		width: 25px;
		height: 50px;
		padding: 0 5px 0 10px;
	}
	header .header-logo-menu #nav-drawer {
		width: 10%;
        text-align: center;
	}
	header .header-logo-menu #nav-action {
		width:20%;
	}
	header #nav-action ul {
		width: 100%;
		height: 50px;
	}
	header #nav-action li {
		width: 50%;
		height: 50px;
	}
	header #nav-action li a {
		width: 100%;
		height: 50px;
	}
	header #nav-action img {
		width: 22px;
	}
header #nav-content ul {
	display: block;
	font-size: 1.2em;
	width: 95%;
	height: auto;
	margin: 0 auto;
}
header #nav-content li {
	width: 95%;
	display: block;
	margin: 0 auto;
	line-height: 2;
}
header #nav-content li a {
	display: block;
	width: 100%;
	line-height: 2;
	text-align: left;
	border-bottom: 1px solid #A0A0A0;
}

.header-logo-menu {
 display: flex;
 display: -moz-flex;
 display: -o-flex;
 display: -webkit-flex;
 display: -ms-flex;
 flex-direction: row;
 -moz-flex-direction: row;
 -o-flex-direction: row;
 -webkit-flex-direction: row;
 -ms-flex-direction: row;
}

#nav-drawer {
	position: relative;
	order: 3;
	display: none;
    width: auto;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 35px;
  height: 50px;
  vertical-align: middle;
}

/*ハンバーガーの形をsvgで表現*/
	#nav-open span {
		width:100%;
		height: 100%;
		margin: 0 auto;
	}
	#nav-open span img {
		display: block;
		
	}
/*ハンバーガーの形をCSSで表現*/	
/*#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #555;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}*/

/*閉じる用の薄黒箇所*/
#nav-close {
  display: none;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*メニューの中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 90%;
  max-width: 330px;/*最大幅（お好みで調整を）*/
  height: 100%;
  background: #fff;
  transition: .3s ease-in-out;
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);
}

/*チェックがついたら表示させる*/
#nav-input:checked ~ #nav-close {
  display: block;
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
#nav-action {
	order: 2;
}
	
	main {
		width: 100%;
		margin: 0 auto 0;
	}
	.pc-only , .pc-only-block {
		display: none;
	}
	.sp-only {
		display: block;
	}
	main .imgback {
		background-image: none;
		min-height: auto;
	}
	main .column {
		display: block;
	}
	main h2 {
    font-size: 1.3em;
	}
	main h3 {
    font-size: 1.3em;
	}
	main h4 {
    font-size: 1.2em;
		line-height: 1em;
	}
	main span {
		font-size: 0.8em;
	}
	main .linkbutton {
    background-color: #d63224;
    width: 60%;
    height: auto;
	line-height: 2.5em;
	}
	main h1.top {
		margin-top: 50px;
	}
video.vid_main {
width: 100%;
}

main a.linkbutton2 {
	width: 12em;
	height: auto;
	padding-top: 4px;
	padding-bottom: 3px;
	font-size: 1.2em;
}
main .linkbutton3 {
	width: 10em;
	height: auto;
	font-size: 1.2em;
	line-height: 2.5em;
	}
main span.annotation {
	font-weight: 600;
	display: inline;

	font-size: 0.6em;
	color: #ffffff;
}
	main .sp-grayback {
		    background-color: #ffffff;
	}
	main .sp-grayback .inner {
		width: 100%;
	}
	main .sp-grayback .inner .mb30 {
		
	}
	main .sp-block {
		background-color: #f5f3f2;
		width: 100%;
		height: auto;
		margin-top: 2em;
		margin-bottom: 4em;
	}
	main .sp-block .pt10 {
		padding-top: 2em;
	}
	main .spmb30 {
		width: 80%;
		margin: 0 auto;
		padding-bottom: 2em;
	}
	main .vision {
		display: flex;
		flex-direction: column-reverse;
	}
	main .vision .column-text {
		width: 100%;
	}
	main .visiton .column-img {
		width: 100%;
	}
	main .aboutus-block {
		display: block;
		width:100%;
	}
	main ul.aboutus {
		width: 60%;
		margin: 30px auto;
	}
	main ul.aboutus li {
		height: auto;
		background-position: right center;
		font-size: 1.2em;
		line-height: 3em;
	}
	main .aboutus-img {
		width: 60%;
		margin: 30px auto;		
	}
	main ul.news {
    width: 100%;
    margin: 0 auto 3em;
		align-items: center;
		list-style: none;
	}
	main ul.news li.newslist {
		display: flex;
		align-items: flex-start;
		gap: 20px;
	}
	main ul.news li.newslist div.news-eyecatch {
		width: 20%;
		padding: 0 0 0.5em 0;
		border-bottom: none;
	}
	main ul.news li.newslist img {
		width: 100%;
		padding-right: 0;
		object-fit: contain;
	}
	main ul.news li.newslist div.news-text {
		width: 70%;
		font-size: 1em;
		line-height: 130%;
		padding: 0.25em 0 0.5em 0;
		border-bottom: none;
	}
	main ul.news li.newslist .news-test > span.ymd {
		color: #3e3a39;
		font-weight: normal;
		font-size: 0.8em;
	}
	main ul.news > * {
		padding: 20px;
	}
	
	main .recruit-inner {
		width: 70%;
		height: auto;
		margin: 190px auto 0;
		background-color:transparent;
	}
	main .recruit {
	background-image: url("/images/sp_recruit_top.png?1");
	background-position: center;
	background-repeat: no-repeat;
	height: 800px;
	background-size: cover;
		background-color: #ffffff;
	}
	main .recruit-inner h2 {
	font-size: 1.3em;
	}
	main .recruit .linkbutton {
    background-color: #d63224;
    width: 80%;
    height: auto;
		line-height: 3.5em;
}
	main .post-warp-single {
		width: 100%;
	}
	main h2.post {
		padding-top: 20px;
		height: auto;
		line-height: 200%;
	}
	
	main h3.category {
		height: auto;
		line-height: 200%;
	}
	main .post-warp-archive {
		width: 95%;
        margin: 0 auto;
		padding-top: 0;
	}
	.post, .page {
		margin: 0 0 0 0;
	}
	.post-wrap {
		display: block;
		width: 95%;
        margin: 0 auto 2em;
	}
	.page-numbers {
		font-size: 0.8em;
	}
	.post-thumbnail {
		width: 100%;
	}
	.post-content {
		width: 100%;
	}
	
	.single-post-warp {
		width: 95%;
		margin: 0 auto;
	}
	.single-post-wrap .post-thumbnail {
		width: 100%;
	}
	.single-post-warp .post-content {
		width: 90%;
        margin: 0 auto 3em;
	}
	.post-nav-links {
		flex-wrap: nowrap;
		gap: 0.25em;
	}
	.nav-post-link , .nav-list-link {
		font-size: 0.75em;
	}
	
	#contents .content-header {
		background-image: none;
		width:100%;
		min-height: 3em;
		line-height: 3em;
		margin-top: 50px;
	}
	#contents .content-header h1 span {
		font-size: 1em;
	}


 
#contents .content-header h1 {
    font-size: 1em;
    margin-left: 1em;
    line-height: 160%;
}
	#contents .content-header h1 span {
		font-size: 1.3em;
	}
	#contents .submenu ul {
		width: 100%;
		height: auto;
		padding-left: 0.3em;
	}
#contents .submenu ul li , #contents .submenu3 ul li {
	width: auto;
	font-size: 0.8em;
	height: 3em;
	}
	#contents .submenu ul li a, #contents .submenu ul li a:visited ,
	#contents .submenu3 ul li a, #contents .submenu3 ul li a:visited {
		width: 100%;
		height: 3em;
		line-height: 3em;
		padding: 0 1em;
	}
	footer nav ul {
        display: block;
        margin: 1em 0 3em;
		font-size: 0.8em;
	}
	footer nav ul img {
		margin-top: 0.8em;

	}
	footer dl {
		gap: 0 10px;
		align-items: flex-start;
	}
	footer dl img {
        width: 1.5em;
        height: auto;
    }
	footer dl dd {
		margin: 0;
	}
	footer dl .name {
		font-size: 1em;
	}
	footer dl .address {
		font-size: 0.4em;
		line-height: 120%;
	}
	footer dl .address .sp-only {
		display: none;
	}

	.vision-wrap {
    	width: 100%;
	}
	.vision-wrap img.p2em {
		padding-bottom: 2em;
	}
	.vision-wrap h2.c-title {
        margin-top: 0;
        height: auto;
		line-height: normal;
	}

	.vision-wrap #logo {
		scroll-margin-top: 50px;
	}
	.vision-inner {
    	width: 98%;
	}
	dl.link {
    	display: block;
	}
	dl.link dt {
		margin:auto auto 1em;
		width: 98%;
	}
	dl.link dd {
    	width: 90%;
		margin: auto auto;
	}
	/* contact form7用 */
    .entry-content {
        width: 98%;
        margin: 0 auto 10em;
        min-height: 5em;
    }

	#contents .business-title-image img {
    width: 100%;
    height: auto;
    object-fit: unset;
  }
  #contents .two-column-layout {
    display: block; /* PC用のflex指定を解除し、通常のブロック要素（縦並び）に戻す */
  }

#contents .track-record-column li {
	padding-left: 0.5em;	
	padding-right: 0.5em;	
}
  /* 1. 上の列の下の余白と枠線を消して、ブロックを結合 */
    #contents .track-record-column:first-child {
        margin-bottom: 0;
        border-bottom: none;
    }


    /* 2番目以降の列にあるヘッダー（物件名）を非表示にする */
    #contents .track-record-column:not(:first-child) .list-header {
        display: none;
    }
    #contents p.c-note {
        width: 90%;
    }
	
	  /* ulをFlexboxコンテナに設定 */
  #contents .submenu ul,
  #contents .submenu2 ul,
  #contents .submenu3 ul {
    display: flex;
    flex-wrap: wrap;         /* ★重要：折り返しを許可 */
    justify-content: center; /* ボタン全体を中央揃え */
	gap: 8px;              /* ボタン間の隙間を一律に設定 */
    padding: 15px 10px;    /* メニュー全体の余白 */
    
    /* 既存のulスタイルをリセット/調整 */
    width: 100%;
    height: auto;
    padding: 15px 10px;      /* メニュー全体の上下左右の余白 */
    box-sizing: border-box;
  }

  /* liの幅は中身に合わせて自動調整させる */
  #contents .submenu ul li,
  #contents .submenu2 ul li ,
#contents .submenu3 ul li {
	  
	    flex-grow: 1;          /* ★重要：空いたスペースを埋めるように均等に広がる */


    width: auto;      /* 幅の固定を解除 */
    height: auto;     /* 高さの固定を解除 */
    margin: 0;        /* liの余白をリセット */
  }

  /* aタグ（ボタン本体）のスタイル */
  #contents .submenu ul li a,
  #contents .submenu2 ul li a ,
	#contents .submenu3 ul li a {
	display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    /* サイズと見た目の設定 */
        width: 100%;  /* liの幅いっぱいに広がる */
        height: 100%; /* liの高さに追従する */
        min-height: 60px; /* ボタンの最小の高さを確保 */
        padding: 5px 8px;
        box-sizing: border-box;
        line-height: 1.3;
        white-space: normal; /* ★重要：ボタン内でテキストの改行を許可 */
        text-align: center;
        text-decoration: none;
        font-weight: bold;
        color: #3e3a39;
        background-color: #f5ceca;
        border-radius: 5px;
        transition: background-color 0.2s, color 0.2s;
  }

  /* 2行表示用のspanのスタイル（変更なし） */
  #contents .submenu2 li a span {
    display: block;
    font-size: 0.6em;
    font-weight: normal;
    margin-top: 2px;
    line-height: 1.2;
  }
	#contents .submenu3 {
		margin-top: 0;
	}
	main h2.recruit-ttl {
		margin-top: 10px;
	}
	#contents table.recruitment-guidelines {
		width: 100%;
	}
	#contents p.r-note {
		width: 95%;
	}
	#contents .nintei {
		width:80%;
		height: auto;
        line-height: 1.3em;
        padding: 0.5em;
	}
	#contents .nintei-text {
		width: 95%;
	}
	#contents .initiatives_container {
		display: block;
	}
	#contents .event_calender {
		display: block;
		width: 100%;
	}
	#contents .event_calender table th,
	#contents .event_calender table td {
		width: auto;
	}
	#contents .other_event {
		width: 80%;
		margin: auto;
	}
	#contents .content-header-recruit {
		background-image: none;
        width: 100%;
        min-height: 3em;
        line-height: 3em;
        margin-top: 50px;
		height: auto;
	}
	#contents .content-header-recruit h1 {
        font-size: 1em;
        margin-left: 1em;
        line-height: 160%;
		text-align: left;
		padding-top: 0.67em;
	}
	#contents .content-header-recruit h1 span {
        font-size: 1.3em;
		display: inline;
		padding-right: 0.5em;
    }
	
#contents .pc70 img {
	display: block;
	width: 100%;
	margin: 0 auto 50px;
}
#contents .half-width {
width:100%;
	}
	
/* フォーム全体の基本的な設定 */
	.entry-content .wpcf7 {
		width: 95%;
	}
.entry-content .wpcf7-form {
  max-width: 800px; /* フォームの最大幅を制限 */
  margin: 0 auto;   /* 中央寄せ */
  padding: 20px;
}

/* 任意マークのスタイル */
.entry-content .wpcf7-form .optional {
  background: #fff;
  color: #d63224;
  font-size: 12px;
  padding: 2px 8px;
  margin-left: 8px;
  font-weight: none;
  height: auto;
  margin: 1em;
}
/* 必須マークのスタイル */
.entry-content .wpcf7-form .required {
  background: #d63224;
  color: #fff;
  font-size: 12px;
  padding: 2px 8px;
  margin-left: 8px;
  font-weight: bold;
  height: auto;
  margin: 1em;
}

/* 各入力欄の共通スタイル */
.entry-content .wpcf7-form input[type="text"],
.entry-content .wpcf7-form input[type="email"],
.entry-content .wpcf7-form input[type="tel"],
.entry-content .wpcf7-form textarea {
  width: 100%; /* 幅を100%に */
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box; /* paddingを含めて幅100%にする */
}

/* 項目グループの余白 */
.entry-content .wpcf7-form .cf7-field-group {
  margin-bottom: 24px;
}

/* ラベルのスタイル */
.entry-content .wpcf7-form .cf7-field-group label {
  display: block; /* ラベルをブロック要素に */
  font-weight: bold;
  margin-bottom: 8px; /* ラベルと入力欄の間に余白 */
}

/* 送信ボタンのスタイル */
.entry-content .wpcf7-form .cf7-submit-button {
  text-align: center; /* ボタンを中央寄せ */
  margin-top: 30px;
}

.entry-content .wpcf7-form input[type="submit"] {
  background-color: #d63224; /* ボタンの背景色 */
  color: white; /* ボタンの文字色 */
  padding: 12px 30px;
  border: none;
  border-radius: 30px;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s;
		margin: 4em auto
}



	.entry-content .form-item , .entry-content .form-item-radio {
		display: block;
		height: 7em;
	}
	.entry-content span.wpcf7-not-valid-tip {
	font-size: 1em;
}

/* 社員インタビュー用 */
    #contents .interview-block {
        flex-direction: column; /* 要素を縦並びにする */
        align-items: center; /* 中央揃え */
        gap: 20px; /* 縦並びになった時の隙間 */
    }

    #contents .interview-image-area {
        width: 100%; /* スマホでの画像幅を調整 */
        padding-top: 0;
		margin-bottom: 1em;
    }

    #contents .interview-content-area {
        width: 90%; /* スマホでのテキストエリアの幅 */
        text-align: center; /* 見出しやテキストを中央寄せにする場合 */
        padding-top: 0;
    }
	#contents .interview-block.no-caption {
        flex-direction: column; /* 要素を縦並びにする */
flex-direction: row;		
	}
	#contents .interview-block {
		display: block;
	}
	#contents .interview-block.no-caption .interview-image-area {
		margin-bottom: 1em;
		width: 100%;
	}
	
    #contents .interview-title {
        font-size: 20px;
        text-align: center; /* 中央寄せ */
        border-bottom: none; /* 下線を非表示にする場合 */
    }
    #contents .interview-title::after { /* 下線を再現する場合 */
        content: '';
        display: block;
        width: 80px; /* 任意の幅 */
        height: 1px;
        background-color: #333;
        margin: 10px auto 0; /* 中央寄せ */
    }


    #contents .interview-text {
        font-size: 14px;
        text-align: left; /* テキストは左寄せが読みやすいことが多い */
    }
	#contents .initiatives_container .item .fanky_MC {
		position: static;
		margin: 20px auto 30px;
	}
	
	#contents h4.recruit-ttl .new-graduate {
		position: static;
		margin: 20px auto;
	}
	#contents #company_event {
		padding-top: 0px;
	}
	#contents  .faq-container {
        width: 95%;
        margin: 30px auto;
    }

    #contents .faq-question {
        padding: 10px 15px;
        min-height: auto;
    }

    #contents .faq-q-label {
        font-size: 20px;
        margin-right: 10px;
    }

    #contents .faq-question-text {
        font-size: 16px;
    }

    #contents .faq-toggle-icon {
        font-size: 20px;
        
    }

    #contents .faq-answer {
        padding: 15px;
    }

    #contents .faq-a-label {
        font-size: 20px;
        margin-right: 10px;
    }

    #contents .faq-answer-content p,
    #contents .faq-answer-content ul li {
        font-size: 14px;
    }
	#contents .faq-answer-content ul {
        padding-left: 0; /* 左側のパディングをなくしてインデントを解除 */
    }

    #contents .faq-answer-content ul li {
        font-size: 14px;
        padding-left: 1.5em; /* リストマーク分のスペースを確保 */
    }

    #contents .faq-answer-content ul li::before {
        left: 0; /* liの左端に配置 */
    }

	/* about us */
	#contents .greeting-block {
        flex-direction: column-reverse; /* スマホでは画像を上、テキストを下にする */
        align-items: center; /* 中央揃え */
        gap: 20px; /* 縦並びになった時の隙間 */
    }

    #contents .greeting-text-area {
        width: 90%; /* スマホでのテキスト部分の幅 */
        text-align: left; /* テキストは左寄せが読みやすいことが多い */
        padding-top: 0;
    }

    #contents .greeting-signature {
        text-align: center; /* スマホでは署名を中央寄せに */
        margin-top: 20px;
    }

    #contents .greeting-image-area {
        width: 80%; /* スマホでの画像部分の幅 */
        max-width: 300px; /* 画像が大きくなりすぎないように最大幅を設定 */
        padding-top: 0;
    }

	
	#contents .timeline-container {
        width: 95%;
        padding-left: 0; /* スマホでもパディングは0 */
        margin: 30px auto;
    }

    #contents .timeline-container::before {
        left: 79px; /* スマホ向けに線の位置を調整 */
    }

    #contents .timeline-item {
        margin-left: 80px; /* スマホ向けに左マージンを調整 (年60px + 点とコンテンツの隙間20px) */
    }

    #contents .timeline-year {
        width: 60px; /* スマホ向けに年の幅を調整 */
        left: -70px; /* スマホ向けに位置調整 (年と点の合計を相殺) */
        font-size: 16px;
        white-space: nowrap;
    }

    #contents .timeline-item::before {
        left: -5px; 
        width: 10px;
        height: 10px;
        top: 6px;
    }

    #contents .timeline-content {
        font-size: 14px;
        padding-left: 15px; /* スマホ向けに内容の左余白を調整 */
    }
    #contents table.profile {
        width: 95%; /* スマホでのテーブルの幅（左右に少し余白を持たせる） */
        border: none; /* スマホではテーブル全体の枠線を非表示にする（任意） */
    }

    /* テーブルの要素を縦並びのブロック要素に変換 */
    #contents table.profile,
    #contents table.profile tbody,
    #contents table.profile tr {
        display: block; /* table, tbody, tr をブロック要素として縦に積む */
        width: 95%; /* それぞれの幅を100%にする */
    }

    #contents table.profile tr {
        margin-bottom: 15px; /* 各行（tr）の下に少し余白を持たせて区切りを明確に */
		margin-left: auto;
        margin-right: auto;
    }

    #contents table.profile th,
    #contents table.profile td {
        display: block; /* thとtdをブロック要素として縦に積む */
        width: 100%; /* 親要素（tr）の幅に対して100% */
        text-align: left; /* テキストは左寄せ */
        padding: 10px 15px; /* パディングを調整 */
        box-sizing: border-box; /* パディングとボーダーを幅に含める */
        border-bottom: none; /* デフォルトの下線を削除 */
        white-space: normal; /* テキストが長くなっても改行させる */
    }

    #contents table.profile th {
        background-color: #f5f3f2; /* thの背景色 */
        font-weight: bold; /* thの文字を太字に */
        border-bottom: 1px solid #eee; /* thとtdの間の区切り線 */
    }

    #contents table.profile td {
        background-color: #ffffff; /* tdの背景色 */
        padding-top: 10px; /* thとtdの間隔を調整 */
    }
    #contents .partners-section {
        flex-direction: column;
        align-items: center;
        gap: 30px;
        width: 95%;
        padding: 15px 0;
    }

    #contents .partners-column {
        width: 100%;
        min-width: auto;
        padding: 0 5px;
        flex-direction: column; /* ここもcolumnに維持 */
    }

    #contents .partners-column h4 {
        font-size: 16px;
        margin-bottom: 10px;
        padding-left: 1.2em;
    }

    #contents .partners-column h4::before {
        left: 0;
    }

    #contents .partners-column ul {
        margin-bottom: 15px;
    }

    #contents .partners-column ul li {
        font-size: 14px;
        margin-bottom: 5px;
        padding-left: 0;
    }

    #contents .partners-column:nth-child(3) {
        padding-top: 0; /* スマホでは縦並びになるので、上部の余白は不要 */
		margin-top: -30px;
    }
	#contents .access-info-section {
        flex-direction: column; /* 縦1列に積み重ねる */
        align-items: center; /* 中央揃え */
        gap: 20px; /* 縦の隙間 */
        width: 95%; /* スマホでの全体の幅 */
        margin: 30px auto;
    }

    #contents .access-map-area {
        width: 100%; /* スマホでは幅を100%に */
        height: 300px; /* スマホでの地図の高さを調整 */
        padding-top: 0; /* 余白調整 */
    }
    #contents .access-map-area iframe {
        width: 100%;
        height: 100%;
    }

    #contents .access-details-area {
        width: 100%; /* スマホでは幅を100%に */
        padding-top: 0;
    }

    #contents .access-details-area .access-heading {
        font-size: 16px;
        margin-top: 20px;
        margin-bottom: 10px;
        padding-left: 1.2em; /* マーク分のスペース維持 */
    }
    #contents .access-details-area .access-heading:first-child {
        margin-top: 0;
    }
	#contents .access-details-area p {
		font-size:14px;
	}

    #contents .access-details-area .access-table {
        width: 100%;
        font-size: 14px;
        margin-top: 15px;
        margin-bottom: 20px;
    }

    /* レスポンシブ時のテーブル（thとtdの縦並び） */
    #contents .access-details-area table.access-table,
    #contents .access-details-area table.access-table tbody,
    #contents .access-details-area table.access-table tr {
        display: block;
        width: 100%;
		margin-bottom: 50px;
    }
    #contents .access-details-area table.access-table tr {
        margin-bottom: 10px; /* 各行の間に隙間 */
    }
    #contents .access-details-area table.access-table th,
    #contents .access-details-area table.access-table td {
        display: block;
        width: 100%;
        text-align: left;
        padding: 8px 12px;
        box-sizing: border-box;
        border-bottom: none;
    }
    #contents .access-details-area table.access-table th {
        border-bottom: 1px solid #c8c9ca;
        padding-bottom: 5px;
    }
    #contents .access-details-area table.access-table td {
        padding-top: 5px;
    }
}
/*画面サイズが430px以下だったら*/
@media screen and (max-width:430px) {
	footer dl img {
        width: 1.5em;
        height: auto;
    }
	footer dl .name {
		font-size: 0.7em;
	}
	footer dl .address {
		font-size: 0.35em;
		line-height: 120%;
	}
	footer dl .address .sp-only {
		display: block;
	}
}