@charset "UTF-8";
/* CSS Document */
#cube-area .block {
	border-radius: 50%;
	width: 2px;
	height: 2px;
}
.main-box {
	width: 100%;
	position: relative;
	color: #FFF;
}
.main-box:before {
	position: absolute;
	content: "";
	width: 100%;
	max-width: 2800px;
	margin: 0 auto;
	height: 90vh;
	background-image: url("../img/top/q_mark.svg");
	background-position: top 35% right -275px;
	background-repeat: no-repeat;
	background-attachment: fixed;
	z-index: -1;
}
.catch-box {
    width: 100%;
	height: 80vh;
    padding: 35vh 15vw 0;
}
.catch-box .inner {
}
.catch-box h1 {
	font-size: 40px;
	letter-spacing: .05em;
}
.catch-box p {
	padding-top: 10px;
	font-size: 1rem;
    letter-spacing: 0.15em;
}
/*swipe*/
.swipe-box {
	position: absolute;
    top: 64vh;
	z-index: -3;
	width: 100%;
}
.txtswipe {
	width: 100%;
    margin: 0 1em 3em;
    overflow: hidden;
}
.txtswipe ul {
	margin: 0;
	display : inline-block;
	white-space : nowrap;
	animation: flowing 35s linear infinite;
	padding-left: 100%;
}
.txtswipe ul li {
	display:inline;
    margin: 0;
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	font-weight: 400;
	font-style: normal;
	font-size: 8rem;
	opacity: .3;
	letter-spacing: .25em;
}
.txtswipe ul li:nth-child(1){
	padding-right: 5em;
}
.txtswipe ul li:nth-child(3){
	padding-right: 3em;
}
@keyframes flowing {
  0% { transform: translateX(0)}
100% { transform: translateX(-100%)}
}
	
.information-box {
    width: 100%;
    height: 10vh;
	background: rgba(0,0,0,1);
}
.information-box .inner {
    max-width: 1800px;
    height: 10vh;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	color: #CCC;
}
.information-box .inner h1 {
    height: 10vh;
	padding: 0 2em;
    font-family: 'Lato', noto-sans-cjk-jp, sans-serif;
    font-weight: 400;
    font-style: normal;
	font-size: 1.1rem;
	letter-spacing: .05em;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.information-box .inner dl {
	font-family: 'Lato', noto-sans-cjk-jp, sans-serif;
	font-weight: 400;
	font-style: normal;
	letter-spacing: .05em;
	padding: 0 2em;
	border-left: 1px solid #FFF;
}
.information-box .inner dl dt  {
	font-size: 1.1rem;
}
.information-box .inner dl dd  {
    font-family: "a-otf-futo-go-b101-pr6n", "museo-sans", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	font-size: 1.1rem;
}
.information-box .inner dl dd a  {
    font-family: "a-otf-futo-go-b101-pr6n", "museo-sans", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	font-size: 1.1rem;
	letter-spacing: .12em;
	color: #CCC;
}
.information-box .inner .more-btn  {
	margin-right: 20px;
}
.about-box {
	width: 100%;
	padding: 200px 15vw;
	background-image: url("../img/top/about-box-bg.jpg");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
.about-box .message-box .inner {
	padding: 10px 200px;
}
.about-box .message-box .inner h1 {
	font-family: 'Lato', noto-sans-cjk-jp, sans-serif;
	font-weight: 400;
    font-style: normal;
    font-size: 1.8rem;
	letter-spacing: .5em;
}
.about-box .message-box .inner .txt {
	padding-top: 30px;
	font-family: "a-otf-futo-go-b101-pr6n", "museo-sans", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    font-size: 1.1rem;
	font-weight: 500;
	letter-spacing: .12em;
	line-height: 1.5;
	padding-bottom: 30px;
	color: #CCC;
}
.service-box {
	width: 100%;
	margin-top: 200px;
	padding: 100px 8vw 50px;
	background-image: url("../img/top/service-box-bg.jpg");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
.service-box .img-box {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	text-align: center;
}
.service-box .img-box img {
	width: 100%;
}
.service-box_s {
	max-width: 1000px;
	margin: 100px auto 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.service-box .service-box01 {
	width: 50%;
}
.service-box dl dt {
	font-family: 'Lato', noto-sans-cjk-jp, sans-serif;
	font-weight: 400;
	font-size: 1.8rem;
	letter-spacing: .25em;
}
.service-box dl dt span {
    padding: 0 20px 0 40px;
	display: block;
	font-family: 'Lato', noto-sans-cjk-jp, sans-serif;
    font-style: normal;
    font-size: 1.3rem;
	letter-spacing: .25em;
	position: relative;
}
.service-box dl dt span:before {
	position: absolute;
	content: " ";
	top: .75em;
	left: 0;
	width: 35px;
	height: 1px;
	background-color: #FFF;
}
.service-box dl dd {
    height: auto;
    padding: 10px 0 25px 1em;
    display: block;
    font-size: 1.1rem;
	font-weight: 400;
    font-style: normal;
	text-align: left;
	color: #ccc;
}
.service-box .more-btn  {
	margin-top: 10px;
}
.service-box .service-box02 {
	width: 50%;
}
.service-box .service-box02 .img {
	width: 500px;
	margin-top: 100px;
}
.img-box .inner {
	max-width: 1000px;
	margin: 100px auto 0;	
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.img-box .inner .img_left,
.img-box .inner .img_right {
	width: 50%;
}
.img-box .inner .img_left .img01 {
	width: 420px;
}
.img-box .inner .img_right .img02 {
	width: 330px;
	margin-top: 70px;
	float: right;
}
.img-box .inner .img_right .img03 {
	width: 420px;
	margin-top: 60px;
	float: right;
}
.navi-box {
	display: flex;
	flex-wrap: wrap;
	margin-top: 100px;
}
.company-box {
	width: 50%;
	padding: 200px 8vw 150px;
	text-align: left;
	background-image: url("../img/top/company-box-bg.jpg");
	background-size: 50%;
	background-position: top 180% left 100%;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
.company-box h1,
.contact-box h1 {
	font-family: 'Lato', noto-sans-cjk-jp, sans-serif;
	font-weight: 400;
	font-size: 1.8rem;
	letter-spacing: .25em;
}
.company-box h1 span,
.contact-box h1 span {
    padding: 0 20px 0 0;
	display: block;
	font-family: 'Lato', noto-sans-cjk-jp, sans-serif;
    font-style: normal;
    font-size: 1.3rem;
	letter-spacing: .25em;
	position: relative;
}
.company-box p,
.contact-box p {
    height: auto;
    padding: 10px 0 25px 0;
    display: block;
    font-size: 1.1rem;
	font-weight: 400;
    font-style: normal;
	text-align: left;
	color: #CCC;
}
.contact-box {
	width: 50%;
	padding: 200px 8vw 150px;
	text-align: left;
	background-image: url("../img/top/contact-box-bg.jpg");
	background-size: 50%;
	background-position: top 160% right;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
.serviceBox02 .inner {
	padding: 80px 8vw;
}
.serviceBox02 .inner ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-content: space-around;
	text-align: center;
}
.serviceBox02 .inner ul li {
	width: 33%;
	padding: 10px;
}
.serviceBox02 .inner ul li .box01 {
	width: 300px;
	height: 300px;
	margin: 0 auto;
	position: relative;
	border: 1px solid #222;
}
.serviceBox02 .inner ul li .box01:before {
	position: absolute;
	z-index: -1;
	font-size: 7rem;
	display: inline-block;
}
.serviceBox02 .inner ul li.service01 .box01:before {
	content: "W";
	top: 20%;
	left: 25%;
}
.serviceBox02 .inner ul li.service02 .box01:before {
	content: "E";
	top: 40%;
	right: 25%;
}
.serviceBox02 .inner ul li.service03 .box01:before {
	content: "D";
	top: 25%;
	left: 55%;
}
.serviceBox02 .inner ul li h2 {
	font-size: 1.8rem;
	padding: 10px 0 0;
}
.serviceBox02 .inner ul li .txt02 {
	font-size: 1.1rem;
	padding: 5px 0;
	color: #DDD;
}
.serviceBox02 .inner ul li .txt03 {
	font-size: 1rem;
	padding: 15px 0;
	color: #666;
}
@media screen and (max-width: 1100px) {
.serviceBox02 .inner ul li .box01 {
	width: 200px;
	height: 200px;
}
.serviceBox02 .inner ul li .box01:before {
	font-size: 5rem;
}
}
@media screen and (max-width: 1000px) {
.about-box .message-box .inner {
    padding: 0 50px;
}
.company-box {
	background-size: cover;
    background-position: top 60% left 25%;
	background-attachment: inherit;
}
.contact-box {
	background-size: cover;
	background-position: top 60% right 25%;
	background-attachment: inherit;
}
}


@media screen and (max-width: 768px) {
.main-box:before {
	height: 90vh;
	background-position: top 100px right -125px;
	background-attachment: inherit;
}
.catch-box {
	width: 100%;
	height: 100vh;
    padding: 45vh 13vw 0;
}
.catch-box h1 {
	font-size: 7vw;
}
.swiper-box {
	width: 100%;
    top: 60vh;
}
.swiper-slide .txt {
	padding: 0 0 0 8vw;
}
.information-box {
    height: auto;
	padding: 0 5vw;
}
.information-box .inner {
    height: auto;
    display: block;
}
.information-box .inner h1 {
    height: auto;
    padding: 10px 3em;
    font-size: 1.1rem;
    display: block;
	text-align: left;
}
.information-box .inner dl {
    border-left: none;
	padding-left: 3.5em;
	display: flex;
}
.information-box .inner dl dt {
    padding-right: 1em;
}
.information-box .inner .more-btn {
    margin: 10px 8vw;
}
.about-box {
	padding: 200px 8vw 100px;
	background-size: 450%;
	background-attachment: inherit;
}
.about-box .message-box .inner {
	padding: 0 5vw;
}
.about-box .message-box h1 {
    font-size: 1.6rem;
	letter-spacing: .25em;
}
.service-box {
	margin-top: 100px;
	padding: 100px 0;
	background-size: auto 150%;
	background-attachment: inherit;
}
.service-box_s {
    margin: 80px auto 0;
}
.service-box dl dt {
    height: auto;
    padding: 5px 0 0;
    font-size: 1.7rem;
	letter-spacing: .1em;
    display: block;
	text-align: left;
	word-break: break-all;
}
.service-box dl dt span {
    height: auto;
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 0.25em;
    display: block;
    text-align: left;
}
.service-box dl dd {
    height: auto;
    padding: 5px 0 15px 0em;
    font-size: 1rem;
    display: block;
	text-align: left;
}
.service-box .service-box01 {
	width: 100%;
	padding: 0 10vw;
}
.service-box .service-box02 {
	width: 100%;
	padding: 0;
}
.service-box .service-box02 .img {
	width: 100%;
	position: relative;
	overflow: hidden;
}
.service-box .service-box02 .img::before {
	content: "";
	display: block;
	padding-top: 80%;
}
.service-box .service-box02 .img img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.img-box .inner {
	padding: 0;
}
.img-box .inner .img_left {
    width: 50%;
}
.img-box .inner .img_right {
    width: 50%;
}
.img-box .inner .img_left .img01 {
    width: 100%;
}
.img-box .inner .img_left .img01 {
	width: 100%;
	position: relative;
	overflow: hidden;
}
.img-box .inner .img_left .img01::before {
	content: "";
	display: block;
	padding-top: 150%;
}
.img-box .inner .img_left .img01 img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.img-box .inner .img_right .img02 {
    width: 100%;
}
.img-box .inner .img_right .img02 {
	width: 100%;
	position: relative;
	overflow: hidden;
	margin-top: 25px;
}
.img-box .inner .img_right .img02::before {
	content: "";
	display: block;
	padding-top: 100%;
}
.img-box .inner .img_right .img02 img {
	position: absolute;
	top: 0;
	right: 0;
	width: 80%;
	height: 80%;
	object-fit: cover;
}
.img-box .inner .img_right .img03 {
    width: 100%;
	margin-top: 30px;
	}
.img-box .inner .img_right .img03 {
	width: 100%;
	position: relative;
	overflow: hidden;
}
.img-box .inner .img_right .img03::before {
	content: "";
	display: block;
	padding-top: 100%;
}
.img-box .inner .img_right .img03 img {
	position: absolute;
	top: 0;
	right: 0;
	width: 90%;
	height: 140%;
	object-fit: cover;
}
.navi-box {
	display: block;
	margin-top: 50px;
}
.company-box {
	width: 100%;
	background-size: cover;
    background-position: top 60% left 25%;
	background-attachment: inherit;
}
.contact-box {
	width: 100%;
	background-size: cover;
	background-position: top 60% right 25%;
	background-attachment: inherit;
}
.company-box h1,
.contact-box h1 {
    height: auto;
    padding: 5px 0 0;
    font-size: 1.7rem;
	letter-spacing: .1em;
    display: block;
	text-align: left;
	word-break: keep-all;
}
.company-box h1 span,
.contact-box h1 span {
    height: auto;
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 0.25em;
    display: block;
    text-align: left;
}
.company-box p,
.contact-box p {
    height: auto;
    padding: 5px 0 15px 0em;
    font-size: 1rem;
    display: block;
	text-align: left;
}
.serviceBox02 .inner {
    padding: 20px 8vw 80px;
}
.serviceBox02 .inner ul li {
	width: 100%;
	padding: 0 8vw 30px;
}
.serviceBox02 .inner ul li .txt03 {
	text-align: left;
	width: 200px;
	margin: 0 auto;
}
}

@media screen and (max-width: 500px) {
.company-box {
	padding: 200px 10vw 150px;
	background-size: cover;
    background-position: top left 25%;
	background-attachment: inherit;
}
.contact-box {
	padding: 200px 10vw 150px;
	background-size: cover;
	background-position: top right 25%;
	background-attachment: inherit;
}
}
