/* CSS Document */


@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Noto+Sans+JP:wght@400;700&display=swap');


/*目次

1.FSの設定打消し
2.全体の設定
3.PC版とSP版での表示切替（見出しなどで分けたい場合に使用）

4.メインビジュアル（h1）部分
5.ポイント部分
6.登録部分
7.連携メリット部分
8.お問い合わせ説明部分
9.もどるボタン

*/



/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
1.FSの設定打消し
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

/*メインエリアの横幅制限解除ここから*/
.fs-l-pageMain {
	max-width: 100%;
}

.fs-l-main{
	max-width: 100%;
	padding:0;
	margin:0;
}
/*メインエリアの横幅制限解除ここまで*/


.fs-l-main *{
	min-width: initial;
    min-width: auto;
    min-height: initial;
    min-height: auto;
}

.fs-c-breadcrumb{
	padding-top:80px;
}
@media screen and (max-width:768px) {
	.fs-c-breadcrumb{
		padding-top:80px;
	}
}

/* 「現在登録されている商品はありません。」を非表示 */
.fs-c-noResultMessage { display: none }

/* 文字サイズ調整 */
.fs-l-main{
	font-size:1.4em;
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
2.全体の設定
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

body{
/*背景色*/
	background-color: #f3f1ed;
}

/*全体の設定/フォントなど*/
.js-main{
	text-align: center;
	/*font-size:1.3rem;*/
	line-height: 1.5;
	letter-spacing: 0.07em;
	font-family:'Lato','Noto Sans JP','Helvetica Neue', Arial,'Hiragino Kaku Gothic ProN','Hiragino Sans', Meiryo, sans-serif;
	font-weight: 400;
}
@media screen and (max-width:768px) {
	.js-main{
		padding-top:0;
	}
}

/*ななめボーダー背景色*/
/*.jssale{
background: -webkit-repeating-linear-gradient(-45deg,#fbf9f7 0,#fbf9f7 5px,#fff 5px,#fff 10px);
    background: -o-repeating-linear-gradient(-45deg,#fbf9f7 0,#fbf9f7 5px,#fff 5px,#fff 10px);
    background: repeating-linear-gradient(-45deg,#fbf9f7 0,#fbf9f7 5px,#fff 5px,#fff 10px);
}*/

.js-main p{
	font-weight: 400;
}

/*リンクの設定*/
.js-main a{
	text-decoration:none;
	color:black;
}
.js-main a:hover,a:hover img{
	opacity:0.6;
    -moz-opacity:0.6;
    filter:alpha(opacity = 60);
}


/*widthなどの適応範囲をborder基準に変更*/
.js-main, .js-main::before, .js-main::after{
	box-sizing: border-box;
}


/*SP版画像サイズ制御*/
@media screen and (max-width:768px) {
    /*　画面サイズが768px以下の時はここを読み込む　*/
	.js-main img{
	width:100%;
	height: auto;
	}
}

/*PC980px、SP100%*/
.js-container{
	width:980px;
	margin:auto;
}
@media screen and (max-width: 768px){   
	.js-container{
		width:95%;
	}
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
3.PC版とSP版での表示切替（見出しなどで分けたい場合に使用）
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

/*brタグにclassを追加
PCのみで改行→pc <br class="pc">
SPのみで改行→sp <br class="sp">
※両方共通の改行の場合は<br>のみでOK

他、PCとSPで表示を分けたい部分にも使用可能
*/

@media screen and (min-width: 768px){   
  .pc { display:block; }
  .sp { display:none; }
}
@media screen and (max-width: 768px){   
  .pc { display:none; }
  .sp { display:block; }
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
4.メインビジュアル（h1）部分
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.js-main h1{
	font-size:0.8em;
	font-weight: normal;
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
5.ポイント部分
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.line_cpn{
	margin:3em auto;
}

.line_cpn .text01{
	font-size: 1.25em;
}

.line_cpn .text02{
	font-size: 1.25em;
}

.line_cpn .text03{
	
}
/*吹き出し*/
.balloon1 {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #000;
  font-size: 16px;
  background: #fff;
}
.balloon1:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #fff;
}
.balloon1 p {
  margin: 0;
  padding: 0;
}


.line_cpn .text04{
	font-size:2.5em;
}
.line_cpn .text04 .point{
	color:#00ba01;
	font-weight: 700;
}

.line_cpn .text05{
	display: inline-block;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	font-size:0.7em;
	padding: 0.5em 1em;
	margin:1em;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
6.登録部分
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.line_join{
	
}

.line_join .heading{
	font-weight: 700;
	font-size:0.8em;
}
.line_join .sub-heading{
	font-size:0.5em;
}

/*ボタン*/
.btn01 {
  display: inline-block;
  padding: 0.5em 1em 0.5em;
  color: #ffffff;
  border-radius: 25px;
  background-color: #00ba01;
  border: none;
  cursor: pointer;
  margin: 0.8em 5px;
}
/*ボタン黒*/
.btn_bk{
	background-color: #434343;
}

.line_join .area02{
	margin:2em auto;
}

/*PC　QRコードエリア*/
.join-pc-area{
	border:1px solid #000;
	padding:40px;
	width:500px;
	margin:auto;
}

.join-pc-area .flex-box{
	/*フレックスボックスの設定*/
	display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	/*フレックスボックスの要素を中央寄せ*/
	justify-content: flex-start;
}
.join-pc-area .item01{
	width:35%;
}
.join-pc-area .item01 img{
	width:100%;
}
.join-pc-area .item02{
	width:60%;
	text-align: left;
	font-size: 0.8em;
	padding:10px 0 10px 5%;
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
7.連携メリット部分
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.line_renkei{
	background-color: #fff;
	margin: 3em auto;
	border: 3px solid #00ba01;
	
	box-sizing:border-box;
	padding:30px;
}
@media (max-width: 768px) {
	.line_renkei{
		padding:3%;
	}
}

.line_renkei .title{
	color:#00ba01;
	font-size: 2em;
}
@media (max-width: 768px) {
	.line_renkei .title{
		font-size: 1em;
	}
}
.renkei_heading{
	font-weight: 700;
}

/*メリットエリア*/
.line_renkei .merit_area{
	margin:2em auto;
}
/*メリットフレックスボックス*/
.merit_area .flex-box{
	/*フレックスボックスの設定*/
	display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
	/*フレックスボックスの要素を中央寄せ*/
	justify-content: flex-start;
	
	width:80%;
	margin:auto;
}
.merit_area .flex-box .item01{
	width:15%;
	
	font-size:1.8em;
	border-right: 1px solid #000;
}
.merit_area .flex-box .item02{
	width:75%;
	
	padding-left: 20px;
	text-align: left;
}
.merit_area .flex-box .item02 h3{
	color:#00ba01;
	margin:0;
	font-size:1.5em;
}
.merit_area .flex-box .item02 .text{
	margin-top:1em;
	font-size: 0.8em;
}
@media (max-width: 768px) {
	.merit_area .flex-box{
		width:100%;
	}
	.merit_area .flex-box .item01{
		font-size:1.25em;
	}
	.merit_area .flex-box .item02 h3{
		font-size:1.25em;
	}
	.merit_area .flex-box .item02 .text{
		font-size:0.5em;
	}
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
8.お問い合わせ説明部分
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.line_toiawase{
	background-color: #00ba01;
	margin: 3em auto;
	
	color:#fff;
	
	box-sizing:border-box;
	padding:30px;
}
.line_toiawase .title{
	display: inline-block;
	font-size: 1.8em;
	margin:0;
	border-bottom: 4px solid #fff;
}
/*SP設定*/
@media (max-width: 768px) {
	.line_toiawase .title{
		font-size: 1em
	}
}

/*お問い合わせフレックスボックス　SP設定*/
.contents-area .flex-box{	
	width:100%;
	margin:2em auto;
}
.contents-area .flex-box .item01{
	width:100%;
}
.contents-area .flex-box .item01 img{
	width:50%;
}
.contents-area .flex-box .item02{
	width:100%;

	text-align: left;
}

.contents-area .flex-box .item02 h3{
	margin-top:1em;
	font-size: 1.3em;
}
.contents-area .flex-box .item02 .text{
	margin-top:1em;
	font-size:0.6em;
}

/*お問い合わせフレックスボックス　PC設定*/
@media (min-width: 768px) {
	.contents-area .flex-box{
		/*フレックスボックスの設定*/
		display: -webkit-flex;
    	display: flex;
    	-webkit-flex-wrap: wrap;
    	flex-wrap: wrap;
		/*フレックスボックスの要素を中央寄せ*/
		justify-content: flex-start;
	
		width:80%;
	}
	.contents-area .flex-box .item01{
		width:30%;
	}
	.contents-area .flex-box .item01 img{
		width:100%;
	}
	.contents-area .flex-box .item02{
		width:65%;
		
		padding-left:5%;
	}
	.contents-area .flex-box .item02 h3{
		margin:0;
		font-size: 1.3em;
	}
	.contents-area .flex-box .item02 .text{
		margin-top:1em;
		font-size:0.8em;
	}
}


/*注意書き*/
.line_toiawase .notice-area{
	margin-top:1em;
	padding-top:0.5em;
	border-top: 1px solid #fff;
}
.line_toiawase .notice-area .time{
	
}
.line_toiawase .notice-area .text{
	padding-top:0.25em;
	font-size:0.6em;
}
/*SP設定*/
@media (max-width: 768px) {
	.line_toiawase .notice-area .time{
		font-size:0.8em
	}
	.line_toiawase .notice-area .text{
		font-size:0.5em;
	}
}


/*問い合わせ停止*/
.toiawase_stop{
	width:800px;
	margin:1em auto 3em;
	padding:1em;
	background-color: #fff;
	border:2px dotted brown;
	color:brown;
	font-weight:bold;
}
@media (max-width: 768px) {
	.toiawase_stop{
		width:80%;
	}
	.toiawase_stop .text{
		text-align: left;
	}
}


/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
9.もどるボタン
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.line_back{
	margin:2em auto;
}