@charset "UTF-8";
@import url("main_pc.css");
@media only all and (max-width: 1023px) {
    .header {
        height: 4.5833rem;
    }
    .main-container {
        margin:0;
        padding-bottom: 3.846rem;
    }

    /*main-visual*/

	#main-visual {
        height: auto;
		margin-top: 0;		
        border-bottom-right-radius: 3.846rem;
	}	
	 
    .main-visual-slider-wrapper {
		height: auto;
	}
    
    .visual-contents-wrapper {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100%;
        min-height: 45%;
        justify-content: center;
        padding: 0 1.346rem;
    }

    .visual-contents-area {
        left: 0;
        display: flex;
        flex-direction: column;
        justify-content:space-between;
        width: 100%;
        height: calc(80% + 1.538rem);
        padding: 1.538rem 1.346rem 0 1.346rem;
    }

    .main-slogan-wrapper {
        margin-bottom: 0;
    }

    .main-slogan-wrapper > h2 {
        font-size: 2.154rem;
        line-height: 2.692rem;
    }

    .main-slogan-wrapper > p {
        font-size: 1.269rem;
        margin-bottom: 0.962rem;
    }

    .main-quick-wrapper {
        flex-direction: column;
        width: 100%;
        height: auto;
    }

    .main-quick-area01,
    .main-quick-area02 {
        width: 100%;
        height: 9.231rem; 
    }

    .main-quick-box {
        position: relative;
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        font-size: 1.231rem;
        line-height: 120%;
        color: #ffffff;
    }

    .main-quick-box:after {
        display: block;
        content: '';
        position: absolute;
        right: 0;
        width: 1px;
        height: 100%;
        background-color: #ffffff;
        opacity: .2;
    }

    .main-quick-box > img {
        width: 2.923rem;
        margin-bottom: 0.769rem;
    }

    .main-quick-area02 > .main-quick-box {
        color: #0c2d2b;
    }

	.main-visual-area {
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
		margin-left: 0;
	}

	.main-visual-area .swiper-slide {
		height: auto;
	}

	.main-visual-area .swiper-slide img.pc {
		display: none;
	}

	.main-visual-area .swiper-slide img.mobile {
		display: block;
		width: 100%;
	}  
    
	.main-visual-slider-area {
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		margin-left: 0;
	}

	#main-visual-slider .pc {
		display: none;
	}

	#main-visual-slider .mobile {
		display: block;
		width: 100%;
	}
    
    .main-contents02 {        
        padding: 3.077rem 0;
    }

    .main-contents-wrapper {
        max-width: 100%;
        padding: 0 1.346rem;
    }
    .main-contents02-area {
        flex-direction: column;
        align-items: center;
        gap: 6.538rem;
    }

    .main-menu-wrapper {
        width: 100%;
    }

    .main-menu-box {
        width: 27%;
    }

    .main-menu-box .icon {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        border-radius: 2.308rem;
    }

    .main-menu-box .icon > img {
        width: 3.269rem;
    }

    .main-menu-box > strong {
        font-size: 1.269rem;
        margin-top: 1.154rem;
    }

    .main-board-wrapper {
        width: 100%;
        align-items: center;
        flex-direction: column;
    }

    .main-title-wrapper {
        width: 100%;
        text-align: center;
    }

    .main-title-wrapper > h2 {
        font-size: 2.231rem;
        margin-bottom: 1.923rem;
    }

    .main-title-wrapper > p {
        font-size: 1.269rem;
        margin-bottom: 3.077rem;
    }

    .main-board-box {
        width: 80%;
        padding: 2.692rem 0;
        border-top: 1px solid #e0e3ea;
        border-bottom: 1px solid #e0e3ea;
    }

    .main-board-box > a:before {
        display: none
    }
    .main-board-box > a {
    }

    .main-board-box > a > strong.title {
        font-size: 1.308rem;
        margin-bottom: 0.769rem;
    }

    .main-board-box > a > span.date {
        font-size: 1.154rem;
    }

    .main-board-wrapper .btn-more {
        position: relative;
        font-size: 1.154rem;
        padding-top: 2.692rem;
        bottom: 0;
    }
}