@charset "utf-8";
/* トップページメイン部分
------------------------------- */

/* アニメーションスタートの遅延時間を決めるCSS*/

.fadeInUpTrigger,
.fadeInDownTrigger{
	opacity: 0;
}

html {
    font-size: 100%;
}
body{
font-family: "M PLUS 1p";
color: #4C4948;
}
body {background: linear-gradient(#00BFFF, #FFFFBF, #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
}


/* メインボタンメニュー
------------------------------- */
.grid {
  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;
line-height: 1.0
}
.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) {
.grid {
  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: 22px;
left: 0px;
padding: 15px 0px 0px 10px;
}
.txt02 p /*上部大見出し横並び*/{
font-size: 25px;
letter-spacing:0.01rem;
}
.txt02 img/*上部大見出しアイコン*/{
width: 50px;
margin-right: 3px
}
.pro-nav img/*商品画像*/ {
max-width: 90%;
padding-top: 0px;
padding-bottom: 10px
}	
}
/* ########### 515pxから833pxまで ########### */
@media screen and (min-width: 515px) and (max-width: 833px) {
.grid {
  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;
}
.txt02 img/*上部大見出しアイコン*/{
width: 36px;
margin-right: 3px
}
.pro-nav img/*商品画像*/ {
max-width: 92%;
padding-top: 12px;
padding-bottom: 10px
}	
}

/* ########### 834pxから1199pxまで ########### */
@media screen and (min-width: 834px) and (max-width: 1199px) {
.grid {
  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;
}
.txt02 img/*上部大見出しアイコン*/{
width: 46px;
margin-right: 5px
}
.pro-nav img/*商品画像*/ {
max-width: 92%;
padding-bottom: 10px
}
}
/* ########### 1200px 以上 ########### */
@media screen and (min-width:1200px) {
/* メインボタンメニュー
------------------------------- */
.grid {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;
}
.txt02 img/*上部大見出しアイコン*/{
width: 52px;
margin-right: 5px
}
.pro-nav img/*商品画像*/ {
max-width: 92%;
padding-bottom: 10px
}
}

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