/* -------------------------------- Primary style -------------------------------- */ *, *::after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *::after, *::before { content: ''; } body { font-size: 14px; font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; color: #333333; background-color: #f0f0f0; } a{color: #0134a9;} a:hover{text-decoration: underline;} /* -------------------------------- margin / padding -------------------------------- */ .mt5{margin-top: 5px !important} .mt10{margin-top: 10px !important} .mt15{margin-top: 15px !important} .mt20{margin-top: 20px !important} .mt30{margin-top: 30px !important} .mt40{margin-top: 40px !important} .mt50{margin-top: 50px !important} .mt60{margin-top: 60px !important} .mt70{margin-top: 70px !important} .mt80{margin-top: 80px !important} .mt90{margin-top: 90px !important} .mt100{margin-top: 100px !important} .mb5{margin-bottom: 5px !important} .mb10{margin-bottom: 10px !important} .mb15{margin-bottom: 15px !important} .mb20{margin-bottom: 20px !important} .mb30{margin-bottom: 30px !important} .mb40{margin-bottom: 40px !important} .mb50{margin-bottom: 50px !important} .mb60{margin-bottom: 60px !important} .mb70{margin-bottom: 70px !important} .mb80{margin-bottom: 80px !important} .mb90{margin-bottom: 90px !important} .mb100{margin-bottom: 100px !important} .ml5{margin-left: 5px !important} .ml10{margin-left: 10px !important} .ml15{margin-left: 15px !important} .ml20{margin-left: 20px !important} .ml30{margin-left: 30px !important} .ml40{margin-left: 40px !important} .ml50{margin-left: 50px !important} .ml60{margin-left: 60px !important} .ml70{margin-left: 70px !important} .ml80{margin-left: 80px !important} .ml90{margin-left: 90px !important} .ml100{margin-left: 100px !important} .mr5{margin-right: 5px !important} .mr10{margin-right: 10px !important} .mr15{margin-right: 15px !important} .mr20{margin-right: 20px !important} .mr30{margin-right: 30px !important} .mr40{margin-right: 40px !important} .mr50{margin-right: 50px !important} .mr60{margin-right: 60px !important} .mr70{margin-right: 70px !important} .mr80{margin-right: 80px !important} .mr90{margin-right: 90px !important} .mr100{margin-right: 100px !important} .pt5{padding-top: 5px !important} .pt10{padding-top: 10px !important} .pt15{padding-top: 15px !important} .pt20{padding-top: 20px !important} .pt30{padding-top: 30px !important} .pt40{padding-top: 40px !important} .pt50{padding-top: 50px !important} .pt60{padding-top: 60px !important} .pt70{padding-top: 70px !important} .pt80{padding-top: 80px !important} .pt90{padding-top: 90px !important} .pt100{padding-top: 100px !important} .pb5{padding-bottom: 5px !important} .pb10{padding-bottom: 10px !important} .pb15{padding-bottom: 15px !important} .pb20{padding-bottom: 20px !important} .pb30{padding-bottom: 30px !important} .pb40{padding-bottom: 40px !important} .pb50{padding-bottom: 50px !important} .pb60{padding-bottom: 60px !important} .pb70{padding-bottom: 70px !important} .pb80{padding-bottom: 80px !important} .pb90{padding-bottom: 90px !important} .pb100{padding-bottom: 100px !important} .pl5{padding-left: 5px !important} .pl10{padding-left: 10px !important} .pl15{padding-left: 15px !important} .pl20{padding-left: 20px !important} .pl30{padding-left: 30px !important} .pl40{padding-left: 40px !important} .pl50{padding-left: 50px !important} .pl60{padding-left: 60px !important} .pl70{padding-left: 70px !important} .pl80{padding-left: 80px !important} .pl90{padding-left: 90px !important} .pl100{padding-left: 100px !important} .pr5{padding-right: 5px !important} .pr10{padding-right: 10px !important} .pr15{padding-right: 15px !important} .pr20{padding-right: 20px !important} .pr30{padding-right: 30px !important} .pr40{padding-right: 40px !important} .pr50{padding-right: 50px !important} .pr60{padding-right: 60px !important} .pr70{padding-right: 70px !important} .pr80{padding-right: 80px !important} .pr90{padding-right: 90px !important} .pr100{padding-right: 100px !important} .pdg5{padding: 5px;} .pdg10{padding: 10px;} .pdg20{padding: 20px;} .mgn5{margin:5px;} .mgn10{margin:10px;} .mgn20{margin:20px;} /* -------------------------------- text -------------------------------- */ /*--size--*/ .txt-10{font-size: 10px; line-height: 1.7;} .txt-12{font-size: 12px; line-height: 1.7;} .txt-13{font-size: 13px; line-height: 1.5;} .txt-14{font-size: 14px; line-height: 1.7;} .txt-16{font-size: 16px; line-height: 1.7;} .txt-18{font-size: 18px; line-height: 1.7;} .txt-20{font-size: 20px; line-height: 1.7;} .txt-22{font-size: 22px; line-height: 1.7;} .txt-24{font-size: 24px; line-height: 1.7;} .txt-26{font-size: 26px; line-height: 1.7;} .txt-28{font-size: 28px; line-height: 1.7;} .txt-30{font-size: 30px; line-height: 1.7;} .txt-32{font-size: 32px; line-height: 1.7;} .txt-34{font-size: 34px; line-height: 1.7;} .txt-36{font-size: 36px; line-height: 1.7;} /*--color--*/ .txt-nomal {font-weight: normal;} .txt-bold {font-weight: bold;} .txt-blue {color: #4ba5c3;} .txt-green {color: #50b442;} .txt-red {color: #f54d4d;} .txt-pink {color: #e96968;} .txt-gray {color: #ccc;} /*--align--*/ .al-center{text-align: center;} .al-right {text-align: right;} /* -------------------------------- background-color -------------------------------- */ .bg-white {width:100%; background-color: #FFFFFF;} .bg-grey {width:100%; background-color: #f4f4f4; padding: 10px;} .bg-black {width:100%; background-color: #000000; color: #FFFFFF;} .bg-green {width:100%; background-color: #90c31f; color: #FFFFFF;} .bg-blue {width:100%; background-color: #25b5d4; color: #FFFFFF;} .bg-purple{width:100%; background-color: #945cbe; color: #FFFFFF;} .bg-red {width:100%; background-color: #f54d4d; color: #FFFFFF;} .bg-pink {width:100%; background-color: #e96968; color: #FFFFFF;} .bg-orange{width:100%; background-color: #eda11c; color: #FFFFFF;} /* -------------------------------- background-shadow -------------------------------- */ .bg-shadow_in {box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.2) inset;} .bg-shadow_out{box-shadow: 0 0px 5px rgba(0, 0, 0, 0.1);} /* -------------------------------- clear -------------------------------- */ .clear{clear: both;} /* -------------------------------- imeage -------------------------------- */ .img-fit img{ width: 100%; height: auto; } .img-fit a{ -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } .img-fit a:hover{ opacity: 0.7; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } /* -------------------------------- button -------------------------------- */ .download-link{ width: 100%; text-align: center; margin-top: 20px; margin-bottom: 40px; } .download-link a{ border:1px solid #e76a6c; background-color: #FFF; color: #e76a6c; padding: 10px 20px 10px 20px; border-radius: 4px; text-decoration: none; } .download-link-gd{ width: 100%; text-align: right; margin-top: 10px; margin-bottom: 10px; } .download-link-gd a{ background-color: #e76a6c; color: #FFF; padding: 10px; border-radius: 4px; text-decoration: none; font-size: 12px; } .download-link-long{ width: 100%; text-align: center; margin-top: 20px; margin-bottom: 40px; } .download-link-long a{ background-color: #e76a6c; color: #FFF; display: block; padding: 10px 0px; border-radius: 4px; text-decoration: none; font-size: 24px; } /* -------------------------------- login -------------------------------- */ #login{ display: flex; justify-content: center; /*左右中央揃え*/ align-items: center; /*上下中央揃え*/ } #login .login-box{ position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto; width: 350px; height: 440px; background-color: #FFFFFF; border-radius: 8px; border:1px solid #ccc; box-shadow: 0 0px 5px rgba(0, 0, 0, 0.2) inset; padding: 20px; } /* -------------------------------- PC CSS -------------------------------- */ @media only screen and (min-width: 960px) { /*--トップページ--*/ #top-wrapper { margin: 50px auto; } #top-contents { width: 850px; margin: 0 auto; } .top-cover { width: 500px; text-align: center; float: left; } .top-cover > img { width: 90%; height: auto; } .top-nav { width: 280px; background: #ffffff; border-radius: 10px; float: right; } .top-nav ul { line-height: 1.7; font-size: 16px; } .top-nav ul li { border-bottom: 1px solid #e4e4e4; padding-left: 20px; padding-top: 10px; padding-bottom: 10px; } .top-nav ul li:last-child { border-bottom: none; } .top-nav ul li a { color: #000; } .top-nav ul li a:hover { color: #71b057; } .guide { width: 280px; float: right; text-align: center; margin-top: 20px; } .guide a{ background-color: #e96968; display: block; padding: 15px 0px; color: #FFFFFF; font-size: 18px; text-decoration: none; border-radius: 10px; } .guide a:hover{ opacity: 0.8; } .top-info { width: 280px; border:1px solid #e4e4e4; background-color: #FFFFFF; border-radius: 10px; float: right; text-align: left; margin-top: 20px; } .top-info ul { line-height: 1.7; font-size: 12px; } .top-info ul li { padding: 10px; border-bottom: 1px solid #e4e4e4; } .top-info ul li:last-child { padding: 10px; border-bottom: none; } .top-info ul li a { color: #000; } .top-info ul li a:hover { color: #71b057; } .top-info-title{ font-size: 18px; color: #71b057; padding-top: 10px; padding-left:10px; } .top-shadow { box-shadow: 0 0 10px rgba(0,0,0,.5); } /*--ヘッダー--*/ header {width: 100%; background-color: #FFFFFF;} #user{ width: 350px; position: absolute; top:15px; right: 0; z-index: 998; } #user ul{ width: 100%; margin: 0 auto 0; text-align: right; } #user li{ display: inline; font-size: 14px; margin-right: 10px; } #user li a{ background-color: #f0f0f0; border-radius: 4px; padding: 7px 10px; text-decoration: none; color: #333333; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } #user li a:hover{ background-color: #e96968; color: #fff; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } #header-pc{ width: 1020px; margin: 0 auto 0; position: relative; } #header-pc .schedule{ position: absolute; top: 20px; left: 260px; } #header-pc .schedule ul{ padding: 0; margin: 0; } #header-pc .schedule li{ display: table-cell; } #header-pc .month{ background-color: #e96968; color: #FFF; padding: 3px 12px 3px 12px; } #header-pc .month-title{ background-color: #7d7d7d; color: #FFF; padding: 3px 15px 3px 15px; } /*--ヘッダーナビ--*/ #nav-content{ width: 100%; } #nav-content ul{ margin: 0; padding: 0; position: absolute; top:2px; left: 150px; z-index: 999; } #nav-content li{ display: table-cell; padding: 14px 15px; font-size: 14px; } #nav-content li a{ text-decoration: none; color: #333333; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } #nav-content li a:hover{ color: #e96968; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } #nav-content .visit{ border-top: 3px solid #e96968; padding-top:14px; } /*--タブレット用ヘッダー非表示--*/ #header-tab{display: none;} /*--スライダー--*/ #slide-wrap{ width: 100%; height: 450px; position: relative; z-index: 998; background-color: #ffffff; } #slide-wrap .slide-box img{ padding: 0px 5px; background-color: #ccc; } .slide-caption{ width: 320px; word-wrap: break-word; margin-top: 10px; padding: 0px 5px; } /*--トップ--*/ #ichioshi-area{ width: 100%; background-color: #FFFFFF; padding-top: 20px; } #ichioshi-area .inner-content{ width: 1020px; margin: 0 auto 20px; position: relative; } #shinsaku-area{ width: 1020px; background-color: #c6e8ea; margin: 40px auto 40px; padding: 20px; position: relative; } #shinsaku-area .link-btn{ color: #FFFFFF; text-decoration: none; font-size: 18px; padding-top: 20px; padding-bottom: 20px; background-color: #434343; text-align: center; display: block; border-radius: 6px; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } #shinsaku-area .link-btn:hover{ opacity: 0.7; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } #search-area{ width: 100%; position: absolute; top: 0px; } #search-area .fusen-btn{ position: absolute; top: 18px; left: 350px; } #search-area .fusen-btn a{ float: left; background:linear-gradient(90deg,#f5a316 0%,#f5a316 10%,#ead52a 10%,#ead52a 100%); //background-color: #ead52a; color: #000; padding: 11px 20px; text-decoration: none; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } #search-area .fusen-btn a:hover{ opacity: 0.7; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } #search-form{ width: 450px; background-color: #eeeeee; height: 40px; border: 1px solid #eeeeee; position: absolute; top:20px; right: 60px; } #search-form input{ vertical-align: top; margin: 0px 13px; height: 100%; box-sizing: border-box; background-color: transparent; } #search-form{ border-radius: 6px; } #search-input{ border: none; width: 350px; //padding-left: 10px; } #search-submit{ width: 30px; border: none; background-image: url(../img/search_btn.png); background-position: center; background-size: auto 90%; background-repeat: no-repeat; } /*--コンテンツ--*/ #content-area{ width: 100%; background-color: #f0f0f0; padding-bottom: 40px; } #content-area h1{ font-size: 24px; margin-bottom: 20px; } #content-area h2{ font-size: 18px; } #content-area h3{ font-size: 24px; border-bottom: 2px solid #ec428e; padding-bottom: 10px; margin-bottom: 20px; } .detail-title p{ font-size: 24px; margin-bottom: 20px; width: 100%; height: 62px; overflow: hidden; } #content-area .inner-content{ width: 1020px; margin: 0 auto 0; padding: 20px; background-color: #FFFFFF; position: relative; } #content-area .alert-content{ width: 1020px; margin: 20px auto 0; } #content-area .inner-content .d-not-rss{ border-radius: 4px; border:1px solid #000; padding: 5px 10px; position: absolute; right: 0px; } #list-menu{ width: 100%; border-bottom: 2px solid #7f7f7f; } #list-menu ul{ display: table; table-layout: fixed; text-align: center; width: 100%; } #list-menu li{ display: inline-block; vertical-align: middle; width: 135px; background-color: #f2f2f2; font-size: 12px; border-left: 2px solid #FFF; border-right: 2px solid #FFF; } #list-menu li a{ color: #333333; text-decoration: none; width:100%; display:block; padding: 10px 0px; font-size: 10px; } #list-menu li a:hover{ opacity: 0.7; } #list-menu .color1{ background-color: #a2db4e; } #list-menu .color2{ background-color: #76e4f2; } #list-menu .color3{ background-color: #fb8cf9; } #list-menu .color4{ background-color: #ffe181; } #list-menu .color5{ background-color: #f15d1c; } #list-menu .color6{ background-color: #ae92ee; } #list-menu .color7{ background-color: #839df4; } #list-area { width: 100%; margin-top: 20px; margin-bottom: 20px; } #list-area ul{ display: table; table-layout: fixed; width: 100%; } #list-area li{ display: table-cell; width: 20%; font-size: 16px; line-height: 1.7; float: left; } #list-area li a{ text-decoration: underline; } #list-area li a:hover{ text-decoration: none; } #pagination { width: 100%; margin-top: 20px; margin-bottom: 20px; position: relative; } #pagination .page-list{ position: absolute; right: 0; top: 4px; } #pagination .page-list li{ display: table-cell; padding-left: 5px; padding-right: 5px; } #pagination .page-list li a{ float: left; border:1px solid #ccc; background-color: #FFF; padding: 5px 10px ; text-decoration: none; } #pagination .page-list li a:hover{ color: #333333; background-color: #f2f2f2; } /*--パンくず--*/ #breadcrumbs{ width: 1020px; margin: 0 auto 0; padding-top: 15px; padding-bottom: 15px; padding-left: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #breadcrumbs ul{ margin: 0; padding: 0; } #breadcrumbs li{ display: table-cell; } #breadcrumbs li a{ color: #000000; text-decoration: none; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } #breadcrumbs li a:hover{ color: #e96968; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } #breadcrumbs i{ padding-right: 7px; padding-right: 7px; color: #7d7d7d; } /*--商品一覧--*/ #product-area { width: 100%; position: relative; color: #333333; } #product-area a{ text-decoration: none; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } #product-area a:hover{ opacity: 0.7; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } #product-area .box-inner{ padding: 7px; } #product-area .bookmark-box{ border: 1px solid #cccccc; width: 100%; height: 410px; margin-bottom: 20px; position: relative; } #product-area .bihin-box-top{ border: 1px solid #cccccc; width: 100%; height: 800px; margin-bottom: 20px; padding: 10px; } #product-area .bihin-box{ border: 1px solid #cccccc; width: 100%; height: 530px; margin-bottom: 20px; position: relative; } #product-area .bihin-img{ position: relative; width: 223px; height: 223px; } #product-area .bihin-img img { width: 100%; height: 100%; object-fit: scale-down; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } #product-area .group0-box{ border: 1px solid #cccccc; width: 100%; height: 410px; margin-bottom: 20px; position: relative; } #product-area .group1-box{ border: 1px solid #a2db4e; width: 100%; height: 410px; margin-bottom: 20px; position: relative; } #product-area .group2-box{ border: 1px solid #76e4f2; width: 100%; height: 410px; margin-bottom: 20px; position: relative; } #product-area .group3-box{ border: 1px solid #fb8cf9; width: 100%; height: 410px; margin-bottom: 20px; position: relative; } #product-area .group4-box{ border: 1px solid #ffe181; width: 100%; height: 410px; margin-bottom: 20px; position: relative; } #product-area .group5-box{ border: 1px solid #f15d1c; width: 100%; height: 410px; margin-bottom: 20px; position: relative; } #product-area .group6-box{ border: 1px solid #ae92ee; width: 100%; height: 410px; margin-bottom: 20px; position: relative; } #product-area .group7-box{ border: 1px solid #839df4; width: 100%; height: 410px; margin-bottom: 20px; position: relative; } #product-area .fusen{ position: absolute; right: 3px; top: -6px; z-index: 777; } #product-area .makername{ margin-bottom: 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #product-area .makerlistno{ background-color: #333; color: #FFF; margin-right: 10px; padding: 2px 5px; } #product-area .saledate{ font-size: 12px; } #product-area .arrivaldate{ font-size: 12px; } #product-area .groupname{ width: 100px; font-size: 10px; position: absolute; bottom: 8px; } #product-area .kikan{ width: 44px; text-align: center; border: 1px solid #000; border-radius: 4px; padding: 1px 0px; font-size: 10px; position: absolute; right: 5px; top:48px; } #product-area .not-rss{ width: 50px; text-align: center; border: 1px solid #000; border-radius: 4px; padding: 1px 0px; font-size: 10px; position: absolute; right: 5px; top:28px; } #product-area .actressname{ height: 20px; font-size: 14px; margin-bottom: 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #product-area .avtitle{ width: 100%; height: 50px; font-size: 16px; margin-bottom: 5px; line-height: 1.5; overflow: hidden; } #product-area .bihintitle{ width: 100%; height: 75px; font-size: 16px; margin-bottom: 5px; line-height: 1.5; overflow: hidden; } #product-area .labelname{ font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #product-area .genrename{ font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #product-area .specnumber{ font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #product-area .release-btn{ width: 100%; text-align: right; margin-top: 10px; } #product-area .release-btn a{ background-color: #f54d4d; padding: 5px 10px; color: #fff; } #product-area .group0-btn{ width: 100%; text-align: right; margin-top: 10px; } #product-area .group0-btn a{ background-color: #cccccc; padding: 5px 10px; color: #000; } #product-area .group1-btn{ width: 100%; text-align: right; margin-top: 10px; } #product-area .group1-btn a{ background-color: #a2db4e; padding: 5px 10px; color: #000; } #product-area .group2-btn{ width: 100%; text-align: right; margin-top: 10px; } #product-area .group2-btn a{ background-color: #76e4f2; padding: 5px 10px; color: #000; } #product-area .group3-btn{ width: 100%; text-align: right; margin-top: 10px; } #product-area .group3-btn a{ background-color: #fb8cf9; padding: 5px 10px; color: #000; } #product-area .group4-btn{ width: 100%; text-align: right; margin-top: 10px; } #product-area .group4-btn a{ background-color: #ffe181; padding: 5px 10px; color: #000; } #product-area .group5-btn{ width: 100%; text-align: right; margin-top: 10px; } #product-area .group5-btn a{ background-color: #f15d1c; padding: 5px 10px; color: #000; } #product-area .group6-btn{ width: 100%; text-align: right; margin-top: 10px; } #product-area .group6-btn a{ background-color: #ae92ee; padding: 5px 10px; color: #000; } #product-area .group7-btn{ width: 100%; text-align: right; margin-top: 10px; } #product-area .group7-btn a{ background-color: #839df4; padding: 5px 10px; color: #000; } /*--商品詳細--*/ #detail-area{ width: 100%; position: relative; } #detail-area table{ width: 100%; padding: 0; margin: 0; } #detail-area tr{ border-bottom: 5px solid #FFF; } #detail-area th{ width: 20%; background-color: #999; color: #FFF; text-align: center; padding: 5px 0px; font-size: 12px; vertical-align: middle; } #detail-area td{ width: 80%; padding: 5px 10px; } #detail-area .bookmark-check a{ background:linear-gradient(90deg,#f5a316 0%,#f5a316 15%,#ead52a 15%,#ead52a 100%); //background-color: #ead52a; color: #000000; text-align: center; text-decoration: none; padding: 10px 0px; display: block; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } #detail-area .bookmark-check a:hover { opacity:0.7; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } #detail-area .bookmark-add a{ background-color: #f166ab; color: #FFFFFF; text-align: center; text-decoration: none; padding: 10px 0px; display: block; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } #detail-area .bookmark-add a:hover { opacity:0.7; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } #detail-area .bookmark-release a{ background-color: #f54d4d; color: #FFFFFF; text-align: center; text-decoration: none; padding: 10px 0px; display: block; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } #detail-area .bookmark-release a:hover { opacity:0.7; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } #detail-area .next-prev a{ //font-size: 18px; background-color: #72ad59; color: #FFFFFF; text-align: center; text-decoration: none; padding: 10px 0px; display: block; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } #detail-area .next-prev a:hover { opacity:0.7; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } #detail-area .link-back a{ //font-size: 18px; background-color: #f0f0f0; color: #333; text-align: center; text-decoration: none; padding: 10px 0px; display: block; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } #detail-area .link-back a:hover { opacity:0.7; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } #detail-area .read-txt{ font-size: 16px; line-height: 1.7; } /*--ページトップ--*/ .pagetop { display: none; position: fixed; bottom: 20px; right: 10px; z-index: 9999; } .pagetop a { display: block; background-color: #7d7d7d; text-align: center; color: #fff; font-size: 24px; text-decoration: none; border-radius: 4px; padding: 5px 18px 8px 18px; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } .pagetop a:hover { opacity:0.5; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } /*--フッター--*/ #footer{ width: 100%; background-color: #535353; font-size: 16px; line-height: 1.7; color: #FFF; padding-top: 30px; padding-bottom: 30px; } #footer img{ width: 100%; height: auto; } #footer .inner-content{ width: 1020px; margin: 0 auto 0; } #footer .copy{ font-size: 14px; padding-top: 10px; padding-bottom: 10px; } /* -------------------------------- form -------------------------------- */ input[type="text"] { width: 100%; height: 40px; background: #FFF; border: 1px solid #FFF; font-size: 1em; border-bottom: 1px solid #ccc; padding-left: 10px; margin-right: 10px; } input[type="text"]:focus { background: #edf4ff; } input[type="password"] { width: 100%; height: 40px; background: #FFF; border: 1px solid #FFF; font-size: 1em; border-bottom: 1px solid #ccc; padding-left: 10px; margin-right: 10px; } input[type="password"]:focus { background: #edf4ff; } select{ width: 20%; padding: 10px; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid #ccc; background: #ffffff; background-size: 20px, 100%; margin-right:10px; margin-bottom: 15px; } textarea { width: 100%; height: 150px; background: #FFF; border: 1px solid #FFF; font-size: 1em; border: 1px solid #ccc; padding: 10px; } textarea:focus { background: #edf4ff; border: 1px solid #FFF; } input[type="submit"]{ width: 80%; padding: 10px 0px; background-color: #72ad59; color: #FFFFFF; border:0px; border-radius: 40px; /* CSS3草案 */ -webkit-border-radius: 40px; /* Safari,Google Chrome用 */ -moz-border-radius: 40px; /* Firefox用 */ } input[type="submit"]:hover{ filter:alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; } input[type="reset"]{ padding: 10px 40px 10px 40px; background-color: #cccccc; color: #FFFFFF; border:0px; border-radius: 40px; /* CSS3草案 */ -webkit-border-radius: 40px; /* Safari,Google Chrome用 */ -moz-border-radius: 40px; /* Firefox用 */ } input[type="reset"]:hover{ filter:alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; } } /* -------------------------------- Tablet CSS -------------------------------- */ @media only screen and (max-width: 959px) { /*--トップページ--*/ #top-wrapper { margin: 50px auto; } #top-contents { width: 750px; margin: 0 auto; } .top-cover { width: 400px; text-align: center; float: left; } .top-cover > img { width: 90%; height: auto; } .top-nav { width: 280px; background: #ffffff; border-radius: 10px; float: right; } .top-nav ul { line-height: 1.7; font-size: 16px; } .top-nav ul li { border-bottom: 1px solid #e4e4e4; padding-left: 20px; padding-top: 10px; padding-bottom: 10px; } .top-nav ul li:last-child { border-bottom: none; } .top-nav ul li a { color: #000; } .top-nav ul li a:hover { color: #71b057; } .guide { width: 280px; float: right; text-align: center; margin-top: 20px; } .guide a{ background-color: #e96968; display: block; padding: 15px 0px; color: #FFFFFF; font-size: 18px; text-decoration: none; border-radius: 10px; } .guide a:hover{ opacity: 0.8; } .top-info { width: 280px; border:1px solid #e4e4e4; background-color: #FFFFFF; border-radius: 10px; float: right; text-align: left; margin-top: 20px; } .top-info ul { line-height: 1.7; font-size: 12px; } .top-info ul li { padding: 10px; border-bottom: 1px solid #e4e4e4; } .top-info ul li:last-child { padding: 10px; border-bottom: none; } .top-info ul li a { color: #000; } .top-info ul li a:hover { color: #71b057; } .top-info-title{ font-size: 18px; color: #71b057; padding-top: 10px; padding-left:10px; } .top-shadow { box-shadow: 0 0 10px rgba(0,0,0,.5); } /*--ヘッダー--*/ header {width: 100%; background-color: #FFFFFF;} #user{ background-color: #f2f2f2; padding-top: 15px; padding-bottom: 15px; } #user ul{ width: 95%; margin: 0 auto 0; text-align: right; } #user li{ display: inline; padding: 15px; } #user li a{ text-decoration: none; color: #333333; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } #user li a:hover{ color: #e96968; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } #header-top{ width: 100%; background-color: #f0f0f0; padding-top: 15px; padding-bottom: 15px; box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.1) inset; } #header-tab{ width: 95%; margin: 0 auto 0; position: relative; } #header-tab .schedule{ position: absolute; top:22px; left: 260px; } #header-tab .schedule ul{ padding: 0; margin: 0; } #header-tab .schedule li{ display: table-cell; } #header-tab .month{ background-color: #e96968; color: #FFF; padding: 3px 12px 3px 12px; } #header-tab .month-title{ background-color: #7d7d7d; color: #FFF; padding: 3px 15px 3px 15px; } /*--ヘッダーナビ--*/ #nav-drawer { position: fixed; right: 0px; top: 0px; z-index: 999; background-color: rgba(255,255,255,0.7); width: 70px; height: 60px; padding-left: 8px; } /*チェックボックス等は非表示に*/ .nav-unshown { display:none; } /*アイコンのスペース*/ #nav-open { display: inline-block; } /*ハンバーガーアイコンをCSSだけで表現*/ #nav-open span, #nav-open span:before, #nav-open span:after { position: absolute; height: 7px;/*線の太さ*/ width: 50px;/*長さ*/ border-radius: 4px; background: #7d7d7d; display: block; content: ''; cursor: pointer; } #nav-open span:before { bottom: -15px; } #nav-open span:after { bottom: -30px; } /*閉じる用の薄黒カバー*/ #nav-close { display: none;/*はじめは隠しておく*/ position: fixed; z-index: 99; top: 0;/*全体に広がるように*/ left: 0; width: 100%; height: 100%; background: black; opacity: 0; transition: .3s ease-in-out; } /*中身*/ #nav-content { overflow: auto; position: fixed; top: 0; left: 0; z-index: 9999;/*最前面に*/ width: 90%;/*右側に隙間を作る*/ max-width: 330px;/*最大幅*/ height: 100%; background: #f0f0f0;/*背景色*/ transition: .3s ease-in-out;/*滑らかに表示*/ -webkit-transform: translateX(-105%); transform: translateX(-105%);/*左に隠しておく*/ } #nav-content li { font-size: 14px; border-top: 1px solid #fff; border-bottom: 1px solid #ccc; padding: 15px; background-color: #FFFFFF; } #nav-content li a { text-decoration: none; font-size: 16px; color: #474747; } #nav-content li:hover { background-color: #fbfbfb; } #nav-content li i{ float: right; padding-top: 5px; color: #ea6a6b; } /*チェックが入ったらもろもろ表示*/ #nav-input:checked ~ #nav-close { display: block;/*カバーを表示*/ opacity: .5; } #nav-input:checked ~ #nav-content { -webkit-transform: translateX(0%); transform: translateX(0%);/*中身を表示*/ box-shadow: 6px 0 25px rgba(0,0,0,.15); } /*--ヘッダーPC用非表示--*/ #header-pc{display: none;} /*--スライダー--*/ #slide-wrap{ width: 100%; height: 430px; position: relative; z-index: 998; background-color: #FFFFFF; } #slide-wrap .slide-box img{ padding-left: 5px; padding-right: 5px; background-color: #ccc; } .slide-caption{ width: 320px; word-wrap: break-word; margin-top: 10px; padding: 0px 5px; } /*--トップ--*/ #ichioshi-area{ width: 100%; background-color: #FFFFFF; padding-top: 20px; } #ichioshi-area .inner-content{ width: 95%; margin: 0 auto 20px; position: relative; } #shinsaku-area{ width: 95%; background-color: #c6e8ea; margin: 40px auto 40px; padding: 20px; position: relative; } #shinsaku-area .link-btn{ color: #FFFFFF; text-decoration: none; font-size: 16px; padding-top: 20px; padding-bottom: 20px; background-color: #434343; text-align: center; display: block; border-radius: 6px; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } #shinsaku-area .link-btn:hover{ opacity: 0.7; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } #search-area{ width: 95%; position: absolute; top: 40px; } #search-area .fusen-btn{ position: absolute; top: 20px; left: 160px; } #search-area .fusen-btn a{ float: left; background:linear-gradient(90deg,#f5a316 0%,#f5a316 10%,#ead52a 10%,#ead52a 100%); //background-color: #ead52a; font-size: 12px; color: #000; padding: 11px 10px; text-decoration: none; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } #search-area .fusen-btn a:hover{ opacity: 0.7; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } #search-form{ width: 450px; background-color: #eeeeee; height: 40px; border: 1px solid #eeeeee; position: absolute; top:20px; right: 5px; } #search-form input{ vertical-align: top; margin: 0px 13px; height: 100%; box-sizing: border-box; background-color: transparent; } #search-form{ border-radius: 6px; } #search-input{ border: none; width: 350px; //padding-left: 10px; } #search-submit{ width: 30px; border: none; background-image: url(../img/search_btn.png); background-position: center; background-size: auto 90%; background-repeat: no-repeat; } /*--コンテンツ--*/ #content-area{ width: 100%; background-color: #f0f0f0; padding-bottom: 10px; } #content-area .inner-content{ width: 98%; margin: 0 auto 0; padding: 10px; background-color: #FFFFFF; } #content-area .inner-content .d-not-rss{ font-size: 12px; border-radius: 4px; border:1px solid #000; padding: 5px 10px; position: absolute; right: 0px; } #content-area .alert-content{ width: 98%; margin: 20px auto 0; } #content-area h1{ font-size: 24px; margin-bottom: 20px; } #content-area h2{ font-size: 18px; } #content-area h3{ font-size: 24px; border-bottom: 2px solid #ec428e; padding-bottom: 10px; margin-bottom: 20px; } .detail-title p{ font-size: 20px; margin-bottom: 20px; width: 100%; height: 52px; overflow: hidden; } #list-menu{ width: 100%; border-bottom: 2px solid #7f7f7f; } #list-menu ul{ display: table; table-layout: fixed; text-align: center; width: 100%; } #list-menu li{ display: inline-block; vertical-align: middle; background-color: #f2f2f2; font-size: 12px; border-left: 5px solid #FFF; border-right: 5px solid #FFF; } #list-menu li a{ color: #333333; text-decoration: none; width:100%; display:block; padding: 10px 3px; } #list-menu li a:hover{ opacity: 0.7; } #list-menu .color1{ background-color: #a2db4e; } #list-menu .color2{ background-color: #76e4f2; } #list-menu .color3{ background-color: #fb8cf9; } #list-menu .color4{ background-color: #ffe181; } #list-menu .color5{ background-color: #f15d1c; } #list-menu .color6{ background-color: #ae92ee; } #list-menu .color7{ background-color: #839df4; } #list-area { width: 100%; margin-top: 20px; margin-bottom: 20px; } #list-area ul{ display: table; table-layout: fixed; width: 100%; } #list-area li{ display: table-cell; width: 20%; font-size: 16px; line-height: 1.7; float: left; } #list-area li a{ text-decoration: underline; } #list-area li a:hover{ text-decoration: none; } #pagination { width: 100%; margin-top: 20px; margin-bottom: 20px; position: relative; } #pagination .page-list{ position: absolute; right: 0; top: 4px; } #pagination .page-list li{ display: table-cell; padding-left: 5px; padding-right: 5px; font-size: 12px; } #pagination .page-list li a{ float: left; border:1px solid #ccc; background-color: #FFF; padding: 5px 10px 5px 10px; text-decoration: none; } #pagination .page-list li a:hover{ color: #333333; background-color: #f2f2f2; } /*--パンくず--*/ #breadcrumbs{ width: 98%; margin: 0 auto 0; padding-top: 15px; padding-bottom: 15px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #breadcrumbs ul{ margin: 0; padding: 0; } #breadcrumbs li{ display: table-cell; } #breadcrumbs li a{ color: #000000; text-decoration: none; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } #breadcrumbs li a:hover{ color: #e96968; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } #breadcrumbs i{ padding-left: 7px; padding-right: 7px; color: #7d7d7d; } /*--商品一覧--*/ #product-area { width: 100%; position: relative; } #product-area a{ text-decoration: none; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } #product-area a:hover{ opacity: 0.7; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } #product-area .box-inner{ padding: 7px; } #product-area .bookmark-box{ border: 1px solid #cccccc; width: 100%; height: 370px; margin-bottom: 20px; position: relative; } #product-area .bihin-box-top{ border: 1px solid #cccccc; width: 100%; height: 800px; margin-bottom: 20px; padding: 10px; } #product-area .bihin-box{ border: 1px solid #cccccc; width: 100%; height: 550px; margin-bottom: 20px; position: relative; } #product-area .bihin-img{ position: relative; width: 100%; height: 180px; } #product-area .bihin-img img { width: 100%; height: 100%; object-fit: scale-down; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } #product-area .group0-box{ border: 1px solid #cccccc; width: 100%; height: 370px; margin-bottom: 20px; position: relative; } #product-area .group1-box{ border: 1px solid #a2db4e; width: 100%; height: 370px; margin-bottom: 20px; position: relative; } #product-area .group2-box{ border: 1px solid #76e4f2; width: 100%; height: 370px; margin-bottom: 20px; position: relative; } #product-area .group3-box{ border: 1px solid #fb8cf9; width: 100%; height: 370px; margin-bottom: 20px; position: relative; } #product-area .group4-box{ border: 1px solid #ffe181; width: 100%; height: 370px; margin-bottom: 20px; position: relative; } #product-area .group5-box{ border: 1px solid #f15d1c; width: 100%; height: 370px; margin-bottom: 20px; position: relative; } #product-area .group6-box{ border: 1px solid #ae92ee; width: 100%; height: 370px; margin-bottom: 20px; position: relative; } #product-area .group7-box{ border: 1px solid #839df4; width: 100%; height: 370px; margin-bottom: 20px; position: relative; } #product-area .fusen{ position: absolute; right: 3px; top: -6px; z-index: 777; } #product-area .makername{ margin-bottom: 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #product-area .makerlistno{ background-color: #333; color: #FFF; margin-right: 10px; padding: 2px 5px; } #product-area .saledate{ font-size: 10px; } #product-area .arrivaldate{ font-size: 10px; margin-bottom: 5px; } #product-area .groupname{ width: 70px; font-size: 10px; line-height: 1; position: absolute; bottom: 8px; } #product-area .kikan{ width: 45px; text-align: center; border: 1px solid #000; border-radius: 4px; padding: 1px 0px; font-size: 10px; float: left; margin-bottom: 5px; } #product-area .not-rss{ width: 45px; text-align: center; border: 1px solid #000; border-radius: 4px; padding: 1px 0px; font-size: 10px; float: left; margin-right: 5px; margin-bottom: 5px; } #product-area .actressname{ height: 20px; font-size: 12px; margin-bottom: 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #product-area .avtitle{ width: 100%; height: 50px; font-size: 16px; margin-bottom: 5px; line-height: 1.5; overflow: hidden; } #product-area .labelname{ font-size: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #product-area .genrename{ font-size: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #product-area .specnumber{ font-size: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #product-area .release-btn{ width: 100%; text-align: right; margin-top: 10px; } #product-area .release-btn a{ background-color: #f54d4d; padding: 5px 10px; color: #fff; font-size: 10px; } #product-area .group0-btn{ width: 100%; text-align: right; margin-top: 10px; } #product-area .group0-btn a{ background-color: #cccccc; padding: 5px 10px; color: #000; font-size: 12px; } #product-area .group1-btn{ width: 100%; text-align: right; margin-top: 10px; } #product-area .group1-btn a{ background-color: #a2db4e; padding: 5px 10px; color: #000; font-size: 10px; } #product-area .group2-btn{ width: 100%; text-align: right; margin-top: 10px; } #product-area .group2-btn a{ background-color: #76e4f2; padding: 5px 10px; color: #000; font-size: 10px; } #product-area .group3-btn{ width: 100%; text-align: right; margin-top: 10px; } #product-area .group3-btn a{ background-color: #fb8cf9; padding: 5px 10px; color: #000; font-size: 10px; } #product-area .group4-btn{ width: 100%; text-align: right; margin-top: 10px; } #product-area .group4-btn a{ background-color: #ffe181; padding: 5px 10px; color: #000; font-size: 10px; } #product-area .group5-btn{ width: 100%; text-align: right; margin-top: 10px; } #product-area .group5-btn a{ background-color: #f15d1c; padding: 5px 10px; color: #000; font-size: 10px; } #product-area .group6-btn{ width: 100%; text-align: right; margin-top: 10px; } #product-area .group6-btn a{ background-color: #ae92ee; padding: 5px 10px; color: #000; font-size: 10px; } #product-area .group7-btn{ width: 100%; text-align: right; margin-top: 10px; } #product-area .group7-btn a{ background-color: #839df4; padding: 5px 10px; color: #000; font-size: 10px; } /*--商品詳細--*/ #detail-area{ width: 100%; position: relative; } #detail-area table{ width: 100%; padding: 0; margin: 0; font-size: 12px; } #detail-area tr{ border-bottom: 3px solid #FFF; } #detail-area th{ width: 25%; background-color: #999; color: #FFF; text-align: center; padding: 5px 0px; //font-size: 10px; vertical-align: middle; } #detail-area td{ width: 75%; padding: 5px 10px; } #detail-area .bookmark-check a{ font-size: 10px; background:linear-gradient(90deg,#f5a316 0%,#f5a316 20%,#ead52a 20%,#ead52a 100%); //background-color: #ead52a; color: #000000; text-align: center; text-decoration: none; padding: 10px 0px; display: block; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } #detail-area .bookmark-check a:hover { opacity:0.7; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } #detail-area .bookmark-add a{ font-size: 10px; background-color: #f166ab; color: #FFFFFF; text-align: center; text-decoration: none; padding: 10px 0px; display: block; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } #detail-area .bookmark-add a:hover { opacity:0.7; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } #detail-area .bookmark-release a{ background-color: #f54d4d; color: #FFFFFF; text-align: center; text-decoration: none; padding: 10px 0px; display: block; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } #detail-area .bookmark-release a:hover { opacity:0.7; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } #detail-area .next-prev a{ font-size: 12px; background-color: #72ad59; color: #FFFFFF; text-align: center; text-decoration: none; padding: 10px 0px; display: block; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } #detail-area .next-prev a:hover { opacity:0.7; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } #detail-area .link-back a{ font-size: 12px; background-color: #f0f0f0; color: #333; text-align: center; text-decoration: none; padding: 10px 0px; display: block; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } #detail-area .link-back a:hover { opacity:0.7; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } #detail-area .read-txt{ font-size: 14px; line-height: 1.7; } /*--ページトップ--*/ .pagetop { display: none; position: fixed; bottom: 10px; right: 10px; z-index: 9999; } .pagetop a { display: block; background-color: #7d7d7d; text-align: center; color: #fff; font-size: 24px; text-decoration: none; border-radius: 4px; padding: 5px 18px 8px 18px; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } .pagetop a:hover { opacity:0.5; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } /*--フッター--*/ #footer{ width: 100%; background-color: #535353; font-size: 14px; line-height: 2; color: #FFF; padding-top: 20px; padding-bottom: 20px; } #footer img{ width: 100%; height: auto; } #footer .link-btn a:hover{ opacity: 0.7; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -ms-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; } #footer .inner-content{ width: 95%; margin: 0 auto 0; } #footer .copy{ font-size: 12px; padding-top: 10px; padding-bottom: 10px; } /* -------------------------------- form -------------------------------- */ input[type="text"] { width: 100%; height: 40px; background: #FFF; padding-left: 10px; margin-right: 10px; } input[type="text"]:focus { background: #edf4ff; } input[type="password"] { width: 100%; height: 40px; background: #FFF; padding-left: 10px; margin-right: 10px; } input[type="password"]:focus { background: #edf4ff; } select{ width: 20%; padding: 10px; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid #ccc; background: #ffffff; background-size: 20px, 100%; margin-right:10px; margin-bottom: 15px; } textarea { width: 100%; height: 150px; background: #FFF; border: 1px solid #FFF; font-size: 1em; border: 1px solid #ccc; padding: 10px; } textarea:focus { background: #edf4ff; border: 1px solid #FFF; } input[type="submit"]{ width: 80%; padding: 10px 0px; background-color: #72ad59; color: #FFFFFF; border:0px; border-radius: 40px; /* CSS3草案 */ -webkit-border-radius: 40px; /* Safari,Google Chrome用 */ -moz-border-radius: 40px; /* Firefox用 */ } input[type="submit"]:hover{ filter:alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; } input[type="reset"]{ padding: 10px 40px 10px 40px; background-color: #cccccc; color: #FFFFFF; border:0px; border-radius: 40px; /* CSS3草案 */ -webkit-border-radius: 40px; /* Safari,Google Chrome用 */ -moz-border-radius: 40px; /* Firefox用 */ } input[type="reset"]:hover{ filter:alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; } }