@charset "UTF-8";
/*
	Reset CSS
-----------------------------------------------------------------------------------------------*/
/***
    The new CSS reset - version 1.7.3 (last updated 7.8.2022)
    GitHub page: https://github.com/elad2412/the-new-css-reset
***/
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)){
	all: unset;
	display: revert;
}
*,*::before,*::after{
	box-sizing: border-box;
}
a, button{
	cursor: revert;
}
ol, ul, menu{
	list-style: none;
}
img{
	max-width: 100%;
	vertical-align: top;
}
table{
	border-collapse: collapse;
	border-spacing: 0;
}
input, textarea{
	-webkit-user-select: auto;
	user-select: auto;
}
textarea{
	white-space: revert;
}
meter{
	-webkit-appearance: revert;
	appearance: revert;
}
::placeholder{
	color: unset;
}
:where([hidden]){
	display: none;
}
:where([contenteditable]:not([contenteditable="false"])){
	-moz-user-modify: read-write;
	-webkit-user-modify: read-write;
	overflow-wrap: break-word;
	-webkit-line-break: after-white-space;
	line-break: after-white-space;
	-webkit-user-select: auto;
	user-select: auto;
}
:where([draggable="true"]){
	-webkit-user-drag: element;
}
/*
	Setting CSS
-----------------------------------------------------------------------------------------------*/
html{
	font-size: 62.5%;
}
body{
	background: var(--navy);
	color:#000;
	font-size: 1.5em;
	font-family: 'Noto Sans JP', 'Yu Gothic', YuGothic, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	font-weight: 400;
	letter-spacing: 0.1rem;
	font-feature-settings: "palt";
	overflow-wrap: break-word;
	word-break: break-all;
}
p{
	line-height: 170%;
}
a{
	text-decoration: none;
	transition: all 0.3s;
}

a:hover{
	text-decoration: none;
}
@media print, screen and (min-width:813px){
	/* iPad背景切れ対策 */
	body{
		min-width: 1200px;
	}
	/* tel pcのみ無効 */
	a[href^="tel:"]{
		pointer-events: none;
	}
}
/* 表示切替 */
.switch{
	visibility: hidden;
}
.sp{
	display: none;
}
/*
	common
-----------------------------------------------------------------------------------------------*/
:root{
	/* color */
	--black: #000;
	--red: #a51f24;
	--white: #fff;
	--green: #006556;
	--blue: #0096b7;
	--pink: #d72e8a;
	--paleBlue: #dff0f7;
	--lightGreen: #eff6f0;
	--gray: #f5f7f8;
	--lineGray: #c8c8c8;
	--blueGray: #9cb7c5;
	--blueGrayTxt: #518aa4;
	--lightBlue: #00aeeb;
	/* font-family */
	--serif: 'Noto Serif JP', 'Yu Mincho',YuMincho,'Hiragino Mincho Pro','MS PMincho',serif;
	/* font-weight */
	--medium: 500;
	--bold: 700;
	--black: 900;
}
/* wrapper */
#wrapper{
	overflow: hidden;
	position: relative;
	font-family: var(--sans);
}
/* ctsArea */
[class^="ctsArea"]{
	margin: 0 auto;
	max-width: 1000px;
	position: relative;
	z-index: 1;
}
.ctsArea-small{
	max-width: 945px;
}

/*
	kv
-----------------------------------------------------------------------------------------------*/
#kv{
	background: url(../images/kv_pc.png) no-repeat center center / cover;
	position: relative;
	width: 100vw;
    height: 100vh;
	min-width: 1200px;
	padding-top: 50px;
}

#kv > .ctsArea{
	max-width: 1300px;
	padding: 0 50px;
}

.kvLogo{
	width: 460px;
	margin-bottom: 23px;
}

.kyushuInternationalUniversity{
	width: 99px;
}

.universityLogo{
	position: absolute;
	width: 180px;
	top: 0;
	right: 50px;
}

.kvLead{
	position: absolute;
	top: 135px;
    right: 250px;
    font-family: var(--serif);
    font-size: 2.7rem;
	font-weight: 500;
    writing-mode: vertical-rl;
	letter-spacing: .2em;
    white-space: nowrap;
}

/*
	what
-----------------------------------------------------------------------------------------------*/
#what{
	position: relative;
	display: flex;
	flex-direction: column;
	background: url(../images/bg_square_what_pc.png) no-repeat center center / cover;
	background-color: #fff;
	position: relative;
	z-index: 3;
}

.whatArea{
	display: flex;
	justify-content: center;
}

.whatHeadArea{
	position: absolute;
	transform: translateY(-50%);
	background: var(--red);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: 6px;
	margin: 0 auto;
	width: 480px;
	height: 90px;
}

.whatTheAdvancedProgram{
	line-height: 0;
}

.whatHead{
	font-family: var(--serif);
	font-size: 2.8rem;
	color: var(--white);
}

.whatTxtArea{
	display: block;
	padding: 95px 0 65px;
}

.whatTxt{
	line-height: 3.7rem;
	font-size: 1.7rem;
	text-align: center;
	color: var(--red);
}

/*
	new
-----------------------------------------------------------------------------------------------*/
#new{
	position: relative;
	display: flex;
	justify-content: center;
	background: linear-gradient(90deg, rgba(232,83,152,0.53125) 0%, rgba(0,103,182,0.2763480392156863) 100%);
}

.newTxt{
	position: absolute;
	left: 10%;
	transform: translateY(-50%);
	color: var(--red);
	font-family: var(--serif);
	font-size: 3rem;
	z-index: 11;
}

.newItemWrapper{
	padding: 50px;
}

.newItemArea{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 1000px;
}

.newLeftArea{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 70%;
}

.startTxt{
	width: 310px;
}

.newTit{
	position: relative;
	font-family: var(--serif);
	font-size: 2.1rem;
	font-weight: bold;
	text-align: center;
	margin: 13px 0;
	padding: 0 13px 0 20px;
}

.newTit::before,
.newTit::after{
	content: '';
    position: absolute;
    top: 0;
    width: 9px;
    height: 57px;
    border-top: solid 1px;
    border-bottom: solid 1px;
	z-index: 13;
}

.newTit::before{
	border-left: solid 1px #000;
    left: 0;
}

.newTit::after{
	border-right: solid 1px #000;
    right: 0;
}

.newAnnotation{
	font-size: 1.1rem;
	text-align: center;
}

.newRightArea{
	width: 100%;
}

.newItemTxt{
	line-height: 3.3rem;
	text-align: justify;
}

/*
	anchor
-----------------------------------------------------------------------------------------------*/
.anchorArea{
	margin: 100px auto 100px;
}

.anchorList{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 50px;
}

.anchorList li{
	display: flex;
	justify-content: center;
	width: 300px;
	height: 130px;
	color: var(--white);
	font-size: 2.8rem;
	font-family: var(--serif);
	border-radius: 5px;
}

.anchorList li .anchorBtn{
	display: flex;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding-top: 28px;
	border-radius: 5px;
	position: relative;
}

.anchorList li .anchorBtn::after{
	content: '';
	width: 17px;
	height: 17px;
	border: 0;
	border-bottom: solid 1px var(--white);
	border-right: solid 1px var(--white);
	transform: rotate(45deg) translateX(-50%);
	position: absolute;
	top: 85px;
	left: 50%;
	margin: auto;
}

.anchorBtnLeft{
	background: var(--green);
}

.anchorBtnRight{
	background: var(--blue);
}

/*
	program
-----------------------------------------------------------------------------------------------*/
.program{
	position: relative;
}

.law{
	position: relative;
	display: block;
	background-clip: padding-box;
	border-radius: 10px;
	border-image-slice: 1;
	margin-bottom: 70px;
	background: var(--white);
	border-radius: 5px;
}

.law::before {
	content: "";
	position: absolute;
	inset: -3px; /* 外側に余白をつける */
	background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(1,116,99,1) 0%, rgba(149,204,184,1) 40%, rgba(165,31,35,1) 100%, rgba(166,32,35,1) 100%);
	border-radius: inherit;
	z-index: -1;
}

.programTit{
	position: absolute;
	top: -3px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--green);
	width: 1006px;
	font-family: var(--serif);
	height: 70px;
	color: var(--white);
	font-size: 3rem;
	border-radius: 5px 5px 0 0;
	margin: 0 auto;
}

.programCts{
	padding: 47px 50px;
}

.appealArea{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 32px;
	position: relative;
	background: var(--lightGreen);
	border: 1px solid var(--green);
	border-radius: 5px;
	height: 103px;
	margin-top: 70px;

}

.appealTxtArea{
	padding: 28px 18px;
}

.appealBox{
	position: relative;
	display: inline-block;
	border: 1px solid var(--green);
	border-radius: 5px;
	background: var(--white);
	padding: 25px 20px;
	font-size: 1.5rem;
	font-weight: 500;
	z-index: 15;
	box-sizing: border-box;
}

.appealBox::after{
	content: "";
	width: 12px;
	height: 12px;
	background: #fff;
	position: absolute;
	top: 50%;
	right: -6px;
	transform: translateY(-50%) rotate(-45deg);
	border-right: 1px solid var(--green); /* 右側にborder */
	border-bottom: 1px solid var(--green);/* 下側にborder */
}

.red{
	color: var(--red);
	font-size: 1.5rem;
}

.appealItemArea{
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	height: 100%;
	padding-bottom: 18px;
}

.appealItemTit{
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--white);
}

.appealItemTitBg{
	background: var(--green);
	padding: 6px 20px;
	border-radius: 0 0 5px 5px;
}

.appealItemList{
	display: flex;
	justify-content: center;
	gap: 16px;
	color: var(--green);
}

.appealItemList li{
	background: var(--white);
	border: 1px solid var(--green);
	border-radius: 16px;
	padding: 2px 20px;
	font-size: 1.8rem;
	font-weight: var(--medium);
	width: 280px;
	text-align: center;
}

.course{
	display: flex;
	justify-content: space-between;
	gap: 18px;
	margin: 40px auto;
}

.courseLeft{
	width: 100%;
}

.courseRight{
	text-align: justify;
	width: 100%;
}

.courseTit{
	position: relative;
	padding-left: 10px;
	margin-bottom: 10px;
	font-size: 1.9rem;
	font-weight: 600;
}

.courseTit::before{
	content: '';
	position: absolute;
	height: 17px;
	width: 3px;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	background: var(--green);
	z-index: 10;
}

.courseRightTxt{
	transform: translateY(-5px);
}

.courseList{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.courseList li{
	background: var(--lightGreen);
	border-radius: 30px;
	padding: 5px 20px;
}

.moreWrapper{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 110%;
}

.moreArea{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 140px;
	background: var(--gray);
	border: 3px solid var(--red);
	border-radius: 5px;
}

.moreTit{
	position: absolute;
	left: 50%;
    transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	width: 50px;
	border-radius: 50%;
	background: var(--red);
	color: var(--white);
	font-size: 1.8rem;
	font-weight: 500;
	z-index: 11;
}

.more{
	display: flex;
	align-items: center;
	gap: 30px;
}

.moreAppealBox{
	display: block;
	overflow: visible;
	background: var(--white);
	border: 0px;
	filter: drop-shadow(0 0 2px rgba(0,0,0,.2));
	z-index: 15;
}

.moreAppealBox::after{
	border: none;
}

.advanced{
	width: 202px;
}

.moreTxtArea{
	border-left: 1px solid var(--lineGray);
	padding-left: 30px;
}

.moreTxt{
	font-family: var(--serif);
	font-size: 24px;
	font-weight: 600;
	line-height: 3.8rem;
}

.moreTxt span{
	margin-left: -1.2rem;
}

/* programUnderArea */
.programUnderArea{
	background: url(../images/bg_square_pc.png);
	padding: 120px 47px 40px;
}

.programUnderTxtArea{
	margin-bottom: 37px;
}

.programUnderTxt{
	text-align: center;
	line-height: 3.3rem;
	font-size: 1.6rem;
}

.businessProgramUnderTxt{
	padding-bottom: 33px;
}


.programUnderTxt span{
	position: relative;
	font-size: 1.9rem;
	font-weight: bold;
}

.programUnderTxt span::after{
	content: '';
	position: absolute;
	top: 19px;
	right: -1px;
	display: block;
	width: 146px;
	height: 8px;
	background: rgba(0, 150, 183, .3);
}

.programUnderTxtList{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 11px;
}

.programUnderTxtList li{
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--red);
	height: 35px;
	width: auto;
	padding: 0 25px;
	color: var(--white);
	border-radius: 100vh;
	text-align: center;
	font-weight: 500;
}

.UnderDetailsList{
	display: flex;
	justify-content: space-between;
	gap: 40px;
	margin-bottom: 30px;
}

.UnderDetailsCts{
	display: flex;
	gap: 18px;
}

.UnderDetailsTit{
	color: var(--red);
	font-size: 2.1rem;
	font-weight: 500;
}

.UnderDetailsTxt{
	width: 275px;
	height: auto;
	font-size: 1.4rem;
	text-align: justify;
}


/* アコーディオン
============================== */
.accordion{
	height: 50px;
	width: 900px;
	background: var(--blueGray);
	color: var(--white);
	font-size: 2.1rem;
	text-align: center;
	position: relative;
	font-weight: 500;
}

.accordion::after{
	content: '';
    display: block;
    position: absolute;
    top: 40%;
	right: 3%;
	width: 17px;
    height: 17px;
    border-right: 1px solid var(--white);
    border-bottom: 1px solid var(--white);
    transform: translateY(-50%) rotate(45deg);
    transition: all 0.3s;
}

.open.accordion::after {
	content: '';
    display: block;
    position: absolute;
    top: 60%;
	right: 3%;
	width: 17px;
    height: 17px;
    border-right: 1px solid var(--white);
    border-bottom: 1px solid var(--white);
    transform: translateY(-50%) rotate(225deg);
    transition: all 0.3s;
}

/* アコーディオンのコンテンツ
============================== */
/* 公務員養成プログラム */
.CivilServant{
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.CivilServantTopArea{
	margin-top: 40px;
}

.accordionMainCtsArea{
	display: flex;
	justify-content: space-between;
	gap: 30px;
	width: 100%;
}

.CivilServantTxtArea{
	transform: translateY(-5px);
}

.accordionHead{
	color: var(--blueGrayTxt);
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: .05em;
	margin-bottom: 5px;
}

.accordionTit{
	font-family: var(--serif);
	font-size: 3rem;
	font-weight: bold;
	line-height: 3.7rem;
	margin-bottom: 8px;
}

.accordionTxt{
	font-size: 1.4rem;
	text-align: justify;
	line-height: 3rem;
	width: 490px;
}

.CivilServantFigureSide{
	width: 100%;
	height: auto;
}

.CivilServantFeatureArea{
	background: var(--white);
	padding: 27px 35px;
}

.CivilServantFeatureTit{
	font-size: 1.9rem;
	font-weight: 600;
	color: var(--blueGrayTxt);
	margin-bottom: 24px;
}

.CivilServantFeatureTit > span{
	font-family: var(--serif);
	font-size: 2.6rem;
}

.CivilServantFeatureList{
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.CivilServantFeatureList li .CivilServantFeatureTxt{
	width: 100%;
	transform: translateY(-5px);
}

.CivilServantFeatureList > li{
	display: flex;
	gap: 17px;
	justify-content: space-between;
}

.CivilServantFeatureList li .CivilServantFeatureNum span{
	font-family: var(--serif);
	font-size: 2rem;
}

.CivilServantFeatureNum{
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--blueGray);
	border-radius: 100vh;
	color: var(--white);
	padding: 9px 13px;
	width: 178px;
	height: 33px;
}

/* 法とAIプログラム */
.lawAi{
	border-top: 1px solid #241916;
	margin-top: 40px;
	padding-top: 40px;
}

.accordionLeftArea{
	transform: translateY(-5px);
}

/* 現代ビジネス学部
============================== */
.business{
	position: relative;
	background: var(--white);
	display: block;
	background-clip: padding-box;
	border-radius: 10px;
	border-image-slice: 1;
	margin-bottom: 70px;
	background: var(--white);
	border-radius: 5px;
}

.business::before{
	content: "";
	position: absolute;
	inset: -3px; /* 外側に余白をつける */
	background: linear-gradient(0deg, rgba(165,32,36,1) 0%, rgba(197,163,156,1) 40%, rgba(1,150,183,1) 100%);
	border-radius: inherit;
	z-index: -1;
}

.businessAppealArea{
	background: var(--paleBlue);
	border: 1px solid var(--blue);
}

.businessTit{
	background: var(--blue);
}

.businessAppealItemTitBg{
	background: var(--blue);
}

.businessAppealItemList li{
	border: 1px solid var(--blue);
	color: var(--blue);
}

.businessBeforeAppealTxt{
	border: 1px solid var(--blue);
}

.businessBeforeAppealTxt::after{
	border-right: 1px solid var(--blue);
    border-bottom: 1px solid var(--blue);
}

.businessCourseTit::before{
	background: var(--blue);
}

.businessCourseList li{
	background: var(--paleBlue);
}

.businessMoreArea{
	padding-top: 20px;
	padding-bottom: 13px;
}

.businessProgramAccordionList li:not(:last-child){
	padding-bottom: 40px;
	border-bottom: 1px solid var(--lineGray);
}

.accordionTitArea{
	display: flex;
	gap: 16px;
	align-items: center;
}

.accordionSubTit{
	background: var(--paleBlue);
	border: 1px solid var(--white);
	border-radius: 100vh;
	width: 173px;
	text-align: center;
	font-size: 1.1rem;
	font-weight: 500;
	padding: 3px 12px;
}

.accordionSubTitManagement{
	width: 164px;
}

.accordionSubTitGlobal{
	width: 120px;
}

/*
	openCampus
-----------------------------------------------------------------------------------------------*/
.openCampusList{
	padding: 0;
	width: 100%;
}

.openCampusListCts{
	position: relative;
    display: flex;
    gap: 90px;
    width: calc((100vw - 1200px) / 2 + 1200px);
    min-width: 1200px;
	padding: 70px 90px;
}

.openCampusListCts:nth-child(odd){
	margin-left: auto;
	text-align: right;
	border-radius: 30px 0 0 30px;
}

.openCampusListCts:nth-child(even){
	justify-content: end;
	margin-left: 0;
	text-align: left;
	border-radius: 0 30px 30px 0;
}

.webOpenCampusListCts{
	margin: 70px 0;
	background: #fff23f;
}

.openCampusTitArea{
	display: flex;
	flex-direction: column;
	gap: 20px;
	text-align: left;
	z-index: 20;
}

.openCampusTitArea > p{
	line-height: 2.8rem;
}

.openCampusLogo{
	width: 423px;
}

[class$="OpenCampusHead"]{
	display: inline-block;
	color: var(--lightBlue);
}

[class$="OpenCampusTxt"]{
	font-size: 1.4rem;
}

.openCampusIntroArea{
	text-align: left;
	z-index: 100;
}

.openCampusIntroList{
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.openCampusIntroList li{
	line-height: 2.6rem;
}

.webOpenCampusIntroTit{
	font-size: 1.1rem;
}

[class$="CampusIntroTit"]{
	margin-bottom: 6px;
}

[class$="CampusIntroTit"] > span{
	font-size: 2.1rem;
	font-weight: 500;
}

/* openCampusBtn
============================== */
[class$="OpenCampusBtn"]{
	position: relative;
	display: flex;
	justify-content: center;
    padding: 16px 34px;
    text-align: center;
	margin-top: 15px;
	border-radius: 100vh;
	width: 208px;
}

[class$="OpenCampusBtn"] > span{
	display: block;
	width: 110px;
	transform: translateX(-3px) translateY(1px);
}

[class$="OpenCampusBtn"]::after{
	position: absolute;
	right: 25px;
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 0 6px 10px;
	border-color: transparent transparent transparent var(--white);
	transform: translateY(4px)
}

.webOpenCampusBtn{
	background: var(--lightBlue);
}

.webOpenCampusIntroTit > span{
	color: var(--lightBlue);
}

.experienceOpenCampusIntroTit{
	color: var(--pink)
}

.openCampusIntroTxt{
	line-height: 3rem;
}

.openCampusIntroAnnotation{
	font-size: 1.1rem;
}

.openCampusTxt{
	color: var(--white);
	text-align: justify;
}

/* webOpenCampus img
============================== */
[class*="img_0"]{
	position: absolute;
}

/* web */
.web_img_01{
	left: 28px;
	bottom: 20px;
}

.web_img_02{
	right: 20px;
	bottom: 40px;
}

.web_img_03{
	top: 60px;
	right: 40px;
}

.web_img_04{
	top: 35px;
	right: 530px;
}

.web_img_05{
	top: 30px;
	right: 700px;
}

.web_img_06{
	top: 320px;
	right: 540px;
}

.web_img_07{
	bottom: 40px;
	left: 480px;
}

.web_img_08{
	top: 45px;
	left: 80px;
}

/* ex */
.ex_img_01{
	top: 30px;
	right: 30px;
}

.ex_img_02{
	right: 110px;
	bottom: 30px;
}

.ex_img_03{
	top: 200px;
	right: 70px;
}

.ex_img_04{
	bottom: 70px;
	right: 620px;
}

.ex_img_05{
	top: 212px;
	left: 770px;
}

.ex_img_06{
	top: 40px;
	left: 750px;
}

.ex_img_07{
	top: 60px;
	left: 60px;
}

.ex_img_08{
	bottom: 40px;
	left: 50px;
}

.ex_img_09{
	bottom: 140px;
	left: 80px;
}

/* experience
============================== */

.experienceOpenCampusListCts{
	background: #80cce3;
}

.experienceOpenCampusBtn{
	background: var(--pink);
}

/*
	footer
-----------------------------------------------------------------------------------------------*/
footer{
	margin-top: 70px;
	background: var(--gray);
}

#footerArea{
	display: flex;
	gap: 35px;
	padding: 60px 0;
}

.address{
	display: flex;
	flex-direction: column;
}

.addressLogoArea{
	margin-bottom: 11px;
}

.addressLogoLink{
	display: block;
	width: 326px;
}

.addressLogo{
	width: 100%;
}

.addressNum{
	margin-bottom: 13px;
	line-height: 2.7rem;
	font-size: 1.6rem;
	font-weight: 500;
	letter-spacing: .05em;
}

.tel{
	line-height: 2rem;
	font-size: 2.8rem;
	font-weight: bold;
	margin-bottom: 15px;
	white-space: nowrap;
}

.tel span{
	font-size: 1.4rem;
	font-weight: 500;
}

.studentNav{
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 2.1rem;
	font-weight: bold;
	color: var(--lightBlue);
	margin-bottom: 5px;
}

.addressTxt{
	font-size: 1.3rem;
}

.kiuUrl{
	color: var(--lightBlue);
	font-size: 1.8rem;
}

.map{
	width: 380px;
}

.iconBlankArea{
	width: 21px;
	transform: translateY(9px);
}

.snsTit{
	margin-bottom: 15px;
	padding: 3px;
	color: var(--white);
	font-weight: 500;
	text-align: center;
	background: #73797c;
}

.snsList{
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 200px;
}

.snsList > li{
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.snsList > li a{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.linkArea{
	display: flex;
	gap: 10px;
	margin-bottom: 16px;
}

.snsIconLink{
	display: block;
	width: 52px;
}

[class^="snsTxt"]{
	width: calc(100% - 55px);
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.5;
}

[class^="snsTxt"] .window{
	position: relative;
}

[class^="snsTxt"] .window::after{
	content: "";
	width: 15px;
	height: 13px;
	position: absolute;
	right: -18px;
	bottom: 3px;
}

.snsTxtLine .window::after{
	background: url("../images/icon_blank_green.svg") no-repeat center center / cover;
}
.snsTxtInsta{
	color: #c50080;
}
.snsTxtInsta .window::after{
	background: url("../images/icon_blank_purple.svg") no-repeat center center / cover;
}
.snsIcon{
	width: 45px;
}
.snsId{
	padding: 5px;
	font-size: 1.1rem;
	color: var(--white);
	text-align: center;
	line-height: 1.0;
	background: #000;
	border-radius: 3px;
}

.snsTxtLine{
	color: #00a65a;
}

.snsTxtInsta{
	color: #c50080;
}

.snsId{
	padding: 5px;
	font-size: 1.1rem;
	color: var(--white);
	text-align: center;
	line-height: 1.0;
	background: #000;
	border-radius: 3px;
}

/*
	sp
-----------------------------------------------------------------------------------------------*/


@media screen and (max-width:812px){
	body{
		-webkit-text-size-adjust: 100%;
		letter-spacing: 0;
		font-size: 1.4rem;
	}
	img{
		width: 100%;
	}
	.pc{
		display: none;
	}
	.sp{
		display: block;
	}
	br.sp{
		display: inline-block;
	}
	/*
		common
	-----------------------------------------------------------------------------------------------*/
	/* ctsArea */
	[class^="ctsArea"]{
		max-width: 500px;
		padding: 0 20px;
		z-index: 1;
	}
	.ctsArea-small{
		max-width: 100%;
	}

	/* kv */
	#kv{
		background: url(../images/kv_sp.png) no-repeat center center / cover;
		height: 100vh;
		height: 100vh;
        min-height: 740px;
		min-width: initial;
		padding-top: 0;
	}

	#kv .ctsArea{
		position: relative;
		width: 100%;
		height: 100%;
		padding: 77px 30px 30px;
	}

	.kvLogo{
		width: 100%;
        max-width: 450px;
	}

	.kyushuInternationalUniversity{
		width: 67px;
	}

	.universityLogo{
		width: 150px;
		top: 30px;
		left: 30px;
	}

	.kvLead{
		top: 220px;
		right: 60px;
		font-size: 1.9rem;
		line-height: 3rem;
	}

	/* what */
	#what{
		padding: 0 20px;
	}

	#what > .ctsArea{
		padding: 0;
	margin: 0 auto;
	}

	.whatHeadArea{
		width: 335px;
		height: 55px;
		gap: 0;
	}

	.whatTheAdvancedProgram{
		width: 230px;
	}

	.whatHead{
		font-size: 1.8rem;
	}

	.whatTxtArea{
		padding: 50px 0 40px;
	}

	.whatTxt{
		font-size: 1.4rem;
		line-height: 3rem;
		text-align: justify;
	}

	/* new */
	.newItemWrapper{
		padding: 50px 20px;
	}

	.newItemArea{
		flex-direction: column;
		gap: 10px;
		width: 100%;
	}

	.newLeftArea{
		width: 100%;
	}

	.newRightArea{
		max-width: 500px;
	}

	/* anchor */
	.anchorArea{
		margin: 50px 0;
	}

	.anchorList{
		gap: 13px;
	}

	.anchorList li{
		width: 160px;
		height: 70px;
		font-size: 1.5rem;
	}

	.anchorList li .anchorBtn{
		padding-top: 15px;
	}

	.anchorList li .anchorBtn::after{
		top: 46px;
		width: 10px;
		height: 10px;
	}

	/* law */
	.programTit{
		width: 101%;
		font-size: 2.3rem;
		height: 50px;
	}

	.programCts{
		padding: 20px 20px;
	}

	.appealArea{
		flex-direction: column;
		gap: 0;
		height: auto;
		margin-top: 50px;
	}

	.appealBox{
		margin: 10px 0 20px;
	}

	.appealBox::after{
	top: auto;
	bottom: -6px;
    right: auto;
	left: 50%;
    transform: translateX(-50%) rotate(45deg);
	}

	.appealTxtArea{
		padding: 15px 0 0;
	}

	.appealItemTit{
		margin-bottom: 15px;
	}

	.appealItemList{
		flex-direction: column;
		align-items: center;
		gap: 13px;
	}

	.appealItemList li{
		min-width: 190px;
        width: auto;
	}

	.course{
		flex-direction: column;
	}

	.moreWrapper{
		width: 106%;
	}

	.moreArea{
		height: 300px;
	}

	.more{
		flex-direction: column;
		gap: 0;
	}

	.moreTit{
		transform: translateX(-50%) translateY(-50%);
	}

	.moreTxtArea{
		border-left: none;
		padding-left: 0;
	}

	.advancedImg{
		padding-bottom: 20px;
		margin-bottom: 10px;
		border-bottom: 1px solid var(--lineGray);
	}

	.moreTxt{
		text-align: center;
	}

	.programUnderArea{
		padding: 120px 20px 30px;
	}

	.programUnderTxtArea{
		margin-top: 185px;
		margin-bottom: 35px;
	}

	.programUnderTxt{
		font-size: 1.4rem;
	}

	.programUnderTxt > span::after{
		width: 140px;
	}

	/* アコーディオン */
	.accordionArea{
		text-align: center;
	}

	.accordion{
		width: 100%;
		font-size: 1.8rem;
	}

	.accordion::after{
		top: 40%;
		right: 7%;
	}

	.open.accordion::after{
		right: 7%;
	}

	.accordionMainCtsArea{
		flex-direction: column;
		text-align: start;
	}

	.accordionHead{
		text-align: justify;
		line-height: 2.2rem;
	}

	.accordionTit{
		font-size: 2.7rem;
	}

	.accordionTxt{
		width: 100%;
		text-align: justify;
	}

	.CivilServantImgArea02{
		width: 100%;
		overflow-x: scroll;
		white-space: nowrap;
	}

	.scrollImg{
		max-width: 650px;
		width: auto;
	}

	.CivilServantFeatureArea{
		padding: 20px;
	}

	.CivilServantFeatureTit{
		margin-bottom: 13px;
	}

	.CivilServantFeatureList{
		gap: 20px;
	}

	.CivilServantFeatureList li{
		flex-direction: column;
		align-items: center;
		gap: 12px;
	}

	.CivilServantFeatureNum{
		font-size: 1.6rem;
		justify-content: center;
	}

	.CivilServantFeatureTxt{
		font-size: 1.3rem;
		text-align: justify;
	}

	.businessProgramUnderTxt{
		padding-bottom: 28px;
	}

	.programUnderTxtList{
		flex-direction: column;
	}

	.UnderDetailsCts{
		gap: 8px;
	}

	.programUnderTxtList li{
		width: 100%;
		max-width: 280px;
        min-width: 180px;
	}

	.UnderDetailsList{
		flex-direction: column;
		gap: 28px;
	}

	.UnderDetailsList li{
		flex-direction: column;
	}

	.UnderDetailsImg{
		width: 100%;
	}

	.UnderDetailsTxt{
		width: 100%;
	}

	.accordionMainCtsArea{
		gap: 15px;
		margin-top: 25px;
	}

	.businessProgramAccordionList li:not(:last-child){
		padding-bottom: 25px;
	}

	.accordionTitArea{
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
	}

	.accordionSubTit{
		margin-bottom: 10px;
	}

	/* openCampus */
	.openCampusTitArea{
		max-width: 500px;
		margin: 0 auto;
	}

	.openCampusLogo{
		width: 300px;
	}

	.openCampusListCts{
		flex-direction: column;
		gap: 30px;
		width: 100%;
		min-width: 100%;
		margin-top: 0;
		padding: 40px 30px;
		border-radius: 0px;
	}

	.openCampusIntroArea{
		max-width: 500px;
		width: 100%;
		margin: 0 auto;
	}

	.webOpenCampusHead{
		text-align: justify;
	}

	.webOpenCampusTxt{
		text-align: justify;
	}

	.openCampusBtnArea{
		display: flex;
		justify-content: center;
	}

	[class$="OpenCampusBtn"] {
		margin-top: 30px;
	}

	.webOpenCampusListCts{
		margin-bottom: 50px;
	}

	.openCampusListCts:nth-child(odd){
		border-radius: 0;
	}

	.openCampusListCts:nth-child(even) {
		border-radius: 0;
	}

	.experienceOpenCampusListCts{
		padding-bottom: 170px;
	}

	/* img */
	[class*="img_0"]{
		width: auto;
	}

	.web_img_01{
		bottom: 15px;
		left: 15px;
		width: 50px;
		height: auto;
	}

	.web_img_02{
		right: -15px;
		bottom: 106px;
		width: 150px;
		height: auto;
	}

	.web_img_03{
		top: auto;
		right: 15px;
		bottom: 20px;
		width: 18px;
	}

	.web_img_04{
		top: 330px;
		right: 20px;
		width: 18px;
	}

	.web_img_05{
		top: 200px;
		right: 140px;
		width: 18px;
	}

	.web_img_06{
		top: 30px;
		right: 40px;
		width: 18px;
	}

	.web_img_07{
		bottom: 200px;
		left: 200px;
		width: 18px;
	}

	.web_img_08{
		top: 20px;
		left: 20px;
		width: 18px;
	}

	.ex_img_01{
		display: none;
	}

	.ex_img_02{
		bottom: 10px;
		left: 20px;
		width: 180px;
	}

	.ex_img_03{
		top: auto;
		bottom: 40px;
		right: 80px;
		width: 18px;
	}

	.ex_img_04{
		top: 300px;
		right: 50px;
		width: 18px;
	}

	.ex_img_05{
		top: auto;
		bottom: 185px;
		left: 30px;
		width: 18px;
	}

	.ex_img_06{
		top: 30px;
		right: 30px;
		left: auto;
		width: 18px;
	}

	.ex_img_07{
		display: none;
	}

	.ex_img_08{
		bottom: 150px;
		right: 20px;
		left: auto;
		width: 12px;
	}

	.ex_img_09{
		display: none;
	}

	/* footer */
	#footerArea{
		flex-direction: column;
		gap: 27px;
		padding: 40px 0;
	}

	.address{
		align-items: center;
	}

	.addressLogoLink{
		width: 250px;
	}

	.addressNum{
		font-size: 1.4rem;
	}

	.addressTxt{
		text-align: center;
	}

	.tel{
		margin-bottom: 12px;
		line-height: 2.4rem;
		text-align: center;
        white-space: revert;
	}

	.iconBlankArea{
		transform: translateY(6px);
	}

	.map{
		width: 100%;
	}
	
	.snsTit{
		font-size: 1.4rem;
	}

	.snsList{
		flex-direction: row;
		width: 100%;
	}

	.snsList > li{
		width: calc((100% - 10px)/2);
	}

	[class^="snsTxt"]{
		width: calc(100% - 45px);
		font-size: 1.2rem;
	}

	[class^="snsTxt"] .window::after{
		width: 13px;
		height: 11px;
		right: -15px;
	}

	.snsIcon{
		width: 35px;
	}
	
	.snsId{
		padding: 5px;
		font-size: 1.0rem;
	}
}