/* ===============================================
   single-case-study2.php 専用CSS
   既存のWordPress追加CSSから移植・整理
   =============================================== */

/* archive START */
.archive-case_contents{
    width: calc((100% - 4rem) / 3);
	height : 50rem;
    border: #d6d6d9 solid 1px;
    box-sizing: border-box;
    position: relative;
}
.archive-case_contents  .inner_text{
	margin-top : 1rem;
}
.archive-case_top_image{
	height : 20rem;
	background-color:#ffffff;
	display: grid;
	justify-items: start;
  align-items: center;
  /*border: 2px dashed #888;*/
	margin-bottom: 0rem;
}
.archive-taxonomies{
	margin-bottom: 2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 2px dashed #888;
}
.archive-taxonomies li{
	display: inline;
}
.archive-case_img{
  width : 100%;
	height : 3rem;
	margin-bottom : 1.5rem;
}

.archive-case_img img{
  width : 6rem;
}
.archive-case_company_name{
	font-size:1.5rem;
	white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
	margin-bottom: 1rem;
	font-weight:normal;
}
.archive-case_title{
	height : 6rem;
	font-size : 2rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;/* 表示したい行数に調整 */
  overflow: hidden;
	margin-bottom: 4rem;
}

/* Case2CSS　START */
.company-info img {
	width: 100px;
  height: auto;
}
.case-title h2{
	font-size: calc(100vw / 50);
}
.case-title img{
	margin-top:50px;
	width: 130px;
  height: auto;
	margin-bottom:5px
}
.case-taxonomies {
	margin-bottom: 5rem;
}
.case-taxonomies li{
	display: inline-block;
	word-break: keep-all;
	overflow-wrap: break-word;
}
.case_study2_category_tags_industry{
	font-size: 1.3rem;
	font-weight : bold;
	margin-top: 0.1rem;
	margin-bottom: 0.1rem;
	margin:0.2rem;
	width: auto;
	min-width: 6rem;
	background-color: #8AE4AE; 
  color: #FFFFFF;
  padding: 1.5px;
	padding-left:1rem;
	padding-right: 1rem;
  border: 1px solid #8AE4AE;
  border-radius: 3em; /* ← ここで丸み */
	text-align: center;
}
.case_study2_category_tags_issue{
	font-size: 1.3rem;
	font-weight : bold;
	margin-top: 0.1rem;
	margin-bottom: 0.1rem;
	margin:0.2rem;
	width: auto;
	min-width: 6rem;
	background-color: #66AEF6;
  color: #FFFFFF;
  padding: 1.5px;
	padding-left:1rem;
	padding-right: 1rem;
  border: 1px solid #66AEF6;
  border-radius: 3em; /* ← ここで丸み */
	text-align: center;
}
.case_study2_category_tags_solution{
	font-size: 1.3rem;
	font-weight : bold;
	margin-top: 0.1rem;
	margin-bottom: 0.1rem;
	margin:0.2rem;
	width: auto;
	min-width: 6rem;
	background-color: #FF8193; 
  color: #FFFFFF;
  padding: 1.5px;
	padding-left: 1rem;
	padding-right: 1rem;
  border: 1px solid #FF8193;
  border-radius: 3em; /* ← ここで丸み */
	text-align: center;
}
.case_study2_category_tags_period{
	font-size: 1.3rem;
	font-weight : bold;
	margin-top: 0.1rem;
	margin-bottom: 0.1rem;
	margin:0.2rem;
	width: auto;
	min-width: 6rem;
	background-color: #AEBDCC; 
  color: #FFFFFF;
  padding: 1.5px;
	padding-left:1rem;
	padding-right: 1rem;
  border: 1px solid #AEBDCC;
  border-radius: 3em; /* ← ここで丸み */
	text-align: center;
}
.case_study2_category_tags_phase{
	font-size: 1.3rem;
	font-weight : bold;
	margin-top: 0.1rem;
	margin-bottom: 0.1rem;
	margin:0.2rem;
	width: auto;
	min-width: 6rem;
	background-color: #FFA28A; 
  color: #FFFFFF;
  padding: 1.5px;
	padding-left:1rem;
	padding-right: 1rem;
  border: 1px solid #FFA28A;
  border-radius: 3em; /* ← ここで丸み */
	text-align: center;
}
.case_study2_category_tags_service_type{
	font-size: 1.3rem;
	font-weight : bold;
	margin-top: 0.1rem;
	margin-bottom: 0.1rem;
	margin:0.2rem;
	width: auto;
	min-width: 6rem;
	background-color: #666666; 
  color: #FFFFFF;
  padding: 1.5px;
	padding-left:1rem;
	padding-right: 1rem;
  border: 1px solid #666666;
  border-radius: 3em; /* ← ここで丸み */
	text-align: center;
}
.company-info-main {
	 min-height:10rem;
	margin-bottom: 6rem;
}
/* 導入前の課題 START*/
.company-issue {
	margin-bottom: 10rem;
}
.case2_detail_info_container {
  display: flex;
  align-items: center;
  justify-content: center;
	height:40rem;
  padding: 5rem 0;
}
.case2_detail_list {
  background-color: #f4f4f8;
  padding-top: 4rem;
  padding-bottom: 2rem;
  width: 100%;
}
.case2_detail_info_content {
	display: flex;
	align-items: center; 
	margin-top: 3rem;
	margin-bottom: 3rem;
}

.case2_detail_info_content_head {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #ff643b;
	border-radius: 50%;
	width: 10rem;
	height: 10rem;
	margin-right: 2rem;
	text-align: center;
}
.case2_detail_info_content_head h4{
	font-size: 1.8rem;
	width: 10rem;
	color: #FFFFFF;
	position: relative;
	top: 0.2rem;
	text-align: center;
}
.case2_detail_info_content_main {
	flex: 1;
	max-width: calc(100% - 12rem);
	box-sizing: border-box;
	min-height: 10rem;
}
.case2_detail_info_content_main p{
	display: flex;
	align-items: center;
	min-height: 10rem;
	width: 100%;
	max-width: 99rem;
	font-size: 1.9rem;
	font-weight: 600;
	text-align: left;
	box-sizing: border-box;
	line-height: 1.6;
}
.case2_detail_head2{
	width:100%;
}
.case2_detail_info_content_main_p1{
	padding : 1.5rem;
	background-color: #FFECE7;
}

.case2_detail_info_content_main_p2{
	padding : 1.5rem;
	background-color: #FFFFFF;
}
.case2_detail_info_content_main_p3{
	padding : 1.5rem;
	background-color: #FFECE7;
}
/* 矢印スタイル */
.case2_detail_arrow {
	text-align: center;
	margin: 2rem 0;
	position: relative;
}
.arrow-down {
	display: inline-block;
	position: relative;
	width: 59px;
	height: 25px;
	background: #D9D9D9;
	clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
}
/* 導入前の課題 END*/
/* 追加情報 START*/
.additional-info-container{
	margin-bottom: 1rem;
}
.additional-info-content{
	font-size: 2rem;
	margin-top: 1rem;
	margin-bottom: 1rem;
  width: 25rem;           /* 幅を指定 */
  margin-left: 0;         /* 左寄せ */
  margin-right: auto;     /* 右側を自動で余白 → 左に寄る */
	background-color: #ff643b;  /* 背景をオレンジに */
  color: white;              /* 文字を白に */
  padding: 10px 15px;        /* 内側の余白で読みやすく */
  border-radius: 4px;        /* 角を少し丸めてもOK（任意） */
  font-weight: bold;         /* 見出しっぽく強調（任意） */
}
.additional-info-flex {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap; /* スマホで縦並びになるよう対応 */
}
/* 幅の比率を 7:3 に */
.additional-container-left {
  flex: 0 0 67%;
  background-color: #ffffff;
  box-sizing: border-box;
}
.additional-container-right {
  flex: 0 0 30%;
  background-color: #ffffff;
	padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
	margin-left: auto;
}
.additional-container-right img {
  max-width: 100%;
  height: auto;
  display: block;
}
.additional-container-right-1{
	margin-bottom: 4rem;
}
.additional-container-right-2{
	margin-bottom: 4rem;
}
.additional-container-right-3{
	margin-bottom: 4rem;
}
/*　ソリューション　START*/
.case2_solution-info {
  background-color: #EDF5FE;
  border-radius: 2em;
	margin-bottom: 8rem;
}
.case2_solution-info div{
	margin-top: 2rem;
	margin-left: 1rem;
	margin-right: 1rem;
	margin-bottom: 2rem;
}
.solution_detail_block_flex {
	display: flex;
	align-items: flex-end;
	gap: 2rem;
}
/* .solution_detail_block_flex .b_tenten {
	margin-top: 28px;
} */
.case2_solution-info_main h2{
	font-size:2.5rem;
	margin-bottom: 2rem;
}
.case2_solution-info_main h3{
	font-size:3rem;
}
.case_detail_voice_content{
	margin-bottom: 6rem;
}
.case_detail_voice {
	background-color: #f4f4f8;
	margin-top: 10rem;
	padding-bottom: 10rem;
	width: 100vw;
	margin-left: calc(50% - 50vw);
}
.case_detail_voice .container {
	padding-top: 6rem;
}

/* レスポンシブ対応 - モバイル表示 */
@media (max-width: 768px) {
    /* case2_detail_info_content_headを四角くする */
    .case2_detail_info_content_head {
        border-radius: 0;
        width: 100%;
        height: 6rem;
        margin-right: 0;
        margin-bottom: 2rem;
    }
    
    /* コンテンツ配置を縦並びに */
    .case2_detail_info_content {
        flex-direction: column;
        align-items: stretch;
    }
    
    .case2_detail_info_content_head h4 {
        width: 100%;
        font-size: 1.5rem;
    }
    
    .case2_detail_info_content_main {
        max-width: 100%;
    }
    
    .case2_detail_info_content_main p {
        width: 100%;
        min-height: 8rem;
        font-size: 1.6rem;
        line-height: 1.5;
    }
}

@media (max-width: 480px) {
    .case2_detail_info_content_head {
        height: 5rem;
    }
    
    .case2_detail_info_content_head h4 {
        font-size: 1.3rem;
    }
    
    .case2_detail_info_content_main {
        max-width: 100%;
    }
    
    .case2_detail_info_content_main p {
        font-size: 1.4rem;
        min-height: 6rem;
        width: 100%;
        max-width: none;
        padding: 1rem;
        line-height: 1.4;
    }
    
    .case2_detail_list {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* additional-info-flex を縦並びに */
    .additional-info-flex {
        flex-direction: column;
    }
    
    .additional-container-left {
        flex: none;
        width: 100%;
        margin-bottom: 2rem;
    }
    
    .additional-container-right {
        flex: none;
        width: 100%;
        margin-left: 0;
    }
    
    /* solution_detail_block_flex を縦並びに */
    .solution_detail_block_flex {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }
    
    .case2_solution-info_main {
        width: 100%;
        text-align: center;
        margin-bottom: 2rem;
    }
    
    .case2_solution-info_right {
        width: 100%;
        text-align: center;
    }
    
    .case2_solution-info_right img {
        max-width: 100%;
        height: auto;
    }
    
    /* b_tentenリンクのはみ出し対策 */
    .case2_solution-info_main .b_tenten {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
        word-wrap: break-word;
        overflow-wrap: break-word;
        font-size: 1.8rem;
        padding: 1rem;
        text-align: center;
    }
}

/* Voice Section CSS */
.voice {
	padding: 0;
}

/* Case2CSS　END */