@charset "utf-8";
body, span, div, p {
	font-family: serif;
	color: #333333;
}
body {
	background: url(/wp-content/themes/indeedhaken/assets/templates/sheeronpino/images/body_bg.png);
}
h2 {
	font-size: 2.2rem;
	font-weight: normal;
}
#grid_wrap-sp {
	display: inline-block !important;
}
#grid_wrap-pc {
	display: none !important;
}
.username1alert, .username2alert, .userkana1alert, .userkana2alert, .userjushoalert, .genderalert, .birthdayalert, .telnumalert, .mailaddressalert{
	display: none;
}
.mainlogo {
	position: absolute;
}
.container {
	max-width: unset;
}
.contentwrap {
	overflow: hidden;
	max-width: 1050px;
	margin: 0 auto;
}
.header-logo, .header-logo img {
	object-fit: contain;
	height: 56px;
}
.mainlogo {
	object-fit: cover;
}
.skyblue-line {
	border-bottom: 5px solid #87cefa;
}
.oubo_button {
	background: #87CEFA;
	border-bottom: #5291ac solid 3px;
	font-size: 1rem;
}
.oubo_button>div:after {
	content: '>';
	position: relative;
	left: 30%;
}
.content_block1_left img {
	object-fit: contain;
	height: 120px;
}
.text-left+p {
	font-size: 20px;
}
.content_block1_right {
	height: 120px;
}
.companyname-title {
	font-size: 90%;
	font-weight: 500;
	letter-spacing: 0.05px;
	position: absolute;
	text-align: center;
	top: 50%;
	transform: translateY(-50%);
}
.textpink {
	border-bottom: 2.5px dotted #ec80a4;
}
.contentwrap ul li {
	padding: 1em 4em 1em 4em;
}
table tbody tr th {
	font-weight: 600;
	padding-top: 0.5rem;
	min-width: 10em;
}
table tbody tr td {
	padding-bottom: 0.5rem;
}
table tbody tr th, table tbody tr td {
	display: inline-block;
	padding-left: 1.75rem;
	padding-right: 1.75rem;
	line-height: 1.75;
	width: 100%;
}
.mainlogo {
	object-position: 50% 11%;
}
.content_block1_left img {
	height: 73px;
}
.content_block1_right {
	height: 73px;
	position: relative;
}
.content_block2 p {
	line-height: 1.75;
	word-break: break-word;
}
.content_block3.button_block {
	width: 60%;
}
h2.jontitle {
	font-size: 132%;
}
.gray-header {
	background-color: #e6e6e6;
	border-bottom: 3px solid #999;
	font-size: 0.85rem;
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}
/*個別デザイン*/

.onayamiarrow {
	text-align: center;
	display: inline-block;
	width: 100%;
}
.onayamiarrow img {
	width: 35%;
	margin: 0 auto;
}
.onayami_three_imgs {
	margin-top: 3.5em;
	margin-bottom: 5em;
}
.onayami_three_imgs img {
	width: 30%;
	display: inline-block;
	border-radius: 50%;
	object-fit: cover;
}
.onayami_three_imgs img:nth-child(1) {
	margin: 0 0 0 0;
}
.onayami_three_imgs img:nth-child(2) {
	margin: 0 2.5% 0 2.5%;
}
.onayami_three_imgs img:nth-child(3) {
	margin: 0 0 0 0;
}
.meritarea {
	padding: 1em 0 1em 0;
}
.shushoku_area{
	max-width: 1050px;
    margin: 0 auto;
}
.shushoku_area .meritarea {
	padding: 1em 0 0em 0;
	width: 100%;
	position: relative;
}
.shushoku_area .schedule_img .meritarea .float-right{
	margin-top: 0.5em;
}
.shushoku_area .schedule_img .meritarea .float-right .merit_text_larger{
    width: auto !important;
    clear: both;
    float: left;
    z-index: 1;
    position: relative;
}
.shushoku_area .schedule_img .meritarea .float-right .normalfont{
	clear: both;
    float: left;
    padding: 0.5em 0 0.5em 0;
}
.shushoku_area .schedule_img .meritarea img{
	position: relative;
}
.content_ribbon{
	position: absolute;
	width: 0%;
    height: calc(28px + 0.5em);
    background: linear-gradient(90deg, #ec80a4, #fff);
    position: absolute;
    top: 0.5em;
    left: -1em;
    transition-duration:1s;
}
.content_ribbon.fadein{
	width: 100%;
	transition-duration:1s;
}
.merit_img, .merit_text {
	display: inline-block;
}
.merit_img {
	width: 45%;
}
.merit_text {
	width: 55%;
}
.merit_text_larger {
	font-size: 28px;
}
.backgroundpink {
	background: #fcecf4;
}
.backgroundpink .contentwrap{
	padding: 3rem;
}
.schedule_img {
	margin: 0 auto;
}
.smalltext {
	font-size: 14px;
}
.arrow_gray {
	max-width: 5em;
}
.fontpink {
	color: #ec80a4;
}
.inputtagarea {
	text-align: center;
}
.inputtagarea input {
	font-weight: bold;
	color: #dd6893;
}
.textpink_solid_shadow {
	border-bottom: 1px solid #ec80a4;
}
.onayamilist {
	display: inline-block;
	width: 80%;
	background: #fff;
	margin: 0 10% 0 10%;
}
.onayamilist>div div {
	font-size: 18px;
	font-weight: bold;
	background: url(/wp-content/themes/indeedhaken/assets/templates/sheeronpino/images/check_icon.jpg) no-repeat;
	padding-left: 1.7em;
	margin-top: 0.7em;
	margin-bottom: 0.7em;
}
.onayami1 {
	margin: 0 12.5% 0 12.5%;
	display: inline-block;
}
.merit_text .normalfont {
	line-height: 2;
}
.schedule_img .meritarea img {
	width: 23%;
}
.schedule_img .meritarea .float-right {
	width: 72%;
}
.meritarea .float-right .boshu_right {
	width: 80%;
}
.boshu_left {
	width: 20%;
}
.boshu_area .meritarea {
	border-bottom: solid 1px #ec80a4;
}
.oubo_area {
	background: url(/wp-content/themes/indeedhaken/assets/templates/sheeronpino/images/form_background.png) no-repeat;
	padding-top: 5%;
}
.oubo_area .meritarea .merit_text span:nth-child(1) {
	line-height: 2;
}
.oubo_area h2 {
	padding-bottom: 5%;
}
.backgroundwhite {
	background: #fff;
}
.fadein_area {
	overflow: hidden;
}
.fadein_area .meritarea:nth-child(2) {
	transform: translateX(-100%);
}
.fadein_area .meritarea:nth-child(3) {
	transform: translateX(100%);
}
.fadein_area .meritarea:nth-child(4) {
	transform: translateX(-100%);
}
.fadein_area .meritarea:nth-child(5) {
	transform: translateX(100%);
}
.fadein_area .meritarea:nth-child(6) {
	transform: translateX(-100%);
}
.fadein_area .meritarea:nth-child(7) {
	transform: translateX(100%);
}
.fadein_area .meritarea {
	opacity: 0;
	transition: opacity 1s, transform 1s;
}
.fadein_area .fadein:nth-child(2), .fadein_area .fadein:nth-child(3), .fadein_area .fadein:nth-child(4), .fadein_area .fadein:nth-child(5), .fadein_area .fadein:nth-child(6), .fadein_area .fadein:nth-child(7) {
	opacity: 1;
	transform: translateX(0%);
}
.slider {
	width: 90%;
	margin: 0 5% 0 5%;
	overflow: hidden;
}
.slider img {
	height: auto;
	width: 100%;
}
/*slick setting*/
.slick-dots{
	display: none !important;
}
.slick-prev:before, .slick-next:before {
	color: #000;
}
.prev-arrow, .next-arrow {
	width: 3em !important;
	position: absolute;
	top: 50%;
	z-index: 99;
}
.prev-arrow {
	left: 0;
}
.next-arrow {
	right: 0;
}
.textpink_bold {
	border-bottom: solid 1px #ec80a4;
	width: 100%;
	height: 1px;
}
.slidewrapper .slick-slide {
	background-position: 0 50%;
}
.shain_text {
	width: 80%;
}
.shain_border {
	border-radius: 50px;
	border: solid 1px lightgray;
	width: 85%;
	padding-top: 5% !important;
	padding-bottom: 5% !important;
}
.slidewrapper .slick-slide img {
	position: absolute;
	width: 17em;
	top: 25%;
}
.shain_voice {
	font-size: 20px;
}
form>.contentwrap {
	padding: 2.5em;
}
form .meritarea {
	padding: 0.5px 0 0.5px 0;
}
form .meritarea>div:nth-child(1), #entrybox2 .confirmarea .meritarea > div:nth-child(1) {
	height: 4.5em;
	color: #333333;
	background: #f8ecf2;
	padding-left: 1em;
	line-height: 4.5em;
}

form .meritarea>div:nth-child(2), #entrybox2 .confirmarea .meritarea > div:nth-child(2){
	height: 4.5em;
	padding-left: 1em;
	line-height: 4.5em;
}
#entrybox2 .confirmarea span.modalbold{
    margin: 0em 0 0em 0;
    padding: 0 0 0 0;
}
#entrybox2 .confirmarea{
	padding: 0.5em;
padding: 0.5em;
}
#entrybox2 .confirmarea > .meritarea{
	padding: 0 !important;
}
form .meritarea:nth-child(8)>div:nth-child(1) {
	height: 9em;
	line-height: 9em;
}
form .meritarea:nth-child(8)>div:nth-child(2) {
	height: 9em;
}
form .meritarea input, form .meritarea select, form .meritarea spans, #entrybox2 .confirmarea .meritarea input, #entrybox2 .confirmarea .meritarea select, #entrybox2 .confirmarea .meritarea spans{
	margin-top: calc(2.5em / 2);
	height: 2em;
}
form .meritarea textarea {
	width: 100%;
}
small.hisshu {
	font-size: 85%;
	background: black;
	color: #fff;
	padding: 0.1em 0.5em 0.1em 0.5em;
	margin: 0 0 0 0.5em;
}
.spacing {
	min-width: 3em;
}
form .meritarea label input {
	margin-top: 0;
	line-height: 4.5em;
	height: 4.5em;
	display: inline-block;
	float: left;
}
form .meritarea label .labeltext {
	height: 4.5em;
	line-height: 4.5em;
	display: inline-block;
	float: left;
}
.contentwrap .slidewrapper ul {
	display: inline-block;
	width: auto;
	text-align: center;
	padding-inline-start: 0px !important;
}
.contentwrap .slidewrapper ul li {
	float: left;
	list-style: none;
	width: 1em;
	display: inline-block;
}
.contentwrap .slidewrapper ul li {
	padding: 1em 1em 1em 1em;
}
.contentwrap .slidewrapper ul li button {
	width: 1em;
	height: 1em;
	float: left;
	border-radius: 50%;
	border-width: 0px;
}
.contentwrap .slidewrapper ul .slick-active button {
	background: black;
}
.sp {
	display: none;
}
.meritarea.d-inline-block.fadein, .slidewrapper .slick-slide, .schedule_img {
	background: #fff;
}
#entrybox2 .modal-footer #entrysubmit{
	color: #212121;
}
/*個別デザイン*/
#entrybox2{
	overflow-y: scroll;
}
#entrybox3 #entryfinish{
	color: #333333;
}
.modal > div > div > .modal-footer #entryconfirm{
	width: 20em !important;
}
div.modalparent{
	padding-top: 1em;
}

.boshu_area_head {
	text-indent: -9999px;
}

.boshu_area .fontpink{
	color: #333333;
}
/*02.03 フォームデザイン修正*/
form .contentwrap .meritarea:nth-child(3) label:nth-child(3) {
    width: 30% !important;
    display: inline-block;
    float: left !important;
}
	select[name="birthday1"],
	select[name="birthday2"],
	select[name="birthday3"],
	select[name="birthday1under"],
	select[name="birthday2under"],
	select[name="birthday3under"]{
	width: 15%;
}
/*02.03 フォームデザイン修正*/
@media (min-width: 786px) {
	.container>div.p-0 {
		padding-top: 0 !important;
	}
	.gray-header {
		font-size: 1rem;
	}
	table tbody tr th {
		padding-top: 1rem;
	}
	table tbody tr td {
		padding-bottom: 1rem;
	}
	.header-menu ul li {
		line-height: 38px;
	}
	#grid_wrap-pc {
		display: inline-block !important;
	}
	#grid_wrap-sp {
		display: none !important;
	}
	div#uenosyunin {
		margin-bottom: 100px;
	}	
}
@media (max-width: 1120px) {
	.slidewrapper {
		overflow: hidden;
	}




}
@media (max-width: 980px) {
	.slidewrapper .slick-slide img {
		position: relative;
		width: 100%;
		top: 25%;
		max-width: 300px;
		margin: 0 auto;
	}
	.shain_border, .shain_text {
		border: none;
		width: 100%;
	}
	.slidewrapper .slick-slide {
		padding: 1em 0 1em 0;
		border-radius: 50px;
		border: solid 1px lightgray;
	}
	.backgroundpink {
		padding: 1em;
	}
}
@media (max-width: 786px) {
	body {
		background: url(/wp-content/themes/indeedhaken/assets/templates/sheeronpino/images/bg_sp.png);
		background-size: 100%;
	}
	.onayami_three_imgs {
		margin-top: 2em;
		margin-bottom: 2em;
	}
	.onayamilist {
		margin: 0 0% 0 0%;
	}
	.merit_text, .merit_img {
		width: 100%;
	}
	.merit_img {
		max-height: 200px;
		object-fit: cover;
	}
	.onayamilist>div div {
		font-size: 14px;
	}
	h2 {
		font-size: 20px;
	}
	.slidewrapper .slick-slide img {
		max-width: 200px;
	}
	.merit_text_larger {
		font-size: 20px;
	}
	.normalfont, .slider p, .slider span {
		font-size: 14px;
	}
	.shain_border {
		width: 100%;
		max-height: 200px;
		overflow: hidden;
		overflow-y: scroll;
	}
	.shushoku_area .schedule_img .meritarea img{
		width: 40%;
	}
	.shushoku_area .schedule_img .meritarea .float-right{
		width: 55%;
	}
	.textpink_solid_shadow{
		padding:0.5em;
	}
	.textpink_solid_shadow + span{
		padding: 0.5em;
	}
	.content_ribbon{
		height: calc(20px + 0.5em);
	}
	.sp {
		display: inline-block;
	}
	.pc {
		display: none;
	}
	.removesp {
		display: none !important;
	}
	.boshu_left {
		width: 30%;
	}
	.meritarea .float-right .boshu_right {
		width: 65%
	}
	form {
		width: 90%;
		margin: 0 auto;
	}
	form>.contentwrap {
		padding: 1em;
		margin-bottom: 5em;
	}
	form .meritarea:nth-child(1)>div:nth-child(2)>div, form .meritarea:nth-child(2)>div:nth-child(2)>div {
		width: 100% !important;
		display: inline-block;
		float: left;
	}
	form .meritarea:nth-child(1)>div:nth-child(2)>div:nth-child(1) span, form .meritarea:nth-child(1)>div:nth-child(2)>div:nth-child(2) span, form .meritarea:nth-child(2)>div:nth-child(2)>div:nth-child(1) span, form .meritarea:nth-child(2)>div:nth-child(2)>div:nth-child(2) span {
		line-height: 3em;
		height: 3em;
	}
	form .meritarea:nth-child(1)>div:nth-child(2)>div input, form .meritarea:nth-child(2)>div:nth-child(2)>div input {
		width: 80% !important;
		margin-top: 5px;
		float: right !important;
	}
	form .meritarea:nth-child(3) input, form .meritarea:nth-child(6) input, form .meritarea:nth-child(7) input {
		width: 100% !important;
	}
	form .meritarea:nth-child(4)>div:nth-child(2) {
		min-height: unset;
		height: 2em;
	}
	form .meritarea:nth-child(4)>div:nth-child(2) label {
		height: 2em;
		line-height: 2em;
	}
	form .meritarea input, form .meritarea select, form .meritarea span {
		margin-top: 5px;
		height: 3em;
	}
	form .meritarea label .labeltext {
		height: 1em;
		line-height: 1em;
		margin-top: 5px;
	}
	form .meritarea label input {
		height: auto;
		line-height: initial;
		margin-top: 5px;
	}
	form .meritarea label:nth-child(2) {
		margin-right: 3em;
	}
	form .meritarea>div:nth-child(1), #entrybox2 .confirmarea .meritarea > div:nth-child(1) {
		padding: 0.5em;
		width: 100% !important;
		height: auto;
		line-height: initial;
	}
	form .meritarea>div:nth-child(2){
		width: 100%;
		min-height: 4.5em;
		height: auto;
		padding-left: 0;
		line-height: initial;
	}

	form .meritarea>div:nth-child(4)>div:nth-child(2) {
		height: 3em;
	}
	form .meritarea:nth-child(5)>div:nth-child(2) span:nth-child(3), form .meritarea:nth-child(5)>div:nth-child(2) select:nth-child(4), form .meritarea:nth-child(5)>div:nth-child(2) span:nth-child(5), form .meritarea:nth-child(5)>div:nth-child(2) select:nth-child(6) {
		margin-left: 0.5em;
		margin-right: 0.5em;
	}
	form .meritarea label input {
		height: 1em;
		line-height: 1em;
	}
	form .meritarea:nth-child(8)>div:nth-child(1) {
		height: auto;
		line-height: initial;
	}
	form .meritarea textarea {
		display: inline-block;
		height: auto;
		width: 100%!important;
	}
	form .meritarea .normalfont {
		width: 100% !important;
	}
	form .meritarea .spacing {
		min-width: 3em;
		height: 2em;
		line-height: 2em;
	}
	form .meritarea textarea {
		margin-top: 5px;
	}
	#entrybox2 .confirmarea .meritarea > div:nth-child(2) {
	    height: 4.5em;
	    padding-left: 1em;
	    line-height: 4.5em;
	    width: 100% !important;
	}
	.boshu_area, .shushoku_area {
		padding-left: 5% !important;
		padding-right: 5% !important;
	}
	#entrybox2 .spacing{
		display: none !important;
	}
	#entrybox2 form .meritarea:nth-child(1)>div:nth-child(2)>div, #entrybox2 form .meritarea:nth-child(2)>div:nth-child(2)>div{
		width: 50% !important;
	}
	/*スマホのフォーム・応募項目修正*/
	.modal-footer input[type="button"]{
		font-size: 2em;
		right: -0.1em;
		top: 0;
	}
	.modal-footer > button[type="button"] {
	    -webkit-appearance: button;
	    font-size: 2em;
	    right: -0.1em;
	    top: 0;
	}
	.boshu_area{
		margin-top: 0 !important;
	}
	.boshu_area .flowwrap{
		padding-left: 0.5em !important;
		padding-right: 0.5em!important;
	}
	.boshu_area .flowwrap .meritarea .float-right .boshu_right,
	.boshu_area .flowwrap .meritarea .float-right .boshu_left{
		width: 100%;
	}
	.boshu_area > h2{
		margin-bottom: 0 !important;
	}
	.boshu_area > h2 + .contentwrap{
		padding-top:0 !important;
	}
	.shushoku_area > h2{
		padding-bottom: 0 !important;
	}
	.boshu_area .fontpink{
		color: #333333;
	font-weight: bold !important;
	}
	#entry-btn-fix > a img{
	width: 75% !important;
	}
	.boshu_area .contentwrap .boshu_right{
		word-break: break-word;
	}
	/*スマホのフォーム・応募項目修正*/
/*2020.02.03フォーム部分の修正*/
	form .meritarea:nth-child(1)>div:nth-child(2)>div input, form .meritarea:nth-child(2)>div:nth-child(2)>div input{
		width: 100% !important;

	}
	.genderalert + label, .genderalert + label + label{
		width: 50%;
		float: left;
	}
	form .meritarea:nth-child(3) input{
	    width: auto !important;
	    height: 2em;
	    line-height: 2em;
	}
	input[name="jender"] + .labeltext{
	    height: 1em !important;
	    line-height: 1em !important;
	}
	form .meritarea>div:nth-child(2){
		min-height: 1em;
	}
	form .meritarea:nth-child(4)>div:nth-child(2){
		min-height: 3em;
	}
	form .meritarea input, form .meritarea select, form .meritarea span{
		height: 2em !important;
	}
	form .meritarea>div:nth-child(1), #entrybox2 .confirmarea .meritarea > div:nth-child(1){
		    padding: 0.1em 0.5em 0.1em 0.5em !important;
	}
	form .meritarea>div:nth-child(1), #entrybox2 .confirmarea .meritarea > div:nth-child(1){
		font-size: 14px;
	}
	form .meritarea input, form .meritarea select, form .meritarea span{
		font-size: 13px;
	}
	input[name="telnum"]{
		width: 100% !important;
	}
	.modal-footer{
		padding: 0 1rem 0 1rem !important;
		width: 70% !important;
		margin: 0 auto !important;
	}
	form .meritarea:nth-child(4)>div:nth-child(2){
		min-height: 2em !important;
	}
	.modal > div > div > .modal-footer #entryconfirm{
		width: 100% !important;
	}
	form .meritarea{
	    padding: 0px 0 0px 0 !important;
	}
	label{
		margin-bottom:0 !important;
	}
	#entrybox2 .confirmarea .meritarea > div:nth-child(2){
		height: 2em !important;
	}
	.sp_width50_right{
		float: left !important;
	}
	button.nextpage, button.confirm, button.complete, button.goback{
	margin: 0 0 10px !important;
    float: right;
    width: calc(50% - 1em);
    display: inline-block !important;
	}
	button#entryback:before, button#entrysubmit:after{
		    left: 0 !important;
	}
	#entrybox2 .modal-footer{
		width: 100% !important;
	}
	button.nextpage, button.confirm, button.complete, button.goback{
	    font-size: 14px;
	    padding: 0.5em 0em 0.5em 0em;

	}
	button.confirm + button.goback{
		margin: 0 0% 0 0% !important;
	}
	#entrybox2 .confirmarea .meritarea > div:nth-child(2){
		line-height: 2em !important;
	}
	span.modalbold{
		float: left !important;
	}
	#entrybox2 .modal-footer #entrysubmit{
		font-size: 14px !important;
		width: 45%;
		float: right;
	}
	#entrybox2 button.confirm + button.goback {
	    margin: 0 0% 0 0% !important;
	    font-size: 14px !important;
	    width: 45%;
	    float: left;
	}

	input[name="jender"] + .labeltext, form .meritarea:nth-child(3) input{
		float: left !important;
		height: 1em !important;
		display: inline-block;
	}
	form .meritarea label .labeltext{
		display: inline-block;
	}
select[name="birthday1"],
select[name="birthday2"],
select[name="birthday3"],
select[name="birthday1under"],
select[name="birthday2under"],
select[name="birthday3under"]{
	width: 25%;
}
	/*2020.02.03フォーム部分の修正*/
}


/* 続きを読むボタン
***************************************** */
.grad-btn {
	font-size: 13px;
	font-weight: bold;
    z-index: 2;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 150px;
    margin: auto;
    padding: .3em 0;
    border-radius: 2px;
    background: #fff;
    color: #7ad0ff;
    /* font-size: 1.3rem; */
    text-align: center;
    cursor: pointer;
    transition: .2s ease;
	box-shadow: 0 0 3px rgba(0,0,0,.3);
	margin-bottom:1em !important;
  }
  .grad-btn::before {
    content: "続きを読む"
  }
  .grad-item {
    position: relative;
    overflow: hidden;
    /*隠した状態の高さ*/
	height: 700px; 
	
	/* 調整 */
	width: 100%;
  }
  .grad-item::before {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /*グラデーションで隠す高さ*/
    height: 200px; 
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
    background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
    content: "";
  }
  .grad-trigger {
    display: none; /*チェックボックスは常に非表示*/
  }
  .grad-trigger:checked ~ .grad-btn::before {
    content: "閉じる" /*チェックされていたら、文言を変更する*/
  }
  .grad-trigger:checked ~ .grad-item {
    height: auto; /*チェックされていたら、高さを戻す*/
  }
  .grad-trigger:checked ~ .grad-item::before {
    display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/
  }

  /* 続きを読むボタン
***************************************** */
.grad-btn {
	font-size: 13px;
	font-weight: bold;
    z-index: 2;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 150px;
    margin: auto;
    padding: .3em 0;
    border-radius: 2px;
    background: #fff;
    color: #ec80a4;
    /* font-size: 1.3rem; */
    text-align: center;
    cursor: pointer;
    transition: .2s ease;
	box-shadow: 0 0 3px rgba(0,0,0,.3);
	margin-bottom:1em !important;
  }
  .grad-btn::before {
    content: "続きを読む"
  }
  .grad-item {
    position: relative;
    overflow: hidden;
    /*隠した状態の高さ*/
	height: 700px; 
	
	/* 調整 */
	width: 100%;
  }
  .grad-item::before {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /*グラデーションで隠す高さ*/
    height: 200px; 
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
    background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
    content: "";
  }
  .grad-trigger {
    display: none; /*チェックボックスは常に非表示*/
  }
  .grad-trigger:checked ~ .grad-btn::before {
    content: "閉じる" /*チェックされていたら、文言を変更する*/
  }
  .grad-trigger:checked ~ .grad-item {
    height: auto; /*チェックされていたら、高さを戻す*/
  }
  .grad-trigger:checked ~ .grad-item::before {
    display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/
  }