既存のCSS

/*----------------------*/
/*-Font Awesome-*/
/*----------------------*/
.container{
  padding-top: 20px;
}
.entry-title:before{
    content: '\f046';
    display: inline-block;
    font-family: FontAwesome;
    font-weight: normal;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/*----------------------*/
/*----------------------*/
/*----------------------*/
.float { float:left; }
.text { overflow:auto; zoom:1; }
/*----------------------*/
/****** anago box *******/
/*----------------------*/
.anagoBox03 p, .anagoBox03 ul{
 display:inline-block;
 vertical-align:top;
 line-height:12px;/*上下文字の間隔*/
}

.defaultlist
,.defaultlist li{
	padding:0px;
	margin:0px;
}
 /*css*/
.defaultlist li{
	list-style-type:none !important;
	list-style-image:none !important;
	margin: 24px 0px 5px 10px /*右左100*/!important;/*上下*/
}
 
.list4 li{
	position:relative;
	padding-left:30px;
}
 
.list4 li:after, .list4 li:before{
	content:''; 
	display:block; 
	position:absolute; 
	top:4px; 
	left:8px; 
	height:1px; 
	width:4px; 
	background:#aaa; 
	border-radius:1px;
	transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
}
.list4 li:before{
	top:8px; 
	left:-13px;
	height:8px; 
	transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
}
/*LIST-6*/
.defaultlist
,.defaultlist li{
	padding:0px;
	margin:0px;
}

.defaultlist li{
	list-style-type:none !important;
	list-style-image:none !important;
	margin: 5px 0px 5px 0px !important;
}
 
.list6 li{
	position:relative;
	padding-left:20px;
}
 
.list6 li:after{
	content:'';
	display:block; 
	position:absolute; 
	background:#aaa;
	width:9px;
	height:9px; 
	top:5px; 
	left:-15px; /*文字とひし間隔*/
	transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
}
figure {
  position: relative;
  overflow: hidden;
  width: 300px;
}
figcaption {
  position: absolute;
  bottom: 30px;
  right: 40px;
  z-index: 2;
  width: 100%;
  height: 60px;
  background: rgba(0,0,0,.6);
  -webkit-transition: .3s;
  transition: .3s;
}
/*----------------------*/
/*figure*/
/*----------------------*/
figure {
  position: relative;
  overflow: hidden;
  width: 300px;
  background: #46ceb4;
}
figure img {
  position: relative;
  z-index: 1;
  -webkit-transition: .3s;
  transition: .3s;
}
figcaption {
  position: absolute;
  bottom: -52px;
  left: 0;
  z-index: 22;
  width: 100%;
  height: 50px;
  background: #46ceb6;
  -webkit-transition: .3s;
  transition: .3s;
}
figure:hover img {
  -webkit-transform: translateY(-30px);
  transform: translateY(-40px);
}
figure:hover figcaption {
  bottom: 0;
  -webkit-transform: translateY(-30px);
  transform: translateY(-30px);
}
/*----------------------*/
/***** 枠テンプレート*****/
/*----------------------*/
.block {
    padding: 20px;
    background: #fff;
    border: 4px #66cdaa solid;
    position: relative;
    z-index: 5;
}

.block:before {
    content: "";
    position: absolute;
    background: #fff;
    margin: 3px;
    border: 2px #7accb0 solid;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    z-index: -10;
}
/*CSS SITE LINK*/
#menu li {
  list-style-type: none;
  width: 400px;
  margin: 0;
  padding: 0;
  border-top: 1px dotted #777;
}
#menu a {
  text-decoration: none;
  display: block;
  padding:2px 10px;
}
#menu a:hover {
  background: #fff;
}

.square_btn{
    text-decoration: none;
    font-weight: bold;
    font-size: 37px;
    color: #799dec;
    text-shadow: 0px 4px 2px rgba(0, 0, 0, 0.32), 0px 1px 0px #6182ca, 0px 2px 0px #4f6aa7, 0px 3px 0px #5470ad;
}
.square_btn:active {
    top: 4px;
    text-shadow: none;
}

.unq_btn a{
    display: inline-block;
    text-decoration: none;
    font-size: 25px;
}
.unq_btn .fa-stack-1x {
    color: white;
    font-size: 18px;
}
.unq_btn .fa-stack-2x {
    transition: .3s;
}
.unq_btn .twitter .fa-certificate {
  color: #74c1f8;
}
.unq_btn .fb .fa-certificate {
  color: #668ad8;
}
.unq_btn .pocket .fa-certificate {
  color: #f79393;
}
.unq_btn .feedly .fa-certificate {
  color: #acde71;
}
.unq_btn .gplus .fa-certificate {
  color: #ed7168;
}
.unq_btn a:hover .fa-stack-2x {
    -ms-transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
}

a.cp_btn {
display: block;
position: relative;
width: 160px;
padding: 0.8em;
text-align: center;
text-decoration: none;
color: #fff;
border:1px solid #8BC34A;
background: #8BC34A;
overflow: hidden;
z-index: 1 !important;
}
a.cp_btn:after {
content:"";
position: absolute;
top: 50%;
left: 50%;
height: 0;
width: 100%;
background : #fff;
opacity: 0;
transform: translateX(-50%) translateY(-50%) rotate(45deg);
transition: 0.3s;
z-index: -1;
}
a.cp_btn:hover {
color: #da3c41;
}
a.cp_btn:hover:after {
height: 250%;
opacity: 1;
}
a.cp_btn:active:after {
height: 350%;
opacity: 1;
}
/*fuwa fuw*/
.img_box{
  animation: img_box_9955 3s linear infinite;
  transform-origin: 50% 50%;
  margin: 1rem 0 !important;
}
 @keyframes img_box_9955 {
  0% { transform: translateY(0) }
  33.33333% { transform: translateY(-10px) }
  66.66667% { transform: translateY(0) }
  100% { transform: translateY(0) }
}
/**************************/
/*Picture Gallery ふりこ*/
/****************************/
* { margin: 0; padding: 0; }
body {
  font-family: Arial, sans-serif;
  background-image: url('./img/w-stone14.jpg');
  background-repeat: repeat;
} 
#gallery {
  width: 80%;
  margin: 1em auto;
  display: flex;/* 親要素 flexコンテナ */
  flex-flow: wrap;/* 折り返し */
}
#gallery img {
  width: 100%;
  height: auto;
  border: none;
  max-width: 380px;/* 大きくなり過ぎないように */
  margin: 1em 0;
  padding: 8px; /* 写真外枠を白フチに */
  background: #fff;
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.7);
}
#gallery p {
  flex: 260px;/* 子要素 flexアイテム */
}
.pic-r1 {
  z-index: 2;
  transform: rotate(-10deg);
}
.pic-r2 {
  z-index: 5;
  transform: rotate(15deg);
}
.pic-r3 {
  z-index: 3;
  transform: rotate(5deg);
}
.pic-r4 {
  z-index: 5;
  transform: rotate(-3deg);
}
.pic-r5 {
  z-index: 5;
  animation: animation-1 4s infinite ease 1s both;
}              /* アニメでお遊びです */
@keyframes animation-1 {
  from {
    transform: rotate(8deg);
  }
  to {
    transform: rotate(-15deg);
  }
}
/*************************/
/*****content-wrap********/
/************************/
.contents-wrap {
	display: flex;
	justify-content: space-between;
	margin-bottom: 7rem;
}
.contents-wrap:nth-child(odd) {
	flex-direction: row-reverse;
}

.contents-text {
	width: 60%; /*flex: 2;*/
}
.contents-img {
	width: 60%; /*flex: 1;*/
}

.contents-text h2 {
	margin-bottom: 2rem;
	font-size: 2.2rem;
}

.contents-img img {
	display: block;
	width: 100%;
	height: auto;
}

@media screen and (max-width: 768px){
	.contents-wrap,
	.contents-wrap:nth-child(odd)  {
		flex-direction: column;
	}

	.contents-text,
	.contents-img {
		width: 100%; /*flex: 1;*/
	}

	.contents-text {
		padding: 3rem;
	}

	.contents-text h2 {
		text-align: center;
	}
}
/*----------------------*/
/******* wrench *********/
/*----------------------*/
.wrench {
  animation: wrench_7942 3.875s ease infinite;
  transform-origin: 90% 35%;
}

@keyframes wrench_7942 {
  0% { transform:rotate(-12deg) }
  5.16129% { transform:rotate(12deg) }
  6.45161% { transform:rotate(24deg) }
  11.6129% { transform:rotate(-24deg) }
  12.90323% { transform:rotate(-24deg) }
  18.06451% { transform:rotate(24deg) }
  19.35484% { transform:rotate(24deg) }
  24.51613% { transform:rotate(-24deg) }
  25.80645% { transform:rotate(-24deg) }
  30.96774% { transform:rotate(24deg) }
  32.25807% { transform:rotate(24deg) }
  37.41935% { transform:rotate(-24deg) }
  38.70968% { transform:rotate(-24deg) }
  43.87097% { transform:rotate(24deg) }
  48.3871% { transform:rotate(0deg) }
  100% { transform:rotate(0deg) }
}
/*------------------------*/
/** gallery-container *ok*/
/*-----------------------*/
.gallery-container {
  width: 860px;
  margin-left: auto;
  margin-right: auto;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns:(1fr)[4];
  grid-template-columns: repeat(4, 1fr);
  grid-gap: .5em
}

.gallery-img {
  display: block;
  max-width: 100%;
  cursor: pointer
}

.lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.8);
  display: -ms-flexbox;
  display: flex;
  z-index: 1
}

.lightbox-container {
  position: relative;
  margin: auto;
  background: #fff;
  padding: 1em;
  border-radius: .2em
}

.close-modal {
  background: tomato;
  color: #fff;
  position: absolute;
  width: 1.8em;
  height: 1.8em;
  text-align: center;
  line-height: 1.8em;
  top: -.9em;
  right: -.9em;
  border-radius: 50%;
  cursor: pointer
}

.lightbox-description {
  text-align: center;
  font-size: 1.1em
}

.lightbox-navigation {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  font-size: .9em;
  opacity: .8
}

.lightbox-navigation__button {
  text-decoration: none;
  color: tomato
}