@import url(http://fonts.googleapis.com/css?family=Open%20Sans:300,400,500,600,700);
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@800&display=swap');


/* ------------------------------------------------------------------------------
	 Typography
-------------------------------------------------------------------------------*/
p {
	font-size: 14px;
	line-height: 26px;
	color: #6c7279;
	margin:0px;
}

header h1{margin: 0;}

h1 {
	font-size: 65px;
	color: #2d3033;
}
h2 {
	font-size: 40px;
	color: #2d3033;
	font-family: 'Noto Serif JP', serif;
}

h3 {
	font-size: 28px;
	color: #2d3033;
	font-weight: 300;
	margin-top: 10px;
}
h4 {
	font-size: 22px;
	color: #2d3033;
	font-weight: 400;
	font-family: 'Noto Serif JP', serif;
	
}
h5 {
	font-size: 14px;
	color: #2d3033;
	text-transform: uppercase;
	font-weight: 700;
}

.btn {
	position: relative;
	display: inline-block;
	padding: 1em 2em;
	text-decoration: none;
	color: #FFF;
	background: #fd9535;/*背景色*/
	border-bottom: solid 2px #d27d00;/*少し濃い目の色に*/
	border-radius: 4px;/*角の丸み*/
	box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
	font-size: 1em;
	font-weight: bold;
	margin-top: 10px;
  }
  
  .btn:active {
	color: #FFF;
	border-bottom: solid 2px #fd9535;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
  }

  .btn:hover {
	color: #FFF;
  }

  .btn:visited {
	color: #FFF;
  }

i.fa{
	margin-left: 5px;
}


.btn-large {
	padding: 15px 40px;
}
/* ------------------------------------------------------------------------------
	 General Style
-------------------------------------------------------------------------------*/
a {
	color: #e84545;
}
a:hover, a:focus {
	text-decoration: none;
	-moz-transition: background-color, color, 0.3s;
	-o-transition: background-color, color, 0.3s;
	-webkit-transition: background-color, color, 0.3s;
	transition: background-color, color, 0.3s;
}
body {
	font-family: "Open Sans", sans-serif;
	font-weight: 400;
	color: #6c7279;
	background:#fff;
}
ul, ol {
	margin: 0;
	padding: 0;
}
ul li {
	list-style: none;
}

.section {
	padding: 10px 0;
}

.section:nth-child(1) {
	padding-top:30px;
}

.no-padding {
	padding: 0;
}
.no-gutter [class*=col-] {
	padding-right: 0;
	padding-left: 0;
}
/* ------------------------------------------------------------------------------
	 Header & navigation
-------------------------------------------------------------------------------*/
#header {
	position: fixed;
	width: 100%;
	z-index: 999;
	padding-left: 2%;
	padding-right: 2%;
	/* margin-left: 3%;
	margin-right: 3%; */
}
#header .header-content {
	margin: 0 auto;
	padding: 40px 0;
	width: 100%;
	-moz-transition: padding 0.3s;
	-o-transition: padding 0.3s;
	-webkit-transition: padding 0.3s;
	transition: padding 0.3s;
}
#header .logo {
	font-size: 22px;
	color: #0083d7;
	font-weight: 700;
	float: left;
	text-transform: uppercase;
	font-family: 'M PLUS Rounded 1c', sans-serif;
}
#header.fixed {
	background-color: #fff;
}
#header.fixed .header-content {
	border-bottom: 0;
	padding: 25px 0;
}
#header.fixed .nav-toggle {
	top: 18px;
}
.navigation.open {
	opacity: 0.9;
	visibility: visible;
	-moz-transition: opacity 0.5s;
	-o-transition: opacity 0.5s;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
}
.navigation {
	float: right;
}
.navigation li {
	display: inline-block;
}
.navigation a {
	color: #000;
	font-size: 15px;
	font-weight: 300;
	margin-left: 40px;
	letter-spacing: 2px;
	text-transform: uppercase;
}
.navigation a:hover, .navigation a.active {
	color: #bcbcbc;
}
.nav-toggle {
	display: none;
	height: 44px;
	overflow: hidden;
	position: fixed;
	right: 5%;
	text-indent: 100%;
	top: 32px;
	white-space: nowrap;
	width: 44px;
	z-index: 99999;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
.nav-toggle:before, .nav-toggle:after {
	border-radius: 50%;
	content: "";
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-transition-property: -moz-transform;
	-o-transition-property: -o-transform;
	-webkit-transition-property: -webkit-transform;
	transition-property: transform;
}
.nav-toggle:before {
	background-color: #1473f1;
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-webkit-transform: scale(1);
	transform: scale(1);
	-moz-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}
.nav-toggle:after {
	background-color: #1473f1;
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	-webkit-transform: scale(0);
	transform: scale(0);
	-moz-transition-duration: 0s;
	-o-transition-duration: 0s;
	-webkit-transition-duration: 0s;
	transition-duration: 0s;
}
.nav-toggle span {
	background-color: #fff;
	bottom: auto;
	display: inline-block;
	height: 3px;
	left: 50%;
	position: absolute;
	right: auto;
	top: 50%;
	width: 18px;
	z-index: 10;
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}
.nav-toggle span:before, .nav-toggle span:after {
	background-color: #fff;
	content: "";
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-transition: -moz-transform 0.3s;
	-o-transition: -o-transform 0.3s;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}
.nav-toggle span:before {
	-moz-transform: translateY(-6px) rotate(0deg);
	-ms-transform: translateY(-6px) rotate(0deg);
	-webkit-transform: translateY(-6px) rotate(0deg);
	transform: translateY(-6px) rotate(0deg);
}
.nav-toggle span:after {
	-moz-transform: translateY(6px) rotate(0deg);
	-ms-transform: translateY(6px) rotate(0deg);
	-webkit-transform: translateY(6px) rotate(0deg);
	transform: translateY(6px) rotate(0deg);
}
.nav-toggle.close-nav:before {
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	-webkit-transform: scale(0);
	transform: scale(0);
}
.nav-toggle.close-nav:after {
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-webkit-transform: scale(1);
	transform: scale(1);
}
.nav-toggle.close-nav span {
	background-color: rgba(255, 255, 255, 0);
}
.nav-toggle.close-nav span:before, .nav-toggle.close-nav span:after {
	background-color: #fff;
}
.nav-toggle.close-nav span:before {
	-moz-transform: translateY(0) rotate(45deg);
	-ms-transform: translateY(0) rotate(45deg);
	-webkit-transform: translateY(0) rotate(45deg);
	transform: translateY(0) rotate(45deg);
}
.nav-toggle.close-nav span:after {
	-moz-transform: translateY(0) rotate(-45deg);
	-ms-transform: translateY(0) rotate(-45deg);
	-webkit-transform: translateY(0) rotate(-45deg);
	transform: translateY(0) rotate(-45deg);
}

/*ナビゲーションライン*/

@media (min-width:1024px) {

.primary-nav a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}
.primary-nav a::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #003cff;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: transform .3s;
}
.primary-nav a:hover::after {
  transform: scale(1, 1);
}

}


/* ------------------------------------------------------------------------------
	 Slider
-------------------------------------------------------------------------------*/


.wrapper {
	position: relative;
	max-width: 100%;
	width: 100%;
	padding: 0 20px;
	margin: 0 auto;
}

@media (min-width:1024px) {
	.wrapper {
		padding: 0 20px!important;
	}
}

/* ------------------------------------------------------------------------------
	 Services
-------------------------------------------------------------------------------*/
.services {
	width: 80%;
	margin: auto;
	background-color: #ecf7ff;
}
.services h4 {
	font-size: 33px;
	line-height: 33px;
	letter-spacing: 2px;
	font-weight: 300;
}
.services h5 {
	font-size: 21px;
	font-weight: 300;
	margin-bottom: 10%;
	text-transform: none;
}
.services p {
	color: #6c7279;
	font-size: 14px;
	line-height: 26px;
	font-weight: 400;
	/*margin-top: 7%;*/
}
.services-content {
	margin: 50px;
}
.services-content li a {
	color: #6c7279;
	line-height: 30px;
}
.services-content li a:hover {
	color: #000;
}
/* ------------------------------------------------------------------------------
	 DTP,WEB ETC
-------------------------------------------------------------------------------*/
#web,#dtp,#etc {
	width: 80%;
	margin: auto;
}
#web .portfolio-item,#dtp .portfolio-item,#etc .portfolio-item {
	right: 0;
	margin: 0 0 2px;
	padding: 0 1px;
}
#web .portfolio-item .portfolio-link,#dtp .portfolio-item .portfolio-link,#etc .portfolio-item .portfolio-link {
	display: block;
	position: relative;
	margin: 0 auto;
}
#web .portfolio-item .portfolio-link .caption,#dtp .portfolio-item .portfolio-link .caption,#etc .portfolio-item .portfolio-link .caption {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	background: rgba(8, 115, 200, .9);
	-webkit-transition: all ease .5s;
	-moz-transition: all ease .5s;
	transition: all ease .5s;
}
#web .portfolio-item .portfolio-link .caption:hover,#dtp .portfolio-item .portfolio-link .caption:hover,#etc .portfolio-item .portfolio-link .caption:hover{
	opacity: 1;
}
#web .portfolio-item .portfolio-link .caption .caption-content,#dtp .portfolio-item .portfolio-link .caption .caption-content,#etc .portfolio-item .portfolio-link .caption .caption-content{
	position: absolute;
	top: 50%;
	width: 100%;
	height: 20px;
	margin-top: -12px;
	text-align: center;
	font-size: 20px;
	color: #fff;
}
#web .portfolio-item .portfolio-link .caption .caption-content i ,#dtp .portfolio-item .portfolio-link .caption .caption-content i,#etc .portfolio-item .portfolio-link .caption .caption-content i {
	margin-top: -12px;
}
#web .portfolio-item .portfolio-link .caption .caption-content h3, #dtp .portfolio-item .portfolio-link .caption .caption-content h3, #etc .portfolio-item .portfolio-link .caption .caption-content h3{
	margin: 0;
	color: #e9eaed;
	font-size: 17px;
	letter-spacing: 4px;
	text-transform: uppercase;
}
#web .portfolio-item .portfolio-link .caption .caption-content h4, #dtp .portfolio-item .portfolio-link .caption .caption-content h4, #etc .portfolio-item .portfolio-link .caption .caption-content h4{
	margin: 10px 0;
	color: #e9eaed;
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
}
#web * ,#dtp * ,#etc * {
	z-index: 2;
}

.col-md-4{
	padding: 10px!important;
}


@media (max-width:576px) {
.col-xs-6 .caption-content h3{display: none;}
.col-xs-6 .caption-content h4{display: none;}
}

/* ------------------------------------------------------------------------------
	 Footer
-------------------------------------------------------------------------------*/
.footer {
	width: 94%;
	margin: auto;
	text-align: left;
	padding-top: 5%;
	padding-bottom: 7%;
}
.footer h4 {
	font-size: 13px;
	color: #000;
	margin: 0 0 15px 0;
	padding: 0px;
}
.footer p {
	font-size: 11px;
	color: #6c7279;
	line-height: 60px;
}
.footer a {
	color: #000;
}
.footer a:hover {
	text-decoration: underline;
}
.footer .footer-share {
	margin-top: 0;
}
.footer .footer-share li {
	display: inline-block;
	float: none;
}
.footer .footer-share a {
	border: none;
	font-size: 30px;
	color: #000;
	letter-spacing: 15px;
}
.footer .fa-heart {
	color: #e84545;
	font-size: 11px;
	margin: 0 2px;
}
/* ------------------------------------------------------------------------------
	 Work Detial 
-------------------------------------------------------------------------------*/

.work-detail {
	width: 94%;
	margin: auto;
}
.work-detail-margin {
	margin-top: 7%;
}


.detail-image img {
	width: 100%;
}

@media (min-width: 768px) {
   .gazou { width: 40%!important;}
}

.detail-contentbox {
	background-color: #ecf7ff;
	padding: 3%;
}
.detail-content h4 {
	font-size: 21px;
	line-height: 27px;
	letter-spacing: 1px;
	font-weight: 300;
}
.detail-content > p {
	color: #6c7279;
	font-size: 16px;
	font-weight: 400;
	margin-top: 3%;
}




/* ------------------------------------------------------------------------------
	 PROFILE
-------------------------------------------------------------------------------*/

/*レスポンシブ table*/
.res-table{
	width:100%;
  margin:5px auto;
	font-size:90%;
	padding: 10px;
	/*border:#6699ff 1px solid;　  */
}

.res-table table{
background:rgba(255,255,255,0.7);
}

.res-table tr{
    border-bottom:#ecf7ff 3px solid;
}
.res-table tr:last-child{
	border:none
 }
.res-table th{
	vertical-align:top;
	width:15%;   
  padding:10px 10px;
	display:table-cell;
	text-align: left;
	font-size: 16px;
	font-family: 'Noto Serif JP', serif;
	line-height: 16px;

}

.res-table td{
	vertical-align:top;
	width:90%;   
    padding:5px 10px;
	display:table-cell;
	text-align: left;

}

.res-table td img{
width:49%;
}

.res-table td img:nth-child(2){
margin-left:1%;
}

.res-table table{width:100%;}

.res-table tr:nth-child(6)>td>p{
	font-family: 'Noto Serif JP', serif;
	font-size: 16px;
	color: #000;
	}


/*プロフィール画像*/

.self{
text-align:center;
}

.self img{
width:50%;
}


@media (max-width: 768px) {
   /* 横幅が768px以下の場合に適用するスタイル */
   
	/*レスポンシブ table*/
	.res-table{header-slider
		width:95%;
		margin:0 auto;
		border:none;
		/*background:rgba(255,255,255,0.7);*/
	}
	.res-table th{
	width:100%;
		padding:5px;
		display:block;
		background-color:#ccddff;
		background: -moz-linear-gradient(right, rgba(204, 221, 255, 0.5), transparent);
		background: -webkit-linear-gradient(right, rgba(204, 221, 255, 0.5), transparent);
		background: linear-gradient(to right, rgba(204, 221, 255, 1), #fff 75%);
	}

	.res-table tr{border:none;}

	.res-table td{
	width:100%;
		padding:5px;
		display:block;
		text-align:left;
	}

	.res-table td img{
	width:100%;
	}

	.res-table td img:nth-child(2){
	margin-left:0%;
	}

	/*画像*/
	.self img{
	width:100%;
	}

	section{
	display:flex;
	}
	.res-table tr:nth-child(6)>td>p{
		font-size: 14px;
		padding-left: 28px;
		text-indent: -28px;
		}

}



/* ------------------------------------------------------------------------------
	 TOPへボタン
-------------------------------------------------------------------------------*/

#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #4fbcff;
  opacity: 0.6;
	line-height:50px;
	text-align:center;
	z-index:100;
	border-radius:50%;
	margin:20px;
	box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
}

#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  color: #ffffff;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 0px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

#page_top:hover{
  transform: scale(1.3);
  transition-duration: 0.3s;
}


/* ------------------------------------------------------------------------------
	 その他調整
-------------------------------------------------------------------------------*/
.mt5{margin-top: 5px;}
.mt10{margin-top: 10px;}
.mt20{margin-top: 20px;}
.mt30{margin-top: 30px;}
.pt10{padding-top: 10px;}
.pt20{padding-top: 20px;}
.pt30{padding-top: 30px;}
.pt100{padding-top: 100px;}
.lh20{line-height: 20px;}

.d-none{display: none;}

/* @media (max-width: 1024px) {
	.pc_only {display: none;}
} */

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc_only { display: block !important; }
.sp_only { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 1024px) {
    .pc_only { display: none !important; }
    .sp_only { display: block !important; }
}


/* ------------------------------------------------------------------------------
	 メニュー　アニメーション
-------------------------------------------------------------------------------*/
.appear {
	animation:show 2s both;
}
/* li.appear {display:inline-block;} */
.d1 {animation-delay:0.0s;}
.d2 {animation-delay:0.2s;}
.d3 {animation-delay:0.4s;}
.d4 {animation-delay:0.6s;}
.d5 {animation-delay:0.8s;}

@keyframes show {
	0% {
		transform:translate(0,-1em);
		opacity:0;
	}
	100% {
		transform:translate(0,0);
		opacity:1;
	}
}

/* ------------------------------------------------------------------------------
	 コンテンツ　アニメーション
-------------------------------------------------------------------------------*/
.appear2 {
	animation:show2 2s both;
}

.appear3 {
	animation:show3 2s both;
}
/* li.appear {display:inline-block;} */
.c1 {animation-delay:0.0s;}
.c2 {animation-delay:0.2s;}

@keyframes show2 {
	0% {
		transform:translate(-3em,0);
		opacity:0;
	}
	100% {
		transform:translate(0,0);
		opacity:1;
	}
}

@keyframes show3 {
	0% {
		transform:translate(3em,0);
		opacity:0;
	}
	100% {
		transform:translate(0,0);
		opacity:1;
	}
}


/* ------------------------------------------------------------------------------
	 スクロール表示
-------------------------------------------------------------------------------*/
/* 画面外にいる状態 */
.fadein {
	opacity : 0.2;
	transform : translate(0, 0px);
	transition : all 1000ms;
	}

/* 画面内に入った状態 */
.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	}

/* ------------------------------------------------------------------------------
	スキル説明
-------------------------------------------------------------------------------*/
	.skill{
		margin-top:3em;
		background: rgba(112,212,251, 0.5);
		padding: 1% 3% 1% 3%;
		border-radius: 1em;
	}

	.skill_square{
		width: 5em;
		display: block;
		background: #ffffff;
		text-align: center;
		padding:2px;
		margin-top: 1em;
	}

	.skill_text{
		font-size: 16px;
	}

	/* ------------------------------------------------------------------------------
	プロフィール　SNSアイコン
-------------------------------------------------------------------------------*/
.sns-icon{
	display: flex;
}

.sns-icon li a{
	font-size:30px;
	color: #000;
}

.sns-icon li:first-child{
	padding-right: 20px;
}