/*------------------------------------clearfix*/
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

.clearfix:before {
  content: "";
  display: block;
  clear: both;
}

.clearfix {
  display: block;
}

/*マウスポインタを表示*/
a {
  cursor: pointer;
}

/*------------------------------------body*/

/*---------------------------------container*/
#container {
  margin: 0px auto;
  background: rgb(255, 255, 255);
  font-size: 100%;
  width: 100%;
  max-width: 1500px;
  min-height: calc(100vh - 400px);
}

/*---------------------------------header*/
header {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-bottom: 30px;
}

h1 img {
  float: left;
  padding: 20px 50px 0px 50px;
}

h2 img {
  margin: 0px auto;
}

#navi {
  display: flex;
  flex-wrap: wrap;
  /*スマホ表示折り返し用なのでPCのみなら不要*/
  margin: 0;
  list-style: none;
  float: right;
  padding-right: 3em;
}

#navi li {
  float: left;
  margin: 30px 0px 5px 0;
}

.nav {
  color: #665647;
  font-weight: bold;
  text-decoration: none;
  display: block;
  padding: 10px 10px;
  position: relative;
}

#navi li a {
  color: #ff8000;
  font-weight: bold;
  text-decoration: none;
  display: block;
  padding: 10px;
  position: relative;
  /*線の基点とするためrelativeを指定*/
}

#navi li a:hover {
  cursor: hand;
}

#navi li a:hover,
#navi li .nav a {
  color: #777777;
}

#navi li a::after {
  content: "";
  position: absolute;
  /*絶対配置で線の位置を決める*/
  bottom: 0;
  left: 10%;
  /*線の形状*/
  width: 80%;
  height: 2px;
  background: #777777;
  /*アニメーションの指定*/
  transition: all 0.3s;
  transform: scale(0, 1);
  /*X方向0、Y方向1*/
  transform-origin: center top;
  /*上部中央基点*/
}

/*現在地とhoverの設定*/
#navi li.nav a::after,
#navi li a:hover::after {
  transform: scale(1, 1);
  /*X方向にスケール拡大*/
}

header .slider {
  clear: both;
  width: 100%;
}

header .slider img {
  clear: both;
  padding: 10px 0px;
  width: 100%;
  margin: 0 auto;
  display: block;
}

/*---------------------------------main*/
main {
  width: 100%;
  padding: auto;
}

#concept {
  width: 100%;
  line-height: 1.6em;
  font-family: serif;
  text-align: center;
}

#concept h3 {
  font-size: 130%;
  line-height: 1.6em;
  font-weight: bold;
  color: #2751aa;
  margin-top: 10px;
}

#concept p {
  font-size: 100%;
  color: #000000;
  line-height: 1.6em;
  padding-top: 15px;
}

#contact img {
  height: 350px;
  width: 190px;
}

.fadeIn {
  animation-name: fadeInAnime;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeInAnime {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/*---------------------------------maincontent*/
#maincontent {
  width: 100%;
}

.Video {
  width: 100%;
  position: relative;
  text-align: center;
  margin: 50px auto;
}

video {
  width: 90%;
}

#maincontent a img {
  padding: 60px 20px;
  transition-duration: 0.1s;
  transition-timing-function: ease;
}

#maincontent a:hover img {
  opacity: 0.6;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}

#maincontent a:link,
ul#list01 a:visited {
  text-decoration: none;
}

/*---------------------------------gallery*/
#gallery_wrapper {
  clear: both;
  width: 90%;
  margin: 0 auto;
  padding-top: 50px;
}

.sidenav {
  float: left;
  width: 160px;
}

.sidenav ul {
  list-style: none;
}

.sidenav li {
  font-size: 110%;
  line-height: 1.2em;
}

.sidenav li a {
  color: #666666;
  text-decoration: none;
  display: block;
  padding: 5px;
  border: #fff solid 1px;
}

.sidenav li a:hover {
  border: black 1px solid;
}

.sidenav .c2 {
  color: #f60;
  padding: 5px;
}

#contents {
  float: right;
  padding-bottom: 100px;
  width: calc(100% - 180px - 20px);
}

#contents img {
  width: 100vw;
  margin: 0px auto;
  padding-bottom: 50px;
}

.b1 {
  background-color: #fff;
  text-align: center;
}

.b2 {
  background: #fff;
  font-size: 9pt;
}

/*------------------------------------*/
#info_container {
  clear: both;
  width: 90%;
  margin: 0 auto 100px;
  padding-top: 50px;
}

#info_container .menu {
  font-size: 120%;
  font-weight: bold;
  color: #039;
  text-align: left;
  border-bottom: solid 2px #039;
  margin-top: 20px;
  margin-bottom: 20px;
}

#info_container ul li {
  padding-left: 60px;
  padding-bottom: 60px;
}

#privacy_container {
  width: 90%;
  text-align: left;
  margin-right: auto;
  margin-left: auto;
  padding-bottom: 100px;
}

.menu2 {
  font-weight: bold;
  margin-bottom: 20px;
  border-bottom: 1px solid #c03;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  margin-top: 20px;
}

#link dl {
  line-height: 2.5em;
}

#link dt {
  padding-top: 1em;
}

#link dd::before {
  content: "■　";
}

#privacy_container p {
  padding-top: 1em;
}

#privacy_container ul {
  list-style-type: disc;
  list-style-position: inside;
}

a.l1 {
  color: #333;
  text-decoration: none;
}

a.l1:hover {
  color: #ff6600;
  border-bottom: 1px solid #ff6600;
}

/*---------------------------------料金*/
#price {
  color: #666666;
  float: left;
  text-align: center;
  margin: 1em;
  border-right: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  border-collapse: collapse;
}

#price th {
  padding: 1.3em;
  background-color: #fffacd;
  border: 1px solid #cccccc;
}

#price td {
  padding: 1.3em;
  background-color: #fffce5;
  border: 1px solid #cccccc;
}

#info_container .t2 {
  clear: both;
  padding-left: 1em;
  font-size: 90%;
}

#info_container ul li {
  list-style: url(image/allow03-b-9px.gif) inside;
  line-height: 1.5em;
}

.sideL {
  border: 1px dashed #ccc;
  margin: 1em;
  padding: 2em;
  background-color: #eeeeee;
}

.t5 {
  color: #666;
  margin: 10px;
  padding: 0.5em 1em;
}

.menu3 {
  text-align: center;
  color: #000;
  font-weight: bold;
  margin-top: 30px;
  margin-right: 0;
  margin-bottom: 0;
  width: 100px;
}

#profile dl {
  padding-top: 1em;
}

#profile dt {
  float: left;
}

#profile dd {
  margin-left: 80px;
}

dl.faq dt {
  color: #fff;
  font-weight: bold;
  padding: 5px;
  background-color: #9c9c9c;
}

dl.faq dd {
  padding-top: 20px;
  padding-bottom: 50px;
}

/*---------------------------------wrokflow*/
#imgflow {
  float: right;
  width: 350px;
  padding-top: 40px;
  padding-right: 39px;
}

#flow {
  float: left;
  width: calc(100% - 350px - 30px);
}

#flow dl {
  border: 1px solid #999999;
  line-height: 1.5em;
  padding: 10px;
  margin-top: 20px;
  margin-bottom: 40px;
  margin-right: 50px;
}

#flow dt {
  color: #009900;
  font-weight: bold;
  font-size: 110%;
  margin-bottom: 0.8em;
}

#flow dd {
  margin: 0px;
  padding: 0px;
}

.c7 {
  color: red;
}

/*---------------------------------footer*/
footer {
  clear: both;
  width: 100%;
  color: #fff;
  background-color: #808080;
  height: 400px;
  padding: 50px;
}

footer .info {
  padding-bottom: 20px;
  font-size: 120%;
}

.footerleft .info img {
  width: 250px;
  display: block;
}

.mail a {
  width: 260px;
  padding: 15px;
  color: #ffffff;
  font-size: 15px;
  line-height: 120%;
  text-align: center;
  text-decoration: none;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  background: #FF9C15;
  display: block;
  position: relative;
  -webkit-transition: 0.3s ease-out;
  -moz-transition: 0.3s ease-out;
  -o-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}

.mail a::before {
  content: '';
  width: 16px;
  height: 16px;
  margin: -8px 0 0 0;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background: #fff;
  position: relative;
  position: absolute;
  top: 50%;
  left: 20px;
  display: block;
}

.mail ::after {
  content: '';
  width: 4px;
  height: 4px;
  border: 0px;
  margin: -3px 0 0 0;
  border-top: solid 2px #FF9C15;
  border-right: solid 2px #FF9C15;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  left: 24px;
  display: block;
  -webkit-transition: 0.3s ease-out;
  -moz-transition: 0.3s ease-out;
  -o-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}

.mail a:hover {
  background: #FFAF42;
}

.mail a:hover::after {
  border-top: solid 2px #FFAF42;
  border-right: solid 2px #FFAF42;
}

.footerright a {
  color: #fff;
  text-decoration: none;
  padding: 0 15px 0 0;
}

.footerright a:hover {
  color: rgb(3, 0, 190);
}

.footerright {
  text-align: center;
  line-height: 2em;
  padding-top: 50px;
  bottom: 0;
  /*下に固定*/
}

.copylight {
  color: #fff;
  font-size: 90%;
}