/* CSS Document */

.sp {
  display: none; }

.pc {
  display: inline; }

.mobile-menu-icon {
  display: none; }

.spmenu {
  display: none; }

.inview {
  animation-name: animation1;
  animation-duration: 1.0s;
  animation-timing-function: cubic-bezier(.72,.01,.48,1);
  animation-iteration-count: 1;
}

body{
	margin:0;
}

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

ul {
  list-style-type: none;
  padding: 0; }

header ul {
  display: flex;
  justify-content: flex-end; }
  header ul li {
    margin-right: 10px; }
  header ul li:last-child {
    margin-right: 0; }
header nav {
  border-bottom: 5px solid #333;
  margin-bottom: 50px; }

main {
  width: 1280px;
  margin: 0 auto 100px; }

a {
  color: #333; }

.contents {
  display: flex;
  justify-content: space-between; }
  .contents h2 {
    font-size: 35px;
    color: white;
    background-color: #333;
    box-shadow: 5px 5px #ccc;
    border-radius: 10px;
    padding: 5px 20px; }
    .contents h2 i {
      padding-right: 20px; }
  .contents h3 {
    font-size: 25px; }

.left {
  width: 900px; }

.sidebar {
  width: 350px;
  box-sizing: border-box;
  border: 1px solid #333;
  background-color: #eee;
  margin-left: 30px;
  padding: 30px; }

footer {
  background-color: #333;
  padding: 50px 0; }
  footer ul {
    display: flex;
    justify-content: space-around;
    border-top: 1px solid white;
    border-bottom: 5px solid white;
    padding: 10px; }
  footer a {
    color: white; }
  footer section {
    color: white;
    text-align: center; }

@media screen and (max-width: 768px) {
  .sp {
    display: inline; }

  .pc {
    display: none; }
	
 .mobile-menu-icon {
    display: block;
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: unset;
    border: none;
    outline: none !important;
    cursor: pointer;
    z-index: 9999; }
    .mobile-menu-icon > span {
      background-color: #333;
      width: 35px;
      height: 2px;
      display: block;
      margin-bottom: 9px;
      transition: transform 0.7s; }
      .mobile-menu-icon > span:last-child {
        margin-bottom: 0; }

  .menu-open .mobile-menu-icon > span {
    background-color: #333; }
    .menu-open .mobile-menu-icon > span:nth-child(1) {
      transition-delay: 70ms;
      transform: translateY(11px) rotate(135deg); }
    .menu-open .mobile-menu-icon > span:nth-child(2) {
      transition-delay: 0s;
      transform: translateX(-18px) scaleX(0); }
    .menu-open .mobile-menu-icon > span:nth-child(3) {
      transition-delay: 140ms;
      transform: translateY(-11px) rotate(-135deg); }

  .spmenu {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    -webkit-transform: translateX(100vw);
    transform: translateX(100vw);
    -webkit-transition: all 1s;
    transition: all 1s;
    background-color: #BFBFBF;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 30px;
    z-index: 9998; }
    .spmenu nav {
      display: block; }
      .spmenu nav ul {
        display: block;
        text-align: center; }
        .spmenu nav ul a {
          display: block;
          color: black;
          border-bottom: 3px solid black;
          margin: 0 !important;
          padding: 20px; }

  .menu-open button + .spmenu {
    -webkit-transform: translateX(0);
    transform: translateX(0); }

  header nav {
    display: none; }
	
	.logo{
		width:80%;
	}
	
  main {
    width: 100%;
    margin: 0 0 100px 0; }

  .contents {
    display: block; }

	.contents h2{
		font-size:18px;
	}	
	
  .left {
    width: auto; }

  .sidebar {
    width: auto;
	　　　margin-top:100px;
	}
}