@charset "utf-8";

html {
  scroll-behavior: smooth;
  scroll-padding-top: 15px;
}

body {
  font-size: 62.5%;
  font-family: "vdl-yotag", sans-serif;
  font-weight: 500;
  font-style: normal;
}

header {
  margin: 50px;
}

header img {
  width: 95%;
  height: auto;
}

/* -------------------------- */

.pagetop {
  cursor: pointer;
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: auto;
  border-radius: 50%;
  transition: .3s;
  color: #fcfdfe;
  z-index: 500;
  /*   デフォルトは非表示 */
  opacity: 0;
}

.pagetop:hover {
  box-shadow: 0 0 10px #ffffff;
}

/* ---------------------------- */

.generation img {
  width: 130px;
  height: auto;
  box-shadow: 8px 8px 9px -8px rgba(0, 0, 0, 0.3);
  transition: .3s;
}

.generation img:hover {
  box-shadow: none;
  opacity: .8;
}


/* ------------------- */


.y1940s {
  background-image: url(./images/1940.jpg);
  background-size: cover;
  background-position: 10% 35%;
  background-color: rgba(255, 255, 255, 0.8);
  background-blend-mode: lighten;
  padding-top: 20px;
  padding-bottom: 20px;
  width: 100%;
  margin-bottom: 20px;
}

.y1960s {
  background-image: url(./images/1960.jpg);
  background-size: cover;
  background-position: 10% 35%;
  background-color: rgba(255, 255, 255, 0.8);
  background-blend-mode: lighten;
  padding-top: 20px;
  padding-bottom: 20px;
  width: 100%;
  margin-bottom: 20px;
}

.y1940simg {
  display: flex;
  justify-content: space-around;
}

.y1940s p {
  font-family: "kinkakuji", sans-serif;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 3px;
  font-size: 25px;
  margin-left: 30px;
  margin-bottom: 10px;
}

.y1960simg {
  display: flex;
  justify-content: space-around;
}

.y1960s p {
  font-family: "ab-lineboard-bold", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 25px;
  margin-left: 30px;
  margin-bottom: 10px;
}

/* --------------------- */

.y1970s {
  background-image: url(./images/1970.jpg);
  background-size: cover;
  background-position: 10% 35%;
  background-color: rgba(255, 255, 255, 0.8);
  background-blend-mode: lighten;
  padding-top: 20px;
  padding-bottom: 20px;
  width: 100%;
  margin-bottom: 20px;
}

.y1970simg {
  display: flex;
  overflow-x: scroll;
}


.y1970simg::-webkit-scrollbar {
  width: 7px;
  height: 5px;
}

.y1970simg::-webkit-scrollbar-thumb {
  border-radius: 0.25em;
  background-color: #8f767182;
}


.y1970s a {
  flex-shrink: 0;
  margin: 0 13px 0 13px;
}

.y1970s p {
  font-family: "ab-tombo-bold", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 25px;
  letter-spacing: 3px;
  margin-left: 30px;
  margin-bottom: 10px;
}

/* --------------------- */


.y1980s {
  background-image: url(./images/1980.jpg);
  background-size: cover;
  background-position: 10% 35%;
  background-color: rgba(255, 255, 255, 0.8);
  background-blend-mode: lighten;
  padding-top: 20px;
  padding-bottom: 20px;
  width: 100%;
  margin-bottom: 20px;
}

.y1980simg {
  display: flex;
  overflow-x: scroll;
}

.y1980simg::-webkit-scrollbar {
  width: 7px;
  height: 5px;
}

.y1980simg::-webkit-scrollbar-thumb {
  border-radius: 0.25em;
  background-color: #8f767182;
}

.y1980s a {
  flex-shrink: 0;
  margin: 0 13px 0 13px;
}

.y1980s p {
  letter-spacing: 3px;
  font-size: 25px;
  margin-left: 30px;
  margin-bottom: 10px;
}

:target {
  background: linear-gradient(transparent 10%, #e8e87c50 50%);
  width: 60%;
}

/* --------------------- */

.genderbutton {
  width: 90%;
  margin: 0 auto;
  font-size: 17px;
  display: flex;
  justify-content: space-between;
}

.genderbutton a {
  background-color: #fff;
  padding: 20px;
  width: 30%;
  text-align: center;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: all 0.2s ease-in;
}

.genderbutton a::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scaleY(1) scaleX(1.25);
  top: 100%;
  width: 140%;
  height: 180%;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}
/* ------------------------------- */


.genderbutton a::after {
  content: "";
 position: absolute;
 left: 55%;
 transform: translateX(-50%) scaleY(1) scaleX(1.45);
 top: 180%;
 width: 160%;
 height: 190%;
 border-radius: 50%;
 display: block;
 transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
 z-index: -1;
}

.genderbutton #g1::after {
  background-color: #21ae4e24;
}
.genderbutton #r1::after {
  background-color: #ae213624;
}
.genderbutton #b1::after {
  background-color: #2165ae24;
}


/* ---------------------------------- */


.genderbutton a:hover::before {
  top: -35%;
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

.genderbutton #g1:hover::before {
  background-color: #21ae4e24;
}
.genderbutton #r1:hover::before {
  background-color: #ae213624;
}
.genderbutton #b1:hover::before {
  background-color: #2165ae24;
}


/* --------------------------------------- */


.genderbutton a:hover::after {
  top: -45%;
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

.genderbutton #g1:hover::after {
  background-color: #21ae4e24;
}
.genderbutton #r1:hover::after {
  background-color: #ae213624;
}
.genderbutton #b1:hover::after {
  background-color: #2165ae24;
}

/* ------------------------------------------ */


#g1, .g2 {
  border: 2px solid #21AE4D;
}

#r1, .r2 {
  border: 2px solid #CE1826;
}

#b1, .b2 {
  border: 2px solid #06A4E9;
}

/* --------------------- */

.click {
  width: 90%;
  margin: 0 auto;
  margin-top: 30px;
  font-size: 16px;
}

.mix {
  background-image: url(./images/mix.jpg);
  background-size: contain;
  padding: 10px;
  width: 90%;
  margin: 0 auto;
  background-repeat: repeat-y;
}

.woman {
  background-image: url(./images/woman.jpg);
  background-size: contain;
  padding: 10px;
  width: 90%;
  margin: 0 auto;
  background-repeat: repeat-y;
}

.man {
  background-image: url(./images/man.jpg);
  background-size: contain;
  padding: 10px;
  width: 90%;
  margin: 0 auto;
  background-repeat: repeat-y;
}

/* --------------------- */

.boxs {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  margin: 0 auto;
  margin-bottom: 20px;
  justify-content: space-around;
}

.box {
  background-color: #F5F5F5;
  width: 48%;
  text-align: center;
  margin-bottom: 10px;
}

.box div {
  background-image: url(./images/1960clear.jpg);
  background-size: cover;
  background-position: 10% 35%;
width: 90%;
font-size: 15px;
margin:  0 auto;
margin-top: 20px;
line-height: 2;
}

.box .s40{
  border: 1px solid #9a5cad;
  font-family: "kinkakuji", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.box .s60{
  border: 1px solid #445148;
  font-family: "ab-lineboard-bold", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.box .s70{
  border: 1px solid #c18b15;
  font-family: "ab-tombo-bold", sans-serif;
  font-weight: 400;
  font-style: normal;

}

.box .s80{
  border: 1px solid #e64242;
}


.box img {
  width: 200px;
  height: auto;
  margin-top: 20px;
  box-shadow: 8px 8px 9px -8px rgba(0, 0, 0, 0.3);
  transition: .3s;
}

.box img:hover {
  box-shadow: none;
  opacity: .6;
}

h2 {
  font-size: 16px;
  margin-top: 10px;
  margin-bottom: 10px;
}

dd {
  background-color: #fff;
  border: 1px solid #000;
  width: 90%;
  margin: 0 auto;
  font-size: 15px;
}

dt {
  font-size: 15px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.online {
  width: 100%;
  text-align: center;
}



a.to_online {
  position: relative;
  border-bottom: 1px solid #614028;
  line-height: 4;
  font-size: 14px;
  color: #614028;
}

a.to_online img {
  width: 16px;
  margin: 5px 5px 0 5px;
  height: auto;
}

a.to_online:hover {
  color: #fff;
  border-bottom: 1px solid #fff;
}

/* ----------------------- */
/* フェードイン(初期値) */
.fade-up {
  opacity: 0;
  /* 最初は非表示 */
  /* transform: translateY(30px); */
  /* 下に30pxの位置から */
  transition: opacity 2s, transform 2s;
  /* 透過率と縦方向の移動を0.8秒 */
}

/* フェードイン(スクロールした後) */
.fade-up.is-inview {
  opacity: 1;
  /* 表示領域に入ったら表示 */
  /* transform: translateY(0); */
  /* 30px上に移動する */
  transition-delay: 0.2s;
  /* フェード開始を0.5秒遅らせる */
}
/* ------------------------------------ */

.mb {
  display: none;
}

@media screen and (max-width:800px) {

  header {
    margin: 30px;
  }

  h1 img {
    display: none;
  }

.mb {
  display: block;
  width: 100%;
}
.boxs {
  display: block;
}

.box {
  width: 90%;
  margin: 10px auto;
}

}

@media screen and (max-width:600px) {
  .generation img {
    width: 100px;
  }

  .pagetop {
    width: 65px;
    
  }
}
/* 
font-family: "vdl-yotag", sans-serif;
font-weight: 500;
font-style: normal;
font-family: "ab-tombo-bold", sans-serif;
font-weight: 400;
font-style: normal;
font-family: "ab-lineboard-bold", sans-serif;
font-weight: 400;
font-style: normal;
*/