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

body{
	margin: 0;
}

.wrapper{
	width: 100%;
	margin: 0 auto;
	 font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
  background-image: linear-gradient(#b1cfe5, #c1d8e8 0.5%);	
}

.wrapper img{
	display: block;
	line-height: 0;
}

.pcBox{
	display: none;
}

.top_ttl{
	position: relative;
	width: 100%;
	margin: 0 auto;
	background-color: #b1cfe5;
}

.top_logo{
	position: absolute;
	width: 88%;
	top:6%;
	left:5%;
}
.bl_logo{
	position: absolute;
	width: 50%;
	top:92%;
	left:24%;
}
.top{
	position: relative;
	margin: 0% auto;
}
.top_cherry{
	position: absolute;
	width: 35%;
	top:-35%;
	right:1%;
}
.top h1{
	width: 75%;
	text-align: left;
	font-size: 14px;
	line-height: 2.1;
	font-weight: 500;
	color: #e9073c;
	margin: 5% 0 0 5%;
}

.top p{
	text-align: center;
	font-size: 14px;
	line-height: 2;
	margin: 8% auto;
}
	.sticky_contener{
		display: flex;
		background-color: #c1d8e8;
	}



.nami1{
	margin: 0 auto;
	width: 98%;
	margin-bottom: -1.5%;
}
.nami2{
	margin: -4% auto 0;
	width: 98%;
}
.main_txt{
	width: 94%;
	margin: 5% auto;
}
.main01_1{
	margin: -13% auto 0;
	width: 100%;
    position: relative; /* 必要 */
    z-index: 10;
}

.cara_1{
	width: 15%;
	margin: 5% auto -2%;
}
.price{
	position: relative;
	width:80%;
	margin: 10% auto 0;
}
.camera{
	position: absolute;
	width:30%;
	top:-50%;
	right: 0;
}
.red-line {
  border-bottom: 4px solid #e9073c; /* 太さ、線種、色の順に指定 */

}

.cherry_03{
	position: absolute;
	width: 45%;
	top:70%;
	left:0%;
}
.main04_1{
	margin: 5% auto 0;
	width: 65%;
}
.swp2_bk{
	position: relative;
	width: 100%;
}
	.swp2{
position: absolute;
 width:100%;
top:15%;
left:0%;
}

.main06_1{
	position: relative;
	margin: 0% auto 0;
	width: 100%;
}
.cherry_06{
	position: absolute;
	width: 45%;
	top:-5%;
	left:0%;
}
.main07_1{
	margin: 5% auto 0;
	width: 85%;
}

.spBox{
	margin: 10% auto 15%;
}
	.btn_txt{
		margin: 0 auto;
		text-align: center;
		font-size: 11px;
		color: #e9073c;
		font-weight: 500;
	font-family: "Times New Roman", "Yu Mincho", "游明朝", serif;
	}
.member{
	margin: 10% auto;
	width: 90%;
}

.member h1{
	text-align: center;
	font-size: 22px;
	font-weight: normal;
	margin: 2% auto;
}

.member ul{
	padding: 0;
	list-style: none;
	display: flex;
	column-gap: 5px;
}

.member ul li{
	border: solid 1px #000;
	position: relative;
}

.member ul li img{
	padding-bottom: 25%;
	position: relative;
}

.member ul li a{
	position: relative;
}

.member ul li a:after{
	display: block;
	position: absolute;
	bottom: 7px;
	/*left: 50%;*/
	left: 40px;
	width: 6px;
	height: 6px;
	border-top: 1px solid #000;
	border-right: 1px solid #000;
	content: "";
	transform: translateX(-50%)  rotate(135deg);
}

.main-content{
	margin: 0 auto 10%;
	padding-top: 10%;
}

/* 外枠：はみ出した部分を隠す */
.loop-container {
  overflow: hidden; /* 必須 */
  width: 100%;
}

/* 内側の箱：横並びにする */
.loop-wrap {
  display: flex;
  white-space: nowrap; /* 折り返しなし */
}

/* テキスト部分：アニメーション設定 */
.loop-content {
  /* 幅を自動計算させる */
  width: max-content;
  
  /* テキスト間の余白 */
  padding-left: 20px; 
  
  /* アニメーション：名前 時間 動き 無限 */
  animation: loop-slide 10s linear infinite;
	
	font-family: "Times New Roman", Times, "serif";
	color: #0091bb;
	font-size: 40px;
}

/* アニメーションの定義 */
@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    /* 2つ並べたうちの1つ分（-100%）だけ動かす */
    transform: translateX(-100%);
  }
}



/*　スライドループ 写真部分 */	
  :root {
            /* 共通のデフォルト設定 */
            --image-width: 200px;
            --gap: 0px;
            --anim-speed: 15s;
        }

        .slider-container {
            overflow: hidden;
            width: 100%;
            margin-bottom: 50px; /* スライダー間の余白 */
			margin: 0% auto;
        }

        .slider-track {
            display: flex;
            /* ここで計算：(幅 + 隙間) * 枚数 */
            width: calc((var(--image-width) + var(--gap)) * var(--image-count) * 2);
            animation: scroll var(--anim-speed) linear infinite;
        }

        .slide {
            width: var(--image-width);
            height: auto;
            margin-right: var(--gap);
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-family: Arial, sans-serif;
        }

        @keyframes scroll {
            0% { transform: translateX(0); }
            /* 1セット分（全枚数分）左に移動したらリセット */
            100% { transform: translateX(calc(-1 * (var(--image-width) + var(--gap)) * var(--image-count))); }
        }




/* 丸型スライド */

.maru_bk{
	position: relative;
	width: 100%;
	margin: 0 auto;
}
        .slider-wrapper {
			position: absolute;
			top:3%;
			left:0%;			
            display: flex;
            justify-content: center;
            padding: 50px 0;
			width: 100%;
        }

        /* 1. ミラー型（卵型）のフレーム */
        .oval-frame {
            position: relative;
            width: 90%; 
            aspect-ratio: 1.1 / 1.4; /* 縦横比 */
            
            /* ここがポイント：
               「50%」で左右を丸め、「60% 60% 40% 40%」のように上下を少し変えると
               より自然で綺麗な卵型（オーバル）になります。
            */
            border-radius: 50% / 50%; /* 50% 50% にすると完全な楕円になります */
            
            overflow: hidden;
            border: 1px solid rgba(0,0,0,0.05); /* 繊細な境界線 */
            
            /* 角丸の淵を滑らかにする設定 */
            -webkit-mask-image: -webkit-radial-gradient(white, black);
            mask-image: radial-gradient(white, black);
        }

        /* 2. 画像の設定 */
        .oval-frame img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0;
            animation: elegantFade 12s infinite ease-in-out;
        }

        .oval-frame img:nth-child(1) { animation-delay: 0s; }
        .oval-frame img:nth-child(2) { animation-delay: 4s; }
        .oval-frame img:nth-child(3) { animation-delay: 8s; }

        /* 3. フェードアニメーション */
        @keyframes elegantFade {
            0% { opacity: 0; transform: scale(1.1); } /* ズーム感を強めてリッチに */
            10% { opacity: 1; transform: scale(1); }
            33% { opacity: 1; }
            43% { opacity: 0; }
            100% { opacity: 0; }
        }
/* 丸型スライド */



/* キャラアニメここから */
.animation{
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1.5s;
}

.keyframe1{
  animation-name: anim_v;
}

.keyframe3{
  animation-name: anim_s;
  transform: rotate(10deg);
  animation-duration: 3s;
}
.keyframe4{
  animation-name: anim_s;
  transform: rotate(10deg);
  animation-duration: 2s;
}
.keyframe5{
  animation-name: anim_sc;
  transform: scale(0.85,0.85);
}
@keyframes anim_s {
  50% {
    transform: rotate(-20deg);
  }
  100% {
    transform: rotate(20deg);
  }
	
}
@keyframes anim_v {
  0% {
    transform: translate(0, 0px);
  }
  100% {
    transform: translate(0, 20px);
  }
}
@keyframes anim_sc {
  100% {
    transform: scale(1,1);
  }
}



.box{
	width: 92%;
	margin: 5% auto 0;
	padding-bottom: 20%;
}

.box-last{
	padding-bottom: 5%;
}

.box-border{
	border: solid 1px #000;
}

.box-profile{
	display: grid;
	grid-template-columns: 1.25fr 2fr;
	justify-content: center;
	align-items: center;
	column-gap: 15px;
	border-bottom: solid 1px #000;
}

.box-profile p{
	font-size: 14px;
	line-height: 1.8;
}

.box-profile span{
	font-size: 17px;
	line-height: 1.6;
}

.box-profile .staff-sns{
	margin: 3% 0;
	width: 50%;
}

.box-profile .staff-sns ul{
	padding: 0;
	list-style: none;
	display: flex;
	column-gap: 10px;
	margin: 5% auto;
	align-items: center;
}

.box-profile .staff-sns ul li img{
	width: 25px;
	height: auto;
}

.box-profile .staff-sns ul li .sb{
	width: 90px;
	height: auto;
}

.coment{
	font-size: 12px;
	line-height: 1.8;
	box-sizing: border-box;
	padding: 5% 3% 0%;
	margin: 0;
}

.coment span{
	font-family: "Times New Roman", Times, "serif";
	font-size: 25px;
	display: inline-block;
	margin-bottom: 0%;
}

.other{
	padding: 3%;
	list-style: none;
	display: flex;
	column-gap: 5px;
	justify-content: center;
	box-sizing: border-box;
}

.best-buy{
	margin: 10% auto;
}

.best-buy h1{
	font-family: "Times New Roman", Times, "serif";
	margin: 1% auto;
	font-weight: normal;
	color: #0091bb;
	font-size: 40px;
}

.main{
	margin-bottom: 5%;
}

.best-buy h2{
	font-size: 20px;
	line-height: 1.8;
	margin: 5% auto;
	font-weight: normal;
	text-align: center;
}

.best-buy p{
	font-size: 13px;
	line-height: 1.8;
}

.box-credit{
	width: 90%;
	margin: 10% auto;
}

.credit{
	position: relative;
    border-bottom: solid 1px #808080;
    margin-bottom: 3%;
    letter-spacing: .3px;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	display: flex;
	align-items: center;
	column-gap: 10px;
	padding-bottom: 2%;
}

.credit a{
	display: block;
	text-decoration: none;
	color: #000;
	font-size: 12px;
	line-height: 1.5;
}

.credit-img{
	width: 15%;
}

.credit a::after {
	content: "BUY";
    position: absolute;
    top: 50%;
    right: 2%;
    transform: translate(0, -50%);
    font-size: 14px;
}

.credit .cms::after {
	content: "COMING SOON";
    position: absolute;
    top: 50%;
    right: 2%;
    transform: translate(0, -50%);
    font-size: 10px;
	color: #656565;
}

.movie{
	width: 100%;
	margin: 10% auto 5%;
}

video{
	width: 100%;
	height: auto;
}

.sub-img{
	margin: 5% auto;
}

.sub-img img:first-child{
	width: 70%;
	margin-left: 30%;
}

.sub-img img:last-child{
	width: 45%;
	margin-top: -20%;
}

.sub-img2{
	margin: 5% auto;
}

.sub-img2 img:first-child{
	width: 70%;
}

.sub-img2 img:last-child{
	width: 45%;
	margin-left: 55%;
	margin-top: -20%;
}



.all a{
	display: block;
	width: 70%;
	margin: 10% auto 15%;
	text-align: center;
	background-color: #333333;
	color: #fff;
	text-decoration: none;
	line-height: 3;
	position: relative;
}

.all a:after{
	display: inline-block;
	position: absolute;
	top: 50%;
	right: 15px;
	width: 6px;
	height: 6px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	content: "";
	transform: translateY(-50%) rotate(45deg);
}


        .btn-container {
			margin: 5% auto 1%;
            padding: 10px;
            display: flex;
            justify-content: center;
        }

        .shiny-button {
			width: 44%;
            display: inline-block;
            padding: 12px 40px;
            /* 初期の赤色グラデーション */
            background: linear-gradient(
                to bottom,
                #ff4d79 0%,
                #ff003c 15%,
                #ff003c 85%,
                #b3002a 100%
            );
            
            color: #ffffff;
			text-align: center;
            text-decoration: none;
            font-family: "Times New Roman", "Yu Mincho", "游明朝", serif;
            font-size: 18px;
            font-weight: 500;
            letter-spacing: 0.1em;
            border-radius: 100vh;
            
            /* 立体感のシャドウ */
            box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.4), 
                        inset 0 -2px 5px rgba(0, 0, 0, 0.2);
            
            /* 変化を滑らかにする設定 */
            transition: background 0.4s ease, transform 0.2s;
            border: none;
            cursor: pointer;
            outline: none;
        }

        /* ホバー時の青色デザイン（b.pngを再現） */
        .shiny-button:hover {
            background: linear-gradient(
                to bottom,
                #5d7bb5 0%,    /* 上端の少し明るい青 */
                #3b5998 15%,   /* メインの落ち着いた青 */
                #3b5998 85%,   /* メインの落ち着いた青 */
                #2a3f6d 100%   /* 下端の濃い影 */
            );
            transform: translateY(1px);
        }
        
        .shiny-button:active {
            transform: translateY(2px);
            opacity: 0.9;
        }

        .shiny-button2 {
			width: 70%;
            display: inline-block;
            padding: 12px 40px;
            /* 初期の赤色グラデーション */
            background: linear-gradient(
                to bottom,
                #ff4d79 0%,
                #ff003c 15%,
                #ff003c 85%,
                #b3002a 100%
            );
            
            color: #ffffff;
			text-align: center;
            text-decoration: none;
            font-family: "Times New Roman", "Yu Mincho", "游明朝", serif;
            font-size: 18px;
            font-weight: 500;
            letter-spacing: 0.1em;
            border-radius: 100vh;
            
            /* 立体感のシャドウ */
            box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.4), 
                        inset 0 -2px 5px rgba(0, 0, 0, 0.2);
            
            /* 変化を滑らかにする設定 */
            transition: background 0.4s ease, transform 0.2s;
            border: none;
            cursor: pointer;
            outline: none;
        }

        /* ホバー時の青色デザイン（b.pngを再現） */
        .shiny-button2:hover {
            background: linear-gradient(
                to bottom,
                #5d7bb5 0%,    /* 上端の少し明るい青 */
                #3b5998 15%,   /* メインの落ち着いた青 */
                #3b5998 85%,   /* メインの落ち着いた青 */
                #2a3f6d 100%   /* 下端の濃い影 */
            );
            transform: translateY(1px);
        }
        
        .shiny-button2:active {
            transform: translateY(2px);
            opacity: 0.9;
        }

	.btn_txt{
		font-size: 12px;
		color: #e9073c;
		font-weight: normal;
	font-family: "Times New Roman", "Yu Mincho", "游明朝", serif;
	}


    .pc {
		display:none;
	}
	.sp {
		display:block;
    }
@media(min-width:750px){
	
	.sticky_contener{
		display: flex;
		background-color: #b1cfe5;
    background-image: url(../images/bk.jpg);     /* 背景画像指定 */
    background-repeat: repeat repeat-x;      /* 背景の繰り返し設定 */	
	 background-attachment: fixed;	
	}
	
	.top_logo{
	position: absolute;
	width: 35%;
	top:29%;
	left:61%;
}
.bl_logo{
	position: absolute;
	width: 19%;
	top:75%;
	left:69%;
}	
	.top h1{
	width: 75%;
	text-align: left;
	font-size: 15px;
	line-height: 2.1;
	font-weight: 500;
	color: #e9073c;
	margin: 20% 0 0 8%;
}	
	.pcBox{
		width: 60%;
		height: 100vh;
		position: sticky;
		left: 0;
		top: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
		
	.left img{
		display: block;
		width: 45vh;
	}
	
.cara_1{
	width: 15%;
	margin: 5% auto -2%;
}	
	
.swp2_bk{
	width: 100%;
}
	.swp2{
top:15%;
left:0%;
}
	
	.snsBOX{
		font-family: 'Arial',sans-serif;
	}
	
	.snsBOX__inner{
		border-radius: 15px;
		text-align: center;
	}
	
	.snsBOX__list01{
		display: flex;
		padding: 0;
		list-style: none;
		justify-content: center;
		margin: 0;
	}
	
	.snsBOX__list01 li{
		margin: 0 7px;
		line-height: 0;
	}
	
	.snsBOX__list01 li img{
		width: 50px;
		height: auto;
	}
	


	.wrapper{
		width: 35%;
		box-sizing: border-box;
		margin: 0 auto;
  background-image: linear-gradient(#b1cfe5, #c1d8e8 0.5%);
	}

	/*.br_s{
		display:none
	}*/


	.member ul li a:after{
		display: block;
		position: absolute;
		bottom: 8%;
		left: 50%;
		right: 15px;
		width: 6px;
		height: 6px;
		border-top: 1px solid #000;
		border-right: 1px solid #000;
		content: "";
		transform: translateX(-50%)  rotate(135deg);
	}
	
        .btn-container {
			margin: 5% auto 1%;
            padding: 10px;
        }

        .shiny-button {
			width: 65%;
            padding: 12px 40px;	
			font-size: 17px;
			  }
	
	        .shiny-button2 {
			width: 100%;
            padding: 12px 60px;	
			font-size: 16px;
			  }

.spBox{
	display: none;
}
.pc{
	display: block;
}
.sp{
	display: none;
}
	
}