@charset "utf-8";

/* ####################################### */
/* Windowsビューポート指定 */
/* ####################################### */
@-ms-viewport {
width: device-width;
initial-scale: 1.0;
minimum-scale: 1.0;
}

/* ####################################### */
/* Windows用 タッチ操作無効 */
/* ####################################### */
/*html, body {
-ms-touch-action: none;
touch-action: none;
}*/

/* ####################################### */
/* 9食 */
/* mars inc. */
/* ####################################### */
/*------------------------初期化------------------------*/
/**
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
* http://cssreset.com
*/
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%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
/*body {line-height: 1;}*/
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
strong, b {
font-weight: bold;
}
sup {
font-size: .8em;
vertical-align: top;
}

body {
color: #000;
background-color: #fff;
font-size: 12pt; /* = 16px */
/*font-family: "メイリオ", Meiryo, sans-serif;*/
font-family: sans-serif;
text-align: center;
line-height: 1.8;
-webkit-text-size-adjust: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, .25);
}

a, a:link, a:visited {
/*color: #000;
text-decoration: none;
outline: none;*/
}
a:active, a:hover, a.hover {
/*color: #000;
text-decoration: none;
outline: none;*/
}

/*floatのクリア*/
.clbth:after {
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0;
}

/* All box-sizing */
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

/* 共有クラス */
.reset_fl {clear: both;}
.pos_left {float: left;}
.pos_right {float: right;}
.txt_left {text-align: left;}
.txt_right {text-align: right;}
.txt_center {text-align: center;}
.txt_small {font-size: 85%;}
.txt_bold {font-weight: bold;}
.txt_normal {font-weight: normal;}
.notice {color: #f00;}
.vmid {vertical-align: middle;}
.none_br {white-space: nowrap;}
.gothic {font-family : "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",Osaka,sans-serif !important;}
.mincho {font-family: "Hiragino Mincho Pro W3","ヒラギノ明朝 Pro W3","ＭＳ 明朝","ＭＳ Ｐ明朝",serif !important;}

/* ####################################### */
/* カラースキーム */
/* ####################################### */
/* ロゴカラー */
.clr_logo {
color: #000;
}
.bgclr_logo {
background-color: #000;
}

/* ####################################### */
/* ロゴ */
/* ####################################### */
#logo_nine-syoku {
position: absolute;
z-index: 1000;
overflow: hidden;
left: 1.25%;
top: 2.5%;
width: 60px;
height: 60px;
background: rgba(255, 255, 255, .75) url("../img/logo_kyusyoku.svg") center no-repeat;
background-size: 60px;
text-indent: 100%;
font-size: 1;
white-space: nowrap;
}

#logo_nine-syoku a {
display: block;
width: 100%;
height: 100%;
}

/* ####################################### */
/* メニュー */
/* ####################################### */
#nav_nine-syoku {
float: right;
width: 50%;
height: 100vh;
}

.wrap-our_site {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
}
.our_site {
position: relative;
width: 50%;
height: 50vh;
/*height: calc(100vh / 3);*/
color: #fff;
background-color: #000;
/*transition: all .3s ease;*/
}
.our_site:hover {
}
.btn_gm {
background: url("../img/bg_gm.jpg") center no-repeat;
background-size: cover;
}
.btn_tsukuta {
background: url("../img/bg_tsukuta.jpg") center no-repeat;
background-size: cover;
}
.btn_hashoku {
background: url("../img/bg_hashoku.jpg") center no-repeat;
background-size: cover;
}
.btn_yoshimuraya {
background: url("../img/bg_yoshimuraya.jpg") center no-repeat;
background-size: cover;
}

.our_site a {
display: block;
margin: auto;
width: 100%;
height: 100%;
color: #fff;
transition: all .5s ease;
}
.our_site a:hover {
background-color: rgba(0, 0, 0, .5);
border: .875em solid #fff;
}

.our_site a p {
position: absolute;
z-index: 10;
min-width: 200px;
left: 50%;
top: 50%;
width: 30%;
height: auto;
white-space: nowrap;
padding: .5em 0;
border: 1px solid #fff;
transform: translate(-50%, -50%);
}
.our_site a p:after {
display: block;
position: absolute;
z-index: 15;
content: "view website →";
text-transform: capitalize;
left: 0;
top: 0;
width: 100%;
height: 100%;
letter-spacing: .1em;
padding: .5em 0;
color: #333;
background-color: #fff;
opacity: 0;
transition: all .3s ease-out;
}
.our_site a:hover p:after {
opacity: 1;
}

/* ####################################### */
/* スライドショー */
/* ####################################### */
#large_photo {
float: left;
width: 50%;
height: 100vh;
}
#loading_photo {
position: absolute;
z-index: 900;
left: 0;
top: 0;
width: 50%;
height: 100vh;
background-color: #fff;
}

.slider div {
position: relative;
overflow: hidden;
width: 100%;
height: 100vh;
}

.slider div img {
position: absolute;
left: -50%;
top: 0;
margin: 0 auto;
width: auto;
height: 100vh;
}

/* ####################################### */
/* パンくずリスト */
/* ####################################### */

/* ####################################### */
/* ページの先頭へ */
/* ####################################### */

/* ####################################### */
/* フッター */
/* ####################################### */
footer {
}

#copyright_syoku {
display: none;
}

/* ####################################### */
/* スライドショー slick */
/* -フリック対応 */
/* ####################################### */
/* Slider */
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}

.slick-list {
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus {
outline: none;
}
.slick-list.dragging {
cursor: pointer;
cursor: hand;
}

.slick-slider .slick-track, .slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

.slick-track {
position: relative;
top: 0;
left: 0;
display: block;
}
.slick-track:before, .slick-track:after {
display: table;
content: '';
}
.slick-track:after {
clear: both;
}
.slick-loading .slick-track {
visibility: hidden;
}

.slick-slide {
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide {
float: right;
}
.slick-slide img {
display: block;
}
.slick-slide.slick-loading img {
display: none;
}
.slick-slide.dragging img {
pointer-events: none;
}
.slick-initialized .slick-slide {
display: block;
}
.slick-loading .slick-slide {
visibility: hidden;
}
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}

/* ####################################### */
/* Break Point 960px */
/* Responsive Tablet Display etc */
/* ####################################### */
@media screen and (max-width: 960px) {

} /* ----------------------------------------------------- End 960px */

/* ####################################### */
/* Break Point 640px */
/* Responsive SmartPhone Display etc */
/* ####################################### */
@media only screen and (max-width: 640px) {

} /* ----------------------------------------------------- End 0px-640px */

/* ####################################### */
/* PORTRAIT */
/* Responsive SmartPhone Display etc */
/* ####################################### */
@media only screen and (orientation: portrait),
only screen and (max-width: 600px) {
/* =========================== */
/* ロゴ */
/* =========================== */
#logo_nine-syoku {
position: static;
width: 100%;
height: 60px;
background: rgba(255, 255, 255, .75) url("../img/logo_kyusyoku.svg") center no-repeat;
background-size: 60px;
}

/* =========================== */
/* メニュー */
/* =========================== */
#nav_nine-syoku {
float: none;
width: 100%;
height: calc(100vh - 60px);
}

.wrap-our_site {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: column;
flex-direction: column;
}
.our_site {
width: 100%;
height: calc((100vh - 60px) / 4);
color: #fff;
background-color: #000;
transition: all .3s ease;
}

/* =========================== */
/* スライドショー */
/* =========================== */
#large_photo {
display: none;
float: none;
}
#loading_photo {
display: none;
}

} /* ----------------------------------------------------- End portrait */

/* ####################################### */
/* LANDSCAPE */
/* Responsive Display etc */
/* ####################################### */
@media only screen and (orientation: landscape) {
/* =========================== */
/* メニュー */
/* =========================== */
.our_site a:hover {
border: .5em solid #fff;
}

} /* ----------------------------------------------------- End landscape */

/* ####################################### */
/* Retina Display */
/* ####################################### */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {

} /* ----------------------------------------------------- End Retina */