@charset "utf-8";

/* reset */

*{margin:0;padding:0;box-sizing: border-box;}

h1,img,table,tr,th,td,ul,li,p{margin:0;	padding:0;}

li{list-style:none;}

img{border:none;max-width: 100%;height: auto;}

table{border-collapse:collapse;}



/* link */
a {text-decoration: none;}
a:link {color: #a9a9a9;}
a:hover {color: #ccc; text-decoration: none;}
a:active {color: #ccc;}

/* text */
.color1 {color: #FF9900;}
.color2 {color: #00441B; font-weight:bold;}
.color3 {color: #3F1300; font-weight:bold;}
.color4 {text-indent:-9999px;}

.text01 {font-size: 18px;padding: 0px; line-height: 1.8em;}
.text02 {font-size: 16px;padding: 0px; line-height: 1.8em;}
.text03 {font-size: 14px;padding: 0px; line-height: 1.4em;}
.text04 {font-size: 13px;padding: 0px; line-height: 1.2em;}
.text05 {font-size: 12px;padding: 0px; line-height: 1.2em;}
.text06 {font-size: 11px;padding: 0px; line-height: 1.2em;}
.text07 {font-size: 10px;padding: 0px; line-height: 1.2em;}
.text08 {font-size:  8px;padding: 0px; line-height: 1.2em;}

.text000 {font-size: 24px;padding: 5px;}
.text001 {font-size: 18px;padding: 5px;}
.text002 {font-size: 16px;padding: 5px;}
.text003 {font-size: 14px;padding: 5px;}
.text004 {font-size: 13px;padding: 5px;}
.text005 {font-size: 12px;padding: 5px;}
.text006 {font-size: 11px;padding: 5px;}
.text007 {font-size: 10px;padding: 5px;}
.text008 {font-size: 8px;padding: 5px;}

/* block */
.mdiashi {font-size: 24px;padding: 20px 0px 20px 0px;color:#000000}
.copy {font-size: 14px;padding: 14px; line-height: 1.8em; color: #000; font-style:italic;}
.works01 {font-size: 13px;padding: 0px;margin: 0px;text-align:left;color:#A9A9A9;font-weight:bold;}
.works02 {font-size: 13px;padding: 10px 0px 0px 0px;margin: 0px;text-align:left;}
.contact {font-size: 13px;padding: 10px;margin: 0px;text-align:left; line-height: 1.8em;}
.office01 {width:100% ;float: left;font-size: 14px;padding: 20px 0px 10px 10px;margin: 0px;text-align:left;color:#A9A9A9;font-weight:bold;}
.index {width:100% ;font-size: 14px;padding: 20px 0px 10px 0px;margin: 0px;text-align:center;color:#333333;}
.lastup {width:100% ;font-size: 14px;padding: 20px 0px 10px 0px;margin: 0px;text-align:center;color:#333333;}
.con {width:400px ;font-size: 13px;padding: 0px;margin: 0px;text-align:left;}
.logo {font-size: 13px;padding: 0px 5px 10px 0px;text-align:right;}


/* table */
dl {margin: 0px;padding: 10px;}
dl dt {width:130px;margin: 0px;padding:0px;line-height: 180%;text-align:left; font-size: 13px;}
dl dd {padding: 0px;margin: 0px;line-height: 180%;border-bottom: 1px #A9A9A9 solid;text-align:left; font-size: 13px;}

#link dl {margin: 0px;padding: 10px;}
#link dl dt {width:250px;margin: 0px;padding:0px 0px 0px 5px;line-height: 180%;text-align:left; font-size: 13px;}
#link dl dd {padding: 0px;margin: 0px;line-height: 180%;border-bottom: 1px #A9A9A9 solid;text-align:left; font-size: 13px;}


/* body */
.body {
        background:transparent url(./img/topback.gif) repeat-y scroll 50% 0;	
        background-color:#ffffff;
        scrollbar-track-color:#333;
	scrollbar-face-color:#fff; 
	scrollbar-arrow-color:#333; 
	scrollbar-3dlight-color:#333; 
	scrollbar-darkshadow-color:#333;
	scrollbar-highlight-color:#fff;
	scrollbar-shadow-color:#fff; 
	margin:0;
	padding:0;
}

.body2 {
	background-image:url(./img/sideline.gif);
    background-repeat: repeat-y ;
    background-position: left top;
	background-color:#ffffff;
    scrollbar-track-color:#333;
	scrollbar-face-color:#fff; 
	scrollbar-arrow-color:#333;
	scrollbar-3dlight-color:#333; 
	scrollbar-darkshadow-color:#333;
	scrollbar-highlight-color:#fff;
	scrollbar-shadow-color:#fff;
	margin:0;
	padding:0;
}

.newbody {
	background-color:#ffffff;
    scrollbar-track-color:#333;
	scrollbar-face-color:#fff; 
	scrollbar-arrow-color:#333;
	scrollbar-3dlight-color:#333; 
	scrollbar-darkshadow-color:#333;
	scrollbar-highlight-color:#fff;
	scrollbar-shadow-color:#fff;
	margin:0;
	padding:0;
}
#new-sidemenu{
	width: 15%;
	height: 100vh;
	min-height: 100vh;
	padding: 1em 0 0 0;
	border-right: 1px solid #000;
	display: flex;
	flex-direction: column;
	text-align: center;
	position: fixed;
	background: #fff;
}
#new-sidemenu ul{
	width: 100%;
	text-align: center;
}
#newcontents {
	margin-left: 15%;
	width:75%;
	padding:80px 0px 0px 40px; 
		margin-bottom: 3em;
}

.links li{
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1px #A9A9A9 solid;
	text-align:left;
	margin-bottom: 0.3em;
	padding: 0 10px;
}
.links dt {margin: 0px;padding:0px;line-height: 180%; font-size: 13px;width: 20%;}
.links dd {padding: 0px;margin: 0px;line-height: 180%;font-size: 13px;width: 80%;}

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

	.newbody{
		flex-wrap: wrap;
	}
	#new-sidemenu{
		width: 100%;
		height: 7%;
		min-height: 7%;
		padding: 1em 0 0 0;
		border-right: none;
		border-bottom: 1px solid #000;
		background: #fff;
		position: static;
}
	#newcontents{
		width: 100%;
		padding: 10px;
		margin-left: 0;
		font-size: 90%;
	}
	
	.sphead{
		display: flex;
		justify-content: space-around;
		align-items: center;
		background: #fff;
	}
	
/* Toggle Button */
.menubtn {
	display: block;
	width: 30px;
	height: 40px;
    cursor: pointer;
    z-index: 101;
    position: relative;
}
.menubtn span {
    display: block;
    position: absolute;
    height: 1px;
    width: 100%;
    background: #000;
    left: 0;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
.menubtn span:nth-child(1) {
    top: 0;
}
.menubtn span:nth-child(2) {
    top: 11px;
}
.menubtn span:nth-child(3) {
    top: 22px;
}
	    /* .menubtn 切り替えアニメーション */
    .active.menubtn span:nth-child(1) {
        top: 11px;
        -webkit-transform: rotate(315deg);
        -moz-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    .active.menubtn span:nth-child(2) {
        width: 0;
        left: 50%;
    }
    .active.menubtn span:nth-child(3) {
        top: 11px;
        -webkit-transform: rotate(-315deg);
        -moz-transform: rotate(-315deg);
        transform: rotate(-315deg);
    }
    /* #global-nav スライドアニメーション */
    #nav {
        position: absolute;
        /* 開いてないときは画面外に配置 */
        top: -500px;
		padding-top: 60px !important;
        background: #fff;
        width: 100%;
        text-align: center;
        padding:  0;
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
    }
    .active#nav {
        /* #nav top + #mobile-head height */
        -moz-transform: translateY(500px);
        -webkit-transform: translateY(500px);
        transform: translateY(500px);
    }

	.links li{
		padding: 2px;
	}
	.links dt,.links dd{
		width: 100%;
	}
	
}




#box {
 width:100%;
 margin:0px;
 padding:0px;
}

#main {
 float:left;
 width:730px;
 height:100%;
 margin:0 auto 0 auto;
 padding:0px; 
 background-color:#ffffff;
 border-left:1px solid #000000;
 border-right:1px solid #000000;
}

#main-2 {
 width:730px;
 height:386px;
 margin:80px 0px 0px 0px;
 padding:0px; 
 border-top:1px solid #000000;
 border-bottom:1px solid #000000;
}

#side-menu {
 float:left;
 width:195px;
 height:100%;
 min-height:100%;
 margin:0px;
 padding:20px 0px 0px 0px; 
}

#contents {
 float:left;
 width:80%;
 margin:0px;
 padding:80px 0px 0px 40px; 
}

#contents2 {
 float:left;
 width:80%;
 margin:0px;
 padding:80px 0px 0px 40px; 
}

#link {
 float:left;
 height:auto; 
 width:80%;
 margin:0px;
 padding:80px 0px 0px 40px; 
}

#work-l {
 float:left;
 width:230px;
 margin:0px;
 padding:20px 10px 10px 10px; 
}

#work-r {
 float:left;
 margin:0px;
 padding:20px 10px 10px 10px; 
}

#logo {
 float:left;
 width:100%;
 margin:0px;
 padding:20px 0px 0px 0px;
 text-align:right;
}

#con {
 float:left;
 width:450px;
 margin:0px;
 padding:0px 10px 0px 10px; 
}


.bloglink{
	display: flex;
	width: 70%;
	justify-content: space-between;
}
.bloglink .pre{
	padding: 1.5em;
	position: relative;
	padding-left: 2.5em;
}
.bloglink .pre::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1.6em;
  height: 1.6em;
  border-bottom: 2px solid #000;
  border-left: 2px solid #000;
  transform: rotate(45deg);
  margin-top: -0.8em;
}
.bloglink .next{
	padding: 1.5em;
	position: relative;
	padding-right: 2.5em;
}
.bloglink .next::after{
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 1.6em;
  height: 1.6em;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  transform: rotate(45deg);
  margin-top: -0.8em;
}

.blogtitle{
	font-size: 170%;
}
.blogtext{
	font-size: 110%;
	line-height: 2.3em;
	margin-top: 3em;
	margin-bottom: 1em;
}
.blogimg{
	margin: 0.5em auto 1em;
}
.more{
	margin-top: 1em;
	padding: 0.5em;
	text-align: center;
	border: 1px solid #000;
	width: 9em;
}
.more a{
	display: block;
	width: 100%;
}

.blogtoplist li{
	margin-bottom: 2em;
	border-bottom: dotted 2px #000;
	padding: 1em;
}