@charset "utf-8";

/* ===================================================================
SmartPhone CSS
ウィンドウ幅[0～640px]の場合に適用
=================================================================== */
@media screen and (max-width:640px) {

/* ===================================================================
各ページ共通
=================================================================== */
body {
font-size: 1.4rem;
overflow: hidden;
}

.breadcrumb ol {
flex-wrap: wrap;
}

.st img {
max-width:100%;
width:100%;
}

/* ===================================================================
ページ内アンカー
=================================================================== */

#pg01,#pg02,#pg03,#pg04,#pg05,#pg06 {
margin-top : -50px;
padding-top : 50px;
}

/*	header
----------------------------------------------------*/
#header .h_cont h1.logo {
width: 166px;
margin-top: 10px;
}

#header .h_cont p.logo {
width: 166px;
margin-top: 10px;
}

#header .h_cont {
height: 49px;
}

#header.smaller .h_cont {
height: 45px;
}

#header.smaller #sp_btn li.mail {
margin: 3px 15px 0 0;
}

#header.smaller #sp_btn li.rec {
margin: 13px 15px 0 0;
}

#sp_btn li.rec a {
font-size: 12px;
margin: 10px 5px 0 0;
font-weight: normal;
padding: 5px;
}

#sp_btn li.menu {
padding: 7px 13px 13px;
line-height: 29px;
}

#header.smaller #sp_btn li.menu {
margin: 5px 15px 0 0;
}

/*	nav
----------------------------------------------------*/
#nav {
display: none;
}

#nav ul {
display: block;
}

#nav li {
position: relative;
width: 100%;
text-align: left;
font-size: 14px;
}

#nav li span {
display: none;
}

.bx-wrapper,
.ttl_bg{
margin-top: 3px;
}

/*	ttl_cont
----------------------------------------------------*/
.ttl_cont {
padding: 30px 0 0 0;
}

.ttl_cont h2 {
padding-bottom: 15px;
}

/*	contents
----------------------------------------------------*/
#contents {
margin-bottom: 20px;
}

#contents h1,
#contents h2,
#contents h3{
margin-bottom: 25px;
}

#contents p {
margin-bottom: 15px;
}


/*	sidebar
----------------------------------------------------*/
#sidebar {
margin-bottom: 0;
}

/*	news_side
----------------------------------------------------*/
#news_side {
margin-bottom: 0;
}

#news_side .side_cont:last-child {
margin-bottom: 0;
}

/* ===================================================================
index style
=================================================================== */

/*	ind_main
----------------------------------------------------*/
.ind_main {
height: 200px;
padding: 40px 10px;
}

.ind_main h2 {
margin-bottom: 10px;
font-size: 18px;
}

.ind_main p.brett {
margin-bottom: 15px;
font-size: 13px;
}

.ind_main p.brett br {
display: none;
}

.ind_main p {
margin-bottom: 15px;
font-size: 14px;
}


/*	ind_main02
----------------------------------------------------*/
.ind_main02 {
height: 200px;
}

.ind_main02 .img {
left: -30px;
width: 120px;
}

.ind_main02 div {
top: 35px;
right: 50%;
margin-right: -155px;
}

.ind_main02 h2 {
font-size: 18px;
text-align: center;
}

.ind_main02 p.brett {
font-size: 13px;
}

.ind_main02 p {
margin-bottom: 15px;
font-size: 13px;
}

/*	ind_main02
----------------------------------------------------*/

.ind_main03_inner {
width:inherit;
margin: 0 auto;
background: url(../images/index/main_img03_02.png) no-repeat top right;
background-size: contain;
}

.ind_main03 {
height: 200px;
}

.ind_main03 .img {
right: -30px;
width: 170px;
}

.ind_main03 div {
top: 20px;
left: 20px;
}

.ind_main03 h2 {
font-size: 18px;
}

.ind_main03 p.brett {
margin-bottom: 15px;
font-size: 12px;
}

.ind_main03 p {
margin-bottom: 15px;
font-size: 13px;
}


.ind_news h2,
.ind_bus h2 {
margin-bottom: 20px;
font-size: 18px;
}

.ind_news {
padding: 10px;
}


.ind_news h2,
.ind_bus h2 {
margin-bottom: 10px;
}

.ind_news h2 span,
.ind_bus h2 span {
font-size: 10px;
}

/*	ind_mv_slider
----------------------------------------------------*/
.bx-wrapper{
width: calc(100% - 20px);
margin: 65px auto 20px;
}

.bx-viewport{
/* height: 320px; */
height: 90vh;
}

.ind_mv_slider .mv_item{
border-radius: 8px;
}

.ind_mv_slider .nail{
background-image: url(../images/index/bg_nail_sp.webp);
}

.ind_mv_slider .fitness{
background-image: url(../images/index/bg_fitness_sp.webp);
}

.ind_mv_slider .eyelash{
background-image:url(../images/index/bg_eyelash_sp.webp);
}

.ind_mv_slider .flower{
background-image: url(../images/index/bg_flower_sp.webp);
}

.ind_mv_slider .mv_item .cont_wrap:before{
top: 10px;
right: 10px;
}

.ind_mv_slider .nail .cont_wrap:before{
width: 70px;
height: 26px;
}

.ind_mv_slider .fitness .cont_wrap:before{
width: 78px;
height: 24px;
}

.ind_mv_slider .eyelash .cont_wrap:before{
width: 122px;
height: 22px;
}

.ind_mv_slider .mv_item .cont_wrap .cont_flex{
flex-direction: column;
align-items: baseline;
padding: 0 20px 20px;
}

.ind_mv_slider .mv_item .cont_wrap .cont_flex .cont{
align-items: baseline;
}

.ind_mv_slider .mv_item .cont_wrap .cont_flex .cont h2{
font-size: 3.2rem;
margin-bottom: .625em;
}

.ind_mv_slider .mv_item .cont_wrap .cont_flex .cont p{
font-size: 1.3rem;
line-height: 1.5;
line-height: 1.8;
}

.ind_mv_slider .mv_item .cont_wrap .cont_flex .cont p .br_sp{
display: block;
}

.ind_mv_slider .mv_item .cont_wrap .cont_flex .link_btn{
flex: auto;
margin: 45px 0 0;
}

.ind_mv_slider .mv_item .cont_wrap .cont_flex .link_btn a{
padding: 8px 34px 8px 20px;
}

.ind_mv_slider .mv_item .cont_wrap .cont_flex .link_btn a:after{
right: 10px;
}

/*	ind_news
----------------------------------------------------*/
.ind_news {
padding: 10px;
}

.ind_news dl:last-of-type {
margin-bottom: 20px;
}

.ind_news p {
margin-bottom: 20px;
}

.ind_news ul {
display: block;
padding: 0 10px;
}

.ind_news li {
max-width: 328px;
margin: 0 auto 10px;
}

.ind_news li:last-child {
margin-bottom: 0;
}


/*	ind_bus

※縦並びに変更する場合、コメントを外す

.ind_bus ul {
display: block;
}

.ind_bus li {
overflow: hidden;
position: relative;
width: 100% !important;
height: 291px !important;
margin-bottom: 20px;
}

.ind_bus li:last-child {
margin-bottom: 0;
}

.ind_bus li figcaption {
position:absolute;
width: 100%;
height: auto !important;
padding: 10px 5px 5px;
}
----------------------------------------------------*/

/*	ind_bus
----------------------------------------------------*/
.ind_bus .dot{
padding: 10px;
}

.ind_bus ul {
display: block;
}

.ind_bus li {
max-width: 484px;
margin: 0 auto 20px;
border: 5px solid white;
}

.ind_bus li figcaption {
position: static;
height: auto;
padding: 10px;
background: none;
}


.ind_bus li h4 {
font-size: 16px !important;
}

.ind_bus li p {
font-size: 12px;
}


/* ===================================================================
about style
=================================================================== */
#about .sec01 {
display: block;
margin: 20px 0 0 0;
}

#about .sec01 dl {
width: 100%;
margin: 0 0 20px;
padding: 10px;
}

#about .sec01 dd p.more {
text-align: center;
}

#about .sec01 dd p.more a {
display: block;
padding: 10px;
}

/* ===================================================================
idea style
=================================================================== */
#idea section .origin {
display: block;
padding: 18px;
}

#idea section .origin figure {
width: 180px;
margin: 0 auto;
}

#idea section .origin figcaption {
margin: 20px 0 0 0;
}

#idea section .origin figcaption dt {
width: 60%;
font-size: 16px;
}

#idea section .origin figcaption dd {
font-size: 14px;
}

#idea .comment {
display: block;
}

#idea .comment .ceo {
margin: 0 auto 20px;
padding: 0;
}

#idea .comment div {
width: 100%;
}


/* ===================================================================
chart style
=================================================================== */
#chart .chart_area {
overflow-y: hidden;
overflow-x: auto;
max-width: 770px;
}

#chart .chart_area img {
width: 770px;
max-width: none;
}

#chart p.ex {
display: block;
}

/* ===================================================================
profile style
=================================================================== */
#profile #contents section {
margin-bottom: 30px;
}

#profile table {
width: 100%;
background: none;
}

#profile th,
#profile td {
display: block;
width: 100%;
padding: 15px;
}

#profile td a {
position:inherit;
bottom: inherit;
right: inherit;
padding: 7px 15px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
color: #fff;
text-decoration: none;
background: #191978;
}

#profile td a:hover{
background: #52529f;
}


/* ===================================================================
business style
=================================================================== */
#business .sec01 {
display: block;
margin: 20px 0 0 0;
}

#business .sec01 dl {
width: 100%;
margin: 0 0 20px;
padding: 10px;
}

#business .sec01 dd p.more {
text-align: center;
}

#business .sec01 dd p.more a {
display: block;
padding: 10px;
}


/* ===================================================================
support style
=================================================================== */
#support #contents .menu dl {
width: 100%;
margin: 0 0 20px;
padding: 10px;
}


/* ===================================================================
gm style
=================================================================== */
#gm .sec02 dl {
margin-bottom: 20px;
padding: 14px;
}


#gm .sec02 p.gm_big {
font-size: 18px;
}

#gm .sec03 ul {
margin-left: 25px;
}

#gm .sec03 li div {
display: block;
margin-top: 10px;
}

#gm .sec03 li dl {
margin: 0 0 10px 0 ;
}

#gm .sec03 li dt img {
display: block;
margin: 0 auto 10px;
}

/* ===================================================================
hc style
=================================================================== */
#gm .sec05 .lisk {
display: block;
margin-bottom:20px;
}

#gm .sec05 .lisk ul {
padding-left: 0;
}

#gm .sec06 p.big_txt {
font-size: 24px;
}

#gm .sec06 p.comment {
font-size: 20px;
}

#gm .sec08 ul {
display: block;
margin: 0;
}

#gm .sec08 li {
margin-bottom: 20px;
text-align: center;
}

#gm .sec10 dl {
display: block;
}

#gm .sec10 dt {
max-width: 200px;
margin: 0 auto 15px;
}


/* ===================================================================
dining style
=================================================================== */
#dining #contents section{
margin-bottom: 50px;
}

#dining .sec_feature .shop_img{
margin-top: 40px;
}

/*#dining .sec_feature ul{
margin-top: 40px;
}

#dining .sec_feature ul li{
flex-direction: column;
margin-bottom: 35px;
}

#dining .sec_feature ul li span{
margin: 0 auto 10px;
}

#dining .sec_feature ul li dl{
width: 100%;
}

#dining .sec_lonely .align_center{
margin-bottom: 25px;
text-align: left;
font-size: 16px;
}

#dining .sec_lonely .align_center br{
display: none;
}

#dining .sec_lonely figure{
flex-direction: column;
margin-bottom: 35px;
}

#dining .sec_lonely figure img{
margin: 0 auto 25px;
}

#dining .sec_lonely figcaption{
width: 100%;
}*/

#dining .sec_info dl{
margin-bottom: 20px;
}


/* ===================================================================
fitness style
=================================================================== */
#fitness .box figure {
display: block;
}

#fitness .box figure figure {
max-width: 109px;
height: 109px;
margin: 0 auto 10px;
}

#fitness .box figure figcaption {
width: 100%;
}

#fitness #contents .box figure figcaption p {
margin-bottom: 0;
}

/* ===================================================================
hearing style
=================================================================== */
#hearing figure.mi {
margin-bottom: 20px;
}

#hearing .sec02 dl,
#hearing .sec03 dl,
#hearing .sec04 dl{
display: block;
}

#hearing .sec02 dt,
#hearing .sec03 dt,
#hearing .sec04 dt{
margin: 0 auto 20px;
}

#hearing .sec02 dd,
#hearing .sec03 dd,
#hearing .sec04 dd {
width: 100%;
padding: 0;
}

#hearing .sec04 .benefit {
padding: 20px;
}

#hearing .sec04 .benefit ul {
display: block;
}

#hearing .sec04 .benefit li {
width: 100%;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #c3c3c3;
}

#hearing .sec04 .benefit li:last-child {
margin-bottom: 0;
}

#hearing .sec04 .benefit li img {
display: block;
width: 160px;
margin: 0 auto;
}

#hearing .sec05 dl {
padding: 14px;
}

#hearing .sec06 dt {
text-align: center;
}

#hearing .sec06 dd {
margin: 0 auto;
}



/* ===================================================================
nail style
=================================================================== */
#nail .sec03 dl,
#nail .sec04 dl{
display: block;
}


#nail .sec03 dt,
#nail .sec04 dt{
margin: 0 auto 20px;
}


#nail .sec03 dd,
#nail .sec04 dd {
width: 100%;
padding: 0;
}

/* ===================================================================
eyelash style
=================================================================== */
#eyelash .sec03 dl,
#eyelash .sec04 dl,
#eyelash2 .sec03 dl,
#eyelash2 .sec04 dl{
display: block;
}


#eyelash .sec03 dt,
#eyelash .sec04 dt,
#eyelash2 .sec03 dt,
#eyelash2 .sec04 dt{
margin: 0 auto 20px;
}


#eyelash .sec03 dd,
#eyelash .sec04 dd,
#eyelash2 .sec03 dd,
#eyelash2 .sec04 dd {
width: 100%;
padding: 0;
}


/* ===================================================================
fitness style
=================================================================== */
#fitness figure.mi {
position: static;
}

#fitness figure.mi figcaption {
position: static;
background: black;
}

/* ===================================================================
partners style
=================================================================== */
#partners p.center {
margin: 10px 0 30px 0;
}

#partners dd {
margin-left: 10px;
}

#partners .merit dt {
text-align: center;
}

#partners .merit dl.link {
display: block;
padding: 10px;
}

#partners .merit dl.link dd {
text-align: center;
}

#partners .merit dl.link dd ul {
display: inline-flex;
text-align: center;
}

#partners .merit dl.link dd li {
margin:0;
}

#partners .merit dl.link dd li:first-child {
margin-right: 10px;
}


/* ===================================================================
agency style
=================================================================== */
#agency section {
margin-bottom: 0;
}

#agency table {
width: 100%;
margin-bottom: 20px;
}

#agency th,
#agency td {
display: block;
width: 100%;
}

#agency dd ul {
display: block;
}

#agency dd li {
margin:0;
}

#agency dd li:first-child {
margin: 0 0 10px 0;
}

/* ===================================================================
privacypolicy style
=================================================================== */
#privacypolicy #contents ul,
#ad-privacypolicy #contents ul {
margin-bottom: 10px;
}

#privacypolicy #contents li,
#ad-privacypolicy #contents li {
padding: 10px 0;
}


/* ===================================================================
recruit style
=================================================================== */
#contents .area th,
#contents .area td{
display: block;
width: 100%;
}

#recruit ul.type {
margin-bottom: 5px;
}

#recruit ul.type li {
max-width: 320px;
margin: 0 auto 30px;
padding: 10px 10px 20px;
}

#recruit ul.type li p {
margin-bottom: 10px;
font-size: 22px;
}

#recruit ul.type li p.icon {
font-size: 30px;
}

#recruit ul.type li p.ttl {
font-size: 16px;
}

#recruit ul.type li a {
font-size: 12px;
}

#recruit ul.type li.nail a::after,
#recruit ul.type li.geron a::after {
margin-top: -7px;
font-size: 12px;
}

#recruit #area {
margin-top: -45px;
padding-top: 45px;
}


/* ===================================================================
message style
=================================================================== */
#message #contents dl {
display: block;
}

#message #contents dt,
#message #contents dl.reverse dt{
width: 100%;
margin: 0 auto 20px;
text-align: center;
border-bottom: 1px #ccc solid;
}

#message #contents dt img {
width: 290px;
}

#message #contents dd {
width: 100%;
}

/* ===================================================================
sce style
=================================================================== */
#sce #contents li {
width: 48%;
margin-bottom: 10px;
}

#sce #contents li figure {
width: 100%;
}


/* ===================================================================
adpartners style
=================================================================== */
#adpartners .sec02 dl,
#adpartners .sec03 .data,
#adpartners .sec03 .chart,
#adpartners .sec04 .box{
display: block;
margin-bottom: 30px;
}

#adpartners .sec02 {
margin-bottom: 20px;
}

#adpartners .sec02 dt {
width: 100%;
padding: 10px 0;
}

#adpartners .sec02 dt span {
font-size: 30px;
padding-left: 10px;
}

#adpartners .sec02 dt br {
display: none;
}

#adpartners .sec02 dd {
width: 100%;
padding: 10px;
font-size: 16px;
}

#adpartners .sec03 figure.mi {
position: static;
}

#adpartners .sec03 figure.mi figcaption {
position: static;
background: black;
}

#adpartners .sec03 .data figure {
max-width: 378px;
margin: 0 auto;
padding: 0 0 20px 0;
}

#adpartners .sec03 .data figcaption {
width: 100%;
}

#adpartners .sec03 .chart .figure {
width: 190px;
margin: 0 auto 20px;
}

#adpartners .sec03 .chart .txt {
margin: 0;
}

#adpartners #contents section h3 {
margin-bottom: 10px;
padding: 5px 10px;
font-size: 16px;
}

#adpartners .sec04 h4 {
font-size: 16px;
}

#adpartners .sec04 .box figure {
max-width: 344px;
margin: 0 auto;
padding: 0 0 20px 0;
}

#adpartners .sec04 .box figcaption {
width: 100%;
}

#adpartners .sec04 .box figcaption dl {
font-size: 12px;
}


/* ===================================================================
faq style
=================================================================== */
#faq #contents dl {
margin-bottom: 20px;
padding: 14px;
}

#faq #contents dt {
margin-bottom: 10px;
}

/* ===================================================================
sitemap style
=================================================================== */

#sitemap #contents section ul {
width: 100%;
margin: 10px 0;
padding: 10px 0 0 10px;
border-top:1px #ccc solid;
}

#sitemap #contents section ul li a {
font-size: 13px;
color: #333;
}

#sitemap #contents section ul li ul {
margin: 0;
border:none;
}

#sitemap #contents section ul li ul li ul {
margin: 0 0 0 15px;
}

#sitemap #contents section ul li a.head {
padding: 10px 0;
font-size: 14px;
font-weight: bold;
color: #191978;
}

#sitemap #contents section ul li {
padding: 5px 0;
}


/*	footer
----------------------------------------------------*/
#footer p.ex {
display: block;
padding: 10px 0;
font-size: 12px;
color: #333;
text-align: center;
}

#footer p.ex i {
font-size: 14px;
}

#footer #f_logo {
display: block;
padding-bottom: 10px;
}

#footer #f_logo li {
margin-bottom: 10px;
}

#footer #f_logo img {
display: block;
width: 213px;
margin: 0 auto;
}

#footer #f_logo li:first-child {
margin-left: 0;
}

#footer .f_menu ul,
#footer ul.company{
display: block;
}

#footer .f_menu {
padding: 0;
}

#footer .f_menu li {
max-width: 100%;
padding: 0;
}

#footer .f_menu li a {
width: 80%;
margin: 0;
padding: 10px;
font-size: 16px;
border-bottom: none;
}

#footer .f_menu li ul {
display: none;
background: white;
}

#footer .f_menu li {
-js-display: flex;/* IE8-9 */
display: -ms-flexbox;/* IE10 */
display: flex;
-ms-flex-pack: justify;/* IE10 */
justify-content: flex-start;
-webkit-justify-content: space-between;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0;
border-bottom: none;
}

#footer .f_menu li ul {
-webkit-flex-grow: 1;
flex-grow: 1;
}

#footer .f_menu li ul li {
}

#footer .f_menu li ul li a {
display: block;
width: 100%;
padding: 10px 15px;
font-size: 16px;
color: #333;
border-bottom: 1px dotted #ccc;
}

#footer .f_menu li .accordion_icon {
display: block;
border: 1px solid white;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}

#footer .f_menu li .accordion_icon,
#footer .f_menu li .accordion_icon span {
display: inline-block;
transition: all .4s;
box-sizing: border-box;
}

#footer .f_menu li .accordion_icon {
position: relative;
display: block;
width: 25px;
height: 25px;
margin: 10px 10px 0 0;
border: 1px solid white;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}

#footer .f_menu li .accordion_icon span {
position: absolute;
left: 6px;
width: 50%;
height: 2px;
background: white;
border-radius: 4px;
-webkit-border-radius: 4px;
-ms-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
}

#footer .f_menu li .accordion_icon span:nth-of-type(1) {
top: 10px;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
}

#footer .f_menu li .accordion_icon span:nth-of-type(2) {
top: 10px;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
}

/*＋、×切り替え*/

#footer .f_menu li .accordion_icon.active span:nth-of-type(2) {
top: 10px;
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
}


#footer .f_menu02 ul {
-js-display: flex;/* IE8-9 */
display: -ms-flexbox;/* IE10 */
display: flex;
-ms-flex-pack: justify;/* IE10 */
flex-wrap:wrap;
padding: 0;
}

#footer .f_menu02 li {
width: 50%;
padding: 0;
text-align: center;
border-bottom: 1px solid white;
border-left: 1px solid white;
}

#footer .f_menu02 li:nth-child(odd) {
border-left: none;
}

#footer .f_menu02 li a {
display: block;
padding: 10px;
font-size: 12px;
text-decoration: none;
}

#footer ul.company li img {
width: 140px;
margin: 0 auto;
}

#footer ul.company li {
width: 100%;
padding: 10px;
font-size: 12px;
border-right: none;
border-bottom: 1px solid #ccc;
}

}