@charset "utf-8";

/*
body{
	background-image: url(../img/bk_dot.png);
}

#y_main {
    padding-top: 20px;
    position: relative;
}
@media only screen and (max-width: 640px) {
#y_main {
    padding-top: 40px;
    position: relative;
}
}
*/


html {
    scroll-behavior: smooth;
}
.fade {
	opacity: 0;
	transform: translateY(-30px);
	transition: opacity 1.5s, transform 1s;
}.fade.active {
	opacity: 1;
	transform: translateY(0px);
}


.zen-maru-gothic-light {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 300;
  font-style: normal;
}

.zen-maru-gothic-regular {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 400;
  font-style: normal;
}

.zen-maru-gothic-medium {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 500;
  font-style: normal;
}

.zen-maru-gothic-bold {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 700;
  font-style: normal;
}

.zen-maru-gothic-black {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 900;
  font-style: normal;
}


body{
	position:relative
}

#main_wrapper{
	position:relative;
	overflow:hidden;
	margin-bottom:0;
}
#wrapper{
	padding:0;
	margin:0;
}

a {
	text-decoration: none;
	color:inherit
}

img[src$=".svg"] {
	width:100%;
	max-width:100%;
}
img{
	max-width:100%;	
}
li{
	list-style: none;
	}
span.inb{
	display: inline-block;
}


ul{
	list-style-type: disc;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0px;
}
h4 {
    display: block;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

.pc_tac{
	text-align: center;
}
@media only screen and (max-width: 640px) {
.pc_tac{
	text-align: left;
}
}


.cont_txt{
	font-weight: 600;
	font-size:0.9em;
	line-height:1.6;
	padding:1em;
}
@media only screen and (max-width: 640px) {
	
}



header{
	position: fixed;
	width:100%;
	z-index: 99;
	margin-top:-10px;
}
header .inner{

}

.head_box1{
	background-color: #008D0F;
	width:100%;
	padding:5px;
	border-bottom:solid 16px #B8D200;
}


@media only screen and (min-width: 1001px) {
.head_box1{
	background-image:
	url(../img/bk_o_ashiato4.svg),
	url(../img/bk_o_ashiato.svg),
	url(../img/bk_o_ashiato2.svg),
	url(../img/bk_o_ashiato3.svg);
	background-repeat: no-repeat;
	background-position:
	top 10px left -10px,
	top -20px left 100px,
	top -80px right 100px,
	top 0px right 0px;
	background-size:
	 7%,
	 29%,
	 29%,
	 12%;
}	
}

@media only screen and (max-width: 1000px) {
.head_box1{
	background-image:
	url(../img/bk_o_ashiato4.svg);
	background-repeat: no-repeat;
	background-position:bottom -1px left -10px;
	background-size:
	 18%
}	
}


.main_logo{
	max-width:300px;
	width:64%;
	padding:0 20px;
	margin:10px auto 0px auto;
}
@media only screen and (max-width: 640px) {
.main_logo{
	max-width:300px;
	width:70%;
	padding:8px 40px 2px 30px;
	margin:10px auto 0px auto;
}	
}

@media only screen and (max-width: 514px) {
.main_logo{
	max-width:300px;
	width:60%;
	padding:8px 70px 2px 30px;
	margin:10px auto 5px auto;
}	
}



.pc_menu{
	width:100%;
	display: flex;
	margin-top:-1px;
}
@media only screen and (max-width: 1125px) {
.pc_menu{
	display: none;
}
}
.pc_menu li{
	display: flex;
	align-items: center;
	width:12.5%;
	list-style: none;
	font-size:0.9em;
	padding:0 5px 5px 5px;
}

.pc_menu li.bt_toiawase{
	width:7.3%;	
}



.pc_menu a{
	display: flex;
	width:100%;	
	padding:8px;
	background-color: #FFFFFF;
	border-left:solid 6px #B8D200;
	border-bottom:solid 6px #B8D200;
	border-right:solid 6px #B8D200;
	border-radius: 0 0 15px 15px;
	position: relative;
}
.pc_menu li div.bl_line{
	color:#654810;
	font-weight: 600;
	width:100%;
	padding:10px 0;
	text-align: center;
}

.pc_menu a:hover{
	background-color: #008D0F;	
}
.pc_menu a.act{
	background-color: #008D0F;	
}
.pc_menu a .menu_txt{
	position: relative;
}
.pc_menu a .menu_txt{
	position: relative;
}
.pc_menu a .menu_txt .menu_txt_wimg{
	position: absolute;
	left:0;
	top:0;
	width:100%;
	opacity: 0;
}
.pc_menu a .menu_txt{
	width:100%;
	}
.pc_menu a:hover .menu_txt .menu_txt_wimg{
	opacity: 1;
}

.pc_menu a.act .menu_txt .menu_txt_wimg{
	opacity: 1;
}

.menu_c{
	position: absolute ;
	width:100%;
	top:-2.1em;
	text-align: center;
	left:0;
}
.menu_c img{
	margin:0 auto;
	width:3em;
}

.head_x_bt{
	width:30%;
	max-width:240px;
	position: absolute;
	right:0;
	top:10px;
	
}
.head_x_bt img{
	max-width:100%;
	width:100%;
}
@media only screen and (max-width: 1124px) {
.head_x_bt img{
	display: none;
}
}




a.bt_kaeru:hover{
	opacity: 0.5;
}
.bt_kaeru div{
	width:60%;
	max-width:240px;
	background-color: #008D0E;
	border-radius: 100px;
	border:2px solid #fff;
	margin:2em auto;
	position: relative;
	color:#fff;
	text-align: center;
	font-weight: 600;
}
.bt_kaeru img{
	position: absolute;
	max-width:3em;
	left:-1em;
}


/*
================================================================================
*/


/* メインここから */



#s1{
	position: relative;
	padding-top:120px;
	background-color: #94D3FF;
	background-image: url(../img/bk_sky.svg);
	background-repeat: no-repeat;
	background-position: top 140px;
}
#s1 .inner{
	max-width:1200px;
	margin:0 auto;
}

@media only screen and (max-width: 1000px) {
#s1 .inner{
/*
white-space: nowrap;
overflow-x: scroll;
*/
min-width:100px;
position: relative;
/* min-height: 800px; */
}
#s1 .inner2{
min-width:700px;
padding:0px 0px;
}

#s1 .inner::-webkit-scrollbar{
  display:none;
}
}

@media only screen and (max-width: 640px) {
#s1 .inner{
/*
white-space: nowrap;
overflow-x: scroll;
*/
padding-top:200px;
margin-top:-200px;
overflow: scroll;
min-width:100px;
position: relative;
/* min-height: 800px; */
}
#s1 .inner2{
min-width:800px;
padding:0px 100px;
}

#s1 .inner::-webkit-scrollbar{
  display:none;
}
}










#s1 .m1{
	width:100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	z-index: 1;
}
.main_map .map_bt:hover .map_bt_img{
	opacity: 0.5;
}

.main_map{
	box-sizing: content-box;
	width:100%;
	margin:20px auto;
	position: relative;
}
.map_bk_obj{
	position: relative;
	width:100%;
}

.map_bk_obj div{
	position: absolute;
}

.map_bk_obj .bk_clowd1{
	top:-3vw;
	left:-3vw;
	width:300px;
	max-width:30%;
	z-index: 4;
}
@media only screen and (max-width: 1361px) {
.map_bk_obj .bk_clowd1{
	display: none;
/*
	top:1vw;
	left:-1vw;
	width:340px;
	max-width:30%;
	z-index: 4;
*/
}	
}

.map_bk_obj .bk_clowd2{
	top:-1vw;
	left:19vw;
	width:100px;
	max-width:30%;
}
/*
@media only screen and (max-width: 640px) {
.map_bk_obj .bk_clowd2{
	display: none;
}	
}
*/


.map_bk_obj .bk_clowd3{
	top:-14vw;
	right:-100px;
	width:580px;
	max-width:50%;
	opacity: 0.8;
}
@media only screen and (max-width: 640px) {
.map_bk_obj .bk_clowd3{
	top:-26vw;
	right:-88vw;
	width:580px;
	max-width:70%;
	opacity: 0.8;
}	
}



.map_bk_obj .main_island1{
	top: 12vw;
    left: -4vw;
    width: 300px;
    max-width: 12%;
}
.map_bk_obj .main_island2{
	top:20vw;
	left:-11vw;
	width:300px;
	max-width:12%;
}
.map_bk_obj .main_island3{
	top:15vw;
	right:-7vw;
	width:300px;
	max-width:12%;
}

@media only screen and (max-width: 640px) {
.map_bk_obj .main_island1{
	top: 20vw;
    left: 14vw;
    width: 300px;
    max-width: 30%;
}
.map_bk_obj .main_island2{
	top:36vw;
	left:3vw;
	width:300px;
	max-width:30%;
}
.map_bk_obj .main_island3{
	top:15vw;
	right:-93vw;
	width:300px;
	max-width:30%;
}	
}



/* 吹き出しここから */

.swich_setting {
  display: none; /* チェックボックスを非表示に */
}
.tooltip { /* 補足説明するテキストのスタイル */
  position: relative;
  cursor: pointer;
  padding: 0 5px;
  font-size: 0.9em;
  color: #4682b4;
}
.description {
  width: 200%; /* 横幅 */
  max-width:150%;
/*   position: absolute; */
  top: 0%; /* Y軸の位置 */
  left: 0%;
  transform: translateX(-50%);
/*   margin-top: -10%;  *//* テキストとの距離 */
/*   margin-left: -60px; */
  padding: 0px;
  text-align: center;
  visibility: hidden; /* ツールチップを非表示に */
  opacity: 0; /* 不透明度を0％に */
  z-index: 1;
  transition: 0.4s all; /* マウスオーバー時のアニメーション速度 */
  z-index:90;
}
.swich_setting:checked + .tooltip .description{ /* チェック時のスタイル */
  top: 100%;
  visibility: visible;
  opacity: 1;
}


.main_map .map_bt{
	position: absolute;
}
.main_map .map_f_saikustu{
	top:27%;
	left:30%;
	width:7%;
}
.main_map .map_f_saikustu .description {
  top: 0%; /* Y軸の位置 */
  left: 0%;
  transform: translateX(-50%);
  margin-top: -150%; /* テキストとの距離 */
  margin-left: -40px;
  max-width:170%;
}


.main_map .map_f_seitetsu{
	top:53%;
	left:13%;
	width:7%;
}
.main_map .map_f_seitetsu .description {
  top: 0%; /* Y軸の位置 */
  left: 0%;
  transform: translateX(-50%);
  margin-top: -150%; /* テキストとの距離 */
  margin-left: -40px;
   max-width:170%;
}

.main_map .map_f_seikan{
	top:54.5%;
	left:32%;
	width:8%;
}
.main_map .map_f_seikan .description {
  top: 0%; /* Y軸の位置 */
  left: 0%;
  transform: translateX(-50%);
  margin-top: -150%; /* テキストとの距離 */
  margin-left: -40px;
  z-index: 90;
}


.main_map .map_f_jyuten{
	bottom:18%;
	left:21.5%;
	width:8%;
}
.main_map .map_f_jyuten .description {
  top: 0%; /* Y軸の位置 */
  left: 0%;
  transform: translateX(-50%);
  margin-top: -150%; /* テキストとの距離 */
  margin-left: -40px;
}



.main_map .map_f_syusyu{
	bottom:29%;
	left:42.5%;
	width:7%;
}
.main_map .map_f_syusyu .description {
  top: 0%; /* Y軸の位置 */
  left: 0%;
  transform: translateX(-50%);
  margin-top: -200%; /* テキストとの距離 */
  margin-left: 200%;
  max-width: 160%;
}


.main_map .map_f_fes{
	bottom:27%;
	right:29.5%;
	width:9.7%;
}
.main_map .map_f_fes .description {
  top: 0%; /* Y軸の位置 */
  left: 0%;
  transform: translateX(-50%);
  margin-top: -180%; /* テキストとの距離 */
  margin-left: 100%;
  max-width:130%;
}


.main_map .map_f_recycle{
	top:34%;
	right:33.5%;
	width:10.5%;
}
.main_map .map_f_recycle .description {
  top: 0%; /* Y軸の位置 */
  left: 0%;
  transform: translateX(-50%);
  margin-top: -108%; /* テキストとの距離 */
  margin-left: 180%;
    max-width: 120%;
}

.main_map .map_f_recyclebox{
	top:36.3%;
	right:9%;
	width:12%;
}
.main_map .map_f_recyclebox .description {
  top: 0%; /* Y軸の位置 */
  left: 0%;
  transform: translateX(-50%);
  margin-top: -108%; /* テキストとの距離 */
  margin-left: 60%;
  width:110%;
}


.main_map .map_f_vending{
	bottom:32.5%;
	right:10%;
	width:9.2%;
}
.main_map .map_f_vending .description {
  top: 0%; /* Y軸の位置 */
  left: 0%;
  transform: translateX(-50%);
  margin-top: -148%; /* テキストとの距離 */
  margin-left: 140%;
  max-width:130%;
}

.main_map .map_f_youkoso{
	top:19%;
	left:46.5%;
	width:9.2%;
}
.main_map .map_f_youkoso .description {
  top: 0%; /* Y軸の位置 */
  left: 0%;
  transform: translateX(-50%);
  margin-top: -100%; /* テキストとの距離 */
  margin-left: -80%;
}










/* 吹き出し部分ここまで */











.top_kan{
	width:20%;
	max-width:150px;
	position: relative;
	margin:-140px auto 0 auto;
	z-index:4;
}
@media only screen and (max-width: 1000px) {
.top_kan{
	width:16%;
	max-width:150px;
	position: relative;
	margin:-160px auto 0 auto;
}
}
@media only screen and (max-width: 640px) {
.top_kan{
	width:22%;
	max-width:150px;
	position: relative;
	margin:-140px auto 0 auto;
}
}




.top_kan .kan1{
	position: absolute;
	top:0;
	left:0;
}
.top_kan .kan_k{
	position: absolute;
	top:0px;
	left:0;
}






.m_welcome{
	width:35%;
	max-width:600px;
	position: absolute;
	top:200px;
	right:1em;
	z-index:5;
}

@media only screen and (max-width: 1000px) {
.m_welcome{
	width:38%;
	max-width:600px;
	position: absolute;
	top:14vw;
	right:1em;
	z-index:5;
}	
}

@media only screen and (max-width: 640px) {
.m_welcome{
	width:100%;
	max-width:98%;
	position: relative;
	padding:1em;
	top:0px;
	left:0px;
	z-index:5;
	margin-top:-1em;
}	
}



.slide-bottom {
	-webkit-animation: slide-bottom 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-bottom 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2024-4-26 11:37:23
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-bottom
 * ----------------------------------------
 */
@-webkit-keyframes slide-bottom {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
}
@keyframes slide-bottom {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
}

.pyon01 {
  animation: pyon01 4s ease-in-out infinite;
}
@keyframes pyon01 {
  0% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(0, -5px);
  }
  20% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}


.bikkuri01 {
  animation: bikkuri01 4s both infinite;
}
@keyframes bikkuri01 {
  100%,
    60%,
    35%,
    25%,
    0% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-6px);
    }
    40% {
        transform: translateY(-6px);
    }
}




.shake-top {
	-webkit-animation: shake-top 6s cubic-bezier(0.455, 0.5, 0.515, 0.9) infinite both;
	        animation: shake-top 6s cubic-bezier(0.455, 0.5, 0.515, 0.9) infinite both;
}

/* ----------------------------------------------
 * Generated by Animista on 2024-4-26 13:26:8
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation shake-top
 * ----------------------------------------
 */
@-webkit-keyframes shake-top {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
  }
  5% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
  75% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
}
@keyframes shake-top {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
  }
  25% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
  }
  75% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
}



/* リサイクルボックス アニメーションここから */


.map_ani_o_recyclebox{
	position: absolute;
	width:4.8%;
	right:20.8%;
	top:38%;
}

.wobble-hor-bottom{
	-webkit-animation:wobble-hor-bottom 6s infinite;animation:
	wobble-hor-bottom 6s infinite
	}
	
/* ----------------------------------------------
 * Generated by Animista on 2024-5-1 18:19:0
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

@-webkit-keyframes 
wobble-hor-bottom{
	0%,100%{-webkit-transform:translateX(0);
	transform:translateX(0);
	-webkit-transform-origin:20% 20%;
	transform-origin:20% 20%}
	5%{-webkit-transform:translateX(-2px) rotate(-1deg);
	transform:translateX(-2px) rotate(-1deg)}
	10%{-webkit-transform:translateX(1px) rotate(1deg);transform:translateX(1x) rotate(1deg)}
	95%{-webkit-transform:translateX(1px) rotate(1deg);transform:translateX(1px) rotate(1deg)}
/*
	75%{-webkit-transform:translateX(-2.5px) rotate(-0.6deg);transform:translateX(-2.5px) rotate(-0.6deg)}
	80%{-webkit-transform:translateX(1.5px) rotate(0.4deg);transform:translateX(1.5px) rotate(0.4deg)}
	95%{-2deg);transform:translateX(-1px) rotate(-0.3deg)}
*/
	}
	
/*
@keyframes 
wobble-hor-bottom{
	0%,100%{-webkit-transform:translateX(0);
	transform:translateX(0);
	-webkit-transform-origin:50% 50%;
	transform-origin:50% 50%}
	15%{-webkit-transform:translateX(-30px) rotate(-6deg);transform:translateX(-30px) rotate(-6deg)}
	30%{-webkit-transform:translateX(15px) rotate(6deg);transform:translateX(15px) rotate(6deg)}	45%{-webkit-transform:translateX(-15px) rotate(-3.6deg);transform:translateX(-15px) rotate(-3.6deg)}
	60%{-webkit-transform:translateX(9px) rotate(2.4deg);transform:translateX(9px) rotate(2.4deg)}
	75%{-webkit-transform:translateX(-6px) rotate(-1.2deg);transform:translateX(-6px) rotate(-1.2deg)}
	}
*/


/* リサイクルボックス アニメーションここまで */
	
.map_ani_o_ship{
	position: absolute;
	width:30%;
	left:8.8%;
	bottom:4%;
}

.anim_ship{
  animation: anim_ship 6s forwards;
}

@keyframes anim_ship {
  0% {
  transform: translateX(-300px);
  }

  100% {
  transform: translateX(0px);
  }
}


.fuwafuwa {
  animation: floating-y 3s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y {
  0% {
    transform: translateY(-0.1em);
  }
  100% {
    transform: translateY(0.1em);
  }
}

.fuwafuwa2 {
  animation: floating-y 3s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y {
  0% {
    transform: translateY(-0.15em);
  }
  100% {
    transform: translateY(0.15em);
  }
}



.yurayura01 {
  animation: yurayura01 12s linear infinite;
  transform-origin: bottom center;
}
@keyframes yurayura01 {
  0%,100% {
    transform: rotate(-12deg);
  }
  50% {
    transform: rotate(12deg);
  }
}

.map_ani_o_saikutsuk{
	position: absolute;
	width:3.2%;
	left:37.7%;
	top:18%;
}
.map_ani_o_fes1{
	position: absolute;
	width:17.3%;
	right:25.5%;
	bottom:30%;
}
.map_ani_o_fes2{
	position: absolute;
	width:5%;
	right: 38%;
    bottom: 44%;
}
.map_ani_o_fes3{
	position: absolute;
    width: 4.6%;
    right: 27%;
    bottom: 47%;
}
	
	
	

.main_1day{
	background-color: #4AB4FF;
	border-radius: 100px 100px 0 0;
	width:90%;
	max-width:1000px;
	margin:20px auto 0 auto;
	position: relative;
}
@media only screen and (max-width: 640px) {
.main_1day{
	padding:1em;
}	
}


.main_1day .main_1day_inner{
	width:100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding:1em 1em 2.5em 1em;
}
@media only screen and (max-width: 1000px) {
.main_1day .main_1day_inner{
	max-width:94%;
}	
}
@media only screen and (max-width: 640px) {
.main_1day .main_1day_inner{
	padding:0 0 1em 0 ;
	max-width:100%;
	flex-wrap: wrap;
}	
}




.main_1day .main_1day_inner .map_o_k{
	position: absolute;
	top:-10px;
	left:-20px;
	width:7em;
}
@media only screen and (max-width: 640px) {
.main_1day .main_1day_inner .map_o_k{
	top:-10px;
	left:5px;
	width:6em;
}	
}




.main_1day h4{
	width:60%;
	color:#fff;
	font-size:1.6em;
	text-align: center;	
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
@media only screen and (max-width: 1000px) {
.main_1day h4{
	font-size:1.2em;
}	
}
@media only screen and (max-width: 640px) {
.main_1day h4{
	width:100%;
	font-size:1.2em;
	margin-bottom:1em;
}
.main_1day h4 span{
	width:100%;
}
}


.cup_omote{
width:20%;
text-align: right;
padding-right:2em;
}
.cup_omote img{
transform: rotate(-0.06turn);
width:2.2em;
}

.co2_num{
	background-image: url(../img/bk_clowd.svg);
	background-repeat: no-repeat;
/* 	background-position: top 100px; */
	display: flex;
	width:30%;
}
.co2_num .index_num{
	width:50%;
}
.co2_num .index_num_kg{
	width:3em;
}

@media only screen and (max-width: 640px) {

.co2_num{
	width:50%;
}
.co2_num .index_num{
	width:50%;
}
.co2_num .index_num_kg{
	width:3em;
}	
}


.bk_nami{
	position: absolute;
	bottom:-6px;
	left:0;
	width:100%;
	z-index:5;
}











@media only screen and (max-width: 1075px) {
#s1 .m1{
	justify-content: space-around;
}
#s1 .m1 .main_copy{
	max-width:600px;
	width:100%;
	padding:2em;
	text-align: center;
}
#s1 .m1 .main_img{
	max-width:600px;
	width:100%;
	padding:2em;
	text-align: center;
	margin-bottom:0;
}

}

#s1_2{
	border-top:10px solid #fff;
	background-color: #ecf7d4;
	padding: 4vw 0;
}

/*
================================================================================
*/


/* newsここから */


#news{
	padding: 4vw 0;
	position: relative;
	background-color: #FFFFCC;
	background-image: url(../img/bk_pat_dot_y.png);
	color:#008D0F;
	border-top:13px solid #fff;
}
#news .o_k1{
	position: absolute;
	top:-13px;
	right:20%;
    width:9em;
    max-width:15%;
}
@media only screen and (max-width: 1100px) {
#news .o_k1{
	right:5%;
}
}

#news .news_inner{
	width:1000px;
	max-width:96%;
	margin:0 auto;
}
#news .news_list{
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}
#news .news_list li{
	width:29%;
	background-color: #ffffff;
	border-radius: 20px;
	padding:1em;
	margin-bottom:1em;
	display: flex;
	flex-direction:column
}
@media only screen and (max-width: 900px) {
#news .news_list li{
	width : calc(50% - 2.2em) ;
}
}

@media only screen and (max-width: 640px) {
#news .news_list li{
	width : 96%;
}
}
/*
#news .news_list li:last-child{
    margin-left: auto;
}
*/
#news .news_list li .news_img img{
	border-radius: 15px;
	border:solid 1px #DCDCDC;	
}

/*
#news .news_list:after {
    content: "";
    display: block;
    width: 33.5%; 
    height: 0;
}
*/

#news .news_list li h4{
	text-align: center;
	padding:1em 0 0 0;
	
}
#news .news_list li h4 span.small{
	font-size:0.9em;
	margin-bottom:0.5em;
}
#news .news_list li h5{
	text-align: left;
	color:#B29B8F;
	padding:0 0;
	margin:0;
}
#news .news_list li p{
	border-top:solid 1px #B8D200;
	padding-top:0.5em;
	font-size:0.9em;
	font-weight:500;
	line-height: 1.6em;
	flex-grow:1
}
#news .news_list li a div{
	border:solid 1px #B8D200;
	max-width:200px;
	border-radius: 100px;
	padding:0.5em;
	text-align: center;
	margin:0 auto;
	font-size:0.9em;
	font-weight:500;
	position: relative;
}
#news .news_list li a:hover div{
	background-color: #008D0F;
	color:#fff;
}

#news .news_list li a.gaibu div::after{
 content: url(../img/bt_gaibu.svg);
  position: absolute;
  display: inline-block;
  width: 1em;
  height: 1em;
  top: 8px;
  right: 15px;
}

/*
================================================================================
*/


/* What is Steel?ここから */

#whats{
	padding: 4vw 0;
	position: relative;
	background-color: #D7FAF2;
	background-image: url(../img/bk_pat_dot_b.png);
	color:#008D0F;
	margin:0;
}

#whats .whats_inner{
	width:1000px;
	max-width:96%;
	margin:0 auto;
}

.whats_img{
	max-width:90%;
	margin:3em auto;
}




.line_style01{
	position: absolute;
	top:0px;
	left:0;
	width:100%;
}

/*
#whats .whats_inner ul{
	margin-top:5em;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#whats .whats_inner ul li.box{
	width:18%;
	background-color: #fff;
	border-radius: 20px;
	padding:1em;
}
#whats .whats_inner ul li.box div{
	width: 100%;
	text-align: center;
	margin:-40px auto -30px auto;
}
#whats .whats_inner ul li.box img{
	width: 90%;
}

#whats .whats_inner ul li.box h5{
	text-align: center;
	font-size:1.2em;
}
#whats .whats_inner ul li.box p{
	font-size:0.8em;	
	margin-bottom:10px;
}
#whats .whats_inner ul li.yaji{
	width:1.5%;
}
*/





/*
================================================================================
*/


/* footerここから */



footer .wrapper{
	max-width:1000px;
	margin:0 auto;
	padding-bottom:50px;
}
footer .txt{
	text-align: center;
	color:#285030;
	font-weight:900;
	font-size:0.9em;
	max-width:90%;
	margin:0 auto;
}
@media only screen and (max-width: 640px) {
footer .txt{
	font-size:0.8em;
}
}

footer{
	margin-top:-22px !important;
	width:100%;
	background-color: #B8D200;
	border-top:13px solid #fff;	
	padding:0;
	color:#008D0F;
}
footer h3{
	text-align: center;
}
footer h3 img{
	max-width:360px !important;
}


.footer_inner{
	padding:2em 2em 4em 2em;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.footer_box1{
	width:22%;
	text-align: center;
}
@media only screen and (max-width: 1000px) {
.footer_box1{
	width:100%;
	display: flex;
	justify-content: center;
	align-content: center;
	align-self: center;
	font-size:0.9em;
	flex-wrap: wrap;
}	
}

.footer_box1 h5{
	padding:0;
	margin:0;
	font-size:0.9em;
	display: flex;
	align-content: center;
	align-self: center;
	flex-wrap: wrap;
	justify-content: center;
	width:100%;
}
.footer_box1 a div{
	background-color: #ffffff;
	border-radius:10px;
	padding:5px 15px 3px 15px;
	max-width:300px;
	margin:1em auto;
}
.footer_box2{
	width:66%;
	display: flex;
	align-content: space-between;
	flex-wrap: wrap;
}

@media only screen and (max-width: 1000px) {
.footer_box2{
	width:100%;
	font-size:0.8em;
}	
}

.footer_box2 ul{
	width:100%;
	display: flex;
	justify-content: flex-end;
}
.footer_box2 ul li{
	width:24%;
	padding:1em;
	text-align: center;
	list-style:none;
	border-left:1px solid #fff;
	font-weight:500;
	align-content: center;
}
@media only screen and (max-width: 1000px) {
.footer_box2 ul{
	width:100%;
	display: flex;
	justify-content:flex-start;
	flex-wrap: wrap;
}
.footer_box2 ul li{
	width:100%;
	border-right:1px solid #fff;
	margin-bottom:1em;
}	
}


.footer_box2 ul li:last-child{
	border-right:1px solid #fff;
}


.footer_box2 .bt_box{
	display: flex;
	justify-content: space-between;
	width:100%;
	font-size:0.9em;
}

@media only screen and (max-width: 640px) {
.footer_box2 .bt_box{
	flex-wrap: wrap;
}	
}

.footer_box2 .bt_box_sub_link{
	width:45%;
	font-weight:600;
	align-content: flex-end;
}
.footer_box2 .bt_box_sub_link a{
	margin-right:1em;
}
.footer_box2 .bt_box_sub_link .maru{
	color:#fff;
}
.footer_box2 #copy{
	width:45%;
	align-content: flex-end;
	font-size:0.9em;
	font-weight:900;
	text-align: right;
	padding-right:110px;
}
@media only screen and (max-width: 640px) {
.footer_box2 #copy{
	width:100%;
	text-align: left;
	padding-right:110px;
}	
}



.bt_page_top{
	position: fixed;
	bottom:10px;
	right:10px;
	width:110px;
	z-index: 99;
}

@media only screen and (max-width: 640px) {

}






/* コンテナー */
.svg-wrap {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 40px;
}

/* レスポンシブのための記述 */
.responsive-svg {
  position: relative;
   height: 0;
   margin: 0 0 25px;
   padding-top: 41.428571428%; /* padding hack(290 / 700) */
}
.responsive-svg svg {
  position: absolute;
   top: 0;
   left: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/*
================================================================================
*/


/* 共通 */

h2.sec_title{
	font-size: 2.4em;
	color:#008D0F;
	text-align: center;
	max-width:600px;
	margin:20px auto 0 auto;
}
h3.sec_title_sub{
	font-size: 1.4em;
	color:#008D0F;
	text-align: center;
}
 h4.sec_title_sub_txt{
	font-size: 1em;
	color:#008D0F;
	text-align: left;
	line-height: 1.6em;
}
@media only screen and (max-width: 640px) {
 h4.sec_title_sub_txt{
	font-size: 0.8em;
}	
}

.sec_title_sub_txt2{
	font-size: 0.8em;
	color:#008D0F;
	text-align: center;
	line-height: 1.6em;
	margin:0 auto 4vw auto;
	padding:0 4%;
}
@media only screen and (max-width: 640px) {
.sec_title_sub_txt2{
	font-size: 0.8em;
}	
}





.inb{
	display: inline-block;
}
@media only screen and (max-width: 400px) {
.sp_inb{
	display: inline-block;
}	
}


@media only screen and (min-width: 641px) {
.pc_hidden{display:none}

}
@media only screen and (max-width: 640px) {
.sp_hidden{display:none}
}

@media only screen and (min-width: 641px) {
.pc_h{display:none}

}
@media only screen and (max-width: 640px) {
.sp_h{display:none}
}
.mt10{margin-top:10px;}
.mt20{margin-top:20px;}
.mt30{margin-top:30px;}

.df{
	display:flex;
}

@media only screen and (min-width: 501px) {
.df_pc{display: flex;}
}

.por{position:relative;}






@keyframes menu_fade {
    0% {
         opacity: 0;
    }
    100% {
         opacity: 1;
    }
}


.fl_toiawase{
	z-index:101;
	max-width:600px;
	width:50%;
	position: absolute;
	right:0;
	top:0;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
}
@media only screen and (max-width: 768px) {
.fl_toiawase{	
display: none;
}
}
.fl_toiawase .tel_txt{
	padding:0 5px 5px 5px;
	background: #fff;
	border-bottom:2px solid #cbc690;
	border-left:2px solid #cbc690;
	border-right:2px solid #cbc690;
	width:100%;
}
.fl_toiawase .tel_txt_inner{
	padding:10px 15px;
	border-bottom:2px solid #cbc690;
	border-left:2px solid #cbc690;
	border-right:2px solid #cbc690;
}
.fl_toiawase a p{
	background-color: #b7b27f;
	border-radius: 0 0 10px 10px;
	color:#fff;
	font-weight:900;
	font-size:0.8em;
	text-align: center;
	min-width:16em;	
}

.fl_toiawase_sp{
	width:100%;
 	z-index: 100;
	max-width:100%;
	position: fixed;
	bottom:0;
	display: flex;
}
.fl_toiawase_sp a:first-child{
	width:30%;
	color:#fff;
	background-color: #8e8b6c;
	text-align: center;
	border-radius: 10px 10px 0 0 ;
	padding-top:5px;
}
.fl_toiawase_sp a:last-child{
	width:70%;
	color:#fff;
	background-color: #b7b27f;
	text-align: center;
	border-radius: 10px 10px 0 0 ;
	padding-top:5px;
}
@media only screen and (min-width: 769px) {
.fl_toiawase_sp{	
display: none;
}	
}



/* スマホのアコーディオン */
@media screen and (max-width: 768px) {
.pc_menu{display: none;}	
}

.square{
	width:100%;
	background-color: rgba(255, 255, 255, 0.5);
	height:2.5em;
	position:absolute;
}
@media only screen and (max-width: 1125px) {
.square{
	display: none;
}
}



.menu_item_link{
  display: block;
  position: absolute;
  top: 15px;
  right: 15px;
  width: 30px;
  height: 30px;
  transition: all .5s;
  cursor: pointer;
  z-index: 3;
 background-color: #B8D200;
 border:16px solid #B8D200;
 border-radius: 100px
}
@media only screen and (max-width: 640px) {
.menu_item_link{
  top: 24px;
}	
}
@media only screen and (max-width: 514px) {
.menu_item_link{
  top: 20px;
}	
}


.menu_item_link span {
  display: block;
  position: absolute;
  left: 0;
  width: 30px;
  height: 2px;
  background-color: #fff;
  border-radius: 4px;
  transition: all .5s;
}


.menu_item_link span:nth-child(1) {
  top: 4px;
}
.menu_item_link span:nth-child(2) {
  top: 14px;
}
.menu_item_link span:nth-child(3) {
  bottom: 4px;
}
.menu_item_link.on span {

}
.menu_item_link.on span:nth-child(1) {
  -webkit-transform: translateY(10px) rotate(-315deg);
  transform: translateY(10px) rotate(-315deg);
}
.menu_item_link.on span:nth-child(2) {
  opacity: 0;
}
.menu_item_link.on span:nth-child(3) {
  -webkit-transform: translateY(-10px) rotate(315deg);
  transform: translateY(-10px) rotate(315deg);
}


.menu_item {
  color: #fff;
  cursor: pointer;
  display: block;
  margin-bottom: 1px;
/*   position: relative; */
}

.submenu {
  background:rgba(0, 140, 15, 0.9);
  display: none;
}
.submenu_item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.65);
  color: #fff;
  font-weight:600;
  padding: 10px;
  text-align: center;
}
.submenu_item .bt_toiawase{
	background-color: rgba(185, 209, 0, 0.5);
	border-radius: 100px;
	border:2px solid #B8D200;
	padding:10px;
	color:#fff;
}


.sp_menu{
/* 	background-image: url(../img/bk_foot.png); */
	position: absolute;
	top:0px;
	left:0px;
	width:100%;
	padding-top:10px;
}
@media screen and (min-width: 1125px) {
.sp_menu{
	display: none;
}
}