@charset "UTF-8";

/*-----------------------------------------------------------
    ～768 （Mobile）	リキッド
 769～1023（Tablet）	リキッド
1024～1440（PC）		リキッド
1440～    （PC）		コンテンツ幅固定。左右の余白が広がる

ブレークポイント768px/1024px/1441px
-----------------------------------------------------------*/

/* ヘッダー高さ取得 */
:root{
	--header-height:138px;
}
@media screen and (max-width: 1440px){
	:root{
		--header-height:calc( 7.229vw + 34px );
	}
}
@media screen and (max-width: 1024px){
	:root{
		--header-height: 6.941176vw;
	}
}

@media screen and (max-width: 768px){
	:root{
		--header-height: calc( 17.55vw + 5.215px );
	}
}

/* アンカーリンク 挙動と位置調整*/
html {
	scroll-behavior: smooth; 
	scroll-padding-top: calc(var(--header-height) + 15px);
}

/*-----------------------------------  
  common
-----------------------------------*/
.photoStyle {
	font-size:min(1.6rem,16px);
}
.photoStyle p{
	line-height:1.8;
}

@media screen and (max-width: 768px) {
	.photoStyle {
		font-size:1.4rem;
	}
}
/*-----------------------------------  
  Main Visual
-----------------------------------*/
.photoStyle .mainVisual {
	max-width:1440px;
	margin:auto;
}
/*-----------------------------------  
  MENU
-----------------------------------*/
.photoStyle nav {
	padding:5em 0;
	background-color:#F5f5f5;
}
.photoStyle nav .styleNav{
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
	width:min(92rem,920px);
	margin:auto;
	gap:1em;
}
.photoStyle nav .styleNav li{
	display:flex;
	width:min(14rem,140px);
	aspect-ratio:1;
	transition :0.4s;
	overflow: hidden;
	border-radius: 3%;
}
.photoStyle nav .styleNav li img{
	transition: 0.4s
}
@media screen and (min-width: 769px) {
	.photoStyle nav .styleNav li:hover{
		opacity:0.8;
	}
	.photoStyle nav .styleNav li:hover img{
		transform: scale(1.05);
	}
}
@media screen and (max-width: 768px) {
	.photoStyle nav {
		padding:4rem 0;
	}
	.photoStyle nav .styleNav{
		gap:0.7rem;
		justify-content: flex-start;
		width:31.4rem;/*10×3＋0.7×2*/
		margin:auro;
	}
	.photoStyle nav .styleNav li{
		width:10rem;
	}
}

/*-----------------------------------  
  STYLE FILTER 詳細
-----------------------------------*/

.photoStyle .styleContents{
	background-color: #696969;
	padding:7.5em 0;
}
.photoStyle section {
	max-width:min(120rem,1200px);
	margin:auto;
	background: #fff;
	padding:min(6rem,60px);
}
.photoStyle section + section{
	margin-top:7.5em;
}
.photoStyle section .styleHeader {
	display: flex;
	justify-content: space-between;
	border-bottom:1px solid;
	padding-bottom:0.5em;
}
.photoStyle section .styleHeader h2{
	margin:0;
	letter-spacing: 0;
	line-height: 1.6;
	font-size:2.25em;
	font-weight:600;
}
.photoStyle section .styleHeader .styleNum{
	font-size:2em;
}
.photoStyle section .styleHeader .styleNum span{
	font-weight:600;
}
.photoStyle section .styleHeader .styleNum span.large{
	font-size:1.3em;
}
.photoStyle section .styleType{
	display:flex;
	justify-content: flex-end;
	border-right:1px solid;
}
.photoStyle section .styleType li{
	width:7em;
	line-height: 2.5;
	border-left:1px solid;text-align: center;
}
.photoStyle section .styleType li.active{
	font-weight:600;
	background-color: #000;
	color:#fff;
}
.photoStyle section h3{
	font-size:1.5em;
	font-weight:500;
	position:relative;
	margin-top:1em;
}
.photoStyle section h3::after{
	content:"";
	width:min(68rem,680px);
	height:0;
	border-top: 1px solid;
	position:absolute;
	top:150%;
	left:0;
}
.photoStyle section h4{
	margin-bottom: 0.5em;
	font-weight:500;
	letter-spacing: 0;
	font-size:0.8em;
	margin-top:1em;
}
.photoStyle section .flex_cont{
	margin-top:1.5em;
	display:flex;
	justify-content: space-between;
}
.photoStyle section .exp_org{
	align-items: flex-start;
	position: relative;
}
.photoStyle section .switch{
	align-items: flex-end;
}
.photoStyle section .styleExplain{
	width:min(56rem,560px);
}
.photoStyle section .styleExplain .styleLead {
	font-weight:500;
	margin-top: 2.5em;
}
.photoStyle section .styleExplain .styleDetail {
	margin-top: 1.5em;
}
.photoStyle section .originalImg{
	width:min(40rem,400px);
	z-index: 2;
}
.photoStyle section .originalImg::after{
	content: "";
	width: 13%;
	height: min(35rem, 350px);
	position: absolute;
	top: 100%;
	right: 13%;
	border-right: 1px solid;
	border-bottom: 1px solid;
	z-index: 1;
}
.photoStyle section .switchingImg {
	width:min(80rem,800px);
	z-index: 2;
}
.photoStyle section .initialSetup {
	width:min(22rem,220px);
	margin-bottom:5.5em;
	text-align: right;
}
.photoStyle section .initialSetup li{
	margin-top:0.5em;
}
.photoStyle section .initialSetup li span{
	display:inline-block;
	width:2.5em;
	text-align: center;
	margin-left: 0.1em;
	border:1px solid #000;
}
.photoStyle section .initialSetup li span.on{
	background-color: #000;
	color:#fff;font-weight:500;
}
.photoStyle section .initialSetup li span.off{}
.photoStyle section .styleNote{
	margin-top: 3em;
}
.photoStyle section .styleNote h4{
	margin-top:3em;
}
.photoStyle section .styleNote p {
	margin-top:1em;
	font-size:0.875em;
}
.photoStyle section .styleNote .noticeImg{
	display:flex;
	gap:min(3rem,30px);
	margin-top:1em;
}
.photoStyle section .styleNote .noticeImg li{
	width:min(34rem,340px);
}

@media screen and (max-width: 768px) {
	.photoStyle .styleContents{
		padding:4rem 1rem;
	}
	.photoStyle section {
		padding:1.5rem 1.5rem 2rem 1.5rem;
	}
	.photoStyle section + section{
		margin-top:4rem;
	}
	.photoStyle section .styleHeader {
		display:block;
		position:relative;
	}
	.photoStyle section .styleHeader h2{
		font-size:2.5rem;
		position:absolute;
		top:235%;
	}
	.photoStyle section .styleHeader .styleNum{
		font-size:1.2rem;
		text-align: right;
	}
	.photoStyle section .styleType li{
		font-size:1rem;
		width:auto;
		padding:0 1em;
	}
	.photoStyle section h3{
		margin-top:0;
	}
	.photoStyle section h3::after{
		content:none;
	}
	.photoStyle section h4{
		font-size:1rem;
	}
	.photoStyle section .flex_cont{
		margin-top:2em;
		display:flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.photoStyle section .exp_org{
		align-items: flex-end;
		margin-top:7rem
	}
	.photoStyle section .switch{
		align-items: flex-end;
	}
	.photoStyle section .styleExplain{
		width:100%;
	}
	.photoStyle section .styleExplain .styleLead {
		margin-top:1.5em;
	}
	.photoStyle section .originalImg{
		width:60%;
		margin-top:2rem;
		position: relative;
	}
	.photoStyle section .originalImg::after{
		right:50%;
		width:0;
		border-bottom:none;
		height:6rem;
	}
	.photoStyle section .switchingImg {
		width:100%;
	}
	.photoStyle section .initialSetup {
		width:100%;
		margin-bottom:0;
		margin-top:2rem;
	}
	.photoStyle section .initialSetup ul{
		display:flex;
		justify-content: flex-end;
	}
	.photoStyle section .initialSetup ul li + li{
		margin-left:1em;
	}
	.photoStyle section .styleNote .noticeImg{
		gap:1rem;
		flex-wrap:wrap;
	}
	.photoStyle section .styleNote .noticeImg li{
		width:calc((100% - 1rem)/2);
	}
}

/*-----------------------------------
  製品ページへ
-----------------------------------*/
.photoStyle .toProducts{
	padding:min(10rem,100px) 0;
}
.photoStyle .toProducts .productWrap{
	margin:0 auto;
	width:min(50rem,500px);
	display: grid;
	grid-template-columns: 3fr 5fr;
	grid-template-rows: 4fr 5fr ;
	gap: 2em 3em;
}
.photoStyle .toProducts .modelImg {
	grid-column: 1;
	grid-row: 1 / span 2; 
}
.photoStyle .toProducts .logoImg {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
}
.photoStyle .toProducts .logoImg img {
	width: auto;
	height: min(3rem,30px);
}
.photoStyle .toProducts .linkBtn {
	grid-column: 2;
	grid-row: 2;
	text-align: center;
}
.photoStyle .toProducts .linkBtn a{
	display:inline-block;
	border:1px solid;
	text-align: center;
	padding: 0.5em 3em 0.5em 2em;
	position:relative;
	transition: 0.4s;
}
.photoStyle .toProducts .linkBtn a::after{
	content:"";
	position:absolute;
	right:1em;
	top:1em;
	width:0.5em;
	height:0.5em;
	border-right:1px solid;
	border-top:1px solid;
	transform:rotate(45deg);
}
@media screen and (min-width: 769px) {
	.photoStyle .toProducts .linkBtn a:hover{
		background-color: #ddd;
	}
}
@media screen and (max-width: 768px) {
	.photoStyle .toProducts{
		padding:8rem 0;
	}
	.photoStyle .toProducts .productWrap{
		display:flex;
		flex-direction: column;
		gap:1.8rem;
		width:auto;
	}
	.photoStyle .toProducts .modelImg {
		display:block;
		text-align: center;
	}
	.photoStyle .toProducts .modelImg img{
		width:12rem;
		display:inline-block;
	}
	.photoStyle .toProducts .logoImg {
		display:block;
		text-align: center;
	}
	.photoStyle .toProducts .logoImg img {
		display:inline-block;
		height: 2.8rem;
	}
	.photoStyle .toProducts .linkBtn {

	}
}