@charset "utf-8";
/* 2023_01_18 enjoy_photo_css_accessibility_common.css */

/* ---------------------------------
	common
-----------------------------------*/

#contents p + p{
	margin-top:1em;
}

/* list */

#contents ul{
    list-style-type: none;
	margin-left: 0;
	padding:0;
}

#contents ul.disc{
	list-style-type: disc !important;
}

#contents ol{
	padding:0;
	margin-left:1em;
}

#contents ol li{
    margin-bottom: 1em;
}

#contents li{
	margin:0;
    float: none;
}

#contents ul.txtlink li{
	margin-right: 0;
}

#contents section > ul{
	margin-left:1em;
}

#contents ul.disc,
#contents section > ol{
	margin-left:3em;
}

#contents dl,
#contents dl dt,
#contents dl dd{
	margin:0;
	padding:0;
}

#contents section > dl{
	margin-left: 1em;
}

#contents dl dt{
	margin-bottom: 0.5em;
	font-weight: 700;
}
#contents dl dd{
	margin-bottom: 1.5em;
}

#contents dl.indent dd{
	padding-left: 1em;
}

/* link */

#contents a.textLink{
	background-position: 0 7px;
	display: inline-block;
	margin-left: 0.5em;
}

#contents ul.txtlink{
	margin-left:0.5em;
}


#contents ul.txtlink.inner > li,
#contents a.textLink.inner{
    background: url(/support/share/images/arrow_underline.gif) no-repeat 0 0.5em !important;
    margin-bottom: 5px;
}

#contents span.textLink{
	background: url(/support/share/images/arrow_black.gif) no-repeat;
	background-position:0 6px;
	padding-left:1em;
	display: inline-block;
}

#contents span.textLink.inner{
    background: url(/support/share/images/arrow_underline.gif) no-repeat 0 0.5em !important;
}

/* annotation */
#contents p.annotation,
#contents ul.annotation{
	margin-left:1em;
}
#contents p.annotation,
#contents ul.annotation li{
	padding-left: 1em;
    text-indent: -1em;
}

#contents ul.annotation li{
    margin-left: 0;
}

#contents p + p.annotation{
	margin-top:0.5em;
}

/* notice*/
#contents .notice_gray {
	margin: 15px 0 0 0;
    padding: 12px 20px;
    border: #999999 1px solid;
}

#contents .notice_gray_b{
    background-color: #EBEBEB;
    padding: 20px;
	margin: 1.5em 0 1.5em 1em;
}

#contents .notice_gray_b > ul.disc{
	margin-left: 1.5em !important;
}

#contents img.icon{
	vertical-align: middle;
}

@media (max-width: 640px){
    #contents p{
        margin-left: 0;
    }
	#contents ul.disc,
	#contents section ol{
		margin-left:2em;
	}
	#contents ul.txtlink{
		margin-left:0.5em;
	}
	#contents p + a.textLink{
		margin-left: 0.5em;
	}
	#contents p.annotation,
	#contents ul.annotation{
		margin-left:0.5em;
	}
	#contents .notice_gray_b{
		margin-left: 5px;
        margin-right: 5px;
	}
}

/* ---------------------------------
	accessibility
----------------------------------- */

html{
	font-size: 0.813rem;
}
.mod-mainContentContainer{
	font-size: 1rem;
}

#contents p,
#contents a{
	word-break: break-all;
}
#contents section{
	margin-top: 40px;
	margin-bottom: 20px;
}

#contents .flex{
	display: flex;
	justify-content: space-between;
}

#contents .flex.baseline{
	align-items: baseline;
}

#contents .flex.wrap_center{
	flex-wrap: wrap;
	justify-content: center;
}

#contents .textLink{
	padding-left: 13px;
	background: url(/support/share/images/arrow_black.gif) no-repeat;
	background-position: 0 7px;
}

#contents p + p{
	margin-top: 1rem;
}

#contents .titleArea{
	display: flex;
	align-items: stretch;
}

#contents .titleArea > span{
	display: inline-flex;
	align-items: center;
	padding: 8px 10px;
	background-color: #d24615;
	color: #fff;
	font-size: 1.692rem;
	font-weight: bold;
}
#contents .titleArea .titleWrap{
	width: 100%;
}

#contents .titleArea .titleWrap h1{
	padding-left: 10px;
	font-size: 1.846rem;
	font-weight: normal;
	border-bottom: 1px solid #d24615;
}

#contents .titleArea .titleWrap > a{
	margin-left: 1em;
	margin-top: 10px;
}

#contents nav.anchorArea{
	padding-top: 0;
}
#contents nav.anchorArea > ul.txtlink.inner{
	margin-left: 0;
}
#contents nav.anchorArea > ul.txtlink.inner > li {
	margin-right: 15px;
	margin-bottom: 0;
}

#contentsArea{
	width: auto;
	margin: 30px 0 0 0;
	padding: 0 35px;
	font-size: 1.077rem;
}
#contents .topArea.flex{
	align-items: flex-start;
}
#contents .topArea .text_wrapper{
	margin-left: 1.5em;
	padding: 0 1.5em 1em 0;
}

#contents .topArea .text_wrapper .linkBtn a{
	display: inline-block;
	width: 14em;
	margin-top: 15px;
	padding: 1.2em 10px;
	border: 1px solid #bcbcbc;
	border-radius: 3px;
	box-sizing: border-box;
	background: url(/support/share/images/bg_mod-linkButton.jpg);
	background-size: contain;
	color: #000;
	font-size: 0.923rem;
	text-align: left;
	text-decoration: none;
}

#contents figure figcaption,
#contents p.caption{
	font-size: 1rem;
}

#contents ul.txtlink.inner.flex{
	flex-wrap: wrap;
	justify-content: flex-start;
}

#contents ul.txtlink.inner > li{
	margin-top: 12px;
	padding-left: 14px;
	background: url(/support/ichigan/images/enjoy/photo/ico_anchor.png) no-repeat;
	background-position: 0 6px;
}

#contents .bg-gray {
	background: #333333;
	color: #FFFFFF;
	padding: 10px 15px;
	margin: 30px 0 15px 0;
	font-size: 1.231rem;
	line-height: 1;
	letter-spacing: 0;
}

#contents .s-title {
	margin: 0 0 28px 0;
	border-bottom: #999 1px solid;
	font-size: 1.846rem;
	border-left: #999 7px solid;
	padding: 3px 10px 0 15px;
	font-weight: normal;
}

#contents .grayArea{
	background: #F0F0F0;
	margin: 15px 0 0 0;
	padding: 20px 40px;
}

#contents .pct{
	margin: 1em 0;
}
#contents .grayArea .photo img,
#contents .grayArea .pct img{
	height: auto;
}

#contents .grayArea .flex .photo.v_img{
	margin: 0 78px;
}

#contentsArea .grayArea .flex ~ p{
	margin: 1em 0 2em;
	font-size: 0.929em;
}

#contents .photo.one_center{
	max-width: 620px;
	margin: 10px auto 0;
}
#contents .photo.one_v_img{
	max-width: 400px;
	margin: 10px auto 0;
}

#contents .settingList p{
	font-size: 1.231rem;
	font-weight: bold;
}
	
#contents .settingList ul.disc{
	margin-top: 10px;
	margin-left: 1.5em;
}

#contents .settingList ul.disc > li{
	margin-bottom: 0.5em;
}
#contents .flex .photo:not(.modal):not(.v_img) img:not(.icon),
#contents .flex.wrap_center .photo:not(.v_img) img:not(.icon){
	width: 380px;
	max-width: 380px;
}
#contents .flex .photo.v_img img{
	width: 235px;
	max-width: 235px;

}
#contents .flex.three .photo img{
	width: 250px;
	max-width: 250px;
}

#contents .topArea.flex .photo img:not(.icon){
	width: 400px;
	max-width: 400px;
}

#contents .lensinfoArea .info_wrapper p.series {
	font-size: 1.077rem;
	margin-top: 0;
}

#contents ul.bnrlist {
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
	margin: 2em 5em;
	list-style: none;
}

#contents ul.bnrlist li{
	line-height: 0;
	margin-bottom: 6px;
}

#contents ul.bnrlist li a{
	display: block;
}


@media (max-width: 640px){
	#contents .flex{
		flex-direction: column;
		align-items: center;
	}
	
	#contents ul.txtlink.inner.flex{
		align-items: flex-start;
	}
		
	#contents .pct img:not(.icon):not(.s_img),
	#contents .photo:not(.modal) img{
		width: 100%;
		max-width: 380px;
		height: auto;
	}

	#contents .s-title {
		font-size: 1.385rem;
	}
	#contentsArea {
		padding: 0;
	}
	#contents .topArea .text_wrapper {
		margin-left: 0;
		padding-right: 0;
	}
	
	#contents .topArea .photo{
		margin: 0 auto;
	}
	
	#contents .grayArea {
		padding: 20px 10px;
	}
	
	#contents .grayArea .flex .photo.v_img {
		margin: 0 auto;
	}
	
	#contents .flex .photo:not(.modal) img{
		width: 100%;
	}
	#contents .flex .photo img:not(.icon),
	#contents .flex.three .photo img{
		width: 100%;
	}
	
	#contents .flex.wrap_center .photo:not(.v_img) img{
		width: 100%;
	}
	
	#contents .topArea.flex .photo img:not(.icon) {
		width: 100%;
	}
	
	#contents .flex .photo + .photo{
		margin-top: 1em;
	}
	
	#contents .flex.baseline{
		align-items: center;
	}

	#contents ul.bnrlist {
		margin: 2em 0;
	}
	
	#contents ul.bnrlist li a img{
		width: 100%;
		max-width: 300px;
		height: auto;
	}
}

@media (max-width: 340px){
	
	.mod-content,
	.upsidedown-frame{
		display: block !important;
	}
}