html {
	height: 100%;
}

* {
	margin: 0;
	padding: 0;
}

body {

	height: 100%;
	width:100%;
	/* margin: 0; */
	/* padding: 0; */
	border:solid 0;
	background-color:#ffffff;
	font-size:100%;
	font-weight: normal;
	-webkit-print-color-adjust: exact;
}

img {
	vertical-align: top;
}

p {
	margin: 0px;
	padding: 0px;
}

.content {
	overflow-x: hidden;
}

/* 非表示にする擬似要素をターゲット */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none; /* Webkitブラウザのデフォルトのスタイルを無効化 */
	margin: 0; /* ボタンの間隔を消す */
}

.select1 {
	border-color: #ffaf59;
	background-color: #fcfcfc;
}
.select1:focus {
	outline: solid 2px #f3b185;
}
.select2 {
	border-color: #7af6ff;
	background-color: #fcfcfc;
}
.select2:focus {
	outline: solid 2px #c5f5ff;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ボーダー＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.border1 {
	border: solid 1px;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝角丸＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.radius5 {
	border-radius: 5px;
}

.radius10 {
	border-radius: 10px;
}

.radius20 {
	border-radius: 20px;
}

.radius30 {
	border-radius: 30px;
}

.radius40p {
	border-radius: 40%;
}
.radius100p {
	border-radius: 100%;
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝フォント＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.fbold {
	font-weight: bold;
}

.f7 {
	font-size: 7px;
}
.f10 {
	font-size: 10px;
}

.f12 {
	font-size: 12px;
}
.f13 {
	font-size: 13px;
}

.f15 {
	font-size: 15px;
}
.f16 {
	font-size: 16px;
}
.f18 {
	font-size: 18px;
}

.f20 {
	font-size: 20px;
}

.f25 {
	font-size: 25px;
}

.f30 {
	font-size: 30px;
}

.f40 {
	font-size: 40px;
}

.f2v {
	font-size: 2vw;
}

.f2-5v {
	font-size: 2.5vw;
}

.f3v {
	font-size: 3vw;
}

.f3-5v {
	font-size: 3.5vw;
}

.f4v {
	font-size: 4vw;
}

.f4-5v {
	font-size: 4.5vw;
}

.f5v {
	font-size: 5vw;
}

.f6v {
	font-size: 6vw;
}

.f7v {
	font-size: 7vw;
}

.f10v {
	font-size: 10vw;
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ＰＣ画面用設定＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
@media screen and (min-width: 1024px) { /*ウィンドウ幅が767px以上の場合に適用*/

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝position設定＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/


	.pc-flex,.tab-flex {
		display: flex;
	}

	.sp-only {
		display: none;
	}

	.sp-none {
		display: initial;
	}
}

@media screen and (max-width: 1024px) { /*ウィンドウ幅が最大767pxまでの場合に適用*/

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝position設定＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/


	.tab-flex {
		display: flex;
	}
	.pc-flex {
		display: block;
	}

	.sp-only {
		display: none;
	}

	.sp-none {
		display: initial;
	}
}

@media screen and (max-width: 767px) { /*ウィンドウ幅が最大767pxまでの場合に適用*/

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝position設定＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/


	.tab-flex,.pc-flex {
		display: block;
	}

	.sp-only {
		display: initial;
	}

	.sp-none {
		display: none;
	}
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝横幅設定＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.w6 {
	width: 6%;
}
.w8 {
	width: 8%;
}
.w10 {
	width: 10%;
}
.w20 {
	width: 20%;
}
.w25 {
	width: 25%;
}

.w20px {
	width: 20px;
}
.w30px {
	width: 30px;
}
.w50px {
	width: 50px;
}
.w80px {
	width: 80px;
}
.w100px {
	width: 100px;
}
.w120px {
	width: 120px;
}
.w150px {
	width: 150px;
}
.w200px {
	width: 200px;
}
.w250px {
	width: 250px;
}
.w300px {
	width: 300px;
}
.w450px {
	width: 450px;
}
.w500px {
	width: 500px;
}

.w30 {
	width: 30%;
}

.w35 {
	width: 35%;
}

.w40 {
	width: 40%;
}

.w50 {
	width: 50%;
}

.w60 {
	width: 60%;
}

.w70 {
	width: 70%;
}

.w80 {
	width: 80%;
}

.w90 {
	width: 90%;
}

.w95 {
	width: 95%;
}

.w100 {
	width: 100%;
}
.w100v {
	width: 100vw;
}
.m-w800 {
	max-width: 800px;
}
.m-w1000 {
	max-width: 1000px;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝縦幅設定＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.hauto {
	height: auto;
}
.h20 {
	height: 20%;
}
.h20p {
	height: 20px;
}
.h30p {
	height: 30px;
}
.h45p {
	height: 45px;
}
.h100p {
	height: 100px;
}
.h150p {
	height: 150px;
}
.h200p {
	height: 200px;
}
.h400p {
	height: 400px;
}
.h50 {
	height: 50%;
}
.h60 {
	height: 60%;
}
.h100 {
	height: 100%;
}
.h30v {
	height: 30vh;
}
.h45v {
	height: 45vh;
}
.h50v {
	height: 50vh;
}
.h80v {
	height: 80vh;
}
.h100v {
	height: 100vh;
}
.max-h50p {
	max-height: 50px;
}
.max-h150p {
	max-height: 150px;
}
.oh1 {
	height: calc(100vh - 170px);
}
.oh2 {
	height: calc(100vh - 100px);
}
.oh3 {
	height: calc(50vh - 150px);
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝縦位置vertical-align＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/



.va-top {
	vertical-align: top;
}

.va-bottom {
	vertical-align: bottom;
}

.va-baseline {
	vertical-align: baseline;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝マージン設定＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

/*===============================マージン設定=======================================*/

.mauto {
	margin: auto;
}

.mg5 {
	margin: 5px;
}
.mg10 {
	margin: 10px;
}

.mg20 {
	margin: 20px;
}

.mb0 {
	margin-bottom: 0px;
}

.mb5{
  margin-bottom: 5px;
}

.mb10 {
	margin-bottom: 10px;
}

.mb20 {
	margin-bottom: 20px;
}

.mb30 {
	margin-bottom: 30px;
}

.mb40 {
	margin-bottom: 40px;
}

.mb50 {
	margin-bottom: 50px;
}

.mb80 {
	margin-bottom: 80px;
}

.mb150 {
	margin-bottom: 150px;
}

.mt-200 {
	margin-top: -200px;
}

.mt-100 {
	margin-top: -100px;
}

.mt-80 {
	margin-top: -80px;
}

.mt-30 {
	margin-top: -30px;
}

.mt-20 {
	margin-top: -20px;
}

.mt-10 {
	margin-top: -10px;
}

.mt0{
  margin-top: 0px;
}

.mt5{
  margin-top: 5px;
}

.mt10 {
	margin-top: 10px;
}
.mt15 {
	margin-top: 15px;
}

.mt20 {
	margin-top: 20px;
}

.mt30 {
	margin-top: 30px;
}

.mt40 {
	margin-top: 40px;
}

.mt50 {
	margin-top: 50px;
}

.mt80 {
	margin-top: 80px;
}

.mt150 {
	margin-top: 150px;
}

.ml-25p {
	margin-left: -25%;
}

.ml-20p {
	margin-left: -20%;
}

.ml-15p {
	margin-left: -15%;
}
.ml-10px {
	margin-left: -10px;
}

.ml-5p {
	margin-left: -5%;
}

.ml-3p {
	margin-left: -3%;
}

.ml0 {
	margin-left: 0px;
}
.ml5p {
	margin-left: 5%;
}

.ml5 {
	margin-left: 5px;
}

.ml10 {
	margin-left: 10px;
}
.ml12 {
	margin-left: 12px;
}

.ml15 {
	margin-left: 15px;
}

.ml20 {
	margin-left: 20px;
}

.ml30 {
	margin-left: 30px;
}

.ml50 {
	margin-left: 50px;
}

.ml75 {
	margin-left: 75px;
}

.ml100 {
	margin-left: 100px;
}

.ml120 {
	margin-left: 120px;
}
.ml150 {
	margin-left: 150px;
}

.ml10p {
	margin-left: 10%;
}

.ml20p {
	margin-left: 20%;
}

.ml30p {
	margin-left: 30%;
}

.ml40p {
	margin-left: 40%;
}

.mr0 {
	margin-right: 0;
}

.mr5 {
	margin-right: 5px;
}
.mr10 {
	margin-right: 10px;
}
.mr12 {
	margin-right: 12px;
}

.mr15 {
	margin-right: 15px;
}
.mr20 {
	margin-right: 20px;
}
.mr25 {
	margin-right: 25px;
}

.mr5p {
	margin-right: 5%;
}

.mr10p {
	margin-right: 10%;
}

.mr20 {
	margin-right: 20px;
}

.mr30 {
	margin-right: 30px;
}

.mr50 {
	margin-right: 50px;
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝パディング設定＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.pad0 {
	padding: 0px;
}

.pad2 {
	padding: 2px;
}

.pad5 {
	padding: 5px;
}

.pad10 {
	padding: 10px;
}

.pad20 {
	padding: 20px;
}

.pad30 {
	padding: 30px;
}
.pad2-20 {
	padding: 2px 20px;
}
.pad5-10 {
	padding: 5px 10px;
}
.pad10-50 {
	padding: 10px 50px;
}

.padx10 {
	padding-left:10px;
	padding-right: 10px;
}

.pt5p {
	padding-top: 5%;
}

.pt6p {
	padding-top: 6%;
}

.pt10 {
	padding-top: 10px;
}
.pt20 {
	padding-top: 20px;
}

.pt30 {
	padding-top: 30px;
}

.pt50 {
	padding-top: 50px;
}

.pt100 {
	padding-top: 100px;
}

.pt200 {
	padding-top: 200px;
}

.pb5p {
	padding-bottom: 5%;
}

.pb6p {
	padding-bottom: 6%;
}

.pb10 {
	padding-bottom: 10px;
}

.pb20 {
	padding-bottom: 20px;
}

.pb30 {
	padding-bottom: 30px;
}

.pb40 {
	padding-bottom: 40px;
}

.pb50 {
	padding-bottom: 50px;
}

.pb80 {
	padding-bottom: 80px;
}

.pb150 {
	padding-bottom: 150px;
}
.pb250 {
	padding-bottom: 250px;
}

.pb50p {
	padding-bottom: 50%;
}

.pb60p {
	padding-bottom: 60%;
}

.pb100p {
	padding-bottom: 100%;
}

.pl2p {
	padding-left: 2%;
}

.pl15 {
	padding-left: 15px;
}

.pl20 {
	padding-left: 20px;
}

.pr5p {
	padding-right: 5%;
}

.pr20 {
	padding-right: 20px;
}

.pr30 {
	padding-right: 30px;
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝バックカラー＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.bgwhite {
	background-color: #fff;
}
.bgred {
	background-color: #f00;
}
.bgc1 {
	background-color: #ffbf00;
}
.bgc2 {
	background-color: rgb(131, 249, 152);
}
.bgc3 {
	background-color: #e1e1e1;
}
.bgc4 {
	background-color: #fcfcfc;
}


.red {
	color: #f00;
}
.white {
	color: #fff;
}
.black {
	color: #000;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝カーソル設定＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.cursor-not {
	/*禁止*/
	cursor: not-allowed;
}

.pointer {
	/*ポインター*/
	cursor: pointer;
}

.areahover:hover {
	background-color: #EEEEEE;
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝その他の設定＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.button0 {
	background-color: rgba(0,0,0,0);
	color: #000;
	border: solid 1px #555555;
}
.button0:hover {
	background-color: #eeeeee;
}
.button-none {
	background-color: #e7dfdf;
	color: #bbb;
	border: solid 0;
}
.button1 {
	background-color: #663718;
	color: #ffffff;
	border: solid 1px #EEEEEE;
	border-radius: 10px;
}
.button1:hover {
	background-color: #995527;
}
.button2 {
	background-color: #a39a97;
	color: #ffffff;
	border: solid 0px #ea4343;
}
.button2:hover {
	background-color: #e0d7d6;
}
.button3 {
	background-color: #ff3030;
	color: #ffffff;
	border: solid 0px #ea4343;
}
.button3:hover {
	background-color: #ff6060;
}
.button4 {
	background-color: rgba(0,0,0,0);
	color: #fff;
	border: solid 0px;
	border-bottom: solid 1px #EEEEEE;
}
.button4:hover {
	background-color: rgba(38, 233, 74, 0.8);
	border: solid 0px;
}
.button5 {
	background-color: rgba(0,0,0,0);
	color: #000;
	border: solid 1px #555555;
}
.button5:hover {
	background-color: #eeeeee;
}
.button6 {
	background-color: #cccccc;
	color: #000;
	border: solid 1px #555555;
}
.button6:hover {
	background-color: #e4e4e4;
}
.button7 {
	background-color: #fafafa;
	color: #000;
	border: solid 1px #555555;
}
.button7:hover {
	background-color: #e4e4e4;
}
.message-window {
	width: 100%;
	height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #EEEEEE;
}
.message-window2 {
	width: 100%;
	height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
}
.line0 {
	border: solid 0;
}
.line1 {
	border: solid 1px #555555;
}

.uline1 {
	border-bottom: solid 1px #555555;
}
.uline2 {
	border-bottom: solid 1px #ff983e;
}

.radius10 {
	border-radius: 10px
}
.z1 {
	z-index: 1;
}

.z10 {
	z-index: 10;
}
.z150 {
	z-index: 150;
}

.relative {
	position: relative;
}

.absolute {
	position: absolute;
}
.position0 {
	top:0;
	left:0;
}
.position1 {
	/*スタートに戻る*/
	top:20px;
	right:50px;
}
.position1 a {
	color: #000;
}
.position1 a:hover {
	color: #000;
}
.position2 {
	/*新規登録ボタン*/
	bottom:0px;
	left:50px;
}
.position3 {
	top:100%;
}
.position4 {
	/*ジャンル編集ボタン*/
	bottom:0px;
	left: 130px;
}
.position5 {
	bottom: 20px;
	left: 30px;
}
.position6 {
	bottom: 20px;
	right: 30px;
}
.position7 {
	bottom: 20px;
	left: 30px;
}

.modal {
	background-color: rgba(50,50,50,0.7);
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
}

.modal2 {
	background-color: rgba(255,255,255,0);
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
}

.modal-fade {
    animation-name: fadeIn;
    animation-duration: 0.5s;
    animation-delay: 0.2s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
	opacity: 0;
}

.modal3 {
	background-color: rgba(0,0,0,0.5);
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-fade2 {
    animation-name: fadeIn2;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes fadeIn2 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.d-flex {
	display: flex;
}
.flex-j-around {
	justify-content: space-around;
}
.flex-j-between {
	justify-content: space-between;
}
.flex-j-center {
	justify-content: center;
}

.flex-j-end {
	justify-content: flex-end;
}

.flex-i-center {
	align-items: center;
}
.flex-i-stretch {
	align-items: stretch;
}
.flex-i-start {
	align-items: flex-start;
}
.flex-i-baseline {
	align-items: baseline;
}
.flex-i-end {
	align-items: flex-end;
}

.flex-wrap {
	flex-wrap: wrap;
}
.no-wrap {
	white-space: nowrap;
}

.d-none {
	display: none;
}


.d-order1 {
	order: 1;
}
.d-order2 {
	order: 2;
}
.d-order3 {
	order: 3;
}
.d-order4 {
	order: 4;
}

.valign-middle {
	vertical-align: middle;
}

.valign-baseline {
	vertical-align: baseline;
}

.text-center {
	text-align: center;
}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

.resizeNone {
	resize: none;
}

.deco-none {
	color: #000;
}

.deco-none a {
	text-decoration: none;
	color: #00f;
}

.deco-none a:hover {
	text-decoration: none;
	color: #88f;
}

.deco-none-b {
	color: #fff;
}

.deco-none-b a {
	text-decoration: none;
	color: #fff;
}

.deco-none-b a:hover {
	text-decoration: none;
	color: #fff;
}

.float-l {
	float: left;
}

.over-hidden {
	overflow: hidden;
}
.overy-scroll {
	overflow-y: scroll;
}
.overy-auto {
	overflow-y: auto;
}

.finish {
	color: #f00;
	border-bottom: solid 1px #f00;
}