@charset "euc-jp";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&family=Sorts+Mill+Goudy&display=swap');
/* Font Setup */
body { line-height: 1.6; -webkit-text-size-adjust: 100%; font-family: "¥á¥¤¥ê¥ª", "Hiragino Kaku Gothic Pro", Meiryo, "¥Ò¥é¥®¥Î³Ñ¥´ Pro W3", "MS PGothic", "MS UI Gothic", Helvetica, Arial, sans-serif; }

/* common */
.pc { display: block}
.sp { display: none}

@media only screen and (max-width: 600px) {
.pc { display: none}
.sp { display: block}
}


/* GOSEN healthy body
---------------------------------------------------------------------- */
/* header */
header{ max-width: 1000px; margin: 0 auto}
header h1 { font-size: 0.5rem; margin: 0.3rem 0; font-weight: normal; text-align: right; }



/* top */
#top{
    padding: 10rem 0;
    background-image: url("../img/ghb_01.webp");
    background-size: cover
}
#top img{ margin: 0 auto}
#top h2{ 
    font-family: 'Sorts Mill Goudy', serif;
    font-size: 2rem; 
    text-align: center; 
    color: #fff;
    margin-top: 2rem;
}



/* concept */
#concept{ 
	padding: 10rem 0.5rem;
	color: #333333;
	background-image: url("../img/ghb_02.webp");
	background-size: cover;
	background-position: center;
}
#concept .wrapper{
	max-width: 1000px;
	margin: 0 auto
}
#concept h2{ 
	font-family: 'Sorts Mill Goudy', serif;
	font-size: 2rem;
	margin-bottom: 2rem;
	text-align: center
}
#concept p{ 
	font-family: 'Noto Sans JP', sans-serif;
	line-height: 2;
	margin-bottom: 1.5rem;
	font-size: .9rem;
	text-align: center
}


/* styling */
#styling{
    max-width: 1000px; 
    margin: 5rem auto;
    font-family: ryo-gothic-plusn, sans-serif;
    font-weight: 300;
    font-style: normal;
}
#styling .cditem { font-size: 12px; margin:0.5rem}
#styling .cditem li{ line-height: 2}
#styling .cditem li a{ color: #333}
#styling .cditem li a:after{
    font-family: "FontAwesome";
    content: '\f08e';
    padding-left: 0.2rem
}

#styling h2{ font-family: 'Sorts Mill Goudy', serif; font-size: 2rem; text-align: center; margin-bottom: 3rem}

.swiper-button-next,
.swiper-button-prev { color: #333}
.swiper-pagination-bullet-active { background-color: #222; }
.swiper-container {
    padding-bottom: 35px;
}
#styling .btn{padding-top: 10px}
#styling .btn a{
    border: 1px solid #b0c4de;
    line-height: 37px;
    font-size: 14px;
    letter-spacing: 0.1em;
    width: 200px;
    display: block;
    text-align: center; 
    margin: auto;
    color: #b0c4de;
    text-decoration: none
}
#styling .btn a:hover{
    border: 1px solid #b0c4de;
    text-decoration: none;
    background-color: #b0c4de;
    color: #fff;
    transition: .6s
}

/* Collection */
#collection{ max-width: 1000px; margin: 0 auto; padding: 6rem 0}
#collection h2{ font-family: 'Sorts Mill Goudy', serif; font-size: 2rem; text-align: center; margin-bottom: 3rem}
#collection h1 img{ margin: 0 auto}
#collection a:hover img {filter:alpha(opacity=70); -moz-opacity:0.7; opacity:0.70; transition: .5s}



/* Contents */
#contents{ max-width: 1000px; margin: 5rem auto}
#contents h2{ font-family: 'Sorts Mill Goudy', serif; font-size: 2rem; text-align: center; margin-bottom: 3rem}
#contents ul{
    display:-webkit-box;
    display:-ms-flexbox;
  	display:flex;
    -ms-flex-wrap: wrap;
  	flex-wrap: wrap;
    -webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center
}
#contents li{ margin-bottom: 2rem; padding: 0 0.5rem}
#contents li a:hover img {filter:alpha(opacity=70); -moz-opacity:0.7; opacity:0.70; transition: .5s}


/* link */
#link{ background-color: #e3deed; padding: 5rem 0}
#link .inner{ max-width: 1000px; margin: 0 auto }
#link ul{ text-align: center}
#link li{
    border: 2px solid #a7a7c5;
    width: 70%;
    margin: 0 auto 2rem;
    font-family: 'Sorts Mill Goudy', serif;
    font-size: 1.2rem;
}
#link li a{ display: block; padding: 1rem 0; color: #69699b; transition: .6s}
#link li a:hover{ background-color: #a7a7c5; color: #fff; text-decoration: none}


/* LINE sticker */
#linesticker section{
  max-width: 800px;
  margin: 0 auto
}
#linesticker h1 img{ margin-bottom: 2rem}
#linesticker p a{
  display: block;
  width: 60%;
  margin: 0 auto;
  text-align: center;
  color: #06c755;
  border: 2px solid #06c755;
  padding: 0.5rem;
  transition: .6s
}
#linesticker p a:hover{
  background-color: #06c755;
  color: #fff;
  text-decoration: none;
}
#linesticker dl{ margin: 5rem auto}
#linesticker dt{ width: 30%; margin: 0 auto 1rem}
#linesticker dd{ padding: 0 1rem; font-size: 0.9rem; text-align: center}
#linesticker dd a{ color: #0071e4}


/* footer */
#footer_box img{ display: block; margin: 0 auto 1rem}


/* campaign */
#campaign{ max-width: 1000px; margin: 0 auto; padding: 6rem 0}
#campaign h2{ font-family: 'Sorts Mill Goudy', serif; font-size: 2rem; text-align: center; margin-bottom: 3rem}
#campaign h1 img{ margin: 0 auto}
#campaign a:hover img {filter:alpha(opacity=70); -moz-opacity:0.7; opacity:0.70; transition: .5s}


/* topics*/
#topics{ max-width: 1000px; margin: 0 auto; padding: 6rem 0}
#topics h2{ font-family: 'Sorts Mill Goudy', serif; font-size: 2rem; text-align: center; margin-bottom: 3rem}
#topics h1 img{ margin: 0 auto}
#topics a:hover img {filter:alpha(opacity=70); -moz-opacity:0.7; opacity:0.70; transition: .5s}



@media screen and (min-width:768px){
  p{ font-size: 16px}
  
  /* concept */
  #concept p{ font-size: 1rem}
  
  /* Contents */
  #contents{ padding: 0 1rem}
  #contents ul{
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  
  /* link */
  #link li{ font-size: 1.5rem}
  
  /* footer */
  #footer_att p br{ display: none}
}



@media screen and (min-width:1024px){
    #contents li{ padding: 0}
}