div{
background-color: #e9dec8;
}

/*h2*/
h2 {
  position: relative;
  padding-left: 25px;
  margin:5px;
  margin-top: 100px;
}

h2:before {
  position: absolute;
  content: '';
  bottom: -3px;
  left: 0;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 15px transparent;
  border-bottom: solid 15px rgb(119, 195, 223);
}

h2:after {
  position: absolute;
  content: '';
  bottom: -3px;
  left: 10px;
  width: 100%;
  border-bottom: solid 3px rgb(119, 195, 223);
}


img{
  width: 80%;
}

.container{
  display: flex;
}

.main{
  background: #e9dec8;
  width:80%;
}

.side{
  background:#e9dec8;
  width:20%
}

footer{
  font-size: 13px;
  color: black;
  background-color: #e9dec8; 
}

/*PRODUCT*/
.PRODUCT{
  margin-bottom: 200px;
}

/*画像のスライド*/
.cp_cssslider {
width: 900px;
padding-top: 500px; 
position: relative ;
margin: 2em auto;
text-align: center;
}
.cp_cssslider > img {
position: absolute;
left: 0;
top: 0;
transition: all 0.5s;
border-radius: 3px;
box-shadow:0px 0px 5px 0px rgba(0,0,0,0.3);
}
.cp_cssslider input[name='cp_switch'] {
display: none;
}
/* サムネイル */
.cp_cssslider label {
margin: 15px 5px 0 5px;
border: 2px solid #ffffff;
display: inline-block;
cursor: pointer;
transition: all 0.5s ease;
opacity: 0.6;
border-radius: 3px;
}
.cp_cssslider label:hover {
opacity: 0.9;
}
.cp_cssslider label img {
display: block;
width: 100px;
border-radius: 2px;
}
.cp_cssslider input[name='cp_switch']:checked + label {
border: 2px solid #FF7043;
opacity: 1;
}
.cp_cssslider input[name='cp_switch'] ~ img {
opacity: 0;
}
.cp_cssslider input[name='cp_switch']:checked + label + img {
opacity: 1;
}


/*CONCEPT*/
.CONCEPT{
  margin-bottom: 100px;
}

.softy{
    margin:2em 0;
    position: relative;
    padding: 0.5em 1.5em;
    border-top: solid 2px black;
    border-bottom: solid 2px black;
}

.softy:before, .softy:after{
    content: '';
    position: absolute;
    top: -10px;
    width: 2px;
    height: -webkit-calc(100% + 20px);
    height: calc(100% + 20px);
    background-color: black;
}
.softy:before {
  left: 10px;
}

.softy:after {
  right: 10px;
}

.softy p {
    margin: 0; 
    padding: 0;
}

.image1{
	width: 80%
}

.neko {
 width: 100%;
 display: flex;
}

.inu {
 width: 100%;
 display: flex;
}
.child {
 width: 100px;
}
/*NICI*/
.NICI{
   position:relative;
   background:#fffde7;
   width:85%;
   margin:2em auto;
   padding:1.5em 1em;
   transform: rotate(-2deg);
   box-shadow:1px 1px 4px rgba(0,0,0,0.2);
   color:#795548;
  margin-bottom: 50px;
}

.NICI::before{
   content:'NICI';
   position:relative;
   display:inline-block;
   border-bottom:3px solid #795548;
   border-radius: 0 0 40% 5% / 0 0 15% 20%;
   padding:0 1em 0.1em 0.2em;
   font-size:150%;
   font-weight:bold;
   transform: rotate(-5deg);
}

.NICI::after{
   content:'';
   position:absolute;
   left:50%;
   top:-15px;
   margin-left:-75px;
   width:150px;
   height:30px;
   background:rgba(245,245,245,0.7);
   box-shadow:1px 1px 4px rgba(0,0,0,0.2);
   transform: rotate(-4deg);
}

.NICI ol{
   margin:1em 0.5em 0 2em;
   padding:0 0 0 0;
}

.NICI ol li{
   margin-bottom:0.5em;
}


/*リンク先ボタン*/

.button {
  display: inline-block;
  width: 200px;
  height: 54px;
  text-align: center;
  text-decoration: none;
  line-height: 54px;
  outline: none;position: relative;
  z-index: 2;
  border: 2px solid #333;
  color: #333;
}

.button::before,
.button::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}

.button,
.button::before,
.button::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.button::after {
  top: 4px;
  left: 4px;
  width: 188px;
  height: 42px;
  border: 2px solid #333;
  opacity: 0;
}

.button:hover::after {
  opacity: 1;
}


/*メニューバー*/
ul.sidenav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
  position: fixed;
  top: 50px;
  overflow: auto;
}

ul.sidenav li a {
  display: block;
  color: #000000;
  padding: 8px 16px;
   text-decoration: none;
}

ul.sidenav li a.active {
  background-color: #da3c41;
  color: white;
}

ul.sidenav li a:hover:not(.active) {
  background-color: #1b2538;
  color: white;
}

div.content {
  margin-left: 25%;
  padding: 1px 16px;
  height: 1000px;
}
@media screen and (max-width: 900px) {
  ul.sidenav {
    width: 100%;
    height: auto;
    position: relative;
  }
 ul.sidenav li a {
    float: left;
    padding: 15px;
  }
  div.content {
    margin-left: 0;
  }
}

@media screen and (max-width: 480px) {
	ul.sidenav li a {
		text-align: center;
		float: none;
	}
}

/*FAB*/
#fab{
  display: block;
  width: 56px;
  height: 56px;
  background: white;
  text-align: center;
  border-radius: 50%;
  transition: .3s;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,.12), 0 2px 2px 0 rgba(0,0,0,.24);
}

#fab:hover{
  box-shadow: 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);
}

#fab i{
  color: #e9dec8;
  line-height: 56px;
  font-size: 18px;
}

#fab{
  position: fixed;
  bottom: 50px;
  right: 70px;
}
 
#fab a{
  display: block;
  text-decoration: none;
}
 
#fab:hover{
  opacity: 0.85 ;
}


/*リンク先下線の消去*/
a {
  text-decoration:none;
}