#toppage .inner {
    display: flex; flex-direction: column; gap:50px;
}
@media only screen and (max-width:468px){
    #toppage .inner { gap:20px;}
}

#toppage h3 { text-align: center;}
#toppage h3 b {
    position: relative;
    font-size: 250%;
    font-weight: 700;
    letter-spacing: 2px;
}
#toppage h3 b span {position: relative;}
#toppage h3 b::before {
    display: block; clear: both; content:"";
    position: absolute; left: 0; right: 0; bottom: -5px;
    margin: auto;
    width: 100%; height: 20px;
    background:#ddd;
    border-radius: 40px;
}
#toppage h3 small {
    display: block;
    margin-top: 10px;
    font-family: "Roboto", sans-serif;
    font-size: 250%;
    font-weight: 700;
}
@media only screen and (max-width:768px){
    #toppage h3 b { font-size: 225%;}
    #toppage h3 small { font-size:225%;}
}
@media only screen and (max-width:468px){
    #toppage h3 b { font-size: 130%; letter-spacing: -1px;}
    #toppage h3 small { font-size:125%;}
    #toppage h3 b::before { height: 15px;}
}


#toppage .b_more { position: relative; z-index: 9; margin: auto; width: 100%; max-width: 340px;}
#toppage .b_more a {
    display: block;
    padding: 20px;
    color: #fff;
    font-size: 162.5%;
    font-weight:700;
    text-align: center;
    text-decoration: none;
    background:#476BC4 url("../images/common/arrow_w2.svg") no-repeat 90% center;
    background-size: 20px auto;
    border-radius: 100px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.20);
    transform: .3s;
}
@media only screen and (min-width:768px){
    #toppage .b_more a:hover {
        opacity: 0.8;
        background-position: 92% center;
    }
}
@media only screen and (max-width:768px){
    #toppage .b_more a { padding: 17px; font-size: 137%;}
}
@media only screen and (max-width:468px){
    #toppage .b_more { width: 200px;}
    #toppage .b_more a { padding: 10px; font-size: 112.5%;}
}


/*========================================================
   News
========================================================*/
#toppage .news {
    position: relative; z-index: 1;
    background: #fff;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.05);
}
#toppage .news .inner {
    flex-wrap: wrap; flex-direction: row; justify-content: space-between; gap:20px 0;
    padding: 20px 0;
}
#toppage .news h3 {
    width: 160px;
    padding-left: 50px;
    font-size: 125%;
    text-align: left;
    background: url("../images/top/news_icon.webp") no-repeat left center;
    background-size: auto 25px;
    border-right:2px solid #ddd;
}
#toppage .news .news_cont { width:calc(100% - 160px - 80px - 60px);}
#toppage .news .news_cont ul { display: flex; gap:0 20px;}
#toppage .news .news_cont ul li:nth-child(1) { width: 90px;}
#toppage .news .news_cont ul li:nth-child(2) { width:calc(100% - 90px - 20px);}
#toppage .news .news_cont ul li:nth-child(2) a { color: #222;}
#toppage .news .b_more2 { width:80px;}
#toppage .news .b_more2 a {
    display: block;
    padding: 0 10px;
    color: #fff;
    font-size: 112.5%;
    font-weight:700;
    text-align: center;
    text-decoration: none;
    background:#476BC4;
    border-radius: 100px;
    transform: .3s;
}
@media only screen and (min-width:768px){
    #toppage .news .b_more2 a:hover { opacity: 0.8;}
    #toppage .news .news_cont ul li:nth-child(2) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
@media only screen and (max-width:768px){
    #toppage .news h3 { width: 100%; border: none;}
    #toppage .news .news_cont { width:100%;}
    #toppage .news .b_more2 {position: absolute; top:20px; right:0;}
}
@media only screen and (max-width:468px){
    #toppage .news .news_cont ul { flex-direction: column;}
    #toppage .news .news_cont ul li:nth-child(1),
    #toppage .news .news_cont ul li:nth-child(2) { width:100%; line-height: 150%;}
}


/*========================================================
   About
========================================================*/
#toppage .about .inner { padding-bottom: 0;}
#toppage .about {
    background:url("../images/top/kazari_road.webp") no-repeat center bottom;
    background-size: 100% auto;
}
#toppage .about h3 b::before { background: rgba(71,107,196,0.50);}
#toppage .about h3 small { color: rgba(71,107,196,0.80);}
#toppage .about .about_cont {
    position: relative;
    display: flex; flex-direction: column; gap:20px;
}
#toppage .about  h4 { font-size: 162.5%; text-align: center;}
#toppage .about  .come { text-align: center;}
#toppage .about .kazari {
    position: absolute;
    margin: auto;
}
#toppage .about .kazari1 {
    top: -100%; left:7%;
    width: 125px; height:auto; aspect-ratio: 125 / 159;
}
#toppage .about .kazari2 {
    bottom:-100%; left: 0;
    width: 162px; height:auto; aspect-ratio: 162 / 185;
}
#toppage .about .kazari3 {
    top: 0; bottom: 0; right: 0;
    width: 302px; height:auto; aspect-ratio: 302 / 258;
}
@media only screen and (max-width:468px){
    #toppage .about .inner { padding-bottom: 50px;}
    #toppage .about .kazari1 {
        top: -100%; left:7%;
        width:80px;
    }
    #toppage .about .kazari2 {
        bottom:-20%; left: 0;
        width:100px;
    }
    #toppage .about .kazari3 {
        top: -45%; bottom: inherit;
        width:150px;
    }
    #toppage .about  h4 { font-size: 125%;}
}


/*========================================================
   Trouble
========================================================*/
#toppage .trouble .inner { padding-bottom: 0;}
#toppage .trouble h3 b::before { background: rgba(235,185,48,0.50);}
#toppage .trouble h3 small { color: rgba(235,185,48,0.80);}
#toppage .trouble .trouble_cont { display: flex; flex-wrap: wrap; gap:50px 40px;}
#toppage .trouble .box {
    position: relative;
    padding-top:15%;
    width:calc(33.3% - 26.66px); aspect-ratio: 1 / 1;
    background-size: 100% auto !important;
}
#toppage .trouble .box:nth-child(odd) { background: url("../images/top/trouble_bg1.webp") no-repeat;}
#toppage .trouble .box:nth-child(even) { background: url("../images/top/trouble_bg2.webp") no-repeat;}
#toppage .trouble .box .pic { position: absolute; top: 0; left: 0; right: 0; margin: auto; width: 90%;}
#toppage .trouble .box:nth-child(1) .pic { top: -10px;}
#toppage .trouble .box:nth-child(2) .pic { top: -25px;}
#toppage .trouble .box:nth-child(3) .pic { top: -60px;}
#toppage .trouble .box h4 { position: relative; z-index: 9; text-align: center;}
#toppage .trouble .box h4 small {
    display: block;
    margin: 0 auto 15px;
    max-width: 185px;
    padding: 3% 10px;
    font-size: 112.5%;
    text-align: center;
    background:#EBB930;
    border-radius: 30px;
}
#toppage .trouble .box h4 b {
    font-size: clamp(87.5%, 2vw, 162.5%);
    font-weight: 700;
}
#toppage .trouble .comment { margin: auto; max-width: 660px; text-align: center;}
@media only screen and (max-width:768px){
    #toppage .trouble .box h4 small { font-size: 87.5%;}
}
@media only screen and (max-width:468px){
    #toppage .trouble .trouble_cont { flex-direction: column; gap:10px;}
    #toppage .trouble .box { display: flex; gap:0;  padding: 20px; width:100%; aspect-ratio:auto; background: #fff !important; border-radius: 20px;}
    #toppage .trouble .box:nth-child(1) .pic { top: -10px;}
    #toppage .trouble .box:nth-child(2) .pic { top: -20px;}
    #toppage .trouble .box:nth-child(3) .pic { top: -35px;}
    #toppage .trouble .box .pic { position: static; width: 100px;}
    #toppage .trouble .box h4 { width: calc(100% - 100px); max-width: none; padding:0; line-height: 150%;}
    #toppage .trouble .box h4 small { font-size: 87.5%; margin-bottom: 10px;}
    #toppage .trouble .box h4 b { font-size:100%; letter-spacing: -1px;}
}




/*========================================================
   Service
========================================================*/
#toppage .service h3 b::before { background: rgba(87,167,64,0.50);}
#toppage .service h3 small { color: rgba(87,167,64,0.80);}
#toppage .service .service_cont { display: flex; flex-direction: column; gap:50px 40px; }
#toppage .service .box { display: flex; flex-wrap: wrap; align-items: center; gap:40px 70px; }
#toppage .service .box.row_re { flex-direction: row-reverse;}
#toppage .service .box .pic { position: relative; width: 50%;}
#toppage .service .box .pic::before {
    display: block; clear: both; content:"";
    position: absolute; right:-20px; bottom:-20px;
    width: 100%; height: auto;
    aspect-ratio: 16 / 10;
    background:#F9F6F2;
    border-radius: 30px;
    mix-blend-mode:multiply;
}
#toppage .service .box .pic img {
    position: relative;
    width: 100%; height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 30px;
}
#toppage .service .box .cont { 
    display: flex; flex-direction: column; gap:20px;
    width: calc(50% - 70px);
}
#toppage .service .box .cont h4 { font-size:162.5%; font-weight: 700;}
@media only screen and (max-width:768px){
    #toppage .service .box .cont h4 { font-size:137%;}
    #toppage .service .box { flex-direction: column;}
    #toppage .service .box .pic,
    #toppage .service .box .cont { width:100%;}
    #toppage .service .box .pic::before { right:-10px; bottom:-10px;}
    #toppage .service .box .cont h4 { font-size:125%;}
}
@media only screen and (max-width:468px){
}



/*========================================================
   Flow
========================================================*/
#toppage .flow { background: #fff;}
#toppage .flow h3 b::before { display:none;}
#toppage .flow .flow_cont { display: flex; flex-wrap: wrap; justify-content: center; gap:50px 40px; }
#toppage .flow dl { width:13%; min-width: 160px;}
#toppage .flow dt img {
    width: 100%; height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius:200px;
}
#toppage .flow dd { text-align: center;}
#toppage .flow dd small { display:block; font-size: 100%; line-height:120%;}
@media only screen and (max-width:1300px){
    #toppage .flow .flow_cont { margin: auto; max-width:560px; }
}
@media only screen and (max-width:468px){
    #toppage .flow .flow_cont {
        flex-direction: column; gap:20px;
        margin: auto; width:100%
    }
    #toppage .flow dl { display: flex; align-items: center; gap:20px; width:100%;}
    #toppage .flow dt { width: 90px;}
    #toppage .flow dd { width: calc(100% - 90px - 20px); text-align: left;}
    #toppage .flow dd small { font-size: 100%;}
}



/*========================================================
   voice
========================================================*/
#toppage .voice {
    background:url("../images/top/kazari_road.webp") no-repeat center center;
    background-size: 100% auto;
}
#toppage .voice h3 b::before { display:none;}
@media only screen and (max-width:768px){
}
@media only screen and (max-width:468px){
}


/*========================================================
   Movie
========================================================*/
#toppage .movie { background: #fff;}
#toppage .movie h3 b::before { display:none;}
#toppage .movie .inner { padding-bottom:0;}
#toppage .movie .movie_cont { display: flex; justify-content: center; gap:50px 40px; width:100%;}
#toppage .movie .movie_cont .box { width:calc(50% - 20px) !important;}
#toppage .movie .movie_cont .youtube { position:relative; padding-top:56.25%;}
#toppage .movie .movie_cont iframe {
position:absolute; top:0; left:0;
width: 100% !important; height:100%;
}
@media only screen and (max-width:468px){
    #toppage .movie .movie_cont {
        flex-direction: column; gap:20px;
        margin: auto; width:100%
    }
    #toppage .movie .movie_cont .box { width:100% !important;}
}