@charset "UTF-8";

/* ====================================
	共通スタイル
 ==================================== */
.font-bold {
	font-weight: 500;
}

.text-container {
	font-weight: 400;
}

/* シーンタイトル */
.category {
	min-width: 12em;
}

/* サブセクション */
.sub-ttl {
	background: #A0A0A0;
	color: #fff;
	border-radius: 0 0 1rem 1rem;
}

/* ここが便利 */
.flex-container.benri>.flex-item {
	padding: 1em;
	border: dotted 1px #000;
	text-align: center;
}

.flex-container.howto>.flex-item {
	position: relative;
	overflow: hidden;
}

.flex-container.howto .num {
	background: #A0A0A0;
	color: #fff;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0
}

.flex-container.howto .ttl {
	font-weight: 500;
}

/* 店舗ロゴ */
ul.tenpo-logo {
	width: 100%;
	min-height: 20px;
}

ul.tenpo-logo li {
	display: none;
}

/* mod 20211109*/

.btnAll a, .closeBtn a {
    padding: 1em 1em;
    width: auto;
    margin: 10px auto;
    cursor: pointer;
    border: 1px solid #CCC;
    border-radius: 3px;
    text-decoration: none;
}

.flex-container_sc {
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-evenly;
}

.flex-container_sc.column3>.flex-item {
    width: 25%;
	margin-top:5rem;
	min-height: 500px;

}


/* ====================================
	スマートフォン専用スタイル
===================================== */
@media only screen and (max-width: 767px) {
	.sp-content-width {
		max-width: 480px;
		margin-left: auto;
		margin-right: auto;
	}

	/* シーンタイトル */
	.scene-title-container {
		margin: 2rem 0 2rem;
	}
	.scene-title {
		margin-bottom: 3rem;
		font-size: 2.4rem;
	}
	.scene-title-container .bg-gray {
		padding: .5em 5% 0;
	}
	.scene-title-container .flex-category {
		width: 100%;
	}
	.scene-title-container .flex-category .category {
		display: inline-block;
		padding: 0.3em;
		font-size: 1.2rem;
		text-align: center;
	}
	.scene-title-container .flex-tag {
		margin-top: .5em;
	}

	/* サブセクション */
	.in-box {
		margin-top: 2rem;
		padding: 4rem 5% 4rem;
	}
	.text-container {
		font-size: 1.5rem;
		line-height: 1.6;
	}
	.sub-ttl-container {
		margin-top: 4rem;
		border-top: solid 1px #A0A0A0;
		text-align: center;
	}
	.sub-ttl {
		width: 250px;
		margin: 0 auto;
		padding: .5em 0;
		font-size: 1.4rem;
	}
	
	/* コンビニボタン説明(20211117_mod)*/
	.sub-title-container_exp{
		padding-top: 5rem;
		text-align:left;
		
		
	}
	
	/* おすすめコンテンツ */
	.sub-title-container{
		padding-top: 5rem;
		text-align:left;
		border-top:solid 1px #d9d9d9;
		
	}

	/* ここが便利 */
	.flex-container.benri>.flex-item {
		margin-top: 2rem;
	}

	/* 使い方 */
	.hosoku {
		margin-top: 1rem;
		font-size: 1.2rem;
	}
	.externallink {
		margin-top: 3rem;
		font-size: 1.2rem;
		text-align: left;
	}
	.flex-container.howto {
		justify-content: space-between;
		word-break: break-all;
	}
	.flex-container.howto>.flex-item {
		width: 100%;
		margin-top: 2rem;
	}
	.flex-container.howto>.flex-item:first-of-type {
		margin-top: 3rem;
	}
	.flex-container.howto .num {
		width: 22px;
		font-size: 2rem;
		line-height: 1.4;
	}
	.flex-container.howto .img {
		float: left;
		width: 34%;
	}
	.flex-container.howto .text, .flex-container.howto .ttl {
		float: left;
		width: 66%;
		padding-left: 4%;
	}
	.flex-container.howto .ttl {

	}
	.flex-container.howto .text {
		margin-top: .5em;
		font-size: 1.4rem;
	}
	.caption-container {
		margin-bottom: 2rem;
		margin-top: 0.4rem;
	}
	
	/* フレックスコンテナ：スマホ2列 (20211117_mod)*/
	.flex-container_sc.sp-column2 {
		justify-content: space-between;
		font-size: 1.5rem;
	}
	.flex-container_sc.sp-column2 .ttl {
		margin-top: 0.5em;
		font-size: 1.6rem;
	}
	.flex-container_sc.sp-column2 .text {
		margin-top: 0.5em;
		font-size: 1.4rem;
	}
	.flex-container_sc.sp-column2 .category {
		margin-top: 0.5em;
		font-size: 1.2rem;
		line-height: 1.4;
	}
	.flex-container_sc.sp-column2>.flex-item {
		width: 48%;
		margin-top: 3rem;
		min-height: 0px;
	}
	.flex-container_sc.sp-column2>.flex-item:nth-of-type(-n+2) {
		/*margin-top: 0;*/
	}
	
	/* フレックスコンテナ：スマホ2行 (20211117_mod)*/
	.flex-container.column4>.flex-item {
		width: 100%;
		margin-left: 2%;
		margin-top: 2rem;
	}
	
	/* mod 20211109*/

	.btnAll a, .closeBtn a {
   		padding: 0.5em 0.5em;
    	width: auto;
    	margin: 10px auto;
    	cursor: pointer;
    	border: 1px solid #CCC;
    	border-radius: 3px;
    	text-decoration: none;
}
}

/* ====================================
	PC&タブレット、印刷専用スタイル
===================================== */
@media print , screen and (min-width: 768px) {
	/* メインビジュアル */
	.img-container {
		max-width: 1000px;
		margin-left: auto;
		margin-right: auto;
	}
	/* シーンタイトル */
	.scene-title-container {
		margin: 3rem 0 2rem;
	}
	.scene-title {
		margin-bottom: 3rem;
		font-size: 3.6rem;
	}
	.scene-title-container .bg-gray {
		min-height: 42px;
		padding: .5em .5em 0;
	}
	.scene-title-container .flex-tag {
		margin-left: .5em;
	}
	.category {
		padding: 0.3em;
		font-size: 1.2rem;
		text-align: center;
	}

	/* サブセクション */
	.in-box {
		padding: 3rem 5% 8rem;
		margin-top: 2rem;
	}
	.text-container {
		max-width: 860px; /*2021112mod*/
		margin: 0 auto;
		font-size: 1.6rem;
		line-height: 2;
	}
	.sub-ttl-container {
		margin-top: 8rem;
		border-top: solid 1px #A0A0A0;
		text-align: center;
	}
	.sub-ttl {
		width: 350px;
		margin: 0 auto;
		padding: .5em 0;
		font-size: 1.6rem;
	}

	/* ここが便利 */
	.flex-container.benri {
		margin-top: 6rem;
		padding: 0 5%;
		font-size: 2rem;
	}
	.flex-container.benri>.flex-item {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 31%;
		margin-left: 3.5%;
	}
	.flex-container.benri>.flex-item:nth-of-type(3n-2) {
		margin-left: 0;
	}
	.flex-container.benri .text {
		font-size: 1.6rem;
	}

	/* 使い方 */
	.hosoku {
		margin-top: 1rem;
		font-size: 1.2rem;
	}
	.externallink {
		margin-top: 8rem;
		font-size: 1.2rem;
		text-align: left;
	}
	.flex-container.howto {
		margin-top: 2rem;
		font-size: 1.4rem;
		word-break: break-all;
	}
	.flex-container.howto>.flex-item {
		width: 21%;
		margin-left: 5.3333%;
	}
	.flex-container.howto>.flex-item:nth-of-type(4n-3) {
		margin-left: 0;
	}
	.flex-container.howto .num {
		width: 26px;
		font-size: 2.2rem;
		line-height: 1.4;
		top: 1rem;
		left: 1rem;
	}
	.flex-container.howto .img {
		padding: 1rem;
	}
	.flex-container.howto .ttl {
		margin-bottom: .5em;
		font-size: 1.6rem;
	}
	.caption-container {
		margin-top: 0.4rem;
		margin-bottom: 1rem;
	}
	
	
	/* mod 20211109*/
	/* フレックスコンテナ：イメージテキスト */
	.flex-container.img-text {
		justify-content: space-between;
	}
	.flex-container.img-text>.img-container, .flex-container.img-text>.text-container
		{
		width: 48%;
	}

	/* フレックスコンテナ：3列 */
	.flex-container.column3 {
		min-height: 500px;
		margin-top: 5rem;
	}

	/* フレックスコンテナ：4列 */
	.flex-container.column4 {
		margin-top: 5rem;
	}
	.flex-container.column4 {
		font-size: 1.5rem;
	}
	.flex-container.column4 .ttl {
		margin-top: 0.5em;
		font-size: 1.6rem;
	}
	.flex-container.column4 .text {
		margin-top: 0.5em;
		font-size: 1.4rem;
	}
	.flex-container.column4 .category {
		margin-top: 0.5em;
		font-size: 1.2rem;
		line-height: 1.4;
	}
	.flex-container.column4>.flex-item {
		width: 23.5%;
		margin-left: 2%;
		margin-top: 2rem;
	}
	.flex-container.column4>.flex-item:nth-of-type(4n-3) {
		margin-left: 0;
	}
	.flex-container.column4>.flex-item:nth-of-type(-n+4) {
		margin-top: 0;
	}
	
	/* サブセクション */
	.sub-section {
		padding-top: 6rem;
	}
	.sub-title-container {
		padding-top: 5rem;
		border-top: solid 1px #d9d9d9;
		text-align:left;
	}
	.sub-title-container_exp {
		padding-top: 5rem;
		
		text-align:center;
	}
	.sub-title-container .products-sub-title {
		font-size: 2.8rem;
	}
	.sub-section:first-of-type .sub-title-container {
		padding-top: 0;
		border-top: none;
	}
	.sub-title {
		margin-top: 12rem;
		margin-bottom: 3rem;
		padding: 0.2em 0;
		font-size: 1.8rem;
		text-align: center;
	}
	.sub-section .base-width>.sub-title:first-of-type {
		margin-top: 4rem;
	}
	
	.text-container-btn {
		/*max-width: 860px; /*2021112mod*/
		margin: 0 auto;
		font-size: 1.6rem;
		line-height: 2;
	}

}

/* ====================================
	タブレット、印刷専用スタイル
===================================== */
@media print , screen and (min-width: 768px) and (max-width: 1079px) {
}

/* ====================================
	PC専用スタイル
===================================== */
@media only screen and (min-width: 1080px) {
}