html {
   font-size: 62.5%;
   font-family:  "ヒラギノ角ゴ Pro W3";
   word-break: break-all;/*テキスト　エリア内で折り返す*/
  
  }
  body {
  max-width: 800px;
   margin:auto;
   font-size: 1.5rem;
   background-color: #fcfcfc;
  }
  .body-in{
    width: 100%;
    background-color: #fff5c8;
  }
  .today_date {
    color: #002228;
    /* background-color: #fdf919; */
    /* width: 95%; */
    text-align: right;
}
.privacy_main{
  margin: 8px;
 }

.privacybox{
  display: flex;
  justify-content: center;
  align-items: center;
 }
   
     /********* privacy*******/  
 .eonbox{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
 }
  
   
    /********* タイトル********/  
   .titlebox{
   
    display: flex;
   }
   .titlebox_title{
   /* background-color: #f6fa7d;*/
    width:75%;
  }
  .titlebox_title h3{
    text-align: left;
  margin: 0px;
padding: 0px;
}
.titlebox_title h5{
  text-align: left;
  margin: 0px;
padding: 0px;
font-size: 1.1em;
}
   .titlebox_icon{
   text-align: center;
    /*background-color: #d87a21;*/
    width:25%;
  }
  .titlebox_icon img{
    width: 60%;
   }
  
/******** 表紙画像とバッジ    *******/
  .gazoubox{
    
    margin: auto;
    text-align: center;
       width:60%;

   
  }
  .gazoubox img{
    width: 100%;
   }
 
   .budgebox-oya{
    display: flex;
    
  }
  .budgebox{
   display: flex;/*子要素のimgを中央揃え*/
    justify-content: center;/*子要素のimgを中央揃え*/
     margin: auto;
     width:48%;
     /*background-color: #067c00;*/
   }
   .budgebox img{
    width:240px;
     height: auto;
    }
  
 
 
 
 
 
 
 
   .budge-container {
    display: flex;
    justify-content: space-evenly; /* 子要素を均等に配置します */
    align-items:stretch; /* 子要素を縦方向の中心に揃えます */

}








.budge-container img {
  width: 180px;
   /* height: 50px;*/
    object-fit: contain;
  max-width: 40%; /* 画像の最大幅を設定します */
    height: auto; /* 画像の縦横比を維持します */
} 
/***************説明  description*************************/
.description{
 

  text-align: left;
 margin: auto;
  padding-left: 1%;
  padding-right: 1%;
  background-color: #ffffff;
 /* display: flex;*/
  /*justify-content: space-evenly;*/
  width: 96%;
  
}
.description_inner{
 /* background-color: #ffffff;*/
  display: flex;
 margin: auto;
width: 96%;
}
.description_inner img{
 margin: 10px;
  width: 30%;
  border: solid 2px #777777;
}
.description_inner p{
 margin-left: 10px;
 font-size: 1.2em;
  width: 70%;
}
.description h3{
  /*background-color: #6ef8b1;*/
  text-align: center;
  width: 100%;
  font-weight: bold;
}
.description h4{
 
 padding-left:4%;
  text-align: left;
  width: 100%;
  font-weight: bold;
}


  .container {
  display: flex;
  flex-wrap:  wrap;/*width で改行する*/
  justify-content: center;/*センター寄せ*/
  flex-direction: column;/*縦並び*/
  border: 1px solid rgb(223, 223, 223);
  background-color: #ffffff;
  margin: 1%;
  
  /* margin-bottom: 30px;*/
}

.box {
  display: flex;
  flex-wrap:wrap;
  
  color: #fff;
 /* font-weight: bold;*/
  text-align: center;
  line-height: normal;/*100px;*/
 
  /*background-color: #e9e9e9;*/
  margin-right: 1%;
 margin-left: 1%;
 margin-top: 1%;
 margin-bottom: 1%;
 width: 98%;
}

.innercontainer {
  display: flex;
  flex-wrap:wrap;
 
  /*flex-direction: column;*/
  align-self: stretch;/*縦方向　高さ合わせ*/
  /* display: flex;
  flex-wrap:wrap;
  flex-direction: row; */
  justify-content: center;/*センター寄せ*/
  align-items: center;
  
  margin-bottom: 5px;

  /*border: 1px solid rgb(221, 221, 221);*/
  background-color: #cffcc9;
  /*box-shadow: 0 0 5px 1px  #85858552;*/
width: 100%;

}

.innercontainer_iphone {
  display: flex;
  flex-wrap:wrap;
 
  /*flex-direction: column;*/
  align-self: stretch;/*縦方向　高さ合わせ*/
  /* display: flex;
  flex-wrap:wrap;
  flex-direction: row; */
  justify-content: center;/*センター寄せ*/
  align-items: center;
  
  margin-bottom: 5px;

  /*border: 1px solid rgb(221, 221, 221);*/
  background-color:#f8f2dd;
  /* background-color: #cffcc9; */
  /*box-shadow: 0 0 5px 1px  #85858552;*/
width: 100%;

}





.innerbox0 {
  color: rgb(0, 0, 0);
  font-weight: bold;
 
  text-align: left;
  line-height: normal;
  /*background-color: #faf392;*/
  /* margin: 1%; */
  width: 100%;
}
.innerbox1 {
  color: rgb(218, 31, 31);
  
  font-weight: bold;
  /* text-align: center; */
  line-height: normal;
  /* background-color: #e9e9e9; */
  /* margin: 1%; */
  width: 30%
}
.innerbox2 {
  color: rgb(0, 26, 255);
 font-size: 1.5rem;
  font-weight: bold;
  /* text-align: center; */
  line-height: normal;/*100px;*/
 /* background-color: #e9e9e9; */
 width: 60%; /*margin: 20%;*/
 
 }
.innerbox3 {
  color: #fff;
  font-weight: bold;
  text-align: center;
  line-height: normal;
  /*background-color: #e9e9e9;*/
 
  width: 40%;
}

.innerbox4 {
  color: rgb(255, 255, 255);
  font-weight: bold;
  text-align: center;
  line-height: normal;
 /* background-color: #e9e9e9;*/
  margin: 0px;
  width:50%;
}

.innerbox1 img{
  width: 60%;
}

.innerbox3 img{
  width: 100%;
}
/**************** common ************************/
blue{
  color: #0000ff;
  font-weight: bold;
}
green{
  color: #067c00;
  font-weight: bold;
}
red{
  color: #ff0000;
  font-weight: bold;
  }
modori{



  margin-left: 10px;
  margin-right: 10px;
  
  color: #FFFFFF;
  background-color: chocolate;
}
/**************button**************************/
.modori {
  background-color: #ffa600;
  color: #fff;
  border-radius: 6px;
  padding: 4px 14px;
  text-decoration: none;
  font-size: 1em;
  box-shadow: 0px 5px 15px -5px rgba(0,0,0,0.8);
}
.modori:hover {
  color: #fff;
  opacity: 0.6;
}

.eon_button {
  background-color: #0058fb;
  color: #fff;
  border-radius: 6px;
  padding: 4px 14px;
  text-decoration: none;
  font-size: 1em;
  box-shadow: 0px 5px 15px -5px rgba(0,0,0,0.8);
}
.eon_button:hover {
  color: #fff;
  opacity: 0.6;
}

.eop_button {
  background-color: #e844d4;
  color: #fff;
  border-radius: 4px;
  padding: 4px 14px;
  text-decoration: none;
  font-size: 1em;
  box-shadow: 0px 5px 15px -5px rgba(0,0,0,0.8);
}
.eon_button:hover {
  color: #fff;
  opacity: 0.6;
}
.privacy_button {
  background-color: #015c4a;
  color: #ffffff;
  border-radius: 4px;
  padding: 4px 14px;
  text-decoration: none;
  font-size: 1em;
  box-shadow: 0px 5px 15px -5px rgba(0,0,0,0.8);
}
.privacy_button:hover {
  color: #fff;
  opacity: 0.6;
}

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

スマホ用
-------------------------------------------- */
  @media not all and (min-width: 768px) {
  /********* eop eon*******/  
 .privacybox{
  display: flex;
  justify-content: center;
  align-items: center;
 }
   
     /********* privacy*******/  
 .eonbox{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
 }
  
   
    /********* タイトル********/  
   .titlebox{
   
    display: flex;
   }
   .titlebox_title{
   /* background-color: #f6fa7d;*/
    width:75%;
    color: #000000;
  }
  .titlebox_title h3{
    text-align: left;
  margin: 0px;
padding: 0px;

}

.titlebox_title h5{
  text-align: left;
  margin: 0px;
padding: 0px;
font-size: 1em;

}
   .titlebox_icon{
   text-align: center;
    /*background-color: #d87a21;*/
    width:25%;
  }
  .titlebox_icon img{
    width: 60%;
   }
  
/******** 表紙画像とバッジ    *******/
  .gazoubox{
   margin: auto;
 text-align: center;
    width:96%;
  }
  .gazoubox img{
    width: 100%;
   }
 

.budgebox-oya{
  display: flex;
  
}
.budgebox{
 display: flex;/*子要素のimgを中央揃え*/
  justify-content: center;/*子要素のimgを中央揃え*/
   margin: auto;
   width:48%;
  /* background-color: #067c00;*/
 }
 .budgebox img{
  width:160px;
   height: auto;
  }



/***************説明  description*************************/
.description{
  text-align: center;
margin: auto;
  padding-left: 1%;
  padding-right: 1%;
  background-color: #ffffff;
 /* display: flex;*/
  /*justify-content: space-evenly;*/
 /* width: 98%;
  background-color: #ffffff;
  display: flex;
 margin: auto;*/
width: 96%;
}
.description_inner{
 /* background-color: #efefef;*/
  padding: 6px;
  /*display: flex;*/
  display:flex;
  flex-flow: column;
 margin: auto;
width: 96%;
}
.description_inner img{

 margin: auto;
  width: 60%;
  border: solid 2px #777777;
}
.description_inner p{
 text-align: left;
 color: #002228;
  width: 96%;
  font-size: 1em;
}
.description h3{
  /*background-color: #6ef8b1;*/
  text-align: center;
  width: 100%;
  font-weight: bold;
}
.description h4{
 
 padding-left:4%;
  text-align: left;
  width: 100%;
  font-weight: bold;
}




  .container {
  display: flex;
  flex-wrap:  wrap;/*width で改行する*/
  justify-content: center;/*センター寄せ*/
  flex-direction: column;/*縦並び*/
  border: 1px solid rgb(223, 223, 223);
  background-color: #ffffff;
  margin: 1%;
  
  /* margin-bottom: 30px;*/
}

.box {
  display: flex;
  flex-wrap:wrap;
  
  color: #fff;
 /* font-weight: bold;*/
  text-align: center;
  line-height: normal;/*100px;*/
 
  /*background-color: #e9e9e9;*/
  margin-right: 1%;
 margin-left: 1%;
 margin-top: 1%;
 margin-bottom: 1%;
 width: 98%;
}

.innercontainer {
  display: flex;
  flex-wrap:wrap;
 
  /*flex-direction: column;*/
  align-self: stretch;/*縦方向　高さ合わせ*/
  /* display: flex;
  flex-wrap:wrap;
  flex-direction: row; */
  justify-content: center;/*センター寄せ*/
  align-items: center;
  
  margin-bottom: 5px;

  /*border: 1px solid rgb(221, 221, 221);*/
  background-color: #cffcc9;
  /*box-shadow: 0 0 5px 1px  #85858552;*/
width: 100%;

}

.innercontainer_iphone {
  display: flex;
  flex-wrap:wrap;
 
  /*flex-direction: column;*/
  align-self: stretch;/*縦方向　高さ合わせ*/
  /* display: flex;
  flex-wrap:wrap;
  flex-direction: row; */
  justify-content: center;/*センター寄せ*/
  align-items: center;
  
  margin-bottom: 5px;

  /*border: 1px solid rgb(221, 221, 221);*/
  background-color:#f8f2dd;
  /* background-color: #cffcc9; */
  /*box-shadow: 0 0 5px 1px  #85858552;*/
width: 100%;

}





.innerbox0 {
  color: rgb(0, 0, 0);
  font-weight: bold;
 
  text-align: left;
  line-height: normal;
  /*background-color: #faf392;*/
  /* margin: 1%; */
  width: 100%;
}
.innerbox1 {
  color: rgb(218, 31, 31);
  
  font-weight: bold;
  /* text-align: center; */
  line-height: normal;
  /* background-color: #e9e9e9; */
  /* margin: 1%; */
  width: 30%
}
.innerbox2 {
  color: rgb(0, 26, 255);
 font-size: 1.5rem;
  font-weight: bold;
  /* text-align: center; */
  line-height: normal;/*100px;*/
 /* background-color: #e9e9e9; */
 width: 60%; /*margin: 20%;*/
 
 }
.innerbox3 {
  color: #fff;
  font-weight: bold;
  text-align: center;
  line-height: normal;
  /*background-color: #e9e9e9;*/
 
  width: 40%;
}

.innerbox4 {
  color: rgb(255, 255, 255);
  font-weight: bold;
  text-align: center;
  line-height: normal;
 /* background-color: #e9e9e9;*/
  margin: 0px;
  width:50%;
}

.innerbox1 img{
  width: 60%;
}

.innerbox3 img{
  width: 100%;
}
/**************** common ************************/
blue{
  color: #0000ff;
  font-weight: bold;
}

green{
  color: #067c00;
  font-weight: bold;
}
red{
  color: #ff0000;
  font-weight: bold;
  }
modori{



  margin-left: 10px;
  margin-right: 10px;
  
  color: #FFFFFF;
  background-color: chocolate;
}
/**************button**************************/
.modori {
  background-color: #ffa600;
  color: #fff;
  border-radius: 6px;
  padding: 4px 14px;
  text-decoration: none;
  font-size: 1em;
  box-shadow: 0px 5px 15px -5px rgba(0,0,0,0.8);
}
.modori:hover {
  color: #fff;
  opacity: 0.6;
}

.eon_button {
  background-color: #0058fb;
  color: #fff;
  border-radius: 6px;
  padding: 4px 14px;
  text-decoration: none;
  font-size: 1em;
  box-shadow: 0px 5px 15px -5px rgba(0,0,0,0.8);
}
.eon_button:hover {
  color: #fff;
  opacity: 0.6;
}

.eop_button {
  background-color: #e844d4;
  color: #fff;
  border-radius: 4px;
  padding: 4px 14px;
  text-decoration: none;
  font-size: 1em;
  box-shadow: 0px 5px 15px -5px rgba(0,0,0,0.8);
}
.eon_button:hover {
  color: #fff;
  opacity: 0.6;
}
.privacy_button {
  background-color: #015c4a;
  color: #ffffff;
  border-radius: 4px;
  padding: 4px 14px;
  text-decoration: none;
  font-size: 1em;
  box-shadow: 0px 5px 15px -5px rgba(0,0,0,0.8);
}
.privacy_button:hover {
  color: #fff;
  opacity: 0.6;
}

  }