@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;700&display=swap");


/* 画像のレスポンシブ対応 */
.box-mv-01{margin-top:40px;margin-bottom:40px;}
@media screen and (max-width:767px){.box-mv-01{margin-top:20px;margin-bottom:20px}
}
.box-mv-01 .mv{margin-bottom:0}
.box-mv-01 .mv img{max-width:1040px;width:100%;margin:auto}
.box-mv-01 .mv img.pc{display:block}
@media screen and (max-width:767px){.box-mv-01 .mv img.pc{display:none}
}
.box-mv-01 .mv img.sp{display:none}
@media screen and (max-width:767px){.box-mv-01 .mv img.sp{display:block}
}


/* 文字装飾 */
.t-center{text-align: center;}
.pink-chara{color: #bc0073;}
.pink_line_narrow{background:rgba(0, 0, 0, 0) linear-gradient(transparent 80%, #E8A8CF 0%) repeat scroll 0 0;}
.lightblue_line_narrow{font-weight: bold; background: linear-gradient(transparent 80%,  #61d1ff 80%);}


/* リンク付き画像半透明 */
a:hover img {
	opacity: 0.6;
}

/* かたまり */
.box-txt-01{margin:10px 0;}
.box-txt-01 p{margin: 0 0 1.5em; letter-spacing:0.1em;}
.box-txt-02{margin: 0 0 1.5em;}

/* 上部文字付きボックス */
.box1  {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #c9338e;
    border-radius: 8px;
}
.box1 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #c9338e;
    font-weight: bold;
}
.box1 p {
    margin: 0; 
    padding: 0;
}







/* コメント用ボックス */


.pointbox  {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #c9338e;
    border-radius: 8px;
}

.pointbox .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #c9338e;
    font-weight: bold;
}

.pointbox p {
    margin: 0; 
    padding: 0;
}


.comment-box{
  margin: 1em 0;
  padding: 1em;
  background-color: #f9f3d1;
  border-radius: 10px;
}

.comment-box p{
  margin: 0;
  padding: 0;
}




/* 1:1で2個並べる */
.box-culumn2-01{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -ms-flex-wrap:wrap; flex-wrap:wrap;-webkit-box-pack:justify; -ms-flex-pack:justify;
    justify-content:flex-start;
    margin-bottom: 1.5em;
}
@media screen and (max-width:767px){.box-culumn2-01{display:block}}
.box-culumn2-01>.inner{width: 48%;}
@media screen and (max-width:767px){.box-culumn2-01>.inner{width: 100%;}}
.box-culumn2-01>.inner:not(:nth-child(2n)){margin-right: 4%}
@media screen and (max-width:767px){.box-culumn2-01>.inner:not(:nth-child(2n)){margin-right:0}}

/* 2:1で2個並べる */
.box-culumn2-02{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -ms-flex-wrap:wrap; flex-wrap:wrap;-webkit-box-pack:justify; -ms-flex-pack:justify;
    justify-content:flex-start;
    margin-bottom: 1.5em;
}
@media screen and (max-width:767px){.box-culumn2-02{display:block}}
.box-culumn2-02>.inner:not(:nth-child(2n)){width:65.85%; margin-right:2.45%}
@media screen and (max-width:767px){.box-culumn2-02>.inner:not(:nth-child(2n)){width:100%; margin-right:0}}
.box-culumn2-02>.inner:nth-child(2n){width:31.7%;margin-right: 0;}
@media screen and (max-width:767px){.box-culumn2-02>.inner:nth-child(2n){width:100%; margin-right:0}}

/* 1:2で2個並べる */
.box-culumn2-03{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -ms-flex-wrap:wrap; flex-wrap:wrap;-webkit-box-pack:justify; -ms-flex-pack:justify;
    justify-content:flex-start;
    margin-bottom: 1.5em;
}
@media screen and (max-width:767px){.box-culumn2-03{display:block}}
.box-culumn2-03>.inner:not(:nth-child(2n)){width:31.7%;margin-right: 2.45%;}
@media screen and (max-width:767px){.box-culumn2-03>.inner:not(:nth-child(2n)){width:100%; margin-right:0}}
.box-culumn2-03>.inner:nth-child(2n){width:65.85%; margin-right:0}
@media screen and (max-width:767px){.box-culumn2-03>.inner:nth-child(2n){width:100%; margin-right:0}}



/* 3個並べる */
.box-culumn3-01{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -ms-flex-wrap:wrap; flex-wrap:wrap;-webkit-box-pack:justify; -ms-flex-pack:justify;
    justify-content:flex-start;
}
@media screen and (max-width:767px){.box-culumn3-01{display:block}}
.box-culumn3-01>.inner{width:31.7%}
@media screen and (max-width:767px){.box-culumn3-01>.inner{width:100%}}
.box-culumn3-01>.inner:not(:nth-child(3n)){margin-right: 2.45%;}
@media screen and (max-width:767px){.box-culumn3-01>.inner:not(:nth-child(3n)){margin-right:0}}
/* @media screen and (max-width:767px){.box-culumn3-01>.inner:not(:first-child){margin-top:20px}}
*+.box-culumn3-01{margin-top:50px} */


/* 4個並べる */
.box-culumn4-01{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -ms-flex-wrap:wrap; flex-wrap:wrap;-webkit-box-pack:justify; -ms-flex-pack:justify;
    justify-content:flex-start;
}
@media screen and (max-width:767px){.box-culumn4-01{display:block}}
.box-culumn4-01>.inner{width:22%}
@media screen and (max-width:767px){.box-culumn4-01>.inner{width:100%}}
.box-culumn4-01>.inner:not(:nth-child(4n)){margin-right: 2.45%;}
@media screen and (max-width:767px){.box-culumn4-01>.inner:not(:nth-child(4n)){margin-right:0}}
/* @media screen and (max-width:767px){.box-culumn4-01>.inner:not(:first-child){margin-top:20px}}
*+.box-culumn4-01{margin-top:50px} */


/* 見出し */
.unit-title-02{margin-bottom: 10px !important;}

/* 小見出し */
.unit-text-01{
    margin: 0 0 0.5em;
    padding-left: 0.5em;
    border-left: 6px solid #c9338e;
}
.unit-text-01 p{
    margin: 0;
    font-size:16px;
    font-weight: bold;
}

.unit-text-02{
    margin: 0 0 0.5em;
}
.unit-text-02 p{
    margin: 0;
    font-weight: bold;
}

/* BOX内のグレー背景見出し */
.title2{
font-size: 1.2em;/* フォントサイズ */
<!--font-weight: bold;/* フォント太さ */-->
text-align:center;
padding-top: .3em;
padding-bottom: .3em;
padding-left: .3em;
margin-bottom: 1em;
background-color: #666666;/* 背景色 */
color: #ffffff;/* フォント色 */
}


/* 装飾見出し */
.settitle-goldichimatsu {
    position: relative;
    margin-bottom: 2rem;
    padding: 0.5rem;
    font-size: 18px;
    font-weight: bold;
    background-color: white;
    color: #000000;
    display: inline-block;
}

.settitle-goldichimatsu:before {
    position: absolute;
    content: '';
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 10px;
    background: linear-gradient(45deg, #cd8e00 25%, transparent 25%, transparent 75%, #cd8e00 75%),
        linear-gradient(45deg, #cd8e00 25%, transparent 25%, transparent 75%, #cd8e00 75%);
    background-position: 0 0, 5px 5px;
    background-size: 10px 10px;
    background-color: #FFF;
    display: inline-block;
}


/* リスト */
.unit-list-01 ul{list-style: none; margin: 0 0 1em; padding: 0;}
.unit-list-01 li{margin: 0 0 0.5em; letter-spacing:0.05em; font-size: 14px;}
.unit-list-01 li:last-child{margin: 0 0 1.5em;}
.unit-list-01 p{margin: 0;}

.unit-list-02 ul{list-style: none; margin: 0 0 1em 1em; padding: 0;}
.unit-list-02 li{margin: 0 0 0.5em; letter-spacing:0.05em; color: #808080;font-size: 12px;}
.unit-list-02 p{margin: 0;}

/* リストスタイル */
.list-circle::before{content: "●" !important;}
.list-kome::before{content: '※' !important;}
.list-dot::before{content: '・' !important;}

/* 注釈 */
.unit-sup-01{font-size: 1.2rem; vertical-align: super;}
.unit-sub-01{margin-bottom: 0.5em !important; color: #808080; font-size: 12px;}

/* テーブル */
.table-01{border-collapse: collapse;}
.table-01 th{text-align: center;}
.table-01 th, .table-01 td{border: solid 1px; padding: 10px;}


/* リスト（肉球アイコン） */
.unit-list-03>ul {
  border: solid 2px #c9338e;
  background: #fffaf1;
  padding: 0.5em 1em 0.5em 2.3em;
  position: relative;
}

.unit-list-03>ul li {
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;/*ポチ消す*/
}

.unit-list-03>ul li:before {
  font-family: "Font Awesome 5 Free";
  content: "\f1b0";/*アイコン種類*/
  position: absolute;
  left : 1em; /*左端からのアイコンまで*/
  color: #c9338e; /*アイコン色*/
}

/* ホワイトボード風　タイトル */
.wboard-w1 {
 position: relative;
 margin: 2em auto;
 padding: 3.5em 1em 1em;
 width: 90%; /* ボックス幅 */
 background-color: #fffff9; /* ボックス背景色 */
 color: #000; /* 文章色 */
 border: 5px solid #e6b422; /* 枠線 */
 border-radius: 3px; /* 角の丸み */
 box-shadow: 0 0 8px #333, 0 0 2px #555 inset;
}
.wboard-w1::before,
.wboard-w1::after {
 position: absolute;
 content: '';
 width: 25px; 
 bottom: 3px;
 border-radius: 2px;
 box-shadow: 1px 1px 3px #666;
} 
.wboard-w1::before {
 right: 55px;
 border: solid 3px #333333; /*飾ペン黒 */
}
.wboard-w1::after {
 right: 20px;
 border: solid 3px #bc0073; /*飾ペンピンク */
 transform: rotate(8deg); /*飾ペン角度 */
}
.title-w1 {
 position: absolute;
 padding: .1em .5em;
 left: 1em;
 top: .5em;
 font-weight: bold;
 font-size: 1.1em; /* 文字サイズ */
 color: #bc0073; /* タイトル文字色 */
 background-color: #fffff9; /* ボックス背景色 */
 box-shadow: 1px 1px 3px #a0a0a0;
}


/* キャンペーン　ボックス　 */

.campaign-box{
    position: relative;
    margin: 1em 0;
    padding: 0.5em 0.5em;
    border: double 3px #E34D26;
    border-radius: 8px;
}
.campaign-box .campaign-box-title {
position: absolute;
padding: 0 1em;
left: 20px;
top: -15px;
font-weight: bold;
background-color: #fff;
color: #E34D26;
}
.campaign-box p {
padding:1em 1em;
margin: 0;
}


/* テーブル装飾　 */

.product-info {
   table-layout: fixed;
}
.product-info td:first-child{
    width: 6.5em;
    white-space: nowrap;
}

/* キャプション付き画像　 */
.figure {
    display: inline-block
  }
  
  .figure-img {
    margin-bottom: .5rem;
    line-height: 1
  }
  
  .figure-caption {
    font-size: .875em;
    color: #6c757d;
  }