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

/*-- headline ------------------------------------------------------------*/
#headline { padding: 4% 4% 1%; }
#headline h2 { color: #000; line-height: 1.5; letter-spacing: .2em; }
#headline h6 { font-family:'Roboto Condensed', sans-serif; font-weight:bold; display:block; letter-spacing: 0em; color: #000; }

.headline-image { position: relative; }
.headline-image .inner{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   clip-path: inset(0);
}
.headline-image .bg{
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 75vh;
   background-size: cover;
   background-position: center;
   z-index: -1;
}
.headline-image .bg { background-image: url("../img/second/headline01.jpg"); } 


@media screen and (max-width: 599px) {
	#headline h2 { font-size: 1.5rem; line-height: 1.2; }
	#headline h6 { font-size: 0.7rem;}
	.headline-image { height: 120px; width: 100%; }
}
@media screen and (min-width: 600px) {
	#headline { display: flex; justify-content: space-between; align-items: center;}
}
@media screen and (min-width: 600px) and (max-width: 899px)  {
	#headline h2 { font-size: 2.0rem;}
	#headline h6 { font-size: 0.8rem;}
	.headline-image { height: 200px; width: 70%; }
}
@media screen and (min-width: 900px) and (max-width: 1079px)  {
	#headline h2 { font-size: 2.1rem;}
	#headline h6 { font-size: 0.85rem;}
	.headline-image { height: 200px; width: 70%; }
}
@media screen and (min-width: 1080px) and (max-width: 1199px)  {
	#headline h2 { font-size: 2.2rem;}
	#headline h6 { font-size: 0.9rem;}
	.headline-image { height: 200px; width: 70%; }
}
@media screen and (min-width: 1200px) and (max-width: 1479px)  {
	#headline h2 { font-size: 2.3rem;}
	#headline h6 { font-size: 0.95rem;}
	.headline-image { height: 200px; width: 70%; }
}
@media screen and (min-width: 1480px) {
	#headline h2 { font-size: 2.4rem;}
	#headline h6 { font-size: 1.0rem;}
	.headline-image { height: 200px; width: 70%; }
}

/*-- breadcrumbs ------------------------------------------------------------*/
#breadcrumbs { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 20px; padding: 0 4%; }
#breadcrumbs li { font-size: 0.8rem; margin-right: 5px; display: inline-block; }
#breadcrumbs li:after { content: ">"; margin-left: 10px; }
#breadcrumbs li:last-child { margin-right: 0px; }
#breadcrumbs li:last-child:after { display: none; }
@media screen and (max-width: 599px) {
	#breadcrumbs { margin-bottom: 0px; }
	#breadcrumbs li { font-size: 0.7rem; }
}

/*-- content ------------------------------------------------------------*/
#content main #anch02,#content main #anch04 { background: #fff !important; }
.in-sub-flex { position: relative; }
.in-sub-flex::before, .in-sub-flex::after { content: ''; width: 30px; height: 30px; position: absolute; }
.in-sub-flex::before { border-left: solid 2px #000; border-top: solid 2px #000; top: 0; left: 0; }
.in-sub-flex::after { border-right: solid 2px #000; border-bottom: solid 2px #000; bottom: 0; right: 0;}
.subTtl h3 { color: #000; line-height: 1.5; letter-spacing: .2em; }
.subContent h4 { color: #000; line-height: 1.5; letter-spacing: .2em; margin-bottom: 20px; }
.subTtl h6 { font-family:'Roboto Condensed', sans-serif; font-weight:bold; display:block; letter-spacing: 0em; color: #dedede; }

section.textUp { opacity: 0;}
section.textUp.add-show { opacity: 1.0;}

.subTtl .bar { width: 50px; height: 3px; background: #dedede; margin: 20px auto 40px;}
@media screen and (max-width: 599px) {
	#content section#introduction p { margin-bottom: 20px; background: #000; color: #fff; padding: 10px; font-size: 0.7rem; text-align: center;}
	
	.in-sub-flex { padding: 6%; }
	.subTtl { text-align: center; }
	.subTtl h3 { font-size: 1.2rem;}
	.subContent h4 { font-size: 1.05rem;}
	.subTtl h6 { font-size: 0.7rem;}
	
	.subMenu { margin: 0 auto 40px; display: flex; justify-content: center; padding: 0 2%;  }
	.subMenu li { width: 24%; margin-right: 1%; height: 25px; line-height: 25px; text-align: center; border: 1px solid #333; font-size: 0.7rem; }
	.subMenu li:last-child { margin-right: 0px; }
	.subMenu li a { display: block; }
	.subMenu li a:link    { color:#333; text-decoration: none; }
	.subMenu li a:visited { color:#333; text-decoration: none; }
	.subMenu li a:hover   { color:#fff; text-decoration: none; background: #000; }
	.subMenu li a:active  { color:#333; text-decoration: none; }
	
	.subMenu li.current { background: #000; }
	.subMenu li.current a { color: #fff; display: block; }
	.subMenu li.current a:link    { color:#fff; text-decoration: none; }
	.subMenu li.current a:visited { color:#fff; text-decoration: none; }
	.subMenu li.current a:hover   { color:#333; text-decoration: none; background: #fff; }
	.subMenu li.current a:active  { color:#fff; text-decoration: none; }
	
	.in-subMenu { padding: 40px 0; border-top: 1px solid #dedede; max-width: 1200px; min-width: 740px; margin: 0 auto 60px; display: flex; justify-content: center;}
	.in-subMenu li { width: 22%; margin-right: 1%; height: 35px; line-height: 35px; text-align: center; border: 1px solid #333; font-size: 0.9rem; }
	.in-subMenu li:last-child { margin-right: 0px; }
	
	.in-subMenu li a { display: block; }
	.in-subMenu li a:link    { color:#333; text-decoration: none; }
	.in-subMenu li a:visited { color:#333; text-decoration: none; }
	.in-subMenu li a:hover   { color:#fff; text-decoration: none; background: #000; }
	.in-subMenu li a:active  { color:#333; text-decoration: none; }
	
	.in-subMenu li.current { background: #000; }
	.in-subMenu li.current a { color: #fff; display: block; }
	.in-subMenu li.current a:link    { color:#fff; text-decoration: none; }
	.in-subMenu li.current a:visited { color:#fff; text-decoration: none; }
	.in-subMenu li.current a:hover   { color:#333; text-decoration: none; background: #fff; }
	.in-subMenu li.current a:active  { color:#fff; text-decoration: none; }
	
	.singleSec { margin-bottom: 60px; }
	.in-second { width: 100%; max-width: 1200px; padding: 0 4%; margin: 0 auto 40px; padding-bottom: 40px; border-bottom: 1px dotted #dedede; }
	.in-second.in-second-last { margin-bottom: 0px; border-bottom: none; padding-bottom: 0px; }
	
	#content section .in.in-flex { padding: 0 2%;  }
	.in-flex-L { width: 100%; margin: 0 auto 20px;}
	.in-flex-R { text-align: center; }
	.in-flex-R h3 { font-size: 1.2rem;}
	.in-flex-R p { font-size: 0.8rem; }
	.in-flex-R p.roboto { font-size: 1.0rem; }
	.in-flex-R p.roboto .fa-window-restore { font-size: 0.7em; color: #ccc; margin-left: 10px; }
	
	.tbl01 { width: 100%; border-top: 1px solid #dedede; }
	.tbl01 th,.tbl01 td { padding: 10px; display: block; }
	.tbl01 th { text-align: center; border-bottom: 1px dotted #dedede; background: #f4f4f4;}
	.tbl01 td { border-bottom: 1px solid #dedede; }
}
@media screen and (min-width: 600px) {
	#content section#introduction p { margin-bottom: 20px; background: #000; color: #fff; padding: 10px; font-size: 0.8rem; margin: 0 4%; text-align: center;}
	
	.in-sub-flex { display: flex; justify-content: flex-start; padding: 4%; margin: 4%; }
	.subTtl { width: 20%; text-align: center; }
	.subContent { width: 76%; margin-left: 4%; }
	
	.subMenu { max-width: 1200px; min-width: 740px; margin: 0 auto 40px; display: flex; justify-content: center; padding: 0 2%;  }
	.subMenu li { width: 24%; margin-right: 1%; height: 40px; line-height: 40px; text-align: center; border: 1px solid #333; }
	.subMenu li:last-child { margin-right: 0px; }
	.subMenu li a { display: block; }
	.subMenu li a:link    { color:#333; text-decoration: none; }
	.subMenu li a:visited { color:#333; text-decoration: none; }
	.subMenu li a:hover   { color:#fff; text-decoration: none; background: #000; }
	.subMenu li a:active  { color:#333; text-decoration: none; }
	
	.subMenu li.current { background: #000; }
	.subMenu li.current a { color: #fff; display: block; }
	.subMenu li.current a:link    { color:#fff; text-decoration: none; }
	.subMenu li.current a:visited { color:#fff; text-decoration: none; }
	.subMenu li.current a:hover   { color:#333; text-decoration: none; background: #fff; }
	.subMenu li.current a:active  { color:#fff; text-decoration: none; }
	
	.in-subMenu { padding: 40px 0; border-top: 1px solid #dedede; max-width: 1200px; min-width: 740px; margin: 0 auto 60px; display: flex; justify-content: center;}
	.in-subMenu li { width: 22%; margin-right: 1%; height: 35px; line-height: 35px; text-align: center; border: 1px solid #333; font-size: 0.9rem; }
	.in-subMenu li:last-child { margin-right: 0px; }
	
	.in-subMenu li a { display: block; }
	.in-subMenu li a:link    { color:#333; text-decoration: none; }
	.in-subMenu li a:visited { color:#333; text-decoration: none; }
	.in-subMenu li a:hover   { color:#fff; text-decoration: none; background: #000; }
	.in-subMenu li a:active  { color:#333; text-decoration: none; }
	
	.in-subMenu li.current { background: #000; }
	.in-subMenu li.current a { color: #fff; display: block; }
	.in-subMenu li.current a:link    { color:#fff; text-decoration: none; }
	.in-subMenu li.current a:visited { color:#fff; text-decoration: none; }
	.in-subMenu li.current a:hover   { color:#333; text-decoration: none; background: #fff; }
	.in-subMenu li.current a:active  { color:#fff; text-decoration: none; }
	
	.singleSec { margin-bottom: 60px; }
	.in-second { width: 100%; max-width: 1200px; padding: 0 4%; margin: 0 auto 40px; padding-bottom: 40px; border-bottom: 1px dotted #dedede; }
	.in-second.in-second-last { margin-bottom: 0px; border-bottom: none; padding-bottom: 0px; }
	
	#content section .in.in-flex { display: flex; justify-content: center; align-items: center; width: 96%; margin: 0 auto 100px; padding: 0 2%; max-width: 1200px; }
	.in-flex-L { width: 58%; margin-right: 4%; }
	.in-flex-R { width: 38%;  }
	.in-flex-R h3 { font-size: 2.0rem;}
	.in-flex-R p { font-size: 1.2rem; }
	.in-flex-R p.roboto { font-size: 1.5rem; }
	.in-flex-R p.roboto .fa-window-restore { font-size: 0.7em; color: #ccc; margin-left: 30px; }
	
	.sideList { margin-top: 20px; }
	.sideList li { margin-bottom: 10px; padding:0 10px 10px; border-bottom: 1px dotted #ccc; font-size: 0.9rem; text-align: left; }
	.sideList li:before { content:"\f0da"; font-family: 'Font Awesome 5 Free'; font-weight: 900; margin-right:10px; color:#333; }
		
	.tbl01 { width: 100%;  }
	.tbl01 th,.tbl01 td { padding: 10px; text-align: left; }
	.tbl01 th { width: 20%; text-align: left; }
	.tbl01 td { width: 80%; }
}
@media screen and (min-width: 600px) and (max-width: 899px)  {
	.subTtl h3 { font-size: 1.3rem;}
	.subContent h4 { font-size: 1.1rem;}
	.subTtl h6 { font-size: 0.75rem;}
	.in-flex-R h3 { font-size: 1.5rem;}
	.in-flex-R p { font-size: 1.0rem; }
	.in-flex-R p.roboto { font-size: 1.0rem; }
}
@media screen and (min-width: 900px) and (max-width: 1079px)  {
	.subTtl h3 { font-size: 1.4rem;}
	.subContent h4 { font-size: 1.15rem;}
	.subTtl h6 { font-size: 0.8rem;}
	.in-flex-R h3 { font-size: 1.6rem;}
	.in-flex-R p { font-size: 1.0rem; }
	.in-flex-R p.roboto { font-size: 1.1rem; }
}
@media screen and (min-width: 1080px) and (max-width: 1199px)  {
	.subTtl h3 { font-size: 1.5rem;}
	.subContent h4 { font-size: 1.2rem;}
	.subTtl h6 { font-size: 0.85rem;}
	.in-flex-R h3 { font-size: 1.7rem;}
	.in-flex-R p { font-size: 1.05rem; }
	.in-flex-R p.roboto { font-size: 1.2rem; }
}
@media screen and (min-width: 1200px) and (max-width: 1349px)  {
	.subTtl h3 { font-size: 1.6rem;}
	.subContent h4 { font-size: 1.3rem;}
	.subTtl h6 { font-size: 0.9rem;}
	.in-flex-R h3 { font-size: 1.8rem;}
	.in-flex-R p { font-size: 1.10rem; }
	.in-flex-R p.roboto { font-size: 1.3rem; }
}
@media screen and (min-width: 1350px) and (max-width: 1479px)  {
	.subTtl h3 { font-size: 1.7rem;}
	.subContent h4 { font-size: 1.35rem;}
	.subTtl h6 { font-size: 0.95rem;}
	.in-flex-R h3 { font-size: 1.9rem;}
	.in-flex-R p { font-size: 1.15rem; }
	.in-flex-R p.roboto { font-size: 1.4rem; }
}
@media screen and (min-width: 1480px) {
	.subTtl h3 { font-size: 1.8rem;}
	.subContent h4 { font-size: 1.4rem;}
	.subTtl h6 { font-size: 1.0rem;}
}