/* CSS Document */

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

 ハナノヒアプリ紹介サイト
	
======================================================================== */


/* -------------------------------------------------------------------
　共通スタイル
------------------------------------------------------------------- */
*{
margin: 0;
padding: 0;
}

.wrapper{
	width:100%;
	text-align: center;
	margin: 0 auto;
	font-family:"游ゴシック体", "Yu Gothic", "Hiragino Kaku Gothic Pro",'Noto Sans JP', "Meiryo", sans-serif;
	font-weight: 500;/*Regular 400/ Medium 500*/
	letter-spacing:1px;
	font-size:10px;
	line-height:1.4;
	color:#181311;
  list-style-type:none; 
}

li{
	list-style-type:none;
}

img{
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0 ;
	vertical-align: bottom;
}

a{
	color:#181311;
	text-decoration: underline;
}
a:hover{
	color:#181311;
	text-decoration: none;
	opacity: 0.6;
	filter: alpha(opacity=60);
	-ms-filter: "alpha( opacity=60 )";
}

br.sp-none{
	display: none;
}
br.pc-none{
	display: block;
}

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

.material-icons {
  display: inline-flex;
  vertical-align: middle;
}


ul.banner {
  overflow: hidden;
  margin: 0 auto;
	width: 100%;
}

ul.banner li {
	width: 100%;
	margin-bottom: 1em;
}

ul.banner li .img {
  vertical-align: bottom;
	padding: 0 2.525252525252525%;
}
ul.banner li .img {
  vertical-align: bottom;
	padding: 0 2.525252525252525%;
}
ul.banner li a{
	display: block;
	line-height: 0;
	text-decoration: none
}
ul.banner li .txt{
	font-size: 140%;
	font-family: 'Noto Serif JP', serif;
	font-weight: 500;
	line-height: 1.4;
	margin-bottom: 0.3em;
}

@media screen and (min-width:781px){
  ul.banner li {
  	float: left;
		width: 50%;
	}
	ul.banner li .img img{
  	width: auto;
	}
	
	ul.banner li .txt{
    font-size: 160%;
	}
}

.notice{
	clear: both;
	width: 96%;
	margin: 0 auto;
}

.notice li{
	font-size: 110%;
	list-style: none;
	margin-bottom: 0.5em;
	text-align:left;
}
.notice li:before {
  content: "※";
}

@media screen and (min-width:781px){
  .notice li{
    font-size: 130%;
		text-align:center;
  }
}


/* #pickup
=====================================*/
#pickup {
  max-width: 990px;
	margin: 0 auto;
	padding: 4.166666666666667% 0;
}

/* .listnav
=====================================*/
.listnav{
	display: table;
	max-width: 500px;
	width: 100%;
	margin: 0 auto;
	font-size: 120%;
	padding-top: 5em;
}
.listnav li{
	display: table-cell;
	width: 50%;
}

.listnav li.prev{
	text-align: left;
}
.listnav li.next{
	text-align: right;
}


/* #download
=====================================*/
#download {
	width:100%;
	background: url("../image/bg_app-download.jpg") no-repeat 50% 50%;
	background-size:cover;
	padding: 8% 0;
	color: #FFF;
	overflow: hidden;
	margin-bottom:0 !important;
}
#download h2{
	font-size: 200%;
	font-family: 'Noto Serif JP', serif;
	font-weight: 500;
	margin-bottom: 0.5em;
	background: none !important;
	padding: 0 !important;
}
#download .inner{
	max-width: 1000px;
	margin: 0 auto;
	overflow: hidden;
	display: inline-flex;
}

#download dl{
	width: 46%;
	margin: 0 auto;
	padding: 0 2%;
	float: left;
}
#download dl dt{
	font-size: 130%;
	font-weight: 700;
	/*font-family:"游ゴシック体", "Yu Gothic";*/
	line-height: 1.4;
	margin-bottom:0.5em;
}

#download dl dd.dllink{
}

#download dl dd.dllink img{
	width: auto;
}
#download dl dd.dllink img a{
	display: inline-block;
}

#download dl dd.dlqr{
	display: none;
}

#download .qrImg{
	display: none;
}

@media screen and (min-width:781px){
  #download h2{
    font-size: 260%;
    margin-bottom: 1.5em;
  }
	#download dl{
    width: 40%;
    padding: 0 0 0 10%;
	overflow:hidden;
  }
	#download dl dt{
    font-size: 130%;
		line-height: 1.8;
		text-align: center;
		width:100%;
		float: left;
		padding-top: 2em;
  }
	#download dl dd.dlqr{
    display: block;
		width: 40%;
		float: right;
  }
  #download .qrImg{
		display: block;
		width: 136px;
		height: auto;
		margin: 0 auto;
  }
  
}

/* footer
=====================================*/
footer {
	width:100%;
	background:#000;
	padding: 2em 0;
	color: #FFF;
	overflow: hidden;
}
footer p {
  font-size: 120%;
}
footer nav {
  padding-bottom: 1.5em;
  
}

footer nav ul {
	overflow: hidden;
}
footer nav ul li {
	font-size: 120%;
	width: 50%;
	float: left;
	display: block;
	padding-bottom: 1em;
}


@media screen and (min-width:781px){
  footer nav ul::before {
    content: "|";
    padding-right: 1em;
  }

  footer nav ul li {
    display: inline;
    padding-right: 1em;
		width: auto;
		float:none;
  }

  footer nav ul li::after {
    content: "|";
    padding-left: 1em;
  }
}

footer nav ul li a {
  color: #FFF;
}

footer nav ul li a:hover {
  color: #FFF;
}

/* #hks-footer .copyright
----------------------------------------*/
#hks-footer .copyright {
  font-size: 12px;
  font-size: 1.2rem;
}


/* -------------------------------------------------------------------
　TOPページ固有　スタイル
------------------------------------------------------------------- */
/* header
=====================================*/
#page-top header{
	width:100%;
	background: url("../image/bg_main.jpg") no-repeat 50% 50%;
	background-size:cover;
}
#page-top header h1{
	width:52.5%;
	padding: 6.666666666666667% 0 18.33333333333333% 0;
	margin: 0 auto;
	line-height: 0;
}
@media screen and (min-width:781px){
  #page-top header h1{
    width:35%;
    padding: 6.666666666666667% 0 26.66666666666667% 0;
  }
}



/* #page-top #infoarea =====================================*/
#page-top #infoarea {
	background: #f1cbb7;
}

#page-top #infoarea .inner{
	width: 1000px;
	margin: 0 auto;
	padding: 3% 0;
	overflow: hidden;
}

@media screen and (max-width:1000px){
  #page-top #infoarea .inner{
		width: 96%;
	}
}

/* #news
------------------------*/
#page-top #infoarea #news{
	width: 100%;
	height: 100%;
	float: none;
	background: #FFF;
	padding: 2%;
	overflow: hidden;
	display: table;
	margin-bottom: 1em;
}

#page-top #infoarea #news h2{
	display: none;
}

#page-top #infoarea #news ul{
	width: 100%;
}
#page-top #infoarea #news ul li{
	font-size:110%;
	text-align:left;
	margin-bottom: 0.5em;
	display: table;
}
#page-top #infoarea #news ul li span{
  display: table-cell;
  padding-right: 1em;
}
#page-top #infoarea #news ul li a{
  display: table-cell;
}


@media screen and (min-width:781px){
  #page-top #infoarea #news{
		float: left;
		width: 60%;
		margin-bottom: 0;
	}
	#page-top #infoarea #news h2{
    width: 12.5%;
    height: 100%;
    display: table-cell;
    background: #000;
    color: #FFF;
    font-size:160%;
    vertical-align: middle;
  }
	#page-top #infoarea #news ul{
		width: auto;
    display: table-cell;
    padding: 0 3.125%;
    vertical-align: middle;
  }
	#page-top #infoarea #news ul li{
		font-size:130%;
  }
}

/* #shopsearch
------------------------*/
#page-top #infoarea #shopsearch{
	width: 96%;
	float: none;
	background: #f19465;
	padding: 2% ;
}

#page-top #infoarea #shopsearch h2{
	font-size: 160%;
	color: #FFF;
}


#page-top #infoarea #shopsearch select {
  margin: 0 auto;
  font-size: 160%;
  font-weight: bold;
  width: 100%;
  height: 2em;
  cursor: pointer;
	border: 1px solid #FFF;
  background-color: #FFF;
  color: #181311;
}
#page-top #infoarea #shopsearch select option{
	padding: 0.5em;
}

#page-top #infoarea #shopsearch select:focus {
  outline: none;
}

@media screen and (min-width:781px){
  #page-top #infoarea #shopsearch{
		float: right;
		width: 28%;
	}
	#page-top #infoarea #shopsearch h2{
    margin-bottom: 1em;
  }
}


/* #page-top #concept =====================================*/
#page-top #concept {
	width:100%;
	background: url("../image/bg_concept.jpg") no-repeat 50% 50%;
	background-size:cover;
	padding: 8% 0;
	color: #FFF;
}

#page-top #concept h2{
	font-size: 200%;
	font-family: 'Noto Serif JP', serif;
	font-weight: 500;
	margin-bottom: 1em;
}

#page-top #concept .txt{
	font-size: 130%;
	/*font-family:"游ゴシック体", "Yu Gothic";*/
	line-height: 1.4;
	text-align: left;
	width: 96%;
	margin: 0 auto;
}

@media screen and (min-width:781px){
  #page-top #concept h2{
    font-size: 260%;
    margin-bottom: 1.5em;
  }
	#page-top #concept .txt{
    font-size: 160%;
		line-height: 1.8;
		text-align: center;
  }
}

/* #page-top #enjoy =====================================*/
#page-top #enjoy {
  max-width: 1000px;
	margin: 5em auto;
	overflow: hidden;
}

#page-top #enjoy h2{
	font-size: 160%;
	font-family: 'Noto Serif JP', serif;
	font-weight: 500;
	margin-bottom: 2em;
	background: url("../image/bg_h2.png") no-repeat 50% 50%;
	background-size:cover;
	padding: 0.1em 0;
}

#page-top #enjoy .inner{
	position: relative;
	max-width: 96%;
	margin: 0 auto;
}

@media screen and (min-width:781px){
	#page-top #enjoy {
    margin: 8em auto;
  }
	#page-top #enjoy h2{
    font-size: 240%;
		background: url("../image/bg_h2.png") no-repeat 50% 50%;
		background-size:cover;
  }
	
	#page-top #enjoy .inner{
    max-width: 780px;
  }

}

/* .bxslider
------------------------*/
#page-top #enjoy .bxslider li{
	overflow: hidden;
}

#page-top #enjoy .bxslider li .img{
	width: 90%;
	margin:0 auto 2em auto;
}

#page-top #enjoy .bxslider li h3{
	width: 30%;
	text-align:left;
	float: left;
}
#page-top #enjoy .bxslider li h3 img{
	width: auto;
}

#page-top #enjoy .bxslider li .txt{
	width: 65%;
	text-align: left;
	font-size: 120%;
	line-height: 1.4;
	float: right;
}

#page-top #enjoy .bx-pager{
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
	padding: 2em 0;
}
#page-top #enjoy .bx-pager a{
	display:block;
	float: left;
	width: 22%;
	margin: 0 0.8%;
	vertical-align: bottom;
	border: 2px solid #FFF;
}

#page-top #enjoy .bx-pager a.active{
	border: 2px solid #f19465;
}

#page-top #enjoy #bx-prev-btn {
	position:absolute;
	top:25%;
	left: 0;
	z-index: 99;
	background: url("../image/hananohi_arrow-l.png") no-repeat 50% 50%;
	background-size:30px 55px;
}

#page-top #enjoy #bx-next-btn {
	position: absolute;
	top:25%;
	right: 0;
	z-index: 98;
	background: url("../image/hananohi_arrow-r.png") no-repeat 50% 50%;
	background-size:30px 55px;
}

#page-top #enjoy .bx-navi-btn .bx-prev,
#page-top #enjoy .bx-navi-btn .bx-next{
  display: block;
	width: 30px;
	height: 55px;
	opacity: 0;
	filter: alpha(opacity=0);
	-ms-filter: "alpha( opacity=0 )";
}
#page-top #enjoy .bx-navi-btn {
	width: 30px;
	height: 55px;
}

@media screen and (min-width:781px){
  #page-top #enjoy .bxslider li{
    max-width: 780px;
  }

  #page-top #enjoy .bxslider li .img{
    width: 64.1025641025641%;
    float: left;
		margin-bottom: 0;
  }

  #page-top #enjoy .bxslider li h3{
    width: 32.05128205128205%;
    float: right;
    padding-top: 10em;
    margin-bottom: 3em;
  }
  #page-top #enjoy .bxslider li .txt{
    width: 32.05128205128205%;
    font-size: 140%;
    line-height: 2;
  }
	
	#page-top #enjoy .bx-pager{
    width: 416px;
    padding: 4em 0;
  }
  #page-top #enjoy .bx-pager a{
    width: 80px;
    margin: 0 10px;
  }
	
	#page-top #enjoy #bx-prev-btn {
    top:50%;
    left: -110px;
  }

  #page-top #enjoy #bx-next-btn {
    top:50%;
    right: -110px;
  }
}

/* .info-twitter
------------------------*/
#page-top #enjoy .info-twitter{
	padding-top: 3em;
	
}

#page-top #enjoy .info-twitter h3{
	font-size: 160%;
	font-family: 'Noto Serif JP', serif;
	font-weight: 500;	
	margin-bottom: 0.5em;
}

#page-top #enjoy .info-twitter .hashtag{
	margin-bottom: 1.5em;
}

#page-top #enjoy .info-twitter .hashtag span{
	margin: 0 0.5em;
	padding: 0 0.3em 0.2em 0.3em;
	font-size: 120%;
	background: linear-gradient(transparent 70%, #f19465 0%);
}
#page-top #enjoy .info-twitter .hashtag a{
	text-decoration: none;
}

#page-top #enjoy .info-twitter .btn-twitter{
	background-color: #199ff2;
	padding: 1em;
	border-radius:5px;
	display: inline-block;
	font-size: 160%;
	font-weight: 700;
	
}

#page-top #enjoy .info-twitter .btn-twitter img{
	display: inline-block;
	width: 25px;
	margin-right: 1em;
}

#page-top #enjoy .info-twitter .btn-twitter a{
	text-decoration: none;
	color: #FFF
}

@media screen and (min-width:781px){
	#page-top #enjoy .info-twitter h3{
    font-size: 240%;
  }
  #page-top #enjoy .info-twitter .hashtag{
    margin-bottom: 3em;
  }

  #page-top #enjoy .info-twitter .hashtag span{
    font-size: 200%;
  }
}



/* #page-top #plan
=====================================*/
#page-top #plan {
  max-width: 1000px;
	margin: 0 auto 5em;
	overflow: hidden;
}

#page-top #plan h2{
	font-size: 200%;
	font-family: 'Noto Serif JP', serif;
	font-weight: 500;
	background: #181311;
	border-bottom: 5px solid #f19465;
	color: #FFF;
	padding: 0.3em 0;
	margin-bottom: 0;
}

#page-top #plan dl{
	padding: 0 1em;
	/* border-bottom: 1px dotted #000; */
	padding-bottom:2em;
	/* overflow: hidden; */
}

#page-top #plan dl div{
	font-weight: 500;
	font-family: 'Noto Serif JP', serif;
	font-size: 200%;
	padding-top: 24px;
	padding-bottom: 0.5rem;
}

#page-top #plan dl dd img{
	padding-bottom: 8px;
  }

#page-top #plan dl.planL {
	margin-bottom:2em;
}

#page-top #plan dl dt{
	width: 70.3125%;
	margin: 0 auto;
}

#page-top #plan dl.planM dt,
#page-top #plan dl.planL dt{
	padding:1em 0;
}

/* #page-top #plan dl dd{
	width: 46%;
	float: left;
	padding: 0 2%;
} */

#page-top #plan .notice{
	margin-bottom: 2em;
}

@media screen and (min-width:781px){
	#page-top #plan {
		margin: 0 auto 8em;
	}
	#page-top #plan h2{
		font-size: 260%;
		margin-bottom: 1.5em;
	}
  #page-top #plan dl{
    width: 40%;
	margin: 0 auto;
    /* background: url("../images/index/hananohi_plan_line.gif") 50% 100% repeat-y;
	padding: 0;
	float: left;
	border-bottom:none;
	padding-bottom:0;
	overflow: hidden; */
  }
  #page-top #plan dl.planM{
    margin: 0 2%;
  }

  #page-top #plan dl dt{
		width: 100%;
    margin-bottom: 5px;
		padding:0 !important;
  }

  #page-top #plan dl dd{
	display: flex;
    justify-content: center;
    /* margin-top: 20px;
		width: 100%;
		float: none;
		padding: 0; */
  }

  #page-top #plan dl dd img{
	padding: 4px;
  }

	#page-top #plan .notice{
    margin-bottom:0;
  }
	#page-top #plan .banner{
		/*padding: 5em;*/
    max-width: 940px;
    margin: 0 auto;
    padding: 4.166666666666667% 0 0 0;
	}
}

/* #page-top #costomer
=====================================*/
#page-top #costomer {
  max-width: 1000px;
	margin: 0 auto 5em;
	overflow: hidden;
}

#page-top #costomer h2{
	font-size: 200%;
	font-family: 'Noto Serif JP', serif;
	font-weight: 500;
	background: #181311;
	border-bottom: 5px solid #f19465;
	color: #FFF;
	padding: 0.3em 0;
	margin-bottom: 1em;
}

#page-top #costomer .graph {
  overflow: hidden;
  margin: 0 auto 5em;
	width: 96%;
}

#page-top #costomer .graph dt{
	font-size: 160%;
	font-weight: 700;
	margin-bottom: 1em;
}

#page-top #costomer .graph dd {
	width: 100%;
}
#page-top #costomer .graph dd:first-of-type {
	padding-bottom: 3em;
	margin-bottom: 3em;
	border-bottom: 1px dotted #666;
}

#page-top #costomer .graph dd .img {
  vertical-align: bottom;
	padding: 0 2.525252525252525%;
}

#page-top #costomer .voice {
	display: table;
	width: 98%;
	margin-left:2%;
}

#page-top #costomer .voice dt{
  display: table-cell;
	width: 22%;
	padding-right: 2%;
	text-align: left;
}

#page-top #costomer .voice dt img{
  width: auto;
}

#page-top #costomer .voice dd{
  display: table-cell;
	text-align: left;
	vertical-align: middle;
}

#page-top #costomer .voice dd ul li{
	font-size: 120%;
	margin-bottom: 0.3em;
	text-indent: -1em;
	padding-left: 1em;
	list-style: inside square;
}


@media screen and (min-width:781px){
	#page-top #costomer{
	margin: 0 auto 8em;
	}
	#page-top #costomer h2{
		font-size: 260%;
		margin-bottom: 1.5em;
	}
	#page-top #costomer .graph {
    width: 100%;
  }
	#page-top #costomer .graph dt{
    font-size: 200%;
    margin-bottom: 2em;
  }
	#page-top #costomer .graph dd {
  	float: left;
		width: 40%;
		padding: 0 5%;
		margin: 0;
	}
	#page-top #costomer .graph dd:first-of-type {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
  }
	#page-top #costomer .voice {
    width: 66%;
    margin-left:18%;
  }
	#page-top #costomer .voice dd{
    padding-top: 2em;
  }
	#page-top #costomer .voice dd ul li{
    font-size: 140%;
    margin-bottom: 0.8em;
  }
}

/* #page-top #guide
=====================================*/
#page-top #guide {
  max-width: 1000px;
	margin: 0 auto 5em;
	overflow: hidden;
}

#page-top #guide h2{
	font-size: 200%;
	font-family: 'Noto Serif JP', serif;
	font-weight: 500;
	background: #181311;
	border-bottom: 5px solid #f19465;
	color: #FFF;
	padding: 0.3em 0;
	margin-bottom: 1em;
}
#page-top #guide ol{
	overflow: hidden;
	display: table;
}
#page-top #guide ol li{
	display: table-cell;
	font-size: 120%;
	font-weight: 700;
}
#page-top #guide ol li img{
	margin-bottom: 0.5em;
}
#page-top #guide ol li span{
	color: #971111;
}

@media screen and (min-width:781px){
  #page-top #guide {
    margin: 0 auto 8em;
  }
	#page-top #guide h2{
		font-size: 260%;
		margin-bottom: 1.5em;
	}
	#page-top #guide ol li{
    font-size: 150%;
  }
}




@media screen and (min-width:781px){
  /*画面幅が781px以上の時*/
}




@media screen and (max-width:480px){
  /*画面幅が480pxまでの時*/
}

@media screen and (min-width:781px){
  /*画面幅が781px以上の時*/
}

@media screen and (min-width:1201px){
  /*画面幅が1201px以上の時*/
	
}


/* -------------------------------------------------------------------
　下層共通スタイル
------------------------------------------------------------------- */

/* header
=====================================*/
.underpage header{
	border-bottom:5px solid #181311;
	margin-bottom: 3em;
}

.underpage header .inner{
	
	max-width: 96%;
	margin: 0 auto;
	padding: 2em 0 1em 0;
	overflow: hidden;
}
.underpage header .logo{
	width: 80%;
	margin: 0 auto;
}
.underpage header .back-top{
	display: none;
}

@media screen and (min-width:781px){
	
  .underpage header{
    border-bottom:10px solid #181311;
    margin-bottom: 8em;
  }

  .underpage header .inner{
    max-width: 1000px;
		padding: 2em 0;
  }
  .underpage header .logo{
    width: 37.5%;
    float: left;
  }
  .underpage header .back-top{
    width: 20%;
		padding-top: 2em;
		float: right;
    font-size: 140%;
    text-align: right;
		display: block;
  }
}




/* -------------------------------------------------------------------
　個別ページスタイル：北欧暮らしの道具店 掲載コラム20200910
------------------------------------------------------------------- */
#page-hokuo20200910{
	
}
#page-hokuo20200910 #attention{
	max-width: 960px;
	margin: 0 auto 3em auto;
	padding: 0 1.666666666666667%;
}
#page-hokuo20200910 #attention li{
	text-align: left;
	font-size:120%; 
	margin-bottom: 0.5em;
}

#page-hokuo20200910 article{
	max-width: 960px;
	padding: 0 1.666666666666667%;
	margin: 0 auto;
	text-align: left;
}

#page-hokuo20200910 article h1{
	font-size:200%;
	margin-bottom: 0.5em;
}

#page-hokuo20200910 article p.writer{
	font-size:140%; 
	margin-bottom: 3em;
}

#page-hokuo20200910 section.column{
	margin-bottom: 8em;
}

#page-hokuo20200910 section.column h2{
  background: url("../image/flower.png") 0 0 no-repeat;
	background-size: 32px 32px;
  vertical-align: middle;
	font-size:180%;
	padding-left:2em;
	margin-bottom: 1.5em;
}

#page-hokuo20200910 section.column ul.img {
	margin-bottom:2em;
	overflow: hidden;
}

#page-hokuo20200910 section.column ul.img li{
	font-size:140%;
	float: left;
}
#page-hokuo20200910 section.column ul.img li img{
	margin-bottom: 1em;
}
#page-hokuo20200910 section.column ul.img li span{
	padding-bottom: 1em;
	display: block;
}
#page-hokuo20200910 section.column ul.img li:first-of-type {
	padding-left: 0 !important;
}

#page-hokuo20200910 section.column ul.img.glid1 li,
#page-hokuo20200910 section.column ul.img.glid2 li,
#page-hokuo20200910 section.column ul.img.glid3 li{
	width: 100%;
}

#page-hokuo20200910 section.column p {
	font-size:140%;
	margin-bottom: 1.5em;
	line-height: 1.8;
}

#page-hokuo20200910 section.column span.oohira {
	font-size:160%;
	line-height: 1.8;
	font-weight: 700;
}

#page-hokuo20200910 section.column p.cameraman{
	font-size: 130%;
	text-align: right;
}
#page-hokuo20200910 section.profile{
	margin-bottom:8em;
}

#page-hokuo20200910 section.profile h2 {
	font-size:240%;
	border-bottom: 2px solid #000000;
	text-align: center;
	padding-bottom: 0.5em;
	font-weight: 700;
	margin-bottom: 1em;
}

#page-hokuo20200910 section.profile .img {
	width: 50%;
	padding: 0 1.666666666666667%;
	margin: 0 auto 1em auto;
}

#page-hokuo20200910 section.profile h3 {
	font-size:140%;
	font-weight: 700;
	text-align: center;
	margin-bottom: 1em;
}

#page-hokuo20200910 section.profile p {
	font-size:130%;
	line-height: 1.6;
}


@media screen and (min-width:781px){
  #page-hokuo20200910 #attention li{
    font-size:140%; 
  }
	
  #page-hokuo20200910 article h1{
    font-size:240%;
  }
  #page-hokuo20200910 article p.writer{
    font-size:160%;
  }
	
	#page-hokuo20200910 section.column p {
    font-size:160%;
  }
	
  #page-hokuo20200910 section.column h2{
    font-size:200%;
		margin-bottom: 1em;
  }
	
  #page-hokuo20200910 section.column ul.img.glid2 li{
    width: 47.91666666666667%;
    padding-left: 4.166666666666667%;
  }

  #page-hokuo20200910 section.column ul.img.glid3 li{
    width: 32.29166666666667%;
    padding-left: 1.5625%;
  }
  #page-hokuo20200910 section.column ul.img {
    margin-bottom:3em;
  }
  #page-hokuo20200910 section.column p.cameraman{
    font-size: 110%;
  }
  #page-hokuo20200910 section.profile h2 {
    margin-bottom: 2em;
  }
  #page-hokuo20200910 section.profile h3 {
    font-size:120%;
		margin-bottom: 1.5em;
  }
  #page-hokuo20200910 section.profile .img {
    max-width: 380px;
  }
}


/* -------------------------------------------------------------------
　個別ページスタイル：店舗リスト
------------------------------------------------------------------- */
#page-shoplist{
	
}
#page-shoplist #searchresults{
	max-width: 780px;
	margin: 0 auto 3em auto;
	padding: 0 1.666666666666667%;
	text-align: left;
	margin-bottom: 10em;
	text-align: center;
}

#page-shoplist #searchresults h1{
	font-size: 200%;
	font-family: 'Noto Serif JP', serif;
	font-weight: 700;	
	margin-bottom: 1em;
	text-align: center;
}

#page-shoplist #searchresults select {
  margin: 0 auto 1em auto;
  font-size: 160%;
  font-weight: bold;
  width: 40%;
  height: 2em;
  cursor: pointer;
	border: 1px solid #000;
  background-color: #FFF;
}
#page-shoplist #searchresults select option{
	padding: 0.5em;
}

#page-shoplist #searchresults select:focus {
  outline: none;
}

#page-shoplist #searchresults .resultbox {
	clear: both;
	border-bottom: 1px solid #ccc;
	padding: 3em 0;
	display: table;
	width: 100%;
	text-align: left;
}
#page-shoplist #searchresults .resultbox:first-of-type {
	border-top: 1px solid #ccc;
}
#page-shoplist #searchresults .resultbox h2{
	font-size: 180%;
	margin-bottom: 0.5em;
}
#page-shoplist #searchresults .resultbox .shoplist{
}

#page-shoplist #searchresults .resultbox .shoplist li{
	margin-bottom: 0.8em;
	font-size: 160%;
	text-indent: -1em;
	padding-left: 1em;
}
#page-shoplist #searchresults .resultbox .shoplist li:before {
  content: "・";
}

@media screen and (min-width:781px){
	#page-shoplist #searchresults h1{
		font-size: 240%;
		margin-bottom: 2em;
    float: left;
		text-align: left;
  }
  #page-shoplist #searchresults select {
		float: right;
		margin: 0 auto;
  }
	#page-shoplist #searchresults .resultbox h2{
    display: table-cell;
    width: 30%;
		margin-bottom: 0;
  }
  #page-shoplist #searchresults .resultbox .shoplist{
    display: table-cell;
  }

}

/* -------------------------------------------------------------------
　個別ページスタイル：ニュースリスト
------------------------------------------------------------------- */
#page-newslist{
	
}
#page-newslist #news{
	max-width: 780px;
	margin: 0 auto 3em auto;
	padding: 0 1.666666666666667%;
	text-align: left;
	margin-bottom: 10em;
}

#page-newslist #news h1{
	font-size: 200%;
	font-family: 'Noto Serif JP', serif;
	font-weight: 700;	
	margin-bottom: 1em;
	text-align: center;
}

#page-newslist #news .newslist{
	width: 100%;
}
#page-newslist #news .newslist li{
	font-size: 160%;
	text-align:left;
	margin-bottom: 2em;
}
#page-newslist #news .newslist li span{
  padding-right: 1em;
	display: block;
	margin-bottom: 0.3em;
}

@media screen and (min-width:781px){
	#page-newslist #news h1{
		font-size: 240%;
		margin-bottom: 2em;
		text-align: left;
  }
	
	#page-newslist #news .newslist li{
    display: table;
  }
  #page-newslist #news .newslist li span{
    display: table-cell;
		margin-bottom: 0;
  }
  #page-newslist #news .newslist li a{
   display: table-cell;
  }

}



/* -------------------------------------------------------------------
　個別ページスタイル：お知らせ詳細ページ
------------------------------------------------------------------- */
.page-newsdetail{
	
}
.page-newsdetail #newsdetail{
	max-width: 780px;
	margin: 0 auto 3em auto;
	padding: 0 1.666666666666667%;
	text-align: left;
	margin-bottom: 10em;
}

.page-newsdetail #newsdetail h1{
	font-size: 200%;
	font-family: 'Noto Serif JP', serif;
	font-weight: 700;	
	margin-bottom: 1em;
	text-align: left;
}

.page-newsdetail #newsdetail .date{
	font-size: 120%;
}

.page-newsdetail #newsdetail .contents {
	font-size: 140%;
	line-height: 1.8;
}

.page-newsdetail #newsdetail .back-list{
	font-size: 140%;
	text-align: center;
	padding-top: 3em;
}




@media screen and (min-width:781px){
	.page-newsdetail #newsdetail h1{
		font-size: 240%;
  }
	.page-newsdetail #newsdetail .date{
    font-size: 140%;
  }
	.page-newsdetail #newsdetail .contents img{
   width: auto;
  }

	
}



/* -------------------------------------------------------------------
　個別ページスタイル：ギフト機能ページ
------------------------------------------------------------------- */
#page-giftservice{
	
}
#page-giftservice #giftservice{
	max-width: 780px;
	margin: 0 auto 3em auto;
	padding: 0 1.666666666666667%;
	text-align: left;
	margin-bottom: 10em;
}

#page-giftservice #giftservice h1{
	font-size: 200%;
	font-family: 'Noto Serif JP', serif;
	font-weight: 700;
	margin-top: 1em;	
	margin-bottom: 1em;
	text-align: center;
}

#page-giftservice #giftservice .intro{
	margin-bottom: 3em;
}

#page-giftservice #giftservice .intro p{
	font-size: 140%;
}

#page-giftservice #giftservice .pc{
	display: none;
}

#page-giftservice #giftservice h2{
	font-size: 160%;
	margin-bottom: 1em;
	background-color: #ede6cf;
	padding: 0.3em 0.5em;
	
}
#page-giftservice #giftservice h3{
	font-size: 130%;
	margin-bottom: 0.5em;
}

#page-giftservice #giftservice ol{
	padding-bottom: 3em;
}
#page-giftservice #giftservice ol li{
	font-size: 130%;
	margin-bottom: 1em;
  list-style: none;
	text-indent: -1em;
	padding-left: 1em;
}

#page-giftservice #giftservice .faqbox{
}
#page-giftservice #giftservice .faqbox h3 {
	font-size: 140%;
	text-indent: -1.5em;
	padding-left: 1.5em;
}
#page-giftservice #giftservice .faqbox span{
	padding-right: 0.5em;
	vertical-align: top;
}
#page-giftservice #giftservice .faqbox .qbox{
	margin-bottom: 3em;
}
#page-giftservice #giftservice .faqbox .qbox .txt p{
	font-size: 140%;
	display: inline-block;
	text-indent: -1.5em;
	padding-left: 1.5em;
}


@media screen and (min-width:781px){
	#page-giftservice #giftservice h1{
		font-size: 240%;
		text-align: left;
  }
	
	#page-giftservice #giftservice .intro p{
    font-size: 160%;
  }
  #page-giftservice #giftservice h2{
    font-size: 180%;

  }
  #page-giftservice #giftservice h3{
    font-size: 140%;
  }

  #page-giftservice #giftservice .sp{
  	display: none;
  }

  #page-giftservice #giftservice .pc{
  	display: block;
  }
}
/* -------------------------------------------------------------------
　個別ページスタイル：サークルページ
------------------------------------------------------------------- */
#page_circle_camp{
width:100%;
}
#page_circle_camp .pc{
	display: none;
}
#page_circle_camp .sp{
	display: block;
}
#page_circle_camp #section1{
	width:100%;
	background: url(../image/section1_bg_sp.png) no-repeat 50% 50%;
	background-size: cover;
	overflow: hidden;
	}
#page_circle_camp #section1 div{
	width: 90%;
	height: auto;
	margin: auto;
	padding: 10% 0%;
}
#page_circle_camp #section2{
	width:100%;
}
#page_circle_camp #section2 div{
	max-width:90%;
	margin: 0em auto 0em;
	position: relative;
	bottom: -50px;
	left: -5%;
	}
#page_circle_camp #section3{
	width:100%;
	background-color: #fffcee;
	}
#page_circle_camp #section3 div{
	max-width:90%;
	margin: auto;
	padding: 14em 0em 8em;
	}
#page_circle_camp #section4{
	width:100%;
	background: none;
	background-size: cover;
	overflow: hidden;
	padding: 0% 0%;
	}
	#page_circle_camp #section4 div{
	max-width:100%;
	position: relative;
	margin: auto;
	float: center;
	right: 0%;
	}
#page_circle_camp #section5{
	width:100%;
	background-color: #fffcee;
	}
#page_circle_camp #section5 div{
	max-width: 1000px;
	margin: 0em auto;
	padding: 6em 0em; 
	}
#page_circle_camp #section5 div li:nth-child(1){
	width: 90%;
	margin: 6em auto;
	}
#page_circle_camp #section5 div li:nth-child(2){
	width: 90%;
	margin: 6em auto;
	}
#page_circle_camp #section5 div li:nth-child(3){
	width: 90%;
	margin: auto;
	}
#page_circle_camp #section5 div li:nth-child(4){
	width: 90%;
	margin: auto;
	}
#page_circle_camp #section5 div li:nth-child(5){
	width: 90%;
	margin: auto;
	}
#page_circle_camp #section6{
	width:100%;
	}
#page_circle_camp #section6 div{
	max-width: 90%;
	margin: 8em auto;
	}
#page_circle_camp #section6 div li{
	margin: 4em auto;
	}
#page_circle_camp #section7{
	width:100%;
	background-color:#f9f9f9;
	}
#page_circle_camp #section7 div{
	max-width: 90%;
	margin:auto;
	padding: 6em 0em;
	}
#page_circle_camp #section7 div li:nth-child(1){
	width: 100%;
	margin: 6em auto;
	}
#page_circle_camp #section7 div li:nth-child(2){
	width: 50%;
	margin: 6em auto;
	}
#page_circle_camp #section7 div li:nth-child(3){
	width: 100%;
	margin: auto;
	}
#page_circle_camp #section8{
	width:100%;
	}
#page_circle_camp #section8 div{
	max-width: 90%;
	margin: 0em auto;
	padding: 6em 0em; 
	}
#page_circle_camp #section9{
	width:100%;
	background-color:#f9f9f9;
	}
#page_circle_camp #section9 div{
	max-width: 90%;
	margin: 0em auto;
	padding: 3em 0em; 
	}
#page_circle_camp #section9 div li{
	margin: 6em auto;
}
#page_circle_camp #section9 div p{
	font-size: 13px;
	margin : 5em auto;
	}	
@media screen and (min-width:781px){
#page_circle_camp .pc{
	display: block;
	}
#page_circle_camp .sp{
	display: none;
	}
#page_circle_camp #section1{
	background: url(../image/section1_bg.png) no-repeat 50% 50%;
	background-size: cover;
}
#page_circle_camp #section1 div{
	width:40%;
	padding: 0% 0%;
}
#page_circle_camp #section2 div{
	max-width: 1000px;
	bottom: -100px;
	left: 0%;
}
#page_circle_camp #section3 div{
	max-width:1000px;
}
#page_circle_camp #section4{
	background: url(../image/section4_bg.png) no-repeat 50% 50%;
	background-size: cover;
	padding: 5% 0%;
}
#page_circle_camp #section4 div{
	max-width:40%;
	float: right;
	right: 10%;
}
#page_circle_camp #section5{
	width:100%;
	background-color: #fffcee;
}
#page_circle_camp #section5 div{
	max-width: 1000px;
	margin: 0em auto;
	padding: 6em 0em; 
}
#page_circle_camp #section5 div li:nth-child(1){
	width: 70%;
	margin: 6em auto;
}
#page_circle_camp #section5 div li:nth-child(2){
	width: 30%;
	margin: 6em auto;
}
#page_circle_camp #section5 div li:nth-child(3){
	width: 100%;
	margin: auto;
}
#page_circle_camp #section6 div{
max-width: 1000px;
}
#page_circle_camp #section7 div{
max-width: 1000px;
}
#page_circle_camp #section7 div li:nth-child(2){
width: 30%;
}
#page_circle_camp #section7 div li:nth-child(3){
width: 30%;
}
#page_circle_camp #section8 div{
max-width: 1000px;
}
#page_circle_camp #section9 div{
max-width: 1000px;
padding: 6em 0em; 
}

}