@charset "utf-8";

/*見出し
--------------------------------------------------*/

h1{
	display: inline-block;
	font-size: 4.37rem;
	color: var(--main-color);
	font-family: var(--font-zenmaru);
	font-weight: 500;
	margin-top: 100px;
	margin-bottom: 90px;
	text-align: center;
	position: relative;
	z-index: 3;
}
h1::before{
	content: '';
	display: block;
	width: calc(100% + 40px);
	height: 100%;
	border-radius: 1000px;
	background: rgba(197,228,241,0.85);
	position: absolute;
	bottom: -10px;
	left: -20px;
	z-index: -1;
}
h1 span{
	display: block;
	font-size: 3.12rem;
	color: var(--sub-color01);
	padding-bottom: 60px;
	position: relative;
}
h1 span::after{
	content: '';
	display: block;
	width: 77px;
	height: 13px;
	background: url("../imgs/kasou/icon-h1.svg") center / contain no-repeat;
	position: absolute;
	bottom: 10px;;
	left: 0;
	right: 0;
	margin: 0 auto;
}
h2{
	font-size: 2.81rem;
	color: var(--sub-color01);
	font-family: var(--font-zenmaru);
	font-weight: 500;
	text-align: center;
	margin-top: 110px;
	margin-bottom: 80px;
	padding-bottom: 30px;
	border-bottom: 1px solid var(--main-color);
}
h2 span{
	display: block;
	font-size: 2rem;
	color: var(--sub-color01);
	margin-bottom: 20px;
}
h3{
	font-size: 2rem;
	font-family: var(--font-zenmaru);
	font-weight: 500;
	color: var(--main-color);
	text-align: center;
	margin-top: 60px;
	margin-bottom: 50px;
	padding: 15px 0;
	border-top: 6px dotted var(--sub-color03);
	border-bottom: 6px dotted var(--sub-color03);
}
h4{
	/*display: inline-block;*/
	font-size: 1.75rem;
	font-family: var(--font-zenmaru);
	font-weight: 500;
	background: var(--bg-color03);
	margin-top: 50px;
	margin-bottom: 40px;
	padding: 8px 20px;
	border-radius: 30px; 
}
h5{
	font-size: 1.5rem;
	font-family: var(--font-zenmaru);
	font-weight: 500;
	padding-left: 20px;
	margin-top: 50px;
	margin-bottom: 40px;
	position: relative;
}
h5::before{
	content: '';display: block;
	width: 8px;
	height: 100%;
	border-radius: 10px;
	background: var(--sub-color03);
	position: absolute;
	top: 0;
	left: 0;
}
.strong{
	font-size: 1.5rem;
	font-family: var(--font-zenmaru);
	font-weight: 500;
	color: var(--sub-color01);
}

@media screen and (max-width:767px){
	h1{
		margin-top: 50px;
    	font-size: 2rem;
    	margin-bottom: 40px;
	}
	h1 span{
		font-size: 1.37rem;
    	padding-bottom: 30px;
	}
	h1 span::after{
		background: url("../imgs/kasou/icon-h1-sp.svg") center / contain no-repeat;
		width: 35px;
		height: 9px;
	}
	h2{
		font-size: 1.68rem;
		margin-top: 50px;
		margin-bottom: 40px;
		padding-bottom: 10px;
	}
	h2 span{
		font-size: 1.12rem;
		margin-bottom: 5px;
	}
	h3{
		font-size: 1.31rem;
		margin-top: 40px;
		margin-bottom: 30px;
		padding: 10px 0;
		border-top: 4px dotted var(--sub-color03);
		border-bottom: 4px dotted var(--sub-color03);
	}
	h4{
		font-size: 1.25rem;
    	padding: 8px 15px;
		margin-top: 30px;
    	margin-bottom: 20px;
	}
	h5{
		font-size: 1.12rem;
		padding-left: 15px;
		margin-top: 20px;
    	margin-bottom: 20px;
	}
	h5::before{
		width: 5px;
	}
	.strong{
		font-size: 1.12rem;
	}
}


/*画像キャプション
--------------------------------------------------*/

figure figcaption{
	font-size: 1rem;
	color: var(--sub-color02);
}

/*figure.img-ws{
	max-width: 400px;
	margin: 0 auto;
}
figure.img-ws img{
	width: 100%;
}*/


@media screen and (max-width:767px) {
	/*figure.img-ws{
		width: 70%;
		margin: 0 auto;
	}
	figure.img-ws img{
		width: 100%;
	}*/
	figure figcaption{
		font-size: 0.875rem;
	}
}


/*ボタン
--------------------------------------------------*/



.button01,
.button02{
	display: block;
	margin: 20px auto 0;
}
.button01 > a,
.button02 > a{
	display: inline-block;
	padding: 10px 80px 10px 40px;
	font-size: 1.37rem;
	font-family: var(--font-zenmaru);
	font-weight: 500;
	text-decoration: none;
	border-radius: 60px;
	position: relative;
	transition: all .3s ease;
}
.button01 > a{
	color: #fff;
	background: var(--sub-color01);
	border: 1px solid var(--sub-color01);
}
.button02 > a{
	color: var(--main-color);
	background: #fff;
	border: 1px solid var(--sub-color01);
}
.button01 > a::after,
.button02 > a::after{
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 10px solid var(--sub-color03);
	border-right: 0;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 40px;
	margin: auto 0;
	transition: all .3s ease;
}

@media (hover: hover) {
	.button01 > a:hover{
		background: var(--main-color);
		border: 1px solid var(--main-color);
	}
	.button01 > a:hover::after,
	.button02 > a:hover::after{
		right: 35px;
	}
	.button02 > a:hover{
		background: var(--bg-color02);
	}
}

@media screen and (max-width:767px){
	.button01 > a,
	.button02 > a{
		font-size: 1.12rem;
		padding: 4px 50px 6px 20px;
	}
	.button01 > a::after,
	.button02 > a::after{
    	border-top: 5px solid transparent;
    	border-bottom: 5px solid transparent;
    	border-left: 10px solid var(--sub-color03);
		right: 20px;
	}
	
	@media (hover: hover) {
		.button01 > a:hover::after,
		.button02 > a:hover::after{
			right: 15px;
		}
	}
}



/*テキスト
--------------------------------------------------*/

/*　テキストサイズ　*/

.fs-7 {
    font-size: 0.9rem!important;
}

/*　テキストカラー　*/

.font-red{
	color: var(--sub-color07);
}
.font-blue{
	color: var(--sub-color01);
}
.font-darkblue{
	color: var(--main-color);
}
.font-green{
	color: var(--sub-color08);
}
.font-gray{
	color: #666666;
}

/*テーブル設定
--------------------------------------------------*/
table {
	border-collapse: collapse;
	max-width: 100%;
	margin-top: 30px;
}
table caption {
	color: var(--sub-color01);
	font-weight: bold;
	text-align: left;
	padding: 0;
	margin-bottom: 5px;
	caption-side: top;
}
table thead th {
	background: var(--bg-color02);
	font-weight: bold;
	border: solid 1px var(--sub-color06);
}
table th {
	padding: 5px 10px;
	border: solid 1px var(--sub-color06);
	font-weight: bold;
	background: var(--bg-color04);
	white-space: normal;
    word-break: break-word;
}
table td {
	padding: 5px 10px;
	border: solid 1px var(--sub-color06);
}


@media screen and (max-width:767px){
	table th,
	table td{
		padding: 3px 10px;
	}
	table.res th,
	table.res td{
		display: block;
		border-bottom: none;
	}
	table.res{
		border-bottom: solid 1px var(--sub-color06);
	}
}

/*リスト設定
--------------------------------------------------*/

/*　単体リンク　*/

.link{
	margin-top: 20px;
}
.link a{
	display: inline-block;
	padding-left: 20px;
	color: var(--sub-color01);
	position: relative;
}
.link a::before{
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 10px solid var(--sub-color03);
	border-right: 0;
	position: absolute;
	top: 12px;
	left: 0;
	transition: all .3s ease;
}

@media (hover: hover) {
	.link a:hover::before{
		left: 5px;
	}
}

@media screen and (max-width:768px){
	.link a{
		padding-left: 15px;
	}
	.link a::before{
		border-top: 4px solid transparent;
		border-bottom: 4px solid transparent;
		border-left: 8px solid var(--sub-color03);
		top: 10px;
	}
}

/*　アイコン付リスト　*/
.list,
.list-s{
	margin-top: 20px;
	/*margin-left: 0;
	margin-right: 0;*/
}

.list > li,
.list-s > li{
	display: block;
	padding-left: 20px;
	position: relative;
}
.list > li::before{
	content: '';
	display: block;
	width: 12px;
	height: 12px;
	background: var(--sub-color03);
	border-radius: 50%;
	position: absolute;
	top: 10px;
	left: 0;
}
.list-s > li::before{
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: 1px solid var(--sub-color01);
	position: absolute;
	top: 12px;
	left: 2px;
}

@media screen and (max-width:767px){
	.list > li,
	.list-s > li{
		padding-left: 15px;
	}
	.list > li::before{
		width: 8px;
		height: 8px;
		top: 10px;
	}
	.list-s > li::before{
		width: 6px;
		height: 6px;
		top: 11px;
	}
}

/*　アイコン付リンクリスト　*/

.linklist,
.linklist-s{
	margin-top: 20px;
	/*margin-left: 0;
	margin-right: 0;*/
}
.linklist > li > a,
.linklist-s > li > a{
	display: inline-block;
	padding-left: 20px;
	position: relative;
}
.linklist > li > a::before{
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 10px solid var(--sub-color03);
	border-right: 0;
	position: absolute;
	top: 10px;
	left: 0;
	transition: all .3s ease;
}

.linklist-s > li > a::before{
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 10px solid var(--sub-color01);
	border-right: 0;
	position: absolute;
	top: 10px;
	left: 0;
	transition: all .3s ease;
}
.linklist-s > li > a::after{
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 7px solid #fff;
	border-right: 0;
	position: absolute;
	top: 12px;
	left: 1px;
	transition: all .3s ease;
}

@media (hover: hover) {
	.linklist > li > a:hover::before{
		left: 5px;
	}
	.linklist-s > li > a:hover::before{
		left: 5px;
	}
	.linklist-s > li > a:hover::after{
		left: 6px;
	}
}

@media screen and (max-width:767px){
	/*.linklist,
	.linklist-s{
		padding-left: 15px;
	}*/
	.linklist > li > a,
	.linklist-s > li > a{
		padding-left: 15px;
	}
	.linklist > li > a::before{
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 8px solid var(--sub-color03);
		top: 10px;
	}
	.linklist-s > li > a::before{
		border-top: 5px solid transparent;
		border-bottom: 5px solid transparent;
		border-left: 9px solid var(--sub-color01);
		top: 9px;
	}
	.linklist-s > li > a::after{
		border-top: 3px solid transparent;
		border-bottom: 3px solid transparent;
		border-left: 6px solid #fff;
		top: 11px;
	}
}


/*---- リンク用アイコン ----*/

.ic-newwin{
	display: inline-block;
	width: 34px;
	padding-left: 5px;
	padding-right: 5px;
	margin-bottom: 3px;
	vertical-align: middle;
}
.ic-pdf,
.ic-word,
.ic-excel,
.ic-zip{
	padding: 0 8px 1px;
	font-size: 0.875rem;
	border-radius: 30px;
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 3px;
	vertical-align: middle;
}
.ic-pdf{
	color: #fff;
	background: var(--sub-color07);
}
.ic-word{
	color: #fff;
	background: var(--sub-color01);
}
.ic-excel{
	color: #fff;
	background: var(--sub-color08);
}
.ic-zip{
	color: #fff;
	background: #333;
}


@media screen and (min-width:768px),print {
table .ic-pdf,
table .ic-word,
table .ic-excel,
table .ic-zip{
	font-size: 0.75rem;
	padding: 3px;
}
}

/*番号リスト:ローマ大文字*/
ol {
	list-style-type: decimal;
	/*margin-left: 30px;*/
}
.ollist-ur {
	list-style-type: upper-roman;
}
/*番号リスト:ローマ小文字*/
.ollist-lr {
	list-style-type: lower-roman;
}
/*番号リスト:アルファベット大文字*/
.ollist-ua {
	list-style-type: upper-alpha;
}
/*番号リスト:アルファベット小文字*/
.ollist-la {
	list-style-type: lower-alpha;
}

/*ボックス
--------------------------------------------------*/
.box01,
.box02,
.box03,
.box04{
	padding: 30px;
	border-radius: 30px;
}
div[class*=box] p:last-child{
	margin-bottom:0;
}
.box01{
	background: var(--bg-color03);
}
.box01 .box-title{
	padding-bottom: 8px;
	font-size: 1.81rem;
	color: var(--sub-color01);
	font-family: var(--font-zenmaru);
	font-weight: 500;
	border-bottom: 6px dotted #fff;
	margin-bottom: 30px;
}

.box02{
	background: var(--bg-color04);
}
.box02 .box-title{
	padding-bottom: 8px;
	font-size: 1.81rem;
	color: var(--main-color);
	font-family: var(--font-zenmaru);
	font-weight: 500;
	border-bottom: 6px dotted var(--sub-color03);
	margin-bottom: 30px;
}

.box03{
	border: 1px solid var(--sub-color01);
}
.box03 .box-title{
	font-size: 1.62rem;
	font-family: var(--font-zenmaru);
	font-weight: 500;
	color: var(--sub-color02);
	margin-bottom: 30px;
}

.box04{
	border: 1px solid var(--sub-color03);
}
.box04 .box-title{
	font-size: 1.62rem;
	font-family: var(--font-zenmaru);
	font-weight: 500;
	color: var(--sub-color01);
	margin-bottom: 30px;
}

/*　box内のタイトル装飾打消し　*/

.box01 h2,
.box01 h3,
.box01 h4,
.box01 h5,
.box02 h2,
.box02 h3,
.box02 h4,
.box02 h5,
.box03 h2,
.box03 h3,
.box03 h4,
.box03 h5,
.box04 h2,
.box04 h3,
.box04 h4,
.box04 h5{
	margin: 0 0 30px 0;
	padding: 0;
	text-align: left;
	border-top: none;
	border-radius: 0;
	/*border: none;*/
}
.box01 h4,
.box02 h4,
.box03 h4,
.box04 h4{
	background: transparent;
}

.box01 h5::before,
.box02 h5::before,
.box03 h5::before,
.box04 h5::before{
	display: none;
}

.box03 h2,
.box03 h3,
.box04 h2,
.box04 h3{
	border-bottom: none;
}

@media screen and (max-width:767px) {
	.box01,
	.box02,
	.box03,
	.box04{
		padding: 20px;
	}
	
	.box01 .box-title,
	.box02 .box-title{
		padding-bottom: 8px;
		font-size: 1.5rem;
		margin-bottom: 20px;
	}
	
	.box03 .box-title,
	.box04 .box-title{
		font-size: 1.37rem;
		margin-bottom: 20px;
	}
}


/*ページネーション
--------------------------------------------------*/
.pager .pagination,
.pager ul.page-numbers {
	display: flex;
	justify-content: center;
	margin: 0;
}
.pager .pagination li a,
.pager .pagination li span,
.pager ul.page-numbers li a,
.pager ul.page-numbers li span {
	margin: 0 5px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
	color: #fff;
	background: var(--sub-color01);
    text-decoration: none;
    width: 35px;
    height: 35px;
	border-radius: 50%;
    position: relative;
	transition: all .3s ease;
}
/*.pager .pagination li a{
    border: 1px solid var(--sub-color04);
}*/

.pager .pagination li.pre a,
.pager ul.page-numbers li a.prev{
	margin-right: 20px;
}
.pager .pagination li.next a,
.pager ul.page-numbers li a.next{
	margin-left: 20px;
}

.pager .pagination li.first a::before,
.pager .pagination li.pre a::before,
.pager .pagination li.last a::before,
.pager .pagination li.next a::before,
.pager .pagination li.first a::after,
.pager .pagination li.last a::after,
.pager ul.page-numbers li a.first::before,
.pager ul.page-numbers li a.prev::before,
.pager ul.page-numbers li a.last::before,
.pager ul.page-numbers li a.next::before,
.pager ul.page-numbers li a.first::after,
.pager ul.page-numbers li a.last::after{
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 10px solid var(--sub-color03);
	border-right: 0;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto 0;
}

.pager .pagination li.pre a::before,
.pager ul.page-numbers li a.prev::before{
	left: 11px;
	transform: rotate(180deg);
}
.pager .pagination li.next a::before,
.pager ul.page-numbers li a.next::before{
	left: 14px;
}
.pager .pagination li.first a::before,
.pager ul.page-numbers li a.first::before{
	left: 7px;
	transform: rotate(180deg);
}
.pager .pagination li.first a::after,
.pager ul.page-numbers li a.first::after{
	left: 17px;
	transform: rotate(180deg);
}
.pager .pagination li.last a::before,
.pager ul.page-numbers li a.last::before{
	left: 9px;
}
.pager .pagination li.last a::after,
.pager ul.page-numbers li a.last::after{
	left: 19px;
}

.pager .pagination li a.active,
.pager .pagination li a.active span,
.pager ul.page-numbers li span.current{
	color: #333;
	background: var(--bg-color01);
}

@media (hover: hover) {
	.pager .pagination li a:hover,
	.pager .pagination li a:hover span,
	.pager ul.page-numbers li a:hover,
	.pager ul.page-numbers li a:hover span{
		background: var(--main-color);
		color: var(--sub-color03);	
	}
	.pager .pagination li.first a:hover,
	.pager .pagination li.pre a:hover,
	.pager .pagination li.last a:hover,
	.pager .pagination li.next a:hover,
	.pager ul.page-numbers li a.first:hover,
	.pager ul.page-numbers li a.prev:hover,
	.pager ul.page-numbers li a.last:hover,
	.pager ul.page-numbers li a.next:hover{
		background: var(--main-color);
	}
}

@media screen and (max-width:767px) {
	.pager .pagination li a,
	.pager .pagination li span,
	.pager ul.page-numbers li a,
	.pager ul.page-numbers li span {
		margin: 0 2px;
	    width: 30px;
	    height: 30px;
		font-size: 1rem;
	}
	
	
	.pager .pagination li.pre a,
	.pager ul.page-numbers li a.prev{
		margin-right: 10px;
	}
	.pager .pagination li.next a,
	.pager ul.page-numbers li a.next{
		margin-left: 10px;
	}
	.pager .pagination li.first a::before, 
	.pager .pagination li.pre a::before, 
	.pager .pagination li.last a::before, 
	.pager .pagination li.next a::before, 
	.pager .pagination li.first a::after, 
	.pager .pagination li.last a::after,
	.pager ul.page-numbers li a.first::before,
	.pager ul.page-numbers li a.prev::before,
	.pager ul.page-numbers li a.last::before,
	.pager ul.page-numbers li a.next::before,
	.pager ul.page-numbers li a.first::after,
	.pager ul.page-numbers li a.last::after{
		border-top: 4px solid transparent;
    	border-bottom: 4px solid transparent;
    	border-left: 8px solid var(--sub-color03);
	}
	.pager .pagination li.pre a::before,
	.pager ul.page-numbers li a.prev::before{
		left: 10px;
	}
	.pager .pagination li.next a::before,
	.pager ul.page-numbers li a.next::before{
		left: 12px;
	}
	.pager .pagination li.first a::before,
	.pager ul.page-numbers li a.first::before{
		left: 6px;
	}
	.pager .pagination li.first a::after,
	.pager ul.page-numbers li a.first::after{
		left: 14px;
	}
	.pager .pagination li.last a::before,
	.pager ul.page-numbers li a.last::before{
		left: 8px;
	}
	.pager .pagination li.last a::after,
	.pager ul.page-numbers li a.last::after{
		left: 16px;
	}
}

/*動画
----------------------------------------*/

.youtube{
  position: relative;
  width: 100%;
}
.youtube{
  padding-top: 56.25%;
}
.youtube iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

/*アンカーリンク
----------------------------------------*/

.anchor{
	margin-top: -1px;
	padding-top: 1px;
}