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


/* =================== 全体設定 ↓　=================== */
body{
    /* font-size: 1.6rem; */
    font-size: 16px;
    line-height: 1.5;
}
img{
    width: 100%;
    height: auto;
}
.wrapWidth {
	width: 100%;
	margin: 0 auto;
}
.boxWidth {
	width: 96%;
	max-width: 1200px;
	margin: 0 auto;
}

.caption01 {
	font-size: 12px;
	line-height: 1.4;
	padding: 1em 0;
}
#captionBox {
	text-align: center;
  padding: 15px 0;
}
#captionBox .caption {
	display: inline-block;
	text-align: justify;
}
#pageTop{
  padding-top: 150px;
}
br.brSp, br.brTab {
  display: none;
}
.capImg {
	position: relative;
}
.capImg::after {
	content: 'image';
	position: absolute;
	font-size: 10px;
	color: #fff;
	right: 0.5em;
	bottom: 0.1em;
}
.capBk::after {
	color: #000;
}

@media screen and (max-width: 959px) {
  .boxWidth {
	  width: 90%;
  }
  #pageTop{
    padding-top: 60px;
  }
  br.brTab {
    display: inherit;
  }
}
@media screen and (max-width: 599px) {
	#captionBox .caption span.non-Sp {
		display: none;
	}
  br.brSp {
    display: inherit;
  }

}

.width1000{
    max-width: 1000px;
    margin: 0 auto;
}
.width1200{

    max-width: 1200px;
    margin: 0 auto;
}
section#choicebtnWrap,
section#ftypeWrap, section#atypeWrap, section#btypeWrap, section#pointWrap{
    padding: 30px 0 70px;
}
/* (px) */
/* 959px */
@media screen and (max-width : 959px ){

}

/* 599px */
@media screen and (max-width : 599px ){
section#ftypeWrap, section#atypeWrap, section#btypeWrap, section#pointWrap{
    padding: 20px 0 40px;
}
    section#choicebtnWrap{
        padding: 20px 0 20px;
    }
}



/* =================== 全体設定 ↑　=================== */
/*========== FLEX BOX ==========*/
.flex-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .flex-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .flex-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .flex-left {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  .f-vh-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  
  


/* =================== 共通 ↓　=================== */
.brSp, .brTab{
    display: none;
}
.forSp, .forTab{
    display: none;
}
@media screen and (max-width : 959px ){
    .brTab{
        display: block;
    }
    .forTab{
        display: block;
    }
    .forPc{
        display: none;
    }
}

@media screen and (max-width : 599px ){
    .brSp{
        display: block;
    }
    .forSp{
        display: block;
    }
}


/* スライダー */
.slick-prev, .slick-next {
    display: block !important;
}
/* .slide-arrow {
    width: 30px;
    height: 30px;
    background: gray;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
} */

.slick-prev {
    width: 50px;
    height: 50px;
    background: url(../img/common/left.png) no-repeat;
    background-size: cover;
    left: 15px;
    z-index: 1000;
}
.slick-next {
    width: 50px;
    height: 50px;
    background: url(../img/common/right.png) no-repeat;
    background-size: cover;
    right: 15px;
    z-index: 1000;
}
/* .slide-arrow {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
} */
/* .prev-arrow {
  background-image: url(../img/arrow-left.svg);
  left: 0px;
}
.next-arrow {
  background-image: url(../img/arrow-right.svg);
  right: 0px;
} */
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 40px;
    line-height: 15px;
}
/* (px) */
@media screen and (max-width : 599px ){
.slick-prev {
    width: 30px;
    height: 30px;
    left: 5px;
}
.slick-next {
    width: 30px;
    height: 30px;
    right: 5px;
}
}
/* =================== 共通 ↑　=================== */



/* =================== #topWrap ↓　=================== */
#topWrap{
    position: relative;
    width: 100%;
}
#topWrap h2{
    position: absolute;
    top: 5%;
    right: 0;
    bottom: 5%;
    left: 0;
    margin: auto;
    /* display: flex; */
    align-items: center;
    justify-content: center;
    width: 70%;
}
/* (px) */
@media screen and (max-width : 599px ){
    #topWrap h2{
    bottom: 0%;
}
}

#topWrap2{
    position: relative;
}
#topWrap2 h2{
    position: absolute;
    top: 5%;
    right: 0;
    bottom: 5%;
    left: 0;
    margin: auto;
    /* display: flex; */
    align-items: center;
    justify-content: center;
    width: 70%;
}
#topWrap2 .caption{
    padding: .5em 0;
    font-size: clamp(1rem, 1.5vw ,1.2rem);
}
/* (px) */
@media screen and (max-width : 599px ){
    #topWrap2 h2{
    bottom: 0%;
}
}
#topCampWrap01{
    margin-top: 114px;
    background: #550210;
    background: linear-gradient(-50deg, rgba(85, 2, 16, 1) 0%, rgba(178, 0, 20, 1) 17%, rgba(123, 9, 34, 1) 30%, rgba(98, 0, 16, 1) 38%, rgba(137, 0, 23, 1) 46%, rgba(217, 5, 34, 1) 58%, rgba(97, 8, 22, 1) 72%, rgba(85, 1, 16, 1) 78%, rgba(107, 0, 18, 1) 85%, rgba(83, 5, 14, 1) 93%, rgba(68, 26, 32, 1) 98%);
}
#topCampWrap02{
    /* background: #01142A;
    background: linear-gradient(-50deg, rgba(1, 20, 42, 1) 0%, rgba(22, 68, 110, 1) 18%, rgba(22, 64, 119, 1) 30%, rgba(38, 65, 146, 1) 38%, rgba(22, 68, 110, 1) 46%, rgba(19, 65, 129, 1) 58%, rgba(27, 53, 122, 1) 72%, rgba(48, 82, 128, 1) 78%, rgba(4, 64, 125, 1) 85%, rgba(19, 65, 129, 1) 93%, rgba(18, 38, 90, 1) 98%); */
    background: #010a14;
    background: linear-gradient(-50deg, rgba(1, 10, 20, 1) 0%, rgba(19, 57, 92, 1) 18%, rgba(15, 43, 79, 1) 30%, rgba(26, 46, 105, 1) 38%, rgba(12, 31, 51, 1) 46%, rgba(18, 59, 115, 1) 58%, rgba(26, 49, 112, 1) 72%, rgba(22, 45, 84, 1) 78%, rgba(2, 60, 117, 1) 85%, rgba(13, 32, 56, 1) 93%, rgba(18, 38, 90, 1) 98%);
}
#topCampWrap01 h2, #topCampWrap02 h2{
    width: 90%;
    padding: 50px 0;
}
#topCampWrap02 .captionBox p.caption{
    color: #fff;
    text-align: center;
    font-size: 12px;
    line-height: 1.4;
    padding: 1em 0;
}
@media screen and (max-width : 768px ){
    #topCampWrap01{
        margin-top: 0px;
    }
    #topCampWrap01 h2, #topCampWrap02 h2{
        width: 95%;
        min-width: 300px;
        padding: 50px 0;
    }
    #topCampWrap02 .captionBox{
        margin-bottom: 10px;
    }
}

/* =================== #topWrap ↑　=================== */



/* =================== #topmsgWrap ↓　=================== */
#topmsgWrap{
    /* background: #B50005; */
    background: linear-gradient(90deg,rgba(181, 0, 5, 1) 0%, rgba(113, 0, 0, 1) 100%);
}
#topmsgWrap span{
    display: inline-block;
}
#topmsgWrap h3{
    padding: 50px 0 ;
}
#topmsgWrap h3 p{
    text-align: center;
    font-size: 3.5rem;
    line-height: 1.8;
    color: #fff;
    padding: 20px 0;
}

/* (px) */
@media screen and (max-width : 959px ){
    #topmsgWrap h3 p{
    font-size: clamp(2.3rem , 5vw ,3.2rem);
    padding: 10px 0;
    line-height: 1.6;
}

}
@media screen and (max-width : 599px ){
    #topmsgWrap h3{
    padding: 10px 0 ;
}
    #topmsgWrap h3 p{
    font-size: clamp(2.3rem , 6vw ,3.4rem);
    letter-spacing: 0.06rem;
}
}
/* =================== #topmsgWrap ↑　=================== */



/* =================== #choicebtnWrap ↓　=================== */
#choicebtnWrap div.choiceTitle span{
    font-size: 3rem;
    color: #a41f19;
    letter-spacing: .2rem;
    text-align: center;
    padding: 50px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.5;
}


/* #choicebtnWrap .choiceTitle::before, #choicebtnWrap .choiceTitle::after {
    content: '';
    width: 10%;
    height: 1px;
    background-color: #a41f19;
  }
  #choicebtnWrap .choiceTitle::before {
    margin-right: 20px;
  }
  #choicebtnWrap .choiceTitle::after {
    margin-left: 20px;
  } */


#choicebtnWrap ul{
    display: flex;
    /* justify-content: space-between; */
    justify-content: center;
}
#choicebtnWrap ul li{
    width: 32%;
    padding: 0 1%;
}
#choicebtnWrap ul li a{
    transition: 0.3s;
}
#choicebtnWrap ul li a:hover{
    opacity: .6;
}

/* (px) */
@media screen and (max-width : 959px ){
    #choicebtnWrap div.choiceTitle span{
    font-size: clamp(1.5rem, 6vw ,4rem);
    line-height: 1.3;
    padding: 20px 0;
}
}
@media screen and (max-width : 599px ){

    #choicebtnWrap ul{
    /* flex-wrap: wrap; */
    justify-content: center;
}
#choicebtnWrap ul li{
    width: 45%;
    padding: .5%;
}
#choicebtnWrap .choiceTitle span{
    letter-spacing: 0.15rem;
}
}

/* =================== #choicebtnWrap ↑　=================== */



/* =================== #F/B/btypeWrap ↓　=================== */
#atypeWrap .modelRoom, #btypeWrap .modelRoom{
    padding: 1rem 0;
    font-size: 2rem;
    color: #fff;
    text-align: center;
    letter-spacing: .8rem;
    outline: 8px dotted rgb(255, 255, 255);/*outlineでドットの線を追加*/
    outline-offset: -15px;/*outline-offsetの値を-15pxにして内側に調整*/
}
.typeTitle{
    padding: 1% 0;
}

#atypeWrap .modelRoom{
    background-color: #8D83AD;
    /* border: solid 1px #fff;    	 */
	outline: solid 1px #fff;    /* 外側の線になる一本線の枠線をひく*/
	outline-offset: -6px;        /* 外側の線と内側の線の空き具合を調整*/
	/* margin: 2px;            	 */
    /* 外側の線を広げた分、要素の大きさを調整する*/
}
#btypeWrap .modelRoom{
    background-color: #C18186;
    /* border: solid 1px #fff;    	 */
	outline: solid 1px #fff;    /* 外側の線になる一本線の枠線をひく*/
	outline-offset: -6px;        /* 外側の線と内側の線の空き具合を調整*/
	/* margin: 2px;            	 */
    /* 外側の線を広げた分、要素の大きさを調整する*/
}
.detailBox{
    border: 2px solid #5F67AE;
    background-color: #fff;
    box-shadow: 0px 0px 30px rgba(1, 1, 2, 0.3);
}
ul.detailList{
    align-items: center;
    padding: 50px 3%;
}
ul.detailList li.madori{
    width: 55%;
}
ul.detailList li.detail{
    width: 42%;
}
ul.detailList .detailType{
    /* border-bottom: 1px solid #000; */
}
ul.detailList .menseki{
    padding: 2% 0 5%;
}
ul.detailList .menseki ul li{
    display: flex;
    align-items: center;
    margin-top: 10px;
    position: relative;
    margin-left: 25px;
    letter-spacing: normal;
}
ul.detailList .menseki ul li p.itemName::before{
    content: "";
    width: 20px;
    height: 20px;
    background-color: #4c4948;
    display: block;
    position: absolute;
    left: -25px;
    /* top: -8px; */
    /* margin-top: 4px; */
}
ul.detailList .menseki span.big{
    font-size: 140%;
}
ul.detailList .menseki span.bigger{
    font-size: 170%;
}
/* (px) */
@media screen and (max-width : 959px ){
    #atypeWrap .modelRoom, #btypeWrap .modelRoom{
    font-size: clamp(1.5rem, 4vw, 2rem);
}

ul.detailList .menseki ul li{
    flex-direction: column;
    align-items: flex-start;
    font-size: clamp(0.8rem, 2vw, 1.6rem );
    line-height: 1.3;
    /* ↑左寄せにしてる */
}
ul.detailList .menseki ul li::before{
    top: 3px;
}
}
@media screen and (max-width : 599px ){
    #atypeWrap .modelRoom, #btypeWrap .modelRoom{
    letter-spacing: .7rem;
}
.typeTitle{
    padding: 2% 0;
}
ul.detailList li.madori{
    width: 70%;
    min-width: 280px;
    padding-bottom: 5%;
}
ul.detailList .detailType{
    padding: 0 0 0 2%;
}
ul.detailList{
    flex-direction: column;
}
ul.detailList li.detail{
    width: 95%;
}
ul.detailList .menseki{
    max-width: 480px;

}
ul.detailList .menseki ul li{
    flex-direction: row;
    /* align-items: start; */
    /* ↑左寄せにしてる */
    align-items: center;
}
ul.detailList .menseki ul li p.itemName::before{
    width: 15px;
    height: 15px;
    left: -20px;
    margin-top: 4px;
}
}
/* =================== #F/B/btypeWrap ↑　=================== */



/* =================== #pointWrap ↓　=================== */
#pointWrap .pointBox{
    border: 2px solid #00498A;
}
#pointWrap .mrPoint h4{
    background-color: #00498A;
    color: #FFF100;
    font-size: 2rem;
    text-align: center;
    padding: 2% 0;
    line-height: 1.5;
}
#pointDetail{
    padding: 5% 0 5% 0;
}
#pointWrap .points{
    font-size: 1.1rem;
    padding: 0 0 4% 0;
}
#pointWrap .points .caption01{
    font-size: 70%;
}
#pointWrap .points:nth-child(3){
    padding-bottom: 5%;
}
#pointWrap .points .pointTitle{
    display: flex;
    align-items: center;
    font-size: 1.5rem;
}

#pointWrap .pointTitle div{
    width: 60px;
}
#pointWrap .pointTitle p{
    padding-left: 3%;
}
#pointWrap .pointDetail{
    display: flex;
    padding: 2% 0 0 0;
}
#pointWrap .pointDetail div{
    width: 40%;
    padding-left: 3%;
}
#pointWrap .pointDetail p{
    font-size: clamp(14px, 2.3vw, 18px);
    padding: 0 3%;
    width: 60%;
    line-height: 1.4;
    letter-spacing: .1rem;
}
#pointWrap .pointDetail span.caption01{
    display: inline-block;
    /* line-height: 1.4; */
}
.meritBox{
    padding: 3% 0;
}

/* (px) */
@media screen and (max-width : 959px ){
    #pointWrap .mrPoint h4{
    font-size: clamp(1.5rem, 4vw, 2rem);
}
#pointWrap .points .pointTitle{
    font-size: clamp(1rem, 3vw, 1.5rem);
}
#pointWrap .points{
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    padding: 0 0 2% 0;
}
#pointWrap .pointDetail{
    display: block;
    padding: 2% 0 0 0;
}
#pointWrap .pointDetail div{
    width: clamp(250px, 90%, 500px);
    padding: 3%;
    margin: 0 auto;
}
#pointWrap .pointDetail p{
    padding: 3% 0;
    width: 90%;
    margin: 0 auto;
}

}
@media screen and (max-width : 599px ){
    #pointWrap .points .pointTitle{
    line-height: 1.4;
}
#pointWrap .pointDetail p{
    width: 100%;
}
}



/*メインコンテンツ*/

/*        860px以下　SP
=========================================*/
@media only screen and (max-width: 767px) {
}



/*				special-camp
==============================*/



/*        860px以下　SP
=========================================*/
@media only screen and (max-width: 767px) {
    
    
    
    
}