@charset "UTF-8";



/*-----------------------------------
	
   スマホ版

-----------------------------------*/
/*-----View moreボタン-----*/
.view-more-wrapper{
	width: 85%;
	margin: 40px auto 0;
	display: flex;
	justify-content: flex-end;
}

.view-more-btn{	
	background-color: #DFFF4F;
	padding: 10px 35px;
	border-radius: 50px;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	transition: transform 0.2s, background-color 0.2s;
	white-space: nowrap;
	width: auto;
}

.portal-container {
    padding-bottom: 80px;
}

.portal-header{
	margin-top: 50px;
}
.portal-title{
    text-align: center;
}



/* --- ベース変数 --- */
:root {
    --primary-blue: #427BBF;
    --text-gray: #666666;
    --highlight-yellow: #ff6;
}

/* --- セクション全体 --- */
.visitor-intro {
    padding: 60px 20px; 
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
}

.section-title {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 30px; 
    color: #333;
}



/* --- コンテナ（横並びを維持する設定） --- */
.intro-container {

    display: flex;
    flex-direction: row; 
    justify-content: space-between; 
    align-items: flex-start; 
	
}
@media(max-width: 600px){

.intro-container {
	width: 80%;
	margin: 0 auto;
	 display: block;
}


	
}

.sub-text {
    line-height: 1.9; 
    color: var(--text-gray);
    text-align: justify; 
}



/* --- テキスト部分（左側） --- */


.catch-phrase {
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 1.4;
    margin-bottom: 15px;
    color: var(--primary-blue);
}

.catch-phrase span {
    background:linear-gradient(transparent 60%, #ff6 60%);
    background-repeat: no-repeat;
    background-size: 0;
    animation: underLine 1s ease 0.5s forwards;
}

@keyframes underLine {
    100% {
        background-size: 100%;
    }
}


.highlight {
    font-weight: bold;
    color: #333;
}

/* --- イラスト部分（右側） --- */
.intro-illustration {
    flex: 0 0 35%;
    aspect-ratio: 1 / 1; 
    background: #f0f7ff; 
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; 
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 100px;
}



/*-----------------------------------
	
   PC版

-----------------------------------*/

@media (min-width: 900px){

	.sub-text{
		width: 80%;
		margin-top: 20px;
		color: #666666;
		font-size: 1.6rem;
	}


    /*-----View moreボタン-----*/
	.view-more-wrappers{
		bottom: 40px;
		padding: 10px 70px;
        color: #000;
	}
	
	.view-more-btn:hover{
		background-color: #d4f045;
		transform: translateX(5px);
	}



    .portal-section {
        margin: 100px auto;
    }
    
    .section-heading {
        font-size: 2.2rem;
    }


}


/* -----------------------------------
    PC表示
-----------------------------------*/
@media (min-width: 768px) {
    .visitor-intro { 
        margin-top: 50px;
    }

    .section-title {
        font-size: 1.5rem; 
        margin-bottom: 50px;
    }

    .intro-text {
        flex: 0 0 55%; 
    }

    .catch-phrase {
        font-size: 2.5rem; 
    }


    .intro-illustration {
        flex: 0 0 40%; 
        max-width: 500px; 
        transform: translateX(20px);
    }
}