@charset "utf-8";

/*
* TOPページリニューアル専用CSS
* 対象ページ：slug = index
*
* 利用可能フォント
* - Meiryo          : font-family: 'Meiryo', 'メイリオ', sans-serif;
* - Shippori Mincho : font-family: 'Shippori Mincho', serif;
* - Zen Maru Gothic : font-family: 'Zen Maru Gothic', sans-serif;
*/
@media(644px <=width) {
.m600 {
display: none;
}

.p600 {
display: block;
}
}

@media(644px > width) {
header#header {
.head_in h2 {
display: none;
}
}

.m600 {
display: block;
}

.p600 {
display: none;
}
}

:where(.flex) {
display: flex;
gap: 20px;

img {
width: 100%;
height: auto;
}
}

#header {
display: flow-root;
}

#wrapper-index {
font-family: 'Meiryo', 'メイリオ', sans-serif;
color: #565656;
padding-block-end: 4em;

h2 {
text-align: center;
font-family: "Zen Maru Gothic", sans-serif;
font-size: clamp(1.5rem, 1.019rem + 1.54vw, 2.25rem);
font-weight: 600;
line-height: normal;
}
.top_block-news h2{font-size:1.35rem}

.sub-txt {
text-align: center;
font-family: "Zen Maru Gothic", sans-serif;
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-block: 0.25em 50px;
}
}

.hero {
overflow: clip;
aspect-ratio: 1 / 0.289;
width: 100%;
position: relative;
font-family: 'Zen Maru Gothic', sans-serif;

.hero-image {
width: 100%;
height: 100%;
}

.hero-image picture {
display: block;
width: 100%;
}

.hero-image img {
width: 100%;
height: auto;
object-fit: contain;
}

@media(1024px > width) {
aspect-ratio: 1 / clamp(0.228, calc(0.228 + 0.566 * (1024px - 100vw) / 424px), 0.794);

.hero-image picture {
height: 100%;
object-fit: cover;
}

.hero-image img {
height: 100%;
object-fit: cover;
}
}

figure {
position: absolute;
right: clamp(0.625rem, -27.46rem + 43.88vw, 236px);
/* 600px→top:20px、1024px→top:56.5px へ線形補間 */
top: clamp(20px, calc(8.6vw - 31.6px), 56.5px);
width: clamp(4.875rem, -5.04rem + 18.62vw, 180px);

@media (1024px < width) {
top: unset;
bottom: 33px;
}

img {
width: 100%;
height: auto;
}
}

p {
position: absolute;
bottom: 0;
left: 0%;
margin-inline-start: clamp(2rem, -7.034rem + 24.09vw, 350px);
margin-block-end: clamp(4rem, 2.693rem + 3.48vw, 110px);
font-size: 1.5vw;
color: #fff;
font-weight: 500;
z-index: 1;
font-size: clamp(1.375rem, 0.438rem + 2.5vw, 2.625rem);
letter-spacing: 0.05em;
line-height: 1.6;
text-shadow: 4px 4px 10px #00000030;
}
}

div[data-width="1060"] {
max-width: 1060px;
width: 100%;
margin-inline: auto;

&.flex {
margin-block: clamp(1em, -0.375rem + 5vw, 52px) clamp(2em, -0.375rem + 5vw, 52px);
justify-content: center;
gap: clamp(0.125em, -0.75rem + 2.33vw, 1rem);
margin-inline: auto;
@media(600px < width) {
padding-inline: 1em;
width: calc(100% - 2em);
}
@media(300px < width < 600px) {
padding-inline: 0.5em;
width: calc(100% - 1em);
}

>div{
 position: relative;
}
img[src$=".svg"].svgtext{
position: absolute;
height: calc(100% - (2 * clamp(0.5rem, -1rem + 4vw, 2rem)));
top: 0;
left: 0;
display: block;
width: auto;
margin-block: clamp(0.5rem, -1rem + 4vw, 2rem);
margin-inline-start: clamp(0.45rem, -0.2rem + 2.27vw, 1.5rem);
}

.imgblok {
 position: relative;
width: 100%;
height: auto;
max-width: 100%;
display: block;
}
}
}

.fujitomo-service,
.case-study-block,
.customer-voice,
.fujitomo-column,
.common-faq,
.sell-rental {
padding-block: 48px 52px;
}

.hero-under-message {
font-size: 1.375rem;
line-height: 2.3;
text-align: center;

p {
margin-block-end: 1.5em;

&.message-txt {
color: #46AF36;
font-size: clamp(1.25rem, 0.909rem + 1.36vw, 2rem);
font-weight: 600;
line-height: 1.4;
font-family: 'Shippori Mincho', serif;
}

&.m600 {
line-height: 1.8;
font-size: 0.875rem;
margin-block-end: 2em;
}
}
}


.case-study-block {
background-color: #FEFBED;

.news-item {
background-color: #fff;
padding: 13px 18px;
}

.case-study {
margin-block: 2.25em;
}

.news-title {
align-self: start;
font-size: 1rem;
margin-block: 1em;
padding-block-end: 1em;
letter-spacing: -1px;
line-height: 1.75;
border-bottom: 2px #46af36 solid;
}

time {
line-height: 2;
font-size: 0.875rem;
}
}

.thumbnail-news-list {
display: grid;
gap: 12px;

@media(980px <=width) {
grid-template-columns: repeat(3, 1fr);
}

@media(1100px > width) {
padding-inline: 1.5em;
}

@media(980px > width) {
max-width: 400px;
margin-inline: auto;
}

img {
width: 100%;
height: auto;
object-fit: cover;
}
}

.talking {
box-sizing: border-box;
display: grid;
grid-template-columns: repeat(2, minmax(clamp(10.5rem, -0.197rem + 34.23vw, 435px), 1fr));
gap: clamp(0.688rem, -0.154rem + 2.69vw, 2rem);
width: fit-content;
margin-inline: auto;

li {
position: relative;
aspect-ratio: 453 / 335;
max-height: 335px;
max-width: 453px;
width: 100%;

a {
width: calc(100% - 1.5em);
display: grid;
height: calc(100% - 1.5em);
padding: 0.75em;
font-family: "Zen Maru Gothic", sans-serif;
font-size: clamp(1.21rem, -0.098rem + 4.18vw, 3.25rem);
font-weight: 600;
line-height: 1.05769;
color: #fff;
text-align: center;
position: relative;
max-height: 335px;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: auto 85%;

span {
display: block;
align-self: end;
}

&::after {
content: "";
display: block;
position: relative;
color: #565656;
background-color: #fff;
padding: 0.25em;
left: 50%;
transform: translateX(-50%);
bottom: 0;
border-radius: 50%;
aspect-ratio: 1 / 1;
height: 1em;
line-height: 0.95;
align-self: end;
background-image: url(../images/svg/service-arrow-svg.svg);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: 0.6em;
}
}

&:nth-child(1) {
background-color: #FBD333;

a {
background-image: url(../images/svg/svg-fujitomo-01.svg);
}
}

&:nth-child(2) {
a {
background-image: url(../images/svg/svg-fujitomo-03.svg);
}

background-color: #50B3BE;
}

&:nth-child(3) {
a {
background-image: url(../images/svg/svg-fujitomo-02.svg);
}

background-color: #EA8553;

}

&:nth-child(4) {
a {
background-image: url(../images/svg/svg-fujitomo-04.svg);
}

background-color: #45B035;
}
}
}

.customer-voice {
background-color: #F0F9FF;

a {
width: fit-content;
margin-inline: auto;
display: block;

@media(1000px > width) {
padding-inline: 1.25rem
}

img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
margin-inline: auto;
}
}

}

.fujitomo-column {
img {
display: block;
margin-inline: auto;
max-width: 100%;
width: 100%;
height: auto;
}

a {
display: block;
width: fit-content;
margin-inline: auto;
}

>div {
display: grid;
gap: 1em
}
}

.fujitomo-biyori.notice-block {
grid-column: 1 / -1;
}

.notice-block {
display: grid;
gap: 16px;

@media(832px <=width) {
grid-template-columns: 1fr 1fr;
}

img {
width: 100%;
max-width: 546px;
margin-inline: auto;
}
}

.fujitomo-biyori {
img {
max-width: 546px;
margin-inline: auto;
}
}

@media(832px > width) {
.notice-block,
.fujitomo-biyori {
padding-inline: 1.5em;
}
}


.common-faq {
background-color: #F5FAF4;
padding-inline: 1rem;

.message-block {
width: fit-content;
margin-inline: auto;
text-align: center;
position: relative;
padding-inline: 20px;
margin-block-end: 42px;
}

p:not(.sub-txt, .ctr) {
font-family: "Zen Maru Gothic", sans-serif;
font-size: clamp(0.93rem, 0.791rem + 0.57vw, 1.25rem);
font-style: normal;
font-weight: 500;
color: #FFF;
line-height: 1.8;
background-color: #46AF36;
padding-block: clamp(0.938rem, 0.737rem + 0.64vw, 1.25rem) clamp(1.875rem, 1.474rem + 1.28vw, 2.5rem);
padding-inline: clamp(1rem, -0.362rem + 4.36vw, 3.125rem);
clip-path: polygon(0 0, 100% 0, 100% 87%, 54% 87%, 50% 100%, 46% 87%, 0 87%);
}

img {
display: block;
position: absolute;
bottom: 0;
right: 0;
width: 100%;
max-width: 68px;
height: auto;
}

.faq-block_element {
display: grid;
gap: 26px;
margin-block: 42px;

a {
display: grid;
grid-template-columns: 1em auto 1em;
gap: 12px;
padding: 24px clamp(1.563rem, 0.561rem + 3.21vw, 3.125rem);
background-color: #fff;
border-radius: 14px;
box-shadow: 0 0 15px -1px rgba(168, 168, 168, 0.30);
color: #565656;
font-family: "Zen Maru Gothic", sans-serif;
font-size: clamp(1.346rem, 1.248rem + 0.32vw, 1.5rem);
font-weight: 600;
}

div {
a::before {
content: "■";
display: block;
color: #EFCE1E;
}

&:nth-child(2) {
a::before {
color: #50B3BE;
}
}

&:nth-child(3) {
a::before {
color: #EA8553;
}
}

&:nth-child(4) {
a::before {
color: #46AF36;
}
}
}

div a::after {
content: "";
display: block;
background-image: url(../images/svg/arrow-svg.svg);
background-size: contain;
background-repeat: no-repeat;
width: 24.5px;
height: 16.89px;
align-self: center;
}
}
}

.sell-rental {
img {
display: block;
max-width: 100%;
height: auto;
}

.sell-rental-block {
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
img{
max-width: 570px;
}
div {
display: grid;
gap: 2rem;
}
}

p.sp_none {
max-width: 27em;
margin-inline: auto;
justify-self: end;
}
}

.insta-news-element {
display: flex;
gap: 2em;
justify-content: center;
justify-items: center;
@media(1024px <= width){.inst{padding-inline-start:1em;width:50%}}
p.ctr {
margin-block-start: 2em;
}
}

@media(1024px > width) {
.sell-rental {
img {
width: 100%;
height: auto;
max-width: 100%;
}

.sell-rental-block {
display: grid;
}
}
.insta-news-element{
display:grid;
grid-template-columns:unset;
gap:3em;
.inst{grid-row: 2 / 3;padding-inline-start:unset;}
.top_block-news{grid-row: 1 / 2;}
}
	
}

@media(768px >=width) {
.hero {
aspect-ratio: 1 / 0.794;
picture {
width: 100%;
}

.hero-image img {
max-width: 800px;
width: 100%;
object-fit: cover;
height: 100%;
object-position: 50% 50%;
}
}
}
@media(600px >= width){
div.insta-news-element[data-width="1060"]{
width: 85%;
}
}
.addtoany_share_save_container.addtoany_content{
display: none;
}