@charset "UTF-8";

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


body{ color: #003C80}

h2,h3{ font-weight: 500;}
/* video */
.aboutTxt{  padding-top: 48px;}

/* video */


/* 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 dt{ font-size: 3rem;
	margin-bottom: 20px;
}
.mainenread dd{ font-size: 6rem;  line-height: 1.2; margin-bottom: 20px;}
.mainenread p{ font-size: 3rem;}

.enmainlogo{ position: absolute; left: 64px; top: 64px; z-index: 10;}
.reads{ font-size: 4.4rem; font-weight: 600; position: absolute;right: 30px; top: 50px; bottom: auto; color: #fff;}

/* overlay */

.overlay::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background: rgba(0, 0, 0, 0.4);
}
.mainenread{  color: #fff; font-weight: 600;}

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

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

  main {
    display: block;
  }

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

    main {
      display: block;
    }


.invTit{ text-align: center;}
.invTit p{ padding-top: 10px;}
.innerW{ max-width: 1046px; margin: 0 auto;}

.bgclor{ background: #FFF2DC; margin-bottom: 0; padding-bottom: 96px;}
.blbg{ background: #003C80; margin-bottom: 0; padding-bottom: 96px; color: #fff; text-align: center;}
.listWrapp ul{ display: flex;}
.bgclor .brndbtn{ display: inline-block;}

.mtdTxt{ font-size: 7.2rem; margin-bottom: 60px;}
a.btn {
    font-size: 1.6rem;
    display: block;
    min-width: 248px;
    text-align: center;
    height: 60px;
    box-sizing: border-box;
    line-height: 2;
    border-radius: 64px;
    padding: 14px 13px;
    background: #003C80;
    transition: 0.4s;
}

a.btn:hover {
    color: #003C80;
    border-width: 1px;
    border-style: solid;
    border-color: #003C80;
    border-image: initial;
    background: #fff;
}

.blbg a.btn{
	color: #003C80;
    background: #fff;
}

.blbg a.btn:hover{
	color: #fff;
    background: #003C80;
	border: 1px solid #fff;;
}


.mtdTxts{ font-size: 4.8rem; font-weight: 500; text-align: center;}
.bgimgs{ margin-bottom: 0; padding-bottom: 96px; background: url("../img/crfbg.png") center top no-repeat; background-size: cover; color: #fff; text-align: center}

.bgimgsfer{ background: url("../img/crfbg2.png") center top no-repeat; background-size: cover; margin-bottom: 0; padding-bottom: 94px; color: #fff; }
.imgsimg{ text-align: center; padding-top: 48px; margin-bottom: 48px;}
.bgimgsfer .mtdTxts{ font-size: 7.2rem;}
.bgimgsfer p{ margin-bottom: 48px;}

.youtube h2{ font-size: 5.7rem; text-align: center; margin-bottom: 48px;}
.youtube ul{ display: flex; column-gap: 24px; margin-bottom: 48px;}

.youtube ul li {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube ul li  iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.footcon{ display: flex; text-align: center; width: 415px; margin: 0 auto; color: #000; font-size: 1}
    @media only screen and (min-width: 1190px) {
      .sp {
        display: none !important;
      }
		.mainenread{ position: absolute; left: 20px; bottom: 40px; color: #fff; font-weight: 500;}
    }
.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;}

.rdcon{ display: flex; column-gap:64px; justify-content: center; align-items: center;}
.rdimg{ width: 30%;}
.readTxt{ text-align: left;}

.misorec{justify-content:space-between; column-gap: 94px;}
.misorec .rdimg{ width: 70%;}

.redTxt{ font-size: 3.6rem; margin-bottom: 20px; line-height: 1;}
.readarea h2{ font-size:  9.6rem; line-height: 1;}

.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;}
.cpbannerslide a:hover img{ box-shadow: 10px 10px 0px 0px rgba(230, 0, 18, 1);}

.innovation{ background: #F7F7F7; margin-bottom: 0; padding-bottom: 94px;}
.inoveTut{ font-size: 2.8rem; text-align: center;}
.innovation h2{ margin-bottom: 20px;}
.innovation li{padding: 0 24px; box-sizing: border-box; padding-top: 10px} 
 .koujiInv:after {content: "01"; display: block; text-align: right; position: absolute; right: 10px; top: -14px; font-size: 2.6rem; font-weight: 700;  color:#E60012;}
.oikoujiInv:after {content: "02"; display: block; text-align: right; position: absolute; right: 10px; top: -14px; font-size: 2.6rem; font-weight: 700;  color:#E60012;}
.sokusekiInv:after {content: "03"; display: block; text-align: right; position: absolute; right: 10px; top: -14px; font-size: 2.6rem; font-weight: 700;  color:#E60012;}
/*.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: 40px; 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:#E60012; position: absolute; left: 0; top: -10px; letter-spacing: 0.2; font-weight: 600;}


.inovimg{ width: 100%;}
.invslideW{ max-width: 1600px; margin: 0 auto; margin-top: -40px; margin-bottom: 64px;}
.tetin{ padding: 10px 0; line-height: 1.5;}
/*.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;}
.newsdate dt{ font-size:1.6rem;}
.newsdate dd{ font-size:2.8rem;}

.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; }
.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;}
.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: 30%; }

.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: 500; 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 img{transition: all .4s;}
a:hover .brandylistIn img{ box-shadow: 10px 10px 0px 0px rgba(230, 0, 18, 1);}

.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;}

.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;}
.sp{ display: none;}

.hedNavcontnt .gnav{ margin-right: 0;}
.hedNavcontnt ul.gnav > li{ border-right: none;}

.listWrapp li{ height: 325px; position: relative; width: 33.3333%; overflow: hidden;}
.listWrapp li img{ object-fit: cover; position: absolute;  width: 100%; height: 100%;
	object-fit-position: center center;}

.footcon p{ font-size: 1.4rem;}
.secord h2{ font-size: 6.4rem;}
.secord .redTxt{ font-size: 2.8rem;}



@media screen and (max-width:980px) {
.pc{ display: none;}
.sp{ display: block;}
	.reads{ position: relative;}
	.text-box{ position: absolute; bottom: 20px; left: 20px;}
	.reads{right: auto; bottom: auto}
	.enmainlogo{ width: 85px; left: 24px; top: 24px;}
	.rdcon{ display: block;}
	.rdimg{ margin: 0 auto;  margin-bottom: 40px;}
	.redTxt {
    font-size: 2.0rem;
}
	.readarea h2 {
    font-size: 5.6rem;
	}
	.bgclor .brndbtn{ display: block;}
	.powserimg{ width: 50%;}
	.mtdTxt {
    font-size: 7.2rem;
		line-height: 1;
    margin-bottom: 40px;
}
	.mtdTxts{ font-size: 2.8rem; margin-bottom: 40px;}
	.bgimgsfer .mtdTxts {
    font-size: 3.6rem;
	}
	.bgclor,.blbg,.bgimgsfer{ padding-bottom: 40px;}
	.youtube ul{ display: block;}
	.youtube ul li{ margin-bottom: 24px;}
	.reads{ font-size: 2.0rem;}
	.mainenread dd {
    font-size: 4.8rem;
		line-height: 1;}
	.aboutTxt{ padding-top: 0;}
	
	    .reads {
        right: auto;
        bottom: auto;
        left: 20px;
        top: 30px;
        position: absolute;
			        font-size: 2.6rem;
    }
	

}




@media screen and (max-width: 980px) {
    .mainenread dt {
        font-size: 2rem;
    }

    .mainenread dd {
        font-size: 2.6rem;
        line-height: 1;
    }
	    .text-box {
        position: relative;
        bottom: auto;
        left: auto;
    }
	.mainenread dt {
    font-size: 3rem;
    margin-bottom: 10px;
}
}

.reads{
    opacity: 1 !important;
    transform: none !important;
   
}