@charset "utf-8";

/*
	共通
-----------------------------------------------------------------------------------------------*/
@font-face{
	font-family:'Noto Sans CJK JP Subset';
	font-style:normal;
	font-weight:400;
	src:
		local('Noto Sans CJK JP'),
		local('NotoSansCJKjp-Regular'),
		local('NotoSansJP-Regular'),
		url('../fonts/NotoSansCJKjp-Regular.woff') format('woff'),
		url('../fonts/NotoSansCJKjp-Regular.ttf') format('truetype');
}

@font-face{
	font-family:'Noto Sans CJK JP Subset';
	font-style:normal;
	font-weight:700;
	src:
		local('Noto Sans CJK JP'),
		local('NotoSansCJKjp-Bold'),
		local('NotoSansJP-Bold'),
		url('../fonts/NotoSansCJKjp-Bold.woff') format('woff'),
		url('../fonts/NotoSansCJKjp-Bold.ttf') format('truetype');
}

main{
	font-family:'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK JP Subset', 'Yu Gothic', '游ゴシック', YuGothic, '游ゴシック体', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'ＭＳ Ｐゴシック', sans-serif;
	font-weight:400;
	-moz-background-origin: 330;
}

main p{
	font-size:14px;
	line-height: 190%;
}
main img{
	width:100%;
}
main .txt_s{
	font-size:12px;
}
/* 表示切替 */
.switch{
	visibility:hidden;
}
.sp{
	display:none;
}
@media screen and (max-width:668px){
	.pc{
		display:none;
	}
	.sp{
		display:block;
	}
	br.sp{
		display:inline-block;
	}
}

/* タイトル */
#topArea{
	margin: 0 auto;
}
#topMain img {
	margin: 35px auto 0px auto;
}
@media screen and (max-width:668px){
	#topMain img {
		margin: 40px auto 0px auto;
	}
}
/* コンテンツ */
.ctsArea{
	margin: 0 auto;
	padding: 20px 0;
}
.sd_underLine {
  background: linear-gradient(transparent 70%, #FFF100 70%);
}
@media screen and (max-width:668px){
	.ctsArea{
		padding: 25px 0;
		width: 100%;
	}
}

/* なぜ7月3日がソフトクリームの日なの？ */
.ctsBox01{
	margin: 0 auto;
	display: -ms-flex;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.ctsArea h2::before {
	content: '';/*何も入れない*/
	display: inline-block;/*忘れずに！*/
	width: 165px;/*画像の幅*/
	height: 132px;/*画像の高さ*/
	background-image: url(../images/ph_sday_05.png);
	background-repeat: no-repeat;
	background-size: contain;
	vertical-align: -35px;
}
.ctsArea h2	{
	margin-top:15px;
	font-size: 25px;
	font-weight: bold;
	letter-spacing:2px;
	color:#F63B34;
}
.ctsBox01 p {
	width:420px;
	margin: 25px auto;
	display:inline-block;
}
.ctsBox01 figure {
	width:340px;
	height:auto;
}
@media screen and (max-width:668px){
	.ctsArea h2::before {
		width: 85px;/*画像の幅*/
		height: 68px;/*画像の高さ*/
	vertical-align: bottom;
}
	.ctsArea h2	{
		width:auto;/*画像の幅*/

		margin:0px auto;
		text-align:left;
		letter-spacing:1px;
	}
	.ctsBox01 p {
	width:100%;
}
.ctsBox01 figure {
	width:100%;
}
}/* ソフトクリームが日本にやってきた1951年！ */
.ctsBox02{
	margin: 0 auto;
	padding-bottom:20px;
	border-radius: 20px;
	width :100%;
		/* ドット（水玉）模様のCSS */
		background-color:#d4eefb;
	 	background-image:	radial-gradient(#ffffff 10%, transparent 15%),
											radial-gradient(#ffffff 10%, transparent 15%);
		background-position: 0 0, 9px 9px;
		background-size: 18px 18px;
}
.ctsBox02_inbox{
	margin: 0 20px;
	border-radius: 15px;
	background-color:#FFFFFF;
}
.ctsArea h3{
	color:#00A0E9;
	padding:25px 0;
	font-size: 25px;
	font-weight: bold;
	letter-spacing:1px;
	text-align: center;
	text-shadow    : 
       3px  3px 1.5px #ffffff,
      -3px  3px 1.5px #ffffff,
       3px -3px 1.5px #ffffff,
      -3px -3px 1.5px #ffffff,
       3px  0px 1.5px #ffffff,
       0px  3px 1.5px #ffffff,
      -3px  0px 1.5px #ffffff,
       0px -3px 1.5px #ffffff;
}
.fcolor_green {
	color:#8FC31F;
	letter-spacing:-1px;
	font-size: 30px;
}
.fcolor_pink {
	color:#F63B34;
	font-size: 30px;
}
.fcolor_orange {
	color:#F9A643;
	font-size: 30px;
}
.fcolor_0703 {
	color:#F63B34;
	font-size: 20px;
	text-shadow:
		.3px .3px #F63B34,
		-.3px .3px #F63B34,
		-.3px -.3px #F63B34,
		.3px -.3px #F63B34,
		.3px 0px #F63B34,
		0px .3px #F63B34,
		-.3px 0px #F63B34,
		0px -.3px #F63B34;
}
.ico_0703:after {
	content: '';/*何も入れない*/
	display: inline-block;/*忘れずに！*/
	width: 20px;/*画像の幅*/
	height: 36px;/*画像の高さ*/
	background-image: url(../images/ico_sday01.png);
	background-repeat: no-repeat;
	background-size: contain;
	vertical-align: 0pxx;
}
.ctsArea h4	{
	margin-bottom:10px;
	font-size: 18px;
	font-weight: bold;
	letter-spacing:1px;
	color:#00A0E9;
	display:inline-block;
}
.cts_ColumnBox{
	display: -ms-flex;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	padding:40px 20px;
}
.cts_ColumnLine{
	width :680px;
	margin:0 auto;
}
.cts_ColumnBox img{
	width :90%;
	display: block;
	margin:0 auto;
}
.cts_ColumnInBox01{
	width :320px;
}
.cts_ColumnInBox02{
	width :calc(100% - 320px);
}
.cts_PhSize {
	width :80%;
	margin:0 auto;
}
@media screen and (max-width:668px){
	.ctsBox02{
		width :100%;
		}
	.ctsBox02 img {
		width :100%;
		margin:0 auto;
		}
	.ctsArea h3{
		color:#00A0E9;
		padding:20px 0;
		font-size: 25px;
		font-weight: bold;
		letter-spacing:1px;
		text-align: center;
	}
	.cts_ColumnBox{
		flex-direction: column;
		padding:20px 20px;
	}
	.order1 {
  	order: 1;
	}
	.order2 {
  	order: 2;
	}
	.cts_ColumnLine{
		width :100%;
		padding:0 20px;
		overflow: hidden;
	}
	.cts_ColumnLine img {
		width :100%;
	}
	.cts_ColumnBox img{
		width :100%;
		margin-top:10px;
	}
	.cts_ColumnInBox01{
		width :100%;
	}
	.cts_ColumnInBox02{
		width :100%;
	}
	.cts_PhSize {
		width :100%;
	}
}
/* ソフトクリームを知る・楽しむコンテンツ！ */
.ctsArea h6	{
	padding:55px 0 0 0;
	margin-bottom:40px;
	font-size: 23px;
	font-weight: bold;
	letter-spacing:2px;
	text-align:center;
	color:#F63B34;
	background-image: url(../images/ph_sday_pickup.png);
	background-position: top;
	background-repeat: no-repeat;
	background-size: 130px auto;
}
@media screen and (max-width:668px){
	.ctsArea h6	{
		background-size: 40% auto;
		margin-bottom:30px;
	}
}
/* バナー */
#listBnr{
	display: -ms-flex;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-justify-content: space-between;
	justify-content: space-between;
}
#listBnr li{
	margin-bottom:25px;
}
#listBnr .sd_banner_blue img {
	border-radius: 20px;
	border: 5px solid #036EB8;
}
#listBnr .sd_banner_brown img {
	border-radius: 20px;
	border: 5px solid #90786c;
}
#listBnr .sd_banner_pink img {
	border-radius: 20px;
	border: 5px solid #FF4E64;
}
#listBnr .sd_banner_none img {
	border-radius: 20px;
}
#listBnr .sd_banner01{
	width: calc((100% - 30px)/2);
}


@media screen and (max-width:668px){
	#listBnr li{
		width: 100%;
		margin: 0 0 15px;
	}
	#listBnr .sd_banner_blue img {
		width:100%;
		border: 4px solid #036EB8;
	}
	#listBnr .sd_banner_brown img {
		width:100%;
		border: 4px solid #90786c;
	}
	#listBnr .sd_banner_pink img {
		width:100%;
		border: 4px solid #FF4E64;
	}
	#listBnr .sd_banner_none img {
		width:100%;
	}
	#listBnr .sd_banner01{
		width: calc((100% 0px)/1);
	}
}