@charset "utf-8";
/*
Theme Name: kyoshin
Author: 
Version: 1.0
*/


/*
html5doctor.com Reset Stylesheet
v1.4
2009-07-27
Author: Richard Clark - http://richclarkdesign.com
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}
* {
  box-sizing: border-box;
}

article, aside, dialog, figure, footer, header,
hgroup, nav, section {
	display:block;
}

nav ul {
	list-style:none;
}

blockquote, q {
	quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}
a {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}
ins {
	background-color:#ff9;
	color:#000;
	text-decoration:none;
}
mark {
	background-color:#ff9;
	color:#000;
	font-style:italic;
	font-weight:bold;
}
del {
	text-decoration: line-through;
}
abbr[title], dfn[title] {
	border-bottom:1px dotted #000;
	cursor:help;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}
input, select {
	vertical-align:middle;
}
img{
	line-height:1;
	vertical-align:bottom;
}

/************** layout base ********************/
.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

img{ max-width:100%;}

sup {
	line-height: 100%;
	font-size:10px;
	vertical-align: 0.4em;
}
sub{
	line-height: 100%;
	font-size:10px;
	vertical-align: -0.1em;
}

.txtLeft{text-align:left;}
.txtRight{text-align:right;}
.txtCenter{text-align:center;}

.fw{font-weight:bold !important;}
.f10{ font-size:10px !important;}
.f11{ font-size:11px !important;}
.f12{ font-size:12px !important;}
.f13{ font-size:13px !important;}
.f14{ font-size:14px !important;}
.f15{ font-size:15px !important;}
.f16{ font-size:16px !important;}
.f17{ font-size:17px !important;}
.f18{ font-size:18px !important;}
.f20{ font-size:20px !important;}
.f22{ font-size:22px !important;}
.f24{ font-size:24px !important;}

.txtRed{ color:#D80000;}

.fLeft{ float:left;}
.fRight{ float:right;}

.mTop0{ margin-top:0 !important;}
.mTop5{ margin-top:5px !important;}
.mTop10{ margin-top:10px !important;}
.mTop15{ margin-top:15px !important;}
.mTop20{ margin-top:20px !important;}
.mTop25{ margin-top:25px !important;}
.mTop30{ margin-top:30px !important;}
.mTop35{ margin-top:35px !important;}
.mTop40{ margin-top:40px !important;}
.mTop45{ margin-top:45px !important;}
.mTop50{ margin-top:50px !important;}
.mTop55{ margin-top:55px !important;}
.mTop60{ margin-top:60px !important;}

.mBtm0{ margin-bottom:0 !important;}
.mBtm5{ margin-bottom:5px !important;}
.mBtm10{ margin-bottom:10px !important;}
.mBtm15{ margin-bottom:15px !important;}
.mBtm20{ margin-bottom:20px !important;}
.mBtm25{ margin-bottom:25px !important;}
.mBtm30{ margin-bottom:30px !important;}
.mBtm35{ margin-bottom:35px !important;}
.mBtm40{ margin-bottom:40px !important;}
.mBtm45{ margin-bottom:45px !important;}
.mBtm50{ margin-bottom:50px !important;}
.mBtm55{ margin-bottom:55px !important;}
.mBtm60{ margin-bottom:60px !important;}
.mBtm70{ margin-bottom:70px !important;}
.mBtm80{ margin-bottom:80px !important;}
.mBtm90{ margin-bottom:90px !important;}
.mBtm100{ margin-bottom:100px !important;}

.pTop0{ padding-top:0 !important;}
.pTop5{ padding-top:5px !important;}
.pTop10{ padding-top:10px !important;}
.pTop15{ padding-top:15px !important;}
.pTop20{ padding-top:20px !important;}
.pTop25{ padding-top:25px !important;}
.pTop30{ padding-top:30px !important;}
.pTop35{ padding-top:35px !important;}
.pTop40{ padding-top:40px !important;}
.pTop45{ padding-top:45px !important;}
.pTop50{ padding-top:50px !important;}

.pBtm0{ padding-bottom:0 !important;}
.pBtm5{ padding-bottom:5px !important;}
.pBtm10{ padding-bottom:10px !important;}
.pBtm15{ padding-bottom:15px !important;}
.pBtm20{ padding-bottom:20px !important;}
.pBtm25{ padding-bottom:25px !important;}
.pBtm30{ padding-bottom:30px !important;}
.pBtm35{ padding-bottom:35px !important;}
.pBtm40{ padding-bottom:40px !important;}
.pBtm45{ padding-bottom:45px !important;}
.pBtm50{ padding-bottom:50px !important;}
.pBtm55{ padding-bottom:55px !important;}
.pBtm60{ padding-bottom:60px !important;}

/************** layout base ********************/
html {
  scroll-behavior: smooth;
}
main section {
  scroll-margin-top: 100px;
}
#materialsContact {
  scroll-margin-top: 50vh;
}
@media screen and (max-width: 780px) {
/*main section {
  scroll-margin-top: max(14.8vw, 65px);
}*/
#materialsContact {
  scroll-margin-top: 50svh;
}
 main section {
  scroll-margin-top: calc(max(19.5vw,108px) + max(14.8vw, 65px));
}
 #seihin .anchorLinksWrap:has(.js-scrollfixed){
  min-height:max(328px,68.46vw) ;
 }
 #other .anchorLinksWrap:has(.js-scrollfixed){
  min-height:max(254px,68.46vw) ;
 }
 #products .anchorLinksWrap:has(.js-scrollfixed){
  min-height:max(189px,68.46vw) ;
 }
 #info .anchorLinksWrap:has(.js-scrollfixed){
  min-height:max(187px,38.8vw) ;
 }
 #env .anchorLinksWrap:has(.js-scrollfixed){
  min-height:max(187px,38.8vw) ;
 }
}/* //end for SP */
@media screen and (min-width: 781px) {
  main section {
  scroll-margin-top: 150px;
}
 #seihin .anchorLinksWrap:has(.js-scrollfixed){
  min-height: 333px;
 }
 #other .anchorLinksWrap:has(.js-scrollfixed){
  min-height: 223px;
 }
 #products .anchorLinksWrap:has(.js-scrollfixed){
  min-height: 156px;
 }
 #info .anchorLinksWrap:has(.js-scrollfixed){
  min-height: 266px;
 }
 #env .anchorLinksWrap:has(.js-scrollfixed){
  min-height: 156px;
 }
}/* //end for PC */

html {font-size: 62.5%;}
body{
	font-family: "Noto Sans JP", sans-serif;
	font-size: 1.6rem;
	font-weight: 400;
	font-style: normal;
	line-height: 1.8;
	color: var(--base);
}

ol,ul {
	list-style:none;
}

h1,h2,h3,h4,h5,h6{
	font-weight: 500;
	line-height: normal;
}

a{ 
	color: var(--base);
	text-decoration: none;
	transition: opacity 0.3s;
}
a:hover{	opacity: 0.75;}
a:link{}


/*------------------ color ----------------*/

:root {
	--base: #333333;
	--main: #354fa2;
	--main_l: #ebedf6;
	--gray: #707070;
	--red: #e60012;

	--flexChildCol2: calc((100% - 3.8%) / 2);
	--flexChildCol3: calc((100% - 3% * 2) / 3);
}
@media screen and (max-width: 780px) {
	:root {
		--flexGapSP: min(5.9vw, 44px) 3.8%;
		--headerH: min(16vw, 115px);
	}
}/* //end for SP */
@media (max-width: 780px) and (orientation: landscape) and (max-height: 500px) {
	:root {
		--headerH: 60px;
	}
}
@media screen and (min-width: 781px) {
	:root {
		--flexGapPC: min(4.33vw, 52px) 3%;
	}
}/* //end for PC */

/*------------------ font----------------*/

.en{
  font-family: "Nunito Sans", sans-serif;
	font-optical-sizing: auto;
	font-style: italic;
}

/*------------------ layout----------------*/
.inner{
	margin-inline: auto;
	width: min(87.2%, 960px);
}
.flex{
	display: flex;
	flex-wrap: wrap;
}
@media screen and (max-width: 780px) {
	.pc{display: none;}
}/* //end for SP */
@media screen and (min-width: 781px) {
	.sp{display: none;}
	.pcFlex{display: flex;	}
	.inner{
		width: min(94%, 960px);
		margin-inline: auto;
	}
}/* //end for PC */


/*------------------ text ----------------*/
.note{
	display: block;
	font-size: 1.1rem;
	line-height: 2.29;
	font-weight: 400;
}

.note.right{
	text-align: right;
}

/* =======================================
  inview
========================================== */
.inview{
 opacity: 0;
 transform: translateY(50px);
 transition: opacity .8s, transform .8s;
}
.is-inview{
 opacity: 1;
 transform: translateY(0);
 transition-delay: .5s;
}
#top #mv{
 opacity: 1;
 transform: translateY(0px);
}

/* =======================================
 header
========================================== */
header{
	position: relative;
	background-color: var(--main);
  width: 100%;
	z-index: 100;
}
.headerInner{
		display: flex;
		justify-content: space-between;
		align-items: center;

	margin-inline: auto;
}
header #logo{
	width: min(32.4vw, 253px);
	aspect-ratio: 316 / 67.4;
}
header #logo a{
	display: block;
}

header.fixed{
  position: fixed;
}

@media screen and (max-width: 780px) {
	header{
		position: fixed;
		inset: 0 0 auto 0;
		width: 100%;
	}
	.headerInner{
		width: 100%;
		padding-left: 2.9vw;
	}
}/* //end for SP */
@media (max-width: 780px) and (orientation: landscape) and (max-height: 500px) {
	header #logo{
		width: auto;
		height: 34px;
	}
}
@media screen and (min-width: 781px) {
	header #logo{
		width: 220px;
		aspect-ratio: 316 / 67.4;
	}
	.headerInner{
		/*width: min(94.2%, 1808px);*/
		width: min(98%, 1446px);
		gap: 0 2.62vw;
		padding-block: 3px;
	}
}/* //end for PC */

/*	#gNavi
-----------------------------*/
#gNavi li:not(.headerBtn) a{
	color: #ffffff;
}

@media screen and (max-width: 780px) {	
	#gNavi.active{
		right: 0;
	}
	#gNavi{
		position: fixed;
		right: -100vw;
		top: var(--headerH);
		background-color: #ffffff;
		width: 100%;
		height: calc(100vh - var(--headerH));
		padding: min(5.9vw, 44px) min(14.7vw, 110px) min(11.2vw, 84px);
		transition: all 0.6s;
		z-index: 100;
		overflow-y: auto;
	}
	#gNavi > ul{
		display: block;
		width: 100%;
	}
	#gNavi > ul li{
		font-size: min(5.3vw, 3.2rem);
	}
	#gNavi > ul ul{
		margin-left: 0.6em;
	}
	#gNavi > ul li span,
	#gNavi > ul li a{
		display: block;
		padding: 0.5em 0;
		line-height: 1.05;
	}
	#gNavi > ul li a:not(.headerBtnSP){
		color: var(--bk);
	}
	#gNavi > ul li.headerBtnSP{
		margin-block: 1em;
	}
	#gNavi > ul li.headerBtnSP a{
		background-color: var(--main);
		padding: 0.5em 1em;
		text-align: center;
		color: #ffffff;
	}

	#gNavi > ul li.spBD{
		position: relative;
		margin-top: 2em;
	}
	#gNavi > ul li.spBD::before{
		content: "";
		display: block;
		position: absolute;
		top: calc(-1.5em + 6px);
		inset-inline: 6px;
		width: calc(100% - 12px);
		height: 1px;
		background-color: var(--base);
	}
	#gNavi > ul li.spBD::after{
		content: "";
		display: block;
		position: absolute;
		top: -1.5em;
		inset-inline: 0px;
		width: 100%;
		height: 12px;
		background: url(images/bg_circle.svg) no-repeat left center / 12px 12px, url(images/bg_circle.svg) no-repeat right center / 12px 12px;
	}
	#gNavi li:not(.headerBtnSP) a[target="_blank"]::after{
		content: "";
		display: inline-block;
		margin-left: 0.5em;
		width: min(5vw, 39px);
		aspect-ratio: 1 / 1;
		background: url("images/ic_window.svg") no-repeat center center / 100%;	
	}
} /* -SP- */
@media screen and (min-width: 781px) {
	#gNavi > ul{
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: min(2.2vw, 34px);
	}
	#gNavi li > a{
		font-size: min(1.2vw, 14px);
		line-height: 1em;
		white-space: nowrap;
	}
	#gNavi li.hasSub{
		position: relative;
		padding-block: min(1.875vw, 14px);
	}
	#gNavi li.hasSub > span{
		font-size: min(1.2vw, 14px);
		line-height: 1em;
		color: #ffffff;
		white-space: nowrap;
	}
	#gNavi li.hasSub ul.sub{
		display: none;
		visibility: hidden;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		margin-top: 12px;
		width: min(19.25vw, 246px);
		background-color: #ffffff;
		box-shadow: 0px 0px 5px rgba(0, 0, 255, 0.25);
	}
	#gNavi li.hasSub:hover .sub{
		display: block;
		visibility: visible;
	}
	#gNavi li:not(.headerBtn) ul.sub::before {
		content: "";
		position: absolute;
		top: -18px;
		left: 50%;
		transform: translateX(-50%);
		
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 12px 18px 12px;
		border-color: transparent transparent #ffffff transparent;
	}
	#gNavi li:not(.headerBtn) ul li{
		list-style: none;
	}
	#gNavi li:not(.headerBtn) ul li + li{
		border-top: 2px solid #9fa0a0;
	}
	#gNavi li:not(.headerBtn) ul li a{
		position: relative;
		display: block;
		padding: 1.5em 0.5em 1.5em calc(1.5em + 17px);
		line-height: 1em;
		color: #9fa0a0;
	}
	#gNavi li:not(.headerBtn) ul a::before {
		content: "";
		position: absolute;
		left: 1.5em;
		top: 50%;
		transform: translateY(-50%);
		
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 7px 0 7px 7px;
		border-width: 0.39em 0 0.39em 0.39em;
		border-color: transparent transparent transparent #9fa0a0;
	}
	#gNavi li:not(.headerBtn) ul li a:hover{
		color: var(--main);
	}
	#gNavi li:not(.headerBtn) ul a:hover::before {
  border-color: transparent transparent transparent var(--main);
	}	
	#gNavi li.headerBtn a{
		background-color: #ffffff;
		display: grid;
		place-content: center;
		width: min(14vw, 140px);
		aspect-ratio: 140 / 36;
		padding: 0.3em 0.1em .5em;
		font-weight: 500;
		color: var(--main);
	}
	#gNavi li:not(.headerBtn) a[target="_blank"]::after{
		content: "";
		display: inline-block;
		margin-left: 6px;
		width: 15px;
		aspect-ratio: 1 / 1;
		background: url("images/ic_window_white.svg") no-repeat center center / 100%;	
	}
	#gNavi li#headerPCB{
		margin-left: max(-1.64vw,-37px);
	}
}/* //end for PC */

/*	.menu
-----------------------------*/
@media screen and (max-width: 780px) {

/* .menu */
.menu {
	position: relative;
	height: var(--headerH);
	aspect-ratio: 1/1;
	padding: min(2.9vw,22.5px);
  z-index: 101;
	cursor: pointer;
  background: transparent;
}
.menu > div {
	position: relative;
	width: min(9vw,70px);
	aspect-ratio: 1 / 1;
}
.menu span:not(.menu-txt) {
	position: absolute;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	display: block;
	margin-inline: auto;
	width: 100%;
	height: 2px;
	background-color: #ffffff;
	transition: all 0.6s;
}
.menu span.menu-txt {
	display: block;
	margin-top: min(calc(1.3vw * 4 + 4px), 52px);
	text-align: center;
	font-size: min(3.125vw, 2.4rem);
	line-height: 1;
}

.menu span.menuLine01 {
      top: min(1.67vw, 13px);
}
.menu span.menuLine02{
      top: min(4.36vw, 34px);
}
.menu span.menuLine03{
      top: min(7.1vw, 55px);
}
.menu.active  span.menuLine01{
      transform: rotate(45deg);
      top: min(4.1vw, 32px);
}
.menu.active  span.menuLine02{
      width: 0;
}
.menu.active  span.menuLine03 {
      transform: rotate(-45deg);
      top: min(4.1vw, 32px);
} 
} /* -SP- */
@media (max-width: 780px) and (orientation: landscape) and (max-height: 500px) {
	.menu {
		padding: 13px;
	}
	.menu > div {
		width: 34px;
	}
	.menu span.menuLine01 {
				top: 7px;
	}
	.menu span.menuLine02 {
				top: 18px;
	}
	.menu span.menuLine03 {
				top: 29px;
	}
	.menu.active span.menuLine01 {
				transform: rotate(45deg);
				top: 17px;
	}
	.menu.active span.menuLine03 {
				transform: rotate(-45deg);
				top: 17px;
	}
}

/* =======================================
		footer
========================================== */
footer{
	background-color: #ffffff;
	padding-bottom: min(10.5vw, 66px);
}
footer .inner{
	display: flex;
}

#footerInfo p{
	font-size: min(3.73vw, 2.2rem);
	letter-spacing: 0.05em;
	line-height: 1.43em;
}
#footerInfo p span{
 display: inline-block;
 width:2em;
}
#footerLogo{
	margin-bottom: min(7.2vw, 54px);
}

.footerLinks > li + li{
	margin-top: 1.4em;
}
.footerLinks > li > * > li{
	margin-top: 1em;
}
.footerLinks li{
	font-size: min(3.73vw, 2.2rem);
	letter-spacing: 0.05em;
	line-height: 1.71em;
}
.footerLinks li a[target="_blank"]::after {
    content: "";
    display: inline-block;
    margin-left: 6px;
    width: min(3.33vw, 25px);
    aspect-ratio: 1 / 1;
    background: url(images/ic_window.svg) no-repeat center center / 100%;
}
.footerLinks > li li li{
	margin-top: 0.5em;
}
footer #copy{
	color: var(--base);
	font-size: min(2.67vw, 1.6rem);
	font-weight: 400;
	text-align: center;
}
@media screen and (max-width: 780px) {	
	footer .inner{
		flex-wrap: wrap;
		gap: 0 min(5.2%, 100px);
		padding-block: min(12.9vw, 100px) min(18.6vw, 145px);
		width: min(77.3%, 603px);
	}
	footer .inner > *{
		width: 100%;
	}
	footer .inner > * + *{
		position: relative;
		padding-top: min(14.1vw, 110px);
	}
	footer .inner > * + *::before{
		content: "";
		display: block;
		position: absolute;
		top: min(min(14.1vw, 110px) / 2, 55px);
		inset-inline: 6px;
		width: calc(100% - 12px);
		height: 1px;
		background-color: var(--base);
	}
	footer .inner > * + *::after{
		content: "";
		display: block;
		position: absolute;
		top: min(calc(min(14.1vw, 110px) / 2 - 6px), 49px);
		inset-inline: 0px;
		width: 100%;
		height: 12px;
		background: url(images/bg_circle.svg) no-repeat left center / 12px 12px, url(images/bg_circle.svg) no-repeat right center / 12px 12px;
	}
	#footerLogo img{
		width: min(52.43vw, 409px);
		aspect-ratio: 409 / 87;
	}
	
} /* -SP- */
@media screen and (min-width: 781px) {	
	footer .inner{
		gap: 0 min(5.2%, 80px);
		padding-block: 72px 64px;
	}
	#footerInfo{
		width: min(31.9%, 307px);
	}
	#footerLogo{
		margin-bottom: 56px;
	}
	#footerLogo img{
		width: min(100%, 256px);
	}
	#footerInfo p{
		font-size: 1.4rem;
		line-height: 1.44em;
	}
	.footerLinks{
		margin-top: 12px;
	}
	.footerLinks li{
		font-size: 1.4rem;
		line-height: 1.44em;
	}
	.footerLinks li a[target="_blank"]::after {
			margin-left: 6px;
			width: 18.75px;
	}
	.footerLinks + .footerLinks{
		margin-left: min(2.5%, 24px);
	}
} /* -PC only- */


/*	#pagetop
-----------------------------*/
#pageTop{
	position: fixed;
	right: min(2.1%, 42px);
	bottom: min(2.1vw, 42px);
	width: min(7.5vw, 72px);
	aspect-ratio: 1 / 1;
	z-index: 1;
}
#pageTop a{
	display: block;
}
@media screen and (max-width: 780px) {
	#pageTop{
		position: fixed;
		right: 10px;
		bottom: 10px;
		width: min(15vw, 50px);
	}
} /* -SP- */



/* =======================================
		main
========================================== */
main{
	position: relative;
}
@media screen and (max-width: 780px) {
	main{
		margin-top: var(--headerH);
	}
} /* -SP- */
@media screen and (min-width: 781px) {
}/* //end for PC */


/* common
-----------------------------*/
.h2Tit{
	margin-bottom: 1em;
	font-size: min(3.2vw, 2.0rem);
	letter-spacing: 0.05em;
	line-height: 1.2em;
}
.h2Tit .en{
	display: block;
	font-size: min(7vw, 4.4rem);
	font-weight: 700;
	line-height: 1em;
}
.h3Tit{
	margin-bottom: 1em;
	font-size: min(5.33vw, 2.88rem);
}
.h3Tit .en{
	display: block;
	font-size: 0.46em;
	font-weight: 600;
	line-height: 2em;
}
.h4Tit{
	margin-bottom: 1em;
	font-size: min(5.33vw, 2.88rem);
}

.h5Tit{
	margin-bottom: 1em;
	font-size: min(5.33vw, 2.88rem);
}
.h5Tit .en{
	display: block;
	font-size: 0.47em;
	font-weight: 600;
	line-height: 2em;
}

.bdCircle{
	position: relative;
	padding-bottom: 24px;
}
.bdCircle::before{
	content: "";
	display: block;
	position: absolute;
	/*bottom: min(calc(min(13.3vw, 100px) / 2 + 6px), 56px);*/
	bottom: 6px;
	inset-inline: 6px;
	width: calc(100% - 12px);
	height: 1px;
	background-color: var(--base);
}
.bdCircle::after{
	content: "";
	display: block;
	position: absolute;
	/*bottom: min(min(13.3vw, 100px) / 2, 50px);*/
	bottom: 0;
	inset-inline: 0px;
	width: 100%;
	height: 12px;
	background: url(images/bg_circle.svg) no-repeat left center / 12px 12px, url(images/bg_circle.svg) no-repeat right center / 12px 12px;
}

@media screen and (min-width: 781px) {
	.h2Tit{
		margin-bottom: 1em;
		font-size: min(3vw, 2.4rem);
	}	
	.h2Tit .en{
		font-size: min(5.6vw, 4.5rem);
	}
	h2:has(.bdCircle){
		padding-bottom: 1em;
	}
	.h3Tit{
		font-size: min(2.6vw, 2.0rem);
	}
} /* -PC only- */

.h3Tit2{
	width: min(94%, calc(960px + 1.8em * 2));
	margin-top: min(25.6vw, 160px);
	margin-inline: auto;
	margin-bottom: 2em;
	letter-spacing: 0;
	font-weight: 700;
}
.h3Tit2 span{
	position: relative;
	display: inline-flex;
	padding-inline: 1.8em;
	align-items: center;
	color: #ffffff;
  z-index: 1;
}
.h3Tit2 span::before{
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--main);
	z-index: -1;
	transform: skewX(-9.56deg);
	transition: all 0.3s;
}
@media screen and (max-width: 780px) {
	.h3Tit2{
		margin-top: min(18vw, 140px);
		width: 87.2%;
		font-size: min(5.6vw, 3rem);
	}
	.h3Tit2 span{
		min-width: min(80vw, 477px);
		min-height: min(2.8em, 83px);
    padding-inline: 1.2em;
	}
} /* -SP- */
@media screen and (min-width: 781px) {
	.h3Tit2{
		font-size: min(4.9vw, 3.0rem);
		margin-top: 100px;
	}
	.h3Tit2 span{
		min-width: min(64.5vw, 402px);
		min-height: min(2.8em, 86px);
	}
} /* -PC only- */

.btn{
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: min(100%, 310px);
	background-color: var(--gray);
	line-height: 1.25em;
	letter-spacing: 0.05em;
}
.btn:not(:has(span)){
	padding: 1em;
}
.btn:not(:has(span)):not(.resultDisp)::after {
	content: "";
	position: absolute;
	display: block;
	right: 1em;
	width: 12px;
	aspect-ratio: 1 / 1;
	background: url(images/ic_arrow_white.svg) no-repeat center center / 100% auto;
}
.btn:has(span){
	width: 266px;
	height: 50px;
}
.btn > span{
	width: calc(100% - 60px);
	display: grid;
	place-content: center;
}
.btn:has(span)::after{
	content: "";
	display: block;
	width: 48px;
	aspect-ratio: 1 / 1;
}
.btn.arrow{
	background-color: #ffffff;
	border: 2px solid var(--base);

	color: var(--base);
}
.btn.arrow::after{
	background: url(images/ic_arrow_lightgray.svg) no-repeat center center / 23px 25px;
	border-left: 2px solid var(--base);
}
.btn.download{
	background-color: var(--base);
	border: 2px solid var(--base);
	color: #ffffff;
  font-size: 1.4rem;
}
.btn.download::after{
	background: url(images/ic_download.svg) no-repeat center center / 14px 18px;
	border-left: 2px solid var(--gray);
}
.btn.download + .btn.download{
  margin-left: 10px
}
.btn.arrow.black{
	background-color: var(--base);
	border: 2px solid var(--base);
	color: #ffffff;
	transition: all 0.3s;
}
.btn.arrow.black::after{
	border-left: 2px solid #ffffff;
}
.btn.arrow.black:hover{
	background-color: #ffffff;
	color: var(--base);
}
.btn.arrow.black:hover::after{
	border-left: 2px solid var(--base);
}
@media screen and (max-width: 780px) {

	.btn:has(span){
		width: min(80%, 332px);
		height: 36px;
	}	
  .btn:has(span)::after{
    width: 36px
  }
  .btn > span {
  width: calc(100% - 36px);
  }
} /* -SP- */



/* =======================================
		top
========================================== */
#top main::before{
	content: "";
	display: block;
	position: fixed;
	inset: 0;
	width: 100%;
		height: 100%;
	background: url(images/bg_sp.png) repeat-y center center / 100% auto;
	z-index: -1;
}
@media screen and (min-width: 781px) {
	#top main::before{
		background: url(images/bg.png) repeat-y center center / max(100%, 1920px) auto;
		z-index: -1;
	}	
} /* -PC only- */


/*	#mv
-----------------------------*/
#video-container {
	position: relative;
	width: 100%;
	background-color: #ffffff;
	font-size: 0;
}

#video {
	width: 100%;
	height: 100%;
	/*max-height: calc(100vh - 122px);*/
	object-fit: cover;
}

.controls-wrap {
	margin: 0 auto;
 /* width: calc(100% - min(16.5vw, 316px) - min(29vw, 290px));*/
 width:min(98%, 1446px);
	position: absolute;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
}

.controls {
	display: flex;
	justify-content: flex-end;
	padding-left: 4%;
	padding-right: 4%;
}

.control-button {
	font-size: 15px;
	width: 30px;
	aspect-ratio: 1 / 1;
	cursor: pointer;
	margin: 0 5px;
	color: black;
	background: #ffffff;
	opacity: 0.5;
	border-radius: 15px;
	text-align: center;
}

.control-button:hover {
	color: gray;
}

.control-button li {
	min-width: 1.2em;
}

/* スマートフォンや小さな画面用 */
@media (max-width: 780px) {
	#video-container{
	}
	#video-container video {
		display: none;
	}
	#video-container video#video-sp {
		display: block;
		width: 100%;
		max-height: calc(100vh - 120px);
		object-fit: cover;
	}

	.controls-wrap {
		position: relative;
		padding: 15px;
		bottom: 0;
		top: auto;
		left: 0;
		right: 0;
		background-color: #ffffff;
		transform: none;
	}

	.controls {
		justify-content: center;
	}
}
@media (max-width: 780px) and (orientation: landscape) and (max-height: 500px) {
	#video-container{
		aspect-ratio: 64 / 25;
	}
	#video-container video#video {
		display: block;
	}
	#video-container video#video-sp {
		display: none;
	}
}
@media (min-width: 781px) {
	#video-container{
		aspect-ratio: 64 / 25;
	}
}



/*	#topSeihin
-----------------------------*/
#topSeihin{
	background-color: var(--main_l);
	padding-block: min(12vw,72px) min(20vw, 122px);
}
#topSeihin h2.bdCircle{
	padding-bottom: min(10.25vw, 64px);
}

@media screen and (max-width: 780px) {
	#topSeihin .h2Tit .en{
		font-size: min(7.5vw, 5.6rem);
	}	
} /* -SP- */
@media screen and (min-width: 781px) {
	#topSeihin{
		margin-bottom: 480px;
		padding-block: 100px 140px;
	}
	#topSeihin h2.bdCircle{
		padding-bottom: min(5vw, 40px);
	}
	
} /* -PC only- */


/*	.topContents
-----------------------------*/
.topContents{
	background-color: var(--main_l);
	padding-block: min(22.9vw, 143px) min(13.5vw, 84px);
}
@media screen and (min-width: 781px) {
.topContents{
	padding-block: 100px min(20vw, 192px);
}
	
} /* -PC only- */


/*	#topService
-----------------------------*/
.topServiceBox{
	display: block;
	width: min(85.312vw, 1310px);
	margin-inline: auto;
}
.topServiceBox + .topServiceBox{
	margin-top: min(16.4vw, 102px);
}
.topServiceBox .txts{
	background: transparent;
	position: relative;
	display: block;
	width: min(92%, 558px);
	padding-block: min(5.87vw, 44px) min(5.6vw, 41px);
  padding-right: min(2.93vw, 22px);
	z-index: 1;
}
.topServiceBox .txts::before{
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--base);
	/*
	clip-path: polygon(82px 0%, 0% 100%, calc(100% - 82px) 100%, 100% 0%);
	*/
	transform: skewX(-9.65deg);
	z-index: 0;
	transition: all 0.3s;
}
.topServiceBox .txts .txtsInner{
	position: relative;
	width: min(52%, 279px);
  margin-inline: auto;
	z-index: 1;
}
.topServiceBox .txts .txtsInner h2{
	margin-bottom: 0.5em;
	color: #ffffff;
	transition: all 0.3s;
	line-height: 1.5em;
}
.topServiceBox .txts .txtsInner p{
	color: #ffffff;
	transition: all 0.3s;
}
.topServiceBox .txts .txtsInner p:not(.btnWrap){
	font-size: 1.8rem;
}
.topServiceBox .txts .txtsInner .btn{
	padding: 1.25em 1em;
	transition: all 0.3s;
}

.topServiceBox figure{
	clip-path: polygon(82px 0%, 0% 100%, calc(100% - 82px) 100%, 100% 0%);
}

@media screen and (max-width: 780px) {
  .topServiceBox{
    width: 92%;
  }
	.topServiceBox .txts{
		margin-left: 4vw;
  }
	/*
  .topServiceBox .txts::before{
    clip-path: polygon(6.3% 0%, 0% 100%, calc(100% - 6.3%) 100%, 100% 0%);
  }*/
  .topServiceBox figure{
		clip-path: polygon(6.3% 0%, 0% 100%, calc(100% - 6.3%) 100%, 100% 0%);
	}
	.topServiceBox .txts .txtsInner h2{
		font-size: min(3.1vw, 2.43rem);
		letter-spacing: 0.05em;
	}
	.topServiceBox .txts .txtsInner h2 .en{
		font-size: min(5.5vw, 4.3rem);
	}
	.topServiceBox .txts .txtsInner p:not(.btnWrap){
		min-height: 2.53em;
		font-size: min(2.6vw, 1.62rem);
    letter-spacing: 0em;
	}
	.topServiceBox .txts .txtsInner .btnWrap{
		margin-top: min(2.56vw, 20px);
	}
	.topServiceBox .txts .txtsInner .btnWrap .btn{
		padding: 1em 1em;
		font-size: min(2.3vw, 1.8rem);
	}
	.topServiceBox figure{
		width: 89%;
		margin-top: -13.4px;
		margin-left: auto;
	}
} /* -SP- */
@media screen and (min-width: 781px) {
	.topServiceBox{
		position: relative;
	}
	.topServiceBox + .topServiceBox{
		margin-top: 174px;
	}
	.topServiceBox .txts{
		margin: 0 auto auto 0;
		width: calc(802 / 1638 * 100% );
		/*width: 802px;*/
		padding-block: min(7.17vw, 68px) min(6.33vw, 60px);
		padding-right: min(2.76vw, 53px);
	}
	.topServiceBox:nth-of-type(even) .txts{
		margin: 0 0 auto auto;
	}
	.topServiceBox .txts .txtsInner{
		width: min(76%, 310px);
		height: 100%;
		padding-bottom: min(7.5vw, 72px);
	}
	.topServiceBox .txts .txtsInner p:not(.btnWrap){
		min-height: 94px;
		font-size: 1.4rem;
	}
	.topServiceBox .txts .txtsInner .btnWrap{
		position: absolute;
		inset: auto 0 0 0;
	}
	.topServiceBox figure{
		position: absolute;
		inset-block: 56px -56px;
		inset-inline: auto 0;
		width: min(100%, 815px);
		height: 386px;
		/*width: calc(1019 / 1638 * 100%);
		width: 1019px;
		aspect-ratio: 1019 / 482;*/
		overflow: hidden;
	}
	.topServiceBox figure img{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.topServiceBox:hover figure img{
		transform: scale(1);
		transition: all 0.3s;
	}
	.topServiceBox:nth-of-type(even) figure{
		inset-inline: 0 auto;
	}

	.topServiceBox:hover{
		opacity: 1;
	}
	.topServiceBox:hover .txts::before{
		background-color: #ffffff;
	}
	.topServiceBox:hover .txts .txtsInner h2{
		color: var(--base);
	}
	.topServiceBox:hover .txts .txtsInner p:not(.btnWrap){
		color: var(--base);
	}
	.topServiceBox:hover .txts .txtsInner .btn{
		background-color: var(--main);
	}
	.topServiceBox:hover figure img{
		transform: scale(1.1);
		transition: all 0.3s;
	}
}/* //end for PC */


/*	#topTopics
-----------------------------*/
#topTopics{
	margin-block: min(26.9vw, 202px) min(20.8vw, 156px);
}
#topTopics .topicsList{
	margin-top: min(8vw, 60px);
}
@media screen and (min-width: 781px) {
#topTopics{
	margin-block: 100px min(7.9vw, 121px);
	padding-block: 80px 0;
}
#topTopics .topicsList{
	margin-top: 60px;
}
	
} /* -PC only- */


/*	#topCookie
-----------------------------*/
#topCookie{
	position: fixed;
	inset: auto 0 0 0;
	bottom: 0;
	z-index: 4000;
	width: 100%;
	background-color: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(3px);
	padding: 0 15px;
	box-shadow: 0px -9px 26px -13px rgba(0, 0, 0, 0.35);
	display: none;
}
#topCookie.is-show{
	display: block;
}
#topCookie.cc-hide1 {
    display: none !important;
}
#topCookie .inner{
	padding: 30px 0;
}
#topCookie .inner h2{
	margin-bottom: 0.5em;
	font-size: 14px;
	font-weight: bold;
}

#topCookie .flex{
	gap: 30px;
}
#topCookie .inner .txts p{
	font-size: 12px;
}
#topCookie .inner .cookieAgreeBtn{
	display: inline-block;
	padding: 0.4em 0.5em;
	background-color: var(--main);
	color: #fff;
	width: 100px;
	text-align: center;
	font-weight: bold;
}
#topCookie .inner .cookieAgreeBtn:hover{
}

@media screen and (max-width: 780px) {
	#topCookie .txts{
		width: 100%;
	}
	#topCookie .cookieAgree{
		width: 100%;
		text-align: right;
	}	
} /* -SP- */
@media screen and (min-width: 781px) {
	#topCookie .txts{
		flex: 1;
	}
	#topCookie .cookieAgree{
		width: 100px;
	}	
} /* -PC only- */


/*	.bottomContactWrap
-----------------------------*/
.bottomContactWrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 37px min(7%, 67px);
	margin-top: min(16.7vw, 104px);
}
.bottomContactWrap a{
	display: grid;
	place-content: center;
	background-color: var(--base);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-align: center;
	color: #ffffff;
	transition: all 0.3s;
  line-height: 1;
  padding-top: 1.2rem
}
.bottomContactWrap a.bottomEvaluation{
	letter-spacing: 0.24em;	
}
.bottomContactWrap a.bottomEvaluation .en{
	letter-spacing: 0.05em;	
}
.bottomContactWrap a .en{
	display: grid;
	place-content: center;
	min-height: 2.6em;
	font-size: 0.48em;
	font-weight: 500;
	line-height: 1.3em;
}

@media screen and (max-width: 780px) {
	.bottomContactWrap a{
		width: min(100%, 435px);
		height: 110px;
		font-size: min(5.87vw, 2.6rem);
	}	
	.bottomContactWrap a .en{
		font-size: 1.2rem;
	}

} /* -SP- */
@media screen and (min-width: 781px) {	
	.bottomContactWrap a{

		height: 110px;
		flex: 1;		
		font-size: 3.3rem;
	}
	.bottomContactWrap a .en{
		font-size: 1.6rem;
	}

	.bottomContactWrap a:hover{
		background-color: #ffffff;
		color: var(--main);
		opacity: 1;
	}
} /* -PC only- */


/* =======================================
	 .pgs	main common
========================================== */
.pgs main{
	background-color: var(--main_l);
	padding-bottom: min(30.8vw, 192px);
}

.mainTitle{
	display: block;
	width: min(94%, 1100px);
	margin-inline: auto;
}
.mainTitle:not(:has(figure)){
	width: min(94%, 960px);
}
.mainTitle .txts{
	background: transparent;
	position: relative;
	display: grid;
	align-items: center;
	padding-block: min(5.87vw, 35px) min(5.6vw, 33px);
  padding-right: min(2.93vw, 22px);
	z-index: 1;
}
.mainTitle .txts:not(:has(+figure)){
	width: calc(100% - 6.6%);
}
.mainTitle .txts::before{
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--main);
	z-index: 0;
	transition: all 0.3s;
}
.mainTitle .txts:not(:has(+figure))::before{
	transform: skewX(-9.41deg);
}
.mainTitle .txts:has(+figure)::before{
	left: 5.5%;
	transform: skewX(-9.65deg);
}
.mainTitle .txts .txtsInner{
	position: relative;
	width: min(64%, 306px);
  margin-inline: auto;
	z-index: 1;
}
.mainTitle .txts .txtsInner h2{
	color: #ffffff;
	transition: all 0.3s;
}
.mainTitle .txts .txtsInner h2.h2Tit:not(:has(+ p)){
	margin-bottom: 0;
}
.mainTitle .txts .txtsInner h2:has(p){
	margin-bottom: 2em;
}
.mainTitle .txts .txtsInner h2 .en{
	margin-bottom: 0.2em;
}
.mainTitle .txts .txtsInner p{
	color: #ffffff;
	transition: all 0.3s;
}
.mainTitle .txts .txtsInner .btn{
	transition: all 0.3s;
}
@media screen and (max-width: 780px) {
	.mainTitle{
		position: relative;
		margin-bottom: min(5.1vw, 40px);
		padding-block: min(6.5vw, 51px) min(5.1vw, 40px);
	}
	.mainTitle .txts{
		margin-left: 4vw;
	}
	.mainTitle .txts:not(:has(+figure)){
		padding-block: min(8.46vw, 66px);
		padding-right: 0;
	}
	.mainTitle .txts:has(+figure){
		width: min(78%, 501px);
		min-height: min(38.6vw, 301px);
	}
	.mainTitle .txts:not(:has(+figure)) .txtsInner{
		width: auto;
	}
	.mainTitle .txts .txtsInner h2{
		font-size: min(2.82vw, 2.2rem);
	}
	.mainTitle .txts .txtsInner h2 .en{
		font-size: min(5.64vw, 4.4rem);
	}
	.mainTitle .txts .txtsInner p:not(.btnWrap){
		min-height: 2.53em;
		margin-right: -4em;
		font-size: min(2.8vw, 1.6rem);
	}
	.mainTitle .txts .txtsInner .btnWrap{
		margin-top: 20px;
	}
	.mainTitle figure{
		width: min(71.8vw, 560px);
		margin-top: -5%;
		margin-left: auto;
	}
} /* -SP- */
@media screen and (min-width: 781px) {
	.mainTitle{
		position: relative;
		margin-bottom: 60px;
		padding-block: 68px 60px;
	}
 .mainTitle:not(:has(figure)){
		margin-bottom: 0px;
}
	.mainTitle .txts{
		margin: 0 auto auto 0;
		max-height: 385px;
		padding-right: min(2.76vw, 43px);
	}
	.mainTitle .txts:has(+figure){
		width: min(max(376px, 49%), 802px);
		padding-block: 5vw;
	}
	.mainTitle .txts:has(+figure){
	}
	.mainTitle .txts:not(:has(+figure)){
		margin: 0 auto;
		min-height: 144px;
	}	
    #env .mainTitle .txts:has(+figure){
		width: min(52%, 802px);
	}
	.mainTitle:nth-of-type(even) .txts{
		margin: 0 0 auto auto;
	}
	.mainTitle .txts .txtsInner{
		width: auto;
	}
	.mainTitle .txts:not(:has(+figure)) .txtsInner{
		margin-left: 12.5%;
	}
	.mainTitle .txts:has(+figure) .txtsInner{
		margin-left: 18%;
	}
	.mainTitle .txts .txtsInner h2{
		font-size: min(2.3vw, 2.2rem);
	}
	.mainTitle .txts .txtsInner h2 .en{
		font-size: min(5vw, 4.8rem);
	}
	.mainTitle .txts .txtsInner p:not(.btnWrap){
		font-size: min(2.3vw, 1.4rem);
	}
	.mainTitle figure{
		position: absolute;
		inset: auto 0 0 auto;
		width: min(62.2%, 815px);
		height: auto;
		/*clip-path: polygon(82px 0%, 0% 100%, calc(100% - 82px) 100%, 100% 0%);
		overflow: hidden;*/
	}
}/* //end for PC */

/*	.breadcrumb
-----------------------------*/
.breadcrumb li{
	display: inline-block;
	font-size: min(3.3vw, 1.4rem);
}
.breadcrumb li + li::before{
	content: "\3009";
	margin-inline: 1em;
}

/*	anchorLinks
-----------------------------*/
.anchorLinksWrap.bdCircle{
  margin-top: 35px;
	padding-top: 35px;
}
.anchorLinksWrap.bdCircle::before{
	bottom: auto;
	top: 6px;
}
.anchorLinksWrap.bdCircle::after{
	bottom: auto;
	top: 0px;
}
.anchorLinks{
	flex-wrap: wrap;
}
.anchorLinks li a{
	display: flex;
	align-items: center;
	background-color: var(--base);
	color: #ffffff;
	line-height: 1.33em;
}
.anchorLinks li a > span{
	width: calc(100% - min(26.5%, 100px));
}
.anchorLinks li a .blue{
	color: #00afff;
}
.anchorLinks li a::after{
	content: "";
	display: block;
	height: 100%;
}
@media screen and (max-width: 780px) {
	.anchorLinks{
		gap: 20px 3.8%;
	}
	.anchorLinks li{
		width: min(100%, 378px);
		width: var(--flexChildCol2);
	}	
	.anchorLinks li a{
		height: min(14.4vw, 112px);
		padding-left: 15px;
		font-size: min(3.2vw,1.6rem);
	}
	.anchorLinks li a::after{
		width: min(25.8%, 84px);
		background: url(images/ic_arrow_lightgray_down.svg) no-repeat center center / min(4.87vw, 38px) min(4.49vw, 35px);
	}
} /* -SP- */
@media screen and (min-width: 781px) {
	.anchorLinksWrap.bdCircle{
		margin-top: 52px;
		padding-top: 52px;
	}
	.anchorLinks{
		gap: 30px 3%;
	}
	.anchorLinks li{
		width: var(--flexChildCol3);
	}
	.anchorLinks li a{
		height: 80px;
		padding-left: min(9.3%, 28px);
		font-size: min(3vw,1.9rem);
	}
	.anchorLinks li a::after{
		width: min(26.5%, 80px);
		background: url(images/ic_arrow_lightgray_down.svg) no-repeat center center / min(5.6vw, 28px) min(5.3vw,26px);
	}
} /* -PC only- */

/* anchorLinks fixed */
.anchorLinks.js-scrollfixed.fixed{
 position: fixed;
 left: 0;
 justify-content: center;
 gap:0.5em 1em;
 background: rgba(51, 51, 51, 0.9);
 width: 100%;
 padding: 10px 2%;
 z-index: 99;
 opacity: 0;
 animation: fadeIn 0.4s ease forwards;/*animation-delay: 1s;*/
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.anchorLinks.js-scrollfixed.fixed li{
 width: auto;
}
.anchorLinks.js-scrollfixed.fixed li a{
 background: none;
 height: auto;
 padding: 0.5em 0;
 font-size: min(2.9vw,1.4rem);
}
body:not(#seihin) .anchorLinks.js-scrollfixed.fixed li a {
	gap:0 .6em;
}

.anchorLinks.js-scrollfixed.fixed li a > span{
 width: auto;
}
	.anchorLinks li a::after{
		width: 1em;
  height: 1.2em;
		background-size:100% 100%;
	}
@media screen and (max-width: 780px) {/* SP */
.anchorLinks.js-scrollfixed.fixed{
 top:max(14.7vw, 60px);
}
}/*-SP only-*/
@media (max-width: 780px) and (orientation: landscape) and (max-height: 500px) {
	.anchorLinks.js-scrollfixed.fixed{
		top: 60px;
	}
	.anchorLinks.js-scrollfixed.fixed li a{
		padding: 0;
		font-size: 1.16rem;
	}
}
@media screen and (min-width: 781px) {/* PC */
.anchorLinks.js-scrollfixed.fixed{
 top: 62px;
}
.anchorLinks.js-scrollfixed.fixed li a{
 font-size: min(1.1vw,1.4rem);
}
 .anchorLinks.js-scrollfixed.fixed li a br{
  display: none;
 }

}/*-PC only-*/
/* basicTable */
.basicTable{
	background: #ffffff;
	border-top: 2px solid #000000;
	border-bottom: 2px solid #000000;
	width: 100%;
}
.basicTable th{
	width: min(30%, 230px);
	padding: 30px min(2.6vw, 20px);
	background: #f7f8f8;
	border-bottom: 1px solid #000000;
	text-align: left;
	vertical-align: middle;
}
.basicTable td{
	padding: 30px min(3.9vw, 30px) 30px min(4.5vw, 40px);
	border-bottom: 1px solid #000000;
}


/*-- dlTable --*/
.dlTable{
	background: #ffffff;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
	border-top: 1px solid #c2c2c2;
}
.dlTable > dt{
	border-bottom: 1px solid #c2c2c2;
	display: flex;
	align-items: center;
}
.dlTable > dd{
	border-bottom: 1px solid #c2c2c2;
	display: grid;
	align-items: center;
}
.dlTable > dd p:has(+ input){
	margin-bottom: 1em;
}
.dlTable > dd input + p,
.dlTable > dd textarea + p{
	margin-top: 1em;
}
.dlTable > dd input[type="text"],
.dlTable > dd input[type="email"],
.dlTable > dd textarea{
	width: 100%;
	border: 1px solid #d6d6d6;
	padding: 1em 0.5em;
	border-radius: 5px;
	line-height: 1.8em;
}
.dlTable > dd input[type="file"]{
	width: 100%;
}
.dlTable a{
	text-decoration: underline;
}
.dlTable a:hover{
 text-decoration: none;
}

.formTable{
	background: #ffffff;
	border-top: 1px solid #c2c2c2;
 width: 100%;
}
.formTable th,
.formTable td{
	border-bottom: 1px solid #c2c2c2;
 font-weight: 400;
 text-align: left;
 vertical-align: middle;
}
/*confirmMain .formTable tr:last-child{
  display: none;
}*/

@media screen and (max-width: 780px) {	
	.dlTable{
		border-bottom: none;
	}
	.dlTable >dt,
 .formTable th{
		border-bottom: none;
		padding: 1em 2.9%;
		width: 100%;
	}
	.dlTable >dd,
 .formTable td{
		padding: 0 2.9% 3.8vw;
		width: 100%;
	}
	.dlTable > dt,
	.dlTable > dd p,
	.dlTable > dd input,
	.dlTable > dd textarea{
		font-size: min(3.7vw, 1.4rem);
	}
 
 
 .formTable tr,
 .formTable th,
 .formTable td,
 .formTable tbody{
  display: block;
 }
 .formTable th,
	.formTable td p,
	.formTable td input,
	.formTable td textarea{
		font-size: min(3.7vw, 1.4rem);
	}
} /* -SP- */
@media screen and (min-width: 781px) {	
	/*-- table --*/
	.dlTable >dt,
 .formTable th{
		padding: 12px 2%;
		width: 29.2%;
	}
	.dlTable >dd,
 .formTable td{
		padding: 20px 2%;
		width: calc(100% - 29.2%);
	}
	.dlTable >dt:last-of-type,
 .formTable tr:last-of-type th{
		border-bottom: none;
	}
	.dlTable >dd:last-of-type,
 .formTable tr:last-of-type td{
		border-bottom: none;
	}
	.dlTable > dt,
	.dlTable > dd p,
	.dlTable > dd input,
	.dlTable > dd textarea,
 .formTable th,
 .formTable td,
 .formTable td p,
 .formTable td input,
 .formTable td textarea{
		font-size: 1.4rem;
	}
} /* -PC only- */


/*	tab
-----------------------------*/
#tabArea{
	width: 100%;
	
}
.tabBtn{
	display: flex;
	flex-wrap: wrap;
	gap: min(2.05vw, 16px) min(2vw, 20px);
}
.tabBtn li a{
	display: block;
	padding: 0.7em 0.2em;
	background-color: #d1d3d3;
	font-weight: 500;
	line-height: 1em;
	color: var(--base);
	text-align: center;
}
.tabBtn li.active a{
	background-color: var(--main);
	color: #ffffff;
}
.tabConts{
	margin-top: min(3.85vw, 30px);
	border: 0.5px solid #9fa0a0;
}
.tabContBox iframe{
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1196 / 590;
}
@media screen and (max-width: 780px) {	
	.tabBtn li{
		width: calc((100% - min(2vw, 20px) * 1) / 2);
	}
	.tabBtn li a{
		font-size: min(4.2vw, 2rem);
	}
} /* -SP- */
@media screen and (min-width: 781px) {
	.tabBtn li{
		width: calc((100% - min(2vw, 20px) * 3) / 4);
	}
	.tabBtn li a{
		font-size: min(2.5vw, 2.0rem);
	}
} /* -PC only- */


/*	imgTxtList
-----------------------------*/
.imgTxtList{

}
.imgTxtList li{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 4.9%;
}
.imgTxtList li figure{
}
.imgTxtList li p{
	flex: 1;
}
@media screen and (max-width: 780px) {
	.imgTxtList li + li{
		margin-top: min(8.6vw, 67px);
	}
	.imgTxtList li p {
		font-size: min(4.2vw, 2rem);
		line-height: 1.6;
	}
} /* -SP- */
@media screen and (min-width: 781px) {
	.imgTxtList li + li{
		margin-top: 58px;
	}
	.imgTxtList li figure{
		width: 205px;	
	}
	.imgTxtList li p{
		font-size: min(4.6vw, 2.0rem);
		line-height: 2;
	}
} /* -PC only- */


/* =======================================
		top / seihin
========================================== */
.seihinListWrap{
	margin-top: min(11.5vw,90px);
}
.seihinList{
	display: flex;
	flex-wrap: wrap;
}
.seihinList li{
	aspect-ratio: 1 / 1;
}
.seihinList li a{
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	background-color: var(--base);
	transition: all 0.3s;
}
.seihinList li figure{
	width: 100%;
	aspect-ratio: 376 / 292;
	transition: all 0.3s;
}
.seihinList li div{
	flex-grow: 1;
	display: grid;
	place-content: center;
	font-size: min(2.56vw, 1.6rem);
	line-height: 1.25em;
	text-align: center;
	color: #ffffff;
	transition: all 0.3s;
}
@media screen and (max-width: 780px) {
	.seihinList{
		gap: var(--flexGapSP);
	}
	.seihinList li{
		width: var(--flexChildCol2);
	}
} /* -SP- */
@media screen and (min-width: 781px) {
	.seihinListWrap{
		margin-top:/* min(7.5vw, 72px)*/0;
	}
	.seihinListWrap:nth-of-type(1){
		margin-top:/* min(8.83vw, 85px)*/0;
	}
 .seihinListWrap h3{
  margin-top:50px;
 }
	.seihinList{
		gap: var(--flexGapPC);
	}
	.seihinList li{
		width: var(--flexChildCol3);
	}
	.seihinList li div{
		font-size: min(1.66vw, 1.6rem);
	}

	.seihinList li a:hover{
		background-color: #ffffff;
		opacity: 1;
	}
	.seihinList li a:hover figure{
		overflow: hidden;
		/*opacity: 0.6;*/
	}
	.seihinList li a:hover figure img{
		transform: scale(1.1);
		transition: all 0.3s;
	}
	.seihinList li a:hover div{
		color: var(--main);
	}
}/* //end for PC */


/* =======================================
		seihin
========================================== */

/*	seihinHead
-----------------------------*/
.seihinHead .btnWrap{
	text-align: right;
}
.seihinHead .btnWrap .btn{
	margin-left: auto;
}
@media screen and (max-width: 780px) {
	.seihinHead{
		margin-top: 40px;
	}
	.seihinHead .btnWrap .btn:has(span){
		width: min(60.5vw, 277px);
		height: min(12.7vw, 68px);
	}
	.seihinHead .btnWrap .btn:has(span)::after{
		background-size: min(4.49vw, 24px) min(4.86vw, 26px);
		width: min(12.7vw, 68px);
		height: 100%;

	}
} /* -SP- */
@media screen and (min-width: 781px) {
	.seihinHead .inner{
		position: relative;
	}
	.seihinHead .btnWrap{
    position: absolute;
    top: calc(-65px - 1.7em);
    right: 0;
    display: inline-block;
	}	
} /* -PC only- */


/*	.seihinInfoBox
-----------------------------*/
@media screen and (max-width: 780px) {
	.seihinInfoBox{
		padding-top: min(25.64vw, 200px);
	}
} /* -SP- */
@media screen and (min-width: 781px) {
	.seihinInfoBox{
		padding-top: 150px;
	}
} /* -PC only- */

/*	.seihinInfoTitle
-----------------------------*/
.seihinInfoTitle .txts h4{
	 font-size: min(5.12vw, 3.2rem);
	font-weight: 500;
	letter-spacing: 0.05em;
	color: #ffffff;
}
.seihinInfoTitle .txts p{
	font-weight: 400;
	letter-spacing: 0.03em;
	line-height: 1.7em;
	color: #ffffff;
}
@media screen and (max-width: 780px) {
	#seihinInfo01 .seihinInfoTitle{
		background: url(images/seihin_info01_bg_subtitle_sp.jpg) no-repeat center center / cover;
	}
	#seihinInfo02 .seihinInfoTitle{
		background: url(images/seihin_info02_bg_subtitle_sp.jpg) no-repeat center center / cover;
	}
	#seihinInfo03 .seihinInfoTitle{
		background: url(images/seihin_info03_bg_subtitle_sp.jpg) no-repeat center center / cover;
	}
	#seihinInfo04 .seihinInfoTitle{
		background: url(images/seihin_info04_bg_subtitle_sp.jpg) no-repeat center center / cover;
	}
	#seihinInfo05 .seihinInfoTitle{
		background: url(images/seihin_info05_bg_subtitle_sp.jpg) no-repeat center center / cover;
	}
	#seihinInfoOther01 .seihinInfoTitle{
		background: url(images/seihin_info_other01_bg_subtitle_sp.jpg) no-repeat center center / cover;
	}
	#seihinInfoOther02 .seihinInfoTitle{
		background: url(images/seihin_info_other02_bg_subtitle_sp.jpg) no-repeat center center / cover;
	}
	#seihinInfoOther03 .seihinInfoTitle{
		background: url(images/seihin_info_other03_bg_subtitle_sp.jpg) no-repeat center center / cover;
	}
	.seihinInfoTitle .txts{
		width: min(90%, 540px);
		margin-inline: auto;
		padding-block: min(6.2vw, 48px) min(4.5vw, 35px);
	}
	.seihinInfoTitle .txts h4{
		margin-bottom: 0.2em;
	}
	.seihinInfoTitle .txts p{
		font-size: min(3.2vw, 1.4rem);
	}
	.seihinInfoTitle figure{
		width: min(55.9vw, 436px);
		margin-inline: auto;
		margin-block: 0 max(-16.54vw, -129px);
		transform: translateY(max(-16.54vw, -129px));
	}
} /* -SP- */
@media screen and (min-width: 781px) {
	#seihinInfo01 .seihinInfoTitle{
		background: url(images/seihin_info01_bg_subtitle.jpg) no-repeat center center / cover;
	}
	#seihinInfo02 .seihinInfoTitle{
		background: url(images/seihin_info02_bg_subtitle.jpg) no-repeat center center / cover;
	}
	#seihinInfo03 .seihinInfoTitle{
		background: url(images/seihin_info03_bg_subtitle.jpg) no-repeat center center / cover;
	}
	#seihinInfo04 .seihinInfoTitle{
		background: url(images/seihin_info04_bg_subtitle.jpg) no-repeat center center / cover;
	}
	#seihinInfo05 .seihinInfoTitle{
		background: url(images/seihin_info05_bg_subtitle.jpg) no-repeat center center / cover;
	}
	#seihinInfoOther01 .seihinInfoTitle{
		background: url(images/seihin_info_other01_bg_subtitle.jpg) no-repeat center center / cover;
	}
	#seihinInfoOther02 .seihinInfoTitle{
		background: url(images/seihin_info_other02_bg_subtitle.jpg) no-repeat center center / cover;
	}
	#seihinInfoOther03 .seihinInfoTitle{
		background: url(images/seihin_info_other03_bg_subtitle.jpg) no-repeat center center / cover;
	}
	.seihinInfoTitle > .inner{
		display: flex;
		width: min(94%, 1040px);
		padding-left: min(2.6vw, 40px);
		gap: 0 1.2%;
	}
	.seihinInfoTitle .txts{
		flex: 1;
		padding-block: 40px;
	}
	.seihinInfoTitle .txts h4{
		margin-bottom: 1em;
   
	}
	.seihinInfoTitle .txts p{
		font-size: min(2.5vw, 1.6rem);
	}
	.seihinInfoTitle figure{
		margin-block: max(-4.8vw, -56px) min(4.8vw, 56px);
		width: 44.6%;
	}	
} /* -PC only- */

/*	.seihinInfoUse
-----------------------------*/
.seihinInfoUse{
	padding-block: min(15.4vw, 96px);
}
@media screen and (max-width: 780px) {
	.seihinInfoUse figure{
		margin-top: 30px;
		width: 100%;
	}
	.seihinInfoUse .txts p{
		font-size: min(3.6vw, 2.0rem);
	}	
} /* -SP- */
@media screen and (min-width: 781px) {
	.seihinInfoUse .pcFlex{
		justify-content: space-between;
	}
	.seihinInfoUse figure{
		width: 56%;
	}	
	.seihinInfoUse figure img{
		border-radius: 20px;
	}	
	.seihinInfoUse .txts{
		width: 30%;
	}	
	.seihinInfoUse .txts p{
		font-size: min(2.1vw, 2.0rem);
	}	
} /* -PC only- */

/*	.seihinInfoSpec
-----------------------------*/
.seihinInfoSpec .flex:has(h5){
	justify-content: space-between;
	align-items: center;
}
.seihinInfoSpec .bdCircle:has(h5) .h5Tit{
	margin-bottom: 0;
}
@media screen and (max-width: 780px) {
	.seihinInfoSpec .h3Tit{
    font-size: min(4vw, 2.2rem);
	}
	.tableInfo + .h3Tit{
		margin-top: min(10.26vw, 80px);
	}
	.tableInfo + .h3Tit + .h3Tit{
		margin-top: min(9vw, 70px);
	}
	.seihinInfoSpec .flex:has(h5){
		margin-bottom: min(7.7vw, 60px);
	}
	.seihinInfoSpec .btnWrap{
	}
	.seihinInfoSpec .btnWrap .btn:has(span) {
		width: min(61.38vw, 266px);
		height: 48px;
		font-size: min(3.4vw, 12px);
	}
	.seihinInfoSpec .btnWrap .btn span{
		width: calc(100% - 48px);
	}
	.seihinInfoSpec .btnWrap .btn:has(span)::after {
			width: 48px;
	}
} /* -SP- */
@media screen and (min-width: 781px) {
	.seihinInfoSpec .flex:has(h5){
		margin-bottom: 54px;
	}
} /* -PC only- */

/*	tableInfo / tableScrollNone / tableScroll
-----------------------------*/
/* 1. テーブル全体を囲むコンテナに横スクロールを許可 */
.tableInfo {
  overflow-x: auto;
  max-width: 100%; /* 画面幅に応じる */
	padding-bottom: 30px;

	--tableScrollBg01: #a9c0de;
	--tableScrollBg02: #f1f6fb;
}
@media screen and (max-width: 780px) {
	.tableInfo {
		--tableScrollCol1: 70px;
		--tableScrollCol2: 140px;
		--tableScrollTd: 130px;
	}
	.tableScrollNone .col01{ width: var(--tableScrollCol1);	}
	.tableScrollNone .col02{ width: var(--tableScrollCol2);	}
	.tableScrollNone .col03{ width: var(--tableScrollTd);	}
} /* -SP- */
@media screen and (min-width: 781px) {
	.tableInfo {
		--tableScrollCol1: 100px;
		--tableScrollCol2: 177px;
		--tableScrollTd: 140px;
	}
	.tableScrollNone .col01{ width: 100px;	}
	.tableScrollNone .col02{ width: 177px;	}
	.tableScrollNone .col03{ width: auto;	}
} /* -PC only- */

.tableInfo table {
  border-collapse: collapse;
  width: max-content; /* テーブルが潰れないように中身の最大幅を維持 */
	background-color: #f1f6fb;
  border: solid var(--base);
	border-width: 2px 0;
}
.tableInfo table th,
.tableInfo table td {
  border: solid var(--base);
	border-width: 1px 0;
  background-color: #fff; /* スクロールした文字が裏に透けないように背景色は必須 */
	vertical-align: middle;
}
.tableInfo thead tr {
	background-color: var(--tableScrollBg02);
}
.tableInfo thead th:not(:first-child) {
	background-color: var(--tableScrollBg01);
}
.tableInfo thead th:not(:first-child) {
	border: 1px solid var(--base);
	border-width: 0 1px;
}
.tableInfo th.w1em{
	width: 3em;
	text-align: center;
}
.tableInfo thead td {
	background: linear-gradient(to top right, transparent calc(50% - 0.5px), var(--base) calc(50% - 0.5px), var(--base) calc(50% + 0.5px), transparent calc(50% + 0.5px));
  background-color: var(--tableScrollBg02);
}
.tableInfo thead td.wColspan2{
	width: calc(var(--tableScrollCol1) + var(--tableScrollCol2));
}

.tableInfo tbody th {
	background-color: var(--tableScrollBg02);
	text-align: left;
}
.tableInfo tbody th.wColspan2-2{
	width: var(--tableScrollCol2);
}
.tableInfo tbody td {
	background-color: #ffffff;
	border: 1px solid var(--base);
	border-width: 0 1px 1px;
	text-align: center;
}
.tableInfo tbody td:first-of-type:last-of-type{
	width: 100%;
}
.tableInfo tbody tr:nth-of-type(even) td{
	background-color: #f7f7f7;
}
.tableInfo tbody tr:nth-of-type(2n) td.bgW{
  background-color: #ffffff;
}
.tableInfo tbody td.bgG{
  background-color: #f7f7f7;
}
.tableInfo table a{
 color: var(--main);
 text-decoration: underline;
}
/*横スクロールしない*/
.tableScrollNone table {
	table-layout: fixed;
}

@media screen and (max-width: 780px) {
	.tableInfo table th,
	.tableInfo table td{
    padding: 5px;
		font-size: 1.2rem;
	}
	/*列の一部を固定して横スクロール*/
	/* 1. 固定したい列の幅を定義（ここが重要） */
	.tableScroll  + .tableScroll,
	.tableScroll  + .tableScrollNone,
	.tableScrollNone  + .tableScroll,
	.tableScrollNone  + .tableScrollNone  {
		margin-top: 40px;
	}
	.tableScroll table th,
	.tableScroll table td {
		white-space: nowrap;
	}
	.tableScroll thead td.stickyCol1,	
	.tableScrollNone thead td:not(.blankCell) {
		min-width: calc(var(--tableScrollCol1) + var(--tableScrollCol2))
	}
	.tableScrollNone thead td.blankCell {
		min-width: var(--tableScrollCol2);
	}

	.tableScroll tbody th.stickyCol2 {
		border-right: 1px solid var(--base);
	}
	.tableScroll tbody td {
		min-width: var(--tableScrollTd);
	}
	.tableScrollNone table tbody tr:first-of-type,
	.tableScroll table tr:has(.stickyCol1){
		border-top: 2px solid var(--base);
	}

	.tableScrollNone table thead tr > th:last-of-type,
	.tableScrollNone table tbody tr > td:last-of-type{
		border-right: none;
	}

	/*横スクロールしない*/
	.tableScrollNone table {
		width: auto;
		min-width: 490px;
	}
	.tableScrollNone table.tableHasTd7 {
		width: 880px;
	}

	.tableScrollNone table.tableHasTd7:not(:has(td:nth-of-type(7))) + p {
			max-width: none;
			width: 100%;
	}
	.tableScrollNone table.tableHasTd7:not(:has(td:nth-of-type(7))) + p.note {
		position: absolute;
		max-width: none;
		width: 100%;
		font-size: 1.1rem;
	}
} /* -SP- */
@media screen and (min-width: 781px) {
	.tableInfo table th,
	.tableInfo table td{
  	padding: 5px;
	}
  .tableInfo table th{
    padding-left: 10px;
  }
 tbody th.stickyCol1{
  padding-left: 10px;
 }
	/*列の一部を固定して横スクロール*/
	/* 1. 固定したい列の幅を定義（ここが重要） */
	.tableScroll  + .tableScroll,
	.tableScroll  + .tableScrollNone,
	.tableScrollNone  + .tableScroll,
	.tableScrollNone  + .tableScrollNone  {
		margin-top: 60px;
	}
	.tableScroll table th,
	.tableScroll table td {
		white-space: nowrap;   /* セル内で勝手に改行されるのを防ぐ */
	}
	.tableScroll tbody th.stickyCol2 {
		border-right: 1px solid var(--base);
	}
	.tableScroll tbody td {
		min-width: var(--tableScrollTd);
	}
	.tableScrollNone table tbody tr:first-of-type,
	.tableScroll table tr:has(.stickyCol1){
		border-top: 2px solid var(--base);
	}
/*
	.tableScrollNone table thead tr > th:last-of-type,
	.tableScrollNone table tbody tr > td:last-of-type{
		border-right: none;
	}*/

	/* 2. 固定したい列の幅を定義（ここが重要） */
	.tableScroll .stickyCol1 {
		position: sticky;
		left: 0;
		z-index: 2;
		width: calc(var(--tableScrollCol1) + var(--tableScrollCol2));
		min-width: calc(var(--tableScrollCol1) + var(--tableScrollCol2));
	}
	.tableScroll .stickyCol1:has(+ .stickyCol2) {
		width: var(--tableScrollCol1);
		min-width: var(--tableScrollCol1);
	}

	.tableScroll .stickyCol2 {
		position: sticky;
		left: var(--tableScrollCol1); /* 1列目の幅分空ける */
		z-index: 2;
		width: var(--tableScrollCol2);
		min-width: var(--tableScrollCol2);
	}

	/*.tableHasTd7だがtbodyのtdが６つしかない場合*/
	.tableScrollNone table.tableHasTd7:not(:has(td:nth-of-type(7))){
		max-width: calc(100% - ((100% - 3em) / 7));
	}
	.tableScrollNone table.tableHasTd7:not(:has(td:nth-of-type(7))) + p{
		max-width: calc(100% - ((100% - 3em) / 7));
	}

	/* （オマケ）ヘッダーのテキストが上に隠れないようにz-indexを微調整 */
	.tableScroll th {
		z-index: 3; 
	}

	/*横スクロールしない*/
	.tableScrollNone {
		display: inline-block;
	}
	.tableScrollNone table {
		width: 100%;
	}
} /* -PC only- */

/*	spScroll
-----------------------------*/
@media screen and (max-width: 780px) {
	.spScroll{
		width: 100%;
	}
	.spScroll table{
		width: 1000px;
	}
} /* -SP- */

/* =======================================
		other
========================================== */
@media screen and (max-width: 780px) {
	#other .mainTitle .txts .txtsInner h2{
		margin-right: -4vw;
	}
} /* -SP- */

/* =======================================
		top / products
========================================== */
@media screen and (max-width: 780px) {
	.anchorLinksWrap + .productsBox .h3Tit2:first-of-type{
		margin-top: min(7.7vw, 60px);
	}
} /* -SP- */

#products01 p{
	margin-bottom: 50px;
	text-align: center;
	font-size: min(1.5vw, 1.8rem);
	line-height: 2.1em;
}
#products01 .secLead{
	font-size: min(3.14vw, 3.6rem);
	line-height: 1.74em;
	text-align: center;
	color: var(--main);
}
#products01 figure{
	width: min(100%, 800px);
  margin: auto;
}
#products01 figure img{
	width: 100%;
}
@media screen and (max-width: 780px) {
	#products01 .secLead{
		font-size: min(5vw, 2.4rem);
	}
} /* -SP- */
@media screen and (min-width: 781px) {	
	#products01 .secLead{
		font-size: min(3.14vw, 3.0rem);
    margin-bottom: 88px;
	}
  
} /* -PC only- */

.figureTxtsWrap{
	display: flex;
	flex-wrap: wrap;
}
.figureTxtsBox figure{
	width: 100%;
}
.figureTxtsBox figure img{
	width: 100%;
	aspect-ratio: 580 / 388;
	border-radius: 15px;
}
.figureTxtsBox .txts{
	padding: 5%;
}
.figureTxtsBox h4{
	margin-bottom: 4%;
	letter-spacing: 0.05em;
}
.figureTxtsBox h4 span{
	font-size: 0.75em;
}
.figureTxtsBox p{
	margin-top: 5px;
}
.figureTxtsBox .boxLead{
	color: var(--main);
	font-weight: 500;
}
@media screen and (max-width: 780px) {
	.figureTxtsWrap{
		gap: var(--flexGapSP);
		width: min(100%, 448px);
		margin-inline: auto;
	}
	.seihinInfoUse figure{
		margin-top: 30px;
		margin-inline: auto;
		width: min(70vw, 504px);
	}		
	.figureTxtsBox{
		width: 100%;
	}
	.figureTxtsBox .txts {
    padding: 5% 0;
	}
	.figureTxtsBox h4{
		font-size: min(5.87vw, 2.16rem);
	}
	.figureTxtsBox p{
		font-size: min(4.27vw, 1.4rem);
	}
} /* -SP- */
@media screen and (min-width: 781px) {	
	.figureTxtsWrap{
		gap: var(--flexGapPC);
	}
	.figureTxtsWrap > div{
		width: var(--flexChildCol2);
	}
	.figureTxtsBox h4{
		font-size: min(4.3vw, 2.88rem);
	}
	.figureTxtsBox p{
		font-size: min(2.6vw, 1.6rem);
	}
} /* -PC only- */

#products03 ol{
	width: min(100%, 930px);
	margin-inline: auto;

}
#products03 ol li{
	display: flex;
	align-items: flex-start;
	gap: 6.9%;
	padding-block: min(6.4vw, 40px);
}
#products03 ol li .num{
	position: relative;
	width: 2.8em;
	font-family: "Jost", sans-serif;
	font-size: min(3.1vw, 1.6rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0em;	
}
#products03 ol li:not(:last-of-type) .num::after{
	content: "";
	position: absolute;
	top: calc(100% + 40px);
	left: 50%;
	transform: translateX(-50%);
	display: block;
	width: min(4.3vw, 22px);
	aspect-ratio: 22 / 14;
  background-color: var(--main);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
#products03 ol li .num > span{
	display: block;
	margin-top: 0.2em;
	font-size: min(12.3vw, 6.4rem);
}
#products03 ol li .txts{
	width: calc(100% - 48px - 6.9%);
}
#products03 ol li dt{
	margin-bottom: 0.5em;
	color: var(--main);
	font-size: min(5.2vw, 2.6rem);
	font-weight: 500;
	letter-spacing: 0.1em;
 line-height: 1;
}
#products03 ol li dd p{
	font-size: min(3.2vw, 1.4rem);
	line-height: 1.56em;
	letter-spacing: 0.1em;
}


/* =======================================
		info
========================================== */
#info01 p{
	line-height: 2em;
	letter-spacing: 0.02em;
}
#info01 p + p{
	margin-top: 2em;
}
#info01 p.right{
	text-align: right;
}
#info01 p.right span{
 margin-left:0.54em;
}

#info02 .basicTable th{
	padding: .8em 1.5em;
	font-size: min(3.1vw, 1.6rem);
	white-space: nowrap;
}
#info02 .basicTable td{
	padding: .8em 1.5em;
	font-size: min(3.1vw, 1.6rem);
}
#info02 .basicTable td:last-of-type li span{
 display: inline-block;
 width: 8.8em;
}
#info03 .figureTxtsBox figure{
 max-width: 400px;
 margin-inline:auto;
}
#info03 .figureTxtsBox figure img{
	aspect-ratio: auto;
}
#info04{

}

@media screen and (max-width: 780px) {
	#info01 .h3Tit2{
		margin-top: min(14vw, 109px);
	}
	#info01 p{
		font-size: min(3.8vw, 1.6rem);
	}
	#info01 p.right span{
		font-size: min(5.13vw, 4rem);
	}
} /* -SP- */
@media screen and (min-width: 781px) {	
  #info01 .inner{
  width: min(74%, 960px);
  }
	#info01 p{
		font-size: min(2.8vw, 1.7rem);
	}
	#info01 p.right span{
		font-size: min(5.1vw, 3.2rem);
	}
} /* -PC only- */

/* =======================================
		env
========================================== */
#env .mainTitle .txts .txtsInner{
	width: auto;
}
#envLead{
	position: relative;
	width: min(calc(94% - 5.54%), 1155px);
	z-index: 0;
}
#envLead::before{
	content: "";
	position: absolute;
	margin-inline: auto;
	inset: 0;
	background-color: var(--main);
	z-index: -1;
}
#envLead p{
	width: min(100%, 800px);
	margin-inline: auto;
	line-height: 1.85em;
	color: #ffffff;
	letter-spacing: 0.075em;
}
#envLead p + p{
	margin-top: 1.5em;
}
#envLead p.secLead{
	margin-right: -1em;
	width: calc(100% + 1em);
	line-height: 1.7em;
	font-weight: bold;
	letter-spacing: 0;
}
#env01 ol {
  counter-reset: num;
}
#env01 ol li {
  position: relative;
  padding-left: 2.7em;
	font-size: min(3vw, 1.9rem);
}
#env01 ol li + li{
	margin-top: 1.8em;
}
#env01 ol li::before {
  counter-increment: num;
  content: counter(num) ".";
  
  position: absolute;
  left: 0;
	top: .4em;
	transform: translateY(-0.25em);
  font-weight: bold;
  color: var(--main); 
	font-family: "Jost", sans-serif;
	font-style: italic;
	font-size: 1.6em;
	line-height: 1em;
}

#env02 .inner > figure:first-of-type{
	aspect-ratio: 755 / 96;
}
#env02 .secLead{
	line-height: 2em;
}
#env02 .secLead.bdCircle{
 padding-bottom: 2.38em;
} 
.sdgsList{
 position: relative;
	margin:  min(10.3vw, 40px) auto;
 display: flex;
 /*flex-flow: row wrap;*/
 justify-content: center;
 gap:20px min(3vw, 36px);
  width: 80%;
}
#env02 h4{
 margin-bottom: .7em;
 font-size: min(4.1vw,2.6rem);
 font-weight: 700;
 text-align: center;
 line-height: 1.7;
}
#env02 .txtCenter{
font-size: min(3.3vw,2.0rem);
 line-height: 2.125;
}
#env03 .imgTxtList{
	margin-top: min(7.1vw, 55px);
}

#env03 .imgTxtList li figure{
	width: min(24vw, 186px);
}

@media screen and (max-width: 780px) {
	#env .mainTitle .txts{
		padding-left: 4vw;
		padding-right: 0;
	}
	#envLead{
		margin: min(11.54vw, 90px) auto min(17vw, 132px);
		padding: min(9vw, 90px) 10% min(9vw, 90px) 15.54%;
	}
	#envLead::before{
		width: calc(100% - 5.54%);
		transform: skewX(-3.83deg);
	}
	#envLead p.secLead{
		font-size: min(4.2vw, 2rem);
	}
	#envLead p{
		font-size: min(4.1vw, 1.4rem);
	}
  #env01 ol li {
  font-size: min(4.1vw, 1.5rem);
}
	#env02 .inner > figure:first-of-type{
		width: min(67.7vw, 528px);
		margin: min(10.3vw, 80px) auto min(9.4vw, 73px);
	}
	#env02 .secLead{
		font-size: min(4.1vw, 1.45rem);
	}
	.sdgsList{
		flex-flow: row wrap;
		width: min(70%, 446px);
		margin-inline: auto;
	}
	.sdgsList li{
		width: calc((100% - min(3vw, 36px))/2);
	}
  #env02 h4 {
  font-size: min(5.6vw,2.2rem);
  }
  #env02 .txtCenter{
font-size: min(4.4vw,1.6rem);
}
  #env03 .secLead{
		font-size: min(4.4vw,1.6rem);
	}
} /* -SP- */
@media screen and (min-width: 781px) {
	#env .mainTitle .txts {
		height: 300px;
		padding-left: min(2.76vw, 42px);
	}
	#env .mainTitle .txts .txtsInner {
		margin-left: auto;
		width: auto;
		display: inline-block;
	}
	#envLead{
		margin: min(24vw, 149px) auto min(23vw, 145px);
		padding: min(9vw, 72px) 10% min(9vw, 72px) 12%;
	}
	#envLead::before{
		width: calc(100% - 5.54%);
		transform: skewX(-6.84deg);
	}
	#envLead p.secLead{
		font-size: min(3.8vw, 2.4rem);
	}
	#envLead p{
		font-size: min(2.8vw, 1.8rem);
	}
  #env01 .inner{
    width: min(76%, 960px);
  }
	#env02 .inner > figure:first-of-type{
		width: min(100%, 604px);
		margin: min(14vw, 88px) auto min(6.4vw, 40px);
	}
	#env02 .secLead{
		font-size: min(2.8vw, 1.8rem);
	}
  #env03 .secLead{
		font-size: min(2.6vw, 1.6rem);
	}
} /* -PC only- */




/* =======================================
		top / topics
========================================== */
.topicsList {
 overflow-y: auto;
 height: 266px;
}
.topicsList li{
	border-bottom: 1px solid var(--base);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 10px;
	padding: 20px 0 20px 30px;
	font-size: min(3.73vw, 1.4rem);
	letter-spacing: 0.25em;
	line-height: 1.22em;
}
.topicsList li a{
  display: flex;
	flex-wrap: wrap;
	gap: 0.5em 10px;
}

.topicsList li .entryTxt p{
	margin-top: 0.5em;
}
@media screen and (max-width: 780px) {
  .topicsList li{
    padding: 20px 0;
    font-size: min(3.4vw, 1.4rem);
  }
	.topicsList li .date,
	.topicsList li .entryTitle{
		width: 100%;
	}	
} /* -SP- */
@media screen and (min-width: 781px) {
	.topicsList li{
		padding: 24px 0 24px 36px;
		font-size: 1.4rem;
		letter-spacing: 0.25em;
		line-height: 1.22em;
	}	
	.topicsList li .date{
		width: 7.5em;
	}
	.topicsList li .entryTxt{
		flex: 1;
	}
} /* -PC only- */



/* =======================================
	contact
========================================== */

.red{
	color: var(--red);
}



#contact main section .inner.bdCircle::before{
	bottom: auto;
	top: 6px;
}
#contact main section .inner.bdCircle::after{
	bottom: auto;
	top: 0px;
}

.contactMainLead{
	margin-bottom: 1em;
	line-height: 1.69em;
}
@media screen and (max-width: 780px) {
	#contact main{
		padding-bottom: min(1.26vw, 80px);
	}
	#contact main section .inner.bdCircle{
		margin-top: min(8.46vw, 66px);
		padding-top: min(8.46vw, 66px);
	}
	.contactMainLead{
		font-size: min(3.3vw, 1.8rem);
	}
} /* -SP- */
@media screen and (min-width: 781px) {
	#contact main{
		padding-bottom: 128px;
	}
	#contact main section .inner.bdCircle{
		margin-top: 50px;
		padding-top: 59px;
	}
	.contactMainLead{
		font-size: 1.6rem;
	}
} /* -PC only- */

.formBody{
	width: 100%;
	background-color: #ffffff;
}
section:not(#confirmMain) .formContactItem{
	background-color: #d7dcec;
}

.formContactItem label{
	display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;	
	padding-block: 1em;
	letter-spacing: 0.075em;
}
.formContactItem label input[type="radio"]{
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.formContactItem label span{
	position: relative;
}
.formContactItem label span::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	border: 2px solid #333333;
	border-radius: 50%;
	box-sizing: border-box;
	background-color: #ffffff;
}
.formContactItem label span::after {
	content: "";
	position: absolute;
	transform: translateY(-50%) scale(0); /*`未選択時は見せない*/
	border-radius: 50%;
	background-color: #333333;
	transition: transform 0.2s ease;
}
.formContactItem label input[type="radio"]:checked + span::after {
	transform: translateY(-50%) scale(1);
}

.formFoot p{
	text-align: center;
}
.formFoot p.contactPrivacy{
	margin-block: 2em;
	line-height: 1.4em;
}
.formFoot p.contactPrivacy a{
	position: relative;
	display: inline-block;
	margin-inline: 0.3em;
}
.formFoot p.contactPrivacy a::after{
	content: "";
	position: absolute;
	inset: auto 0 -6px 0;
	width: 100%;
	height: 2px;
	background-color: var(--base);
	transition: all 0.3s;
}
.formFoot p.contactPrivacy a:hover::after{
	transform: scaleY(0);
}
.formFoot p.contactPrivacy label {
  display: inline-flex;
  align-items: center;
  margin-right: 20px;
  user-select: none;
	text-align: left;
}
.formFoot p.contactPrivacy label  input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.formFoot p.contactPrivacy span {
  position: relative;
}

.formFoot p.contactPrivacy span::before {
  content: "";
  position: absolute;
  left: 0;
	width: 1.2em;
	aspect-ratio: 1 / 1;
  border: 2px solid #999999;
  background-color: #ffffff;
  transition: background-color 0.2s, border-color 0.2s;
  cursor: pointer;
}
.formFoot p.contactPrivacy span::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 5px;
  width: 6px;
  height: 11px;
  border-right: 3px solid #ffffff;
  border-bottom: 3px solid #ffffff;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform 0.2s ease, opacity 0.2s;
  opacity: 0;
}
.formFoot p.contactPrivacy input[type="checkbox"]:checked + span::before {
  background-color: #333333;
  border-color: #333333;
}
.formFoot p.contactPrivacy input[type="checkbox"]:checked + span::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

.formBtn .confirm{
	position: relative;
	width: min(90%, 654px);
	height: var(--formBtnH);
	margin-inline: auto;
	background-color: var(--base);
	border: 2px solid var(--base);
	transition: all 0.3s;
}
.formBtn .confirm input{
	position: relative;
	background: transparent;
	width: 100% ;
	height: 100%;
	padding-right: var(--formBtnH);
	color: #ffffff;
	font-weight: 500;
	cursor: pointer;
	z-index: 2;
	transition: all 0.3s;

	-webkit-appearance: none;
	appearance: none;
	border: none;
	box-shadow: none;
	outline: none;
}
.formBtn .confirm::after{
	position: absolute;
	inset: 0px 0px 0px auto;
	content: "";
	display: block;
	width: calc(var(--formBtnH) - 4px);
	aspect-ratio: 1 / 1;
	background: url(images/ic_arrow_lightgray.svg) no-repeat center center / 29px 31px;
	border-left: 2px solid #999999;
	z-index: 1;
}
.formBtn .confirm:hover{
	background-color: #ffffff;
}
.formBtn .confirm input:hover{
	color: var(--base);
}

.formNote{
	border: 1px solid #999999;
}
.formNote h4{
	margin-bottom: 0.4em;
	font-size: min(3.6vw, 2.2rem);
}
.formNote li{
	margin-left: 1.2em;
	text-indent: -1.2em;
}
.formNote li + li{
	margin-top: 1em;
}
@media screen and (max-width: 780px) {
	.formBody{
		margin-bottom: 8.7vw;
		padding: min(5.77vw, 45px) 0;
	}	
	section:not(#confirmMain) .formContactItem{
		margin-inline: min(5.77vw, 45px);
		margin-bottom: min(6.41vw, 50px);
		padding: min(5.13vw, 40px) 3%;
		text-align: center;
	}
	.formContactItemInner {
    display: inline-flex;
    flex-direction: column;
    margin: auto;
	}
	.formContactItemInner br {
    display: none;
	}
	.formContactItem label{
		font-size: min(3.8vw, 1.6rem);
		text-align: left;
	}

	.formContactItem label span{
		padding-left: 38px;
		line-height: 28px;
	}
	.formContactItem label span::before {
		width: 28px;
		height: 28px;
	}
	.formContactItem label span::after {
		/* (外枠28px - 内枠14px) / 2 = 7px の位置に配置 */
		left: 7px; 
		top: 50%;
		width: 14px;
		height: 14px;
	}
	.formBody .dlTable,
 .formTable{
		margin-inline: min(3.59vw, 28px);
	}

	.formBtn .confirm input{
		font-size: min(3.6vw, 1.6rem);
	}

	.formFoot p{
		font-size: min(3.4vw, 1.6rem);
	}
	.formFoot p.contactPrivacy {
		margin-inline: -1em;
	}
	.formFoot p.contactPrivacy span {
		padding-left: 2em;
	}
	.formFoot p.contactPrivacy span::before {
		top: 0.2em;
	}

	.formNote{
		margin-top: min(14.1vw, 110px);
		padding: min(6.9vw, 64px) min(4.1vw, 32px) min(6.9vw, 64px) min(8.2vw, 64px);
	}
	.formNote li{
		font-size: min(3.7vw, 1.4rem);
	}

	.formBtn{
		margin-top: 60px;
		--formBtnH: min(3em, 60px);
	}
	.formBtn .confirm::after{
		background-size: 14px 15px;
	}
  .formFoot p.contactPrivacy span::after {
  left: 5px;
  top: 4px;
    width: 6px;
  height: 10px;
  }
} /* -SP- */
@media screen and (min-width: 781px) {
	.formBody{
		margin-bottom: 48px;
		padding: 52px 4.2% 8px;
	}
	section:not(#confirmMain) .formContactItem{
		margin-bottom: 46px;
		padding: 1em 8.3%;
	}
	.formContactItem label{
		margin-right: 20px;
		font-size: min(2.4vw, 1.6rem);
	}

	.formContactItem label span{
		padding-left:34px;
		line-height: 26px;
	}
	.formContactItem label span::before {
		width: 24px;
		height: 24px;
	}
	.formContactItem label span::after {
		/* (外枠30px - 内枠14px) / 2 = 8px の位置に配置 */
		left: 6px; 
		top: 50%;
		width: 12px;
		height: 12px;
	}

	.formFoot p{
		font-size: 1.6rem;
	}
	.formFoot p.contactPrivacy span {
		padding-left: 39px;
		line-height: 29px;
	}
	.formFoot p.contactPrivacy span::before {
		top: 50%;
		transform: translateY(-50%);
	}
	.formBtn{
		margin-top:80px;
		--formBtnH: 67px;
	}
	.formBtn .confirm{
		width: min(calc(100% - 25px) / 2, 523px);
	}
	.formBtn .confirm input{
		font-size: 2.2rem;
	}	

	.formNote{
		margin-top: 136px;
		padding: 48px 6.67% 48px 11.67%;
	}
	.formNote li{
		font-size: 1.6rem;
	}
} /* -PC only- */


/* =======================================
	#confirmMain / thanksMain
========================================== */
#confirmMain .formArea,
#thanksMain .formArea{
	margin-top: 40px;
}
#thanksMain .formArea{
	background-color: #ffffff;
}
#thanksMain .formArea .formBody{
 text-align: center;
}
#thanksMain .formArea .formBody p{
 text-align: left;
}
#thanksMain .formArea .formBody p.formAreaLead{
	text-align: center;
}
#confirmMain .formArea .h3Tit2,
#thanksMain .formArea .h3Tit2{
	margin: 0 0 30px 0;
	width: 100%;
	font-size: 2rem;
	text-align: center;
}
#confirmMain .formArea .h3Tit2 span,
#thanksMain .formArea .h3Tit2 span{
	min-width: min(80vw, 384px);
	height: 53px;
	padding-inline: 0.5em;
	justify-content: center;
}
#thanksMain .formArea .formBody p.note{
	margin-block: 1em;
	font-size: 1em;
}
#thanksMain .formArea .formBody ul{
 display: inline-block;
 text-align: left;
	margin-bottom: 1em;
}
#thanksMain .formArea .formBody ul li{
	margin-left: 1em;
	text-indent: -1em;
}
#confirmMain .formBtn,
#thanksMain .formArea{
	display: flex;
	justify-content: center;
	gap: 25px min(2.564vw, 25px);
}
#confirmMain .formFoot{
	display: none;
}
#confirmMain .formBtn .confirm{
	width: min(100%, 305px);
	height: var(--formBtnH);
}
#thanksMain .btnWrap{
	margin-top: 80px;
	text-align: center;	
}
#thanksMain .btnWrap .btn{
	background-color: #333333;
	color: #ffffff;
	font-size: 1.9rem;
}
#thanksMain .btnWrap .btn.arrow::after {
    border-color: #999999;
}
#thanksMain .btnWrap .btn:hover{
	background-color: #ffffff;
	color: var(--base);
}
@media screen and (max-width: 780px) {
	/* #confirmMain .inner,
	#thanksMain .inner{
		background-color: #ffffff;
	}*/
	#thanksMain .formArea .formBody{
    padding-inline: min(3.59vw, 28px);
	}
	#thanksMain .formArea .formBody p.formAreaLead{
		margin-block: 11.5vw;
		font-size: min(5.8vw, 2.2rem);
	}	
	#thanksMain .formArea .formBody p.note{
		margin-left: 1em;
		text-indent: -1em;
		line-height: 1.875em;
  font-size: 0.84em;
	}

	#thanksMain .btnWrap .btn{
		width: min(70%, 328px);
		font-size: min(3.6vw, 1.6rem);
	}
	#thanksMain .btnWrap .btn:has(span),
	#thanksMain .btnWrap .btn:has(span)::after{
		height: 3em;
	}
	#thanksMain .btnWrap .btn.arrow::after{
		background-size: 14px 15px;
	}
	#confirmMain .formBtn,
	#thanksMain .btnWrap{
    padding-inline: min(8.59vw, 67px);
		/*padding-bottom: min(10.26vw, 81px);*/
	}
} /* -SP- */
@media screen and (min-width: 781px) {
 #thanksMain .formArea .formBody p{
		font-size: 1.6rem;
 }
	#thanksMain .formArea .formBody p.formAreaLead{
		margin-block: 64px;
		font-size: 2.6rem;
	}
	#thanksMain .formArea .formBody li{
		font-size: 1.8rem;
	}
	#confirmMain .formArea,
	#thanksMain .formArea{
		margin-top: 56px;
	}
	#thanksMain .formArea{
	}
	#confirmMain .formArea .h3Tit2,
	#thanksMain .formArea .h3Tit2{
		margin: 0 0 48px 0;
	}
	#confirmMain .formBtn{
		margin-top: 80px;

		--formBtnH: 57px;
	}
	#confirmMain .formBtn .confirm{
		width: min(calc(100% - 25px) / 2, 244px);
		margin-inline: 0;
	}
	#confirmMain .formBtn .confirm input{
		font-size: 1.9rem;
	}
	.formBtn .confirm.back::after{
		background: url(images/ic_return_lightgray.svg) no-repeat center center / 22px 25px;
	}

	#thanksMain .btnWrap .btn{
		width: min(100%, 445px);
	}
} /* -PC only- */

/* =======================================
	#privacy
========================================== */
#privacy main section .inner.bdCircle{
  margin-top: 50px;
	padding-top:59px;
}
#privacy main section .inner.bdCircle::before{
	bottom: auto;
	top: 6px;
}
#privacy main section .inner.bdCircle::after{
	bottom: auto;
	top: 0px;
}

.privacyMain .inner li,
.privacyMain .inner p{
	line-height: 1.83em;
	letter-spacing: 0.075em;
  font-size: 1.4rem;
}
.privacyMain .inner p{
  font-size: 1.4rem;
}
.privacyMain .inner > p:first-of-type{
	margin-bottom: 2em;	
}
.privacyMain .inner > ol > li{
	padding-left: calc(1em * 2);
}
.privacyMain .inner > ol > li + li{
	margin-top: 2em;
}
.privacyMain .inner > ol > li h3{
	margin-bottom: 0.5em;
	font-weight: bold;
}
.privacyMain .inner > ol > li > p{
	margin-bottom: 1em;	
}
.privacyMain .inner > ol > li > ul{
	margin-bottom: 1em;	
}
.privacyMain .inner > ol > li > ul > li:not(:has(span)),
.privacyMain .inner > ol > li ul.indent > li{
	margin-left: 1em;
	text-indent: -1em;
  font-size: 1.4rem
}
.privacyMain .inner > ol > li > ul > li:has(span){
	display: flex;
}
.privacyMain .inner > ol > li > ul > li span:first-of-type{
	width: 8em;
}
.privacyMain .inner > ol > li > ul > li span + span{
	flex: 1;
}
.privacyMain .inner > ol > li ol > li{
	margin-bottom: 1em;	
}
.privacyMain .inner > p:last-of-type{
	margin-top: 3em;	
}

@media screen and (max-width: 780px) {
	#privacy.pgs main{
    padding-bottom: min(12.8vw, 100px);
	}
  .privacyMain .inner p{
    font-size: 1.4rem
  }
	.privacyMain .inner > ol > li h3{
		margin-left: calc(0.75em * -2);
		font-size: min(4.3vw, 1.8rem);
	}
    .privacyMain .inner > ol > li h4{
    font-size: min(4.3vw, 1.8rem);
  }
} /* -SP- */
@media screen and (min-width: 781px) {
  .privacyMain .inner > ol > li h4{
    font-size: 1.8rem
  }
	.privacyMain .inner > ol > li h3{
		margin-left: calc(2.8rem * -2);
		font-size: 1.8rem;
	}
} /* -PC only- */


/* =======================================
	#pcb
========================================== */
.modalBg{
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0,0,0,0.5);
 z-index: 101;
 opacity: 0;
 visibility: hidden;
 transition:
		opacity 0.4s ease,
		visibility 0.4s ease;
 pointer-events: none;
}
.modalBg.is-show {
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
}
.modal{
 position: relative;
 background: #fff;
 width: 90%;
 max-width: 960px;
 max-height: calc(100% - 120px - 20px);
 min-height: calc(100vh - 120px - 40px);
 overflow-y: auto;
 padding: 32px min(4.2%,50px) 60px;
 margin: 120px auto 20px;
 text-align: center;
  z-index: 200;
}
#pcb03.modal,
#pcb04.modal{
	display: flex;
  flex-direction: column;
}
#pcb03.modal .modalBox,
#pcb04.modal .modalBox{
  flex-grow: 1;
	display: flex;
  flex-direction: column;
}
#pcb03.modal .modalBox .bdCircle,
#pcb04.modal .modalBox .bdCircle{
  flex-grow: 1;
	display: flex;
  flex-direction: column;
}
#pcb03.modal p:has(+ .btnArea),
#pcb04.modal p:has(+ .btnArea) {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal .back{
 position: absolute;
 left: 20px;
 top: 20px;
}
.modal .back a{
 display: block;
 background: url("images/pcb_arrow.svg") no-repeat left center/18px auto;
 padding: 0 0 2px 30px;
 color: #c2c2c2;
 font-size: 19px;
}
.modal .mheadClose{
 position: absolute;
 right: 15px;
 top: 20px;
 background: url("images/pcb_close.svg") no-repeat left top/100% auto;
 width: 30px;
 height: 30px;
 cursor: pointer;
}

.modal .h3Tit2{
	margin: 0 0 30px 0;
	width: 100%;
	font-size: min(3.9vw, 2.16rem);
	text-align: center;
}
.modal .h3Tit2 span{
	min-width: min(80vw, 433px);
	height: 75px;
	padding-inline: 0.5em;
	justify-content: center;
}
.modal .bdCircle{
 margin-top: 30px;
 padding-top: 30px;
 padding-bottom: 0;
}
.modal .bdCircle::before{
 bottom: auto;
 top: 6px;
}
.modal .bdCircle::after{
 bottom: auto;
 top: 0;
}
.modal p,
#pcb03 .btn.arrow,
#pcb04 .btn.arrow{
 font-size: min(2vw,1.9rem);
}
#pcb03 .btn.arrow::after,
#pcb04 .btn.arrow::after{
	background-size: 14px 15px;
	height: 100%;
}
.modal p.search input::placeholder {
  color: #c9caca;
}


@media screen and (max-width: 780px) {
	.modal .h3Tit2 span{
		min-width: min(38.8vw, 303px);
		height: 52.5px;
	}
} /* -SP- */
@media screen and (min-width: 781px) {
.modal p .note{
 font-size: 1.4rem;
}	
}/*-pcOnly-*/

.modal h4{
 margin-bottom: 28px;
 font-size: min(2vw,1.9rem);
 text-align: center;
}
.modal .btnArea{
 display: flex;
 align-items: center;
 justify-content: center;
 gap:0 30px;
 margin-top: 34px;
}
.modal .btn01,
.modal .btn02{
 border-radius: 5px;
  display: grid;
  place-content: center;
 width: calc(50% - 19px);
 max-width: 287px;
 height: 83px;
 font-size: 1.8rem;

 border: 3px #d6d6d6 solid;
 background: #fff;
 transition: all 0.3s;
}
.modal .btn01:hover,
.modal .btn02:hover{
 border: 3px #adadad solid;
 background: #ebebeb;
}
.modal .noItem.pcb02-1 .btn01{
 width: calc(70% - 19px);
}
.modal .close{}

@media screen and (max-width: 780px) {/* SP */
.modal{
 max-height: calc(100% - 80px - 20px);
 padding: 45px min(4.2%,50px) 30px;
 margin: 80px auto 20px;
}
.modal .back{
 left: 10px;
 top: 10px;
}
.modal .back a{
 background: url("images/pcb_arrow.svg") no-repeat left center/14px auto;
 padding: 0 0 2px 25px;
 font-size:min(4vw,19px);
}
.modal .mheadClose{
 right: 10px;
 top: 10px;
 background: url("images/pcb_close.svg") no-repeat left top/100% auto;
 width: 25px;
 height: 25px;
}
 
.modal .h3Tit2{
	margin: 0 0 20px 0;
	font-size: min(3.9vw, 2.16rem);
	text-align: center;
}
.modal .h3Tit2 span{
	min-width: min(38.8vw, 303px);
	height: 50px;
}

.modal p{
 font-size: min(3.9vw,1.9rem);
}
.modal h4{
 font-size: min(3.9vw,1.9rem);
}
.modal .btnArea{
 gap:0 20px;
 margin-top: 30px;
}
.modal .btn01,
.modal .btn02{
 width: calc(50% - 10px);
 height: 80px;
 font-size: min(3.8vw,1.4rem);
}
.modal p, #pcb03 .btn.arrow, #pcb04 .btn.arrow {
font-size: 10px;
}
.modal h3 + p {
	/*padding-inline: 1em;*/
	/*font-size: min(3.1vw, 22px);*/
	font-size: 13px;
}
.modal h3 + p .note {
	font-size: 11px;
}
#pcb03.modal p:has(+ .btnArea),
#pcb04.modal p:has(+ .btnArea) {
	font-size: 14px;
}

}/*-SP only-*/
/***/

#pcb01 h4{
 background: #dcdddd;
 margin-bottom: 0;
 padding: 5px 18px;
 text-align: left;
}
#pcb01 ul.flexWrap{
 display: flex;
 flex-flow: row wrap;
 background: #efefef;
 gap:20px 22px;
 padding: 12px 29px;
 margin-bottom: 14px;
}
#pcb01 .flexWrap li{
 display: flex;
 flex-flow: column;
 width: 100%;
 min-width: 200px;
}
@media screen and (min-width: 781px) {
 #pcb01 .flexWrap li{
  width: calc((100% - 22px*3)/4);
 }
 
}/*-pcOnly-*/
#pcb01 .flexWrap li figure{
 margin: 0 0 12px;
}
#pcb01 .flexWrap li figure img{object-fit: cover;
 width: 100%;
 height: 100%;
 aspect-ratio:234/161;
}
#pcb01 .flexWrap li p{
 padding-left: 1em;
 text-indent: -1em;
 font-size: 1.4rem;
 text-align: left;
 letter-spacing: 0.04em;
 line-height: 1.4;
}
#pcb01 .flexWrap li p::before{
 content: "・";
}
#pcb01 .flexWrap:last-of-type li:last-of-type p{
 margin-top: auto;
 white-space: nowrap;
}

@media screen and (max-width: 780px) {/* SP */
#pcb01 h4{
 padding: 5px 15px;
}
#pcb01 ul.flexWrap{
	justify-content: center;
 gap:20px 22px;
 padding: 15px 5%;
}
#pcb01 .flexWrap li p{
 font-size: min(3.7vw,1.4rem);
 letter-spacing: 0;
}
}/*-SP only-*/
/***/
.modal .search input{
 border: 1px #9fa0a0 solid;
 background: url("images/pcb_search.svg") no-repeat left 25px center/32px auto;
 width: 100%;
 max-width: 605px;
 height:51px;
 padding: 0 0 0 67px;
 font-size: min(3.9vw,2.2rem);
  margin-bottom: 3rem
}

.btn.resultDisp{
	background-color: #333333;
  color: #fff;
}

.modal .noItem{
  margin-top: 48px;
  text-align: center;
}
.modal .noItem a{
  margin: auto
}

.modal .result{
  background: #efefef;
  padding: 1em 5em;
  display: flex;
  gap:1em;
  width: 100%;
  max-width: 605px;
  margin: auto;
  flex-wrap: wrap;
}

.modal .result li{
  font-size: min(3.9vw,1.8rem); 
}
@media screen and (max-width: 780px) {/* SP */
.modal .result{
  padding: 1em 2em;
}
}/*-SP only-*/