@charset "utf-8";
/* トップページメイン部分
------------------------------- */
html {
    font-size: 100%;
}
body{font-family: "M PLUS 1p";
color: #4C4948;
}
body {background-color: #fff;
    min-height: 100vh;
}

a {text-decoration: none;
}
img {
    max-width: 100%;
}
/* トップページ大きい見出し部分 */
h3{
letter-spacing:0.15rem;
text-align: center;
	line-height: 1
}
.en{font-family: 'Oswald', sans-serif;
font-size: 45px;
color: #06B4EA;
}
.ja{
font-size: 15px;
color: #4C4948;
padding-top:-25px
}
hr{
    border: none;
    border-bottom: 1px solid #06B4EA;
	width: 110px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	margin-bottom: 0px
}


/* メインボタンメニュー
------------------------------- */
.grid2 {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 0%;
}
.pro-nav {	
position: relative;
transition: .3s;
display: inline-block;
width: 100%;
height: auto;
text-align: center;
overflow: hidden;
cursor: pointer;
}
.pro-nav {background-color: #B4E2F1}
.pro-nav p {
text-align: left;
font-family: "M PLUS 1p";
position: absolute;}

.txt01 /*上部小見出し*/{
color: #fff;
width: 100%;
font-weight:normal;
position: absolute;
background-color: #4C4948;
}

.txt02 /*上部大見出し位置*/{
position: absolute;
box-sizing: border-box;
transition-duration: 0.3s;
font-weight: 700;
width: 100%;
}
.txt02 p /*上部大見出し横並び*/{
display: flex;
align-items: center;
color: #000;
font-weight:700;
text-align: left;
}
.txt02 img/*上部大見出しアイコン*/{
height: auto;
}
.pro-nav img/*商品画像*/ {
height: auto;
display: inline-block;
cursor: pointer;
transition-duration: 0.5s;
}
.pro-nav img:hover{
transform: scale(1.1);
transition-duration: 0.5s;
}

/* ########### 514px以下 ########### */
@media screen and (max-width: 514px) {
.grid2 {
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin-top: 0%;
}
.txt01 /*上部小見出し*/{
font-size: 16px;
top: 0px;
left: 0px;
padding: 6px 0px 6px 0px;}

.txt02 /*上部大見出し位置*/{
top: 25px;
left: 0px;
padding: 15px 0px 0px 10px;
}
.txt02 p /*上部大見出し横並び*/{
font-size: 26px;
letter-spacing:0.01rem;
line-height: 1.0
}
.txt02 img/*上部大見出しアイコン*/{
width: 50px;
margin-right: 3px
}
.pro-nav img/*商品画像*/ {
max-width: 90%;
padding-top: 0px;
padding-bottom: 10px
}

.txt03 /*説明*/{
height: 150px;
background-color: #00B0EC;
text-align: center;
position: relative;
}
.txt03 p{
color: #fff;
text-align:justify;
width: 90%;
font-size: 17px;
line-height: 1.5;
position: absolute;
top: 14px;
right: 0;
bottom: 0;
left: 0;
margin: auto;
letter-spacing: 0.1rem
}
}
/* ########### 515pxから833pxまで ########### */
@media screen and (min-width: 515px) and (max-width: 833px) {
.grid2 {
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-top: 0%;
}
.txt01 /*上部小見出し*/{
font-size: 16px;
top: 0px;
left: 0px;
padding: 6px 0px 6px 0px;}

.txt02 /*上部大見出し位置*/{
top: 14px;
left: 0px;
padding: 15px 0px 0px 10px;
}
.txt02 p /*上部大見出し横並び*/{
font-size: 17px;
letter-spacing: -0.01rem;
line-height: 1.0
}
.txt02 img/*上部大見出しアイコン*/{
width: 36px;
margin-right: 3px
}
.pro-nav img/*商品画像*/ {
max-width: 92%;
padding-top: 12px;
padding-bottom: 10px
}
	
.txt03 /*説明*/{
height: 165px;
background-color: #00B0EC;
text-align: center;
position: relative;
}
.txt03 p{
color: #fff;
text-align:justify;
width: 90%;
font-size: 16px;
line-height: 1.5;
position: absolute;
top: 14px;
right: 0;
bottom: 0;
left: 0;
margin: auto;
letter-spacing: 0.0rem
}
}

/* ########### 834pxから1199pxまで ########### */
@media screen and (min-width: 834px) and (max-width: 1199px) {
.grid2 {
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 0%;
}
.txt01 /*上部小見出し*/{
font-size: 16px;
top: 0px;
left: 0px;
padding: 6px 0px 6px 0px;}

.txt02 /*上部大見出し位置*/{
top: 23px;
left: 0px;
padding: 15px 0px 0px 10px;
}
.txt02 p /*上部大見出し横並び*/{
font-size: 20px;
letter-spacing: 0.0rem;
line-height: 1.0;

}
.txt02 img/*上部大見出しアイコン*/{
width: 46px;
margin-right: 5px;

}
.pro-nav img/*商品画像*/ {
max-width: 92%;
padding-bottom: 10px
}
	
.txt03 /*説明*/{
height: 165px;
background-color: #00B0EC;
text-align: center;
position: relative;
}
.txt03 p{
color: #fff;
text-align:justify;
width: 90%;
font-size: 18px;
line-height: 1.5;
position: absolute;
top: 14px;
right: 0;
bottom: 0;
left: 0;
margin: auto;
letter-spacing: 0.10rem
}
}
/* ########### 1200px 以上 ########### */
@media screen and (min-width:1200px) {
/* メインボタンメニュー
------------------------------- */
.grid2 {display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 0%;
}
.txt01 /*上部小見出し*/{
font-size: 16px;
top: 0px;
left: 0px;
padding: 6px 0px 6px 0px;}

.txt02 /*上部大見出し位置*/{
top: 23px;
left: 0px;
padding: 15px 0px 0px 10px;
}
.txt02 p /*上部大見出し横並び*/{
font-size: 25px;
letter-spacing: 0.0rem;
line-height: 1.0
}
.txt02 img/*上部大見出しアイコン*/{
width: 52px;
margin-right: 5px;
}
.pro-nav img/*商品画像*/ {
max-width: 92%;
padding-bottom: 10px
}
	
.txt03 /*説明*/{
height: 165px;
background-color: #00B0EC;
text-align: center;
position: relative;
}
.txt03 p{
color: #fff;
text-align:justify;
width: 90%;
font-size: 18px;
line-height: 1.5;
position: absolute;
top: 14px;
right: 0;
bottom: 0;
left: 0;
margin: auto;
letter-spacing: 0.15rem;
	
}
}

/* メインエリア幅設定 */
.sub-contents{
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 100px;
	}
/* ########### 833px以下 ########### */
@media screen and (max-width: 833px) {
	
.sub-contents{max-width: 95%;}
.grid img{width: 20px;
	height: auto;
	margin-right: 3px;
	margin-bottom: 2px
	}
}
/* ########### 834pxから1199pxまで ########### */
@media screen and (min-width: 834px) and (max-width: 1199px) {
	
.sub-contents{max-width: 90%;}
.grid img{width: 20px;
	height: auto;
	margin-right: 3px;
	margin-bottom: 2px
	}
}
/* ########### 1200px 以上 ########### */
@media screen and (min-width:1200px) {
	
.sub-contents{max-width: 1100px;}

.grid img{width: 20px;
	height: auto;
	margin-right: 3px;
	margin-bottom: 2px
	}
}