@-webkit-keyframes loaded{
		0%{-webkit-transform:translateY(50%);transform:translateY(50%);opacity:0;}100%{-webkit-transform:translateY(0px);transform:translateY(0px);opacity:1;}
	}
	@keyframes loaded{
		0%{-webkit-transform:translateY(50%);transform:translateY(50%);opacity:0;}100%{-webkit-transform:translateY(0px);transform:translateY(0px);opacity:1;}
	}
	@-webkit-keyframes fadeIn{0%{opacity:0;}100%{opacity:1;}} @keyframes fadeIn{0%{opacity:0;}100%{opacity:1;}}
	
	body{font-family: 'Kosugi Maru','Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;margin:0;padding:0;word-break:break-all;-webkit-box-sizing:border-box;box-sizing:border-box;color:#000000;background:#fff;}
	h1,h2,,p,footer{line-height:1.8;letter-spacing:.05em;margin:0;}
	a:focus, a:hover{text-decoration:none;}
	h4{color:#585858;text-align: center;font-size: 21px;line-height:1.2;}
	ul{padding:0;}ul li{list-style:none;text-indent:0;font-size:12px;}
	
	.fadeIn{animation:fadeIn .8s ease-in;}
	
	section{margin:0 auto;padding:0 0 0;}
	section h2{margin:32px 16px 0;padding:8px 0;-webkit-clip-path:polygon(100% 0, 94% 50%, 100% 100%, 0% 100%, 6% 50%, 0% 0%);clip-path:polygon(100% 0, 94% 50%, 100% 100%, 0% 100%, 6% 50%, 0% 0%);color:#fff;background:#f6b80a;font-weight:bold;text-align:center;}
	@media (min-width:768px){
		section h2{-webkit-clip-path:polygon(100% 0, 98% 50%, 100% 100%, 0% 100%, 2% 50%, 0% 0%);clip-path:polygon(100% 0, 98% 50%, 100% 100%, 0% 100%, 2% 50%, 0% 0%);}}
	
	article{;padding:16px;background:#fff;border-radius:8px;}
h3{  font-family: 'M PLUS Rounded 1c', sans-serif;
color:#12448F; border-bottom:3px solid #12448F; font-size:1.8em; font-weight: bold; margin-bottom:8px;}
	article h4{font-weight:bold;color:#f0ad4e;}
	article p{margin:0;}

p.category{text-align: center; padding:10px;color:#d35400;font-weight:bold;}

html {
	scroll-behavior: smooth;
}

a,
a:visited,
a:hover,
a:active,
a:focus {
  text-decoration: none !important;
}

.obi{
	text-align: center;
	background-color: #FFF;
	margin:0 auto;
	padding: 10px 0px;
	font-weight: 700;
}

.img_wrap img{
  width: 100%;
  cursor: pointer;
  transition-duration: 0.3s;
}
.img_wrap:hover img{
  opacity: 0.6;
  transition-duration: 0.3s;
}
.header{
padding:30px 30px 50px 30px; 
   	background:#fff;
   	line-height: 28px;
}
.midashi{		
	text-align: center;
	color:#fff;
	font-size:17px;
	font-weight: 700;
}

.area1,.area2{
   background-color: #fff;
   padding: 50px 50px 10px 50px;
}

.area1 p,
.area2 p{
   margin-top: 20px;
}

.area1 p{
   text-align: center;
   font-weight: 800;
}

.area2 p{
  text-align: left;
  font-weight: 400;
  font-size: 12px;
}
.area2-top{
  
}
section h2{
   max-width: 400px;
   margin:0 auto !important;
}
h2{
   font-size: 20px !important;
}
.area3{
    padding-top: 30px;
    background: #eff2f7 !important;
    background-size: contain; /* 圖片完整顯示在盒子內 */
    background-position: top center; /* 圖片置頂並水平居中 */
    background-repeat: no-repeat; /* 不重複 */
}
footer {
    background: #12448F;
    color: #fff;
    height: 30px;
    text-align: center;
}

.box {
width: 100%;
}

.flex {
	display: flex;
	flex-flow: wrap;
	align-items: stretch;
}

.card {
    width: calc(50% - 10px);
    margin: 5px;
    background-color: #fff;
    border-radius: 8px;
    padding: 10px 10px 25px;
    position: relative;
}
.card.recommend::after{
	content: 'おすすめ';
    display: block;
    width: 64px;
    text-align: center;
    background: #ff0000;
    color: #FFF;
    border-radius: 20px;
    position: absolute;
    top: -5px;
    right: -5px;
    font-size: 11px;
    font-weight: bold;
    line-height: 2;
}

.card a img{
	width: 100%;
	height: 80px;
	object-fit: contain;
}

.pt-top{
    width: 100%;
    color: #383838;
    font-size: 17px;
    text-align: center;
    font-weight: 700;
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
}

.pt{
    width: 100%;
    font-size: 18px;
    color: red;
    text-align: center;
    font-weight: 700;
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
}

.text_1{
  font-size: 14px;
  font-weight: 700;
  color: #383838;
  margin: 10px 0px;
  line-height: 1.2;
  text-align:center;
}

.text_2{
  font-size: 10px;
  font-weight: 700;
  color: #383838;
  line-height: 1.2;
  text-align:center;
}
.midashi2{		
    text-align: center;
    padding: 15px;
    background-color: #12448F;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}

.heading{
	padding-top: 30px;
	font-size: 15px;
    text-align: center;
    font-weight: 600;
    letter-spacing: 3px;
}

.heading2{
  	font-weight: 900;
  	font-style: normal;
	font-size: 20px;
    text-align: center;
    letter-spacing: 1px;
    background-color: #d6c6a0;
     padding-top: 10px;
    padding-bottom: 10px;
}

.explanation{
	  width: 80%;
    display: block;
    margin: 0 auto;
    margin-bottom: 5px;
    animation: fadeIn 1s linear;
    animation-fill-mode: both;
}
.bottom-text{
 font-weight:300;
 margin: 0px 30px;
 color: #494949;
 margin-bottom:30px;	
}
.bottom-text p{
	 text-align:left;
	 margin: 30px;
	 font-size:13px;
}
.bottom-text{
 font-weight:300;
 margin: 0px 30px;
 color: #494949;
 margin-bottom:30px;	
}
.bottom-text p{
	 text-align:left;
	 margin: 30px;
	 font-size:13px;
}

.point2{
	background:#f4b8b8;
	margin-top: 20px;
	padding: 5px;
}

span{
	background:linear-gradient(transparent 60%, #f8ff85 60%);
}

.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 20px;
  background-color: #12448F;
  color: white;
  font-size: 24px;
  padding: 9px 16px;
  border-radius: 50%;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  z-index: 999;
  display: none;
  transition: all 0.3s ease;
}

.category-buttons {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 12px;
  margin: 30px 16px;
}

.category-buttons a {
  flex: 1 1 calc(33.333% - 12px); /* 三欄式 */
  text-align: center;
  background-color: #12448F;
  color: #fff;
  font-weight: bold;
  padding: 14px 8px;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 14px;
  border-bottom: 4px solid #051e45;
}

.category-buttons {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 12px;
  margin: 30px 16px;
}

.category-buttons a:hover {
  background-color: #0d58c8;
  color: #fff;
  transform: translateY(-2px);
}

.powl-buttons {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 12px;
  margin: 30px 16px;
}

.powl-buttons a {
  flex: 1 1 calc(33.333% - 12px); /* 三欄式 */
  text-align: center;
  background-color: #8dcf3f;
  color: #fff;
  font-weight: bold;
  padding: 14px 8px;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 14px;
  border-bottom: 4px solid #bee28a;
}

.powl-buttons a:hover {
  background-color: #bee28a;
  color: #fff;
  transform: translateY(-2px);
}
/* A */
/* Text*/
.top-image {
  width: 100%;
  height: auto; /* 保持比例不變形 */
  display: block; /* 移除底下多餘的空白 */
}
.bonus-section {
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  padding-top: 30px;
  padding: 50px;
  background: #fff;
}

.title {
  font-size: 28px;
}
.bonus-box-container {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}

.bonus-box {
  margin-top: 20px;
  flex: 1;
  border: 4px solid;
  border-radius: 20px;
  padding: 40px 25px;
  box-sizing: border-box;
  background: #fff;
  min-width: 320px;
  position: relative;
}

.bonus-box.green {
  border-color: #7bd342;
}

.bonus-box.blue {
  border-color: #12448F;
}
.bonus-box.gary {
  border-color: #b7b7b7;
}
.box-powl {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  padding: 10px 25px;
  border-radius: 8px;
  display: inline-block;
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  line-height: 1.6;
}

/* 2 */
.B-box {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 2rem;
}

.B-item {
  flex: 1 1 45%;
  background: #fff;
  border: 1px solid #dde4ff;
  padding: 1.5rem;
  border-radius: 10px;
  text-align: center;
}

.B-item h4 {
  color: #003399;
  margin-bottom: 0.5rem;
}

.Bbtn {
  display: inline-block;
  margin-top: 1rem;
  padding: 2rem 7rem;
  background-color: #003399;
  color: #fff;
  border-radius: 40px;
  text-decoration: none;
  transition: 0.3s;
}

.Bbtn:hover {
  background-color: #002277;
}

.Bbtn-secondary {
  background-color: #0055cc;
}

/* インストール */

/* 加入箭頭 */
.box-powl::after {
  content: "";
  position: absolute;
  bottom: -8px; /* 箭頭距離底部距離 */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #7bd342; /* 與背景色一致 */
}
.box-ana-pocket {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  padding: 10px 25px;
  border-radius: 8px;
  display: inline-block;
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  line-height: 1.6;
}

/* 加入箭頭 */
.box-ana-pocket::after {
  content: "";
  position: absolute;
  bottom: -8px; /* 箭頭距離底部距離 */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #12448F; /* 與背景色一致 */
}

.powl-bg {
  background-color: #7bd342;
}

.ana-pocket-bg {
  background-color: #12448F;
}

.box-content {
  font-size: 16px;
  color: #333;
  line-height: 1.8;
}

.box-content strong {
  font-weight: 700;
  font-size: 18px;
}

.ana-detail > h2{
    background: #12448F !important;
}

.powl-detail > h2{
    background: #7bd342 !important;
}


/* 手機版設定 */
@media screen and (max-width: 767px) {
  .DL-bonus-box {
    flex-direction: column;
  }
  .bonus-box-container {
    flex-direction: column;
    align-items: center;
    gap: 50px;
  }

  .bonus-box {
    margin-top: 20px;
    width: 90%;
    padding: 20px;
  }

  .box-header {
    font-size: 22px;
    padding: 8px 20px;
    line-height: 1.6;
    }

  .box-content {
    font-size: 14px;
    line-height: 1.6;
  }

  .box-content strong {
    font-size: 16px;
  }

  .title {
    font-size: 22px;
    margin-bottom: 25px;
  }

  .kv-wrapper {
  	width: 100%;
    height: auto;
  }

  .kv-ta {
    width: 40%;
    top: 0;
  }

  .kv-fg {
    width: 90%;
    max-width: 95vw;
    opacity: 1;
    margin-top: 5vh;
  }

  .kv-fg2 {
    width: 90%;
    max-width: 95vw;
    opacity: 1;
  }
  }

.attention{
	font-size: 10px;
	text-align: center;
	font-weight: 800;
	padding: 10px;
}



@media screen and (max-width: 540px) {
  .bonus-section {
  padding: 0px;
  }

  .area1,.area2 {
    padding: 30px;
   }

   .area2{
    margin-top: -80px;
   }

  .area2 > h2{
    font-size: 16px!important;;
  }

  .sp-top{
    margin-top: -20px;
  }

   .sp-bottom{
      margin-bottom: 50px;
   }

   .sp-midashi{
    padding-top: 20px;
   }
}


@media (min-width: 1024px) {
	body{width: 1024px;
		 margin: 0 auto !important;
		 background-color: #f2f2f2 !important;
      }
		 
}

/* A */

/* 小螢幕時變成兩欄 */
@media screen and (max-width: 600px) {
  .category-buttons a {
    flex: 1 1 calc(50% - 12px);
  }
  
}