@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400&display=swap');
html {
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}
body {
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    line-height: 1.8em;
    color: #000;
    letter-spacing: 1px;
    -webkit-text-size-adjust: 100% !important;
    display: block;
    text-align: justify;
    overflow-x: hidden;
    background-color:#fff;
    max-width: 100%;
    height: auto;
}
* {
    margin: 0;
    padding: 0;
}
.wrap {
    overflow: hidden;
}
ol, ul, li {
    list-style: none;
}
div{
	text-align:center;
    box-sizing:border-box;
}
img{
	vertical-align:top;
}
a {
    text-decoration: none;
}
*, *:before, *:after {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
ol, ul {
	list-style: none;
}
a {
	text-decoration: none;
	color: inherit;
}
.br-sp {
    display: none;
}

@media screen and (max-width: 700px)  {
    .br-sp {
        display: inline-block;
    }
}



/********************
パソコン
********************/

/*見出し*/

.midashi{
    display: inline-block;
    position: relative;
    font-size: 25px;
}
.midashi:before {
    display: inline-block;
    position: absolute;
    content: '';
    bottom: -10px; /*下線の上下の位置*/
    left: 50%;
    width: 30px; /*下線の幅*/
    height: 2px; /*下線の太さ*/
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translate(-50%); /*位置の調整*/
    background-color: #666666; /*下線の色*/
}

.arrow1 {
    width: 300px;
    margin-bottom: 20px;
}
.arrow2 {
    width: 10px;
    margin: 20px auto;
}
.arrow3 {
    width: 250px;
    margin: 20px auto;
}


.h3-big {
    font-size: 40px;
}
h4 {
    font-size: 30px;
    line-height: 50px;
}
.big1 {
    font-size: 40px;
}
.big2 {
    font-size: 60px;
}
.big3 {
    font-size: 25px;
}
.big4 {
    font-size: 30px;
}
.orange {
    color: #ea8c2a;
}
.ls {
    letter-spacing: 10px;
}
.float-right {
    float: right;
}
.float-left {
    float: left;
}

/*メイン*/
.head {
    color: #fff;
    background-color: #ea8c2a;
    padding: 20px;
}
#main-img {
    width: 100%;
    margin: 0 auto;
}
#main-sp {
    display: none;
}

/*予約*/
.reserve-img {
    width: 80%;
    margin: 20px auto;
}
.reserve-sp {
    display: none;
}
.button-img {
    width: 600px;
    display      : inline-block;
    opacity      : 1;
    cursor       : pointer;
    transition   : .3s;
    position: absolute;
    top: 83%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin:0;
    padding:0;
}
.button-img:hover {
    opacity      : 0.8;
}
.button-sp {
    display: none;
}
.reserve {
    position: relative;
}

/*悩み*/
.worries {
    background-image: url(/assets/ikumo/image/bg-image1.png.webp);
    padding: 100px 0 0 0;
}
.worrieslist-img {
    width: 80%;
    margin: 80px auto;
}
.worrieslist-sp , .fukidashi-sp , .table-sp , .message-sp {
    display: none;
}
.fukidashi-img {
    width: 600px;
    margin-top: 30px;
}
.discover-float {
    display: inline-block;
    width: 60%;
    margin-top: 80px;
}
.photo1 {
    width: 400px;
}
.discover-p {
    float: left;
    text-align: left;
    width: 300px;
    font-size: 20px;
}
.table {
    position: relative;
}
.table-img {
    width: 100%;
    margin-top: 80px;
}
.table-p {
    width: 90%;
    font-size: 20px;
    position: absolute;
    top: 67%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin:0;
    padding:0;
}
.table-span {
    font-size: 25px;
    font-weight: bold;
    border-bottom: solid 2px #ea8c2a;
    padding-bottom: 10px;
}
.ng {
    display: inline-block;
}
.ng-image {
    width: 70%;
    display: inline-block;
}
.solution {
    display: inline-block;
    width: 80%;
}
.photo2 {
    width: 500px;
}
.solution-p {
    text-align: right;
    line-height: 40px;
}
.message-img {
    width: 70%;
    margin-top: 50px;
}

/*施術の流れ*/
.flow {
    display: inline-block;
    width: 100%;
    background-image: url(/assets/ikumo/image/bg-image1.png.webp);
    padding: 100px 0;
}
.flow-con {
    display: inline-block;
    margin: 0 auto;
    margin-top: 100px;
    width: 900px;
    background-color: #fff;
    padding: 30px;
}
.flow-con1 {
    margin-top: 50px;
}
.step {
    color: #fff;
    background-color: #ea8c2a;
    font-size: 18px;
    padding: 7px;
    margin-right: 5px;
}
.midashi-h5 {
    font-size: 23px;
    text-align: left;
    margin-bottom: 15px;
}
.flow-img {
    width: 300px;
}
.flow-right {
    float: left;
    margin-left: 20px;
    width: 500px;
}
.flow-p {
    text-align: left;
}


/*アフターケア*/
.aftercare {
    background-image: url(/assets/ikumo/image/bg-image2.png.webp);
    padding: 100px 0;
}
.aftercare-con1 {
    width: 850px;
    margin: 0 auto;
    margin-top: 100px;
    background-color: rgba(255,255,255,0.55);
    padding: 30px;
}
.aftercare-p {
    text-align: left;
}
.aftercare-con2 {
    width: 850px;
    margin: 0 auto;
    margin-top: 80px;
}
.aftercare-h5 {
    font-size: 30px;
    margin-bottom: 30px;
}
.nmn-image {
    width: 500px;
    margin: 50px auto;
}


/*生活習慣*/
.lifestyle {
    padding: 100px 0;
}
.lifestyle-p1 {
    font-size: 20px;
    margin-top: 30px;
}
.lifestyle-p2 {
    font-size: 25px;
    margin-top: 30px;
}
.cause-img {
    width: 1000px;
    margin-bottom: 30px;
    margin-top: 30px;
}
.cause-sp {
    display: none;
}

/*当サロンについて*/
.about-us {
    display: inline-block;
    width: 100%;
    background-image: url(/assets/ikumo/image/bg-image1.png.webp);
    padding: 100px 0;
}
.about-us-h4 {
    display: inline-block;
    margin-top: 50px;
}
.about-us-float {
    width: 90%;
    margin: 0 auto;
    margin-top: 50px;
}
table {
    width: 600px;
    text-align: left;
}
th {
    width: 100px;
    vertical-align:top;
    font-weight: bold;
}

/*フッター*/
.copyright {
    color: #fff;
    background-color: #ea8c2a;
}
.ft {
    padding-top: 15px;
    padding-bottom: 15px;
}


/********************
スマホ
********************/

@media screen and (max-width: 700px){

    /*見出し*/
    .midashi {
        font-size: 18px;
    }
    h3 {
        font-size: 20px;
        position: relative;
    }
    .h3-big {
        font-size: 30px;
    }
    h4 {
        font-size: 20px;
        line-height: 40px;
        margin-top: 30px;
    }
    .big1 {
        font-size: 23px;
    }
    .big2 {
        font-size: 40px;
    }
    .big3 {
        font-size: 18px;
    }
    .ls {
        letter-spacing: 7px;
    }
    .float-right , .float-left {
        float: none;
    }

    .arrow1 {
        width: 180px;
        margin-bottom: 10px;
    }
    .arrow3 {
        width: 150px;
        margin: 0 auto;
    }

    /*メイン*/
    .head {
        padding: 10px;
        font-size: 15px;
        line-height: 20px;
    }
    #main-img {
        display: none;
    }
    #main-sp {
        display: inline-block;
        width: 100%;
        margin: 0 auto;
    }

    /*予約*/
    .reserve-img , .button-img {
        display: none;
    }
    .reserve-sp {
        display: inline-block;
        width: 100%;
        margin: 20px auto;
    }
    .button-sp {
        display: inline-block;
        width: 90%;
        opacity: 1;
        cursor: pointer;
        transition: .3s;
        position: absolute;
        top: 78%;
        left: 50%;
        -ms-transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        margin:0;
        padding:0;
    }

    /*悩み*/
    .worries {
        padding: 60px 0 0 0;
    }
    .worrieslist-img , .fukidashi-img , .table-img , .message-img {
        display: none;
    }
    .worrieslist-sp {
        display: inline-block;
        width: 100%;
        margin: 50px auto;
    }
    .fukidashi-sp {
        display: inline-block;
        width: 320px;
        margin-top: 20px;
    }
    .discover-float {
        display: inline-block;
        width: 90%;
        margin-top: 50px;
    }
    .photo1 {
        width: 100%;
    }
    .discover-p {
        width: 100%;
        margin-top: 30px;
    }
    .table-sp {
        display: inline-block;
        width: 100%;
        margin-top: 50px;
    }
    .table-p {
        width: 90%;
        font-size: 12px;
        line-height: 20px;
        letter-spacing: 0px;
        position: absolute;
        top: 65%;
        left: 50%;
        -ms-transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        margin:0;
        padding:0;
    }
    .table-span {
        font-size: 20px;
        line-height: 40px;
        border-bottom: solid 2px #ea8c2a;
        padding-bottom: 5px;
    }
    .ng-image {
        width: 90%;
    }
    .photo2 {
        width: 80%;
    }
    .solution-p {
        text-align: center;
        line-height: 30px;
    }
    .message-sp {
        display: inline-block;
        width: 90%;
        margin-top: 30px;
    }

    /*施術の流れ*/
    .flow {
        padding: 60px 0;
    }
    .flow-con {
        width: 100%;
        padding: 20px;
        margin-top: 50px;
    }
    .flow-con1 {
        margin-top: 30px;
    }
    .flow-img {
        width: 100%;
        margin: 0 auto;
    }
    .midashi-h5 {
        font-size: 20px;
    }
    .step {
        font-size: 15px;
        padding: 5px;
    }
    .flow-right {
        width: 100%;
        margin-left: 0px;
        margin-top: 20px;
    }

    /*アフターケア*/
    .aftercare {
        padding: 60px 0;
    }
    .aftercare-con1 {
        width: 90%;
        margin-top: 50px;
        padding: 20px;
    }
    .aftercare-con2 {
        width: 90%;
        margin-top: 50px;
    }
    .nmn-image {
        width: 90%;
        margin: 30px auto;
    }

    /*生活習慣*/
    .lifestyle {
        padding: 60px 0;
    }
    .cause-img {
        display: none;
    }
    .cause-sp {
        display: inline-block;
        width: 90%;
        margin: 30px auto;
    }
    .lifestyle-p1 {
        font-size: 13px;
        line-height: 18px;
    }
    .lifestyle-p2 {
        font-size: 23px;
    }
    .lifestyle-h4 {
        display: inline-block;
        line-height: 34px;
        font-size: 30px;
    }

    /*当サロンについて*/
    .about-us {
        padding: 60px 0;
    }
    table {
        width: 100%;
        text-align: left;
    }
    .about-us-float {
        margin-top: 30px;
    }
    .map {
        width: 100%;
        height: 300px;
    }

    /*フッター*/
    .ft {
        font-size: 15px;
        line-height: 16px;
        padding-top: 15px;
        padding-bottom: 15px;
    }
}
/* ---- KMG 2026-10-27: 広い画面(1280px超)で中身が横に広がって崩れるのを直す。1280px以下は変わらない ---- */
@media screen and (min-width: 701px) {
  #main-img { max-width: 1280px; }                 /* メイン画像(背景が白なので両側は白のまま) */
  .reserve-img { max-width: 1024px; }              /* 80% × 1280 */
  .worrieslist-img { max-width: 1024px; }          /* 80% × 1280 */
  .discover-float { display: flow-root; max-width: 768px; margin-left: auto; margin-right: auto; }  /* 60% × 1280。飾り線と同じ行に並ばないよう block に */
  .table-img { max-width: 1280px; }
  .table-p { max-width: 1152px; }                  /* 90% × 1280 */
  .ng { width: 100%; max-width: 1280px; }          /* ×印の女性の画像(70%)の入れ物。画像側に max-width を付けると inline-block の幅計算で縮むので入れ物で止める */
  .solution { max-width: 1024px; }                 /* 80% × 1280 */
  .message-img { max-width: 896px; }               /* 70% × 1280 */
  .flow-con { display: flow-root; margin-left: auto; margin-right: auto; }  /* 広い画面で2列に並ばないよう1列に */
  .about-us-float { max-width: 1152px; }           /* 90% × 1280 */
}
/* タブレット幅(701〜1279px): px固定の部品が画面からはみ出す・重なるのを、画面に合わせて縮める(iPad縦768pxで確認) */
@media screen and (min-width: 701px) and (max-width: 1279px) {
  .button-img { width: 47vw; max-width: 600px; }                 /* 予約ボタン(600px固定)が「初回限定」の帯に重なっていた */
  .discover-float { width: 90%; }                                /* 写真と文の枠。上限768pxは上の指定 */
  .table-p { font-size: 1.5625vw; line-height: 1.45; }           /* 20px÷1280。図と同じ割合で縮め、図の上に重ならないように */
  .table-span { font-size: 1.95vw; }                             /* 25px÷1280 */
  .flow-con { width: 90%; max-width: 900px; }                    /* 900px固定で右が切れていた */
  .flow-ph .float-left { width: 36%; max-width: 300px; }
  .flow-img { width: 100%; }
  .flow-right { width: 60%; max-width: 500px; }
  .aftercare-con1, .aftercare-con2 { width: 90%; max-width: 850px; }  /* 850px固定で右が切れていた */
  .cause-img { width: 90%; max-width: 1000px; }                  /* 1000px固定 */
  .nmn-image, .fukidashi-img { max-width: 90%; }
  .lifestyle-h4 { font-size: min(40px, 4.6vw); }                /* 「解放いたします！」の「す！」だけ次の行に落ちていた */
}
@media screen and (min-width: 701px) and (max-width: 1222px) {
  /* 店舗情報: 表(600px)と地図(500px)が横に並びきらない幅では、縦に並べて中央に */
  .about-us-float .float-right, .about-us-float .float-left { float: none; }
  .about-us-float table { margin: 0 auto 30px; max-width: 100%; }
  .map { display: block; margin: 0 auto; max-width: 100%; }
}