@charset "utf-8";

@media print, screen and (min-width: 631px) {
	.display-sp {
		display:none !important;
	}
}
@media screen and (max-width: 630px) {
	.display-pc {
		display:none !important;
	}
}

html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	vertical-align:baseline;
	background:transparent;
	list-style-type:none;
	font-size: medium;
	color: #000;
	font-family: "Meiryo UI", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "Helvetica Neue", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: 300;
	line-height: 1.65em;
}

a {
	text-decoration: none;
	color:#000;
	transition: 0.2s ease-in-out;
}

a:hover {
	text-decoration: none;
	color:#178cf0;
	transition: 0.2s ease-in-out;
}

* {
	box-sizing:border-box;
	margin: 0;
	padding: 0;
}

img {
	vertical-align:bottom;
	width:100%;
}

/* -----------------------------------------------------------------------
　背景
--------------------------------------------------------------------------*/
.base-color {
	background:#e6e7e7;
	overflow:hidden;
}

.base-color2 {
	background:#e6e4df;
	overflow:hidden;
	padding:440px 0 20px;
}

/* -----------------------------------------------------------------------
　トップページ　ファーストビュー
--------------------------------------------------------------------------*/
.fv-wrap {
	position:relative;
	padding:0 0 6.22vw;
	margin-bottom:120px;
	transition: 0.3s ease-in-out;
}

.top-logo {
	width: calc(100vw / 2.3);
	position:absolute;
	top:0;
	left:0;
	padding:calc(100vw / 90) 0 0 calc(100vw / 50);
	z-index:2;
	mix-blend-mode: difference;
}

.scroll-typo-wrap {
	position:absolute;
	bottom:0;
	left:0;
	z-index:3;
}

.small-fv {
	display:none;
}

.fv2 .top-logo,
.fv2 > .scroll-infinity {
	display:none;
}

.fv2 .small-fv {
	display:block;
	max-width:1400px;
	margin:0 auto;
	padding:55px 40px 150px;
	transition: 0.3s ease-in-out;
}

.small-fv-logo {
	width:150px;
	transition: 0.3s ease-in-out;
}
@media screen and (max-width: 1050px) {
	.fv2 .small-fv {
		padding:4.5vw 0 12vw 35px;
	}
}

@media screen and (max-width: 700px) {
	.fv2 .small-fv {
		padding:0;
	}
	.small-fv-logo {
		width:130px;
		margin:18px 0 15vw 18px;
		transition: 0.3s ease-in-out;
	}
}

/* -----------------------------------------------------------------------
　無限スクロール
--------------------------------------------------------------------------*/
@keyframes infinity-scroll-left {
	from {
	  transform: translateX(0);
	}
	  to {
	  transform: translateX(-100%);
	}
}
@keyframes infinity-scroll-right {
	from {
	  transform: translateX(-100%);
	}
	  to {
	  transform: translateX(0%);
	}
}
.scroll-infinity-wrap {
	display: flex;
	overflow: hidden;
}
.scroll-infinity-list {
	display: flex;
	list-style: none;
	padding: 0
}
.scroll-infinity-img-list-left {
	animation: infinity-scroll-left 36s infinite linear 0.5s both;
}
.scroll-infinity-list-left {
	animation: infinity-scroll-left 40s infinite linear 0.5s both;
}
.scroll-infinity-list-right {
	animation: infinity-scroll-right 100s infinite linear 0.5s both;
}
.scroll-infinity-list-left-small {
	animation: infinity-scroll-left 70s infinite linear 0.5s both;
}
.scroll-infinity-img {
	width: calc(100vw / 5);
}
.scroll-infinity-item01 {
	width: calc(100vw * 1.26);
}
.scroll-infinity-item02 {
	width: calc(100vw * 1.1264);
}
.scroll-infinity-item-small {
	width:1457px;
}
.scroll-infinity-item01 > img,
.scroll-infinity-item02 > img {
	width: 100%;
}

@media screen and (max-width: 1500px) {
	.scroll-infinity-img {
		width: calc(100vw / 4.5);
	}
}
@media screen and (max-width: 1400px) {
	.scroll-infinity-img {
		width: calc(100vw / 4);
	}
}
@media screen and (max-width: 1150px) {
	.scroll-infinity-img {
		width: calc(100vw / 3.5);
	}
	.scroll-infinity-item01 {
		width: calc(100vw * 1.386);/* 1.1倍 */
	}
	.scroll-infinity-item02 {
		width: calc(100vw * 1.24);
	}
	.fv-wrap {
		padding:0 0 6.8vw;
	}
}
@media screen and (max-width: 1000px) {
	.scroll-infinity-img {
		width: calc(100vw / 3);
	}
	.top-logo {
		width: calc(100vw / 2);
		padding:calc(100vw / 90) 0 0 calc(100vw / 50);
	}
	.scroll-infinity-item01 {
		width: calc(100vw * 1.512);/* 1.2倍 */
	}
	.scroll-infinity-item02 {
		width: calc(100vw * 1.352);
	}
	.fv-wrap {
		padding:0 0 7.45vw;
	}
}
@media screen and (max-width: 800px) {
	.scroll-infinity-img {
		width: calc(100vw / 2.5);
	}
	.top-logo {
		width: calc(100vw / 1.7);
		padding:calc(100vw / 90) 0 0 calc(100vw / 50);
	}
	.scroll-infinity-item01 {
		width: calc(100vw * 1.638);/* 1.3倍 */
	}
	.scroll-infinity-item02 {
		width: calc(100vw * 1.464);
	}
	.fv-wrap {
		padding:0 0 8.1vw;
		margin-bottom:60px;
	}
}
@media screen and (max-width: 700px) {
	.scroll-infinity-img {
		width: calc(100vw / 2.2);
	}
	.top-logo {
		width: calc(100vw / 1.3);
		padding:calc(100vw / 40) 0 0 calc(100vw / 50);
	}
	.scroll-infinity-item01 {
		width: calc(100vw * 1.7);/* 1.6倍 */
	}
	.scroll-infinity-item02 {
		width: calc(100vw * 1.52);
	}
	.fv-wrap {
		padding:0 0 8.3vw;
		margin-bottom:50px;
	}
}

/* -----------------------------------------------------------------------
　ヘッダーメニュー
--------------------------------------------------------------------------*/
.drawer_hidden {
	display:none !important;
}

@media print, screen and (min-width: 801px) {
	.drawer_open,
	.sp-nav-logo,
	.nav_list_item-connect,
	.page2-sp-logo,
	.nav-wrap-page2 {
		display:none !important;
	}
	.nav-wrap {
		max-width:950px;
		margin:0 auto 170px;
		padding:0 50px;
		transition: 0.2s ease-in-out;
	}
	.nav_list {
		display:flex;
	}
	.nav_list_item {
		border-left:1px solid #333;
		padding-left:15px;
	}
	.nav_list_item-01 {
		width:37%;
	}
	.nav_list_item-02 {
		width:36%;
	}
	.nav_list_item-03 {
		width:17%;
	}
	.nav_list_item-04 {
		width:10%;
	}
	.nav_list_item a {
		font-size:18px;
		letter-spacing:0.02em;
	}
	.nav_list_sub {
		margin-top:10px;
	}
	.nav_list_sub-01 {
		padding-left:17px;
		background-image: url(../img/menu-arrow.png);
		background-size: 9px;
		background-repeat: no-repeat;
		background-position: 0 6px;
		margin:7px 0;
	}
	.nav_list_sub-01 a {
		font-size:14px;
	}
	.nav_list_sub-02 {
		padding-left:17px;
		margin-bottom:2px;
	}
	.nav_list_sub-02 a {
		font-size:14px;
	}
}

@media screen and (min-width:801px) and ( max-width:1300px) {
	.nav-wrap {
		margin:0 auto 130px;
	}
}

@media screen and (max-width: 800px) {
	.page2-sp-logo {
		width:130px;
		position:absolute;
		top:18px;
		left:18px;
	}
	.nav-wrap {
		position:fixed;
		top:0;
		right:0;
		z-index: 90;
	}
	/* ハンバーガーアイコンの設置スペース */
	.drawer_open {
		display: flex;
		height: 60px;
		width: 70px;
		justify-content: center;
		align-items: center;
		position: relative;
		z-index: 100;
		cursor: pointer;
	}
	/* ハンバーガーメニューのアイコン */
	.drawer_open span,
	.drawer_open span:before,
	.drawer_open span:after {
		content: '';
		display: block;
		height: 3px;
		width: 35px;
		border-radius: 3px;
		background: #000;
		transition: 0.5s;
		position: absolute;
	}
	/* 三本線の一番上の棒の位置調整 */
	.drawer_open span:before {
		bottom: 10px;
	}
	/* 三本線の一番下の棒の位置調整 */
	.drawer_open span:after {
		top: 10px;
	}
	/* アイコンがクリックされたら真ん中の線を透明にする */
	#drawer_input:checked ~ .drawer_open span {
		background: rgba(255, 255, 255, 0);
	}
	/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
	#drawer_input:checked ~ .drawer_open span::before {
		bottom: 0;
		transform: rotate(45deg);
	}
	#drawer_input:checked ~ .drawer_open span::after {
		top: 0;
		transform: rotate(-45deg);
	}
	/* アイコンがクリックされたらメニューを表示 */
	#drawer_input:checked ~ .nav_content {
		left: 50%;
	}
	/* ボディの固定*/
	body.active {
  		height: 100%;
  		overflow: hidden;
	}
	/* メニューのデザイン*/
	.nav_content {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 100%; /* メニューを画面の外に飛ばす */
		z-index: 99;
		background: #fff;
		transition: .5s;
		padding:15px 0 0 15px;
	}
	.sp-nav-logo {
		width:150px;
		margin-bottom:50px;
	}
	.nav_list {
		padding-left:5%;
	}
	.nav_list_item {
		margin-bottom:15px;
	}
	.nav_list_item a {
		font-size:19px;
		letter-spacing:0.02em;
	}
	.nav_list_sub {
		margin:8px 0 10px;
		padding-left:15px;
	}
	.nav_list_sub-01 {
		padding-left:17px;
		background-image: url(../img/menu-arrow.png);
		background-size: 9px;
		background-repeat: no-repeat;
		background-position: 0 6px;
		margin:7px 0;
	}
	.nav_list_sub-01 a {
		font-size:15px;
	}
	.nav_list_sub-02 {
		display:none !important;
	}
}

@media screen and (max-width: 600px) {
	/* アイコンがクリックされたらメニューを表示 */
	#drawer_input:checked ~ .nav_content {
		left: 0;
	}
}

/* -----------------------------------------------------------------------
　固定ヘッダーメニュー
--------------------------------------------------------------------------*/
.fixed-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: rgba(230, 231, 231, 0.7);
	z-index:180;
	opacity: 0;
	transform: translateY(-100%);
	transition: all 0.4s ease; /* アニメーション時間 */
	pointer-events: none; /* 非表示時にクリックを無効化 */
}

.fixed-header2 {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: rgba(230, 228, 223, 0.7);
	z-index:180;
	transition: all 0.4s ease; /* アニメーション時間 */
}

.fixed-header.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto; /* 表示時にクリック可能に */
}

.fixed-header-logo {
  	display:block;
  	width:100px;
}

.fixed-header-inner {
	max-width:1400px;
	margin:0 auto;
	display:flex;
	justify-content: space-between;
}

.fixed-header-padding {
	width:100%;
	padding:9px 35px 6px;
}

.fixed-nav_list {
	display:flex;
	justify-content: flex-end;
	padding-top:21px;
}

.fixed-nav_item {
	margin-left:50px;
	position: relative;
	transition: 0.3s ease-in-out;
}

.fixed-nav_item a {
	display:block;
	font-size:17px;
	padding-bottom:10px;
	letter-spacing:0.02em;
}

.scroll-infinity-fixed {
	padding-bottom:18px;
}

@media screen and (max-width: 1200px) {
	.fixed-nav_item {
		margin-left:30px;
	}
}

@media screen and (max-width: 850px) {
	.fixed-nav_item {
		margin-left:20px;
	}
}

@media screen and (max-width: 800px) {
	.fixed-header,
	.fixed-header2 {
		display:none !important;
	}
}

/* -------------　ドロップダウンメニュー　------------*/
.dropdown_lists {
    display: none;/*デフォルトでは非表示の状態にしておく*/
    width: 250px;
    position: absolute;
    top: 30px;
    left: 0;
    z-index:2;
}
.fixed-nav_item:hover .dropdown_lists {
    display: block;/*Gナビメニューにホバーしたら表示*/
}
.dropdown_list {
    transition: all .3s;
    position: relative;
}
.fixed-header .dropdown_list {
	background: rgba(230, 231, 231, 0.9);
}
.fixed-header2 .dropdown_list {
	background: rgba(230, 228, 223, 0.9);
}
.dropdown_list a {
	display:block;
	font-size:15px;
	padding:5px 0 5px 25px;
    text-decoration: none;
    position: relative;
}
.dropdown_list:first-child a {
	padding:10px 0 5px 25px;
}
.dropdown_list:last-child a {
	padding:5px 0 10px 25px;
}
.dropdown_list a.arrow::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    transform: rotate(135deg);
    position: absolute;
    left: 6px;
    top: calc(50% - 3px);
}
.dropdown_list:first-child a.arrow::before {
	top: 50%;
}
.dropdown_list:last-child a.arrow::before {
	top: calc(50% - 5px);
}

.dropdown_list:hover a.arrow::before {
	border-top: 1px solid #178cf0;
	border-left: 1px solid #178cf0;
}


/* -----------------------------------------------------------------------
　スマホ用　トップメニュー
--------------------------------------------------------------------------*/
@media print, screen and (min-width: 801px) {
	.sp-nav {
		display:none !important;
	}
}

@media screen and (max-width: 800px) {
	.sp-nav {
		display: flex;
		flex-wrap: wrap;
		width:90%;
		margin:0 auto 90px;
	}
	.sp-nav a {
		display:block;
		background-image: url(../img/menu-arrow.png);
		background-size: 9px;
		background-repeat: no-repeat;
		background-position: 0 6px;
		font-size:17px;
		letter-spacing:0.02em;
		padding:0 0 6px 17px;
		border-bottom:1px solid #333;
	}
	.sp-nav-01 {
		width:57%;
		margin:0 3% 20px 0;
	}
	.sp-nav-02 {
		width:37%;
		margin:0 0 20px 3%;
	}
}

@media screen and (max-width: 800px) {
	.sp-nav {
		margin:0 auto 55px;
	}
}

/* -----------------------------------------------------------------------
　ジャンプ先アンカー
--------------------------------------------------------------------------*/
@media print, screen and (min-width: 1051px) {
	a.anchor-kd {
	    display: block;
	    padding-top: 370px;
	    margin-top: -370px;
	}
	a.anchor-it {
	    display: block;
	    padding-top: 340px;
	    margin-top: -340px;
	}
	a.anchor-mh {
	    display: block;
	    padding-top: 310px;
	    margin-top: -310px;
	}
	a.anchor-bz {
	    display: block;
	    padding-top: 420px;
	    margin-top: -420px;
	}
	a.anchor-jirei {
	    display: block;
	    padding-top: 370px;
	    margin-top: -370px;
	}
	a.anchor-connect {
	    display: block;
	    padding-top: 300px;
	    margin-top: -300px;
	}
	a.anchor-pr {
	    display: block;
	    padding-top: 400px;
	    margin-top: -400px;
	}
	a.anchor-sonota {
	    display: block;
	    padding-top: 330px;
	    margin-top: -330px;
	}
	a.anchor-web {
	    display: block;
	    padding-top: 390px;
	    margin-top: -390px;
	}
	a.anchor-movie {
	    display: block;
	    padding-top: 170px;
	    margin-top: -170px;
	}
}
@media screen and (min-width:801px) and ( max-width:1050px) {
	a.anchor-kd,
	a.anchor-it,
	a.anchor-mh,
	a.anchor-bz,
	a.anchor-jirei,
	a.anchor-connect,
	a.anchor-pr,
	a.anchor-sonota,
	a.anchor-web,
	a.anchor-movie {
	    display: block;
	    padding-top: 70px;
	    margin-top: -70px;
	}
}
@media screen and (max-width: 800px) {
	a.anchor-kd,
	a.anchor-it,
	a.anchor-mh,
	a.anchor-bz,
	a.anchor-jirei,
	a.anchor-connect,
	a.anchor-pr,
	a.anchor-sonota,
	a.anchor-web,
	a.anchor-movie {
	    display: block;
	    padding-top: 20px;
	    margin-top: -20px;
	}
}

/* -----------------------------------------------------------------------
　トップ　コンタクトブロック
--------------------------------------------------------------------------*/
@media print, screen and (min-width: 771px) {
	.address-top-sp-br01,
	.address-top-sp-br02 {
		display:none !important;
	}
}
@media print, screen and (min-width: 631px) {
	.address-top-sp-br02 {
		display:none !important;
	}
}

.contact-wrap-top {
	max-width:1300px;
	margin:0 auto 280px;
	padding:0 50px;
}

.contact-heading {
	font-size:17px;
	letter-spacing:0.02em;
	margin-bottom:18px;
}

.contact-company-name {
	font-size:16px;
	margin-bottom:5px;
}

.contact-company-address {
	font-size:14px;
}

.map-link-text {
	font-size:13.5px;
	color:#178cf0;
}

.contact-info-wrap {
	margin-top:14px;
}

.contact-telephone-mail {
	font-size:21px;
	letter-spacing:0.02em;
	margin-bottom:3px;
}

.contact-telephone-mail span.small {
	font-size:13px;
}

@media screen and (max-width: 1050px) {
	.contact-wrap-top {
		margin:0 auto 100px;
	}
}

@media screen and (max-width: 630px) {
	.contact-wrap-top {
		margin:0 auto 70px;
		padding:0 5%;
	}
	.contact-heading {
		font-size:15px;
	}
	.contact-company-name {
		font-size:15.5px;
	}
	.contact-company-address {
		font-size:14px;
	}
	.contact-telephone-mail {
		font-size:18px;
	}
}

/* -----------------------------------------------------------------------
　フッター
--------------------------------------------------------------------------*/
.footer {
	background:#f2f2f2;
	padding:50px 40px 25px;
	position:relative;
}

.foot-logo {
	position:absolute;
	left:0;
	bottom:0;
	width:700px;
	z-index:2;
}

.footer-inner {
	position:relative;
	margin-bottom:50px;
	z-index:3;
}

.foot-nav-wrap {
	border-left:1px solid #333;
	padding:45px 0 30px 17px;
}

.foot-contact-wrap {
	border-left:1px solid #333;
	padding:45px 0 30px 19px;
}

@media print, screen and (min-width: 801px) {
	.footer-inner {
		display:flex;
		justify-content: flex-end;
	}
	.foot-nav-wrap {
		width:390px;
	}
	.foot-contact-wrap {
		width:660px;
	}
}

.foot-nav_list_item {
	margin-bottom:20px;
}

.foot-nav_list_item-web {
	margin-bottom:35px;
}

.foot-nav_list_item > a {
	font-size:16px;
	letter-spacing:0.02em;
}

.foot-nav_list_sub {
	margin:7px 0 40px;
}

.foot-nav_list_sub-01 {
	padding-left:14px;
	background-image: url(../img/menu-arrow.png);
	background-size: 8px;
	background-repeat: no-repeat;
	background-position: 0 7px;
	margin:3px 0;
}

.foot-nav_list_sub-01 a {
	font-size:13.5px;
	line-height:1.5;
}

.foot-nav_list_sub-02 {
	padding-left:14px;
}

.foot-nav_list_sub-02 a {
	font-size:13.5px;
	line-height:1.5;
}

.foot-contact-heading {
	font-size:15px;
	letter-spacing:0.02em;
	margin-bottom:30px;
}

.foot-contact-company-name {
	font-size:15px;
	margin-bottom:6px;
}

.foot-contact-company-address {
	font-size:13.5px;
}

.foot-contact-info-wrap {
	margin-top:30px;
}

.foot-contact-telephone-mail {
	font-size:20px;
	letter-spacing:0.02em;
	margin-bottom:5px;
}

.foot-contact-telephone-mail span.small {
	font-size:13px;
}

.foot-copyright {
	position:relative;
	font-size:13px;
	text-align:center;
	z-index:3;
}

@media print, screen and (min-width: 1131px) {
	.address-bottom-br01,
	.address-bottom-br02 {
		display:none !important;
	}
}
@media print, screen and (min-width: 901px) {
	.address-bottom-br02 {
		display:none !important;
	}
}

@media screen and (max-width: 1130px) {
	.foot-nav-wrap {
		width:330px;
	}
	.foot-contact-wrap {
		width:450px;
	}
}

@media screen and (max-width: 900px) {
	.foot-nav-wrap {
		width:300px;
	}
	.foot-contact-wrap {
		width:400px;
	}
}

@media screen and (max-width: 800px) {
	.footer {
		padding:30px 5% 25px;
	}
	.foot-logo {
		bottom:170px;
		left:auto;
		right:0;
		width:80%;
	}
	.foot-nav-wrap {
		width:100%;
		border-left:none;
		padding:0 0 0 0;
		margin-bottom:40px;
	}
	.foot-nav_content {
		display:flex;
	}
	.foot-nav_list {
		width:50%;
		padding:15px 0 0 10px;
		border-left:1px solid #333;
	}
	.foot-nav_list_item {
		margin-bottom:10px;
	}
	.foot-nav_list_item > a {
		font-size:15px;
	}
	.foot-nav_list_sub-01 {
		padding-left:13px;
		background-image: url(../img/menu-arrow.png);
		background-size: 7px;
		background-repeat: no-repeat;
		background-position: 0 8px;
		margin:3px 0;
	}
	.foot-nav_list_sub-02 {
		padding-left:13px;
	}
	.foot-nav_list_sub-01 a,
	.foot-nav_list_sub-02 a {
		font-size:12.5px;
	}
	.foot-contact-wrap {
		width:100%;
		padding:15px 0 10px 15px;
	}
	.foot-contact-heading {
		font-size:14px;
		margin-bottom:20px;
	}
	.foot-contact-company-name {
		font-size:14px;
		margin-bottom:6px;
	}
	.foot-contact-company-address {
		font-size:13px;
	}
	.foot-contact-info-wrap {
		margin-top:20px;
	}
	.foot-contact-telephone-mail {
		font-size:16px;
		letter-spacing:0.02em;
		margin-bottom:5px;
	}
	.foot-contact-telephone-mail span.small {
		font-size:13px;
	}
	.foot-copyright {
		font-size:12px;
	}
}

/* -----------------------------------------------------------------------
　記事広告　建築・土木
--------------------------------------------------------------------------*/
.image-group {
	display: flex;
	flex-wrap: wrap;
}

.image {
	cursor: pointer;
	transition: 0.3s ease-in-out;
}

@media print, screen and (min-width: 1051px) {
	.cate-title-wrap {
		max-width:1000px;
		margin:0 auto;
		position:relative;
	}
	.cate-group-text-wrap {
		width:100%;
		position: absolute;
		z-index:110;
	}
	.cate-group-text-wrap-kd {
		top:-90px;
		left:-100px;
	}
	.cate-group-text-wrap-it {
		top:-150px;
		right:-140px;
	}
	.cate-group-text-wrap-mh {
		top:-120px;
		left:-100px;
	}
	.cate-group-text-wrap-bz {
		top:-230px;
		right:-100px;
	}
	.cate-group-heading {
		width:310px;
	}
	.cate-group-heading-right {
		width:310px;
		margin:0 0 0 auto;
	}
	.cate-title-yoko,
	.heading-left {
		display:none !important;
	}
	.cate-title-tate {
		position: absolute;
		width:130px;
		z-index:110;
	}
	.cate-title-tate-kijitai {
		top:-220px;
		right:70px;
	}
	.cate-title-tate-jirei {
		top:-220px;
		left:20px;
	}
	.image-group {
		position:relative;
		max-width:1000px;
		height:1000px;
		margin:0 auto 600px;
	}
	.image {
		filter: blur(2px);
		display:block;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index:1;
	}
	/* シャープな画像 */
	.image.active {
		width:48%;
		filter: blur(0);
		z-index:10;
	}
	.image.yoko1.active {
		width:53%;
	}
	.image.yoko2.active {
		width:63%;
	}
	.image.yoko3.active {
		width:58%;
	}
	.image.tate.active {
		width:32%;
	}
	.image.tate1.active {
		width:35%;
	}
	.image.tate2.active {
		width:38%;
	}
	.image.tate3.active {
		width:45%;
	}
	.image-group-kd {
		height:1000px;
		margin:0 auto 430px;
	}
	.posi-kd-01 {
		top: 10%;
		left: -3%;
		width:21%;
	}
	.posi-kd-02 {
		top: 15%;
		left: 25%;
		width:38%;
		z-index:2;
	}
	.posi-kd-03 {
		top: 0%;
		left: 50%;
		width:31%;
	}
	.posi-kd-04 {
		top: 25%;
		left: 67%;
		width:28%;
	}
	.posi-kd-05 {
		top: 17%;
		left: 100%;
		width:23%;
	}
	.posi-kd-06 {
		top: 39%;
		left: 2%;
		width:30%;
	}
	.posi-kd-07 {
		top: 58%;
		left: 9%;
		width:23%;
	}
	.posi-kd-08 {
		top: 48%;
		left: 42%;
		width:33%;
	}
	.posi-kd-09 {
		top: 58%;
		left: 77%;
		width:34%;
		z-index:2;
	}
	.posi-kd-10 {
		top: 40%;
		left: 90%;
		width:37%;
		z-index:3;
	}
	.posi-kd-11 {
		top: 87%;
		left: 10%;
		width:36%;
	}
	.posi-kd-12 {
		top: 71%;
		left: 28%;
		width:32%;
	}
	.posi-kd-13 {
		top: 82%;
		left: 62%;
		width:23%;
	}
	.posi-kd-14 {
		top: 75%;
		left: 90%;
		width:26%;
	}
	.posi-kd-15 {
		top: 96%;
		left: 100%;
		width:33%;
	}
	.posi-kd-16 {
		top: 100%;
		left: 33%;
		width:38%;
	}
	.image-group-it {
		height:600px;
		margin:0 auto 340px;
	}
	.posi-it-01 {
		top: 43%;
		left: -3%;
		width:25%;
	}
	.posi-it-02 {
		top: 20%;
		left: 12%;
		width:35%;
		z-index:2;
	}
	.posi-it-03 {
		top: 0%;
		left: 54%;
		width:35%;
	}
	.posi-it-04 {
		top: 27%;
		left: 86%;
		width:30%;
	}
	.posi-it-05 {
		top: 8%;
		left: 102%;
		width:28%;
	}
	.posi-it-06 {
		top: 90%;
		left: 20%;
		width:30%;
	}
	.posi-it-07 {
		top: 55%;
		left: 32%;
		width:25%;
	}
	.posi-it-08 {
		top: 69%;
		left: 58%;
		width:38%;
	}
	.posi-it-09 {
		top: 65%;
		left: 96%;
		width:26%;
	}
	.image-group-mh {
		height:700px;
		margin:0 auto 440px;
	}
	.posi-mh-01 {
		top: 28%;
		left: 5%;
		width:30%;
		z-index:5;
	}
	.posi-mh-02 {
		top: 50%;
		left: 22%;
		width:24%;
	}
	.posi-mh-03 {
		top: 13%;
		left: 41%;
		width:35%;
	}
	.posi-mh-04 {
		top: -8%;
		left: 80%;
		width:23%;
	}
	.posi-mh-05 {
		top: 8%;
		left: 99%;
		width:30%;
	}
	.posi-mh-06 {
		top: 70%;
		left: -5%;
		width:24%;
	}
	.posi-mh-07 {
		top: 88%;
		left: 36%;
		width:38%;
		z-index:5;
	}
	.posi-mh-08 {
		top: 60%;
		left: 54%;
		width:32%;
	}
	.posi-mh-09 {
		top: 44%;
		left: 82%;
		width:38%;
	}
	.posi-mh-10 {
		top: 93%;
		left: 75%;
		width:25%;
	}
	.posi-mh-11 {
		top: 109%;
		left: 10%;
		width:23%;
	}
	.image-group-bz {
		height:650px;
		margin:0 auto 480px;
	}
	.posi-bz-01 {
		top: 38%;
		left: 7%;
		width:28%;
		z-index:5;
	}
	.posi-bz-02 {
		top: 13%;
		left: 20%;
		width:20%;
	}
	.posi-bz-03 {
		top: 32%;
		left: 47%;
		width:31%;
		z-index:5;
	}
	.posi-bz-04 {
		top: -3%;
		left: 70%;
		width:35%;
	}
	.posi-bz-05 {
		top: 1%;
		left: 100%;
		width:25%;
	}
	.posi-bz-06 {
		top: 60%;
		left: 68%;
		width:29%;
	}
	.posi-bz-07 {
		top: 40%;
		left: 95%;
		width:22%;
	}
	.posi-bz-08 {
		top: 103%;
		left: 0;
		width:17%;
	}
	.posi-bz-09 {
		top: 83%;
		left: 25%;
		width:29%;
	}
	.posi-bz-10 {
		top: 90%;
		left: 53%;
		width:20%;
	}
	.image-group-jb {
		height:600px;
		margin:0 auto 320px;
	}
	.posi-jb-01 {
		top: 0;
		left: 43%;
		width:35%;
		z-index:5;
	}
	.posi-jb-02 {
		top: 5%;
		left: 80%;
		width:13%;
	}
	.posi-jb-03 {
		top: 15%;
		left: 103%;
		width:20%;
	}
	.posi-jb-04 {
		top: 58%;
		left: 36%;
		width:18%;
	}
	.posi-jb-05 {
		top: 50%;
		left: 64%;
		width:22%;
	}
	.posi-jb-06 {
		top: 60%;
		left: -5%;
		width:17%;
	}
	.posi-jb-07 {
		top: 100%;
		left: 38%;
		width:48%;
	}
	.posi-jb-08 {
		top: 82%;
		left: 93%;
		width:42%;
	}
	.image-group-po {
		height:1000px;
		margin:0 auto 420px;
	}
	.cate-title-tate-po {
		top:-280px;
		right:40px;
	}
	.posi-po-01 {
		top: 26%;
		left: -2%;
		width:24%;
	}
	.posi-po-02 {
		top: 38%;
		left: 34%;
		width:33%;
	}
	.posi-po-03 {
		top: 2%;
		left: 18%;
		width:28%;
		z-index:2;
	}
	.posi-po-04 {
		top: 14%;
		left: 51%;
		width:17%;
	}
	.posi-po-05 {
		top: 15%;
		left: 73%;
		width:29%;
	}
	.posi-po-06 {
		top: 39%;
		left: 103%;
		width:24%;
	}
	.posi-ad-01 {
		top: 65%;
		left: 23%;
		width:50%;
	}
	.posi-ad-02 {
		top: 65%;
		left: 69%;
		width:20%;
	}
	.posi-ad-03 {
		top: 76%;
		left: 100%;
		width:25%;
	}
	.posi-ad-04 {
		top: 107%;
		left: 25%;
		width:20%;
	}
	.posi-ad-05 {
		top: 97%;
		left: 5%;
		width:33%;
		z-index:2;
	}
	.posi-ad-06 {
		top: 98%;
		left: 63%;
		width:45%;
	}
	.image-group-br {
		height:470px;
		margin:0 auto 410px;
	}
	.posi-br-01 {
		top: 20%;
		left: -2%;
		width:23%;
	}
	.posi-br-02 {
		top: 10%;
		left: 37%;
		width:43%;
	}
	.posi-br-03 {
		top: 8%;
		left: 75%;
		width:17%;
	}
	.posi-br-04 {
		top: 0;
		left: 95%;
		width:29%;
	}
	.posi-br-05 {
		top: 80%;
		left: 10%;
		width:32%;
		z-index:2;
	}
	.posi-br-06 {
		top: 84%;
		left: 33%;
		width:21%;
	}
	.posi-br-07 {
		top: 95%;
		left: 89%;
		width:29%;
	}
	.posi-br-08 {
		top: 50%;
		left: 105%;
		width:20%;
	}
	.posi-br-09 {
		top: 79%;
		left: 66%;
		width:28%;
		z-index:2;
	}
	.image-group-pr {
		height:750px;
		margin:0 auto 500px;
	}
	.cate-title-tate-pr {
		top:-220px;
		left:70px;
	}
	.posi-pr-01 {
		top: 10%;
		left: -5%;
		width:20%;
	}
	.posi-pr-02 {
		top: -10%;
		left: 39%;
		width:27%;
	}
	.posi-pr-03 {
		top: -1%;
		left: 72%;
		width:21%;
	}
	.posi-pr-04 {
		top: 5%;
		left: 105%;
		width:20%;
	}
	.posi-pr-05 {
		top: 30%;
		left: 28%;
		width:19%;
	}
	.posi-pr-06 {
		top: 55%;
		left: 33%;
		width:17%;
	}
	.posi-pr-07 {
		top: 30%;
		left: 60%;
		width:40%;
		z-index:2;
	}
	.posi-pr-08 {
		top: 57%;
		left: -3%;
		width:22%;
	}
	.posi-pr-09 {
		top: 70%;
		left: 60%;
		width:38%;
		z-index:2;
	}
	.posi-pr-10 {
		top: 40%;
		left: 104%;
		width:25%;
		z-index:2;
	}
	.posi-pr-11 {
		top: 65%;
		left: 95%;
		width:17%;
	}
	.posi-pr-12 {
		top: 105%;
		left: 32%;
		width:44%;
		z-index:3;
	}
	.posi-pr-13 {
		top: 102%;
		left: 90%;
		width:45%;
	}
	.image-group-snt {
		height:560px;
		margin:0 auto 420px;
	}
	.cate-title-tate-snt {
		top:-150px;
		right:-30px;
	}
	.posi-snt-01 {
		top: 26%;
		left: -2%;
		width:19%;
	}
	.posi-snt-02 {
		top: 5%;
		left: 29%;
		width:33%;
	}
	.posi-snt-03 {
		top: 55%;
		left: 62%;
		width:19%;
	}
	.posi-snt-04 {
		top: 15%;
		left: 78%;
		width:45%;
	}
	.posi-snt-05 {
		top: 65%;
		left: 35%;
		width:25%;
	}
	.posi-snt-06 {
		top: 85%;
		left: 15%;
		width:34%;
	}
	.posi-snt-07 {
		top: 90%;
		left: 77%;
		width:27%;
	}
	.image-group-web {
		height:850px;
		margin:0 auto 400px;
	}
	.cate-title-web-pc {
		position: absolute;
		width:300px;
		z-index:110;
		top:-340px;
		left:-100px;
	}
	.cate-title-web-sp {
		display:none !important;
	}
	.posi-web-01 {
		top: 17%;
		left: -1%;
		width:18%;
	}
	.posi-web-02 {
		top: 3%;
		left: 37%;
		width:33%;
	}
	.posi-web-03 {
		top: 29%;
		left: 69%;
		width:25%;
		z-index:2;
	}
	.posi-web-04 {
		top: 13%;
		left: 100%;
		width:38%;
		z-index:2;
	}
	.posi-web-05 {
		top: 62%;
		left: 95%;
		width:28%;
	}
	.posi-web-06 {
		top: 45%;
		left: 37%;
		width:21%;
	}
	.posi-web-07 {
		top: 64%;
		left: -3%;
		width:28%;
	}
	.posi-web-08 {
		top: 79%;
		left: 27%;
		width:26%;
		z-index:2;
	}
	.posi-web-09 {
		top: 93%;
		left: 49%;
		width:17%;
	}
	.posi-web-10 {
		top: 87%;
		left: 74%;
		width:29%;
	}
	.posi-web-11 {
		top: 105%;
		left: 106%;
		width:28%;
	}
}

@media screen and (min-width:1051px) and ( max-width:1400px) {
	.cate-title-wrap,
	.image-group {
		width:72vw;
	}
	.image-group-kd {
		height:72vw;
		margin:0 auto 32vw;
	}
	.image-group-it {
		height:43vw;
		margin:0 auto 25vw;
	}
	.cate-group-text-wrap-it {
		top:-150px;
		right:-115px;
	}
	.image-group-mh {
		height:50vw;
		margin:0 auto 34vw;
	}
	.image-group-bz {
		height:47vw;
		margin:0 auto 36vw;
	}
	.image-group-jb {
		height:43vw;
		margin:0 auto 24vw;
	}
	.image-group-po {
		height:72vw;
		margin:0 auto 30vw;
	}
	.image-group-br {
		height:34vw;
		margin:0 auto 30vw;
	}
	.image-group-pr {
		height:54vw;
		margin:0 auto 36vw;
	}
	.image-group-snt {
		height:40vw;
		margin:0 auto 30vw;
	}
	.image-group-web {
		height:61vw;
		margin:0 auto 25vw;
	}
}

@media screen and (min-width:1201px) and ( max-width:1400px) {
	.cate-title-tate {
		width:9.5vw;
	}
	.cate-title-web-pc {
		width:22vw;
	}
}

@media screen and (min-width:1051px) and ( max-width:1200px) {
	.cate-title-tate {
		width:112px;
	}
	.cate-title-web-pc {
		width:257px;
	}
}


@media screen and (max-width: 1050px) {
	.base-color2 {
		padding-top:150px;
	}
	.cate-title-tate,
	.cate-title-web-pc,
	.heading-right {
		display:none !important;
	}
	.cate-title-wrap {
		width:100%;
		margin: 60px auto 30px;
	}
	.cate-title-yoko {
		max-width:600px;
		margin-bottom:50px;
		transition: all 0.4s ease;
	}
	.cate-title-web-sp {
		width:166px;
		margin-bottom:50px;
	}
	.cate-group-text-wrap {
		margin-top:30px;
	}
	.cate-group-heading,
	.cate-group-heading-right {
		width:280px;
	}
	.image-group {
		margin-bottom:40px;
	}
	.image {
		transition: 0.3s ease-in-out;
	}
	.image:hover {
		transform:scale(1.1,1.1);
		transition: 0.3s ease-in-out;
	}
}

@media screen and (min-width:901px) and ( max-width:1050px) {
	.works-wrap {
		padding:0 40px;
	}
	.cate-title-yoko {
		max-width:550px;
		margin-bottom:40px;
	}
	.cate-title-web-sp {
		width:150px;
		margin-bottom:40px;
	}
	.cate-group-heading,
	.cate-group-heading-right {
		width:260px;
	}
	.image {
		width:31.5%;
		margin:0 1.375% 30px;
	}
	.image.tate {
		padding:0 4.5%;
	}
	.image.tate1 {
		padding:0 3.8%;
	}
	.image.tate2 {
		padding:0 2.3%;
	}
	.image.tate3 {
		padding:0 2%;
	}
	.image:nth-child(3n) {
    	margin-right:0;
	}
	.image:nth-child(3n+1) {
    	margin-left:0;
	}
}

@media screen and (max-width: 900px) {
	.works-wrap {
		padding:0 30px;
	}
	.cate-title-wrap {
		margin: 30px auto 30px;
	}
	.cate-title-yoko {
		max-width:480px;
		margin-bottom:35px;
	}
	.cate-title-web-sp {
		width:140px;
		margin-bottom:35px;
	}
	.cate-group-heading,
	.cate-group-heading-right {
		width:260px;
	}
	.image {
		width:47%;
		margin:0 3% 40px;
	}
	.image.tate {
		padding:0 7%;
	}
	.image.tate1 {
		padding:0 7%;
	}
	.image.tate2 {
		padding:0 4%;
	}
	.image.tate3 {
		padding:0 4%;
	}
	.image:nth-child(2n) {
    	margin-right:0;
	}
	.image:nth-child(2n+1) {
    	margin-left:0;
	}
	.image-group-bz {
		margin-bottom:40px;
	}
}

@media screen and (max-width: 600px) {
	.works-wrap {
		padding:0 20px;
	}
	.cate-title-wrap {
		margin: 0 auto 30px;
	}
	.cate-title-yoko {
		width:90%;
		margin-bottom:10px;
	}
	.cate-title-web-sp {
		width:27%;
		margin-bottom:35px;
	}
	.cate-group-heading,
	.cate-group-heading-right {
		width:240px;
	}
	.image-group-bz {
		margin-bottom:40px;
	}
	.image {
		width:48%;
		margin:0 2% 20px;
	}
}

/* -----------------------------------------------------------------------
　モーダルウィンドウ
--------------------------------------------------------------------------*/
.thumb {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.thumb:focus {
  outline: none;
}

.modal {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
    width: 100%;
    height: 100vh;
    transition: opacity .3s, visibility .3s;
}

.modal.is-active {
    visibility: visible;
    opacity: 1;
}

/* オーバーレイ */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .8);
    cursor: pointer;
}

/* モーダルコンテンツ */
.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 1000px;
    width: 90%;
    border-radius: 8px;
}

.modal-content__inner {
    position: relative;
}

/* 閉じるボタン */
.modal-close {
    background: transparent;
    cursor: pointer;
    letter-spacing:2px;
    color:#fff;
    padding:2px 18px;
    border:1px solid #fff;
    border-radius:100px;
}

.modal-close:hover {
	background: rgba(255, 255, 255, .2);
}

.works-title {
	display:inline-block;
	color:#fff;
	border-bottom:4px solid #fff;
}

.works-title span.bold {
	color:#fff;
	font-weight:bold;
}

@media print, screen and (min-width: 801px) {
	.modal-inner-wrap {
		display:flex;
	}
	.works-img {
		width:60%;
	}
	.works-img2 {
		width:63%;
	}
	.works-img3 {
		width:55%;
	}
	.works-img.tate {
		padding:0 12%;
	}
	.works-img.tate01 {
		padding:0 9%;
	}
	.works-img.tate02 {
		padding:0 6%;
	}
	.works-img.tate03 {
		padding:0 4%;
	}
	.works-desc-wrap {
		width:40%;
		display:flex;
		justify-content: center;
		align-items: center;
		padding-bottom:90px;
	}
	.works-desc-wrap2 {
		width:37%;
	}
	.works-desc-wrap3 {
		width:45%;
	}
	.works-title {
		font-size:16px;
		padding:12px 0;
	}
	.works-title span.bold {
		font-size:16px;
	}
	.modal-close {
	    position: absolute;
	    bottom: 40px;
	    left: 80%;
	    transform: translateX(-50%);
	    font-size: 13px;
	}
}
@media screen and (max-width: 800px) {
	.works-img.tate {
		padding:0 15%;
	}
	.works-img.tate01 {
		padding:0 13%;
	}
	.works-img.tate02 {
		padding:0 9%;
	}
	.works-img.tate03 {
		padding:0 7%;
	}
	.works-desc-wrap {
		display:flex;
		justify-content: center;
		padding:15px 0;
	}
	.works-title {
		font-size:15px;
		padding:10px 0;
	}
	.works-title span.bold {
		font-size:15px;
	}
	.modal-close {
		display:block;
		font-size: 13px;
		margin:30px auto 0;
	}
}
@media screen and (min-width:651px) and ( max-width:800px) {
	.works-img.tate {
		padding:0 25%;
	}
	.works-img.tate01 {
		padding:0 25%;
	}
	.works-img.tate02 {
		padding:0 19%;
	}
	.works-img.tate03 {
		padding:0 17%;
	}
}

body.is-fixed {
  overflow: hidden;
}

/* -----------------------------------------------------------------------
　動画
--------------------------------------------------------------------------*/
.movie-section {
	padding:0 90px;
}
@media screen and (max-width: 1100px) {
	.movie-section {
		padding:0 60px;
	}
}
@media screen and (max-width: 900px) {
	.movie-section {
		padding:0 40px;
	}
}
@media screen and (max-width: 600px) {
	.movie-section {
		padding:0 5%;
	}
}

.movie-section-wrap {
	max-width:1200px;
	margin:0 auto;
}

.cate-title-movie {
	width:300px;
	margin:0 0 0 auto;
}

@media screen and (min-width:1201px) and ( max-width:1400px) {
	.cate-title-movie {
		width:22vw;
	}
}

@media screen and (min-width:1051px) and ( max-width:1200px) {
	.cate-title-movie {
		width:257px;
	}
}

@media screen and (max-width: 1050px) {
	.cate-title-movie {
		width:166px;
		margin:40px 0 30px 0;
	}
}
@media screen and (min-width:901px) and ( max-width:1050px) {
	.cate-title-movie {
		width:150px;
		margin:40px 0 30px 0;
	}
}
@media screen and (max-width: 900px) {
	.cate-title-movie {
		width:140px;
		margin:40px 0 30px 0;
	}
}
@media screen and (max-width: 600px) {
	.cate-title-movie {
		width:27%;
		margin:40px 0 30px 0;
	}
}

.movie {
	margin-bottom:15px;
}

.movie video {
	width:100%;
	vertical-align:bottom;
}

.movie-caption {
	font-size:16px;
}

@media print, screen and (min-width: 601px) {
	.movie-inner {
		display: flex;
		flex-wrap: wrap;
	}
	.movie-box {
		transition: 0.2s ease-in-out;
	}
	.movie-box:nth-child(2n) {
    	margin-right:0;
	}
	.movie-box:nth-child(2n+1) {
    	margin-left:0;
	}
}
@media print, screen and (min-width: 1301px) {
	.movie-box {
		width:42%;
		margin:0 8% 130px;
	}
}
@media screen and (min-width:1101px) and ( max-width:1300px) {
	.movie-box {
		width:43%;
		margin:0 7% 110px;
	}
}
@media screen and (min-width:901px) and ( max-width:1100px) {
	.movie-box {
		width:45%;
		margin:0 5% 90px;
	}
}
@media screen and (min-width:701px) and ( max-width:900px) {
	.movie-box {
		width:47%;
		margin:0 3% 80px;
	}
}
@media screen and (max-width: 700px) {
	.movie-inner {
		max-width:350px;
		margin:0 auto;
	}
	.movie-box {
		margin-bottom:40px;
	}
}

/* -----------------------------------------------------------------------
　TOPに戻るボタン
--------------------------------------------------------------------------*/
#page-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 55px;
    z-index: 50;
    cursor: pointer;

    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;

    transition: opacity 0.5s ease, transform 0.5s ease;
}

@media screen and (max-width: 550px) {
	#page-top {
		bottom: 20px;
    	right: 20px;
    	width: 50px;
	}
}

#page-top.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

#page-top:hover {
    transform: translateY(0) scale(1.15);
}