@charset "UTF-8";
#feature {
  display: flex;
  flex-direction: column;
}
#feature .top_bottom{
	padding: 8em 0 0 0;
}
#feature .feature_section {
 padding: 8em 0;/*0 0 8em 0;*/
}
#feature .contents_box {
    max-width: 1000px;
    margin: 0 auto;
    /* padding: 0 2%; */
}
/*スマホ-----------------------------*/
@media (max-width:820px) {
#feature .top_bottom {
    padding: 4em 0 0 0;
}
	#feature .feature_section {
    padding: 4em 0;/*0 0 4em 0;*/
}
   #feature .contents_box {
        width: 90%;
        padding: 0;
}
	
}
/*見出し
------------------------------------------------*/
#feature h2{
	color: #0d4394;
	padding-bottom: 2rem;
	max-width: 1000px;
	margin: 0 auto;
}
#feature .subtitle_wrap {
 display: flex;
 /*justify-content: center;*/
 align-items: center;
 margin-bottom: 3em;
}
/*#feature .subtitle_wrap span {
font-size: 50px;
	font-family: Helvetica, "sans-serif";
	font-weight: bold;
	color: #0d4394;
}*/

#feature .subtitle_wrap > h3 {
 font-size: clamp(21px, 4.5vw, 30px);
 position: relative;
 display: block;
 font-weight: bold;
 padding: 0;
 letter-spacing: .05em;
 line-height: 1.4;
 text-align: left;
	padding-left: 130px;
}
#feature .subtitle_wrap > p.number {
     font-size: clamp(60px, 8vw, 90px);
    color: #0d4394;
    position: absolute;
    /*left: 5.5rem;
    top: -10rem;*/
    font-family: "Outfit", sans-serif;
    font-weight: bold;
}
/*#feature .subtitle_wrap h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 50px;
    height: 70px;
    background: url(/ts/wp-content/themes/base/img/gaiyou/icon-award.svg) no-repeat center / cover;
    aria-hidden: true;
}*/
#feature .subtitle_wrap > h3 span {
 font-size: 24px;
 color: #0d4394;
 display: block;
 margin: 0 0 0.4em;
 padding: 0;
 text-align: left;
 letter-spacing: normal;
}

#feature .subtitle_wrap_2 {
 display: flex;
 justify-content: center;
 align-items: center;
 margin-bottom: 3em;
}

#feature .subtitle_wrap_2 > h3 {
 font-size: clamp(24px, 6.5vw, 30px);
 position: relative;
 display: block;
 font-weight: bold;
 padding: 0;
 letter-spacing: .05em;
 line-height: 1.1;
 text-align: center;
}

#feature .subtitle_wrap_2 > h3 span {
 font-size: 24px;
 color: #0d4394;
 display: block;
 margin: 0 0 0.4em;
 padding: 0;
 /*text-align: left;*/
 letter-spacing: normal;
}

/*スマホ-----------------------------*/
@media (max-width:820px) {
#feature h2{
	width: 90%;
}
 #feature .subtitle_wrap {
  margin-bottom: 1em;
	 position: relative;
 }
	#feature .subtitle_wrap > h3 {
	padding-left: 100px;
}
	#feature div.subtitle_wrap > h3 span {
  font-size: 16px;
 }
	 #feature .subtitle_wrap_2 {
	justify-content: unset;
  margin-bottom: 2em;
 }
	#feature  .subtitle_wrap_2 > h3 {
  text-align: left;
 }
	#feature  div.subtitle_wrap_2 > h3 span {
  font-size: 16px;
 }
}

@media (max-width:820px){
  /* 疑似要素をフレックスの先頭に並べる */
  #feature .f_right .wide,
  #feature .f_left .wide{
    display: flex;
    flex-direction: column;  /* 上から下へ */
  }

  /* 右寄せの画像（01 & 03）を先頭へ */
  #feature .f_right .wide::after,
  #feature .f_right2 .wide::after{
    order: -1;               /* 先頭に移動 */
    position: static;        /* 絶対配置を解除 */
    display: block;
    width: 95%;
    height: 200px;           /* 好みで */
    margin: 0 0 1.25em auto; /* 右寄せ */
    box-shadow: -10px 10px 0 #0d4394;
  }

  /* 左寄せの画像（02）を先頭へ */
  #feature .f_left .wide::after{
    order: -1;
    position: static;
    display: block;
    width: 95%;
    height: 200px;
    margin: 0 auto 1.25em 0; /* 左寄せ */
    box-shadow: 10px 10px 0 #0d4394;
  }

  /* 本文ブロックは従来どおり縦積みでOK */
  #feature .f_right .both,
  #feature .f_left  .both{
    display: block;
  }
}


/*-----------------------------------
  経営理念
-----------------------------------*/
#feature p.slogan{
	font-size: 25px;
	font-weight: 600;
	padding-bottom: 2rem;
}
@media (max-width:820px) {
#feature p.slogan{
	font-size: 21px;
	padding-bottom: 1rem;
	line-height: 1.5;
}
}
/*-----------------------------------
  3つのポイント
-----------------------------------*/
#feature .tsuyomi .feature_section:nth-of-type(1){
	padding: 0 0 8em 0;
}
#feature .f_right .both{
	display: flex;
}
#feature .f_right .left,
#feature .f_right .right{
	flex: 1;
	/*padding: 10px;*/
}
#feature .f_right .wide{
	position: relative;
	overflow: visible;
}
#feature .f_right .wide::after {
  content: "";
  display: block;
  width: 40%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  border-radius: 10px;
  background-size: cover;
  background: url(../img/feature/tsuyomi_01.jpg) no-repeat center/cover;
	 box-shadow: -20px 20px 0 #0d4394;
}
#feature .f_right2 .wide::after {
  content: "";
  display: block;
  width: 40%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  border-radius: 10px;
  background-size: cover;
  background: url(../img/feature/tsuyomi_03.jpg) no-repeat center/cover;
	 box-shadow: -20px 20px 0 #0d4394;
}
#feature p.text{
	margin-bottom: 5em;
}
#feature .f_left {
	position: relative;
}
#feature .f_left::after {
	content: "";
	position: absolute;
	background-color: #d5ecfc;
	top:0;
	right: 0;
	height: 100%;
		width:90%;
	z-index: -1;
}

#feature .f_left .both{
	display: flex;
}
#feature .f_left .left,
#feature .f_left .right{
	flex: 1;
	/*padding: 10px;*/
}
#feature .f_left .wide{
	position: relative;
	overflow: visible; /* ← 影を表示させるために必要 */
}
#feature .f_left .wide::after {
  content: "";
  display: block;
  width: 40%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 10px;
  background-size: cover;
  background: url(../img/feature/tsuyomi_02.jpg) no-repeat center/cover;
	 box-shadow: 20px 20px 0 #0d4394;
}
/*#feature .f_left p {
	margin-bottom: 5em;
}*/
#feature .feature_btn {
	/*margin-bottom: 5em;*/
	display: flex;
	gap: 10px;
}
#feature .feature_btn a {
	display: block; margin-top: 10px;
}
/*スマホ-----------------------------*/
@media (max-width:820px) {
	#feature .tsuyomi .feature_section:nth-of-type(1){
	padding: 0 0 4em 0;
}
	#feature .feature_section {
    padding: 4em 0;
}
#feature .f_right .both{
	display: block;
}
#feature .f_right .wide::after {
    position: static;       /* ← absolute解除 */
    display: block;         /* フローに従って表示 */
    width: 95%;
    height: 200px;
	box-shadow: -10px 10px 0 #0d4394;
	margin: 0 0 2em auto; 
  }
#feature .f_right .button-1 {
    display: block;
  margin: 0 auto;
	width: 200px
}
#feature p.text{
	margin-bottom: 1em;
}
	#feature .f_left .both{
	display: block;
}
#feature .f_left::after {
		width:100%;
}
#feature .f_left .wide::after {
    position: static;       /* ← absolute解除 */
    display: block;         /* フローに従って表示 */
    width: 95%;
    height: 200px;
	box-shadow: 10px 10px 0 #0d4394;
	margin: 0 0 2em auto; 
  }
#feature .f_left .button-1 {
    display: block;
  margin: 0 auto;
	width: 200px
}
/*#feature .f_left p{
	margin-bottom: 2em;
}*/
#feature .feature_btn .button-1 {
	/*margin-bottom: 2em;*/
	padding: .8em 2em;
}
#feature .feature_btn .button-1 i {
    right: 11px;
}
}


/*-----------------------------------
  業務のご案内
-----------------------------------*/
#feature .gyomu{
	padding: 8em 0 8em 0;
	background-color: #d5ecfc;
}
#feature .gyomu h2 span {
    background-color: #fff;
	padding: 10px 20px;
}
#feature .gyomu h3{
	font-size: clamp(19px, 3.5vw, 25px);
    color: #0d4394;
    margin-bottom: 3rem;
    align-items: center;
    gap: 20px;
	display: flex;
	line-height: 1.4;
}
#feature .gyomu h3::before {
    content: "";
    background-color: #0d4394;
    border-radius: 3px;
    width: 6px;
    height: 60px;
    flex: 0 0 8px;
}

/*#feature .gyomu .both{
	display: flex;
	border-radius: 10px;
	padding: 3rem  5rem;
	gap: 2rem;
	position: relative;
	background-color: #fff;
}
#feature .gyomu .both + .both{
	margin-top: 2rem;
}
#feature .gyomu .left{
	flex: 2;
}
#feature .gyomu .right{
	flex: 1;
}
#feature .gyomu img{
	 max-width:190px;
  width:auto;
  height:auto;
	position: absolute;
	right: -40px;
   top: 50px;
}*/

/* 1列にする（必要なら） */
#feature .gyomu ul{
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

/* 高さを統一：clampで端末に応じて可変 */
#feature .gyomu .both{
  min-height: clamp(260px, 34vw, 320px);
  display: flex;
  gap: 2rem;
  border-radius: 10px;
  padding: 3rem 5rem;
  position: relative;
  background: #fff;
}
#feature .gyomu .left{
	flex: 2;
}
#feature .gyomu .right{
	flex: 1;
}
#feature .gyomu .right img {
  position: absolute;
  right: -40px; /* 画像を右に40pxずらす */
  top: 45px;
  max-width: 340px;
  height: auto;
}
/* 文章が長いカードのはみ出しを防ぐために行数制限 */
/*#feature .gyomu .left p{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}*/

/*スマホ-----------------------------*/
@media (max-width:820px) {
#feature .gyomu {
    padding: 4em 0 4em 0;
}
	#feature .gyomu h2 {
    width: 100%;
}
	#feature .gyomu h2 span {
	padding: 5px 10px;
  
}
	#feature .gyomu h3{
    margin-bottom: 2rem;
}
		#feature .gyomu li p{
    margin-bottom: 2rem;
}
#feature .gyomu .both{
  display: block;
	padding: 3rem 3rem;
}	
#feature .gyomu .right {
  text-align: center;
}
#feature .gyomu .right img {
  position: static;
	max-width: 100%;
}

}