@charset "utf-8";
/*-------------------------------------*/
/*	トップページ	*/
/*-------------------------------------*/
/*初期アニメーション*/
#opening {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
 background-color: #001C09;
 background-image: url("../images/bg_loading.svg");
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
  z-index:1000;
}
 
#opening .op_img{
  position: absolute;
top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	z-index: 1100;
	width: 70%;
  max-width: 400px;
}
#opening .op_img p:first-of-type{
	      -webkit-animation: fadeIn 1.0s ease 0s 1 normal;
    animation: fadeIn 1.5s ease 0s 1 normal;
}
#opening .op_img p:last-of-type{
	      -webkit-animation: fadeIn 2s ease 1s 1 normal;
    animation: fadeIn 1.5s ease 1s 1 normal;
}
@keyframes fadeIn {
    0% {
      opacity: 0
    }

    100% {
      opacity: 1
    }
  }

  @-webkit-keyframes fadeIn {
    0% {
      opacity: 0
    }

    100% {
      opacity: 1
    }
  }
@media screen and (max-width: 768px) {
#opening .op_img{
	width: 70%;
}
}

/*メインビジュアル*/

#mv_wrap{
	background-image: url("../images/main_img02.png");
	background-position: center;
	background-size: cover;
	width: 100%;
	height: 100vh;
	position: relative;	
}
#mv_wrap h2{
	width: 80%;
	max-width: 550px;
    position: absolute;
    bottom: 10%;
    right: 10%;
}
@media screen and (max-width: 1000px){	
}
@media screen and (max-width: 767px){	
	#mv_wrap{
	background-image: url("../images/main_img02_sp.png");
	height: 100dvh;
}
#mv_wrap h2{
	width: 70%;
	max-width: 550px;
    position: absolute;
		bottom: 10%;
    right: 5%;
}
}
@media screen and (max-width: 550px){

}

/*	sld	*/
.sld{
	margin: 0 auto;
	max-width: 930px;
}
/* 矢印の当たり判定（ボタン） */
.sld .slick-prev,
.sld .slick-next {
  width: 50px;
  height: 50px;
  z-index: 2;
}

/* 矢印アイコン本体 */
.sld .slick-prev::before,
.sld .slick-next::before {
  font-size: 50px;   /* ← 矢印の大きさ */
  line-height: 50px;
  color: #FFFFFF;       /* 色はお好みで */
}
.sld .slick-prev {
  left: -25px;
}

.sld .slick-next {
  right: -25px;
}
.sld .slick-prev:hover,
.sld .slick-next:hover {
  background: rgba(255,255,255,1);
}
/* ドット全体の位置調整（任意） */
.sld .slick-dots {
  bottom: 15px; /* お好みで */
}

/* 通常ドット（非アクティブ） */
.sld .slick-dots li button::before {
  font-size: 10px;          /* ドットサイズ */
  color: #999;              /* グレー */
  opacity: 1;               /* 透明度を固定 */
}

/* アクティブ時 */
.sld .slick-dots li.slick-active button::before {
  color: #fff;              /* 白 */
}
/* ドットをスライド外（下）に配置 */
.sld .slick-dots {
  position: static;     /* absolute を解除 */
  margin-top: 16px;     /* スライドとの間隔 */
  padding: 0;
  text-align: center;
}

@media screen and (max-width: 991px) {
	/* 矢印の当たり判定（ボタン） */
.sld .slick-prev,
.sld .slick-next {
  width: 30px;
  height: 30px;
  z-index: 2;
}

/* 矢印アイコン本体 */
.sld .slick-prev::before,
.sld .slick-next::before {
  font-size: 30px;   /* ← 矢印の大きさ */
  line-height: 30px;
  color: #FFFFFF;       /* 色はお好みで */
}
.sld .slick-prev {
  left: -10px;
}

.sld .slick-next {
  right: -10px;
}
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 550px) {
}
/*===================================================
	sec01
===================================================*/

#sec01{
	background-image: url("../images/bg_metal.png");
	background-position: center top;
	background-repeat: repeat;
}
#sec01 p{
	margin-bottom: 20px;
}
/*===================================================
	sec02
===================================================*/
#sec02 h2.midashi01{
	margin-bottom: 0;
	padding: 40px;
	background-color: #001C09;

}
#sec02 .bg{
	background-image: url("../images/bg_metal.png");
	background-position: center top;
	background-repeat: repeat;
}
.point_box{
	background-color: #FFFFFF;
}
.point_box h3{
	background-color: #00371B;
	padding: 15px 15px;
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.5;
}
.point_box h3 span{
	font-size: 3rem;
	font-weight: 700;
	font-family: "Oswald", sans-serif;
	margin-right: 10px;
}
.point_box .inner{
	color: #000000;
	padding: 1em;
}
.point_box h4{
	font-size: 2.0rem;
	font-weight: 700;
	line-height: 1.5;
}
.point_box h4::before{
content: "●";
color: #EEC983;
margin-right: 5px;
font-size: 1.6rem;
}
.point_box .inner p{
	font-size: 1.6rem;
	margin-bottom: 10px;
}

@media screen and (max-width: 991px) {
}
@media screen and (max-width: 768px) {
	.point_box h3{
	font-size: 2.0rem;
}
.point_box h3 span{
	font-size: 2.6rem;
}
.point_box h4{
	font-size: 1.8rem;
}
.point_box h4::before{
font-size: 1.4rem;
}
.point_box .inner p{
	font-size: 1.4rem;
	margin-bottom: 10px;
}
}
@media screen and (max-width: 550px) {

}
/*===================================================
	sec03
===================================================*/
#sec03{
	background-color: #001C09;
}
.comment_box{
	max-width: 600px;
	margin: 0 auto;
	display: flex;
	background-color: #FFFFFF;
	align-items: center;
	justify-content: space-between;
}
.comment_box p{
color: #000000;
padding: 1em;
font-size: 1.6rem;
}
.comment_box dt{
width: 25%;
text-align: center;
}
.comment_box dd{
width: 75%;
color: #000000;
padding: 1em;
font-size: 1.6rem;
}
@media screen and (max-width: 550px) {
	.comment_box{
flex-direction: column-reverse;
}
.comment_box dt{
width: 100%;
}
.comment_box dd{
width: 100%;
color: #000000;
padding: 1em;
font-size: 1.6rem;
}
}
/*===================================================
	price
===================================================*/
#price{
	background-image: url("../images/bg_metal.png");
	background-position: center top;
	background-repeat: repeat;
}
.plan_box{
	background-color: #FFFFFF;
	margin-bottom: 60px;
}
.plan_box h2{
	background-color: #00371B;
	color: #EEC983;
	text-align: center;
	padding: 15px;
	line-height: 1.5;
	font-weight: 700;
	font-size: 2.8rem;
}
.plan_box .inner{
	color: #000000;
	text-align: center;
	padding: 1em;
}
.plan_box .inner h3{
color: #00371B;
font-weight: 700;
margin-bottom: 30px;
line-height: 1.5;
font-size: 3.6rem;
}
.plan_box .inner h3 span{
font-weight: 700;
background:linear-gradient(transparent 90%, #EEC983 90%);
}
.price_box h3{
	line-height: 1.5;
	margin-bottom: 20px;
	font-weight: 700;
	font-size: 2.8rem;
}
.price_box small{
	font-size: 1.2rem;

}
.size-price-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 16px;
}

.size-price-table th,
.size-price-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #EEC983;
}

/* 上の罫線も入れたい場合 */
.size-price-table tr:first-child th,
.size-price-table tr:first-child td {
  border-top: 1px solid #EEC983;
}

/* サイズ（S / M / L …） */
.size-price-table th {
  text-align: left;
  font-weight: 600;
  color: #000;
  width: 60%;
	font-size: 2.0rem;
}
.size-price-table th span{
	font-size: 70%;

}
/* 金額 */
.size-price-table td {
  text-align: right;
  color: #000;
  white-space: nowrap;
	font-size: 2.0rem;
}

@media screen and (max-width: 991px) {
}
@media screen and (max-width: 768px) {
	.plan_box h2{
	font-size: 1.8rem;
}
.plan_box .inner h3{
margin-bottom: 20px;
line-height: 1.5;
font-size: 2.4rem;
}
.plan_box .inner p{
text-align: left;
}
.price_box h3{
	line-height: 1.5;
	margin-bottom: 10px;
	font-weight: 700;
	font-size: 2.2rem;
}
/* サイズ（S / M / L …） */
.size-price-table th {
	font-size: 1.6rem;
}
/* 金額 */
.size-price-table td {
	font-size: 1.6rem;
}
}
@media screen and (max-width: 550px) {
}
/*===================================================
	about
===================================================*/
#about{
	background-image: url("../images/bg01.jpg");
	background-size: cover;
}
/*===================================================
	contact
===================================================*/
#contact{
	background-image: url("../images/bg02.jpg");
	background-size: cover;
	text-align: center;
}
#contact {

}
/*===================================================
	service
===================================================*/
.service_box{
	background-color: #FFFFFF;
	padding: 15px;
}
.service_box p{
	color: #000;
padding-top: 15px;
text-align: center;
font-size: 2.4rem;
font-weight: 700;
}
@media screen and (max-width: 991px) {
}
@media screen and (max-width: 768px) {
	.service_box p{
font-size: 1.8rem;
}
}
@media screen and (max-width: 550px) {
}
/*-------------------------------------*/
/*	ページ共通	*/
/*-------------------------------------*/
.ttl{
	margin-bottom: 60px;
	font-family: "Oswald", sans-serif;
	font-size:  7.0rem;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
	position: relative;
	padding-bottom: 20px;
}
.ttl::before{
content: "";
width: 100px;
height: 5px;
background-color: #EEC983;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
.caption{
	font-size: 2.4rem;
	font-weight: 700;
	margin-bottom: 40px;
}
.caption span{
	font-weight: 700;
	background:linear-gradient(transparent 90%, #EEC983 90%);

}
@media screen and (max-width: 767px){
.ttl{
	margin-bottom: 40px;
	font-size:  5.0rem;
	padding-bottom: 10px;
}
.ttl::before{
content: "";
width: 70px;
height: 3px;
}
.caption{
	font-size: 1.8rem;
	margin-bottom: 20px;
}
}
@media screen and (max-width: 550px){

}