@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP');
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}

body {
	line-height:1;
	-webkit-text-size-adjust: none;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
	display:block;
}

ol, ul {
	list-style:none;
}

blockquote, q {
	quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}

a {
	margin:0;
	padding:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}

ins {
	background-color:#ff9;
	color:#000;
	text-decoration:none;
}

mark {
	background-color:#ff9;
	color:#000;
	font-style:italic;
	font-weight:bold;
}

del {
	text-decoration: line-through;
}

abbr[title], dfn[title] {
	border-bottom:1px dotted;
	cursor:help;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

hr {
	display:block;
	height:1px;
	border:0;
	border-top:1px solid #cccccc;
	margin:1em 0;
	padding:0;
}

input, select {
	vertical-align:middle;
}

img {
	vertical-align: top;
	width:100%;
	font-size:0;
	line-height: 0;
}

.clear {
	clear: both;
}

/* サイト共通
------------------------------------------------- */
body {
	font-size: 16px;
	font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",Helvetica,sans-serif;
	background-color: #fff;
	margin: 0;
	padding: 0;
	color: #0A142E;
	line-height: 1.5;
}
.base01{
	max-width: 640px;
	margin: auto;
	background:#fff;
}

a {
	color: #ee8812;
	text-decoration: none;
	outline: 0;
}
em {
	font-style: normal;
	font-weight: bold;
}
address {
	font-style: normal;
}
img {
	width:100%
}

#contentsArea{
	padding-bottom:80px;
}
.btn a{
	color: #fff;
}
.btn a .button_line{
	text-align: center;
	margin: 0 auto 20px auto;
	font-size: 15px;
	line-height: 17px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 12px 20px;
	gap: 10px;
	height: 42px;
	box-shadow: 4px 4px #0000000d;
	border-radius: 50px;
	width: 70%;
	background: #06c755;
}
.btn a .button_tel{
	text-align: center;
	margin: 0 auto 20px auto;
	font-size: 15px;
	line-height: 17px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 12px 20px;
	gap: 10px;
	height: 42px;
	box-shadow: 4px 4px #0000000d;
	border-radius: 50px;
	width: 70%;
	background: #e6326e;
}
.btn a .button_shop{
	text-align: center;
	margin:25px auto;
	font-size: 15px;
	line-height: 17px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 12px 20px;
	gap: 10px;
	height: 30px;
	box-shadow: 3px 3px #0000000d;
	width: 50%;
	background: #e6326e;
}
.btn a .mypage_number{
	text-align: center;
	margin: 0 auto 20px auto;
	font-size: 15px;
	line-height: 17px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 12px 20px;
	gap: 10px;
	height: 42px;
	box-shadow: 4px 4px #0000000d;
	border-radius: 50px;
	width: 70%;
	background: #5d94f8;
}
.menuArea {
	display:flex;
}
.menuArea li img{
	width:50%;
}
.menuArea td{
	padding:8px;
}
.campaignArea{
	background: #FED3DD;
	padding:40px 5%;
	position: relative;
	text-align: center;
}
.messageArea01{
	padding:50px 5%;
}

.titleArea{
	padding:20px 5% 0 5%;
	text-align: center;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight:bold;
	font-size;110%;
}
.txtArea{
	padding:20px 5%;
}
.boxArea01 {
    max-width: 400px;
    margin:10px auto 30px;
    border: 2px solid #e6b400;
    border-radius: 5px;
    color: #333333;
}

.boxArea01 div {
    display: inline-flex;
    align-items: center;
    column-gap: 4px;
    position: relative;
    top: -13px;
    left: 10px;
    margin: 0 7px;
    padding: 0 8px;
    background: #fff;
    color: #e6b400;
    font-weight: 600;
    vertical-align: top;
}

.boxArea01 div::before {
    width: 15px;
    height: 7.5px;
    border-bottom: 3px solid #e6b400;
    border-left: 3px solid #e6b400;
    transform: rotate(-45deg) translate(2px, -2px);
    content: '';
}

.boxArea01 p {
    margin: 0;
    padding: 0 1.5em 1em;
}
.campaignArea02{
	background: #A8D0FF;
	padding:40px 5%;
	position: relative;
	text-align: center;
}
.campaignArea04{
	background: #ffc4d8;
	padding:40px 5%;
	position: relative;
	text-align: center;
}
.campaignArea .btn{
	background: #fff;
	padding:40px 0 30px 0;
	border-radius:0 0 30px 30px;
}
.campaignArea03{
	background: #FFF7FA;
	padding:40px 5%;
	position: relative;
	text-align: center;
}
.campaignArea03 img{
	width:95%;
	padding-top:10px;
}
.campaignArea03 p{
	text-align: left;
	padding:30px 2%;
	color:#253C66;
	font-size:100%;
	line-height:170%;
}
.campaignArea03 .btn{
	padding:30px 0;
}
.campaignArea05{
	background: #FED3DD;
	padding:40px 5%;
	position: relative;
	text-align: center;
}
.pickupArea{
	background: #fff;
	padding:40px 0;
	position: relative;
	text-align: center;
}
.pickupArea .uranai{
	padding:5% 5% 12% 5%;
}
.scheduleArea .tl{
	padding:0 5%;
	text-align: center;
}
.counsellorArea .btn{
	background: #fff;
	padding:40px 0 30px 0;
	border-radius:0 0 30px 30px;
}
.counsellorArea .btn p.yoyaku_txt,
.flowArea02 .btn p.yoyaku_txt{
	color:#0A142E;
}
.counsellorArea .btn p.yoyaku_txt span,
.flowArea02 .btn p.yoyaku_txt span{
	font-weight:normal;
	font-size:13px;
}
.counsellorArea{
	background: #fff;
	padding: 0px 0 30px 0;
	border-radius: 0 0 30px 30px;
}
.flowArea02 .btn{
	background: #eef6ff;
	padding:40px 0 30px 0;
	border-radius:30px;
	margin:30px 5%;
}

table{
	margin:0 5%;
	 border-collapse:collapse;
}
td{
	width: 50%;
	padding:8px 8px 30px 8px;
}
td img{
  text-align:center;
  border-radius:20px;
}
td .name{
	margin-top:15px;
}
td .name div p{
	margin-bottom:5px;
}
td .catch{
	font-size:14px;
	padding:0 4px;
	text-align:left;
}
td .service{
	font-size:12px;
	padding:0 4px;
	color:#ff5586;
	text-align:left;
}

.flowArea {
    background: #fff1f5;
    padding: 40px 5%;
    position: relative;
    text-align: center;
}
.flowArea02 {
    background: #fff;
    position: relative;
    text-align: center;
}

.scheduleArea{
	padding:40px 0;
}
.scheduleArea p.txt{
	text-align: left;
	padding:30px 5% 10px 5%;
	color:#253C66;
	font-size:100%;
	line-height:170%;
}

.serviceArea {
 	text-align:center;
	padding: 40px 0;
}
.serviceArea img {
	width:80%;
}
.serviceArea div img{
	padding-top:40px;
	width:90%;

}
.counsellor{
	background:#fdf7f9;
	border-radius: 10px;
	margin:40px 5%;
	padding:20px;
}
.note{
	text-align:left;
	background: #fff;
	padding:15px 7% 0;
	font-size:85%;
}
.note td:nth-child(odd){
	width:20%;
	padding:5px 5px 5px 5px;
	font-size: 115%;
}
.note td:nth-child(even){
	width:80%;
	font-size: 115%;
}
.note td span{
	font-size:80%;
	padding-left:5px;
}
.note01{
	text-align:left;
	padding:15px 7% 0;
	font-size:95%;
	line-height:150%;
}
.note01 li{
	list-style-type: disc;
}
.item{
	display: flex;
}
.image img{
	border-radius: 10px;
	width: 80px;
}
.text{
	margin-left: 10px;
}
.name{
	font-size: 16px;
	letter-spacing: 2px;
	padding-bottom:8px;
}
.name div{
	font-size: 15px;
	color: #000;
	margin-right: 2px;
}
.name div span{
	font-weight:bold;
	font-size: 17px;
}
.name p{
	font-size: 9px;
	color: #000;
	line-height:12px;

}
.days div{
	margin-right:8px;
}
.icon_t{
	background:#ff5586;
	border-radius: 3px;
	color:#fff;
	font-size: 10px;
	display:inline-block;
	padding:7px;
	text-align:center;
	line-height:13px;
}
.icon_k{
	background:#ffff77;
	border-radius: 3px;
	color:#ff5586;
	font-size: 10px;
	display:inline-block;
	padding:7px;
	text-align:center;
	line-height:13px;
	border:1px solid #ff5586;
}
.days span{
	color:#ff5586;
	vertical-align:text-top;
}
.schedule{
	margin-top:5px;
	font-size:12px;
//*	background:#ffffcd; *//
	padding:5px;
	
}
.schedule span{
	font-weight:bold;
	font-size:14px;
}
.message{
	padding:10px 0;
	font-size:14px;
}
.divination div{
	background:#ed85ad;
	border-radius:50px;
	display:inline-block;
	padding:2px 8px;
	margin:0 8px 0 0;
	color:#fff;
	font-size:10px;
}
.type{
	margin-top:5px;
}
.type div{
	background:#fff;
	border:1px solid #ed85ad;
	border-radius:50px;
	display:inline-block;
	padding:2px 8px;
	margin:0 8px 0 0;
	color:#ed85ad;
	font-size:10px;
}
.noticeArea{
	padding:40px 0;
}
.accessArea{
	padding:20px 5%;
	text-align:center;
}
.accessArea .title{
font-size: 18px;
color: #1c1e1e;
display: flex;
justify-content: center;
align-items: center;
letter-spacing: 6px;
text-align: center;
font-size: 24px !important;
font-family: Granville;
margin-bottom: 20px;
}

.accessArea01 .title {
font-size: 18px;
color: #1c1e1e;
display: flex;
justify-content: center;
align-items: center;
letter-spacing: 6px;
text-align: center;
font-size: 24px !important;
font-family: Granville;
margin: 30px 0;
}

.title:before, .title:after {
content: "";
width: 10px;
height: 10px;
display: inline-block;
background: url(https://cocoloni.info/build/assets/point_spark-fc7e63f4.svg) no-repeat;
}

.title:before {
margin-right: 16px;
}
.title:after {
margin-left: 16px;
}
iframe {
  width: 100%;
  aspect-ratio: 16/9;
}

.accessArea02{
	padding:20px 5%;
	text-align:center;
	color:#253C66;
}



.shop_name{
	margin:20px 0;
	font-size:20px;
}
.shop_access,
.shop_address{
	margin-bottom:15px;
}


.l-footer .l-footer__top {
    width: 100%;
    border-top: 1px solid;
    -o-border-image: linear-gradient(116deg, #e8f3d1 0%, #fbf6e5 35.94%, #ffe0e4 77.08%) 1;
    border-image: linear-gradient(116deg, #e8f3d1 0%, #fbf6e5 35.94%, #ffe0e4 77.08%) 1;
    padding: 0 20px;
}
.l-footer .l-footer__top .l-footer__breadcrumb {
    width: 100%;
    max-width: 580px;
    height: 40px;
    margin: 0 auto;
    display: flex;
    align-items: center;
}
.l-footer .l-footer__top .l-footer__breadcrumb ul {
    display: flex;
    font-size: 12px;
}
.l-footer .l-footer__top .l-footer__breadcrumb ul li {
    color: #1f2121;
    display: flex;
    align-items: center;
}
.l-footer .l-footer__top .l-footer__breadcrumb ul li a {
    color: #1f2121;
    display: flex
;
    align-items: center;
}
.l-footer .l-footer__top .l-footer__breadcrumb ul li:first-of-type a:before {
    content: "";
    width: 16px;
    height: 16px;
    background-image: url(https://cocoloni.info/build/assets/icon_home-23077956.svg);
    background-repeat: no-repeat;
    margin-right: 8px;
}
.l-footer .l-footer__top .l-footer__breadcrumb ul li:after {
    content: "";
    width: 14px;
    height: 14px;
    background-image: url(https://cocoloni.info/build/assets/icon_chevron-right-9553dfac.svg);
    background-repeat: no-repeat;
    display: inline-block;
    margin: 0 8px;
}
.l-footer .l-footer__top .l-footer__breadcrumb ul li:last-of-type:after {
    display: none
}

.l-footer .l-footer__content {
    width: 100%;
    background: linear-gradient(116deg, #e8f3d1 0%, #fbf6E5 35.94%, #ffe0e4 77.08%);
    display: flex
;
    justify-content: center;
    align-items: center;
}
.l-footer .l-footer__content .l-footer__item {
    width: 100%;
    max-width: 580px;
    margin: 0 auto;
    text-align: center;
    background-image: url(https://cocoloni.info/build/assets/footer_logo-0e859724.svg);
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 40px;
    padding-bottom: 100px;
    position: relative;
}
.l-footer__sns {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 20px;
}
.l-footer__sns_item {
    margin-right: 20px;
}
.l-footer__related_site {
    padding-bottom: 30px;
    font-size: 12px;
}
.l-footer .l-footer__content .l-footer__item ul li {
    margin-bottom: 12px;
}
.l-footer .l-footer__content .l-footer__item ul li a {
    color: #1f2121;
    font-size: 12px;
}
.l-footer .l-footer__content .l-footer__item__copyright {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    width: 100%;
}
.l-footer .l-footer__content .l-footer__item__copyright small {
    font-size: 11px;
}
.yoyaku_txt{
	padding:10px 0 10px;
	color:#ff5586;
	font-weight:bold;
	font-size:16px;
}
.yoyaku_txt02{
	padding:20px 0 0;
	color:#ff5586;
	font-weight:bold;
	font-size:16px;
	text-align:center;
	margin:0;
}
.membership_registration_link {
    width: 100%;
    height: 80px;
    background-color: #e6326e;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: flex
;
    align-items: center;
    justify-content: center;
}


    .membership_registration_link_sp img {
        display: block;
        width: 340px;
        height: 65px
    }
.accessArea01{
	padding:20px 5%;
}


.shop_name_list{
    padding: .5em .7em;
    border-left: 8px solid #e6326e;
    color: #333333;
    margin:30px 0 5px 0;
}
.shop_tel a{
	color:#0A142E;
}
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; 
  height: 0;
  overflow: hidden;
  max-width: 100%;
  background: #000;
  margin:0 20px 50px 20px;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* まるわかり運勢
------------------------------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #fff;
}

/* ヘッダー全体の土台 */
.hero-header {
    position: relative;
    width: 100%;
    min-height: 600px;
    background-color: #ffe8ef; /* 土台のピンク */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding:0 0 40px 0;
}

/* Layer 1: 背景画像の設定（中央固定・最大幅制限） */
.bg-pattern-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
}

.bg-pattern-layer img {
    width: 100%;
    max-width: 1000px; /* 背景画像の最大幅（PCでの伸び防止） */
    height: 100%;
    object-fit: cover;
    mix-blend-mode: multiply; /* 下のピンクと混ぜる */
}

/* コンテンツを中央に収める箱 */
.header-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1000px; /* コンテンツの最大幅 */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Layer 2: メインテキスト */
.main-text-container {
    position: relative;
    z-index: 10;
    width: 90%;
    max-width: 500px;
    margin-bottom: -40px; /* スライダーと少し重ねる */
}

.main-text-img {
    width: 100%;
    height: auto;
}

/* Layer 3: 横スライダー */
.card-slider-area {
  width: 100%;
  overflow: hidden; /* はみ出しを隠す */
  position: relative;
  margin-top:70px;
}

.slider-inner {
  display: flex;
  width: fit-content;
  /* アニメーションの時間を少し長め（30s〜）にすると滑らかです */
  animation: scroll-seamless 30s linear infinite;
}

.slider-unit {
  display: flex;
}

.karte-item {
  width: 230px; /* 画像の幅 */
  margin: 0 10px;
  flex-shrink: 0; /* 画像が潰れないように固定 */
}

/* Layer 4: 円形ロゴ */
.top-logo-badge {
    position: absolute;
    z-index: 20;
    right: 5%;   /* header-innerの右端からの距離 */
    bottom: 20%; /* 位置を調整 */
    width: 150px;
animation: float 3s ease-in-out infinite; /* おまけ：少し浮かせると可愛い */
}

.top-logo-badge img {
    width: 100%;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.1));
}

/* PC用の微調整 */
@media (min-width: 768px) {
    .hero-header {
        min-height: 700px;
    }
    .top-logo-badge {
        width: 180px;
        right: 0; /* PCでは中央寄せの箱の右端に固定 */
    }
}

/* アニメーション */
/* ★シームレスなループの鍵 */
@keyframes scroll-seamless {
  0% {
    transform: translateX(0);
  }
  100% {
    /* 3セットあるうちの1セット分だけ左にずらす */
    transform: translateX(-33.3333%); 
  }
}
/* ふわふわ浮くアニメーション */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.present-section {
  position: relative;
  z-index: 30; /* ヘッダーのどの要素よりも上にくるように設定 */
  background-color: #ffe8ef;
  /* ★重要：ヘッダーに食い込ませる設定 */
  margin-top: -60px; 
  padding: 0 20px 60px;
}

.present-container {
  max-width: 600px; /* カードが広がりすぎないように制限 */
  margin: 0 auto;
}

/* 白いカード本体 */
.present-card {
  background-color: #fff;
  border-radius: 30px; /* 大きめの角丸 */
  padding: 40px 30px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  text-align: left; /* テキストは左揃え */
}

/* 🎁 Present 部分 */
.card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.gift-icon { font-size: 20px; }
.gift-icon  img{width:22px;}
.present-label {
  font-weight: bold;
  font-size: 18px;
  color: #333;
}

/* タイトル */
.present-title {
  color: #ff4d8d; /* ピンク色 */
  font-size: 26px;
  font-weight: bold;
  margin-bottom: 25px;
}

/* 説明文 */
.present-text {
  font-size: 16px;
  line-height: 1.8;
  color: #444;
  margin-bottom: 30px;
}

/* カード内の画像 */
.present-image img {
  width: 100%;
  height: auto;
  border-radius: 20px; /* 画像も角丸に */
  display: block;
}

/* 予約ボタンエリア */
.reserve-btn-area {
  margin-top: 40px;
  text-align: center;
}

.btn-reserve {
  display: inline-block;
  background-color: #00c35a; /* 鮮やかなグリーン */
  color: #fff;
  padding: 18px 60px;
  border-radius: 50px;
  text-decoration: none;
  font-size: 18px;
  transition: transform 0.2s, background-color 0.2s;
}

.btn-reserve:hover {
  transform: translateY(-3px);
  background-color: #00ac4f;
}

.menu-section {
  background-color: #fff;
  padding: 60px 20px;
  text-align: center;
}

.menu-container {
  max-width: 600px; /* 前のセクションと幅を合わせる */
  margin: 0 auto;
}


.menu-title {
  font-size: 24px;
  margin:0 0 25px 0;
  text-align:left;
}

.clock-icon img{width:28px;}

/* 料金ボックス全体 */
.price-box {
  background-color: #fff0f5; /* 薄いピンク */
  border-radius: 20px;
  padding: 30px 20px;
  margin-bottom: 30px;
}

.time-info {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}

.price-columns {
  display: flex;
  gap: 15px;
}

.price-item {
  background: #fff;
  flex: 1;
  padding: 20px 10px;
  border-radius: 15px;
  position: relative;
}

/* 会員バッジ */
.price-item.member .badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #ff4d8d;
  color: #fff;
  font-size: 11px;
  padding: 2px 10px;
  border-radius: 5px;
  white-space: nowrap;
}

.price-item .label {
  font-size: 14px;
  margin-bottom: 5px;
}

.price-item .amount {
  font-size: 24px;
  font-weight: bold;
  color: #ff4d8d;
}
.price-item.visitor .amount {
  color: #ff85ab; /* 非会員は少し色を変える */
}
.price-item .amount01 {
  font-size: 24px;
  font-weight: bold;
}
.price-item .amount span,
.price-item .amount01 span { font-size: 16px; }
.price-item .amount small,
.price-item .amount01 small { font-size: 10px; color: #666; }
.member .label01 {  color: #ff4d8d;font-weight: bold;}



/* タグエリア */
.method-area {
  margin-bottom: 30px;
  text-align: left;
}
.method-tag {
  display: inline-block;
  border: 1px solid #ff4d8d;
  padding: 5px 15px;
  border-radius: 20px;
  margin: 5px 2px;
  font-size: 14px;
}
.method-text { font-size: 14px; margin-left: 5px; }
.method-note {
  font-size: 12px;
  color: #666;
  line-height: 1.6;
  margin-top: 15px;
}

/* スマホ対応：料金を縦に並べる */
@media (max-width: 360px) {
  .price-columns {
    flex-direction: column;
  }
}

.point-section {
  background-color: #ffe8ef; /* 他のセクションと共通の薄ピンク */
  padding:0 20px  60px 20px;

}

/* 上部の写真は画面端まで広げる */
.point-image {
  width: 100%;
  text-align: center; /* 画像を中央に寄せる */
  background-color: #ffe8ef; /* 背景色がある場合はここにも指定しておくと隙間が埋まります */
}

.point-image img {
  width: 100%;       /* スマホでは横幅いっぱい */
  height: auto;
  display: block;
  margin: 0 auto;    /* 中央配置 */
  
  /* ★ここが重要：PCでの最大サイズを制限する */
  max-width: 600px;  /* ここを 500px や 700px など、お好みの大きさに調整してください */
}

/* もしPC（例えば768px以上）の時だけ制限をかけたい場合 */
@media (min-width: 768px) {
  .point-image img {
    max-width: 600px; /* PCでの表示サイズをさらに絞る場合はこちら */
  }
}

/* 上部の写真は画面端まで広げる */
.point-image01 {
  width: 100%;
  text-align: center; /* 画像を中央に寄せる */
}

.point-image01 img {
  width: 100%;       /* スマホでは横幅いっぱい */
  height: auto;
  display: block;
  margin: 0 auto;    /* 中央配置 */
  
  /* ★ここが重要：PCでの最大サイズを制限する */
  max-width: 600px;  /* ここを 500px や 700px など、お好みの大きさに調整してください */
}

/* もしPC（例えば768px以上）の時だけ制限をかけたい場合 */
@media (min-width: 768px) {
  .point-image01 img {
    max-width: 600px; /* PCでの表示サイズをさらに絞る場合はこちら */
  }
}

.point-container {
  max-width: 600px; /* 内容を中央に寄せて読みやすくする */
  margin: 0 auto;
  padding: 40px 0px;
  text-align: center;
}




.point-icon img {
  width: 18px;           /* アイコンのサイズ（適宜調整） */
  height: auto;
  margin-right: 6px;     /* アイコンとPointの間の隙間 */
}

.point-label,
.profile-label {
  font-weight: bold;
  font-size: 18px;
  color: #333;
}

.point-title {
  display: block;        /* タイトルは必ず次の行に送る */
  font-size: 24px;
  color: #ff4d8d;
  font-weight: bold;
  text-align:left;
  margin-bottom:25px;
}
.point-description {
  text-align: left; /* 長い文章は左揃えが読みやすい */
  font-size: 15px;
  line-height: 1.8;
  color: #444;
  margin-bottom: 30px;
}

/* リストアイテムの装飾 */
.check-list {
  list-style: none;
  padding: 0;
  margin-bottom: 40px;
}

.check-list li {
  background-color: #fff;
  margin-bottom: 12px;
  padding: 15px 20px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 15px;
  color: #333;
  box-shadow: 0 4px 10px rgba(0,0,0,0.03);
  text-align: left;
}

.list-icon {
  margin-right: 15px;
  font-size: 18px;
}





.profile-section {
  padding: 60px 20px;
  background-color: #fff;

}

.profile-container {
  max-width: 600px;
  margin: 0 auto;
}


.profile-title {
  color: #ff4d8d;
  font-size: 26px;
  margin-bottom: 15px;
}

.profile-note {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  padding-bottom:30px;
}

/* PCでのカードの並びと幅を制限 */
.staff-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列 */
  gap: 40px 30px; /* 縦の隙間を少し広げるとゆとりが出ます */
  
  /* ★追加：グリッド全体の最大幅を制限して中央に寄せる */
  max-width: 600px; 
  margin: 0 auto;
}

/* カード内の写真のサイズを制御 */
.staff-photo {
  width: 100%;
  max-width: 280px; /* ★写真の最大サイズを制限 */
  margin: 0 auto 15px; /* 中央に寄せて下に余白 */
}

.staff-photo img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 15px;
  display: block;
}
/* スマホ（幅が狭い時）の調整 */

@media (max-width: 500px) {
  .staff-grid {
    grid-template-columns: repeat(2, 1fr); /* スマホでも2列にする場合はこちら */
    gap: 20px 10px;
  }
  
  .staff-photo {
    max-width: 100%; /* スマホではカード幅いっぱいに広げる */
  }

  .staff-name {
    font-size: 16px; /* スマホでは名前を少し小さく */
  }
}
@media (max-width: 380px) {
  .staff-grid {
    grid-template-columns: 1fr; /* スマホでは1列（または好みに応じて2列） */
  }
}
/* カードデザイン */
.staff-card {
  text-align: center;
}

.staff-photo img {
  width: 100%;
  border-radius: 15px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin-bottom: 15px;
}

.staff-name {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 2px;
}

.staff-name small {
  display: block;
  font-size: 11px;
  font-weight: normal;
  color: #666;
  margin-top: 2px;
}

/* 占術タグ */
.staff-method {
  display: inline-block;
  border: 1px solid #ff4d8d;
  color: #333;
  padding: 3px 15px;
  border-radius: 20px;
  font-size: 13px;
  margin: 10px 0;
}

.note02 {
  font-size: 11px;
  color: #666;
  margin-bottom: 5px;
}

/* 店舗バッジ */
.staff-shops {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-bottom: 15px;
}

.shop-badge {
  font-size: 12px;
  color: #fff;
  padding: 3px 12px;
  border-radius: 20px;
}

.shop-badge.blue { background-color: #4392d8; }
.shop-badge.pink { background-color: #e63e7b; }
.shop-badge.red { background-color: #ff5e5e; }

/* プロフィールリンク */
.profile-link {
  display: inline-block;
  color: #ff4d8d;
  text-decoration: none;
  font-size: 14px;
  transition: opacity 0.2s;
}

.profile-link:hover {
  opacity: 0.6;
}

/* 立川2周年 */
.hero-header {
  background:#E6326E;
  padding: 40px 20px 25px 20px;
  text-align: center;
  color: #fff;
}

.header-inner {
  max-width: 500px; /* スマホ向けに横幅を制限 */
  margin: 0 auto;
}
.main-logo img {
  width: 100%;
  height: auto;
  padding-bottom:40px;
}
.feature-banner img, .roulette-banner img {
  width: 100%;
}
.infinite-slider-section {
  width: 100%;
  background: #E6326E; /* 背景のピンク */
  padding: 10px 0 30px 0;
}
.slider-container {
  width: 100%; /* 親要素いっぱいに広げておく */
  max-width: 600px; /* デザインに合わせた横幅（スマホなら100%でもOK） */
  margin: 0 auto;   /* 中央寄せ */
  overflow: hidden; /* 窓からはみ出した画像を見えなくする */
}
.slider-wrapper {
  display: flex;
  width: max-content;
}

.slider-list {
  display: flex;
  list-style: none;
  padding: 0;
 margin: 0;
 animation: loop-animation 20s linear infinite;
}

.slider-list li {
  width: 75px; /* 画像1枚の幅 */
  margin: 0 2px;
  overflow: hidden;
  flex-shrink: 0; /* 幅を縮ませない */
  transform: skewX(-15deg); /* 斜めの切り口を再現 */
}

.slider-list li img {
  width: 150%; /* 斜めにする分、少し大きめに配置して調整 */
  height: auto;
  margin-left: -25%; /* 中央寄せ調整 */
  transform: skewX(15deg); /* 画像自体は斜めにならないよう打ち消す */
  display: block;
}

/* 左へスライドするアニメーション */
@keyframes loop-animation {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); } 
}

.message-section {
  padding:50px 20px 40px 20px;
  background-color: #fff; /* 背景は白 */
}

.message-inner {
  max-width: 600px; /* スマートフォンで見やすい幅に制限 */
  margin: 0 auto;
}

.message-title {
  color: #E63D7A; /* メインのピンク色 */
  font-size: 1.4rem;
  line-height: 1.3;
  font-weight: 500;
  margin-bottom: 30px;
  text-align: center;
}

.message-title span {
  display: block;
  margin-top: 5px;
}

.message-body {
  font-size: 0.95rem;
  line-height: 1.5; /* 行間を広めに取って読みやすく */
  color: #333;
  word-break: append-all; /* 日本語の改行を自然に */
}

.message-body p {
  margin-bottom: 2em; /* 段落ごとの余白 */
}

/* 最後の段落だけ余白を調整 */
.message-body p:last-child {
  margin-bottom: 0;
}


.conversion-buttons {
  max-width: 500px;
  margin: 30px auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column; /* 縦に並べる */
  gap: 15px; /* ボタン同士の間隔 */
}

/* 共通スタイル */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  border-radius: 50px; /* カプセル型 */
  color: #fff;
  text-decoration: none;
  font-size: 1.1rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: opacity 0.3s;
}

.btn:hover {
  opacity: 0.8;
}

/* 個別カラー */
.btn-line {
  background-color: #00B900; /* LINEグリーン */
}

.btn-tel {
  background-color: #E63D7A; /* キャンペーンピンク */
}

.btn-member {
  background-color: #5D90F5; /* 会員ブルー */
}

.hand-reading-section {
  padding: 40px 20px;
  background-color: #fff;
  text-align: center;
}
.feature-text{
	text-align:left;
	margin-bottom:20px;
}


/* タグリスト */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin-top: 15px;
}

.tag-list li {
  border: 1px solid #E63D7A;
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 0.85rem;
}

.can-know-title, .benefit-headline {
  font-size: 1.1rem;
  font-weight: bold;
  color: #E63D7A; /* まるわかり手相用 */
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* 文字と線の間の距離 */
}

/* ルーレットセクション内（背景ピンク）の場合は文字を白くする */
.roulette-section .benefit-headline {
  color: #E63D7A;
}

/* 左側の斜め線 ＼ */
.can-know-title::before, .benefit-headline::before {
  content: "";
  width: 20px;
  height: 1px;
  background-color: currentColor; /* 文字色と同じ色にする */
  transform: rotate(45deg); /* 45度傾ける */
}

/* 右側の斜め線 ／ */
.can-know-title::after, .benefit-headline::after {
  content: "";
  width: 20px;
  height: 1px;
  background-color: currentColor;
  transform: rotate(-45deg); /* 逆方向に傾ける */
}


/* さらに！ の区切り線 */
.divider {
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 40px 0 20px 0;
  color: #E63D7A;
  font-weight: bold;
}

.divider::before,
.divider::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background: #E63D7A; /* 薄いピンクの線 */
  max-width: 230px;
  margin: 0 15px;
}

/* SNS投稿特典 */
.sns-campaign {
  padding: 0 20px 40px;
  text-align: center;
}

.sns-title {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #333;
}

.sns-title span {
  color: #3283E6; /* 青色 */
}

.sns-title .highlight {
  color: #E63D7A;
  font-weight: bold;
  font-size: 1.3rem;
}
.sns-note{
	margin-top:20px;
}

.roulette-section {
  background-color: #fff; /* セクション全体は白 */
  padding: 60px 20px;
  text-align: center;
  color: #333;
}

/* タイトル部分 */
.roulette-main-title {
  font-size: 1.6rem;
  margin-bottom: 30px;
  letter-spacing: 0.1em;
}

.icon-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: bold;
}

.icon-label::before {
  content: "🏮"; /* 画像のアイコンに合わせて調整してください */
}

/* ピンクのカードボックス */
.roulette-card-box {
  background-color: #FFF0F5; /* 薄いピンク背景 */
  border-radius: 20px;
  padding: 40px 20px 30px;
  max-width: 500px;
  margin: 0 auto 30px;
  position: relative;
  border: none; /* 枠線なし */
}

.card-badge-top {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #E63D7A;
  color: #fff;
  padding: 5px 25px;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: bold;
  white-space: nowrap;
}

/* 吹き出しの三角 */
.card-badge-top::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #E63D7A;
}

.card-inner {
  background-color: #fff; /* 中の文字エリアは白 */
  border-radius: 15px;
  padding: 30px 10px;
}

.card-main-text {
  color: #E63D7A;
  font-size: 2.4rem;
  font-weight: bold;
}

.card-main-text .small-text {
  font-size: 1rem;
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}

.pink-bold {
  color: #E63D7A;
  font-weight: bold;
}
.roulette-description p.txt{
	text-align:left;
	margin: 20px auto;
	max-width: 500px;
}
/* 注意事項 */
.notes {
  text-align: left;
  font-size: 0.75rem;
  color: #888;
  max-width: 500px;
  margin: 20px auto;
  line-height: 1.6;
}

.pink-link {
  color: #E63D7A;
}

/* 特典リスト（白背景に枠線） */
.benefit-list {
  list-style: none;
  padding: 0;
  max-width: 450px;
  margin: 20px auto;
}

.benefit-list li {
  border: 1px solid #FFE4E1; /* 薄いピンクの枠線 */
  background: #fff;
  margin-bottom: 10px;
  padding: 15px;
  border-radius: 10px;
  text-align: left;
  font-weight: bold;
  color: #333;
  display: flex;
  align-items: center;
}

.benefit-list li::before {
  content: "◆";
  color: #E63D7A;
  margin-right: 15px;
}

.footer-catch {
  font-weight: bold;
  margin-top: 20px;
}


.staff-section {
  padding: 40px 15px;
  background-color: #fff;
  text-align: center;
}

.staff-main-title {
  color: #E63D7A;
  font-size: 1.5rem;
  margin: 10px 0;
}

/* 占い師一覧のグリッド設定 */
.staff-grid01 {
  display: grid; /* これが必須 */
  /* 1fr（同じ幅）を2つ並べる設定 */
  grid-template-columns: 1fr 1fr; 
  /* もしくは repeat(2, 1fr); */
  
  gap: 20px 10px; /* カード同士の隙間 */
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}
.staff-card {
  width: 100%; /* 固定幅（px）を指定していると、入り切らずに縦に並ぶことがあります */
  text-align: center;
}
/* 画像エリア（バッジを重ねるための親要素） */
.staff-image-wrap {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}

.staff-image-wrap img {
  width: 100%;
  display: block;
}

/* まるわかり手相対応アイコン（画像に重ねる） */
.teso-icon {
  position: absolute;
  bottom: 12px;
  left: 12px;
  width: 40px;
  height: 40px;
  background: url('../img/tesou_icon.png') no-repeat center center; /* 手の形のアイコン画像 */
  background-size: contain;
}

/* 名前とルビ */
.staff-name {
  font-size: 1rem;
  color: #333;
  margin-bottom: 5px;
}

.staff-name .ruby {
  display: block;
  font-size: 0.65rem;
  color: #888;
  font-weight: normal;
}

/* スケジュール部分 */
.schedule {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin-bottom: 10px;
}

.schedule span.date {
  font-size: 0.75rem;
  border: 1px solid #E63D7A;
  padding: 2px 10px;
  border-radius: 100px;
  font-weight:normal;
}


/* 紹介文 */
.staff-comment {
  font-size: 0.85rem;
  line-height: 1.5;
  text-align: left;
  color: #666;
  margin-bottom: 8px;
  /* 3行以上は省略する場合の指定（任意）
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical; */
  overflow: hidden;
}

.profile-link {
  font-size: 0.8rem;
  color: #E63D7A;
  text-decoration: none;
}
.staff-intro{
	text-align:left;
}
/* 凡例全体のコンテナ */
.teso-legend {
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 10px;
  margin: 20px 0;
}

/* 手のアイコン */
.icon-hand {
  width: 40px; /* 画像のサイズに合わせて調整 */
  height: auto;
}

/* ピンクの吹き出し */
.teso-balloon {
  position: relative;
  background-color: #E63D7A; /* 濃いピンク */
  color: #fff;
  font-size: 0.85rem;
  font-weight: bold;
  padding: 8px 15px;
  border-radius: 20px; /* カプセル型 */
  display: inline-block;
}

/* 吹き出しのしっぽ（左側の三角形） */
.teso-balloon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -8px; /* 吹き出しの左側に配置 */
  transform: translateY(-50%);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 10px solid #E63D7A; /* 吹き出しと同じ色 */
}

/* 占い師紹介の見出し横のピンクの丸（参考） */
.profile-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: bold;
}

.dot-icon {
  width: 14px;
  height: 14px;
  background-color: #FFC0CB; /* 薄いピンク */
  border-radius: 50%;
  display: inline-block;
}