@charset "UTF-8";

/*--------------------------------------------------------------------
 *	共通
 *--------------------------------------------------------------------*/
body#tokyocampaign .popup {
	opacity: 0;
	transform: translate(0, 15%);
	transition: 1s;
}
body#tokyocampaign .popup.late_pop {
	opacity: 0;
	transform: translate(0, 50%);
	transition: 1s;
}
body#tokyocampaign .popup.is-show {
	opacity: 1;
	transform: translate(0, 0);
}

body#tokyocampaign div#contents div.acordion {
	cursor: pointer;
}
body#tokyocampaign div#contents div.acordion .close {
	visibility: hidden;
	height: 0;
	opacity: 0;
}
body#tokyocampaign div#contents div.acordion .open {
	visibility: visible;
	height: max-content;
	opacity: 1;
	transition: 0.5s;
}
body#tokyocampaign div#contents div.acordion .close ul {
	display: none;
}
body#tokyocampaign div#contents div.acordion .open ul {
	display: block;
}

body#tokyocampaign div#contents div.acordion div.plus::before {
	transform: rotate(90deg);
	transition: 0.5s;
}
body#tokyocampaign div#contents div.acordion div.plus::after {
	transform: rotate(0deg);
	transition: 0.5s;
}
body#tokyocampaign div#contents div.acordion div.plus.to_minus::before {
	opacity: 0;
	transition: 0.5s;
}
body#tokyocampaign div#contents div.acordion div.plus.to_minus::after {
	transform: rotate(90deg);
	transition: 0.5s;
}

/*--------------------------------------------------------------------
 *	768px未満用（SP用）の記述
 *--------------------------------------------------------------------*/
@media screen and (max-width: 767px), print {

body#tokyocampaign {
	/* overflow-x: hidden; */
}

body#tokyocampaign #fix_btn_application {
	position: fixed;
	left: -100%;
	top: 90%;
	transform: translateY(-100%);
	width: 35%;
	max-width: 230px;
	z-index: 10;
}
body#tokyocampaign #fix_btn_application img {
	display: block;
	width: 100%;
	height: auto;
}

body#tokyocampaign div#contents .list02 {		/* キャンペーン応募の流れ */
	margin-top: 2.5em;
	margin-bottom: 1em;
}
body#tokyocampaign div#contents .list02 p {
	margin-bottom: 0.5em;
}
body#tokyocampaign div#contents .list02 p:first-of-type {
	margin-bottom: 1em;
}
body#tokyocampaign div#contents .pos03 {		/* こんなお悩みはありませんか？ */
	position: relative;
	top: 1.5em;
}
body#tokyocampaign div#contents .pos04 {		/* バナー上キャプション */
	position: relative;
	top: 3em;
}
body#tokyocampaign div#contents .pos05 {		/* 申込バナー */
	position: relative;
	top: 2em;
}
body#tokyocampaign div#contents .pos05_03 {		/* 申込バナー */
	position: relative;
	top: 2em;
}
body#tokyocampaign div#contents .pos06 {		/* ヤクルトスタッフの仕事 */
	position: relative;
	top: 3.5em;
}
body#tokyocampaign div#contents .list07 {		/* 現役ヤクルトスタッフの声 */
	margin-top: 0.4em;
	margin-bottom: 1em;
}
body#tokyocampaign div#contents .list07 p {
	margin-bottom: 0;
}
body#tokyocampaign div#contents .pos08 {		/* キャリアアップの道 */
	position: relative;
	top: 3.5em;
	z-index: -1;
}
body#tokyocampaign div#contents .list07 p:first-of-type {
	position: relative;
	top: 2.5em;
	margin-bottom: 1em;
}
body#tokyocampaign div#contents .pos05_04 {		/* 申込バナー */
	position: relative;
	top: 2em;
}

/* 仕事内容（Table）*/
body#tokyocampaign div#contents div#job_details {
	width: 90%;
	margin: 7em auto 4em;
}
body#tokyocampaign div#contents div#job_details table {
	table-layout: fixed;
	width: 100%;
}
body#tokyocampaign div#contents div#job_details table th {
	background-color: #d1ebe9;
	line-height: 2;
	font-weight: bold;
}
body#tokyocampaign div#contents div#job_details table th,
body#tokyocampaign div#contents div#job_details table td {
	padding: 10px;
}
body#tokyocampaign div#contents div#job_details table th:first-child,
body#tokyocampaign div#contents div#job_details table td:first-child {
	width: 18%;
	box-sizing: border-box;
}
body#tokyocampaign div#contents div#job_details .indent{
	display: inline-block;
	padding-left: 1em;
	text-indent: -1em;
}

/* キャンペーン概要・注意事項 */
body#tokyocampaign div#contents div.acordion h5,
body#tokyocampaign div#contents div.acordion p,
body#tokyocampaign div#contents div.acordion ul {
	font-size: 16px;
}
body#tokyocampaign div#contents div.acordion {
	position: relative;
	width: 90%;
	margin: 0 auto;
}
body#tokyocampaign div#contents div.acordion div.plus {
	position: absolute;
	top: 14px;
	right: 5%;
}
body#tokyocampaign div#contents div.acordion div.plus::before, 
body#tokyocampaign div#contents div.acordion div.plus::after {
	content: '';
    display: inline-block;
	position: absolute;
    width: 2px;
    height: 18px;
    background-color: #ff7a6b;
}
body#tokyocampaign div#contents div.acordion h3 {
	border: #ff7a6b 2px solid;
	padding: 0.5em 0.5em 0.3em;
}
body#tokyocampaign div#contents div.acordion h5::before {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 4px;
	margin-bottom: 3px;
	background-color: #ff7a6b;
	border-radius: 50%;
	vertical-align: middle;
	content: "";
}
body#tokyocampaign div#contents div.acordion p {
	line-height: 2em;
}
body#tokyocampaign div#contents div.acordion p:last-child {
	margin-bottom: 2.5em;
}
body#tokyocampaign div#contents div.acordion ul {
	margin-left: 0;
}
body#tokyocampaign div#contents div.acordion ul li {
	padding-left: 1em;
	text-indent: -1em;
	list-style: none;
	line-height: 2em;
}
body#tokyocampaign div#contents div.acordion ul li::before {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 4px;
	margin-bottom: 3px;
	background-color: #ff7a6b;
	border-radius: 50%;
	vertical-align: middle;
	content: "";	
}
body#tokyocampaign div#contents .privacy {
	padding-top: 4em;
	padding-bottom: 2em;
}


}


/*--------------------------------------------------------------------
 *	768px以上用（PC用）の記述
 *--------------------------------------------------------------------*/
@media screen and (min-width: 768px), print {
/* 768px以上用（PC用）の記述 */

body#tokyocampaign #fix_btn_application {
	position: fixed;
	left: -100%;
	top: 80%;
	transform: translateY(-80%);
	z-index: 10;
}
body#tokyocampaign #fix_btn_application img {
	width: 100%;
	height: auto;
}

body#tokyocampaign div#contents img {
	width: 100%;
}
body#tokyocampaign div#contents a:hover {
	opacity: 0.6;
	transition: 0.3s;
}
body#tokyocampaign div#contents div.info {
	margin-bottom: 2em;
}

body#tokyocampaign div#contents .pos02 { /* キャンペーン応募の流れ */
	position: relative;
	top: 0em;
}
body#tokyocampaign div#contents .pos03 { /* こんなお悩みはありませんか？ */
	position: relative;
	top: 0em;
}
body#tokyocampaign div#contents .pos04 { /* バナー上キャプション */
	position: relative;
	top: 1.2em;
}
body#tokyocampaign div#contents .pos05 { /* 申込バナー */
	position: relative;
	top: -1em;
}
body#tokyocampaign div#contents .pos05_02 { /* 申込バナー */
	position: relative;
	top: 0em;
}
body#tokyocampaign div#contents .pos05_04 { /* 申込バナー */
	position: relative;
	top: 1em;
}
body#tokyocampaign div#contents .pos08 { /* キャリアアップの道 */
	position: relative;
	top: 2.5em;
}

/* 仕事内容（Table）*/
body#tokyocampaign div#contents div#job_details {
	width: 85%;
	margin: 6.5em auto 3em;
}
body#tokyocampaign div#contents div#job_details table {
	table-layout: fixed;
	width: 100%;
}
body#tokyocampaign div#contents div#job_details table th {
	background-color: #d1ebe9;
	line-height: 2;
	font-weight: bold;
}
body#tokyocampaign div#contents div#job_details table th,
body#tokyocampaign div#contents div#job_details table td {
	padding: 10px;
}
body#tokyocampaign div#contents div#job_details table th:first-child,
body#tokyocampaign div#contents div#job_details table td:first-child {
	width: 22%;
	box-sizing: border-box;
}
body#tokyocampaign div#contents div#job_details .indent{
	display: inline-block;
	padding-left: 1em;
	text-indent: -1em;
}

/* キャンペーン概要・注意事項 */
body#tokyocampaign div#contents div.acordion {
	margin: 2em auto 0;
	width: 85%;
}
body#tokyocampaign div#contents div.acordion h3 {
	padding: 1em 1em 0.8em;
	border: #ff7a6b solid 2px;
}
body#tokyocampaign div#contents div.acordion h5 {
	font-size: 16px;
}
body#tokyocampaign div#contents div.acordion h5::before {
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-right: 4px;
	margin-bottom: 3px;
	background-color: #ff7a6b;
	border-radius: 50%;
	vertical-align: middle;
	content: "";
}
body#tokyocampaign div#contents div.acordion div.plus {
	position: relative;
	top: -62px;
	right: -96%;
	width: 0;
}
body#tokyocampaign div#contents div.acordion div.plus::before, 
body#tokyocampaign div#contents div.acordion div.plus::after {
	content: '';
    display: inline-block;
    position: absolute;
    width: 3px;
    height: 25px;
    background-color: #ff7a6b;
}
body#tokyocampaign div#contents div.acordion p {
	line-height: 2em;
}
body#tokyocampaign div#contents div.acordion ul {
	margin-left: 0;
}
body#tokyocampaign div#contents div.acordion ul li {
	padding-left: 1em;
	text-indent: -1em;
	list-style: none;
	line-height: 2em;
}
body#tokyocampaign div#contents div.acordion ul li::before {
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-right: 4px;
	margin-bottom: 3px;
	background-color: #ff7a6b;
	border-radius: 50%;
	vertical-align: middle;
	content: "";	
}
body#tokyocampaign div#contents .privacy {
	padding-top: 2em;
}



}
/* 768px以上用（PC用）の記述 end */


/*------------------------------------------ clear */

body {
	zoom: 100%;
}

body:after,
ul.btn_list::after {
	content: ".";
	display: block;
	visibility: hidden;
	height: 0.1px;
	font-size: 0.1em;
	line-height: 0;
	clear: both;
}