@charset "UTF-8";


@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,300&display=swap');

* {
 /*background-color: rgba(255, 0, 0, 0.1);*/
}

/* CSS Document */
.breadcrumb.top {
 border-top: 1px solid #f2f2f2;
 margin-top: 10px;
}

.cpEnd {
 border: 6px double #C1272D;
 color: #C1272D;
 font-size: 27px;
 margin: 2em 0;
 text-align: center;
 padding: 20px;
}

@media screen and (min-width: 581px) {
 br.pc_none {
  display: none;
 }
}

@media screen and (max-width: 580px) {
 .breadcrumb.top {
  margin-top: 0;
  margin-bottom: 20px;
 }

 br.sp_none {
  display: none;
 }

 .cpend {
  border: 4px double #B81B1E;
  color: #B81B1E;
  font-size: 25px;
  text-align: center;
  padding: 20px;
  margin-top: 30px;
 }
}



/*---------------------------------

  mainVisual（トップメインイメージ）

---------------------------------*/
#mainVisual {
 width: 100%;
 max-width: 1200px;
 margin: 50px auto 78px;
}

#mainVisual figure {
 padding: 0 4%;
}

#mainVisual p.aerthday {
 line-height: 1.4;
 font-size: 23px;
 margin-top: 40px;
}

#mainVisual h1 {
 line-height: 1.7;
 letter-spacing: 3px;
 font-size: 32px;
 font-weight: 400;
 text-align: center;
 margin: 20px 0;
}

#mainVisual .txt {
 line-height: 2;
 font-weight: 300;
 text-align: center;
 margin: 60px 3%;
}

#mainVisual .txt sup {
 font-size: 0.5em;
 vertical-align: super;
}

#mainVisual .txt small {
 display: inline-block;
}

#mainVisual .txt p small {
 font-size: 12px;
}

@media screen and (max-width: 580px) {
 #mainVisual {
  max-width: 1024px;
  margin: 0px auto 78px;
 }

 #mainVisual h1 {
  line-height: 1.7;
  letter-spacing: 2px;
  font-size: 25px;
  font-weight: 400;
  text-align: center;
  margin-top: 0px;
 }

 #mainVisual .txt {
  line-height: 2;
  font-weight: 300;
  text-align: justify;
  margin: 20px 5% 20%;
 }

 #mainVisual .txt br {}
}

/*---------------------------------

  mainContainer（共通スタイル）

---------------------------------*/
#mainContainer {
 max-width: 1024px;
 margin: 0 auto;
}


/*---------------------------------

  キャンペーン詳細

---------------------------------*/
.cp-block {}

@media screen and (max-width: 895px) {}

@media screen and (min-width: 581px) {}

@media screen and (max-width: 580px) {}




/* タイトル
---------------------------------*/
.cp-block_item_title {
 margin-bottom: 0px;
 text-align: center;
}

.cp-block_item_title p {
 display: inline;
 font-size: 26px;
 letter-spacing: 0.15em;
 line-height: 2;
 text-align: center;
 font-weight: 400;
 color: #fff;
 /*background: #fff9c3;*/
 background: #25afed;
}

.cp-block_item_title p span {
 position: relative;
}

.cp-block_item_title p span small.ruby {
 position: absolute;
 left: 0;
 top: 2.5em;
 width: 18em;
 display: inline-block;
 font-size: 0.5em;
 vertical-align: middle;
 letter-spacing: 0.1em;
}

@media screen and (max-width: 895px) {}

@media screen and (min-width: 581px) {}

@media screen and (max-width: 580px) {
 .cp-block_item_title p {
  font-size: 22px;
 }

 .cp-block_item_title p span small.ruby {
  left: 0;
  top: 2.2em;
 }

}


/*---------------------------------

  商品詳細

---------------------------------*/
.cp-block_item {
 margin: 32px auto 128px;
 padding: 2% ;
 background: #fff;
 background: #fffb9e;
}

.cp-block_item.cp-block_item-set {
 margin: 32px auto 48px;
 background: #c9eaff;
}

@media screen and (max-width: 895px) {}

@media screen and (min-width: 581px) {}

@media screen and (max-width: 580px) {
 .cp-block_item {
  margin: 24px auto 96px;
 }

}


/* セット内容
---------------------------------*/
.cp-block_item_inner {
 margin: 0px auto;
 padding: 20px;
 background: #fff;
 border-radius: 10px;
 overflow: hidden;
}

.cp-block_item_inner:not(:nth-last-of-type(1)) {
 padding-bottom: 20px;
 margin-bottom: 24px;
 /*border-bottom: 1px solid #959090;*/
}

.cp-block_item_title figure {
 width: 100%;
}

.cp-block_item_detail {
}

@media screen and (max-width: 895px) {}

@media screen and (min-width: 581px) {
 .cp-block_item_title figure {
  width: 90%;
  margin: auto;
 }
}

@media screen and (max-width: 580px) {
 .cp-block_item_inner {
 }
.cp-block_item_title figure {
 width: 100%;
}

 .cp-block_item_detail {
 margin-bottom: 12px;
 }
}





/*---------------------------------

  ボタン

---------------------------------*/
section.cp-block .guide_block {
 padding: 0px 0% 0px;
}

section.cp-block .guide_block ul {
 display: flex;
 justify-content: space-between;
 align-items: flex-start;
 list-style: none;
}

section.cp-block .guide_block ul li {
 text-align: center;
 width: 49%;
 transition: 0.3s;
 position: relative;
}

section.cp-block .guide_block ul li:hover a {
 opacity: 0.7;
}

section.cp-block .guide_block ul li input {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 opacity: .0;
 cursor: pointer;
}

section.cp-block .guide_block ul li > small {
 display: inline-block;
 margin-top: 10px;
 font-size: 12px;
 line-height: 1.4;
}

section.cp-block .guide_block ul li a {
 background: #aaa;
 border-radius: 5px;
 color: #fff;
 display: block;
 font-size: 1.3em;
 font-weight: 300;
 padding: 35px 40px;
 position: relative;
}

section.cp-block .guide_block ul li a small {
 font-size: 0.8em;
}

section.cp-block .guide_block ul li a::after {
 content: url("../images/a_arr_w.svg");
 display: block;
 margin: auto;
 position: absolute;
 right: 20px;
 top: 0px;
 bottom: 0;
 width: 10px;
 height: 20px;
}

section.cp-block .guide_block ul li.kaiin a {
 background: #24B6BA;
}

section.cp-block .guide_block ul li.kaiin::before {
 position: absolute;
 top: -80px;
 right: -45px;
 content: "";
 display: block;
 width: 110px;
 height: 110px;
 z-index: 1;
 background-image: url(../images/point.png);
 background-size: cover;
}

section.cp-block .guide_block ul li.tsudo a {
 background: #E96E6C;
}



@media screen and (max-width: 580px) {
 section.cp-block .guide_block {}

 section.cp-block .guide_block ul {
  display: block;
 }

 section.cp-block .guide_block ul li {
  margin-bottom: 10px;
  width: 100%;
 }

 section.cp-block .guide_block ul li a {
  font-size: 1.2em;
  padding: 20px 30px;
 }

 section.cp-block .guide_block ul li a::after {
  right: 10px;
  width: 8px;
  height: 15px;
 }

 section.cp-block .guide_block ul li.kaiin::before {
  top: -10px;
  right: auto;
  left: -40px;
  width: 90px;
  height: 90px;
  background-image: url(../images/point-sp.png);
 }
}




/*---------------------------------

  商品説明

---------------------------------*/
.stepWrap {
 margin: 0 0 64px;
 padding: 50px 0;
 background-image: url(../images/bg.jpg);
 background-size: 100% 100%;
 overflow-x: hidden;
 filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.1))
}

.stepWrap img {
 width: 100%;
}



@media screen and (max-width: 895px) {}

@media screen and (min-width: 581px) {}

@media screen and (max-width: 580px) {
 .stepWrap {
  padding: 20px;
 }
}





/*---------------------------------

  お客様の声

---------------------------------*/
.voiceWrap {
 width: 90%;
 margin: auto;
 background-size: 100% 100%;
}

.voiceWrap h3 {
 margin: 128px auto 64px;
}

.voice_list {
 width: 100%;
 margin: auto;
}

.voice_list > p {
 text-align: right;
}

.voice_list > p small {
 display: inline-block;
 font-size: 12px;
 line-height: 1.6;
}

.voice_item {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 margin: 10px auto;
 padding: 24px 5%;
 border: 1px solid #d1d1d1;
 border-radius: 6px;
}

.voice_item_header {
 position: relative;
 width: 260px;
 line-height: 1.4;
}

.voice_item_header h4 {
 font-size: 18px;
 font-weight: 600;
}

.voice_item_header p {
 margin-top: 24px;
 font-size: 11px;
 font-weight: 500;
 color: #9b9a99;
}

.voice_item_header p small {
 font-size: 10px;
 color: #0f60bf;
}

.voice_item > figure {
 width: 120px;
 height: 120px;
 margin: 0px -10px -10px -20px;
 overflow: hidden;
 z-index: -1;
}

.voice_item > figure img {}

.voice_item > p {
 width: calc(100% - 250px - 100px);
 padding-left: 24px;
 text-align: justify;
 font-size: 14px;
 font-weight: 300;
}
.voice_item > p sup {
 font-size: 0.6em;
 vertical-align: super;
}

@media screen and (max-width: 895px) {}

@media screen and (min-width: 581px) {}

@media screen and (max-width: 580px) {
 .voiceWrap {}

 .voiceWrap h3 {
  margin: 0px auto 32px;
 }

 .voice_list > p small {
  font-size: 10px;
 }

 .voice_item {
  padding: 16px 6%;
 }

 .voice_item_header {
  width: 100%;
 }

 .voice_item_header h4 {}

 .voice_item_header p {
  margin: 12px 0;
 }

 .voice_item_header p small {
  font-size: 10px;
  color: #2ecdf4;
 }

 .voice_item > figure {
  width: 90px;
  height: 90px;
  margin: -80px -10px -0px auto;
 }

 .voice_item > p {
  width: calc(100% - 0px - 0px);
  padding-left: 0px;
 }

}







/*---------------------------------

  注意事項

---------------------------------*/
section.cp-block .txt-box {
 width: 90%;
 max-width: 840px;
 margin: 80px auto;

}

section.cp-block .attention p {
 padding-left: 1.2em;
 text-indent: -1em;
 position: relative;
 margin-bottom: 1em;
 font-size: 14px;
}

section.cp-block .attention .attWrap {
 border: 2px solid;
 color: #DD272A;
 padding: 10px;
}

section.cp-block .attention .attWrap p {
 margin: 0;
}

section.cp-block .attention .attWrap a {
 color: #DD272A;
 font-weight: bold;
 text-decoration: underline;
}
