@charset "UTF-8";
/*
    Last Update 2025.8.7

    breakpoint-sp: max-width:767px
    breakpoint-tb: max-width:1119px
    breakpoint-pc: min-width:1200px

*/


/*------------------------------
web fonts
https://gwfh.mranftl.com/fonts
------------------------------*/

/* noto-sans-jp-600 - japanese_latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 600;
  src: url('../../fonts/noto-sans-jp-v54-japanese_latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-jp-800 - japanese_latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 800;
  src: url('../../fonts/noto-sans-jp-v54-japanese_latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-jp-900 - japanese_latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 900;
  src: url('../../fonts/noto-sans-jp-v54-japanese_latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/*------------------------------
html,body
------------------------------*/

html{
	font-size:16px;
	font-size: 62.5%;/* 10(base font size) / 16(Browser Default font size) */
	scroll-behavior: smooth;
}


body{
	font-family: "Noto Sans JP",
    "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;

	color: #000000;
	font-weight: 800;
	font-size: 1.6em;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	margin:0;
	padding: 0;
}

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

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

img {
	border: 0;
	max-width: 100%; 
	height: auto;
	vertical-align:middle;
}

ul li,
ol li{
	list-style:none;
}


* {
	box-sizing: border-box;
}

/*------------------------------
contents decfault
------------------------------*/

.l-inner{
    max-width:1120px;
    width:100%;
    margin: 0 auto;

}

@media (min-width: 768px) and (max-width: 1199px) {
    .l-inner{
        padding-left:5%;
        padding-right:5%;
    }
}

@media screen and (max-width: 767px) {
    .l-inner{
        padding-left:5%;
        padding-right:5%;
    }
}

/*------------------------------
index
------------------------------*/
.header{
    width:100%;
    padding-top:17.5px;
    padding-bottom:17.5px;
    background-color: #0a2044;
    font-size: 2.5rem;
    color:#ffffff;
    text-align: center;
}
@media (min-width: 768px) and (max-width: 1199px) {
    .header{
        font-size: 2.2rem;
    }
}

@media screen and (max-width: 767px) {
    .header{
        padding-top:13px;
        padding-bottom:13px;
        font-size: 1.8rem;
        line-height: 1.5;
    }
}

/**/
.index-mainvisual{
    max-width: 1400px;
    width:100%;
    margin: auto;
}



/**/
.index-plorogue{
    width:100%;
    padding-top:35px;
    padding-bottom:35px;
    background-image: linear-gradient(90deg,#8eb9dd, #a8e0dc 45%,  #d6f0ef);
}

.index-plorogue .index-plorogue__text{
    position: relative;

}
.index-plorogue .index-plorogue__text .index-plorogue__text--1{
    font-size: 2.8rem;
    color: #0a2044;
    line-height: 1.5;
    text-align: center;
    font-weight: 900;
}
@media (min-width: 768px) and (max-width: 1199px) {
    .index-plorogue .index-plorogue__text .index-plorogue__text--1{
        font-size: 2.15vw;
    }
}
@media screen and (max-width: 767px) {
    .index-plorogue .index-plorogue__text .index-plorogue__text--1{
       font-size: 2.0rem;
    }
}
.index-plorogue .index-plorogue__text .index-plorogue__text--2{
    margin-top:1em;
    font-size: 1.8rem;
    text-align: center;
    line-height: 1.8;
    font-weight: 600;
}
@media (min-width: 768px) and (max-width: 1199px) {
    .index-plorogue .index-plorogue__text .index-plorogue__text--2{
        font-size: 1.75vw;
    }
}
@media screen and (max-width: 767px) {
    .index-plorogue .index-plorogue__text .index-plorogue__text--2{
       font-size: 1.6rem;
    }
}
@media screen and (max-width: 767px) {
    .index-plorogue .index-plorogue__text {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .index-plorogue .index-plorogue__text span{
        display: block;
    }
}


.index-plorogue .index-plorogue__char{
    position: absolute;
    width:120px;
    right:25px;
    top: 0;
    bottom: 0;
    margin: auto 0;
}
.index-plorogue .index-plorogue__char img{
    width:100%;
}
@media (min-width: 768px) and (max-width:1199px) {
    .index-plorogue .index-plorogue__char{
        width:10vw;
        top: -2vh;
        height: auto;
    }
}
@media screen and (max-width: 767px) {
    .index-plorogue .index-plorogue__char{
        display: block;
        position: relative;
        right: auto;
        top: auto;
        bottom: auto;
        margin-top: 20px;
    }
}



/**/
.index-cta{
    padding-top:25px;
    padding-bottom:70px;
    background-color: #000046;
}

.index-cta .index-cta__text--1{
    text-align:center;
    color:#ffffff;
    font-size: 3.0rem;
    line-height: 1.5;
}
@media screen and (max-width: 767px) {
    .index-cta .index-cta__text--1{
            font-size: 1.8rem;
    }
}

.index-cta .index-cta__button{
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap:20px;
}
@media screen and (max-width: 767px) {
    .index-cta .index-cta__button{
        flex-direction: column;
    }
}

.index-cta .index-cta__text--2{
    color:#ffff00;
    line-height: 1.5;
    font-size: 2.8rem;
}
@media screen and (max-width: 767px) {
    .index-cta .index-cta__text--2{
            font-size: 1.9rem;
    }
}

.index-cta .index-cta__link{
    display: block;
    max-width: 434px;
    height: auto;
    transition: all .5s;
}
@media (hover: hover) {
    .index-cta .index-cta__link:hover{
        filter: brightness(140%);
    }
}

@media (min-width: 768px) and (max-width:1199px) {
    .index-cta .index-cta__link{
        width:30vw;
    }
}


/*------------------------------
デバイス表示切替 クラス
------------------------------*/
@media screen and (max-width: 767px) {
	.hidd-sp{
		display:none !important;
	}	
}

@media (min-width: 768px) and (max-width: 1199px) {
	.hidd-tb{
		display:none !important;
	}	
}

@media screen and (min-width: 1200px) {
	.hidd-pc{
		display:none !important;
	}	
}