@charset "utf-8";
/* CSS Document */
* {
  box-sizing: border-box;
}
/*初期値10px設定*/
html {
  font-size: 62.5%;
}
/*可変イメージ設定*/
img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
/*--------------------------
	共通の設定/=iPhone 640px(縦)の設定 /
-------------------------- */
body {
  background-color: #fff;
  color: #000000;
}
#wrapper {
  width: 100%;
}
#toggleWrap2 {
  display: none;
}
.name {
  width: 100%;
  background-color: #fff;
  font-family: 'Kosugi Maru', sans-serif;
  font-size: 4rem;
  text-align: center;
  padding: 4%;
  padding-top: 7%;
  margin: 0 auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
}
.icon-instagram {
  color: #000000;
  font-size: 3.5rem;
}
#mainimg {
  width: 100%;
  z-index: 30;
  margin-top: 100px;
}
#store {
  font-size: 1.4rem;
}
#profile {
  font-size: 1.5rem;
  line-height: 150%;
  padding: 3%;
  padding-top: 20px;
}
#profile2 {
  font-size: 2rem;
  line-height: 150%;
  padding: 3%;
  padding-top: 20px;
}
#profile3 {
  font-size: 1.5rem;
  line-height: 150%;
  padding: 3%;
  padding-top: 20px;
}
.profile {
  font-size: 2rem;
  padding-top: 2%;
  padding-bottom: 2%;
}
#care {
  font-size: 1.5rem;
  line-height: 150%;
  padding: 3%;
  padding-top: 20px;
}
.center {
  width: 100%;
  text-align: center;
}
.mail {
  font-size: 1.8rem;
  padding-left: 3%;
}
.mail2 {
  font-size: 1.8rem;
  padding-left: 1%;
}
#mail {
  padding-top: 10px;
  border-top: solid;
	font-size: 1.8rem;
}
#copyright {
  font-size: 1.5rem;
  text-align: center;
  padding-top: 10%;
  padding-bottom: 2%;
}
/*ハンバーガーアイコン*/
#toggle {
  display: block;
  padding-top: 3%;
  text-align: center;
  width: 55px;
  height: 55px;
  position: fixed;
  top: 15px;
  right: 15px;
  z-index: 40;
  color: #fff;
  /*	ナビ下部に文字がある場合追加
	background: #bcc5d8;
	display: flex;
	justify-content:center;
	align-items: center;
	flex-direction: column;*/
}
/*アイコン中身・アニメーション*/
.trigger, .trigger span {
  display: inline-block;
  transition: all .4s;
}
.trigger {
  position: relative;
  width: 30px;
  height: 20px;
  margin-top: 8%;
  margin-left: 30%; /*ハンバーガーのアイコン全体部分*/
}
.trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #000;
  border-radius: 4px;
}
.trigger span:nth-of-type(1) {
  background-color: #000;
  top: 0;
}
.trigger span:nth-of-type(2) {
  background-color: #000;
  top: 8px;
}
.trigger span:nth-of-type(2)::after {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 3px;
  background-color: #000;
  border-radius: 4px;
  transition: all .4s;
}
.trigger span:nth-of-type(3) {
  bottom: 0;
}
.trigger.active span:nth-of-type(1) {
  transform: translateY(8px) scale(0);
}
.trigger.active span:nth-of-type(2) {
  transform: rotate(-45deg);
  background-color: #000000;
}
.trigger.active span:nth-of-type(2)::after {
  transform: rotate(90deg);
  background-color: #000000;
}
.trigger.active span:nth-of-type(3) {
  transform: translateY(-8px) scale(0);
}
/*グローバルナビ部分*/
.toggleWrap {
  background: #ffffff;
  padding: 50px 15px 10px 15px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 40;
  padding-left: 5%;
}
.mainNav li {
  list-style-type: none;
}
.navItem {
  display: block;
  /*text-decoration: none;*/
  color: #000000;
  padding: 15px 0;
  text-align: center;
  font-size: 2rem;
}
a {
  text-decoration: none;
}
/*ナビを消す*/
.hide {
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}
.animation {
  transition-property: opacity, visibility;
  transition-duration: .3s;
  transition-timing-function: ease-in;
}
.no-scroll {
  overflow: hidden;
}
.inner {
  height: 100vh;
}
a:hover {
  color: #000000;
  font-weight: bold;
}
.icon-instagram:hover {
  font-weight: bold;
}
a:link {
  color: #000000;
}
a:visited {
  color: #000000;
}
.name {
  animation-name: fadein;
  animation-duration: 2s;
}
#profile {
  animation-name: fadein;
  animation-duration: 2s;
}
@keyframes fadein {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#profile2 {
  text-align: center;
  animation-name: fadein;
  animation-duration: 2s;
}
#profile3 {
  animation-name: fadein;
  animation-duration: 2s;
}
@keyframes fadein {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/*--------------------------
/*タブレット / iPad 768px(横)から1023pxまでの設定 */
/*-------------------------- */
@media screen and (min-width: 768px) {
  #wrapper {
    width: 85%;
    margin: 0 auto;
  }
  .name {
    font-size: 4rem;
  }
  .center {
    width: 100%;
    text-align: center;
  }
  #mainimg {
    margin: 0 auto;
    padding-top: 170px;
    width: 80%;
  }
  #order1 {
    width: 100%;
    overflow: hidden;
  }
  #orderpic1 {
    width: 35%;
    float: left;
    padding: 1%;
    margin-left: 15%;
  }
  #orderpic2 {
    width: 35%;
    float: left;
    padding: 1%;
  }
  #order2 {
    width: 100%;
    overflow: hidden;
  }
  #orderpic3 {
    width: 35%;
    float: left;
    padding: 1%;
    margin-left: 15%;
  }
  #orderpic4 {
    width: 35%;
    float: left;
    padding: 1%;
  }
  .profile {
    font-size: 2rem;
  }
  #profile {
    width: 100%;
    font-size: 1.5rem;
    /*padding-left:10%;*/
  }
  #profile2 {
    font-size: 2.2rem;
    text-align: center;
  }
  #profile3 {
    width: 95%;
    font-size: 1.5rem;
    padding-left: 13%;
  }
  /*--------------------------
	PC /1024px以上の設定/
-------------------------- */
  @media screen and (min-width:950px) {
    .name {
      padding-top: 50px;
    }
    #toggleWrap2 {
      padding-top: 6%;
      display: block;
    }
    .mainNav2 {
      width: 90%;
      overflow: hidden;
      background-color: #fff;
      position: fixed;
      padding-top: 100px;
      padding-bottom: 20px;
    }
    .navItem2 {
      float: left;
      /*background-color: aqua;*/
      width: 16.5%;
      text-align: center;
      font-size: 2.2rem;
    }
    .toggleWrap {
      display: none;
    }
    /*ハンバーガー消す*/
    #toggle {
      display: none;
    }
    #mainimg {
      margin: 0 auto;
      padding-top: 170px;
      width: 50%;
    }
    #profile {
      font-size: 1.8rem;
    }
    #profile3 {
      font-size: 1.8rem;
      padding-left: 11%;
    }
    .mainNav2 {
      animation-name: fadein;
      animation-duration: 2s;
    }
  }
}