@charset "utf-8";

/* アイキャッチの余白を調整 */
.page:has(.snav.clone) .eyeCatch.fix_padding .text{padding-bottom: 2em;}
@media screen and (max-width:960px){
.page:has(.snav.clone) .eyeCatch.fix_padding .text{padding-bottom: 20px;}
}
/* 下部に複製されたナビゲーションは非表示 */
.page.strength .snav.clone:has(.overview_grid){display: none;}


  /* オーバービューセクション */
.overview_grid { display: flex; flex-wrap: wrap; gap:3em 0; padding: 40px;}

.strength_card { display: flex; flex-direction: column; align-items: center; padding: 1em 3em; color: #000; text-decoration: none; width: calc(100% / 3); position: relative; border-radius: 0.3em; transition: 0.2s background;}
.strength_card:hover{background: #dbf2ee;}

.card_title { position: absolute; top: 1em; left: 1em; font-family: "af"; line-height: 1; display: flex; flex-direction: column; align-items: center; gap:0.7em}
.card_title>.text {writing-mode: vertical-rl;}
.card_title>.num { font-weight: bold; color: #10aa8f; font-size: 160%;}

.card_wrapper { display: flex; flex-direction: column; gap: 1em; align-items: center; width: 100%;}

.card_image { width: 60%; height: auto;}
.card_image img { width: 100%; height: 100%; aspect-ratio:3/2; object-fit: contain; display: block; }

.card_text {position: relative; padding: 0 2.5em 0 0; font-size: min(1.2vw, 20px);}
.card_text:after {content: ""; display:inline-block; background: url(../img/overview_arrow.webp) no-repeat center / contain; width: 1.5em; height: 1.5em; position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
.card_text p{ text-align: left; font-weight: bold; margin: 0.5em 0; line-height: 1.4;}

@media screen and (max-width:960px){
.overview_grid { flex-direction: column; gap:2em 0; padding: 0; }
.strength_card { width: 100%; padding: 1em 0;}
.card_image { width: 50%;}
.card_text {align-self: flex-start; font-size: 110%; width: calc(100% - 1em); padding: 0 2.5em 0 1em;}
}

/* 強みメインセクション */
.strength_main { margin: 8em auto;}

.strength_main_items{display: flex; flex-direction: column; gap:10em; margin: 4em auto 10em;}

.strength_main_item{display: flex; flex-direction: row; align-items: center; width: 92%; position: relative; padding: 0 0 2em;}

.strength_main_item .image{flex: 1; position: relative; z-index: 10; overflow: hidden;}
.strength_main_item .image .num{font-size: 1600%; line-height: 1; font-family: "af"; color: #fff; position: absolute; z-index: 10; top: -0.21em; left: 0;}
.strength_main_item .image .num.fix_shadow{text-shadow: 0 0 0.3em rgba(16,170,143,0.5);}

.strength_main_item .eng{font-size: 600%; line-height: 1; font-family: "af"; color: #10AA8F; position: absolute; z-index: 10; bottom: -0.5em; right: 0; padding-bottom: 0.1em;}

.strength_main_item .text{font-size: min(1.1vw,18px); width: min(48%,900px); margin: 0 0 0 -24em; background: #eee; position: relative; z-index: 20; padding: 3em 3em 2em; line-height: 2; background: rgba(255,255,255,0.9); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);}
.strength_main_item .text .heading{font-size: min(2.4vw, 260%); font-weight: 600; font-feature-settings: "palt"; letter-spacing: 0.03em;}

/* 偶数は左右反転 */
@media screen and (min-width:961px){
.strength_main_item:nth-child(even){flex-direction: row-reverse; align-self: flex-end;}
.strength_main_item:nth-child(even) .image{text-align: right;}
.strength_main_item:nth-child(even) .image .num{left: auto; right: 0;}
.strength_main_item:nth-child(even) .eng{left: 0; right: auto;}
.strength_main_item:nth-child(even) .text{margin: 0 -24em 0 0;}
}

@media screen and (max-width:960px){
.strength_main { margin: 4em auto; }
.strength_main_items { gap: 4em; margin: 3em auto;}
.strength_main_item { flex-direction: column; align-items: flex-start; width: 100%; padding: 0; }
.strength_main_item .image{margin:0 auto 2em;}
.strength_main_item .image .num { font-size: 400%;}
.strength_main_item .eng { font-size: 160%; position: relative; bottom: auto; text-align: left; margin: 0 0 0.5em; padding: 0 1rem;}
.strength_main_item .text { font-size: 100%; width: 100%; margin: 0; padding: 0 1rem; background: none;}
.strength_main_item .text .heading { font-size: 160%; }
}