/*
 * grid
 * version:v1.0
 * Developer:popodesign
 * URL:https://popo-design.net
 */

/* 全体の設定
–––––––––––––––––––––––––––––––––––––––––––––––––– */
html {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-size: 62.5%;
}

body {
    color: #000;
    font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    background:#fff;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    margin:0;
	padding:0 20px;
}

/* グリッド
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
    margin: 0 auto;
    max-width: 1200px;
    padding: 0 2.0rem;
    position: relative;
}

/* 見出し
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300; }
h1 { font-size: 2rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.2rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

/* モバイル表示 */
@media (min-width: 550px) {
  h1 { font-size: 2.5rem; }
}


img,p{
	max-width:100%;
	height: auto;/*高さ自動*/
}
a {
    display:block;
    color: #666;
    text-decoration-line: none;
}
.underline {
	border-bottom: 3px solid #000;
	padding-bottom: 0.5rem;
}
.center {
	text-align: center;
}

/*ヘッダー
-------------------------------------*/
h1 { 
    padding: 2rem 0 0;
	font-weight: 700;
	letter-spacing: 3px;
	text-align: center;
	font-feature-settings:"palt";
}
p{
	border: 1px solid #b5b5b6;
	padding: 10px;
	border-radius: 10px;
	width: 950px;
	margin: 0 auto;
}

P#shop{
	padding:0;
	width: 600px;
	margin: 25px auto 20px;
	border: 2px solid #17ac55;
	border-radius: 0;
	font-weight: bold;
	text-align: center;
}

P#shop a{
	padding:20px;
	color:#009944;
	text-decoration: none;
	display: block;
	transition: all 0.3s ease;
	line-height:0;
	height: 100%;
}
P#shop a:hover{
	color:#fff;
	text-decoration: none;
	background: #17ac55;
}



.mainimg {
	text-align: center;
	margin: 30px auto 20px;
}

/* 例：br.sp_brはタブレット以上のサイズでは非表示にする */
@media screen and (min-width: 768px) {
 h1 .sp_br{
    display: none;
  }
}


@media screen and (max-width: 768px){
p{
	width: 100%;
}


/*メイン画像
-------------------------------------*/
.mainimg img {
	width: 100vw;
}

/*メインコンテンツ
-------------------------------------*/
main {
    margin: 5rem 0 5rem 0;
}



/*フッター
-------------------------------------*/
footer {
    background-color: #fff;
    padding: 3rem 0;
}
}

/*コピーライト
-------------------------------------*/
.copyright {
    text-align: center;
    padding: 1rem 0;
    background-color: #fff;
}