@charset "utf-8";

html {
width: 100%;
height: 100%;
}

body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

img {
width: 100%;
height: 100%;
object-fit: contain;
vertical-align: middle;
}




@media screen and (min-width: 0px) and (max-width: 700px) {

body {
background: linear-gradient( 100deg, rgba(255,234,214,0.8), rgba(255,234,214,0.8)), url(/others/all_img/haikei_photo.jpg);
background-size: cover;
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
}

.photo_page_main {
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
/* mo-画像の背景
background: #f5deb3;
mo-画像の背景 */
}
	
.photo_page_copyright { /* mo-コピーライト */
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 10%;
font-size: 75%;
}

.photo_page_photo_wrapper { /* mo-画像の枠 */
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 90%;
position: relative;
}

.photo_page_photo_size { /* mo-画像のサイズ */
width: 100%;
background-size: contain; 
background-repeat: no-repeat;
background-position: center;
position: absolute;
top: 0; /* mo-『top』と『bottom』の数値で画像の縦幅を変えられる */
bottom: 0; /* mo-『top: 0;』『bottom: 0;』で高さが親要素と同じになる */
left: 0;
right: 0;
}

.comment { /* mo-説明文 */
width: 100%;
position: absolute;
top: 0.5rem;
left: 50%;
transform: translate(-50%, 0%);
font-size: 2vh;
text-align: center;
color: #FFFFFE;
text-shadow : 
3px  3px 3px #1a1a1a,
-3px  3px 3px #1a1a1a,
3px -3px 3px #1a1a1a,
-3px -3px 3px #1a1a1a,
3px  0px 3px #1a1a1a,
0px  3px 3px #1a1a1a,
-3px  0px 3px #1a1a1a,
0px -3px 3px #1a1a1a;
}

.photo_page_return { /* mo-戻るボタン */
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 10%;
font-size: 75%;
}


}




@media screen and (min-width: 701px) {

.photo_page_main {
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
/*
background: #f5deb3;
*/
}

.photo_page_copyright { /* pc-コピーライト */
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
width: 100%;
height: 5%;
color: #333333;
font-size: 75%;
}

.photo_page_photo_wrapper { /* pc-画像の枠 */
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 90%;
position: relative;
}

.photo_page_photo_size { /* pc-画像のサイズ */
width: 98%;
background-size: contain; 
background-repeat: no-repeat;
background-position: center;
position: absolute;
top: 0; /* pc-『top』と『bottom』の数値で画像の縦幅を変えられる */
bottom: 0; /* pc-『top: 0;』『bottom: 0;』で高さが親要素と同じになる */
left: 1%;
right: 0;
z-index: 0;
}

.comment { /* pc-説明文 */
position: absolute;
top: 0.5rem;
left: 1rem;
font-size: 2vh;
color: #FFFFFE;
text-shadow : 
3px  3px 3px #1a1a1a,
-3px  3px 3px #1a1a1a,
3px -3px 3px #1a1a1a,
-3px -3px 3px #1a1a1a,
3px  0px 3px #1a1a1a,
0px  3px 3px #1a1a1a,
-3px  0px 3px #1a1a1a,
0px -3px 3px #1a1a1a;
}

.photo_page_return { /* pc-戻るボタン */
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 5%;
font-size: 75%;
transition: 1s;
}


}