@charset "utf-8";
/* @responcive
-------------------------------- */
.forPC {
    display: block;
}
.forSP {
display: none;
}
.slicknav_menu{
display: none;
}
@media screen and (max-width: 640px){
body {
min-width: auto;
padding: 0;
}

.forPC {
    display: none;
}
.forSP {
    display: block;
}
img {
    max-width: 100%;
}

body > div#Wrapper {
  min-width: auto;
}


/*
slicknav
*/
.slicknav_nav a {
    color: #000;
}

.slicknav_nav li > ul {
    margin: 0;
    border-top: 1px solid #000;
}

.slicknav_nav li > ul > li > a{
    padding: 5px 0px 5px 20px;
}

.slicknav_nav li > ul > li:last-child {
    border-bottom: none!important;
}
/* common
-------------------- */
body > div#Wrapper {
  font-size: 15px;
  color: #333;
}
.body-wrap {
    width: auto;
	padding:0 5px;
}

/* Header
-------------------- */
#Header {
    box-shadow: none;
    padding: 0;
    z-index: 999999;
min-width:auto;
height:60px;
}

#Header #Logo {
    display: block;
    width: 50%;
    padding: 10px;
    text-align: center;
    position: relative;
    z-index: 101;
}
#Header h1 img {
vertical-align: top;
}

#Header #Contact {
display:none;
}

#Header .slicknav_menu{
display: block;
background: none;
    position: absolute;
    right: 0;
    top: 10px;
    z-index: 100;
    width: 100%;
padding: 0;
}
#Header .slicknav_menu .slicknav_btn {
margin-bottom:15px;
}

#Header .slicknav_menu .slicknav_nav {
background: #FFF;
border-top:1px solid #000;
    position: absolute;
    top: 49px;
    left: 0;
    width: 100%;
}

#Header .slicknav_menu .slicknav_nav li{
border-bottom:1px solid #000;
}
#Header .slicknav_menu .slicknav_nav li.insta{
text-align:center;
}

#Header .slicknav_menu .slicknav_nav li a:hover{
text-decoration:none;
}

#GrobalNavi {
display:none;
    float: none;
/*
    margin: 0 -10px 1px;
*/
    margin: 0;
    padding: 0;
}

#GrobalNavi .body-wrap{
margin:0;
}

#GrobalNavi ul {
    display: none;
}
#GrobalNavi li {
width:100%;
    float: none;
    height: auto;
    background: #666666;
}
#GrobalNavi li a {
    width: auto;
    margin: 0;
    padding: 5px 10px 5px 40px;
    border-bottom: 1px solid #808080;
    background: url(../img/sp/icn_arrow.png) no-repeat left 20px center;
    background-size: 7px 14px;
    text-align: left;
    color: #fff;
    font-size: 16px;
font-weight:bold;
}
#GrobalNavi li a.active, #GrobalNavi li a:hover {
background:#666666 url(../img/sp/icn_arrow.png) no-repeat left 20px center;
    background-size: 7px 14px;
}

#GrobalNavi ul.dropdown-list {
    position: static;
    display: block;
    width: auto;
    padding: 0;
}
#GrobalNavi ul.dropdown-list li {
    margin-bottom: 0;
    background: #666666;
}
#GrobalNavi ul.dropdown-list a {
    margin: 0;
    padding: 10px 10px 10px 60px;
    background: url(../img/sp/icn_arrow.png) 40px 14px no-repeat;
    background-size: 7px 14px;
    text-align: left;
    font-size: 12px;
}
#GrobalNavi li a:hover {
    border-bottom: 1px solid #808080;
}
#GrobalNavi li.dropdown-item a:hover {
    border-bottom: 1px solid #808080;
    color: #fff;
}


/* TopLink
-------------------- */
#TopLink {
display: none;
}
#TopLink img:hover {
    opacity: 1;
}


/* Footer
-------------------- */


/* MAP見出し */
#Footer {
margin-top:70px;
width:100%;
min-width:auto;
text-align:center;
}

#Footer #FooterLogo{
width:100%;
}
#Footer #FooterLink{
display:none;
}

#Footer #Copyright {
font-size:70%;
padding-bottom:16px;
}

/* Breadcrumbs
-------------------- */
#Breadcrumbs {
    width: auto;
margin: 10px 10px 30px;
color: #333;
}
#Breadcrumbs a {
color: #333;
}

/* トップタイトル
-------------------- */
#PageTitle {}
#PageTitle h1 { 
width: 100%;
font-size:20px;
}

/* contents
-------------------- */
.contents{
padding:60px 0 0;
min-width:auto;
}

/* レイアウト
-------------------- */
#TopPage,
#Main {
/*
padding: 0 1em;
*/
}
#Main {}
#SubMenu{
display:none;
}

/* 汎用スタイル
-------------------- */
/* 見出し */
.contents h2 {
font-size:20px;
}
.contents h2 span {
    padding: 0 16px;
    display: inline-block;
    min-height: 32px;
    line-height: 32px;
}
.contents h3 {
font-size:18px;
}
.contents h4 {
font-size:16px;
}


/* 文章 */
.main p {
    margin-bottom: 16px;
}
#Recipe img {
    border: 1px solid #ccc;
    box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.1);
}

.w850{
width:auto;
}

.flex-box {
flex-wrap:wrap;
}

.flex-box > li{
width:100%;
}

.wf-notosansjapanese{
font-size: 20px!important;
}
.wf-notosansjapanese strong{
font-size:20px;
}

.left{
float:none;
}
.right{
float:none;
}
.w45,.w55{
width:100%;
}
.ml30{
margin:0!important;
}
.mr30{
margin:0!important;
}


/* ボタンデザイン
-------------------- */
.btn {
    display: inline-block;
    margin: 10px 0;
    color: #fff !important;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
}
.btn:hover {
    color: #fff;
    opacity: 0.7;
    text-decoration: none;
}
.btn-small {
    width: 40%;
    padding: 10px 10px 10px 20px;
    background: #000 url(../img/common/icn_arrow01.png) 10px center no-repeat;
    font-size: 14px;
    letter-spacing: 2px;
}
.btn-midium {
    width: 60%;
    padding: 20px 10px 20px 20px;
    background: #000 url(../img/common/icn_arrow01.png) 10px center no-repeat;
    font-size: 20px;
    letter-spacing: 2px;
}
.btn-big {
    width: 100%;
    padding: 30px 10px 30px 20px;
    background: #000 url(../img/common/icn_arrow01.png) 10px center no-repeat;
    font-size: 24px;
    letter-spacing: 2px;
}
	.more_btn{
		text-align: center;
	}	


/* テーブルデザイン
-------------------- */
.main table {
    box-sizing: border-box;
    margin-bottom: 30px;
}
.main tr {
    border-top: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
}
.main th {
    padding: 20px;
    border: 0;
    vertical-align: middle;
}
.main td {
    padding: 20px;
    border: 0;
}
.main th,
.main td {
    display: list-item;
    width: auto;
    border: none;
    background: none;
}
.main th {
    border-bottom: 1px dashed #ccc;
    padding: 10px 10px 5px;
}
.main td {
    padding: 10px;
}
.table-style th {
    border-bottom: none;
}
.horizon th, .horizon td {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
.table-style th,
.horizon th {
    background: #f6f6f6;
}
.horizon {
    border-top: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
}
.horizon thead {
    float: left;
    display: block;
}
.horizon tbody {
    display: -webkit-box;
    overflow-x: auto;
}

.horizon tr {
    display: block;
    border: none;
}
.horizon th,
.horizon td {
    display: block;
    width: auto;
    padding: 10px;
    border: none;
}
.horizon th:first-child,
.horizon td:first-child {
    border-left: none;
}
.horizon th:last-child,
.horizon td:last-child {
    border-right: none;
}

/* ContactForm
-------------------- */
.form-s {
    width: 35%;
}
.form-m {
    width: 60%;
}
.form-l {
    width: 95%;
}
.contact-form table {
    box-sizing: border-box;
}
.contact-form th,
.contact-form td {
    display: list-item;
    width: auto;
    border: none;
    background: none;
}
.contact-form th {
    padding: 5px 10px;
    background-color: #f8f8f8;
}
.contact-form td {
    padding: 10px;
}
.contact-form td textarea {
    width: 100%;
}

.form-contact table {
box-sizing: border-box;
}
.form-contact tr {
display: block;
margin-bottom: 1.5em;
}
.form-contact th {
padding: 5px 10px;
background: #999;
color: #fff;
}
.form-contact th,
.form-contact td {
display: list-item;
width: auto;
border: none;
}
.form-contact td textarea {
width: 100%;
}


.submit input {
    margin-bottom: 5px;
}

#contentsNavi a, #ContentsNavi a {
display:block;
}

/* ContactForm
-------------------- */
.contents .blog .post-list {
display:block;
padding:0;
}
.contents .blog .post-list li.eye-catch {
    width: auto;
margin:0;
margin-bottom:1em;
text-align:center;
}
.contents .blog h2{
font-size:16px;
padding-left:0;
}

.contents .blog h2 .date{
float:none;
display:block;
text-align:right;
margin-top:8px;
margin-bottom:8px;
font-size:90%;
}

.contents .blog .more a {
display:block;
text-align:center;
margin-bottom:5em;
}

.contents .blog-left {
float:none;
width:auto;
    margin-bottom: 40px;
}

.contents .blog-right {
float:none;
width:auto;
}

.main dl dt{
    width: 100%!important;
    border-bottom: none!important;
    font-weight: bold;
    padding: 8px 0 8px 8px!important;
}
.main dl dt:after{
display:none;
}
.main dl dd{
width:100%!important;
    padding: 8px 0 8px 16px!important;
}

/* TopPage */
.bx-wrapper img{
transform: scale(1.7);
}
#TopPage #Block1 {
height:auto;
}
#TopPage #Block1 #Particles {
position:relative;
width:100%;
margin-top: 0;
}
#TopPage #Block1 #Particles .text {
right:20%;
}
#Block1 #Particles img{
padding-right:0;
margin-right:30px;
padding-top:30px;
width:80%;
}

#TopPage #Block1 h2{
padding-top:20px;
margin-bottom:20px;
font-size:17px!important;
}
#TopPage #Block1 .catch{
font-size:13.5px;
}
#Block2 h3{
font-size:24px;
}

#TopPage #Block2 li{
width: 100%;
margin-bottom: 32px;
padding: 16px;
}

#TopPage #Block2 li:nth-child(2) .inner{
text-align: left;
}

#Block2 li:nth-child(2) .link{
float:left;
}

#TopPage #Block2 li .inner{
width:100%;
}

#TopPage #Block3 li {
    width: 90%;
    margin: 0 auto 32px;
position: static;
}


#TopPage #Block3 .img {
text-align:center;
}

#TopPage #Block4 .flex-box > li {
width:100%;
}

#TopPage #Block4 .flex-box > li {
display:block;
}
#TopPage #Block4 .post-list > li {
display:block;
}
#TopPage #Block4 .post-list span {
display:block;
}
#TopPage #Block4 .post-list span.date ,
#TopPage #Block4 .post-list span.category {
display:inline-block;
}

/* About */
#About .main .text-center{
text-align:left;
}
#About .main .flex-box li {
padding:0;
margin-bottom:16px;
text-align: center;
}
#About .main section:nth-child(2) .flex-box > div:nth-child(1){
width:100%;
margin-bottom: 24px;
text-align: center;
}
#About .main section:nth-child(2) .flex-box > div:nth-child(2){
width:100%;
padding-left: 0;
}

#About .main .flex-box li:first-child {
float:left;
width:49%;
margin-right:6px;
}
#About .main .flex-box li:nth-child(2) {
float:left;
width:49%;
}
#About .main .flex-box li:nth-child(3) {
float:left;
width:64%;
margin-right: 6px;
}
#About .main .flex-box li:nth-child(4) {
float:left;
width:33%;
}	



/* Case */
#Case .main ul li {
margin: 0 auto 80px;
}

/* Flow */
#Flow .w45{
width:100%!important;
}

#Flow ol.number_list li {
width:100%;
}
.robot{width:100%;}
}