@charset "utf-8";

/*---------------------------------
リセットｃｓｓ
---------------------------------*/

*{
    padding: 0;
    margin: 0;
  }
html{
 font-size: 100%;
}
/*１６ｐｘのこと*/

body{
 color: #24292e;
 
}

a{
 text-decoration: none;
}

img{
 max-width: 100%;
}
p{
 font-size: 1rem;
 text-align: justify;

}

li{
 list-style: none;
 font-size: 1.2rem;
}

.wrapper{
max-width: 1000px;
margin: 0 auto 130px auto;
font-size: 0.9rem;
padding: 0 4%;
}

.button {
  position: relative;
  display: inline-block;
  padding: 0.8em 2em;
  text-decoration: none;
  color: black;
  background: pink;/*色*/
  border: solid 1px pink;/*線色*/
  border-radius: 25px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
  text-shadow: 0 1px 0 rgba(0,0,0,0.2);
  margin: 5px;
  font-size: 0.9rem;
}

.button:active {
  /*押したとき*/
  border: solid 1px pink;
  box-shadow: none;
  text-shadow: none;
  
}
.button:hover{
  opacity: 0.8;
}



/* ヘッダー */
header{
  display: flex;
  justify-content: space-between;
  padding: 20px;
  background-color: white;
  
}


.head_menu .flex {
    display: flex; 
    justify-content: flex-end;
    
}   

header .pc img {
 width: 250px;
}





/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
.head_menu img {
 width: 250px;
}
@media screen and (min-width:1920px) {

}

@media screen and (max-width:600px) {
 header{
   position: fixed;
   padding: 4px;
   width: 100%;
   height: 70px;
   top:0;
   left:0;
   

   
 }
 
 
 .pc { display: none !important; }
 .sp { display: block !important; }

 .sp img {
  width: 200px;
  height: 55px;
  margin-top: 8px;
  margin-left: 15px;

}


 .head_menu {
   display: none;
 }
 


 .marquee {
   display: none;
 }
}

/* ナビ */
#g_nav{
    background-color: #F09199;
    padding-bottom: 0px;
    
    
   
   }
#g_nav ul {
             display: flex;
             margin: 0 auto;
             width: 94%;
             max-width: 1200px;
             list-style-type: none;
             padding: 0 40px;
        }
#g_nav ul li {
                  position: relative;
                  width: 20%;
                  font-size: 1rem;
                  font-weight: bold;
             }
#g_nav ul li:first-child::before {
                  position: absolute;
                  display: block;
                  content: "";
                  top: 25%;
                  left: 0px;
                  width: 1px;
                  height: 50%;
                  background-color: #976d52;
             }
#g_nav ul li::after {
                  position: absolute;
                  display: block;
                  content: "";
                  top: 25%;
                  right: 0px;
                  width: 1px;
                  height: 40%;
                  background-color: #976d52;
             }
#g_nav ul li a {
                       display: block;
                       padding: 17px 10px;
                       color: black;
                       text-align: center;
                       
                  }
#g_nav ul li a:hover {
                       opacity: 0.5;
                  }
                  
nav .inner {
 display: none;
}

                  



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



  body{
   font-weight: 400;
   
   
  }
  nav {
   display: block;
   width: 220px;
   position: fixed;
   background-color: #ffffff;
   top: 0;
   
   left: -300px;
   bottom: 0;
   transition: all 0.5s;
   z-index: 999;
   opacity: 0;
  }
  .open nav {
   left: 0;
   opacity: 1;
  }
  
  nav .inner {
   display: block;
   padding: 25px;
  
  }
  nav .inner ul {
   list-style: none;
   margin: 0;
   padding: 0;
  
  }
  
  nav .inner ul li {
   margin: 0;
   border-bottom: 1px solid #333;
  }
  nav .inner ul li a {
   display: block;
   text-decoration: none;
   color: #333;
   font-size: 14px;
   padding: 1rem;
   transition-duration: 0.2s;
  }
  nav .inner ul li a:hover {
   background-color: #e4e4e4;
  }
  
  .toggle-btn {
   display: block;
   position: fixed;
   top: 20px;
   right: 30px;
   width: 30px;
   height: 30px;
   z-index: 3;
   cursor: pointer;
   
  }
  .toggle-btn span {
   position: absolute;
   display: block;
   left: 0;
   width: 30px;
   height: 2px;
   background-color: #333;
   transition: all 0.5s;
   border-radius: 4px;
  }
  .toggle-btn span:nth-child(1) {
   top: 4px;
  }
  .toggle-btn span:nth-child(2) {
   top: 14px;
  }
  
  .toggle-btn span:nth-child(3) {
   bottom: 4px;
  }
  .open .toggle-btn span {
   background-color: #fff;
  }
  .open .toggle-btn span:nth-child(1) {
   transform: translateY(10px) rotate(-315deg)
  }
  .open .toggle-btn span:nth-child(2) {
   opacity: 0;
  }
  .open .toggle-btn span:nth-child(3) {
   transform: translateY(-10px) rotate(315deg)
  }
  
  #mask {
   display: none;
   transition: 0.5s;
  }
  
  .open #mask {
   display: block;
   background-color: #000;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   position: fixed;
   opacity: 0.3;
   cursor: pointer;
  }
  
  
  }
 
 
/*---------------------------------
メイン
---------------------------------*/
h1 {
    padding-top: 50px;
}
h2 {
    margin: 20px 0;
}
h3 {
    margin: 10px 0;
}
#hero .table-child {
    display: flex;
}
#hero .child-image {
    width: 160px;
    margin-top: 10px;
}
#hero .table-child {
    margin: 30px 0;
}
#hero .table_button {
    text-align: right;
}
@media screen and (max-width:600px) {
    h1 span {
        display: inline-block;
    }
    h1 {
        text-align: center;
        margin-top: 30px;
    }
    h2 span {
        display: inline-block;
    }
}


/*---------------------------------
フッター
---------------------------------*/

footer {
  background-color: #F09199;
  padding-top: 50px;
}
footer p {
  text-align: center;
}
footer .footer-top  {
  text-align: center;
  height: 250px;
  
}
.footer-top img {
  margin-top: 20px;
  border-radius: 25px;
  margin-bottom: 50px;
}
.footer-top a:hover {
  opacity: 0.5;

}


.footer-two {
  background-color: #333;
}
.footer-two p {
  color: white;
  font-size: 10px;
}
footer .footer-one {
  background-color: #333;
}
footer .footer-one ul li {
  font-size: 13px;

}
footer .footer-one ul li a {
  color: white;
}



/* ナビ */
.footer-one{

  padding-bottom: 0px;
  background-color: pink;
  
 
 }
.footer-one ul {
           display: flex;
           margin: 0 auto;
           padding: 0 3%;
           width: 94%;
           max-width: 1200px;
           list-style-type: none;
      }
.footer-one ul li {
                position: relative;
                width: 20%;
                font-size: 1rem;
                font-weight: bold;
           }
.footer-one ul li:first-child::before {
                position: absolute;
                display: block;
                content: "";
                top: 25%;
                left: 0px;
                width: 1px;
                height: 50%;
                background-color: #976d52;
           }
.footer-one ul li::after {
                position: absolute;
                display: block;
                content: "";
                top: 25%;
                right: 0px;
                width: 1px;
                height: 40%;
                background-color: #976d52;
           }
.footer-one ul li a {
                     display: block;
                     padding: 17px 10px;
                     color: black;
                     text-align: center;
                     
                }
.footer-one ul li a:hover {
                     opacity: 0.5;
                }
















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

  footer {
    padding-top: 20px;
  }

.footer-top a {
  max-width: 100%;
  height: auto;
}
.footer-top img {
  max-width: 100%;
  height: auto;
  margin-top: 10px;
  margin-bottom: 10px;
}
.footer-top {
  margin-bottom: 50px;
}
.footer-top p {
  padding: 2px;
}
.footer-one ul {
  flex-direction: column;
  padding-left: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  margin: 0;
}
.footer-one ul li:first-child::before {
  display: none;
}
.footer-one ul li::after {
  display: none;
}
.footer-one ul li {
  font-size: 16px;
  padding:5px;
  width: 100%;
}
.footer-one ul li a {
  display:inline;
  
  
}

}

/*---------------------------------
トップへもどるボタン
---------------------------------*/

.go-top{
  position: fixed;
  bottom: 100px;
  left: 30px;
  z-index: 9999;
  
}
.go-top a{
  
  width: 50px;
  height: 50px;
  display: inline-block;
  background: #E94E66;
  border-radius: 50px;
  text-align: center;
  line-height: 50px;
  color: black;
  text-decoration: none;

  

  
}

.go-top a:hover{
    opacity: 0.8;
  }
  @media screen and (max-width:600px) {
    .go-top {
      position: relative;
      left: 0;
      bottom: 0;
    }
  

  }