@charset "UTF-8";
/*
Theme Name: ks
Theme URI:
Author:
Author URI:
Description:
License:
License URI:
Tags:
*/

/* CSS Document */
/*=================================================
 *  リセット
 * ================================================= */
html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, #productsp, header, hgroup, section, article, aside, hgroup, footer, figure, figcaption, nav {
	font-size: 100%;
	padding-bottom: 0;
	padding-right: 0;
	padding-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	margin-top: 0;
	padding-left: 0;
}

article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
	display: block;
}

img {
	border: 0;
	vertical-align: bottom;
}

ul, ol {
	list-style: none;
}

table {
	border-spacing: 0;
	empty-cells: show;
}
.sp {
	display: none;
}
/*=================================================
 * ロールオーバー
 * ================================================= */
a {
	-webkit-transition: 0.3s ease-in-out;
	   -moz-transition: 0.3s ease-in-out;
		 -o-transition: 0.3s ease-in-out;
			transition: 0.3s ease-in-out;
			color:#333;
	text-decoration: none;
}

a:hover {
	opacity: 0.6;
	filter: alpha(opacity=60);
}
/*=================================================
 * サイト全体
 * ================================================= */
body {
	font-family: 'Roboto' , 'Zen Kaku Gothic New' , sans-serif;
	font-size:1.3vw;
	color: #333;
	line-height:24px;
}

* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
.mainWrap {
	width: 1280px;
	margin:0 auto;
	position: relative;
}
.flex {
	display: flex;
}
.bdr {
	border: solid 0.1vw #333;
}
h4 {
	font-size: 1.5vw;
}
/*=================================================
 * header
 * ================================================= */
header .url {
	text-align: right;
    width: 100%;
    right: 3vw;
    position: absolute;
    top: 1vw;
	font-size: 1.2vw;
}
/*=================================================
 * menu
 * ================================================= */
#menu {
	margin-left: 4vw;
	position: fixed;
	margin-top: 2.5vw;
}
#menu p {
	font-size: 1.8vw;
	line-height: 2;
}
.block-menu {
	width: 20%;
}
#work .p1,
#practice .p2,
#picked .p3,
#note .p4,
#mail .p5,
#about .p6,
#picked #menu .l1 p ,
#river #menu .l2 p,
#coding .p7 {
	color: #c7c7c7;
}
/*=================================================
 * footer
 * ================================================= */
footer .bottom {
	 font-size: 1vw;
    text-align: right;
    margin-top: 5vw;
    margin-right: 2vw;
}
/*=================================================
 * TOP
 * ================================================= */
#top {
	height: 94vh;
}
#top .wrap {
	width: 80%;
	margin-top: 6vw;
}
#top .wrap .box {
	width: 46vw;
   margin-left: 10vw;
}
/*=================================================
 * work
 * ================================================= */
#work .wrap {
	width: 80%;
    margin-top: 5vw;
}
#work .wrap .thumb {
	width: 65vw;
}
#work .wrap .thumb img {
	width: 100%;
    height: auto;
}
#work .menu-w {
	margin-bottom: 10vw;
}
#work .menu-w a {
	margin-right: 1.5vw;
	font-size: 2vw;
}
#work .block .title {
	margin-bottom: 1vw;
}
#work .block a {
	margin-bottom: 15vw;
    display: block;
}
#work .wrap-s {
	width: 50vw;
	margin: 5vw auto;
}
#work .wrap-s img {
	width: 100%;
    height: auto;
	margin: 2vw 0;
}
#work .single_pager {
	margin-bottom: 15vw;
}
#work .entry a {
	text-decoration: revert!important;
}
/*=================================================
 * note
 * ================================================= */
#note .wrap {
	width: 80%;
	margin-top: 1vw;
}
#note .block {
	display: flex;
    flex-wrap: wrap;
	justify-content: space-between;
    padding: 5vw 3vw 5vw 0;
	font-size: 1.1vw;
}
#note .block a {
	margin-bottom: 2.5vw;
    width: 14vw;
    height: 14vw;
	display: -webkit-box;
	display: -ms-flexbox;
    display: flex;
}
#note .block .box {
	padding: 1vw;
}
#note .block .title {
	margin-bottom: 1vw;
}
.wp-pagenavi a, .wp-pagenavi span {
	padding: 1vw;
}
#note .wrap-s {
	margin-top: 5vw;
    width: 60%;
    font-size: 1.8vw;
    line-height: 1.5;
    margin-left: 5vw;
}
.single_pager {
	display: flex;
    font-size: 1.5vw;
	justify-content: space-between;
}
.entry {
	margin-bottom: 10vw;
}
.entry img {
	width: 100%;
    height: auto;
}
.sidebar select {
	padding: 1vw 5vw;
    margin: 1vw 0 10vw;
}
#note .block::after {
	display: block;
	content:"";
	width: 14vw;
}
#note .entry a {
	text-decoration: revert!important;
}
#note .wrap-s p {
	text-align:justify;
}
/*=================================================
 * picked
 * ================================================= */
.slb_data {
	display: none!important;
}
#picked .wrap {
	width: 80%;
	margin-top: 5vw;
}
#picked .block {
	justify-content: space-between;
	flex-wrap:wrap;
	margin-right: 3vw;
}
#picked .block .box {
	width: 17vw;
    font-size: 1.1vw;
    margin-bottom: 5vw;
    border-bottom: solid 0.1vw;
    padding-bottom: 2vw;
}
#picked .block .box a p {
	margin: 0.5vw 0 0;
}
#picked .block .thumb {
    width: 17vw;
}
#picked .block .thumb img {
	width: 100%;
    height: auto;
}
#picked .block::after {
	display: block;
	content:"";
	width: 14vw;
}
/*=================================================
 * river
 * ================================================= */
#river .wrap {
	width: 80%;
    margin-top: 5vw;
}
#river .block .img {
	margin-bottom:10vw;
}
/*=================================================
 * lightbox
 * ================================================= */
#imageDetails {
	display: none!important;
}
#jqlb_closelabel {
	background-image: url(img/x.svg)!important;
}
#nextLink, #prevLink {
	display: none!important;
}
/*=================================================
 * coding
 * ================================================= */
#coding .wrap {
	margin-top: 6vw;
    width: 80%;
}
#coding .box {
	margin-bottom: 15vw;
}
#coding .thumb {
	margin: 0 auto;
    width: fit-content;
}
#coding .thumb img {
	width: 50vw;
}
/*=================================================
 * about
 * ================================================= */
#about {
	height: 98vh;
}
#about .wrap {
	margin-top: 3.5vw;
}
#about .wrap .name {
	font-size: 2vw;
}
#about .wrap .txt {
	line-height: 2.5;
}
/*=================================================
 * mail
 * ================================================= */
#mail .wrap {
	margin-top: 5vw;
    width: 45%;
    margin-left: 10vw;
	font-size: 1.1vw;
}
#mail .wrap input {
	width: 100%;
    padding: 0.5vw;
	font-family: "Yu Gothic Pr6N R"!important;
	background-color: #fff!important;
    border: 0.1vw solid #888;
}
#mail .wrap .title {
    margin-bottom: 1vw;
}
#mail .wrap .field {
	margin-bottom: 3vw;
}
#mail .wrap textarea {
	width: 100%;
    height: 30vw;
	font-family: "Yu Gothic Pr6N R"!important;
	border: 0.1vw solid!important;
}
#mail .fieldwrap {
	margin-bottom: 15vw;
}
.mw_wp_form input[type="submit"] {
	margin-bottom: 2vw;
	font-family: "Yu Gothic Pr6N R"!important;
	font-size: 1.1vw;
}
.mw_wp_form_complete {
	line-height: 2;
}
/*=================================================
 * レスポンシブ
 * ================================================= */
@media screen and (max-width: 768px) {
	.sp {
		display:block!important;
	}
	.pc {
		display: none !important;
	}
	h4 {
		font-size: 3.5vw;
	}
	body {
		font-size: 3vw;
		line-height: 2;
	}
	header .url {
		font-size: 3.5vw;
	}
	footer .bottom {
		font-size: 3vw;
	}
	#top .thumb img {
		height: 60vh;
		object-fit: cover;
		object-position: left;
	}
	#top .wrap .box {
		width: 100%;
	}
	#top .wrap {
		margin-top: 27vw;
		overflow: hidden;
	}
	#menu {
		margin-top: 8vw;
	}
	#menu p {
		font-size: 4vw;
	}
	#note .wrap {
		margin-top: 10vw;
		margin-left: 10vw;
		width: 80%;
	}
	#note .block {
		padding: 5vw 5vw 5vw 0;
		font-size: 3vw;
	}
	#note .block a {
		width: 32vw;
		height: 32vw;
		margin-bottom: 4vw;
	}
	#note .wrap-s {
		margin-top: 14vw;
		font-size: 4vw;
		text-align: justify;
		width: 70%;
	}
	#note .block .box {
		padding: 2vw;
	}
	.single_pager {
		font-size: 3.5vw;
		margin-bottom: 5vw;
	}
	.sidebar select {
		padding: 2vw 23vw;
	}
	#about {
		height: 96vh;
	}
	#about .wrap {
		margin-top: 8vw;
		margin-left: 12vw;
	}
	#about .wrap .name {
		font-size: 4vw;
	}
	#about .wrap .txt {
		font-size: 3.5vw;
	}
	#mail {
		height: 96vh;
	}
	#mail .wrap {
		margin-top: 12.5vw;
		margin-left: 7vw;
		width: 65%;
		font-size: 3vw;
	}
	#mail .wrap .title {
		font-size: 3.5vw;
		margin-bottom: 0;
	}
	#mail .wrap .field {
		margin-bottom: 5vw;
	}
	.mw_wp_form input[type="submit"] {
		padding: 2.5vw!important;
		font-size:3vw!important;
	}
	#mail .wrap .field {
		font-size:3vw;
	}
	#work .wrap {
		margin-left: 5vw;
		margin-top: 13vw;
	}
	#work .wrap .thumb {
		width: 92%;
	}
	#work .menu-w {
		margin-top: 6vw;
	}
	#work .menu-w a {
		font-size: 4.5vw;
	}
	#work .wrap-s {
		margin-top: 12vw;
		margin-left: 5vw;
		width: 69vw;
	}
	#picked .wrap {
		margin-top: 13vw;
		margin-left: 9vw;
	}
	#picked .block {
		margin-right: 5vw;
	}
	#picked .block .box {
		width: 32vw;
		font-size: 3vw;
	}
	#picked .block .thumb {
		width: 32vw;
	}
	#picked.block .box a p {
		line-height: 1.5;
	}
	#river .wrap {
		margin-top: 15vw;
		margin-left: 9vw;
	}
	.l-header {
		position: fixed;
    background-color: #fff;
    right: 0;
    width: 100%;
    height: 13vw;
	}
	.l-menu {
		background-color: #fff;
    position: fixed;
    top: 13vw;
    left: 4vw;
    width: 100%;
    height: 14vw;
    padding-top: 2vw;
	}
	.lm-menu {
		margin-top: 24vw!important;
	}
	select {
		-webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      padding: 1vw;
       background-color: #fff;
       color: #666;
       border: 1px solid #707070;
	}
	.container:after {
		content: ""
		display: inline-block;
		vertical-align: middle;
      color: #333;
      line-height: 1;
      width: 1em;
      height: 1em;
      border: 0.1em solid currentColor;
      border-left: 0;
      border-bottom: 0;
      box-sizing: border-box;
      transform: translateY(-25%) rotate(135deg);
	}
	#coding .wrap {
		margin-top: 16vw;
	}
	#coding .thumb img {
		width: 54vw;
	}
}