@charset "utf-8";

body{
	background-color: #272727;
	overflow-x: hidden;
	font-family: 'Noto Sans', sans-serif;
}

h1{
  font-size: 40px;
}

h2{
  font-size: 30px;
  font-weight: inherit;
}

h3{
  font-size: 25px;
  font-weight: inherit;
}


/*---- ファーストビュー ----*/


.fv-wrap img{
	height: 400px;
	position: relative;
    width: 100%;
	object-fit: cover;
}

/* Frame */
.frame {
  background-color: #272727;
  height: 120px;
  padding: 50px 0;
  margin-left: calc(10% - 50px);
}
.fv-img {
  opacity: 0;
  transform: translateY(30px); /* 下からふわっと */
  animation: fadeUp 2s ease-out forwards;
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Title */
.title {
  top: 84px;
  left: 133px;
  font-family: 'Anton', Helvetica, sans-serif;
  font-weight: 400;
  color: white;
  font-size: 40px;
  letter-spacing: 2px;
  line-height: 63px;
  white-space: nowrap;
  margin: 0;
}


/* Badge */
.badge {
  position: relative;
  top: 10px;
  height: 50px;
  padding: 4px 12px;
  background-color: transparent;
  border: 1px solid white;
  border-radius: 6px;
  color: white;
  font-family: 'Noto Sans', Helvetica, sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: normal;
  display: inline-flex;
  align-items: center;
}

.badge::before {
  content: "";
  position: absolute;
  bottom: -28px;
  left: 80%;
  transform: translateX(-50%);
  border-width: 15px;
  border-style: solid;
  border-color: #272727 transparent transparent transparent;
  z-index: 2;
}

.badge::after{
  content: "";
  position: absolute;
  bottom: -32px;
  left: 80%;
  transform: translateX(-50%);
  border-width: 16px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  z-index: 1;
}


/* Responsive design */

@media (max-width: 768px) {
	
.fv-wrap img{
	height: 200px;
	position: relative;
    width: 100%;
	object-fit: cover;
}
	

.frame {
    height: 60px;
    padding: 30px;
  }
  
.title {
    position: static;
    font-size: 24px;
  }
  
.badge {
	position: relative;
    text-align: center;
	top: -10px;
    margin: 0 auto;
    width: fit-content;
	font-size: 12px;
	height: 25px;
  }
}

.badge::before {
  bottom: -26px;
}

.badge::after{
  bottom: -25px;
  border-width: 12px;
}


/*基本方針*/

.Basic-policy {
  display: flex;             /* 中央寄せのためにflexbox使用 */
  justify-content: center;   /* 横方向中央 */
  align-items: center;       /* 縦方向中央 */
  min-height: 100vh;         /* 画面の高さに合わせる */
  text-align: left;          /* テキストを中央寄せ */
  color: white;              /* 文字を白に */
}

.policy-content {
  max-width: 1100px;          /* 横幅制限（読みやすさのため） */
  padding: 20px;             /* 余白 */
}

.detail-content{
  padding: 25px 0;
}

.last-detail {
	padding-bottom: 200px;
}

 .sub-items {
  text-align: center;
}

.sub-items ol{
  list-style-position: inside; /* 番号を内側にする（中央寄せでもズレにくく） */
  display: inline-block;       /* コンテンツ幅に縮めてブロック化 */
  text-align: left;             /* 番号とテキストは左揃え */
  padding: 0 !important;      /* デフォルトデザインの削除 */
}

.sub-items li{
  text-indent: -1em;   /*2行目以降をインデント（字下げ）する方法はすごく簡単です。*/
  padding-left: 1em;
}


/* 📱スマホ対応（画面幅768px以下） */
@media screen and (max-width: 768px) {
	
h2{
   font-size:  20px;
 }	
	
h3{
   font-size:  18px;
 }

p{
   font-size:  12px;
 }
	
.policy-content {
    padding: 15px;         /* 余白を少し詰めて狭い画面に対応 */
 }

.detail-content {
    padding: 15px 0;       /* 各項目の上下余白を少し狭める */
	margin: 0px 20px;
  }

.sub-items ol {
    font-size: 12px;       /* 文字をやや小さくして改行を防ぐ */
    line-height: 1.6;
  }
}


/* 📱スマホ対応（画面幅768px以下） */
@media screen and (max-width: 480px) {
	
.sub-items ol {
   padding: 0
  }
	
.Basic-policy{
	border-bottom: 2px solid #fff;
	}
	
}