/* stylesheet for K's Gallery on HTML5 */

body {
 font-family : Meiryo, Verdana, Arial;
 font-size : 0.84em;
 -webkit-text-size-adjust: 100%;
}

@media screen and (max-width:640px){ .margin40 { margin-left :  5px ; margin-right :  5px } }/* body に margin:0; を入れているため */
@media screen and (min-width:641px){ .margin40 { margin-left : 40px ; margin-right : 40px } }

a:link    {color:#1111dd;}
a:visited {color:#551188;}
a:active  {color:#ff0000;}

h1 { font-size:1.5em; margin:0; }
h1 span.sub { display:block; font-size:0.67em; } 


/* modern style -------------------------------------------------- */

body { margin: 0; }

body.wheet { background-color: #ffffff; color:#555555; }
body.fcanvas { background-color: #ffffff; color: #555555; }
body.hk { background-color: #ffffff; color:#000000; }
body.misc { background-color: #ffffff; color:#555555; }
body.index { background-color: #ffffff; color:#555555; }
body.note_frame { background-color: #f0f0f0; color:#000000; }
body.steps { background-color: #e8e8e8; color: #000000; }

div.site_title { background-color: #f8f8f8; font-weight:bold; font-size:1.3em; padding-left:12px; }
div.site_title a { text-decoration:none; color:#6600ff; }

header { background-color: #f0f0f0; }

hr { border-top:1px solid #aaaaaa; border-bottom:none; border-left:none; border-right:none; }
hr.not_display_in_modern { display:none; }

footer { padding-left:5px; padding-right:5px; padding-top:1em; padding-bottom:1em; background-color: #666666; color:#ffffff; }

.padding_for_smartphone { padding-left:5px; padding-right:5px; } /* body に margin:0; を入れているため、スマートフォンの画面で左右に余白を入れる */

:root {
--title_color:#6666aa; /* Miscellaneous で使用 */
--box_color:#f4f4f4; /* note で使用 */
}

div#buttonContainer { background-color: #f0f0f0; } /* note_index で使用 */
iframe#index { border:none; } /* note_frame で使用 */
iframe#note { border:none; } /* note_frame で使用 */

/* index --------------------------------------------------------------------- */

nav.index_menu_updated a { padding:0.5em 1.0em; border-radius:4px; text-decoration: none; color: #222222; background-color: #f6f6f6; }
nav.index_menu_updated a:hover { background-color: #eeeeee; }

/* navigation ---------------------------------------------------------------- */

div.nav_container { position:relative; }  /* 子要素を position:absolute で配置する際、画面に対してではなくこの親要素に対して配置される */

/* style for navigation menu -------------------------------------------------- */

nav.kmenu {
background-color: #333333;
display: flex;
justify-content: center;
flex-wrap: wrap;
}

nav.kmenu a {
display: block; /* flexの直下の子要素ならば自動的にblock表示になるが、直下の要素は<span>である */
min-width: 100px;
padding: 5px 10px 5px 10px;
text-align: center;
text-decoration: none; 
color:#f2f2f2;
font-weight: bold;
}

nav.kmenu a:hover {
background-color: #dddddd;
color: #000000;
}

nav.kmenu a.current {
background-color: #8866cc;
color: #ffffff;
}

/* style for language switch -------------------------------------------------- */

@media screen and (max-width:480px){ nav.switch { text-align: right; } } /* kmenuの下の行にずれる */
@media screen and (min-width:481px){ nav.switch { position:absolute; top:0px; right:0px; } } /* kmenuもしくはbreadcrumbと重なる */

@media screen and (max-width:480px){ nav.switch { background-color: #666666; } } /* kmenuの下の行にずれると色が変わる */

/* position:static は、上記 switch クラスの min-width:481px position:absolute の指定を反映させないため */
@media screen and (max-width:840px){ nav.switch_index { text-align: right; position:static; } } /* kmenuの下の行にずれる */
@media screen and (min-width:841px){ nav.switch_index { position:absolute; top:0px; right:0px; } } /* kmenuもしくはbreadcrumbと重なる */

@media screen and (max-width:840px){ nav.switch_index { background-color: #666666; } }  /* kmenuの下の行にずれると色が変わる */

nav.switch a {
display: inline-block;
padding: 5px 10px 5px 10px;
text-decoration: none; 
color:#f2f2f2;
}

nav.switch a:hover {
background-color: #dddddd;
color: #000000;
}

nav.switch a:after {
content: "\0020\00bb"; /* " »" */
}

nav.radio_switch {
padding: 5px 10px 5px 10px;
color:#f2f2f2;
}

/* style for breadcrumb navigation -------------------------------------------------- */


@media screen and (max-width:840px){ nav.breadcrumb { padding-left:12px; } } /* kmenuが下の行にずれる */
@media screen and (min-width:841px){ nav.breadcrumb { position:absolute; left:12px; top:0px; } } /* kmenuと重なる。top:0px;は無くてもよい */

@media screen and (max-width:840px){ nav.breadcrumb { background-color: #666666; } } /* kmenuが下の行にずれると色が変わる */
@media screen and (min-width:841px){ nav.breadcrumb { background-color: #333333; } } /* kmenuと同じ色 */

nav.breadcrumb {
color:#f2f2f2;
padding-top:5px;
padding-bottom:5px;
}

nav.breadcrumb span:after {
padding: 4px;
content: "\0020\203a"; /* " ›" */
}

nav.breadcrumb span:last-child:after{
content: normal;
}

nav.breadcrumb a {
text-decoration:none;
color:#f2f2f2;
}

nav.breadcrumb a:hover {
text-decoration:underline;
}