@charset "utf-8";

/**************************************
■カスタム変数定義
**************************************/
:root {
  --block_margin_bottom: 40%;
  --h1_margin_bottom: 10%;
  --h2_margin_top: 40%;
  --h2_margin_bottom: 5%;
  --checkbox: 30px;
}

/**************************************
■アニメーション設定
**************************************/
@-webkit-keyframes base_color01 {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@-moz-keyframes base_color01 {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes base_color01 {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/**************************************
■背景・ヘッダー
**************************************/
/*body:before{
  content:"";
  display:block;
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100vh;
  background:url(img/bg_pc.jpg?1519) top center / cover no-repeat;
  background-size:cover;
}*/
/*@media screen and (min-width: 35.000em) {
  body:before{
    content:"";
    display:block;
    position:fixed;
    top:0;
    left:0;
    z-index:-1;
    width:100%;
    height:100vh;
    background-size:cover;
    background:url(../img/bg_pc.jpg?1519) top center / cover no-repeat;
  }
}
.css-selector {
  background: linear-gradient(270deg, #f7ede1, #83cbc4);
  background-size: 400% 400%;

  -webkit-animation: base_color01 4s ease infinite;
  -moz-animation: base_color01 4s ease infinite;
  animation: base_color01 4s ease infinite;
}*/
.css-selector {
  background: linear-gradient(270deg, #f7ede1, #83cbc4);
  background-size: 400% 400%;

  -webkit-animation: base_color01 4s ease infinite;
  -moz-animation: base_color01 4s ease infinite;
  animation: base_color01 4s ease infinite;
}
  
/**************************************
■初期設定
**************************************/
img{display: block;width: 100%;}
html {
  overflow: auto;
  scroll-behavior: smooth;
}


/**************************************
■メニュー
**************************************/
/* ロゴサイズ */
.logo {
  width: 60%;
  max-width: 100px;
}

header {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: start;
  /* header内の内側の余白 仮で入れてます */
  padding: 20px;
  /* headerの高さ　仮で入れてます */
  height: 80px;
  
}

/* ハンバーガーメニュー */
nav {
  display: block;
  background-color: #fff;
  padding-top: 80px;
  top: -1500px;
  right: 0;
  transition: all 0.1s;
  z-index: 10;
  opacity: 0;
}

.open nav {
  position: fixed;
  top: 0;
  opacity: 1;
}

nav .inner {
  padding: 20px;
  margin: 0 auto;
}

nav .inner ul {
  margin: 0;
  padding: 0;
}

.inner ul li {
  margin: 0;
  /* もしフォントサイズを変更する際は以下の数字を変更し、
  @media screen and (min-width: 35em)の中のheader ul li表記をアクティブにする */
  font-size: clamp(0.875rem, 1vw + 0.5rem, 1rem);
}

.inner ul li a {
  display: block;
  padding: 0.5rem;
}

header ul li a:hover {
  opacity: 0.5;
}

/* ハンバーガーメニューのアイコンについて */
.toggle-btn {
  display: block;
  position: fixed;
  top: 15px;
  right: 5%;
  width: 50px;
  height: 50px;
  z-index: 10;
  cursor: pointer;
}

.toggle-btn .toggle-close {
  position: absolute;
  display: block;
}

/* クリックするまでハンバーガーメニューopen時の画像は非表示 */
.toggle-btn .toggle-open {
  display: none;
}

/* クリックしたらハンバーガーメニューclose時の画像は非表示 */
.open .toggle-close {
  display: none;
}

/* クリックしたらハンバーガーメニューopen時の画像を表示 */
.open .toggle-open {
  display: block;
}

@media screen and (min-width: 35.000em) {
  header{padding: 20px 10%;}
  .toggle-btn{display: none;}
  nav{opacity: 1;padding-top: 0;}
  nav ul{display: flex;}
  nav .inner{padding: 0;}
}



/**************************************
■メイン枠
**************************************/
main{position: relative;width: 100%;max-width: 560px;margin: 0 auto; background-color: #fff;z-index: 0;}
@media screen and (min-width: 35.000em) {
  main{margin-top: 50px;border: double 5px #888;}
}


/**************************************
■メインvisual
**************************************/
#main_visual{margin-top: 0;}

@keyframes loop {
  0% {transform: translateX(100%);}
  to {transform: translateX(-100%);}}
@keyframes loop2 {
  0% {transform: translateX(0);}
  to {transform: translateX(-200%);}}
.loop_wrap {display: flex;width: 100%;height: 400px;overflow: hidden;}
.loop_wrap img {width: auto;height: 100%;}
.loop_wrap img:first-child {animation: loop 100s -50s linear infinite;}
.loop_wrap img:last-child {animation: loop2 100s linear infinite;}


/**************************************
■FOOTER
**************************************/
#about ul li{width: 60%;margin: 2% auto;}

/**************************************
■CONTACT
**************************************/
#contact{margin-bottom: 0;}
#contact ul{display: flex;justify-content: space-around;width: 50%;margin: 0 auto;}
#contact ul li{width: 40%;}
@media screen and (min-width: 35.000em) {
  #contact{padding-bottom: 10%;}
}


/**************************************
■FOOTER
**************************************/
footer{margin-top: 0; padding: 10% 0 5%; font-size: clamp(0.875rem, 1vw + 0.5rem, 1rem);}
footer *{text-align: center;}
footer strong{display: block;width: 30%;max-width: 150px; margin: 3% auto 0;}
@media screen and (min-width: 35.000em) {
  footer{padding: 2% 0 1%;margin-top: 5%;}
  footer p{margin: 2% auto;}
}