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

ブレークポイント768px/1024px/1441px
-----------------------------------------------------------*/
/*-- base font-size -----------------------------------------
769px～	font-size: calc(1000vw/1440)
	1440pxのとき1rem:10px
～768px	font-size: calc(1000vw/360)
	360pxのとき1rem:10px;
-----------------------------------------------------------*/

.p9_accessories{
	background-color: #000;
	color:#fff;
	max-width:1440px;
	margin:0 auto;
}
.p9_accessories h2 {
	font-size:min(3.2rem,32px);
	letter-spacing: 0.04em;
}
.p9_accessories img{
	pointer-events: none;
}
a.external_link{
	display:inline-flex;
	padding-right:min(3.5rem,35px);
	background: url("../images/ico_external_link.png") no-repeat;
	background-size: min(2.4rem,24px);
	background-position: right 1px center;
	align-items: center;
}
@media screen and (max-width: 768px) {
	a.external_link{
		background-size: 1.6rem;
		padding-right:	2.4rem;
	}
}

/* 戻るボタン
 -------------------------------------*/

.p9_accessories .return_btn{
	font-size:13px;
	color:#000;
	display:inline-flex;
	width:90px;
	height:36px;
	background-color: rgba(250,250,251,0.40);
	border:1px solid;
	justify-content: center;
	align-items: center;
	border-radius:18px;
	position:fixed;
	top:calc(138px + 24px);
	left:calc(50vw - 720px + 24px );
	z-index: 10;
	transition: 0.4s;
}
.p9_accessories .return_btn img{
	width:15px;
	margin-right:6px;
}

@media screen and (max-width: 1440px) {
	.p9_accessories .return_btn{
		/*top: calc((100vw * 138 / 1440 + 24px));*/
		top:calc(2.2rem + 34.5px + 0.55rem + 1.8rem + 5.8rem + 24px);
		left:24px;
	}
}
@media screen and (max-width: 1024px) {
	.p9_accessories .return_btn{
		top: calc((100vw * 0.07 + 15px));
		left:15px;
	}
}
@media screen and (max-width: 768px) {
	.p9_accessories .return_btn{
		top: calc((100vw * 66 / 360 + 7px));
		left:7px;
	}
}
@media screen and (min-width: 769px) {
	.p9_accessories .return_btn:hover{
		background-color: rgba(250,250,251,0.80);
	}
}

/* 撮りたい、その瞬間を逃さない
 -------------------------------------*/
.p9_accessories .moment_bg,
.p9_accessories .moment::after {
	position:sticky;
	top:0;
	width:100%;
	height:100vh;
}
.p9_accessories .moment_bg{
	background-image: url('../images/bg_moment_01.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.p9_accessories .moment_bg .board_bk{
	width:100%;
	height:100%;
	background-color: rgba(0,0,0,0);
/*	position:absolute;
	left:0;
	top:0;
	opacity:0;*/
}

.p9_accessories .moment_text {
	width:100%;
	height:100%;
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	opacity:0;
	transition: 2s;
}
.p9_accessories .moment_text.fadein {
	opacity:1;
}
.p9_accessories .moment_text h2 {
	font-size: min(3.8rem, 38px);
	letter-spacing: 0.04em;
}
.p9_accessories .moment_text p {
	font-size:min(1.6rem,16px);
	line-height: 2;
	margin-top:2em;
	text-align: left;
	letter-spacing: 0.04em;
}
.p9_accessories .moment::after {
	content:"";
	display:block;
	height:360vh;
}

.p9_accessories .moment{
	position: relative;
}
.p9_accessories .moment .page_arrow {
	position:absolute;
	top:0;
	left:50%;
	width:1px;
	height:min(3.6rem,36px);
	background-color: #FFF;
}
.p9_accessories .moment .page_arrow::before {
	content:"";
	position: absolute;
	bottom:100%;
	width:1px;
	height:min(15.6rem,156px);
	background-color: #000;
}
.p9_accessories .moment .page_arrow::after {
	content:"";
	position: absolute;
	width:8px;
	height:8px;
	border-left:1px solid #FFF;
	border-bottom:1px solid #FFF;
	transform: rotate(-45deg);
	transform-origin: left bottom;
	left: 0.5px;
	bottom: -1px;
}

@media screen and (max-width: 768px) {
	.p9_accessories .moment_bg{
		background-image: url('../images/bg_moment_01_sp.jpg');
	}
	.p9_accessories .moment_text h2 {
		font-size:2rem;
		letter-spacing: 0.02em;
	}
	.p9_accessories .moment_text p {
		font-size:1.5rem;
		width:90%;
		margin:2em auto 0;
		text-align: center;
		letter-spacing: 0.02em;
	}
	.p9_accessories .moment::after {
		height:220vh;
	}
	.p9_accessories .moment .page_arrow {
		height:4.6rem;
		background-color: #FFF;
	}
	.p9_accessories .moment .page_arrow::before {
		height:min(8.2rem,82px);
	}
	.p9_accessories .moment .page_arrow::after {
		
	}
}

/* 3つのシーン
 -------------------------------------*/
.p9_accessories .scene{
	margin-top: 30rem
}
.p9_accessories .scene .scene_wrap{
	position:relative;
	opacity:0;
}

.p9_accessories .scene h2 {
	position:absolute;
	line-height: 1.8;
	z-index:9;
}
.p9_accessories .scene img.scene_photo{
	z-index:7;
	position:absolute;
	top:0;
}
.p9_accessories .scene img.scene_illust{
	z-index:8;
	position: absolute;
}
.p9_accessories .scene01 h2{
	top:14.46%;
	right:15.76%;
}
.p9_accessories .scene01 img.scene_photo{
	width:74.93%;
	left:0;
}
.p9_accessories .scene01 img.scene_illust{
	width:24.5%;
	right:8.8%;
	top:44%;
}
.p9_accessories .scene02{
	margin-top:15rem
}
.p9_accessories .scene02 h2{
	top:7.04%;
	left:17.78%;
}
.p9_accessories .scene02 img.scene_photo{
	width:61.88%;
	right: 4.79%;
}
.p9_accessories .scene02 img.scene_illust{
	width:27.3%;
	left:3.5%;
	top:36%;
}
.p9_accessories .scene03 {
	margin-top:17rem
}
.p9_accessories .scene03 h2{
	top:4.18%;
	right:16.3%;
}
.p9_accessories .scene03 img.scene_photo{
	width:39.86%;
	left:25.90%;
}
.p9_accessories .scene03 img.scene_illust{
	width:22.5%;
	right:13.5%;
	top:33%;
}
@media screen and (min-width: 769px) {
	.p9_accessories .scene .scene01.scene_wrap{
		aspect-ratio:1440 / 809;
	}
	.p9_accessories .scene .scene02.scene_wrap{
		aspect-ratio:1440 / 668
	}
	.p9_accessories .scene .scene03.scene_wrap{
		aspect-ratio:1440/ 766;
	}
}
@media screen and (max-width: 768px) {
	.p9_accessories .scene{
		margin-top: 10rem
	}
	.p9_accessories .scene > div h2 {
		position:static;
		font-size:2rem;
		text-align: center;
	}
	.p9_accessories .scene img.scene_photo{
		position:relative;
		z-index:8;
		margin:3.7rem 0 0 0;
	}
	.p9_accessories .scene img.scene_illust{
		z-index:7;
	}
	.p9_accessories .scene01 img.scene_photo{
		width:100%;
	}
	.p9_accessories .scene01 img.scene_illust{
		width:27%;
		right:9%;
		top:-10%;
	}
	.p9_accessories .scene02{
		margin-top:5rem
	}
	.p9_accessories .scene02 img.scene_photo{
		width:100%;
		right:0;
	}
	.p9_accessories .scene02 img.scene_illust{
		width:30%;
		left:7.5%;
		top:-6%;
	}
	.p9_accessories .scene03 {
		margin-top:5rem
	}
	.p9_accessories .scene03 img.scene_photo{
		width:100%;
		left:0;
	}
	.p9_accessories .scene03 img.scene_illust{
		width:24%;
		right:4.5%;
		top:-4.5%;
	}

}

/* ケース紹介
 -------------------------------------*/
.p9_accessories .case {
	margin-top:min(20rem,200px);
	/*display: flex;
	justify-content: center;*/
}
.p9_accessories .case > div {
	text-align: center;
}
.p9_accessories .case .official_case{
	/*width:min(474rem,474px)*/
}
.p9_accessories .case .official_case_img{
	width:min(28rem,280px);
	margin:min(4rem,40px) auto 0;
}
.p9_accessories .case .official_store_link{
	margin-top:min(3.2rem, 32px);
}
.p9_accessories .case .official_store_link a {
	width:min(27rem,270px);
	height:min(6.4rem,64px);
	display:inline-flex;
	justify-content: center;
	align-items: center;
	border:1px solid;
	border-radius:3.2rem;
	font-size:min(1.6rem,16px);
}
.p9_accessories .case .official_store_link a img{
	width:1.25em;
	margin-left:0.7em
}
.p9_accessories .case .other_case{
	/*width:min(52rem,520px);*/
	margin-top:min(9.6rem,96px);
}
.p9_accessories .case .other_case dl{
	margin-top: min(4rem,40px);
}
.p9_accessories .case .other_case dt{
	font-size:min(1.2rem,12px);
	margin-top:min(5.6rem,56px);
	letter-spacing: 0.02em;
}
.p9_accessories .case .other_case dd {
	margin-top:min(0.8rem,8px);
}
.p9_accessories .case .other_case dd a{
	font-size:min(1.6rem,16px);
	text-decoration: underline;
	letter-spacing: 0.04em;
}
@media screen and (max-width: 768px) {
	.p9_accessories .case {
		margin-top:min(12rem,120px);
		display: block;
	}
	.p9_accessories .case h2{
		font-size:2rem;
	}
	.p9_accessories .case .official_case{
		width:100%;
	}
	.p9_accessories .case .official_case_img{
		width:100%;
		margin:1.6 auto 0;
	}
	.p9_accessories .case .official_store_link{
		margin-top:1.6rem;
	}
	.p9_accessories .case .official_store_link a {
		width:28.7rem;
		height:4rem;
		border-radius:3.2rem;
		font-size:1.2rem;
		position:relative;
	}
	.p9_accessories .case .official_store_link a img{
		position:absolute;
		right:1.8rem;
		top:50%;
		transform: translateY(-50%);
		width:1.23rem;
	}
	.p9_accessories .case .other_case{
		width:100%;
		margin-top: 8rem;
	}
	.p9_accessories .case .other_case dl{
		margin-top:0;
	}
	.p9_accessories .case .other_case dt{
		font-size:1.1rem;
		margin-top: 3.2rem;
	}
	.p9_accessories .case .other_case dd {
		margin-top:1.55rem;
	}
	.p9_accessories .case .other_case dd a{
		font-size:1.1rem;

	}
}

/* フィルタ―ありなしphoto
 -------------------------------------*/
.p9_accessories .filter_photo{
	margin-top:min(20rem,200px);
}

.p9_accessories .filter_photo .no_filter {
	position:sticky;
	left:0;
	top:0;
	width:100%;
	height:100vh;
	background-image: url('../images/bg_photo_no_filter.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.p9_accessories .filter_photo .with_filter {
	width:100%;
	height:100%;
	background-image: url('../images/bg_photo_with_filter.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	clip-path: inset(0 0 100% 0);/*下からのする場合は1つめを100％にする*/
	display:flex;
	justify-content: center;
	align-items: center;
}
.p9_accessories .filter_photo::after{
	content:"";
	display: block;
	position:sticky;
	left:0;
	top:0;
	width:100%;
	height:200vh; 
}
.p9_accessories .filter_photo .with_filter h2 {
	opacity:0;
	transition:2s;
	text-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
	font-size: min(3.8rem, 38px);
}
.p9_accessories .filter_photo .with_filter h2.fadein {
	opacity:1
}

@media screen and (max-width: 768px) {
	.p9_accessories .filter_photo .no_filter {
		background-image: url('../images/bg_photo_no_filter_sp.jpg');
	}
	.p9_accessories .filter_photo .with_filter {
		background-image: url('../images/bg_photo_with_filter_sp.jpg');
	}
	.p9_accessories .filter_photo .with_filter h2 {
		font-size:2rem;
	}
	.p9_accessories .filter_photo::after{
		height:150vh; 
	}
}


/* 作例
 -------------------------------------*/
.p9_accessories .example_photo{
	margin-top:min(26.8rem,268px);
	
}
.p9_accessories .example_photo .photo_wrap{
	height:640vh;/**/
}
.p9_accessories .example_photo .example_list_pc{
	/*width:min(89.5rem,895px);*/
	max-width:min(89.5rem,895px);
	width:889.5rem;
	margin:0 auto;
	position:sticky;
	z-index:5;
	
}
.p9_accessories .example_photo .example_list_pc::after{
	content:"";
	display:block;
	height:100vh;
}
.p9_accessories .example_photo .example_list_pc li{
	position:absolute;
	left:0;
	top:0;
	opacity:0;
	transition:2s;
}
.p9_accessories .example_photo .example_list_pc img{
	width:100%;
}
.p9_accessories .example_photo .example_list_pc li.fade{
	display: block;
	opacity:1;
}
.p9_accessories .example_photo .example_list_pc li:nth-child(2) img{
	transform: rotate(-4.84deg) translate(-4%, 4.8%)
}
.p9_accessories .example_photo .example_list_pc li:nth-child(3) img{
	transform: rotate(7.75deg) translate(8.5%, 7%);
}
.p9_accessories .example_photo h2,
.p9_accessories .example_photo p{
	position: relative;
	z-index:8;
	text-align: center;
	opacity:0;
	transition: 2s;
}
.p9_accessories .example_photo h2{
	font-size:min(3.8rem,38px);
	margin-top:min(7rem,70px);
}
.p9_accessories .example_photo h2.fade,
.p9_accessories .example_photo p.fade{
	opacity:1
}
.p9_accessories .example_photo p{
	font-size:min(1.6rem,16px);
	margin-top:min(4rem,40px);
	line-height: 1.8;
	letter-spacing: 0.04em;
}
@media screen and (max-width: 768px) {
	.p9_accessories .example_photo{
		margin-top:8rem;
	}
	.p9_accessories .example_photo h2,
	.p9_accessories .example_photo p{
		text-align: left;
		width:90%;
		margin:auto;
		opacity: 1;
	}
	.p9_accessories .example_photo h2{
		font-size:2rem;
	}
	.p9_accessories .example_photo p{
		font-size:1.5rem;
		margin-top:1.6rem;
	}
	.p9_accessories .example_photo .example_list_sp{
		margin-top: 2.4rem;
	}
}

/* フィルターの装着方法
 -------------------------------------*/
.p9_accessories .attach_filter{
	margin:min(20rem,200px) auto 0;
	width:min(115.2rem,1152px);
	height:min(57.6rem,576px);
	background: url("../images/bg_attach_filter.jpg") no-repeat;
	background-size: 100%;
	display:flex;
	align-items: center;
	position:relative;
}
.p9_accessories .attach_filter .attach_filter_img{
	width:min(53.7rem,537px);
	height:100%;
}
.p9_accessories .attach_filter .attach_filter_text li{
	position:absolute;
	font-size:min(1rem,10px);
	top:10.42%;
}
.p9_accessories .attach_filter .attach_filter_text li::after{
	content:"";
	position: absolute;
	width:0;
	top:2.5em;
	left:50%;
	border-left: 1px solid;
}
.p9_accessories .attach_filter .attach_filter_text li:nth-child(1){
	left:8.94%;
}
.p9_accessories .attach_filter .attach_filter_text li:nth-child(2){
	left:20.5%;
}
.p9_accessories .attach_filter .attach_filter_text li:nth-child(3){
	left:26.5%;
}
.p9_accessories .attach_filter .attach_filter_text li:nth-child(1)::after{
	height:2.8em;
}
.p9_accessories .attach_filter .attach_filter_text li:nth-child(2)::after{
	height:5.9em;
}
.p9_accessories .attach_filter .attach_filter_text li:nth-child(3)::after{
	height:5.9em;
}
.p9_accessories .attach_filter .howto_attach_filter{
	width:min(61.5rem,615px);
	padding-right:min(4.8rem,48px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	
}
.p9_accessories .attach_filter .howto_attach_filter h2{
	font-size:min(2.4rem,24px);
}
.p9_accessories .attach_filter .howto_attach_filter > p {
	margin-top:1em;
	font-size:min(1.6rem,16px);
	line-height: 1.8;
	letter-spacing: 0.04em;
}
.p9_accessories .attach_filter .howto_attach_filter h3{
	font-size:min(1.2rem,12px);
	margin-top:min(2.4rem,24px);
	opacity:0.5
}
.p9_accessories .attach_filter .howto_attach_filter .attachment h3{
	margin-top:min(4rem,40px);
}
.p9_accessories .attach_filter .howto_attach_filter h3::before{
	content:"";
	display: inline-block;
	width: 0;
	height: 0;
	border-style: solid;
	border-top: 0.39em solid transparent;
	border-bottom: 0.39em solid transparent;
	border-left: 0.615em solid #ffffff;
	border-right: 0;
	margin-right:0.6em;
	margin-left:0.3em;
}
.p9_accessories .attach_filter .howto_attach_filter ul{
	margin-top: min(1.6rem,16px);
}
.p9_accessories .attach_filter .howto_attach_filter li {
	
}
.p9_accessories .attach_filter .howto_attach_filter li a{
	font-size:min(1.6rem,16px);
	text-decoration: underline;
}
.p9_accessories .attach_filter .howto_attach_filter dt {
	margin-top: min(0.8rem, 8px);
	font-size: min(1.2rem, 12px);
}
.p9_accessories .attach_filter .howto_attach_filter dt + dd {
	margin-top:min(0.4rem, 4px);
}
.p9_accessories .attach_filter .filter_list li {
	margin-top: min(1.6rem,16px);
}
	

@media screen and (max-width: 768px) {
	.p9_accessories .attach_filter{
		margin:12rem auto 0;
		width:100%;
		height:auto;
		background: url("../images/bg_attach_filter_sp.jpg") no-repeat;
		background-size: 100%;
		display:block;
	}
	.p9_accessories .attach_filter .attach_filter_img{
		width:auto;
		height:85vw;
	}
	.p9_accessories .attach_filter .attach_filter_text li{
		font-size:1.1rem;
		top:2.3rem;
	}
	.p9_accessories .attach_filter .attach_filter_text li::after{
		top:1.8em;
	}
	.p9_accessories .attach_filter .attach_filter_text li:nth-child(1){
		left:6.3rem;
	}
	.p9_accessories .attach_filter .attach_filter_text li:nth-child(2){
		left:13.5rem;
	}
	.p9_accessories .attach_filter .attach_filter_text li:nth-child(3){
		left:20.8rem;
	}
	.p9_accessories .attach_filter .attach_filter_text li:nth-child(1)::after{
		height:3rem;
	}
	.p9_accessories .attach_filter .attach_filter_text li:nth-child(2)::after{
		height:5.2em;
	}
	.p9_accessories .attach_filter .attach_filter_text li:nth-child(3)::after{
		height:5.4rem;
		
	}
	.p9_accessories .attach_filter .howto_attach_filter{
		width:auto;
		padding:0;
		margin:0 5%;
		position: relative;
	}
	.p9_accessories .attach_filter .howto_attach_filter h2{
		font-size:2rem;
	}
	.p9_accessories .attach_filter .howto_attach_filter > p {
		margin-top:1.6rem;
		font-size:1.5rem;
		letter-spacing: 0.02em;
	}
	.p9_accessories .attach_filter .howto_attach_filter h3{
		font-size:2rem;
		margin-top:4.8rem;
		text-align: center;
		opacity:1;
	}
	.p9_accessories .attach_filter .howto_attach_filter h3::before{
		content:none;
	}
	.p9_accessories .attach_filter .howto_attach_filter .attachment h3{
		margin-top:8rem;
	}
	.p9_accessories .attach_filter .howto_attach_filter ul{
		display:block;
	}
	.p9_accessories .attach_filter .howto_attach_filter li {
		width:auto;
		text-align: center;
		margin-top:3.2rem;
	}
	.p9_accessories .attach_filter .howto_attach_filter li a{
		font-size:1.1rem;
	}
	.p9_accessories .attach_filter .howto_attach_filter dt {
		font-size: 1.1rem;

	}
	.p9_accessories .attach_filter .howto_attach_filter dt + dd {
		margin-top:1.6rem;
	}
}


/* カメラ
 -------------------------------------*/
.p9_accessories .camera {
	margin-top:min(20rem,200px) ;
}
@media screen and (max-width: 768px) {
	.p9_accessories .camera {
		margin-top:16rem ;
	}
}