@charset "utf-8";
/* CSS Document */
/*-------------------------------------------------

　   COMMON

--------------------------------------------------*/
header {position: sticky;background: #001D50;}
header .logo p.jp {color: #fff;}
header .logo p.en {color: #fff;}
header nav .wrap ul li a {color: #fff;}
/* block */
.common_block ul {margin-bottom: clamp(40px, calc(40px + 60 * ((100vw - 375px) / 1545)), 100px);}
.common_block ul:last-child {margin-bottom: 0;}
.common_block ul li {align-items: flex-start;margin-bottom: clamp(30px, calc(30px + 110 * ((100vw - 375px) / 1545)), 140px);}
.common_block ul li:nth-child(even) {flex-direction: row-reverse;}
.common_block ul li:last-child {margin-bottom: 0;}
.common_block ul li .wrap {width: 52%;}
.common_block ul li .wrap .content {margin-bottom: clamp(40px, calc(40px + 40 * ((100vw - 375px) / 1545)), 80px);}
.common_block ul li .wrap .content:last-child {margin-bottom: 0;}
.common_block ul li .wrap .content p {margin-bottom: clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px);}
.common_block ul li .wrap .content p:last-child {margin-bottom: 0;}
.common_block ul li .wrap .content h3 {
	position: relative;
	margin-bottom: clamp(10px, calc(10px + 6 * ((100vw - 375px) / 1545)), 16px);
	font-size: clamp(16px, calc(16px + 5 * ((100vw - 375px) / 1545)), 21px);
}
.common_block ul li .wrap .content h3::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	z-index: -1;
	transform: translateY(-50%);
	width: 100%;
	height: 1px;
	background: #A3A3A3;
}
.common_block ul li .wrap .content h3 span {position: relative;z-index: 1;padding-right: 10px;background: #F8F7F1;}
.common_block ul li figure {width: 45%;}
.common_block table tr {
	display: block;
	padding: clamp(15px, calc(15px + 15 * ((100vw - 375px) / 1545)), 30px);
	border-bottom: 1px solid #A3A3A3;
}
.common_block table tr:first-child {border-top: 1px solid #A3A3A3;}
.common_block table tr th {
	width: clamp(150px, calc(150px + 155 * ((100vw - 375px) / 1545)), 305px);
	padding-left: clamp(10px, calc(10px + 25 * ((100vw - 375px) / 1545)), 35px);
	font-size: clamp(16px, calc(16px + 3 * ((100vw - 375px) / 1545)), 19px);
	letter-spacing: 0;
}
/* pager */
.pages {display: none;}
.wp-pagenavi {display: flex;justify-content: center;gap: 16px;}
.wp-pagenavi a.page,
.wp-pagenavi span {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	margin: 0!important;
	padding: 0!important;
	border: 1px solid #192C4E !important;
	border-radius: 50%;
	background: #192C4E;
	color: #fff;
	font-size: clamp(15px, calc(15px + 4 * ((100vw - 375px) / 1545)), 19px);
}
.wp-pagenavi a.previouspostslink,
.wp-pagenavi a.nextpostslink {
	border: none;
	background: #fff;
	color: #192C4E;
	font-size: clamp(24px, calc(24px + 10 * ((100vw - 375px) / 1545)), 34px);
}
.wp-pagenavi span {background: #fff;color: #192C4E;}
.wp-pagenavi a.page:hover,
.wp-pagenavi span.current {background: #fff;color: #192C4E;line-height: 1;}
@media only screen and ( max-width : 767px ) {
	header nav {background: #001D50;}
	header .header_btn p {color: #fff;}
	header .header_btn p::after {background: #fff;}
	#sp-menu span {background: #fff;}
	.common_block ul li .wrap {width: 100%;margin-bottom: 30px;}
	.common_block ul li figure {width: 100vw;margin: 0 calc(50% - 50vw);}
	.common_block ul li figure img {
		object-fit: cover;
		object-position: 50% 28%;
		height: clamp(400px, calc(400px + 400 * ((100vw - 375px) / 1545)), 600px);
	}
}
@media only screen and ( max-width : 500px ) {
	.common_block table tr {padding: 15px 0;}
	.common_block table tr th {display: block;margin-bottom: 10px;padding-left: 0;}
	.common_block table tr td {display: block;}
}
/*-------------------------------------------------

　   MAIN VISIUAL

--------------------------------------------------*/
#mv {background: #fff;}
#mv::before {background-image: url(../img/page/common/title_bg.webp);}
#mv .container {
	display: flex;
	align-items: center;
	position: relative;
	padding-top: clamp(100px, calc(54px + 140 * ((100vw - 375px) / 1545)), 194px);
	padding-bottom: clamp(50px, calc(57px + 45 * ((100vw - 375px) / 1545)), 102px);
}
#mv .container h1 {
	padding-bottom: clamp(10px, calc(10px + 10 * ((100vw - 375px) / 1545)), 20px);
	font-size: clamp(26px, calc(26px + 59 * ((100vw - 375px) / 1545)), 85px);
}
#mv .container .mv_border {flex: 1;position: relative;margin: 0 2%;}
#mv .container p {font-size: clamp(14px, calc(14px + 26 * ((100vw - 375px) / 1545)), 40px);}
@media only screen and ( max-width : 500px ) {
	#mv .container {display: block;}
	#mv .container .mv_border {display: none;}
}
/*-------------------------------------------------

	Message │ 私たちの想い

--------------------------------------------------*/
#message {background: url(../img/page/message/bg.webp) no-repeat top center / cover;}
/*-------------------------------------------------

	Our Story │ 沿革

--------------------------------------------------*/
#our_story .inner {max-width: 1000px;}
#our_story .block2 {background: #192C4E;}
#our_story .block2 .title_common h2 {color: #fff;text-align: center;}
#our_story .block2 .title_common p {
	margin-top: clamp(40px, calc(40px + 20 * ((100vw - 375px) / 1545)), 60px);
	color: #fff;
	text-align: center;
}
#our_story .block2 ul {display: grid;grid-template-columns: repeat(3, 1fr);gap: 50px 60px;}
#our_story .block2 ul li {position: relative;}
#our_story .block2 ul li a {width: 100%;}
#our_story .block2 ul li a figure {margin-bottom: 10px;}
#our_story .block2 ul li a p {color: #fff;}

/* モーダル用の新しいスタイル */
.video-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
}

.modal-content {
    position: relative;
    margin: auto;
    padding: 20px;
    width: 90%;
    max-width: 800px;
    top: 50%;
    transform: translateY(-50%);
}

#modalVideo {
    width: 100%;
    height: auto;
}

.close-modal {
    position: absolute;
    right: 0;
    top: -40px;
    color: #fff;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
}

@media only screen and ( max-width : 767px ) {
	#our_story {background: #fff;}
	#our_story .block2 ul {grid-template-columns: repeat(2, 1fr);gap: 30px 20px;}
	#our_story .common_block ul li .wrap .content h3 span {background: #fff;}
}
@media only screen and ( max-width : 500px ) {
	#our_story .block2 ul {grid-template-columns: 1fr;}
}
/*-------------------------------------------------

	About Us │ 蔵元案内

--------------------------------------------------*/
#about_us .common_block ul li:nth-child(1) .wrap {width: 40%;}
#about_us .common_block ul li:nth-child(1) .wrap .title_common {margin-bottom: clamp(30px, calc(30px + 10 * ((100vw - 375px) / 1545)), 40px);}
#about_us .common_block ul li:nth-child(1) .wrap table tr {padding: clamp(10px, calc(10px + 6 * ((100vw - 375px) / 1545)), 16px);}
#about_us .common_block ul li:nth-child(1) .wrap table tr th {
	width: clamp(100px, calc(100px + 147 * ((100vw - 375px) / 1545)), 247px);
	font-size: clamp(13px, calc(13px + 6 * ((100vw - 375px) / 1545)), 19px);
}
#about_us .common_block ul li:nth-child(1) figure {width: 55%;}
#about_us .container {
	display: flex;
	justify-content: flex-start;
	gap: clamp(40px, calc(40px + 60 * ((100vw - 375px) / 1545)), 100px);
	position: relative;
	z-index: 1;
	padding-top: clamp(20px, calc(20px + 12 * ((100vw - 375px) / 1545)), 32px);
	padding-bottom: clamp(20px, calc(20px + 12 * ((100vw - 375px) / 1545)), 32px);
}
#about_us .container::before {
	content: '';
	position: absolute;
	top: 0;
	left: calc(50% - 50vw);
	z-index: -1;
	width: 100vw;
	height: 100%;
	background: #fff;
}
#about_us .container figure {width: 38%;max-width: 496px;}
#about_us .container dl {display: flex;align-items: center;gap: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);}
#about_us .container dl dt {
	display: flex;
	justify-content: center;
	align-items: center;
	width: clamp(77px, calc(77px + 23 * ((100vw - 375px) / 1545)), 100px);
	height: clamp(77px, calc(77px + 23 * ((100vw - 375px) / 1545)), 100px);
	padding-top: 1%;
	border: 1px solid #A3A3A3;
	border-radius: 50%;
	color: #A3A3A3;
}
#about_us .container dl dd {flex: 1;}
@media only screen and ( max-width : 1024px ) {
	#about_us .common_block ul li:nth-child(1) .wrap {width: 100%;margin-bottom: 30px;}
	#about_us .common_block ul li:nth-child(1) figure {width: 100%;margin: 0;}
	#about_us .container {display: block;}
	#about_us .container dl {margin-bottom: 30px;}
	#about_us .container figure {width: 100%;margin: 0 auto;}
}
@media only screen and ( max-width : 767px ) {
	#about_us .container dl {flex-direction: column;}
}
@media only screen and ( max-width : 500px ) {
	#about_us .common_block ul li:nth-child(1) .wrap table tr {padding: 15px 0;}
	#about_us .common_block ul li:nth-child(1) .wrap table tr td {padding-left: 10px;}
}
/*-------------------------------------------------

	Products │ 商品案内

--------------------------------------------------*/
#products .inner {max-width: 1335px;}
#products .block:nth-child(odd) {background: #fff;}
#products .block h2 {
	position: relative;
	margin-bottom: clamp(30px, calc(30px + 35 * ((100vw - 375px) / 1545)), 65px);
	padding: 10px;
	padding-left: clamp(20px, calc(20px + 16 * ((100vw - 375px) / 1545)), 36px);
	border-left: 17px solid #001741;
	background: linear-gradient(90deg, #192C4E, transparent);
	color: #fff;
	font-size: clamp(20px, calc(20px + 23 * ((100vw - 375px) / 1545)), 43px);
	letter-spacing: 0.4em;
}
#products .block h2::before {
	content: '';
	position: absolute;
	top: 0;
	left: -24px;
	width: 3px;
	height: 100%;
	background: #192C4E;
}
#products .block figure {margin-bottom: clamp(20px, calc(20px + 40 * ((100vw - 375px) / 1545)), 60px);text-align: center;}
#products .block figure img {width: auto;height: clamp(100px, calc(100px + 100 * ((100vw - 375px) / 1545)), 200px);}
#products .block:last-child figure img {height: clamp(80px, calc(80px + 70 * ((100vw - 375px) / 1545)), 150px);}
#products .block ul {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(40px, calc(40px + 60 * ((100vw - 375px) / 1545)), 100px);
}
#products .block ul li {position: relative;}
#products .block ul li p {text-align: center; font-size: 13px;}
#products .block ul li h3 {font-size: clamp(15px, calc(15px + 9 * ((100vw - 375px) / 1545)), 24px);text-align: center; letter-spacing: 0.2em;}
#products .block ul li h3 span.med {font-size: clamp(16px, calc(16px + 7 * ((100vw - 375px) / 1545)), 23px);}
#products .block ul li h3 span.small {font-size: clamp(14px, calc(14px + 5 * ((100vw - 375px) / 1545)), 19px);}
@media only screen and ( max-width : 767px ) {
	#products .block ul {grid-template-columns: repeat(2, 1fr);}
}
@media only screen and ( max-width : 500px ) {
	#products .block h2 {padding: 5px 0;}
	#products .block ul {grid-template-columns: 1fr;}
	#products .block ul li h3 {text-align: center; font-size: 20px;}	
}
/*-------------------------------------------------

	News Archive │ お知らせ

--------------------------------------------------*/
#news {background: #fff;}
#news ul.list {margin-bottom: 30px;}
#news ul.list:last-child {margin-bottom: 0;}
#news ul.list li {
	display: flex;
	align-items: center;
	position: relative;
	padding: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
	border-bottom: 1px solid #A3A3A3;
}
#news ul.list li:last-child {border-bottom: 0;}
#news ul.list li dl {display: flex;gap: 23px;}
#news ul.list li dl dt {display: flex;align-items: center;gap: clamp(20px, calc(20px + 7 * ((100vw - 375px) / 1545)), 27px);}
#news ul.list li dl dt time {font-size: clamp(15px, calc(15px + 4 * ((100vw - 375px) / 1545)), 19px);}
#news ul.list li dl dt span {
	padding: 5px 15px;
	border: 1px solid #A3A3A3;
	border-radius: 5px;
	background: #A3A3A3;
	color: #fff;
	font-size: clamp(10px, calc(10px + 4 * ((100vw - 375px) / 1545)), 14px);
	text-align: center;
}
#news ul.list li dl dd {flex: 1;font-size: clamp(10px, calc(10px + 8 * ((100vw - 375px) / 1545)), 18px);letter-spacing: .1em;}
#news .container {position: relative;width: 100%;margin-top: clamp(40px, calc(40px + 60 * ((100vw - 375px) / 1545)), 100px);}
#news .container p {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	color: #A3A3A3;
	font-size: clamp(16px, calc(16px + 6 * ((100vw - 375px) / 1545)), 22px);
}
#news .container p.back {left: 0;}
#news .container p.next {right: 0;}
#news .container p a {color: #262626;}
@media only screen and ( max-width : 1024px ) {
	#news ul.list li dl {display: block;}
	#news ul.list li dl dt {margin-bottom: 10px;}
}
@media only screen and ( max-width : 500px ) {
	#news ul.list li {padding: 15px 0;}
}
/*-------------------------------------------------

	News Single │ お知らせ

--------------------------------------------------*/
#news-sg {
	padding-top: clamp(50px, calc(50px + 126 * ((100vw - 375px) / 1545)), 176px);
	padding-bottom: clamp(60px, calc(60px + 40 * ((100vw - 375px) / 1545)), 100px);
	background: url(../img/page/news/bg.webp) no-repeat top center / cover;
}
#news-sg .inner {max-width: 1011px;}
#news-sg .container {text-align: center;}
#news-sg .container .title_wrap dl {
	display: flex;
	align-items: center;
	gap: clamp(10px, calc(10px + 16 * ((100vw - 375px) / 1545)), 26px);
	margin-bottom: clamp(30px, calc(30px + 20 * ((100vw - 375px) / 1545)), 50px);
}
#news-sg .container .title_wrap dl dt {font-size: clamp(13px, calc(13px + 6 * ((100vw - 375px) / 1545)), 19px);}
#news-sg .container .title_wrap dl dd {
	padding: 2px 15px;
	border: 1px solid #A3A3A3;
	border-radius: 5px;
	background: #A3A3A3;
	color: #fff;
	font-size: clamp(10px, calc(10px + 4 * ((100vw - 375px) / 1545)), 14px);
	text-align: center;
}
#news-sg .container .title_wrap h2 {
	margin-bottom: clamp(40px, calc(40px + 20 * ((100vw - 375px) / 1545)), 60px);
	font-size: clamp(23px, calc(23px + 24 * ((100vw - 375px) / 1545)), 47px);
}
#news-sg .container .txt_wrap {margin-bottom: 100px;}
#news-sg .container a.back {
	color: #192C4E;
	font-size: clamp(16px, calc(16px + 6 * ((100vw - 375px) / 1545)), 22px);
}
/*-------------------------------------------------

	Privacy Policy │ プライバシーポリシー

--------------------------------------------------*/
#privacy_policy {background: #fff;}
#privacy_policy .inner {max-width: 1010px;}
#privacy_policy ul li .content p {margin-bottom: clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px);}
#privacy_policy ul li .content p:last-child {margin-bottom: 0;}

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

 採用情報

--------------------------------------------------*/
#about_recruit .inner {text-align: center;}
#about_recruit p.recruitment {font-size: 20px; margin-bottom: 80px; text-align: center;}
#about_recruit .recruitment {text-align: center;}
#about_recruit a:hover {opacity: 0.3;}
#about_recruit img {max-width: 400px;height: auto;}
@media only screen and ( max-width : 500px ) {
	#about_recruit p.recruitment {text-align: left;}
}