@charset "utf-8";

.for_pc {
  display: none;
}

.for_sp {
  display: block;
}

.kv_sub_title2 .for_pc {
  display: none !important;
}

body {
  margin: 0;
  /*font-family: "Yu Gothic", Yu Gothic, "游ゴシック", "Yu Minch", Yu Minch, "游明朝", "メイリオ", Meiryo, "Meiryo", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Sans", sans-serif;*/
  font-family: 'Noto Sans JP', sans-serif;
  background-color: #FAEFEF;
}

picture img {
  width: 100%;
  height: auto;
  display: block;
}

#wrapper, .kv_img, section.features {
  width: 100%;
  margin: 0 auto;
}

/* ---------------------------
header
----------------------------*/
header {
  background-color: #fff;
}

#header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px auto;
  margin: 0 auto;
  padding: 20px 0;
}
#header div.img,#header div.text {
  padding: 0 5px;
}

  #header .img img {
    width: 100%;
  }

#header div.text {
  border-left: 2px #99292e solid;
  width: 100%;
}

#header div.text div:first-child{
  color: #99292e;
  font-size: 3.4vw;
  font-weight: bold;
  letter-spacing: -1px;
}

#header div.text div:nth-child(2){
  color: #d1b100;
  font-size: 4.5vw;
  font-weight: bold;
  letter-spacing: -1.5px;
  text-shadow: 1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, -1px -1px 1px #000, 1px 0px 1px #000, 0px 1px 1px #000, -1px 0px 1px #000, 0px -1px 1px #000;
  line-height: 1.2;
}

#wrapper {
  background: #fff;
}
#inner{ padding: 0 5% 10% 5%;}


@media screen and (min-width:768px) {
  
  .for_pc {
    display: block;
  }

  #header div.img,#header div.text span.for_pc{
    display: inline;
  }

  .kv_sub_title2 .for_pc {
    display: inline-block!important;
  }

  .for_sp {
    display: none;
  }

  body {
    margin: 0;
    /*font-family: "Yu Gothic", Yu Gothic, "游ゴシック", "Yu Minch", Yu Minch, "游明朝", "メイリオ", Meiryo, "Meiryo", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Sans", sans-serif;*/
    font-family: 'Noto Sans JP', sans-serif;
    background-color: #FAEFEF;
  }

  #wrapper, .kv_img, section.features {
    max-width: 980px;
    min-width: 980px;
    margin: 0 auto;
  }
  header {
    background-color: #fff;
  }

  #header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto;
    margin: 0 auto;
    padding: 20px 0;
  }
  #header div.img,#header div.text {
    padding: 0 30px 0 10px;
  }

    #header .img img {
      width: 100%;
    }

  #header div.text {
    border-left: 5px #99292e solid;
    width: auto;
  }

  #header div.text div:first-child{
    color: #99292e;
    font-size: 1.5em;
    font-weight: bold;
    letter-spacing: 1px;
  }

  #header div.text div:nth-child(2){
    color: #d1b100;
    font-size: 1.2em;
    font-weight: bold;  
    letter-spacing: 1px;
  }
}


h1{
  margin:0;
}

/* ---------------------------
tax
----------------------------*/
#tax{
  margin: 10% 0;
  border: #594b1b 3px solid; 
}
#tax h2{
  background: #594b1b;
  margin: 0;
  padding:3% 10%;
}
#taxInner{ padding: 5%;}
#tax .catch{ width: 85%; margin: 0 auto 2rem auto;}
#tax .tableHead{width: 90%; margin: 0 auto 1% auto;}
@media screen and (max-width:768px) {
  #tax .tableHead{width: 65%; margin: 0 auto 2% auto;}
}


#taxCard{
  display: flex;
  text-align: center;
  justify-content: center;
}
#cardAs{
  width: 45%;
  display: flex;
  flex-direction: column; 
  border: 1px solid #c5bda5;
  box-sizing: border-box;
  background-color: #f6f1dd;
  
  margin-right: 2%;
}
#cardSplit{
  width: 45%;
  display: flex;
  flex-direction: column; 
  border: 1px solid #c5bda5;
  box-sizing: border-box;
  background-color: #fdf0dd;  
}
#taxCard .head{
  padding: 0 10px;                      
  display: flex;
  min-height: 5rem;
  align-items: center;          
  justify-content: center;  
  text-align: center;
  font-weight: 700;
}
#cardAs .head{
 background-color: #d8cda9; 
}
#cardSplit .head{
 background-color: #f6c896; 
}

#taxCard .head h4{
  font-size: 22px;
  margin: 0;
}
@media screen and (max-width:768px) {
  #taxCard .head h4{
    font-size: clamp(13px ,2.9vw ,22px);
  }  
}

#taxCard .cardSection{
  border-top: 16px #fff solid;
  padding: 4% 4% 0 4%;
}

#taxCard .cardFirst{
  min-height: 8.5rem;
}
@media screen and (max-width:768px) {
#taxCard .cardFirst{
  min-height: 8rem;
}  
}

#taxCard .cardSecond{
  min-height: 11rem;
}
@media screen and (max-width:768px) {
#taxCard .cardSecond{
  min-height: 10rem;
}  
}

#taxCard .cardLabel{
  width: 92%;
  margin: 0;
  background-color: #fff;
  border: 2px solid #e3d6ae;
  padding: 2%;
  text-align: center;
  font-weight: 700;
  margin-bottom: 18px;  
}
#taxCard .cardLabel h5{
  font-size: 18px;
  margin:0;
}
@media screen and (max-width:768px) {
  #taxCard .cardLabel h5{
    font-size: clamp(13px ,2.3vw ,18px);
  }  
}
#taxCard .accent{
  font-size: 22px;
  color: #e53323;
}
@media screen and (max-width:768px) {
#taxCard p{
  font-size: clamp(13px ,2.1vw ,16px);
}  
#taxCard .accent{
  font-size: clamp(15px ,2.9vw ,22px);
}  
}


#taxCard small{
  font-size: 0.95rem;
  color:#000;
}
@media screen and (max-width:768px) {
#taxCard small{
  font-size: clamp(11px ,1.8vw ,14px);
}  
}

#tax .footNote{
  width: 86%;
  margin: 1rem auto 0 auto;
  font-size: 14px;
  text-indent: -1em;
  padding-left: 1em;
}
@media screen and (max-width:768px) {
#tax .footNote{
  font-size: clamp(11px ,1.8vw ,14px);
}  
}

#tax .footNote::before {
	content: "※"
}
/* ---------------------------
merit
----------------------------*/
#merit{
  margin: 10% 0;
  border: #594b1b 3px solid; 
}
#merit h2{
  background: #594b1b;
  margin: 0;
  padding:3% 10%;
}
#merit ul{
  width: 60%;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
@media screen and (max-width:768px) {
  #merit ul{
    width: 80%;
  }  
}

#merit ul li{
  margin-top: 10%;
}

#merit .footCatch{
  width: 60%;
  margin: 10% auto;  
}
@media screen and (max-width:768px) {
#merit .footCatch{
  width: 80%;
}  
}

/* ---------------------------
priceList
----------------------------*/
#priceList{
  margin: 10% 0;
  border: #594b1b 3px solid; 
}
#priceList h2{
  background: #594b1b;
  margin: 0 0 10% 0;
  padding:3% 40%;
}

#priceList .list{
  position: relative;
  width: 60%;
  margin: 5% auto;
  padding: 5%;
  border: #594b1b 2px solid;   
}
@media screen and (max-width:768px) {
#priceList .list{ width: 85%;}  
}



#priceList .list h3{
  position: absolute;
}
#list-gold h3{
  width: 10%;
  left: 50%;
  top: -3%;
  transform: translate(-50%, -50%);
}
#list-platinum h3{
  width: 32%;
  left: 48%;
  top: -4%;
  transform: translate(-50%, -50%);
}
#priceList .list .section-title{
  width: 55%;
  margin: 1rem auto;
}
.table-card table{
  width: 100%;
  margin-bottom: 10%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 18px;
  line-height: 1.6;  
}
@media screen and (max-width:768px) {
.table-card table{
  font-size: clamp(12px ,2.1vw ,16px);  
}  
}


.table-card table th{
  padding: 2% 1%;
  border-left: 1px solid #b79a4e;
  border-bottom: 2px solid #b79a4e;
  background-color: #c8be9e;
  font-weight: 700;
  text-align: center;
}
.table-card table th:first-child{ border-left: none;}
.table-card table td{
  padding: 2% 1%;
  border-left: 1px solid #b79a4e;
  background-color: #edeadd;
  text-align: center;
}
.table-card table td:first-child{ border: none;}
.table-card table tbody tr th,
.table-card table tbody tr:not(:last-child) td {
  border-bottom: 2px solid #b79a4e;
}
#priceList h4{ 
  width: 60%;
  margin: 0 auto;
}
#priceList .footNote{
  color:#594b1b;
  text-align:center; 
}

/* ---------------------------
entry
----------------------------*/
#entry{
  margin: 10% 0;
  border: #594b1b 3px solid; 
}
#entry h2{
  background: #594b1b;
  margin: 0 0 0 0;
  padding:3% 30%;
}
#entry ul{
  width:65%;
  margin: 10% auto 5% auto;
  padding :0;
  list-style: none;
}
#entry ul li{
  margin: 0 auto 10% auto;
}
#entry ul li:nth-child(2),
#entry ul li:nth-child(5)
{
  width: 85%;
}
#entry ul li:nth-child(3),
#entry ul li:nth-child(4)
{
  width: 80%;
}
@media screen and (max-width:768px) {
#entry ul li:nth-child(2){
  width: 100%;
}
  
  
#entry ul li:nth-child(5)
{
  width: 80%;
}  
}
#entry .attTxt{ 
	width: 90%;
	margin: 0 15% 5% 15%;
	color:#594b1b;
}
@media screen and (max-width:768px) {
#entry .attTxt{ 
	width: 90%;
	margin: 0 10% 5% 10%; 
}
}
/* ---------------------------
footer
----------------------------*/


footer {
  background-color: #99292e;
  padding: 20px 0;
}

.footer_inner {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

footer div.logo {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

footer div.link {
  width: 100%;
}

footer ul{
  list-style-type: none;
  padding: 0;
  display: flex;
  justify-content: center;
  margin: 10px;
  width: 95%;
}

footer ul li{
  width: 26%;
   padding-left: 10px;
  margin: 10px auto;
  font-size: 0.95em;
  color: #fff;
}

footer ul li a{
  color: #fff;
  text-decoration: none;
}

footer ul li:nth-child(2), footer ul li:nth-child(3){
  border-left: 1px solid #fff;
}


@media screen and (min-width:450px) {
footer {
  background-color: #99292e;
  padding: 20px 0;
}

.footer_inner {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}

footer div.logo {
  width: 242px;
  display: flex;
  align-items: center;
  justify-content: right;
}

footer div.link {
  width: 82%;
  display: flex;
  align-items: center;
  justify-content: left;
}
  
footer ul{
  list-style-type: none;
  padding: 0;
  display: flex;
  justify-content: space-around;
  margin: 10px;
  width: 100%;
}

footer ul li{
  width: 33%;
  margin: 0;
  font-size: 1.3em;
  text-align: center;
  color: #fff;
}

footer ul li a{
  color: #fff;
  text-decoration: none;
}

footer ul li:nth-child(2), footer ul li:nth-child(3){
  border-left: 3px solid #fff;
}
}