@charset "UTF-8";

/* * * * * * * * * * * * * * * * * *
news.css
* * * * * * * * * * * * * * * * * */
/* news
--------------------------------- */
body#news h3.bg_head.bg_color {
	margin-top: -60px;
}

body#news .matchHeight .sm {
	font-size: 80%;
}

body#news #item01 .txt_lead {
	margin: 0 0 40px;
	text-align: center;
}

body#news #item02 .txt_lead {
	margin: 30px 0 40px;
	text-align: center;
}

body#news .flex {
	display: flex;
}

body#news .item .attention a {
	color: #80D4E7;
}

body#news #feature03 p.btn a.color2 {
	width: 100%;
}

body#news .app_download .size_s.w1 {
	width: 30%;
	margin-right: 20px;
}

body#news .txt1 {
	font-size: 120%;
	font-weight: bold;
}

body#news li.attention {
	width: 50%;
	padding: 10px 20px;
}

body#news li.attention .title {
	font-size: 120%;
	font-weight: bold;
	margin-bottom: 10px;
}

body#news .attention .title::before {
	content: "●";
	color: #80D4E7;
	margin-right: 5px;
}

#main section.subTitle {
	padding-top: 25px;
}

section.subTitle p.txt_lead {
	font-weight: bold;
	font-size: 140%;
	margin-top: 15px;
}

.bg_white .page_content_wrap .page_content {
	padding: 0;
	background: #ffffff;
	border-radius: unset;
	box-shadow: unset;
}

h3.ttl_step {
	margin-right: -3px;
	margin-bottom: 18px;
}

body#news section.step {
	padding-bottom: 60px;
	padding-top: 60px;
}

body#news .step .box {
	position: relative;
	border-top: 0;
}

body#news .step .box:before {
	content: "";
	display: block;
	width: 1024px;
	height: 41px;
	background: url(../img/naka/step/bg_box_top.png) 0 0 no-repeat;
	position: absolute;
	left: -2px;
	top: -41px;
}

body#news .step .box_btm {
	margin-bottom: 80px;
}

body#news .step .box_btm:after {
	content: "";
	display: block;
	width: 1024px;
	height: 62px;
	background: url(../img/naka/step/bg_box_btm.png) 0 0 no-repeat;
	position: absolute;
	left: -2px;
	bottom: -62px;
}

body#news .step .box+.box:before {
	height: 57px;
	background: url(../img/naka/step/bg_box_top2.png) 0 0 no-repeat;
	top: -57px;
}

body#news .media h3 {
	text-align: center;
}

/* 各ニュースタイトル */
body#news .news_title {
	text-align: center;
	margin: auto;
	padding: 2em 0 2em 0;
	width: 95%;
}

body#news .news_title h2 {
	margin: auto;
	text-align: center;
	font-size: 1.4em;
	font-weight: 700;
}

body#news .accent-line {
	margin: 1em auto 0;
	width: 30%;
	height: 8px;
	border-radius: 4px;
	background: linear-gradient(to right, #ff7e5f, #feb47b);
}

/* ニュースサブタイトル画像 */
body#news .news_sub_title img {
	max-width: 1026px;
	margin: auto;
	width: 100%;
}

/* 実施内容 */
.key_features li {
	margin-bottom: 2em;
}

.key_features img {
	margin: 1em;
	width: 9em;
}

.key_features .txt {
	font-size: 1.4em;
}

.key_features .sm {
	font-weight: 300;
}

/* 使用可能なメディア */
body#news .media .appli,
.physical_media {
	padding: 10px;
	margin-bottom: 10px;
}

body#news .media {
	text-align: center;
}

body#news .appli .app_title {
	display: block;
	font-size: 14px;
	font-weight: bold;
	margin: 0 0 5px 0;
	text-align: center;
}

/* 3つの画像を横並びにする */
body#news .app_links {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
}

body#news .app_links p {
	margin: 0;
}

body#news .app_links img {
	max-width: 100%;
	height: auto;
}

.media_cercle_icon {
	width: 200px;
}

body#news .physical_media {
	display: flex;
	justify-content: center;
	gap: 20px;
	text-align: center;
}

body#news .media_item {
	width: 300px;
}

body#news .thum {
	margin-bottom: 1px;
}

body#news .thum img {
	max-width: 100%;
	height: auto;
}

/* 事前準備 */
.preparation_title {
	max-width: 900px;
	max-width: 90%;
	padding-bottom: 2em;
}

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

.preparation_text span {
	font-size: 2em;
}

/* 親コンテナに左右の余白 */
.preparation_container {
	width: 100%;
	max-width: 1000px;
	margin: 30px auto;
	padding: 0 20px;
	position: relative;
	box-sizing: border-box;
}

/* スライド内の画像を小さくする設定 */
.preparation_image {
	width: 70%;
	margin: 0 auto;
}

.preparation_image img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	display: block;
}

/* テキストの中央寄せ */
.preparation_text {
	font-size: 1rem;
	line-height: 1.6;
	margin: 0 auto 15px;
	width: 90%;
	height: 8em;
}

/* ボタンを画像の左右外側に配置 */
.swiper-button-prev,
.swiper-button-next {
	color: #fb6166 !important;
	position: absolute;
	top: 65% !important;
	transform: translateY(-50%) scale(0.8);
	z-index: 10;
}

.swiper-button-prev {
	left: 0;
	transform: translateY(-50%);
}

.swiper-button-next {
	right: 0;
	transform: translateY(-50%);
}

.preparation_sub_title_wrapper {
	text-align: center;
	padding: 40px 0 5px;
}

.preparation_sub_title {
	width: 40%;
	display: inline-block;
	background-color: #ffffff;
	color: #20b7b7;
	font-weight: bold;
	font-size: 18px;
	padding: 10px 30px;
	border-radius: 100vh;
}

/* ニュース2：セブン‐イレブンのネップリがより使いやすくなっています！ */
#news_02 {
	text-align: center;
}

.banner_01 {
	font-size: 1.2em;
	margin: 20px auto;
}

/* X投稿 */
.x_follow {
	text-align: center;
	;
	width: 95%;
	margin: auto;
	font-size: 1.2em;
	;
}

.follow_button {
	margin-top: 20px;
	display: inline-block;
	background-color: #fb6166;
	color: #ffffff;
	text-decoration: none;
	font-weight: bold;
	font-size: 16px;
	padding: 12px 40px;
	border-radius: 8px;
	transition: opacity 0.3s;
	text-align: center;
}

.follow_button:hover {
	opacity: 0.6;
	text-decoration: none;
}

.news_title {
	position: relative;
	z-index: 10;
}

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

	/* -------------------PC表示用------------------- */
	.for_mobile {
		display: none;
		height: 0;
	}

	body#news #title {
		background-image: url(./../../img/naka/news/title.png);
		height: 293px;
	}

	/* 使用可能なメディア */
	body#news .container {
		display: flex;
		/* 横並びにする */
		gap: 20px;
		align-items: center;
	}

	body#news .appli,
	.physical_media {
		flex: 1;
		padding: 10px;
		max-width: 50%;
	}

	.preparation_sub_title {
		margin: 4em 0 0 0;
	}

	.swiper-wrapper {
		display: flex !important;
		flex-wrap: wrap !important;
		transform: none !important;
		/* Swiperの横滑り位置をリセット */
		gap: 20px;
		/* 画像同士の隙間 */
		justify-content: center;
	}

	.swiper-slide.preparation_item {
		width: calc(50% - 10px) !important;
		/* 2列にする場合 */
		margin-bottom: 30px;
		height: auto !important;
	}

	/* 折り返し時はカルーセル隠す */
	.swiper-button-prev,
	.swiper-button-next,
	.swiper-pagination {
		display: none !important;
	}

	.preparation_image {
		width: 100%;
		width: 100% !important;
		/* 親のスライド幅（1/5サイズ）に合わせる */
		margin: 0 auto;
	}

	.preparation_container {
		max-width: 100%;
		padding: 0 20px;
	}

	/* Swiperの機能を解除して、中央寄せのFlexboxにする */
	.preparation_swiper .swiper-wrapper {
		transform: none !important;
		justify-content: center;
		/* 左右に広げず、中央に寄せる */
		width: 100% !important;
	}

	.preparation_item {
		flex-direction: column;
		/* 幅を固定、または最大幅を指定する */
		max-width: 200px !important;
		/* 5つ並んだ時にちょうど良い幅に固定 */
		margin: 0 15px !important;
		/* 工程ごとの左右のスキマ */
	}

	.preparation_item p {
		padding-bottom: 3em;
	}

	/* PCでは不要な要素を隠す */
	.swiper-button-prev,
	.swiper-button-next,
	.swiper-pagination {
		display: none !important;
	}

	.preparation_item p {
		margin-top: 2em;
		height: 6em;
		font-size: 1em;
	}

	.media_cercle_icon {
		min-width: 100px;
		width: 100px;
	}

	.appli {
		height: 146px;
	}

}

@media screen and (max-width: 767px) {
	.for_pc {
		display: none;
		height: 0;
	}

}