@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Kaisei+Opti&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kaisei+Opti&family=Ruluko&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New&display=swap');
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPGothic&display=swap');


/* 全体の設定
================================================== */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
    margin:0;
    padding:0;
}
address,caption,cite,code,dfn,em,strong,th,var{
    font-style:normal;
}
ul{
    list-style:none;
}
table{
    border-collapse:collapse;
    border-spacing:0;
}
caption,th{
    text-align:left;
}
q:before,q:after{
    content:'';
}
object,embed{
    vertical-align:top;
}
legend{
    display:none;
}
h1,h2,h3,h4,h5,h6{
    font-size:100%;
}
img,abbr,acronym,fieldset{
    border:0;
}
body{
	font: 14px/1.9 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;
	font-weight: 300;
	-webkit-text-size-adjust:100%;
	overflow-x: hidden;
	color: #000;
}
a{
	text-decoration: none;
}
a:hover, .active{
	text-decoration: none;
}
a:active, a:focus,input:active, input:focus{
	outline:0;
}


/* 共通の設定
================================================== */

img{
	max-width: 100%;
	height: auto;
}

section{
	clear:both;
}

.margin_bottom_20 {
  margin-bottom: 20px;
}

.margin_bottom_30 {
  margin-bottom: 30px;
}

.margin_bottom_50 {
  margin-bottom: 50px;
}

.margin_bottom_80 {
  margin-bottom: 80px;
}

.margin_bottom_100 {
  margin-bottom: 100px;
}

.margin_bottom_200 {
  margin-bottom: 200px;
}


/* PCのみの設定
================================================== */

@media only screen and (min-width: 800px){
a#menu{
	display:none;
}	

.guide{
	display:block !important;
}

#mainnav li{
	display: inline-block;
	padding: 50px 25px;
	font-size: 15px;
}
}

/* 背景画像切り替え
================================================== */
#bg {
    max-width: 700px;
    width: 100%;
    background: #f9f8f6;
    margin: 0 auto;
}
.one {
    align-items: center;
    width: 95%;
    min-height: auto;
    padding: 20px;
}
.bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: all 0.5s ease 0s;
    z-index: -1;
}
.show .bg {
    opacity: 1;
}
.bg._01 {
    background-image: url("../image/bg_1.jpg");
}
.bg._02 {
    background-image: url("../image/bg_2.jpg");
}
.bg._03 {
    background-image: url("../image/bg_3.jpg");
}
.bg._04 {
    background-image: url("../image/bg_4.jpg");
}
.bg._05 {
    background-image: url("../image/bg_5.jpg");
}
.bg._06 {
    background-image: url("../image/bg_6.jpg");
}
.bg._07 {
    background-image: url("../image/bg_7.jpg");
}
.bg._08 {
    background-image: url("../image/bg_8.jpg");
}


/* ヒーローエリア
================================================== */
.main img{
    max-width: 700px;
    width: 100%;
    margin: -100px auto 0;
}
.gift img{
    max-width: 670px;
    width: 95%;
    margin: -60px auto 0;
}
.message{
    padding: 0;
    margin: 0 auto;
	text-align: center;
}
.message h1{
	margin: 0 auto;
    font-family: "Kaisei Opti", serif;
	font-size: 2rem;
	font-weight: 400;
	font-style: normal;
}
.message h2{
	width: 60%;
	margin: 0 auto 40px;
    font-family: "Ruluko", serif;
	font-size: 1.5rem;
	font-weight: 400;
	font-style: normal;
	background: url(../image/border.png) repeat-x 0 50%;
	background-size: 1px 1px;
}
.message h2 span {
	background: #f9f8f6;
	padding: 0 80px;
}
.message p{
	margin: 0 auto;
    line-height: 30px;
	text-align: center;
}


/* 母の日のイメージ写真
================================================== */
#mother{
    max-width: 700px;
	padding: 0;
}
#mother ul{
    width: 90%;
    margin: 0 auto;
}
#mother_photo li{
	float: left;
	width: calc(100%/3);
	line-height: 0;
}
#mother_photo img{
	width: 100%;
}


/* アイテム共通
================================================== */
#mother_item{
    width: 100%;
    margin: -80px auto;
    padding: 0;
    text-align: left;
}
#mother_item .main_img{
    width: 95%;
    margin: -50px auto 0;
}
#mother_message{
	width: 100%;
}

/* アニメーション
================================================== */

.box{
    opacity: 0;
}
.fadeUp {
    animation-name:fadeUpAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
}
  to {
    opacity: 1;
    transform: translateY(0);
}
}


/* 陳列 3カラム
================================================== */

#category_3{
	margin-bottom:0;
}
#category_3 ul{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
    max-width: 670px;
	width: 95%;
	margin:0 auto;
}
#category_3 li{
  width: 30%;
  height: 300px;
  margin: 0 0 30px;
  list-style: none;
}
#category_3 ul::before,
#category_3 ul::after {
  content: "";
  display: block;
  width: 30%;
  height: 0; 
}
#category_3 ul:before {
  order:1;
}
#category_3 .item_name{
    margin-top: 20px;
    font-size: 0.8rem;
}
#category_3 .price{
    font-size: 0.9rem;
    letter-spacing: 1px;
}


/* 陳列 4カラム
================================================== */

#category_4{
	margin-bottom:0;
}
#category_4 ul{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
    max-width: 670px;
	width: 95%;
	margin:0 auto;
}
#category_4 li{
  width: 22%;
  height: 250px;
  margin: 0 0 30px;
  list-style: none;
}
#category_4 ul::before,
#category_4 ul::after {
  content: "";
  display: block;
  width: 22%;
  height: 0; 
}
#category_4 ul:before {
  order:1;
}
#category_4 .item_name{
    margin-top: 20px;
    font-size: 0.7rem;
}
#category_4 .price{
    font-size: 0.8rem;
    letter-spacing: 1px;
}
#category_4 .price span{
    font-size: 0.7rem;
}


/* ボタン
================================================== */
.button-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 300px;
    margin: 0 auto;
    padding: .9em 3em .9em 2em;
    border: 1px solid #461111;
    border-radius: 5px;
    background-color: #fff;
    color: #461111;
    font-size: 1em;
}
.button-1::after {
    position: absolute;
    right: 2em;
    transform: translateY(-50%);
    transform-origin: left;
    width: 2em;
    height: .5em;
    background-color: #461111;
    clip-path: polygon(0 100%, 100% 100%, 70% 40%, 70% 90%, 0% 90%);
    content: '';
    transition: transform .3s;
}
.button-1:hover::after {
    transform: translateY(-50%) scaleX(1.4);
}
.button-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 300px;
    margin:0 auto;
    padding: .9em 2em;
    overflow: hidden;
    border: 1px solid #461111;
    border-radius: 5px;
    background-color: #461111;
    color: #fff;
    font-size: 1em;
}
.button-2:hover {
    background-color: transparent;
    color: #461111;
}
.button-2::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 0;
    height: 100%;
    background-color: #fff;
    content: '';
    transition: width .3s ease;
}
.button-2:hover::before {
    width: 100%;
}
.button-2::after {
    transform: rotate(45deg);
    width: 5px;
    height: 5px;
    margin-left: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    content: '';
}
.button-2:hover::after {
    border-color: #461111;
}


/* 金額別アイテム
================================================== */
.amount{
    max-width: 700px;
    text-align: center;
    margin: 0 auto;
    padding: 0;
}
.amount h2{
    color: #000;
    font-family: "Noto Serif JP", serif;
    font-weight: 700;
    font-style: normal;
	font-size: 2rem;
}
.amount span {
    background: linear-gradient(transparent 70%, #ffbebe 70%);
}
.amount h3{
    font-family: "Zen Kaku Gothic New", serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1rem;
    color: #000;
    padding-top: 50px;
}
#amount-qa{
    width: 80%;
    margin: 0 auto;
    padding-top: 50px;
    text-align: left;
}
.list-1 {
    list-style-type: disc;
    padding: 1em 1em 1em 2.5em;
    background: #eeeeee;
}
.list-1 li {
    padding: .3em .3em .3em 0;
    color: #333;
}
.list-1 li::marker {
    color: #333;
    font-size: 1.1em;
}


/* 金額用ボタン
================================================== */
#price-box ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
    width: 90%;
    margin: 0 auto;
}
#price-box li {
	display:block;
    width: 33%;
	height:50px;
    font-size: 1rem;
	line-height: 50px;
	background-color:#c5a059;
	border-radius: 5px;
	transition:0.3s;
    margin-bottom:10px; 
}
#price-box ul li:hover {
	opacity:0.7;
}
#price-box a {
	color: #fff;
	font-family: "BIZ UDPGothic", serif;
	font-weight: 400;
	font-style: normal;
    font-size: 0.8rem;
}


/* 陳列 1カラム（金額別おすすめ用）
================================================== */
.scene-featured {
    margin-top: 100px;
    padding: 60px 20px 0;
    border-top: 1px solid #eee;
}
.scene-detail-row {
    display: flex;
    width: 90%;
    align-items: center;
    gap: 30px;
    margin: 0 auto 120px;
}
.scene-detail-row.reverse {
    flex-direction: row-reverse;
}
.scene-visual {
    flex: 1.5;
}
.scene-visual .img-place {
    background-color: #f4f4f4;
    border-radius: 4px;
    position: relative;
    height: 400px;
    overflow: hidden;
}
.scene-visual .img-place img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.5s ease;
    z-index: 1;
}
.scene-visual .img-place img.is-active {
    opacity: 1;
    z-index: 2;
}
.scene-info {
    flex: 2;
    text-align: left;
}
.scene-tag {
    display: block;
    font-size: 0.7rem;
    color: #c5a059;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: bold;
}
.scene-info h3 {
    font-size: 1.5rem;
    margin-bottom: 25px;
    color: #333;
    font-weight: 300;
}
.scene-info p {
    font-size: 0.9rem;
    line-height: 1.8;
    color: #666;
    margin-bottom: 35px;
}
.item-price {
    font-size: 1rem;
    color: #c5a059;
    font-family: serif;
    margin-bottom: 30px;
}
.scene-product-btn {
    display: block;
    max-width: 200px;
    width: 100%; /* ボックスの幅いっぱいに広げる */
    background-color: #c5a059;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    padding: 18px;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.scene-product-btn:hover {
    background-color: #333;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}


/* 贈る相手別
================================================== */
#target_recommend_single {
    width: 100%;
    margin: 0 auto;
}

.single-column-card {
    max-width: 600px;
    margin: 0 auto;
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    text-align: center;
}

.single-card-img {
    width: 100%;
    line-height: 0;
}

.single-card-img img {
    width: 100%;
    height: auto;
    transition: transform 0.5s ease;
}

.single-column-card:hover .single-card-img img {
    transform: scale(1.05);
}

.single-card-body {
    padding: 40px 30px;
}

.single-card-body .target-tag {
    color: #c5a059;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    margin-bottom: 15px;
}

.single-card-body h3 {
    font-family: "Noto Serif JP", serif;
    font-size: 1.4rem;
    color: #333;
    margin-bottom: 20px;
}

.single-card-body p {
    font-size: 0.9rem;
    line-height: 1.8;
    color: #666;
    margin-bottom: 30px !important;
    text-align: center !important;
}

.single-card-body .button-2 {
    max-width: 250px;
    font-size: 0.85rem;
    margin: 0 auto;
}



/* オプション
================================================== */
.service-flex {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    max-width: 670px;
    margin: 0 auto;
}

.service-box {
    flex: 1;
    background: rgba(255, 255, 255, 0.6);
    padding: 30px 15px;
    border-radius: 5px;
    text-align: center;
}

.service-img {
    margin-bottom: 20px;
}

.service-img img {
    border-radius: 50%; /* 円形にする場合 */
    width: 150px;
    height: 150px;
    object-fit: cover;
}

.service-box h3 {
    font-family: "Kaisei Opti", serif;
    font-size: 1.2rem;
    margin-bottom: 15px;
    color: #461111;
}

.service-box p {
    font-size: 0.85rem;
    line-height: 1.6;
    margin-bottom: 25px !important;
}

.service-box .button-1 {
    width: 100%;
    padding: 0.8em 1em;
    font-size: 0.8rem;
}



/* フッター
================================================== */
#footer {
    background-color: #f0eeeb;
    padding: 60px 0 10px;
    border-top: 1px solid #e0ddd9;
    text-align: center;
}

.footer-inner {
    max-width: 700px;
    width: 95%;
    margin: 0 auto;
}

/* ナビゲーションアイコン */
.footer-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.footer-nav li {
    width: 30%;
}

.footer-nav a {
    display: block;
    color: #461111;
    text-decoration: none;
    transition: opacity 0.3s;
}

.footer-nav a:hover {
    opacity: 0.7;
}

.footer-icon {
    display: block;
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.footer-nav p {
    font-size: 0.8rem;
    font-weight: 600;
    font-family: "Zen Kaku Gothic New", sans-serif;
}

/* 下部情報 */
.footer-info {
    border-top: 1px solid #dcdad6;
    padding-top: 30px;
}

.shop-name {
    width: 150px;
    margin: 0 auto 15px;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

.footer-links a {
    font-size: 0.75rem;
    color: #666;
}

.footer-info small {
    font-size: 0.7rem;
    color: #999;
    letter-spacing: 0.05em;
}





/* スマホ用設定
================================================== */
@media only screen and (max-width: 768px){
   
    
 /* 背景画像切り替え
================================================== */
#bg {
    max-width: 670px;
    width: 95%;
    margin: 0 auto;
    background: #f9f8f6;
}
.one {
    align-items: center;
    width: 90%;
    min-height: 100vh;
    padding: 20px;
}
    
/* ヒーローエリア
================================================== */
.main img{
    width: 100%;
    margin: -60px auto 0;
}
.gift img{
    width: 100%;
    margin: -60px auto 0;
}
.message{
    padding: 0;
    margin: 0 auto;
	text-align: center;
}
.message h1{
	margin: 0 auto;
    font-family: "Kaisei Opti", serif;
	font-size: 2rem;
	font-weight: 400;
	font-style: normal;
}
.message h2{
	width: 90%;
	margin: 0 auto 30px;
	font-size: 1.5rem;
}
.message h2 span {
	padding: 0 50px;
}
.message p{
    font-size: 0.9rem;
	margin: 0 auto;
    line-height: 30px;
}
    
    
    
/* 母の日のイメージ写真
================================================== */
#mother{
    width: 90%;
    margin: -80px auto 0;
	padding: 0;
}
#mother_photo li{
	float: left;
	width: calc(100%/3);
	line-height: 0;
}
#mother_photo img{
	width: 100%;
}
    
    
/* アイテム共通
================================================== */
#mother_item{
    margin-top: -200px;
}
#mother_item .main_img{
    width: 100%;
    margin: -50px auto 0;
}
#mother_message{
	width: 100%;
}
#mother_item .message h1{
	font-size: 1.6rem;
}
    
    
/* 陳列 2カラム
================================================== */ 
#category_3 ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#category_3 li {
  width: calc((100% - 10px) / 2);
  height: 250px;
  margin: 0 0 10px;
  list-style: none;
}
#category_3 .item_name{
    margin-top: 20px;
    font-size: 0.7rem;
}
#category_3 .price{
    font-size: 0.7rem;
}
    
    
/* 陳列 3カラム
================================================== */
#category_4 ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#category_4 li {
  width: 30%;
  height: 200px;
  margin: 0 0 30px;
  list-style: none;
}
#category_4 ul::before,
#category_4 ul::after {
  content: "";
  display: block;
  width: 30%;
  height: 0;
}
#category_4 ul:before {
  order:1;
}
#category_4 .item_name{
    font-size: 0.6rem;
}
    

/* 金額別アイテム
================================================== */
.amount h2{
    font-size: 2rem;
    margin-bottom: -10px;
}
.amount span {
    padding: 0;
}


/* 金額用ボタン
================================================== */
#price-box ul {
	width: 100%;
}
#price-box li {
	width: 49%;
}
#price-box a {
	font-size: 0.7rem;
}
    
    
/* 陳列 1カラム（金額別おすすめ用）
================================================== */
.category-section {
    padding: 60px 0;
}
.category-section .card {
    padding: 40px 20px;
}
.scene-detail-row, 
.scene-detail-row.reverse {
    width: 99%;
    flex-direction: column;
    gap: 40px;
    margin-bottom: 80px;
}
.scene-visual, .scene-info {
    width: 100%;
}
.scene-visual .img-place {
    height: 500px;
    margin: 0 auto;
}
.scene-info {
    text-align: center;
}
.scene-item-link {
    text-align: left;
}
.scene-product-btn {
    padding: 15px;
    width: 100%;
    margin: 0 auto;
}
.scene-info h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: #333;
    font-weight: 300;
}
.scene-info p {
    font-size: 0.8rem;
    line-height: 1.8;
    color: #666;
    margin-bottom: 35px;
}
.item-price {
    font-size: 1rem;
    color: #c5a059;
    font-family: serif;
    text-align: center;
}

    
/* 贈る相手別
================================================== */
.single-card-body {
    padding: 30px 20px;
}
.single-card-body h3 {
    font-size: 1.2rem;
}
.single-card-body p {
    font-size: 0.8rem;
}


/* ボタン
================================================== */
.button-1 {
    text-align:center;
    width: 99%;
    margin: 0 auto;
    padding: .9rem 2rem;
}
.button-2 {
    width: 90%;
    margin:0 auto;
    padding: .9rem .5rem;
}
    
    
/* オプション
================================================== */
.service-flex {
    flex-direction: column;
    width: 90%;
}
.service-box {
    margin-bottom: 20px;
}

    
/* フッター
================================================== */
#footer {
    padding: 40px 0 30px;
}
.footer-icon {
    font-size: 1.5rem;
}
.footer-nav p {
    font-size: 0.7rem;
}
}



/* PCのみ
================================================== */

@media(max-width:788px){
.pc{
    display: none !important;
}
}
    
/* SPのみ
================================================== */

@media(min-width:789px){
.sp{
    display: none !important;
}
}