@charset "utf-8";

/* CSS Document */
#view,
#view2,
#view3 {
	background-size: 100%;
	margin-left: auto;
	margin-right: auto
}

.lity-content {
	position: relative
}

.lity-close {
	position: absolute !important;
	top: -35px !important
}

.lity-content img {
	max-width: 750pt;
	width: auto;
	margin-left: auto;
	margin-right: auto;
	max-height: 90vh !important;
	overflow-y: scroll
}

.infiniteslide_clone {
	position: relative;
	z-index: 6;
	pointer-events: auto
}

.wrap01 {
	width: 100%
}

.wrap01,
.wrap02 {
	max-width: 750pt;
	margin-left: auto;
	margin-right: auto
}

.wrap02 {
	width: 90%
}

.notes {
	line-height: 1.5 !important
}

.infiniteslide a,
.infiniteslide-2 a {
	display: block;
	width: 100%;
	height: 100%
}

.contents h3 {
	font-size: 20px;
	line-height: 1.7;
	letter-spacing: 3px
}

.contents p {
	line-height: 2;
	font-size: 13px;
	letter-spacing: 1.3px
}

.contents p .big {
	font-size: 150%;
	font-weight: 700;
	text-decoration: underline
}

.slider-box {
	z-index: 1;
	background: url(../images/img_bg_02.png)no-repeat left bottom;
	padding-left: 2%;
	background-size: 130px;
	padding-bottom: 30px
}

.pc-menu {
	position: fixed;
	bottom: 0;
	width: 8%;
	right: 16%;
	z-index: 4
}

.pc-menu,
.pc-menu li {
	margin-bottom: 30px
}

.pc-menu li:last-child {
	margin-bottom: 0
}

h2.ttl-img {
	width: 166px;
	margin-left: auto;
	margin-right: auto
}

h2.ttl-img.ex {
	width: 350px
}

.illust-2 {
	position: absolute;
	bottom: -70px;
	width: 12%;
	left: 60%;
	z-index: 3
}

.illust-1 {
	position: absolute;
	top: -200px;
	width: 42%;
	left: 40%;
	z-index: 2
}

.img-box {
	padding: 20px 10px;
	background-image: url(../images/img_bg_01.png), url(../images/img_bg_02.png);
	background-position: right top, left bottom;
	background-repeat: no-repeat, no-repeat;
	background-size: 130px, 130px
}

.box-1-1 {
	margin-right: -6%;
	position: relative;
	z-index: 4
}



.box2 .left-box,
.box-1-1 {
	width: 50%
}

.box2 .right-box {
	width: 42%;
	margin-right: 5%;
	float: right
}

.illust-3 {
	position: absolute;
	width: 16%;
	top: -60px;
	right: 0
}

.yajirushi-1 {
	left: 6%
}

.yajirushi-1,
.yajirushi-2 {
	position: absolute;
	width: 10%;
	top: 50%
}

.yajirushi-2 {
	right: 6%
}

.roll-tex {
	width: 24%;
	top: 12%;
	left: -4%;
	position: absolute;
	z-index: 5
}

.illust-4 {
	width: 18%;
	margin-left: 35%
}

.illust-4,
.illust-5 {
	display: inline-block
}

.illust-5 {
	width: 9%;
	margin-top: 12%
}

.illust-6 {
	width: 16%;
	left: 5%;
	top: 40px;
	position: absolute
}

.part-3 .barcode {
	right: 0;
	bottom: 0;
	width: 14%;
	position: absolute
}

.part-4 .barcode {
	top: 0
}

.part-4 .barcode,
.part-6 .barcode {
	right: 0;
	width: 18%;
	position: absolute
}

.part-6 .barcode {
	top: 5%
}

.box3 {
	max-width: 980px;
	width: 90%;
	margin-left: auto;
	margin-right: auto
}

.box3.ex {
	max-width: 500px
}

.box4 {
	max-width: 980px;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	font-size: 0
}

.box4 li {
	display: inline-block
}

.box4 li img {
	margin-bottom: 3px
}

.box4 li:nth-child(1) {
	width: 33.05%;
	margin-right: 3px
}

.box4 li:nth-child(2) {
	width: 26.6%;
	margin-right: 3px
}

.box4 li:nth-child(3) {
	width: 39.3%;
	margin-right: 0
}

.box4.ex li:nth-child(1) {
	width: 33.1%
}

.box4.ex li:nth-child(3) {
	width: 26.8%;
	margin-right: 0
}

.box4.ex li:nth-child(2) {
	width: 39.4%;
	margin-right: 3px
}

@media screen and (min-width: 1001px) {
	.box4 img.box4_image_madori_2{
		margin-bottom: 3px !important;
	}
}

@media screen and (min-width: 769px) and (max-width: 1000px) {
	.box4 img.box4_image_madori_2{
		display: block;
		margin-bottom: 2px !important;
	}
}

@media screen and (max-width: 768px) {
	.box4 img.box4_image_madori_2{
		margin-bottom: 0px !important;
	}
}

.box5 .madori-wrap {
	padding-bottom: 50px;
	padding-top: 30px
}

.box5 .madori-wrap .left {
	width: 69%;
	float: left
}

.box5 .madori-wrap .right {
	width: 30%;
	float: right
}

.box5 .madori-wrap.bob {
	border-bottom: 1px dotted #000
}

.box5.ex {
	background-image: url(../images/barcode_bg.png), url(../images/barcode_bg.png);
	background-position: left top, left bottom;
	background-repeat: repeat-x, repeat-x;
	margin-top: 90px;
	background-size: 100%
}

.box5.ex h3 {
	color: #a58c41
}

.part-4 ul {
	font-size: 0
}

.part-4 li {
	width: 47%;
	margin-right: 6%;
	display: inline-block;
	vertical-align: top;
	margin-bottom: 40px
}

.part-4 li:nth-child(2n) {
	margin-right: 0
}

.barcode-2 {
	position: absolute;
	top: 170px;
	left: 0;
	width: 18%
}

.barcode-3 {
	top: -20px
}

.barcode-3,
.barcode-4 {
	right: 0;
	position: absolute;
	width: 20%
}

.barcode-4 {
	bottom: -40px
}

.illust-7 {
	left: 25%;
	top: 40px
}

.illust-7,
.illust-8 {
	width: 8%;
	position: absolute
}

.illust-8 {
	left: 8%;
	top: -10px
}

.illust-9 {
	width: 23%;
	right: 5%;
	top: 55px;
	position: absolute
}

.part-5,
.part-7 {
	background: #f3f3f3
}

.bg-area {
	width: 58%;
	position: absolute;
	top: 0;
	right: 0;
	padding-bottom: 20px;
	padding-left: 10px;
	background-image: url(../images/img_bg_02.png);
	background-position: left bottom;
	background-repeat: no-repeat;
	background-size: 130px, 130px
}

.bg-area .bg-img {
	width: 100%;
	height: 420px;
	background: url(../images/pic_01.jpg)no-repeat center center;
	background-size: cover
}

.bg-area-2 {
	width: 48%;
	position: absolute;
	top: 0;
	left: 0
}

.bg-area-2 .bg-box {
	padding-top: 20px;
	padding-right: 10px;
	background-image: url(../images/img_bg_01.png);
	background-position: right top;
	background-repeat: no-repeat;
	background-size: 130px, 130px
}

.bg-area-2 .bg-img-2 {
	width: 100%;
	height: 610px;
	background: url(../images/pic_04.jpg)no-repeat center center;
	background-size: cover;
	z-index: 2
}

.bg-area-2 .img-box.ptn1 {
	width: 38%;
	top: -90px;
	left: 0;
	right: 0;
	max-width: 25pc
}

.bg-area-2 .img-box.ptn1,
.bg-area-2 .img-box.ptn2 {
	position: absolute;
	z-index: 3;
	margin-left: auto;
	margin-right: auto
}

.bg-area-2 .img-box.ptn2 {
	width: 61%;
	top: 519px;
	right: 1%;
	max-width: 500px
}

.box-4 {
	width: 44%;
	float: right
}

.fun-box {
	border-top: 1px solid #000;
	background: #fff;
	padding-right: 5%
}

.fun-box p {
	padding-left: 6%
}

.fun-box .fun-ttl {
	border-bottom: 1px solid #000;
	padding-bottom: 5px;
	font-size: 14px;
	width: 32%
}

.case-ttl span {
	border-bottom: 1px dotted #000
}

.case-img {
	width: 80%;
	margin-left: auto;
	margin-right: auto
}

.house-list {
	font-size: 0;
	text-align: center;
	border-bottom: 1px solid #000;
	padding-bottom: 30px;
	margin-bottom: 40px
}

.house-list li {
	display: inline-block;
	width: 23%;
	margin: 0 1%;
	vertical-align: bottom;
	padding-bottom: 20px
}

.house-list li:last-child {
	vertical-align: top
}

.house-box>div {
	width: 49%
}

.ex-tex {
	width: 90%;
	max-width: 260px;
	margin-left: auto;
	margin-right: auto
}

.box5 .left-box,
.box5 .left-box .trans {
	width: 40%
}

.box5 .right-box {
	width: 52%
}

.illust-10 {
	top: -50px;
	position: absolute;
	right: 27%;
	width: 13%
}

.illust-11 {
	position: absolute;
	top: 60px;
	width: 18%;
	left: 9%
}

.illust-12 {
	position: absolute;
	bottom: -30px;
	width: 16%;
	right: 6%
}

.movie-img {
	max-width: 625px;
	margin-left: auto;
	margin-right: auto;
	width: 90%
}

.xnoneTab,
.xnoneTab2 {
	position: relative;
	overflow: hidden
}

.slick-1,
.slick-2 {
	font-size: 0
}

.slick-1 li,
.slick-2 li {
	margin: 0
}

.xnoneTab2 .tabarea,
.xnoneTab3 .tabarea,
.xnoneTab4 .tabarea,
.xnoneTab .tabarea {
	clear: both;
	height: 0;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	z-index: 1
}

.xnoneTab3 .tabarea,
.xnoneTab4 .tabarea,
.xnoneTab .tabarea {
	position: absolute
}

.xnoneTab2 .tabarea.active,
.xnoneTab3 .tabarea.active,
.xnoneTab4 .tabarea.active,
.xnoneTab .tabarea.active {
	display: block;
	width: 100%;
	visibility: visible;
	height: 100%;
	opacity: 1;
	z-index: 2;
	position: relative;
	pointer-events: auto
}

#tab06 {
	top: 0
}

.tab.ptn1 {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	font-size: 0;
	max-width: 400px;
	width: 90%;
	margin: 0 auto 50px;
}

.tab.ptn1 li {
	width: calc(100%/2.2);
	height: 50px;
	background-size: contain;
	cursor: pointer
}

.tab.ptn2 {
	max-width: 620px;
	width: 90%;
	margin-left: auto;
	margin-right: auto
}

.tab.ptn2 li {
	width: 46%;
	height: 50px;
	background-size: contain;
	cursor: pointer
}

.list_01 {
	background: url(../images/tab_02_off.png) no-repeat center bottom/100%;
}

.list_01.select {
	background: url(../images/tab_02_on.png) no-repeat center bottom/100%;
}

/*20200227追加*/
.list_04 {
	background: url(../images/tab_04_off.png) no-repeat center bottom/100%;
}

.list_04.select {
	background: url(../images/tab_04_on.png) no-repeat center bottom/100%;
}

.btn-area {
	max-width: 760px;
	width: 90%;
	margin-left: auto;
	margin-right: auto
}

.part-10 {
	border-top: 5px double #000
}

.link-list {
	font-size: 0;
	text-align: center
}

.link-list li {
	display: inline-block;
	width: 31%;
	margin-right: 3%
}

.link-list li:last-child {
	margin-right: 0
}

.reel {
	margin-left: auto;
	margin-right: auto
}

.contents {
	overflow-x: hidden
}

.loop_css,
.loop_wrap {
	overflow: hidden;
	left: 50%;
	margin-left: -50vw
}

.loop_css {
	position: relative;
	width: 200vw;
	white-space: nowrap
}

.loop_css ul {
	float: left;
	width: 50%;
	margin: 0;
	padding: 0
}

.loop_css li {
	display: inline-block;
	float: left;
	width: 20%;
	margin: 0;
	list-style: none;
	text-align: center
}

.loop_css.ex li {
	width: 25%
}

.loop_css li a {
	display: block
}

.loop_css li img {
	display: block;
	width: 100%;
	height: auto;
	min-width: 1%
}

.loop_css li a:hover {
	opacity: .7
}

.loop_css ul:first-child {
	-webkit-animation: a 50s -25s linear infinite;
	animation: a 50s -25s linear infinite;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform
}

.loop_css ul+ul {
	-webkit-animation: b 50s linear infinite;
	animation: b 50s linear infinite
}

.loop_css2:hover ul {
	animation-play-state: paused;
	-webkit-animation-play-state: paused
}

@-webkit-keyframes a {
	0 {
		-webkit-transform: translateX(100%);
		-ms-transform: translateX(100%);
		transform: translateX(100%)
	}

	to {
		-webkit-transform: translateX(-100%);
		-ms-transform: translateX(-100%);
		transform: translateX(-100%)
	}
}

@keyframes a {
	0 {
		-webkit-transform: translateX(100%);
		-ms-transform: translateX(100%);
		transform: translateX(100%)
	}

	to {
		-webkit-transform: translateX(-100%);
		-ms-transform: translateX(-100%);
		transform: translateX(-100%)
	}
}

@-webkit-keyframes b {
	0 {
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0)
	}

	to {
		-webkit-transform: translateX(-200%);
		-ms-transform: translateX(-200%);
		transform: translateX(-200%)
	}
}

@keyframes b {
	0 {
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0)
	}

	to {
		-webkit-transform: translateX(-200%);
		-ms-transform: translateX(-200%);
		transform: translateX(-200%)
	}
}

.loop_css:hover ul {
	animation-play-state: paused
}

@supports(-ms-ime-align:auto) {
	.loop_css:hover ul {
		animation-play-state: running
	}
}

.view-wrap iframe {
	width: 100%;
	height: 600px
}

.helpbox {
	width: 20%;
	margin-left: auto;
	margin-right: auto
}

@media screen and (min-width: 769px) and (max-width: 1000px) {
	.box-1-1{
		margin-right: 0%;
		margin-left: 3%;
	}
}

@media print,
screen and (min-width:769px) {
	.slider-box {
		width: 93%;
		margin-left: -11.5%
	}

	.name-logo {
		width: 36%;
		top: 15%;
		right: 3%
	}

	.design-logo,
	.name-logo {
		z-index: 2;
		position: absolute
	}

	.design-logo {
		width: 5%;
		top: 42%;
		right: 0
	}

	.bg-area {
		width: 58%;
		position: absolute;
		top: 0;
		right: 0
	}

	.box-1-1 .img-box {
		margin-left: 0;
		width: 70%
	}
}

@media only screen and (max-width:768px) {
	.slider-box {
		width: 93%
	}

	.name-logo,
	.slider-box {
		margin-left: auto;
		margin-right: auto
	}

	.name-logo {
		z-index: 2;
		width: 62%;
		margin-top: 7%;
		position: relative
	}

	.design-logo {
		width: 8%;
		position: absolute;
		bottom: 0;
		right: 6%;
		z-index: 2
	}

	.contents h3 {
		font-size: 1pc;
		line-height: 1.5
	}

	.contents p {
		line-height: 1.75;
		font-size: 9pt;
		text-align: justify;
	}

	.slider-box {
		z-index: 1;
		background: url(../images/img_bg_02.png)no-repeat left bottom;
		padding-left: 2%;
		background-size: 130px;
		padding-bottom: 9pt
	}

	h2.ttl-img {
		width: 34%;
		margin-left: auto;
		margin-right: auto
	}

	h2.ttl-img.ex {
		width: 56%
	}

	.illust-2 {
		bottom: -54%;
		width: 16%;
		right: 36%;
		z-index: 3
	}

	.illust-1,
	.illust-2 {
		position: absolute;
		left: auto
	}

	.illust-1 {
		top: auto;
		width: 45%;
		right: 5%;
		bottom: 18%;
		z-index: 2
	}

	.img-box.ex {
		width: 40%;
		margin-left: 10.5%
	}

	.img-box {
		padding: 9pt 10px;
		background-image: url(../images/img_bg_01.png), url(../images/img_bg_02.png);
		background-position: right top, left bottom;
		background-repeat: no-repeat, no-repeat;
		background-size: 50px, 50px
	}

	.box-1-1 {
		width: 90%
	}

	.box2 .left-box,
	.box-1-1 {
		margin-left: auto;
		margin-right: auto
	}

	.box2 .left-box {
		width: 84%;
		float: none
	}

	.box2 .left-box img {
		display: block;
		margin-left: auto;
		margin-right: auto
	}

	.box2 .right-box {
		width: 100%;
		margin-right: 0;
		float: none;
		margin-top: 10%
	}

	.illust-3 {
		position: absolute;
		width: 21%;
		top: -40px;
		right: 3%
	}

	.yajirushi-1 {
		left: 4%
	}

	.yajirushi-1,
	.yajirushi-2 {
		position: absolute;
		width: 10%;
		top: 50%
	}

	.yajirushi-2 {
		right: 4%
	}

	.roll-tex {
		width: 32%;
		top: 24%;
		left: -18%;
		position: absolute
	}

	.illust-4 {
		top: 11%
	}

	.illust-4,
	.illust-4.ex1 {
		position: absolute;
		width: 13%;
		right: 6%;
		margin-top: 2%;
	}

	.illust-4.ex1 {
    top: 23%;
	}

	.illust-4.ex2 {
		position: absolute;
		width: 13%;
		top: 28%;
		right: 6%
	}

	.illust-5 {
		width: 8%;
		left: 16%;
		top: 2%;
		transform: rotateY(180deg);
		position: absolute
	}

	.illust-6 {
		width: 23%;
		right: 4%;
		top: 20px;
		position: absolute
	}

	.part-3 .barcode {
		right: 0;
		bottom: 0;
		width: 14%;
		position: absolute
	}

	.part-4 .barcode {
		right: -15%;
		top: 2%;
		width: 30%;
		position: absolute
	}

	.part-6 .barcode {
		right: 0;
		top: 0;
		width: 30%;
		position: absolute
	}

	.box3 p {
		width: 100%;
		margin-top: 5%;
		text-align: right
	}

	.box3 .left-box img {
		margin-left: -15px
	}

	.part-4 ul {
		font-size: 0
	}

	.part-4 li {
		width: 100%;
		margin-right: 6%;
		display: inline-block;
		vertical-align: top;
		margin-bottom: 6%
	}

	.part-4 li:nth-child(2n) {
		margin-right: 0
	}

	.barcode-2 {
		position: absolute;
		top: 30px;
		left: 0;
		width: 30%
	}

	.barcode-2.ex {
		left: -10%
	}

	.barcode-3 {
		top: -20px
	}

	.barcode-3,
	.barcode-4 {
		right: 0;
		position: absolute;
		width: 20%
	}

	.barcode-4 {
		bottom: -.5%
	}

	.illust-7 {
		width: 8%;
		left: 25%;
		top: -20px;
		position: absolute
	}

	.illust-8 {
		width: 24%;
		left: 8%;
		top: 40px;
		position: absolute
	}

	.illust-9 {
		width: 30%;
		right: 0;
		top: 85px;
		position: absolute
	}

	.part-5,
	.part-7 {
		background: #f3f3f3
	}

	.bg-area {
		width: 90%;
		margin-left: 10%;
		position: relative;
		top: 0;
		right: 0;
		padding-bottom: 9pt;
		padding-left: 9pt;
		background-repeat: no-repeat;
		background-size: 75pt, 75pt
	}

	.bg-area .bg-img {
		width: 100%;
		height: 100%;
		background: url(../images/pic_01_sp.jpg)no-repeat center center;
		background-size: cover;
		padding-top: 82%
	}

	.box-4 {
		width: 100%;
		float: none
	}

	.fun-box {
		border-top: 1px solid #000;
		background: #fff
	}

	.fun-box p {
		padding-left: 3%
	}

	.fun-box .fun-ttl {
		border-bottom: 1px solid #000;
		padding-bottom: 1%;
		margin-bottom: 1%;
		line-height: 1;
		font-size: 13px;
		width: 50%
	}

	.case-ttl span {
		border-bottom: 1px dotted #000
	}

	.case-img {
		width: 100%;
		margin-left: 0;
		padding-left: 0 !important
	}

	.house-list {
		font-size: 0;
		margin-top: 12%
	}

	.house-list li {
		display: inline-block;
		width: 48%;
		margin: 0 1%;
		vertical-align: bottom;
		padding-bottom: 20px
	}

	.house-list li:last-child {
		vertical-align: top
	}

	.infiniteslide li {
		width: 170px
	}

	.infiniteslide-2 li {
		width: 90pt
	}

	.box5 .left-box {
		width: 100%
	}

	.box5 .left-box .trans {
		width: 40%
	}

	.box5 .right-box {
		width: 100%
	}

	.illust-10 {
		top: -60px;
		position: absolute;
		right: 20%;
		width: 21%
	}

	.illust-11 {
		position: absolute;
		top: 16%;
		width: 18%;
		left: 5%
	}

	.illust-12 {
		position: absolute;
		top: 4%;
		width: 22%;
		right: 6%
	}

	.movie-img {
		max-width: 625px;
		margin-left: auto;
		margin-right: auto;
		width: 86%
	}

	.xnoneTab,
	.xnoneTab2,
	.xnoneTab3,
	.xnoneTab4 {
		position: relative;
		overflow: hidden
	}

	.xnoneTab2 p,
	.xnoneTab3 p,
	.xnoneTab4 p,
	.xnoneTab p {
		text-align: justify
	}

	.tab.ptn1 {
		width: 90%;
		margin-left: auto;
		margin-right: auto
	}

	.tab.ptn1 li {
		width: 48%;
		padding-top: 11%;
		background-size: contain;
		margin-bottom: 5%;
		margin-right: 0
	}

	.tab.ptn2 {
		max-width: 620px;
		width: 90%;
		margin-left: auto;
		margin-right: auto
	}

	.tab.ptn2 li {
		width: 48%;
		padding-top: 11%;
		background-size: contain
	}

	.list_05 {
		background: url(../images/tab_05_off_sp.png)no-repeat left top
	}

	.list_05.select {
		background: url(../images/tab_05_on_sp.png)no-repeat left top
	}

	.list_06 {
		background: url(../images/tab_06_off_sp.png)no-repeat left top;
		float: right
	}

	.list_06.select {
		background: url(../images/tab_06_on_sp.png)no-repeat left top
	}

	.btn-area {
		max-width: 760px;
		width: 90%;
		margin-left: auto;
		margin-right: auto
	}

	.part-10 {
		border-top: 5px double #000
	}

	.link-list {
		font-size: 0;
		text-align: center
	}

	.link-list li {
		display: inline-block;
		width: 100%;
		margin-right: 0;
		margin-bottom: 5%
	}

	.link-list li:last-child {
		margin-right: 0;
		margin-bottom: 0
	}

	.view-wrap iframe {
		width: 100%;
		height: 280px
	}

	.helpbox {
		width: 50%;
		margin-left: auto;
		margin-right: auto
	}

	.sp-img li:nth-child(1) {
		margin-bottom: 5%;
		width: 100%
	}

	.sp-img li:nth-child(2) {
		margin-bottom: 5%;
		width: 49%;
		float: left
	}

	.sp-img li:nth-child(3) {
		margin-bottom: 5%;
		width: 48%;
		float: right
	}

	.loop_css ul {
		width: auto
	}

	.loop_css li {
		display: inline-block;
		width: 50vw;
		margin: 0;
		list-style: none;
		text-align: center
	}

	#view {
		padding-top: 62%
	}

	#view,
	#view2,
	#view3 {
		width: 100% !important;
		height: auto !important;
		background-size: contain
	}

	#view2,
	#view3 {
		padding-top: 92%
	}

	.contents {
		overflow-x: hidden
	}

	.loop_wrap {
		display: -webkit-flex;
		display: flex;
		width: 200vw;
		height: 300px
	}

	.loop_css {
		position: relative;
		float: left;
		width: 200vw
	}

	.loop_css,
	.loop_css ul {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-flow: row nowrap;
		flex-flow: row nowrap
	}

	.loop_wrap {
		width: 100vw;
		height: 300px;
		left: 50%;
		margin-left: -50vw;
		overflow: hidden
	}

	.loop_css img {
		width: auto;
		height: 100%
	}

	.list_02 {
		float: right;
		margin-right: 0
	}

	.box4 li {
		amrgin-bottom: 5%
	}

	.box4 li:nth-child(1),
	.box4 li:nth-child(2),
	.box4 li:nth-child(3),
	.box4.ex li:nth-child(1),
	.box4.ex li:nth-child(2),
	.box4.ex li:nth-child(3) {
		width: 100%;
		margin-right: 0
	}

	.box5.ex {
		margin-top: 11%;
		background-size: 150%
	}

	.box5 .madori-wrap {
		padding-bottom: 7%;
		padding-top: 5%
	}

	.box5 .madori-wrap .left {
		width: 100%;
		float: none;
		margin-right: 0
	}

	.box5 .madori-wrap .right {
		width: 70%;
		float: none
	}

	.box3.ex {
		max-width: none
	}
}

@media screen and (min-width:768px) and (max-width:769px) {
	.contents .box-1-1 p {
		font-size: 18px !important;
		line-height: 4.5rem !important;
		text-align: center !important
	}

	.contents .box-1-1 p span.dot {
		letter-spacing: -17px
	}

	.contents h3 {
		font-size: 20px !important;
		line-height: 1.5
	}

	.contents p {
		line-height: 1.75;
		font-size: 14px !important
	}

	.link-list li {
		display: inline-block;
		width: 100%;
		margin-right: auto;
		margin-left: auto;
		margin-bottom: 5%
	}

	.illust-4 {
		top: 10%
	}

	.illust-4,
	.illust-4.ex1 {
		position: absolute;
		width: 13%;
		right: 6%
	}

	.illust-4.ex1 {
		top: 19%
	}

	.part-10 .wrap02 {
		width: 80%;
		margin-right: auto;
		margin-left: auto
	}

	.modalbox,
	.modalbox-2 {
		margin-top: 26% !important
	}

	.illust-4.ex2 {
		position: absolute;
		width: 13%;
		top: 25%;
		right: 6%
	}
}

.madori_tex dt {
	margin-bottom: 20px;
	text-align: left
}

.madori_tex dt hr {
	width: 20px;
	margin-top: 8px;
	margin-bottom: 8px;
	text-align: left
}

.madori_tex dd.kakaku,
.madori_tex dt {
	font-size: 1pc !important;
	letter-spacing: .23em
}

.madori_tex dd.kakaku {
	margin-bottom: 15px
}

.madori_tex dd.kakaku span {
	border-bottom: 2px dashed #000;
	display: inline-block;
	padding: 8px 0
}

.madori_tex dd.kakaku strong {
	font-size: 22px !important
}

.madori_tex dd.menseki {
	line-height: 2;
	font-size: 9pt;
	letter-spacing: 1.3px
}

.madori_tex dd.price {
	font-size: 24px;
	font-weight: 600;
	text-align: left;
	color: #998459;
	margin-top: 1em;
}

.madori_tex dd.price span{
	display: inline-block;
	font-size: 14px;
}

@media screen and (min-width: 769px) and (max-width: 1000px) {
	.madori_tex {
		margin-left: 2.6829268vw;
	}
}

@media only screen and (max-width:768px) {

	.madori_tex dd.kakaku,
	.madori_tex dt {
		font-size: 14px !important;
		margin-bottom: 15px
	}

	.madori_tex dd.kakaku {
		letter-spacing: .2em
	}

	.madori_tex dd.kakaku strong {
		font-size: 18px !important
	}

	.madori_tex dd.menseki {
		font-size: 11px;
		letter-spacing: .8px
	}

	.madori_tex dd.price {
		font-size: 6vw;
		margin-top: 1em;
	}
	
	.madori_tex dd.price span{
		font-size: 3vw;
	}
}

@media only screen and (max-width:768px) {
	.list_03 {
		margin-top: 3%;
	}
}