/* ============================================== */
/* デザイン調整用                                 */
/* ============================================== */
body, h1 {
	padding: 0;
	margin:  0;
	    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
}
#wrapper {
	background: #fff;
	text-align: center;
}


.top_photo{
	display:flex; 
	min-height: 73%;
	align-items: center;
  justify-content: center;}

.top_left{width: 50%; height: 900px;}
.top_left img{width: 100%; height: 100%;min-height:900px; object-fit: cover;}
.top_right{width: 50%; height: 900px;}
.top_right img{width: 100%; height: 100%;min-height:900px; object-fit: cover;}
.top_one{width: 100%; height: 900px;}
.top_one img{width: 100%; height: 100%;min-height:900px; object-fit: cover;}

@media (max-width: 1200px) {	
.top_left{width: 50%; height: 850px;}
.top_left img{width: 100%; height: 100%;min-height:800px; object-fit: cover;}
.top_right{width: 50%; height: 850px;}
.top_right img{width: 100%; height: 100%;min-height:800px; object-fit: cover;}
.top_one{width: 100%; height: 850px;}
.top_one img{width: 100%; height: 100%;min-height:800px; object-fit: cover;}
}

@media (max-width: 1000px) {
.top_left{width: 50%; height: 680px;}
.top_left img{width: 100%; height: 100%;min-height:680px; object-fit: cover;}
.top_right{width: 50%; height: 680px;}
.top_right img{width: 100%; height: 100%;min-height:680px; object-fit: cover;}
.top_one{width: 100%; height: 680px;}
.top_one img{width: 100%; height: 100%;min-height:680px; object-fit: cover;}
}

@media (max-width: 767px){
.top_left{width: 50%; height: 540px;}
.top_left img{width: 100%; height: 100%;min-height:540px; object-fit: cover;}
.top_right{width: 50%; height: 540px;}
.top_right img{width: 100%; height: 100%;min-height:540px; object-fit: cover;}
.top_one{width: 100%; height: 540px;}
.top_one img{width: 100%; height: 100%;min-height:540px; object-fit: cover;}
}

@media (max-width: 440px){
.top_left{width: 100%; height: 400px;}
.top_left img{width: 100%; height: 100%;min-height:400px; object-fit: cover;}
.top_right{display:none;}
.top_right img{width: 100%; height: 100%;min-height:400px; object-fit: cover;}
.top_one{width: 100%; height: 400px;}
.top_one img{width: 100%; height: 100%;min-height:400px; object-fit: cover;}
}

@media (max-width: 320px){
.top_left{width: 100%; height: 320px;}
.top_left img{width: 100%; height: 100%;min-height:320px; object-fit: cover;}
.top_right{display:none;}
.top_right img{width: 100%; height: 100%;min-height:320px; object-fit: cover;}
.top_one{width: 100%; height: 320px;}
.top_one img{width: 100%; height: 100%;min-height:320px; object-fit: cover;}
}



/* ============================================== */
/* メニュー                                       */
/* ============================================== */
.menu {
	display:flex;
	width: 100%;
	height: 27%;
	background: #fff;
	letter-spacing: -.40em;
	position: fixed;
	bottom: 0;
	z-index:999;
}

.menu-left {
	width: 150px;
	padding: 10px 0 0 30px;
}

.menu-left a{
	padding: 0;
	text-decoration:none;
}
.menu-right{
	width: calc( 100% - 150px );
	text-align: left;
		padding: 32px 0;
}
.menu h1 {
	color: #ffffff;
	font-size: 30px;
	padding: 10px 0 10px;
	letter-spacing: normal;
}
.menu h1 span {
	font-size: 20px;
}

.menu-right a {
	display: inline-block;
	margin:   0px 5px;
	padding: 10px 0 0 26px;
		color: #7d7d7e;

	font-size:   16px;
	font-weight: normal;
	text-decoration: none;
letter-spacing:1px;	
}

@media (max-width: 1000px) {
.menu-right a {
		font-size:   14px;
    line-height: 28px;
		padding: 6px 0 0 26px;
}}



.blog-logo a, .blog-logo img {
    display: block;
}
@media (max-width: 1000px) {
.blog-logo img {
    max-height: 160px;
}}




/* ============================================== */
/* 演出用(ボタン上にカーソルを持ってきた時に、ボタンを少し透過する）*/
/* ============================================== */
.hover {
	transition: 0.6s;
}
.hover:hover {
	opacity: 0.6;
}


.credits{
	position:absolute;
right:0;
	bottom:0;
}
.credits p {
	text-align: right;
    font-size: 11px;
    letter-spacing: 0.25px;
    padding: 50px 34px 30px 0;
    margin: 0 auto;
    max-width: 1220px;
}

.credits p {
    color: #767676;
    line-height: 160%;
}


@media (max-width: 767px){
.blog-logo img {
    max-height: 114px;
		   margin-left: -8px;
}

.menu-left {
	width: 100px;
	padding: 10px 0 0 24px;
}

.menu-right{
	width: calc( 100% - 100px );
	text-align: left;
		padding: 18px 0;
}
	
	.menu-right a {
		font-size:   14px;
    line-height: 24px;
	padding: 3px 28% 0 16px;}
		
.credits p {
    font-size: 9px;
    letter-spacing: 0.25px;
    padding: 30px 20px 14px 0;
}
}

@media (max-width: 320px){
.blog-logo img {
    max-height: 90px;
		   margin-left: -8px;
}

	.menu-left {
	width: 90px;
	padding: 4px 0 0 24px;
}
	
		.menu-right a {
		font-size:   12px;
	padding: 0 28% 0 16px;
	}

.menu-right{
		padding: 12px 0;
}
}

@media (max-width: 1000px) {
.menu {
	display:flex;
	width: 100%;
	height: 30%;
}
}


@media (max-width: 767px){
.menu {
	display:flex;
	width: 100%;
	height: 32%;
}
}

@media (max-width: 440px){
.menu {
	display:flex;
	width: 100%;
	height: 35%;
}
}

@media (max-width: 320px){
.menu {
	display:flex;
	width: 100%;
	height: 37%;
}
}