@charset "utf-8";
/* CSS Document */

.pc {
display: block;
}

.sp {
display: none;
}

.ttl-border h2.ttl-h2_n {
    position: relative;
    padding-bottom:20px;
    font-size: 32px;
    letter-spacing: 0;
    text-align: center;
    line-height: 1.5;
    color: #8c283b;
    margin-bottom:100px!important;
}

.ttl-border h2.ttl-h2_n:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 7px;
  background: -webkit-repeating-linear-gradient(-45deg, #8c283b, #8c283b 2px, #fff 2px, #fff 4px);
  background: repeating-linear-gradient(-45deg, #8c283b, #8c283b 2px, #fff 2px, #fff 4px);
}

h3.ttl-h2_n {
  border-bottom: solid 3px #9b0041;
  position: relative;
  margin: 40px 0;
  color: #8c283b;
  font-size: 24px;
  background: linear-gradient(to right, rgba(245, 177, 170, 0.3)  13%,  transparent 13%);
}

@media screen and (max-width:1200x){
h3.ttl-h2_n {
background: linear-gradient(to right, rgba(245, 177, 170, 0.3)  14%,  transparent 14%);
}
}

@media screen and (max-width:1060px){
h3.ttl-h2_n {
background: linear-gradient(to right, rgba(245, 177, 170, 0.3)  15%,  transparent 15%);
}
}

@media screen and (max-width:986px){
h3.ttl-h2_n {
background: linear-gradient(to right, rgba(245, 177, 170, 0.3)  16%,  transparent 16%);
}
}

@media screen and (max-width:980px){
h3.ttl-h2_n {
background: linear-gradient(to right, rgba(245, 177, 170, 0.3)  0%,  transparent 0%);
}
}


h3.ttl-h2_n span {
padding-left: 16px;
}

h3.ttl-h2_n:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #e95887;
  bottom: -3px;
  width:0%;
}

/* スライダー全体のスタイル */
.slider-container {
    position: relative;
    overflow: hidden;
}
/* 各スライド画像のスタイル */
.slideimg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    animation: fadeInOut 18s infinite;
    /*transition: opacity 20s ease-in-out;*/
}
/* 最初の画像だけ親要素の高さを確保させる */
.slideimg:nth-of-type(1) {
    position: relative;
    animation-delay: 0s;
    width:100%;
}
/* 2枚目の画像のアニメーション遅延 */
.slideimg:nth-of-type(2) {
    animation-delay: 6s;
    width:100%;
}
/* 3枚目の画像のアニメーション遅延 */
.slideimg:nth-of-type(3) {
    animation-delay: 12s;
    width:100%;
}
/* フェードイン・アウトのアニメーション */
@keyframes fadeInOut {
    0%   { opacity: 0; }  
    5%   { opacity: 1; }  
    30%  { opacity: 1; }  
    35%  { opacity: 0; }  
    100% { opacity: 0; } 
}
/* 画像の表示調整 */
.slideimg img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}
/* END スライダー全体のスタイル */

.ttl-border .ttl-h2::after {
    background:none;
}

.heading-number {

  display:flex;
  align-items: center;
  padding: 5px 0;
  border-bottom: 2px solid #8c283b;
  color: #8c283b;
}

.heading-number .number {
  display: inline-block;
  margin-right: 10px;
  padding: 5px 10px;
  background: linear-gradient(80deg, #35030b 0%, #8c283b 21.67%, #35030b 100%);
  color: #fff;
}

.ttl-h2.heading-number {
    display: block;
    margin: 30px auto;
}

.ttl-h2  {
    display: block;
    margin: 30px auto;
    font-size: 26px;
    letter-spacing: -0.06em;
}

.btn-wine {
background: linear-gradient(80deg, #35030b 0%, #8c283b 21.67%, #35030b 100%);
}

a.btn-wine:hover {
background: linear-gradient(80deg, #35030b 0%, #35030b 21.67%, #8c283b 100%);
opacity:0.5;
color: #fff;
}

.moreBtn:hover {
  background:;
  color: #fff;
  opacity:0.5;
}

.moreBtn:hover:after{
filter: invert(10);
}

.moreBtn::after {
    position: absolute;
    right: 11px;
    top: 50%;
    content: "";
    display: block;
    width: 12px;
    height: 6px;
    background: url(https://gigaplus.makeshop.jp/wineanddoors/app/assets/img/common/icon-arrow.png) center / contain no-repeat;
    transform: translateY(-50%) rotate(90deg);
    transition: .3s;
    filter: invert(10);
}

.in-small {
    font-size:18px;
    font-weight: var(--medium);
    font-family: var(--font-min);
    line-height: 1.77;
    margin-top: 30px;
}

.in-small p span {
font-size:22px;
font-weight: bold;
text-decoration: underline;
}

.in {
    font-weight: var(--medium);
    font-family: var(--font-min);
}


ul.flex {
padding: 6px 0;
}

.flex {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.lp-introduction-wrap p {
text-align: left;
}

.u-text-01 p {
text-align: left;
margin-bottom: 60px;
}

.flexB {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 60px;
}

.flexG {
flex-direction:row-reverse
}

.flexB div {
width: 50%;
}

.flexB p {
width: 46%;
font-size: 18px;
line-height: 44px;
}

.flexB p span.fontS {
font-size: 14px;
line-height:16px;
}

#contents-01,
#contents-02,
#contents-03 {
margin-bottom: 120px;
}

.lp-special-note .e-note {
    font-size: 14px;
    font-weight: var(--medium);
    margin: 12px 0 0 0;
    color: #000;
}

.p2-img {
width: 40%;
}

.p2-img img {
width: 100%;
}

span.lineR {
    background: linear-gradient(transparent 70%, #9b0041 35%);
}

span.lineR {
background: linear-gradient(to top, rgba(155, 0, 65, 0.85) 0%, rgba(155, 0, 65, 0.35) 60%, transparent 100%);  
}
span.lineR {
background: linear-gradient(to top, rgba(155, 0, 65, 0.9) 0%, rgba(155, 0, 65, 0.75) 50%, transparent 50%, transparent 100%);  
}
span.lineR {
background: linear-gradient(to top, rgba(155, 0, 65, 0.9) 0%, rgba(155, 0, 65, 0.2) 50%, transparent 50%, transparent 100%);  
}

span.lineR {
background: linear-gradient(to top, rgba(245, 177, 170, 0.9) 0%, rgba(245, 177, 170, 0.2) 50%, transparent 50%, transparent 100%);  
}

.lp-special-note .e-box .m-content .s-heading dt {
    font-size: 18px;
    margin-bottom: 12px;
    }

.lp-special-note .e-box .m-content .s-heading dd {
    font-size: 44px;
    color: var(--color-yellowB9);
    line-height: 52px;
}

.reviewBox {
display: flex;
max-width:1200px;
margin: 50px auto;
flex-wrap:wrap;
}

.reviewBox img {
width: 32%;
height: auto;
margin-right: 1%;
margin-bottom: 20px;
}

dd.chm_club {
position: relative;
width: 100%;
height: 1200px;
background-image: url(https://gigaplus.makeshop.jp/wineanddoors/app/assets/img/lp/chmpassport2026_2027/chm_club_0831.jpg);  
background-size: 100% auto;
border: 1px dotted #777;
background-repeat:no-repeat;
/*background-size:auto 100%;*/
}

@media screen and (max-width: 980px){
dd.chm_club {
height:980px;
}
}

@media screen and (max-width:802px){
dd.chm_club {
height:802px;
}
}


dd.chm_club ul li {
position: absolute;
font-size: 20px;
background: #fff;
padding: 2%;
border-radius:;
border: 1px solid #ccc;
}

.rotate {
  width: 150px; aspect-ratio:1;
  background: gray;
  /* margin: 100vh auto;*/
  animation: rotateAnim both;
  animation-timeline: view(); /* 何を起点に動かすか (view = ビューポートに入ったら) */
  animation-range: cover 0% cover 80%; /* アニメーション開始地点と終了地点 */
}

@keyframes rotateAnim {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

dd.chm_club ul li:nth-child(1) {
top:10%;
left: 60%;
}

dd.chm_club ul li:nth-child(2) {
top:40%;
left:10%;
}

dd.chm_club ul li:nth-child(3) {
top:60%;
left: 50%;
}

dd.chm_club ul li:nth-child(4) {
top:80%;
left: 10%;
}

.mbM {
margin-bottom: 60px;
}

sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    top: -0.5em;
}

.u-list-ul-01 li {
    text-indent: -1em;
    padding-left: 1em;
    margin-bottom: 10px;
}

.moreBtn.btn-gray {
min-width: auto; 
width: 80%; 
max-width: 500px; 
height: 60px; 
margin-top: 50px; 
font-weight: 700;
}

.moreBtn.btn-gray {
background-color: var(--color-gray55);
}

a.moreBtn.btn-gray:hover {
opacity: 0.5;
}

.fontB {
font-weight: 900!important
}

.lp-note-margin-02 {
margin-left: 1em;
}

.lp-note-margin-02 dd  {
margin-left: 1em;
}

.priceBox {
border: 10px solid;
border-image: linear-gradient(to right, #DAAF08 , #B67B03) 1;
border-image: linear-gradient(to right, #35030b , #8c283b, #35030b) 1;
text-align: center;
padding: 20px;
width: 880px;
margin: 60px auto;
}
     
.priceBox span.priceN {
font-size: 36px;
}
     
.priceBox span.colG {
color:#a38309
}

.priceBox span.fontM {
font-size: 26px;
}

#guide .anchorlinks {
padding-top: 30px;
padding-bottom: 30px;
}
    
#guide .anchorlinks .flex {
position: relative;
height: auto;
row-gap: 20px;
}

#guide .anchorlinks .flex li {
width: 33%;
height: 50px;
border-right: 1px solid #D1D1D1;
font-size: 16px;
}

#guide .anchorlinks .flex li a {
padding: 0 18px 0 20px;
background-position: center right 18px;
}

#guide .anchorlinks .flex::after {
position: absolute;
left: 0;
top: 50%;
content: "";
display: block;
width: 100%;
height: 1px;
background: #D1D1D1;
transform: translateY(-50%);
}

p.chmClub {
width: 100%;
max-width:1000px;
margin: 0 auto;
}

p.chmClub img {
width: 100%;
}

@media screen and (max-width: 999px) {
.anchorlinks {
padding: 10px 40px 20px;
}

#guide .anchorlinks .flex {
row-gap: 0;
}

#guide .anchorlinks .flex::after {
height: 0px;
}
}


@media screen and (max-width: 749px){
.pc {
display: none;
}

.sp {
display: block;
}

.in-small {
width: 100%;
}

.priceBox {
width: 100%!important;
}

.ttl-border h2.ttl-h2_n {
text-align: left;
font-size: 22px;
margin-bottom:0px!important;
}

h3.ttl-h2_n {
font-size: 20px;
}

h3.ttl-h2_n span {
    padding-left:0;
    text-align: left!important;
}

.flexB {
display: block;
}

.flexB p {
width: 100%;
font-size: 18px;
line-height:2.0!important;
margin-top: 30px;
}

.flexB div {
width: 100%;
}

.reviewBox {
display: block;
}

.reviewBox img {
width: 100%;
}

.flexB div.iframeWrapper {
width: 100%!important;
aspect-ratio: 16 / 9;
}

.flexB div.iframeWrapper iframe {
  width: 100%;
  height: 100%;
}


.flexB div.iframeWrapper {
width: 50%;
position: relative;
/*padding-top: 56.25%;*/
}
                 
iframe {
position: absolute;
top: 0;
left: 0;
 width: 100%;
/*height: 100%;*/
}

dd.chm_club {
height:700px;
}

dd.chm_club ul li {
font-size: 20px;
line-height: 1.4;
}

dd.chm_club ul li:nth-child(1) {
top:10%;
left: 60%;
}

dd.chm_club ul li:nth-child(2) {
top:40%;
left:10%;
}

dd.chm_club ul li:nth-child(3) {
top:60%;
left: 50%;
}

dd.chm_club ul li:nth-child(4) {
top:80%;
left: 10%;
}

.lp-special-note .e-box .m-content .s-heading dd {
    font-size: 30px;
    line-height:36px;
}

.lp-note-margin-02 {
    margin-left:0em;
}

#contents-02.chmC {
margin-bottom: 60px!important;
}

}

@media screen and (max-width:600px){
dd.chm_club {
height:600px;
}

dd.chm_club ul li {
font-size: 18px;
line-height: 1.4;
}

dd.chm_club ul li:nth-child(1) {
top:10%;
left: 54%;
}

dd.chm_club ul li:nth-child(2) {
top:40%;
left:10%;
}

dd.chm_club ul li:nth-child(3) {
top:60%;
left: 44%;
}

dd.chm_club ul li:nth-child(4) {
top:80%;
left: 10%;
}
}

@media screen and (max-width:490px){
dd.chm_club {
height:500px;
}

dd.chm_club ul li {
font-size: 16px;
line-height: 1.4;
}

dd.chm_club ul li:nth-child(1) {
top:10%;
left: 48%;
}

dd.chm_club ul li:nth-child(2) {
top:40%;
left:6%;
}

dd.chm_club ul li:nth-child(3) {
top:60%;
left: 38%;
}

dd.chm_club ul li:nth-child(4) {
top:80%;
left: 10%;
}
}

@media screen and (max-width:460px){
dd.chm_club {
height: 400px;
}

dd.chm_club ul li {
font-size: 14px;
line-height: 1.4;
}

dd.chm_club ul li:nth-child(1) {
top:5%;
left: 54%;
}

dd.chm_club ul li:nth-child(2) {
top:40%;
left:6%;
}

dd.chm_club ul li:nth-child(3) {
top:60%;
left: 44%;
}

dd.chm_club ul li:nth-child(4) {
top:80%;
left: 10%;
}
}