﻿
.main-area{
  margin-bottom: calc(70* (100vw /375));
  font-family: var(--noto-sans);
	font-weight: normal;
	box-sizing: border-box;
}

.main-area img {
	width: 100%;
	height: auto;
}

.sp_only{
	display: block;
}

.pc_only{
	display: none;
}


/************** slick **************/
.main-area .slick-dots{
  text-align: right;
}

.main-area .slick-dots li{
  margin: 0 0 0 calc(4* (100vw /375));
  font-size: 0;
  width: calc(40* (100vw /375));
  height: calc(5* (100vw /375));
}

.main-area .slick-dots li button{
  padding: 0;
  font-size: 0;
  width: calc(40* (100vw /375));
  height: calc(5* (100vw /375));
}

.main-area .slick-dots li button:before{
  font-size: 0;
  width: 0;
  height: 0;
}

.main-area .slick-dots{
  width: fit-content;
  margin: 0;
  right: calc(27* (100vw /375));
  bottom: calc(-20* (100vw /375));
  left: auto;
}

.main-area .slick-dots li button{
  border: 1px solid #000;
}

.main-area .slick-dots li.slick-active button{
  background: #000;
}


/************** common **************/
.sec_box{
  position: sticky;
  background-color: #fff;
}

.sec_top_img{
  margin: 0 auto calc(90* (100vw /375));
  width: calc(344* (100vw /375));
}

.sec_box1{
  margin-bottom: calc(17* (100vw /375));
}

.sec_img_box{
  width: 100%;
  position: relative;
}

.sec_img04{
  margin: 0 auto;
  width: calc(320* (100vw /375));
  position: relative
}

.sec_ttl{
  margin: calc(80* (100vw /375)) auto calc(15* (100vw /375));
  width: fit-content;
  font-family: var(--roboto);
  font-size: calc(22* (100vw /375));
  letter-spacing: 0.03em;
  font-weight: 600;
  text-align: center;
}

.sec_sub_box{
  margin: 0 auto;
  width: calc(320* (100vw /375));
}

.sec_text{
  margin-bottom: calc(41* (100vw /375));
  font-size: calc(13* (100vw /375));
  letter-spacing: 0.03em;
  line-height: 2;
  white-space: nowrap;
}

.sec_tax a{
  margin-bottom: calc(10* (100vw /375));
  width: calc(279* (100vw /375));
  font-family: var(--roboto);
  font-size: calc(12* (100vw /375));
  letter-spacing: 0.1em;
  line-height: 1.16;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.sec_tax span img{
  width: calc(87* (100vw /375));
}


/************** mv **************/
.mv{
  margin-bottom: calc(27* (100vw /375));
}

.mv_img{
  margin-bottom: calc(46* (100vw /375));
}

.mv_text{
  font-size: calc(13* (100vw /375));
  letter-spacing: 0.03em;
  line-height: 2;
  text-align: center;
  font-weight: 500;
}


/************** sec01 **************/
.sec01{
  padding-bottom: calc(80* (100vw /375));
  top: -300rem;
}

img{
  max-width: 100%;
    height: auto;
}



/************** sec02 **************/
.sec02{
  padding-bottom: calc(80* (100vw /375));
  top: -330rem;
}


/************** btn **************/
.sec_btn{
  margin: 0 auto;
  padding-top: calc(90* (100vw /375));
  width: calc(320* (100vw /375));
  position: relative;
}

.sec_btn img{
  margin-bottom: calc(16* (100vw /375));
}



/*************************************************
PC用デザイン
*************************************************/
@media screen and (min-width:768px) {

.sp_only{
  display: none!important;
}

.pc_only{
  display: block;
}

.main-area{
  margin: 0 auto 10.6rem;
  max-width: 140rem;
}


/************** common **************/
.sec_top_img{
  margin: 0 auto 18rem;
  padding: 0 39.5rem 0;
  width: 100%;
}

.sec_box1{
  margin-bottom: 0;
}

.sec_ttl{
  margin: 0 1.2rem 3.2rem auto;
  font-size: 2rem;
  text-align: right;
}

.sec_sub_box{
  margin: -1rem 0 0 auto;
  width: fit-content;
  text-align: right;
}

.sec_text{
  margin-bottom: 8.4rem;
  font-size: 1.3rem;
}

.sec_tax a{
  margin: 0 0 0 auto;
  width: max-content;
  font-size: 1.2rem;
}

.sec_tax span img{
  margin: 0 0 0 1.6rem;
  width: 8.7rem;
}

.sec02_tax_2 span img{
  margin: 0 0 0 2.6rem;
}

.sec_box_2{
  margin: 0 auto 11rem;
  padding: 0 14rem;
  position: static;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12rem 0;
}

.sec_box_2 img{
  width: 49.1%;
}


/************** mv **************/
.mv{
  margin: 0 auto 5.5rem;
  position: relative;
}

.mv_img{
  margin-bottom: 7.7rem;
  position: relative;
  z-index: 50;
}

.mv_img img{
  z-index: 10;
}

.mv_text{
  font-size: 1.6rem;
}


/************** 追加したCSS **************/
.star {
  position: relative;
  margin: 0 auto;
}

.main_ttl {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0 !important;
  right: 0;
  width: 120rem;
  height: 28.2rem;
  margin: auto;
  opacity: 0;
  transition: all 0.4s;
  z-index: 4;
  pointer-events: none;
}

.main_ttl--fixed {
  position: fixed;
  top: 0;
  bottom: 0;
  left: -.5rem !important;
  right: 0;
  margin: auto;
  opacity: 1;
  z-index: 40;
}

.main_ttl--none {
  opacity: 0;
}


/************** 追加したCSS **************/


/************** sec01 **************/
.sec01{
  margin: 0 auto;
  padding-bottom: 7rem;
  top: -150rem;
}

.sec01_tax{
  margin: 0 1.3rem 0 auto;
}


/************** sec02 **************/
.sec02{
  margin: 0 auto;
  padding-bottom: 6rem; 
  top: -150rem;
}

.sec02 .sec_box_2{
  margin-bottom: 11.1rem;
}

.sec02_tax, .sec02_tax_2{
  margin: 0 1.3rem 1rem auto;
}


/************** sec03 **************/
.sec03{
  margin: 0 auto;
}

.sec03_tax{
  margin: 0 1.2rem 0 auto;
}


/************** btn **************/
.sec_btn{
  margin: 0 auto;
  padding-top: 5rem;
  width: 36rem
}

.sec_btn img{
  margin-bottom: 2rem;
}

}


/* パンくず 追加スタイル PC */
@media only screen and (min-width: 768px){
  .breadcrumb__list{
    padding-bottom: 1.6rem;
  }
}


/************************************************
sp,タブレット間調整
*************************************************/
@media only screen and (min-width: 768px) and (max-width: 979px) {
  .sec01{
    top: -90rem;
  }

  .sec02{
    top: -90rem;
  }

  .main_ttl{
    width: 90%;
    left: -1rem !important;
    padding: 0 2rem;
  }
  

}


/************************************************
タブレット,pc間調整
*************************************************/
@media only screen and (min-width: 979px) and (max-width: 1400px) {

  .sec01{
    top: -120rem;
  }

  .sec02{
    top: -120rem;
  }

  .main_ttl{
    width: 90%;
    left: -1rem !important;
    padding: 0 2em;
  }

}


/************************************************
position: fixed関連でフッターのz-index調整
*************************************************/
.summaryText,#Foot{
  z-index: 50;
  position: relative;
}