@charset 'utf-8';

/*---------- TSURUMI HERO ----------*/
.contents { padding:30px 0; }
.TSURUMI_hero { position: relative; }

.hero_wrap { position: relative; text-align: center; }

.hero_characters { margin-bottom: 20px; }
.hero_char_left { position: absolute; left: 0; width: 80px; }
.hero_char_right { position: absolute; right: 0; width: 80px; }

.hero_lines { text-align: center; margin-bottom: 20px; }
.hero_lines img { width: 120px; height: auto; }

.hero_title { font-size: 20px; font-weight: 700; line-height: 1.6em; display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top:24px; }
.hero_title_line { display: flex; align-items: end; gap: 8px; }
.hero_logo { height: 32px; width: auto; }
.hero_highlight { color: #EB6D2E; font-size: 24px; font-weight:700; background: linear-gradient(transparent 60%, #F5FD37 60%); }
.hero_highlight strong { font-weight:700; font-size:32px; }

@media screen and (min-width: 768px) {
    .contents { padding:30px 0; }
    .TSURUMI_hero { padding-top: 60px; }
    
    .hero_wrap { position:relative; }
    
    .hero_char_left { width: 180px; left: 20px; bottom:0; }
    .hero_char_right { width: 140px; right: 20px; bottom:0; }
    
    .hero_lines img { width: 200px; }
    
    .hero_title { font-size: 24px; flex-direction: row; justify-content: center; gap: 12px; }
    .hero_logo { height: 48px; }
    .hero_highlight { font-size: 32px; }
    .hero_highlight strong { font-size:72px; }
}

@media screen and (min-width: 1025px) {
    .hero_title { font-size: 28px; align-items: end;}
    .hero_logo { height: 56px; }
    .hero_highlight { font-size: 40px; font-weight:700;  background: linear-gradient(transparent 60%, #F5FD37 60%);}
}


/*---------- strong DETAIL ----------*/
.strong_detail_sec { position: relative; }
main .strong_detail_sec:nth-child(4) { padding-bottom:80px; }

.strong_detail_item { position: relative; padding-top: 40px; }

.strong_detail_box { position: relative; background: #FFF; padding: 40px 24px 40px 24px; margin-top: 40px; }

.strong_detail_number { position: absolute; top: -30px; left: 20px; font-size: 60px; font-weight: 500; color: #EB6D2E; font-family: "Arial Rounded MT Bold", Arial, sans-serif; letter-spacing: 0.08em !important; line-height: 1em; z-index: 1; }

.strong_detail_content { display: flex; flex-direction: column; gap: 24px; }


.strong_detail_title { font-size: 22px; font-weight: 700; line-height: 1.6em; margin-bottom: 20px; }
.strong_detail_title small { font-size: 16px; display: block;  }

.strong_detail_highlight { display: inline; background: linear-gradient(transparent 60%, #F5FD37 60%); }

.strong_detail_description { font-size: 14px; line-height: 1.8em; font-weight: 700; }
.strong_detail_description_highlight { display: inline; background: linear-gradient(transparent 60%, #F5FD37 60%); font-weight:700; }

.strong_detail_image { width: 100%; aspect-ratio: 4 / 3; overflow: hidden;  }
.strong_detail_image img { width: 100%; height: 100%; object-fit: cover; }

.strong_detail_illustration { position: absolute; bottom: 33vh; right: 22vw; width: 22%; }
.strong_detail_illustration img { width: 100%; height: auto; }

@media screen and (min-width: 768px) {
    main .strong_detail_sec:nth-child(4) { padding-bottom:120px; }
    .strong_detail_item { padding-top: 60px; }
    
    .strong_detail_box { padding: 60px 40px; margin-top: 60px; }
    
    .strong_detail_number { font-size: 120px; top: -40px; left: 40px; }
    
    .strong_detail_content { flex-direction: row; gap: 40px; align-items: flex-start; }
    
    .strong_detail_text { flex: 1; }
    
    .strong_detail_title { font-size: 28px; }
    .strong_detail_title small { font-size: 18px; }
    
    .strong_detail_description { font-size: 16px; }
    
    .strong_detail_image { width: 400px; flex-shrink: 0; }
}

@media screen and (min-width: 1025px) {
    .strong_detail_box { padding: 80px 60px; }
    
    .strong_detail_number { font-size: 80px; top: -50px; left: 60px; }
    
    .strong_detail_content { gap: 60px; }
    
    .strong_detail_title { font-size: 36px; }
    .strong_detail_title small { font-size: 20px; }
    
    .strong_detail_description { font-size: 18px; }

}


/*---------- strong FLOW ----------*/
.strong_flow { margin-top: 60px; display: flex; flex-direction: column; gap: 40px; }

.strong_flow_item { background: #FFF; border: 2px solid #E0E0E0; border-radius: 8px; padding: 24px; }

.strong_flow_label { font-size: 16px; font-weight: 700; margin-bottom: 16px; padding: 8px 16px; background: #F5F5F5; border-radius: 4px; width: fit-content; }
.strong_flow_label_orange { background: #EB6D2E; color: #FFF; display: flex; align-items: center; gap: 8px; }

.strong_flow_logo { height: 24px; width: auto; }

.strong_flow_content { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }

.strong_flow_step { flex: 1; min-width: 80px; padding: 16px 12px; background: #F9F9F9; border: 2px solid #E0E0E0; border-radius: 4px; text-align: center; font-size: 14px; font-weight: 700; line-height: 1.4em; }
.strong_flow_step p { margin: 0; }

.strong_flow_highlight_gray { background: #E8E8E8; border-color: #999; }
.strong_flow_highlight_orange { background: #EB6D2E; color: #FFF; border-color: #EB6D2E; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }

.strong_flow_logo_inline { height: 20px; width: auto; }

.strong_flow_arrow { width: 20px; height: auto; flex-shrink: 0; }

.strong_flow_note { display: flex; align-items: center; gap: 12px; padding: 12px; background: #F0F0F0; border-radius: 4px; font-size: 14px; line-height: 1.4em; }
.strong_flow_note_orange { background: #FFF5E6; }

.strong_flow_note_icon { width: 40px; height: auto; flex-shrink: 0; }

@media screen and (min-width: 768px) {
    .strong_flow { flex-direction: row; gap: 60px; }
    
    .strong_flow_item { flex: 1; }
    
    .strong_flow_step { min-width: 100px; font-size: 15px; }
    
    .strong_flow_arrow { width: 24px; }
}


/*---------- AREA SECTION ----------*/
.area_section { margin-top: 60px; }

.area_title { font-size: 18px; font-weight: 700; color: #EB6D2E; margin-bottom: 24px; display: flex; align-items: center; gap: 12px; }
.area_title_icon { width: 56px; height: auto; }

.area_buttons { display: flex; flex-direction: column; gap: 16px; }

.area_button { position: relative; display: flex; align-items: center; gap: 16px; padding: 16px; background: #FFF; border: 2px solid #000; border-radius: 8px; transition: all 0.3s; }
.area_button:hover { background: #F5F5F5; }

.area_button_image { width: 100px; height: 75px; object-fit: cover;  flex-shrink: 0; }

.area_button_text { flex: 1; font-size: 16px; line-height: 1.4em; }
.area_button_text strong { font-size: 20px; font-weight: 700; }

.area_button .button_arrow { position: absolute; right: 16px;  width: 8px; transition: all 0.3s; }
.area_button:hover .button_arrow { right: 12px; }

@media screen and (min-width: 768px) {
    .area_title { font-size: 24px; }
    .area_title_icon { width: 80px; }
    
    .area_buttons { flex-direction: row; gap: 24px; }
    
    .area_button { flex: 1; }
    
    .area_button_image { width: 120px; height: 90px; }
    
    .area_button_text { font-size: 24px; }
    .area_button_text strong { font-size: 32px; }
}


/*---------- SUPPORT SECTION ----------*/
.support_section { margin-top: 60px; }

.support_title { font-size: 20px; font-weight: 700; color: #EB6D2E; margin-bottom: 24px; }

.support_list { display: grid; grid-template-columns: 1fr; gap: 16px; list-style: none; padding: 0; margin: 0 0 16px 0; }

.support_item { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; font-weight:700; line-height: 1.6em; }

.support_check { width: 24px; height: 24px; flex-shrink: 0; }

.support_note { text-align: right; font-size: 16px; font-weight: 700; margin: 0; }

@media screen and (min-width: 768px) {
    
    .support_title { font-size: 24px; }
    
    .support_list { grid-template-columns: 1fr 1fr; gap: 20px 40px; }
    
    .support_item { font-size: 16px; }
}

@media screen and (min-width: 1025px) {
    .support_title { font-size: 24px; }
    
    .support_item { font-size: 18px; }
}

/* 強調 */
.color_main {font-size: 20px; font-weight:700; }
@media screen and (min-width: 768px) {
    .color_main {font-size: 24px;
    }
}

/* メリット比較 */
.strong_hikaku img { width:100%; margin-top:40px; }

/* 土地探し */
#SEARCH .contents { padding: 80px 0; }
@media screen and (min-width: 768px) {
#SEARCH .contents { padding: 120px 0; }
}