@charset "utf-8";

/* WEB FONT */
@font-face {
	font-family: "wf01";
	src: url(../font/wf01.woff2) format("woff2");
	font-display: swap;
}
@font-face {
	font-family: "wf02";
	src: url(../font/wf02.woff2) format("woff2");
	font-display: swap;
}

/* RESET */

*, *::before, *::after {
    -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, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	font-weight: normal;
	vertical-align: baseline;
}
a {
	text-decoration: none;
	outline: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	user-select: none;
}
img {
	image-rendering: -webkit-optimize-contrast;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}
legend {
	display: none;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-overflow-scrolling: touch;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q::before, q::after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* ----------------------------------------------*/

body {
	margin: 0;
	padding: 0;
    background: url(../img/bg.png) no-repeat center top, -moz-linear-gradient(top,  #38aaf8 0%, #83dcfe 100%);
    background: url(../img/bg.png) no-repeat center top, -webkit-linear-gradient(top,  #38aaf8 0%,#83dcfe 100%);
    background: url(../img/bg.png) no-repeat center top, linear-gradient(to bottom,  #38aaf8 0%,#83dcfe 100%);
    background-attachment: fixed;
	-webkit-background-size: cover;
	background-size: cover;
	text-align: center;
	font-size: 14px;
	color: #ffffff;
	line-height: 1.6em;
	font-family: Meiryo,"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
	letter-spacing: 0.05em;
	position:relative;
}
body.pdata {
    background: #ffffff;
}
@media screen and (max-width: 1000px) {
	body {
		padding: 128px 0 0 0;
	}
    body.pdata {
        padding: 110px 0 0 0;
    }
}
@media screen and (max-width: 600px) {
	body {
    background: -moz-linear-gradient(top,  #38aaf8 0%, #83dcfe 100%);
    background: -webkit-linear-gradient(top,  #38aaf8 0%,#83dcfe 100%);
    background: linear-gradient(to bottom,  #38aaf8 0%,#83dcfe 100%);
    padding: 108px 0 0 0;
    letter-spacing: 0.02em;
	}
    body.pdata {
        padding: 90px 0 0 0;
    }
}
th,td {
	font-size: 14px;
	color: #ffffff;
	letter-spacing: 0.1em;
	line-height: 1.6em;
}
button,input,select,textarea {
	font-size: 13px;
	color: #555555;
	letter-spacing: normal;
	font-family: Meiryo,"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
}
input[type="text"],input[type="date"] {
	padding: 4px 6px;
}
input[type="file"] {
	max-width: 90%;
}
select {
	padding: 4px 0;
}
textarea {
	padding: 6px;
	line-height: 1.6em;
}
button {
	-webkit-user-select: none;
	user-select: none;
	outline: none;
}
input.btn {
	height: 24px;
	width: 88px;
	letter-spacing: 0.1em;
	cursor: pointer;
}
.btn2 {
	height: 44px;
	padding: 0 12px;
	background: rgba(26,100,200,0.8);
	color: #ffffff;
	font-size: 15px;
	letter-spacing: 0.1em;
	border-radius: 40px;
	border: none;
	cursor: pointer;
	transition: background .4s;
}
.btn2:hover {
	background: rgba(9,64,139,0.9);
}
.btn3 {
	height: 44px;
	padding: 0 48px;
	background-color: rgba(26,100,200,0.8);
	color: #ffffff;
	font-size: 15px;
	letter-spacing: 0.1em;
	border-radius: 40px;
	border: none;
	cursor: pointer;
	transition: all .4s;
}
.btn3:hover {
	padding: 0 60px;
	background-color: rgba(9,64,139,0.9);
}
.submitbtn {
	text-align: center;
	clear: both;
}
.submitbtn input {
	height: 24px;
	padding: 0 24px;
	margin-top: 24px;
	letter-spacing: 0.1em;
	cursor: pointer;
}
/* CHECKBOX */
label {
	cursor: pointer;
}
input[type="checkbox"] {
	margin: 0;
	display: none;
}
.input-checkbox {
	padding: 5px 24px 0 34px;
	display: block;
	position: relative;
}
.input-checkbox label {
	display: inline-block;
	cursor: pointer;
}
.input-checkbox label::before,
.input-checkbox label::after {
	content: "";
	display: inline-block;
	position: absolute;
	transition: transform .2s ease;
}
.input-checkbox label::before {
	width: 22px;
	height: 22px;
	background-color: #ffffff;
	border: 1px solid #f0f0f0;
	border-radius: 2px;
	top: 4px;
	left: 0;
}
.input-checkbox label::after {
	top: 9px;
	left: 5px;
	width: 12px;
	height: 18px;
	margin-top: -5px;
	border-right: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-radius: 2px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	transition: border-bottom-color,border-right-color .2s ease;
}
.input-checkbox input[type="checkbox"]:checked + label::after {
	border-color: #5f98e1;
}
/* RADIO */
input[type="radio"] {
	margin: 0;
	display: none;
	border: 0;
}
.wradio {
	padding-bottom: 6px;
	display: flex;
}
.input-radio {
	padding: 5px 32px 4px 32px;
	display: block;
	position: relative;
}
.input-radio label {
	display: inline-block;
	cursor: pointer;
}
.input-radio label::before,
.input-radio label::after {
	content: "";
	position: absolute;
	display: inline-block;
	border-radius: 50%;
	transition: transform .2s ease;
}
.input-radio label::before {
	top: 4px;
	left: 0;
	width: 22px;
	height: 22px;
	background-color: #ffffff;
	border: 1px solid #cccccc;
}
.input-radio label::after {
	top: 8px;
	left: 4px;
	width: 14px;
	height: 14px;
	background-color: transparent;
	transform: scale(0);
}
.input-radio input[type="radio"]:checked + label::after {
	background-color: #156fd3;
	transform: scale(1);
}

@media screen and (max-width: 600px) {
	input[type="text"],input[type="email"],input[type="number"],input[type="tel"],input[type="search"],input[type="date"],textarea {
		font-size: 16px;
		border: 1px solid #cccccc;
		-webkit-appearance : none;
		-webkit-tap-highlight-color: rgba(0,0,0,0);
		border-radius: 2px;
	}
	select {
		font-size: 16px;
	}
	.wradio {
		display: flex;
		flex-direction: column;
	}
	.input-checkbox label::before {
		border: 1px solid #cccccc;
	}
}
/* - */
.clear {
	clear: both;
}
.right {
	text-align: right;
}
.left {
	text-align: left;
}

/* HEADER */
header {
	height: 240px;
	width: 1272px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}
h1 a {
	height: 106px;
	width: 500px;
	background: url(../img/logo.svgz) no-repeat left center;
	background-size: contain;
	display: block;
    white-space: nowrap;
	text-indent: 200%;
	overflow: hidden;
	position: absolute;
	top: 34px;
	left: 12px;
}
.recipe h1 a {
	height: 106px;
	width: 412px;
	background: url(../img/logo_recipe.svgz) no-repeat left center;
	background-size: contain;
}
@media screen and (max-width: 1272px) {
	header {
		width: 1000px;
		background: url(../img/head_card.svgz) no-repeat 706px 50px;
		background-size: auto 26px;
	}
	h1 a {
		left: 1%;
	}
}
@media screen and (max-width: 1000px) {
	header {
		height: 100px;
		width: 100%;
		background: rgba(13,152,255,0.9);
		box-shadow: 0 3px 2px rgba(25,160,256,0.3);
		z-index: 50;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		overflow: visible;
	}
	h1 a {
        height: 62px;
		width: 286px;
		margin: 0 auto;
		position: absolute;
		top: 20px;
		right: 0;
		bottom: 0;
		left: 0;
	}
    .recipe h1 a {
        height: 62px;
		width: 241px;
    }
}
@media screen and (max-width: 600px) {
	header {
		height: 80px;
	}
	h1 a {
		max-width: 68%;
		height: 50px;
        position: absolute;
		top: 14px;
		right: 0;
		bottom: 0;
		left: 0;
	}
    .recipe h1 a {
        height: 50px;
		max-width: 60%;
    }
}
/* MAIN MENU */
header nav dl {
	height: 58px;
	width: 100%;
	position: absolute;
	top: 232px;
	left: 0px;
	display: flex;
	justify-content: space-between;
}
header nav dl dt {
	display: none;
}
header nav dl dd {
	height: 58px;
}
#mm01,#mm01 a {
	width: 98px;
}
#mm02,#mm02 a {
	width: 98px;
}
#mm03,#mm03 a {
	width: 96px;
}
#mm04,#mm04 a {
	width: 132px;
}
#mm05,#mm05 a {
	width: 124px;
}
#mm06,#mm06 a {
	width: 118px;
}
#mm07,#mm07 a {
	width: 86px;
}
#mm08,#mm08 a {
	width: 100px;
}
#mm09,#mm09 a {
	width: 106px;
}
#mm10,#mm10 a {
	width: 84px;
}
#mm11,#mm11 a {
	width: 98px;
}
#mm12,#mm12 a {
	width: 78px;
}
header nav dl a {
	height: 54px;
	margin: 0 auto;
	padding-top: 10px;
	display: block;
	color: #ffffff;
	font-size: 18px;
	line-height: 14px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	position: relative;
	border-radius: 2.5px;
	transition: background .3s;
}
header nav dl a span {
	color: #204676;
	font-size: 13px;
	line-height: 18px;
	transition: color .3s;
}
header nav dl a:hover,header nav dl a:focus,header nav dl a:active {
	background: rgba(0,0,0,0.45);
}
header nav dl a:hover > span,header nav dl a:focus > span,header nav dl a:active > span {
	color: #8bcbfe;
}
header .sm01 a::before, header .sm02 a::before, header .sm02 a::before, header .sm04 a::before, header .sm05 a::before{
	display: none;
}
.mm-hidden01 {
	display: none;	
}
@media screen and (max-width: 1272px) {
	header nav dl {
		margin: auto;
		position: absolute;
		top: 228px;
		left: 0;
		bottom: 0;
		right: 0;
	}
	#mm01,#mm01 a {
		width: 82px;
	}
	#mm02,#mm02 a {
		width: 82px;
	}
	#mm03,#mm03 a {
		width: 74px;
	}
	#mm04,#mm04 a {
		width: 112px;
	}
	#mm05,#mm05 a {
		width: 104px;
	}
	#mm06,#mm06 a {
		width: 98px;
	}
	#mm07,#mm07 a {
		width: 71px;
	}
	#mm08,#mm08 a {
		width: 84px;
	}
	#mm09,#mm09 a {
		width: 90px;
	}
	#mm10,#mm10 a {
		width: 68px;
	}
	#mm11,#mm11 a {
		width: 74px;
	}
	#mm12,#mm12 a {
		width: 61px;
	}
	header nav dl a {
        height: 54px;
		margin: 0 auto;
		padding-top: 10px;
		display: block;
		color: #ffffff;
		font-size: 16px;
		line-height: 14px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		position: relative;
		border-radius: 2.5px;
		transition: background .3s;
	}
	header nav dl a span {
		color: #204676;
		font-size: 11px;
		line-height: 18px;
		transition: color .3s;
	}
}
/* DRAWER MENU */
@media screen and (min-width: 1000px) {
   	.btndm {
		height: 76px;
		width: 76px;
        background: rgba(255,255,255,0.9);
        border-radius: 50%;
		position: absolute;
		top: 54px;
		right: 12px;
		cursor: pointer;
		z-index: 100;
	}
	.btndm,
	.btndm span {
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;
	}
	.btndm span {
		position: absolute;
		left: 19px;
		width: 50%;
		height: 4px;
		background-color: #0046D8;
		border-radius: 4px;
	}
	.btndm span:nth-of-type(1) {
		top: 22px;
	}
	.btndm span:nth-of-type(2) {
		top: 36px;
	}
	.btndm span:nth-of-type(3) {
		bottom: 22px;
	}
    /* BTN Ver03 */
	.menuOpen .btndm span:nth-of-type(2)::after {
		position: absolute;
		top: 0;
		left: 0;
		content: '';
		width: 100%;
		height: 4px;
		background-color: #0046D8;
		border-radius: 4px;
		transition: all .4s;
	}
	.menuOpen .btndm span:nth-of-type(1) {
		transform: translateY(11px) scale(0);
	}
	.menuOpen .btndm span:nth-of-type(2) {
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	.menuOpen .btndm span:nth-of-type(2)::after {
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.menuOpen .btndm span:nth-of-type(3) {
		transform: translateY(-10px) scale(0);
	}
}
@media screen and (max-width: 1000px) {
	.btndm {
		height: 44px;
		width: 54px;
		position: absolute;
		top: 18px;
		left: 0;
		cursor: pointer;
		z-index: 100;
	}
	.btndm,
	.btndm span {
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;
	}
	.btndm span {
		position: absolute;
		left: 12px;
		width: 50%;
		height: 3px;
		background-color: #ffffff;
		border-radius: 3px;
	}
	.btndm span:nth-of-type(1) {
		top: 10px;
	}
	.btndm span:nth-of-type(2) {
		top: 20px;
	}
	.btndm span:nth-of-type(3) {
		bottom: 10px;
	}

/* BTN Ver03 */
	.menuOpen .btndm span:nth-of-type(2)::after {
		position: absolute;
		top: 0;
		left: 0;
		content: '';
		width: 100%;
		height: 3px;
		background-color: #ffffff;
		border-radius: 4px;
		transition: all .4s;
	}
	.menuOpen .btndm span:nth-of-type(1) {
		transform: translateY(11px) scale(0);
	}
	.menuOpen .btndm span:nth-of-type(2) {
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	.menuOpen .btndm span:nth-of-type(2)::after {
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.menuOpen .btndm span:nth-of-type(3) {
		transform: translateY(-10px) scale(0);
	}

/* MENU */
	.overlay {
		display: none;
		background-color: rgba(0,0,0,0.6);
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 50;
		transition: 0.3s;
	}
	.dm {
		width: 260px;
		height: calc(100% - 100px);
		padding: 2px 4px 0 4px;
		background: rgba(13,152,255,0.9);
		overflow: auto;
		position: fixed;
		left: -260px;
		top: 100px;
		z-index: 99;
		transition: -webkit-transform 0.3s ease-out;
		transition: transform 0.3s ease-out;
		-webkit-overflow-scrolling: touch;
	}
	header nav dl {
		height: 100%;
		width: 100%;
		margin: 4px 0 0 0;
		position: static;
		flex-wrap: wrap;
		align-content: flex-start;
	}
	header nav dl dt {
		width: 100%;
		margin: 6px auto 2px auto;
		padding: 1px;
		background: #ffffff;
		display: block;
		color: #0d98ff;
		font-size: 15px;
		line-height: 22px;
		font-weight: bold;
		border-radius: 1px;
		overflow: hidden;
	}
	header nav dl dd {
		width: 100%;
		height: 38px;
		margin: 2px 0;
		padding: 3px;
	}
	header nav dl dd:last-child {
		height: 120px;
	}
	header nav dl dd a {
		height: 36px;
		width: 100%;
		margin: 0;
		padding: 0;
		background: rgba(255,255,255,0.1);
		text-align: left;
		line-height: 35px;
		font-size: 16px;
        font-weight: bold;
		text-indent: 24px;
        letter-spacing: 0.12em;
		border: rgba(0,74,256,0.4) solid 1px;
		border-radius: 2px;
	}
	header nav dl dd.sm-twitter a {
		text-indent: 54px;
		position: relative;
	}
	header nav dl dd.sm-twitter a::after {
		content: '';
		width: 26px;
		height: 100%;
		background: url(../img/icon_twitter_sm.svgz) no-repeat center center;
		background-size: 100% auto;
		position: absolute;
		top: 0;
		left: 24px;
	}
	header nav dl dd.sm-instagram a {
		text-indent: 54px;
		position: relative;
	}
	header nav dl dd.sm-instagram a::after {
		content: '';
		width: 26px;
		height: 100%;
		background: url(../img/icon_instagram_sm.png) no-repeat center center;
		background-size: 100% auto;
		position: absolute;
		top: 0;
		left: 24px;
	}
	.tpsn {
		font-size: 14px;
		letter-spacing: 0.005em;
	}
	header nav dl dd a:hover,header nav dl dd a:focus,header nav dl dd a:active {
		background: rgba(255,255,255,0.1);
	}
	#mm01,#mm02,#mm03,#mm04,#mm05,#mm06,#mm07,#mm08,#mm09,#mm10,#mm11,#mm12 {
		width: 100%;
	}
	#mm01 a,#mm02 a,#mm03 a,#mm04 a,#mm05 a,#mm06 a,#mm07 a,#mm08 a,#mm09 a,#mm10 a,#mm11 a,#mm12 a {
		width: 100%;
	}
	header .sm01 a::before, header .sm02 a::before, header .sm02 a::before, header .sm04 a::before, header .sm05 a::before{
		display: block;
	}
	.mm-hidden01 {
		display: list-item;
	}
}
@media screen and (max-width: 600px) {
	.dm {
		height: calc(100% - 80px);
		top: 80px;
	}
}
/* SIDE MENU */
.sm {
	width: 100%;
	margin: 10px 0;
	padding-bottom: 24px;
}
.sm li {
	height: 36px;
	width: 260px;
	margin: 0 auto;
	overflow: hidden;
}
.sm li a {
	height: 30px;
	background: rgba(255,255,255,0.1);
	display: block;
	text-align: left;
	font-size: 14px;
	letter-spacing: 0.1em;
	color: #ffffff;
	text-indent: 26px;
	font-weight: bold;
	line-height: 28px;
	border: rgba(0,74,256,0.4) solid 1px;
	border-radius: 2px;
	overflow: hidden;
	position: relative;
	transition: background .2s;
}
.sm01 a::before {
	content: "";
	height: 100%;
	width: 10px;
	background: #b1f63b;
	display: block;
	border: #9bde57 solid 1px;
	border-right: none;
	border-radius: 2px 0 0 2px;
	position: absolute;
	left: 0;
	top: 0;
}
.sm02 a::before {
	content: "";
	height: 100%;
	width: 10px;
	background: #ffbf3b;
	display: block;
	border: #fba557 solid 1px;
	border-right: none;
	border-radius: 2px 0 0 2px;
	position: absolute;
	left: 0;
	top: 0;
}
.sm03 a::before {
	content: "";
	height: 100%;
	width: 10px;
	background: #ff9c9c;
	display: block;
	border: #ff8282 solid 1px;
	border-right: none;
	border-radius: 2px 0 0 2px;
	position: absolute;
	left: 0;
	top: 0;
}
.sm04 a::before {
	content: "";
	height: 100%;
	width: 10px;
	background: #f6fa6e;
	display: block;
	border: #e5eb29 solid 1px;
	border-right: none;
	border-radius: 2px 0 0 2px;
	position: absolute;
	left: 0;
	top: 0;
}
.sm05 a::before {
	content: "";
	height: 100%;
	width: 10px;
	background: #877e6f;
	display: block;
	border: #6e685e solid 1px;
	border-right: none;
	border-radius: 2px 0 0 2px;
	position: absolute;
	left: 0;
	top: 0;
}
.sm06 a::before {
	content: "";
	height: 100%;
	width: 10px;
	background: #0ad000;
	display: block;
	border: #05bd00 solid 1px;
	border-right: none;
	border-radius: 2px 0 0 2px;
	position: absolute;
	left: 0;
	top: 0;
}
.sm07 a::before {
	content: "";
	height: 100%;
	width: 10px;
	background: #0aff99;
	display: block;
	border: #0afbb3 solid 1px;
	border-right: none;
	border-radius: 2px 0 0 2px;
	position: absolute;
	left: 0;
	top: 0;
}
.sm li a:hover,.sm li a:focus,.sm li a:active {
	background: rgba(255,255,255,0.2);
	border: rgba(0,74,256,0.6) solid 1px;
}
.sm li.sm-partition {
	height: 40px;
	margin-bottom: 10px;
	border-bottom: rgba(0,74,256,0.5) dashed 1px;
}
.sm li.sm-partition02 {
	height: 48px;
	margin-top: 4px;
	padding-top: 10px;
border-top: rgba(0,74,256,0.5) dashed 1px;
}
@media screen and (max-width: 1000px) {
	.sm {
		display: none;
	}
}
/* WRAP */
.wrap {
	width: 1272px;
	margin: 0 auto;
	overflow: hidden;
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: wrap;
}
main {
	width: 100%;
	padding: 4px 2px;
}
@media screen and (max-width: 1272px) {
	.wrap {
		width: 1000px;
	}
}
@media screen and (max-width: 1000px) {
	.wrap {
		width: 100%;
	}
}
/* CONTENT HEAD */
.ch {
	height: 52px;
	width: 100%;
	margin: 0 auto 18px auto;
    padding: 0 0 24px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
	text-align: center;
    font-size: 34px;
    font-weight: bold;
    color: #ffffff;
    letter-spacing: 0.05em;
    font-family: "wf02";
}
.pdata .ch {
    height: auto;
    padding: 0 0 14px 0;
    color: #37394f;
    line-height: 1.4em;
}
@media screen and (max-width: 1000px) {
	.ch {
		margin: 0 auto;
        font-size: 26px;
	}
    .pdata .ch {
        font-size: 22px;
    }
}
@media screen and (max-width: 600px) {
	.ch {
        height: 40px;
		margin: 0 auto;
        font-size: 20px;
	}
    .pdata .ch {
        font-size: 20px;
    }
}
/* REPERTORY-DATA */
.wrap-rdata {
    width: 100%;
    padding: 0 0 14px 0;
	overflow: hidden;
}
.rb {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}
.rb > li {
	width : 50%;
	margin: 0 0 12px 0;
	padding: 0 2px;
}
.rb a {
    font-size: 18px;
    color: #ffffff;
    letter-spacing: 0.05em;
}
.rbwrap {
	width: 100%;
	margin: 0 auto;
	padding: 6px;
	background: rgba(0,153,253,0.75);
    display: grid;
    grid-template-columns: 240px calc(100% - 240px); /* autoを指定するとSwiperに不具合 */
	grid-template-rows: auto 1fr;
	text-align: left;
	border: rgba(255,255,255,0.3) double 3px;
	border-radius: 4px;
	position: relative;
}
.rb li h3 {
	width: 100%;
	padding: 8px 4px 2px 12px;
	grid-column: 2 / 3;
	grid-row: 1 / 2;
}
.repertory-img {
    grid-column: 1 / 2;
	grid-row: 1 / 2;
}
.repertory-img img {
    max-width: 240px;
    vertical-align: top;
}
.rb-nohit {
	width: 100%;
	padding: 100px 0;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
}
@media screen and (max-width: 1000px) {
	.rb > li {
		width: 100%;
		margin: 0 0 1px 0;
		padding: 1px;
	}
	.rb li h3 a {
		font-size: 14px;
	}
}
@media screen and (max-width: 600px) {
	.rb > li {
		width: 100%;
		margin: 0 0 1px 0;
		padding: 1px;
	}
	.rbwrap {
        padding: 4px;
        display: grid;
        grid-template-columns: 190px calc(100% - 190px); /* autoを指定するとSwiperに不具合 */
        grid-template-rows: auto 1fr;
		border: rgba(255,255,255,0.3) solid 1px;
	}
	.rb li h3 {
		padding: 2px 1px 2px 4px;
	}
	.rb li h3 a {
		font-size: 13px;
	}
    .repertory-img img {
        max-width: 100%;
    }
}
/* QUIZ-DATA TITLE */
.qb-title-wrap {
	width: 100%;
	padding: 0 0 30px 0;
	background: rgba(0,153,253,0.75);
	border: rgba(255,255,255,0.3) double 3px;
	border-radius: 2px;
	position: relative;
}
.qb-title-wrap h3 {
	width: 100%;
	padding: 28px 0 48px 0;
	text-align: center;
	font-size: 24px;
	color: #ffffff;
	font-weight: bold;
	text-shadow: #0180fd 0 0 2px;
}
.qb-title {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}
.qb-title li {
	width : 100%;
	margin: 0 0 12px 0;
	padding: 0 18px;
    text-align: left;
    font-size: 18px;
}
/* REPERTORY-DATA DETAILS */
.rb-detail-wrap {
	width: 100%;
	padding: 0 0 30px 0;
	background: rgba(0,153,253,0.75);
	border: rgba(255,255,255,0.3) double 3px;
	border-radius: 2px;
	position: relative;
}
.rb-detail-wrap h3 {
	width: 100%;
	padding: 28px 0 24px 0;
	text-align: center;
	font-size: 24px;
	color: #ffffff;
	font-weight: bold;
    line-height: 1.8em;
	text-shadow: #0180fd 0 0 2px;
}
.rb-detail {
	width: 100%;
	padding: 18px 0 12px 0;
	text-align: left;
	color: #ffffff;
	line-height: 1.8em;
    letter-spacing: 0.2em;
	display: flex;
	flex-wrap: wrap;
}
.rb-detail dt {
	height: 64px;
	width: 180px;
}
.rb-detail dt span {
	width: 100px;
	margin: 0 auto;
	background: rgba(0,0,0,0.2);
	display: block;
	text-align: center;
	font-size: 16px;
    letter-spacing: 0.1em;
    line-height: 28px;
    border-radius: 25px;
}
.rb-detail dd {
	width: calc(100% - 180px);
	padding: 2px 16px 21px 0;
	font-size: 17px;
    letter-spacing: 0.2em;
    word-break: break-all;
}
.wrap-prvideo {
	width: 100%;
	margin-top: 24px;
}
.wrap-prvideo video {
	max-height: 100vh;
	max-width: 100%;
	background-color: #000000;
}
@media screen and (max-width: 1272px) {

}
@media screen and (max-width: 1000px) {
	.rb-detail dt {
		height: 44px;
		width: 140px;
	}
	.rb-detail dt span {
		width: 100px;
		font-size: 15px;
		border-radius: 14px;
	}
	.rb-detail dd {
		width: calc(100% - 140px);
		font-size: 16px;
	}
}
@media screen and (max-width: 600px) {
	.rb-detail-wrap h3 {
		padding: 14px 0 12px 0;
		font-size: 17px;
	}
	.rb-detail dt {
		height: 42px;
		width: 94px;
	}
	.rb-detail dt span {
		width: 78px;
		font-size: 14px;
		border-radius: 14px;
	}
	.rb-detail dd {
		width: calc(100% - 94px);
		font-size: 16px;
	}
    .rb-detail dd img {
        max-width: 100%;
    }
}
/* QUIZ-DATA */
.btn-back {
	padding-bottom: 48px;
}
.btn-back a {
	height: 44px;
	padding: 0 48px;
	background-color: rgba(26,100,200,0.8);
    display: inline-block;
	color: #ffffff;
	font-size: 20px;
    font-weight: bold;
	letter-spacing: 0.1em;
    line-height: 46px;
	border-radius: 4px;
	border: none;
	cursor: pointer;
	transition: all .4s;
}
.btn-back a:hover {
	background-color: rgba(9,64,139,0.9);
}
.q-count {
    height: 30px;
	padding: 1px 12px 1px 12px;
	background: #0d98ff;
	display: inline-block;
	text-align: center;
	color: #ffffff;
	font-size: 21px;
	line-height: 30px;
	border-radius: 15px;
    font-family: initial;
}
.wrap-qdata {
    width: 100%;
    padding: 0 0 14px 0;
	overflow: hidden;
}
.qb {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}
.qb > li {
	width : 50%;
	margin: 0 0 12px 0;
	padding: 0 2px;
}
.qb a {
    font-size: 18px;
    color: #ffffff;
    letter-spacing: 0.05em;
}
.qbwrap {
	width: 100%;
	margin: 0 auto;
	padding: 4px;
	background: rgba(0,153,253,0.75);
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 240px auto;
	text-align: left;
	border: rgba(255,255,255,0.3) double 3px;
	border-radius: 4px;
	position: relative;
}
.qb li h3 {
	padding: 8px 4px 2px 12px;
    grid-row: 1 / 2;
    grid-column: 2 / 3;
}
.qb li .qb-img  {
	max-width: 240px;
    grid-row: 1 / 2;
    grid-column: 1 / 2;
}
.qb li .qb-img img {
	width: 100%;
	opacity: 0;
	-webkit-transition: opacity 1.2s;
	transition: opacity 1.2s;
    vertical-align: top;
}
.qb li .qb-img img.lazyloaded {
	opacity: 1;
}
.qb-nohit {
	width: 100%;
	padding: 100px 0;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
}
@media screen and (max-width: 1272px) {

}
@media screen and (max-width: 1000px) {
    .q-count {
        height: 26px;
        padding: 1px 8px 1px 8px;
        font-size: 18px;
        line-height: 26px;
        border-radius: 14px;
    }
    .qbwrap {
        display: grid;
        grid-template-rows: auto;
        grid-template-columns: 60% auto;
    }
	.qb li h3 a {
		font-size: 14px;
	}
}
@media screen and (max-width: 600px) {
    .q-count {
        height: 24px;
        padding: 1px 8px 1px 8px;
        font-size: 15px;
        line-height: 23px;
        border-radius: 12px;
    }
	.qb > li {
		width: 100%;
		margin: 0 0 1px 0;
		padding: 1px;
	}
	.qbwrap {
		grid-template-columns: auto 60%;
		border: rgba(255,255,255,0.3) solid 1px;
	}
	.qb li h3 {
		padding: 2px 1px 2px 4px;
        grid-row: 1 / 2;
        grid-column: 1 / 2;
	}
	.qb li h3 a {
		font-size: 13px;
	}
    .qb li .qb-img  {
        max-width: none;
        grid-row: 1 / 2;
        grid-column: 2 / 3;
    }
}
/* QUIZ-DATA DETAILS */
.qb-detail-wrap {
	width: 100%;
	padding: 0 0 30px 0;
	background: rgba(0,153,253,0.75);
	border: rgba(255,255,255,0.3) double 3px;
	border-radius: 2px;
	position: relative;
}
.qb-detail-wrap h3 {
	width: 100%;
	padding: 28px 0 24px 0;
	text-align: center;
	font-size: 24px;
	color: #ffffff;
	font-weight: bold;
	text-shadow: #0180fd 0 0 2px;
}
.qb-detail {
	width: 100%;
	padding: 18px 0 12px 0;
	text-align: left;
	color: #ffffff;
	line-height: 1.8em;
    letter-spacing: 0.2em;
	display: flex;
	flex-wrap: wrap;
}
.qb-detail dt {
	height: 64px;
	width: 180px;
}
.qb-detail dt span {
	width: 100px;
	margin: 0 auto;
	background: rgba(0,0,0,0.2);
	display: block;
	text-align: center;
	font-size: 16px;
    letter-spacing: 0.1em;
    line-height: 28px;
    border-radius: 25px;
}
.qb-detail dd {
	width: calc(100% - 180px);
	padding: 2px 16px 21px 0;
	font-size: 17px;
    letter-spacing: 0.2em;
    word-break: break-all;
}
.qb-detail-com {
	padding: 0 0 28px 0;
}
.qb-detail-com p {
	width: calc(100% - 90px);
	margin: 0 auto;
	padding: 10px 6px 10px 12px;
	background: rgba(255,255,255,0.1);
	text-align: left;
	font-size: 16px;
	line-height: 1.6em;
	overflow: auto;
	color: #ffffff;
	border: dotted rgba(255,255,255,0.5) 1px;
	border-radius: 2px;
}
@media screen and (max-width: 1272px) {

}
@media screen and (max-width: 1000px) {
	.qb-detail dt {
		height: 44px;
		width: 140px;
	}
	.qb-detail dt span {
		width: 100px;
		font-size: 15px;
		border-radius: 14px;
	}
	.qb-detail dd {
		width: calc(100% - 140px);
		font-size: 16px;
	}
	.qb-detail-com p {
		width: calc(100% - 60px);
	}
}
@media screen and (max-width: 600px) {
	.qb-detail-wrap h3 {
		padding: 14px 0 12px 0;
		font-size: 17px;
	}
	.qb-detail dt {
		height: 42px;
		width: 94px;
	}
	.qb-detail dt span {
		width: 78px;
		font-size: 14px;
		border-radius: 14px;
	}
	.qb-detail dd {
		width: calc(100% - 94px);
		font-size: 16px;
	}
    .qb-detail dd img {
	max-width: 100%;
}
	.qb-detail-com p {
		width: calc(100% - 20px);
		padding: 8px 4px 8px 10px;
	}
}
/* PDATA */
.form-pdata select {
    height: 36px;
    width: 100px;
    margin-top: 22px;
}
.form-pdata-date {
    padding-top: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 6px;
}
.form-pdata-date input {
    height: 36px;
    width: 120px;
}
.form-pdata-date button {
	height: 36px;
	padding: 0 14px;
    background: #ffffff;
	font-size: 16px;
	letter-spacing: 0.1em;
    border: 1px solid #cccccc;
    border-radius: 2px;
	cursor: pointer;
}
.mes-pdata-date {
    height: 420px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #37394f;
    font-size: 20px;
    font-weight: bold;
}
.swiper.pdata.pdata-date .swiper-slide h3 {
    padding-bottom: 12px;
    font-size: 20px;
    font-family: "wf02";
}
/* TAB MENU 01 */
.tabmenu01 {
	height: 36px;
	display: flex;
}
.tabmenu01 li {
	height: 36px;
	width: 50%;
}
.tabmenu01 li a {
	height: 36px;
	background-color:rgba(255,255,255,0.7);
	display: block;
	text-align: center;
	color: #999999;
	line-height: 39px;
	font-size: 19px;
	border-radius: 10px 10px 0 0;
	box-shadow: 0 1px 0 0 rgba(122,190,215,0.2) inset;
	border-right: 1px solid rgba(122,190,215,0.2);
	border-left: 1px solid rgba(122,190,215,0.2);
}
.sbox {
	clear: both;
	overflow: hidden;
}
.tabbox {
	padding-top: 32px;
	border-top: 6px solid #7abed7;
	display: none;
	clear: both;
	overflow: hidden;
}
.tabmenu01 li.active a {
	background: #7abed7;
	color: #ffffff;
	box-shadow: none;
	border-bottom: none;
}
@media screen and (max-width: 600px) {
	.tabmenu01 li a {
		font-size: 16px;
		line-height: 40px;
		letter-spacing: 0.005em;
	}
}
/* TAB MENU 02 */
.tabmenu02 {
	height: 42px;
	margin-bottom: 32px;
	border-bottom: 6px solid #7abed7;
	display: flex;
}
.tabmenu02 li {
	height: 36px;
	width: 50%;
}
.tabmenu02 li a {
	height: 36px;
	background-color:rgba(255,255,255,0.7);
	display: block;
	text-align: center;
	color: #999999;
	line-height: 39px;
	font-size: 19px;
	border-radius: 10px 10px 0 0;
	box-shadow: 0 1px 0 0 rgba(122,190,215,0.2) inset;
	border-right: 1px solid rgba(122,190,215,0.2);
	border-left: 1px solid rgba(122,190,215,0.2);
}
.tabmenu02 li.active a {
	background: #7abed7;
	color: #ffffff;
	box-shadow: none;
	border-bottom: none;
}
@media screen and (max-width: 600px) {
	.tabmenu02 li a {
		font-size: 16px;
		line-height: 40px;
		letter-spacing: 0.005em;
	}
}
/* LINKS */
.dl01 {
	width: 100%;
	padding: 3px 2% 28px 2%;
	clear: both;
	overflow: auto;
}
.dl01 dt {
	width: 100%;
	padding: 3px 0 2px 50px;
	background: rgba(233,170,201,0.8) url(../img/sec01.png) no-repeat 12px 2px;
	background-size: 24px;
	display: inline-block;
	vertical-align: middle;
	text-align: left;
	color: #ffffff;
	font-size: 16px;
	font-weight: normal;
	border-radius: 3px;
}
.dl01 dd {
	width: 100%;
	padding: 18px 2% 18px 3%;
	text-align: left;
	letter-spacing: 0.05em;
	font-size: 15px;
}
.dl01 dd img {
	max-width: 100%;
	height: auto;
}
@media screen and (max-width: 600px) {
	.dl01 dt {
		background: rgba(233,170,201,0.8) url(../img/sec01.png) no-repeat 6px 2px;
		background-size: 24px;
		font-size: 15px;
		padding: 3px 0 2px 36px;
	}
	.dl01 dd {
		padding: 8px 1% 8px 2%;
		letter-spacing: 0.01em;
	}
}
/* SEARCH */
.wrap-search-q {
    width: 70%;
    margin: 0 auto;
}
.wrap-search-q fieldset {
    padding-bottom: 36px;
}
.search-f-q {
	width: 90%;
}
.search-menu {
    text-align: left;
}
.search-menu dt {
    margin-bottom: 6px;
    padding-left: 12px;
    font-size: 18px;
    font-weight: bold; 
    color: #ffffff;
    border-left: double 6px #0046D8;
}
.search-menu dd {
    padding-bottom: 8px;
}
.select-cate-q {
    width: 160px;
}
.select-img-q {
    width: 160px;
}
.select-target-q {
    width: 160px;
}
#inputsearch-q {
	height: 30px;
	width: -webkit-calc(100% - 48px);
	width: calc(100% - 48px);
	padding: 0 12px 0 22px;
	font-size: 17px;
	color: #555555;
	letter-spacing: 1px;
	border-radius: 15px 0 0 15px;
	outline: none;
}
.hsbtn-q {
	height: 30px;
	width: 48px;
	background: rgba(26,100,200,0.8) url(../img/icon_search.svgz) no-repeat 13px 6px;
	-moz-background-size: 17px auto;
	-webkit-background-size: 17px auto;
	background-size: 17px auto;
	border-radius: 0 15px 15px 0;
	border: none;
	outline: none;
	white-space: nowrap;
	text-indent: 150%;
	overflow: hidden;
	cursor: pointer;
    transition: background-color .4s;
}
.hsbtn-q:hover {
	background-color: rgba(9,64,139,0.9);
}
#nohit {
	margin: 100px auto;
	line-height: 1.6em;
	font-size: 16px;
	clear: both;
}
@media screen and (max-width: 1000px) {
    .wrap-search-q {
        width: 90%;
    }
	.search-f-q {
        width: 88%;
	}
	#inputsearch-q {
		padding: 0 10px 0 16px;
		font-size: 16px;
		border-right: none;
	}
}
@media screen and (max-width: 600px) {
    .search-f-q {
        width: 100%;
	}
	#inputsearch-q {
		padding: 0 10px 0 16px;
		font-size: 16px;
		border-right: none;
	}
}
/* SEARCH */
.wrap-search {
    width: 70%;
    margin: 0 auto;
    display: flex;
}
.search-f {
	height: 84px;
	width: 90%;
}
#inputsearch {
	height: 30px;
	width: -webkit-calc(100% - 48px);
	width: calc(100% - 48px);
	padding: 0 12px 0 22px;
	float: left;
	font-size: 17px;
	color: #555555;
	letter-spacing: 1px;
	border-radius: 15px 0 0 15px;
	outline: none;
}
.hsbtn {
	height: 30px;
	width: 48px;
	background: rgba(26,100,200,0.8) url(../img/icon_search.svgz) no-repeat 13px 6px;
	-moz-background-size: 17px auto;
	-webkit-background-size: 17px auto;
	background-size: 17px auto;
	float: left;
	border-radius: 0 15px 15px 0;
	border: none;
	outline: none;
	white-space: nowrap;
	text-indent: 150%;
	overflow: hidden;
	cursor: pointer;
    transition: background-color .4s;
}
.hsbtn:hover {
	background-color: rgba(9,64,139,0.9);
}
#nohit {
	margin: 100px auto;
	line-height: 1.6em;
	font-size: 16px;
	clear: both;
}
.search-count {
    width: 10%;
}
.search-count span {
    height: 30px;
    margin-top: 0 auto;
	padding: 2px 18px 2px 18px;
	background: #0d98ff;
	display: inline-block;
	text-align: center;
	color: #ffffff;
	font-size: 22px;
	line-height: 30px;
	border-radius: 15px;
}
@media screen and (max-width: 1000px) {
    .wrap-search {
        width: 90%;
    }
	.search-f {
        width: 88%;
		height: 68px;
	}
    .search-count {
        width: 12%;
    }
	#inputsearch {
		padding: 0 10px 0 16px;
		font-size: 16px;
		border-right: none;
	}
}
@media screen and (max-width: 600px) {
    .wrap-search {
        width: 94%;
        flex-wrap: wrap;
    }
    .search-f {
        height: 44px;
        width: 100%;
	}
    .search-count {
        height: 44px;
        width: 100%;
    }
    .search-count span {
	    font-size: 20px;
    }
	#inputsearch {
		padding: 0 10px 0 16px;
		font-size: 16px;
		border-right: none;
	}
}
/* LIST */
.list01 {
	width: 100%;
}
.list01 dt {
	width: 100%;
	padding: 3px 4px 2px 14px;
	background: -moz-linear-gradient(left,  rgba(23,192,248,1) 0%, rgba(23,192,248,0.8) 100%);
	background: -webkit-linear-gradient(left,  rgba(23,192,248,1) 0%,rgba(23,192,248,0.8) 100%);
	background: linear-gradient(to right,  rgba(23,192,248,1) 0%,rgba(23,192,248,0.8) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#17c0f8', endColorstr='#cc17c0f8',GradientType=1 );
	display: inline-block;
	vertical-align: middle;
	text-align: left;
	color: #ffffff;
	font-size: 16px;
	font-weight: normal;
	text-shadow: #0eabdf 0 0 2px,#0eabdf 0 0 3px;
	border-radius: 3px;
}
.list01 dd {
	width: 100%;
	padding: 12px 0 24px 20px;
	text-align: left;
}
.list02 {
	width: 100%;
}
.list02 dl {
	padding: 0;
}
.list02 dt {
	width: 100%;
	padding: 2px 12px 1px 12px;
	background: #17c0f8;
	display: inline;
	text-align: left;
	color: #ffffff;
	font-size: 16px;
	font-weight: normal;
	text-shadow: #0eabdf 0 0 2px,#0eabdf 0 0 3px;
}
.list02 dd {
	width: 100%;
	padding: 4px 0 8px 0;
	text-align: left;
}
.list03 {
	width: 100%;
}
.list03 dt {
	width: 100%;
	padding: 3px 4px 2px 14px;
	background: -moz-linear-gradient(left, rgba(10,83,248,1) 0%, rgba(10,83,248,0.75) 100%);
	background: -webkit-linear-gradient(left, rgba(10,83,248,1) 0%,rgba(10,83,248,0.75) 100%);
	background: linear-gradient(to right, rgba(10,83,248,1) 0%,rgba(10,83,248,0.75) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a53f8', endColorstr='#bf0a53f8',GradientType=1 );
	display: inline-block;
	vertical-align: middle;
	text-align: left;
	color: #ffffff;
	font-size: 16px;
	font-weight: normal;

	border-radius: 3px;
}
.list03 dd {
	width: 100%;
	padding: 12px 0 24px 20px;
	text-align: left;
}
.tab01 {
	border-collapse: collapse;
	border-collapse: separate;
	border-spacing: 2px;
}
.tab01 th,.tab01 th {
	text-align: center;
	font-size: 14px;
}
.tab01 thead th {
	text-align: center;
}
.tab01 .tabh01 {
	width: 178px;
}
.tab01 .tabh02 {
	width: 132px;
}
.tab01 td {
	padding: 6px 0 2px 0;
	letter-spacing: 0.03em;
	border-bottom: dotted #80ccfe 1px;
}
.tab01 .tb01 {
	text-align: right;
}
@media screen and (max-width: 600px) {
	.list01 dd {
		padding: 8px 0 16px 6px;
	}
	.list03 dd {
		padding: 8px 0 16px 6px;
	}
}
/* TABLE02 */
.tab02 {
	width: 100%;
	max-width: 480px;
	margin: 8px 0 24px 0;
	border-collapse: collapse;
	border-collapse: separate;
	border-spacing: 2px;
	border: 1px solid rgba(255,255,255,0.6);
	border-radius: 4px;
}
.tab02 th {
	width: 100px;
	padding: 6px 0 6px 12px;
	text-align: left;
}
.tab02 td {
	padding: 6px 0 6px 0;
	text-align: left;
}
@media screen and (max-width: 600px) {
	.tab02 {
		letter-spacing: 0.05em;
	}
	.tab02 th {
		width: 84px;
		padding: 4px 0 4px 4px;
	}
	.tab02 td {
		padding: 4px 0 4px 0;
	}
}
/* TABLE03 */
.tab03 {
    width: 90%;
	max-width: 600px;
	margin: 0 auto 48px auto;
	border-top: 1px solid #c1c1c1;
	border-left: 1px solid #c1c1c1;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 2px;
	clear: both;
	table-layout: fixed;
}
.tab03 th,.tab03 td {
	padding: 4px;
	background: #ffffff;
	font-size: 16px;
	border-right: 1px solid #c1c1c1;
	border-bottom: 1px solid #c1c1c1;
}
.tab03 thead th {
	background-color: rgba(75, 192, 192, 1);
	color: #ffffff;
	font-weight: normal;
}
.tab03 tbody td {
	background: #ffffff;
    color: #37394f;
}
.tab03 thead .sta{
	color: #d7ebf8;
}
.tab03 thead .sun{
	color: #fad7ea;
}
.tab03 tbody .sta{
	background: #d7ebf8;
}
.tab03 tbody .sun{
	background: #fad7ea;
}
/* TH */
th {
	font-weight: normal;
}
.th-h01 {
	width: 40px;
}
.th-h02 {
	width: 120px;
}
.th-h03 {
	width: 80px;
}
.th-h04 {
	width: 220px;
}
.th-h05 {
	width: 100px;
}
.th-h06 {
	width: 60px;
}
.th-h07 {
	width: 90px;
}
.th-h08 {
	width: 30px;
}
.tab-h01 {
	height: 42px;
	vertical-align: bottom;
}
.tab03 .left {
	padding: 6px 4px 6px 8px;
	text-align: left;
}
.tab03 .right {
	padding: 6px 8px 6px 8px;
	text-align: right;
}
.tab03 .lefttop {
	padding: 6px 4px 6px 8px;
	text-align: left;
	vertical-align: top;
}
/* FORM-01 */
.from-h-exp {
	width: 98%;
	margin: 18px auto 0 auto;
	padding: 8px 24px;
	background-color: rgba(255,255,255,0.6);
	text-align: left;
	line-height: 1.8em;
	border-radius: 3px;
}
.form02 {
	width: 100%;
	padding: 12px 2% 78px 2%; 
	background: rgba(0,153,253,0.9);
	border: rgba(255,255,255,0.3) double 3px;
	border-radius: 2px;
	clear: both;
}
.form02 option {
	padding: 0 24px 0 0;
}
.form02 dl {
	margin: 0 auto;
	padding: 12px 0 36px 0;
}
.form02 dt {
	width: 100%;
	padding: 3px 4px 2px 14px;
	background: -moz-linear-gradient(left,  rgba(23,192,248,1) 0%, rgba(23,192,248,0.8) 100%);
	background: -webkit-linear-gradient(left,  rgba(23,192,248,1) 0%,rgba(23,192,248,0.8) 100%);
	background: linear-gradient(to right,  rgba(23,192,248,1) 0%,rgba(23,192,248,0.8) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#17c0f8', endColorstr='#cc17c0f8',GradientType=1 );
	display: inline-block;
	vertical-align: middle;
	text-align: left;
	color: #ffffff;
	font-size: 16px;
	font-weight: normal;
	text-shadow: #0eabdf 0 0 2px,#0eabdf 0 0 3px;
	border-radius: 3px;
}
.form02 dd {
	width: 100%;
	padding: 12px 0 24px 20px;
	text-align: left;
}
.ulcb li {
	padding: 0 0 8px 2px;
}
.question {
	font-size: 20px;
	font-weight: bold;
}
.mandatory {
	width: 60px;
	background-color: #0e5fc4;
	color: #ffffff;
	font-size: 13px;
	border-radius: 2px;
	text-shadow: none;
}
.optional {
	width: 60px;
	background-color: #ffffff;
	color: #0e5fc4;
	font-size: 13px;
	border-radius: 2px;
	text-shadow: none;
}
.f-line {
	-moz-box-flex: 1;
	background-color: rgba(255,255,255,0.95);
	border: 1px solid #ffffff;
	border-radius: 2px;
}
.f-line:focus {
	outline: none;
}
.f-line-check {
	-moz-box-flex: 1;
	background-color: rgba(250,242,251,0.95);
	border: 1px solid #ffffff;
	border-radius: 2px;
}
.f-line-check:focus {
	outline: none;
}
#s-check {
	height: 80px;
	text-align: left;
}
#s-check img {
	margin-right: 12px;
	float: left;
}
@media screen and (max-width: 600px) {
	.from-h-exp {
		width: 99%;
		margin: 12px auto 0 auto;
		padding: 4px 12px;
	}
	.form02 {
		padding: 8px 8px 48px 8px; 
	}
	.form02 dl {
		width: 100%;
		padding: 12px 0 24px 0;
	}
	.form02 dd {
		padding: 8px 0 16px 6px;
	}
	.ulcb li {
		padding: 0 0 8px 6px;
	}
	.f-line {
		border: 1px solid #cccccc;
	}
	.f-line-check {
		border: 1px solid #cccccc;
	}
}
/* PAGE NAV */
.pagenav {
	width: 100%;
	margin: 28px 0;
	padding: 10px 10px 5px 10px;
	text-align: center;
	display: flex;
	flex-wrap : wrap;
	justify-content: center;
}
.pagenav li {
	padding: 0 2px 6px 2px;
	display: inline;
	font-size: 14px;
}
.pagenav li a {
	height: 34px;
	padding: 0 14px;
	background: rgba(255,255,255,0.8);
	display: table-cell;
	color: #0d98ff;
	vertical-align: middle;
	border-radius: 17px;
	transition: background .2s,color .2s;
}
.pagenav li a:hover {
	background: rgba(255,255,255,0.9);
}
.pagenav li span {
	height: 34px;
	padding: 0 14px;
	background: rgba(47,72,75,0.4);
	color: #ffffff;
	display: table-cell;
	vertical-align: middle;
	border-radius: 17px;
}
/* PAGE NAV -TOP */
.pagenav-top {
	width: 100%;
	margin: 0 0 10px 0;
	text-align: center;
	display: flex;
	flex-wrap : wrap;
	justify-content: flex-end;
}
.pagenav-top li {
	padding: 0 2px 6px 2px;
	display: inline;
	font-size: 14px;
}
.pagenav-top li a {
	height: 28px;
	padding: 0 14px;
	background: rgba(255,255,255,0.8);
	display: table-cell;
	color: #0d98ff;
	vertical-align: middle;
	border-radius: 14px;
	transition: background .2s,color .2s;
}
.pagenav-top li a:hover {
	background: rgba(255,255,255,0.9);
}
.pagenav-top li span {
	height: 28px;
	padding: 0 14px;
	background: rgba(47,72,75,0.4);
	color: #ffffff;
	display: table-cell;
	vertical-align: middle;
	border-radius: 14px;
}
/* FOOTER */
footer {
	width: 100%;
	height: 200px;
	margin-top: 90px;
	clear: both;
	overflow: hidden;
	position: relative;
	
}
.pagetop {
	position: fixed;
	bottom: 44px;
	right: 44px;
	display: block;
	background-color: rgba(255,255,255,0.95);
	color: #0046D8;
	font-weight: bold;
	font-size: 11px;
	width: 64px;
	height: 64px;
	text-align: center;
	line-height: 22px;
	border-radius: 100vw;
	padding-top: 32px;
	transform: translateY(50px);
    transition: opacity 1s,visibility 1s, transform 1s;
    opacity: 0;
	z-index: 200;
}
.pagetop::before {
	content: "";
	width: 16px;
	height: 16px;
	border-top: 2px solid #0046D8;
	border-right: 2px solid #0046D8;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	position: absolute;
	top: 21px;
	left: 24px;
}
.pagetop.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}
.pagetop:hover {
    opacity: .7;
}
@media screen and (max-width: 1000px) {
	footer {

	}
}
@media screen and (max-width: 600px) {
	footer {
		margin-top: 40px;
	}
	.pagetop {
		display: none !important;
	}
}

/* ERROR */
.error-mes {
	padding: 72px 0;
	font-size: 16px;
}
.error-anc a {
	font-size: 15px;
	color: #FC6;
	font-weight: bold;
}
/* SIZE */
.marb01 {
	margin-bottom: 24px;
}
.marb02 {
	margin-bottom: 6px;
}
.padt01 {
	padding-top: 10px;
}
.padb01 {
	padding-bottom: 6px;
}
.hw01 {
	height: 180px;
	width: 640px;
}
.hw02 {
	height: 100px;
	width: 400px;
}
.hw03 {
	height: 240px;
	width: 640px;
}
.hw04 {
	height: 400px;
	width: 540px;
}
.hw05 {
	height: 300px;
	width: 340px;
}
.hw06 {
	height: 580px;
	width: 530px;
}
.hw07 {
	height: 200px;
	width: 100%;
	max-width: 600px;
}
.w01 {
	width: 640px;
}
.w02 {
	width: 100%;
	max-width: 400px;
}
.w03 {
	width: 200px;
}
.w04 {
	width: 120px;
}
.w05 {
	width: 80px;
}
.w06 {
	width: 60px;
}
.w07 {
	width: 100%;
	max-width: 300px;
}
.h01 {
	height: 120px;
}
/* MESSAGE */
.mes01 {
	margin: 100px auto;
	font-size: 16px;
	line-height: 3em;
	clear: both;
}
@media screen and (max-width: 600px) {
	.mes01 {
		margin: 20px auto 40px auto;
		line-height: 2em;
	}
}

/* MODE */
.mode-sp {
	display: none;	
}
@media screen and (max-width: 1000px) {
	.hidden-tb {
		display: none;
	}
}
@media screen and (max-width: 600px) {
	.mode-pc {
		display: none;
	}
	.mode-sp {
		display: block;
	}
	.hidden-sp {
		display: none;
	}
}