@font-face {
  font-family: Couture;
  src: url(../font/couture-bld.otf);
  /* src: url(../font/couture-bldit.otf); */
}

body {
  margin: 0;
  padding: 0;
  font-family: Couture;
  background-color: rgb(205, 240, 229);
  
}

  
  div #header, #footer {
    /* width: 100%; */
    margin: 0;
    padding: 20px 0;
    background-color: rgb(163, 219, 210);
  }

  #header{
    /* height: 70px; */
    width: 100%;
    position: fixed;top: 0;
    z-index: 100;
  }

  #header .label small{
    position: absolute;
    top: 24px;
    right: 24px;
  }

  label{
    position: absolute;
    width: 45px;
    height: 22px;
    right: 20px;
    top: 40px;
    border: 2px solid;
    border-radius: 20px;
  }

  label:before{
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    left: 1px;
    top: .99px;
    border-radius: 50%;
    cursor: pointer;
    background: #000;
    transition: 0.4s;
  }
  label.active:before{
    left: 23.5px;
    background: #fff;
  }
  body.night{
    background: #000;
    color: #fff;

  }
  
  .logo h1{
    font-size: 230%;
    padding: 0 45px;
    margin-top: 0;
    margin-bottom: 0;
    
    background-size: contain;
  }

  .logo h1 small{
    font-size: 50%;
    position:absolute; top: 55px; left:155px;
  }
  .logo a{
    text-decoration: none;
    color: inherit;
  }

#nav{
  margin-right: 0;
  position: fixed;top: 78px;
  width: 100%;
  z-index: 100;
}

nav #nav{
  margin: 0;
}

@media  screen and (max-width: 430px) {
  #nav ul{
    flex-wrap: wrap;
    
  }
  #nav ul .btn{
    height: 19px;
  }
  
}




  #nav ul{
    display: flex;
    overflow: hidden;
    margin: 0;
    list-style: none;
    /* margin-right: 17px; */
  }
  .openbtn5{
    position: absolute;left:0;
    /*ボタン内側の基点となるためrelativeを指定*/
    background:#666;
    cursor: pointer;
      width: 39px;
      height:39px;
      padding-left: 1px;
  }
  
  /*ボタン内側*/
  .openbtn5 span{
      display: inline-block;
      transition: all .4s;/*アニメーションの設定*/
      position: absolute;
      
    }
  
  .openbtn5 span:nth-of-type(1),
  .openbtn5 span:nth-of-type(3) {
    height: 2px;
    background: #fff;
    width: 62%;
    left: 7px;
   }
  
  .openbtn5 span:nth-of-type(1) {
    top: 7px;
  }
  
  .openbtn5 span:nth-of-type(2) {
    top: 14px;
    left: 4px;
    font-size: 0.5rem;
    text-transform: uppercase;
    color: #fff;
  }
  
  .openbtn5 span:nth-of-type(3) {
    top: 30px;
  }
  
  /*activeクラスが付与されると線が回転して×になり、Menu表記をしている2つ目の要素が透過して消える*/
  .openbtn5.active span:nth-of-type(1) {
      top: 13px;
      left: 13.5px;
      transform: translateY(6px) rotate(-45deg);
      width: 30%;
  }
  
  .openbtn5.active span:nth-of-type(2) {
    opacity: 0;
  }
  
  .openbtn5.active span:nth-of-type(3){
      top: 25px;
      left: 13.5px;
      transform: translateY(-6px) rotate(45deg);
      width: 30%;
  }

  #nav li {
    margin: 0;
    font-weight: bold;
    width: 100%;
    height: 100%;
    text-align: center;
  }


  
  #nav li .btn{
    /* display: inline-block; */
    /* padding: 2em 0; */
    text-decoration: none;
    color: #FFF;
    background-image: linear-gradient(#6795fd 0%, #67ceff 100%);
    transition: .4s;
  }
  

  #nav a{
    display: inline-block;width: 100%;
    /* padding: 1em auto; */
    padding: 10px 5px;
  }

  #nav a:hover {
    color: rgb(188, 229, 226);
    transition: all 0.3s;
    display: block;
    padding: 2em 0;
    /* font-size: 120%; */
  }

  /* nav-slide */

#nav ul li .btn{
  padding-left: 1000px;
}

  /* body #top{
    position:relative;
  } */
  
  .content {
    /* background-color: rgb(205, 240, 229); */
    /* height: 100%; */
    /* position: fixed;top: 117px; */
    /* margin-top: 155px; */
    /* height: auto;
    width: auto; */
    padding: 0 45px;
    margin-bottom: 125px;
    position: relative;
    /* overflow: scroll; */
  }
  .content h1{
    margin-top: 155px;
  }

  .content p{
    overflow: hidden;
    width: 100%;
  }

  .content .top_demo_video{
    max-width: 58%;
    float: left;
    display: block;
    margin-right: 10px;
  }

  @media  screen and (max-width: 430px) {
    .top_demo_video{
      flex-wrap: wrap;
      
    }
  }

  ul{
    list-style-type: none;
  }

  .icons ul{
    list-style-type: none;
    float: left;
    /* display: block; */
    padding-right: 10px;
  }

  .icons ul li{
    width: 40px;
  }

  #top .icon{
    float: left;
    display: block;
    height: 250px;
    width: auto;
    padding-right: 10px;
  }

  #contents_page{
    margin-bottom: 150px;
  }
  
  .svg_img img{
    padding-right: 5px;
    height: 50px;
    width: 50px;
    float: left;
    flex-wrap: wrap;
    mix-blend-mode: exclusion;
    
  }

  /* index.html */
  .content h2 a{
    text-decoration: none;
    
  }

  .content h2 a:hover {
    cursor: pointer;
}
.content h2 a:link, a:active, a:visited{
  color: inherit;
}


  
/* contents.html */

  /* filter */
  button{
    font-size:1em;
    margin-right:5px;
    margin-bottom:10px;
    display:block;
    color:#fff;
    padding:10px 25px;
    background: linear-gradient(#6795fd 0%, #67ceff 100%);
    border-radius:20px;
    border:none;
    display:inline-block;
    justify-content: center;
    cursor:pointer;
  }
  
  #buttons button:last-child{
    margin-right:0;
  }
  
  button:focus{
    outline:none;
  }
  
  button:hover{
    background:#66edf7;
  }

  /* card */

  .card{
    
    width: 100%;
    height: auto;
    margin: 8px 8px 8px 0;
    padding: 0;
    border: 1px solid #ddd;
    /* display: inline-block;width: calc(100%/3); */
  }
  
  .card__imgframe{
    width: auto;
    height: 210px;
    /* padding-top: 56.25%; */
    /* background: url(/video/icon.gif) no-repeat center; */
    background-size: cover;
    box-sizing: border-box;
  }

  .card__imgframe a img{
    width: 100%;
    height: 100%;
    overflow: auto;
    /* object-fit: contain; */
    object-fit: cover;
    mix-blend-mode: exclusion;
    /* color: inherit; */
    /* image-resolution:inherit; */
  }

  .card__textbox{
    width: auto;
    height: auto;
    padding: 20px 18px;
    /* background: #bbeff0; */
    box-sizing: border-box;
    
    /* mix-blend-mode: exclusion; */
  }
  .card__textbox > * + *{
    margin-top: 10px;
  }
  .card__textbox a{
    text-decoration: none;
  }

  .card__titletext{
    font-size: 20px;
    /* font-weight: bold;
    line-height: 100%;
    padding-top: 0; */
    
  }

  .card__overviewtext{
    font-size: 12px;
    line-height: 100%;
    margin-top: 0;
    margin-bottom: 0pt;
  }
  .card__overviewtext p{
    margin-bottom: 0;
  }


  .card-skin{
    box-shadow: 2px 2px 6px rgba(0,0,0,.4);
    /* margin-right: 0; */
  }

  .contents{
    display: flex;
    flex-wrap: wrap;
}

.contents > div {
    width: 24%;
    box-sizing: border-box;
    padding: 0;
}

@media  screen and (max-width: 430px) {
  .content .contents{
    display: block;
    flex-wrap: wrap;
    
  }
  .contents > div {
    width: 100%;
  }
}

/* modal */

#bg{
	position:fixed;
	left:0;
	top:0;
	height:100%;
	width:100%;
	background:rgba(0, 0, 0, .4);
}

#photo{
	position:fixed;
	top: 20%;
	left: 25%;
  margin: auto;
  /* height: 150%; */
	/* width: auto;
	height: 70%; */
}
#contents_page #photo img{
  /* margin-top: 12%;
  margin-left: 32%; */
  margin: 0;
  
}

@media screen and (max-width: 430px) {
  #photo{
    position:fixed;
    top: 20%;
    left: 9%;
    color: inherit;
    margin: auto;
    
    /* width: auto;
    height: 70%; */
  }
  #contents_page #photo img{
    /* margin-top: 12%;
    margin-left: 32%; */
    margin: 0;
    /* height: 150%; */
    mix-blend-mode: exclusion;
    
    /* size: 200%; */
    
    
  }
}

@media  screen and (max-width: 430px) {
  #photo img{
    display: block;
    /* margin-top: 65%;
    margin-left: 2%; */
    position: fixed;
    top: 35%;
    left: -5%;
    
    

    height: auto;
    width: 115%;
    flex-wrap: wrap;
    
  }
  #photo{

    width: 90%;
  }
  
}

/* detail.html */



.details .slide_cont{
  white-space: nowrap;
  width: 400px;
  height: 600px;
  overflow: hidden;
}
.details .slide_cont img{
  margin: 0;
  padding: 0;
  width: inherit;
  height: auto;
  border: none;
}
    
@keyframes slide_cont4 {
   0% { margin-left: 0; }
   33% { margin-left: -100%; }
   66% { margin-left: -200%; }
   100% { margin-left: -300%; }
  }

  .details .slide_cont >:first-child {
    animation-name: slide_cont4; /* キーフレーム使用 */
    animation-duration: 8s; /* アニメーション時間を5秒に設定 */
    animation-delay: 0s; /* アニメーション開始までの時間を0秒に設定 */
    animation-iteration-count: infinite; /* アニメーションをずっと続ける */
  }

  .details a img{
    
    width: 50%;
    height: 50%;
    flex-wrap: wrap;
  }

  @media screen and (max-width: 430px) {
    .details a img{
      width: 50%;
      height: 50%;
    }
  }

/* contact.html */

.content .contact{
    float: left;
    margin-right: 10px;
    flex-wrap: wrap;
}

.info{
  display: block;
  margin-bottom: 0;
}
.info li{
  float: none;
}
@media screen and (max-width: 430px) {
  .info li{
    font-size: 10.5px;
  }
  .contact {
    height: 30%;
  }
}

HTML CSSResult Skip Results Iframe
EDIT ON
.Form {
  margin-top: 80px;
  margin-left: auto;
  margin-right: auto;
  /* max-width: 720px; */
  width: 100%;
  
}
@media screen and (max-width: 480px) {
  .Form {
    margin-top: 40px;
  }
}

input, textarea{
  font-family: Segoe UI;
  
}

.Form-Item {

  /* padding-top: 24px; */
  padding-top: 15px;
  padding-bottom: 24px;
  width: 100%;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 480px) {
  .Form-Item {
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 0;
    padding-bottom: 16px;
    flex-wrap: wrap;
  }
  ul li{
    font-size: 11px;
  }
}
/* .Form-Item:nth-child(5) {

} */
.Form-Item-Label {
  width: 100%;
  max-width: 248px;
  letter-spacing: 0.05em;
  font-weight: bold;
  font-size: 18px;
  flex-shrink: 1;
}
@media screen and (max-width: 480px) {
  .Form-Item-Label {
    max-width: inherit;
    display: flex;
    align-items: center;
    font-size: 15px;
  }
}
.Form-Item-Label.isMsg {
  margin-top: 8px;
  margin-bottom: auto;
}
@media screen and (max-width: 480px) {
  .Form-Item-Label.isMsg {
    margin-top: 0;
  }
}
.Form-Item-Label-Required {
  border-radius: 6px;
  margin-right: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  width: 48px;
  display: inline-block;
  text-align: center;
  /* background: #545454; */
  color: red;
  font-size: 14px;
}
@media screen and (max-width: 480px) {
  .Form-Item-Label-Required {
    border-radius: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
    width: 32px;
    font-size: 10px;
  }
}
.Form-Item-Input {
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-left: 40px;
  padding-left: 1em;
  padding-right: 1em;
  height: 48px;
  /* flex:1 ; */
  width: 35vw;
  /* max-width: 410px; */
  background: #eaedf2;
  font-size: 18px;
}
@media screen and (max-width: 480px) {
  .Form-Item-Input {
    margin-left: 0;
    margin-top: 18px;
    height: 40px;
    flex: inherit;
    font-size: 15px;
  }
}
.Form-Item-Textarea {
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-left: 40px;
  padding-left: 1em;
  padding-right: 1em;
  height: 216px;
  /* flex: 1; */
  width: 63vw;
  /* max-width: 410px; */
  background: #eaedf2;
  font-size: 18px;
}

@media screen and (max-width: 480px) {
  .Form-Item-Textarea {
    margin-top: 18px;
    margin-left: 0;
    height: 200px;
    width: 63vw;
    flex: inherit;
    font-size: 15px;
  }
}
.Form-Btn {
  border-radius: 6px;
  margin-top: 32px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  width: 280px;
  display: block;
  letter-spacing: 0.05em;
  background: linear-gradient(#6795fd 0%, #67ceff 100%);
  /* color: #fff; */
  /* mix-blend-mode:exclusion; */
  font-weight: bold;
  font-size: 20px;
}
@media screen and (max-width: 480px) {
  .Form-Btn {
    margin-top: 24px;
    padding-top: 8px;
    padding-bottom: 8px;
    width: 160px;
    font-size: 16px;
  }
}

/* pagination */

.next.disable,
.prev.disable {
    pointer-events: none;
    background: #ddd;
    opacity: .6;
}
.pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.pagination p {
    border: 1px solid #ddd;
    padding: 5px 10px;
    margin: 0 5px;
    background: linear-gradient(#6795fd 0%, #67ceff 100%);
    /* color: #fff */
}
.next:hover, .prev:hover, .page_counter li:hover {
    cursor: pointer;
}
.page_counter {
    display: flex;
    list-style: none;
    padding-left: 0;
    margin: 0 10px;
}

.page_counter li {
    border: 1px solid #606060;
    padding: 7px 10px;
}

.page_counter li.current {
    background: #606060;
    /* color: #fff; */
}

.page_counter li + li {
    margin-left: 5px;
}

/* other.html */
#other .content{
  overflow: hidden;
  display: block;
}

.other_image a img{
  float: left;
  padding-right: 10px;
  padding-bottom: 2px;
  /* flex-wrap: wrap; */
}

@media screen and (max-width: 480px) {
  #other div p video {
    width: 100%;
  }
}

/* footer */

  #footer{
    height: 90px;
    padding-top: 0;
    padding-bottom: 0;
    width:100%;
    
    /* position: fixed;bottom: 0; */
    bottom: 0;
    position: fixed;bottom: 0;
    z-index: 100;
  }

  #footer ul{
    display: flex;
    overflow: hidden;
    list-style: none;
    margin-top: 0;
    margin-bottom: 0;
  }

  #footer ul li{
    /* float: left;
    display: flex; */
    justify-content: center;
    padding-top: 10px;
    width: calc(100%/5);
    text-align: center;
    font-size: 80%;
    font-weight: bold;
    display: inline-block;width: calc(100%/5);
    
  }

  #footer ul li a{
    text-decoration:none; 
    color: inherit;
    /* display: inline-block;width: 100%; */
    padding: 5px;
  }

  @media  screen and (max-width: 430px) {
    #footer ul{
      display: block;
      flex-wrap: wrap;
      
    }
    #footer  h1{
      display:none;
    }
  }

  .to_top a{
    text-decoration: none;
    color: inherit;
    position: fixed;right: 50px;bottom: 20px;
  }



  #footer small{
    font-size: 2px;
    padding-bottom: 0;
    margin-bottom: 0;
    margin: 0 auto;
    position: absolute;bottom: 2px;right: 30px;
  }

  img{
    height: 70vh;
    width: auto;
    flex-wrap: wrap;
  }