@charset "utf-8";


/************************************************************

    HOME

************************************************************/

/*
    Home | Hero images
******************************/

.h-hero{
    position: relative;
    max-width: 1280px;
    height: 570px;
    margin: 0 auto 120px;
}
.h-hero .h-hero__img{
    position: absolute;
    width: 845px;
    height: 570px;
    background-image: url(/img/home_hero_img.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
    opacity:0;
    animation: FadeInImg .9s forwards cubic-bezier(.8,.01,.37,1);
    animation-delay: .4s;
    z-index: 1;
    top: 0;
    right: 0;
}
@keyframes FadeInImg {
    0%   { opacity:0; background-size: 108%;}
    100% { opacity:1; background-size: 100%;}
}
.h-hero .h-hero__ttl{
    display: block;
    position: absolute;
    width: 258px;
    left: 94px;
    top: 80px;
    z-index: 50;
}
.h-hero .h-hero__logo{
    display: block;
    width:  370px;
    height: 192px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    opacity:0;
    animation: FadeInLogo .9s forwards cubic-bezier(.8,.01,.37,1);
    animation-delay: 1.5s;
}
@keyframes FadeInLogo {
    0%   { opacity:0; transform: translateY(18px);}
    100% { opacity:1; transform: translateY(0px);}
}
.h-hero__product{
    display: block;
    position: absolute;
    width: 240px;
    text-align: center;
    left: 158px;
    bottom: 108px;
    z-index: 500;
}
.h-hero__product span{
    display: inline-block;
    position: relative;
    background-repeat: no-repeat;
    background-size: 100%;
    margin-bottom: 8px;
    height: 21px;
}
.h-hero__product span.anim__01::after,
.h-hero__product span.anim__02::after,
.h-hero__product span.anim__03::after,
.h-hero__product span.anim__04::after,
.h-hero__product span.anim__05::after{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #dcc8af;
    animation: h-hero__anim__slide forwards cubic-bezier(.8,.01,.37,1);
}
.h-hero__product span.anim__01::after{animation-duration: .9s; animation-delay: .8s;}
.h-hero__product span.anim__02::after{animation-duration: .6s;animation-delay: 1.0s;}
.h-hero__product span.anim__03::after{animation-duration: .4s;animation-delay: 1.2s;}
.h-hero__product span.anim__04::after{animation-duration: .5s;animation-delay: 1.2s;}
.h-hero__product span.anim__05::after{animation-duration: .3s;animation-delay: 1.3s;}
@keyframes h-hero__anim__slide{
    0% {width: 100%;}
    100% {width: 0%;}
}
.h-hero__product span.anim__01{
    width: 240px;
    background-image: url(../img/home_hero__product_anim_01.png);
    animation: h-hero__anim__01 .9s forwards cubic-bezier(.8,.01,.37,1);
    animation-delay: .2s;
    opacity:0;
}
.h-hero__product span.anim__02{
    width: 199px;
    background-image: url(../img/home_hero__product_anim_02.png);
    animation: h-hero__anim__02 .9s forwards cubic-bezier(.8,.01,.37,1);
    animation-delay: .4s;
    opacity:0;
}
.h-hero__product span.anim__03{
    width: 81px;
    background-image: url(../img/home_hero__product_anim_03.png);
    animation: h-hero__anim__03 .9s forwards cubic-bezier(.8,.01,.37,1);
    animation-delay: .6s;
    opacity:0;
}
.h-hero__product span.anim__04{
    width: 112px;
    background-image: url(../img/home_hero__product_anim_04.png);
    animation: h-hero__anim__04 .9s forwards cubic-bezier(.8,.01,.37,1);
    animation-delay: .8s;
    opacity:0;
}
.h-hero__product span.anim__05{
    width: 71px;
    background-image: url(../img/home_hero__product_anim_05.png);
    animation: h-hero__anim__05 .9s forwards cubic-bezier(.8,.01,.37,1);
    animation-delay: 1.0s;
    opacity:0;
}
@keyframes h-hero__anim__01{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes h-hero__anim__02{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes h-hero__anim__03{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes h-hero__anim__04{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes h-hero__anim__05{
    0% {opacity:0;}
    100% {opacity:1;}
}

/*
    Home | Concept
******************************/
.h-concept{
    position: relative;
    max-width: 1030px;
    margin: 0 auto;
}
.h-concept__img{
    position: relative;
    display: block;
    width: 430px;
}
.h-concept__txt{
    position: relative;
    display: block;
    background: #e6d7c8;
    width: 640px;
    height: auto;
    padding: 72px 60px;
    margin-left: 430px;
    margin-top: -540px;
    margin-bottom: 356px;
}
.h-concept__txt h2{
    font-size: 2.4em;
    margin-bottom: 20px;
}
.h-concept__txt p{
    margin-bottom: 30px;
    font-size: 0.8em;
    line-height: 2;
}
.h-concept__anim{
    position: relative;
    display: block;
    width: 420px;
    height: 108px;
    margin-bottom: 20px;
    margin-left: 2px;
}
.h-concept__anim span{
    display: block;
    position: absolute;
    width: 420px;
    height: 108px;
    background-repeat: no-repeat;
    background-size: 100%;
    top: 0;
    left: 0;
}
.h-concept__anim span.concept_anim01{
    background-image: url(../img/home_concept_copy_anim_01.png);
}
.h-concept__anim span.concept_anim02{
    background-image: url(../img/home_concept_copy_anim_02.png);
}
.h-concept__anim span.concept_anim03{
    background-image: url(../img/home_concept_copy_anim_03.png);
}


/*
    Home | Factory Info
******************************/

.h-factoryinfo{
    position: relative;
    max-width: 1080px;
    margin: 0 auto;
    padding-top: 40px;
}
.h-factoryinfo:before,
.h-factoryinfo:after{
    content: "";
    display: table;
}
.h-factoryinfo:after{
    clear: both;
}
.h-factoryinfo .h-factoryinfo__ttl{
    width: 316px;
    float: left;
}
.h-factoryinfo .h-factoryinfo__ttl h2{
    font-size: 2.4em;
}
.h-factoryinfo .h-factoryinfo_img{
    width: 430px;
    height: 280px;
    float: left;
}
.h-factoryinfo .h-factoryinfo_data{
    width: 310px;
    float: right;
}
.h-factoryinfo .h-factoryinfo_data p{
    line-height: 1.5;
    margin-bottom: 20px;
}

/************************************************************

	Conpept

************************************************************/
.c-hero.c-hero__concept{
    background-image:url(../img/concept_hero_bg.jpg);
}
.c-hero.c-hero__concept .c-hero_ttl{
    width: 400px;
    left: 50%;
    margin-left: -200px;
    background-image:url(../img/concept_ttl.png);
}
.concept-block__01{
    position: relative;
    width: 1080px;
    height: 710px;
    margin: 128px auto 64px;
}
.concept-block__01 .concept-txtbox__01{
    position: absolute;
    z-index: 50;
    width: 608px;
    height: auto;
    background-color: #e6d7c8;
    padding: 56px;
    top: 144px;
    right: 0;
}
.concept-block__01 .concept-txtbox__01 h2{
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 20px;
    letter-spacing: 0px;
    line-height: 1.5;
}
.concept-block__01 .concept-txtbox__01 p{
    font-size: 14px;
    line-height: 2.4;
}
.concept-block__01 .concept-imgbox__01{
    width: 634px;
    position: absolute;
    z-index: 1;
}
.concept-block__02{
    position: relative;
    width: 1080px;
    height: 712px;
    margin: 64px auto 64px;
}
.concept-block__02 .concept-txtbox__02{
    position: absolute;
    width: 608px;
    height: auto;
    background-color: #e6d7c8;
    padding: 56px;
    z-index: 50;
    top: 110px;
    left: 0;
}
.concept-block__02 .concept-txtbox__02 h2{
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 20px;
    letter-spacing: 0px;
    line-height: 1.5;
}
.concept-block__02 .concept-txtbox__02 p{
    font-size: 14px;
    line-height: 2.4;
}
.concept-block__02 .concept-imgbox__02{
    position: absolute;
    width: 617px;
    z-index: 1;
    top: 0;
    right: 0;
}
.concept-block__01 .concept-txtbox__01 a,
.concept-block__02 .concept-txtbox__02 a{
    color: #000;
    padding-bottom: 3px; 
    border-bottom: 2px dotted #000;
}
.concept-block__01 .concept-txtbox__01 a:hover,
.concept-block__02 .concept-txtbox__02 a:hover{
    color: #666;
    border-bottom: 2px dotted #666;
}


/************************************************************

	Factory Info

************************************************************/
.c-hero.c-hero__factoryinfo{
    background-image:url(../img/factoryinfo_hero_bg.jpg);
}
.c-hero.c-hero__factoryinfo .c-hero_ttl{
    width: 560px;
    height: 45px;
    left: 50%;
    margin-left: -280px;
    background-image:url(../img/factoryinfo_ttl.png);
}
.factoryinfo-block{
    position: relative;
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 280px;
    padding: 72px 0 0;
}
.factoryinfo-block .factoryinfo-block__info{
    position: relative;
    width: 424px;
    height: auto;
    margin-top: -60px;
    background: #e6d7c8;
    padding: 64px 50px;
    float: right;
}
.factoryinfo-block .factoryinfo-block__info::before{
    content:"";
    display: block;
    position: absolute;
    width: 97px;
    height: 30px;
    background-image: url(../img/giebel_logo_arrow.png);
    background-size: 100%;
    background-repeat: no-repeat;
    top: -6px;
    left: 50%;
    margin-left: -48px;
}
.factoryinfo-block .factoryinfo-block__info::after{
    content:"";
    display: block;
    position: absolute;
    width: 97px;
    height: 30px;
    background-image: url(../img/giebel_logo_arrow.png);
    background-size: 100%;
    background-repeat: no-repeat;
    bottom: -6px;
    left: 50%;
    margin-left: -48px;
    transform:rotate(180deg);
}
.factoryinfo-block .factoryinfo-block__info h2{
    font-size: 28px;
    letter-spacing: 0px;
    margin-bottom: 20px;
    font-weight: bold;
}
.factoryinfo-block .factoryinfo-block__info p{
    font-size: 15px;
    line-height: 2;
}
.factoryinfo-block__img.img__01{
    width: 634px;
    height: 428px;
}
.factoryinfo-block__img.img__02{
    width: 507px;
    height: 342px;
    margin-top: 64px;
    margin-left: 91px;
}
.factoryinfo-block__img.img__03{
    position: absolute;
    width: 301px;
    height: 433px;
    right: 52px;
    top: 368px;
}
.factoryinfo-block__img.img__04{
    width: 386px;
    height: 277px;
    margin-top: 64px;
}
.factoryinfo-block__img.img__05{
    width: 660px;
    height: 445px;
    position: absolute;
    bottom:  -168px;
    right: 0;
}



/************************************************************

	MENU

************************************************************/





/************************************************************

	Contact

************************************************************/

.h-contact{
    position: relative;
    width: 1080px;
    margin: 0 auto;
}
.h-contact .h-contact__ttl h2{
    font-size: 2.4em;
    text-align: center;
    margin-bottom: 40px;
    margin-top: -50px;
    padding-top: 50px;
}
#contact .contact-head{
    margin-bottom: 80px;
}
#contact .contact-head .contact-head__title{
    font-size: 1.25em;
    font-weight: bold;
    text-align: center;
    margin: 30px 0;
}
#contact .contact-head .contact-head__txt{
    font-size: 0.9em;
    text-align: center;
    line-height: 2;
}
#contact .form{
    margin-left: auto;
    margin-right: auto;
    max-width: 1080px;
    padding: 0 5%;
}
#contact .form .form__table{
    width: 100%;
	text-align: left;
}
#contact .form .form__table th,
#contact .form .form__table td{
    padding: 10px 20px;
    vertical-align: middle;
    line-height: 1.3;
}
#contact .form .form__table th{
    position: relative;
	width: 30%;
    font-weight: 700;
    letter-spacing: 0.1em;
}
#contact .form .form__table th.required span{
    position: absolute;
    right: 12px;
    font-size: 12px;
    color: #000;
}
#contact .form .form__table th span{
    font-size: 12px;
}
#contact .form .form__table td{
	width: 70%;
}
#contact .form .form__table th.v-top,
#contact .form .form__table td.v-top{
    vertical-align: top;
}
#contact .form input{
    background-color: #efefef;
	border: 6px solid #efefef;
	padding: 12px 20px;
	font-size: 0.9em;
    font-family:'Barlow',"Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "游ゴシック", YuGothic, 'Noto Sans JP', "ＭＳ ゴシック", sans-serif;
	outline: none;
	-webkit-appearance: none;
}
#contact .form input:focus{
	border: 6px solid #e6d7c8;
    background: #fff;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}
#contact .form input.long{
	width: 100%;
}
#contact .form input.short{
	width: 25%;
}
#contact .form textarea.box{
	width:100%;
	height:320px;
    background-color: #efefef;
	border: 6px solid #efefef;
	padding: 12px 16px;
	font-size: 0.9em;
    font-family:'Barlow',"Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "游ゴシック", YuGothic, 'Noto Sans JP', "ＭＳ ゴシック", sans-serif;
	outline: none;
	-webkit-appearance: none;
}
#contact .form textarea.box:focus{
	border: 6px solid #e6d7c8;
    background: #fff;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}

#contact .form .submit input[type="submit"]{
    display: block;
	margin: 0 auto;
    width: 360px;
    height: 64px;
	font-size: 1.0em;
	font-weight: bold;
    font-family:'Barlow',"Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "游ゴシック", YuGothic, 'Noto Sans JP', "ＭＳ ゴシック", sans-serif;
    color: #222;
	letter-spacing: 0.15em;
	border: none;
	background-color: #e6d7c8;
    border: 1px solid #e6d7c8;
	cursor: pointer;
}
#contact .form .submit input[type="submit"]:hover,
#contact .form .submit input[type="submit"]:focus{
	background: #fff;
    color: #222;
    border: 1px solid #e6d7c8;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}
#contact .form .error{
	font-size: 0.9em;
	color:#ff0000;
    margin: 20px 0;
}
#contact .form div.button {
	margin: 20px 0 50px;
	text-align: center;
}
#contact .form div.submit {
	width: 100%;
	margin: 50px 0 20px 0;
}
#contact .form p.form__caption{
    margin-top: 20px;
    font-size: 0.85em;
    line-height: 1.75;
}

#contact .form__attention{
    max-width: 880px;
    margin: 7.2vw auto;
    padding: 0 4vw;
}
#contact .form__attention h3{
	font-size: 1.35em;
	margin-bottom: 30px;
	text-align: center;
}
#contact .form__attention h3+p{
	font-size: 0.9em;
	margin: 3vw 0;
    line-height: 2;
}
#contact .form__attention ol{
	list-style: decimal;
	margin-left: 24px;
	font-size: 0.85em;
    line-height: 2;
}
#contact .form__attention li{
    padding-left:12px;
    margin-bottom: 0.5vw;
}

/*
	Contact -> Confirm

******************************/

#contact .mw_wp_form_confirm .form__table{
    border-top: 1px solid #efefef; 
}
#contact .mw_wp_form_confirm .form__table tr,
#contact .mw_wp_form_confirm .form__table th,
#contact .mw_wp_form_confirm .form__table td{
    border-bottom: 1px solid #efefef;
}
#contact .mw_wp_form_confirm .form__table td{
    padding: 30px 20px;
}
#contact .mw_wp_form_confirm .form__table th.v-top{
    vertical-align: middle;
}
#contact .mw_wp_form_confirm .form__table p.form__caption{
    display: none;
}
#contact .mw_wp_form_confirm .form__table tr.form__validation{
    display: none;
}
#contact .mw_wp_form_confirm .form__table th.required span{
    display: none;
}
#contact .mw_wp_form_confirm .form .revice{
	width: 100%;
    text-align: center;
    margin: 10px 0 0 0;
}
#contact .mw_wp_form_confirm .form .revice input[type="submit"]{
    display: block;
	margin: 0 auto;
    width: 360px;
    height: 64px;
    font-size: 1.0em;
	color: #222;
	font-weight: bold;
    font-family:'Barlow',"Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "游ゴシック", YuGothic, 'Noto Sans JP', "ＭＳ ゴシック", sans-serif;
	letter-spacing: 0.15em;
	border: none;
	background-color: #eee;
    border: 1px solid #eee;
	cursor: pointer;
}
#contact .mw_wp_form_confirm .form .revice input[type="submit"]:hover,
#contact .mw_wp_form_confirm .form .revice input[type="submit"]:focus{
	background-color: #fff;
    color: #222;
    border: 1px solid #ccc;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}

/*
	Contact -> Thanks (Submit) Page

******************************/

.contact-home__btn{
    padding: 0 4.8vw;
    margin: 4.8vw 0 7.2vw;
}




/************************************************************

    404 Not Found | notfound_

************************************************************/

#notfound{}