@charset "shift_jis";
/*********************************************************
共通設定
*********************************************************/
/*
/*色*/
:root {
--siteColor:#f27220;/*オレンジ*/
--siteColor-on:#d05e14;
--siteColor-l:#f7911b;
--orange:#f27220;
--orange-on:#d05e14;
--orange-l:#f27220;
--white:#fff;
--red: #c00;
--red-on:#a70000;
--black: #000;
--gray-33: #333;
--gray-66: #666;
--gray-99: #999;
--gray-f7: #f7f7f7;
--gray-ee: #eee;
--gray-cc: #ccc;
--bgGra01: linear-gradient(135deg, #f7911b 0%, #f27220 100%);/*オレンジ*/
--bgGra02: linear-gradient(135deg, #dd5353 0%, #cc0000 100%);/*赤*/
}
/*
見出し
*********************************************************/
h1{}/*20260423Dell*/
h2{
text-align:center;
font-size:2em;
line-height:1.2em;
font-weight:bold;
padding:1.6em 0;
color:#fff;
text-shadow: 1px 1px 3px rgba(0,0,0,0.3),-1px 1px 3px rgba(0,0,0,0.3),1px -1px 3px rgba(0,0,0,0.3), -1px -1px 3px rgba(0,0,0,0.3);
}
h3{
text-align:center;
color:var(--siteColor);
font-weight:bold;
font-size:1.4em;
line-height:1.3em;
margin-bottom:20px;
}
.h3eng{
display:block;
color:#222;
font-size:0.7em;
line-height:1.5em;
margin-top:5px;
}
h4{
border-left:var(--siteColor) solid 4px;
padding:5px 0 5px 10px;
font-weight:bold;
font-size:1.2em;
line-height:1.3em;
color:var(--siteColor);
margin-bottom:20px;
}
#news h4,
#results h4{
background-color:#f7f7f7;
padding:10px;
margin-bottom:10px;
}
h5{
padding:5px;
border-bottom:var(--siteColor) solid 2px;
font-weight:bold;
margin-bottom:10px;
font-size:1.1em;
line-height:1.3em;
}
@media only screen and (min-width : 768px){
h2{
padding:2em 0;
font-size:2.5em;
line-height:1.2em;
}
h3{
font-size:2.0em;
line-height:1.3em;
margin-bottom:30px;
}
h4{
font-size:1.6em;
line-height:1.3em;
}
h5{
font-size:1.2em;
line-height:1.3em;
padding:10px;
}
}
@media only screen and (min-width : 1025px){
h1{}
h2{
padding:2em 0;
font-size:3.2em;
line-height:1.2em;
}
h3{
font-size:2.2em;
line-height:1.3em;
margin-bottom:40px;
}
h4{
font-size:2em;
line-height:1.3em;
padding-left:20px;
}
#news h4,
#results h4{
background-color:#f7f7f7;
padding:20px;
font-size:1.4em;
line-height:1.3em;
margin-bottom:20px;
}
}
/*
共通-コンテンツ
*********************************************************/
.contents{padding:20px 0;}
/*TABLET*/
@media only screen and (min-width : 768px){
.contents{padding:40px 0;}
}
/*PC*/
@media only screen and (min-width : 1200px){
.contents{padding:60px 0;}
}
/*メインイメージ*/
.mainImg.bgBlack{
background:url(../images/mainImg/mainBgBlack.jpg) center center no-repeat;
background-size:cover;
}
/*
subMenu
***********************************************************/
.subMenu{
position:relative;
z-index:1;
display:flex;
align-items: stretch;
justify-content: space-between;
flex-wrap: wrap;
gap:5px;
}
.subMenu p{
flex: 1 0 30%;
}
.subMenu a{
display: flex;
align-items: center;
justify-content: center;
position:relative;
height:100%;
text-align:center;
color:#333;
text-decoration:none;
font-weight:bold;
border:#cccccc solid 1px;
padding:10px 2px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
behavior: url(border-radius.htc); /* IE */
background:-webkit-gradient(
linear, left top, left bottom,
from(#ffffff),
to(#f7f7f7));
background:-webkit-linear-gradient(top, #ffffff 0% , #f7f7f7 100%);
background:-moz-linear-gradient (top, #ffffff 0% , #f7f7f7 100%);
background:-o-linear-gradient (top, #ffffff 0% , #f7f7f7 100%);
background:-ms-linear-gradient(top, #ffffff, #f7f7f7); /* IE */
background:linear-gradient (top, #ffffff 0% , #f7f7f7 100%);
filter: progid:DXImageTransform.Microsoft.gradient(
GradientType=0,startColorstr='#FFffffff', endColorstr='#FFf7f7f7');/*IE10用（色の頭にFFが必要）*/
transition: 0.1s all ease 0s;
}
.subMenu a:hover,
.subMenu a:active{
background:#fff;
color:var(--siteColor);
box-shadow:none;
-moz-box-shadow:none;
-o-box-shadow:none;
-webkit-box-shadow:none;
}
@media only screen and (min-width : 768px){
.subMenu p{
flex: 1 0 20%;
}
}
@media only screen and (min-width : 1200px){
.subMenu{
padding:20px 15px;
gap:10px;
}
.subMenu p{
flex: 1 0;
}
}
/*
ボタン
*********************************************************/
/*●●
*/
.btnS a{
display:inline-block;
padding:5px 20px;
text-align:center;
border:#333 solid 1px;
color:#333;
border-radius:5px;
-moz-border-radius:5px;
text-decoration:none;
font-size:0.9em;
line-height:1.5em;
}
.btnS a:hover,
.btnS a:active{
background-color:#eee;
color:var(--siteColor);
}
/*●●
*/
.btnL a{
display:block;
padding:20px;
text-align:center;
border:#333 solid 1px;
color:#333;
border-radius:5px;
-moz-border-radius:5px;
text-decoration:none;
margin-left:auto;
margin-right:auto;
width:80%;
max-width:700px;
}
.btnL a:hover,
.btnL a:active{
background-color:#eee;
color:var(--siteColor);
}
/*●●
*/
.btnOrange a{
display:inline-block;
padding:5px 20px;
text-align:center;
background-color:var(--siteColor);
border:var(--siteColor) solid 1px;
color:#fff;
border-radius:5px;
-moz-border-radius:5px;
text-decoration:none;
font-size:0.9em;
line-height:1.5em;
}
.btnOrange a:hover,
.btnOrange a:active{
background-color:var(--siteColor-on);
border-color:var(--siteColor-on);
color:#fff !important;
}
.btnBlack a{
display:inline-block;
padding:5px 20px;
text-align:center;
background-color:#222;
border:#222 solid 1px;
color:#fff;
border-radius:5px;
-moz-border-radius:5px;
text-decoration:none;
font-size:0.9em;
line-height:1.5em;
}
.btnBlack a:hover,
.btnBlack a:active{
background-color:#666;
border-color:#666;
color:#fff !important;
}
/*
レイアウト
*********************************************************/
.layout01{
display:flex;
flex-direction:column;
gap:20px;
align-items:center;
}
.layout01txt{}
.layout01img{
box-shadow: 10px 10px 0 0 #222;
-moz-box-shadow: 10px 10px 0 0 #222;
-o-box-shadow: 10px 10px 0 0 #222;
-webkit-box-shadow: 10px 10px 0 0 #222;
max-width:700px;
margin-left:auto;
margin-right:auto;
}
@media only screen and (min-width : 1025px){
.layout01{
flex-direction:row;
gap:40px;
}
.layout01img{
flex-shrink: 0;
width:58%;
box-shadow: 20px 20px 0 0 #222;
-moz-box-shadow: 20px 20px 0 0 #222;
-o-box-shadow: 20px 20px 0 0 #222;
-webkit-box-shadow: 20px 20px 0 0 #222;
margin-bottom:20px;
margin-right:20px;
}
/*逆*/
.layout01.reverse{}
.reverse .layout01img{
order:1;
}
.reverse .layout01txt{
order:2;
}
}
/*
ヘッダー
*********************************************************/
#header{
clear:both;
float:none;
padding:10px 0;
overflow:hidden;
}
.logo img{max-height:40px;}
@media only screen and (min-width : 600px){
#header h1 .marquee{
animation: none;
transition: none;
padding-left: 0;
text-align:center;
}
}
@media only screen and (min-width : 1025px){
#header{
padding:0;
}
#header > .innerFull{
display:flex;
align-items:center;
margin-right:0;
width:98%;
}
.logo{padding:30px 0;}
.logo img{
max-height:60px;
}
#header > .innerFull > div{
position:relative;
margin-left:auto;
}
#header h1 .marquee{
text-align:right;
}
}
/*
フッター
*********************************************************/
#f-inq{
background:url(../images/common/f-inqBg.jpg) center center no-repeat;
background-size:cover;
}
#f-inq .inner{
background:#fff;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
padding:20px;
}
.f-inqWrap{
display:flex;
gap:10px;
flex-direction:column;
}
.f-inqWrap dl{}
.f-inqWrap dt{
color:var(--siteColor);
font-weight:bold;
padding-bottom:5px;
border-bottom:#333 solid 1px;
margin-bottom:5px;
font-size:1.2em;
line-height:1.5em;
}
.f-inqWrap dd{}
.f-inqBtn{}
.f-mail a,
.f-recruit a{
display:block;
position:relative;
height:100%;
text-align:center;
text-decoration:none;
color:#fff !important;
font-weight:bold;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding:30px 5px;
display: flex;
align-items: center;
justify-content: center;
gap:5px;
}
.f-mail a { background:var(--bgGra01);}
.f-recruit a{ background:var(--bgGra02);}
.f-mail a:hover,
.f-mail a:active{ background:var(--siteColor-on);}
.f-recruit a:hover,
.f-recruit a:active{ background:var(--red-on);}
@media only screen and (min-width : 1025px){
#f-inq .inner{
padding:40px;
}
.f-inqWrap{
gap:30px;
flex-direction:row;
}
.f-inqWrap dl{
flex-shrink: 0;
width:calc(50% - 30px);
}
.f-inqBtn{
flex-shrink: 0;
width:50%;
margin-left:auto;
gap:20px;
}
.f-inqBtn > *{
width: calc((100% - 20px) / 2);
}
.f-mail a,
.f-recruit a{
padding:40px 5px;
}
}
/**/
#footer{
/*position: absolute; ←wrapperの一番下に表示 */
bottom: 0;
left:0;
width:100%;
clear:both;
float:none;
padding:20px 0;
background: url(../images/common/f-bg.jpg) center top no-repeat;
background-size:cover;
color:#fff;
}
.f-nav{ display:none;}
.f-txt{ text-align:center;}
.f-logo img{
max-height:54px;
margin:auto;
}
.f-address{
display:inline-block;
font-size:0.9em;
text-align:left;
}
.f-address span{
display:inline-block;
}
.copyright{
background:#000;
padding:8px 0;
font-size:0.6em;
line-height:1;
color:#ffffff;
text-align:center;
}
@media only screen and (min-width : 1025px){
#footer{padding:40px 0;}
.f-nav{
display:flex;
justify-content: center;
gap:3%;
}
.f-nav a{
text-decoration:none;
color:#fff;
font-weight:bold;
}
.f-navEn{
flex-wrap: wrap;
}
}
/*IE*/
@media all and (-ms-high-contrast:none){
}
/*********************************************************
index
*/
/*SERVICE*/
.topService a{
display:block;
text-decoration:none;
color:#333;
}
/*NEWS*/
.newsScroll{
max-height:250px;
overflow-y:auto;
}
.newsScroll::-webkit-scrollbar {
width: 5px;
}
.newsScroll::-webkit-scrollbar-track {
background-color:#ddd;
}
.newsScroll::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color:#ccc;
}
.news{}
.news dl{
display:flex;
align-items:center;
flex-wrap: wrap;
padding:20px 10px;
border-bottom:#ccc solid 1px;
}
.news .newsDate{
flex-shrink: 0;
width:130px;
padding:5px 0;
font-weight:bold;
margin-right:auto;
}
.news .newsCate{
flex-shrink: 0;
width:160px;
font-size:0.9em;
padding:2px;
border:#ccc solid 1px;
text-align:center;
margin-left:auto;
border-radius:50px;
-moz-border-radius:50px;
-webkit-border-radius:50px;
}
.newsCate.cate1{color:var(--siteColor);}/*お知らせ*/
.newsCate.cate2{color:#a27400;}/*実績紹介*/
.newsCate.cate3{color:#cc0000;}/*採用情報*/
.newsCate.cate4{color:#1044d8;}
.newsCate.cate5{color:#145d24;}
.news .newsTtl{
flex-shrink: 0;
width:100%;
padding-top:5px;
}
.news a{ text-decoration:none;}
/*ニュースページ*/
.newsDtl{}
.news.newsDtl .newsDate,
.news.newsDtl .newsCate{
display:inline-block;
}
/*TABLET*/
@media only screen and (min-width : 768px){
}
/*PC*/
@media only screen and (min-width : 1200px){
.news dl{
padding:20px;
gap:20px;
align-items: flex-start;
}
.news .newsDate{
margin-right:inherit;
}
.news .newsCate{
margin-left:inherit;
}
.news .newsTtl{
width:calc( 100% - 40px - 130px - 160px);
padding:5px 0;
}
}
/*
会社案内
*********************************************************/
.greetingWrap{
display:flex;
flex-direction:column;
gap:10px;
}
.greetingImg{
flex-shrink: 0;
width:70%;
margin-left:auto;
margin-right:auto;
}
@media only screen and (min-width : 1025px), print{
.greetingWrap{
flex-direction:row;
gap:40px;
align-items:center;
}
.greetingImg{
order:2;
flex-shrink: 0;
width:33%;
}
.greetingTxt{
order:1;
flex-shrink: 0;
width:calc(67% - 40px);
}
/*左右反対*/
.greetingWrap.reverse{}
.greetingWrap.reverse .greetingImg{order:1;}
.greetingWrap.reverse .greetingTxt{order:2;}
}
/*
開発実績
*********************************************************/
.resultsWrap{}
.resultsWrap > div{
position:relative;
overflow:hidden;
background:#fff;
box-shadow: 0 0 5px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0 0 5px 0px rgba(0,0,0,0.3);
-o-box-shadow: 0 0 5px 0px rgba(0,0,0,0.3);
-webkit-box-shadow: 0 0 5px 0px rgba(0,0,0,0.3);
padding-bottom:40px;
}
.resultsImg{
position:relative;
background:#f7f7f7;
/*提供画像が切れるとダメ
padding-top:40%;
*/
}
/*提供画像が切れるとダメ
.resultsImg img{
position:absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50% , -50%);
-ms-transform: translate(-50% , -50%);
transform: translate(-50% , -50%);
height:100%;
width:100%;
max-width:none;
max-height:none;
object-fit: cover;
font-family: 'object-fit: cover;';
z-index:1;
}
*/
.resultsWrap dl{
padding:15px;
}
.resultsWrap dt{
font-weight:bold;
color:var(--siteColor);
font-size:1.4em;
line-height:1.5em;
margin-bottom:5px;
}
.resultsWrap dd{
}
.resultsWrap .resultsBtn{
position:absolute;
bottom:0;
left:0;
width:100%;
display:flex;
gap:10px;
padding:15px;
}
.resultsWrap .resultsBtn .btnS{
flex-shrink: 0;
width:100px;
}
.resultsWrap .resultsBtn .btnS a{
width:100%;
padding-left:5px;
padding-right:5px;
}
.resultsWrap .resultsBtn .btnOrange,
.resultsWrap .resultsBtn .btnBlack{
flex-shrink: 0;
min-width:calc(100% - 110px);
margin:auto;
}
.resultsWrap .resultsBtn .btnOrange a,
.resultsWrap .resultsBtn .btnBlack a{
width:100%;
padding-left:5px;
padding-right:5px;
}
/*その他実績テキスト*/
.resultsWrap2{
max-height:1000px;
overflow-y:scroll;
}
.resultsWrap2 dl{
padding:10px;
border-bottom:#ccc solid 1px;
}
.resultsWrap2 dt{
font-weight:bold;
font-size:1.2em;
line-height:1.5em;
}
.resultsWrap2 dd{
}
.resultsWrap2 dd a{
display:block;
position:relative;
color:#666;
padding-right:2em;
}
.resultsWrap2 dd a:before{
position:absolute;
bottom: 50%;
right:0;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%);
content:'>';
color:var(--siteColor);
text-decoration:none;
font-weight:bold;
font-size:1.4em;
line-height:1em;
}
.resultsWrap2 dd a:hover,
.resultsWrap2 dd a:active{
color:#222 !important;
}
/*表*/
.resultsWrap2 th br{
display:none;
}
.resultsWrap2 td.btnBlack {
text-align:center;
}
/*詳細*/
.resultsDtl{}
.resultsDtl dl{
border:#ccc solid 1px;
background:#fff;
}
.resultsDtl dt{
background:#222;
color:#fff;
padding:10px;
font-weight:bold;
}
.resultsDtl dd{
padding:10px;
}
@media only screen and (min-width : 1025px){
.resultsWrap dl{
padding:30px;
}
.resultsWrap .resultsBtn{
padding:0 30px 20px;
}
.resultsWrap2 dl{
display:flex;
align-items:center;
gap:2%;
padding:20px;
}
.resultsWrap2 dt{
flex-shrink: 0;
width:25%;
}
.resultsWrap2 dd{
flex-shrink: 0;
width:73%;
}
/*表*/
.resultsWrap2 th{
width:auto;
min-width:25%;
}
.resultsWrap2 th br{
display:block;
}
.resultsWrap2 td.btnBlack {
width:180px;
}
.resultsWrap2 td.btnBlack a{
display:block;
margin:2px 0;
}
.resultsDtl dt,
.resultsDtl dd{
padding:20px;
}
}
/*
事業案内
*********************************************************/
.serviceDtl{}
.serviceDtl dl{
background:#f7f7f7;
}
.serviceDtl dt{
background:#222;
color:#fff;
font-weight:bold;
font-size:1.2em;
padding:10px;
text-align:center;
display: flex;
align-items: center;
justify-content: center;
}
.serviceDtl dd{
padding:10px;
}
@media only screen and (min-width : 1025px){
.serviceDtl dd{
padding:20px;
}
}
/*
2nd
*********************************************************/
@media only screen and (min-width : 768px){
}
@media only screen and (min-width : 1025px){
}
/*IE*/
@media all and (-ms-high-contrast:none){
}