/************************************************
* 共通定義
************************************************/
.tool_customization h1 {
    font-size: clamp(34px, 5vw, 48px);
    font-weight: 700;
    line-height: 1.3;
	color: #1a1a1a;
}

.tool_customization h2 {
    font-size: clamp(28px, 3vw, 34px);
    font-weight: 700;
    line-height: 1.4;
	color: #1a1a1a;
}

.tool_customization h3 {
    font-size: clamp(21px, 2vw, 24px);
    font-weight: 700;
    line-height: 1.4;
	color: #1a1a1a;
}

.tool_customization {
    font-size: clamp(16px, 1vw + 12px, 18px);
    line-height: 1.8;
	color: #333333;
}

/************************************************
* ボタン
************************************************/
.link_bt {
    text-align: center;
}

.link_bt a {
    display: block;
    padding: 1rem 2rem;
    font-size: clamp(1.8rem, 5vw, 2.4rem);
    background: #FFA654;	/* オレンジ */
    color: #FFFFFF;
    width: 100%;
    max-width: 40rem;
    margin: 3rem auto;
    border-radius: 8px;
    text-decoration: none;
    transition: transform .2s;
}

.link_bt a:hover {
    transform: translateY(-2px);
}

.link_bt a i {
    transition: transform .2s;
}

.link_bt a:hover i {
    transform: translateX(4px);
}

/* ボタンスタイル2 */
.bt_type2 a {
    background: #FFFFFF;
    color: #002CA3;
    border: 4px #002CA3 solid;
}

/* ボタンスタイル3 */
.bt_type3 a {
    background: #005BAC;
    color: #FFFFFF;
}

/************************************************
* タイトルに50%の下線を引く
************************************************/
.title_accent {
    position: relative;
    display: inline-block;
    padding-bottom: 1rem;
    margin-bottom: 5rem;
}

.title_accent::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 90%;
    height: 3px;
    background: #002CA3;
}

/************************************************
* 現行ツールだけでは解決できない現場の課題を解決します
************************************************/
.top_head {
	background-position:center;
	background-image: url('./picture/tool_customization/top_view.png');
	background-size: cover;
	height: clamp(300px, 60vw, 600px);
	background-repeat: no-repeat;
	margin-top: 0;
	margin-bottom: 0;
}

.top_head h1 {
	padding-top: 2rem;
	font-size: clamp(3rem, 5vw, 5rem);
	font-weight: bold;
	color: white;
	text-shadow: 1px 1px 5px black, -1px 1px 5px black, 1px -1px 5px black, -1px -1px 5px black;
}

/************************************************
* ツールを現場に合わせる「ツールカスタマイゼーションサービス」
************************************************/
.second_head {
	margin-top: 0;
	margin-bottom: clamp(3rem, 6vw, 12rem);
}

.second_head h2 {
	text-align: center;
	font-size: clamp(2rem, 5vw, 3rem);
}

.second_head p {
	font-size: clamp(1.8rem, 5vw, 2.5rem);
}

.second_check {
	margin: 4rem 0 clamp(4rem, 6vw, 8rem) 0;
}

.second_check i {
	color: #002CA3;
}

/************************************************
* 現場でこんなお悩みはありませんか？
************************************************/
.problem {
	margin-bottom: clamp(3rem, 6vw, 12rem);
}

.problem_base {
	background-color: #F2F2F2;
	padding-bottom: 3rem;
}

.problem_base i {
	color: #002CA3;
}

.problem_base img {
    max-width: 70%;
    height: auto;
}

.problem_result {
    font-size: clamp(18px, 2vw, 21px);
    font-weight: 700;
	color: #1a1a1a;
}

/************************************************
* その課題、ツールカスタマイズで解決できます
************************************************/
.solution {
	margin-bottom: clamp(3rem, 6vw, 12rem);
}

.sol_card {
	margin-top: 1rem;
	padding: 3rem 1rem;
	min-height: 18rem;
	border: 2px #002CA3 solid;
}

.sol_card p {
	padding: 1rem 1.5rem;
}

.sol_card i {
	color: #002CA3;
}

/************************************************
* 事例紹介
************************************************/
.case_studies {
	margin-bottom: clamp(3rem, 6vw, 12rem);
}

.case_card {
	text-align: center;
	margin-top: 2rem;
	padding: 2rem 1.5rem;
	background-color: #F2F2F2;
}

.case_card img {
	margin-bottom: 1rem;
	width: clamp(100px, 8vw, 120px);
	height: auto;	
}

.case_card h3 {
	margin-bottom: 1rem;
}

/* 事例の白い箱 */
.case_body {
	text-align: left;
	background-color: #FFFFFF;
	padding: 1rem 1rem;
	min-height: 30rem;
}

/* 課題・対応・効果 */
.case_head {
	color: #002CA3;
	margin-bottom: 0;
}

.case_head i {
    font-size: clamp(16px, 2vw, 18px);
}

/* 詳しくは事例集で */
.case_epilogue {
	text-align: center;
	margin-top: 5rem;
    font-size: clamp(24px, 3vw, 28px);
}

.case_epilogue i {
	color: #002CA3;
}

/************************************************
* 事例集を無料公開中
************************************************/
.download {
	margin-bottom: clamp(3rem, 6vw, 12rem);
}

.download img {
	margin: 2rem 0;
    max-width: 75%;
    height: auto;
    transition: transform 0.2s;
}

.download a:hover img {
    transform: translateY(-4px);
}

.download_index h3 {
    font-size: clamp(19px, 3vw, 24px);
}

.download_index p {
	padding-left: 4em;
	text-indent: -4em;
    line-height: 1.1;
}

/************************************************
* 対応価格
************************************************/
.price_list {
	margin-bottom: clamp(3rem, 6vw, 12rem);
}

.price_list_body {
    font-size: clamp(18px, 5vw, 20px);
}

.price_list_body p {
	margin-bottom: 4rem;
}

.price_list_body ul {
    line-height: 1;
	margin-bottom: 5rem;
}

/************************************************
* ご利用の流れ
************************************************/
.usage_flow {
	margin-bottom: clamp(3rem, 6vw, 12rem);
}

.usage_flow_body p:not(.usage_flow_head) {
	margin-left: 4rem;
}

.usage_flow_head {
	margin-top: 2rem;
    font-size: clamp(21px, 3vw, 24px);
	border-bottom: 2px #002CA3 dotted;
	font-weight: 700;
}

.usage_flow_head span {
	background-color: #002CA3;
	color: #FFFFFF;
	padding: 1px 1rem;
	margin-right: 1rem;
}

/************************************************
* こんな時はご相談ください
************************************************/
.soudan {
	margin-bottom: clamp(3rem, 6vw, 12rem);
}

.soudan_body {
	padding-top: 5rem;
	padding-bottom: 3rem;
	background-color: #F2F2F2;
    font-size: clamp(21px, 5vw, 24px);
}

.soudan_body ul {
	margin-bottom: 5rem;
}

.soudan_body p {
    font-size: clamp(18px, 3vw, 20px);
}

/************************************************
* 評価貸出し実施中
************************************************/
.free_trial {
	margin-top: 5rem;
	text-align: center;
    font-size: clamp(16px, 2vw, 21px);
}

.free_trial_head {
    font-size: clamp(16px, 4vw, 32px);
    font-weight: 700;
}