
/* common */
@charset "UTF-8";

html{
  min-width: 1220px;
  margin-inline: auto;
}

body{
  font-family: "Yu Mincho", "YuMincho", serif;
  color:#351414;
  background-color: #faf0f0;
  font-size: 15px;
  letter-spacing: 2px;
}

section{
  width: 1200px;
  margin: 0 auto;
  margin-inline: auto;
}

a{
  color:#494646;
  text-decoration:none;
}

a:hover{color:#25647a;}

.link{
  text-decoration:underline;
  color: #525FB6;
  font-weight:bold;
}

img{
  border:none;
  vertical-align:bottom;
}

.imgArea img{width:100%;}

.twoClm .clmR{float:right;}
.twoClm .clmL{float:left;}

.clear::after{
  content:"";
  display:block;
  clear: both;
  height:0;
}

.tbl{width:100%;}

.tbl tr{border-bottom: 2px dotted #dadada;}

.tbl tr th{
  width:200px;
  padding:10px 0;
  vertical-align:top;
  line-height:1.8;
}

.tbl tr td{
  padding:10px 0;
  line-height:1.8;
}

.tbl tr:first-child th{padding:0 0 10px;}
.tbl tr:first-child td{padding:0 0 10px;}
.tbl tr:last-child th{padding:10px 0 0;}
.tbl tr:last-child td{padding:10px 0 0;}
.tbl tr:last-child{border-bottom:none;}

.flex{display:flex;}

.fixed{
  position:fixed; 
  top:0;
  padding:0;
  width:100%;
  z-index:1000;
}

p{line-height:1.8;}

.borderB{border-bottom:1px solid #dadada;}

.hide{display:none;}

.pc{display:block!important;}
.sp{display:none!important;}

.show{display:block;}

.indentLst {
    text-indent: -1em;
    padding-left: 1.5em;
}

@media only screen and (max-width: 640px){

  html{
    min-width:320px;
    max-height:100vh ;
  }

  body{
    min-width:320px;
    font-size: 13px;
    min-height: 100vh;
  }

  section{
    width:auto;
    min-width: 320px;
    padding:0 20px;
  }

  .tbl{font-size:12px;}

  .tbl tr th{
    width:100px;
    padding: 10px 10px 10px 0;
  } 

  .pc{display:none!important;}
  .sp{display:block!important;}

  .flex{display: block !important;}
}


/* =================================================================================
 Fade-in
================================================================================= */

.fade-in {
  animation-name: fadein;
  animation-duration: 2s;
}

@media only screen and (max-width: 640px){
  
  .fade-in {
    animation-name: fadeinsp;
  }
  

}

@keyframes fadein {
  from {
    opacity: 0;
    left: 50%;
    top: 45%;
    transform: translate(-50%,-60%);
  }
  to {
    opacity: 1;
    left: 50%;
    top: 45%;
    transform: translate(-50%,-50%);
  }
}


@keyframes fadeinsp {
  from {
    opacity: 0;
    left: 50%;
    top: 55%;
    transform: translate(-50%,-60%);
  }
  to {
    opacity: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }
}

.fade-out {
  animation-name: fadeout;
  animation-duration: 3s;
}

@keyframes fadeout {

  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    background:
    linear-gradient(currentColor 0 0) 0    100%/var(--d, 0) 1px no-repeat,
    linear-gradient(currentColor 0 0) 100% 100%/var(--d, 0) 1px no-repeat;
  }
}

/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/

.scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}

.scroll_up.on, .scroll_up_1.on {
  transform: translateY(0);
  opacity: 1.0;
}

@media only screen and (max-width: 640px){

.scroll_up {
  transform:none;
  opacity: 1;
}

}


