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

/*-- headline ------------------------------------------------------------*/
#headline { padding: 0% 4%; }
#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: var(--base-color); }

.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/headline.png"); animation: bg 100s infinite linear;} 
@keyframes bg { 
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: -3000px 0;
	}
}

@media screen and (max-width: 599px) {
	.headTtl { margin-bottom: 20px; }
	#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;}
	#headline h2 { word-break: keep-all; }
}
@media screen and (min-width: 600px) and (max-width: 899px)  {
	#headline h2 { font-size: 1.8rem;}
	#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.0rem;}
	#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%; }
}

/*-- header ------------------------------------------------------------*/
@media screen and (max-width: 899px) {
	header .in-head-flex .hL h1 { color: #000; }
	header .in-head-flex .hR nav ul li a { position: relative; }
}
@media screen and (max-width: 599px) {
	.menu-trigger span { background-color: var(--base-color); }
}
@media screen and (min-width: 600px) and (max-width: 899px) {
	.menu-trigger span { background-color: var(--base-color); }
}
/*-- breadcrumbs ------------------------------------------------------------*/
#breadcrumbs { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 20px; position: relative; z-index: 10;}
#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; }
#breadcrumbs li.current { color: var(--sub-color); font-weight: bold; }
@media screen and (max-width: 599px) {
	#breadcrumbs { margin-bottom: 20px; }
	#breadcrumbs li { font-size: 0.7rem; }
}

/*-- section ------------------------------------------------------------*/

@media screen and (max-width: 1089px) {
	.second section { margin-top: -80px; padding-top: 80px; }
	
	.second { margin: 0 2%; background: #fff; padding: 2% 4% 4%; }
	.second-access { margin: 0 2%; background: #fff; padding: 2% 4% 4%; }
	.second .content-flex { display: flex; flex-direction: column;  }
	
	.sTtl01 { font-size: 1.1em; font-weight: bold; border-left: 5px solid var(--base-color); padding: 10px 10px 10px 20px; margin-bottom: 20px; position: relative; }
	.sTtl01:after { content:""; position: absolute; top: 0; left: -5px; width: 5px; height: 5px; background:var(--sub-color); }
	
	.resultDl { margin-bottom: 40px; }
	.resultDl dt { padding-bottom: 10px; border-bottom: 1px solid #333; margin-bottom: 10px; font-weight: bold; }
	.resultDl dd .campanyName { display: flex; justify-content: flex-start;  font-size: 0.95em; margin-bottom: 20px; }
		
	.second aside ul li a         { resize: none; display: block; }
	.second aside ul li a:link    { color:#000; text-decoration: none; }
	.second aside ul li a:visited { color:#000; text-decoration: none; }
	.second aside ul li a:hover   { color:#fff; text-decoration: none; background: var(--sub-color); }
	.second aside ul li a:active  { color:#000; text-decoration: none; }
	.second aside .sideBar { display: none; }
	.second aside h4 { display: none; }
	
	.in-flex-half { margin-bottom: 40px; }
}
@media screen and (max-width: 599px) {
	.second aside { margin-bottom: 20px; }
	.second aside ul { display: flex; justify-content: center; flex-wrap: wrap; }
	.second aside ul li { height: 25px; line-height: 25px; text-align: center; border: 3px solid #dedede; margin: 0 0.5% 5px; font-size: 0.8em; width: 100%; }	
	.second aside ul li:nth-child(1),.second aside ul li:nth-child(2),.second aside ul li:nth-child(3) { width: 30%; margin-right: 0.5%; margin-bottom: 1%; }
	.second aside ul li:nth-child(3) { margin-right: 0; }
	.second aside ul li:nth-child(4),.second aside ul li:nth-child(5) { width: 46.5%; margin-right: 0.5%; border: 3px solid #dedede; }
	.second aside ul li:nth-child(5) { margin-right: 0; }
}
@media screen and (min-width: 600px) and (max-width: 899px){
	.second .content-flex { display: flex; flex-direction: column;  }
	.second aside { margin-bottom: 20px; }
	.second aside ul { display: flex; justify-content: center; }
	.second aside ul li { height: 40px; line-height: 40px; text-align: center; border: 5px solid #dedede; margin: 0 0.5%; font-size: 0.7em; width: 20%; }
}
@media screen and (min-width: 900px) and (max-width: 1089px){
	.second .content-flex { display: flex; flex-direction: column;  }
	.second aside { margin-bottom: 20px; }
	.second aside .sideFix { position: sticky; top: 100px; }
	.second aside ul { display: flex; justify-content: center; }
	.second aside ul li { height: 40px; line-height: 40px; text-align: center; border: 5px solid #dedede; margin: 0 0.5%; font-size: 0.8em; width: 20%; }
	
	.flex-half { display: flex; justify-content: space-between; }
	.in-flex-half { width: 48%; }
}
@media screen and (min-width: 1090px){
	.second section { margin-top: -120px; padding-top: 120px; }
	.second { margin: 0 2%; background: #fff; padding: 2% 4% 4%; }
	.second-access { margin: 0 2%; background: #fff; padding: 2% 4% 4%; }
	.second .content-flex { display: flex; justify-content: space-between; }
	.second aside { width: 16%; margin-right: 4%; }
	.second aside .sideFix { position: sticky; top: 100px; }
	.second aside ul { margin-bottom: 40px; }
	.second aside ul li { margin-bottom: 10px; font-size: 0.9em; padding-left: 1.0em; text-indent: -1.5em;  }
	.second aside ul li:before { content: "├"; margin-right: 10px; opacity: 0.5; }
	.second aside .sideBar { width: 100%; height: 5px; background: var(--base-color); margin-bottom: 20px; position: relative; }
	.second aside .sideBar:after { content: ""; width: 5px; height: 5px; background: var(--sub-color); position: absolute; top: 0; left: 0; }
	.second aside h4 { margin-bottom: 10px; font-size: 0.95em; font-weight: bold; }
	
	.second main { width: 80%; }
	.second-access main { width: 100%; }
	.sTtl01 { font-size: 1.1em; font-weight: bold; border-left: 8px solid var(--base-color); padding: 10px 10px 10px 20px; margin-bottom: 20px; position: relative; }
	.sTtl01:after { content:""; position: absolute; top: 0; left: -8px; width: 8px; height: 8px; background:var(--sub-color); }
	
	.resultDl { margin-bottom: 40px; }
	.resultDl dt { padding-bottom: 10px; border-bottom: 1px solid #333; margin-bottom: 10px; font-weight: bold; }
	.resultDl dd .campanyName { display: flex; justify-content: flex-end;  font-size: 0.95em; margin-bottom: 10px; }
	
	.flex-half { display: flex; justify-content: space-between; }
	.in-flex-half { width: 48%; }
}
@media screen and (min-width: 1190px) and (max-width: 1289px)  {
	.in-flex aside h3 { font-size: 1.35rem; }
	.in-flex aside h6 { font-size: 0.75rem; }
}
@media screen and (min-width: 1290px) and (max-width: 1389px)  {
	.in-flex aside h3 { font-size: 1.40rem; }
	.in-flex aside h6 { font-size: 0.80rem; }
}
@media screen and (min-width: 1390px) and (max-width: 1489px)  {
	.in-flex aside h3 { font-size: 1.45rem; }
	.in-flex aside h6 { font-size: 0.85rem; }
}
@media screen and (min-width: 1490px) {
}

/*-- company ------------------------------------------------------------*/
@media screen and (max-width: 599px) {
	.tbl01 { width: 100%; border-top: 1px solid #dedede; }
	.tbl01 th,.tbl01 td { padding: 10px; text-align: left; display: block; }
	.tbl01 th { text-align: center; border-bottom: 1px dotted #dedede; background: #dedede; }
	.tbl01 td { border-bottom: 1px solid #dedede; }
}
@media screen and (min-width: 600px) {
	.tbl01 { width: 100%;  }
	.tbl01 th,.tbl01 td { padding: 10px; text-align: left; }
	.tbl01 th { width: 20%; text-align: left; border-bottom: 3px solid #dedede; font-size: 0.9em; }
	.tbl01 td { width: 80%; border-bottom: 1px solid #dedede; font-size: 0.9em; }
}

/*-- company ------------------------------------------------------------*/
.company-breadcrumbs { padding: 0 1%; }
@media screen and (max-width: 1089px){
	.in-flex { display: flex; flex-direction: column; }
	.in-flex-Img { order: 1; height: 400px; }
	.in-flex-Txt {padding: 5vh 4% 5vh; order: 2; }
	.in-flex-Txt .cTtl { font-size: 2.4rem; color: var(--sub-color); line-height: 1.0; margin-bottom: 20px; }
	.in-flex-Txt .sign { margin-bottom: 0px; font-family: 'Noto Serif JP','游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro', serif; }
	.in-flex-Txt .sign span { margin-right: 20px; font-size: 0.9rem; }
	
	#c-anch01 .in-flex-Img { background: url("../img/second/company01.png") center center no-repeat; background-size: cover; } 
	#c-anch02 .in-flex-Img { background: url("../img/second/company03.png") center center no-repeat; background-size: cover; } 
	#c-anch03 .in-flex-Img { background: url("../img/second/company03.png") center center no-repeat; background-size: cover; } 
	
	.photoFlex { display: flex; justify-content: center; align-items: center; }
	.photoFlex li { width: 25%; }
	
	#c-anch03 .in-flex-Txt { order: 1; }
	#c-anch03 .in-flex-Img { order: 2; display: none; }
}
@media screen and (max-width: 599px) {
	.company-breadcrumbs { padding: 0 4%; }
	.in-flex-Img { height: 200px; }
	.in-flex-Txt { padding: 5vh 6% 5vh; }
	
	.photoFlex { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
	.photoFlex li { width: 50%; }
}
@media screen and (min-width: 600px) and (max-width: 899px) {
	.in-flex-Img { height: 300px; }
}
@media screen and (min-width: 1090px){
	.in-flex { display: flex; justify-content: space-between; align-items: center;  }
	.in-flex-Img { width: 44%; }
	.in-flex-Txt { width: 48%; padding: 10vh 4% 10vh; z-index: 1; position: relative; }
	.in-flex-Txt .cTtl { font-size: 3.6rem; color: var(--sub-color); line-height: 1.0; margin-bottom: 40px; }
	.in-flex-Txt .sign { margin-bottom: 0px; font-family: 'Noto Serif JP','游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro', serif; }
	.in-flex-Txt .sign span { margin-right: 20px; font-size: 0.9rem; }
	
	#c-anch01 .in-flex-Img { background: url("../img/second/company01.png") left center no-repeat; background-size: cover; } 
	#c-anch02 .in-flex-Img { background: url("../img/second/company02.png") left center no-repeat; background-size: cover; width: 50%;  } 
	#c-anch03 .in-flex-Img { background: url("../img/second/company03.png") left center no-repeat; background-size: cover; } 
	
	.photoFlex { display: flex; justify-content: center; align-items: center; }
	.photoFlex li { /*width: 25%;*/ }
}
@media screen and (min-width: 1090px) and (max-width: 1189px) {
	.in-flex-Img { width: 52%; }
	.in-flex-Txt { width: 40%; }
}
@media screen and (min-width: 1190px) and (max-width: 1289px) {
	.in-flex-Img { width: 50%; }
	.in-flex-Txt { width: 42%; }
}
@media screen and (min-width: 1290px) and (max-width: 1389px) {
}
@media screen and (min-width: 1390px) and (max-width: 1489px) {
}


.view-left.view { position: relative; overflow: hidden; }
.view-left.view:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: 10; pointer-events: none; transform-origin: left; animation: slideInLeft 1s ease forwards; }
.view-left.view.in-view::after { animation: slideOutLeft 1s ease forwards; }
@keyframes slideOutLeft {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}

@keyframes slideInLeft {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}


.view-right.view { position: relative; overflow: hidden; }
.view-right.view:after { content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: #fff; z-index: 10; pointer-events: none; transform-origin: right; animation: slideInRight 1s ease forwards; }
.view-right.view.in-view::after { animation: slideOutRight 1s ease forwards; }
@keyframes slideOutRight {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}

@keyframes slideInRight {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

/*-- ニュース タブ -------------------------------------------------------------*/
@media screen and (max-width: 599px) {
	.tabs { border-bottom: 1px solid var(--base-color); display: flex; justify-content: center; margin: 40px auto; max-width: 960px; width: 100%; }
	.tabs li { height: 35px; line-height: 35px; width: 100px; text-align: center; border-top: 1px solid var(--base-color); border-right: 1px solid var(--base-color); border-left: 1px solid var(--base-color); margin: 0 5px; font-size: 0.9rem; position: relative;}
	.tabs li.selected { background: var(--base-color); }
	.tabs li.selected:after { position: absolute; bottom: -1px; left: 0; content: ""; width: 100px; height: 1px; background: var(--base-color); z-index: 1; }
	.tabs li a { display: block; }
	.tabs li a:link    { color:var(--base-color); text-decoration: none; }
	.tabs li a:visited { color:var(--base-color); text-decoration: none; }
	.tabs li a:hover   { color:#fff; text-decoration: none; background: var(--base-color); }
	.tabs li a:active  { color:var(--base-color); text-decoration: none; }
	
	.tabs li.selected a:link    { color:#fff; text-decoration: none; }
	.tabs li.selected a:visited { color:#fff; text-decoration: none; }
	.tabs li.selected a:hover   { color:#fff; text-decoration: none; opacity: 0.7; }
	.tabs li.selected a:active  { color:#fff; text-decoration: none; }
	
	.top-works { background: #f4f4f4; padding: 40px 0; }
	
	.newsList { max-width: 1020px; width: 100%; margin: 0 auto 40px; }
	.newsList li { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dotted #dedede; }
	.newsList li .newsDl { margin-right: 10px; margin-bottom: 0px; }
	.newsDl { display: flex; justify-content: flex-start; align-items: center; margin-bottom: 20px; }
	.newsDl dt { background: var(--base-color); color: #fff; font-size: 10px; height: 20px; line-height: 20px; padding: 0 10px; border: 1px solid var(--base-color); font-family:'Roboto Condensed', sans-serif; font-weight:bold; }
	.newsDl dd { background: #fff; color: var(--base-color); font-size: 10px; height: 20px; line-height: 20px; padding: 0 10px; border: 1px solid var(--base-color); font-family:'Roboto Condensed', sans-serif; font-weight:bold; }
	.newsList li p { margin-bottom: 0px; }
	.newsList li p { margin-bottom: 0px; font-size: 0.9rem; }
	
	.imgFlex { display: flex; justify-content: flex-start; }
	.imgFlex div { width: 50%; }
}
@media screen and (min-width: 600px) {
	
	.tabs { border-bottom: 1px solid var(--base-color); display: flex; justify-content: center; margin: 40px auto; max-width: 960px; width: 100%; }
	.tabs li { height: 35px; line-height: 35px; width: 100px; text-align: center; border-top: 1px solid var(--base-color); border-right: 1px solid var(--base-color); border-left: 1px solid var(--base-color); margin: 0 5px; font-size: 0.9rem; position: relative;}
	.tabs li.selected { background: #fff; }
	.tabs li.selected:after { position: absolute; bottom: -1px; left: 0; content: ""; width: 100px; height: 1px; background: #fff; z-index: 1; }
	.tabs li a { display: block; }
	.tabs li a:link    { color:var(--base-color); text-decoration: none; }
	.tabs li a:visited { color:var(--base-color); text-decoration: none; }
	.tabs li a:hover   { color:#fff; text-decoration: none; background: var(--base-color); }
	.tabs li a:active  { color:var(--base-color); text-decoration: none; }
	
	.tabs li.selected a:link    { color:var(--base-color); text-decoration: none; }
	.tabs li.selected a:visited { color:var(--base-color); text-decoration: none; }
	.tabs li.selected a:hover   { color:#fff; text-decoration: none; background: var(--base-color); }
	.tabs li.selected a:active  { color:var(--base-color); text-decoration: none; }
	
	.top-works { background: #f4f4f4; padding: 40px 0; }
	
	.newsList { max-width: 960px; width: 100%; margin: 0 auto; }
	.newsList li { display: flex; justify-content: flex-start; align-items: center; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dotted #dedede; }
	.newsList li:last-child { margin-bottom: 0px;}
	.newsList li .newsDl { margin-right: 10px; margin-bottom: 0px; }
	.newsDl { display: flex; justify-content: flex-start; align-items: center; margin-bottom: 20px; }
	.newsDl dt { background: var(--base-color); color: #fff; font-size: 12px; height: 20px; line-height: 20px; padding: 0 10px; border: 1px solid var(--base-color); font-family:'Roboto Condensed', sans-serif; font-weight:bold; }
	.newsDl dd { background: #fff; color: var(--base-color); font-size: 12px; height: 20px; line-height: 20px; padding: 0 10px; border: 1px solid var(--base-color); font-family:'Roboto Condensed', sans-serif; font-weight:bold; }
	.newsList li p { margin-bottom: 0px; font-size: 0.9rem; }
	
	.imgFlex { display: flex; justify-content: flex-start; }
	.imgFlex div { width: 50%; }
}
@media screen and (min-width: 600px) and (max-width: 899px) {
	.tabs li { height: 30px; line-height: 30px; padding: 0 20px; font-size: 0.8rem; }
}
@media screen and (min-width: 900px) and (max-width: 1089px) {
	.tabs li { height: 35px; line-height: 35px; padding: 0 20px; font-size: 0.85rem; }
}
@media screen and (min-width: 1090px) and (max-width: 1189px) {
	.tabs li { height: 35px; line-height: 35px; padding: 0 30px; font-size: 0.85rem; }
}
@media screen and (min-width: 1190px) and (max-width: 1289px) {
	.tabs li { padding: 0 30px; font-size: 0.85rem; }
}
@media screen and (min-width: 1290px) and (max-width: 1389px) {
}