@charset "UTF-8";
/* CSS Document */
#fam.top { background-color: #EFF0F0;}
.outer {
  position: relative;
  width: calc(100% - 20em);
  max-width: 70%;
  height: 40vw;
  max-height: 600px;
  background-color: #C5B39D;
}
.black{
  position:absolute;
  right:-230px;
  bottom:0;
  font-size:150px;
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  color:#C5B39D;
  z-index:-1;
  line-height: 1;
}
.white{
  position:relative;
  width:100%;
  height:40vw;
  max-height: 600px;
  overflow:hidden;
}
.white::after{
  position:absolute;
  right:-230px;
  bottom:0;
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  content:"Fam?";
  white-space: pre;
  font-size:150px;
  color:#e6e6e6;
  z-index:1;
  line-height: 1;
}
.tit_bg { background: url(../img/bg.jpg)no-repeat;
  background-position: bottom center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  background-size: cover;
  filter: blur(1px) opacity(70%) sepia(100%);
}

.list { width: 48%; margin: 100px 0 0 auto; padding: 50px 5%; background-color: rgba(197,179,157,0.7); box-sizing: border-box;}
.list dt { font-size: 16px; font-family: 'Zen Kaku Gothic Antique', sans-serif;}
.list dd ul { display: flex; flex-wrap: wrap;}
.list dd ul li { padding: 0 10px 0 0;}
.list dd ul li:last-of-type { padding: 0;}
.list a { color: #3B3717;}
.list a:hover { color: #00A99D;}

.list:nth-of-type(odd) { margin: 50px auto 0 0;}
.list dl.short { display: flex; align-items: flex-end;}
.list dl.short dt { padding: 0 10px 0 0;}

@media screen and (max-width: 600px){
  .outer { width: calc(100% - 12em); height: 47vw;}
  .white { height: 47vw;}
  .white::after,.black { font-size: 80px; right: -130px;}
  .list { width: 80%; margin: 30px 0 0 auto;}
  .list:nth-of-type(odd) { margin: 30px auto 0 0;}
}


/* モーダル */
body.open{
  overflow-y:hidden;
}

/* ボタン */
.button {
  color: #00A99D;
  display: block;
  padding: 0 20px;
  margin: 50px auto 0;
  border: none;
  font-size: 18px; font-family: 'Zen Kaku Gothic Antique', sans-serif;
  transition: color 1.5s;
}

.button:hover {
  color: #3B3717;
  cursor: pointer;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  height: 100vh;
  height:100dvh;
  width: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5);
  
}
.modal-inner{
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}
.modal-content {
  background-color: #f4f4f4;
  width: 50%;
  min-width: 500px;
  box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2),0 7px 20px 0 rgba(0,0,0,0.17);
  animation-name: modalopen;
  animation-duration: 1s;
}

@keyframes modalopen {
  from {opacity: 0}
  to {opacity: 1}
}

.modal-header h2 {
  width: 100%;
  font-size: 18px; font-family: 'Zen Kaku Gothic Antique', sans-serif;
  display: flex; align-items: center;
}

.modal-header {
  background: #00A99D;
  color: #fff;
  padding: 3px 15px;
  display: flex;
  justify-content: space-between;
}

.modalClose {
  margin: 0 0 0 auto;
}

.modalClose:hover {
  cursor: pointer;
}

.modal-body {
  padding: 30px 5%;
  color: black;
}

.modal-body dl { margin: 30px 0 0; color: #9a9a9a;}

.modal-body ul li::before { content: "・";}
.modal-body ul li li::before { content: "→";}
.modal-body ul li { padding-left: 1em; text-indent: -1em;}

@media screen and (max-width: 600px){
  .button { margin: 30px auto 0;}
  .modal-content { width: 92%; min-width: inherit;}
}