@charset "utf-8";

/* ------------------------- haeder ------------------------- */

div#heading {
    width: 29.27%;
    height: 100vh;
    float: left;
    background: rgba(255,255,255,0);
    position: fixed;
}

header {
    width: 60%;
    height: 100vh;
    background: rgba(251, 251, 246, 1);
    position: relative;
}

/* ------ company name ------ */

header h1#company_name {
    height: 50%;
    font-size: 2.8rem;
    font-weight: 600;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-lr;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    background: url(../images/i_catch.png) top center no-repeat;
    background-size: 80%;
    padding-top: 40px;
    position: absolute;
    top: 5%;
    left: 45%;
    letter-spacing: 0.5rem;
}

span.company_name_little {
    font-size: 1.5rem;
}

div#company a {
    text-decoration: none;
    color: #333;
}


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


nav {
    position: absolute;
    bottom: 8%;
    left: 10%;
    width: 80%;
}

ul#navi li {
    border-bottom: 1px dotted #c0c0c0;
}

ul#navi li:first-child {
    border-top: 1px dotted #c0c0c0;
}

ul#navi li a {
    display: block;
    text-decoration: none;
    font-size: 1.6rem;
    font-weight: bold;
    color: #333;
    text-align: center;
    padding: 12px 0 12px 10px;
    letter-spacing: 0.3rem;
    position: relative;
}

ul#navi li a::after {
    position: absolute;
    content: '';
    background: linear-gradient(to right, rgba(230, 205, 227, 0.3), rgba(230, 205, 227, 0.1));
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    transform: scale(0, 1);
    transform-origin: left;
    transition: transform .3s;
}

ul#navi li a i {
    opacity: 0;
    padding-left: 15px;
}

ul#navi li a span.menu_little {
    font-size: 1.2rem;
    padding-left: 10px;
}

ul#navi li a:hover {
    font-weight: bold;
    color: rgba(208, 87, 107, 1)
}

ul#navi li a:hover::after {
    transform: scale(1, 1);
}

/* -- トグルスイッチ -- */

#nav_toggle {
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 0px;
    right: 20px;
    z-index: 100;
    background: #4b98e8;
    padding: 10px 10px 5px 10px;
    border-radius: 50%;
    display: none;
}

#nav_toggle div {
    position: relative;
}

#nav_toggle span {
    display: block;
    height: 3px;
    background: #fff;
    position: absolute;
    width: 100%;
    left: 0;
    transition: 0.5s ease-in-out;
}

#nav_toggle span:nth-child(1) {
    top: 0px;
}

#nav_toggle span:nth-child(2) {
    top: 10px;
}

#nav_toggle span:nth-child(3) {
    top: 20px;
}

/* - open - */

.open #nav_toggle span:nth-child(1) {
    top: 12px;
    transform: rotate(135deg);
}

.open #nav_toggle span:nth-child(2) {
    width: 0;
    left: 50%;
}

.open #nav_toggle span:nth-child(3) {
    top: 12px;
    transform: rotate(-135deg);
}


/* -- コピーライト -- */

address {
    position: absolute;
    left: 15%;
    bottom: 2%;
    font-size: 1.0rem;
    font-style: normal;
}




/* ------------------------- main ------------------------- */

main {
    width: 70.72%;
    height: 100vh;
    float: right;
}

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

div#mikosi {
    width: 30%;
    height: 100vh;
    background: url(../images/mikosi_top_icon.png), linear-gradient(rgba(239, 69, 74, 1), rgba(0,0,0,1));
    background-repeat: no-repeat;
    background-position: 50% 90%;
    float: left;
    margin-right: 3%;
    position: relative;
}

div#kodomo_mikosi {
    width: 32%;
    height: 100vh;
    background: url(../images/kodomo_mikosi_top_icon.png), linear-gradient(rgba(0, 134, 204, 1), rgba(0,0,0,1));
    background-repeat: no-repeat;
    background-position: 50% 90%;
    float: left;
    margin-right: 3%;
    position: relative;
}

div#kago {
    width: 32%;
    height: 100vh;
    background: url(../images/kago_top_icon.png), linear-gradient(rgba(0, 105, 91, 1), rgba(0,0,0,1));
    background-repeat: no-repeat;
    background-position: 50% 90%;
    float: left;
    position: relative;
}

main p.catch_copy {
    height: 70%;
    font-size: 3.5rem;
    font-weight: 600;
    color: #fff;
    background: url(../images/catch_icon.png) top center no-repeat;
    background-size: 80%;
    text-shadow: 2px 2px 1px rgba(0,0,0,0.5); 
    padding-top: 50px;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-lr;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    position: absolute;
    top: 5%;
    left: 45%;
    letter-spacing: 0.5rem;
}

/* ------------------------- sidepage main ------------------------- */

div#content_area {
    width: 100%;
    background: rgba(251, 251, 246, 1); 
}