#app .wrapper {
    /* min-height: calc(100vh - 90px); */
    display: flex;
    flex-direction: column;
}

#app .container {
    display: flex;
    flex-flow: column;
    flex: 1;
}

#app h1 {
    font-size: 1.5rem;
    /*font-family: Arial, Helvetica, sans-serif;*/
}

#app h5 {
    font-weight: normal;
    font-size: 1.4rem;
    /*font-family: Arial, Helvetica, sans-serif;*/
}

#app form {
    margin: 0;
}

#app .sub {
    margin-right: 1rem;
    margin-left: auto;
    color: #333333;
    font-weight: bold;
    font-size: 1.6rem;
    /*font-family: Arial, Helvetica, sans-serif;*/
}

#app .sub a {
    text-decoration: none;
}

#app .sub a:hover{
    opacity: .8;
}

#app input:focus {
    outline: none;
}

#app input:-webkit-autofill {
    box-shadow: 0 0 0 1000px #ffffff inset;
    -webkit-text-fill-color: #4501ff;
}

#app .form {
    /*box-shadow: 0 3px 5px rgba(0, 0, 0, .1);
     background-color: #89294f; 
	 background-color:var(--point-color); */
	background-color:#edf1f4;
}

#app .form form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    /* padding: .8rem; */
	padding: 20px;
	box-sizing:border-box;
	gap:10px;
}

#app .result-tabs {
    display: flex;
    width: 96%;
    margin: auto;
    margin-top: 1.6rem;
    justify-content: space-between;
    border-bottom: 1px solid #bbbbbb;
}

#app .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;
}

#app .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;
}

#app .result-tabs .active{
    opacity: initial;
    pointer-events: none;
}

#app .active.color-app {
    background: linear-gradient(to bottom, #e4c6e0c3,white 60%, rgb(251, 251, 251) 100%);
}

#app .active.color-ur {
    background: linear-gradient(to bottom, #9ea3cfc3,white 60%, rgb(251, 251, 251) 100%);
}

#app .active.color-ss {
    background: linear-gradient(to bottom, #bfda5ed8,white 60%, rgb(251, 251, 251) 100%);
}

@media (any-hover: hover) {
    #app .result-tabs div:hover {
        opacity: 70%;
        isolation: isolate;
        cursor: pointer;
        border: 1px solid #b5b4b4;
    }
}

#app .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;
}

#app .result-container.show{
    display: block;
    border-left: 1px solid #bbbbbb;
}

#app .c1 {
    /* width: 27em;
    margin-right: .5rem; */
	
	width:30%;
}

#app .c2 {
    /*width: 15em;
     margin-right: .5rem; */
	 width:20%;
}

#app .c3 {
    /* width: 15.5em; */
	width:20%;
}

#app .c4,
#app .c5 {
    /* width: 10em;
    margin-left: 1em; */
	
}

#app .form .kword {
    display: flex;
    position: relative;
    /* height: 3.2rem; */
    margin: 0;
    /* border: solid 1px black; */
    background-color: #ffffff;

	border:1px solid var(--gray02);
	/*border-radius:5px;*/
	overflow:hidden;
	
}

/* #app .form input, .form button {
    color: #4501ff;
} */

#app .form input[type="text"] {
    /* width: 89%; */
	width:100%;
    /* padding: 0; */
	padding:10px;
    /* padding-left: .6rem; */
    border: none;
    border-radius: 0;
    background: none;
   /*  line-height: 2.6rem; */
    -webkit-appearance: none;
	font-size:1rem;
}

#app 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: url(../../img/searchicon.png) no-repeat center/auto 50%;
    /* background-color: #be96aa; */
	background-color:var(--black03);
    color: #ffffff;
    font-weight: bold;
    /* font-size: 1.4rem; */
    cursor: pointer;
	
	height:100%;
	top:0;
	right:0;
}

#app input::placeholder {
    opacity: 1;
    color: #4b4b4b;
    /* font-size: 1.4rem; */
}

#app button[id="fsubmit"],
#app button[id="fclear"] {
    /* width: 90%;
    min-width: 5em;
    height: 2.5em; */
    border: none;
    /* font-weight: bold; */
    /* font-size: 1.4rem; */
    cursor: pointer;
	font-size:1rem;
	padding:10px 20px;

	/*border-radius:5px;*/
}

#app button[id="fsubmit"] {
    /* border: solid 1px #be96aa;
    background-color: #be96aa; */
    color: #ffffff;

	border:1px solid var(--black03);
	background-color:var(--black03);
}

#app button[id="fclear"] {
    /* border: solid 1px #be96aa;
    background-color: #ffffff;
    color: #be96aa; */
	border:1px solid var(--black03);
	color:var(--black03);
	background-color:var(--white);
}

#app .form .bclear{
    /*position: absolute;
    right: 3rem;
    bottom: 1.6rem; 
    border: solid 1px #edf1f4;
    background-color: #ffffff;*/

	outline:0;
	border:0;

    color: var(--black03);
    /* width: 15%; */
    height: 2.4em;
    font-weight: bold;
    /* font-size: 1.4rem; */
    cursor: pointer;
	font-size:1rem;
	margin-top:20px;

	width:100%;
	background-color:#edf1f4;
}

#app .btn-open:hover,.kword:hover {
    background-color: #efefef;
}

#app button[id="ksubmit"]:hover {
    /* border: solid 1px rgba(190, 150, 170, .811);
    background-color: rgba(190, 150, 170, .811); */
	opacity:0.8;
}

#app button[id="fsubmit"]:hover {
    /* border: solid 1px rgba(190, 150, 170, .811);
    background-color: rgba(190, 150, 170, .811); */
	opacity:0.8;
}

#app button[id="fclear"]:hover, .bclear:hover {
    /* border: solid 1px rgba(190, 150, 170, .811);
    color: rgba(190, 150, 170, .811); */
	opacity:0.8;
}

#app .compd {
    margin: 0;
    padding: 0;
}

#app .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;
	
}


#app .none {
    color: #4b4b4b !important;
    /* font-size: 1.4rem; */
	font-size:1rem;
}

/* #app .btn-open:hover {
    color: #4b4b4b;
} */

#app .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: "";
}

#app .is-open+.select-body,
#app .is-open+.compd-body {
    display: flex;
	gap:10px;
}

#app .column {
    position: relative;
}

#app #sinput {
    display: none;
}

#app .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;
}

#app .column .att {
    transform: translateY(-112%);
}

#app .compd .att {
    transform: translateY(-112%);
}

#app .select-d {
    flex: 1;
}

#app .select-ul {
    margin: 0;
    padding: 0;
	display:flex;
	flex-direction:column;
	gap:10px;
}

#app .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;

	align-items: center;
    display: flex;
    gap: 10px;
    font-size: 1rem;
}

#app .select-item label {
    /* padding: .5em;
    vertical-align: .2rem; */
}

#app .selected {
    background-color: #efefef;
}

#app .select-item::before {
    margin-right: .4rem;
    margin-left: .2rem;
}

#app .btn-open {
	padding:10px;
    /* padding: 0;
    padding-left: .6rem; 
    border: 1px solid black;*/
	font-size:1rem;

	border:1px solid var(--gray02);
	/*border-radius:5px;*/
}

#app .compd-div {
    position: relative;
}

#app .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;
}

#app .compd-d1,
#app .compd-d2 {
    flex: 1;
}

#app .compd-ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;

	gap:10px;
}

#app .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;

	display:flex;
	width:calc((100% - 30px) / 4);
	font-size:1rem;
	gap:10px;
	align-items:center;
}

#app input[type="checkbox"] {
    display: inline-block;
    position: relative;
    /* top: 7px;
    left: 5px;
    width: 1.4rem;
    height: 1.4rem; */
	width:15px;
	height:15px;
    /* 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;
}

#app input[type=checkbox]:checked {
    /* border: 2px solid #be96aa;
    background-color: #be96aa; */
	border: 2px solid var(--gray02);
    background-color: var(--gray02);
}

#app input[type=checkbox]:before,
#app input[type=checkbox]:after {
    position: absolute;
    background: #ffffff;
    content: "";
    transition: all .1s ease-in-out;
}

#app 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);
}

#app 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);
}

#app input[type=checkbox]:checked:before {
    top: 5px;
    left: 0;
    width: 6px;
    height: 2px;
}

#app input[type=checkbox]:checked:after {
    right: 2px;
    bottom: 1px;
    width: 2px;
    height: 8px;
}

#app .compd-ul li label {
    display: inline-block;
    position: relative;
    width: auto;
    /* padding: .5em 1em;
    vertical-align: .2rem; */
    cursor: pointer;
    pointer-events: none;
}

/* #app .compd-item:hover,
#app .checked,
#app .select-item:hover {
    background-color: #efefef;
} */

#app table {
    align-items: center;
    width: 100%;
    margin: 0 auto;
    text-align: left;
}

#app th {
    width: 7rem;
    min-width: 5rem;
    overflow: hidden;
    font-weight: normal;
    white-space: nowrap;
}

#app .result {
    /* max-width: 1400px; */
	max-width:100%;
    margin: 0 auto 3rem;
}

#app .result-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1.5rem auto;
    f/* ont-family: Arial, Helvetica, sans-serif; */
}

#app .result-header p {
    margin-right: 3rem;
}


#app .user-report-r {
    background-color: #c8f7ef;
}

#app .op-a:hover {
    color: #777df8;
}

#app .site-search-r {
    background-color: #ceef6b;
}

#app .border {
    width: 94%;
    margin: 0 auto;
    border-bottom: solid 1px #cccccc;
}

#app section * p {
    margin: 0;
}

#app .mh {
    margin: 0 2.5em 1.5em;
    padding: 2rem;
    box-shadow: 0 0 20px rgba(0, 0, 0, .15);
    background-color: #ffffff;
}

#app .mh:hover {
    box-shadow: 0 0 20px rgba(0, 0, 0, .2);
}

#app .mh h1 {
    padding-bottom: .5rem;
    /* padding-left: 1rem; */
    text-align: left;
	font-size:1.125rem;
}

#app .m {
    display: flex;
    position: relative;
}

#app .r1 {
    width: 24em;
    height: 100%;
    margin: 0 1rem 1rem;
    background-color: #dadada;
    text-align: left;
}

#app .r1:hover {
    opacity: .8;
}

#app .r1:hover img {
    transform: scale(.996);
}

#app .r1-1 a {
    text-decoration: none;
}

#app .r1 img {
    display: block;
    width: 22rem;
    height: auto;
    margin: auto;
    padding: 1rem 3rem;

    object-fit: cover;
}

#app .r2 {
    width: 100%;
    text-align: left;
}

#app .r2-1 {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin: 0;
}

#app .r2-1 * tr {
    white-space: normal;
    vertical-align: top;
}

#app .r2-1 .hd {
    display: none;

}
#app .r2-1 .hdb {
    display: none;
}

#app .r2-1-1e {
    width: calc(50% - .5rem);
    margin-right: .5rem;
    background-color: rgba(190, 150, 170, .811);
}

#app .r2-1-1j {
    width: 50%;
    background-color: rgba(164, 154, 186, .611);
}

#app .r2-1-2e,
#app .r2-1-2j {
    width: calc(50% - .6rem);
    margin-top: .5rem;
    margin-left: .6rem;
    margin-right: 0;
    vertical-align: top;
}

#app .r2-1 h4 {
    padding: .5rem .5rem .2rem;
}

#app .r2-2 {
    display: flex;
    margin: .5rem 0;
    padding: .5rem 0;
    border-top: solid 1px #cccccc;
}

#app .r2-2-1 {
   /*  min-width: 4em; */
    margin-right: 2em;
    margin-left: .6rem;
    white-space: nowrap;
}

#app .r2-2-2 {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

#app .r2-2i {
    width: 33.3%;
    white-space: nowrap;
}

#app .r2-3 {
    display: flex;
    margin: .5rem 0;
    padding: .5rem 0;
}

#app .r2-3-1 {
    /* min-width: 4em; */
    margin-right: 2em;
    margin-left: .6rem;
    white-space: nowrap;
}

#app .mr {
    margin-right: 1rem;
    color: #be96aa;
    text-align: right;
}

#app .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;
}

#app .r-button:hover {
    color: #89294f;
}

#app .mt-md-3 {
    margin: 2rem auto;
    /* /*font-family: Arial, Helvetica, sans-serif;*/ */
}

#app .index {
    width: 100%;
    background-image: url(../../img/backtop.png);
    background-size: auto;
    background-repeat: repeat-x;
}

#app .top {
    padding: 8rem 0;
    font-weight: bold;
    font-family: Garamond, "Times New Roman", "メイリオ", "Meiryo", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}

#app .title {
    width: 50%;
    margin: 0 auto;
}

#app .t1 {
    padding: 1rem 0;
    border-bottom: solid 3px #000000;
    font-size: 3rem;
}

#app .t2 {
    padding: 1rem 0;
    font-size: 1.8rem;
}

#app .desc {
    width: 50%;
    margin: 0 auto;
    padding: 1rem 0;
    font-weight: normal;
    line-height: 200%;
    text-align: left;
}

#app .d1 {
    padding: 1rem 0;
}

#app .o1 {
    padding-top: 2rem;
    font-size: 1.8rem;
}

/* user reports */
#app .ur2-1-1e {
    width: calc(50% - .5rem);
    margin-right: .5rem;
    background-color: #b5bedd;
}
  
#app .ur2-1-1j {
    width: 50%;
    background-color: #d1e1ef;
}
  
#app .umr {
    color: #67739a;
}
  
#app .ur-button {
    border-bottom: solid 2px #67739a;
}
  
#app .ur-button:hover {
    color: #8b94b1;
}

/* site search */
#app .s1 {
    text-align: left;
    width: 100%;
}
  
#app .s1title {
    padding: .5rem .5rem .2rem;
    background-color: #ceef6b;
    width: fit-content;
    min-width: 50%;
}
  
#app .s1path {
    padding: .5rem .5rem 0rem;
    color: #8c98ad;
    font-size: 1.2rem;
}
  
#app .s1path a {
    text-decoration: none;
}
  
#app .s1path a:hover {
    color: #abdedc;
}
  
#app .s1body {
    width: 80%;
    padding: .5rem 1.2rem .2rem;
    font-size: 1.2rem;
    line-height: 2.2rem;
}
#app .smr {
    position: absolute;
    right: 0;
    bottom: 1rem;
    color: #86ad0e;
}
  
#app .sr-button {
    border-bottom: solid 2px #86ad0e;
}
  
#app .sr-button:hover {
    color: #ceef6b;
}

#app .highlight {
    color: #ee7800;
    font-weight: bold;
}

#app .afterClear {
    display: none !important;
    width: 50%;
    margin: 5rem auto 0;
    padding: 3rem;
    font-size: large;
    text-align: start;
    background-color: #f5f5f5;
    border: 1px solid #8a6e82;
    border-radius: 5px;
}

@media screen and (max-width:1200px){
	#app .c1{
		width:80%;
	}

	#app button[id="fsubmit"], #app button[id="fclear"]{
		padding:10px 41px;
	}

	#app .c2,
	#app .c3{
		width: 25%;
	}

	#app .compd-body{
		left:0;
	}
}

@media screen and (max-width:969px){
	#app .c1{
		width:100%;
	}

	#app .r2-2-1{
		min-width:none;
		margin-right:10px;
		margin-left:0;
	}

	#app .r2-2-1 h5{
		font-size:14px;
	}

	#app .r2-2-2{
		flex-direction:column;
	}

	#app .mh{
		margin:0;
		padding:20px;
		margin-bottom:20px;
	}

	#app .mh:last-child{
		margin-bottom:0;
	}

	#app .c2,
	#app .c3{
		width: 30%;
	}

	#app button[id="fsubmit"], #app button[id="fclear"]{
		padding:10px 30px;
	}
}

@media screen and (max-width:768px){
	 #app .c2, #app .c3 {
        width: calc((100% - 10px) / 2);
    }

	#app button[id="fsubmit"], #app button[id="fclear"]{
		width:100%;
		padding:10px;
	}

	#app .c4, #app .c5{
		width:calc((100% - 10px) / 2);
	}


	#app .compd-body{
		width: calc(100% * 2);
		min-width:unset;
	}

	#app .compd-ul li label{
		text-wrap:wrap;
	}

	#app .select-body{
		min-width:unset;
		width:calc(100% * 2);
		left:calc(100% - 201%);
	}

	#app .m{
		flex-direction:column;
		align-items:center;
	}

	#app .r1{
		width:40%;
	}
}

@media screen and (max-width:640px){
	#app .is-open+.select-body, #app .is-open+.compd-body{
		gap:30px 10px;
		justify-content:flex-start;
		flex-flow:wrap;
	}

	#app .select-d{
		flex:unset;
		width:calc((100% - 20px) / 3);
	}

	#app .compd-item{
		width: calc((100% - 20px) / 3);
	}

	#app table th{
		font-weight:700;
		width:100%;
		min-width:unset;
	}

	#app table td{
		color:var(--gray02);
	}

	#app .r2-1 * tr{
		display:flex;
		flex-direction:column;
	}

	#app .r-button{
		font-size:1rem;
		padding:0;
	}

	#app .r2 * h5 {
        font-size: 13px;
    }

}

@media screen and (max-width:460px){
	#app .r1{
		width:70%;
	}

	#app .compd-item {
        width: calc((100% - 10px) / 2);
    }

	#app .select-d {
        flex: unset;
        width: calc((100% - 10px) / 2);
    }

}

@media screen and (max-width:375px){
	#app .c2, #app .c3 {
        width: 100%;
    }

	#app .compd-body{
		width:100%;
	}

	#app .compd-item {
        width: 100%;
    }

	#app .is-open+.select-body, #app .is-open+.compd-body{
		width:100%;
		gap:10px;
		left:0;
	}

	#app .select-d{
		width:100%;
	}

	#app .r1{
		width:100%;
	}
}