/* all tags

  * document metadata 
    html, head, title, base, link, style, meta

  * document structure 
    article, aside, body, div, details, footer, header, main, nav, 
    noscript, script, section, summary, template
    
  * document semantics 
    address, blockquote, canvas, figure, figcaption, 
    hr, h1, h2, h3, h4, h5, h6, p, pre, ol, ul, li, dl, dt, dd
  
  * document text semantics 
    a, abbr, b, bdi, bdo, br, cite, code, data, del, dfn, em, i, ins, mark,
    kbd, q, ruby, rb, rt, rtc, rp, s, samp, smal, span, strong, sub, sup, 
    time, u, var, wbr
    
  *  embeded elements 
    area, audio, embed, iframe, img, map, object, param, picture, source, 
    track, video

  * document table 
    table, caption, colgroup, col, tbody, thead, tfoot, tr, td, th

  * interaction 
    form, fieldset, legend, label, input, select, option, optgroup, textarea,
    button, datalist, keygen, output, progress, meter, menu, menuitem
 */ 

/* my style common section */
/* structure */
html {
    /* for IE 10 past */
    display: -webkit-box; /* */
    display: flex;
    -webkit-box-orient:  vertical;  /* */
    -webkit-box-direction: normal;  /* */
    -ms-flex-direction:    column;  /* */
    flex-direction: column;
}

body {
    height: 100vh;
    min-height: 100vh; /* for responsive, maybe */
    overflow: hidden;					      
    display: -webkit-box; /* */
    display: flex;
    -webkit-box-orient:  vertical;  /* */
    -webkit-box-direction: normal;  /* */
    -ms-flex-direction:    column;  /* */
    flex-direction:        column;
    justify-content: space-between;
}

body > header, /* tool navigation */
body > footer{
    width: 100vw;
    -ms-flex-negative: 1; /* */
    flex-shrink:       0; /* fixed; not shrink; */
}

body > main{
    flex-grow: 1;   /* variable; */
    overflow: hidden;
    display: -webkit-box; /* */
    display: flex;
}
body > main > * {
    overflow-y: scroll;    
}

body > nav {      /* global navigation */
    width: 100vw;
    display: none;
}
main > article{
    -webkit-box-flex:  1; /* */
    -ms-flex-positive: 1; /* */
     flex-grow:        1;
}

main.three_pain{
    display: flex;
    -webkit-box-orient:  horizontal; /* */
    -webkit-box-direction:  reverse; /* */
    -ms-flex-direction: row-reverse; /* */
    flex-direction:     row-reverse; /* */
    -webkit-box-pack:      justify;  /* */
    -ms-flex-pack:         justify;  /* */
    justify-content: space-between;  /* */
}

main.three_pain > nav:first-child{
    position: static;
    display: block;
    -webkit-box-ordinal-group: 2; /* */
    -ms-flex-order:            1; /* */
    order:                     1; /* */
}
main.three_pain > nav{
    padding-right: 10px;
    background-color: white;
    border: 1px solid black;
    display: none;
}

/* structure common style */
body {
    background: #CCCCCC;
    line-height: 140%;
    margin: 0px 0px 0px 0px;
}
body > footer{
    background-color: #CCCCCC;
    border: 1px inset black;
}

body > input {
  display : none;
}

body > header > h1 {
    font-size: 150%;
    margin: 4px;
    float: left;
    display: inline;
}


body > nav > ul > li > a {
    text-decoration: none;
}
nav > ul ul{
    border: 1px solid black;
    display: none;
    position: absolute;
}
body > nav > ul ul ul{
    border: 0px solid black;
    display: none;
    position: relative;
}

figure.right {
    float: right;
    width: 40%;
}
figure.right img {
    width: 100%;
}
figcaption {
    text-align: center
}

header > ul{
    margin: 0px;
    padding: 0px;
}
body > nav > ul {
    border: 1px solid #999999;
    border-style: outset;
    margin: 0px;
    padding: 0px;
    text-align: left;
    background-color : #CCCCCC;
}

nav.breadcrumbs ul,
nav.breadcrumbs dl{
    border-style: none;
    text-align: left;
    font-size: 16pt;
}
nav.breadcrumbs li:before{
    content: "> ";
}

header li,    /* ツールメニュー     */
body > nav li, /* グローバルメニュー */
body > footer li /* フッター */
{  
    list-style-type: none;
    display: inline-block;
    text-align:     center;
    vertical-align: middle;
    color: #333399;
    margin-left: 1em;
    padding: 4px;
}

main > nav:first-child { /* アウトラインメニュー */
    position: absolute;
    left: -300px;
    margin:  0px;
    padding: 0px;
    background-color: white;
    transition: all 0.5s ease;
    border: 1px solid black;
    z-index: 1000;    
}

main > nav li {
    height:100%;
    display: block;
}

canvas {
  background-color : black;
}

article {
    border: 1px solid black;    
    background-color: white;
    display:none;
}

section {
    text-align: left;
    margin: 0px 16px;
    background-color: black;
    display : none;
}


@keyframes slide-up {
    0% {
        opacity: 0;
        transform: translate(0, 15px);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}

ul{
    margin: 0px;
}
/* text semantics */
/*******************************
strong { color: red; }

p { text-indent: 1em; }

h3 {
    clear: both;
    text-indent: 1em;
    border-left-style: double;
    border-bottom: 1px solid;
}

h4 {
    clear: both;
    margin-left: 1em;
    text-indent: 1em;
    border-left-style: double;
    border-bottom: 1px dotted;
}

img {border: 1px solid;}
********************************/
img {border: 1px solid;}

/* table */
/*******************************
table{
    border: outset 1px black;
}
table.zebra tr:nth-child(even){
    background-color: #eeeeee;
}
td { text-align: right;}

dl { margin-left: 1em;}
dt { font-weight: bold;}
dd { text-align: left;}
td > dl > dt {text-align: left; }

dl.oneline {
    margin: 0;
}
dl.oneline dt{
    float: left;
}
dl.oneline dd{
    float: left;
    margin-left: 4px;
}
th{white-space: nowrap;}
********************************/

/* interatction */
/********************************
nav > ul > li:hover {
    background-color: #9999FF;
}
nav > ul label:hover {
    cursor: pointer; 
}
select, input {
  font-size: 100%;
  font-family: monospace;
}
*********************************/

input:required {
    /* background-color: lightcyan; */
}
/*********************************
dialog {
    padding: 0;
    border: 0;
    border-radius: 0.6rem;
    box-shadow: 0 0 1em black;
    display: none;
}
**********************************/

/* native backdrop */
/*********************************
dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
}
**********************************/
/**********************************
dialog > *{
    margin: 0;
    padding: 1em;
}


dialog header {
    margin: 0;
    padding: 0.6em;
    height: 2em;
    background-color: lightcyan;
    border-top-left-radius: 0.6rem;
    border-top-right-radius: 0.6rem;
    border-bottom: 1px solid skyblue;
}
dialog h3 {
    margin: 0;
    padding: 0.3em 0.6em;
    float: left;
    border: unset;
}

dialog footer {
    text-align: right;
}

#cancel_pointList{
    float: right;
    padding: 0.2em;
    line-height: 0.6;
    background-color: transparent;
    border: 0;
    font-size: 2em;
}
dialog dl{
    margin: 0px;
    padding: 0px;
}

dialog dt:after{
    content: ":"
}

dialog dt{
    margin-top: 0.5em;
    float: left;
    clear: both;
}
dialog dd{
    margin-top : 0.5em;
    margin-left: 3em;
}
#point_oldx, #point_oldy, #point_oldz, #point_oldnote, #point_msg{
    border: 0;
}
#point_oldnote:empty{
    display: none;
}
#point_msg{
    color: red;
}

***********************************************/

/* site specified below */

/* loader */
.loader {
    width:  1em; /* ローディングアイコンのサイズになる */
    height: 1em;
    border-top: 3px solid rgba(0, 0, 0, 0.2);
    border-right: 3px solid rgba(0, 0, 0, 0.2);
    border-bottom: 3px solid rgba(0, 0, 0, 0.2);
    border-left: 3px solid black;
    border-radius: 50%;    
    transform: translateZ(0);
    animation: spin 1.5s linear infinite;  /* アニメーションの指定 */
    display: inline-block;
}

@keyframes spin { /* アニメーションの設定 */
    0% {
	transform: rotate(0deg); /* 0度回す */
    }
    50% {
	transform: rotate(180deg);  /* 180度回す */
    }
    100% {
	transform: rotate(360deg);  /* 360度回す */
    }
}


/* CSS3 icons (http://cssdeck.com/labs/css3-monochrome-icon-set)*/
.icon {
    height: 32px;
    width: 32px;
    position: relative;
    margin: 15px;
    overflow: hidden;
    display: inline-block;
}

/* Play */
.play {
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent transparent transparent #333;
    border-width: 8px 8px 8px 12px;
    margin: 8px 0 0 11px;
}

/* Pause */
.pause {
    width: 2px;
    height: 16px;
    border: 4px solid #333;
    border-top: none;
    border-bottom: none;
    margin: 8px 10px 0 11px;
}

/* CSS3 icons (https://cssicon.space) */

.pin.icon {
    color: #000;
    margin: 0px;
    margin-left: 4px;
    margin-top: 2px;
    width: 12px;
    height: 12px;
    border: solid 1px currentColor;
    border-radius: 9px 9px 9px 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.pin.icon:before {
    content: '';
    position: absolute;
    left: 3px;
    top: 3px;
    width: 4px;
    height: 4px;
    border: solid 1px currentColor;
    border-radius: 3px;
}

.pin-solid.icon {
    color: #000;
    margin: 0px;
    margin-left: 4px;
    margin-top: 2px;
    width: 12px;
    height: 12px;
    border: solid 1px currentColor;
    border-radius: 7px 7px 7px 0;
    background-color: currentColor;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.pin-solid.icon:before {
    content: '';
    position: absolute;
    left: 3px;
    top: 3px;
    width: 4px;
    height: 4px;
    color: white;
    border: solid 1px currentColor;
    border-radius: 3px;
    background-color: currentColor;
}

.feed {
    width: 30vw;
    flex-grow:unset;
    z-index:10;
}

.feed section{
    display: block;
    background-color: white;
    border-bottom: 1px dashed gray;
}

.feed section h1, .feed section ul {
    display: inline;
}
.feed section ul li{
    list-style-type: none;
    display: inline-block;
    vertical-align: middle;
    color: gray;
    font-size: x-small;
    padding-left: 4px;
}
.feed section ul li:first-child{
    float: right;
}

div.gm-style canvas{
    background-color: unset;
}

/* responsive design 
 - 1280px〜：PC
 - 960px〜1279px：small PC
 - 600px〜959px：tablet
 - 480px〜599px：smart phone yoko
 - 〜479px：smart phone tate
====================*/


/* 960px〜1279px：small PC ------------------------------ */
@media screen and (min-width:960px) and (max-width:1279px) {
}

/* 600px〜959px：tablet ------------------------------ */
@media screen and (min-width:600px) and (max-width:959px) {
}

/* 480px〜599px：smart phone yoko ------------------------------ */
@media screen and (min-width:480px) and (max-width:599px) {
    main > nav:first-child{
	    display: none!important;
    }
    ul{
	    padding: 0px;
    }
    footer {
	    line-height: 1vh;
	    font-size: calc(30% + 0.5vw);
    }
    header > nav > ul > li > input {
	    display: none;
    }
    body > header  ul > li:nth-child(2) {
        /* position: absolute; */
        position: fixed;
        left: 8px;
        bottom: 64px;
        z-index: 10;
        border-radius: 50%;
        background-color: white;
        filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.6));
    }
    body > header  ul > li:nth-child(4) {
        /* position: absolute; */
        position: fixed;
        left: 8px;
        bottom: 30px;
        z-index: 10;
        border-radius: 50%;
        background-color: white;
        filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.6));
    }    
}

/* 〜479px：smart phone tate ------------------------------ */
@media screen and (max-width:479px) {
    main.three_pain > nav:first-child{
	    display:none;
    }
    ul{
	    padding: 0px;
    }
    footer {
	    line-height: 1vh;
	    font-size: calc(30% + 0.5vw);
    }
    header > nav > ul > li > input {
	    display: none;
    }
    body > header  ul > li:nth-child(2) {
        /* position: absolute; */
        position: fixed;
        width: 40px;
        height:40px;
        left: 8px;
        bottom: 56px;
        z-index: 1000;
        border-radius: 50%;
        background-color: white;
        filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.6));
    }
    body > header ul > li:nth-child(4){
        /* position: absolute; */
        position: fixed;
        width: 40px;
        height:40px;
        left:    8px;
        bottom:  8px;
        z-index: 1000;
        border-radius: 50%;
        background-color: white;
        filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.6));
    }    
}
.footermenu {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  position: fixed;
  bottom: 0;
  background-color: #acf;
  width: 100%;
  font-size: 1rem;
}
.footermenu a {
  margin-left: 0.5em;
  margin-right: 0.5em;
}
body {
    box-sizing: border-box;
  padding-bottom: 40px;
}

/***************************************
dialog#edit_login {
    display: block;
    top: 0;
    bottom: 0;
    width: auto;
    height: auto;
    z-index: 1000;
    pointer-events: none;
}
dialog#edit_login header {
    background: white;
    height: auto;
    border-style: none;
}
dialog#edit_login header img {
    border-style: none;
}
form#update_login {
    max-width: 300px;
    margin: 0 auto;
}
form#update_login dl dd {
    margin: 0.5em auto 0;
}
form#update_login dl dd input {
    display: block;
    box-sizing: border-box;
    width:100%;
    pointer-events: initial;
}
form#update_login footer input {
    width:100%;
    height:100%;
    margin: 30px auto;
    pointer-events: initial;
}
form#update_login ::placeholder {
     text-align: center;
}
*****************************************/