@charset "utf-8";
body,h1,h2,h3,h4,h5,h6,ul,li,img,a,p{
    padding:0;
    margin: 0;
}

img{
    width: 100%;
    height: auto;
}


a:hover{
    opacity: 0.7;
}


header{
    width: 100%;
}
::placeholder {
	color:#CCCCCC;
}

/* ヘッダーのコンテンツ部分 */
header .con{
    /* width: 960px; */
    width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

header .con .header-left{
    width: 35%;
}

header .con .header-left img{
    box-sizing: border-box;
    width: 100%;
    padding: 5%;
}


header .con .header-right{
    width: 60%;
    display: flex;
    align-items: flex-start;
}


header .con .header-right > img:nth-child(1){
    width: 45%;
    box-sizing: border-box;
    height: auto;
    margin: 2%;
}

header .con .header-right > a{
    display: block;
    width: 55%;
    margin: 3% 0;
}

header .con .header-right a img{
    box-sizing: border-box;
    /* padding:7% 0; */
}



/* -------------------------------- */

.wrap{
    width:100%;
}



/* ヘッダー、フッター 以外のコンテンツ部分 */
.wrap .con{
    width: 1000px;
    margin: 0 auto;
}


.wrap.wrap1{
    background-image: url("./img/header-bg.jpg");
    background-repeat: no-repeat;
    height: 390px;
}

.wrap.wrap1 .con{
    /* position: absoluteを使うために準備 */
    position: relative;
    height: 100%;
}


.wrap.wrap1 .con > img{
    margin-top: 13px;

    /* 画像が埋まらないようにするために、z-indexを導入 */
    position: relative;
    z-index:1;
}


.wrap.wrap1 .con .img-wrap{
    /* 右下に配置するために、position:absoluteを導入 */
    position: absolute;
    z-index: 0;
    bottom: 0;
    right: 0;

    width: 45%;
}





/* wrap2 */


.wrap.wrap2{
    background-image: url("./img/background1.png");
}

.wrap.wrap2 .con img{
    padding-top: 5%;
    padding-bottom: 5%;
}


/* ラップ１つ目 */
.wrap.wrap2 .con .img-wrap1{
    width: 1000px;
    margin: 0 auto;
}


/* ラップ２つ目 */
.wrap.wrap2 .con .img-wrap2{
    display: flex;
    align-items: flex-start;
}
.wrap.wrap2 .con .img-wrap2 .img1{
    padding:0;
    width: 85%;
}
.wrap.wrap2 .con .img-wrap2 .img2{
    padding:5% 0;
    width: 15%;
}


/* wrap3~5のヘッダー画像処理 */

.wrap3 .wrap-title, .wrap4 .wrap-title, .wrap5 .wrap-title{
    overflow: hidden;
    width: 100%;/* トリミングしたい枠の幅(背景の場合は100%にすると、デバイスの大きさがトリミングしたい幅になるので良い) */
    height: 125px;/*トリミングしたい枠の高さ(高さがないと、そこに空間を生めないので指定したほうがいい場面もある。)*/
    position: relative;
}


.wrap3 .wrap-title img,.wrap4 .wrap-title img,.wrap5 .wrap-title img{
    position: absolute;

    /* 中央に配置 */
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);


  width: 1920px;
  height: auto;
}

.wrap-title img:nth-child(2){
    display: none;
}

/* wrap3 */

.wrap3 .con .img-wrap1{
    display: flex;
    align-items: flex-start;
}
.wrap3 .con .img-wrap1 img{
    width: 30%;
    margin-top: 3%;
    margin-right: 1.5%;
    margin-left: 1.5%;
    box-sizing: border-box;
}

.wrap3 .con > img{
    margin-top: 2%;
}


.wrap3 .con .img-wrap2{
    display: flex;
    align-items: flex-start;
}
.wrap3 .con .img-wrap2 img{
    width: 40%;
    margin: 5%;
    box-sizing: border-box;
}


/* wrap4 */
.wrap4 .con{
    position: relative;
}

.wrap4 .con > img{
    margin-top: 2vw;
}
.wrap4 .con img:nth-child(1){
    width: 70%;
}

.wrap4 .con img:nth-child(3){
    position: absolute;
    right:0;
    top:0;
    width:30%;
}


.wrap4 .con .form-wrap > img{
    width: 100%;
}

.wrap4 .con .form-wrap{
    position: relative;
    margin-bottom: 2vw;
}

.wrap4 .con .form-wrap a{
    width: 70%;
    position: absolute;
    top: 68%;
    left: 6%;

}
.wrap4 .con .form-wrap a img{
    width: 100%;
}




/* wrap5 */

.wrap5{
    background-image:url("./img/mid3-bg.jpg");
}

.wrap5 .con img{
    margin-top: 2vw;
}

.wrap5 .con img:last-child{
    margin-bottom: 2vw;
}



/* wrap6 */


.wrap6{
    background-image: url("./img/background1.png");
}


.wrap6 .con{
    padding-bottom: 5%;
}

.wrap6 .con > img{
    margin-top: 8%;
    margin-bottom: 10%;
}

.wrap6 .con ul li{
    display: flex;
    align-items: flex-start;
    padding-top: 3%;
    padding-bottom: 3%;
}

.wrap6 .con ul li:not(:last-child){
    margin-bottom: 5%;
}

.wrap6 .con ul li:nth-child(even){
    background-color: #F7D5E4;
}



.wrap6 .con ul li .qa{
    width: 10%;
    box-sizing: border-box;
    padding-left: 3%;
}

.wrap6 .con ul li .txt{
    box-sizing: border-box;
    width: 90%;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 0;
}
.wrap6 .con ul li .txt img{
    /* padding-top: 5%; */
}


/* wrap7(コンタクトフォーム) */


.cf7 #wpcf7-f70-o1{
    display: block;
}

.cf7 #wpcf7-f76-o2{
    display: none;
}


.cf7 form p, .cf7 form table{
    width: 100%;
    text-align: left;
}

.cf7 form table tbody tr th, .cf7 form table tbody tr td{
    width: 50%;
}

.cf7 form p{
    font-weight:800;
}


/* コンタクトフォーム上部のエラーメッセージの非表示 */
div.screen-reader-response{
    display: none;
}

/* 送信メッセージ */
.wpcf7-response-output.wpcf7-validation-errors{
    text-align: center;
    color: #fa3030;
    border: 1px solid #fa3030;;
}
.wpcf7-response-output.wpcf7-mail-sent-ok{
    text-align: center;
    color: rgb(55, 194, 55);
    border: 1px solid rgb(55, 194, 55);;
}



/* 送信ボタンの装飾 */
.cf7 form .submit{
    text-align: center;
}

.wpcf7-form-control.wpcf7-submit{
    width: 200px;
    margin-top:50px;
    margin-bottom:50px;
}

form.wpcf7-form{
    margin-bottom:150px;
}

/* 送信NG時の枠の色  */
/* div.wpcf7-validation-errors,
div.wpcf7-acceptance-missing {
	border: 1px solid #F78181; //色を指定
} */

.wpcf7-not-valid-tip{
    display: block;
    color: #fa3030;
}






/* フッター  */
footer{
    width: 100%;
    position: relative;
    /* overflow: hiddenは、見える表示部分において消す必要があるときに使う。背景の見切れる部分においては使う必要なし */
}


footer .bg-wrap{
    overflow: hidden;
    width: 100%;
    height: 131px;
    position: absolute;
}

footer .bg-wrap img{
    position: absolute;
    width: 1920px;
    top: 50%;
    left: 50%;

    /* 画像の真ん中にスラッシュの部分を入れるため、左右を45%に変更を */
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: -10;

    /* width: 100%;
    height: auto; */
}

footer .bg-wrap img:nth-child(2){
    display: none;
}

/* フッターのコンテンツ部分 */
footer .con{
    width: 1000px;
    box-sizing: border-box;
    padding-top: 0.7%;
    margin: 0 auto;

    position: relative;
}

footer .con .con-wrap{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
}

footer .con .con-wrap img, footer .con .con-wrap a{
    width: 45%;
}

footer .con .con-wrap a img{
    width: 100%;
}

footer .con .con-wrap > img:nth-child(1), footer .con .con-wrap .first-a{
    margin-bottom: 2%;
}


footer .con .img-wrap{
    /* 右下に配置するために、position:absoluteを導入 */
    position: absolute;
    z-index: 0;
    top: -215px;
    right: 0;

    width: 45%;
}


/* @media screen and (max-width:1000px) {
    .wrap .con{
        width: 75%;
        margin: 0 auto;
    }
} */

.form_area01{
	width:1000px;
	margin:0 auto;
	padding:50px 0;
}
.form_area02{
	text-align:center;
	font-size:35px;
	margin:0 0 30px 0;
}
.table01{
	width:100%;
	margin:0 0 30px 0;
}
.table01 th{
	width:20%;
	padding:5px 10px;
	border:1px #cccccc solid;
	background-color:#EFEFEF;
	font-weight:normal;
	text-align:left;
}
.table01 td{
	padding:5px 10px;
	border:1px #cccccc solid;
	font-weight:normal;
	text-align:left;
}
.input_st01{
	padding:1%;
	width:90%;
	font-size:18px;
	background-color:#FFFFCC;
}
.input_st02{
	padding:1%;
	width:20%;
	font-size:18px;
	background-color:#FFFFCC;
}
.input_st03{
	padding:1%;
	font-size:18px;
	background-color:#FFFFCC;
}
.input_st04{
	padding:1%;
	width:90%;
	height:150px;
	font-size:18px;
	background-color:#FFFFCC;
}
.input_st05{

}

.input_st05 input{
	font-size:14px;
	padding:5px 25px;

}
@media screen and (max-width:1000px) {
.table01 th{
	display:block;
	width:90%;
}
.table01 td{
	display:block;
	width:90%;
}
.form_area01{
	width:100%;
	margin:0 auto;
	padding:50px 0;
}
    header .con{
        width: 90%;
    }

    .wrap.wrap1{
        height: 35vw;

    }

    .wrap.wrap1 .con{
        height: 35vw;
    }
    .wrap .con{
        width: 90%;
        margin: 0 auto;
    }

    .wrap.wrap2 .con .img-wrap1{
        width: 90%;
    }

    /* .wrap3~5のヘッダー画像表示処理 */
    .wrap-title img:nth-child(1){
        display: none;
    }
    .wrap-title img:nth-child(2){
        display: block;
        width: 100%;
        height: auto;
    }

    .wrap4 .con > img{
        margin-top: 4%;
    }

    .wrap4 .con .form-wrap{
        margin-top: 3%;
    }

    .wrap5 .con img{
        margin-top: 4%;
    }


    footer .bg-wrap{
        height: 13vw;
    }

    footer .bg-wrap img:nth-child(1){
        display: none;
    }

    footer .bg-wrap img:nth-child(2){
        display: block;
        height: 100%;
    }

    footer .con{
        width: 95%;
    }

    footer .con .con-wrap > img:nth-child(1), footer .con .con-wrap .first-a{
        margin-top: 1%;
    }

    footer .con .img-wrap{
        top: -175%;
    }
}


@media screen and (max-width:700px){

    .cf7 #wpcf7-f70-o1{
        display: none;
    }
    
    .cf7 #wpcf7-f76-o2{
        display: block;
        text-align: center;
    }


    .cf7 form table tbody tr td span input, .cf7 form table tbody tr td span textarea{
        width: 100%;
    }


    /* 数値を入れるフォームは、元の短いボックスに戻す */
    .wpcf7-form-control-wrap.number-550 input, .wpcf7-form-control-wrap.number-114 input{
        width: auto;
    }
}