@media only screen and (min-width:468px){
    #header { background: linear-gradient(to bottom, rgba(87,66,53,0.8), rgba(87,66,53,0)) !important;}
    #header h1 a { background-image:url("../images/common/logo1.webp") !important;}
    #nav ul li p a { color: #fff;}
    #nav ul li.tel a { color: #fff;}
    #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 img { width: 100%; height: 100vh; object-fit: cover;}
#toppage .mainimg .news {
    display: flex; gap:10px 40px;
    position: absolute; left: 0; bottom: 0; z-index: 9;
    width:100%;
    padding: 20px;
    background: #fff;
}
#toppage .mainimg .news p {
    font-family: "Noto Serif JP", "Hiragino Serif","Meiryo", sans-serif;
    font-size: 162.5%;
    font-weight: 400;
}
#toppage .mainimg .news dl { display: flex; gap:0 20px;}
#toppage .mainimg .news dd a { color: #222;}
@media only screen and (max-width:468px){
    #toppage .mainimg img { height: 400px; object-fit: cover;}
    #toppage .mainimg .news { position: static;flex-direction: column; width: 100%;}
    #toppage .mainimg .news p { font-size: 20px;}
    #toppage .mainimg .news dl { flex-direction: column;}
    #toppage .mainimg .news dl { font-size: 87.5%; line-height: 150%;}
}

/*========================================================
    Introduction
========================================================*/
#toppage .introduction {
    position: relative;
    background: #EDF7F5;
}
#toppage .introduction::before {
    position: absolute; bottom: -50px; right: 0;
    display: block; clear: both; content:"";
    width: 55%; max-width: 715px; height: auto; aspect-ratio: 715 / 634;
    background: url("../images/common/kazari1.webp") no-repeat;
    background-size: 100% auto;
}

#toppage .introduction .inner { display: flex; flex-direction: column; gap:50px; text-align: center;}
#toppage .introduction h1 {
    font-family: "Noto Serif JP", "Hiragino Serif","Meiryo", sans-serif;
    font-size: 287.5%;
    font-weight: 400;
}
#toppage .introduction h2 {
    font-family: "Noto Serif JP", "Hiragino Serif","Meiryo", sans-serif;
    font-size: 187.5%;
    font-weight: 400;
}
#toppage .introduction .come { text-align: center;}
@media only screen and (max-width:768px){
    #toppage .introduction .inner { gap:30px;}
    #toppage .introduction h1 { font-size: 225%;}
    #toppage .introduction h2 { font-size: 125%;}
}
@media only screen and (max-width:468px){
    #toppage .introduction .inner { gap:20px;}
    #toppage .introduction h1 { font-size: 150%;}
    #toppage .introduction h2 { font-size: 112.5%;}
}



/*========================================================
    Service
========================================================*/
#toppage .service { background:#F6FBFA;}
#toppage .service .inner { display: flex; flex-direction: column; gap:50px;}
#toppage .service h3 {
    display:flex; flex-direction: row; align-items: center; gap:20px;
    position: absolute; top:-40px; left: 0;
}
#toppage .service .service_list { display: flex; gap:10px;}
#toppage .service .box { background: #fff; box-shadow: 0 0 15px  rgba(0,0,0,0.05);}
#toppage .service .box a { color: #222;}
#toppage .service .box .pic img { aspect-ratio: 776 / 578; object-fit: cover;}
#toppage .service .box .cont {
    display: flex; flex-direction: column; gap:10px;
    padding: 40px 30px;
}
#toppage .service .box h4 { font-size: 22px; color:#3EAC83;}
@media only screen and (min-width:768px){
    #toppage .service .box a:hover { text-decoration: none;}
}
@media only screen and (max-width:468px){
    #toppage .service h3 { display: block; position:static;}
    #toppage .service .service_list { flex-direction: column; gap:40px;}
}



/*========================================================
    Message
========================================================*/
#toppage .message { position: relative; background: #EDF7F5;}
/*
#toppage .message::before {
    position: absolute; bottom: 0; left: 5%;
    display: block; clear: both; content:"";
    width: 174px; height:auto; aspect-ratio: 174 / 109;
    background: url("../images/common/kazari2.webp") no-repeat;
    background-size: 100% auto;
}
*/
#toppage .message .inner { display: flex; flex-direction: column; gap:50px;}
#toppage .message .box {
    display: flex; gap:40px;
    margin: auto;
    width: 100%; max-width: 850px;
}
#toppage .message .box .pic { width: 160px;}
#toppage .message .box .cont {
    display: flex; flex-direction: column; gap:20px;
    width: calc(100% - 160px);
}
#toppage .message .box .namae { text-align: right;}
@media only screen and (max-width:768px){
    #toppage .message::before { width: 100px;}
}
@media only screen and (max-width:468px){
    #toppage .message .box { flex-direction: column;}
    #toppage .message .box .pic { margin: auto; width: 120px;}
    #toppage .message .box .cont { width: 100%;}
}



/*========================================================
    About
========================================================*/
#toppage .about { background:#F6FBFA;}
#toppage .about .inner { display: flex; flex-direction: column; gap:50px;}
#toppage .about .company {
    display: flex; flex-direction: column; gap:20px;
    margin: auto;
    width: 100%; max-width: 680px;
}
#toppage .about .company dl {
    display: flex; flex-wrap: wrap;
    padding:  0 0 20px;
    border-bottom: 1px solid #ddd;
}
#toppage .about .company dt { width: 140px; }
#toppage .about .company dd { width: calc(100% - 140px);}
#toppage .about .bana { margin: auto; max-width: 680px;}
@media only screen and (max-width:468px){
    #toppage .about .company dl {display: flex; flex-direction: column;}
    #toppage .about .company dt,
    #toppage .about .company dd { width: 100%;}
    #toppage .about .company dt { font-weight:700;}
}



/*========================================================
    Map
========================================================*/
#toppage .map { line-height: 100%;}
#toppage .map iframe {  width: 100%; height: 400px;}
@media only screen and (max-width:768px){
}
@media only screen and (max-width:468px){
    #toppage .map iframe {  width: 100%; height: 300px;}
}