<link href="/css/usr/handicraft/event/common/reset.css" rel="stylesheet" type="text/css">
<link href="https://www.okadaya.co.jp/css/usr/handicraft/event/common/common.css" rel="stylesheet" type="text/css">
<style>
/*.h1{
    margin-bottom:0px;
    padding: 0px;
}*/
@media screen and (min-width:780px) {
.pc_none img{
	display: none;
	}
}
</style>








<style>


/*メイク用CSS*/





@media screen and (max-width: 767px) {
.wrap_make_all_sp{ 
  overflow:hidden;   /*左右に動くのを防ぐ。*/
}
}








.body_make_all{
  width:100%; /*ページ全体の幅は100%と指定する*/	
  text-align:center; /*ページ全体を中央揃えにする*/
}
#wrap_make_all{ 
  width: 960px;	   /*全体の幅を指定する*/  
  margin: 0 auto;    /*マージンの指定をする、ブラウザ対策*/
  text-align:left;   /*全体を左揃えにする。*/
  overflow:hidden;   /*左右に動くのを防ぐ。*/
}
#wrap_make_all .left{
  width:300px;
  float:left;
}
#wrap_make_all .right{
  width:660px;
  float:right;
}


.body_make_all_2{
  width:100%; /*ページ全体の幅は100%と指定する*/	
  text-align:center; /*ページ全体を中央揃えにする*/
}
@media screen and (max-width: 767px) {
#wrap_make_all_2{ 
  width: 960px;	   /*全体の幅を指定する*/  
  margin: 0 auto;    /*マージンの指定をする、ブラウザ対策*/
  text-align:left;   /*全体を左揃えにする。*/
  overflow:hidden;   /*左右に動くのを防ぐ。*/
}
#wrap_make_all_2 .left{
  width:300px;
  float:left;
}
#wrap_make_all_2 .right{
  width:660px;
  float:right;
}
}







/*背景グラデーション*/


.body_make_gradation_pink {
  margin: -10px;
  border: 1px solid white;
  background: linear-gradient(-10deg, #ffd9df, #ffffff) fixed;
  background-size: cover;
}

.body_make_gradation_beige {
  margin: -10px;
  border: 1px solid white;
  background: linear-gradient(10deg, #ffdab9, #ffffff) fixed;
  background-size: cover;
}


.body_make_gradation_cream {
  margin: -10px;
  border: 1px solid white;
  background: linear-gradient(10deg, #fff2cf, #ffffff) fixed;
  background-size: cover;
}


.body_make_gradation_ao {
  margin: -10px;
  border: 1px solid white;
  background: linear-gradient(10deg, #d1f0ff, #ffffff) fixed;
  background-size: cover;
}


.body_make_gradation_lightblue {
  margin: -10px;
  border: 1px solid white;
  background: linear-gradient(10deg, #cdf7f0, #ffffff) fixed;
  background-size: cover;
}




/*背景べた塗りPC*/
.body_make_pink {
  margin: -10px;
  border: 1px solid white;
  background: #ffe0e5;
  background-size: cover;
}

.body_make_beige {
  margin: -10px;
  border: 1px solid white;
  background: #ffe4cc;
  background-size: cover;
}


.body_make_cream {
  margin: -10px;
  border: 1px solid white;
  background: #fff5db;
  background-size: cover;
}


.body_make_ao {
  margin: -10px;
  border: 1px solid white;
  background: #d1f0ff;
  background-size: cover;
}


.body_make_lightblue {
  margin: -10px;
  border: 1px solid white;
  background: #cdf7f0;
  background-size: cover;
}


.body_make_purple {
  margin: -10px;
  border: 1px solid white;
  background: #fefcff;
  background-size: cover;
}




/*背景べた塗りSP*/

@media screen and (max-width: 767px) {
.body_make_pink {
  margin: -10px;
  border: 1px solid white;
  background: #ffe0e5;
  background-size: cover;
}

.body_make_beige {
  margin: -10px;
  border: 1px solid white;
  background: #ffe4cc;
  background-size: cover;
}


.body_make_cream {
  margin: -10px;
  border: 1px solid white;
  background: #fff5db;
  background-size: cover;
}


.body_make_ao {
  margin: -10px;
  border: 1px solid white;
  background: #d1f0ff;
  background-size: cover;
}


.body_make_lightblue {
  margin: -10px;
  border: 1px solid white;
  background: #cdf7f0;
  background-size: cover;
}


.body_make_purple {
  margin: -10px;
  border: 1px solid white;
  background: #fefcff;
  background-size: cover;
}
}




img{
  image-rendering: -webkit-optimize-contrast;
  height: auto;
  object-fit: contain;
}






/*スライダーPC*/


/* force image size */


.slide_make img {
  width: inherit;
  height: inherit;
  margin: 0;
  padding: 0;
  border: none;
}

.slide_make {
  white-space: nowrap;
  width: 760px;
  height: 470px;
  overflow: hidden;
}

.slide_make > :first-child {
  animation-name: slide;     /* 作成したキーフレームを使う */
  animation-duration: 13s;   /* アニメーション全体を●秒にする */
  animation-delay: 3s;      /* ●秒後にアニメーション開始する */
  animation-iteration-count: infinite;
}

@keyframes slide {
  0% { margin-left: 0; }
  25% { margin-left: -100%; }
  50% { margin-left: -200%; }
  75% { margin-left: -300%; }
  100% { margin-left: -400%; }
}
}

.center {
  margin: auto;
}
}





/*ボックス*/










.box_brand {
    position: relative;
    z-index: 0;
    padding: 30px 10px 30px 10px; /* 内側の余白 上・右・下・左 */
    margin: 3% 1%; /* 外側の余白 上下・左右 */
}

.box_brand .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #f8bc50;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box_brand p {
    margin: 0; 
    padding: 0;
    line-height: 1.5em;
    margin: 0; 
    padding: 1em;
  font-size: 14px;
  font-family: 'YuGothic','Yu Gothic',sans-serif;
  text-align: center;

}


@media screen and (max-width: 767px) {
.box_brand {
    position: relative;
    z-index: 0;
    padding: 20px 0px 20px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 0%; /* 外側の余白 上下・左右 */
}
}




.box_pa0 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 2% 2%; /* 外側の余白 上下・左右 */
}

.box_pa0 .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #f8bc50;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box_pa0 p {
    margin: 0; 
    padding: 0;
    line-height: 1.5em;
    margin: 0; 
    padding: 1em;
  font-size: 14px;
  font-family: 'YuGothic','Yu Gothic',sans-serif;
  text-align: center;

}


@media screen and (max-width: 767px) {
.box_pa0 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 2px 2%; /* 外側の余白 上下・左右 */
}
}






.box_center0 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 5%; /* 外側の余白 上下・左右 */
}
.box_center0  p {
    margin: 0; 
    padding: 0;
}
@media screen and (max-width: 767px) {
.box_center0 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 0%; /* 外側の余白 上下・左右 */
}
.box_center0  p {
    margin: 0; 
    padding: 0;
}
}





.box_center_5_0 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 5%; /* 外側の余白 上下・左右 */
}
.box_center_5_0  p {
    margin: 0; 
    padding: 0;
}
@media screen and (max-width: 767px) {
.box_center_5_0 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 0%; /* 外側の余白 上下・左右 */
}
.box_center_5_0  p {
    margin: 0; 
    padding: 0;
}
}



.box_center_8_0 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 8%; /* 外側の余白 上下・左右 */
}
.box_center_8_0  p {
    margin: 0; 
    padding: 0;
}
@media screen and (max-width: 767px) {
.box_center_8_0 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 0%; /* 外側の余白 上下・左右 */
}
.box_center_8_0  p {
    margin: 0; 
    padding: 0;
}
}




.box_center_10_0 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 10%; /* 外側の余白 上下・左右 */
}
.box_center_10_0  p {
    margin: 0; 
    padding: 0;
}
@media screen and (max-width: 767px) {
.box_center_10_0 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 0%; /* 外側の余白 上下・左右 */
}
.box_center_10_0  p {
    margin: 0; 
    padding: 0;
}
}




.box_center_10_2 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 10%; /* 外側の余白 上下・左右 */
}
.box_center_10_2  p {
    margin: 0; 
    padding: 0;
}
@media screen and (max-width: 767px) {
.box_center_10_2 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 2%; /* 外側の余白 上下・左右 */
}
.box_center_10_2  p {
    margin: 0; 
    padding: 0;
}
}



.box_center_13_0 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 13%; /* 外側の余白 上下・左右 */
}
.box_center_13_0  p {
    margin: 0; 
    padding: 0;
}
@media screen and (max-width: 767px) {
.box_center_13_0 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 0%; /* 外側の余白 上下・左右 */
}
.box_center_13_0  p {
    margin: 0; 
    padding: 0;
}
}




.box_center_15_0 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 15%; /* 外側の余白 上下・左右 */
}
.box_center_15_0  p {
    margin: 0; 
    padding: 0;
}
@media screen and (max-width: 767px) {
.box_center_15_0 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 0%; /* 外側の余白 上下・左右 */
}
.box_center_15_0  p {
    margin: 0; 
    padding: 0;
}
}




.box_center_15_2 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 15%; /* 外側の余白 上下・左右 */
}
.box_center_15_2  p {
    margin: 0; 
    padding: 0;
}
@media screen and (max-width: 767px) {
.box_center_15_2 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 2%; /* 外側の余白 上下・左右 */
}
.box_center_15_2  p {
    margin: 0; 
    padding: 0;
}
}





.box_center_12_2 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 12%; /* 外側の余白 上下・左右 */
}
.box_center_12_2  p {
    margin: 0; 
    padding: 0;
}
@media screen and (max-width: 767px) {
.box_center_12_2 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 2%; /* 外側の余白 上下・左右 */
}
.box_center_12_2  p {
    margin: 0; 
    padding: 0;
}
}




.box_center_12_7 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 12%; /* 外側の余白 上下・左右 */
}
.box_center_12_7  p {
    margin: 0; 
    padding: 0;
}
@media screen and (max-width: 767px) {
.box_center_12_7 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 7%; /* 外側の余白 上下・左右 */
}
.box_center_12_7  p {
    margin: 0; 
    padding: 0;
}
}





.box_center_20_0 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 20%; /* 外側の余白 上下・左右 */
}
.box_center_20_0  p {
    margin: 0; 
    padding: 0;
}
@media screen and (max-width: 767px) {
.box_center_20_0 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 0%; /* 外側の余白 上下・左右 */
}
.box_center_20_0  p {
    margin: 0; 
    padding: 0;
}
}

.box_center_27_7 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 27%; /* 外側の余白 上下・左右 */
}
.box_center_27_7  p {
    margin: 0; 
    padding: 0;
}
@media screen and (max-width: 767px) {
.box_center_27_7 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 7%; /* 外側の余白 上下・左右 */
}
.box_center_27_7  p {
    margin: 0; 
    padding: 0;
}
}


.box_center_20_10_8_0 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 15%; /* 外側の余白 上下・左右 */
}
.box_center_20_10_8_0  p {
    margin: 0; 
    padding: 0;
}


@media screen and (max-width: 1605px) {
.box_center_20_10_8_0 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 10%; /* 外側の余白 上下・左右 */
}
.box_center_20_10_8_0  p {
    margin: 0; 
    padding: 0;
}
}



@media screen and (max-width: 1280px) {
.box_center_20_10_8_0 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 8%; /* 外側の余白 上下・左右 */
}
.box_center_20_10_8_0  p {
    margin: 0; 
    padding: 0;
}
}


@media screen and (max-width: 767px) {
.box_center_20_10_8_0 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 0%; /* 外側の余白 上下・左右 */
}
.box_center_20_10_8_0  p {
    margin: 0; 
    padding: 0;
}
}







.box_center_25_0 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 25%; /* 外側の余白 上下・左右 */
}
.box_center_25_0  p {
    margin: 0; 
    padding: 0;
}
@media screen and (max-width: 767px) {
.box_center_25_0 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 0%; /* 外側の余白 上下・左右 */
}
.box_center_25_0  p {
    margin: 0; 
    padding: 0;
}
}



.box_center_25_4 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 25%; /* 外側の余白 上下・左右 */
}
.box_center_25_4  p {
    margin: 0; 
    padding: 0;
}
@media screen and (max-width: 767px) {
.box_center_25_4 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 4%; /* 外側の余白 上下・左右 */
}
.box_center_25_4  p {
    margin: 0; 
    padding: 0;
}
}



.box_center_25_7 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 25%; /* 外側の余白 上下・左右 */
}
.box_center_25_7  p {
    margin: 0; 
    padding: 0;
}
@media screen and (max-width: 767px) {
.box_center_25_7 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 7%; /* 外側の余白 上下・左右 */
}
.box_center_25_7  p {
    margin: 0; 
    padding: 0;
}
}






.box_center_28_0 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 25%; /* 外側の余白 上下・左右 */
}
.box_center_28_0  p {
    margin: 0; 
    padding: 0;
}
@media screen and (max-width: 767px) {
.box_center_28_0 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 0%; /* 外側の余白 上下・左右 */
}
.box_center_28_0  p {
    margin: 0; 
    padding: 0;
}
}




.box_center_30_0 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 30%; /* 外側の余白 上下・左右 */
}
.box_center_30_0  p {
    margin: 0; 
    padding: 0;
}
@media screen and (max-width: 767px) {
.box_center_30_0 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 0%; /* 外側の余白 上下・左右 */
}
.box_center_30_0  p {
    margin: 0; 
    padding: 0;
}
}



.box_center_35_30_4 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 35%; /* 外側の余白 上下・左右 */
}
.box_center_35_30_4  p {
    margin: 0; 
    padding: 0;
}
@media screen and (max-width: 1600px) {
.box_center_35_30_4 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 30%; /* 外側の余白 上下・左右 */
}
.box_center_35_30_4  p {
    margin: 0; 
    padding: 0;
}
}
@media screen and (max-width: 767px) {
.box_center_35_30_4 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 4%; /* 外側の余白 上下・左右 */
}
.box_center_35_30_4  p {
    margin: 0; 
    padding: 0;
}
}




.box_center_35_30_10 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 35%; /* 外側の余白 上下・左右 */
}
.box_center_35_30_10  p {
    margin: 0; 
    padding: 0;
}
@media screen and (max-width: 1600px) {
.box_center_35_30_10 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 30%; /* 外側の余白 上下・左右 */
}
.box_center_35_30_10  p {
    margin: 0; 
    padding: 0;
}
}
@media screen and (max-width: 767px) {
.box_center_35_30_10 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 10%; /* 外側の余白 上下・左右 */
}
.box_center_35_30_10  p {
    margin: 0; 
    padding: 0;
}
}




.box_center_0_4 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 0%; /* 外側の余白 上下・左右 */
}
.box_center_0_4  p {
    margin: 0; 
    padding: 0;
}
@media screen and (max-width: 767px) {
.box_center_0_4 {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 4%; /* 外側の余白 上下・左右 */
}
.box_center_0_4  p {
    margin: 0; 
    padding: 0;
}
}




.box_center_basemake {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 30%; /* 外側の余白 上下・左右 */
}
.box_center_basemake  p {
    margin: 0; 
    padding: 0;
}
@media screen and (max-width: 767px) {
.box_center_basemake {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 0%; /* 外側の余白 上下・左右 */
}
.box_center_basemake  p {
    margin: 0; 
    padding: 0;
}
}



.box_center_onayami {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 30%; /* 外側の余白 上下・左右 */
}
.box_center_onayami  p {
    margin: 0; 
    padding: 0;
}
@media screen and (max-width: 767px) {
.box_center_onayami {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 10%; /* 外側の余白 上下・左右 */
}
.box_center_onayami  p {
    margin: 0; 
    padding: 0;
}
}


.box_center_yokonaga {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0% 30%; /* 外側の余白 上下・左右 */
}
.box_center_yokonaga  p {
    margin: 0; 
    padding: 0;
}
@media screen and (max-width: 767px) {
.box_center_yokonaga {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 0%; /* 外側の余白 上下・左右 */
}
.box_center_yokonaga  p {
    padding: 0% 0%; /* 内側の余白 上・右・下・左 */
    margin: 0% 0%; /* 外側の余白 上下・左右 */
}
}





.box_tensen_pink {
    padding: 0.2em 0.5em;
    margin: 2em 0;
    color: #565656;
    background: #ffeaea;
    box-shadow: 0px 0px 0px 10px #ffeaea;
    border: dashed 2px #ffc3c3;
    border-radius: 8px;
}
.box_tensen_pink p {
    margin: 0; 
    padding: 0;
}






/*ベージュのボックスポイント*/

.box_point_beige {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    background: #ffffff;
    border: solid 3px #e6b27e;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);/*影*/
}
.box_point_beige_title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #e6b27e;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box_point_beige p {
    margin: 0; 
    padding: 0;
}





/*オレンジのボックスポイント*/

.box_point_orange {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    background: #ffffff;
    border: solid 3px #fccb79;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);/*影*/
}
.box_point_orange_title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #fccb79;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box_point_orange p {
    margin: 0; 
    padding: 0;
}



/*オレンジのボックスポイント（背景薄オレンジ）*/

.box_point_lightorange {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    background: #fff5e3;
    border: solid 3px #fccb79;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);/*影*/
}
.box_point_lightorange_title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #fccb79;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box_point_lightorange p {
    margin: 0; 
    padding: 0;
}




/*ピンクのボックスポイント*/

.box_point_pink {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    background: #ffffff;
    border: solid 3px #ffb6c1;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);/*影*/
}
.box_point_pink_title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #ffb6c1;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box_point_pink p {
    margin: 0; 
    padding: 0;
}





/*ピンクのボックスポイント(背景薄ピンク)*/

.box_point_lightpink {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    background: #fff0f8;
    border: solid 3px #ffb6c1;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);/*影*/
}
.box_point_lightpink_title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #ffb6c1;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box_point_lightpink p {
    margin: 0; 
    padding: 0;
}






/*紫のボックスポイント(背景薄紫)*/

.box_point_purple {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    background: #fef5ff;
    border: solid 3px #eec1f5;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);/*影*/
}
.box_point_purple_title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #eec1f5;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box_point_purple p {
    margin: 0; 
    padding: 0;
}






/*黄色のボックスポイント(背景薄黄色)*/

.box_point_yellow {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    background: #fff7e3;
    border: solid 3px #fadb87;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);/*影*/
}
.box_point_yellow_title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #fadb87;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box_point_yellow p {
    margin: 0; 
    padding: 0;
}






/*緑のボックスポイント(背景薄緑)*/

.box_point_green {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    background: #ebfff0;
    border: solid 3px #8ad49c;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);/*影*/
}
.box_point_green_title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #8ad49c;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box_point_green p {
    margin: 0; 
    padding: 0;
}






/*水色のボックスポイント*/

.box_point_mizuiro {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    background: #ffffff;
    border: solid 3px #94d4ff;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);/*影*/
}
.box_point_mizuiro_title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #94d4ff;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box_point_mizuiro p {
    margin: 0; 
    padding: 0;
}





/*グレーのボックスポイント*/

.box_point_bluegray {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    background: #ffffff;
    border: solid 3px #9fc1c4;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);/*影*/
}
.box_point_bluegray_title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #9fc1c4;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box_point_bluegray p {
    margin: 0; 
    padding: 0;
}





/*ボックス右寄せ・左寄せ*/

.box_pcmigiyose {
    position: relative;
    z-index: 0;
    padding: 0% 0%; /* 内側の余白 上・右・下・左 */
        margin-left: 10%;
}

.box_pcmigiyose .box-title {
    position: absolute;
    display: inline-block;
    font-size: 17px;
    background: #f8bc50;
    color: #ffffff;
    font-weight: bold;
}
.box_pcmigiyose p {
  font-size: 14px;
  font-family: 'YuGothic','Yu Gothic',sans-serif;
  text-align: center;
}

@media screen and (max-width: 767px) {
.box_pcmigiyose {
    position: relative;
    z-index: 0;
    padding: 0% 0%; /* 内側の余白 上・右・下・左 */
    margin: 0% 0%; /* 外側の余白 上下・左右 */
}
}



.box_pchidariyose {
    position: relative;
    z-index: 0;
    padding: 0% 0%; /* 内側の余白 上・右・下・左 */
        margin-right: 10%;
}

.box_pchidariyose .box-title {
    position: absolute;
    display: inline-block;
    font-size: 17px;
    background: #f8bc50;
    color: #ffffff;
    font-weight: bold;
}
.box_pchidariyose p {
  font-size: 14px;
  font-family: 'YuGothic','Yu Gothic',sans-serif;
  text-align: center;
}

@media screen and (max-width: 767px) {
.box_pchidariyose {
    position: relative;
    z-index: 0;
    padding: 0% 0%; /* 内側の余白 上・右・下・左 */
    margin: 0% 0%; /* 外側の余白 上下・左右 */
}
}











.box_category{
    color: #5d627b;
    background: white;
    border-left: solid 5px #5d627b;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 1% 1%; /* 外側の余白 上下・左右 */
}

@media screen and (max-width: 767px) {
.box_category{
    color: #5d627b;
    background: white;
    border-left: solid 5px #5d627b;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 3% 0%; /* 外側の余白 上下・左右 */
}
}


.box_ranking {
    position: relative;
    z-index: 0;
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 0px; /* 外側の余白 上下・左右 */
　background-color: #ffffff;
}
.box_ranking  p {
    padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
    margin: 0px 0px; /* 外側の余白 上下・左右 */
}


/*スマホだけ以下のcssを無効にする*/
@media screen and (max-width: 767px){
. {display:none}
}





/*ベージュの方眼背景*/


.box_beige_hougan {
  /* 方眼紙模様に必須のスタイル */
  margin: -10px;
  background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f5e7d5 calc(100% - 1px)),
                    linear-gradient(90deg, transparent calc(100% - 1px), #f5e7d5 calc(100% - 1px));
  background-size: 16px 16px;
  background-repeat: repeat;
  background-position: center center;
  background-color: #fff6eb;
  border: 1px solid #cfb595;

  /* 以下任意のスタイル */
  padding: 20px;
}






/*グレーの方眼背景*/


.box_gray_hougan {
  /* 方眼紙模様に必須のスタイル */
  margin: -10px;
  background-image: linear-gradient(0deg, transparent calc(100% - 1px), #e4f1f2 calc(100% - 1px)),
                    linear-gradient(90deg, transparent calc(100% - 1px), #e4f1f2 calc(100% - 1px));
  background-size: 16px 16px;
  background-repeat: repeat;
  background-position: center center;
  background-color: #f2f7f7;
  border: 1px solid #9e9e9e;

  /* 以下任意のスタイル */
  padding: 20px;
}





/*水色の方眼背景*/


.box_mizuiro_hougan {
  /* 方眼紙模様に必須のスタイル */
  margin: -10px;
  background-image: linear-gradient(0deg, transparent calc(100% - 1px), #def6ff calc(100% - 1px)),
                    linear-gradient(90deg, transparent calc(100% - 1px), #def6ff calc(100% - 1px));
  background-size: 16px 16px;
  background-repeat: repeat;
  background-position: center center;
  background-color: #f1fbff;
  border: 1px solid #6fcaff;

  /* 以下任意のスタイル */
  padding: 20px;
}





/*ピンクの方眼背景*/


.box_pink_hougan {
  /* 方眼紙模様に必須のスタイル */
  margin: -10px;
  background-image: linear-gradient(0deg, transparent calc(100% - 1px), #ffebf6 calc(100% - 1px)),
                    linear-gradient(90deg, transparent calc(100% - 1px), #ffebf6 calc(100% - 1px));
  background-size: 16px 16px;
  background-repeat: repeat;
  background-position: center center;
  background-color: #fffafb;
  border: 1px solid #ff6fb2;

  /* 以下任意のスタイル */
  padding: 20px;
}





/*黄色の方眼背景*/


.box_kiiro_hougan {
  /* 方眼紙模様に必須のスタイル */
  margin: -10px;
  background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f5f0cb calc(100% - 1px)),
                    linear-gradient(90deg, transparent calc(100% - 1px), #f5f0cb calc(100% - 1px));
  background-size: 16px 16px;
  background-repeat: repeat;
  background-position: center center;
  background-color: #fffcf1;
  border: 1px solid #ffd345;

  /* 以下任意のスタイル */
  padding: 20px;
}





/*紫の方眼背景*/


.box_purple_hougan {
  /* 方眼紙模様に必須のスタイル */
  margin: -10px;
  background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f6edff calc(100% - 1px)),
                    linear-gradient(90deg, transparent calc(100% - 1px), #f6edff calc(100% - 1px));
  background-size: 16px 16px;
  background-repeat: repeat;
  background-position: center center;
  background-color: #fefcff;
  border: 1px solid #c1a7d9;

  /* 以下任意のスタイル */
  /*padding: 20px;*/
}





/*ピンクの円ボタン 2行　文字濃いピンク*/



a.btn--pink--circle {
  position: relative;
  display: inline-block;
  background-color: #ffb6c1;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
  margin: 3% 1%; /* 外側の余白 上下・左右 */
  -webkit-box-shadow: 0 5px 0 #d46e6e;
  box-shadow: 0 5px 0 #d46e6e;
}

a.btn--pink--circle:hover {
  background: #de6678;
  -webkit-transform: translate(0, 3px);
  transform: translate(0, 3px);
  -webkit-box-shadow: 0 2px 0 #d46e6e;
  box-shadow: 0 2px 0 #d46e6e;
}

a.btn--pink--circle span {
  color: #d46e6e;
  font-size: 16px;
  font-weight: 700;
  font-family: YuGothic,'Yu Gothic',sans-serif;
  position: absolute;
  display: inline-block;
  left: 0%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width :100px;
  text-align:center;
}

a.btn--pink--circle span:hover {
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  font-family: YuGothic,'Yu Gothic',sans-serif;
  position: absolute;
  display: inline-block;
  left: 0%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width :100px;
  text-align:center;
}







/*ピンクの円ボタン 2行　文字グレー*/

a.btn--graypink--circle {
  position: relative;
  display: inline-block;
  background-color: #ffb6c1;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
  margin: 3% 1%; /* 外側の余白 上下・左右 */
  -webkit-box-shadow: 0 5px 0 #d46e6e;
  box-shadow: 0 5px 0 #d46e6e;
}

a.btn--graypink--circle:hover {
  background: #de6678;
  -webkit-transform: translate(0, 3px);
  transform: translate(0, 3px);
  -webkit-box-shadow: 0 2px 0 #d46e6e;
  box-shadow: 0 2px 0 #d46e6e;
}

a.btn--graypink--circle span {
  color: #575757;
  font-size: 16px;
  font-weight: 700;
  font-family: YuGothic,'Yu Gothic',sans-serif;
  position: absolute;
  display: inline-block;
  left: 0%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width :100px;
  text-align:center;
}

a.btn--graypink--circle span:hover {
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  font-family: YuGothic,'Yu Gothic',sans-serif;
  position: absolute;
  display: inline-block;
  left: 0%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width :100px;
  text-align:center;
}



/*水色の円ボタン 2行*/

a.btn--mizuiro--circle {
  position: relative;
  display: inline-block;
  background-color: #94d4ff;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
  margin: 3% 1%; /* 外側の余白 上下・左右 */
  -webkit-box-shadow: 0 5px 0 #6698ba;
  box-shadow: 0 5px 0 #6698ba;
}

a.btn--mizuiro--circle:hover {
  background: #7fbbe3;
  -webkit-transform: translate(0, 3px);
  transform: translate(0, 3px);
  -webkit-box-shadow: 0 2px 0 #6698ba;
  box-shadow: 0 2px 0 #6698ba;
}

a.btn--mizuiro--circle span {
  color: #575757;
  font-size: 16px;
  font-weight: 700;
  font-family: YuGothic,'Yu Gothic',sans-serif;
  position: absolute;
  display: inline-block;
  left: 0%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width :100px;
  text-align:center;
}

a.btn--mizuiro--circle span:hover {
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  font-family: YuGothic,'Yu Gothic',sans-serif;
  position: absolute;
  display: inline-block;
  left: 0%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width :100px;
  text-align:center;
}





/*ベージュの円ボタン 2行 文字ブラウン*/

a.btn--beige--circle {
  position: relative;
  display: inline-block;
  background-color: #e6b27e;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
  margin: 3% 1%; /* 外側の余白 上下・左右 */
  -webkit-box-shadow: 0 5px 0 #8a5a45;
  box-shadow: 0 5px 0 #8a5a45;
}

a.btn--beige--circle:hover {
  background: #c78f77;
  -webkit-transform: translate(0, 3px);
  transform: translate(0, 3px);
  -webkit-box-shadow: 0 2px 0 #8a5a45;
  box-shadow: 0 2px 0 #8a5a45;
}

a.btn--beige--circle span {
  color: #8a5a45;
  font-size: 16px;
  font-weight: 700;
  font-family: YuGothic,'Yu Gothic',sans-serif;
  position: absolute;
  display: inline-block;
  left: 0%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width :100px;
  text-align:center;
}

a.btn--beige--circle span:hover {
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  font-family: YuGothic,'Yu Gothic',sans-serif;
  position: absolute;
  display: inline-block;
  left: 0%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width :100px;
  text-align:center;
}



/*ベージュの円ボタン 2行 文字グレー*/

a.btn--graybeige--circle {
  position: relative;
  display: inline-block;
  background-color: #e6b27e;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
  margin: 3% 1%; /* 外側の余白 上下・左右 */
  -webkit-box-shadow: 0 5px 0 #8a5a45;
  box-shadow: 0 5px 0 #8a5a45;
}

a.btn--graybeige--circle:hover {
  background: #c78f77;
  -webkit-transform: translate(0, 3px);
  transform: translate(0, 3px);
  -webkit-box-shadow: 0 2px 0 #8a5a45;
  box-shadow: 0 2px 0 #8a5a45;
}

a.btn--graybeige--circle span {
  color: #575757;
  font-size: 16px;
  font-weight: 700;
  font-family: YuGothic,'Yu Gothic',sans-serif;
  position: absolute;
  display: inline-block;
  left: 0%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width :100px;
  text-align:center;
}

a.btn--graybeige--circle span:hover {
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  font-family: YuGothic,'Yu Gothic',sans-serif;
  position: absolute;
  display: inline-block;
  left: 0%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width :100px;
  text-align:center;
}



/*紫の円ボタン 2行*/

a.btn--purple--circle {
  position: relative;
  display: inline-block;
  background-color: #eec1f5;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
  margin: 3% 1%; /* 外側の余白 上下・左右 */
  -webkit-box-shadow: 0 5px 0 #937699;
  box-shadow: 0 5px 0 #937699;
}

a.btn--purple--circle:hover {
  background: #bf97c7;
  -webkit-transform: translate(0, 3px);
  transform: translate(0, 3px);
  -webkit-box-shadow: 0 2px 0 #937699;
  box-shadow: 0 2px 0 #937699;
}

a.btn--purple--circle span {
  color: #575757;
  font-size: 16px;
  font-weight: 700;
  font-family: YuGothic,'Yu Gothic',sans-serif;
  position: absolute;
  display: inline-block;
  left: 0%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width :100px;
  text-align:center;
}

a.btn--purple--circle span:hover {
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  font-family: YuGothic,'Yu Gothic',sans-serif;
  position: absolute;
  display: inline-block;
  left: 0%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width :100px;
  text-align:center;
}




/*オレンジの円ボタン 2行*/

a.btn--orange--circle {
  position: relative;
  display: inline-block;
  background-color: #ffcb47;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
  margin: 3% 1%; /* 外側の余白 上下・左右 */
  -webkit-box-shadow: 0 5px 0 #a3822e;
  box-shadow: 0 5px 0 #a3822e;
}

a.btn--orange--circle:hover {
  background: #ffb469;
  -webkit-transform: translate(0, 3px);
  transform: translate(0, 3px);
  -webkit-box-shadow: 0 2px 0 #a3822e;
  box-shadow: 0 2px 0 #a3822e;
}

a.btn--orange--circle span {
  color: #575757;
  font-size: 16px;
  font-weight: 700;
  font-family: YuGothic,'Yu Gothic',sans-serif;
  position: absolute;
  display: inline-block;
  left: 0%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width :100px;
  text-align:center;
}

a.btn--orange--circle span:hover {
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  font-family: YuGothic,'Yu Gothic',sans-serif;
  position: absolute;
  display: inline-block;
  left: 0%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width :100px;
  text-align:center;
}




/*黄色の円ボタン 2行*/

a.btn--yellow--circle {
  position: relative;
  display: inline-block;
  background-color: #fadb87;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
  margin: 3% 1%; /* 外側の余白 上下・左右 */
  -webkit-box-shadow: 0 5px 0 #9c9949;
  box-shadow: 0 5px 0 #9c9949;
}

a.btn--yellow--circle:hover {
  background: #c9c66f;
  -webkit-transform: translate(0, 3px);
  transform: translate(0, 3px);
  -webkit-box-shadow: 0 2px 0 #9c9949;
  box-shadow: 0 2px 0 #9c9949;
}

a.btn--yellow--circle span {
  color: #575757;
  font-size: 16px;
  font-weight: 700;
  font-family: YuGothic,'Yu Gothic',sans-serif;
  position: absolute;
  display: inline-block;
  left: 0%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width :100px;
  text-align:center;
}

a.btn--yellow--circle span:hover {
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  font-family: YuGothic,'Yu Gothic',sans-serif;
  position: absolute;
  display: inline-block;
  left: 0%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width :100px;
  text-align:center;
}




/*青グレーの円ボタン 2行*/

a.btn--aogray--circle {
  position: relative;
  display: inline-block;
  background-color: #9fc1c4;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  padding: 0px 0px 0px 0px; /* 内側の余白 上・右・下・左 */
  margin: 3% 1%; /* 外側の余白 上下・左右 */
  -webkit-box-shadow: 0 5px 0 #698082;
  box-shadow: 0 5px 0 #698082;
}

a.btn--aogray--circle:hover {
  background: #8cabad;
  -webkit-transform: translate(0, 3px);
  transform: translate(0, 3px);
  -webkit-box-shadow: 0 2px 0 #698082;
  box-shadow: 0 2px 0 #698082;
}

a.btn--aogray--circle span {
  color: #575757;
  font-size: 16px;
  font-weight: 700;
  font-family: YuGothic,'Yu Gothic',sans-serif;
  position: absolute;
  display: inline-block;
  left: 0%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width :100px;
  text-align:center;
}

a.btn--aogray--circle span:hover {
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  font-family: YuGothic,'Yu Gothic',sans-serif;
  position: absolute;
  display: inline-block;
  left: 0%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width :100px;
  text-align:center;
}







/*ピンクの商品購入ボタン*/

a.btn--pink.btn--cubic {
  color: #000000;
  background-color: #ffb6c1;
  border-bottom: 3px solid #d46e6e;
}

a.btn--pink.btn--cubic:hover {
  color: #ffffff;
  background: #de6678;
  -webkit-transform: translate(0, 3px);
  transform: translate(0, 3px);
  -webkit-box-shadow: 0 2px 0 #bd5564;
  box-shadow: 0 2px 0 #bd5564;
}

a.btn--radius {
  border-radius: 100vh;
}

.fa-position-right {
  position: absolute;
  top: calc(50% - .5em);
  right: 1rem;
}



/*ベージュの商品購入ボタン*/

a.btn--beige.btn--cubic {
  color: #000000;
  background-color: #e6b27e;
  border-bottom: 3px solid #8a5a45;
}

a.btn--beige.btn--cubic:hover {
  color: #ffffff;
  background: #c78f77;
  -webkit-transform: translate(0, 3px);
  transform: translate(0, 3px);
  -webkit-box-shadow: 0 2px 0 #8a5a45;
  box-shadow: 0 2px 0 #8a5a45;
}

a.btn--radius {
  border-radius: 100vh;
}

.fa-position-right {
  position: absolute;
  top: calc(50% - .5em);
  right: 1rem;
}








/*水色の商品購入ボタン*/

a.btn--mizuiro.btn--cubic {
  color: #000000;
  background-color: #94d4ff;
  border-bottom: 3px solid #6698ba;
}

a.btn--mizuiro.btn--cubic:hover {
  color: #ffffff;
  background: #7fbbe3;
  -webkit-transform: translate(0, 3px);
  transform: translate(0, 3px);
  -webkit-box-shadow: 0 2px 0 #6698ba;
  box-shadow: 0 2px 0 #6698ba;
}

a.btn--radius {
  border-radius: 100vh;
}

.fa-position-right {
  position: absolute;
  top: calc(50% - .5em);
  right: 1rem;
}



/*オレンジの商品購入ボタン*/

a.btn--orange.btn--cubic {
  color: #000000;
  background-color: #ffcb47;
  border-bottom: 3px solid #a3822e;
}

a.btn--orange.btn--cubic:hover {
  color: #ffffff;
  background: #ffb469;
  -webkit-transform: translate(0, 3px);
  transform: translate(0, 3px);
  -webkit-box-shadow: 0 2px 0 #a3822e;
  box-shadow: 0 2px 0 #a3822e;
}

a.btn--radius {
  border-radius: 100vh;
}

.fa-position-right {
  position: absolute;
  top: calc(50% - .5em);
  right: 1rem;
}




/*紫の商品購入ボタン*/

a.btn--purple.btn--cubic {
  color: #000000;
  background-color: #eec1f5;
  border-bottom: 3px solid #937699;
}

a.btn--purple.btn--cubic:hover {
  color: #ffffff;
  background: #bf97c7;
  -webkit-transform: translate(0, 3px);
  transform: translate(0, 3px);
  -webkit-box-shadow: 0 2px 0 #937699;
  box-shadow: 0 2px 0 #937699;
}

a.btn--purple {
  border-radius: 100vh;
}

.fa-position-right {
  position: absolute;
  top: calc(50% - .5em);
  right: 1rem;
}




/*黄色の商品購入ボタン*/

a.btn--kiiro.btn--cubic {
  color: #000000;
  background-color: #fadb87;
  border-bottom: 3px solid #9c9949;
}

a.btn--kiiro.btn--cubic:hover {
  color: #ffffff;
  background: #c9c66f;
  -webkit-transform: translate(0, 3px);
  transform: translate(0, 3px);
  -webkit-box-shadow: 0 2px 0 #9c9949;
  box-shadow: 0 2px 0 #9c9949;
}

a.btn--kiiro {
  border-radius: 100vh;
}

.fa-position-right {
  position: absolute;
  top: calc(50% - .5em);
  right: 1rem;
}






/*緑の商品購入ボタン*/

a.btn--green.btn--cubic {
  color: #000000;
  background-color: #8ad49c;
  border-bottom: 3px solid #548f63;
}

a.btn--green.btn--cubic:hover {
  color: #ffffff;
  background: #74b584;
  -webkit-transform: translate(0, 3px);
  transform: translate(0, 3px);
  -webkit-box-shadow: 0 2px 0 #548f63;
  box-shadow: 0 2px 0 #548f63;
}

a.btn--green {
  border-radius: 100vh;
}

.fa-position-right {
  position: absolute;
  top: calc(50% - .5em);
  right: 1rem;
}







/*青グレーの商品購入ボタン*/

a.btn--aogray.btn--cubic {
  color: #000000;
  background-color: #9fc1c4;
  border-bottom: 3px solid #698082;
}

a.btn--aogray.btn--cubic:hover {
  color: #ffffff;
  background: #8cabad;
  -webkit-transform: translate(0, 3px);
  transform: translate(0, 3px);
  -webkit-box-shadow: 0 2px 0 #698082;
  box-shadow: 0 2px 0 #698082;
}

a.btn--aogray {
  border-radius: 100vh;
}

.fa-position-right {
  position: absolute;
  top: calc(50% - .5em);
  right: 1rem;
}





/*見出し*/

.make_title{
  font-size: 30px;
  font-weight: 800;
  font-family: 'Segoe Print','YuGothic','Yu Gothic','Marker Felt',sans-serif;
  text-align: center;
}

/*小見出し*/

.make_title_sub{
  font-size: 30px;
  font-weight: 800;
  font-family: 'YuGothic','Yu Gothic',sans-serif;
  text-align: center;
}








/*導入文_センター*/


.p_intro {
  font-size: 14px;
  font-family: 'YuGothic','Yu Gothic',sans-serif;
  text-align: center;
}



/*導入文_左寄せ*/


.p_left {
  font-family: 'YuGothic','Yu Gothic',sans-serif;
  text-align: left;
}




/*導入文_PC左寄せ_SPセンター*/


.p_pcleft_spcenter {
  color: #595959;
  font-size: 14px;
  font-family: 'YuGothic','Yu Gothic',sans-serif;
  text-align: left;
}


@media only screen and (max-width: 767px) {
.p_pcleft_spcenter {
  color: #595959;
  font-size: 14px;
  font-family: 'YuGothic','Yu Gothic',sans-serif;
  text-align: center;
}
}



/*アンカーリンク用テキスト*/


.p_anchorlink {
  font-size: 14px;
  font-family: 'YuGothic','Yu Gothic',sans-serif;
  text-align: center;
  color: #bdbdbd;
}



/*ベージュの吹き出し（下向き）*/


.balloon1_beige {
  position: relative;
  display: inline-block;
margin: auto;
  padding: 7px 20px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #e6b27e;
  border-radius: 15px;
}

.balloon1_beige:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 15px solid transparent;
  border-top: 15px solid #e6b27e;
margin: auto;
}

.balloon1_beige p {
  margin: 0;
  padding: 0;
  font-size: 25px;
  font-weight: 700;
  font-family: 'Segoe Print','YuGothic','Yu Gothic','Marker Felt',sans-serif;
  text-align: center;

}



/*水色の吹き出し（下向き）*/


.balloon1_mizuiro {
  position: relative;
  display: inline-block;
margin: auto;
  padding: 7px 20px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #94d4ff;
  border-radius: 15px;
}

.balloon1_mizuiro:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 15px solid transparent;
  border-top: 15px solid #94d4ff;
margin: auto;
}

.balloon1_mizuiro p {
  margin: 0;
  padding: 0;
  font-size: 25px;
  font-weight: 700;
  font-family: 'Segoe Print','YuGothic','Yu Gothic','Marker Felt',sans-serif;
  text-align: center;

}



/*紫の吹き出し（下向き）*/


.balloon1_purple {
  position: relative;
  display: inline-block;
margin: auto;
  padding: 7px 20px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #eec1f5;
  border-radius: 15px;
}

.balloon1_purple:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 15px solid transparent;
  border-top: 15px solid #eec1f5;
margin: auto;
}

.balloon1_purple p {
  margin: 0;
  padding: 0;
  font-size: 25px;
  font-weight: 700;
  font-family: 'Segoe Print','YuGothic','Yu Gothic','Marker Felt',sans-serif;
  text-align: center;

}



/*オレンジの吹き出し（下向き）*/


.balloon1_orange {
  position: relative;
  display: inline-block;
margin: auto;
  padding: 7px 20px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #ffcb47;
  border-radius: 15px;
}

.balloon1_orange:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 15px solid transparent;
  border-top: 15px solid #ffcb47;
margin: auto;
}

.balloon1_orange p {
  margin: 0;
  padding: 0;
  font-size: 25px;
  font-weight: 700;
  font-family: 'Segoe Print','YuGothic','Yu Gothic','Marker Felt',sans-serif;
  text-align: center;

}




/*黄色の吹き出し（下向き）*/


.balloon1_kiiro {
  position: relative;
  display: inline-block;
margin: auto;
  padding: 7px 20px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #fadb87;
  border-radius: 15px;
}

.balloon1_kiiro:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 15px solid transparent;
  border-top: 15px solid #fadb87;
margin: auto;
}

.balloon1_kiiro p {
  margin: 0;
  padding: 0;
  font-size: 25px;
  font-weight: 700;
  font-family: 'Segoe Print','YuGothic','Yu Gothic','Marker Felt',sans-serif;
  text-align: center;

}





/*青グレーの吹き出し（下向き）*/


.balloon1_aogray {
  position: relative;
  display: inline-block;
margin: auto;
  padding: 7px 20px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #9fc1c4;
  border-radius: 15px;
}

.balloon1_aogray:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 15px solid transparent;
  border-top: 15px solid #9fc1c4;
margin: auto;
}

.balloon1_aogray p {
  margin: 0;
  padding: 0;
  font-size: 25px;
  font-weight: 700;
  font-family: 'Segoe Print','YuGothic','Yu Gothic','Marker Felt',sans-serif;
  text-align: center;

}





/*ピンクの吹き出し（下向き）*/


.balloon1_pink {
  position: relative;
  display: inline-block;
margin: auto;
  padding: 7px 20px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #ffb6c1;
  border-radius: 15px;
}

.balloon1_pink:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 15px solid transparent;
  border-top: 15px solid #ffb6c1;
margin: auto;
}

.balloon1_pink p {
  margin: 0;
  padding: 0;
  font-size: 25px;
  font-weight: 700;
  font-family: 'Segoe Print','YuGothic','Yu Gothic','Marker Felt',sans-serif;
  text-align: center;

}


/*オレンジの下向き三角*/


.triangle_shita_orange {
  position: relative;
  display: inline-block;
margin: auto;
  padding: 7px 20px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #ffcb47;
  border-radius: 15px;
}

.triangle_shita_orange:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 15px solid transparent;
  border-top: 15px solid #ffcb47;
margin: auto;
}

.triangle_shita_orange p {
  margin: 0;
  padding: 0;
  font-size: 25px;
  font-weight: 700;
  font-family: 'Segoe Print','YuGothic','Yu Gothic','Marker Felt',sans-serif;
  text-align: center;

}






/*オレンジ下向き三角*/


.triangle_orange {
  position: relative;
  display: inline-block;
margin: auto;
  padding: 0px 0px;
  min-width: 0px;
  max-width: 0%;
  color: ;
  font-size: 0px;
  background: ;
  border-radius: 0px;
}

.triangle_orange:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 30px solid transparent;
  border-top: 30px solid #ffcb47;
margin: auto;
}

.triangle_orange p {
  margin: 0;
  padding: 0;
  font-size: px;
  font-weight: ;
  font-family: 'Segoe Print','YuGothic','Yu Gothic','Marker Felt',sans-serif;
  text-align: center;

}









/*スマホのみに適用（改行など）*/
/*<p>PCのみで改行したい<br class="pc">テキスト</p>*/
/*<p>SPのみで改行したい<br class="sp">テキスト</p>*/
/*<p class="pc_area">PC表示です。</p>*/
/*<p class="sp_area">スマホ表示です。</p>*/

@media screen and (min-width: 767px){   
  .pc { display:inline; }
  .sp { display:none; }
}
@media screen and (max-width: 767px){   
  .pc { display:none; }
  .sp { display:inline; }
}


/*PCの場合*/
.pc	{ display:inline!important; }
.sp	{ display:none!important; }
/*タブレット、スマホの場合*/
@media only screen and (max-width: 767px) {
    img { max-width: 100%; }
.pc	{ display:none!important; }
.sp { display:inline!important; }
}




/*<img class="pc" src="../img/forPc.png" alt="パソコン用の画像">*/
/*<img class="sp" src="../img/forSp.png" alt="スマートフォン用の画像">*/


/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}





/*罫線（斜線）*/

.h_line_beige  {
  /*線の種類（二重線）太さ 色*/
  border-bottom: double 7px #e6b27e;
  width: 100%;
　margin: 0;
}


/*罫線（ベージュ点線）*/

.h_tensen_beige {
   border-width: 7px 0px 0px 0px; /* 太さ1px */
   border-style: dashed; /* 線種を破線に */
   border-color: #e6b27e;   /* 線色を灰色に */
   height: 7px;         /* 高さ(※古いIE用) */
}

</style>







<style>



/*文字回り込み*/


.target{ 
  float:left;
  margin-top:4px;
  margin-right:2px;
  margin-bottom:0px;
  width:100px;
  height:100px;
}
</style>

















<style>





/*フレックス*/


.fbox_20_100{
  padding: 5% 5%; /* 内側の余白 上下・左右 */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;

}
.fbox_20_100 > *{
  width: 20%;
  text-align: center;
}

@media screen and (max-width: 767px) {
.fbox_1{
  padding: 2% 5%; /* 内側の余白 上下・左右 */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;

}
.fbox_20_100 > *{
  width: 100%;
  text-align: center;
}

</style>






<style>

.fbox_20_95{
  padding: 5% 5%; /* 内側の余白 上下・左右 */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;

}
.fbox_20_95 > *{
  width: 20%;
  text-align: center;
}

@media screen and (max-width: 767px) {
.fbox_1{
  padding: 2% 5%; /* 内側の余白 上下・左右 */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;

}
.fbox_20_95 > *{
  width: 95%;
  text-align: center;
}

</style>







<style>
.fbox_25_100{
  padding: 5% 5%; /* 内側の余白 上下・左右 */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;

}
.fbox_25_100 > *{
  width: 25%;
  text-align: center;
}

@media screen and (max-width: 767px) {
.fbox_1{
  padding: 2% 5%; /* 内側の余白 上下・左右 */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;

}
.fbox_25_100 > *{
  width: 100%;
  text-align: center;
}

</style>






<style>
.fbox_28_100{
  padding: 5% 5%; /* 内側の余白 上下・左右 */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;

}
.fbox_28_100 > *{
  width: 28%;
  text-align: center;
}

@media screen and (max-width: 767px) {
.fbox_1{
  padding: 2% 5%; /* 内側の余白 上下・左右 */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;

}
.fbox_28_100 > *{
  width: 100%;
  text-align: center;
}

</style>






<style>

.fbox_20_45{
  padding: 2% 5%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;

}
.fbox_20_45 > *{
  width: 20%;
  text-align: center;
}

@media screen and (max-width: 767px) {
.fbox_20_45{
  padding: 5% 5%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;

}
.fbox_20_45 > *{
  width: 45%;
  text-align: center;
}


</style>



<style>

.fbox_contents{
  padding: 2% 5%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;

}
.fbox_contents > *{
  width: 20%;
  text-align: center;
}

@media screen and (max-width: 767px) {
.fbox_contents{
  padding: 5% 5%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;

}
.fbox_contents > *{
  width: 20%;
  text-align: center;
}


</style>




<style>

.fbox_3{
  padding: 2% 5%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;

}
.fbox_3 > *{
  width: 20%;
  text-align: center;
}

@media screen and (max-width: 767px) {
.fbox_3{
  padding: 5% 5%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;

}
.fbox_3 > *{
  width: 70%;
  text-align: center;
}


</style>





<style>


.fbox_21_47{
  padding: 5% 5%;
  margin: 5px 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;

}
.fbox_21_47 > *{
  width: 21%;
  text-align: center;
}

@media screen and (max-width: 767px) {
.fbox_21_47{
  padding: 5% 5%;
  margin: 5px 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;

}
.fbox_21_47 > *{
  width: 47%;
  text-align: center;
}

</style>




<style>


.fbox_21_47_pen0{
  padding: 5% 0%;
  margin: 0px 0px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;

}
.fbox_21_47_pen0 > *{
  width: 21%;
  text-align: center;
}

@media screen and (max-width: 767px) {
.fbox_21_47_pen0{
  padding: 0% 0%;
  margin: 0px 0px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;

}
.fbox_21_47_pen0 > *{
  width: 47%;
  text-align: center;
}

</style>





<style>


.fbox_27_47{
  padding: 5% 0%;
  margin: 0px 0px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;

}
.fbox_27_47 > *{
  width: 27%;
  text-align: center;
}

@media screen and (max-width: 767px) {
.fbox_27_47{
  padding: 0% 0%;
  margin: 0px 0px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;

}
.fbox_27_47 > *{
  width: 47%;
  text-align: center;
}

</style>




<style>


.fbox_27_47_pa0{
  padding: 0% 0%;
  margin: 0px 0px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;

}
.fbox_27_47_pa0 > *{
  width: 27%;
  text-align: center;
}

@media screen and (max-width: 767px) {
.fbox_27_47_pa0{
  padding: 0% 0%;
  margin: 0px 0px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;

}
.fbox_27_47_pa0 > *{
  width: 47%;
  text-align: center;
}

</style>



<style>

.fbox_21_100{
  padding: 5% 5%;
  margin: 5px 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;

}
.fbox_21_100 > *{
  width: 21%;
  text-align: center;
}

@media screen and (max-width: 767px) {
.fbox_21_100{
  padding: 5% 5%;
  margin: 5px 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;

}
.fbox_21_100 > *{
  width: 100%;
  text-align: center;
}

</style>



<style>

.fbox_21_95{
  padding: 5% 5%;
  margin: 5px 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;

}
.fbox_21_95 > *{
  width: 21%;
  text-align: center;
}

@media screen and (max-width: 767px) {
.fbox_21_95{
  padding: 5% 5%;
  margin: 5px 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;

}
.fbox_21_95 > *{
  width: 95%;
  text-align: center;
}

</style>





<style>


.fbox_50_50{
  padding: 0% 0%; /* 内側の余白 上下・左右 */
  margin: 2% 0%; /* 外側の余白 上下・左右 */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.fbox_50_50 > *{
  width: 40%;
  text-align: center;
}

@media screen and (max-width: 767px) {
.fbox_50_50{
  padding: 0% 0%; /* 内側の余白 上下・左右 */
  margin: 5% 0%; /* 外側の余白 上下・左右 */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;

}
.fbox_50_50 > *{
  width: 50%;
  text-align: center;
}

</style>




<style>


.fbox_50_100{
  padding: 0% 0%; /* 内側の余白 上下・左右 */
  margin: 2% 0%; /* 外側の余白 上下・左右 */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.fbox_50_100 > *{
  width: 40%;
  text-align: center;
}

@media screen and (max-width: 767px) {
.fbox_50_100{
  padding: 0% 0%; /* 内側の余白 上下・左右 */
  margin: 5% 0%; /* 外側の余白 上下・左右 */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;

}
.fbox_50_100 > *{
  width: 100%;
  text-align: center;
}

</style>


<style>


.fbox_50_90{
  padding: 0% 0%; /* 内側の余白 上下・左右 */
  margin: 2% 0%; /* 外側の余白 上下・左右 */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.fbox_50_90 > *{
  width: 40%;
  text-align: center;
}

@media screen and (max-width: 767px) {
.fbox_50_90{
  padding: 0% 0%; /* 内側の余白 上下・左右 */
  margin: 5% 0%; /* 外側の余白 上下・左右 */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;

}
.fbox_50_90 > *{
  width: 90%;
  text-align: center;
}

</style>





<style>

.fbox_30_30{
  padding: 2% 2%; /* 内側の余白 上下・左右 */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;

}
.fbox_30_30 > *{
  width: 30%;
  text-align: center;
}

@media screen and (max-width: 767px) {
.fbox_30_30{
  padding: 2% 5%; /* 内側の余白 上下・左右 */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;

}
.fbox_30_30 > *{
  width: 30%;
  text-align: center;
}

</style>


<style>

.fbox_30_100{
  padding: 2% 2%; /* 内側の余白 上下・左右 */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;

}
.fbox_30_100 > *{
  width: 30%;
  text-align: center;
}

@media screen and (max-width: 767px) {
.fbox_30_100{
  padding: 2% 5%; /* 内側の余白 上下・左右 */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;

}
.fbox_30_100 > *{
  width: 100%;
  text-align: center;
}

</style>




<style>

.fbox_30_95{
  padding: 2% 2%; /* 内側の余白 上下・左右 */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;

}
.fbox_30_95 > *{
  width: 30%;
  text-align: center;
}

@media screen and (max-width: 767px) {
.fbox_30_95{
  padding: 2% 5%; /* 内側の余白 上下・左右 */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;

}
.fbox_30_95 > *{
  width: 95%;
  text-align: center;
}

</style>





<style>


/*アコーディオンCSSのみ*/

.acd-check{
display: none;
}
.acd-label{
background: #ffb6c1;
color: #595959;
display: block;
margin-bottom: 1px;
padding: 10px;
border-radius: 10px; /* ボックスの四つ角を丸くする */
font-size: 18px;
font-weight: 700;
text-align: left;
}
.acd-content{
background: #fff;
border: 2px solid #ffb6c1;
height: 0;
opacity: 0;
padding: 0 10px;
transition: .5s;
visibility: hidden;
}
.acd-check:checked + .acd-label + .acd-content{
height: 40px;
opacity: 1;
padding: 10px;
visibility: visible;
}

.acd-check:checked + .acd-label + .acd-content{
height: auto;
opacity: 1;
padding: 10px;
visibility: visible;
}


@media screen and (max-width: 767px) {
.acd-label{
background: #ffb6c1;
color: #595959;
display: block;
margin-bottom: 1px;
padding: 10px;
border-radius: 10px; /* ボックスの四つ角を丸くする */
font-size: 18px;
font-weight: 700;
text-align: center;
}
}


</style>




<style>

/*アコーディオン全体*/
.accordion-area{
    list-style: none;
    width: 96%;
    max-width: 900px;
    margin:0 auto;
}

.accordion-area li{
    margin: 10px 0;
}

.accordion-area section {
	border: 1px solid #ccc;
}

/*アコーディオンタイトル*/
.title {
    position: relative;/*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    font-size:1rem;
    font-weight: normal;
    padding: 3% 3% 3% 50px;
    transition: all .5s ease;
}

/*アイコンの＋と×*/
.title::before,
.title::after{
    position: absolute;
    content:'';
    width: 15px;
    height: 2px;
    background-color: #333;
    
}
.title::before{
    top:48%;
    left: 15px;
    transform: rotate(0deg);
    
}
.title::after{    
    top:48%;
    left: 15px;
    transform: rotate(90deg);

}

/*　closeというクラスがついたら形状変化　*/

.title.close::before{
	transform: rotate(45deg);
}

.title.close::after{
	transform: rotate(-45deg);
}

/*アコーディオンで現れるエリア*/
.box {
    display: none;/*はじめは非表示*/
    background: #f3f3f3;
	margin:0 3% 3% 3%;
    padding: 3%;
}


</style>









<style>

/*スライダーSP*/


@media only screen and (max-width: 767px) {
    img { max-width: 100%; }

.slide_make img {
  width: inherit;
  height: inherit;
  margin: 0;
  padding: 0;
  border: none;
}

.slide_make {
  white-space: nowrap;
  width: 380px;
  height: 235px;
  overflow: hidden;
}

.slide_make > :first-child {
  animation-name: slide;     /* 作成したキーフレームを使う */
  animation-duration: 13s;   /* アニメーション全体を●秒にする */
  animation-delay: 3s;      /* ●秒後にアニメーション開始する */
  animation-iteration-count: infinite;
}

@keyframes slide {
  0% { margin-left: 0; }
  25% { margin-left: -100%; }
  50% { margin-left: -200%; }
  75% { margin-left: -300%; }
  100% { margin-left: -400%; }
}
}

.center {
  margin: auto;
}
}



</style>


<style>

/*ナビ*/
/*PCナビ_*/
@media screen and (min-width:781px) {
    .make_ft_navi{
        position: fixed;
        width: 130px;
        bottom:16%;
        left:0;
        padding:9px 0 0;
        border:4px solid #ffb6c1;
        border-reft:none;
        background-color:#ffb6c1;
        z-index:999;
        border-radius: 15px; /* ボックスの四つ角を丸くする */
    }
    .make_ft_navi_tit{
        text-align: center;
        padding-bottom: 10px;
        font-size: 1.1em;
        color: #ffffff;
        letter-spacing: 0.08em;
        font-weight: 700;
    }
    .makeft_NaviList li{
        width:100%;
        background-color:#fff;
        text-align: center;
        border-bottom:3px solid #ffb6c1;
        border-radius: 15px; /* ボックスの四つ角を丸くする */
    }
    .makeft_NaviList li:last-child{
        width:100%;
        background-color:#fff;
        text-align: center;
        border-bottom:none;
   }
    .makeft_NaviList li a{
        display: block;
        padding:6px 2px;
        font-size:12px;
        text-decoration: none;
        color: #ffb6c1;
}
    .makeft_NaviList li a:hover{
        opacity:0.8;
        color: #d46e6e;
        font-weight: 700;
    }
    .pc_none,.pc_none img,.make_floating_sp{
        display: none;
    }
}
@media screen and (max-width:780px) {
    .make_ft_navi{
        display: none;
        }
    }


/*SPナビ*/
@media screen and (max-width:780px) { 
	.make_floating_sp{
		display: none;
	}
	.make_floating_sp div[class^="makeNavi_cont"]{
        width:48%;
		position:relative;
		top: auto;
		left: auto;
		text-align: center;
	}	
	div[class^="embroideryNavi_cont"] p{
		font-size: 1rem;
	}
	.make_floating_sp div[class^="makeNavi_cont"] a p {
        width: 86%;
        height: 50px;
        line-height:48px;
        font-size:14px;
        margin: 0 auto;
        border: 1px solid #7e7e7e;
        border-radius: 5px;
}
	.make_floating_sp div[class^="makeNavi_cont"] a p br{
		display: none;
	}
	
	.make_floating_btn.fixed_sp {
		display: block;
		position: fixed;
		bottom: 20px;
		left: 5px;
		z-index: 56;
		text-align: center;
		font-weight: 700;
		font-size: 13px;
	}
	.make_floating_sp.makeactive{
		display: flex !important;
        height: 100%;
        width: 100%;
        padding: 20% 0;
        position: fixed;
        flex-wrap: wrap;
        top: 0;
        left: 0;
        background-color: rgba(250,250,250,0.95);
        z-index: 1000;
        justify-content: flex-start;
	}
	.make_floating_btn.fixed_sp img{
		width: 80px;
	}
	.make_floating div[class^="makeNavi_cont"] img{
		display: none;
	}
    .make_book_infobox_title{
        font-size: 1.3em;
        letter-spacing: 0;
    }
    .make_book_title{
        font-size: 1.2em;
    }
    .makeNaviList .makeNaviList_neme:hover{
        color: #ffffff;
    }
    .make_floating_close{
        width:250px;
        height: 100px;
        margin: 0 auto;
        color: #4f4744;
        text-align: center;
        padding:10px;
    }
}

</style>


