@charset "utf-8";

/* =Reset default browser CSS.
Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
:focus {outline: 0;}

ol, ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img{border: 0;}
figure{margin:0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
/* -------------------------------------------------------------- */

body{
height: 100%;
display: flex;
flex-direction: column;
color:#fff;
font-size:62.5%;
font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
line-height:1.5;
background-color:#464646;
word-break: normal;/* 単語の分割はデフォルトに依存 */
line-break: strict;/* 禁則処理を厳格に適用 */
}

/* リンク設定
------------------------------------------------------------*/
html {
height: 100%;
}
a {
text-decoration: none;
color: inherit;
}
a:hover {
opacity: 0.5;
filter: alpha(opacity=50);
-ms-filter: "alpha(opacity=50)";
}

/* フォント、画像
------------------------------------------------------------*/
.image {
width : 100%;
margin: 0 auto;
}
.image img {
width: 100%;
height: auto;
vertical-align:top;
}

/* 全体
------------------------------------------------------------*/
#wrapper {
width: 100%;
flex: 1;
display: flex;
flex-direction: column;
}
#content {
flex: 1;
padding: 0;
}
.has-header #content {
padding: 0;
}
#copyright {
width : 100%;
height:50px;
background-color: #000;
font-size: 1.3em;
display: flex;
justify-content: center;
align-items: center;
}

/* ヘッダー
------------------------------------------------------------*/
header {
width: 100%;
height: 180px;
background-color: #000;
z-index: 500;
display:flex;
flex-flow: column;
}
#header-login-info {
width: 100%;
max-width: 1200px;
height: 50px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 15px;
font-size: 1.5em;
}
#header-login-info span {
display: inline-block;
}
#header-login-info .logout-btn {
display: inline-block;
}
.logout-btn {
color: #000;
text-decoration: none;
background: #eee;
padding: 3px 8px;
border-radius: 4px;
}
#header_title {
width: 100%;
max-width: 1200px;
height: 40px;
margin: 0 auto;
position: relative;
}
#header_title h1 {
display: flex;
gap: 20px;
justify-content: center;
align-items: center;
height: 100%;
font-size: 1.8em;
}
#header_menu_waku {
width: 100%;
max-width: 1200px;
height: 90px;
margin: 0 auto;
font-size: 1.8em;
display: flex;
flex-direction: column;
}
#header_menu {
width: 100%;
height: 40px;
display: flex;
gap: 50px;
justify-content: center;
align-items: center;
position: relative;
z-index: 10;
}
#header_menu a.active {
color: #0000ff;
font-weight: bold;
}
.download_button {
width: auto;
height: 50px;
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 999;
}
.download_button img {
width: 200px;
height: auto;
}

/* 一覧表示
------------------------------------------------------------*/
.responsive-gallery {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
padding: 20px;
}
/* 各画像アイテム */
.gallery-item {
display: flex;
flex-direction: column;
text-align:center;
cursor:pointer;
}
.img-wrap {
position: relative;
width: 100%;
padding-top: 66.6667%; /* 3:2比率 */
background-color: #000;
overflow: hidden;
border-radius: 5px 5px 0 0;
}
.img-wrap img {
position: absolute;
top: 50%;
left: 50%;
height: 100%;
width: auto;
transform: translate(-50%, -50%);
object-fit: contain;
}
.img-name {
position: relative;
width: 100%;
background-color: #000;
border-radius: 0 0 5px 5px;
font-size: 1.5em;
padding: 3px 5px;
box-sizing: border-box;
word-break: break-word;
}
.img-name .download-btn {
position:absolute;
top:50%;
right:5px;
transform:translateY(-50%);
width:20px;
height:20px;
}
.img-name .download-btn img {
width: 20px;
height: 20px;
}
/* ページネーション */
.gallery-pagination {
text-align:center;
margin:20px 0;
}
.gallery-pagination button {
margin:0 3px;
padding:5px 10px;
font-size: 1.4em;
}
.gallery-pagination button.current-page {
font-weight:bold;
}
/* ギャラリー表示
------------------------------------------------------------*/
#main-image-wrap {
position: relative;
width: 100%;
max-width: 700px;
margin: 0 auto;
aspect-ratio: 4 / 3;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
z-index: 10;
  flex-shrink: 0; 
}
#main-image {
width: 100%;
height: 100%;
object-fit: contain;
}


#click-left,
#click-right {
  position: absolute;
  top: 0;
  width: 100px;
  height: 100%;
  z-index: 5;
  cursor: pointer;
}

#click-left {
  left: 0;
}

#click-right {
  right: 0;
}

/* ホバー時にうっすら分かるように（不要なら消してOK） */
#click-left:hover,
#click-right:hover {
  background: rgba(255,255,255,0.05);
}



#main-image-mode {
display: none;
width: 100%;
text-align: center;
margin: 20px 0;
position: static;
}
.main-image-inner {
position: relative;
}
#main-image-mode img:not(#main-image) {
max-width: 90%;
height: auto;
}
#main-image-mode .main-download {
display: block;
margin: 10px auto;
}
#main-thumbs {
display: none;
overflow-x: auto;
gap: 10px;
padding: 10px 10px 50px 10px;
justify-content: flex-start;
scroll-behavior: smooth;
}
#main-image-mode #main-thumbs {
display: flex;
}
#main-thumbs .thumb {
display: flex;
justify-content: center;
align-items: center;
flex: 0 0 auto;
width: 120px;
cursor: pointer;
position: relative;
aspect-ratio: 3 / 2;
overflow: hidden;
background-color: #000;
border-radius: 4px;
}
#main-thumbs .thumb img {
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
}
#main-thumbs .thumb.active img {
border-color: #00f;
}
#main-arrow-left, #main-arrow-right {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 20;
font-size: 2rem;
color: #fff;
padding: 0;
cursor: pointer;
user-select: none;
}
#main-arrow-left {
left: 10px;
}
#main-arrow-right {
right: 10px;
}
#main-info {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 15px;
margin: 10px auto 20px auto;
font-size: 1.8em;
}
#main-filename {
color: #fff;
word-break: break-all;
}
#main-download img {
width: 200px;
height: auto;
}

/* ログインページ
------------------------------------------------------------*/
#members_title {
width: 100%;
height: 50px;
padding-left: 20px;
box-sizing: border-box;
display: flex;
align-items: center;
background-color: #000;
font-size: 1.8em;
font-size: bold;
}
.members-wrapper {
width: 100%;
padding: 0 20px 20px;
box-sizing: border-box;
margin: 0 auto;
color: #fff;
}
.members-wrapper form {
max-width: 400px;
margin: 0 auto;
width: 100%;
}
.members-wrapper fieldset {
border: none;
padding: 0;
margin: 0;
color: #fff;
}
.members-wrapper fieldset legend {
display: none;
}
.members-wrapper input[type="text"],
.members-wrapper input[type="password"] {
width: 100%;
box-sizing: border-box;
}
.members-wrapper .button_div {
width: 100%;
display: flex;
align-items: center;
}
/* labelを変に広がらせない */
.members-wrapper .button_div label {
display: inline-flex;
align-items: center;
white-space: nowrap;
margin-right: auto;
cursor: pointer;
}
.members-wrapper .buttons {
margin-left: auto;
background: #999;
color: #000;
padding: 10px 20px;
border: 1px solid #fff;
font-size: 1.4em;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
}
.members-wrapper .buttons:hover {
background: #fff;
}
/* チェックボックス全体 */
.members-wrapper .button_div input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 18px;
height: 18px;
border: 2px solid #fff;
border-radius: 4px;
background: #fff;
cursor: pointer;
position: relative;
margin-right: 8px;
transition: all 0.2s ease;
}
.members-wrapper .button_div input[type="checkbox"]:hover {
border-color: #ccc;
}
.members-wrapper .button_div input[type="checkbox"]:checked::after {
content: "";
position: absolute;
left: 4px;
top: 0px;
width: 5px;
height: 10px;
border: solid #000;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.wpmem_form,
.wpmem_login,
.wpmem_wrapper,
fieldset {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.wpmem_msg {
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: #fff;
font-size: 1.5em;
font-weight: bold;
display: block;
text-align: left !important;
margin-left: 0 !important;
margin-right: 0 !important;
}