@media only screen and (min-width:468px){
    #header { position: fixed; width: 100%; z-index: 999; background: none;}
    #container { padding-top: 0 !important;}
}
#toppage h3 {
    font-family: "Noto Serif JP", "Hiragino Serif","Meiryo", sans-serif;
    text-align: center;
}
#toppage h3 small,
#toppage h3 b { display: block;}
#toppage h3 small { font-size: 312.5%; font-weight: 400;}
#toppage h3 b { font-size: 162.5%; color: #60C8A1;  font-weight: 700; letter-spacing: 2px;}
#toppage .come { line-height: 200%;}
@media only screen and (max-width:768px){
    #toppage h3 small { font-size: 250%;}
    #toppage h3 b { font-size: 125%;}
}
@media only screen and (max-width:468px){
    #toppage h3 small { font-size: 187.5%;}
    #toppage h3 b { font-size: 100%;}
}



/* Mainimg */
#toppage .mainimg { position: relative;}
#toppage .mainimg .catch { 
    position: absolute; top:20%; left: 0; right: 0;
    margin: auto;
    width: 80%; max-width: 1200px; height: 120px;
    text-align: left;
}
#toppage .mainimg img { width: 100%; height: 100vh; max-height: 700px; object-fit: cover;}
#toppage .mainimg .news {
    display: flex; justify-content: space-between; gap:10px 40px;
    position: absolute; left: 0; bottom: 0; z-index: 9;
    width:100%; max-width: 900px;
    padding: 30px;
    background: #fff;
}
#toppage .mainimg .news p {
    width: 85px;
    font-family: "Noto Serif JP", "Hiragino Serif","Meiryo", sans-serif;
    font-size: 162.5%;
    font-weight: 400;
    color: #027ACC;
}
#toppage .mainimg .news dl { display: flex; gap:0 20px; width: calc(100% - 80px - 100px - 80px);}
#toppage .mainimg .news dl dt { width: 85px;}
#toppage .mainimg .news dl dd { 
    width: calc(100% - 85px - 20px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#toppage .mainimg .news dd a { color: #222;}
#toppage .mainimg .news .btn { width: 100px;}
#toppage .mainimg .news .btn a {
    display: block;
    width: 100%;
    padding:3px 10px;
    font-size:75%;
    color: #fff;
    text-align: center;
    background: #027ACC;
    border-radius: 100px;
}
@media only screen and (min-width:768px){
    #toppage .mainimg .news .btn a:hover { text-decoration: none; opacity: 0.7;}
}
@media only screen and (max-width:468px){
    #toppage .mainimg img { height: 400px; object-fit: cover;}
    #toppage .mainimg .news { position: relative; flex-direction: column; width: 100%;}
    #toppage .mainimg .news p { font-size: 20px;}
    #toppage .mainimg .news dl { flex-direction: column; width: 100%;}
    #toppage .mainimg .news dl { font-size: 87.5%; line-height: 150%;}
    #toppage .mainimg .news .btn { position: absolute; top:30px; right:30px;}
    #toppage .mainimg .news .btn a { padding: 0 10px;}
}


/* pickup */
#toppage .pickup .inner { display: flex; flex-wrap: wrap; align-items: flex-start; gap:100px;}
#toppage .pickup .pic,
#toppage .pickup .cont { width:calc(50% - 50px);}
#toppage .pickup .mid {
    position: relative;
    font-family: "Noto Serif JP", "Hiragino Serif","Meiryo", sans-serif;
    font-size: 125%;
}
#toppage .pickup .mid::before {
    position: absolute; top:15px; left: -70px;
    display: block; clear: both; content:"";
    width: 50px; height: 2px;
}
#toppage .pickup .mid.blue { color: #003694;}
#toppage .pickup .mid.emerald { color: #1FB9AD;}
#toppage .pickup .mid.blue::before { background: #003694;}
#toppage .pickup .mid.emerald::before { background: #1FB9AD;}
#toppage .pickup .catch { margin: 40px 0; font-size:175%; text-align: left;}
#toppage .pickup .come { font-size: 125%;}
#toppage .pickup .btn { margin-top: 40px;}
#toppage .pickup .btn p a {
	padding:10px 50px 10px 25px;
	font-size:112.5%;
    text-align: left;
    background-size: 40px auto;
}
#toppage .pickup .btn.blue p a { background-color: #003694;}
#toppage .pickup .btn.emerald p a { background-color: #1FB9AD;}
#toppage .pickup .pic {
    position: relative;
    aspect-ratio: 650 / 400;
}
#toppage .pickup .pic img,
#toppage .pickup .pic::before { 
    position:absolute;
    width:175%; max-width: 650px; height: auto;
    aspect-ratio: 650 / 400;
    object-fit: cover;
    border-radius: 30px;
}
#toppage .pickup .pic img {
    top: 0; right: 0; z-index: 99;
}
#toppage .pickup .pic::before { 
    display: block; clear: both; content:"";
    top:30px; right: 30px;
}
#toppage .pickup .pic.blue::before { background: rgba(0,54,148,0.30);}
#toppage .pickup .pic.emerald::before { background: rgba(31,185,173,0.30);}
#toppage .pickup .row_re { flex-direction: row-reverse;}
#toppage .pickup .row_re .pic img { right: inherit; left: 0;}
#toppage .pickup .row_re .pic::before { right: inherit; left: 30px;}
#toppage .about { background: #E8F5FD;}
@media only screen and (max-width:468px){
    #toppage .pickup .inner { flex-direction:column-reverse; gap:50px;}
    #toppage .pickup .pic,
    #toppage .pickup .cont { width:100%;}
    #toppage .pickup .mid { text-align: center;}
    #toppage .pickup .mid::before { display: none;}
    #toppage .pickup .catch { margin: 40px 0; font-size: 125%; text-align:center;}
    #toppage .pickup .come { font-size: 100%;}
    #toppage .pickup .btn { margin: 40px auto 0; justify-content: center;}
    #toppage .pickup .btn p a {font-size:100%;}
    #toppage .pickup .pic {position: relative;}
    #toppage .pickup .pic img,
    #toppage .pickup .pic::before { width:100%; border-radius: 15px;}
    #toppage .pickup .pic img { position: relative; top:0 !important; right:0 !important; left: inherit;}
    #toppage .pickup .pic::before { top:15px !important; right:0 !important; left: inherit !important;}
}

/* Support */
#toppage .support img { width: 100%; height: auto;}


/* Banner */
#toppage .banner .inner { display: flex; flex-wrap: wrap; gap: 20px;}
#toppage .banner p { width: calc(25% - 15px);}
@media only screen and (max-width:468px){
    #toppage .banner p { width: calc(50% - 10px);}
}