@charset "utf-8";
/* ------------------------------------------------------------ */
/* 1. General Styling */
* {
    box-sizing: border-box;
}
html, body {
    height: 100%;
}
img {
    /* 'img' is the inline-element, so its bottom-line is set on text-base-line in default. This property set 'img' bottom-line to box-bottom. */
    vertical-align: bottom;
}
.clearfix::after {
    content: "";
    clear: both;
    display: block;
}
body {
    color: #4D4D4D;
    font-size: 14px;
    /* It must be surrounded by double quarts if font-family has spaceing */
    font-family: メイリオ, Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
    /* Generary line-height is coded by mere number, it means ratio of root font-size */
    line-height: 1.6;
}
a {
    color: #007de1;
    transition: 0.5s;
}
a:hover {
    opacity: 0.7;
}
/* class-name 'col-X' means 12 / X column a width. */
.col-4 {
    width: 33.33%;
}
.col-6 {
    width: 50%;
}
.photoFrame {
    border: 1px solid #EEE;
    border-radius: 4px;
    box-shadow: 1px 1px #999;
    padding: 15px;
}
p {
    padding-bottom: 1.5em;
    margin: 0;
}

/* ------------------------------------------------------------ */
/* 2. Layout */
body {
    width: 960px;
    margin: 0 auto;
}

/* ------------------------------------------------------------ */
/* 3. Header */
header {
    padding: 15px 0 25px;
}
h1 {
    color: #999;
    font-size: 12px;
    font-weight: normal;
    margin: 0 0 15px;
}
#headerLogo {
    width: 300px;
    height: 60px;
}

/* ------------------------------------------------------------ */
/* 4. Gloval Navigation */
#gNav {
    margin-bottom: 25px;
}
#gNav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}
#gNav li {
    width: 25%;
    height: 45px;
    border-left: 1px solid #7DCEEC;
}
#gNav li:last-child {
    border-right: 1px solid #7DCEEC;
}
#gNav a {
    display: block;
    /* text-align effects only block-element. Cuz block-element-width fits parent-element-width automaticaly. */
    text-align: center;
    height: 100%;
    line-height: 2;
    text-decoration: none;
    color: #4D4D4D;
    font-size: 11px;
}
#gNav a:hover {
    background: #BDF5FE;
}
#gNav a span {
    color: #007DE1;
    font-family: arial;
    font-size: 10px;
}
#gNav .currentMenuItem a,
#gNav .currentMenuItem a span {
    color: #FFF;
    background: #2AA8E5;
}

/* ------------------------------------------------------------ */
/* 5. Contents */
#contents {
    margin: 0 0 60px;
}
#contents {
    width: 100%;
    margin: 0;
}
#contents .inner {
    margin: 0 0 25px;
}
h2 {
    font-size: 18px;
    font-weight: normal;
    padding: 0.5em 1em;
    color: #FFF;
    background: #2AA8E5;
}
h3 {
    margin: 0 0 25px;
    border: 1px solid #EEE;
    border-radius: 4px;
    box-shadow: 1px 1px #999;
    padding: 0.2em 1em;
}


/* ------------------------------------------------------------ */
/* 6. Indivisual Styling */

/* Home, Business */
#mainVisual {
    width: 100%;
}
#news {
    list-style: none;
    padding: 0;
}
#news li {
    padding: 0.2em;
    border-bottom: 1px dotted #AAA;
}
#ourBusinessHome,
#ourBusiness {
    display: flex;
    /* this property makes new line if this child-elements can't fit flex-box. */
    flex-wrap: wrap;
}
.bizBox {
    padding: 0 25px 40px;
}
.bizBox h3 {
    text-align: center;
}
.bizBox img {
    width: 100%;
    margin-bottom: 25px;
}

/* About */
#contents #companyProf {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    border-collapse: collapse;
}
#companyProf th,
#companyProf td {
    padding: 1em;
    border: 1px solid #2AA8E5;
}
#companyProf th {
    /* this property suppresses line breaks */
    white-space: nowrap;
    background: #2AA8E5;
    color: #FFF;
    font-weight: normal;
    border-bottom: 1px solid #FFF;
}
#companyProf tr:last-child th{
    border-bottom: 1px solid #2AA8E5;
}
#companyProf a {
    color: #2AA8E5;
}
#companyProf a:hover {
    background: #2AA8E5;
    color: #FFF;
    opacity: 1;
}
/* Policy */
#ourPolicy ol {
    margin: 0 0 1.5em;
    padding: 0;
    list-style: decimal inside;
}
#ourPolicy li {
    margin: 0;
}
/* Contact */
/* mostly 'iframe' has style-attribute in HTML-tag, but it should be styled by CSS. it's the reasoon why this selector is coded. */
#mailForm iframe {
    width: 100%;
    height: 1150px;
}


/* ------------------------------------------------------------ */
/* 7. Sideber */


/* ------------------------------------------------------------ */
/* 8. Footer */
footer {
    color: #FFF;
    background: #2AA8E5;
    padding: 25px;
    display: flex;
}
#footerLeft {
    width: 300px;
}
#footerLogo img {
    width: 230px;
    height: 40px;
    margin: 0 0 15px;
}
#companyAddress {
    font-size: 12px;
}
#companyAddress a {
    color: #FFF;
    text-decoration: none;
}
#companyAddress a:hover {
    color: #2AA8E5;
    background: #FFF;
    opacity: 1;
}
#footerRight {
    width: 610px;
}
#fNav {
    margin-bottom: 30px;
}
#fNav ul {
    float: right;
    list-style: none;
}
#fNav li {
    float: left;
    border-right: 1px solid #FFF;
    padding: 0 15px;
    width: auto;
    margin: 0;
}
#fNav li:last-child {
    border-right: none;
    padding-right: 0;
}
#fNav a {
    color: #FFF;
    text-decoration: none;
}
#fNav a:hover {
    color: #2AA8E5;
    background: #FFF;
    opacity: 1;
}
#copyright {
    display: block;
    text-align: right;
}


/* ------------------------------------------------------------ */
/* 9.Responsive Styling */
@media screen and (max-width: 960px) {
    /* General */
    h1 {
        display: none;
    }
    .col-4, .col-6 {
        width: 100%;
    }
    /* Layout */
    body {
        width: 100%;
    }
    /* Header */
    #headerLogo {
        margin: auto;
    }
    /* Navigation */
    
    /* Main */
    #news {
        padding: 0 18px;
    }
    #contents > p,
    #ourPolicy > ol {
        padding: 0 18px;
    }
    #ourPolicy > p {
        padding: 0 18px 1.5em
    }
    #companyProf {
        text-align: center;
    }
    #companyProf th,
    #companyProf td {
        display: block;
        border: none;
        border: 1px solid #2AA8E5;
    }
    /* Footer */
    footer {
        display: block;
        width: 100%;
        text-align: center;
    }
    #footerLeft, #footerRight{
        width: 100%;
    }
    #fNav ul, #fNav li {
        float: none;
        padding: 0;
    }
    #fNav li, #fNav li:last-child {
        padding: 1em;
        text-align: left;
        border: none;
        background: #FFF;
        border-bottom: 1px solid #2AA8E5;
    }
    #fNav a {
        color: #2AA8E5;
        display: block;
        width: 100%;
        position: relative;
    }
    #fNav a::after {
        content: ">";
        color: #FFF;
        background: #2AA8E5;
        display: inline-block;
        width: 2em;
        height: 2em;
        text-align: center;
        line-height: 2em;
        border-radius: 50%;
        position: absolute;
        right: 0;
    }
    #copyright {
        text-align: center;
    }
}

/* ------------------------------------------------------------ */
/* (DD/MM/YYYY) Extra Styling */