@charset "UTF-8";

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

共通

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

.in-animation {
  opacity: 1; /* 初期状態から可視にする */
  /* アニメーションを定義しているCSSルールを削除するか、コメントアウト */
  animation: fadeIn 1s ease-in-out;
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

.page-ttl {
	padding-bottom: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-bottom: 7rem !important;
	border-bottom: none !important;
}

.page-ttl_1 {border-bottom: none !important;}
.page-ttl hr {
	width: 100%;
    border: none;
    border-top: 1px solid #333;
    margin-top: -0.4px;
}

.page-ttl,
.page-ttl_1 {
	width: 100% !important;
	max-width: 90% !important;
}
.page-ttl.promise {
	max-width: 100% !important;
	margin-bottom: 0 !important;
}
.page-ttl.promise hr {
	margin-top: -0.4px;
	margin-bottom: 0;
}

.page-ttl .en {line-height: .75 !important;}

.w8 {
  font-family: "Hiragino Sans";
  src: local(HiraginoSans-W8);
  font-weight: 900;
}

.mb0 {margin-bottom: 0 !important;}
.mb30 {margin-bottom: 3rem !important;}
.mb80 {margin-bottom: 8rem !important;}
@media screen and (max-width:736px) {
	.page-ttl,
	.page-ttl_1 {
		width: 100% !important;
		max-width: 100% !important;
	}	
	
    .other .main-ttl .sp-en {
        font-size: 3.5rem !important;
    }
    
   .page-ttl {
		padding-bottom: 0 !important;
		margin-bottom: 3rem !important;
	}
}

.contact_menu {
	position: fixed;
	width: 340px;
	background: #333;
	top: 20px;
	right: 0;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	z-index: 100;
}
.contact_menu ul {
	display: flex;
	justify-content: center;
	gap:2rem;
}
.contact_menu ul li {
	text-align: center;
	margin: 0 10px;
}
.contact_menu ul li a {
	font-size: 1.1rem;
	width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
	height: 65px;
	color: #fff !important;
}
.contact_menu ul li a span {
	border-bottom: solid 1px #fff;
  padding-bottom: 1px;
  display: block;
font-size: 1.4rem;
margin-bottom: 3px;
}

.contact_menu ul li a:hover {opacity: .5;}
@media screen and (max-width:736px) {
	.contact_menu {display: none !important;}
}
 
/*------------------------

来場予約

-----------------------*/
.nagoya-area {margin-bottom: 18rem;}
.reservation-txt {
	font-size: 1.6rem;
	font-weight: bold;
	text-align: center;
	margin-bottom: 8rem;
}

.reservation-area {}
.reservation-area h2 {
	display: inline-block;
	padding: 0 10rem;
	font-size: 6rem;
	font-weight: bold;
	border-bottom: 1px solid #403d3c;
	margin-bottom: 8rem !important;
	font-family: "Lato", sans-serif;
    font-weight: 900;
    font-style: normal;
    color: #403d3c;
}
.reservation-area ul.reservation-list {
	display: flex;
	justify-content: space-between;
	padding: 0 10rem;
}

.reservation-area ul.reservation-list li {
	width: 47%;
	max-width: 47%;
}

.reservation-area ul.reservation-list li h3 {
	background: #403d3c;
	color: #fff;
	font-size: 2.6rem;
	font-weight: bold;
	padding: 5px 30px;
	margin-bottom: 30px;
}

.reservation-area ul.reservation-list li dl {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 2rem;
}

.reservation-area ul.reservation-list li dl dt {
	width: 20%;
	max-width: 20%;
	border: 1px solid #000;
	font-size: 1.6rem;
	font-weight: bold;
	text-align: center;
}

.reservation-area ul.reservation-list li dl dd {
	width: 78%;
	max-width: 78%;
	font-size: 1.6rem;
	font-weight: bold;
}

.reservation-area ul.reservation-list li .map {margin-bottom: 3rem;}
.reservation-area ul.reservation-list li .map iframe {
	width: 100%;
	height: 340px;
}

.reservation-btn {
	width: 100%;
	text-align: center;
}

.reservation-btn span {padding-right: 2rem;}

.reservation-btn a {
	display: block;
	height: 87px;
	line-height: 87px;
	border: 1px solid #000;
	font-size: 1.8rem;
	font-weight: bold;
	letter-spacing: .1em;
}

.reservation-btn a:hover {
	border: 1px solid #000;
	background: #000;
	color: #fff;
}

@media screen and (max-width:736px) {
	.nagoya-area {margin-bottom: 10rem;}
	.reservation-txt {
		font-size: 1.4rem;
		padding: 0 3rem;
		line-height: 2;
		margin-bottom: 5rem;
	}
	
	.reservation-area h2 {
		width: 100%;
	    display: inline-block;
	    padding: 0;
	    font-size: 3rem;
	    text-align: center;
	    margin-bottom: 4rem !important;
	}
	
	.reservation-area ul.reservation-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 3rem;
	}
	
	.reservation-area ul.reservation-list li {
		width: 100%;
		max-width: 100%;
	}
	
	.reservation-area ul.reservation-list li + li {margin-top: 3rem}	
	.reservation-area ul.reservation-list li h3 {
		font-size: 1.6rem;
		padding: 1rem 3rem;
		margin-bottom: 2rem;
	}
	
	.reservation-area ul.reservation-list li dl {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 2rem;
	}

	.reservation-area ul.reservation-list li dl dt {
		width: 20%;
		max-width: 20%;
		border: 1px solid #000;
		font-size: 1.2rem;
	}
	
	.reservation-area ul.reservation-list li dl dd {
		width: 78%;
		max-width: 78%;
		font-size: 1.2rem;
	}
	
	.reservation-area ul.reservation-list li .map iframe {
		width: 100%;
		height: 240px;
	}
	
	.reservation-btn a {
		display: block;
		height: 50px;
		line-height: 50px;
		font-size: 1.4rem;
	}
	
	.reservation-btn span {padding-right: 1rem;}
	
	
}


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

スタッフ一覧

-----------------------*/
.staff-area {
	padding: 0 10rem;
    margin: 0 auto 8rem;
}

.staff-area h2 {
	font-size: 2.6rem;
	font-weight: bold;
	margin-bottom: 2rem;
	padding-left: 2rem;
}

.staff-area ul.staff-list {
	display: flex;
	flex-wrap: wrap;
	border-top: 1px solid #cdcece;
	border-bottom: 1px solid #cdcece;
}

.staff-area ul.staff-list li {
	width: 25%;
	max-width: 25%;
	padding: 3rem;
	border-bottom: 1px solid #cdcece;
	border-right: 1px solid #cdcece;
}

.staff-area ul.staff-list li:nth-of-type(4n) {border-right: none;}
.staff-area ul.staff-list li:last-child {border-bottom: none;}

.architect-area ul.staff-list li {border-bottom: none;}
@media screen and (max-width:736px) {
	.staff-area h2 {
	    font-size: 1.6rem;
	    padding-left: 0;
	}
	
	.staff-area {
	    padding: 0 2rem;
	    margin: 0 auto 8rem;
	}
	.staff-area ul.staff-list li {
		width: 50%;
		max-width: 50%;
		padding: 2rem;
	}
	
	.staff-area ul.staff-list {border-right: 1px solid #cdcece;}
	
	.staff-area ul.staff-list li:nth-child(odd) {
		border-left: 1px solid #cdcece;
	}

	.staff-area ul.staff-list li:nth-child(even) {border-right: none;}
	.architect-area ul.staff-list {border-bottom: none;}
	.architect-area ul.staff-list li:last-child,
	.architect-area ul.staff-list li {
	    border-bottom: 1px solid #cdcece;
	}
	
	
}

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

HOUSE STYLE

-----------------------*/
.houdestyle-main {
	width: 80%;
	max-width: 80%;
	margin: 0 auto 10rem;
	position: relative;
}

.houdestyle-txt {
	width: 40%;
	max-width: 40%;
	position: absolute;
	top: 24%;
	left: 0;
	right: 0;
	margin: 0 auto;
	z-index: 10;
}

.houdestyle-ttl {
	width: 40%;
	max-width: 40%;
	position: absolute;
	top: 15%;
	left: 0;
	right: 0;
	margin: 0 auto;
	z-index: 10;
	margin: 0 auto 20px;
	padding: 2rem 0;
	background: #ffcf00;
}
h2.top-houdestyle span {
	padding: 1rem 4rem;
	background: #ffcf00;
}
h2.top-houdestyle {
	position: absolute;
	top: 15%;
	left: 0;
	right: 0;
	margin: 0 auto;
	z-index: 10;
	font-size: 3rem;
	font-weight: bold;
	text-align: center;
	color: #403d3c;
}

p.houdestyle-txt {
	font-size: 1.6rem;
	line-height: 2;
	font-weight: bold;
	text-align: center;
	color: #403d3c;
	letter-spacing: .1em;
	margin-bottom: 13rem;
}

ul.houdestyle-list {
	width: 80%;
	max-width: 80%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	border-top: 1px solid #000;
}

ul.houdestyle-list li {
	width: 50%;
	max-width: 50%;
	border-bottom: 1px solid #000;
	border-right: 1px solid #000;
}

ul.houdestyle-list lili:nth-child(even){
	border-right: none;
}

ul.houdestyle-list li a {
	display: block;
	padding: 5rem 8rem;
	color: #403d3c;
}

ul.houdestyle-list li h3 {
	font-size: 3.5rem;
	font-weight: bold;
	text-align: center;
	margin-bottom: 2rem;
}

ul.houdestyle-list li h3 span {
	display: block;
	font-size: 1.4rem;
	font-weight: normal;
	text-align: center;
}
ul.houdestyle-list li img {margin-bottom: 2rem;}
ul.houdestyle-list li p {
	font-size: 1.4rem;
	line-height: 2;
	font-weight: bold;
}

@media screen and (max-width:736px) {
	.houdestyle-ttl {
		width: 90%;
		margin: 0 auto 2rem;
	}
	
	.houdestyle-main {
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
		position: relative;
	}
	
	.houdestyle-txt {
		width: 60%;
		max-width: 60%;
		position: absolute;
		top: 36%;
	}
	
	.houdestyle-ttl {
		width: 55%;
		max-width: 55%;
		position: absolute;
		top: 15%;
	}
	
	
	.houdestyle-main .sp {margin-bottom: 5rem;}

	h2.top-houdestyle {font-size: 1.6rem; padding: 1rem 0;}
	p.houdestyle-txt {font-size: 1.3rem; margin-bottom: 5rem}
	
	
	ul.houdestyle-list li {
		width: 100%;
		max-width: 100%;
		border-right: none;
	}
	ul.houdestyle-list li h3 {
		font-size: 1.6rem;
		font-weight: bold;
		text-align: center;
		margin-bottom: 2rem;
	}
	
	ul.houdestyle-list li h3 span {
		font-size: 1.2rem;
	}
	ul.houdestyle-list li img {margin-bottom: 2rem;}
	ul.houdestyle-list li p {
		font-size: 1.3rem;
	}
	ul.houdestyle-list li p br {display: none;}
	ul.houdestyle-list li a {
	    padding: 3rem;
	}

	

}

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

PROMISE 5

-----------------------*/
.promise-top {
	width: 50%;
	max-width: 50%;
	margin: 0 auto 50px;;
}
.promise-ttl {
	width: 45%;
	margin: 0 auto 20px;
	background: #b4da00;
	padding: .5rem 0;
}

h2.top-promise {
	font-size: 3rem;
	font-weight: bold;
	text-align: center;
	color: #3f3c3c;
}

p.promise-txt {
	font-size: 1.6rem;
	line-height: 2;
	font-weight: bold;
	text-align: center;
	color: #3f3c3c;
	letter-spacing: .1em;
	margin-bottom: 13rem;
}

ul.promise-list_page {
	width: 80%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}

ul.promise-list_page li {
	width: 50%;
	max-width: 50%;
	border-bottom: 1px solid #000;
	border-right: 1px solid #000;
}
.bo-none{border-right: none !important;}

ul.promise-list_page li:last-child {border-bottom: none;}


ul.promise-list_page li a {
	display: block;
	padding: 5rem 7rem;
	color: #403d3c;
}

ul.promise-list_page li h3 {
	font-size: 2.3rem;
	font-weight: bold;
	text-align: center;
	margin-bottom: 2rem;
}

ul.promise-list_page li h3 span {
	display: block;
	font-size: 1.4rem;
	font-weight: normal;
	text-align: center;
}
ul.promise-list_page li img {margin-bottom: 2rem;}
ul.promise-list_page li p {
	font-size: 1.4rem;
	line-height: 2;
	font-weight: bold;
}

ul li .box_inner {
	width: 99%;
	margin: 0 auto;
	overflow: hidden;
}

ul li a .box_inner img{
	width: 100%;
	overflow:hidden;
	transition:1s all;
	object-fit:cover;
}

ul li a:hover .box_inner img{
  transform:scale(1.1,1.1);
  transition:1s all;
  overflow:hidden;
}


@media screen and (max-width:736px) {
	.promise-top {
		width: 80%;
		max-width: 80%;
		margin: 0 auto 50px;;
	}	

	.promise-ttl {
		width: 90%;
		margin: 0 auto 2rem;
	}	
	
	h2.top-promise {font-size: 1.6rem; padding: 1rem 0;}
	p.promise-txt {font-size: 1.3rem; margin-bottom: 5rem}
	
	
	ul.promise-list_page li {
		width: 100%;
		max-width: 100%;
		border-bottom: 2px dotted #3f6e93;
		border-right: none;
	}
	ul.promise-list_page li h3 {
		font-size: 1.6rem;
		font-weight: bold;
		text-align: center;
		margin-bottom: 2rem;
	}
	
	ul.promise-list_page li h3 span {
		font-size: 1.2rem;
	}
	ul.promise-list_page li img {margin-bottom: 2rem;}
	ul.promise-list_page li p {
		font-size: 1.3rem;
	}
	ul.promise-list_page li p br {display: none;}
	ul.promise-list_page li a {
	    padding: 3rem;
	}
}

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

PRIVACY POLICY

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

.privacy-area {
	padding: 0 10rem;
}

p.privacy_top {
	font-size: 1.2rem;
	line-height: 2;
	color: #403d3c;
	background: #f8f8f8;
	padding: 5rem 10rem;
	margin-bottom: 7rem;
}

.privacy_area {
	padding: 0 5rem;
	margin-bottom: 130px;
}

dl.privacy_no {}
dl.privacy_no + dl {margin-top: 7rem;}
dl.privacy_no dt {
	font-size: 1.6rem;
	font-weight: bold;
	margin-bottom: 2rem;
}
dl.privacy_no dd {
	font-size: 1.2rem;
	line-height: 2;
}

.privacy_area_ttl {
	font-size: 2rem;
	margin-bottom: 4rem;
	font-weight: bold;
	padding: 0 5rem;
}

.privacy_area01 {
	background: #f8f8f8;
	padding: 5rem;
}

.privacy_area_info {margin-bottom: 5rem;}
.mb50 {margin-bottom: 50px;}
.privacy_area_info h4 {
	font-size: 1.6rem;
	margin-bottom: 2rem;
	font-weight: bold;
}

.privacy_area_info p {
	font-size: 1.2rem;
	line-height: 2;
}
.privacy_area_info ol {margin-bottom: 2rem;}
.privacy_area_info ol li {
	font-size: 1.2rem;
	color: #403d3c;
}
.privacy_area_info ol li + li {margin-top: 1rem;}

.privacy_area_box {
	background: #fff;
	padding: 5rem;
}

.privacy_area_box {margin-bottom: 5rem;}
.privacy_area_box h4 {
	font-size: 1.6rem;
	margin-bottom: 2rem;
	font-weight: bold;
}

.privacy_area_box dl {display: flex;}
.privacy_area_box dl + dl {margin-top: 2rem;}

.privacy_area_box dl dt {
	width: 20%;
	max-width: 20%;
	font-size: 1.4rem;
}

.privacy_area_box dl dd {
	width: 80%;
	max-width: 80%;
	font-size: 1.4rem;
}

.privacy_area_box dl dd a:hover {
	text-decoration: underline;
}
@media screen and (max-width:736px) {
	.privacy-area {
	    padding: 0 2rem;
	}
	
	p.privacy_top {
	    font-size: 1.2rem;
	    padding: 3rem;
	    margin-bottom: 3rem;
	}
	
	.privacy_area {
	    padding: 0;
	    margin-bottom: 5rem;
	}
	
	dl.privacy_no dt {
		font-size: 1.4rem;
		margin-bottom: 1rem;
	}
	
	dl.privacy_no + dl {margin-top: 3rem;}
	.privacy_area_ttl {
	    font-size: 1.6rem;
	    margin-bottom: 2rem;
	    padding: 0;
	   	text-indent: -1.5em;
		padding-left: 1.5em;
	}
	
	.privacy_area01 {padding: 3rem;}
	.privacy_area01 p {
		font-size: 1.3rem;
		line-height: 2;
	}
	.privacy_area_info h4 {
		font-size: 1.4rem;
		margin-bottom: 2rem;
		text-indent: -1em;
		padding-left: 1em;
	}
	.privacy_area_info ol li {
		font-size: 1.2rem;
		line-height: 1.6;
		text-indent: -1em;
		padding-left: 1em;
	}
		
	.privacy_area_info {
	    margin-bottom: 3rem;
	}		
		
	.privacy_area_box {
		padding: 2rem;
		margin-bottom: 3rem;
	}
	.privacy_area_box dl {display: flex; flex-wrap: wrap;}
	.privacy_area_box dl + dl {margin-top: 2rem;}
	
	.privacy_area_box dl dt {
		width: 100%;
		max-width: 100%;
		font-size: 1.2rem;
	}
	
	.privacy_area_box dl dd {
		width: 100%;
		max-width: 100%;
		font-size: 1.2rem;
		word-wrap: break-word;
	}	
	
}

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

COMPANY

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

.company_info {
	width: 80%;
	max-width: 80%;
	margin: 0 auto 5rem;
}
.message_area {
	margin-bottom: 20rem;
}

.message_area .message_ttl {
	margin-bottom: 7rem;
}
.message_area .message_inner {
	width: 58%;
	max-width: 58%;
	margin: 0 auto;
}

.message_area .message_inner p {
	font-size: 1.2rem;
	line-height: 2;
	margin-bottom: 4rem;
}
.message_area .message_inner .message_name {
	width: 40%;
	max-width: 40%;
	margin-left: auto;
}


.tomoku_area {
	padding: 5rem 0;
	background: #fafaf5;
	margin-bottom: 5rem;
}

.tomoku_area_inner {
	display: flex;
	justify-content: center;
	align-items: center;
}

.tomoku_img {
	width: 10%;
	max-width: 10%;
}

.tomoku_info {
	width: 50%;
	max-width: 50%;
	margin-left: 5rem;
}

.tomoku_info h3 {
	font-size: 1.8rem;
	margin-bottom: 1rem;
}

.tomoku_info p {
	font-size: 1.4rem;
	line-height: 2;
}

.company_table {
	width: 80%;
	margin: 0 auto 10rem;
	border-bottom: 1px solid #bbbbbb;
}

table.company_table , 
table.company_table td, 
table.company_table th {
	border-top: 1px solid #bbbbbb;
	border-collapse: collapse;
}

table.company_table td, 
table.company_table th {
	font-size: 1.3rem;
	font-weight: normal;
	text-align: left;
	padding: 20px;
	line-height: 2;
}

table.company_table th {
	width: 16%;
	max-width: 16%;
	background: #fafaf5;
}

@media screen and (max-width:736px) {
	.company_info {
		width: 90%;
		max-width: 90%;
		margin: 0 auto 5rem;
	}
	
	.message_area {
		margin-bottom: 10rem;
	}
	
	.message_area .message_ttl {
		margin-bottom: 2rem;
	}
	.message_area .message_inner {
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
	}
	
	.message_area .message_inner p {
		font-size: 1.2rem;
		line-height: 2;
		margin: 0 auto 2rem;
    width: 24em;
	}

	.message_area .message_inner .message_name {
	    width: 60%;
	    max-width: 60%;
	    margin-left: auto;
	}
	
	.tomoku_area {
		padding: 3rem;
	}
	
	.tomoku_area_inner {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}
	
	.tomoku_img {
		width: 40%;
		max-width: 40%;
		margin: 0 auto 2rem;
	}
	
	.tomoku_info {
		width: 100%;
		max-width: 100%;
		margin-left: 0rem;
	}
	
	.tomoku_info h3 {
		font-size: 1.6rem;
		line-height: 2;
		margin-bottom: 1rem;
	}
	
	.tomoku_info p {
		font-size: 1.3rem;
		line-height: 2;
	}	
	table.company_table {
		width: 90%;
		max-width: 90%;
		margin: 0 auto 10rem;
	}
	table.company_table td, 
	table.company_table th {
		width: 100%;
		max-width: 100%;
		display: block;
		font-size: 1.3rem;
		font-weight: normal;
		text-align: left;
		padding: 1rem;
		line-height: 2;
	}
}


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

コンセプト

-----------------------*/
.sp {display: none;}
.fuz-top {
	position: relative;
	margin-bottom: 18rem;
}

.fuz-area {
	position: absolute;
	top: 12%;
	left: 10%;
}

.fuz-area h2 {
	font-size: 6.5rem;
	color: #ffc800;
	letter-spacing: .05em;
	margin-bottom: 3rem;
}

.fuz-area h2 span {
	display: block;
	font-size: 1.8rem;
	color: #3f3c3c;
}

.fuz-area p {
	font-size: 1.4rem;
	color: #3f3c3c;
	line-height: 2.4;
}

.fuz-area p + p {margin-top: 3rem;}

.brand-area {margin-bottom: 20rem;}
.brand-area ul {
	display: flex;
}

.brand-area ul li {
	width: calc(100vw / 6);
	margin-right: .5%;
}

.brand-area ul li img {
    height: auto;
    width: 100%;
}
.brand-main {transform:rotate(-3deg);}
.brand-main .brand-inner {
	display: flex;
	overflow: hidden;
	margin-bottom: 2rem;
}

.brand-main .brand-logo {
	width: 60%;
	max-width: 60%;
	margin: 0 auto  3rem;
}

.brand-main p {
	font-size: 1.4rem;
	line-height: 2;
	text-align: center;
}

.brand-main p b {
	font-size: 2.9rem;
	font-weight: bold;
}

.mission-area {margin-bottom: 20rem;}
.mission-inner {
	width: 90%;
	max-width: 90%;
	margin: 0 auto;
	background: #fafaf5;
	padding: 10rem;
}

.mission-inner ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.mission-inner ul li {
	width: 31%;
	max-width: 31%;
	border: 1px solid #a7a7a8;
	border-radius: 30px;
	background: #fff;
	margin-bottom: 5rem;
}

.mission-inner ul li h2 {
	font-size: 2rem;
	font-weight: bold;
	margin-bottom: 3rem;
	text-align: center;
}

.mission-inner ul li p {
	font-size: 1.4rem;
	line-height: 2;
	margin-bottom: 3rem;
}

.mission-inner .mission-icon {
	width: 107px;
	margin: 0 auto;
}

.mission-inner ul li:first-child {
	background: #ffc800;
}

.mission-inner ul li:first-child h2 {
	font-size: 2.6rem;
	color: #595858;
	margin-bottom: 2rem;
}

.mission-inner ul li:first-child p {
	font-size: 1.7rem;
	color: #595858;
	line-height: 3;
	text-align: left;
}

.mission-inner ul li .mission-box {
	/*
	background: url("../images/page/fuz/circle.webp"),
	url("../images/page/fuz/circle.webp"),
	url("../images/page/fuz/circle.webp"),
	url("../images/page/fuz/circle.webp");
	background-size: 10px;
	background-repeat: no-repeat;
	background-position: left 5% top 10px,right 5% top 10px,left 5% bottom 10px,right 5% bottom 10px;
	*/
	padding: 5rem;
}
@media screen and (min-width: 1500px){
	.mission-inner ul li .mission-box {
		padding: 5rem;
	}
	.mission-inner ul li:first-child .mission-box {
		padding: 5rem 8rem;
	}
}

@media screen and (max-width:736px) {
	.fuz-top-sp {display: inherit !important; position: relative;}
	.pc {display: none;}
	.sp {display: inherit; margin-bottom: 10rem;}
	.fuz-area {
		position: absolute;
		top: 5%;
		left: 5%;
	}
	
	.fuz-top {
	    position: relative;
	    margin-bottom: 0;
	}
	
	.fuz-area h2 {
		font-size: 3rem;
		margin-bottom: 1rem;
	}
	
	.fuz-area h2 span {font-size: 1.4rem;}
	.fuz-area p {
		font-size: 1.1rem;
		letter-spacing: 0;
	}
	.fuz-area p + p {margin-top: 1rem;}
	
	.mb80 {
	    margin-bottom: 4rem !important;
	}
	.brand-area {
		overflow: hidden !important;
		margin-bottom: 10rem;
	}
	.brand-main .brand-logo {
		width: 90%;
		max-width: 90%;
		margin: 0 auto  3rem;
	}
	
	.brand-main p {
		font-size: 1.2rem;
	}
	
	.brand-main p b {
		font-size: 1.8rem;
		font-weight: bold;
	}
	.mission-area {
		margin-bottom: 5rem;
	}
	.mission-inner {
		width: 90%;
		max-width: 90%;
		margin: 0 auto;
		padding: 3rem;
	}
	
	.mission-inner ul li {
		width: 100%;
		max-width: 100%;
		border-radius: 20px;
		margin-bottom: 2rem;
	}

	.mission-inner ul li .mission-box {padding: 3rem;}
	.mission-inner ul li:first-child h2 {
		font-size: 1.9rem;
		margin-bottom: 1rem;
	}
	
	.mission-inner ul li:first-child .mission-box {padding: 3rem 6rem;}
	
	.mission-inner ul li:first-child p {
		font-size: 1.4rem;
	}
	
	.mission-inner ul li h2 {
		font-size: 1.6rem;
		margin-bottom: 1rem;
	}
	
	.mission-inner ul li p {
		font-size: 1.3rem;
		line-height: 2;
		margin-bottom: 1rem;
	}	
}


/*---------ローディング-------------*/
#loading {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 99999;
  width: 100%;
  height: 100%;
  background: #fff;
}

#loading_box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
}

.loading-one {width: 10%; margin: 0 auto;}

@media screen and (max-width:736px) {
	.loading-one {width: 40%; margin: 0 auto;}
}
.ttl_area {position: relative;}
.ttl_area figure {
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.ttl_area figure::before {
  content: '';
	display: inline-block;
	width: 0;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	background: #000;
}

.ttlarea01 figure::before{background: #fff !important;}
.ttlarea01 figure::before .main_02{background: #fff !important;}
.ttl_area_top figure::before{background-color: rgba(255,255,255,0)!important;}

.ttl_area figure img {
  opacity: 0;
  transform: scale(1.1);
}


.ttl_area.move figure::before {
  animation: barAnime forwards 1.5s 1 ease 0.1s normal;
}

.ttl_area.move figure img {
  animation: photoAnime forwards 1.5s 1 ease 0.5s normal;
}



.ttl_area.move figure::before .main_02 {
  animation: barAnime01 forwards 3s 1 ease 0.5s normal;
}

.ttl_area.move figure img.main_02 {
  animation: photoAnime01 forwards 3s 1 ease 1s normal;
}











.ttl_area_01 {position: relative;}
.ttl_area_01 figure {
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.ttl_area_01 figure::before {
  content: '';
	display: inline-block;
	width: 0;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	background: #fff !important;
}

.ttl_area_01 figure::before{background: #fff !important;}
.ttl_area_01 figure img {
  opacity: 0;
  transform: scale(1.1);
}

.ttl_area_01.move figure::before {
  animation: barAnime01 forwards 2s 1 ease 0.5s normal;
}

.ttl_area_01.move figure img {
  animation: photoAnime01 forwards 2s 1 ease 1s normal;
}











@keyframes barAnime{
	0% {
		left: 0;
		width: 0;
	}
	50% {
		left: 0;
		width: 100%;
	}
	51% {
		left: 0;
		width: 100%;
	}
	68% {
		left: 0;
		width: 100%;
	}
	100% {
		left: 100%;
		width: 0;
	}
}

@keyframes barAnime01{
	0% {
		left: 0;
		width: 0;
	}
	50% {
		left: 0;
		width: 100%;
	}
	51% {
		left: 0;
		width: 100%;
	}
	68% {
		left: 0;
		width: 100%;
	}
	100% {
		left: 100%;
		width: 0;
	}
}

@keyframes photoAnime{
	0% {
    opacity: 0;
    transform: scale(1.1);
  }
	50% {
    opacity: 0;
    transform: scale(1.1);
  }
	100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes photoAnime01{
	0% {
    opacity: 0;
    transform: scale(1.1);
  }
	50% {
    opacity: 0;
    transform: scale(1.1);
  }
	100% {
    opacity: 1;
    transform: scale(1);
  }
}



.ttl_top {
	width: 70%;
	height: 100vh;
}


img.main_01 {width: 60%;}

.ttl_area_top01 figure {width: 50%;}
img.main_02 {width: 100%;}

.ttl_top_main {
	position: absolute;
	left: 30px;
	top: 67%;
	transform: translateY(-70%);
}

.ttl_top img {
	margin-bottom: 20px;
}

@media screen and (max-width:736px) {
	.ttl_top {
		width: 40%;
		height: auto;
	}

}


 .main-ttl.customer-ttl .en {
  font-size: 2.2rem;
  text-align: left;
  padding-bottom: 4rem;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;

}

.customer-area {
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	margin: 6rem 0;
}
  .customer-area  dl dt {
	font-size: 1.6rem;
	font-weight: bold;
	margin-bottom: 2rem;
  }
  
  
  .customer-area  dl dd {
	font-size: 1.2rem;
	line-height: 2;
  }
  
  .customer-area  dl {
	margin-bottom: 6rem;
  }