@charset "utf-8";
/*
Theme Name: r_e ad design
Theme URI: null
Description: Description
Author: 81bridge - WXJ
Version: 1.0
*/
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700,700i&display=swap&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese');
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,600&display=swap');
/*------------------------------------------------------------
	デフォルトスタイル
------------------------------------------------------------*/
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, font, 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 {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	outline: 0;
	font-size: 1em;
}
html {
	font-size: 62.5%;
}
body, table, input, textarea, select, option {
	font-family:"游ゴシック体", "Yu Gothic", YuGothic, 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}
.en {
    font-weight: 300;
    font-family: 'Source Sans Pro', sans-serif;
}
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
:focus {
	outline: 0;
}
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
img {
	vertical-align: top;
	max-width: 100%;
}
a,
a:link {
	color: #282828;
	text-decoration: none;
    -webkit-transition: all ease .3s;
    transition: all ease .3s;
}
a:visited {
	color: #282828;
}
a:hover {
	color: #282828;
	opacity: 0.7;
}
a:active {
	color: #282828;
}
/*------------------------------------------------------------
	レイアウト
------------------------------------------------------------*/
body {
	min-width: 1000px;
	color: #282828;
	font-size: 1.455rem;
    font-weight: 500;
	line-height: 1.7;
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
    background-color: #FFF;
}
#container {
	text-align: left;
}
#main {
    padding: 300px 0 94px;
    position: relative;
	background-color: #FFF;
}
a[href^="tel:"] {
	cursor: default;
	pointer-events: none;
}
@media screen and (min-width: 768px) {
	.sp {
		display: none !important;
	}
}
@media screen and (max-width: 767px) {
	body {
		min-width: inherit;
		font-size: 1.6rem;
	}
	body.fixed {
        width: 100%;
        position: fixed;
        left: 0;
        top: 0;
        overflow: auto;
	}
	a:hover,
	a:hover img {
		opacity: 1 !important;
	}
	.pc {
		display: none !important;
	}
	a[href^="tel:"] {
		cursor: pointer;
		pointer-events: auto;
	}
    #main {
        padding: 62px 0 66px;
    }
}
/*------------------------------------------------------------
	ヘッダー
------------------------------------------------------------*/
.leadBox {
    position: relative;
}
#gHeader {
    padding: 37px 30px 15px 40px;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;
    -webkit-transition: all ease .3s;
    transition: all ease .3s;
    z-index: 100;
}
#gHeader.fix {
    position: fixed;
    background: rgba(255,255,255,.9);
}
#gHeader h1 {
    width: 183px;
    float: left;
}
#gHeader h1 a {
    display: block;
    position: relative;
}
#gHeader h1 a:before {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    content: "";
}
#gHeader h1 embed {
    width: 100%;
}
#gHeader h1 a {
    opacity: 1;
    -webkit-transition: none;
    transition: none;
}
#gHeader.opa h1 a {
    opacity: 0;
}
#gHeader.fix h1 a {
    opacity: 1;
    -webkit-transition: all ease .3s;
    transition: all ease .3s;
}
@media screen and (max-width: 767px) {
    #gHeader {
        padding: 15px 15px 10px;
    }
    #gHeader.fix {
        background: #FFF;
    }
    #gHeader h1 {
        width: 122px;
    }
    #gHeader .menu {
        width: 28px;
        position: absolute;
        right: 12px;
        top: 14px;
    }
}
/*------------------------------------------------------------
	gNavi
------------------------------------------------------------*/
#gNavi {
    margin-top: -11px;
    float: right;
}
#gNavi ul {
    align-items: center;
    -webkit-align-items: center;
}
#gNavi li {
    margin-left: 40px;
}
#gNavi li a {
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    font-family: 'Source Sans Pro', sans-serif;
}
#gNavi li:not(.ins) a {
    opacity: 1;
}
@media all and (min-width: 768px) {
    #gNavi li a:hover {
        color: #969696 !important;
    }
}
#gNavi li.on a {
    color: #969696 !important;
}
#gHeader.fix #gNavi li a {
    color: #282828;
}
#gNavi li.ins {
    margin: 5px 0 0 32px;
    width: 20px;
    position: relative;
}
#gNavi li.ins a {
    display: block;
    position: relative;
}
#gNavi li.ins a:before {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    z-index: 5;
}
#gNavi li.ins .white {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    visibility: hidden;
}
#gHeader.fix #gNavi li.ins .white {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all ease .3s;
    transition: all ease .3s;
}
#gNavi li.ins .black {
    opacity: 1;
    visibility: visible;
}
#gHeader.fix #gNavi li.ins .black {
    opacity: 1;
    visibility: visible;
    -webkit-transition: all ease .3s;
    transition: all ease .3s;
}
@media screen and (max-width: 767px) {
    #gNavi {
        display: none;
        margin-top: 0;
        padding: 176px 0;
        float: none;
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        overflow: auto;
        background: #969696;
        box-sizing: border-box;
        z-index: 1000;
    }
    #gNavi .logo {
        width: 122px;
        position: absolute;
        left: 15px;
        top: 16px;
    }
    #gNavi .logo a {
        display: block;
        position: relative;
    }
    #gNavi .logo a:before {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        content: "";
    }
    #gNavi .close {
        width: 27px;
        position: absolute;
        right: 12px;
        top: 16px;
    }
    #gNavi ul {
        margin-bottom: 50px;
        display: block;
    }
    #gNavi li {
        margin-left: 0;
        text-align: center;
    }
    #gNavi li:not(.ins):not(.home) a {
        padding: 21px 0 21px 40px;
        width: 150px;
        display: inline-block;
        position: relative;
        color: #FFF !important;
        font-size: 3.7rem;
        font-weight: 300 !important;
        letter-spacing: 0.1em;
        text-align: left;
        vertical-align: top;
        font-family: 'Source Sans Pro', sans-serif;
    }
    #gNavi li:not(.ins):not(.home) a:before {
        width: 25px;
        height: 1px;
        position: absolute;
        left: 0;
        top: 50%;
        background: #FFF;
        content: "";
    }
    #gNavi li.home {
        margin-top: 38px;
    }
    #gNavi li.home a {
        padding: 17px 0;
        display: block;
    }
    #gNavi li.ins {
        margin: 5px 0 0;
        width: auto;
        position: relative;
    }
    #gNavi li.ins a {
        padding: 17px 0;
        display: block;
    }
    #gNavi li.ins .white {
        margin: 0 auto;
        width: 16px;
        position: static;
        left: auto;
        top: auto;
        opacity: 1;
        visibility: visible;
    }
    #gHeader.fix #gNavi li.ins .white {
        opacity: 1;
        visibility: visible;
    }
    #gNavi li.ins .black {
        display: none;
    }
}
/*------------------------------------------------------------
	フッター
------------------------------------------------------------*/
#gFooter {
    padding-bottom: 30px;
    position: relative;
    background: #FFF;
}
#gFooter .pageTop {
    margin: 0 auto 66px;
    width: 26px;
}
#gFooter .fBox {
    align-items: flex-end;
    -webkit-align-items: flex-end;
}
#gFooter .fNavi li {
    margin-right: 44px;
}
#gFooter .fNavi li a {
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    font-weight: 600;
    opacity: 1;
    font-family: 'Source Sans Pro', sans-serif;
}
@media all and (min-width: 768px) {
    #gFooter .fNavi li a:hover {
        color: #969696;
    }
}
#gFooter .copyright {
    font-size: 1.2rem;
    font-weight: 300;
    letter-spacing: 0.04em;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    -webkit-atransform-origin: right top;
    transform-origin: right top;
    font-family: 'Source Sans Pro', sans-serif;
}
@media screen and (max-width: 767px) {
    #gFooter {
        padding-bottom: 87px;
    }
    #gFooter .pageTop {
        margin: 0 0 0 -11px;
        width: 22px;
        position: absolute;
        left: 50%;
        bottom: 24px;
    }
    #gFooter .fBox {
        margin: 0 10px;
        display: block;
    }
    #gFooter .fNavi {
        margin: 0 0 30px 10px;
        justify-content: center !important;
        -webkit-justify-content: center !important;
    }
    #gFooter .fNavi li {
        margin: 0 25px;
    }
    #gFooter .fNavi li a {
        font-size: 1.4rem;
        font-weight: bold;
    }
    #gFooter .ins {
        margin-bottom: 9px;
        text-align: center;
    }
    #gFooter .copyright {
        font-size: 1.2rem;
        letter-spacing: 0.06em;
        -webkit-transform: scale(0.7);
        transform: scale(0.7);
        text-align: center;
        -webkit-atransform-origin: center center;
        transform-origin: center center;
    }
}
/*------------------------------------------------------------
	書式設定
------------------------------------------------------------*/
/* テキストの位置 */
.taLeft { text-align: left !important; }
.taCenter { text-align: center !important; }
.taRight { text-align: right !important; }
/* フォントの太さ */
.fwNormal { font-weight: normal !important; }
.fwBold { font-weight: bold !important; }
/*------------------------------------------------------------
	汎用スタイル
------------------------------------------------------------*/
	* html .clearfix {
		zoom: 1;
	}

	*+html .clearfix {
		zoom: 1;
	}
.clearfix:after {
	height: 0;
	visibility: hidden;
	content: ".";
	display: block;
	clear: both;
}
/*------------------------------------------------------------
	flex
------------------------------------------------------------*/
.flex {
	display: flex;
		display: -webkit-flex;
	justify-content: space-between;
		-webkit-justify-content: space-between;
	flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
}
.flex.left {
	justify-content: flex-start;
		-webkit-justify-content: flex-start;
}
.flex.center {
	justify-content: center;
		-webkit-justify-content: center;
}
.flex.right {
	justify-content: flex-end;
		-webkit-justify-content: flex-end;
}
/*------------------------------------------------------------
	fadeIn
------------------------------------------------------------*/
.fadeIn {
    opacity: 0;
    -webkit-transition: all ease .6s;
    transition: all ease .6s;
}
.fadeIn.on {
    opacity: 1;
}
/*------------------------------------------------------------
	content
------------------------------------------------------------*/
.content {
    margin: 0 auto;
    width: 920px;
}
/*------------------------------------------------------------
	headLine01
------------------------------------------------------------*/
.headLine01 {
	margin-bottom: 66px;
    font-size: 4.6rem;
    font-weight: 300;
    font-style: normal;
    letter-spacing: 0.1em;
    line-height: 1.5;
    font-family: 'Source Sans Pro', sans-serif;
}
/*------------------------------------------------------------
	headLine02
------------------------------------------------------------*/
.headLine02 {
	margin-bottom: 36px;
	font-size: 2.2rem;
	font-weight: bold;
    letter-spacing: 0.1em;
    text-align: center;
}
.headLine02 .en {
    display: block;
    color: #969696;
    font-size: 1.6rem;
    font-weight: normal;
    letter-spacing: 0.1em;
    font-weight: 600;
}
@media all and (max-width: 767px) {
    /*------------------------------------------------------------
        content
    ------------------------------------------------------------*/
    .content {
		margin: 0 33px;
		width: auto;
    }
    /*------------------------------------------------------------
        headLine01
    ------------------------------------------------------------*/
    .headLine01 {
		margin-bottom: 38px;
		font-size: 3.8rem;
		text-align: center;
    }
    /*------------------------------------------------------------
        headLine02
    ------------------------------------------------------------*/
    .headLine02 {
        margin-bottom: 20px;
        font-size: 2.2rem;
        letter-spacing: 0.1em;
    }
    .headLine02 .en {
        margin-top: 4px;
        letter-spacing: 0.1em;
    }
}
/*------------------------------------------------------------
	fancybox
------------------------------------------------------------*/
.fancybox-bg {
    opacity: 1 !important;
    background: #FFF;
}
.popup {
    display: none;
    width: 100%;
    position: relative;
}
.popup .close {
    width: 32px;
    position: fixed;
    right: 40px;
    top: 40px;
}
.popup .inner {
    margin: 0 auto;
    width: 541px;
    position: relative;
}
.popup .inner p {
    margin-top: 24px;
    text-align: center;
}
.popup .arrow li {
    margin-top: -26px;
    width: 12px;
    position: absolute;
    top: 50%;
}
.popup .arrow li.prev {
    left: -80px;
}
.popup .arrow li.next {
    right: -80px;
}
.popup .slideBox .slick-dots {
    width: 8px;
	height: 100%;
	position: absolute;
	left: -160px;
	top: 0;
	text-align: center;
}
.popup .slideBox .slick-dots li {
    margin-bottom: 22px;
	width: 8px;
    min-width: inherit;
    height: 8px;
    border-radius: 50%;
    border: 1px solid #282828;
    box-sizing: border-box;
	cursor: pointer;
}
.popup .slideBox .slick-dots li:before {
	display: none;
}
.popup .slideBox .slick-dots li.slick-active {
    background: #282828;
}
.popup .slideBox .slick-dots li button {
	display: none !important;
}
@media screen and (max-width: 767px) {
    .popup {
        display: none;
    }
    .popup .close {
        width: 28px;
        position: fixed;
        right: 12px;
        top: 15px;
    }
    .popup .inner {
        width: auto;
    }
    .popup .inner .photo {
        margin: 70px 0 90px;
    }
    .popup .inner p {
        margin: 0 -20px;
        font-size: 1.2rem;
    }
    .popup .arrow {
        width: 72%;
        max-width: 240px;
        position: absolute;
        left: 50%;
        bottom: 75px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    .popup .arrow li {
        margin-top: 0;
        width: 7px;
        top: 0;
    }
    .popup .arrow li.prev {
        left: 0;
    }
    .popup .arrow li.next {
        right: 0;
    }
    .popup .slideBox .slider {
        margin: 70px 0 90px;
    }
    .popup .slideBox .slick-dots {
        width: 100%;
        height: auto;
        left: 50%;
        top: auto;
        bottom: -64px;
        text-align: center;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    .popup .slideBox .slick-dots li {
        margin: 0 9px;
        display: inline-block;
        vertical-align: top;
        width: 8px;
        height: 8px;
        min-width: inherit;
    }
}
/*------------------------------------------------------------
	wp-pagenavi
------------------------------------------------------------*/
.wp-pagenavi {
    clear: both;
    text-align: center;
}
.wp-pagenavi a,
.wp-pagenavi span {
    margin: 0 15px;
    display: inline-block;
    text-decoration: none;
    font-size: 2.3rem;
    font-weight: 300;
	font-family: 'Source Sans Pro';
    opacity: 1;
}
.wp-pagenavi a:hover,
.wp-pagenavi span.current {
    color: #969696;
}
.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink {
    display: none;
}
.wp-pagenavi .first,
.wp-pagenavi .last,
.wp-pagenavi .pages,
.wp-pagenavi .extend {
    display: none;
}
@media screen and (max-width: 767px) {
    .wp-pagenavi a,
    .wp-pagenavi span {
        margin: 0 10px;
        font-size: 1.7rem;
    }
    .wp-pagenavi a:hover {
        color: #282828;
    }
}
/*------------------------------------------------------------
	comWorksUl
------------------------------------------------------------*/
.comWorksUl {
    margin: -81px 0 75px;
}
.comWorksUl li {
    margin-top: 80px;
    width: 250px;
    opacity: 0;
    -webkit-transition: all ease .6s;
    transition: all ease .6s;
}
.comWorksUl.on li {
    opacity: 1;
}
.comWorksUl li:not(:nth-child(3n)) {
    margin-right: 85px;
}
@media screen and (max-width: 767px) {
    .comWorksUl {
        margin: -40px 4px 40px;
        justify-content: space-between !important;
        -webkit-justify-content: space-between !important;
    }
    .comWorksUl li {
        margin-top: 38px;
        width: 44%;
        text-align: center;
    }
    .comWorksUl li:not(:nth-child(3n)) {
        margin-right: 0;
    }
}
/*------------------------------------------------------------
	mainVisual
------------------------------------------------------------*/
.mainVisual {
    position: relative;
    overflow: hidden;
}
.mainVisual:before {
    width: calc(100% - 290px);
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    background: url(img/index/main_visual_bg.jpg) no-repeat center center;
    background-size: cover;
    content: "";
    z-index: -1;
}
.mainVisual:after {
    display: none;
    width: calc((100% - 1094px) / 2);
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #FFF;
    content: "";
}
.mainVisual .inner {
    margin-left: 115px;
    height: 100vh;
    position: relative;
    z-index: 1;
}
.mainVisual .keyBox {
    margin-top: -77px;
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.mainVisual .keyBox h2 {
    margin-bottom: 66px;
    font-size: 3.18rem;
    letter-spacing: 0.03em;
    line-height: 1.5;
}
.mainVisual .keyBox h2 span {
    display: inline-block;
    position: relative;
    line-height: 1.5;
    opacity: 0;
}
.mainVisual .keyBox h2 span:after {
    width: 100%;
    padding-top: 100%;
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    display: block;
}
.mainVisual .keyBox h2 .ttl01 embed {
    width: 418px;
}
@media all and (-ms-high-contrast:none){
    .mainVisual .keyBox h2 embed {
        height: 29px;
    }
}
.mainVisual .keyBox h2 .ttl01.show {
    -moz-animation: copyFade1 1s ease 1 forwards; 
    -webkit-animation: copyFade1 1s ease 1 forwards;
    animation: copyFade1 1s ease 1 forwards; 
}
.mainVisual .keyBox h2 .ttl02 embed {
    width: 338px;
}
.mainVisual .keyBox h2 .ttl02.show {
    -moz-animation: copyFade1 1s ease 1 forwards; 
    -webkit-animation: copyFade1 1s ease 1 forwards; 
    animation: copyFade1 1s ease 1 forwards; 
    animation-delay: .5s;
    -webkit-nimation-delay: .5s;
}
.mainVisual .keyBox p {
    margin-left: 12px;
    opacity: 0;
    position: relative;
}
.mainVisual .keyBox p:after {
    width: 100%;
    padding-top: 100%;
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    display: block;
}
.mainVisual .keyBox p embed {
    width: 119px;
}
@media all and (-ms-high-contrast:none){
    .mainVisual .keyBox p embed {
        height: 118px;
    }
}
.mainVisual .keyBox p.show {
    -moz-animation: copyFade3 1s ease 1.2s 1 forwards;
    -webkit-animation: copyFade3 1s ease 1.2s 1 forwards;
    animation: copyFade3 1s ease 1.2s 1 forwards;
}
.mainVisual .scroll {
    padding-left: 5px;
    width: 40px;
    height: 52px;
    position: absolute;
    left: 0;
    bottom: 33px;
    text-align: left;
    box-sizing: border-box;
}
.mainVisual .scroll a {
    display: block;
}
.mainVisual .scroll img {
    width: 10px;
}
@-moz-keyframes copyFade1 {
	0% {
		opacity: 0;
		-moz-transform: translateX(-20px);
		transform: translateX(-20px); }
	100% {
		opacity: 1;
		-moz-transform: translateX(0);
		transform: translateX(0); } }

@-webkit-keyframes copyFade1 {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-20px);
		transform: translateX(-20px); }
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0); } }

@keyframes copyFade1 {
	0% {
		opacity: 0;
		-moz-transform: translateX(-20px);
		-ms-transform: translateX(-20px);
		-webkit-transform: translateX(-20px);
		transform: translateX(-20px); }
	100% {
		opacity: 1;
		-moz-transform: translateX(0);
		-ms-transform: translateX(0);
		-webkit-transform: translateX(0);
		transform: translateX(0); } }

@-moz-keyframes copyFade2 {
	0% {
		opacity: 0;
		-moz-transform: translateX(40px);
		transform: translateX(40px); }
	100% {
		opacity: 1;
		-moz-transform: translateX(0);
		transform: translateX(0); } }

@-webkit-keyframes copyFade2 {
	0% {
		opacity: 0;
		-webkit-transform: translateX(40px);
		transform: translateX(40px); }
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0); } }

@keyframes copyFade2 {
	0% {
		opacity: 0;
		-moz-transform: translateX(40px);
		-ms-transform: translateX(40px);
		-webkit-transform: translateX(40px);
		transform: translateX(40px); }
	100% {
		opacity: 1;
		-moz-transform: translateX(0);
		-ms-transform: translateX(0);
		-webkit-transform: translateX(0);
		transform: translateX(0); } }

@-moz-keyframes copyFade3 {
	0% {
		opacity: 0;
		-moz-transform: translateY(20px);
		transform: translateY(20px); }
	100% {
		opacity: 1;
		-moz-transform: translateY(0);
		transform: translateY(0); } }

@-webkit-keyframes copyFade3 {
	0% {
		opacity: 0;
		-webkit-transform: translateY(20px);
		transform: translateY(20px); }
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0); } }

@keyframes copyFade3 {
	0% {
		opacity: 0;
		-moz-transform: translateY(20px);
		-ms-transform: translateY(20px);
		-webkit-transform: translateY(20px);
		transform: translateY(20px); }
	100% {
		opacity: 1;
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		-webkit-transform: translateY(0);
		transform: translateY(0); } }
@media screen and (max-width: 767px) {
    .mainVisual:before {
        width: 100%;
        height: calc(100vh - 217px);
        right: 0;
        top: auto;
        bottom: 60px;
        background-image: url(img/index/sp_main_visual_bg.jpg);
    }
    .mainVisual:after {
        width: 100%;
        height: 154px;
    }
    .mainVisual .inner {
        margin-left: 0;
        height: 100vh;
    }
    .mainVisual .keyBox {
        margin-top: 0;
        position: static;
        left: auto;
        top: auto;
        -webkit-transform: none;
        transform: none;
    }
    .mainVisual .keyBox h2 {
        margin-bottom: 0;
        position: absolute;
        left: 0;
        top: 141px;
        line-height: 1;
    }
    .mainVisual .keyBox h2 span {
        opacity: 1;
        line-height: 1;
    }
    .mainVisual .keyBox p {
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 82px;
        color: #FFF;
        font-size: 1.4rem;
        letter-spacing: 0.05em;
        opacity: 1;
        text-align: center;
    }
    .mainVisual .keyBox h2 .ttl01 embed {
        width: 260px;
    }
    .mainVisual .keyBox h2 .ttl02 embed {
        width: 210px;
    }
    .mainVisual .keyBox p embed {
        width: 274px;
    }
    .mainVisual .scroll {
        width: 100%;
        height: auto;
        bottom: 0;
        text-align: center;
        background: #FFF;
    }
    .mainVisual .scroll a {
        padding: 17px 0;
        display: block;
    }
    .mainVisual .scroll img {
        width: 5px;
    }
}
/*------------------------------------------------------------
	mailForm
------------------------------------------------------------*/
.mailForm {
	width: 450px;
}
.mailForm .comTable {
	margin-bottom: 20px;
	width: 100%;
	border-collapse: collapse;
}
.mailForm .comTable th,
.mailForm .comTable td {
	padding: 3px 5px 3px 0;
	width: 100%;
	font-size: 1.36rem;
	font-weight: 500;
	display: block;
	box-sizing: border-box;
}
.mailForm .comTable td {
	padding-bottom: 31px;
}
.mailForm .comTable input[type="text"],
.mailForm .comTable input[type="email"],
.mailForm .comTable input[type="tel"],
.mailForm .comTable textarea {
	padding: 3px 3px 4px;
    width: 100%;
    border-radius: 0;
	border: 1px solid #7F7F7F;
	-webkit-appearance: none;
	box-sizing: border-box;
}
.mailForm .comTable .must {
	margin: 4px 0 0 6px;
	padding: 2px 3px;
	font-size: 1rem;
	line-height: 1.2;
	color: #FFF;
	font-weight: 500;
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
	background-color: #E50012;
}
.mailForm .comTable textarea {
	height: 312px;
}
.wpcf7c-conf {
    background-color: #fff !important;
    color: #282828 !important;
    border: none !important;
    -webkit-box-shadow: 0 0 0 1000px white inset;
}
.mailForm .comTable textarea.wpcf7c-conf {
	height: 150px;
}
.mailForm .submit li {
	width: 216px;
	display: inline-block;
}
.mailForm .submit .retry {
	margin-right: 10px;
}
.mailForm .submit .send .ajax-loader {
	display: none;
}
.mailForm .submit input {
	padding: 17px;
	width: 100%;
	text-align: center;
    color: #FFF;
    font-size: 1.6rem;
	letter-spacing: 1px;
    cursor: pointer;
    border: none;
    border-radius: 0;
	-webkit-appearance: none;
    box-sizing: border-box;
    -webkit-transition: all ease .3s;
    transition: all ease .3s;
}
.mailForm .submit input:hover {
	opacity: 0.7;
}
.mailForm .submit .send input {
	border: 1px solid #9E9C9C;
	background-color: #595757;
}
.mailForm .submit .retry input {
	color: #282828; 
	letter-spacing: 0.5px;
	border: 1px solid #828181;
	background-color: #FFF;
}
.custom-wpcf7c-confirmed {
    margin-top: -120px;
    padding-top: 120px;
}
.custom-wpcf7c-confirmed .comTable .must {
    display: none;
}
div.wpcf7-validation-errors,
div.wpcf7-acceptance-missing {
    border: 2px solid #ff0000 !important;
}
div.wpcf7-response-output {
    margin: 2em 5px 0 0 !important;
    padding: 0.2em 0.1em 0.2em 0.3em !important;
    border: 2px solid #ff0000 !important;
    text-align: center;
}
@media all and (-ms-high-contrast:none) {
	.mailForm .comTable {
		margin-bottom: 27px;
	}
	.mailForm .comTable th,
	.mailForm .comTable td {
		text-align: left;
	}
	.mailForm .comTable td {
		padding-bottom: 31px;
	}
	.mailForm .comTable input[type="text"],
	.mailForm .comTable input[type="email"],
	.mailForm .comTable input[type="tel"],
	.mailForm .comTable textarea {
		padding: 3px;
	}
	.mailForm .comTable .must {
		margin: 4px 0 0 8px;
		padding: 3px 4px 0 3px;
		-webkit-transform: scale(0.9);
		transform: scale(0.9);
	}
	.mailForm .submit input {
		padding: 19px 17px 15px;
	}
}
@media all and (max-width: 767px) {
	.mailForm {
        width: auto;
        overflow: hidden;
	}
	.mailForm .comTable {
		margin-bottom: 15px;
	}
	.mailForm .comTable th,
	.mailForm .comTable td {
		padding: 3px 2px 2px 4px;
		font-size: 1.3rem;
	}
	.mailForm .comTable td {
		padding: 0 1px 16px 3px!important;
	}
	.mailForm .comTable input[type="text"],
	.mailForm .comTable input[type="tel"],
	.mailForm .comTable textarea {
		padding: 3px 3px 4px;
		border: 1px solid #6E6B6A;
	}
	.mailForm .comTable .must {
		margin: 4px 0 0 2px;
        padding: 2px 3px 0;
        letter-spacing: 1px;
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
        -webkit-transform-origin: center center;
        transform-origin: center center;
	}
	.mailForm .comTable textarea {
		height: 212px;
	}
	.mailForm .submit {
        margin: 0 auto;
        padding: 0 3px;
        font-size: 0;
    }
	.mailForm .submit li {
		width: 49%;
		display: inline-block;
	}
	.mailForm .submit .retry {
        margin: 0 2% 0 0;
	}
	.mailForm .submit input {
		padding: 10px 5px 10px;
		width: 100%;
		font-size: 1.2rem;
		letter-spacing: 0;
	}
	.mailForm .submit input:hover {
		opacity: 1;
	}
	.mailForm .submit .send input {
		background-color: #3E3A39;
	}
	.mailForm .submit .retry input {
		color: #282828; 
		letter-spacing: 0.5px;
		border: 1px solid #828181;
		background-color: #FFF;
	}
    .custom-wpcf7c-confirmed {
        margin-top: -80px;
        padding-top: 80px;
    }
    div.wpcf7-validation-errors,
    div.wpcf7-acceptance-missing {
        font-size: 1.2rem;
    }
    div.wpcf7-response-output {
        margin: 2em 3px 0 3px !important;
        padding: 0.2em 0.1em !important;
        font-size: 1.2rem;
    }
}
/*------------------------------------------------------------
	top
------------------------------------------------------------*/
#top .serviceUl {
    margin: -5px 0 144px;
}
#top .serviceUl li {
    padding: 62px 0 0;
    width: 246px;
    background: url(img/common/icon01.png) no-repeat left top;
    background-size: 35px 35px;
    box-sizing: border-box;
    -webkit-transition: all ease .6s;
    transition: all ease .6s;
    opacity: 0;
    visibility: hidden;
}
#top .serviceUl.on li {
    opacity: 1;
    visibility: visible;
}
#top .serviceUl li:not(:nth-child(3n)) {
    margin-right: 91px;
}
#top .serviceUl li .mark {
    margin: 0 auto 24px;
    width: 119px;
}
#top .serviceUl li p {
    margin: 0 -5px;
    text-align: justify;
    text-justify:inter-ideograph;
}
#top .moreBox {
    text-align: center;
}
#top .moreBox p {
    margin-bottom: 56px;
    position: relative;
    font-weight: 300;
    letter-spacing: 0.05em;
    font-family: 'Source Sans Pro', sans-serif;
}
#top .moreBox p:before {
    margin-top: 4px;
    width: 1px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 100%;
    background: #282828;
    content: "";
}
#top .moreBtn {
    margin: 0 auto;
    width: 140px;
}
#top .moreBtn a {
    padding: 5px;
    display: block;
    color: #FFF;
    font-size: 1.8rem;
    letter-spacing: 0.06em;
    border-radius: 5px;
    background: #282828;
    font-weight: 600;
    font-family: 'Source Sans Pro', sans-serif;
}
@media screen and (max-width: 767px) {
    #top .serviceUl {
        margin: -11px 15px 105px;
        display: block;
    }
    #top .serviceUl li {
        padding: 0;
        width: auto;
        background: none;
        box-sizing: border-box;
    }
    #top .serviceUl li:not(:nth-child(3n)) {
        margin-right: 0;
    }
    #top .serviceUl li:not(:last-child) {
        margin-bottom: 82px;
    }
    #top .serviceUl li .mark {
        margin: 0 auto 20px;
        width: 124px;
    }
    #top .comWorksUl li:nth-child(9) {
        display: none;
    }
    #top .serviceUl li p {
        margin: 0;
    }
    #top .moreBox p {
        margin-bottom: 47px;
        font-size: 1.2rem;
    }
    #top .moreBox p:before {
        margin-top: 3px;
        height: 35px;
    }
    #top .moreBtn {
        margin: 0 auto;
        width: 39%;
    }
    #top .moreBtn a {
        padding: 1px 5px;
        font-size: 1.5rem;
        line-height: 34px;
        border-radius: 3px;
    }
}
/*------------------------------------------------------------
	about
------------------------------------------------------------*/
#about p {
    line-height: 2.1;
}
#about .imgArea {
    position: relative;
}
#about .topText {
    margin-bottom: 30px;
}
#about .imgArea {
    margin-bottom: 140px;
    padding-right: 180px;
}
#about .imgArea dl {
    margin-bottom: 46px;
    line-height: 2.1;
}
#about .imgArea dt {
    float: left;
    clear: left;
}
#about .imgArea dd {
    padding-left: 4em;
}
#about .imgArea .tableUl li {
    width: 100%;
    display: table;
}
#about .imgArea .tableUl li span {
    display: table-cell;
    line-height: 2.15;
    vertical-align: top;
}
#about .imgArea .tableUl li .ttl {
    width: 50px;
    white-space: nowrap;
}
#about .imgArea .peo {
    width: 160px;
    position: absolute;
    right: 0;
    bottom: -56px;
}
#about .imgArea .peo span {
    margin: 64px 0 0;
    display: block;
    position: relative;
    letter-spacing: 0.05em;
    text-align: center;
    font-weight: 300;
    font-family: 'Source Sans Pro', sans-serif;
}
#about .imgArea .peo span:before {
    margin-bottom: 9px;
    width: 1px;
    height: 42px;
    position: absolute;
    left: 50%;
    bottom: 100%;
    background: #282828;
    content: "";
}
#about #map {
    width: 100%;
    height: 470px;
}
@media screen and (max-width: 767px) {
    #about {
        padding-top: 62px;
    }
    #about .topText {
        margin-bottom: 26px;
        font-size: 1.2rem;
        line-height: 2.1;
    }
    #about .imgArea {
        margin: 0 -25px 40px 7px;
        padding-right: 0;
    }
    #about .imgArea dl {
        margin-bottom: 20px;
        font-size: 1.2rem;
        line-height: 2.1;
    }
    #about .imgArea dd {
        padding-left: 4em;
    }
    #about .imgArea .tableUl li span {
        font-size: 1.2rem;
        line-height: 2.17;
    }
    #about .imgArea .tableUl li .ttl {
        width: 40px;
        white-space: nowrap;
    }
    #about .imgArea .peo {
        margin: 79px auto 0;
        padding-right: 30px;
        width: 137px;
        position: static;
        right: auto;
        bottom: auto;
    }
    #about .imgArea .peo span {
        margin: 56px 0 0;
        letter-spacing: 0.05em;
        font-size: 1.3rem;
    }
    #about .imgArea .peo span:before {
        margin-bottom: 7px;
        height: 37px;
    }
    #about #map {
        height: 260px;
    }
}
@media screen and (max-width: 374px) {
    #about .imgArea {
        margin: 0 -20px 40px -15px;
        padding-right: 0;
    }
    #about .imgArea .textDl01 dd.style01 {
        padding-left: 19em;
    }
}
/*------------------------------------------------------------
	works
------------------------------------------------------------*/
#works {
    padding-bottom: 32px;
}
#works .comWorksUl {
    margin: -73px 0 95px;
}
@media screen and (max-width: 767px) {
    #works {
        margin-bottom: -14px;
        padding: 62px 0 0;
    }
    #works .comWorksUl {
        margin: -33px 5px 55px;
    }
}
/*------------------------------------------------------------
	contact
------------------------------------------------------------*/
#contact {
	margin-bottom: 48px;
}
#contact p {
	margin-bottom: 52px;
	line-height: 1.9;
}
#contact .link {
	margin-bottom: 0;
}
@media all and (max-width: 767px) {
    #contact {
        margin-bottom: -20px;
        padding-top: 62px;
    }
	#contact p {
        margin: 0 0 31px 2px;
        width: 106%;
		line-height: 1.84;
        font-size: 1.2rem;
        -webkit-transform:scale(0.95);
        transform:scale(0.95);
        -webkit-atransform-origin: 0 0;
        transform-origin: 0 0;
	}
}