/*******zaimu*******/

.zaimu div{
  text-align: center;
  background-image: linear-gradient(to right, #ffa200 3px, transparent 3px);
  background-size: 12px 1px;
  background-repeat: repeat-x;
  background-position: left bottom;
  padding-bottom: 50px;
  margin-top: 40px;
}

.zaimu div p{text-align: justify;}


.zaimu01 .radius_table tr>th:first-child{width: 30%;}

.zaimu01>div {
  text-align: center;
  background: none;
}

.zaimu01 td { text-align: center; }



/*******画像スクロール*******/

.scroll {
  width: 100%;
  display: block;
  overflow-x: scroll;
  padding-bottom: 20px;
}

.scroll img{width: auto;}


/*********************

#message

********************/

#message>div {
  display: flex;
  margin-bottom: 50px;
  color: #512701;
}

#message>div img{
  width: 50%;
  height: 520px;
  object-fit: cover;
  border-radius: 30px;
}

#message div div{
  padding: 70px 0 0 70px;
  background: url(../img/en_illust.png)left top/210px 210px no-repeat #ffffff;
  width: 46%;
  margin-left: 6%;
}

#message div h3 {
  font-size: 60px;
  margin-bottom: 14px;
}
#message div p {
  font-size: 28px;
  margin-bottom: 30px;
}
#message div span {
  font-size: 18px;
  line-height: 1.7;
}

#message>p{
  width: 1200px;
  margin: 0 auto;
  max-width: 88%;
}

@media screen and (max-width: 1400px) {
  #message>div img {height: 460px;}
}

@media screen and (max-width: 1250px) {

  #message div div{
    padding: 76px 0 0 60px;
    margin-left: 5%;
  }
  #message>div img{height: 400px;}
  #message div h3{font-size: 40px;}
  #message div p{font-size: 22px;}
  #message div span{font-size: 16px;}

}

@media screen and (max-width: 1000px) {
  #message div div{
    background: url(../img/en_illust.png)left top/160px 160px no-repeat #ffffff;
    padding: 60px 0 0 50px;
  }
  #message div p{margin-bottom: 16px;}
}

@media screen and (max-width: 700px) {

  #message>div {
    display: block;
    margin-bottom: 30px;
    color: #512701;
  }

  #message>div img{
    width: 100%;
    height: 300px;
    border-radius: 16px;
  }
  #message div div{
    background: url(../img/en_illust.png)left top /130px 130px no-repeat #fff;
    padding: 40px 0 0 40px;
    width: calc(100% - 40px);
    margin: 30px auto 0;
  }
  #message div h3{font-size: 36px;}
  #message div p{
    font-size: 18px;
    margin-bottom: 20px;
  }
  #message div span{font-size: 14px;}

  #message>p{
    max-width: 100%;
    text-align: left;
  }
}


/*********************

#rinen

********************/

#rinen{
  text-align: center;
  background: url(../img/rinen_bg.png) left top 120px /80% no-repeat;
  margin: 140px auto;
}

#rinen span {
  text-align: center;
  position: relative;
  display: inline-block;
  padding: 16px 20px;
  color: #ffffff;
  font-weight: bold;
  background: #502700;
  border-radius: 6px;
  margin-bottom: 40px;
  width: 230px;
}

#rinen span:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  border: 10px solid transparent;
  border-top: 12px solid #502700;
}

#rinen span em {
  margin: 0;
  padding: 0;
  font-size: 20px;
}

#rinen p{
  font-size: 28px;
  color: #ef9e11;
  font-weight: bold;
  margin-bottom: 80px;
  line-height: 1.5;
}

.rinen_img{
  width: 100%;
  height: 600px;
  object-fit: cover;
}

@media screen and (max-width: 1400px) {

  .rinen_img { height: 420px;}

}

@media screen and (max-width: 1250px) {

  #rinen{
    background: url(../img/rinen_bg.png) left top 80px /80% no-repeat;
    margin: 100px auto 80px;
  }
  #rinen span { padding: 12px 4px; }
  #rinen p {
    font-size: 22px;
    margin-bottom: 50px;
  }
  #rinen>img{
    width: 90%;
    margin: 0 auto;
  }

  .rinen_img { height: 340px; }
}

@media screen and (max-width: 700px) {
  #rinen{margin: 70px auto;}
  #rinen p {font-size: 22px;}
  .rinen_img{ height: 280px; }
  #rinen span{
    padding: 8px 4px;
    width: 180px;
    margin-bottom: 30px;
  }
  #rinen span em { font-size: 15px; }
}



/*********************

#business

********************/

#business{
  margin: 100px auto 80px;
  display: flex;
}

#business>p{
  writing-mode: vertical-rl;
  font-size: 40px;
  font-weight: bold;
  color: #512701;
  background: url(../img/business_bg.png)top center/100% no-repeat;
  margin-left: 7%;
  padding-top: 50px;
}

#business ul {
  width: 71.5%;
  margin-left: auto;
}

#business ul li{ padding: 60px; }

#business ul li:nth-child(odd){
  background: #fffde8;
  color: #512701;
}

#business ul li:nth-child(even) {
  background: #512701;
  color: #ffffff;
}

#business ul li span{
  font-size: 20px;
  margin-bottom: 14px;
  display: block;
}

#business ul li p { font-size: 16px; }

@media screen and (max-width: 1000px) {
  #business ul {
    width: 73.5%;
    margin-left: auto;
  }
  #business ul li{padding: 44px 40px;}
  #business ul li span{text-align: left;}
}

@media screen and (max-width: 700px) {

  #business{
    display: block;
    margin: 80px auto;
  }
  #business>p{
    writing-mode:inherit ;
    font-size: 34px;
    margin: 0 0 30px 0;
    background: none;
  }

  #business ul{ width: 100%; }
  #business ul li{ padding: 30px; }
  #business ul li span{
    font-size: 18px;
    line-height: 30px;
  }
  #business ul li p{
    font-size: 14px;
    line-height: 26px;
  }

}


/*********************

#history

********************/

#history { margin-top: 200px; }

#history>p {
  font-size: 40px;
  color: #512701;
  background: url(../img/history_bg.png)top center/580px no-repeat;
  text-align: center;
  margin: 0 auto 90px;
  padding: 15px 0;
}
#history>ul {
  border-left: 1px solid #000;
  padding: 70px 0 100px;
}

#history>ul>li:last-child { margin-bottom: 0; }

#history h4 {
  display: flex;
  width: 180px;
  position: relative;
}

#history h4 span {
  background: #ffbb45;
  display: table;
  width: 180px;
  border-radius: 50%;
  height: 180px;
  text-align: center;
  font-size: 24px;
}
#history h4 span i{
  display: table-cell;
  vertical-align: middle;
}

#history h4 em {
  writing-mode: vertical-rl;
  color: #ffbb45;
  font-size: 50px;
  display: block;
  position: absolute;
  left: 30%;
  top: 200px;
}

.history_inner { margin-bottom: 100px; }

.history_inner .h_img {/*横線*/
  position: relative;
  text-align: right;
}

.history_inner .h_img img{
  width: 82%;
  height: 275px;
  object-fit: cover;
  margin: 0 0 0 auto;
}

.history_inner .h_img::before {/*横線*/
  content: "";
  background: #300404;
  width: 14%;
  height: 1px;
  position: absolute;
  left: 0;
  top: 40%;
}

.history_inner .h_img::after {/*横線*/
  content: "";
  background: #300404;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: absolute;
  left: 14%;
  top: 107px;
}

.history_inner .h_box{
  width: 78%;
  margin-top: -90px;
  margin-left: auto;
  display: flex;
}

.h_box ul {
  margin: 110px 0 0 60px;
  width: calc(100% - 60px);
}

.h_box .caption {
  font-size: 12px;
  text-align: right;
  margin-bottom: 30px;
}

.h_box ul li:nth-child(n+2) {margin: 0 40px 20px 0;}
.h_box ul li:last-child {margin-bottom: 0;}

.h_box ul li span {
  font-size: 28px;
  color: #512701;
  margin-bottom: 10px;
  display: inline-block;
}

.h_box ul li span i {margin-left: 5px;}

.history_inner .caption_sp {display: none;}

@media screen and (max-width: 1400px) {
  .history_inner .h_img::before{width: 11%;}
  .history_inner .h_img::after{
    left: 11%;
    top: 99px;
  }

  .history_inner .h_img img{
    width: 85%;
    height: 255px;
  }

  .history_inner .h_box{width: 82%;}
}

@media screen and (max-width: 1200px) {
  #history h4 span {
    width: 150px;
    height: 150px;
    font-size: 24px;
  }

  #history h4 em{top: 170px;}

  .h_box ul{
    margin: 110px 0 0 30px;
    width: calc(100% - 30px);
  }
}

@media screen and (max-width: 1000px) {

  #history>ul {padding: 40px 0 70px;}
  .history_inner .h_img::before {width: 7%;}
  .history_inner .h_img::after {
    left: 7%;
    top: 83px;
  }

  .history_inner .h_img img {
    width: 88%;
    height: 215px;
  }

  .history_inner .h_box {width: 85%;}
}

@media screen and (max-width: 700px) {

  #history{margin-top: 120px;}
  .history_inner {margin-bottom: 70px;}
  #history>p {
    padding: 0;
    background: none;
    margin: 0 auto 40px;
  }
  .history_inner .h_img::before {width: 5%;}
  .history_inner .h_img::after {
    width: 5px;
    height: 5px;
    top: 64px;
    left: 5%;
  }

  #history h4 span{
    font-size: 18px;
    width: 120px;
    height: 120px;
  }

  .history_inner .caption_sp {
    display: block;
    font-size: 12px;
    text-align: right;
    width: 91%;
    margin: 12px 0 0 auto;
  }

  .history_inner .h_box {
    display: block;
    margin-top: 16px;
    width: 88%;
  }

  .history_inner .h_img img {
    width: 91%;
    height: 165px;
  }
  .history_inner .h_img .img_sp {display: inline-block;}

  #history h4 em {
    writing-mode: initial;
    top: 30px;
    left: 136px;
  }

  .h_box .caption { display: none; }

  .h_box ul{
    margin: 30px 0 0 0;
    width: 100%;
  }
  .h_box ul li:nth-child(n+2){
    margin: 0 auto 20px;
    text-align: left;
  }

  #history>ul { padding: 40px 0; }

}

/*********************

#collabo

********************/

#collabo{
  margin: 150px auto 120px;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 50%, #512701 50%, #512701 100%);
  padding-bottom: 40px;
}

#collabo img{ width: 100%; }

#collabo h3{
  font-size: 60px;
  color: #512701;
  font-weight: bold;
  margin: 0 auto 53px;
  width: calc(1400px - 50px);
  max-width: 90%;
}

#collabo ul { display: flex; }
#collabo ul li{
  width: 100%;
  font-weight: bold;
  font-size: 0;
  padding: 25px;
}

#collabo span{
  font-size: 12px;
  font-weight: 500;
  margin: 10px auto 30px;
  display: block;
  color: #ffffff;
  text-align: left;
}
#collabo p{
  text-align: center;
  color: #ffffff;
  line-height: 1.3;
}

#collabo .txt_only p{margin-top: 60px;}

#collabo p em{
  display: block;
  font-size: 15px;
  color: #ffffff;
  margin-top: 20px;
}
#collabo p em::before{
  content: "";
  width: 10px;
  height: 2px;
  margin-right: 12px;
  background: #ffffff;
  display: inline-block;
  vertical-align: middle;
}
#collabo p em::after {
  content: "";
  width: 10px;
  height: 2px;
  margin-left: 12px;
  background: #ffffff;
  display: inline-block;
  vertical-align: middle;
}

@media screen and (max-width: 1200px) {
  #collabo h3 {
    font-size: 48px;
    margin: 0 auto 33px;
  }
  #collabo p { font-size: 16px; }
}

@media screen and (max-width: 1000px) {
  #collabo{
    margin: 80px auto ;
    background: linear-gradient(180deg, #fff 0%, #fff 40%, #512701 40%, #512701 100%);
  }
  #collabo ul li{padding: 15px;}
}

@media screen and (max-width: 700px) {

  #collabo{
    margin: 60px auto 70px;
    background: linear-gradient(180deg, #fff 0%, #fff 20%, #512701 20%, #512701 100%);
  }

  #collabo h3 { font-size: 34px;}

  #collabo ul { display: block; }
  #collabo ul li{
    margin-bottom: 60px;
    padding: 0;
  }

  #collabo .txt_only p{margin-top: 30px;}

}