@charset "utf-8";
/*common
----------------------------------------------------*/
/* 設定 */
* { /*游ゴシック*/
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	/*font-feature-settings: 'palt';*/
}
.en {
	font-family: 'Lato', sans-serif;
}
html {
	font-size: 62.5%;
	margin: 0;
	padding: 0;
}
body {
    -ms-content-zooming: none;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    color: #1f1f1f;
    line-height: 1.6;
    font-family: 'Noto Sans JP', sans-serif;
    font-feature-settings: "palt";
	overflow-x: hidden;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
a {
	text-decoration: none;
}
ul, li {
	list-style: none;
}
/* float */
.fLeft {
	float: left !important;
}
.fRight {
	float: right !important;
}
/* clearfix */
.cf:after {
	content: "";
	display: block;
	clear: both;
}
/* align */
.cen {
	text-align: center !important;
}
.left {
	text-align: left !important;
}
.right {
	text-align: right !important;
}
/* text-indent */
.indent {
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
}
/* font-size */
/* margin,padding */
/* -------------------------------------------------
layout
----------------------------------------------------*/
#main {
	overflow: hidden;
}
.container {
	width: 90%;
	max-width: 1200px;
	margin: auto;
}
/* ===== header ===== */
header {
	background: #000;
	border-bottom: 1px solid #FFF;
	-webkit-background-size: 4px 4px;
	padding: 6px 10px 6px 10px;
	height: 43px;
	overflow: hidden !important;
}

.h-menu {
	position: absolute;
	top: 9px;
	right: 9px;
	z-index: 9999;
	width: 40px;
	height: 40px;
}
@media screen and (min-width:768px) {
	.h-menu {
		top: 18px;
		right: 18px;
		width: 50px;
		height: 50px;
	}
}

#g-nav-wrap-sp {
	position: absolute;
	top: 0;
	right: -100%;
	z-index: 1000;
	width: 70%;
	height: 100vh;
	background: #fff;
	border: 9px solid #F1CD98;
}
@media screen and (min-width:600px) {
	#g-nav-wrap-sp {
		width: 60%;
	}
}
@media screen and (min-width:769px) {
	#g-nav-wrap-sp {
		width: 40%;
		border: 18px solid #F1CD98;
	}
}

.g-nav-sp-in {
	padding: 70px 0 0;
}
.g-nav-sp {
	border-top: 1px solid #F1CD98;
}
.g-nav-sp a {
	position: relative;
	display: block;
	padding: 20px 20px;
	font-size: 1.5rem;
	font-weight: bold;
	border-bottom: 1px solid #F1CD98;
}
@media screen and (min-width:600px) {
	.g-nav-sp a {
		font-size: 2.0rem;
	}
}
@media screen and (min-width:768px) {
	.g-nav-sp a {
		font-size: 2.6rem;
	}
}
.g-nav-sp a:before {
	content: "";
	position: absolute;
	top: 50%;
	right: 20px;
	width: 19px;
	height: 6px;
	background: url("../img/menu_arr.png") no-repeat 0 0 / 100%;
	transform: translateY(-50%);
}
@media screen and (min-width:600px) {
	.g-nav-sp a:before {
		width: 38px;
		height: 11px;
	}
}


/* ====================================
index.html
====================================== */

header h2 {
    padding: 1px 0 1px 0px !important;
}

.footer {
	padding: 10.667vw 0 5.867vw;
	background: #ffffff;
}
.f-announce {
	margin-bottom: 7.467vw;
}
.f-announce img {
	width: 100%;
}
.f-sns-wrap {
	margin: 4.8vw auto 0;
}
.f-sns-wrap__head {
	width: 33.6%;
	margin: 0 auto;
}
.f-sns-btn {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	width: 85.334%;
	margin: 2.133vw auto 0;
}
.f-sns-btn__line {
	width: 26.667vw;
}
.f-sns-btn__tw {
	width: 26.667vw;
}
.f-sns-btn__ig {
	width: 32vw;
}
.btn-top {
	max-width: 90.667%;
	margin: auto;
}
@media screen and (min-width: 751px) {
	.footer {
		padding: 80px 0 44px;
	}
	.f-announce {
		margin-bottom: 56px;
	}
	.f-sns-wrap {
		margin: 36px auto 0;
	}
	.f-sns-wrap__head {
		width: 252px;
	}
	.f-sns-btn {
		width: 640px;
		margin: 16px auto 0;
	}
	.f-sns-btn__line {
		width: 200px;
	}
	.f-sns-btn__tw {
		width: 200px;
	}
	.f-sns-btn__ig {
		width: 240px;
	}
	.btn-top {
		max-width: 680px;
		width: 90.667%;;
	}
}


/* ====================================
   common
====================================== */

button {
    margin: 0;
    padding: 0;
    border: 0;
	color: inherit;
    background: transparent;
}

.main {
	overflow: hidden;
}

#hakata {
	margin: 0 auto;
	width: 100%;
}
@media screen and (min-width: 751px) {
	#hakata {
		max-width: 750px;
	}
}

#hakata * {
	box-sizing: border-box;
}
#hakata hr {
	padding: 0;
	border: 0;
	margin: 0;
}

.g-pagetop {
	position: fixed;
	bottom: 16px;
	right: 4.5334vw;
	width: 15.7334vw;
	aspect-ratio: 1;
	z-index: 10;
}
.g-pagetop.is-stopped {
	position: absolute;
	bottom: unset;
	top: 0;
	transform: translateY(-50%);
}
@media screen and (min-width: 750px) {
	.g-pagetop {
		right: 17px;
		width: 59px;
	}
}


/* ====================================
   college
====================================== */

:root {
	--radius-sm: .3125em;            
	--radius-md: .5em;            
	--radius-lg: 1em;

	--c-ffffff: 255 255 255;
	--c-000000: 0 0 0;
	
	--font-regu: 400;
	--font-medi: 500;
	--font-bold: 700;
}

p, h1, h2, h3, h4, h5, h6 , dl, dt, dd {
	margin: 0;
	padding: 0;
}

fieldset {
	margin: unset;
	padding: unset;
	border: 0;
} 

/* html, body {
	font-size: 1rem;
}
@media screen and (max-width: 750px) {
	html, body {
		font-size: 2.1334vw;
	}
} */

.kodomocollege {
	margin-inline: auto;
	max-width: 750px;
	width: 100%;
	background-color: #FFFAF0;
}

.sr-only {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
}


.hero {
	position: relative;
}
.hero .hero__btn {
	position: fixed;
	bottom: 21.6667vw;
	right: 2.1333vw;
	width: 25.0667vw;
	aspect-ratio: 1;
	z-index: 1000;
}
@media screen and (min-width: 750px) {
	.hero .hero__btn {
		bottom: 100px;
		right: 16px;
		width: 188px;
	}
}


.info {
	padding-block: 6.9334vw 5.3334vw;
	background-color: #F9914A;
}
.info .info__important {
	display: grid;
	place-content: center;
	margin: 0 auto;
	width: 83.73334%;
	aspect-ratio: 314/28;
	font-size: 4.2667vw;
	line-height: 1.25;
	font-weight: var(--font-medi);
	color: #ffffff;
	background-color: #DC000C;
}
.info .info__please {
	margin: 1.0667vw auto 0;
	font-size: 3.2vw;
	line-height: 1.6667;
	font-weight: var(--font-medi);
	color: #ffffff;
	text-align: center;
}
.info .info__btn {
	margin: 3.2vw auto 0;
	width: 34.6667%;
}
.info .info__btn img {
	width: 100%;
}
.info .info__text {
	margin: 7.4667vw auto 0;
	font-size: 4.8vw;
	line-height: 1.7778;
	font-weight: var(--font-bold);
	color: #ffffff;
	text-align: center;
}
.info .info__text span {
	font-weight: var(--font-bold);
	color: #FEFF05;
}
.info .info__note {
	margin: 7.4667vw auto 0;
	width: 92.2667%;
	font-size: 2.9334vw;
	line-height: 1.6364;
	font-weight: var(--font-medi);
}
@media screen and (min-width: 750px) {
	.info {
		padding-block: 52px 40px;
		background-color: #F9914A;
	}
	.info .info__important {
		font-size: 32px;
	}
	.info .info__please {
		margin: 8px auto 0;
		font-size: 24px;
	}
	.info .info__btn {
		margin: 24px auto 0;
	}
	.info .info__text {
		margin: 56px auto 0;
		font-size: 36px;
	}
	.info .info__note {
		margin: 56px auto 0;
		font-size: 22px;
	}
}


.event {
	padding-block: 9.3334vw 9.6vw;
	background-color: #F78FAB;
}
.event .event__title {
	margin: 0 auto;
	width: 90.667%;
}
.event .event-list {
	margin: 0 auto;
	width: 90.667%;
}
.event .event-list.list-vertical {
	margin-top: -9.3334vw;
	display: grid;
}
.event .event-list.list-horizontal {
	margin-top: 4.2667vw;
	display: grid;
	grid-template-columns: repeat(2, 46.177%);
	justify-content: space-between;
}
.event .event-list .event-list__place {
	margin-top: 1.0667vw;
	font-size: 2.9333vw;
	line-height: 1.3636;
	font-weight: var(--font-medi);
}
.event .event-list .event-list__time {
	font-size: 2.9333vw;
	line-height: 1.3636;
	font-weight: var(--font-medi);
}
.event .event-list .event-list__btn {
	margin-top: 2.1333vw;
}
@media screen and (min-width: 750px) {
	.event {
		padding-block: 70px 72px;
	}
	.event .event-list.list-vertical {
		margin-top: -70px;
	}
	.event .event-list.list-horizontal {
		margin-top: 32px;
	}
	.event .event-list .event-list__place {
		margin-top: 8px;
		font-size: 22px;
	}
	.event .event-list .event-list__time {
		font-size: 22px;
	}
	.event .event-list .event-list__btn {
		margin-top: 16px;
	}
}


.challengers {
	margin: 17.0667vw auto 0;
}
.challengers-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	justify-content: space-between;
	column-gap: 2.93334%;
}
.challengers-list div {
	position: relative;
}
.challengers-list div:last-child {
	width: 100%;
	aspect-ratio: 364/240;
}
.challengers-list div:last-child img {
	position: absolute;
	inset: 0;
	max-width: unset;
	width: 100vw;
}
@media screen and (min-width: 750px) {
	.challengers {
		margin: 122px auto 0;
	}
	.challengers-list div:last-child img {
		width: 750px;
	}
}


.announce {
	margin: 0 auto;
	width: 89.0667%;
}
.announce__note {
	font-size: 2.9334vw;
	line-height: 1.8182;
	font-weight: var(--font-medi);
}
.announce__text {
	font-size: 2.9334vw;
	line-height: 1.8182;
	font-weight: var(--font-medi);
}
.announce__text:not(:first-child) {
	margin-top: 1lh;
}
@media screen and (min-width: 750px) {
	.announce__note {
		font-size: 22px;
	}
	.announce__text {
		font-size: 22px;
	}
}


.others {
	margin: 11.7334vw auto 0;
	width: 85.8667%;
}
.others-list {
	display: grid;
	row-gap: 6.667vw;
	text-align: center;
}
@media screen and (min-width: 750px) {
	.others {
		margin: 88px auto 0;
	}
	.others-list {
		row-gap: 50px;
	}
}


.instagram {

}
.instagram .instagram__title {
	margin: 23.4667vw auto 0;
}
.instagram .instagram-list {
	margin: 5.3334vw auto 0;
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 13.334vw;
}
.instagram .instagram-list li {
	width: 21.3334%;
	filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, .16));
}
@media screen and (min-width: 750px) {
	.instagram .instagram__title {
		margin: 176px auto 0;
	}
	.instagram .instagram-list {
		margin: 40px auto 0;
		column-gap: 100px;
	}
}


.hash {
	position: relative;
}


.search {
	padding: 0 0 9.5vw;
	background-color: #F78FAB;
}
.search-heading {
	position: relative;
}
.search-heading__text {
	position: absolute;
	bottom: 8%;
	right: 5.334%;
	width: 66.667%;
	font-size: 2.9333vw;
	line-height: 1.3636;
	font-weight: var(--font-medi);
}
.search-group {
	position: relative;
	padding: 7.4667vw 5.3334vw 6.4vw;
	margin: 16vw auto 0;
	width: 90.6667%;
	transform: translateY(1px);
	background-color: #FFFAF0;
}
.search-group::before {
	content: "";
	position: absolute;
	top: -16vw;
	left: 0;
	right: 0;
	width: 100%;
	aspect-ratio: 340/60;
	background-image: url(../img/search-group.webp);
	background-repeat: no-repeat;
	background-size: 100% auto;
}
.search-block {
	display: grid;
	row-gap: 4.8vw;
}
@media screen and (min-width: 750px) {
	.search {
		padding: 0 0 72px;
	}
	.search-heading__text {
		font-size: 22px;
	}
	.search-group {
		padding: 56px 40px 48px;
		margin: 120px auto 0;
	}
	.search-group::before {
		top: -120px;
	}
	.search-block {
		row-gap: 36px;
	}
}

/* 選択項目用 */
.select-date .checkbox-group {
	display: grid;
	grid-template-columns: repeat(2, minmax(48.8136%, 1fr));
	grid-template-rows: repeat(7, 1fr);
	grid-auto-flow: column;
	column-gap: 1.8667vw;
	margin: 0 auto;
	width: 98.3334%;
}
.select-age .checkbox-group {
	display: grid;
	grid-template-columns: repeat(2, minmax(48.8136%, 1fr));
	grid-template-rows: repeat(2, 1fr);
	grid-auto-flow: column;
	column-gap: 1.8667vw;
	margin: 0 auto;
	width: 98.3334%;
}
.select-date .checkbox-group div:not([class]),
.select-age .checkbox-group div:not([class]) {
	--_border-size: 0.5334vw;
	display: grid;
	grid-template-columns: 16.6667% 1fr;
	align-items: center;
	column-gap: 5.556%;
	padding-block: 2.9334vw;
	border-bottom: var(--_border-size) solid #E5E5E5;
	cursor: pointer;
}
.select-date .checkbox-group input[type="checkbox"][id^="d-"],
.select-age .checkbox-group input[type="checkbox"][id^="a-"],
.select-category .checkbox-group input[type="checkbox"][id^="c-"] {
	--_border-size: 0.5334vw;
	width: 6.4vw;
	height: 6.4vw;
	border: var(--_border-size) solid #000000;
	background-color: rgb(var(--c-ffffff));
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	transition: background-image 0.2s;
	cursor: inherit;
	appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.select-date .checkbox-group input[type="checkbox"][id^="d-"]:focus-visible,
.select-age .checkbox-group input[type="checkbox"][id^="a-"]:focus-visible,
.select-category .checkbox-group input[type="checkbox"][id^="c-"]:focus-visible {
  outline: 2px solid blue;
  outline-offset: 2px;
}
.select-date .checkbox-group input[type="checkbox"][id^="d-"]:checked,
.select-age .checkbox-group input[type="checkbox"][id^="a-"]:checked,
.select-category .checkbox-group input[type="checkbox"][id^="c-"]:checked {
	background-image: url('../img/select_check.svg');
}
.select-date .checkbox-group label[for^="d-"] {
	font-size: 4.2667vw;
	line-height: 1.5;
	font-weight: var(--font-medi);
	cursor: inherit;
}
.select-age .checkbox-group label[for^="a-"] {
	font-size: 4vw;
	line-height: 1.5;
	font-weight: var(--font-medi);
	cursor: inherit;
}
.select-date .checkbox-group label[for^="d-"].holiday {
	letter-spacing: -0.05em;
}
.select-category .checkbox-group {
	display: grid;
	row-gap: 4vw;
	margin: 2.1334vw auto 0;
    width: 98.6667%;
}
.select-category .checkbox-group div:not([class]) {
	position: relative;
	cursor: pointer;
}
.select-category .checkbox-group input[type="checkbox"][id^="c-"] {
	position: absolute;
	top: 50%;
	left: 37.9662%;
	transform: translateY(-50%);
	cursor: inherit;
}
.select-category .checkbox-group div:not([class]):last-child input[type="checkbox"][id^="c-"] {
	left: 25.3379%;
}
.select-category .checkbox-group label[for^="c-"] {
	cursor: inherit;
}
@media screen and (min-width: 750px) {
	.select-date .checkbox-group div:not([class]),
	.select-age .checkbox-group div:not([class]) {
		--_border-size: 4px;
		padding-block: 22px;
	}
	.select-date .checkbox-group input[type="checkbox"][id^="d-"],
	.select-age .checkbox-group input[type="checkbox"][id^="a-"],
	.select-category .checkbox-group input[type="checkbox"][id^="c-"] {
		--_border-size: 4px;
		width: 48px;
		height: 48px;
	}
	.select-date .checkbox-group label[for^="d-"] {
		font-size: 32px;
	}
	.select-age .checkbox-group label[for^="a-"] {
		font-size: 30px;
	}
	.select-category .checkbox-group {
		margin: 16px auto 0;
		row-gap: 30px;
	}
}


/* 検索ボタン用 */
.search-btns {
	display: grid;
	row-gap: 3.2vw;
	margin: 5.6vw auto 0;
}
.search-btns__note {
	margin: 0 auto;
	width: 95.3334%;
	font-size: 2.9333vw;
	line-height: 1.8182;
	font-weight: var(--font-medi);
}
.search-for {
	margin: 0 auto;
	width: 48%;
}
.search-clear {
	margin: 0 auto;
	width: 98%;
}
.search-unnecessary {
	margin: 4.8vw auto 0;
	width: 78.9334%;
}
.search-results {
	margin: 1em 0 0;
}
.search-articles .notfound {
	margin-bottom: 1em;
	font-size: 2.9333vw;
	line-height: 1.8182;
	font-weight: var(--font-medi);
	text-align: center;
}
.search-articles {
	border-bottom: 1px solid #666666;
	background-color: #FFFAF0;
}
@media screen and (min-width: 750px) {
	.search-btns {
		row-gap: 24px;
		margin: 42px auto 0;
	}
	.search-btns__note {
		font-size: 22px;
	}
	.search-unnecessary {
		margin: 36px auto;
	}
	.search-articles .notfound {
		font-size: 22px;
	}
}


/* 検索結果用 */
.o-article {
	display: grid;
	grid-template-columns: 40.8451% 1fr;
	gap: 2.817%;
	margin-inline: auto;
	padding-block: 30px;
	width: 94.6667%;
}
.o-article + .o-article {
	border-top: 1px solid #666666;
}
.o-images {
	margin: 0;
}
.o-images img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
.o-title {
	font-size: 3.7334vw;
	font-weight: var(--font-bold);
}
.o-status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.8vw;
	margin-top: 2.1334vw;
}
.o-status:empty {
	display: none;
}
.o-age {
	display: inline-block;
	padding: 0.8vw 2.1334vw;
	font-size: 2.9334vw;
	color: #ffffff;
	border-radius: var(--radius-sm);
}
.o-category {
	display: inline-block;
	padding: 0.8vw 2.1334vw;
	font-size: 2.9334vw;
	color: #ffffff;
	border-radius: var(--radius-sm);
}
.o-recommended {
	display: inline-block;
	padding: 0.8vw 2.1334vw;
	font-size: 2.9334vw;
	color: #FFFF00;
	border-radius: var(--radius-sm);
}
.o-completion {
	display: inline-block;
	width: 14.9334vw;
}
.o-completion img {
	width: 100%;
}
.o-period {
	display: grid;
	grid-template-columns: auto 1fr;
	margin-top: 2.6667vw;
	font-size: 3.2vw;
}
.o-period + .o-place {
	margin-top: unset;
}
.o-place {
	display: grid;
	grid-template-columns: auto 1fr;
	margin-top: 2.1334vw;
	font-size: 3.2vw;
}
.o-btn {
	margin-top: 2.1334vw;
	width: fit-content;
	color: #ffffff;
	background-color: #F14742;
	border-radius: var(--radius-lg);
}
.o-btn a {
	display: inline-block;
	padding: 3.3334vw 8vw;
	font-size: 3.2vw;
	color: inherit;
	text-decoration: none;
}
@media screen and (min-width: 750px) {
	.o-title {
		font-size: 28px;
	}
	.o-status {
		gap: 6px;
		margin-top: 16px;
	}
	.o-age {
		padding: 8px 16px;
		font-size: 22px;
	}
	.o-category {
		padding: 8px 16px;
		font-size: 22px;
	}
	.o-recommended {
		padding: 8px 16px;
		font-size: 22px;
	}
	.o-completion {
		width: 112px;
	}
	.o-period {
		margin-top: 20px;
		font-size: 24px;
	}
	.o-place {
		margin-top: 16px;
		font-size: 24px;
	}
	.o-btn {
		margin-top: 16px;
	}
	.o-btn a {
		padding: 25px 60px;
		font-size: 24px;
	}
}


/* modal用 */
.modal-overlay {
	display: none;
	justify-content: center;
	align-items: center;
	position: fixed;
	inset: 0;
	background-color: rgba(0 0 0 / 0.7);
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease-in, visibility 0s 0.4s ease-in;
}
.modal-overlay[aria-hidden="false"] {
	display: flex;
	opacity: 1;
	visibility: visible;
	transition: opacity 0.4s ease, visibility 0s 0s;
}
.modal-content {
	position: relative;
	padding: 0 0 21.3334vw;
	margin: auto;
	max-width: 750px;
	height: calc(100% - 21.3334vw);
	background-color: #F78FAB;
	overflow-y: auto;
	opacity: 0;
	transition: opacity 0.4s ease-out;
}
.modal-overlay[aria-hidden="false"] .modal-content {
	opacity: 1;
}
.modal-articles {
	background-color: #FFFAF0;
}
.modal-close {
	position: absolute;
	top: 0;
	right: 0;
	width: 14.4vw;
	aspect-ratio: 1;
	cursor: pointer;
}
@media screen and (min-width: 750px) {
	.modal-content {
		padding: 0 0 160px;
		height: calc(100% - 160px);
	}
	.modal-close {
		width: 108px;
	}
}


.footer {
	background-color: #FFFAF0;
}