/*  header --------------------- */
header	{
}
.top {
  display:block;
  background-color:#ef7820;
}
h1 a {
  color:white;
}
.top_1 {
  display:flex; /* 文字を上下中央に配置するため */
  align-items: center;
  margin:10px 0px 0px;
  padding:10px 0px 5px 10px;
  font-weight:bold ;
  color:white;
  width:100%;
}
.logo {
  width:5% ;
  display:flex;
  align-items: center;
  justify-content:center;
}
.logo a {
  display:flex;
  align-items: center;
}
.logo img {
  width:90%;
}
.t_text {
  display:flex;
  width:80%
}
.t_text_sub {
  display:flex;
  align-items:center;
  font-size:120%;
  padding:0px 15px;
}

.top_2 {
  display:flex; 
  margin:0px ;
  padding:0px 0px 10px 10px ;
  font-weight:bold ;
  font-size:110%;
  color:white;
  width:100%
}

/*  header menu ---------------- */
.menu_h {
  width:100%;
  margin:5px 0px 5px 0px;
}
.menu_h hr {
  margin:0px 0px 5px 0px;
  border-top:#f6ebe4 solid 1px;
  border-right:0px;
  border-bottom:0px;
  border-left:0px;
}
.menu_h ul {
  margin:5px 0px 2px 0px;
}
.menu_h ul li {
  display:inline;
  margin:0px 10px;
}
.menu_h ul li a {
  color:white;
}
.menu_h ul li a:hover {
  color:#fce3d0;
}
#menubtn {
  display:none;
}
/*
#menu	{
  display:block !important;
}
*/


/*  footer --------------------- */
footer  {
  text-align:center;
  color:#ef7820;
/*  background-color:#fef7f2;
 */
  background-color:#f6ebe4;
  margin:10px 0px 0px;
  padding:5px 0px;
}

.bottom_contents {
  display:flex;
}
.bottom_contents_sp {
  display:flex;
  width:60%
}
.bottom_content1 {
  display:flex;
/*  align-items: center; */
  justify-content: center;
  width:50%;
}
.bottom_content1 img {
  padding:10px 0px;
  width:60% ;
}

.bottom_content3 {
  width:50%;
  text-align:left;
  margin:30px 0px;
  font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
}
.bottom_content3 p {
  margin:5px 0px 0px;
}

.bottom_content2 {
  width:40%;
  text-align:left;
}
.bottom_content2 p {
  margin:5px 0px 0px 2px;
}
.bottom_content2 img {
  width:250px ;
}

.athome_btm {
  background-color:#ef7820;
  margin:10px 0px 0px;
}
footer h3 {
  color:white;
  padding:5px;
}

/* --- thx https://metrograph.jp/css_gradation_paragraph/ -------------- */
.grad-btn {
   margin:10px 0px;
   padding:5px 0px;
   color:#ef7820;
   cursor: pointer;
}
.grad-btn::before {
  content: "サイトの使用について"
}
.grad-item {
  position: relative;
  overflow: hidden;
  height: 0px;
  margin:0px 40px 0px 0px;
  font-size:80%;
}
.grad-item::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0px;
}
.grad-trigger {
  display: none;
}
.grad-trigger:checked ~ .grad-btn::before {
  content: "サイトの使用について" 
}
.grad-trigger:checked ~ .grad-item {
  height: auto;
}
.grad-trigger:checked ~ .grad-item::before {
  display: none;
}
/* ----------------------------------------------------------------- */


@media screen and (max-width:1024px)
{
.top {
  display:block;
}
.top_1 {
/*  display:block;
 */
  margin:0px 20px;
  padding:2px 0px;
  width:100%;
/*  text-align:center;
 */
}
.logo {
  width:7%;
}

.top_2 {
  width:100%;
  margin:0px 0px;
  font-size:100%;
}
.menu_h {
  margin:0px;
}
.menu_h hr {
  display:none;
  
}
.menu_h ul li {
  display:block;  
  margin:0px;
  text-align:center;
  border-top:dotted 0.5px white; 
  padding:4px 0px;
}
#menubtn {
  display:block;
  padding:6px 12px;
  border:none;
  background-color:#ef7820;
  position:absolute;
  top:3px;
  right:3px;
  cursor:pointer;
}
#menubtn span {
  display:inline-block;
  text-indent:-9999px;
}
#menubtn i {
  color:#FFFFFF;
  font-size:24px;
}
#menu {
  display:none;
}

.bottom_contents_sp {
  width:70%
}
.bottom_content3 {
  width:50%
}
.bottom_content2 {
  width:30%;
}
.bottom_content2 img {
  width:60% ;
}
}

@media screen and (max-width:780px) {
.bottom_contents {
  display:block;
}
.bottom_contents_sp {
  display:block;
  width:100%;
}
.bottom_content1 {
  width:100%;
}
.bottom_content1 img {
  width:50%;
}
.bottom_content2 {
  width:100%;
  text-align:center;
}
.bottom_content2 img {
  width:40%;
}
.bottom_content3 {
  width:100%;
  text-align:center;
}
.grad-item {
  text-align:center;
  margin:0px 10px;
}
footer {
  padding:10px 0px 5px;
}

}
@media screen and (max-width:480px)
{
.top_1 {
  margin:0px;
  padding:3px 0px;
/*  text-align:center;
 */
  font-size:60%;
}
.t_text {
  display:block;
}

.t_text_sub {
  padding:0px 0px;
}
.t_text h1 {
  margin-bottom:0px;
}
.logo {
  width:10%;
}
.bottom_content2 img {
  width:60%;
}
}