@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700&display=swap&subset=japanese');
/*------------------------------------
	CSS Information

	Site URL: about/point.html DDuetポイントの貯め方・使い方をご紹介！
	File name: point_v4.css (/excludes/css/p/about/point_v4.css)
	Summary:   point style (v4: テキスト化対応)
	Created: 2018-07-05 by DDuet Matsuda Kenji
	Last update: 2026-07-07 DDuet Iwai テキスト化・PC/SP統合対応
	Author: -

	Order of description
------------------------------------*/

/* ============================
   既存スタイル
   ============================ */

/* --- PC: アコーディオン非表示・パネル常時展開 --- */
.acc-checkbox,
.acc-trigger {
	display: none;
}
.acc-panel {
	max-height: none;
	overflow: visible;
}
.save_inn_box {
	padding: 0;
}
.save_inn {
	padding: 0;
	border: none;
}
.use_inn_box {
	padding: 0;
}

.contents{
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
	font-size: 18px;
	color:#333;
	line-height:1.6;
	text-align:left;
}
/*--------------
#mv
----------------*/
#mv {
    background: url(/excludes/images/p/about/point/mv_bk01.jpg) no-repeat center top;
}
#mv h2{
	width: 1108px;
	margin: 0px auto;
	padding: 10px 0px;
}
/*--------------
#main_conts
----------------*/
#main_conts {
	background: url(/excludes/images/p/about/point/bk01.png) repeat-y;
	margin: 0px auto;
}
#main_inn {
	width: 992px;
	margin: 0px auto;
	padding: 40px 0px;
}
#main_conts a:hover{
	opacity: 0.8;
}
/*--------------
#save_contents
----------------*/
#save_contents {
	padding: 20px 40px 20px;
	background-color: #fff;
	border-radius: 22px;
	border-right: 7px #ffc0cb solid;
	border-bottom: 7px #ffc0cb solid;
	border-left: 7px #ffc0cb solid;
	margin-top: -20px;
	overflow: hidden;
	margin-bottom: 50px;
}
#save_contents .save_txt01 {
    font-size:42px;
    text-align: center;
    letter-spacing:-1px;
    margin-bottom: 30px;
}
#save_contents .save_nav{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	padding: 0;
	list-style: none;
	margin-bottom: 30px;
}
#save_contents .save_nav li{
	display: block;
	width: calc(33.333% - 8px);
}
#save_contents .border_img {
	margin: 50px 0px;
}
#save_contents .bottom_item {
	padding-top: 15px;
}
#save_contents h4{
	margin-bottom: 40px;
}
#save_contents .box{
	overflow: hidden;
	margin: 20px 32px 50px 39px;
}
#save_contents .box01, #save_contents .box02 {
	overflow: hidden;
	margin: 20px 32px 50px 20px;
}
#save_contents .box03{
	text-align:center;
	margin: 40px auto;
}
#save_contents .box03 .txt{
	margin:30px auto;
}

#save_contents .box .b_left, #save_contents .box01 .b_left, 
#save_contents .box02 .b_left, #save_contents .box03 .b_left{
	float: left;
}
#save_contents .box .b_right, #save_contents .box01 .b_right, 
#save_contents .box02 .b_right, #save_contents .box03 .b_right{
	float: right;
}
#save_contents .box .b_left {
	width: 472px;
}
#save_contents .box .b_right {
	width: 355px;
}
#save_contents .box .b_right p {
	text-align: center;
}
#save_contents .box01 .b_left{
	width: 420px;
}
#save_contents .box02 .b_left{
	width: 410px;
}
#save_contents .box02 .b_left .btn{
	margin: 20px 0px;
}
#save_contents .box02 .b_right{
	width: 388px;
}
#save_contents .box03 .b_left{
	width: 400px;
}
#save_contents .box03 .txt_img{
	margin: 20px 0px;
}
#save_contents .box03 .b_left .txt{
	margin-bottom: 20px;
}
#save_contents .box03 .b_right{
	width: 388px;
}
#save_contents .box .b_left .btn01, #save_contents .box .b_left .btn02,
#save_contents .box .b_left .btn03, #save_contents .box01 .b_left .btn04, 
#save_contents .box02 .b_right .btn05, #save_contents .box03 .b_right .btn06{
	text-align: center;
}
#save_contents .box .b_left .btn01{
	margin-top: 100px;
}
#save_contents .box .b_left .btn02, #save_contents .box .b_left .btn03{
	margin-top: 60px;
}
#save_contents .box01 .b_left .btn04{
	margin-top: 45px;
}
#save_contents .box02 .b_left .btn05{
	margin-top: 30px;
}
#save_contents .box .b_left .btn06{
	margin-top: 160px;
	text-align: center;
}
#save_contents .box03 .b_right .btn06{
	margin: 30px 0px;
}
#save_contents .box .b_left .purple {
	color: #ff33ff;
}
#save_contents .box01 h3,#save_contents .box02 h3{
	margin-bottom: 30px;
}
#save_contents .box02 .img{
	margin: 39px auto;
	text-align:center;
}

/*--------------
#use_contents
----------------*/
#use_contents {
	padding: 20px 40px 20px;
	background-color: #fff;
	border-radius: 22px;
	border-right: 7px #ffcd92 solid;
	border-bottom: 7px #ffcd92 solid;
	border-left: 7px #ffcd92 solid;
	margin-top: -20px;
}

#use_contents .save_txt01, .use_link .save_txt01 {
    font-size:42px;
    text-align: center;
    letter-spacing:-1px;
    margin-bottom: 30px;
}
#use_contents .img01, .use_link .img01 {
	margin: 20px auto 30px;
	text-align: center;
}
#use_contents .img01 img{
	width:60%;
}
#use_contents .save_txt02, .use_link .save_txt02 {
	text-align: center;
}
#use_contents .border_img, .use_link .border_img {
	margin: 50px 0px;
}

#use_contents .use01 ul, #use_contents .use02 ul, .use_link .use02 {
	overflow: hidden;
	text-align: center;
}
#use_contents .use01 ul li, #use_contents .use02 ul li, .use_link .use02  ul li {
	display: inline-block;
	margin-right: 9px;
}
/* use_link ボタン群: 2列均等グリッド */
.use_link .use02 ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px 20px;
	padding: 0;
	list-style: none;
}
.use_link .use02 ul li {
	display: block;
	width: calc(50% - 10px);
	margin: 0;
}
.use_link .use02 ul li .link-btn {
	display: block;
	width: 100%;
	box-sizing: border-box;
}
.use_link {
	margin-top: 50px !important;
	padding: 20px 40px 20px;
	background-color: #fff;
	border-radius: 22px;
	border-top: 7px #ffc0cb solid;
	border-right: 7px #ffc0cb solid;
	border-bottom: 7px #ffc0cb solid;
	border-left: 7px #ffc0cb solid;
	margin-top: -20px;
}


/* ============================
   テキスト化スタイル（PC版）
   ============================ */

/* --- 貯め方ナビカード (.nav-card) --- */
#save_contents .nav-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    background: #fff;
    border: 3px solid #f94276;
    border-radius: 14px;
    padding: 0;
    text-align: center;
    text-decoration: none;
    color: #333;
    width: 100%;
    height: 100%;
    min-height: 130px;
    box-sizing: border-box;
    overflow: hidden;
}


/* 上半分：ピンク背景・白文字 */
#save_contents .nav-card .nav-card-title {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f94276;
    color: #fff;
    font-weight: 700;
    font-size: 26px;
    padding: 10px 8px;
    line-height: 1.3;
    margin-bottom: 0;
    min-height: calc(1.3em * 2);   /* ← 2行分の高さを確保 */
    box-sizing: content-box;
    text-align: center;
}


/* 下半分：白背景・ピンク文字 */
#save_contents .nav-card .nav-card-point {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    background: #fff;
    color: #f94276;
    font-weight: 700;
    font-size: 24px;
    padding: 12px 8px;
}

/* ▼マーク：通常時 */
#save_contents .nav-card .nav-card-point::after {
    content: '▼';
    display: block;
    font-size: 14px;
    color: #f94276;
    margin-top: 6px;
    line-height: 1;
    transition: transform 0.25s ease; /* ← アニメーション用 */
}

/* ホバー時：▼を少し下に移動 */
#save_contents .nav-card:hover .nav-card-point::after {
    transform: translateY(4px);
}

/* --- 貯め方見出しバナー (.save-heading) --- */
.save-heading {
	display: flex;
	align-items: center;
	background: linear-gradient(to right, #ff497c, #f94276);
	border-radius: 30px;
	padding: 12px 25px;
	color: #fff;
	font-weight: bold;
	font-size: 20px;
	line-height: 1.4;
	margin-bottom: 40px;
}
.save-heading .save-heading-num {
	display: inline-block;
	background: #fff;
	color: #e8457a;
	border-radius: 17px;
	padding: 3px 14px;
	font-size: 20px;
	margin-right: 15px;
	white-space: nowrap;
	flex-shrink: 0;
}
.save-heading .save-heading-title {
	flex: 1;
	font-size: 26px;
}
.save-heading .save-heading-point {
	display: flex;
	align-items: center;
	font-size: 28px;
	flex-shrink: 0;
	margin-left: 15px;
}
.save-heading .p-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 2px solid #fff;
	font-size: 18px;
	margin-right: 6px;
}
/* --- CTAボタン（オレンジ） (.cta-btn) --- */
.cta-btn {
    display: inline-block;
    background: linear-gradient(to bottom, #ffa53a 0%, #ff8a1e 50%, #f57814 100%);
    border-radius: 10px;
    padding: 14px 36px;
    color: #fff !important;
    font-size: 20px;
    /* font-weight: 700; */
    text-decoration: none;
    text-align: center;
    border: 3px solid #ff9433; 
    box-shadow:
        inset 0 0 0 2px #fff,                          
        inset 0 1px 0 rgba(255,255,255,0.5),
        0 4px 6px rgba(0,0,0,0.25);
    transition: all 0.3s;
    text-shadow: 1px 2px 2px #a85e00;
}
.cta-btn:hover {
    color: #fff5e0;
    box-shadow:
        inset 0 0 0 2px #fff,
        inset 0 1px 0 rgba(255,255,255,0.3),
        0 2px 3px rgba(0,0,0,0.2);
    opacity: 0.9;
}

/* --- コエタス小見出し --- */
#save_contents .save-sub-heading {
	font-size: 22px;
	color: #666;
	font-weight: bold;
	margin-bottom: 20px;
}
#save_contents .save-sub-heading-recipe,#save_contents .save-sub-heading-evaluation,#save_contents .save-sub-heading-idea {
	font-size: 26px;
	color: #666;
	font-weight: bold;
	margin-bottom: 20px;
}
#save_contents .save-sub-heading-evaluation{
	margin-bottom:8px !important;
}
#save_contents .save-sub-heading-recipe::before {
	content: '◎';
	color: #fa4f80;
	margin-right: 5px;
}
#save_contents .save-sub-heading-evaluation::before {
	content: '◎';
	color: #00b48f;
	margin-right: 5px;
}
#save_contents .save-sub-heading-idea::before {
	content: '◎';
	color: #ff651c;
	margin-right: 5px;
}
#save_contents .save-adoption-text {
	font-size: 32px;
	color: #ff497c;
	font-weight: bold;
	margin: 20px 0;
	text-align: center;
	text-decoration: underline;
	text-decoration-color: #fde950;
	text-decoration-thickness: 8px;
	text-underline-offset: 6px;
}

/* --- 使い方ヘッダー (.use-heading) --- */
.use-heading {
	display: flex;
	align-items: center;
	background: linear-gradient(to right, #ff497c, #f94276);
	border-radius: 30px;
	padding: 10px 25px;
	color: #fff;
	font-weight: bold;
	margin: 20px auto;
}
.use-heading .use-heading-num {
	display: inline-block;
	background: #fff;
	color: #e8457a;
	border-radius: 17px;
	padding: 3px 14px;
	font-size: 20px;
	margin-right: 15px;
	white-space: nowrap;
	flex-shrink: 0;
}
.use-heading .use-heading-title {
	font-size: 27px;
}

/* --- 使い方CTAボタン (use-cta-btn) --- */
.use-cta-btn {
    display: inline-block;
    background: linear-gradient(to bottom, #ffa53a 0%, #ff8a1e 50%, #f57814 100%);
    border-radius: 10px;
    padding: 16px 40px;
    color: #fff !important;
    font-size: 24px;
    /* font-weight: 700; */
    text-decoration: none;
    text-align: center;
    border: 3px solid #ff9433; 
    box-shadow:
        inset 0 0 0 2px #fff,
        inset 0 1px 0 rgba(255,255,255,0.5),
        0 4px 6px rgba(0,0,0,0.25);
    transition: all 0.3s;
    line-height: 1.4;
    text-shadow: 1px 2px 2px #a85e00;
}
.use-cta-btn:hover {
    color: #fff5e0;
    box-shadow:
        inset 0 0 0 2px #fff,
        inset 0 1px 0 rgba(255,255,255,0.3),
        0 2px 3px rgba(0,0,0,0.2);
    opacity: 0.9;
}
/* --- キャッチテキスト (.point-catch) --- */
.point-catch {
	font-size: 42px;
	font-weight: bold;
	color: #ff497c;
	text-align: center;
	margin: 30px 0;
	line-height: 1.6;
}
.point-catch .p-icon-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 3px solid #ffc0cb;
	font-size: 30px;
	margin-right: 10px;
	vertical-align: middle;
}

/* --- リンクボタン（ピンク） (.link-btn) --- */
.link-btn {
    display: inline-block;
    background: linear-gradient(to bottom, #ff7baa 0%, #ff6a9c 50%, #f04a82 100%);
    border-radius: 10px;
    padding: 14px 30px;
    color: #fff !important;
    font-size: 20px;
    /* font-weight: 700; */
    text-decoration: none;
    text-align: center;
    border: 3px solid #ff87b1;
    box-shadow:
        inset 0 0 0 2px #fff,                        
        inset 0 1px 0 rgba(255,255,255,0.5),
        0 4px 6px rgba(0,0,0,0.25);
    transition: all 0.3s;
    text-shadow: 1px 2px 2px #d13a70;
}
.link-btn:hover {
    color: #fff0f5;
    box-shadow:
        inset 0 0 0 2px #fff,
        inset 0 1px 0 rgba(255,255,255,0.3),
        0 2px 3px rgba(0,0,0,0.2);
    opacity: 0.9;
}

/* --- 使い方セクション共通クラス対応 --- */
#use_contents .use_txt01 {
	font-size: 42px;
	text-align: center;
	letter-spacing: -1px;
	margin-bottom: 30px;
}
#use_contents .use_txt02 {
	text-align: center;
}
#use_contents .use-detail {
	text-align: left;
	margin-left: 100px;
	margin-top: 30px;
	font-size: 23px;
}
#use_contents .use-detail-sub {
	font-size: 16px;
	display: inline-block;
	margin-top: 10px;
}

/* --- インラインスタイル移行クラス --- */
.txt-bold {
	font-weight: bold;
}
.txt-pink {
	color: #ff497c;
}
.link-dark {
	color: #333;
}