@charset "UTF-8";

.is-pc{
  display: block;
}

.is-sp{
  display: none;
}

#sec-trading{
  padding: 230px 0 100px;
  position: relative;
}

.bg-text{
  position: absolute;
  top: 80px;
  left: 5%;
  color: #e5edf3;
  font-size: 120px;
  font-weight: 100;
  font-family: "Sora", sans-serif;
  line-height: 1;
}

.flex-trading{
  display: flex;
  justify-content: space-between;
  margin-bottom: 90px;
}

.trading-ttl{
  width: 30%;
}

.trading-ttl .head24{
  font-size: 24px;
  font-weight: 600;
}

.trading-detail{
  width: 65%;
}

.shadow-box{
  background: #fff;
  border-radius: 20px;
  padding: 50px 0;
  box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.05);
  -webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.05);
  -moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.05);
}

.flex-shadow{
  display: flex;
  justify-content: space-between;
}

.flex-shadow a{
  display: block;
  padding: 0 50px;
  width: 50%;
}

.btn-wrap{
  position: relative;
}

.flex-shadow a .head21{
  font-size: 21px;
  font-weight: bold;
}

.flex-shadow a .head21 .en{
  color: #a9a9a9;
  display: block;
  font-size: 14px;
  font-weight: 100;
}

.flex-shadow a:first-child{
  border-right: 1px solid #c6c6c6;
}

#sec-trading .round-btn{
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 55px;
  height: 55px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#sec-trading .round-btn .arrow {
    width: 40%;
    height: 1px;
    background-color: #fff;
    position: relative;
    transform: translateX(-60%);
}

#sec-trading .round-btn .arrow::after {
    content: "";
    display: block;
    width: 9px;
    height: 1px;
    background-color: #fff;
    transform: rotate(23deg);
    right: 0;
    bottom: 1px;
    left: auto;
    position: absolute;
}

#sec-consult{
  background: #e7ecf3; 
  padding: 160px 0 100px;
  position: relative;
  overflow: hidden;
}

#sec-consult:after{
  content: "";
  position: absolute;
  background: url(/lib/img/business/bg_map.jpg) no-repeat;
  background-position: left center;
  background-size: contain;
  height: 750px;
  width: 55%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
}

.consult-detail{
  position: relative;
  z-index: 1;
  margin-left: 62%;
  width: 38%;
}

#sec-consult .base__title-hosoku{
  font-weight: 100;
  margin-bottom: 20px;
}

#sec-consult .head30{
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 35px;
  line-height: 1.4;
}

#sec-consult .head21{
  font-size: 21px;
  font-weight: bold;
  margin-bottom: 30px;
}

#sec-consult .txt{
  margin-bottom: 35px;
}

#sec-consult .round-btn,
#sec-produce .round-btn{
  justify-content: center;
}

#sec-consult .round-btn__label,
#sec-produce .round-btn__label{
    text-align: center;
    font-family: "Sora", sans-serif;
    font-size: 14px;
    text-decoration: none;
    padding-left: 0;
}

.base__btn .round-btn:before {
    background-color: #024a90;
    transition-duration: 0.3s;
}

#sec-produce{
  padding-bottom: 140px;
}

#sec-produce .produce-main{
  background: url(/lib/img/business/business_wide.jpg) no-repeat;
  background-size: cover;
  background-position: center center;
  height: 400px;
  width: 100%;
  margin-bottom: 100px;
}

.flex-produce{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.produce-detail{
  width: 45%;
}

.produce-detail .en{
  font-weight: 100;
  margin-bottom: 20px;
}

.produce-detail .head30{
  font-weight: bold;
  font-size: 30px;
  margin-bottom: 30px;
  line-height: 1.4;
}

.produce-detail .head21{
  font-size: 21px;
  font-weight: bold;
  margin-bottom: 35px;
}

.produce-detail .txt{
  margin-bottom: 30px;
}

.produce-img{
  width: 50%;
}


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

#sec-trading {
    padding: 180px 0 100px;
}

.bg-text {
    font-size: 100px;
}
}

@media only screen and (max-width: 1300px){
#sec-trading {
    padding: 170px 0 100px;
}

.bg-text {
    font-size: 90px;
}

#sec-consult {
    padding: 110px 0 70px;
}
}


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

.bg-text {
    font-size: 60px;
}

.trading-ttl {
    width: 42%;
}

.trading-detail {
    width: 58%;
}

.flex-trading {
    margin-bottom: 40px;
}

#sec-consult .head30 {
    font-size: 24px;
    margin-bottom: 30px;
}

#sec-consult .head21 {
    font-size: 18px;
    margin-bottom: 20px;
}

#sec-produce .produce-main {
    height: 340px;
}
}

@media only screen and (max-width: 950px){
.flex-trading {
    display: block;
}

.trading-ttl {
    width: 100%;
    margin-bottom: 20px;
}

.trading-detail {
    width: 100%;
}

.flex-shadow a .head21 {
    font-size: 16px;
}
}

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

.is-pc{
  display: none;
}

.is-sp{
  display: block;
}

#sec-trading {
    padding: 130px 0 60px;
}

.bg-text {
    font-size: 30px;
}

.trading-ttl .head24 {
    font-size: 20px;
}

.shadow-box {
    background: #fff;
    padding: 5%;
}

.flex-shadow {
    display: block;
}

.flex-shadow a {
    width: 100%;
    padding: 0;
}

.flex-shadow a:first-child {
    border-right: none;
    border-bottom: 1px solid #c6c6c6;
    padding-bottom: 15px;
}

.flex-shadow a:last-child {
  padding-top: 15px;
}

#sec-consult:after {
    height: 720px;
    width: 100%;
    left: 0;
}

.consult-detail {
    margin-left: 0;
    width: 42%;
}

#sec-produce .produce-main {
    margin-bottom: 60px;
}

.flex-produce {
    display: block;
}

#sec-produce {
    padding-bottom: 60px;
}

.produce-detail {
    width: 100%;
}

.produce-detail .head30 {
    font-size: 22px;
    margin-bottom: 20px;
}

.produce-detail .head21 {
    font-size: 18px;
    margin-bottom: 25px;
}

.produce-img {
    width: 100%;
    margin-bottom: 30px;
}

#sec-consult:after {
    background-position: top center;
    background-size: contain;
    height: 340px;
    width: 100%;
    left: 0;
    top: 0;
    transform: inherit;
    z-index: 0;
}

.consult-detail {
    width: 100%;
}

#sec-consult {
    padding: 310px 0 60px;
}

#sec-consult .head30 {
    font-size: 22px;
    margin-bottom: 20px;
}

#sec-produce .produce-main {
    height: 230px;
    background-position: 40% center;
}
}

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

.bg-text {
    top: 60px;
}

#sec-trading {
    padding: 90px 0 60px;
}

#sec-consult:after{
  background: url(/lib/img/business/bg_map_sp.jpg) no-repeat;
  background-size: contain;
  height: 720px;
  width: 100%;
}

}