/* fontsize：clamp(最小値rem, ▲中間値vw, 最大値rem)

▲中間値vwの出し方
1)pc時（＊default）:ベース横幅1600px
2)tab時（max991px）:ベース横幅991px
3)sp時 （max576px）:ベース横幅576px

*/


/* ==================
01.TOP
=====================*/
/*FV*/
.fv-wrapper {
    height: calc(100vh - var(--header-height));
    position: relative;
    background-image: url("../img/fv-img.jpg");
    background-position: center;
    background-size: cover;
}

.fv-wrapper_txt {
    position: absolute;
    top: 60px;
    right: 90px;
    max-width: 528px;
}

.right_list-txt{
    display: flex;
    flex-direction: column;
    gap: 
    6px;
}

.list-txt{
padding: 8px 24px;
border-radius: 4px;
}

.list-txt p{
    text-align: center;
}

.list-txt-01{
    background-color: #ef751c;
}

.list-txt-02{
    background-color: #fff;
}

.list-txt-02 span{
    color: #4bacc6;
    font-size: 2.8rem;
    font-weight: 500;
}

.list-txt-03{
    background-color: #ffd9a4;
}

.list-txt-01 p{
    color: #fff;
    font-size: 1.8rem;
}

.open-schedule{
    position: absolute;
    bottom: 24px;
    right: -6px;
    max-width: 460px;
}


@media (max-width: 991px) {
.fv-wrapper {
    height: calc(60vh - var(--header-height));
}

.open-schedule{
    bottom: -80px;
    right: -20px;
    max-width: 340px;
}
}

@media (max-width: 768px) {
.fv-wrapper{
    height: calc(100vh - var(--header-height));
}

.fv-wrapper_txt {
    top: 20px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 94%;
}

.list-txt{
    padding: 8px 12px;
}

.list-txt-01 p,.list-txt-03 p{
    font-size: 1.6rem;
}

.list-txt-02 span{
    font-size: 2rem;
}

.open-schedule{
    max-width: 280px;
    bottom: -40px;
}
}


/* ==================
00.contents
=====================*/
.txt-bold{
    font-weight: 600;
    display: block;
}

.contents{
    position: relative;
}

.bg-parts{
    position: absolute;
    z-index: -1;
    position: fixed;
}

.bg-texture-01{
    right: 0;
    top: 0;
}

.bg-star-01{
    max-width: 420px;
    left: -85px;
    top: 350px;
}

.section .row{
    justify-content: center;
}

.section .sec-ttl p{
    font-size: 3.6rem;
    color: var(--primary-color);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.4rem;
}

.section .sec-ttl p .en{
    font-size: 1.8rem;
    font-weight: 400;
}

.section .text{
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: var(--radius-base);
    box-shadow: 0px 6px 0px 0px rgba(216, 216, 216, 1);
}

.section ul{
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.section ul li{
    font-size: clamp(2.2rem, 1.5vw, 2.4rem); 
    font-weight: 500;
    position: relative;
    margin-left: 44px;
    line-height: 1.8;
}

.section ul li::before{
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 50%;
    top: 12px;
    left: -44px;
    background-color: var(--accent-color);
}

@media (max-width: 576px) {
.section .sec-ttl p{
    font-size: 2.8rem;
    text-align: center;
}
.bg-texture-01{
    top: 80px;
}
.bg-star-01 {
    max-width: 140px;
    left: -25px;
    top: 410px;
}
.section ul li::before{
    width: 12px;
    height: 12px;
}
}


/* ==================
共通
=====================*/
@media (max-width: 991px) {
    .section ul li{
        padding: 0 2.4rem;
        font-size: 2rem;
    } 

    .section ul li::before{
        left: -24px;
    } 

    .section .text-wrapper p{
        padding: 0 2.4rem;
    } 

    .section .sec-ttl p{
        padding: 0 2.4rem;
        flex-direction: column;
        gap: 0;
    }
}


/* ==================
s-lead
=====================*/
.s-lead .text-wrapper p{
    font-size: clamp(1.8rem, 1.25vw, 2rem); 
    line-height: 1.9;
    margin-top: 40px;
}

.s-lead .text-wrapper p:nth-child(1){
    margin-top: 0;
}

/* ==================
s-philosophy s-goal s-policy
=====================*/
@media (max-width: 576px) {
    .s-philosophy ul li,
    .s-goal ul li,
    .s-policy ul li{
        padding: 0 2.4rem 0 0.8rem;
        text-align: left;
    }
}

/* ==================
s-feature
=====================*/
.s-feature{
    background-color:#f7f9f9;
}

.s-feature .Introduction-txt p{
    text-align: center;
}

.s-feature ul{
    grid-column-gap: 12px;
    grid-row-gap: 12px;
}

.s-feature ul li::before{
content: none;
}

.s-feature ul li{ 
    background-color: #ffffff;
    border-radius: 12px;
    padding: 60px 120px;
    margin-left: 0;
    display: flex;
    align-items: center;
}

.s-feature .ora-txt,.feature-items li span{
    font-size: clamp(2.2rem, 1.5vw, 2.4rem);
    color: var(--accent-color);
    font-weight: 600;
}

.feature-items li span{
    position: relative;
    margin-right: 4px;
}

.feature-items li span::before{
    content: "";
    position: absolute;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background-color: var(--accent-color)
}

.feature-items .item-img{
    width: 180px;
    min-width: 120px;
    height: 120px;
    margin-right: 60px;
}

.feature-items .item-img img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.feature-items p{
font-size: clamp(1.8rem, 1.25vw, 2rem);
}

@media (max-width: 991px) {
.s-feature ul li{ 
    padding: 2.4rem;
}

.s-feature .Introduction-txt p{
    padding: 0 2.4rem;
}
}

@media (max-width: 768px) {
.s-feature .Introduction-txt p{
    font-size: var(--font-size-sp-base);
}
.feature-items p{
font-size: var(--font-size-sp-base);
}

}

@media (max-width: 576px) {
.s-feature ul li{ 
    flex-direction: column;
    gap: 2rem;
    padding: 4rem;
}

.feature-items h3{
    text-align: center;
}

.feature-items .item-img{
    margin-right: 0;
}
}

/* ==================
s-community
=====================*/
.s-community{
    background-image: url();
}

.s-community .sec-ttl .sub-txt,.s-group .sec-ttl .sub-txt{
    color: var(--text-color);
    font-size: clamp(1.8rem, 1.25vw, 2rem);
    font-weight: 500;
    line-height: 1.8;
}

.s-community .text-wrapper p{
    font-size: clamp(1.8rem, 1.25vw, 2rem);
    line-height: 1.9;
    margin-top: 40px;
}

.s-community .text-wrapper p:nth-child(1){
    margin-top: 0;
}

/* ==================
s-group
=====================*/
/* 01 */
.s-group{
    background-color: #f1f1f1;
}

.s-group .group-img{
    border: 1px solid #e9e9e9;
}

.s-group h3{
    font-size: clamp(2.2rem, 1.5vw, 2.4rem);
    color: var(--text-green);
    display: flex;
    align-items: center;
    gap: 20px;
}

.num {
    width: 56px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: var(--text-green);
    color: #fff;
    font-family: "Montserrat", sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 991px) {
.s-group h3{
    padding: 0 2.4rem;
}

.s-group .group-img{
    margin: 2.4rem;
}
}

/* 02 */
.s-group .group-detail .item{
    border-radius: 16px;
    padding: 40px;
}

.s-group .group-detail .item-01{
    border: 2px solid var(--group-green);
}

.s-group .group-detail .item-02{
    border: 2px solid var(--group-green);
}

.s-group .group-detail .item-03{
    border: 2px solid var(--group-ora);
}

.s-group .group-detail .item-04{
    border: 2px solid var(--group-blue);
}

.s-group .group-detail ul{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 12px;
    grid-row-gap: 12px;
}

.s-group .group-detail ul li::before{
    content: none;
}

.s-group .group-detail ul li{
    font-size: var(--font-size-pc-base);
    font-weight: 400;
    line-height: 1.8;
    margin-left: 0;
    position: relative;
}

.s-group .group-detail .item ul li::before{
    position: absolute;
    content: "";
    top: 12px;
    left: -16px;
    width: 4px;
    height: 4px;
    background-color: var(--group-green);
}

.s-group .group-detail .item-03 ul li::before{
    background-color: var(--group-ora);
}

.s-group .group-detail .item-04 ul li::before{
    background-color: var(--group-blue);
}

.s-group .group-detail .item ul{
    display: block;
    position: relative;
}

.s-group .group-detail .item ul::before{
    position: absolute;
    content: "";
    width: 100%;
    background-color: #ddd;
    height: 1px;
    top: -20px;
    left: 0;
}

.s-group .group-detail .item .logo{
    height: 52px;
    width: auto;
    margin: 0 auto;
}

.s-group .group-detail .item-04 .logo{
    padding: 0 20px;
}

.s-group .group-detail .item .logo img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.s-group .group-detail .item .tag{
    display: flex;
    gap: 8px;
    justify-self: center;
}

.s-group .group-detail .item .tag p{
    color: #fff;
    background-color: var(--group-green);
    font-size: 1.4rem;
    line-height: 1.2;
    padding: 2px 8px;
    border-radius: 4px;
}

.s-group .group-detail .item-03 .tag p{
    background-color: var(--group-ora);
}

.s-group .group-detail .item-04 .tag p{
    background-color: var(--group-blue);
}

.s-group .group-detail .item .keyword p{
    text-align: center;
    font-weight: 600;
}

@media (max-width: 991px) {
.s-group .group-detail ul{
    padding: 0 2.4rem;
}

.s-group .group-detail ul li{
    padding: 0;
}

.s-group .group-detail .item{
    padding: 32px;
}
}

@media (max-width: 768px) {
.s-group .group-detail ul{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.s-group .group-detail .item{
    padding: 2.4rem;
}
}


@media (max-width: 576px) {
.s-group .group-detail ul li{
    font-size: var(--font-size-sp-base);
}
.s-group .group-detail .item-04 .logo{
    padding: 0;
}
}


/* 03 */
.grow-list table,.grow-list table p{
text-align: center;
font-size: var(--font-size-pc-small);
}

.grow-list table , td, th {
	border: 1px solid #dfdfdf;
	border-collapse: collapse;
}

.grow-list td, th {
	padding: 20px;
    font-size: var(--font-size-pc-base);
}

.grow-list td{
    font-weight: 600;
    font-size: clamp(1.8rem, 1.25vw, 2rem);
}

.grow-list td,.grow-list .list-ttl{
	background: #f5f5f5;
}

.list-ttl-nyuji{
    background-color: #fcedd9;
    color: #b3732c;
}

.area-nyuji{
    background-color: #fff9f0;
}

.list-ttl-youji{
    background-color: #e9f2f9;
    color:#336289;
}

.area-youji{
    background-color: #f8fcff;
}

@media (max-width: 991px) {
.grow-list{
    padding: 0 2.4rem;
}
}

@media (max-width: 576px) {
.grow-list td,.grow-list th{
    padding: 12px;
}
.grow-list table,.grow-list table p{
font-size: 1.2rem;
}
.grow-list td, th {
	font-size: var(--font-size-sp-base);
}
}

/* 04 */
.strength{
display: flex;
flex-direction: column;
gap: 12px;
}

.strength .item{
    display: flex;
    align-items: center;
    
}

.strength .num{
    background-color: #fad5a5;
    width: 120px;
    border-radius: 24px;
    font-size: 4rem;
    z-index: 1;
    border: 4px solid #fff;
}

.strength .txt{
    background-color: #fdf1e1;
    padding: 20px 60px;
    width: 100%;
    margin-left: -20px;
    z-index: 0;
}

.strength .txt h4{
    font-size: 2.8rem;
    font-weight: 600;
    color: var(--accent-color);
}

.end-txt p{
    font-size: clamp(2.2rem, 1.5vw, 2.4rem);
    text-align: center;
    font-weight: 500;
    position: relative;
    margin-left: 0;
    line-height: 1.8;
}

@media (max-width: 991px) {
.strength{
    padding: 0 2.4rem;
}
}

@media (max-width: 576px) {
    .strength .txt{
        padding: 20px 32px 20px 40px;
    }
    .strength .txt h4{
    font-size: 2rem;
}

.end-txt p{
    padding: 0 2.4rem;
}

.strength .txt p{
    font-size: var(--font-size-sp-base);
}
}

/* ==================
s-about
=====================*/
.s-about ul{
    gap: 1.4rem;
}

.s-about ul li::before{
    width: 100%;
    height: 1px;
    background-color: #e4e4e4;
    top: -8px;
    left: 0;
}

.s-about ul li:first-child::before {
    display: none;
}

.s-about ul li{
    display: flex;
    align-items: start;
    gap: 8px;
    margin-left: 40px;
}

.s-about ul li h5{
    flex: 1;
    font-size: var(--font-size-pc-base);
}

.s-about ul li p{
    flex: 4;
}

.s-about .map-icon{
    display: inline-block;
    width: 16px;
    height: 18px;
    margin-bottom: 4px;
}

.s-about .map-icon img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 991px) {
.s-about .__img,.s-about .__txt{
    padding: 0 2.4rem;
}

.s-about ul li{
    margin-left: 0;
}
}

@media (max-width: 576px) {
.s-about .__txt ul li{
    padding: 0;
    gap: 0;
}

.s-about ul li h5{
    flex: 2;
    font-size: var(--font-size-sp-base);
}

.s-about ul li p{
    font-size: var(--font-size-sp-base);
    text-align: left;
}
}

/* ==================
s-hoshino_terrace
=====================*/
.s-hoshino_terrace .text-wrapper p{
    font-size: clamp(1.8rem, 1.25vw, 2rem);
    line-height: 1.9;
    margin-top: 40px;
}

.s-hoshino_terrace .text-wrapper p:nth-child(1){
    margin-top: 0;
}


/* ==================
s-schedule
=====================*/
.s-schedule .__img{
padding: 40px;
}

.s-schedule .__img img{
width: 80%;
display: block;
margin: 0 auto;
}

.s-schedule .text{
    align-items: center;
}

.s-schedule ul{
    gap: 1.4rem;
}

.s-schedule ul li::before{
    width: 100%;
    height: 1px;
    background-color: #e4e4e4;
    top: -8px;
    left: 0;
}

.s-schedule ul li:first-child::before {
    display: none;
}

.s-schedule ul li{
    display: flex;
    align-items: start;
    gap: 36px;
    margin-left: 40px;
}

.s-schedule ul li h5{
    flex: 2;
    font-size: var(--font-size-pc-base);
    text-align: left;
}

.s-schedule ul li p{
    flex: 4;
}
@media (max-width: 991px) {
.s-schedule ul li{
    margin-left: 0;
    padding: 0;
}

.s-schedule .__img{
    padding: 20px;
}

.s-schedule .__txt{
    padding: 2.4rem;
}
}

@media (max-width: 576px) {
.s-schedule .text{
    display: block;
}

.s-schedule ul li{
gap: 8px;
}

.s-schedule ul li h5,.s-schedule ul li p{
    font-size: var(--font-size-sp-base);
}
}

/* ==================
s-information
=====================*/
.s-information .introduction-text{
    text-align: center;
}

.s-information .flow-ttl p{
    font-size: clamp(2.2rem, 1.5vw, 2.4rem);
    font-weight: 500;
    text-align: center;
    position: relative;
    color: var(--gray-text);
}

.s-information .flow-ttl p::before,.s-information .flow-ttl p::after{
    position: absolute;
    background-color: var(--gray-text);
    width: 33%;
    height: 1px;
    content: "";
    top: 20px;
}

.s-information .flow-ttl p::before{
    left: 0;
}

.s-information .flow-ttl p::after{
    right: 0;
}

/* 図 */
.p-flow {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	align-items: stretch;
}

.p-flow__route{
    display: flex;
	flex-direction: column;
}

/* 2号3号 */
.p-flow__certifications{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:20px;
	width:100%;
}

/* 認定カード */
.p-flow__route > .p-flow__certification,
.p-flow__route > .p-flow__certifications {
	height: 100%;
}

.p-flow__certification{
	width:100%;
	padding:32px 20px;
	background:#fff;
	border:1px solid #ddd;
	border-radius:16px;
	text-align:center;
}

.p-flow__certification h3{
	color:var(--primary-color);
	font-size: 2.8rem;
}

.p-flow__route--orange h3{
	color:var(--accent-color);
    font-size: 2.8rem;
}

.p-flow__certification .type{
	color:var(--primary-color);
	font-size: 1.4rem;
    text-align: center;
}

.p-flow__route--orange .type{
	color:var(--accent-color);
	font-size: 1.4rem;
    text-align: center;
}

.p-flow__desc{
	margin-top:15px;
	padding:28px 12px;
	background:#e8f5fa;
	font-size:14px;
    border-radius: 4px;
    font-size: var(--font-size-pc-base);
    line-height: 1.8;
}

.p-flow__route--orange .p-flow__desc{
	background:#fff0e5;
    font-size: var(--font-size-pc-base);
    line-height: 1.6;
}


/* 下部ボックス */
.p-flow__box{
	width:100%;
	min-height:400px;
	padding:32px;
	border-radius:16px;
	border:1px solid #3aa5d0;
	text-align:center;
	background:#fff;
}

.p-flow__box table td{
    padding: 10px 5px;
}

.p-flow__box table td span{
    font-size: 2.4rem;
}

.p-flow__route--orange .p-flow__box{
	border-color:#f39845;
}

.p-flow__box h3{
	color:#3aa5d0;
    padding: 20px;
}

.p-flow__box h4{
	font-size: var(--font-size-pc-base);
    font-weight: 500;
}

.p-flow__route--orange .p-flow__box h3{
	color:var(--accent-color);
    font-size: 1.75rem;
}


/* 矢印 */
.p-flow__arrow{
	height:50px;
	position:relative;
}

.p-flow__arrow::before{
	content:"";
	position:absolute;
	top:0;
	left:50%;
	width:1px;
	height:35px;
	background:#999;
}

.p-flow__arrow::after{
	content:"";
	position:absolute;
	left:calc(50% - 5px);
	top:28px;
	border-left:5px solid transparent;
	border-right:5px solid transparent;
	border-top:7px solid #999;
}

.p-flow__box .__txt{
    text-align: center;
    position: relative;
    margin-bottom: 40px;
}

.p-flow__box .__txt::after{
    position: absolute;
    content: "";
    bottom: -20px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color:#fff0da;
}

.p-flow__route--blue .p-flow__box .__txt::after{
    background-color:#daf0ff;
}

@media(max-width:1400px){
.p-flow__box{
	min-height:400px;
}
}

@media(max-width:1199px){
.p-flow__box{
	min-height:420px;
    padding: 20px;
}
}

@media(max-width:991px){
.s-information .introduction-text,.s-information .flow-ttl,.p-flow{
    padding: 0 2.4rem;
}
}

@media(max-width:768px){
.p-flow{
	display:flex;
	flex-direction:column;
	gap:40px;
}

.p-flow__box{
	min-height:300px;
}

/* 2号3号を縦並び */
.p-flow__certifications{
	display:flex;
	flex-direction:column;
	gap:20px;
}
}

@media(max-width:576px){
.p-flow__desc,.p-flow__box h3{
	font-size: var(--font-size-sp-base);
}
.p-flow__box h3{
	font-size: 2rem;
    font-weight: 600;
}
.p-flow__route--orange .p-flow__box h3{
	font-size: 2rem;
    font-weight: 600;
}
.p-flow__route--orange .p-flow__desc{
    font-size: var(--font-size-sp-base);
} 
.s-information .introduction-text{
    font-size: var(--font-size-sp-base);
    text-align: left;
}
.s-information .flow-ttl p::before,.s-information .flow-ttl p::after{
    width: 12%;
}
}


/* ==================
s-contact
=====================*/
.s-contact .sec-ttl p{
font-size: clamp(2.2rem, 1.5vw, 2.4rem);
color: var(--primary-color);
font-weight: 500;
position: relative;
display: block;
width: fit-content;
margin: 0 auto;
padding: 0;
}

.s-contact .sec-ttl p::before{
content: "";
position: absolute;
background-image: url("/app/webroot/img/contact/left.svg");
background-size: 100%;
width: 28px;
height: 40px;
background-repeat: no-repeat;
top: 0;
left: -48px;
}

.s-contact .sec-ttl p::after{
content: "";
position: absolute;
background-image: url("/app/webroot/img/contact/right.svg");
background-size: 100%;
width: 28px;
height: 40px;
background-repeat: no-repeat;
top: 0;
right: -48px;
}

.s-contact .contact-txt p{
    text-align: center;
}

.footer-bg_img{
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 110%;
}

.s-contact .logo{
    width: 480px;
}

.s-contact .container{
    display: flex;
    flex-direction: column;
    align-items: center;
}

@keyframes scale-blink {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04);}
}
.scale-blink {
    animation: scale-blink 1s infinite;
    display: inline-block;
    }


@media(max-width:576px){
.s-contact .logo{
    width: 280px;
}
#pagetop {
    width: 60px;
    height: 60px;
    bottom: 10px;
    right: -40px;
}
}