/* ============================================== */ /* デザイン調整用 */ /* ============================================== */ 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%; } }