@charset "utf-8";

/* utility */

.fz52 {
  font-size: 52px;
}

.green {
  color: #00B802;
}

.line a img {
  transition: .3s;
  display: block;
  margin: auto;
}

.line a img:hover {
  opacity: .7;
}

/* .line_header ----------------*/

.line_header {
  font-size: 16px;
  position: relative;
}

.line_header h3 {
  color: #00B802;
  font-size: 46px;
  width: 70%;
  margin: auto;
  background-image: url(https://www.chips-shop.com/images/line/line_effect_left.png), url(https://www.chips-shop.com/images/line/line_effect_right.png);
  background-position: center left, center right;
  background-repeat: no-repeat;
  box-sizing: border-box;
  padding: 0 72px;
}

/* 画面幅に応じて見出しを調整 */

@media screen and (max-width: 1580px) {
  .line_header h3 {
    width: 80%;
  }
}

@media screen and (max-width: 1480px) {
  .line_header h3 {
    width: 90%;
  }
}

@media screen and (max-width: 1300px) {
  .line_header h3 {
    width: 100%;
    font-size: 36px;
  }
}

@media screen and (max-width: 768px) {
  .line_header h3 {
    font-size: 24px;
  }
}

@media screen and (max-width: 480px) {
  .line_header h3 {
    padding: 0 8px;
    background-image: none;
  }
  .line_header .line_pc {
    display: none;
  }
}

.line_header .radial_gradient {
  background: radial-gradient(#FD9F02, transparent 75%);
  width: 600px;
  height: 600px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: -1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  top: -160px;
  margin-bottom: -460px;
}

.line_header p.balloon {
  position: relative;
  left: 320px;
  top: -108px;
}

/* 吹き出しを消す */

@media screen and (max-width: 1400px) {
  .line_header p.balloon {
    height: 163px;
    position: static;
  }

  .line_header p.balloon img {
    display: none;
  }
}

/* QRコードを消す */

@media screen and (max-width: 640px) {
  .line_header .radial_gradient,
  .line_header p.balloon {
    display: none;
  }
  .line_header {
    background: linear-gradient(transparent, rgba(253, 159, 2, .4), transparent);
  }
}

/* .line_about -----------------*/

.line_about {
  color: #fff;
  background-color: #00B802;
  padding: 16px 32px;
  text-align: left;
  margin-top: 32px;
}

.line_about h3 {
  font-size: 26px;
}

.line_about p {
  font-size: 16px;
}

.line_about dl {
  max-width: 960px;
  color: #00B802;
  background-color: #fff;
  border-radius: 8px;
  padding: 16px 32px 32px;
  font-size: 26px;
  font-weight: bolder;
}

.line_about dt {
  color: #fff;
  background-color: #FD9F02;
  border-radius: 50%;
  float: left;
  width: 55px;
  height: 55px;
  line-height: 55px;
  text-align: center;
}

.line_about dd {
  padding-left: 67px;
  line-height: 1.2;
}

.line_about dt,
.line_about dd {
  margin-top: 16px;
}

@media screen and (max-width: 480px) {
  .line_about {
    padding: 16px 8px;
  }
  .line_about dl {
    padding: 16px 8px 32px;
    font-size: 20px;
  }
  .line_about dt {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    line-height: 32px;
  }
  .line_about dd {
    padding-left: 42px;
  }
}

/* .line_flow -----------------*/

.line_flow {
  background-color: #EEE;
  padding: 16px 32px;
  color: #00B802;
  text-align: left;
}

.line_flow h3 {
  font-size: 26px;
}

.line_flow .wide_box {
  max-width: 960px;
  color: #000;
  background-color: #fff;
  border-radius: 8px;
  padding: 16px 32px 32px;
  position: relative
}

.line_flow .wide_box h4 {
  font-size: 26px;
  border-bottom: 1px solid #ccc;
  padding: 0 8px 12px;
}

.line_flow .wide_box p {
  font-size: 16px;
}

.line_flow .step2 {
  margin-top: 52px;
}

.line_flow .step2::before {
  display: block;
  content: "";
  width: 0;
  height: 0;
  border: 48px solid transparent;
  border-top: 24px solid #00B802;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: -38px;
}

.line_flow .line_flow_flex {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
}

.line_flow .narrow_box::before {
  display: block;
  content: "";
  width: 0;
  height: 0;
  border: 48px solid transparent;
  border-top: 24px solid #00B802;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: -38px;
}

.line_flow .narrow_box::after {
  display: block;
  content: "";
  width: 0;
  height: 0;
  border: 48px solid transparent;
  border-top: 24px solid #00B802;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  bottom: -86px;
}

.line_flow .narrow_box p:nth-child(1) {
  position: absolute;
  text-align: center;
  font-size: 26px;
  color: #00B802;
  top: -90px;
  font-weight: bold;
  margin: auto;
  left: 0;
  right: 0;
}

.line_flow .narrow_box h4 {
  font-size: 26px;
  border-bottom: 1px solid #ccc;
  padding: 0 8px 12px;
}

.line_flow .narrow_box p {
  font-size: 16px;
}

.line_flow .finish p {
  font-size: 42px;
  font-weight: bold;
  text-align: center;
}

.line_flow .finish p:nth-child(1) {
  font-size: 52px;
  color: #00B802;
  margin: 12px 0 16px;
  transform: rotate(-8deg);
}

.line_flow .finish p:nth-child(2) {
  margin: 0;
  line-height: 1.2;
}

.line_flow .narrow_box {
  width: 41%;
  color: #000;
  background-color: #fff;
  border-radius: 8px;
  padding: 16px 32px 32px;
  margin: 104px 0 52px;
  position: relative;
}

.line_flow .step3_a h4 {
  display: flex;
}

.line_flow .step3_a .newline {
  padding-left: 8px;
}

@media screen and (max-width: 1520px) {
  .line_flow .line_flow_flex {
    display: block;
  }

  .line_flow .narrow_box {
    width: auto;
  }

  .line_flow .line_flow_flex div:last-child {
    margin-top: 108px;
  }

  .line_flow .narrow_box:first-child::after {
    display: none
  }

}

@media screen and (max-width: 480px) {
  .line_flow {
    padding: 16px 8px;
  }
  .line_flow .wide_box {
    padding: 16px 8px 32px;
  }
  .line_flow .narrow_box {
    padding: 16px 8px 32px;
  }
  .line_flow .finish p {
    font-size: 32px;
  }
  .line_flow .narrow_box p:nth-child(1) {
    font-size: 22px;
  }
}

.line_header .btn01,
.line_header .btn02,
.line_flow .step1 a,
.line_flow .step2 a {
  display: block;
  max-width: 344px;
  margin: auto;
}

.register_btn {
  display: block;
  background-color: #F9C121;
  color: #fff;
  text-align: center;
  max-width: 368px;
  height: 76px;
  line-height: 76px;
  font-size: 26px;
  font-weight: bold;
  margin: auto;
}

.register_btn:hover {
  text-decoration: none;
  opacity: .7;
}

.top_btn {
  display: block;
  color: #BBB;
  background-color: #fff;
  text-align: center;
  max-width: 368px;
  height: 76px;
  line-height: 76px;
  font-size: 26px;
  font-weight: bold;
  border: 1px solid #BBB;
  margin: 32px auto;
}

.top_btn:hover {
  color: #fff;
  background-color: #bbb;
  text-decoration: none;
}

.line_flow .br_sp {
  display: none;
}

@media screen and (max-width: 600px) {
  .line_flow .br_sp {
    display: block;
  }
  .line_flow h4 {
    text-align: center;
  }
  .line_flow .step3_a h4 {
    display: block;
  }
}


/**20180226追記**/
	.clearfix:after {
		visibility: hidden;
		display: block;
		font-size: 0;
		content: " ";
		clear: both;
		height: 0;
		}
	* html .clearfix{ zoom: 1; } /* IE6 */
	*:first-child+html .clearfix { zoom: 1; } /* IE7 */
	.clear{
		clear:both;
	}
	.line_campaign_01,.line_campaign_02,.line_campaign_02_btn{
		font-size: 3.125vw;
	}
	.line_campaign_01{
		background: url(/images/line/line_bg.png) no-repeat;
		background-position: center top 20px;
		background-size: 100%;
	}
	.line_campaign_01 h1{
		width: 83%;
		margin: 0 auto;
		background: none;
		border: none;
	}
	.line_txt01{
		font-size: 1.2em;
		font-weight: bold;
		color: #222222;
	}
	.line_txt02{
		font-size:1.2em;
		color: #545454;
		text-align: left;
		padding: 0 1em;
	}
	.line_txt02 br,.line_campaign_02 br,.line_campaign_02_txt br{
		display: none;
	}
	.line_campaign_02{
		background: #f4f4f4;
		padding: 0 2em 1.5em 2em;
		color: #008200;
		font-weight: bold;
	}
	.line_campaign_02 h3{
		font-size: 1.6em;
		padding: 1em 0 .7em 0;
		margin: 0;
	}
	.line_campaign_02 h4{
		position: relative;
		font-size: 1.4em;
		margin: 0;
		line-height: 1.6;
		text-align: left;
	}
	.line_campaign_02 h4:before{
		content: "①";
		position: absolute;
		left: -1em;
		top:0;
		color:#494949;
	}
	.line_campaign_02 h4.line_no2:before{
		content: "②";
	}
	.line_campaign_02 ul{
		background: #ffffff;
		padding: 1em;
		margin: .5em 0 2em 0;
	}
	.line_campaign_02 li{
		text-align: left;
		font-size: 1.4em;
		color: #222222;
		margin-bottom: .5em;
	}
	.line_campaign_02_btn{
		color: #545454;
		margin: 2em 1.5em;
		font-size: 1.2em;
	}
	.line_campaign_02_txt{
		text-align: left;
	}
@media only screen and (min-width: 768px) {
	.line_campaign_01,.line_campaign_02,.line_campaign_02_btn{
		font-size: 20px;
	}
	.line_txt02{
		font-size:.9em;
	}
	.line_txt02 br,.line_campaign_02 br,.line_campaign_02_txt br{
		display: block;
	}
	.line_campaign_01{
		background-position: center bottom;
	}
	.line_campaign_02{
		margin: 4em 0 2em 0;
		padding:0 7% 35px 7%; 
	}
	.line_campaign_02 h3{
		padding: .5em 0;
		
	}
	.line_campaign_02 h4:before{
		left: -1.5em;
	}
	.line_campaign_02 ul{
		padding: 1em;
	}
	.line_campaign_02 li{
		margin-bottom: 0;
	}

	.line_txt02,.line_campaign_02_txt {
		text-align:center;
	}
	.line_campaign_02 h4{
		font-size: 1.2em;
	}
	.line_campaign_02 li{
		font-size: 1.1em;
	}
	.line_campaign_02_btn{
		margin: 2em 6em;
	}
	.line_campaign_02_btn_in{
		float: left;
		width: 43%;
		margin-right: 14%;
	}
	.line_campaign_02_btn_in:nth-child(2){
		margin-right:0 ;
	}
	.line_campaign_02_btn_in p{
		font-size: .75em;
		
	}
	.line_campaign_02_txt{
		clear: both;
		text-align: left;
		padding-top: 1em;
		margin: 0;
		font-size: .75em;
	}
	}