@charset "utf-8";

h2 {
	font-size: 38px;
	color: #fff;
	line-height: 1.4;
}
h3 {
	font-size: 28px;
	color: #fff;
}
h4 {
	font-size: 24px;
	margin-bottom: 10px;
}
h5 {
	font-size: 20px;
}
p {
	color: #555;
}
.center {
	margin: 0 auto;
	text-align: center;
}
.indent {
	padding-top: 10px;
	padding-left: 1.5em;
	font-size: .9em;
	color: #777;
	text-indent: -1.5em;
	text-align: left;
}
a.link-txt {
	text-decoration: none;
	color: #007FFF;
}
a.link-txt.select,a.link-txt:hover {
	text-decoration: underline;
	color: #00A3FF;
}
p img {
    height: 20px;
	vertical-align: sub;
}
dd img, dt img {
    height: 20px;
    width: 20px;
	vertical-align: middle;
}
.title-large {
	margin: 5px 0 40px 115px;
}
.title-middle {
	margin-bottom: 25px;
}
.title-small {
	margin: 40px auto 10px;
	padding: 8px 30px;
	width: 85%;
	border-radius: 30px;
	color: #fff;
	text-align: center;
}
#user-1 .title-small.page-07{
	margin: 0px auto 10px;
}

.page-top {
	position: relative;
	margin-bottom: 40px;
	padding-top: 25px;
	height: 145px;
}
.top-box{
	margin: 0 auto;
	max-width: 640px;
}
.top-box td:first-child {
	padding-right: 15px;
	width: 5%;
}
.top-img {
	width: 86px;
	height: 86px;
}
.top-box h2 {
	text-shadow: 0 -2px rgba(9, 77, 128, 0.2);
}
.text-sub {
	color: rgba(255,255,255,0.95);
	font-size: .9rem;
	text-shadow: 0 -2px rgba(9, 77, 128, 0.1);
	height: 40px;
	vertical-align: middle;display: table-cell;
}

.comment-box, .comment-box-sad {
	position: relative;
	margin: 40px 10px;
	min-height: 120px;
	border-radius: 30px;
	padding: 20px 140px 20px 40px;
}
.comment-box { background: #fff;}
.comment-box-sad { background: #777;}
.comment-box-sad p{ color: #fff;}
.mashiko img {
	position: absolute;
	right: 0%;
	bottom: 0%;
	width: 160px;
	height: 160px;
}
.comment-sad.indent {
	color: #ddd;
	font-size: .9rem;
}
.mashiko-imgR {
	margin: 20px 0 0;
	text-align: right;
}
img.mashiko-01 {
	width: 130px;
	height: 215px;
}
img.mashiko-02 {
	width: 266px;
	height: 220px;
}
img.mashiko-04 {
	margin: 30px 0;
	width: 270px;
	height: 190px;
}
img.mashiko-03 {
	margin-top: 40px;
	width: 340px;
	height: 108px;
}
img.mashiko-05 {
	width: 294px;
	height: 235px;
}
img.mashiko-07 {
	width: 350px;
	height: 278px;
}
img.dog {
	width: 77px;
	height: 62px;
	vertical-align: bottom;
}

.size-half .video{
	width: 332px;
	height: 186px;
}
.v-sppt{

}
.v-not-sppt{
	display:none;
}
.frame {
	padding: 8px;
	background: #fff;
	border-radius: 8px;
}
.size-half {
	width: 332px;
	float: right;
	margin: 0 0 13px 20px;
}
.size-half > iframe{
  width: 332px;
  height: 186px;
  vertical-align:bottom;
}
.size-M {
	width: 400px;
	height: 224px;
	float: right;
	margin: 5px 0 13px;
}
.size-M > iframe{
	width: 400px;
	height: 224px;
	vertical-align:bottom;
}
.size-half > video,.size-half > img{
  width: 332px;
  height: 186px;
  vertical-align:bottom;
}
.size-M > video,.size-M > img{
  width: 400px;
  height: 224px;
  vertical-align:bottom;
}

.frame-box {
	position: relative;
	margin: 10px 0 40px;
	padding: 20px;
	border-radius: 16px;
	background: rgba(255,255,255,0.9);
}
.icon-flag {
	position: absolute;
	top: 0;
	left: 30px;
	width: 80px;
	height: 80px;
	box-shadow: rgba(0,0,0,0.1) 0 2px 2px 0;
	border-radius: 0 0 10px 10px;
}
.txt-box {
	margin: 15px 30px;
	text-align: left;
}
.topic-box {
	display: table;
}
.topic-img {
	display: table-cell;
	vertical-align: top;
}
.topic-txt {
	display: table-cell;
	width: 80%;
	padding-left: 25px;
}
.circle-icon {
	position: relative;
	height: 110px;
	width: 110px;
	background: #fff;
	border: 18px solid #ccc;
	border-radius: 50%;
}
.circle-icon img {
	position: absolute;
	top: 5px;
	left: 5px;
	width: 100px;
	height: 100px;
}
.margin-space {
	margin-top: 80px;
}

.btn-link img, .btn-link.select img {
	height: 20px;
	vertical-align: sub;
}
.btn-link img:first-child, .btn-link.select img:first-child { margin-right: 8px;}
.btn-link {
	display: inline-block;
	width: 180px;
    margin: 2px 0;
    padding: 2px 0 7px;
	border-radius: 10px;
	text-align: center;
	background: #eee;
	box-shadow: rgba(0,0,0,0.12) 0 -4px 0 0 inset,rgba(0,0,0,0.1) 0 2px 2px 0;
	color: #888;
}
.btn-link.select{
	margin: 4px 0 0;
	padding: 6px 0 3px;
	background: #ccc;
	color: #666;
	box-shadow: rgba(0,0,0,0.1) 0 3px 1px 0 inset,rgba(0,0,0,0) 0 0 0 0;
}
.modal_window>span>a{
	display: block;
	width: 180px;
	margin: 20px auto 0px;
}

.cycle-space {
	display: table;
	width: 100%;
	margin: 40px auto;
}
.cycle-space li {
	display: table-row;
}
.cycle-space dl:nth-child(odd) {
	display: table-cell;
	width: 30%;
}
.cycle-space dl:nth-child(even) {
	display: table-cell;
	width: 5%;
	vertical-align: middle;
}
.cycle-space dd {
	padding: 5px 0;
	height: 45px;
	text-align: center;
}
#arrow-01 dt,#arrow-02 dt{
	background-image: url(../img/ico_arrow_right.png);
	background-repeat: no-repeat;
	height: 34px;
	width: 28px;
}
.circle-link {
	position: relative;
	display: block;
	border-radius: 50%;
	height: 120px;
	width: 120px;
	background: #eee;
	border: 15px solid #ccc;
	box-shadow: rgba(0,0,0,0.2) 0 6px 0 0;
	margin: auto;
}
.circle-link.select {
	background: #fff;
	border: 15px solid #FF5B5E;
	box-shadow: rgba(0,0,0,0.2) 0 0 0 0;
}
.circle-link .step-img01, .circle-link .step-img02, .circle-link .step-img03 {
	position: absolute;
	top: 0;
	left: 0;
	height: 120px;
	width: 120px;
}
.circle-link .step-img01 {
	background: url(../img/img_step_01_1.png) no-repeat;
	background-size: 120px 120px;
}
.circle-link .step-img02 {
	background: url(../img/img_step_02_1.png) no-repeat;
	background-size: 120px 120px;
}
.circle-link .step-img03 {
	background: url(../img/img_step_03_1.png) no-repeat;
	background-size: 120px 120px;
}
.circle-link.select .step-img01{
	background: url(../img/img_step_01_2.png) no-repeat;
	background-size: 120px 120px;
}
.circle-link.select .step-img02 {
	background: url(../img/img_step_02_2.png) no-repeat;
	background-size: 120px 120px;
}
.circle-link.select .step-img03 {
	background: url(../img/img_step_03_2.png) no-repeat;
	background-size: 120px 120px;
}
p.point{
	display: inline-block;
	margin-right: 8px;
	border-radius: 50%;
	height: 25px;
	width: 25px;
	background: #f7373b;
	background: -webkit-gradient(linear, center bottom, center top, from(#f7373b), to(#FF5154));
	color: #fff;
}
.point.icon01{
	background: #FF5154 url(../img/icon_flag_1.png) no-repeat;
	background-size: 25px 25px;
}
.point.icon02{
	background: #FF5154 url(../img/icon_flag_2.png) no-repeat;
	background-size: 25px 25px;
}
.point.icon03{
	background: #FF5154 url(../img/icon_flag_3.png) no-repeat;
	background-size: 25px 25px;
}
p.point+p {
	display: inline;
    vertical-align: super;
    line-height: 0.2;

}
.step-arrow{
	margin: 10px 0 40px;
}
.icon01 { background: #FF5154 url(../img/icon_flag_1.png) no-repeat;}
.icon02 { background: #FF5154 url(../img/icon_flag_2.png) no-repeat;}
.icon03 { background: #FF5154 url(../img/icon_flag_3.png) no-repeat;}

.tips-box {
	padding: 35px 10px 40px;
	overflow: hidden;
}

.btn-space-soft {
	width: 100%;
	margin: 30px auto;
	border-spacing: 10px 0;
}
.btn-space-soft li {
	display: table-cell;
	width: 25%;
}
.btn-soft {
	padding: 10px 10px 12px;
	background: #fff;
	box-shadow: rgba(0,0,0,0.1) 0 4px 2px 0, rgba(0,0,0,0.25) 0 -4px 0 0 inset;
	border-radius: 10px;
}
.btn-soft-select,.btn-soft:hover {
	padding: 10px 10px 10px;
	background: #30A3E3;
	border-radius: 12px;
	box-shadow: none;
}
.btn-soft-active {
	padding: 10px 10px 10px;
	background: #63DFFF;
	border-radius: 12px;
	box-shadow: rgba(0,120,250,0.4) 0 0 6px 2px inset;
}
.btn-soft img {
	width: 140px;
	height: 70px;
	border-radius: 3px;
	box-shadow: rgba(0,0,0,0.3) 0 -1px 0 0;
}
.btn-soft-select img,.btn-soft-active img {
	width: 140px;
	height: 70px;
	border-radius: 3px;
	box-shadow: rgba(0,120,250,0.4) 0 0 5px 2px;
}
.balloon-action {
	position: relative;
	margin-bottom: 50px;
	padding: 10px 5px 0;
	height: auto;
	background: rgba(255,255,255,0.5);
	border-radius: 16px;
}
.balloon-action:after {
	content: "";
	position: absolute;
	margin-left: -20px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 0 20px 20px 20px;
	border-color: transparent transparent rgba(255,255,255,0.5) transparent;
}
.arrow-01:after {
	top: -20px;
	left: 13%;
}
.arrow-02:after {
	top: -20px;
	left: 38%;
}
.arrow-03:after {
	top: -20px;
	left: 62%;
}
.arrow-04:after {
	top: -20px;
	left: 87%;
}
.ctrllist {
	position: relative;
}
.ctrllist-space01 {
	position: absolute;
	top: 15px;
	right: 15px;
	z-index: 5;
}
.ctrllist-space02 {
	position: absolute;
	top: 288px;
	right: 15px;
	z-index: 5;
}
.ctrllist-space {
	margin: 10px 0;
}
.btn-space-ctrl {
	padding: 7px 0;
	background: rgba(128,128,128,0.15);
	border-spacing: 10px 0;
	border-radius: 60px;
}
.btn-space-ctrl li {
	display: table-cell;
	width: 60px;
	height: 60px;
}
.no-inlinesvg .btn-control01 {
	background: #FCFCFC url(../img/ico_page_03_controller01_2.png) no-repeat;
	box-shadow: rgba(0,0,0,0.1) 0 6px 4px 0, rgba(150,150,150,.7) 0 -4px 0 0 inset;
	border-radius: 50%;
	width: 60px;
    height: 60px;
}
.no-inlinesvg .btn-control01-select,.btn-control01:hover {
	background: #0093FF url(../img/ico_page_03_controller01.png) no-repeat;
	border-radius: 50%;
	width: 60px;
    height: 60px;
	box-shadow: none;
}
.no-inlinesvg .btn-control01-active {
	background: #0096c8 url(../img/ico_page_03_controller01.png) no-repeat;
	border-radius: 50%;
	box-shadow: rgba(0,0,0,.1) 0 2px 0 0 inset;
	width: 60px;
    height: 60px;
}
.btn-control01 {
	background: #FCFCFC url(../img/ico_page_03_controller01_2.svg) no-repeat;
	box-shadow: rgba(0,0,0,0.1) 0 6px 4px 0, rgba(150,150,150,.7) 0 -4px 0 0 inset;
	border-radius: 50%;
	width: 60px;
    height: 60px;
}
.btn-control01-select,.btn-control01:hover {
	background: #0093FF url(../img/ico_page_03_controller01.svg) no-repeat;
	border-radius: 50%;
	width: 60px;
    height: 60px;
	box-shadow: none;
}
.btn-control01-active {
	background: #0096c8 url(../img/ico_page_03_controller01.svg) no-repeat;
	border-radius: 50%;
	box-shadow: rgba(0,0,0,.1) 0 2px 0 0 inset;
	width: 60px;
    height: 60px;
}
.no-inlinesvg .btn-control02 {
	background: #FCFCFC url(../img/ico_page_03_controller02_2.png) no-repeat;
	box-shadow: rgba(0,0,0,0.1) 0 6px 4px 0, rgba(150,150,150,.7) 0 -4px 0 0 inset;
	border-radius: 50%;
	width: 60px;
	height: 60px;
}
.no-inlinesvg .btn-control02-select,.btn-control02:hover {
	background: #FF3385 url(../img/ico_page_03_controller02.png) no-repeat;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	box-shadow: none;
}
.no-inlinesvg .btn-control02-active {
	background: #FF485F url(../img/ico_page_03_controller02.png) no-repeat;
	border-radius: 50%;
	box-shadow: rgba(0,0,0,.1) 0 2px 0 0 inset;
	width: 60px;
	height: 60px;
}
.btn-control02 {
	background: #FCFCFC url(../img/ico_page_03_controller02_2.svg) no-repeat;
	box-shadow: rgba(0,0,0,0.1) 0 6px 4px 0, rgba(150,150,150,.7) 0 -4px 0 0 inset;
	border-radius: 50%;
	width: 60px;
	height: 60px;
}
.btn-control02-select,.btn-control02:hover {
	background: #FF3385 url(../img/ico_page_03_controller02.svg) no-repeat;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	box-shadow: none;
}
.btn-control02-active {
	background: #FF485F url(../img/ico_page_03_controller02.svg) no-repeat;
	border-radius: 50%;
	box-shadow: rgba(0,0,0,.1) 0 2px 0 0 inset;
	width: 60px;
	height: 60px;
}

.soft-mario {
	height: 66px;
	margin-left: 20px;
}
.action-pad, .action-remote {
	display: table;
	width: 100%;
	border-collapse: separate;
	border-spacing: 8px 14px;
	text-align: center;
	font-size: 0;
}
.action-pad li, .action-remote li {
	display: table-row;
}
.action-pad dl, .action-remote dl {
	display: table-cell;
	width: 30%;
	background: rgba(255,255,255,0.9);
	color: #5BFF5F;
	border-radius: 10px;
}
.action-pad dt {
	background: #0096c8;
	color: #fff;
	font-size: 1rem;
	padding-bottom: 10px;
	text-align: left;
	padding: 8px 5px;
	border-radius: 10px 10px 0 0;
}
.action-remote dt {
	background: #FF485F;
	color: #fff;
	font-size: 1rem;
	text-align: left;
	padding: 8px 5px;
	border-radius: 10px 10px 0 0;
}
.action-pad dd, .action-remote dd {
	font-size: 1rem;
	padding: 2px 4px;
	color: #555;
	border-radius: 8px;
	text-align: center;
	padding: 5px;
}
.list-line {
	margin: 15px;
}

.action-box {
	margin: 0 10px;
}
.chara-box {
	width: 36%;
	text-align: center;
	float: left;
}
.chara-img {
	width: 190px;
	display: block;
	margin: 0 auto;
}
.chara-name {
    width: 176px;
    padding: 5px 5px;
	background-color: #FF474A;
	border-radius: 40px;
	margin: auto;
}
.chara-name>span {
	display: inline-block;
	vertical-align: middle;
	color: #fff;
}
.dot-line03 {
	clear: both;
	overflow: hidden;
	margin: 10px 10px 20px;
	padding-bottom: 10px;
}
.chara-txt {
	padding: 5px 20px 30px 0;
	overflow: hidden;
}
.chara-txt p {
	float: right;
	width: 85%;
}

.box_list04, .box_list01 {
	display: table;
	border-spacing: 10px 10px;
}
.box_list04{
	margin-bottom: 40px;
}
.box_list04 li, .box_list01 li {
	display: table-row;
}
.box_list04 dl, .box_list01 dl {
	display: table-cell;
	width: 50%;
	background: rgba(255,255,255,0.8);
	border-radius: 10px;
	vertical-align: top;
}
.box_list04 dt, .box_list01 dt {
	border-radius: 10px 10px 0 0;
	color: #fff;
	height: 58px;
    text-align: center;
}
.box_list04 dt>span, .box_list01 dt>span {
	display: table-cell;
	vertical-align: middle;
	width: 312px;
	height: 36px;
}
.box_list04 dd, .box_list01 dd {
	padding: 10px 15px 15px;
	text-align: left;
	color: #777;
}
.box_list04 dd >.indent {
	font-size: .9rem;
}
ul.indent-list {
	width: 90%;
	margin: 0 auto;
}
ul.indent-list li {
	padding-left: 3.3em;
	text-indent: -1.3em;
}
.title-small.page-04 + p {
	color: #19A668;
	font-size: .9rem;
	margin-bottom: 15px;
	text-align: center;
}

.play-icon01 {
	background: #0096DC url(../img/ico_10mario.png) no-repeat center;
	background-size: 60px 60px;
}
.play-icon02 {
	background: #0096DC url(../img/img_step_03_1.png) no-repeat center;
	background-size: 60px 60px;
}
.play-icon03 {
	background: #0096DC url(../img/ico_play.png) no-repeat center;
	background-size: 60px 60px;
}
.center-img {
	margin: 25px auto;
	padding: 6px;
	width: 300px;
	text-align: center;
	background: #ddd;
	border-radius: 16px;
}
.center-img img {
	width: 300px;
	border-radius: 10px;
}
.title-play01 { background: #9c444f;}
.title-play02 { background: #0b906a;}
.title-play03 { background: #573691;}
.title-play04 {
	background: #1b92c7;
	position:relative;
}
.title-play01 + p {
	color: #9c444f;
	font-size: .9rem;
}
.title-play02 + p {
	color: #0b906a;
	font-size: .9rem;
}
.title-play03 + p {
	color: #573691;
	font-size: .9rem;
}
.title-play04 + p {
	color: #1b92c7;
	font-size: 0.75rem;
}
.img-event{
    position: absolute;
    position: absolute;
    width: 46px;
    height: 46px;
    top: 1px;
    left: 2px;
}
.page-07 + p {
	color: #466BC0;
	font-size: .9rem;
	text-align: center;
}

.page-07 + p {
	color: #466BC0;
	font-size: .9rem;
	text-align: center;
}

.q-a dt {
	padding: 10px 15px;
	background: #5524CC;
	border-radius: 10px 10px 0 0;
	color: #fff;
	font-size: 1em;
	padding-left: 2.5em;
	text-indent: -1.5em;
}
.q-a dd {
	margin-bottom: 15px;
	padding: 10px 15px 20px;
	background: #fff;
	border-radius: 0 0 10px 10px;
}
.indent-a {
	padding-left: 1.4em;
	text-indent: -1.4em;
	margin-bottom: 15px;
}
.link-space {
	margin: 0 auto;
	text-align: center;
}

.touch {
	position: relative;
	padding: 8px;
	margin: 80px auto 20px;
	background: #e8e8e8;
	border-radius: 10px;
	text-align: center;
}
.touch-pict {
	width: 100%;
	height: auto;
	background-color: #ddd;
	border-radius: 6px;
}
.touch-info span{
	margin: 8px auto 0;
	width: 95%;
	text-align: left;
	font-size: .9rem;
	color: #aaa;
}
.frame-box>.touch,.dot06>.touch {
	margin: 80px auto 0px;
}
.touch-balloon {
	position: absolute;
	top: -40px;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;
}
.attention {
	position: relative;
	display: inline-block;
	padding: 2px 30px;
	background: #fff;
	border: 2px solid #000;
	border-radius: 30px;
	color: #000;
	z-index: 5;
	font-size: 1rem;
}
.attention:after {
	content: "";
	position: absolute;
	margin-left: -20px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 10px 10px 0 10px;
	border-color: #fff transparent transparent transparent;
	bottom: -8px;
	left: 51%;
	z-index: 0;
}
.attention:before {
	content: "";
	position: absolute;
	margin-left: -20px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 10px 10px 0 10px;
	border-color: #000 transparent transparent transparent;
	bottom: -11px;
	left: 51%;
	z-index: -1;
}
span.small {
	font-size: 1em;
}
.attention.hidden {
	display: none;
}
.attention {
	-webkit-animation-name: attention;
	-webkit-animation-duration: 1.5s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease;

	-moz-animation-name:attention;
	-moz-animation-duration:1.5s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-timing-function:ease;

	-ms-animation-name:attention;
	-ms-animation-duration:1.5s;
	-ms-animation-iteration-count:infinite;
	-ms-animation-timing-function:ease;

	-o-animation-name:attention;
	-o-animation-duration:1.5s;
	-o-animation-iteration-count:infinite;
	-o-animation-timing-function:ease;

	animation-name:attention;
	animation-duration:1.5s;
	animation-iteration-count:infinite;
	animation-timing-function:ease;
}
@-webkit-keyframes attention {
	0% {-webkit-transform:translate(0, 0);}
	50% {-webkit-transform:translate(0, -10px);}
	100% {-webkit-transform:translate(0, 0);}
}
@-moz-keyframes attention {
	0% {-moz-transform:translate(0, 0);}
	50% {-moz-transform:translate(0, -10px);}
	100% {-moz-transform:translate(0, 0);}
}
@-ms-keyframes attention {
	0% {-ms-transform:translate(0, 0);}
	50% {-ms-transform:translate(0, -10px);}
	100% {-ms-transform:translate(0, 0);}
}
@-o-keyframes attention {
	0% {-o-transform:translate(0, 0);}
	50% {-o-transform:translate(0, -10px);}
	100% {-o-transform:translate(0, 0);}
}
@keyframes attention {
	0% {transform:translate(0, 0);}
	50% {transform:translate(0, -10px);}
	100% {transform:translate(0, 0);}
}
#open01, #open02, #open03, #open04, #open05, #open06, #open07, #open08, #open09,
#open10, #open11, #open12, #open13, #open14, #open15, #open16, #open17, #open18,
#open20, #open21, #open22, #open23, #open24, #open25, #open26, #open27, #open28,
#open30, #open31, #open32, #open33, #open34, #open35, #open36, #open37, #open38,
#open00, #open40 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	margin-top: -65px;
	padding-top: 65px;
}
.modal_window {
	position: absolute;
	width: 92%;
	height: 72%;
	top: 45%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	   -moz-transform: translate(-50%,-50%);
	    -ms-transform: translate(-50%,-50%);
	     -o-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
	text-align: left;
	color: #fff;
	margin-top: 54px;
	background: rgba(0,0,0,.75);
	padding: 15px;
}
.dialog-title ~ p, .dialog-column p {
	color: #fff;
}
.dialog-title ~ .indent {
	color: #ccc;
	font-size: .9rem;
}
.dialog-img {
	display: block;
	margin: 15px auto 10px;
	width: 90%;
}
.btn-close {
	display: inline-block;
	width: 40px;
	height: 40px;
	background: url(../img/icon_close.png) #aaa;
	background-position: -1.5px -2px;
	border-radius: 5px;
	box-shadow: 0 -2px 0 rgba(0,0,0,.4) inset;
	vertical-align: top;
}
.btn-close.select {
	background: url(../img/icon_close.png) #888;
	background-position: -1.5px 0px;
	background-size: contain;
	box-shadow: 0 2px 0 rgba(0,0,0,.4) inset;
}
.dialog-bg {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	background: #aaa;
	border: 0 solid #FFF;
	opacity: 0.5;
}
.dialog-title {
	padding-bottom: 8px;
	color: #fff;
	border-bottom: 2px solid #fff;
	margin-bottom: 15px;
}
.dialog-title>span {
	display: inline-block;
	width: 90%;
}
.dialog-title img {
	height: 1.4em;
	vertical-align: top;
}
.dialog-column {
	margin-top: 20px;
	overflow: hidden;
}
.dialog-float {
	float: left;
	margin-right: 15px;
	width: 240px;
	border: 6px solid rgba(255,255,255,0.4);
	border-radius: 6px;
}

#dialog, #dialog-02, #dialog-03 {
	position: relative;
	width: 100%;
}
.click01-01 {
	top: 0;
	left: 0;
	width: 12%;
	height: 8%;
	border-radius: 6px;
}
.click01-02 {
	top: 0;
	left: 14%;
	width: 77.2%;
	height: 9.6%;
	border-radius: 6px;
}
.click01-03 {
	top: 1%;
	right: 1.3%;
	width: 4.5%;
	height: 7%;
	border-radius: 6px;
}
.click01-04 {
	top: 12%;
	left: 0;
	width: 7%;
	height: 9%;
	border-radius: 6px;
}
.click01-05 {
	top: 28%;
	left: 0.92%;
	width: 5.2%;
	height: 9.3%;
	border-radius: 50%;
}
.click01-06 {
	top: 12%;
	right: 8.4%;
	width: 8.5%;
	height: 5.4%;
	border-radius: 3px;
}
.click01-07 {
	top: 11.2%;
	right: 0.7%;
	width: 5.8%;
	height: 9.7%;
	border-radius: 8px;
}
.click01-08 {
	top: 28%;
	right: 0.8%;
	width: 5.2%;
	height: 9.3%;
	border-radius: 50%;
}
.click01-09 {
	top: 80%;
	left: 20.6%;
	width: 5.2%;
	height: 9.3%;
	border-radius: 50%;
}
.click01-10 {
	top: 81.5%;
	left: 0.2%;
	width: 11%;
	height: 17%;
	border-radius: 6px;
}
.click01-11 {
	top: 94.4%;
	left: 13.5%;
	width: 2.8%;
	height: 5%;
	border-radius: 6px;
}
.click01-12 {
	top: 94.5%;
	left: 17.5%;
	width: 4.2%;
	height: 4.8%;
	border-radius: 6px;
}
.click01-13 {
	top: 94%;
	left: 26.5%;
	width: 47%;
	height: 5.1%;
}
.click01-14 {
	top: 89.4%;
	right: 6.8%;
	width: 5%;
	height: 9%;
	border-radius: 8px;
}
.click01-15 {
	top: 89.4%;
	right: 1%;
	width: 5%;
	height: 9%;
	border-radius: 8px;
}
.click04-01 {
	top: 16%;
	right: 3.4%;
	width: 39.4%;
	height: 13%;
	border-radius: 6px;
}
.click04-02 {
	top: 79.5%;
	right: 35.4%;
	width: 7.2%;
	height: 13%;
	border-radius: 6px;
}
.click04-03 {
	top: 58.3%;
	right: 3.4%;
	width: 39.4%;
	height: 13%;
	border-radius: 6px;
}
.click04-05 {
	top: 80.8%;
	right: 24.3%;
	width: 5.8%;
	height: 10.5%;
	border-radius: 6px;
}
.click04-04 {
	top: 80.8%;
	right: 17.3%;
	width: 5.8%;
	height: 10.5%;
	border-radius: 6px;
}
.click04-06 {
	top: 80.8%;
	right: 10.4%;
	width: 5.8%;
	height: 10.5%;
	border-radius: 6px;
}
.click04-07 {
	top: 80.8%;
	right: 3.5%;
	width: 5.8%;
	height: 10.5%;
	border-radius: 6px;
}
.click04-08 {
	top: 1.5%;
	right: 10%;
	width: 26%;
	height: 8%;
}
.click04-09 {
	top: 42%;
	right: 3.4%;
	width: 39.4%;
	height: 13%;
	border-radius: 6px;
}
.click04-10 {
	top: 1.3%;
	right: 40.3%;
	width: 4.7%;
	height: 8.4%;
	border-radius: 8px;
}
.click06-00 {
    top: 12.5%;
	left: 71.5%;
    width: 22.2%;
    height: 6.5%;
	border-radius: 6px;
}
.click06-01 {
	top: 0.7%;
	left: 0.9%;
	width: 4.4%;
	height: 8.2%;
	border-radius: 6px;
}
.click06-02 {
	top: 13%;
	right: 0.7%;
	width: 3.5%;
	height: 5.9%;
	border-radius: 6px;
}
.click06-04 {
	top: 38.2%;
	left: 2.3%;
	width: 6.7%;
	height: 12%;
	border-radius: 6px;
}
.click06-05 {
	top: 55.2%;
	left: 2.3%;
	width: 6.7%;
	height: 12%;
	border-radius: 6px;
}
.click06-06 {
	top: 26.5%;
	left: 25.8%;
	width: 55.5%;
	height: 14.8%;
}
.click06-07 {
	top: 31%;
	left: 83%;
	width: 6%;
	height: 10%;
	border-radius: 6px;
}
.click06-08 {
	top: 44%;
	left: 26.5%;
	width: 11.5%;
	height: 5.2%;
	border-radius: 6px;
}
.click06-09 {
	top: 82.0%;
	left: 15.8%;
	width: 9.2%;
	height: 12%;
	border-radius: 0 0 0 8px;
}
.click06-10 {
	top: 42.8%;
	left: 71.8%;
	width: 13%;
	height: 4%;
}
.click06-11 {
	top: 88%;
	left: 26.6%;
	width: 3%;
	height: 5%;
	border-radius: 6px;
}
.click06-12 {
	top: 57%;
	left: 53.3%;
	width: 16.2%;
	height: 24%;
	border-radius: 6px;
}
.click06-13 {
	top: 57%;
	left: 71.1%;
	width: 16.2%;
	height: 24%;
	border-radius: 6px;
}
.click06-15 {
	top: 88%;
	left: 62.7%;
	width: 15.8%;
	height: 4%;
	border-radius: 6px;
}
.click06-16 {
	top: 27.8%;
	left: 16.5%;
	width: 2%;
	height: 3.5%;
	border-radius: 50%;
}
.click06-17 {
    top: 12.5%;
    left: 0.8%;
    width: 22.5%;
    height: 6.5%;
	border-radius: 6px;
}
.click06-18 {
    top: 12.5%;
    left: 24.5%;
    width: 22.5%;
    height: 6.5%;
	border-radius: 6px;
}
.click06-20 {
    top: 12.5%;
    left: 48%;
    width: 22.5%;
    height: 6.5%;
	border-radius: 6px;
}
.click06-21 {
	top: 0.7%;
	left: 0.9%;
	width: 4.4%;
	height: 8.2%;
	border-radius: 6px;
}
.click06-23 {
	top: 55%;
	left: 2.4%;
	width: 6.7%;
	height: 12%;
	border-radius: 6px;
}
.click06-24 {
	top: 38.5%;
	left: 2.4%;
	width: 6.7%;
	height: 12%;
	border-radius: 6px;
}
.click06-25 {
	top: 27.3%;
	left: 18.1%;
	width: 69.3%;
	height: 71.8%;
}
.click06-26 {
    top: 12.5%;
    left: 11.2%;
    width: 25%;
    height: 7%;
    border-radius: 6px;
}
.click06-27 {
    top: 12.5%;
    left: 37.2%;
    width: 25%;
    height: 7%;
    border-radius: 6px;
}
.click06-28 {
    top: 12.5%;
    left: 63.3%;
    width: 25%;
    height: 7%;
    border-radius: 6px;
}
.click06-31 {
    top: 20%;
    left: 12.8%;
    width: 3%;
    height: 6%;
    border-radius: 50%;
}
.click06-32 {
    top: 25%;
    left: 14.5%;
    width: 6%;
    height: 11%;
    border-radius: 50%;
}
.click06-33 {
    top: 75.5%;
    left: 12.6%;
    width: 9.2%;
    height: 12%;
    border-radius: 0 0 0 8px;
}
.click06-34 {
    top: 20%;
    left: 22.5%;
    width: 56%;
    height: 15%;
}
.click06-35 {
    top: 38%;
    left: 49%;
    width: 35%;
    height: 32%;
}
.click06-36 {
    top: 73.5%;
    left: 26%;
    width: 27%;
    height: 11%;
    border-radius: 6px;
}
.click06-37 {
    top: 73.5%;
    left: 56.2%;
    width: 27%;
    height: 11%;
    border-radius: 6px;
}
.click06-38 {
    top: 56.5%;
    left: 12.6%;
    width: 9.2%;
    height: 17.5%;
}
.click06-40 {
    top: 63%;
    left: 15.8%;
    width: 9.2%;
    height: 17.5%;
}
.click07-01 {
	top: 1.3%;
	left: 8.5%;
	width: 5.2%;
	height: 10%;
	border-radius: 50%;
}
.click07-02 {
	top: 13%;
	left: 9.5%;
	width: 19%;
	height: 4.9%;
	border-radius: 6px;
}
.click07-03 {
	top: 13%;
	left: 29.8%;
	width: 19%;
	height: 4.9%;
	border-radius: 6px;
}
.click07-04 {
	top: 13%;
	left: 50.2%;
	width: 19%;
	height: 4.9%;
	border-radius: 6px;
}
.click07-05 {
	top: 13%;
	left: 70.6%;
	width: 19%;
	height: 4.9%;
	border-radius: 6px;
}
.click07-11 {
	top: 1.3%;
	left: 8.5%;
	width: 5.2%;
	height: 10%;
	border-radius: 50%;
}
.click07-12 {
	top: 13%;
	left: 19.7%;
	width: 19%;
	height: 4.9%;
	border-radius: 6px;
}
.click07-13 {
	top: 13%;
	left: 40%;
	width: 19%;
	height: 4.9%;
	border-radius: 6px;
}
.click07-14 {
	top: 13%;
	left: 60.4%;
	width: 19%;
	height: 4.9%;
	border-radius: 6px;
}
.click07-15 {
	top: 2%;
	right: 10.8%;
	width: 4.5%;
	height: 8%;
	border-radius: 50%;
}

span .touch-mark {
	position: absolute;
	background: rgba(255,255,255,0.7);
	border: 3px solid rgba(255,255,255,0.5);
	box-shadow: rgba(0,0,0,0.5) 0 2px 2px 0.5px;
    -webkit-animation: switchtext 1.0s infinite alternate;
       -moz-animation: switchtext 1.0s infinite alternate;
        -ms-animation: switchtext 1.0s infinite alternate;
         -o-animation: switchtext 1.0s infinite alternate;
            animation: switchtext 1.0s infinite alternate;
}
span .touch-mark-frame {
	position: absolute;
	border: 3px solid rgba(255,255,255,1);
}
.mark-hidden {
	display: none;
}
@-webkit-keyframes switchtext {
 from { opacity: 0; }
 to { opacity: 1; }
}
@-moz-keyframes switchtext {
 from { opacity: 0; }
 to { opacity: 1; }
}
@-ms-keyframes switchtext {
 from { opacity: 0; }
 to { opacity: 1; }
}
@-o-keyframes switchtext {
 from { opacity: 0; }
 to { opacity: 1; }
}
@keyframes switchtext {
 from { opacity: 0; }
 to { opacity: 1; }
}
@-webkit-keyframes modalFadeIn {
	0% {opacity:0;display:block;}
	100% {opacity:1;}
}
@-moz-keyframes modalFadeIn {
	0% {opacity:0;display:block;}
	100% {opacity:1;}
}
@-ms-keyframes modalFadeIn {
	0% {opacity:0;display:block;}
	100% {opacity:1;}
}
@-o-keyframes modalFadeIn {
	0% {opacity:0;display:block;}
	100% {opacity:1;}
}
@keyframes modalFadeIn {
	0% {opacity:0;display:block;}
	100% {opacity:1;}
}
div#modal div:target {
	-webkit-animation-name: modalFadeIn;
  	-webkit-animation-duration: 0.3s;
  	-webkit-animation-iteration-count: 1;
	opacity: 1;
	display: block;
}
div#modal div:target {
	-moz-animation-name: modalFadeIn;
  	-moz-animation-duration: 0.3s;
  	-moz-animation-iteration-count: 1;
	opacity: 1;
	display: block;
}
div#modal div:target {
	-ms-animation-name: modalFadeIn;
  	-ms-animation-duration: 0.3s;
  	-ms-animation-iteration-count: 1;
	opacity: 1;
	display: block;
}
div#modal div:target {
	-o-animation-name: modalFadeIn;
  	-o-animation-duration: 0.3s;
  	-o-animation-iteration-count: 1;
	opacity: 1;
	display: block;
}
div#modal div:target {
	animation-name: modalFadeIn;
  	animation-duration: 0.3s;
  	animation-iteration-count: 1;
	opacity: 1;
}

@media screen and (max-width: 768px) {
.page-top {
	height: auto;
	min-height: 110px;
	padding-top: 22px;
}
.top-box {
	width: 90%;
}
.top-img {
	width: 70px;
	height: 70px;
}
h2 { font-size: 28px;}
a.link-txt{
	text-decoration: underline;
}
.comment-box, .comment-box-sad {
	margin: 20px 0 40px;
	min-height: 110px;
	padding: 20px 15px 2px;
}
.comment {
	padding: 0;
	width: auto;
}
.mashiko img {
	width: 80px;
	height: 80px;
	display: block;
	position: static;
	margin: 15px auto;
	border-radius: 50%;
	background-color: rgba(0,0,0,0.15);
}
.comment-box-sad .mashiko img {
	width: 80px;
	height: 80px;
	display: block;
	position: static;
	margin: 15px auto;
	border-radius: 50%;
	background-color: rgba(255,255,255,0.2);
}
.cycle-space dl:nth-child(odd) {
	width: 100px;
}
.cycle-space dd {
	height: 50px;
}
.circle-link,.circle-link.select{
	height: 90px;
	width: 90px;
	border-width: 6px;
}
.circle-link .step-img01,.circle-link .step-img02,.circle-link .step-img03 ,.circle-link.select .step-img01,.circle-link.select .step-img02,.circle-link.select .step-img03{
	height: 90px;
	width: 90px;
	background-size: 90px 90px;
}
p.point {
    margin-right: 5px;
	vertical-align: middle;
}
p.point+p {
	vertical-align: middle;
	font-size: 12px;
}

.topic-box {
	display: block;
}
.topic-img {
	display: block;
	width: 146px;
	margin: 0 auto 20px;
}
.topic-box h4{
	text-align: center;
}
.topic-txt {
	display: block;
	width: 100%;
	padding: 0;
}
img.mashiko-03 {
	width: 300px;
	height: 95px;
}
img.dog {
	width: 70px;
	height: 58px;
}

.btn-soft img,.btn-soft-select img,.btn-soft-active img {
	width: 100%;
	height: auto;
}
.btn-soft {
	padding: 5px 5px 8px;
	border-radius: 6px;
}
.btn-soft-select,.btn-soft-active,.btn-soft:hover {
	padding: 5px;
	border-radius: 6px;
}
.action-pad, .action-remote {
	border-spacing: 2px 5px;
}
.action-pad li, .action-remote li {
	display: block;
}
.action-pad dl, .action-remote dl {
  display: table;
  width: 100%;
  background: bottom;
  color: #5BFF5F;
  border-radius: 0;
  border-spacing: 0px 2px;
  font-size: 0;
}
.action-pad dt,.action-remote dt {
  width: 45%;
  display: table-cell;
  border-radius: 10px 0 0 10px;
  vertical-align: middle;
  padding: 10px;
}
.action-pad dd, .action-remote dd {
  display: table-cell;
  background: #fff;
  border-radius: 0 10px 10px 0px;
  text-align: left;
  vertical-align: middle;
  padding: 10px;
}
.ctrllist-space02 {
	top: 500px;
}
.chara-box {
	width: auto;
	text-align: center;
	float: none;
}
.chara-name {
	margin: 0 auto 20px;
}
.chara-txt p:nth-of-type(1) {
	width: auto;
	padding: 10px 0 0 18px;
}

.box_list04, .box_list01 {
	width: 100%;
	border-spacing: 0 0;
	margin-bottom: 20px;
}
.box_list04 dt, .box_list01 dt {
  border-radius: 10px 10px 0 0;
  height: auto;
}
.box_list04 dt>span, .box_list01 dt>span {
  display: block;
  margin: auto;
  padding: 6px 0 4px;
  width: 90%;
  height: auto;
}
.box_list04 li, .box_list01 li {
  display: block;

}
.box_list04 dl, .box_list01 dl {
  display: block;
  margin-bottom: 20px;
  width: 100%;
}
img.mashiko-07 {
  width: 300px;
  height:238px;
}

.icon-flag.icon01, .icon-flag.icon02, .icon-flag.icon03 {
  background-size: 60px 60px;
}
.icon-flag {
  left: 20px;
  width: 60px;
  height: 60px;
}
.frame-box {
  padding: 5px;
}
.title-small {
  width: 98%;
  padding: 8px 0;
}
.play-icon01 {
  background: #0096DC url(../img/ico_10mario.png) no-repeat center;
  background-size: 50px 50px;
}
.play-icon03 {
  background: #0096DC url(../img/ico_play.png) no-repeat center;
  background-size: 50px 50px;
}
.center-img {
  width: 94%;
  max-width: 300px;
}
.center-img img {
  width: 100%;
}
.title-large {
  margin: 12px 0 30px 105px;
}
.txt-box {
	 margin: 15px;
}

.attention {
	display: none;
}
.touch,.frame-box>.touch, .dot06>.touch{
	margin: 20px auto 0;
}
#open01, #open02, #open03, #open04, #open05, #open06, #open07, #open08, #open09,
#open10, #open11, #open12, #open13, #open14, #open15, #open16, #open17, #open18,
#open20, #open21, #open22, #open23, #open24, #open25, #open26, #open27, #open28,
#open30, #open31, #open32, #open33, #open34, #open35, #open36, #open37, #open38,
#open40, #open00 {
    position: static;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    background: none;
    display: block;
    padding-top: 0px;
	margin-top: 0px;
}
#modal {
  margin-top: 0px;
}
.modal_window {
    display: block;
	position: static;
    width: 100%;
    height: auto;
	margin-top: 10px;
    margin-left: 0px;
	padding: 10px 0;
    text-align: left;
    z-index: 20;
    color: #fff;
	-webkit-transform: translate(0, 0);
	   -moz-transform: translate(0, 0);
	    -ms-transform: translate(0, 0);
	     -o-transform: translate(0, 0);
            transform: translate(0, 0);
	background: #e8e8e8;
}
.dialog-float {
	float: none;
	display: block;
	margin: 0 auto 20px;
	width: 300px;
	border: none;
	border-radius: 6px;
	box-shadow: none;
}
span .touch-mark,span .touch-mark-frame,.dialog-bg,.btn-close{
	display: none;
}
.dialog-title {
	margin-bottom: 10px;
	padding: 3px 5px 0;
	background: #5b5b5b;
	border-bottom: 0px solid;
	border-radius: 6px;
	-webkit-background-size: 10px 10px;
	background-size: 10px 10px;
	background-image: -webkit-gradient( linear, left top, right bottom, from(#545454), color-stop(0.15, #545454), color-stop(0.15, #5b5b5b), color-stop(0.35, #5b5b5b), color-stop(0.35, #545454), color-stop(0.65, #545454), color-stop(0.65, #5b5b5b), color-stop(0.85, #5b5b5b), color-stop(0.85, #545454), color-stop(0.100, #545454), to(#545454) );
}
.dialog-title>span {
	width: 100%;
}
.dialog-title ~ p, .dialog-column p {
    padding: 0 8px;
	color: #555;
}
.dialog-title ~ .indent {
	color: #888;
	font-size: .9rem;
	padding: 8px 0 0 32px;
}

.touch-info {
	margin: 15px auto 0;
	border-top: 1px dotted #888;
    width: 94%;
}
.modal_window>span>a>.btn-link {
	background: #F8F8F8;
}
.modal_window>span>a>.btn-link.select {
	background: #ccc;
}

.size-half {
	float: none;
	margin: 0 auto 20px;
}
.size-half > iframe{
	width: 332px;
	height: 186px;
  	max-width: 332px;
	max-height: 186px;
	vertical-align: bottom;
}
.size-half > video,.size-half > img{
	width: 332px;
	height: 186px;
  	max-width: 332px;
	max-height: 186px;
	vertical-align: bottom;
}
.size-M {
	width: 360px;
	height: 202px;
	float: none;
	margin: 0 auto;
}
.size-M > iframe{
	width: 360px;
	height: 202px;
	vertical-align:bottom;
}
.size-M > video,.size-M > img{
	width: 360px;
	height: 202px;
	vertical-align:bottom;
}
}

@media screen and (max-width: 480px) {
.page-top {
	height: auto;
	min-height: 104px;
}
.top-box td:first-child {
	padding-right: 5px;
}
.top-img {
	width: 60px;
	height: 60px;
}
.text-sub {
  height: 40px;
  font-size: .8rem;
  vertical-align: middle;
  display: table-cell;
}


.size-half {
	width: 240px;
	height: 135px;
  	max-width: 332px;
	max-height: 186px;
	float: none;
	margin: 0 auto 20px;
}
.size-half > iframe {
	width: 240px;
	height: 135px;
  	max-width: 332px;
	max-height: 186px;
	vertical-align:bottom;
}
.size-half > video,.size-half > img {
	width: 100%;
	height: auto;
  	max-width: 332px;
	max-height: 186px;
	vertical-align:bottom;
}
.off-half{
	width: 100%;
	height: auto;
  	max-width: 332px;
	max-height: 186px;
}
.size-M {
	width: 240px;
	height: 135px;
	max-width: 360px;
	max-height: 202px;
}
.size-M > iframe {
	width: 240px;
	height: 135px;
	vertical-align:bottom;
}
.size-half > video,.size-half > img {
	width: 100%;
	height: auto;
  	max-width: 332px;
	max-height: 186px;
	vertical-align:bottom;
}

.size-M > video,.size-M > img {
	width: 100%;
	height: auto;
	max-width: 360;
	max-height: 202px;
	vertical-align:bottom;
}
.touch-info {
    width: 90%;
}
.action-box {
  margin: 0px 5px;
  height: 400px;
}
.btn-space-soft {
  border-spacing: 6px 0;
}
.ctrllist-space02 {
    top: 442px;
}
.touch,.frame-box>.touch, .dot06>.touch{
	padding: 6px;
}
img.dog {
	display: none;
}

p.point+p {
	width: 80%;
	display: inline-block;
	font-size: 18px;
	padding-left: 5px;
	line-height: 1.4;
}
.cycle-space dl:nth-child(even) {
	display: block;
	width: auto;
}
#arrow-01 dd,#arrow-02 dd{
	display: none;
}
#arrow-01 dt,#arrow-02 dt{
	background-image: url(../img/ico_arrow_under.png);
	background-repeat: no-repeat;
	height: 34px;
	width: 34px;
	display: block;
	margin: 5px auto;
}
.cycle-space dl:nth-child(odd) {
  display: block;
  margin: auto;
  width: 270px;
  background-color: rgba(255,255,255,0.1);
  border-radius: 50px;
}
.cycle-space dd {
  display: table-cell;
  width: 200px;
  text-align: left;
  vertical-align: middle;
  padding: 5px 0 0px 10px;
}
.cycle-space dt {
  display: table-cell;
  width: 62px;
}
.circle-link,.circle-link.select{
	height: 50px;
	width: 50px;
	border-width: 6px;
}
 { background-size: 35px 35px;}
.circle-link{
	height: 50px;
	width: 50px;
}
.circle-link .step-img01,.circle-link .step-img02,.circle-link .step-img03,
.circle-link.select .step-img01,.circle-link.select .step-img02,.circle-link.select .step-img03{
	height: 50px;
	width: 50px;
	background-size: 50px 50px;
}
.title-large {
  margin: 12px 0 24px 92px;
}
}