@charset "utf-8";
/* 共通 ================= */
.beige{	background: #F5F4F4;}
.umber{background: #271a19;color:#f5f4f4;}
.inner{margin: 0 auto;}
.cap{font-size:1.4rem;}
.bottomcap{padding: 0 50px 20px 0;}
span.txt{display: inline-block;}
.sup{font-size:1rem;vertical-align:top;padding-bottom: 1em;}
sup{font-size: 1rem;}
.tar{text-align: right;}
.tac{text-align: center;}
.tal{text-align: left;}
.dinb{display: inline-block;}
.pr50{padding-right: 50px;}
.pl50{padding-left: 50px;}
.pl174{	padding-left: 174px;}
.pl150{	padding-left: 150px;}
.pr150{	padding-right: 150px;}
.fullw img{
  width: 100%;
  height: auto;
}
.for_tab{display: none;}
.for_sp{display: none;}
.font_shuei_l{
	font-family: "dnp-shuei-gothic-gin-std", sans-serif;
	font-weight: 400;
	font-style: normal;
}

/* 各ページタイトルh1 ================= */
h1{
	font-family: "AvenirNextLTPro-UltLt",sans-serif;
	font-size: 6.6rem;
	font-weight: 100;
	line-height: 1.2;
	margin-bottom: 62px;
	letter-spacing: 0.3em;
}
h2{
	font-family:"FP-KoburinaGoStdN-W1",sans-serif;
	font-size: 2.6rem;
	line-height: 1.2;
	font-weight: 200;
	margin-bottom: 40px;
	letter-spacing: 0.4em;
}
h2 + p{
	font-size: 1.8rem;
	line-height: 2.1;
	font-weight: 200;
	margin-bottom: 104px;
	letter-spacing: 0.25em;
}
/* SUPREMO ======================== */
#mainmovie {
	display: block;     /* pictureのデフォルト挙動対策 */
	overflow: hidden;
	background: #000;
	aspect-ratio: 192/108;
}
#mainmovie_sp{
	display: none;     /* pictureのデフォルト挙動対策 */
}
#page_supremo #intro,
#page_supremo #intro h2,
#page_supremo #intro p{
	font-family: "dnp-shuei-gothic-gin-std", sans-serif;
	font-weight: 400;
	font-style: normal;
	color: #A37F5D;
}
#page_supremo #intro h1{
	margin-top: 136px;
	margin-bottom: 88px;
}
#page_supremo #intro h2{
	font-size: 2.075rem;
	letter-spacing: 0.40em;
	margin-bottom: 33px;
	padding-left: 10px;
}
#page_supremo #intro h2 strong{
	letter-spacing: 0.24em;
	font-weight: 400;
	font-style: normal;
	display: inline-block;
}
#page_supremo #intro p{
	font-size: 1.75rem;
	line-height: 2.38;
	letter-spacing: 0.24em;
}
/* PRODUCTS ------------- */
#sec_products{
	background: #EEEBE7;
	padding-top: 80px;
}
#sec_products h2{
	text-align: center;
	font-size: 2rem;
	font-family: "AvenirNextLTPro-Regular",sans-serif;
	letter-spacing: 0.2em;
}
.banner_sales {
	text-align: center;
	padding: 86px 50px 120px 50px;
}
.banner_sales a{
	display: block;
	height: 40px;
	width: 320px;
	text-align: center;
	background: #BC9B71;
	color: #fff;
	line-height: 40px;
	margin: 0 auto;
	letter-spacing: 0.18em;
	font-family: "kozuka-gothic-pr6n", sans-serif;
	font-weight: 400;
	font-style: normal;
	transition: background 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.03s;
}
.banner_sales a:hover,
.banner_sales a:active{
	background: #A37C51;
}

/* CONCEPT -------------*/
#sec_concept{
	color: #505253;
	padding-bottom: 190px;
}
.copy_bar{
	background: #271A19;
	color: #ffffff;
	text-align: center;
	line-height: 82px;
	height: 82px;
}
.copy_bar img{
	margin-top: -3px;
}
/* 罫線 */
#concept_cnt01::after,
#concept_cnt02::after,
#concept_cnt06::after{
	content:"";
	display: inline-block;
	width: 1px;
	background: #8B8C8E;
	position: absolute;
	left: 50%;
	bottom: 0;
}
#concept_cnt01::after{height: 80px;}
#concept_cnt02::after{height: 130px;}
#concept_cnt06::after{height: 230px;}

#sec_concept h3{
	font-family: "FOT-筑紫Aオールド明朝 Pr6 L", serif;
	font-size: 39px;
	color: #515355;
	letter-spacing: 0.35em;
	margin-bottom: 22px;
}
#sec_concept h3 + p{
	padding-bottom: 56px;
}
#concept_cnt01{
	padding-top: 156px;
	position: relative;
	padding-bottom: 80px;
}
#concept_cnt02{
	padding-top: 74px;
	display: flex;
	justify-content:center;
	position: relative;
	padding-bottom: 130px;
}
#concept_cnt02 > div.flex{
	display: flex;
	padding-bottom: 74px;
}
#concept_cnt02 div{
	margin: 0 30px;
	width: 50%;
	
}
#concept_cnt02 div p{
	font-family: "dnp-shuei-gothic-gin-std", sans-serif;
	font-weight: 300;
	font-style: normal;
}
#concept_cnt02 > div:nth-of-type(1){
	justify-content: end;
	letter-spacing: 0.3em;
}
#concept_cnt02 > div:nth-of-type(1) p{
	font-size: 2rem;
	line-height: 1.95;
	letter-spacing: 0.4em;
}
#concept_cnt02 > div:nth-of-type(2) p{
	font-size: 1.6rem;
	line-height: 2.3;
	letter-spacing: 0.3em;
}
#concept_cnt03{
	padding-bottom: 126px;
}
#concept_cnt03 > div{
	text-align: left;
	margin-left: 61px;
}
#concept_cnt03 h4{
	font-family: "AvenirNextLTPro-UltLt",sans-serif;
	font-size: 6rem;
	padding-top: 40px;
	letter-spacing: 0.3em;
}
#concept_cnt03 h4 img{
	width: 500px;
	height: auto;
	min-width: 400px;
}
#concept_cnt03 h5{
	font-family: "FP-こぶりなゴシック StdN W3",sans-serif;
	font-size: 3rem;
	padding-top: 67px;
	letter-spacing: 0.375em;
	padding-left: 10px;
}
#concept_cnt03.flex{
	display: flex;
	justify-content: center;
}
#concept_cnt03 p{
	font-family: "dnp-shuei-gothic-gin-std", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.7rem;
	padding-top: 43px;
	letter-spacing: 0.25em;
	line-height: 2.25;
}
#concept_cnt04{
	margin-bottom: 150px;
	overflow: hidden;
}
#concept_cnt05{
	margin: 0 auto;
	padding-bottom: 172px;
	width: 71%;
}
#concept_cnt05 .flex{
	justify-content: end;
	display: flex;
}
#concept_cnt05 img{
	width: 100%;
	height: auto;
	margin-bottom: 72px;
}
#concept_cnt05 p{
	font-family: "dnp-shuei-gothic-gin-std", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.8rem;
	line-height: 2.35;
	letter-spacing: 0.25em;
}
#concept_cnt06{
	display: flex;
	position: relative;
	justify-content: center;
	max-width: 1300px;
	margin: 0 auto;
	padding-bottom: 230px;
}
#concept_cnt06 picture,
#concept_cnt06 > div{
	width: 50%;
	margin-bottom: 113px;
}
#concept_cnt06 img{
	width: 100%;
	height: auto;
	max-width: 650px;
}
#concept_cnt06 > div{
	padding-left: 80px;
}
#concept_cnt06 > div.flex{
	display: flex;
	justify-content: center;
	align-items:center;
}
#concept_cnt06 p{
	font-family: "dnp-shuei-gothic-gin-std", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.8rem;
	line-height: 2.35;
	letter-spacing: 0.25em;
}
/*links*/
#sec_links{
	display: flex;
	flex-direction: column;
	background-color: #F5F4F4;
}
#sec_links a.links{
	display: block;
	line-height: 0;
	position: relative;
	width: 100%;
	padding-top: calc(396 / 1300 * 100%);
	color: #ffffff;
	overflow: hidden;
}
#sec_links a.links article{
	position: absolute;
	display: flex;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	flex-direction: column;
	justify-content: center;
	z-index: 2;
	padding-left: 5.1%;
	line-height: 1.2;
}
#sec_links a.links picture{
	line-height: 0;
}
#sec_links a.links img{
	display: block;
	width: 100%;
	height: auto;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.03s;
  /* ふわっと感 */
	will-change: transform;
}
#sec_links a{
	overflow: hidden;
}
#sec_links a.links:hover img,
#sec_links a.links:active img{
	transform: scale(1.035);
}

#sec_links a.links h5{
	font-family: "AvenirNextLTPro-UltLt", sans-serif;
	font-size: 6rem;
	letter-spacing: 0.25em;
	z-index: 10;
	margin-bottom: 10px;
}
#sec_links a.links p{
	font-size: 2.2rem;
	z-index: 10;
	letter-spacing: 0.43em;
}
#sec_links a.links span{
	background: #fff;
	color: #342622;
	font-family: "AvenirNextLTPro-Regular", sans-serif;
	font-size: 1.6rem;
	text-align: center;
	z-index: 10;
	display: block;
	width: 153px;
	height: 20px;
	line-height: 20px;
	letter-spacing: 0.14em;
	margin-top: 23px;
}
#link_brandarea p,
#link_brandarea h5{
	text-shadow: #013b7b 1px 0 4px,
	#013b7b 1px 0 4px,
	#013b7b 1px 0 4px;
}
#link_brandarea p span{
	text-shadow: none;
}
/* consultation */
#consultation_link{
	background: #352623;
	padding: 74px 20px 86px 20px;
	text-align: center;
	color: #BA9971;
	font-family: "dnp-shuei-gothic-gin-std", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.8rem;
	letter-spacing: 0.063em;
}
#consultation_link a{
	display: block;
	background: #BC9B71;
	color: #fff;
	width: 332px;
	height: 46px;
	line-height: 46px;
	font-family: "AvenirNextLTPro-Regular", sans-serif;
	font-size: 1.8rem;
    outline: 1px solid rgb(255, 255, 255);/*outlineでドットの線を追加*/
    outline-offset: -4px;/*outline-offsetの値を-15pxにして内側に調整*/
	letter-spacing: 0.2em;
	margin: 20px auto 0 auto;
	transition: background 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.03s;
}
#consultation_link a:hover,
#consultation_link a:active{
	background: #A37C51;
}
/* MAGGIORE */
.copy_bggray{
	background: #707376;
	color: #ffffff;
	line-height: 1.44;
	letter-spacing:0.2em;
	font-size: 1.8rem;
	text-align: center;
	padding: 48px 20px 58px 20px;
}
#maggiore_top{
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url("../img/supremo/maggiore_1300.jpg");
	background-image: image-set(
	  url("../img/supremo/maggiore_1300.webp") 1x type("image/webp"),
	  url("../img/supremo/maggiore_2600.webp") 2x type("image/webp"),
	  url("../img/supremo/maggiore_1300.jpg") 1x type("image/jpeg"),
	  url("../img/supremo/maggiore_2600") 2x type("image/jpeg")
	);
	text-align: center;
	padding-top: 211px;
	min-height: 682px;
}
#maggiore_top#maggiore_top h3{
	margin-bottom: 123px;
}
#maggiore_top a{
	border: 1px solid #fff;
	display: inline-block;
	width: 312px;
	height: 48px;
	line-height: 48px;
	color: #fff;
	letter-spacing: 0.2em;
	transition: 0.4s;
}
#maggiore_top a:hover,
#maggiore_top a:active{
	background:#231815;
	opacity: 0.9;
}

#maggiore_detail{
	background-size: cover;
	background-repeat: no-repeat;
	background-image:  url("../img/supremo/maggiore_bg.jpg");
	color: #ffffff;
	text-align: center;
	padding: 118px 20px 156px 20px;
}
#maggiore_detail h4{
	font-family: "TrajanPro-Regular",serif;
	font-size: 2rem;
	letter-spacing: 0.075em;
	margin-bottom: 65px;
}
#maggiore_detail h5{
	font-size: 2rem;
	letter-spacing: 0.2em;
	font-family: "HelveticaLTPro-Light","FP-こぶりなゴシック StdN W3",Helvetica, sans-serif;
	line-height: 2;
	margin-bottom: 33px;
}
#maggiore_detail p{
	font-size: 1.6rem;
	letter-spacing: 0.19em;
	font-family: "HelveticaLTPro-Light","FP-こぶりなゴシック StdN W3",Helvetica, sans-serif;
	line-height: 2.17;
}
/* MEISTER ======================== */
#page_meister #mainvisual{
	aspect-ratio: 1300/858;
}
#page_meister #intro{
	padding-top: 116px;
}
.meister_cnt{
	padding-bottom: 157px;
}
.meister_cnt img{
	height: auto;
}
.meister_cnt p{
	font-size: 2rem;
	margin-top: 64px;
	line-height: 2.1;
	letter-spacing: 0.14em;
	font-weight: 100;
}
#meister_cont01{
	display: flex;
	position: relative;
	justify-content: center;
	max-width: 1920px;
	margin: 0 auto;
}
#meister_cont01 picture{
	width: 40%;
}
#meister_cont01 > div{
	width: 60%;
	padding-left: 50px;
}
#meister_cont01 img{
	width: 100%;
	height: auto;
	max-width: 768px;
}
#meister_cont01 > div.flex{
	display: flex;
	justify-content: start;
	align-items:center;
}
#meister_cont01 p{
	font-family: "dnp-shuei-gothic-gin-std", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.8rem;
	line-height: 2.35;
	letter-spacing: 0.25em;
	margin-left: 4em;
}

/* LIMITED ======================== */
#page_limited #intro{
	padding-top: 162px;
}
#page_limited .photo1000 img{
	width: 76.92%;
	height: auto;
}
#page_limited .photo1000{
	text-align: center;
}
#page_limited .photo1000 + .photo1000{
	margin-top: 18px;
}
#page_limited #img01 img{
	margin-bottom: 210px;
}
#page_limited .cont_txt{
	width: 76.92%;
	margin: 72px auto 0 auto;
	padding-bottom: 148px;
	font-size: 2rem;
	line-height:2.1;
	letter-spacing: 0.148em;
}
/* HIGH CLASS ======================== */
#page_high #mainvisual{
	aspect-ratio: 1300/858;
}
#page_high #intro{
	padding-top: 156px;
}
#page_high h2{
	letter-spacing: 0.35em;
}
#page_high #img02{
	max-width: 1536px;
}
#page_high #img02 > div:nth-of-type(1){
	width: 40%;
	max-width: 768px;
}
#page_high #img02 > div:nth-of-type(2){
	width: 60%;
	padding-left: 80px;
	display: flex;
	flex-direction: row;
	align-items: center; /* 縦中央 */
}
#page_high #img02 > div:nth-of-type(2) p{
	margin-top: auto;
	margin-bottom: auto;
}
#page_high #img02 img{
	width: 100%;
	height: auto;
}
@media (min-width: 1536px) {
  /* 1536px以上のとき */
	#page_high #img02{
		margin-left: auto;
		margin-right: auto;
	}
}

#page_high .cnt_photo p{
	font-size: 2rem;
	line-height: 2.1;
	letter-spacing: 0.15em;
	margin-top: 66px;
}
#page_high .cnt_photo{
	padding-bottom: 158px;
}
#page_high .w77{
	width: 77%;
	margin-left: auto;
	margin-right: auto;
	max-width: 1200px;
}
.flex{
	display: flex;
}
.end{
	justify-content: end;
}
#page_high .w77 img{
	width: 100%;
	height: auto;
}
/* BRAND ======================== */
#page_brand #intro{
	padding-top: 156px;
	width: 76.9%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
}
#page_brand #intro h2 + p{
	margin-bottom: 80px;
}
#page_brand #intro .flex > div:nth-of-type(1){
	width:55%;
}
#brand_area_map{
	width:45%;
	padding-left: 0;
	padding-right: 40px;
	padding-top: 162px;
}
#brand_area_map img{
	width:100%;
	height: auto;
}
#brand_area_map_sp{
	display: none;
}
#brand_area_txt{
	line-height: 1.8;
	margin-bottom: 80px;
	border: 2px solid #CEB998;
	padding: 40px 53px;
	width: 41em;
}
#brand_area_txt h3{
	font-size: 2.1rem;
	letter-spacing: 0.14em;
	margin-bottom: 24px;
}
#brand_area_txt + p{
	font-size: 1.5rem;
	letter-spacing: 0.09em;
	margin-bottom: 15px;
}
#brand_area_txt h4{
	font-size: 1.5rem;
	letter-spacing: 0.182em;
	color: #fff;
	font-family: "FP-こぶりなゴシック StdN W3",Helvetica, sans-serif;
	background: #C2A77E;
	width: 254px;
	height: 26px;
	line-height: 26px;
	text-align: center;
	margin-top: 13px;
	margin-bottom: 13px;
}
#brand_area_txt h4 + p{
	font-size: 1.3rem;
	letter-spacing: 0.017em;
}
#page_brand .inner{
	width: 76.9%;
	margin: 0 auto;
	justify-content: space-between;
}
#page_brand .inner img{
	width: 100%;
	height: auto;
	margin-bottom: 18px;
}
#page_brand .inner #img02{
	margin-right: 9px;
	width: calc( 57.85% - 9px);
}
#page_brand .inner #img03{
	margin-left: 9px;
	width: calc( 42.15% - 9px);
}
#page_brand .inner #img04{
	width: 48.5%;
	padding-bottom: 80px;
}
#page_brand .photocap{
	font-size: 2rem;
	line-height: 2.1;
	padding-top: 55px;
}
#page_brand .inner #img06{
	margin-right: 9px;
}
#page_brand .inner #img07{
	margin-left: 9px;
}
#page_brand .inner #img06,
#page_brand .inner #img07{
	width: calc( 50% - 9px );
}
#page_brand #img08{
	width: 38.6%;
	padding-bottom: 80px;
}
#page_brand #img08 + p{
	flex-grow: 1;
	padding-left: 65px;
}
#page_brand #img10{
	width: 41.6%;
	margin-right: 9px;
}
#page_brand #img10 + div{
	width: calc( 100% - 41.6% - 18px );
	margin-left: 9px;
}
#page_brand #img12{
	width: 74.4%;
	padding-bottom: 80px;
}
/* THE ONE ======================== */
#page_one #intro{
	padding-top: 156px;
	padding-bottom: 150px;
}
#page_one #intro h2 + p{
	margin-bottom: 80px;
}
#page_one p.btn a{
	border: 2px solid #AC8352;
	color: #AC8352;
	display: block;
	font-size: 1.9rem;
	text-align: center;
	background: #E9E8E8;
	margin: 0 auto;
	letter-spacing: 0.125em;
	transition: 0.4s;
	font-family: "kozuka-gothic-pr6n", sans-serif;
	font-weight: 400;
	font-style: normal;
}
#page_one #intro p.btn a{
	width: 356px;
	height: 74px;
	line-height: 72px;
}
#page_one p.btn a:hover,
#page_one p.btn a:active{
	background:#AC8352;
	color:#f5f4f4;

}
#page_one .umber{
	padding-bottom: 150px;
}
#page_one .umber h3{
	font-size: 5.2rem;
	font-family: "AvenirNextLTPro-UltLt", sans-serif;
	letter-spacing: 0.15em;
	padding: 258px 0 182px 0;
	text-align: center;
}
#page_one .workscnt .title{
	width: 70%;
	max-width: 1300px;
	margin: 100px auto 0 auto;
	display: flex;
	justify-content: space-between;
}
#page_one .workscnt .title a{
	display: inline-block;
	width: 160px;
	height: 36px;
	line-height: 32px;
	font-size: 1.5rem;
	color: #AC8352;
	background: #E9E8E8;
	font-family: "FP-こぶりなゴシック StdN W3", sans-serif;
	letter-spacing: 0.11em;
	text-align: center;
	border: 1px solid #AC8352;
	padding-bottom: 1px;
	transition: 0.4s;
}
#page_one .workscnt .title a:hover,
#page_one .workscnt .title a:active{
	background: #AC8352;
	color:#f5f4f4;
	transition: background 0.3s,
		color 0.3s;
}
#page_one .workscnt .title h4{
	font-size: 2.6rem;
	letter-spacing: 0.32em;
	line-height: 1.1;
	border-left: 1px solid #AC8352;
	border-right: 1px solid #AC8352;
	padding-left: 0.75em;
	padding-right: 0.5em;
	margin-bottom: 28px;
}
#page_one #case_mini{
	margin: 0 auto;
	width: 70%;
	padding: 200px 0 0 0;
}
#case_mini .flex{
	justify-content: space-between;
	padding-bottom: 143px;
}
#case_mini .flex article{
	width: calc( 50% - 25px);
}
#case_mini article h5{
	font-family: "FP-こぶりなゴシック StdN W3",Helvetica, sans-serif;
	font-size: 1.8rem;
	letter-spacing: 0.134em;
	margin-bottom: 21px;
}
#case_mini .flex article img{
	width: 100%;
	height: auto;
}
#case_mini p.btn a{
	width: 336px;
	height: 74px;
	line-height: 72px;
}
/*-- MOVIE モーダル --------------------*/
.movie-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  transition: 0.6s;
}
.movie-overlay.is-open{ display: block; }

.movie-overlay__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(39, 26, 25, 0.9);
}

.movie-overlay__dialog{
  position: relative;
  width: min(92vw, 960px);
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
}

.movie-overlay__frame{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #271a19;
}

/* iframeを枠いっぱいに */
.movie-overlay__frame iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.movie-overlay__close{
  position: absolute;
  right: -8px;
  top: -48px;
  font-size: 36px;
  line-height: 1;
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
}

/* 開いてる間は背面スクロール禁止 */
body.is-movie-open{
  overflow: hidden;
}
/* モーダル開閉 */
/* モーダル全体：閉じてる時はクリックもできない */
.movie-overlay{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s ease, visibility 0s linear .35s;
}

/* 開いたら表示 */
.movie-overlay.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .35s ease;
}

/* 背景（黒い透過）：ここが「透過度の変化」 */
.movie-overlay__backdrop{
  opacity: 0;
  transition: opacity .35s ease;
  background: #271a19; /* ここは固定 */
}
/* 開いた時だけ背景を濃く */
.movie-overlay.is-open .movie-overlay__backdrop{
  opacity: .7;
}
/* 768～1299：タブレット～小さめPC ================== */
@media (max-width: 1299px) {
	.for_tab{display: none;}
	.for_tab.max1299{display: block;}
	#concept_cnt06 picture{
		width: 48%;
	}
	#concept_cnt06 > div{
		width: 52%;
		padding-left: 56px;
	}
}
/* ～1199：タブレット～小さめPC ================== */
@media (max-width: 1199px) {
	.for_tab{display: block;}
	.for_tab.max1099{display: none;}

	/* SUPREMO */
	#concept_cnt05{
		width: 71%;
	}
	#concept_cnt06 > div{
		padding-left: 52px;
	}
	/* BRAND */
	#page_brand #intro .flex > div:nth-of-type(1){
		width:60%;
	}
	#brand_area_map{
		width:40%;
		padding-left: 0;
		padding-right: 0;
	}
	#page_brand #intro.pr50{
		padding-right: 0;
		width: 82%;
	}
	#page_brand .inner{
		width: 82%;
	}
}
/* ～1099：タブレット～小さめPC ================== */
@media (max-width: 1099px) {
	.for_tab.max1099{display: block;}
	#concept_cnt02 > div:nth-of-type(1) p{
		font-size: 1.875rem;
		letter-spacing: 0.15em;
	}
	#concept_cnt02 div{
		margin: 0 26px;
	}
	#concept_cnt02 div:nth-of-type(2){
		margin-right: 20px;
	}
	#concept_cnt05{
		width: 77%;
	}
	#concept_cnt06 > div{
		padding-left: 50px;
	}
	
}

/* 767～：SP ==================
===================================================== */
@media (max-width: 767px) {
/* 共通 ================= */
/* nav レイアウト ================ */
	nav{
		padding-top: 62px;
		align-items: start;
	}
	nav ul{
		width: 100%;
		padding: 0 20px 20px 20px;
	}
	nav li{
		font-size: 2.4rem;
		width: 100%;
		padding-bottom: 10px;
	}
	nav li:first-child,
	nav li:nth-last-child(3):nth-child(2n){/* 最後から3つ目が偶数個目だったら */
		width: 100%;
	}
	nav li:nth-last-child(3):nth-child(2n) {
		margin-bottom: 10px;
	}
	nav li span{
		font-size: 1.2rem;
	}
	nav li.current span{
		font-weight: 100;
	}
	nav li a{
		display: block;
		width: 268px;
	}
	#navbar,
	.on #navbar,
	header.scroll #navbar,
	.on:not(.scroll) #navbar,
	.on.scroll #navbar{
		height: 52px;
	}
	#navbar #siteid svg,
	.on #navbar #siteid svg,
	.scroll #navbar #siteid img,
	#navbar #siteid svg,
	.on #navbar #siteid svg,
	.scroll #navbar #siteid svg{
		top: 9px;
		left: 12px;
		width: 100px;
		height: auto;
	}
	#navbtn a{
		width: 48px;
		margin-right: 12px;
		margin-top: 14px;
	}
	#navbtn img{
		display: none;
	}
	#container:has(header.on),
	#container:has(header.closing){
		padding-top: 0;
	}
	/* footer ================= */
	footer ul{
		display: block;
		text-align: center;
	}
	footer div p{
		line-height: 1.4;
	}
	footer ul li{
		display:inline-block;
		margin-bottom: 2px;
	}
	footer ul li a{
		border-right: none;
		display: block;
		height: 2em;
		line-height: 2em;
		text-align: center;
	}
	footer small{
		font-size: 0.625rem;
	}
	.for_sp{display: block;}
	.flex{
		flex-direction: column;
	}
	#topcopy{
		height: 44px;
		line-height: 44px;
	}
	#topcopy img{
		width: 44.77%;
		height: auto;
	}
	/* bottom_link ================= */
	#bottom_link{
		padding: 40px 20px;
	}
	#bottom_link div{
		flex-direction: column;
	}
	#bottom_link div p{
		margin: 0 auto 20px auto;
	}
	#bottom_link div p + p{
		margin: 0 auto 0 auto;
	}
	#bottom_link div a{
	}
/* 下層共通 ================= */
/* 各ページタイトルh1 ================= */
	h1{
		/* */
		font-size: 3.5rem;
		margin-bottom: 30px;
		letter-spacing: 0.2em;
	}
	h2{
		/* */
		font-size: 2rem;
		margin-bottom: 24px;
		line-height: 1.6;
	}
	h2 + p{
		/* */
		font-size: 1.5rem;
		text-align: justify;
		text-align-last: left;
		margin-bottom: 50px;
	}
	#page_limited #intro,
	#page_meister #intro,
	#page_high #intro,
	#page_brand #intro,
	#page_one #intro{
		padding-top: 50px;
	}
	#intro.pl174{
		padding-left: 30px;
	}
	#intro.pr50{
		padding-right: 30px;
	}
	#intro p span.txt{
		display: inline;
	}
	#intro p br{
		display: none;
	}
/* SUPREMO ================= */
	#mainmovie{
		display: none;
	}
	#mainmovie_sp{
		display: block;
		aspect-ratio: 1/1;
		padding-bottom: 0;
	}
	#mainmovie_sp  div{
		padding-bottom: 0;
	}
	#mainmovie_sp iframe{
		width: 100%;
		margin-bottom: 0;
		padding-bottom: 0;
	}
	#page_supremo #intro{
		padding-left: 55px;
		padding-right: 55px;
	}
	#page_supremo #intro h1{
		margin-top: 58px;
		margin-bottom: 57px;
	}
	#page_supremo #intro h1 img{
	width: 66.5%;
	height: auto;
	}
	#page_supremo #intro h2{
		font-size: 1.4rem;
		line-height: 1.8;
		margin-bottom: 15px;
	}
	#page_supremo h2 + p,
	#page_supremo #intro p{
		font-size: 1.30rem;
		line-height: 2;
		text-align: justify;
		text-align-last: left;
	}
	#page_supremo #sec_products{
		padding-top: 38px;
	}
	#page_supremo #sec_products h2{
		font-size: 11px;
	}
	/*#page_supremo #intro p span.txt{
		display: inline-block;
	}*/
	#page_supremo h2 + p{
		margin-bottom: 50px;
	}
	#page_supremo h2 + p br{
		display: none;
	}
	.banner_sales {
		text-align: center;
		padding: 10px 20px 50px 20px;
	}
	.banner_sales a{
		width: 16em;
		font-size: 1.4rem;
	}
	.banner_sales a:hover,
	.banner_sales a:active{
		background: #A37C51;
	}
	.copy_bar{
		height: 40px;
		line-height: 40px;
	}
	.copy_bar img{
		width: 24.4%;
		height: auto;
	}
	#concept_cnt01{
		padding-top: 25px;
		padding-bottom: 50px;
	}
	#sec_concept h3{
		font-size: 1.53rem;
		margin-bottom: 11px;
	}
	#sec_concept h3 + p img{
		height: 12.6px;
		width: auto;
	}
	#concept_cnt02{
		flex-direction: column;
		padding-top: 65px;
		padding-bottom: 40px;
	}
	#concept_cnt02 div{
		width: 100%;
		margin: 0;
		padding: 0 55px;
	}
	#concept_cnt02 span.txt{
		display: inline !important;
	}
	#concept_cnt02 > div.flex:nth-of-type(1){
		padding-bottom: 21px;
	}
	#concept_cnt02 > div:nth-of-type(1) p{
		font-size: 1.4rem;
	}
	#concept_cnt02 > div.flex:nth-of-type(2){
		padding-bottom: 94px;
	}
	#concept_cnt02 > div:nth-of-type(2) p{
		text-align: justify;
		text-align-last: left;
		font-size: 1.4rem;
		line-height: 2;
	}
	#concept_cnt02 > div:nth-of-type(2) p br{
		display: none;
	}
	#concept_cnt02 > div:nth-of-type(2) p span.txt{
		display: inline;
	}
	#concept_cnt03{
		padding: 0 55px 50px 55px;
	}
	#concept_cnt03 > div{
		margin-left: 0;
	}
	#concept_cnt03 h4{
		text-align: center;
	}
	#concept_cnt03 h4 img{
		width: 62%;
		min-width: auto;
	}
	#concept_cnt03 h5{
		font-size: 1.8rem;
		padding: 20px;
	}
	
	#concept_cnt03 p{
		padding: 30px 0;
		font-size: 1.4rem;
		text-align: justify;
		text-align-last: left;
	}
	#concept_cnt03 p span.txt{
		display: inline;
	}
	#concept_cnt03 p br{
		display: none;
	}
	#concept_cnt04{
		margin-bottom: 70px;
	}
	#concept_cnt05{
		padding: 0 55px 50px 55px;
		width: 100%;
	}
	#concept_cnt05 p{
		font-size: 1.4rem;
		text-align: justify;
		text-align-last: left;
		line-height: 2;
	}
	#concept_cnt05 p span.txt{
		display: inline;
	}
	#concept_cnt05 p br{
		display: none;
	}
	#concept_cnt05 img{
		margin-bottom: 26px;
	}
	#concept_cnt06{
		padding: 0 55px 200px 55px;
		flex-direction: column;
	}
	#concept_cnt06 picture,
	#concept_cnt06 > div{
		width: 100%;
		margin-bottom: 40px;
	}
	#concept_cnt06 > div{
		padding-left: 0;
	}
	#concept_cnt06 > div p{
		text-align: justify;
		text-align-last: left;
		font-size: 1.4rem;
	}
	#concept_cnt06 > div p br{
		display: none;
	}
	#concept_cnt06 > div p span.txt{
		display: inline;
	}
	#sec_concept{
		padding-bottom: 50px;
	}
	/* links */
	#sec_links a.links{
		padding-top: 75%;
	}
	#sec_links a.links img{
		height: 100%;
		width: auto;
	}
		#sec_links a.links h5{
		font-size: 3.8rem;
		letter-spacing: 0.2em;
		margin-bottom: 4px;
	}
	#sec_links a.links p{
		font-size: 1.9rem;
		letter-spacing: 0.2em;
	}
	#sec_links a.links span{
		font-size: 1.4rem;
		width: 130px;
		height: 18px;
		line-height: 18px;
		margin-top: 18px;
	}
	/* 個別位置 */
	#sec_links a#link_limited img{
		right: -62%;
		left: auto;
		top: 0;
		bottom: auto;
	}
	#sec_links a#link_meister img{
		right: 0;
		left: auto;
		top: 0;
		bottom: auto;
	}
	#sec_links a#link_high-class img{
		right: -100%;
		left: auto;
		top: 0;
		bottom: auto;
	}
	#sec_links a#link_brandarea img{
		right: -70%;
		left: auto;
		top: 0;
		bottom: auto;
	}
	#sec_links a#link_theone img{
		right: -69%;
		left: auto;
		top: 0;
		bottom: auto;
	}
	#consultation_link{
		font-size: 1.5rem;
	}
	#consultation_link a{
		width: calc( 100% - 100px);
	}
	/* MAGGIORE */
	.copy_bggray{
		font-size: 1.5rem;
		line-height: 1.8;
		padding-bottom: 54px;
	}
	#maggiore_top{
		background-image: url("../img/supremo/maggiore_sp.jpg");
		background-image: image-set(
			url("../img/supremo/maggiore_sp.webp") 1x type("image/webp"),
			url("../img/supremo/maggiore_sp.jpg")  1x type("image/jpeg")
		);
		aspect-ratio: 1214/876;
		width: 100%;
		height: auto;
		padding-top: 40px;
		min-height: auto;
	}
	#maggiore_detail h4{
		line-height: 1.6;
	}
	#maggiore_top#maggiore_top h3{
		margin-bottom: 20px;
	}
	#maggiore_top#maggiore_top h3 img{
		width: 63.7%;
		height: auto;
	}
	#maggiore_top a{
		width: 63.7%;
	}
	#maggiore_detail{
		padding-left: 40px;
		padding-right: 40px;
	}
	#maggiore_detail h5{
		font-size: 1.8rem;
	}
	#maggiore_detail p{
		text-align: justify;
		text-align: left;
		text-align-last: left;
		font-size: 1.4rem;
	}
	#maggiore_detail p span.txt{
		display: inline;
	}
	#maggiore_detail p br{
		display: none;
	}
	#maggiore_detail p br.for_sp{
		display: block;
	}
	/* LIMITED ================= */
	#page_limited #img01 img{
		margin-bottom: 50px;
	}
	#page_limited .cont_txt{
		margin-top: 40px;
		padding-bottom: 50px;
		font-size: 1.5rem;
		line-height: 1.9;
	}
	/*MEISTER ================= */
	.meister_cnt{
		padding-bottom: 50px;
	}
	.meister_cnt p{
		margin-top: 30px;
		font-size: 1.5rem;
		line-height: 1.9;
	}
	.meister_cnt p.pl50{
		padding-left: 30px;
	}
	.meister_cnt p.pr150{
		padding-right: 30px;
	}
	.meister_cnt p.pl150{
		padding-left: 30px;
	}
	.meister_cnt p.pr50{
		padding-right: 30px;
	}
	.meister_cnt p.tar{
		text-align: left;
	}
	#meister_cont01{
	flex-direction: column;
	}
	#meister_cont01 p{
		font-size: 1.5rem;
		margin-left:0;
	}
	#meister_cont01 picture,
	#meister_cont01 > div.flex{
		width: 100%;
		padding-left: 30px;
		padding-right: 30px;
	}
	#meister_cont01 p br.for_tab{
		display: none;
	}
	/*HIGH CLASS ================= */
	#page_high .cnt_photo{
		padding-bottom: 50px;
	}
	#page_high .cnt_photo p{
		margin-top: 40px;
		font-size: 1.5rem;
	}
	#page_high #img02 > div:nth-of-type(1){
		width: 100%;
		padding: 0 50px 40px 50px;
	}
	#page_high #img02 > div:nth-of-type(2){
		width: 100%;
		padding-left: 50px;
		padding-right: 50px;
	}
	/*BRAND AREA ================= */
	#page_brand #intro .flex > div:nth-of-type(1),
	#brand_area_txt{
		width: 100%;
		margin-bottom: 30px;
	}
	#brand_area_txt{
		padding: 30px;
	}
	#page_brand #intro h2 + p{
		margin-bottom: 10px;
	}
	#brand_area_txt h3{
		font-size: 1.7rem;
	}
	#brand_area_txt p{
		font-size: 1.4rem;
	}
	#brand_area_map{
		display: none;
	}
	#brand_area_map_sp{
		display: block;
		padding-top: 0;
		margin-bottom: 30px;
	}
	#brand_area_map_sp img{
		width: 100%;
		height: auto;
	}
	#page_brand .inner #img01{
		width: 100%;
		margin-left: 0;
	}
	#page_brand .inner#img01,
	#page_brand .inner#img05,
	#page_brand .inner#img09{
		margin-bottom: 18px;
	}
	#page_brand .inner #img02,
	#page_brand .inner #img03,
	#page_brand .inner #img04,
	#page_brand .inner #img05,
	#page_brand .inner #img06,
	#page_brand .inner #img07,
	#page_brand .inner #img08,
	#page_brand .inner #img09,
	#page_brand .inner #img10,
	#page_brand .inner #img11,
	#page_brand .inner #img12{
		width: 100%;
		padding-left: 30px;
		padding-right: 30px;
		margin-left: 0;
	}
	#page_brand .photocap{
		padding-left: 30px;
		padding-top: 15px;
		font-size: 1.5rem;
		margin-bottom: 40px;
		line-height: 1.9;
	}
	#page_brand .inner{
		width: 100%;
	}
	#page_brand .inner #img04{
		padding-bottom: 0;
	}
	#page_brand #img08{
		padding-bottom: 0;
	}
	#page_brand #img08 + p{
		padding-left: 30px;
		padding-right: 30px;
	}
	#page_brand #img10 + div{
		width: 100%;
		margin-left: 0;
	}
	#page_brand #img10 .photocap{
		padding-left: 0;
	}
	/*THE ONE ================= */
	#page_one #intro{
		padding-bottom: 80px;
	}
	#page_one #intro p.btn a{
		width: 80%;
		font-size: 1.6rem;
		height: 50px;
		line-height: 46px;
	}
	#page_one #intro h2 + p{
		margin-bottom: 40px;
	}
	#page_one .umber h3{
		font-size: 4rem;
		padding: 100px 0 10px 0;
	}
	#page_one .workscnt .title{
		width: calc( 100% - 40px );
		flex-direction: column;
		align-items: end;
		margin-bottom: 20px;
	}
	#page_one .workscnt .title h4{
		width: 100%;
		margin-bottom: 15px;
		font-size: 1.8rem;
	}
	#page_one #case_mini{
		padding-top: 80px;
		width: 80%;
	}
	#case_mini .flex article{
		width: 100%;
		margin-bottom: 20px;
	}
	#case_mini article h5{
		margin-bottom: 10px;
		font-size: 1.6rem;
	}
	#case_mini .flex{
		padding-bottom: 60px;
	}
	#case_mini p.btn a{
		width: 90%;
		font-size: 1.6rem;
		height: 50px;
		line-height: 46px;
	}
	#page_one .umber{
		padding-bottom: 80px;
	}
}