@charset "UTF-8";

/* 基本のCSS内容はココに入ってます */
html {
    scroll-behavior: smooth;
}
body{
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", Arial, sans-serif !important;
	margin: 0;
	background-color: #f4f4f4;
}
.all{
	background-color: #fff;
	padding: 10px 20px;
}
.wrapper{
	margin: 0 auto;
	width: 620px;

}
@media screen and (max-width:700px) {
	.all{
		padding: 10px;
	}
	.wrapper{
		width: 100%;
	}
}
p{
	font-size: 19px;
	color: #000000;
	line-height: 1.7;
}
b{
	font-weight: bold;
}
.mark {
	background: linear-gradient(to bottom, transparent 30%,#fffabe 30%);
	height: 80%;
	vertical-align: bottom;
}
.mark2 {
	background-color: #ffff00;
	height: 80%;
	vertical-align: bottom;
}
.mark3 {
	background: linear-gradient(to bottom, transparent 0%, transparent 70%, #ffd4e7 70%, #ffd4e7 100%);
	height: 80%;
	vertical-align: bottom;
}
.mark4 {
	background: linear-gradient(to bottom, transparent 0%, transparent 70%, #fffabe 70%, #fffabe 100%);
	height: 80%;
	vertical-align: bottom;
}
.mark5 {
	background: linear-gradient(to bottom, transparent 30%,#ffff00 30%);
	height: 80%;
	vertical-align: bottom;
}
.mark6 {
	background: rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #facccc 0%) repeat scroll 0 0;
}
.mark_p {
	background-color: rgb(250, 225, 240);
}
.mark_r {
	background-color: rgb(230, 0, 0);
	color: rgb(255, 255, 255);
}
.mark_y {
	background-color: rgb(255, 255, 0);
}
.pc{
    display: block ;
}
.sp{
    display: none ;
}
.fwB{
    font-weight: bold;
}
.taC{
	text-align: center!important;
}
.taL{
	text-align: left!important;
}

.fsS{
	font-size: 13px;
    vertical-align: bottom;
}
.fsM{
	font-size: 21px;
}
.fsL{
	font-size: 25px;
}
.fsLL{
	font-size: 27px;
}
.fsLLL{
	font-size: 35px;
}
.fcR{
	color: rgb(240, 102, 102);
}
.fcR2{
	color: rgb(255, 0, 0) !important;
}
.fcB{
	color: rgb(0, 102, 204);
}
.fcP{
	color: rgb(255, 35, 137);
}
.fcM{
	color: #6B24B2;
}
.fcW{
	color: #fff;
}
.fcO{
	color: rgb(255, 127, 0);
}
.fcBR{
   color: rgb(102, 61, 0);
}
.baB{
	background-color: #66A3E0;
}
.fcG {
    background-image: -webkit-linear-gradient(-45deg, #F7DE05, #DA8E00, #EDAC06, #F7DE05, #ECB802, #DAAF08, #B67B03, #DA8E00, #EDAC06, #F7DE05, #ECB802, #EDAC06);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.mt0{
	margin-top: -10px !important;
}
.mtb20{
	margin: 20px 0;
}
.mt20{
	margin-top: 20px !important;
}
.mt40{
	margin-top: 40px;
}
.mb20{
	margin-bottom: 20px;
}
.mb60{
	margin-bottom: 60px;
}
.mb0{
	margin-bottom: 0!important;
}
h6 {
    text-align: center;
    position: relative;
    font-size: 1.5em;
    font-weight: bold;
    color: #ffffff;
    padding: 2%;
    margin: 5% 0 !important;
    box-shadow: #ccc 4px 5px 5px;
    background: linear-gradient(to right, #ffb8d4, #96c2f0);
}
.small {
    /*文字サイズ*/
    font-size: 9px;
    text-align: right;
    /*行間調整*/
    line-height: 1.2;
    /*下側の余白*/
    margin-bottom: 1em;
    color: rgb(136, 136, 136);
  }
img {
	width: 100%;
	margin: 5px auto;
	vertical-align: bottom;
}
video{
    width: 100%;
    height: auto;
	margin: 5px auto;
	vertical-align: bottom;
}
footer {
    font-size: 13px;
    padding: 5%;
    background: #ccc;
    text-align: center;
    margin-top: 10px;
}
footer a{
	font-size: 8pt;
	color: #fff;
	text-decoration: none;
}



  /* 矢印動く */
  .step_arr {
	position: relative;
	padding-top: 22vw;
	margin-top: -4vw;
  }
  
   .step_arr span {
	position: absolute;
	top: 0;
	left: 50%;
	width: 10vw;
	height: 10vw;
	margin-left: -5vw;
	border-left: 1px solid #333;
	border-bottom: 1px solid #333;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-animation: sdb 2s infinite;
	animation: sdb 2s infinite;
	opacity: 0;
	box-sizing: border-box;
  }
  
   .step_arr span:nth-of-type(1) {
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
  }
  
   .step_arr span:nth-of-type(2) {
	top: 4vw;
	-webkit-animation-delay: .15s;
	animation-delay: .15s;
  }
  
   .step_arr span:nth-of-type(3) {
	top: 8vw;
	-webkit-animation-delay: .3s;
	animation-delay: .3s;
  }
  
  @-webkit-keyframes sdb {
	0% {
	  opacity: 0;
	}
  
	50% {
	  opacity: 1;
	}
  
	100% {
	  opacity: 0;
	}
  }
  
  @keyframes sdb {
	0% {
	  opacity: 0;
	}
  
	50% {
	  opacity: 1;
	}
  
	100% {
	  opacity: 0;
	}
  }
  
  @media (min-width: 620px) {
	 .step_arr {
	  position: relative;
	  padding-top: 136px;
	  margin-top: -25px;
	}
  
	 .step_arr span {
	  width: 62px;
	  height: 62px;
	  margin-left: -31px;
	}
  
	 .step_arr span:nth-of-type(2) {
	  top: 24.8px;
	}
  
	 .step_arr span:nth-of-type(3) {
	  top: 49.6px;
	}
  }

  /* 赤矢印 */
  .arrowFlow__area {
	width: 100%;
	height: auto;
  }
  
   .arrowFlow__inner {
	padding-bottom: 200px;
	overflow-y: hidden;
	position: relative;
  }
  
   .arrowFlow__beforeG,
   .arrowFlow__afterG {
	width: 80%;
	max-width: 400px;
	height: auto;
	margin: 0 auto;
	display: flex;
	justify-content: space-evenly;
	align-items: flex-start;
	animation-name: arrowFlow;
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	transform: translate(-50%, -300%);
	position: absolute;
	top: 0;
	left: 50%;
  }
  
   .arrowFlow__afterG {
	animation-delay: 1s;
  }
  
   .arrowFlow__afterG .arrow {
	display: inline-block;
	vertical-align: middle;
	color: #ba0d0d;
	line-height: 1;
	position: relative;
	width: 40px;
	height: 60px !important;
	background: currentColor;
	margin: 0 30px;
  }
  
   .arrowFlow__afterG .arrow:before {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 50px 50px 0 50px;
	border-color: #ba0d0d transparent transparent transparent;
	position: absolute;
	bottom: -50px;
	left: 50%;
	transform: translateX(-50%);
  }
  
  @keyframes arrowFlow {
	0% {
	  transform: translate(-50%, -300%);
	}
  
	60% {
	  transform: translate(-50%, 100%);
	}
  
	100% {
	  transform: translate(-50%, 400%);
	}
  }

  .downArrow {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
  }
  
   .downArrow>span {
	/* 矢印の大きさの設定 */
	width: 100px;
	height: 65px;
	padding: 0 10px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
  }
  
   .downArrow>span::before {
	content: "";
	display: block;
	margin: 0 auto;
	width: 50%;
	height: 40%;
	/* 矢印の色の設定 */
	background: #DC0C45;
  }
  
   .downArrow>span::after {
	content: "";
	display: block;
	width: 100%;
	height: 60%;
	/* 矢印の色の設定 */
	background: -webkit-gradient(linear, left bottom, right top, color-stop(49%, transparent), color-stop(50%, #d096bb)) top left/50% 100% no-repeat, -webkit-gradient(linear, right bottom, left top, color-stop(49%, transparent), color-stop(50%, #DC0C45)) top right/50% 100% no-repeat;
	background: linear-gradient(to top right, transparent 49%, #DC0C45 50%) top left/50% 100% no-repeat, linear-gradient(to top left, transparent 49%, #DC0C45 50%) top right/50% 100% no-repeat;
  }
  
  
  
  /*動きの速さを変更する場合は、複数あるanimation-durationの1.5s(=1.5秒)の時間を変更
  動きの回数を変更する場合は、複数あるanimation-iteration-countのinfinite（=無限,                 3=3回など）を変更*/
  .movebtn {
	-webkit-animation-name: btnAnime02;
	-webkit-animation-duration: 1.5s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease;
	-moz-animation-name: btnAnime02;
	-moz-animation-duration: 1.5s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: ease;
	align-items: flex-start;
	justify-content: center;
  }
  
  @-webkit-keyframes btnAnime02 {
  
	/*初期位置*/
	0% {
	  /*1番目の値はX方向, 2番目の値はY方向*/
	  -webkit-transform: translate(0, 0);
	}
  
	/*animation-durationで設定した値の半分の時間（50%）の時の位置*/
	50% {
	  -webkit-transform: translate(0, -8px);
	}
  
	/*animation-durationで設定した値になった（100%）時の位置*/
	100% {
	  -webkit-transform: translate(0, 0);
	}
  }
  
  /*上記の「@-webkit-keyframes btnAnime02」と同様の値にしてください*/
  @-moz-keyframes btnAnime02 {
	0% {
	  -moz-transform: translate(0, 0);
	}
  
	50% {
	  -moz-transform: translate(0, -8px);
	}
  
	100% {
	  -moz-transform: translate(0, 0);
	}
  }

  @keyframes flash {
  
	0%,
	100% {
	  opacity: 1;
	}
  
	50% {
	  opacity: 0;
	}
  }

 
   .sp {
	display: none;
  }
  
  @media (max-width: 750px) {
	 .sp {
	  display: block;
	}
  }
  
  
  
   .anno {
	text-align: right;
	font-size: small;
	color: #444444;
  }

  .cp_arrows {
	position: relative;
	height: 50px;
	margin-top: 1em;
	margin-bottom: 1em;
  }
  
   .cp_arrows .cp_arrowfirst {
	animation: arrow-move08 2s ease-in-out infinite;
  }
  
   .cp_arrows .cp_arrowsecond {
	animation: arrow-move08 2s 1s ease-in-out infinite;
  }
  
   .cp_arrows .cp_arrow {
	position: absolute;
	top: 100%;
	left: 45%;
	transform: translate(-50%, -50%);
	transform-origin: 50% 50%;
	opacity: 0;
  }
  
  @keyframes arrow-move08 {
	0% {
	  top: 40%;
	  opacity: 0;
	}
  
	70% {
	  opacity: 1;
	}
  
	100% {
	  opacity: 0;
	}
  }
  
   .cp_arrows .cp_arrow:before {
	transform: rotate(30deg) translateX(-39%);
	transform-origin: top left;
  }
  
   .cp_arrows .cp_arrow:after {
	transform: rotate(-30deg) translateX(39%);
	transform-origin: top right;
  }
  
   .cp_arrows .cp_arrow:before,
   .cp_arrows .cp_arrow:after {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 40px;
	height: 3px;
	content: '';
	background: #E91E63;
	/* ← 赤色に変更 */
  }
  
   .cp_arrows *,
   .cp_arrows *:before,
   .cp_arrows *:after {
	box-sizing: border-box;
  }

  /* CTA */
  

/* 全体の設定 */
.puyoBtn__area {
	/* 横幅（ボタンの大きさに影響します） */
	width: 500px;
	/* 最大幅 */
	max-width: 95%;
	/* 高さ */
	height: auto;
	/*外側の余白｜上下余白｜左右余白（auto=センタリング）｜*/
	margin: 30px auto;
  }
  
  
  
  /* ボタンリンクの設定 */
  .puyoBtn__area .btn {
	display: block;
	/* 横幅 */
	width: 100%;
	/* 高さ */
	height: auto;
  }
  
  
  
  /* ボタンの画像 */
  .puyoBtn__area .btn img {
	/* 横幅 */
	width: 100%;
	/* 高さ */
	height: auto;
	/*アニメーションの設定｜アニメーション名｜1回のサイクルに要する時間｜進め方｜実行回数｜*/
	animation: puyoBtn 1.6s ease-in infinite;
  }
  
  /* アニメーションの詳細設定 */
  @keyframes puyoBtn {
  
	/* タイミング */
	0% {
	  /* ボタンの拡大、縮小
	  ・値が1つ = X＆Y軸
	  ・値が2つ = X軸, Y軸 */
	  transform: scale(1.09);
	}
  
	10% {
	  transform: scale(1.09);
	}
  
	30% {
	  transform: scale(1.01);
	}
  
	40% {
	  transform: scale(1.01);
	}
  
	50% {
	  transform: scale(1, 1.04);
	}
  
	60% {
	  transform: scale(1.09);
	}
  
	70% {
	  transform: scale(1.02);
	}
  
	100% {
	  transform: scale(1.09);
	}
  }

	
.listItem__area {
    border: 2px solid #b40500;/* 外枠の赤 */
    border-radius: 8px;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    background: #fff;
}

.listItem__headBox {
    background: #b40500;
    color: #fff;
    text-align: center;
    border-radius: 6px 6px 0 0;
}

.listItem__headBox .head {
    margin: 0;
    font-weight: bold;
    font-size: 17px;
    color: #fff;
    border-top: none;
    border-bottom: none;
    text-align: center;
}

.items {
    list-style: none;
    margin: 0;
    padding: 15px 20px;
}

.items li {
    position: relative;
    margin-bottom: 14px;
    padding-left: 32px;
    font-weight: bold;
    font-size: 17px;
    color: #333;
}

/* チェックアイコン */
.items li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 18px;
    height: 18px;
    border: 2px solid #b40500;  
    border-radius: 3px;
    box-sizing: border-box;
}

/* チェック記号 */
.items li::after {
    content: "✓";
    position: absolute;
    left: 0px;
    top: -1px;
    font-size: 25px;
    color: #b40500; 
    font-weight: bold;
    line-height: 18px;
}

.items li:last-child {
    margin-bottom: 0;
}
.balloon {
    width: 100%;
    margin: 1.5em 0;
    display: flex;
}
.chatting {
    background: #efd7d2;
    margin: 0 14px auto;
    min-height: 27px;
    padding: 5px 13px;
    border-radius: 22px;
    box-shadow: 2px 2px 3px 0px #cccccc;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
}
.chatting:before {
    border-right: 12px solid #efd7d2;
    border-right-color: #efd7d2;
    left: -15px;
    border-top-right-radius: 100%;
    transform: rotate(285deg);
    width: 24px;
    height: 18px;
    top: 10px;
    content: '';
    position: absolute;
    box-sizing: border-box;
}
.faceicon img {
    width: 55px;
    max-width: 55px;
    height: 55px !important;
    object-fit: cover;
    border-radius: 50%;
    box-sizing: border-box;
}

.continue {
    display: flex;
    justify-content: center;
}

.continue div {
    display: flex;
    flex-direction: column; 
    align-items: center;
}

.continue div span {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 4px 0; /* 上下の間隔 */
    background: #000;
    border-radius: 50%;
    animation: dots 1s infinite ease-in-out;
    background-color: #ccc;
}

.continue .dot-1 {
    -webkit-animation-delay: 0.1s;
    -moz-animation-delay: 0.1s;
}
.continue .dot-2 {
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
}
.continue .dot-3 {
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
}

@keyframes dots {
    0% { opacity: 0; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.flash {
    animation: flash 2.5s 
ease infinite alternate;
    display: flex;
    justify-content: center;
}
.fadepic {
    width: 100%;
    margin: auto;
    overflow: hidden;  
    display: flex;
    align-items: center;
    justify-content: center;
}
.pic {
    width: 100%;
    margin: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;

    /* 初期状態（右にずらして透明） */
    transform: translateX(100px);
    opacity: 0;

    /* アニメーションの設定 */
    transition: all 1s ease;
}

/* 画面に入ったらここに切り替え */
.pic.active {
    transform: translateX(0);
    opacity: 1;
}

.head {
    position: relative;
    border-top: solid 2px #f30368;
    border-bottom: solid 2px #f30368;
    line-height: 2em;
    padding: 4px 5px;
    margin: 22px 0 5px;
    text-align: left;
    font-size: 24px;
    font-weight: bold;
}
.point {
    position: absolute;
    left: 0px;
    bottom: 100%;
    background: #f30368;
    color: #fff;
    border-radius: 5px 5px 0 0;
    padding: 5px 7px 3px;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.05em;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.point img {
    width: 13px;
    height: 16px;
    margin-right: 6px;
    image-rendering: -webkit-optimize-contrast;
}

.point_title {
    background: #ffffe1;
    padding: 5px;
    font-weight: bold;
    margin-bottom: 15px;
}
.point_title span {
    color: #fff;
    padding: 5px 10px;
    background: #ff7990;
    border-radius: 5px;
}

.online-reviews {
    max-width: 580px;
    width: 100%;
    margin: 1.5em auto;
    display: table;
    background-color: #fff6f6;
    border-radius: 10px;
    padding: 10px 15px;
    box-sizing: border-box;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    display: flex;
}
.online-reviews .image {
    padding: 0 10px;
    width: 45px;
    height: auto;
}
.online-reviews .image img {
    width: 45px;
    max-width: 45px;
    height: 45px !important;
    border-radius: 50%;
    object-fit: cover;
    box-sizing: border-box;
}
.online-reviews .content .title {
    font-size: 12px;
    font-weight: bold;
    margin: 0;
}
.content p.reviews {
    line-height: 1.5;
    margin: 0;
    margin: 3px 0;
}
.online-reviews .content p.detail {
    color: #989090;
    font-size: 12px;
    font-style: italic;
    margin: 0;
}
.online-reviews .content {
    width: 100%;
}

.swaying-text {
    display: block;
    animation-name: swayingText;
    animation-duration: .25s;
    animation-iteration-count: infinite;
    will-change: transform, animation;
}
@keyframes swayingText {
    0% {transform: translate(0px, 0px) rotateZ(0deg);}
    25% {transform: translate(2px, 2px) rotateZ(1deg);}
    50% {transform: translate(0px, 2px) rotateZ(0deg);}
    75% {transform: translate(2px, 0px) rotateZ(-1deg);}
    100% {transform: translate(0px, 0px) rotateZ(0deg);}
}

.move-arrow {
    font-size: clamp(12px, 3vw, 18px);
    position: relative;
    padding: 1em 2.5em;
    overflow: hidden;
    background-color: var(--bgcolor);
    line-height: 1.25;
    color: #fff;
}
.move-arrow-wrap {
    width: fit-content;
    margin: auto;
    display: grid;
    grid-template-columns: 1.5em auto 1.5em;
    justify-content: center;
    gap: 2.5em;
}
.arrow-body {
    font-size: 1.5em;
}
.move-arrow-wrap .text {
    font-size: 1.5em;
    font-weight: 600;
    text-align: center;
}
[style*="--arrow-color"] .arrow {
    background-color: var(--arrow-color);
}
.arrow-body .arrow:nth-child(2) {
    animation-delay: calc(var(--speed) / 2);
}
.arrow-body .arrow {
    position: absolute;
    width: 0.75em;
    height: 1.25em;
    background-color: #fff;
    top: -3.3em;
    animation: move var(--speed) 
linear infinite;
    margin: 1em 0;
}
.arrow-body .arrow::after {
    content: "";
    position: absolute;
    top: 80%;
    left: 50%;
    translate: -50% 0;
    width: 0;
    height: 0;
    border-top: 0.8em solid #fff;
    border-left: 0.8em solid transparent;
    border-right: 0.8em solid transparent;
}
@keyframes move {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(500%);
    }
}
.puyoBtn__area {
    width: 500px;
    max-width: 95%;
    height: auto;
    padding: 30px 0;
    margin-inline: auto;
}
.puyoBtn__area .btn img {
    width: 100%;
    height: auto;
    animation: puyoBtn 1.6s 
ease-in infinite;
}
@keyframes puyoBtn {
    0% {transform: scale(1.09);}
    10% {transform: scale(1.09);}
    30% {transform: scale(1.01);}
    40% {transform: scale(1.01);}
    50% {transform: scale(1, 1.04);}
    60% {transform: scale(1.09);}
    70% {transform: scale(1.02);}
    100% {transform: scale(1.09);}
}