@media screen and (max-width: 480px){
.pc-only{
	display: none;
}
.sp-only{
	display: block;
}

.red{
	color: #C69C6D;
}

body{
	font-family: 'Noto Sans JP', sans-serif;
}

	img{
		width:100%;
		max-width: 100%;
		height: auto;
	}
	#container{
		max-width: 100%;
	}

#navigation,#navigation ul{
	width: 100%;
	max-width: 100%;
	height: auto;
}
#navigation ul{
	display: flex;
	flex-wrap: wrap;
}
#navigation ul li{
	flex-basis: 25%;
}

#header{
	width: 100%;
	height: auto;
	padding: 0;
	position: fixed;
	top: 0;
	left: 0;
  z-index: 99;
}
#header h1 a{
	display: inline-block;
	width: 70%;
	margin: 0 auto;
}

/*============
nav
=============*/
nav {
  display: block;
  position: fixed;
  top: 0;
  left: -300px;
  bottom: 0;
  width: 300px;
  background: #ffffff;
  overflow-x: hidden;
  overflow-y: auto;
  transition: all .5s;
  z-index: 3;
  opacity: 0;
}
.open nav {
  left: 0;
  opacity: 1;
}
nav .inner {
  padding: 25px;
}
nav .inner ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav .inner ul li {
  position: relative;
  margin: 0;
  border-bottom: 1px solid #333;
}
nav .inner ul li a {
  display: block;
  color: #333;
  font-size: 14px;
  padding: 1em;
  text-decoration: none;
  transition-duration: 0.2s;
}
nav .inner ul li a:hover {
  background: #e4e4e4;
}
@media screen and (max-width: 767px) {
  nav {
    left: -220px;
    width: 220px;
  }
}
/*============
.toggle_btn
=============*/
.toggle_btn {
  display: block;
  position: fixed;
  top: 15px;
  right: 15px;
  width: 30px;
  height: 30px;
  transition: all .5s;
  cursor: pointer;
  z-index: 3;
}
.toggle_btn span {
  display: block;
  position: absolute;
  left: 0;
  width: 30px;
  height: 2px;
  background-color: #FFF;
  border-radius: 4px;
  transition: all .5s;
}
.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) {
  -webkit-transform: translateY(10px) rotate(-315deg);
  transform: translateY(10px) rotate(-315deg);
}
.open .toggle_btn span:nth-child(2) {
  opacity: 0;
}
.open .toggle_btn span:nth-child(3) {
  -webkit-transform: translateY(-10px) rotate(315deg);
  transform: translateY(-10px) rotate(315deg);
}
/*============
#mask
=============*/
#mask {
  display: none;
  transition: all .5s;
}
.open #mask {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .8;
  z-index: 2;
  cursor: pointer;
}




#contents{
	width: 100%;
	max-width: 100%;
}
.home-content{
	padding: 0 7px;
}
.home-content h2{
	font-weight: bolder;
	text-align: center;
	color: #7A979D;
	margin-top: 20px;
	margin-bottom: 20px;
	border: none;
}

.home-content h3{
	color: #555;
	margin-top: 20px;
	margin-bottom: 20px;
}

#topics,p.tsukushi,#contact{
	float: none;
	width: 97%;
	max-width: 97%;
	margin: 10px auto;
}

.smart_bn{
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
  justify-content: space-between;
}

#top2,#top3{
  box-sizing: border-box;
	float: none;
  flex-basis: 49%;
	margin: 10px auto;
	text-align: center;
  height: auto;
  width: auto;
}

#top2 a,#top3 a.alpha{
	display: block;
  border: 1px solid #ddd;
}


#top3 li{
	padding-bottom: 5px;
}


/* button */

.btn,a.btn,button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

a.btn-border {
  border: 2px solid #000;
  border-radius: 0;
  background: #fff;

  -webkit-transform-style: preserve-3d;

  transform-style: preserve-3d;
}

a.btn-border:before {
  position: absolute;
  top: 0;
  left: 0;

  width: 15px;
  height: 100%;

  content: '';
  -webkit-transition: all .3s;
  transition: all .3s;
  -webkit-transform: translateX(0) translateY(0);
  transform: translateX(0) translateY(0);

  border-radius: 0 50% 50% 0;
  background: #000;
}

a.btn-border:hover:before {
  font-family: 'Font Awesome 5 Free';
  font-weight: bold;
  line-height: 30px;

  width: 30px;
  height: 30px;

  content: '\f061';
  -webkit-transform: translateX(460%) translateY(.5rem);
  transform: translateX(460%) translateY(.5rem);

  color: #fff;
  border-radius: 50%;
}

#contact span:nth-of-type(2){
  display: block;
}
#contact span:nth-of-type(2) a{
  color: #ffe100;
}


/* pages  */
#titles{
width:100%;
height:auto;
}
#titles img{
  max-width: 100%;
  height: auto;
}
#main{
  box-sizing: border-box;
  float: none;
  width: 100%;
  padding: 0 7px;
}


#sidebar{
  float: none;
  width: 100%;
}

.face {
    width: 50%;
    float: none;
    text-align: center;
    margin: 5px auto;
}

.hist {
    width: 100%;
    float: none;
    padding: 5px;
}

.ac_box{
  width: 96%;
  height: auto;
  margin:  auto;
  padding: 5px;
  box-sizing: border-box;
}

.ac_box .gt{
  float: none;
}
.ac_box img{
  width: 30%;
  padding: 0 !important;
  margin: 0 auto 10px;
  display: block;
}


.entry-content iframe.instagram-media{
	max-width: 100% !important;
	box-sizing: border-box;
	min-width: 90% !important;
}

.googleCalendar iframe {
  width: 100%;
  height: 400px;
}

#s-atelier h3{
	font-size: 16px;
}

#s-atelier div.split{
	display: block;
	width: 100%;
}

#s-atelier .illust{
	display: block;
	margin: 10px auto;
	width: 40%;
}
.goods a {
	width: 90%;
	font-size: 16px;

}

/*  new contaect  */
.contact-area {
    font-size: 14px;
    width: 90%;
    text-align: left;
    margin: 0 auto;
}

.contact-area p{
    line-height: 1.35;
}
.mw_wp_form .contact-list li {
    display: block;
    text-align: left;
    border-bottom: 1px solid #25b7c0;
}

.mw_wp_form .contact-list li label, .mw_wp_form .labeling{
    display: block;
}

.mw_wp_form .contact-list li span.small{
    padding: 3px 2px 0px 2px;
    font-size: 0.8em;
}

.contact-check-button{
  width: 100%;
  display: block;
  text-align: center;
}

.contact-check-button > div{
  display: block;
}

input.consult,input.wpcf7c-elm-step1,input.wpcf7-back{
  margin-top: 10px;
  border:none;
  font-size:18px;
  padding:5px 20px;
  background: #008db7;
  color:#fff;
  border-radius: 6px;
  cursor: pointer;
}


.contact-area .tel-number {
    font-size: 18px;
    font-weight: bold;
    padding: 10px 10px;
}



}