@charset "utf-8";
/* -----------------------------------------------------------
    about
-------------------------------------------------------------- */

.no-wrap{
    white-space: nowrap;
}

#wrapper {
    overflow: clip;
}


/* -----------------------------
	intro-area
-------------------------------- */
.intro-area{
	margin: 100px 0 0;
}
.intro-area .inner{
	display: flex;
	position: relative;
	gap: 50px;
	justify-content: space-between;
	flex-direction: row-reverse;
}
.intro-area .inner:nth-child(2){
	align-items: center;
	padding: 100px 0 0;
	gap: 150px;
}
.intro-area .inner figure{
	position: relative;
}
.intro-area .inner:nth-child(2) figure{
	margin-left: calc(50% - 50vw);
}

.intro-area .txt-area .catch-s{
	padding: 30px 0 0;
}
.intro-area .txt-area .catch-l{
	padding: 30px 0 0;
}

@media screen and (max-width: 1600px){
	.intro-area .inner:nth-child(2){
		gap: 50px;
	}

}

@media screen and (max-width: 768px){
	.intro-area{
		margin: 50px 0 0;
	}
	.intro-area .inner{
		flex-direction: column;
		gap: 20px;
	}
	.intro-area .inner:nth-child(2){
		flex-direction: column;
		padding: 30px 0 0;
		gap: 40px;
	}
	.intro-area .inner figure{
	}
	.intro-area .inner:nth-child(2) figure{
	}

	.intro-area .txt-area .catch-s{
		padding: 20px 0 0;
	}
	.intro-area .txt-area .catch-l{
		padding: 20px 0 0;
	}
	
	.intro-area .inner:nth-child(2) .txt-area{
		padding: 0 20px;
	}
}

/* -----------------------------
	movie-area
-------------------------------- */
.movie-area{
	margin: 100px 0 0;
}
.movie-area video{
	width: 100%;
	height: 500px;
	padding: 30px;
	background: #333;
	object-fit: cover;
}
@media screen and (max-width: 768px){
	.movie-area{
		margin: 50px 0 0;
	}
	.movie-area video{
		width: 100%;
		height: 200px;
		padding: 15px;
		margin: 10px 0 0;
	}
}

/* -----------------------------
	structure-area
-------------------------------- */
.structure-area{
	margin: 150px 0 0;
	background: var(--light-gray);
	padding: 150px 0;
	background: url(../img/shadow-bg.png) no-repeat top right / contain, var(--light-gray);
}
.structure-area .txt-area .catch-l{
	padding: 30px 0 0;
}
.structure-area .txt-area{
	/*display: flex;
	justify-content: space-between;*/
}
.structure-area .figure-box{
	width: 100%;
	margin: 30px auto 0;
	display: block;
	background: #fff;
	padding: 30px 30px;
}
.structure-area .figure-box img{
	width: 750px;
	margin: 0 auto;
	display: block;
}
.structure-area .txt-box{
	display: flex;
	justify-content: space-between;
}
.structure-block{
	margin: 50px 0 0;
	display: flex;
	flex-direction: column;
	gap: 50px;
}
.structure-block .box{
	display: flex;
	align-items: center;
	gap: 50px;
	background: #fff;
	padding: 50px;
}
.structure-block .box:nth-child(even){
	flex-direction: row-reverse;
}
.structure-block .box img{
	width: 450px;
}
.structure-block .ttl-s{
	position: relative;
}
.structure-block .box .jp{
	color: var(--gold);
	background: #fff;
	position: relative;
	display: inline;
	padding: 0 20px 0 0;
}
.structure-block .box .ttl-s::before{
	content: '';
	position: absolute;
	width: 100%;
	height: 1px;
	top: 50%;
    left: 0%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	border-top: 1px dashed var(--gold);
}
.structure-block .box .catch-m{
	padding: 20px 0 0;
}
.structure-block .box .basic-txt{
	padding: 20px 0 0;
}
@media screen and (max-width: 768px){
	.structure-area{
		margin: 50px 0 0;
		padding: 50px 0;
	}
	.structure-area .txt-area .catch-l{
	}
	.structure-area .txt-area{
		flex-direction: column;
		
	}
	.structure-area .txt-box{
		flex-direction: column;
		gap: 10px;
	}
	.structure-area .txt-area .figure-box{
		margin: 20px 0 0;
		padding: 5px;
	}
	.structure-block{
		margin: 20px 0 0;
		gap: 20px;
	}
	.structure-block .box{
		flex-direction: column;
		padding: 10px;
		gap: 20px;
	}
	.structure-block .box:nth-child(even){
		flex-direction: column;
	}
	.ttl-s{
	}
	.structure-block .box img{
		width: 100%;
	}
	.structure-block .ttl-s{
		margin: 10px 0 5px;
	}
	.structure-block .box .jp{
	}
	.structure-block .box .ttl-s::before{
	}
	.structure-block .box .catch-m{
		padding: 10px 0 0;
	}
	.structure-block .box .basic-txt{
		padding: 10px 0 0;
	}
}

/* -----------------------------
	charm-area
-------------------------------- */
.charm-area{
	margin: 150px 0 0;
}
.charm-block{
	display: flex;
	justify-content: space-between;
	margin: 50px 0 0;
}
.charm-block .box{
	width: calc((100% / 2) - 20px);
	border: solid 1px var(--border1);
	padding: 30px;
}
.charm-block .box img{
	width: 100%;
	height: 350px;
	object-fit: cover;
}
.charm-block .box > div{
	position: relative;
}

.charm-block .box > div .catch-s{
	background: #fff;
	position: absolute;
	top: -40px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	padding: 5px 20px 0;
	height: 45px;
	border-radius: 5px 5px 0 0;
}
.charm-block .box > div .catch-m{
	text-align: center;
	padding: 20px 0 0;
}
.charm-block .box > div .basic-txt{
	padding: 20px 0 0;
}

.comparison-block{
	margin: 50px 0 0;
	text-align: left;
	position: relative;
	display: flex;
	border: solid 1px var(--border1);
	padding: 30px;
}
.comparison-block .box{
	width: 600px;
}
.comparison-block .catch-m{
	padding: 20px 0 0;
}
.comparison-block .basic-txt{
	padding: 30px 0 0;
}
.comparison-block .fukidashi{
	position: absolute;
	font-size: 2rem;
	z-index: 1;
	border-radius: 10px;
	right: -10px;
    top: -40px;
	line-height: 1.3;
	background: #D64E00;
}
.comparison-block .fukidashi::after{
	border-color: #D64E00 transparent transparent;
}
.comparison-block .fukidashi span{
	font-size: 4rem;
}

.comparison-block .img-box{
	width: 500px;
	margin: 0 0 0 50px;
}
.comparison-block .img-box img{
	width: 100%;
}
@media screen and (max-width: 768px){
	.charm-area{
		margin: 50px 0 0;
	}
	.charm-block{
		flex-direction: column;
		gap: 30px;
		margin: 20px 0 0;
	}
	.charm-block .box{
		width: 100%;
		padding: 0;
		border: none;
	}
	.charm-block .box img{
		width: 100%;
		height: auto;
		object-fit: cover;
	}
	.charm-block .box > div{
	}

	.charm-block .box > div .catch-s{
	}
	.charm-block .box > div .catch-m{
		padding: 10px 0 0;
	}
	.charm-block .box > div .basic-txt{
		padding: 10px 0 0;
	}


	.comparison-block{
		margin: 20px 0 0;
		position: relative;
		display: block;
		padding: 20px 15px;
		border: none;
		background-color: var(--light-gray);
	}
	.comparison-block .box{
		width: 100%;
	}
	.comparison-block .catch-s{
		font-size: 1.8rem;
		line-height: 1.2;
		padding: 4px 10px 3px;
		margin: 5px 0 0;
		display: inline-block;
		color: #fff;
		background: var(--gold);
	}
	.comparison-block .catch-m{
		padding: 10px 0 0;
	}
	.comparison-block .basic-txt {
		padding: 10px 0 0;
	}
	.comparison-block .fukidashi{
		position: static;
		font-size: 1.6rem;
		margin: 10px 0 0;
		text-align: center;
		margin: 15px auto 0;
		display: block;
	}
	.comparison-block .fukidashi::after{
	}
	.comparison-block .fukidashi span{
		font-size: 2.5rem;
	}

	.comparison-block .img-box{
		width: 100%;
		margin: 30px 0 0;
	}
	.comparison-block img{
		max-width: 100%;
		margin: 20px 0 0;
	}
}

/* -----------------------------
	data-area
-------------------------------- */
.data-area{
	margin: 150px 0 0;
	padding: 100px 0;
	background: var(--light-gray);
	background: url(../img/shadow-bg.png) no-repeat top right / cover, var(--light-gray);
}
.data-area .top-box{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.data-area .image-box{
	width:50%;
}
.data-area .image-box .txt{
	font-size: 1.4rem;
}
.data-area .top-box .image{
	width: 100%;
	border: solid 1px var(--border1);
	margin: 10px 0 0;
	background: #fff;
}
.data-area .txt-area .catch-l{
	padding: 30px 0 0;
}
.data-area .txt-area .basic-txt{
	padding: 30px 0 0;
}

.data-area ul{
	margin: 50px 0 0;
	display: flex;
	justify-content: space-between;
}
.data-area ul li{
	width: calc((100% / 2) - 20px);
}
.data-area ul li a{
	display: flex;
 background: url("../img/ordermade-bg.jpg") no-repeat top center / cover;
	align-items: center;
	position: relative;
}
.data-area ul li .catch-s{
	padding: 10px 0 0;
	position: relative;
	line-height: 1;
	transition: .3s all;
	color: #fff;
}
.data-area ul li a::before{
	content: '';
    position: absolute;
    width: 30px;
    height: 10px;
   bottom: 20px;
    right: 20px;
    background: url("../img/btn-more-arrow-wht.svg") no-repeat top center / contain;
    transition: .3s all;
}
.data-area ul li:hover .catch-s{
	color: var(--gold);
}
.data-area ul li:hover a::before{
	right: 15px;
}
.data-area ul li figure{
	overflow: hidden;
	width: 200px;
	height: 150px;
	margin: 0 30px 0 0;
}
.data-area ul li:hover img{
	filter: brightness(0.6);
}
.data-area ul li img{
	width: 100%;
	transition: .3s all;
	height: 150px;
	object-fit: cover;
}
@media screen and (max-width: 768px){
	.data-area{
		margin: 50px 0 0;
		padding: 50px 0;
	}
	.data-area .top-box{
		display: block;
	}
	.data-area .image-box{
		width:100%;
	}
	.data-area .top-box .image{
		width: 100%;
	}
	.data-area .txt-area{

	}
	.data-area .txt-area .catch-l{
		padding: 10px 0 0;
	}
	.data-area .txt-area .basic-txt {
		padding: 10px 0 0;
	}
	
	.data-area ul{
		flex-direction: column;
		gap: 20px;
		margin: 20px 0 0;
	}
	.data-area ul li{
		width: 100%;
	}
	.data-area ul li figure{
		margin: 0 20px 0 0;
		width: 120px;
	}
	.data-area ul li .catch-s{
		padding: 0;
		line-height: 1.4;
	}
	.data-area ul li img{
	}
}

/* -----------------------------
	comparison-area
-------------------------------- */
.comparison-area{
	margin: 150px 0 0;
}
.table_design09 {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;

  text-align: center;
	margin: 30px 0 0;
}
.table_design09 tr {
  background-color: var(--light-gold);
	border-top: solid 1px var(--border1);

}
.table_design09 tr:nth-child(even) {
  background-color: #fff;
}
.table_design09 th, .table_design09 td {
  padding: 20px;
}
.table_design09 th:nth-child(2),
.table_design09 td:nth-child(2){
	background: #fffcea;
	border-left: solid 3px var(--gold);
	border-right: solid 3px var(--gold);
	font-weight: bold;
}
.table_design09 tr:nth-child(1) {
  border: none;
}
.table_design09 th:nth-child(2){
border-top: solid 6px var(--gold);
}
.table_design09 tr:last-of-type td:nth-child(2){
	border-bottom: solid 6px var(--gold);
}
.table_design09 th {

	font-weight: bold;
	text-align: center;
	font-size: 2rem;
	line-height: 1.5;
}
.table_design09 td {
	line-height: 2;	
}
.table_design09 td span{
	display: block;
	font-size: 5rem;
	line-height: 1;
	color: #ddd;
}


@media screen and (max-width: 768px){
	.comparison-area{
	margin: 50px 0 0;
	}
	.table_design09 {
	border-radius: 0;
	text-align: left;
	}
	.table_design09 thead {
	display:none;
	}
	.table_design09 tr {
		background-color: unset;
		border-top: none;
	}
	.table_design09 th, .table_design09 td {
		display: block;
		border: 0;
		border: solid 1px var(--gold);
		border-bottom: none;
		border-top: none;
		padding: 10px;
	}
	.table_design09 th:nth-child(2), .table_design09 td:nth-child(2){
		margin: 0;
		padding: 25px 15px;
		border-right: solid 1px var(--gold);
		border-left: solid 1px var(--gold);
		border-bottom: dashed 1px var(--gold)!important;
		/*border: solid 2px var(--gold)!important;*/
	}
	.table_design09 td {
		padding: 25px 15px 0;	
	}
	.table_design09 td:last-of-type{
		padding: 15px 15px 20px;
		margin: 0 0 20px;
		border-bottom: solid 1px var(--gold);
	}
	.table_design09 td span{
		text-align: center;
	}
	.table_design09 tbody th{
	background: var(--gold);
	color:#fff;
	text-align: center;
	}
	.table_design09 td::before{
	content: attr(data-label);
	background-color: var(--light-gold);
	font-weight: bold;
	display: inline-block;
	width: 100%;
	min-width: 4em;
	text-align: center;
	margin: 0 0 5px;
	border-radius: 100vh;
	}
}

/* -----------------------------
	reason-area
-------------------------------- */
.reason-area{
	margin: 150px 0 0;
}
.reason-area .catch-l{
	padding: 20px 0 0;
}
.reason-area .reason-block{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin: 30px 0 0;
	gap: 20px;
}
.reason-area .reason-block > div{
	background: var(--light-gold);
	width: calc((100% / 3) - 20px);
	padding: 20px;
}
.reason-area .reason-block > div .catch-s{
	padding: 10px 0 0;
	color: var(--gold);
}
.reason-area .reason-block > div .basic-txt{
	padding: 10px 0 0;
}
.reason-area .reason-block > div img{
	width: 100%;
	    height: 200px;
    object-fit: cover;
}
@media screen and (max-width: 768px){
	.reason-area{
		margin: 50px 0 0;
	}
	.reason-area .catch-l{
	}
	.reason-area .reason-block{
		flex-direction: column;	
	}
	.reason-area .reason-block > div{
		width: 100%;	
	}
	.reason-area .reason-block > div .catch-s{
		padding: 15px 0 0;
		font-size: 2.2rem;
	}
	
	.reason-area .reason-block > div .basic-txt{
		padding: 5px 0 0;
	}
}


/* -----------------------------------------------------------
    residence-area
-------------------------------------------------------------- */
.residence-area{
	margin: 150px 0 0;
}

.residence-block > div{
	display: flex;
	flex-direction: column;
	gap: 80px;
	margin: 0 auto 0;
	padding: 50px 0 0;
}

.residence-area .box{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.residence-area .right-img{
	flex-direction: row-reverse;
}

.residence-area .box figure{
	margin-left: calc(50% - 50vw);
	margin-right: 100px;
}
.residence-area .right-img figure{
	margin-right: calc(50% - 50vw);
	margin-left: 100px;
}
.residence-area .catch-m{
	color: var(--gold);
	font-weight: bold;
}
.residence-area .box .txt-box{

}
.residence-area .box .catch-m{
	margin: 30px 0 0;
}
.residence-area .box .basic-txt{
	margin: 30px 0 0;
	width: 600px;
}

@media screen and (max-width: 1600px){
	.residence-area .box{
		justify-content: flex-end;
	}
	.residence-area .box figure{
		margin-right: 50px;
	}
	.residence-area .right-img figure{
		margin-left: 50px;
	}
	.residence-area .box figure img{
		width: 50vw;
	}
	

}

@media screen and (max-width: 768px) {
	.residence-area{
		margin: 50px 0 0;
	}
	.residence-block > div{
		gap: 30px;
		padding: 20px 0 0;
	}

	.residence-area .txt-area{
		padding: 0 20px;
	}
	.residence-area .txt-area .basic-txt{
		padding: 20px 0 0;
	}

	.residence-area .box{
		flex-direction: column;
		gap: 0;
	}
	.residence-area .right-img{
	}

	.residence-area .box figure{
		margin: 0;
	}
	.residence-area .box figure img{
		width: 100%;
	}
	.residence-area .right-img figure{
	}
	.residence-area .catch-s{
	}
	.residence-area .box .txt-box{
		padding: 20px 20px 0;
	}
	.residence-area .box .catch-m{
		margin: 0;
	}
	.residence-area .box .basic-txt{
		width: 100%;
		margin: 20px 0 0;
	}
}


/* -----------------------------
	share-area
-------------------------------- */
.share-area{
	margin: 150px 0 0;
	background: var(--light-gold);
	padding: 100px 0;
}
.share-area .txt-area{
	text-align: center;
}
.share-area .txt-area .catch-l{
	padding: 20px 0 0;
}
.share-area .txt-area .basic-txt{
	padding: 20px 0 0;
}
.share-area .txt-area img{
	margin: 20px 0 0;
}
.share-area .table-block {
	margin: 100px auto 0;

}
.share-area .table-block table{
	 /* border-collapse: collapse;*/
  table-layout: fixed;
  width: 100%;

  overflow: hidden;
  text-align: center;
	margin: 20px 0 0;
}
.share-area .table-block tr {
  background-color: #fff;
}
.share-area .table-block tr:nth-child(even) {
  background-color: var(--gold);
	color: #fff;
}
.share-area .table-block th, .table-block td {
  padding: 20px;
	font-size: 2rem;

}
.share-area .table-block thead th {
  background-color: var(--gold);
  color: #fff;
  font-weight: bold;
  text-align: center;
	font-size: 2rem;
}
.share-area .table-block tbody th {
  color: var(--gold);
}
.share-area .table-block td {
	line-height: 2;	
}
.share-area .table-block .ttl-s,
.share-area .table-block .catch-m{
	text-align: center;
}
.share-area .table-block .catch-m span{
	font-size: 3.5rem;
}

/* reason-block */
.share-area .reason-block{
	margin: 80px 0 0;
}
.share-area .reason-block .catch-m{
	text-align: center;
}
.share-area .reason-block .box{
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
	margin: 20px 0 0;
}
.share-area .reason-block .box > div{
	width: calc((100% / 3) - 3px);
	background: rgba(255,255,255,0.6);
	padding: 30px;
	text-align: center;
}
.share-area .reason-block .num{
	color: var(--gold);
	font-family: var(--en);
	font-size: 2.2rem;
}
.share-area .reason-block .catch-s{
	background: linear-gradient(transparent 60%, #ffeae1 60%);
	display: inline-block;
}
.share-area .reason-block .basic-txt{
	padding: 20px 0 0;
}

@media screen and (max-width: 768px){
	.share-area{
		margin: 50px 0 0;
		padding: 50px 0;
	}
	.share-area .txt-area{
		text-align: left;
	}
	.share-area .table-block .catch-m{
		line-height: 1.2;
	}
	.share-area .table-block .catch-m span{
		font-size: 3rem;
	}
	.share-area .txt-area .basic-txt{
	}
	.share-area .txt-area img{
	}
	.share-area .table-block {
		margin: 40px 0 0;

	}
	.share-area .table-block table{
		margin: 10px 0 0;
	}
	.share-area .table-block tr {
	}
	.share-area .table-block tr:nth-child(even) {
	}
	.share-area .table-block th, .table-block td {
		padding: 5px;
		font-size: 1.3rem;
	}
	.share-area .table-block thead th {
	}
	.share-area .table-block tbody th {
	}
	.share-area .table-block td {
	}

	/* reason-block */
	.share-area .reason-block{
		margin: 40px 0 0;
	}

	.share-area .reason-block .box{
		flex-direction: column;
		margin: 20px 0 0;
	}
	.share-area .reason-block .box > div{
		width: 100%;
		padding: 10px;
	}
	.share-area .reason-block .num{
	}
	.share-area .reason-block .basic-txt{
		padding: 10px 0 0;
		text-align: left;

	}
}