@charset "utf-8";

html { scroll-behavior: smooth;}/*スムーズスクロール*/

/* ======================================================
               top images
====================================================== */
#main_images{
 position: relative;
 margin-top: 60px;
 width:100vw;
 height:40vh;
 background-image: url("../images/product/0-0.top.jpg");
 background-position: center center;
 background-repeat: no-repeat;
 background-size: cover;
}

#main_title div{
 width: 40vw;
 text-align: center;
	position:absolute;
	left:10vw;
	top:35%;
 z-index:10;
}

.title_main{
 width: auto;
	text-shadow:1px 1px 3px #fff;
	color:#000;
	font-family:serif;
	font-weight:bold;
	letter-spacing:0.3em;
	font-size: 7.5vw;
 margin: 0 auto 5px;
	border-bottom:solid 2px #fff;
 display: inline-block !important;/*menubtn.cssにてスマホ画面でタイトルを非表示にしているため、表示させてます*/
}

.title_sub{
 width: 100%;
 text-shadow:1px 1px 3px #fff;
	color:#000;
	font-family:serif;
	font-size:5vw;	
	letter-spacing:0.1em;
	font-weight:bold;
 display: inline-block !important;/*menubtn.cssにてスマホ画面でタイトルを非表示にしているため、表示させてます*/
}

/* ======================================================
               main
====================================================== */
#main{
 font-size:4.2vw;
	margin:0 auto;
	width:100vw;
 box-sizing: border-box;/*paddingやborderをwidthに含める*/
	overflow:hidden;
}

/* nav アンカーリンク */
#main_menu span{
 display: none;
}

#main_menu ul{
	list-style:none;
 text-align: center;
	margin: 40px auto 50px;
}

#main_menu ul li{
	display:inline-block;
	padding:0 2.5vw 0 3.5vw;
 margin: 5px 0;
	border-left:solid 1px #4b5c76;
}

#main_menu ul li:first-child{
	border:none;
}
#main_menu ul li.sm{
	border:none;
}

#main_menu ul li a{
	text-decoration:none;
	color:#4b5c76;
 font-size:5.3vw;
}
#main_menu ul li a:hover{
	opacity:0.5;
	border-bottom:solid 1px #fff;
}

/*内容*/
#content{
	width:100vw;
 max-width: 960px;
	margin:0 auto;
	height:auto;
}

.items{
 padding-top: 80px;
 margin-bottom: 70px;/* 150px - 80px（padding分） */
}
.h2-box{
 margin-bottom: 40px;
 text-align: center;
}
.title_h2 {
	padding:0 8vw 10px;
	margin:0 auto 15px;
	color:#4b5c76;
	font-size:9.5vw;
	text-align:center;
	font-family:serif;
	font-weight:bold;
	border-bottom:solid 2px #4b5c76;
 display: inline-block;
}
.h2_sub{
	color:#4b5c76;
	font-size:6vw;
	text-align:center;
	font-family:serif;
	font-weight:bold;
}

.caption{
 background-color: #EEF2F9;
 padding: 30px 5vw;
 margin: 0 3vw 60px;
}

#madprotein .caption img{
 width: 70%;
 max-width: 450px;
 margin: 20px 15% 40px;
}
#saijirushi .caption img{
 width: 70%;
 max-width: 450px;
 margin: 0 15% 40px;
}
#basspa .caption img{
 width: 50%;
 max-width: 450px;
 margin: 0 25% 25px;
}

.text{
 font-size:3.8vw;
}

.item{
 padding: 0 3vw;
 margin-bottom: 70px;
}

h3{
 padding: 3vw;
 margin: 0;
 color:#4b5c76;
 font-size:6vw;
 background-color: #EEF2F9;
}

.item img{
 width: 70%;
 margin: 30px 15%;
}
.item ul{
 list-style: none;
}
.item li a{
 width: 100%;
 border: #4B5C76 1px solid;
 border-radius: 8px;
 padding: 12px;
 margin: 15px 0 0;
 color: #4B5C76;
 font-size: 5vw;
 font-weight: bold;
 text-align: center;
 display: inline-block;
 text-decoration:none;
 box-sizing: border-box;/*paddingやborderをwidthに含める*/
 opacity: 1;
 transition: opacity 0.3s ease; /* ボタンがゆっくり変化 */
}
.item li a img{
 width: 25vw;
 max-width: 360px;
 height: auto;
 margin: 0;
}
.item li a:hover{
 opacity: 0.5;
}

#main_last{
	margin:150px 0 70px 0;
	text-align:center;
	font-family:serif;
	font-weight:bold;
	font-size:20px;
}

/* ======================================================
               レスポンシブ
====================================================== */
@media screen and (min-width: 768px) {
 
 #main_images{
  height:400px;
  text-align: center;
 }
 
 #main_title{
 width: 100%;
 max-width: 960px;
 margin: 0 auto;
 position: relative;
 }
 
 #main_title div{
 width: 400px;
 position: absolute;
	left:10px;
	top:120px;
}
 .title_main{
	font-size:70px;
}
.title_sub{
	font-size:30px;
}
 
#main{
  font-size:16px;
 }
 
 /*アンカーリンク*/
#main_menu span{
 display: inline;
}
#main_menu ul{
	margin: 40px auto 100px;
}

#main_menu ul li{
	padding:0 10px 0 15px;
 margin: 7px 0;
}
#main_menu ul li.sm{
	border-left:solid 1px #4b5c76;
}
#main_menu ul li.pc{
	border-left:none;
}
 #main_menu ul li.sm span{
  display: inline;
 }

#main_menu ul li a{
 font-size:20px;
}

/*内容*/
.h2-box{
 margin-bottom: 40px;
}
.title_h2 {
	padding:0 30px 10px;
	margin:0 auto 15px;
	font-size:36px;
}
.h2_sub{
	font-size:24px;
}

.caption{
 padding: 3% 3.5% 3% 4%;
 margin: 0 2% 60px;
 display: flex;
 align-items: center;
 gap: 4.5%;
}

#ogarmade .caption img{
 width: 19%;
 max-width: 155px;
 margin: 0;
}

#saijirushi .caption img{
 width: 19%;
 max-width: 155px;
 margin: 0;
}
#basspa .caption img{
 width: 19%;
 max-width: 155px;
 margin: 0;
}

.text{
 font-size: clamp(12px, 1.65vw, 16px);
}

.item{
 padding: 0 2%;
 margin-bottom: 70px;
 font-size: clamp(12px, 1.57vw, 16px);
}

h3{
 padding: 10px;
 margin-bottom: 60px;
 font-size: 22px;
}

.item div{
 width: 100%;
 display:flex;
 gap: 3%;
}

.item div div{
 margin: 0 1.5% 0 0;
 display: block;
 display: flex;
  flex-direction: column; /* 上から下に積む */
  justify-content: space-between; /* 上と下に分ける */  
}

.item img{
 width: 45%;
 max-width: 240px;
 /*max-height: 180px;*/
 margin: 0 0 0 1.5%;
}
.item ul{
 margin: 0;
 margin-top: auto;
 display: flex;
 gap:2%;
}
 .item li{
  width: 100%;
 }
.item li a{
 padding: 12px 5%;
 font-size: 1em;
}
.item li a img{
 width: 45.5%;
 max-width: 80px;
 margin: 0 auto;
}
/*ボタン1つだけ*/
.item .btn-only1{
 flex: 0 0 49%;
}

#main_last{
	margin:150px 0 70px 0;
	text-align:center;
	font-family:serif;
	font-weight:bold;
	font-size:20px;
}

@media screen and (min-width: 1024px){
 
}}