@charset "UTF-8";


#page-top {
    position: fixed;
    bottom: 30px;
    right: 15px;
}
#page-top a {
    display: block;
    background-color:#000000;
    text-align: center;
    color: #fff;
    font-size: 30px;
    text-decoration: none;
    padding: 16px 18px;
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}

a:hover	img,a:active img {
			opacity: 0.3 ;
}


iframe.youtube-16-9 {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
}




@media screen and (min-width: 760px) and (max-width: 1200px){
body:before {
  background-position: center  right -290px;
}
}


p {
        font-size: 1.0vw;
        line-height: 1.7vw;
}	

/****************
黒のボタン
***************/

.blk_l_btn a {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  background: #333;

  width: 250px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 2px solid #333;
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
  transition: .3s;
  margin: 0 auto;
}
.blk_l_btn a::before,
.blk_l_btn a::after {
  content: "";
  width: 100%;
  position: absolute;
  top: 0;
  z-index: -1;
  transition: transform ease .3s;
}
.blk_l_btn a::before {
  right: -0px;
  border-right: -0px solid transparent;

  border-bottom: 60px solid #d8d4d4;

  transform: translateX(-100%);
}
.blk_l_btn a::after {
  left: -0px;
  border-left: 0px solid transparent;

  border-top: 60px solid #d8d4d4;

  transform: translateX(100%);
}
.blk_l_btn a:hover {
  color: #333;
}
.blk_l_btn a:hover::before {
  transform: translateX(-49%);
}
.blk_l_btn a:hover::after {
  transform: translateX(49%);
}

/****************
緑のボタン
***************/

.grn_l_btn a {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  background: #35c538;

  width: 190px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 2px solid #35c538;
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
  transition: .3s;
  margin: 0 auto;
}
.grn_l_btn a::before,
.grn_l_btn a::after {
  content: "";
  width: 100%;
  position: absolute;
  top: 0;
  z-index: -1;
  transition: transform ease .3s;
}
.grn_l_btn a::before {
  right: -0px;
  border-right: -0px solid transparent;

  border-bottom: 60px solid #ffffff;

  transform: translateX(-100%);
}
.grn_l_btn a::after {
  left: -0px;
  border-left: 0px solid transparent;

  border-top: 60px solid #ffffff;

  transform: translateX(100%);
}
.grn_l_btn a:hover {
  color: #35c538;
}
.grn_l_btn a:hover::before {
  transform: translateX(-49%);
}
.grn_l_btn a:hover::after {
  transform: translateX(49%);
}

/****************
赤のボタン
***************/

.red_l_btn a {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  background: #e60000;

  width: 190px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 2px solid #e60000;
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
  transition: .3s;
  margin: 0 auto;
}
.red_l_btn a::before,
.red_l_btn a::after {
  content: "";
  width: 100%;
  position: absolute;
  top: 0;
  z-index: -1;
  transition: transform ease .3s;
}
.red_l_btn a::before {
  right: -0px;
  border-right: -0px solid transparent;

  border-bottom: 60px solid #ffffff;

  transform: translateX(-100%);
}
.red_l_btn a::after {
  left: -0px;
  border-left: 0px solid transparent;

  border-top: 60px solid #ffffff;

  transform: translateX(100%);
}
.red_l_btn a:hover {
  color: #e60000;
}
.red_l_btn a:hover::before {
  transform: translateX(-49%);
}
.red_l_btn a:hover::after {
  transform: translateX(49%);
}


.txt-red{
  color: #e92323;
  font-weight: 800;
  font-size: 1.13vw;
}

.txt-pink{
  color: #db7575;
  font-weight: 800;
  font-size: 1.13vw;
}


* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}

html {
       overflow-y:scroll;
}

:root {
     --nav-height: 90px;
     --nav-background: #ccc;
}

nav {
     display: flex;
     padding: 0 30px;
     align-items: center;
     width: 100%;
     height: var(--nav-height);
     background: #000000;
/*     background: #1a1a1a4f;*/
     color: #ffffff;
     position: fixed;
     z-index: 99999;
}
.logo img{
  width: 234px;
  margin: 0 0px 0 -22px;
}


/* nav-links */
.nav-links {
     align-items: center;
     margin-left: auto;
     width: calc(100% - 250px);; 
     line-height: 27px;
}

.nav-links li {
     list-style: none;
     margin: 0 12px;
     text-align: center;
     float: left;
}

.nav-links li a {
  text-decoration: none;
  color: #ffffff;
  position: relative;
  font-weight:400;
  font-size: 16px;
}



@media only screen and (max-width: 1059px) {
.nav-links li {
    margin: 0 4px;
}
.nav-links li a {
    font-size: 1.6vw;
}
}


/* menu */

.menu {
     cursor: pointer;
     background: #06060647;
     border: none;
     outline: none;
     display: none;
     color: #ffffff;
}


.neve-main{
    position: relative;
}



.wht{
background-color: #ffffff;
color: #222;
}
.l-gry{
background-color: #d8d4d4;
color:#010010;
}

.d-gry{
background-color: #010010;
color:#ffffff;
}

.clr{
background-color: #ffffffc4;
}

/***************
   01.開催
***************/
#kaisai{
	width:100%;
	/* height:40vw; */
	text-align: center;
	display: table;
	margin: 0 auto;
	overflow: hidden;
}
.kaisai_container{
	display: table-cell;
	vertical-align: middle;
	width:100vw;
	/* height: 90vh; */
	background-color: #ffffff;
	margin: 0 auto;
}



.kaisai_container ul p{
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  text-align: left;
  padding: 0;
}
.kaisai_container ul {
        width: 100%;
        max-width: 1000px;
        margin: 0 auto;
        position: relative;
        /* margin-bottom: 40px; */
        height: auto;
}
.kaisai_container li{
  /*! padding: 20px 20px; */
  float: left;
  width: 50%;
  height: auto;
  aspect-ratio: 16 / 9  ;
  position: relative;
  margin-bottom: 76px;
}

.kaisai_container li .left {
  font-size: 17px;
  line-height: 28px;
  padding: 20px 0px;
}
.left-txt{
  padding-top: 40px;
  text-align: left;
}
.jisseki ul{
   width: 100%;
   max-width: 1000px;
   margin:0 auto;
}
.jisseki ul{
   width: 100%;
   max-width: 1000px;
   margin:0 auto;
}
.jisseki li{
  margin: 0 2px 36px 2px;
  width: calc((100% - 12px) / 3);
  float: left;
  height: 200px;
  /* aspect-ratio: 16 / 9; */
  line-height: 200px;
}
.jisseki li a{
position: relative;
overflow: hidden;
}



.jisseki li:nth-child(1) a:after {
position: absolute;
content: "";
display: block;
width: 100%;
height: 100%;
top: 0;
background: url(https://monochrome-world.com/wp-content/themes/cocoon-child-master/img/lp_kaisai_01.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
background-size: cover;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
transition: all .3s ease-out;
z-index:-1 ;
}

.jisseki li:nth-child(2) a:after {
position: absolute;
content: "";
display: block;
width: 100%;
height: 100%;
top: 0;
background: url(https://monochrome-world.com/wp-content/themes/cocoon-child-master/img/lp_kaisai_02.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
background-size: cover;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
transition: all .3s ease-out;
z-index:-1 ;
}
.jisseki li:nth-child(3) a:after {
position: absolute;
content: "";
display: block;
width: 100%;
height: 100%;
top: 0;
background: url(https://monochrome-world.com/wp-content/themes/cocoon-child-master/img/lp_kaisai_03.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
background-size: cover;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
transition: all .3s ease-out;
z-index:-1 ;
}

.jisseki li a{
    display: block;
    background-size: cover; /* 要素全体を覆うように表示 */
    background-position: center; /* 中央に配置 */
    height: 100%;
    color: #ffffff;
}

.jisseki li a:hover:after {
opacity: .8;
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}

.jisseki li a {
position: relative;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
height: 100%;
text-decoration: none;
color: #fff
}
.jisseki li a p {
        text-align: center;
        margin: 0 auto;
        background-color: #0000007a;
        padding: 10px 20px;
        width: max-content;
        font-size: 15px;
}

.sub-txt{
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
    margin-bottom: 0px;
  margin-bottom: 100px;
}



#kaisai-r{
position: absolute;
        bottom: 17vh;
    
}



/***************
   02.受付開始
***************/
#uke{
	width:100%;
	text-align: left;
	display: table;
	margin: 0 auto;
	overflow: hidden;
      aspect-ratio: 16 / 9; /* 画像の縦横比を保つ */
  background-image: url(../img/lp_uke_01.jpg); /* 画像パスを指定 */
  background-size: cover; /* 要素全体を覆うように表示 */
  background-position: center; /* 中央に配置 */
  }

.uke_container{
	display: table-cell;
  vertical-align: middle;
  width: 100%;
  padding: 40px 8px 100px 8px;
}
.uke_container p{
  text-align: center  ;
  margin: 0px 14px 0px 14px;
}
#uke-r{
bottom: 17vh;
        top: 800px;
        position: relative;
}




.suii{
  text-align: center;
  margin-bottom: 6px;
}
.uke-img{
  width: 600px;
  margin: 0 auto;
  text-align: center;
}

/***************
   04.yoyaku
***************/
#yoyaku{
	width:100%;
	height:40vw;
	text-align: center;
	display: table;
	margin: 0 auto;
	overflow: hidden;

}
.yoyaku_container{
		display: table-cell;
  vertical-align: middle;
  width: 100%;
  padding: 40px 8px 0px 8px;
}


.yoyaku_container .yoyaku-1 {
        width: 100%;
        max-width: 1100px;
        margin: 0 auto;
        position: relative;
        /* margin-bottom: 40px; */
        height: auto;
        aspect-ratio: 11 / 6;
        position: relative;
}
.yoyaku-1 li{
  /*! padding: 20px 20px; */
  float: right;
  width: 50%;
  height: 100%;
  position: relative;
  margin-bottom: 100px;
}

.yoyaku-1-li-inline{
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);

  text-align: left;
  padding: 0;
}
.yoyaku-img{
  width: 60%;
  margin: 1% 28% 1% 10%;
  text-align: center;
  border: solid 1px #c3c3c3;
}

.moushikomi{
  margin: 43px 0px;
  text-align: center;
}
.moushikomi li{
   width: 50%;
   float: left;
}



#yoyaku-r{
  bottom: 17vh;
  top: -100px;
  position: relative;
}


/***************
   05.スケジュール
***************/
#schedule{
	width:100%;
	/* height:40vw; */
	text-align: center;
	display: table;
	margin: 0 auto;
	overflow: hidden;
}

.schedule_container{
	display: table-cell;
  vertical-align: middle;
  width: 100%;
  padding: 40px 8px 60px 8px;
}
.schedule_container p{
  margin: 0px 14px 0px 14px;

}

.schedule_container .schedule-1 {
        width: 100%;
        max-width: 1100px;
        margin: 0 auto;
        position: relative;
        /* margin-bottom: 40px; */
        height: auto;
        aspect-ratio: 10/ 4;
        position: relative;
}
.schedule-1 li{
  /*! padding: 20px 20px; */
  float: left;
  width: 50%;
  height: 100%;
  position: relative;
  margin-bottom: 76px;
}

.schedule-1-li p{
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);

  text-align: left;
  padding: 24px;
}

#schedule-r{
  bottom: 17vh;
  top: -100px;
  position: relative;
}

iframe.calender-4-3 {
width: 100%;
height: auto;
aspect-ratio: 5 / 4;
}
.WBi6vc {
    font-size: 8px;
}


/***************
   06.タイムスケジュール
***************/

#time-s{
	width:100%;
	/* height:40vw; */
	text-align: center;
	display: table;
	margin: 0 auto;
	overflow: hidden;
}
.time-s_container{
	display: table-cell;
	vertical-align: middle;
	width:100vw;
	/* height: 90vh; */
	margin: 0 auto;
}

.time-s_container dl {
  display: flex;
  flex-wrap: wrap;
  text-align: left;
}
.time-s_container dl dt {
  width: 30%;
  padding: 4px 0px;
}
.time-s_container dl dd {
  width: 70%;
  padding: 4px 0px;
}


.time-s_container pc{
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  text-align: left;
  padding: 8px;
  /* width: 42px; */
  /* width: 598px; */
}
.time-s_container ul {
        width: 100%;
        max-width: 1100px;
        margin: 0 auto;
        position: relative;
        /* margin-bottom: 40px; */
        height: auto;
}
.time-s_container li{
float: right;
  width: 50%;
  height: auto;
  aspect-ratio: 12 / 8;
  position: relative;
  margin-bottom: 28px;
  text-align: left;
}

.time-s_container li .left {
  font-size: 17px;
  line-height: 28px;
  padding: 20px 0px;
}
    .time-s-li-inline {
        margin: 0;
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        text-align: left;
        padding: 0px 28px;
        /* width: 42px; */
        /* width: 598px; */
    }

.attention {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 7px 100px 8px;
  text-align: left;
}

#time-s-r{
    bottom: 17vh;
  top: -100px;
  position: relative;
}


/***************
   06.料金
***************/
#price{
	width:100%;
	/* height:40vw; */
	text-align: center;
	display: table;
	margin: 0 auto;
	overflow: hidden;
}

.price_container{
	display: table-cell;
  vertical-align: middle;
  width: 100%;
  padding: 40px 8px 0px 8px;
}


.pricetable {
  margin: 30px 0% 30px 0%;
}
.pricetable table {
    table-layout: fixed;
    width: 600px;
    border-color:#303030;;
    border-collapse: collapse;
    margin: auto;
    /*! padding: 0px 30px; */
    text-align: center;
}
.pricetable table tr {
    border-bottom: solid 1px#303030;;
    padding: 0.5em;
}
.pricetable table td:nth-child(4) {
    border-bottom: none;
}
.pricetable table td {
    border-right: solid 1px#303030;;
    padding: 0.5em;
  }
.pricetable table td:nth-child(2) {
    border-right: none;
}


#price-r{
    bottom: 17vh;
  top: -100px;
  position: relative;
}

/***************
   07.レンタルロッド
***************/
#rental{
	width:100%;
	/* height:40vw; */
	text-align: center;
	display: table;
	margin: 0 auto;
	overflow: hidden;
}
#rental:before{
  content:"";
  display:block;
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100vh;

}
.rental_container ul {
        width: 100%;
        max-width: 1100px;
        margin: 0 auto;
        position: relative;
        /* margin-bottom: 40px; */
        height: auto;
        aspect-ratio: 11/ 4;
        position: relative;
}
.rental_container li{
float: left;
  width: 50%;
  height: auto;
  aspect-ratio: 12 / 8;
  position: relative;
  margin-bottom: 28px;
}
.rental-1-in{
    margin: 0;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
    width: 100%;
}
.rental_container p{

  text-align: left;
  padding: 24px 24px 0px 24px;
}
.rental_img{
  margin-bottom: 60px;
}

.pricetable2 {
  margin: 30px 0% 30px 0%;
}
.pricetable2 table {
    table-layout: fixed;
    width: calc(100% - 48px);
    border-color:#303030;;
    border-collapse: collapse;
    margin: auto;
    /*! padding: 24px 24px; */
    text-align: center;
}
.pricetable2 table tr {
    border-bottom: solid 1px#303030;;
    padding: 0.5em;
}
.pricetable2 table td:nth-child(4) {
    border-bottom: none;
}
.pricetable2 table td {
    border-right: solid 1px#303030;;
    padding: 0.5em;
  }
.pricetable2 table td:nth-child(2) {
    border-right: none;
}


#rental-r{
  bottom: 17vh;
  top: -100px;
  position: relative;
}

/***************
   08.販売
***************/
#hanbai{
	width:100%;
	text-align: center;
	display: table;
	margin: 0 auto;
	overflow: hidden;
}
.hanbai_container{
	display: table-cell;
	vertical-align: middle;
	width:100vw;
	height: 90vh;
  margin: 0 auto;
}

#hanbai:before{
  content:"";
  display:block;
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100vh;
  background:url(https://monochrome-world.com/wp-content/themes/cocoon-child-master/img//top_3_pc.jpg)center no-repeat;
  background-size:cover;
  background-position: center center;
}
.hanbai_container-in{
	width:100vw;
	margin: 0 auto;
	max-width: 1100px;
}
.hanbai_img li{
width: calc((100% - 24px)/4);
float:left;
text-align: center;
margin: 20px 0px 50px 6px;
}
.hanbai_img li p{

  font-size: 11px;
}
.hanbai_img li:nth-child(4){
margin-right: 0px;
;
}

.hanbai_img{
  margin-bottom: 60px;
}
.hanbai_bnr{
  width: 400px;
  margin: auto;
  margin-bottom: 50px;
  border: solid 1px #c1c1c1;
}

.hanbai_img2 li{
width: calc((100% - 18px)/2);
float:left;
text-align: center;
margin: 20px 0px 100px 6px;
}

.hanbai_img2 li:nth-child(3){
margin-right: 0px
}

#hanbai-r{
  bottom: 17vh;
  top: -100px;
  position: relative;
}

/***************
   09.持ち物
***************/
#mochimono{
	width:100%;
	text-align: center;
	display: table;
	margin: 0 auto;
	overflow: hidden;
}
.mochimono_container{
	display: table-cell;
	vertical-align: middle;
	width:100vw;
	height: 90vh;
  margin: 0 auto;
}
.mochimono_container-in{
	width:100vw;
	margin: 0 auto;
	max-width: 1100px;
  text-align: left;
}
.mochimono-img li{
width: calc((100% - 18px)/2);
float:left;
text-align: center;
margin: 20px 0px 100px 6px;
}

.mochimono-img li:nth-child(2){
margin-right: 0px
}
.mochimono_list{
    width: 100%;
    display: inline-block;
}
@media only screen and (min-width: 1060px) {
.mochimono_list li{
	width: calc((100% / 4) - 42px);
	float:left;
	margin: 24px 24px 14px 24px;
	margin-bottom: 8px;
	}

.mochimono_list li:nth-child(4n){
	margin-right: 0px;
}
.mochimono_list li:nth-child(4n-3){
	margin-left: 0px;
}
}
@media only screen and (max-width: 1059px) {

.mochimono_list li{
	width: calc((100% / 3) - 32px);
	float:left;
	margin: 68px 24px 14px 24px;
	margin-bottom: 8px;
	}

.mochimono_list li:nth-child(3n){
	margin-right: 0px;
}
.mochimono_list li:nth-child(3n-2){
	margin-left: 0px;
}
}
#mochimono-r{
  bottom: 17vh;
  top: -100px;
  position: relative;
}

/***************
   10.ニュース
***************/
#news{
	width:100%;
	/* height:40vw; */
	text-align: center;
	display: table;
	margin: 0 auto;
	overflow: hidden;
	/* padding-bottom: 60px; */
}
#news:before {
  content:"";
  display:block;
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100vh;
  background:url(../img/tohttps://monochrome-world.com/wp-content/uploads/2026/01/DSC01407-scaled.jpgp_1_pc.jpg)center no-repeat;
  background-size:cover;
  background-position: center center;
}
.news_container{
	display: table-cell;
	width:100vw;
	margin: 0 auto;
	height: auto;
	padding-bottom: 115px;
}

.news_container p{text-align: center;padding: 6px;}
#news-r{
/*   position: absolute;*/
   bottom: 17vh;
   text-align: center;
}

#r_news {
	margin-top: 5px;
	height: auto;/*スクロールの高さ*/
	/*	width: 700px;*/
	/* max-width:100%; */
	/*	overflow-y: scroll;*/
	margin: 0 auto;
	background-color: rgb(255 255 255 / 8%);
	padding: 32px;
	position: relative;
	margin-bottom: 60px;
	height: auto;
}
#r_news ul{

}
#r_news li{
  width: calc((100% - 40px)/5);
  float: left;
  margin: 4px;
  background-color: #ffffff;
  height: 403px;
}

#r_news li .news_theme {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 制限したい行数が3の場合 */
  overflow: hidden;
  text-align: left;
  font-size: 17px;
  line-height: 28px;
}

#r_news li .news_detail {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5; /* 制限したい行数が3の場合 */
  overflow: hidden;
  text-align: left;
  font-size: 18px;
  line-height: 28px;
}
.news_frame dt{
    width: 100%;
    font-size: 1vw;
    color: #ffffff;
}
.news_frame dd{
    margin-bottom: 25px;
    margin-top: 8px;
    font-size: 0.8vw;
    color: #ffffff;
}
    .sonotanokiji {
        margin-top: 40px;
    }


#news_r{
  bottom: 17vh;
  top: -110px;
  position: relative;
}


/***************
   １１.集合時間と場所
***************/
#access{
	width:100%;
	height:40vw;
	text-align: center;
	display: table;
	margin: 0 auto;
	overflow: hidden;
}
.access_container{
	display: table-cell;
	vertical-align: middle;
	width:100vw;
	height: 90vh;
  margin: 0 auto;
}
.access_container-in{
	width:100vw;
	margin: 0 auto;
	max-width: 1100px;
  text-align: left;
}
.access-img li{
width: calc((100% - 18px)/2);
float:left;
text-align: center;
margin: 20px 0px 100px 6px;
}

.access-img li:nth-child(2){
margin-right: 0px
}


.moushikomi2 {
  padding: 50px 0px 125px 0px;
  text-align: center;
  width: 500px;
  margin: auto;
}
.moushikomi2 li{
   width: 50%;
   float: left;
}

#access-r{
  bottom: 17vh;
  top: -100px;
  position: relative;
}

/***************
   １２.その後の釣果
***************/
#sonogo{
	width:100%;
	text-align: center;
	display: table;
	margin: 0 auto;
	overflow: hidden;
}
.sonogo_container{
	display: table-cell;
	vertical-align: middle;
	width:100vw;
  margin: 0 auto;
}


#sonogo-r{
  bottom: 17vh;
  top: -100px;
  position: relative;
}
.sonogo_container-in{
	width:100vw;
	margin: 0 auto;
	max-width: 1100px;
  text-align: left;
}

.sonogo_container-in ul li{
width: calc((100% - 18px)/2);
float:left;
text-align: center;
margin: 0px 0px 50px 6px;
}

.sonogo_container-in ul li:nth-child(2){
margin-right: 0px
}





.sp,.faq{display:none;}

.section_subtitle{
	text-align:center;
	position: relative;
	top: -0.3vh;
	}
.section_detail{
	margin: 0 auto;
	/* display: inline-block; */
	margin: auto;
	width: 100%;
	/* height: 100%; */
	max-width: 1200px;
	/* padding-top: 24px; */
}
.section_title{
        text-align: center;
        font-size: 2.3vw;
        line-height: 7.4vw;
        font-weight: bold;
        padding-top: 4.2vh;
        padding-bottom: 2.2vh;
}

/*===========
inview
===========*/
 .fadein {
  opacity: 0;
  transform : translate(0, 50px);
  transition : all 1500ms;
}

.fadein.scrollin{
  opacity: 1;
  transform: translate(0, 0);
}







#quality{
  background-color: #000000;
  padding: 0px;
  width: 100%;
  padding: 60px 0px 120px 0px;
  display: inline-block;
}

.quality_detail{
	width:1200px;
	max-width:100%;
	height:60vh;
	margin:0 auto;
	position: relative;
	}


.quality_left{
  width: 50%;
  float:left;
  position: absolute;
 }
.quality_right{
	position: relative;
	float:right;
	width: 700px;
	height: 600px;
	}
.quality_detail li{
	color:#ffffff;
	width:50%;
	float:right;
	height:100%;
	position: relative;
	}
.quality_txt{
	position: relative;
	top: 50%;
	bottom: 50%;
	width: 600px;
	height: 600px;
	text-align: left;
	display: table-cell;
	vertical-align: middle;
	font-size: 1.0vw;
	line-height: 1.7vw;
	padding: 24px;
	color: #ffffff;
	/*text-shadow: 1px 2px 2px #000000;*/
}



.p2{
   width: 320px;
   position: absolute;
   bottom: 5%;
   right: 19%;
}
.p1{
   width: 397px;
   position:absolute;
}
.p3{
   width: 257px;
   position:absolute;
   right: 7px;
   top: 136px;
}



.main_image{
	width:100%;
	height:100vh;
	margin: 0 auto;
	text-align: center;
	position: relative;
	background-color:#000000;
	}
.main_image_container{
/*	display:inline-block;*/
/*	display: table-cell;*/
/*  vertical-align: middle;*/
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
  width: 60vw;
}
.main_image_container img{
    width: 300px;
    margin-top: 20px;
}
.main_image_container h1{
    font-size: 2.9vw;
    font-weight: bold;
    color: #ffffff;
  /*  text-shadow: 1px 2px 11px #0000004f;*/
}
.main_image_container p{
    font-size: 1.2vw;
    color: #ffffff;
    line-height: 1.8vw;
  /*  text-shadow: 1px 2px 2px #0000004f;*/
    border-top: solid 1px #ff0000;
padding-top: 4px;
}


.main_image a {
  position: absolute;
  padding-top: 70px;
  margin-left: -24px;
  bottom: 30px;
  color: #ffffff;
  /* font-weight: bold; */
  font-size: 1.2vw;
}
.main_image a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb 1.5s infinite;
  animation: sdb 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}





#company{
	background-color: #ffffff;
	padding: 0px;
	width: 100%;
	padding: 60px 0px 120px 0px;
	}
.googlemaps iframe,
.googlemaps object,
.googlemaps embed {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}
.adress{
	width: 100%;
	text-align:center;
	margin:auto;
	line-height:30px;
	margin-top:30px;
	}
.call{display:none;}
.mail--blue,
a.mail--blue {
  color: #fff;
  background-color: #000424;
  padding: 3px 9px;
}
.mail--res:hover,
a.mail--blue:hover {
  color: #fff;
  background: #010010;
}
a.mail--radius {
   border-radius: 1vh;
   position: relative;
   /* left: 8px; */
}

footer{
background-color: #000000;
} 
.footer{
    line-height: 2.6vw;
    font-size: 1vw;
    width: 100%;
    color:#000000
}
.footer_container{
	width:100%;
	max-width: 1000px;
	padding: 68px 0px 30px 0px;
	margin: auto;
	height: auto;
	display: table;
	}
.footer_container ul{
  width:100%;
}

.footer_container ul li{
 width: calc(25% - 16px);
 float:left;
 margin: 0px 8px;
}

.footer_container ul li img{
 	width:100%;
}