@charset "utf-8";


@media only screen and (max-width: 767px) {

/* halohaloTopContent */
.halohaloTopContent{
	width:100%;
}

/* halohaloTopTitleBox */
.halohaloTopTitleBox{
	width:100%;
	background:none;
}
/*.halohaloTopTitleBox > .inner{
	position:static;
	width:100%;
	height:0;
	padding-top:0;
}
.halohaloTopTitleBox > .inner > img{
	position:static;
	top:0;
	left:0;
	width:0;
	margin-left:0;
}*/

	/*終了しました*/
	.halohaloTopAtt {
		font-size: 1.2em;
		text-align: center;
		background: #0093fb;
		padding: 6% 0 3%;
		color: #FFF;
	}
	.halohaloTopAtt span {
		color: #FFDD00;
		font-weight: bold;
	}
	/*商品ラインアップ*/
	.halohaloTopAtt h2.topTitle {
		padding: 15px 22px 10px;
		border-top: #fff 1px solid;
		border-bottom: #fff 1px solid;
		font-size: 2.9rem;
		display: inline-block;
	}
	.halohaloTopAtt p {
		text-align: center;
	}
	.halohaloTopAtt ul {
		width: 100%;
		margin: 0 auto 5%;
		padding: 6% 15%;
	}
	.halohaloTopAtt ul li {
		margin-bottom: 10%;
		font-size: 1.8rem;
		margin-top: 0;
		min-height: 0;
    position: relative;
	}
	.halohaloTopAtt ul > li:last-child {
		margin-bottom: 0;
	}
  .halohaloTopAtt ul li .soldOut{
    position: absolute;
    width: 85%;
    top: 29%;
    left: 7%;
    transform: rotate(-15deg);
  }
	.halohaloTopAtt .halohaloList .algybtn01 {
		margin-bottom: 10px;
	}
	.halohaloTopAtt .halohaloList .algybtn01 a {
		font-size: 1.4rem;
		line-height: 1.3;
		color: #0093fb;
		min-width: 250px;
		padding: 12px 0 8px;
		border: solid 2px #005bd7;
		border-radius: 13px;
		background-color: #fff;
		display: inline-block;
		box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
	}
  .halohaloTopAtt .halohaloList dd:first-of-type{
    margin: 3% 0;
  }
	.halohaloTopAtt .halohaloList .algybtn02 a {
		font-size: 1.6rem;
		line-height: 1.3;
		color: #0093fb;
		padding: 5%;
		border: solid 2px #005bd7;
		border-radius: 13px;
		background-color: #fff;
		display: block;
		box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
	}
	.halohaloTopAtt .halohaloList .algybtn01 a:link {
		text-decoration: none;
	}
	.halohaloTopAtt .halohaloList .algybtn02 a:link {
		text-decoration: none;
	}
	.halohaloTopAtt .caution {
		text-align: left;
		font-size: 1.5rem;
		margin: 0 3%;
	}
/* historyBtn */
.historyBtn > a{
	display:block;
	width:100%;
	margin:40px auto 0;
	color:#ffffff;
	border:#ffffff 2px solid;
	text-decoration:none;
}
.halohalo20th .historyBtn > a{
	margin-top:20px;
}
.historyBtn > a > span{
	display:block;
	padding:10px 20px;
	background:url(/site_common/img/com_ic09.png) no-repeat right 0 bottom 50%;
	background-size: auto 12px;
	text-align:center;
}

/* aboutHalohalo */
.aboutHalohalo{
	margin-top:-30px;
	background:url(/syohin/sweets/halohalo/figure/index_bg03_sp.webp) no-repeat 50% 0;
	background-size: 100% auto;
}
.aboutHalohalo .inner{
	width:100%;
	padding:44% 15px 20px;
	color:#0077f9;
}
.aboutHalohalo .aboutTitle{
	text-align:center;
}
.aboutHalohalo .aboutTitle > span{
	padding:13px 10px 10px;
	border-top:#0077f9 1px solid;
	border-bottom:#0077f9 1px solid;
	font-size:2.9rem;
}
.aboutHalohalo .aboutTitle + .paragraph{
	margin-top:30px;
}
.aboutHalohalo .paragraph + .paragraph{
	margin-top:1em;
}

/* halohaloJelly */
.halohaloJelly{
	background:#0050f6 url(/syohin/sweets/halohalo/figure/index_bg04_sp.webp) no-repeat 50% 100%;
	background-size:100% auto;
}
.halohaloJelly .inner{
	padding:50px 15px 84.6%;
	color:#ffffff;
}
.halohaloJelly .jellyTitle{
	text-align:center;
}
.halohaloJelly .jellyTitle > span{
	padding:13px 15px 10px;
	border-top:#ffffff 1px solid;
	border-bottom:#ffffff 1px solid;
	font-size:3.5rem;
}
.halohaloJelly .jellyTitle > span > span{
	font-size:2.1rem;
}
.halohaloJelly .jellyTitle + .paragraph{
	margin-top:30px;
}
.halohaloJelly .paragraph + .paragraph{
	margin-top:1em;
}

/* halohaloIce */
.halohaloIce{
	background:#ffffff url(/syohin/sweets/halohalo/figure/index_bg05_sp.webp) no-repeat 50% 100%;
	background-size:100% auto;
}
.halohaloIce .inner{
	padding:50px 15px 46.8%;
	color:#018cfb;
}
.halohaloIce .iceTitle{
	text-align:center;
}
.halohaloIce .iceTitle > span{
	padding:13px 5px 10px;
	border-top:#018cfb 1px solid;
	border-bottom:#018cfb 1px solid;
	font-size:3.3rem;
}
.halohaloIce .iceTitle > span > span{
	font-size:2.1rem;
}
.halohaloIce .iceTitle + .paragraph{
	margin-top:27px;
}
.halohaloIce .paragraph + .paragraph{
	margin-top:1em;
}
	
/* halohalo20th */
.halohalo20th{
	background:#0d64db url(/syohin/sweets/halohalo/figure/index_bg06_sp.webp) no-repeat 50% 100%;
	background-size:100% auto;
}
.halohalo20th .inner{
	padding:30px 15px 58.5%;
	background:url(/syohin/sweets/halohalo/figure/index_bg07_sp.webp) no-repeat 50% 0;
	background-size:100% auto;
	color:#ffffff;
}
.halohalo20th .title{
	width:83.3%;
	margin:0 auto 20px;
}
.halohalo20th .paragraph {
	text-align: center;
}

/* historyContent */
.historyContent{
	width:100%;
}


/* historyLead */
.historyLead {
	width:100%;
}
.historyLead > .inner {
	width:100%;
	padding: 30px 15px 25px;
	color:#002672;
	text-align:center;
}
.historyLead > .inner > .lead01 {
	font-size:1.8rem;
	font-weight:bold;
}
.historyLead > .inner > .lead01 span {
	color:#ff6c00;
	font-size:2.2rem;
}
.historyLead > .inner > .lead02 {
	font-size:1.4rem;
}

/* historyList */
.historyList > .col {
	padding: 15px 15px 20px;
}
.historyList > .col:nth-child(odd) {
	background: #def2ff;
}
.historyList > .col:nth-child(even) {
	background: #d1edff;
}
.historyList > .col > .inner > .year {
	color: #035ef6;
	font-size: 3.2rem;
	text-align: center;
}
.historyList > .col > .inner > .balloon01,
.historyList > .col > .inner > .balloon02{
  text-align: center;
	position:relative;
	width: 100%;
	padding: 13px 10px;
	background: #ffffff;
	border-radius: 8px;
}
.historyList > .col > .inner > .balloon01:before,
.historyList > .col > .inner > .balloon02:before{
	content: "";
	position: absolute;
	top: -8px;
	right: 50%;
	display: block;
	width: 0;
	height: 0;
	margin-right: -6.5px;
	border-style: solid;
	border-width: 0 6.5px 8px 6.5px;
	border-color: transparent transparent #ffffff transparent;
}
.historyList > .col > .inner > .balloon01 > span,
.historyList > .col > .inner > .balloon02 > span{
	color:#002672;
	font-size:1.4rem;
	font-weight:bold;
	line-height: 1.2;
}
.historyList > .col > .inner > .halohaloList{
	display: -webkit-flex;
	display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.historyList > .col > .inner > .halohaloList > li{
	width: 25%;
  margin-top: 10px;
}
.historyList > .col > .inner > .halohaloList > li > .image{
	text-align:center;
}
.historyList > .col > .inner > .halohaloList > li > .name{
	margin: 5px 3px 0;
	color:#1889e1;
	font-size:1.2rem;
	text-align:center;
}
.historyList > .col > .inner > .halohaloList > li > .name br{
	display:none;
}

/* comment */
.comment {
	width:100%;
}
.comment > .inner {
	width:100%;
	padding:87px 15px 37px;
	background:url(/syohin/sweets/halohalo/figure/history_bg02.webp) no-repeat 50% 27px;
	background-size:88px 43px;
	color:#0070e7;
	font-size:1.5rem;
	font-weight:bold;
	text-align:center;
}

/* lineupWrap */
.lineupWrap{
	width:100%;
	background:#0093fa url(/syohin/sweets/halohalo/figure/index_bg02.webp) no-repeat 50% 0;
}
.lineupWrap > .inner{
	width:100%;
	margin:0 auto;
	padding:38px 15px;
}
.lineupWrap > .inner > .title{
	padding-bottom:10px;
	border-bottom:#ffffff 2px solid;
	color:#ffffff;
	font-size:1.7rem;
}
.lineupWrap > .inner > .lineupTitle{
	margin:20px 0 25px;
	text-align: center;
}
.lineupWrap > .inner > .lineupTitle > span{
	padding:15px 37px 15px;
	border-top:#ffffff 1px solid;
	border-bottom:#ffffff 1px solid;
	color:#ffffff;
	font-size:2.9rem;
}
.lineupWrap > .inner > .lineupColumn > .col{
	float:left;
	width:48%;
	margin:25px 4% 0 0;
}
.lineupWrap > .inner > .lineupColumn > .col:nth-child(1),
.lineupWrap > .inner > .lineupColumn > .col:nth-child(2){
	margin-top:14px;
}
.lineupWrap > .inner > .lineupColumn > .col.mimipType{
	display:none;
}
.lineupWrap > .inner > .lineupColumn > .col:nth-child(2n){
	margin-right:0;
}
.lineupWrap > .inner > .lineupColumn > .col > .image{
	margin-bottom:15px;
}
.lineupWrap > .inner > .lineupColumn > .col > .btn > a{
	display:block;
	width:100%;
	background:#ffffff;
	border:#ffffff 2px solid;
	color:#023795;
	text-decoration:none;
}
.lineupWrap > .inner > .lineupColumn > .col > .btn.nutritionType > a{
	background:#0093fa;
	color:#ffffff;
}
.lineupWrap > .inner > .lineupColumn > .col > .btn > a > span{
	display:block;
	padding:10px 20px 10px 10px;
	background:url(/site_common/img/com_ic07.png) no-repeat right 0 bottom 50%;
	background-size: auto 12px;
	font-size:1.3rem;
	text-align:center;
}
.lineupWrap > .inner > .lineupColumn > .col > .btn.nutritionType > a > span{
	background:url(/site_common/img/com_ic09.png) no-repeat right 0 bottom 50%;
	background-size: auto 12px;
}
.lineupWrap > .inner > .lineupColumn + .btnStyle02{
	margin-top:30px;
}
.lineupWrap > .inner > .lineupColumn + .btnStyle02 a{
	display:block;
	width:100%;
	margin:0 auto;
}
.lineupWrap > .inner > .lineupColumn + .btnStyle02 a span{
	display:block;
	width:100%;
	text-align:center;
}

/*cp*/
  .cp .inner{
	width:100%;
	margin: 0 auto;
	padding: 10% 5%;
    text-align: center;
}
.cp .topTitle {
  padding: 15px 22px 10px;
		border-top: #333 1px solid;
		border-bottom: #333 1px solid;
		font-size: 2.9rem;
		display: inline-block;
}
.cp .cpWrap {
  margin-top: 10%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.cp .cpWrap:has(li:only-child) {
  justify-content: center;
}
.cp .cpWrap li {
  text-align: left;
  width: 46%;
}
.cp .cpWrap li:nth-child(n + 3) {
  margin-top: 10%;
}
.cp .cpWrap li .cpImg {
  margin-bottom: 5%;
}
.cp .cpWrap li .cpTitle a {
  font-size: 1.5rem;
  text-decoration: none;
  font-weight: bold;
}
.cp .cpWrap li .period {
  color: #dd3900;
  font-size: 1.4rem;
  font-weight: bold;
}




/*=================================

	clearfix

=================================*/
.lineupWrap > .inner > .lineupColumn:after,
.syohinSnsList ul:after {
	content: "";
	display: block;
	clear: both;
}

}