@charset "UTF-8";


/*========= ナビゲーションのためのCSS ===============*/

#g-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 999;
    /*ナビのスタート位置と形状*/
	top:0;
    left: -120%;
	width:30%;
    height: 100vh;/*ナビの高さ*/
	background:#242424;
    opacity: 0.96;
    /*動き*/
	transition: all 0.6s;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
    left: 0;
}


/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999;
    width:100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    top:50%;
    left:15%;
    transform: translate(-50%,-50%);
}

/*リストのレイアウト設定*/

#g-nav li{
	list-style: none;
    text-align: left;
    padding: 10px 0;
}

#g-nav li a{
	color: #fff;
	text-decoration: none;
	padding:15px;
	display: block;
	/* text-transform: uppercase; */
	letter-spacing: 0.1em;
	font-weight: bold;
    font-weight: 400;
}

/*========= ボタンのためのCSS ===============*/
.openbtn{
	position:fixed;
    z-index: 9999;/*ボタンを最前面に*/
	top:1px;
	left: 2%;
	cursor: pointer;
    width: 32px;
    height:72px;
}

/*×に変化*/
.openbtn span{
    display: inline-block;
    transition: all .6s;
    position: absolute;
    /* left: 14px; */
    height: 1px;
	background-color: #333;
  	width: 32px;
  }

  .openbtn span:nth-of-type(1) {
	top:48px;
  	width: 100%;
}

.openbtn span:nth-of-type(2) {
	top:60px;
  	width:80%;
}

/*activeクラスが付与されると線が回転して×に*/

.openbtn.active span:nth-of-type(1) {
    top: 48px;
    /* left: 16px; */
    transform: translateY(6px) rotate(-45deg);
    width: 100%;
    background-color: #fff;
}

.openbtn.active span:nth-of-type(2) {
    top: 60px;
    /* left: 16px; */
    transform: translateY(-6px) rotate(45deg);
    width: 100%;
    background-color: #fff;
}

/* ファーストビュー */
.fv {
    text-shadow: 0px 0px 4px  rgba(0, 0, 0, .32);
}
.fv__bg {
    position: relative;
    background-image: url(../img/fv_img@2x.jpg);
    background-size: cover;
    width: 100vw;
    height: 100vh; /* 100vh 971px;*/
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}
.header--l {
    position:relative;
    position: fixed;
    width: 104px;
    height: 100vh;
    border-right: solid 1px;
    top: 0%;
    left: 0%;
    border-color: #fff;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, .08);
    z-index: 5;
}
.header--l__title-01 {
    position: absolute;
    writing-mode: vertical-rl;
    font-size: 24px;
    color: #fff;
    top: 45%;
    left: 1%;
}

.header-name_small {
    font-size: 12px;
    color: #fdfdfd;
}

.nav {
    top: 48px;
    right: 80px;
    position: absolute;
}
.nav ul {
    display: flex;
}
.nav ul li {
    padding: 0 24px;
}
.nav ul li a{
color:#fff;
}
.fv__wrappar {
    position: absolute;
    text-align: center;
    color: #fdfdfd;

}
.fv__AA {
    background:url(../img/AA_fv.png) no-repeat center;
    width: 90vw;
    height: 90vh;
    position: absolute;
}
.fv__title--jp {
    margin-bottom: 32px;
    font-weight: 600;
}
.fv__title--en h2{
    font-weight: 500;
}

.fv__title--name {
    position: absolute;
    bottom: 24px;
    right: 104px;
    color: #fdfdfd;
}
.fv__title--name h3 {
    font-weight: 400;
}

/* スクロールダウン */
.scrolldown{
	position:absolute;
	left:50%;
	bottom:0px;
	height:80px;
}

.scrolldown span{
	position: absolute;
	left:10px;
	bottom:10px;
	color: #eee;
	font-size: 16px;
	letter-spacing: 0.072em;
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

.scrolldown::after{
	content: "";
	position: absolute;
	top: 0;
	width: 1px;
	height: 80px;
	background: #fdfdfd;
	animation: pathmove 1.4s ease-in-out infinite;
	opacity:0;
}

@keyframes pathmove{
	0%{
		height: 80px;
		top: 0px;
		opacity: 0;
	}
	30%{
		height: 80px;
		opacity: 1;
	}
	100%{
		height:80px;
		top:80px;
		opacity: 1;
	}
}


/* 目的・背景 */
.intro {
    width: 100vw;
    position: relative;
    overflow: hidden;
}
.header--l__title-02 {
    position: fixed;
    writing-mode: vertical-rl;
    font-size: 24px;
    color: #242424;
    top: 45%;
    left: 1%;
    display: none;
}
.intro__wrappar {
    max-width: 1040px;
    padding: 0 56px;
    margin-top: 120px;
    margin: 120px auto 0;
    display: flex;
}

.intro h2 {
    margin-bottom: 56px;
}
.intro__wrappar p {
    width: 496px;
    margin-bottom: 56px;
}
.intro__img--wrappar {
    display: flex;
}
.intro__img-01, .intro__img-02,
.intro__img-03, .intro__img-04 {

}
.intro__img-01 {
    background: url(../img/french-fly.png) no-repeat ;
    width: 368px;
    margin-left: 216px;
}
.intro__img-02 {
    background: url(../img/serial.png) no-repeat;
    width: 376px;
    height: 304px;
    position: absolute;
    bottom: 10px;
    right:320px;
}
.intro__img-03 {
    background: url(../img/coffee.png) no-repeat;
    width: 376px;
    height: 304px;
    position: absolute;
    bottom: 2%;
    right:-64px;
}


/* 食品中のアクリルアミド低減法 */
.method {
    position: relative;
    overflow: hidden;
}
.method__wrappar {
    max-width: 1040px;
    margin: 0 auto;
}
.method_title {
    margin: 0 0 120px ;
}
.method__french-fries {
    display: flex;
    align-items: end;
    margin-bottom: 200px;
}
.method__french-fries__container {
    transform: translate(112px);
}
.method__french-fries--img ::after {
    content: "normal";
    width: 100%;
    height: 100%;
    background-image: url(../img/method-fty.jpg);
    background-repeat: no-repeat;
    position:absolute;
    z-index: -5;
    left: 104px;
    top: 400px;
}
.method__title h3{
    font-weight: 500;
    padding-bottom: 16px;
}
.method__content {
    margin: 0 0 48px -24px;
}
.method__content p {
    padding: 24px 24px ;
    line-height: 1;
    border-bottom: solid 1px #8d8d8d;
  }
.method__potato-chips{
    display: flex;
    flex-direction: row-reverse;
    align-items: end;
    position: relative;
    transform: translate(152px);
    margin-bottom: 200px;
}
.method__potato-chips__img {
    transform: translate(88px);
}
.method__grains {
    background-color: #242424;
    height: 472px;
    display: flex;
    align-items: center;
    margin-bottom: 200px;
    position: relative;
}
.method__grains__img {
    background: url(../img/para_bg01.jpg) no-repeat;
    background-position: right;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    height: 472px;
    width: 50%;
}
.method__title-w h3{
    color:#fff;
    font-weight: 500;
    padding-bottom: 16px;
}
.method__content-w {
    margin: 0 0 48px -24px;
}

.method__content-w p{
    color: #fff;
    padding: 24px 24px ;
    line-height: 1;
    border-bottom: solid 1px #8d8d8d;

}
.method__method__grains__container {
    margin-left: 264px;
}
.method__bread {
    display: flex;
    align-items: end;
    position: relative;
    margin-bottom: 200px;
}
.method__biscuits {
    display: flex;
    flex-direction: row-reverse;
    align-items: end;
    position: relative;
    transform: translate(152px);
    margin-bottom: 200px;
}
.method__biscuits__img ::after{
    content: "";
    width: 100%;
    height: 100%;
    background-image: url(../img/biscuit__bg.jpg);
    background-repeat: no-repeat;
    position:absolute;
    z-index: -5;
    right: -61%;
    top: 348px;
}
.method__biscuits__img {
    transform: translate(88px);
}
.method__serial{
    display: flex;
    align-items: end;
    position: relative;
    transform: translate(152px);
    margin-bottom: 96px;
}
.method__serial__container {
    transform: translate(112px);
}
.method__crispbread {
    display: flex;
    flex-direction: row-reverse;
    align-items: end;
    position: relative;
    transform: translate(152px);
    margin-bottom: 200px;
}
.method__crispbread__container {
    transform: translate(-112px);
}


.references {
    position: relative;
    height: 428px;
    margin-bottom: 80px;
}
.references-bg {
    background-color: #d8d8d8;
    height: 428px;
    position: absolute;
    padding-left: 80vw;
    z-index: -3;
    right: 0;
    margin-bottom: 80px;
}

.references_title {
    text-align: center;
    transform: translate(0px, -16px);
}

.references__content {
    display: flex;
    align-items: center;
    margin-bottom: 56px;
}
.references__content p{
width: 608px;
padding-right: 64px;
}
.references__container__wrappar {
max-width: 864px;
margin:  0 auto;
padding-top: 96px;
}
.acknowledgments__bg {
    background: url(../img/Acknowledgments_bg04.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    height: 736px;
    width: 100%;
    color: #fdfdfd;
}
.acknowledgments__wrappar {
    max-width: 1040px;
    text-align: center;
    margin: 0 auto;
}
.acknowledgments__title {
    padding: 120px 96px;
}
.acknowledgments__contents p{
   text-align: left;
   padding-bottom: 24px;
   font-size: 24px;
}


/*infoエリアをはじめは非表示*/
#modal__french-fries, #modal__potato-chips, 
#modal__bread, #modal__biscuits,
#method__grains, #method__serial, #method__crispbread {
	display: none;
}

/*モーダルの横幅を変更したい場合*/
.modaal-container{
    max-width: 1040px;
}

/*モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
	background:#ccc;	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}

.modal_txt {
    max-width: 800px;
    margin: 0 auto;
    padding-bottom: 76px;
}
.modal_method {
    font-size: 20px;
    font-weight: 500;
    padding-bottom: 8px;
}
.modal_sub-title {
    color: #6c6c6c;
    margin-top: 104px;
    padding-bottom: 40px;
}
.modal_title {
    margin-bottom: 138px;
}
.modal_method__wrappar {
    margin-bottom: 48px;
}
.modal__french-fries--img {
    background:url(../img/modal_french-fry.jpg);
}
.modal__potato-chips--img {
    background:url(../img/modal_potato-chips.jpg);
}
.modal__grains--img {
    background:url(../img/modal_grains.jpg);
}
.modal__bread--img {
    background:url(../img/modal_bread.jpg);
}
.modal__biscuits--img {
    background:url(../img/modal_biscuits.jpg);
}
.modal__serial--img {
    background:url(../img/modal_serial.jpg);
}
.modal__crispbread--img {
    background:url(../img/modal_crispbread.jpg);
}
.modal_img-position {
    width:320px;
    height: 320px;
    position: absolute;
    top: 0px;
    right: 120px;
}

.footer {
    width: 100%;
    background: #242424;
}
.footer small {
    padding: 64px;
    display: flex;
    text-align: center;
    justify-content: center;
    color: #fdfdfd;
    font-weight: 400;
}