@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Dancing+Script:400,700');
/*----------------------*/
/*          mb          */
/*----------------------*/
@media screen and (max-width: 768px) {
	.area.gray {
		background-color: #fff;
		margin-top:1px;
	}
	#topic .contentWrap-style1{ /*外枠消す*/
		border:0px;
	}
	#topic .content-topic {
		margin: 0 auto;
		padding-bottom: 20px;
		font-size:13px;
		padding:0;
	}
	#topic .content-topic:before { /*ピン消す*/
		background:none;
	}
	#topic .content-topic img {
		width: 100%;
		height: auto;
		vertical-align: top;
	}
	#topic .content img.img-responsive {
		width: 100%;
		height: auto;
		vertical-align: top;
	}
	#topic .content-topic .pc { display: none !important; }
	#topic .content-topic .sp { display: block !important; }


	/* ↓ここから個別↓ */
	#topic .content-main{
		padding: 1px 0 33px;
		font-family: '游ゴシック Medium','Yu Gothic Medium','游ゴシック体','Yu Gothic',YuGothic,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	}
	#topic .content-topic a {
		text-decoration: underline;
		color: #0071bb;
	}
	#topic .content-topic p {
		font-size: 13px;
		line-height: 1.8em;
		margin-top:15px;
	}
	#topic h1 {
		font-size:1.3em;
		color:#43c2e2;
		font-weight:bold;
		line-height:1.5em;
		margin-bottom:15px;
		text-align:center;
	}
	#topic h3{
		font-size:1.1em;
		font-weight:bold;
		line-height:1.6em;
		margin:20px 0 15px;
		color:#dac02e;
	}
	#topic h3 span{
		font-size:1.2em;
	}
	#topic h4{
		font-size:1.2em;
		font-weight:bold;
		color:#231815;
	}

	/********** area1 **********/
	#topic div#area1{
		margin: 0 15px 50px;
	}
	#topic div#area1 h3{
		text-align:center;
		margin-top:30px;
		letter-spacing:0.1em;
	}
	#topic div#area1 p{
		text-align:left;
	}

	/********** area2 **********/
	#topic div#area2{
		box-sizing:border-box;
	}
	#topic div#area2 h2{
		width: 100%;
		margin: 0 0 25px;
		height: 0;
		overflow: hidden;
	}
	#topic div#point1 h2{
		padding: 62px 0 0;
		background: url(images/point1.png) no-repeat 50% 0;
		background-size:730px auto;
	}
	#topic div#point2 h2{
		padding: 85px 0 0;
		background: url(images/point2.png) no-repeat 50% 0;
		background-size:730px auto;
	}
	#topic div#point3 h2{
		padding: 62px 0 0;
		background: url(images/point3.png) no-repeat 50% 0;
		background-size:730px auto;
	}
	#topic div#area2 p{
	}
	#topic div#point1{
		margin-bottom:60px;
	}
	#topic div#point1 div.jute_type{
		margin:0 auto 50px;
	}
	#topic div#point1 div.jute_type img.jute_img{
		width:200px;
		height:auto;
		float:left;
	}
	#topic div#point1 div.jute_type h1{
		text-align:left;
	}
	#topic div#point1 div.jute_type h1 img{
		height:40px;
		width:auto;
	}
	#topic div#point1 div.jute_type h3{
		letter-spacing:0.05em;
		margin:15px 0 0;
	}
	#topic div#point1 div.jute_type p{
		font-size:0.8em;
		overflow:hidden;
	}
	#topic div#point2{
		text-align:center;
		margin-bottom:30px;
	}
	#topic div#point2 img{
		width:96%;
		margin-bottom:20px;
	}
	#topic div#point2 p{
		text-align:left;
		margin:15px 15px 0;
	}
	#topic div#point3{
		margin-bottom:20px;
	}
	#topic div#point3 p{
		margin:15px 15px 0;
	}

	/********** area3 **********/
	#topic div#area3{
		margin-bottom:50px;
		text-align:center;
	}
	#topic div#area3 img{
		border-top:solid 1px #231815;
		margin-top:40px;
	}
	#topic div#area3 p{
		font-size:0.8em;
		margin-top:15px;
		color:#666;
	}

	/********** area4 **********/
	#topic div#area4{
		margin:0 0 40px;
		padding:10px 7px 50px;
		background-color:#dff1ee;
		text-align:center;
		box-sizing:border-box;
	}
	#topic div#area4 div#pdf_link a{
		display:block;
		width:250px;
		padding:12px 0 12px 7px;
		text-align:center;
		color:#fff;
		background-color:#231815;
		text-decoration:none;
		letter-spacing:2px;
		margin:30px auto 0;
		font-weight:bold;
		font-size:0.8em;
	}
	#topic div#area4 div#pdf_link span{
		font-size:1.1em;
	}

	/********** area7 **********/
	#topic div#area7{
		margin-bottom:40px;
	}
	#topic div#area7 h3{
		margin:10px 0;
		font-size:12px;
	}
	#topic div#area7 p{
		margin:0;
	}
	#topic div#area7 .flexbox {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin:15px 5px 5px;
	}
	#topic div#area7 .bookbox{
		flex:1;
		margin:10px;
	}
	#topic div#area7 .bookbox img{
		border:1px solid #ddd;
	}

	/********** area6 **********/
	#topic div#area6{
		background: url(images/illust.png) no-repeat 50% 0;
		background-size:100px auto;
		padding-top:50px;
		margin: 0 auto 20px;
	}
	#topic div#area6 p{
		margin:0 15px;
	}

	/********** 購入button **********/
	#topic .btnsArea {
		margin: 35px 0;
	}
	#topic .btnsArea .btnBuy {
		width: 100%;
		max-width: 340px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 20px;
	}
	#topic .btnsArea .btnBuy a {
		display: block;
		background-color: #ed1350;
		padding: 17px 0 13px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		border-radius: 45px;
		text-align: center;
		text-decoration: none;
		position: relative;
		-webkit-transition-duration: 200ms;
		-moz-transition-duration: 200ms;
		-o-transition-duration: 200ms;
		-ms-transition-duration: 200ms;
		transition-duration: 200ms;
	}
	#topic .btnsArea .btnBuy a:after {
		font-family: icomoon;
		content: '\e933';
		font-weight: normal;
		color: #fff;
		font-size: 11px;
		display: inline-block;
		position: absolute;
		top: 50%;
		right: 15px;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		-webkit-transition-duration: 200ms;
		-moz-transition-duration: 200ms;
		-o-transition-duration: 200ms;
		-ms-transition-duration: 200ms;
		transition-duration: 200ms;
	}
	#topic .btnsArea .btnBuy a >span {
		color: #fff;
		font-size: 13px;
		line-height: 1;
		font-weight: bold;
		vertical-align: middle;
		-webkit-transition-duration: 200ms;
		-moz-transition-duration: 200ms;
		-o-transition-duration: 200ms;
		-ms-transition-duration: 200ms;
		transition-duration: 200ms;
		padding: 0 17px 0 38px;
		position: relative;
	}
	#topic .btnsArea .btnBuy a >span:before {
		font-family: icomoon;
		content: '\e921';
		font-weight: normal;
		color: #fff;
		font-size: 20px;
		display: inline-block;
		position: absolute;
		top: 50%;
		left: 0;
		-webkit-transform: translateY(-63%);
		-moz-transform: translateY(-63%);
		-o-transform: translateY(-63%);
		-ms-transform: translateY(-63%);
		transform: translateY(-63%);
		-webkit-transition-duration: 200ms;
		-moz-transition-duration: 200ms;
		-o-transition-duration: 200ms;
		-ms-transition-duration: 200ms;
		transition-duration: 200ms;
	}
}

/*----------------------*/
/*          pc          */
/*----------------------*/
@media print, screen and (min-width: 769px) {
	#topic {
		margin-top: -30px;
		margin-bottom: 70px;
	}
	#topic div.image{
		text-align:center;
	}
	#topic .content-topic {
		margin: 0 auto;
		padding-top:68px;
		padding-bottom: 100px;
	}
	#topic .content-topic a {
		text-decoration: underline;
		color: #0071bb;
		-webkit-transition-duration: 200ms;
		-moz-transition-duration: 200ms;
		-o-transition-duration: 200ms;
		-ms-transition-duration: 200ms;
		transition-duration: 200ms;
	}
	#topic .content-topic a:hover {
		text-decoration: none;
		opacity: 0.7;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
		filter: alpha(opacity=70);
	}
	#topic .content-topic .pc { display: block !important; }
	#topic .content-topic .sp { display: none !important; }


	/* ↓ここから個別↓ */
	#topic .content-main {
		margin-bottom:40px;
	}
	#topic p{
		font-family: '游ゴシック Medium','Yu Gothic Medium','游ゴシック体','Yu Gothic',YuGothic,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
		line-height:2em;
		margin:0;
		font-size:14px;
		color:#231815;
	}
	#topic h3{
		font-family: '游ゴシック Bold','Yu Gothic Bold','游ゴシック体','Yu Gothic',YuGothic,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
		color:#dac02e;
		font-size:1.1em;
		font-weight:600;
		line-height:1.6em;
		margin:30px 0 15px;
	}
	#topic h3 span{
		font-size:1.3em;
	}
	#topic h4{
		font-size:1.2em;
		font-weight:bold;
		color:#231815;
	}

	/********** area1 **********/
	#topic div#area1{
		margin: 0 auto 70px;
		width:730px;
	}
	#topic div#area1 h3{
		text-align:center;
		margin-top:50px;
		letter-spacing:0.1em;
	}
	#topic div#area1 p{
		text-align:left;
	}

	/********** area2 **********/
	#topic div#area2{
		box-sizing:border-box;
	}
	#topic div#area2 h2{
		width: 960px;
		margin: 0 0 40px;
		height: 0;
		overflow: hidden;
	}
	#topic div#point1 h2{
		padding: 80px 0 0;
		background: url(images/point1.png) no-repeat 0 0;
		background-size:960px auto;
	}

	#topic div#point2 h2{
		padding: 110px 0 0;
		background: url(images/point2.png) no-repeat 0 0;
		background-size:960px auto;
	}
	#topic div#point3 h2{
		padding: 80px 0 0;
		background: url(images/point3.png) no-repeat 0 0;
		background-size:960px auto;
	}
	#topic div#area2 p{
	}
	#topic div#point1{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: stretch;
		margin-bottom:60px;
	}
	#topic div#point1 div.jute_type{
		width: 300px;
		box-sizing: border-box;
	}
	#topic div#point1 div.jute_type img.jute_img{
		width:300px;
		height:auto;
	}
	#topic div#point1 div.jute_type h1 img{
		height:70px;
		width:auto;
	}
	#topic div#point1 div.jute_type img{
		margin-bottom: 3px;
	}
	#topic div#point1 div.jute_type h3{
		letter-spacing:0.05em;
		margin-top:20px;
	}
	#topic div#point1 div.jute_type p{
		font-size:0.75em;
	}
	#topic div#point2{
		text-align:center;
		margin-bottom:60px;
	}
	#topic div#point2 img{
		margin-bottom:30px;
	}
	#topic div#point2 p{
		text-align:left;
		width:820px;
		margin:0 auto 0;
	}
	#topic div#point3{
		margin-bottom:60px;
		overflow:hidden;
	}
	#topic div#point3 img{
		float:left;
		margin-right:30px;
	}

	/********** area3 **********/
	#topic div#area3{
		margin-bottom:100px;
		text-align:center;
	}
	#topic div#area3 img{
		border-top:solid 1px #231815;
		margin-top:40px;
	}
	#topic div#area3 p{
		margin-top:15px;
	}

	/********** area4 **********/
	#topic div#area4{
		margin:50px 0 100px;
		padding:10px 0 50px;
		background-color:#dff1ee;
		text-align:center;
	}
	#topic div#area4 div#pdf_link a{
		display:block;
		width:350px;
		padding:12px 0 12px 7px;
		text-align:center;
		color:#fff;
		background-color:#231815;
		text-decoration:none;
		letter-spacing:2px;
		margin:30px auto 0;
		font-weight:bold;
		font-size:0.8em;
	}
	#topic div#area4 div#pdf_link span{
		font-size:1.1em;
	}

	/********** area7 **********/
	#topic div#area7 {
		margin-bottom:40px;
	}
	#topic div#area7 h4{
		text-align:center;
		margin-bottom:30px;
	}
	#topic div#area7 h3{
		margin-top:15px;
	}

	#topic div#area7 .flexbox {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	#topic div#area7 .bookbox{
		width:300px;
		margin:20px;
	}

	/********** area6 **********/
	#topic div#area6{
		background: url(images/illust.png) no-repeat 50% 0;
		padding-top:90px;
		margin: 0 auto 70px;
		width:730px;
	}
	#topic div#area6 p{
		text-align:left;
	}

	/********** 購入button **********/
	#topic .btnsArea {
		margin: 51px 0;
	}
	#topic .btnsArea .btnBuy {
		width: 546px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 20px;
	}
	#topic .btnsArea .btnBuy a {
		display: block;
		background-color: #ed1350;
		padding: 14px 0 13px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		border-radius: 45px;
		text-align: center;
		text-decoration: none;
		position: relative;
		-webkit-transition-duration: 200ms;
		-moz-transition-duration: 200ms;
		-o-transition-duration: 200ms;
		-ms-transition-duration: 200ms;
		transition-duration: 200ms;
	}
	#topic .btnsArea .btnBuy a:after {
		font-family: icomoon;
		content: '\e933';
		font-weight: normal;
		color: #fff;
		font-size: 11px;
		display: inline-block;
		position: absolute;
		top: 50%;
		right: 15px;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		-webkit-transition-duration: 200ms;
		-moz-transition-duration: 200ms;
		-o-transition-duration: 200ms;
		-ms-transition-duration: 200ms;
		transition-duration: 200ms;
	}
	#topic .btnsArea .btnBuy a >span {
		color: #fff;
		font-size: 16px;
		line-height: 1;
		font-weight: bold;
		vertical-align: middle;
		-webkit-transition-duration: 200ms;
		-moz-transition-duration: 200ms;
		-o-transition-duration: 200ms;
		-ms-transition-duration: 200ms;
		transition-duration: 200ms;
		padding: 0 11px 0 39px;
		position: relative;
	}
	#topic .btnsArea .btnBuy a >span:before {
		font-family: icomoon;
		content: '\e921';
		font-weight: normal;
		color: #fff;
		font-size: 19px;
		display: inline-block;
		position: absolute;
		top: 50%;
		left: 0;
		-webkit-transform: translateY(-63%);
		-moz-transform: translateY(-63%);
		-o-transform: translateY(-63%);
		-ms-transform: translateY(-63%);
		transform: translateY(-63%);
		-webkit-transition-duration: 200ms;
		-moz-transition-duration: 200ms;
		-o-transition-duration: 200ms;
		-ms-transition-duration: 200ms;
		transition-duration: 200ms;
	}
	#topic .btnsArea .btnBuy a:hover {
		opacity: 0.7;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
		filter: alpha(opacity=70);
	}
}