@charset "utf-8";
/*===============================================
 *	Example_list
===============================================*/
.bg-blue_band {background: #009db3;}
.band-ttl {font-size: 30px;}
.bluebox-normal_ttl {background: #009db3;font-size: 24px;}
.basic-bluebox {border: #009db3 10px solid;}
@media only screen and (max-width: 568px) {
#second-visualcontents {height: 130px;}
.band-ttl {font-size: 20px;}
.bluebox-normal_ttl {font-size: 18px;}
}
/*-----------------------------------------------
 *	一覧
-----------------------------------------------*/
.ttl-main_example{max-width: 854px;margin: 0 auto;}
.example-box{display: flex;justify-content:space-between;flex-wrap: wrap;}
.example-box figure{line-height: 0;margin: 1em auto 0;width: 90%;}
.example-box figure img{object-fit: cover;height: 210px;}
.example-box .article {background: #fff;border: #009db3 2px solid;max-width: 310px;box-shadow: 0 0 10px rgba(0,0,0,.3);margin-bottom: 2vw;display: flex;flex-direction: column;position: relative;}
.example-box .article::before, .example-box .article::after {content: '';width: 30px;height: 30px;position: absolute;}
.example-box .article::before {border-left: solid 6px #009db3;border-top: solid 6px #009db3;top: 0;left: 0;}
.example-box .article::after {border-right: solid 6px #009db3;border-bottom: solid 6px #009db3;bottom: 0;right: 0;}
dl.ex-price dt{background: #f25d5e;font-size: 18px;font-weight: bold;text-align: center;color: #fff;}
dl.ex-price dd{color: #f25d5e;font-size: 40px;font-weight: bold;text-align: center;}
@media all and (-ms-high-contrast: none) {
.example-box .article {display: block;}
}
.example-box .article-info{padding: .5em 1em 0;}
.example-box .article-ttl{font-size: 16px;font-weight: bold;margin-bottom: 1em;}
.example-box p{margin-bottom: 1em;}
.articleBtn{display: block;background: #fff;color: #009db3;margin: auto 1em 1em auto;border: #009db3 2px solid;padding: 10px 0;text-align: center;width: 150px;}
.articleBtn:hover{background: #009db3;color: #fff;}
@media only screen and (max-width: 768px) {
.ttl-main_example {margin: 0 3%;}
}
@media only screen and (max-width: 568px) {
.example-box .article {max-width: inherit;margin-bottom: 6vw;width: 48%;}
.example-box figure img{height: 120px;}

.example-box .article-ttl {font-size: 15px;}
dl.ex-price dt {font-size: 16px;}
dl.ex-price dd {font-size: 24px;}
.articleBtn {margin: 0 auto 1em;width: 70%;}
}
@media only screen and (max-width: 320px) {
.example-box .article-ttl {font-size: 13px;}
.articleBtn {padding: 5px 0;}
}
/*-----------------------------------------------
 *	詳細
-----------------------------------------------*/
.pic {display: table;float: right;width: 270px;margin: 0 0 25px 25px;height: 272px;border: 1px solid #dcdcdc;box-shadow: 0 0 0 4px #fff inset;background: #eee;box-sizing: border-box;text-align: center;}
.pic a {display: table-cell;position: relative;height: 100%;padding: 10px 20px;vertical-align: middle;}
.pic a:after {position: absolute;bottom: -1px;right: -1px;width: 30px;height: 30px;background: url(../img/icon-glass.png) no-repeat;content: '';}
.price-box{position: relative;background: linear-gradient(-45deg,#fff 25%, #fbc6cc 25%,#fbc6cc 50%, #fff 50%,#fff 75%, #fbc6cc 75%,#d8e0ff);background-size: 8px 8px;padding: 8px;}
.price-inbox {background: #FFF;padding: .5em;text-align: center;}
.price-ttl {color: #f34f61;margin: 0 0 .5em;font-size: 20px;font-weight: bold;display: inline;padding-right: 1em;}
.price-ttl em{color: #f39801;font-size: 40px;font-weight: bold;}
.detail-txt{margin-bottom: 1em;}
.detail-txt p{margin-bottom: 1em;}
.detail-txt strong {font-weight: bold;}
.post_under_nav {color: #fff;background: #009db3;margin: 0 0 15px;}
.post_under_nav ul {display: table;width: 100%;table-layout: fixed;}
.post_under_nav li {display: table-cell;text-align: center;}
.post_under_nav li span, .post_under_nav li a {display: block;padding: 15px;color: #fff;}
.post_under_nav li a:hover {background: rgba(255, 255, 255, 0.3);}
.post_under_nav .nav-left {text-align: left;}
.post_under_nav .nav-center {text-align: center;border-right: 1px solid rgba(255, 255, 255, 0.3);border-left: 1px solid rgba(255, 255, 255, 0.3);}
@media only screen and (max-width: 568px) {
.pic {width: 160px;margin: 0 0 10px 10px;height: initial;}
.pic a {padding: 10px;}
.price-ttl {font-size: 18px;}
.price-ttl em {font-size: 28px;}
}