@charset "UTF-8";
/*-----------------------------------------------
メインビジュアル
-----------------------------------------------*/
.bg-switcher {
  width: 100%;
  height: 100vh;
  background-position: center center;
  background-size: cover;
  align-items: center;
  justify-content: center;
    position:relative;
    background-attachment: fixed;
}
.bg-switcher::before {
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
}
.bg-switcher .box{
    padding-top: 8%;
    text-align: center;
}
.bg-switcher .box .bxslider{
    max-width: 252px;
    margin: 0 auto;
}
.bg-switcher .box .bxslider img{
    margin: 0 auto;
    width: 100%;
}
@media screen and (max-width:1024px) {
.bg-switcher .box{
    padding-top: 26%;
}
}
@media screen and (max-width:768px) {
.bg-switcher {
    background-attachment:inherit;
}
.bg-switcher .box{
    padding-top: 26%;
}
.bg-switcher .box .bxslider{
    max-width: 180px;
}
}

 /* -----------------------------------------------------------
	bnr
----------------------------------------------------------- */
.bnr{
	background-color: #000;
    padding: 60px 24px;
    box-sizing: border-box;
}
.bnr ul{
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    line-height: 0;
    text-align: center;
}
.bnr li{
    margin: 5px;
}
.bnr li img{
    width: 100%;
}
@media screen and (max-width:767px){
.bnr{
    padding: 30px 10px;
}
.bnr ul{
    display: block;
}
.bnr li{
    margin-bottom: 24px;
    }
}

 /* -----------------------------------------------------------
	project
----------------------------------------------------------- */
.project{
    border: 1px solid #000;
    margin:90px auto;
    width: 100%;
    max-width: 1180px;
    text-align: center;
    font-size: 1.3rem;
    position: relative;
}
.project a{
    display: block;
    padding: 40px;
    box-sizing: border-box;
    text-decoration: none;
}
.project:before {
    content: '';
	display: block;
	position: absolute;
	bottom: -11px;
	left: -11px;
	width: 100%;
	height: 11px;
	background: url(../images/top/out.gif) no-repeat 0% 0%;
}
.project:after {
    content: '';
	display: block;
	position: absolute;
	top: -11px;
	right: -11px;
	width: 100%;
	height: 11px;
	background: url(../images/top/out.gif) no-repeat 0% 0%;
    transform: scale(-1, -1);
}
.project h2{
    background-color: #005278;
    color: #fff;
    padding: 16px 4%;
    box-sizing: border-box;
    display: inline-block;
    font-size: 1.8rem;
    margin:0 auto 32px auto;
}
.project strong{
    font-size: 3rem;
    line-height: 1.4em;
}
.project strong span{
    margin-left: 16px;
}
.project .set{
    border: #8C0000 1px solid;
    color: #8C0000;
    padding: 16px 5% 24px 5%;
    line-height: 1em;
    box-sizing: border-box;
    font-size: 1.8rem;
    display: inline-block;
    margin:32px auto;
    font-weight: 800;
}
.project .period{
    color: #8C0000;
}
@media screen and (max-width:767px){
.project{
    width: 90%;
    padding:32px;
    font-size: 1.2rem;
}
.project h2{
    padding: 16px 3%;
    display: block;
    font-size: 1.4rem;
}
.project strong{
    font-size: 2.5rem;
}
.project strong span{
    margin-left: 0;
    display: block;
}
.project .set{
    font-size: 1.5rem;
}
.project .period span{
    display: block;
}
}

 /* -----------------------------------------------------------
	birth
----------------------------------------------------------- */
.birth .birth_tit{
    background-color: #000;
    background-image: url("../images/top/birth_bg1.png"), url("../images/top/birth_bg2.png");
    background-repeat: no-repeat,no-repeat;
    background-position: left,right;
    text-align: center;
}
.birth .birth_tit img{
    max-width: 100%;
}
.birth img{
    line-height: 0;
    margin: 70px 0;
}
@media screen and (max-width:767px){
.birth .birth_tit{
    background-color: #000;
    background-image: none, url("../images/top/birth_bg2.png");
    background-repeat: no-repeat,no-repeat;
    background-position: left,right;
    text-align: center;
}
    .birth .inner img{
        margin:30px auto;
    display: block;
    text-align: center;
    }
.birth img{
    margin: 30px 0;
    width: 90%;
}
}

 /* -----------------------------------------------------------
	package
----------------------------------------------------------- */
.package{
    border: 2px solid #005278;
    margin:90px auto;
    width: 100%;
    max-width: 1180px;
    padding: 20px 0;
    box-sizing: border-box;
    text-align: left;
    font-size: 1.3rem;
    position: relative;
}
.package img{
    position: absolute;
    right: 16px;
}
.package h2{
    background-color: #005278;
    color: #fff;
    padding: 24px 3%;
    box-sizing: border-box;
    font-size: 2.2rem;
    line-height: 1.5em;
    margin:0 auto 32px auto;
}
.package p{
    margin:46px 46px 26px 3%;
    line-height: 1.8em;
}
.package p span{
    display: block;
    }
@media screen and (max-width:768px){
.package{
    margin:60px auto;
    width: 90%;
    font-size: 1.2rem;
}
.package img{
    position:static;
   width: 70%;
    text-align: center;
    display: block;
    margin: 0 auto 16px auto;
}
.package h2{
    padding: 24px 5%;
    font-size: 1.8rem;
    text-align: center;
}
.package p{
    margin:26px 5%;
}
.package p span{
    display: inline;
    }
}

 /* -----------------------------------------------------------
	emaki
----------------------------------------------------------- */
.emaki{
    background: url("../images/top/emaki_bg.jpg");
    padding: 60px 0 30px 0;
    box-sizing: border-box;
    text-align: center;
    font-size: 1.3rem;
    line-height: 1.8em;
    overflow: hidden;
}
.emaki h2{
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 46px;
    line-height: 1.5em;
}
.emaki p{
    margin-bottom: 46px;
}
@media screen and (max-width:768px){
.emaki{
    padding: 60px 0 30px 16px;
    font-size: 1.3rem;
}
.emaki h2{
        font-size: 1.8rem;
    margin-bottom: 24px;
    margin-right: 16px
}
.emaki h2 span{
    font-size: 2.2rem;
    display: block;
}
.emaki p{
    margin-bottom: 24px;
    margin-right: 16px;
    text-align: left;
}
.emaki img{

}
}

 /* -----------------------------------------------------------
	case
----------------------------------------------------------- */
.case h2{
    padding: 46px 24px;
    box-sizing: border-box;
    margin-bottom: 50px;
    text-align: center;
    margin-top: 90px;
}
.case h2.tit_case01{
    background:url("../images/top/bg_case01.jpg") center no-repeat;
    background-size:cover;
}
.case h2.tit_case02{
    background:url("../images/top/bg_case02.jpg") center no-repeat;
    background-size:cover;
}
.case h2.tit_case03{
    background:url("../images/top/bg_case03.jpg") center no-repeat;
    background-size:cover;
}
.case h2 img{
    max-width: 137px;
}
.case h3{
    font-family: 'はれのそら明朝', sans-serif;
    margin-bottom: 50px;
    font-size: 2.8rem;
    line-height: 1.5em;
}
.case h3 strong{
    color: #8C0000;
}
.case h3 span{
    display: block;
}
.case .box01{
    display:table;
    padding-left: 100px;
    box-sizing: border-box;
    font-size: 1.2rem;
    line-height: 2em;
    width: 100%;
}
.case .box01 .txt,
.case .box01 .photo,
.case .box02 .txt,
.case .box02 .photo{
    vertical-align: middle;
   display: table-cell;
    width: 49%;
}
.case .box01 .photo img,
.case .box02 .photo img{
    max-width: 100%;
}
.case .box01 .photo{
    text-align: right;
    padding-left: 16px;
}
.case .box02{
    display:table;
    padding-right: 100px;
    box-sizing: border-box;
    font-size: 1.2rem;
    line-height: 2em;
    width: 100%;
}
.case .box02 .photo{
    text-align: left;
    padding-right: 16px;
}
@media screen and (max-width:768px){
.case h2 img{
    max-width: 296px;
}
.case h3{
    margin-bottom:24px;
    font-size: 2rem;
}
.case h3 span{
    display:inline;
}
.case .box01{
    display:block;
    padding-left:8px;
    line-height: 2em;
    width: 100%;
}
.case .box01 .flex{
  display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
 }
.case .box01 .txt,
.case .box01 .photo,
.case .box02 .txt,
.case .box02 .photo{
    vertical-align:top;
   display:block;
    width: 100%;
}
.case .box01 .txt,
.case .box02 .txt{
        width: 100%;
        margin: 0 24px 70px 24px;
    box-sizing: border-box;
}
    .case .box01 .txt{
        padding-right: 46px;
        box-sizing: border-box;
    }
.case .box02 .txt{
    padding-left: 8px;
    padding-right: 46px;
    box-sizing: border-box;
    }
.case .box01 .photo{
    padding-left: 0;
}
.case .box02{
    display:block;
    padding-right: 8px;
    box-sizing: border-box;
    width: 100%;
}
.case .box02 .photo{
    padding-right: 0;
}
}