@charset "utf-8";

/* ***************************************************************************************************
	COMMON
*************************************************************************************************** */

/* mainRoleHeaderVisualWrap
------------------------------------------------------------------------ */
	/*.mainRoleHeaderVisualBox .ppic img {
		object-position: center center;
	}*/


/* tNavWrap
------------------------------------------------------------------------ */
	.tNavWrap {
		/* link */
		--site-moduleLink-color:				224,224,224;	/* rgb | #e0e0e0 */
		--site-moduleLink-color-hover:			210,210,210;	/* rgb | #d2d2d2 */
		--site-moduleLink-color-active:			119,119,119;	/* rgb | #777 */
		
		/* tNav */
		--default-tNav-a-padding-top: .25em;
		--default-tNav-a-padding-bottom: var(--default-tNav-a-padding-top);
		--default-tNav-li-max_width: 160px;	/* ボタン幅をそろえる */
		--default-tNav-li-quantity: 5;		/* ボタンの数 */
		
		min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */
		font-size: clamp(1.2em, calc(1.4rem + ((1vw - 7.69px) * 0.5254)), 1.42857em); /* w769,f16.8 ~ w1340,f19 (px) */
		border-color: rgba(var(--site-moduleLink-color-active), 1);
	}
	.tNavWrap li a {
		color: #111;
		border: 0 solid #666;
		border-width: 1px 1px 0;
	}
	/* -- placeholder, hover, current -- */
	.tNavWrap li a:not([href]) {
		color: rgba(17, 17, 17, .6);
		opacity: .3;
	}
	.tNavWrap li.is_current a {
		color: #fff;
		border-color: rgba(var(--site-moduleLink-color-active), 1);
	}
@media screen and (max-width: 1340px) { /*{TBl}*/
	.tNavWrap {
		--default-tNav-a-padding-top: .5em;
	}
}


/* caption
------------------------------------------------------------------------ */
	.storage::before {
		content: "";
		display: inline-block;
		width: 30px;
		height: 1.2em;
		vertical-align: text-bottom;
		background: #dcc18b;
		margin-right: .2em;
		/*border: 1px solid #555;*/
		transform: translateY(-.1em);
	}




/* ***************************************************************************************************
	PAGE
*************************************************************************************************** */

/* introTxtBox
------------------------------------------------------------------------ */
	.pageThemeHeader + .introTxtBox {
		margin-top: var(--default-marpad-XS);
	}
	.introTxt {
		font-size: 1.25em;
		text-align: center;
	}
	.introTxt .note {
		display: inline-block;
		font-size: .825em;
	}
@media screen and (max-width: 980px) { /*{TBs}*/
	.introTxt {
		font-size: 1.15em;
	}
}
@media screen and (max-width: 768px) { /*{SP}*/
	/*.introTxt {
		text-align: left;
	}*/
}
@media screen and (max-width: 430px) { /*{MinorBreakpoint}*/
	.introTxt {
		font-size: 1.1em;
	}
}




/* #planlist , #viewshot | ページ外からのアンカーリンク時でもスティッキーヘッダー分ずらす為
------------------------------------------------------------------------ */
	#viewshot,
	#planlist {
		transform: translateY( calc(var(--site-headerWrap-height) * -1) );
	}
@media screen and (max-width: 1340px) { /*{TBl}*/
	#viewshot,
	#planlist {
		transform: translateY( calc(var(--site-header-height) * -1) );
	}
}




/* typeBtnWrap
------------------------------------------------------------------------ */
	.typeBtnWrap {
		--roomplan-typeBtnBox-li-margin: clamp(15px, 2.3vw, 40px);
		
		position: relative;
		background: url("../images/roomplan/bg_01.jpg") bottom center / cover no-repeat;
		padding: 100px 0;
	}
	.typeBtnWrap::after {
		content: "image photo";
	}
	.typeBtnWrap::before {
		content: "";
		display: block;
		position: absolute;
		inset: 0 0 auto;
		height: 10px;
		background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .03) 50%, rgba(0, 0, 0, 0) 100%);
	}
	
	.typeBtnBox {
		max-width: calc(1000px + (var(--roomplan-typeBtnBox-li-margin) * 2));	/* liの左右余白分を加算 */
		text-align: center;
		opacity: 0;
		transition: opacity 0.5s ease-out;
	}
	.typeBtnBox.js_showTargetAnimate {
		opacity: 1;
	}
	/*body.innerP04 .typeBtnBox,
	body.innerP05 .typeBtnBox {	 2LDKページ、平面図ページ 
		max-width: calc(1000px + (var(--roomplan-typeBtnBox-li-margin) * 2));	 最大で3カラムにするため通常の .typeBtnBox より幅を狭める 
	}*/
	.typeBtnBox ul {
		display: inline-flex;
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
		margin-top: calc(var(--roomplan-typeBtnBox-li-margin) * -1);	/* liの上下余白分を相殺 */
		margin-bottom: calc(var(--roomplan-typeBtnBox-li-margin) * -1);	/* liの上下余白分を相殺 */
	}
	.typeBtnBox ul::before,
	.typeBtnBox ul::after,	/* ::before, ::after は位置調整用 */
	.typeBtnBox li {
		display: flex;
		width: 270px;
		/*width: calc(33% - (var(--roomplan-typeBtnBox-li-margin) * 2));*/
		margin: var(--roomplan-typeBtnBox-li-margin);
	}
	
	/*body.innerP04 .typeBtnBox ul::before,
	body.innerP04 .typeBtnBox ul::after,*/
	.typeBtnBox ul::before,
	.typeBtnBox ul::after{
		order: 1;
		content: "";
		height: 0;
		margin-top: 0;
		margin-bottom: 0;
	}
	
	.typeBtnBox li > a,
	.typeBtnBox li .funiture {
		/*display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;*/
		width: 100%;
		line-height: 1.5;
		color: #fff;
		font-size: 1.4rem;
		text-align: center;
		background: rgba(147, 121, 70, .8);
		padding: 20px 25px;
		/*border-radius: 5px;*/
		transition: background .48s ease-out, border-radius .18s ease-out;
	}
	.typeBtnBox li > a .type,
	.typeBtnBox li .funiture .type {
		width: 100%;
		color: #fff;
		font-family: var(--site-font_family-en1);
		font-size: 1.571em;
	}
	.typeBtnBox li > a .type .name,
	.typeBtnBox li .funiture .type .name {
		font-size: 1.5em;
		margin-right: -0.07em;
	}
	.typeBtnBox li > a .area,
	.typeBtnBox li .funiture .area {
		width: 100%;
		margin-top: 0.7em;
		padding-top: 1.2em;
		border-top: 1px solid rgba(255,255,255,.5);
	}
	.typeBtnBox li > a .area .ttl,
	.typeBtnBox li .funiture .area .ttl {
		display: block;
	}
	.typeBtnBox li > a .area .areaNum,
	.typeBtnBox li .funiture .area .areaNum {
		line-height: 1.2;
		font-family: var(--site-font_family-en1);
		font-size: 1.928em;
	}
	.typeBtnBox li > a .area .areaNum .js_upperNum,
	.typeBtnBox li .funiture .area .areaNum .js_upperNum {
		font-size: 1.333em;
	}
	.typeBtnBox li > a .area .heibei,
	.typeBtnBox li .funiture .area .heibei {
		font-size: 1.357em;
	}
	.typeBtnBox li > a .btn {
		position: relative;
		width: 100%;
		background: #e7e4dd;
		margin-top: 1.75em;
		padding: .6em .4em .8em;
		border-radius: 4px;
		transition: background .48s ease-out, border-radius .18s ease-out;
	}
	.typeBtnBox li .funiture .btnFuniture {
		position: relative;
		width: 100%;
		margin-top: 1.75em;
	}
	.typeBtnBox li .funiture .btnFuniture a .btn {
		position: relative;
		background: #e7e4dd;
		padding: .6em .4em .8em;
		border-radius: 4px;
		transition: background .48s ease-out, border-radius .18s ease-out;
	}
	.typeBtnBox li .funiture .btnFuniture a:not(:first-of-type) .btn {
		margin-top:0.5em;
	}
	.typeBtnBox li > a[href] .btn::after,
	.typeBtnBox li .funiture .btnFuniture a[href] .btn::after {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		left: auto;
		right: 10px;
		width: 0;
		height: 0;
		margin: auto;
		border-style: solid;
		border-width: 6px 0 6px 5px;
		border-color: transparent transparent transparent #9a7d45;
	}
	.typeBtnBox li > a .btn .label,
	.typeBtnBox li .funiture .btnFuniture a .btn .label {
		display: block;
		line-height: 1;
		color: #8e6a26;
		font-family: var(--site-font_family-en1);
		font-size: 1.25em;
	}
	.typeBtnBox li .funiture .btnFuniture a .btn .label.kana {
		font-family: var(--site-font_family-serif);
		font-size: 1em;
		line-height: 1.1;
	}
	.is_floorBtnBox.typeBtnBox a .floor {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		min-height: 110px;
		margin-top: 1.75em;
		margin-bottom: 1.75em;
	}
	.is_floorBtnBox.typeBtnBox a .floor em {
		line-height: 1.4;
		color: #fff;
		font-family: var(--site-font_family-en1);
		font-size: 1.5714em;
		letter-spacing: 0.07em;
	}
	.is_floorBtnBox.typeBtnBox a .floor .num {
		display: inline-block;
		font-size: 1.725em;
		margin: 0 .06em;
		transform: translateY(.04em);
	}
	.is_floorBtnBox.typeBtnBox a .floor .num .kara {
		display: inline-block;
		font-size: .5em;
		transform: translateY(-0.2em);
	}
	.is_floorBtnBox.typeBtnBox a .btn {
		margin-top: auto;
	}
	/* placeholder */
	.typeBtnBox a:not([href]) {
		opacity: .45;
	}
	.typeBtnBox a:not([href]) .btn {
		background: rgba(0, 0, 0, .05);
		box-shadow: 0 0 0 1px #e7e4dd inset;
	}
	.typeBtnBox a:not([href]) .btn .label {
		color: #e7e4dd;
	}
	@media (hover: hover) {
		.typeBtnBox li > a[href]:hover {
			/*background: rgba(173, 138, 66, .83);*/
			background: rgba(120, 94, 42, .83);
			/*border-radius: 8px;*/
		}
		.typeBtnBox li > a[href]:hover .btn,
		.typeBtnBox li .funiture .btnFuniture a[href]:hover .btn {
			background: #fff;
			/*border-radius: 4px;*/
		}
	}
	.typeBtnBox li > a[href]:focus-visible {
		background: rgba(120, 94, 42, .83);
		/*border-radius: 8px;*/
	}
	.typeBtnBox li > a[href]:focus-visible .btn {
		background: #fff;
		/*border-radius: 4px;*/
	}
	
@media screen and (max-width: 768px) { /*{SP}*/
	/* ////////////////////////////////////////////////////////////
		以下の min() の vw の値は「615px以下」から適用させる。
		min(3.25vw, 20px) = min((20/615*100vw), 20px)
	//////////////////////////////////////////////////////////// */
	.typeBtnWrap {
		--roomplan-typeBtnBox-li-margin: min(2.5vw, 20px);
	}
	.typeBtnWrap {
		padding: 60px 0;
	}
	
	.typeBtnBox ul::before,
	.typeBtnBox ul::after,
	.typeBtnBox li {
		width: calc(50% - (var(--roomplan-typeBtnBox-li-margin) * 2));
		/*max-width: 270px;*/
	}
	.typeBtnBox li {
	}
	.typeBtnBox li > a,
	.typeBtnBox li .funiture {
		/*font-size: min(2.27vw, 1.4rem);*/
		font-size: min(3.25vw, 1.4rem); /* フォントサイズ調整の為ここのみ(20/615*100vw) */
		padding: min(3.25vw, 20px) min(4.06vw, 25px);
	}
	/* フォントサイズ調整 */
	.typeBtnBox li > a .type,
	.typeBtnBox li .funiture .type {
		line-height: 1.2;
		font-size: 1.45em;
	}
	.typeBtnBox li > a .area,
	.typeBtnBox li .funiture .area {
		margin-top: 2.459vw;
		padding-top: 3vw;
	}
	.typeBtnBox li > a .area .areaNum,
	.typeBtnBox li .funiture .area .areaNum {
		font-size: 1.4em;
	}
	.typeBtnBox li > a .area .heibei,
	.typeBtnBox li .funiture .area .heibei {
		font-size: 1.1em;
	}
	.typeBtnBox li > a .btn {
		margin-top: 1em;
		padding: .45em .4em .55em;
	}
	.typeBtnBox li .funiture .btnFuniture {
		margin-top: 1em;
	}	
	.typeBtnBox li .funiture .btnFuniture a .btn {
		padding: .45em .4em .55em;
	}
	
	.typeBtnBox li > a[href] .btn::after,
	.typeBtnBox li .funiture .btnFuniture a[href] .btn::after {
		right: 7px;
		border-width: 5px 0 5px 4px;
	}
	.typeBtnBox li > a .btn .label,
	.typeBtnBox li .funiture .btnFuniture a .btn .label {
		font-size: 1em;
	}
	.typeBtnBox li .funiture .btnFuniture a .btn .label.kana {
		font-size: 0.8em;
	}
	.is_floorBtnBox.typeBtnBox a .floor {
		margin-top: 1em;
		margin-bottom: 1em;
	}
	.is_floorBtnBox.typeBtnBox a .floor em {
		font-size: 1.2em;
	}
	.is_floorBtnBox.typeBtnBox a .floor .num {
		font-size: 1.6em;
	}
}
@media screen and (max-width: 520px) { /*{SPs}*/
	.typeBtnWrap {
		/*padding: 45px 0;*/
	}
	.is_floorBtnBox.typeBtnBox a .floor {
		min-height: calc(50px + 2vw);
		margin-top: calc(1em + 2vw);
		margin-bottom: calc(1em + 2vw);
	}
	/*.is_floorBtnBox.typeBtnBox a .floor em {
		font-size: 1.35em;
	}*/
	
}
@media screen and (max-width: 615px) { /*{MinorBreakpoint}*/
	.typeBtnBox.contbox {
		width: var(--default-contentWide-XM);
	}
	.typeBtnBox ul {
		justify-content: space-between;
	}
}


/* typeDetailWrap
------------------------------------------------------------------------ */
	.typeDetailWrap {
	}
	.typeDetailUnit {
		display: none; /* [venobox]用 初期値 */
	}
	.typeDetailContents {
		/*max-width: 1000px;*/ /* [.vbox-inline]合わせ（myset.css） */
		margin: 0 auto;
		padding: clamp(30px, 6.12vw, 60px) clamp(25px, 5.2vw, 40px); /* pad-tbは980以下、pad-lrは768以下からサイズが変化する */
	}

/* typeUnit
---------------------------------------------------- */
	/* ****************** Grid__START */
	.typeUnit {
		display: grid;
		grid-template-areas:
			"Grid_spec    Grid_madori"
			"Grid_capBox  Grid_madori"
			"Grid_floor   Grid_floor";
		grid-template-rows: 1fr auto auto;
		grid-template-columns: 35% 1fr;
	}
	.typeUnit__spec {
		grid-area: Grid_spec;		/*background: green;*/
	}
	.typeUnit__madori {
		grid-area: Grid_madori;		/*background: red;*/
	}
	.typeUnit__capBox {
		grid-area: Grid_capBox;		/*background: blue;*/
	}
	.typeUnit__capBox_funiture {
		grid-area: Grid_capBox;		/*background: blue;*/
	}
	.typeUnit__floor {
		grid-area: Grid_floor;		/*background: skyblue;*/	/* 平面図の「grid-template-rows」は「auto」にすること */
	}
	/* ******************** Grid__END */
	
	.typeUnit {
		/*display: flex;
		flex-wrap: wrap;
		justify-content: space-between;*/
		color: #373532;
	}
	
	
	/* madori
	----------------------- */
	.typeUnit__madori {
		margin-left: 2.5%;
		text-align: center;
	}
	.madoriPic {}
	
	/* spec
	----------------------- */
	.typeUnit__spec {}
	.typeUnit__spec .specInner {}
	
	/* ----- type */
	.specType {
		display: block;
		position: relative;
		width: 100%;
		line-height: 1.35;
		color: #fff;
		font-family: var(--site-font_family-en1);
		font-size: 2.4rem;
		text-align: center;
		letter-spacing: 0.05em;
		background: #948973;
		padding: 0.6em 0.3em 0.4em;
	}
	.specType .name {
		line-height: 0.9;
		font-size: 1.1667em;
		margin-right: -.13em;
	}
	
	/* ----- ldk */
	.specLdk {
		display: block;
		line-height: 1.35;
		color: #84775e;
		font-family: var(--site-font_family-en1);
		font-size: 1.6rem;
		text-align: center;
		letter-spacing: 0.05em;
		background: #e6e3de;
		padding: 0.2em 1em;
	}
	
	/* ----- area */
	.specArea {
		display: block;
		line-height: 1.5;
		font-family: var(--site-font_family-serif);
		font-size: 1.4rem;
		letter-spacing: 0.01em;
		padding: 15px 0 20px;
	}
	.specArea .exclusive_area,
	.specArea .common_area {
		min-height: 1px; /* for IE. | ウィンドウサイズ変更で下部に謎余白が出るのを回避 */
	}
	.specArea .exclusive_area p,
	.specArea .common_area p {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: baseline;
		line-height: 1.35;
		padding: 2px 0;
	}
	
	/*.specArea .common_area .typeName {
		color: #444;
		font-size: 0.835em;
	}*/
	.specArea .ttl {
		padding-right: 0.1em;
	}
	.specArea .data {
		display: inline-block;
		font-family: var(--site-font_family-en1);
		margin-right: -0.4em; /* 文末約物の余白分を調整。不要なら消すこと。 */
	}
	.specArea .areaNum {
		font-size: 1.2857em;
	}
	.specArea .js_upperNum {
		line-height: 1.3;
		font-size: 1.667em;
	}
	/*.specArea .heibei {
		font-size: 1.85em;
	}
	.specArea .tsubo {
		display: inline-block;
		line-height: 1.2;
		font-size: 1.15em;
		margin: 0 -0.25em;
	}*/
	.specArea .tsuboNum {
		font-size: 1.2143em;
	}
	
	/* ----- merit */
	.specMerit {
		width: 100%;
		padding: 20px 0;
		border: 0 solid #948973;
		border-width: 1px 0 0;
	}
	.listUnit02 {
		display: flex;
		flex-wrap: wrap;
		line-height: 1.45;
		font-size: 1.4rem;
		letter-spacing: 0.04em;
	}
	.listUnit02 li {
		display: flex;
		width: 100%;
		margin: 0.2em 0;
	}
	.listUnit02 li::before {
		content: "";
		display: inline-block;
	/*	line-height: 0;*/
		width: 0;
		height: 0;
		background: #948973;
		margin-right: 0.2em;
		padding: 0.5em;
		transform: translateY(15%) scale(0.6) rotate(45deg);
	}
	.listUnit02 li > span {
		width: 100%;
	}

	/* ----- specEle */
	.specEle {
		width: 100%;
		padding: 20px 0;
	}
	.specEle img {
		display: block;
		width: 80%;
		max-width: 290px !important;
		margin-left: auto;
		margin-right: auto;
	}
	
	/* capBox
	----------------------- */
	.typeUnit__capBox { /* これに余白設定は不可 */ }
	.typeUnit__capBox .inner {
		width: 100%;
		padding: 20px 0 0;
	}
	.typeUnit__capBox .inner .js_captionsIncludedInDetails {
		padding: 20px;
		border: 1px solid #bbb;
	}
		/*funiture*/
		.typeUnit__capBox_funiture { /* これに余白設定は不可 */ }
		.typeUnit__capBox_funiture .inner {
			width: 100%;
			padding: 20px 0 0;
		}
		.typeUnit__capBox_funiture .inner .js_captionsIncludedInDetails {
			padding: 20px;
			border: 1px solid #bbb;
		}
		
		
	
	
	/* floor
	----------------------- */
	.typeUnit__floor {}
	.typeUnit__floor .floorPic {
		text-align: center;
	}

@media screen and (max-width: 1080px) { /*{MinorBreakpoint}*/
	.typeUnit { /* Grid 解除 */
		display: block;
	}
	
	/* madori
	----------------------- */
	.typeUnit__madori {
		width: 100%;
		margin-top: 30px;
	}
	
	/* spec
	----------------------- */
	.typeUnit__spec {
		width: 100%;
	}
	/* ----- area */
	.specArea {
		text-align: center;
	}
	.specAreaInner {
		display: inline-flex;
		flex-direction: column;
		text-align: left;
	}
	/* ----- merit */
	.specMerit {
		border-width: 1px 0;
	}
	.listUnit02 {
		justify-content: space-between;
		width: 100%;
		max-width: 560px; /* feeling. */
		margin: 0 auto;
	}
	.listUnit02 li {
		width: 47.5%;
	}
	
	/* ----- specEle */
	.specEle {
		text-align: center;
		padding: 30px 0 clamp(35px, 8.5vw, 60px);
		/*border: 0 solid #9a8c70;*/
		border-width: 0 0 1px;
	}
	.specEle img {
		max-width: 300px !important;
	}
	
	/* capBox
	----------------------- */
	.typeUnit__capBox .inner {
		padding-top: 40px;
	}
}
@media screen and (max-width: 550px) { /*{MinorBreakpoint}*/
	.listUnit02 li {
		width: 100%;
	}
}
@media screen and (max-width: 520px) { /*{SPs}*/
	.specArea {
		text-align: left;
	}
	.specAreaInner {
		display: block;
	}
	.specArea .exclusive_area p,
	.specArea .common_area p {
		display: block;
	}
	.specArea .ttl {
		display: block;
		color: #84775e;
		background: #e6e3de;
		padding: 0.2em 0.5em 0.1em;
		border-left: 3px solid #948973;
	}
	.specArea .ttl .separate {
		display: none;
	}
	.specArea .data {
		display: block;
		margin-right: 0;
		padding: 0.2em 0.5em;
	}
}





/* seinoContainer
------------------------------------------------------------------------ */
	.seinoContainer {
		background: #f5f5f5;
		padding-top:	var(--default-marpad-S);
		padding-bottom:	var(--default-marpad-S);
	}
	.seinoContainer .seinoUnit {
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}
@media screen and (max-width: 1340px) { /*{TBl}*/
	.seinoContainer .seinoUnit {
		width: clamp(300px, 55%, 370px);
	}
}
@media screen and (max-width: 520px) { /*{SPs}*/
	.seinoContainer .seinoUnit {
		width: clamp(100px, 92%, 300px);
	}
}





/* viewWrap
------------------------------------------------------------------------ */
	.viewWrap .ptHeading .hTxt {
		line-height: 1.73;
		margin-bottom: 1.5em;
	}
	.viewWrap .ptHeading .yori {
		display: inline-block;
		font: inherit;
		font-size: .9em;
		letter-spacing: inherit;
		margin: 0 -.15em;
	}
	.viewWrap .ptHeading .landmark {
		display: inline-block;
		font: inherit;
		font-size: .7em;
		letter-spacing: .12em;
	}
	.viewWrap .ptHeading .landmark::before,
	.viewWrap .ptHeading .landmark::after {
		content: "－";
		margin: 0 .2em;
	}


/* 眺望タブボタン
-------------------------------------------------------------- */
	.viewWrap .btnBoxBase ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin: 35px auto 60px;
	}
	.viewWrap .btnBoxBase ul li {
		display: flex;
		width: calc(40% - (15px * 2));
		max-width: 400px;
		min-height: clamp(58px, (70 / 1000 * 100vw), 70px);
		margin: 0 15px;
	}
	.viewWrap .btnBoxBase ul li a {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		width: 100%;
		min-height: 0.001vw; /* for safari | font-sizeにclamp()使用時必須 */
		line-height: 1.3;
		color: #333;
		font-family: var(--site-font_family-en1);
		font-size: clamp(1.8em, (30 / 1000 * 100vw), 2.14286em);
		text-align: center;
		padding: 5px clamp(15px, (15% + 7px), 52px);
		border: 3px solid #666;
		transition: background .38s ease-out, border .38s ease-out;
	}
	.viewWrap .btnBoxBase ul li a::before {
		content: "";
		display: block;
		position: absolute;
		inset: 0;
		background: rgba(102, 102, 102, .1);
		transform: translate(9px, 9px);
		transition: all .22s ease-out;
	}
	.viewWrap .btnBoxBase ul li a .label .ja {
		display: inline-block;
		font-size: .7em;
		margin: 0 .3em;
	}
	.viewWrap .btnBoxBase ul li a .btn,
	.viewWrap .btnBoxBase ul li a .btn::after {
		transition: border .22s ease-out, transform .22s ease-out;
	}
	.viewWrap .btnBoxBase ul li a .btn {
		display: block;
		position: absolute;
		inset: auto .4em auto auto;
		width: 15%; /* feeleng. */
		max-width:35px;
		height: 1px;
		margin-top: .2em;
		border-bottom: 1px solid #666;
		transform-origin: left bottom;
	}
	.viewWrap .btnBoxBase ul li a .btn::after {
		content: "";
		display: block;
		width: 47%;
		margin: auto 0 -1px auto;
		border-bottom: 1px solid #666;
		transform: rotate(25deg);
		transform-origin: right bottom;
	}
	/* active ----------------------- */
	.viewWrap .btnBoxBase ul li.active a {
		color: #785e2a;
		border-color: #937946;
		transition: all 0s;
		cursor: inherit;
	}
	.viewWrap .btnBoxBase ul li.active a::before {
		background: rgba(147, 121, 70, .2);
		transform: translate(0, 0);
		transition: all 0s;
	}
	.viewWrap .btnBoxBase ul li.active a .btn {
		display: none;
	}
	/* hover ----------------------- */
	@media (hover: hover) and (pointer: fine) {
		.viewWrap .btnBoxBase ul li:not(.active) a:hover::before {
			background: rgba(102, 102, 102, .25);
			transform: translate(13px, 13px);
		}
		.viewWrap .btnBoxBase ul li:not(.active) a:hover .btn {
			transform: scale(1.1);
		}
	}
	.viewWrap .btnBoxBase ul li:not(.active) a:focus-visible::before {
		background: rgba(102, 102, 102, .25);
		transform: translate(13px, 13px);
	}
	.viewWrap .btnBoxBase ul li:not(.active) a:focus-visible .btn {
		transform: scale(1.3);
	}
@media screen and (max-width: 768px) { /*{SP}*/
	.viewWrap .btnBoxBase ul {
		margin: clamp(15px, (30 / 620 * 100vw), 30px) auto clamp(30px, (50 / 620 * 100vw), 50px);
	}
	.viewWrap .btnBoxBase ul li {
		width: calc(44% - (7px * 2));
		margin: 0 7px;
	}
	.viewWrap .btnBoxBase ul li a {
		font-size: clamp(1.4em, (23 / 620 * 100vw), 1.8em);
	}
	.viewWrap .btnBoxBase ul li a::before {
		transform: translate(7px, 7px);
	}
	.viewWrap .btnBoxBase ul li a .label .ja {
		font-size: .6em;
	}
	@media (hover: hover) and (pointer: fine) {
		.viewWrap .btnBoxBase ul li:not(.active) a:hover::before {
			transform: translate(11px, 11px);
		}
	}
	.viewWrap .btnBoxBase ul li:not(.active) a:focus-visible::before {
		transform: translate(11px, 11px);
	}
}
@media screen and (max-width: 630px) { /*{MinorBreakpoint}*/
	.viewWrap .btnBoxBase ul li a::before {
		background: rgba(102, 102, 102, .15);
	}
	.viewWrap .btnBoxBase ul li a .label .ja {
		display: block;
	}
	/* hover ----------------------- */
	@media (hover: hover) and (pointer: fine) {
		.viewWrap .btnBoxBase ul li:not(.active) a:hover::before {
			transform: translate(9px, 9px);
		}
	}
	.viewWrap .btnBoxBase ul li:not(.active) a:focus-visible::before {
		transform: translate(9px, 9px);
	}
}

/* ===========
	ANIME
=========== */
	.viewWrap .ptHeading .hTxt.js_showTarget .txt {
		opacity: 0;
	}
	.viewWrap .btnBoxBase.js_showTarget ul li {
		opacity: 0; transform: translateY(15px);
	}
	/* Animate */
	.viewWrap .ptHeading .hTxt.js_showTargetAnimate .txt {
		animation: 1s ease both ANIME-viewWrap_hTxt_txt;
	}
	.viewWrap .btnBoxBase.js_showTargetAnimate ul li {
		animation: .5s ease both ANIME-viewWrap_tabBtnLi;
	}
	.viewWrap .btnBoxBase.js_showTargetAnimate ul li:nth-of-type(1) {	animation-delay: .1s;}
	.viewWrap .btnBoxBase.js_showTargetAnimate ul li:nth-of-type(2) {	animation-delay: .22s;}

@keyframes ANIME-viewWrap_hTxt_txt {
	0% {	opacity: 0;	clip-path: inset(0 100% 0 0);}
	100% {	opacity: 1;	clip-path: inset(0 0 0 0);}
}
@keyframes ANIME-viewWrap_tabBtnLi {
	0% {opacity: 0; transform: translateY(15px);}
	100% {opacity: 1; transform: translateY(0);}
}


/* 眺望スライダー
-------------------------------------------------------------- */
	/*.viewWrap .viewBoxCapLong {
		display: block;
		padding: .35em .5em .75em;
	}*/
/* =========================================================
	(hover: hover)
========================================================= */
@media (hover: hover) {
	.viewWrap .viewBox {
		position: relative;
	}
}
@media screen and (max-width: 520px) and (hover: hover) {
	.viewWrap .viewBoxCap.imgcapkeep {
		font-size: 1rem;
	}
}
/* jsPictViewMoveBox
--------------------------------- */
	.viewWrap .jsPictViewMoveBox,
	.viewWrap .jsPictViewMoveBox * {
		box-sizing: border-box;
	}
	.viewWrap .jsPictViewMoveBox,
	.viewWrap .jsPictViewMoveAnimeItem {
		position: relative;
	}
	.viewWrap .jsPictViewMoveBox { /* ---------------------------【親要素】---- */
		overflow: hidden;
	}
	.viewWrap .jsPictViewMoveAnimeItem { /* ---------------------【子要素】---- */
		/*
		 * 画像幅をパーセントにする『width』： [画像幅]/[親要素幅]*100 = 3032/1900*100 = 159.578947%
		**/
/*		width: 159.578947%;*/
	}
	.viewWrap .viewSection01 .jsPictViewMoveAnimeItem { /* 3043/2000*100 */
		width: 152.15%;
	}
	.viewWrap .viewSection02 .jsPictViewMoveAnimeItem { /* 3842/2000*100 */
		width: 192.1%;
	}
	.viewWrap .jsPictViewMoveAnimeItem img { /* -----------------【孫要素】---- */
		/*
		 * 子要素にフィットさせる『width:100%;max-width:none;height:auto;』（base.css初期値のクリア）
		 * カスタム		『margin-left: -○%』： [画像のはみ出し幅(左)]/[画像幅]*100 = 324/3032*100 = -10.686015%
		 * 中央揃えにする『margin-left: -○%』： [画像のはみ出し幅(片側)]/[画像幅]*100 | <例> 350/1800*100 = -19.444%
		 * 右揃えにする	『margin-left: -○%』： [画像のはみ出し幅(両側)]/[画像幅]*100 | <例> 700/1800*100 = -38.888%
		**/
		width: 100%;
		max-width: none;
		height: auto;
/*		margin-left: -19.444%;*/ /* 中央揃えにする */
	}
	.viewWrap .viewSection01 .jsPictViewMoveAnimeItem img { /* 766/3043*100 */
		margin-left: -25.17252711140322%;
	}
	.viewWrap .viewSection02 .jsPictViewMoveAnimeItem img { /* 940/3842*100 */
		margin-left: -24.46642373763665%;
	}
	/* btn */
	.viewWrap .jsPictViewMoveBox .jsPictViewMoveBtnBox {
		display: block;
	}
	.viewWrap .jsPictViewMoveBox .jsPictViewMoveBtnBox button {
		/* clear */
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		color: inherit;
		font: inherit;
		background: transparent;
		border: none;
		border-radius: 0;
		cursor: pointer;
		/* reset */
		position: absolute;
		top: 0;
		bottom: 0;
		width: clamp(25px, (52 / 1200 * 100vw), 52px);
		height: clamp(52px, (97 / 1200 * 100vw), 97px);
		background: center center / contain no-repeat;
		margin: auto;
		/*box-shadow: 0 0 8px 3px rgba(0, 0, 0, .18);*/
	}
	.viewWrap .jsPictViewMoveBox .jsPictViewMoveBtnBox .btnLeft {
		left: 0;
		background-image: url("../gadget/pause/img/view_btn_l.png");
	}
	.viewWrap .jsPictViewMoveBox .jsPictViewMoveBtnBox .btnRight {
		right: 0;
		background-image: url("../gadget/pause/img/view_btn_r.png");
	}
	.viewWrap .jsPictViewMoveBox .jsPictViewMoveBtnBox button .label {
		/* cliphidden（ラベル文字を隠す） */
		position: absolute; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(0px 0px 99.99% 99.99%); overflow: hidden; width: 1px; height: 1px; white-space: nowrap; padding: 0; border: 0;
	}

/* =========================================================
	(hover: none)
========================================================= */
@media (hover: none) {
	.viewWrap .viewBoxCap.imgcapkeep {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		position: static;
		padding: .5em;
	}
	.viewWrap .viewBoxCap.imgcapkeep,
	.viewWrap .viewBoxCap.imgcapkeep > * {
		color: inherit;
		text-shadow: none;
	}
}
/* jsPictViewSwipeBox
--------------------------------- */
	/* 基本設定 */
	.viewWrap .jsPictViewSwipeBox {
		position: relative;
		z-index: 0;
	}
	.viewWrap .jsPictViewSwipeIcon { /* ※各ページCSS内のタイミングで block にする */
		display: none; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1;
		width: 60px;
		height: 60px;
		margin: auto;
		background: url("../images/share/ico_swipe_wh.svg") 50% center / contain no-repeat;
		animation: 1.1s ease-in-out .2s infinite alternate both jsPictViewSwipeIcon_motion;
	}
	.viewWrap .jsPictViewSwipeInnerBox {
		display: block;
		position: relative;
		width: 100%;
		-webkit-overflow-scrolling: touch;
	}
	.viewWrap .jsPictViewSwipeInnerBoxOverlay { /* ※各ページCSS内のタイミングで block にする */
		display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
		background: rgba(0, 0, 0, .35);
	}
	/* 固有設定 */
	.viewWrap .jsPictViewSwipeIcon,
	.viewWrap .jsPictViewSwipeInnerBoxOverlay { display: block;}
	.viewWrap .jsPictViewSwipeInnerBox { overflow-x: scroll;}
	.viewWrap .jsPictViewSwipeInnerBox img {max-width: none;}
	/*.viewWrap .jsPictViewSwipeInnerBoxOverlay,
	.viewWrap .jsPictViewSwipeInnerBox img {width: 160%;}*/
	.viewWrap .viewSection01 .jsPictViewSwipeInnerBoxOverlay,
	.viewWrap .viewSection01 .jsPictViewSwipeInnerBox img {width: 160%;}
	.viewWrap .viewSection02 .jsPictViewSwipeInnerBoxOverlay,
	.viewWrap .viewSection02 .jsPictViewSwipeInnerBox img {width: 200%;}

@media screen and (max-width: 700px) {
	.viewWrap .viewSection01 .jsPictViewSwipeInnerBoxOverlay,
	.viewWrap .viewSection01 .jsPictViewSwipeInnerBox img {width: 210%;}
	.viewWrap .viewSection02 .jsPictViewSwipeInnerBoxOverlay,
	.viewWrap .viewSection02 .jsPictViewSwipeInnerBox img {width: 265%;}
}
@media screen and (max-width: 480px) {
	.viewWrap .viewSection01 .jsPictViewSwipeInnerBoxOverlay,
	.viewWrap .viewSection01 .jsPictViewSwipeInnerBox img {width: 260%;}
	.viewWrap .viewSection02 .jsPictViewSwipeInnerBoxOverlay,
	.viewWrap .viewSection02 .jsPictViewSwipeInnerBox img {width: 330%;}
}
/* =================================
	@KEYFRAMES
================================= */
@keyframes jsPictViewSwipeIcon_motion {
	0% {	transform: translateX(-20px);}
	100% {	transform: translateX(20px);}
}