@charset "UTF-8";
@import url(modern-normalize.css);
@import url(bootstrap.min.css);
@import url(https://fonts.googleapis.com/css?family=M+PLUS+1p);
@import url(https://use.fontawesome.com/releases/v5.6.1/css/all.css);
@import url(https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css);
@import url(https:////netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
@import url(animsition/animsition.css);
@import url(animate.css);
/*-----CUSTOM CSS-------*/
@import url(mycss/myswiper.css);
@import url(mycss/mypagetop.css);
@import url(mycss/myhamburger.css);
@import url(mycss/myscrollani.css);
@import url(mycss/mytexteffect.css);
@import url(mycss/myloading.css);
/*delighter.js*/
/*----------------------------------------Bootstrap4初期設定------------------------------------------*/
.row {
  margin-right: -15px;
  /* ←マイナス側へ数値を大きくしてみよう */
  margin-left: -15px;
  /* ←マイナス側へ数値を大きくしてみよう */
  min-height: 100%;
}

/*----------------------------------------全体スタイル----------------------------------------------------*/
body {
  font-family: 'M PLUS Rounded 1c','Apple TP','Yu Gothic','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
  font-size: 110%;
}

/*  grained ノイズエフェクトを上層に設定  */
#addnoise::before {
  pointer-events: none;
  z-index: 3;
}

.bg {
  background-color: white;
}

.pwrap {
  overflow-wrap: break-word !important;
}

/*----------------------------------------navigation-----------------------------------------*/
#navmenu {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 0;
  height: 100px;
}
#navmenu.smaller {
  height: 80px;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}

.navbar-brand {
  /*LOGO*/
  margin-left: 25px;
}

img.mylogo {
  margin-left: 10%;
  height: 80px;
  width: auto;
  -webkit-transition: height .4s ease 0s;
  transition: height .4s ease 0s;
}
img.mylogo.smaller {
  height: 60px;
  width: auto;
}

.navbar-toggler {
  /*TOGGLE*/
  margin-right: 15px;
}

#navmenu {
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}
#navmenu:after, #navmenu.navbar-brand {
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}
#navmenu ul li {
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  padding-right: 80px;
  font-size: 110%;
  letter-spacing: 0.2em;
  font-weight: bold;
}
#navmenu ul li a {
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}

.sidenav {
  height: 90vh;
  width: 90%;
  text-align: center;
  padding: 80px 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

.sidenav a {
  color: gray;
  margin-bottom: 1em;
}

.sidenav a:hover {
  color: lightgray;
}

.sidenav .mycopyright {
  margin-top: 50px;
}

.nav-sns {
  margin: 0;
  padding-right: 10px;
}

.nav-sns .nav-link {
  text-align: right;
  padding: 0 5px 0 5px !important;
  display: inline-block;
}

.nav-sns a i {
  color: darkgray;
}

.topsnsicon {
  position: absolute;
  right: 60px;
}

/*-------------------------------------------------------*/
.instabtn {
  width: 100%;
  text-align: center;
  padding: 0 10px;
  letter-spacing: 5px;
}

.instabtn a {
  text-decoration: none;
  color: white;
  width: 100%;
  text-align: center;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}

.instabtn a:hover {
  font-size: scale(1.2);
  border-bottom: 3px solid white;
}

/*----------------------最初の画面高さのコンテナ------------------------*/
#top {
  width: 100%;
  height: auto;
  /*重要　高さをオートにすることによりＴＯＰコンテナ下の要素の高さが変わってもそれ以降の要素の位置も自動で合う*/
  margin-bottom: 50px;
}

/*--------------キャプション部分の表示位置をレスポンシブとデスクトップで別に設定する-----------*/
.caption {
  background-color: rgba(100, 100, 100, 0.7);
  padding: 1em;
  overflow: visible;
}

@media (min-width: 768px) {
  .caption {
    width: 90%;
    height: auto;
    position: absolute;
    bottom: 15px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}
@media (max-width: 768px) {
  .caption {
    position: absolute;
    overflow: hidden;
    bottom: 0;
    left: 0;
    width: 100%;
  }
}
.stitle {
  letter-spacing: 0.2em;
  width: 100%;
  text-align: center;
  cololr: darkgray;
}

.scomment {
  max-height: 90px;
  font-size: 95%;
  color: white;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sectitle {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: 0.7em;
  text-align: center;
  color: dimgray;
}

/*---------ABOUT----------*/
.aboutimage {
  width: 100%;
  padding: 10%;
}

.abouttitle {
  letter-spacing: 5px;
  width: 100%;
  text-align: center;
  cololr: darkgray;
}

@media (min-width: 768px) {
  .abouttext {
    font-size: 110%;
  }
}
@media (max-width: 768px) {
  .abouttext {
    font-size: 95%;
  }
}
.abouttext {
  margin-top: auto;
  margin-bottom: auto;
  vertical-align: middle;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0 10px;
}

/* -------------------CONTACT-----------------*/
#contact-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-center;
  width: 100%;
  margin-top: 50px;
  padding: 50px 0;
  background-color: lightgray;
}

/*form*/
#form {
  position: relative;
  width: 80%;
  text-align: center;
  margin: 0 auto 0 auto;
}

input {
  font-size: 0.875em;
  width: 100%;
  height: 50px;
  padding: 0px 15px 0px 15px;
  background: transparent;
  outline: none;
  color: dimgray;
  border: solid 2px dimgray;
  border-bottom: none;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
}

input:hover {
  background: white;
  color: gray;
}

textarea {
  width: 100%;
  height: 110px;
  max-height: 110px;
  padding: 15px;
  background: transparent;
  outline: none;
  color: dimgray;
  font-size: 0.875em;
  border: solid 2px dimgray;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
}

textarea:hover {
  background: white;
  color: gray;
}

#submit {
  padding: 0;
  margin: -5px 0px 0px 0px;
  font-size: 0.875em;
  color: gray;
  outline: none;
  cursor: pointer;
  border: solid 2px dimgray;
  border-top: none;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
}

#submit:hover {
  color: gray;
}

input::placeholder, textarea::placeholder,
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder,
input::-moz-placeholder, textarea::-moz-placeholder,
input::-ms-placeholder, textarea::-ms-placeholder {
  color: dimgray;
  font-size: 0.875em;
}

input:focus::placeholder, textarea::focus:placeholder,
input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder, input:focus::-moz-placeholder, textarea:focus::-moz-placeholder,
input:focus::-ms-placeholder, textarea:focus::-ms-placeholder {
  color: dimgray;
  font-size: 1em;
}

footer {
  padding: 4em;
  color: dimgray;
  font-size: 60%;
  background-color: lightgray;
}

.mycopyright {
  width: 100%;
  text-align: center;
  color: gray;
}

/*# sourceMappingURL=main.css.map */