@charset "UTF-8";
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: inherit;
font-size: 100%;
vertical-align: baseline;
box-sizing:border-box;
}
html {
line-height: 1;
}
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-table;
}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.clear{
clear:both;
}
em.red{
color:#d4145a;
}
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
q, blockquote {
quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none;
}
a {
color: inherit;
text-decoration: none;
}
a img {
border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block;
}
*, :after, :before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
img {
height: auto;
max-width: 100%;
vertical-align: bottom;
}
/*------------------------------------------
font
------------------------------------------*/
/*@font-face {
font-family: NotoSerif;
src: url('../fonts/NotoSerifJP-Medium.otf');
}
@font-face {
font-family: Noto;
src: url('../fonts/NotoSansJP-Light.otf');
}*/
/*------------------------------------------
サービス別レスポンシブ
------------------------------------------*/
/*youtube*/
.youtubeWrapper{
position: relative;
width: 100%;
padding-top: 56.25%;
}
.youtubeWrapper iframe {
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}
/*googlemap*/
.ggmapWrapper{
position: relative;
/*padding-bottom: 56.25%;*/
height: 390px;
overflow: hidden;
}
.ggmapWrapper iframe,
.ggmapWrapper object,
.ggmapWrapper embed{
position: absolute;
top: -200px;
left: 0;
width: 100%;
height: 600px;
}
.ggmapWrapper iframe{
height: 800px;
width: 100%;
}
@media screen and (max-width: 768px) {
.ggmapWrapper iframe{
width: 100%;
}
}
/*------------------------------------------
body / 共通
------------------------------------------*/
body {
color: #000;
font-size: 14px;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", "sans-serif";
line-height: 1.5;
letter-spacing: 1px;
-webkit-text-size-adjust: 100%;
min-width: 1000px;
}
@media screen and (max-width: 768px) {
body {
min-width: 100%;
}
.hidden-sp {
display: none;
}
}
@media screen and (min-width: 769px) {
.hidden-pc {
display: none !important;
}
}
@media screen and (max-width: 768px) {
}
/*/////////////////////cmn/////////////////////*/
.body * {
line-height: 1.5;
}
img {
vertical-align: top;
}
.hoverBtn{
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
.hoverBtn:hover {
opacity: 0.8;
}
h2{
margin: 0 0 40px 0;
text-align: center;
}
@media screen and (max-width: 768px) {
h2{
margin: 0 0 10% 0;
}
}
/*------------------------------------------
header
------------------------------------------*/
header{
.boxL{
float: left;
padding: 40px 0 0 40px;
}
.boxR{
float: right;
a{
width: 190px;
height: 110px;
display: table;
background: #f4524d url(../img/arrow_01.png) no-repeat right 20px center / 8px;
span{
display: table-cell;
text-align: center;
vertical-align: middle;
font-size: 20px;
font-weight: bold;
color: #FFF;
}
}
}
}
/* SP */
@media screen and (max-width: 768px) {
.body{
padding: 40px 0 0 0;
}
nav{
width: 100%;
min-height: 40px;
padding: 9px;
background: rgba(255,255,255,0.8);
position: fixed;
top: 0;
z-index: 1000;
.logoBox{
width: 225px;
float: left;
}
.menuBtn{
text-align: right;
.close{
display: none;
}
}
.menuBtn.active{
.close{
display: inline-block;
}
.open{
display: none;
}
}
ul{
display: none;
padding: 20px 0;
li{
width: 25%;
padding: 5% 1%;
float: left;
img{
}
&:last-child{
width: 100%;
a{
height: 100%;
padding: 5%;
text-align: center;
display: block;
color: #FFF;
background: #f4524d url(../img/arrow_01.png) no-repeat right 20px center / 8px;
}
}
}
}
}
}
/*------------------------------------------
footer
------------------------------------------*/
footer{
padding: 20px 0;
background: #595757;
}
footer .inner{
width: 980px;
margin: 0 auto;
text-align: center;
}
footer *{
line-height: 1.5 !important;
font-family: sans-serif !important;
box-sizing: border-box !important;
}
footer #links{
margin-bottom: 20px;
}
footer #links,
footer #links *{
text-decoration: none;
font-size: 12px;
color: #FFF;
}
footer #links a:hover{
text-decoration: underline;
}
footer #copy{
}
footer #copy small{
font-size: 10px;
color: #FFF;
}
@media screen and (max-width: 768px) {
footer{
width: 100%;
padding: 0 5% 5% 5%;
}
footer .inner{
width: auto;
padding: 0;
}
footer #links{
padding: 5% 0;
margin: 0;
float: inherit;
text-align: center;
}
footer #links,
footer #links *{
font-size: 11px;
line-height: 1.5;
}
footer #copy{
float: inherit;
text-align: center;
}
footer #copy small{
float: inherit;
font-size: 10px;
text-align: center;
}
footer #links a{
display: inline-block;
}
}
/*/////////////////////一覧ボタン/////////////////////*/
/*.listBtn{
text-align: center;
}
.listBtn.top{
position: relative;
}
.listBtn.bottom{
padding: 80px 0;
}
.listBtn a{
width: 660px;
height: 70px;
margin: 0 auto;
display: table;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
.listBtn.bottom a{
}
.listBtn a:hover{
opacity: 0.8;
}
.listBtn a > span{
padding: 3px;
display: table-cell;
font-size: 22px;
vertical-align: middle;
text-align: center;
color: #FFF;
}
.listBtn a > span > span{
display: block;
padding: 15px 0;
border: 1px solid #FFF;
}
@media screen and (max-width: 768px) {
.listBtn{
padding: 10% 5% 10% 5%;
}
.listBtn.top{
padding: 0;
}
.listBtn.bottom{
padding: 10% 5% 10% 5%;
}
.listBtn a{
width: 100%;
height: 60px;
}
}*/
/*------------------------------------------
mv
------------------------------------------*/
.mvWrapper{
min-width: 980px;
position: relative;
h1{
position: absolute;
text-indent: -9999px;
width: 508px;
height: 112px;
background: url("../img/mv_txt.png") no-repeat center / 508px;
bottom: 15%;
left: 50%;
margin-left: -254px;
}
}
@media screen and (max-width: 768px) {
.mvWrapper{
min-width: 100%;
h1{
width: auto;
height: auto;
background: none;
}
}
}
/*------------------------------------------
nav
------------------------------------------*/
@media screen and (min-width: 769px) {
nav{
padding: 55px 0 90px 0;
ul{
display: table;
margin: 0 auto;
li{
padding: 0 10px;
display: table-cell;
}
}
}
}
/*------------------------------------------
links_01
------------------------------------------*/
.contents_bg_01{
padding: 0 0 65px 0;
}
#links_01{
.selectBox{
text-align: center;
}
select{
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
border-radius: 0;
border: 0;
margin: 0;
padding: 0;
background: none transparent;
vertical-align: middle;
font-size: inherit;
color: inherit;
box-sizing: content-box;
width: 580px;
height: 80px;
padding: 0 0 0 20px;
border: 3px solid #2eafbf;
font-size: 24px;
color: #2eafbf;
cursor: pointer;
background: url("../img/pul.png") no-repeat right 20px center / 38px;
}
}
@media screen and (max-width: 768px) {
.contents_bg_01{
padding: 10% 5%;
}
#links_01{
.selectBox{
text-align: center;
}
select{
width: 100%;
height: 60px;
padding: 0 0 0 20px;
font-size: 18px;
background: url("../img/pul.png") no-repeat right 20px center / 30px;
box-sizing: border-box;
}
}
}
/*------------------------------------------
links_02
------------------------------------------*/
.contents_bg_02{
padding: 40px 0;
background: #f2f9ef;
}
#links_02{
p{
width: 650px;
margin: 0 auto;
font-size: 18px;
line-height: 1.8;
}
}
@media screen and (max-width: 768px) {
.contents_bg_02{
padding: 10% 0;
}
#links_02{
p{
width: 100%;
padding: 0 5%;
font-size: 14px;
}
}
}
/*------------------------------------------
links_03
------------------------------------------*/
.contents_bg_03{
padding: 60px 0;
}
#links_03{
ul{
width: 980px;
margin: 0 auto;
li{
width: 460px;
margin: 0 0 55px 0;
float: left;
&:nth-child(even){
float: right;
}
&:nth-last-child(1),
&:nth-last-child(2){
margin-bottom: 0;
}
}
.txtBox{
padding: 0 0 20px 0;
position: relative;
color: #FFF;
.icon{
position: absolute;
left: 50%;
top: -50px;
margin-left: -40px;
}
h3{
padding: 20px 0 10px 0;
text-align: center;
font-size: 28px;
font-weight: bold;
}
p{
padding: 0 60px 10px 60px;
font-size: 18px;
line-height: 1.8;
}
}
.btnBox{
a{
width: 420px;
height: 60px;
margin: 0 auto;
display: table;
border-radius: 6px;
span{
display: table-cell;
font-size: 23px;
font-weight: bold;
text-align: center;
vertical-align: middle;
}
}
}
.pinkBox{
background: #f693a6;
.btnBox{
a{
color: #f693a6;
background: #FFF url("../img/arrow_02_01.png") no-repeat right 20px center / 8px;
}
}
}
.purpleBox{
background: #ac86c0;
.btnBox{
a{
color: #ac86c0;
background: #FFF url("../img/arrow_02_02.png") no-repeat right 20px center / 8px;
}
}
}
}
}
@media screen and (max-width: 768px) {
.contents_bg_03{
padding: 10% 0 5% 0;
}
#links_03{
ul{
width: 100%;
padding: 0 5%;
li{
width: 100%;
margin: 0 0 5% 0;
float: inherit;
&:nth-child(even){
float: inherit;
}
&:nth-last-child(1),
&:nth-last-child(2){
margin-bottom: 5%;
}
}
.imgBox{
text-align: center;
img{
width: 100%;
}
}
.txtBox{
padding: 0 0 20px 0;
h3{
padding: 20px 0 10px 0;
font-size: 16px;
position: relative;
z-index: 2;
}
p{
padding: 0 5% 10px 5%;
font-size: 14px;
}
}
.btnBox{
padding: 0 5%;
a{
width: 100%;
height: 50px;
span{
font-size: 18px;
}
}
}
}
}
}
/*------------------------------------------
links_04
------------------------------------------*/
.contents_bg_04{
}
#links_04{
.contents{
.boxLR{
width: 980px;
margin: 0 auto;
.imgBox{
float: left;
img{
position: relative;
left: -40px;
}
}
.txtBox{
width: 480px;
float: right;
}
dl{
dt{
padding: 14px 0 14px 60px;
margin-bottom: 10px;
font-size: 21px;
font-weight: bold;
color: #eb981a;
background: url("../img/icon_interview_q.png") no-repeat left center / 54px;
}
dd{
padding-bottom: 20px;
margin-bottom: 20px;
font-size: 18px;
line-height: 1.7;
background: url("../img/dot.png") repeat-x left bottom / 5px;
&:last-child{
background: none;
}
}
}
&:first-child{
padding-bottom: 20px;
}
&:last-child{
.imgBox{
float: right;
img{
left: inherit;
right: -40px;
}
}
.txtBox{
float: left;
}
dl{
dt:first-child{
width: 550px;
}
dd:last-child{
padding-bottom: 0;
margin-bottom: 0;
}
}
}
}
}
}
@media screen and (max-width: 768px) {
.contents_bg_04{
padding: 10% 0;
}
#links_04{
.contents{
.boxLR{
width: 100%;
padding: 0 5%;
.imgBox{
float: inherit;
text-align: center;
img{
position: relative;
left: inherit;
}
}
.txtBox{
width: 100%;
float: inherit;
}
dl{
dt{
padding: 10px 0 10px 50px;
font-size: 18px;
background: url("../img/icon_interview_q.png") no-repeat left center / 35px;
}
dd{
font-size: 14px;
line-height: 1.7;
background: url("../img/dot.png") repeat-x left bottom / 5px;
}
}
&:first-child{
padding-bottom: 20px;
}
&:last-child{
.imgBox{
float: inherit;
img{
left: inherit;
right: inherit;
}
}
.txtBox{
float: inherit;
}
dl{
dt:first-child{
width: 100%;
}
}
}
}
}
}
}
/*------------------------------------------
links_05
------------------------------------------*/
.contents_bg_05{
background: url("../img/bg_flow.png") repeat center / 8px;
}
#links_05{
padding: 40px 0;
ul{
width: 980px;
margin: 0 auto;
li{
width: 210px;
margin-right: 46px;
float: left;
&:last-child{
margin-right: 0;
.imgBox:after{
content: none;
}
}
.imgBox{
position: relative;
&:after{
content: "";
width: 16px;
height: 29px;
background: url("../img/arrow_03.png") no-repeat center / 16px;
display: block;
position: absolute;
bottom: 90px;
right: -30px;
}
}
p{
padding: 10px 10px 0 10px;
font-size: 16px;
}
}
}
}
@media screen and (max-width: 768px) {
.contents_bg_05{
}
#links_05{
padding: 10% 0;
ul{
width: 100%;
margin: 0 auto;
li{
width: 50%;
padding: 0 5%;
margin-right: 0;
float: left;
&:last-child{
margin-right: 0;
.imgBox:after{
content: none;
}
}
&:nth-child(even){
float: right;
}
.imgBox{
text-align: center;
img{
width: 100%;
}
&:after{
content: none;
}
}
p{
padding: 10px 10px 5% 10px;
font-size: 14px;
}
}
}
}
}
/*------------------------------------------
links_06
------------------------------------------*/
.contents_bg_06{
}
#links_06{
padding: 60px 0;
.contents{
width: 980px;
margin: 0 auto;
dl{
dt{
padding: 20px 0 20px 45px;
margin-bottom: 2px;
font-size: 20px;
font-weight: bold;
color: #FFF;
background: #ddc33d url("../img/icon_plus.png") no-repeat right 25px center / 24px;
border-radius: 4px;
cursor: pointer;
}
dd{
padding: 20px 70px;
margin-bottom: 2px;
font-size: 16px;
line-height: 1.9;
background: #eeeeef;
border-radius: 4px;
display: none;
}
}
}
}
@media screen and (max-width: 768px) {
.contents_bg_06{
}
#links_06{
padding: 10% 0;
.contents{
width: 100%;
padding: 0 5%;
dl{
dt{
padding: 20px 25px 20px 5%;
font-size: 14px;
background: #ddc33d url("../img/icon_plus.png") no-repeat right 10px center / 16px;
}
dd{
padding: 5%;
font-size: 14px;
}
}
}
}
}
/*------------------------------------------
links_07
------------------------------------------*/
.contents_bg_07{
}
#links_07{
padding: 60px 0 0 0;
.contents{
.boxLR{
width: 100%;
display: table;
.boxL{
width: 50%;
padding: 70px 50px 70px 0;
background: #a9927a;
display: table-cell;
.inner{
float: right;
p{
margin-bottom: 40px;
font-size: 16px;
color: #FFF;
&:last-child{
margin-bottom: 0;
}
strong{
font-size: 24px;
font-weight: bold;
}
}
}
}
.boxR{
width: 50%;
display: table-cell;
background: url("../img/img_company.jpg") no-repeat center / cover;
}
}
}
}
@media screen and (max-width: 768px) {
.contents_bg_07{
}
#links_07{
padding: 10% 0 0 0;
.contents{
.boxLR{
width: 100%;
display: block;
.boxL{
width: 100%;
padding: 5%;
display: block;
.inner{
float: inherit;
p{
margin-bottom: 10px;
font-size: 14px;
&:last-child{
margin-bottom: 0;
}
strong{
font-size: 16px;
}
}
}
}
.boxR{
width: 100%;
height: 200px;
display: block;
background: url("../img/img_company.jpg") no-repeat center / cover;
}
}
}
}
}
/* ------------------------------
トップへ戻る
------------------------------ */
#toTop{
position: fixed;
right: 0;
bottom: 0;
display: none;
z-index: 4;
}
#toTop a{
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
#toTop a:hover{
opacity: 0.8;
}
@media screen and (max-width: 768px) {
#toTop img{
width: 40px;
}
}