@charset "UTF-8";
h2.main-title {
	display:block;
	width:min(650px, 90%);
	height:38px;
	margin:10px 0 30px;
	padding:0;
	text-indent:-9999px;
	background:url() no-repeat center left / contain;
}
#sawachi h2.main-title	{ background-image:url(../../image/sawachi-title.gif);}
#kodawari h2.main-title { background-image:url(../../image/kodawari-title.gif);}
#qa h2.main-title		{ background-image:url(../../image/qa-title.gif);}
#company h2.main-title	{ background-image:url(../../image/company-title.gif);}
#inquiry h2.main-title	{ background-image:url(../../image/inquiry-title.gif);}
#shop h2.main-title		{ background-image:url(../../image/shop-title.gif);}
#payment h2.main-title	{ background-image:url(../../image/payment-title.gif);}
#ricruite h2.main-title {
	width:min(650px, 100%);
	height:43px;
	background-image:url(../../image/ricruite/ttl.png);
	background-size:auto 100%;
}


/*===============================================================
  ricruite
================================================================*/
#ricruite {
	padding-bottom:10em;

	& .intro {
		display:grid;
		grid-template:
			"catch img" auto
			"text img" 1fr / 75% auto;
		gap:0 10px;

		& img:nth-of-type(1) { grid-area:img;}
		& img:nth-of-type(2) { grid-area:catch;}
		& > div { grid-area:text;}
	}
	& .rDetail {
		display:grid;
		grid-template:
			"h3 h3" auto
			"img dl" 1fr / 35% auto;
		align-items:start;
		gap:10px;
		margin-top:3em;

		& h3 { grid-area:h3; margin-block:0; padding-block:5px; border-bottom:solid 5px #CEC06C;}
		& img { grid-area:img;}
		& dl { grid-area:dl; display:flex; flex-wrap:wrap; margin-block:0;}
		& :is(dt, dd) { padding-block:5px; border-bottom:solid 1px;}
		& dt { padding-right:1em; width:6em; text-align:start; font-weight:normal;}
		& dd { margin:0; width:calc(100% - 6em);}

		/* preview */
		& dl table[align="center"] { width:100%;}
		& dl .kaeru-box { display:flex; width:100%;}
	}
}


/*===============================================================
  SUBPAGE
================================================================*/

#subpage {
    --table-border:solid 1px #ccc;

    position:relative;
	/* z-index:999; */
}
#subpage :is(ul, ol) { list-style:none;}


/*---------------------------------------------------------------------------
  KAIGYOU
---------------------------------------------------------------------------*/
#subpage p.indention {
	clear:both;
	margin:0 2%;
	height:2rem;
	text-indent:-9999px;
	background:none;
}

/*---------------------------------------------------------------------------
  MIDASHI
---------------------------------------------------------------------------*/
#subpage h3 {
	clear:both;
	margin:1em 2% 0.5em;
	padding-left:1em;
	font-size:1.125rem;
	background:url(../../image/arrow.gif) no-repeat center left / 0.75em auto;
}
#subpage h4.mid {
	clear:both;
	margin: 20px 10px 5px;
    padding: 5px 0 5px;
    border-top: 1px dashed #999999;
    border-bottom: 1px dashed #999999;
    font-weight: bold;
}
#subpage h4:not(.mid) {
	clear:both;
	margin:10px 2%;
	padding:0.375rem;
	font-size:1.0625rem;
	background-color:var(--sub-color);
	border:solid 1px var(--main-color);
}


/*---------------------------------------------------------------------------
  COMMENT
---------------------------------------------------------------------------*/
#subpage .comment1 {
	clear:both;
	margin:10px 2%;
}
#subpage :is(.comment2, .comment3) {
	clear:both;
	margin:10px 2%;
	padding:1rem;
}
#subpage .comment2 { background-color:#eee;}
#subpage .comment3 { background-color:rgb(255 100 100 / 0.1);}

/*---------------------------------------------------------------------------
  HYOU
---------------------------------------------------------------------------*/
#subpage table.hyou {
	clear:both;
	margin:10px 2%;
	width:96%;
    border-top:var(--table-border);
    border-left:var(--table-border);
    font-size:inherit;
	border-collapse:collapse;
}
#subpage table.hyou + table.hyou { border-top:none;}
#subpage table.hyou th,
#subpage table.hyou td {
	padding:0.25rem 0.5rem;
    border-right:var(--table-border);
	border-bottom:var(--table-border);
}
#subpage table.hyou th {
	background:#eee;
	font-weight:bold;
	text-align:center;
    color:#666;
}
#subpage table.hyou td {}
#subpage table.hyou td.sm_mid {
	display:none;
	color:var(--main-color);
	font-weight:bold;
}

/* 2RETU */
#subpage table.hyou2 { margin:0 2%;}
#subpage table.hyou2 th { width:30%;  border-top:none; }
#subpage table.hyou2 td { width:70%; }
#subpage table.hyou2+table.hyou2 { border-top:none; }
#subpage table.hyou2 td table {
	border-collapse:collapse;
	display:block;
	max-height:300px;
	overflow:auto;
}
#subpage table.hyou2 td table th,
#subpage table.hyou2 td table td { width:auto;}

/* 3RETU */
#subpage table.hyou3 { margin:0 2%;}
#subpage table.hyou3 th,
#subpage table.hyou3 td { width:33%; }
#subpage table.hyou3+table.hyou3 { border-top:none; }

/* 4RETU */
#subpage table.hyou4 { margin:0 2%;}
#subpage table.hyou4 th,
#subpage table.hyou4 td { width:25%; }
#subpage table.hyou4+table.hyou4 { border-top:none; }

/* 5RETU */
#subpage table.hyou5 { margin:0 2%;}
#subpage table.hyou5 th,
#subpage table.hyou5 td { width:20%;}
#subpage table.hyou5+table.hyou5 { border-top:none; }

/* FREE */
#subpage .pc_table { display:block;}
#subpage .sm_table { display:none;}
#subpage .pc_table table,
#subpage .sm_table table {
	clear:both;
	margin:10px 2%;
	width:96%;
	border-collapse:collapse;
	border-top:var(--table-border);
	border-left:var(--table-border);
}
#subpage .pc_table table td,
#subpage .sm_table table td {
	padding:5px 10px;
	background:#FFF;
	border-right:var(--table-border);
	border-bottom:var(--table-border);
}
#subpage .pc_table thead td,
#subpage .sm_table thead td { background:#EEE;}

/* FIX */
#subpage .fix_table {}
#subpage .fix_table table {
	clear:both;
	margin:10px 2%;
	width:96%;
	border-collapse:collapse;
	border-top:var(--table-border);
	border-left:var(--table-border);
    font-size:inherit;
}
#subpage .fix_table table thead :is(th, td) {
    background-color:#dadada;
    border-bottom-width:2px;
}
#subpage .fix_table table th,
#subpage .fix_table table td {
	padding:0.5em;
	border-right:var(--table-border);
	border-bottom:var(--table-border);
}
#subpage .fix_table table th {
	background:#EEE;
	font-weight:bold;
	text-align:center;
}
#subpage .fix_table table td { background:#FFF;}

/*---------------------------------------------------------------------------
  LIST
---------------------------------------------------------------------------*/
#subpage ul.list-ul {
	clear:both;
	margin:0 2%;
	padding:10px 0;
}
#subpage ul.list-ul + ul.list-ul { padding-top:0;}
#subpage ul.list-ul li {
    position:relative;
	padding:0 0 10px 15px;
}
#subpage ul.list-ul li::before {
    content:"";
    display:block;
    clear:both;
    position:absolute;
    inset:calc(1lh / 2) auto auto 0;
    translate:0 -50%;
    width:0.5em;
    aspect-ratio:1;
    background:currentColor;
    border-radius:100%;
}

/*---------------------------------------------------------------------------
  LINK
---------------------------------------------------------------------------*/
#subpage .link {
	clear:both;
	margin:0 2%;
	padding:10px 0;
	text-indent:25px;
	background:url(../image/link_arrow.png) no-repeat left 5px top 0.5lh;
}
#subpage .pdf {
	clear:both;
	margin:0 2%;
	padding:0 0 10px;
}
#subpage .file img { padding-right:10px;}
/* LINK PLURAL�ｽ@*************************/
/* LINK BOX2 */ #subpage .link2 { clear:none; float:left; width:46%;}
/* LINK BOX3 */ #subpage .link3 { clear:none; float:left; width:29.3%;}
/* LINK BOX4 */ #subpage .link4 { clear:none; float:left; width:21%;}
/* FILE PLURAL�ｽ@*************************/
/* FILE BOX2 */ #subpage .file2 { clear:none; float:left; width:46%;}
/* FILE BOX3 */ #subpage .file3 { clear:none; float:left; width:29.3%;}
/* FILE BOX4 */ #subpage .file4 { clear:none; float:left; width:21%;}


/*---------------------------------------------------------------------------
  EMBEDDED
---------------------------------------------------------------------------*/
#subpage .embedded {
  position:relative;
	clear:both;
	margin:0 2%;
	padding:0 0 20px;
}
#subpage .embedded iframe { width:100%;}


/*---------------------------------------------------------------------------
  PHOTO
---------------------------------------------------------------------------*/
#subpage .photo-l {	float:left; padding:0 1rem 0 0;}
#subpage .photo-r {	float:right; padding:0 0 0 1rem;}
#subpage .photo-c { clear:both; text-align:center; padding:0 0 10px; }
#subpage .photo-l img,
#subpage .photo-r img,
#subpage .photo-c img { max-width:100%; height:auto;}
#subpage .photo-l p,
#subpage .photo-r p,
#subpage .photo-c p { padding:0 0 5px;}
#subpage .caption { font-size:80%; text-align:center;}

/* PHOTO BOX�ｽ@*************************/
#subpage ul.photo_box { float:left; margin:2%; padding:0;}
#subpage ul.photo_box li {}
#subpage ul.photo_box li.photo { margin:0 0 5px;}
#subpage ul.photo_box li.photo img { width:100%;}
#subpage ul.photo_box li.cap {}
#subpage ul.photo_box li.youtube { position:relative;}
#subpage ul.photo_box li.youtube iframe {
	/* position:absolute; top:0; right:0;
	width:100% !important; height:100% !important; */
    width:100%;
    height:auto;
    aspect-ratio:16/9;
}
/* PHOTO BOX1 */ #subpage ul.g1 { width:96%; float:none; }
/* PHOTO BOX2 */ #subpage ul.g2 { width:46%;}
/* PHOTO BOX3 */ #subpage ul.g3 { width:29.3%;}
/* PHOTO BOX4 */ #subpage ul.g4 { width:21%;}
/* PHOTO BOX5 */ #subpage ul.g5 { width:16%;}
#subpage ul.g1 img { max-width:960px; height:auto;}
#subpage ul.g2 img { max-width:460px; height:auto;}
#subpage ul.g3 img { max-width:293px; height:auto;}
#subpage ul.g4 img { max-width:210px; height:auto;}
#subpage ul.g5 img { max-width:160px; height:auto;}
#subpage .g_btn { margin-top:10px;}
#subpage .g_btn a {
	display:block;
	padding:10px 30px;
    color:#fff;
    text-align:center;
	text-decoration:none;
	background:#7ac8c4 url("../image/arrow_w.png?20240702") no-repeat 92% center;
    background-size:30px auto;
    transition:0.5s;
    border-radius:50px;
}


/*---------------------------------------------------------------------------
  BOX
---------------------------------------------------------------------------*/
#subpage :is(.box1, .box2) :is(h4, h5) {
	clear:none !important;
	margin:0 0 10px;
	padding:0;
}

/* BOX1 */
#subpage .box1 {
	clear:both;
	margin:20px 2%;
	width:96%;
}
#subpage .box1 .photo-c img {max-width:960px; height:auto;}
#subpage .box1 .photo-l img {max-width:460px; height:auto;}
#subpage .box1 .photo-r img {max-width:460px; height:auto;}
#subpage .box1:after { /*float_clear*/ display:block; clear:both;	content:"";}
#subpage .box1 .come {/*overflow:hidden; �ｽﾜゑｿｽﾔゑｿｽ�ｽ�ｽ*/}
#subpage .box1 .come + h4,
#subpage .box1 .come + .come { margin-top:40px;}
#subpage .box1 .catch { clear:none; margin:20px 0; line-height:150%;}

/* BOX2 */
#subpage .box2 {
	float:left;
	margin:20px 2%;
    width:46%;
}
#subpage .box2 .come {/*overflow:hidden; �ｽﾜゑｿｽﾔゑｿｽ�ｽ�ｽ*/}
#subpage .box2 .photo-l img {max-width:210px; height:auto;}
#subpage .box2 .photo-r img {max-width:210px; height:auto;}

/*---------------------------------------------------------------------------
  LINE
---------------------------------------------------------------------------*/
#subpage .line {
	clear:both;
	margin:0 2%;
	padding:20px 0;
	width:96%;
}
#subpage .line hr {
	height:1px;
	border:none;
	border-top:1px #AAA dotted;
}


/*---------------------------------------------------------------------------
  BUTTON
---------------------------------------------------------------------------*/
#subpage .btn_box { overflow:hidden;}
#subpage .btn {
	float:left;
	margin:1% 2%;
	font-weight:bold;
    text-align:center;
	color:#fff;
	background:var(--main-color);
	border-radius:100vmax;
}
#subpage .btn:hover { background-color:var(--main-color-deep);}
#subpage .btn a {
	display:block;
	padding:0.75rem;
	color:#FFF;
	text-decoration:none;
}
/* BUTTON BOX1 */ #subpage .b1 { width:60%; clear:both; float:none; margin:0 auto;}
/* BUTTON BOX2 */ #subpage .b2 { width:46%;}
/* BUTTON BOX3 */ #subpage .b3 { width:29.3%;}


/*---------------------------------------------------------------------------
  COLUMNBOX
---------------------------------------------------------------------------*/
#subpage .column { display:flex; gap:20px 2%; margin:20px 2%;}
#subpage .column h4 { margin: 0 0 20px;}
#subpage .column .col2,
#subpage .column .col3 {
    padding:30px;
    background:#fff;
    box-shadow:0px 0px 15px 0px rgba(0, 0, 0, 0.05);
    border-radius:30px;
}
#subpage .column .col2 { width:50%;}
#subpage .column .col3 { width:33.3%;}


/*---------------------------------------------------------------------------
  FLOW
---------------------------------------------------------------------------*/
#subpage ul.flow_box {}
#subpage ul.flow_box:after { /*float_clear*/ display:block; clear:both; content:"";}
#subpage ul.flow_box li {
	position:relative;
	float:left;
	margin:1% 2%;
	padding:15px;
	color:#FFF;
	text-align:center;
	background:#f3a8b6;
	border-radius:5px;
	box-sizing:border-box;
}
#subpage ul.flow_box li a:hover {
	background:#999;
	border-radius:5px;
}
#subpage ul.flow_box li+li:before {
	position:absolute;
	top:0;
	left:-22px;
	display:block;
	clear:both;
	content:"";
	width:15px;
	height:100%;
	background:url(../image/flow_bg_pc.png) no-repeat center center;
}
#subpage .flow1 { position:relative;}
#subpage .flow1 li { float:none; width:96%;}
#subpage .flow1+.flow1:before {
	position:absolute;
	top:-15px;
	left:0;
	display:block;
	clear:both;
	content:"";
	width:100%;
	height:30px;
	background:url(../image/flow_bg_sm.png) no-repeat center center;
}
#subpage .flow2 li { width:46%;}
#subpage .flow3 li { width:29.3%;}
#subpage .flow4 li { width:21%;}
#subpage .flow1a { position:relative;}
#subpage .flow1a+.flow1a {margin-top:3%;}
#subpage .flow1a li+li:before { display:none !important;}
#subpage .flow1a li:nth-child(1) { width:32%; background:#f3a8b6;}
#subpage .flow1a li:nth-child(2) { width:60%; padding:0; text-align:left; color:#222; background:none;}
#subpage .flow1a+.flow1a:before {
	position:absolute;
	top:-25px;
	left:0;
	display:block;
	clear:both;
	content:"";
	width:36%;
	height:30px;
	background:url(../image/flow_bg_sm.png) no-repeat center center;
}


/*---------------------------------------------------------------------------
  FAQ
---------------------------------------------------------------------------*/
#subpage dl.faq {
	clear:both;
	margin:0 2%;

	& + dl.faq { margin-top:2rem;}
	& dt {
		--gap:0.25em;

		display:flex;
		align-items:center;
		gap:var(--gap);
		margin-bottom:10px;
		padding:var(--gap);
		font-weight:bold;
		font-size:125%;
		color:#fff;
		background-color:#990000;
	}
	& dt:before { content:"●"; font-size:0.25em;}
	& dd { margin:0px;}
}


/*---------------------------------------------------------------------------
	payment.html
---------------------------------------------------------------------------*/
#payment {
	
	& table th { background-color:#ECE9D8!important;}
	& .customTable {
		--border:1px solid #CCCCCC;
		--priceWidth:100px;
		
		width:100%;
		border-top:var(--border);
		border-left:var(--border);

		& :is(th, td) {
			border-right:var(--border);
			border-bottom:var(--border);
			padding:5px;
		}
		& th { text-align:center; font-weight:bold;}
		& th:nth-of-type(1) { width:calc(100% - var(--priceWidth));}
		& th:nth-of-type(2) { width:var(--priceWidth);}
		& td:nth-of-type(2) { text-align:center;}
	}
}

/*---------------------------------------------------------------------------
	/shop/
---------------------------------------------------------------------------*/
#shop {

	& .shop-menu {
		display:flex;
		justify-content:end;
		gap:1rem;
		margin-bottom:30px;

		& a {
			padding:5px 10px;
			background-color:#362320;
			color:#fff;
			text-decoration:none;
		}
		& a:nth-of-type(2) { display:none;}
	}
}

/*---------------------------------------------------------------------------
	form
---------------------------------------------------------------------------*/
#mailform {

	& table {
		margin-block:2rem;
		width:100%;
		border-collapse:collapse;

		& :is(th, td) { padding:5px; border-top:solid 1px;}
		& tr:last-of-type :is(th, td) { border-bottom:solid 1px;}
		& th { width:15em; padding-right:1em; font-weight:normal; text-align:start;}
		& td { width:calc(100% - 15em);}
		& .required { margin-left:0.2em; color:red; font-size:0.8em;}

		& input[type="text"] { width:min(180px, 100%);}
		& input[type="email"] { width:min(250px, 100%);}
		& textarea { width:100%; min-height:5lh; resize:vertical;}
	}
	& .btnWrap { display:flex; justify-content:center; gap:1rem;}
}