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

#wrapper {width: 100%; min-height: 100vh; margin: 0; padding: 0; box-sizing: border-box; overflow: hidden;}


/*PC:body-------------------------------------*/
@media screen and (min-width:961px){
	.pc {display: block !important;}
	.tb {display: none !important;}
	.sp {display: none !important;}
	
	/* Title */
	#titleLineTop {width: 100%; height: auto; margin: 50px 0 0; padding: 8px 0 0; text-align: center; font-size: 14px; float: left;}
	#titleLine {width: 100%; height: auto; margin: 0 0 50px; padding: 0 0 8px; text-align: center; font-size: 24px; font-weight: bold; float: left;}
	
	/* Section */
	section {width: 66%; height: auto; margin: 8px 1% 80px; padding: 0 0 8px; font-family: "Sawarabi Mincho", serif; font-weight: 600; font-style: normal; float: left; box-sizing: border-box; border: dotted 1px #707070; border-radius: 5px;}
	section h3 {width: 100%; height: auto; margin: 0 auto 30px; padding: 16px 0; font-size: 20px; background: #F8F4E8; border-radius: 8px 8px 0 0;}
	
	/* slider */
	#sliderSpc {width: 98%; height: auto; margin: 0 1% 20px; padding: 0; float: left;}
	.slider {width: 100%; height: auto; margin: 0; padding: 0;}
	.slider-img {width: 100%; height: auto; margin: 0; padding: 0;}
	
	/* table */
	section table {width: 98%; height: auto; margin: 20px 1% 0; padding: 0; border-collapse:collapse; font-size: 14px; float: left;}
	section table th {width: 23%; height: auto; padding: 8px; box-sizing: border-box; border: dotted 1px #B5B5B5; background: #F8F4E8;}
	section table td {width: 77%; height: auto; padding: 20px 12px; box-sizing: border-box; border: dotted 1px #B5B5B5;}
    
	/* Page-LINK*/
    .news_back {width: 100%; padding: 10px; box-sizing: border-box;}
    .gotop{display: block; width: 60px; height: 60px; box-sizing: border-box; background: #FFF; border: 1px solid #999; padding-top: 30px; text-align: center; letter-spacing: -1px; font-size: 85%; text-decoration: none; color: #333; opacity: 0.5; position: relative; float: right;}
    .gotop::before{content: ""; display: block; border-top: 2px solid #333; border-right: 2px solid #333; width: 25%; height: 25%; top: 25%; left: 0; right: 0; margin: auto; position: absolute; transform: rotate(-45deg);}
    .gotop:hover{opacity: 1;}
	
	/* Nav */
	#recruitSpc {width: 60%; min-width: 980px; height: auto; margin: 0 auto 120px; padding: 8px; font-family: 'Noto Serif JP', serif; font-weight: 400; font-style: normal; border-radius: 8px; box-sizing: border-box;}
		
		/* nav */
		.accordion {display: none;}
		
		.menu {width: 32%; height: auto; margin: 8px 0; padding: 8px 8px; font-family: 'Noto Serif JP', serif; font-weight: 400; font-style: normal; float: left; box-sizing: border-box; border: solid 1px #CCCCCC;}
		.menu ul {width: 100%; height: auto; margin: 0; padding: 0;}
		.menu ul li {width: 100%; height: auto; margin: 0; padding: 0; box-sizing: border-box;}
		
		.recbtn a {width: 100%; padding: 16px 0 16px 12px; margin: 3px 0; margin-inline: auto; font-family: 'Noto Serif JP', serif; font-size: 14px; letter-spacing: 0.1em; color: #fff; background: #6B401B; font-weight: 600; border: solid 1px #6B401B; display: block; box-sizing: border-box; text-decoration: none; cursor: pointer; transition: all 0.3s; float: left;}
		.recbtn a:hover {color: #6B401B; background: initial; transition: all 0.3s;}
		
		.arrow {position: relative; display: inline-block; width: 7.4px; height: 13.7px; margin: 3px 16px 0 0; float: right;}
		.arrow::before,
		.arrow::after {content: ""; position: absolute; top: calc(50% - 0.5px); right: 0; width: 10px; height: 2px; border-radius: 9999px; background-color: #FFFFFF; transform-origin: calc(100% - 0.5px) 50%;}
		.arrow::before {transform: rotate(45deg);}
		.arrow::after {transform: rotate(-45deg);}
		a:hover .arrow {position: relative; display: inline-block; width: 7.4px; height: 13.7px; margin: 3px 16px 0 0; float: right;}
		a:hover .arrow::before,
		a:hover .arrow::after {content: ""; position: absolute; top: calc(50% - 0.5px); right: 0; width: 10px; height: 1px; border-radius: 9999px; background-color: #6B401B; transform-origin: calc(100% - 0.5px) 50%;}
		a:hover .arrow::before {transform: rotate(45deg);}
		a:hover .arrow::after {transform: rotate(-45deg);}
	
}

/*TB:body-------------------------------------*/
@media screen and (min-width: 768px) and (max-width: 960px){
	.pc {display: none !important;}
	.tb {display: block !important;}
	.sp {display: none !important;}
	
	#titleLineTop {width: 100%; height: auto; margin: 50px 0 0; padding: 8px 0 0; text-align: center; font-size: 14px; float: left;}
	#titleLine {width: 100%; height: auto; margin: 0 0 50px; padding: 0 0 8px; text-align: center; font-size: 24px; font-weight: bold; float: left;}
	
	/* Section */
	section {width: 98%; height: auto; margin: 8px 1% 80px; padding: 0 0 8px; font-family: "Sawarabi Mincho", serif; font-weight: 600; font-style: normal; float: left; box-sizing: border-box; border: dotted 1px #707070; border-radius: 5px;}
	section h3 {width: 100%; height: auto; margin: 0 auto 30px; padding: 16px 0; font-size: 20px; background: #F8F4E8; border-radius: 8px 8px 0 0;}
	
	/* slider */
	#sliderSpc {width: 98%; height: auto; margin: 0 1% 20px; padding: 0; float: left;}
	.slider {width: 100%; height: auto; margin: 0; padding: 0;}
	.slider-img {width: 100%; height: auto; margin: 0; padding: 0;}
	
	/* table */
	section table {width: 98%; height: auto; margin: 20px 1% 0; padding: 0; border-collapse:collapse; font-size: 14px; float: left;}
	section table th {width: 23%; height: auto; padding: 8px; box-sizing: border-box; border: dotted 1px #B5B5B5; background: #F8F4E8;}
	section table td {width: 77%; height: auto; padding: 20px 12px; box-sizing: border-box; border: dotted 1px #B5B5B5;}
    
	/* Page-LINK*/
    .news_back {width: 100%; padding: 10px; box-sizing: border-box;}
    .gotop{display: block; width: 60px; height: 60px; box-sizing: border-box; background: #FFF; border: 1px solid #999; padding-top: 30px; text-align: center; letter-spacing: -1px; font-size: 85%; text-decoration: none; color: #333; opacity: 0.5; position: relative; float: right; z-index: 99;}
    .gotop::before{content: ""; display: block; border-top: 2px solid #333; border-right: 2px solid #333; width: 25%; height: 25%; top: 25%; left: 0; right: 0; margin: auto; position: absolute; transform: rotate(-45deg);}
    .gotop:hover{opacity: 1;}
	
	/* Nav */
	#recruitSpc {width: 98%; height: auto; margin: 0 1% 80px; padding: 8px; font-family: 'Noto Serif JP', serif; font-weight: 600; font-style: normal; float: left; border-radius: 8px; box-sizing: border-box; border: solid 1px #CCCCCC; display: flex; flex-flow: column; justify-content: space-between;}
		
		/* nav-index*/
		#menu_index {width: 100%; height: auto; margin: 8px 0; padding: 8px 8px; font-family: 'Noto Serif JP', serif; font-weight: 600; font-style: normal; float: left; box-sizing: border-box; z-index: 99;}
		#menu_index ul {width: 100%; height: auto; margin: 0; padding: 0;}
		#menu_index ul li {width: 100%; height: auto; margin: 0; padding: 0; box-sizing: border-box;}
		
		/* nav */
		.accordion {width: 90%; height: auto; margin: 0 5% 30px; border-radius: 5px; box-shadow: 0 7px 15px -5px rgb(0 0 0 / 5%); background-color: #fff; z-index: 99; display: block; background: #FDD061;}
		.accordion summary {display: flex; justify-content: space-between; align-items: center; position: relative; padding: 1em 2em; color: #5c4300; font-weight: 600; cursor: pointer;}
		.accordion summary::-webkit-details-marker {display: none; z-index: 99;}
		.accordion summary::after {transform: translateY(-25%) rotate(45deg); width: 7px; height: 7px; margin-left: 10px; border-bottom: 3px solid #5c4300b3; border-right: 3px solid #5c4300b3; content: ''; transition: transform .3s;}
		.accordion[open] summary::after {transform: rotate(225deg);}
		.accordion p {transform: translateY(-10px); opacity: 0; margin: 0; padding: .3em 2em 1.5em; color: #5c4300; transition: transform .5s, opacity .5s;}
		.accordion[open] p {transform: none; opacity: 1;}
		
		.menu {width: 100%; height: auto; margin: 8px 0; padding: 8px 8px; font-family: 'Noto Serif JP', serif; font-weight: 600; font-style: normal; float: left; box-sizing: border-box; border: solid 1px #CCCCCC;}
		.menu ul {width: 100%; height: auto; margin: 0; padding: 0;}
		.menuul li {width: 100%; height: auto; margin: 0; padding: 0; box-sizing: border-box;}
		
		.recbtn a {width: 100%; padding: 16px 0 16px 12px; margin: 3px 0; margin-inline: auto; font-family: 'Noto Serif JP', serif; font-size: 14px; letter-spacing: 0.1em; color: #fff; background: #2B271F; font-weight: 600; border: solid 1px #6B401B; display: block; box-sizing: border-box; text-decoration: none; cursor: pointer; transition: all 0.3s; float: left;}
		.recbtn a:hover {color: #6B401B; background: initial; transition: all 0.3s;}
		
		.arrow {position: relative; display: inline-block; width: 7.4px; height: 13.7px; margin: 3px 16px 0 0; float: right;}
		.arrow::before,
		.arrow::after {content: ""; position: absolute; top: calc(50% - 0.5px); right: 0; width: 10px; height: 2px; border-radius: 9999px; background-color: #FFFFFF; transform-origin: calc(100% - 0.5px) 50%;}
		.arrow::before {transform: rotate(45deg);}
		.arrow::after {transform: rotate(-45deg);}
		a:hover .arrow {position: relative; display: inline-block; width: 7.4px; height: 13.7px; margin: 3px 16px 0 0; float: right;}
		a:hover .arrow::before,
		a:hover .arrow::after {content: ""; position: absolute; top: calc(50% - 0.5px); right: 0; width: 10px; height: 1px; border-radius: 9999px; background-color: #6B401B; transform-origin: calc(100% - 0.5px) 50%;}
		a:hover .arrow::before {transform: rotate(45deg);}
		a:hover .arrow::after {transform: rotate(-45deg);}
	
}

/*SP:body-------------------------------------*/
@media screen and (max-width: 767px){
	.pc {display: none !important;}
	.tb {display: none !important;}
	.sp {display: block !important;}
	
	#titleLineTop {width: 100%; height: auto; margin: 50px 0 0; padding: 8px 0 0; text-align: center; font-size: 14px; float: left;}
	#titleLine {width: 100%; height: auto; margin: 0 0 50px; padding: 0 0 8px; text-align: center; font-size: 24px; font-weight: bold; float: left;}
	
	/* Section */
	section {width: 98%; height: auto; margin: 8px 1% 80px; padding: 0 0 8px; font-family: "Sawarabi Mincho", serif; font-weight: 600; font-style: normal; float: left; box-sizing: border-box; border: dotted 1px #707070; border-radius: 5px;}
	section h3 {width: 100%; height: auto; margin: 0 auto 30px; padding: 16px 0; font-size: 20px; background: #F8F4E8; border-radius: 8px 8px 0 0;}
	
	/* slider */
	#sliderSpc {width: 98%; height: auto; margin: 0 1% 20px; padding: 0; float: left;}
	.slider {width: 100%; height: auto; margin: 0; padding: 0;}
	.slider-img {width: 100%; height: auto; margin: 0; padding: 0;}
	
	/* table */
	section table {width: 98%; height: auto; margin: 20px 1% 0; padding: 0; border-collapse:collapse; font-size: 14px; float: left;}
	section table th {width: 23%; height: auto; padding: 8px; box-sizing: border-box; border: dotted 1px #B5B5B5; background: #F8F4E8;}
	section table td {width: 77%; height: auto; padding: 20px 12px; box-sizing: border-box; border: dotted 1px #B5B5B5;}
    
	/* Page-LINK*/
    .news_back {width: 100%; padding: 10px; box-sizing: border-box;}
    .gotop{display: block; width: 60px; height: 60px; box-sizing: border-box; background: #FFF; border: 1px solid #999; padding-top: 30px; text-align: center; letter-spacing: -1px; font-size: 85%; text-decoration: none; color: #333; opacity: 0.5; position: relative; float: right; z-index: 99;}
    .gotop::before{content: ""; display: block; border-top: 2px solid #333; border-right: 2px solid #333; width: 25%; height: 25%; top: 25%; left: 0; right: 0; margin: auto; position: absolute; transform: rotate(-45deg);}
    .gotop:hover{opacity: 1;}
	
	/* Nav */
	#recruitSpc {width: 98%; height: auto; margin: 0 1% 80px; padding: 3px; font-family: 'Noto Serif JP', serif; font-weight: 600; font-style: normal; float: left; border-radius: 8px; box-sizing: border-box; border: solid 1px #CCCCCC; display: flex; flex-flow: column; justify-content: space-between;}
		
		/* nav-index*/
		#menu_index {width: 100%; height: auto; margin: 8px 0; padding: 8px 8px; font-family: 'Noto Serif JP', serif; font-weight: 600; font-style: normal; float: left; box-sizing: border-box; z-index: 99;}
		#menu_index ul {width: 100%; height: auto; margin: 0; padding: 0;}
		#menu_index ul li {width: 100%; height: auto; margin: 0; padding: 0; box-sizing: border-box;}
		
		/* nav */
		.accordion {width: 96%; height: auto; margin: 0 2% 30px; border-radius: 5px; box-shadow: 0 7px 15px -5px rgb(0 0 0 / 5%); background-color: #fff; z-index: 99; display: block; background: #FDD061;}
		.accordion summary {display: flex; justify-content: space-between; align-items: center; position: relative; padding: 1em 2em; color: #5c4300; font-weight: 600; cursor: pointer;}
		.accordion summary::-webkit-details-marker {display: none; z-index: 99;}
		.accordion summary::after {transform: translateY(-25%) rotate(45deg); width: 7px; height: 7px; margin-left: 10px; border-bottom: 3px solid #5c4300b3; border-right: 3px solid #5c4300b3; content: ''; transition: transform .3s;}
		.accordion[open] summary::after {transform: rotate(225deg);}
		.accordion p {transform: translateY(-10px); opacity: 0; margin: 0; padding: .3em 2em 1.5em; color: #5c4300; transition: transform .5s, opacity .5s;}
		.accordion[open] p {transform: none; opacity: 1;}
		
		.menu {width: 100%; height: auto; margin: 8px 0; padding: 8px 8px; font-family: 'Noto Serif JP', serif; font-weight: 600; font-style: normal; float: left; box-sizing: border-box; border: solid 1px #CCCCCC;}
		.menu ul {width: 100%; height: auto; margin: 0; padding: 0;}
		.menu ul li {width: 100%; height: auto; margin: 0; padding: 0; box-sizing: border-box;}
		
		.recbtn a {width: 100%; padding: 16px 0 16px 12px; margin: 3px 0; margin-inline: auto; font-family: 'Noto Serif JP', serif; font-size: 14px; letter-spacing: 0.1em; color: #fff; background: #2B271F; font-weight: 600; border: solid 1px #6B401B; display: block; box-sizing: border-box; text-decoration: none; cursor: pointer; transition: all 0.3s; float: left;}
		.recbtn a:hover {color: #6B401B; background: initial; transition: all 0.3s;}
		
		.arrow {position: relative; display: inline-block; width: 7.4px; height: 13.7px; margin: 3px 16px 0 0; float: right;}
		.arrow::before,
		.arrow::after {content: ""; position: absolute; top: calc(50% - 0.5px); right: 0; width: 10px; height: 2px; border-radius: 9999px; background-color: #FFFFFF; transform-origin: calc(100% - 0.5px) 50%;}
		.arrow::before {transform: rotate(45deg);}
		.arrow::after {transform: rotate(-45deg);}
		a:hover .arrow {position: relative; display: inline-block; width: 7.4px; height: 13.7px; margin: 3px 16px 0 0; float: right;}
		a:hover .arrow::before,
		a:hover .arrow::after {content: ""; position: absolute; top: calc(50% - 0.5px); right: 0; width: 10px; height: 1px; border-radius: 9999px; background-color: #6B401B; transform-origin: calc(100% - 0.5px) 50%;}
		a:hover .arrow::before {transform: rotate(45deg);}
		a:hover .arrow::after {transform: rotate(-45deg);}
	
}