/* CSS Document */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 非常に推奨 */
}
a {
  text-decoration: none;
  color:#333333
}
ul {
  list-style-type: none;
}
.red {
  color:#FF0000
}

html:before {
  content: "";
  background:#8FC128;
  display: block;
  height: 5px; 


}
body {
  background-size:100% auto;
  background-repeat: no-repeat;
  background-image:url(../image/body_bg.webp);
}
.wrapper {
  width:100%;
  max-width:1300px;
  margin:auto
}
/* <header> */
header {
  display: flex;
  margin-bottom:2%
}
header div{
  width: calc(100% - 300px);
}
header h1, header h2 {
  font-weight:normal;
  margin-left:2%
}

header h1 {
  font-size:60px;
  margin-top:4%;
  color:#009933;
  font-weight:900;
}
header h2 {
  font-size:50px;
  margin-bottom:4%;
  color:#fff;
  -webkit-text-stroke: 1px #009933;/*ベンダープレフィックス*/
  text-stroke: 1px #009933;/*1px赤色縁取り*/
}
nav {
  width:300px
}
nav ul li a{
  background-color: rgba(255, 255, 255, 0.5);
  display:block;
  padding:15px 0;
  text-align:center;
  margin:1px 0
}

/* <main> */
main{
  width:90%;
  margin:auto
}
.column {
  display: flex;
}
main article figure{
  width:50%;
  text-align:center;
}
main article figure img{
  width:80%;
}

main article .product-details{
  background-color: rgba(255, 255, 255, 0.5);
  padding:2%;
  margin:2% 0;
  border-left:2px solid #FAB629;
  border-right:2px solid #FAB629;
}
main article .product-details strong{
  color:#FF0000;
  font-weight:normal
}
main article .product-details h2{
  font-size:1em;
  margin-top:5%;
}

main article .product-details div{
  margin:2% 5%
}

button.btn_01 {
        border: none;
        cursor: pointer;
		font-size:inherit
}
.btn_01 {
	display:inline-block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	margin-top:20px;
	margin-left:auto;
	padding: 0.7rem ;
	min-width:150px;
	font-weight: bold;
	background-image: linear-gradient(to right, #244593 0%, #2F7D7D 100%);
	box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
	-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
	transition: 0.5s;
	color:#FFFFFF;
	border-radius: 10px;
}
.btn_01:hover {
	background-image: linear-gradient(to left, #2F7D6B 0%, #2F7D7D 100%);
}


a.btn_order {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 200px;
	margin-top:10px;
	margin-left:auto;
	padding: 0.7rem 4rem;
	font-weight: bold;
	background-image: linear-gradient(to right, #F68537 0%, #FAB629 100%);
	border-radius: 100vh;
	color: #fff;
	box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
	-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
	transition: 0.5s;
}
a.btn_order:hover {
	color: #fff;
	background-image: linear-gradient(to left, #F68537 0%, #FAB629 100%);
}




/* <main>　＞　.contents */
.contents {
 margin-top:5%
}
.contents h2{
 position:relative;
 padding:0px 15px;
 margin-top:7%;
 font-size:25px
}
.contents h2::before{
 content:"";
 position:absolute;
 background:#DEEBF7;
 width:50px;
 height:50px;
 border-radius:50%;
 top:50%;
 left:5px;
 transform:translateY(-50%);
 z-index:-1;
}

h3{
  margin-top:3%
}
.bullet {
  width:70%
}
.bullet ul {
  padding: 0;
  position: relative;
  margin-top:3%;
}

.bullet ul li {
  color: black;
  border-left: solid 8px orange;/*左側の線*/
  background: whitesmoke;/*背景色*/
  margin-bottom: 5px;/*下のバーとの余白*/
  line-height: 1.5;
  border-radius: 0 15px 15px 0;/*右側の角だけ丸く*/
  padding: 0.5em;
}
#zenkai td{
  width:50%
}
.information{
  margin-top:4%
}
.design01 {
  position: relative;
  padding: 0.3rem 1.5rem 1.5rem 1.5rem;
  border: 1px solid #000;
  margin:0 3%;
  background-image:url(../image/bg_br.gif);
  font-size:0.8em;
  background-color: rgba(255, 255, 255, 0.5);
}
.one-third{
  width:33.3%
}
.one-half {
  width:50%
}
.information .design01:before {
  content: "";
  background:#fff;
  display: block;
  height: 5px;
  margin-top:1em

}
.information .design01:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  content: '';
  border-top: 1px solid #000;
  background-image: -webkit-repeating-linear-gradient(135deg, #000, #000 1px, transparent 1px, transparent 5px);
  background-image: repeating-linear-gradient(-45deg, #000, #000 1px, transparent 1px, transparent 5px);
  background-size: 7px 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.design01 h3{
  color:#FF9900;
  font-size:15px;
  margin-top:3%
}

#social{
  text-align:right
}
.spec_table {
	margin:3% 0
}
.spec_table th, .spec_table td {
	padding: 10px;
	font-weight: normal;
	text-align: left;
	border-top: 1px solid #646566;
}
.spec_table td span {
	font-size: 90%;
}


/* <footer> */
footer {
 background:#DFE8E8;
 padding:4%;
 font-size:0.8em
}
footer li a:hover {
 text-decoration: underline;
}
footer .wrap {
 margin: 0 auto;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
  max-width:1200px
}
footer .wrap h3 {
 margin: 0 0 10px 0;
 padding: 0;
 border-bottom: 1px #c4c4c4 solid;
}
footer .wrap p {
 margin: 0;
 padding: 0 0 20px 0;
}
footer .wrap .box {
 width: 30%;
}
footer .wrap .box ul {
 margin: 0;
 padding: 0 0 20px 0;
 list-style: none;
}
footer .wrap .box ul li{
 line-height: 250%;
}
footer .wrap .copyright {
 width: 100%;
 padding: 20px 0 0 0;
}
.catchphrase {
  padding: 1rem 3rem;
  font-size:20px;
  margin:5% 0;
  -webkit-transform: skew(-15deg);
  transform: skew(-15deg);
  color: #fff;
  background-image: -webkit-gradient(linear, left top, right top, from(#ACDC85), to(#3FA0D5));
  background-image: -webkit-linear-gradient(left, #ACDC85 0%, #3FA0D5 100%);
  background-image: linear-gradient(to right, #ACDC85 0%, #3FA0D5 100%);
}
#oshirase_area p{
  font-size:13px
}
#oshirase_area a{
  color:#0066CC
}
@media only screen and (max-width: 1150px) {
header h1 {
  font-size:4.3vw;
}
header h2 {
  font-size:3.3vw;
}
.design01 h5{
  font-size:1.5vw;
}
#zenkai {
  font-size:12px
}
@media only screen and (max-width: 820px) {
header h1 {
  font-size:3.8vw;
}

header {
  display:block;
}
header div{
  width:100%;
}
nav {
  width:100%;
}
nav ul {
  display:flex
}
nav ul li{
  width:25%;
  margin:1px
}
main article figure{
  width:100%;
}
main article figure img{
  width:50%;
}
.design01{
  margin:0
}
.design01 h3{
  font-size:14px;
}
.column {
  display:block;
}
.one-third, .one-half{
  width:100%
}
.bullet {
  width:100%
}

#zenkai img{
  font-size:2vw;
  width:90%;
  max-width:300px;
  margin:auto
}
.contents h2{
 font-size:18px;
 margin-top:10%
}
@media only screen and (max-width: 599px) {
header h1 {
  font-size:5vw;
}
main article .product-details strong{
  font-size:14px
}
footer .wrap {
 width: 100%;
 padding: 0 20px;
 box-sizing: border-box;
}
footer .wrap h3 {
 border: none;
}
footer .wrap .box {
 width: 100%;
}
footer .wrap .box ul {
 border-top: 1px #c4c4c4 solid;
}
footer .wrap .box ul li a {
 display: block;
 padding: 5px 15px;
 border-bottom: 1px #c4c4c4 solid;
}
}