@charset "UTF-8";

/* Modules
====================================================*/

.wrap_inline {
	display:inline-block
}

a {
	color:#333333;
	text-decoration:none;
}

.sp_inline {
	display:inline-block !important;
}

.pc {
	display:none !important;
}

.pc_inline {
	display:none !important;
}

.txt_u {
	text-decoration:underline !important;
}

.txt_c {
	text-align:center !important;
}

.txt_l {
	text-align:left !important;
}

.txt_r {
	text-align:right !important;
}

.box_wh {
	max-width:1000px;
	margin:0 auto;
	padding:clamp(30px, calc(18px + 3.2vw), 50px) clamp(30px, calc(18px + 3.2vw), 50px);
	box-sizing:border-box;
	border-radius:20px;
	background-color:#FFFFFF;
}

.box_wh + .box_wh {
	margin-top:clamp(20px, calc(11px + 2.4vw), 35px);
}

.box_f {
	display:-webkit-box;
	display:flex;
}

.box_f-c {
	display:-webkit-box;
	display:flex;
	-webkit-box-align:center;
	align-items:center;
}

.box_f-sb {
	display:-webkit-box;
	display:flex;
	-webkit-box-pack:justify;
	justify-content:space-between;
}

.d_block {
	display:block !important;
}

.d_iblock {
	display:inline-block !important;
}

.d_inline {
	display:inline !important;
}

.m_auto {
	margin:auto !important;
}

.mt0 {
	margin-top:0 !important;
}

.mt20 {
	margin-top:20px !important;
}

.mt30 {
	margin-top:30px !important;
}

.mt40 {
	margin-top:40px !important;
}

.mt50 {
	margin-top:50px !important;
}

.mb0 {
	margin-bottom:0 !important;
}

.mb10 {
	margin-bottom:10px !important;
}

.mb20 {
	margin-bottom:20px !important;
}

.mb30 {
	margin-bottom:30px !important;
}

.mb40 {
	margin-bottom:40px !important;
}

.mb50 {
	margin-bottom:50px !important;
}

.mlr20 {
	margin-left:20px !important;
	margin-right:20px !important;
}

.plr20 {
	padding-left:20px !important;
	padding-right:20px !important;
}


.w100 {
	width:100% !important;
}

.w90 {
	width:90% !important;
}

.w80 {
	width:80% !important;
}

.w70 {
	width:70% !important;
}

.w60 {
	width:60% !important;
}

.w50 {
	width:50% !important;
}

.w40 {
	width:40% !important;
}

.w30 {
	width:30% !important;
}

.w20 {
	width:20% !important;
}

.w15 {
	width:15% !important;
}

.w10 {
	width:10% !important;
}

.w5 {
	width:5% !important;
}

.w0 {
	width:0% !important;
}

.w100px {
	width:100px !important;
}

.w200px {
	width:200px !important;
}

.w300px {
	width:300px !important;
}

.w300px {
	width:300px !important;
}

.w400px {
	width:400px !important;
}

.w500px {
	width:500px !important;
}

.w600px {
	width:600px !important;
}


.mw100px {
	max-width:100px !important;
}

.mw200px {
	max-width:200px !important;
}

.mw300px {
	max-width:300px !important;
}

.mw300px {
	max-width:300px !important;
}

.mw400px {
	max-width:400px !important;
}

.mw500px {
	max-width:500px !important;
}

.mw600px {
	max-width:600px !important;
}


/* --- Notice --- */

.stacit_default .more a {
	text-decoration:none;
}

.notice_detail .notice_detail_txt {
	max-width:660px !important;
}

.notice_detail .notice_detail_txt br {

}
.notice_detail .notice_detail_txt.recommend-book h3 {
	margin-top:0 !important;
	border-bottom:0;
	font-size:clamp( 16px, calc( 10px + 1.6vw ), 26px );
	line-height:1.6;
}

.notice_detail .notice_detail_txt.recommend-book h3 + p {
	line-height:1.6;
}

.notice_detail .recommend-book {
	margin-top:clamp( 30px, calc( 12px + 4.8vw ), 60px );
	padding-top:clamp( 25px, calc( 19px + 1.6vw ), 35px );
	background-image:url(../img/recommendbook_bg.png);
	background-repeat:repeat-x;
	background-size:auto clamp( 5px, calc( 2px + 0.8vw ), 10px );
	background-position:left top;
}

.notice_detail .recommend-book.recommend-book h4 {
	width:58%;
	margin:0 0 0 clamp( 15px, calc( 12px + 0.8vw ), 20px );
	font-size:clamp( 14px, calc( 8px + 1.6vw ), 24px );
	line-height:1.4;
	color:#333333;
}

.notice_detail .recommend-book.recommend-book h4 span {
	font-size:clamp( 10px, calc( 6.4px + 0.96vw ), 16px );
	font-weight:normal;
}


.notice_detail .recommend-book_comment {
	margin-top:clamp( 15px, calc( 6px + 2.4vw ), 30px );
	display:inline-block
}

.notice_detail .recommend-img_wrap {
	display:-webkit-box;
	display:flex;
	-webkit-box-align:start;
	align-items:flex-start;
}

.notice_detail .recommend-img {
	width:42%;
	min-width:140px;
}

.notice_detail .recommend-book_summary_ttl {
	font-size:clamp( 12px, calc( 4.800000000000001px + 1.92vw ), 24px );
	font-weight:bold;
}

.notice_detail .recommend-book_summary {
	padding:clamp( 15px, calc( 6px + 2.4vw ), 30px ) 0;
	border-top:#7F7F7F 1px dashed;
	border-bottom:#7F7F7F 1px dashed;
}

.notice_detail .recommend-book_link {
	padding-top:clamp( 15px, calc( 9px + 1.6vw ), 25px );
	display:-webkit-box;
	display:flex;
	flex-wrap: wrap;
}

.notice_detail .recommend-book_link > div {
	width:100%;
}

.notice_detail .recommend-book_link > div + div {
	margin-top:clamp( 10px, calc( 7px + 0.8vw ), 15px );
}

.notice_detail .recommend-book_link a {
	padding-left:clamp( 15px, calc( 6px + 2.4vw ), 30px );
	display:inline-block;
	background-image:url(../img/arrow_recommendbook.png);
	background-repeat:no-repeat;
	background-size:clamp( 10px, calc( 5.2px + 1.28vw ), 18px ) auto;
	background-position:left center;
}

/* --- First2 --- */

.first2 h2 {
	letter-spacing:0.02em;
}

.first2 .you-can.crayon {
	padding:clamp( 50px, calc( 32px + 4.8vw ), 80px ) 0 clamp( 0px, calc( -12px + 3.2vw ), 20px );
	background-image:url(../img/bg_crayon_ygreen01.png), url(../img/bg_crayon_ygreen03.png);
}

.first2_ttl_wrap {
	text-align:center;
	
}

.first2 p.first2_ttl {
    padding:0 1.5rem;
    position: relative;
	display:inline-block;
	font-size:clamp( 15px, calc( 6px + 2.4vw ), 30px );
	line-height:1.6;
	text-align:center;
	font-weight:bold;
	color:#6A3A3D;
}

.first2 p.first2_ttl::before,
.first2 p.first2_ttl::after {
    position: absolute;
    top: 0.8rem;
    height: 1.8rem;
    content: '';
}

.first2 p.first2_ttl::before {
    border-left: solid 2px;
    left: 0;
    transform: rotate(-30deg);
}

.first2 p.first2_ttl::after {
    border-right: solid 2px;
    right: 0;
    transform: rotate(30deg);
}

.first2 .you-can ul {
	max-width:900px;
	margin:clamp( 20px, calc( 8px + 3.2vw ), 40px ) auto clamp( 20px, calc( 5px + 4vw ), 45px );
}

.first2 .you-can ul li {
	padding:clamp( 15px, calc( 6px + 2.4vw ), 30px ) clamp( 15px, calc( 3px + 3.2vw ), 35px );
	background-color:#FFFFFF;
	border-radius:15px;
	position:relative;
}

.first2 .you-can li + li {
	margin-top:clamp( 10px, calc( 4px + 1.6vw ), 20px );
}

.first2 .you-can li img {
	width:clamp( 70px, calc( 31px + 10.4vw ), 135px );
}

.first2 .you-can li .you-can_cnt {
	padding-top:0;
}

.first2 .you-can ul + p {
	padding-bottom:20px;
	font-size:clamp( 15px, calc( 9.600000000000001px + 1.44vw ), 24px );
	font-weight:bold;
	color:#6B3A3E;
}

.first2 .howto_merit.crayon {
	padding:clamp( 50px, calc( 32px + 4.8vw ), 80px ) 0;
	background-image:url(../img/bg_crayon_green03.png), url(../img/bg_crayon_green02.png);
}

.first2 .howto_merit p.first2_ttl {
	color:#FFFFFF;
}

.first2 .howto_merit .sec_inner > ul {
	margin-top:0;
}

.first2 .howto_merit .sec_inner > ul li {
	width:100%;
	margin-top:30px;
	box-sizing:border-box;
	display:-webkit-box;
	display:flex;
	-webkit-box-pack:justify;
	justify-content:space-between;
	-webkit-box-align:start;
	align-items: flex-start;
}

.first2 .howto_merit .sec_inner > ul li + li {
	margin-top:clamp( 10px, calc( 4px + 1.6vw ), 20px );
}

.first2 .howto_merit_item img {
	max-width:390px;
	width:100%;
	margin:0 auto;
	border:none;
}

.first2 .howto_merit_item .howto_cnt > p:nth-of-type(1) {
	margin-bottom:clamp( 10px, calc( 4px + 1.6vw ), 20px );
	padding:0;
	text-align:left;
}

.first2 .howto_merit_item .howto_cnt > p:nth-of-type(2) {
	padding-top:0;
	font-size:clamp( 14px, calc( 11.6px + 0.64vw ), 18px );
}

.first2 .howto .btn  {
	margin-top:0;
}


/* Only SP */
@media only screen and (max-width: 767px) {

.first2 p.first2_ttl::before,
.first2 p.first2_ttl::after {
    top: 0.4rem;
    height: 4.5rem;
}

/* --- Notice --- */


/* --- First2 --- */

.first2 .howto_merit .sec_inner > ul li {
	flex-wrap: wrap;
}

.first2 .howto_merit_item .howto_cnt > p:nth-of-type(1) {
	margin-top:20px;
}

.first2 .howto_merit_item.no2 img {
	-webkit-box-ordinal-group:1;
	order:1;
}

.first2 .howto_merit_item.no2 .howto_cnt {
	-webkit-box-ordinal-group:2;
	order:2;
}


}


/* Only PC */
@media only screen and (min-width: 768px) {

	.txt_u:hover {
		text-decoration:none !important;
	}

	.sp {
		display:none !important;
	}

	.sp_inline {
		display:none !important;
	}

	.pc {
		display:block !important;
	}

	.pc_inline {
		display:inline-block !important;
	}


/* --- Notice --- */

.notice_detail .recommend-book h4 {
	margin:0 0 0 clamp( 15px, calc( 12px + 0.8vw ), 20px );
}

/* --- First2 --- */

.first2 .you-can ul li {
	-webkit-box-align:center;
	align-items:center;
}

.first2 .you-can ul + p {
	text-align:center;
}

.first2 .howto_merit_item.no1 img {
	width:clamp( 320px, calc( 278px + 11.200000000000001vw ), 390px );
}

.first2 .howto_merit_item.no1 .howto_cnt {
	margin-left:clamp( 20px, calc( 17px + 0.8vw ), 25px );
}

.first2 .howto_merit_item.no2 img {
	width:clamp( 310px, calc( 268px + 11.200000000000001vw ), 380px );
}

.first2 .howto_merit_item.no2 .howto_cnt {
	margin-right:clamp( 20px, calc( 17px + 0.8vw ), 25px );
}


.first2 .howto_merit_item.no3 img {
	width:clamp( 250px, calc( 214px + 9.6vw ), 310px );
}

.first2 .howto_merit_item.no3 .howto_cnt {
	margin-left:clamp( 30px, calc( 24px + 1.6vw ), 40px );
}


.first2 .howto_merit .sec_inner > ul li {
	-webkit-box-align:center !important;
	align-items:center !important;
}


}


/* For adjust */

@media screen and (min-width: 599px) {


}


@media screen and (min-width: 768px) and (max-width: 800px) {


}


@media screen and (min-width: 768px) and (max-width: 900px) {



}