/*
===================================================
	page_about
===================================================
*/
.page_about #section1{
 background: url(../img/about/bg1.jpg) no-repeat center center;
 background-size: cover;
}
.page_about .pointList{
 display: flex;
 justify-content: space-around;
}
.page_about .pointList li{
 display: flex;
 width: 200px;
 height: 200px;
 background: #fff;
 border:solid 2px #e4007f;
 border-radius: 100px;
 justify-content: center;
 align-items: center;
 text-align: center;
 margin: 10px;
 position: relative;
}
.page_about .youtube iframe{
 width:100%;
 height: 30vw;
 max-height: 300px;
}
/*
===================================================
	page_contact
===================================================
*/
.page_contact #section3 .styleList.list4>li{
 border:solid 1px #ccc;
}
.page_contact #section4{
 background: url(../img/home/topbg4.jpg) no-repeat center center;
}
.page_contact #section4 .inner{
 min-height: 500px;
 display: flex;
 justify-content: center;
 align-items: center;
}
.page_contact #section4 .inner .tmpMsg{
 font-size: 300%;
 color: #fff;
 font-weight: bold;
}
.page_contact #section4 .inner .tmpMsg span{
 position: relative;
}
.page_contact #section4 .inner .tmpMsg span:after{
 content: "";
 display: block;
 position: absolute;
 width: 100%;
 border-bottom: solid 2px #fff;
 bottom: -10px;
}
.page_contact .qaList dt{
 border-top: solid 1px var(--orange);
 border-bottom: solid 1px var(--orange);
 background: #feefd2;
 padding: 20px 30px 20px 60px;
 color: var(--orange);
 font-weight: bold;
 position: relative;
}
.page_contact .qaList dt:before{
 display: block;
 content: "Q";
 position: absolute;
 left: 20px;
 font-weight: bold;
 font-size: 140%;
}
.page_contact .qaList dd{
 padding: 30px 30px 30px 60px;
 line-height: 2em;
 position: relative;
}
.page_contact .qaList dd:before{
 display: block;
 content: "A";
 position: absolute;
 left: 20px;
 font-weight: bold;
 color: #fac75c;
 font-size: 140%;
}
.page_contact .policy{
 background: #fff;
 border:solid 1px #ccc;
 padding: 20px;
 font-size: 80%;
}
.page_contact #pageAbout.mv{
 background: url(../img/joinus/mv.jpg) no-repeat bottom center;
 background-size: cover;
 padding: 150px 0px 150px;
}
.page_contact .youtube iframe{
 width:100%;
 height: 30vw;
 max-height: 300px;
}

.pageMsgBox{
 position: relative;
 text-align: center;
 padding-top: 20px;
}
.pageMsgBox .chara{
 padding-top: 20px;
}
.pageMsgBox .msg1{
 position: relative;
 top: -40px;
}
.pageMsgBox .msg2{
 position: relative;
 top: -20px;
}
.pageMsgBox .msg3{
 position: absolute;
 right: 40px;
 top: -55px;
}
.pageLinkList{
 display: flex;
 justify-content: space-between;
}
.pageLinkList li{
 border: solid 1px var(--purple);
 width: 30%;
 padding: 3% 1%;
 text-align: center;
}

.pagePointList li{
 display: flex;
}
.pagePointList li .text{
 width: 50%;
 margin-right: 5%;
}
.pagePointList li .text .ttl span{
 display: inline-block;
 padding: 2px 20px;
 background: var(--purple);
 color: #fff;
 transform: skewX(-10deg);
}
.pagePointList li .text .ttl2{
 transform: skewX(-10deg);
 margin-top: 10px;
}
.pagePointList li .img{
 width: 45%;
 text-align: center;
}
.pagePointList2{
 display: flex;
 justify-content: space-around;
 align-items: center;
 position: relative;
 padding-bottom: 30px;
 border-bottom: solid 10px var(--purple);
}
.pagePointList2:after{
 position: absolute;
 content: "";
 display: block;
 border-top: solid 30px var(--purple);
 border-left: solid 30px transparent;
 border-right: solid 30px transparent;
 left: 50%;
 bottom: -30px;
 margin-left: -30px;
}
.pagePointList2 li{
 background: #fff;
 color: var(--purple);
 width: 240px;
 height: 240px;
 border-radius: 50%;
 font-weight: bold;
 text-align: center;
 display: flex;
 align-items: center;
 justify-content: center;
 border: solid 2px var(--purple);
}

.pagePointMsg .inner{
 width: 50%;
 margin-left: auto;
 margin-right: auto;
 border:solid 5px var(--purple);
 background: #fff;
}
.pagePointMsg .inner .ttl{
 background: var(--purple);
 color: #fff;
 padding: 10px;
 text-align: center;
}
.pagePointMsg .inner .text{
 padding: 25px;
}
.pageContactInfo{
 display: flex;
 justify-content: center;
 align-items: center;
 border-top: solid 1px var(--purple);
 border-bottom: solid 1px var(--purple);
 padding: 20px;
}
.pageContactInfo .tel,
.pageContactInfo .mail{
 padding: 10px;
 width: 48%;
 box-sizing: border-box;
}
.pageContactInfo .tel .telNum{
 display: flex;
 justify-content: center;
 align-items: center;
}
.pageTtlBorder{
 position: relative;
}
.pageTtlBorder:after{
 position: absolute;
 display: block;
 content: "";
 width: 150px;
 border-top: solid 3px var(--purple);
 left: 50%;
 bottom: -5px;
 margin-left: -75px;
}
.pageMenuList li{
 display: flex;
 box-shadow: 2px 2px 25px rgba(0,0,0,0.1);
 margin-bottom: 40px;
}
.pageMenuList li .img{
 width: 50%;
}
.pageMenuList li .text{
 width: 50%;
 padding: 20px;
 box-sizing: border-box;
 position: relative;
}
.pageMenuList li .text:before{
 position: absolute;
 display: block;
 content: "";
 width: 50px;
 height: 100%;
 background: #fff;
 top: 0px;
 left: -30px;
 transform: skewX(-10deg);
}
.pageMenuList li .text .inner{
 background: #fff;
 position: relative;
}
.pageMenuList li .text .ttl{
 transform: skewX(-10deg);
}

/*
===================================================
	page_factory
===================================================
*/
.page_factory #pageAbout{
 background: url(../img/factory/bgttl.jpg) no-repeat center center;
 background-size: cover;
}

/*
===================================================
	page_house
===================================================
*/
.page_house #pageAbout{
 background: url(../img/house/bgttl.jpg) no-repeat center center;
 background-size: cover;
}

/*
===================================================
	page_public
===================================================
*/
.page_public #pageAbout{
 background: url(../img/public/bgttl.jpg) no-repeat center center;
 background-size: cover;
}

/*
===================================================
	page_store
===================================================
*/
.page_store #pageAbout{
 background: url(../img/store/bgttl.jpg) no-repeat center center;
 background-size: cover;
}

@media screen and (max-width: 1200px) {
 .pageContactInfo .tel .telNum{
  display: block;
  font-size: 150%;
 }
 .pageMenuList li{
  display: block;
  box-shadow: 2px 2px 25px rgba(0,0,0,0.1);
  margin-bottom: 40px;
 }
 .pageMenuList li .img{
  width: auto;
  text-align: center;
  padding: 20px;
 }
 .pageMenuList li .text{
  width: auto;
  padding: 0px 20px 20px;
  text-align: center;
 }
 .pageMenuList li .text:before{
  position: absolute;
  display: block;
  content: "";
  width: 50px;
  height: 100%;
  background: #fff;
  top: 0px;
  left: -30px;
  transform: skewX(-10deg);
 }
 .pageMenuList li .text .inner{
  display: inline-block;
  text-align: left;
 }
 .pageMenuList li .text .ttl{
  transform: skewX(-10deg);
 }
}

/*
===================================================
	tb
===================================================
*/
@media screen and (max-width: 1000px) {
 .page_about .pointList{
  display: block;
  font-size: 90%;
 }
 .page_about .pointList li{
  display: block;
  width: auto;
  height: auto;
  background: #fff;
  border:solid 2px #e4007f;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 10px;
  position: relative;
  padding: 10px 0px;
 }
 .pageMsgBox{
  position: relative;
  text-align: center;
  padding-top: 20px;
 }
 .pageMsgBox .chara{
  padding-top: 20px;
  width: 30%;
  height: auto;
 }
 .pageMsgBox .msg1{
  position: relative;
  top: -40px;
  width: 20%;
  height: auto;
 }
 .pageMsgBox .msg2{
  position: relative;
  top: -20px;
  width: 20%;
  height: auto;
 }
 .pageMsgBox .msg3{
  position: absolute;
  right: 0px;
  top: 0px;
  width: 15%;
  height: auto;
 }
 .pagePointList2{
  display: block;
 }
 .pagePointList2 li{
  background: #fff;
  color: var(--purple);
  width: auto;
  height: auto;
  border-radius: 10px;
  font-weight: bold;
  text-align: left;
  display: block;
  margin-bottom: 15px;
 }
 .pagePointList2 li .inner{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 10px 25px;
 }
 .pagePointList2 li .inner p{
  padding: 10px;
 }
 .pagePointList2 li .inner br{
  display: none;
 }
 .pagePointMsg .inner{
  width: auto;
  margin-left: auto;
  margin-right: auto;
  border:solid 5px var(--purple);
  background: #fff;
 }
 .pagePointMsg .inner .ttl{
  background: var(--purple);
  color: #fff;
  padding: 10px;
  text-align: center;
 }
 .pagePointMsg .inner .text{
  padding: 25px;
 }
 .pageContactInfo{
  display: block;
  text-align: center;
 }
 .pageContactInfo .tel,
 .pageContactInfo .mail{
  width: auto;
 }
 .pageContactInfo .tel .telNum{
  display: block;
 }
}

/*
===================================================
	sp
===================================================
*/
@media screen and (max-width: 768px) {
 .page_about .youtube iframe{
  width:100%;
  height: 50vw;
  max-height: 300px;
 }
 .page_contact #section4 .inner .tmpMsg{
  font-size: 200%;
  color: #fff;
  font-weight: bold;
 }
 .page_contact .qaList dd{
  font-size: 90%;
 }
 .page_contact .policy{
  height: 100px;
  overflow-y: auto;
 }
 /*
===================================================
	page_contact
===================================================
 */
 .page_contact #section3 .styleList.list4>li{
  border:solid 1px #ccc;
 }
 .page_contact #section4{
  background: url(../img/home/topbg4.jpg) no-repeat center center;
 }
 .page_contact #section4 .inner{
  min-height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
 }
 .page_contact #section4 .inner .tmpMsg{
  font-size: 300%;
  color: #fff;
  font-weight: bold;
 }
 .page_contact #section4 .inner .tmpMsg span{
  position: relative;
 }
 .page_contact #section4 .inner .tmpMsg span:after{
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  border-bottom: solid 2px #fff;
  bottom: -10px;
 }
 .page_contact .qaList dt{
  border-top: solid 1px var(--orange);
  border-bottom: solid 1px var(--orange);
  background: #feefd2;
  padding: 20px 30px 20px 60px;
  color: var(--orange);
  font-weight: bold;
  position: relative;
 }
 .page_contact .qaList dt:before{
  display: block;
  content: "Q";
  position: absolute;
  left: 20px;
  font-weight: bold;
  font-size: 140%;
 }
 .page_contact .qaList dd{
  padding: 30px 30px 30px 60px;
  line-height: 2em;
  position: relative;
 }
 .page_contact .qaList dd:before{
  display: block;
  content: "A";
  position: absolute;
  left: 20px;
  font-weight: bold;
  color: #fac75c;
  font-size: 140%;
 }
 .page_contact .policy{
  background: #fff;
  border:solid 1px #ccc;
  padding: 20px;
  font-size: 80%;
 }
 .page_contact #pageAbout.mv{
  background: url(../img/joinus/mv.jpg) no-repeat bottom center;
  background-size: cover;
  padding: 50px 0px 50px;
 }
 .page_contact .youtube iframe{
  width:100%;
  height: 50vw;
  max-height: 300px;
 }
 .pageLinkList{
  display: block;
  justify-content: space-between;
 }
 .pageLinkList li{
  border: solid 1px var(--purple);
  width: auto;
  padding: 3% 1%;
  text-align: center;
  margin-bottom: 20px;
 }
 .pagePointList li{
  display: block;
 }
 .pagePointList li .text{
  width: auto;
  margin-right: 0px;
 }
 .pagePointList li .img{
  width: auto;
  text-align: center;
  margin-top: 20px;
 }
 .pageContactInfo .tel .telNum{
  display: block;
  font-size: 120%;
 }
}

/*
===================================================
	page_contact
===================================================
 */
.breadcrumb {
    position: absolute;
    top: 380px;    
    z-index: 10;
}

.breadcrumb_contact {
    position: absolute;
    top: 425px;    
    z-index: 10;
}

.breadcrumb li {
    display: inline-block;
}

.breadcrumb li:not(:last-child)::after {
    content: "＞";
    color: #FFF;
	font-size: 0.8rem;
}

.breadcrumb li a, .breadcrumb li span {
    color: #FFF;
    font-size: 0.8rem;
}
.breadcrumb_contact li {
    display: inline-block;
}

.breadcrumb_contact li:not(:last-child)::after {
    content: "＞";
    color: #FFF;
	font-size: 0.8rem;
}

.breadcrumb_contact li a, .breadcrumb_contact li span {
    color: #FFF;
    font-size: 0.8rem;
}

@media screen and (max-width: 1200px) {
.breadcrumb {
    top: 490px;    
    }
.breadcrumb_contact {
    top: 540px;    
}
}
@media screen and (max-width: 768px) {
.breadcrumb {
    top: 70px;    
	}
.breadcrumb li:not(:last-child)::after {
    font-size: 0.5rem;
}

.breadcrumb li a, .breadcrumb li span {
    font-size: 0.5rem;
}
.breadcrumb_contact {
    top: 70px;    
}
.breadcrumb_contact li:not(:last-child)::after {
    font-size: 0.5rem;
}

.breadcrumb_contact li a, .breadcrumb_contact li span {
    font-size: 0.5rem;
}
}