@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap");

html {
  scroll-behavior: smooth;
}

img{
-webkit-backface-visibility: hidden;
}

body {

	background-size: 100%;
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, Verdana, Meiryo, sans-serif;
    color: #000;
    font-weight: 500;
    letter-spacing: 0.05em;
    word-break: break-word;
    font-feature-settings: "palt";
  }

div{
	box-sizing: border-box;
}

/**トップ**/
.top{
	width: 100%;
	margin: 0 auto 0;
	padding: 72% 0 0;
	background: url("../img/top_bg.jpg") no-repeat top;
	background-size: 100%;
	text-align: center;
}

.top .txt{
	
}

.top .txt img{
	width: 68%;
}

.start_btn{
	width: 50%;
	margin: 20% auto 8%;
}

.start_btn img{
	width: 100%;
}

/**フローチャート**/
.flowchart{
	width: 100%;
	margin: 0 auto;
	padding: 77% 0 6%;
	background: url("../img/flowchart_bg.jpg") no-repeat top;
	background-size: 100%;
	text-align: center;
}

.flowchart .txt{
	
}


.flowchart .txt img{
	width: 62%;
}

.flowchart .flow_btn{
	width: 68%;
	margin: 5% auto 28%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;

}

.flowchart .flow_btn .left{
	width: 48%;
}

.flowchart .flow_btn .right{
	width: 48%;
}

.flowchart .flow_btn .left img,
.flowchart .flow_btn .right img{
	width: 100%;
}

/**結果**/
.result{
	width: 100%;
	margin: 0 auto;
	padding: 63% 0 5%;
	background: url("../img/result_bg.jpg") no-repeat top;
	background-size: 100%;
	text-align: center;
}

.result .title{
	width: 35%;
	margin: 0 auto 5%;
}

.result .cont{
	width: 68%;
	margin: 0 auto 14%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;

}

.result .cont .color,
.result .cont .skeleton{
	width: 45%;
}

.result .cont .color .title,
.result .cont .skeleton .title{
	width: 96%;
	margin: 0 auto 9%;
}

.result .cont .color .photo,
.result .cont .skeleton .photo{
	width: 100%;
	margin-bottom: 12%;
}

.result .cont .color .btn_shosai,
.result .cont .skeleton .btn_shosai{
	width: 100%;
}

.result .cont .and{
	width: 8%;
	display: flex;
	align-items: center;
	justify-content: center;
}



.result .title img,
.result .cont .color img,
.result .cont .skeleton img,
.result .code_btn img{
	width: 100%;
}

.result .cont .and img{
	width: 100%;
}

.result .code_btn{
	width: 55%;
	margin: 4% auto 12%;
}


.result .sns{
	width: 50%;
	margin: 7% auto 0%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.result .sns .title{
	width: 100%;
	font-size: 3.6vw;
	margin-bottom: 3%;
	text-align: center;
}

.result .sns .icon{
	width: 30%;
}

.result .sns .icon img{
	width: 100%;
}

.success-msg {
    display: none;
    position: fixed;
    width: 300px;
    height: 40px;
    line-height: 40px;
    background-color: #707070;
    color: #fff;
    top: 500px;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    border-radius: 5px;
}

/**骨格診断詳細**/
.skeleton_detail_wave{
	background: url("../img/wave_bg.jpg") no-repeat top;
}

.skeleton_detail_straight{
	background: url("../img/straight_bg.jpg") no-repeat top;
}

.skeleton_detail_natural{
	background: url("../img/natural_bg.jpg") no-repeat top;
}


.skeleton_detail_wave,
.skeleton_detail_straight,
.skeleton_detail_natural{
	width: 100%;
	margin: 0 auto 0;
	padding: 15% 0 6%;
	background-size: 100%;
	text-align: center;}


.skeleton_detail{
	width: 80%;
	margin: 0 auto;

}

.skeleton_detail .title{
	width: 82%;
	margin: 0 auto 3%;
	
}

.skeleton_detail .photo{
	width: 74%;
	margin: 0 auto 6%;
	
}

.skeleton_detail .photo_natural{
	width: 70%;
	margin: 0 auto 4%;
	
}

.skeleton_detail .point{
	width: 90%;
	margin: 0 auto 7%;
	font-size: 1.5em;
	font-weight: 800;
	line-height: 170%;
	
}

.skeleton_detail .keyword{
	width: 90%;
	margin: 0 auto 8%;
}

.skeleton_detail .title img,
.skeleton_detail .photo img,
.skeleton_detail .keyword img{
	width: 100%;
}


/**骨格診断詳細
.skeleton_detail{
	width: 90%;
	margin: 8% auto;
	padding: 10% 0 3%;
	background: #FFF;
	font-size: 1.1em;
	line-height: 170%;
	border-radius: 10px;
}

.skeleton_detail .title{
	width: 70%;
	margin: 0 auto 7%;
	
}

.skeleton_detail .photo{
	width: 70%;
	margin: 0 auto 7%;
	
}

.skeleton_detail .point{
	width: 90%;
	margin: 0 auto 7%;
	font-size: 1.5em;
	font-weight: 800;
	line-height: 180%;
	
}

.skeleton_detail .keyword{
	width: 90%;
	margin: 0 auto 7%;
	
	
	
}

.skeleton_detail .keyword p.keyword_point{
	font-size: 1.3em;
	font-weight: 800;
	line-height: 180%;
}

.skeleton_detail .keyword p.keyword_feature{
	font-size: 1.6em;
	font-weight: 800;
	line-height: 180%;
}

.skeleton_detail .keyword p.keyword_catch_natural{
	width: 100%;
	padding: 4% 0;
	margin-bottom: 4%;
	background: #fdf1f2;
	text-align: center;
	font-size: 1.3em;
	font-weight: 800;
	line-height: 180%;
}

.skeleton_detail .keyword p.keyword_catch_wave{
	width: 100%;
	padding: 4% 0;
	margin-bottom: 4%;
	background: #eef6f0;
	text-align: center;
	font-size: 1.3em;
	font-weight: 800;
	line-height: 180%;
}

.skeleton_detail .keyword p.keyword_catch_straight{
	width: 100%;
	padding: 4% 0;
	margin-bottom: 4%;
	background: #eef7fa;
	text-align: center;
	font-size: 1.3em;
	font-weight: 800;
	line-height: 180%;
}


.skeleton_detail .title img,
.skeleton_detail .photo img{
	width: 100%;
	
}
**/

/**パーソナルカラー診断詳細**/
.color_detail_spring{
	background: url("../img/spring_bg.jpg") no-repeat top;
}

.color_detail_summer{
	background: url("../img/summer_bg.jpg") no-repeat top;
}

.color_detail_autumn{
	background: url("../img/autumn_bg.jpg") no-repeat top;
}

.color_detail_winter{
	background: url("../img/winter_bg.jpg") no-repeat top;
}

.color_detail_spring,
.color_detail_summer,
.color_detail_autumn,
.color_detail_winter{
	width: 100%;
	margin: 0 auto 0;
	padding: 15% 0 0%;
	background-size: 100%;
	text-align: center;}


.color_detail{
	width: 80%;
	margin: 0 auto;

}

.color_detail .title{
	width: 75%;
	margin: 0 auto 5%;
	
}

.color_detail .photo{
	width: 68%;
	margin: 0 auto 6%;
	
}

.color_detail .point{
	width: 90%;
	margin: 0 auto 7%;
	font-size: 1.5em;
	font-weight: 800;
	line-height: 170%;
	
}

.color_detail .keyword{
	width: 90%;
	margin: 0 auto 6%;
}

.color_detail .title img,
.color_detail .photo img,
.color_detail .keyword img{
	width: 100%;
}

.color_spring{
	color: #ec6165;
}

.color_summer{
	color: #05a096;
}

.color_autumn{
	color: #56283c;
}

.color_winter{
	color: #013e41;
}

.detail_btn{
	width: 40%;
	margin: 5% auto 20%;

}

.detail_btn .go_top{
	width: 100%;
	margin-bottom: 7%;
	
}

.detail_btn .go_back{
	width: 100%;
}

.detail_btn .go_top img,
.detail_btn .go_back img{
	width: 100%;
}


/**マージン**/
.mb4{
	margin-bottom: 4%;
}

/**アニメーション**/
.top img,
.flowchart img,
.result img{
-webkit-animation-name: fadeIn;
    -webkit- animation-duration: 1.5s;
    animation-name: fadeIn;
    animation-duration: 1.5s;
	}


/**ロゴ**/
.logos{
	width: 50%;
	max-width: 600px;
	margin: 0 auto 0;
	padding-bottom:7%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

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

.logos .opa{
	width: 15%;
	
}

.logos .opa02{
	width: 23%;
	padding-top: 3%;
}

.logos .vivre{
	width: 18%;
	padding-top: 3%;
}

.logos .forus{
	width: 25%;
	padding-top: 4%;
}


@keyframes fadeIn {
    0% {
      opacity: 0
    }

    100% {
      opacity: 1
    }
  }

  @-webkit-keyframes fadeIn {
    0% {
      opacity: 0
    }

    100% {
      opacity: 1
    }
  }