@charset "UTF-8";
/*
Theme Name: AISIN enefarm
*/

/*-----------------------------------------
default
-----------------------------------------*/
*{ margin:0; padding:0; -webkit-font-smoothing: antialiased; }
@font-face{
	font-family:"Yu Gothic M";
	src:local("Yu Gothic Medium");
}
@font-face{
	font-family:"Yu Gothic M";
	src:local("Yu Gothic Bold");
	font-weight: bold;
}
html{
	/*-----------------------------------------
	ゴシック主体の場合
	-----------------------------------------*/
	font-family: "Noto Sans JP","kozuka-gothic-pr6n", -apple-system, BlinkMacSystemFont, "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	/*-----------------------------------------
	明朝体主体の場合
	-----------------------------------------*/
	/*
	font-family: "游明朝体", YuMincho, "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", Georgia, Times, "Times New Roman", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	*/
	color:#222;
	letter-spacing:1px;
	font-size:14px;
    background: #f4f4f2;
}
a{
	transition:0.1s linear all;	
	color:#222;
	text-decoration:none;
}
a:hover{
	text-decoration:underline;	
}
li{
	list-style-type:none;	
}
p,th,td,li,dt,dd{
	line-height:1.8em;	
}
img{
	border:none !important;	
}

/* 文字サイズ */
:root {
    --fs: 14;
}
.size {
    font-size: calc(var(--fs) * 1px);
}


/* 文字装飾 */
.mincho {
  font-family: "Noto Serif JP","Shippori Mincho", serif;
  font-weight: 200;
  font-style: normal;
}
.rubik {
	font-family: "Rubik", serif;
	font-style: normal;
}
.meiryo {
    font-family: Meiryo;
	font-style: normal;
}

.thin{ font-weight:100; }
.light{ font-weight:300; }
.regular{ font-weight:400; }
.medium{ font-weight:500; }
.semibold{ font-weight:600; }
.bold{ font-weight:700; }
.bolder{ font-weight:900; }

.left{ text-align:left; }
.center{ text-align:center; }
.right{ text-align:right; }

.white{ color:white !important; }
.red{ color: #ff3357 !important; }
.navy{ color: #24387b !important; }
.black{ color: #442c16 !important; }

/* scroll-effect */
.effect-fade{
	opacity:0;
	transform:translate(0,60px);
	transition:all 1000ms;
}
.effect-fade.effect-scroll {
	opacity:1;
	transform:translate(0, 0);
}
/* road-effect */
.road-effect-fade{
	opacity:0;
	transform:translate(0,60px);
	transition:all 1000ms;
}
.road-effect-fade.effect-road {
	opacity:1;
	transform:translate(0, 0);
}
.lefteffect{
	transform:translateX(-15%);
	opacity:0;
	transition:opacity 1000ms,transform 1000ms;
}
.righteffect{
	transform:translateX(15%);
	opacity:0;
	transition:opacity 1000ms,transform 1000ms;
}
.fadein{
	opacity:0;
	transform:translate(0, 0);
}
:root {
    --delay: 3;
}
.delay {
   transition-delay: calc(var(--delay) * 1s);
}



/*-----------------------------------------
header
-----------------------------------------*/
header {
    position: absolute;
    width: 100%;
    z-index: 9999;
}
header .header_top {
    height: 60px;
    background: #000;
}
header .header_top .logo_aisin {
    position: absolute;
    width: 106px;
    top: 20px;
    left: 20px;
}
header .header_top h1 {
    text-align: center;
    padding: 19px;
}
header .header_bottom {
    text-align: center;
    background: #b49309;
    color: #fff;
    padding: 8px;
}

/*-----------------------------------------
main
-----------------------------------------*/
.mainimg {
    height: 100vh;
    position: relative;
    overflow: hidden;
    background: #000;
    padding-bottom: 180px;
    box-sizing: border-box;
}
.mainimg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mainimg .mainconcept {
    position: absolute;
    top: 15%;
    left: 0;
    right: 0;
    letter-spacing: 8px;
}
.mainimg .mainconcept p:first-child {
    margin-bottom: 1.8rem;
}
.mainimg .mainconcept_img {
    position: absolute;
    bottom: 50px;
    left: 0;
    right: 0;
}
.mainimg .mainconcept_img img.img_enefarm {
    width: 360px;
    max-width: 20%;
    margin-bottom: 50px;
}
.mainimg .mainconcept_img img.img_enefarm_txt{
    width: 600px;
    max-width: 30%;
}

section {
    position: relative;
}
section .section_name {
    position: absolute;
    top: 40px;
    left: 46px;
    transform: rotate(90deg);
    transform-origin: top left;
    color: #fff;
    font-size: 12px;
    letter-spacing: 2px;
	z-index: 1;
}

/* topic */
#topic {
    background: #b49309;
    padding: 60px 15px;
    margin-top: 70px;
}
#topic .section_inner {
    width: 1010px;
    max-width: calc(100% - 120px);
    margin: auto;
}
#topic .section_inner .topic_box {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}
#topic .section_inner .topic_box .topic_box_inner_R {
    text-align: center;
}
#topic .section_inner .topic_box .topic_box_inner_R .bg_gray {
    background: #3e3a39;
    text-align: center;
    padding: 20px 10px;
    margin-bottom: 20px;
}
#topic .section_inner .topic_box .topic_box_inner_R .bg_gray + div {
    text-align-last: justify;
    line-height: 1.4;
}
#topic .section_inner .topic_box .topic_box_inner_L {
    display: flex;
    flex-wrap: wrap;
    max-width: calc(100% - 316px);
    align-items: stretch;
    justify-content: center;
    gap: 0 20px;
}
#topic .section_inner .topic_box .topic_box_inner_L div:nth-child(1) {
}
#topic .section_inner .topic_box .topic_box_inner_L div:nth-child(2) {
    letter-spacing: -10px;
}
#topic .section_inner .topic_box .topic_box_inner_L div:nth-child(3) {
    margin-top: auto;
    margin-bottom: 28px;
}
#topic .section_inner .topic_box .topic_box_inner_L .center {
    width: 100%;
}

/* message */
#message {
    
}
#message .section_inner {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: stretch;
	background: #252e48;
	overflow: hidden;
}
#message .section_inner_L {
    background: url(img/bg_message_02.jpg);
    background-size: cover;
    width: calc(110000vw / 1920);
    padding-top: 120px;
    padding-bottom: 220px;
    padding-left: calc(50vw - 550px);
    line-height: 2.4;
	box-sizing: border-box;
}
#message .section_inner_L p.message_txt {
	margin-bottom: 120px;
    line-height: 2.4;
    letter-spacing: 4px;
}
#message .section_inner_L p img {
    padding-right: 20px;
}
#message .section_inner_L ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 40px;
	margin-top: 36px;
	margin-right: 50px;
}
#message .section_inner_L ul li {
    width: calc((100% - 80px) / 3);
    height: auto;
    aspect-ratio: 1;
    border: 1px solid #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    line-height: 1.4;
    letter-spacing: 4px;
    padding-left: 4px;
}
#message .section_inner_R {
    width: calc(82000vw / 1920);
    overflow: hidden;
    text-align: center;
}
#message .section_inner_R img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-backface-visibility: hidden;
    -webkit-filter: blur(8px);
    filter: blur(8px);
	transition: filter 0.1s;
}


/* contents */
#contents {
    background: #f4f4f2;
    padding: 60px 0 90px;
}
#contents .section_inner {
    width: 1100px;
    max-width: calc(100% - 120px);
    margin: 0 auto 0;
}
#contents .section_inner p {
    letter-spacing: 4px;
}
#contents .section_inner ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 22px;
	margin-top: 30px;
}
#contents .section_inner ul li {
    width: calc((100% - 44px) / 3);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 120px;
    line-height: 32px;
    background: #fff;
    padding: 10px;
    box-sizing: border-box;
}
#contents .section_inner ul li a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-align: center;
	color: #24387b;
	position: relative;
	box-sizing: border-box;
    border: 1px solid #24387b;
    transition: 0.1s linear all;
}
#contents .section_inner ul li a > div {
    line-height: 1.8;
}
#contents .section_inner ul li a span.ruby {
    position: relative;
}
#contents .section_inner ul li a span.ruby:before {
    content: "";
    position: absolute;
    width: 4px;
    height: 4px;
    display: block;
    background: #b49309;
    border-radius: 50%;
    top: -5px;
    left: 0;
    right: 0;
    margin: auto;
}
#contents .section_inner ul li a:hover {
	text-decoration: none;
    opacity: 0.8;
}

/* movie */
#movie {
    background: #000;
	padding-top: 85px;
	padding-bottom: 140px;
}
section#movie .section_name {
}
#movie .section_inner {
    width: 1100px;
    max-width: calc(100% - 120px);
    margin: 0 auto;
}
#movie h3 {
	margin-bottom: 25px;
	letter-spacing: 4px;
}
#movie .movie_box {
    margin: 60px 0 0;
}
#movie .movie_box iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 560 / 315;
}

/* about */
#about {
	padding-top: 85px;
}
#about .scroll_block {
  position: relative;
}
#about .about_base,
#about .about_content {
  position: sticky;
  top: 120px;
  width: 100%;
  display: flex;
    flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
}
#about .about_base {
	background:url(img/bg_about_grid.png) center bottom no-repeat;
    background-size: 100%;
	height: 100vh;
    overflow: hidden;
}
#about .scroll_block.reached .about_base {
  z-index: 1;
}
#about .about_base h2{
	width: 730px;
    margin: 0 auto 60px;
/*    margin: 15px auto 60px;
    background: #fff;
    padding: 40px;
    box-sizing: border-box;
    position: relative;
	letter-spacing: 4px;*/
}
#about .about_base h2 img {
    max-width: 100%;
}
    #about .about_base h2 {
        margin: 0 auto;
    }
    #about .about_base h2 img {
        width: auto;
        max-height: 20vh;
    }
    #about .about_base, #about .about_content {
        top: 0;
    }
    #about .about_base p img {
        max-width: calc(100% - 120px);
        width: auto;
        max-height: 50vh;
    }
    #about .about_content {
        padding: 60px;
    }
/*#about .about_base h2:before{
	content: "";
	position: absolute;
	display: block;
    width: 1px;
    height: 90px;
    background: #000;
	top: -15px;
    left: 0;
}
#about .about_base h2:after{
	content: "";
	position: absolute;
	display: block;
    width: 90px;
    height: 1px;
    background: #000;
	top: 0;
    left: -15px;
}
#about .about_base h2 div:before{
	display: block;
    width: 1px;
    height: 90px;
    background: #000;
	content: "";
	position: absolute;
	bottom: -15px;
    right: 0;
}
#about .about_base h2 div:after{
	content: "";
	position: absolute;
	display: block;
    width: 90px;
    height: 1px;
    background: #000;
	bottom: 0;
    right: -15px;
}
#about .about_base h2 div span{
	display: inline-block;
    padding-top: 28px;
	letter-spacing: 8px;
}*/
#about .about_base p {
    width: 100%;
}
#about .about_base p img {
	//width: 480px;
    //max-width: calc(100% - 120px);
}
#about .about_content {
    position: relative;
	padding: 125px 60px;
	box-sizing: border-box;
	background: #f5f5f3;
}
#about .about_content img.img_enefarm {
    width: 480px;
    max-width: calc(100% - 120px);
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    margin: auto;
    z-index: -1;
    opacity: 0;
    transition: opacity ease 1s;
}
#about .about_content:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
	background:url(img/bg_about_grid.png) center bottom no-repeat rgba(36,56,123,0.52);
    background-size: 100%;
    background-attachment: fixed;
    z-index: -1;
    opacity: 0;
    transition: opacity ease 1s;
    //margin-bottom: 35px;
}
#about.reached .about_content:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
	background: rgba(36,56,123,0.52);
    z-index: -1;
    opacity: 0;
}
/**/#about .scroll_block .about_content {
}
#about .scroll_block .about_content img.img_enefarm,
#about .scroll_block .about_content:before,
#about .scroll_block .about_content:after{
    opacity: 1;
}
#about .scroll_block .about_content {
  z-index: 2;
}
#about .about_content h3 {
	margin-bottom: 30px;
    letter-spacing: 6px;
}
#about .about_content div {
	display: flex;
    width: 1100px;
    margin: 0 auto;
    flex-wrap: wrap;
	gap: 40px;
}
#about .about_content div div {
	display: block;
    width: calc(50% - 20px);
}
#about .about_content div div p {
	margin-bottom: 40px;
	display: inline-flex;
    align-items: center;
    letter-spacing: 4px;
}
#about .about_content div div p.sp {
    display: none;
}
#about .about_content div div p img {
	max-width: 100%;
	padding-right: 30px;
}
#about .about_content div div ol{
}
#about .about_content div div ol li{
	list-style-type: none;
	padding-left: 4px;
    margin-bottom: 14px;
    letter-spacing: -0.1px;
	text-indent: -30px;
    padding-left: 30px;
}
#about .about_content div div ol li span.num {
	display: block;
    float: left;
	width: 30px;
}
#about .about_content div div p.note {
    line-height: 1.8;
    letter-spacing: 0;
    text-indent: -1em;
    margin-left: 1em;
	box-sizing: border-box;
}
#about .about_content p {
	line-height: 0;
    position: relative;
	width: 100%;
}
#about .about_content p .img_about {
	max-width: 100%;
    height: auto;
    opacity: 0;
    transition: linear 0.3s all;
    transition-delay: 0;
}
#about .scroll_block.reached .about_content p .img_about {
    opacity: 1;
}




/*#about .about_content img.img_enefarm {
    width: 480px;
    max-width: calc(100% - 120px);
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    margin: auto;
    z-index: -1;
    opacity: 0;
    transition: opacity ease 1s;
}
#about .scroll_block .about_content:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
	background:url(img/bg_about_grid.png) center bottom no-repeat #f4f4f2;
    background-size: contain;
    background-attachment: fixed;
    z-index: -1;
    opacity: 0;
    transition: opacity ease 1s;
}
#about .scroll_block.reached .about_content:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
	background: rgba(36,56,123,0.52);
    z-index: -1;
    opacity: 0;
}
#about .scroll_block.reached .about_content {
    background: none;
}
#about .scroll_block.reached .about_content img.img_enefarm,
#about .scroll_block.reached .about_content:before,
#about .scroll_block.reached .about_content:after{
    opacity: 1;
}
#about .scroll_block.reached .about_content {
  z-index: 2;
}
#about .about_content h3 {
	margin-bottom: 115px;
    letter-spacing: 6px;
}
#about .about_content div {
	display: flex;
    width: 1100px;
    margin: 0 auto;
    flex-wrap: wrap;
	gap: 40px;
}
#about .about_content div div {
	display: block;
    width: calc(50% - 20px);
}
#about .about_content div div p {
	margin-bottom: 40px;
	display: inline-flex;
    align-items: center;
    letter-spacing: 4px;
}
#about .about_content div div p img {
	max-width: 100%;
	padding-right: 30px;
}
#about .about_content div div ol{
}
#about .about_content div div ol li{
	list-style-type: none;
	padding-left: 4px;
    margin-bottom: 14px;
    letter-spacing: -0.1px;
	text-indent: -30px;
    padding-left: 30px;
}
#about .about_content div div ol li span.num {
	display: block;
    float: left;
	width: 30px;
}
#about .about_content div div p.note {
    line-height: 1.8;
    letter-spacing: 0;
    text-indent: -1em;
    margin-left: 1em;
}
#about .about_content p {
	line-height: 0;
    position: relative;
	width: 100%;
}
#about .about_content p .img_about {
	max-width: 100%;
    height: auto;
}

/* economy */
#economy {
	margin-bottom: 150px;
}
#economy .section_inner{
	padding-top: 150px;
}
#economy .section_inner:nth-of-type(1){
	padding-top: 0;
}
#economy h2{
	position: relative;
	margin-bottom: 60px;
    letter-spacing: 6px;
}
#economy h2:after{
	content:"";
	display: block;
	width: 0;
	height: 3px;
	background: #B49309;
	position: absolute;
    bottom: -20px;
    left: 0;
    transition: width 1s ease;
}
#economy h2.effect-scroll:after {
    width: 100%;
}
#economy h3{
	margin-top: 110px;
	margin-bottom: 60px;
}
#economy .graph {
	width: 1100px;
	max-width: calc(100% - 120px);
	margin: 50px auto 30px;
}
#economy .graph img + p {
    margin-top: 30px;
}
#economy .graph01 {
	position: relative;
}
#economy .graph01 + img {
	max-width: 100%;
	height: auto;
}
#economy .graph01 .img01,
#economy .graph01 .img02,
#economy .graph01 .img03{
	position: absolute;
	bottom:0;
	left:0;
	transition: all ease 1s;
}
#economy .graph01 img {
	width: 100%;
}
#economy .graph01 .img01 {
	height: 0;
	width: 100%;
	transition-delay: 0.5s;
}
#economy .effect-scroll .graph01 .img01 {
	height: 100%;
}
#economy .graph01 .img02 {
	width: 0;
	height: 100%;
	transition-delay: 0.8s;
}
#economy .effect-scroll .graph01 .img02 {
	width: 100%;
}
#economy .graph01 .img03 {
	opacity: 0;
	width: 100%;
	transition-delay: 1.2s;
}
#economy .effect-scroll .graph01 .img03 {
	opacity: 1;
}
#economy .graph02 {
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#economy .graph02 > div{
	width: 50%;
}
#economy .graph02 .graph_title{
	border-bottom: 1px solid #414E70;
	padding-bottom: 20px;
	margin: 0 30px;
}
#economy .graph02 .graph_img{
	margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    justify-content: center;
    align-items: flex-end;
    position: relative;
}
#economy .graph02 .graph_img img {
    position: absolute;
    top: 60px;
    left: 51%;
    max-width: 50%;
}
#economy .graph02 .graph02_02 .graph_img img {
    top: 0;
}
#economy .graph02 .graph02_01 .graph_img div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 170px;
    height: 300px;
    background: #b49309;
    color: #fff;
    font-size: 21px;
    margin-top: 200px;
    transition: all ease 1s;
    transition-delay: 0.3s;
}
#economy .graph02 .graph02_01 .graph_img.effect-scroll div.graph_before {
    opacity: 0.5;
}
#economy .graph02 .graph02_01 .graph_img.effect-scroll div.graph_after {
    height: 160px;
}
#economy .graph02 .graph02_02 .graph_img > div {
    width: 170px;
    margin-top: 200px;
}
#economy .graph02 .graph02_02 .graph_img > div div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 170px;
    max-width: 100%;
    height: 150px;
    background: #24387b;
    color: #fff;
    font-size: 21px;
    transition: all ease 1s;
    transition-delay: 0.3s;
}
#economy .graph02 .graph02_02 .graph_img > div div + div {
    background: #b49309;
}
#economy .graph02 .graph02_02 .graph_img > div {
}
#economy .graph02 .graph02_02 .graph_img.effect-scroll div.graph_before {
    opacity: 0.5;
}
#economy .graph02 .graph02_02 .graph_img.effect-scroll div.graph_after div + div{
    height: 75px;
}
#economy .graph02 .graph_img02{
    background: #fff;
}
#economy .graph02 .graph_img02 ul{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
}
#economy .graph02 .graph_img02 ul li {
    font-size: 23px;
    line-height: 31px;
    width: 230px;
    text-align: center;
}
#economy .graph02 .graph_img02 ul li span {
    font-size: 16px;
}

/* environment */
#environment {
	
}
#environment .section_inner.bg{
	background:url(img/bg_environment.jpg) no-repeat;
    height: 100vh;
    position: relative;
	overflow: hidden;
}
#environment .section_inner.bg img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: all ease 30s;
    object-position: center center;
}
#environment .section_inner.bg.effect-scroll img {
    transform: scale(1.15);
    object-position: center center;
}
#environment .section_inner.bg div {
    width: 100%;
    position: absolute;
    bottom: 120px;
}
#environment .section_inner.bg h2,
#environment .section_inner.bg p{
    margin-left: calc(50vw - 550px);
    margin-bottom: 15px;
	line-height: 74px;
}
#environment .section_inner.bg h2 {
    letter-spacing: 6px;
}
#environment .section_inner{
	margin-bottom: 150px;
}
#environment .section_inner h3{
	margin-bottom: 60px;
}
#environment .section_inner .graph{
	width: 1100px;
	max-width: calc(100% - 120px);
	margin: 60px auto 0;
    box-sizing: border-box;
}
#environment .section_inner .graph img{
	max-width: 100%;
}
#environment .section_inner .graph .graph01{
	position: relative;
    width: 100%;
    height: 60px;
    background: #fff;
	margin-top: 30px;
}
#environment .section_inner .graph .graph01 img {
	position: absolute;
	top: 50%;
	right: 23%;
	transform: translateY(-50%);
	max-width: 35%;
}
#environment .section_inner .graph .graph01:after {
	content: "";
	display: block;
	width: 0;
	height: 100%;
	background: linear-gradient(90deg, #24387b, #d8ab09);
	transition: all ease 1s;
}
#environment .section_inner.effect-scroll .graph .graph01:after {
	width: 87%;
	transition-delay: 0.6s;
}
#environment .section_inner .graph .graph02{
	position: relative;
    width: 100%;
    height: 60px;
    background: #fff;
	margin-top: 30px;
	margin-bottom: 20px;
}
#environment .section_inner .graph .graph02 img {
	position: absolute;
	top: 50%;
	right: 62%;
	transform: translateY(-50%);
	max-width: 35%;
}
#environment .section_inner .graph .graph02:after {
	content: "";
	display: block;
	width: 0;
	height: 100%;
	background: #888888;
	transition: all ease 1s;
}
#environment .section_inner .graph.effect-scroll .graph02:after {
	width: 40%;
	transition-delay: 0.6s;
}
#environment .graph03 .graph_img{
	margin-top: 30px;
    display: flex;
    flex-wrap: nowrap;
    gap: 70px;
    justify-content: center;
    align-items: flex-end;
    position: relative;
}
#environment .graph03 .graph_img img {
    position: absolute;
    top: 0;
    left: calc(50% + 30px);
}
#environment .graph03 .graph03_01 .graph_img > div {
    width: 200px;
    margin-top: 200px;
}
#environment .graph03 .graph03_01 .graph_img > div div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 160px;
    background: #24387b;
    color: #fff;
    font-size: 21px;
    transition: all ease 1s;
    transition-delay: 0.3s;
}
#environment .graph03 .graph03_01 .graph_img > div div + div {
    height: 200px;
    background: #b49309;
}
#environment .graph03 .graph03_01 .graph_img > div {
}
#environment .graph03 .graph03_01 .graph_img.effect-scroll div.graph_before {
    opacity: 0.5;
}
#environment .graph03 .graph03_01 .graph_img.effect-scroll div.graph_after div {
    height: 200px;
}
#environment .graph03 .graph03_01 .graph_img.effect-scroll div.graph_after div + div{
    height: 90px;
}
#environment .graph03 .graph_img02{
    background: #fff;
}
#environment .graph03 .graph_img02 ul{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
    margin-bottom: 30px;
}
#environment .graph03 .graph_img02 ul li {
    font-size: 23px;
    line-height: 31px;
    width: 270px;
    text-align: center;
}
#environment .graph03 .graph_img02 ul li span {
    font-size: 16px;
}
#environment .section_inner .graph.graph04 ul {
	display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
	margin-bottom: 20px;
	gap: 40px;
}
#environment .section_inner .graph.graph04 ul li {
	width: calc(25% - 30px);
}
#environment .section_inner .graph.graph04 ul li p {
	display: inline-flex;
    width: 100%;
	height: 120px;
    background: #888;
    align-items: center;
    justify-content: center;
}
#environment .section_inner .graph.graph04 ul li p.bg_navy {
	background: #24387B;
}
#environment .section_inner h4{
	border-bottom: 1px solid #000;
    margin-bottom: 35px;
    padding-bottom: 15px;
}


/* resilience */
#resilience {
    position: relative;
	overflow: hidden;
}
#resilience > img {
	position: absolute;
	top: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: all ease 30s;
    object-position: center center;
}
#resilience.effect-scroll > img {
    transform: scale(1.15);
    object-position: center center;
}
#resilience .section_inner {
    width: 100%;
    padding-top: 150px;
}
#resilience h2 {
	line-height: 60px;
	margin-bottom: 40px;
}
#resilience h3 {
	line-height: 47px;
    margin-bottom: 20px;
}
#resilience p {
    position: relative;
	margin-bottom: 30px;
}
#resilience .sp_indent {
    margin-bottom: 80px;
}
#resilience .sp_indent p{
    margin-bottom: 0;
}
#resilience .resilience_example {
	width: 1100px;
    max-width: calc(100% - 120px);
    margin: 0 auto 0;
	display: flex;
    flex-wrap: nowrap;
	gap: 15px;
    justify-content: space-between;
    align-items: center;
}
#resilience .resilience_example div {
}
#resilience .resilience_example div.line {
    width: calc(50% - 10em - 15px);
    height: 1px;
    background: #fff;
}
#resilience .resilience_time {
	width: 1100px;
    max-width: calc(100% - 120px);
    margin: 40px auto 50px;
	display: flex;
    flex-wrap: nowrap;
	gap: 27px;
}
#resilience .resilience_time .fulltime {
	width: calc((100% - 89px) / 5);
}
#resilience .resilience_time .plus {
	position: relative;
	width: 35px;
}
#resilience .resilience_time .plus:before {
	content:"";
	display: block;
	width: 35px;
	height: 3px;
	background: #fff;
	position: absolute;
    top: 23px;
}
#resilience .resilience_time .plus:after {
	content:"";
	display: block;
	width: 3px;
	height: 35px;
	background: #fff;
	position: absolute;
    top: 7px;
    left: 16px;
}
#resilience .resilience_time .parttime {
	width: calc((400% - 89px) / 5);
}
#resilience .resilience_time .fulltime div,
#resilience .resilience_time .parttime div {
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 50px;
	margin-bottom: 17px;
}
#resilience .resilience_time ul {
	display: flex;
    flex-wrap: wrap;
	gap: 13px;
	text-align: center;
}
#resilience .resilience_time ul li {
	font-size: 20px;
	color: #fff;
	background: linear-gradient(0deg, #CC9900, #24387B 85%);
	padding: 25px 5px;
	box-sizing: border-box;
}
#resilience .resilience_time ul li p {
    margin-bottom: 0;
}
#resilience .resilience_time .fulltime ul li {
	width: 100%;
}
#resilience .resilience_time .parttime ul li {
	width: calc((100% - 39px) / 4);
}
#resilience .resilience_time ul li span {
	font-size: 37px;
	font-weight: 500;
	font-family: "Rubik", serif;
    line-height: initial;
}
#resilience .resilience_time ul li span + span {
	font-weight: 500;
	font-family: "Rubik", serif;
}
#resilience .resilience_txt {	
width: 1100px;	
max-width: 100%;	
margin: 40px auto 50px;	
}	
#resilience .resilience_txt p {	
margin-bottom: 0;	
}

/* campaign */
#campaign {
	background: #f4f4f2;
    padding: 140px 0 85px;
}
#campaign .section_inner h2 {
    margin-bottom: 45px;
}
#campaign .section_inner .border {
    width: 1100px;
    max-width: calc(100% - 120px);
    margin: 0 auto 100px;
    border: 1px solid;
    padding: 12px;
    line-height: 1.4;
    box-sizing: border-box;
}
#campaign .section_inner .bg_white {
    background: #fff;
    padding: 30px 0;
    margin-bottom: 35px;
}
#campaign .section_inner .campaign_box {
    width: 1100px;
    max-width: calc(100% - 120px);
    margin: 0 auto;
    padding: 0 35px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 65px;
}
#campaign .section_inner .campaign_box .campaign_box_L {
    width: 60%;
}
#campaign .section_inner .campaign_box .campaign_box_L .gold {
    color: #d2ad15;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
    letter-spacing: -10px;
}
#campaign .section_inner .campaign_box .campaign_box_L .gold span {
    line-height: 1;
}
#campaign .section_inner .campaign_box .campaign_box_L .bg_gold {
    background: #d2ad15;
    padding: 0 0 5px 15px;
    margin-right: 15px;
}
#campaign .section_inner .campaign_box .campaign_box_L .gold + .center {
    text-align-last: justify;
}
#campaign .section_inner .campaign_box .campaign_box_R {
    width: calc(40% - 75px);
    margin-top: -90px;
}
#campaign .section_inner .campaign_box .campaign_box_R img {
    width: 100%;
    height: auto;
}
#campaign .section_inner .campaign_box p.center {
    margin: auto;
}

/* recommend */
#recommend {
	position: relative;
}
#recommend .section_inner {
	position: sticky;
    top: 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    background: #000;
    height: 100vh;
}
#recommend .section_inner_L {
    width: calc((1.8 / 2.8)* 100vw);
    line-height: 2.4;
    box-sizing: border-box;
}
#recommend .section_inner_L img {
object-fit: cover;
    aspect-ratio: 60 / 54;
    width: 100%;
    height: 100%;
}
#recommend .section_inner_R {
    width: calc((1 / 2.8)* 100vw);
    text-align: center;
    background: #000;
	box-sizing: border-box;
    padding: 2vh 60px 2vh;
	display: flex;
    flex-wrap: wrap;
    align-content: space-around;
	justify-content: center;
    height: 100vh;
	font-weight: 300;
}
#recommend .section_inner_R p:first-child {
	font-size: 1.6vh;
}
#recommend .section_inner_R p:first-child span {
	font-size: 2.0vh;
}
#recommend .section_inner_R::-webkit-scrollbar{
  display: none;
}
#recommend .section_inner_R p {
	width: 100%;
}
#recommend .section_inner_R .mincho {
		-ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    display: inline-block;
	margin: 0;
    letter-spacing: 8px;
	width: auto;
	white-space: nowrap;
	font-size: 3.2vh;
}
#recommend .section_inner_R .left {
	line-height: 2.1;
	font-size: 1.8vh;
}


/* setting */
#setting {
	background:url(img/bg_setting.jpg) bottom center no-repeat;
    background-size: cover;
	padding: 100px 0;
}
#setting p.lc4{
	letter-spacing: 4px;
}
#setting h2{
	display: flex;
	align-items: center;
    justify-content: center;
	width: 900px;
	height: 90px;
	max-width: calc(100% - 120px);
	margin: 25px auto 40px;
	border: 3px solid #fff;
	background: rgba(255,255,255,0.3);
	letter-spacing: 6px;
}
#setting .setting{
	width: 1100px;
    max-width: calc(100% - 120px);
    margin: 50px auto;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: stretch;
    gap: 25px;
}
#setting .setting .setting_L{
	background: #fff;
	position: relative;
	width: 54%;
}
#setting .setting .setting_C{
	position: relative;
	width: 65px;
}
#setting .setting .setting_C:before {
	content: "";
    display: block;
    width: 65px;
    height: 5px;
    background: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
#setting .setting .setting_C:after {
	content: "";
    display: block;
    width: 5px;
    height: 65px;
    background: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
	left: 0;
    right: 0;
    margin: auto;
}
#setting .setting .setting_R{
	background: #fff;
	position: relative;
	width: 42%;
}
#setting .setting h3{
	display: flex;
	justify-content: center;
    align-items: center;
	width: 100%;
	height: 60px;
	background: #24387b;
}
#setting .setting .setting_L h3{
	background: #000;
}
#setting .setting .setting_L img,
#setting .setting .setting_R img{
	padding: 30px 50px;
	max-width: 100%;
	box-sizing: border-box;
}
#setting .setting .setting_R img{
	padding: 60px 50px;
}
#setting .setting .setting_label {
	background: #fff;
    border: 1px solid #3E3A39;
    color: #3E3A39;
    font-size: 30px;
    line-height: 44px;
    position: absolute;
    bottom: -176px;
    left: 0;
    right: 0;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 206px;
    height: 206px;
    border-radius: 50%;
}

/* introduction */
#introduction {
	background:url(img/bg_introduction.jpg) center center no-repeat;
    background-size: cover;
	padding: 150px 0 185px;
}
#introduction .introduction_logo {
	margin-bottom: 50px;
}
#introduction .introduction_txt {
	margin-bottom: 80px;
}
#introduction .introduction_bnr {
	position: relative;
	width: 1100px;
    max-width: calc(100% - 120px);
    margin: auto;
    overflow: hidden;
}
#introduction .introduction_bnr .img {
    object-fit: cover;
    width: 100%;
    height: auto;
    transition: all 0.3s ease;
}
#introduction .introduction_bnr a:hover .img {
    transform: scale(1.05);
}
#introduction .introduction_bnr .icon {
	position: absolute;
	top: 45px;
	right: 45px;
}


/* qa */
#qa {
	padding: 150px 0;
}
#qa h2 {
	margin-bottom: 70px;
}
#qa h2 span {
	color: #8d97ba;
	padding: 0 10px;
}
#qa dl {
	width: 1100px;
	max-width: calc(100% - 120px);
	margin: 0 auto 30px;
	background: #fff;
	border-radius: 20px;
	padding: 40px;
    box-sizing: border-box;
}
#qa dl dt{
	height: 60px;
    margin-bottom: 10px;
	font-size: 28px;
	color: #24387b;
	position: relative;
	padding-left: 80px;
	letter-spacing: 4px;
}
#qa dl dt:before{
	content:"Q";
	font-family: "Rubik", serif;
	font-size: 37px;
	color: #fff;
	background: #8d97ba;
	border-radius: 50%;
	display: flex;
    width: 60px;
    height: 60px;
    align-items: center;
    justify-content: center;
	position: absolute;
    top: 0;
    left: 0;
}
#qa dl dd{
	font-size: 20px;
	position: relative;
	padding-left: 80px;
	padding-top: 10px;
	min-height: 52px;
	letter-spacing: -1px
}
#qa dl dd:before{
	content:"A";
	font-family: "Rubik", serif;
	font-size: 37px;
	color: #fff;
	background: #24387b;
	border-radius: 50%;
	display: flex;
    width: 60px;
    height: 60px;
    align-items: center;
    justify-content: center;
	position: absolute;
    top: 0;
    left: 0;
}
#qa dl dd dl{
	padding: 0;
	margin-bottom: 15px;
	max-width: 100%;
}
#qa dl dd dl dt{
	padding: 0;
    font-size: 25px;
    color: #000;
	height: auto;
    margin-bottom: 0;
}
#qa dl dd dl dd{
	min-height: inherit;
	padding: 0 0 0 25px;
}
#qa dl dd dl dt:before,
#qa dl dd dl dd:before{
	display: none;
}

/* catalog */
#catalog h2 {
background: #000;
padding: 40px;
    margin-bottom: 50px;
	letter-spacing: 6px;
}
.page #catalog {
	padding-top: 60px;
}
.page #catalog p {
	margin-bottom: 30px;
}
.home #catalog > p + p {
    width: 1100px;
    max-width: calc(100% - 120px);
    margin: 10px auto 0;
    text-align: left;
}
#catalog .section_inner {
    width: 1100px;
    max-width: calc(100% - 120px);
    margin: 0 auto;
}
#catalog .section_inner .privacypolicy {
    background: #dbdcdc;
    margin-top: 70px;
    padding: 40px 50px;
	letter-spacing: -1px;
}
#catalog .section_inner .privacypolicy h3 {
    margin-bottom: 15px;
}
#catalog .section_inner .privacypolicy p {
    margin-bottom: 15px;
}
#catalog .section_inner .privacypolicy p:last-child {
    margin-bottom: 0;
}
#catalog .section_inner .form,
#catalog .section_inner .form_btn{
    border-top: 1px solid #000;
    padding: 50px 0 0;
    margin-top: 50px;
}
#catalog .section_inner .form p {
    font-size: 20px;
    margin: 0;
}
#catalog .section_inner .form > p {
	margin-top: 5px;
}
#catalog .section_inner .form p.address {
    //margin-bottom: 74px;
}
#catalog .section_inner .form .form_inner p {
    font-size: 19px;
	margin-top: 5px;
}
#catalog .section_inner .form .form_inner p.mt {
	margin-top: 24px;
}
#catalog .section_inner .form .form_inner p.radio .wpcf7-list-item {
	display: block;
}
#catalog .section_inner .form .form_inner p.size_exp {
    font-size: 16px;
}
#catalog .section_inner .form .form_inner p.red {
    font-size: 24px;
    margin-bottom: 10px;
}
#catalog .section_inner .form .form_inner p.radio {
	margin-bottom: 20px;
}
#catalog .section_inner .form p .req,
#catalog .section_inner .privacypolicy p .req {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 28px;
    font-size: 16px;
    color: #fff;
    background: #ff3357;
    margin-left: 17px;
}
#catalog .section_inner .form p .opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 28px;
    font-size: 16px;
    color: #fff;
    background: #24387b;
    margin-left: 17px;
}
#catalog .section_inner .form input,
#catalog .section_inner .privacypolicy input,
#catalog .section_inner .form select {
    border: none;
    padding: 15px 15px 16px;
	margin: 5px 0 20px;
    box-sizing: border-box;
    font-size: 19px;
}
#catalog .section_inner .form input[name="yourname"],
#catalog .section_inner .form input[name="yourname-ruby"],
#catalog .section_inner .form input[name="address02"],
#catalog .section_inner .form input[name="address03"],
#catalog .section_inner .form input[name="gascompany"] {
	width: 740px;
	max-width: 100%;
	min-width: 50%;
}
#catalog .section_inner .form input[name=zip] {
    width: 200px;
	max-width: 100%;
    margin-right: 23px;
}
#catalog .section_inner .form input[name=telnumber] {
    width: 478px;
	max-width: 100%;
    margin-right: 23px;
}
#catalog .section_inner .form input[name=email-670],
#catalog .section_inner .form input[name=email-670_confirm] {
    width: 478px;
	max-width: 100%;
    margin-right: 0;
}


#catalog .section_inner .form .checkbox {
    margin-top: 25px;
}
#catalog .section_inner .form input[type=checkbox],
#catalog .section_inner .privacypolicy input[type=checkbox] {
    width: 36px;
    height: 36px;
    margin-right: 17px;
    margin-top: 10px;
}
#catalog .section_inner .form input[type=radio],
#catalog .section_inner .privacypolicy input[type=radio] {
    width: 24px;
    height: 24px;
    margin: 5px 17px 5px 0;
}
#catalog .section_inner .form .checkbox .wpcf7-list-item-label,
#catalog .section_inner .privacypolicy .checkbox .wpcf7-list-item-label {
	font-size: 24px;
}
#catalog .section_inner .form_btn input {
    width: 412px;
	max-width: 100%;
    height: 73px;
    font-size: 26px;
    background: #24387b;
    color: #fff;
    border: none;
    margin-bottom: 70px;
}
#catalog .section_inner .general_inquiries p {
    margin-bottom: 5px;
}
#catalog .section_inner .general_inquiries a {
    position: relative;
    padding-right: 32px;
}
#catalog .section_inner .general_inquiries a:before {
    content: "";
    display: block;
    width: 27px;
    height: 27px;
    background: #24387b;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}
#catalog .section_inner .general_inquiries a:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-left-width: 9px;
    border-left-color: #fff;
    position: absolute;
    top: 50%;
    right: 2px;
    transform: translateY(-50%);
}

.page-confirm p.input {
	padding: 12px 15px 13px;
    background: #fff;
}

/*-----------------------------------------
footer
-----------------------------------------*/
.pagetop{
	position:fixed;
	bottom:30px;
	right:30px;
	z-index:999;
}

.btn_catalog {
	position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
}
.btn_catalog img.pc {
	width: 196px;
	height: auto;
	transition:0.1s linear all;
}
.btn_catalog img.sp {
	width: 100%;
	height: auto;
}
.btn_catalog img:hover {
	opacity: 0.8;
}

footer {
	position: relative;
    overflow: hidden;
}
footer:after {
	content: "";
	display: block;
	width: 100%;
	height: 270px;
	background: linear-gradient(0deg, transparent, #f4f4f2);
	position: absolute;
	top: 0;
	left: 0;
}
footer > img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: all ease 30s;
    object-position: center center;
}
footer.effect-scroll > img {
    transform: scale(1.15);
    object-position: center center;
}
footer .footer_inner {
    width: 100%;
}
footer .footer_top {
    position: absolute;
    top: 220px;
    left: 0;
    right: 0;
}
footer .footer_top p {
	margin-bottom: 25px;
    letter-spacing: 8px;
}
footer .footer_logo {
	position: absolute;
	bottom: 65px;
	width: 100%;
    height: 140px;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}
footer .footer_bottom .footer_copyright{
	position: absolute;
	bottom: 0;
	display: flex;
    align-items: center;
    justify-content: space-between;
    height: 65px;
    padding: 0 40px 0 30px;
	width: 100%;
	box-sizing: border-box;
	letter-spacing: -1px;
}
footer .footer_bottom .footer_copyright .copyright {
	letter-spacing: 0;
}


/*-----------------------------------------
コンタクトフォーム用
-----------------------------------------*/
input[type="checkbox"],
input[type="radio"]{
	vertical-align:middle;
}
input[type="text"],
input[type="email-670"],
input[type="email-670_confirm"],
input[type="tel"],
textarea{
	padding:5px;
	width:96%;
}


.sp{ display:none; }

@media screen and (max-width: 1400px) { /* タブレット横 */
    #environment .section_inner.bg h2 {
        font-size: 2.8vw;
    }
}
@media screen and (max-width: 1194px) { /* iPad Pro */
    .size {
        font-size: calc(var(--fs) * 0.07vw);
    }
	#catalog .section_inner .form .form_inner p.size_exp {
        font-size: calc(16* 0.07vw);
    }
    #resilience .resilience_time ul li {
        font-size: calc(20 * 0.07vw);
    }
    #topic .section_inner .topic_box .topic_box_inner_L div {
        font-size: calc(var(--fs) * 0.08vw);
    }
    #contents .section_inner ul li {
        min-height: 100px;
    }
    
	#message .section_inner_L {
		padding-left: 60px;
	}
	#economy .graph02 .graph02_01 .graph_img div {
		font-size: 15px;
	}
	#setting .setting .setting_label {
		transform: scale(0.7);
        bottom: -123px;
	}
    footer .footer_logo img {
        width: calc(216 * 0.07vw);
    }
}
@media screen and (max-width: 1024px) { /* タブレット横 */
    #about .about_base h2 {
        width: 640px;
		max-width: calc(100% - 180px);
    }
    #economy .graph02 .graph_img img {
        width: calc(50% - 60px);
        left: auto;
        right: 30px;
    }
    #economy .graph02 .graph02_01 .graph_img div,
    #economy .graph02 .graph02_02 .graph_img > div{
        margin-top: 150px;
    }
    #environment .section_inner.bg h2,
    #environment .section_inner.bg p {
        margin-left: 60px;
        line-height: 2.2;
    }
}
@media screen and (max-width: 896px) { /* iPhone XS MAX 横表示 */
    .size {
        font-size: calc(var(--fs) * 1px);
    }
	#catalog .section_inner .form .form_inner p.size_exp {
        font-size: 16px;
    }
	.sp{ display:inline-block; }
	.pc{ display:none; }
	.wrapper{
		width:100%;
		overflow:hidden;
	}
    
    header {
        position: fixed;
        top: 0;
    }
    header .header_top .logo_aisin {
        top: 30px;
    }
    header .header_top h1 {
        padding: 0 19px 8px;
        height: 60px;
        box-sizing: border-box;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
    }
	header .header_top h1 img {
		max-width: 50%;
	}
	.nav_btn{
    position: fixed;
    top: 75px;
    right: 15px;
    width: 35px;
    height: 35px;
        z-index: 999;
	}
	.menu__line {
		background: #000;
		display: block;
		height: 3px;
		position: absolute;
		transition: transform .3s;
		width: 100%;
        border-radius: 3px;
	}
	.menu__line--top {
        top: 4px;
	}
	.menu__line--center {
		top: 17px;
	}
	.menu__line--bottom {
		top: 30px;
    }
	.menu__line.active {
    }
	.menu__line--top.active {
		top: 17px;
		transform: rotate(45deg);
	}
	.menu__line--center.active {
		transform: scaleX(0);
	}
	.menu__line--bottom.active {
		top: 17px;
		transform: rotate(135deg);
	}
	nav.sp{
		width:240px;
        height: calc(100vh - 60px);
		position:fixed;
		top:60px;
		right: 0;
		background-color:#f5f5f3;
		overflow:auto;
		transition: 0.1s linear all;
        opacity: 0;
		z-index: -1;
        padding: 67px 0 20px;
	}
	nav.sp.active{
        opacity: 1;
		z-index:9999;
		transition: 0.1s linear all;
	}
    nav.sp p {
        width: 164px;
        margin: 0 auto 15px;
    }
    nav.sp ul {
        width: 164px;
        margin: 0 auto 14px;
        display: flex;
    flex-wrap: wrap;
    justify-content: center;
    }
	nav.sp li{
		width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
        margin-bottom: 6px;
        min-height: 42px;
        line-height: 1.4;
	}
	nav.sp li a{
		display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        font-size: 12px;
        text-align: center;
        color: #24387b;
        background: #fff;
        border: 1px solid #24387b;
	}
	nav.sp li:last-child a{
        color: #fff;
        background: #b49309;
        border: 1px solid #b49309;
	}
	nav.sp li a:hover{
		text-decoration:none;
	}
    
    main {
        margin-top: 60px;
    }
    .mainimg .mainconcept {
        top: 30px;
    }
    .mainimg .mainconcept p:first-child {
        margin-bottom: 1em;
    }
    .mainimg .mainconcept p.size {
        font-size: calc(var(--fs) * 0.12vw);
    }
	.mainimg .mainconcept p.size span.co2 {
		font-size: calc(var(--fs) * 0.12vw);
	}
    .mainimg .mainconcept_img img.img_enefarm {
        max-width: 40%;
    }
    .mainimg .mainconcept_img img.img_enefarm_txt {
        max-width: 50%;
    }
    
    
    #topic {
        margin: 35px 0;
        padding: 30px;
    }
    #topic .section_inner {
        max-width: 100%;
    }
    #topic .section_inner .topic_box {
        gap: 0;
    }
    #topic .section_inner .topic_box .topic_box_inner_R {
        display: flex;
        gap: 11px;
    }
    #topic .section_inner .topic_box .topic_box_inner_R .size {
        font-size: calc(var(--fs) * 0.08vw);
        padding-top: 6px;
    }
    #topic .section_inner .topic_box .topic_box_inner_R .size.bg_gray {
        font-size: calc(var(--fs) * 0.12vw);
        padding: 10px;
    }
    #topic .section_inner .topic_box .topic_box_inner_L {
        width: 100%;
        max-width: 100%;
    }
    #topic .section_inner .topic_box .topic_box_inner_L .size {
        font-size: calc(var(--fs) * 0.12vw);
    }
    
    #message .section_inner {
        flex-wrap: wrap;
    }
    #message .section_inner_L,
    #message .section_inner_R {
        width: 100%;
    }
    #message .section_inner_L {
        padding: 55px 60px;
    }
    #message .section_inner_L p,
    #message .section_inner_L p.message_txt{
        text-align: center;
        margin-bottom: 30px;
    }
    #message .section_inner_L p img {
        padding-right: 10px;
    }
    #message .section_inner_L ul {
        position: absolute;
        left: 0;
        right: 0;
    z-index: 999;
        flex-wrap: wrap;
    width: 180px;
    gap: 10px;
    margin: auto;
    }
    #message .section_inner_L ul li {
        width: 100%;
		background: rgba(0, 0, 0, 0.4);
    }
    #message .section_inner_R {
        height: 560px;
    }
    
	#movie {
		padding-top: 50px;
        padding-bottom: 50px;
	}
	section#movie .section_name {
		top: 25px;
	}
    #movie .section_inner {
        max-width: calc(100% - 60px);
    }
	#movie h3 {
		font-size: 5.8vw;
        margin-bottom: 10px;
	}
    #movie h3 span {
		font-size: 6.4vw;
	}
	#movie p {
		font-size: 3.2vw;
	}
    #movie .movie_box {
        margin: 35px 0 0;
    }
	
    #about .about_base {
        height: calc(100vh - 120px);
    }
    #about .about_base h2 {
        font-size: 20px;
    }
/*    #about .about_base h2 div span {
        font-size: 48px;
    }*/
	#about .about_base p img {
		max-width: 46%;
	}
    #about .about_content {
        padding: 30px 0 30px;
    }
    #about .about_content h3 {
        line-height: 1.8;
        padding-top: 30px;
    }
    #about .about_content p {
        margin-bottom: 30px;
        padding: 0 30px;
    }
    #about .about_content img.img_enefarm {
        max-width: 46%;
        top:4.2%;
    }
    #about .about_content div {
        margin-top: 30px;
        max-width: 100%;
        gap: 0;
    }
    #about .about_content div div p.pc {
        display: none;
    }
    #about .about_content div div {
        width: 100%;
    }
    #about .about_content div div p {
        padding: 0;
    }
    #about .about_content div div p img {
        width: 100%;
        padding: 0;
    }
    #about .about_content div div p.sp {
        display: inline-flex;
        padding: 0;
    }
    #about .about_content div div p.sp img {
        width: auto;
        padding: 0 30px;
    }
    #about .about_content div div ol,
    #about .about_content div div p.note {
        padding: 0 30px;
		box-sizing: border-box;
        width: calc(100% - 1em);
        font-size: 2.2vw;
    }
    #about .about_content div div ol {
        width: 100%;
    }
    #about .about_content div div ol li {
        text-indent: -1.5em;
        padding-left: 1.5em;
    }
    #about .about_content div div ol li span.num {
        width: 1.5em;
    }
    
    #economy {
	    //padding-top: 130px;
        margin-bottom: 30px;
    }
    #economy .section_name {
        //top: 170px;
        top: 40px;
    }
    #economy h2 {
        line-height: 1.4;
        margin-bottom: 40px;
    }
    #economy h2 p {
        margin-top: 10px;
        letter-spacing: 2px;
    }
    #economy .scroll-hint {
        //background: #fff;
        margin-top: 30px;
    }
    #economy .graph {
        max-width: 100%;
        margin-top: 10px;
		margin-bottom: 0;
        padding: 0 10px;
    }
    #economy .graph + p {
        text-align: left;
        padding: 0 30px;
        font-size: 2.2vw;
    }
    #economy .graph img + p {
        margin-top: 0;
    }
    #economy p span.sp_indent {
        padding-left: 26px;
    }
    #economy p.txt_indent {
        text-indent: -2em;
        padding-left: 2em;
        font-size: 2.2vw;
    }
    #economy h3 {
        line-height: 1.8;
        margin-top: 40px;
        margin-bottom: 10px;
    }
    #economy .graph02 {
        margin-top: 0;
        padding: 0;
    }
    #economy .graph02 > div {
        width: 100%;
    }
    #economy .graph02 .graph_title {
        font-size: 16px;
        margin: 0;
        position: absolute;
        bottom: 250px;
        padding: 0 20px 10px;
    }
    #economy .graph02 .graph02_02 .graph_title {
		bottom: 350px;
    }
    #economy .graph02 .graph02_01 .graph_img div {
        height: 150px;
    }
    #economy .graph02 .graph02_01 .graph_img.effect-scroll div.graph_after {
        height: 90px;
    }
    #economy .graph02 .graph_img img {
        width: 150px;
        top: auto;
        bottom: 100px;
        left: calc(50% + 15px);
    }
    #economy .graph02 .graph02_02 .graph_img img {
        top: 20px;
    }
    #economy .graph02 .graph_img {
        gap: 60px;
        margin-top: 0;
    }
    #economy .graph02 .graph02_01 .graph_img div,
    #economy .graph02 .graph02_02 .graph_img > div {
        width: 120px;
    }
    #economy .graph02 .graph02_02 .graph_img > div div {
        font-size: 15px;
        height: 120px;
    }
    #economy .graph02 .graph02_02 .graph_img.effect-scroll div.graph_after div + div {
        height: 55px;
    }
    #economy .graph02.graph + p {
        text-indent: -2em;
        padding-left: 2em;
        padding-right: 0;
    }
    
    #environment .section_inner.bg h2 {
        font-size: 4.8vw;
        line-height: 1.5;
        margin-bottom: 0;
    }
    #environment .section_inner.bg p {
        font-size: 3.6vw;
        margin-top: 10px;
    }
    #environment .section_inner.bg p span {
        font-size: 2.4vw;
    }
    #environment .section_inner {
        margin-bottom: 60px;
    }
    #environment .section_inner h3 {
        margin-bottom: 30px;
        line-height: 1.8;
    }
    #environment .section_inner .graph {
        max-width: calc(100% - 60px);
		padding-top: 30px;
		margin: 30px auto 0;
    }
    #environment .section_inner > p {
        text-align: left;
        margin: 0 30px;
    }
    #environment .section_inner .graph03 {
        max-width: 100%;
        position: relative;
    }
    #environment .section_inner .graph03 h4 {
        font-size: 16px;
        font-size: 3.2vw;
        margin: 0;
        position: absolute;
        padding: 10px 20px;
        text-align: left;
    }
    #environment .section_inner .graph03 h4 span {
        font-size: 14px;
        font-size: 2.2vw;
    }
    #environment .section_inner .graph03 h4 p {
        font-size: 14px;
        font-size: 2.8vw;
    }
    #environment .graph03 .graph_img {
        gap:60px;
    }
    #environment .graph03 .graph_img img {
        width: 150px;
        top: auto;
        bottom: 180px;
        left: calc(50% + 15px);
    }
    #environment .graph03 .graph03_01 .graph_img > div {
        margin-top: 60px;
        width: 120px;
    }
    #environment .graph03 .graph03_01 .graph_img > div div {
        width: 120px;
        height: 120px;
        font-size: 15px;
    }
    #environment .graph03 .graph03_01 .graph_img > div div p span {
        font-size: 11px;
    }
    #environment .graph03 .graph03_01 .graph_img > div div + div {
        height: 120px;
    }
    #environment .graph03 .graph03_01 .graph_img.effect-scroll div.graph_after div {
        height: 120px;
    }
    #environment .graph03 .graph03_01 .graph_img.effect-scroll div.graph_after div + div {
        height: 55px;
    }
    #environment .graph03 .graph03_01 .graph_img > div p {
        line-height: 1.2;
        text-align: center;
    }
    #environment .graph03 .graph03_01 + p {
        text-align: left;
        text-indent: -24px;
        padding: 0 10px;
        margin-left: 24px;
        font-size: 2.2vw;
    }
	#environment .section_inner h4,
    #environment .section_inner .graph04 h4 {
        font-size: 16px;
        margin: 0;
        position: absolute;
        //top: -10px;
        top: 0;
        padding: 0 30px 20px;
        text-align: left;
    }
	#environment .section_inner h4 span {
        font-size: 12px;
    }
	#environment .section_inner h4.graph02_title {
		top: -30px;
    }

    #environment .section_inner .graph.graph04 ul {
        gap: 10px;
        align-items: flex-end;
    }
    #environment .section_inner .graph.graph04 ul li {
        width: calc(24% - 10px);
        text-align: center;
    }
    #environment .section_inner .graph.graph04 ul li:last-child {
        width: calc(28% - 10px);
    }
    #environment .section_inner .graph.graph04 ul li p {
        font-size: 16px;
        text-align: center;
    }
    #environment .section_inner .graph.graph04 ul li p.bg_navy {
        font-size: 18px;
    }
    #environment .graph04 + p {
        text-align: left;
        text-indent: -24px;
        padding: 0 30px;
        margin-left: 24px;
    }
    #environment .section_inner .scroll-hint {
        margin-bottom: 30px;
    }
    #environment .section_inner .graph {
        padding: 10px;
    }
    #environment .section_inner .graph p {
        text-align: left;
    }
 	#economy .js-scrollable .graph01,
	#economy .js-scrollable .graph01 + img,
	#environment .section_inner .graph.js-scrollable{
		width: 980px;
		max-width: 980px;
	}
   
    #resilience .sp_indent p{
        text-align: left;
        text-indent: -24px;
        padding: 0 30px;
        margin-left: 24px;
    }
    #resilience .resilience_example {
        max-width: calc(100% - 60px);
    }
    #resilience .resilience_time {
        max-width: calc(100% - 60px);
        flex-wrap: wrap;
		gap: 15px;
		margin-bottom: 30px;
    }
    #resilience .resilience_time .fulltime,
    #resilience .resilience_time .parttime {
        width: 100%;
    }
    #resilience .resilience_time .plus{
        width: 35px;
        height: 35px;
        margin: auto;
    }
    #resilience .resilience_time .plus:before {
        top: 16px;
    }
    #resilience .resilience_time .plus:after {
        top: 0;
    }
    #resilience .resilience_time ul {
    }
    #resilience .resilience_time .fulltime ul {
        justify-content: center;
    }
    #resilience .resilience_time .fulltime ul li,
    #resilience .resilience_time .parttime ul li{
        width: calc(50% - 6.5px);
        font-size: 2.4vw;
		line-height: 1.4;
		padding: 15px 0px;
    }
	#resilience .resilience_time ul li span {
		font-size: 4.8vw;
	}
    #resilience .resilience_time .fulltime ul li img,
    #resilience .resilience_time .parttime ul li img {
        float: left;
        padding-left: 25px;
		max-width: calc(50% - 25px);
    }
    #resilience .resilience_txt p {
        text-align: left;
        text-indent: -24px;
        padding: 0 30px;
        margin-left: 24px;
    }
    
    #campaign .section_inner h2 {
        line-height: 1.4;
    }
    #campaign .section_inner .border,
    #campaign .section_inner .campaign_box{
        max-width: calc(100% - 60px);
    }
    #campaign .section_inner .campaign_box .campaign_box_L,
    #campaign .section_inner .campaign_box .campaign_box_R {
        width: calc(100% - 60px);
        margin: 0 auto;
        text-align: center;
    }
    #campaign .section_inner .campaign_box .campaign_box_L div:first-child {
        margin-bottom: 1.8rem;
    }
    #campaign .section_inner .campaign_box .campaign_box_L .size {
        font-size: calc(var(--fs) * 0.12vw);
    }
    #campaign .section_inner .campaign_box .campaign_box_L .gold {
        letter-spacing: -5px;
    }
    #campaign .section_inner .campaign_box .campaign_box_R img {
        width: 50%;
    }
    #campaign .section_inner .campaign_box > p.center {
        text-align: left;
        font-size: calc(var(--fs) * 0.12vw);
    }
    #campaign .section_inner .bg_white {
        margin-bottom: 65px;
    }
    
    #recommend .section_inner {
        flex-wrap: wrap;
    }
    #recommend .section_inner_L {
        width: 100%;
        height: 40vh;
    }
    #recommend .section_inner_R {
        width: 100%;
        height: 60vh;
    }
	#recommend .section_inner_R {
        padding: 30px 30px 60px;
    }
    #recommend .section_inner_R .mincho {
        writing-mode: horizontal-tb;
		margin: 4vh auto;
        font-size: 4.8vw;
    }
    
    #setting {
        padding: 40px 0 50px;
    }
    #setting .setting {
        max-width: calc(100% - 60px);
        margin: 30px auto 20px;
        flex-wrap: wrap;
        gap: 15px;
    }
    #setting .setting .setting_L,
    #setting .setting .setting_R {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row-reverse;
		align-items: flex-start;
		justify-content: center;
    }
	#setting .setting .setting_L img,
	#setting .setting .setting_R img {
        padding: 30px 60px;
	}
    #setting .setting h3 {
        
    }
    #setting .setting .setting_label {
        position: relative;
        top: 0;
        margin: 30px auto;
        transform: scale(1);
		width: 35%;
        height: auto;
        aspect-ratio: 1;
    }
    #setting .setting .setting_C {
        width: 45px;
        height: 45px;
        margin: auto;
    }
    #setting .setting .setting_C:before {
        width: 45px;
    }
    #setting .setting .setting_C:after {
        height: 45px;
    }
    #setting .setting + p {
        text-align: left;
        text-indent: -24px;
        padding: 0 30px;
        margin-left: 24px;
    }
    
    #introduction {
        padding: 80px 0;
    }
    #introduction .introduction_txt {
        margin-bottom: 60px;
    }
    #qa {
        padding: 80px 0;
    }
    #qa dl {
        max-width: calc(100% - 60px);
        padding: 30px;
		margin: 0 auto 20px;
    }
    #qa dl dt,
    #qa dl dd {
        padding-left: 60px;
		padding-top: 0;
        font-size: 2.4vw;
        height: 40px;
    }
    #qa dl dd {
        font-size: 2.0vw;
        height: auto;
    }
    #qa dl dt:before,
    #qa dl dd:before {
        width: 40px;
        height: 40px;
        font-size: 3.6vw;
    }
    #qa dl dd dl {
		margin-bottom: 5px;
    }
    #qa dl dd dl dt {
        font-size: 2.1vw;
    }
    
    #catalog h2 {
        padding: 20px;
        margin-bottom: 20px;
    }
    #catalog > p + p,
    #catalog .section_inner {
        max-width: calc(100% - 60px);
    }
    #catalog .section_inner .privacypolicy {
        padding: 30px;
        margin-top: 40px;
    }
    #catalog .section_inner .form input[name=telnumber] {
        max-width: 50%;
    }
    #catalog .section_inner .form input[name=mail],
    #catalog .section_inner .form input[name=mail02] {
        width: 100%;
        max-width: 100%;
        margin-right: 0;
    }
	
	.btn_catalog {
		width: 100%;
		bottom: 0;
    	right: 0;
	}
    
    footer {
		margin-bottom: 15vw;
    }
    footer.effect-scroll > img {
        object-position: center bottom;
    }
    footer .footer_top {
        z-index: 999;
        top: 90px;
    }
    footer .footer_enefarm_logo {
        position: absolute;
        bottom: 210px;
        width: 100%;
    }
    footer .footer_logo {
        height: 50px;
        bottom: 140px;
    }
    footer .footer_bottom p {
        font-size: 2.4vw;
    }
    footer .footer_bottom .footer_copyright {
        padding: 30px 30px;
        flex-wrap: wrap;
        height: auto;
    }
    footer .footer_bottom .footer_copyright p {
        width: 100%;
    }
	footer .footer_bottom .footer_copyright p.copyright {
		text-align: center;
	}
    
    
}
@media screen and (max-width: 640px) {
	.mainimg {
		height: calc(100vw + 280px);
	}
	.mainimg .mainconcept {
		font-size: 4.8vw;
	}
    .mainimg .mainconcept_img img.img_enefarm_txt {
        max-width: 80%;
    }
	#message .section_inner_L p,
	#message .section_inner_L p.message_txt {
		font-size: 3.2vw;
	}
	#message .section_inner_L p.message_txt span.size {
		font-size: 2.2vw;
	}
	#message .section_inner_R {
		height: 560px;
	}
    
    #about {
        padding-top: 65px;
    }
	#about .about_base {
		height: auto;
		padding-bottom: 65px;
        top: 90px;
	}
	#about .about_base h2 {
		font-size: 2.4vw;
		//padding: 30px;
		line-height: 0.6;
	}
    #about .about_base p img {
        margin-top: 30px;
    }
/*	#about .about_base h2 div span {
		font-size: 6.2vw;
	}
	#about .about_base h2:before,
	#about .about_base h2 div:before{
		height: 60px;
	}
	#about .about_base h2:after,
	#about .about_base h2 div:after {
		width: 60px;
	}*/
	#about .about_content h3 {
		font-size: 4.8vw;
	}
	#about .about_content div div p.sp {
		font-size: 3.8vw;
		margin-bottom: 0;
	}
	#about .about_content div div p.sp span {
		font-size: 6.8vw;
		margin-bottom: 15px;
	}
	#about .about_content div div p.sp img {
		width: 15%;
		padding: 0 20px 15px;
	}
    #about .about_content div div p {
        margin-bottom: 10px;
    }
    #about .about_content div div ol,
    #about .about_content div div p.note {
        padding: 0 20px;
    }
	#about .about_content div div ol li {
		font-size: 3.2vw;
    	margin-bottom: 5px;
	}
    #about .about_content div div ol li br.brsp {
        display: none;
    }
    
	#economy .section_inner {
		padding-top: 35px;
	}
    #economy .section_inner > p {
        padding: 0 30px;
        margin: 0 10px;
    }
	#economy h2 span {
		font-size: 5.2vw;
	}
	#economy h2 + p{
		font-size: 3.6vw;
	}
	#economy h2 p{
		font-size: 3.6vw;
	}
	#economy h3{
		font-size: 3.6vw;
	}
	#economy .graph02 .graph_img02 ul li,
    #economy .graph02 .graph_img02 ul li span,
    #environment .graph03 .graph_img02 ul li{
		font-size: 3.8vw;
        line-height: 1.2;
	}
    #environment .graph03 .graph_img02 ul li span{
		font-size: 2.8vw;
        line-height: 1.2;
	}
    #environment .graph03 .graph_img02 ul li:first-child {
        margin-left: 30px
    }
    #environment .graph03 .graph_img02 ul li:last-child {
        margin-right: 30px
    }
    #economy .graph02 .graph_img02 ul li span {
        font-size: 2.8vw;
    }
    
    #environment .section_inner {
        margin-bottom: 30px;
    }
	#environment .section_inner.bg {
		height: 100vw;
	}
	#environment .section_inner.bg div {
		bottom: 30px;
	}
	#environment .section_inner.bg h2,
	#environment .section_inner.bg p {
		margin-left: 30px;
	}
    #environment .section_inner h3 {
        font-size: 4.2vw;
        margin-bottom: 60px;
    }
    #environment .section_inner h3 span {
        font-size: 2.8vw;
    }
    #environment .section_inner .scroll-hint {
        margin-bottom: 10px;
        //background: #fff;
        padding: 10px;
    }
    #environment .section_inner .graph.js-scrollable p {
        text-align: left;
        font-size: 2.2vw;
    }
    #environment .section_inner > p {
        padding-left: 1.5em;
        padding-right: 0;
        margin: 0 10px;
        text-indent: -1.5em;
        font-size: 2.2vw;
    }
    #environment .section_inner .graph.graph04 ul li p,
    #environment .section_inner .graph.graph04 ul li p.bg_navy{
        font-size: 3.0vw;
    }
    #environment .section_inner .graph03 h4 {
        top: 45px;
    }
    
    #campaign {
        padding: 80px 0 85px;
    }
    #campaign .section_inner h2 {
        font-size: 5.2vw;
    }
    #campaign .section_inner .border {
        font-size: 3.2vw;
        margin-bottom: 35px;
        max-width: calc(100% - 30px);
    }
    #campaign .section_inner .campaign_box {
        max-width: calc(100% - 30px);
        padding: 0;
    }
    #campaign .section_inner .campaign_box .campaign_box_L,
    #campaign .section_inner .campaign_box .campaign_box_R {
        width: 100%;
    }
    #campaign .section_inner .campaign_box .campaign_box_L img,
    #campaign .section_inner .campaign_box .campaign_box_R img {
        max-width: 100%;
    }
    
    
	#resilience .section_inner {
		padding-top: 35px;
	}
	#resilience h2 {
		font-size: 5.2vw;
	}
	#resilience h3 {
		font-size: 4.2vw;
	}
	#resilience p {
		font-size: 3.0vw;
        margin-bottom: 20px;
	}
	#resilience .sp_indent p{
		font-size: 2.2vw;
        text-indent: -1.5em;
        margin-left: 1.5em;
	}
    #resilience .resilience_example div {
        font-size: 3.6vw;
    }
    #resilience .resilience_example div.line {
        width: calc(14.5vw - 15px);
    }
	#resilience .resilience_txt p {
		font-size: 2.0vw;
        text-indent: -1.5em;
        margin-left: 1.5em;
	}
    #resilience .resilience_time .fulltime div,
    #resilience .resilience_time .parttime div {
        font-size: 4.2vw;
        height: 40px;
    }
    #resilience .resilience_time .fulltime ul li,
    #resilience .resilience_time .parttime ul li {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        gap: 5px;
    }
    #resilience .resilience_time .fulltime ul li img,
    #resilience .resilience_time .parttime ul li img {
        padding-left: 0;
        max-width: calc(50% - 10px);
    }
    #resilience .resilience_time ul li span {
        font-size: 4.2vw;
    }
    #resilience .resilience_time .fulltime ul li p,
    #resilience .resilience_time .parttime ul li p {
        margin-bottom: 0;
        margin-right: 10px;
    }
	
	#recommend .section_inner_R {
		align-content: flex-start;
	}
	#recommend .section_inner_R .left {
		font-size: 3.2vw;
	}
	
	#setting p.lc4 {
		font-size: 3.2vw;
	}
	#setting h2 {
		font-size: 4.8vw;
		height: 70px;
		max-width: calc(100% - 60px);
        margin: 12px auto 22px;
	}
	#setting p {
		font-size: 3.0vw;
	}
	#setting .setting h3 {
		font-size: 3.6vw;
        height: 45px;
	}
	#setting .setting + p {
		font-size: 2.2vw;
        text-indent: -1.5em;
        margin-left: 1.5em;
	}
	#setting .setting .setting_label {
		width: 32%;
		font-size: 4.6vw;
        line-height: 1.6;
	}
	
	#introduction {
		padding: 35px 0;
	}
	#introduction .introduction_logo {
        margin-bottom: 30px;
    }
	#introduction .introduction_logo img {
		width: 25%;
	}
	#introduction .introduction_txt {
		font-size: 3.2vw;
    	margin-bottom: 20px;
	}
	#introduction .introduction_bnr {
		max-width: calc(100% - 60px);
	}
	#introduction .introduction_bnr .icon {
        top: 30px;
        right: 30px;
        width: 10%;
    }
	
	#qa {
		padding: 45px 0;
	}
	#qa h2 {
		margin-bottom: 15px;
        font-size: 12vw;
	}
    #qa h2 span {
        font-size: 10vw;
    }
    #qa dl {
        max-width: calc(100% - 30px);
        padding: 15px;
        margin-bottom: 15px;
    }
	#qa dl dt {
		font-size: 2.8vw;
        padding-left: 42px;
        height: 32px;
        letter-spacing: 2px;
	}
	#qa dl dd {
		font-size: 2.6vw;
        padding-left: 42px;
	}
    #qa dl dt:before, #qa dl dd:before {
        width: 32px;
        height: 32px;
    }
	
	#catalog h2 {
		font-size: 3.6vw;
	}
	#catalog p {
		font-size: 2.8vw;
	}
    #catalog > p + p,
    #catalog .section_inner {
        max-width: calc(100% - 30px);
    }
    #catalog .section_inner .privacypolicy {
        padding: 15px;
        margin-top: 15px;
    }
	#catalog .section_inner .privacypolicy h3 {
		font-size: 3.2vw;
	}
    #catalog > p + p {
		font-size: 2.2vw;
	}
	#catalog .section_inner .privacypolicy p {
		font-size: 2.4vw;
	}
    #catalog .section_inner .form,
    #catalog .section_inner .form_btn {
        padding: 15px 0 0;
        margin-top: 20px;
    }
	#catalog .section_inner .form p {
		font-size: 3.2vw;
	}
	#catalog .section_inner .form p span.size,
	#catalog .section_inner .form .form_inner p.size_exp{
		font-size: 2.0vw;
	}
	#catalog .section_inner .form .form_inner p,
    #catalog .section_inner .form p .req,
    #catalog .section_inner .form p .opt,
    #catalog .section_inner .privacypolicy p .req{
		font-size: 2.8vw;
	}
    #catalog .section_inner .form p .req,
    #catalog .section_inner .form p .opt,
    #catalog .section_inner .privacypolicy p .req{
        width: 40px;
        height: 20px;
	}
	#catalog .section_inner .form .form_inner p.checkbox {
		margin-top: 15px;
	}
    #catalog .section_inner .form input[name="yourname"],
    #catalog .section_inner .form input[name="yourname-ruby"],
    #catalog .section_inner .form input[name="address02"],
    #catalog .section_inner .form input[name="address03"],
    #catalog .section_inner .form input[name="gascompany"],
    #catalog .section_inner .form input[name=zip],
    #catalog .section_inner .form select,
    #catalog .section_inner .form input[name=telnumber],
    #catalog .section_inner .form input[name=mail],
    #catalog .section_inner .form input[name=mail02]{
        font-size: 2.8vw;
        margin-bottom: 10px;
    }
    #catalog .section_inner .form input[name=zip] {
        max-width: 40%;
    }
    #catalog .section_inner .form .form_inner p.red,
    #catalog .section_inner .form .checkbox .wpcf7-list-item-label,
	#catalog .section_inner .privacypolicy .checkbox .wpcf7-list-item-label {
        font-size: 3.2vw;
    }
    #catalog .section_inner .form input[type=checkbox],
	#catalog .section_inner .privacypolicy input[type=checkbox] {
        width: 24px;
        height: 24px;
        margin-bottom: 4px;
    }
    #catalog .section_inner .form_btn input {
        font-size: 4.2vw;
        width: 240px;
        height: 60px;
    }
    #catalog .section_inner .general_inquiries p {
        font-size: 3.8vw;
    }
    #catalog .section_inner .general_inquiries p span {
        font-size: 2.8vw;
    }
    #catalog .section_inner .general_inquiries a {
        font-size: 16px;
        display: inline-block;
        margin-top: 10px;
    }
    #catalog .section_inner .general_inquiries a:before {
        width: 20px;
        height: 20px;
    }
    #catalog .section_inner .general_inquiries a:after {
        border: 4px solid transparent;
        border-left-width: 7px;
        border-left-color: #fff;
    }
	
	footer {
		height: 600px;
	}
	footer .footer_inner {
		position: absolute;
		top: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-content: stretch;
        align-items: flex-end;
        height: 100%;
	}
	footer .footer_top,
	footer .footer_enefarm_logo,
	footer .footer_logo,
	footer .footer_bottom {
		position: relative;
		top: auto;
        bottom: auto;
	}
	footer .footer_top p {
		font-size: 3.6vw;
    	margin: 110px 0 180px;
	}
	footer .footer_enefarm_logo {
		margin-bottom: 30px;
	}
	footer .footer_logo { 
	}
	footer .footer_logo img {
        width: auto;
        height: 19px;
    }
    footer .footer_bottom {
	}
    footer .footer_bottom .footer_copyright {
        position: unset;
        padding: 15px 15px 25px;
	}
    footer .footer_bottom .footer_copyright .copyright {
        margin-top: 5px;
        line-height: 1.4;
    }
	
	
	#environment .graph03 .graph03_01 .graph_img > div div {
		max-width: 100%;
	}
	
	
	
	
}
@media screen and (max-width: 480px) {
    .mainimg {
        height: calc(100vw + 180px);
        padding-bottom: 120px;
    }
    .mainimg .mainconcept{
        letter-spacing: 4px;
    }
    .mainimg .mainconcept_img {
        bottom: 30px;
    }
    .mainimg .mainconcept_img img.img_enefarm {
        margin-bottom: 30px;
    }
    
    section .section_name,
    #economy .section_name{
        top: 20px;
        left: 30px;
    }
    
    #topic .section_inner p.center img {
        max-width: 100%;
        height: auto;
    }
    #topic .section_inner .topic_box .topic_box_inner_L div:nth-child(2) {
        letter-spacing: -5px;
    }
    
    #message .section_inner_L ul {
        width: 33%;
        font-size: 4.8vw;
    }
    #message .section_inner_R {
        height: 420px;
    }
    #message .section_inner_L p img {
        max-width: 35%;
    }
    
    #about {
        padding-top: 60px;
    }
    #about .about_base h2 {
        //padding: 20px 10px;
        line-height: 0;
        max-width: calc(100% - 120px);
    }
    /*#about .about_base h2 div span {
        font-size: 5.2vw;
    }
    #about .about_base h2:before, #about .about_base h2 div:before {
        height: 40px;
    }
    #about .about_base h2:after, #about .about_base h2 div:after {
        width: 40px;
    }
    #about .about_base h2:before {
        top: -10px;
    }
    #about .about_base h2:after {
        left: -10px;
    }
    #about .about_base h2 div:before {
        bottom: -10px;
    }
    #about .about_base h2 div:after {
        right: -10px;
    }*/
    #about .about_content img.img_enefarm {
        max-width: 41%;
    }
    #about .about_content div {
        margin-top: 15px;
    }
    
    #economy .js-scrollable .graph01,
    #economy .js-scrollable .graph01 + img,
    #environment .section_inner .graph.js-scrollable {
        width: 640px;
        max-width: 640px;
    }
    #economy .section_inner p.black.center {
        margin: 0;
		text-align: left;
        box-sizing: border-box;
    }
    #economy .js-scrollable .graph01 + img {
        margin-bottom: 20px;
    }
    
    #environment .section_inner .graph03 h4 {
        top: 25px;
    }
	#environment .graph03 .graph_img{
	}
	#environment .graph03 .graph03_01 .graph_img > div {
	}
    #economy .graph02 .graph_img img,
	#environment .graph03 .graph_img img {
        width: 120px;
        left: auto;
        right: 13px;
	}
    #environment .graph03 .graph_img02 ul li {
        width: 50%;
    }
    #environment .section_inner .graph.graph04 ul {
        flex-wrap: wrap;
        margin-top: 40px;
    }
    #environment .section_inner .graph.graph04 ul li,
    #environment .section_inner .graph.graph04 ul li:last-child{
        width: calc(50% - 10px);
        padding-top: 10px;
    }
    #environment .section_inner .graph.graph04 ul li img{
        padding: 5px 15px 5px;
        box-sizing: border-box;
    }
    #environment .section_inner .graph.graph04 ul li img:last-child,
    #environment .section_inner .graph.graph04 ul li:last-child img{
        padding: 0;
    }
    #environment .section_inner h4 {
        left: 0;
        padding: 10px 20px;
    }
    #environment .section_inner .graph04 h4 {
        padding: 10px 20px;
    }
    #environment .section_inner .graph.graph04 ul li p {
        height: 60px;
    }
    
    #resilience h2,
    #resilience h3{
        line-height: 1.6;
    }

    #campaign {
        padding: 60px 0 35px;
    }
    #campaign .section_inner .bg_white {
        margin-bottom: 35px;
    }
    #campaign .section_inner .campaign_box .campaign_box_L .gold {
        justify-content: space-around;
    }
    #campaign .section_inner p.center {
        font-size: 3.2vw;
    }
    
    /*footer {
        height: 650px;
    }
    footer .footer_bottom {
        padding: 10px;
    }*/
    
}
@media screen and (max-width: 375px) {
    #topic {
        padding: 20px;
    }
   #topic .section_inner .topic_box .topic_box_inner_L div:nth-child(2) {
    font-size: calc(var(--fs) * 0.1vw);
   }
    
    
    
	
}
@media screen and (min-aspect-ratio: 16/9) {
    .mainimg .mainconcept {
        top: 10%;
    }
    .mainimg .mainconcept_img {
        bottom: 25px;
    }
    .mainimg .mainconcept_img img.img_enefarm {
        width: auto;
        max-width: auto;
        height: 30vh;
        max-height: 30vh;
        margin-bottom: 30px;
    }
    .mainimg .mainconcept_img img.img_enefarm_txt {
        width: auto;
        height: 23px;
    }
    #about .about_base h2 {
        margin: 0 auto;
    }
    #about .about_base h2 img {
        max-height: 20vh;
    }
    #about .about_base, #about .about_content {
        top: 0;
    }
    #about .about_base p img {
        max-width: calc(100% - 120px);
        width: auto;
        max-height: 50vh;
    }
    #about .about_content {
        padding: 60px;
    }
    #about .about_content img.img_enefarm {
        
    }
    
    
}