/* ---------------------------------------- INITIALIZE --- */

html {
	font-size: 62.5%;
}

a {
	text-decoration: none;
	color: black;
}

#privacy.contentBody a,
#law.contentBody a,
#faq.contentBody a  {
	color:blue;
}

#faq.contentBody .faqMenu a  {
	color:white;
}

ol,
ul {
	list-style: none;
}

img {
	vertical-align: top;
	font-size: 0;
	line-height: 0;
}

*,
*: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;
}

/* ---------------------------------------- UTILITY --- */

.pc {
	display: block;
}

.sp {
	display: none;
}

@media only screen and (max-width: 767px) {
	.pc {
		display: none;
	}

	.sp {
		display: block;
	}
}


/* ---------------------------------------- BODY --- */

body {
	font-family: "M PLUS Rounded 1c";
	background-image: url('../img/bg_yellow.png');
}


@media only screen and (max-width: 767px) {
	body {
		background-image: url('../img/bg_yellow_sp.png');
		background-size: contain;
		background-position: 0 8vw;
	}
}


/* ---------------------------------------- HEADER --- */
/* -----------------------------HEADER [toppage]  */

#toppage h1 {
	text-align: center;
}

#toppage h1 img {
	width: 100%;
	max-width: 960px;
}

@media only screen and (min-width: 961px) {
	#toppage h1 {
		width:100%;

		margin:0 auto;
	}

	#toppage h1 {
		background-image: url('../img/top/top_pc_header_bg.png');
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		ba
	}
}


@media only screen and (max-width: 767px) {
	#toppage h1 img {
		width: 100%;
	}
}

/* -----------------------------HEADER [general & books ]  */

#general header,
#books header {
	background-image: url('../img/bg_gray_tile.png');
}

#general header h1,
#books header h1 {
	/*width: 738px;*/
	margin: 0 auto;
	text-align: center;
	height: 255px;
}

#general header h1 img#header_rabbit,
#books header h1 img#header_rabbit {
	width: 212px;
	top: 4px;
}

#general header h1 img#header_bear,
#books header h1 img#header_bear {
	top: 4px;
	width: 195px;
}

@media only screen and (max-width: 767px) {

	#general header,
	#books header {
		background-image: none;
		background-size: cover;
	}

	#general header img,
	#books header img {
		width: 100%;
	}

	#general header h1,
	#books header h1 {
		height: auto;
		margin-bottom: 0;
	}

	#general header h1 img#header_rabbit,
	#books header h1 img#header_rabbit {
		width: 28.4vw;
		top: 4px;
	}

	#general header h1 img#header_title,
	#books header h1 img#header_title {
		width: 44.1vw;
	}

	#general header h1 img#header_bear,
	#books header h1 img#header_bear {
		top: 4px;
		width: 25.9vw;
	}

}

/* ---------------------------------------- NAV --- */
nav {
	position: relative;
	width: 96%;
	max-width: 960px;
	margin: auto;
}

nav #pagetoplink {
	position: absolute;
	top: -75px;
	right: 2vw;
}

nav ul {
	width: 98%;
	margin: 100px auto 0 auto;
	padding-left: 3%;
}

nav li {
	width: 17%;
	display: inline-block;
	margin: 20px 1%;
	background-color: white;
	text-align: center;
	border-radius: 8px;
}

nav li a {
	display: block;
	padding: 20px 0.5vw;
	font-size: 1.15rem;
	font-weight: bold;
}


@media only screen and (max-width: 800px) {
	nav ul {
		margin-top: 20vw;
		padding-left: 0;
	}

	nav li {
		width: 44%;
		margin: 1.5vw 2% 0 2%;
	}

	nav li a {
		padding: 1.5em 0.5vw;
		font-size: 1.4rem;
		font-weight: bold;
	}

	nav #pagetoplink {
		top: -12vw;
	}


	#books nav #pagetoplink {
		top: -10vw;
	}


	nav #pagetoplink a img {
		width: 10vw;
	}
}

@media only screen and (max-width: 332px) {
	nav li a {
		font-size: 1rem;
	}

}

/* ---------------------------------------- FOOTER --- */

footer {
	width: 94%;
	margin: 40px auto 20px auto;
}

.copyright {
	text-align: center;
	font-size: 1.2rem;
	font-weight: bold;
	color: #333;
}


@media only screen and (max-width: 767px) {

	footer {
		margin: 4vw auto 2vw auto;
	}

	.copyright {
		text-align: left;
		font-size: 1.3rem;
		margin-left:2.5vw;
	}

}

/* ---------------------------------------- PARTS アプリダウンロード--- */

.appDownload {
	width: 96vw;
	max-width: 960px;
	height: 13.3vw;
	margin: 60px auto 50px auto;
	background-color: white;
	border-radius: 16px;
	box-shadow: 1px 1px 17px 5px rgba(255, 255, 255, 0.75) inset, -2px -3px 7px 0px rgba(0, 0, 0, 0.75) inset;
	position: relative;
}

.appDownload:after {
	content: "";
	display: inline-block;
	width: 8.4vw;
	height: 12.9vw;
	background: url('../img/top/dl_pen_pc.png');
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	bottom: -2.1vw;
	right: -1.5vw;
}

.appDownload .appDlFree {
	position: absolute;
	top: 1.7vw;
	left: 0.5vw;
	width: 10.3vw;
}

.appDownload picture.appDlText img {
	position: absolute;
	top: 4vw;
	left: 11.2vw;
	width: 40.4vw;
}

.appDownload .appDlIcon {
	position: absolute;
	top: 4vw;
	left: 52.6vw;
}

.appDownload .appDlIcon img {
	width: 18.7vw;
	display: inline-block;
}

.appDownload picture.appDlText2 img {
	position: absolute;
	top: 8vw;
	left: 11.2vw;
	width: 37.5vw;
}

@media only screen and (min-width:960px) {
	.appDownload {
		max-height: 133px;
	}

	.appDownload:after {
		width: 84px;
		height: 129px;
		bottom: -21px;
		right: -15px;
	}

	.appDownload .appDlFree {
		top: 17px;
		left: 5px;
		width: 103px;
	}

	.appDownload picture.appDlText img {
		top: 40px;
		left: 112px;
		width: 404px;
	}

	.appDownload .appDlIcon {
		top: 40px;
		left: 526px;
	}

	.appDownload .appDlIcon img {
		width: 187px;
	}

	.appDownload picture.appDlText2 img {
		top: 80px;
		left: 112px;
		width: 375px;
	}
}

@media only screen and (max-width: 767px) {

	.appDownload {
		width: 92vw;
		height: 53.6vw;
		background-color: white;
		border-radius: 3vw;
	}

	.appDownload:after {
		width: 21.6vw;
		height: 20vw;
		background: url('../img/top/dl_pen_sp.png');
		background-size: contain;
		bottom: -4.8vw;
		right: -1.7vw;
	}

	.appDownload .appDlFree {
		top: 2.1vw;
		left: 3.8vw;
		width: 18.9vw;
	}

	.appDownload picture.appDlText img {
		top: 6.5vw;
		left: 25.5vw;
		width: 55.6vw;
		;
	}

	.appDownload .appDlIcon {
		top: 23.6vw;
		left: 5vw;
	}

	.appDownload .appDlIcon img {
		width: 40vw;
	}

	.appDownload picture.appDlText2 img {
		top: 39.4vw;
		left: 5vw;
		width: 59.9vw;
	}
}

/* ---------------------------------------- MAIN --- */

main {
	padding-bottom: 0;
}

main .contentBody {
	width: 96%;
	max-width: 960px;
	margin: 40px auto;
	padding: 45px 40px;
	background-color: white;
	border-radius: 16px;
	box-shadow: 1px 1px 17px 5px rgba(255, 255, 255, 0.75) inset, -2px -3px 7px 0px rgba(0, 0, 0, 0.75) inset
}

main .contentBody h2 {
	text-align: center;
	margin-bottom: 1em;
}


main .contentBody p {
	font-size: 1.6rem;
}

main .contentWrap {
	width: 96%;
	max-width: 960px;
	margin: auto;
}

@media only screen and (max-width: 767px) {
	main .contentBody {
		width: 94vw;
		margin: 2.5vw auto;
		padding: 2vw 4vw;
	}
	main .contentBody p {
		font-size: 1.4rem;
	}
	main .contentWrap {
		width: 96%;
	}
}




/* -----------------------------MAIN [top] */
/*                              MAIN [top] ページ内リンクメニュー  */

#toppage main ul.topNavi {
	width: 96%;
	max-width: 960px;
	margin: 40px auto 0 auto;
}

#toppage main ul.topNavi li {
	display: inline-block;
	width: 24.4%;
}


#toppage main ul.topNavi li img {
	width: 90%;
	margin: 0 5%;
}

@media only screen and (max-width: 767px) {

	#toppage main ul.topNavi li {
		display: none;
	}
}

/* -----------------------------MAIN [top] */
/*                              MAIN [top] タイトル　フォーマット  */

#toppage .sectionHead {
	width: 96%;
	max-width: 960px;
	height: 70px;
	border-radius: 16px;
	margin: 30px auto;
	padding: 20px;
}

#toppage .sectionHead h2 {
	width: 100%;
	text-align: center;
	position: relative;
}

#toppage .sectionHead h2 img {
	text-align: center;
}

#toppage .sectionHead h2:before {
	content: "";
	display: inline-block;
	width: 33px;
	height: 33px;
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	left: 0;
}

#toppage .sectionHead h2:after {
	content: "";
	display: inline-block;
	width: 33px;
	height: 33px;
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	right: 0;
}

@media only screen and (max-width: 767px) {
	#toppage .sectionHead {
		width: 92.0vw;
		height: 14.7vw;
		border-radius: 2vw;
		margin: 4vw auto;
		padding: 4vw;
	}

	#toppage .sectionHead h2 {
		margin-top: 1vw;

	}

	#toppage .sectionHead h2 img{
		margin-top: -0.5vw;

	}

	#toppage .sectionHead h2:before {
		width: 4.4vw;
		height: 4.4vw;
	}

	#toppage .sectionHead h2:after {
		width: 4.4vw;
		height: 4.4vw;
	}
}

/* -----------------------------MAIN [top] */
/*                              MAIN [top] タイトル 個別設定(サイズ)  */

#toppage #section1 .sectionHead h2 img {
	width: 183px;
}

#toppage #section2 .sectionHead h2 img {
	width: 159px;
}


#toppage #section3 .sectionHead h2 img {
	width: 145px;
}

#toppage #section4 .sectionHead h2 img {
	width: 191px;
}

#toppage #section5 .sectionHead h2 img {
	width: 440px;
}

@media only screen and (max-width: 767px) {
	#toppage #section1 .sectionHead h2 img {
		width: 35.2vw;
	}

	#toppage #section2 .sectionHead h2 img {
		width: 30.7vw;
	}


	#toppage #section3 .sectionHead h2 img {
		width: 27.9vw;
	}

	#toppage #section4 .sectionHead h2 img {
		width: 37.0vw;
	}

	#toppage #section5 .sectionHead h2 img {
		width: 72.5vw;
	}
}

/* -----------------------------MAIN [top] */
/*                              MAIN [top] タイトル 個別設定(色)  */

#toppage #section1 .sectionHead {
	background: #ff0900;
	box-shadow: 0px 0px 3px 1px rgba(125, 125, 125, 0.42), -2px -2px 3px 0px #bb0700 inset, 2px 2px 3px 3px #ff554f inset;
}

#toppage #section1 .sectionHead h2:before,
#toppage #section1 .sectionHead h2:after {
	background-image: url('../img/top/top_title_ciecle_red.png');
}

#toppage #section2 .sectionHead {
	background: #3bb200;
	box-shadow: 0px 0px 3px 1px rgba(125, 125, 125, 0.42), -2px -2px 3px 0px #2c8400 inset, 2px 2px 3px 3px #75c94c inset;
}

#toppage #section2 .sectionHead h2:before,
#toppage #section2 .sectionHead h2:after {
	background-image: url('../img/top/top_title_ciecle_green.png');
}

#toppage #section3 .sectionHead {
	background: #0091e5;
	box-shadow: 0px 0px 3px 1px rgba(125, 125, 125, 0.42), -2px -2px 3px 0px #00619a inset, 2px 2px 3px 3px #60baef inset;
}

#toppage #section3 .sectionHead h2:before,
#toppage #section3 .sectionHead h2:after {
	background-image: url('../img/top/top_title_ciecle_blue.png');
}

#toppage #section4 .sectionHead {
	background: #ff89c9;
	box-shadow: 0px 0px 3px 1px rgba(125, 125, 125, 0.42), -2px -2px 3px 0px #ab5c87 inset, 2px 2px 3px 3px #ffb3dc inset;
}

#toppage #section4 .sectionHead h2:before,
#toppage #section4 .sectionHead h2:after {
	background-image: url('../img/top/top_title_ciecle_pink.png');
}

#toppage #section5 .sectionHead {
	background: #cb52ee;
	box-shadow: 0px 0px 3px 1px rgba(125, 125, 125, 0.42), -2px -2px 3px 0px #8837a0 inset, 2px 2px 3px 3px #de90f4 inset;
}

#toppage #section5 .sectionHead h2:before,
#toppage #section5 .sectionHead h2:after {
	background-image: url('../img/top/top_title_ciecle_purple.png');
}

/* -----------------------------MAIN [top] */
/*                              MAIN [top] Section "紹介ムービー"  */

#toppage #section1 .movieWrap {
	background: #ff372d;
	width: 580px;
	height: 335px;
	margin: 0 auto 30px auto;
	box-shadow: 0px 0px 3px 1px rgba(125, 125, 125, 0.42), -2px -2px 3px 0px #98211b inset, 2px 2px 3px 3px #ff7a73 inset;
}

#toppage #section1 .movie {
	background: #d6d6d6;
	width: 560px;
	height: 315px;
	position: relative;
	top: 10px;
	left: 10px;
	border-radius: 2px;
	border-left: 2px solid #98211b;
	border-top: 2px solid #98211b;
	border-right: 2px solid #ff7a73;
	border-bottom: 2px solid #ff7a73;
}

#toppage #section1 .movie iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}

#toppage #section1 picture.catch {
	display: block;
	text-align: center;
}


@media only screen and (max-width: 767px) {
	#toppage #section1 .movieWrap {
		width: 92vw;
		height: 52.625vw;
	}

	#toppage #section1 .movie {
		width: 90vw;
		height: 50.625vw;
		top: 1vw;
		left: 1vw;
		border-radius: 0.2vw;
		border-left: 0.5vw solid #98211b;
		border-top: 0.5vw solid #98211b;
		border-right: 0.5vw solid #ff7a73;
		border-bottom: 0.5vw solid #ff7a73;
	}

	#toppage #section1 picture.catch img {
		width: 87.5vw;
	}
}

/* -----------------------------MAIN [top] */
/*                              MAIN [top] Section "あそびかた"  */

#toppage #section2 .steps {
	display: table;
	width: 100%;
	border-collapse: separate;
	border-spacing: 20px 0;
}

#toppage #section2 .contentBody .step {
	display: table-cell;
	width: 33%;
	vertical-align: bottom;
}

#toppage #section2 .contentBody .step h3 {
	width: 100%;
	margin-bottom: 15px;
}


#toppage #section2 .contentBody .step h3 .stepIcon {
	width: 67px;
}


#toppage #section2 .contentBody .step .stepFigure {
	width: 100%;
}

#toppage #section2 .contentBody .step h3 span {
	display: inline-block;
	width: 177px;
	margin-top: 18px;
}

#toppage #section2 .contentBody #step3 h3 picture img {
	width: 177px;
}

@media only screen and (max-width: 767px) {
	#toppage #section2 .steps {
		display: block;
	}

	#toppage #section2 .contentBody .step {
		display: block;
		width: 100%;
		margin-bottom: 4vw;
	}

	#toppage #section2 .contentBody .step h3 .stepIcon {
		width: 16.7vw;
		margin-right: 3vw;
		vertical-align: middle;
	}

	#toppage #section2 .contentBody .step .stepFigure {
		width: 74vw;
		display: block;
		text-align: center;
		margin: auto;
	}

	#toppage #section2 .contentBody .step h3 span {
		margin-top: 0;
	}

	#toppage #section2 .contentBody #step3 h3 span img {
		margin-top: -24px;
	}

	#toppage #section2 .contentBody #step1 h3 picture img {
		width: 56.6vw;
	}

	#toppage #section2 .contentBody #step2 h3 picture img {
		width: 62.1vw;
	}

	#toppage #section2 .contentBody #step3 h3 picture img {
		width: 46.1vw;
	}
}

/* -----------------------------MAIN [top] */
/*                              MAIN [top] Section "ARカメラ"  */

#toppage #section3 h3 {
	width: 650px;
	display: table;
	margin: 0 auto 10px auto;
}

#toppage #section3 h3 img.ballon {
	display: table-cell;
	width: 119px;
	margin-right: 15px;
}

#toppage #section3 h3 span {
	display: table-cell;
	width: 55vw;
	vertical-align: middle;
}

#toppage #section3 .arImage {
	text-align: center;
	width: 500px;
	margin: 0 auto 50px auto;
}

#toppage #section3 .arImage img {
	width: 100%;
}


#toppage #section3 h4 {
	text-align: center;
	margin: 0 auto 30px auto;
}

#toppage #section3 h4.nurie {
	width: 390px;
}

#toppage #section3 h4.other {
	width: 340px;
}

#toppage #section3 h4 img {
	width: 100%;
}

#toppage #section3 ul {
	width: 700px;
	margin: 0 auto 6vw auto;
}

#toppage #section3 ul li {
	display: inline-block;
	width: 33%;
	padding: 20px;
}

#toppage #section3 ul li img {
	width: 100%;
	max-height:135px;
	object-fit: contain;
}

#toppage #section3 .daishiBanner {
	text-align: center;
	margin-bottom: 30px;
}

#toppage #section3 p {
	text-align: center;
	font-size:2rem;
}

@media only screen and (max-width: 767px) {


	#toppage #section3 h3 {
		width: 100%;
		display: table;
		margin-bottom: 3vw;
	}

	#toppage #section3 h3 img.ballon {
		display: table-cell;
		width: 25vw;
		top: 0;
		vertical-align: middle;
	}

	#toppage #section3 h3 span {
		display: table-cell;
		width: 55vw;
		vertical-align: middle;
	}

	#toppage #section3 h3 span img {
		width: 100%;
	}

	#toppage #section3 .arImage {
		width: 74vw;
		margin: 0 auto 5vw auto;
	}

	#toppage #section3 .arImage img {
		width: 100%;
	}

	#toppage #section3 h4 {
		margin: 0 auto 3vw auto;
	}

	#toppage #section3 h4 img {
		width: 100%;
	}

	#toppage #section3 h4.nurie {
		width: 71.3vw;
	}

	#toppage #section3 h4.other {
		width: 63.3vw;
	}

	#toppage #section3 ul {
		width: 86vw;
		margin: 0 auto 4vw auto;
	}

	#toppage #section3 ul li {
		width: 28vw;
		padding: 1vw;
	}

	#toppage #section3 ul li img {
		width: 100%;
		max-height:18.2vw;
		object-fit: contain;
	}

	#toppage #section3 .daishiBanner {
		width: 67vw;
		margin: 0 auto 3vw auto;
		text-align: center;
	}

	#toppage #section3 .daishiBanner img {
		width: 100%;
	}
	#toppage #section3 p {
		margin-bottom:2em;
		font-size:1.6rem;
	}

}


/* -----------------------------MAIN [top] */
/*                              MAIN [top] Section "サービス紹介"  */

#toppage #section4 .contentBody {
	text-align: center;
}

#toppage #section4 h3 {
	text-align: center;
	margin-bottom: 25px;
}


#toppage #section4 h3 img {
	width: 412px;
	height: 25px;
}

#toppage #section4 .serviceImage1 {
	width: 90%;
	margin-bottom: 84px;
}

#toppage #section4 .point {
	text-align: center;
}

#toppage #section4 .pointIcon {
	margin-bottom: 20px;
}

#toppage #section4 .pointText {
	margin-top: 20px;
}

#toppage #section4 p {
	margin-top: 20px;
	margin-bottom: 40px;
	font-size:2rem;
}

#toppage #section4 .serviceImage2 img {
	width: 90%;
}

@media only screen and (max-width: 767px) {

	#toppage #section4 h3{
		margin-top: 3vw;
		margin-bottom: 3vw;
	}

	#toppage #section4 h3 img {
		width: 79.2vw;
		height: 4.9vw;
	}

	#toppage #section4 .serviceImage1 {
		width: 100%;
		margin-bottom: 3vw;
	}

	#toppage #section4 .serviceCourse {
		width: 76.2vw;
		height: 11.2vw;
	}

	#toppage #section4 .courseText {
		width: 77.3vw;
		height: 9.2vw;
		display: block;
		margin: 0 auto 7vw auto;
	}

	#toppage #section4 .serviceImage2 {
		width: 100%;
		margin-bottom: 3vw;
	}

	#toppage #section4 .pointIcon {
		width: 16.5vw;
		height: 17.3vw;
		margin-bottom: 1vw;
	}

	#toppage #section4 .pointText {
		margin-top: 6.4vw;
		margin-left: 2.2vw;
	}

	#toppage #section4 p {
		margin-top: 0;
		margin-bottom: 7vw;
		font-size:1.6rem;
		line-height: 1.7;
	}

	#toppage #section4 #point1 .pointText {
		width: 61.4vw;
		height: 4.9vw;
	}

	#toppage #section4 #point2 .pointText {
		width: 61.4vw;
		height: 4.9vw;
	}

	#toppage #section4 #point3 .pointText {
		width: 61.4vw;
		height: 4.9vw;
	}

}

/* -----------------------------MAIN [top] */
/*                              MAIN [top] Section "他にもこんなアプリがあるよ"  */

#toppage #section5 .appIcons {
	margin: 40px auto 0 auto;
	text-align: center;
}

#toppage #section5 .appIcons img {
	width: 137px;
	margin: 0 40px;
}


@media only screen and (max-width: 767px) {

	#toppage #section5 .appIcons img {
		margin: 0 3vw;
	}

	#toppage #section5 .appIcons img {
		width: 17vw;
	}

}


/* -----------------------------MAIN [books] */
/*                              MAIN [books] タイトル  */

#books main h2 {
	text-align: center;
	margin-top: 20px;
}

@media only screen and (max-width: 767px) {
	#books main h2 {
		margin-top: 0;
	}

	#books main h2 img {
		width: 64vw;
	}
}


/* -----------------------------MAIN [books] */
/*                              MAIN [books] ページ内リンクメニュー  */

#books main ul.daishiNav {
	width: 96%;
	max-width: 960px;
	margin: auto;
}

#books main ul.daishiNav li {
	display: inline-block;
	width: 12.2%;
}


#books main ul.daishiNav li img {
	width: 100%;
	margin: 0 5%;
}

@media only screen and (max-width: 840px) {
	#books main ul.daishiNav {
		width: 96%;
		max-width: 96%;
		margin:2.5vw auto;
	}

	#books main ul.daishiNav li {
		width: 12%;
	}
}

@media only screen and (max-width: 767px) {
	#books main ul.daishiNav {
		width: 94%;
	}

	#books main ul.daishiNav li {
		width: 24%;
	}
}

/* -----------------------------MAIN [books] */
/*                              MAIN [books] 説明テキスト  */


#books main p.description {
	text-align: center;
	font-size: 1.7rem;
	font-weight: bold;
	line-height: 1.7;
	margin-top: 0.7em;
}


#books main p.description.descriptionBottom{
	margin-top:0;
	margin-bottom:80px;
}

@media only screen and (max-width: 767px) {

	#books main p.description {
		width: 94%;
		text-align: left;
		font-size: 1.8rem;
		line-height: 1.5;
		margin: 1em auto;
	}

	#books main p.description.descriptionBottom{
		margin-top:0;
		margin-bottom:3em;
	}


}

/* -----------------------------MAIN [books] */
/*                              MAIN [books] ダウンロード手順リンク  */
#books main ul.dlGuide {
	width: 80%;
	max-width: 960px;
	margin: 1em auto;
	position: relative;
	display:table;
}

#books main ul.dlGuide li {
	display: table-cell;
	width: 45%;
	text-align: center;
	vertical-align: middle;
}


#books main ul.dlGuide li img {
	width: 80%;
	max-width:363px;
}

@media only screen and (max-width: 767px) {

	#books main ul.dlGuide {
		width: 90%;
		left: 0;
		display: block;
	}

	#books main ul.dlGuide li {
		display: block;
		width: 90%;
		text-align: left;
	}

	#books main ul.dlGuide li img {
		width: 67.9vw;
		margin-bottom: 1.5vw;
	}

	#books main ul.dlGuide li:last-child img {
		width: 71.6vw;
	}
}

/* -----------------------------MAIN [books] */
/*                              MAIN [books] 説明ビジュアル  */

#books main .visual {
	width: 96%;
	max-width: 960px;
	margin: 20px auto 70px auto;
	text-align: center;
}

#books main .visual img {
	width: 100%;
}


@media only screen and (max-width: 767px) {
	#books main .visual {
		margin: 20px auto 15vw auto;
		position: relative;
		left:1%;
	}
}

/* -----------------------------MAIN [books] */
/*                              MAIN [books] 台紙一覧 テキスト */

#books p.dltext {
	font-size: 1.8rem;
	font-weight: bold;
	text-align: center;
	margin-top: 0.5em;
}

@media only screen and (max-width: 767px) {
	#books p.dltext {
		margin-top: 0.3em;
	}
}


/* -----------------------------MAIN [books] */
/*                              MAIN [books] 台紙一覧 */

#books .thumbWrap {
	padding-top:50px;
}



#books .thumblist {
	position: relative;
	width: 100%;
	max-width: 960px;
	margin: 40px auto 20px auto;
	left: 1%;
}

#books .thumblist li {
	display: inline-block;
	width: 18%;
	margin: 0.5% 0.5% 3em 0.5%;
	position: relative;
	vertical-align: top;
}

#books .thumblist li img.thumb_c {
	width: 100%;
	margin-left: 5%;
}

#books .thumblist li img.n3d {
	position: absolute;
	top: -10px;
	right: 0;
	width: 40px;
}
#books .thumblist li img.n2d {
	position: absolute;
	top: -10px;
	right: 0;
	width: 150px;
}

#books .thumblist li span {
	display: block;
	font-size: 1.8rem;
	font-weight: bold;
	text-align: center;
	margin-top: 0.5em;
	margin-left: 5%;
}

@media only screen and (max-width: 767px) {

	#books .thumbWrap {
		padding-top:11.5vw;
	}


	#books .thumblist {
		width: 100%;
		margin: 3em auto;
		left: -1%;
	}


	#books .thumblist li {
		width: 31%;
		padding: 0.5%;
	}

	#books .thumblist li img.thumb_c {
		margin-left: 8%;
	}

	#books .thumblist li img.n3d {
		top: -2vw;
		right: -1.5vw;
		width: 8vw;
	}

	#books .thumblist li img.n2d {
		top: -2vw;
		right: -1.5vw;
	}

	#books .thumblist li span {
		font-size: 1.5rem;
	}

	#books .thumblist li span {
		margin-top: 0.5em;
		margin-left: 10%;
	}

}


/* -----------------------------MAIN [books] */
/*                              MAIN [books] 台紙一覧 カテゴリタイトル */



#books main h3 {
	position: relative;
	width: 100%;
	max-width: 960px;
	height: 71px;
	margin: 0 auto 40px auto;
	padding: 20px 40px;
	border-radius: 16px;
}

#books main h3:after {
	content: "";
	display: inline-block;
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	right: 15px;
}

@media only screen and (max-width: 767px) {
	#books main h3 {
		position: relative;
		width: 100%;
		height: 10vw;
		margin: 0 auto 2em auto;
		padding: 3vw 7.5vw;
		border-radius: 2vw;
		max-width: 91.7vw;
	}

	#books main h3:after {
		top: -7.5vw;
		right: 2.3vw;
	}
}


/* -----------------------------MAIN [books] */
/*                              MAIN [books] 台紙一覧 カテゴリタイトル個別設定 */
/* ---------------------------------------- Puipuimolcar3D */

#books main #Puipuimolcar3D h3 {
	background-color: #dc8e84;
	box-shadow: 1px 1px 3px 2px rgba(125, 125, 125, 0.42), -3px -3px 7px 1px #fa9a8e inset, 0px 0px 4px 2px #fa9a8e inset, 1px 1px 4px 2px #ffffff inset
}

#books main #Puipuimolcar3D h3:after {
	width: 106px;
	height: 103px;
	background-image: url('../books/img/title_3DPuipuimolcar_image.png');
	top: -42px;
}

#books main #Puipuimolcar3D h3 img {
	width: 300px;
}

@media only screen and (max-width: 767px) {

	#books main #Puipuimolcar3D h3:after {
		width: 17.2vw;
		height: 17.9vw;
		top: -7vw;
	}

	#books main #Puipuimolcar3D h3 img {
		width: 23.2vw;
	}
}
/* ---------------------------------------- thomasNew */

#books main #thomasNew h3 {
	background-color: #1d9fd6;
	box-shadow: 1px 1px 3px 2px rgba(125, 125, 125, 0.42), -3px -3px 7px 1px #70bcdc inset, 0px 0px 4px 2px #70bcdc inset, 1px 1px 4px 2px #ffffff inset
}

#books main #thomasNew h3:after {
	width: 106px;
	height: 118px;
	background-image: url('../books/img/title_thomasNew_image.png');
	top: -48px;
}

#books main #thomasNew h3 img {
	width: 283px;
}

@media only screen and (max-width: 767px) {

	#books main #thomasNew h3:after {
		width: 18.2vw;
		height: 19.5vw;
		top: -9.5vw;
	}

	#books main #thomasNew h3 img {
		width: 22.3vw;
	}
}
/* ---------------------------------------- vehiclezoo */

#books main #vehiclezoo h3 {
	background-color: #D2D001;
	box-shadow: 1px 1px 3px 2px rgba(125, 125, 125, 0.42), -3px -3px 7px 1px #D2D001 inset, 0px 0px 4px 2px #D2D001 inset, 1px 1px 4px 2px #ffffff inset
}

#books main #vehiclezoo h3:after {
	width: 106px;
	height: 103px;
	background-image: url('../books/img/title_vehiclezoo_image.png');
	top: -38px;
}

#books main #vehiclezoo h3 img {
	width: 350px;
}

@media only screen and (max-width: 767px) {

	#books main #vehiclezoo h3:after {
		width: 17.2vw;
		height: 17.9vw;
		top: -7vw;
	}

	#books main #vehiclezoo h3 img {
		width: 23.2vw;
	}
}
/* ---------------------------------------- puipuimolcar */

#books main #puipuimolcar h3 {
	background-color: #5ED1FF;
	box-shadow: 1px 1px 3px 2px rgba(125, 125, 125, 0.42), -3px -3px 7px 1px #5ED1FF inset, 0px 0px 4px 2px #5ED1FF inset, 1px 1px 4px 2px #ffffff inset
}

#books main #puipuimolcar h3:after {
	width: 106px;
	height: 103px;
	background-image: url('../books/img/title_puipuimolcar_image.png');
	top: -42px;
}

#books main #puipuimolcar h3 img {
	width: 300px;
}

@media only screen and (max-width: 767px) {

	#books main #puipuimolcar h3:after {
		width: 17.2vw;
		height: 17.9vw;
		top: -7vw;
	}

	#books main #puipuimolcar h3 img {
		width: 23.2vw;
	}
}

/*【Start「おばけずかん」終了対応（アン）】2025/11/27「おばけずかん」の契約が切れる為台紙サイトから「おばけずかん」のエリアを非表示 */
/* ---------------------------------------- obakezukan

#books main #obakezukan h3 {
	background-color: #BD46AC;
	box-shadow: 1px 1px 3px 2px rgba(125, 125, 125, 0.42), -3px -3px 7px 1px #BD46AC inset, 0px 0px 4px 2px #BD46AC inset, 1px 1px 4px 2px #ffffff inset
}

#books main #obakezukan h3:after {
	width: 106px;
	height: 103px;
	background-image: url('../books/img/title_obakezukan_image.png');
	top: -35px;
}

#books main #obakezukan h3 img {
	width: 230px;
}

@media only screen and (max-width: 767px) {

	#books main #obakezukan h3:after {
		width: 17.2vw;
		height: 17.9vw;
		top: -7vw;
	}

	#books main #obakezukan h3 img {
		width: 23.2vw;
	}
}*/
/*【End「おばけずかん」終了対応（アン）】2025/11/27「おばけずかん」の契約が切れる為台紙サイトから「おばけずかん」のエリアを非表示 */


/* ---------------------------------------- kumarba */

#books main #kumarba h3 {
	background-color: #82c0e3;
	box-shadow: 1px 1px 3px 2px rgba(125, 125, 125, 0.42), -3px -3px 7px 1px #3e8cb9 inset, 0px 0px 4px 2px #3e8cb9 inset, 1px 1px 4px 2px #ffffff inset
}

#books main #kumarba h3:after {
	width: 106px;
	height: 118px;
	background-image: url('../books/img/title_kumarba_image.png');
	top: -48px;
}

#books main #kumarba h3 img {
	width: 283px;
}

@media only screen and (max-width: 767px) {

	#books main #kumarba h3:after {
		width: 18.2vw;
		height: 19.5vw;
		top: -9.5vw;
	}

	#books main #kumarba h3 img {
		width: 22.3vw;
	}
}

/* ---------------------------------------- hoppe */

#books main #hoppe h3 {
	background-color: #ff90c8;
	box-shadow: 1px 1px 3px 2px rgba(125, 125, 125, 0.42), -3px -3px 7px 1px #f36cb4 inset, 0px 0px 4px 2px #f36cb4 inset, 1px 1px 4px 2px #ffffff inset
}

#books main #hoppe h3:after {
	width: 106px;
	height: 103px;
	background-image: url('../books/img/title_hoppe_image.png');
	top: -35px;
}

#books main #hoppe h3 img {
	width: 221px;
}

@media only screen and (max-width: 767px) {

	#books main #hoppe h3:after {
		width: 17.2vw;
		height: 17.9vw;
		top: -7vw;
	}

	#books main #hoppe h3 img {
		width: 23.2vw;
	}
}

/* ---------------------------------------- sunsunkidsTV */

#books main #sunsunkidsTV h3 {
	background-color: #95cbfa;
	box-shadow: 1px 1px 3px 2px rgba(125, 125, 125, 0.42), -3px -3px 7px 1px #68b1f1 inset, 0px 0px 4px 2px #68b1f1 inset, 1px 1px 4px 2px #ffffff inset
}

#books main #sunsunkidsTV h3:after {
	width: 106px;
	height: 103px;
	background-image: url('../books/img/title_sunsunkidsTV_image.png');
	top: -35px;
}

#books main #sunsunkidsTV h3 img {
	width: 280px;
}

@media only screen and (max-width: 767px) {

	#books main #sunsunkidsTV h3:after {
		width: 17.2vw;
		height: 17.9vw;
		top: -7vw;
	}

	#books main #sunsunkidsTV h3 img {
		width: 23.2vw;
	}
}


/* ---------------------------------------- kaijyustep */

#books main #kaijyustep h3 {
	background-color: #e45e62;
	box-shadow: 1px 1px 3px 2px rgba(125, 125, 125, 0.42), -3px -3px 7px 1px #e4023d inset, 0px 0px 4px 2px #e4023d inset, 1px 1px 4px 2px #ffffff inset
}

#books main #kaijyustep h3:after {
	width: 106px;
	height: 103px;
	background-image: url('../books/img/title_kaijyustep_image.png');
	top: -35px;
}

#books main #kaijyustep h3 img {
	width: 311px;
}

@media only screen and (max-width: 767px) {

	#books main #kaijyustep h3:after {
		width: 17.2vw;
		height: 17.9vw;
		top: -7vw;
	}

	#books main #kaijyustep h3 img {
		width: 23.2vw;
	}
}


/*【Start『ひみつのポムポムちゃん』終了対応（アン）】2025/12/03『ひみつのポムポムちゃん』の契約が切れる為台紙サイトから『ひみつのポムポムちゃん』のエリアを非表示 */
/* ---------------------------------------- pompom 

#books main #pompom h3 {
	background-color: #ef547c;
	box-shadow: 1px 1px 3px 2px rgba(125, 125, 125, 0.42), -3px -3px 7px 1px #ec3464 inset, 0px 0px 4px 2px #ec3464 inset, 1px 1px 4px 2px #ffffff inset
}

#books main #pompom h3:after {
	width: 106px;
	height: 103px;
	background-image: url('../books/img/title_pompom_image.png');
	top: -35px;
}

#books main #pompom h3 img {
	width: 311px;
}

@media only screen and (max-width: 767px) {

	#books main #pompom h3:after {
		width: 17.2vw;
		height: 17.9vw;
		top: -7vw;
	}

	#books main #pompom h3 img {
		width: 23.2vw;
	}
}*/
/*【End『ひみつのポムポムちゃん』終了対応（アン）】2025/12/03『ひみつのポムポムちゃん』の契約が切れる為台紙サイトから『ひみつのポムポムちゃん』のエリアを非表示 */


/* ---------------------------------------- sanrio */

#books main #sanrio h3 {
	background-color: #ff70b3;
	box-shadow: 1px 1px 3px 2px rgba(125, 125, 125, 0.42), -3px -3px 7px 1px #e84d95 inset, 0px 0px 4px 2px #e84d95 inset, 1px 1px 4px 2px #ffffff inset
}

#books main #sanrio h3:after {
	width: 106px;
	height: 103px;
	background-image: url('../books/img/title_sanrio_image.png');
	top: -35px;
}

#books main #sanrio h3 img {
	width: 311px;
}

@media only screen and (max-width: 767px) {

	#books main #sanrio h3:after {
		width: 17.2vw;
		height: 17.9vw;
		top: -7vw;
	}

	#books main #sanrio h3 img {
		width: 23.2vw;
	}
}


/* ---------------------------------------- hanakappa */

#books main #hanakappa h3 {
	background-color: #60c72e;
	box-shadow: 1px 1px 3px 2px rgba(125, 125, 125, 0.42), -3px -3px 7px 1px #39a405 inset, 0px 0px 4px 2px #39a405 inset, 1px 1px 4px 2px #ffffff inset
}

#books main #hanakappa h3:after {
	width: 90px;
	height: 110px;
	background-image: url('../books/img/title_hanakappa_image.png');
	top: -43px;
}

#books main #hanakappa h3 img {
	width: 160px;
}

@media only screen and (max-width: 767px) {

	#books main #hanakappa h3:after {
		width: 15.4vw;
		height: 18.9vw;
		top: -9vw;
	}

	#books main #hanakappa h3 img {
		width: 30.3vw;
	}
}

/* ---------------------------------------- tomica */

#books main #tomica h3 {
	background-color: #f72227;
	box-shadow: 1px 1px 3px 2px rgba(125, 125, 125, 0.42), -3px -3px 7px 1px #d40000 inset, 0px 0px 4px 2px #f7252a inset, 1px 1px 4px 2px #ffffff inset
}

#books main #tomica h3:after {
	width: 120px;
	height: 80px;
	background-image: url('../books/img/title_tomica_image.png');
	top: -23px;
}

#books main #tomica h3 img {
	width: 83px;
}

@media only screen and (max-width: 767px) {

	#books main #tomica h3:after {
		width: 19.8vw;
		height: 13.1vw;
		top: -3.5vw;
	}

	#books main #tomica h3 img {
		width: 15.5vw;
	}
}

/* ---------------------------------------- licca */

#books main #licca h3 {
	background-color: #e869ff;
	box-shadow: 1px 1px 3px 2px rgba(125, 125, 125, 0.42), -3px -3px 7px 1px #d34deb inset, 0px 0px 4px 2px #ea77ff inset, 1px 1px 4px 2px #ffffff inset
}

#books main #licca h3:after {
	width: 95px;
	height: 111px;
	background-image: url('../books/img/title_licca_image.png');
	top: -41px;
}

#books main #licca h3 img {
	width: 151px;
}

@media only screen and (max-width: 767px) {

	#books main #licca h3:after {
		width: 16.0vw;
		height: 20.4vw;
		top: -10.5vw;
	}

	#books main #licca h3 img {
		width: 28.6vw;
	}
}

/* ---------------------------------------- creater */

#books main #creater h3 {
	background-color: #ff9600;
	box-shadow: 1px 1px 3px 2px rgba(125, 125, 125, 0.42), -3px -3px 7px 1px #ec7f00 inset, 0px 0px 4px 2px #ffa31f inset, 1px 1px 4px 2px #ffffff inset
}

#books main #creater h3:after {
	width: 99px;
	height: 107px;
	background-image: url('../books/img/title_creater_image.png');
	top: -37px;
}

#books main #creater h3 img {
	width: 312px;
}

@media only screen and (max-width: 767px) {

	#books main #creater h3:after {
		width: 16.4vw;
		height: 17.6vw;
		top: -8vw;
	}

	#books main #creater h3 img {
		width: 59.4vw;
	}
}

/* ---------------------------------------- thomas */

#books main #thomas h3 {
	background-color: #22a9ff;
	box-shadow: 1px 1px 3px 2px rgba(125, 125, 125, 0.42), -3px -3px 7px 1px #0691ea inset, 0px 0px 4px 2px #26abff inset, 1px 1px 4px 2px #ffffff inset
}

#books main #thomas h3:after {
	width: 106px;
	height: 118px;
	background-image: url('../books/img/title_thomas_image.png');
	top: -48px;
}

#books main #thomas h3 img {
	width: 283px;
}

@media only screen and (max-width: 767px) {

	#books main #thomas h3:after {
		width: 18.2vw;
		height: 19.5vw;
		top: -9.5vw;
	}

	#books main #thomas h3 img {
		width: 22.3vw;
	}
}

/* ---------------------------------------- shinchan */

#books main #shinchan h3 {
	background-color: #3dc6ff;
	box-shadow: 1px 1px 3px 2px rgba(125, 125, 125, 0.42), -3px -3px 7px 1px #0da2e0 inset, 0px 0px 4px 2px #61cefb inset, 1px 1px 4px 2px #ffffff inset
}

#books main #shinchan h3:after {
	width: 106px;
	height: 118px;
	background-image: url('../books/img/title_shinchan_image.png');
	top: -48px;
}

#books main #shinchan h3 img {
	width: 283px;
}

@media only screen and (max-width: 767px) {

	#books main #shinchan h3:after {
		width: 18.2vw;
		height: 19.5vw;
		top: -9.5vw;
	}

	#books main #shinchan h3 img {
		width: 22.3vw;
	}
}

/* ---------------------------------------- koupen */

#books main #koupen h3 {
	background-color: #ffbc07;
	box-shadow: 1px 1px 3px 2px rgba(125, 125, 125, 0.42), -3px -3px 7px 1px #e8ad0c inset, 0px 0px 4px 2px #fbc32b inset, 1px 1px 4px 2px #ffffff inset
}

#books main #koupen h3:after {
	width: 106px;
	height: 118px;
	background-image: url('../books/img/title_koupen_image.png');
	top: -48px;
}

#books main #koupen h3 img {
	width: 283px;
}

@media only screen and (max-width: 767px) {

	#books main #koupen h3:after {
		width: 18.2vw;
		height: 19.5vw;
		top: -9.5vw;
	}

	#books main #koupen h3 img {
		width: 22.3vw;
	}
}



/* -----------------------------MAIN general  */

#general .contentBody h2 {
	font-size: 2.4rem;
	line-height: 1.8;
	font-weight: bold;
}


#general .contentBody h3 {
	font-size: 1.8rem;
	line-height: 2;
	font-weight: bold;
}

#general .contentBody h4 {
	font-size: 1.7rem;
	line-height: 2;
	font-weight: bold;
}


#general .contentBody p {
	margin-bottom: 1.7em;
	line-height: 1.4;
}



/* -----------------------------MAIN [general] faq  */

.faqnav {
	position: relative;
}

.faqnav ul.faqMenu {
	width: 98%;
	margin: 0 auto 0 auto;
	padding-left: 3%;
}

.faqnav ul.faqMenu li {
	width: 17%;
	display: inline-block;
	margin: 20px 1%;
	background-color: #0065be;
	text-align: center;
	border-radius: 8px;
}

.faqnav ul.faqMenu li:hover {
	background-color: #e62f3e;

}

.faqnav ul.faqMenu li a {
	display: block;
	padding: 20px 0.5vw;
	font-size: 1.15rem;
	font-weight: bold;
	color: white;
}


@media only screen and (max-width: 767px) {
	.faqnav {
		margin-bottom: 8vw;
	}

	.faqnav ul.faqMenu {
		margin-top: 0;
		padding-left: 0;
	}

	.faqnav ul.faqMenu li {
		width: 44%;
		margin: 1.5vw 2% 0 2%;
	}

	.faqnav ul.faqMenu li a {
		padding: 1.5em 0.5vw;
		font-size: 1.4rem;
		font-weight: bold;
	}

}

@media only screen and (max-width: 332px) {
	.faqnav ul.faqMenu li a {
		font-size: 1rem;
	}

}



/* -----------------------------MAIN [general] guide  */

#guide {
	width: 96%;
	max-width: 960px;
	margin: 0 auto 100px auto;
}

#guide h2 {
	text-align: center;
	margin-top: 0;
}

#guide h3 {
	background-color: #e62f3e;
	border-radius: 16px;
	color: white;
	text-align: center;
	margin-top: 30px;
	padding: 8px 0;
	font-size: 1.8rem;
	font-weight: bold;
}

#guide p {
	font-size: 1.6rem;
	line-height: 1.6;
	margin-top: 1em;
	font-weight: bold;
}

#guide h4 {
	font-size: 2rem;
	font-weight: bold;
	color: #0065be;
	margin-top: 2.5em;
	border-bottom: 3px solid #0065be;
	padding-bottom: 0.5em;
}

#guide .capture {
	width: 96%;
	max-width: 960px;
	text-align: center;
}

#guide .capture img {
	width: 30%;
	display: inline-block;
	margin: 20px 1%;
}


#guide .guideMenu ul {
	width: 100%;
	max-width: 768px;
	display: table;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 60px 0;
	margin: 50px auto;
}

#guide .guideMenu li {
	background-color: #0065be;
	color: white;
	text-align: center;
	width: 100%;
	height: 4em;
	display: table-cell;
	vertical-align: middle;
	font-weight: bold;
	border: 2px white solid;
	border-radius: 6px;
	box-shadow: 1px 1px 3px 2px rgba(125, 125, 125, 0.42);
	font-size: 1.4rem;
}

#guide .guideMenu li a {
	color: white;
	width:100%;
	display: block;
	padding:1em 0;
	line-height: 1.2;
}

#guide .guideMenu li:last-child  a {
	padding:1.5em 0;
}

#guide .guideMenu li:last-child {
	margin-right: 0;
}

#guide .guideMenu.urlMenu ul {
	margin: 30px auto;
}

#guide .guideMenu.urlMenu li {
	background-color: #e62f3e;
	cursor: pointer;
}

#guide .guideMenu.urlMenu li a{
	display: block;
    width: 100%;
}


@media only screen and (max-width: 767px) {

	#guide {
		margin: 0 auto 16vw auto;
	}

	#guide h2 img {
		width: 64vw;
	}
	#guide h4 {
		font-size: 1.8rem;
	}
	#guide .guideMenu ul {
		width: 100vw;
		max-width: 768px;
		border-spacing: 4vw 0;
		margin: 6vw 0 0 -4vw;
	}

	#guide .guideMenu li {
		width: 28vw;
		border-radius: 6px;
		box-shadow: 1px 1px 3px 2px rgba(125, 125, 125, 0.42);
		font-size: 1.4rem;
	}

	#guide .guideMenu.urlMenu ul {
		margin: 3vw 0 0 -4vw;
	}


}