@charset "euc-jp";
* {
    margin: 0;
    padding: 0;
    line-height: 1;
}
ul,li,dl,dt,dd,p,h1,h2,h3,h4,h5,h6{margin: 0px;padding: 0px;list-style: none;font-weight: unset}

#fence-flowchart .smp{display:none !important;}

/*------------------------------------------------*/
/*     ベース     */
/*------------------------------------------------*/
body{
	font-family: "Figtree", 'Noto Sans JP', sans-serif;
	font-size: 100%;
	width: 100%;
	color: #454545;
	font-weight: 400;
	text-align: center;
	min-width: 1000px;
	background-color: #f7f7f7;
}
#fence-flowchart a{text-decoration: none;color: #454545;}
#fence-flowchart img{backface-visibility: hidden;-webkit-backface-visibility: hidden;width: 100%;}
#fence-flowchart a img{border:none;}


/*------------------------------------------------*/
/*     リンク    */
/*------------------------------------------------*/
a, a:hover {
	text-decoration: none;
	transition: .3s;
}
img, a img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}
div.ques li{position: relative;}
div.ques li a{
	position: absolute;
	width: 100%;
	height: 100%;
	top:0;
	left: 0;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}


/*------------------------------------------------*/
/*     ベース     */
/*------------------------------------------------*/
#fence-flowchart{
	width: 100%;
	font-size: 18px;
	font-weight: 400;
	margin: auto;
}


/*------------------------------------------------*/
/*     ヘッダー     */
/*------------------------------------------------*/
#fence-flowchart header{
	background: #666666;
        width: 100%;
        padding: 0 0 1.5%;
        margin: 0 0 5vw;
}
/*スライダー*/
#fence-flowchart header .slider-wrapper {
	display: flex; /* スライドのグループを横並び */
	overflow: hidden; /* はみ出たスライドを隠す */
}
#fence-flowchart header .slider {
	animation: scroll-left 50s infinite linear .5s both;
	display: flex;
}
#fence-flowchart header .slide {
        width: calc(100vw / 12);
        margin: 3px 12px 15px;
}
#fence-flowchart header .slide img {
	display: block;
	width: 100%;
}
@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/*タイトル*/
#fence-flowchart h1 p{
        color: #FFFFFF;
        font-size: 3.5vw;
        letter-spacing: 1px;
	    font-weight: 600;
}
#fence-flowchart h1 span{
        display: block;
        font-size: 46%;
}
#fence-flowchart h1 span.cp{
	display: inline;
        font-size: 100%;
        font-weight: 600;
        color: #FFFFFF;
}
#fence-flowchart h1 p strong{
        font-weight: 400;
        line-height: 1.7em;
}


/*-------------------------------------------------------------------*/
/*     メインブロック     */
/*-------------------------------------------------------------------*/
#fence-flowchart main .main2:nth-of-type(1),#fence-flowchart main .main2:nth-of-type(2){
	display: flex;
	justify-content: center;
}
#fence-flowchart main section#question,#fence-flowchart main section#answer{
        position: relative;
	width: 100%;
	max-width: 750px;
}


/*-------------------------------------------------------------------*/
/*共通*/
/*-------------------------------------------------------------------*/
/*戻るボタン*/
#fence-flowchart .back{
        position: relative;
        z-index: 11;
        text-align: left;
        clear: both;
}
#fence-flowchart .back p{
        text-align: right !important;
        position: relative;
}
#fence-flowchart .back p span{
	position: absolute;
        top: 8%;
        left: 77%;
}
#fence-flowchart .back p:hover{color:#e48e5b;}
#fence-flowchart .ansblock .back p{text-align: right !important;}

/*本文*/
#fence-flowchart p{line-height: 1.7em;}

/*カネヤくん*/
#fence-flowchart .cock{position: absolute;}
#fence-flowchart .cock_01{
        width: 45%;
        top: -30%;
        right: -15%;
	opacity: 0;
}
#fence-flowchart .cock_02{
        width: 27%;
        top: -1%;
        right: -5%;
}


/*-------------------------------------------------------------------*/
/*質問パート*/
/*-------------------------------------------------------------------*/
/*枠*/
#question div.com{
        border-radius: 10px;
        margin: 0 0 4vh;
        padding: 4% 6.5%;
	overflow: hidden; 
        box-sizing: border-box;
}
#question div.area{background-color: #fffffff2;}

/*スタート文*/
#start p.first{
	letter-spacing: 0.1vw;
        line-height: 2.4vw;
}

/*診断をはじめるボタン*/
#question #start a.btn_st h3{
        background-color: #e48e5b;
        padding: 1.3rem;
        border-radius: 10px;
        width: 55%;
        margin: 5% auto 2%;
        font-size: 23px;
        font-weight: 500;
	transition: .3s;
        color: #fff;
}
#question #start a.btn_st h3:hover{
	background-color: #e34927;
	transform: scale(1.07,1.07);
	transition: .3s;
}

/*質問*/
#question div.area div.icon_ques{
        font-size: 35px;
        margin: 0 0 2%;
}
#question .ques h3{
	font-size: 20px;
        margin: 1rem auto 2rem;
}
#question div ul{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin: 0 auto 4%;
}
#question div ul li{
        width: calc(94% / 2);
        padding: 3% 0;
        background-color: #75786b;
        color: #ffffff;
        border-radius: 10px;
}
#question div ul.first li{
        width: calc(94% / 3);
}
#question li p{
        font-size: 18px;
        letter-spacing: 2px;
}
#question .area li:hover{background-color: #e48e5b;}

/*おすすめポイント*/
#question .area .point{
        border: 1px dotted;
        padding: 10px;
	margin: 0 0 10px;
}
#question .area .point p.osusume{
        color: #e48e5b;
        font-weight: 600;
        font-size: 17px;
}
#question .area .point p{
        text-align: left;
        font-size: 15px;
	margin-bottom:5px;
}
#question .area .point p:last-child{margin-bottom:0;}
#question .area .point p span{font-weight: 600;}


/*-------------------------------------------------------------------*/
/*回答パート*/
/*-------------------------------------------------------------------*/
/*枠*/
#answer .ansblock .answer_waku{
	background-color: #fffffff2;
        border-radius: 10px;
        margin: 0 0 90px;
        padding: 4% 6.5%;
	overflow: hidden; 
        box-sizing: border-box;
}

/*タイトル*/
#answer .ansblock .answer_item ul li h4{
        font-size: 19px;
        margin: 10px 0 14px;
        font-weight: 500;
}
#answer .ansblock .answer_item ul li h5{
        font-size: 36px;
        font-weight: 800;
        margin: 0 0 20px;
        color: #e48e5b;
        line-height: 3vw;
}

/*種類*/
#answer .ansblock .answer_item ul li dd.info{margin: 10px 0 0;}
#answer .ansblock .answer_item ul li dd.info p{
	text-align: left;
        margin: 1px 0;
        letter-spacing: 1px;
}
#answer .ansblock .answer_item ul li dd.info p span{
	background: #75786b;
        color: #fff;
        padding: 4px;
        margin: 0 7px 0 0;
        width: 76px;
        display: inline-block;
        text-align: center;
}

/*ポイント*/
#answer .ansblock .answer_item ul li dd.point{
        border: 1px dotted;
        border-radius: 10px;
        margin: 15px 0 30px;
        padding: 2% 3%;
}
#answer .ansblock .answer_item ul li dd.point h6{
        text-align: left;
        font-size: 25px;
        color: #e48e5b;
        letter-spacing: 3px;
        font-weight: 600;
        margin: 0 0 6px;
}
#answer .ansblock .answer_item ul li dd.point p{
        text-align: left;
        letter-spacing: 1px;
}

/*見出し*/
#answer .ansblock .osusume{margin: 4vw 0 0;}
#answer .ansblock .osusume h7{
	font-size: 36px;
        font-weight: 700;
        letter-spacing: 2px;
}

/*-------------------------------------------------------------------*/
/*　　アニメ　　　*/
/*-------------------------------------------------------------------*/
.box{
	opacity: 0;
}
.fadeUp {
    animation-name:fadeUpAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity: 0;
    }
    
    @keyframes fadeUpAnime{
      from {
        opacity: 0;
        transform: translateY(50px);
      }
    
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }


/*-------------------------------------------------------------------*/
/*　　フッター　　　*/
/*-------------------------------------------------------------------*/
footer{
	position: fixed;
        width: 100vw;
        background-color: #666666;
        bottom: 0;
        padding: 10px 0;
        color: #fff;
        z-index: 100;
}
footer ul{
	display: flex;
        margin: auto;
	width: fit-content;
}
footer ul p{padding: 0.5rem 0;}
footer ul li{margin: 0 1.6rem;}
footer ul a{color: #fff;}