@charset "UTF-8";

/* ===================================================================

 file name  :  magazine.css

=================================================================== */
article{ position: relative; margin: 0 auto; padding: 205px 0 0; width: 1200px; color: #3e3a39; line-height: 1;}

article header{ height: auto;}
article header h1{ display: block; color: #3e3a39; letter-spacing: .02em; font-weight: 400; font-size: 28px; font-family: trajan-pro-3, serif;}

.list-archive{ display: flex; margin: 0 calc(50% - 50vw); padding: 45px 0 0; width: auto; border-bottom: 1px solid rgba(178,170,166,.7); justify-content: center;}
.list-archive > li{ padding: 0 5px;}
.list-archive a{ display: block; padding: 15px 30px; border: 1px solid rgba(178,170,166,.7); border-bottom: none; border-radius: 5px 5px 0 0; letter-spacing: .02em; font-weight: 400; font-size: 14px; font-family: trajan-pro-3, serif; cursor: pointer;}
.list-archive .current a{ background: rgba(178,170,166,.7);}

.list-entry{ display: grid; font-family: trajan-pro-3, serif; grid-template-columns: repeat(3, 1fr); grid-gap: 60px 80px;}
.list-entry a{ display: block;}
.list-entry figure{overflow: hidden; border-radius: 0 30px 0 0;}
.list-entry img{ width: 100%; transition: all .6s ease; transform: scale(1);}
.list-entry a:hover img{ transform: scale(1.1);}
.list-entry .detail{ display: flex; margin: 12px 0 0; flex-wrap: wrap; justify-content: space-between; align-items: baseline;}
.list-entry .cat{ display: flex; padding: 0 .75em; height: 24px; border: 1px solid rgba(0,0,0,.5); border-radius: 5px; font-weight: 400; font-size: 12px; line-height: 1; align-items: center; justify-content: center;}
.list-entry time{ font-size: 12px;}
.list-entry h2{ margin: .5em 0 0; width: 100%; font-size: 14px; line-height: 1.75;}
.list-entry h2 span{ font-weight: 600;}

section .date{ display: flex; padding: 0 0 1em; font-size: 14px; font-family: trajan-pro-3, serif; line-height: 1; align-items: center;}
section .date .cat{ display: flex; padding: 0 .75em; height: 30px; border: 1px solid rgba(0,0,0,.5); border-radius: 5px; color: #3e3a39; font-weight: 400; align-items: center; justify-content: center;}
section .date time{ margin: 0 0 0 1em;}
section h2{ color: #3e3a39; letter-spacing: .02em; font-weight: 400; font-size: 28px; font-family: trajan-pro-3, serif; line-height: 1.5;}
section h2 span{ font-weight: 600;}
section .detail{ margin: 60px 0 0; padding: 0 140px; font-size: 15px; line-height: 1.75;}
section .detail > *:first-child{ margin: 0;}
section .detail h3{ margin: 3em 0 0; padding: 0 0 .5em; border-bottom: 1px solid rgba(0,0,0,.5); letter-spacing: normal; font-weight: 500; font-size: 21px; line-height: 1.5; scroll-margin-top: 60px;}
section .detail p{ margin: 1.5em 0 0;}
section .detail figure{ margin: 30px 0 0;}
section .detail figcaption{ display: flex; text-align: center; font-size: 13px; justify-content: center;}
section .menu{ margin: 30px 0 0; padding: 30px; border-radius: 5px; background: #fff;}
section .menu dt{ font-weight: 700;}
section .menu dd{ padding: .5em 0 0;}
section .menu dd ol{ margin: 0 0 0 1.2em;}
section .menu dd ol > li{ list-style: disc;}
section .detail  a{ color: #988575; text-decoration: underline;}
section .detail  a:hover{ text-decoration: none;}
section .more{ display: flex; margin: 30px 0 0; justify-content: center;}
section .more a{ display: flex; padding: 0 3em; height: 45px; background: #988575; color: #3e3a39; color: #fff; text-decoration: none; line-height: 1; justify-content: center; align-items: center;}

.reserve{ margin: 90px auto 0; padding: 30px; width: 820px; border: 1px solid rgba(178,170,166,.7); text-align: center;}
.reserve dt{ color: #988575; letter-spacing: .1em; font-weight: 500; font-size: 24px; font-family: trajan-pro-3, serif; line-height: 1;}
.reserve dd{ display: flex; padding: 15px 0 0; justify-content: center;}
.reserve a{ display: flex; width: 250px; height: 45px; border: 1px solid rgba(178,170,166,.7); background: rgba(255,255,255,.7); color: #3e3a39; font-weight: 400; font-size: 14px; font-family: trajan-pro-3, serif; align-items: center; justify-content: center;}