.osaifuyasan{
  margin: 0 auto ;
}

body{
  background-size:contain ;
  margin:0;
  width: 100% ;
  font-size: 9px ;
  font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}

header{
  text-align:center ;
  margin:30px ;
}

header h1{
  margin:0 ;
}

/* header h2{
  margin-bottom: 30px;
  color: rgb(235, 112, 132);
} */

/* 変更分 */
h2{
  color: rgb(59, 58, 58);
  font-weight: normal;
  font-size:1.2em;
  letter-spacing: 0.1em
}

.yougo h2{
  margin-bottom: 30px;
}

h2 .under{
  font-weight:bold;
  background: linear-gradient(transparent 50%, yellow 50%);
}

h2 .under2{
  font-weight:bold;
}

/* 変更分ここまで */

header img{
  width:100% ;
  max-width: 1200px;
}

header .osaifuyasan img{
  width:100% ;
  max-width:600px ;
}

.container{
  margin: 0 20px ;
  text-align:center ;
}


.container section img{
  width:100% ;  
  max-width: 1200px;
  margin-bottom:15px;
  border: solid 1px#afafb0 ;
}

.container section{
  margin-top:80px ;
  margin-bottom:10px ;
}

.container section ul{
  display:flex ;
  flex-flow: row wrap ;
  justify-content:space-between ;
  list-style-type:none ;
  padding:10px ;
  margin: 0 ;
}

.container section li{
  width:48% ;
  max-width: 600px;
  margin:0 ;
}

.container section a > img{
  margin:0;
}

.info{
  margin:5px 0 15px ;
  padding:10px ;
  /* background:gray ; */
  border: solid 1px#afafb0 ;
}

.info p{
  margin:0;
  line-height:1.8em;
}

.brand{
  font-weight:bold;
  color:#778899;
  /* letter-spacing: 0.1em; */
}

.item{
  color:#696969;
  /* letter-spacing: 0.1em; */
}

.price{
  color:#dc143c;
  font-weight:bold;  
  /* letter-spacing: 0.1em; */
}


.container section a{
  text-decoration: none;
  color:white;
}

.container section a:hover{
  opacity: 0.8;
}


.main_footer{
  text-align:center ;
  margin: 50px 0 ;
}

.main_footer ul{
  display:flex ;
  flex-flow: row nowrap ;
  justify-content:space-between ;
  list-style-type:none ;
  padding:10px ;
  margin: 0 ;
}

.main_footer li{
  width:48% ;
  max-width: 600px;
  margin:0 ;
}

.btn1{
  display       : inline-block;
  border-radius : 50%;
  /* font-size     : 18pt; */
  font-weight :bold ;
  line-height: 3;
  text-align    : center;
  cursor        : pointer;
  padding       : 40px 40px;
  background    : #9adaf8;
  color         : #ffffff;
  transition    : .3s;
  /* border        : 2px solid #000066; */
  text-decoration:none ;
}

.btn2{
  display       : inline-block;
  border-radius : 50%;
  /* font-size     : 18pt; */
  font-weight :bold ;
  line-height: 3;
  text-align    : center;
  cursor        : pointer;
  padding       : 40px 40px;
  background    : #f7a1e8;
  color         : #ffffff;
  transition    : .3s;
  /* border        : 2px solid #40ddf1; */
  text-decoration:none ;
}

.btn1:hover {
  box-shadow    : none;
  color         : #9adaf8;
  background    : #ffffff;
}
.btn2:hover {
  box-shadow    : none;
  color    : #f7a1e8;
  background    : #ffffff;
}

.c_icon {
  display: none;
}

/*追加分*/
.yougo{
  border: 2px solid gray;
  width: 80%;
  margin: 50px auto;
  padding: 30px;
}

.yougo h3{
  padding: 7px 14px;
  text-align:left;
  letter-spacing: 0.1em;
}

.yougo p{
  text-align:left;
  letter-spacing: 0.1em;
  margin-bottom: 50px;
}

.matome{
  border: 2px dotted rgb(233, 112, 112);
  width: 60%;
  margin: 30px auto;
  padding: 15px;
}


.matome p{
  border: 2px dotted gray;
  padding: 8px;
  display:inline-block;
}

.matome a{
  text-decoration: none;

}

.matome a:hover{
  font-weight: bold;
}

.yougo h2{
  margin-bottom: 50px;
  text-align: center;
}

.matome .tora{
  color:#ff6600;
}

.matome .ichiryu{
  color:#ff0000;
}

.matome .tensha{
  color:#ff66cc;
}

.matome .minohi{
  color:#cc9966;
}

.matome .tuchinoto{
  color:#ffcc00;
}

.uchikeshi{
  text-decoration: line-through;
}

.yougo .ichiryu{
  border-left: 4px solid #ff0000;
  border-bottom: 3px dotted #ff0000;
}

.yougo .tensha{
  border-left: 4px solid #ff66cc;
  border-bottom: 3px dotted #ff66cc;
}

.yougo .tora{
  border-left: 4px solid #ff6600;
  border-bottom: 3px dotted #ff6600;
}

.yougo .minohi{
  border-left: 4px solid #cc9966;
  border-bottom: 3px dotted #cc9966;
}

.yougo .tuchinoto{
  border-left: 4px solid #ffcc00;
  border-bottom: 3px dotted #ffcc00;
}

.yougo .hujyou{
  border-left: 4px solid #660099;
  border-bottom: 3px dotted #660099;
}

.yougo .kaisetsu{
  padding: 1rem 2rem;
  border: 3px dashed #000;
  font-weight: bold;
  text-align: center;
}

.yougo .under{
  font-weight: bold;
  background: linear-gradient(transparent 50%, rgb(251, 224, 150) 50%);
}

/*==================================================
スライダーのためのcss
===================================*/
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
  width:94%;
   margin:0 auto;
}

.slider img {
   width:100%;/*スライダー内の画像を横幅100%に*/
   height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
   margin:0 10px;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
   position: absolute;/*絶対配置にする*/
   top: 42%;
   cursor: pointer;/*マウスカーソルを指マークに*/
   outline: none;/*クリックをしたら出てくる枠線を消す*/
   border-top: 2px solid #666;/*矢印の色*/
   border-right: 2px solid #666;/*矢印の色*/
   height: 15px;
   width: 15px;
}

.slick-prev {/*戻る矢印の位置と形状*/
   left: -1.5%;
   transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
   right: -1.5%;
   transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
   text-align:center;
 margin:20px 0 0 0;
}

.slick-dots li {
   display:inline-block;
 margin:0 5px;
}


.slick-dots button {
  color: transparent;
  outline: none !important;
  width:25px;
  height:2px;
  display:block;
  background:#ccc;
  border:none;
}



.slick-dots .slick-active button{
   background:rgb(70, 70, 70);/*ドットボタンの現在地表示の色*/
}

header ul{
  margin:0;
  padding: 0;
  list-style: none;
}

header a{
  color: #333;
}

header a:hover,
header a:active{
  text-decoration: none;
}


/*追加分ここまで*/

/* ナビメニューここから */
@media screen and (max-width: 900px) {

  header {
    z-index:0;
  }

.main_nav {
  position: fixed;
  top: 0;
  right: 0;
  text-align: center;
  width: 100%;
  transform: translateY(-100%);
  transition: all 0.8sv;
  z-index: 2000;
}

.main_nav ul{
  display: flex;
  width: 100%;
  margin: 0 10px;
  padding: 0;
  flex-flow: row wrap ;
}



.main_nav li{
  list-style-type: none;
  padding: 0;
  /* width: 100%; */
  /* border-bottom: 1px solid #333; */
}

/* .main_nav .group a{
  list-style-type: none;
  width: 100%;
  padding:5px;
  margin-right:5px;  
  margin-bottom:5px;
  border-bottom: 1px solid #333;
} */

.main_nav ul li a{
  display: block ;
  background: #9adaf8;
  color:white;
  font-weight: bold;
  padding:5px;
  margin-right:5px;  
  margin-bottom:5px;
  /* border: solid 1px#a6a6a7 ; */
  list-style-type: none;
  text-decoration: none;
  /* width: 100%; */
}

#lavender{
  background: #cc7eb1;
  border: solid 1px#cc7eb1 ;
}

#yellow{
  background: #ffd900;
  border: solid 1px#ffd900 ;
}

#cream{
  background: #f4dda5;
  border: solid 1px#f4dda5 ;
}
#gold{
  background: #e6b422;
  border: solid 1px#e6b422 ;
}
#wine{
  background: #cc3366;
  border: solid 1px#cc3366 ;
}
#bright{
  background: #ffb400;
  border: solid 1px#ffb400 ;
}
#blue{
  background: #0095d9;
  border: solid 1px#0095d9 ;
}
#orange{
  background: #ee7800 ;
  border: solid 1px#ee7800 ;
}
#brown{
  background: #8a3b00;
  border: solid 1px#8a3b00 ;
}
#white{
  background: white;
  color: black;
  border: solid 1px#a6a6a7 ;
}
#black{
  background: black;
  border: solid 1pxblack ;
}
#pink{
  background: #f09199;
  border: solid 1px#f09199 ;
}
#green{
  background: #3eb370;
  border: solid 1px#3eb370 ;
}
#red{
  background: #e60033;
  border: solid 1p #e60033 ;
}

.main_nav li{
  padding-right:5px ;
}


.active {
  transform: translateY(0%);
}

.c_icon {
  display: block;
}

.icon {
  display: block;
  position: fixed;
  right: 10px;
  cursor: pointer;
  z-index: 9999;
}

.icon.active{
    /* top: 10px; */
    top: -100px;
}

.icon {
  top:110px;
  color: #f19191;
  letter-spacing: 0.02rem;
  font-weight: 600;
}

.icon i {
  font-size: 22px;
}


.icon_close {
  display: block;
  position: fixed;
  top:-100px;
  right: 10px;
  cursor: pointer;
  z-index: 9999;
  visibility: visible;
  color: #f19191;
}

.icon_close i {
  font-size:22px;
}

.active .icon_close {
  top:100px;
}

}

/* ナビメニューここまで */

@media (min-width: 900px){

  body{
    font-size: 14px ;
  }

  header img{
    width:100% ;
    max-width: 900px;
  }

  header h2{
    margin-bottom: 100px;
  }

  .container{
    width: 100% ;
    max-width: 900px;
    margin: 0 auto ;
  }

  .container section img{
    width:100% ;  
    max-width: 1200px;
    margin-bottom:30px;
    border: solid 1px#afafb0 ;
  }

  .container section li{
    width:32% ;
    max-width: 600px;
    margin:0 ;
  }


  .info{
    margin:10px 0 30px ;
    padding:20px ;
    /* background:gray ; */
    border:solid 1px rgb(131, 130, 130);
  }

  .brand{
    letter-spacing: 0.1em;
  }
  
  .item{
    letter-spacing: 0.1em;
  }
  
  .price{
    letter-spacing: 0.1em;
  }



/* ナビメニューここから */




.main_nav{
  transform:none;
  position: sticky;
  top: 0px;
  z-index:2 ;
  /* background-color: rgba(3, 3, 3, 0.5); */
  font-size: 10px ;
  width:100% ;
}


.main_nav ul{
  display: flex ;
  flex-wrap: wrap ;
  list-style-type: none ;
  justify-content: center ;
  margin: 0 ;
}



.main_nav ul li a{
  display: block ;
  /* background: #9adaf8; */
  color:white;
  font-weight: bold;
  padding:5px;
  margin-right:5px;  
  margin-bottom:5px;
  /* border: solid 1px#9adaf8 ; */
}

#lavender{
  background: #cc7eb1;
  border: solid 1px#cc7eb1 ;
}

#yellow{
  background: #ffd900;
  border: solid 1px#ffd900 ;
}

#cream{
  background: #f4dda5;
  border: solid 1px#f4dda5 ;
}
#gold{
  background: #e6b422;
  border: solid 1px#e6b422 ;
}
#wine{
  background: #cc3366;
  border: solid 1px#cc3366 ;
}
#bright{
  background: #ffb400;
  border: solid 1px#ffb400 ;
}
#blue{
  background: #0095d9;
  border: solid 1px#0095d9 ;
}
#orange{
  background: #ee7800 ;
  border: solid 1px#ee7800 ;
}
#brown{
  background: #8a3b00;
  border: solid 1px#8a3b00 ;
}
#white{
  background: white;
  color: black;
  border: solid 1px#a6a6a7 ;
}
#black{
  background: black;
  border: solid 1pxblack ;
}
#pink{
  background: #f09199;
  border: solid 1px#f09199 ;
}
#green{
  background: #3eb370;
  border: solid 1px#3eb370 ;
}
#red{
  background: #e60033;
  border: solid 1p #e60033 ;
}

.main_nav li{
  display: inline ;
  flex-wrap: wrap ;
  list-style-type: none ;
  margin: 0 ;
}


.main_nav a{
  text-decoration:none ;
}


.main_nav #top{
  width:80px ;
  color: white ;
  font-weight: bold;
  border: solid 1px white ;
  padding:5px;
  margin-right:5px;  
  background: black;
  margin-bottom:5px;
}

}

/* .icon {
  visibility:hidden;
} */

/* .icon {
  top:80px;
} */

/* ナビメニューここまで */

@media (min-width: 1200px){

  header img{
    width:100% ;
    max-width: 1100px;
  }
  .container{
    width: 100% ;
    max-width: 1100px;
    margin: 0 auto ;
  }

  .container section li{
    width:32% ;
    max-width: 600px;
    margin:0 ;
  }

  .main_footer{
    width: 1200px ;
    margin: 50px auto ;
  }

  .footer {
    width: 95%;
    display: block;
  }
  .footer img {
    margin-bottom: 20px;
  }

  .footer-nav {
    display: block;
    margin-top: 20px;
  }
  .footer-nav li {
    margin-right: 0;
    margin-bottom: 16px;
  }
}

/* -----------------------------------------------------------------
   footer
----------------------------------------------------------------- */

.footer-bg {
  background: #efefef;
}

footer {
  margin: 0;
  background: #efefef;
  padding: 15px;
  color: #a0a0a0;
  text-align: center;
}
  footer a {
    color: #a0a0a0; 
  }

.footer-sns-area {
  display: flex;
  justify-content: center;
  min-width: 20%;
  margin: 20px 0;
}
.footer-sns-area li{
  padding: 0 20px;
  width: 20px;
  list-style:none;
}


.copyright {
  display: block;
  font-size: 0.5rem;
  color: #a0a0a0;
  font-family: Verdana, Geneva, "sans-serif",'Noto Sans Japanese'; }

.clearfix {
  display: block;
  background: #efefef;
}
.clearfix::before {
  content: "";
  display: block;
  clear: both;
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}