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

/*-- headline ------------------------------------------------------------*/
#headline { padding: 10vh 4%; position: relative;}
#headline h2 { color: #000; line-height: 1.5; letter-spacing: .2em; }
#headline h2 span { font-family:'Roboto Condensed', sans-serif; font-weight:bold; display:block; letter-spacing: 0em; color: var(--base-color); font-size: 0.5em; }
#headline .in { background: rgba(255,255,255,0.9); padding: 20px 60px;}
.companyBg { background: url("../img/second/headline01.jpg") center center no-repeat; background-size: cover;}
.serviceBg { background: url("../img/second/headline-service.png") center center no-repeat; background-size: cover;}
.newsBg { background: url("../img/second/headline-news.png") center center no-repeat; background-size: cover;}
.columnBg { background: url("../img/second/headline-column.png") center center no-repeat; background-size: cover;}
.contactBg { background: url("../img/second/headline-contact.png") center center no-repeat; background-size: cover;}
.privacyBg { background: url("../img/second/headline-privacy.png") center center no-repeat; background-size: cover;}
.flierBg { background: url("../img/second/headline-flier.png") center center no-repeat; background-size: cover;}
.solutionBg { background: url("../img/second/headline-solution.png") center center no-repeat; background-size: cover;}
@media screen and (max-width: 599px) {
	#headline .in { padding: 4%; }
	#headline h2 { font-size: 1.5rem; line-height: 1.2; text-align: center; }
}
@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: 1.8rem;}
}
@media screen and (min-width: 900px) and (max-width: 1079px)  {
	#headline h2 { font-size: 1.85rem;}
}
@media screen and (min-width: 1080px) and (max-width: 1199px)  {
	#headline h2 { font-size: 1.9rem;}
}
@media screen and (min-width: 1200px) and (max-width: 1479px)  {
	#headline h2 { font-size: 1.95rem;}
}
@media screen and (min-width: 1480px) {
	#headline h2 { font-size: 2.0rem;}
}

/*-- 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) {
	header .in-head-flex .hR nav ul li a { position: fixed; }
	.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; 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; }
}

/*-- section ------------------------------------------------------------*/
@media screen and (max-width: 899px){
	.secondFlex { display: flex; justify-content: space-between; flex-direction: column;  margin: 0 4%; }
	.secondFlex aside { order: 2; margin-bottom: 5vh; }
	.secondFlex aside ul { margin:0 0 20px; }
	.secondFlex aside ul li { padding: 5px 10px; border-bottom: 1px dotted #dedede; border-left: 5px solid #dedede; margin-bottom: 10px;}
	.secondFlex aside ul li:hover { background: var(--base-color); cursor: pointer; color: #fff; }
	.secondFlex aside ul li a         { resize: none; display: block; }
	.secondFlex aside ul li a:link    { color:#333; text-decoration: none; }
	.secondFlex aside ul li a:visited { color:#333; text-decoration: none; }
	.secondFlex aside ul li a:hover   { color:#fff; text-decoration: none; }
	.secondFlex aside ul li a:active  { color:#333; text-decoration: none; }
	.secondFlex aside .sideBar { width: 100%; height: 5px; position: relative; background: #f4f4f4; margin-bottom: 20px; }
	.secondFlex aside .sideBar:after { content: ""; width: 20px; height: 5px; background: var(--base-color); position: absolute; top: 0; left: 0; }
	
	.secondFlex main { order: 1; }
	.secondFlex main section { margin-bottom: 5vh; padding: 0; margin-top: -50px; padding-top: 50px; }
	.secTtl01 { font-size: 1.5em; font-weight: bold; color: var(--base-color); position: relative; padding-left: 0.5em; margin-bottom: 10px; padding:10px 0 10px 1em; }
	.secTtl01:before { content: ""; width: 5px; height: 80%; background:var(--base-color); position: absolute; left: 0%; top: 50%; transform: translateY(-50%) skewX(-15deg); }
}
@media screen and (max-width: 599px) {
	.in-flex aside .subTtl { margin-bottom: 20px; border-left: 3px solid var(--base-color); padding:5px 0 5px 4%; isplay: flex; justify-content:space-between; align-items: center;}
	.in-flex aside h3 { font-size: 1.1rem; margin-right: 6%; }
	.in-flex aside h6 { font-size: 0.7rem; }
	.secTtl01 { font-size: 1.3em; }
}
@media screen and (min-width: 600px) and (max-width: 899px){
}
@media screen and (min-width: 900px) and (max-width: 1089px){
}
@media screen and (min-width: 1090px) and (max-width: 1189px){
}

@media screen and (min-width: 900px){
	.secondFlex { display: flex; justify-content: space-between; margin: 0 4%; }
	.secondFlex aside { width: 16%; margin-bottom: 10vh; }
	.secondFlex aside .side-fix { position: sticky; top: 100px; }
	.secondFlex aside ul { margin-bottom: 20px; }
	.secondFlex aside ul li { padding: 10px; border-bottom: 1px dotted #dedede; border-left: 5px solid #dedede; margin-bottom: 10px;}
	.secondFlex aside ul li:hover { background: var(--base-color); cursor: pointer; color: #fff; }
	.secondFlex aside ul li a         { resize: none; display: block; }
	.secondFlex aside ul li a:link    { color:#333; text-decoration: none; }
	.secondFlex aside ul li a:visited { color:#333; text-decoration: none; }
	.secondFlex aside ul li a:hover   { color:#fff; text-decoration: none; }
	.secondFlex aside ul li a:active  { color:#333; text-decoration: none; }
	.secondFlex aside .sideBar { width: 100%; height: 5px; position: relative; background: #f4f4f4; margin-bottom: 20px; }
	.secondFlex aside .sideBar:after { content: ""; width: 20px; height: 5px; background: var(--base-color); position: absolute; top: 0; left: 0; }
	
	.secondFlex main { width: 80%; }
	.secondFlex main section { margin-bottom: 10vh; padding: 0; margin-top: -60px; padding-top: 60px; }
	.secTtl01 { font-size: 1.5em; font-weight: bold; color: var(--base-color); position: relative; padding-left: 0.5em; margin-bottom: 20px; padding:10px 0 10px 1em; }
	.secTtl01:before { content: ""; width: 5px; height: 80%; background:var(--base-color); position: absolute; left: 0%; top: 50%; transform: translateY(-50%) skewX(-15deg); }
	
	.in-second { max-width: 1200px; width: 96%; margin: 0 auto; }
}
@media screen and (min-width: 900px) and (max-width: 1089px)  {
}
@media screen and (min-width: 1090px) and (max-width: 1189px)  {
}
@media screen and (min-width: 1190px) and (max-width: 1289px)  {
}
@media screen and (min-width: 1290px) and (max-width: 1389px)  {
}
@media screen and (min-width: 1390px) and (max-width: 1489px)  {
}
@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; }
	
	.tbl02 { width: 100%; max-width: 960px; table-layout: fixed;  }
	.tbl02 thead th { padding: 10px 20px; text-align: center; background: #dedede; border: 1px solid #eeeeee; vertical-align:middle; font-size: 0.9em; }
	.tbl02 thead th.niniBuy { background: var(--base-color); color: #fff; border: 2px solid var(--base-color);}
	.tbl02 tbody th { padding: 10px 20px; text-align: center; background: #f4f4f4; border: 1px solid #dedede; vertical-align:middle; font-size: 0.9em; }
	.tbl02 tbody td { padding: 10px 20px; text-align: left; background: #fff; border: 1px solid #dedede; vertical-align:middle; font-size: 0.9em; }
	.tbl02 tbody td.niniBuy { border-left: 2px solid var(--base-color); border-right: 2px solid var(--base-color); }
	.tbl02 tbody td.niniBuyMb { border-bottom: 2px solid var(--base-color); }
}
@media screen and (min-width: 600px) {
	.tbl01 { width: 100%;  }
	.tbl01 th,.tbl01 td { padding: 20px; text-align: left; }
	.tbl01 th { width: 20%; text-align: left; border-bottom: 3px solid #dedede; }
	.tbl01 td { width: 80%; border-bottom: 1px solid #dedede; }
	
	.tbl02 { width: 100%; max-width: 960px; table-layout: fixed;  }
	.tbl02 thead th { padding: 10px 20px; text-align: center; background: #dedede; border: 1px solid #eeeeee; vertical-align:middle; font-size: 0.9em; }
	.tbl02 thead th.niniBuy { background: var(--base-color); color: #fff; border: 2px solid var(--base-color);}
	.tbl02 tbody th { padding: 10px 20px; text-align: center; background: #f4f4f4; border: 1px solid #dedede; vertical-align:middle; font-size: 0.9em; }
	.tbl02 tbody td { padding: 10px 20px; text-align: left; background: #fff; border: 1px solid #dedede; vertical-align:middle; font-size: 0.9em; }
	.tbl02 tbody td.niniBuy { border-left: 2px solid var(--base-color); border-right: 2px solid var(--base-color); }
	.tbl02 tbody td.niniBuyMb { border-bottom: 2px solid var(--base-color); }
}

/*-- service ------------------------------------------------------------*/
@media screen and (max-width: 599px) {
	.listBox { padding: 20px; border: 3px solid #dedede; border-radius: 6px; margin-bottom: 40px; display: flex; }
	.s-subTtl { margin-bottom: 20px; border-top: var(--base-color) 3px solid; border-bottom: var(--base-color) 3px solid; padding: 10px; display: flex; font-weight: bold; }
	.fukiTtl { position: relative; padding: 0.6em; background: #e0edff; }
	.fukiTtl:after { position: absolute; content: ''; top: 100%; left: 30px; border: 15px solid transparent; border-top: 15px solid #e0edff; width: 0; height: 0; }
	
	.nayamiList li { padding: 10px; border-bottom: 1px dotted #dedede; }
	.nayamiList li:before { content:"\f086"; font-family: "Font Awesome 5 Free"; font-weight: bold; margin-right: 0.5em; color: var(--base-color); }
	
	.apList li { margin-bottom: 10px; font-size: 0.9em; }
	.apList li span { background: var(--base-color); padding: 5px 20px; color: #fff; display: block; margin-bottom: 10px; }
	
	.faqDl dt { font-weight: bold; }
	.faqDl dt span { color: var(--base-color); font-family: 'Roboto Condensed', sans-serif; font-weight: bold; margin-right: 0.5em; font-size: 1.2em; }
	
	.faqDl dd span { font-family: 'Roboto Condensed', sans-serif; font-weight: bold; margin-right: 0.5em; font-size: 1.2em; }
	.faqDl dd { margin-bottom: 20px; padding-left: 1em; text-indent: -2.0em; background: #f4f4f4; padding: 10px 10px 10px 3em;; border-radius: 6px; font-size: 0.9em; }
	
	.voiceList { display: flex; justify-content: space-between; flex-wrap: wrap; }
	.voiceList li { background: #fdf7f7; border-radius: 8px; padding: 2%; margin-bottom: 20px; border: 1px solid #f4eded; }
	.voiceList li .listOver { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
	.voiceList li .listOver-R { max-width: 45px; }
	.voiceList li p { margin-bottom: 0; font-size: 0.9em; }
	.voiceList li p.name { font-size: 1.1em; font-weight: bold; }
	.voiceList li p.name span { margin-left: 0.5em;}
}
@media screen and (min-width: 600px) {
	.listBox { padding: 20px; border: 3px solid #dedede; border-radius: 6px; margin-bottom: 40px; display: flex; }
	.s-subTtl { margin-bottom: 20px; border-top: var(--base-color) 3px solid; border-bottom: var(--base-color) 3px solid; padding: 10px; display: flex; font-weight: bold; }
	.fukiTtl { position: relative; padding: 0.6em; background: #e0edff; }
	.fukiTtl:after { position: absolute; content: ''; top: 100%; left: 30px; border: 15px solid transparent; border-top: 15px solid #e0edff; width: 0; height: 0; }
	
	.nayamiList li { padding: 10px; border-bottom: 1px dotted #dedede; }
	.nayamiList li:before { content:"\f086"; font-family: "Font Awesome 5 Free"; font-weight: bold; margin-right: 0.5em; color: var(--base-color); }
	
	.apList li { margin-bottom: 10px; font-size: 0.9em; }
	.apList li span { background: var(--base-color); padding: 5px 20px; color: #fff; margin-right: 1em;}
	
	.faqDl dt { font-weight: bold; }
	.faqDl dt span { color: var(--base-color); font-family: 'Roboto Condensed', sans-serif; font-weight: bold; margin-right: 0.5em; font-size: 1.2em; }
	
	.faqDl dd span { font-family: 'Roboto Condensed', sans-serif; font-weight: bold; margin-right: 0.5em; font-size: 1.2em; }
	.faqDl dd { margin-bottom: 20px; padding-left: 1em; text-indent: -2.0em; background: #f4f4f4; padding: 10px 10px 10px 3em;; border-radius: 6px; font-size: 0.9em; }
	
	.voiceList { display: flex; justify-content: flex-start; flex-wrap: wrap; }
	.voiceList li { width: 32%; background: #fdf7f7; border-radius: 8px; padding: 2%; margin-bottom: 20px; border: 1px solid #f4eded; margin-right: 2%; }
	.voiceList li:nth-child(3n) { margin-right: 0; }
	.voiceList li .listOver { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
	.voiceList li .listOver-R { max-width: 60px; }
	.voiceList li p { margin-bottom: 0; font-size: 0.9em; }
	.voiceList li p.name { font-size: 1.2em; font-weight: bold; }
	.voiceList li p.name span { margin-left: 0.5em;}
}

/*-- company ------------------------------------------------------------*/
@media screen and (max-width: 599px) {
	.flowStep {  }
	.in-flowStep { margin-bottom: 20px;border: 3px solid #dedede; padding: 2%; border-radius: 6px; margin-bottom: 20px; position: relative; }
	.in-flowStep h4 { text-align: center; background: var(--base-color); padding: 10px; color: #fff; margin-bottom: 10px; }
	.in-flowStep p { margin-bottom: 0px; }
	.in-flowStep:after { content: ""; width:0; height:0; border-style:solid; border-width: 20px 25px 0 25px; border-color: #dedede transparent transparent transparent; position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%);}
	.in-flowStep:last-child:after { display: none; }
	
	.photoList { display: flex; justify-content: flex-start; flex-wrap: wrap; margin-bottom: 20px;  }
	.photoList li { width: 50%; }
}
@media screen and (min-width: 600px) {
	.flowStep { display: flex; justify-content: flex-start; flex-wrap: wrap; max-width: 960px;  }
	.in-flowStep { width: 27%; margin-right: 2%;border: 3px solid #dedede; padding: 2%; border-radius: 6px; margin-bottom: 20px; position: relative; }
	.in-flowStep:nth-child(3n) { margin-right: 0;}
	.in-flowStep h4 { text-align: center; background: var(--base-color); padding: 10px; color: #fff; margin-bottom: 10px; }
	.in-flowStep p { margin-bottom: 0px; }
	.in-flowStep:after { content: ""; width:0; height:0; border-style:solid; border-width: 25px 0 25px 20px; border-color: transparent transparent transparent #dedede; position: absolute; top: 50%; right: -20px; transform: translateY(-50%);}
	.in-flowStep:last-child:after { display: none; }
	
	.photoList { display: flex; justify-content: flex-start; margin-bottom: 40px; }
	.photoList li { width: 25%; }
}
@media screen and (min-width: 600px) and (max-width: 899px) {
}
@media screen and (min-width: 900px) and (max-width: 1089px) {
}
@media screen and (min-width: 1090px) and (max-width: 1189px) {
}
@media screen and (min-width: 1190px) and (max-width: 1289px)  {
}
@media screen and (min-width: 1290px) and (max-width: 1389px)  {
}
@media screen and (min-width: 1390px) and (max-width: 1489px)  {
}

/*--column ------------------------------------------------------------*/
@media screen and (max-width: 599px) {
	.columnList { display: flex; justify-content: flex-start; margin-bottom: 40px;  }
	.columnList li { width: 48%; margin-right: 4%; margin-bottom: 20px;}
	.columnList li div { margin-bottom: 10px; }
	.columnList li p { font-size: 0.9em; }
	.columnList li:nth-child(2n) { margin-right: 0;}
	
	.flierList { display: flex; justify-content: flex-start; flex-wrap: wrap; }
	.flierList li { width: 48%; margin-right: 4%; margin-bottom: 20px; text-align: center; }
	.flierList li:nth-child(2n) { margin-right: 0; }
}
@media screen and (min-width: 600px) {
	.columnList { display: flex; justify-content: flex-start; flex-wrap: wrap; margin-bottom: 40px;  }
	.columnList li { width: 23.5%; margin-right: 2%; margin-bottom: 20px; }
	.columnList li div { margin-bottom: 10px; }
	.columnList li p { font-size: 0.9em; }
	.columnList li:nth-child(4n) { margin-right: 0;}
	
	.flierList { display: flex; justify-content: flex-start; flex-wrap: wrap; }
	.flierList li { margin-right: 4%; margin-bottom: 20px; }
}
@media screen and (min-width: 600px) and (max-width: 899px) {
}
@media screen and (min-width: 900px) and (max-width: 1089px) {
}
@media screen and (min-width: 1090px) and (max-width: 1189px) {
}
@media screen and (min-width: 1190px) and (max-width: 1289px)  {
}
@media screen and (min-width: 1290px) and (max-width: 1389px)  {
}
@media screen and (min-width: 1390px) and (max-width: 1489px)  {
}

/*-- news ------------------------------------------------------------*/
@media screen and (max-width: 599px) {
	.newsList {  }
	.newsList li { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dotted #dedede; }
	.cate { display: flex; justify-content: flex-start; align-items: center; margin-bottom: 10px; }
	.cate dt { font-size: 0.8em; padding: 1px 10px; background: var(--base-color); color: #fff; border: 1px solid var(--base-color); font-family:'Roboto Condensed', sans-serif; font-weight:bold;}
	.cate dd { font-size: 0.8em; padding: 1px 10px; color: var(--base-color); background: #fff; border: 1px solid var(--base-color); font-family:'Roboto Condensed', sans-serif; font-weight:bold;}
}
@media screen and (min-width: 600px) {
	.newsList {  }
	.newsList li { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dotted #dedede; }
	.cate { display: flex; justify-content: flex-start; align-items: center; margin-bottom: 10px; }
	.cate dt { font-size: 0.8em; padding: 1px 10px; background: var(--base-color); color: #fff; border: 1px solid var(--base-color); font-family:'Roboto Condensed', sans-serif; font-weight:bold;}
	.cate dd { font-size: 0.8em; padding: 1px 10px; color: var(--base-color); background: #fff; border: 1px solid var(--base-color); font-family:'Roboto Condensed', sans-serif; font-weight:bold;}
}
@media screen and (min-width: 600px) and (max-width: 899px) {
}
@media screen and (min-width: 900px) and (max-width: 1089px) {
}
@media screen and (min-width: 1090px) and (max-width: 1189px) {
}
@media screen and (min-width: 1190px) and (max-width: 1289px)  {
}
@media screen and (min-width: 1290px) and (max-width: 1389px)  {
}
@media screen and (min-width: 1390px) and (max-width: 1489px)  {
}

/*-- solution ------------------------------------------------------------*/
@media screen and (max-width: 599px) {
	.in-solution { background: #e4f5f5; padding: 4%; margin-bottom: 5vh; }
	.in-solution:nth-child(1) { margin-top: 5vh;}
	.ttlTbl { margin-bottom: 40px; }
	.ttlTbl th { width: 20%; }
	.ttlTbl td { padding: 0 20px; vertical-align: middle; }
	.ttlTbl td h3 { font-size: 1.1em; font-weight: bold; margin-bottom: 10px; }
	.ttlTbl td dl { display: flex; justify-content: flex-start; align-items: center; }
	.ttlTbl td dl dt { background: #5dc4c5; padding: 1px 10px; font-size: 0.9em; color: #fff; }
	.ttlTbl td dl dd { padding: 1px 10px; font-size: 0.9em; }
	.in-solution .solutionTtl { text-align: center; font-weight: bold; }
	.in-solution .solutionTtl span { background: #fff; padding: 10px 40px;; text-align: center; }
	.in-solution-bg { padding: 4%; background: #fff;}
	.in-solution h5 { color: var(--base-color); font-weight: bold; }
	.in-solution h5.pointTtl { background: #5dc4c5; color: #fff; padding: 10px 15px; font-size: 0.9em; }
	.pointBox { border: 1px solid #5dc4c5; padding: 20px 40px; }
	.pointBox ul li { font-size: 0.9em; padding-left: 1em; text-indent: -1.5em; margin-bottom: 10px; }
	.pointBox ul li:before { content: "■"; margin-right: 0.5em; }
	.pointBox ul li:last-child { margin-bottom: 0px; }
}
@media screen and (min-width: 600px) {
	.in-solution { background: #e4f5f5; padding: 4%; margin-bottom: 5vh; }
	.ttlTbl { margin-bottom: 20px; }
	.ttlTbl th { width: 10%; }
	.ttlTbl td { padding: 0 20px; vertical-align: middle; }
	.ttlTbl td h3 { font-size: 1.1em; font-weight: bold; margin-bottom: 10px; }
	.ttlTbl td dl { display: flex; justify-content: flex-start; align-items: center; }
	.ttlTbl td dl dt { background: #5dc4c5; padding: 1px 10px; font-size: 0.9em; color: #fff; }
	.ttlTbl td dl dd { padding: 1px 10px; font-size: 0.9em; }
	.in-solution .solutionTtl { text-align: center; font-weight: bold; }
	.in-solution .solutionTtl span { background: #fff; padding: 10px 40px;; text-align: center; }
	.in-solution-bg { padding: 4%; background: #fff;}
	.in-solution h5 { color: var(--base-color); font-weight: bold; }
	.in-solution h5.pointTtl { background: #5dc4c5; color: #fff; padding: 10px 15px; font-size: 0.9em; }
	.pointBox { border: 1px solid #5dc4c5; padding: 20px 40px; }
	.pointBox ul li { font-size: 0.9em; padding-left: 1em; text-indent: -1.5em; margin-bottom: 10px; }
	.pointBox ul li:before { content: "■"; margin-right: 0.5em; }
	.pointBox ul li:last-child { margin-bottom: 0px; }
}
@media screen and (min-width: 600px) and (max-width: 899px) {
}
@media screen and (min-width: 900px) and (max-width: 1089px) {
}
@media screen and (min-width: 1090px) and (max-width: 1189px) {
}
@media screen and (min-width: 1190px) and (max-width: 1289px)  {
}
@media screen and (min-width: 1290px) and (max-width: 1389px)  {
}
@media screen and (min-width: 1390px) and (max-width: 1489px)  {
}