@charset "utf-8";

/* archive
------------------------------ */
#blog_sec{padding-top:0;/*overflow: hidden;*/}
#blog_sec .wrapper.has_aside{position:relative;}
#blog_sec .wrapper.has_aside #menu dt{margin-bottom:1.5rem}
#blog_sec .wrapper.has_aside #menu dl{padding:3rem 0}
#blog_sec .wrapper.has_aside #menu dl:first-of-type{padding-top:0}
#blog_sec .wrapper.has_aside #menu dl + dl{border-top:solid 1px #d8d8d8}
#blog_sec .wrapper.has_aside #menu dt .title{font-size:2rem;font-weight:700;position:relative;padding-bottom:1rem}
#blog_sec .wrapper.has_aside #menu dt .title:before{content:"";position:absolute;bottom:0;left:0;width:40px;height:2px;background:#000}
#blog_sec .wrapper.has_aside #menu li{position:relative;padding-left:1.4em}
#blog_sec .wrapper.has_aside #menu li:before{content:"・";position:absolute;left:0;top:.3em}
#blog_sec .wrapper.has_aside #menu li + li{margin-top:.7rem}
#blog_sec .wrapper.has_aside #menu li a{border:none;text-decoration:underline}
#blog_sec .wrapper.has_aside #menu li span{font-size:1.2rem;display:inline-block;margin-right:1rem;font-family:'Oswald',sans-serif;letter-spacing:.14em}
#blog_sec .wrapper.has_aside #menu #archives-dropdown{font-size:1.6rem;padding:2px 10px 3px 6px;width:100%}
#blog_sec .wrapper.has_aside #menu .link_banner li{padding:0}
#blog_sec .wrapper.has_aside #menu .link_banner li:before{content:none}
#blog_sec .wrapper.has_aside #menu .link_banner li + li{margin-top:1.5rem}
#blog_sec .wrapper.has_aside #menu .link_banner li a{border:dashed 1px #141823;display:flex;width:100%;min-height:48px;text-decoration:none;align-items:center;padding:1rem;position:relative;background:#fff}
#blog_sec .wrapper.has_aside #menu .link_banner li a:after{content:"";border-top:solid 2px #141823;border-right:solid 2px #141823;width:6px;height:6px;transform:rotate(45deg);position:absolute;right:10px;top:50%;margin-top:-4px}
#blog_sec .wrapper.has_aside #menu .link_banner li span{font-size:1.5rem;letter-spacing:.1em}

.blog_list{margin-top:2rem}
/*.blog_list > ul > li + li{margin-top:2rem}*/
.blog_list > ul > li a{transition: 0.2s;}
.blog_list > ul > li .img{width:42%;}
.blog_list > ul > li figure{margin:0;display:block;width:100%;position:relative;overflow:hidden;transition:.2s;}
.blog_list > ul > li figure:before{content:"";display:block;padding-top:62%}
.blog_list > ul > li figure img{max-width:100%;width:auto;height:auto;position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
.blog_list > ul > li a{display:flex;height: 100%;border:1px solid #141823;padding:3rem}
.blog_list > ul > li .desc{width:54%;margin-right:4%}
.blog_list > ul > li .desc h4{margin:1rem 0 2rem;font-size:1.6rem;display: block;height:50px;position: relative;opacity: 0}
.blog_list > ul > li .desc h4.txt_hide{opacity: 1;}
.blog_list > ul > li .desc h4:before{content: "";position: absolute;top:0;right: 0;width: 100%;height: 100%;background: #fff;transition-duration: 0.2s;}
.blog_list > ul > li .desc h4.txt_hide:before{width: 0;}
.blog_list > ul > li .more{display:inline-block;background:#141823;color:#fff;padding:2px 3rem}

@media screen and (min-width: 1000px) {
#blog_sec{background:#f5f5f5;}
#blog_sec .container{padding:0;max-width:1200px}
#blog_sec .wrapper.has_aside{display:flex;}	
#blog_sec .wrapper.has_aside #menu{width:32%;padding:4rem;/*overflow:hidden*/}	
#blog_sec .wrapper.has_aside #menu .menu_inner{margin-bottom:60px;max-width:320px;}
#blog_sec .wrapper.has_aside #menu .sticky{margin-bottom:60px;max-width:320px;position:-webkit-sticky;position:sticky;top:20px;}
#blog_sec .wrapper.has_aside #prime{width:68%;padding:2rem 4rem 10rem;}
#blog_sec .wrapper.has_aside #prime:before{position:absolute;top:0;right:32%;bottom:0;left:-100vw;content:"";background:#fff;z-index:1}	
#blog_sec .wrapper.has_aside #prime > * {position: relative;z-index: 1;}	
footer{margin-top:0}
}

@media screen and (max-width: 999px) {
#blog_sec .wrapper.has_aside {overflow: hidden;}
#blog_sec .wrapper.has_aside #prime { padding: 2rem 0 0;}
#blog_sec .wrapper.has_aside #menu{ margin-top:6rem; padding: 4rem 2rem 2rem;background:#f5f5f5;}
.blog_list{text-align:left}
.blog_list > ul > li a{padding:2rem}	
}

/* detail
------------------------------ */
#blog_sec .blog_detail{margin-top:2rem}
#blog_sec .blog_detail .entry-title{margin-bottom:4rem;border-left:solid 4px #000;padding:1rem 0 2rem 2rem}
#blog_sec .blog_detail .entry-title h2{font-size:3rem;line-height:1.5;color:#141823;margin-bottom:1rem;font-weight:600}
#blog_sec .blog_detail .entry-title h2 a{border: none;}
#blog_sec .blog_detail .entry-title{color:#7f7f7f;font-size:1.2rem;font-family:'Oswald',sans-serif;letter-spacing:.14em}
.blog_detail .entry-data{padding:3rem 0;border-bottom:solid 2px #000}
.blog_detail .entry-data li{float:right;color:#5f5f5f}
.blog_detail .entry-data:after{content:"";display:block;clear:both}
.blog_detail + .common-pagenav{margin-top:2rem}
.blog_detail + .common-pagenav .pagenation li + li{margin-left:1.5rem}
.blog_detail + .common-pagenav .prev_page,.blog_detail + .common-pagenav .next_page{display:inline-block;background:#141823;color:#fff;padding-right:30px;padding-left:30px;position:relative;margin:0}
.blog_detail + .common-pagenav .prev_page{padding-left:40px}
.blog_detail + .common-pagenav .next_page{padding-right:40px}
.blog_detail + .common-pagenav .prev_page:before,.blog_detail + .common-pagenav .next_page:before{content:"";position:absolute;top:50%;width:6px;height:6px;transform:rotate(45deg);margin-top:-4px}
.blog_detail + .common-pagenav .prev_page:before{left:10px;border-bottom:solid 2px #fff;border-left:solid 2px #fff}
.blog_detail + .common-pagenav .next_page:before{right:10px;border-top:solid 2px #fff;border-right:solid 2px #fff}

/* style */
#info-1 h3{border-top:1px dotted #000;border-bottom:1px dotted #000;color:#3f422d;font-size:20px;line-height:1.3em;padding:5px 13px 4px;margin:0 22px 20px}
#info-1 div{font-size:93%;line-height:1.6em;margin:0 38px 10px}
#info-1 div img{margin:0 3px}
#info-2 table{width:570px;margin:0 38px}
#info-2 th{width:445px;text-align:left;vertical-align:top;padding:0 0 5px}
#info-2 th h3{border-left:4px solid #684553;color:#684553;font-size:18px;font-family:Lucida Grande,Lucida Sans Unicode,Lucida Sans,Verdana,Helvetica,Arial;line-height:1.3em;padding:0 0 0 7px;margin:0}
#info-2 th h3 span{font-size:11px;font-family:Geneva,"Times New Roman",Times,sans-serif;line-height:1.2em;padding:2px 0 0;display:block}
#whatsnew #info-2 th p{border-left:4px solid #684553;font-size:12px;font-weight:400;line-height:1.3em;padding:5px 0 0 7px;margin:0}
#info-2 td{font-size:1px;text-align:right;vertical-align:bottom;padding:0 0 25px}
#info-2 td img{border:1px solid #e3e3e3}
#info-2 td.detail{width:445px;text-align:left}
#info-2 td.detail img{border:none}
#info-2 div{font-size:93%;line-height:1.6em;margin:0 38px 10px}
#whatsnew #info-3 .entry-title{padding:35px 0 15px}
#info-3 table{width:100%;margin:15px auto 0}
#info-3 th{width:60%;text-align:left;vertical-align:top;padding:0 0 5px}
#info-3 th h3{border-left:4px solid #684553;color:#684553;font-size:18px;font-family:Lucida Grande,Lucida Sans Unicode,Lucida Sans,Verdana,Helvetica,Arial;line-height:1.1em;padding:0 0 0 7px;margin:0}
#info-3 th h3 span{font-size:11px;font-family:Geneva,"Times New Roman",Times,sans-serif;line-height:1.2em;padding:2px 0 0;display:block}
#info-3 th h3 span img{vertical-align:top;margin:0 0 0 8px}
#whatsnew #info-3 th p{border-left:4px solid #684553;font-size:12px;font-weight:400;line-height:1.3em;padding:5px 0 0 7px;margin:0}
#info-3 td{width:40%;font-size:1px;text-align:right;vertical-align:bottom;padding:0 0 25px}
#info-3 th + td { padding-left: 2rem;}
#info-3 th + td > a{display:block}
#info-3 td img{border:1px solid #e3e3e3;width:initial;}
#info-3 td.detail{width:445px;text-align:left;padding:5px 0 25px}
#info-3 td.detail img{border:none}
#whatsnew #info-3 .entry-data{padding:5px 0 20px}

@media screen and (max-width: 999px) {
#blog_sec .blog_detail .entry-title{margin-bottom:2rem;padding:.5rem 0 1rem 1.5rem}
#blog_sec .blog_detail .entry-title h2{font-size:2rem}
	
/* style */
#info-3 th{width:100%;padding:0 0 2rem}
#info-3 td{width:100%}
#info-3 th + td{padding:0 0 1rem}
#info-3 td.detail{width:100%}
#info-3 td img{margin:auto;max-width:240px}
}