@charset "utf-8";
/*
 * 
 * Copyright 2022 マサクリエイツ
 * https://www.masa-cr.com/
 *
 */
/* ===============================
=====================  初期設定  */
html {
	line-height: 1.75;
	font-size:15px;
	font-family: 'Noto Serif JP', "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	color:#000;
	background-color:transparent;
}
@media screen and (min-width: 560px), print {
    html {
        font-size:16px;
    }
}
blockquote {border:dotted 1px #999}
dl {border:solid 1px #ccc}
table {border-top:solid 1px #ddd}
caption {background: #999;color: #fff}
th {background: #f6f6f6;border-bottom:solid 1px #ddd}
td {background:#fff;border-bottom:solid 1px #ddd}
hr {color:#ccc;background-color:#ccc}
fieldset {border:1px solid #ccc}
a {text-decoration:underline;color:#06c}
a:visited {text-decoration:;color:#609}
a:hover {text-decoration:none;color:;}
a:active {text-decoration:underline;color:#f30}
button,input,select,textarea {font-family:sans-serif}



/* ===============================
===============  ローディング画面  */
#loading {
    width:100vw;
    height:100vh;
    transition:all 1s;
    background-color:#fff;
    position:fixed;
    top:0;
    left:0;
    z-index:9999;
}
.spinner {
    width:100px;
    height:100px;
    margin:auto;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color:#ddd;
    border-radius:100%;
    animation:sk-scaleout 1.0s infinite ease-in-out;
}
/* ローディングアニメーション */
@keyframes sk-scaleout {
    0% {
        transform:scale(0);
    } 100% {
        transform:scale(1.0);
        opacity:0;
    }
}
.loaded {
    opacity:0;
    visibility:hidden;
}


/* ===============================
====================  レイアウト  */
#container {overflow:hidden;}
.mxW {
    max-width:1440px;
    margin-left:auto;
    margin-right:auto;
}
.pdLR,
.pdLR-xl {
    padding-left:5%;
    padding-right:5%;
}
.pdT {
    padding-top:3em;
}
.pdB {
    padding-bottom:3em;
}
@media screen and (min-width: 560px), print {
    .pdT {
        padding-top:4em;
    }
    .pdB {
        padding-bottom:4em;
    }
}
@media screen and (min-width: 800px), print {
    .pdT {
        padding-top:5em;
    }
    .pdB {
        padding-bottom:5em;
    }
    .pdLR-xl {
        padding-left:0;
        padding-right:0;
    }
}
@media print {
    #container {
        width:1000px;
    }
}

/* ===============================
======================  header  */
#header {
    background:#fff;
    padding:1.5em 3%;
    text-align:center;
}
.headerLogo {
    margin:.5em 0 1.25em;
    font-size:1em;
    line-height:1;
}
ul.globalNav {
    margin:0;
    padding:0;
    list-style:none;
}
ul.globalNav li {
    display:inline-block;
    margin:0 .5em;
    padding:0;
}
ul.globalNav a {
    text-decoration:none;
    color:#000;
    display: inline-block;
    padding:.1em .2em;
}
@media screen and (min-width: 560px), print {
    ul.globalNav li {
        margin:0 1em;
    }
}
@media screen and (min-width: 800px), print {
    #header {
        padding:1.5em 3%;
    }
    #header .mxW {
        display:flex;
        align-items:center;
    }
    .headerLogo {
        margin:0;
    }
    #header nav {
        flex-grow: 1;
    }
    ul.globalNav {
        text-align:right;
    }
    ul.globalNav a {
        padding:.1em .5em;
        vertical-align: middle;
        -webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);
        box-shadow: 0 0 1px transparent;
        position: relative;
        background: #fff;
        -webkit-transition-property: color;
        transition-property: color;
        -webkit-transition-duration: 0.2s;
        transition-duration: 0.2s;
    }
    ul.globalNav a:before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: #222;
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transform-origin: 50%;
        transform-origin: 50%;
        -webkit-transition-property: transform;
        transition-property: transform;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }
    ul.globalNav a:hover, ul.globalNav a:focus, ul.globalNav a:active {
        color: #fff;
    }
    ul.globalNav a:hover:before, ul.globalNav a:focus:before, ul.globalNav a:active:before {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}


/* ===============================
======================  footer  */
#footer {
    background:#fff;
}
ul.navBtn {
    margin:0;
    padding:0;
    list-style:none;
    display:flex;
    align-items:center;
}
ul.navBtn li {
    flex-grow:1;
    text-align:center;
    margin:2em 5%;
}
ul.navBtn a {
    color:#000;
    border:solid 1px #333;
    padding:2em 1em;
    position: relative;
    display: block;
    text-align: center;
    text-decoration: none;
    outline: none;
    transition: all .3s;
    font-weight:bold;
}
ul.navBtn a::before,
ul.navBtn a::after,
ul.navBtn a span::before,
ul.navBtn a span::after {
    position: absolute;
    z-index: 2;
    content: '';
    width: 0;
    height: 0;
    border: 2px solid transparent;
    transition: all .3s;
    visibility: hidden;
    box-sizing: content-box;
}
ul.navBtn a::before {
    top: -2px;
    left: -2px;
    border-left-color: #000;
}
ul.navBtn a::after {
    bottom: -2px;
    right: -2px;
    border-right-color: #000;
}
ul.navBtn a span::before {
    bottom: -2px;
    left: -2px;
    border-bottom-color: #000;
}
ul.navBtn a span::after {
    top: -2px;
    right: -2px;
    border-top-color: #000;
}
ul.navBtn a:hover {
    /*color: #00cec9;*/
}
ul.navBtn a:hover::before,
ul.navBtn a:hover::after {
    height: 100%;
    visibility: visible;
}
ul.navBtn a:hover span::before,
ul.navBtn a:hover span::after {
    width: 100%;
    visibility: visible;
}
.address span,
.copyright a,
.copyright span {
    display:inline-block;
    margin-left:1em;
    margin-right:1em;
}
.copyright a {
    text-decoration:none;
    color:#000;
    margin-bottom:.5em;
    padding-left:.25em;
    padding-right:.25em;
}
.copyright a:hover {
    background:#f0f0f0;
}
#pagetop a {
    display:block;
    text-decoration:none;
    background:#fff;
    color:#000;
    text-align:center;
    padding:2em;
    line-height:1;
    font-size:.8em;
    border-top:solid 1px #222;
}
@media screen and (min-width: 800px), print {
    ul.navBtn {
        margin:0 5%;
    }
    #pagetop {
        position:fixed;
        right:0;
        bottom:2em;
        width:60px;
    }
    #pagetop a {
        padding:20px 0;
        border:solid 1px #333;
        border-right:none;
    }
    #pagetop a:hover {
        padding:15px 0 25px;
    }
}


/* ===============================
=====================  contents */
.pageTitleWrap {
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;
    padding:10em 1em;
}
.pageTitleWrap.noPhoto {
    padding:5em 1em;
    background:url('../images/debut_light.png') repeat;
}
.pageCompany .pageTitleWrap {
    background-image:url('../images/company_title_back.jpg');
}
.pageInquiry .pageTitleWrap {
    background-image:url('../images/inquiry_title_back.jpg');
}
.pageTitleWrap > div {
    background:#222;
    color:#fff;
    text-align:center;
    margin:auto;
    padding:3em 1em;
    letter-spacing:.15em;
    max-width:18em;
}
.pageTitle {
    margin:.2em 0 0;
    font-size:1.25em;
    font-weight:bold;
}
@media screen and (min-width: 800px), print {
    .pageTitleWrap {
        padding:14em 1em;
    }
    .pageTitleWrap > div {
        max-width:18em;
        padding:5em 1em;
    }
    .pageTitle {
        font-size:1.4em;
    }
}
#main {
    background:#fff;
}

::-webkit-input-placeholder {color:#999}
:-moz-placeholder {color:#999}
.formArea {
}
.formArea table {
    border-collapse:collapse;
    width:100%;
}
.formArea tr {
    border-bottom:solid 1px #ddd;
}
.formArea th,
.formArea td {
    vertical-align:middle;
    text-align:left;
    margin:0;
    padding:1em 0;
    border:none;
    background:#fff;
}
.formArea th {
    font-weight:bold;
    width:14em;
}
.formArea input[type="text"],
.formArea input[type="password"],
.formArea input[type="email"],
.formArea input[type="tel"],
.formArea select,
.formArea textarea {
    border:solid 1px #999;
    background:#fff;
    color:#222;
    padding:.6em .2em;
    box-shadow:none;
}
.formArea input[type="text"],
.formArea input[type="password"],
.formArea input[type="email"],
.formArea textarea {
    box-sizing:border-box;
    /*width:100%;*/
    max-width:100%;
}
.formArea textarea {
    width:100%;
}
.formArea button,
.formArea input[type="submit"],
.formArea input[type="reset"],
.formArea input[type="button"] {
	-webkit-appearance:none;
    padding:1.2em 1.5em;
    border:none;
    /*border-radius:.2em;*/
    background:#ddd;
    color:#222;
}
.formArea button:hover,
.formArea input[type="reset"]:hover,
.formArea input[type="button"]:hover {
    background:#ccc;
    color:#000;
}
.formArea input[type="submit"] {
    background:#0b3;
    color:#fff;
}
.formArea input[type="submit"]:hover {
    background:#0d3;
}
.formArea .inline-block.title {
	width:6.5em;
}
@media screen and (max-width: 799px) {
    .formArea th,
    .formArea td {
        display:block;
    }
    .formArea th {
        width:100%;
        padding-bottom:0;
    }
}
@media screen and (max-width: 559px) {
	.formArea .block input[type="text"],
	.formArea .block input[type="email"],
	.formArea .inline-block.title,
	.formArea .sm-width100 {
		width:100%!important;
	}
}
.mfp_element_submit, .mfp_element_reset, .mfp_element_button, button.mfp_next, button.mfp_prev {
	text-shadow:none;
}


/* ===============================
=====================  個別設定  */
#catchCopyWrap {
    width: 100vw;
    height: 100vh;
    position:relative;
}
.catchCopy {
}
.catchCopy h2 {
    width:100%;
    height:200px;
    position:absolute;
    top:0;
    bottom:0;
    margin:auto;
    font-size:1.5em;
    font-weight:normal;
    text-shadow:2px 2px 4px rgba(0,0,0,.9);
}
.catchCopy h2 img {
	width:85px;
}
.catchCopy .scroll {
    position:absolute;
    bottom:1em;
    width:100%;
    text-align:center;
    color:#fff;
    animation-name: up-down;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: .5s;
}
@keyframes up-down {
    0% {
        transform: translate(0,0px);
    }

    100% {
        transform: translate(0,-10px)
    }
}

.businessItem .itemImage {
    min-height:300px;
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
}
.businessItem.yunyu .itemImage {
    background-image:url('../images/business_yunyu.jpg');
}
.businessItem.mukuzai .itemImage {
    background-image:url('../images/business_mukuzai.jpg');
}
.businessItem.deck .itemImage {
    background-image:url('../images/business_deck.jpg');
}
.businessItem.shizai .itemImage {
    background-image:url('../images/business_shizai.jpg');
}
.businessItem.kitchen .itemImage {
    background-image:url('../images/business_kitchen.jpg');
}
.businessItem.kagu .itemImage {
    background-image:url('../images/business_kagu.jpg');
}
.businessItem .itemText {
    padding-bottom:5em;
	padding-top:1em;
}
.businessItem .itemText > div {
    margin-left:10%;
    margin-right:10%;
}
.businessItem .itemText .copy {
	color:#aaa;
	font-size:2em;
    text-align:right;
    margin-right:-.5em;
}
.businessItem .itemText .copy:first-letter {
	color:#c22;
}
@media screen and (min-width: 560px), print {
    .catchCopy h2 {
    }
    .catchCopy h2 br {
        display:none;
    }
}
@media screen and (min-width: 800px), print {
    .catchCopy h2 {
        font-size:1.8em;
        height:280px;
    }
    .catchCopy h2 img {
		width:100px;
	}
    #business + div {
        background:url('../images/debut_light.png') repeat center center #f0f0f0;
    }
    .businessItem {
        transition:all 1s;
        background:transparent;
        color:#222;
    }
    .businessItem:hover {
        background:#fff;
        color:#000;
    }
    .businessItem > div {
        display:flex;
        /*align-items:center;*/
        margin-bottom:1px;
        transition:all 1.25s;
        background:transparent;
        color:#222;
    }
    .businessItem .itemImage {
        min-height:600px;
        width:55%;
    }
    .businessItem .itemText {
        width:45%;
		padding-top:3em;
    }
	.businessItem .itemText > div {
	    max-width:30em;
	}
    .businessItem:nth-child(even) .itemImage {
        width:45%;
    }
    .businessItem:nth-child(even) .itemText {
        width:55%;
    }
	.businessItem .itemText .copy {
		font-size:2.25em;
	    margin-bottom:2em;
	}
}
@media screen and (min-width: 1000px), print {
}

dl.companyOutline {
    border:none;
    padding:0;
}
dl.companyOutline dt {
    float:left;
    width:5em;
    margin-bottom:1.5em;
}
dl.companyOutline dd {
    margin-left:7em;
    margin-bottom:1.5em;
}
@media screen and (min-width: 560px), print {
    dl.companyOutline dt {
        width:6em;
    }
    dl.companyOutline dd {
        margin-left:9em;
    }
}



/* ===============================
=====================  ボックス  */
/***** レスポンシブbox *****/
@media screen and (min-width: 800px), print {
	.box2-a, .box2-b {width:47.5%}/* 2等分 */
	.box3-a, .box3-b, .box3-c {width:30%}/* 3等分 */
	.box4-a, .box4-b, .box4-c, .box4-d {width:21.25%}/* 4等分 */
	.box64-a, .box46-b {width:57%}/* 6:4の6 */
	.box64-b, .box46-a {width:38%}/* 6:4の4 */
	.box73-a, .box37-b {width:66.5%}/* 7:3の7 */
	.box73-b, .box37-a {width:28.5%}/* 7:3の3 */
	.box2-a,
	.box3-a, .box3-b,
	.box4-a, .box4-b, .box4-c,
	.box64-a,
	.box46-a,
	.box73-a,
	.box37-a {float:left}
	.box2-b,
	.box3-c,
	.box4-d,
	.box64-b,
	.box46-b,
	.box73-b,
	.box37-b {float:right}
	.box3-a,
	.box4-a, .box4-b {margin-right:5%}
}

/***** grid *****/
.grid01, .grid02, .grid03, .grid04, .grid05, .grid06, .grid07, .grid08, .grid09, .grid10, .grid11 {
	float:left;
	margin:0;
	padding:0;
}
.grid01 {width:8.333%}
.grid02 {width:16.666%}
.grid03 {width:25%}
.grid04 {width:33.333%}
.grid05 {width:41.666%}
.grid06 {width:50%}
.grid07 {width:58.333%}
.grid08 {width:66.666%}
.grid09 {width:75%}
.grid10 {width:83.333%}
.grid11 {width:91.666%}
.gridFirst {margin-left:0;clear:left}



/* ===============================
=====================  共通設定  */
/***** フォントサイズ *****/
.fs_5l {font-size:1.5em}/* 24 */
.fs_4l {font-size:1.25em}/* 20 */
.fs_3l {font-size:1.1875em}/* 19 */
.fs_2l {font-size:1.125em}/* 18 */
.fs_l {font-size:1.0625em}/* 17 */
.fs_m {font-size:1em}/* 16 */
.fs_s {font-size:.9375em}/* 15 */
.fs_2s {font-size:.875em}/* 14 */
.fs_3s {font-size:.8125em}/* 13 */
.fs_4s {font-size:.75em}/* 12 */
@media screen and (min-width: 560px), print {
    .fs_5l {font-size:2em}/* 32 */
    .fs_4l {font-size:1.875em}/* 30 */
    .fs_3l {font-size:1.5em}/* 24 */
    .fs_2l {font-size:1.25em}/* 20 */
    .fs_l {font-size:1.125em}/* 18 */
}

/***** 文字色 *****/
.txc_01,a.txc_01 {}/*  */
.txc_02,a.txc_02 {}/*  */
.txc_03,a.txc_03 {}/*  */

/***** 背景 *****/
.bgc_01 {}/*  */
.bgc_02 {}/*  */
.bgc_03 {}/*  */

/***** 見出し *****/
.h_01 {
    text-align:center;
    font-size:1.5em;
    font-weight:bold;
    margin-bottom:2em;
}
.h_01::after {
    content:"";
    display:block;
    width:30px;
    height:6px;
    background:linear-gradient(to left, #222 50%, #c22 50%);
    margin:10px auto 0;
}
@media screen and (min-width: 560px), print {
    .h_01 {
        font-size:2em;
    }
    .h_01::after {
        width:40px;
        height:8px;
        margin:20px auto 0;
    }
}
.h_02 {}
.h_03 {}

/***** ボタン *****/
.btn_01 a, a.btn_01,
.btn_02 a, a.btn_02,
.btn_03 a, a.btn_03 {
    display:inline-block;
    text-decoration:none;
    line-height:1.4;
    position:relative;
}
.btn_01 a, a.btn_01 {}
.btn_02 a, a.btn_02 {}
.btn_03 a, a.btn_03 {}

/***** リスト *****/
.list_01 {}
.list_02 {}
.list_03 {}

/***** その他 *****/
.inline-block {
    display:inline-block;
}