@charset "UTF-8";

/* ==========================
  swiperslider
========================== */




/* video */
.moviearea{  position: relative;}
.video-box {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: calc( 100vh - 94px);
}
.video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/* wrap */
.moviearea {
  position: relative;
}

/* video */

/*.video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}*/

.video {
  position: absolute;
  top: 0;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}


/* overlay */

.overlay::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background: rgba(0, 0, 0, 0.1);
}

/* text */

.text-box h1{  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
	font-size: 6rem; font-weight: 700;
	position: absolute; right: 40px; top: 40px;
	color: #fff; letter-spacing: 0.2em; white-space: nowrap;

}

.mainenread{ position: absolute; left: 20px; bottom: 40px; color: #fff; font-weight: 500;}
.mainenread dt{ font-size: 3rem;
	margin-bottom: 10px;
}
.mainenread dd{ font-size: 5.8rem;  line-height: 1.2;}
.mainenread p{ font-size: 3rem;}



/* overlay */

.overlay::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background: rgba(0, 0, 0, 0.1);
}

.video_button{ width: 24px; height: 24px; position: absolute; right: 40px; bottom: 40px;}
.playBtn{ opacity: 1 !important; position: absolute; top: 0; left: 0}
 .stopBtn{ opacity: 0 !important; position: absolute; top: 0; left: 0}

.current .playBtn{ opacity: 0 !important;}
.current .stopBtn{ opacity: 1 !important;}

  main {
    display: block;
  }

:root {
  --color-theme: #004098;
}

    main {
      display: block;
    }


.invTit{ text-align: center; position: absolute; top: 0; width: 100%; text-align: center;}
.invTit p{ text-align: center; }


    @media only screen and (min-width: 1190px) {
      .sp {
        display: none !important;
      }
    }
.moviearea{ padding-top: 0; margin-bottom: 0}
.readarea h2{ margin-bottom: 48px}
.readarea h2 img{ margin: 0 auto}
.readarea{ text-align: center; font-size: 2.4rem;line-height: 2;  }
.linklist{ padding-top: 64px;}
.linklist li{ display: inline-block; padding:0 12px; vertical-align: top;}

.cpbannerslide img{ width:100%; height: auto; border-radius: 40px; overflow: hidden; position: relative; z-index: 2;}
.cpbannerslide .slideIn{ padding:10px 20px;}

.cpbannerslide li a{ position: relative; margin-bottom:10px;}
/*.cpbannerslide li a:after{content: ""; display: block; width: 100%; height: 100%; background:#E60012; border-radius: 40px; position: absolute; left: 0; top: 0; transition: all .4s;}
.cpbannerslide a:hover:after{ left: 10px; top: 10px;}*/
.cpbannerslide a img{transition: all .4s;}


.invwrapp{ background: #E60012; border-radius: 41px; padding: 50px 2px 2px 2px ; max-width: 400px; box-sizing: border-box; margin: 0 auto}

.innovation{ background: #F7F7F7; margin-bottom: 0; padding-bottom: 94px; position: relative;}
.inoveTut{ font-size: 2.8rem; text-align: center;}
.innovation h2{ margin-bottom: 20px; padding-top: 70px; position: relative; z-index: 2;}
.innovation li{padding: 0 24px; box-sizing: border-box; padding-top: 10px}
 .koujiInv:after {content: ""; display: block; text-align: right; position: absolute; right: -1px; top: -2px; font-size: 2.6rem; font-weight: 700;  color:#E60012; background: url("../img/index/iv01.svg") left top no-repeat; width: 82px; height: 82px;}
.oikoujiInv:after {content: ""; display: block; text-align: right; position: absolute; right: -1px; top: -2px; font-size: 2.6rem; font-weight: 700;  color:#E60012; background: url("../img/index/iv02.svg") left top no-repeat; width: 82px; height: 82px;}
.sokusekiInv:after {content: ""; display: block; text-align: right; position: absolute; right: -1px; top: -2px; font-size: 2.6rem; font-weight: 700;  color:#E60012; background: url("../img/index/iv03.svg") left top no-repeat; width: 82px; height: 82px;}
/*.koujiInv{ background: url("../img/bgkouji.png") center center no-repeat; background-size: cover; overflow: hidden;}
.sokusekiInv{ background: url("../img/bgmiso.png") center center no-repeat; background-size: cover; overflow: hidden;}
.oikoujiInv{ background: url("../img/bgmiso2.png") center center no-repeat; background-size: cover; overflow: hidden;}*/
.invIN{ border-radius: 39px; background: #fff; max-width: 400px; margin: 0 auto; position: relative;}
.tetin h3{ font-size: 2.0rem; text-align: center; box-sizing: border-box; width: 100%; color: #E60012; font-weight: 500; font-weight: 700; padding-top: 20px; padding-bottom: 15px;}
.imgcontent{ padding: 20px; box-sizing: border-box;  position: relative;}
.imgcontent:before{ content: "INNOVATION";
    color: #fff;
    position: absolute;
    left: 0;
    top: -32px;
    letter-spacing: 0.2em;
    font-weight: 600;
    width: 100%;
    text-align: center;}

.inovimg{ width: 100%;}
.invslideW{ max-width: 1600px; margin: 0 auto;  margin-bottom: 64px;}
.tetin{ padding: 10px 0; line-height: 1.5;}
.tetin p{ padding: 0 20px;}
/*.intxt{ margin-bottom: 54px;}*/

a.invBtn{ max-width: 256px; margin-left: auto; background: #fff; color: #E60012}

.newsdate{ font-weight: 500; border-right: 1px solid #D9D9D9; box-sizing: border-box; width: 140px; min-width: 140px;}

.invIN{transition: all .4s }
.innovation li a:hover .invIN{ background-color: transparent; color: #fff;}
.tetin h3{   transition: all .4s }
.innovation li a:hover  .tetin h3{ color: #fff;}
.newsdate dt{ font-size:1.6rem;}
.newsdate dd{ font-size:2.8rem; font-weight: 600;}

.newsCtg span{ background: #F7F7F7; color: #E60012; border-radius: 18px; font-size: 1.4rem; padding: 5px 20px; display: inline-block; text-align: center; display: inline-block; flex-shrink: 0; width: 135px }
.newsListTit h3{ font-weight: 400;}
.newsList{border-top: 1px solid  #D9D9D9; margin-bottom: 64px;}
.newsList li a{ display: flex; align-items: center; align-content: center; justyify-content:flex-start; padding: 30px 0; border-bottom: 1px solid  #D9D9D9; width: 100%;  position: relative;}
.newsList li a:hover h3{ color: #E60012;}
.newsList li a:hover .rinkBtns{margin-right: -10px;}
.newsListTit{  display: flex; align-items: center; align-content: center; box-sizing: border-box; padding-left: 36px; justyify-content:flex-start; width: 100%;}
.newsListTit .newsCtg{ width: 156px; display: grid;
  place-items: center;}

.newsListTit h3{display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical; padding-left: 36px; box-sizing: border-box; width: calc(100% - 180px);
padding-right: 50px; line-height: 1.5;}
.rinkBtns{  width: 5%; box-sizing: border-box; position: absolute; right: 0; top: 50%; transform: all 0.4s !important ; margin-top: -12.5px;}

.recipesList{ display: flex; justify-content: space-around; gap: 28px; margin-bottom: 64px; width: 100%; }
.recipesList li{ width: 33%; box-sizing: border-box; flex: 1;　min-width: 0; flex-shrink: 0;}
.recipeslistIn{ width: 100%;}
.recipesList dt{ margin-bottom: 16px;}
.recipesList dt img{ border-radius: 24px;}
.recipesList dd{ font-size: 1.6rem; font-weight: 400; width: 100%; box-sizing: border-box; min-width: 0;}
.recipesList dd span{ width: calc(100% - 50px); display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; vertical-align: middle;}
.recipesList dd:after{ content: ""; display: inline-block; width: 10px; height: 10px; background: url("../common/img/arrow.svg") center center no-repeat; padding-left: 40px; background-size: contain; vertical-align: middle;}

.categoryList{ display: flex; justify-content: space-around; gap: 28px; margin-bottom: 64px;}
.categoryList li{ text-align: center; box-sizing: border-box; padding: 40px 20px 10px 20px; position: relative; transition: all .4s;}
.ctgens{ font-size: 3.6rem; text-align: center; position: absolute; top: 5px; text-align: center; font-weight: 600; width: 100%; color: #ccc; left: 0;}

.categorylistIn dl{ position: relative; z-index: 2;}
.categorylistIn dt{ width: 100%; height: 170px; position: relative}
.categorylistIn dt img{ object-fit: contain; width: 100%; height: 170px;}
.categorylistIn dd{ padding-top: 5px;}
.categoryList li{ box-sizing: border-box; width: 25%; border: 1px solid #fff; border-radius: 24px;}
.categoryList li:hover { border: 1px solid #E60012; color: #E60012 }
.categoryList li:hover .ctgens{color: #E60012;}
.categoryList li a:hover{color: #E60012;}

.brandList{ display: flex; flex-wrap: wrap; ; gap: 20px;  margin-bottom: 64px;}
.brandList li{ width: calc(50% - 20px) }
.brandylistIn{ position: relative;}
.brandylistIn img{ position: relative; z-index: 2; border-radius: 40px; overflow: hidden}
/*.brandylistIn:after{ content: ""; display: block; width: 100%; height: 100%; background:#E60012; position:absolute; left: 0; top: 0;  border-radius: 40px; overflow: hidden; transition: all .4s;}
.brandList li a:hover .brandylistIn:after{ left: 5px; top: 5px;}*/

.brandylistIn{ position: relative;}
.brandylistIn .onimg{ position: absolute; left: 0; top: 0;}
.overList a:hover .brandylistIn img{ }
.overList img{ transition: all .4s;}
.overList a:hover .dfimg{ opacity: 0 !important;}
.brandylistIn .dfimg{ z-index: 3}
.brandylistIn img{transition: all .4s !important;}
a:hover .brandylistIn img{ box-shadow: 10px 10px 0px 0px rgba(230, 0, 18, 1);   /* margin-left: -5px;
    margin-top: -5px;*/
	transform: translate(-5px, -5px) !important;  transition: all .4s;}

.onlineList{ display: flex; flex-wrap: wrap; ; gap: 24px;  margin-bottom: 64px;}
.onlineList li{ width: calc(50% - 12px);}
.learningListIn{ width: 100%; height: 450px; position: relative;}
.learningListIn img.cover{ object-fit: cover; object-position: center center; position: absolute; width: 100%; height: 450px;}
.learningListTit{ width: 100%; font-size: 2.8rem; text-align: center; position: relative; z-index: 3; padding-top: 180px; color: #fff;}

.onlineList li a:hover img{ opacity: 0.6  !important;}

.learningListIn p{position: absolute; bottom: 40px; width: 100%;}
.learningListIn .btn{ position: relative; z-index: 2;  color: #E60012; background: #fff; }

.learningListIn .logoimag {position:  relative; max-width: 634px; margin: 0 auto; padding-top: 120px;}


.movieList{ display: flex; flex-wrap: wrap; ; gap: 30px;  margin-bottom: 64px;}
.movieList li{ width: calc(50% - 15px);}

.movieTita{
    font-size: 1.6rem;
    font-weight: 400;
    width: 100%;
    box-sizing: border-box;
	min-width: 0; margin-top: 16px;}

.movieTita:after{
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    background: url(../common/img/arrow.svg) center center no-repeat;
    padding-left: 40px;
    background-size: contain;
    vertical-align: middle;
}

.movieTita span {
    width: calc(100% - 50px);
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
    vertical-align: middle;
}

.cstsvList{ display: flex; flex-wrap: wrap; ; gap: 30px; }
.cstsvList li{ width: calc(33% - 20px);}
.pc{ display: block;}
.invTit .pc{ display: inline-block;}
.sp{ display: none;}

.bannerft{ display: flex}
.bannerft img{ display: flex;  transition: all .4s;}
.bannerft a:hover img{ opacity: 0.6 !important;}

@media screen and (max-width:980px) {
.pc{ display: none;}
.sp{ display: block;}
	.invTit .pc{ display: none;}
.invTit .sp{ display: inline-block; width: 100%; height: auto}
	.text-box h1{ font-size: 3rem; right: 20px;}
	.mainenread dt{ font-size:2rem;}
	.mainenread dd{ font-size: 3rem;}
	.mainenread p {font-size:2rem;}
	.video_button {
    right: 20px;
    bottom: 20px;
}
	.mainenread{ bottom: 20px;}
	.video-box {
    height: calc(100vh - 64px);
}
	.readarea{ font-size: 2rem; text-align: left;}

	.linklist{ padding-top: 40px; text-align: center;}
	.linklist li{ margin-bottom: 20px;}
	.linklist li:last-child{ margin-bottom: 0;}
	.invIN h3{ font-size: 2.0em;}
	.innovation li{ padding: 10px;}

	.imgcontent{ display: block; padding: 20px;}
	.tetin{ margin-left: 0; width:100%;}
	.inovimg {
        margin: 0 auto;
    }
	a.invBtn {
    max-width: 236px;
		margin: 0 auto;
	}

	.cpbannerslide .slideIn {
    padding: 0 15px;
}
	.newsList{ margin-bottom: 40px;}
	.newsList li a {
		display: block;}
	.newsdate dd {
    font-size: 2.0rem;
		font-weight: 600;
}
	.newsdate dl{ display: flex;
        align-items: center;}
	.newsdate dt{ margin-right: 20px;}
	.newsListTit {
    display: block;
    padding-left: 0;
}
	.newsList li{ position: relative;}
	.newsListTit .newsCtg {
    width: auto;
    display: block;
    place-items: center;
    position: absolute;
    left: 0;
    top: 61px;
}
	.newsListTit h3 {
    width:100% ;
    padding-top: 50px;
		padding-left: 0;
		line-height: 1.5;
		padding-right:  40px;;

}
.rinkBtns {
        padding: 0;
        width: 24px;
        box-sizing: border-box;
        display: inline-block;
        position: absolute;
        top: 54%;
	right: 0;}
	.newsCtg span.newCtg{ margin-right: 10px;}



	.recipesList {
    display: block;
    justify-content: space-around;
    gap: 28px;
    margin-bottom: 40px;
    width: 100%;
}
	.recipesList li{ width: 100%; margin-bottom: 24px;}
	.recipesList li img{ max-width: inherit; width: 100%;}
	.categoryList {
    display: block;
    margin-bottom: 40px;
}
	.categoryList li {
    box-sizing: border-box;
    width: 100%;
        border: 1px solid #E60012;
    color: #E60012;
    border-radius: 24px;
		margin-bottom: 24px;
		padding: 60px 20px 30px 20px;
}
	.categorylistIn dd{color: #E60012;}
	.ctgens{color: #E60012;}
	.ctgens{ top: 20px;}

	.brandList {
    display: block;
    margin-bottom: 40px;
}
	.brandList li {
    width: 100%;
		margin-bottom: 24px;
}
	.onlineList {
    display: block;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 40px;
}
	.onlineList li{ width: 100%; margin-bottom: 10px;}
	.learningListIn {
    width: 100%;
    height: 330px;
    position: relative;
}
	.learningListTit{ padding-top: 120px;}
	.learningListIn img.cover{ height: 330px;}
	.learningListIn .logoimag{ padding: 0 40px; box-sizing: border-box; padding-top: 120px;}
	.movieList li {
    width: 100%;
}
	.movieList{ margin-bottom: 40px;}
	.cstsvList{ display: block;}
	.cstsvList li{ width: 100%; margin-bottom: 30px;}

	.invslideW{ margin-top: 60px;}
	.bannerft{ display: block}
	.is-new .newsCtg::before{ width: 70px;}
	.newsCtg span{ width: 115px; margin-left: 10px;}

}

.home section P,.home section li{  
	opacity: 0;
    transform: translate(0, 30px);
 transition: all .4s ;}

.on-active {
    opacity: 1 !important;
    transform: none !important;
    transition: all .4s ;
}

.cpbannerslide a:hover img{ box-shadow: 10px 10px 0px 0px rgba(230, 0, 18, 1); position: relative;
	transform: translate(-5px, -5px) !important;}
.iinv02 #int02 .intconIn .ivImg:before{left: -37px;}
@media screen and (max-width:980px) {

	.invTit {
    text-align: center;
    position: relative;
    top: -40px;
    width: 100%;
    text-align: center;
		margin-bottom: 0;
}
	.innovation h2 { padding-top: 0; margin-top: -20px;}
	    .invslideW {
        margin-top: 0px;
    }
	.onlineList img {
    border-radius: 0;
}
	.youtubeCon img {
    border-radius: 0;
}
	.inoveTut{ font-size: 2.0rem;}
	.iinv02 #int02 .intconIn .ivImg:before{ right: -25px;}
}

.learningList li:hover img{ opacity: 0.6 !important}
.learningListIn .btn:hover{ color: #fff; background: #E60012}
.learningList li:hover .btn{ color: #fff; background: #E60012}

.playBtn{ opacity: 1 !important; position: absolute; top: 0; left: 0}
 .stopBtn{ opacity: 0 !important; position: absolute; top: 0; left: 0}

.current .playBtn{ opacity: 0 !important;}
.current .stopBtn{ opacity: 1 !important;}

@media screen and (min-width:981px) {
.text-box h1{ font-size: 7vh}

}


.businessList .lineupList .img + .img {
  display: none;
}


@media screen and (max-width:980px) {
	.newsdate{ border-right: none;}
	
	    .rinkBtns {
        padding: 0;
        width: 24px;
        box-sizing: border-box;
        display: inline-block;
        position: absolute;
        top: auto;
        right: 0;
        bottom: 20%;
    }
	.home .invTit{ top: -30px;}
}


@media screen and (min-width:981px) and ( max-width:1400px) {
    /*　movie調整　*/
	
	.video-box {
    position: relative;
    overflow: auto;
    width: 100%;
    height: auto;
}
	
	.video {
    position: absolute;
    top: 0;
    left: 0;
    min-width: inherit;
    min-height: inherit;
    -webkit-transform: translate(0);
    -moz-transform: translate(０);
    transform: translate(0);
		
		    width: 100%;
    height: auto;
}
	
	.video-box {
    position: relative;
    overflow: auto;
    width: 100%;
    height: auto;
		aspect-ratio: 16 / 9;
}
	
	.text-box h1 {

    font-size: 4rem;
}
}

@media screen and (max-width: 980px) {
    .video-box {
        height: auto;
 aspect-ratio: 12 / 15.488;
    }
	
	.video {
    position: relative;
    top: 0;
    left: 0;
		min-height: inherit;
		height: auto;
    
    -webkit-transform: translate( 0, 0);
    -moz-transform: translate(0, 0);
    transform: translate(0, 0);
		 aspect-ratio: 12 / 15.488;
		width: 100%;
		
}
}