@charset "utf-8";
/* CSS Document */

#MainImgWrap picture{
    display: flex;
    justify-content: center;	
}

.sp{display: none;}
body{position: relative;background:none;}
#header,.Gnavi_wrap,.breadcrumb_wrap,.cont_title,.footer-wrap{position: relative;}
body:before{
    /*content: "";*/
    background: url(https://kizuna3.com//img/concept_MainImg_bg.jpg);
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100vh;
    position: fixed;
	}	
.Gnavi_wrap .Gnavi_ul{
	max-width: 100%;
	overflow: hidden;
}
.concept-wrap{
    /*background: #fff;*/
	position: relative;
}
.concept-wrap p{
    font-family: 'Montserrat', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #222;
    word-break: break-all;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /*text-shadow: #fff 2px 0px,  #fff -2px 0px,
    #fff 0px -2px, #fff 0px 2px,
    #fff 2px 2px , #fff -2px 2px,
    #fff 2px -2px, #fff -2px -2px,
    #fff 1px 2px,  #fff -1px 2px,
    #fff 1px -2px, #fff -1px -2px,
    #fff 2px 1px,  #fff -2px 1px,
    #fff 2px -1px, #fff -2px -1px;*/
}
.concept-wrap p a{color: #337ab7;text-decoration: none;}
.Main-img-wrap {
    width: 100%;
    /*height: 0;*/
    height: 400px;
    /* padding-bottom: calc(100%*350/1920); */
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
}
.Main-img-wrap:before{
    content: "";
    background: url(https://kizuna3.com/img/concept_MainImg_left.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 35%;
    max-width: 600px;
    height: 0;
    padding-bottom: calc(50%*275/537);
    position: absolute;
    left: calc(25% - 370px);
    top: 50px;
	}
.Main-img-wrap:after{
    content: "";
    background: url(https://kizuna3.com/img/concept_MainImg_right.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 35%;
    max-width: 600px;
    height: 0;
    padding-bottom: calc(50%*275/537);
    position: absolute;
    right: calc(25% - 370px);
    top: 50px;
	}	
.Main-img-wrap img{display: block;margin: auto;}
.Main-img-wrap img:nth-of-type(1){
    width: 40%;
    max-width: 425px;
    height: auto;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 20px;
    left: 0;
    right: 0;
}
.Main-img-wrap img:nth-of-type(2){}
.concept-item{
	padding: 80px 0;
	position: relative;
}
.concept-item:after{
    content: "";
    width: 70%;
    display: block;
    margin: auto;
    left: 0;
    bottom: 0;
    right: 0;
    border-bottom: 1px solid #e5e5e5;
    position: absolute;
}
.inner-wrap{
    width: 90%;
    max-width: 1300px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.concept-item:nth-of-type(even){
	background: #fff;
	background: #fffcf5;
	/*border-top: 1px solid #f4f7e8;*/
	/*border-bottom: 1px solid #f4f7e8;*/
}
.concept-item:nth-of-type(odd){
	/* background: rgb(255 255 255 / 60%); */
	background: #fff;
	background: #fffcf5;
}
.text-area{width: 45%;}
.image-area{
	width: 45%;
    max-width: 670px;
}
.concept-item:nth-of-type(odd) .text-area{order: 2;}	
.concept-item:nth-of-type(odd) .image-area{order: 1;}	
.image-area img{max-width: 100%; height: auto;position: relative;}

/*見出し*/	
.policy-headline{
	display: flex;
    align-items: center;
	flex-wrap: wrap;
    margin: 0 0 30px;
}
.policy-number{
    width: 80px;
    height: 80px;
    font-size: 15px;
    color: #fff;
    background-color: #28c6c0;
    border-radius: 100px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
    margin-right: 15px;
}
.policy-number span{
    font-size: 30px;
    display: block;
    width: 100%;
    text-align: center;
}
.policy-headline h2{
	width: 83%;
    font-size: 24px;
    line-height: 1.5;
    color: #0c726f;
    font-family: "游明朝体", "Yu Mincho", YuMincho, serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /*text-shadow: #fff 2px 0px,  #fff -2px 0px,
    #fff 0px -2px, #fff 0px 2px,
    #fff 2px 2px , #fff -2px 2px,
    #fff 2px -2px, #fff -2px -2px,
    #fff 1px 2px,  #fff -1px 2px,
    #fff 1px -2px, #fff -1px -2px,
    #fff 2px 1px,  #fff -2px 1px,
    #fff 2px -1px, #fff -2px -1px;*/
}

/*ボタン*/	
.concept-btn{
    width: 450px;
    font-size: 20px;
    text-align: center;
    color: #fff;
    text-decoration: none;
    background: #f783c2;
    -webkit-box-shadow: 0 3px 0 #ac6089;
    box-shadow: 0 3px 0 #ac6089;
    display: block;
    margin: 30px 0 0;
    padding: 15px 20px;
    border-radius: 5px;
	position: relative;
}
.concept-btn:after{
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 20px;
    display: block;
    content: '';
    width: 13px;
    height: 13px;
    border-top: 3px solid #ffffff;
    border-right: 3px solid #ffffff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}	
/*フッター*/
.footer-wrap{
    background: url(../img_top/cont_back_green.png);
    max-width: 100%;
    overflow: hidden;
}

@media  screen and (max-width:1830px) {
.Main-img-wrap:before{left: calc(25% - 390px);}
.Main-img-wrap:after{right: calc(25% - 390px);}
.text-area {width: 50%;}
}
	
@media  screen and (max-width:1450px) {	
.Main-img-wrap:before{
	width: 33%;
    padding-bottom: calc(33%*275/537);
    left: calc(25% - 340px);
    margin: auto;
    top: 0;
    bottom: 0;	
	
}
.Main-img-wrap:after{
	width: 33%;
    padding-bottom: calc(33%*275/537);
    right: calc(25% - 340px);
    margin: auto;
    top: 0;
    bottom: 0;
}
	
}

@media  screen and (max-width:1280px) {		
.image-area{width: 40%;}
.text-area {width: calc(60% - 30px);}
}	
@media  screen and (max-width:1000px) {
.Main-img-wrap{height: 450px;}	
.Main-img-wrap:before{
    width: 16%;
    padding-bottom: calc(16%*745/300);
    left: calc(25% - 200px);
    top: 25px;
    background: url(https://kizuna3.com/img/concept_MainImg_left_sp.png);
    background-size: contain;
    background-repeat: no-repeat;
}	
.Main-img-wrap:after{
    width: 16%;
    padding-bottom: calc(16%*745/300);
    right: calc(25% - 200px);
    top: 25px;
    background: url(https://kizuna3.com/img/concept_MainImg_right_sp.png);
    background-size: contain;
    background-repeat: no-repeat;
}
.Main-img-wrap img:nth-of-type(1){
	width: 52%;
    max-width: 450px;	
}	
	
}
	
@media  screen and (max-width:767px) {
	
#MainImgWrap{width: 100%;}
#MainImgWrap img{width: 100%; height: auto;}	
	
.sp{display:flex;}
body:before{
/*content: "";*/
background: url(https://kizuna3.com//img/concept_MainImg_bg_sp.jpg);
background-size: contain;
background-position: top;
}
.Main-img-wrap{height: 0;padding-bottom: calc(100%*400/750);}
.Main-img-wrap img:nth-of-type(1){
    width: 50%;
    top: 2vw;
    max-width: unset;
}
.Main-img-wrap:before{
    width: 19%;
    padding-bottom: calc(19%*323/130);
    left: 2vw;
    top: 2vw;
    background: url(https://kizuna3.com/img/concept_MainImg_left_sp.png);
    background-size: contain;
    background-repeat: no-repeat;
}	
.Main-img-wrap:after{
    width: 19%;
    padding-bottom: calc(19%*323/130);
    right: 2vw;
    top: 2vw;
    background: url(https://kizuna3.com/img/concept_MainImg_right_sp.png);
    background-size: contain;
    background-repeat: no-repeat;
}
	
.concept-item{width: 100%;padding: 26vw 0 15vw;overflow: hidden;}
.concept-item:after{width:90%;}
	
.concept-wrap p{
    font-size: 3.9vw;
    line-height: 1.8;
    margin: 0 0 3vw;
}
.image-area{
    width: 95%;
    order: 1;
    margin: 0 auto 5vw;
}
.text-area{
    width: 95%;
    margin: auto;
    order: 2;
	}
.policy-headline{
    width: 90%;
    margin: auto;
    position: absolute;
    top: -20vw;
    left: 0;
    right: 0;
}
.policy-headline h2{width: calc(100% - 20vw);font-size: 4.3vw;}
.policy-number{
    width: 15vw;
    height: 15vw;
    font-size: 3.3vw;
    padding: 3.5vw;
    margin-right: 2vw;
}	
.policy-number span{font-size: 5vw;}	
.concept-btn{
	width: 90%;
	font-size: 4vw;
	margin: 7vw auto 0;
    padding: 4vw 0;
		
}
.concept-btn:after{
    right: 3.5vw;
    width: 2.5vw;
    height: 2.5vw;
    border-top: 0.5vw solid #ffffff;
    border-right: 0.5vw solid #ffffff;
}
	
.inner-wrap{width: 95%;}	
}
	
/*アニメーション*/	
.animation {
    opacity: 0;
}
.rightin.animation.play{
	opacity :0;
    animation-name:rightin;
    animation-duration: 1s;
    animation-timing-function: ease-out; 
    animation-delay: 0.5s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
}	
@keyframes rightin {
	0% {
	  opacity: 0;
	  transform: translate3d(-30px, 0, 0);
	}
	100% {
	  opacity: 1;
	  transform: translate3d(0, 0, 0);
	}
}
.leftin.animation.play{
	opacity :0;
    animation-name:leftin;
	
    animation-duration: 1s;
    animation-timing-function: ease-out; 
    animation-delay: 0.5s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
}	
@keyframes leftin {
	0% {
	  opacity: 0;
	  transform: translate3d(30px, 0, 0);
	}
	100% {
	  opacity: 1;
	  transform: translate3d(0, 0, 0);
	}
}