@import url("style-custum.css");

:root {
  --green-color: #006934;
  --red-color: #A30823;
}
/** 共通 **/
html {
  font-size: 100%;
}
body {
  background:url("../img/jpg/img-2.jpg");
  overflow-x: hidden;
  font-family: "Noto Sans JP", sans-serif;
}
img {
  max-width: 100%;
}
ul {
  list-style: none;
}
h1,h2,h3,h4,h5,h6,p{
  line-height:1.6rem;
  color:#ffffff;
}
h2{
  font-size: 3rem;
}
h3{
  font-size:1.6rem;
}
p{
  font-size:1.1rem;
  line-height:1.6em;
  margin:0px;
}
a{
  text-decoration:none;
}

/* 
grid
*/
.grid {
  margin: 0;
  padding: 0;
  display: flex;
  align-items:start;
  justify-content: center;
  flex-wrap: wrap;
}
.grid-item {
  list-style: none;
}
.grid-col-2 > .grid-item {
  width: 50%;
}
.grid-col-3 > .grid-item {
  width: 33.3%;
}
.grid-col-4 > .grid-item {
  width: 25%;
}

.main{
}

section{
  margin:0px;
  padding:20px 5% 50px;
}
.section-title{
  text-align: center;
  padding:0px 0px 10px;
}

.section-title:before {
 content: "";
  width: 338px;
  height: 130px;
  background-image: url("../img/jpg/fukidashi-3.png");
  background-repeat: no-repeat;
  background-size:300px;
  display: block;
  position: relative;
  top:0;
  right:0;
  left:-10%;
  bottom:0;

  margin: 0 auto;
  padding:0;
}
.section-title.fukidashi-1:before{
  background-image: url("../img/jpg/fukidashi-1.png");
}
.section-title.fukidashi-2:before{
  background-image: url("../img/jpg/fukidashi-2.png");
}
.section-title.fukidashi-4:before{
  background-image: url("../img/jpg/fukidashi-4.png");
}



#illust img{
  width:100%;
}

/*-------------------------------------------
ヘッダー
-------------------------------------------*/
#header {
  position: absolute;
  top:0;
  left:0;
  padding: 0px 0px 0px 20px;
}
#header .logo{
  width:20vw;
}
#header .logo a{
  display: block;
  background:#000;
  padding:10px;
}
/*-------------------------------------------
メインビジュアル
-------------------------------------------*/
#mainvisual{
  padding-bottom:50px;
}
#mainvisual img{
  width:100%;
}

/*
about
*/
#about{
}
#about .contents{
  padding:10px;
  margin-bottom: 30px;
}
#about .image{
  border:10px solid #fff;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}
#about .text{
  padding:0px 0px 0px 30px;
}
#about .album .grid-item{
  padding:10px;
}
#about .album .grid-item img{
  border:10px solid #fff;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}

/*
orner
*/
#orner {
}

#orner .image img{
  width:100%;
}
#orner .text{
  padding:0px 0px 0px 30px;
}
/*
instagram
*/
#instagram{
  width:100%;
  padding:50px 0px 100px;
  background:url("../img/jpg/img-13.jpg") repeat center top; 
  background-size:contain;
  text-align: center;
}
#instagram .contents{
  background:url("../img/jpg/img-3.jpg") no-repeat center bottom; 
  background-size:cover;
}
#instagram .text{
  background-color:#fff;
  width:600px;
  margin:0px auto;
  padding:5%;
  border-radius:30px;
}
#instagram .text img{
 
}
#instagram .text p{
  padding-bottom:30px;
  color:#000;
}
#instagram .text a{
  display: block;
  padding:20px;
  background: var(--red-color);;
  border-radius:30px;
  color:#fff;
}
#instagram .text a img{
  width:100%;
}

/*
kodawari
*/
#kodawari{
  background:url("../img/jpg/img-9.jpg") repeat center top;
}
#kodawari .grid-item{
  padding:50px 20px;
}
#kodawari .grid-item h3{
 
}
#kodawari .grid-item p{
  text-align: justify;
}
#kodawari .grid-item img{
  width:100%;
}
#kodawari .matome{
  width:700px;
  margin:0px auto;
  padding:5%;
  background:url("../img/jpg/img-12.jpg") repeat center;
  border-radius:20px;
}
#kodawari .matome h2{
  text-align: center;
  color:#000;
}
#kodawari .matome p{
  color:#000;
}
/*
flow
*/
#flow{
  width:100%;
  background:url("../img/jpg/img-9.jpg") repeat center top;
}
#flow .grid{
  margin:0px 5%;
}
#flow .grid-item{
  margin-bottom:50px;
  padding:0px 20px;
}
#flow .grid-item img{
  width:100%;
  margin-bottom:10px;
}
#flow .grid-item p{
  text-align: justify;
  text-indent:-1em;
  padding-left:1em;
}
/*
brand
*/
#brand{
  width:100%;
  background:url("../img/jpg/img-9.jpg") repeat center top;
  background-size:80%;
}
#brand .grid{

}
#brand .grid .grid-item{
  margin:0px;
  padding:20px;
}
#brand .grid .grid-item .brand-title{
  text-align: center;
}
#brand .grid .grid-item table tr th,
#brand .grid .grid-item table tr td{
  border:2px solid #A30823;
  background-color:#fff;
  color:var(--red-color);
  padding:10px;
}
#brand .grid .grid-item table tr th{
  width:25%;
}
#brand .grid .grid-item table tr td{
 
}
#brand .grid .grid-item .hinsyu{}
#brand .grid .grid-item .setumei{}
#brand .grid .grid-item .sanmi{}

/*
other
*/
#other{}
#other .section-title{}
#other .section-title img{}
#other img.other-img{
  width:100%;
}
/*
store
*/
#store{
  width:100%;
  background:url("../img/jpg/img-12.jpg") repeat center top;
  padding:50px 0px 0px;
  text-align: center;
}
#store .grid{
  margin:0px 5%;
}
#store .grid-item{
  margin-bottom:50px;
  padding:0px 30px;
  color:#000000;
}
#store .grid-item h3{
  line-height:1.6em;
  margin:0px;
  padding:0px;
  color: #000;
}
#store .grid-item p{
  margin:0px;
  padding:0px;
  color: #000
}
#store .grid-item img{
  width:100%;
  height:230px;
  object-fit:cover;
  padding-bottom:10px;
}
#store .katsu-box{
  background:url("../img/jpg/bakudan-1.png") no-repeat center bottom;
  background-size:contain;
}
#store .katsu-box .katsu{
  z-index:900;
}

#footer{
  padding:20px;
  background:url("../img/jpg/img-11.jpg") repeat center bottom;
  background-size: cover;
  text-align: center;
  z-index:999;
}
#footer small{
  color:#fff;
}

#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 0;
  background:#000;
  opacity: 0.6;

  z-index:999;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f106';
  font-size: 25px;
  line-height: 1.5rem;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

/**************************************************************/
/**************************************************************/
/**************************************************************/
/**************************************************************/
@media screen and (max-width: 834px){

  
:root {
  --green-color: #006934;
  --red-color: #A30823;
}
/** 共通 **/
html {
  font-size: 100%;
}
body {
  background:url("../img/jpg/img-2.jpg");
  overflow-x: hidden;
}
img {
  max-width: 100%;
}
ul {
  list-style: none;
}
h1,h2,h3,h4,h5,h6,p{
  line-height:1.6rem;
  color:#ffffff;
}
h2{
  font-size: 2rem;
}
h3{
  font-size:1.3rem;
}
p{
  font-size:0.8rem;
  line-height:1.6em;
  margin:0px;
}
a{
  text-decoration:none;
}

/* 
grid
*/

.grid-col-2 > .grid-item {
  width: 100%;
}
.grid-col-3 > .grid-item {
  width:100%;
}
.grid-col-4 > .grid-item {
  width: 50%;
}

.main{
}

section{
  width:100%;
  margin:0px;
  padding:10px 20px 10px;
}
.section-title{
  width:70%;
  text-align: center;
  margin: 0 auto;
  padding:20px 0px 20px;
}

.section-title:before {
 content: "";
  width: 130px;
  height: 60px;
  background-image: url("../img/jpg/fukidashi-3.png");
  background-repeat: no-repeat;
  background-size:130px;
  display: block;
  position: relative;
  top:0;
  right:0;
  left:-30px;
  bottom:0;

  margin: 0 auto;
  padding:0;
}



#illust img{
  width:100%;
}

/*-------------------------------------------
ヘッダー
-------------------------------------------*/
#header {
  position: absolute;
  top:0;
  left:0;
  margin:0px;
  padding:0px;
}
#header .logo{
  width:150px;
  margin:0px;
  padding:0px;
}
#header .logo a{
  display: block;
  background:#000;
  padding:5px;
}
/*-------------------------------------------
メインビジュアル
-------------------------------------------*/
#mainvisual{
  padding-bottom:0px;
}
#mainvisual img{
  width:100%;
}

/*
about
*/
#about{
}
#about .contents{
  padding:10px;
  margin-bottom: 30px;
}
#about .image{
  border:10px solid #fff;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
  margin-bottom:20px;
}
#about .text{
  padding:0px;
  text-align: center;
}
#about .album .grid-item{
  padding:0px 10px 10px;
}
#about .album .grid-item img{
  border:10px solid #fff;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}

/*
orner
*/
#orner  .contents{
  padding:10px;
  margin-bottom:0px;
}

#orner .image img{
  border:10px solid #fff;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
  margin-bottom:20px;
}
#orner .text{
  padding:0px;
  text-align: center;
}
/*
instagram
*/
#instagram{
  width:100%;
  padding:0px 0px 20px;
  background:url("../img/jpg/img-13.jpg") repeat center top; 
  background-size:contain;
  text-align: center;
}
#instagram .contents{
  background:url("../img/jpg/img-3.jpg") no-repeat center bottom; 
  background-size:cover;
  padding:0px 5%;
}
#instagram .text{
  background-color:#fff;
  width:80%;
  margin:0px auto;
  padding:5%;
  border-radius:30px;
}
#instagram .text img{
 
}
#instagram .text p{
  padding-bottom:30px;
  color:#000;
}
#instagram .text a{
  display: block;
  padding:20px;
  background: var(--red-color);;
  border-radius:30px;
  color:#fff;
}
#instagram .text a img{
  width:100%;
}

/*
kodawari
*/
#kodawari{
  background:url("../img/jpg/img-9.jpg") repeat center top;
}
#kodawari .grid-item{
  padding:0px 10px 20px;
}
#kodawari .grid-item h3{
 
}
#kodawari .grid-item p{
  text-align: justify;
}
#kodawari .grid-item img{
  width:100%;
}
#kodawari .matome{
  width:90%;
  margin:0px auto;
  padding:5%;
  background:url("../img/jpg/img-12.jpg") repeat center;
  border-radius:20px;
}
#kodawari .matome h2{
  text-align: center;
  color:#000;
}
#kodawari .matome p{
  color:#000;
}
/*
flow
*/
#flow{
  width:100%;
  background:url("../img/jpg/img-9.jpg") repeat center top;
}
#flow .grid{
  margin:0px;
}
#flow .grid-item{
  margin-bottom:20px;
  padding:0px 10px;
}
#flow .grid-item img{
  width:100%;
  margin-bottom:10px;
}
#flow .grid-item p{
  text-align: justify;
  text-indent:-1em;
  padding-left:1em;
}
/*
brand
*/
#brand{
  width:100%;
  background:url("../img/jpg/img-9.jpg") repeat center top;
  background-size:80%;
}
#brand .grid{

}
#brand .grid .grid-item{
  margin:0px;
  padding:0px 5px 20px;
}
#brand .grid .grid-item .brand-title{
  text-align: center;
  margin:0px 0px 10px;
}
#brand .grid .grid-item table tr th,
#brand .grid .grid-item table tr td{
  border:2px solid #A30823;
  background-color:#fff;
  color:var(--red-color);
  padding:5px;
  font-size:0.7rem;
  
}
#brand .grid .grid-item table tr th{
  width:30%;
}
#brand .grid .grid-item table tr td{
 
}
/*
other
*/
#other{}
#other .section-title{}
#other .section-title img{}
#other img.other-img{
  width:100%;
}
/*
store
*/
#store{
  width:100%;
  background:url("../img/jpg/img-12.jpg") repeat center top;
  padding:0px 0px 0px;
  text-align: center;
}
#store .grid{
  margin:0px 5%;
}
#store .grid-item{
  margin-bottom:20px;
  padding:0px;
  color:#000000;
}
#store .grid-item h3{
  line-height:1.6em;
  margin:0px;
  padding:0px;
  color: #000;
}
#store .grid-item p{
  margin:0px;
  padding:0px;
  color: #000
}
#store .grid-item img{
  width:100%;
  height:230px;
  object-fit:cover;
  padding-bottom:10px;
}
#store .katsu-box{
  width:90%;
  margin:0 auto;
}

#footer{

}

#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 0;
  background:#000;
  opacity: 0.6;

  z-index:999;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f106';
  font-size: 25px;
  line-height: 1.5rem;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
}