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


html{
	font-size: 62.5%;/*16px×62.5%=10px*/
	font-family: 'Noto Sans JP', sans-serif;
}
body{
	color: #707070;
	font-size: 1.6rem;
	margin-right: auto;
	margin-left: auto;
}
a{
	transition: all 0.5s;
}
a:hover{
	color: #707070;
	opacity: 0.5;
}

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

p{
	line-height: 1.7;
	margin: 5px;
}

ul,li{
	list-style: none;
	line-height: normal;
  margin: 0px 10px;
  padding-top: 10px;
  padding-bottom: 10px;
}

h2{
	padding:30px 20px;
}

h3{
	padding:20px 20px;
}
h4{
	padding:10px 10px;
}

table{
	width: 85%;
	margin: 0 auto;
	margin-bottom: 15px;
	justify-content:space-between;
	flex-wrap: wrap;
  border: solid 1px black;
	background: #f3f3f3;
}

th{
	background: #707070;
	color: #ffffff;
	padding: 10px;
	border: solid 1px black;
	opacity: 0.8;
}

td{
	padding: 10px 5px;
	border: solid 1px black;
}

nav{
	background: #f3f3f3;
	position: fixed;
	width: 100%;
	z-index: 1000;
	box-shadow: 0 5px 7px -3px rgba(0, 0, 0, .1);
}

nav ul{
	display: flex;
	justify-content: center;
}
nav ul li{
	text-align: center;
	padding: 5px 50px;
	font-weight: bold;
	font-size: 18px;
}

nav ul li a{
	text-decoration: none;
	color: #303030;
}



/*-----------------
*utility
-------------------*/

.text-center{
	text-align: center;
}

.under-highlighter{
	background: linear-gradient(transparent 60%, #f9bb5e 90%);
}

.box1{
		padding: 0.5em 1em;
		margin: 2em 0;
    background: #FFF;
    border-radius: 10px;/*角の丸み*/
}

/*******************
*
*  header
*
********************/



.top-img{
	background-image: url( ../images/596521m.jpg);
	height: 600px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}

.top-img h1{
	font-size: 94px;
  color: #fff;
  letter-spacing: 1px;
	position: absolute;
  top: 50%;
  left: 10%;
}


/*******************
*
*  section
*
********************/


.inner{
	max-width: 960px;/*大きな画面で見た際にbody自体が960px以上大きくならないように調整するために必要	*/
	margin:0 auto;/**/
}

.section{
padding: 120px 50px;
background-color: #f3f3f3;
}

.section2{
padding: 120px 50px;
}



.works{
	font-size: 6rem;
	font-weight: 800;
}

.section-title{
	font-size: 2rem;
	line-height: 45px;
	color: #303030;
}

.section-title-mini{
	font-size: 2.7rem;
	max-height: 15px;
}

.section-lists{
	display: flex;
	justify-content:space-between;
	margin-bottom: 80px;
}

.section-items{
	list-style: none;
	width: 33.33%;
	text-align: center;
	margin: 10px 10px;
	padding: 10px;
	border: solid 1px #e5e5e5;
	border-radius: 5px;
	background-color:#ffffff;
}

.two-column-wrapper{
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}

.two-column-image{
	width: 33%;
	height: auto;
}

.two-column-wrapper p{
	margin: 60px;
}



/*******************
*
*  button オレンジ
*
********************/

.button_wrapper{
	text-align: center;
}

.button{
	display:block;
	max-width: 260px;
	height: 50px;
	line-height: 50px;
	color: #707070;
	text-decoration: none;
	text-align: center;
	background-color: #edede5; /*ボタン色*/
	border-radius: 5px; /*角丸*/
	transition: all 0.5s;
	margin: 10px auto 0;
	opacity: 0.8;
}
.button:hover{
	background-color: #F8AA2A;/*ボタン色*/
	opacity: 0.8;
	color: #ffffff;
}
.button:active{
	background-color: #F8AA2A;/*ボタン色*/
	opacity: 0.8;
	color: #ffffff;
}

/*******************
*
*  button2 記事一覧
*
********************/

.button_wrapper{
	text-align: center;
}

.button2{
	display:block;
	max-width: 600px;
	height: 70px;
	line-height: 70px;
	color: #707070;
	text-decoration: none;
	text-align: center;
	background-color: #edede5; /*ボタン色*/
	border-radius: 5px; /*角丸*/
	transition: all 0.5s;
	margin: 10px auto 0;
	opacity: 0.8;
}
.button2:hover{
	background-color: #F8AA2A;/*ボタン色*/
	opacity: 0.8;
	color: #ffffff;
}
.button2:active{
	background-color: #F8AA2A;/*ボタン色*/
	opacity: 0.8;
	color: #ffffff;
}

/*******************
*
*  articles
*
********************/

.articles-lists{
	display: flex;
	justify-content:center;
	flex-wrap: wrap;
}

.articles-items{
	box-sizing: border-box;
	list-style: none;
	max-width: 45%;
	text-align: center;
	margin: 10px 20px;
	width: 100%;
	border: solid 2px #e5e5e5;
	border-radius: 5px; /*角丸*/
	background-color: #f9f9f9
}
.articles-items:hover{
	background-color: #ffffff;
	opacity: 0.8;
	color: #ffffff;
	transition: all 0.5s;
}

.articles-img{
	box-sizing: border-box;
	max-height: 170px;
	margin: 0 auto;
	padding: 10px;
	border-radius: 5px;

}


.articles-box{
	font-weight: 600;
	padding: 20px 15px;
}

/*******************
*
*  content
*
********************/
.content{
	margin: 0 auto;
	max-width: 960px;
}

.content-inner-box{
	display: flex;
	justify-content: center;
}

.content-title{
	font-size: 2rem;
	padding:40px 0;
	line-height: 45px;
	color: #303030;
}
.content-title-mini{
	font-size: 2.5rem;
	color: #303030;/*文字色*/
	margin: 20px 0px;
	border-top: solid 3px #303030;/*上線*/
	border-bottom: solid 3px #303030;/*下線*/
	padding: 0.6em 0.8em;
}

.content-title-mini-mini{
	font-size: 2rem;
	border-bottom: 1px solid #707070;
}

.content-box{
  padding: 0.5em 0.5em 0.5em 2em;
}

.content-ul{
	border: solid 2px #707070;
	border-radius :5px;/*角の丸み*/
	background: #f3f3f3;
	padding: 0 0.5em;
	position: relative;
	max-width: 700px;
	margin-top: 40px;
	margin-bottom: 40px;
}

.content-ul li{
	line-height: 1.5;
	padding: 0.5em 0 0.5em 1.4em;
	border-bottom: dashed 1px silver;
	list-style-type: none!important;
}

.content-ul li:before{
	font-family: "Font Awesome 5 Free";
	content: "\f138";/*アイコン種類*/
	position: absolute;
	left : 0.5em; /*左端からのアイコンまで*/
	color: #ffb03f; /*アイコン色*/
	font-weight: 900;
}

.content-ul li:after{
	/*タイトルタブ*/
background: #707070;
color: #fff;
border-radius :5px;/*角の丸み*/
font-weight: bold;
position: absolute;
left: -2px;
bottom: 100%;
padding: 1px 7px;
content: "実施した施策";/*タブの文字*/
letter-spacing: 0.05em;/*字間*/
}

.content-ol{
	counter-reset:number; /*数字をリセット*/
	  list-style-type: none!important; /*数字を一旦消す*/
	  padding: 0.3em 0.8em;
	  border: solid 2px #ffb107;
}

.content-ol li{
	border-bottom: dashed 1px orange;
  position: relative;
  padding: 0.5em 0.5em 0.5em 30px;
  line-height: 1.5em;
}

.content-ol li:before{
	/* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*数字のデザイン変える*/
  display:inline-block;
  background: #ffb107;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 15px;
  border-radius: 50%;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  /*以下 上下中央寄せのため*/
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.content-ol li:last-of-type {
  border-bottom: none; /*最後のliの線だけ消す*/
}

/*******************
*
*  skills
*
********************/

.skills-inner{
	display: flex;
	justify-content:center;
	flex-wrap: wrap;
}

.skills-box{
	box-sizing: border-box;
	list-style: none;
	max-width: 45%;
	text-align: center;
	margin: 10px 10px;
	padding: 10px;
	width: 100%;
	border: solid 2px #e5e5e5;
	border-radius: 5px; /*角丸*/
	background-color: #ffffff;
}

.skills-box2{
	box-sizing: border-box;
	list-style: none;
	max-width: 93%;
	text-align: center;
	margin: 10px 10px;
	padding: 10px;
	width: 100%;
	border: solid 2px #e5e5e5;
	border-radius: 5px; /*角丸*/
	background-color: #ffffff;
}

.skills:hover{
	background-color: #ffffff;
	opacity: 0.8;
	color: #ffffff;
	transition: all 0.5s;
}

.skills-title{
		margin-bottom: 3px;
    font-size: 26px;
    padding: 24px;
		font-weight: bold;
    color: #303030;
}


.none{
	border: none;
	background-color: #ffffff;
	color: #707070;
}

.none-bold{
	border: none;
	font-size: 1.8rem;
	background-color: #ffffff;
	font-weight: bold;
	color: #303030;
}

/*******************
*
*  contact
*
********************/
.contact-inner{
	text-align: center;
}

.twitter-img{
	max-width: 100px;
	padding: 10px 15px;
}

/*******************
*
*  image　letter-imgは削除して違う画像用に利用予定
*
********************/


.letter-img{
	background-image: url( ../images/letter_half.jpg);
	width: 100%;
	height: 400px;
	margin : 0 auto;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/*******************
*
*  footer
*
********************/

.footer{

	background-color: #707070;
	width: 100%;
	height: 10rem;
	color: #ffffff;
	text-align: center;
}

.small{
	font-weight: 500;
	font-size: 110%;
	letter-spacing: 0.05em;
}


.footer-nav{
	position: static;
	background-color: #707070;
	color: #ffffff;
	box-shadow:none;
}

.footer-li{
    padding: 5px 10px;
}

.footer-a{
	color: #ffffff;
	font-size: medium;
}

.footer-a:hover{
	color: #000000;
	opacity: 0.5;
}

/*******************
*
*  pagetop button
*
********************/

#page_top{
 width: 50px;
 height: 50px;
 position: fixed;
 right: 10px;
 bottom: 30px;
 background: #F8AA2A;
 opacity: ;
 border-radius: 50%;
}
#page_top a{
 position: relative;
 display: block;
 width: 50px;
 height: 50px;
 text-decoration: none;
}
#page_top a::before{
 font-family: 'Font Awesome 5 Free';
 font-weight: 900;
 content: '\f106';
 font-size: 25px;
 color: #fff;
 position: absolute;
 width: 25px;
 height: 25px;
 top: -5px;
 bottom: 0;
 right: 0;
 left: 0;
 margin: auto;
 text-align: center;
}

/*******************
*
*  articles h2,h3,h4,h5
*
********************/

.article-h {
	position: relative;
	padding: 0.6em;
	background: #109954;
	color: #fff;
	opacity: 0.7;

}

.article-h:after {
	position: absolute;
	content: '';
	top: 100%;
	left: 30px;
	border: 15px solid transparent;
	border-top: 15px solid #109954;
	width: 0;
	height: 0;
}

/*******************
*
*  fade-in(CSSのみで完結)
*
********************/


/*上からフェードイン*/
.fade-in-top {
   opacity: 0;
   animation: fadein-top 1s .3s ease-out forwards;
}
@keyframes fadein-top {
   0% {
      opacity: 0;
      transform: translateY(-20px);
   }
   100% {
      opacity: 1;
      transform: translateY(0);
   }
}

/*下からフェードイン*/
.fade-in-bottom {
   opacity: 0;
   animation: fadein-bottom 1s .3s ease-out forwards;
}
@keyframes fadein-bottom {
   0% {
      opacity: 0;
      transform: translateY(20px);
   }
   100% {
      opacity: 1;
      transform: translateY(0);
   }
}

/*左からフェードイン*/
.fade-in-left {
   opacity: 0;
   animation: fadein-left 1s .3s ease-out forwards;
}
@keyframes fadein-left {
   0% {
      opacity: 0;
      transform: translateX(-20px);
   }
   100% {
      opacity: 1;
      transform: translateX(0);
   }
}

/*右からフェードイン*/
.fade-in-right {
   opacity: 0;
   animation: fadein-right 1s .3s ease-out forwards;
}
@keyframes fadein-right {
   0% {
      opacity: 0;
      transform: translateX(20px);
   }
   100% {
      opacity: 1;
      transform: translateX(0);
   }
}

/*******************
*
*  fade-in(CSS+js)
*
********************/

/* 上からフェードイン */
.slide-top {
	opacity: 0;
	transform: translate(0, -20px);
	transition: all 1.5s 0s ease-out;
 }


/* 下からフェードイン */
.slide-bottom {
   opacity: 0;
   transform: translateY(20px);
   transition: all 1.5s 0s ease-out;
 }

 /* 左からフェードイン */
.slide-left {
	opacity: 0;
	transform: translate(-20px, 0);
	transition: all 1.5s 0.4s ease-out;
 }

/* 右からフェードイン */
.slide-right {
	opacity: 0;
	transform: translate(20px, 0);
	transition: all 1.5s 0s ease-out;
 }

 /*******************
 *
 *  fade-in(CSS+js)時間差用
 *
 ********************/

 /* 左からフェードイン */
.slide-left1 {
	opacity: 0;
	transform: translate(-20px, 0);
	transition: all 1s 0.8s ease-out;
 }

 /* 左からフェードイン */
.slide-left2 {
 opacity: 0;
 transform: translate(-20px, 0);
 transition: all 1s 1.2s ease-out;
 }

 /* 右からフェードイン */
 .slide-right1 {
 	opacity: 0;
 	transform: translate(20px, 0);
 	transition: all 1s 0.8s ease-out;
  }

	/* 下からフェードイン */
	.slide-bottom1 {
	   opacity: 0;
	   transform: translateY(20px);
	   transition: all 1s 1s ease-out;
	 }


/*******************
*
*  スマホ向け(タブレットじゃなくなったら)
*
********************/

@media screen and (max-width:767px){
	body{
		font-size: 1.5rem;
	}
	.top-img{
	height: 250px;
}

.top-img h1{
	font-size: 50px;
  color: #fff;
  letter-spacing: 1px;
	position: absolute;
  top: 50%;
  left: 10%;
}

	.inner{
		box-sizing: border-box;
		max-width: 100%;
	}

  .section{
		padding: 50px 10px;
	}

	.section2{
		padding: 50px 10px;
	}

	.section-lists{
	display: block;
	}

	.section-items{
		width: 100%;
		margin: 0 auto 20px;
		padding: 10px 0px;
	}

	.section-title-mini{
	font-size: 2.5rem;
	max-height: 15px;

}
	.works{
	font-size: 4rem;
	font-weight: 800;
}

.skills-box{
	max-width: 93%;
}

table{
	width: 90%;
}

nav ul li{
	text-align: center;
	padding: 0px 0px;
	font-weight: bold;
	font-size: 15px;
}

.two-column-wrapper{
	display: block;
	flex-wrap: nowrap;
	justify-content: space-between;
	text-align: center;
}

.two-column-image{
	width: 33%;
}

.two-column-wrapper p{
	margin: 30px;
}


/*******************
*
*  articles
*
********************/

.articles-items{
	max-width: 45%;
	margin: 5px 5px;
}


.articles-img{
	box-sizing: border-box;
	padding: 20px 20px 20px 10px;
}

.articles-box{
	max-width: 300px;
	text-align: center;
	font-weight: 700;
}

/*******************
*
*  スマホ向け(スマホ縦のみ)
*
********************/
@media screen and (max-width:480px){
	.content-inner-box{
		display: block;
	}
	.footer-li{
	    padding: 5px 0px;
	}

}

}