@charset "UTF-8";
*{
margin: 0;
padding: 0;
box-sizing: border-box;
color: #333;
}

a{
text-decoration: none;
}

img{
max-width: 100%;
}

.sp-only{
display: none;
}

@media screen and (max-width: 640px) {
.sp-only{
display: block;
}
}

.sanrio_wrapper{
font-family: "Zen Maru Gothic", serif;
font-feature-settings: "palt" 1;
text-align: left;
}

.mv_area{
background-image: url(/design_items/pc/img/sanrio/main_bg.png);
background-color:rgba(249,243,243,0.9);
background-blend-mode:lighten;
padding: 5%;
max-width: 100%;
width: 100%;
}

.main_image{
display: flex;
justify-content: center;
align-items: center;
max-width: 100%;
width: 100%;
}

.i_keywords__wrap{
background-color: #FFFFF7;
padding-top:clamp(24px,10vw,100px);
padding-bottom:clamp(24px,10vw,100px);
}

.i_keywords__inner{
max-width: 1200px;
width: 100%;
padding: 0 20px;
margin-inline:auto ;
}

.i_keywords__content{
display: flex;
justify-content: center;
align-items: center;
gap: 37px;
/* align-items: flex-end; */
}
@media screen and (max-width: 870px) {
.i_keywords__content{
flex-direction: column;
gap: 75px;
}
}

.i_keywords__image img{
box-shadow: -20px 20px #FFE9E9;
object-fit: cover;
max-width: 485px;
width: 100%;
}

@media screen and (max-width: 870px) {
.i_keywords__image img{
box-shadow: -10px 10px #FFE9E9;

}
}

.i_keywords__lead{
display: flex;
flex-direction: column;
align-items: center;
max-width: 473px;
}

.i_keywords__lead p{
position: relative;
font-size: clamp(16px,2vw,20px);
line-height: 1.7;
font-weight: 500;
}

.i_keywords__lead p::before,
.i_keywords__lead p::after{
position: absolute;
content: "";
background: url(/design_items/pc/img/sanrio/heart_line.png) no-repeat;
width: 101%;
height: 17px;
left: 0;
}

.i_keywords__lead p::before{
top: -35%;
}
.i_keywords__lead p::after{
bottom: -35%;
}

@media screen and (max-width: 870px) {
.i_keywords__lead p::before{
top: -45%;
}
.i_keywords__lead p::after{
bottom: -45%;
}
}

@media screen and (max-width: 500px) {
.i_keywords__lead p::before,
.i_keywords__lead p::after{
width: 98%;
}
.i_keywords__lead p::before{
top: -25%;
}
.i_keywords__lead p::after{
bottom: -25%;
}
}

.ichigo-link {
display: flex;
justify-content: center;
width: fit-content;
text-decoration: none !important;
border: 2px solid #0B4770;
background-color: #fff;
border-radius: 30px;
padding: 10px clamp(20px,4vw,40px);
text-align: center;
color: #0B4770;
font-size: clamp(20px,2.4vw,24px);
font-weight: bold;
margin-inline: auto;
transition: all .6s;
}

.ichigo-link:hover{
background-color: #0B4770;
color: #fff;
}

.link-space{
margin-top: clamp(60px,7vw,70px);
}

.campaign_wrap02{
position: relative;
}

.shuuryo_txt{
background: #F20C1F;
box-shadow: 0px 0px 0px 15px #F20C1F,5px 5px 30px 5px rgba(0, 0, 0, 0.9);
border: dashed 5px white;
color: #fff;
font-size: 250%;
font-weight: bold;
padding: 0.2em 0.5em;
text-align: center;
position: absolute;
width: 80%;
top: 20%;
left: 10%;
z-index: 10;
transform: rotate(-10deg);
}
    
.shuuryo_wrap{
    opacity: 0.5;
}


.campaign_wrap{
background-image: url(/design_items/pc/img/sanrio/main_bg.png);
background-color:rgba(244,246,255,0.9);
background-blend-mode:lighten;
padding: 5% 0;
}



.campaign_inner{
max-width: 1000px;
width: 100%;
padding-left: clamp(16px,5vw,50px);
padding-right: clamp(16px,5vw,50px);
margin-inline: auto;
}

.campaign_content{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.campaign_title {
text-align: center;
font-weight: 500;
font-style: normal;
font-size: clamp(32px,4.5vw,45px);
color: #FF769F;
text-shadow: 
3px 3px 2px white,
-3px 3px 2px white,
3px -3px 2px white,
-3px -3px 2px white,
3px 3px 3px rgba(0, 0, 0, 0.9);
margin-bottom: clamp(16px,3.2vw,32px)
}

.campaign_item{
border: #FF769F solid 2px;
background-color: #fff;
padding: clamp(24px,5vw,50px) clamp(16px,3.2vw,32px);
border-radius: 10px;
}

.campaign_item p{
margin-bottom: clamp(16px,3.2vw,32px);
font-weight: 500;
}

.campaign-image{
position: relative;
display: flex;
justify-content: center;
margin-bottom: clamp(16px,2vw,20px);
}

.sanrio_img02{
max-width: 600px;
width: 100%;
}

.campaign-image-deco01,
.campaign-image-deco02,
.campaign-image-deco03,
.campaign-image-deco04{
position: absolute;
}

@media screen and (max-width: 870px) {
.campaign-image-deco01,
.campaign-image-deco02,
.campaign-image-deco03,
.campaign-image-deco04{
display:none;
}
}

.campaign-image-deco01{
top: 15%;
left: 3%;
}

.campaign-image-deco02{
top: 0;
right: 3%;
}

.campaign-image-deco03{
bottom: 5%;
left: 3%;
}

.campaign-image-deco04{
bottom: 15%;
right: 3%;
}

.i-book_wrap {
background-image: url(/design_items/pc/img/sanrio/ichigo_book_bg.png);
background-color: rgba(255, 240, 247, 0.9);
padding: 5%;
border-top:#FF769F 5px solid ;
}

.i-book_inner {
max-width: 1000px;
width: 100%;
margin-inline: auto;
}

.i-book_title_wrap {
margin: 64px auto 0;
}

.bimoji_title_wrap{
max-width: 650px;
margin: 0 auto;
position: relative;
}

/* 251019_日めくりカレンダー */
.himekuri_title_wrap{
max-width: 650px;
margin: 0 auto;
position: relative;
}
    


.i-book_title{
text-align: center;
color: #fff;
background-color: #76C8DD;
border: 3px solid #fff;
border-radius: 56px;
box-shadow: 4px 4px 0px #76C8DD;
padding: 1.5% 10%;
font-size: clamp(22px,4vw,40px);
font-weight: 500;
width: 100%;
margin-bottom: 32px;
position: relative;
}
.bimoji_title{
text-align: center;
color: #fff;
background-color: #FF769F;
border: 3px solid #fff;
border-radius: 56px;
box-shadow: 4px 4px 0px #FF769F;
padding: 1.5% 10%;
font-size: clamp(22px,4vw,40px);
position: relative;
font-weight: 500;
width: 100%;
max-width: 650px;
margin-bottom: 32px;
}

/* 251019_日めくりカレンダー */
.himekuri_title{
text-align: center;
color: #fff;
background-color: #cda1dc;
border: 3px solid #fff;
border-radius: 56px;
box-shadow: 4px 4px 0px #cda1dc;
padding: 1.5% 10%;
font-size: clamp(22px,4vw,40px);
position: relative;
font-weight: 500;
width: 100%;
max-width: 650px;
margin-bottom: 32px;
}
    

.i-book_title-deco03,
.i-book_title-deco03-2{
position: absolute;
width: 9%;
}

.i-book_title-deco03{
top: 18%;
left: 5%;
}

.i-book_title-deco03-2{
top: 22%;
right: 5%;
}

.i-book_item {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
justify-content: space-between;
gap: 20px;
}

.i-book_panel {
display: grid;
background-color: #fff;
border-radius: 10px;
padding: 32px 16px;
height: 100%; /* アイテム全体の高さを100%に */
}

.panel_item {
display: flex;
flex-direction: column;
gap: 8px;
}

.panel_item_image {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.book_item_content {
display: flex;
flex-direction: column;
justify-content: start;
/* justify-content: space-between; */
gap: 16px;
flex-grow: 1;
}

.title-lead-group{
display: flex;
flex-direction: column;
gap: 12px;
}

.book_title {
font-size: 18px;
margin-bottom: 8px;
}

.book_title span {
font-size: 14px;
}

.book_summary{
letter-spacing: 1px;
line-height: 1.5;
}

.book_button{
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.mall_link{
max-width: 137px;
width: 100%;
}

.book_link:hover,
.mall_link:hover {
opacity: 0.8;
}

.title_link {
text-decoration: underline;
display: block;
width: fit-content;
}

.title_link:hover {
text-decoration: none;
}

.trial {
color: #0094FF;
font-weight: 700;
padding-left: 20px;
position: relative;
}

.trial::before {
content: "";
position: absolute;
top: calc(50% - 3px);
left: 0;
display: block;
width: 8px;
height: 8px;
border-top: 2px solid #0094FF;
border-right: 2px solid #0094FF;
transform:rotate(45deg);
}

.trial_link {
color: #0094FF;
margin-top: 16px;
display: inline-block;
text-decoration: underline;
text-decoration-color: #0094FF!important;
}

.trial_link:hover {
text-decoration: none;
}


.bimoji_title_wrap{
margin-top: clamp(32px,6.4vw,64px);
}

/* 251019_日めくりカレンダー */
.himekuri_title_wrap{
/*margin-top: clamp(32px,6.4vw,64px);*/
}


footer {
margin-top: 0!important;
padding: clamp(24px, 4vw, 40px)!important;
}

/*キャンペーン情報*/
.campaign_item ul{
    margin: 0 0 20px 0;
}
.campaign_item ul li{
    list-style: none;
}
.taglinetxt01{
    font-size: 180%;
    margin: 20px 0 0 0;
}
.taglinetxt02{
    font-size: 180%;
    font-weight: bold;
    color: #F20C1F;
    margin: 0 0 20px 0;
}
.txt-futoji{
    font-weight: bold;
}
.txt-futojicolor{
    font-weight: bold;
    color: #FF769F;
}

/* カルーセル */
.i_keywords__carousel {
    box-shadow: -20px 20px #FFE9E9;
    margin-bottom: 30px;
} 

.carousel {
    width: 280px;
    height: 400px;
    display: flex;    /* 子要素を横に並べる */
    overflow: hidden; /* はみ出た部分は表示しない */
    margin: 0 auto;   /* 水平方向中央寄せ */
  }
  /* カルーセル内の画像 */
  .carousel img {
    margin: 0;
    padding: 0;
    display: block; /* imgタグの改行のすき間を消すため */
  }
  /* スクロールアニメーションのキーフレーム（14枚＝13枚＋ループ用1枚、区切りは100/13%） */
  @keyframes scroll {
    /* 初期位置は1個目の画像が左端 */
    0% { margin-left: 0; }

    /* 2個目〜13個目の画像が左端 */
    7.692307692307692% { margin-left: -100%; }
    15.384615384615385% { margin-left: -200%; }
    23.076923076923077% { margin-left: -300%; }
    30.76923076923077% { margin-left: -400%; }
    38.46153846153846% { margin-left: -500%; }
    46.15384615384615% { margin-left: -600%; }
    53.84615384615385% { margin-left: -700%; }
    61.53846153846154% { margin-left: -800%; }
    69.23076923076923% { margin-left: -900%; }
    76.92307692307693% { margin-left: -1000%; }
    84.61538461538461% { margin-left: -1100%; }
    92.3076923076923% { margin-left: -1200%; }

    /* 最後に1枚目と同じ画像（ループ用）が左端 → リセットで継ぎ目なし */
    100% { margin-left: -1300%; }
    }

/* カルーセルの子要素にスクロールアニメーションを設定 */
  .carousel > :first-child {
    animation-name: scroll;    /* キーフレーム名 */
    animation-duration: 54s;  /* 13枚分の区切りに合わせた全体時間（従来12枚時50s相当の1枚あたり尺） */
    animation-delay: 2s;      /* 読込直後から遅延無しで開始 */
    animation-iteration-count: infinite;  /* 無限に繰り返す */
  }

 .sanrio-credit {
    font-size: small;
    margin-bottom: 30px;
 }