@charset "utf-8";

/*画面読み込み時のコンテンツの設定*/
#container{
    position: relative;
    margin: 0;
    width: 100%;
    height: auto;
    animation-name:PageAnimeAppear;
	animation-duration:1s;
	animation-delay:0.2s;
	animation-fill-mode:forwards;
    animation-timing-function: ease-in-out;
	opacity: 0;/*はじめは透過0に*/
}

@keyframes PageAnimeAppear{
	0% {
	    opacity: 0;
	}
	100% {
	    opacity: 1;
    }
}


/*==================================================
基本のアニメーション
===================================*/

/*ふわっ（その場で） */
.fadeIn{
    animation-name: fadeInAnime;
    animation-duration:1.2s;
    animation-fill-mode:forwards;
    animation-timing-function: ease-in;
    opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/*ふわっ（下から） */

.fadeUp{
    animation-name: fadeUpAnime;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
    animation-timing-function: ease-in-out;
    opacity:0;

}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*ボンッ*/
.zoomIn{
	animation-name: zoomInAnime;
	animation-duration:0.6s;
	animation-fill-mode:forwards;
    animation-timing-function: ease-in;
}

@keyframes zoomInAnime{
    0% {
        transform: scale(0.6);
        opacity: 0;
  }
    100% {
        transform: scale(1);
        opacity: 1;
  }
}

.zoomInOut{
	animation-name: zoomInOutAnime;
	animation-duration:0.8s;
	animation-fill-mode:forwards;
    animation-timing-function: ease-in;
}

@keyframes zoomInOutAnime{
    0% {
        transform: scale(0.6);
        opacity: 0;
  }
    50% {
        transform: scale(1.2);
        opacity: 1;
  }
    100% {
        transform: scale(1);
        opacity: 1;
  }
}


/* スクロールをしたら出現する要素のはじめに透過0を指定　*/
.fadeInTrigger,
.fadeUpTrigger,
.zoomInTrigger,
.zoomInOutTrigger,
.flipLeftTopTrigger,
.flipRightTopTrigger{
    opacity: 0;
}

/*基本の動きのレイアウト設定*/
#container, #feature, #service{
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/*========= アニメーションのコントロール ===============*/
/* アニメーションスタートの遅延時間*/

.delay-time02{
    animation-delay: 0.2s;
}

.delay-time03{
    animation-delay: 0.3s;
}

.delay-time04{
    animation-delay: 0.4s;
}

.delay-time06{
    animation-delay: 0.6s;
}

.delay-time10{
    animation-delay: 0.6s;
}

/*========= レイアウトのためのCSS ===============*/
html{
    width: 100%;
    font-size: 4.3vw!important;
    font-family: Hiragino Sans, system-ui, Meiryo, sans-serif;
    overflow-x: hidden;
    text-align: center;
}

body{
    overflow-x: hidden;
    color: #333;
    text-align: center;
    margin: 0;
	font-size: 1rem;
	line-height: normal;
    -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%; 
	word-wrap: break-word;
}

h1{
    font-size: 6.5vw;
    font-weight: bold;
}

h2{
    font-size: 5vw;
    font-weight: bold;
}

h3{
    font-size: 4.5vw;
    font-weight: bold;
}

h4{
    font-size: 4vw;
    font-weight: bold;
}

p{
    font-size: 4.3vw!important;
}

ul{
	margin:0;
	padding: 0;
	list-style: none;
}

a{
	text-decoration: none;
    outline: none;
    color: #333;
}

img{
    width:100%;
    height: auto;
}

*{
    box-sizing: border-box
}

.flex{/*拡大・縮小・ぼかし・にゅーん・スーッには不要*/
	display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
	flex-wrap: wrap;
}

.note{
    font-size: 3.7vw;
}

.note::before{
    content: '※';
}

.vertical-align-super{
    font-size: 0.75em;
    vertical-align: super;
}

.hero-area{
    width: 100%;
    height: auto;
}

.hero-area img{
    width: 100%;
    height: auto;
}

.hero-top{
    position: relative;
    margin: 0 auto;
    padding: 0 8vw;
}

.hero-mid{
    position: relative;
    width: 100%;
    height: 113vw;
    margin: 0 auto;
    padding: 0;
}

.hero-mid-left__logo{
    position: absolute;
    top: -12vw;
    left: 0.4vw;
    z-index: 1000;
}

.hero-mid-left__symble {
    position: absolute;
    top: 14vw;
    left: 1vw;
    z-index: 50;
}

.hero-mid-left__msg{
    position: absolute;
    top: 30.5vw;
    left: 13vw;
    z-index: 200;
}

img.hero-mid-left__msg{
    width:34vw;
}

.hero-mid-right__img{
    position: absolute;
    left: 0;
    top: 3;
    height:auto;
    z-index: 3000;
}

.hero-bottom{
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 5vw 12vw 8vw;
    text-align: justify;
    line-height: 1.6;
    /*letter-spacing: 0.1em;*/
}

.hero-bottom span{
        display: inline;
    }

#feature{
    width: 100%;
    margin: 0;
    padding: 12vw 12vw 6vw;
    background-color: #F7F7F5;
}

#feature h2{
    padding: 4vw 0;
    border-top: 2.5px solid #333;
    border-bottom: 2.5px solid #333;
    font-size: 5.9vw
}

#feature span, #service span{
        display: inline-block;
    }

.feature-detail{
    margin: 5vw 0;
    display: block;
    text-align: center;
}

.feature-detail__icon{
    width: 40vw;
    height: 40vw;
    margin: 6vw auto 0;
    padding: 10vw;
    background: url("/content/dam/mccm/mc/common/campaign/dx/mcc_me/lp/index_page/me-icon-bg.png") no-repeat center center;
    background-size: contain;
}

.feature-detail__title{
    padding-bottom: 1.2vw;
    }

.feature-detail__summary{
    text-align: justify;
    }

#service{
    margin: 0;
    padding: 10vw 0 0;
}

#service h2{
    padding: 0;
}

.service-apps{
    display: block;
}

.service-apps img{
    padding: 8vw 20vw 4vw 15vw;
    width: 100%;
    height: auto;
}

.service-apps__text{
    text-align: center;
    margin-bottom: 10vw;
}

.service-apps__text span{
    background: #F7EE4D;
}

.service-apps__text h2{
    font-size: 5.5vw;
}
.service-apps__text h3{
    margin-top: 1.8vw;
    font-size: 5.5vw;
}

#sp-apps{
        display: none;
    }

#apps{
        display: block;
    }

@media screen and (min-width: 640px) {
    html{
    width: 100%;
    font-size: 20px!important;
    font-family: Hiragino Sans, system-ui, Meiryo, sans-serif;
}

    body{
        max-width: 1280px;
        margin: 0 auto!important;
    }
    
    h1{
        font-size: 32px;
    }

    h2{
        font-size: 24px;
    }

    h3{
        font-size: 22px;
    }

    h4{
        font-size: 18px;
    }
    
    P{
        font-size: 100%!important;
    }

    .note{
        font-size: 14px;
    }

    .note::before{
        content: '※';
    }

    .hero-top{
        margin: 0.8em auto 1.7em;
        padding: 0 2em;
    }

    .hero-mid{
        height: 43.76vw;
        max-height: 560px;
    }
    
    img.hero-mid-left__logo{
        width: 49%;
    }

    .hero-mid-left__logo{
        top: -22.5%;
        left: -0.5%;
    }

    img.hero-mid-left__symble{
        width: 64%;
    }
    
    
    .hero-mid-left__symble{
        top: -4%;
        left: 1%;
    }

    img.hero-mid-left__msg{
        width: 32%;
    }
    
    .hero-mid-left__msg{
        top: 24%;
        left: 8.5%;
    }
    
    img.hero-mid-right__img{
        max-width: 1280px;
    }

    .hero-mid-right__img{
        top: 0;
        left: 0;
        z-index: 3000;
    }

    .hero-bottom{
        margin: 0 auto;
        padding: 3em 4em 2em;
        text-align: center;
        font-size: 22px;
        line-height: 1.8;
    }
    
    .hero-bottom span{
        display: inline-block;
    }

    #feature{
        width: 100%;
        margin: 0;
        padding: 3em 0 0.9em;
    }

    #feature h2{
        width: 84%;
        max-width: 900px;
        margin: 0.3em auto 1em;
        padding: 0.6em 0;
        font-size: 24px;
    }
    
    .feature-detail{
        width: 90%;
        max-width: 920px;
        margin: 0.2em auto 0.2em;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex-wrap: wrap;
        -webkit-align-items: center;
        align-items: center;
        justify-content: center;
        text-align: left;
    }

    .feature-detail__icon{
        width: 25%;
        min-width: 180px;
        max-width: 240px;
        height: auto;
        min-height: 180px;
        margin: 0;
        margin-left: -2.5%;
        padding: 50px;
    }
    
    .feature-detail__text{
        flex: 1;
        flex-grow: 1;
    }

    .feature-detail__summary{
        text-align: left;
        /*align-self:flex-start;*/
        }
    
    #service{
        margin: 0;
        padding: 4.5em 0 0;
    }
    
    .service-apps{
        width: 100%;
        margin: 0.5em auto 3.5em;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex-wrap: wrap;
        -webkit-align-items: center;
        align-items:center;
        justify-content: center;
        font-size: 24px;
        column-gap: 3.5em;
        row-gap: 2em;
    }
    
    .service-apps img{
        width: 28%;
        min-width: 200px;
        max-width: 480px;
        height: auto;
        margin: 0;
        padding: 0;
    }

    .service-apps__text{
        margin: 0;
        padding: 0;
        text-align: left;
    }
    
    .service-apps__text h2{
        margin: 0;
        padding: 0;
        font-size: 30px!important;
    }
    
    .service-apps__text h3{
        margin: 0;
        padding: 0;
        margin-top: 10px;
        font-size: 30px!important;
    }
    
    #sp-apps{
        display:block
    }
    
    #apps{
        display: none;
    }
}