@charset "utf-8";

/* 共通 --------------------------*/
/* ページ全体に関わるCSSの設定 */


@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');

html *,
::before,
::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

/* フォント */
html {
	font-size: 14px;
}

@media (min-width: 768px) {
	html {
		font-size: 16px;
	}
}

body {
	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
}

/* おもな太字タグのフォントウェイト設定 */
h1,
h2,
h3,
h4,
h5,
h6,
th,
strong {
	font-weight: 400;
	margin: 0;
	padding: 0;
}

p,
ul,
li {
	margin: 0;
	padding: 0;
}


/* ベースのリンクカラー */
a {
	color: #f30;
}

/* レスポンシブイメージと画像下スペース防止 */
img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
	/* 画像下のスペースを消す */
}

/* /ページ全体に関わるCSSの設定 */

/* /共通 --------------------------*/



/* モバイルメニュー ここから ---------------------------- */
@media (max-width: 767px) {

	/* sp */
	.navbtn {
		display: block;
		width: 60px;
		height: 60px;
		background-image: url(../images/nav-mobile-open.svg);
		background-repeat: no-repeat;
		background-size: 60px 60px;
		background-position: center center;
		position: fixed;
		top: 0px;
		/*left: 0px;ボタンの位置-左*/
		right: 0px;
		/*ボタンの位置-右*/
		z-index: 1;
	}

	.navbtn.close {
		background-image: url(../images/nav-mobile-close.svg);
	}

	.header-container {
		height: 100px;
	}

	.header-container .navbtn.close {
		background-color: hsla(0, 100%, 0%, 0.5);
		/*追加*/
		background-image: url(../images/nav-mobile-close.svg);
		background-size: 60px 60px;
		/*background-position: top left;ボタンの位置-左*/
		/*追加*/
		background-position: top right;
		/*ボタンの位置-右*/
		/*追加*/
		width: 100vw;
		height: 100vh;
	}

	.header-nav {
		position: fixed;
		top: 60px;
		width: 100vw;
		z-index: 2;
		margin: 0;
		padding: 0;
		list-style-type: none;
	}

	.header-nav.collapse {
		display: none;
	}

	.header-nav li a {
		display: block;
		padding: 20px 30px;
		border-top: 1px solid #d8d8d8;
		background: #efefef;
		color: #000;
		text-decoration: none;
	}

	.header-nav li a:hover {
		background: #b8e5ea;
	}
}

@media (min-width: 768px) {

	/* pc */
	.navbtn {
		display: none;
	}

	.header-nav {
		display: flex !important;
		flex-direction: row;
		justify-content: right;
		list-style-type: none;
		margin: 0 5%;
	}

	.header-nav li a {
		margin: 6px 10px 2px 10px;
		padding: 0px 0px 0px 0px;
		border-top: none;
		border-bottom: 4px solid transparent;
		background: none;
		text-decoration: none;
		font-family: 'Noto Sans JP', sans-serif;
		color: #141312;
	}

	.header-nav li a:hover {
		border-bottom: 4px solid #FB7E01;
		background: none;
	}
}

/* /モバイルメニュー ここまで ---------------------------- */

h1 {
	max-width: 180px;
	margin: 20px 0 0 30px;
}

.header-container {
	height: 50px;
}

.main-photo-pc {
	display: none;
}

.i-main-area {
	position: relative;
}

.i-main-area h2 {
	position: absolute;
	top: 60px;
	left: 5%;
	font-size: 25px;
	font-weight: bold;
	letter-spacing: 0.1em;
	line-height: 2;
}



@media (min-width: 768px) {

	h1 {
		max-width: 250px;

	}

	.header-container {
		height: 100px;
		margin: 30px 5% 0;
	}



	nav li {
		font-weight: bold;
		font-size: 20px;
	}

	.main-photo-pc {
		display: block;
	}


	.main-photo-sp {
		display: none;
	}



	.i-main-area h2 {
		position: absolute;
		top: 30%;
		left: 20%;
		font-size: 45px;
		font-weight: bold;
		letter-spacing: 0.1em;
		line-height: 2;
	}

}



/*topics*/
.topics {
	margin: 80px 5%;
	border-left: 3px solid #ccc;
}

.topics h2 {
	letter-spacing: 0.1em;
	font-size: 25px;
	font-weight: bold;
	margin: 0 0 15px 0;
	padding-left: 10px;

}

.topics ul {
	list-style: none;
	margin: 0px 5%;
}

.topics li {
	padding: 10px 0;
	font-size: 14px;
	line-height: 1.6;
	border-bottom: 1px dotted #ccc;
}



.topics li .date {
	display: block;
	font-size: 14px;
	color: #333;
	margin-bottom: 4px;
}

@media (min-width: 768px) {
	.topics h2 {
		font-size: 30px;
		margin: 0 10px;
	}

	.topics1 {
		display: none;
	}

	.topics2 {
		display: none;
	}

	.topics3 {
		margin: 0 640px 0 0;
	}

	.topics ul {
		margin: 20px 20px;
	}
}


/*visison*/

#visison {
	padding: 50px 5% 0;
}

.visison1 {
	margin-bottom: 30px;
}

#visison h2 {
	letter-spacing: 0.1em;
	color: #FB7E01;
	font-size: 25px;
	font-weight: bold;
	margin: 20px 0 20px;
}

.visison-text1 {
	color: #FB7E01;
	font-size: 18px;
	font-weight: bold;
	line-height: 2;
	border-bottom: solid;
	border-color: #FB7E01;
	border-width: 2px;
	padding: 0 0 20px 0;
}

.visison-text2 {
	font-size: 14px;
	line-height: 1.8;
	text-align: left;
	margin: 60px 0 100px 0;
}

@media (min-width: 768px) {

	#visison {
		display: flex;
		justify-content: space-between;
	}

	.visison1 {
		max-width: 620px;
	}

	.visison2 {
		text-align: end;
	}

	#visison h2 {
		font-size: 30px;
		text-align: end;
	}

	.visison-text1 {
		font-size: 20px;
	}

	.visison-text2 {
		font-size: 16px;
	}

}



/*service*/
#service {
	margin: 80px 5% 0;
}

#service h2 {
	letter-spacing: 0.1em;
	font-size: 25px;
	font-weight: bold;
	text-align: center;
	margin: 0 0 35px;
}


#service h3 {
	letter-spacing: 0.1em;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	display: grid;
	gap: 10px;
	padding: 30px 0 25px;
}

.CONSULTING-text1 {
	padding: 10px 10% 70px;
	line-height: 1.6;
}

.CONSULTING {
	background-color: #ffffff;
	box-shadow: 0 0 8px gray;
	margin-bottom: 30px;
}



@media (min-width: 768px) {

	#service h2 {
		text-align: center;
		font-size: 30px;
		margin: 200px 0 100px;
	}



	.service1 {
		position: relative;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin: 0 0 400px 0;
		flex-direction: row-reverse;
	}

	.color-bg {
		content: '';
		position: absolute;
		width: 70%;
		height: 23em;
		background: #efefef;
		right: 10%;
		top: 20%;
		z-index: -1;
	}

	.service2 {
		position: relative;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin: 0 0 400px 0;

	}


	.service1 h3 {
		font-size: 25px;
		font-weight: bold;
	}

	.CONSULTING-text1 {
		font-size: 16px;
		line-height: 1.6;
		margin: 20px 5%
	}


	.service1-photo {
		width: 50%;
	}

	.CONSULTING {
		width: 40%;
		background: #fff;
		box-shadow: 0 0 20px #ccc;
		position: relative;
		top: 250px;
	}

}




/*abuot*/
#about {
	margin: 100px 5% 0;
}

#about h2 {
	letter-spacing: 0.1em;
	text-align: center;
	font-size: 25px;
	font-weight: bold;
	color: #FB7E01;
	padding-bottom: 25px;
}

.company-info {
	list-style: none;
}

.company-info li {
	display: flex;
	justify-content: space-between;
	padding: 16px 8px;
	font-size: 14px;
	border-bottom: 1px solid #ccc;
}

.company-info li span.about-label {
	flex: 0 0 35%;
}

.company-info li span.value {
	flex: 1;
	text-align: left;
}

#CONTACT {
	margin: 50px 5%;
}

@media (min-width: 768px) {

	#about {
		margin: 50px 30%;
	}

}


/*写真*/
.photo1-conter {
	position: relative;
	margin: 80px auto;
}

.photo1 {
	margin-top: 80px;
	max-width: 245px;
	margin-left: auto;
	margin: 0 auto;
}

.photo1-color-bg {
	position: absolute;
	width: 60%;
	height: 10em;
	background: #efefef;
	left: 10%;
	top: 30%;
	z-index: -1;
}




@media (min-width: 768px) {

	.photo1 {
		max-width: 90%;
		margin: auto;
		padding: 60px 20% 100px;
	}

	.photo1-color-bg {
		position: absolute;
		width: 50%;
		height: 23em;
		background: #efefef;
		left: 20%;
		top: 30%;
		z-index: -1;
	}


}



/*お問い合わせ*/



#CONTACT h2 {
	letter-spacing: 0.1em;
	text-align: center;
	font-size: 25px;
	font-weight: bold;
	color: #FB7E01;
	padding-bottom: 40px;
	margin-top: 100px;
}

.form-group {
	margin-bottom: 25px;
}

.form-group label {
	display: block;
	/* ラベルをブロック要素にして一行占有させる */
	margin-bottom: 10px;
	font-size: 14px;
	color: #333;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"] {
	width: 100%;
	/* 親要素の幅いっぱいに広げる */
	padding: 10px;
	border: 1px solid #ccc;
	box-sizing: border-box;
	/* paddingとborderをwidthに含める */
	font-size: 1em;
	height: 40px;
	/* 高さの調整 */
}

.form-group textarea {
	width: 100%;
	padding: 10px;
	border: 1px solid #ccc;
	box-sizing: border-box;
	font-size: 1em;
	resize: vertical;
	/* 垂直方向のみリサイズ可能 */
	min-height: 150px;
	/* 適切な高さ */
}

.form-action {
	text-align: center;
	/* ボタンを中央に配置 */
	margin-top: 40px;
}

.form-action button {
	background-color: #fff;
	/* 背景を白に */
	color: #333;
	/* 文字色 */
	border: 2px solid #333;
	/* 黒い枠線 */
	padding: 10px 40px;
	font-size: 1em;
	cursor: pointer;
	transition: background-color 0.3s;
	width: 150px;
	/* ボタンの幅を固定 */
	height: 45px;
	/* ボタンの高さを固定 */
	box-sizing: border-box;
}

/* ホバー時のスタイル（任意） */
.form-action button:hover {
	background-color: #eee;
}

@media (min-width: 768px) {
	#CONTACT {
		margin: 10px 30% 100px;
	}

}

footer {
	background-color: #FB7E01;
	padding: 80px auto 100px;
}

footer h2 {
	font-size: 25px;
	font-weight: bold;
	letter-spacing: 0.1em;
	text-align: center;
	padding: 150px 0;
	color: #efefef;
}

small {
	color: #efefef;
}

.footer-text {
	text-align: center;
	padding: 5px;
}