﻿
.main-area{
  font-family: var(--hirakaku);
	font-weight: normal;
	overflow: hidden;
	box-sizing: border-box;
}

.main-area img {
	width: 100%;
	height: auto;
}

.sp_only{
	display: block;
}

.pc_only{
	display: none;
}

.sec{
  margin: 0 auto;
  width: calc(345* (100vw /375));
}

.sec_white_box{
  background-color: #fff;
  position: relative;
}

.sec_bg{
  padding: calc(64* (100vw /375)) 0 calc(116* (100vw /375));
  background-color: #F5F5F5;
}

/************** commmon **************/
/*** slick ***/
.slick-slider .slick-track, .slick-slider .slick-list{
  height: calc(266* (100vw /375));
}

.main-area .slick-track{
  background-color: #F7F4EC;
}

.main-area .slick-initialized .slick-slide{
  width: auto !important;
}

.main-area .slick-slide img{
  width: auto !important;
  height: calc(264* (100vw /375));
}

.main-area .slide_target {
  pointer-events: none;
}

/*** sec_ttl ***/
.sec h3{
  font-family: var(--inter);
  text-align: center;
  font-size: calc(26* (100vw /375));
  letter-spacing: 0.1em;
  font-weight: 700;
}

.sec_white_box h3{
  position: absolute;
  top: calc(-12* (100vw /375));
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

/*** sec_coordinate ***/
.sec_coordinate{
  margin: 0 auto;
  width: calc(315* (100vw /375));
}

/*** corde_img ***/
.corde_img{
  margin-bottom: calc(5* (100vw /375));
}

/*** corde_text ***/
.corde_text{
  margin: 0 auto calc(10* (100vw /375));
  font-size: calc(14* (100vw /375));
  letter-spacing: 0.1em;
  line-height: 1.71;
  text-align: center;
  font-weight: 600;
}

/*** corde_tax_link ***/
.corde_tax_link li a{
  padding: calc(9* (100vw /375)) calc(10* (100vw /375)) calc(9* (100vw /375)) calc(5* (100vw /375));
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  font-family: var(--inter);
  font-size: calc(11* (100vw /375));
  letter-spacing: 0.1em;
  background-image: linear-gradient(to right, #000, #000 1px, transparent 1px);
  background-size: 3px 1px;
  background-position: left top;
  background-repeat: repeat-x;
}

.corde_tax_link li:nth-last-child(1){
  background-image: linear-gradient(to right, #000, #000 1px, transparent 1px);
  background-size: 3px 1px;
  background-position: left bottom;
  background-repeat: repeat-x;
}

.corde_tax_text{
  width: calc(216* (100vw /375));
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.corde_tax_text span{
  width: max-content;
}

.corde_tax_btn{
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(58* (100vw /375));
  height: calc(20* (100vw /375));
  font-size: calc(11* (100vw /375));
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1em;
  color: #fff;
  background-color: #000;
}

/************** mv **************/
.mv{
  margin: 0 auto calc(50* (100vw /375));
  padding: calc(30* (100vw /375)) 0 calc(64* (100vw /375));
  background-color: #F7F4EC;
}

.mv_img{
  margin: 0 auto calc(6* (100vw /375));
}

.mv_text{
  position: relative;
}

.mv_text::before{
  width: 100%;
  height: 1px;
  content: '';
  display: block;
  position: absolute;
  top: calc(86* (100vw /375));
  background-repeat: no-repeat;
  background-size: contain;
  background-color: rgba(112,112,112,0.2);
}

.mv_text::after{
  width: 100%;
  height: 1px;
  content: '';
  display: block;
  position: absolute;
  top: auto;
  bottom: calc(-15* (100vw /375));
  background-repeat: no-repeat;
  background-size: contain;
  background-color: rgba(112,112,112,0.2);
}

.mv_text_img{
  margin: 0 calc(18* (100vw /375)) calc(28* (100vw /375)) auto;
  width: calc(266* (100vw /375));
}

.mv_text_box{
  margin: 0 auto;
  width: max-content;
}

.mv_text p{
  font-size: calc(13* (100vw /375));
  text-align: center;
  line-height: 1.84;
  letter-spacing: 0.1em;
}

.mv_text .bold_text{
  margin-bottom: calc(5* (100vw /375));
  font-size: calc(14* (100vw /375));
  font-weight: 600;
}

/************** main_content **************/
.main_content{
  margin: 0 auto calc(67* (100vw /375));
  width: calc(345* (100vw /375));
}

/************** color_link **************/
.color_link{
  margin-bottom: calc(72* (100vw /375));
}

.color_link h3{
  margin-bottom: calc(10* (100vw /375));
}

.sec_sub_ttl{
  margin: 0 auto calc(30* (100vw /375));
  text-align: center;
  font-size: calc(14* (100vw /375));
  font-weight: 600;
  letter-spacing: 0.1em;
}

.link_box{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(59* (100vw /375)) calc(22.5* (100vw /375));
}

.link_box li{
  width: calc(100* (100vw /375));
  border-bottom: #000 solid 1px;
  position: relative;
}

.link_box li a{
  padding-bottom: calc(9.5* (100vw /375));
  display: block;
}

.link_box li::before{
  width: calc(16* (100vw /375));
  height: calc(9* (100vw /375));
  content: '';
  display: block;
  position: absolute;
  top: auto;
  bottom: calc(-25* (100vw /375));
  left: calc(42* (100vw /375));
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/link_arrow.svg);
}

.link_box .color_text{
  font-family: var(--inter);
  text-align: center;
  font-size: calc(15* (100vw /375));
  letter-spacing: 0.1em;
  font-weight: 700;
}

.text_color_1{
  color: #AEB1B5;
}

.text_color_2{
  color: #E68F9A;
}

.text_color_3{
  color: #749BC1;
}

.text_color_4{
  color: #959595;
}

/************** sec_ivory **************/
.sec_ivory{
  margin: 0 auto calc(68* (100vw /375));
  padding: calc(42* (100vw /375)) 0 calc(52* (100vw /375));
}

.corde_box_2{
  margin-top: calc(43* (100vw /375));
}

/************** sec_pink **************/
.sec_pink{
  margin: 0 auto calc(68* (100vw /375));
  padding: calc(46* (100vw /375)) 0 calc(41* (100vw /375));
}

.sec_pink h3{
  top: calc(-15* (100vw /375));
}

/************** sec_sax **************/
.sec_sax{
  margin: 0 auto calc(69* (100vw /375));
  padding: calc(46* (100vw /375)) 0 calc(47* (100vw /375));
}

.sec_sax h3{
  top: calc(-15* (100vw /375));
}

.sec_sax .corde_box_2{
  margin-top: calc(52* (100vw /375));
}

/************** sec_gray **************/
.sec_gray{
  margin: 0 auto calc(67* (100vw /375));
  padding: calc(43* (100vw /375)) 0 calc(52* (100vw /375));
}

.sec_gray h3{
  top: calc(-15* (100vw /375));
}

.corde_text_padding{
  padding: calc(9* (100vw /375)) calc(10* (100vw /375)) calc(9* (100vw /375)) calc(5* (100vw /375))!important;
}

.sec_gray .corde_box_2{
  margin-top: calc(42* (100vw /375));
}

/************** sec_black **************/
.sec_black{
  margin: 0 auto calc(62* (100vw /375));
  padding: calc(46* (100vw /375)) 0 calc(47* (100vw /375));
}

.sec_black h3{
  top: calc(-15* (100vw /375));
}

.sec_black .corde_box_2{
  margin-top: calc(41* (100vw /375));
}

.li_br{
  line-height: 2;
}

/************** btn **************/
.main-area #btn{
  margin: 0 auto;
  width:  max-content;
}

.main-area .btn{
  margin: 0 auto;
  width: calc(280* (100vw /375));
  font-size: calc(14* (100vw /375));
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: calc(16* (100vw /375)) 0 calc(16* (100vw /375));
  text-align: center;
  border: #000 1px solid;
}



/* ===============================================
### PC用デザイン###
=============================================== */
@media screen and (min-width:768px) {

.sp_only{
  display: none;
}

.pc_only{
  display: block;
}

.sec{
  margin: 0 auto;
  max-width: 100rem;
}

.sec_bg{
  padding: 11.7rem 0 10rem;
  background-color: #F5F5F5;
}

/************** common **************/
/*** slick ***/
.slick-slider .slick-track, .slick-slider .slick-list{
  height: 36rem;
}

.main-area .slick-slide img{
  width: auto !important;
  height: 36rem;
}

/*** sec_ttl ***/
.sec h3{
  font-size: 3rem;
}

.sec_white_box h3{
  position: absolute;
  top: -1.7rem;
}

/*** sec_coordinate ***/
.sec_coordinate{
  margin: 0 auto;
  padding: 7rem;
  width: 100rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/*** corde_img ***/
.corde_img{
  margin-bottom: .5rem;
}

.corde_box_1,.corde_box_2{
  width: 40rem;
}

/*** corde_text ***/
.corde_text{
  margin: 0 auto 1.3rem;
  font-size: 1.5rem;
  line-height: 1.86;
}

/*** corde_tax_link ***/
.corde_tax_link li a{
  padding: .9rem 1.5rem .9rem 0.8rem;
  font-size: 1.1rem;
  opacity: 1!important;
}

.corde_tax_text{
  width: 28rem;
}

.corde_tax_btn{
  width: 5.8rem;
  height: 2rem;
  font-size: 1.1rem;
  font-weight: 600;
  border: 1px solid #000;
  transition: background-color 0.5s, color 0.5s;
}

.corde_tax_btn:hover{
  opacity: 1;
  color: #000;
  background-color: #fff;
  transition: background-color 0.5s, color 0.5s;
}

/************** mv **************/
.mv{
  margin: 0 auto 10rem;
  padding: 4rem 0 3.8rem;
}

.mv_img{
  margin: 0 auto 5.3rem;
}

.mv_text{
  margin: 0 0 0 6.3rem;
  width: 89.7rem;
  display: flex;
  gap: 0 5.5rem;
}

.mv_text::before{
  display: none;
}

.mv_text::after{
  display: none;
}

.mv_text_box{
  margin: 0;
  position: relative;
  white-space: nowrap;
}

.mv_text_box::before{
  width: 17.5rem;
  height: 3rem;
  content: '';
  display: block;
  position: absolute;
  top: -1.9rem;
  right: 6.1rem;
  left: auto;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/pc_sub_ttl.svg);
}

.mv_text_img{
  margin: .6rem 0 0 0;
  width: 30.4rem;
  position: relative;
}

.mv_text_box::after{
  width: 1px;
  height: 100%;
  content: '';
  display: block;
  position: absolute;
  top: 0.1rem;
  left: -2.5rem;
  background-size: contain;
  background-color: rgba(112,112,112,0.2);
}


.mv_text p{
  margin: 0;
  font-size: 1.4rem;
  text-align: left;
  line-height: 1.85;
}

.mv_text .bold_text{
  margin-bottom: .6rem;
  font-size: 1.6rem;
}

/************** main_content **************/
.main_content{
  margin: 0 auto 10.2rem;
  width: 100rem;
}

/************** color_link **************/
.color_link{
  margin-bottom: 12.3rem;
}

.color_link h3{
  margin-bottom: 1.7rem;
  font-size: 3.2rem;
}

.sec_sub_ttl{
  margin: 0 auto 5rem;
  font-size: 1.6rem;
}

.link_box{
  gap: 0 6.5rem;
}

.link_box li{
  width: 14.8rem;
}

.link_box li img{
  margin-bottom: 1rem;
}

.link_box li a{
  padding-bottom: 1.3rem;
}

.link_box li::before{
  width: 1.7rem;
  height: 0.9rem;
  bottom: -2.5rem;
  left: 6.7rem;
  transform: translateY(0px);
  transition-duration: 500ms;
}

.link_box li:hover::before{
  transform: translateY(10px);
  transition-duration: 500ms;
}

.link_box .color_text{
  font-size: 1.6rem;
}

/************** sec_ivory **************/
.sec_ivory{
  margin: 0 auto 9.8rem;
  padding: 0;
}

.corde_box_2{
  margin-top: 0;
}

/************** sec_pink **************/
.sec_pink{
  margin: 0 auto 10rem;
  padding: 0;
}

.sec_pink h3{
  top: -1.7rem;
}

/************** sec_sax **************/
.sec_sax{
  margin: 0 auto 9.8rem;
  padding: 0;
}

.sec_sax h3{
  top: -1.7rem;
}

.sec_sax .corde_box_2{
  margin-top: 0;
}

/************** sec_gray **************/
.sec_gray{
  margin: 0 auto 9.8rem;
  padding: 0;
}

.sec_gray h3{
  top: -1.7rem;
}

.corde_text_padding{
  padding: 1rem 1.5rem 0.7rem 0.8rem !important;
}

.sec_gray .corde_box_2{
  margin-top: 0;
}

/************** sec_black **************/
.sec_black{
  margin: 0 auto 8.1em;
  padding: 0;
}

.sec_black h3{
  top: -1.7rem;
}

.sec_black .corde_box_2{
  margin-top: 0;
}

/************** btn **************/
.main-area .btn{
  margin: 0 auto;
  width: 28rem;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  padding: 1.6rem 0 1.6rem;
  text-align: center;
}

}



/* パンくず 追加スタイル PC */
@media only screen and (min-width: 768px){
  .breadcrumb__list{
    padding-bottom: 1.6rem;
  }
}

