/*-----------
reset
-----------*/
* {margin: 0;padding: 0; box-sizing: border-box;}

.cf { zoom: 1; }
.cf:before,.cf:after { content: ""; display: table;}
.cf:after { clear: both;}

li{list-style: none;}
html {
    overflow-x: hidden;
}
/*-----------
body
-----------*/
body{
    background: #F7E0E8;
    position: relative;
    color: var(--color);
    font-size: var(--font-size); 
    width: 100%; 
    line-height: 1.8; 
    overflow-x: hidden;
    font-family: "Hiragino Sans", "ヒラギノ角ゴシック", Sanfransisco, Arial, "SF Pro SC", Meiryo, "メイリオ", "微软雅黑", "Microsoft YaHei";
    font-optical-sizing: auto; 
    font-weight: 400;
}

body.black{background: #000;}
img{height: auto;}

@media screen and (max-width: 800px){
	body{width: 100%;}
	img{width: 100%;}
}

/*-----------
commone
-----------*/
a{color: var(--color-a);text-decoration: none;}
a:hover{text-decoration: underline;}
a:hover img{filter:alpha(opacity=1); -moz-opacity: 1; opacity: 1;}
a.nolink{pointer-events: none;cursor: default;}

/*flex box*/
.flex{display: flex; align-items: flex-start; flex-wrap: wrap;}
.flex img{align-items: flex-start;}
.mleft{margin-left: auto;}
.mright{margin-right: auto;}
.mtop{margin-top: auto;}
.mbottom{margin-bottom: auto;}
.spacer {width: 100%; display: block;}

/*SP-on*/
.pc{display: block;}
.sp{display: none;}

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


/*-----------
ボタン
-----------*/
a.btn{
    position: relative;
    display: block;
    background: url(../images/commone/icon_btn.png) 96% 50% no-repeat #FFF;
    background-size: 24px auto;
    border-color: var(--btn);
    color: var(--btn-color);
    text-align: center;
    padding: 1.5em 2em 1.5em 2em;
    max-width: var(--btn-max-w);
    width: 100%;
    margin: 2em auto;
    text-decoration: none;
    border-radius: var(--border-radiue);
    font-weight: bold;
    z-index: 4;
    font-size: 110%;
    box-shadow: 0px 5px 10px 0px rgba(55, 55, 55, 0.1);
}

a.btn:hover{color: var(--btn-color-hover);  background: url(../images/commone/icon_btn.png) 96% 50% no-repeat #FFDAEE; background-size: 24px auto; cursor: pointer; transition: all 0.2s linear; }

a.btn.pk{
    background: url(../images/commone/icon_btn.png) 96% 50% no-repeat #F7E0E8;
    background-size: 24px auto;
    color: #633740;
}

a.btn.pk:hover{background: url(../images/commone/icon_btn.png) 96% 50% no-repeat #FFCBDD; background-size: 24px auto; cursor: pointer; transition: all 0.2s linear; }



a.btn.off,
a.btn.pk.off {
    background: #D9D9D9;
    border: none;
    border-color: var(--btn);
    color: #633740;
    cursor: inherit;
}
a.btn.pk.off { box-shadow: none; }

/*---------
　Font
　使用したいフォントのクラスをbodyに付与
---------*/
/*M PLUS Rounded 1c*/
.font_mplus_rounded{
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  transform: rotate(0.05deg);
}

/*Radley*/
.font_radley {
  font-family: "Radley", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
/*-----------
Header
-----------*/
header {
    position: relative;
    overflow: hidden;
    width: 100%; 
    height: 100vh;
    display: flex;
    justify-content: end;
}
#tool {
    font-size: 90%;
    position: relative;
    background: #CB3B66;
    width: 80px;
    flex-basis: 80px;
    height: 100%;
}
#tool_inner {
    width: 80px;
    height: 100%;
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 2.5em 0;
    z-index: 2;
}

/*-----------

/*-----------
MV
-----------*/
#mv{
    width: 100%;
    height: 100vh;
   flex-grow: 1;
   position: fixed;
} 
#mv_inner {
    height: 100vh;
    display: flex;
}
#mv_image {
    width: 50vw;
    overflow: hidden;
}
#mv_inner img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
}
#mv_textbox {
    flex-grow: 1;
    position: relative;
}
#mv_textbox h1 {
    width: 100%;
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%);
    text-align: center;
    font-size: 3vw;
}
#mv_textbox h1 span.title_logo {
    display: inline-block;
    vertical-align: middle;
    width: 14.01vw;
    height: 6.927vw;
    background: url(../images/commone/logo_harmonia.png) 0 0 no-repeat;
    background-size: 100% auto;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
#mv_textbox h1 span.big {
    display: block;
    font-size: 125%;
}
article {
    position: relative;
    z-index: 1;
    background: url(../images/lead_bk.jpg) 100% 0 no-repeat #F7E0E8;
}
/*-----------
#lead 
-----------*/
#lead {
    position: relative;
    z-index: 1;
    padding: 15em 0;
}
#lead .inner{
    width: 96%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    padding: 7px 0;
}
#lead .inner img {
    width: 100%;
    height: auto;
}
#lead .inner img.top {
    position: absolute;
    top: 0;
}
#lead .inner img.under {
    position: absolute;
    bottom: 0;
}
#lead .inner #concept_textbox {
    background: rgba(255, 255, 255, 0.8);
    padding: 60px;
    text-align: center;
}
#lead h2 {
    margin: 0 0 1em 0;
    font-size: 1.8em;
    color: #CB3B66;
}
#lead p {
    font-size: 115%;

}
/*-----------
#point
-----------*/
#point {padding: 5em 0;}
#point h2 {
    font-size: 2em;
    line-height: 1.5em;
    padding: 70px 0 0 0;
    margin: 0 0 1.5em 0;
}
#point h3 {
    margin: 2em 0 1em 0;
}
#marie,
#loise {
    display: flex;
    height: 100vh;
    min-height: 1000px;
    overflow: hidden;
}
#marie h2 {
    background: url(../images/point_title_w.png) 50% 0 no-repeat;
}
#loise {
    flex-direction: row-reverse;    
}
#loise h2 {
    background: url(../images/point_title_b.png) 50% 0 no-repeat;
}
.point_image {
    width: 50%;
}
.point_image img {
    width: 100%;
    height: 100vh;
    min-height: 1000px;
    object-fit: cover;
}
.point_text {
    padding: 60px 20px;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
#marie .point_text {
    background-color: #CB3B66;
    color: #FFF;
}
.set_detail {
    width: 100%;
    max-width: 500px;
    background: rgba(255, 255, 255, 0.9);
    margin: 0 auto 2em auto;
    padding: 20px;
    color: #633740;
    font-size: 90%;
}
#cerise {

}
#cerise .inner {
    background: #FFF;
    position: relative;
    margin: 30em 0 0 0;
}
#cerise h2 {
    color: #CB3B66;
    padding-top: 0;
}

#cerise .point_image {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
}
#cerise .point_image img {
    margin: -20em auto 0 auto;
    width: 100%;
    height: auto;
    min-height: inherit;
}
#cerise .point_text {
    width: 96%;
    margin: 0 auto;
}
#cerise .point_text p {
    background: url(../images/gold_line_s.png) 50% 0 no-repeat;
    padding: 4em 0 0 0;
}
/*-----------
Product
-----------*/
#product{margin-top: 5em;}
#product h2 {
    margin: 0 0 2em 0;
}

/*-----------
preorder
-----------*/
.preorder { margin: 5em auto 0;}
.preorder h2 {
    font-size: 3em;
    padding: 70px 0 0 0;
    margin: 0 0 1.5em 0;
    text-align: center;
}
.preorder_inner {
    margin: 0 auto;
    display: flex;
    text-align: center;
}
#marie_preorder {
    width: 50%;
    background: #CB3B66;
    padding: 15px 15px 0 15px;
    position: relative;
    transition: .2s ease;
}
#louse_preorder {
    width: 50%;
    background: #FFCBDD;
    padding: 15px 15px 0 15px;
    position: relative;
    transition: .2s ease;
}

/*8/4予約開始時にあける*/
/*#marie_preorder:hover {
    background: #C3657F;
}
#louse_preorder:hover {
    background: #fff0f5;
}*/
#marie_preorder a {
    background: url(../images/commone/icon_btn_wh.png) 98% calc(100% - 20px) no-repeat;
    background-size: 30px auto;
}
#louse_preorder a {
    background: url(../images/commone/icon_btn_wh.png) 98% calc(100% - 20px) no-repeat;
    background-size: 30px auto;
}
#marie_preorder dl {
    background: url(../images/marie_kiri.png) 0 0 no-repeat;
    background-size: 200px auto;
    width: 600px;
    padding: 40px 40px 40px 240px;
    margin: 0 0 0 auto;
    height: 253px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #FFF;
    position: relative;
}
#louse_preorder dl { 
    background: url(../images/louise_kiri.png) calc(100% - 20px) 0 no-repeat;
    background-size: 200px auto;
    width: 600px;
    padding: 40px 240px 40px 40px;
    margin: 0 auto 0 0;
    height: 253px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
 }
.preorder dl dt {
    font-size: 1.4em;
    line-height: 1.4em;
    margin: 0 0 1em 0;
}
.preorder dl dd {
}
.preorder a {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

/*-----------
スライダー
-----------*/
.swiper-slide {

}
.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
.swiper-button-next,
.swiper-button-prev{color: var(--slider-btn)!important; top: initial; bottom: 0; } 
.swiper-pagination-bullet-active{background: var(--slider-page)!important;}
.slide-pagination-wrapper {
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
  }
  .swiper-pagination {
    position: static !important;
  }
  .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    width: auto !important;
  }
  .swiper-pagination-bullets {

  }  
  .swiper-button-prev,
  .swiper-button-next {
    position: static !important;
    margin-top: initial !important;
  }


/*-----------
specifications
-----------*/
.specifications{
    background: url(../images/bk.jpg) 0 0 repeat;
    text-align: center; 
    padding: 6em 0;
 }

.specifications h3 { margin: 0 0 .5em 0; }
.specifications h3 span {
    font-size: 130%;
    display: block;
    margin: .5em 0 0 0; 
}
.specifications .date {
    font-size: 2em;
    font-weight: bold;
    margin: 0 0 1.5em 0;
}
.specifications_inner {
    max-width: 1020px; 
    width: 94%; 
    margin: 0 auto;
    text-align: left;
    background: url(../images/lace_w_t.png) 0 0 no-repeat, url(../images/lace_w_b.png) 0 100% no-repeat;
    padding: 34px 0;
     }
.specifications dl {
    background: #FFF;
    padding: 3em;
}
.specifications dl,
.specifications dt,
.specifications dd{box-sizing: border-box;}

.specifications dt,
.specifications dd{padding: 10px 10px 0 10px;line-height: 1.5;}
.specifications dd{padding-left: 2em;}
.specifications dt{width: 200px;float: left; padding-left: 0;}
.specifications dd {margin-left: 200px;padding-bottom: 10px;}

/*-----------
#feature
-----------*/
#feature h2 {
    font-size: 3em;
    padding: 70px 0 0 0;
    margin: 0 0 1.5em 0;
    text-align: center;
}
#feature .inner {
    width: 92%;
    max-width: 1200px;
    margin: 0 auto;
}
.fature_box {
    background: #FFF;
    border-radius: 10px;
    margin: 0 0 80px 0;
    padding: 40px;
    display: flex;
}
.fature_box img {
    width: 300px;
    height: fit-content;
    margin: -80px 0 0 0;
}
.fature_box dl {
    margin: 0 0 0 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.fature_box dl dt {
    font-size: 1.5em;
    line-height: 1.5em;
    margin: 0 0 1em 0;
    color: #CB3B66;
    font-weight: bold;
}
.fature_box dl dd.btn_area {
    display: flex;
}
.fature_box a.btn {
    background: url(../images/commone/icon_btn.png) 96% 50% no-repeat #F7E0E8;
    background-size: 17px auto;
    padding: .5em 1em;
    max-width: 300px;
    margin: 2em 0 0 0;
    color: #633740;
}
.fature_box a.btn:hover {
    background: url(../images/commone/icon_btn.png) 96% 50% no-repeat #FFCBDD; background-size: 17px auto; cursor: pointer; transition: all 0.2s linear;
}
.fature_box a.btn:first-child {
    margin: 2em 1.5em 0 0;
}
.fature_box span {
    font-size: 90%;
    display: block;
    margin-top: 1em;
}

/*-----------
#special
-----------*/
#special {
    background: url(../images/bk.jpg) 0 0 no-repeat;
    background-size: cover;
    padding: 0 0 6em 0;
}
#special h2 {
    font-size: 3em;
    padding: 70px 0 0 0;
    margin: 0 0 1.5em 0;
    text-align: center;
    color: #CB3B66;
}
#special .inner {
    max-width: 800px;
    width: 96%;
    margin: 0 auto;
    text-align: center;
}
#special h3 {
    font-size: 1.5em;
    line-height: 1.5em;
    margin: 2em 0;
    font-weight: bold;
}
#special p {
    margin: 0 0 4em 0;
}
#special .inner img {
    width: 100%;
    height: auto;
}
/*-----------
#sns
-----------*/
#sns {
    background: #FFF;
    padding: 6em 0;
    text-align: center
}
#sns h2 {
    font-size: 2em;
    margin: 0 0 1.5em 0;
    text-align: center;
    color: #CB3B66;
}
#sns ul {
    display: flex;
    justify-content: center;
}
#sns ul li {
    padding: 0 15px;
}
#sns ul li img {
    width: 40px;
}

/*-----------
footer
-----------*/
footer{
    border-width: 1px 0 0 0;
    position: relative;
    z-index: 1;
    background: #FFF;
}
.logo_wrap {
    background: #F7E0E8;
    border-radius: 40px 40px 0 0;
    padding: 60px 0;
    text-align: center;
}
.logo_wrap a { display: inline-block; margin: 0 .2em; }
.logo_wrap a img { max-width: 100%; width: 200px;}
.copyright_wrap {
    background: #633740;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1em 0;
}
.copyright{text-align: left; font-size: .8em; text-align: center; color: #FFF; margin: 0 .5em;}
.copyright span{vertical-align: middle;}
.copyright span img{width: 45px;}

footer .social{justify-content: center; align-items: center; margin: 0 auto;}
footer .social li{width: 30px; line-height: 0; margin-left: .2em; margin-right: .2em;}
footer .social li img{height: auto; width: 100%;}


#EN .point_text p {
    max-width: 500px;
    margin: 0 auto;
}
/*---------------------------------
            responsive
---------------------------------*/
@media screen and (max-width: 1200px){
    header {
        min-height: 660px;
    }
    #mv {
        min-height: 660px;
        position: static;
    }    
    #mv_inner {
        min-height: 660px;
        flex-direction: column;
    }
    #mv_inner img {
        min-height: 660px;
    }
    #mv_image {
        width: 100%;
    }
    #mv_textbox h1 {
        width: 100%;
        position: static;
        top: inherit;
        transform: none;
        padding: 1em 0;
        font-size: 4vw;
    }
    #marie_preorder dl,
    #louse_preorder dl {
        width: auto;
    }
}
@media screen and (max-width: 1024px){
    .preorder_inner {
        display: block;
    }
    #marie_preorder,
    #louse_preorder {
        width: 100%;
    }
    #marie_preorder dl,
    #louse_preorder dl {
        padding: 40px;
    }
    .fature_box {
        align-items: center;
        margin: 0 0 4em 0;
    }
    .fature_box img {
        width: 200px;
        margin: 0;
    }
}

@media screen and (max-width: 768px){
    .font_mplus_rounded{
        transform: none;
    }
/*-----------
Header
-----------*/
    header {
        height: auto;
        display: block;
    }
    #tool {
        font-size: 90%;
        background: none;
        width: 100%;
        height: auto;
        flex-basis:auto;
        position: absolute;
        top: 0;
    }
    #tool_inner {
        width: 100%;
        height: 100%;
        position: static;
        display: block;
        flex-direction: unset;
        justify-content: unset;
        padding: 1em;
        z-index: 0;
    }
    header.language { display: none; }
    header .language li.text,
    header .social li.text{width: 100%; text-align: center; margin-top: 1em; margin-bottom: 1em;}
    header .social li.text{margin-top: 2em;}
    header .language li{padding: 0 1em;}
    header .language li:first-of-type{border: none;}

    header .menu_btn{width: 30px; height: 30px; display: block;position: relative; z-index: 200;}
    header .menu_btn:hover{cursor: pointer;}
    header .menu_btn span{position: absolute; background: #000; width: 100%; height: 2px; display: block; right: 0; top: calc(50% - 1px);-webkit-transition: .2s ease;transition: .2s ease;}
    header .menu_btn span::after,
    header .menu_btn span::before{content: ""; position: absolute; right: 0; height: 2px; background: #000; display: block;}
    header .menu_btn span::after{width: 100%; top: -10px;-webkit-transition: .2s ease;transition: .2s ease;}
    header .menu_btn span::before{width: 100%; bottom: -10px;-webkit-transition: .2s ease;transition: .2s ease;}
    
    header .menu_btn.active span::after{transform: rotate(45deg);width: 30px; top: calc(50% - 1px);-webkit-transition: .2s ease;transition: .2s ease;}
    header .menu_btn.active span::before{transform: rotate(-45deg); width: 30px; bottom: calc(50% - 1px);-webkit-transition: .2s ease;transition: .2s ease;}
    header .menu_btn.active span{background:transparent;-webkit-transition: .2s ease;transition: .2s ease;}
    article {
        background: #F7E0E8;
    }
    /*-----------
    MV
    -----------*/
    #mv{
        height: auto;
        position: static;
    } 
    #mv_inner {
        height: auto;
        display: block;
    }
    #mv_image {
        width: 100%;
    }
    #mv_inner img {
        width: 100%;
        height: auto;
    }
    /*#mv_textbox {
        padding: 3em 0;
    }*/
    #mv_textbox h1 {
        position: static;
        transform: none;
        font-size: 8vw;
    }
    #mv_textbox h1 span.title_logo {
        width: 34vw;
        height: 15vw;
        background: url(../images/commone/logo_harmonia.png) 0 0 no-repeat;
        background-size: 100% auto;
    }
    /*-----------
    #lead 
    -----------*/
    #lead {
        padding: 5em 0;
    }
    #lead .inner{
        position: relative;
        padding: 1.5vw 0;
    }
    #lead .inner img {
        width: 100%;
        height: auto;
    }
    #lead .inner img.top {
        position: absolute;
        top: 0;
    }
    #lead .inner img.under {
        position: absolute;
        bottom: 0;
    }
    #lead .inner #concept_textbox {
        background: rgba(255, 255, 255, 0.8);
        padding: 2em;
        text-align: center;
    }
    #lead h2 {
        font-size: 1.2em;
        color: #CB3B66;
    }
    #lead p {
        font-size: 100%;

    }

    /*-----------
    #point
    -----------*/
    #point {
        padding:3em 0 0 0;
    }
    #point .column-3{width: calc((100% - 40px) / 2);}
    #point dd {
        font-size: 110%;
    }
    .swiper-button-next:after, .swiper-button-prev:after {
        font-size: 8vw !important;
    }

    /*-----------
    product
    -----------*/

    .specifications{width: 100%;}
    .specifications dl {width: 100%; margin: 0 auto;}
    .specifications dt{float: none;width: 100%; border-bottom: 1px dotted var(--color); padding: 0 0 .5em; margin-top: 2em;}
    .specifications dt:first-of-type{margin-top: 1em;}
    .specifications dd{width: 100%; margin-left: 0; padding: 1em 0 0; border: none;}

    /*-----------
    #point
    -----------*/
    #point {padding: 0 0 5em 0;}
    #point h2 {
        padding:  2em 0 0 0;
    }
    #point h3 {
        margin: 2em 0 1em 0;
    }
    #marie,
    #loise {
        display: block;
        height: auto;
        min-height: inherit;
        overflow: inherit;
    }
    #marie h2 {
        background-size: 50% auto;
    }
    #loise {
        flex-direction: row-reverse;    
    }
    #loise h2 {
        background-size: 50% auto;
    }
    .point_image {
       width: 90%;
       margin: 0 auto;
    }
    .point_image img {
        width: 100%;
        height: auto;
        min-height: inherit;
    }
    .point_text {
        padding: 10em 4%;
        margin: -8em 0 0 0;
        width: 100%;
    }
    #marie .point_text {
        background-color: #CB3B66;
        color: #FFF;
    }
    #loise .point_text {
        padding-bottom: 5em;
    }
    #loise .point_image {
        margin: -8em auto 0 auto;
        z-index: 1;
        position: relative;
    }
    .set_detail {
        width: 96%;
        max-width: 600px;
        background: #FFF;
        margin: 0 auto 2em auto;
        padding: 20px;
        color: #633740;
    }
    #cerise {

    }
    #cerise .inner {
        background: #FFF;
        position: relative;
        margin: 10em 0 0 0;
    }
    #cerise h2 {
        color: #CB3B66;
        padding-top: 0;
    }

    #cerise .point_image {
        width: 90%;
        max-width: 1000px;
        margin: 0 auto;
    }
    #cerise .point_image img {
        margin: -10em auto 0 auto;
        width: 100%;
        height: auto;
        min-height: inherit;
    }
    #cerise .point_text {
        width: 96%;
        margin: 0 auto;
        padding: 4em 2%;
    }
    #cerise .point_text p {
        background: url(../images/gold_line_s.png) 50% 0 no-repeat;
        background-size: 80% auto;
        padding: 4em 0 0 0;
    }
    #product {
        margin-top: 1.5em;
    }

    /*-----------
    preorder
    -----------*/
    .preorder { margin: 0 auto;}
    .preorder h2 {
        padding: 1.5em 0 0 0;
    }
    #marie_preorder,
    #louse_preorder {
        padding: 2em 1em 0 1em;
    }

    #marie_preorder dl {
        background: url(../images/marie_kiri_sp.png) 0 0 no-repeat;
        background-size: 30% auto;
        padding: 0 0 2em 30%;
        height: auto;
        min-height: 180px;
    }
    #louse_preorder dl { 
        background: url(../images/louise_kiri_sp.png) 0 0 no-repeat;
        background-size: 30% auto;
        padding: 0 30% 2em 0;
        background-position: 100% 0;
        height: auto;
        min-height: 180px;
    }

    /*-----------
    preorder_fixd
    -----------*/
    #preorder{width: 100%; background: #000; position: fixed;bottom: 0px;left: 0; padding: 1em; z-index: 100; height: 90px;transition: all 0.2s linear;}
    .preorder h4,
    #point .special_text {font-size: 130%; width: 92%; margin: 0 auto 4em auto;}
    .preorder h4,
    .preorder p.date {
        width: 92%;
        margin: 0 auto;
    }
    .preorder_tokuten .inner {
        display: block;
        padding: 2em 0 4em 0;
    }
    .preorder_tokuten img {
        display: block;
        margin: 0 auto;
    }
    .preorder_tokuten .text_box {
        margin: 0;
    }

    .specifications_inner {
        background: url(../images/lace_w_t.png) 0 0 no-repeat, url(../images/lace_w_b.png) 0 100% no-repeat;
        background-size: 100% auto;
        padding: 2.5vw 0; 
     }
    /*-----------
    #feature
    -----------*/
    #feature h2 {
        padding: 1.5em 0 0 0;
    }
    .fature_box {
        padding: 2em;
        flex-direction: column;
    }
    .fature_box img {
        width: 80%;
        margin: 0 0 2em 0;
    }
    .fature_box dl {
        margin: 0;
        align-items: center;
    }
    .fature_box dl dt {
        font-size: 1.5em;
        line-height: 1.5em;
        margin: 0 0 1em 0;
        color: #CB3B66;
        font-weight: bold;
    }
    .fature_box dl dd {
        width: 100%;
    }
    .fature_box dl dd.btn_area {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .fature_box a.btn {
        width: 100% !important;
        max-width: inherit;
        margin: 2em 0 0 0;
        padding: 1em;
    }
    .fature_box a.btn:hover {
        background: url(../images/commone/icon_btn.png) 96% 50% no-repeat #FFCBDD; background-size: 17px auto; cursor: pointer; transition: all 0.2s linear;
    }
    .fature_box a.btn:first-child {
        margin: 2em 1.5em 0 0;
    }

    /*-----------
    #sns
    -----------*/
    #sns ul li img {
        width: 32px;
    }

    /*-----------
    footer
    -----------*/
    /* footer{padding: 1em 10px 100px; border: 1px solid #666; border-width: 1px 0 0 0;} */
    footer{padding-top: 2em;}
    footer .inner.flex{flex-direction: column-reverse; align-items: center;}
    .logo_wrap a img { max-width: 100%; width: 180px;}
    .copyright{text-align: center;}
    .copyright_wrap {
        display: block;
    }
    .copyright span img {
        width: 3.5em;
    }
}