@charset "UTF-8";
/* CSS Document */
html{
 scroll-padding-top: 20px;
}
*{
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
.main_area .txt_center{
 text-align: center;
}
.main_area sup {
 font-size: 68%;
}
.main_area sup {
 top: -0.75em;
}
.sp_i{
 display: none;
}
.pc_i{
 display: inline-block;
}
.sp_b{
 display: none;
}
.pc_b{
 display: block;
}
.main_area{
 overflow: hidden;
 width: 100%;
 position: relative;
 background: #fff;
 margin: auto;
 max-width: 1920px;
}
.main_area h2,
.main_area h3{
 font-feature-settings: "palt";
}
.main_area li,
.main_area p{
 font-size: 16px;
 line-height: 1.5;
}
.main_area svg,
.main_area img{
	border: 0;
	vertical-align: top;
	outline: none;
	max-width: 100%;
	height: auto;
 display: inline-block;
}
.main_area svg {
 overflow-x: visible;
 overflow-y: visible;
}
.main_area img{
 width: auto;
 height: auto;
 max-width: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;

	vertical-align: top;

	-moz-user-select: none; 
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-user-drag: none; 
	user-drag: none;
}
.main_area {
 color: #4e4d4e;
 font-family: 'Neue-Helvetica-Paneuropean-Light','FP-HiraginoUDSansStdN-W3','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', sans-serif;
}
/* font */
.main_area .bioios_link_ico{
 display: inline-block;
 font-family: 'icomoon';
 font-size: 1.2em;
 font-style: normal;
 font-weight: normal;
 text-transform: none;
 color: #00806d;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 vertical-align: middle;
 margin-right: 15px;
}
.main_area .bioios_link_ico::before{
 content: "\e006";
}
.main_area h1,
.main_area .txt_green,
.main_area .pop_area_inner .tit_assignment,
.main_area .pop_main_txt_item h3,
.main_area .tit_pop_img_caption,
.main_area .sec_logo h2,
.main_area .sec_use h2,
.main_area .sec_use_item h3,
.main_area .pop_main_txt_item h4,
.main_area .main_header,
.main_area .btn_jump,
.main_area .tit_about{
 font-family: 'Neue-Helvetica-Paneuropean-Bold','FP-HiraginoUDSansStdN-W6','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', sans-serif;
}
.main_area .pop_area_inner h2 small,
.main_area .tit_whats_top small{
 font-family: 'Neue-Helvetica-Paneuropean-Bold','FP-HiraginoUDSansStdN-W6','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', sans-serif;
}
@media screen and (max-width: 1023px) {
 .main_area .main_header{
 font-family: 'Neue-Helvetica-Paneuropean','FP-HiraginoUDSansStdN-W5','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', sans-serif;
 }
}
/* main_header */
.main_area .main_header{
 padding: 10px 0;
 font-feature-settings: "palt";
 margin-bottom: 50px;
}
.main_area .main_header .inner{
 max-width: 1220px;
 display: flex;
 justify-content:space-between;
 align-items: center;
}
.main_area .main_header .header_logo{
 width: 10%;
}
.main_area .main_header .header_logo img{
 width: 75px;
}
.main_area .main_header ul{
 list-style: none;
 display: flex;
 align-items: center;
 width:90%;
}
.main_area .main_header li{
 font-size: 14px;
 line-height: 1;
 border-left: 1px solid #d5d5cd;
}
.main_area .main_header li:last-child{
 border-right: 1px solid #d5d5cd;
 
}
.main_area .main_header a{
 color: #4e4d4e;
 display: block;
 padding:  0.5em 2em;
 width: 100%;
 text-align: center;
 text-decoration: none;
}
.main_area .main_header .header_logo a{
 display: inline-block;
 padding: 0;
}
.main_area .main_header a:hover,
.main_area .main_header a:focus{
 color: #00806d;
}
/* main visual */
.main_area .main_image{
 position: relative;
 overflow: hidden;
 aspect-ratio: 16 / 9;
 width: 100%;
 margin-bottom: 0;
}
.main_area .main_image .bio_ios_logo{
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 width: 100%;
 display: flex;
 justify-content:center;
 align-content: center;
}
.main_area .main_image .bio_ios_logo img{
 display: block;
 width: 100%;
 height: 100%;
 object-fit: contain;
 opacity: 0;
 transition: 1.5s;
}
.loadComp .main_area .main_image .bio_ios_logo img{
 opacity: 1;
}
.main_area .main_image ul,
.main_area .main_image li{
 position: absolute;
 height: 100%;
 width: 100%;
 top: 0;
 left: 0;
}
.main_area .main_image li{
 background: #fff no-repeat center center;
 background-size: cover;
 opacity: 0;
 transition: 1s opacity;

}
.main_area .main_image li.now{
 opacity: 1;
}
.main_area .main_image .i1{ background-image: url("//kao-h.assetsadobe3.com/is/image/content/dam/sites/kao/www-kao-com/jp/ja/innovation/research-development/bioios/25Bioios_Lg_Kv_1.png?fmt=png-alpha&fit=constrain,0&wid=1920")}
.main_area .main_image .i2{ background-image: url("//kao-h.assetsadobe3.com/is/image/content/dam/sites/kao/www-kao-com/jp/ja/innovation/research-development/bioios/25Bioios_Lg_Kv_2.png?fmt=png-alpha&fit=constrain,0&wid=1920")}
.main_area .main_image .i3{ background-image: url("//kao-h.assetsadobe3.com/is/image/content/dam/sites/kao/www-kao-com/jp/ja/innovation/research-development/bioios/25Bioios_Lg_Kv_3_01.png?fmt=png-alpha&fit=constrain,0&wid=1920")}


/* ==== pop ==== */
.main_area .ov{
 position: fixed;
 display: none;
 top: 0;
 bottom: 0;
 left: 0;
 width: 100%;
 z-index: 990;
 background: rgba(0,0,0,0.8);
}
.main_area .pop_area{
 display: none;
 position: fixed;
 top: 5vh;
 bottom: 5vh;
 left: 50%;
 width: 100%;
 max-width: 1020px;
 margin-left: -510px;
 z-index: 1000;
 background: #fff;
 border: 1px solid #00806d;
 border-radius: 20px;
 overflow: hidden;
 padding: 80px 0 40px 0;
}
.main_area #pop_assignment p{
 margin: 1em 0;
 line-height: 2;
}
.main_area .pop_area_inner{
 padding: 0 5%;
 overflow: auto;
 height: 100%;
 scrollbar-color: #00806d #fff;
 scrollbar-width: auto;
 overscroll-behavior-y: none;
 position: relative;
}
.main_area .pop_area_inner::-webkit-scrollbar {
 width: 10px;
}
.main_area .pop_area_inner::-webkit-scrollbar-track-piece {
 background-color: #fff; /* Safari スクロールバーの背景色 */
}
.main_area .pop_area_inner::-webkit-scrollbar-thumb {
 background-color: #00806d;
 border: 2px solid #fff;
 border-radius: 0;
 background-clip: content-box;
}
.main_area .btn_close{
 display: block;
	background-color: transparent;
	border: 0;
	cursor: pointer;
	padding: 0;
	appearance: none;
 width: 35px;
 top: 20px;
 right: 20px;
 z-index: 1;
 position: absolute;
}
/* ==== pop_inner ==== */
.main_area .grp{
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
 position: relative;
}
.main_area .pop_main_pic_1{
 width: 55%;
}
.main_area .pop_main_txt_1{
 width: 40%;
}
.main_area .tit_whats_top,
.main_area .pop_area_inner h2{
 color:#00806d;
 margin-bottom: 0.25em;
 line-height: 1;
 font-size: 72px;
}
.main_area .pop_area_inner .tit_assignment{
 color:#4e4d4e;
 margin-bottom: 2em;
 line-height: 1;
 font-size: 35px;
 padding-top: 10px;
}
.main_area .tit_whats_top small,
.main_area .pop_area_inner h2 small{
 font-size: 30px;
}
.main_area .tit_whats_top{
 margin-bottom: 0.5em;
}
.main_area .tit_whats_top small{
 display: block;
 margin-top: 0;
}
.main_area .tit_whats_top+p{
 margin-bottom: 2em;
}
.main_area .pop_read_txt{
 line-height: 2;
 margin: 2em 0;
}
.main_area .pop_main_txt_item h3{
 line-height: 1.5;
 font-size: 20px;
 margin-bottom: 0.25em;
}
.main_area .pop_main_txt_item h4{
 line-height: 1;
 font-size: 60px;
 margin-bottom: 0;
}
.main_area .pop_main_txt_item h4 small{
 font-size: 32px;
}
.main_area .pop_main_txt_item{
 display: flex;
 justify-content: space-between;
 margin-bottom: 10%;
}
.main_area .pop_main_txt_item i{
 display: block;
 text-align: center;
 width: 38%;
}
.main_area .pop_main_txt_item div{
 width: 55%;
}
.main_area .pop_main_image{
}
.main_area .pop_main_read{
 margin: 40px 0;
}

.main_area .pop2_caption{
 display: block;
 margin: auto;
 width: 70%;
}
.main_area .pop2_caption picture{
 display: block;
}
.main_area .pop2_caption picture+picture{
 margin-top: 60px;
}
.main_area .pop2_caption img{
 display: block;
 margin-bottom: 20px;
}
.main_area .tit_pop_img_caption{
 text-align: center;
 font-size: 24px;
 line-height: 1;
 margin: 2em 0 1em 0;
}
.main_area .txt_cap_1{
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
 margin: -10px 0 2em 0;
 position: relative;
}
.main_area .txt_cap_1 span{
 text-align: center;
 width:35%;
}
.main_area .txt_green{
 color: #00806d;
}
/* ==== LP ==== */
.main_area{
 position: relative;
}
.main_area::before{
 position: absolute;
 top: 0;
 bottom: 0;
 left: 50%;
 width: 2px;
 background: #000;
 display: block;
 content: normal;
}
.main_area .inner{
 max-width: 1140px;
 width: 100%;
 padding: 0 10px;
 margin: auto;
}
.main_area .btn_assignment{

}


.main_area .grp_top_1 .txt,
.main_area .grp_top_1 .pic,
.main_area .grp_top_2 .txt,
.main_area .grp_top_2 .pic,
.main_area .grp_top_3 .txt,
.main_area .grp_top_3 .pic{
 width: 49%;
 position: relative;
 display: block;
}
.main_area .grp_top_1 .pic{
 order: 2;
 position: relative;
 overflow: hidden;
}
.main_area .grp_top_1 .pic_1{
 display: block;
 width: 90%;
 margin-left: auto;
}
.main_area .grp_top_1 .pic_2{
 width: 90%;
 display: block;
 position: absolute;
 top: 0;
 right: 0;
}
.main_area .grp_top_2{
 align-items: center;
}
.main_area .grp_top_1 p,
.main_area .grp_top_2 p,
.main_area .grp_top_3 p{
 font-size: 16px;
 line-height: 2;
}
.main_area .grp_top_1 .txt{
 order: 1;
 padding-left: 0;
 padding: 10% 0 0  5%;
}
.main_area #whats,
.main_area #about{
 padding-top: 25px;
}
.main_area h1.inner{
 font-size: 46px;
 line-height: 1.2;
 margin-bottom: 1em;
}
.main_area .tit_about{
 position:relative;
 width: 100%;
 font-size: 46px;
 line-height: 1;
 margin: 0 0 -5% 0;
}
.main_area .sec_whats .tit_about{
 margin-bottom: 3em;
}
.main_area .tit_about small{
 display: block;
 margin-bottom: 1em;
 font-size:  26px;
}
.main_area .grp_top_2{
 margin-bottom: 0%;
 z-index: 2;
}
.main_area .grp_top_2 .pic{
 transform: scale(1.14) translateX(-5%);
 transform-origin: right center;
}
 .main_area .grp_top_3 .glass{
  display: block;
 }
 .main_area .grp_top_2 .glass{
  display: none;
 }
.main_area .grp_top_3 .glass img{
 display: block;
 position: absolute;
 bottom: 0;
 width: 32%;
}
.main_area .grp_top_3 .glass img{ top: -55%; left: -22%}
.main_area .grp_top_3 .glass img+img{ top: -12%; left: 3%}
.main_area .grp_top_2 .txt{
 padding: 0;
}
.main_area .grp_top_2 .txt p{
 width: 58%;
 margin-left: auto;
}
.main_area .grp_top_3{
 z-index: 2;
}
.main_area .grp_top_3 .txt{
 padding: 8% 0 0 0;
 order: 1;
}
.main_area .grp_top_3 .pic{
 order: 2;
 transform: scale(1.14) translateX(2%);
 transform-origin: left center;
}
.main_area .grp_top_3 p{
 margin-left: 5%;
 margin-bottom: 2em;
}
.main_area .grp_top_3 p+p{
 margin-left: 20%;
 margin-bottom: 0;
}
.main_area .change{
 text-align: center;
 margin: 50px 0 0 0;
}
.main_area .sec_about .change{
 margin: 10% 0;
}
.main_area .btn_jump{
 display: inline-block;
 line-height: 1;
 width: 100%;
 max-width: 710px;
 border: 1px #00806d solid;
 padding: 16px 10px;
 text-align: center;
 border-radius: 10px;
 text-decoration: none;
 color: #4e4d4e;
 font-weight: bold;
}
.main_area .btn_jump .bioios_link_ico{
  position: relative;
  top: 0;
}
.main_area .btn_jump::first-letter{
 color: #00806d;
}
.main_area .sec_whats .pic{
 width: 50%;
 overflow: hidden;
 display: block;
}
.main_area .sec_whats .txt_box{
 width: 25.5%;
 position: relative;
 z-index: 2;
}
.main_area .sec_whats_item{
 align-items: center;
 margin: 10% 0 15% 0;
}
.main_area .sec_whats_item_1 .pic,
.main_area .sec_whats_item_3 .pic{
 order: 1;
 transform-origin: right center;
}
.main_area .sec_whats_item_1 .pic{ transform: scale(1.25) translateX(5%);}
.main_area .sec_whats_item_3 .pic{ transform: scale(1.25) translateX(20%);}
.main_area .sec_whats_item_1 .txt_box,
.main_area .sec_whats_item_3 .txt_box{
 order: 2;
 margin-right: auto;
}
.main_area .sec_whats_item_1 .txt_box{ margin-left: 10%;}
.main_area .sec_whats_item_3 .txt_box{ margin-left: 20%;}
.main_area .sec_whats_item_2 .pic,
.main_area .sec_whats_item_4 .pic{
 order: 2;
 transform-origin: left center;
}
.main_area .sec_whats_item_2 .pic{ transform: scale(1.25) translateX(-20%);}
.main_area .sec_whats_item_4 .pic{ transform: scale(1.25) translateX(-5%);}
.main_area .sec_whats_item_2 .txt_box,
.main_area .sec_whats_item_4 .txt_box{
 order: 1;
 margin-left: auto;
}
.main_area .sec_whats_item_2 .txt_box{ margin-right: 20%;}
.main_area .sec_whats_item_4 .txt_box{ margin-right: 10%;}
.main_area .sec_whats_item h3{
 position: relative;
}
.main_area .sec_whats_item h3::before{
 position: absolute;
 display: block;
 content: "";
 top: 0.4em;
 width: 25vw;
 border-bottom: 1px solid #00806d;
}

.main_area .sec_whats_item_1 h3::before,
.main_area .sec_whats_item_3 h3::before{
 left: -26vw;
}
.main_area .sec_whats_item_2 h3::before,
.main_area .sec_whats_item_4 h3::before{
 left: 1.25em;
}

.main_area .btn_assignment::first-letter{
 color: #00806d;
}
.main_area .btn_close_link{
 display: inline-flex;
 justify-content: center;
 align-items: center;
 line-height: 1;
 background: #00806d;
 color: #fff;
 padding:  10px;
 max-width: 205px;
 width: 100%;
 border-radius: 20px;
 font-size: 20px;
 text-decoration: none;
 
}
.main_area .btn_close_link span{
 position: relative;
 top: 3px;
}
.main_area .btn_close_link img{
 display: inline-block;
 vertical-align: middle;
 width: 18px;
 margin-right: 15px;
}
.main_area .sec_use{
 background: #00806d;
 color: #fff;
 padding: 80px 0;
}
.main_area .sec_use .grp{
 margin: auto;
 max-width: 765px;
 width: 100%;
}
.main_area .sec_use_item{
 width: 30%;
}
.main_area .sec_use_item img{
 display: block;
 width: 100%;
 margin-bottom: 25px;
}
.main_area .sec_use_item h3{
 text-align: center;
 margin: 0 0 1em 0;
 font-size: 20px;
 line-height: 1;
}
.main_area .sec_use_item p{
 text-align: center;
 margin: 0;
}
.main_area .sec_use h2{
 margin: 0 0 1.25em 0;
 font-size: 36px;
 line-height: 1; 
}
.main_area .sec_logo{
 padding: 70px 0;
}
.main_area .sec_logo .txt_box{
 width: 50%;
}
.main_area .sec_logo .pic{
 width: 50%;
}
.main_area .sec_logo .pic img{
 width: 70%;
 max-width: 356px;
}
.main_area .sec_logo .grp{
 align-items: center;
 justify-content: flex-start;
}
.main_area .sec_logo h2{
 line-height: 1.25;
 font-size: 36px;
 margin-bottom: 1.25em;
}
.main_area .sec_logo p{
 line-height: 1.75;
}
.main_area .sec_logo p+p{
 margin-top: 2em;
}
.main_area #flogo{
 visibility: visible;
}
.main_area #flogo.on{
 visibility: visible;
}
.main_area .btn_sp_menu{
 display: none;
}
/* main_header SMP */
@media screen and (max-width: 1135px) and  (min-width: 960px){
 .main_area .main_header .header_logo{
  width: 8%;
 }
 .main_area .main_header .header_logo img{
  width: 60px;
 }
 .main_area .main_header ul{
  width: 92%;
 }
 .main_area .main_header li{
  font-size: 12px;
 }
}
@media screen and (max-width: 959px) {
 .sp_i{
  display: inline-block;
 }
 .pc_i{
  display: none;
 }
 .sp_b{
  display: block;
 }
 .pc_b{
  display: none;
 }

 .main_area .pop_area{
  top: 110px;
 }
 html{
  scroll-padding-top: 90px;
 }
 .main_area{
  padding-top: 0;
 }
 .main_area .btn_sp_menu{
  display: inline-block;
  background: #00806d;
  border: 0;
  cursor: pointer;
  border-radius: 5px;
  color: #fff;
  padding: 15px 22px; 
  appearance: none;
  line-height: 1;
 }
 .main_area .btn_sp_menu i{
  display: inline-block;
   font-style: normal;
  transform: rotate(90deg);
  margin: 0;
  position: relative;
  top: -2px;
 }
 .main_area .btn_sp_menu .bioios_link_ico{
  color: #fff;
  margin: 0;
 }
 .main_area .main_header{
  padding: 10px 0;
  background: #fff;
  z-index: 10;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  display: none;
 }
 .scrOn .main_area .main_header{
  position: fixed;
 }
 .main_area .main_header .inner{
  flex-wrap: wrap;
 }
 .main_area .main_header .header_logo{
  width: 50%;
  padding-bottom: 0;
 }
 .main_area .main_header .header_logo img{
  width: 75px;
 }
 .main_area .main_header ul{
  display: block;
  position: relative;
  margin: 0 -10px;
  width: calc(100% + 20px);
  overflow: hidden;
  max-height: 0;
  transition: 0.25s;
  interpolate-size: allow-keywords;
 }
 .main_area .main_header li{
  font-size: 14px;
  line-height: 1;
  border: none;
  border-bottom: 1px solid #00806d;
 }
 .main_area .main_header li:last-child{
  border: none;
 }
 .main_area .main_header a{
  display: block;
  padding: 20px 10px;
  width: 100%;
  text-align: left;
  text-decoration: none;
  position: relative;
 }
 .main_area .main_header .header_logo a{
  display: inline;
  padding: 0;
 }
 .menuOn .main_area .main_header ul{
  border-top: 1px solid #00806d;
  margin-top: 10px;
  max-height: 500px;
 }
 .menuOn .main_area .btn_sp_menu i{
  transform: rotate(270deg);
  top: 0;
 }
}

/* ==== LP SMP ==== */
@media screen and (max-width: 1023px) {
 .main_area .txt_center{
  text-align: left;
 }
 .main_area .inner{
  padding:  0 20px;
 }
 .main_area .sec_about{
  max-width: 640px;
 }
 .main_area .main_image{
  /*height: 500px;*/
  aspect-ratio: 3 / 4;
  margin-bottom: 50px;
 }

 .main_area .main_image .i1{ background-image: url("//kao-h.assetsadobe3.com/is/image/content/dam/sites/kao/www-kao-com/jp/ja/innovation/research-development/bioios/25Bioios_Sm_Kv_1.png?fmt=png-alpha&fit=constrain,0&wid=1500")}
 .main_area .main_image .i2{ background-image: url("//kao-h.assetsadobe3.com/is/image/content/dam/sites/kao/www-kao-com/jp/ja/innovation/research-development/bioios/25Bioios_Sm_Kv_2_01.png?fmt=png-alpha&fit=constrain,0&wid=750")}
 .main_area .main_image .i3{ background-image: url("//kao-h.assetsadobe3.com/is/image/content/dam/sites/kao/www-kao-com/jp/ja/innovation/research-development/bioios/25Bioios_Sm_Kv_3.png?fmt=png-alpha&fit=constrain,0&wid=1500")}

 .main_area .grp{
  display: block;
 }
 .main_area .sec_about .change{
  margin: 10% 0 20% 0;
 }
 .main_area .grp_top_1 .txt,
 .main_area .grp_top_1 .pic,
 .main_area .grp_top_2 .txt,
 .main_area .grp_top_2 .pic,
 .main_area .grp_top_3 .txt,
 .main_area .grp_top_3 .pic{
  width: 100%;
 }
 .main_area .grp_top_1 .pic{
 }
 .main_area .grp_top_1 .pic_1{
  width: 100%;
 }
 .main_area .grp_top_1 .pic_2{
  width:100%;
 }
 .main_area .grp_top_1 p,
 .main_area .grp_top_2 p,
 .main_area .grp_top_3 p{
  font-size: 16px;
  line-height: 1.75;
 }
 .main_area .grp_top_1 .txt{
  padding: 8% 0 8% 10%;
 }
 .main_area h1.inner{
  font-size: 21px;
 }
 .main_area .tit_about{
  font-size: 28px;
  margin: 0 0 1em 0;
  line-height: 1.5;
 }
 .main_area .tit_about small{
  display: block;
  margin-bottom: 0.5em;
  font-size:  20px;
 }
 .main_area .grp_top_2{
 }
 .main_area .grp_top_2 .pic{
  transform: none;
 }
 .main_area .grp_top_2 .pic img{
  width: 80%;
 }
 .main_area .grp_top_3 .glass img{
  display: block;
  position: absolute;
  bottom: 0;
  width: 30%;
 }
 .main_area .grp_top_3 .glass{
  display: none;
 }
 .main_area .grp_top_2 .glass{
  display: block;
 }
 .main_area .grp_top_2 .glass img{
  display: block;
  position: absolute;
  bottom: 0;
  width: 32%;
 }
 .main_area .grp_top_2 .glass img{ bottom: -20%; right: 21%}
 .main_area .grp_top_2 .glass img+img{ bottom: -53%;right: -7%;}

 .main_area .grp_top_2 .txt{
  padding: 0;
 }
 .main_area .grp_top_2 .txt p{
  width: 100%;
  margin-left: auto;
  padding: 8% 0;
 }
 .main_area .grp_top_3 .txt{
  padding: 8% 0;
 }
 .main_area .grp_top_3 .pic{
  transform: none;
  padding-left: 5%;
 }
 .main_area .grp_top_3 p{
  margin-left: 5%;
  margin-bottom: 2em;
 }
 .main_area .grp_top_3 p+p{
  margin-left: 10%;
  margin-bottom: 0;
 }

 .main_area .sec_whats_item_1 .pic,
 .main_area .sec_whats_item_2 .pic,
 .main_area .sec_whats_item_3 .pic,
 .main_area .sec_whats_item_4 .pic{
  display: block;
  transform: none;
  width: calc(100% + 40px);
  position: relative;
  margin-left: -20px;
  margin-right: -20px;
 }
 .main_area .sec_whats .txt_box{
  width: auto;
 }
 .main_area .sec_whats .tit_about{
  margin-bottom: 0.5em;
 }
 .main_area .sec_whats_item_1 .txt_box,
 .main_area .sec_whats_item_2 .txt_box,
 .main_area .sec_whats_item_3 .txt_box,
 .main_area .sec_whats_item_4 .txt_box{
  margin: 20px 0 0 0;
 }
 .main_area .sec_whats_item{
  margin: 0 0 20% 0;
 }
 .main_area .tit_whats_top small{
  display: inline-block;
  margin-top: 0;
 }
 .main_area .sec_whats_item_1 h3::before,
 .main_area .sec_whats_item_3 h3::before,
 .main_area .sec_whats_item_2 h3::before,
 .main_area .sec_whats_item_4 h3::before{
  left: 0;
  right: auto;
  top: auto;
  bottom: 0;
  border-bottom: 0;
  border-left: 1px solid #00806d;
  width: auto;
  height: 150px;
 }
 .main_area .sec_use{
  padding: 45px 0;
 }
 .main_area .sec_use .grp{
  margin: auto;
  max-width: 240px;
  width: 70%;
  display: block;
 }
 .main_area .sec_use_item{
  width: 100%;
 }
 .main_area .sec_use_item+.sec_use_item{
  margin-top: 40px;
 }
 .main_area .sec_use_item img{
  display: block;
  width: 100%;
  margin-bottom: 20px;
 }
 .main_area .sec_use_item h3{
  font-size: 18px;
 }
 .main_area .sec_use_item p{
  margin: 0;
 }
 .main_area .sec_use h2{
  margin: 0 0 1.25em 0;
  font-size: 28px;
 }
 .main_area .sec_logo{
  padding: 50px 0;
 }
 .main_area .sec_logo .txt_box{
  width: auto;
  margin-bottom: 20px;
 }
 .main_area .sec_logo .pic{
  width: auto;
  text-align: center;
  display: block;
 }
 .main_area .sec_logo .pic img{
  width: 75%;
  margin: auto;
  display: inline-block;
 }
 .main_area .sec_logo h2{
  font-size: 28px;
 }
 .main_area .sec_logo p{
  line-height: 1.75;
  padding: 0;
 }
 .main_area .sec_logo p+p{
  margin-top: 1em;
 }

 .main_area .tit_whats_top{
  padding-left: 10px;
 }
 .main_area .tit_whats_top,
 .main_area .pop_area_inner h2{
  font-size: 56px;
 }
 .main_area .tit_whats_top small,
 .main_area .pop_area_inner h2 small{
  font-size: 24px;
 }
 .main_area .pop_read_txt{
  line-height: 1.75
 }
 .main_area .pop_main_pic_1,
 .main_area .pop_main_txt_1{
  width: auto;
 }
 .main_area .pop_main_pic_1{
  margin-bottom: 40px;
 }
 .main_area .pop_main_txt_item i {
  width: 40%;
 }
 .main_area .pop_main_txt_item i {
  width: 40%;
 }
 .main_area .pop_main_txt_item h3{
  font-size: 18px;
 }
 .main_area .pop_main_txt_item h4{
  font-size: 56px;
 }
 .main_area .pop_main_txt_item h4 small{
  font-size: 30px;
 }
 .main_area .btn_close_link{
  padding:  10px;
  max-width: 125px;
  border-radius: 20px;
  font-size: 16px;
 }
 .main_area .btn_close_link img{
  width: 15px;
  margin-right: 10px;
 }
 .main_area .pop_main_txt_item{
  margin-bottom: 20%;
 }
 .main_area .pop2_caption{
  width: auto
 }
 .main_area .pop2_caption picture+picture {
     margin-top: 30px;
 }
 .main_area .txt_cap_1{
  justify-content: space-between;
 }
 .main_area .txt_cap_1 span{
  width:50%;
 }
 .main_area .tit_pop_img_caption{
  font-size: 18px;
  line-height: 1.5;
 }
 .main_area .pop_area_inner .tit_assignment{
  font-size: 28px;
  line-height: 1.75;
  margin-bottom: 1em;
 }
}
@media screen and (max-width: 960px) and  (min-width: 481px){
 .main_area .pop_area{
  width: 489px;
  margin-left: -240px;
 }
}
@media screen and (max-width: 480px) {
 .main_area .pop_area{
  width: 320px;
  margin-left: -160px;
 }
}

/*Anime*/
.aniElm{}
.aniElmOn{}
.aniWhats,
.aniAbout{
 transition: 1s opacity,1s transform,1s color;
}
h1.inner{
 opacity: 0;
 transition: 1s opacity,1s transform;
}
.tit_about{
 opacity: 0;
 transition: 1s opacity,1s transform;
}
.aniAbout{
 opacity: 0;
}
.aniElmOn.aniElmOn{
 opacity: 1; 
}
.aniElmOn .aniAbout{
 opacity: 1; 
}
.aniAbout_3,
.aniAbout_6,
.aniAbout_10{
 transform: translateY(20%);
}
.aniElmOn .aniAbout_3,
.aniElmOn .aniAbout_6,
.aniElmOn .aniAbout_10{
 transform: translateY(0);
}
.aniAbout_2{ transition-delay: 0.5s }
.aniAbout_3{ transition-delay: 1s }
.aniAbout_4{ transition-delay: 1.5s; transform: translateX(0%) }
.aniElmOn .aniAbout_4{ transform: translateX(0%) }
.aniAbout_5{ transition-delay: 0.5s }
.aniAbout_6{ transition-delay: 1s }
.aniAbout_7{ transition-delay: 1.5s; transform: scale(0.75);}
.aniAbout_8{ transition-delay: 1.75s; transform: scale(0.75);}
.aniElmOn .aniAbout_7,
.aniElmOn .aniAbout_8{ transform: scale(1) }
.aniAbout_9{ transition-delay: 0.5s }
.aniAbout_10{ transition-delay: 1s }

.aniWhats1{opacity: 0;transform: scale(1.1);}
.aniWhats2{transition-delay: 1s; color: rgba(0,128,109,0) !important}
.aniWhats2::before{transform: scale(0,1);transition: 0.5s 0.5s; transform-origin: left top;}
.sec_whats_item_2 .aniWhats2::before,
.sec_whats_item_4 .aniWhats2::before{transform-origin: right top;}
.aniWhats3{ opacity: 0; transition-delay: 1.5s;}

.aniElmOn .aniWhats1{transform: scale(1); opacity: 1;}
.aniElmOn .aniWhats2{color:#00806d !important;}
.aniElmOn .aniWhats3{opacity: 1;}
.aniElmOn .aniWhats2::before{transform: scale(1,1);}

.sec_use h2{
 transition: 1s opacity;
 opacity: 0;
}
.sec_use_item{
 transition: 1s opacity;
 opacity: 0;
}
.aniElmOn .sec_use_item{ opacity: 1}
.sec_use_item:nth-of-type(1){ transition-delay: 0s}
.sec_use_item:nth-of-type(2){ transition-delay: 0.5s}
.sec_use_item:nth-of-type(3){ transition-delay: 0.75s}
.sec_use h2.aniElmOn{
 opacity: 1;
}

.sec_logo h2,
.sec_logo p{ opacity: 0; transition: 1s opacity;}
.sec_logo p{ transition-delay: 0.5s}
.sec_logo .aniElmOn h2,
.sec_logo .aniElmOn p{ opacity: 1;}
#flogo{ opacity: 0; transition: 1s 1.25s opacity}
.aniElmOn #flogo{ opacity: 1}

@media screen and (max-width: 1023px) {
 .aniAbout_2{ transition-delay: 1.5s }
 .aniAbout_3{ transition-delay: 0s }
 .aniAbout_4{ transition-delay: 0.5s; }
 
 .aniAbout_5{ transition-delay: 1s }
 .aniAbout_6{ transition-delay: 0s }
 .aniAbout_7{ transition-delay: 0.5s}
 .aniAbout_8{ transition-delay: 0.75s}

 .aniAbout_9{ transition-delay: 0.5s }
 .aniAbout_10{ transition-delay: 0s }

 .aniWhats2::before{transform: scale(1,0);transform-origin: left top;}
 .sec_whats_item_2 .aniWhats2::before,
 .sec_whats_item_4 .aniWhats2::before{transform-origin:left top;}

 .aniElmOn .aniWhats2::before{transform: scale(1,1);}

 .sec_use h2{
  transition: 1s opacity;
  opacity: 0;
 }
 .sec_use_item:nth-of-type(1),
 .sec_use_item:nth-of-type(2),
 .sec_use_item:nth-of-type(3){ transition-delay: 0s}
 .sec_logo h2,
 .sec_logo p{ opacity: 0;}
 .sec_logo p{ transition-delay: 0.5s}
 #flogo{ transition-delay: 0s;}
}