/****************************************

          import

*****************************************/
@font-face {
  font-family: 'myfont';
  src: url('../fonts/myfont.woff?version=101') format('woff');
}


/****************************************

          global

*****************************************/
*,
::after,
::before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

html {
	font-size: 62.5%;/* 10px */
}

body {
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: -apple-system, BlinkMacSystemFont, helvetica, arial, 'HiraKakuProN-W3', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'BIZ UDGothic', Meiryo, sans-serif;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	font-size:16px; font-size:1.6rem;
	line-height: 1.5;
	text-align: left;
	background: white;
	color:#454545;
	word-wrap:break-word;
	overflow-wrap:break-word;
}

::selection {
}

h1,h2,h3,h4,h5,h6{
	font-weight: normal;
}

.clearfix:before,
.clearfix:after{
	visibility: hidden;
	display: block;
	font-size: 0;
	content: "";
	clear: both;
	height: 0 !important;
}
.container{
	margin: auto;
	width: 70%;
	max-width: 1180px;
}

a{
}
img{
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
strong{
	font-weight: bold;
}

table{
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	border-spacing: 0;
}
tr{
	background: white;
}
th,
td{
	padding: .2em .5em;
	border: solid 1px #F0EBE3;
}
th{
	width: 20%;
}

#page-title{
	font-family: "myfont";
	font-size: 1.2em;
	color: pink;
}
#page-title-ori{
	font-size: 1.2em;
	color: pink;
}
.page-subtitle{
	margin-top: 3em;
	font-family: "myfont";
	font-size: 1.2em;
	color: pink;
}
.page-subtitle-hatena{
	margin-left: 1em;
	font-size: .7em;
	color: #454545;
	text-decoration: none;
}
.small-text{
	font-size: .8em;
	color: #999;
}

@media ( max-width : 768px ) {
	body {
		font-size:15px; font-size:1.5rem;
	}
	.container{
		width: 90%;
	}
}
@media ( max-width : 480px ) {
	.container{
		width: 96%;
	}
}


/****************************************

          hikaku(index)

*****************************************/
.hikaku-image{
	cursor: pointer;
}
.hikaku-row{
	display: table-row;
}
.hikaku-row.del{
	display: none;
}
.hikaku-row-color{
	background: #F9F9F9;
}
.hikaku-unique-field{
	overflow: hidden;
}
.hikaku-unique-color{
	color: red;
}
.hikaku-calc-row{
	background: #fff2f2;
}
#hikaku-totsu,
#hikaku-unique{
	background: #fff2f2;
}
.hikaku-calc-row[data-yujou="1"] .hikaku-calc-field{
	color: red;
}
.hikaku-calc-row[data-yujou="1"] .hikaku-calc-field .hikaku-small{
	color: #454545;
}
#hikaku th{
	font-size: .8em;
}
.hikaku-calc-field{
	line-height: 1;
}
.hikaku-small{
	font-size: .8em;
	line-height: 1;
	display: block;
	background: white;
	border-radius: 4px;
	margin-top: .5em;
}

.yujou-checkbox{
	display: none;
}
.yujou-checkbox-label{
	display: block;
	border-radius: 2px;
	border: 1px solid pink;
	margin-bottom: .2em;
	padding: 0 .5em;
}
.yujou-checkbox:checked + .yujou-checkbox-label{
	background: pink;
	color: white;
}

.edit-row{
	display: none;
}
.edit-row.show{
	display: table-row;
}

#screen-shot-wrapper{
	vertical-align: middle;
}
#screen-shot{
	cursor: pointer;
	display: block;
	background : pink;
	color: white;
	border: solid 1px pink;
	border-radius: 2px;
	padding: .5em;
}
#screen-shot.disable{
	background : white;
	color: pink;
}
#screen-shot-loader{
	display: none;
}
#screen-shot.disable #screen-shot-loader{
  display: block;
  width: 50px;
  --b: 8px; 
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 1px;
  background: conic-gradient(#0000 10%,pink) content-box;
  -webkit-mask:
    repeating-conic-gradient(#0000 0deg,#000 1deg 20deg,#0000 21deg 36deg),
    radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));
  -webkit-mask-composite: destination-in;
          mask-composite: intersect;
  animation:l4 1s infinite steps(10);
}
@keyframes l4 {to{transform: rotate(1turn)}}


#copy-url{
	display: table;
	margin-left: auto;
	padding: .2em 1em;
	border-radius: 2px;
	background: pink;
	color: white;
	font-size: .8em;
	cursor: pointer;
}
#copy-finish{
	display: none;
	margin-left: auto;
	padding: .2em 1em;
	border-radius: 2px;
	font-size: .8em;
}
#copy-finish.show{
	display: table;
}


/****************************************
          tsuyoine
*****************************************/
.tsuyoine-field{
	border: none;
	text-align: center;
}
.tsuyoine-button{
	font-size: .6em;
	font-family: "myfont";
	background-image: linear-gradient(45deg, rgba(187, 255, 239, 1), rgba(236, 237, 203, 1) 34%, rgba(248, 227, 183, 1) 72%, rgba(255, 155, 252, 1) 97%);
	padding: .5em .1em;
	border-bottom: solid 1px #ccc;
	border-right: solid 1px #ccc;
	border-radius: 2px;
}


/****************************************

          card-lists

*****************************************/
#cards{
	display: none;
}
#cards.show{
	display: block;
}
#cards-overlay{
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .6);
}
#cards-inner{
	position: fixed;
	z-index: 2;
	top: 5%;
	left: 5%;
	width: 90%;
	height: 90%;
	background: white;
	border-radius: 4px;
	padding: .5em;
}
#cards-search{
	height: 3em;
}
#cards-inner-flex{
	display: flex;
	height: calc(100% - 3em);
}
#cards-select{
	width: 20%;
}
#cards-select-type{
	margin-top: 1.5em;
}
.cards-radio{
	display: none;
}
.cards-radio-label{
	display: block;
	border-radius: 2px;
	border: 1px solid pink;
	margin-bottom: .2em;
}
.cards-radio:checked + .cards-radio-label{
	background: pink;
	color: white;
}


#cards-lists{
	width: 80%;
	height: 100%;
	overflow-y: scroll;
}
#cards-lists-inner{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	align-content: flex-start;
}
.card-wrapper{
	width: 18%;
	margin: 1%;
	margin-top: 0;
}
.card{
	cursor: pointer;
}


/****************************************

          edit-card

*****************************************/
.edit-button{
	color: white;
	background: pink;
	display: inline-block;
	padding: 1em;
	border-radius: 4px;
	text-decoration: none;
	cursor: pointer;
}

.edit-table{
}
.edit-table th,
.edit-table-small{
	font-size: .8em;
}

#edit-table2{
	margin-top: 1em;
}

#card-info{
	border: 1px solid pink;
	border-radius: 2px;
	padding: .2em;
	text-align: center;
}
#card-info-name{
	color: pink;
}

#edit-button{
	background: pink;
	padding: .2em 1em;
	border-radius: 3em;
	color: white;
	display: table;
	margin-left: auto;
	margin-bottom: .5em;
	text-decoration: none;
}
#edit-title{
	color: pink;
	margin-top: 1em;
}
.edit-image-button{
	cursor: pointer;
	display: table;
	margin: .2em auto;
	background: pink;
	color: white;
	font-size: .8em;
	padding: .2em .5em;
	border-radius: 4px;
}
.edit-image{
	display: none;
}
.edit-image.show{
	display: block;
}
.form-submit.edit-image-submit{
	margin-top: .2em;
	padding: .1em .5em;
	margin-right: auto;
	border-radius: 4px;
}


/****************************************

          del

*****************************************/
.del-button,
.del-unique-button{
	cursor: pointer;
	display: table;
	margin-left: auto;
	color: white;
	background: red;
	font-size: .8em;
	padding: .1em .5em;
	border-radius: 4px;
}
.del-button{
	margin-top: 1em;
}
.del-unique-button{
	display: inline-block;
	margin-left: 1em;
	font-size: .6em;
}
.del-check{
	display: none;
	text-align: right;
	font-size: .8em;
}
.del-check.show{
	display: block;
}
.del-check-text{
	margin-top: .5em;
	margin-bottom: .5em;
}
.del-check-yes{
	margin-right: 1em;
}
.del-check-no{
	cursor: pointer;
}

/****************************************

          ranks

*****************************************/
#ranks *{
	vertical-align: middle;
}
#rank-header{
	background: #fff2f2;
	font-size: .8em;
	text-align: center;
}
.rank-item:nth-child(2n+1){
	background: #F9F9F9;
}
.rank-img-wrapper{
	text-align: center;
}
.rank-name{
	font-size: .8em;
	font-weight: normal;
}
.rank-calc,
.rank-pt{
	text-align: center;
	font-weight: bold;
	font-size: 1.2em;
}
.rank-tokui,
.rank-kizuna{
	text-align: center;
}


#rank-menu{
	border: solid 4px #fff2f2;
	border-radius: 10px;
	padding: .5em;
	margin-bottom: 3em;
	font-size: .8em;
}
#rank-menu-title{
	margin-bottom: .5em;
	font-weight: bold;
}
.rank-menu-item{
	display: inline-block;
	text-decoration: none;
	color: inherit;
	background: #fff2f2;
	padding: .1em .5em;
	margin-bottom: .4em;
	border-radius: 4px;
	border: solid 1px #fff2f2;
}
.rank-menu-item-select{
	background: white;
}

#rank-sort{
	margin-top: 1em;
	margin-bottom: .3em;
}
.rank-sort-item{
	display: inline-block;
	border: solid 1px #fff2f2;
	padding: 0 1em;
	font-size: .8em;
	cursor: pointer;
	border-radius: 20px;
	margin-bottom: .2em;
	color: inherit;
	text-decoration: none;
}
.rank-sort-item-on{
	background: #fff2f2;
}
#rank-sort-all{
	display: inline-block;
	border: solid 1px #DDEB9D;
	padding: 0 1em;
	font-size: .8em;
	cursor: pointer;
	border-radius: 20px;
	margin-bottom: .2em;
	background: #DDEB9D;
}


#rank-help{
	display: inline-block;
	margin-left: .5em;
	font-size: .8em;
	color: #454545;
	cursor: pointer;
}
#rank-help-text{
	display: none;
	border: solid 1px #F0EBE3;
	padding: .5em;
	margin-top: .5em;
	margin-bottom: .5em;
	font-size: .8em;
}
#rank-help-text.show{
	display: block;
}

@media ( max-width : 480px ) {
	#rank-menu{
		text-align: center;
	}
}

/****************************************

          header

*****************************************/
#header{
	padding: .5em 0;
	background: pink;
	color: white;
}
#site-title a{
	color: inherit;
	text-decoration: none;
}
#site-title{
	font-family: "myfont";
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#site-maintitle{
	font-size: 1.4em;
}
#site-subtitle{
	position: relative;
	background: white;
	color: pink;
	font-size: .8em;
	padding: .2em 1em;
	border-radius: 5px;
	border: solid 1px #e0edff;
}
#site-subtitle:before{
	content: "";
	position: absolute;
	top: 50%;
	left: 100%;
	margin-top: -8px;
	border: 8px solid transparent;
	border-left: 8px solid white;
}
#site-balloon{
	display: table;
	background: white;
	font-size: .4em;
	color: #454545;
	padding: .2em 1em;
	border-radius: 3em;
	transform: rotate(4deg) translate(.2em, 1em);
}
#site-kantan{
	display: inline-block;
	font-size: 1.2em;
	transform: rotate(4deg) translate(-.3em, 0);
}
@media ( max-width : 480px ) {
	#site-title{
		flex-direction: column;
	}
	#site-subtitle{
		margin-top: .5em;
	}
	
	#site-subtitle:before{
		content: "";
		position: absolute;
		top: 100%;
		left: 50%;
		margin-top: 0;
		margin-left: -10px;
		border: 10px solid transparent;
		border-top: 10px solid white;
	}
}


/****************************************

          main

*****************************************/
#main{
}
#main-inner{
	display: flex;
	justify-content: space-between;
}
#main-content{
	width: 66%;
	padding-bottom: 3em;
	margin-top: 2em;
}
#sub-content{
	width: 26%;
	padding-bottom: 3em;
	margin-top: 2em;
}

@media ( max-width : 768px ) {
	#main-inner{
		display: block;
	}
	#main-content{
		width: 100%;
	}
	#sub-content{
		width: 100%;
	}
}

/****************************************

          sub

*****************************************/
.sub-title{
	font-family: "myfont";
	margin-top: 2em;
}
.log{
	font-size: .8em;
}
.log-item{
	margin-bottom: .5em;
}
.link-item{
	font-size: .8em;
	font-weight: bold;
	background: pink;
	color: white;
	padding: .2em 1em;
	text-decoration: none;
	border-radius: 4px;
}


/****************************************
         thanks page
*****************************************/
.thanks-img-wrapper{
	display: table;
	position: relative;
	margin: 1em 0 1em auto;
	width: 120px;
	height: 120px;
	background: #F2F8FF;
	border-radius: 50%;
	border: solid 4px #fffafa;
}
.thanks-img{
	position: absolute;
	width: 100px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}


/****************************************
         top mes
*****************************************/
.top-mes{
	font-size: .8em;
	padding: .2em .5em;
	border: solid 1px pink;
	border-radius: 2px;
	margin-bottom: 2em;
}


/****************************************

          footer

*****************************************/
#footer{
	text-align: right;
	font-family: "myfont";
	background: pink;
	color: white;
}
#footer a{
	color: inherit;
	text-decoration:none;
}
#footer-menu{
	padding-top: 3em;
	padding-bottom: 2em;
}
.footer-menu-item{
	display: inline-block;
}

#copyright{
	padding-bottom: .5em;
}
#contact-link{
	margin-bottom: 1em;
}
#contact-link a{
	margin-left: .5em;
}

@media ( max-width : 768px ) {
	.footer-menu-item{
		display: block;
		text-align: left;
	}
}


/****************************************
          pagenation
*****************************************/
.pagination{
	margin-top: .5em;
	font-size: 150%;
}
.pagination li{
	display: inline-block;
}
.pagination a{
	text-decoration: none;
}

/****************************************
        form init
*****************************************/
input,
button,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
}

textarea {
  resize: vertical;
}

input[type='checkbox'],
input[type='radio'] {
  display: none;
}

input[type='submit'],
input[type='button'],
label,
button,
select {
  cursor: pointer;
}

select::-ms-expand {
  display: none;
}

/****************************************
         form general
*****************************************/
.form-text,
.form-area,
.form-submit{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.form-text,
.form-area,
.form-submit,
.form-list{
	border-radius: 2px;
	outline: none;
	padding: 0 .2em;
	margin: .2em 0;
	vertical-align: middle;
	color: #454545;
	background: white;
	border: solid 1px #eee;
}
.form-text{
	width: 100%;
}
.form-area{
	resize: vertical;
	width: 100%;
}
.form-label{
	display: table;
	margin-top: 1em;
}
.form-submit{
	cursor: pointer;
	margin-top: 1em;
	padding: .5em 1em;
	display: table;
	margin-left: auto;
	color: pink;
	border-color: pink;
}

@media ( max-width : 280px ) {
	.form-list{
		width: 100%;
	}
}


/****************************************
         form exp
*****************************************/
.strong-form{
	border: solid 2px pink;
	padding: 1em;
	border-radius: 6px;
}
.strong-list{
	border: 3px solid pink;
	border-radius: 2em;
	padding: 0 .5em;
}