@charset "UTF-8";
/* ブラウザスタイル初期化用ＣＳＳ */
html {
	width: 100%;
	height: 100%;
	min-height: 100vh;
	font-size: 10px;
	line-height: 0;	
}

body {
	margin: 0;
	padding: 0;
	color:#333333;
	font-size: 1.5rem;
    letter-spacing: 0.05em;
	font-style: normal;
	font-family: 'Noto Sans JP', sans-serif;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	background: #F2F2F2;
	text-align: left;
}
body#comp{
}
body * {
	box-sizing: border-box;
	word-wrap: break-word;
  /* line-height: 100%; */
}
h1,h2,h3,h4,h5,h6,p,pre,blockquote,ul,ol,li,dl,dt,dd{
	margin: 0px;
	padding: 0px;
	line-height: 100%;
}
li,dt,dd{
	list-style-type: none;
}
/*p {
  margin: 0;
  line-height: 1.5em;
  vertical-align: middle;
}*/
p{
	line-height: 1.8;
}
img {
	border: 0;
	border: none;
}
a{
	text-decoration: none;
	color: #333333;
	cursor: pointer;
}
/*センター揃え*/
.t_center{
	text-align: center !important;
}
/*左揃え*/
.t_left{
	text-align:left !important;
}
/*太字*/
.fb{
	font-weight: bold;
}
/*細字*/
.fn{
	font-weight: normal;
}
/*二重線*/
.line_d{
	border-bottom: double #CECECE;
}
/*下線*/
.line{
	border-bottom: solid 1px #333333;
}
/*margin*/
.mb5{
	margin-bottom: 5px !important;
}
.mb10{
	margin-bottom: 10px !important;
}
.mb15{
	margin-bottom: 15px !important;
}
.mb20{
	margin-bottom: 20px !important;
}
.mb30{
	margin-bottom: 30px !important;
}
.mb40{
	margin-bottom: 40px !important;
}
.mb60{
	margin-bottom: 60px !important;
}
.mbn{
	margin-bottom: 0px !important;
}

.pc{
	display: block;
}
.sp{
	display: none;
}
@media screen and (max-width:768px){
	.pc{
	display: none;
	}
	.sp{
		display: block;
	}
}


/*ログイン*/
main.login {
	min-height: 100vh;
	background: url(../img/login/bg.png) no-repeat center / cover;
	position: relative;
	font-size: 0;
}
main.login::before {
	content: '';
	position: absolute;
	top: 10px;
	right: 9px;
	z-index: 1;
	width: 210px;
	height: 30px;
	background: url(../img/login/logo.png) no-repeat center / contain;
}
main.login section {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	transform: translate(-50%, -50%);
	text-align: center;
	padding: 20px 0 80px;
}
main.login section h1 {
	width: 270px;
	margin: 0 auto 72px;
	height: 47px;
	padding: 0;
	background: url(../img/login/h1.png) no-repeat center / contain;
	border: none;
}
main.login section h2.ym {
	display: inline-block;
	padding: 5px 10px 3px;
	margin: 0;
	border: solid 1px #333333;
	font-size: 0;
	border-radius: 20px;
}
main.login section h2.ym::before {
	display: none;
}
main.login section h2.ym span {
	display: inline-block;
	vertical-align: text-bottom;
	font-size: 20px;
	line-height: 1;
	font-weight: 600;
	letter-spacing: -0.5px;
}
main.login section h2.ym span::after {
	display: inline-block;
	vertical-align: unset;
	font-size: 15px;
	margin: 0 2px;
}
main.login section h2.ym span:nth-child(1)::after {
	content: '年';
}
main.login section h2.ym span:nth-child(2)::after {
	content: '月';
}
main.login section h2.ym::after {
	content: '入学生用';
	width: auto;
	height: auto;
	background: none;
	position: static;
	display: inline-block;
	vertical-align: bottom;
	font-size: 15px;
	line-height: 1;
}
main.login section h3 {
	font-size: 30px;
	line-height: 1.2;
	padding: 0;
	margin: 13px 0 0;
}
main.login section h3::before {
	display: none;
}
main.login section form {
	width: 500px;
	max-width: 90vw;
	margin: 32px 0 0;
}
main.login section form input {
	display: block;
	width: calc(100% - 2px);
	height: 65px;
	margin: 0 0 12px;
	font-size: 18px;
	padding: 0 18px;
	border: solid 1px transparent;
	border-radius: 6px;
}
main.login section form input::placeholder {
	color: #A2A2A2;
}
main.login section form button {
	margin: 17px 0 0;
	width: 100%;
	height: 66px;
	font-size: 20px;
	font-weight: 600;
	border: none;
	background: #267CDB;
	color: white;
	border-radius: 6px;
}
main.login section form.error::before {
	content: 'ログインIDもしくはパスワードが間違っています';
	display: block;
	width: auto;
	margin: 0 0 15px;
	border: solid 1px #E50921;
	background: url(../img/login/caution.png) no-repeat center left 7.5% #FFF2F3;
	font-size: 16px;
	line-height: 1.4;
	color: #E50921;
	font-weight: 600;
	padding: 20px 20px 20px 82px;
	text-align: left;
}
main.login section form.error input {
	border-color:  #E50921;
}
@media screen and (max-width:768px){
main.login section {
	padding: 0;
}
main.login section h1 {
	margin: 0 auto 32px;
}
main.login section form.error::before {
	background-position: center left 10px;
	padding-left: 50px;
}
}


/*ヘッダー*/
header{
	position: fixed;
	border-bottom: solid 2px #F51414;
	width: 100%;
	z-index: 999;
}
header .header{
	background: #505050;
    padding: 10px 20px;
    color: white;
    font-weight: 500;
    display: flex;
    align-items: center;
		width: 100%;
		z-index: 999;
}
header .header .txt{
	display: flex;
	align-items: center;
	font-size: 2rem;
	font-weight: bold;
}
header .header .txt .year{
	border: solid 1px;
    border-radius: 50px;
    padding: 0px 12px;
    margin-right: 10px;
	font-size: 1.2rem;
	font-weight: bold;
}
header .header .txt .year span{
	font-size: 1.8rem;
}
header .header .logo{
	margin-left: auto;
}
header .header .logo img{
	width: 100%;
	max-width: 240px;
}
@supports (-webkit-touch-callout: none) {
	header .header .logo a{
		width: 360px;
		display: block;
	}
	header .header .logo img{
		width: auto
	}
}
_::-webkit-full-page-media, _:future, :root header .header .logo a{
	width: 360px;
	display: block;
}
_::-webkit-full-page-media, _:future, :root header .header .logo img{
	width: auto;
}
@-moz-document url-prefix() {
	header .header .logo a{
		width: 360px;
		display: block;
	}
}
footer{
	text-align: right;
	padding: 28px 30px;
	font-size: 1.2rem;
}
#comp footer{
	position: absolute;
	bottom: 0;
	right: 0;
}
@media screen and (max-width:768px){
	header{
		z-index: 999;
		width: 100%;
	}
	header .header{
		display: inline-block;
		padding: 9px 15px;
		width: 100%;
	}
	header .header .logo{
		display: none;
	}
	header .header .txt{
		display: inline-block;
		width: 75%;
	}
	header .header .txt .year{
		max-width: 145px;
		width: 100%;
		padding: 0px 10px;
    	margin-bottom: 4px;
		font-size: 0.9rem;
	}
	header .header .txt .year span{
		font-size: 1.4rem;
	}
	header .header .txt p{
		font-size: 1.8rem;
	}
	.menu_btn{
	  	position: fixed;/*ボタン内側の基点となるためrelativeを指定*/
	  	cursor: pointer;
	  	width: 60px;
	  	height: 40px;
	  	border-radius: 5px;
	  	z-index: 9999;
	  	margin-left: auto;
	  	display: inline-block;
	  	top: 11px;
	  	right: 13px;
	}
	/*ボタン内側*/
	.menu_btn span{
		display: inline-block;
		transition: all .4s;/*アニメーションの設定*/
		position: absolute;
		left: 14px;
		height: 3px;
		background: white;
		width: 53%;
		top: 7px;
	}
	.menu_btn span:nth-of-type(1) {
	  top: 18px;
	}
	.menu_btn span:nth-of-type(2) {
	  top: 29px;
	}
	.menu_btn span:nth-of-type(3) {
	  top: 41px;
	}
	/*activeクラスが付与されると線が回転して×に*/
	.menu_btn.active{
		top: 26px;
	}
	.menu_btn.active span{
		background: #F51414;
	}
	.menu_btn.active span:nth-of-type(1) {
		top: 8px;
		left: 18px;
		transform: translateY(6px) rotate(-45deg);
		width: 50%;
	}

	.menu_btn.active span:nth-of-type(2) {
	  opacity: 0;/*真ん中の線は透過*/
	}

	.menu_btn.active span:nth-of-type(3){
		top: 20px;
		left: 18px;
		transform: translateY(-6px) rotate(45deg);
		width: 50%;
	}
	
	footer{
		background: white;
		text-align: center;
		padding: 15px 15px 18px;
	}
	footer .f_logo{
		margin-bottom: 30px;
	}
	footer .f_logo img{
		width: 60%;
		margin: 0 auto;
	}
	footer p{
		text-align: right;
	}
	#comp footer{
		position: static;
	}
}

/*メインコンテンツ*/
.contaner {
	display: flex;
	width: 100%;
	/*padding: 30px 30px 0px;*/
}
.sidebar {
	min-width: 300px;
	padding: 30px 0px 30px 30px;
	width: 12%;
	display: block;
}
.body {
	width: 88%;
	height: auto;
	padding: 30px 30px 30px 30px;
	margin-top: 60px;
}

/*サイドメニュー*/
.sidebar{
	
}
.sidebar nav{
	background: white;
	border-radius: 15px;
	filter: drop-shadow(0 0 0.75rem #E0E0E0);
	font-size: 1.4rem;
	font-weight: bold;
	position: fixed;
	top: 88px;
    max-width: 270px;
    width: 100%;
}
.sidebar nav a:hover{
	color: #F51414;
}
.sidebar dl dd ul li:hover::before{
	content: "";
	background: url("../img/common/arrow.svg");
	width: 8px;
	height: 10px;
	position: absolute;
	top: 2px;
	left: 0;
}
.sidebar dl dd ul li.on::before{
	content: "";
	background: url("../img/common/arrow.svg");
	width: 8px;
	height: 10px;
	position: absolute;
	top: 2px;
	left: 0;
}
.sidebar dl dt{
	padding: 23px 25px;
	line-height: 1.4;
	border-bottom: solid 1px #F2F2F2;
	cursor: pointer;
	position: relative;
	display: flex;
}
.sidebar dl dt .btn_icon{
	margin-left: auto;
	border: solid 1px #F51414;
	border-radius: 50px;
	width: 20px;
	height: 20px;
}
.sidebar dl dt .btn_icon::before,.sidebar dl dt .btn_icon::after{
	content: '';
    display: inline-block;
    width: 11px;
    height: 1px;
    background-color: #F51414;
    position: absolute;
    right: 29px;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity 0.5s;
}
.sidebar dl dt .btn_icon::after{
	transform: translateY(-50%) rotate(90deg);
    transition: transform 0.5s;
}
.sidebar dl dt.nav_btn.show .btn_icon::before{
	opacity: 0;
}
.sidebar dl dt.nav_btn.show .btn_icon::after{
	transform: translateY(-50%) rotate(180deg);
}
.sidebar dl dt.link{
	position: relative;
}
.sidebar dl dt.link::before{
	content: "";
	width: 20px;
	height: 20px;
	background: url("../img/common/arrow2.svg");
	background-size: cover;
	position: absolute;
	top: 50%;
	right: 6.4%;
	transform: translate(-50%,-50%);
}
.sidebar dl dd{
	filter: none;
	border-radius: 0px;
	background: #FFF5F5;
	padding: 14px 25px;
	display: none;
}
.sidebar dl dd.on{
	display: block;
}
.sidebar dl dd ul li.on a {
	color: #F51414;
}
.sidebar dl dd ul li{
	margin-bottom: 18px;
	position: relative;
}
.sidebar dl dd ul li:hover{
	padding-left: 13px;
	transition: all 0.5s 0s ease;/*transitionの記述を追加*/
}
.sidebar dl dd ul li.on{
	padding-left: 13px;
	transition: all 0.5s 0s ease;/*transitionの記述を追加*/
}
.sidebar dl dd ul li:last-child{
	margin-bottom: 0px;
}
.sidebar nav .sp_logo{
	display: none;
}

/*body*/
h1{
	padding: 35px 50px;
	color: #F51414;
	font-size: 3.2rem;
	font-weight: bold;
	border-top: solid 5px #F51414;
	background: white;
	margin-bottom: 10px;
}
h2{
	font-size: 2.4rem;
	font-weight: bold;
	position: relative;
	padding-bottom: 15px;
	margin-bottom: 20px;
}
h2::before{
	content: "";
	width: 100%;
	height: 3px;
	background: #D5D5D5;
	position: absolute;
	bottom: 0;
	left: 0;
}
h2::after{
	content: "";
	max-width: 335px;
	width: 100%;
	height: 3px;
	background: #F51414;
	position: absolute;
	bottom: 0;
	left: 0;
}
h3{
	font-size: 1.8rem;
	font-weight: bold;
	position: relative;
	padding-left: 24px;
	margin-bottom: 15px;
}
h3::before{
	content: "";
	background: url("../img/common/h3_icon.svg");
	width: 14px;
	height: 14px;
	position: absolute;
	top: 0;
	left: 0;
}
h4{
	padding: 8px 13px;
    background: #FFEDED;
    margin-bottom: 15px;
    position: relative;
}
h4.bg_none{
	background: none;
	padding: 0px;
}
h4::before{
	content: "";
    background: #F51414;
    width: 3px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
h4.bg_none::before{
	content: "";
    display: none;
}
.h4{
	margin-bottom: 20px;
}
@media screen and (max-width:768px){
	h1{
		border-top: none;
	}
}
.cnt_area{
	padding: 50px;
	background: white;
}
.cnt_area .procedure{
	background: #F4F4F4;
	padding: 30px;
	margin-bottom: 60px;
}
.cnt_area .p_btn{
	font-weight: bold;
	display: flex;
}
.cnt_area .p_btn a{
	background: white;
	padding: 25px 20px;
	border:solid 1px #F51414;
	border-radius: 10px;
	max-width: 440px;
	width: 100%;
	margin-right: 12px;
}
.cnt_area .p_btn a:hover{
	color: #F51414;
}
.cnt_area .p_btn a:last-child{
	margin-right: 0px;
}
.cnt_area .p_btn p{
	position: relative;
}
.cnt_area .p_btn p::after{
	content: "";
	background: url("../img/common/dl_icon.svg");
	width: 21px;
	height: 18px;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
}
.cnt_area .p_btn p span{
	font-size: 1.2rem;
}
.cnt_area .procedure .p_txt{
	margin: 20px 0px 0px;
}
.cnt_area .procedure .p_txt p{
	line-height: 1.6;
}
.cnt_area .procedure .p_txt p a{
	color: #F51414;
	text-decoration: underline;
}
.cnt_area .procedure .p_txt .info{
	margin-top: 20px;
	position: relative;
}
.cnt_area .procedure .p_txt .info p.info_ttl{
	padding: 8px 13px;
	background: #FFEDED;
	margin-bottom: 7px;
	position: relative;
}
.cnt_area .procedure .p_txt .info p.info_ttl::before{
	content: "";
	background: #F51414;
	width: 3px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.cnt_area .procedure .cnt .form{
	margin-top: 30px;
}

@media screen and (max-width:768px){
	.contaner{
		display: block;
		padding: 0px;
	}
	#comp .contaner{
		margin-bottom: 10px;
	}
	.sidebar{
		padding: 0px;
		display: none;
		background: rgba(0,0,0,0.6);;
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 999;
	}
	.sidebar nav{
		position: fixed;
		top: 0;
		right: -70%;
		border-radius: 0px;
		filter: none;
		max-width: 100%;
		width: 70%;
		border-radius: 0px;
		height: 100vh;
		filter: none;
		border: solid 2px #F51414;
		z-index: 999;
		padding-top: 90px;
	}
	.sidebar nav > div{
		overflow-y: scroll;
		height: 83vh;
	}
	.sidebar nav dl dd{
		padding: 30px 25px;
	}
	.sidebar nav dl dd ul li{
		margin-bottom: 25px;
	}
	.sidebar nav .sp_logo{
		display: inline;
		padding: 20px;
	}
	.sidebar nav .sp_logo img{
		margin-top: 20px;
		width: 75%;
	}
	
	.body{
		width: 100%;
		font-size: 1.4rem;
		padding: 84px 0 0;
		margin-top: 0;
	}
	h1{
		padding: 30px 15px;
		font-size: 2.4rem;
		margin-bottom: 15px;
	}
	h2{
		font-size: 2rem;
	}
	h2::after{
		max-width: 80px;
	}
	h3{
		font-size: 1.6rem;
		text-indent: -16px;
		/* margin-left: 16px; */
		padding-left: 35px;
		line-height: 1.4;
	}
	
	.cnt_area{
		padding: 15px;
	}
	.cnt_area .procedure{
		padding: 15px;
	}
	.cnt_area p_btn,.cnt_area .p_btn a{
		display: block;
	}
	.cnt_area .p_btn a{
		padding: 15px;
		font-size: 1.4rem;
		margin-bottom: 10px;
	}
	.cnt_area .p_btn a p{
	}
	.cnt_area .procedure .p_txt{
		font-size: 1.4rem;
	}
	.cnt_area .procedure .p_txt p{
		line-height: 1.8;
	}
	.cnt p.mb40{
		margin-bottom: 35px;
	}
	.sidebar dl dd ul li:hover::before{
		content: "";
		display: none;
	}
	.sidebar dl dd ul li:hover{
		padding-left: 0px;
		transition: all 0.5s 0s ease;/*transitionの記述を追加*/
	}
}

/*入学手続き*/
body#petition{
	position: relative;
}
p.q_tyui{
	line-height: 2;
}
p.q_tyui img{
	max-width: 20px;
    width: 100%;
    margin-right: 5px;
}
/*form*/
.form{
}
.form form dl{
	display: flex;
	border-bottom: solid 1px #CECECE;
	padding: 20px 0px;
}
.form form dl.top{
	align-items: flex-start;
}
.form form dl dt{
	max-width: 222px;
	width: 100%;
	font-weight: bold;
	display: flex;
	align-items: center;
	line-height: 1.4;
}
.form form dl dt.dis_b{
	display: block;
}
.form form dl dt.dis_b span{
	color: #333333;
}
.form form dl dt span{
	color: #E50921;
	font-size: 1.2rem;
	margin-left: 10px;
}
.form form dl dt span.small{
	margin-left: 0px;
}
.form form dl dt .q{
	margin-left: 10px;
	cursor: pointer;
}
.form form dl dt .a{
	position: absolute;
    left: 50%;
    transform: translate(-57%, 0);
    background: #FFFFFF;
    padding: 20px;
    border: solid 1px #707070;
    border-radius: 5px;
    font-size: 1.6rem;
	line-height: 1.6;
	max-width: 680px;
	width: 100%;
	font-weight: normal;
	display: none;
	z-index: 10;
}
.form form dl dt .a p.close{
	text-align: center;
	padding: 5px 10px;
	border: solid 1px #707070;
	border-radius: 5px;
	max-width: 112px;
	width: 100%;
	margin: 24px auto 0px;
	cursor: pointer;
}

/*ラジオボタン*/
input[type=radio] {
	display: none; /* 標準スタイル */
}
.sample_label {
	position: relative; /* ボックスの位置を指定する */
	padding: 0 0 0 25px; /* ボックス内側の余白を指定する */
	margin-right: 10px;
}
.sample_label:after, .sample_label:before {
	position: absolute; /* ボックスの位置を指定する */
	content: ""; /* ボックスのコンテンツ */
	display: block; /* ブロックレベル要素化する */
	top: 50%; /* 上部から配置の基準位置を決める */
}
.sample_label:after {
	left: 0px; /* 左から配置の基準位置を決める */
	margin-top: -10px; /* チェック枠の位置 */
	width: 16px; /* ボックスの横幅を指定する */
	height: 16px; /* ボックスの高さを指定する */
	border: 2px solid #CECECE; /* ボックスの境界線を実線で指定する */
	background: #F2F2F2;
	border-radius: 50%; /* ボックスの角丸を指定する */
}
.sample_label:before {
	left: 5px; /* 左から配置の基準位置を決める */
	margin-top: -5px; /* チェックマークの位置 */
	width: 10px; /* ボックスの横幅を指定する */
	height: 10px; /* ボックスの高さを指定する */
	background: #267CDB;/* ボックスの背景色を指定する */
	border-radius: 50%; /* ボックスの角丸を指定する */
	opacity: 0; /* 要素を透過指定する */
}
input[type=radio]:checked + .sample_label:before {
	opacity: 1; /* 要素を表示する */
	z-index: 9;
}
/*チェックボックス*/
input[type="checkbox"] {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
 }
input[type="checkbox"] {
	cursor: pointer;
    padding-left: 40px;/*label手前にチェックボックス用の余白を開ける*/
    vertical-align: middle;
    position: relative;
}
input[type="checkbox"]::before,
input[type="checkbox"]::after {
	content: "";
    display: block; 
    position: absolute;
}
input[type="checkbox"]::before {
	background-color: #F4F4F4;
    border-radius: 0%;
    border: 1px solid #CECECE;
	border-radius: 3px;
    width: 22px;/*チェックボックスの横幅*/
    height: 22px;/*チェックボックスの縦幅*/
    transform: translateY(-50%);
    top: 50%;
    left:0px;
}
input[type="checkbox"]::after {
    border-bottom: 3px solid #267CDB;/*チェックの太さ*/
    border-left: 3px solid #267CDB;/*チェックの太さ*/
    opacity: 0;/*チェック前は非表示*/
    height: 6px;/*チェックの高さ*/
    width: 11px;/*チェックの横幅*/
    transform: rotate(-45deg);
    top: -7px;/*チェック時の位置調整*/
    left: 5px;/*チェック時の位置調整*/
}
input[type="checkbox"]:checked::after {
	opacity: 1;/*チェック後表示*/
}
.check2 input[type="checkbox"]::after{
	top: 3px;
}
.form form .check{
	line-height: 1.4;
	margin-bottom: 15px;
}
.form form .check2{
	margin-top: 20px;
	display: flex;
}
.form form .check2 input[type="checkbox"]{
	padding-left: 30px;
}
/*プルダウン*/
.selectbox-001 {
    position: relative;
}

.selectbox-001::before,
.selectbox-001::after {
    position: absolute;
    content: '';
    pointer-events: none;
}

.selectbox-001::before {
    display: inline-block;
    right: 0;
    width: 2.8em;
    height: 2.8em;
    border-radius: 0 3px 3px 0;
    background-color: #7B7B7B;
}

.selectbox-001::after {
    position: absolute;
    top: 50%;
    right: 1.4em;
    transform: translate(50%, -50%) rotate(45deg);
    width: 6px;
    height: 6px;
    border-bottom: 3px solid white;
    border-right: 3px solid white;
}

.selectbox-001 select {
    appearance: none;
    min-width: 380px;
    height: 2.8em;
    padding: .4em 3.6em .4em .8em;
    border: none;
    border-radius: 3px;
    background-color: #F4F4F4;
    color: #A2A2A2;
    font-size: 1em;
    cursor: pointer;
	outline: 1px solid #CECECE;
}

.selectbox-001 select:focus {
    outline: 1px solid #CECECE;
}
select option:checked {
  background-color: #f1f1f1;
  font-weight: bold;
}
/*ファイルアップ*/
.file{
	text-align: center;
}
.file #drop-zone{
	border: 1px dashed #555555;
	border-radius: 5px;
    padding: 41px;
	background: #F4F4F4;
	color: #A2A2A2;
	line-height: 1.8;
}
.file #drop-zone .note{
	font-size: 1.4rem;
	line-height: 1.8;
	text-align: left;
	margin: 5px auto;
    max-width: 420px;
}
.file label > input {
	display:none; /* アップロードボタンのスタイルを無効にする */
}
.file label {
	color: white; /* ラベルテキストの色を指定する */
	background-color: #43BE69;/* ラベルの背景色を指定する */
	padding: 10px; /* ラベルとテキスト間の余白を指定する */
	border-radius: 5px;
	margin: 20px 0px;
	line-height: 3;
	cursor: pointer;
}
/*送信ボタン*/
input[type="submit"] {
	width: 100%;
    font-size: 1.6rem;
	font-weight: bold;
    color: #fff;
	display: inline-block;
    padding: 20px 0px;
    text-align: center;
	background-color: #267CDB;
    border: 1px solid #267CDB;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 1s;
	margin-top: 40px;
}

/*--hover--*/
input[type="submit"]:hover {
	opacity: 0.8;
}

.form form dl dd{
	width: 100%;
}
.form form dl dd input[type=text]{
	border: solid 1px #CECECE;
	background: #F4F4F4;
	padding: 18px 15px;
	color: #A2A2A2;
	/*font-weight: bold;*/
	width: 100%;
}
.form form dl dd.no input[type=text]{
	max-width: 380px;
    width: 100%;
}
.form form dl dd.relationship input[type=text]{
	max-width: 120px;
    width: 100%;
}
.form form dl dd .post_code{
	display: flex;
    align-items: center;
	margin-bottom: 15px;
}
.form form dl dd .post_code input[type=text]{
	max-width: 121px;
	width: 100%;
	margin: 0px 5px;
}
.form form dl dd .post_code p.address_btn{
	padding: 5px 10px;
	background: #7B7B7B;
	color: white;
	border-radius: 5px;
	font-size: 1.4rem;
}
.form form dl dd.address input[type=text]{
	margin-bottom: 15px;
}
.form form dl dd.address input:last-child{
	margin-bottom: 0px;
}
.form form dl dd.size input[type=text]{
	max-width: 120px;
	width: 100%;
	margin-right: 10px;
}
.form form dl.file_cnt dt span{
	color: #E50921;
}
.form form dl.file_cnt dt span.small{
	color: #333333;
}

.form form .measurement{
	margin: 20px 0px 10px;
}
.form form .measurement p{
	text-indent: -15px;
	margin-left: 15px;
}
.form form .measurement a{
	border:solid 1px #F51414;
	border-radius: 5px;
	display: block;
	max-width: 244px;
	width: 100%;
	margin-top: 10px;
}
.form form .measurement a p{
	padding: 10px 15px 10px 25px;
	font-size: 1.4rem;
	position: relative;
}
.form form .measurement a:hover{
	color: #F51414;
}
.form form .measurement a p::before{
	content: "";
    background: url(../img/common/arrow.svg);
    width: 8px;
    height: 10px;
    position: absolute;
    top: 50%;
    left: 0;
	transform: translateY(-50%);
}
.form form dl dd input[type=text].inp_error{
	border: solid 1px #E50921;
}
.form form p.error{
	color: #E50921;
	margin-top: 5px;
	text-align: left;
}

@media screen and (max-width:768px){
	.form form dl{
		padding: 27px 0px;
		display: block;
	}
	.form form dl dt{
		margin-bottom: 15px;
		font-size: 1.6rem;
	}
	.form form dl dt span{
		font-size: 1rem;
	}
	.form form dl dd{
		line-height: 1.6;
	}
	.form form dl dt .a{
		position: absolute;
		left: 50%;
		transform: translate(-50%, 0%);
		background: #FFFFFF;
		padding: 20px;
		border: solid 1px #707070;
		border-radius: 5px;
		font-size: 1.6rem;
		line-height: 1.6;
		max-width: 100%;
		width: 91.8%;
		font-weight: normal;
		display: none;
		z-index: 10;
	}
	.form form dl dt .a p.close{
		margin-top: 15px;	
	}
	
	.sample_label{
		display: block;
		margin-bottom: 18px;
	}
	.radio label:last-child{
		margin-bottom: 0px;
	}
	.form form .check{
		display: flex;
		align-items: baseline;
	}
	.form form .check2{
		align-items: center;
	}
	input[type="checkbox"]::after{
		top: 0px;
	}
	.check2 input[type="checkbox"]::after{
		top: 0px;
	}
	.selectbox-001 select{
		min-width: 100%;
	}
	.form form dl dd .post_code input[type=text]{
		max-width: 90px;
		margin-bottom: 0px;
	}
	.file #drop-zone{
		padding: 20px 15px;
		font-size: 1.4rem;
	}
	.file label{
		padding: 14px 25px;
		line-height: 3.8;
	}
	.file #drop-zone .note{
		font-size: 1.2rem;
	}
	input[type=submit]{
		margin-bottom: 80px;
		margin-top: 20px;
	}
}

/*完了ページ*/
.comp{
	background: white;
	height: 622px;
	padding: 80px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	border-top: solid 5px #F51414;
}
.comp .comp_cnt p.ttl{
	font-size: 3.2rem;
	line-height: 1.8;
	font-weight: bold;
	color: #F51414;
	margin: 30px 0px;
}
@media screen and (max-width:768px){
	#comp{
		background: white;
	}
	.comp{
		padding: 25px;
		height: 100%;
		background: none;
		display: block;
		padding-top: 60px;
	}
	.comp .comp_cnt p.ttl{
		font-size: 2.4rem;
		margin: 25px 0px;
	}
}

/*TOP*/
.t_logo{
	max-width: 400px;
	margin-bottom: 22px;
}
.top p.ttl{
	font-size: 2.6rem;
	margin-bottom: 34px;
}
.top .flow{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-top: 25px;
	margin-bottom: 60px;
}
.top .flow p{
	margin: 7px 10px;
	color: #F51414;
	font-weight: bold;
	font-size: 2rem;
	max-width: 37px;
	width: 100%;
	text-align: center;
}
.top .flow dl{
	width: 100%;
	/* width: 32%; */
}
.top .flow dl dt{
	font-size: 1.8rem;
	color: white;
	padding: 15px 15px 15px 62px;
	background: #F51414;
	position: relative;
	margin-bottom: 12px;
	font-weight: bold;
}
.top .flow dl dt::before{
	content: "";
	width: 38px;
	height: 38px;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(15px,-50%);
}
.top .flow dl dt.f1::before{
	content: "";
	background: url("../img/top/icon1.svg");
	background-size: cover;
}
.top .flow dl dt.f2::before{
	content: "";
	background: url("../img/top/icon1.svg");
	background-size: cover;
}
.top .flow dl dt.f3::before{
	content: "";
	background: url("../img/top/icon3.svg");
	background-size: cover;
}
.top .flow dl dd{
	padding: 15px 15px 15px 30px;
	background: #F2F2F2;
	border-radius: 5px;
	margin-bottom: 3px;
	position: relative;
	font-weight: bold;
}
.top .flow dl dd:hover{
	color: #F51414;
}
.top .flow dl dd::before{
	content: "";
	width: 8px;
	height: 10px;
	background: url("../img/common/arrow.svg");
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(15px,-50%);
}
.top .flow dl dd.close{
	background: none;
	line-height: 1.6;
    text-indent: -25px;
	margin-left: 25px;
    padding: 0px;
}
.top .flow dl dd.close:hover{
	color: #333333;
}
.top .flow dl dd.close::before{
	display: none;
}
.table{
	margin-bottom: 60px;
}
.table table{
	border-collapse: collapse;
	border: 1px solid #CECECE;
	font-size: 1.6rem;
	line-height: 1.4;
	width: 100%;
}
.table table th:first-child{
	width: 200px;
}
.table table th,.table table td{
  	background-color: #F4F4F4;
  	padding: 20px;
  	border: 1px solid #CECECE;
	text-align: left;
}
#petition .table table th{
	text-align: center;
}
.table table td{
	text-align: center;
}
.table table th p{
	text-align: left;
}
.table table th{
	font-weight: bold;
}
.table table th span{
	font-size: 1.4rem;
}
.table table td{
	background: white;
}
.table table td span{
	font-size: 1.2rem;
}
.table table td span.line{
	font-size: 1.6rem;
}
.table2{
	max-width: 556px;
	width: 100%;
	margin-top: 23px;
	margin-bottom: 0px;
}
.table2 table th,.table2 table td{
	text-align: left;
	padding: 15px;
}
@media screen and (max-width:768px){
	.top .cnt_area{
		padding-top: 37px;
	}
	.t_logo {
		margin-bottom: 22px;
	}
	.t_logo img{
		max-width: 212px;
		width: 100%;
	}
	.top p.ttl{
		font-size: 2.2rem;
		margin-bottom: 32px;
	}
	.top .flow{
		display: block;
		margin-top: 20px;
		margin-bottom: 65px;
	}
	.top .flow p{
		margin: 7px auto;
	}
	.top .flow p.icon2{
		transform: rotate(90deg);
	}
	.top .flow dl{
		width: 100%;
		margin-bottom: 20px;
	}
	.top .flow dl dt{
		padding: 17px 20px 17px 51px;
		font-size: 1.4rem;
		margin-bottom: 5px;
	}
	.top .flow dl dt::before{
		width: 26px;
		height: 26px;
	}
	.table{
		margin-bottom: 35px;
	}
	.table table{
		width: 100%;
    	table-layout: fixed;
	}
	.table table th, .table table td{
		padding: 5px;
		font-size: 1.2rem;
	}
	.table table th span,.table table td span{
		font-size: 1rem;
	}
	.table table th:first-child{
		width: auto;
	}
	.table2 table th, .table2 table td{
		padding: 15px 10px;
		font-size: 1.4rem;
	}
	.table2 table th:first-child{
		width: 85px;
	}
}

/*入学手続きについてページ*/
.procedure_ind a{
	text-decoration: underline;
	color: #d52c2c;
}
.procedure_ind h1{
	margin-bottom: 0px;
}
.procedure_ind .anc_link{
	padding: 5px 50px 35px;
	background: white;
	margin-bottom: 13px;
    display: flex;
    flex-wrap: wrap;
	justify-content: space-between;
}
.procedure_ind .anc_link a{
    display: flex;
	width: 48%;
	padding: 20px 0px;
	border-bottom: solid 1px #BEBEBE;
	position: relative;
}
.procedure_ind .anc_link a dl{
	display: flex;
	font-weight: bold;
}
.procedure_ind .anc_link a dl dt{
	margin-right: 20px;
}
.procedure_ind .anc_link a dl dt span{
	display: inline-block;
	overflow: hidden;
	color: transparent;
	position: relative;
}
.procedure_ind .anc_link dl dt span::before,.procedure_ind .anc_link dl dt span::after{
	content: attr(data-no);
	position: absolute;
	top: 0;
	left: 0;
	transition: all .3s;
}
.procedure_ind .anc_link dl dt span::after{
	top: -100%;
}
.procedure_ind .anc_link dl dt span::before{
	color: #333333;
}
.procedure_ind .anc_link dl dt span::after{
	color: #F51414;
}
.procedure_ind .anc_link a:hover dl dt span::before{
	top: -100%;
}
.procedure_ind .anc_link a:hover dl dt span::after{
	top: 0;
}
.procedure_ind .anc_link a dl dd{
	padding-right: 20px;
}
.procedure_ind .anc_link dl dd span{
	display: inline-block;
	overflow: hidden;
	color: transparent;
	position: relative;
}
.procedure_ind .anc_link dl dd span::before,.procedure_ind .anc_link dl dd span::after{
	content: attr(data-txt);
	position: absolute;
	top: 0;
	left: 0;
	transition: all .3s;
}
.procedure_ind .anc_link dl dd span::after{
	top: -100%;
}
.procedure_ind .anc_link dl dd span::before{
	color: #333333;
}
.procedure_ind .anc_link dl dd span::after{
	color: #F51414;
}
.procedure_ind .anc_link a:hover dl dd span::before{
	top: -100%;
}
.procedure_ind .anc_link a:hover dl dd span::after{
	top: 0;
}
.procedure_ind .anc_link dl dd::after{
	content: "";
	width: 21px;
	height: 21px;
	background: url("../img/procedure/anc_arrow.svg");
	background-size: cover;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(0,-50%);
}

.procedure_ind  .cnt{
	margin-bottom: 83px;
}
/*※・*/
.ind{
	text-indent: -17px;
	margin-left: 17px;
}
.ind2{
	text-indent: -42px;
    margin-left: 42px;
}
/*（１）*/
.ind4{
	text-indent: -42px;
	margin-left: 42px;
}
@media screen and (max-width:768px){
	.procedure_ind .anc_link{
		display: block;
		padding: 0px 20px 20px;
	}
	.procedure_ind .anc_link a{
		width: 100%;
	}
	.procedure_ind .cnt_area{
		padding: 25px 20px;
	}
	.procedure_ind .cnt{
		margin-bottom: 30px;
	}
	.procedure_ind .anc_link a:hover dl dt span::before{
		top: 0;
	}
	.procedure_ind .anc_link a:hover dl dt span::after{
		top: -100%;
	}
	.procedure_ind .anc_link a:hover dl dd span::before{
		top: 0;
	}
	.procedure_ind .anc_link a:hover dl dd span::after{
		top: -100%;
	}
}

/*入寮について*/
.text{
	padding: 0px 50px;
	background: white;
}
.h4_txt_box{
	margin-left: 45px;
}
.h4_txt_box2{
	margin-left: 17px;
}
/*※*/
.h4_txt_box .ind1{
	text-indent: -16px;
    margin-left: 16px;
}
/*１）*/
.h4_txt_box .ind3{
	text-indent: -27px;
    margin-left: 27px;
}
/*二段落目の・*/
.h4_txt_box .ind5{
	text-indent: -16px;
    margin-left: 16px;
}
.procedure_ind .table{
	margin-bottom: 10px;
}
.procedure_ind .table2{
	max-width: 100%;
	margin-top: 0px;
}
.procedure_ind .table3 tr td:first-child{
	width: 25%;
}
.procedure_ind .table3 tr td:nth-child(2),.procedure_ind .table3 tr td:nth-child(3){
	width: 34%;
}
.procedure_ind .table4{
	margin-bottom: 20px;
}
.table4 table th, .table4 table td{
	text-align: left;
}
.procedure_ind .table4 .b_none{
	border: none;
	width: 6%;
}
.procedure_ind .table4 .bb_none{
	border-bottom: none;
}
@media screen and (max-width:768px){
	.text{
		padding: 0px 20px;
	}
	.table4 table{
		table-layout:auto;
	}
}

/*その他*/
.other .table5 table th,.other .table5 table td{
	text-align: left;
}
.other .table5 table th{
	width: 6%;
}
.other .table5 table td{
	width: 43.6%;
}
.other .table6 table th:first-child{
	width: auto;
}
.other .ind4_1{
	margin-left: 45px;
}
.other .ind4_1 .ind4_2{
	text-indent: -30px;
    margin-left: 30px;
}
.other .table3 tr td:nth-child(2), .procedure_ind .table3 tr td:nth-child(3){
	width: 43.6%;
}
.other .table5 table th:first-child{
	width: 200px;
}
.other .table table td:first-child{
	width: 200px;
}
@media screen and (max-width:768px){
	.other .table6 table th:first-child{
		width: 51px;
	}
	.other .table table td:first-child{
		width: 51px;
	}
	.ind4 {
		text-indent: -42px;
		margin-left: 42px;
	}
	.other .ind4_1{
		margin-left: 40px;
	}
	.other .ind4_1 .ind4_2 {
		text-indent: -26px;
		margin-left: 26px;
	}
	.other .table5 table th:first-child{
		width: 90px;
	}
}

/*フッター高さ指定*/
@media screen and (max-height:855px){
	#comp footer{
		position: static;
		display: block;
		width: 100%;
		padding: 0px 20px;
	}
}

.international .cnt{
	margin-bottom: 83px;
}
@media screen and (max-width:768px){
	.international .cnt{
		margin-bottom: 30px;
	}
}

/*20241202追加
.table4 table td.tate{
	-ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    vertical-align: middle;
    text-align: center;
}*/

h1 + .cnt_area {
	padding-top: 20px;
}
h4 {
	line-height: 1.5;
}
.h4 {
	margin-top: 20px;
}
p + .table {
	margin-top: 20px;
}
p + h3,
div + h3 {
	margin-top: 30px;
}
ol {
	margin: 20px 0;
}
ol li {
	position: relative;
	line-height: 1.5;
}
ol li + li {
	margin-top: 0.5em;
}
ol.olind2 li {
}
ol.olind2 li span:nth-child(1) {
	position: absolute;
	top: 0;
	left: 0;
}
ol.olind2 li span:nth-child(2) {
	display: block;
	padding-left: 24px;
}
ol.olind2 li dl {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 4px 0 0 24px;
}
ol.olind2 li dt {
	background: #F2F2F2;
	padding: 8px 12px 8px 12px;
	width: 100px;
	margin-bottom: 2px;
}
ol.olind2 li dd {
	background: #F2F2F2;
	padding: 8px 12px 8px 12px;
	width: calc(100% - 102px);
	margin-bottom: 2px;
}
.p_btn a {
	text-decoration: none;
}
.hx_description {
	padding: 0 50px 0;
  background: white;
}
.border_waku {
	border: 1px solid #000;
	padding: 20px;
	margin: 20px 0 30px;
}
.border_waku ol {
	margin: 0;
}
.link_column2_area {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding: 0 10px;
	margin-bottom: 40px;
}
.link_column2_area div {
	width: calc(49% - 5px);
}
.link_column2_area .p_btn a {
	max-width: none;
}
.link_column2_area .p_btn a p {
	padding-right: 28px;
}
b {
	font-weight: bold;
}

.procedure_ind .anc_link.dormitory_anc_link a:nth-child(1){
	order: 1;
}
.procedure_ind .anc_link.dormitory_anc_link a:nth-child(2){
	order: 3;
}
.procedure_ind .anc_link.dormitory_anc_link a:nth-child(3){
	order: 2;
}
.procedure_ind .anc_link.dormitory_anc_link a:nth-child(4){
	order: 4;
}
.procedure_ind .anc_link.preparation_anc_link a:nth-child(1){
	order: 1;
}
.procedure_ind .anc_link.preparation_anc_link a:nth-child(2){
	order: 3;
}
.procedure_ind .anc_link.preparation_anc_link a:nth-child(3){
	order: 5;
}
.procedure_ind .anc_link.preparation_anc_link a:nth-child(4){
	order: 2;
}
.procedure_ind .anc_link.preparation_anc_link a:nth-child(5){
	order: 4;
}
.procedure_ind .anc_link.preparation_anc_link a:nth-child(6){
	order: 6;
}

u {
	text-decoration: underline;
}

@media screen and (max-width:768px){
	.procedure_ind .cnt_area {
		padding-top: 1px;
	}
	.hx_description {
		padding: 0 20px 40px;
	}
	h1 + .cnt_area {
    padding-top: 20px;
	}
	.anc_link + .cnt_area {
		padding-top: 25px;
	}

.link_column2_area {
	gap: 6px;
	padding: 0;
}
	.link_column2_area div {
		width: calc(100%);
	}
}