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

#wrapper {width: 100%; min-height: 100vh; margin: 0; padding: 0; box-sizing: border-box; overflow-x: 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;}
	#titleLine {width: 100%; height: auto; margin: 0 0 50px; padding: 0 0 8px; text-align: center; font-size: 24px; font-weight: bold;}
	
	/* Section */
	section {width: 60%; height: auto; margin: 0 20% 30px; padding: 0 0 30px; font-family: "Sawarabi Mincho", serif; font-weight: 600; font-style: normal; box-sizing: border-box; border-bottom: dotted 1px #707070;}
	/* PC: section 中央寄せ */
	@media screen and (min-width:961px){
    	section {
        	/* float: left; を削除 */
        	width: 60%;
        	margin: 0 auto 30px;
    	}
	}
		section h3 {width: 100%; height: auto; margin: 0 auto 30px; padding: 16px 0; font-size: 20px; background: #F8F4E8; border-radius: 8px 8px 0 0;}
		
		.section_wrap {width: 100%; height: auto; margin: 0 0 30px; padding: 0; text-align: center;}
		.section_wrap img {width: 100%; max-width: 800px; height: auto; margin: 0; padding: 0;}
		
		.explain {width: 100%; height: auto; margin: 0; padding: 0;}
		.p1 {width: 100%; height: auto; margin: 0 0 30px; padding: 0; line-height: 22px; font-size: 18px; font-family: "Kaisei Opti", serif; font-weight: 400; font-style: normal; color: #563D00; text-align: center;}
		.p2 {width: 100%; height: auto; margin: 50px 0 20px; padding: 0; font-size: 22px; font-family: 'Noto Serif JP', serif; font-weight: 400; font-style: normal; text-align: center;}
		.explain ul {width: 80%; height: auto; margin: 0 10%; padding: 0;}
		.explain ul li {width: 100%; height: auto; margin: 0; padding: 6px 0; font-size: 16px;}
		
		.entry {width: 100%; max-width: 600px; height: auto; margin: 0 auto; padding: 0; font-size: 18px;}
		.entry li {width: 100%; height: auto; margin: 0; padding: 8px 0;}
		.entryTitle p {width: 100%; height: auto; margin: 0 0 16px; padding: 8px 0; text-align: center; font-size: 20px; background: #E36900; border-radius: 8px; color: white;}
	
	/* 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-index*/
		#menu_title {width: 100%; height: auto; margin: 50px 0 20px; padding: 0; font-size: 22px; font-family: 'Noto Serif JP', serif; font-weight: 600; font-style: normal; text-align: center;}
		#menu_index {width: 80%; height: auto; margin: 8px 10%; padding: 8px 8px 120px; font-family: 'Noto Serif JP', serif; font-weight: 400; font-style: normal; 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 {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; 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: #2C507D; font-weight: 600; border: solid 1px #2C507D; display: block; box-sizing: border-box; text-decoration: none; cursor: pointer; transition: all 0.3s;}
		.recbtn a:hover {color: #2C507D; background: initial; transition: all 0.3s;}
		
		.arrow {float: right; position: relative; display: inline-block; width: 7.4px; height: 13.7px; margin: 3px 16px 0 0;}
		.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 {float: right; position: relative; display: inline-block; width: 7.4px; height: 13.7px; margin: 3px 16px 0 0;}
		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: 96%; height: auto; margin: 0 2% 20px; padding: 0 0 35px; font-family: "Sawarabi Mincho", serif; font-weight: 600; font-style: normal; float: left; box-sizing: border-box; border-bottom: dotted 1px #707070;}
		section h3 {width: 100%; height: auto; margin: 0 auto 30px; padding: 16px 0; font-size: 20px; background: #F8F4E8; border-radius: 8px 8px 0 0;}
		
		.section_wrap {width: 100%; height: auto; margin: 0 0 30px; padding: 0; text-align: center;}
		.section_wrap img {width: 100%; max-width: 800px; height: auto; margin: 0; padding: 0;}
		.explain {width: 100%; height: auto; margin: 0; padding: 0;}
		.p1 {width: 98%; height: auto; margin: 0 1% 30px; padding: 0; line-height: 20px; font-size: 16px; font-family: "Kaisei Opti", serif; font-weight: 400; font-style: normal; color: #563D00;}
		.p2 {width: 100%; height: auto; margin: 50px 0 20px; padding: 0; font-size: 22px; font-family: 'Noto Serif JP', serif; font-weight: 400; font-style: normal; text-align: center;}
		.explain ul {width: 98%; height: auto; margin: 0 1%; padding: 0;}
		.explain ul li {width: 100%; height: auto; margin: 0 0 10px; padding: 5px 5px 12px; font-size: 14px; background: #F8F4E8; box-sizing: border-box; border-radius: 5px;}
		
		.entry {width: 98%; height: auto; margin: 0 1%; padding: 0; font-size: 16px;}
		.entry li {width: 100%; height: auto; margin: 0; padding: 8px 0;}
		.entryTitle {width: 100%; height: auto; margin: 0; padding: 8px 0; text-align: center; font-size: 20px;}
	
	/* 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_title {width: 100%; height: auto; margin: 50px 0 20px; padding: 0; font-size: 22px; font-family: 'Noto Serif JP', serif; font-weight: 600; font-style: normal; text-align: center;}
		#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: #2C507D; font-weight: 600; border: solid 1px #2C507D; display: block; box-sizing: border-box; text-decoration: none; cursor: pointer; transition: all 0.3s; float: left;}
		.recbtn a:hover {color: #2C507D; 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: 96%; height: auto; margin: 0 2% 20px; padding: 0 0 35px; font-family: "Sawarabi Mincho", serif; font-weight: 600; font-style: normal; float: left; box-sizing: border-box; border-bottom: dotted 1px #707070;}
		section h3 {width: 100%; height: auto; margin: 0 auto 30px; padding: 16px 0; font-size: 20px; background: #F8F4E8; border-radius: 8px 8px 0 0;}
		
		.section_wrap {width: 100%; height: auto; margin: 0 0 30px; padding: 0; text-align: center;}
		.section_wrap img {width: 100%; max-width: 800px; height: auto; margin: 0; padding: 0;}
		.explain {width: 100%; height: auto; margin: 0; padding: 0;}
		.p1 {width: 98%; height: auto; margin: 0 1% 30px; padding: 0; line-height: 20px; font-size: 16px; font-family: "Kaisei Opti", serif; font-weight: 400; font-style: normal; color: #563D00;}
		.p2 {width: 100%; height: auto; margin: 50px 0 20px; padding: 0; font-size: 18px; font-family: 'Noto Serif JP', serif; font-weight: 400; font-style: normal; text-align: center;}
		.explain ul {width: 98%; height: auto; margin: 0 1%; padding: 0;}
		.explain ul li {width: 100%; height: auto; margin: 0 0 10px; padding: 5px 5px 12px; font-size: 14px; background: #F8F4E8; box-sizing: border-box; border-radius: 5px;}
		
		.entry {width: 98%; height: auto; margin: 0 1%; padding: 0; font-size: 16px;}
		.entry li {width: 100%; height: auto; margin: 0; padding: 8px 0;}
		.entryTitle {width: 100%; height: auto; margin: 0; padding: 8px 0; text-align: center; font-size: 20px;}
	
	/* 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_title {width: 100%; height: auto; margin: 50px 0 20px; padding: 0; font-size: 18px; font-family: 'Noto Serif JP', serif; font-weight: 600; font-style: normal; text-align: center;}
		#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: #2C507D; font-weight: 600; border: solid 1px #2C507D; display: block; box-sizing: border-box; text-decoration: none; cursor: pointer; transition: all 0.3s; float: left;}
		.recbtn a:hover {color: #2C507D; 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);}
	
}