@media (max-width: 768px) {
body {
  font-family: 游ゴシック体, 游ゴシック, YuGothic, 'Hiragino Kaku Gothic ProN', HiraginoSans-W3, sans-serif;	
    margin: 0;
    padding: 0;
}

h1,h2,h3,h4 {
    margin: 0;
    padding: 0;
}
img {
    width: 100%;
    vertical-align: bottom;
}
.wrap {
    display: block;
    position: relative;
    width: 100%;
    overflow: hidden;
	background:url(../img/all_bg.png);
	background-repeat: repeat-x;	
}
.pc {
    display: none;
}
p {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
    color: #000;
    margin: 0;
    padding: 0;
}
.btnaction {
  transition: .3s;		
}
.btnaction:hover {
  transform: scale(1.1);
}
ul.menu_pc {
    display: none;
}
.head_menu {
    display: block;
    position: fixed;
    top: 0;
    width: 100%;
    height: auto;
    font-size: 0;
    padding: 2vw 0;
    z-index: 99;
    margin: 0 auto;
}
.head-right {
	display: inline-block;
	position: relative;
	vertical-align: middle;
	text-align: right;
	text-align: -webkit-right;
	right: 4vw;
	width: 80%;
	height: auto;
	margin: 0 auto;
}
.head-right .head-navi {
	display: block;
	position: relative;
	width: 100%;
	height: auto;
	margin: 0 auto;
}
.head-right .head-navi .menu_sp {
	display: block;
	position: relative;
}
.head-right .head-navi .button {
    position: fixed;
    top: 12vw;
    right: 6vw;
    height: 6vw;
    width: 6vw;
    cursor: pointer;
    z-index: 100;
    transition: opacity .25s ease;
    margin: 4.5vw auto;
}
.head-right .head-navi .button.active .top {
	transform: translateY(8px) translateX(0) rotate(45deg);
	background: #fff; 
}
.head-right .head-navi .button.active .middle {
	opacity: 0;
	background: #fff;
}
.head-right .head-navi .button.active .bottom {
	transform: translateY(-8px) translateX(0) rotate(-45deg);
	background: #fff;
}
.head-right .head-navi .button span {
	background: #000;
	border: none;
	height: 2px;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transition: all .35s ease;
	cursor: pointer;
}
.head-right .head-navi .button span:nth-of-type(2) {
	top: 8px;
}
.head-right .head-navi .button span:nth-of-type(3) {
	top: 16px;
}
.head-right .head-navi .overlay {
	position: fixed;
	background: rgba(0,0,0,0.6);
	top: 0;
	left: 0;
	width: 100%;
	height: 0%;
	opacity: 0;
	visibility: hidden;
	transition: opacity .35s, visibility .35s, height .35s;
	overflow: hidden;
}
.head-right .head-navi .overlay.open {
	opacity: .9;
	visibility: visible;
	height: 45%; 
}
.head-right .head-navi .overlay.open li {
	animation: fadeInTop .5s ease forwards;
	animation-delay: .40s; 
}
.head-right .head-navi .overlay.open li:nth-of-type(2) {
	animation-delay: .45s; 
}
.head-right .head-navi .overlay.open li:nth-of-type(3) {
	animation-delay: .50s; 
}
.head-right .head-navi .overlay.open li:nth-of-type(4) {
	animation-delay: .55s; 
}
.head-right .head-navi .overlay.open li:nth-of-type(5) {
	animation-delay: .60s; 
}
.head-right .head-navi .overlay.open li:nth-of-type(6) {
	animation-delay: .65s; 
}
.head-right .head-navi .overlay.open li:nth-of-type(7) {
	animation-delay: .70s; 
}
.head-right .head-navi .overlay nav {
	position: relative;
	height: 70%;
	top: 50%;
	transform: translateY(-50%);
	text-align: center; 
}
.head-right .head-navi .overlay ul {
	display:block;
	list-style: none;
	padding: 0;
	margin: 0 auto;
	position: relative;
	padding-top: 10vw;
	height: 100%; 
}
.head-right .head-navi .overlay ul li {
	margin: 0 auto;
	width: 100%;
	display: block;
	height: auto;
	height: calc(100% / 6);
	position: relative;
	opacity: 0; 
}
.head-right .head-navi .overlay ul li a {
	margin: 0 auto;
	width: 100%;
	display: block;
	position: relative;
	margin: 0 auto;
	width: 100%;
	color: #fff;
	text-decoration: none;
	display: block;
	font-size: 2.5vw;
	font-family: "AkzidenzGrotesk_LigCnd";
	text-align: left;
	font-weight: 450;
	line-height: 1;
	padding: .5vw 0;
	padding-left:5vw;
	overflow: hidden;
}
.head-right .head-navi .overlay ul li a:hover {
	transition: .6s;
	background: #000;
}
.head-right .head-navi .overlay ul li a:hover:after, .head-right .head-navi .overlay ul li a:focus:after, .head-right .head-navi .overlay ul li a:active:after {
	width: 100%; 
}
.head-right .head-navi .overlay ul li a:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0%;
	transform: translateX(-50%);
	height: 3px;
	transition: .35s;
}
@keyframes fadeInTop {
0% {
	opacity: 0;
	top: 20%; 
}
100% {
	opacity: 1;
	top: 0; 
}}
.head_logo {
	display: block;
    position: fixed;
    top: 3vw;
    right: 6vw;
    width: 35%;
}
.head_text_box {
    display: block;
    position: absolute;
    width: 100%;
    z-index: 1;
}
.head_text {
    display: block;
    position: relative;
    width: 65%;
    padding-top: 52vw;
    padding-left: 30vw;
}
.head_campaign {
    display: block;
    position: absolute;
    width: 50%;
}
.head_subtext {
    display: block;
    position: relative;
    width: 70%;
    padding-top: 2vw;
    padding-left: 39vw;
	
    font-size: 13px;
    font-weight: bold;
}
.head_campaign {
    display: block;
    position: absolute;
    width: 27%;
    padding-top: 60vw;
    padding-left: 5vw;
    z-index: 1;
}
.head_img {
    display: block;
    position: relative;
    width: 100%;
}
.message_body {
    display: block;
    position: relative;
    width: 100%;
}
.message_inner {
    display: block;
    position: absolute;
    width: 100%;
}
.message_ttl {
    display: block;
    position: relative;
    width: 100%;
    z-index: 1;
    padding-top: 5vw;
    padding-left: 8vw;
}
span.sabttl {
	
    color: #Fff;
    font-size: 12px;
}
.message_ttl h2 {
	
    font-size: 25px;
    font-weight: bold;
    padding-bottom: 1vw;
    letter-spacing: 2px;
    line-height: 1;
}
.message_box {
    display: block;
    position: relative;
    width: 100%;
    z-index: 1;
    padding-left: 8vw;
}
.message_box p {
	
    font-size: 16px;
    font-weight: normal;
    line-height: 1.662;
    letter-spacing: 0px;
}
.main_step {
    display: block;
    position: absolute;
    width: 100%;
}
.main_mens {
    display: block;
    position: absolute;
    width: 100%;
}
.main_model {
    display: block;
    position: absolute;
    width: 100%;
}
.message_bg {
    display: block;
    position: relative;
    width: 100%;
    z-index: 0;
}
.main_step {
    display: block;
    position: absolute;
    width: 30%;
    z-index: 1;
    padding-left: 60vw;
    padding-top: 60vw;
}
.main_mens {
    display: block;
    position: absolute;
    width: 50%;
    z-index: 1;
    padding-top: 70vw;
    padding-left: 60vw;
}
.main_model {
    display: block;
    position: absolute;
    width: 55%;
    z-index: 1;
    padding-top: 75vw;
    padding-left: 5vw;
}
.main_body {
    display: block;
    position: relative;
    width: 100%;
}
.main_bg {
    display: block;
    position: absolute;
    width: 100%;
    padding-top: 55px;
}
.system_body {
    display: block;
    position: relative;
    width: 100%;
}
.system_bg {
	display: block;
    position: absolute;
    width: 100%;
    padding-top: 250vw;
    z-index: 1;
}
.system_box_top {
    display: block;
    position: relative;
    width: 100%;
    padding-top: 80vw;
}
.system_list01 {
    display: flex;
    position: relative;
    justify-content: center;
}
.list_01 {
    display: inline-block;
    position: relative;
    width: 15%;
    padding: 10vw 3vw;
}
.list_text01 {
    display: inline-block;
    position: relative;
    border-left: 2px solid #bca7f5;
	padding-left: 3vw;
}
.list_text01 h3 {
    font-size: 22px;
	
    font-weight: bold;
    line-height: 1.1;
    letter-spacing: 1px;
}
.system_list02 {
    display: flex;
    position: relative;
    justify-content: center;
    padding-top: 10vw;
}
.list_02 {
    display: inline-block;
    position: relative;
    width: 15%;
    padding: 10vw 3vw;
}

.list_text02 {
    display: inline-block;
    position: relative;
    border-left: 2px solid #bca7f5;
	padding-left: 3vw;
}
.list_text02 h3 {
    font-size: 22px;
	
    font-weight: bold;
    line-height: 1.1;
    letter-spacing: 1px;
}
.system_list03 {
    display: flex;
    position: relative;
    justify-content: center;
    padding-top: 10vw;
}
.list_03 {
    display: inline-block;
    position: relative;
    width: 15%;
    padding: 10vw 3vw;
}

.list_text03 {
    display: inline-block;
    position: relative;
    border-left: 2px solid #bca7f5;
	padding-left: 3vw;
}
.list_text03 h3 {
    font-size: 22px;
	
    font-weight: bold;
    line-height: 1.1;
    letter-spacing: 1px;
}
.system_list04 {
    display: flex;
    position: relative;
    justify-content: center;
    padding-top: 10vw;
}
.list_04 {
    display: inline-block;
    position: relative;
    width: 15%;
    padding: 10vw 3vw;
}

.list_text04 {
    display: inline-block;
    position: relative;
    border-left: 2px solid #bca7f5;
	padding-left: 3vw;
}
.list_text04 h3 {
    font-size: 22px;
	
    font-weight: bold;
    line-height: 1.1;
    letter-spacing: 1px;
}
p.listtxt {
    padding-top: 1vw;
    font-size: 12px;
    line-height: 1.7;
}
.example_body {
    display: block;
    position: relative;
    width: 100%;
}
.example_bg {
    display: block;
    position: absolute;
    width: 100%;
    padding-top: 48vw;
}
.example_box {
    display: block;
    position: relative;
    width: 100%;
}
.example_ttl {
	display: block;
    position: relative;
    font-size: 14px;
    padding-top: 67vw;
    z-index: 1;
    width: 80%;
    margin: 0 auto;
}
.example_ttl span.sabttl {
	
    color: #000;
    padding-left: 1vw;
}
.example_ttl h2 {
	
    color: #000;
    text-align: center;
}
.example_circle_list01 {
    display: block;
    position: relative;
    width: 100%;
}
.example_circle {
    display: block;
    position: absolute;
    width: 80%;
    left: 50%;
    padding-top: 86vw;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
.example_01 {
    display: block;
    position: absolute;
    width: 40%;
    padding-left: 4vw;
    padding-top: 4vw;
}
.example_textbox {
    display: block;
    position: relative;
}
.example_ttl01 {
    display: block;
    position: relative;
    width: 30%;
    padding-left: 32vw;
    padding-top: 20vw;
}
.example_text01 {
    display: block;
    position: relative;
    width: 60%;
    padding-left: 32vw;
}
p.explist {
    border-bottom: 1px solid;
    padding-top: 3px;
    padding-bottom: 3px;
    font-size: 12px;
    width: 70%;
}
p.explast {
    font-size: 10px;
}
.example_circle_list02 {
    display: block;
    position: relative;
    width: 100%;
    padding-top: 35vw;
}
.example_02 {
    display: block;
    position: absolute;
    width: 27%;
    padding-left: 61vw;
    padding-top: 1vw;
}
.example_ttl02 {
	display: block;
    position: relative;
    width: 30%;
    padding-left: 20vw;
    padding-top: 28vw;
}
.example_text02 {
    display: block;
    position: relative;
    width: 60%;
    padding-left: 20vw;
}
.example_text02 p.explist {
    border-bottom: 1px solid;
    padding-top: 3px;
    padding-bottom: 3px;
    font-size: 12px;
    width: 60%;
}
.voice_body {
    display: block;
    position: relative;
    width: 100%;
}
.voice_ttl {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    padding-top: 35vw;
}
p.ttl_icon {
    display: inline-block;
    position: relative;
    width: 30%;
}
span.titletext {
	
    font-size: 20px;
    padding-left: 1vw;
}
.voice_box {
    display: block;
    position: relative;
    width: 100%;
	padding-bottom: 10vw;
}
.voice_head {
    display: block;
    position: relative;
    width: 85%;
    margin: 0 auto;
    padding-top: 5vw;
}
.voice_midashi {
    display: block;
    position: relative;
    width: 85%;
    margin: 0 auto;
    padding-top: 5vw;
}
.voice_midashi h3 {
    font-size: 17px;
	
}
.voice_name {
    display: flex;
    position: relative;
    align-items: center;
    width: 85%;
    margin: 0 auto;
    padding: 5vw 0;
}
span.stylist {
    display: inline-block;
    font-size: 10px;
}
.voice_name h3 {
    display: inline-block;
    position: relative;
    font-size: 18px;
	
    padding-left: 3vw;
}
.voice_text {
    display: block;
    position: relative;
    width: 91%;
    margin-left: 7.2vw;
}
span.textlist {
    font-size: 12px;
	
}
.voice_joinus {
    display: block;
    position: absolute;
    width: 40%;
    padding-top: 80vw;
    transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    z-index: 1;
}
.voice_bg {
    display: block;
    position: relative;
    width: 100%;
}
.contact_body {
    display: block;
    position: relative;
    width: 100%;
}
.contact_list {
    display: block;
    position: relative;
    width: 100%;
}
.contact_icon {
    display: block;
    position: relative;
    width: 80%;
    margin: 0 auto;
    padding-top: 5vw;
}
.contact_text {
    display: block;
    position: relative;
    width: 80%;
    margin: 0 auto;
    padding: 2vw 0;
}
.contact_text p {
    font-size: 14px;
    text-align: center;
    font-weight: bold;
	
}
.contact_btnbox {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    padding-bottom: 5vw;
}
.contact_telbtn {
    display: inline-block;
    position: relative;
    width: 20%;
    margin: 0 10px;
}
.contact_linebtn {
    display: inline-block;
    position: relative;
    width: 20%;
    margin: 0 10px;
}
.contact_instabtn {
    display: inline-block;
    position: relative;
    width: 20%;
    margin: 0 10px;
}
.instagram_icon {
    display: block;
    position: relative;
    width: 80%;
    margin: 0 auto;
    padding-top: 5vw;
}
iframe.insta {
    width: 100%;
    height: 320px;
}
.instagram_img {
    display: block;
    position: relative;
    width: 80%;
    margin: 0 auto;
    padding: 2vw 0;
}
.contact_img.sp {
    display: block;
    position: relative;
    width: 100%;
    padding-top: 15vw;
}
.footer_body {
    display: block;
    position: relative;
    width: 100%;
    padding-top: 10vw;
}
.footer_bg {
    display: block;
    position: absolute;
    width: 100%;
}
.footer_info {
    display: flex;
    position: relative;
    width: 100%;
    justify-content: center;
    align-items: center;
    padding-top: 5vw;
}
.footer_list {
    display: inline-block;
    position: relative;
    width: 47%;
}
.footer_logo {
    display: block;
    position: relative;
    width: 70%;
    margin: 0 auto;
    padding-bottom: 5px;
}
.footer_text {
    display: flex;
    position: relative;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer_map {
	display: inline-block;
    position: relative;
    width: 50%;
    padding-left: 0px;
}
iframe {
    width: 100%;
    height: 100px;
}
ul.footer_navttl {
    font-size: 10px;
    font-weight: bold;
	
}
ul.footer_navtxt {
    font-size: 10px;
    font-weight: bold;
    padding-left: 5px;
}
.footer_copy {
    display: block;
    position: relative;
    padding-top: 7vw;
    padding-bottom: 2vw;
}
.footer_copy p {
    text-align: center;
    font-size: 12px;
    font-weight: bold;
	
}
}