/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 03 2025 | 12:02:59 */
/* ここにCSSコードを追加

例:
.example {
    color: red;
}

CSS の知識に磨きをかけるためにご覧ください。
http://www.w3schools.com/css/css_syntax.asp

コメント終わり */ 
/*  トップの画像調整*/
@import url('https://fonts.googleapis.com/css?family=M+PLUS+1p');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
/* p { 
    font-family: 'M PLUS 1p', sans-serif;
} */

.philosophy_img {
	margin-left:auto;
	width:95%!important;
	height:auto;
	text-align:right!important;
}
.philosophy_vision {
	width:83%;
	margin: 0 auto;
	justify-content: space-between;
}
.philosophy_vision .swell-block-columns__inner {
	justify-content: space-between;
}
.robot {
	font-family: "Roboto", sans-serif;
}
.vision_ttl,.mission_ttl,.core_ttl {
	font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
	font-size:24px!important;
	color:#052365!important;
	margin:0;
}

.philosophy_vision h2,
.philosophy_mission h2{
	margin-top:20px;
	margin-bottom:50px;
}

.philosophy02 .sp  {
	display:none;
}

/*  missionのカラム*/
.philosophy_mission .swell-block-column {
	margin-left:0;
}
.mission_txt {
	max-width:645px !important;
	width:100%!important;
	margin:0 auto!important;
}
.philosophy02 {
	position: relative;
	padding:0;
}
.philosophy02::before {
	content: "";
    position: absolute; /* 要素内での絶対位置を指定 */
    width: 73%;    /* 四角形の幅 */
    height: 64%;   /* 四角形の高さ */
    background-color: #F8F9FE; /* 四角形の背景色 */
    right: 0;        /* 右端に配置 */
    bottom: 0;       /* 下端に配置 */
    z-index: 0;     /* コンテンツの後ろに配置 */
}




/*  コアバリュー*/
.philosophy03 h2{
	font-family: "Roboto", sans-serif;
    font-weight: bold;
    font-style: normal;
	color:#052365!important;
	font-size:24px!important;
	margin:5% 0;
}
h2.core_ttl {
	font-size:1.5rem!important;
}
.philosophy03 h3 {
	font-weight:700;
	color:#052365!important;
	margin:0;
	padding:0!important;
}
.philosophy03 p {
	font-size:0.9rem;
}
.philosophy03 .swell-block-column {
	width:40%;
}
.philosophy03 .swell-block-columns__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-left: calc(var(--swl-clmn-mrgn--x)*-1);
    margin-top: 0!important;
    row-gap: var(--swl-clmn-mrgn--y);
}
.corevalues_item {
	width:95%!important;
	margin-bottom:0;
	padding:40px 0;
	border-bottom:1px solid #ccc;
}

/* ビジネスページ */
.business_h1 {
	position:relative;
	z-index:0;
	height:auto;
	background-position:0%!important;
	background-size:cover!important;
}
.business_h1 h1 {
	font-size:100px;
	font-family:roboto;
	font-weight:500;
	width:80%;
	padding:20% 0 0 0!important;
	margin:0 auto;
	margin-top:50px!important;
	line-height:1.2;
}
.business01 h2,
.business02 h2,
.business03 h2,
.business04 h2{
	color:#052365!important;
}
.business02,
.business04{
	padding:0!important;
	margin:0;
	background-color:#F8F9FE!important;
}

.business02 ul,
.business01 ul {
    color: black;
    font-weight: bold;
    font-size: 30px;
    width: 510px;
    margin: 0 auto;
}
.business01 ul {
	width:300px;
}
.business01 ul.en {
    width: 610px;
}
	.business01 .sp,
	.business02 .sp{
		display:none;
	}
.business02 ul.en {
    width: 560px;
}
.is-style-check_list li:before {
    color: #70B300;
    content: "\e923";
}
.-list-under-dashed>li, .border_bottom>li {
    border-bottom: 1px dashed black;
    margin-bottom: .75em;
    padding-bottom: 0.5em;
}

.business01 .container,
.business02 .container{
	width:950px;
	margin:0 auto;
  display: flex; /* 横並びにする */
  justify-content: space-between; /* ブロック間のスペースを均等に */
  gap: 10px; /* ブロック間のスペース */
  flex-direction:row;
}

.business01 .block,
.business02 .block{
  width:200px!important;
  padding: 30px 10px;
  background-color: #F0F0F0;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #000000;
}

.torihiki {
	color:#052365!important;
	border:1px solid #052365;
	background-color:#fff!important;
}

/*  強み*/
.business03 {
	margin:0!important;
}
.business03 h2{
	font-size:40px;
	margin-bottom:1em;
}
.business03 h2.is-style-section_ttl {
	display:flex;
	align-items: center; /* 垂直方向で中央揃え */
    justify-content: center; /* 水平方向で中央揃え */
    gap: 10px; /* 画像とテキストの間隔 */
}

/* .business03 h2.is-style-section_ttl::before {
  content: "";
	position:unset;
	top:unset;
	left:unset;
  display:inline-block;
  width: 50px; 
  height: 50px; 
  background-image: url('//buychemjapan.co.jp/wp/wp-content/uploads/2024/06/cropped-logo-1.png'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
} */

.number-container {
    text-align: center; /* 親要素で数字を中央揃え */
}

.number {
    display: inline-block; /* インラインブロックに設定 */
    font-size: 24px;
    color: #29A7E1;
    border-bottom: 1px solid #29A7E1; /* 数字の下にだけ下線を引く */
}

.business03 h3 {
	margin-top:30px;
	margin-bottom:10px;
}
.business03 h3.sp {
	display:none;
}
.business03 .column {
	width:80%!important;
	margin:0 auto;
}
/*  マーケットプレイスの価値*/
.business04 h2{
	padding-top:6rem!important;
}
/* 壁紙 */
.market_wrapper {
  width:100%;
  display:flex;
  position:relative;
}

.market_images {
  height:100vh;
  position: sticky;
  position: -webkit-sticky;
	top:0;
}
.market_images p {
    max-width: 600px;
    width: 1000px;
    height: 100vh;
    display: block;
    visibility: hidden;
    position: absolute;
    /* top: 50%; */
    /* bottom: 50%; */
    transition: .8s;
    /* z-index: 3; */
    opacity: 0;
}

.market_images img{
  height:auto;
}
.market_images p:first-child,
.market_images p.active {
	visibility: visible;
	opacity: 1;
}

/* 全体の設定 */
.market_container {
    position:absolute;
    width: 600px;
    height: 80vh;
	top:10%;
    right:10%;
    overflow-y: auto;
    scrollbar-width: none;
    padding-bottom: 50px;
}
.market_container::-webkit-scrollbar {
  display: none; /* Chrome, Safariでスクロールバーを非表示 */
}
.market_container_item {
	width: 100%; /* 全体幅の80%に設定して、画面サイズに対応 */
    max-width: 600px; /* 最大幅を600pxに制限 */
	height:150px;
	display: flex;
	justify-content: flex-end; /* 右寄せに */
    align-items: center; /* 高さを中央揃え */
	margin-left: auto!important; /* 右端に寄せる */
	margin-right:5px;
    padding: 0; /* パディングもゼロに */
	border:0;
	box-shadow: 0 32px 30px -30px rgba(53, 47, 47, 0.40);;
}
/* market_numberのスタイル */
.market_number {
	position:relative;
  background-color: #106EB8; /* 背景色 */
  color: white; /* 文字色 */
  display: inline-block;
  text-align: center;
  width: 120px; /* 固定幅で小さく */
	height:150px;
}

/* STEPのスタイル */
.market_number span {
  font-size: 14px; /* STEPのフォントサイズ */
}

/* 数字のスタイル */
.market_number p {
  line-height:1;
  position:absolute;
  font-size: 36px; /* 数字のフォントサイズ */
  margin: 0;
  top:27px;
	left:40px;
}

/* market_container_ttlのスタイル */
.market_container_ttl {
	width:450px;
  background-color: white; /* 背景色 */
	height:150px;
  padding: 30px; /* 余白 */
  display: flex;
  flex-direction: column;
  justify-content: center; /* 真ん中に揃える */
  flex-grow: 1; /* 横幅いっぱいに広がる */
  text-align: left!important; /* 左に寄せる */
}

/* h3のスタイル */
.market_container_ttl h3 {
	font-size:24px;
  color: #106EB8!important; /* h3の色 */
  margin:0 0 5px 0; /* 下に少しスペース */
text-align:left!important;
}

/* pのスタイル */
.market_container_ttl p {
	font-size:18px;
  color: black; /* pの色 */
  margin: 0;
}

/*  矢印*/
.market_arrow {
	width:600px;
	margin-left: auto!important; /* 右端に寄せる */
	text-align:center;
	margin-top:5px;
}

.marker_buyer .wp-block-cover {
	height:330px;
}