/*-- 汎用・共通スタイル --------------*/

/*#page_user_data.other_page*/ .ec-layoutRole .ec-layoutRole__contents{
    max-width: 100%;
}
.ec-layoutRole, .ec-layoutRole__contents, .ec-layoutRole__mainBottom, .ec-layoutRole__footer{
    position: relative;
}
.ec-layoutRole__mainBottom{
    z-index: 1000;
    background: #efefef;
    padding-bottom: 50px;
    /*margin-bottom: -100px;*/
}


/*-- マイページ --------------*/
.ec-mypageRole{
    max-width: 1000px;
    margin: 0 auto;
}

/*-- お届け先変更に関する注釈 --------------*/
.ec-orderDelivery__address .shipping_change{
    font-weight: normal;
    font-size: .8em;
    padding-top: 10px;
}


.ec-pageHeader h1{
    position: relative;
    text-align: center;
    border: none;
    margin: 30px auto;
    padding: 10px 20px;
    font-size: 2em;
    font-weight: bold;
    color: #81d8d0;
}
.ec-pageHeader h1 span {
    font-size: 0.6em;
    display: block;
    color: #ccc;
    font-weight: normal;
}
.ec-pageHeader h1:before {
    position: absolute;
    bottom: -10px;
    left: calc(50% - 30px);
    width: 60px;
    height: 5px;
    content: '';
    border-radius: 3px;
    background: #81d8d0;
}

.ec-blockBtn--action{
    background-color: #81d8d0;
    border-color: #81d8d0;
}
.ec-blockBtn--action:focus, .ec-blockBtn--action.focus {
    background-color: #6ab1aa;
    border-color: #6ab1aa; }
.ec-blockBtn--action:hover {
    background-color: #6ab1aa;
    border-color: #6ab1aa; }
.ec-blockBtn--action:active, .ec-blockBtn--action.active,
  .open > .ec-blockBtn--action.dropdown-toggle {
    background-color: #6ab1aa;
    border-color: #6ab1aa; }
.ec-blockBtn--action:active:hover,
.ec-blockBtn--action:active:focus,
.ec-blockBtn--action:active.focus,
.ec-blockBtn--action.active:hover,
.ec-blockBtn--action.active:focus,
.ec-blockBtn--action.active.focus,
    .open > .ec-blockBtn--action.dropdown-toggle:hover,
    .open > .ec-blockBtn--action.dropdown-toggle:focus,
    .open > .ec-blockBtn--action.dropdown-toggle.focus {
      background-color: #6ab1aa;
      border-color: #6ab1aa;
}

.SF-color-blue{
    color: rgb(129,216,208);
}
.SF-bg-gray{
    background-color: #efefef;
}
.SF-bg-white{
    background-color: #fff;
}

/*span*/
.icon_cart{
    content: '';
    background: url('/html/user_data/assets/img/common/icon_cart.svg') no-repeat;
    padding: 0px 10px;
    margin-right: 8px;
}
.icon_mail{
    content: '';
    background: url('/html/user_data/assets/img/common/icon_mail.svg') no-repeat;
    padding: 0px 10px;
    margin-right: 8px;
}
.icon_newtabopen{
    content: '';
    background: url('/html/user_data/assets/img/common/icon_newtabopen.svg') no-repeat;
    padding: 0px 10px;
    margin-left: 8px;
}



/*-- header (PC)--------------------------------*/
.ec-layoutRole__header{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 10000;
}
.ec-itemNav{
    display: flex;
    justify-content: space-between;
}
.ec-itemNav div{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14%;
}
.ec-itemNav div:first-child{
    width: 30%;
}
.ec-itemNav div:first-child a:hover{
    opacity: 0.8;
}
.ec-itemNav div a.SF-header_navi{
	display: inline-block;
	position: relative;
	color: #000;
 	text-decoration: none;
 	font-weight: bold;
}
.ec-itemNav div a.SF-header_navi:before{
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 100%;
	height: 2px;
	background: #000;
	transform: scale(0, 1);
	transition: 0.4s;
}
.ec-itemNav div a.SF-header_navi:hover:before {
	transform: scale(1);
}
.SF-header_space{
    width: 100%;
    height: 100px;
}


/*-- header (SP)--------------------------------*/

#SF-nav-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    margin: 0;
    background-color: #fff;
}
#SF-nav-drawer .SF-nav-logo{
    position: absolute;
    top: 0;
    left: 0;
    width: 240px;
    height: 60px;
}
#SF-nav-drawer .SF-nav-logo img{
    position: relative;
    width: 100%;
}

.SF-nav-unshown {
    display:none;
}
#SF-nav-open {
    position: absolute;
    top: 15px;
    right: 15px;
    display: inline-block;
    width: 30px;
    height: 30px;
}
#SF-nav-open span, #SF-nav-open span:before, #SF-nav-open span:after {
    position: absolute;
    height: 2px;
    width: 100%;
    left: 0;
    border-radius: 2px;
    background: #999;
    display: block;
    content: '';
    cursor: pointer;
}
#SF-nav-open span:before {
    top: 12px;
}
#SF-nav-open span:after {
    top: 24px;
}
#SF-nav-close {
    display: none;
    position: fixed;
    z-index: 99;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0;
    transition: .3s ease-in-out;
}
#SF-nav-input:checked ~ #SF-nav-close {
    display: block;
    opacity: 0.5;
}
#SF-nav-input:checked ~ #SF-nav-content {
    transform: translateX(0%);
    box-shadow: -6px 0 25px rgba(0,0,0,.15);
}

#SF-nav-content {
    overflow: auto;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000000;
    width: 90%;
    max-width: 330px;
    height: 100%;
    background: #efefef;
    background-image: url('/html/user_data/assets/img/common/BG-pattern.svg') ;
    background-size: 80px;
    transition: .3s ease-in-out;
    transform: translateX(105%);
}
#SF-nav-content .SF-nav-content_inner{
    width: 90%;
    margin: 30px auto;
}
#SF-nav-content .SF-nav-content_inner a img{
    width: 80px;
    margin: 0 auto;
}
#SF-nav-content .SF-nav-content_inner h3{
    font-weight: bold;
    margin: 20px auto;
    padding: 10px 20px;
}
#SF-nav-content .SF-nav-content_inner ul{
    width: 100%;
}
#SF-nav-content .SF-nav-content_inner ul li{
    list-style-type: none;
    font-weight: bold;
    border-left: 1px solid #666;
    border-bottom: 1px solid #666;
    margin: 20px auto;
    padding: 10px 20px;
}
#SF-nav-content .SF-nav-content_inner ul li a{
    text-decoration: none;
    color: #333;
}

/*-- footer --------------------------------*/
.ec-footerRole{
    background-color: #fff;
    border-top: none;
}
.ec-footerNavi .ec-footerNavi__link a{
    border-bottom: none;
}
.ec-footerRole .ec-footerRole__inner .ec-footerNavi,
.ec-footerTitle__copyright{
    color: #666;
}
.ec-footerRole .ec-footerRole__inner img{
    width: 8%;
    min-width: 40px;
}


/*-- TOP ---------------------------*/

/*（動画）*/
.SF-top_video{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    margin: 0 auto;
    width: 100%;
    height: 100vh;
}
.SF-top_video video{
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    min-width: 100%;
    min-height: 100vh;
}
.SF-top_videoshowarea{
    position: relative;
    height: 100vh;
}

/*未使用*/
.SF-top_contentsarea{
    position: relative;
    width: 100%;
    background-color: #fff;
    box-shadow: 0px 0px 20px 20px rgba(0,0,0,0.15);
    padding-top: 50px;
    padding-bottom: 50px;
}



/*INTRODUCTION*/

.ec-eyecatchRole__intro{
    position: relative;
    width: 90%;
    max-width: 600px;
    margin: 0 auto;
    padding: 50px 0px 30px;
    text-align: center;
}
.ec-eyecatchRole__intro .ec-eyecatchRole__introEnTitle{
    font-size: 3em;
    position: relative;
    display: inline-block;
    margin: 50px auto;
    padding: 0 60px;
    color: #81d8d0;
}
.ec-eyecatchRole__intro .ec-eyecatchRole__introEnTitle:before,
.ec-eyecatchRole__intro .ec-eyecatchRole__introEnTitle:after {
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 60px;
    height: 2px;
    background-color: #81d8d0;
    transform: rotate(-60deg);
}
.ec-eyecatchRole__intro .ec-eyecatchRole__introEnTitle:before {
    left:0;
}
.ec-eyecatchRole__intro .ec-eyecatchRole__introEnTitle:after {
    right: 0;
}
.ec-eyecatchRole__intro .ec-eyecatchRole__introTitle{
    font-size: 2em;
    text-align: left;
    font-weight: bold;
    margin: 30px auto;
}
.ec-eyecatchRole__intro .ec-eyecatchRole__introDescription{
    font-size: 1.3em;
    text-align: left;
    margin: 30px auto;
}

/*navi*/
.ec-eyecatchRole__intro_navi{
    position: relative;
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 30px 0px 50px;
    display: flex;
    justify-content: space-between;
}
.ec-eyecatchRole__intro_navi-child{
    width: 32%;
    margin: 0 auto;
    text-align: center;
}
.ec-eyecatchRole__intro_navi-child h5{
    font-size: 1.2em;
    position: relative;
    display: inline-block;
    padding: 0 20px;
    font-weight: bold;
    margin: 30px auto;
    color: #6ab1aa;
}
.ec-eyecatchRole__intro_navi-child h5:before,
.ec-eyecatchRole__intro_navi-child h5:after {
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 20px;
    height: 1px;
    background-color: #6ab1aa;
    transform: rotate(-60deg);
}
.ec-eyecatchRole__intro_navi-child h5:before {
    left:0;
}
.ec-eyecatchRole__intro_navi-child h5:after {
    right: 0;
}
.ec-eyecatchRole__intro_navi-child a{
    text-decoration: none;
    color: inherit;
}
.ec-eyecatchRole__intro_navi-child a img:hover{
    opacity: .8
}
.ec-eyecatchRole__intro_navi-child img{
    width: 100%;
}
.ec-eyecatchRole__intro_navi-child p{
    padding: 20px;
    font-weight: bold;
}


/*--外部リンク----------------------------------------------*/
#SF-awaylinks{
    background: #222;
    color: #fff;
}
#SF-awaylinks .SF-awaylinks_titlearea{
    position: relative;
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 30px 0px;
}
#SF-awaylinks .SF-awaylinks_titlearea h5 {
    display: flex;
    align-items: center;
    font-size: 1.3em;
    color: #81d8d0;
}
#SF-awaylinks .SF-awaylinks_titlearea h5::before,
#SF-awaylinks .SF-awaylinks_titlearea h5::after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #81d8d0;
}
#SF-awaylinks .SF-awaylinks_titlearea h5::before {
    margin-right: 1rem;
}
#SF-awaylinks .SF-awaylinks_titlearea h5::after {
    margin-left: 1rem;
}
#SF-awaylinks .SF-awaylinks_titlearea p {
    color: #81d8d0;
}

.ec-eyecatchRole__awaylinks{
    position: relative;
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 30px 0px 50px;
    display: flex;
    justify-content: space-between;
}
.ec-eyecatchRole__awaylinks-child{
    width: 32%;
    margin: 0 auto;
    text-align: center;
}
.ec-eyecatchRole__awaylinks-child a{
    text-decoration: none;
    color: inherit;
}
.ec-eyecatchRole__awaylinks-child a img:hover{
    opacity: .8
}
.ec-eyecatchRole__awaylinks-child img{
    width: 100%;
}
.ec-eyecatchRole__awaylinks-child p{
    padding: 20px;
    font-weight: bold;
}





.SF-sp_hidden{
    display: block;
}

/*-- 新着情報 ------------------------------------------*/

.ec-newsRole__news{
    background-color: #fff;
}


/*-- CONCEPT ---------------------------------------------------*/

#SF-concept{
    position: relative;
}
#SF-concept .SF-concept_topimage{
    position: relative;
}
#SF-concept .SF-concept_topimage img{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    margin: auto;
    min-width: 100%;
}
#SF-concept .SF-concept_contents{
    position: relative;
    width: 100%;
}
#SF-concept .SF-concept_contents section{
    position: relative;
    width: 100%;
    max-width: 1000px;
    min-height: 80vh;
    margin: 10vh auto;
    color:#000;
    text-shadow: 0px 2px 3px #fff, 0px 3px 4px #fff
}
#SF-concept .SF-concept_contents section article{
    z-index: 1000;
}
#SF-concept .SF-concept_contents section article p{
    font-size: 20px;
    font-weight: bold;
    line-height: 2em;
    padding: 20px;
}

/*--section0--------*/
#SF-concept .SF-concept_contents .section0{
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 0 auto;
    padding: 0;
}
#SF-concept .SF-concept_contents .section0 .concept-titlearea h1{
    font-weight: bold;
}
#SF-concept .SF-concept_contents .section0 .concept-titlearea h3{
    font-size: 80px;
    font-family: Georgia, "Times New Roman", Times, YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
}

/*--section1--------*/
#SF-concept .SF-concept_contents .section1 img{
    position: absolute;
    top: 0;
    left:-10%;
    width: 50%;
    box-shadow: 0px 10px 10px rgba(0,0,0,.5);
}
#SF-concept .SF-concept_contents .section1 article{
    position: absolute;
    top: 30%;
    right: 0;
    width: 60%;
}

/*--section2--------*/
#SF-concept .SF-concept_contents .section2 img{
    position: absolute;
    bottom: 0;
    right:-5%;
    width: 40%;
    box-shadow: 0px 10px 10px rgba(0,0,0,.5);
}
#SF-concept .SF-concept_contents .section2 article{
    position: absolute;
    top: 0;
    left: 0;
    width: 65%;
}

/*--section3--------*/
#SF-concept .SF-concept_contents .section3 img{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    box-shadow: 0px 10px 10px rgba(0,0,0,.5);
}
#SF-concept .SF-concept_contents .section3 article{
    position: absolute;
    top: 30%;
    right: 0;
    width: 60%;
}

/*--section4--------*/
#SF-concept .SF-concept_contents .section4{
    text-align: center;
}
#SF-concept .SF-concept_contents .section4 article{
    width: 70%;
    margin: 0 auto;
    text-align: left;
}
#SF-concept .SF-concept_contents .section4 img{
    width: 50%;
    box-shadow: 0px 10px 10px rgba(0,0,0,.5);
}

/*--section5--------*/
#SF-concept .SF-concept_contents .section5{
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 0 auto;
    padding: 0;
}
#SF-concept .SF-concept_contents .section5 article{
    text-align: center;
    width: 90%;
    margin: 0 auto;
}
#SF-concept .SF-concept_contents .section5 article div{
    text-align: right;
}
#SF-concept .SF-concept_contents .section5 article .SF-concept_sign-img{
    width: 20%;
    min-width: 100px;
}

/*--gallery--------*/
#SF-concept .SF-concept_contents .SF-concept_gallery{
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: nowrap;
}
#SF-concept .SF-concept_contents .SF-concept_gallery div{
    width: 20%;
    margin: 0 auto;
}
#SF-concept .SF-concept_contents .SF-concept_gallery div img{
    width: 100%;
}


/*-- PROFILE ----------------------------------------------------------*/

#SF-profile{
    position: relative;
}
#SF-profile .SF-profile_topimage{
    position: relative;
    height: 40vh;
}
#SF-profile .SF-profile_topimage img{
    position: fixed;
    top: 0%;
    left: 50%;
    transform: translateY(0%) translateX(-50%);
    margin: auto;
    min-width: 100%;
}

#SF-profile .SF-profile_contents{
    position: relative;
    width: 100%;
    background-color: rgba(255,255,255,.8);
    color: #000;
    box-shadow: 0px 0px 20px 20px rgba(0,0,0,0.15);
    padding-top: 50px;
    padding-bottom: 50px;
}
#SF-profile .SF-profile_contents .ec-pageHeader,
#SF-profile .SF-profile_area{
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
}
#SF-profile .SF-profile_area{
    display: flex;
    justify-content: space-between;
}
#SF-profile .SF-profile_area div{
    width: 50%;
    text-align: center;
}
#SF-profile .SF-profile_area img{
    width: 80%;
    margin: 5% auto;
}
#SF-profile .SF-profile_area h2{
    font-size: 1.8em;
    margin: 0 auto;
    padding: 20px;
}
#SF-profile .SF-profile_area h2 span{
    font-size: 0.6em;
    margin-left: 20px;
}
#SF-profile .SF-profile_area table{
    width: 90%;
    margin: 5% auto;
}
#SF-profile .SF-profile_area table tr{
    border-bottom: 1px dotted #333;
}
#SF-profile .SF-profile_area table tr:first-child{
    border-top: 1px solid #333;
}
#SF-profile .SF-profile_area table th{
    font-weight: bold;
    font-size: 1.1em;
    padding: 10px 20px;
    text-align: left;
}
#SF-profile .SF-profile_area table td{
    padding: 10px 20px;
    text-align: left;
}

#SF-profile .SF-profile_area article{
    width: 95%;
    margin: 0 auto;
}
#SF-profile .SF-profile_area article h4{
    font-weight: bold;
    color: #81d8d0;
    padding: 10px 20px;
}
#SF-profile .SF-profile_area article dl{
    text-align: left;
}
#SF-profile .SF-profile_area article dt{
    border-top: 2px solid #fff;
    padding: 10px 20px 5px;
}
#SF-profile .SF-profile_area article dd{
    padding: 5px 20px 10px 40px;
}

#SF-profile .SF-profile_text-area{
    width: 95%;
    max-width: 900px;
    margin: 30px auto;
    padding: 10px;
    background: #fff;
    /*color: #fff;*/
    border-radius: 10px;
}
#SF-profile .SF-profile_text-area p{
    line-height: 1.8em;
    padding: 10px 20px;
}



/*-- PRODUCT ----------------------------------------------------------*/

#SF-product{
    position: relative;
}
#SF-product .SF-product_topimage{
    position: relative;
    height: 40vh;
}
#SF-product .SF-product_topimage img{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    margin: auto;
    min-width: 100%;
}
#SF-product .SF-product_contents{
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 50px 0px;
    background-color: #222;
    box-shadow: 0px 0px 20px 20px rgba(0,0,0,0.15);
}

#SF-product .SF-product_contents .ec-pageHeader{
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
}
#SF-product .SF-product_contents section{
    width: 100%;
}
/*
#SF-product .SF-product_contents .SF-CB-contents{
    background: linear-gradient(#fff 20%, #fff, #dcdcd8 85%, #fff);
}*/
#SF-product .SF-product_contents #SF-CB-white,
#SF-product .SF-product_contents #SF-CB-black{
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}
#SF-product .SF-product_contents #SF-CB-black{
    flex-direction: row-reverse;
}
#SF-product .SF-product_contents article div{
    width: 46%;
    margin: 0 auto;
    padding: 2%;
}
#SF-product .SF-product_contents article div img{
    width: 100%;
}
#SF-product .SF-product_contents article div h4{
    font-size: 1.8em;
    font-weight: bold;
    margin: 30px auto;
    padding: 10px 20px;
    border: 6px solid #999;
}
#SF-product .SF-product_contents article div p{
    font-size: 1.1em;
    margin: 30px auto;
    padding: 10px 20px;
    line-height: 1.6em;
    border-left: 1px solid #999;
}

/*-------特定商取引法に基づく表記の行高-----------------------*/
.ec-off1Grid .ec-off1Grid__cell .ec-borderedDefs dl dt,
.ec-off1Grid .ec-off1Grid__cell .ec-borderedDefs dl dd{
    padding: 10px;
    line-height: 1.5em
}































@media screen and (min-width:768px) {
    #SF-nav-drawer /*.SF-nav-logo, #SF-nav-open*/ {
        display:none;
    }
    
}


@media (max-device-width:767px){
    
    .SF-sp_hidden{
        display: none;
    }
    
    /*-- TOP ---------------------------*/

    /*（動画）*/
    .SF-top_video{
        position: relative;
        top: 0;
        left: 0;
        transform: translateY(0) translateX(0);
        height: 60vh;
        padding-top: 70px;
        overflow: hidden;
    }
    .SF-top_video video{
        position: relative;
        width: 156%;
        height: auto;
    }
    .SF-top_videoshowarea{
        display: none;
    }

    
    /*-- INTRODUCTION ------------------------------------------*/
    .ec-eyecatchRole__intro .ec-eyecatchRole__introEnTitle{
        font-size: 2em;
        margin: 30px auto;
        padding: 0 30px;
    }
    .ec-eyecatchRole__intro .ec-eyecatchRole__introEnTitle:before,
    .ec-eyecatchRole__intro .ec-eyecatchRole__introEnTitle:after {
        width: 30px;
    }
    .ec-eyecatchRole__intro .ec-eyecatchRole__introTitle{
        font-size: 1.5em;
    }
    .ec-eyecatchRole__intro .ec-eyecatchRole__introDescription{
        font-size: 1em;
    }

    /*navi*/
    .ec-eyecatchRole__intro_navi{
        flex-direction: column;
    }
    .ec-eyecatchRole__intro_navi-child{
        width: 90%;
    }
    .ec-eyecatchRole__intro_navi-child h5{
        margin: 20px auto;
    }
    .ec-eyecatchRole__intro_navi-child h5:before,
    .ec-eyecatchRole__intro_navi-child h5:after {
        width: 20px;
    }
    .ec-eyecatchRole__intro_navi-child p{
        padding: 10px;
    }
    
    /*-- 外部リンク ------------------------------------------*/
    .ec-eyecatchRole__awaylinks{
        flex-direction: column;
    }
    .ec-eyecatchRole__awaylinks-child{
        width: 90%;
    }
    .ec-eyecatchRole__awaylinks-child p{
        padding: 10px;
    }
    
    
    /*-- 新着情報 ------------------------------------------*/
    .ec-newsRole__news{
        background-color: transparent;
    }
    
    /*-- concept ------------------------------------------*/
    #SF-concept .SF-concept_topimage img{
        left: -15%;
        transform: translateY(-50%) translateX(0);
    }
    #SF-concept .SF-concept_contents section article p{
        font-size: 16px;
    }
    #SF-concept .SF-concept_contents section article p span{
        display: block;
    }
    /*--section0--------*/
    #SF-concept .SF-concept_contents .section0{
        padding: 20px;
    }
    /*--section1--------*/
    #SF-concept .SF-concept_contents .section1 article,
    #SF-concept .SF-concept_contents .section2 article,
    #SF-concept .SF-concept_contents .section3 article,
    #SF-concept .SF-concept_contents .section4 article{
        position: relative;
        width: 90%;
        margin: 0 auto;
    }
    #SF-concept .SF-concept_contents .section1 img{
        position: relative;
        left: 0;
        width: 70%;
        margin: 0 auto;
    }
    /*--section2--------*/
    #SF-concept .SF-concept_contents .section2 img{
        position: relative;
        top: 0;
        left: 0;
        width: 70%;
        margin: 0 auto;
    }
    /*--section3--------*/
    #SF-concept .SF-concept_contents .section3 img{
        position: relative;
        left: auto;
        width: 70%;
        margin: 0 auto;
    }
    /*--section4--------*/
    #SF-concept .SF-concept_contents .section4 img{
        position: relative;
        width: 100%;
    }

    #SF-concept .SF-concept_contents .SF-concept_gallery{
        flex-wrap: wrap;
        justify-content: space-around;
    }
    #SF-concept .SF-concept_contents .SF-concept_gallery div{
        width: 50%;
    }
    
    /*-- profile ------------------------------------------*/
    
    #SF-profile .SF-profile_topimage{
        height: 60vh;
    }
    #SF-profile .SF-profile_topimage img{
        left: 30%;
    }
    
    #SF-profile .SF-profile_contents .ec-pageHeader,
    #SF-profile .SF-profile_area{
        width: 100%;
        padding: 0;
    }
    #SF-profile .SF-profile_area h2 span{
        display: block;
    }
    #SF-profile .SF-profile_area{
        flex-direction: column;
    }
    #SF-profile .SF-profile_area div, #SF-profile .SF-profile_area table{
        width: 100%;
    }
    
    
    /*-- product ------------------------------------------*/
    
    #SF-product .SF-product_topimage{
        height: 25vh;
    }
    #SF-product .SF-product_topimage img{
        top: 0%;
        left: 50%;
        transform: translateY(10%) translateX(-50%);
        width: 100%;
    }
    
    #SF-product .SF-product_contents article{
        flex-direction: column;
    }
    #SF-product .SF-product_contents article div{
        width: 100%;
    }
    
    
}





















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








/* -----------------------------------------
フェードインCSS ここから
-----------------------------------------*/
.u-fadein{
  opacity: 0;
  transition: 2s;
}
.u-fadein._bottom{
  transform: translate(0,50px);/*translate(X軸,Y軸) Y軸50px=下に50px移動*/
}
.u-fadein._left{
  transform: translate(-50px,0);/*translate(X軸,Y軸) X軸-50px=左に50px移動*/
}
.u-fadein._right{
  transform: translate(50px,0);/*translate(X軸,Y軸) X軸50px=右に50px移動*/
}
.u-fadein._top{
  transform: translate(0,-50px);/*translate(X軸,Y軸) Y軸-50px=上に50px移動*/
}
.u-fadein.is-show{
  opacity: 1 !important;
  transform: translate(0,0) !important;
}