@charset "utf-8";

/*************** HTML5 reset ***************/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    margin-right: auto;
    margin-left : auto;
	line-height: 1.6;
    width: 100%;
    overflow-x: hidden;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display: block;
}
ul, ol, li {
    list-style: none;
}

img {
	vertical-align: top;
}

a {
	text-decoration: none;
}

a:hover {
    opacity: 0.8;
}

/*************** Common ***************/
html {
	overflow-y: scroll;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	letter-spacing: -0.001em;
	font-size: 14px;
    text-align: left;
    font-feature-settings: "palt";
}	
body {
	font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    font-size: 100%;
    font-weight: 500;
	color: #333333;
	background-color: #fff;
}


.sp {
    display: none;
}

.pc {
    display: block;
}

.none {
    display: none;
}

.right {
    text-align: right;
}

.contents {
    margin: 0 auto;
}

.fade_off {
    opacity: 0;
    transition: all 0.8s;
}

.off {
    opacity: 0;
}

.fade_on {
    transition: all 0.8s;
    opacity: 1;
}


/* siteHeader */
#headerWrap {
    width: 1000px;
    margin: 0 auto;
    display: flex;
    padding: 20px 0;
    align-items: center;
    position: relative;
}

#corpLogo img {
    height: 26px;
}

#inquiry_icon {
	display: flex;
	align-items: center;
	position: fixed;
	top: 3px;
	right: 5%;
	z-index: 1010;
	border: 3px solid #c3c3c3;
	border-radius: 20px;
	background-color: #fff;
	padding: 14px;
	transition: 1s;
}

#inquiry_icon.slide {
    transition: 1s;
    transform: translate3d(0, 20px, 0);
}

#inquiry_icon a:nth-child(n+2) img {
    margin-left: 10px;
}

#contents {
  background-color: #dce0f3;  
}

/*** main ***/
#mainWrap {
	width: 1000px;
	margin: 0 auto;
	position: relative;
    padding-top: 50px;
    box-sizing: border-box;
    height: 860px;
}

#mainWrap h1 {
	font-size: 55px;
	text-align: center;
    color: #0075c2;
    line-height: 1.3;
}

#mainWrap .h1sub {
    font-size: 40px;
    text-align: center;
    font-weight: bold;
	color: #666;
}

/*メインビジュアル*/
#mv {
	padding: 100px 0;
}

#mvWrap {
    position: relative;
}

.mvIcon {
    position: absolute;
}

.mvTotal {
    position: absolute;
}

.mvIcon img {
    position: absolute;
}

#mv_total {
	top: 32%;
    left: 32%;
    visibility: hidden;
}

#mv_m {
	top: -12%;
	left: 34%;
}

#mv_c {
	top: 4%;
	left: 75%;
}

#mv_p {
	top: 56%;
	left: 61%;
}

#mv_s {
	top: 69%;
	left: 27%;
}

#mv_r {
	left: 1%;
	top: 16%;
}

/**イラスト動き**/
.mvIcon .mv_color, .mvIcon .mv_mono {
    opacity: 0;
}

.mvIcon .mv_mono.start {
    animation:
        mainIconMonoFadeIn 1s linear;
}

#mv_c .mv_mono.start {
    animation-delay: 0.4s;
}
#mv_p .mv_mono.start {
    animation-delay: 0.8s;
}
#mv_s .mv_mono.start {
    animation-delay: 0.2s;
}
#mv_r .mv_mono.start {
    animation-delay: 0.6s;
}

@keyframes mainIconMonoFadeIn {
    20% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

.mvIcon .mv_mono.appear {
    opacity: 1;
}

/*カラー表示*/
.mvIcon .mv_color.start {
    animation:
        mainIconColorFadeIn 5s linear 0s infinite;
}

#mv_c .mv_color.start {
    animation-delay: 1s;
}
#mv_p .mv_color.start {
    animation-delay: 2s;
}
#mv_s .mv_color.start {
    animation-delay: 3s;
}
#mv_r .mv_color.start {
    animation-delay: 4s;
}

@keyframes mainIconColorFadeIn {
    3% {
        opacity: 1;
    }
    18.75% {
        opacity: 1;
    }
    21% {
        opacity: 0;
    }
}


#circle {
    display: block;
    margin: 0 auto;
    visibility: hidden;
}

/***コンテンツ***/
.sectionWrap {
	background-color: #fff;
	margin-top: 30px;
    padding: 70px 0;
}

.contentWrap {
    display: flex;
    justify-content: space-around;
    width: 1000px;
    margin: 0 auto;
}

.contentDescription h2, .contentDescription h3, .sectionWrap .point h4 {
    transform: translate3d(0, 50px, 0);
    opacity: 0;
}

.contentDescription h2.slideIn, .contentDescription h3.slideIn, .sectionWrap .point h4.slideIn {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    transition-duration: 1s;
}

.contentDescription .h2sub {
	display: flex;
	font-size: 24px;
	margin-top: 10px;
	margin-left: 10px;
}

.contentDescription .h2sub p:first-child {
    font-weight: 600;
    color: #0075c2;
}

.contentDescription .h2sub p:nth-child(2) {
	margin-left: 15px;
	font-weight: 600;
	color: #666;
}

.contentDescription h3 {
	font-size: 30px;
	font-weight: 600;
	color: #0075c2;
	margin-top: 30px;
}

.contentDescription .h3sub {
    font-size: 20px;
}

.point {
    width: 1000px;
    margin: 0 auto;
    box-sizing: border-box;
}
#marketingWrap .point {
    padding-left: 150px;
}
#creativeWrap .point {
    padding-left: 450px;
}
#printingWrap .point {
    padding-left: 350px;
}
#surveyWrap .point {
    padding-left: 450px;
}
#reportWrap .point {
    padding-left: 150px;
    margin-top: -150px;
}

.sectionWrap h4 {
	color: #ff3333;
	font-size: 25px;
	font-weight: 600;
	margin-top: 30px;
	margin-left: 30px;
}

.pointDescription {
    display: flex;
    align-items: center;
}

.pointDescription img.move {
    animation: yureru 1s infinite;
    transform-origin: bottom;   
}
@keyframes yureru {
    0% {transform: rotate3d(0, 0, 0, 0)}
    12.5% {transform: rotate3d(1, 2, -1, 15deg)}
    25% {transform: rotate3d(0, 0, 0, 0)}
    37.5% {transform: rotate3d(1, 2, -1, -11deg)}
    50% {transform: rotate3d(0, 0, 0, 0)}
    62.5% {transform: rotate3d(1, 2, -1, 7deg)}
    75% {transform: rotate3d(0, 0, 0, 0)}
    87.5% {transform: rotate3d(1, 2, -1, -3deg)}
    100% {transform: rotate3d(0, 0, 0, 0)}
}



.sectionWrap .h4sub {
    font-size: 20px;
    margin-left: 15px;
}

.contentImage {
    position: relative;
    margin-left: 3%;
}


.contentImage .person {
    position: absolute;
    transition: all 1s;
    left: 0;
    top: 0;
}

#creativeWrap .contentImage, #surveyWrap .contentImage {
    order: -1;
    margin-left: 0;
    margin-right: 3%;
}

#footerMessage p {
	margin: 0 auto;
	width: 1000px;
	font-size: 30px;
	text-align: center;
	font-weight: 600;
	color: #666;
	padding: 25px 0;
}



/***footer***/
/*inquiry*/
#inquiryWrap {
    background-color: #dce0f3;
}

.inquiry {
    width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding: 25px 0;
    margin-top: 5px;
}

.companyInfo {
    width: 1000px;
    margin: 0 auto;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    padding: 15px 0;
}

.companyInfo .en {
    padding-left: 5px;
    padding-right: 20px;
    font-size: 80%;
}

.address {
    position: relative;
    padding-left: 20px;
    font-size: 80%;
}

.address::before {
	content: "";
	position: absolute;
    left: 0;
    bottom: 0;
	width: 18px;
	height: 30px;
	background: url("../img/img_pin.svg") no-repeat;
}

#pageTop {
	position: fixed;
	bottom: 80px;
	right: 5%;
    z-index: 1010;
}

#pageTop img {
    opacity: 0.8;
}

#pageTop.slide {
    transition: 1s;
    transform: translate3d(0, 71px, 0);
}






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

	.sp {
		display: block;
    }
    

    #headerWrap {
        max-width: 750px;
        width: 92%;
    }

    #corpLogo img {
        height: 4.5vw;
    }
    #inquiry_icon {
        padding: 10px;
        right: 1.5%;
    }

    #inquiry_icon img {
        max-width: 30px;
    }


    #mainWrap {
        width: 92%;
        height: auto;
        padding-top: 5vw;
    }

    #mainWrap h1 {
        font-size: 7.8vw;
    }
    #mainWrap .h1sub {
        font-size: 5.5vw;
        line-height: 1.2;
        margin-top: 10px;
    }

    /*メインビジュアル*/
    #mv {
        padding: 12vw 0;
    }

    #mvWrap #circle {
        width: 70%;
    }

    .mvTotal img {
        width: 32vw;
    }
    .mvIcon img {
        width: 26vw;
    }

    #mv_c {
        left: 69%;
    }

    /*コンテンツ*/
    .sectionWrap {
        padding: 8vw 0;
    }

    .contentWrap {
        display: block;
        width: 92%;
    }

    .contentDescription h2 {
        text-align: center;
    }
    .contentDescription h2 img {
        max-width: 80%;
    }

    .contentDescription .h2sub {
        display: block;
        font-size: 5vw;
        margin-left: 0;
        margin-top: 5px;
    }

    .contentDescription .h2sub p:nth-child(1) {
        text-align: center;
    }

    .contentDescription .h2sub p:nth-child(2) {
        margin: 0;
    }

    .contentDescription h3 {
        font-size: 6vw;
    }

    .contentDescription .h3sub {
        font-size: 4.5vw;
    }

    .contentImage {
        display: flex;
        justify-content: center;
        align-items: center;
    }

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

    .contentImage .person {
        left: 50%;
        transform: translateX(-50%);
    }

    #contents .point {
        width: 92%;
        padding: 0;
    }

    #reportWrap .point {
        margin-top: 0;
    }
    
    .point h4 {
        margin-left: 6vw;
        font-size: 5.5vw;
    }

    .pointDescription {
        justify-content: center;
    }

    .pointDescription img {
        min-width: 7vw;
    }

    .sectionWrap .h4sub {
        font-size: 4.5vw;
    }

    #footerMessage p {
        width: 90%;
        font-size: 6vw;
        text-align: left;
    }

    /*フッター*/

    .inquiry {
        width: 100%;
        display: block;
    }

    .inquiry a, .inquiry img {
        margin: 0 auto;
        display: block;
        width: 90%;
    }

   .inquiry img.pc {
        display: none;
    }

    .inquiry a {
        margin-top: 15px;
    }

    .companyInfo {
        width: 90%;
        font-size: 16px;
    }

    .companyInfo .en {
        padding-left: 0;
        padding-right: 0;
    }

    #pageTop.slide {
        transform: translate3d(0, -0px, 0);
        bottom: 3%;
    }
    #pageTop img {
        width: 10vw;
    }


}