@charset "UTF-8";
/* CSS Document */

body {
    background-image: url(../img/bgmb.png);
}

/* -----------------------------header */
header {
    width: 100%;
    padding: 10px 0;
}
header h1, header h1 a {
    width: 100%;
    margin: 40px auto 20px;
}
header h1 a {
    display: block;
    background-image: url("../img/logo.png");
    background-size: contain;
	background-position: center;
}
header h1 a span {
    display: none;
}
header ul {
	margin: 0px 0 0;
    list-style: none;
}
header ul li {
    display: inline-block;
}
header ul li a {
    color: #4f5542;
    text-decoration: none;
}
ul#snsicon {
	position: fixed;
    right: 5px;
	top: 5px;
	z-index: 1000;
}
ul#snsicon a {
	background-color: #fff;
}
ul#snsicon li#instagram a {
    color: #fff;
    background: #465229;
}
ul#snsicon i {
    font-size: 110%;
    padding: 2px;
}
ul#menu {
    text-align: center;
}
ul#menu li {
    margin-left: 0em;
	margin: 0 2em 10px;
    letter-spacing: .1em;
}

/* -----------------------------contents */
div#mainimg {
    width: 100%;
    height: 400px;
}
section {
    width: 100%;
    margin: 100px auto;
}
section h1 {
}

section#about div#aboutcon {
    min-height: inherit;
    background: none;
}
section#about div#aboutcon img {
	width: 97%;
	margin: 0 auto;
	border-radius: 10px;
}
section#about h2 {
	text-align: center;
    margin: 20px 0;
}
section#about p {
    width: calc(100% - 40px);
}

section#works ul {
	text-align: center;
}
section#works ul li {
    width: 32.5%;
	margin: 0 1px;
}
section#works img {
    width: 100%;
    height: inherit;
    margin: 2px 0;
}
section#contact iframe {
    display: block;
    width: 100%;
    height: 1000px;
    margin: 0 auto;
}

/* modalwindow start */
.modalset {
    overflow: hidden;
}
.workmodal {
    display: none;
    width: 100%;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
}
.workmodal-wrap {
    width: calc(100% - 20px);
    height: 100%;
	margin: 10px 0; 
    text-align: center;
    padding: 10px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    white-space: nowrap;
}
.workmodal-box .inner {
    padding: 10px 10px 20px;
}
/* modalwindow end */

div.inner img {
    width: 100%;
}
div.workmodal-close {
    text-align: right;
    font-size: 130%;
    margin-bottom: 10px;
}
.workmodal-box .inner p {
    white-space: normal;
}
div.inner p.appl {
	text-align: center;
    border-radius: 120px;
}

/* -----------------------------footer */
footer {
    background: #293249;
    color: #fff;
    text-align: center;
    padding: 20px 0 60px;
}

/* -----------------------------etc */
.pcb {display: none;}
.pciln {display: none;}
.mbb {display: block;}
.mbiln {display: inline;}

.pagetop {
    position: fixed;
    bottom: 10px;
    right: 10px;
    display: none;
}
.pagetop a {
    font-size: 250%;
    color: #eee;
    opacity: .8;
}

.topfadeIn {
    animation-name: topfadeIn;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
@keyframes topfadeIn {
    0%{
        opacity: 0;
        transform: translate( 0px,-10px);
    }
    100%{
        opacity: 1;
        transform: translate( 0,0);
    }
}