@charset "utf-8";
/*共通設定*/
/*終わり*/  

/*<div class="guide-bar">*/
.guide-bar {
	display: block;
	background-color: #14b88d;
	color: #fff;
	padding: 8px 2vw;
}

.guide-bar-in p {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.guide-bar:hover {
	opacity: 0.9;
}
/*終わり*/

/*<section class="notice-01">*/
.notice-01 {
    padding: 0 2vw;
	margin: 80px 0;
}

.notice-01-in {
    max-width: 880px;
    width: 100%;
    margin: 0 auto;
    border: solid 3px #f21a41;
	display: table;
}

.notice-01-in h2 {
	-ms-writing-mode: tb-rl;
  	writing-mode: vertical-rl;
	background-color: #f21a41;
	display: table-cell;
	vertical-align: middle;
	color: #fff;
	font-weight: 400;
	width: 6%;
	padding-top: 32px;
}

.side-line {
	position: relative;
}

.side-line::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 32px;
	width: 1px;
	height: 80px;
	margin: auto;
	background-color: #fff;
}

.notice-list {
	padding: 16px ;
}

.notice-list li {
	margin: 10px 0;
	text-align: left;
}

.notice-list a {
    color: #f21a41;
    padding: 2px 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.notice-list a:hover {
	background-color: #fdd3db;
}

.notice-list .list-flex {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	align-items: center;
	justify-content: left;
}

.notice-list time {
	width: 14%;
	font-size: 13px;
}

.notice-01 .arrow-con01::before{
	background: #f21a41;
}

.notice-01 .arrow-con01::after{
	border-top: 1px solid #f21a41;
	border-right: 1px solid #f21a41;
}
/*終わり*/  

/*<section class="page-nav">*/
.page-nav {
	margin-bottom: 100px;
}

.page-nav-in {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
}

.page-nav-in a {
	width: 48%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 32px;
	padding-bottom: 32px;
	padding-right: 10px;
	border-bottom: solid 2px #b6b4b2;
	transition: 0.2s;
}

.page-nav-in a:hover {
	color: #14b88d;
}

.page-nav-flex {
	display: flex;
	align-items: center;
	justify-content: left;
	flex-wrap: wrap;
	width: 100%;
	font-size: 20px;
}

.page-nav-img {
	width: 80px;
	margin-right: 24px;
	transition: 0.2s;
}

.page-nav-in a:hover .page-nav-img{
	transform: translateY(-3px);
}

.page-nav-in a:hover .arrow-con02::before {
	border: 1px solid #14b88d;
}

.page-nav-in a:hover .arrow-con02::after {
	border-top: 2px solid #14b88d;
	border-right: 2px solid #14b88d;
}
/*終わり*/ 

/*<section class="notice-02">*/
.notice-02 {
	margin-bottom: 100px;
}

.notice-02-in {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 100%;
}

.notice-02-l,
.notice-02-r {
	width: 48%;
}

.notice-list-02 {
	padding: 16px 0;
}

.notice-list-02 li {
	margin: 10px 0;
	text-align: left;
}

.notice-list-02 a {
    padding: 2px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.notice-list-02 a:hover {
	color: #2264b9;
}

.notice-list-02 .list-flex {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	align-items: center;
	justify-content: left;
}

.notice-list-02 time {
	width: 20%;
	font-size: 13px;
}

.notice-list-02 a:hover .arrow-con01::before {
	background: #2264b9;
}

.notice-list-02 a:hover .arrow-con01::after {
	border-top: 1px solid #2264b9;
	border-right: 1px solid #2264b9;
}
/*終わり*/

/*<section class="related-hos">*/
.related-hos {
	margin-bottom: 100px;
}

.related-hos-in h2 {
	padding-bottom: 8px;
	border-bottom: solid 1px #435259;
}

.related-hos-in h2 span {
	margin-right: 8px;
	font-size: 20px;
}

.hos-flex {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 100%;
}

.hos-0102 {
	width: 48%;
	padding: 28px 0;
}

.hos-0102 img {
	width: 100%;
	object-fit: cover;
}

.hos-0102 a{
	transition: 0.2s;
}

.hos-0102 a:hover {
	color: #2264b9;
}

.hos-0102 h3 {
	margin-top: 16px;
	font-weight: 600;
}

.hos-txt {
	margin: 16px 0;
}

.hos-btn {
	text-align: right;
	margin-right: 8px;
}

.hos-btn .arrow {
	margin-left: 8px;
	transition: 0.2s;
}

.hos-0102 a:hover .arrow-con02::before {
	border: 1px solid #2264b9;
}

.hos-0102 a:hover .arrow-con02::after {
	border-top: 2px solid #2264b9;
	border-right: 2px solid #2264b9;
}
/*終わり*/

/*<section class="related-hos">*/
.guide {
	margin-bottom: 100px;
}

.guide-in h2 {
	padding-bottom: 8px;
	border-bottom: solid 1px #435259;
}

.guide-in h2 span {
	margin-right: 8px;
	font-size: 20px;
}

.guide-list {
	padding: 16px 0;
}

.guide-list li {
	margin: 10px 0;
	text-align: left;
}

.guide-list .list-04,
.guide-list .list-07 {
	margin-top: 40px;
}

.guide-list a {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
	transition: 0.2s;
}

.guide-list a:hover {
	background-color: #b8eadd;
}

.guide-list .list-flex {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	align-items: center;
	justify-content: left;
}

.guide-list img {
	width: 30px;
	margin-right: 40px;
}

.guide-list-02 {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
}

.guide-list-02 dt,
.guide-list-02 dd {
	padding: 10px;
}

.guide-list-02 dt {
	width: 30%;
	display: flex;
	align-items: center;
	justify-content: left;
}

.guide-list-02 dd {
	width: 70%;
}

.guide-list .arrow-con01::before{
	background: #435259;
}

.guide-list .arrow-con01::after{
	border-top: 1px solid #435259;
	border-right: 1px solid #435259;
}
/*終わり*/

/*タブレット*/
@media (max-width: 1024px) {
/*共通設定*/
/*終わり*/ 

/*<div class="guide-bar">*/
.guide-bar {
	padding: 8px 5vw;
}

.guide-bar p {
	font-size: 14px;
}
/*終わり*/

  
/*<div class="first-view">*/
/*終わり*/ 

/*<section class="notice-01">*/
/*終わり*/ 

/*<section class="page-nav">*/
	.page-nav-img {
		width: 50px;
	}
/*終わり*/ 

/*<section class="notice-02">*/
	.notice-02-in {
		display: block;
	}

	.notice-02-l,
	.notice-02-r {
		width: 100%;
	}

	.notice-02-l {
		margin-bottom: 16px;
	}
/*終わり*/ 

/*<section class="related-hos">*/
/*終わり*/ 

/*<section class="guide">*/
	.guide-list-02 dt {
		width: 35%;
	}

	.guide-list-02 dd {
		width: 65%;
	}
/*終わり*/ 
}
  
/*スマホ*/
@media (max-width: 599px) {
/*共通設定*/
/*終わり*/ 

/*<div class="first-view">*/
/*終わり*/ 

/*<section class="notice-01">*/
.notice-01-in {
	display: block;
}

.notice-01-in h2 {
	-ms-writing-mode: horizontal-tb;
	writing-mode: horizontal-tb;
	padding: 8px;
}

.side-line::after {
	content: '';
	position: absolute;
	top: 50%;
    left: 100px;
	width: 120px;
	height: 1px;
	background-color: #fff;
}

.notice-list {
	padding: 8px;
}
/*終わり*/ 

/*<section class="page-nav">*/
	.page-nav {
		margin-bottom: 80px;
	}

	.page-nav-in {
		display: block;
	}

	.page-nav-in a {
		width: 100%;
		padding-bottom: 10px;
	}

	.page-nav-flex {
		font-size: 18px;
	}
/*終わり*/ 

/*<section class="notice-02">*/
	.notice-02 {
		margin-bottom: 80px;
	}

	.notice-list-02 .list-flex {
		flex-direction: column;
		align-items: initial;
	}
/*終わり*/ 

/*<section class="related-hos">*/
	.related-hos {
		margin-bottom: 80px;
	}

	.hos-flex {
		display: block;
	}

	.hos-0102 {
		width: 100%;
	}

	.hos-0102 h3 {
		font-size: 18px;
	}
/*終わり*/ 

/*<section class="guide">*/
	.guide {
		margin-bottom: 80px;
	}

	.guide-list a {
		padding: 10px 4px;
	}

	.guide-list img {
		margin-right: 24px;
	}

	.guide-list-02 {
		display: block;
	}

	.guide-list-02 dt {
		width: 100%;
	}

	.guide-list-02 dd {
		width: 100%;
		margin-bottom: 24px;
		padding: 0 10px;
	}
/*終わり*/ 

}