@charset "UTF-8";
/* CSS Document */

/* アーカイブ（基本） */
#archive_wrap .image-wrapper { aspect-ratio: 6 / 4; width: 100%; border-radius: 12px; overflow: hidden; }
#archive_wrap .image-wrapper a { display: flex; width: 100%; height: 100%; margin: 0; padding: 0; text-decoration: none; }
#archive_wrap .image-wrapper img { display: block; width: 100% !important; height: 100% !important; max-width: 100% !important; object-fit: cover; object-position: center; transition: transform 0.3s ease; margin: 0; }
#archive_wrap .image-wrapper a:hover img { transform: scale(1.1); }

/* アーカイブ（webコラム用） */
#archive-column_wrap .image-wrapper { aspect-ratio: 6 / 4; width: 100%; max-width: none; overflow: hidden; }
#archive-column_wrap .image-wrapper a { display: flex; width: 100%; height: 100%; margin: 0; padding: 0; text-decoration: none; }
#archive-column_wrap .image-wrapper img { display: block; width: 100% !important; height: 100% !important; max-width: 100% !important; object-fit: cover; object-position: center; transition: transform 0.3s ease; margin: 0; }
#archive-column_wrap .image-wrapper a:hover img { transform: scale(1.1); }

/* アーカイブ（制作事例） */
#archive-works_wrap .image-wrapper { aspect-ratio: 6 / 2; width: 100%; border: 1px solid #BFC5CC; border-radius: 12px; overflow: hidden; background: #FFF; box-shadow: 0 2px 8px rgba(26, 26, 26, 0.08); }
#archive-works_wrap .image-wrapper a { display: flex; width: 100%; height: 100%; margin: 0; padding: 0; text-decoration: none; }
#archive-works_wrap .image-wrapper img { display: block; width: 100% !important; height: 100% !important; max-width: 100% !important; object-fit: cover; object-position: center; transition: transform 0.3s ease; margin: 0; }
#archive-works_wrap .image-wrapper a:hover img { transform: scale(1.1); }

@media screen and (min-width: 861px) {
#archive_wrap { margin-top: 60px; }
#archive_wrap .post_list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 80px; margin-top: 50px; }
#archive_wrap .post_list li { display: flex; flex-direction: column; position: relative; }
#archive_wrap .post_list li::after { content: ""; align-self: flex-end; width: 47px; height: 47px; background: url(../images/arrow_02.png) no-repeat center center; }
#archive_wrap .post_list a { width: 100%; height: 100%; text-indent: 100%; white-space: nowrap; overflow: hidden; position: absolute; top:0; left: 0; }
#archive_wrap .post_list a:hover { opacity: 0.6; background: #fff !important; }
#archive_wrap .post_list .date { margin: 15px 0 0 0; color: #666; font-size: 12px; }
#archive_wrap .post_list .title { font-weight: 700; line-height: 155.556%; }

#archive-column_wrap { margin-top: 60px; }
#archive-column_wrap .cat_list { display: flex; gap: 15px; }
#archive-column_wrap .cat_list a { padding: 9px 12px; font-size: 12px; background: #EEE !important; border-radius: 40px; }
#archive-column_wrap .cat_list .current a { color: #fff; background: linear-gradient(90deg, #E94F86 31.67%, #3FA8E5 90.87%) !important; }
#archive-column_wrap .post_list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 25px; margin-top: 50px; }
#archive-column_wrap .post_list > li { border-radius: 12px; border: 1px solid #E5E7EB; overflow: hidden; }
#archive-column_wrap .post_list .box { display: flex; flex-direction: column; gap: 12px; padding: 15px; }
#archive-column_wrap .post_list .cat { display: flex; gap: 10px; }
#archive-column_wrap .post_list .cat a { padding: 4px 10px; color: #fff; font-size: 12px; font-weight: 700; background: #E94F86 !important; border-radius: 16px; }
#archive-column_wrap .post_list .title { font-weight: 700; line-height: 155.556%; }
#archive-column_wrap .post_list .date { color: #666; font-size: 12px; }

#archive-works_wrap { margin-top: 60px; width: calc(100% - 10%); max-width: 1200px; }
#archive-works_wrap .cat_list { display: flex; flex-wrap: wrap; gap: 12px; }
#archive-works_wrap .cat_list a { display: block; padding: 9px 14px; color: #1A1A1A; font-size: 13px; line-height: 1.4; border-radius: 40px; background: #EEE !important; }
#archive-works_wrap .cat_list a:hover,#archive-works_wrap .cat_list a:focus-visible { color: #E94F86; opacity: 1; }
#archive-works_wrap .cat_list .current a { color: #FFF !important; background: linear-gradient(90deg, #E94F86 31.67%, #3FA8E5 90.87%) !important; }
#archive-works_wrap .post_list { display: flex; flex-direction: column; gap: 80px; margin-top: 50px; }
#archive-works_wrap .post_list .tags { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 15px 0; color: #E94F86; font-size: 14px; font-weight: 700; }
#archive-works_wrap .post_list .tags a { color: #E94F86; }
#archive-works_wrap .post_list .title { font-size: 24px; font-weight: 700; line-height: 158.333%; }

.pagenation { display: flex; justify-content: center; gap: 12px; margin-top: 50px; margin-bottom: 120px; }
.pagenation a { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 46px; height: 46px; font-weight: 700; background: #fff !important; border: 1px solid #E5E7EB; border-radius: 23px; }
.pagenation .current span { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 46px; height: 46px; font-weight: 700; color: #fff !important; background: #E94F86 !important; border: 1px solid #E94F86; border-radius: 23px; }
.pagenation a:hover { color: #E94F86 !important; opacity: 1 !important; border: 1px solid #E94F86; }
}
@media screen and (max-width: 860px) {
#archive_wrap { margin-top: 60px; }
#archive_wrap .post_list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; margin-top: 50px; }
#archive_wrap .post_list li { display: flex; flex-direction: column; position: relative; }
#archive_wrap .post_list li::after { content: ""; align-self: flex-end; width: 47px; height: 47px; background: url(../images/arrow_02.png) no-repeat center center; }
#archive_wrap .post_list a { width: 100%; height: 100%; text-indent: 100%; white-space: nowrap; overflow: hidden; position: absolute; top:0; left: 0; }
#archive_wrap .post_list a:hover { opacity: 0.6; background: #fff !important; }
#archive_wrap .post_list .date { margin: 15px 0 0 0; color: #666; font-size: 12px; }
#archive_wrap .post_list .title { font-weight: 700; line-height: 155.556%; }

#archive-column_wrap { margin-top: 60px; }
#archive-column_wrap .cat_list { display: flex; flex-wrap: wrap; gap: 10px; }
#archive-column_wrap .cat_list a { padding: 9px 12px; font-size: 12px; background: #EEE !important; border-radius: 40px; }
#archive-column_wrap .cat_list .current a { color: #fff; background: linear-gradient(90deg, #E94F86 31.67%, #3FA8E5 90.87%) !important; }
#archive-column_wrap .post_list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 15px; margin-top: 50px; }
#archive-column_wrap .post_list > li { border-radius: 12px; border: 1px solid #E5E7EB; overflow: hidden; }
#archive-column_wrap .post_list .box { display: flex; flex-direction: column; gap: 12px; padding: 15px; }
#archive-column_wrap .post_list .cat { display: flex; gap: 5px; }
#archive-column_wrap .post_list .cat a { padding: 4px 10px; color: #fff; font-size: 12px; font-weight: 700; background: #E94F86 !important; border-radius: 16px; }
#archive-column_wrap .post_list .title { font-weight: 700; line-height: 155.556%; }
#archive-column_wrap .post_list .date { color: #666; font-size: 12px; }

#archive-works_wrap { margin-top: 60px; }
#archive-works_wrap .cat_list { display: flex; flex-wrap: wrap; gap: 10px; }
#archive-works_wrap .cat_list a { display: block; padding: 8px 12px; color: #1A1A1A; font-size: 12px; line-height: 1.4; border-radius: 40px; background: #EEE !important; }
#archive-works_wrap .cat_list a:hover,#archive-works_wrap .cat_list a:focus-visible { color: #E94F86; opacity: 1; }
#archive-works_wrap .cat_list .current a { color: #FFF !important; background: linear-gradient(90deg, #E94F86 31.67%, #3FA8E5 90.87%) !important; }
#archive-works_wrap .post_list { display: flex; flex-direction: column; gap: 40px; margin-top: 50px; }
#archive-works_wrap .post_list .tags { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 15px 0 0 0; color: #E94F86; font-size: 12px; font-weight: 700; }
#archive-works_wrap .post_list .tags a { color: #E94F86; }
#archive-works_wrap .post_list .title { font-size: 18px; font-weight: 700; line-height: 158.333%; }

.pagenation { display: flex; justify-content: center; gap: 12px; margin-top: 50px; margin-bottom: 80px; }
.pagenation a { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 46px; height: 46px; font-weight: 700; background: #fff !important; border: 1px solid #E5E7EB; border-radius: 23px; }
.pagenation .current span { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 46px; height: 46px; font-weight: 700; color: #fff !important; background: #E94F86 !important; border: 1px solid #E94F86; border-radius: 23px; }
.pagenation a:hover { color: #E94F86 !important; opacity: 1 !important; border: 1px solid #E94F86; }
}
@media screen and (max-width: 550px) {
#archive-column_wrap .post_list { display: grid; grid-template-columns: repeat(1, 1fr); gap: 40px 15px; margin-top: 50px; }
}