@charset "utf-8"; /* 金光記述 */ a { color: #222222; } a:hover{ color: #337ab5; } a img:hover { /* box-shadow: 4px 4px 40px -8px rgba(51,122,181,.3); */ transition: .5s ease-in-out; } p { font-size: 16px; } .service_box h3 { font-size: 20px; padding: 0.25em 0.5em;/*上下 左右の余白*/ color: #ffffff;/*文字色*/ background-color: #337ab5; border-left: solid 10px #b5daf8;/*左線*/ } .service_box { margin-bottom: 80px; } .tour_box { width: 100%; display: flex; flex-wrap: wrap; gap: 32px 16px; margin-bottom: 100px; } .tour_box li { width: calc((100% - 100px) / 3); margin: 0 auto; padding: 8px 8px 12px; border: 1px solid #ccc; border-radius: 4px; box-shadow: 2px 2px 8px rgba(110,110,110,.1); } .tour_box h3 { font-size: 16px; padding: 0.25em 0.5em;/*上下 左右の余白*/ color: #ffffff;/*文字色*/ background-color: #337ab5; border-left: solid 10px #b5daf8;/*左線*/ } .ourservice img { width: 80px; margin: 0 10px 0 10px; } .ourservice img a{ overflow:hidden; } .ourservice img:hover{ transform:scale(1.3); transition:0.3s; } .ourservice { width: 100%; display: flex; justify-content: space-around; align-items: flex-start; margin-bottom: 150px; padding: 30px; color: #337ab5; background: white; border-top: solid 3px #337ab5; box-shadow: -6px 6px 10px 0px rgba(0, 0, 0, 0.22); } .ourservice li { width: calc(100vw / 6); text-align: center; } h2 { display: inline-block; text-align: left; } .ourservice h4 { font-size: 13px; } @media screen and (max-width: 600px) { .title img { width: 100%; margin-bottom: 20px; } .tour_box li { width: 100%; } .tour_box { flex-wrap: wrap; } .ourservice { flex-wrap: wrap; justify-content: space-around; } .ourservice li { width: calc(100vw / 3); margin: 0 auto; } }