/* ------------------------------------ */
/* ------- COMMON --------------------- */
/* ------------------------------------ */

body
{
    font-family : "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
    margin      : 1em;
}

ul.none
{
  list-style: none;
}

/* ------------------------------------ */
/* ------- SITE ----------------------- */
/* ------------------------------------ */

div.site_title
{
    font-size   : x-large;
    color       : #78e4d9;
}

div.site_desc
{
    font-size   : small;
    color       : gray;
}

/* ------------------------------------ */
/* ------- Tab ------------------------ */
/* ------------------------------------ */

.tab_wrap
{
    width       : 100%;
    margin      : 0;
    padding-top : 2em;
}

input[type="radio"]
{
    display     : none;
}

.tab_area
{
    font-size   : 0;
    margin      : 0;
    padding     : 0;
}

.tab_area label
{
    width       : 33.33%;
    display     : inline-block;
    margin      : 0;
    padding     : 0.6em 0 0.1em 0;
    color       : #d8d8d8;
    background  : #f8f8f8;
    text-align  : center;
    font-size   : small;
    cursor      : pointer;
    border-top-left-radius  : 8px;
    border-top-right-radius : 8px;
}

.panel_area
{
    padding     : 1em 0 0 0;
    background  : #fff;
    border-top  : 6px solid #78e4d9;
}

.tab_panel
{
    width       : 100%;
    padding     : 0;
    display     : none;
}

#tab1:checked ~ .tab_area .tab1_label
{
    background  : #78e4d9;
    color       : white;
}

#tab1:checked ~ .panel_area #panel1
{
    display     : block;
}

#tab2:checked ~ .tab_area .tab2_label
{
    background  : #78e4d9;
    color       : white;
}

#tab2:checked ~ .panel_area #panel2
{
    display     : block;
}

#tab3:checked ~ .tab_area .tab3_label
{
    background  : #78e4d9;
    color       : white;
}

#tab3:checked ~ .panel_area #panel3
{
    display     : block;
}

/* ------------------------------------ */
/* ------- HairLine ------------------- */
/* ------------------------------------ */

div.harline
{
    margin      : 1em 0em 1em 0;
    height      : 1px;
/*    background  : #e0e0e0;*/
    background  : #78e4d9;
}

/* ------------------------------------ */
/* ------- APPs ----------------------- */
/* ------------------------------------ */

div.app
{
    margin      : 0 1em 0em 1em;
/*    background  : #f0f0f0;*/
}

div.app_title
{
    margin-bottom : 0.5em;
    font-size   : x-large;
    color       : #78e4d9;
/*    background  : #e0e0e0;*/
}

/* --- Icon --- */

div.app_title img
{
    width       : 1.6em;
    height      : 1.6em;
    vertical-align : middle;
}

div.app_title_ios img
{
    border          : 1px solid #78e4d9;
    border-radius   : 27%;
}

/* --- ScreenShot (macOS) --- */

div.app_image_macos
{
    position    : relative;
    overflow    : hidden;
    height      : 152px;
/*    background  : #e0e0e0;*/
}

div.app_image_macos img
{
    position    : absolute;
    left        : 50%;
    margin-left : -120px;
    border      : 1px solid lightgray;
}

/* --- ScreenShot (iOS) --- */

div.app_image_ios
{
    position    : relative;
    overflow    : hidden;
    height      : 495px;
/*    background  : #e0e0e0;*/
}

div.app_image_ios img
{
    position    : absolute;
    left        : 50%;
    margin-left : -120px;
}

/* --- Description --- */

ul.app_desc
{
    padding-left: 1em;
    list-style-image : url('../img/listimage.png');
    color       : gray;
/*    background  : #e0e0e0;*/
}

/* ------------------------------------ */
/* ------- Tail ----------------------- */
/* ------------------------------------ */

div.contact
{
    padding     : 0;
}

div.contact p
{
    padding     : 0.5em;
    margin      : 0;
}

div.twitter
{
    padding     : 0;
    position    : relative;
    overflow    : hidden;
    height      : 620px;
}

div.twitter-widget
{
    position    : absolute;
    left        : 50%;
    padding     : 2px;
    width       : 260px;
    margin-left : -130px;
    border-radius : 8px;
    border      : 1px solid lightgray;
}

div.copyright
{
    margin-top  : 1em;
    font-size   : x-small;
    color       : gray;
}