@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c');
@import url('https://fonts.googleapis.com/earlyaccess/hannari.css');
/*============全体に共通する設定=
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 768px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}
=====================*/
/*==========事業紹介のホームページ==================*/
/*----事業紹介のスクロールコンテンツの設定----*/

/*画面全体の設定*/
  body{
       background-color:#F1FBF9;/*水色*/
       margin-top:0%;
       margin-bottom:0px;
       font-family: 'M PLUS Rounded 1c', sans-serif;
}     
          
.main-contena{
     margin-top:130px;
     }

.main-max  a:hover {
  cursor: pointer;
	transform: scale(1.2);
	transition:1s all;
}

.main-max  img{
overflow:hidden;
}

.main-center{
 padding-top:100px;
}

/*.main{
     margin-left:25%;
     margin-top:10%;
     }

.main-box{
     margin-left:7%;
     margin-top:12%;
     }

.main-box  h2{
 text-align:center;
 }

.main-max{
     margin:15% auto 0% auto;
     padding:0% 5% ;
     }

.main-center{
     margin-left:15%;
     margin-top:15%;
     }
     */
/** { 
    margin: 0px; 
    padding-top: 0px; 
}*/

html{
  scroll-behavior: smooth;
}

p{
    text-indent: 1em;/*段落の１文字を字下げ*/
}

/*=======ナビメニュー部分の設定======*/

.top-logo{
  position: fixed;
  width: 25%;
  top: 0;
  left:0;
  z-index: 10000;
}

/*============右側のトップに向かう矢印を固定======================*/
/*.to-top{
  position: fixed;
  /*width: 10%;*/
  /*bottom: 10%;
  right:0;
  z-index: 10000;
  }*/

nav {
  width: 80%;
  height:150px;
  /*font-family:2em;*/
 background-image: url(../img/cloud.png);
  display: flex;
  justify-content: space-around;
  padding-top: 0px;
  padding-bottom: 0px;
  position: fixed;
  /*width: 100%;*/
  top: 0;
  right:0;
  z-index: 1000;
}

nav ul{
  width: 100%;
 display: flex;
 justify-content: space-around;
padding-left:23%;
}

nav li{
 /* width:10%;*/
  list-style: none;
  padding-top: 10px;
 }

/*回り込みを解除する*/
.clear{
  clear: both;
}

/*a{
text-decoration: none;
}*/

.top-icon{
   width:50px;
   position:center;
}


/*ページ内を移動する設置したナビの設定はここから↓*/
#pagelink_navi{
               position:fixed;
               bottom:8%;
               right:0;
               /*width:200px;*/
               z-index:80;
               }
               
a#pagelink_navi{
						border-style:none;
						}
						
a:hover#pagelink_navi{
						border-style:none;
						}
						
html{
   scroll-behavior: smooth;
   }


/*=============全体の設定=============================*/
.indent{
   text-indent: 1em;
   }

.center{
  text-align:center;
}

.right{
  text-align:right;
}

.yuruhuwa-sutetti{
    font-size: 1.2em;/* 文字の大きさ */
    font-weight: bold;/* 文字の太さ */
    color: #fff;/* 文字の色 */
    border: 2px dashed #ffecef;/* ステッチの太さ・種類・カラー */
    background: #F9B8CD;/* 背景色 */
    border-radius: 8px;/* 四隅の丸み */
    box-shadow: 0 0 3px 3px #F9B8CD;
    margin: 0 0 1.5em;
    padding: 0.5em 0.8em;
}

h1{
   text-align:center;
   font-size:2em;
}


#footer{
   width:100%;
   height:40%;
   /*background: #B47142;/*#E19661;/* #875C44;背景色 */
  background: #6B4A2B;/* 背景色 */
}



/*===========フッター部分の設定==================*/
.construction{
   list-style-type: none;
}

.construction ul {
   margin: 0;
   padding: 0;
   list-style-type: none;
}

.construction ul {
   position: relative;
   /* margin-top: 1rem; */
   margin-left: 15px;
}

.construction ul:before {
   content: "";
   display: block;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   width: 0;
   border-left: 1px solid red;
}

.construction ul li {
   position: relative;
   margin: 0;
   padding: 7px15px;
   /* padding: 0; */
}

.construction ul li:before {
   content: "";
   display: block;
   position: absolute;
   top: 15px;
   left: 0;
   width: 15px;
   height: 0;
   border-top: 1px solid blue;
}

.construction ul li:last-child:before {
   top: 15px;
   bottom: 0;
   height: auto;
   background-color: #fff;
}


/*リンクを貼られている場所を微調整のために少し下げるcss*/

.anchor{
  display:block;
  padding-top:12%;
  margin-top:-12%;
} 

/*共通したフッターの設定*/
#footer{
     position: relative;
}

.footer-line{
  height:80px;
  width:100%;
  }

.footer-line img{
  position:absolute;
  left:30px;
  bottom:-10px;
  width:75%;
}

.migiyose{
   position: absolute;
   top:-158px;
   right:0px;
   z-index:200; 
   width:330px;
}


/**************** 以下、メニューのスタイリング ****************/
.menu {
  position: fixed;
  /* メニューの位置マイナス指定で画面外に */
  transform : translateX(130%);
  width: 70%;
  height: 100vh;
  /* メニューを縦に */
  display: flex;
  flex-direction: column;
  color: #efefef;
  background-color: rgba(167, 148, 58, 0.7);
  transition: transform .3s;
}

.menu-list {
  width: 100%;
  height: 100%;
  /* メニューテキスト位置をリスト内中心に */
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu-list:hover {
  color: #333;
  background-color: rgba(255, 255, 255, 0.5);
  transition: .3s;
  cursor: pointer;
}

/***** メニューオープン時位置0にして画面内に *****/
.menu.open {
  transform: translateX(30%);
}


.sec-title {
  padding-top: 30px;
  padding-bottom: 30px;
  /*padding: 30px;*/
  display: grid;
  place-items: center;
  position: relative;
  color:#000;
}

.sec-title .ja {
  font-size: 16px;
  font-weight: 300;
  line-height: 1;
 }

.sec-title .en {
  font-size: 40px;
  font-weight: bold;
}

.sec-title::after {
  content: "";
  /*width: 60px;*/
  height: 2px;
  background-color: #333;
  position: absolute;
  bottom: 30px;
}

.sec-title02 {
  padding-top: 30px;
  padding-bottom: 30px;
  /*padding: 30px;*/
  display: grid;
  place-items: center;
  position: relative;
  color:seagreen;
}

.sec-title02 .ja {
  font-size: 16px;
  font-weight: 300;
  line-height: 1;
 }

.sec-title02 .en {
  font-size: 40px;
  font-weight: bold;
}


.img-box{
width:100%;
}

.img-box img{
width:24%;
margin-left:0.5%;
}

.float-left{
               float:left;
}

/*ここからはジャンプ位置調整用のcss*/
a.jump_point {
height: 1px;
display: block;
padding-top: 140px;
/*margin-top: -40px;*/
}
/*ここまではジャンプ位置調整用のcss*/

/*******************************************************************/
/**************** 1200以上の場合の表示 ****************/

     @media screen and (min-width: 1201px) {
         /* スクリーンサイズが1201px以上の場合に適用 */
       /*background-color:#F1FBF9;/*薄い水色*/
    
/*画面全体の設定*/
.top-icon{
   width:55px;
   position:center;
}
	.top-logo{
                  position: fixed;
                  width: 22%;
                  top: 0;
                  left:0;
                  z-index: 10000;
                 }


#footer{
   width:100%;
   height:30%;
   /*background: #B47142;/*#E19661;/* #875C44;背景色 */
  background: #6B4A2B;/* 背景色 */
}

.float-left{
  float:left;
}

.float-none{
  float:none;
}

   } /* スクリーンサイズが1201px以上の場合に適用 */


/*******************************************************************/
/**************** 最大値７６８の場合の表示 ****************/
@media screen and (max-width: 768px) {
/* スクリーンサイズが最大値768px以下の場合に適用 */
  body{
       background-color:#F1FBF9;/*水色*/
       margin: 0 0 0 0 ;
       padding: 0 0 0 0 ;
     } 
 
.top-icon{
   width:30px;
   position:center;
}

	.top-logo{
                  position: fixed;
                  width: 25%;
                  top: 0;
                  left:0;
                  z-index: 1000;
                 }
                 

/*============右側のトップに向かう矢印を固定======================*/
nav {
  width: 100%;
 /* height:10%;*/
 background-image: url(../img/cloud.png);
  display: flex;
  justify-content: space-around;
  padding-top: 0px;
  padding-bottom: 0px;
 /* position: fixed;*/
  /*width: 100%;*/
/*  top: 0;
  right:0;
  z-index: 1000;*/
}


nav ul{
 display: flex;
 justify-content: space-around;
  padding-left:20%;
  /*padding-top:1em;*/
  width: 100%;
}

nav li{
  width:11%;
  list-style: none;
  font-size:1.1em;
  /*margin-top: 100px;*/
  /*border-right:3px solid #fff;*/
}

.top-icon{
   width:45px;
   position:center;
}

#footer{
   width:100%;
   height:20%;
  background: #6B4A2B;/* 背景色 */
}


.sec-title {
  padding-top: 20px;
  /*padding: 30px;*/
  display: grid;
  place-items: center;
  position: relative;
  color:#000;
}

.sec-title .ja {
  font-size: 16px;
  font-weight: 300;
  line-height: 1;
 }

.sec-title .en {
  font-size: 40px;
  font-weight: bold;
}
}/*最大値768までのメディアクエリの設定はここまで*/



/*******************************************************************/
/**************** 450以上の場合の表示 ****************/
 /* スクリーンサイズが最大値450px以下の場合に */
@media screen and (max-width: 450px) {
/*画面全体の設定*/
  body{
/*       background-color:#fff;/*#F1FBF9;/*水色*/
      }
      
.main-max{
     margin-top:0px;
     }

nav {
 background-image: none;
 }


/*これより下はハンバーガーの設定*/
.hamburger {
    margin: 20px auto 0;
    width: 100%;
    /*max-width: 900px;*/
    display: flex;
    justify-content: space-between;
}

.hamburger a {
    text-decoration: none;
    color: #000;
    font-size: 20px;
    letter-spacing: 0.2em;
}

.hamburger img {
 margin-right:1em; 
}

/*.logo {
    font-size: 40px;
    font-weight: 700;
}*/

.hamburger .btn-gNav {/*折りたたんだ際のメニュー設定*/
    position: fixed;
    top: 15px;
    right: 30px;
    width: 13%;
    height: 50px;
    /*z-index: 100;*/
    box-sizing: border-box;
    cursor: pointer;
    -webkit-transition: all 400ms;
    transition: all 400ms;
      z-index: 2000;
}

.hamburger .btn-gNav span {/*折りたたんだ際のメニュー幅*/
    position: absolute;
    width: 100%;
    height: 5px;
    /*background: #ffffff;*/
    background: salmon;
    border-radius: 20px;
    -webkit-transition: all 400ms;
    transition: all 400ms;
}

.hamburger .btn-gNav span:nth-child(1) {
    top: 0;
}

.hamburger .btn-gNav span:nth-child(2) {
    top: 10px;
}

.hamburger .btn-gNav span:nth-child(3) {
    top: 20px;
}

.hamburger .btn-gNav.open span:nth-child(1) {
    background: #ffffff;
    top: 6px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.hamburger .btn-gNav.open span:nth-child(2),
.hamburger .btn-gNav.open span:nth-child(3) {
    top: 6px;
    background: #ffffff;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}


.btn-gNav {
    display: none;
}

.gNav .gNav-menu {
    display: flex;
    justify-content: space-between;
}

.gNav .gNav-menu li {
    margin: 0 auto;
    padding: 0 0 0 0;
    /*padding: 0 5px;*/
}

   .btn-gNav {
        display: block;
    }

    .gNav {/*開閉するメニュー部分の設定*/
        position: fixed;
        top: 0;
        right: -100%;
        width: 50%;/*開閉するメニューの幅*/
        background-color: #fadbdf;/*rgba(0, 0, 0, 0.8);*/
        height: 100%;
        font-size: 16px;
        box-sizing: border-box;
        /*z-index: 150;*/
        z-index: 1500;
        padding-top: 50px;
        transition: .3s;
    }

    .gNav.open {
        right: 0;
    }

    .gNav .gNav-menu {
        padding: 0;
        width: 100%;
        height: 100%;
        display: block;
        flex-direction: column;
        text-align: center;
        /*justify-content: center;*/
    }

    .gNav .gNav-menu li {
        width: 86%;
        padding: 10px;
        border-bottom: #525252 1px solid;
        color:#000;
        display: inline-block;
    }
    
/*共通したフッターの設定*/
#footer{
     position: relative;
}

.footer-line{
  position: relative;
  height:150px;
  }

.footer-line img{
  position:absolute;
  left:30px;
  bottom:-10px;
  width:100%;
  overflow:hidden;
}

.migiyose{
   position: absolute;
   top:-110px;
   right:0px;
   z-index:50; 
   width:230px;
}

/*ページ内を移動する設置したナビの設定はここから↓*/
/*#pagelink_menu_navi{
               position:fixed;
               top:0;
               right:0;
               /*width:200px;*/
               /*z-index:1000;
               }
               
a#pagelink_menu_navi{
						border-style:none;
						}
						
a:hover#pagelink_menu_navi{
						border-style:none;
						}*/

/*ページ内の上部くもの部分*/
#head{
               position:fixed;
               top:0;
               left:0;
               width:450px;
               z-index:100;
               }
/*.top-logo{
                  position: fixed;
                  width: 45%;
                  top: 0;
                  left:35%;
                  z-index: 100;
                 }*/
                 
/*ページ内を移動する設置したナビの設定はここから↓*/
#pagelink_navi{
               position:fixed;
               bottom:0;
               right:0;
               width:120px;
               z-index:80;
               }
              
.sec-title {
 padding-top: 0px;
  padding-bottom: 10px;
 /* padding-top: 20px;*/
  margin: 0 0 0 0 ;  
}

.sec-title .ja {
  font-size: 16px;
 }

.sec-title .en {
  font-size: 30px;
}



}/* 最大値450px以下に適用されるCSS（タブレット用） */