@charset "utf-8";
/* CSS Document */
/*
Theme Name: rips-WP
Description:honeyのテンプレート
Theme URI:
Author:
Author URI:
Version: 1.0.0
License:
License URI:
*/

body{
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size:1.2rem;
    color:#2c2c2c;
    background-color:#fafafa;
    display: flex;
  flex-flow: column;
  min-height: 100vh;
    }
a{color:#4888e5;text-decoration:none; }

a:hover{color:#c6c6c6;}

a img{
    opacity:1;
    -webkit-transition: all 0.5s ease 0.5s;
    -js-transition: all 0.5s ease 0.5s;
    transition: all 0.5s ease 0.5s;
    }

a:hover img{
    opacity:0.6;
    }

.sns_icon a:hover{
    opacity: 0.6;
}


.font-mp { font-family: "M PLUS 1p";}



/*page top*/

#page-top{
  width:40px;
  height:auto;
  position:fixed;
  right:20px;
  bottom:70px;
  display:none;
    z-index: 10;
}

#page-top img{
    width:100%;height:auto;
}

#page-top p a{
  line-height:20px;
  text-decoration:none;
  display:block;
  cursor:pointer;
}


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

#page-top{
  width:40px;
}

}



/*header*/

header {
    padding: 0px;
    width: 100%;
    top: 0;
    right: 0;
    background-color:#fafafa;
}


#header_erea {
    margin:0px auto;
    width: 1080px;
    background-color:#fafafa;
    padding:10px;
    box-sizing: border-box;
}

#header_text{padding:5px;font-size:1rem;background-color:#185aa3;padding:10px;text-align: center;color:#fafafa;
}



.title_logo{
    width:10%;
    text-align: center;
    font-size:3rem;
　　　color:#080808;
    padding:10px;
    
}


.headcenter_area{width:60%;}

.headright_area{width:30%;padding:20px;}
.tel_erea{font-weight:bold;font-family: sans-serif;font-size:2rem;}
.tel_erea a{font-weight:bold;font-family: sans-serif;color:#185aa3;}





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


#header_erea{
    width: 100%;
    font-weight:bold;

    }

#title_logo{
    font-size:2rem;
}
    
.title_logo{
    width:30%;
    text-align: center;
    font-size:3rem;
　　　color:#080808;
    padding:10px;
    
}

.headcenter_area{width:10%;}

.headright_area{width:60%;padding:10px 5px 0px 10px;}
.tel_erea{font-weight:bold;font-family: sans-serif;font-size:2rem;}
#header_text{font-size:0.8rem;text-align: center;}


}

/*menu erea*/

.fixed{
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 9999;
}

#nav_area{
    width: 100%;
    margin: 0px auto;
    z-index: 100;
    background-color:#fafafa;
    
}
nav {
    width: 100%;
    padding: 10px 0px;
    margin:0px auto;
    background-color:#fafafa;
    
    

}

nav ul {
    padding: 0px;
    margin: 0px;
    display:flex;
    display:-webkit-box;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-display:flex;
    -webkit-justify-content: center;
    -js-display:flex;
    -js-justify-content: center;
}
nav ul li {
    margin: 0px;
    position: relative;
    padding: 10px 40px;
}
.menu_icon{padding:5px;}
.menu_icon img{width:40%;height:auto;}

nav ul li a {
    
    display: block;
    margin: 0px;
    font-size:2rem;
    text-align: center;
    text-decoration: none;
    color: #2c2c2c;
    white-space: nowrap;
    opacity:1;
    -webkit-transition: all 0.3s ease 0.3s;
    -o-transition: all 0.3s ease 0.3s;
    transition: all 0.3s ease 0.3s;
}

#mobi_nav{display:none;}

@media screen and (min-width:769px){

nav ul li a:hover {
    color: #a5a5a5;
    opacity:0.6;

}

#mobi_nav ul li a:hover {
    color: #a5a5a5;
    opacity:0.6;

}

}

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

#nav_area{
width: 100%;

}

.mobi{display:none;}
    
nav ul li {
    padding: 10px;
}

nav ul li a {
    -webkit-box-flex: 1;
    font-size:1.8rem;
    width: auto;
    border-style:none;
    white-space:nowrap;
    margin:0px;
    padding: 5px;
}

#mobi_nav{
    display:block;
    position:fixed;
    bottom:0px;
    margin: 0px;
    width: 100%;
    padding: 5px 0px 5px;
    background-color:rgb(255, 253, 253,0.6);
    
    z-index: 100;
}

#mobi_nav ul {
    padding: 0px;
    margin: 0px;
    display:flex;
    display:-webkit-box;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-display:flex;
    -webkit-justify-content: center;
    -js-display:flex;
    -js-justify-content: center;
    -webkit-flex-wrap:wrap;
    -js-flex-wrap:wrap;
    flex-wrap:wrap;
}
#mobi_nav ul li {
    padding: 0px;
    margin: 0px;
    display: block;
    position: relative;
}
#mobi_nav ul li a {
    
    display: block;
    font-size:2rem;
    width: auto;
    border-style:none;
    margin:0px;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    color: #2c2c2c;
    white-space: nowrap;
    opacity:1;
    -webkit-transition: all 0.3s ease 0.3s;
    -o-transition: all 0.3s ease 0.3s;
    transition: all 0.3s ease 0.3s;
}
    
.menu_icon{padding:0px;}



}

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


nav ul li a {
    font-size:1.8rem;
    width: auto;
    border-style: none;
}

#mobi_nav ul li a {
    font-size:1.8rem;
    width: auto;
    border-style: none;
}


}

/*  menu end*/

/* extra menu */

nav ul li ul {
    position: absolute;
    top: 100%;
    left: 5px;
    flex-direction: column;
    -webkit-flex-direction: column;
    -js-flex-direction: column;
}

nav ul li ul li {
    float: none;
    margin: 10;
    padding:10px;
    background-color: #ffffff;
}

nav ul li ul li a{
    font-size:1.2rem;
}

nav ul li ul li a:hover{
    font-size:1.2rem;
}

nav ul ul {
    visibility: hidden;
    opacity: 0;
    transition: .2s ease-in-out;
    transform: translateY(-20px);
}
nav ul li:hover > ul {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}



/* extra menu */

/*main*/
main{width:100%;flex: 1;}

section{width:100%;padding:0px;}

section h1{
    width: 100%;
    padding: 20px 0px 10px;
    text-align: left;
    letter-spacing : 3px;
    color: #2c2c2c;
    font-size:3rem;
    color:#185aa3;
    margin:20px auto;
    text-align: center;
    }

section h2{
    color: #2c2c2c;
    
}

.name{
    color: #2c2c2c;
    
    font-size:4rem;
    padding:0px 0px 10px 20px;
}

.shop{
    color: #2c2c2c;
    
    font-size:4rem;
    padding:10px 0px 10px 0px;
}



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


section h1{font-size:6vw;}

}


/* top slide*/

.slider_box{width:100%;
}

.slider_box img{
    width:100%;height:auto;
}

.slide_inbox_left{width:60%;}

.slide_inbox{
    width:30%;
    height:100vh;
    padding:20px;
    margin:0px auto;
    background-color:rgba(53, 92, 190, 0.6);
    color:#fefefe;
    font-size:1.6vw;
    line-height: 4vw;
}


.slide_inbox h2{font-size:3vw;
    color:#fcfeff;
    margin:0px auto;
    text-align: center;
background-color:rgba(53, 92, 190, 1);
    padding-bottom:10px;
    font-family: "M PLUS 1p";
    font-weight:bold;

}

.slider_box1{width:100%;height:70vh;
background-image:url(img/slider01.jpg);
background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
-webkit-display: flex;
-moz-display: flex;
-ms-display: flex;
-o-display: flex;
display: flex;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;

}

.slider_box2{width:100%;height:70vh;
background-image:url(img/slider02.jpg);
background-position: center center;
  background-repeat: no-repeat;
  background-size: cover ;
    display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
-webkit-display: flex;
-moz-display: flex;
-ms-display: flex;
-o-display: flex;
display: flex;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;

}

.slider_box3{width:100%;height:70vh;
background-image:url(img/slider03.jpg);
background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
    display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
-webkit-display: flex;
-moz-display: flex;
-ms-display: flex;
-o-display: flex;
display: flex;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;

}

.slider_box4{width:100%;height:70vh;
background-image:url(img/slider04.jpg);
background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
    display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
-webkit-display: flex;
-moz-display: flex;
-ms-display: flex;
-o-display: flex;
display: flex;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;

}

.slider_box5{width:100%;height:70vh;
background-image:url(img/slider05.jpg);
background-position: center center;
  background-repeat: no-repeat;
  background-size: cover ;
    display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
-webkit-display: flex;
-moz-display: flex;
-ms-display: flex;
-o-display: flex;
display: flex;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;

}


.slider_img img{width:60%;height:auto;}

.slider_txt{width:30%;background-color: #b7f1ff;padding:10px;}


@media screen and (max-width:768px){
    .slide_inbox_left{width:100%;}
    .slide_inbox{
    width:60%;
    height:40vh;
    font-size:3vw;
    line-height: 6vw;
}


.slide_inbox h2{
    font-size:5vw;}
    
    
}


/* top slide end*/


.top_area{display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
    width:100%;
}

.logo{
    width: 80%;
    padding:10px;
    opacity: 0.9;
    
}
.logo img{
    width: 100%;
    height:auto;
    
}

.top_comment{
    width:60%;
    padding:20px;
    font-size:3vw;
    color:#fafafa;
    margin:0px auto;
    text-align: center;
    filter: drop-shadow(2px 2px 2px rgba(0, 48, 88, 0.6));
}

.top_bot{
    width:60%;
    margin:0px auto;
    
}

.top_bot ul{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    list-style-type: none;
}

.top_bot ul li{
    padding:10px;
    width:33%;
    height:auto;
}

.top_bot ul li a img{width:100%;
height:auto;}

.top_bot ul li a:hover img{width:100%;
height:auto;transform-origin: 50% 50%;
  animation-name:big;
  animation-duration:1s;}

@keyframes big{
  0%{
    transform: scale(1);
  }
    50%{
    transform: scale(.8);
  }
 100%{
    transform: scale(1);
  }
}





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

.logo{
    width: 60%;
    }
    
.top_bot{
    width:80%;
    
}

}

.blog_icon{
    width:200px;height:auto;
    z-index:100;
    top:300px;
    left:100px;
    position: absolute;
    background-color: rgba(255,254,254,1);
    border-radius:100px;

}
.blog_icon img{
    width:100%;height:auto;
    transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
}

.blog_icon a{
    opacity:1;
    -webkit-transition: all 0.3s ease 0.3s;
    -o-transition: all 0.3s ease 0.3s;
    transition: all 0.3s ease 0.3s;
}
.blog_icon a:hover{
    opacity: 0.3;
}

.img_photo{
padding:50px;
width:800px;
height:auto;
margin:0px auto;
}

.img_photo img{
    width:100%;
    border-radius:50%;
    border:10px solid #fff;
}

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

.blog_icon{
    width:100px;height:auto;
    z-index:100;
    top:200px;
    left:20px;
    position: absolute;
    background-color: rgba(255,254,254,1);
    border-radius:100px;

}

 .img_photo{
padding:50px;
width:100%;
}

}

.contents{
    width:1080px;
    margin:-1px auto;
  　padding:10px;
    box-sizing: border-box;
    border-radius:2px;
    }



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

 .contents{
    width:100%;
     padding:10px;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    }
}

.sns_box{}
.sns_icon{
    width:50px;height:50px;
    padding:5px;
}
.sns_icon img{width:100%;height:auto;}

.box01{
    width:100%;
    padding:30px;
    background-color:#fafafa;
    line-height:200%;
    z-index:1;
    }
.box01 img{width:100%;height:auto;}

.comment_box{
    width:98%;
    margin:0px auto;
    border-radius:5px;
    padding:20px;
    font-family: "M PLUS 1p";
    font-size:3rem;
    line-height: 5rem;
    color:#185aa3;
    font-weight:bold;
    
    
}


.comment_box strong{color:#fd4848;}



.indent_tex{text-indent:35px;}

.btn01{width:80%;margin:0px auto;background-color:#185aa3;
border-radius:30px;color:#fafafa;font-weight:bold;padding:20px;text-align:center;display:block;font-size:2.6rem;}

.btn01:hover{background-color:#0e3158;}

.flow_box{
    width:40%;
    margin:0px auto;
    background-color:#edf5ff;
    border:10px solid #edf5ff;
    border-radius:5px;
    padding:20px;
    font-size:1.6rem;
    font-family: "M PLUS 1p";
    font-size:2rem;
    border-radius:20px;
    
}

.flow_box h2{width:100%;margin:0px auto 10px;;background-color:#185aa3;
border-radius:30px;color:#fafafa;font-weight:bold;padding:10px;text-align:center;display:block;font-size:2.6rem;}

.flow_box img{width:100%;height:auto;}

.flow_box2{
    width:80%;
    margin:0px auto;
    background-color:#edf5ff;
    border:10px solid #edf5ff;
    border-radius:5px;
    padding:20px;
    font-size:1.6rem;
    font-family: "M PLUS 1p";
    font-size:2rem;
    border-radius:20px;
    
}

.flow_box2 h2{width:100%;margin:0px auto 10px;;background-color:#185aa3;
border-radius:30px;color:#fafafa;font-weight:bold;padding:10px;text-align:center;display:block;font-size:2.6rem;}

.flow_box2 img{width:100%;height:auto;}

.yajirushi{width:10%;margin:0px auto;}

.yajirushi img{width:100%;height:auto;}

.box50{width:50%;}
.box50 img{width:100%;height:auto;}

.about_box{
    width:50%;
    background-color:#fafafa;
    border:1px solid #fafafa;
    line-height:200%;
    z-index:1;
    margin:-1px 0px;
    }
.about_box img{width:100%;height:auto;}

.about_box h2{text-align: center;margin:0px padding:10px;font-size:2vw;}

.text_box{padding:10px 30px;font-size:1.6rem;line-height:150%;}

.info_box{
    width:98%;
    margin:0px auto 40px auto;
    margin:5px;
    border:1px solid #2c2c2c;
    padding:10px;
    border-radius:5px;
    }.info_box li{border-bottom:1px dotted #2c2c2c;padding: 5px 0px;font-size:1.6rem;m}

.day_color{color:#185aa3;}


.box01 table{width:100%;height:auto;}

.box01 td{padding:5px 10px;}
.box01 tr:nth-child(odd){background-color:#a3cfff;}
.box01 tr:nth-child(even){background-color:#cfe6ff;}

.photo_box{padding:10px 0px;}

.photo_inbox{
    width:33%;
    padding:5px;
}

.photo_inbox:hover{opacity:0.4;}

.photo_inbox img{width:100%;height:auto;}

@media screen and (max-width:768px){
    .box01{font-size:3vw;padding:10px;}
    .tect_box{font-size: 2.6vw;}
    .info_box{width:50%;}
    .info_box a{font-size:4vw;}
    .comment_box{
    padding:　10px;
    font-size:1.2rem;
    font-size:1.6rem;
    
}

.comment_box li{
    font-size:1.6rem;
    line-height: 2rem;
}

.indent_tex{text-indent:1.2rem;}
    

}

/*pop up box*/

.tiles{width:50%;}
.base_text{
    z-index: 1;
    position: absolute;
    top:5%;
    left:2%;
    font-size:2.6rem;
    color:#fefefe;
    filter: drop-shadow(2px 2px 0px #212121);
    font-family: "M PLUS 1p";
    font-weight:bold;
}

.base_text img{width:80%;height:auto;}

.txt_blue{color:#76c4f0;}

.tiles .tile {
  display: inline-block;
  margin: 5px;
  text-align: left;
  opacity: .99;
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05);
    font-size:1.2rem;
}
.tiles .tile:before {
  content: '';
  background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  background: rgba(24, 90, 163, 0.7);
  width: 100%;
  height: 100%;
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 2;
  -webkit-transition-property: top, opacity;
          transition-property: top, opacity;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
.tiles .tile img {
  display: block;
  max-width: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.tiles .tile .details {
  font-size: 16px;
  padding: 20px;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 3;
}
.tiles .tile .details span {
  display: block;
  opacity: 0;
  position: relative;
  top: 100px;
  -webkit-transition-property: top, opacity;
          transition-property: top, opacity;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.tiles .tile .details .title {
  line-height: 1;
  font-weight: 600;
  font-size: 4rem;
  font-family: "M PLUS 1p";
    padding-bottom:20px;
}
.tiles .tile .details .info {
  line-height: 1.2;
  margin-top: 5px;
  font-size: 2rem;
    font-family: "M PLUS 1p";
}
.tiles .tile:hover:before,
.tiles .tile:hover span {
  opacity: 1;
}
.tiles .tile:hover:before {
  top: 0%;
}
.tiles .tile:hover span {
  top: 0;
}
.tiles .tile:hover .title {
  -webkit-transition-delay: 0.15s;
          transition-delay: 0.15s;
}
.tiles .tile:hover .info {
  -webkit-transition-delay: 0.25s;
          transition-delay: 0.25s;
}

@media screen and (max-width:768px){
.tiles{width:100%;}

.tiles .tile .details .title {
  font-size: 6vw;
}
.tiles .tile .details .info {
  font-size: 3vw;
}
}

/*pop up box end*/
/*news*/

.news_box{
  width : 50%;padding:10px;
box-sizing: border-box;
}
.news_box img{width:100%;height:auto;}
/*news end*/



/*main end*/

/*footer*/
footer{
 width:100%;
    margin:0px auto;
    background-color:#185aa3;

color:#fafafa;
}

#footer_menu{
   width:1080px;
   margin:0px auto;
   padding:10px;

}

#footer_menu ul {
    padding: 0px;
    margin: 0px;
    display:flex;
    display: -webkit-box;
    -webkit-box-pack:center;
    justify-content: center;
    -webkit-display:flex;
    -webkit-justify-content: center;
    -js-display:flex;
    -js-justify-content: center;
    -webkit-flex-wrap:wrap;
    -js-flex-wrap:wrap;
    flex-wrap:wrap;
}
#footer_menu ul li {
    padding: 0px;
    margin: 0px;

}
#footer_menu ul li a {
    display: block;
    margin: 0px;
    padding: 10px;
    font-size:1.2rem;
    text-align: center;
    text-decoration: none;
    color: #fafafa;
    white-space: nowrap;

}

#footer_menu ul li a:hover {
    color: #fafafa;

}

@media screen and (max-width:768px){
footer{
 width:100%;
}
#footer_menu{
   width:100%;

}
}

#footer_copy{
   width:100%;
    padding:10px;
font-size:1rem;
    color: #fafafa;
    text-align: center;


}

@media screen and (max-width:768px){
#footer_copy{
    padding:10px 10px 60px 10px;

}

}


/*footer end*/

/*youtube flex*/
.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
/*youtube flex end*/

/*google map flex*/



.google_map {
  width: 100%;
  height:400px;
}

/*google map end*/


/*contact form*/

.contact_box{
    width:80%;margin:0px auto;padding:10px;
}
.c_box{
    display:flex;
    width:80%;margin:0px auto;
    font-size:2rem:;

    }
    .c_left{
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    -o-flex: 1;
    -js-flex: 1;
    flex: 1;
    background-color:#a8d1ff;
    color: #185aa3;
    font-weight:bold;
    text-align: center;
    padding: 5px 10px;
    border-bottom:#030360 solid 1px;

    }
    .c_right{
    -webkit-flex: 2;
    -moz-flex: 2;
    -ms-flex: 2;
    -o-flex: 2;
    -js-flex: 2;
    flex: 2;
    background-color:#e3f0ff;
    color: #0E0E0E;
    padding: 5px 10px;
    border-bottom:#030360 solid 1px;
    }

.c_mail{width:50%;margin:0px auto;padding:20px;}

.c_mail a{background-color: #a8d1ff;color: #185aa3;font-weight:bold;text-align:center;padding:10px;font-size:2.4rem;display:block;border-radius:10px;}


.c_mail a:hover{background-color: #e7f2ff;color: #79abe3;}


@media screen and (max-width:768px){
   .c_box{
    flex-direction: column;
    -webkit-flex-direction: column;
    -js-flex-direction: column;
       width:100%;
    }

   .c_left{
    min-height: 0%;
    flex:0 1 auto;
    -webkit-flex:0 1 auto;
    -js-flex:0 1 auto;
    border:#7fb78e solid 1px;
    }
    .c_right{
    min-height: 0%;
    flex:0 1 auto;
    -webkit-flex:0 1 auto;
    -js-flex:0 1 auto;
    border:#7fb78e solid 1px;
    }

}

/*contact form end*/


/* sns */
.fb-page{
    padding:10px;
    margin:0px auto;
}

/*blog*/

.size-full{
    width:100%;
    height:auto;
}

/*blog end*/

/*pp erea*/
.pp_box{
    width:80%;padding:10px;margin:0px auto;font-size:1.6rem;
line-height:150%;
}

/*single.page */
.contents_page{width:80%;margin:0px auto;padding:10px;}

.contents_page img{width:100%;height:auto;}

.contents_page h2{
    font-size:2.6rem;text-align:center;padding:10px;
    font-weight:bold;
}

/*about page */

.txt-sub {color: #185aa3;line-height: 100%;}


.gr-box{display:grid;
			width:90%;margin:0px auto 20px;
		grid-template-columns: repeat(2,1fr);
    padding:4px 10px;
		}


.gr-inbox-p{box-sizing: border-box;padding:2px;margin:0px;position:relative;}

.gr-inbox-p img{width:100%;height:auto;vertical-align: bottom;padding:0px;margin:0px;z-index: 5;
opacity:0.8;
}

.gr-inbox-p h2{position:absolute;
  margin:0;
    top:0;
  padding:20px;
color:#185aa3;font-size:3rem;
    background-color:rgba(250, 250, 250, 0.7);
    line-height: 120%;
}

.gr-inbox-t{box-sizing: border-box;padding:10px;margin:0px; font-size:1.6rem;}

.txt-rt:{text-align: right;}

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

.gr-box{display:grid;
		grid-template-columns: repeat(1,1fr);
		}

}

/*company*/
.com-box{
    width:90%;margin:0px auto;
    display: grid;
    grid-template-columns: repeat(5,1fr);
    font-size:1.6rem;
    
    
}
.com-name{
    grid-column: 1/2;padding:10px;margin-bottom:5px;border-left:3px solid #185aa3;place-items: center;display: grid;background-color:#fafafa;
}

.com-txt{grid-column: 2/5;padding:10px;background-color:#fafafa;}

@media screen and (max-width:768px){
    .com-box{
    width:100%;font-size:1.4rem;
}
.com-name{
    grid-column: 1/6;border-left:0px solid #185aa3;background-color:#b2d6ff;padding:10px 0px;
}

.com-txt{grid-column: 1/6;place-items: center;display: grid;padding:10px 0px;}
   
    
}

.rips_box{
width:90%;
margin:0px auto;

}

.rips_c{color:#d44444;}

.rips_com{font-size:2rem;
width:90%;padding:30px;
margin:0px auto;line-height: 150%;
}

.rips_com p{padding:10px;}

.vision_box{
width:100%;
margin:0px auto;
flex-wrap: nowrap;}

.vision_in{
    width:33.33333%;
    width: -webkit-calc(100/3);
    width:calc(100/3);
    border-radius:20px;
    padding:10px;
    box-sizing: border-box;
    margin:5px;
    font-size:1.6rem;
    color:#0d325a;
}

.v_back01{background-color:#80edfc;}

.v_back02{background-color:#ccffb6;}

.v_back03{background-color:#ffe6b6;}

.vision_in h2{
    text-align:center;color:#e36161;font-weight:bold;
}

.vision_in_in{border:2px solid #fafafa;padding:10px;border-radius:10px;
height:100%;}

.com_box{
    display:flex;
     margin:5px 40px 5px 40px;

    }
    .com_left{
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    -o-flex: 1;
    -js-flex: 1;
    flex: 1;
    background-color: #4c6a67;
    color: #fafafa;
    text-align: center;
    padding: 5px;
    border-bottom:#4c6a67 solid 1px;


    }
    .com_right{
    -webkit-flex: 2;
    -moz-flex: 2;
    -ms-flex: 2;
    -o-flex: 2;
    -js-flex: 2;
    flex: 2;
    background-color: #fafafa;
    color: #0E0E0E;
    padding: 5px;
    border-bottom:#4c6a67 solid 1px;
    }

@media screen and (max-width:768px){
   .com_box{
    flex-direction: column;
    -webkit-flex-direction: column;
    -js-flex-direction: column;
    }

   .com_left{
    min-height: 0%;
    flex:0 1 auto;
    -webkit-flex:0 1 auto;
    -js-flex:0 1 auto;
    border:#4c6a67 solid 1px;
    }
    .com_right{
    min-height: 0%;
    flex:0 1 auto;
    -webkit-flex:0 1 auto;
    -js-flex:0 1 auto;
    border:#4c6a67 solid 1px;
    }
    .rips_com{font-size:1.4rem;width:100%;padding:10px;}
    .vision_box{
flex-wrap: wrap;}
    
    .vision_in{width:100%;font-size:1.2rem;}

}

/*company end*/

/*Facility*/

.facility_box{
    width:90%;margin:0px auto;
    display: grid;
    grid-template-columns: repeat(3,1fr);
}

.fac_inbox{padding:5px;text-align: center;}

.fac_inbox img{width:100%;height:auto;}

/*Facility end*/

/*category */

.cat-list{width:calc(100%/3);box-sizing:border-box;padding:5px;}

.cat-list h2{font-size:1.2vw;}


.cat-list img{width:100%;height:auto;}

/*category end */