@charset 'utf-8';
@media all and (max-width: 640px) {
	/* Sp */

	.imgHeaderTopBorder {
		width: 100%;
		max-width: none;
		height: 30px;
		line-height: 1;
	}

	.boxLP {
		width: 100%;
		margin: 0 auto;
		background-image: url("/products/building/site/images/lp-bg01.png");
		background-repeat: repeat-y;
		background-position: left top;
	}

	.boxLP01 {
		color: #333;
		background-color: #fff;
	}

	.boxLP01In {
		width: 100%;
		margin: 0 auto;
		padding: 25px 5% 22px 5%;
	}

	.boxLP01In .ttl01 {
		margin-bottom: 2%;
		padding: 90px 0 0 0px;
		font-weight: bold;
		font-size: 3.5rem;
		font-size: 18px;
		line-height: 1.2;
		text-align: center;
		background: url(/products/building/site/images/lp_toplogo.png) no-repeat top center;
		background-size: 60px;
		text-align: center;
	}

	.boxLP01In .ttl01.shiboran_ttl01{
  font-size: 1.8rem;
}

	.boxTopMenu {
		color: #fff;
		background-color: #810025;
	}

	.boxTopMenu ul {
		display: block;
		width: 100%;
		margin: 0 auto;
		padding: 0 1%;
		overflow: hidden;
		text-align: center;
	}

	.boxTopMenu li {
		display: inline-block;
		font-weight: normal;
		font-size: 1.6rem;
		font-size: 3.3vw;
		line-height: 1;
		text-align: center;
	}

	.boxTopMenu li span {
		display: inline-block;
		padding: 18px 0.3% 18px 0.3%;
		vertical-align: top;
		background-image: url("/products/building/site/images/lp-arrow-icn01.png");
		background-repeat: no-repeat;
		background-position: center bottom 8px;
	}

	.boxTopMenu li:nth-child(1) {
		display: inline-block;
		float: left;
		width: 33%;
		text-align: center;
	}

	.boxTopMenu li:nth-child(2) {
		display: inline-block;
		width: 33%;
		text-align: center;
	}

	.boxTopMenu li:nth-child(3) {
		display: inline-block;
		float: right;
		width: 33%;
		text-align: center;
	}

	.boxLPIn {
		width: 100%;
		margin: 0 auto;
	}

	.boxLPIn.boxTopMovie {
		position: relative;
		width: 100%;
		padding-top: 210%;
		overflow: hidden;
		color: #fff;
		text-align: center;
		background-color: #000;
	}

	.boxLPIn.shiboran.boxTopMovie {
		position: relative;
		width: 100%;
		padding-top: 0 !important;
		overflow: hidden;
		color: #fff;
		text-align: center;
		background-color: #000;
	}

	.boxLPIn.shiboran .boxLPIn01 {
		margin: 20px;
		height: 1000px;
		min-height: 1000px;
	}

	.boxLPIn.boxTopMovie.short {
		position: relative;
		width: 100%;
		padding-top: 20px;
		overflow: hidden;
		color: #fff;
		text-align: center;
		background-color: #000;
	}

	.boxLPIn .boxLPIn01 {
		position: initial;
		height: 100%;
	}

	.boxLPIn .boxLPIn01 video {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		width: 100%;
		height: 70%;
		margin: 0 auto;
		vertical-align: bottom;
	}

	.boxLPIn .boxLPIn01.short {
		overflow: hidden;
		height: 250px;
		position: relative;
	}

	.boxLPIn.boxTopMovie .coverMovie00 {
		position: absolute;
		bottom: 0;
		left: 49%;
		width: 150%;
		transform: translateX(-50%);
	}

	.boxLPIn.boxTopMovie .coverMovie00.cbtn03 {
		position: absolute;
		bottom: -6% !important;
		left: 51% !important;
		width: 150% !important;
		transform: translateX(-50%);
	}

	.boxLPIn.boxTopMovie .coverMovie01 {
		position: absolute;
		top: 3%;
		left: 2%;
		width: 50%;
	}

	.boxLPIn.boxTopMovie .coverMovie02 {
		position: absolute;
		top: 63%;
		right: 2%;
		width: 47%;
	}

	.boxLPIn.boxTopMovie .coverMovie02S {
		position: absolute;
		top: 63%;
		right: 4%;
		font-size: bold;
		line-height: 21px;
	}

	.boxLPIn.boxTopMovie .coverMovie02S .line1 {
		display: inline-block;
		padding-top: 5%;
		font-size: 2rem;
		font-size: 5vw;
		line-height: 1.5;
		letter-spacing: 0.1em;
	}

	.boxLPIn.boxTopMovie .coverMovie02S .line2 {
		display: inline-block;
		font-size: 4rem;
		font-size: 7vw;
		line-height: 1;
		letter-spacing: 0.05em;
	}

	.boxLPIn.boxTopMovie .coverMovie02S .line3 {
		display: inline-block;
		margin-right: -1em;
		font-size: 3.2rem;
		font-size: 6vw;
		letter-spacing: 1em;
	}

	.boxLPIn.boxTopMovie .coverMovie03 {
		position: absolute;
		right: 2%;
		bottom: 2%;
		width: 43%;
		padding: 5px;
		border: 4px solid #fff;
		border-radius: 10px;
	}

	.boxLPIn.boxTopMovie .coverMovie03 p {
		font-size: 3.3vw;
	}

	.boxLPIn.boxTopMovie .coverMovie04 {
		position: absolute;
		top: 32%;
		left: 37%;
		font-weight: bold;
		font-size: 2rem;
		font-size: 5vw;
		transform: rotateZ(11deg) skew(15deg);
	}

	.boxLPIn.boxTopMovie .coverMovie05 {
		position: absolute;
		top: 29%;
		left: -38%;
		width: 100%;
		color: #ffec36;
		font-weight: bold;
		font-size: 2rem;
		font-size: 4vw;
		text-align: center;
	}

	.boxLPIn.boxTopMovie .coverMovie05 span {
		display: block;
		width: 100%;
	}

	.boxLPIn.boxTopMovie .coverMovie08 {
		bottom: 2%;
		left: 2%;
		font-size: 3.3vw;
		border: 1px solid #fff;
	}

	.boxLPIn.boxTopMovie .coverMovie08 p {
		font-size: 3.3vw;
	}

	.boxLPIn.boxTopMovie .coverMovie08 ul li a {
		display: block;
		padding-left: 10px;
		font-size: 3.3vw;
		font-size: 3.3vw;
		text-align: center;
	}

	.boxLPIn.boxTopMovie .coverMovie09 {
		top: 3%;
		right: 2%;
		font-size: 3.3vw;
	}

	.boxLPIn.boxTopMovie .coverMovie09 a {
		padding: 7px 32px;
	}

	.boxLPIn.boxTopMovie .coverMovie06 {
		top: 13%;
		right: 2%;
		padding: 0 5px;
		font-size: 3.3vw;
	}

	.boxLPIn.boxTopMovie .coverMovie07 span,
	.boxLPIn.boxTopMovie .coverMovie07 {
		top: 20%;
		right: 2%;
		font-size: 3.3vw;
	}

	.cbtn01 {
		top: 65% !important;
		right: 4% !important;
		line-height: 15px !important;
	}

	.cbtn02 {
		font-size: 7.3vw !important;
	}

	.boxLPIn .boxLPIn01 video.cbtn04 {
		margin-top: 0;
	}

	@keyframes opacity01 {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	.boxLPWide {}

	.boxLPWide.type01,
	.boxLPWide.type02 {
		margin-bottom: 5%;
		color: #fff;
		background-color: #005ca7;
	}

	.boxLPWide.type01 {
		padding: 17px 0 7px 0;
	}

	.boxLPWide.type02 {
		padding: 17px 0 7px 0;
		background: #006785;
	}

	.boxLPWideIn {
		width: 100%;
		margin: 0 auto;
	}

	.boxLPWide.type01 .boxLPWideIn {
		padding: 0 5%;
		font-size: 1.95rem;
		font-size: 7vw;
		line-height: 1.25em;
	}

	.boxLPWide.type02 .boxLPWideIn {
		text-align: center;
	}

	.boxLPWide.type02 .boxLPWideIn .ttl {
		font-size: 1.95rem;
		font-size: 4vw;
	}

	.boxLPWide.type01 .boxLPWideIn .txtLetterSpace01 {
		letter-spacing: 0.22em;
	}

	.boxLPIn02,
	.boxLPIn03,
	.boxLPIn04 {
		margin-bottom: 5%;
	}

	.boxLPIn02,
	.boxLPIn03 {
		position: relative;
	}

	.boxLPIn02 img,
	.boxLPIn03 img {
		width: 100%;
	}

	.txtCont {
		position: absolute;
		color: #333;
	}

	.boxLPIn02 .txt01,
	.boxLPIn02 .txt02 {
		top: 244px;
		top: 52.9%;
		font-weight: bold;
		font-size: 1rem;
		font-size: 2vw;
	}

	.boxLPIn02 .txt01 {
		left: 132px;
		left: 13%;
	}

	.boxLPIn02 .txt02 {
		left: 336px;
		left: 34%;
	}

	.boxLPIn02 .txt03,
	.boxLPIn02 .txt04 {
		left: 492px;
		left: 49%;
		font-weight: bold;
		font-size: 1.5rem;
		font-size: 3vw;
	}

	.boxLPIn02 .txt03 {
		top: 133px;
		top: 28%;
	}

	.boxLPIn02 .txt04 {
		top: 215px;
		top: 46%;
	}

	.boxLPIn02 .txt05 {
		top: 265px;
		top: 58%;
		left: 734px;
		left: 76%;
		display: none;
		font-weight: bold;
		font-size: 0.6rem;
		font-size: 0.95vw;
	}

	.boxLPIn02 .txt05 span {
		display: inline-block;
		width: 100%;
		line-height: 1;
		letter-spacing: -0.15em;
	}

	.boxLPIn02 .txt05 ul {
		margin-bottom: 0;
	}

	.boxLPIn02 .txt05 li {
		font-weight: bold;
		font-size: 0.6rem;
		font-size: 0.95vw;
		line-height: 1.2;
		letter-spacing: -0.12em;
	}

	.boxLPIn02 {
		padding: 0 10px;
	}

	/* ------------------------------------------------------------------------------------------------------------------------*/
	.boxLPIn02 h3 {
		margin: 20px 0 0;
		font-size: 18px;
	}

	.boxLPIn02 .bluebg ul {
		padding: 10px;
	}

	.boxLPIn02 ul li {
		width: 100%;
	}

	.boxLPIn02 ul li h4 {
		margin-top: 20px;
		font-size: 16px;
	}

	.boxLPIn02 ul li .bluebg {
		padding: 5px;
	}

	.boxLPIn02 ul li .bluebg ul {
		padding: 10px;
	}

	.boxLPIn02 ul li .bluebg ul li b {
		padding: 0 5px;
		font-size: 15px;
	}

	.boxLPIn02 ul li .bluebg ul li span {
		padding: 10px 10px 5px 10px;
		font-size: 14px;
	}

	.boxLPIn02 .bluebg ul li img {
		width: 20px;
		vertical-align: middle;
	}

	.boxLPIn02 ul li .bluebg2 {
		padding: 5px;
	}

	.boxLPIn02 ul li .bluebg2 ul {
		padding: 10px !important;
	}

	.boxLPIn02 ul li .bluebg2 ul li a {
		padding: 0 5px;
		font-size: 16px;
		line-height: 20px;
	}

	.boxLPIn02 ul li .bluebg2 ul li a b {
		font-size: 12px;
	}

	.boxLPIn02 ul li .bluebg2 ul li span {
		padding: 10px 10px 5px 10px;
		font-size: 14px;
	}

	.boxLPIn02 ul li .bluebg2 ul li img {
		width: 20px;
		vertical-align: middle;
	}

	.boxLPIn02 ul li .bluebg2 ul li:last-child {
		margin-right: 0;
	}

	/* ------------------------------------------------------------------------------------------------------------------------*/

	.boxLPIn04 {
		padding: 0 10px;
	}

	.boxLPIn04 .bluebg ul {
		padding: 10px;
	}

	.boxLPIn04 .bluebg ul li span {
		display: block;
		margin-bottom: 10px;
		padding: 10px 10px 5px 10px;
		font-size: 15px;
	}

	.boxLPIn04 .bluebg ul li img {
		display: block;
		width: 25px;
		margin: 0 auto;
		vertical-align: middle;
		transform: rotate(90deg);
	}

	.boxLPIn04 p {
		font-size: 14px;
	}

	.boxLPIn04 .pdf_btn ul li {
		display: block;
		width: 100%;
		margin-right: 0;
		margin-bottom: 20px;
		border: 4px solid #fff;
		border-radius: 20px;
	}

	.boxLPIn04 .pdf_btn ul li:last-child {
		margin-right: 0;
	}

	.boxLPIn04 .pdf_btn ul li a {
		font-size: 17px;
		padding: 15px 10px;
	}

	.boxLPIn04 .pdf_btn ul li:last-child a {
		font-size: 14px;
	}

	.boxLPIn05 {
		margin-bottom: 25px;
	}

	.boxLPIn04>.ttl,
	.boxLPIn05>.ttl {
		display: block;
		padding: 5px 0 3px 0;
		color: #fff;
		font-size: 1.75rem;
		font-size: 6vw;
		text-align: center;
		background-color: #005ca7;
	}

	.boxLPIn04 .boxCont {
		position: relative;
		width: 100%;
		padding-top: 62.0833333%;
		background-image: url("/products/building/site/images/lp-04.png");
		background-repeat: no-repeat;
		background-position: center top;
		background-size: contain;
	}

	.boxLPIn05 .boxCont {
		position: relative;
		width: 100%;
		padding-top: 54.1666667%;
		background-image: url("/products/building/site/images/lp-05.png");
		background-repeat: no-repeat;
		background-position: center top;
		background-size: contain;
	}

	.boxLPIn04 .boxCont ul {
		position: absolute;
		top: 100px;
		top: 13%;
		left: 458px;
		left: 46%;
	}

	.boxLPIn05 .boxCont ul {
		position: absolute;
		top: 40px;
		top: 8%;
		left: 458px;
		left: 46%;
	}

	.boxLPIn04 .boxCont li,
	.boxLPIn05 .boxCont li {
		margin-bottom: 5%;
		color: #333;
		font-weight: bold;
		font-size: 1.4rem;
		font-size: 2.3vw;
		line-height: 1em;
	}

	.boxLPIn04 .boxCont li:before,
	.boxLPIn05 .boxCont li:before {
		margin-right: 3px;
		color: #005ca6;
		font-size: 1.7rem;
		font-size: 3vw;
		content: "¡ñ";
	}

	.boxLPIn04 .boxCont li>.ttl,
	.boxLPIn05 .boxCont li>.ttl {
		display: inline-block;
		margin-bottom: 6px;
		font-weight: bold;
		font-size: 1.4rem;
		font-size: 2.3vw;
		line-height: 1.2em;
	}

	.boxLPIn04 .boxCont li span,
	.boxLPIn05 .boxCont li span {
		display: inline-block;
		width: 100%;
		margin-left: 0;
		padding-left: 1.5em;
		line-height: 1.2em;
	}

	.boxBtnToDetail {
		margin-bottom: 30px;
		text-align: center;
	}

	.btnToDetail {
		display: inline-block;
		padding: 10px 31px 10px 31px;
		color: #fff;
		font-size: 1.5rem;
		font-size: 5.2vw;
		letter-spacing: 0.1em;
		background-color: #810025;
		border-radius: 10px;
		box-shadow: 1px 1px 5px 0 #000;
	}

	.btnToDetail span:before {
		margin-right: 5px;
		font-family: FontAwesome;
		content: "\f1c1";
	}

	.boxLPFooter {
		width: 100%;
		/* height: 220px; */
		background-image: url("/products/building/site/images/lp-footer-bg.png");
		background-repeat: no-repeat;
		background-position: center top;
	}

	.boxLPFooterIn01 {
		padding: 17px 5%;
		font-size: 1.05rem;
		font-size: 4.5vw;
		letter-spacing: 0.04em;
		text-align: left;
	}

	.boxLPFooterIn02 {
		padding: 7px 0 5px 0;
		color: #333;
		background-color: #c7e8fa;
	}

	.boxLPFooterIn02LCR {
		display: block;
		width: 100%;
		margin: 0 auto;
		padding-top: 5%;
	}

	.boxLPFooterIn02L {
		display: block;
		width: 100%;
		margin-bottom: 5%;
		text-align: center;
		vertical-align: middle;
	}

	.boxLPFooterIn02C {
		display: block;
		width: 100%;
		margin-bottom: 5%;
		padding: 0 5%;
		font-size: 1.18rem;
		font-size: 3.5vw;
		vertical-align: top;
	}

	.boxLPFooterIn02R {
		display: block;
		width: 100%;
		margin-bottom: 5%;
		padding: 0 5%;
		font-size: 1.05rem;
		font-size: 3.5vw;
		text-align: center;
		vertical-align: bottom;
	}

	.boxLPFooterIn02R .txtTelno,
	.boxLPFooterIn02R .txtFaxno,
	.boxLPFooterIn02R .txtEmail {
		display: inline-block;
	}

	.boxLPFooterIn02R .txtTelno {
		/*margin-right: 5%;*/
	}

	.boxLPFooterIn02R .txtUrl {
		font-size: 1.14rem;
		font-size: 3.5vw;
	}

	.boxLPFooterIn03 {
		padding: 10px 0;
		text-align: center;
	}

	.boxLPIn.boxTopMovie .coverMovie05.cbtn05 {
		top: 31%;
		right: 82%;
		line-height: 17px;
		transform: rotateZ(-63deg) skew(-2deg);
	}


	/* JFE¤Î±¡È⥦¥§¥ÖÁº×ùÇüÑa„‚¹¤·¨¡¡thin_web.html */

	.box_wrapper {
		margin: 0 auto;
		width: 100%;
	}

	.box_spacer-pb60 {
		padding-bottom: 30px;
	}

	.box_wrapper--md {
		margin: 0 auto;
		max-width: 90%;
	}

	.box_ttl {
		background: linear-gradient(-90deg, rgba(78, 155, 211, 1) 0%, rgba(0, 91, 152, 1)100%);
		padding: 15px;
		margin: 0 auto;
		width: 100%;
		text-align: center;
	}

	.box_ttl strong {
		color: #fff;
		font-size: 32px;
		font-weight: bold;
	}

	.box_ttl p {
		font-size: 16px;
		font-weight: 400;
		color: #eaf6facc;
	}

	.box_subttl {
		background-color: #EAF6FA !important;
		padding: 10px 15px;
		padding-left: 20px;
		width: 100%;
		border-bottom: #005b98 solid 3px;
		margin-bottom: 20px;
		box-shadow: 0px 5px 5px -1px rgba(0, 0, 0, 0.2);
	}

	.box_subttl p {
		color: #005b98;
		font-weight: bold;
		font-size: 16px;
	}


	.detail_txt {
		margin-bottom: 20px;
	}

	.detail_txt p {
		color: #000;
		font-size: 14px;
	}

	.detail_bnr img {
		cursor: pointer;
		width: 100%;
		height: auto;
	}

	.pc-none {
		display: block !important;
	}

	.sp-none {
		display: none !important;
	}

	.coverMovie10 {
		position: absolute;
		top: 3%;
		right: 5%;
	}

	.coverMovie10 img {
		width: 250px;
	}

	.coverMovie11 {
		position: absolute;
		top: 50%;
		right: calc(50% - 150px) !important;
	}

	.coverMovie11 img {
		width: 300px;
	}

	.coverMovie12 {
		position: absolute;
		top: 70%;
		left: calc(50% - 150px);
	}

	.coverMovie12 img {
		width: 300px;
	}


	.shiboran_01 {
		position: absolute;
		top: 0;
		right: 0;
	}

	.shiboran_01 img {
		width: 100%;
	}

	.shiboran_video {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 1 / 1;
	}

	.boxLPIn.shiboran .boxLPIn01 video {
		position: absolute;
		top: 100px;
		right: 0;
		left: 0;
	}

	.shiboran_02 img {
		width: 100% !important;
	}

	.shiboran_02 {
		position: absolute;
		top: 50%;
		right: 0;
	}


}

/* /sp */