@charset "utf-8";

@media screen and (max-width: 1240px) {

	.service-flow-top-item{
	font-size: 1.85rem;
	letter-spacing: 1.25px;
	}

	.service-flow-top-item:nth-child(1) {
        padding-left: 8px;
	}

	.service-flow-top-item::after {
    border: 47px solid transparent;
	}

	.service-flow-top-item::before {
    border-left: 17px solid transparent;
	}

	.service-flow-top-item:nth-child(2)::before {
    border-top: 67px solid #5BCFA5;
    border-bottom: 68px solid #5BCFA5;
	}

	.service-flow-top-item:nth-child(3)::before {
    border-top: 67px solid #47C39D;
    border-bottom: 68px solid #47C39D;
	}

	.service-flow-top-item:nth-child(4)::before {
    border-top: 67px solid #35B895;
    border-bottom: 68px solid #35B895;
	}

	.service-flow-top-item:nth-child(5)::before {
    border-top: 67px solid #1DAB8C;
    border-bottom: 68px solid #1DAB8C;
	}

	.service-flow-top-item:nth-child(6)::before {
    border-top: 67px solid #009A80;
    border-bottom: 68px solid #009A80;
	}

}


@media screen and (max-width: 959px) {



.video_wrapper > video {
    position: relative;
    top: 35%;
    left: 0;
    transform: translateX(0%) translateY(0%);
    width: 100vw;
    height: auto;
}

.video_wrapper > iframe {
    position: relative;
    top: 35%;
    left: 0;
    transform: translateX(0%) translateY(0%);
    width: 100vw;
    height: 55vw;
}



.nav{
	display: block;
	overflow: visible;
	}

/* ハンバーガーアイコンの設置スペース */
.drawer_open {
  display: flex;
  height: 60px;
  width: 60px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 100;/* 重なり順を一番上にする */
  cursor: pointer;
}

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #00a384;
  transition: 0.5s;
  position: absolute;
}

/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
  bottom: 8px;
}

/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
  top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
  background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
  bottom: 0;
  transform: rotate(45deg);
}

#drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-45deg);
}
  
/* メニューのデザイン*/
.nav_content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 100%; /* メニューを画面の外に飛ばす */
  z-index: 99;
  background: #fff;
  transition: .5s;
}

/* メニュー黒ポチを消す */
.nav_list {
  list-style: none;
  margin-top: 72px;
}

.nav_item{
	padding: 8px 0;
	color: #00a384;
}

#drawer_input:checked ~ .nav_content {
  left: 0;/* メニューを画面に入れる */
}

	body{
		max-width:none;
		width: 100vw;
	}

	h1,h2,h3{
		line-height: 1.7;
        text-align: left;
	}

    h2{
       font-size: 2.7rem; 
    }

	p{
		line-height: 2;
		margin: 5px 0;
        text-align: left;
        padding: 12px;
	}

	footer {
    padding: 7% 10%;
	}

	.footer_content{
		margin-top: 20px;
	}


	.sp-none{
	overflow: hidden;
	display: none;
	}


	.pc-none{
	overflow: visible;
	display: inline;
	}

	.br-sp{
	display: inline;
	overflow: visible;
	}

    .br-pc{
    display: none;
    overflow: hidden;
    }

	.main {
    margin: 90px auto 0;
	}


	.top-first {
    margin: 90px auto 0;
	}

    .top-first-video{
    margin: 5% auto 0;
    }

	section{
		width: 95vw;
		min-width: 0;
		margin: 8px auto;
 	   padding: 8px 0;
	}

	.pc_navigation{
		display: none;
		visibility: hidden;
	}

	.logo img{
		width: 100%;
	}

	.header_container {
    padding: 8px;
    align-items: center;
    flex-wrap: nowrap;
	}

	.top-first{
		display: block;
	}

	.top-first-sentence h1 {
		margin-top: 0px;
		font-size: 7.3vw;
	}

	.top-first-sentence p{
		font-size: 5.6vw;
	}

	    .top-first div {
        width: 100%;
        height: auto;
    }

	.top-about-first{
		height: auto;
	}

	.top-about-first-child {
	position: relative;
    top: 0;
    left: 0;
    padding-top: 15%;
	transform: translate(0%, 0%); 
	width: 100%; 
    text-align: center;
	}

	.top-about-first-child p{
		margin-top: 25%;
        text-align: left;
	}

	.top-about-first:before {
    content: "";
    display: none;
	}

	.top-about-menu {
    display: block;
	}

	.top-about-menu-item{
		width: 100%;
	}

	.top-about-menu-item h3 {
    padding-left: 12px;
}

.top-about-menu-item p {
    min-height: 0;
}

.flow-img {
    flex-wrap: wrap;
    padding: 12px;
}


.flow-img-item {
    width: 40%;
    padding: 4px;
    font-size: 1.6rem;}

.flow-sentence-item {
    width: 100%;
    font-size: 1.8rem;
}

.top-FirstSolarPower h2{
	line-height: 1.3;
	padding-left: 42px;
    background-size: 10%;
}

.top-FirstSolarPower div{
	display: block;
	text-align: center;
}

.top-FirstSolarPower img{
	width: 100%;
}

.top-FirstSolarPower p {
    width: 100%;
    text-align: left;
    box-sizing: border-box;
}

.top-sdgs-headline {
    width: 90%;
    margin: 32px auto;
}

.top-sdgs-sentence {
    display: block;
}

.top-sdgs-item {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
 }

 .top-sdgs-item-img {
    width: 50%;
    margin-bottom: 16px;
}

 .top-sdgs-item img {
    width: 100%;
}

.top-sdgs-item-text{
    width: 100%;
}

.top-sdgs-item p{
    padding: 0;
}

.top-news-sentence-item {
    display: block;
    text-align: center;
    padding-bottom: 20px;
    border-bottom: solid 2px #20bbaa77;
}


.top-news-sentence-item img {
    width: 75%;
}


.top-news-sentence-item div {
    width: 100%;
    text-align: left;
}

.top-news-sentence-category{
	font-size: 1.4rem;
    padding: 2px 11px 4px;
    margin: 0 3px;
}

.top-news-viewmore {
    padding: 0px 0;
}

.top-contact {
    display: block;
}


.top-about-first-child h2{
    font-size: 2.4rem;
}


.about-headline {
    width: 95vw;
    padding: 40px 18px;
    margin-top: -180px;
    box-sizing: border-box;
}


.about-first-sentence, .solar-first-sentence{
    top: 0%;
    left: 3%;
    width: 92%;
}

.about-first-sentence p, .about-first-sentence p{
	font-size: 4.5vw;
}

.about-headline h2 {
    font-size: 5.6vw;
}


.about-merit-sentence {
	display: block;
}

.about-merit-item {
    width: 100%;
    display: block;
    text-align: center;
}

.about-merit-item p {
    width: 100%;
    text-align: left;
}

.about-merit-item img {
    width: 40%;
}

.about-merit-item {
    padding: 12px;
}

.about-subcontent {
	display: block;
}

.about-subcontent div {
    width: 100%;
}

.about-companyinfo {
    width: 95vw;

   }

.top-companyinfo-item td{
  width:100%;
  display:block;
  padding: 5px 0;
  line-height: 1.7;
}

.top-companyinfo-item td:nth-child(1) {
    padding-right: 0;
    border: none;
    font-weight: 600;
}

.about-companyinfo {
    padding: 38px 8px 120px;
    box-sizing: border-box;
}


.structure-mainimg {
    width: 90%;
}

.structure-picture {
    display: block;
}

.structure-picture-item {
    width: 85%;
    min-width: 0;
    margin: 0 auto;
    padding-bottom: 40px;
}


.solar-chronology-list{
	
    width: 85vw;
    min-width: 0;
    margin: 0 auto;
}


.solar-chronology-list td{
  width:100%;
  display:block;
  padding: 16px 0;
  line-height: 1.7;
  border-bottom: solid 2px #20bbaa77;
}

.solar-chronology-list td:nth-child(1) {
    padding-right: 0;
    border: none;
}


.solar-merit-item {
    display: block;
    position: relative;
    width: 90%;
    background-color: #ecf5f3;
    margin: 80px auto;
    text-align: center;
}


.solar-merit-item img {
    width: 60%;
    margin: 16px auto;
}

.solar-merit-item:nth-child(2),.solar-merit-item:nth-child(3),
.solar-merit-item:nth-child(4), .solar-merit-item:nth-child(5), 
.solar-merit-item:nth-child(6), .solar-merit-item:nth-child(7) {
    padding: 5px;
    right: 0;
    left: 0;

}

.solar-merit-item-text {
    width: 95%;
    margin: 0 auto;
}

.solar-first, .solar-structure, .solar-chronology, .solar-merit, .solar-demerit{
	width: 95vw;
	box-sizing: border-box;
}

.solar-merit-item-text div {
    text-align: left;
    top: 0; 
}

.top-companyinfo-list ul li {
    font-size: 5.1vw;
}


.service-flow-top {
    flex-wrap: wrap;
        justify-content: space-around;
        
}

.service-flow-top-item {
    width: 42%;
    font-size: 1.8rem;
    padding: 8px 0;
	margin-bottom: 8px;
	    line-height: 2;
        text-align: left;
        min-height: 88px;
        padding: 8px 8px 8px 10px;
}

.service-flow-top-item::after {
    border: 47px solid transparent;
}




.service-flow-top-item:nth-child(2)::before {
    border-top: 44.5px solid #5BCFA5;
    border-bottom: 44.5px solid #5BCFA5;
}


.service-flow-top-item:nth-child(3)::before {
    border-top: 44.5px solid #47C39D;
    border-bottom: 44.5px solid #47C39D;
}


.service-flow-top-item:nth-child(4)::before {
    border-top: 44.5px solid #35B895;
    border-bottom: 44.5px solid #35B895;
}


.service-flow-top-item:nth-child(5)::before {
    border-top: 44.5px solid #1DAB8C;
    border-bottom: 44.5px solid #1DAB8C;
}


.service-flow-top-item:nth-child(6)::before {
    border-top: 44.5px solid #009A80;
    border-bottom: 44.5px solid #009A80;
}


.service-flow-top-item::before {
    border-left: 17px solid transparent;
}

.service-flow-item {
    display: block;
}

.service-flow-item-child {
    width: 100%;
}

.service-flow-item-child div {
	margin-top: 10px;
    width: 36%;
    margin: 10px auto;
}


.service-flow-item-child p {
    width: 73%;
}

.service-price-item {
    width: 95%;
}

.service-price-item h3 {
    padding: 10px;
}


.service-price-item ul {
    box-sizing: border-box;
    padding: 0;
    width: 100%;
}

.service-price-item ul li {
    padding-left: 0;
}


.service-price-item ul li:before {
    left: 30px;
}

.service-price-item h4 {
    width: 90%;
}

.service-price-item div {
    width: 100%;
    margin: -20px auto 8px;
    padding: 28px 12px 12px;
    text-align: left;
    flex-wrap: wrap;
}

.service-price-item img {
    text-align: center;
    width: 90%;
}

.form-item {
    display: block;
}

.form-item-label {
    width: 100%;
}

.form-item-input input{
	max-width: 85vw;
}

.form-item-input {
    width: 90%;
}

.help-headline p{
	font-size: 1.8rem;
}

.about-greeting {
    padding: 32px 12px;
    margin: 32px auto;
}

.top-contact h2 {
    width: 100%;
    padding: 20px 24px;
    margin: 0;
    aspect-ratio: auto;
    font-size: 7vw;
    box-sizing: border-box;
    margin-bottom: 16px;
}

.top-contact-item {
    padding: 12px;
    width: 48%;
}


.top-contact-item p {
    font-size: 1.8rem;
}

.top-contact-menu {
    width: 100%;
    }

.top-contact-item-sns p{
    height: 100%;
    width: 100%;
    padding: 0;
    top: 0;
    vertical-align: middle;
}

.top-contact-item-sns {
    padding: 0;
}

.top-contact-item-sns img {
    width: 20%;
    top: 0;
    height: 100%;
    left: 0;
    padding: 0 8px;
}



.structure-mainText {
    width: fit-content;
    padding: 16px;
}


.solar-first-sentence p{
    width: 100%;
}


.about-merit-sentence h3 {
    font-size: 2rem;
}

.structure-second-Text {
    width: 90%;
}


.service-first-sentence {
    left: 3%;
    width: 95%;
}

.service-flow-top-item:nth-child(5) {
    width: 48%;
}

#solar-datutansomerit .structure-mainText {
    text-align: center;
    line-height: 1.5;
    margin: 8px auto;
}

.tansomerit img, .tansodemerit img {
    width: 25%;
    margin-top: 16px;
}


.about-greeting-signature-wrap{
    width: 95%;
}


.about-greeting-signature-wrap img{
    padding-right: 0;
}

.service-flow-period div, .service-flow-period-2nd div{
    display: none;
    visibility: hidden;
    height: 0;
}

.service-price-list td:nth-child(1){
    margin: 0;
}

.service-price-list td {
    display: block;
    width: auto;
}

.service-price-list {
    width: 100%;
}

.service-price-item-wrap img {
    width: 100%;
    top: 0;
    position: relative;
}

.carbon-sdgs img {
    width: 100%;
}


.top-denergy h2 {
    color: #00a384;
    border: dotted 6px #00a384;
    width: 95%;
    text-align: center;
    margin: 16px auto;
    padding: 24px 0px;
    box-sizing: border-box;
    font-size: 2rem;
}

.top-denergy-wrap {
    width: 95%;
}

.top-denergy-wrap-img, .top-denergy-wrap-text {
    width: 100%;
}


.service-denergy-sentence {
    width: 95%;
    margin: 16px auto;
}

.service-denergy-sentence h2 {
    width: 95%;
    padding: 10px 0 0 10px;
}

.service-denergy-sentence h2 img {
    width: 24px;
    padding: 10px 0px 0 10px;
}

.service-denergy-wrap,.service-denergy-img {
    width: 95%;
    padding: 0;
    margin: 0 auto;
    flex-wrap: wrap;
}

.service-denergy-wrap .service-denergy-img {
    width: 60%;
    padding: 24px 0 8px;
}

.service-denergy-wrap div {
    padding: 24px 0px;
}

.service-shisetu h2 {
    width: 95%;
    margin: 16px auto;
}

.service-shisetu-wrap {
    width: 95%;
}

.service-shisetu-img{
    width: 100%;
}

.service-shisetu-wrap p {
    margin-top: -8px;
    padding-top: 0;
    padding-bottom: 16px;
    text-align: center;
}

.top-denergy-wrap-text p {
    padding: 36px 18px;
}


.post-content .wp-block-post-featured-image img{
    width: 100%;

}

