@charset "utf-8";

/* ■ リセットCSS ■ */
/* Google Fonts
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 100; (Thin)
	font-weight: 300; (Light)
	font-weight: 400; (Regular)
	font-weight: 500; (Medium)
	font-weight: 700; (Bold)
	font-weight: 900; (Black)
	font-family: 'Sofia Sans Condensed', sans-serif;
	font-weight: 500; (Medium)
*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&family=Sofia+Sans+Condensed:wght@500&display=swap');

*, *::before, *::after {
	box-sizing: border-box;
}
body, div, p, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, 
acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, 
sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, input, textarea, 
select, option, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, 
details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, 
summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
	font-weight: normal;
	font-size: 100%;
	vertical-align: baseline;
	word-break: break-all;
	box-sizing: border-box;
}
:root {
	--cBack:	#ffffff;				/* 全体背景 */
	--cMenuC:	#1d2288;				/* メニュー文字 */
	--cMenuB:	#84cef3;				/* メニュー背景 */
	--cFont:	#333333;				/* フォント（黒） */
	--cFontB:	#009ee7;				/* フォント（青） */
	--cFontW:	#ffffff;				/* フォント（白） */
	--cFontR:	#ff0000;				/* フォント（白） */
	--cLink:	#009ee7;				/* リンク */
	--cNewsN:	#c10707;				/* ニュース（お知らせ） */
	--cNewsP:	#dd0fb2;				/* ニュース（体験-個人） */
	--cNewsO:	#0fd1dd;				/* ニュース（体験-団体） */
	--cNewsE:	#740edc;				/* ニュース（イベント） */
	--cNewsR:	#ffb901;				/* ニュース（募　集） */
	--cNewsH:	#0edd1d;				/* ニュース（その他） */
	--cNewsA:	#009ee7;				/* ニュース（クリア） */
	--cNewsRed:	#ff0000;				/* ニュース（New） */
}
body {
	color: var(--cFont);
}
ul, ol, li {
	margin: 0;
	padding: 0;
	list-style: none;
}
dl, dt, dd {
	margin: 0;
	padding: 0;
}
address,em,i {
	font-style: normal;
}
strong,th,b {
	font-weight: normal;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
img {
	width: 100%;
	vertical-align: bottom;
}
a {
	color: inherit;
	text-decoration: none;
}
a:hover {
	opacity: 0.6;
}
body {
	font-family: 'Noto Sans JP', sans-serif;
}

/* ■ 共通部 ■ */
body {
	background: var(--cBack);
}
div.container {
	max-width: 1080px;
	margin: 0 auto;
}
@media screen and (max-width: 900px) {
	div.container {
		max-width: calc(100% - 30px);
	}
}
.sp {
	display: none;
}
@media screen and (max-width: 760px) {
	.sp {
		display: inline;
	}
}
.pc {
	display: inline;
}
@media screen and (max-width: 760px) {
	.pc {
		display: none;
	}
}

/* ■ header ■ */
header {
}
header .header-wrapper {
	display: flex;
	align-items: flex-end;
	padding: 27px 0 12px 0;
}
@media screen and (max-width: 760px) {
	header .header-wrapper {
		display: block;
		padding: 27px 0 12px 0;
	}
}
header .header-wrapper h1 {
	width: 36%;
	padding: 0 3px 0 0;
}
@media screen and (max-width: 760px) {
	header .header-wrapper h1 {
		width: 100%;
		padding: 0 0 20px 0;
	}
}
header .header-wrapper nav {
	width: 64%;
	padding: 0px 0 5px 14px;
}
@media screen and (max-width: 760px) {
	header .header-wrapper nav {
		width: 100%;
		padding: 0 0 5px 0px;
	}
}
header .header-wrapper nav ul {
	display: flex;
	justify-content: space-between;
}
header .header-wrapper nav ul li {
	width: calc(100% / 4 - 11px);
	padding: 0 0 0 0;
	display: flex;
	align-items: center;
	background: var(--cMenuB);
	border-radius: 8px;
}
@media screen and (max-width: 760px) {
	header .header-wrapper nav ul li {
		width: calc(100% / 4 - 5px);
	}
}
header .header-wrapper nav ul li a {
	display: block;
	width: 100%;
	padding: 6px 0;
	color:  var(--cMenuC);
	font-size: 18px;
	font-weight: bold;
	line-height: 1.2;
	text-align: center;
}
@media screen and (max-width: 1080px) {
	header .header-wrapper nav ul li a {
		font-size: 14px;
	}
}
@media screen and (max-width: 760px) {
	header .header-wrapper nav ul li a {
		font-size: 12px;
	}
}
header .header-image {
}
.header-image img {
	border-radius: 30px;
}

/* ■ main ■ */
main {
	max-width: 900px;
	margin: 0 auto;
}
main .line {
}

/* ■ main news ■ */
main .news {
	padding: 22px 0;
}

/* ■ main news-menu ■ */
main .news-menu {
	padding: 0 0 40px 0;
	text-align: center;
}
main .news-menu p {
	padding: 0 0 10px 0;
	color: var(--cFontB);
	text-align: center;
	font-weight: bold;
}
main .news-menu ul {
	display: inline-block;
	text-align: center;
	margin: 1px 0 7px 0;
}
main .news-menu ul li {
	width: 92px;
	margin: 0 3px;
	display: inline-block;
	text-align: center;
	color: var(--cFontW);
	border-radius: 4px;
	line-height: 1.6;
}
@media screen and (max-width: 760px) {
	main .news-menu ul li {
		width: 72px;
		font-size: 14px;
	}
}
main .news-menu ul li:hover {
	opacity: 0.6;
	cursor: pointer;
}
main .news-menu ul li.notice {
	background: var(--cNewsN);
}
main .news-menu ul li.experience-p {
	background: var(--cNewsP);
}
main .news-menu ul li.experience-o {
	background: var(--cNewsO);
}
main .news-menu ul li.event {
	background: var(--cNewsE);
}
main .news-menu ul li.recruit {
	background: var(--cNewsR);
}
main .news-menu ul li.other {
	background: var(--cNewsH);
}
main .news-menu ul li.clear {
	width: 194px;
	background: none;
	border: 2px var(--cNewsA) solid;
	color: var(--cNewsA);
}
@media screen and (max-width: 760px) {
	main .news-menu ul li.clear {
		width: 157px;
	}
}

/* ■ main news-list ■ */
main .news-list {
}
main .news-list a {
	margin: 0 0 8px 0;
	display: flex;
	flex-wrap:  wrap;
	align-items: flex-start;
}
main .news-list a.none {
}
main .news-list li a .date {
	width: 100px;
	font-size: 15px;
	line-height: 1.6;
}
@media screen and (max-width: 760px) {
	main .news-list li a .date {
		width: 100%;
	}
	main .news-list li a .date::before {
		content: "■ ";
	}
}
main .news-list li a .date .new {
	content: 'New';
	display: inline-block;
	padding: 0px 7px;
	font-size: 13px;
	color: var(--cFontW);
	border-radius: 4px;
	background: var(--cNewsRed);
}
main .news-list a.none:hover {
	opacity: 1;
	cursor: auto;
}
main .news-list li a .mess {
	width: calc(100% - 100px);
	padding: 0 0 0 20px;
	font-size: 15px;
	line-height: 1.6;
	text-decoration: underline;
}
@media screen and (max-width: 760px) {
	main .news-list li a .mess {
		width: 100%;
		padding: 0 0 0 10px;
	}
}
main .news-list li a.none .mess {
	text-decoration: auto;
}
main .news-list li a .mess .kind {
	display: inline-block;
	width: 95px;
	margin: 0 10px 0 0;
	font-size: 15px;
	line-height: 1.6;
	text-align: center;
	border-radius: 5px;
	color: var(--cFontW);
}
main .news-list li a .mess .kind.notice {
	background: var(--cNewsN);
}
main .news-list li a .mess .kind.experience-p {
	background: var(--cNewsP);
}
main .news-list li a .mess .kind.experience-o {
	background: var(--cNewsO);
}
main .news-list li a .mess .kind.event {
	background: var(--cNewsE);
}
main .news-list li a .mess .kind.recruit {
	background: var(--cNewsR);
}
main .news-list li a .mess .kind.other {
	background: var(--cNewsH);
}

/* ■ main news-space/button ■ */
main .news-space {
	padding: 0 0 30px 0;
}
main .news-button {
}
main .news-button a {
	display: block;
	width: 240px;
	margin: 0 auto;
	padding: 5px 0;
	text-align: center;
	border: #333 1px solid;
}
main .news-button a::after {
    content: "≫";
    display: inline-block;
    padding: 0 0 0 5px;
}

/* ■ main what ■ */
main .what {
	padding: 40px 0 40px 0;
}
main .what-wrapper {
	display: flex;
}
@media screen and (max-width: 760px) {
	main .what-wrapper {
		display: block;
	}
}
main .what-wrapper p {
	width: 69%;
	padding: 0 33px 0 0;
	font-size: 15px;
	line-height: 1.7;
}
@media screen and (max-width: 760px) {
	main .what-wrapper p {
		width: 100%;
		padding: 0 0 0 0;
	}
}
main .what-wrapper div {
	width: 31%;
}
@media screen and (max-width: 760px) {
	main .what-wrapper div {
		max-width: 200px;
		margin: 0 auto;
		padding: 30px 0 0 0;
	}
}
main .what-sub-title {
	padding: 20px 0 35px 0;
}

/* ■ main information ■ */
main .information {
	padding: 45px 0 20px 0;
}
main .information-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 35px;
}
@media screen and (max-width: 760px) {
	main .information-wrapper {
		display: block;
	}
}
main .information-wrapper h2 {
	padding: 0 0 5px 0;
	font-weight: bold;
}
main .information-wrapper h2 span {
	color: var(--cFontR);
	font-weight: bold;
}
main .information-wrapper > div {
	width: calc(100% / 2 - 18px);
}
@media screen and (max-width: 760px) {
	main .information-wrapper > div {
		width: 100%;
	}
}
main .information-wrapper > div img {
	padding: 0 0 5px 0;
}
main .information-wrapper > div p {
	padding: 0px 0 30px 0;
	font-size: 15px;
}
main .information-about {
	padding: 0 0 20px 0;
	display: flex;
	flex-wrap: wrap;
}
main .information-about dt {
	width: 80px;
	font-size: 16px;
}
main .information-about dd {
	width: calc(100% - 80px);
	font-size: 16px;
}

/* ■ main access ■ */
main .access {
	padding: 30px 0 10px 0;
}
main .access-map {
	padding: 0 0 10px 0;
}
main .access-map iframe {
	width: 100%;
	height: 300px;
}
main .access-wrapper {
	display: flex;
	padding: 0 0 30px 0;
}
@media screen and (max-width: 760px) {
	main .access-wrapper {
		display: block;
		padding: 0 0 0 0;
	}
}
main .access-wrapper .access-left {
	width: 50%;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}
@media screen and (max-width: 760px) {
	main .access-wrapper .access-left {
		width: 100%;
	}
}
main .access-wrapper .access-left dt {
	width: 86px;
	font-size: 12px;
}
main .access-wrapper .access-left dd {
	width: calc(100% - 86px);
	font-size: 12px;
}
main .access-wrapper .access-right {
	width: 50%;
	padding: 0 0 0 40px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	align-content: flex-start;
}
@media screen and (max-width: 760px) {
	main .access-wrapper .access-right {
		width: 100%;
		padding: 0 0 0 0;
	}
}
main .access-wrapper .access-right dt {
	width: 86px;
	font-size: 12px;
}
main .access-wrapper .access-right dd {
	width: calc(100% - 86px);
	font-size: 12px;
}

/* ■ main experience ■ */
main .experience {
	padding: 45px 0 20px 0;
}
main .experience-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 27px;
}
@media screen and (max-width: 760px) {
	main .experience-wrapper {
		display: block;
	}
}
main .experience-wrapper h2 {
	padding: 0 0 5px 0;
	font-weight: bold;
}
main .experience-wrapper h2 span {
	color: var(--cFontR);
	font-weight: bold;
}
main .experience-wrapper > div {
	width: calc(100% / 3 - 18px);
}
@media screen and (max-width: 760px) {
	main .experience-wrapper > div {
		width: 100%;
	}
}
main .experience-wrapper > div img {
	padding: 0 0 5px 0;
}
main .experience-wrapper > div p {
	padding: 0px 0 30px 0;
	font-size: 15px;
}
main .experience-about {
	padding: 0 0 20px 0;
	display: flex;
	flex-wrap: wrap;
}
main .experience-about dt {
	width: 80px;
	font-size: 16px;
}
main .experience-about dd {
	width: calc(100% - 80px);
	font-size: 16px;
}
main .experience-button {
	padding: 0 0 30px 0;
}
main .experience-button a {
	display: block;
	width: 200px;
	margin: 0 auto;
	padding: 5px 0;
	text-align: center;
	border: #333 1px solid;
}
main .experience-button a::after {
    content: "≫";
    display: inline-block;
    padding: 0 0 0 5px;
}
main .experience-request a {
	display: block;
	width: 200px;
	padding: 6px 0;
	margin: 10px auto 40px auto;
	font-size: 18px;
	color: var(--cMenuC);
	font-weight: bold;
	line-height: 2.4;
	text-align: center;
	background: var(--cMenuB);
	border-radius: 8px;
}

/* ■ main request ■ */
main .request {
	padding: 22px 0px;
}

/* ■ main request-wrapper ■ */
main .request-wrapper {
	padding: 22px 0px;
}
main .request-wrapper .red {
	color: red;
}

/* ■ main request contact-flow ■ */
main .request-wrapper .contact-flow {
	display: flex;
	justify-content: space-between;
	padding: 20px 20px 0 20px;
	margin-bottom:10px;
	list-style-type: none;
}
main .request-wrapper .contact-flow > li {
	flex-basis: calc(100% / 3 - 25px);;
}
main .request-wrapper .contact-flow > li .icon {
	font-family: 'Montserrat', sans-serif;
	font-size: 18px;
	line-height: 50px;
	width: 50px;
	color: #fff;
	background: steelblue;
	margin: 0 auto 15px auto;
	display: block;
	border-radius: 50%;
	text-align: center;
	position: relative;
	letter-spacing: 2px;
}
main .request-wrapper .contact-flow > li .icon::before {
	content: "";
	border: solid transparent;
	border-width: 8px;
	border-top-color: steelblue;
	position: absolute;
	top: calc(100% - 2px);
	left: 50%;
	transform: translateX(-50%);
}
main .request-wrapper .contact-flow > li dl {
	padding: 15px;
	margin: 0;
	border: 3px solid steelblue;
	border-radius: 10px;
	position: relative;
}
main .request-wrapper .contact-flow > li dl.checked {
	background: #d4edff;
}
main .request-wrapper .contact-flow > li:not(:last-child) dl::before {
	content: "";
	width: 14px;
	height: 14px;
	margin-right: 10px;
	display: inline-block;
	border-top: 4px solid steelblue;
	border-right: 4px solid steelblue;
	position: absolute;
	top: calc(50% - 6px);
	left: 105%;
	transform: rotate(45deg);
}
@media screen and (max-width: 760px) {
	main .request-wrapper .contact-flow > li:not(:last-child) dl::before {
		left: 110%;
	}
}
main .request-wrapper .contact-flow > li dl dt {
	font-size: 20px;
	font-weight: 600;
	color: steelblue;
	flex-basis: 20%;
	margin-bottom: 1vh;
	text-align: center;
}
@media screen and (max-width: 760px) {
	main .request-wrapper .contact-flow > li dl dt {
		font-size: 18px;
		margin-bottom: 0;
	}
}
main .request-wrapper .contact-flow > li dl dd {
	margin-left: 0;
}
@media screen and (max-width: 760px) {
	main .request-wrapper .contact-flow > li dl dd {
		display: none;
	}
}

/* ■ main request contact-personal ■ */
main .request-wrapper .contact-personal {
	padding: 20px 20px 0 20px;
	margin-botton: 10px;
}
main .request-wrapper .contact-personal h4 {
	margin-bottom: 10px;
	font-size: 1.2rem;
}
main .request-wrapper .contact-personal > ul {
	margin-left: 2rem;
	margin-bottom: 10px;
}
main .request-wrapper .contact-personal > ul li {
	list-style: disc;
}

/* ■ main request contact-form ■ */
main .request-wrapper .contact-form {
	padding: 20px 20px 0 20px;
}
main .request-wrapper .contact-form h4 {
	font-size: 1.2rem;
	margin-bottom: 10px;
}
main .request-wrapper .contact-form p.message {
	margin-bottom: 10px;
}
main .request-wrapper .contact-form > form {
	padding: 20px;
	border: #ccc 1px solid;
}
main .request-wrapper .contact-form .form-group {
	margin-bottom: 1rem;
}
main .request-wrapper .contact-form .form-control {
	display: block;
	max-width: 100%;
	width: 100%;
	padding: 10px;
	background: #f8f8f8;
	font-family: inherit;
	font-size: 1rem;
	border: #ccc 1px solid;
}
main .request-wrapper .contact-form .readonly {
	background: none;
}
main .request-wrapper .contact-form label {
	display: inline-block;
	padding-left: 0.2rem;
	margin-bottom: 0.2rem;
}
main .request-wrapper .contact-form label span {
	color: red;
}
main .request-wrapper .contact-form label span.error-php {
	font-weight: bold;
}
main .request-wrapper .contact-form #organization,
main .request-wrapper .contact-form #fullname,
main .request-wrapper .contact-form #tel,
main .request-wrapper .contact-form #email,
main .request-wrapper .contact-form #subject {
	max-width: 500px;
}
main .request-wrapper .contact-form #date,
main .request-wrapper .contact-form #time,
main .request-wrapper .contact-form #count {
	max-width: 200px;
}
main .request-wrapper .contact-form input,
main .request-wrapper .contact-form textarea {
}
main .request-wrapper .contact-form .form-button {
	margin-top: 1.5rem;
	text-align: center;
}
main .request-wrapper .contact-form .form-button button {
	display: inline-block;
	width: 200px;
	padding: 10px 0;
	margin: 0 40px;
	text-align: center;
	background: steelblue;
	font-size: 1rem;
	color: #fff;
	border:none;
	border-radius: 40px;
}
@media screen and (max-width: 760px) {
	main .request-wrapper .contact-form .form-button button {
		width: 70px;
		margin: 0 10px;
	}
	main .request-wrapper .contact-form .form-button button.confirm {
		width: 100px;
		margin: 0 10px;
	}
}
main .request-wrapper .contact-form .form-button button:hover {
	opacity: 0.6;
	cursor: pointer;
}

/* ■ main request contact-end ■ */
main .request-wrapper .contact-end {
	padding: 20px 20px 0 20px;
}
main .request-wrapper .contact-end > p {
	paddingleft: 20px;
}
main .request-wrapper .contact-end h4 {
	font-size: 1.2rem;
	margin-bottom: 10px;
}

/* ■ main request-space ■ */
main .request-space {
	padding: 0 0 30px 0;
}

/* ■ footer ■ */
footer {
	max-width: 615px;
	margin: 0 auto;
	padding: 10px 0 20px 0;
}
footer p {
	text-align: center;
}
footer p small {
	font-size: 9px;
}

/* ■ main news-detail-wrapper ■ */
main .news-detail-wrapper {
}
main .news-detail-wrapper h2,h3,h4,h5 {
	margin: revert;
	font-size: revert;
	font-weight: revert;
}
main .news-detail-wrapper p {
	font-size: revert;
	margin: revert;
}
main .news-detail-wrapper ul,main .news-detail-wrapper ol {
	margin: 0 0 0 20px;
	list-style: revert;
}
main .news-detail-wrapper ul li,main .news-detail-wrapper ol li {
	list-style: revert;
}
main .news-detail-wrapper .mess .kind {
	padding: 0 0 0 0;
	font-size: 15px;
	line-height: 1.6;
}
main .news-detail-wrapper .mess .kind {
	display: inline-block;
	width: 95px;
	margin: 0 10px 0 0;
	font-size: 15px;
	line-height: 1.6;
	text-align: center;
	border-radius: 5px;
	color: var(--cFontW);
}
main .news-detail-wrapper .mess .kind.notice {
	background: var(--cNewsN);
}
main .news-detail-wrapper .mess .kind.experience-p {
	background: var(--cNewsP);
}
main .news-detail-wrapper .mess .kind.experience-o {
	background: var(--cNewsO);
}
main .news-detail-wrapper .mess .kind.event {
	background: var(--cNewsE);
}
main .news-detail-wrapper .mess .kind.recruit {
	background: var(--cNewsR);
}
main .news-detail-wrapper .mess .kind.other {
	background: var(--cNewsH);
}

/* ■ main experience-detail-wrapper ■ */
main .experience-detail-wrapper {
}
main .experience-detail-wrapper h2,h3,h4,h5 {
	margin: revert;
	font-size: revert;
	font-weight: revert;
}
main .experience-detail-wrapper p {
	font-size: revert;
	margin: revert;
}
main .experience-detail-wrapper ul,main .experience-detail-wrapper ol {
	margin: 0 0 0 20px;
	list-style: revert;
}
main .experience-detail-wrapper ul li,main .experience-detail-wrapper ol li {
	list-style: revert;
}