@charset "utf-8";
/* CSS Document */


/*
basic style
*/

html{
  font-size: 10px;
}

body{
	font-size: 1.6rem;
	line-height: 1.6;
	color: #333;
	font-family: "YuGothic" , "Yu Gothic medium" , "Hiragino Sans" , "Hiragino Kaku Gothic ProN" , "sans-serif";
	background-color: #FFFFFF;
	min-height: 100vh;
    position: relative;/*←相対位置*/
    padding-bottom: 583px;/*←footerの高さ*/
    box-sizing: border-box;/*←全て含めてmin-height:100vhに*/
}

.wrapper{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	background-color: #EEEEEE;
}

main{
	display: block;
}

.content-bg{
	width: 100%;
		background-color: #FFFFFF;
}

.content{
	max-width: 1024px;
	margin: 0 auto;
	padding-top: 60px;
	padding-bottom: 60px;
}

.block{
	margin: 20px;
}

.pc_br {
	display: block; /*480px以上で改行タグを有効に。*/
}

.sp_br {
  display: none; /*768px以上では改行タグを無効に。*/
}

a{
	color: #0059F2;
	/*text-decoration-line: underline;
	text-decoration-thickness: 1px;*/
}

a:hover{
	opacity: 0.7;
}

.d-flex{
	display: flex;
}

/*
font style
*/

.f-b{
	font-weight: bold;
}

.ta-c{text-align: center!important;}
.ta-r{text-align: right!important;}
.ta-l{text-align: left!important;}

/*
 margin  styles
-------------  */
.mt-0{  margin-top: 0!important;}
.mt-5{  margin-top: 5px!important;}
.mt-10{  margin-top: 10px!important;}
.mt-15{  margin-top: 15px!important;}
.mt-20{  margin-top: 20px!important;}
.mt-25{  margin-top: 25px!important;}
.mt-30{  margin-top: 30px!important;}
.mt-35{  margin-top: 35px!important;}
.mt-40{  margin-top: 40px!important;}
.mt-50{  margin-top: 50px!important;}

.mb-0{  margin-bottom: 0!important;}
.mb-10{  margin-bottom: 10px!important;}
.mb-15{  margin-bottom: 15px!important;}
.mb-20{  margin-bottom: 20px!important;}
.mb-25{  margin-bottom: 25px!important;}
.mb-30{  margin-bottom: 30px!important;}
.mb-35{  margin-bottom: 35px!important;}
.mb-40{  margin-bottom: 40px!important;}

.ml-0{  margin-left: 0!important;}
.ml-10{  margin-left: 10px!important;}
.ml-15{  margin-left: 15px!important;}
.ml-20{  margin-left: 20px!important;}
.ml-25{  margin-left: 25px!important;}
.ml-30{  margin-left: 30px!important;}
.ml-35{  margin-left: 35px!important;}
.ml-40{  margin-left: 40px!important;}

.mr-0{  margin-right: 0!important;}
.mr-10{  margin-right: 10px!important;}
.mr-15{  margin-right: 15px!important;}
.mr-20{  margin-right: 20px!important;}
.mr-25{  margin-right: 25px!important;}
.mr-30{  margin-right: 30px!important;}
.mr-35{  margin-right: 35px!important;}
.mr-40{  margin-right: 40px!important;}
.mr-50{  margin-right: 50px!important;}

/*
 list  styles
-------------  */

.list-num-ptn01 li:nth-child(1)::before{ content: '1.'; }
.list-num-ptn01 li:nth-child(2)::before{ content: '2.'; }
.list-num-ptn01 li:nth-child(3)::before{ content: '3.'; }
.list-num-ptn01 li:nth-child(4)::before{ content: '4.'; }
.list-num-ptn01 li:nth-child(5)::before{ content: '5.'; }
.list-num-ptn01 li:nth-child(6)::before{ content: '6.'; }
.list-num-ptn01 li:nth-child(7)::before{ content: '7.'; }
.list-num-ptn01 li:nth-child(8)::before{ content: '8.'; }
.list-num-ptn01 li:nth-child(9)::before{ content: '9.'; }
.list-num-ptn01 li:nth-child(10)::before{ content: '10.'; }

.list-num-ptn02 li:nth-child(1)::before{ content: '①'; }
.list-num-ptn02 li:nth-child(2)::before{ content: '②'; }
.list-num-ptn02 li:nth-child(3)::before{ content: '③'; }
.list-num-ptn02 li:nth-child(4)::before{ content: '④'; }
.list-num-ptn02 li:nth-child(5)::before{ content: '⑤'; }
.list-num-ptn02 li:nth-child(6)::before{ content: '⑥'; }
.list-num-ptn02 li:nth-child(7)::before{ content: '⑦'; }
.list-num-ptn02 li:nth-child(8)::before{ content: '⑧'; }
.list-num-ptn02 li:nth-child(9)::before{ content: '⑨'; }
.list-num-ptn02 li:nth-child(10)::before{ content: '⑩'; }

.list-ptn01 li::before{ content: '・'; }

ul[class*='list-'] li {
    position: relative;
}

ul[class*='list-'] li::before{
	position: absolute;
	top: 0;
	left: 0;
}

.list-num-ptn01 li,
.list-num-ptn02 li,
.list-ptn01 li{
	margin-bottom: 10px;
	padding-left: 2.4rem;
}

/*
 table  styles
-------------  */

dl{
	display: flex;
	padding: 26px 0;
	border-bottom: solid 2px #F7F7F7;
}

dt{
	width: 50%;
	display: inline-block;
	vertical-align: middle;
}

dl:first-child{
	padding-top: 0;
}

dd{
	display: inline-block;
	vertical-align: middle;
}

/*
 heading（見出し）  styles
-------------  */

.heading01{

}

.heading02,
.heading03{
	color: #223893;
	font-size: 20px;
	font-weight: bold;
	line-height: 34px;
	position: relative;
}



.heading02:after{
	position: absolute;
	content: " ";
	display: block;
	border-bottom: solid 4px #223893;
	bottom: 7px;
	width: 100%;
}

.heading02 .heading-deco,
.heading03 .heading-deco{
	font-size: 60px;
	font-weight: 800;
	font-family: 'Arial', 'Helvetica', 'sans-serif';
}

.heading04{
	writing-mode: vertical-rl;
	font-weight: bold;
	letter-spacing: 10px;
	height: fit-content;

}

.heading05{
	color: rgba(20,20,20,1.00);
	margin: 20px auto 0;
}

/*
a .heading05{
	text-decoration: none;
	text-decoration-line: none;
}
*/

a .heading05{
	height: 60px;
	
	margin: 0;
	padding: 16px 0 0 0;/*.service .itemのpaddingにあわせる*/
	display: flex;
	justify-content: center;
	align-items: center;
	
	background-color: #223893;
	font-size: 1.8rem;
	color: #FFFFFF;
	font-weight: bold;
}

.heading06{
	font-size: 2.4rem;
	font-weight: bold;
}

.heading06:before{
	content: "";
	border-left: solid 6px #223893;
	padding-right: 10px;
	
}

.heading07{
	font-weight: bold;
	padding-bottom: 10px;
}

.heading08{
	font-size: 1.8rem;
	font-weight: bold;
}

/*
 icon  styles
-------------  */

.window-icon{
	width: 25px; 
}

.pdf_icon{
	width: 26px;
	margin-left: 8px;
	vertical-align: middle;
}

.mail_icon{
	width: 26px;
	margin-left: 8px;
	vertical-align: middle;
}

.arrow_icon{
	width: 12px;
	height: 23px;
	margin-left: 16px;
	margin-bottom: 4px;
	vertical-align: middle;
}

.Instagram_icon{
	width: 25px;
	margin-right: 10px;
}

.LINE_icon{
	width: 25px;
}

/*
 botan  styles
-------------  */

.btn-wrap{
	justify-content: center;
	margin-top: 40px;
	margin-bottom: 25px;
}

.btn{
	display: block;
	 width: 45%;
    min-width: 200px;
    max-width: 600px;
	text-align: center;
	text-decoration: none;
	font-size: 2rem;
	color: #000000;
	font-weight: bold;
	margin: 0 auto;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 4px 4px 7px 0px rgba(121,114,111,0.6);
}

.btn01/*kuro*/{
	background-color: #000000;
	color: #FFFFFF;
}

.btn02/*オレンジ*/{
	background-color: #FF9934;
	color: #FFFFFF;
	box-shadow: 4px 4px 5px 0px rgba(159,146,117,0.8);
}

.btn03/*赤*/{
	background-color: #EB585A;
	color: #FFFFFF;
	box-shadow: 4px 4px 5px 0px rgba(159,146,117,0.8);
}

.btn04{
	margin-bottom: 50px;
	border: 8px inset #2A91A8;
	padding: 24px 0;
	border-radius: 0;
}

.btn-off{
	color: #8D8D8D;
	box-shadow: none;
	border: solid 2px  #8D8D8D;
}

/*
 header  styles
-------------  */
main{
	position: relative;
}

header/*reset css*/{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	color: #fafafa;
	list-style: none;
	text-decoration: none;
	position: fixed;
	top: 0;
	z-index: 1000;
}

header a/*reset css*/{
	text-decoration: none;
	color: #000000;
	font-size: 1.2rem;
}

.header_bg{
	width: 100%;
	height: 90px;
	background-color: #FFFFFF;
	border-bottom: solid 2px #001297;
}

.header_contents {
	width: 100%;
	max-width: 1300px;
	height: 100%;
	margin: 0 auto;
	padding-left: 30px;
	padding-right: 30px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

img.head_title{
	width: 8vw;
	min-width: 100px;
	max-width: 110px;
}

.header_nav_lists {
	display: flex;
	text-align: center;
	align-items: center;
}

.header_nav_lists li {
	margin-right: 40px;
}

.header_nav_lists li:last-child {
	margin-right: 0;
}

.nav_link {
	line-height: 16px;
}

.nav-deco{
	font-size: 2rem;
	font-weight: 800;
	color: #223893;
	font-family: 'Arial', 'Helvetica', 'sans-serif';
	
}

.brand_site_bottan img{
	width: 180px;
}

/* Responsive menu button */
.responsive_btn {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  cursor: pointer;
  position: relative;
  z-index: 10;
}

.menu_line {
  background: #3F3F3F;
  border-radius: 5px;
  width: 100%;
  height: 5px;
  margin: 4px 0;
}

img.brand_logo{
	width: 8vw;
	min-width: 120px;
	max-width: 150px;
}



/*
 prodacts-header  styles
-------------  */
	
.prodacts-header_bg{
	width: 100%;
	background-color: #2D3B3D;
	padding-top: 18px;
	padding-bottom: 18px;
}

.prodacts-header_contents h1{
	margin: 0 auto;
	text-align: center;
}

img.prodacts-head_logo{
	height: 100px;

}

/*
 footer  styles
-------------  */

footer/*reset css*/{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	list-style: none;
	position: absolute;
    bottom: 0;
}

footer a{
	text-decoration: none;
	color: #FFFFFF;
	font-weight: bold;
}


.footer_wrap{
	width: 100%;
	display: block;
}

.footer_bg{
	background-color: #EEEEEE;
}

.footer_bg02{
	background-color: #223893;
	color: #FFFFFF;
}

.footer_contents {
	width: 100%;
	max-width: 1084px;
	height: 100%;
	margin: 0 auto;
	padding: 50px 80px 10px 80px;
}

.footer_nav{
	display: flex;
	justify-content: space-between;

}

.footer_nav_lists{
	display: flex;
	margin: auto;
	font-size: 1.2rem;
}

.footer_nav_lists:after{
	
}

.footer_nav_link{
	padding-right: 20px;
}

.footer_nav_link:last-child{
	padding-right: 0;
}

.footitem-wrap{
	padding: 15px 15px 0 15px;
	border-top: solid 1px #FFFFFF;
}


.copy{
	font-size: 1.1rem;
	margin-top: 50px;
}

/*
 pagetop  styles
-------------  */

.pg-top{
	position: fixed;
	bottom: 3%;
	right: 10%;
}

.pg-top a{
	display: block;
	float: right;
}

.pg-top img{
	display: block;
	width: 85px;
	color: aqua;
	
}

/* Responsive style */

/*ブラウザ幅が1024px以下になったら{}内のCSSにしてね*/
@media screen and (max-width: 1024px) {

/*
basic style
*/

	html{
	  font-size: 10px;
	}

	body{
		font-size: 1.4rem;
		line-height: 1.4;
		padding-bottom: 476px;/*←footerの高さ*/
	}

	.wrapper{
		width: 100vw;
		}


	.content{
		padding: 40px;
	}

	.block{
		}

	/*
	 heading（見出し）  styles
	-------------  */

	.heading02,
	.heading03{
		font-size: 14px;
		line-height: 22px;
	}

	.heading02 .heading-deco,
	.heading03 .heading-deco{
		font-size: 36px;
	}
	
	.heading02:after{

		border-bottom: solid 3px #223893;
		bottom: 3px;
	}
	
	a .heading05{
		height: 75px;
		margin: 0;
		
		font-size: 2rem;
	}

	/*
	 botan  styles
	-------------  */
	.btn-wrap{
		margin-top: 20px;
		}

	.btn{
		width: 50%;
		min-width: 200px;
		max-width: 600px;
		font-size: 1.4rem;
		}

	
	/*
	 icon  styles
	-------------  */

	.window-icon{
		width: 25px; 
	}

	.pdf_icon{
		width: 26px;
		margin-left: 8px;
		vertical-align: middle;
	}

	.mail_icon{
		width: 18px;
		margin-left: 6px;
	}

	.arrow_icon{
		width: 5px;
		height: 7.5px;
		margin-left: 4px;
		margin-top: 2px;
	}

	.Instagram_icon{
		width: 25px;
		margin-right: 10px;
	}

	.LINE_icon{
		width: 25px;
	}

	
/*
	 header  styles
	-------------  */


  .header_bg {
    position: relative;

  }

  .header_nav {
    background: rgba(215,233,255,1.00);
    width: 100%;
    height: 100vh;
    padding: 80px 0 0 0;
    position: fixed;
    top: 0;
    right: -100%;
    transition: .5s;
  }

  .header_nav_lists {
    display: block;
    text-align: center;
  }

  .header_nav_lists li {
    margin: 0 0 40px;
    text-align: center;
  }

  .nav_link {
    font-size: 20px;
  }

		


	

	
	/*
	 footer  styles
	-------------  */

	footer/*reset css*/{
		font-size: 1rem;
	}
	
	footer .brand_site_bottan img{
		width: 200px;
	}
	
	.responsive_btn {
		display: flex;
	}

	
	
/*ブラウザ幅が480px以下になったら{}内のCSSにしてね*/
@media screen and (max-width: 480px) {
		/*
	basic style
	*/

	body{
		font-size: 1.2rem;
		line-height: 1.2;
		padding-bottom: 501px;/*←footerの高さ*/
	}

	.content{
		padding: 18px;
	}
	
	.block{
		margin: 25px 0;
	}
	
	.pc_br {
		display: none; /*768px以下では改行タグを無効に。*/
	}

	
	.sp_br {
    	display: block; /*480px未満で改行タグを有効に。*/
	}

	


	
	/*
 heading（見出し）  styles
-------------  */

	.heading01{

	}

	.heading02,
	.heading03{
		font-size: 12px;
		font-weight: bold;
		line-height: 17px;
	}

	.heading02:after{
		border-bottom: solid 2px #223893;
		bottom: 3px;
	}

	.heading02 .heading-deco,
	.heading03 .heading-deco{
		font-size: 24px;
	}

	.heading05{
		margin: 14px auto 0;
	}
	
	a .heading05{
		height: 30px;
		margin: 0;
		padding: 20px 0 0 0;/*.service .itemのpaddingにあわせる*/
		font-size: 1.2rem;
	}
	
	.heading06{
		font-size: 2rem;
	}

	.heading06:before{
		content: "";
		border-left: solid 6px #223893;
		padding-right: 8px;
	}
	
	
		/*
	 prodacts-header  styles
	-------------  */
	
	.prodacts-header_bg{
		padding-top: 12px;
		padding-bottom: 12px;
	}
	.prodacts-header_bg img{
		height: 60px;
	}
	
	
	/*
	 botan  styles
	-------------  */
	.btn-wrap{
		margin-top: 20px;
		}

	.btn{
		width: 60%;
		min-width: 250px;
		max-width: 300px;
		font-size: 1.4rem;
		}
	
	.btn04{
		width: 100%;
		border: 4px inset #2A91A8; 
	}

	/*header style*/
	
	img.head_title{
		width: 8vw;
		min-width: 80px;
		max-width: 80px;
	}
	
	
		/*
	 footer  styles
	-------------  */
	footer/*reset css*/{
		font-size: 1rem;
	}

	.footer_contents {
		padding: 50px 30px 10px 30px;
	}


	.footer_nav{
		flex-direction: column;
		text-align: center;
	}

	.footer_nav_lists{
		display: flex;
		margin: auto;
		justify-content: space-between;

	}
	
		
	footer .brand_site_bottan img{
		width: 200px;
		margin-top: 20px;
	}

	.copy{
		font-size: 1rem;
		margin-top: 50px;
		text-align: left;
	}

}

/* js function "menuToggle" starting only */
.menu_active {
  right: 0;
}
	
}