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

html,
body {height: 100%;}
body > #container {
    height: 100%;
}




/********************************************
	loadLayer
*********************************************/
#loadLayer {
    position: fixed;
    width: 100%;
    height: 100%;
    display: block;
    background-color: #FFF;
    top: 0;
    left: 0;
    z-index: 99999;
    visibility: visible;

}
#loadLayer>span {
    background-image: url(/src/img/common/loader_logo2025.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 110px;
    background-position: 50%;
    height: 94px;
    display: block;
    position: absolute;
    top: -10px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
	-webkit-animation: loadLayerAnime 1s ease-in-out;
    animation: loadLayerAnime 1s ease-in-out;
}

#container {
	opacity:0;
}



/* ------------------------------------------------------
	intro
--------------------------------------------------- */
#container > .intro {
    height: 95%;
}
.intro {
    position: relative;
    margin-top: 85px;
}
.intro .overlay {
    background: url(/src/img/top/pattern.png);
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    top: 0;
    width: auto;
    /* z-index: 10; */
}


#i-cover > div {
   width: 100%;
   height: 100%;
   overflow: hidden;
}
.intro #i-cover, 
.history #i-cover {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.intro #i-cover {
    position: fixed;
}

.intro #homeVideo, 
.history #homeVideo  {
	display: inline-block;
	vertical-align: baseline;
	position: absolute;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}

.intro #i-headline {
    display: table;
    text-align: center;
    top: 0;
    width: 100%;
    height: 100%;
    margin-top: -5%;
    position:  relative;
    z-index: 50;
}
.intro #i-headline h1:before {
	/* content:''; */
	background-image: url(/src/img/top/logomark.png);
	background-repeat:no-repeat;
	background-position:center;
	width:  111px;
	height: 102px;
	display:  inline-block;
}
.intro #i-headline h1 {
    color: #fff;
    display: table-cell;
    font-family: 'kozmin';
    font-size: 43px;
    position: relative;
    vertical-align: middle;
    z-index: 150;
    line-height: 1.5;
    -webkit-text-shadow: 0 0 5px rgba(0, 0, 0, 1.0);
    -moz-text-shadow: 0 0 5px rgba(0, 0, 0, 1.0);
    text-shadow: 0 3px 10px rgba(0, 0, 0, 1.0);
    background-image: url(/src/img/top/cover.png);
    background-position: center;
    background-repeat: no-repeat;
}


h1 {}
.intro #i-headline span {
    display:  block;
}

.intro #i-headline span:first-child {
    text-indent: -1em;
}

.news {
    background: rgba(255,255,255,0.75);
    background-size: 100% auto;
    padding-bottom: 15%;
}

.nami {
	opacity: 0.75;
/*    width: 100%;
    display: inline-block;
    background-image: url(/src/img/top/nami.png);
    background-repeat: no-repeat;
    padding-bottom: 50px;
    opacity: 0.75;
	padding-bottom:6.25%;
    background-size: 101%;
    background-position: center bottom;
    vertical-align: bottom;*/
}
.nami img {
    width: 100%;
}
@media screen and (min-width: 1000px) {
/*.nami {
    padding-bottom: 106px;
}*/
}
.main {
    position: absolute;
    width: 100%;
    top: 80%;
}

.news .inner {
    max-width: 1000px;
    margin:  0 auto;
    position:  relative;
    height: 100%;
}

h2 {
    font-family: Times New Roman;
    font-size: 41px;
    color: #000;
    margin-bottom: 10px;
}

em {
    font-style:  normal;
}



h2 small {
    font-size: 15px;
    padding-left: 20px;
}
.news #newsInner dl {
    border-bottom: #B6B6B7 1px solid;
    line-height: 2;
    padding-left: 30px;
    padding: 10px 0 10px 10px;
}

.news #newsInner dl dt {
    color: #033184;
    display:  inline-block;
    padding-right: 10px;
    width: 22%;
}
.news #newsInner dl dt span {
    font-size: 0.8em;
    display: inline-block;
    padding: 0 0 0 10px;
}
.news #newsInner dl dt span.cate01 {
    color: #5ba3cd;
}
.news #newsInner dl dt span.cate02 {
    color: #519485;
}
.news #newsInner dl dt span.cate03 {
    color: #bd575b;
}
.news #newsInner dl dt span.cate04 {
    color: #9c9757;
}

.news #newsInner dl dt span:before {
    content: '｜';
    color: #8D8D8E;
    padding-right: 10px;
}

.news #newsInner dl dd {
    display:  inline-block;
    width: 75%;
    vertical-align:  top;
    line-height: 1.7;
}


#newsInner {
	max-width:1000px;
	margin-left:auto;
	margin-right:auto;
	position:relative;
	z-index: 200;
}
.news #newsInner.height .postion {
	position:absolute;
	top: -30px;
	/* z-index: 500; */
}
.news .postion {
    width: 100%;
}
.news #newsInner.height .postion a dl {
    color: #2f3032;
    transition: all 0.3s;
}


.news #newsInner.height .postion a:hover dl {
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    opacity: 1;
	z-index:1;
}


.bgWhite {
	background-color:#fff;
	overflow:hidden;
}

/* ------------------------------------------------------
	movie
--------------------------------------------------- */
.movie {
    position: relative;
    background: url(/src/img/common/bg_kraft.jpg);
    z-index: 100;
}
.movie .inner {
    position:  relative;
}
.movie .inner .movie_bg {
    background-image: url(/src/img/top/makitori_motif.png);
    background-repeat: no-repeat;
    position: absolute;
    width: 100%;
    height: 795px;
    top: -50px;
    background-size: 790px;
}
.movie h2 em { padding-left:20px; }
.movie .movieInner_cont {
    max-width: 1000px;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    padding: 100px 0;
}
.movie .inner h2, .video-wrap {
    float: right;
	position: relative;
}
.video-btn {
    content: "";
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:40px; /*コントローラー分下部に余白を*/
    cursor: pointer;
}
.video-wrap #c_video {
	width:854px;
}




/* ------------------------------------------------------
	about
--------------------------------------------------- */
.about {
    padding-bottom: 80px;
}
.about .mainimg {
	position:relative;
	padding: 15.3% 0;
	overflow:  hidden;
}
.about .mainimg:before {
    background-image: url(/src/img/top/about_bg.jpg);
    background-position: center center;
    background-size: cover;
    content: '';
    left: 0;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
	-webkit-animation: anm-scale-zoomin 50s infinite ease;
    -ms-animation: anm-scale-zoomin 50s infinite ease;
    animation: anm-scale-zoomin 40s infinite ease;
}
.about .mainimg:after {
    background: url(/src/img/top/pattern_bk.png) center center;
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}
.about .inner {
    max-width: 1000px;
    margin:  0 auto;
}

.about h2 {
	position: relative;
    z-index: 10;
}

.about .inner .ig {
	width: 50%;
    right: 0;
    top: 5%;
    background-image: url(/src/img/top/about_ig.png);
    background-repeat: no-repeat;
    height: 100%;
    position: absolute;
    background-size: contain;
    overflow: hidden;
    z-index: 10;
}
.textArea {
    padding-top: 30px;
    text-align: center;
    line-height: 1.8;
    position:  relative;
    z-index:  50;
}

/* ------------------------------------------------------
	history
--------------------------------------------------- */
.history, 
.history_cont {
	position:  relative;
}
.history_cont:before {
    background-image: url(/src/img/top/historymain.jpg);
    background-position: center center;
    background-size: cover;
	background-attachment:fixed;
    content: '';
    left: 0;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
	-webkit-animation: anm-scale-zoomin 50s infinite ease;
    -ms-animation: anm-scale-zoomin 50s infinite ease;
    animation: anm-scale-zoomin 40s infinite ease;
}
.history .inner {
    position:  absolute;
    top: 15vw;
    left: 45%;
    z-index: 100;
}

.history .inner h2 em, 
.special h2 em, 
.recruit h2 em {
    display: block;
}

.history .inner h2 small, 
.special h2 small, 
.recruit h2 small {
    padding: 0;
}
.history .inner h2, 
.special h2, 
.recruit h2 {
    line-height: 0.8;
    text-align:  center;
}
.history h2, 
.about h2 {
    color: #fff;
}

.history .g_photo {
    bottom: 0;
	left:0;
    position:  absolute;
    letter-spacing: -1em;
    width: 100%;
}

.history .g_photo li {
    display:  inline-block;
    letter-spacing: 0;
    width: 25%;
}

.history .g_photo li img {
    width: 100%;
}
.history_cont {
    position: relative;
    width: 100%;
    height: 50vw;
    overflow:  hidden;
}

.history_cont .i-cover {
    height: 30vw;
}

/* ------------------------------------------------------
	special
--------------------------------------------------- */
.special, .recruit {
	text-align:center;
	position: relative;
	z-index: 50;
}
.bnrArea a {
    background-position: center;
    text-indent: -9999px;
    display: block;
    background-repeat: no-repeat;
    width: 100%;
    min-height: 170px;
}
.special .bnrArea a {
    border: #65d9fe 1px solid;
    background-image: url(/src/img/top/bnr_special.jpg);
}


.special .bnrArea2 {
	padding:2rem 0;
	text-align:center;
}
.special .bnrArea2 a {
	display:inline-block;
	background-color:#fff;
}
.special .bnrArea2 a:hover dl {
	opacity:0.75;
}
.special .bnrArea2 .banner2 dl {
	display:flex;
	justify-content:flex-start;
	align-items: center;
	width:320px;
	height:82px;
	margin:0;
	background-color:#fff;
	color:#000;
}
.special .bnrArea2 .banner2 dt {
	padding:0.5rem;
	height:82px;
}
.special .bnrArea2 .banner2 dt img {
	width:auto;
	max-height:100%;
}
.special .bnrArea2 dd {
	margin:0;
	padding:0 0 0 0.5rem;
	display:flex;
  flex-direction: column;
	font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
	text-align:left;
}
.special .bnrArea2 dd .bannerTitle {
	font-size:1.5rem;
	font-weight:bold;
	padding-left:1rem;
}


.recruit .bnrArea a {
    background-image: url(/src/img/top/bnr_recruit.jpg);
    border: #d4cfbe 1px solid;
}
.motif {
	position:relative;
	margin-top: 250px;
}
.motifCont:before {
    content: '';
    height: 0;
    z-index: 10;
    background-repeat: no-repeat;
    background-position: top right;
    position: absolute;
    background-image: url(/src/img/top/bg_special.png);
    width: 50%;
    padding: 34.375vw 0;
    top: -60%;
    right: 0;
    background-size: 100%;
}

.motif .inner {
    max-width:  1000px;
    margin:  0 auto;
    padding-top: 200px;
}
.motif .nami {
    background-image: url(/src/img/top/nami02.svg);
    left: 0;
    background-repeat: no-repeat;
    opacity: 1.0;
    background-size: contain;
    position: absolute;
    z-index: 5;
    top: 0;
    padding-bottom: 8.5340212%;
    margin-top: -5px;
}
.motif .motifCont {
    position: relative;
    background: url(/src/img/common/bg_kraft02.jpg);
    padding-bottom: 1rem;
}

.recruit {
    margin-top: 150px;
}
.special {
    margin-top: -300px;
}

@media screen and (min-width:1800px) {
.motifCont:before {
    top: -70%;
}
}
@media screen and (max-width:1366px) {
.movie .inner .movie_bg {
    background-size: 600px;
    max-height: 40em; 
}
.history_cont:before {
    background-image: url(/src/img/top/historymain_sp.jpg);
    background-attachment: inherit;
}
.history .g_photo {
    overflow: hidden;
}
.history .g_photo li {
    float: left;
    display: inherit;
}
.movie .inner {
	background-size: 1100px;
}
.history .inner {
    left: 40%;
}

#newsInner {
    width: 90%;
}

.news #newsInner.height .postion {
    top: 0;
}
.movie .movieInner_cont {
    width: 95%;
}
}

@media screen and (max-width: 1000px) {
.intro {
    margin-top: 60px;
}
#i-cover > div {
    display: none;
}
.intro #i-cover {
	width: 100%;
    background: url(/src/img/top/main_sp.jpg) center center no-repeat;
    background-size: cover;
}
.intro #i-headline h1 {
	font-size: 28px;
}
.intro #i-headline {
    margin-top: -20%;
}
.main {
    top: 90%;
}

.news #newsInner.height .postion {
	position:static;
    padding: 20px 10px;
}
h2 {font-size:35px; }
.news h2 {
    padding-left: 20px;
}

.news #newsInner dl {
    line-height: 2;
    margin-bottom: 5px;
	padding: 2px 20px;
}
.news #newsInner dl dt {
	display:block;
	width: auto;
	}
.special, .recruit {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}
.bnrArea a {
    background-size: 918px;
    min-height: 153px;
}
.history_cont {
    height: 60vw;
}

}


@media screen and (max-width: 750px) {
.news #newsInner dl dd {
    line-height: 1.7;
    font-size: 0.9em;
    width:  auto;
}
.movie .inner .movie_bg {
    top: -30px;
    background-size: 300px;
}
.movie .inner {
	background-size: 495px;
}
.movie video#c_video {
	max-width:100%; }
.video-btn {
    bottom:200px; /*コントローラー分下部に余白を*/
}
.movie .movieInner_cont {
    padding: 100px 10px 50px 10px;
}
.news {
    padding-bottom: 30%;
}
.about .inner .ig {
	background-image:none;
}
.about .inner .ig {
    background-image: none;
}

.about .mainimg {
    padding: 30% 0;
}

.about h2 em {
    display:  block;
}

.about h2 {
    text-align:  center;
    line-height: 0.8;
}

h2 small {
    padding-left: 10px;
}

.textArea {
    width:  90%;
    margin: 0 auto;
}

.history_cont:before {
    background-attachment: inherit;
}

.history_cont {
    height: 160vw;
}

.history .g_photo li {
    width: 50%;
}
.history .g_photo li img {
    width: 100%;
}
.history .inner {
    top: 35vw;
    left: 30%;
}
.history_cont:before {
    background-image: url(/src/img/top/historymain_sp.jpg);
}
.motifCont:before {
    width: 90%;
    top: -85%;
}


.special {
    margin-top: -330px;
}
.bnrArea a {
    background-position: center;
    background-size: cover;
    padding: 12.8% 0;
    min-height: 0;
}
.special .bnrArea a {
    background-image: url(/src/img/top/bnr_special_sp.jpg);
}
.recruit {
    margin-top: 70px;
}
.recruit .bnrArea a {
    background-image: url(/src/img/top/bnr_recruit_sp.jpg);
}

}