/*
Theme Name: JNG
Author URI: https://jng-chenqin.com/
Theme URI: https://jng-chenqin.com/
*/

:root{
    --font_serif: 'Noto Serif JP', serif;
	--color_main: #000080;
}

/*************************
 * 固定ページ
**************************/
.page-fv{width: 100%; height: 300px; margin-top: 60px; letter-spacing: 0.05em; position: relative;}
.page-fv img{width: 100%; height: 300px; object-fit: cover;}
.page-fv-cover{content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); position: absolute; top: 0; left: 0;}
.page-fv h1{width: 100%; padding: 0 5%; font-size: 2.5em; font-family: var(--font_serif); font-weight: 400; text-align: center; color: #fff; position: absolute; top: 50%; left: 0; transform: translatey(-50%);}
.page-contents{width: 90%; max-width: 1100px; margin: 50px auto 0; letter-spacing: 0.05em;}
.page-contents h2{margin-bottom: 1em; padding-bottom: 0.3em; border-bottom: 1px solid #ccc; font-size: 1.8em; font-weight: 400; font-family: var(--font_serif);}
.page-contents h3{margin-bottom: 1em; padding-bottom: 0.3em; font-size: 1.4em; font-weight: 400; font-family: var(--font_serif);}
.page-contents p{margin-bottom: 1.5em;}
.page-contents p + h2,
.page-contents p + h3,
.page-contents ul + h2,
.page-contents ul + h3,
.page-contents ol + h2,
.page-contents ol + h3{margin-top: 2.5em;}
.page-contents a{color: #1a0dab;}
.page-contents a:hover{text-decoration: underline;}
.page-contents ul{margin: 1.5em 0 1.5em 1.5em; list-style: disc;}
.page-contents ol{margin: 1.5em 0 1.5em 1.5em; list-style-type: decimal;}
.page-contents .wp-block-separator{background-color: var(--color_main); width: 20%;max-width: 220px; height: 1px; margin: 100px auto;}

a.my-btn,
input.my-btn{display: inline-block; width: auto; background-color: var(--color_main); padding: 0.75em 1.25em; color: #fff; letter-spacing: 0.05em; box-shadow: 0 2px 2px 0 #2c2c5e; font-size: 0.9em; position: relative; transition: 0.3s; cursor: pointer;}
a.my-btn:hover,
input.my-btn:hover{color: #fff; box-shadow: 0 0 0 0 #2c2c5e; text-decoration: none;}
a.my-btn::after,
input.my-btn::after{content: ">"; margin-left: 0.5em;}

.my-marker{background-color: #e2e3ff;}
.my-marker-yellow{background: linear-gradient(transparent 60%, yellow 60%); font-weight: bold;}

.br-sp{display: none;}

/*************************
 * ヒーロー
**************************/
.hero-cover{width: 100%; height: 100vh; background-color: #000; position: absolute; top: 0; left: 0; opacity: 0.5;}
.hero-text{width: 90%; font-size: 1.4em; letter-spacing: 0.1em; color: #fff;  font-family: var(--font_serif); position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.hero-text h2{text-align: center; font-weight: 400; line-height: 1.6;}
.hero-text h2 .text-main{display: block; text-align: center; font-size: 1.8em;}
.hero-text p{text-align: center;}
.hero-text .text-sub{margin-top: 1.5em; font-size: 0.75em; letter-spacing: 0.1em;}

.top1 .text-main{margin-bottom: 20px; font-family: 'Noto Serif JP', serif; font-size: 1.6em; line-height: 1.7; font-weight: 300;}
.top1 p{margin-bottom: 0; text-align: center;}

/*************************
 * note 記事一覧
**************************/
.note-inner{width: 90%; max-width: 900px; margin: 0 auto;}
.note-list {display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px;}
.note-item {border: 1px solid #ddd; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.05); position: relative;}
.note-item a{width: 100%; height: 100%; content: ""; position: absolute; top: 0; left: 0;}
.note-thumb{overflow: hidden;}
.note-thumb img {width: 100%; height: 180px; object-fit: cover; transition: 0.3s;}
.note-item:hover .note-thumb img{transform: scale(1.1);}
.note-content {padding: 15px;}
.note-title {font-size: 1.1rem; font-weight: bold; margin: 0 0 10px; display: block; line-height: 1.4;}
.note-date {font-size: 0.85rem; color: #666; margin-bottom: 10px; display: block;}
.note-excerpt {font-size: 0.95rem; color: #333; line-height: 1.5;}
.note-btn{margin-top: 2em; text-align: center;}

/*************************
 * 企業哲学
**************************/
.flex-contents{display: flex; width: 100%;}
.fc-img{width: 50%;}
.fc-img img{width: 100%; height: 100%; object-fit: cover;}
.fc-text{width: 50%; padding: 5% 10% 5% 5%; font-family: var(--font_serif); letter-spacing: 0.05em;}
.fc-text h2{margin-bottom: 0.5em; font-size: 1.8em;}
.philosophy_box{margin-bottom: 2em;}
.philosophy_box .text-main{display: block; font-size: 1.2em;}

.flex-contents.rev{flex-direction: row-reverse;}
.flex-contents.rev .fc-text{padding: 5% 5% 5% 10%;}
h3.headline-jd{font-size: 1.2em; font-weight: 400;}
ul.list-jd{margin: 0 0 1.5em 1.5em; list-style: disc;}
.btn-jd{margin-top: 2em;}

/*************************
 * フッター
**************************/
.address-block{width: 90%; max-width: 900px;  margin: 0 auto 50px; display: flex; justify-content: center; gap: 2%;}
.address-box{width: 23%;}
.address-box-title{margin-bottom: 1em; text-align: center;}
.address-box-title img{width: 20%;}
.address-box-title p{text-align: center; font-size: 13px;}
.address-box-qr{text-align: center;}
.address-box-qr img{width: 50%;}
.address-box-link{margin-top: 1em; font-size: 12px; text-align: center;}
.address-box-link .font-mini{font-size: 0.9em;}
.address-box-link ul{font-size: 24px;}
.address-box-link ul .font-mini{display: block; font-size: 0.5em;}
.address-box-link ul li{margin-bottom: 0.25em; line-height: 1.5;}

.copyright{text-align: center; font-size: 10.5px;}


/*************************
 * 事業内容ページ
**************************/
.description-contents{width: 90%; max-width: 1100px; margin: 0 auto;  letter-spacing: 0.05em;}
.description-main{margin-bottom: 4em; font-family: var(--font_serif);}
.description-main h2{margin-bottom: 0.5em; font-size: 1.8em; font-weight: 400;}
.description-flex{display: flex; flex-wrap: wrap; gap: 40px 2%;}
.description-box{width: 48%;}
.description-box h3{border-bottom: 1px solid #ccc; padding: 0 1em 0.5em; font-size: 1.4em; font-family: var(--font_serif); font-weight: 400; text-align: center;}
.description-box h3 .font-mini{font-size: 0.7em;}
.description-box-img{width: 100%; margin: 20px 0;}
.description-box-img img{width: 100%; object-fit: cover; aspect-ratio: 16 / 9;}
.description-box p{font-size: 0.95em;}
.description-box .user-company{display: block;background-color: #e2e3ff; margin: 2em 0 0.25em;}
.description-other{margin: 100px 0; padding-top: 50px; position: relative;}
.description-other::before{content: ""; width: 20%; height: 1px; background-color: #818181; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
.description-other h2{margin-bottom: 0.5em; font-size: 1.8em; font-family: var(--font_serif); font-weight: 400;}
.description-other > p{font-family: var(--font_serif);}
.description-other-box{margin: 30px 0;}
.description-other-box h3{margin-bottom: 0.5em; font-size: 1.4em; font-family: var(--font_serif); font-weight: 400;}
.description-other-box h3 .font-mini{font-size: 0.7em;}
.description-other-box p{font-size: 0.95em;}


/*************************
 * 事例紹介ページ
**************************/
.cs-list{width: 100%; margin: 80px 0;}
.cs-list ul{display: flex; justify-content: center; gap: 2%; list-style: none;}
.cs-list .my-btn::after{display: none;}

h2 .cs-cname{display: block; font-size: 0.5em;}
.cs-cimg{width: 100%;}
.cs-cimg img{width: 100%; object-fit: cover; aspect-ratio: 4 / 3;}
.cs-comment{background-color: #e9f3ff; padding: 1.5em; margin: 2.5em 0;}
.cs-img-list .wp-block-column:not(:first-child){margin-left: 0;}


/*************************
 * 取扱商品ページ
**************************/
.products-img{width: 100%; margin-bottom: 30px;}
.products-img img{width: 100%; aspect-ratio: 1 / 0.25; object-fit: cover;}

ul.products-list{display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #ccc; border-left: 1px solid #ccc; list-style: none; margin: 0 0 50px;}
ul.products-list li{border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 1.2em 1em 1em; line-height: 1.5; font-weight: bold;}
ul.products-list li .font-mini{font-size: 0.8em;}
ul.products-list li img{display: block; width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: 10px;}

ul.products-list.u03{border-top: none;}
ul.products-list.u03 li{border-top: 1px solid #ccc;}

div.products-list{display: flex; gap: 1%; flex-wrap: wrap;}
div.products-list .box{width: 49%; display: flex; gap: 1%; align-items: self-start; margin-bottom: 3%;}
div.products-list .box-img{width: 30%; padding: 1%; border: 1px solid #ccc; text-align: center;}
div.products-list .box-text{width: 70%; padding: 1% 0 0 1%; font-size: 14px;}
div.products-list .box-text h3{border-left: 2px solid #8e8eee; padding: 0 0 0 0.25em; margin: 0 0 1em 0; font-size: 1.3em; line-height: 1.5;}
div.products-list .box-text p{line-height: 1.7;}
div.products-list .box-text .font-mini{font-size: 0.8em;}

/*************************
 * 求人ページ
**************************/
.recruit-table{margin-bottom: 50px; border: 1px solid #ccc;}
.recruit-table th,
.recruit-table td{background-color: #fff; padding: 1em; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; font-size: 0.95em;}
.recruit-table th{background-color: #f3f3f3;}
.recruit-table td .font-mini{display: inline-block; font-size: 0.8em; line-height: 1.5;}
.recruit-btn{margin-bottom: 50px; text-align: center;}


/*************************
 * お問い合わせ
**************************/
.wp-block-contact-form-7-contact-form-selector{margin-top: 50px; padding-top: 50px; border-top: 1px solid #ccc;}
.cf7-box{margin-bottom: 50px;}
.cf7-box-item{width: 100%; font-weight: bold;}
.cf7-box-item p{margin: 0;}
.cf7-box-item .req{margin-left: 0.15em;/* font-size: 0.8em; */font-weight: 400;color: var(--wp--preset--color--vivid-red);}
.cf7-box-item .hosoku{margin-left: 0.5em; font-size: 0.8em; font-weight: 400;}
.cf7-box-field input[type="text"],
.cf7-box-field input[type="tel"],
.cf7-box-field input[type="email"],
.cf7-box-field input[type="date"],
.cf7-box-field textarea,
.cf7-box-field select{width: 100%; border: 1px solid #ccc; padding: 1em; font-size: 1em;}
.cf7-box-field input[type="date"],
.cf7-box-field select{width: auto;}
.cf7-acceptance p,
.cf7-submit p{text-align: center;}
.cf7-acceptance .wpcf7-list-item{margin-left: 0;}
.wpcf7-spinner{display: none;}


/*************************
 * レスポンシブ
**************************/
@media screen and (min-width:1025px) {
	#header{display: flex; align-items: center; padding-top: 10px; padding-bottom: 10px;}
	#header h1{float: none; width: auto; font-size: 1em;}
	#header h1 img{width: 100%; max-width: 200px;}
	#header .menu{width: calc(100% - 200px);}
	#header nav{align-items: center;gap: 5%;}
	#header .menu a{margin: 0; font-size: 16px;}
}
@media screen and (max-width:480px) {
	.br-pc{display: none;}
	.br-sp{display: inline;}
	
	a.my-btn,
	input.my-btn{width: 100%; padding: 1.5em; font-size: 1em; text-align: center;}
	.address-box-link a.my-btn{padding: 1em 0.5em; font-size: 0.9em;}
	
	.arrowWrap{top: 75vh !important; height: 100px !important;}
	.arrow{height: 50px !important;}
	.hero-text{font-size: 1.1em; top: 35%;}
	
	.top1 > p{text-align: left;}
	
	.flex-contents,
	.flex-contents.rev{flex-direction: column;}
	.fc-img{width: 100%;}
	.fc-text{width: 100%;}
	.btn-jd{text-align: center;}
	
	.address-block{flex-wrap: wrap; gap: 20px 2%;}
	.address-box{width: 48%;}
	.address-box-link ul{font-size: 1.8em;}
	
	.description-box{width: 100%;}
	.description-box h3{padding: 0 0 0.5em; text-align: left;}
	
	.cs-list ul{flex-direction: column; gap: 20px; margin: 0;}
	.cs-list ul a.my-btn{padding: 1em 2em;}
	.cs-list ul a.my-btn::after{display: inline; content: "\f107"; font-family: "Font Awesome 7 Free"; font-weight: 900;}
	
	.recruit-table th{display: block; width: 100%; background-color: #fff; border-bottom: none; padding: 2em 2em 0;}
	.recruit-table td{display: block; width: 100%; padding: 1em 2em 2em;}
	
	.products-img img{aspect-ratio: 1 / 0.5;}
	div.products-list .box{width: 100%;}
	div.products-list .box-text h3{font-size: 1.2em;}
}