トピックス
ニュースレター
採用情報
お問い合わせトピックス
ニュースレター
採用情報
お問い合わせ/* #共通 ========================================================================================================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
font-family: inherit;
}
html {
height:100%;
}
body{
font-family: 'Noto Serif JP', serif;
font-weight: 500;
color: #333333;
margin: 0px;
height: 100%;
font-size: 16px;
line-height: 30px;
-webkit-text-size-adjust: 100%;
}
@media only screen and (max-width: 750px) {
body{
font-weight: 500;
}
}
img {
border: none;
vertical-align:bottom;
}
a{}
a img.img_alpha {
}
a:hover img.img_alpha {
opacity:0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha( opacity=70 )";
}
a {
color: #000;
text-decoration: none;
word-break: break-all;
transition: 0.4s;
}
a:hover {
color: #A4001F; /*下線あり*/
opacity: 0.7;
}
a[href^="tel:"] { cursor: default; }
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.img-pc { display: block !important; }
.img-sp { display: none !important; }
.br-pc { display:block; }
.br-sp { display:none; }
.sp{ display: none; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 1200px) {
#header .img-pc { display: none !important; }
#header .img-sp { display: block !important; }
}
@media only screen and (max-width: 750px) {
.img-pc { display: none !important; }
.img-sp { display: block !important; }
.br-pc { display:none; }
.br-sp { display:block; }
.pc{ display: none !important; }
.sp{ display: unset; }
}
.text-center{
text-align: center;
}
h2{
font-size: 30px;
}
h3{
font-size: 26px;
}
.red { color: #c30d23; }
.blue { color: #182987; }
.brown { color: #8f5515; }
.bc_red { background-color: #c30d23; }
.bc_blue { background-color: #182987; }
.end {
height: 0px;
width: 100%;
clear: left;
}
.flex {
display: flex;
flex-wrap: wrap;
}
.min{
font-size: 14px;
line-height: 1.8em;
}
.auto{
margin-left: auto;
margin-right: auto;
}
.m5{
margin-bottom: 5px;
}
.m10{
margin-bottom: 10px;
}
.m15{
margin-bottom: 15px;
}
.m30{
margin-bottom: 30px;
}
.m40{
margin-bottom: 40px;
}
.m50{
margin-bottom: 50px;
}
.m70{
margin-bottom: 70px;
}
.p50{
padding-bottom: 50px;
}
.p70{
padding-bottom: 70px;
}
.p100{
padding-bottom: 100px;
}
.mt10{
margin-top: 10px !important;
}
.mt30{
margin-top: 30px !important;
}
.mt50{
margin-top: 50px !important;
}
.mt70{
margin-top: 70px !important;
}
.pt30{
padding-top: 30px !important;
}
.pt50{
padding-top: 50px !important;
}
.pt70{
padding-top: 70px !important;
}
.pt100{
padding-top: 70px !important;
}
.releative{
position: relative;
}
.line{
width: 60%;
transform: rotate(-25deg);
border: 0;
border-top: 1px solid #c30d23;
position: absolute;
bottom: 0px;
right: -10%;
}
.line_b{
width: 60%;
transform: rotate(-25deg);
border: 0;
border-top: 1px solid #182987;
position: absolute;
bottom: 0px;
right: -10%;
}
/* #PC ========================================================================================================== */
.wrapper {
/* background: linear-gradient(90deg, #fff 0%, #fff 95%, #eee 5%, #eee 100%);*/
width: 100%;
height: auto;
position: relative;
overflow: hidden;
background: linear-gradient(90deg, #fff 0%, #fff 40%, #eee 0%, #eee 100%);
}
.wrapper_back{
background-image: url("/_common/imgs/sklo.svg");
background-repeat: no-repeat;
background-size: 5%;
background-position: top left;
}
.wrapper_inner{
width: 90%;
margin: auto;
background-color: #fff;
}
.wback{
background-color: #fff;
}
#header {
height: 75px;
width: 100%;
min-width: 1000px;
position: fixed;
z-index: 50;
top: 0px;
transition: 0.5s;
}
#header ul {
padding: 0px;
list-style-type: none;
position : relative;
margin: 0px;
}
#header li {
margin: 0px;
padding: 0px;
text-decoration: none;
display: block;
height: auto;
width: 100%;
position : relative;
float: left;
}
#header li.logo {
height: 75px;
width: 310px;
background-image: url("../imgs/logo.svg");
background-repeat: no-repeat;
background-size: 300px 64px;
background-position: right center;
}
#header li.logo a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-indent:-999px;
z-index: 2; /* 必要であればリンク要素の重なりのベース順序指定 */
}
#header li.menu {
width: auto;
position: relative;
float: right;
margin: 0;
vertical-align: bottom;
padding: 15px 10px 0;
font-weight: 600;
text-align: right;
line-height: 26px;
}
#header li.menu a{
color: #000;
}
#header li.menu a:hover{
color: #c30d23;
}
#header .menu_s {
font-size: 12px;
line-height: 12px;
}
#header li.tel {
width: 190px;
float: right;
margin-left: 5px;
}
#header li.tel img{
height: 75px;
width: auto;
}
.footer {
height: auto;
width: 100%;
position: relative;
background: linear-gradient(to right, #182987 0%, #182987 50%, #c30d23 50%, #c30d23 100%);
color: #FFFFFF;
padding-bottom: 50px;
font-size: 14px;
line-height: 25px;
}
.footer a {
color: #ffffff;
text-decoration: none;
}
.footer a:hover {
color: #ffffff; /*下線あり*/
text-decoration: underline;
}
.footer_inner {
width: 1000px;
max-width: 100%;
padding: 40px 10px;
box-sizing: border-box;
position: relative;
margin: auto;
}
.f_logo {
width: 300px;
margin-bottom: 30px;
}
.f_address {
margin-bottom: 30px;
}
.f_tel {
width: 300px;
}
.f_menu ul{
list-style :none;
padding: 0;
}
.f_menu ul li {
line-height: 2em;
padding-left: 15px;
position: relative;
}
.f_menu ul li:before{
content:"−";
color: #fff;
position:absolute;
left: 0px;
top: 0px;
}
.f_cc {
font-size: 14px;
}
.content {
height: auto;
width: 100%;
position: relative;
margin: auto;
box-sizing: border-box;
}
.inner {
width: 1100px;
max-width: 100%;
box-sizing: border-box;
}
.innermargin{
margin: 100px auto;
}
.over{
position: absolute;
width: 61.15%;
right: 0;
top: 0;
}
.over .over_img{
height: 480px;
background-size: cover;
background-position: center center;
box-sizing: border-box;
}
.over .map{
height: 1000px;
background-size: contain;
background-repeat: no-repeat;
margin: 0px 80px 0px 120px;
background-position: top;
}
.over2{
position: absolute;
width: 50%;
right: 0;
top: 0;
}
.over2 .over2_img{
height: 480px;
background-size: cover;
background-position: center center;
box-sizing: border-box;
}
.map_back{
background-image: url("/home/imgs/zenkoku.svg");
background-color: #eee;
background-repeat: no-repeat;
background-size: 7%;
background-position: top left;
}
.subtitle {
padding-left: 30px;
font-size: 24px;
font-weight: bold;
position: relative;
}
.subtitle::before{
content: "";
display: block;
width: 20px;
height: 0;
border-bottom: 1px solid #7A0417;
position: absolute;
bottom: 17px;
left: 0px;
}
.subtitle span{
font-weight: normal;
font-size: 15px;
margin-left: 15px;
}
.separate{
font-size: 0;
}
.half_box,
.third_box,
.left_box,
.right_box{
display: inline-block;
font-size: 16px;
}
.left_box,
.right_box{
vertical-align: middle;
}
.left_box{
width: 40%;
padding: 20px;
box-sizing: border-box;
}
.right_box{
width: 60%;
background-color: #eee;
}
.half_box{
width: 50%;
padding: 20px;
box-sizing: border-box;
}
.third_box{
width: 33.3%;
padding: 20px;
box-sizing: border-box;
}
.link_box{
background-color: #c30d23;
color: #fff;
width: 250px;
padding: 10px 15px;
text-align: center;
margin-top: 40px;
font-size: 15px;
background-image: url(../imgs/arrow_w.svg);
background-position: right 10px center;
background-size: 15px 15px;
background-repeat: no-repeat;
cursor: pointer;
transition: 0.4s;
}
.link_box:hover{
background-color: #7A0417;
}
.link_box2{
background-color: #182987;
}
.link_box2:hover{
background-color: #16285a;
}
@media only screen and (max-width: 1200px) {
#header{
height: 85px;
}
#header li.logo {
height: 85px;
width: 460px;
background-size: 450px 96px;
}
#header li.menu {
display: none;
}
#header li.tel {
position: fixed;
top: 0;
right: -15px;
margin-left: 0;
}
#header li.tel img{
height: 86px;
width: 85px;
}
.h_s_menu_space {
height: 150px;
width: 100%;
position: relative;
float: left;
border-bottom: 2px solid #fff;
}
.h_s_menu {
height: auto;
width: 95%;
position: relative;
float: left;
padding: 30px 0 30px 5%;
color: #FFFFFF;
border-bottom: 2px solid #fff;
background-image: url(../imgs/arrow_w.svg);
background-position: right 30px center;
background-size: 40px 40px;
background-repeat: no-repeat;
font-size: 30px;
line-height: 30px;
}
.h_s_menu a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-indent:-999px;
z-index: 2; /* 必要であればリンク要素の重なりのベース順序指定 */
}
.h_s_menu:hover {
zoom: 1;/*IE*/
background-color: #182987;
}
.h_s_menu_name {
font-family: 'Teko', sans-serif;
font-weight: 300;
font-size: 80px;
line-height: 70px;
}
}
/* #スマートフォン ========================================================================================================== */
@media only screen and (max-width: 750px) {
body{
font-size: 26px;
line-height: 38px;
}
h2{
font-size: 40px;
}
h3{
font-size: 34px;
line-height: 56px;
}
.link_box{
font-size: 22px;
background-size: 25px 25px;
}
.min{
font-size: 20px;
}
.subtitle{
font-size: 30px;
}
.subtitle span{
font-size: 20px;
}
.inner {
padding: 0 20px;
}
.wrapper_back{
background-size: 7%;
}
.wrapper_inner{
width: 85%;
}
.half_box,
.third_box,
.left_box,
.right_box{
display: block;
width: 100%;
font-size: 26px;
line-height: 38px;
}
.footer{
font-size: 26px;
background: linear-gradient(to top, #182987 0%, #182987 20%, #c30d23 20%, #c30d23 100%);
}
.footer_inner{
padding: 40px 80px;
}
.f_logo {
display: block;
width: 500px;
margin-bottom: 50px;
}
.f_tel{
width: 500px;
}
.f_tel img{
margin-bottom: 15px;
}
.f_cc{
font-size: 20px;
}
.over{
position: static;
margin-top: 50px;
padding-left: 40px;
width: 110%;
}
.line{
width: 75%;
transform: rotate(-25deg);
right: -15%;
}
.over .over_img{
width: 100%;
}
.over2{
position: static;
margin-top: 50px;
padding-left: 40px;
width: 110%;
}
.over2 .over2_img{
width: 100%;
}
}/* @media only screen and (max-width: 750px) */