@charset "utf-8";

/* 法人カラー #4f8b29 */

@media screen and (min-width:901px) {
.site-header{
border-top: #4f8b29 solid 7px;
}
}


body{
font-size: 16px;
}
@media (max-width: 640px) {
body{
font-size: 15px;
}
}
#pan{
max-width: 900px;
margin: 0 auto 40px;
}
@media (max-width: 640px) {
#pan{
display:none;
}
}

.contents_inner{
width:90%;
margin:0 auto;
}

/* ===================================================
ページタイトル部分
====================================================== */

.corp_ttl {
margin-top:156px;
position: relative;
width: 100%;
/* 上から下へのグラデ + 右寄せイメージ */
background:linear-gradient(180deg,rgba(219, 229, 225, 1) 0%, rgba(202, 221, 215, 1) 100%);

height:284px;
width:100%;
}

/* ── inner は「左テキスト」と「SP画像」を左右に並べるだけ ── */
.corp_ttl--inner {
width: 100%;
padding: 65px 20px 0;
background-image: url(../images/corp/mainpict_pc.jpg);
background-position: right bottom;
background-repeat: no-repeat;
height: 284px;
}

.corp_ttl--text{
max-width: 900px;
margin: 0 auto;
text-align:left;

}

/* 小見出し＋サブタイトル */
.corp_ttl--headline {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
margin-top:20px;
}

/* ラベル */
.headline_label {
background-color: #4F8A26;
color: #fff;
font-size: 14px;
font-weight: 700;
padding: 4px 12px;
border-radius: 2px;
}

/* サブテキスト */
.headline_sub {
font-size: 17px;
color: #333;
font-weight: 700;
}

/* メインタイトル */
.corp_ttl--text h2 {
font-size: 32px;
line-height: 1.3;
color: #222;
font-weight: 700;
margin: 0;
padding:6px 0 30px 60px;
text-align: left;
background-image: url("../images/corp/logo_shield.png");
background-size:50px;
background-repeat:no-repeat
}
.corp_ttl--text h2 .sp{
display: none;
}

/* SP画像はモバイル時だけ表示 */
.corp_ttl--inner img.sp {
display: none;
}

@media (max-width: 1400px) {
.corp_ttl--inner{
padding:40px 0;
background-position: right -60px bottom 0;
}
.corp_ttl--text {
max-width: 84%;
}
.corp_ttl--text h2 .sp{
display: inline;
}
}
@media (max-width: 990px) {
.corp_ttl--text h2{
font-size:30px;
}
}
@media (max-width: 900px) {
.corp_ttl {
margin-top: 59px;
height:260px;
}
.corp_ttl--inner {
background-image: url(../images/corp/mainpict_tab.jpg);
height:260px;
}
.corp_ttl--text {
max-width: 90%;
}
.corp_ttl--text h2{
font-size:26px;
line-height:1.6;
}
}


/* ── モバイル調整 ── */
@media (max-width: 640px) {

.corp_ttl {
background: none;
height: auto;
}
.corp_ttl--inner {
background: none;
padding: 0;
position:relative;
height: auto;
}
.corp_ttl--inner img.sp {
display: block;
width: 100%;
height: auto;
margin-top: 24px;
}
.corp_ttl--text{
margin-bottom:40px;
}
.corp_ttl--text h2 {
font-size: 23px;
background-size:44px;
padding:6px 0 0 55px;
background-position: top 4px left 0;
}
.corp_ttl--headline {
margin-top:-20px;
flex-direction: column;    /* 横並び → 縦並び */
align-items: flex-start;   /* 左寄せしたい場合 */
gap: 8px;                  /* 縦方向の間隔を調整 */
}
}


/* ===================================================
導入部
====================================================== */

.corp_intro {
max-width:720px;
width:90%;
margin:0 auto;
padding:0 0 50px;
}
@media only screen and (max-width:640px){
.corp_intro {
padding:0 0 20px;
}
}


.corp_intro_text {
margin-bottom: 40px;
text-align: left;
}

.corp_intro_kadai {
max-width: 686px;
width:100%;
margin: 0 auto 40px;
background-color: #EEF0EB;
border-radius: 4px;
overflow: hidden;
}

.corp_intro_kadai--headline {
background-color: #4F8A26;
color: #fff;
font-size: 20px;
font-weight: 700;
padding: 12px;
}
@media only screen and (max-width:640px){
.corp_intro_kadai--headline {
font-size: 16px;
}
}
.corp_intro_kadai ul {
padding: 36px 30px;
}
@media (max-width: 640px) {
.corp_intro_kadai ul {
padding: 36px 20px;
}
}
.corp_intro_kadai li {
position: relative;
padding-left: 32px;
margin-bottom: 12px;
font-size: 16px;
line-height: 1.6;
color: #333;
text-align:left;
font-weight:700;
}
@media (max-width: 640px) {
.corp_intro_kadai li {
margin-bottom: 15px;
}
}
.corp_intro_kadai li:last-child {
margin-bottom: 0;
}

.corp_intro_kadai li::before {
content: "";
position: absolute;
left: 0;
top: 3px;
width: 18px;
height: 18px;
background: url("../images/corp/mark_check.svg") no-repeat center center;
background-size: contain;
}


/* ===================================================
特徴
====================================================== */

.contents_auto.shield_features {
  padding: 83px 0;
		background-color: #f7f7f7;
}
@media only screen and (max-width:640px){
.contents_auto.shield_features {
  padding: 70px 0 50px;
		background-color: #f7f7f7;
}
}
.contents_inner{
  max-width: 900px;
  margin: 0 auto;
}

.shield_features--ttl {
  text-align: center;
  margin-bottom: 50px;
		position: relative;
display: inline-block;
}

.shield_features--ttl:before {
position: absolute;
left: 0;
top: 0;
content: "";
width: 1px;
height: 90%;
background: #7ca85f;
border-radius: 3px;
transform: rotate(-25deg);
margin-left:-30px;
}
.shield_features--ttl:after {
position: absolute;
content: "";
right: 0;
top: 0;
width: 1px;
height: 90%;
background: #7ca85f;
border-radius: 3px;
transform: rotate(25deg);
margin-right:-30px;
}

@media only screen and (max-width:480px){
.shield_features--ttl:before {
background: none;
}
.shield_features--ttl:after {
background: none;
}
}


.shield_features--ttl h3 {
  font-size: 28px;
  font-weight: bold;
		margin-bottom:6px;
}
@media only screen and (max-width:640px){
.shield_features--ttl h3 {
  font-size: 22px;
}
}
.shield_features--ttl h3 span {
color: #4f8b27;
}

.shield_features--ttl_sub {
font-size: 16px;
color: #666;
margin-top: 8px;
font-weight:700;
}
@media only screen and (max-width:640px){
.shield_features--ttl_sub {
font-size: 15px;
}
}
.contents_auto.shield_features ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 30px; 
row-gap: 60px; 
list-style: none;
padding: 0;
margin: 0;
}
@media only screen and (max-width:767px){
.contents_auto.shield_features ul {
display: block;
}
}


.contents_auto.shield_features ul li {
display: flex;
}
@media only screen and (max-width:767px){
.contents_auto.shield_features ul li {
margin-bottom:30px;
}
}


.shield_features--box_point_area {
display: flex;
align-items: center;
flex-direction: column;
gap: 8px;
margin-bottom: 12px;
margin-right:12px;
}

.shield_features--box_point {
display: inline-flex;
align-items: center; 
background-color: #4f8b27;
color: #fff;
padding: 0px 8px 4px 8px;
font-size: 22px;
line-height: 1;
margin:2px 0 10px;
}

.shield_features--box_ico img{
width:48px;
height:auto;
}

.shield_features--box_point .label {
font-size: 10px;
margin: 4px 4px  0;
line-height: 1;
}

.shield_features--box_point .num {
font-size: 22px;
line-height: 1;
}

.shield_features--box_headline {
font-size: 18px;
font-weight: 700;
margin-bottom: 12px;
text-align: left;
}
@media only screen and (max-width:480px){
.shield_features--box_headline {
font-size: 16px;
}
}


.shield_features--box_text {
color: #333;
text-align: left;
}

/* ===================================================
3つの柱
====================================================== */

.shield_pillar {
width:100%;
background-image: url("../images/corp/pillar_bg.gif");
padding: 70px 0 80px;
}
@media only screen and (max-width:640px){
.shield_pillar {
padding: 70px 0 60px;
}
}

.shield_pillar--inner{
  max-width: 900px;
		width:90%;
  margin: 0 auto;
}

.shield_pillar h3 {
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 40px;
}
.shield_pillar h3 span {
  color: #4f8b27;
		font-size:48px;
}
@media only screen and (max-width:640px){
.shield_pillar h3 {
  font-size: 22px;
}
.shield_pillar h3 span {
		font-size:36px;
}
}


.shield_pillar--intro {
  text-align: center;
  margin-bottom: 40px;
}
@media only screen and (max-width:900px){
.shield_pillar--intro {
  text-align: left;

}
}



.shield_pillar--pict {
  text-align: center;
  margin-bottom: 40px;
}
.shield_pillar--pict img {
  display: inline-block;
  width: 465px;
  height: auto;
}

.shield_pillar3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px; 
  list-style: none;
margin-bottom:60px;
}
@media only screen and (max-width:900px){
.shield_pillar3 {
  display: block;
}
.shield_pillar3 li{
margin-bottom:50px;
}
}

.shield_pillar3 li dl {
  margin: 0;
}


.shield_pillar3 li dt {
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 12px;
  color: #333;
}

.shield_pillar3 li dt span {
  margin: 0 8px;
}
.shield_pillar3 li:nth-child(1) dt span { color:#475f8a; }
.shield_pillar3 li:nth-child(2) dt span { color:#5b8385; }
.shield_pillar3 li:nth-child(3) dt span { color:#d6a348; }


.shield_pillar3 li dd {
  text-align: left;
}

.shisou{
font-size:18px;
font-weight:700;
margin-bottom:30px;
}
@media only screen and (max-width:480px){
.shisou{
font-size:16px;
}
}

/* ===================================================
6つのステップ
====================================================== */

.shield_step{
background: url("../images/corp/step6.jpg") ;
background-repeat: no-repeat;
background-position: bottom;
background-size: 100%;
padding:80px 0 95px;
}

.shield_step--inner{
width:90%;
max-width:800px;
margin:0 auto;
}

.shield_step h3{
font-size:28px;
font-weight:700;
margin-bottom:40px;
}

.shield_step h3 span{
color:#4f8b29;
font-size:48px;
}

.shield_step--intro{
margin-bottom:60px;
}

.shield_step img{
max-width:700px;
}
@media only screen and (max-width:900px){
.shield_step img{
max-width:560px;
}
}
@media only screen and (max-width:640px){
.shield_step{
background-size: 150%;
padding:60px 0 75px;
}

.shield_step h3{
font-size:22px;
}
.shield_step h3 span{
color:#4f8b29;
font-size:36px;
}
.shield_step--intro{
text-align:left;
margin-bottom:40px;
}
.shield_step img{
max-width:600px;
width:100%;
}
}


/* ===================================================
価格
====================================================== */

.shield_price{
padding:80px 0;
}
@media only screen and (max-width:640px){
.shield_price{
padding:70px 0 60px;
}
}
.shield_price--innter{
width:90%;
max-width:900px;
margin:0 auto;
}

.shield_price h3{
font-size:28px;
font-weight:700;
margin-bottom:40px;
}

.shield_price h3 span{
color:#4f8b29;
}

.shield_price--intro{
margin-bottom:50px;
}
@media only screen and (max-width:900px){
.shield_price--intro{
text-align: left;
}
}
@media only screen and (max-width:640px){
.shield_price h3{
font-size:22px;
}
.shield_price--intro{
text-align: left;
}
}

/* アコーディオン初期非表示 */
.shield_price-item__content {
  display: none;
}


/* アコーディオンオープン時コンテンツ */
.shield_price-item__content dl {
display: flex;
align-items: flex-start;
border-bottom:#ddd solid 1px;
margin-bottom: 15px;
padding:15px 15px;
}

.shield_price-item__content dl dt {
flex: 0 0 180px;
margin: 0;
padding-right: 20px;
text-align: left;
}

.shield_price-item__content dl dd {
text-align: left;
flex: 1;
margin: 0;
padding: 0 15px 15px;
}

.shield_price-item__content dl dd .shield_price_label {
margin-bottom: 6px;
font-weight:700;
font-size:18px;
}
.shield_price-item__content dl dd .shield_price_text {
line-height: 1.6;
}
.shield_price-item__content dl dd .shield_price_text li{
padding-left: 1em;
text-indent: -1em;
}

@media only screen and (max-width:640px){
.shield_price-item__content dl {
display: block;
padding:4px;
}
.shield_price-item__content dl dt,
.shield_price-item__content dl dd {
display: block;
}
.shield_price-item__content dl dt {
font-weight: bold;
margin-bottom: 15px;
background-color:#f3f3f3;
padding: 2px 8px;
}
.shield_price-item__content dl dd {
margin-left:0;
margin-bottom: 12px;
padding:0 8px;
}
}

/* アコーディオンQA */
.shield_price-item__content dl.shield_price_qa{
display: block;
}
.shield_price-item__content dl.shield_price_qa dt{
display: block;
font-weight: bold;
margin-bottom: 15px;
background-color:#f3f3f3;
}
.shield_price-item__content dl.shield_price_qa dd{
display: block;
margin-left:0;
margin-bottom: 12px;
padding:0;
}


/* アコーディオンバー */
.shield_price-item__title {
background-color: #e4edda;
font-weight: 700;
font-size: 22px;
padding: 14px 20px;
position: relative;
cursor: pointer;
user-select: none;
text-align: left;
margin:30px 0 20px;
}
@media only screen and (max-width:900px){
.shield_price-item__title {
font-size: 18px;
}
}
@media only screen and (max-width:640px){
.shield_price-item__title {
font-size: 16px;
padding: 14px 40px 14px 14px;
}
}

/* 「＋」「ー」アイコン */
.shield_price-item__title::after {
content: "+";
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
display: inline-block;
width: 30px;
height: 30px;
line-height: 28px;
text-align: center;
font-size: 30px;
background-color: #fff;
}
@media only screen and (max-width:640px){
.shield_price-item__title::after {
right: 10px;
top: 12px;
transform: none;
width: 30px;
height: 30px;
line-height: 28px;
font-size: 24px;
}
}
.shield_price-item__title.active::after {
content: "−";
}



/* ===================================================
導入の流れ
====================================================== */

.shield_flow{
background-color: #f4f7f3;
padding:85px 0;
}
@media only screen and (max-width:640px){
.shield_flow{
padding:60px 0;
}
}

.shield_flow--inner {
  max-width: 900px;
		width:90%;
  margin: 0 auto;
}

.shield_flow__title {
font-size:28px;
  font-weight: 700;
  margin-bottom: 40px;
}
@media only screen and (max-width:640px){
.shield_flow__title {
font-size:22px;
}
}
.shield_flow-list {
  position: relative; 
  display: flex;
  justify-content: space-between;
  align-items: center; 
		margin-bottom:30px;
}

/* 貫く横線 */
.shield_flow-list::before {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
border-top: 2px solid #8cb080;
z-index: 1;
}
@media only screen and (max-width:767px){
.shield_flow-list::before {
border:none;
}
}


.shield_flow-item {
position: relative;
flex: 1;
margin: 0 8px;
}
@media only screen and (max-width:767px){
.shield_flow-item {
margin: 0;
}
}

.shield_flow-item--wide {/* ステップ４のみワイド */
flex: 1.5;
}

.shield_flow-item:first-child {
margin-left: 0;
}

.shield_flow-item:last-child {
margin-right: 0;
}
@media only screen and (max-width:900px){
.shield_flow-item--wide {
flex: 1.8;
}
}

.shield_flow-item__box {
position: relative;
z-index: 2;
border: 2px solid #8cb080;
border-radius: 4px;
padding: 30px 12px;
background-color: #ffffff;
text-align: center;
font-weight:500;
}
@media only screen and (max-width:900px){
.shield_flow-item__box {
padding: 8px 6px 10px;
font-size:15px;
letter-spacing: -0.5px;
}
}

.shield_flow-item__number {
display: block;
font-size: 36px;
font-weight: 700;
color: #a2c596;
margin-bottom: 25px;
}
@media only screen and (max-width:900px){
.shield_flow-item__number {
font-size: 24px;
margin-bottom: 8px;
line-height:1.0;
}
}

.shield_flow-item__text p {
margin: 0;
line-height: 1.5;
}
.shield_flow-item__text p + p {
margin-top: 4px;
}

.shield_flow__note{
font-weight:500;
}

@media screen and (max-width: 480px) {
.shield_flow__note{
text-align: left;
}
}


/* スマホ立て並び */
@media screen and (max-width: 767px) {
.shield_flow-list {
display: block;
max-width:480px;
margin:0 auto 25px;
background: linear-gradient(to top, #8cb080, #8cb080) repeat-y 50% / 2px;/* ボックス中央縦線 */
}
.shield_flow-item {
width: 100%;
margin-bottom: 16px; 
}
.shield_flow-item:last-child {
margin-bottom: 0;
}
}


/* ===================================================
無料相談
====================================================== */

.shield_consultation {
background-color:#4f8b27;
width:100%;
padding:0 0 80px;
}

.shield_consultation h3 {
color:#fff;
font-size:28px;
font-weight:700;
margin-bottom:35px;
}
@media only screen and (max-width:640px){
.shield_consultation h3 {
font-size:22px;
}
}
.shield_consultation--box {
max-width:890px;
width:90%;
margin:0 auto;
border-radius:8px;
background-color:#fff;
padding:55px;
}
@media only screen and (max-width:640px){
.shield_consultation--box {
padding:40px 20px;
}
}
.shield_consultation--intro {
margin-bottom:25px;
}

.shield_consultation ul {
text-align: left;
max-width:425px;
margin:0 auto 40px;
}

.shield_consultation ul li {
font-weight:700;
font-size:18px;
padding:4px 8px 4px 50px;
background: url("../images/corp/ico_check.png") no-repeat 0 10px;
background-size:24px;
}
.shield_consultation--closing {
font-weight:700;
font-size:18px;
}
@media only screen and (max-width:640px){
.shield_consultation ul li {
font-size:16px;
padding:4px 8px 4px 35px;
background-size:20px;
}
.shield_consultation--closing {
font-size:16px;
}
}
@media only screen and (max-width:420px){
.shield_consultation ul li {
font-size:16px;
padding:4px 8px 4px 28px;
background-size:18px;
}
.shield_consultation--closing {
font-size:16px;
}
}


.triangle--flow_after {
background:#f4f7f3;
height: calc(40px / 2);
width: 50px;
margin:0 auto 50px;
clip-path: polygon(-1px -1px, 100% -1px, 50% 100%);
}
.triangle--consultation_after{
background:#4f8b27;
height: calc(40px / 2);
width: 50px;
margin:0 auto;
clip-path: polygon(-1px -1px, 100% -1px, 50% 100%);
}

.footer_contact--outer{
background-color: #f7f7f7;
}