@charset "utf-8";
@-webkit-keyframes ContentsSwitch{
	0% {opacity: 0;}
	100% {opacity: 1;}
}

@media only screen and (max-width: 768px) {
/* -------------------------------- 

common

-------------------------------- */
.under #Content{
  margin: 19vw 0 0;
}
section[class^=area]{
	position: relative;
  width: 88vw;
  margin: 39vw auto 0;
}
#Pan{
  margin: 27vw auto 0;
}
section .sub-txt{
  margin: 7vw 0 0;
	color: var(--txt-color);
  line-height: 1.75;
}


/* -------------------------------- 
.area-cont
-------------------------------- */
.area-cont .inner{
  width: 88vw;
  margin: 20vw auto 0;
}
.area-cont .inner .fnav-block{
  margin: 0 0 8vw;
  padding: 7vw 0 0;
  border-top: .8vw solid #efefef;
}
.area-cont .inner .fnav-ttl a{
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: center;
	align-items: center;
}
.area-cont .inner .fnav-ttl .ttl{
  position: relative;
  padding: 0 6vw 0 0;
  background: #fff;
  font-size: 4vw;
  font-weight: bold;
}
.area-cont .inner .fnav-ttl .ttl::before{
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 77vw;
  height: 2px;
  margin: -1px 0 0;
  background: var(--sub-color);
  z-index: -1;
}
.area-cont .inner .fnav-ttl .ttl::after{
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 32.4vw;
  height: 2px;
  margin: -1px 0 0;
  background: var(--main-color);
  transition: .6s;
  z-index: -1;
}
.area-cont .inner .fnav-ttl span{
  display: inline-block;
  position: relative;
  padding: 0 5.6vw 0 0;
  background: #fff;
  box-sizing: border-box;
  color: var(--main-color);
}
.area-cont .inner .fnav-ttl span::before{
  content: "";
  display: block;
  position: absolute;
  top: -1vw;
  right: 1.2vw; 
  width: 1.2vw;
  height: .4vw;
  background: var(--main-color);
  transform: rotate(45deg);
}
.area-cont .inner .fnav-ttl span::after{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 1.2vw; 
  width: 1.2vw;
  height: .4vw;
  background: var(--main-color);
  transform: rotate(-45deg);
}
.area-cont .inner .fnav-block dl{
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	-webkit-align-items: stretch;
	align-items: stretch;
  width: 77vw;
  margin: 7vw auto 0;
}
.area-cont .inner .fnav-block dt{
  width: 100%;
  font-weight: bold;
}
.area-cont .inner .fnav-block dd + dt,
.area-cont .inner .fnav-block dt + dt{
  margin: 6vw 0 0;
}
.area-cont .inner .fnav-block dt span{
  padding: 0 0 0 3.3vw;
  font-weight: normal;
}
.area-cont .inner .fnav-block dd{
  position: relative;
  width: 100%;
  margin: 6vw 0 0;
  padding: 0 0 0 8.4vw;
  box-sizing: border-box;
}
.area-cont .inner .fnav-block dd::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 5.5vw;
  height: 2px;
  background: var(--sub-color);
}
}


@media only screen and (min-width: 769px) {
/* -------------------------------- 

common

-------------------------------- */
section[class^=area]{
	position: relative;
  width: 980px;
  margin: 240px auto 0;
}
.under #Content {
    margin: 87px 0 0;
}
#Pan{
  margin-top: 180px;
}
section .sub-txt{
  width: 814px;
  margin: 35px auto 0;
	color: var(--txt-color);
  line-height: 1.75;
}


/* -------------------------------- 
.area-cont
-------------------------------- */
.area-cont .inner{
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: stretch;
	align-items: stretch;
  width: 814px;
  margin: 0 auto;
  padding: 70px 0;
}
.area-cont .inner .fnav-block{
  width: 399px;
}
.area-cont .inner .fnav-block:nth-of-type(n+3){
  margin-top: 80px;
}
.area-cont .inner .fnav-ttl{
  width: 218px;
}
.area-cont .inner .fnav-ttl a{
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: center;
	align-items: center;
}
.area-cont .inner .fnav-ttl .ttl{
  position: relative;
  padding: 0 15px 0 0;
  background: #fff;
  font-weight: bold;
}
.area-cont .inner .fnav-ttl .ttl::before{
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 176px;
  height: 2px;
  margin: -1px 0 0;
  background: var(--sub-color);
  z-index: -1;
}
.area-cont .inner .fnav-ttl .ttl::after{
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 125px;
  height: 2px;
  margin: -1px 0 0;
  background: var(--main-color);
  transition: .6s;
  z-index: -1;
}
.area-cont .inner .fnav-ttl a:hover .ttl::after{
  width: 176px;
  transition: .6s;
}
.area-cont .inner .fnav-ttl span{
  display: inline-block;
  position: relative;
  width: 33px;
  padding: 0 14px 0 10px;
  background: #fff;
  box-sizing: border-box;
  color: var(--main-color);
  font-size: 1.2rem;
}
.area-cont .inner .fnav-ttl span::before{
  content: "";
  display: block;
  position: absolute;
  top: -3px;
  right: 0;
  width: 5px;
  height: 2px;
  background: var(--main-color);
  transform: rotate(45deg);
}
.area-cont .inner .fnav-ttl span::after{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  height: 2px;
  background: var(--main-color);
  transform: rotate(-45deg);
}
.area-cont .inner .fnav-block dl{
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	-webkit-align-items: stretch;
	align-items: stretch;
  margin: 26px 0 0;
}
.area-cont .inner .fnav-block dt{
  width: 100%;
  font-weight: bold;
}
.area-cont .inner .fnav-block dd + dt,
.area-cont .inner .fnav-block dt + dt{
  margin: 16px 0 0;
}
.area-cont .inner .fnav-block dt span{
  padding: 0 0 0 10px;
  font-weight: normal;
}
.area-cont .inner .fnav-block dd{
  position: relative;
  width: 100%;
  margin: 16px 0 0;
  padding: 0 0 0 48px;
  box-sizing: border-box;
}
.area-cont .inner .fnav-block dd::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 12px;
  display: block;
  width: 28px;
  height: 1px;
  background: var(--sub-color);
  transition: .6s;
}
.area-cont .inner .fnav-block a:hover{
  color: var(--main-color);
}
.area-cont .inner .fnav-block dd:hover::before{
  background: var(--main-color);
  transition: .6s;
}
}