html {
min-width: 1180px;
font-size: 62.5%;
}
body:after {
position: fixed;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
background: linear-gradient(#ffffff, 20%, #fdf9fa);
content: "";
}
.wrapper {
min-height: calc(100vh - 90px);
display: flex;
flex-direction: column;
}
.container {
display: flex;
flex-flow: column;
flex: 1;
}
h1 {
font-size: 1.5rem;
font-family: Arial, Helvetica, sans-serif;
}
h5 {
font-weight: normal;
font-size: 1.4rem;
font-family: Arial, Helvetica, sans-serif;
}
form {
margin: 0;
}
.sub {
margin-right: 1rem;
margin-left: auto;
color: #333333;
font-weight: bold;
font-size: 1.6rem;
font-family: Arial, Helvetica, sans-serif;
}
.sub a {
text-decoration: none;
}
.sub a:hover{
opacity: .8;
}
input:focus {
outline: none;
}
input:-webkit-autofill {
box-shadow: 0 0 0 1000px #ffffff inset;
-webkit-text-fill-color: #4501ff;
}
.form {
box-shadow: 0 3px 5px rgba(0, 0, 0, .1);
background-color: #89294f;
}
.form form {
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
padding: .8rem;
}
.result-tabs {
display: flex;
width: 96%;
margin: auto;
margin-top: 1.6rem;
justify-content: space-between;
border-bottom: 1px solid #bbbbbb;
}
.result-tabs div{
display: block;
width: 100%;
padding: 15px 20px;
border: 1px solid #bbbbbb;
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
background-color: #dbdbdb;
}
.result-tabs div.active {
margin-bottom: -1px;
border-top: 1px solid #bbbbbb;
border-right: 1px solid #bbbbbb;
border-left: 1px solid #bbbbbb;
border-bottom: none;
color: #1a1a1a;
font-weight: bold;
}
.result-tabs .active{
opacity: initial;
pointer-events: none;
}
.active.color-app {
background: linear-gradient(to bottom, #e4c6e0c3,white 60%, rgb(251, 251, 251) 100%);
}
.active.color-ur {
background: linear-gradient(to bottom, #9ea3cfc3,white 60%, rgb(251, 251, 251) 100%);
}
.active.color-ss {
background: linear-gradient(to bottom, #bfda5ed8,white 60%, rgb(251, 251, 251) 100%);
}
@media (any-hover: hover) {
.result-tabs div:hover {
opacity: 70%;
isolation: isolate;
cursor: pointer;
border: 1px solid #b5b4b4;
}
}
.result-container {
display: none;
margin: auto;
margin-bottom: 2rem;
width: 96%;
border-left: 1px solid #bbbbbb;
border-right: 1px solid #bbbbbb;
border-bottom: 1px solid #bbbbbb;
}
.result-container.show{
display: block;
border-left: 1px solid #bbbbbb;
}
.c1 {
width: 27em;
margin-right: .5rem;
}
.c2 {
width: 15em;
margin-right: .5rem;
}
.c3 {
width: 15.5em;
}
.c4,
.c5 {
width: 10em;
margin-left: 1em;
}
.form .kword {
display: flex;
position: relative;
height: 3.2rem;
margin: 0;
border: solid 1px black;
background-color: #ffffff;
}
.form input, .form button {
color: #4501ff;
}
.form input[type="text"] {
width: 89%;
padding: 0;
padding-left: .6rem;
border: none;
border-radius: 0;
background: none;
line-height: 2.6rem;
-webkit-appearance: none;
}
button[id="ksubmit"] {
position: absolute;
top: 1px;
right: 1px;
width: 10%;
min-width: 2em;
height: 2em;
border: none;
background: url(../../img/searchicon.png) no-repeat center/auto 80%;
background-color: #be96aa;
color: #ffffff;
font-weight: bold;
font-size: 1.4rem;
cursor: pointer;
}
input::placeholder {
opacity: 1;
color: #4b4b4b;
font-size: 1.4rem;
}
button[id="fsubmit"],
button[id="fclear"] {
width: 90%;
min-width: 5em;
height: 2.5em;
border: none;
font-weight: bold;
font-size: 1.4rem;
cursor: pointer;
}
button[id="fsubmit"] {
border: solid 1px #be96aa;
background-color: #be96aa;
color: #ffffff;
}
button[id="fclear"] {
border: solid 1px #be96aa;
background-color: #ffffff;
color: #be96aa;
}
.form .bclear{
position: absolute;
right: 3rem;
bottom: 1.6rem;
border: solid 1px #be96aa;
background-color: #ffffff;
color: #be96aa;
width: 15%;
height: 2.4em;
font-weight: bold;
font-size: 1.4rem;
cursor: pointer;
}
.btn-open:hover,.kword:hover {
background-color: #efefef;
}
button[id="ksubmit"]:hover {
border: solid 1px rgba(190, 150, 170, .811);
background-color: rgba(190, 150, 170, .811);
}
button[id="fsubmit"]:hover {
border: solid 1px rgba(190, 150, 170, .811);
background-color: rgba(190, 150, 170, .811);
}
button[id="fclear"]:hover, .bclear:hover {
border: solid 1px rgba(190, 150, 170, .811);
color: rgba(190, 150, 170, .811);
}
.compd {
margin: 0;
padding: 0;
}
.btn-open {
position: relative;
width: 100%;
height: 3.2rem;
overflow: hidden;
border: none;
background-color: #ffffff;
line-height: 2.6rem;
text-align: left;
white-space: nowrap;
cursor: pointer;
}
.none {
color: #4b4b4b !important;
font-size: 1.4rem;
}
.btn-open:hover {
color: #4b4b4b;
}
.btn-open::after {
display: block;
position: absolute;
top: 43%;
right: 5px;
transform: rotate(45deg);
width: 7px;
height: 7px;
margin-top: -3px;
margin-right: 2px;
border-right: solid 2px;
border-bottom: solid 2px;
color: #333333;
content: "";
}
.is-open+.select-body,
.is-open+.compd-body {
display: flex;
}
.column {
position: relative;
}
#sinput {
display: none;
}
.select-body {
display: none;
flex-wrap: wrap;
align-items: flex-start;
position: absolute;
left: calc(100% - 255%);
z-index: 1;
width: calc(100% * 3);
min-width: 801px;
padding: 1.2rem;
overflow: hidden;
border: 1px solid #333333;
box-shadow: 0 2px 6px 2px rgba(60, 64, 67, .149), 0 1px 2px 0 rgba(60, 64, 67, .302);
background: #ffffff;
text-align: left;
white-space: nowrap;
}
.column .att {
transform: translateY(-112%);
}
.compd .att {
transform: translateY(-112%);
}
.select-d {
flex: 1;
}
.select-ul {
margin: 0;
padding: 0;
}
.select-item {
list-style: none;
padding: .2em;
margin: .3em;
color: #444444;
font-size: 1.2rem;
font-family: Arial, Helvetica, sans-serif;
vertical-align: text-bottom;
cursor: pointer;
}
.select-item label {
padding: .5em;
vertical-align: .2rem;
}
.selected {
background-color: #efefef;
}
.select-item::before {
margin-right: .4rem;
margin-left: .2rem;
}
.btn-open {
padding: 0;
padding-left: .6rem;
border: 1px solid black;
}
.compd-div {
position: relative;
}
.compd-body {
display: none;
flex-wrap: wrap;
align-items: flex-start;
position: absolute;
left: calc(100% - 175%);
z-index: 1;
width: calc(100% * 3.4);
min-width: 586px;
padding: 5%;
overflow: hidden;
border: 1px solid #333333;
box-shadow: 0 2px 6px 2px rgba(60, 64, 67, .149), 0 1px 2px 0 rgba(60, 64, 67, .302);
background: #ffffff;
text-align: left;
white-space: nowrap;
}
.compd-d1,
.compd-d2 {
flex: 1;
}
.compd-ul {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
}
.compd-item {
display: block;
width: calc(25% - .4rem);
margin: .2rem;
overflow: hidden;
color: #444444;
font-size: 1.2rem;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
cursor: pointer;
}
input[type="checkbox"] {
display: inline-block;
position: relative;
top: 7px;
left: 5px;
width: 1.4rem;
height: 1.4rem;
margin: .4rem;
border: 2px solid #aaaaaa;
border-radius: 10%;
color: #ffffff;
vertical-align: .3rem;
outline: none;
cursor: pointer;
transition: all .1s ease-out 0s;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
pointer-events: none;
}
input[type=checkbox]:checked {
border: 2px solid #be96aa;
background-color: #be96aa;
}
input[type=checkbox]:before,
input[type=checkbox]:after {
position: absolute;
background: #ffffff;
content: "";
transition: all .1s ease-in-out;
}
input[type="checkbox"]:before {
top: 6px;
left: 2px;
transform: rotate(45deg);
width: 0;
height: 2px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
input[type=checkbox]:after {
right: 9px;
bottom: 3px;
transform: rotate(40deg);
width: 2px;
height: 0;
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-ms-transform: rotate(40deg);
-o-transform: rotate(40deg);
}
input[type=checkbox]:checked:before {
top: 5px;
left: 0;
width: 6px;
height: 2px;
}
input[type=checkbox]:checked:after {
right: 2px;
bottom: 1px;
width: 2px;
height: 8px;
}
.compd-ul li label {
display: inline-block;
position: relative;
width: auto;
padding: .5em 1em;
vertical-align: .2rem;
cursor: pointer;
pointer-events: none;
}
.compd-item:hover,
.checked,
.select-item:hover {
background-color: #efefef;
}
table {
align-items: center;
width: 100%;
margin: 0 auto;
text-align: left;
}
th {
width: 7rem;
min-width: 5rem;
overflow: hidden;
font-weight: normal;
white-space: nowrap;
}
.result {
max-width: 1400px;
margin: 0 auto 3rem;
}
.result-header {
display: flex;
justify-content: center;
align-items: center;
margin: 1.5rem auto;
font-family: Arial, Helvetica, sans-serif;
}
.result-header p {
margin-right: 3rem;
}
.user-report-r {
background-color: #c8f7ef;
}
.op-a:hover {
color: #777df8;
}
.site-search-r {
background-color: #ceef6b;
}
.border {
width: 94%;
margin: 0 auto;
border-bottom: solid 1px #cccccc;
}
section * p {
margin: 0;
}
.mh {
margin: 0 2.5em 1.5em;
padding: 2rem;
box-shadow: 0 0 20px rgba(0, 0, 0, .15);
background-color: #ffffff;
}
.mh:hover {
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
}
.mh h1 {
padding-bottom: .5rem;
padding-left: 1rem;
text-align: left;
}
.m {
display: flex;
position: relative;
}
.r1 {
width: 24em;
height: 100%;
margin: 0 1rem 1rem;
background-color: #dadada;
text-align: left;
}
.r1:hover {
opacity: .8;
}
.r1:hover img {
transform: scale(.996);
}
.r1-1 a {
text-decoration: none;
}
.r1 img {
display: block;
width: 22rem;
height: auto;
margin: auto;
padding: 1rem 3rem;
object-fit: cover;
}
.r2 {
width: 100%;
text-align: left;
}
.r2 a {
text-decoration: none;
}
.r2 a.rec-product {
color: #9f2085;
font-weight: bold;
}
.r2 a:hover {
opacity: 0.9;
color: #d80291;
}
.r2 a.rec-product:hover {
color: #d80291;
}
.r2-1 {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
margin: 0;
}
.r2-1 * tr {
white-space: normal;
vertical-align: top;
}
.r2-1 .hd {
display: none;
}
.r2-1 .hdb {
display: none;
}
.r2-1-1e {
width: calc(50% - .5rem);
margin-right: .5rem;
background-color: rgba(190, 150, 170, .811);
}
.r2-1-1j {
width: 50%;
background-color: rgba(164, 154, 186, .611);
}
.r2-1-2e,
.r2-1-2j {
width: calc(50% - .6rem);
margin-top: .5rem;
margin-left: .6rem;
margin-right: 0;
vertical-align: top;
}
.r2-1 h4 {
padding: .5rem .5rem .2rem;
}
.r2-2 {
display: flex;
margin: .5rem 0;
padding: .5rem 0;
border-top: solid 1px #cccccc;
}
.r2-2-1 {
min-width: 4em;
margin-right: 2em;
margin-left: .6rem;
white-space: nowrap;
}
.r2-2-2 {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.r2-2i {
width: 33.3%;
white-space: nowrap;
}
.r2-3 {
display: flex;
margin: .5rem 0;
padding: .5rem 0;
}
.r2-3-1 {
min-width: 4em;
margin-right: 2em;
margin-left: .6rem;
white-space: nowrap;
}
.mr {
margin-right: 1rem;
color: #be96aa;
text-align: right;
}
.r-button {
display: inline-block;
padding: 1rem 1rem .5rem;
border-bottom: solid 2px #be96aa;
font-weight: bold;
font-size: 1.3rem;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
.r-button:hover {
color: #89294f;
}
.mt-md-3 {
margin: 2rem auto;
font-family: Arial, Helvetica, sans-serif;
}
.index {
width: 100%;
background-image: url(../../img/backtop.png);
background-size: auto;
background-repeat: repeat-x;
}
.top {
padding: 8rem 0;
font-weight: bold;
font-family: Garamond, "Times New Roman", "メイリオ", "Meiryo", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}
.title {
width: 50%;
margin: 0 auto;
}
.t1 {
padding: 1rem 0;
border-bottom: solid 3px #000000;
font-size: 3rem;
}
.t2 {
padding: 1rem 0;
font-size: 1.8rem;
}
.desc {
width: 50%;
margin: 0 auto;
padding: 1rem 0;
font-weight: normal;
line-height: 200%;
text-align: left;
}
.d1 {
padding: 1rem 0;
}
.o1 {
padding-top: 2rem;
font-size: 1.8rem;
}
/* user reports */
.ur2-1-1e {
width: calc(50% - .5rem);
margin-right: .5rem;
background-color: #b5bedd;
}
.ur2-1-1j {
width: 50%;
background-color: #d1e1ef;
}
.umr {
color: #67739a;
}
.ur-button {
border-bottom: solid 2px #67739a;
}
.ur-button:hover {
color: #8b94b1;
}
/* site search */
.s1 {
text-align: left;
width: 100%;
}
.s1title {
padding: .5rem .5rem .2rem;
background-color: #ceef6b;
width: fit-content;
min-width: 50%;
}
.s1path {
padding: .5rem .5rem 0rem;
color: #8c98ad;
font-size: 1.2rem;
}
.s1path a {
text-decoration: none;
}
.s1path a:hover {
color: #abdedc;
}
.s1body {
width: 80%;
padding: .5rem 1.2rem .2rem;
font-size: 1.2rem;
line-height: 2.2rem;
}
.smr {
position: absolute;
right: 0;
bottom: 1rem;
color: #86ad0e;
}
.sr-button {
border-bottom: solid 2px #86ad0e;
}
.sr-button:hover {
color: #ceef6b;
}
.highlight {
color: #ee7800;
font-weight: bold;
}
.afterClear {
display: none;
width: 50%;
margin: 5rem auto 0;
padding: 3rem;
font-size: large;
text-align: start;
background-color: #f5f5f5;
border: 1px solid #8a6e82;
border-radius: 5px;
}