@charset "UTF-8";

body {
    color: #777;
    line-height: 1.8;
    background: #fff;
}



/* General
------------------------------------- */

/* Block Element */

section {
    margin: 0 0 20px 0;
}

h1 {
    font-size: 18px; font-size: 1.8rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    line-height: 1.8;
    color: #666;
}

h2 {
    margin: 0px 0px 0px 0px;
    font-size: 18px; font-size: 1.8rem;
    font-weight: normal;
}

h3 {
    margin: 0px 0px 15px 0px;
}

p {
    margin: 0 0 0 0;
    font-size: 14px; font-size: 1.4rem;
}

address {
    margin: 0 0 0 0;
    font-size: 14px; font-size: 1.4rem;
    font-style: normal;
}

ul {
    margin: 0px 0px 0px 0px;
    padding: 0 0 0 0;
}

ol {
    margin: 0px 0px 0px 0px;
    padding: 0 0 0 0;
}

li {
    margin: 0px 0px 0px 0px;
    font-size: 14px; font-size: 1.4rem;
}

dl {
    margin: 0px 0px 0px 0px;
}

dt, dd {
    font-size: 14px; font-size: 1.4rem;
}



/* Inline Element */

a {
    border: none;
    text-decoration: none;
    color: #999;
}

a:hover {
    color: #333 !important;
}



/* Layout
------------------------------------- */

#wrapper {
    width: 1020px;
    margin: 0 auto;
    padding: 20px 20px 10px 20px;
}



/* Header
------------------------------------- */

#header {
    width: 100%;
    margin: 0 0 30px 0;
}



/* Title */

#header h1 {
    height: 35px;
    margin: 0;
    float: left;
}

#header h1 img {
    width: 30px;
    padding-right: 10px;
}



/* Nav Architecture */



/* test */
/* #socialNav {
    background: #FC686D;
}
#globalNav {
    background: #6EB0FF;
}
#localNav {
    background: #B4FF6D;
}
 */




#header nav {
    height: 35px;
    float: right;
}

#socialNav,
#globalNav
{
    float: right;
    margin-top: 1px; /* h1とベースラインを合わせる */
}

#socialNav {
    /* margin-right: -3px; */
}

#localNav {
    padding: 10px 0 0 0;
}

    #menu-publicity #localNav,
    #menu-profile #localNav,
    #menu-family #localNav,
    #menu-coaching #localNav
    {
        padding: 10px 0 20px 6em;
    }

    .br {
        display: block;
    }



/* nav li */

#socialNav li,
#globalNav li,
#localNav li {
    float: left;
    padding: 0 0.7em 0 0;
    height: 30px;
    line-height: 30px;
    font-size: 17px; font-size: 1.7rem;
    color: #333;
}

#socialNav li:last-of-type,
#localNav li:last-of-type
{
    padding-right: 0px;
}

#localNav li {
    line-height: 1.5;
    text-align: center;
    font-size: 13px; font-size: 1.3rem;
}



/* nav li a */

#socialNav li a,
#globalNav li a,
#localNav li a
{
    display: block;
}

#socialNav li.twitter a,
#socialNav li.facebook a,
#socialNav li.instagram a
{
    color: #bbb;
}

#socialNav li a .fa-stack {
    top: -2px;
}



/* Main
------------------------------------- */

#main {
    margin: 80px auto 30px auto;
}

    #top #main,
    #photos-publicity #main,
    #photos-family #main {
    }

    #profile #main {
    }



/* #photos */

#photos {
    width: 990px;
    margin: 0 auto;
    overflow: hidden;
}

#photos a {
    display: block;
    float: left;
    margin: 0 10px 10px 0px;
    width: 100px;
    height: 100px;
}

#main p,
#main ul,
#main ol,
#main dl,
#main dd
{
    margin: 0 0 0 2em;
    padding: 0 0 0 0;
}

#main ol {
    margin: 0 0 0 4em;
}

#main dd {
    margin: 0 0 4px 4em;
}



/* #contact */

#contact-wrapper {
    margin: 0 auto 0 auto;
    padding: 0 1em;
}

#contact-wrapper h2 {
    text-align: center;
    margin: 0 auto 3em auto;
}

#contact-wrapper .input {
    background: #f0f0f0;
    border: none;
    width: 480px;
    padding: 0.8em 1.5em;
}

#contact-wrapper form {
    width: 80%;
    margin: 0 auto 1.8em auto;
}

#contact-wrapper dl {
    display: table;
    margin: 0 auto 1.8em auto;
}

#contact-wrapper dt {
    display: table-cell;
    min-width: 5em;
    text-align: center;
    vertical-align: middle;
}

#contact-wrapper dd {
    display: table-cell;
    width: 480px;
}

#contact-wrapper textarea {
    height: 16em;
}

#contact-wrapper i {
    color: #999;
}

#contact-wrapper .kind label {
    display: block;
    margin: 0 0 0.5em 0;
    vertical-align: middle;
}

#contact-wrapper .kind input {
    margin: 0 1em 0 0;
}

#contact-wrapper #confirm,
#contact-confirm input
{
    margin: 0 auto;
    background: #999;
    font-size: 14x; font-size: 1.4rem;
    font-weight: bold;
    color: #fff;
    -webkit-appearance: button;
    border-radius: 0;
    border: none;
    display: block;
    margin: 0 auto;
    padding: 0.8em 4em;
}

#contact-confirm #contact-wrapper p {
    display: table;
    margin: 0 auto 1.8em auto;
}

#contact-confirm #contact-wrapper dt {
    text-align: left;
    min-width: 8em;
}

#contact-confirm form {
    display: table;
}

#contact-confirm input {
    display: block;
    margin: 0 auto;
    border: 3px solid #fff;
}

#contact-confirm input:hover {
    background: #fff;
    color: #999;
    border: 3px solid #999;
}

#contact-thanks p {
    margin: 0;
}

.error {
    margin: 0 auto 20px auto;
}

.error-inner {
    margin: 0 auto 0.5em auto;
    text-align: center;
    font-size: 14px; font-size: 1.4rem;
    color: red;
}



/* Footer
------------------------------------- */

#footer {
    margin: 0 auto 0 auto;
    padding: 0 0 30px 0;
    text-align: center;
}

#footer small {
    font-size: 12px; font-size: 1.2rem;
}



/* etc
------------------------------------- */

/* clearfix */

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

/* clearfix IE6/7 support */
.clearfix {
    *zoom: 1;
}



/* Media Query
------------------------------------- */

/* 980 + 40 8列 */

@media only screen and (max-width: 1020px) {

    #wrapper {
        width: 100%;
    }

    #photos {
        width: 890px;
        padding-left: 10px;
    }

}



/* 890 + 40 7列 */

@media only screen and (max-width: 930px) {

    #photos {
        width: 780px;
    }

}



/* 780 + 40 6列 | Tablet | Smartphone Menu */

@media only screen and (max-width: 820px) {

    section {
        padding: 0 10px;
    }

    #wrapper {
        padding: 0px;
    }



/* #header */

    #header {
        margin: 0;
        padding: 10px 0px 0px 0px;
    }

    #header h1,
    #header nav {
        float: none;
    }

    #header h1 {
        padding: 0 0 60px 10px;
    }



    /* nav */

    #header {
        position: absolute;
        top: 0;
        z-index: 1;
    }

    #socialNav {
        margin: 0 10px 10px 0;
    }

    #globalNav {
        display: table;
        table-layout: fixed;
        border-spacing: 0 2px;
        width: 100%;
        height: 30px;
        margin: 0 auto 0 auto;
        float: none;
        clear: both;
        border-top: 1px;
        border-right: 0px;
        border-bottom: 1px;
        border-left: 0px;
        border-color: #d6d6d6;
        border-style: solid;
    }

    #localNav {
        display: table;
        table-layout: fixed;
        width: 100%;
        height: 30px;
        margin: 0 auto 0 auto;
        padding: 0;
        clear: both;
    }

        #menu-publicity #localNav,
        #menu-profile #localNav,
        #menu-family #localNav,
        #menu-coaching #localNav
        {
            padding: 10px 0 10px 0;
        }

    .fixed {
        position: fixed;
        right: 0;
        left: 0;
        z-index: 10;
        background: rgba(255, 255, 255, .9);

        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }

        #globalNav.fixed {
            top: 0;
        }

        #localNav.fixed {
            top: 36px;
        }

/*     #globalNav,
    #localNav {

    } */

    .br {
        display: block;
    }



    /* nav li */

    #socialNav li,
    #globalNav li,
    #localNav li
    {
        text-align: center;
        vertical-align: middle;
    }

    #globalNav li,
    #localNav li {
        padding: 0 0.4em;
    }

    #globalNav li {
        display: table-cell;
        width: 33.33%;
        border-top: 0px;
        border-right: 1px;
        border-bottom: 0px;
        border-left: 0px;
        border-color: #d6d6d6;
        border-style: solid;
        float: none;
    }

        #globalNav li:last-of-type {
           border: none;
        }

    #localNav li {
        display: table-cell;
        width: 33.33%;
        float: none;
    }

        #localNav li:last-of-type {
            border: none;
        }

        #menu-publicity #localNav li,
        #menu-profile #localNav li,
        #menu-falimy #localNav li,
        #menu-coaching #localNav li
        {
            width: 25%;
        }

    #top #localNav li a,
    #photos-publicity #localNav li a,
    #photos-family #localNav li a {
        padding: 10px 0;
    }


    /* #main */

    #main {
        margin: 220px auto 30px auto;
    }

        #top #main,
        #photos-publicity #main,
        #photos-family #main {
            margin: 200px auto 30px auto;
        }

        #profile #main {
            margin: 180px auto 30px auto;
        }

        #contact #main,
        #contact-confirm #main,
        #contact-thanks #main {
            margin: 200px auto 30px auto;
        }

    #photos {
        width: 670px;
    }



/* contact */

    #contact-wrapper i {
        color: #999;
        padding: 0 0 1em 0;
    }

    #contact-wrapper form {
        width: 100%;
    }

    #contact-wrapper dl {
        display: block;
        width: 100%;
        margin: 0 auto 2.8em auto;
    }

    #contact-wrapper dt {
        display: block;
        min-width: auto;
        width: 100%;
    }

    #contact-wrapper dd {
        display: block;
        width: 100%;
        margin: 0;
    }

    #main #contact-wrapper dd {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0 2em;
    }

    #contact-wrapper .input {
        width: 100%;
        margin: 0 ;
    }

    #contact-wrapper dl.kind {
        width: 100%;
    }

    #contact-confirm #contact-wrapper dl {
        width: 80%;
    }

    #contact-thanks #contact-wrapper {
        width: 80%;
    }

}



/* 670 + 40 5列 */

@media only screen and (max-width: 710px) {

    #photos {
        width: 560px;
    }

}



/* 560 + 40 4列 */

@media only screen and (max-width: 600px) {

    #photos {
        width: 450px;
    }

}



/* 450 + 40 3列 Smartphone */

@media only screen and (max-width: 490px) {

    #header h1 {
        font-size: 17px; font-size: 1.7rem;
        line-height: 1.7;
        letter-spacing: 0.04em;
    }

    #header h1 img {
        width: 26px;
        padding-right: 10px;
    }



    /* nav */

    #socialNav li,
    #globalNav li
    {
        font-size: 16px; font-size: 1.6rem;
    }

    #localNav li {
        font-size: 11px; font-size: 1.1rem;
    }



    /* #main */

    #photos {
        width: 100%;
        padding: 0 1px;
    }

    #photos a {
        width: 33.33%;
        height: auto;
        margin: 0;
        padding: 0 1px 2px 1px;
    }

    #main dd {
        margin: 0 0 4px 2em;
    }

    #main li a {
        overflow-wrap: break-word;
    }



    /* Footer */

    #footer small {
        font-size: 11px; font-size: 1.1rem;
    }

}